:root{--bg:#24252c;--bg2:#1c1d23;--disc:#2c2d35;--fg:#f4f4f6;--dim:#7c7e88;--line:#4a4c56;--yellow:#f2dc3a;--red:#d9223a;--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg2);color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased}
.app{max-width:720px;margin:0 auto;background:var(--bg);min-height:100vh;overflow:hidden}
.top{display:flex;align-items:center;justify-content:space-between;padding:28px 28px 0;position:relative;z-index:5}
.brand{font-size:1.5rem;font-weight:700;color:var(--dim);letter-spacing:-.02em}
.nav-desktop{display:none;gap:28px}
.nav-desktop a,.mobile-menu a{color:var(--dim);text-decoration:none;font-size:1rem;transition:color .2s}
.nav-desktop a:hover,.mobile-menu a:hover{color:var(--fg)}
.menu-btn{background:none;border:0;color:var(--fg);cursor:pointer;padding:6px;transition:transform .3s}
.menu-btn[aria-expanded=true]{transform:rotate(180deg)}
.mobile-menu{display:flex;flex-direction:column;margin:12px 20px 0;background:var(--disc);border:1px solid var(--line);border-radius:16px;overflow:hidden;animation:drop .25s ease}
.mobile-menu a{padding:16px 20px;border-bottom:1px solid var(--line);font-size:1.1rem;color:var(--fg)}
.mobile-menu a:last-child{border:0}
.hidden{display:none!important}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}}
.player{display:flex;flex-direction:column;align-items:center;padding-top:40px}
.station{color:var(--dim);font-size:1.5rem;letter-spacing:.02em}
.freq{font-size:clamp(4.5rem,20vw,7rem);font-weight:700;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.band{display:flex;gap:28px;font-size:1.6rem;color:var(--dim);margin-top:8px}
.band .on{color:var(--yellow)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);margin:10px 0 0 -62px}
.status{color:var(--dim);font-size:.85rem;margin-top:14px;min-height:1.2em}
.status.live{color:var(--yellow)}
.status.live::before{content:"● ";animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
.tuner{position:relative;width:100%;height:420px;margin-top:30px;touch-action:none;cursor:grab}
.tuner:active{cursor:grabbing}
.pointer{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:3}
.pointer::before{content:"";display:block;border:8px solid transparent;border-top:11px solid var(--yellow);border-bottom:0;margin:0 auto 8px}
.pointer::after{content:"";display:block;width:3px;height:56px;background:var(--red);margin:0 auto;border-radius:2px}
#dial{position:absolute;left:50%;top:10px;width:1000px;height:1000px;transform:translateX(-50%);transition:transform .05s linear}
#dial text{fill:var(--fg);font-size:22px;font-weight:600;font-family:var(--font)}
.knob{position:absolute;left:50%;top:115px;width:64px;height:80px;transform:translateX(-50%);border:2px solid var(--line);border-radius:12px 12px 16px 16px;background:rgba(36,37,44,.85);box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:3;display:grid;place-items:center}
.knob i{width:3px;height:50px;background:var(--red);border-radius:2px}
.disc{position:absolute;left:50%;top:280px;width:1100px;height:1100px;transform:translateX(-50%);border-radius:50%;background:var(--disc);box-shadow:0 -20px 50px rgba(0,0,0,.45)}
.disc::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.hub{position:absolute;left:50%;top:80px;width:62px;height:62px;transform:translateX(-50%);border:1px solid var(--line);border-radius:50%;background:var(--disc)}
.controls{display:flex;align-items:center;justify-content:center;gap:clamp(14px,6vw,90px);margin-top:-150px;position:relative;z-index:4}
.ctl,.play{background:none;border:0;color:var(--dim);cursor:pointer;display:grid;place-items:center;transition:color .2s,transform .15s}
.ctl svg{width:54px;height:54px;fill:currentColor}
.ctl:hover{color:var(--fg)}
.play{width:190px;height:190px;border-radius:50%;border:1.5px solid var(--line);background:var(--disc);color:var(--fg)}
.play svg{width:64px;height:64px;fill:currentColor}
.play:active,.ctl:active{transform:scale(.94)}
.play .i-pause{display:none}.play.playing .i-play{display:none}.play.playing .i-pause{display:block}
.play.loading{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(242,220,58,.08)}}
.volume{display:flex;align-items:center;gap:12px;margin:28px 0 10px;position:relative;z-index:4;color:var(--dim);font-size:.85rem}
.volume input{accent-color:var(--yellow);width:180px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.panel{position:relative;z-index:4;margin:24px 20px;padding:24px;background:var(--disc);border:1px solid var(--line);border-radius:20px;scroll-margin-top:20px}
.panel h2{font-size:1.4rem;margin-bottom:14px}
.panel p{color:var(--dim);line-height:1.6}.panel a{color:var(--yellow)}
.prog{list-style:none}.prog li{display:flex;gap:18px;padding:12px 0;border-bottom:1px solid var(--line)}
.prog li:last-child{border:0}.prog b{color:var(--yellow);font-variant-numeric:tabular-nums;width:56px}
.foot{text-align:center;color:var(--dim);font-size:.8rem;padding:24px 0 40px}
@media(min-width:768px){.nav-desktop{display:flex}.menu-btn,.mobile-menu{display:none!important}.app{border-left:1px solid #000;border-right:1px solid #000}}
@media(max-width:380px){.play{width:150px;height:150px}.ctl svg{width:42px;height:42px}.tuner{height:380px}.controls{margin-top:-130px}}