@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#332e28;background:#e9e1d3;font-synthesis:none;--orange:#ad4e2d;--rotation:-70deg;--needle:0%;--dial-size:112px}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text}
body{margin:0;background:radial-gradient(ellipse at 50% 32%,#f7f1e5 0,transparent 62%),#e9e1d3}
button,input,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible:where(:root[data-show-focus-indicators=true] *),a:focus-visible:where(:root[data-show-focus-indicators=true] *),.station-card:focus-visible:where(:root[data-show-focus-indicators=true] *),input:focus-visible:where(:root[data-show-focus-indicators=true] *),.knob:focus-visible:where(:root[data-show-focus-indicators=true] *),.display:focus-visible:where(:root[data-show-focus-indicators=true] *){outline:3px solid #ad4e2d;outline-offset:5px}
main{max-width:1120px;margin:auto;padding:22px 42px 22px}
.page-header{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;padding-bottom:0}
.wordmark{display:flex;align-items:center;gap:9px;text-decoration:none;color:#302c26;font-size:13px;letter-spacing:2px;font-weight:700}
.wordmark-text{display:flex;gap:inherit;white-space:nowrap}
.wordmark-text>span{font-weight:400}
.mark{display:block;width:36px;height:36px;margin-right:6px}
.header-actions{display:flex;align-items:center;gap:18px;margin-left:auto}
.theme-toggle{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;border:0;background:transparent;font-size:8px;font-weight:600;letter-spacing:1.4px;color:#777065}
.theme-toggle[hidden]{display:none}
.language-picker{display:grid;place-items:center;flex:none;padding:0;width:44px;height:44px;--language-tint:grayscale(1) sepia(.65) saturate(1.2);--language-glow:#dca15cb0}
.language-flag-glow{display:block;width:24px;height:18px;line-height:0;border-radius:2px}
.language-picker img{display:block;width:24px;height:18px;object-fit:contain;filter:var(--language-tint);border-radius:2px}
.language-picker.language-hint .language-flag-glow{animation:language-glow 2s ease-in-out 5}
@keyframes language-glow{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 5px var(--language-glow)) drop-shadow(0 0 3px var(--language-glow))}}
.sleep-menu.language-menu{width:max-content;min-width:210px;max-width:calc(100vw - 16px);text-transform:none;letter-spacing:0}
.sleep-menu.language-menu button{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;white-space:nowrap}
.sleep-menu.language-menu button[aria-selected=true]::after{content:'✓';margin-left:auto}
:root[data-theme=dark] .language-picker{--language-tint:grayscale(1) sepia(.55) saturate(1.1) brightness(1.25)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .language-picker{--language-tint:grayscale(1) sepia(.7) hue-rotate(155deg) saturate(1.5) brightness(1.1);--language-glow:#8ad1fab0}
:root[data-radio-theme=midnight] .language-picker{--language-tint:grayscale(1) sepia(.7) hue-rotate(155deg) saturate(1.5) brightness(1.4)}
:root[data-radio-theme=matrix] .language-picker{--language-tint:grayscale(1) sepia(1) hue-rotate(70deg) saturate(2) brightness(1.25);--language-glow:#66ff8890}
.help-button,.active-listeners{font-size:9px;font-weight:600;letter-spacing:1.4px;color:#777065}
.help-button{min-width:44px;min-height:44px;padding:0 8px;border:0;border-radius:5px;background:transparent}
.help-button[hidden]{display:none}
.help-button:hover{background:#332e280a;color:var(--orange)}
#voice-toggle[aria-pressed=true]{color:var(--orange);background:#ad4e2d14;box-shadow:inset 0 -2px currentColor}
#voice-toggle:disabled{opacity:.6;cursor:default}
#voice-indicator{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:7px;border:1px solid #e2ce8f66;border-radius:5px;background:#e2ce8f18;color:#e2ce8f}
#voice-indicator svg{width:20px;height:20px}
#voice-indicator:focus-visible:where(:root[data-show-focus-indicators=true] *){outline-color:#e2ce8f;outline-offset:2px}
:root[data-theme=dark] #voice-toggle[aria-pressed=true]{color:#edb66b;background:#edb66b14}
.theme-track{display:block;position:relative;width:34px;height:20px;border:1px solid #ad9b7d;border-radius:12px;background:#cabca5;box-shadow:inset 0 1px 3px #4e3d2740}
.theme-track:after{content:'';position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#f3dfab,#c5a16b);box-shadow:0 1px 2px #4e3d2755;transition:transform .15s}
.theme-toggle[aria-checked=true] .theme-track{background:#746348;border-color:#a99065}
.theme-toggle[aria-checked=true] .theme-track:after{transform:translateX(14px)}
@media(max-width:600px){.page-header{column-gap:8px}.page-header.compact-brand .wordmark-text{flex-direction:column;gap:0;line-height:1.3}.header-actions{gap:8px}.theme-toggle{font-size:7px;gap:6px;letter-spacing:1px}}
.active-listeners{font-variant-numeric:tabular-nums;white-space:nowrap}
.active-listeners[hidden]{display:none}
@media(max-width:600px){.header-actions{flex-wrap:wrap;justify-content:flex-end}}
.radio-tooltip{--help-border:#b9aa93;--help-key:#e9e1d3;position:fixed;inset:auto;margin:0;padding:0;width:max-content;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;border:1px solid var(--help-border);border-radius:8px;background:#f6efe3;box-shadow:0 4px 12px #23150d26;color:#332e28;font:400 13px/1.5 'DM Sans',Arial,sans-serif;letter-spacing:normal;text-align:left;white-space:normal;overflow-wrap:anywhere;cursor:default;user-select:none;-webkit-user-select:none}
#radio-tooltip .radio-tooltip-content{white-space:pre-line}
.radio-tooltip::backdrop{background:transparent;pointer-events:none}
.radio-tooltip-content{display:block;padding:12px 15px;border:0;background:transparent}
:is(#radio-tooltip,#bedtime-notice) .radio-tooltip-content{padding-right:42px}
#bedtime-notice{left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:min(360px,calc(100vw - 24px))}
.radio-tooltip-close{position:absolute;top:9px;right:9px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:5px;background:transparent;color:inherit;font:400 22px/1 Arial,sans-serif}
.radio-tooltip-close:hover{background:#ad4e2d18}
.radio-tooltip-close:focus-visible:where(:root[data-show-focus-indicators=true] *){outline-offset:0}
:root[data-theme=dark] .radio-tooltip{--help-border:#766750;--help-key:#211e19;color:#e4d7c1;background:#302b23;box-shadow:0 4px 12px #0005}

.visualization-menu{width:230px;overflow:hidden}
.visualization-menu-list{padding:4px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b9aa93 #f6efe3}
.visualization-menu-list button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;text-align:left;letter-spacing:normal}
.visualization-menu-list button[hidden]{display:none}
.visualization-menu-row{display:flex}
.visualization-menu-row[hidden]{display:none}
.visualization-menu-row>button:first-child{flex:1;min-width:0}
.visualization-menu-list .visualization-mix{justify-content:center;width:40px;flex:none;padding:0;font-size:22px}
.visualization-menu-list .visualization-mix::before{display:none}
.visualization-menu-list button::before{content:'';width:14px;flex:none}
.visualization-menu-list button[aria-selected=true]{color:var(--orange);font-weight:600}
.visualization-menu-list button[aria-selected=true]::before{content:'✓'}
.visualization-menu-list button:hover,.visualization-menu-list button:focus-visible:where(:root[data-show-focus-indicators=true] *){background:#e4d1b8;color:#332e28;outline:2px solid var(--orange);outline-offset:-2px}
:root[data-theme=dark] .visualization-menu-list{scrollbar-color:#8a785d #302b23}
:root[data-theme=dark] .visualization-menu-list button:hover,:root[data-theme=dark] .visualization-menu-list button:focus-visible:where(:root[data-show-focus-indicators=true] *){background:#594733;color:#f4e6cf}
.radio{margin-top:12px;position:relative;isolation:isolate;border-radius:21px;padding:15px 15px 0;background:repeating-linear-gradient(2deg,transparent 0 3px,#4226171c 4px,transparent 7px),linear-gradient(100deg,#693c25,#976446 34%,#805033 69%,#5c3421);box-shadow:0 28px 42px -22px #3b2a2499,0 3px 7px #40291f42,inset 0 1px 1px #d4a984;border:1px solid #6b422b}
.radio-face{position:relative;--face-inset-x:26px;--face-inset-y:18px;--display-panel-gutter:12px;--radio-face-background:linear-gradient(125deg,#e9e0cf,#d7cab4);background:var(--radio-face-background);border-radius:11px;padding:18px 26px;display:grid;grid-template-columns:29% 1fr;gap:30px;box-shadow:inset 0 2px 3px #fff8,0 2px 4px #23150d66;border:1px solid #b4a78e}
.panel-screw{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 32% 25%,#f2dda5 0,#c8a45d 36%,#a17b39 70%,#76552a);border:1px solid #8e703d;box-shadow:0 1px 1px #fff9,0 0 0 1px #8a79534d,inset 0 1px 1px #fff7,inset 0 -1px 1px #62472280;pointer-events:none}
.panel-screw:after{content:'';position:absolute;left:1px;right:1px;top:3px;height:1px;background:#65502c;box-shadow:0 1px 0 #f5dda077;transform:rotate(var(--screw-angle,35deg))}
.panel-screw.top-left{top:7px;left:7px}
.panel-screw.top-right{top:7px;right:7px;--screw-angle:-25deg}
.panel-screw.bottom-left{bottom:7px;left:7px;--screw-angle:65deg}
.panel-screw.bottom-right{bottom:7px;right:7px;--screw-angle:15deg}
.speaker{position:relative;padding:0;text-align:left;background:#705e43;border:2px solid;border-color:var(--display-edge-top) var(--display-edge-right) var(--display-edge-bottom) var(--display-edge-left);border-radius:6px;box-shadow:0 1px 0 var(--display-lip);display:flex;flex-direction:column;overflow:hidden;min-height:290px;touch-action:manipulation}
/* Shade the whole speaker recess above either the grille or the exposed driver. */
.speaker:after{content:'';position:absolute;inset:0;z-index:1;border-radius:4px;box-shadow:inset 0 4px 7px -1px #0009,inset 2px 0 4px -1px #0006,inset 0 -1px 1px #ffffff08;pointer-events:none}
.speaker-defs{position:absolute;pointer-events:none}
.speaker-bay{display:block;position:relative;flex:1;min-height:180px}
.speaker-fabric{display:block;position:absolute;inset:0;background:repeating-linear-gradient(90deg,#302a2377 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,#baa17b88 0 1px,transparent 1px 3px),radial-gradient(ellipse,#665a44,#847255);box-shadow:inset 0 0 18px #241c1380}
.speaker-drivers{position:absolute;inset:0;display:flex;align-items:center;padding:6px;background:repeating-linear-gradient(2deg,transparent 0 3px,#131a121f 4px,transparent 7px),linear-gradient(105deg,#443b2b,#302c21);box-shadow:inset 0 0 18px #15110c99;visibility:hidden}
.speaker.is-open .speaker-fabric{visibility:hidden}
.speaker.is-open .speaker-drivers{visibility:visible}
.speaker-mount{display:block;position:relative;width:100%;aspect-ratio:1/2;max-height:100%;filter:drop-shadow(0 3px 3px #11171099)}
/* Keep the mounting plate's corners circular when the driver SVG stretches. */
.speaker-mount:before{content:'';position:absolute;inset:0;border:1px solid #94856a;border-radius:20px;background:linear-gradient(135deg,#807660,#35362f 45%,#171b16)}
.speaker-mount .panel-screw.top-left{top:12px;left:12px}
.speaker-mount .panel-screw.top-right{top:12px;right:12px}
.speaker-mount .panel-screw.bottom-left{bottom:12px;left:12px}
.speaker-mount .panel-screw.bottom-right{bottom:12px;right:12px}
.speaker-driver{display:block;position:relative;width:100%;height:100%;overflow:visible}
.speaker-cone{transform-box:view-box;transform-origin:100px 200px;transform:scale(var(--speaker-scale,1))}
.speaker-dustcap{position:absolute;left:50%;top:50%;width:32%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 25%,#555a4c,#2d3529 60%,#151d13);border:1px solid #11190f;box-shadow:inset 0 1px 2px #969b7c33,0 2px 3px #11171066;transform:translate(-50%,-50%) scale(var(--speaker-scale,1))}
.speaker-label{display:block;flex:none;background:#c4b398;padding:14px 14px 10px;color:#514738;font-weight:700;font-size:12px;letter-spacing:3px}
.speaker-label span{display:block;font-size:7px;letter-spacing:2px;margin-top:4px;font-weight:500;color:#72624c}
.receiver{min-width:0}
.receiver-top{display:flex;justify-content:space-between;font-size:8px;font-weight:600;letter-spacing:1.9px;color:#85745b;margin:1px 2px 8px}
.model{letter-spacing:2px}
/* A narrow cut in the panel, with glass sitting behind the shaded upper lip. */
:is(.display,.speaker){--display-edge-top:#655b48;--display-edge-left:#80725a;--display-edge-bottom:#c7bba4;--display-edge-right:#a7977c;--display-lip:#fff6;}
.display{position:relative;background:linear-gradient(120deg,#363930,#232921);border:2px solid;border-color:var(--display-edge-top) var(--display-edge-right) var(--display-edge-bottom) var(--display-edge-left);border-radius:6px;padding:18px 21px 19px;color:#e2ce8f;box-shadow:0 1px 0 var(--display-lip);overflow:hidden;cursor:pointer;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.display.is-tuning{cursor:grabbing}
#resume-playback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:120px;height:120px;padding:14px;border:2px solid currentColor;border-radius:50%;background:#17201bf5;color:inherit;box-shadow:0 8px 30px #0008,0 0 0 8px #11171480;touch-action:manipulation;font-size:12px;font-weight:700;letter-spacing:2px}
#resume-playback svg{width:48px;height:48px;fill:currentColor;pointer-events:none}
#resume-playback span{pointer-events:none}
#resume-playback:hover{background:#28342cf5}
#resume-playback:active{transform:translate(-50%,-50%) scale(.96)}
#resume-playback:focus-visible:where(:root[data-show-focus-indicators=true] *){outline-color:currentColor;outline-offset:7px}
.display.is-expanded #resume-playback{width:160px;height:160px;font-size:14px;gap:8px}
.display.is-expanded #resume-playback svg{width:64px;height:64px}
.display:after{content:'';position:absolute;inset:0;z-index:3;border-radius:4px;background:linear-gradient(120deg,#ffffff08,transparent 45%);box-shadow:inset 0 4px 7px -1px #0009,inset 2px 0 4px -1px #0006,inset 0 -1px 1px #ffffff08;pointer-events:none}
.frequency-display{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.frequency-display canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:var(--effect-opacity,1);z-index:1}
.frequency-display canvas:is([data-mode=flag],[data-mode=fish-tank]){z-index:0}
.frequency-display canvas[hidden]{display:none}
.display>.adaptive-readability{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.display>.adaptive-readability[hidden]{display:none}
.frequency-display span{position:absolute;width:1px;height:9px;background:#838867;opacity:calc(.85 * var(--effect-opacity,1));z-index:1}
.display[data-state=playing] .frequency-display span{opacity:calc(.4 * var(--effect-opacity,1))}
.display>.display-header,.display>h2,.display>.display-details,.display>.tuning-scale,.display>.display-footer{position:relative;z-index:1}
.display-header,.display>h2,.display-details{text-shadow:0 1px 3px #232921,0 0 6px #232921}
.display-header{display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:1.3px;color:#9c9f80}
.display-header>span:last-child{margin-left:auto;font-variant-numeric:tabular-nums}
.signal{height:10px;display:flex;gap:2px;align-items:flex-end}
.signal i{width:2px;background:#898c71}
.signal i:nth-child(1){height:3px}
.signal i:nth-child(2){height:5px}
.signal i:nth-child(3){height:7px}
.signal i:nth-child(4){height:10px}
.display[data-state=playing] .signal i{background:#d9c586}
.display h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(25px,3.2vw,39px);line-height:1.1;margin:14px 0 7px;letter-spacing:-.6px;text-shadow:0 0 16px #cfaa5322}
.display>h2{text-shadow:0 1px 3px #232921,0 0 6px #232921,0 0 16px #cfaa5322}
.display:not(.is-expanded) .station-name{height:var(--station-name-height,2.2em);overflow-wrap:anywhere}
.display h2.station-name-measure{position:absolute;visibility:hidden;pointer-events:none;height:auto;margin:0;overflow-wrap:anywhere}
.display-details{font-size:clamp(11px,1.4vw,14px);line-height:1.4;height:2.8em;margin-bottom:16px;flex:none}
.display-details .station-origin{font-size:8px;letter-spacing:1.5px;color:#a9a789;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.now-playing{font-size:inherit;line-height:inherit;letter-spacing:0;color:#e2ce8f;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0}
.now-playing[hidden]{display:none}
.now-playing .programme-name{font-size:1.15em;line-height:1}
.tuning-scale{position:relative;height:22px;border-bottom:1px solid #858b6866;margin:0 4px}
.dial-needle-target{position:absolute;top:-11px;left:clamp(0px,calc(var(--needle) - 22px),calc(100% - 44px));width:44px;height:44px;cursor:grab;touch-action:none;z-index:2;transition:left .22s}
.display.is-indicator-tuning .dial-needle,.display.is-indicator-tuning .dial-needle-target{transition:none}
.display.is-indicator-tuning .dial-needle-target{cursor:grabbing}
.display>.tuning-scale{z-index:2}
.display.is-expanded .dial-needle-target{top:-4px;height:max(44px,calc(100% + 6px))}
.dial-needle{position:absolute;width:2px;height:28px;top:-4px;left:var(--needle);background:#edb66b;box-shadow:0 0 8px #ea9a4b99;transform:translateX(-1px);transition:left .22s}
.display-footer{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:7px;min-height:16px}
.display-footer .station-origin{min-width:0;margin:0;color:#a9a789;font-size:7px;letter-spacing:.6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.display-footer output{flex:none;margin-left:auto;color:#a9a789;font-size:8px;text-align:right;text-shadow:0 1px 3px #232921}
.controls{display:grid;grid-template-columns:.55fr 1fr 1fr;align-items:start;gap:8px;padding-top:17px;text-align:center}
.control-label{display:block;font-size:8px;font-weight:600;letter-spacing:1.8px;color:#7b6c56}
.power-section{grid-row:1/3;display:flex;flex-direction:column;align-items:center;gap:5px}
.power{position:relative;width:44px;height:44px;flex:none;padding:0;border-radius:50%;border:3px solid #d5c6ad;background:linear-gradient(135deg,#534e42,#302e28);box-shadow:0 3px 4px #30231840,inset 0 1px 1px var(--power-edge-highlight,#a7a294);display:grid;place-items:center}
.power:disabled{opacity:.45;cursor:default}
.power:after{content:'';position:absolute;width:44px;height:44px;left:50%;top:50%;transform:translate(-50%,-50%)}
.secondary-controls{grid-column:2/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;align-self:end;min-width:0}
.secondary-controls .push-button{margin-right:0}
.power svg{width:21px;height:21px;fill:none;stroke:#b7ac94;stroke-width:1.7;stroke-linecap:round}
.control-button[aria-pressed=true] .power svg{stroke:#edbb75}
#power[aria-pressed=true] .power{box-shadow:0 3px 4px #30231840,inset 0 1px 1px var(--power-edge-highlight,#a7a294),0 0 10px 3px #edbb7555}
#power.power-hint[aria-pressed=false] .power{box-shadow:0 3px 4px #30231840,inset 0 1px 1px var(--power-edge-highlight,#a7a294),0 0 5px 2px #edbb7540;animation:power-hint 2s ease-in-out infinite}
@keyframes power-hint{0%,100%{box-shadow:var(--hint-button-shadow,0 3px 4px #30231840,inset 0 1px 1px var(--power-edge-highlight,#a7a294)),0 0 5px 2px #edbb7520}50%{box-shadow:var(--hint-button-shadow,0 3px 4px #30231840,inset 0 1px 1px var(--power-edge-highlight,#a7a294)),0 0 14px 5px #edbb7580}}
.tuning-section{display:flex;flex-direction:column;gap:7px;align-items:center}
.tuning-row,.volume-row{display:flex;align-items:center;gap:3px}
.step{display:grid;place-items:center;width:26px;height:33px;border:0;background:transparent;padding:4px;color:#82735b}
.step svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.knob-surround{width:var(--dial-size);height:var(--dial-size);padding:6px;background:linear-gradient(130deg,#d0c1a7,#b5a68b);border-radius:50%;box-shadow:0 0 0 1px #fff6,inset 0 2px 4px #76634d40}
#volume-knob.zero-volume{--hint-button-shadow:0 5px 6px #473a2a50;animation:power-hint 2s ease-in-out infinite}
.knob{width:100%;height:100%;border-radius:50%;background:repeating-conic-gradient(#716d63 0deg 2deg,#3a3933 2deg 4deg);padding:6px;box-shadow:0 5px 6px #473a2a50;border:1px solid #292b24;cursor:grab;touch-action:none;user-select:none;position:relative}
.knob:active{cursor:grabbing}
.knob-cap{width:100%;height:100%;position:relative;border-radius:50%;background:radial-gradient(circle at 35% 25%,#6c6b60,#48483f 45%,#2f322b);box-shadow:inset 0 1px 2px #b7b4a355,inset 0 -3px 4px #1113}
.knob-indicator{position:absolute;inset:0;transform:rotate(var(--rotation));transition:transform .18s}
.knob.dragging .knob-indicator{transition:none}
.knob-pointer{position:absolute;top:9px;left:calc(50% - 2px);width:4px;height:19px;border-radius:2px;background:#ead5a7;box-shadow:0 0 3px #ffffff2a}
.knob-center{position:absolute;width:15px;height:15px;left:calc(50% - 7.5px);top:calc(50% - 7.5px);border-radius:50%;background:#45483e;box-shadow:inset 0 1px 1px var(--knob-center-highlight,#aaaa8850)}
.volume-section{display:flex;flex-direction:column;gap:7px;align-items:center}
.volume-step{padding:4px}
.volume-step:disabled{opacity:.35;cursor:default}
output{font-size:9px;color:#7b6c56;font-variant-numeric:tabular-nums}
.radio-bottom{padding:9px 15px 8px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;color:#e1c6a7;font-size:7px;letter-spacing:1.6px}
.radio-bottom-controls{display:flex;align-items:center;gap:28px;flex:none}
.radio-support{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 12px;margin-left:auto}
.radio-support>span{white-space:nowrap}
.credit-link{color:inherit;text-decoration:none}
.credit-heart{filter:saturate(.85);opacity:.9}
.kofi-link{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:5px;background:color-mix(in srgb,currentColor 6%,transparent);color:inherit;font-size:8px;font-weight:600;letter-spacing:.7px;text-decoration:none;white-space:nowrap}
.kofi-link svg{width:15px;height:15px;flex:none}
.kofi-link:hover{background:color-mix(in srgb,currentColor 12%,transparent);border-color:color-mix(in srgb,currentColor 35%,transparent)}
.kofi-link:focus-visible:where(:root[data-show-focus-indicators=true] *){outline:2px solid #fff3e5;outline-offset:3px}
.power-light-target{display:flex;align-items:center;width:44px;height:44px;margin:-19.5px;justify-content:center;flex:none}
.power-light{width:5px;height:5px;border-radius:50%;background:#493824;box-shadow:inset 0 1px 2px #0005}
.power-light.on{background:#e5b173;box-shadow:0 0 8px #ffc88099}
.power-light.on.direct-playing{background:#1685ff;box-shadow:0 0 4px #1685ff,0 0 10px 2px #087cffbb,0 0 18px 4px #006aff66}
/* The cabinet's stacking context keeps the feet above the page background. */
.radio-foot{position:absolute;top:calc(100% + 1px);height:9px;width:54px;background:linear-gradient(#25231f,#474137);border-radius:0 0 5px 5px;z-index:-1;pointer-events:none}
.radio-foot.left{left:54px}
.radio-foot.right{right:54px}
.station-selection{margin-top:30px}
.station-list{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin-top:7px}
.station-card{display:flex;flex-direction:column;border:1px solid #d2c7b6;border-radius:8px;background:#f3ede25c;padding:14px 16px;position:relative;min-width:0}
#station-list .station-card:focus-within{box-shadow:0 0 10px 3px var(--station-focus-glow,#edbb7555)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(#station-list,#presets){--station-focus-glow:#8ad1fa55}
:root[data-radio-theme=matrix] :is(#station-list,#presets){--station-focus-glow:#8afa9f55}
.channel-dialog{width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:26px;border:1px solid #b9aa93;border-radius:12px;background:#f6efe3;color:#332e28;box-shadow:0 18px 60px #23150d55}
.channel-dialog::backdrop{background:#231b14aa}
.channel-dialog{--help-border:#b9aa93;padding:0;overflow:hidden}
.channel-dialog[open]{display:flex;flex-direction:column}
.dialog-scroll{min-height:0;margin:12px 6px;max-height:calc(100dvh - 58px);overflow-y:auto;overscroll-behavior:contain;padding:14px 20px}
.help-content{margin-bottom:12px}
:root{scrollbar-color:#b9aa93 #e9e1d3}
.dialog-scroll,.help-content,.sleep-menu{scrollbar-width:thin;scrollbar-color:#b9aa93 #f6efe3}
:root[data-theme=dark]{scrollbar-color:#8a785d #211e19}
:root[data-theme=dark] .dialog-scroll,:root[data-theme=dark] .help-content,:root[data-theme=dark] .sleep-menu{scrollbar-color:#8a785d #302b23}
html.help-open,html.help-open body{overflow:hidden}
.help-dialog{--help-surface:#f6efe3;--help-border:#b9aa93;--help-muted:#655b4d;--help-key:#e9e1d3;width:min(680px,calc(100% - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:0;border:1px solid var(--help-border);border-radius:12px;background:var(--help-surface);color:#332e28;box-shadow:0 18px 60px #23150d55;overflow:hidden}
.help-dialog[open]{display:flex;flex-direction:column}
.help-dialog::backdrop{background:#231b14aa}
.help-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;padding:18px 26px;border-bottom:1px solid var(--help-border)}
.help-header h2{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(24px,4vw,30px);font-weight:400;line-height:1.2;margin:0}
.dialog-close{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;flex:none;padding:0;border:0;border-radius:5px;background:transparent;font-size:24px;line-height:1}
.dialog-close:hover{background:#b9aa9326}
.help-dialog :focus-visible:where(:root[data-show-focus-indicators=true] *){outline-color:var(--orange);outline-offset:3px}
.help-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 26px 26px;font-size:14px;line-height:1.65;overflow-wrap:anywhere}
.help-content:focus-visible:where(:root[data-show-focus-indicators=true] *){outline-offset:-4px}
.statistics-dialog{width:min(520px,calc(100% - 32px))}
.statistics-dialog .help-header h2,#help-dialog .help-header h2,#help-detail-dialog .help-header h2,#song-info-dialog .help-header h2{font-family:inherit;font-size:18px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase}
.statistics-dialog .statistics-count{color:inherit;font-size:18px;font-variant-numeric:tabular-nums}
.statistics-count strong{font-size:30px}
.statistics-table{width:100%;margin-bottom:16px;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:13px}
.statistics-table th,.statistics-table td{padding:9px 4px;border-bottom:1px solid currentColor;text-align:left;overflow-wrap:anywhere}
.statistics-table th:not(:first-child),.statistics-table td:not(:first-child){text-align:right;white-space:nowrap}
#statistics-channels td:first-child{padding:0}
.statistics-channel{display:block;width:100%;min-height:44px;padding:9px 4px;border:0;border-radius:4px;background:transparent;text-align:left;overflow-wrap:anywhere}
.statistics-channel:hover{background:#b9aa9326;color:var(--orange)}
.statistics-channel:focus-visible:where(:root[data-show-focus-indicators=true] *){outline-offset:-3px}
.help-content p{margin:0 0 12px;color:var(--help-muted)}
.help-content section+section{border-top:1px solid var(--help-border);margin-top:22px;padding-top:20px}
.help-content h3{font-size:16px;line-height:1.4;margin:0 0 10px}
.help-content ul{margin:0;padding-left:21px;color:var(--help-muted)}
.help-content li+li{margin-top:10px}
.help-content strong{color:inherit;font-weight:700}
.help-content kbd,#radio-tooltip kbd,#presets kbd,.favorite-ghost kbd{padding:1px 5px;border:1px solid var(--help-border);border-radius:4px;background:var(--help-key);color:inherit;font:inherit;font-size:.85em;white-space:nowrap}
.help-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}
#help-content .help-topics>section{min-width:0;margin:0;padding:8px 0 0;border-top:1px solid var(--help-border)}
.help-topic-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin-bottom:4px}
.help-topic-heading h3{margin:0}
.help-info{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--help-muted)}
.help-info svg{width:20px;height:20px}
.help-info:hover{background:#b9aa9326;color:inherit}
.help-topics li+li{margin-top:6px}
.help-topics p:last-child{margin-bottom:0}
.help-detail-dialog{width:min(600px,calc(100% - 32px))}
.help-content .help-detail-note{margin:16px 0 0}
.keyboard-panel{position:fixed;inset:max(16px,env(safe-area-inset-top)) auto max(16px,env(safe-area-inset-bottom)) 16px;z-index:100;width:min(300px,calc(100% - 32px));margin:0;display:flex;flex-direction:column}
.keyboard-panel[hidden]{display:none}
:is(.keyboard-panel,.voice-panel,.favorites-panel) .help-header{gap:8px;padding:10px 12px 10px 16px;min-height:64px}
:is(.keyboard-panel,.voice-panel,.favorites-panel) .help-header h2{font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.5px;line-height:1.4}
:is(.keyboard-panel,.voice-panel,.favorites-panel) .help-content{padding:16px;margin-bottom:8px;font-size:13px;line-height:1.5}
.keyboard-panel .help-content h3{font-size:13px;letter-spacing:.3px;margin-bottom:8px}
.keyboard-panel .help-content section+section{margin-top:16px;padding-top:16px}
.keyboard-list{display:grid;gap:4px;margin:0}
.keyboard-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
.keyboard-list dt{min-width:0;color:var(--help-muted)}
.keyboard-list dd{display:flex;align-items:center;gap:4px;flex:none;margin:0}
.keyboard-list kbd{min-width:23px;text-align:center;font-size:12px}
.keyboard-help-open{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin:0 0 10px}
.keyboard-help-open[hidden]{display:none}
.right-panels{position:fixed;inset:max(16px,env(safe-area-inset-top)) max(16px,calc((100vw - var(--side-layout-width,1440px))/2)) max(16px,env(safe-area-inset-bottom)) auto;z-index:100;width:300px;display:none;flex-direction:column;gap:16px;pointer-events:none}
.right-panels>.help-dialog{width:100%;margin:0;min-height:0;max-height:100%;display:flex;flex-direction:column;pointer-events:auto}
.right-panels>.help-dialog[hidden]{display:none}
.favorites-panel-open.voice-panel-open .right-panels>.help-dialog{flex:1 1 0}
.right-panel-available:is(.favorites-panel-open,.voice-panel-open) .right-panels{display:flex}
.right-panel-available:is(.favorites-panel-open,.voice-panel-open):not(.display-expanded) body{padding-right:320px}
.keyboard-panel-open{--side-layout-width:1760px}
.compact-view{--side-layout-width:1110px}
.compact-view.keyboard-panel-open{--side-layout-width:1430px}
.favorites-panel #presets{flex-direction:column;flex-wrap:nowrap;padding:0;gap:7px}
.favorites-panel #presets button{width:100%;max-width:none;min-height:44px;justify-content:space-between;text-align:left}
.favorites-panel #presets .preset-label{white-space:nowrap}
.favorites-panel #presets .preset-label{flex:1}
.favorites-panel-footer{flex:none;display:flex;justify-content:flex-end;padding:8px 16px;border-top:1px solid var(--help-border,#b9aa93)}
.favorites-panel-footer[hidden]{display:none}
#listening-bar>.favorites-panel-footer{order:4;flex-basis:100%;padding:0 4px;border:0}
.favorites-panel-footer .channel-visibility-choice{font-size:11px;letter-spacing:1px;color:inherit}
#favorites-panel-open[hidden]{display:none}
#favorites-panel-open{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;min-height:44px;padding:8px;border-radius:8px}
#favorites-panel-open svg{width:22px;height:22px}
.voice-panel-light{width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px color-mix(in srgb,var(--orange) 40%,transparent)}
.help-content .voice-panel-state{margin-bottom:4px;color:inherit;font-weight:700}
.voice-command-list{margin:16px 0 0}
.voice-command-list>div+div{margin-top:12px}
.voice-command-list dt{font-weight:700}
.voice-command-list dd{margin:2px 0 0;color:var(--help-muted)}
#voice-panel-stop{min-height:44px;margin-top:12px}
.display-expanded :is(.keyboard-panel,.right-panels){visibility:hidden;pointer-events:none}
@media(min-width:1480px){
 .keyboard-panel-open:not(.display-expanded) body{padding-left:320px}
 .keyboard-panel{left:max(16px,calc((100vw - 1440px)/2))}
}
@media(min-width:1150px){
 .compact-view.keyboard-panel-open:not(.display-expanded) body{padding-left:320px}
 .compact-view .keyboard-panel{left:max(16px,calc((100vw - 1110px)/2))}
}
.right-panel-available.keyboard-panel-open:is(.favorites-panel-open,.voice-panel-open) .keyboard-panel{left:max(16px,calc((100vw - var(--side-layout-width))/2))}
/* Reserve both side margins when they fit, so panels do not shift the radio. */
@media(min-width:1800px){
 :root:not(.compact-view){--side-layout-width:1760px}
 :root:not(.compact-view):not(.display-expanded) body{padding-inline:0}
 :root:not(.compact-view) .keyboard-panel{left:max(16px,calc((100vw - 1760px)/2))}
}
@media(min-width:1470px){
 :root.compact-view{--side-layout-width:1430px}
 :root.compact-view:not(.display-expanded) body{padding-inline:0}
 .compact-view .keyboard-panel{left:max(16px,calc((100vw - 1430px)/2))}
}
@media(max-width:580px){.help-topics{grid-template-columns:minmax(0,1fr);gap:14px}}
@media(max-width:520px){.help-header{padding:12px 16px;gap:10px}.help-content{padding:18px 16px 22px}}
.channel-dialog h2{font-family:inherit;font-size:18px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;margin:0 0 14px}
.channel-dialog p{font-size:12px;line-height:1.5;color:#827662;margin:0 0 18px}
.channel-dialog label{display:block;min-width:0;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-top:14px}
.channel-dialog label>.optional-field{font-weight:400;color:#827662}
.channel-dialog :is(input,select){display:block;width:100%;min-width:0;min-height:44px;margin-top:8px;padding:10px;border:1px solid #c2b49e;border-radius:5px;background:#fffbf4;color:inherit;font:inherit;font-size:16px;font-weight:400;letter-spacing:normal;text-transform:none}
.channel-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.channel-name-row{display:flex;align-items:stretch;gap:10px;margin-top:8px}
.channel-name-row input{flex:1;margin-top:0}
.channel-name-row button{flex:none;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.station-button .custom-channel-name{color:#ad4e2d}
:root[data-theme=dark] .station-button .custom-channel-name{color:#e3aa74}
.channel-dialog .channel-field-help{font-size:11px;margin:7px 0 0}
#wake-ready-form .channel-field-help a{color:inherit;text-underline-offset:2px}
.channel-dialog .channel-error{margin:16px 0 0;color:#a44027}
.channel-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.channel-form-actions button{min-height:44px;padding:10px 18px;border:1px solid #b9aa93;border-radius:5px;background:transparent;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.channel-form-actions .channel-save{background:#ad4e2d;color:#fff8ed;border-color:#ad4e2d}
@media(max-width:520px){.dialog-scroll{padding:8px 14px}.channel-field-row{grid-template-columns:1fr;gap:0}}
.station-card.selected{background:#f6efe3;border-color:#b58865;box-shadow:0 2px 5px #59433508}
.station-button{display:flex;align-items:center;gap:12px;border:0;padding:0 30px 0 0;background:transparent;text-align:left;width:100%;min-height:41px}
.station-index{font-size:10px;font-variant-numeric:tabular-nums;color:#a19584;align-self:flex-start;padding-top:4px}
.station-button strong{font-size:13px;font-weight:600;display:block;overflow-wrap:anywhere}
.station-button small{display:flex;align-items:center;gap:6px;color:#988c7b;font-size:9px;margin-top:4px}
.country-flag{display:block;flex:none;object-fit:contain;filter:saturate(.8);border-radius:1px}
.station-selected-dot{margin-left:auto;align-self:flex-start;width:6px;height:6px;border-radius:50%;background:#cabeac;margin-top:7px;flex-shrink:0}
.selected .station-selected-dot{background:var(--orange)}
.station-card p{font-size:10px;color:#8a7e6c;line-height:1.5;margin:11px 0 10px}
.station-button-text{min-width:0;overflow-wrap:anywhere}
.station-logo{display:block;flex:none;width:44px;height:44px;box-sizing:border-box;object-fit:contain;padding:2px;background:#fff;border-radius:4px;color-scheme:only light}
.station-card-heading{position:relative;display:flex;align-items:center;gap:9px;padding-left:18px;min-width:0}
.station-card-heading .station-button{flex:1;min-width:0;min-height:44px}
.station-card-heading .station-index{position:absolute;left:0;top:0}
.station-logo-trigger{display:block;flex:none;width:44px;height:44px;min-height:44px;border:0;padding:0;border-radius:4px;background:transparent;cursor:pointer}
.station-logo-trigger:disabled{cursor:default}
.station-logo-trigger:hover:not(:disabled){box-shadow:0 0 0 1px var(--orange)}
#station-logo-visit{display:block;min-height:48px;box-sizing:border-box;padding:10px 12px;border-radius:4px;color:inherit;text-decoration:none}
#station-logo-visit:hover,#station-logo-visit:focus{background:#b9aa9326}
.station-card>p{overflow-wrap:anywhere}
.station-source{color:#827662;text-decoration:none;font-size:9px}
.station-source:hover{text-decoration:none}
.station-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.station-remove{display:grid;place-items:center;width:32px;min-height:32px;flex:none;padding:6px;border:0;border-radius:4px;background:transparent;color:var(--orange)}
.station-remove:hover{background:#ad4e2d18}
.station-remove svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.station-disabled{border-style:dashed}
.station-button:disabled{cursor:default}
.station-toggle{display:flex;align-items:center;gap:6px;font-size:9px;color:#827662;min-height:30px}
.toggle-control{position:relative;cursor:pointer}
.toggle-control input[type=checkbox]{appearance:none;-webkit-appearance:none;position:absolute;right:0;top:50%;transform:translateY(-50%);width:44px;height:44px;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.toggle-track{display:block;width:34px;height:20px;flex:none;border:1px solid #ad9b7d;border-radius:12px;background:#cabca5;box-shadow:inset 0 1px 3px #4e3d2740;pointer-events:none}
.toggle-track:after{content:'';display:block;width:12px;height:12px;margin:3px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#f3dfab,#c5a16b);box-shadow:0 1px 2px #4e3d2755;transition:transform .15s}
.toggle-control input:checked+.toggle-track{background:#817452;border-color:#a99065}
.toggle-control input:checked+.toggle-track:after{transform:translateX(14px)}
.toggle-control input:focus-visible:where(:root[data-show-focus-indicators=true] *)+.toggle-track{outline:3px solid var(--orange);outline-offset:3px}
.toggle-control:has(input:disabled),.toggle-control input:disabled{cursor:default}
.toggle-control input:disabled+.toggle-track{opacity:.6}
.listen-note{text-align:center;margin:22px auto 32px;font-size:10px;color:#8d8375;line-height:1.7}
.listen-note.error{color:#a44027}
footer{margin-top:28px;border-top:1px solid #cfc4b3;display:flex;justify-content:space-between;padding-top:19px;color:#968a77;font-size:8px;letter-spacing:1px}
footer>span:first-child{font-family:inherit;font-size:13px;letter-spacing:0}
.footer-dot{margin:0 8px;color:#b7a88f}
.noscript{text-align:center}
.knob:focus-visible:where(:root[data-show-focus-indicators=true] *){outline-offset:8px}
@media(min-width:1400px){main{padding-top:26px}
}
@media(max-width:760px){main{padding:24px 20px 24px}
.wordmark{font-size:10px;letter-spacing:1.3px;gap:6px}
.radio-face{--face-inset-x:20px;--face-inset-y:15px;gap:18px;padding:15px 20px;grid-template-columns:24% 1fr}
.controls{grid-template-columns:.55fr 1fr 1fr;gap:3px}
:root{--dial-size:100px}
.tuning-row{gap:3px}
.speaker-label{font-size:9px;letter-spacing:1px;padding:10px}
.speaker-label span{font-size:6px;letter-spacing:1px}
.display{padding:16px 14px}
.display-header{font-size:7px;letter-spacing:.6px}
.radio-bottom{font-size:6px;letter-spacing:1px;padding-inline:8px}
}
@media(max-width:520px){
 main{padding:20px 16px 20px}
 .mark{width:29px;height:29px;margin-right:2px}
 .radio{padding:10px 10px 0;border-radius:15px;margin-top:12px}
 .radio-face{--face-inset-x:15px;--face-inset-y:14px;padding:14px 15px;grid-template-columns:1fr;gap:18px;border-radius:7px}
 .speaker{order:2;min-height:100px;height:auto}
 .speaker-bay{min-height:65px}
 .speaker.is-open .speaker-bay{min-height:0;flex:none;aspect-ratio:1.75}
 .speaker-mount{height:100%;aspect-ratio:auto}
 .speaker-dustcap{width:18%}
 .speaker-label{position:static;width:100%;padding:10px 12px;font-size:9px;letter-spacing:2px}
 .speaker-label span{display:block;font-size:6px;letter-spacing:1.5px;margin-top:4px}
 .receiver-top{font-size:7px;letter-spacing:1.2px;margin-bottom:8px}
 .display{padding:16px clamp(8px,4vw,16px)}
 .display h2{font-size:clamp(22px,8vw,35px);margin-top:14px}
 .display-details .station-origin{font-size:7px;letter-spacing:1px}
 .display-header{font-size:6px;letter-spacing:.4px;gap:5px}
 .controls{grid-template-columns:.55fr 1fr 1fr;gap:3px;padding-top:18px}
 .controls>div{min-width:0}
 :root{--dial-size:clamp(62px,20vw,105px)}
 .knob-surround{padding:4px}
 .knob{padding:4px}
 .knob-pointer{top:7px;height:clamp(9px,3.5vw,17px)}
 .knob-center{width:10px;height:10px;left:calc(50% - 5px);top:calc(50% - 5px)}
 .tuning-row,.volume-row{gap:1px}
 .step{width:clamp(14px,3.9vw,21px);padding:0}
 .step svg{width:14px;height:14px}
 .volume-section{gap:7px}
 .power-section{gap:7px}
 .power{width:clamp(32px,10vw,39px);height:clamp(32px,10vw,39px)}
 .control-label{font-size:7px;letter-spacing:1.2px}
 .radio-bottom{padding-block:8px;font-size:5px;letter-spacing:.6px;flex-wrap:wrap;gap:5px}
 .station-selection{margin-top:28px}
 .station-list{grid-template-columns:1fr;gap:8px}
 .station-card{padding:12px 14px}
 .station-card p{margin:5px 0 8px;font-size:10px}
 .station-button{min-height:33px}
 .listen-note{font-size:9px;margin-bottom:25px}
 footer{font-size:6px;letter-spacing:.6px;align-items:center;gap:10px;flex-wrap:wrap}
 footer>span:first-child{font-size:12px}
}
/* Keep a generous hit area while aligning the brass rim with the knob edge. */
.push-button{height:36px;flex:none;padding:7px 7px 7px 0;margin-right:-5px;border:0;border-radius:4px;background:transparent;display:flex;align-items:center;gap:9px}
.mute-cap{width:33px;height:33px;flex:none;border-radius:50%;border:1px solid #a88c55;background:radial-gradient(circle at 35% 25%,#8d8876,#4f4d41 55%,#34362d);box-shadow:0 2px 2px #42362266,0 0 0 2px #c8b898,inset 0 1px 1px #e6dcc277;position:relative}
.mute-cap:after{content:'';position:absolute;width:6px;height:6px;left:calc(50% - 3px);top:calc(50% - 3px);border-radius:50%;background:#b6ab88}
.push-button:hover .mute-cap{border-color:#806132}
.push-button[aria-pressed=true] .mute-cap{transform:translateY(1px);background:radial-gradient(circle,#35382f,#514f41);box-shadow:0 0 0 2px #c8b898,inset 0 2px 3px #16170fcc}
#mute[aria-pressed=true] .mute-cap{--hint-button-shadow:0 0 0 2px #c8b898,inset 0 2px 3px #16170fcc;animation:power-hint 2s ease-in-out infinite}
:is(#channels,#songs,#equalizer)[aria-pressed=true] .mute-cap{box-shadow:0 0 0 2px #c8b898,inset 0 2px 3px #16170fcc,0 0 10px 3px #edbb7555}
.push-button[aria-pressed=true] .mute-cap:after{background:#e5b173;box-shadow:0 0 3px #e5b17377}
/* Keep the station layout mounted so its reserved height and metadata persist. */
.display.is-equalizer{cursor:default}
.display.is-equalizer>:not(.equalizer-panel):not(#resume-playback){visibility:hidden;pointer-events:none}
.equalizer-panel{position:absolute;inset:0;z-index:2;padding:14px 20px;display:flex;flex-direction:column;gap:10px}
.equalizer-panel[hidden]{display:none}
.equalizer-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;font-size:9px;letter-spacing:1.6px;color:#e2ce8f}
.equalizer-header button:not([role=option]){min-height:28px;padding:5px 8px;border:1px solid #858b6866;border-radius:3px;background:#e2ce8f0a;color:#c9bc85;font-size:8px;letter-spacing:1px}
.equalizer-header button:not([role=option]):hover{background:#e2ce8f18;border-color:#c9bc85}
.equalizer-body{display:flex;gap:9px;flex:1;min-height:0}
.eq-scale{display:flex;flex-direction:column;justify-content:space-between;width:25px;flex:none;padding-block:27px 24px;color:#92987a;font-size:7px;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.equalizer-bands{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;flex:1;min-width:0}
.equalizer-bands:before{content:'';position:absolute;left:0;right:0;top:calc(50% + 1.5px);height:1px;background:#c9bc8555;pointer-events:none}
.eq-band{min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:ns-resize}
.eq-band output{flex:none;font-size:9px;line-height:14px;color:#e2ce8f;white-space:nowrap}
.eq-track{position:relative;display:block;width:100%;flex:1;min-height:60px}
.eq-track input{position:absolute;inset:0;appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;width:100%;height:100%;margin:0;background:transparent;cursor:ns-resize;touch-action:none;border:0;border-radius:0;outline-offset:2px}
.eq-track input::-webkit-slider-runnable-track{width:6px;height:100%;border:1px solid #7c82624d;border-radius:3px;background:linear-gradient(90deg,#171d17,#3c4332);box-shadow:inset 1px 0 2px #0009}
.eq-track input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:10px;margin-left:-10px;border:1px solid #d9c586;border-radius:2px;background:linear-gradient(#e2ce8f,#8f875d);box-shadow:0 1px 4px #0008,0 0 5px #cfaa5322}
.eq-track input::-moz-range-track{width:6px;height:100%;border:1px solid #7c82624d;border-radius:3px;background:#292f24;box-shadow:inset 1px 0 2px #0009}
.eq-track input::-moz-range-thumb{width:24px;height:8px;border:1px solid #d9c586;border-radius:2px;background:linear-gradient(#e2ce8f,#8f875d);box-shadow:0 1px 4px #0008}
.eq-frequency{flex:none;font-size:8px;line-height:12px;white-space:nowrap;color:#c9bc85;font-variant-numeric:tabular-nums}
.equalizer-footer{display:flex;justify-content:space-between;margin-left:34px;flex:none;color:#92987a;font-size:7px;letter-spacing:1.3px}
@media(max-width:520px){.equalizer-panel{padding:12px 10px;gap:8px}.equalizer-bands{gap:4px}.equalizer-body{gap:5px}.eq-scale{width:22px}.equalizer-footer{margin-left:27px;letter-spacing:.7px}.eq-band output{font-size:8px}.eq-frequency{font-size:7px}}
.station-drag-handle{position:absolute;right:9px;top:12px;width:25px;height:25px;padding:3px;border:0;background:transparent;color:#a99c88;border-radius:4px;cursor:grab;touch-action:none}
.station-drag-handle:hover{color:var(--orange);background:#b6a48722}
.station-drag-handle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round}
.station-card.reordering{position:absolute;visibility:hidden;pointer-events:none;user-select:none}
.station-placeholder{min-width:0;border:1px dashed var(--orange);border-radius:9px;opacity:.25}
.station-ghost{position:fixed;z-index:1000;pointer-events:none;opacity:.92;box-shadow:0 10px 28px #332e2844;background:#f6efe3;transform:rotate(-1deg)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:320px){main{padding:16px 12px 16px}
.radio-face{--face-inset-x:10px;--face-inset-y:12px;padding:12px 10px}
.wordmark{font-size:10px}
.receiver-top{font-size:6px;letter-spacing:.8px}
.radio-bottom{padding-inline:2px}
.station-button{gap:9px}
.station-button strong{font-size:12px}
}
@media(max-width:360px){.controls{grid-template-columns:.8fr 2.15fr;row-gap:16px}.volume-section{grid-column:1/-1}.volume-step{width:24px;height:32px}.volume-step svg{width:18px;height:18px}}
/* Expand the existing display so audio, metadata and spectrum keep running. */
html.display-expanded,html.display-expanded body{overflow:hidden;overscroll-behavior:none;background:#232921}
.display.is-expanded{position:fixed;inset:0;z-index:1000;width:100%;height:100vh;height:100dvh;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;padding:clamp(20px,6vmin,72px);padding-top:max(clamp(20px,6vmin,72px),env(safe-area-inset-top));padding-right:max(clamp(20px,6vmin,72px),env(safe-area-inset-right));padding-bottom:max(clamp(20px,6vmin,72px),env(safe-area-inset-bottom));padding-left:max(clamp(20px,6vmin,72px),env(safe-area-inset-left));touch-action:none}
.display.is-expanded:after{border-radius:0;box-shadow:none}
.display.is-expanded:focus-visible:where(:root[data-show-focus-indicators=true] *){outline-offset:-5px}
.display.is-expanded .display-header{flex:none;z-index:3;font-size:clamp(8px,1.8vmin,14px);gap:8px;margin-bottom:0}
.display.is-expanded h2{font-size:clamp(30px,8vmin,88px);margin:24px 0 12px;overflow-wrap:anywhere}
.display.is-expanded .display-details{font-size:clamp(16px,3.8vmin,32px);margin-bottom:20px}
.display.is-expanded .display-details .station-origin{font-size:clamp(10px,2vmin,18px)}
.display.is-expanded .tuning-scale{flex:none;height:clamp(28px,10vh,90px);height:clamp(28px,10dvh,90px);margin-top:auto}
.display.is-expanded .dial-needle{height:calc(100% + 6px)}
.display.is-expanded .display-footer{flex:none;margin-top:12px}
.display.is-expanded .display-footer .station-origin,.display.is-expanded .display-footer output{font-size:clamp(8px,1.8vmin,14px)}

/* Warm evening colours keep the wooden cabinet and brass hardware intact. */
:root{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark;background:#211e19;color:#e4d7c1;--orange:#dda574}
:root[data-theme=dark] body{background:radial-gradient(ellipse at 50% 32%,#393126 0,transparent 62%),#211e19}
:root[data-theme=dark] .wordmark{color:#e4d7c1}
:root[data-theme=dark] .mark{box-shadow:0 0 0 1px #a990654d;border-radius:10px}
:root[data-theme=dark] .theme-toggle{color:#b9ab94}
:root[data-theme=dark] .help-button,:root[data-theme=dark] .active-listeners{color:#b9ab94}
:root[data-theme=dark] .help-button:hover{background:#e4d7c10a;color:var(--orange)}
:root[data-theme=dark] .help-dialog{--help-surface:#302b23;--help-border:#766750;--help-muted:#beae96;--help-key:#211e19;color:#e4d7c1}
:root[data-theme=dark] .radio{box-shadow:0 28px 42px -22px #000c,0 3px 7px #0006,inset 0 1px 1px #d4a984}
:root[data-theme=dark] .radio-face{--radio-face-background:linear-gradient(125deg,#bcae96,#a29379);background:var(--radio-face-background);border-color:#8b7b61;box-shadow:inset 0 2px 3px #e7dac14d,0 2px 4px #23150d66}
:root[data-theme=dark] .speaker-label{background:#aa9779;color:#352e23}
:root[data-theme=dark] .speaker-label span{color:#493f30}
:root[data-theme=dark] .receiver-top,:root[data-theme=dark] .control-label{color:#463c2d}
:root[data-theme=dark] .step{color:#4f4536}
:root[data-theme=dark] :is(.display,.speaker){--display-edge-top:#514b3b;--display-edge-left:#655b49;--display-edge-bottom:#9f937b;--display-edge-right:#82755f;--display-lip:#fff3}
:root[data-theme=dark] .station-card{background:#302b23;border-color:#514637}
:root[data-theme=dark] .channel-dialog{--help-border:#766750;background:#302b23;color:#e4d7c1;border-color:#766750}
:root[data-theme=dark] .channel-dialog p,:root[data-theme=dark] .channel-dialog label>.optional-field{color:#beae96}
:root[data-theme=dark] .channel-dialog :is(input,select){background:#211e19;border-color:#766750}
:root[data-theme=dark] .toggle-track{background:#433b2e;border-color:#8a785d}
:root[data-theme=dark] .toggle-control input:checked+.toggle-track{background:#746348;border-color:#a99065}
:root[data-theme=dark] .channel-dialog .channel-error{color:#eda680}
:root[data-theme=dark] .channel-form-actions button{border-color:#766750}
:root[data-theme=dark] .channel-form-actions .channel-save{border-color:#ad4e2d}
:root[data-theme=dark] .station-card.selected{background:#3c3226;border-color:#a99065}
:root[data-theme=dark] .station-button small,:root[data-theme=dark] .station-card p,:root[data-theme=dark] .station-source,:root[data-theme=dark] .station-toggle{color:#beae96}
:root[data-theme=dark] .station-index,:root[data-theme=dark] .station-drag-handle{color:#b2a188}
:root[data-theme=dark] .station-selected-dot{background:#766750}
:root[data-theme=dark] .selected .station-selected-dot{background:var(--orange)}
:root[data-theme=dark] .station-ghost{background:#3c3226}
:root[data-theme=dark] .listen-note{color:#beae96}
:root[data-theme=dark] .listen-note.error{color:#eda680}
:root[data-theme=dark] footer{border-color:#514637;color:#beae96}
:root[data-theme=dark] .footer-dot{color:#a99065}

/* Small secondary controls keep the radio face focused on listening. */
[hidden]{display:none!important}
select{font:inherit;color:inherit}
select:focus-visible:where(:root[data-show-focus-indicators=true] *),summary:focus-visible:where(:root[data-show-focus-indicators=true] *){outline:3px solid var(--orange);outline-offset:3px}
.channel-details{margin-top:18px}
.channel-details summary{min-height:44px;padding:12px 0;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;color:inherit}
/* Reserve the info button's height while metadata clears during tuning. */
.display-header{font-size:10px;letter-spacing:.5px;min-height:44px;color:#b4b69c}
.display-header #station-number{margin-left:auto;white-space:nowrap}
.playback-status{white-space:nowrap}
#stream-quality{font-variant-numeric:tabular-nums}
#stream-quality::before{content:'·';margin:0 .6em}
.display-tools{--toolbar-icon-size:24px;display:flex;align-items:center;flex:none;gap:6px}
.display-tools button{display:grid;place-items:center;width:32px;height:36px;border:0;border-radius:4px;background:transparent;color:#e2ce8f;line-height:1;padding:0;text-shadow:none}
.display-tools button svg{width:var(--toolbar-icon-size);height:var(--toolbar-icon-size);max-width:100%;fill:none;pointer-events:none;filter:drop-shadow(0 1px 2px #000b)}
.display .display-tools #speaker-output{width:44px;height:44px;flex:none;touch-action:manipulation}
.display .display-tools #speaker-output[hidden]{display:none}
.display-tools #speaker-output[aria-pressed=true]{background:color-mix(in srgb,currentColor 16%,transparent);box-shadow:inset 0 -2px currentColor}
.display-tools #speaker-output[data-state=connecting]{opacity:.65}
.display-tools .icon-close,.display-tools [aria-pressed="true"] .icon-expand{display:none}
.display-tools [aria-pressed="true"] .icon-close{display:inline}
#display-favorite{--heart-press-glow:#edbb7599}
#display-favorite,#display-favorite svg{overflow:visible}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) #display-favorite{--heart-press-glow:#8ad1fa99}
:root[data-radio-theme=matrix] #display-favorite{--heart-press-glow:#8afa9f99}
.display-tools #display-share[hidden]{display:none}
.display-tools .heart-fill{fill:currentColor;stroke:none;opacity:0}
.display-tools [aria-pressed="true"] .heart-fill{opacity:1}
.display-tools button:hover{background:#e2ce8f18}
.display-tools button:focus-visible:where(:root[data-show-focus-indicators=true] *){outline-color:#e2ce8f;outline-offset:0}
.display-details .station-origin,.display-footer .station-origin{font-size:10px;letter-spacing:.5px}
.display-footer output{font-size:10px}
.control-label{font-size:10px;letter-spacing:1px;color:#514631}
.step{width:30px;height:44px;flex:none;color:#514631}
.tuning-row,.volume-row{min-height:108px}
.push-button{min-height:44px;height:44px}
.eq-profile-controls{display:flex;align-items:center;gap:5px;margin-left:auto;min-width:0;max-width:calc(100% - 78px)}
.equalizer-header #eq-preset{min-width:0;max-width:160px;min-height:32px;font-size:12px;letter-spacing:0}


.equalizer-header button:not([role=option]){min-height:32px;font-size:10px}
.eq-scale,.eq-frequency,.equalizer-footer{font-size:10px;color:#b4b69c}
.eq-band output{font-size:11px}
.equalizer-panel{gap:8px}
.quiet-button{min-height:44px;padding:8px 12px;border:1px solid #b9aa93;border-radius:6px;background:transparent;font-size:12px}
.quiet-button:hover{background:#b9aa931c}
.quiet-button:disabled{opacity:.45;cursor:default}
.channel-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.channel-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.channel-filter-menu{max-height:calc(100dvh - 16px);overflow-y:auto}
#country-filter-menu button{display:flex;align-items:center;gap:10px}
.channel-filters button{text-transform:uppercase}
.channel-filters [hidden]{display:none}
.disabled-stations-controls{display:flex;align-items:flex-start;gap:8px;margin-left:auto}
.disabled-stations-info{display:flex;flex-direction:column;align-items:flex-start}
.channel-visibility-choice{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:12px;cursor:pointer}
#disabled-stations-summary{font-size:12px}
#enable-all-stations{white-space:nowrap;text-transform:none}
.station-genres{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.station-genres:empty{display:none}
.station-genres span{padding:3px 8px;border:1px solid #b9aa9366;border-radius:20px;font-size:10px}
.channel-genres-field{margin:16px 0 0;padding:0;border:0}
.channel-genres-field legend{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.genre-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;margin-top:8px}
.channel-dialog .genre-choice{display:flex;align-items:center;gap:7px;margin:0;min-height:36px;font-weight:400;letter-spacing:normal;text-transform:none}
.channel-dialog .genre-choice input{width:16px;min-height:16px;height:16px;margin:0;padding:0;accent-color:var(--orange)}
@media(max-width:400px){.genre-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
.channel-toolbar h2{margin:0;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}
#channels-heading{white-space:nowrap}
#channel-match-count{margin-left:8px;font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;opacity:.65}
#add-channel{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.channel-toolbar input{margin-left:auto;width:min(220px,40%);min-width:0;min-height:44px;border:1px solid #b9aa93;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:14px;padding:8px 12px}
.small-icon{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#add-channel,:is(#sleep-countdown,#wake-countdown){display:inline-flex;align-items:center;justify-content:center;gap:7px}
#add-channel .small-icon,:is(#sleep-countdown,#wake-countdown) .small-icon{color:var(--orange)}
.channel-toolbar input::-webkit-search-cancel-button{appearance:none;width:14px;height:14px;margin-left:6px;cursor:pointer;background:var(--orange);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 4 8 8m0-8-8 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.station-selection{scroll-margin-top:16px}
.station-card p{font-size:12px;color:#655b4d}
.station-button small,.station-source,.station-toggle{font-size:11px;color:#655b4d}
.station-source{display:inline-flex;align-items:center;min-height:44px}
.station-toggle{min-height:44px}

.station-card-links{display:flex;align-items:center;gap:4px;min-height:44px}
.station-card-footer{gap:4px 8px;flex-wrap:nowrap}
.station-favorite,.station-edit,.station-remove{display:grid;place-items:center;flex:none;width:36px;height:44px;border:0;border-radius:5px;padding:4px;background:transparent;color:var(--orange);font-size:22px}
.station-favorite{margin-left:auto;padding:0}
.station-favorite svg{width:33px;height:32px;fill:currentColor}
.station-favorite .heart-fill{opacity:0}
.station-favorite[aria-pressed="true"] .heart-fill{opacity:1}
.station-favorite:hover,.station-edit:hover,.station-remove:hover{background:#ad4e2d18}
.station-share{display:grid;place-items:center;flex:none;width:36px;height:44px;border:0;border-radius:5px;padding:4px;background:transparent;color:var(--orange)}
.station-share svg{width:22px;height:22px;fill:none}
.station-share:hover{background:#ad4e2d18}
.share-actions{display:flex;gap:12px;align-items:center;margin-top:16px}
.share-actions a{color:inherit}
#share-link{width:100%;padding:10px;font:inherit;user-select:text}
.station-drag-handle{width:30px;height:32px;top:8px;right:7px}
.station-drag-handle:disabled{opacity:.35;cursor:default}
.station-badge{white-space:nowrap;font-size:10px}
.station-index{color:#756953}
.listening-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:24px 0 4px;min-width:0}
.presets{display:flex;gap:7px;overflow-x:auto;min-width:0;padding:4px;flex:1}
.recent-stations{margin-bottom:14px}
.recent-stations h3{margin:0 0 5px;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.recent-stations .presets{flex-wrap:wrap;overflow:visible;padding:0}
.recent-stations .presets button:is(:disabled,[data-filtered=true]){border-style:dashed}
.recent-stations .presets button:disabled{opacity:.5;cursor:default}
.related-stations .presets button{min-height:44px}
.presets button,:is(#sleep-countdown,#wake-countdown){flex:none;min-height:40px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 13px;border:1px solid #b9aa93;border-radius:20px;background:transparent;font-size:12px}
.presets button[aria-pressed=true]{border-color:var(--orange);color:var(--orange);background:#ad4e2d0a}
:is(#favorites-only-choice,#ad-free-only-choice){flex:none;font:inherit;letter-spacing:inherit;white-space:nowrap;margin-block:-10px}
:is(#favorites-only-choice,#ad-free-only-choice) .toggle-track{opacity:.72;filter:saturate(.75)}
:is(#favorites-only-choice,#ad-free-only-choice) input:disabled+.toggle-track{opacity:.45}
:is(#favorites-only-choice,#ad-free-only-choice):has(input:disabled){opacity:.55;cursor:default}
#presets button{touch-action:none;cursor:grab}
#presets button.reordering{position:absolute;visibility:hidden;pointer-events:none;cursor:grabbing}
.favorite-placeholder{display:block;flex:none;border:1px dashed color-mix(in srgb,var(--help-border) 55%,transparent);border-radius:20px}
.favorite-ghost{position:fixed;display:inline-flex;align-items:center;gap:7px;z-index:1200;pointer-events:none;padding:8px 13px;min-height:40px;border:1px solid var(--help-border);border-radius:20px;background:color-mix(in srgb,var(--help-key) 94%,currentColor 6%);font:inherit;font-size:12px;box-shadow:0 4px 12px #0003}
#presets{--help-border:#b9aa93;--help-key:#e9e1d3;flex-wrap:wrap;overflow:visible}
#presets button{display:inline-flex;align-items:center;gap:7px}
#presets button{min-height:44px}
#presets .preset-logo,.favorite-ghost .preset-logo{width:24px;height:24px;flex:none;padding:1px;border-radius:3px}
:root:has(#display[data-state=playing]) #presets button[aria-pressed=true]{box-shadow:0 0 7px 1px var(--station-focus-glow,#edbb7555)}
#presets .preset-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
#presets kbd{flex:none}
:root[data-theme=dark] #presets{--help-border:#766750;--help-key:#211e19}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight],[data-radio-theme=matrix]) #presets{--help-border:var(--metal-border);--help-key:var(--metal-key)}
:is(#sleep-countdown,#wake-countdown){font-variant-numeric:tabular-nums;align-self:flex-start;margin-top:4px}
#wake-countdown{margin-left:auto}
#wake-countdown[hidden]+#sleep-countdown{margin-left:auto}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dialog-heading h2{margin:0}

.options-dialog .option-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;margin:0;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.backup-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.options-dialog .option-row:has(.backup-actions){flex-wrap:wrap}
#reset-description{font-size:13px;line-height:1.6}
.sleep-choice,.sleep-menu{border:1px solid #b9aa93;border-radius:6px;background:#f6efe3;color:#332e28;font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase}
.sleep-choice{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:92px;min-height:44px;padding:8px 12px}
.dropdown-chevron{width:18px;height:18px;flex:none}
.sleep-menu{position:fixed;inset:auto;margin:0;padding:4px;min-width:92px;box-shadow:0 6px 20px #0003}
.sleep-menu button{display:block;width:100%;min-height:40px;padding:8px 12px;border:0;border-radius:3px;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:uppercase;text-align:left}
.sleep-menu button:disabled{opacity:.5;cursor:default}
.sleep-menu button[aria-selected=true]{color:var(--orange);font-weight:600}
.sleep-menu button:not(:disabled):hover,.sleep-menu button:not(:disabled):focus:where(:root[data-show-focus-indicators=true] *){background:#e4d1b8;color:#332e28;outline:none}
:root[data-theme=dark] .sleep-choice,:root[data-theme=dark] .sleep-menu{border-color:#8a785d;background:#302b23;color:#e4d7c1}
:root[data-theme=dark] .sleep-menu button:not(:disabled):hover,:root[data-theme=dark] .sleep-menu button:not(:disabled):focus:where(:root[data-show-focus-indicators=true] *){background:#594733;color:#f4e6cf}
.option-row .quiet-button{border:0;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.options-dialog #import-preview{margin-top:18px}
.options-dialog #import-preview p{margin:8px 0}
.listen-note{font-size:12px}
.undo-notice{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:1100;display:flex;align-items:center;gap:12px;max-width:calc(100% - 24px);padding:6px 12px 6px 18px;border:1px solid #b9aa93;border-radius:10px;background:#f6efe3;color:#332e28;box-shadow:0 5px 25px #0003;font-size:13px;white-space:nowrap}
.undo-notice button{min-height:44px;padding:8px;border:0;background:transparent;color:var(--orange)}
#undo-dismiss{display:inline-flex;align-items:center;justify-content:center;min-width:44px}
.compact-view .speaker{display:none}
.compact-view .radio-face{grid-template-columns:1fr}
.compact-view main{max-width:790px}
.compact-view .radio .display:not(.is-expanded) h2{font-size:clamp(25px,5vw,39px);min-height:0!important}
.compact-view .display:not(.is-expanded) .tuning-scale{height:30px}
.compact-view .radio-face{gap:0}
.compact-view .receiver>.display:not(.is-expanded){margin-inline:calc(var(--display-panel-gutter) - var(--face-inset-x))}
.is-expanded .display-tools button{width:44px;height:44px}
.is-expanded .display-tools,#artwork-viewer .display-tools{--toolbar-icon-size:28px}
.is-expanded .fullscreen-button{position:relative;z-index:1}
:root[data-theme=dark] .quiet-button,:root[data-theme=dark] .channel-toolbar input,:root[data-theme=dark] .presets button,:root[data-theme=dark] :is(#sleep-countdown,#wake-countdown){border-color:#8a785d}
:root[data-theme=dark] .undo-notice{background:#302b23;border-color:#8a785d;color:#e4d7c1}
:root[data-theme=dark] .control-label,:root[data-theme=dark] .step{color:#302819}
:root[data-theme=dark] .channel-toolbar input::placeholder{color:#beae96}
@media(min-width:681px) and (max-width:900px){:root{--dial-size:88px}.step{width:24px}.radio-face{--face-inset-x:20px;--face-inset-y:15px;gap:18px;padding:15px 20px;grid-template-columns:24% 1fr}.tuning-row,.volume-row{gap:0}.control-label{font-size:9px}}
@media(max-width:680px){.radio-face{grid-template-columns:1fr}.speaker{order:2;min-height:100px;height:130px}.speaker-bay{min-height:65px}.speaker.is-open{height:auto}.speaker.is-open .speaker-bay{min-height:0;flex:none;aspect-ratio:1.75}.speaker-mount{height:100%;aspect-ratio:auto}.speaker-dustcap{width:18%}.speaker-label{padding:10px 12px}.speaker-label span{display:inline;margin-left:8px}}
@media(max-width:680px){.display-details{font-size:18px}}
@media(max-width:520px){
 :root{--dial-size:clamp(58px,17vw,88px)}
 .controls{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);gap:4px}
 .tuning-row,.volume-row{gap:0;min-height:108px}
 .step{width:24px;height:44px;padding:0}
 .power{width:36px;height:36px}
 .power-section{gap:8px}
 .secondary-controls{gap:4px}
 .control-label{font-size:9px;letter-spacing:.5px}
 .push-button{gap:5px;margin-right:0;padding-right:0}
 .mute-cap{width:30px;height:30px}
 .display-header{font-size:9px;gap:4px;letter-spacing:0}
 .display-header .signal{display:none}
 .display-details .station-origin,.display-footer .station-origin{font-size:10px;letter-spacing:.2px}
 .display-footer output{font-size:10px}
 .display-tools button{width:28px;height:36px}
 .channel-toolbar{gap:8px;flex-wrap:wrap}
 .channel-toolbar input{flex:1;min-width:90px}
 .station-card p{font-size:12px}
 .listen-note{font-size:12px}
 .speaker{height:110px}
 .equalizer-panel{padding:10px 8px}
 .equalizer-header{gap:5px}

 .eq-frequency{font-size:9px}
 .listening-bar{flex-wrap:wrap;gap:5px}
 .presets{flex-basis:100%}
 .header-actions{gap:3px}
 .theme-toggle{font-size:9px}
 .help-button,.active-listeners{font-size:10px}
}
@media(max-width:360px){.controls{grid-template-columns:44px minmax(0,1fr)}.power-section{grid-row:1/3}.volume-section{grid-column:2;grid-row:2}.volume-row{min-height:80px}.volume-step{width:44px}.secondary-controls{grid-column:1/-1;grid-row:3}.display{padding-inline:8px}.display-tools button{width:26px}}

/* Give touch controls room without crowding the status line or clipping buttons. */
@media(any-pointer:coarse),(max-width:600px){
 .display-tools{--toolbar-icon-size:26px;gap:12px}
 .display .display-tools button{width:44px;height:44px;flex:none;touch-action:manipulation}
 .sleep-menu button,.visualization-menu-list button{min-height:48px;touch-action:manipulation}
 .equalizer-header button:not([role=option]),.equalizer-header #eq-preset{min-height:44px;touch-action:manipulation}
 .eq-profile-controls{gap:8px}
 .sleep-choice{touch-action:manipulation}
}
@media(max-width:600px){
 .display .display-header{gap:6px}
 .display-header .signal{display:none}
 .display-header .playback-status{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .display:not(.is-expanded){padding-inline:8px}
}
@media(max-width:360px){
 .display .display-header{flex-wrap:wrap;row-gap:8px}
 .display-header .display-tools{flex-basis:100%;justify-content:flex-end}
}

/* Keep the radio height, but reclaim unused station-name space for text. */
.display:not(.is-expanded)[data-old-eyes]{height:var(--old-eyes-height);display:flex;flex-direction:column}
.display:not(.is-expanded)[data-old-eyes] .station-name{height:auto;flex:none}
.display[data-old-eyes] .display-header,.display[data-old-eyes] .tuning-scale,.display[data-old-eyes] .display-footer{flex:none}
.display[data-old-eyes] .display-details{position:relative;flex:1;min-height:0;height:auto}
.display[data-old-eyes] .display-details .now-playing,.display[data-old-eyes] .display-details .station-origin{position:absolute;top:0;left:0;width:100%;display:block;-webkit-line-clamp:unset;overflow:visible;overflow-wrap:anywhere;font-size:var(--old-eyes-size,1px);line-height:1.1;letter-spacing:0;margin:0}
.display[data-old-eyes] .display-details .now-playing[hidden],.display[data-old-eyes] .display-details .station-origin[hidden]{display:none}

.direct-note { margin: 0; text-align: center; font-size: .75rem; }
.equalizer-bands input:disabled { opacity: .4; cursor: default; }

.eq-profile-controls>button{flex:none}
.eq-profile-controls #eq-preset{flex:0 1 auto}
.receiver{container:receiver/inline-size}
.equalizer-heading{display:flex;align-items:center;gap:12px;flex:none}
.eq-advanced{display:flex;align-items:center;gap:8px;min-height:44px;font-size:11px;letter-spacing:0;color:inherit}
.eq-advanced .toggle-track{margin-right:5px}
.equalizer-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
.equalizer-header .eq-profile-controls{max-width:none;margin-left:0;justify-content:flex-end}
.equalizer-header button:not([role=option]),.equalizer-header #eq-preset{min-width:44px;min-height:44px}
.equalizer-bands[data-model=seven]{grid-template-columns:repeat(7,minmax(44px,1fr));gap:4px}
#eq-preset-menu button{display:flex;align-items:center;gap:16px;max-width:320px}
.eq-option-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.eq-profile-model{flex:none;margin-left:auto;opacity:.75;font-size:10px;text-transform:none}
@container receiver (max-width:540px){
 .equalizer-header{grid-template-columns:minmax(0,1fr) auto}
 .equalizer-header .eq-profile-controls{grid-column:1/-1;grid-row:2;justify-content:center;width:100%}
 .equalizer-header #equalizer-reset{grid-column:2;grid-row:1}
 .display.is-equalizer{min-height:310px}
}
@container receiver (max-width:420px){
 .display.is-equalizer[data-eq-model=seven]{min-height:440px}
 .display.is-equalizer[data-eq-model=seven]:has(.direct-note:not([hidden])){min-height:485px}
 .equalizer-panel:has([data-model=seven]) :is(.eq-scale,.equalizer-footer){display:none}
 .equalizer-bands[data-model=seven]{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(125px,1fr));gap:18px 4px}
 .equalizer-bands[data-model=seven]:before{display:none}
 .equalizer-bands[data-model=seven] .eq-band{grid-column:span 3}
 .equalizer-bands[data-model=seven] .eq-band:nth-child(n+5){grid-column:span 4}
 .equalizer-bands[data-model=seven] .eq-track{min-height:80px}
}
@container receiver (max-width:300px){
 .equalizer-panel .eq-scale,.equalizer-panel .equalizer-footer{display:none}
 .equalizer-bands[data-model=five]{gap:2px}
 .equalizer-heading{gap:8px}
}
#eq-preset-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#eq-preset-menu{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto}
#eq-preset-menu button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#eq-profile-description{overflow-wrap:anywhere}
@media(max-width:380px){.equalizer-header{gap:4px}.equalizer-header button:not([role=option]){padding:5px;font-size:9px}.eq-profile-controls{gap:4px;max-width:calc(100% - 65px)}}

/* Radio finishes share cool controls; Midnight always uses dark mode. */
#radio-theme{min-width:0;max-width:100%;text-transform:none;letter-spacing:0;gap:10px}
#radio-theme-menu{max-width:calc(100vw - 16px);text-transform:none;letter-spacing:0}
#radio-theme-menu button{white-space:nowrap}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]){--orange:#2376a5;--metal-page:#e6ebf0;--metal-surface:#f4f7fa;--metal-text:#283543;--metal-muted:#586b7b;--metal-border:#a9b6c2;--metal-hover:#d6e5ef;--metal-key:#e0e7ed;background:var(--metal-page);color:var(--metal-text);scrollbar-color:var(--metal-border) var(--metal-page)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight])[data-theme=dark]{--orange:#88c9ef;--metal-page:#191f27;--metal-surface:#252e39;--metal-text:#e1ebf3;--metal-muted:#a7b9c9;--metal-border:#536679;--metal-hover:#344b60;--metal-key:#191f27}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) body{background:radial-gradient(ellipse at 50% 32%,#ffffff20 0,transparent 62%),var(--metal-page)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.wordmark,.channel-dialog,.help-dialog,.radio-tooltip){color:var(--metal-text)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.help-button,.active-listeners,.theme-toggle,.station-button small,.station-card p,.station-source,.station-toggle,.station-index,.station-drag-handle,.listen-note,footer,.channel-dialog p,.channel-dialog label>.optional-field){color:var(--metal-muted)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(button,a,input,.knob,.display,.station-card):focus-visible:where(:root[data-show-focus-indicators=true] *){outline-color:var(--orange)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .help-button:hover{color:var(--orange);background:var(--metal-hover)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .radio{background:repeating-linear-gradient(0deg,#ffffff0c 0 1px,#1e334a0b 1px 2px,transparent 2px 4px),linear-gradient(110deg,#758390,#dce3e9 25%,#a4b1bf 55%,#e9eef2 76%,#7f8e9d);border-color:#637586;box-shadow:0 28px 42px -22px #0009,0 3px 7px #0004,inset 0 1px 1px #fff}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .radio-face{--radio-face-background:repeating-linear-gradient(0deg,#ffffff0d 0 1px,#21374a08 1px 2px,transparent 2px 4px),linear-gradient(125deg,#edf2f5,#bfcbd5);background:var(--radio-face-background);border-color:#8e9eac;box-shadow:inset 0 2px 3px #fff9,0 2px 4px #17212c66}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .panel-screw{background:radial-gradient(circle at 32% 25%,#fff,#cbd6df 36%,#8395a4 70%,#4e6171);border-color:#738595;box-shadow:0 1px 1px #fff9,inset 0 -1px 1px #26384980}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .panel-screw:after{background:#425566;box-shadow:0 1px 0 #fff8}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .speaker{background:#29333d}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .speaker-fabric{background:radial-gradient(circle,#101820 0 1px,transparent 1.5px) 0 0/5px 5px,linear-gradient(125deg,#4c5864,#27323e);box-shadow:inset 0 0 18px #10192399}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .speaker-drivers{background:linear-gradient(105deg,#3b4856,#202933)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .speaker-mount:before{background:linear-gradient(135deg,#8d9ba8,#374655 45%,#17212c);border-color:#7c8e9e}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .speaker-dustcap{background:radial-gradient(circle at 35% 25%,#637585,#2c3a47 60%,#14212c);border-color:#101b25}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .speaker-label{background:linear-gradient(120deg,#c6d2dc,#a5b5c3);color:#273a4b}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.speaker-label span,.receiver-top,.control-label,.step,output){color:#43586a}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.display,.speaker){--display-edge-top:#354651;--display-edge-left:#51616a;--display-edge-bottom:#bdcad2;--display-edge-right:#899da9;--display-lip:#ffffff80;}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .display{background:linear-gradient(120deg,#182d3d,#0e1c28);color:#c2e8fc}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .display :is(.display-header,.station-origin,.display-footer output,.stream-badges){color:#91b3c9}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.now-playing,#voice-indicator){color:#c2e8fc}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) #voice-indicator{background:#8ad1fa18;border-color:#8ad1fa66}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .display h2{font-family:'DM Sans',Arial,sans-serif;font-weight:600;text-shadow:0 1px 3px #0e1c28,0 0 16px #8ad1fa22}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.display-header,.display>h2,.display-details){text-shadow:0 1px 3px #0e1c28,0 0 6px #0e1c28}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .frequency-display span{background:#82b7d4}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .signal i{background:#7297ae}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .display[data-state=playing] .signal i{background:#b6e3fd}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .tuning-scale{border-color:#82b7d466}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .dial-needle{background:#b9e7ff;box-shadow:0 0 8px #69c7ff99}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .knob-surround{background:linear-gradient(130deg,#f2f6f9,#8fa2b2);box-shadow:0 0 0 1px #fff8,inset 0 2px 4px #344c6340}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .knob{background:repeating-conic-gradient(#b8c5cf 0deg 2deg,#627688 2deg 4deg);border-color:#536778}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .knob-cap{background:radial-gradient(circle at 35% 25%,#fff,#c1ced8 45%,#8095a6);box-shadow:inset 0 1px 2px #fff8,inset 0 -3px 4px #172b3f55}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .knob-pointer{background:#284f6e;box-shadow:0 0 3px #fff4}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]){--power-edge-highlight:#bdd8ea80;--recovery-edge-highlight:#bdd8ea55;--knob-center-highlight:#bdd8ea40}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .knob-center{background:linear-gradient(#d8e2e9,#7d92a3)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.power,.mute-cap){background:linear-gradient(135deg,#526b7f,#243848);border-color:#b5c5d1}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .power svg{stroke:#b8d4e5}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .control-button[aria-pressed=true] .power svg{stroke:#8ad1fa}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) #power[aria-pressed=true] .power{box-shadow:0 3px 4px #172b3f40,inset 0 1px 1px var(--power-edge-highlight),0 0 10px 3px #8ad1fa55}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .push-button[aria-pressed=true] .mute-cap{background:radial-gradient(circle,#1b3041,#415b70);box-shadow:0 0 0 2px #a6bccd,inset 0 2px 3px #081524cc}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(#channels,#songs,#equalizer)[aria-pressed=true] .mute-cap{box-shadow:0 0 0 2px #a6bccd,inset 0 2px 3px #081524cc,0 0 10px 3px #8ad1fa55}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .push-button[aria-pressed=true] .mute-cap:after,:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .power-light.on{background:#8ad1fa;box-shadow:0 0 8px #69c7ff99}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .power-light.on.direct-playing{background:#1685ff;box-shadow:0 0 4px #1685ff,0 0 10px 2px #087cffbb,0 0 18px 4px #006aff66}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .radio-bottom{color:#253d50}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .radio-foot{background:linear-gradient(#1e2a36,#465c6e)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.station-card,.station-ghost,.undo-notice){background:var(--metal-surface);border-color:var(--metal-border);color:var(--metal-text)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .station-card.selected{background:var(--metal-hover);border-color:var(--orange)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .station-button .custom-channel-name{color:var(--orange)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .station-selected-dot{background:var(--metal-border)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .selected .station-selected-dot{background:var(--orange)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.channel-dialog,.help-dialog){--help-surface:var(--metal-surface);--help-border:var(--metal-border);--help-muted:var(--metal-muted);--help-key:var(--metal-key);background:var(--metal-surface);border-color:var(--metal-border)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.channel-dialog,.help-dialog)::backdrop{background:#101c2aaa}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.sleep-choice,.sleep-menu,.channel-dialog :is(input,select),.channel-toolbar input){background:var(--metal-surface);border-color:var(--metal-border);color:var(--metal-text)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .sleep-menu button:not(:disabled):is(:hover,:focus:where(:root[data-show-focus-indicators=true] *)){background:var(--metal-hover);color:var(--metal-text)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .radio-tooltip{--help-border:var(--metal-border);--help-key:var(--metal-key);background:var(--metal-surface);border-color:var(--metal-border);box-shadow:0 4px 12px #172b3f26}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .radio-tooltip-content{background:transparent}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.visualization-menu-list,.sleep-menu,.dialog-scroll,.help-content){scrollbar-color:var(--metal-border) var(--metal-surface)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .visualization-menu-list button:is(:hover,:focus-visible:where(:root[data-show-focus-indicators=true] *)){background:var(--metal-hover);color:var(--metal-text)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.toggle-track,.theme-track){background:#94a7b8;border-color:#728a9f}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.toggle-track,.theme-track):after{background:radial-gradient(circle at 35% 25%,#fff,#a4bacb)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .toggle-control input:checked+.toggle-track,:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .theme-toggle[aria-checked=true] .theme-track{background:#426e90;border-color:#81b9df}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.option-row,footer,.quiet-button,.presets button,.channel-form-actions button,:is(#sleep-countdown,#wake-countdown)){border-color:var(--metal-border)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .presets button[aria-pressed=true]{background:var(--metal-hover)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .channel-toolbar input::placeholder{color:var(--metal-muted)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .footer-dot{color:var(--metal-muted)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) #voice-toggle[aria-pressed=true]{color:var(--orange);background:var(--metal-hover)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .mute-cap{box-shadow:0 2px 2px #172b3f66,0 0 0 2px #a6bccd,inset 0 1px 1px #fff7}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .mute-cap:after{background:#a6c9df}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .push-button:hover .mute-cap{border-color:#4b88af}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.display-tools button,.display-tools .advertising-indicator,.equalizer-header,.equalizer-header button:not([role=option]),.eq-band output){color:#c2e8fc}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.display-tools button,.display-tools .advertising-indicator,.equalizer-header button:not([role=option])):hover{background:#8ad1fa18}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .display-tools button:focus-visible:where(:root[data-show-focus-indicators=true] *){outline-color:#c2e8fc}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .equalizer-header button:not([role=option]){background:#8ad1fa0a;border-color:#82b7d466}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .eq-track input::-webkit-slider-thumb{border-color:#b6e3fd;background:linear-gradient(#c2e8fc,#5484a0);box-shadow:0 1px 4px #0008,0 0 5px #8ad1fa22}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .eq-track input::-moz-range-thumb{border-color:#b6e3fd;background:linear-gradient(#c2e8fc,#5484a0)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(#power.power-hint[aria-pressed=false] .power,#mute[aria-pressed=true] .mute-cap,#volume-knob.zero-volume){animation-name:metal-power-hint}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) #mute[aria-pressed=true] .mute-cap{--hint-button-shadow:0 0 0 2px #a6bccd,inset 0 2px 3px #081524cc}
@keyframes metal-power-hint{0%,100%{box-shadow:var(--hint-button-shadow,0 3px 4px #172b3f40,inset 0 1px 1px var(--power-edge-highlight,#bdd8ea80)),0 0 5px 2px #8ad1fa20}50%{box-shadow:var(--hint-button-shadow,0 3px 4px #172b3f40,inset 0 1px 1px var(--power-edge-highlight,#bdd8ea80)),0 0 14px 5px #8ad1fa80}}
#radio-theme-menu button{text-transform:none}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black]) .speaker-driver>ellipse:first-child{fill:#111c24;stroke:#8095a6}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black]) #driver-surround stop:nth-child(1){stop-color:#17242e}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black]) #driver-surround stop:nth-child(2){stop-color:#465b6b}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black]) #driver-surround stop:nth-child(3){stop-color:#101c25}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black]) #driver-surround stop:nth-child(4){stop-color:#30424f}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black]) #driver-paper stop:nth-child(1){stop-color:#718796}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black]) #driver-paper stop:nth-child(2){stop-color:#465d6d}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black]) #driver-paper stop:nth-child(3){stop-color:#223440}
:root[data-radio-theme=midnight] .speaker-driver>ellipse:first-child{fill:#08111d;stroke:#405872}
:root[data-radio-theme=midnight] #driver-surround stop:nth-child(1){stop-color:#0c192a}
:root[data-radio-theme=midnight] #driver-surround stop:nth-child(2){stop-color:#2d4560}
:root[data-radio-theme=midnight] #driver-surround stop:nth-child(3){stop-color:#071321}
:root[data-radio-theme=midnight] #driver-surround stop:nth-child(4){stop-color:#1c3048}
:root[data-radio-theme=midnight] #driver-paper stop:nth-child(1){stop-color:#45617e}
:root[data-radio-theme=midnight] #driver-paper stop:nth-child(2){stop-color:#293f59}
:root[data-radio-theme=midnight] #driver-paper stop:nth-child(3){stop-color:#111f32}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) :is(.eq-scale,.eq-frequency,.equalizer-footer){color:#91b3c9}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .equalizer-bands:before{background:#82b7d455}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .eq-track input::-webkit-slider-runnable-track{background:linear-gradient(90deg,#0e1c28,#2c465a);border-color:#82b7d44d}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .eq-track input::-moz-range-track{background:#1b3041;border-color:#82b7d44d}

:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .mark{border-radius:10px;box-shadow:0 0 0 1px #8fa2b266,0 2px 4px #172b3f22}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .mark-tile{fill:url(#metallic-logo)}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .mark-letter{stroke:#284f6e}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .mark-bars{stroke:#2376a5}

/* Modern black: glossy black metal hardware with the modern blue display. */
:root[data-radio-theme=modern-black] .radio{background:repeating-linear-gradient(0deg,#ffffff04 0 1px,#0002 1px 2px,transparent 2px 4px),linear-gradient(110deg,#030405,#303338 24%,#08090b 48%,#202328 73%,#020304);border-color:#42474e;box-shadow:0 28px 42px -22px #000c,0 3px 7px #0008,inset 0 1px 1px #ffffff66}
:root[data-radio-theme=modern-black] .radio-face{--radio-face-background:linear-gradient(155deg,#ffffff14,transparent 32%),repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 4px),linear-gradient(125deg,#23262b,#090a0d 58%,#17191d);background:var(--radio-face-background);border-color:#464b52;box-shadow:inset 0 2px 3px #ffffff25,0 2px 4px #0009}
:root[data-radio-theme=modern-black] .panel-screw{background:radial-gradient(circle at 32% 25%,#949ba3,#3a3e45 36%,#15171b 70%,#050607);border-color:#555c65;box-shadow:0 1px 1px #ffffff30,inset 0 -1px 1px #0009}
:root[data-radio-theme=modern-black] .panel-screw:after{background:#07080a;box-shadow:0 1px 0 #ffffff40}
:root[data-radio-theme=modern-black] .speaker{background:#08090b}
:root[data-radio-theme=modern-black] .speaker-fabric{background:radial-gradient(circle,#030405 0 1px,transparent 1.5px) 0 0/5px 5px,linear-gradient(125deg,#303238,#101114);box-shadow:inset 0 0 18px #000b}
:root[data-radio-theme=modern-black] .speaker-drivers{background:linear-gradient(105deg,#25282d,#07080a)}
:root[data-radio-theme=modern-black] .speaker-mount:before{background:linear-gradient(135deg,#626870,#23262b 45%,#07080a);border-color:#535a63}
:root[data-radio-theme=modern-black] .speaker-dustcap{background:radial-gradient(circle at 35% 25%,#5a6069,#23262c 60%,#0a0b0e);border-color:#050607}
:root[data-radio-theme=modern-black] .speaker-driver>ellipse:first-child{fill:#08090b;stroke:#626a74}
:root[data-radio-theme=modern-black] #driver-surround stop:nth-child(1){stop-color:#111216}
:root[data-radio-theme=modern-black] #driver-surround stop:nth-child(2){stop-color:#41464e}
:root[data-radio-theme=modern-black] #driver-surround stop:nth-child(3){stop-color:#08090b}
:root[data-radio-theme=modern-black] #driver-surround stop:nth-child(4){stop-color:#292d33}
:root[data-radio-theme=modern-black] #driver-paper stop:nth-child(1){stop-color:#69717b}
:root[data-radio-theme=modern-black] #driver-paper stop:nth-child(2){stop-color:#3d444d}
:root[data-radio-theme=modern-black] #driver-paper stop:nth-child(3){stop-color:#191c22}
:root[data-radio-theme=modern-black] .speaker-label{background:linear-gradient(120deg,#34383f,#141619);color:#e1e6ec}
:root[data-radio-theme=modern-black] :is(.speaker-label span,.receiver-top,.control-label,.step,output,.radio-bottom){color:#b9c2cc}
:root[data-radio-theme=modern-black] :is(.display,.speaker){--display-edge-top:#050709;--display-edge-left:#111820;--display-edge-bottom:#4a5056;--display-edge-right:#292f36;--display-lip:#ffffff18}
:root[data-radio-theme=modern-black] .knob-surround{background:linear-gradient(130deg,#626871,#111318);box-shadow:0 0 0 1px #a1abb455,inset 0 2px 4px #0009}
:root[data-radio-theme=modern-black] .knob{background:repeating-conic-gradient(#454b54 0deg 2deg,#14161b 2deg 4deg);border-color:#535b65}
:root[data-radio-theme=modern-black] .knob-cap{background:radial-gradient(circle at 35% 25%,#747c87,#292d34 45%,#090b0e);box-shadow:inset 0 1px 2px #ffffff55,inset 0 -3px 4px #0009}
:root[data-radio-theme=modern-black] .knob-pointer{background:#c2e8fc;box-shadow:0 0 3px #8ad1fa55}
:root[data-radio-theme=modern-black] .knob-center{background:linear-gradient(#515963,#101216)}
:root[data-radio-theme=modern-black] :is(.power,.mute-cap){background:linear-gradient(135deg,#3c424b,#080a0e);border-color:#707c89}
:root[data-radio-theme=modern-black] .mute-cap{box-shadow:0 2px 2px #0009,0 0 0 2px #484f59,inset 0 1px 1px #ffffff40}
:root[data-radio-theme=modern-black] #mute[aria-pressed=true] .mute-cap{--hint-button-shadow:0 0 0 2px #707c89,inset 0 2px 3px #000c}
:root[data-radio-theme=modern-black] .push-button[aria-pressed=true] .mute-cap{background:radial-gradient(circle,#0a1017,#303c48);box-shadow:0 0 0 2px #707c89,inset 0 2px 3px #000c}
:root[data-radio-theme=modern-black] :is(#channels,#songs,#equalizer)[aria-pressed=true] .mute-cap{box-shadow:0 0 0 2px #707c89,inset 0 2px 3px #000c,0 0 10px 3px #8ad1fa55}
:root[data-radio-theme=modern-black] .radio-foot{background:linear-gradient(#030405,#30343b)}
/* Midnight: charcoal cabinet, navy faceplate, and icy blue details. */
:root[data-radio-theme=midnight][data-theme=dark]{--orange:#8acfff;--metal-page:#0b1019;--metal-surface:#141e2d;--metal-text:#e3edf8;--metal-muted:#a5b7ce;--metal-border:#40546c;--metal-hover:#22354c;--metal-key:#0b1019}
:root[data-radio-theme=midnight] body{background:radial-gradient(ellipse at 50% 32%,#21344b66 0,transparent 62%),var(--metal-page)}
:root[data-radio-theme=midnight] .radio{background:repeating-linear-gradient(0deg,#ffffff03 0 1px,#0002 1px 2px,transparent 2px 4px),linear-gradient(110deg,#0a0e15,#263140 25%,#101722 55%,#253040 76%,#080c13);border-color:#34445a;box-shadow:0 28px 42px -22px #000e,0 3px 7px #0009,inset 0 1px 1px #7a94b455}
:root[data-radio-theme=midnight] .radio-face{--radio-face-background:linear-gradient(125deg,#1c293b,#111b29);background:var(--radio-face-background);border-color:#3d5068;box-shadow:inset 0 2px 3px #8acfff12,0 2px 4px #0009}
:root[data-radio-theme=midnight] .panel-screw{background:radial-gradient(circle at 32% 25%,#73869d,#344357 36%,#172333 70%,#080e18);border-color:#40546c;box-shadow:0 1px 1px #8acfff22,inset 0 -1px 1px #0008}
:root[data-radio-theme=midnight] .panel-screw:after{background:#0b1019;box-shadow:0 1px 0 #8acfff22}
:root[data-radio-theme=midnight] .speaker{background:#0b121e}
:root[data-radio-theme=midnight] .speaker-fabric{background:radial-gradient(circle,#05090f 0 1px,transparent 1.5px) 0 0/5px 5px,linear-gradient(125deg,#28364a,#0d1522);box-shadow:inset 0 0 18px #0009}
:root[data-radio-theme=midnight] .speaker-drivers{background:linear-gradient(105deg,#1b293b,#0a111d)}
:root[data-radio-theme=midnight] .speaker-label{background:linear-gradient(120deg,#24354b,#141e2d);color:#e3edf8}
:root[data-radio-theme=midnight] :is(.speaker-label span,.receiver-top,.control-label,.step,output,.radio-bottom){color:#a5b7ce}
:root[data-radio-theme=midnight] :is(.display,.speaker){--display-edge-top:#040912;--display-edge-left:#0b1623;--display-edge-bottom:#2e4154;--display-edge-right:#1c2d3f;--display-lip:#8acfff12;}
:root[data-radio-theme=midnight] .display{background:linear-gradient(120deg,#0b1b2b,#060e19)}
:root[data-radio-theme=midnight] .knob-surround{background:linear-gradient(130deg,#35485f,#101b2a);box-shadow:0 0 0 1px #536b8580,inset 0 2px 4px #0008}
:root[data-radio-theme=midnight] .knob{background:repeating-conic-gradient(#3d5068 0deg 2deg,#152233 2deg 4deg);border-color:#40546c}
:root[data-radio-theme=midnight] .knob-cap{background:radial-gradient(circle at 35% 25%,#4a607a,#25354b 45%,#0f1928);box-shadow:inset 0 1px 2px #8acfff33,inset 0 -3px 4px #0008}
:root[data-radio-theme=midnight] .knob-pointer{background:#8acfff;box-shadow:0 0 4px #8acfff66}
:root[data-radio-theme=midnight] .knob-center{background:linear-gradient(#35485f,#111d2c)}
:root[data-radio-theme=midnight] :is(.power,.mute-cap){background:linear-gradient(135deg,#2c4058,#0c1623);border-color:#607f9e}
:root[data-radio-theme=midnight] .mute-cap{box-shadow:0 2px 2px #0008,0 0 0 2px #40546c,inset 0 1px 1px #8acfff33}
:root[data-radio-theme=midnight] #mute[aria-pressed=true] .mute-cap{--hint-button-shadow:0 0 0 2px #607f9e,inset 0 2px 3px #000c}
:root[data-radio-theme=midnight] .push-button[aria-pressed=true] .mute-cap{background:radial-gradient(circle,#091421,#28435e);box-shadow:0 0 0 2px #607f9e,inset 0 2px 3px #000c}
:root[data-radio-theme=midnight] :is(#channels,#songs,#equalizer)[aria-pressed=true] .mute-cap{box-shadow:0 0 0 2px #607f9e,inset 0 2px 3px #000c,0 0 10px 3px #8ad1fa55}
:root[data-radio-theme=midnight] .radio-foot{background:linear-gradient(#070c14,#233247)}
:root[data-radio-theme=midnight] .radio-tooltip{box-shadow:0 4px 12px #0005}
:root[data-radio-theme=midnight] :is(.toggle-track,.theme-track){background:#18283c;border-color:#607f9e}
:root[data-radio-theme=midnight] :is(.toggle-track,.theme-track):after{background:radial-gradient(circle at 35% 25%,#e3edf8,#7fa6c8)}
:root[data-radio-theme=midnight] .theme-toggle:disabled{opacity:.7;cursor:default}
:root[data-radio-theme=midnight] .mark{box-shadow:0 0 0 1px #40546c,0 2px 4px #0005}
:root[data-radio-theme=midnight] .mark-tile{fill:#141e2d}
:root[data-radio-theme=midnight] .mark-letter{stroke:#e3edf8}
:root[data-radio-theme=midnight] .mark-bars{stroke:#8acfff}
:root[data-radio-theme=midnight] .speaker-mount:before{background:linear-gradient(135deg,#42566e,#1c2b3e 45%,#09111d);border-color:#40546c}
:root[data-radio-theme=midnight] .speaker-dustcap{background:radial-gradient(circle at 35% 25%,#425c77,#1b2b40 60%,#0b1422);border-color:#0b1019}
:root[data-radio-theme=midnight] .channel-form-actions .channel-save{background:#8acfff;color:#0b1019;border-color:#8acfff}

/* Matrix: black-green hardware and phosphor terminal details. */
:root[data-radio-theme=matrix]{--orange:#66ff88;--metal-page:#030805;--metal-surface:#0b1b10;--metal-text:#d7ffe1;--metal-muted:#90b99a;--metal-border:#31593b;--metal-hover:#143720;--metal-key:#030805;background:var(--metal-page);color:var(--metal-text);scrollbar-color:var(--metal-border) var(--metal-page)}
:root[data-radio-theme=matrix] body{background:radial-gradient(ellipse at 50% 32%,#214b2966 0,transparent 62%),var(--metal-page)}
:root[data-radio-theme=matrix] :is(.wordmark,.channel-dialog,.help-dialog,.radio-tooltip){color:var(--metal-text)}
:root[data-radio-theme=matrix] :is(.help-button,.active-listeners,.theme-toggle,.station-button small,.station-card p,.station-source,.station-toggle,.station-index,.station-drag-handle,.listen-note,footer,.channel-dialog p,.channel-dialog label>.optional-field){color:var(--metal-muted)}
:root[data-radio-theme=matrix] :is(button,a,input,.knob,.display,.station-card):focus-visible:where(:root[data-show-focus-indicators=true] *){outline-color:var(--orange)}
:root[data-radio-theme=matrix] .help-button:hover{color:var(--orange);background:var(--metal-hover)}
:root[data-radio-theme=matrix] .radio{background:repeating-linear-gradient(0deg,#ffffff03 0 1px,#0002 1px 2px,transparent 2px 4px),linear-gradient(110deg,#0a150c,#26402b 25%,#102213 55%,#25402a 76%,#08130a);border-color:#345a3b;box-shadow:0 28px 42px -22px #000e,0 3px 7px #0009,inset 0 1px 1px #7ab48555}
:root[data-radio-theme=matrix] .radio-face{--radio-face-background:linear-gradient(125deg,#0b1b10,#07110a);background:var(--radio-face-background);border-color:#31593b;box-shadow:inset 0 2px 3px #66ff8812,0 2px 4px #0009}
:root[data-radio-theme=matrix] .panel-screw{background:radial-gradient(circle at 32% 25%,#739d7b,#34573b 36%,#17331c 70%,#08180b);border-color:#31593b;box-shadow:0 1px 1px #8affa022,inset 0 -1px 1px #0008}
:root[data-radio-theme=matrix] .panel-screw:after{background:#030805;box-shadow:0 1px 0 #8affa022}
:root[data-radio-theme=matrix] .speaker{background:#0b1e0f}
:root[data-radio-theme=matrix] .speaker-fabric{background:radial-gradient(circle,#050f07 0 1px,transparent 1.5px) 0 0/5px 5px,linear-gradient(125deg,#284a2e,#0d2211);box-shadow:inset 0 0 18px #0009}
:root[data-radio-theme=matrix] .speaker-drivers{background:linear-gradient(105deg,#1b3b21,#0a1d0e)}
:root[data-radio-theme=matrix] .speaker-mount:before{background:linear-gradient(135deg,#426e4a,#1c3e22 45%,#091d0d);border-color:#31593b}
:root[data-radio-theme=matrix] .speaker-dustcap{background:radial-gradient(circle at 35% 25%,#42774c,#1b4022 60%,#0b220f);border-color:#030805}
:root[data-radio-theme=matrix] .speaker-label{background:linear-gradient(120deg,#244b2b,#0b1b10);color:#d7ffe1}
:root[data-radio-theme=matrix] :is(.speaker-label span,.receiver-top,.control-label,.step,output){color:#436a4a}
:root[data-radio-theme=matrix] :is(.display,.speaker){--display-edge-top:#020703;--display-edge-left:#07180c;--display-edge-bottom:#24422b;--display-edge-right:#152b1c;--display-lip:#8affa012;}
:root[data-radio-theme=matrix] .display{background:linear-gradient(120deg,#0c2b12,#07190a)}
:root[data-radio-theme=matrix] .display :is(.display-header,.station-origin,.display-footer output,.stream-badges){color:#91c99c}
:root[data-radio-theme=matrix] :is(.now-playing,#voice-indicator){color:#d7ffe1}
:root[data-radio-theme=matrix] #voice-indicator{background:#8afa9f18;border-color:#8afa9f66}
:root[data-radio-theme=matrix] .display h2{font-family:'DM Sans',Arial,sans-serif;font-weight:600;text-shadow:0 1px 3px #0e2813,0 0 16px #8afa9f22}
:root[data-radio-theme=matrix] :is(.display-header,.display>h2,.display-details){text-shadow:0 1px 3px #0e2813,0 0 6px #0e2813}
:root[data-radio-theme=matrix] .frequency-display span{background:#82d492}
:root[data-radio-theme=matrix] .signal i{background:#72ae7d}
:root[data-radio-theme=matrix] .display[data-state=playing] .signal i{background:#b6fdc3}
:root[data-radio-theme=matrix] .tuning-scale{border-color:#82d49266}
:root[data-radio-theme=matrix] .dial-needle{background:#b9ffc6;box-shadow:0 0 8px #69ff8599}
:root[data-radio-theme=matrix] .knob-surround{background:linear-gradient(130deg,#355f3d,#102a15);box-shadow:0 0 0 1px #53855c80,inset 0 2px 4px #0008}
:root[data-radio-theme=matrix] .knob{background:repeating-conic-gradient(#3d6845 0deg 2deg,#15331b 2deg 4deg);border-color:#31593b}
:root[data-radio-theme=matrix] .knob-cap{background:radial-gradient(circle at 35% 25%,#4a7a53,#254b2c 45%,#0f2814);box-shadow:inset 0 1px 2px #8affa033,inset 0 -3px 4px #0008}
:root[data-radio-theme=matrix] .knob-pointer{background:#66ff88;box-shadow:0 0 4px #8affa066}
:root[data-radio-theme=matrix]{--power-edge-highlight:#b4d8bb66;--recovery-edge-highlight:#b4d8bb40;--knob-center-highlight:#b4d8bb40}
:root[data-radio-theme=matrix] .knob-center{background:linear-gradient(#355f3d,#112c16)}
:root[data-radio-theme=matrix] :is(.power,.mute-cap){background:linear-gradient(135deg,#2c5834,#0c2310);border-color:#609e6c}
:root[data-radio-theme=matrix] .power svg{stroke:#aee5b8}
:root[data-radio-theme=matrix] .control-button[aria-pressed=true] .power svg{stroke:#8afa9f}
:root[data-radio-theme=matrix] #power[aria-pressed=true] .power{box-shadow:0 3px 4px #0008,inset 0 1px 1px var(--power-edge-highlight),0 0 10px 3px #8afa9f55}
:root[data-radio-theme=matrix] .push-button[aria-pressed=true] .mute-cap{background:radial-gradient(circle,#09210e,#285e32);box-shadow:0 0 0 2px #609e6c,inset 0 2px 3px #000c}
:root[data-radio-theme=matrix] :is(#channels,#songs,#equalizer)[aria-pressed=true] .mute-cap{box-shadow:0 0 0 2px #609e6c,inset 0 2px 3px #000c,0 0 10px 3px #8afa9f55}
:root[data-radio-theme=matrix] .push-button[aria-pressed=true] .mute-cap:after,:root[data-radio-theme=matrix] .power-light.on{background:#8afa9f;box-shadow:0 0 8px #69ff8599}
:root[data-radio-theme=matrix] .power-light.on.direct-playing{background:#47ff6a;box-shadow:0 0 4px #47ff6a,0 0 10px 2px #47ff6abb,0 0 18px 4px #47ff6a66}
:root[data-radio-theme=matrix] .radio-bottom{color:#25502d}
:root[data-radio-theme=matrix] .radio-foot{background:linear-gradient(#071409,#23472a)}
:root[data-radio-theme=matrix] :is(.station-card,.station-ghost,.undo-notice){background:var(--metal-surface);border-color:var(--metal-border);color:var(--metal-text)}
:root[data-radio-theme=matrix] .station-card.selected{background:var(--metal-hover);border-color:var(--orange)}
:root[data-radio-theme=matrix] .station-button .custom-channel-name{color:var(--orange)}
:root[data-radio-theme=matrix] .station-selected-dot{background:var(--metal-border)}
:root[data-radio-theme=matrix] .selected .station-selected-dot{background:var(--orange)}
:root[data-radio-theme=matrix] :is(.channel-dialog,.help-dialog){--help-surface:var(--metal-surface);--help-border:var(--metal-border);--help-muted:var(--metal-muted);--help-key:var(--metal-key);background:var(--metal-surface);border-color:var(--metal-border)}
:root[data-radio-theme=matrix] :is(.channel-dialog,.help-dialog)::backdrop{background:#102a15aa}
:root[data-radio-theme=matrix] :is(.sleep-choice,.sleep-menu,.channel-dialog :is(input,select),.channel-toolbar input){background:var(--metal-surface);border-color:var(--metal-border);color:var(--metal-text)}
:root[data-radio-theme=matrix] .sleep-menu button:not(:disabled):is(:hover,:focus:where(:root[data-show-focus-indicators=true] *)){background:var(--metal-hover);color:var(--metal-text)}
:root[data-radio-theme=matrix] .radio-tooltip{--help-border:var(--metal-border);--help-key:var(--metal-key);background:var(--metal-surface);border-color:var(--metal-border);box-shadow:0 4px 12px #0005}
:root[data-radio-theme=matrix] .radio-tooltip-content{background:transparent}
:root[data-radio-theme=matrix] :is(.visualization-menu-list,.sleep-menu,.dialog-scroll,.help-content){scrollbar-color:var(--metal-border) var(--metal-surface)}
:root[data-radio-theme=matrix] .visualization-menu-list button:is(:hover,:focus-visible:where(:root[data-show-focus-indicators=true] *)){background:var(--metal-hover);color:var(--metal-text)}
:root[data-radio-theme=matrix] :is(.toggle-track,.theme-track){background:#183c1f;border-color:#609e6c}
:root[data-radio-theme=matrix] :is(.toggle-track,.theme-track):after{background:radial-gradient(circle at 35% 25%,#d7ffe1,#7fc88d)}
:root[data-radio-theme=matrix] .toggle-control input:checked+.toggle-track,:root[data-radio-theme=matrix] .theme-toggle[aria-checked=true] .theme-track{background:#429051;border-color:#81df93}
:root[data-radio-theme=matrix] :is(.option-row,footer,.quiet-button,.presets button,.channel-form-actions button,:is(#sleep-countdown,#wake-countdown)){border-color:var(--metal-border)}
:root[data-radio-theme=matrix] .channel-toolbar input::placeholder{color:var(--metal-muted)}
:root[data-radio-theme=matrix] .footer-dot{color:var(--metal-muted)}
:root[data-radio-theme=matrix] #voice-toggle[aria-pressed=true]{color:var(--orange);background:var(--metal-hover)}
:root[data-radio-theme=matrix] .mute-cap{box-shadow:0 2px 2px #0008,0 0 0 2px #31593b,inset 0 1px 1px #8affa033}
:root[data-radio-theme=matrix] .mute-cap:after{background:#a6dfb1}
:root[data-radio-theme=matrix] .push-button:hover .mute-cap{border-color:#4baf5e}
:root[data-radio-theme=matrix] :is(.display-tools button,.display-tools .advertising-indicator,.equalizer-header,.equalizer-header button:not([role=option]),.eq-band output){color:#d7ffe1}
:root[data-radio-theme=matrix] :is(.display-tools button,.display-tools .advertising-indicator,.equalizer-header button:not([role=option])):hover{background:#8afa9f18}
:root[data-radio-theme=matrix] .display-tools button:focus-visible:where(:root[data-show-focus-indicators=true] *){outline-color:#d7ffe1}
:root[data-radio-theme=matrix] .equalizer-header button:not([role=option]){background:#8afa9f0a;border-color:#82d49266}
:root[data-radio-theme=matrix] .eq-track input::-webkit-slider-thumb{border-color:#b6fdc3;background:linear-gradient(#d7ffe1,#54a062);box-shadow:0 1px 4px #0008,0 0 5px #8afa9f22}
:root[data-radio-theme=matrix] .eq-track input::-moz-range-thumb{border-color:#b6fdc3;background:linear-gradient(#d7ffe1,#54a062)}
:root[data-radio-theme=matrix] :is(#power.power-hint[aria-pressed=false] .power,#mute[aria-pressed=true] .mute-cap,#volume-knob.zero-volume){animation-name:matrix-power-hint}
:root[data-radio-theme=matrix] #mute[aria-pressed=true] .mute-cap{--hint-button-shadow:0 0 0 2px #609e6c,inset 0 2px 3px #000c}
:root[data-radio-theme=matrix] .speaker-driver>ellipse:first-child{fill:#08150c;stroke:#42634a}
:root[data-radio-theme=matrix] #driver-surround stop:nth-child(1){stop-color:#0b1c10}
:root[data-radio-theme=matrix] #driver-surround stop:nth-child(2){stop-color:#2c4933}
:root[data-radio-theme=matrix] #driver-surround stop:nth-child(3){stop-color:#07150b}
:root[data-radio-theme=matrix] #driver-surround stop:nth-child(4){stop-color:#1d3424}
:root[data-radio-theme=matrix] #driver-paper stop:nth-child(1){stop-color:#497c52}
:root[data-radio-theme=matrix] #driver-paper stop:nth-child(2){stop-color:#2b5033}
:root[data-radio-theme=matrix] #driver-paper stop:nth-child(3){stop-color:#102b17}
:root[data-radio-theme=matrix] :is(.eq-scale,.eq-frequency,.equalizer-footer){color:#91c99c}
:root[data-radio-theme=matrix] .equalizer-bands:before{background:#82d49255}
:root[data-radio-theme=matrix] .eq-track input::-webkit-slider-runnable-track{background:linear-gradient(90deg,#0e2813,#2c5a35);border-color:#82d4924d}
:root[data-radio-theme=matrix] .eq-track input::-moz-range-track{background:#1b4122;border-color:#82d4924d}
:root[data-radio-theme=matrix] .mark{box-shadow:0 0 0 1px #31593b,0 2px 4px #0005}
:root[data-radio-theme=matrix] .mark-tile{fill:#0b1b10}
:root[data-radio-theme=matrix] .mark-letter{stroke:#d7ffe1}
:root[data-radio-theme=matrix] .mark-bars{stroke:#66ff88}
:root[data-radio-theme=matrix] :is(.speaker-label span,.receiver-top,.control-label,.step,output,.radio-bottom){color:#90b99a}
:root[data-radio-theme=matrix] .theme-toggle:disabled{opacity:.7;cursor:default}
:root[data-radio-theme=matrix] .channel-form-actions .channel-save{background:#66ff88;color:#030805;border-color:#66ff88}
@keyframes matrix-power-hint{0%,100%{box-shadow:var(--hint-button-shadow,0 3px 4px #0008,inset 0 1px 1px var(--power-edge-highlight,#b4d8bb66)),0 0 5px 2px #66ff8820}50%{box-shadow:var(--hint-button-shadow,0 3px 4px #0008,inset 0 1px 1px var(--power-edge-highlight,#b4d8bb66)),0 0 14px 5px #66ff8860}}
:root[data-radio-theme=matrix] .display{background:repeating-linear-gradient(0deg,#66ff8805 0 1px,transparent 1px 4px),linear-gradient(120deg,#0b1b10,#030805);color:#d7ffe1}
:root[data-radio-theme=matrix] .display h2{font-family:ui-monospace,Consolas,monospace;font-weight:600;letter-spacing:-1px;text-shadow:0 0 10px #66ff8826}
:root[data-radio-theme=matrix] :is(.display-header,.display-details,.display-footer){font-family:ui-monospace,Consolas,monospace}
/* Contrast stays tight to the letters across radio themes. */
:root .display :is(.display-header,.station-name,.now-playing,.display-details .station-origin){text-shadow:0 0 2px #0009,0 0 4px #0006}
@media(max-width:600px){:root[data-radio-theme=matrix] .display:not(.is-expanded) .display-header{font-size:7px;letter-spacing:.5px;gap:6px}}

/* Align the three control columns and keep recovery beneath Power. */
.controls{--control-row-size:max(108px,var(--dial-size));grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.controls :is(.power-section,.tuning-section,.volume-section){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto var(--control-row-size) auto;grid-column:auto;grid-row:auto;justify-items:center;gap:7px}
.controls .control-button{display:flex;flex-direction:column;align-items:center;min-width:48px;min-height:48px;padding:0;border:0;border-radius:4px;background:transparent}
.controls .control-button:disabled{opacity:.45;cursor:default}
.controls .power-section{display:flex;flex-direction:column;gap:7px}
.power-row{display:flex;align-items:center;justify-content:center;width:100%;height:var(--control-row-size);flex:none}
.controls #power{gap:7px}
.controls .power-face{width:min(96px,var(--dial-size));height:min(96px,var(--dial-size));border-width:4px}
.controls #power svg{width:60%;height:60%;transform:translateY(2.6%)}
.controls .push-button{height:auto;min-width:48px;min-height:71px;padding:0 0 4px;margin:0;flex-direction:column;justify-content:flex-start;gap:8px}
.controls .push-button .mute-cap{width:48px;height:48px}
.volume-actions,.recovery-controls{display:flex;justify-content:center;align-items:flex-start;gap:16px}
.controls .recovery-control{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:48px;min-height:71px;padding-bottom:4px}
.controls .recovery-button{width:48px;height:48px;border-width:1px;box-shadow:inset 0 1px 1px var(--recovery-edge-highlight,#a7a29455);transition:box-shadow .35s ease-out}
.controls .recovery-control:not(:disabled):active .recovery-button{box-shadow:inset 0 1px 1px var(--recovery-edge-highlight,#a7a29455),0 0 10px 3px var(--recovery-glow,#edbb7555);transition-duration:0s}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight]) .recovery-button{--recovery-glow:#8ad1fa55}
:root[data-radio-theme=matrix] .recovery-button{--recovery-glow:#8afa9f55}
.controls .recovery-button svg{width:28px;height:28px}
:root .step:not(:disabled):is(:hover,:active){color:var(--orange)}
.controls :is(#previous,#volume-down) svg{transform:translateX(4px)}
.controls :is(#next,#volume-up) svg{transform:translateX(-4px)}
@media(min-width:901px) and (max-width:1024px){.controls .step{width:24px}.controls :is(.tuning-row,.volume-row){gap:0}}
@media(max-width:520px){
 .controls{--control-row-size:max(108px,calc(var(--dial-size) + 44px));gap:12px;row-gap:8px}
 .volume-actions,.recovery-controls{gap:8px}
 .controls :is(.tuning-row,.volume-row){display:grid;grid-template-columns:repeat(2,44px);grid-template-rows:var(--dial-size) 44px;align-content:center;justify-items:center;gap:0;min-height:0}
 .controls .knob-surround{grid-column:1/-1;grid-row:1}
 .controls .step{grid-row:2;width:44px;height:44px}
 .controls :is(#previous,#volume-down){grid-column:1}
 .controls :is(#next,#volume-up){grid-column:2}
 .power-row{align-items:flex-start;padding-top:calc((var(--control-row-size) - var(--dial-size) - 44px)/2)}
}
@media(max-width:380px){
 .volume-actions,.recovery-controls{flex-direction:column;align-items:center}
}

/* Focus still routes keyboard input when its visual indicators are disabled. */
:root:not([data-show-focus-indicators=true]) :focus,
:root:not([data-show-focus-indicators=true]) .toggle-control input:focus + .toggle-track {
  outline: none !important;
}

.wake-time{display:flex;align-items:center;gap:6px}
.wake-time input.sleep-choice{width:46px;min-width:0;gap:0;padding:8px 6px;text-align:center;font-variant-numeric:tabular-nums}
#wake-form{margin-top:12px}
.wake-guide{font-size:11px;line-height:1.5;margin:0 0 16px;max-width:360px}
.wake-light{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit}
.display.has-wake-light{background:#080000!important;color:var(--wake-ink)!important}
.display.has-wake-light :is(.display-header,h2,.display-details,.display-footer,.station-origin,.now-playing,#volume-value,.stream-badges,#voice-indicator,.display-tools button,.display-tools .advertising-indicator){color:var(--wake-ink)!important;text-shadow:none!important}
.display.has-wake-light :is(.signal i,.frequency-display span,.dial-needle){background:var(--wake-ink)!important}
.display.has-wake-light .frequency-display span{opacity:calc(.65 * var(--effect-opacity,1))}
.display.has-wake-light .dial-needle{box-shadow:none!important}
.display.has-wake-light :is(.tuning-scale,#voice-indicator){border-color:color-mix(in srgb,var(--wake-ink) 50%,transparent)!important}
.display.has-wake-light #voice-indicator{background:color-mix(in srgb,var(--wake-ink) 10%,transparent)!important}

.wake-days{display:flex;justify-content:space-between;gap:5px;margin:8px 0}
.wake-days button{width:36px;height:36px;min-height:36px;border:1px solid transparent;border-radius:50%;background:color-mix(in srgb,currentColor 12%,transparent);color:inherit;font-size:12px;padding:0}
.wake-days button[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:#201b15;font-weight:600}

.wake-repeat{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;font-size:12px}
#wake-repeat-summary{opacity:.7;text-align:right;font-size:11px}
@media(pointer:coarse){.wake-days button{width:40px;height:40px;min-height:40px}}

.display.wake-blackout{background:#000!important}
.display.wake-blackout>*{visibility:hidden}
.display.wake-blackout .fullscreen-button{visibility:visible;color:#666!important;background:transparent;text-shadow:none!important}
#wake-blackout-time{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font-size:12px;font-variant-numeric:tabular-nums;color:#555;pointer-events:none}
.display.wake-blackout #wake-blackout-time{visibility:visible}

#wake-countdown{padding:0 8px 0 13px;gap:6px}
#wake-countdown button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 3px;border:0;background:transparent;color:inherit;font:inherit}
#wake-countdown #wake-bedtime{font-size:10px;font-weight:600;color:var(--orange)}
#wake-cancel{min-width:26px}
#wake-station{max-width:230px;min-width:0;text-transform:none;letter-spacing:0}
#wake-station-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#wake-station-menu{max-width:calc(100vw - 16px);max-height:min(320px,calc(100dvh - 16px));overflow-y:auto}
#wake-station-menu button{text-transform:none;letter-spacing:0}
@media(max-width:380px){#wake-station{max-width:180px}}

#wake-alarm-stop{position:absolute;z-index:4;left:50%;top:65%;transform:translateX(-50%);min-height:44px;padding:12px 24px;border:1px solid currentColor;border-radius:6px;background:#ffffff44;color:var(--wake-ink,#ffdfb2);font:inherit;font-size:14px;font-weight:600;text-shadow:none}

/* Song likes share the channel collection's cards and theme surfaces. */
.collection-actions{display:flex;justify-content:center;align-items:flex-start;gap:16px}
.favorite-menu{max-width:calc(100vw - 16px);width:300px;font-size:14px;letter-spacing:normal;text-transform:none}
.favorite-menu button{display:block;width:100%;min-height:48px;padding:10px 12px;border:0;border-radius:4px;background:transparent;color:inherit;text-align:left;font:inherit;letter-spacing:normal;text-transform:none}
.favorite-menu button:hover,.favorite-menu button:focus{background:#b9aa9326}
.favorite-menu button:disabled{opacity:.55;cursor:default}
.favorite-song-row{display:flex;align-items:center}
.favorite-song-row button{flex:1;min-width:0}
#favorite-song-info:not([hidden]){display:inline-flex;align-items:center;min-height:48px;padding:10px 12px;flex-shrink:0;color:inherit;text-underline-offset:3px;border-radius:4px}
#favorite-song-info:hover,#favorite-song-info:focus{background:#b9aa9326}
.song-card h3{margin:0;line-height:1.4;font-size:16px;color:var(--orange);overflow-wrap:anywhere}
.song-card p{overflow-wrap:anywhere}
.song-card .song-artist{font-size:14px;color:inherit;margin:7px 0 0}
.song-card .station-card-footer{margin-top:auto;padding-top:8px}
#song-info-title{overflow-wrap:anywhere;min-width:0}
#song-info-details{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px}
#song-info-details dt{font-weight:600}
#song-info-details dd{margin:0;overflow-wrap:anywhere}
#song-info-links{display:flex;flex-wrap:wrap;gap:8px 16px}
#song-info-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid var(--help-border);border-radius:6px;color:inherit;text-decoration:none;line-height:1.4}
#song-info-links a:hover{background:var(--help-key)}
.song-search-actions h3{margin:0 0 10px;font:inherit;font-weight:600}
#song-info-secondary{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px}
#song-info-secondary a{display:inline-flex;align-items:center;min-height:44px;color:var(--help-muted);text-underline-offset:3px}
#song-info-title .song-title-version{display:block;margin-top:6px;font-size:13px;font-weight:400;letter-spacing:.5px;text-transform:none;color:var(--help-muted)}
#song-notice{inset:auto;bottom:max(20px,env(safe-area-inset-bottom));left:50%;margin:0;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:0 8px;width:min(360px,calc(100% - 24px));padding:10px 8px 14px 16px;white-space:normal;touch-action:manipulation}
#song-notice::backdrop{background:transparent;pointer-events:none}
#song-notice-text{grid-column:1;overflow-wrap:anywhere;line-height:1.5}
.song-notice-actions{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}
:is(#song-notice-link,#song-notice-info){display:inline-flex;align-items:center;min-height:44px;color:var(--orange);text-underline-offset:3px}
#song-notice-close{grid-column:2;grid-row:1/3;align-self:start;width:44px;height:44px;padding:0;color:inherit;font-size:24px;line-height:1}
#song-notice-close:hover{background:#b9aa9326}
.notice-timer{position:absolute;left:16px;right:16px;bottom:6px;height:2px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,currentColor 10%,transparent)}
.notice-progress{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:currentColor;opacity:.4}
#song-notice [hidden]{display:none}
:is(#voice-notice,#speaker-notice){inset:auto;top:max(16px,env(safe-area-inset-top));left:50%;margin:0;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:start;gap:8px;width:min(420px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:12px 8px 16px 16px;white-space:normal;overflow-wrap:anywhere;line-height:1.5;touch-action:manipulation}
:is(#voice-notice,#speaker-notice)::backdrop{background:transparent;pointer-events:none}
:is(#voice-notice-detail,#speaker-notice-detail){margin:4px 0 0}
:is(#voice-notice-close,#speaker-notice-close){width:44px;height:44px;padding:0;color:inherit}
:is(#voice-notice,#speaker-notice)[hidden],:is(#voice-notice,#speaker-notice) [hidden]{display:none}
@media(max-width:520px){.collection-actions{gap:8px}.collection-actions .push-button{min-width:44px}.controls .collection-actions .mute-cap{width:44px;height:48px}.collection-actions .control-label{font-size:9px;letter-spacing:.6px}}

#song-artwork{margin:0 0 18px}
.song-artwork-cover{position:relative;width:180px;max-width:100%}
.song-artwork-cover .display-tools{position:absolute;right:0;top:0}
.song-artwork-cover .display-tools button{width:44px;height:44px;color:#fff}
#artwork-viewer{position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:clamp(20px,6vmin,72px);border:0;border-radius:0;background:#141918;overflow:hidden;touch-action:none;box-sizing:border-box}
#artwork-viewer[open]{display:grid;place-items:center}
#artwork-viewer::backdrop{background:#141918}
#artwork-viewer-background{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(24px);opacity:.16;pointer-events:none}
#artwork-viewer-image{position:relative;width:100%;height:100%;min-height:0;object-fit:contain;filter:drop-shadow(0 0 8px #0008)}
#artwork-viewer .display-tools{position:absolute;top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right))}
#artwork-viewer .display-tools button{width:44px;height:44px;color:#fff}
#song-artwork-placeholder{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:180px;max-width:100%;aspect-ratio:1;overflow:hidden;border:1px solid var(--help-border);border-radius:6px;background:color-mix(in srgb,var(--help-muted) 8%,transparent);color:var(--help-muted);font-size:11px;text-align:center}
#song-artwork-placeholder::before{content:'♫';font-size:42px;line-height:1;opacity:.45}
#song-artwork[data-state="loading"] #song-artwork-placeholder::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,color-mix(in srgb,var(--help-muted) 12%,transparent) 50%,transparent 75%);transform:translateX(-100%);animation:cover-shimmer 1.8s ease-in-out infinite}
@keyframes cover-shimmer{to{transform:translateX(100%)}}
#song-artwork [hidden]{display:none}
#song-artwork-image{display:block;width:180px;max-width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:6px}
#song-artwork figcaption{margin-top:5px;font-size:11px}
#song-artwork-source{color:inherit;text-underline-offset:3px}

#song-info-dialog .help-content{container-type:inline-size;container-name:song-info}
.song-info-summary{margin-bottom:0}
.song-info-copy{min-width:0}
#song-info-details{margin:0 0 18px}
.display .display-tools #display-info{width:44px;height:44px;flex:none;touch-action:manipulation}
#song-countdown{flex:none;min-width:6ch;text-align:right;font-variant-numeric:tabular-nums;font-size:11px;white-space:nowrap}
#song-countdown:not([hidden]){margin-left:auto}
#song-countdown:not([hidden])+#volume-value{margin-left:0}
.is-expanded #song-countdown{font-size:clamp(11px,1.8vmin,14px)}
#song-countdown[hidden],#display-info[hidden],#programme-info[hidden]{display:none}
.programme-info{border-top:1px solid var(--help-border);margin-top:20px;padding-top:16px}
.programme-info h3{margin:0 0 12px}
.programme-info-summary{display:flex;align-items:flex-start;gap:20px}
#programme-info-image{width:180px;max-width:35%;height:auto;object-fit:contain;border-radius:6px}
#programme-info-description{white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0 0}
#programme-info-times{color:var(--help-muted);margin:0;font-size:12px}
#programme-info [hidden]{display:none}
@media(max-width:520px){.programme-info-summary{flex-direction:column}#programme-info-image{max-width:100%}}
@media(max-width:520px){
 .display-header:has(#display-info){flex-wrap:wrap;row-gap:6px}
 .display-header:has(#display-info) .display-tools{flex:1 0 calc(100% + 12px);max-width:calc(100% + 12px);margin-inline:-6px;justify-content:flex-end;flex-wrap:wrap;gap:2px}
}
@container song-info (min-width:500px){
 .song-info-summary:has(#song-artwork:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) 180px;align-items:start;gap:24px}
 .song-info-summary #song-artwork{grid-column:2;grid-row:1;margin:0}
 .song-info-copy{grid-column:1;grid-row:1}
}

#song-artwork-itunes{display:inline-block;margin-top:4px;line-height:0}
#song-artwork-itunes img{display:block;width:120px;height:auto;max-width:100%}

#song-info-details{align-items:baseline}
.liked-date{min-height:44px;margin:-10px 0;padding:10px 0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;text-decoration:underline dotted;text-underline-offset:3px;cursor:help}

.information-tooltip{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:44px;margin:-10px 0 -10px 2px;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-size:16px;letter-spacing:normal;text-transform:none;cursor:help}

.stream-badges{display:flex;flex:none;align-items:center;gap:4px;margin-left:auto;color:#a9a789;font-size:10px;line-height:1.2;white-space:nowrap}
.stream-badges>span{display:inline-flex;align-items:center;height:1.2em;padding:0 4px;border:1px solid currentColor;border-radius:3px;box-sizing:border-box;font-variant-numeric:tabular-nums}
.stream-badges:not([hidden])+output{margin-left:0}
.display.is-expanded .stream-badges{font-size:clamp(8px,1.8vmin,14px)}

.station-meta{display:flex;align-items:center;justify-content:flex-end;min-height:30px;margin-top:auto;padding-top:12px;min-width:0}
.station-audio-badges{margin-left:0;color:#655b4d}
:root[data-theme=dark] .station-audio-badges{color:#beae96}
:root:is([data-radio-theme=modern-metallic],[data-radio-theme=modern-black],[data-radio-theme=midnight],[data-radio-theme=matrix]) .station-audio-badges{color:var(--metal-muted)}

#station-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
#station-list .station-card-footer{flex-wrap:wrap}
.station-card-actions{display:flex;align-items:center;gap:0;margin-left:auto}
.station-card-actions :is(.station-edit,.station-favorite,.station-share,.station-remove){width:44px;min-height:44px;margin-left:0}
@media(max-width:520px){#station-list{grid-template-columns:1fr}}

/* A quiet faceplate lid over the controls, matching the current radio finish. */
.controls-deck{position:relative}
.controls-deck :is(.controls,.controls-cover-toggle)[inert]{visibility:hidden}
.controls-cover-toggle{position:absolute;z-index:1;left:-12px;top:65px;width:48px;height:48px;padding:0;border:1px solid color-mix(in srgb,currentColor 9%,transparent);border-radius:50%;background:transparent;box-shadow:none;color:inherit}
.controls-cover-toggle:hover{border-color:color-mix(in srgb,currentColor 20%,transparent)}
.controls-cover{position:absolute;z-index:2;top:8px;left:-12px;right:calc(4px - var(--face-inset-x));bottom:calc(4px - var(--face-inset-y));padding:0;border:0;border-radius:8px;background:var(--radio-face-background);box-shadow:inset 0 1px 0 #ffffff18,inset 0 -1px 0 #0002,0 2px 3px -1px #0005;animation:controls-cover-close .2s ease-out}
.compact-view .controls-cover{left:calc(4px - var(--face-inset-x))}
.radio-face:has(.controls-cover:not([hidden]))>.panel-screw:is(.bottom-left,.bottom-right){visibility:hidden}
.controls-cover[hidden]{display:none}
.controls-cover{cursor:pointer}
.cover-display:not(.is-expanded){position:absolute;inset:8px;padding:6px 8px}
.compact-view .cover-display:not(.is-expanded){inset-inline:calc(var(--display-panel-gutter) - 4px)}
.cover-display:not(.is-expanded)>:is(h2,.display-details){display:none}
.cover-display .display-header{justify-content:flex-end;min-height:44px}
.cover-display .display-tools{margin-left:auto}
.cover-display .display-tools button{width:44px;height:44px;flex:none;touch-action:manipulation}
.cover-display .display-tools button[hidden]{display:none}
.cover-display.is-off:not(.is-expanded){background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.cover-display.is-off:not(.is-expanded):after{display:none}
.cover-display.is-off:not(.is-expanded) .frequency-display{display:none}
:root .cover-display.is-off:not(.is-expanded) .visualization-button{color:#514631;text-shadow:none}
:root:is([data-radio-theme=modern-metallic]) .cover-display.is-off:not(.is-expanded) .visualization-button{color:#283543}
:root:is([data-radio-theme=modern-black],[data-radio-theme=midnight]) .cover-display.is-off:not(.is-expanded) .visualization-button{color:#c2e8fc}
:root[data-radio-theme=matrix] .cover-display.is-off:not(.is-expanded) .visualization-button{color:#d7ffe1}
.cover-display.is-expanded .display-details{height:auto}
.cover-display.is-expanded[data-old-eyes] .display-details{flex:1}
.cover-display .station-origin[hidden]{display:none}
@keyframes controls-cover-close{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:680px){
 .radio-face{--display-panel-gutter:8px}
 .receiver>.display:not(.is-expanded){margin-inline:calc(var(--display-panel-gutter) - var(--face-inset-x))}
 .cover-display:not(.is-expanded){inset-inline:calc(var(--display-panel-gutter) - 4px)}
 .controls-deck .controls{padding-top:73px}
 .controls-cover-toggle{left:0;top:17px}
 .controls-cover{left:calc(4px - var(--face-inset-x));bottom:-10px}
 .compact-view .controls-cover{bottom:calc(4px - var(--face-inset-y))}
}
/* Optional accounts use the same Options controls and comfortable touch targets. */
.account-dialog { width: min(560px, calc(100vw - 24px)); }
.account-dialog [hidden] { display: none !important; }
.account-dialog .dialog-scroll { overflow-wrap: anywhere; font-size: 16px; line-height: 1.5; }
.account-dialog .dialog-heading h2 { font-size: 22px; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.account-dialog p { font-size: 16px; }
#account-dialog p:not(.channel-error) { color: inherit; }
.account-dialog h3 { margin: 18px 0 8px; font-size: 1rem; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.account-dialog button, .account-actions a { min-height: 44px; padding: 9px 14px; }
.account-dialog .dialog-scroll button, .account-actions a { border: 1px solid var(--help-border, #b9aa93); border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: 16px; font-weight: 600; }
.account-dialog .dialog-scroll button:hover, .account-actions a:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.account-dialog button:disabled { opacity: .55; cursor: default; }
.account-actions a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.account-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 14px 0; }
.account-form[hidden] { display: none; }
.account-form label, .account-form p { grid-column: 1 / -1; }
.account-dialog .account-form label { margin-top: 4px; }
.account-dialog .account-form input { margin: 0; }
.account-reconcile { padding: 12px; margin: 12px 0; border: 1px solid currentColor; border-radius: 8px; }
.account-dialog .account-status { font-size: 22px; font-weight: 600; min-height: 1.2em; margin-bottom: 8px; }
.account-status:empty { display: none; }
.account-dialog #account-methods { padding-left: 20px; font-size: 16px; }
.account-choices { display: grid; gap: 14px; margin: 22px 0 12px; }
.account-dialog .account-choice { display: grid; gap: 5px; width: 100%; padding: 18px; text-align: left; }
.account-choice-title { font-size: 18px; font-weight: 700; }
.account-choice-description { font-size: 16px; font-weight: 400; line-height: 1.4; }
.account-dialog .dialog-scroll .account-primary { border: 2px solid currentColor; background: color-mix(in srgb, currentColor 9%, transparent); }
.account-dialog .account-cancel { display: block; min-width: 100px; margin: 12px auto 0; }
.account-dialog .account-done { width: 100%; margin: 12px 0; min-height: 52px; }
.account-more { margin-top: 12px; border-top: 1px solid var(--help-border, #b9aa93); }
.account-more > summary { min-height: 52px; display: list-item; align-content: center; cursor: pointer; }
.account-privacy-link { display: inline-flex; align-items: center; min-height: 44px; color: inherit; margin-top: 12px; }
@media (max-width: 400px) { .account-form { grid-template-columns: minmax(0, 1fr); } .account-actions > * { flex: 1 1 100%; } }

/* Advertising is readable status, with the same colours as adjacent controls. */
.advertising-indicator{display:grid;place-items:center;flex:none;width:32px;height:44px;color:var(--orange);border-radius:4px;cursor:help;touch-action:manipulation}
.advertising-indicator svg{width:26px;height:26px;pointer-events:none}
.advertising-indicator:focus-visible:where(:root[data-show-focus-indicators=true] *){outline:3px solid currentColor;outline-offset:0}
.display-tools .advertising-indicator{color:#e2ce8f;text-shadow:none}
.display-tools .advertising-indicator svg{width:var(--toolbar-icon-size);height:var(--toolbar-icon-size);filter:drop-shadow(0 1px 2px #000b)}
@media(pointer:coarse){.advertising-indicator{width:44px}}

/* Both locations share the same favourites: excluded pills still play on selection. */
.radio-bottom-controls{flex-wrap:wrap;gap:12px 20px;min-width:0;flex-shrink:1}
#presets button[data-ad-excluded=true]{border-style:dashed;border-color:color-mix(in srgb,currentColor 65%,transparent)}
@media(max-width:520px){.radio-bottom-controls{gap:0 16px}.radio-bottom-controls :is(#favorites-only-choice,#ad-free-only-choice){margin-block:0}}