html,body{margin:0;padding:0;background:#1e0d18;-webkit-font-smoothing:antialiased;height:100%;scroll-behavior:smooth}
*{box-sizing:border-box}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(249,168,212,.2);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
@keyframes voiceBar{0%{transform:scaleY(.3)}100%{transform:scaleY(1)}}
@keyframes recPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
@keyframes bloomIn{0%{transform:scale(0);opacity:0}55%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes bloomWither{0%{transform:scale(0);opacity:0}28%{transform:scale(1.16);opacity:1}58%{transform:scale(1.16);opacity:1}100%{transform:scale(0);opacity:0}}
@keyframes bloomOut{0%{transform:scale(1.1);opacity:1}100%{transform:scale(0);opacity:0}}
@keyframes drift{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(10px,-16px) rotate(16deg)}100%{transform:translate(0,0) rotate(0)}}
/* Paired with `drift` on the background flowers (renderBgPetals) — a slow hue/saturation
   sway layered on top of each flower's own drift, via a second comma-separated animation
   on the same element (drift moves transform, this moves filter, no conflict). Kept
   subtle (~20deg either side of the flower's own hue) so it reads as "a bit of moving
   colour" rather than a rainbow effect — the petal palette is still doing the real work. */
@keyframes bgHueDrift{0%,100%{filter:hue-rotate(0deg) saturate(1)}50%{filter:hue-rotate(-20deg) saturate(1.2)}}
@keyframes breathe{0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.9)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes breatheFl{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes popIn{0%{opacity:0;transform:scale(.94) translateY(10px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes riseLetter{0%{transform:translate(-50%,8%) scale(.95);opacity:0}100%{transform:translate(-50%,-58%) scale(1);opacity:1}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(249,168,212,0)}50%{box-shadow:0 0 32px 6px rgba(249,168,212,.28)}}
@keyframes stepDotGlow{0%,100%{box-shadow:0 0 8px 1px var(--glow,transparent)}50%{box-shadow:0 0 16px 3.5px var(--glow,transparent)}}
@keyframes accentLine{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes stampIn{0%{opacity:0;transform:scale(.86) translateY(12px)}70%{transform:scale(1.03) translateY(-2px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes iridDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-50%,0,0)}}
@keyframes grainMove{0%{transform:translate(0,0)}20%{transform:translate(-2px,2px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,3px)}80%{transform:translate(3px,-2px)}100%{transform:translate(0,0)}}
@keyframes typewriterCursor{0%,100%{opacity:1}50%{opacity:0}}
@keyframes rippleOut{0%{transform:translate(-50%,-50%) scale(0);opacity:.7}100%{transform:translate(-50%,-50%) scale(3.5);opacity:0}}
@keyframes petalTrailFade{0%{opacity:.9;transform:scale(1) rotate(0deg)}100%{opacity:0;transform:scale(0) rotate(120deg)}}
@keyframes sealThud{0%{transform:translate(-50%,-50%) scale(0) rotate(-20deg);opacity:0}55%{transform:translate(-50%,-50%) scale(1.18) rotate(4deg);opacity:1}75%{transform:translate(-50%,-50%) scale(.94) rotate(-2deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:1}}
@keyframes toastIn{0%{opacity:0;transform:translateX(-50%) translateY(16px)}100%{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes toastBar{0%{width:100%}100%{width:0%}}
@keyframes roseBloom{0%{transform:translate(-50%,-100%) rotate(var(--r,0deg)) scale(0);opacity:0}60%{transform:translate(-50%,-100%) rotate(var(--r,0deg)) scale(1.1);opacity:1}100%{transform:translate(-50%,-100%) rotate(var(--r,0deg)) scale(1);opacity:1}}
@keyframes candleFlicker{0%{transform:rotate(-3deg) scaleX(.9)}100%{transform:rotate(3deg) scaleX(1.05) scaleY(.95)}}
@keyframes candleGlow{0%{opacity:.5;transform:scale(.9)}100%{opacity:1;transform:scale(1.15)}}
@keyframes starTwinkle{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.6)}}
@keyframes starOrb{0%,100%{box-shadow:0 0 32px 8px rgba(249,168,212,.3)}50%{box-shadow:0 0 64px 18px rgba(249,168,212,.55)}}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes cinematicScroll{0%,100%{transform:scaleY(0);transform-origin:top;opacity:0}40%{transform:scaleY(1);transform-origin:top;opacity:1}80%{transform:scaleY(1);transform-origin:bottom;opacity:0}}
@keyframes petalFall{0%{transform:translate(0,0) rotate(0deg);opacity:.8}50%{transform:translate(20px,50vh) rotate(120deg);opacity:.75}100%{transform:translate(-10px,105vh) rotate(240deg);opacity:0}}
@keyframes giftSparkle{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx,40px),var(--dy,-60px)) scale(0);opacity:0}}
@keyframes scrollReveal{0%{transform:translate(-50%,8%) scale(.95);opacity:0}100%{transform:translate(-50%,-35%) scale(1);opacity:1}}
@keyframes modalBloom{0%{opacity:0;transform:scale(.72) translateY(28px);filter:blur(6px)}55%{opacity:1;transform:scale(1.03) translateY(-5px);filter:blur(0)}78%{transform:scale(.985) translateY(2px)}100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}
@keyframes pickerPetal{0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(0)}18%{opacity:.9}100%{opacity:0;transform:translate(var(--pdx),var(--pdy)) rotate(var(--pr)) scale(.4)}}
@keyframes occMiniHeart{0%{opacity:0;transform:translateY(0) scale(.65)}25%{opacity:1}70%{opacity:.65}100%{opacity:0;transform:translateY(-16px) scale(.95)}}
@keyframes pickerShimmer{0%{transform:translateX(-110%) skewX(-18deg)}100%{transform:translateX(310%) skewX(-18deg)}}
@keyframes inkWipe{0%{clip-path:inset(-30% 100% -30% 0)}100%{clip-path:inset(-30% -8% -30% 0)}}
@keyframes inkNib{0%{left:-2%;opacity:0}6%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes fireflyDrift{0%{transform:translate(0,0)}100%{transform:translate(var(--fx,24px),var(--fy,-18px))}}
@keyframes fireflyPulse{0%,100%{opacity:.12}50%{opacity:1}}
@keyframes musicSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes noteFloat{0%{opacity:0;transform:translate(0,8px) rotate(-8deg) scale(.85)}18%{opacity:.85}100%{opacity:0;transform:translate(var(--nx,16px),-68px) rotate(10deg) scale(1.05)}}
@keyframes lidOpen{0%{transform:rotate(0)}100%{transform:rotate(-24deg)}}
@keyframes rainFall{0%{transform:translateY(-12vh)}100%{transform:translateY(112vh)}}
@keyframes rainFallSm{0%{transform:translateY(-24px)}100%{transform:translateY(96px)}}
@keyframes fogWrite{0%{opacity:0;filter:blur(12px)}55%{opacity:.94;filter:blur(1.6px)}100%{opacity:.9;filter:blur(1.2px)}}
@keyframes hintPulse{0%,100%{opacity:.9}50%{opacity:.35}}
@keyframes heartIdle{0%{transform:scale(1)}12%{transform:scale(1.035)}24%{transform:scale(1)}36%{transform:scale(1.018)}48%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes roseSway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes mboxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes tapThump{0%{transform:scale(1)}35%{transform:scale(1.09)}65%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes flameWhoosh{0%{transform:scaleY(1)}45%{transform:scaleY(1.8) scaleX(.8)}100%{transform:scaleY(1)}}
@keyframes glowFlare{0%{transform:scale(1)}45%{transform:scale(1.7)}100%{transform:scale(1)}}
@keyframes lidClose{0%{transform:rotate(-24deg)}70%{transform:rotate(2.5deg)}100%{transform:rotate(0deg)}}
@keyframes shootLoop{0%{transform:translate(0,0);opacity:0}2%{opacity:.9}9%{transform:translate(-42vw,26vh);opacity:0}100%{transform:translate(-42vw,26vh);opacity:0}}
@keyframes dropletLoop{0%{transform:translateY(-6vh);opacity:0}3%{opacity:.85}13%{transform:translateY(64vh)}17%{transform:translateY(110vh);opacity:0}100%{transform:translateY(110vh);opacity:0}}
@keyframes dropletRun{0%{transform:translateY(-6vh);opacity:0}8%{opacity:.9}55%{transform:translateY(52vh)}100%{transform:translateY(108vh);opacity:.5}}
@keyframes petalFlutter{0%{transform:translate(0,-12vh) rotate(0deg)}25%{transform:translate(26px,20vh) rotate(70deg)}50%{transform:translate(-20px,46vh) rotate(145deg)}75%{transform:translate(22px,74vh) rotate(215deg)}100%{transform:translate(-14px,110vh) rotate(300deg)}}
@keyframes flickerIn{0%{opacity:0}18%{opacity:.4}26%{opacity:.08}42%{opacity:.75}54%{opacity:.3}70%{opacity:1}80%{opacity:.7}100%{opacity:1}}
@keyframes blurUp{0%{opacity:0;transform:translateY(14px);filter:blur(7px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes inkNibBob{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-3px) rotate(-4deg)}60%{transform:translateY(2px) rotate(3deg)}}
@keyframes constPop{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.5)}100%{opacity:1;transform:scale(1)}}
.stamp-in{animation:stampIn .42s cubic-bezier(.2,.8,.3,1) both}
#app{position:fixed;inset:0;overflow:hidden;font-family:'Jost',sans-serif;transition:background .4s ease}
/* The .booting class is set by the inline <head> script and removed after the first
   render. Without this the theme correction on load ANIMATES over 400ms, turning a
   one-frame difference into a visible fade. Theme toggles after boot still animate. */
html.booting #app{transition:none}
.mode-transition *{transition:background-color .35s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease!important}
.scroll-reveal{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.3,1),filter .8s ease}
.scroll-reveal.visible{opacity:1;transform:none;filter:blur(0)}
/* blur-in is a per-frame repaint during entry — skip it on small screens and weak hardware (html.lite) */
@media(max-width:768px){.scroll-reveal{filter:none!important}}
.lite .scroll-reveal{filter:none!important}
/* toggled by an IntersectionObserver so offscreen infinite animations stop burning frames */
.anim-paused,.anim-paused *{animation-play-state:paused!important}
/* below-fold landing sections skip layout/paint until scrolled near */
.cv-auto{content-visibility:auto;contain-intrinsic-size:auto 420px}
@media(max-width:760px){
  .hero-editorial-grid{grid-template-columns:1fr!important;min-height:auto!important}
  .hero-editorial-right{display:none!important}
  .hero-editorial-left{align-items:center!important;text-align:center!important}
  .hero-editorial-left .hero-btns{justify-content:center!important}
}
@media(max-width:680px){
  .setup-bar{flex-direction:column!important;gap:10px!important;align-items:stretch!important}
}
button{cursor:pointer}
.vol-slider{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;outline:none;cursor:pointer;transition:height .12s ease;}
.vol-slider:hover{height:4px;}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:linear-gradient(135deg,#db2777,#9d174d);cursor:pointer;box-shadow:0 0 0 3px rgba(219,39,119,.22);transition:box-shadow .15s,transform .12s;}
.vol-slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 5px rgba(219,39,119,.3);transform:scale(1.15);}
.vol-slider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:linear-gradient(135deg,#db2777,#9d174d);cursor:pointer;border:none;box-shadow:0 0 0 3px rgba(219,39,119,.22);}
input,textarea{font-family:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid rgba(249,168,212,.8);outline-offset:3px;border-radius:4px}
.msg-editable:empty::before{content:attr(data-placeholder);color:inherit;opacity:.45;pointer-events:none}
.msg-editable:focus-visible{outline:2px solid rgba(249,168,212,.8);outline-offset:3px;border-radius:4px}

textarea{resize:vertical}
/* ── Horizontal film-timeline sequence editor ── */
.seq-timeline{display:flex;align-items:stretch;width:100%}
.seq-timeline-card{
  position:relative;
  cursor:pointer;
  border-radius:18px;
  overflow:hidden;
}
.seq-timeline{-webkit-overflow-scrolling:touch}
.seq-tl-preview{
  width:100%;
  height:130px;
  border-radius:16px 16px 0 0;
  overflow:hidden;
  position:relative;
  flex-shrink:0;
  background:rgba(0,0,0,.38);
}
.seq-tl-preview::after{
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:40px;
  background:linear-gradient(to bottom, transparent, rgba(0,0,0,.45));
  pointer-events:none;
}
/* ── Intro / Opening type option grid ── */
.seq-type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.seq-type-option{cursor:pointer;border-radius:18px;padding:20px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;transition:border-color .18s ease,background .18s ease,transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s ease}
.seq-type-option:hover{transform:translateY(-3px)}
/* On touch devices, ensure icon buttons meet the 44px minimum tap target (desktop stays compact) */
@media(pointer:coarse){
  .tap-44{min-width:44px;min-height:44px;display:inline-flex !important;align-items:center;justify-content:center}
}
/* ── Mobile responsive ─────────────────────────────── */
/* iOS Safari auto-zooms when a focused input's font-size is under 16px */
@media(max-width:600px){
  input:not([type=checkbox]):not([type=range]),textarea{font-size:16px!important}
}
@media(max-width:480px){.nav-brand-text{display:none!important}}
@media(max-width:600px){.hero-btns{flex-direction:column!important;align-items:stretch!important}.hero-btns button{width:100%!important}}

/* ── Music player: a little record player ─────────────────────────────── */
/* The palette comes from the letter around it: rose by default, paper in light letters,
   and each Film Strip design's own ink and paper. Only the --mp-* tokens change per theme. */
.music-card{--mp-bg:linear-gradient(150deg,#3c2536,#2b1826);--mp-ink:#f7e1e6;--mp-muted:#c6a0ad;--mp-accent:#dcb77a;--mp-btn:#eed3d6;--mp-btn-ink:#5e3c4b;--mp-track:rgba(247,225,230,.16);--mp-line:rgba(220,183,122,.2);--mp-shadow:0 14px 30px -16px rgba(0,0,0,.6);
  position:relative;width:100%;max-width:300px;border-radius:16px;overflow:hidden;background:var(--mp-bg);border:1px solid var(--mp-line);box-shadow:var(--mp-shadow);color:var(--mp-ink);font-family:'Jost',sans-serif;text-align:left}
.romance-light .music-card,.music-card.music-theme-light{--mp-bg:linear-gradient(150deg,#fff8f3,#f5e5df);--mp-ink:#5f3f4d;--mp-muted:#9c7380;--mp-accent:#b08448;--mp-btn:#75515e;--mp-btn-ink:#fff3ef;--mp-track:rgba(95,63,77,.14);--mp-line:rgba(117,81,94,.16);--mp-shadow:0 12px 26px -16px rgba(90,50,60,.35)}
.film-new .music-card{--mp-bg:var(--film-paper);--mp-ink:var(--film-ink);--mp-muted:var(--film-muted);--mp-accent:var(--film-muted);--mp-btn:var(--film-ink);--mp-btn-ink:var(--film-paper);--mp-track:color-mix(in srgb,var(--film-ink) 16%,transparent);--mp-line:color-mix(in srgb,var(--film-ink) 18%,transparent)}
.film-design-garden .music-card{--mp-bg:#fff4ed;--mp-ink:#793e54;--mp-muted:#6b838b;--mp-accent:#a0707f;--mp-btn:#793e54;--mp-btn-ink:#fff0ed;--mp-track:rgba(121,62,84,.14);--mp-line:rgba(107,131,139,.25);--mp-shadow:0 12px 26px -16px rgba(53,93,107,.35)}
.film-design-moon .music-card{--mp-bg:linear-gradient(150deg,#363c58,#2b3048);--mp-ink:#f1e9e1;--mp-muted:#b6b8cc;--mp-accent:#d5c4aa;--mp-btn:#edc2cd;--mp-btn-ink:#513b55;--mp-track:rgba(241,233,225,.15);--mp-line:rgba(213,196,170,.22)}
.film-design-cinema .music-card{--mp-bg:linear-gradient(150deg,#352c3f,#282130);--mp-ink:#edd1ca;--mp-muted:#b69aab;--mp-accent:#e3b7c3;--mp-btn:#e3b7c3;--mp-btn-ink:#292333;--mp-track:rgba(237,209,202,.14);--mp-line:rgba(227,183,195,.2)}
.music-yt-frame{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;pointer-events:none;z-index:0}
.music-body{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding:9px 10px 9px 9px}
.music-deck{position:relative;width:46px;height:46px;flex-shrink:0}
.music-disc{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 0 33%,#0d0509 34% 36%,transparent 37%),repeating-radial-gradient(circle,#1b0b13 0 1px,#120710 1px 2.2px);box-shadow:0 4px 10px -3px rgba(0,0,0,.55),0 0 0 1px var(--mp-line);animation:musicSpin 5.5s linear infinite}
.music-card.is-paused .music-disc{animation-play-state:paused}
.music-disc.no-motion{animation:none}
.music-label{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;overflow:hidden;background:radial-gradient(circle,#f3c6d8,#b84a78);box-shadow:0 0 0 1.5px var(--mp-accent)}
.music-label img{width:100%;height:100%;object-fit:cover;display:block}
.music-label:after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#1b0b13}
.music-sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from 200deg,transparent 0 12%,rgba(255,240,225,.16) 18%,transparent 26% 62%,rgba(255,240,225,.09) 68%,transparent 76%)}
.music-arm{position:absolute;right:-8px;top:-4px;width:20px;height:31px;color:var(--mp-accent);transform-origin:14.7px 4px;transition:transform .6s cubic-bezier(.3,.7,.3,1);pointer-events:none;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.4))}
.music-arm svg{display:block;width:100%;height:100%}
.music-card.is-paused .music-arm{transform:rotate(-20deg)}
.music-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.music-eyebrow{font-size:8px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mp-accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-title,.music-eyebrow{transition:opacity .3s ease}
.music-card.is-paused .music-title,.music-card.is-paused .music-eyebrow{opacity:.6}
.music-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:14.5px;line-height:1.2;color:var(--mp-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-controls{display:flex;align-items:center;gap:6px;margin-top:4px;color:var(--mp-muted)}
.music-controls svg{flex-shrink:0}
.music-play{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:0;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--mp-btn);color:var(--mp-btn-ink);box-shadow:0 3px 8px -3px rgba(0,0,0,.35);transition:transform .15s ease}
.music-play:hover{transform:scale(1.08)}
.music-card.is-paused .music-play svg{margin-left:2px}
.music-vol.vol-slider{flex:1;min-width:0;height:2px}
.music-vol.vol-slider:hover{height:3px}
.music-vol::-webkit-slider-thumb{width:9px;height:9px;background:var(--mp-accent);box-shadow:none}
.music-vol::-webkit-slider-thumb:hover{box-shadow:0 0 0 3px var(--mp-track);transform:none}
.music-vol::-moz-range-thumb{width:9px;height:9px;background:var(--mp-accent);box-shadow:none}
.music-fold{align-self:stretch;flex-shrink:0;width:18px;margin:-9px -10px -9px 0;border:0;border-left:1px solid var(--mp-line);background:transparent;color:var(--mp-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}
.music-fold svg,.music-play svg{flex-shrink:0}
.music-fold:hover{color:var(--mp-ink);background:var(--mp-track)}
.music-play:focus-visible,.music-fold:focus-visible,.music-vol:focus-visible{outline:2px solid var(--mp-accent);outline-offset:2px}
/* Letters saved before Spotify was dropped from the Studio still play through its embed. */
.music-sp-wrap{position:relative;z-index:1;height:80px;overflow:hidden;transition:height .3s ease}
.music-sp-wrap iframe{display:block;width:100%;height:80px;border:0}
.music-spotify .music-body{padding-bottom:6px}

/* Reading view: floats in the viewport's bottom-left corner, above the scene. */
.music-dock{position:absolute;left:16px;bottom:16px;z-index:58;width:256px;max-width:calc(100vw - 32px);transition:width .35s cubic-bezier(.3,.7,.3,1),border-radius .35s;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.music-dock.is-dragging{cursor:grabbing;box-shadow:0 22px 40px -18px rgba(0,0,0,.6)}
.music-dock.is-collapsed{width:88px;border-radius:40px}
.music-dock .music-info,.music-dock .music-play{transition:opacity .2s ease}
.music-dock.is-collapsed .music-info,.music-dock.is-collapsed .music-play{opacity:0;visibility:hidden;position:absolute;pointer-events:none}
.music-dock.is-collapsed .music-fold{margin-left:auto}
.music-dock.is-collapsed .music-deck{cursor:pointer}
.music-dock.is-collapsed .music-sp-wrap{height:0}
.play-scene.music-dock-overlap .bloom-film-footer{left:300px!important}
.play-scene.done-overlap .bloom-film-footer{right:250px!important}
@media (prefers-reduced-motion:reduce){.music-disc{animation:none}.music-arm,.music-dock{transition:none}}

/* ── Voice note: a small paper ticket ─────────────────────────────────── */
/* Stays paper in every theme, like the date cards and polaroids it sits beside on the desk. */
.voice-card{position:relative;display:flex;align-items:center;gap:11px;width:100%;max-width:214px;box-sizing:border-box;padding:9px 12px 9px 9px;background:linear-gradient(160deg,#fffaf2,#f5e9d3);border:1px solid #e3d2b0;border-radius:12px;box-shadow:0 12px 24px -14px rgba(60,40,20,.45);user-select:none;-webkit-user-select:none;font-family:'Jost',sans-serif;text-align:left}
.voice-card:before{content:'';position:absolute;inset:3px;border:1px dashed rgba(168,130,100,.32);border-radius:9px;pointer-events:none}
.voice-card:after{content:'';position:absolute;top:-7px;right:22px;width:38px;height:13px;background:rgba(214,191,140,.55);transform:rotate(5deg);pointer-events:none}
.voice-play{position:relative;flex-shrink:0;width:36px;height:36px;border-radius:50%;border:0;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff7f2;background:radial-gradient(circle at 35% 30%,#c0587c,#8a3a57 70%);box-shadow:0 4px 10px -4px rgba(138,58,87,.7),inset 0 0 0 2px rgba(255,240,235,.18);transition:transform .15s ease}
.voice-play:hover{transform:scale(1.07)}
.voice-play svg{margin-left:2px}
.voice-card.is-playing .voice-play svg{margin-left:0}
.voice-card.is-playing .voice-play:after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(138,58,87,.35);animation:voiceRing 1.6s ease-out infinite}
@keyframes voiceRing{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.25);opacity:0}}
.voice-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.voice-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.voice-eyebrow{font-size:8.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#a8826a}
.voice-time{font-size:10px;color:#9a7a64;font-variant-numeric:tabular-nums}
.voice-buds{display:flex;align-items:center;justify-content:space-between;height:17px;cursor:pointer}
.voice-bud{position:relative;width:15px;height:15px;flex-shrink:0;transform:scale(.5);transition:transform .3s cubic-bezier(.3,1.5,.4,1)}
.voice-bud.is-open{transform:scale(1)}
.voice-vol-row{display:flex;align-items:center;gap:6px;color:#b39a84}
.voice-vol.vol-slider{flex:1;min-width:0;height:2px}
.voice-vol::-webkit-slider-thumb{width:9px;height:9px;background:#8a3a57;box-shadow:none}
.voice-vol::-moz-range-thumb{width:9px;height:9px;background:#8a3a57;box-shadow:none}
.voice-play:focus-visible,.voice-vol:focus-visible{outline:2px solid #8a3a57;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.voice-card.is-playing .voice-play:after{animation:none;opacity:0}.voice-bud{transition:none}}