:root{
  --bg:#0d0a18; --bg2:#150f27; --ink:#f6f1ff; --muted:#b9acd6;
  --c1:#ff4d8d; --c2:#ffb02e; --c3:#2ee6c5; --c4:#8d7bff; --c5:#8be04e;
  --display:'Fraunces',Georgia,serif; --body:'Outfit',system-ui,sans-serif;
  --spring:cubic-bezier(.3,1.7,.5,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);min-height:100vh;overflow-x:hidden}
.defs{position:absolute;pointer-events:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--c3);outline-offset:4px;border-radius:12px}

/* ambient background */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(90px);opacity:.38;animation:drift 26s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:var(--c4);left:-15vmax;top:-10vmax}
.aurora i:nth-child(2){background:var(--c1);right:-18vmax;top:25vh;animation-duration:32s;opacity:.28}
.aurora i:nth-child(3){background:var(--c3);left:20vw;bottom:-28vmax;animation-duration:38s;opacity:.22}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.18) rotate(30deg)}}
@keyframes blob{50%{border-radius:40% 60% 45% 55%/55% 40% 60% 45%}}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px clamp(16px,4vw,44px);
  background:linear-gradient(var(--bg),rgba(13,10,24,0));}
.logo{display:flex;align-items:center;gap:10px;font:800 24px var(--display)}
.logo svg{transition:transform .6s var(--spring)}
.logo:hover svg{transform:rotate(-25deg) scale(1.15)}
.nav nav{display:flex;align-items:center;gap:clamp(10px,2.2vw,30px)}
.nav nav a{position:relative;padding:6px 4px;font-weight:500}
.uline{position:absolute;left:0;bottom:-4px;width:100%;height:9px;overflow:visible}
.uline path{fill:none;stroke:url(#paint);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .5s ease}
.nav nav a:hover .uline path,.nav nav a.on .uline path{stroke-dashoffset:0}
.loved{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:50% 45% 55% 50%/55% 50% 45% 50%;background:rgba(255,255,255,.08);font-weight:600}

/* views + layout */
main{position:relative;z-index:2}
.view{display:none;min-height:100vh;padding:110px clamp(18px,5vw,64px) 80px;animation:fadeUp .7s ease both}
.view.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}}
.eyebrow{font:600 13px var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--c3)}
h1,h2,h3{font-family:var(--display);line-height:1.05}
.lede{color:var(--muted);max-width:56ch;font-size:19px}
.page-head{max-width:1280px;margin:0 auto 40px}
.page-head h2{font-size:clamp(52px,9vw,110px);font-weight:800;margin:6px 0 12px;background:linear-gradient(100deg,var(--c2),var(--c1) 45%,var(--c4));-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;padding-bottom:.08em}
.page-head h2.small{font-size:clamp(34px,5vw,56px)}
.page-head.sub{margin-top:70px}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center;max-width:1280px;margin:0 auto;min-height:calc(100vh - 230px)}
#heroTitle{font-size:clamp(54px,8.6vw,128px);font-weight:800;margin:10px 0 22px;filter:hue-rotate(0);animation:hue 16s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}
#heroTitle .w{display:inline-block;white-space:nowrap}
#heroTitle .ch{display:inline-block;color:hsl(calc(var(--i)*23 + 330) 95% 68%);transition:transform .45s var(--spring)}
#heroTitle .ch:hover{transform:translateY(-.16em) rotate(-8deg) scale(1.18)}
.cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.hero-art{display:flex;flex-direction:column;align-items:center;gap:14px}
.blobframe{width:min(100%,520px);aspect-ratio:1;overflow:hidden;border-radius:58% 42% 50% 50%/48% 56% 44% 52%;animation:morph 12s ease-in-out infinite;box-shadow:0 30px 90px rgba(141,123,255,.35),0 0 0 6px rgba(255,255,255,.06);transition:transform .6s var(--spring)}
.blobframe:hover{transform:scale(1.04) rotate(-2deg)}
.blobframe canvas{width:100%;height:100%;display:block}
@keyframes morph{50%{border-radius:42% 58% 46% 54%/56% 44% 56% 44%}}
figcaption{color:var(--muted);font-size:15px;font-style:italic}

