:root{
  color-scheme:dark;
  --ink:#0d0b09;--bg:#0b1712;--bg-lift:#17291f;--bg-deep:#08110d;--paper:#f1e4c3;--muted:#9d917c;
  --red:#b8301f;--red-deep:#74170e;--yellow:#f6cf3a;--kraft:#c9a46d;
  --ease:cubic-bezier(.2,.8,.2,1);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y proximity}
body{margin:0;background:var(--bg);color:var(--paper);font:400 15px/1.5 'Ranade',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.defs{position:absolute;width:0;height:0}


/* Hero */
.hero{position:relative;height:100svh;min-height:620px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;isolation:isolate;scroll-snap-align:start;
  background:radial-gradient(90% 70% at 50% 42%,var(--bg-lift),var(--bg) 70%)}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s;
  background:radial-gradient(55% 50% at 50% 34%,#ff9a3c26,#ff7a2a0d 50%,transparent 75%)}
.hero:has([data-state=burning])::before,.hero:has(.scene:not([data-act=box]))::before{opacity:1}
.hero:has([data-state=fountain])::before{background:radial-gradient(70% 70% at 50% 42%,#ffb45a40,#ff8a3a14 55%,transparent 80%)}
.hero::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:#ffd9a0;mix-blend-mode:soft-light}
.hero:has([data-state=fountain])::after{animation:flash 1.2s ease-out}
.bar{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 40px 0}
/* poster lockup: pixel caps in yellow between two starbursts */
.party{display:flex;align-items:center;gap:.5em;margin:0;font:700 56px/1 'Pixelify Sans',monospace;letter-spacing:.03em;text-transform:uppercase;color:var(--yellow);text-shadow:0 .08em 0 #3a5a12}
.party svg{width:.62em;height:.62em;color:var(--yellow)}
.kicker,.when,.next{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.7;transition:color 1s}
.hero:has([data-state=burning]) :is(.kicker,.when,.next){color:#d6c3a0}

.scene{position:relative;place-self:center;width:min(92vw,1080px,calc((100svh - 190px) * 1.39));aspect-ratio:100/72;container-type:inline-size}

/* Tabletop props: die-cut stickers in the dark around the box; they warm up when the match is lit */
.props{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.prop{position:absolute;height:auto;filter:brightness(.62) saturate(.85) drop-shadow(0 1vw 1.4vw #0008);transition:filter 1.2s}
.hero:has([data-state=burning]) .prop,.hero:has(.scene:not([data-act=box])) .prop{filter:brightness(1) saturate(1) drop-shadow(0 1vw 1.4vw #0008)}
.hero:has(.scene:is([data-state=fountain],[data-state=spent],[data-act=mithai])) .diya{filter:brightness(1.15) drop-shadow(0 0 2.4vw #ffb44acc)}
/* left side, top to bottom */
.marigold{width:14vw;left:-3vw;top:17vh;rotate:-12deg}
.petal{width:4.5vw}
.p2{left:9vw;top:33vh;width:3.8vw;rotate:-40deg}
.cards{width:11vw;left:5vw;top:49vh;rotate:-16deg}
.chips{width:8vw}
.c1{left:16vw;top:60vh;rotate:-6deg}
.ladoo{width:14vw;left:-3vw;bottom:9vh;rotate:8deg}
.diya{width:8vw;left:22vw;bottom:8vh;rotate:-4deg}
/* right side, top to bottom */
.d2{left:auto;right:19vw;bottom:auto;top:4vh;width:6.5vw;rotate:12deg}
.drink{width:12vw;right:3vw;top:10vh;rotate:7deg}
.marigold-yellow{width:12vw;right:-3vw;top:42vh;rotate:18deg}
.p3{right:8vw;top:41vh;rotate:-30deg}
.p4{right:5vw;top:57vh;width:3.8vw;rotate:70deg}
.mithai{width:14vw;right:-2vw;bottom:9vh;rotate:-9deg}
.k2{left:auto;top:auto;right:24vw;bottom:5vh;width:9vw;rotate:22deg}
.stage{position:absolute;inset:0;rotate:-2deg;transition:scale .9s var(--ease)}
.scene[data-state=idle] .stage{scale:1.3}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* Drawer: kraft tray, lit from the top left */
.drawer{position:absolute;left:25.5cqw;top:18.6cqw;width:49cqw;height:29.8cqw;z-index:1;border-radius:.3cqw;
  background:var(--noise),linear-gradient(160deg,#d3b07a,var(--kraft) 50%,#b48d58);background-blend-mode:multiply;
  border:1.2cqw solid;border-color:#ddc08b #a88150 #987243 #cba771;
  box-shadow:inset 0 0 1.6cqw #46280a73;filter:drop-shadow(1cqw 2.2cqw 2cqw #0008);
  transition:translate .9s var(--ease)}
.drawer::after{content:'';position:absolute;left:-1.2cqw;right:-1.2cqw;top:calc(100% + 1.2cqw);height:3cqw;border-radius:0 0 .3cqw .3cqw;background:linear-gradient(#a27b47,#76552d)}
.tray{position:absolute;inset:1.4cqw 2.6cqw;display:flex;flex-direction:column;justify-content:space-between}
.tray i{position:relative;display:block;width:36cqw;height:1.3cqw;border-radius:.4cqw;background:linear-gradient(#f3dcaa,#d9b97f 55%,#a8834d);box-shadow:0 .35cqw .4cqw #3c1e0866}
.tray i::before{content:'';position:absolute;left:-.7cqw;top:50%;width:3.4cqw;height:2.2cqw;translate:0 -50%;border-radius:55% 45% 45% 55%/50%;
  background:radial-gradient(circle at 30% 30%,#e0603f,#a2301c 50%,#5c150a);box-shadow:.2cqw .3cqw .4cqw #3c1e0880}
.tray i:nth-child(2n){translate:.5cqw 0}.tray i:nth-child(5n+1){translate:-.4cqw 0;rotate:.5deg}.tray i:nth-child(7){rotate:-.6deg}
.scene:is([data-state=extracting],[data-state=striking],[data-state=burning],[data-state=out]) .tray i:nth-child(3){visibility:hidden}

/* Sleeve: printed label on top, striker on the front face */
.sleeve{position:absolute;left:25cqw;top:18cqw;width:50cqw;height:31cqw;z-index:3;padding:0;border:0;border-radius:.4cqw;background:none;
  filter:drop-shadow(1.2cqw 2.4cqw 2cqw #000a);transition:translate .9s var(--ease),filter .8s}
.sleeve:focus-visible{outline-offset:1.2cqw}
.sleeve:disabled{cursor:progress}
.sleeve::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .8s;
  background:radial-gradient(110% 90% at 42% -15%,#ffbe6e73,transparent 60%)}
.label{position:absolute;inset:0;display:block;padding:.9cqw;border-radius:inherit;
  background:var(--noise),radial-gradient(130% 100% at 30% 20%,#c23722,var(--red) 55%,#9c2617);background-blend-mode:multiply;
  box-shadow:inset 0 0 0 .15cqw #0003,inset 0 0 2.5cqw #3c000059}
.panel{position:relative;display:block;height:100%;padding:1.1cqw;border:.18cqw solid var(--paper);background:radial-gradient(circle,var(--paper) 0 .2cqw,transparent .25cqw) center/1.1cqw 1.1cqw}
.inner{display:grid;grid-template-rows:auto 1fr auto;height:100%;padding:0 1.6cqw;outline:.18cqw solid var(--paper);
  background:var(--noise),var(--red);background-blend-mode:multiply;color:var(--paper);text-transform:uppercase}
.corner{position:absolute;width:2.6cqw;height:2.6cqw;color:var(--yellow);translate:-50% -50%}
.corner:nth-of-type(1){left:.55cqw;top:.55cqw}.corner:nth-of-type(2){left:calc(100% - .55cqw);top:.55cqw}
.corner:nth-of-type(3){left:.55cqw;top:calc(100% - .55cqw)}.corner:nth-of-type(4){left:calc(100% - .55cqw);top:calc(100% - .55cqw)}
.band{display:flex;justify-content:space-between;align-items:center;padding:.8cqw 0 .7cqw;font-size:.95cqw;font-weight:700;letter-spacing:.22em;line-height:1;border-bottom:.12cqw solid #f1e4c399}
.band:last-child{border-bottom:0;border-top:.12cqw solid #f1e4c399}
.band:first-child{padding-top:.6cqw;padding-bottom:.5cqw}
.label-logo{display:block;height:4.4cqw;width:auto}
.body{display:flex;align-items:center;justify-content:center;gap:2.8cqw;min-width:0}
.seal{display:grid;place-items:center;width:11.5cqw;aspect-ratio:1;border-radius:50%;flex:none;
  background:repeating-conic-gradient(var(--yellow) 0 7.5deg,#e8b425 0 15deg);
  box-shadow:0 0 0 .3cqw var(--red),0 0 0 .55cqw var(--paper);outline:.25cqw dotted var(--paper);outline-offset:1cqw}
.seal svg{width:80%}
.name{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.name span{font-size:2.1cqw;font-weight:700;letter-spacing:.2em}
.name strong{margin:.5cqw 0 .3cqw;font:800 6.6cqw/1 'Sarpanch',sans-serif;letter-spacing:.01em;color:var(--yellow);text-shadow:.3cqw .3cqw 0 var(--red-deep)}
.face{position:absolute;left:0;right:0;top:100%;height:3.2cqw;border-radius:0 0 .5cqw .5cqw;background:linear-gradient(var(--red-deep),#5e140c)}
.face::before{content:'';position:absolute;inset:.6cqw 1cqw;border-radius:.2cqw;--shine:-40%;
  background:linear-gradient(90deg,transparent,#ffd9a066,transparent) var(--shine) 0/30% 100% no-repeat,radial-gradient(#8a573c .1cqw,transparent .14cqw) 0 0/.45cqw .45cqw,radial-gradient(#140905 .1cqw,transparent .14cqw) .22cqw .22cqw/.45cqw .45cqw,#3b2118}
.face::after{content:'';position:absolute;top:50%;left:12%;width:62%;height:.6cqw;translate:0 -50%;transform-origin:left;scale:0 1;
  background:linear-gradient(90deg,transparent,#ffdcb459 15%,#ffdcb433 85%,transparent)}
.drawer{translate:calc(var(--open,0) * -22cqw) 0}
.sleeve{translate:calc(var(--open,0) * 21cqw) 0;touch-action:none}
.scene:not([data-state=idle]){--open:1}
.scene.dragging :is(.drawer,.sleeve){transition:none;animation:none}
.scene[data-state=idle] .sleeve{cursor:grab}
.scene.dragging .sleeve{cursor:grabbing}
.scene[data-state=idle]:not(.dragging) .drawer{animation:peek 4s 1.5s ease-in-out infinite}
.scene[data-state=idle]:not(.dragging):not(:has(.sleeve:hover)) .stage{animation:wiggle 4s 1.5s ease-in-out infinite}
.scene[data-state=idle] .hint{animation:breathe 4s 1.5s ease-in-out infinite}
.scene[data-state=idle]:not(.dragging):has(.sleeve:hover) .drawer{animation:none;translate:-2.5cqw 0}

/* Opened: sleeve and drawer pulled apart */
.scene[data-state=striking] .face::after{animation:scratch .65s cubic-bezier(.6,0,.4,1) forwards}
.face::after{scale:var(--scratch,0) 1}
.scene:is([data-state=burning],[data-state=out]){--scratch:1}
.scene[data-state=holding] .face::before{animation:shine 1.8s ease-in-out infinite}
.scene:is([data-state=open],[data-state=out]) .drawer{cursor:pointer;touch-action:none}
.scene:is([data-state=open],[data-state=out]) .tray i:not(.taken)::before{animation:beckon 2.4s ease-in-out infinite}
.tray i.taken{visibility:hidden}
.scene[data-mode=hand]:is([data-state=holding],[data-state=burning]){cursor:none;touch-action:none}
.scene[data-mode=hand]:is([data-state=holding],[data-state=burning],[data-state=out]) .match{animation:none;opacity:1}
.scene[data-mode=hand][data-state=burning] .fire{animation:catch .6s ease-out both}
.scene[data-state=burning] .sleeve{filter:drop-shadow(.2cqw 3.4cqw 2.4cqw #000b)}
.scene[data-state=burning] .sleeve::after{opacity:1}

/* The match: a vertical stick, head up, positioned by its centre (0.65cqw, 18cqw) */
.match{position:absolute;left:0;top:0;width:1.3cqw;height:36cqw;z-index:5;opacity:0;pointer-events:none;border-radius:.4cqw;
  translate:49.35cqw 9cqw;rotate:2deg;background:linear-gradient(90deg,#b8945c,#f0d9a6 40%,#d8b97f 70%,#a98550);
  filter:drop-shadow(1cqw 1.8cqw 1cqw #0007)}
.head{position:absolute;left:50%;top:-.8cqw;width:2.2cqw;height:3.4cqw;translate:-50% 0;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;
  background:radial-gradient(circle at 35% 30%,#e0603f,#a2301c 50%,#5c150a);transition:background .6s,scale .6s}
.char{position:absolute;inset:0 0 auto;height:0;border-radius:inherit;background:linear-gradient(#120d0a,#2c1f17 70%,#3c231400)}
.fire{position:absolute;left:50%;top:0;width:7cqw;height:11cqw;translate:-50% -86%;transform-origin:50% 92%;opacity:0;scale:.2;transition:opacity .3s,scale .3s}
.fire::before{content:'';position:absolute;inset:-70%;border-radius:50%;background:radial-gradient(closest-side,#ffbe5a66,transparent)}
.flame{position:relative;width:100%;height:100%;overflow:visible;transform-origin:50% 92%;filter:drop-shadow(0 0 1.4cqw #ff9632b3)}
.glow{position:absolute;left:51cqw;top:7cqw;width:170cqw;aspect-ratio:1;translate:-50% -50%;z-index:4;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .8s;
  background:radial-gradient(closest-side,#ffb85c52,#ff8c3214 40%,transparent 75%)}

.scene[data-state=extracting] .match{animation:take 1.35s cubic-bezier(.45,0,.25,1) forwards}
.scene[data-state=striking] .match{animation:strike .65s cubic-bezier(.6,0,.4,1) forwards}
.scene:is([data-state=burning],[data-state=out]) .match{opacity:1}
.scene[data-state=burning] .match{animation:lift .9s var(--ease) both}
.scene[data-state=burning] .char{height:24%;transition:height 12s linear}
.scene[data-state=out] .char{height:24%}
.scene:is([data-state=burning],[data-state=out]) .head{background:radial-gradient(circle at 40% 35%,#5a4a40,#1c1512 60%);scale:.92}
.scene[data-state=burning] .fire{opacity:1;scale:1;animation:catch .6s ease-out both,upright .9s var(--ease) both}
.scene[data-state=burning] .flame{animation:flicker .6s ease-in-out infinite}
.scene[data-state=burning] .core{transform-origin:50% 95%;animation:flicker .37s ease-in-out infinite reverse}
.scene[data-state=burning] .glow{opacity:1;animation:glow 2.6s ease-in-out infinite}

@keyframes peek{0%,84%,100%{translate:0 0}88%,95%{translate:-3cqw 0}}
@keyframes wiggle{0%,66%,86%,100%{rotate:-2deg}70%{rotate:-4.5deg}74%{rotate:.5deg}78%{rotate:-3.6deg}82%{rotate:-1.2deg}}
@keyframes breathe{0%,60%,100%{opacity:.6}75%,90%{opacity:1}}
@keyframes scratch{to{scale:1 1}}
@keyframes shine{from{--shine:-40%}to{--shine:140%}}
@keyframes beckon{0%,100%{filter:none}50%{filter:brightness(1.35) drop-shadow(0 0 .6cqw #ff8a4a99)}}
@property --shine{syntax:'<percentage>';inherits:false;initial-value:-40%}
@keyframes take{
  0%{opacity:1;translate:24.65cqw 9.03cqw;rotate:-90deg;scale:1}
  20%{translate:24.65cqw 7.6cqw;rotate:-90deg;scale:1.08}
  60%{translate:29cqw 22cqw;rotate:-20deg;scale:1.1}
  100%{opacity:1;translate:38.35cqw 43.5cqw;rotate:50deg;scale:1.05}}
@keyframes strike{
  0%{opacity:1;translate:38.35cqw 43.5cqw;rotate:50deg;scale:1.05}
  15%{translate:39cqw 43.9cqw;rotate:51deg}
  100%{opacity:1;translate:69.35cqw 43.5cqw;rotate:46deg;scale:1.05}}
@keyframes lift{0%{translate:69.35cqw 43.5cqw;rotate:46deg;scale:1.05}100%{translate:49.35cqw 9cqw;rotate:2deg;scale:1}}
@keyframes upright{from{rotate:-44deg}to{rotate:0deg}}
@keyframes catch{0%{opacity:.3;scale:.2}35%{opacity:1;scale:1.45}100%{opacity:1;scale:1}}
@keyframes flicker{0%,100%{transform:none}25%{transform:scale(.97,1.05) skewX(-2deg)}50%{transform:scale(1.03,.96) skewX(1.5deg)}75%{transform:scale(.98,1.02) skewX(-1deg)}}
@keyframes glow{0%,100%{scale:1}30%{scale:.96}55%{scale:1.02}80%{scale:.98}}

/* Act 2: the anar. Act 3: a kaju katli. Each slides in once the previous act is done. */
.scene:not([data-act=box]) :is(.drawer,.sleeve){opacity:0;translate:0 30cqw;pointer-events:none;transition:opacity .7s,translate .9s var(--ease)}
.anar,.sweet{position:absolute;z-index:2;padding:0;border:0;background:none;opacity:0;pointer-events:none;translate:0 14cqw;transition:opacity .8s,translate .9s var(--ease)}
.scene[data-act=anar] .anar,.scene[data-act=mithai] .sweet{opacity:1;translate:0 0;pointer-events:auto}
.scene[data-act=mithai] .anar{translate:0 -8cqw}
.anar{left:35cqw;top:23cqw;width:30cqw}
.anar svg{display:block;width:100%;overflow:visible}
.anar .scorch{opacity:0;transition:opacity 1.5s}
.scene:is([data-state=spent],[data-act=mithai]) .anar .scorch{opacity:.85}
.scene:is([data-state=fuse],[data-state=fountain],[data-state=spent]) .wick{stroke:#2a201a;transition:stroke 1.4s linear}
.tip,.mouth{position:absolute;width:0;height:0;translate:-50% -50%}
.tip{left:51%;top:7.7%}
.mouth{left:50%;top:30.8%}
.tip::before{content:'';position:absolute;inset:-.9cqw;border-radius:50%;background:radial-gradient(closest-side,#ffd27a,#ff9a3c66 50%,transparent);opacity:0}
.scene[data-act=anar][data-state=burning] .tip::before{animation:pulse 1.4s ease-in-out infinite}
.sweet{left:27cqw;top:13cqw;width:46cqw;cursor:pointer;transition:opacity .8s,translate .9s var(--ease),scale .15s}
.sweet:active{scale:.98}
.sweet img{display:block;width:100%}
.sweet .plate{filter:drop-shadow(0 2cqw 2cqw #0009)}
.sweet .piece{position:absolute;inset:0;transition:opacity .4s,scale .4s}
.sweet .piece.gone{opacity:0;scale:.9}
.scene[data-state=eaten] .sweet{translate:0 -6cqw;opacity:0;transition-delay:.6s}
.match{transition:opacity .6s}
@keyframes pulse{0%,100%{opacity:.2;scale:.8}50%{opacity:1;scale:1.3}}
@keyframes flash{0%{opacity:.7}100%{opacity:0}}

/* Controls */
.controls{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:24px;padding:0 40px 34px;position:relative;z-index:7}
.when{margin:0}
.next{justify-self:end;padding:10px 0}
.next:hover{color:var(--paper)}
.hint{position:absolute;left:50%;top:55cqw;translate:-50% 0;margin:0;z-index:7;white-space:nowrap;pointer-events:none;
  padding:.42em 1em .48em;border-radius:999px;border:1px solid #f1e4c338;background:#0d0b098c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 8px 24px #0006;font:700 clamp(20px,2.2vw,32px)/1.1 'Ranade',sans-serif;letter-spacing:-.01em;color:var(--paper);transition:opacity .3s,top .5s var(--ease)}
/* sit just under whatever is on the table; "You're invited" takes centre stage */
.scene[data-state=idle] .hint{top:60cqw}
.scene[data-act=anar] .hint{top:64cqw}
.scene[data-act=mithai] .hint{top:50cqw}
.scene[data-state=eaten] .hint{top:30cqw}
.hint[data-sub]{border-radius:.9em;text-align:center}
.hint[data-sub]::after{content:attr(data-sub);display:block;margin-top:.35em;font-size:.6em;font-weight:500;letter-spacing:0;color:#e9dcbd}
.scene .hint.pop{animation:pop .55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{0%{opacity:0;scale:.8;filter:blur(6px);translate:-50% 10px}100%{opacity:1;scale:1;filter:blur(0);translate:-50% 0}}
.scene:is([data-state=opening],[data-state=extracting],[data-state=striking]) .hint{opacity:0}

/* Invitation */
.invite{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:32px;padding:64px 20px;background:var(--bg-deep);scroll-snap-align:start}
.poster{display:block;width:min(100%,520px,calc(78svh * 2 / 3));height:auto;border-radius:6px;outline:1px solid #ffffff1a;outline-offset:-1px;box-shadow:0 30px 80px #0009}
.back{display:inline-flex;align-items:center;gap:.4em;padding:.42em 1em .48em;border-radius:999px;border:1px solid #f1e4c338;background:#0d0b098c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 8px 24px #0006;font:700 clamp(20px,2.2vw,32px)/1.1 'Ranade',sans-serif;letter-spacing:-.01em;color:var(--paper);transition:scale .15s,border-color .2s,box-shadow .2s}
.back:hover{border-color:#f1e4c37a;box-shadow:0 8px 24px #0006,0 0 28px #ff9a3c40}
.back:active{scale:.96}

@media (max-width:720px){
  .bar{padding:30px 16px 0;gap:8px}
  .party{font-size:34px;gap:.35em}  /* own row up top; the props start below it */
  .scene{width:100vw}
  .scene:is([data-act=anar],[data-act=mithai]) .stage{scale:1.35}
  .marigold{width:30vw;left:-12vw;top:12%}
  .petal{width:11vw}
  .p2,.p3,.d2,.k2,.ladoo,.diya{display:none}
  .p4{right:12vw;top:32%}
  .chips{width:20vw}
  .c1{left:18vw;top:auto;bottom:14%}
  .drink{width:21vw;right:-4vw;top:12%}
  .cards{width:26vw;left:-8vw;top:auto;bottom:11%}
  .marigold-yellow{width:20vw;right:-6vw;top:27%}
  .mithai{width:32vw;right:-7vw;bottom:10%}
  .scene[data-state=idle] .stage{scale:1.6}
  .controls{padding:0 20px 24px}
  .hint{top:56cqw}
  .scene[data-state=idle] .hint{top:66cqw}
  .scene[data-act=anar] .hint{top:73cqw}
  .scene[data-act=mithai] .hint{top:54cqw}
  .scene[data-state=eaten] .hint{top:30cqw}
  .when,.next{font-size:11px;letter-spacing:.08em}
  .invite{gap:24px;padding:48px 20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .scene[data-state=burning] .fire{opacity:1;scale:1;rotate:0deg}
}