/* Osas — "Love Letter"
   Language taken from the references: deep crimson on kraft paper, film grain, a swash script for the
   feeling words beside an upright serif, tiny typewriter captions, warm photography.
   Moods change the ground and particles; the type system and shapes never change.
   Motion: Expressive for the letter, Subtle for everything else (motion-system tokens). */
:root{
  --duration-xshort:75ms;--duration-short:150ms;--duration-normal:250ms;--duration-slow:400ms;--duration-xslow:600ms;
  --ease-out-cubic:cubic-bezier(.215,.61,.355,1);--ease-out-quart:cubic-bezier(.165,.84,.44,1);
  --ease-in-cubic:cubic-bezier(.55,.055,.675,.19);--ease-in-out-cubic:cubic-bezier(.645,.045,.355,1);
  --script:"Pinyon Script","Snell Roundhand",cursive;
  --serif:"Playfair Display",Georgia,serif;
  --type:"Courier Prime","Courier New",monospace;
}

/* ---- tokens: paper (default) ---- */
body{
  --ground:radial-gradient(80% 60% at 22% 12%,#f2ebdd,transparent 70%),radial-gradient(60% 50% at 90% 90%,#e6d3bf,transparent 70%),#d7cebc;
  --ink:#1e1512;--ink-2:rgba(30,21,18,.72);--ink-3:rgba(30,21,18,.5);--line:rgba(30,21,18,.17);
  --surface:rgba(30,21,18,.05);--surface-2:rgba(30,21,18,.09);
  --crimson:#8d0a1c;--frame:#8d0a1c;--accent:#8d0a1c;--accent-soft:#b0281f;--name:#a8241c;
  --btn-bg:#8d0a1c;--btn-fg:#f8efdf;--on-accent:#f8efdf;
  --wash:radial-gradient(95% 85% at 50% 45%,transparent 55%,rgba(80,40,25,.16));
  --grain:.34;--grain-blend:multiply;
  --menu-bg:rgba(246,240,228,.94);--modal-bg:rgba(214,205,187,.9);
  --note:#fbf6ea;--shadow:rgba(70,12,18,.34);
}
/* ---- tokens: every other mood is a night scene with the same type system ---- */
body:not([data-mode="paper"]){
  --ground:#0c0809;
  --ink:#f6ede9;--ink-2:rgba(246,237,233,.7);--ink-3:rgba(246,237,233,.46);--line:rgba(255,255,255,.14);
  --surface:rgba(255,255,255,.07);--surface-2:rgba(255,255,255,.12);
  --accent:#f0506e;--accent-soft:#ffc2cd;--name:var(--accent-soft);--frame:color-mix(in srgb,var(--accent) 58%,#14060a);
  --btn-bg:#f6eee0;--btn-fg:#1e1512;--on-accent:#fff;
  --wash:radial-gradient(85% 75% at 50% 45%,rgba(12,8,9,0),rgba(12,8,9,.72)),linear-gradient(180deg,rgba(12,8,9,.3),rgba(12,8,9,.5));
  --grain:.16;--grain-blend:overlay;
  --menu-bg:rgba(22,14,18,.9);--modal-bg:rgba(8,4,6,.84);--shadow:rgba(0,0,0,.55);
}
body[data-mode="fiery"]{--accent:#ff7a3d;--accent-soft:#ffc08a}
body[data-mode="moonlit"]{--accent:#a99cff;--accent-soft:#d9d2ff}
body[data-mode="golden"]{--accent:#ffa64d;--accent-soft:#ffd9a0}
body[data-mode="rain"]{--accent:#7db8ff;--accent-soft:#c4e0ff}
body[data-mode="rose"]{--accent:#ff8fb1;--accent-soft:#ffd1de}

*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--ground);color:var(--ink);font:400 15px/1.5 var(--serif);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
body.modal-open{overflow:hidden}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}

/* film grain over everything, like the posters */
body::after{content:"";position:fixed;inset:0;z-index:95;pointer-events:none;opacity:var(--grain);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%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 1.1 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ground */
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ground)}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--duration-xslow) var(--ease-out-cubic)}
.roses{background:url(/roses.jpg) center/cover;filter:brightness(.55) saturate(1.1);animation:drift 48s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.14) translate(-1.5%,-1%)}}
body.still .roses{animation:none}
body[data-mode="ambience"] .roses{opacity:1}
.fire{filter:brightness(.7)}
body[data-mode="fiery"] .fire{opacity:1}
.wash{position:absolute;inset:0;background:var(--wash)}

