/* ================== THE OPERA OF US ================== */
:root{
  --canvas:#100a0c; --gold:#d9b262; --gold-hi:#f4dfa4; --gold-lo:#8f6a2a;
  --ivory:#f4ecdc; --text-2:#d8cab0; --blush:#e8b7b9; --powder:#b3c8dc;
  --velvet:#6b1520; --paper:#f3e9d4; --ink:#3a2618;
  --f-label:'Cinzel',Georgia,serif;
  --f-body:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --f-script:'Pinyon Script','Snell Roundhand',cursive;
  --ease:cubic-bezier(.22,.8,.24,1);
  --tshadow:0 1px 2px rgba(10,5,6,.9),0 2px 14px rgba(10,5,6,.7);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--canvas);-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--canvas);color:var(--ivory);font:500 19px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
html.locked,body.locked{overflow:hidden;height:100%;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px;border-radius:6px}
[hidden]{display:none!important}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:#23161b;padding:10px 14px;border-radius:8px;color:var(--ivory)}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.script{font-family:var(--f-script);font-weight:400;line-height:1.08;margin:0}
.script.big{font-size:clamp(3.2rem,14vw,7.6rem)}
.script.mid{font-size:clamp(2.4rem,9vw,4rem)}
.kicker{font:600 .72rem/1.3 var(--f-label);letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:0}
.lede{font-style:italic;color:var(--text-2);font-size:clamp(1.1rem,4vw,1.35rem);max-width:30ch;margin:.5rem auto 0}
.cap .line,.lede,.hint,.ov-line,.paper h2,.paper .close,.finale-title{text-wrap:balance}
.gold{background:linear-gradient(180deg,#fff3cf 0%,#e8c373 45%,#b0842f 72%,#f6dd97 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- the fixed theatre ---------- */
#screen{position:fixed;inset:0;z-index:1;overflow:hidden;background:var(--canvas)}
#stage{position:absolute;inset:0;margin:0 auto;overflow:hidden}
/* landscape with a portrait-only clip: the film sits in a gilded cabinet */
body.cabinet #screen{background:radial-gradient(ellipse 70% 90% at 50% 50%,#3a1016 0%,#1c080b 60%,#0c0506 100%)}
body.cabinet #stage{width:calc(100svh * 9 / 16);box-shadow:0 0 0 2px #b8913f,0 0 0 9px #5a3c18,0 0 0 11px #e9c877,0 40px 120px rgba(0,0,0,.7)}
.scene{position:absolute;inset:0;visibility:hidden;overflow:hidden}
.scene.on{visibility:visible}
.scene:not(.on) .gph{visibility:hidden!important}
.scene>canvas,.scene>img.still,.media>*{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.scene>img.still{opacity:0}
.scene>img.still.show{opacity:1}
.veil{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:0;background:#000}
#dust{position:absolute;inset:0;width:100%;height:100%;z-index:31;pointer-events:none}
.grain{position:absolute;inset:0;z-index:32;pointer-events:none;opacity:.08;mix-blend-mode:overlay;
  background-image: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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- captions ---------- */
.caps{position:absolute;inset:0;z-index:5;pointer-events:none}
.cap{position:absolute;left:0;right:0;margin:0 auto;padding:0 20px;text-align:center;opacity:0;text-shadow:var(--tshadow)}
.cap::before{content:"";position:absolute;left:-20vw;right:-20vw;z-index:-1;pointer-events:none;opacity:var(--o,0)}
.cap[data-pos=top]{top:calc(8svh + var(--safe-t))}
.cap[data-pos=top]::before{top:calc(-8svh - var(--safe-t));height:36svh;background:linear-gradient(180deg,rgba(16,8,10,.78),rgba(16,8,10,0))}
.cap[data-pos=bottom]{bottom:calc(9svh + var(--safe-b))}
.cap[data-pos=bottom]::before{bottom:calc(-9svh - var(--safe-b));height:36svh;background:linear-gradient(0deg,rgba(16,8,10,.8),rgba(16,8,10,0))}
.cap[data-pos=center]{top:50%;transform:translateY(-50%)}
.cap[data-pos=center]::before{top:50%;height:60svh;transform:translateY(-50%);background:linear-gradient(180deg,rgba(16,8,10,0),rgba(16,8,10,.55) 35%,rgba(16,8,10,.55) 65%,rgba(16,8,10,0))}
.cap .kicker{margin-bottom:.7rem}
.cap .line{font:italic 500 clamp(1.75rem,7.2vw,3rem)/1.22 var(--f-body);color:var(--ivory);max-width:18ch;margin:0 auto}
.cap .line.script-line{font:400 clamp(2.8rem,12vw,5.2rem)/1.05 var(--f-script);color:var(--gold-hi);max-width:14ch}
.cap .w{display:inline-block;opacity:var(--wo,0);transform:translateY(calc((1 - var(--wo,0)) * .4em))}
@media (orientation:landscape){
  .cap .line{font-size:clamp(1.6rem,3.2vw,2.8rem);max-width:24ch}
  .cap[data-pos=top]{top:calc(7svh + var(--safe-t))}
  .cap[data-pos=bottom]{bottom:calc(7svh + var(--safe-b))}
}

/* ---------- overture ---------- */
#sc-overture{background:radial-gradient(ellipse 80% 60% at 50% 55%,#4a3018,#1a0f0c 70%)}
.media .vid{opacity:0;transition:opacity .6s var(--ease)}
.media .vid.show{opacity:1}
.shade{position:absolute;left:0;right:0;pointer-events:none;z-index:2}
.shade.top{top:0;height:34svh;background:linear-gradient(180deg,rgba(16,8,10,.8),rgba(16,8,10,0))}
.shade.bottom{bottom:0;height:40svh;background:linear-gradient(0deg,rgba(16,8,10,.88),rgba(16,8,10,0))}
.hit-key,.hit-box{position:absolute;z-index:6;min-width:56px;min-height:56px;border-radius:50%;touch-action:manipulation}
.hit-box{border-radius:40%}
.pulse{position:absolute;z-index:3;pointer-events:none;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,226,150,.45),rgba(255,226,150,0) 65%)}
.late .pulse{animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.15;transform:scale(.94)}50%{opacity:.45;transform:scale(1.04)}}
.ov-top{position:absolute;z-index:4;left:0;right:0;top:calc(7svh + var(--safe-t));text-align:center;padding:0 20px;transition:opacity 1s var(--ease)}
.ov-line{font-style:italic;font-size:clamp(1.15rem,4.4vw,1.45rem);margin:.55rem auto 0;max-width:26ch;text-shadow:var(--tshadow)}
.ov-bottom{position:absolute;z-index:4;left:0;right:0;bottom:calc(5svh + var(--safe-b));display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;padding:0 16px;transition:opacity 1s var(--ease)}
.cd-label{font:600 .66rem/1 var(--f-label);letter-spacing:.3em;text-transform:uppercase;color:var(--text-2);margin:0}
.countdown{display:flex;gap:clamp(.6rem,4vw,1.6rem)}
.cd-cell{display:flex;flex-direction:column;align-items:center;min-width:3.4ch}
.cd-n{font:500 clamp(2.1rem,10vw,3.4rem)/1 var(--f-label);font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff3cf 0%,#e8c373 45%,#b0842f 72%,#f6dd97 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.cd-n.beat{animation:beat 1s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}20%{transform:scale(1.08)}}
.cd-u{font:600 .58rem/1 var(--f-label);letter-spacing:.24em;text-transform:uppercase;color:var(--text-2);margin-top:.45rem}
.ov-status{min-height:1.5em;margin:0;font-style:italic;font-size:1.1rem;color:var(--gold-hi);text-shadow:var(--tshadow)}
.ov-title{position:absolute;z-index:4;left:0;right:0;top:calc(max(4.5svh,66px) + var(--safe-t));text-align:center;pointer-events:none;opacity:0;padding:0 12px;transition:opacity 2.2s var(--ease)}
.ov-title h1.script{font-size:min(13vw,6.4svh,5.4rem);line-height:1.02;white-space:nowrap;filter:drop-shadow(0 3px 10px rgba(0,0,0,.7))}
.ov-title h1 span{background:linear-gradient(180deg,#fff6d8 0%,#efcf82 50%,#c4953d 80%,#f9e3a6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .15em}
.ov-title .name{font-size:1.25em}
.ov-title .kicker{margin-bottom:.4rem;color:var(--gold-hi)}
.ov-tap{margin:.9rem auto 0;font:600 .64rem/1.4 var(--f-label);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-hi);opacity:0;transition:opacity .8s}
.needs-tap .ov-tap{opacity:1;animation:pulse 2.6s ease-in-out infinite}
.cue{position:absolute;z-index:4;left:0;right:0;bottom:calc(24px + var(--safe-b));margin:0;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font:600 .64rem/1 var(--f-label);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-hi);text-shadow:var(--tshadow);opacity:0;transition:opacity 1.2s var(--ease)}
.cue i{width:1px;height:40px;background:linear-gradient(var(--gold-hi),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.opened .ov-top,.opened .ov-bottom{opacity:0;pointer-events:none}
.titled .ov-title{opacity:1}
.show-cue .cue{opacity:1}

/* ---------- dance ---------- */
.bloom{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--bx,50%) var(--by,45%),#fff6d8 0%,#f5d98c 30%,rgba(214,168,80,.5) 55%,rgba(120,70,20,0) 80%)}

/* ---------- gallery: each photo warped into its tracked frame in the films ---------- */
.gphotos{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.gph{position:absolute;left:0;top:0;transform-origin:0 0;visibility:hidden;overflow:hidden;background:#2c1e16;will-change:transform}
.gph img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.14) contrast(1.03) saturate(.92) brightness(.96)}
.gph.painting img{filter:sepia(.08) saturate(.95) brightness(.9)}
.gph::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 22px rgba(20,10,4,.6);
  background:radial-gradient(ellipse 120% 60% at 50% 0%,rgba(255,222,165,.18),rgba(255,222,165,0) 60%),radial-gradient(ellipse 80% 80% at 50% 50%,rgba(0,0,0,0) 62%,rgba(30,15,5,.45) 100%)}
.gph .ph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:1.2rem;color:rgba(244,223,164,.7);
  background:radial-gradient(ellipse at 50% 40%,#6e4b2a,#3a2417 70%);font:600 1.3rem/1.3 var(--f-label);letter-spacing:.2em;text-transform:uppercase}
.gph .ph svg{width:36%;aspect-ratio:1;color:rgba(244,223,164,.55)}
.gphotos.flat .gph{overflow:visible;box-shadow:0 0 0 14px #b8913f,0 0 0 18px #6b4a1c,0 0 0 20px #e9c877,0 30px 60px rgba(0,0,0,.6)}
.gcap{position:absolute;z-index:6;left:50%;bottom:calc(8svh + var(--safe-b));margin:0;width:max-content;max-width:88vw;padding:.5rem 1rem;text-align:center;border-radius:3px;pointer-events:none;
  opacity:var(--pk,0);transform:translate(-50%,calc((1 - var(--pk,0)) * 10px));
  background:linear-gradient(180deg,#f3dc9d,#b88a37 55%,#e6c778);box-shadow:0 8px 20px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,245,215,.7),inset 0 0 0 3px rgba(120,80,25,.4)}
.gcap b{display:block;font:600 clamp(.6rem,2.3vw,.78rem)/1.35 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:#3b2610;text-shadow:0 1px 0 rgba(255,240,200,.6)}
.gcap small{display:block;font:italic 500 .95rem/1.25 var(--f-body);color:#4b331a;margin-top:.15rem}

/* ---------- doors ---------- */
.vignette{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--vx,50%) var(--vy,50%),rgba(0,0,0,0) var(--vr,60%),#000 calc(var(--vr,60%) + 18%))}

/* ---------- stage & cake ---------- */
#sc-stage .flames{z-index:3;pointer-events:none}
.cake-ui{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:var(--ck,0);transition:opacity .3s}
.cake-ui.live{pointer-events:auto}
.cake-top{position:absolute;left:0;right:0;top:calc(6svh + var(--safe-t));text-align:center;padding:0 20px;text-shadow:var(--tshadow)}
.cake-top::before{content:"";position:absolute;left:0;right:0;top:calc(-6svh - var(--safe-t));height:34svh;z-index:-1;background:linear-gradient(180deg,rgba(16,8,10,.82),rgba(16,8,10,0))}
.cake-top h2{color:var(--gold-hi)}
.cake-hit{position:absolute;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:30%}
.cake-bottom{position:absolute;left:0;right:0;bottom:calc(4svh + var(--safe-b));display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;padding:0 16px;text-shadow:var(--tshadow)}
.cake-bottom::before{content:"";position:absolute;left:0;right:0;bottom:calc(-4svh - var(--safe-b));height:30svh;z-index:-1;background:linear-gradient(0deg,rgba(16,8,10,.85),rgba(16,8,10,0))}
.breath{width:130px;height:4px;border-radius:4px;background:rgba(244,223,164,.18);overflow:hidden;opacity:0;transition:opacity .5s}
.breath i{display:block;height:100%;background:linear-gradient(90deg,var(--blush),var(--gold-hi));transform-origin:0 50%;transform:scaleX(var(--b,0))}
.listening .breath,.holding .breath{opacity:1}
.hint{margin:0;font-style:italic;color:var(--text-2);font-size:1.05rem;max-width:32ch}
.cake-done{display:flex;flex-direction:column;align-items:center;gap:.4rem;animation:rise .9s var(--ease) both}
.cake-done .script{color:var(--gold-hi)}
.cake-done .next{font:600 .64rem/1.4 var(--f-label);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-hi);margin-top:.3rem}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.8rem 1.6rem;border-radius:999px;
  background:linear-gradient(180deg,#f8e7b5,#d9b262 55%,#b98d3e);color:#2b1a0c;font:600 .76rem/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;text-shadow:none;
  box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.7);transition:transform .16s ease-out}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-2px)}}
.btn:active{transform:scale(.97)}
.btn.ghost{background:rgba(30,16,14,.55);color:var(--gold-hi);border:1px solid rgba(244,223,164,.6);box-shadow:none}

/* ---------- letter: a sealed envelope lands, turns over, opens only when she taps the seal ---------- */
.env{--ew:min(88vw,60svh);position:absolute;z-index:5;left:50%;top:56%;width:var(--ew);aspect-ratio:1.42;
  transform:translate(-50%,-50%) translateY(var(--ey,0svh)) rotate(var(--er,0deg));perspective:1600px;opacity:var(--eo,0)}
@media (orientation:landscape){.env{--ew:min(54vw,72svh)}}
.env::after{content:"";position:absolute;left:6%;right:6%;bottom:-9%;height:12%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.55),rgba(0,0,0,0) 70%);z-index:-1;opacity:var(--sh,0)}
.env-flip{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(var(--ez,0px)) rotateY(var(--flip,0deg))}
.env-front,.env-backside{position:absolute;inset:0;border-radius:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.env-front,.pocket,.f-top .face{background-color:#f3ead9;background-size:cover;background-position:center}
.env-front{box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 0 50px rgba(160,130,90,.3)}
.env-front::before{content:"";position:absolute;inset:4%;border:1px solid rgba(190,150,70,.5);border-radius:3px}
.env-front .to{position:absolute;left:0;right:0;top:44%;text-align:center;font-size:clamp(1.9rem,8vw,3.2rem);color:#5a3a1a}
.env-rule{position:absolute;left:24%;right:24%;top:68%;height:1px;background:linear-gradient(90deg,rgba(140,100,50,0),rgba(140,100,50,.5),rgba(140,100,50,0))}
.stamp{position:absolute;right:7%;top:10%;width:13%;aspect-ratio:.82;padding:3px;background:#f7efe0;outline:2px dotted rgba(150,110,60,.55);outline-offset:-5px;box-shadow:0 1px 3px rgba(80,50,20,.3)}
.stamp svg{width:100%;height:100%;display:block;color:#8e1b24;background:#f1d9c9}
.env-backside{transform:rotateY(180deg);perspective:1200px}
.env-back{position:absolute;inset:0;z-index:1;border-radius:6px;background:#dccbab;box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 0 40px rgba(110,80,40,.45)}
.env-card{position:absolute;left:5%;right:5%;top:5%;height:90%;z-index:3;border-radius:3px;display:grid;place-items:center;
  background:#f8f0de center/cover;box-shadow:0 6px 18px rgba(80,50,20,.25);transition:transform 1.3s var(--ease)}
.env-card .to{font-size:clamp(1.9rem,8vw,3rem);color:#5a3a1a}
.pocket{position:absolute;inset:0;z-index:4;border-radius:0 0 6px 6px;clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);box-shadow:inset 0 -30px 50px rgba(160,130,90,.25)}
.pocket svg{position:absolute;inset:0;width:100%;height:100%}
.pocket path{fill:none;stroke:rgba(140,105,60,.4);stroke-width:.5;vector-effect:non-scaling-stroke}
.f-top{position:absolute;left:0;right:0;top:0;height:64%;z-index:5;transform-origin:50% 0;filter:drop-shadow(0 3px 3px rgba(90,60,30,.35))}
.f-top .face{position:absolute;inset:0;border-radius:6px 6px 0 0;clip-path:polygon(0 0,100% 0,50% 100%);filter:brightness(1.04)}
.env.opening .f-top{transition:transform .95s .25s var(--ease);transform:rotateX(180deg)}
.env.flap-open .f-top{z-index:2}
.env.slide .env-card{transform:translateY(-62%)}
.env.gone{opacity:0;transition:opacity 1.5s var(--ease)}   /* the letter is in her hands now: the seat stays empty behind the poem */
.seal{position:absolute;left:50%;top:62%;z-index:6;width:clamp(64px,19%,112px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%}
.seal::before{content:"";position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,rgba(255,230,160,.55),rgba(255,230,160,0) 65%);opacity:0}
.seal.ready::before{animation:pulse 2.4s ease-in-out infinite}
.seal-half{position:absolute;inset:0;background:center/contain no-repeat;transition:transform 1s var(--ease),opacity 1s var(--ease);filter:drop-shadow(0 4px 6px rgba(60,20,10,.5))}
.seal-half.a{clip-path:polygon(0 0,58% 0,44% 38%,56% 62%,42% 100%,0 100%)}
.seal-half.b{clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%,56% 62%,44% 38%)}
.env-hint{position:absolute;z-index:6;left:0;right:0;bottom:calc(6svh + var(--safe-b));margin:0;text-align:center;font:600 .68rem/1 var(--f-label);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-hi);opacity:var(--ho,0);text-shadow:var(--tshadow)}
.env.opening .seal-half.a{transform:translate(-40%,30%) rotate(-28deg);opacity:0}
.env.opening .seal-half.b{transform:translate(40%,34%) rotate(24deg);opacity:0}

/* ---------- poem & end (document flow) ---------- */
main{position:relative;z-index:2;pointer-events:none}
#poem,#finale-end{pointer-events:auto;position:relative}
#poem{padding:12svh 16px 34svh;background:linear-gradient(180deg,rgba(16,10,12,0) 0,var(--canvas) 16svh,var(--canvas) calc(100% - 30svh),rgba(16,10,12,0) 100%)}
.paper{position:relative;max-width:640px;margin:0 auto;padding:clamp(2.4rem,8vw,4.5rem) clamp(1.4rem,7vw,4rem);color:var(--ink);border-radius:3px;
  background:#f6eddb center/cover;box-shadow:0 40px 80px rgba(0,0,0,.55),inset 0 0 80px rgba(150,110,60,.28);animation:paperUp 1.6s var(--ease) both}
@keyframes paperUp{from{opacity:0;transform:translateY(60px) rotate(-1deg)}to{opacity:1;transform:none}}
.paper::before{content:"";position:absolute;inset:14px;border:1px solid rgba(140,100,50,.35);pointer-events:none}
.paper h2{font-size:clamp(2.2rem,8.4vw,3.4rem);text-align:center;color:#6e4a22;margin:0 0 2rem}
.stanza{margin:0 0 1.8rem;text-align:center}
.stanza .pl{display:block;font:italic 500 clamp(1.18rem,4.6vw,1.4rem)/1.65 var(--f-body);color:var(--ink);opacity:0;transform:translateY(10px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.stanza.in .pl{opacity:1;transform:none}
.stanza.in .pl:nth-child(2){transition-delay:.18s}.stanza.in .pl:nth-child(3){transition-delay:.36s}.stanza.in .pl:nth-child(4){transition-delay:.54s}
.paper .close{font-size:clamp(2rem,7.4vw,2.8rem);text-align:center;color:#7a5226;margin:2.4rem 0 .4rem}
.paper .sign{font-size:clamp(1.6rem,6vw,2.2rem);text-align:right;color:#8a6330}
.paper .close,.paper .sign{opacity:0;transform:translateY(10px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease)}
.paper .in.close,.paper .in.sign{opacity:1;transform:none}
#finale-end{min-height:125svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:30svh 16px calc(40px + var(--safe-b));
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24svh);mask-image:linear-gradient(180deg,transparent 0,#000 24svh);
  background:radial-gradient(ellipse 70% 50% at 50% 40%,#3a2416 0%,var(--canvas) 70%)}
.finale-title{background:linear-gradient(180deg,#fff6d8,#efcf82 50%,#c4953d 80%,#f9e3a6);-webkit-background-clip:text;background-clip:text;color:transparent;padding:.1em .2em}
.finale-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1rem}
.fine{font-style:italic;color:var(--text-2);margin-top:2rem}

/* ---------- chrome ---------- */
#musicBtn{position:fixed;top:calc(14px + var(--safe-t));right:14px;z-index:40;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(24,13,13,.55);border:1px solid rgba(244,223,164,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:rise .8s var(--ease) both}
#musicBtn,.seal{transition:scale .16s ease-out}
#musicBtn:active,.seal:active{scale:.94}
.eq{display:flex;gap:3px;align-items:flex-end;height:16px}
.eq i{width:3px;height:100%;background:var(--gold-hi);border-radius:2px;transform-origin:50% 100%;animation:eq 1.1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.4s}.eq i:nth-child(3){animation-delay:-.8s}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
#musicBtn.muted .eq i{animation:none;transform:scaleY(.25)}
#loader{position:fixed;left:14px;bottom:calc(14px + var(--safe-b));z-index:40;width:24px;height:24px;color:var(--gold-hi);opacity:0;transition:opacity .6s}
#loader.on{opacity:.8}
#loader svg{width:100%;height:100%;transform:rotate(-90deg)}
#devBadge{position:fixed;left:8px;top:calc(8px + var(--safe-t));z-index:70;font:600 .56rem/1 var(--f-label);letter-spacing:.2em;padding:.45rem .7rem;border-radius:999px;background:rgba(160,40,50,.85);color:#fff;pointer-events:none}
#inapp{position:fixed;left:12px;right:12px;top:calc(12px + var(--safe-t));z-index:80;padding:.8rem 1rem;border-radius:12px;background:rgba(30,16,14,.92);border:1px solid rgba(244,223,164,.5);color:var(--gold-hi);text-align:center;font-style:italic}

body.paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .cap .w{--wo:1!important;transform:none}
  .stanza .pl,.paper .close,.paper .sign{opacity:1;transform:none}
}