@font-face{font-family:VT323;src:url("fonts/VT323-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;--ink:#f3e4d5;--muted:#b29486;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;--slot:104px;--language-height:52px;--translation-height:76px;--backdrop-opacity:.65}
*{box-sizing:border-box}html,body{overflow-x:clip;margin:0;min-height:100%;background:#0c0505;color:var(--ink)}body{--shade-edge:.36;--shade-middle:.16;font:14px/1.5 var(--mono)}
body[data-playback="playing"]{--shade-edge:.18;--shade-middle:.08}
#plasma{position:fixed;inset:0;width:100vw;pointer-events:none;opacity:.75}
/* Both decorative pieces share the same playback-dependent shading. */
body:after{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(270deg,rgba(12,5,5,var(--shade-edge)),rgba(12,5,5,var(--shade-middle)) 52%,transparent 85%)}
.performer{position:fixed;bottom:0;right:-7vw;width:min(1120px,100vw,calc(100dvh * 4/3));aspect-ratio:4/3;overflow:hidden;pointer-events:none;opacity:var(--backdrop-opacity)}
#arcade{position:absolute;top:0;left:-5.5555555556%;width:111.1111111111%;height:111.1111111111%;border:0;background:transparent}
main{position:relative;z-index:1;min-height:100dvh;padding:clamp(24px,5vw,80px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px}
.masthead{width:min(810px,70vw);transform:translate(-5vw,-10dvh) scale(1.1);transform-origin:left top}
.song-stage{width:min(740px,70vw);align-self:flex-end}
#banner{min-height:14.95em;font:8px/1.15 var(--mono);white-space:pre;max-width:100%;overflow:hidden;margin:0;color:#d7c2b5}
#lyrics{position:relative;height:calc(420px - var(--language-height));isolation:isolate;overflow:hidden;mask-image:linear-gradient(transparent,#000 14%,#000);-webkit-mask-image:linear-gradient(transparent,#000 14%,#000)}
.lyric-row{position:absolute;bottom:8px;left:0;width:100%;height:var(--slot);display:flex;align-items:center;margin:0;transform-origin:left center;will-change:transform,opacity;font-family:VT323,var(--mono);font-size:clamp(30px,3.1vw,44px);line-height:1.12;letter-spacing:0;text-wrap:balance;text-shadow:0 2px 24px #0c0505}
.lyric-text{display:block;width:100%}.lyric-word{display:inline-block;white-space:nowrap}.lyric-char{display:inline-block;white-space:pre}

.player{display:flex;align-items:center;gap:24px;width:calc(100% - 10vw);max-width:none;margin-top:12px;transform:translate(10vw,4dvh)}
#play{flex:none;display:block;font:16px/1 var(--mono);border:0;border-radius:0;background:transparent;color:var(--ink);padding:6px;cursor:pointer;transform-origin:center}
#play-frame{display:block;white-space:pre}#play:hover{color:#fff8ef;filter:drop-shadow(0 0 7px #f3e4d54d)}
#play:focus-visible{outline:1px solid var(--ink);outline-offset:6px}#play:disabled{opacity:.35;cursor:wait}
#play.invitation:not(:disabled){animation:invite 3.2s ease-in-out infinite}
@keyframes invite{0%,16%,32%,100%{opacity:.65;transform:scale(1)}7%,23%{opacity:1;transform:scale(1.075)}}
.transport{flex:1;min-width:0}.timeline{position:relative;display:flex;align-items:center;height:36px;width:100%;cursor:pointer;color:var(--muted)}
#seek-text{display:block;white-space:pre;font:14px/1 var(--mono);letter-spacing:0;width:100%;overflow:hidden}
#seek{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.timeline:hover,.timeline:focus-within{color:var(--ink)}.timeline:focus-within{outline:1px dashed var(--muted);outline-offset:3px}
.timecode{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;line-height:1;letter-spacing:.06em;font-variant-numeric:tabular-nums}
#notice{max-width:700px;margin:0;color:#ffb29b}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(min-width:761px){.lyric-text{text-align:right}}
@media(max-width:760px){:root{--slot:100px;--backdrop-opacity:.48}main{padding:32px 24px;gap:12px;justify-content:flex-start}.masthead{transform:translate(-5vw,0) scale(1.1)}.masthead,.song-stage{width:100%}#banner{font-size:clamp(3.5px,1.05vw,7px)}#lyrics{height:calc(min(400px,56dvh) - var(--language-height))}.lyric-row{font-size:clamp(25px,6.7vw,36px);line-height:1.18;letter-spacing:0}.performer{right:-44vw;width:150vw;max-width:none;opacity:var(--backdrop-opacity)}.player{gap:18px;margin-top:8px}#play{font-size:14px}#seek-text{font-size:12px}body{--shade-edge:.28;--shade-middle:.12}body[data-playback="playing"]{--shade-edge:.15;--shade-middle:.06}}
@media(max-width:350px){main{padding-inline:18px}.player{gap:12px}.lyric-row{font-size:24px}}
@media(min-height:601px) and (max-height:760px) and (min-width:761px){main{padding:24px 40px;gap:8px}#lyrics{height:calc(240px - var(--language-height))}}
@media(max-height:600px) and (min-width:761px){:root{--slot:80px}main{padding:24px 40px;gap:8px}#banner{font-size:6px}#lyrics{height:calc(min(240px,calc(100dvh - 220px)) - var(--language-height))}.lyric-row{font-size:30px}.player{margin-top:6px}}
@media(max-height:500px) and (max-width:760px){:root{--slot:72px}main{padding-block:18px}#lyrics{height:calc(190px - var(--language-height))}#banner{font-size:4px}.lyric-row{font-size:26px}.player{margin-top:0}#play{font-size:12px}}
@media(prefers-reduced-motion:reduce){#play.invitation:not(:disabled){animation:none} .lyric-row{will-change:auto}}

/* Absolute placement keeps the established lyrics and player positions intact.
   The block starts under the title's ink, not under its box: the last two grid
   rows of the dissolve banner are empty, and the timer itself sits two rows in. */
.countdown{position:absolute;left:0;top:calc(11.8 * var(--title-cell,8px) + 2.4em + 4px);width:144ch;max-width:100%;font:var(--title-cell,8px)/1.15 var(--mono);text-align:center;color:#d7c2b5}
.countdown-head,.countdown-foot{margin:0;font:clamp(15px,1.45vw,20px)/1.2 VT323,monospace;white-space:pre;color:#e6d3c5}
.countdown-head{margin-bottom:.35em}
.countdown-foot{margin-top:.4em}
.countdown-phrase,.countdown-line{margin:0;font:inherit;white-space:pre}
/* The timer keeps the dimmed tone the whole block used to share. */
#countdown-clock{display:block;width:max-content;margin:0 auto;font:inherit;font-size:1.6em;white-space:pre;color:#ae9b92}

/* Wide desktop centres the two lines on the timer's own vertical axis, also
   vertically. JS sets the axis; below 1366px the lyrics column starts left of
   that axis, so there the lines stay around the timer. */
.slogans{position:fixed;left:50%;top:0;height:100dvh;width:max-content;max-width:94vw;transform:translateX(-50%);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.55em;pointer-events:none;text-align:center;z-index:1;font:clamp(20px,2.2vw,32px)/1.25 VT323,monospace}
.slogans .countdown-head,.slogans .countdown-foot{margin:0;font:inherit;white-space:pre;color:#e6d3c5;text-shadow:0 2px 20px #0c0505,0 0 10px #0c0505}
.slogans:empty{display:none}

.gears{position:fixed;left:-7.425vw;bottom:-14.85dvh;width:min(561px,37.125vw,59.4dvh);aspect-ratio:112 / 124;overflow:hidden;pointer-events:none;opacity:var(--backdrop-opacity);color:#d7c2b5}
#gears-art{display:block;width:100%;background:transparent;transform:scale(.5);transform-origin:top left}
@media(max-width:760px){.gears{display:none}}

@media(min-width:761px){body:after{background:linear-gradient(270deg,rgba(12,5,5,var(--shade-edge)),rgba(12,5,5,var(--shade-middle)) 52%,transparent 85%),linear-gradient(90deg,rgba(12,5,5,var(--shade-edge)),rgba(12,5,5,var(--shade-middle)) 22%,transparent 46%)}}

.language-controls{height:var(--language-height);display:flex;align-items:center;justify-content:flex-end;gap:6px;width:calc(100% - 10vw);transform:translate(10vw,4dvh);margin-top:8px}
.language-button{flex:1;min-width:0;width:0;height:52px;padding:2px 0;border:0;border-radius:0;background:transparent;color:var(--ink);font:12px/1 var(--mono);opacity:.55;cursor:pointer;text-align:left}
.language-button span{display:block;white-space:pre}
.language-button[aria-pressed="true"]{opacity:.85}
.language-button:focus-visible{opacity:.65;outline:1px dashed var(--muted);outline-offset:2px}
@media(hover:hover){.language-button:hover{opacity:.65}}
@media(max-width:760px){.language-controls{gap:4px}.language-button{font-size:11px}}

.translation-slot{position:relative;height:0;width:calc(100% - 10vw);margin-left:10vw}
#translation{position:absolute;top:-8px;left:0;width:100%;margin:0;color:#d8c4b8;font:13px/1.35 var(--mono);text-align:right;opacity:.84;text-shadow:0 1px 2px #0c0505,0 0 6px #0c0505,0 0 14px #0c0505}
.translation-word{display:inline-block;white-space:nowrap}.translation-char{white-space:pre}
@media(max-width:760px){#translation{font-size:11px;line-height:1.25;text-align:left}}
@media(max-height:600px) and (min-width:761px){#translation{font-size:11px;line-height:1.25}}
@media(max-height:500px) and (max-width:760px){#translation{font-size:10px;line-height:1.1}}

#song-intro{position:absolute;top:0;bottom:0;left:var(--intro-left,10vw);width:var(--intro-width,calc(100% - 10vw));overflow:hidden;color:#d0d0d0;pointer-events:none}
#song-intro[hidden]{display:none}
#intro-marquee{position:absolute;margin:0;white-space:pre;font-family:var(--mono);line-height:1.15;left:0;top:50%;width:100%;transform:translateY(-50%);font-size:var(--intro-cell,10px);text-shadow:0 1px 4px #080808,0 0 16px #080808}

.language-button{position:relative}
.language-button .language-label{position:absolute;left:0;right:14.4px;top:2px;height:36px;display:flex;align-items:center;justify-content:center;font:22px/1 VT323,var(--mono);pointer-events:none}
@media(max-width:760px){.language-button .language-label{right:13.2px;height:33px;font-size:20px}}

/* Short landscape has no room for a bigger block: it would reach the lyrics. */
@media(max-height:620px){.countdown{top:calc(11.8 * var(--title-cell,8px) + .5em + 4px)}#countdown-clock{font-size:1em}.countdown-head,.countdown-foot{font-size:clamp(12px,1.2vw,16px)}}