/* shared controls */
.ib{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);flex:none;transition:background var(--duration-short) var(--ease-out-cubic),color var(--duration-short) var(--ease-out-cubic),transform var(--duration-short) var(--ease-out-cubic)}
.ib:hover{background:var(--surface-2);color:var(--ink)}
.ib:active{transform:scale(.96)}
.ib svg{width:22px;height:22px;fill:currentColor}
.ib.play{width:60px;height:60px;background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 12px 24px -10px var(--shadow)}
.ib.play:hover{background:var(--btn-bg);filter:brightness(1.12);color:var(--btn-fg)}
.ib.play svg{width:26px;height:26px}

/* top bar */
.top{position:fixed;z-index:60;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:center;padding:calc(16px + env(safe-area-inset-top)) max(20px,3vw) 0}
.tools{display:flex;gap:8px}
.tools .ib{background:var(--surface);backdrop-filter:blur(16px);width:40px;height:40px}
#motion svg{width:17px;height:17px}
.mute .off{display:none}.mute[aria-pressed="true"] .on{display:none}.mute[aria-pressed="true"] .off{display:block}

.mood{position:relative}
.mood-btn{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px 0 10px;border-radius:999px;background:var(--surface);backdrop-filter:blur(16px);font:700 13px/1 var(--type);letter-spacing:.02em;transition:background var(--duration-short)}
.mood-btn:hover{background:var(--surface-2)}
.mood-btn svg{width:18px;height:18px;fill:currentColor;opacity:.6;transition:transform var(--duration-normal) var(--ease-out-cubic)}
.mood-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mood-dot{display:block;width:18px;height:18px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.18) inset,0 0 0 1px rgba(255,255,255,.2)}
.mood-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:288px;padding:6px;border-radius:20px;list-style:none;background:var(--menu-bg);backdrop-filter:blur(26px) saturate(1.3);border:1px solid var(--line);box-shadow:0 30px 60px -20px var(--shadow);transform-origin:top left;animation:menu-in var(--duration-normal) var(--ease-out-quart)}
@keyframes menu-in{from{opacity:0;transform:scale(.96) translateY(-4px)}}
.mood-menu li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;cursor:pointer;outline:none;transition:background var(--duration-short)}
.mood-menu li:hover,.mood-menu li:focus-visible{background:var(--surface-2)}
.mood-menu li[aria-selected="true"]::after{content:"♥";margin-left:auto;color:var(--accent);font-size:14px}
.mood-menu b{display:block;font:600 15px/1.2 var(--serif)}
.mood-menu small{display:block;font:400 12px/1.3 var(--type);color:var(--ink-3)}

/* composition: photo left, the song and the one action right */
.stage{position:relative;z-index:1;height:100svh;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,120px);align-items:center;padding:72px max(32px,4vw) 28px}
.photo{display:grid;justify-items:center;align-content:center}
.segs{display:flex;gap:6px;width:var(--pw);margin-bottom:46px}
.seg{flex:1;height:20px;display:flex;align-items:center;padding:0}
.seg i{display:block;width:100%;height:3px;border-radius:2px;background:var(--line);overflow:hidden;transition:background var(--duration-short)}
.seg i::after{content:"";display:block;height:100%;width:var(--p,0%);background:var(--ink);border-radius:2px}
.seg.on i{background:color-mix(in srgb,var(--ink) 30%,transparent)}
.seg:hover i{background:color-mix(in srgb,var(--ink) 42%,transparent)}
.hint{margin-top:34px;font:400 12px/1.4 var(--type);letter-spacing:.04em;color:var(--ink-3)}
.hint-m{display:none}