.ribbon{overflow:hidden;margin:20px -64px 0;transform:rotate(-1.6deg);background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4));padding:14px 0}
.ribbon div{display:flex;gap:28px;width:max-content;animation:run 36s linear infinite;align-items:center;padding-left:28px}
.ribbon span{font:800 28px var(--display);color:#150a26;white-space:nowrap}
.ribbon i{width:14px;height:14px;background:#150a26;border-radius:50% 40% 60% 50%;flex:none}
@keyframes run{to{transform:translateX(-50%)}}

/* buttons: ink blots */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:16px 30px;border:0;font-weight:600;color:#1b0e2b;cursor:pointer;
  background:linear-gradient(120deg,#ffc247,#ff7aa8,#b79cff,#ffc247);background-size:240% 100%;
  border-radius:58% 42% 55% 45%/50% 55% 45% 50%;animation:blob 6s ease-in-out infinite;
  transition:transform .35s var(--spring),background-position .8s ease,box-shadow .3s;box-shadow:0 10px 30px rgba(255,92,147,.3)}
.btn:hover{transform:translateY(-4px) rotate(-1.5deg) scale(1.05);background-position:100% 0;box-shadow:0 18px 40px rgba(255,92,147,.45)}
.btn:active{transform:scale(.92,.86)}
.btn.ghost{background:rgba(255,255,255,.07);color:var(--ink);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
.btn.ghost:hover{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px var(--c3)}
.btn.sm{padding:11px 20px;font-size:15px}

/* brush arrows */
.arrow{width:62px;height:30px;overflow:visible;flex:none}
.arrow .shaft,.arrow .head{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .55s ease}
.btn:hover .arrow .shaft,.lb-nav:hover .arrow .shaft{animation:redraw .7s ease}
.btn:hover .arrow .head,.lb-nav:hover .arrow .head{animation:redraw .7s .25s ease both}
@keyframes redraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{border:0;padding:8px 20px;border-radius:55% 45% 50% 50%/50% 55% 45% 50%;background:rgba(255,255,255,.08);cursor:pointer;font-weight:500;transition:transform .3s var(--spring),background .3s}
.chip:hover{transform:translateY(-3px) rotate(-2deg)}
.chip[aria-pressed=true]{background:linear-gradient(120deg,#ffc247,#ff7aa8);color:#1b0e2b;font-weight:600}

/* gallery cards: pebbles */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(22px,3vw,44px);max-width:1280px;margin:0 auto}
.card{position:relative;perspective:900px}
.pebble{position:relative;aspect-ratio:4/5;overflow:hidden;cursor:pointer;border:0;padding:0;width:100%;display:block;background:var(--bg2);
  border-radius:var(--r1);transition:border-radius .8s ease,transform .4s ease,box-shadow .4s;transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));box-shadow:0 18px 50px rgba(0,0,0,.5)}
.card:hover .pebble{border-radius:var(--r2);box-shadow:0 28px 70px rgba(141,123,255,.35)}
.pebble canvas{width:100%;height:100%;display:block;transition:transform .8s ease}
.card:hover .pebble canvas{transform:scale(1.07)}
.cap{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:16px 8px 0}
.cap h3{font-size:22px;font-weight:500}
.cap p{font-size:14px;color:var(--muted)}
.tagdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--tag,var(--c1))}

