:root{
  --ink:#0d0908; --bone:#f4ece1; --dim:#8b7d73;
  --ember:#ff2d0a; --saffron:#ff7a00; --marigold:#ffc400;
  --flame:linear-gradient(0deg,#ff2d0a 0%,#ff7a00 50%,#ffc400 100%);
  --flame-h:linear-gradient(90deg,#ff2d0a,#ff7a00,#ffc400);
  --pad:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --out:cubic-bezier(.16,1,.3,1);
  --io:cubic-bezier(.76,0,.24,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.loading{overflow:hidden}
body{
  background:var(--ink);color:var(--bone);
  font-family:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-variation-settings:"wdth" 100;font-size:17px;line-height:1.4;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit;background:none;border:0;outline:0;border-radius:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--marigold);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400}

/* ---------- chrome (no blend modes: they force a full-screen re-blend every frame) ---------- */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;background-repeat:repeat}
.progress{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--flame-h);transform-origin:0 50%;transform:scaleX(0);z-index:70}
#embers{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.7}
.cursor{position:fixed;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px rgba(13,9,8,.55);pointer-events:none;z-index:100;display:none;opacity:0;transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background .25s,box-shadow .25s,opacity .3s}
.fine .cursor{display:block}
.fine .cursor.live{opacity:1}
.fine body,.fine a,.fine button{cursor:none}
.fine input{cursor:text}
.cursor.big{width:54px;height:54px;margin:-18px 0 0 -18px;background:rgba(255,255,255,.16);box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}

.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:18px var(--pad);color:var(--bone);transition:opacity .9s ease}
.nav::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-22px;z-index:-1;pointer-events:none;background:linear-gradient(var(--ink) 35%,transparent);opacity:0;transition:opacity .35s}
.nav.solid::before{opacity:.94}
.nav .logo{display:flex;align-items:center;gap:11px;font-weight:800;font-variation-settings:"wdth" 80;font-size:22px;letter-spacing:-.01em}
.nav .logo img{display:block;width:40px;height:40px;border-radius:11px}
.anim .nav{opacity:0}
.anim.nav-in .nav{opacity:1}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,24px);z-index:80;
  background:var(--bone);color:var(--ink);padding:14px 20px;border-radius:999px;font-weight:600;font-size:15px;
  opacity:0;pointer-events:none;transition:.45s var(--ease);max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- loader ---------- */
.loader{display:none;position:fixed;inset:0;z-index:90}
.anim .loader{display:block}
.ld-p{position:absolute;left:0;right:0;height:50.5%;background:var(--ink);transition:transform 1.1s var(--io)}
.ld-top{top:0}.ld-bot{bottom:0}
.loader.open .ld-top{transform:translateY(-100%)}
.loader.open .ld-bot{transform:translateY(100%)}
.ld-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;transition:opacity .5s ease,transform .5s ease}
.ld-word{position:relative;font-size:clamp(46px,14vw,200px);font-weight:800;font-variation-settings:"wdth" 75;line-height:1;letter-spacing:-.02em}
.ld-dim{color:rgba(244,236,225,.13)}
.ld-fill{position:absolute;left:0;top:0;background:var(--flame);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;clip-path:inset(0 100% 0 0)}
.ld-n{position:absolute;z-index:2;left:var(--pad);bottom:calc(var(--pad) - 6px);font-size:clamp(40px,8vw,96px);font-weight:300;font-variation-settings:"wdth" 80;font-variant-numeric:tabular-nums;line-height:1;color:var(--dim);transition:opacity .5s ease,transform .5s ease}
.loader.out .ld-center,.loader.out .ld-n{opacity:0;transform:translateY(-24px)}

/* ---------- generic ---------- */
main{position:relative;z-index:2}
.sec{position:relative;padding:clamp(96px,15vw,190px) var(--pad)}
.h{font-size:clamp(50px,11.5vw,178px);line-height:.9;font-weight:800;font-variation-settings:"wdth" 78;letter-spacing:-.02em}
.mask{clip-path:inset(-30% -5% 0 -5%);padding-bottom:.16em;margin-bottom:-.16em}
.mask>span{display:block}
.anim .rv>span{transform:translateY(125%)}
.anim .rv.in>span{transform:none;transition:transform 1.2s var(--out)}
.hr{height:1px;background:rgba(244,236,225,.2);transform-origin:0 50%;margin:0 var(--pad)}
.anim .hr{transform:scaleX(0)}

