:root{
  --bg:#0e0f12; --bg2:#15171c; --fg:#f2f3f5; --muted:#9aa0aa; --accent:#ff4d4d; --accent2:#ff8a5b;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}
a{color:inherit}
.top{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:1000px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;letter-spacing:.3px}
.brand .dot{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent)}
nav a{margin-left:18px;text-decoration:none;color:var(--muted);font-weight:500}
nav a:hover{color:var(--fg)}
main{max-width:1000px;margin:0 auto;padding:0 24px 60px}
.hero{text-align:center;padding:60px 0 40px}
.live-pill{display:inline-flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid #262a33;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--muted)}
.live-pill.on{color:var(--accent);border-color:var(--accent)}
.pulse{width:8px;height:8px;border-radius:50%;background:currentColor}
.live-pill.on .pulse{animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,77,.6)}70%{box-shadow:0 0 0 10px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
h1{font-size:clamp(40px,8vw,84px);margin:14px 0 6px;font-weight:900;letter-spacing:-1.5px;background:linear-gradient(90deg,var(--fg),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{color:var(--muted);font-size:18px;margin:0 0 34px}
.player{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;background:var(--bg2);border:1px solid #262a33;border-radius:var(--radius);padding:20px 24px;text-align:left;max-width:720px;margin:0 auto}
.play{width:76px;height:76px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .1s,filter .2s;box-shadow:0 10px 30px rgba(255,77,77,.35)}
.play:hover{transform:scale(1.04)}
.play:disabled{filter:grayscale(1);opacity:.5;cursor:not-allowed;box-shadow:none}
.play svg{display:none}
.play[data-state="idle"] .icon-play,.play[data-state="error"] .icon-play{display:block}
.play[data-state="playing"] .icon-pause{display:block}
.play[data-state="loading"] .icon-spin{display:block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.now-label{font-size:11px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;font-weight:700}
.now-title{font-size:20px;font-weight:700;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now-artist{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vol{display:flex;align-items:center;gap:8px;color:var(--muted)}
.vol input{width:110px;accent-color:var(--accent)}
.hint{color:var(--muted);font-size:13px;margin-top:14px}
.hint code{background:var(--bg2);padding:2px 6px;border-radius:6px}
.block{padding:40px 0;border-top:1px solid #1e2128}
h2{font-size:28px;margin:0 0 8px;letter-spacing:-.5px}
.muted{color:var(--muted)}
.sched{width:100%;border-collapse:collapse;margin-top:14px}
.sched td{padding:12px 10px;border-bottom:1px solid #1e2128}
.sched td:first-child{font-weight:700;width:70px;color:var(--accent2)}
.sched td:nth-child(2){color:var(--muted);width:140px;white-space:nowrap}
.sched .host{color:var(--muted);font-size:13px}
.btn-ghost{display:inline-block;padding:10px 16px;border:1px solid #2a2f39;border-radius:999px;text-decoration:none;color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent)}
.social a{margin-right:16px;color:var(--muted);text-decoration:none}
.social a:hover{color:var(--fg)}
footer{max-width:1000px;margin:0 auto;padding:20px 24px 40px;display:flex;justify-content:space-between;color:var(--muted);font-size:13px;border-top:1px solid #1e2128}
@media (max-width:640px){
  .player{grid-template-columns:auto 1fr;gap:14px;padding:16px}
  .vol{grid-column:1/-1;justify-content:center}
  .vol input{width:100%}
  nav a{margin-left:12px;font-size:14px}
  footer{flex-direction:column;gap:6px;text-align:center}
}