/* the paint-heart like button */
.like{position:relative;flex:none;width:52px;height:52px;border:0;background:rgba(255,255,255,.07);cursor:pointer;border-radius:55% 45% 50% 50%/50% 55% 45% 50%;display:grid;place-items:center;transition:transform .4s var(--spring),background .3s}
.like:hover{transform:scale(1.14) rotate(-6deg);background:rgba(255,255,255,.14)}
.like:active{transform:scale(.85)}
.like svg{width:30px;height:30px;overflow:visible}
.like .outline{fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.like .fill{fill:url(#paint);transform:translateY(24px);transition:transform .7s cubic-bezier(.3,1.3,.4,1)}
.like[aria-pressed=true] .fill{transform:translateY(0)}
.like[aria-pressed=true] .outline{stroke:transparent}
.like.pop svg{animation:heartpop .7s var(--spring)}
@keyframes heartpop{0%{transform:scale(.6)}40%{transform:scale(1.4) rotate(-10deg)}100%{transform:scale(1)}}
.drop{position:fixed;z-index:300;pointer-events:none;border-radius:50% 40% 60% 50%}

/* studio */
.studio{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;max-width:1280px;margin:0 auto;align-items:start}
.easel{padding:14px;background:linear-gradient(135deg,#7a4a22,#3b2410);border-radius:26px 40px 30px 44px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.easel canvas{width:100%;height:auto;display:block;border-radius:14px 22px 16px 24px;touch-action:none;background:#fbf6ec}
.tray{padding:22px;background:rgba(255,255,255,.06);border-radius:40px 24px 44px 28px;backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:14px}
.tray h3{font-size:20px;font-weight:500;color:var(--c2)}
.brushes{display:flex;flex-wrap:wrap;gap:8px}
.brushes button{border:0;padding:8px 16px;background:rgba(255,255,255,.09);border-radius:55% 45% 50% 50%/50% 55% 45% 50%;cursor:pointer;transition:transform .3s var(--spring)}
.brushes button:hover{transform:translateY(-3px) rotate(-3deg)}
.brushes button[aria-checked=true]{background:linear-gradient(120deg,#ffc247,#ff7aa8);color:#1b0e2b;font-weight:600}
.swatches{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.swatches button{width:34px;height:34px;border:0;cursor:pointer;background:var(--c);border-radius:60% 40% 55% 45%/45% 60% 40% 55%;transition:transform .35s var(--spring),box-shadow .2s;box-shadow:inset -4px -5px 8px rgba(0,0,0,.25),inset 3px 3px 6px rgba(255,255,255,.35)}
.swatches button:hover{transform:scale(1.2) rotate(8deg)}
.swatches button[aria-checked=true]{box-shadow:0 0 0 3px var(--bg),0 0 0 6px #fff}
.swatches input{width:38px;height:34px;border:0;background:none;padding:0}
.size{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--muted)}
input[type=range]{accent-color:var(--c1);width:100%}
.row{display:flex;flex-wrap:wrap;gap:10px}
.name{padding:11px 18px;border:2px solid rgba(255,255,255,.2);background:rgba(0,0,0,.25);color:var(--ink);border-radius:30px 18px 30px 22px;font:inherit}
.name::placeholder{color:#a99cc7}
.note{font-size:14px;color:var(--c3);min-height:22px}

/* manifesto */
.quote{font:italic 500 clamp(28px,4.4vw,52px)/1.2 var(--display);margin-top:18px}
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;max-width:1280px;margin:0 auto}
.principles article{padding:30px;background:rgba(255,255,255,.06);border-radius:var(--r,46% 54% 40% 60%/50% 44% 56% 50%);transition:transform .5s var(--spring),border-radius 1s}
.principles article:nth-child(2){--r:60% 40% 55% 45%/42% 56% 44% 58%}
.principles article:nth-child(3){--r:42% 58% 50% 50%/58% 44% 56% 42%}
.principles article:hover{transform:translateY(-8px) rotate(-1deg);border-radius:55% 45% 48% 52%/46% 56% 44% 54%}
.principles h3{font-size:26px;margin-bottom:8px;color:var(--c2)}
.principles p{color:var(--muted)}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;max-width:1280px;margin:0 auto}
.door{padding:24px 22px;min-height:170px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;border:2px dashed rgba(255,255,255,.28);border-radius:90px 90px 20px 20px;transition:transform .5s var(--spring),border-color .3s,background .3s}
.door:hover{transform:translateY(-6px);border-color:var(--c3);background:rgba(46,230,197,.08)}
.door span{font:500 22px var(--display)}
.door small{color:var(--muted);font-size:14px}

/* page-turn paint wipe */
#wipe{position:fixed;inset:0;z-index:150;pointer-events:none;display:flex}
#wipe i{flex:1;transform:translateY(-104%);border-radius:0 0 60% 60%/0 0 90px 90px;margin:0 -1px;transition:transform .6s cubic-bezier(.7,0,.3,1) calc(var(--d)*70ms)}
#wipe i:nth-child(1){--d:0;background:#ff4d8d}#wipe i:nth-child(2){--d:2;background:#ffb02e}#wipe i:nth-child(3){--d:1;background:#2ee6c5}
#wipe i:nth-child(4){--d:3;background:#8d7bff}#wipe i:nth-child(5){--d:1;background:#ff4d8d}#wipe i:nth-child(6){--d:2;background:#ffb02e}#wipe i:nth-child(7){--d:0;background:#2ee6c5}
#wipe.cover i{transform:translateY(0)}
#wipe.leave i{transform:translateY(104%)}
#wipe.reset i{transition:none;transform:translateY(-104%)}

/* lightbox */
#lightbox{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,30px);padding:20px;background:rgba(8,5,16,.9);backdrop-filter:blur(16px);animation:fadeUp .4s ease both}
#lightbox[hidden]{display:none}
.lb-stage{display:flex;gap:clamp(18px,3vw,44px);align-items:center;max-height:100%;overflow:auto;padding:8px}
.lb-frame{height:min(78vh,820px);aspect-ratio:4/5;max-width:56vw;overflow:hidden;border-radius:46% 54% 42% 58%/10% 12% 10% 12%;border-radius:36px 80px 40px 90px;box-shadow:0 30px 100px rgba(141,123,255,.4);flex:none}
.lb-frame canvas{width:100%;height:100%;display:block}
.lb-info{max-width:300px;display:flex;flex-direction:column;gap:14px}
.lb-info h3{font-size:clamp(30px,4vw,46px);font-weight:800}
.lb-info p{color:var(--muted)}
.lb-nav{border:0;background:rgba(255,255,255,.08);width:76px;height:76px;flex:none;border-radius:55% 45% 50% 50%/50% 55% 45% 50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:transform .35s var(--spring),background .3s}
.lb-nav:hover{background:rgba(255,255,255,.16);transform:scale(1.12)}
.lb-nav.prev .arrow{transform:scaleX(-1)}
.lb-close{position:absolute;top:18px;right:22px;width:60px;height:60px;border:0;background:rgba(255,255,255,.08);border-radius:50% 40% 55% 45%;cursor:pointer;transition:transform .5s var(--spring)}
.lb-close:hover{transform:rotate(90deg) scale(1.12)}
.lb-close svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-art{order:-1}.blobframe{width:min(80%,380px)}
  .studio{grid-template-columns:1fr}
  .ribbon{margin:20px -18px 0}
  .lb-stage{flex-direction:column}
  .lb-frame{max-width:80vw;height:auto;width:min(80vw,52vh*.8*1.4)}
  .lb-nav{width:56px;height:56px}.lb-nav .arrow{width:42px}
  .nav nav a{font-size:15px}.logo span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}
.swatches input[type=color]{-webkit-appearance:none;appearance:none;width:38px;height:34px;cursor:pointer}
.swatches input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.swatches input[type=color]::-webkit-color-swatch{border:2px dashed rgba(255,255,255,.6);border-radius:60% 40% 55% 45%/45% 60% 40% 55%}
.swatches input[type=color]::-moz-color-swatch{border:2px dashed rgba(255,255,255,.6);border-radius:60% 40% 55% 45%/45% 60% 40% 55%}

/* atelier (AI room) */
.ai-wrap{position:relative;border-radius:14px 22px 16px 24px;overflow:hidden;background:#000;display:flex;justify-content:center}
.ai-easel canvas{width:auto;max-width:100%;max-height:72vh;margin:0 auto;background:#000}
.ai-loader{position:absolute;inset:0;display:grid;place-items:center;background:rgba(13,10,24,.82);backdrop-filter:blur(6px)}
.ai-loader[hidden]{display:none}
.ai-loader i{position:absolute;width:90px;height:90px;border-radius:50% 40% 60% 50%;mix-blend-mode:screen;animation:swirl 2.4s ease-in-out infinite}
.ai-loader i:nth-child(1){background:var(--c1)}
.ai-loader i:nth-child(2){background:var(--c3);animation-delay:-.8s}
.ai-loader i:nth-child(3){background:var(--c4);animation-delay:-1.6s}
.ai-loader span{position:relative;margin-top:170px;font:italic 500 22px var(--display)}
@keyframes swirl{0%{transform:rotate(0) translateX(46px) scale(1)}50%{transform:rotate(180deg) translateX(20px) scale(1.4)}100%{transform:rotate(360deg) translateX(46px) scale(1)}}
.ai-note{margin-top:14px;padding:0 8px}
.note.dim{color:var(--muted);min-height:0}
textarea.name{resize:vertical;min-height:96px}
.door.open{border-style:solid;border-color:var(--c3);background:rgba(46,230,197,.1)}
.btn:disabled{opacity:.45;cursor:not-allowed;animation:none;transform:none}
#aiIdeas button{font-size:13px;padding:5px 12px;color:var(--muted);text-align:left}
#aiIdeas button:hover{color:var(--ink)}

/* brand logo */
.logo-mark{display:block;width:54px;height:54px;flex:none;background:#fffdf4 url(assets/logo.jpg) 50% 3%/150% auto no-repeat;border-radius:55% 45% 50% 50%/50% 55% 45% 50%;box-shadow:0 4px 18px rgba(0,0,0,.4),0 0 0 2px rgba(255,255,255,.15);transition:transform .6s var(--spring),border-radius .8s}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.12);border-radius:45% 55% 50% 50%/55% 45% 55% 45%}
.full-logo{display:block;width:min(320px,70vw);height:auto;margin:10px 0 6px;border-radius:34px 64px 40px 70px;box-shadow:0 20px 60px rgba(141,123,255,.35)}

/* ===== molds + paint guide ===== */
.wood{background:linear-gradient(90deg,rgba(0,0,0,.1),transparent 30%,rgba(255,255,255,.06) 62%,rgba(0,0,0,.12)),repeating-linear-gradient(90deg,#8d5b32 0 22px,#7e4f2a 22px 24px,#966439 24px 50px,#85552f 50px 52px)}
.filters{display:grid;gap:12px;max-width:1280px;margin:0 auto 26px}
.frow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.frow>b{width:140px;flex:none;font:500 16px var(--display);color:var(--c2)}
.frow .chips{margin:0;gap:8px}
.chip{font-size:15px}
.search{max-width:520px;width:100%}
.count{max-width:1280px;margin:0 auto 18px;color:var(--muted)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(18px,2.4vw,32px);max-width:1280px;margin:0 auto}
.mgrid.small{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.mcard{display:flex;flex-direction:column;gap:8px;transition:transform .4s var(--spring)}
.mcard:hover{transform:translateY(-6px) rotate(-1deg)}
.mwood{position:relative;aspect-ratio:5/6;border-radius:var(--r);display:grid;place-items:center;padding:16px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.45);transition:border-radius .8s}
.mcard:hover .mwood{border-radius:46% 54% 50% 50%/54% 46% 54% 46%}
.mwood svg,.ba svg{width:100%;height:100%;filter:drop-shadow(0 8px 8px rgba(0,0,0,.45))}
.mcard h3{font-size:20px;font-weight:500;padding:0 6px}
.mcard p{font-size:14px;color:var(--muted);padding:0 6px}
.mini-badge{position:absolute;top:10px;right:10px;padding:2px 10px;border-radius:40% 60% 50% 50%;background:linear-gradient(120deg,#ffc247,#ff7aa8);color:#1b0e2b;font-size:12px}

.guide{max-width:1280px;margin:0 auto;--a1:var(--c2);--a2:var(--c1)}
.guide[data-mood=sacred]{--a1:#ffb703;--a2:#ff6b35}
.guide[data-mood=kids]{--a1:#ff5d8f;--a2:#3ec1f3}
.guide[data-mood=flag]{--a1:#ff9933;--a2:#2fbf4a}
.guide[data-mood=calm]{--a1:#2ee6c5;--a2:#8be04e}
.g-head h2{font-size:clamp(40px,7vw,86px);font-weight:800;margin:6px 0 14px;background:linear-gradient(100deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;max-width:100%;padding-bottom:.08em}
.g-head .eyebrow{color:var(--a1)}
.back{display:inline-block;margin-bottom:14px;color:var(--muted);font-weight:500;transition:transform .3s var(--spring),color .2s}
.back:hover{color:var(--ink);transform:translateX(-6px)}
.pillrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pillrow button{border:0;padding:8px 16px;background:rgba(255,255,255,.09);border-radius:55% 45% 50% 50%/50% 55% 45% 50%;cursor:pointer;transition:transform .3s var(--spring)}
.pillrow button:hover{transform:translateY(-3px) rotate(-3deg)}
.pillrow button[aria-checked=true]{background:linear-gradient(120deg,#ffc247,#ff7aa8);color:#1b0e2b;font-weight:600}
.pillrow .linkbtn{background:none}
.tag{padding:4px 14px;border-radius:55% 45% 50% 50%/50% 55% 45% 50%;background:rgba(255,255,255,.1);font-size:14px}
.facts{display:flex;flex-wrap:wrap;gap:12px 36px;margin:18px 0 6px}
.facts div{display:flex;flex-direction:column;font-size:17px}
.facts b{font:600 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ritual{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.diya{display:flex;align-items:center;gap:10px;border:0;background:rgba(255,255,255,.07);padding:6px 22px 6px 14px;border-radius:55% 45% 50% 50%/50% 55% 45% 50%;cursor:pointer;font-weight:500;transition:transform .35s var(--spring)}
.diya:hover{transform:scale(1.06) rotate(-2deg)}
.diya .flame{opacity:0;transform-origin:40px 42px;transition:opacity .6s}
.lit .diya .flame{opacity:1;animation:flicker 1.1s ease-in-out infinite alternate}
@keyframes flicker{from{transform:scale(1,.92) rotate(-2deg)}to{transform:scale(1.06,1.06) rotate(2deg)}}
.guide.lit::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% -10%,rgba(255,183,3,.3),transparent 62%);animation:glow 3s ease-in-out infinite alternate}
@keyframes glow{to{opacity:.55}}

.journey{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:22px 0 28px}
.jn{display:flex;align-items:center;gap:8px;padding:7px 16px 7px 8px;border-radius:55% 45% 50% 50%/50% 55% 45% 50%;background:rgba(255,255,255,.08);font-size:15px}
.jn b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14);font-size:13px}
.jn.done{background:linear-gradient(120deg,var(--a1),var(--a2));color:#1b0e2b;font-weight:600}
.jn.done b{background:rgba(255,255,255,.55)}
.journey.big .jn{font-size:17px;padding:10px 20px 10px 10px}
.jhome{max-width:1280px;margin:70px auto 0}
.jhome h2.small{font-size:clamp(34px,5vw,56px);font-weight:800}

.g-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(22px,3.4vw,52px);align-items:start}
h3.sm{font-size:22px;font-weight:500;color:var(--a1);margin:18px 0 8px}
.ba{position:relative;aspect-ratio:1/1.08;border-radius:34px 60px 40px 64px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.ba-layer{position:absolute;inset:0;display:grid;place-items:center;padding:9%}
.ba-layer.after{clip-path:inset(0 0 0 var(--p,50%))}
.ba-layer img{max-width:100%;max-height:100%;object-fit:contain}
.ba [data-r]{cursor:pointer;transition:opacity .3s}
.dim{opacity:.2}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--p,50%);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 14px rgba(0,0,0,.6);pointer-events:none}
.ba-handle i{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.ba-tag{position:absolute;top:14px;padding:3px 14px;border-radius:40% 60% 50% 50%;background:rgba(13,10,24,.7);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.ba-tag.l{left:14px}.ba-tag.r{right:14px}
.ba-range{position:absolute;left:4%;right:4%;bottom:10px;width:92%;accent-color:#fff}
.colours{display:flex;flex-direction:column;gap:8px}
.colrow{display:flex;align-items:center;gap:12px;width:100%;padding:8px 14px 8px 10px;border:0;border-radius:30px 18px 30px 22px;background:rgba(255,255,255,.07);text-align:left;cursor:pointer;transition:transform .3s var(--spring),background .2s}
.colrow:hover{transform:translateX(5px)}
.colrow[aria-pressed=true]{background:rgba(255,255,255,.17);box-shadow:inset 0 0 0 2px var(--a1)}
.colrow span{display:flex;flex-direction:column;line-height:1.25}
.colrow small{color:var(--muted);font-size:13px}
.sw{flex:none;width:34px;height:34px;border-radius:60% 40% 55% 45%/45% 60% 40% 55%;box-shadow:inset -4px -5px 8px rgba(0,0,0,.25),inset 3px 3px 6px rgba(255,255,255,.35)}
.palette{margin-top:6px;padding:14px;border-radius:24px 40px 26px 36px;background:rgba(255,255,255,.07)}
.palette .swatches button{width:30px;height:30px}
.linkbtn{border:0;background:none;color:var(--c3);text-decoration:underline;cursor:pointer;padding:4px 8px;font-size:14px}
.card-note{margin-top:20px;padding:22px 24px;border-radius:40px 24px 44px 28px;background:rgba(255,255,255,.07)}
.card-note h3{font-size:22px;color:var(--a1);margin-bottom:6px}
.card-note p{color:var(--muted)}
.sect{margin-top:46px}
.steps{list-style:none;padding:0;display:grid;gap:12px}
.steps li{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border-radius:30px 20px 34px 24px;background:rgba(255,255,255,.06);transition:background .3s}
.steps li.done{background:rgba(46,230,197,.12)}
.steps input{width:22px;height:22px;margin-top:4px;accent-color:var(--c3);flex:none}
.steptitle{border:0;background:none;font:500 21px var(--display);color:var(--ink);cursor:pointer;text-align:left;padding:0}
.steptitle:hover{color:var(--a1)}
.steps p{color:var(--muted);margin-top:2px}
.cheer{margin-top:14px;color:var(--c3);font-weight:600}
.kit{margin:6px 0 14px 22px;color:var(--muted)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;margin:16px 0}
.pgrid figure{margin:0}
.pgrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:30px 18px 34px 22px}
.pgrid figcaption{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
.seal{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border-radius:50%;margin:12px 0;padding:18px;text-align:center;background:radial-gradient(circle at 30% 25%,#fff6c8,#ffb703 60%,#c77d00);color:#3b1d00;font:800 15px/1.15 var(--display);border:4px double #7a4a00;box-shadow:0 10px 30px rgba(255,183,3,.4);transform:rotate(-8deg);animation:sealin .8s var(--spring)}
.seal span{font-size:24px}
@keyframes sealin{from{transform:rotate(-60deg) scale(0)}}

/* mood layer: petals fall on devotional pages, confetti rises on kids' pages */
.mood-layer{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.mood-layer span{position:absolute;top:-30px;border-radius:80% 0 80% 0;opacity:.8;animation:fall var(--t) linear var(--d) infinite}
.mood-layer[data-mood=kids] span{top:auto;bottom:-30px;border-radius:50%;animation-name:rise}
@keyframes fall{to{transform:translate(var(--dx),112vh) rotate(var(--rot))}}
@keyframes rise{to{transform:translate(var(--dx),-112vh) rotate(var(--rot))}}

@media (max-width:900px){
  .g-top{grid-template-columns:1fr}
  .frow>b{width:100%}
}

/* ===== 3D viewer + team upload studio ===== */
.vstage{aspect-ratio:1/1.08;touch-action:none}
.vhost{position:absolute;inset:0}
.vhost[hidden],.vphoto[hidden]{display:none}
.vphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4%}
.mwood.photo{padding:0}
.mwood.photo img{width:100%;height:100%;object-fit:cover;display:block}
.mini-badge.d3{background:linear-gradient(120deg,#2ee6c5,#8d7bff)}

#view-team .page-head h2{background:linear-gradient(100deg,var(--c3),var(--c4));-webkit-background-clip:text;background-clip:text}
#teamRoot{max-width:1280px;margin:0 auto}
.login{max-width:420px;display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:40px 24px 44px 28px;background:rgba(255,255,255,.07)}
.rules{padding:24px 28px;border-radius:40px 24px 44px 28px;background:rgba(255,255,255,.07);margin-bottom:22px}
.rules h3{font-size:24px;font-weight:500;color:var(--c2);margin-bottom:10px}
.rules ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding-left:0;list-style:none;counter-reset:r}
.rules li{counter-increment:r;display:flex;flex-direction:column;gap:2px;padding-left:46px;position:relative}
.rules li::before{content:counter(r);position:absolute;left:0;top:0;width:34px;height:34px;display:grid;place-items:center;border-radius:55% 45% 50% 50%/50% 55% 45% 50%;background:linear-gradient(120deg,#ffc247,#ff7aa8);color:#1b0e2b;font-weight:700}
.rules li span{color:var(--muted);font-size:15px}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:34px 20px;border:2px dashed rgba(255,255,255,.35);border-radius:46px 30px 50px 34px;cursor:pointer;transition:background .3s,transform .4s var(--spring),border-color .3s}
.dropzone b{font:500 24px var(--display)}
.dropzone span{color:var(--muted)}
.dropzone:hover,.dropzone.over{background:rgba(46,230,197,.1);border-color:var(--c3);transform:scale(1.01)}
.teambar{margin:18px 0}
.titems{display:grid;gap:20px}
.titem{padding:18px;border-radius:34px 20px 38px 24px;background:rgba(255,255,255,.06);border-left:6px solid rgba(255,255,255,.2)}
.titem[data-status=ready]{border-left-color:var(--c3)}
.titem[data-status=rejected],.titem[data-status=failed],.titem[data-status=reshoot]{border-left-color:var(--c1)}
.titem[data-status=review]{border-left-color:var(--c2)}
.titem[data-status=published]{border-left-color:var(--c5)}
.ttop{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.tthumb{width:160px;height:160px;object-fit:cover;border-radius:26px 14px 30px 18px;flex:none;background:#000}
.tmain{flex:1;min-width:260px;display:flex;flex-direction:column;gap:12px}
.tform{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.tform input.name{grid-column:1/-1}
select.name{appearance:auto}
select.name option{background:#1b1230;color:#f6f1ff}
.tstatus{font-weight:600}
.s-ready,.s-published{color:var(--c3)}
.s-rejected,.s-failed,.s-reshoot{color:#ff8fa8}
.s-review{color:var(--c2)}
.issues{list-style:none;padding:0;display:grid;gap:8px}
.issues li{display:flex;flex-direction:column;padding:10px 14px;border-radius:20px 12px 22px 14px;background:rgba(255,77,141,.12)}
.issues span{color:var(--muted);font-size:14px}
.review{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.15);display:grid;gap:12px;max-width:620px}
.review .vstage{max-width:520px}
.thumbs figure{margin:0;display:inline-block}
.thumbs img{width:120px;height:120px;border-radius:20px;object-fit:cover}
.thumbs figcaption{font-size:13px;color:var(--muted)}
.pubrow{display:flex;gap:16px;align-items:center;padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
.pubrow a{font-weight:600}
.pubrow span{color:var(--muted);font-size:14px;flex:1}

/* phase 2: painted switch, videos, alignment notes */
.colrow.static{cursor:default}.colrow.static:hover{transform:none}
.painted{display:grid;gap:14px;max-width:760px}
.note.warn{color:#ffb4c4}
.swatches .sw{width:34px;height:34px}
.vbox{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.tvideo{width:200px;aspect-ratio:9/16;border-radius:22px;background:#000;object-fit:cover}
.pillrow .pillrow{display:contents}

/* colour customiser (customers) and zone editor (team) */
.cust{display:grid;gap:10px}
.cust .zones{display:flex;flex-direction:column;gap:8px}
.cust .colrow:disabled{opacity:.5;cursor:not-allowed}
.cust .swatches{padding:12px;border-radius:24px 40px 26px 36px;background:rgba(255,255,255,.07)}
.cust .swatches button{width:30px;height:30px}
.cust .swatches button:disabled{opacity:.4;cursor:not-allowed}
.paintlist{list-style:disc;margin:0 0 0 20px;color:var(--muted);font-size:15px}
.paintlist .dim{list-style:none;margin-left:-20px;font-style:italic}
.zgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px;align-items:start}
.zstage{position:relative;width:100%;aspect-ratio:1;border-radius:30px 18px 34px 22px;overflow:hidden;background:#9a948a;touch-action:none}
.zstage canvas{position:absolute;inset:0;width:100%;height:100%}
.zov{cursor:crosshair}
.zside{display:grid;gap:10px}
.zlist{display:grid;gap:8px}
.zrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:22px 14px 24px 16px;background:rgba(255,255,255,.06)}
.zrow.on{box-shadow:inset 0 0 0 2px var(--c2);background:rgba(255,255,255,.12)}
.zrow input.name{flex:1;min-width:120px;padding:6px 12px}
.zrow small{color:var(--muted);flex-basis:100%}
.zsug button{font-size:13px;padding:4px 12px}
.chk{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:15px}
@media (max-width:900px){.zgrid{grid-template-columns:1fr}}

/* 360 scans */
.review.wide{max-width:760px}
.review.wide .vstage{max-width:560px}
.rulelist{margin:0 0 0 20px;color:var(--muted);font-size:15px;display:grid;gap:4px}

/* opening intro */
#intro{display:none;position:fixed;inset:0;z-index:1000;background:#05030a;overflow:hidden}
.intro-on #intro{display:block}
.intro-on body{overflow:hidden}
#intro .pw,#intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro-circle{position:absolute;left:50%;top:50%;border-radius:50%;background:#fdfdf1;transform:translate(-50%,-50%) scale(0);overflow:hidden;box-shadow:0 0 90px 36px rgba(253,253,241,.32);will-change:transform}
.intro-brush{position:absolute;pointer-events:none;display:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4));will-change:transform}
.intro-skip{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;z-index:5;border:0;padding:9px 20px;border-radius:55% 45% 50% 50%/50% 55% 45% 50%;background:rgba(255,255,255,.16);color:#fff;font:500 15px var(--body);cursor:pointer;backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);transition:background .25s,transform .35s var(--spring)}
.intro-skip:hover{background:rgba(255,255,255,.3);transform:scale(1.06)}
.intro-enter{top:auto;bottom:max(28px,env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%);background:#fdfdf1;color:#3b2a1e}
.intro-enter:hover{transform:translateX(-50%) scale(1.06)}

/* intro: touch to begin + sound button */
.intro-begin{position:absolute;inset:0;z-index:4;border:0;background:radial-gradient(ellipse at 50% 55%,rgba(60,30,8,.55),transparent 60%);color:#f3e6c8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;cursor:pointer;font:inherit}
.intro-halo{position:absolute;left:50%;top:50%;width:min(70vmin,520px);height:min(70vmin,520px);transform:translate(-50%,-62%);border-radius:50%;background:radial-gradient(circle,rgba(255,170,60,.42),rgba(255,120,30,.14) 45%,transparent 70%);animation:halo 3.2s ease-in-out infinite alternate;pointer-events:none}
@keyframes halo{from{opacity:.65;transform:translate(-50%,-62%) scale(.94)}to{opacity:1;transform:translate(-50%,-62%) scale(1.06)}}
.intro-begin svg{position:relative;overflow:visible;filter:drop-shadow(0 0 26px rgba(255,160,50,.75))}
.intro-flame{transform-origin:40px 43px;animation:flick 1.2s ease-in-out infinite alternate}
@keyframes flick{from{transform:scale(1,.93) rotate(-2.5deg)}to{transform:scale(1.05,1.06) rotate(2.5deg)}}
.intro-begin-text{position:relative;font:italic 500 clamp(22px,4.4vw,34px) var(--display);letter-spacing:.04em;animation:breathe 3.2s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.55}to{opacity:1}}
.intro-begin:focus-visible{outline:3px solid #ffd36b;outline-offset:-10px}
.intro-mute{position:absolute;top:max(16px,env(safe-area-inset-top));left:16px;z-index:6;width:44px;height:44px;border:0;border-radius:50% 45% 55% 50%;display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);transition:background .25s,transform .35s var(--spring)}
.intro-mute:hover{background:rgba(255,255,255,.3);transform:scale(1.08)}
.intro-skip{z-index:6}


/* paintbrush cursor (brush.js adds .brush only when the browser can show it; otherwise the normal pointer stays) */
html.brush,html.brush *{cursor:var(--brush-rest),auto}
html.brush :is(a[href],button,[role=button],summary,select,label[for],input[type=checkbox],input[type=radio],input[type=range],input[type=color],input[type=file],.pebble,.mcard,.chip,.colrow,.like,[data-hot]){cursor:var(--brush-hover),pointer}
html.brush *:active{cursor:var(--brush-press),auto}
html.brush :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit]),textarea,[contenteditable=true]){cursor:text}
html.brush :is(button,input,select,textarea):disabled{cursor:not-allowed}   /* after the hover rule, so a disabled button never looks clickable */
html.brush .vhost canvas,html.brush .vstage canvas{cursor:grab}
html.brush .vhost canvas:active,html.brush .vstage canvas:active{cursor:grabbing}
#brushFx{position:fixed;inset:0;width:100%;height:100%;z-index:1100;pointer-events:none}

/* mehandi */
.mh-pad{position:relative;width:100%;max-width:560px;border-radius:30px;overflow:hidden;background:#3b2a20;box-shadow:0 24px 60px rgba(0,0,0,.45);touch-action:none}
.mh-pad svg,.mh-pad canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mh-ink{touch-action:none}
.mh-work{display:grid;grid-template-columns:minmax(0,560px) minmax(250px,1fr);gap:26px;align-items:start;margin-top:12px}
.mh-side{display:grid;gap:12px}
.mh-padbox{min-width:0}
.mh-feedback{min-height:56px;padding:12px 16px;border-radius:24px 14px 26px 16px;background:rgba(255,255,255,.08);font-weight:500}
.mh-feedback[data-tone=good]{background:rgba(46,158,91,.22)}
.mh-feedback[data-tone=ok]{background:rgba(224,160,32,.22)}
.mh-feedback[data-tone=off]{background:rgba(217,68,63,.22)}
.mh-stats{color:var(--muted);font-size:15px;white-space:pre}
.mh-prog{display:grid;gap:4px;color:var(--muted);font-size:14px}
.mh-master{color:var(--c3)}
.mh-watch,.mh-practice,.mh-sheet{margin-top:34px;display:grid;gap:10px}
.mh-video{width:100%;max-width:560px;border-radius:24px}
.mh-head h2{background:linear-gradient(100deg,#e0832d,#a8321a);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.mh-skill{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;max-width:1280px;margin:0 auto 22px;padding:14px 22px;border-radius:34px 20px 36px 22px;background:rgba(255,255,255,.07)}
.mh-badges{display:flex;gap:8px;flex-wrap:wrap}
.mh-badge{padding:3px 12px;border-radius:55% 45% 50% 50%/50% 55% 45% 50%;background:rgba(255,255,255,.07);font-size:13px;color:var(--muted)}
.mh-badge.got{background:linear-gradient(120deg,#ffc247,#ff7aa8);color:#1b0e2b;font-weight:600}
.mhgrid .mwood{aspect-ratio:5/6;padding:12px;background:#3b2a20}
.mhgrid .mwood svg{width:100%;height:100%;filter:none}
.mini-badge.lock{background:rgba(13,10,24,.85);color:#fff}
.mh-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);opacity:0;z-index:1200;padding:12px 22px;border-radius:30px;background:linear-gradient(120deg,#ffc247,#ff7aa8);color:#1b0e2b;font-weight:600;transition:opacity .4s,transform .5s var(--spring);pointer-events:none}
.mh-toast.on{opacity:1;transform:translate(-50%,0)}
#printSheet{display:none}
@media print{body.printing>*:not(#printSheet){display:none!important}body.printing #printSheet{display:block}body.printing{background:#fff!important;overflow:visible}html.brush body.printing *{cursor:auto}}
@media (max-width:900px){.mh-work{grid-template-columns:1fr}}