.radio-studio{--radio-line:rgba(148,163,184,.17);--radio-accent:#67e8f9;max-width:1440px;margin:auto;padding:28px clamp(16px,4vw,48px) 48px;color:#e2e8f0}.radio-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}.radio-eyebrow{font:700 10px/1.6 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;color:#67e8f9;text-transform:uppercase}.radio-heading h1{font-size:clamp(28px,4vw,42px);line-height:1.15;font-weight:900;letter-spacing:-.04em;margin:5px 0 8px}.radio-heading h1 span{color:#67e8f9}.radio-heading>div>p:last-child{font-size:13px;color:#94a3b8}.radio-clock{text-align:right;flex-shrink:0}.radio-clock span{font:24px 'Share Tech Mono',monospace;color:#a5f3fc}.radio-clock small{display:block;margin-top:6px;font-size:10px;color:#94a3b8}.radio-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:28px;align-items:start}.radio-deck{position:sticky;top:96px;padding:24px;border:1px solid rgba(34,211,238,.22);border-radius:28px;background:radial-gradient(ellipse at 50% 10%,rgba(8,145,178,.13),transparent 60%),linear-gradient(150deg,#10192a,#060b17);box-shadow:0 20px 60px #0005,inset 0 1px 0 #ffffff09;overflow:hidden}.radio-deck-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.radio-status{display:flex;align-items:center;gap:7px;font-size:10px;color:#94a3b8}.radio-status i{width:6px;height:6px;flex-shrink:0;background:#64748b;border-radius:50%}.radio-status.is-live{color:#5eead4}.radio-status.is-live i{background:#2dd4bf;box-shadow:0 0 12px #2dd4bf;animation:radio-breathe 2s infinite}.radio-onair{font:9px 'Share Tech Mono',monospace;color:#64748b;letter-spacing:.12em}.radio-now{text-align:center;padding:25px 0 20px}.radio-art{display:flex;align-items:center;justify-content:center;width:104px;height:104px;padding:12px;margin:0 auto 20px;border-radius:26px;color:#67e8f9;border:1px solid #164e63;background:#061422;box-shadow:0 0 0 8px #22d3ee04,0 0 0 16px #22d3ee02;transition:box-shadow .4s}.radio-art.is-playing{animation:radio-halo 4s ease-in-out infinite}.radio-logo{width:100%;height:100%;object-fit:contain;border-radius:12px}.radio-now h2{font-size:clamp(21px,2.3vw,29px);font-weight:900;line-height:1.2;letter-spacing:-.03em;overflow-wrap:anywhere;margin:8px 0}.radio-now>p:last-child{font-size:12px;color:#94a3b8;overflow-wrap:anywhere}.radio-display{background:linear-gradient(180deg,#020914,#03101b);border:1px solid #164e6370;border-radius:16px;padding:14px 12px 10px}.radio-display-label,.radio-scale{display:flex;justify-content:space-between;gap:8px;font:8px 'Share Tech Mono',monospace;letter-spacing:.09em;color:#578597}.radio-display-label span:last-child{color:#7dd3fc}.radio-spectrum{display:block;width:100%;height:154px;margin:12px 0}.radio-scale{color:#496477}.radio-analysis-note{font-size:10px;line-height:1.6;min-height:32px;color:#94a3b8;margin:12px 0 10px}.radio-transport{display:flex;align-items:center;justify-content:center;gap:12px}.radio-transport>button{min-height:48px;min-width:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--radio-line);border-radius:14px;color:#a5f3fc;font-size:13px}.radio-transport .radio-play{min-height:56px;gap:10px;padding:12px 24px;background:linear-gradient(120deg,#22d3ee,#2dd4bf);color:#04202b;border:0;font-weight:900;box-shadow:0 8px 24px #22d3ee20}.radio-volume{display:flex;align-items:center;gap:12px;margin:20px 0 14px}.radio-volume button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:#67e8f9}.radio-volume input{width:100%;min-width:0;accent-color:#22d3ee;height:24px}.radio-volume output{font:12px 'Share Tech Mono',monospace;min-width:35px;text-align:right;color:#94a3b8}.radio-save{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;border:1px solid var(--radio-line);border-radius:12px;min-height:44px}.radio-save.is-saved{color:#67e8f9;background:#22d3ee09}.radio-footnote{font-size:10px;line-height:1.6;color:#64748b;text-align:center;margin-top:14px}.radio-directory{min-width:0}.radio-directory-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 18px}.radio-directory-heading h2{font-size:18px;font-weight:800;letter-spacing:-.03em}.radio-directory-heading>span{color:#94a3b8;font:11px 'Share Tech Mono',monospace}.radio-filters{display:grid;gap:14px;margin-bottom:22px}.radio-views{display:flex;gap:8px}.radio-views button{min-height:44px;border-radius:12px;padding:8px 14px;font-size:12px;color:#94a3b8;background:#0b1221;border:1px solid var(--radio-line);display:flex;gap:10px;align-items:center}.radio-views button[aria-pressed=true]{background:#083344;color:#a5f3fc;border-color:#155e75}.radio-views span{font:10px 'Share Tech Mono',monospace;opacity:.7}.radio-search{display:flex;align-items:center;gap:10px;border:1px solid var(--radio-line);border-radius:14px;background:#0b1221;padding:0 14px;color:#67e8f9}.radio-search input{min-width:0;width:100%;min-height:48px;background:transparent;color:#e2e8f0;font-size:16px;outline:none}.radio-search:focus-within{border-color:#22d3ee}.radio-group{display:flex;align-items:center;gap:14px;color:#94a3b8;font-size:11px}.radio-group select{flex:1;min-width:0;min-height:44px;padding:8px 12px;border:1px solid var(--radio-line);border-radius:12px;background:#0b1221;color:#cbd5e1;font-size:12px}.radio-stations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.radio-station{position:relative;display:flex;align-items:center;min-width:0;background:linear-gradient(140deg,#101828,#090f1d);border:1px solid var(--radio-line);border-radius:16px;transition:border-color .2s,transform .2s;overflow:hidden}.radio-station:hover{border-color:#155e75;transform:translateY(-2px)}.radio-station.is-selected{background:linear-gradient(130deg,#08334488,#0b1928);border-color:#0891b2;box-shadow:inset 3px 0 #22d3ee}.radio-station-select{display:flex;align-items:center;gap:10px;min-width:0;flex:1;text-align:left;padding:14px 6px 14px 12px;min-height:94px}.radio-station-logo{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;background:#020b17;padding:5px;color:#67e8f9}.radio-station-select>div:nth-child(2){min-width:0;flex:1}.radio-station h3{font-size:12px;font-weight:800;line-height:1.4;overflow-wrap:anywhere}.radio-station p{font-size:10px;color:#94a3b8;line-height:1.5;margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.radio-station-select>div>span{display:block;color:#5eead4;font-size:9px;margin-top:5px}.radio-station-play{display:none;color:#67e8f9}.radio-station-fav{min-width:38px;min-height:44px;display:flex;align-items:center;justify-content:center;color:#64748b;flex-shrink:0}.radio-station-fav[aria-pressed=true]{color:#67e8f9}.radio-error{background:#fb71850b;border:1px solid #fb718533;padding:12px;border-radius:12px;font-size:12px;color:#fda4af;margin-bottom:14px;line-height:1.6}.radio-error button,.radio-empty button{display:inline-block;min-height:44px;font-weight:700;color:#67e8f9}.radio-empty{text-align:center;border:1px dashed #334155;border-radius:20px;padding:36px 20px;color:#64748b}.radio-empty h3{font-size:17px;font-weight:700;color:#e2e8f0;margin:14px 0 8px}.radio-empty p{font-size:12px;line-height:1.7;margin-bottom:10px}.radio-studio button:focus-visible,.radio-studio input:focus-visible,.radio-studio select:focus-visible{outline:2px solid #67e8f9;outline-offset:3px}.radio-studio button:disabled{opacity:.45;cursor:not-allowed}@keyframes radio-breathe{50%{box-shadow:0 0 3px #2dd4bf88}}@keyframes radio-halo{50%{box-shadow:0 0 0 8px #22d3ee08,0 0 0 18px #22d3ee04,0 0 36px #22d3ee12}}@media(min-width:1400px){.radio-station-play{display:block}}@media(max-width:1000px){.radio-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}.radio-stations{grid-template-columns:1fr}}@media(max-width:760px){.radio-studio{padding-top:22px}.radio-layout{grid-template-columns:1fr;gap:30px}.radio-deck{position:relative;top:0;max-width:560px;width:100%;margin:auto;padding:20px}.radio-heading{margin-bottom:22px}.radio-now{padding:16px 0 14px}.radio-now h2{font-size:25px}.radio-art{width:72px;height:72px;margin-bottom:14px}.radio-spectrum{height:100px}.radio-analysis-note{min-height:0;margin:8px 0}.radio-volume{margin:12px 0 10px}.radio-stations{grid-template-columns:repeat(2,minmax(0,1fr))}.radio-station-select{padding:12px 4px 12px 10px;gap:8px}.radio-station-logo{width:32px;height:32px}.radio-station-fav{min-width:32px}.radio-station h3{font-size:11px}.radio-clock span{font-size:20px}}@media(max-width:380px){.radio-stations{grid-template-columns:1fr}.radio-station-logo{width:44px;height:44px}.radio-station h3{font-size:13px}.radio-clock{display:none}.radio-deck{padding:16px}.radio-onair{font-size:8px}.radio-transport{gap:8px}.radio-transport .radio-play{padding:12px 20px}}@media(prefers-reduced-motion:reduce){.radio-art.is-playing,.radio-status.is-live i{animation:none}.radio-station{transition:none}.radio-station:hover{transform:none}}

@media(min-width:1024px){.radio-deck{top:calc(var(--box-header-height,132px) + 20px)}}

.radio-ambient{overflow:hidden;background:radial-gradient(ellipse at center,#0891b20a,transparent 75%)}
.radio-ambient-wave{transform-origin:center;animation:radio-ambient-drift 7s ease-in-out infinite alternate}
.radio-ambient-wave:nth-child(2){animation-duration:9s;animation-delay:-3s;animation-direction:alternate-reverse}
.radio-ambient-wave:nth-child(3){animation-duration:11s;animation-delay:-6s}
@keyframes radio-ambient-drift{from{transform:translate(-22px,-3px)}to{transform:translate(22px,3px)}}
@media(prefers-reduced-motion:reduce){.radio-ambient-wave{animation:none}}

/* Radio occupies the space between the app menus; only the directory scrolls. */
body.box-radio-open{overflow:hidden}
.radio-studio{position:fixed;inset:var(--radio-header-height,80px) 0 var(--radio-navigation-height,0px);z-index:20;display:flex;flex-direction:column;width:100%;max-width:1440px;min-height:0;overflow:hidden;padding:18px clamp(16px,3vw,40px);background:#020617}
.radio-heading{flex-shrink:0;margin-bottom:16px}
.radio-heading h1{font-size:clamp(24px,3vw,34px);margin:3px 0 4px}
.radio-layout{flex:1;min-height:0;align-items:stretch;gap:24px}
.radio-deck{position:relative;top:auto;min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:20px}
.radio-now{padding:14px 0}
.radio-art{width:72px;height:72px;margin-bottom:12px}
.radio-spectrum{height:clamp(60px,12dvh,130px)}
.radio-analysis-note{min-height:0;margin:8px 0}
.radio-volume{margin:12px 0 8px}
.radio-footnote{margin-top:8px}
.radio-directory{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 8px 12px 2px;-webkit-overflow-scrolling:touch}
.radio-directory:focus-visible,.radio-deck:focus-visible{outline:2px solid #67e8f9;outline-offset:-3px}
.radio-stations{align-content:start}
@media(min-width:761px) and (max-height:850px){
 .radio-heading>div>p:last-child,.radio-analysis-note,.radio-footnote{display:none}
 .radio-heading{margin-bottom:12px}
 .radio-now{padding:10px 0}
 .radio-art{width:48px;height:48px;margin-bottom:8px;padding:6px;border-radius:16px}
 .radio-now h2{font-size:23px;margin:5px 0}
 .radio-spectrum{height:60px;margin:8px 0}
 .radio-deck{padding:16px}
 .radio-display{padding:10px}
 .radio-transport{margin-top:12px}
 .radio-transport .radio-play{min-height:48px}
 .radio-volume{margin:6px 0}
}
@media(max-width:760px){
 .radio-studio{padding:10px 12px;gap:8px}
 .radio-heading{margin:0;min-height:28px}
 .radio-heading h1{font-size:20px;margin:0}
 .radio-heading .radio-eyebrow,.radio-heading>div>p:last-child,.radio-clock{display:none}
 .radio-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:12px}
 .radio-deck{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;max-height:46dvh;max-width:none;margin:0;padding:12px 14px;border-radius:20px;align-items:center}
 .radio-deck-top,.radio-error{grid-column:1/-1}
 .radio-now{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:10px;padding:0;text-align:left;min-width:0}
 .radio-art{grid-row:1/4;width:48px;height:48px;padding:5px;border-radius:14px;margin:0}
 .radio-now .radio-eyebrow{font-size:8px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .radio-now h2{font-size:17px;line-height:1.2;margin:3px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .radio-now>p:last-child{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .radio-display{padding:6px;border-radius:10px;width:70px}
 .radio-display-label,.radio-scale,.radio-analysis-note,.radio-footnote{display:none}
 .radio-spectrum{height:44px;margin:0}
 .radio-transport{grid-column:1/-1;gap:12px}
 .radio-transport>button{min-height:44px}
 .radio-transport .radio-play{min-height:44px;padding:8px 20px}
 .radio-volume{grid-column:1/-1;margin:0;gap:10px}
 .radio-save{grid-column:1/-1;min-height:36px;font-size:11px}
 .radio-directory{padding:0 5px 12px 2px}
 .radio-directory-heading{margin:4px 0 12px}
 .radio-directory-heading h2{font-size:16px}
 .radio-filters{gap:10px;margin-bottom:14px}
 .radio-station h3{font-size:12px}
}
@media(max-width:760px) and (max-height:650px){
 .radio-heading,.radio-display,.radio-save{display:none}
 .radio-deck{gap:4px 8px;padding:8px 12px}
 .radio-now{grid-column:1/-1}
 .radio-now>p:last-child{display:none}
 .radio-art{grid-row:1/3;width:40px;height:40px}
 .radio-volume button{min-height:36px}
 .radio-deck-top{min-height:18px}
 .radio-layout{gap:8px}
}

