[data-ui=radio]{background:radial-gradient(circle at 82% 5rem, rgba(var(--color-primary-rgb), .09), transparent 25rem), var(--color-bg);min-height:100dvh;display:block}:where([data-ui=radio]) .radio-page{width:min(100%, var(--max-screen));min-height:100dvh;margin-inline:auto;padding:5.75rem clamp(1rem,4vw,3rem) 8.5rem}:where([data-ui=radio]) .state-wrap{place-items:center;min-height:60vh;display:grid}:where([data-ui=radio]) .radio-loading{padding-top:.75rem}:where([data-ui=radio]) .loading-hero,:where([data-ui=radio]) .loading-grid span{background:linear-gradient(100deg, var(--color-black-700) 25%, var(--color-black-600) 42%, var(--color-black-700) 60%);background-size:220% 100%;animation:1.6s ease-in-out infinite radio-loading;display:block}:where([data-ui=radio]) .loading-hero{border-radius:1rem;min-height:16.5rem}:where([data-ui=radio]) .loading-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin-top:2rem;display:grid}:where([data-ui=radio]) .loading-grid span{border-radius:.85rem;height:5.4rem}@keyframes radio-loading{to{background-position:-120% 0}}:where([data-ui=radio]) .radio-hero{isolation:isolate;background:linear-gradient(135deg,#1d2020 0%,#111315 48%,#090a0c 100%);border:1px solid #ffffff1a;border-radius:1rem;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:clamp(1.25rem,3vw,2.5rem);min-height:17rem;padding:clamp(1.25rem,3vw,2.25rem);display:grid;position:relative;overflow:hidden;box-shadow:0 1.5rem 4rem #0000003d}:where([data-ui=radio]) .hero-backdrop{z-index:-1;background:radial-gradient(circle at 8% 10%, rgba(var(--color-primary-rgb), .2), transparent 27rem), linear-gradient(90deg, #04050614, #0405068f);position:absolute;inset:0}:where([data-ui=radio]) .hero-artwork{aspect-ratio:1;background:#f5f5f4;border:1px solid #ffffff24;border-radius:1rem;place-items:center;width:clamp(7.5rem,12vw,9.5rem);padding:.8rem;display:grid;overflow:hidden;box-shadow:0 1.1rem 2.8rem #0000006b}:where([data-ui=radio]) .hero-artwork img{object-fit:contain;width:100%;height:100%}:where([data-ui=radio]) .hero-artwork i{color:var(--color-primary-deep);font-size:3.2rem}:where([data-ui=radio]) .hero-content{min-width:0}:where([data-ui=radio]) .hero-badge{border:1px solid rgba(var(--color-primary-rgb), .3);background:var(--panel-bg);color:var(--color-primary-light);letter-spacing:.09em;border-radius:999px;align-items:center;gap:.4rem;padding:.28rem .62rem;font-size:.65rem;font-weight:750;display:inline-flex}:where([data-ui=radio]) .pulse-dot{aspect-ratio:1;width:.42rem;box-shadow:0 0 0 0 rgba(var(--color-primary-rgb), .55);background:currentColor;border-radius:50%;animation:1.7s ease-out infinite live-pulse}@keyframes live-pulse{to{box-shadow:0 0 0 .42rem rgba(var(--color-primary-rgb), 0)}}:where([data-ui=radio]) .hero-kicker{color:var(--color-text-muted);letter-spacing:.12em;margin:1rem 0 .25rem;font-size:.66rem;font-weight:650}:where([data-ui=radio]) .hero-title{letter-spacing:-.055em;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:clamp(2rem,4vw,3.65rem);font-weight:780;line-height:1;overflow:hidden}:where([data-ui=radio]) .hero-subtitle{color:var(--color-text-muted);text-overflow:ellipsis;white-space:nowrap;margin:.55rem 0 0;font-size:clamp(.8rem,1.4vw,.95rem);overflow:hidden}:where([data-ui=radio]) .hero-play-button{background:var(--color-primary-gradient);color:#fff;cursor:pointer;min-height:2.85rem;box-shadow:0 .7rem 1.6rem rgba(var(--color-primary-rgb), .2);transition:transform var(--transition-fast), filter var(--transition-fast);border:1px solid #ffffff29;border-radius:999px;align-items:center;gap:.55rem;margin-top:1.25rem;padding:0 1.1rem;font-size:.82rem;font-weight:720;display:inline-flex}:where([data-ui=radio]) .hero-play-button i{font-size:1rem}:where([data-ui=radio]) .hero-play-button:hover{filter:brightness(1.08);transform:translateY(-1px)}:where([data-ui=radio]) .hero-play-button:active{transform:translateY(1px)scale(.98)}:where([data-ui=radio]) .hero-play-button:disabled,:where([data-ui=radio]) .player-play-pause-btn:disabled{cursor:wait;filter:saturate(.45);opacity:.62}:where([data-ui=radio]) .signal-panel{justify-items:end;gap:.75rem;min-width:11rem;padding-bottom:.35rem;display:grid}:where([data-ui=radio]) .signal-panel>span{color:var(--color-text-subtle);letter-spacing:.08em;text-transform:uppercase;font-size:.65rem;font-weight:650}:where([data-ui=radio]) .eq-bars{align-items:end;gap:.35rem;height:4.5rem;display:flex}:where([data-ui=radio]) .eq-bars i{background:var(--color-primary-light);opacity:.85;transform-origin:bottom;border-radius:999px;width:.3rem;height:100%;animation:1.1s ease-in-out infinite alternate eq-bounce}:where([data-ui=radio]) .eq-bars i:nth-child(2n){animation-delay:-.8s}:where([data-ui=radio]) .eq-bars i:nth-child(3n){animation-delay:-.35s}:where([data-ui=radio]) .eq-bars.paused i{opacity:.25;animation-play-state:paused}@keyframes eq-bounce{0%{transform:scaleY(.18)}to{transform:scaleY(1)}}:where([data-ui=radio]) .station-library{margin-top:clamp(1.8rem,4vw,3rem)}:where([data-ui=radio]) .library-heading{justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.1rem;display:flex}:where([data-ui=radio]) .library-heading h2,:where([data-ui=radio]) .library-heading p{margin:0}:where([data-ui=radio]) .library-heading h2{letter-spacing:-.025em;font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:730}:where([data-ui=radio]) .library-heading p{color:var(--color-text-subtle);margin-top:.25rem;font-size:.78rem}:where([data-ui=radio]) .station-search{align-items:center;width:min(19rem,100%);display:flex;position:relative}:where([data-ui=radio]) .station-search i{color:var(--color-text-subtle);pointer-events:none;transition:color var(--transition-fast);font-size:1rem;position:absolute;left:.9rem}:where([data-ui=radio]) .station-search:focus-within i{color:var(--color-primary-light)}:where([data-ui=radio]) .station-search input{border:1px solid var(--color-border);width:100%;min-height:2.75rem;color:var(--color-text);font:inherit;transition:border-color var(--transition-fast), box-shadow var(--transition-fast);background:#111015e0;border-radius:999px;padding:0 1rem 0 2.5rem;font-size:.82rem}:where([data-ui=radio]) .station-search input::placeholder{color:var(--color-text-subtle)}:where([data-ui=radio]) .station-search input:focus-visible{border-color:var(--color-primary);background:var(--color-black-700);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb), .2);outline:none}:root [data-ui=radio] .radio-tabs{scrollbar-width:none;gap:.45rem;margin-bottom:.9rem;display:flex;overflow-x:auto}:root [data-ui=radio] .radio-tabs button{border:1px solid var(--color-border);min-height:2.35rem;color:var(--color-text-muted);cursor:pointer;transition:border-color var(--transition-fast), color var(--transition-fast);background:0 0;border-radius:999px;flex:none;align-items:center;gap:.45rem;padding:0 .85rem;font-size:.78rem;display:inline-flex}:root [data-ui=radio] .radio-tabs button:hover{color:var(--color-text);background:#ffffff0d;border-color:#ffffff38;transform:translateY(-1px)}:root [data-ui=radio] .radio-tabs small{color:inherit;font-size:.66rem}:root [data-ui=radio] .radio-tabs .radio-tab--active{border-color:rgba(var(--color-primary-rgb), .45);background:rgba(var(--color-primary-rgb), .13);color:var(--color-primary-light);box-shadow:inset 0 1px #ffffff12}:where([data-ui=radio]) .station-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin:0;padding:0;list-style:none;display:grid}:where([data-ui=radio]) .station-card{width:100%;min-height:5.5rem;color:var(--color-text);text-align:left;cursor:pointer;transition:border-color var(--transition-fast), transform var(--transition-normal);background:linear-gradient(145deg,#1b1a20f0,#141318f0);border:1px solid #ffffff0f;border-radius:.85rem;grid-template-columns:4rem minmax(0,1fr) 2.15rem;align-items:center;gap:.8rem;padding:.7rem;display:grid}:where([data-ui=radio]) .station-card:hover{background:linear-gradient(145deg,#222128f5,#17161bf5);border-color:#ffffff30;transform:translateY(-2px)}:where([data-ui=radio]) .station-card--active{border-color:rgba(var(--color-primary-rgb), .68);background:linear-gradient(135deg, rgba(var(--color-primary-rgb), .14), #121a16f0);box-shadow:inset 3px 0 0 var(--color-primary)}:where([data-ui=radio]) .station-artwork{background:#f5f5f4;border-radius:.65rem;place-items:center;width:4rem;height:4rem;padding:.25rem;display:grid;overflow:hidden}:where([data-ui=radio]) .station-artwork img{object-fit:contain;width:100%;height:100%}:where([data-ui=radio]) .station-logo-fallback{background:var(--color-black-600);width:100%;height:100%;color:var(--color-primary-light);place-items:center;font-size:1.5rem;display:grid}:where([data-ui=radio]) .station-copy{min-width:0;display:grid}:where([data-ui=radio]) .station-copy strong,:where([data-ui=radio]) .station-copy small,:where([data-ui=radio]) .station-state{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:where([data-ui=radio]) .station-copy strong{font-size:.92rem;font-weight:650}:where([data-ui=radio]) .station-copy small{color:var(--color-text-muted);margin-top:.16rem;font-size:.7rem}:where([data-ui=radio]) .station-state{color:var(--color-primary-light);margin-top:.18rem;font-size:.64rem;font-weight:650}:where([data-ui=radio]) .station-action{width:2.15rem;height:2.15rem;color:var(--color-text-muted);transition:color var(--transition-fast), background var(--transition-fast);background:#05050852;border:1px solid #ffffff1a;border-radius:50%;place-items:center;display:grid}:where([data-ui=radio]) .station-action i{font-size:.88rem}:where([data-ui=radio]) .station-card:hover .station-action{border-color:rgba(var(--color-primary-rgb), .45);background:var(--color-primary);color:#fff;transform:scale(1.04)}:where([data-ui=radio]) .station-card--active .station-action{border-color:rgba(var(--color-primary-rgb), .35);background:rgba(var(--color-primary-rgb), .15);color:var(--color-primary-light)}:where([data-ui=radio]) .empty-filter{border:1px dashed var(--color-border);min-height:11rem;color:var(--color-text-subtle);text-align:center;border-radius:.85rem;grid-column:1/-1;align-content:center;place-items:center;gap:.3rem;padding:2rem;display:grid}:where([data-ui=radio]) .empty-filter i{margin-bottom:.3rem;font-size:1.6rem}:where([data-ui=radio]) .empty-filter strong{color:var(--color-text-muted);font-size:.9rem}:where([data-ui=radio]) .empty-filter span{font-size:.75rem}:where([data-ui=radio]) .spotify-player-bar{z-index:30;min-height:5rem;padding:.65rem max(clamp(1rem, 4vw, 3rem), calc((100vw - var(--max-screen)) / 2 + 3rem));background:var(--panel-bg);border-top:1px solid #ffffff1a;grid-template-columns:minmax(12rem,1fr) auto minmax(12rem,1fr);align-items:center;gap:1.25rem;display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -1rem 3rem #00000040}:where([data-ui=radio]) .player-error{border:1px solid rgb(var(--color-primary-rgb) / 30%);color:var(--color-primary-light);background:#101a13f5;border-radius:.7rem;align-items:center;gap:.45rem;padding:.55rem .65rem .55rem .75rem;font-size:.74rem;display:flex;position:absolute;bottom:calc(100% + .6rem);right:50%;transform:translate(50%);box-shadow:0 .8rem 2rem #00000052}:where([data-ui=radio]) .player-error button{color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:999px;padding:.25rem .5rem;font-size:.7rem;font-weight:650}:where([data-ui=radio]) .player-left{align-items:center;gap:.75rem;min-width:0;display:flex}:where([data-ui=radio]) .bar-cover{border:1px solid var(--color-border);width:3.35rem;height:3.35rem;color:var(--color-primary-deep);transition:border-color var(--transition-normal);background:#f5f5f4;border-radius:.65rem;flex:none;place-items:center;padding:.2rem;display:grid;overflow:hidden}:where([data-ui=radio]) .spotify-player-bar.playing .bar-cover{border-color:rgba(var(--color-primary-rgb), .5)}:where([data-ui=radio]) .bar-cover img{object-fit:contain;width:100%;height:100%}:where([data-ui=radio]) .bar-copy{min-width:0;display:grid}:where([data-ui=radio]) .bar-title,:where([data-ui=radio]) .bar-copy small{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:where([data-ui=radio]) .bar-title{font-size:.86rem;font-weight:650}:where([data-ui=radio]) .bar-copy small{color:var(--color-text-subtle);margin-top:.12rem;font-size:.68rem}:where([data-ui=radio]) .player-center{justify-items:center;display:grid}:where([data-ui=radio]) .playback-controls{align-items:center;gap:.6rem;display:inline-flex}:where([data-ui=radio]) .player-control-btn,:where([data-ui=radio]) .player-play-pause-btn{cursor:pointer;border-radius:50%;place-items:center;display:grid}:where([data-ui=radio]) .player-control-btn{width:2.35rem;height:2.35rem;color:var(--color-text-muted);transition:color var(--transition-fast), transform var(--transition-fast);background:0 0;border:1px solid #0000}:where([data-ui=radio]) .player-control-btn:hover{color:var(--color-text);background:#ffffff0d;border-color:#ffffff1a;transform:translateY(-1px)}:where([data-ui=radio]) .player-play-pause-btn{background:var(--color-primary-gradient);color:#fff;width:2.9rem;height:2.9rem;box-shadow:0 .45rem 1.2rem rgba(var(--color-primary-rgb), .28);transition:transform var(--transition-fast), filter var(--transition-fast);border:1px solid #ffffff29;font-size:1.1rem}:where([data-ui=radio]) .player-play-pause-btn:hover{filter:brightness(1.08);transform:scale(1.05)}:where([data-ui=radio]) .player-control-btn:active,:where([data-ui=radio]) .player-play-pause-btn:active{transform:translateY(1px)scale(.96)}:where([data-ui=radio]) .player-right{color:var(--color-text-muted);justify-self:end;align-items:center;gap:.65rem;display:inline-flex}:where([data-ui=radio]) .player-right i{font-size:1rem}:where([data-ui=radio]) .volume-slider{width:clamp(6rem,10vw,9rem);height:1rem;accent-color:var(--color-primary);cursor:pointer}@media (width<=63.98rem){:where([data-ui=radio]) .station-grid{grid-template-columns:repeat(2,minmax(0,1fr))}:where([data-ui=radio]) .spotify-player-bar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}:where([data-ui=radio]) .signal-panel{min-width:8rem}}@media (width<=47.99rem){:where([data-ui=radio]) .radio-page{padding:calc(5rem + env(safe-area-inset-top)) 1rem calc(7rem + env(safe-area-inset-bottom))}:where([data-ui=radio]) .radio-hero{grid-template-columns:6rem minmax(0,1fr);align-items:center;gap:1rem;min-height:15rem}:where([data-ui=radio]) .hero-artwork{border-radius:.8rem;width:6rem}:where([data-ui=radio]) .hero-kicker{margin-top:.7rem}:where([data-ui=radio]) .hero-title{font-size:clamp(1.8rem,9vw,2.65rem)}:where([data-ui=radio]) .hero-subtitle{white-space:normal}:where([data-ui=radio]) .hero-play-button{min-height:2.6rem;margin-top:.9rem}:where([data-ui=radio]) .signal-panel{display:none}:where([data-ui=radio]) .library-heading{flex-direction:column;align-items:stretch}:where([data-ui=radio]) .station-search{width:100%}:where([data-ui=radio]) .station-grid,:where([data-ui=radio]) .loading-grid{grid-template-columns:1fr}:where([data-ui=radio]) .spotify-player-bar{min-height:calc(4.85rem + env(safe-area-inset-bottom));padding:.55rem .8rem calc(.55rem + env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr) auto;gap:.55rem}:where([data-ui=radio]) .bar-cover{width:2.85rem;height:2.85rem}:where([data-ui=radio]) .bar-copy small{max-width:36vw}:where([data-ui=radio]) .player-right{display:none}:where([data-ui=radio]) .player-control-btn{width:2rem;height:2rem}:where([data-ui=radio]) .player-play-pause-btn{width:2.65rem;height:2.65rem}:where([data-ui=radio]) .playback-controls{gap:.25rem}:where([data-ui=radio]) .player-error{justify-content:center;left:.8rem;right:.8rem;transform:none}}@media (width<=27rem){:where([data-ui=radio]) .radio-hero{grid-template-columns:4.6rem minmax(0,1fr);padding:1.15rem}:where([data-ui=radio]) .hero-artwork{width:4.6rem}:where([data-ui=radio]) .hero-title{font-size:1.8rem}:where([data-ui=radio]) .hero-play-button span{display:none}:where([data-ui=radio]) .hero-play-button{justify-content:center;width:2.6rem;padding:0}:where([data-ui=radio]) .station-card{grid-template-columns:3.5rem minmax(0,1fr) 2rem}:where([data-ui=radio]) .station-artwork{width:3.5rem;height:3.5rem}:where([data-ui=radio]) .bar-copy small{display:none}}@media (prefers-reduced-motion:reduce){:where([data-ui=radio]) .loading-hero,:where([data-ui=radio]) .loading-grid span,:where([data-ui=radio]) .pulse-dot,:where([data-ui=radio]) .eq-bars i{animation:none}:root [data-ui=radio] .hero-play-button:hover,:root [data-ui=radio] .station-card:hover,:root [data-ui=radio] .radio-tabs button:hover,:root [data-ui=radio] .station-card:hover .station-action,:root [data-ui=radio] .player-control-btn:hover,:root [data-ui=radio] .player-play-pause-btn:hover{transform:none}}