/* ---------- hero: one huge word, two small voices ---------- */
.hero{position:relative;overflow-x:clip;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:96px var(--pad) var(--pad)}
.word{position:relative;display:flex;flex-direction:column;font-size:42vw;font-weight:800;line-height:.8;letter-spacing:0}
.grp{display:flex;justify-content:space-between;width:100%}
.grp+.grp{margin-top:.09em}
.brk{display:none}
.ch{position:relative;display:block;clip-path:inset(-40% -20% 0 -20%);padding-bottom:.16em;margin-bottom:-.16em;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.ch i{display:block;font-style:normal;font-variation-settings:"wdth" 75,"wght" 700;
  padding:.14em .06em;margin:-.14em -.06em;
  background:linear-gradient(0deg,#ff2d0a 0%,#ff7a00 48%,#ffc400 100%);background-size:100% 240%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:flick 6s ease-in-out infinite alternate}
.grp:nth-child(2) .ch i{animation-delay:-2s}
.grp:nth-child(3) .ch i{animation-delay:-4s}
.anim .ch i{transform:translateY(118%)}
.anim.hero-in .ch i{transform:none;transition:transform 1.4s var(--out);transition-delay:calc(var(--i) * 60ms)}
.measure .ch i{font-variation-settings:"wdth" 88,"wght" 740 !important;transition:none !important}
.measure .grp{width:auto !important}
.measure .word{align-items:flex-start}
.measure .ch{clip-path:none;transform:none !important}
@keyframes flick{0%{background-position:0 0}100%{background-position:0 100%}}
.hero-off .ch i{animation-play-state:paused}

.hero-foot{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:clamp(20px,4vw,40px)}
.tagl{font-size:clamp(26px,6.4vw,40px);line-height:1.05;max-width:9em}
.tagl .ul{position:relative;display:inline-block;white-space:nowrap}
.tagl .ul svg{position:absolute;left:0;bottom:-.14em;width:100%;height:.3em;overflow:visible}
.tagl .ul path{fill:none;stroke:var(--saffron);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.anim .tagl .ul path{stroke-dashoffset:1}
.anim.sub-in .tagl .ul path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--out) .6s}
.cta{display:inline-flex;align-items:center;gap:14px;font-weight:700;font-size:clamp(17px,1.6vw,22px)}
.cta span{display:block}
.cta i{display:grid;place-items:center;width:clamp(52px,4.4vw,68px);aspect-ratio:1;border-radius:50%;background:var(--flame);color:var(--ink);transition:transform .5s var(--out)}
.cta i svg{width:42%;height:42%;transition:transform .45s var(--out)}
.cta:hover i{transform:scale(1.08)}
.cta:hover i svg{transform:translateY(5px)}
.hint{display:block;margin-top:10px;font-size:14px;color:var(--dim);font-weight:400}
.anim .tagl,.anim .cta-w{opacity:0;transform:translateY(18px)}
.anim.sub-in .tagl,.anim.sub-in .cta-w{opacity:1;transform:none;transition:opacity .9s ease,transform .9s var(--out)}
.anim.sub-in .cta-w{transition-delay:.15s}

@media(min-width:900px){
  .word{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;line-height:.8}
  .grp{display:contents}
  .grp+.grp{margin-top:0}
  .brk{display:block;flex-basis:100%;height:0}
  .brk + .ch{margin-left:auto}
  .ch{will-change:transform;transform:translate3d(calc(var(--hp,0) * var(--dir,0) * 16vw),0,0)}
  .grp:nth-child(1) .ch,.grp:nth-child(2) .ch:first-child{--dir:-1}
  .grp:nth-child(2) .ch:not(:first-child),.grp:nth-child(3) .ch{--dir:1}
  .hero-foot{position:static;display:block;margin:0}
  .tagl{position:absolute;right:var(--pad);top:calc(96px + var(--fs,300px) * .1);text-align:right;font-size:clamp(26px,2.5vw,40px)}
  .cta-w{position:absolute;left:var(--pad);bottom:calc(var(--pad) + var(--fs,300px) * .1)}
}

/* ---------- card ---------- */
.card{container-type:inline-size;position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:var(--bg);color:var(--fg);isolation:isolate}
.card.tall{aspect-ratio:auto;height:100%;border-radius:0}
.c-head{position:absolute;left:5cqw;right:5cqw;top:5cqw;z-index:2;display:flex;flex-direction:column;gap:1.8cqw}
.c-name{font-weight:800;font-variation-settings:"wdth" 75;line-height:.82;white-space:nowrap;color:var(--nm);letter-spacing:-.02em}
.c-year{font-size:3.6cqw;font-weight:600;color:var(--yr,var(--fg));opacity:.85}
.c-person{position:absolute;right:-5cqw;bottom:-2cqw;width:66cqw;height:auto;z-index:1;fill:var(--ps);filter:drop-shadow(0 0 .9cqw var(--rim))}
.c-wish{position:absolute;left:5cqw;bottom:37cqw;width:42cqw;z-index:2;font-size:6.6cqw;font-weight:700;line-height:1.04;color:var(--fg);font-variation-settings:"wdth" 85;overflow-wrap:anywhere}
.c-qr{position:absolute;left:5cqw;bottom:10.5cqw;width:25cqw;z-index:2;border-radius:2.4cqw;overflow:hidden;background:#fff6e6;line-height:0}
.c-qr svg{width:100%;height:auto;display:block}
.c-url{position:absolute;left:5cqw;bottom:4.6cqw;z-index:2;font-size:3.1cqw;font-weight:600;text-decoration:underline;text-underline-offset:.5cqw;color:var(--fg);white-space:nowrap}
.glare{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:22px;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.22),transparent 45%);opacity:0;transition:opacity .3s}
.card3d{position:relative}
.card3d:hover .glare{opacity:1}

.t-fire{--bg:linear-gradient(180deg,#ff1a00 0%,#ff8a00 58%,#ffd000 100%);--nm:#fff0a8;--fg:#1a0500;--ps:#1a0a05;--rim:rgba(255,240,168,.7)}
.t-jade{--bg:linear-gradient(180deg,#0e7a56 0%,#032a21 100%);--nm:#ffc400;--fg:#eafff5;--ps:#021611;--rim:rgba(255,196,0,.55)}
.t-night{--bg:radial-gradient(120% 80% at 75% 100%,#6b3300 0%,#1d0d06 52%,#0a0504 100%);--nm:#ffc400;--fg:#f4ece1;--ps:#3a1c0e;--rim:rgba(255,179,71,.9)}
.t-rangoli{--bg:linear-gradient(155deg,#ff2e7e 0%,#8a1fff 56%,#ff7a00 125%);--nm:#fff1d6;--fg:#fff;--ps:#240640;--rim:rgba(255,241,214,.7)}
.t-sindoor{--bg:linear-gradient(180deg,#d1001f 0%,#4a000d 100%);--nm:#ffd9a0;--fg:#ffe9d0;--ps:#1d0006;--rim:rgba(255,217,160,.6)}
.t-peacock{--bg:linear-gradient(180deg,#00c2c7 0%,#0a2a7a 100%);--nm:#07194f;--yr:#07194f;--fg:#eaf6ff;--ps:#04112e;--rim:rgba(255,243,196,.65)}
.t-kesar{--bg:linear-gradient(180deg,#ff9933 0%,#fff1d0 100%);--nm:#5a1500;--fg:#3a1200;--ps:#3a1200;--rim:rgba(255,255,255,.85)}
.t-lotus{--bg:linear-gradient(180deg,#ffd1e8 0%,#ff5fa2 100%);--nm:#5b0a31;--fg:#3b0620;--ps:#3b0620;--rim:rgba(255,255,255,.85)}
.t-sparkler{--bg:linear-gradient(160deg,#c6ff00 0%,#00e0a0 45%,#0a1a5c 115%);--nm:#07210f;--yr:#07210f;--fg:#f0fff8;--ps:#050d33;--rim:rgba(198,255,0,.6)}

/* ---------- make ---------- */
.make{display:grid;gap:44px;grid-template-columns:minmax(0,1fr)}
.cardwrap{width:min(100%,380px);justify-self:center;perspective:1200px;animation:bob 7s ease-in-out infinite}
.cardwrap.paused{animation-play-state:paused}
@keyframes bob{50%{transform:translateY(-10px) rotate(.5deg)}}
.card3d{transform-style:preserve-3d;transition:transform .25s var(--ease)}
.card3d .card{box-shadow:0 40px 90px -30px rgba(255,90,0,.55)}
.fields{display:flex;flex-direction:column;gap:26px}
.fld{display:block}
.fld span{display:block;font-size:15px;color:var(--dim);margin-bottom:2px}
.fld input{width:100%;font-size:clamp(30px,5.4vw,58px);font-weight:700;font-variation-settings:"wdth" 85;line-height:1.15;padding:4px 0 8px;border-bottom:1.5px solid rgba(244,236,225,.28);transition:border-color .3s}
.fld input:focus{border-color:var(--saffron)}
.fld input::placeholder{color:rgba(244,236,225,.25)}
.looks{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sw{position:relative;width:40px;height:40px;border-radius:50%;border:2px solid transparent;outline:2px solid transparent;outline-offset:3px;transition:transform .3s var(--ease),outline-color .3s}
.sw:hover{transform:scale(1.12)}
.sw[aria-pressed="true"]{outline-color:var(--bone)}
.sw svg{position:absolute;right:-4px;bottom:-4px;width:16px;height:16px;padding:3px;border-radius:50%;background:var(--ink);color:var(--marigold);z-index:2}
.sw.custom{background:conic-gradient(from 0deg,#ff2d0a,#ffc400,#2bd67b,#2fa7ff,#8a3dff,#ff2e7e,#ff2d0a)}
.sw.custom::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--ink)}
.sw.custom::before{content:"+";position:absolute;inset:0;z-index:1;display:grid;place-items:center;font-weight:800;font-size:20px;line-height:1;color:var(--bone)}
.look-note{flex-basis:100%;font-size:15px;color:var(--dim);margin-top:2px}
.cust{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.pick{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--dim)}
.pick input[type=color]{-webkit-appearance:none;appearance:none;width:46px;height:46px;padding:0;border-radius:50%;border:2px solid rgba(244,236,225,.45);background:none;cursor:pointer}
.pick input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.pick input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
.pick input[type=color]::-moz-color-swatch{border:0;border-radius:50%}
.urlline{font-size:clamp(16px,2.4vw,22px);color:var(--dim);overflow-wrap:anywhere}
.urlline b{color:var(--bone);font-weight:700}
@media(min-width:900px){
  .make{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"h c" "f c";column-gap:6vw;align-items:start}
  .make .h{grid-area:h}.make .cardwrap{grid-area:c;width:min(100%,430px)}.make .fields{grid-area:f}
}

/* ---------- pinned sections (sticky) ---------- */
.pin{position:relative}
.anim .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* templates */
.tpl .pin{padding:clamp(60px,10vw,120px) 0;overflow-x:auto}
.anim .tpl{height:calc(100svh + var(--dist,600px))}
.anim .tpl .pin{display:flex;flex-direction:column;justify-content:center;padding:0;overflow:hidden}
.tpl .h{padding:0 var(--pad);margin-bottom:clamp(24px,5vw,56px)}
.track{display:flex;gap:clamp(16px,2.4vw,36px);padding:0 var(--pad);width:max-content;will-change:transform}
.tcard{width:clamp(220px,62vw,300px);flex:none}
.tcard:nth-child(even){margin-top:clamp(18px,4vh,44px)}
.tcard figcaption{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-weight:600;font-size:17px}
.tag{font-size:14px;font-weight:600;padding:3px 12px;border-radius:999px;border:1px solid rgba(244,236,225,.3);color:var(--dim)}
.tag.plus{border-color:var(--marigold);color:var(--marigold)}
/* PC: big cards so only 2-3 fit on screen and the sideways scroll is obvious */
@media(min-width:900px){.tcard{width:clamp(260px,28vw,520px);width:clamp(260px,min(28vw,44svh),520px)}}

/* flow */
.flow .pin{--ph:min(58svh,540px);padding:100px var(--pad) 80px}
.anim .flow{height:400svh}
.anim .flow .pin{display:flex;align-items:center;justify-content:center;padding:0}
.flow-words{position:relative;z-index:5;font-size:clamp(54px,16vw,200px);font-weight:800;font-variation-settings:"wdth" 78;line-height:1;letter-spacing:-.02em;margin-bottom:24px}
.fw{white-space:nowrap}
.fw span{display:block}
.anim .flow-words{position:absolute;left:var(--pad);top:clamp(84px,13vh,130px);height:1.1em;width:calc(100% - 2*var(--pad));margin:0}
.anim .fw{position:absolute;left:0;top:0;clip-path:inset(0 -10% 0 -10%);padding:.1em 0}
.anim .fw2 span,.anim .fw3 span{transform:translateY(115%)}
.stage{position:relative;margin:0 auto;width:max-content}
.anim .stage{margin-top:14svh}
.phone{position:relative;height:var(--ph);width:calc(var(--ph)*.49);border-radius:calc(var(--ph)*.075);border:2px solid rgba(244,236,225,.22);background:#000;padding:5px;box-shadow:0 50px 120px -40px rgba(255,90,0,.5)}
.anim .phone{opacity:.3;transform:scale(.94)}
.phone::before{content:"";position:absolute;z-index:4;top:12px;left:50%;width:26%;height:3.2%;transform:translateX(-50%);border-radius:99px;background:#000}
.screen{height:100%;border-radius:calc(var(--ph)*.062);overflow-y:auto;overflow-x:hidden;position:relative;background:#120c0a;scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}
.anim .screen{overflow:hidden}
.s-inner{will-change:transform}
.s-card{height:calc(var(--ph) - 14px)}
.s-gal{padding:46px 10px 40px;background:#120c0a}
.g-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 12px}
.g-head b{font-size:20px;font-weight:800;font-variation-settings:"wdth" 80}
.g-head span{font-size:12px;color:var(--dim)}
.g-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tile{position:relative;aspect-ratio:1/1.2;border-radius:10px;overflow:hidden}
.tile.w{grid-column:span 2;aspect-ratio:2/1.05}
.tile.v::after{content:"";position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.500v11l9-5.500z' fill='%23fff'/%3E%3C/svg%3E") center/70% no-repeat}
.g1{background:radial-gradient(circle at 30% 35%,#ffd000 0,transparent 34%),radial-gradient(circle at 70% 60%,#ff2d0a 0,transparent 40%),#1a0805}
.g2{background:radial-gradient(circle at 50% 80%,#ffb300 0,transparent 36%),linear-gradient(160deg,#3a0d2a,#160509)}
.g3{background:radial-gradient(circle at 25% 25%,#ff7a00 0,transparent 30%),radial-gradient(circle at 75% 75%,#ff2e7e 0,transparent 38%),#12060a}
.g4{background:linear-gradient(180deg,#ffd000,#ff6a00 60%,#7a1500)}
.g5{background:radial-gradient(circle at 60% 40%,#fff1a8 0,#ff9a1a 18%,transparent 46%),#1d0a04}
.g6{background:radial-gradient(circle at 40% 70%,#ff2d0a 0,transparent 42%),radial-gradient(circle at 70% 25%,#ffc400 0,transparent 30%),#0e0605}
.scanner{display:none;position:absolute;z-index:6;left:50%;top:50%;width:calc(var(--ph)*.66);aspect-ratio:1;margin:calc(var(--ph)*-.33) 0 0 calc(var(--ph)*-.33);padding:calc(var(--ph)*.06);border-radius:26px;background:#fff6e6;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.anim .scanner{display:block}
.scanner svg{width:100%;height:100%;display:block}
.scan-bar{position:absolute;left:-6%;right:-6%;top:0;height:3px;background:var(--flame-h);box-shadow:0 0 26px 6px rgba(255,122,0,.8);border-radius:3px;will-change:transform}
.scanner i{position:absolute;width:26px;height:26px;border:3px solid var(--ember)}
.scanner i:nth-of-type(1){left:-10px;top:-10px;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.scanner i:nth-of-type(2){right:-10px;top:-10px;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.scanner i:nth-of-type(3){left:-10px;bottom:-10px;border-right:0;border-top:0;border-radius:0 0 0 12px}
.scanner i:nth-of-type(4){right:-10px;bottom:-10px;border-left:0;border-top:0;border-radius:0 0 12px 0}
@media(min-width:900px){
  .flow .pin{--ph:min(74svh,620px)}
  .anim .flow-words{top:50%;transform:translateY(-50%);width:auto;font-size:clamp(90px,12vw,200px)}
  .anim .stage{margin:0 0 0 34vw}
}

/* ---------- visibility ---------- */
.vis{display:grid;gap:36px;grid-template-columns:minmax(0,1fr);align-items:center}
.vis-h{display:grid}
.vw{grid-area:1/1}
.vw .mask>span{transition:transform .8s var(--ease)}
.vis[data-state="public"] .vw-u .mask>span{transform:translateY(125%)}
.vis[data-state="unlisted"] .vw-p .mask>span{transform:translateY(125%)}
.vsub{display:grid;margin-top:22px;font-size:clamp(20px,2.6vw,30px);color:var(--dim)}
.vsub p{grid-area:1/1;clip-path:inset(0);overflow:hidden}
.vsub p span{display:block;transition:transform .8s var(--ease)}
.vis[data-state="public"] .vsub .u span{transform:translateY(120%)}
.vis[data-state="unlisted"] .vsub .p span{transform:translateY(120%)}
.tog{position:relative;width:clamp(120px,24vw,200px);aspect-ratio:2/1;border-radius:999px;border:2px solid rgba(244,236,225,.3);background:rgba(244,236,225,.04);transition:border-color .6s var(--ease)}
.tog i{position:absolute;top:8%;left:4%;width:42%;height:84%;border-radius:50%;background:var(--flame);display:grid;place-items:center;transition:transform .65s cubic-bezier(.3,1.35,.5,1),filter .6s}
.tog i svg{width:46%;height:46%;color:var(--ink);opacity:0;transform:scale(.2) rotate(-30deg);transition:opacity .25s .2s,transform .5s .2s cubic-bezier(.34,1.8,.64,1)}
.tog[aria-checked="true"] i svg{opacity:1;transform:none}
.tog:active{transform:scale(.96)}
.tog[aria-checked="true"]{border-color:rgba(244,236,225,.5)}
.tog[aria-checked="true"] i{transform:translateX(124%);filter:grayscale(1) brightness(.9)}
@media(min-width:900px){.vis{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}.vis .tog{justify-self:end}}

/* ---------- find ---------- */
.find .dom b{color:var(--bone);font-weight:700}
.find .dom{display:block;font-size:clamp(16px,2.6vw,28px);color:var(--dim);font-weight:500;margin-top:clamp(28px,5vw,60px)}
.find-f{position:relative;display:flex;align-items:center;gap:16px;border-bottom:4px solid transparent;border-image:var(--flame-h) 1}
.find-f input{flex:1;min-width:0;font-size:clamp(60px,17vw,250px);font-weight:800;font-variation-settings:"wdth" 78;line-height:1.05;letter-spacing:-.02em;padding:0}
.find-f input::placeholder{color:rgba(244,236,225,.18)}
.go{flex:none;width:clamp(56px,9vw,104px);aspect-ratio:1;border-radius:50%;background:var(--flame);display:grid;place-items:center;color:var(--ink);transition:transform .4s var(--ease)}
.go:hover{transform:rotate(-45deg) scale(1.08)}
.go:active{transform:rotate(-45deg) scale(.92)}
.find-f:focus-within .go svg{animation:nudge .9s var(--ease) infinite}
@keyframes nudge{50%{transform:translateX(18%)}}
.go svg{width:44%;height:44%}

/* ---------- plans ---------- */
.plans{display:grid;gap:clamp(44px,7vw,90px);grid-template-columns:minmax(0,1fr);margin-top:clamp(40px,7vw,90px)}
.plan h3{font-size:clamp(44px,8vw,120px);font-weight:800;font-variation-settings:"wdth" 78;line-height:.95;letter-spacing:-.02em;display:flex;align-items:center;gap:.25em;padding-bottom:.1em}
.plan.plus h3{background:var(--flame-h);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;width:max-content;max-width:100%}
.plan h3 svg{width:.5em;height:.5em;color:var(--marigold);flex:none}
.plan ul{list-style:none;margin-top:18px;border-top:1px solid rgba(244,236,225,.2)}
.plan li{overflow:hidden;border-bottom:1px solid rgba(244,236,225,.12);font-size:clamp(20px,2.5vw,28px);font-weight:600}
.plan li span{display:block;padding:14px 0}
.anim .plan li span{transform:translateY(105%)}
.anim .plan.in li span{transform:none;transition:transform 1s var(--out);transition-delay:calc(var(--i) * 80ms)}
.plan .lead{margin-top:16px;color:var(--dim);font-size:clamp(17px,2vw,22px)}
.plans-sec{padding-bottom:clamp(120px,16vw,220px)}
@media(min-width:900px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
footer{position:relative;z-index:2;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px var(--pad) calc(28px + env(safe-area-inset-bottom));border-top:1px solid rgba(244,236,225,.14);color:var(--dim);font-size:15px}


/* ---------- play (short bursts only; nothing runs continuously) ---------- */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:95;pointer-events:none;display:none}
.snd{display:none;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(244,236,225,.3);place-items:center;color:var(--dim);transition:color .3s,border-color .3s,transform .25s var(--ease)}
.anim .snd{display:grid}
.snd svg{width:20px;height:20px}
.snd .on,.snd[aria-pressed="true"] .off{display:none}
.snd[aria-pressed="true"] .on{display:block}
.snd[aria-pressed="true"]{color:var(--marigold);border-color:var(--marigold)}
.snd:active,.dice:active,.chip:active{transform:scale(.93)}
.c-name{transform-origin:0 60%}.c-wish{transform-origin:0 100%}.c-person{transform-origin:62% 100%}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:-12px}
.chip{padding:6px 14px;border:1px solid rgba(244,236,225,.28);border-radius:999px;font-size:15px;font-weight:500;color:var(--dim);transition:color .25s,border-color .25s,transform .25s var(--ease)}
.chip:hover{color:var(--bone);border-color:var(--saffron)}
.dice{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:10px 20px 10px 14px;border-radius:999px;border:1.5px solid rgba(244,236,225,.3);font-weight:600;font-size:16px;transition:border-color .3s,transform .25s var(--ease)}
.dice:hover{border-color:var(--saffron)}
.dice svg{width:22px;height:22px;color:var(--marigold)}
.urlhint{font-size:15px;color:var(--dim);margin-top:-14px}
.wipe{position:absolute;inset:0;z-index:4;pointer-events:none}
.ld-diya{position:absolute;z-index:2;right:var(--pad);bottom:var(--pad);width:clamp(48px,7vw,88px);transition:opacity .5s ease,transform .5s ease}
.ld-diya .bw{fill:#8b4a1f}
.ld-diya .fl{fill:#ffb300;opacity:0;transform:scale(.1);transform-origin:50% 100%;transform-box:fill-box;transition:opacity .35s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.loader.lit .ld-diya .fl{opacity:1;transform:none}
.loader.lit .ld-diya{filter:drop-shadow(0 0 14px rgba(255,150,0,.65))}
.loader.out .ld-diya{opacity:0;transform:translateY(-24px)}
.ring,.flash{display:none;position:absolute;pointer-events:none}
.anim .ring,.anim .flash{display:block}
.ring{inset:0;z-index:7;border-radius:calc(var(--ph)*.075);border:3px solid var(--marigold);opacity:0}
.flash{inset:0;z-index:2;border-radius:26px;background:#fff;opacity:0}
.plan.plus h3 svg .sh{transform-box:fill-box;transform-origin:100% 100%;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.plan.plus:hover h3 svg{animation:wig .6s}
.plan.plus:hover h3 svg .sh,.plan.plus h3:active svg .sh{transform:translateY(-2.5px) rotate(-24deg)}
@keyframes wig{20%{transform:rotate(-12deg)}45%{transform:rotate(10deg)}70%{transform:rotate(-6deg)}100%{transform:none}}
@media(hover:hover){
  .tcard .card{transition:transform .5s var(--out)}
  .tcard:hover .card{transform:translateY(-10px) rotate(-.6deg)}
  .tcard .card::after{content:"";position:absolute;inset:-20%;z-index:5;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);transform:translateX(-120%)}
  .tcard:hover .card::after{transform:translateX(120%);transition:transform .9s var(--out)}
}
.made{font:inherit;color:inherit;transition:color .3s}
.made:hover{color:var(--bone)}
.diyas{flex-basis:100%;display:flex;justify-content:space-between;align-items:flex-end;height:0;overflow:hidden;transition:height .45s var(--out)}
.diyas.on{height:46px}
.dy{width:34px;height:40px;flex:none}
.dy .bw{fill:#8b4a1f}
.dy .fl{fill:var(--marigold);opacity:0;transform:scale(.2);transform-origin:50% 100%;transform-box:fill-box;transition:opacity .4s,transform .55s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--k) * 90ms)}
.diyas.on .dy .fl{opacity:1;transform:none}

/* ---------- adaptive quality: slow machines get a lighter page, same layout ---------- */
.p1 .grain,.p1 #embers{display:none}
.p1 .card3d .card,.p1 .phone{box-shadow:none}
.p1 .c-person{filter:none;stroke:var(--rim);stroke-width:1.6}
.p1 .glare{display:none}
.p2 .cardwrap{animation:none}
.p2 .ch i{animation:none}
/* calm = the OS asked for less motion (incl. Windows "best performance"): the scroll story still works, decoration is off */
.calm *,.calm *::before,.calm *::after{animation:none!important;transition:none!important}