:root{--brand-yellow:#ffde00;--brand-orange:#f7651b;--bg:#417fbd;--ink:#ffffff;--accent:#172561;--logo-filter:brightness(0) invert(1)}
*{box-sizing:border-box}
html,body{height:100%;width:100%;margin:0}
body{font-family:Arial,Helvetica,sans-serif;background:var(--bg)}
.screen{position:relative;width:100%;height:100svh;min-height:340px;background:var(--bg);color:var(--ink);overflow:hidden;isolation:isolate;transition:background-color 1300ms,color 1300ms}
.header{position:absolute;z-index:5;top:3.4%;left:2.8%;right:3.1%;display:grid;grid-template-columns:19% 14% minmax(0,1fr);gap:2.5%;align-items:start}
.brand{align-self:start;min-height:35px;position:relative}
/* Recolor the transparent logo using the existing album-derived theme ink. */
.brand img{filter:var(--logo-filter);animation:station-ident 24s cubic-bezier(.76,0,.24,1) infinite;transition:filter 1300ms}
.brand img{display:block;width:min(85%,240px);max-height:100px;object-fit:contain;object-position:top left}
.cover{width:100%;aspect-ratio:1;background:transparent center/cover no-repeat}
.information{border-left:clamp(2px,.22cqw,5px) solid var(--accent);padding-left:5.5%;min-height:14cqw}
.information h1{margin:-.06em 0 .07em;font-size:clamp(30px,4.55cqw,100px);font-weight:900;letter-spacing:-.065em;line-height:1;white-space:nowrap}
.rule{height:clamp(2px,.24cqw,5px);width:100%;background:var(--accent);margin-bottom:clamp(9px,1.1cqw,20px)}
.track-details{font-size:clamp(14px,1.55cqw,31px);font-weight:700;line-height:1.14}
.track-details div:empty{display:none}
/* Typography hierarchy only: same placement and overall proportions. */
#title{font-weight:900;letter-spacing:-.035em}
#artist{font-weight:700;margin-top:.15em}
#album,#year,#label{font-size:.78em;line-height:1.22;font-weight:600}
#album{margin-top:.28em}
#label{opacity:.82}
.equalizer{position:absolute;inset:28% 0 0;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;padding:0 1.4%;gap:clamp(3px,.43cqw,10px);pointer-events:none}
.eq-column{height:100%;flex:1;display:flex;flex-direction:column-reverse;justify-content:flex-start;align-items:center;gap:clamp(3px,.66cqh,11px)}
.eq-dot{width:min(100%,clamp(7px,1.35cqw,28px));aspect-ratio:1;border-radius:50%;background:var(--accent);opacity:0;transition:background-color 1.3s,opacity 70ms;filter:blur(.35px)}
.eq-dot.active{opacity:.95}
.disc{position:absolute;z-index:3;width:min(82cqw,122cqh);aspect-ratio:1;left:-13%;top:49%;border-radius:50%;border:clamp(6px,.75cqw,15px) solid #aab0b2;box-shadow:inset 0 0 0 3px #efefef,inset 0 0 0 7px #4d5358,0 0 0 2px #343434;overflow:hidden;animation:spin 5.5s linear infinite;animation-play-state:paused;background:#db2c1b}
.disc.playing{animation-play-state:running}
.disc-print{position:absolute;inset:0;border-radius:50%;background:var(--accent) center/cover no-repeat}
.disc-sheen{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 22%,rgba(255,255,255,.15) 30%,transparent 42%,rgba(0,0,0,.13) 58%,transparent 70%,rgba(255,255,255,.14) 85%,transparent 94%);pointer-events:none}
.disc-center{position:absolute;width:30%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);background:#050505;border:clamp(6px,.62cqw,12px) ridge #bdc4c8;border-radius:50%;box-shadow:0 0 0 2px #2e3437,inset 0 0 18px #202020;display:grid;place-items:center}
.disc-inner{width:35%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#d9dcdb 0 25%,#777 33%,#101010 58%,#cdd4d5 80%);border:2px solid #ddd}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.header{grid-template-columns:16% 21% minmax(0,1fr);gap:2%}.information h1{font-size:clamp(24px,4.6cqw,65px)}.track-details{font-size:clamp(12px,1.8cqw,23px)}.disc{width:105cqw;left:-22%;top:50%}.equalizer{inset:30% 0 0}}
@media(max-width:560px){.header{grid-template-columns:28% 1fr;row-gap:12px;top:3%;left:4%;right:4%}.brand{grid-column:1/-1}.brand img{max-width:48%;max-height:55px}.cover{grid-column:1}.information{grid-column:2;padding-left:5%;min-height:0}.information h1{font-size:clamp(20px,6.3cqw,42px)}.track-details{font-size:clamp(11px,3cqw,16px)}.equalizer{inset:33% 0 0}.disc{width:140cqw;left:-43%;top:53%}}

/* The original logo contracts to the block + M, then opens back out. */
@keyframes station-ident{0%,40%,100%{clip-path:inset(0 0 0 0)}48%,80%{clip-path:inset(0 66% 0 0)}88%{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.brand img,.disc{animation:none!important}}
/* Small refinements to the original composition. */
.information h1{font-size:clamp(30px,4.3cqw,94px);margin-bottom:.12em}
.rule{margin-bottom:clamp(12px,1.2cqw,23px)}
#artist{margin-top:.23em}
#album{margin-top:.42em}
.disc{animation-duration:7.5s}
.header.track-entering .cover{animation:cover-reveal .65s ease-out both}
.header.track-entering .track-details{animation:track-reveal .55s .08s ease-out both}
@keyframes cover-reveal{from{opacity:0}to{opacity:1}}
@keyframes track-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.information h1{font-size:clamp(24px,4.4cqw,65px)}.disc{left:-28%}}
@media(max-width:560px){.information h1{font-size:clamp(20px,6.1cqw,42px)}.disc{left:-49%}}
@media(prefers-reduced-motion:reduce){.header.track-entering .cover,.header.track-entering .track-details{animation:none!important}}


/* Scale up the compact mark, without changing the surrounding layout. */
.brand img{transform-origin:top left}
@keyframes station-ident{0%,40%,100%{clip-path:inset(0);transform:scale(1)}48%,80%{clip-path:inset(0 66% 0 0);transform:scale(1.3)}88%{clip-path:inset(0);transform:scale(1)}}
.track-details{font-size:clamp(15px,1.8cqw,40px)}
@media(max-width:900px){.track-details{font-size:clamp(13px,2cqw,25px)}}
@media(max-width:560px){.track-details{font-size:clamp(11px,3.2cqw,17px)}}
/* Anchor the station separately; bring the music into a single lower group. */
.brand{position:absolute;z-index:6;left:3%;top:4%;width:clamp(170px,17cqw,300px)}
.brand img{width:100%;max-width:none;max-height:none}
.header{top:16%;left:26%;right:7%;grid-template-columns:clamp(150px,14cqw,420px) minmax(0,1fr);gap:3cqw;align-items:start}
.cover{grid-column:1}
.information{grid-column:2;padding-left:3cqw;min-height:0}
.information h1{font-size:clamp(32px,3.8cqw,112px);margin-bottom:.15em}
.track-details{font-size:clamp(16px,1.8cqw,48px);line-height:1.18}
#album,#year,#label{font-size:.72em}
@media(max-width:900px){.brand{width:180px}.header{top:19%;left:14%;right:6%;grid-template-columns:clamp(130px,21cqw,190px) minmax(0,1fr);gap:3cqw}.information h1{font-size:4.6cqw}.track-details{font-size:clamp(14px,2cqw,22px)}}
@media(max-width:560px){.brand{left:5%;top:4%;width:170px}.header{top:16%;left:5%;right:5%;grid-template-columns:28% minmax(0,1fr);gap:5%}.information{padding-left:5%}.information h1{font-size:6cqw}.track-details{font-size:clamp(11px,3.2cqw,17px)}.disc{top:56%}}
/* Keep long metadata within its column on narrow screens. */
.track-details{overflow-wrap:anywhere;min-width:0}
/* Four-panel bumper, using the supplied yellow/orange/white reference. */
.bumper{--bumper-yellow:var(--brand-yellow);--bumper-orange:var(--brand-orange);position:absolute;inset:0;z-index:15;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;overflow:hidden;background:var(--bumper-yellow);visibility:hidden;pointer-events:none}
.bumper.active{visibility:visible}
.bumper video{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.bumper-diamonds{position:absolute;inset:-240px;background:url('Music Art work/block-diamonds.svg') repeat;background-size:240px 240px;filter:blur(.35px);opacity:1;animation:diamond-drift 14s linear infinite;animation-play-state:paused}
.bumper.active .bumper-diamonds{animation-play-state:running}
@keyframes diamond-drift{from{transform:translate(-120px,-120px)}to{transform:translate(120px,120px)}}
@media(max-width:560px){.bumper-diamonds{background-size:160px 160px;inset:-160px;animation-name:diamond-drift-small}}
@keyframes diamond-drift-small{from{transform:translate(-80px,-80px)}to{transform:translate(80px,80px)}}
@media(prefers-reduced-motion:reduce){.bumper-diamonds{animation:none!important}}


/* Every scene change happens behind a fully covered frame. */
.screen[data-scene="intro"]{background:var(--brand-yellow);transition:none}
.screen[data-scene="handoff"]>.brand{visibility:hidden}
.screen[data-scene="handoff"]>.header{animation:player-settle .75s ease-out both}
@keyframes player-settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.channel-ident{position:absolute;inset:0;z-index:20;overflow:hidden;pointer-events:none;visibility:hidden}
.channel-ident.opening,.channel-ident.between{visibility:visible}
.ident-slab{position:absolute;inset:0}
.ident-wordmark{position:absolute;left:50%;top:50%;width:64%;opacity:0}
.ident-wordmark img{display:block;width:100%;filter:brightness(0)}
.opening{background:var(--brand-yellow);animation:opening-reveal 4.8s cubic-bezier(.76,0,.24,1) both}
.opening .ident-wordmark{animation:logo-build 4.8s cubic-bezier(.76,0,.24,1) both;transform-origin:7% 50%}
.opening .ident-slab::before,.opening .ident-slab::after{content:"";position:absolute;left:50%;top:50%;width:9cqw;height:9cqw;background:var(--brand-orange);opacity:0;animation:block-echo 4.8s cubic-bezier(.16,1,.3,1) both}
.opening .ident-slab::after{animation-name:block-echo-back}
@keyframes opening-reveal{0%,77%{clip-path:polygon(0 0,150% 0,100% 100%,-50% 100%)}100%{clip-path:polygon(150% 0,150% 0,100% 100%,100% 100%)}}
@keyframes logo-build{
  0%{opacity:0;clip-path:inset(0 86% 0 0);transform:translate(-7%,-80%) rotate(-45deg) scale(.65)}
  15%,28%{opacity:1;clip-path:inset(0 86% 0 0);transform:translate(-7%,-50%) rotate(0) scale(1)}
  48%,76%{opacity:1;clip-path:inset(0);transform:translate(-50%,-50%) rotate(0) scale(1)}
  100%{opacity:1;clip-path:inset(0);transform:translate(-44%,-50%) rotate(0) scale(1)}
}
@keyframes block-echo{0%{opacity:0;transform:translate(-140%,-140%) rotate(-45deg) scale(.65)}10%{opacity:.2}25%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(1)}100%{opacity:0}}
@keyframes block-echo-back{0%{opacity:0;transform:translate(40%,40%) rotate(45deg) scale(.65)}10%{opacity:.14}25%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(1)}100%{opacity:0}}
.between .ident-slab{background:var(--brand-orange);animation:scene-shutter 1.8s cubic-bezier(.76,0,.24,1) both}
.between .ident-wordmark{animation:bridge-mark 1.8s cubic-bezier(.76,0,.24,1) both}
@keyframes scene-shutter{0%{transform:translateX(-100%)}35%,60%{transform:translateX(0)}100%{transform:translateX(100%)}}
@keyframes bridge-mark{0%,20%{opacity:0;clip-path:inset(0 66% 0 0);transform:translate(-22%,-50%)}36%,60%{opacity:1;clip-path:inset(0 66% 0 0);transform:translate(-17%,-50%)}85%,100%{opacity:0;clip-path:inset(0 66% 0 0);transform:translate(-12%,-50%)}}
.bumper-return .ident-wordmark{animation:logo-home 1.8s cubic-bezier(.76,0,.24,1) both}
@keyframes logo-home{
  0%,20%{opacity:0;left:50%;top:50%;width:64%;clip-path:inset(0 66% 0 0);transform:translate(-17%,-50%)}
  36%,58%{opacity:1;left:50%;top:50%;width:64%;clip-path:inset(0 66% 0 0);transform:translate(-17%,-50%)}
  95%,100%{opacity:1;left:var(--mark-left);top:var(--mark-top);width:var(--mark-width);clip-path:inset(0);transform:translate(0,0)}
}
@media(prefers-reduced-motion:reduce){.channel-ident{display:none!important}.screen[data-scene="handoff"]>.header{animation:none}}
.screen:not([data-scene="track"])>.brand img{animation:none;clip-path:inset(0);transform:none}

.bumper-pattern,.bumper-colours,.bumper-grass,.bumper-logo-panel{position:relative;min-width:0;min-height:0;overflow:hidden}
.bumper-pattern{grid-area:1/1;background:var(--bumper-yellow)}
.bumper-colours{grid-area:1/2;background:linear-gradient(90deg,var(--bumper-yellow) 0 10%,var(--bumper-orange) 10% 41%,var(--bumper-yellow) 41% 66.5%,#fff 66.5% 79%,var(--bumper-orange) 79% 100%)}
.bumper-grass{grid-area:2/1;background:#203728}
.bumper-logo-panel{grid-area:2/2;background:#fff;border-left:clamp(10px,1.5cqw,30px) solid var(--bumper-yellow);padding:8%}
.bumper-logo-crop{width:clamp(70px,10cqw,190px);aspect-ratio:2.88;overflow:hidden}
.bumper-logo-crop img{display:block;width:294.1176%;max-width:none;height:auto;filter:brightness(0)}

/* One 4:3 broadcast stage; all graphics scale within it, not the monitor. */
html,body{background:#080808;overflow:hidden}
body{display:grid;place-items:center}
.screen{width:min(100vw,133.333333svh);height:min(75vw,100svh);min-height:0;container-type:size}
.brand{width:22cqw;left:4%;top:4%}
.header{left:18%;right:6%;top:17%;grid-template-columns:20cqw minmax(0,1fr);gap:3cqw}
.information{padding-left:3cqw;min-height:0}
.information h1{font-size:4.5cqw}
.track-details{font-size:2cqw}
.disc{width:92cqw;left:-25%;top:49%;border-width:.75cqw}
.equalizer{gap:.43cqw;padding:0 1.4cqw}
.eq-column{gap:.66cqh}
.eq-dot{width:1.35cqw}
.bumper-logo-panel{border-left-width:1cqw;background:#fffef7}
.bumper-logo-crop{width:13cqw}
.bumper-diamonds{--tile:32cqw;inset:calc(-1 * var(--tile));background-image:url('Music Art work/broadcast-marks.svg');background-size:var(--tile) var(--tile);animation-name:marks-drift;animation-duration:18s}
@keyframes marks-drift{from{transform:translate(0,0)}to{transform:translate(var(--tile),var(--tile))}}
@media(prefers-reduced-motion:reduce){.channel-marks svg,.bumper-diamonds{animation:none!important}}
/* Fine yellow wave lines over the subway footage, driven by the bumper bed. */
.bumper-pattern{background:#18262b}
.bumper-pattern video{filter:saturate(.7) brightness(.75)}
.bumper-waves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bumper-waves path{fill:none;stroke:var(--bumper-yellow);stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.85}
.bumper-waves path:nth-child(2){opacity:.65}
.bumper-waves path:nth-child(3){opacity:.5}
.bumper-waves path:nth-child(4){opacity:.35}


/* Broadcast layout: station above the disc, artwork above the lower third. */
.header{inset:0;display:block;pointer-events:none}
.brand{left:4%;top:4%;width:22cqw}
.brand img{animation:none;clip-path:none;transform:none}
.cover{position:absolute;right:4%;top:9%;width:20cqw}
.information{position:static;border:0;padding:0}
.information h1{position:absolute;right:4%;top:4%;width:20cqw;margin:0;font-size:2.65cqw;line-height:1;letter-spacing:-.04em}
.rule{display:none}
.track-details{position:absolute;inset:auto 0 0;min-height:9.5%;padding:1.1cqw 4cqw;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:3cqw;align-items:center;background:var(--accent);color:var(--accent-ink,#080808);font-size:2cqw;line-height:1.16}
.track-primary,.track-secondary{min-width:0}
#title{font-size:1em;letter-spacing:-.025em}
#artist{margin-top:.2em;font-weight:400}
.track-secondary{border-left:.22cqw solid currentColor;padding-left:1.5cqw}
#album,#year,#label{font-size:1.3cqw;line-height:1.25;margin:0;font-weight:400;opacity:1}
.disc{width:92cqw;left:-25%;top:41%;border-width:.6cqw}
.equalizer{inset:35% 0 9.5%}
.screen[data-scene="handoff"]>.header{animation:none}
/* The chevron belongs to the shutter and travels with it, without a fade. */
.ident-arrow{position:absolute;right:4%;top:50%;width:7cqw;transform:translateY(-50%);fill:var(--brand-yellow)}
.opening .ident-arrow{display:none}
/* Each song gets a brief title card before the cover parks at the top. */
.cover{right:5%;top:4%;width:20cqw;z-index:2}
.information h1{right:5%;top:4%;clip-path:inset(0 0 100%);z-index:1}
.header.track-entering .cover{animation:none}
.header.track-announcing .cover{animation:cover-announcement 6.4s cubic-bezier(.65,0,.25,1) both}
.header.track-announcing h1{animation:heading-announcement 6.4s cubic-bezier(.65,0,.25,1) both}
@keyframes cover-announcement{0%{transform:translateY(0)}12%,85%{transform:translateY(4.2cqw)}100%{transform:translateY(0)}}
@keyframes heading-announcement{0%{clip-path:inset(0 0 100%)}12%,85%{clip-path:inset(0)}100%{clip-path:inset(0 0 100%)}}
#title{font-weight:700}
/* Printed surface rotates beneath a stationary light reflection and clear hub. */
.disc{width:82cqw;left:-17%;top:28.5%;border:.18cqw solid #cbd1d4;animation:none;box-shadow:0 0 0 .08cqw #58616a; background:conic-gradient(#d7dce0,#fafcff 12%,#929da5 27%,#e8e7e5 42%,#b0bdc8 60%,#fff 76%,#9ba5ae 90%,#d7dce0);mask-image:radial-gradient(circle closest-side,transparent 12.5%,#000 12.8%)}
.disc-print{inset:.45%;animation:spin 7.5s linear infinite;animation-play-state:paused;mask-image:radial-gradient(circle closest-side,transparent 28%,#000 28.3%)}
.disc.playing .disc-print{animation-play-state:running}
.disc-sheen{background:conic-gradient(from -30deg,transparent 0 15%,rgba(255,255,255,.17) 23%,transparent 32% 60%,rgba(185,214,230,.12) 72%,transparent 82%);mask-image:radial-gradient(circle closest-side,transparent 28%,#000 28.3%)}
.disc-center{width:28%;border:.12cqw solid rgba(255,255,255,.65);background:radial-gradient(circle,transparent 0 44%,rgba(223,233,235,.75) 45% 47%,rgba(156,173,184,.45) 48% 69%,rgba(235,242,244,.7) 70% 72%,rgba(164,181,190,.35) 73%);box-shadow:0 0 0 .12cqw rgba(25,37,48,.3);}
.disc-inner{display:none}
@media(prefers-reduced-motion:reduce){.disc-print{animation:none!important}.header.track-announcing .cover{animation:none;transform:translateY(4.2cqw)}.header.track-announcing h1{animation:none;clip-path:none}}

/* Keep the broadcast background visible through the CD, without equalizer dots. */
.screen::before{content:"";position:absolute;z-index:2;left:-17%;top:28.5%;width:82cqw;aspect-ratio:1;border-radius:50%;background:var(--bg);transition:background-color 1300ms;pointer-events:none}
.screen:not([data-scene="track"]):not([data-scene="handoff"])::before{visibility:hidden}
/* Overscan both ends so the last dot column is cropped by the screen edge. */
.equalizer{left:-1.4cqw;right:-1.4cqw;padding-left:0;padding-right:0}

/* Double taps skip without browser double-tap zoom. */
html,body{touch-action:manipulation}

/* Track-timed station mark and independently readable lower-third palette. */
.brand img{opacity:0}
.brand::after{content:"";position:absolute;inset:0;background:var(--logo-color,var(--ink));mask:url('logosvg.svg') left top/100% 100% no-repeat;clip-path:inset(0);transform-origin:left center;transition:clip-path .8s cubic-bezier(.65,0,.25,1),transform .8s cubic-bezier(.65,0,.25,1),background-color 1.3s}
.brand.compact::after{clip-path:inset(0 66% 0 0);transform:scale(1.25)}
.track-details{transition:background-color 1.3s,color 1.3s}
/* Fine reflective rim, pressed concentric rings, and a clear polycarbonate hub. */
.disc{border:.12cqw solid #e3e9ed;box-shadow:0 0 0 .08cqw #52616b,inset 0 0 .28cqw #fff;background:conic-gradient(from 25deg,#b5c2ca,#f9fcff 10%,#8c9ca8 23%,#d3c9d7 32%,#dbeee5 40%,#84929d 51%,#f7fbff 64%,#c3d6e3 75%,#e7d5c6 83%,#8698a5 93%,#b5c2ca)}
.disc-print{inset:.8%}
.disc::after{content:"";position:absolute;inset:.23%;border-radius:50%;border:.12cqw solid rgba(255,255,255,.65);box-shadow:inset 0 0 0 .08cqw rgba(18,32,43,.45);pointer-events:none}
.disc-sheen{background:conic-gradient(from -28deg,transparent 0 12%,rgba(255,255,255,.23) 19%,rgba(204,231,255,.12) 23%,transparent 30% 56%,rgba(255,230,213,.09) 64%,rgba(255,255,255,.18) 69%,transparent 77%),repeating-radial-gradient(circle,transparent 0 2px,rgba(255,255,255,.035) 2.5px,transparent 3px 5px);mix-blend-mode:screen}
.disc-center{background:radial-gradient(circle,transparent 0 44%,rgba(242,249,255,.92) 44.5% 46%,rgba(89,111,126,.42) 46.5% 48%,rgba(218,229,235,.4) 49% 65%,rgba(255,255,255,.7) 66% 67%,rgba(79,101,117,.32) 68% 70%,rgba(224,238,246,.5) 71% 94%,rgba(255,255,255,.82) 95% 96%,rgba(85,104,119,.55) 97%);border:.08cqw solid rgba(236,246,255,.8);box-shadow:0 0 0 .08cqw rgba(35,48,58,.45),inset 0 0 .65cqw rgba(255,255,255,.25)}
@media(prefers-reduced-motion:reduce){.brand::after,.track-details{transition:none}}

/* Opening screen: playback and the intro wait for the start button. */
.screen[data-scene="waiting"]{background:#ffde00;color:#242321}
.screen[data-scene="waiting"]>.brand,
.screen[data-scene="waiting"]>.header,
.screen[data-scene="waiting"]>.disc,
.screen[data-scene="waiting"]>.equalizer,
.screen[data-scene="waiting"]>.bumper,
.screen[data-scene="waiting"]>.channel-ident{display:none}
.player-start{position:absolute;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:#ffde00;color:#242321}
.player-start[hidden]{display:none}
.player-start-card{width:min(520px,100%);text-align:center}
.player-start-card>img{display:block;width:100%;height:auto;margin:0 auto 40px}
.player-start button{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;padding:20px 16px;border:2px solid #242321;border-radius:0;background:#242321;color:#ffde00;font:900 clamp(14px,2.7vw,24px)/1.2 Arial,Helvetica,sans-serif;letter-spacing:-.025em;cursor:pointer}
.player-start button:hover{background:#f7651b;color:#242321}
.player-start button:focus-visible{outline:3px solid #242321;outline-offset:5px}
.player-start button:disabled{cursor:default}
.player-start p{margin:16px 0 0;font:bold 11px Verdana,Arial,sans-serif;letter-spacing:.12em}
/* Wide-screen margins follow the song; fine rails preserve the 4:3 frame. */
@media(min-aspect-ratio:4/3){
  html,body{background:var(--surround-bg,#ffde00);transition:background-color 1300ms}
  .screen::after{content:"";position:absolute;inset:0;z-index:110;pointer-events:none;border-left:1px solid var(--frame-ink,#080808);border-right:1px solid var(--frame-ink,#080808);transition:border-color 1300ms}
  body:has(.screen[data-scene="waiting"]),body:has(.screen[data-scene="intro"]){background:#ffde00;transition:none}
  .screen[data-scene="waiting"]::after,.screen[data-scene="intro"]::after{border-color:#080808}
}
@media(prefers-reduced-motion:reduce){
  html,body,.screen::after{transition:none}
}
/* Portrait phones use the full viewport; desktop keeps the 4:3 broadcast. */
@media(max-width:600px) and (orientation:portrait){
  html,body{height:100%;height:100dvh;background:var(--surround-bg,#ffde00)}
  .screen{width:100vw;height:100svh;height:100dvh;min-height:0}
  .brand{left:6%;top:max(24px,env(safe-area-inset-top));width:36cqw}
  .brand img{width:100%;max-width:none;max-height:none}
  .cover{right:6%;top:max(24px,env(safe-area-inset-top));width:min(40cqw,27cqh);border:1px solid var(--ink)}
  .information h1{right:6%;top:max(24px,env(safe-area-inset-top));width:min(40cqw,27cqh);font-size:12px;line-height:1.2;letter-spacing:.04em;clip-path:inset(0 0 100%)}
  .header.track-announcing .cover{animation:mobile-cover-announcement 6.4s cubic-bezier(.65,0,.25,1) both}
  .disc,.screen::before{left:-24%;top:39%;width:100cqw}
  .equalizer{top:34%;bottom:calc(var(--details-height,160px) + 12px);left:54%;right:-2%;gap:1cqw}.eq-column{gap:.7cqh}.eq-dot{width:2cqw;flex-shrink:0;background:var(--ink);filter:none;transition:opacity 70ms}.disc-sheen{mix-blend-mode:normal;background:conic-gradient(from -28deg,transparent 0 12%,rgba(255,255,255,.16) 19%,transparent 30% 56%,rgba(255,230,213,.09) 64%,transparent 77%)}
  .track-details{min-height:0;max-height:34cqh;overflow-y:auto;padding:16px 6cqw max(18px,env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr);gap:12px;border-top:1px solid currentColor;font-size:clamp(18px,5cqw,24px);line-height:1.15}
  .track-primary,.track-secondary{overflow-wrap:anywhere}
  .track-secondary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;border-left:0;border-top:1px solid currentColor;padding:10px 0 0}
  #album,#year,#label{font-size:clamp(12px,3.3cqw,16px);line-height:1.3}
  .bumper{inset:0;grid-template-columns:62% 38%;grid-template-rows:58% 42%}
  .bumper-logo-panel{display:flex;align-items:center;justify-content:center;padding:12%;border-left-width:2cqw}
  .bumper-logo-crop{width:28cqw}
  .player-start{padding:28px}
  .player-start button{min-height:60px;font-size:17px}
  .screen::after{display:none}
}
@keyframes mobile-cover-announcement{0%{transform:translateY(0)}12%,85%{transform:translateY(24px)}100%{transform:translateY(0)}}
@media(max-width:600px) and (orientation:portrait) and (prefers-reduced-motion:reduce){
  .header.track-announcing .cover{animation:none;transform:translateY(24px)}.header.track-announcing h1{animation:none;clip-path:none}
}
.player-start button[hidden]{display:none}

@media(max-width:600px) and (orientation:portrait){

  #title{font-weight:800}
  #artist{margin-top:5px;font-size:.85em}
  #label{grid-column:1/-1}
  .player-start-card{width:min(400px,100%)}
  .player-start-card>img{margin-bottom:32px}
  .player-start p[role="status"]{padding-top:18px;border-top:2px solid #242321;line-height:1.6}
}
/* Playback permission failures remain recoverable without restarting the show. */
.resume-playback{position:absolute;z-index:40;left:50%;top:48%;transform:translate(-50%,-50%);padding:16px 24px;border:2px solid var(--ink);border-radius:0;background:var(--bg);color:var(--ink);font:bold 14px Arial,sans-serif;cursor:pointer}
.resume-playback[hidden]{display:none}
.resume-playback:focus-visible{outline:3px solid var(--ink);outline-offset:4px}