.radio-console{display:none}.view-switch{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.view-switch select{min-width:105px!important}.music[data-player-view=radio] .radio-console{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:20px;align-items:center;margin-bottom:24px;padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--cyan) 7%,var(--panel)),var(--panel));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 10%,transparent)}
.radio-display{padding:20px 24px;border:1px solid color-mix(in srgb,var(--cyan) 40%,var(--line));border-radius:12px;background:var(--bg);box-shadow:inset 0 2px 16px #0003}.radio-display-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:var(--muted)}.radio-live{color:var(--cyan)}.radio-live:before{content:'';display:inline-block;width:6px;height:6px;margin-right:6px;background:var(--muted);border-radius:50%}.radio-playing .radio-live:before{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.radio-station{font-size:clamp(22px,3vw,36px);font-weight:600;letter-spacing:-.5px;margin:12px 0;color:var(--text)}.radio-scale{height:24px;position:relative;margin:14px 0 8px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 16px) bottom/100% 12px no-repeat;border-bottom:1px solid var(--line)}.radio-scale:after{content:'';position:absolute;left:clamp(0px,var(--station),calc(100% - 3px));width:3px;top:0;bottom:-1px;background:var(--cyan);box-shadow:0 0 12px color-mix(in srgb,var(--cyan) 65%,transparent);transition:left .35s ease}.radio-stations{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}.radio-stations button{min-height:28px;padding:5px 9px;font-size:11px;border-radius:6px}.radio-stations button[aria-pressed=true]{color:var(--cyan);border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,var(--bg))}.radio-controls{display:flex;align-items:center;flex-direction:column;gap:12px}.radio-knob{width:82px;height:82px;min-height:82px;padding:0;border:2px solid var(--line);border-radius:50%;background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--text) 18%,var(--panel)),var(--panel) 65%,var(--bg));box-shadow:0 4px 8px #0005,inset 0 0 0 5px var(--bg);touch-action:none;cursor:grab;position:relative}.radio-knob:active{cursor:grabbing}.radio-knob span{position:absolute;inset:8px;transform:rotate(var(--angle));pointer-events:none}.radio-knob span:before{content:'';position:absolute;left:calc(50% - 2px);top:1px;width:4px;height:14px;border-radius:4px;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}.radio-controls label{font-size:11px;text-align:center;color:var(--muted)}.radio-controls input{width:90px;accent-color:var(--cyan)}.radio-tip{margin:12px 0 0;font-size:11px;color:var(--muted)}
.music[data-player-view=radio] .music-grid{padding:28px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(140deg,color-mix(in srgb,var(--cyan) 6%,var(--panel)),var(--bg));box-shadow:0 18px 50px #0002}.music[data-player-view=radio] .player{border:0;background:transparent!important;padding:0}.music[data-player-view=radio] .library{background:var(--panel);border-radius:14px}.music[data-player-view=radio] .now{grid-template-columns:150px minmax(0,1fr)}.music[data-player-view=radio] .cover-open{border-radius:12px;box-shadow:0 8px 28px #0005}.music[data-player-view=radio] .transport button{border-width:2px}.music[data-player-view=radio] .transport .play{box-shadow:0 0 24px color-mix(in srgb,var(--cyan) 15%,transparent)}
@media(max-width:740px){.view-switch{margin-left:auto}.music[data-player-view=radio] .music-grid{padding:16px;gap:20px}.music[data-player-view=radio] .radio-console{grid-template-columns:minmax(0,1fr) 64px;gap:10px;padding:12px;margin-bottom:18px}.radio-display{padding:13px}.radio-knob{width:58px;height:58px;min-height:58px}.radio-controls input{width:64px}.radio-display-top{letter-spacing:1px;font-size:9px}.radio-stations{max-height:96px;overflow:auto}.radio-stations button{font-size:10px;padding:5px 6px}.music[data-player-view=radio] .now{grid-template-columns:90px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.radio-scale:after{transition:none}}

/* Numbered precision dial and tactile tuning wheel. */
.radio-scale{height:auto;aspect-ratio:600/90;background:none;border:0;margin:12px 0 2px}.radio-scale:after{display:none}.radio-scale svg{display:block;width:100%;height:100%;overflow:visible}.radio-scale svg text{fill:var(--muted);font:14px ui-monospace,monospace}.radio-scale svg .dial-band{font-size:10px;letter-spacing:2px}.dial-major{stroke:var(--cyan);stroke-width:1;opacity:.75}.dial-minor{stroke:var(--muted);stroke-width:1;opacity:.6}.radio-needle{position:absolute;left:calc(1.667% + var(--station)*.96666);top:25%;height:60%;width:2px;background:var(--pink);box-shadow:0 0 8px var(--pink);transition:left .35s cubic-bezier(.2,.8,.2,1)}.radio-searching .radio-needle{transition:none}.radio-controls>span{font-size:11px;color:var(--muted);text-align:center}.radio-knob{border:3px solid color-mix(in srgb,var(--text) 35%,var(--line));background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--text) 18%,var(--panel)) 0deg 3deg,var(--panel) 3deg 7deg);box-shadow:0 5px 12px #0007,inset 0 0 0 4px var(--bg),0 0 0 5px color-mix(in srgb,var(--line) 40%,transparent)}.radio-knob:before{content:'';position:absolute;inset:11px;border-radius:50%;background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--text) 18%,var(--panel)),var(--panel) 70%);border:1px solid var(--line)}.radio-knob span{inset:13px;z-index:1}.radio-knob span:before{height:12px;top:0}.radio-knob:focus-visible{outline:2px solid var(--cyan);outline-offset:7px}.radio-tip{font-size:10px}
.radio-station{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:20px 0 8px}.radio-station:after{content:attr(data-tag);font:10px ui-monospace,monospace;letter-spacing:3px;color:var(--cyan);border:1px solid var(--line);padding:4px 7px;border-radius:3px}.radio-station[data-identity=synthwave]{font-family:Impact,'Arial Narrow',sans-serif;font-style:italic;letter-spacing:2px;color:var(--cyan);text-shadow:2px 2px 0 color-mix(in srgb,var(--pink) 60%,transparent)}.radio-station[data-identity=western]{font-family:Georgia,serif;font-weight:900;letter-spacing:1px;text-transform:uppercase}.radio-station[data-identity=basketball]{font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:2px;transform:skew(-4deg)}.radio-station[data-identity=metal]{font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:5px;text-shadow:1px 2px 0 var(--line)}.radio-station[data-identity=rock]{font-family:Georgia,serif;font-weight:900;font-style:italic;letter-spacing:-1px}.radio-station[data-identity=synthpop]{font-family:ui-monospace,monospace;text-transform:uppercase;letter-spacing:4px;font-weight:400}.radio-station[data-identity=pop]{font-family:Arial,sans-serif;font-weight:900;letter-spacing:-2px}.radio-station[data-identity=beach]{font-family:Georgia,serif;font-style:italic;letter-spacing:1px}.radio-station[data-identity=search]{font-family:ui-monospace,monospace;font-size:22px;letter-spacing:0;color:var(--muted)}
.transport button,.transport .play{flex-shrink:0;aspect-ratio:1;box-sizing:border-box;padding:0;min-width:0}.transport{flex-wrap:nowrap}.transport .play{min-width:64px;max-width:64px;height:64px;min-height:64px;max-height:64px}.transport button:not(.play){min-width:42px;max-width:42px;height:42px;min-height:42px;max-height:42px}
@media(max-width:740px){.transport{gap:8px}.transport .play{min-width:48px;max-width:48px;height:48px;min-height:48px;max-height:48px}.transport button:not(.play){min-width:34px;max-width:34px;height:34px;min-height:34px;max-height:34px}.radio-station{font-size:24px;margin:16px 0 8px;gap:7px}.radio-station:after{font-size:8px;letter-spacing:2px}.radio-scale svg text{font-size:17px}.radio-scale svg .dial-band{font-size:12px}.radio-knob:before{inset:8px}.radio-knob span{inset:9px}.radio-station[data-identity=synthpop]{letter-spacing:1px}.radio-station[data-identity=search]{font-size:16px}}
@media(prefers-reduced-motion:reduce){.radio-needle{transition:none}}


/* Compact, explicit slots shared by Standard and Radio. */
#music .filters{display:grid;grid-template-columns:112px 180px 170px;gap:12px;width:max-content;max-width:100%;align-items:end}
#music .filters .view-switch,#music .filters .filter-field{display:flex;flex-direction:column;align-items:stretch;gap:5px;width:100%;min-width:0;margin:0;font-size:11px}
#music .filters select,#music .filters #list-mode{width:100%;min-width:0!important;flex:none;box-sizing:border-box;font-size:13px}
#music .filters label>span{line-height:16px;min-height:16px}
#music .filters .filter-field:has(#list-mode){padding-top:21px}
#music .section-heading{justify-content:flex-end}
.radio-station:after{display:none!important}
@media(max-width:960px){#music .section-heading{display:block}}
@media(max-width:560px){#music .filters{width:min(316px,100%);grid-template-columns:minmax(0,132px) minmax(0,172px);gap:10px 12px}#music .filters .filter-field:has(#list-mode){grid-column:2;padding-top:0}#music .filters #list-mode{grid-column:auto}}

/* Every station gets the same display slots, regardless of font or name length. */
.radio-display{height:190px;display:grid;grid-template-rows:14px 52px 66px 14px;gap:0;overflow:hidden}.radio-station{height:52px;min-height:52px;max-height:52px;margin:0;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(20px,3vw,36px);line-height:1.15;min-width:0}.radio-scale{height:66px;aspect-ratio:auto;margin:0}.radio-tip{height:14px;margin:0;line-height:14px;white-space:nowrap}.music[data-player-view=radio] .radio-console{min-height:236px}
@media(max-width:740px){.radio-display{height:158px;grid-template-rows:12px 42px 62px 14px}.radio-station{height:42px;min-height:42px;max-height:42px;font-size:20px}.radio-scale{height:62px}.radio-tip{font-size:8px}.music[data-player-view=radio] .radio-console{min-height:184px}}

.radio-needle{left:calc(10px + (100% - 20px)*var(--station-fraction,0));transform:translateX(-50%)}

/* Scale type to the display's available width, including narrow phone screens. */
.radio-display{container-type:inline-size;min-width:0}
@media(max-width:740px){
 .radio-station{font-size:clamp(11px,7cqw,18px)}
 .radio-station[data-identity=western]{letter-spacing:.4px}
 .radio-station[data-identity=search]{font-size:clamp(11px,7cqw,16px)}
 .radio-scale svg text{font-size:9px}
 .radio-scale svg .dial-band{font-size:8px;letter-spacing:.5px}
 .radio-display-top{font-size:clamp(6px,3.4cqw,9px);letter-spacing:.4px;gap:6px}
 .radio-display-top>span{min-width:0;white-space:nowrap}
 .radio-display-top>span:first-child{overflow:hidden;text-overflow:ellipsis}
}
/* A hi-fi receiver: machined case, recessed smoked glass and weighted metal dial. */
.music[data-player-view=radio] .radio-console{position:relative;isolation:isolate;max-width:1000px;margin:0 auto 26px;padding:26px 30px;grid-template-columns:minmax(0,1fr) 112px;gap:28px;border:1px solid #7c858d;border-bottom:7px solid #171d23;border-radius:9px;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,#00000008 1px 3px),linear-gradient(115deg,#596168,#262e35 35%,#39424a 75%,#626b72);box-shadow:0 18px 28px #0005,inset 0 1px 1px #ffffff80,inset 0 -1px 1px #000}
.radio-console:before,.radio-console:after{content:'';position:absolute;top:10px;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,transparent 43%,#151a1e 45% 56%,transparent 58%),radial-gradient(circle at 30% 25%,#d0d5da,#49535d 60%,#151c22 70%);box-shadow:0 1px 2px #000}
.radio-console:before{left:10px}.radio-console:after{right:10px}
.radio-display{position:relative;isolation:isolate;background:linear-gradient(165deg,#ffffff09,transparent 43%),linear-gradient(105deg,#060d13,color-mix(in srgb,var(--cyan) 8%,#080e15));border:2px solid #111820;border-radius:4px;color:#e1eee9;box-shadow:0 1px 0 #ffffff40,inset 0 3px 9px #000,inset 0 0 22px color-mix(in srgb,var(--cyan) 8%,transparent)}
.radio-display:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(114deg,transparent 5%,#ffffff0b 5.3%,#ffffff02 27%,transparent 27.3%,transparent 70%,#ffffff06);z-index:2}
.radio-display-top{color:#9faeaf}.radio-live{color:var(--cyan)}
.radio-station{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--cyan) 20%,transparent))}
.radio-scale{background:linear-gradient(0deg,#0008,transparent);border-radius:2px}
.radio-scale svg text{fill:#b4c6c3}.dial-major{stroke:#b9d3c9;opacity:.85}.dial-minor{stroke:#859b96}
.radio-needle{width:2px;background:#ffd2a4;box-shadow:0 0 4px #ffa76d;top:23%;height:60%}
.radio-controls{gap:18px}.radio-controls>span{font:9px ui-monospace,monospace;text-transform:uppercase;letter-spacing:1.4px;color:#d4dade}
.radio-knob{width:92px;height:92px;min-height:92px;border:2px solid #a4adb4;background:repeating-conic-gradient(#bac2c7 0deg 1deg,#47515a 1deg 3deg,#8a949d 3deg 4deg);box-shadow:0 7px 9px #0009,0 0 0 5px #1a2229,0 0 0 6px #72808a,inset 0 0 0 3px #d0d6da}
.radio-knob:before{inset:6px;border:1px solid #c5cdd3;background:repeating-radial-gradient(circle at center,#ffffff08 0 1px,#00000008 1px 2px),conic-gradient(from 20deg,#77848e,#e0e5e8 45deg,#9eaab3 85deg,#53616b 150deg,#c3cdd4 220deg,#e2e6e8 280deg,#77848e);box-shadow:inset 0 1px 2px #fff8,inset 0 -2px 4px #0006}
.radio-knob span{inset:12px}.radio-knob span:before{width:3px;height:11px;left:calc(50% - 1.5px);background:#192932;box-shadow:1px 0 0 #fff7}
@media(min-width:960px){.music[data-player-view=radio] .radio-console{padding-left:162px}.radio-console:before{left:24px;top:30px;width:106px;height:calc(100% - 60px);border-radius:5px;background:radial-gradient(circle,#03080b 1px,transparent 1.7px) 0 0/5px 5px,linear-gradient(135deg,#283138,#11191e);box-shadow:inset 0 2px 5px #000,0 1px 0 #ffffff30}}
@media(max-width:740px){.music[data-player-view=radio] .radio-console{padding:17px 12px;gap:13px;grid-template-columns:minmax(0,1fr) 62px;border-bottom-width:5px}.radio-display{padding:12px 10px}.radio-knob{width:52px;height:52px;min-height:52px}.radio-knob:before{inset:4px}.radio-knob span{inset:8px}.radio-knob span:before{height:7px;width:2px}.radio-controls>span{font-size:7px;letter-spacing:.6px}.radio-console:before,.radio-console:after{top:5px;width:4px;height:4px}.radio-tip{font-size:7px}}
/* Align receiver, selectors and the two-column music area to one outer edge. */
.music[data-player-view=radio] .radio-console{width:100%;max-width:none;box-sizing:border-box;margin-left:0;margin-right:0}
.radio-station[data-identity=dance]{font-family:Arial,sans-serif;font-weight:900;letter-spacing:2px;text-transform:uppercase;font-style:italic;color:var(--cyan);text-shadow:2px 2px 0 color-mix(in srgb,var(--pink) 35%,transparent)}

.radio-station[data-identity=cinematic]{font-family:Georgia,serif;text-transform:uppercase;letter-spacing:2px;color:var(--cyan);font-weight:700}
