/* Default skin only. Shared player geometry lives in player.css and reading.css. */
@font-face{font-family:Besley;src:url('assets/Besley.ttf') format('truetype');font-style:normal;font-weight:400 900;font-display:swap}
@font-face{font-family:'Company Co Preview';src:url('assets/CompanyCoPreview.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{--title-paper:#f0ece4;--lyric-font:Besley,Georgia,"Times New Roman",serif}
:root{color-scheme:dark;--ink:#0b111b;--paper:#eef2f7;--muted:#9daabd;--accent:#9cc8ef;--pink:var(--accent);--pink-soft:#c4e1fa;--pink-rgb:156,200,239;--blue:var(--accent);--line:#ffffff25;--surface:15 28 48;--display:Arial,Helvetica,sans-serif;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;--safe:env(safe-area-inset-bottom,0px)}
body{font-family:var(--display)}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
[data-modal-return]:focus{outline:none}
.theater{--lyric-size:clamp(29px,5vw,52px);--tray-size:min(56.6212vw,56.6212dvh);--home-reminder-gap:clamp(18px,2.5dvh,26px);--tray-lift:calc(var(--lyric-size) * -.8);background:var(--ink)}
.topbar{color:#eef2f7ae}.icon-button{color:rgb(var(--ui-light, 219 229 239) / 0.70196078)}.icon-button:hover{color:var(--paper)}
.band-logo img{filter:none;opacity:.86}.band-logo:hover img{filter:none}
.transport-meta #timecode{color:rgb(var(--ui-light, 219 229 239) / 0.78823529)}.transport-meta #timecode span{color:rgb(var(--ui-light, 219 229 239) / 0.43921569)}
.mode-button[aria-pressed="true"]{color:var(--accent);background:rgb(var(--accent-rgb, 156 200 239) / 16%);box-shadow:inset 0 0 0 1px var(--accent),0 0 12px rgb(var(--accent-rgb, 156 200 239) / 16%)}
.mode-button[aria-pressed="true"]:hover{background:rgb(var(--accent-rgb, 156 200 239) / 25%)}
.mode-button:disabled,.tape-notes-button:disabled{color:rgb(var(--ui-light, 219 229 239) / 0.70196078)}
.panel-dialog{background:rgb(var(--surface) / 85%);border-color:rgb(var(--ui-border, 193 215 238) / 0.21960784);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
.panel-dialog::backdrop{background:rgb(var(--ui-backdrop, 6 12 22) / 20%);-webkit-backdrop-filter:none;backdrop-filter:none}
.panel-dialog.notes-dialog{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.notes-dialog::backdrop{background:rgb(var(--surface) / 85%);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
.panel-dialog .close-dialog{flex:none;display:grid;place-items:center;width:42px;height:42px;border:1px solid #ffffff13;border-radius:50%;background:#ffffff08;color:var(--paper);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
.panel-dialog .close-dialog:hover{background:#ffffff14;border-color:#ffffff29}
.notes-dialog>.close-dialog{width:44px;height:44px}
.dialog-body,.liner-notes-content{scrollbar-color:var(--ui-scroll, #62768e) transparent}
.dialog-header h2,.reading-dialog .dialog-heading>h2{font-family:var(--display);font-weight:400;letter-spacing:-.025em}
#lyrics-dialog{--reading-title-size:clamp(30px,7vw,44px)}
#lyrics-title{font:700 var(--reading-title-size)/1.05 var(--lyric-font);letter-spacing:-.035em}
#lyrics-hint{font:700 calc(var(--reading-title-size) * .26931818)/1.5 var(--lyric-font);letter-spacing:.012em}
.reading-dialog .dialog-switch{font-family:var(--display);padding:12px 21px}
.reading-dialog .dialog-switch span{transform:translateY(1px)}
@supports(text-box-trim:trim-both){.reading-dialog .dialog-switch span{text-box-trim:trim-both;text-box-edge:cap alphabetic;transform:none}}
.reading-dialog .dialog-switch:hover{color:var(--accent)}
.transcript button,.transcript .lyric-line{font:400 16px/1.7 var(--display);color:rgb(var(--ui-copy, 220 229 239));display:block;width:100%;text-align:left;padding:9px 7px;border-bottom:1px solid #ffffff09;margin:0}
.transcript .lyric-line{cursor:text}.transcript button.current{color:var(--accent);background:rgb(var(--accent-rgb, 156 200 239) / 7%)}
.transcript button{transition:color .2s ease,background-color .2s ease}
.transcript button:not(.current):is(:hover,:focus-visible){color:var(--paper);background:#ffffff09}
.transcript h3{color:var(--accent)}
.liner-notes-content{color:rgb(var(--ui-copy, 220 229 239));font-family:var(--display);font-size:16px}
.liner-notes-prose>p:first-child::first-letter{font-family:var(--display);background:var(--accent);color:var(--ink)}
.release-note{margin-top:30px;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-wrap:wrap;gap:22px}
.note-help{background:rgb(var(--surface) / 85%);border-color:rgb(var(--ui-border, 193 215 238) / 0.21960784);transform:translateX(calc(-50% + var(--note-shift,0px)))}
.note-info:hover,.note-info[aria-expanded="true"]{color:var(--accent)}
.motion-options{background:rgb(var(--ui-input, 3 9 18) / 70%)}
.motion-options::before{border-color:rgb(var(--accent-soft-rgb, 196 225 250) / 0.30196078);background:linear-gradient(180deg,var(--pink-soft),var(--accent))}
.motion-options[aria-checked="false"]>span:first-child,.motion-options[aria-checked="true"]>span:last-child{color:var(--ui-on-ink, #0b1726)}
.notes-dialog .offset-control output{background:rgb(var(--ui-input, 3 9 18) / 70%);padding:0}
.notes-dialog .offset-control .icon-button:hover:not(:disabled){border-color:rgb(var(--accent-rgb, 156 200 239) / 0.4);background:rgb(var(--accent-rgb, 156 200 239) / 0.0627451)}
.notes-dialog .offset-control .icon-button:active:not(:disabled){background:rgb(var(--accent-rgb, 156 200 239) / 0.10980392)}
.volume-popover{background:var(--ui-volume, #101d30)}
.status-message{background:rgb(var(--surface) / 96%);border-color:rgb(var(--accent-rgb, 156 200 239) / 0.37647059)}
.status-message.mode-status{background:none;border:0}
.download-pending{font:15px/1.8 var(--display);color:var(--muted);margin:24px 0 0}
.download-pending-link{opacity:.25;cursor:default}
/* Scene content is independently replaceable; no film texture or board effects. */
.scene-background,.sprite-stage,.stage-shade{position:absolute;inset:0;pointer-events:none}
.scene-background{z-index:0;overflow:hidden;background:radial-gradient(ellipse at 50% 43%,var(--scene-center, #25394c) 0,var(--scene-mid, #141f30) 45%,var(--ink) 88%);background-size:cover;background-position:center}
/* Broad overlapping pools drift on compositor-friendly transforms/opacity.
   Shared scene colors keep the timed red shifts in the same palette. */
.scene-background::before,.scene-background::after{content:"";position:absolute;inset:-15%;pointer-events:none;will-change:transform,opacity}
.scene-background::before{background:radial-gradient(ellipse at 34% 42%,var(--scene-center, #25394c),transparent 62%);animation:scene-drift-near 48s ease-in-out infinite}
.scene-background::after{background:radial-gradient(ellipse at 72% 58%,var(--scene-center, #25394c),transparent 58%);animation:scene-drift-far 64s ease-in-out infinite}
@keyframes scene-drift-near{0%,100%{transform:translate(-5%,-3%) scale(1.02,1.08);opacity:.24}35%{transform:translate(6%,2%) scale(1.12,.97);opacity:.42}70%{transform:translate(-2%,6%) scale(.98,1.14);opacity:.3}}
@keyframes scene-drift-far{0%,100%{transform:translate(4%,3%) scale(1.08,.98);opacity:.26}45%{transform:translate(-7%,-4%) scale(.96,1.14);opacity:.4}75%{transform:translate(1%,-2%) scale(1.12,1.02);opacity:.2}}
body.quiet .scene-background::before,body.quiet .scene-background::after{animation:none;opacity:0;will-change:auto}
@media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) .scene-background::before,html:not([data-motion="full"]) .scene-background::after{animation:none;opacity:0;will-change:auto}}
/* The supplied transparent artwork needs no edge mask or black-point filter.
   Its opacity and grayscale follow the title's existing audio clock. */
.album-art{position:absolute;inset:0;z-index:1;display:grid;place-items:center;opacity:1;filter:grayscale(0);mix-blend-mode:screen;pointer-events:none}
/* Match the former visible tray width and lift the heart by .8 lyric-text em. */
.album-art img{display:block;width:var(--tray-size);height:auto;object-fit:contain;transform:translateY(var(--tray-lift)) scale(var(--heart-scale,1));user-select:none}
.sprite-stage{z-index:2}.sprite-stage img,.sprite-stage video{position:absolute;object-fit:contain}
.stage-shade{z-index:3;background:linear-gradient(0deg,rgb(var(--stage-shadow, 7 13 22) / 0.70196078),transparent 30%,transparent 70%,rgb(var(--stage-shadow, 7 13 22) / 0.33333333))}
.title-card{--paper:var(--title-paper);color:var(--paper);--title-size:clamp(42px,8vw,88px);--launch-size:58px;--launch-gap:32px;--launch-border:rgb(var(--ui-copy, 220 229 239) / 0.43921569);--launch-fill:#0c162940;position:absolute;inset:90px 26px 165px;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.title-card .eyebrow{font:10px/1.5 var(--display);letter-spacing:.2em;margin:0 0 24px;color:var(--muted)}
.title-card h1{--wordmark-shadow:drop-shadow(0 2px 1px #0009);text-shadow:none;filter:drop-shadow(0 3px 2.5px #000c) drop-shadow(0 7px 9px #000b);font:700 var(--title-size)/1.05 var(--lyric-font);letter-spacing:-.035em;margin:0}
/* A 25px crown-to-end rise at the 88px title size; keep its prior ink center. */
.arched-company{--wordmark-edge:#d2d1cd;position:relative;isolation:isolate;white-space:nowrap}
.arched-company span{position:relative;z-index:1;display:inline-block;transform:translate(var(--arc-center-x,0em),calc(var(--lift) + var(--arc-center-y,0em))) rotate(var(--tilt)) translateY(var(--letter-center-shift,0em)) scale(var(--letter-scale,1));transform-origin:50% 89.0476%}
/* Match Besley Bold's lowercase tops (1070 units) and the midpoint of its
   p/y descenders (-510/-525), following the same rotated arc as each letter.
   Uniform scaling preserves the C's native proportions; position is separate. */
.arched-company span:first-child{--letter-center-shift:.243486em;--letter-scale:1.017628}
/* Optional ?wordmark=tall-c: preserve the 517.5-unit descent and add the same
   overshoot above the 1070-unit lowercase top. Uniform scale keeps C undistorted. */
.arched-company.tall-c>span:first-child{--letter-center-shift:.238510em;--letter-scale:1.349359;margin-inline:.10em}
.arched-company.co-ligature>span:first-child{font-family:'Company Co Preview',Besley,serif;font-feature-settings:'liga' 1;letter-spacing:0;margin-right:-.035em;--letter-center-shift:0em;--letter-scale:1}
/* The rule is 9 units: about 1px thinner at the normal 88px title size.
   Its lower arc stays fixed; only the top edge retreats downward.
   Keep broad shadows behind the whole wordmark, with only tight contact shadows
   between the separate layers so the underline's white face stays bright. */
.arched-company>span,.title-arc-rules{filter:var(--wordmark-shadow)}
.arched-company>.title-letter-p{filter:drop-shadow(1px 3px 1.6px #000d)}
/* Paint the white face over a centered 2px stroke, leaving 1px outside. */
.arched-company>span{-webkit-text-stroke:2px var(--wordmark-edge);paint-order:stroke fill}
.title-arc-rules .title-rule-edge{stroke:var(--wordmark-edge);vector-effect:non-scaling-stroke}

.title-arc-rules{position:absolute;z-index:0;top:0;left:0;width:100%;height:1.3em;overflow:visible;fill:none;stroke:currentColor;stroke-width:9;stroke-linecap:butt;pointer-events:none}
.song-subtitle{text-shadow:none;filter:drop-shadow(0 2px 3px #000e) drop-shadow(0 5px 12px #000c);font:700 calc(var(--title-size) * .26931818)/1.5 var(--lyric-font);letter-spacing:.012em;margin:12px 0 0;color:var(--paper)}
.song-subtitle{white-space:nowrap}
.song-subtitle span{display:inline-block;white-space:pre;transform-origin:50% 77.333333%}
.arched-company,.song-subtitle{user-select:text;-webkit-user-select:text}
/* Opaque ivory paper over live, selectable text. The title's existing stroked
   glyph stays underneath, so its 1px outside edge and contact shadow survive. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .arched-company>span::after,.song-subtitle>span{background:var(--paper) url("assets/label-paper-ivory.svg?v=1") center/160px 160px;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
  .arched-company>span::after{content:attr(data-letter);position:absolute;inset:0;-webkit-text-stroke:0;pointer-events:none}
}

.begin-button{--sticker-angle:-7deg;--badge-scale:1;position:absolute;left:27.3%;top:77%;display:grid;place-items:center;width:13.975%;aspect-ratio:1;height:auto;border-radius:50%;border:0;padding:0;color:var(--paper);background:transparent;margin:0;opacity:1;transform:translate(-50%,-50%) rotate(var(--sticker-angle));transform-origin:center;transition:opacity .5s ease,transform .35s ease;will-change:transform}
/* Centered print and paper share the tray's proportional coordinate system.
   The whole sticker is 7.5% larger; its off-white rim scales with it. */
.begin-button::before{content:"";position:absolute;inset:-4.37%;z-index:-1;background:var(--paper) url("assets/label-paper-ivory.svg?v=1") center/cover;border-radius:50%;box-shadow:0 1px 1px #0005;pointer-events:none}
.begin-status{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) rotate(calc(-1 * var(--sticker-angle)));white-space:nowrap;font:500 10px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.13em;color:var(--accent)}
.begin-status:empty{display:none}
.begin-button[aria-busy="true"]{cursor:progress}
.begin-button[aria-busy="true"]::after{content:"";position:absolute;inset:-3px;border:2px solid transparent;border-top-color:var(--accent);border-right-color:rgb(var(--accent-rgb, 156 200 239) / 0.26666667);border-radius:50%;pointer-events:none;animation:begin-load-spin 1s linear infinite}
@keyframes begin-load-spin{to{transform:rotate(360deg)}}
body.quiet .begin-button[aria-busy="true"]::after{animation:none}
@media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) .begin-button[aria-busy="true"]::after{animation:none}}
/* Red sticker with a white keyline and the unchanged control-emblem S/arrow.
   Sticker hover gently enlarges and reverses the centered play badge. */
/* Rotate one composited layer, including the paper rim; keep the textured SVG
   stationary inside it so its grain does not shift during hover. */
.begin-button svg{display:block;width:100%;height:100%;margin:0;border-radius:50%;overflow:hidden}
.begin-button .begin-mark{fill:url(#begin-white-paper);opacity:1}
.begin-button .begin-separator,.begin-button .begin-paper-wear{stroke:url(#begin-white-paper)}
.begin-sticker-print{opacity:1}
.begin-play-badge{opacity:1;transform-box:fill-box;transform-origin:center;transform:rotate(calc(-1 * var(--sticker-angle))) scale(var(--badge-scale));transition:transform .35s ease;filter:drop-shadow(0 3px 3px #0005)}
.begin-play-disc{fill:url(#begin-white-paper)}
.begin-play-disc-hover{opacity:0;fill:url(#begin-blue-paper);stroke:var(--paper);transition:opacity .25s ease}
.begin-play-mark{transition:fill .25s ease}
/* Every Home artwork hit area shares the sticker cue. Keep the trigger's
   specificity low so the existing Reduced Motion setting still wins. */
.begin-button:is(:hover,:focus-visible),:where(.theater.home-screen:has(.album-art img:hover,.arched-company:hover,.song-subtitle:hover)) .begin-button{--sticker-angle:-13deg;--badge-scale:1.05}
.begin-button:is(:hover,:focus-visible) .begin-play-disc-hover,:where(.theater.home-screen:has(.album-art img:hover,.arched-company:hover,.song-subtitle:hover)) .begin-play-disc-hover{opacity:1}
.begin-button:is(:hover,:focus-visible) .begin-play-mark,:where(.theater.home-screen:has(.album-art img:hover,.arched-company:hover,.song-subtitle:hover)) .begin-play-mark{fill:var(--paper)}
body.quiet .begin-button,body.quiet .begin-button *{transition:none}
body.quiet .begin-button{--sticker-angle:-7deg;--badge-scale:1}
@media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) .begin-button{--sticker-angle:-7deg;--badge-scale:1}}
/* Retain the title and chapter geometry after removing the home reading link. */
.title-content::after{content:"";display:block;height:60px;flex:none}
.theater.started .begin-button{opacity:0;visibility:hidden;pointer-events:none}
/* Let the tray receive hover through the empty title layout on Home. */
.theater.home-screen .title-card{pointer-events:none}
.theater.home-screen .album-art img,.theater.home-screen .arched-company,.theater.home-screen .song-subtitle{pointer-events:auto;cursor:pointer}
.theater.home-screen .begin-button{pointer-events:auto}
.lyric-stage{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:80px 26px 160px;pointer-events:none}
.active-lyric{width:min(100%,24ch);text-align:center;font:400 var(--lyric-size)/1.34 var(--lyric-font);text-wrap:balance;text-shadow:0 2px 18px #000}
/* Same impact timing and red as the page; recovery blends to lyric white.
   Early karaoke/offset presentation also begins in the normal lyric color. */
.lyric-death-word{color:var(--lyric-impact,var(--paper))}
.end-card{position:absolute;inset:80px 24px 150px;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center}
.end-card>img{width:min(44vw,24svh,210px);height:auto;opacity:.9}.end-actions{display:flex;flex-direction:column;gap:18px;align-items:center}.end-links{display:flex;gap:22px}
.replay-button{display:flex;align-items:center;justify-content:center;gap:10px;min-width:140px;height:46px;font:11px var(--display);letter-spacing:.12em;border:1px solid var(--line);border-radius:4px}.replay-button:hover{background:#ffffff08}
#theater.fullscreen-mode .end-actions{opacity:1;transition:opacity .3s}#theater.fullscreen-mode.controls-idle .end-actions{opacity:0;pointer-events:none}
@media(max-width:699px) and (orientation:portrait){.reading-dialog .dialog-switch{padding-inline:12px;font-size:10px}.title-card{inset:85px 24px 165px}.title-card .eyebrow{margin-bottom:18px}}
@media(orientation:landscape) and (max-height:599px){.title-card{--title-size:clamp(30px,8vh,62px);inset:65px 24px 130px}.title-card .eyebrow{margin-bottom:9px}.song-subtitle{margin-top:5px}.title-card{--launch-gap:12px;--launch-size:42px}.title-content::after{height:45px}.end-card{inset:50px 24px 120px;flex-direction:row;gap:40px}.end-card>img{width:100px}.status-message.mode-status{font-size:14px}}
@media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) *,html:not([data-motion="full"]) *::before,html:not([data-motion="full"]) *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* The shared end screen retains the emblem and three-row action arrangement. */
.end-card.final-replay{display:block;inset:0;padding:0;background:none}
.end-logo-frame{position:absolute;left:50%;top:40%;width:min(44vw,24svh,210px);aspect-ratio:1;transform:translate(-50%,-50%);isolation:isolate}
.final-replay .end-logo{display:block;width:100%;height:100%;opacity:.92}
.end-actions{position:absolute;left:20px;right:20px;top:calc(40% + min(22vw,12svh,105px) + 16px);bottom:calc(130px + var(--safe));display:grid;grid-template-rows:minmax(42px,1fr) minmax(46px,1fr) auto;justify-items:center;gap:10px}
.release-links{display:flex;align-items:center;justify-content:center;gap:12px}.release-links-large{margin:0;gap:14.4px;align-self:center}
.service-link{width:36px;height:36px;padding:0;display:inline-grid;place-items:center;color:var(--muted);text-decoration:none;transition:color .2s;flex:none}
.service-link svg{width:19px;height:19px;fill:currentColor}.service-link[href]:hover,.service-link[data-open]:hover{color:var(--accent)}.service-link[aria-disabled="true"]{opacity:.25;cursor:default}
.release-links-large .service-link{width:42px;height:42px}.release-links-large svg{width:31px;height:31px}
.end-actions .replay-button{align-self:center;min-width:140px;height:46px;font-size:11px;opacity:.8}
.end-primary-actions{display:flex;align-items:center;justify-content:center;gap:12px;align-self:center;width:min(100%,292px)}
.end-primary-actions .replay-button{flex:1;min-width:0;white-space:nowrap}
.end-primary-actions .learn-more-button{background:var(--accent);border-color:var(--accent);color:var(--ink);opacity:1}
.end-primary-actions .learn-more-button:hover{background:var(--pink-soft);border-color:var(--pink-soft)}
.end-links{display:flex;align-items:baseline;justify-content:center;gap:13px;white-space:nowrap}
.end-card.final-replay .end-links .text-button{display:inline-flex;align-items:center;justify-content:center;position:static;min-height:30px;padding:5px 0;margin:0;font-size:10px;line-height:1.2;color:var(--muted);text-decoration:none}
.credits-mode .topbar .band-logo{visibility:hidden}
.credits-mode .chapter-marks{visibility:hidden}
/* Patience's optical alignment refinement, within the unchanged hit areas. */
.topbar .text-button span{display:block;line-height:1;transform:translateY(1px)}.topbar .text-button svg{display:block;align-self:center}
@supports(text-box-trim:trim-both){.topbar .text-button span{text-box-trim:trim-both;text-box-edge:cap alphabetic;transform:none}}
@media(orientation:landscape) and (max-height:599px){.end-logo-frame{top:29%;width:24svh}.end-actions{top:calc(41% + 7px);bottom:94px;gap:3px;grid-template-rows:minmax(32px,1fr) minmax(34px,1fr) auto}.release-links-large{gap:11.2px}}

/* Audio-clock crossfades. Both lines occupy the same responsive safe area. */
.lyric-stage{display:grid;place-items:center;overflow:hidden;padding:100px 8vw 175px}
.lyric-stage .active-lyric{grid-area:1/1;width:min(100%,27ch);margin:0;opacity:0;transform-origin:center;will-change:opacity,transform}
.title-card{will-change:opacity}
@media(orientation:landscape) and (max-height:599px){.lyric-stage{padding:65px 10vw 125px}.theater{--lyric-size:clamp(20px,6vh,36px)}}

/* Shared launch frame: Patience/Jump Scare outer spacing and icon geometry. */
.splash-chrome{position:absolute;inset:0;z-index:21;padding:22px 24px 18px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.splash-artist,.splash-footer{opacity:0;visibility:hidden;transition:opacity .65s ease,visibility 0s .65s}
.theater.home-screen .splash-artist,.theater.home-screen .splash-footer{opacity:1;visibility:visible;transition-delay:0s}
.splash-header{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--accent)}
.splash-artist{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;white-space:nowrap;color:inherit;text-decoration:none;font:13px/1.2 var(--display);letter-spacing:.2em;pointer-events:auto}
.splash-symbol{display:block;width:30px;height:30px;flex:none;opacity:1}
.splash-artist:hover{color:var(--paper)}
.splash-tagline{cursor:pointer;position:relative;display:flex;align-items:center;justify-content:flex-end;column-gap:.5em;min-height:1.4em;margin:0;padding:0;text-align:right;font:400 8px/1.4 var(--display);letter-spacing:.18em;opacity:0;visibility:hidden;max-width:45%;text-wrap:balance;pointer-events:auto;transition:opacity .65s ease,visibility 0s .65s}
.theater.home-screen .splash-tagline{opacity:.63;visibility:visible;transition-duration:.25s,.25s,0s;transition-delay:0s}
.splash-tagline{transition:color .25s ease,opacity .65s ease,visibility 0s .65s}
.theater.home-screen .splash-tagline:is(:hover,:focus-visible,:active){color:var(--accent);opacity:1}
.lyrics-button{transition:color .2s,opacity .65s ease}
.splash-tagline:empty{min-width:20%;visibility:hidden}
.splash-tagline-copy{min-width:0;font-family:"Arial Narrow","Helvetica Neue",Arial,Helvetica,sans-serif;font-stretch:condensed;letter-spacing:.12em}
.splash-tagline-copy strong{font-weight:700}
/* Reuse the archived decision status typography without changing tray placement.
   First reminder: 60–75 seconds. Repeat at 120, 180…; leaving Home or
   starting audio loading cancels the animation and resets its initial delay. */
.home-play-reminder{position:absolute;left:50%;top:calc(50% + var(--tray-lift) + var(--tray-size) * .47 + var(--home-reminder-gap) - 8px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 44px);margin:0;padding:8px 12px;border:0;background:none;color:var(--accent);font:500 16.5px/1.2 var(--display);letter-spacing:.17em;text-shadow:0 2px 4px #000b;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none}
.home-play-reminder strong{font-weight:700}
.theater.home-screen:not(:has(.begin-button[aria-busy="true"])) .home-play-reminder{animation:home-play-reminder 60s ease-in-out 60s infinite}
@keyframes home-play-reminder{0%{opacity:0;visibility:visible;pointer-events:auto}1.666667%,23.333333%{opacity:.63;visibility:visible;pointer-events:auto}25%,100%{opacity:0;visibility:hidden;pointer-events:none}}
/* A gentle reminder fade remains available with Reduced Motion. */
@media(prefers-reduced-motion:reduce){.theater.home-screen:not(:has(.begin-button[aria-busy="true"])) .home-play-reminder{animation:home-play-reminder 60s ease-in-out 60s infinite!important}}
@media(orientation:landscape) and (max-height:599px){.home-play-reminder{font-size:14px}}

/* Temporary rehearsal control; remove via song.js before launch. */
.death-test-button{min-height:44px;padding:12px 18px;border:1px solid rgb(var(--accent-rgb) / .3);border-radius:8px;font:500 11px/1.4 var(--display);letter-spacing:.1em;color:var(--accent)}
.death-test-button:hover{color:var(--paper);border-color:var(--accent)}
.death-test-hint{margin:0;max-width:28ch;color:var(--muted);font:10px/1.5 var(--display);letter-spacing:.02em}
.notes-dialog .note-row[hidden]{display:none}
.splash-tagline-note{flex:none;font-size:2em;line-height:1;letter-spacing:0;transition:font-size .3s ease}
.splash-tagline.tagline-stacked .splash-tagline-note{font-size:4.2em}
@media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) .splash-tagline-note{transition:none}}
.splash-footer{display:flex;flex:none;flex-wrap:nowrap;justify-content:space-between;align-items:center;column-gap:24px;row-gap:4px;padding-top:12px;border-top:1px solid rgb(var(--accent-rgb, 156 200 239) / 8.24%);pointer-events:auto}
.splash-footer .release-links{flex:none;margin:0 0 0 auto;min-height:42px;justify-content:flex-end;gap:clamp(3.2px,.8vw,6.4px)}
.theater .splash-footer .service-link{width:36px;height:36px;padding:0;color:var(--muted)}
.theater .splash-footer .service-link:hover:not([aria-disabled="true"]){color:var(--accent)}
.theater .splash-footer .service-link svg{width:21.85px;height:21.85px}
.theater .splash-footer .service-download svg{transform:scale(1.12)}
/* Animate the painted SVG directly; keep the hover target close to the seal. */
.splash-controls{display:inline-flex;flex:none;align-items:center;justify-content:flex-start;width:44px;height:42px;padding:0;color:var(--muted)}
.splash-controls svg{width:40px;height:40px;fill:var(--muted);opacity:.55;transition:fill .25s ease,opacity .25s ease}
.splash-controls:is(:hover,:focus-visible) svg{fill:var(--accent);opacity:1}
.theater:not(.home-screen) .splash-chrome *{pointer-events:none}
.theater.home-screen .topbar,.theater.home-screen .transport{opacity:0!important;visibility:hidden;pointer-events:none!important}
.topbar,.transport{transition:opacity .65s ease}
/* Keep the title stationary as the splash frame yields to playback controls. */
.title-card{inset:90px 26px 110px}
@media(min-width:700px) and (min-height:600px){.splash-chrome{padding:30px 42px 24px}.splash-tagline{font-size:10px}.splash-footer{padding-top:14px}}
@media(min-width:1100px) and (min-height:650px){.splash-chrome{padding:36px 4.5vw 25px}}
@media(max-width:699px) and (orientation:portrait){.title-card{inset:85px 24px 105px}}
@media(max-width:420px){.splash-header{gap:8px}.splash-tagline{max-width:32%;font-size:7px}.splash-artist{gap:8px;font-size:11px;letter-spacing:.14em}.splash-symbol{width:26px;height:26px}}
@media(orientation:landscape) and (max-height:599px){.splash-chrome{padding:12px 28px}.splash-footer{padding-top:0}.splash-footer .release-links{min-height:32px}.theater .splash-footer .service-link{width:32px;height:32px}.theater .splash-footer .service-link svg{width:20.7px;height:20.7px}.splash-controls{height:32px}.title-card{inset:65px 24px 75px}}
@media(max-width:359px){.splash-chrome{padding-left:18px;padding-right:18px}.splash-artist{font-size:11px}.splash-tagline{font-size:7px}}

@media(orientation:landscape) and (max-height:599px){.splash-controls svg{width:30px;height:30px}}

/* Retain the title stack's established frame independently of the controls. */
.title-stack{position:relative;height:calc(var(--title-size) * 1.45397727 + 162px)}
@media(orientation:landscape) and (max-height:599px){.title-stack{height:calc(var(--title-size) * 1.45397727 + 104px)}}
/* Artwork and printed overlays share one tray coordinate system. Separate
   paint layers keep the art's screen blend/opacity away from the live type. */
/* Separate opacity layers retain the same tray geometry: the sticker returns
   in .5s after Stop, independently of the title's existing 1s fade. */
.title-content,.package-sticker{--package-title-size:calc(var(--tray-size) * .22);position:fixed;left:50%;top:50%;width:var(--tray-size);aspect-ratio:1600/1504;transform:translate(-50%,calc(-50% + var(--tray-lift))) scale(var(--heart-scale,1));will-change:opacity;pointer-events:none}
.title-content::after{display:none}
.title-content .arched-company{position:absolute;left:50%;top:33.333333%;width:max-content;font-size:var(--package-title-size);transform:translate(-50%,-50%)}
.title-content .song-subtitle{position:absolute;left:50%;top:50.833333%;width:max-content;font-size:calc(var(--package-title-size) * .26931818);margin:0;transform:translate(-50%,-50%)}
/* Stop restores the home artwork/title in one second. Playback removes
   is-stopped, so its eight-second audio-clock fade has no CSS easing lag. */
.theater.is-stopped .title-content{transition:opacity 1s ease}
.theater.is-stopped .album-art{transition:opacity 1s ease,filter 1s ease}
.theater.is-stopped .album-art img{transition:transform 1s ease}
/* Reflect the progress-line center across the time row's center. Both vertical
   gaps then match, including the shorter seek hit area in phone landscape. */
.transport{--seek-hit-height:27px}
.transport-meta{position:relative}
.transport .seek-wrap,.transport .seek{height:var(--seek-hit-height)}
.chapter-label{position:absolute;left:50%;top:calc(var(--seek-hit-height) * -.5);width:max-content;max-width:80vw;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none;font:400 10px/1.5 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.chapter-label span{grid-area:1/1;opacity:0}
@media(orientation:landscape) and (max-height:599px){.transport{--seek-hit-height:22px}}

/* Impact color is applied on the scene frame; recovery comes from the song clock. */
.story-blood-active :is(.text-button,.icon-button,.mode-button,.decision-choice,.splash-controls svg){transition-property:opacity,transform}
.story-blood-active :is(.decision-marker img,.loop-countdown img){filter:hue-rotate(calc(var(--story-blood) * 145deg)) saturate(calc(1 + var(--story-blood) * .3)) brightness(calc(1 - var(--story-blood) * .1))}
/* The masked emblem already uses the live accent; hue rotation would tint it twice. */
.band-logo #band-symbol{filter:none}

/* Alpha-mask the original emblem with the same live accent as its text.
   The inner bitmap still feeds the existing rotating favicon renderer. */
.themed-gilly{display:block;flex:none;background-color:currentColor;-webkit-mask:url('assets/gilly-emblem.svg?v=7') center/contain no-repeat;mask:url('assets/gilly-emblem.svg?v=7') center/contain no-repeat}
.themed-gilly>img{visibility:hidden;display:block;width:100%;height:100%}
.band-logo{color:var(--accent)}
.band-logo #band-symbol{width:43px;height:43px;transform-origin:center;opacity:.86;will-change:transform}
.band-logo:hover #band-symbol{opacity:1}.quiet .band-logo #band-symbol{will-change:auto}
@media(min-width:700px) and (min-height:600px){.band-logo #band-symbol{width:46px;height:46px}}
@media(orientation:landscape) and (max-height:599px){.band-logo #band-symbol{width:32px;height:32px}}