/* photo prints: real instant-camera paper, laid on the paper */
.photo{--ph:min(66svh,620px);--pw:calc(var(--ph) * .8)}
.pile{position:relative;isolation:isolate;height:var(--ph);width:var(--pw)}
.pile::after{content:"";position:absolute;z-index:30;top:-17px;left:50%;width:28%;height:32px;translate:-50% 0;rotate:-3deg;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,226,186,.88),rgba(232,208,160,.8));box-shadow:0 1px 3px rgba(0,0,0,.25);clip-path:polygon(2% 0,98% 0,100% 18%,97% 36%,100% 54%,97% 72%,100% 100%,0 100%,3% 72%,0 54%,3% 36%,0 18%)}
.pc{position:absolute;inset:0;padding:5.4% 5.4% 20%;border-radius:3px;cursor:pointer;transform-origin:50% 60%;will-change:transform;
  background:linear-gradient(158deg,#fcf9f2 0%,#f3ede0 55%,#ebe3d3 100%);
  box-shadow:0 0 0 1px rgba(70,45,30,.14),inset 0 1px 0 rgba(255,255,255,.9),0 2px 3px rgba(40,18,12,.28),0 20px 36px -12px rgba(40,10,14,.55);
  transition:transform var(--duration-slow) var(--ease-in-out-cubic),opacity var(--duration-normal) var(--ease-out-cubic),filter var(--duration-slow) var(--ease-out-cubic)}
.pc img{position:relative;width:100%;height:100%;object-fit:cover;display:block;user-select:none;outline:1px solid rgba(20,10,5,.28);
  filter:sepia(.2) saturate(1.1) contrast(1.06) brightness(.98)}
/* photo-edge vignette + warm light leak, like a real print */
.pc::before{content:"";position:absolute;z-index:2;inset:5.4% 5.4% 20%;pointer-events:none;mix-blend-mode:multiply;
  background:radial-gradient(125% 105% at 50% 42%,transparent 52%,rgba(40,12,6,.42)),linear-gradient(120deg,rgba(255,150,80,.2),transparent 38%)}
/* camcorder on-screen display */
.pc::after{content:"\25B6 PLAY  " attr(data-n) "/" attr(data-t);position:absolute;z-index:3;top:calc(5.4% + 14px);left:calc(5.4% + 14px);font:700 clamp(10px,.95vw,13px)/1 var(--type);letter-spacing:.1em;color:#ff9a4a;
  text-shadow:0 0 6px rgba(255,120,40,.8),0 0 1px #fff3;pointer-events:none;opacity:.92}
.pc figcaption{position:absolute;z-index:3;left:6%;right:6%;bottom:5.2%;text-align:center;font:400 clamp(32px,3.1vw,46px)/1 var(--script);color:#5a1a22;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc .heart{display:none}
.pc[data-pos="0"]{transform:rotate(-1.1deg)}
.pc[data-pos="0"]:hover{transform:translateY(-4px) rotate(.3deg)}
.pc[data-pos="0"]:active{transform:scale(.99) rotate(-.6deg)}
.pc[data-pos="1"]{transform:translate(16px,-8px) rotate(3.4deg);filter:brightness(.93)}
.pc[data-pos="2"]{transform:translate(-14px,-12px) rotate(-3.8deg);filter:brightness(.86)}
.pc[data-pos="3"],.pc[data-pos="4"],.pc[data-pos="5"]{transform:translate(0,-14px) rotate(1deg);opacity:0;pointer-events:none}
.pc:not([data-pos="0"]) figcaption,.pc:not([data-pos="0"])::after{opacity:0}
.pc:not([data-pos="0"]){pointer-events:none}

/* right: name lockup, now playing, the one action, the queue */
.panel{display:grid;gap:clamp(14px,2.2vh,22px);align-content:center;min-width:0;max-width:560px}
.eyebrow{font:400 12px/1 var(--type);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";height:1px;width:56px;background:var(--line)}
#name{font:400 clamp(92px,min(11.5vw,19vh),188px)/.78 var(--script);color:var(--name);margin:-4px 0 0 -6px;white-space:nowrap}
#name .n1{font:400 .27em/1 var(--serif);color:var(--ink);letter-spacing:0;vertical-align:.62em;margin-right:.14em}
#name .n3{font:400 .3em/1 system-ui,sans-serif;vertical-align:.7em}

.np{display:grid;gap:2px;margin-top:clamp(2px,1.2vh,12px)}
.np-label{display:flex;align-items:center;gap:8px;font:400 12px/1 var(--type);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.np-label #counter{margin-left:auto;color:var(--ink-3);font-variant-numeric:tabular-nums}
.np-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:dot 1.6s ease-in-out infinite}
body:has(.tracks.paused) .np-dot{animation-play-state:paused;opacity:.4}
@keyframes dot{50%{transform:scale(.6);opacity:.55}}
#songTitle{font:600 clamp(26px,2.7vw,36px)/1.1 var(--serif);letter-spacing:-.012em}
#songArtist{font:400 14px/1.4 var(--type);color:var(--ink-2)}
.scrub{margin-top:16px}
.bar{height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:2px}
.times{display:flex;justify-content:space-between;margin-top:7px;font:400 12px/1 var(--type);color:var(--ink-3);font-variant-numeric:tabular-nums}

.actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.transport{display:flex;align-items:center;gap:6px;margin-left:-6px}
.cta{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 34px;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font:700 15px/1 var(--type);letter-spacing:.04em;box-shadow:0 14px 26px -12px var(--shadow);transition:transform var(--duration-short) var(--ease-out-cubic),filter var(--duration-short)}
.cta:hover{filter:brightness(1.12);transform:translateY(-1px)}
.cta:active{transform:scale(.96)}

.tracks{margin-top:2px}
.up{font:400 12px/1 var(--type);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.tracks ol{list-style:none;padding:0;display:grid;gap:1px}
.tracks li button{width:100%;display:grid;grid-template-columns:30px 1fr;gap:6px;align-items:center;min-height:46px;padding:4px 12px 4px 8px;border-radius:14px;text-align:left;color:var(--ink-2);transition:background var(--duration-short) var(--ease-out-cubic),color var(--duration-short)}
.tracks li button:hover{background:var(--surface)}
.tracks li button:active{transform:scale(.99)}
.tracks li[aria-current="true"] button{background:var(--surface-2);color:var(--ink)}
.no{display:grid;place-items:center;font:400 12px/1 var(--type);color:var(--ink-3);font-variant-numeric:tabular-nums}
.no .eq{display:none}
li[aria-current="true"] .no>span:first-child{display:none}
li[aria-current="true"] .no .eq{display:flex}
.eq{align-items:flex-end;gap:2px;height:14px}
.eq i{width:3px;height:100%;background:var(--accent);border-radius:2px;transform-origin:bottom;animation:eq 900ms ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-300ms;animation-duration:700ms}.eq i:nth-child(3){animation-delay:-600ms;animation-duration:1100ms}
.tracks.paused .eq i{animation-play-state:paused}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.t{display:flex;align-items:baseline;gap:12px;min-width:0}
.t b{font:500 17px/1.2 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t span{font:400 12px/1 var(--type);color:var(--ink-3);white-space:nowrap}
li[aria-current="true"] .t b{font-weight:600}


.start{position:fixed;z-index:70;left:50%;top:calc(18px + env(safe-area-inset-top));translate:-50% 0;padding:13px 22px;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font:700 13px/1 var(--type);letter-spacing:.03em;box-shadow:0 14px 40px -10px var(--shadow);animation:in var(--duration-slow) var(--ease-out-quart)}
@keyframes in{from{opacity:0;translate:-50% -12px}}

/* ================= the letter ================= */
.modal{position:fixed;z-index:80;inset:0;display:grid;place-items:center;align-content:center;gap:22px;padding:clamp(24px,4vw,56px);background:var(--modal-bg);backdrop-filter:blur(10px);animation:fade var(--duration-normal) var(--ease-out-cubic)}
@keyframes fade{from{opacity:0}}
.close{position:absolute;top:calc(16px + env(safe-area-inset-top));right:max(16px,2.5vw);background:var(--surface-2);z-index:3}

/* envelope (first open only) */
.env{position:absolute;left:50%;top:50%;width:min(440px,84vw);aspect-ratio:3/2;translate:-50% -50%;perspective:1200px;opacity:0;pointer-events:none;transform:scale(.9) translateY(16px);transition:opacity var(--duration-slow) var(--ease-out-quart),transform var(--duration-slow) var(--ease-out-quart);z-index:2}
.env>*{position:absolute}
.env-back{inset:0;background:#cdbd9b;border-radius:6px;box-shadow:0 30px 50px -20px rgba(0,0,0,.6)}
.env-front{inset:0;background:#e4d6b6;clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);border-radius:0 0 6px 6px}
.env-flap{left:0;right:0;top:0;height:56%;background:linear-gradient(180deg,#efe3c6,#e1d1ab);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform var(--duration-xslow) var(--ease-in-out-cubic);z-index:2}
.env-seal{left:50%;top:54%;width:62px;height:62px;translate:-50% -50%;z-index:3;display:grid;place-items:center;border-radius:50% 46% 52% 48%/48% 52% 46% 50%;color:#f1bfc5;font-size:24px;
  background:radial-gradient(circle at 34% 28%,#c93345,#8d0a1c 58%,#5a0612);box-shadow:0 6px 12px -3px rgba(60,0,10,.6),inset 0 -4px 8px rgba(0,0,0,.25);transition:opacity var(--duration-normal),transform var(--duration-slow) var(--ease-out-quart)}
.modal[data-stage="sealed"] .env,.modal[data-stage="opening"] .env{opacity:1;transform:none;pointer-events:auto;cursor:pointer}
.modal[data-stage="opening"] .env-flap{transform:rotateX(180deg)}
.modal[data-stage="opening"] .env-seal{opacity:0;transform:scale(1.3)}
.modal[data-stage="sealed"] .env-seal{animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.1)}30%{transform:scale(1)}45%{transform:scale(1.07)}}
.modal[data-stage="sealed"] .m-wrap,.modal[data-stage="opening"] .m-wrap,.modal[data-stage="sealed"] .m-nav,.modal[data-stage="opening"] .m-nav{opacity:0;pointer-events:none}
.modal[data-stage="open"] .m-wrap{animation:rise var(--duration-slow) var(--ease-out-quart)}
@keyframes rise{0%{opacity:0;transform:translateY(40px) scale(.94)}60%{opacity:1;transform:translateY(-4px) scale(1.015)}100%{opacity:1;transform:none}}

.m-wrap{display:flex;align-items:center;justify-content:center;gap:clamp(40px,6vw,96px);width:100%;max-width:1160px}
.m-left{display:grid;gap:22px;flex:none;justify-items:center}
.m-polaroid{position:relative;isolation:isolate;width:min(340px,30vw);aspect-ratio:.8;padding:5.4% 5.4% 20%;rotate:-2.4deg;border-radius:3px;transform-style:preserve-3d;transition:transform var(--duration-normal) var(--ease-out-cubic);
  background:linear-gradient(158deg,#fcf9f2 0%,#f3ede0 55%,#ebe3d3 100%);
  box-shadow:0 0 0 1px rgba(70,45,30,.14),inset 0 1px 0 rgba(255,255,255,.9),0 2px 3px rgba(0,0,0,.35),0 26px 40px -12px rgba(0,0,0,.6)}
.m-polaroid::before{content:"";position:absolute;z-index:3;top:-15px;left:50%;width:30%;height:30px;translate:-50% 0;rotate:3deg;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,226,186,.9),rgba(232,208,160,.8));box-shadow:0 1px 3px rgba(0,0,0,.3);clip-path:polygon(2% 0,98% 0,100% 18%,97% 36%,100% 54%,97% 72%,100% 100%,0 100%,3% 72%,0 54%,3% 36%,0 18%)}
.m-photo{position:relative;width:100%;height:100%;background:#2a1417;overflow:hidden;outline:1px solid rgba(20,10,5,.28)}
.m-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.2) saturate(1.1) contrast(1.06) brightness(.98)}
.m-photo::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;background:radial-gradient(125% 105% at 50% 42%,transparent 52%,rgba(40,12,6,.42)),linear-gradient(120deg,rgba(255,150,80,.2),transparent 38%)}
.m-polaroid::after{content:"\25B6 PLAY  " attr(data-n) "/" attr(data-t);position:absolute;z-index:4;top:calc(5.4% + 12px);left:calc(5.4% + 12px);font:700 11px/1 var(--type);letter-spacing:.1em;color:#ff9a4a;text-shadow:0 0 6px rgba(255,120,40,.8);pointer-events:none}
.glare{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity var(--duration-slow);z-index:1}
.m-polaroid figcaption{position:absolute;z-index:3;left:6%;right:6%;bottom:5%;text-align:center;font:400 40px/1 var(--script);color:#5a1a22;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-song{font:400 12px/1.3 var(--type);letter-spacing:.04em;color:var(--ink-2)}

/* the note: typewriter on cream paper */
.sheet{position:relative;isolation:isolate;flex:1 1 0;max-width:600px;filter:drop-shadow(0 28px 26px rgba(0,0,0,.38))}
.paper{position:relative;max-height:min(68svh,640px);overflow-y:auto;scrollbar-width:none;rotate:-.7deg;padding:46px 46px 38px;border-radius:5px;color:#2a1a17;
  background-color:var(--note);
  background-image:repeating-linear-gradient(transparent 0 31px,rgba(141,10,28,.12) 31px 32px),linear-gradient(180deg,rgba(255,255,255,.6),transparent 120px);
  background-attachment:local,scroll;background-position:0 46px,0 0}
.paper::-webkit-scrollbar{display:none}
.typed{white-space:pre-wrap;font:400 19px/32px var(--type);color:#2a1a17;text-wrap:pretty}
.typed::first-line{font-family:var(--script);font-size:58px;line-height:64px;color:var(--crimson)}
.typed .rest{color:transparent}
.typed .caret{display:inline-block;width:2px;height:.95em;margin-left:1px;background:var(--crimson);vertical-align:-.12em;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.seal{display:grid;place-items:center;width:70px;height:70px;margin:22px 0 0 auto;border-radius:50% 46% 52% 48%/48% 52% 46% 50%;color:#f1bfc5;font-size:26px;rotate:-8deg;
  background:radial-gradient(circle at 34% 28%,#c93345,#8d0a1c 58%,#5a0612);box-shadow:0 8px 14px -4px rgba(60,0,10,.6),inset 0 0 0 3px rgba(255,255,255,.07),inset 0 -5px 9px rgba(0,0,0,.28);
  opacity:0;transform:scale(1.8);transition:opacity var(--duration-short),transform var(--duration-slow) var(--ease-out-quart)}
.paper.signed .seal{opacity:1;transform:none}
.m-nav{display:flex;align-items:center;gap:16px;font:400 13px/1 var(--type);color:var(--ink-2);font-variant-numeric:tabular-nums;transition:opacity var(--duration-normal)}
.m-nav .ib{background:var(--surface-2)}

/* ================= responsive ================= */
@media (max-height:820px){
  .tracks li button{min-height:40px}
  .panel{gap:12px}
  .segs{margin-bottom:38px}
}
@media (max-width:1000px){
  .stage{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px}
}
@media (max-width:820px){
  html{height:auto}
  body{height:auto;min-height:100svh;overflow-y:auto;overflow-x:clip;-webkit-overflow-scrolling:touch}
  .stage{display:block;height:auto;min-height:100svh;padding:68px 26px calc(48px + env(safe-area-inset-bottom))}
  .photo{--ph:min(54svh,450px);margin-bottom:40px}
  .segs{margin-bottom:38px}
  .hint{margin-top:34px}
  .panel{max-width:none;gap:18px}
  #name{font-size:clamp(92px,28vw,150px)}
  .actions{gap:14px}
  .cta{flex:1;min-width:170px}
  .mood-menu{min-width:min(288px,calc(100vw - 40px))}
  .modal{align-content:start;padding-top:70px}
  .m-wrap{flex-direction:column;gap:36px;max-height:calc(100svh - 150px);overflow-y:auto;align-items:center;padding:14px 18px 20px}
  .m-polaroid{width:min(56vw,230px)}
  .m-polaroid figcaption{font-size:28px}
  .sheet{max-width:100%;width:100%}
  .paper{max-height:none;overflow:visible;padding:34px 26px 30px;rotate:0deg;background-image:repeating-linear-gradient(transparent 0 29px,rgba(141,10,28,.12) 29px 30px);background-position:0 34px}
  .typed{font-size:17px;line-height:30px}
  .typed::first-line{font-size:48px;line-height:60px}
  .env{width:min(300px,80vw)}
  .start{top:auto;bottom:calc(20px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--duration-short)!important}
  .pc,.pc[data-pos]{transition-property:opacity!important}
}

/* ---- special links, per-letter link, preview chip, photo-less prints ---- */
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.links .pill{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font:700 13px/1 var(--type);letter-spacing:.03em;transition:background var(--duration-short),transform var(--duration-short) var(--ease-out-cubic)}
.links .pill:hover{background:var(--surface-2)}
.links .pill:active{transform:scale(.97)}
.note-link{display:inline-block;margin-top:14px;color:var(--crimson);font:700 15px/1.3 var(--type);text-decoration:underline;text-underline-offset:4px;opacity:0;transition:opacity var(--duration-slow) var(--ease-out-cubic);overflow-wrap:anywhere}
.paper.signed .note-link{opacity:1}
.preview-chip{position:fixed;z-index:90;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));translate:-50% 0;padding:10px 16px;border-radius:999px;background:#1e1512;color:#fbf1e1;font:700 12px/1 var(--type);letter-spacing:.04em;white-space:nowrap;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis}
.pc.no-photo img{visibility:hidden}
.pc.no-photo::before{background:linear-gradient(135deg,#8d0a1c,#4a0a14);mix-blend-mode:normal}