:root {
  --bg:#0B0614; --bg-2:#160B28; --magenta:#FF2BD6; --cyan:#22E6FF;
  --gold:#FFD36A; --text:#F6F1FF; --muted:#B9A8D4; --card:rgba(255,255,255,.06); --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Manrope,system-ui,sans-serif;background:radial-gradient(1200px 600px at 80% -10%,#3a1060 0%,transparent 50%),var(--bg);color:var(--text);line-height:1.5}
h1,h2,.brand-disco,.poster time{font-family:"Bebas Neue",Impact,sans-serif;letter-spacing:.04em}
h1{font-size:clamp(2.6rem,10vw,6.5rem);margin:.2em 0;text-shadow:0 0 40px #FF2BD680}
h2{font-size:clamp(2rem,5vw,3.2rem)}
a{color:var(--cyan)}
.scanlines{pointer-events:none;position:fixed;inset:0;z-index:40;background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.12) 2px 3px);opacity:.25}
.grain{pointer-events:none;position:fixed;inset:0;z-index:39;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
.topbar{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;padding:.7rem 1rem;background:#0B0614ee;backdrop-filter:blur(10px);border-bottom:1px solid #FF2BD633}
.brand{text-decoration:none;color:inherit;display:flex;flex-direction:column;line-height:1}
.brand-small{font-size:.65rem;color:var(--muted)}
.brand-disco{font-size:1.8rem;color:var(--magenta);text-shadow:0 0 16px var(--magenta);font-family:Audiowide,sans-serif}
.status{display:flex;gap:.6rem;align-items:center;font-size:.85rem;color:var(--muted)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#3dff8a;box-shadow:0 0 10px #3dff8a;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.4}}
.top-cta,.hero-actions,.form-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:.55rem 1rem;font:650 .9rem/1 Manrope,sans-serif;text-decoration:none;cursor:pointer;color:#0B0614}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.btn-magenta{background:var(--magenta);color:#1a0518}
.btn-gold{background:var(--gold)}
.btn-cyan{background:var(--cyan);color:#041218}
.btn-ghost{background:transparent;color:var(--text);border:1px solid #ffffff33}
.btn-lg{padding:.9rem 1.4rem;font-size:1rem}
.btn:hover{filter:brightness(1.08);box-shadow:0 0 24px #FF2BD655}
.hero{position:relative;padding:3rem 1.2rem 4rem;overflow:hidden;text-align:center}
.hero-sub,.show-line{color:var(--muted)}
.show-line{font-weight:700;color:var(--gold)}
.disco-ball{width:min(220px,50vw);position:absolute;right:6%;top:1rem;opacity:.85;animation:spin 18s linear infinite}
.beams{position:absolute;inset:-20% 10% auto;height:280px;background:conic-gradient(from 200deg,transparent 0 70%,#22E6FF22 75%,#FF2BD622 85%,transparent 90%);filter:blur(8px)}
@keyframes spin{to{transform:rotate(360deg)}}
.now-playing{margin:2rem auto;max-width:640px;display:flex;gap:1rem;text-align:left;background:var(--card);border:1px solid #ffffff14;border-radius:var(--radius);padding:1rem}
.now-playing img{width:120px;height:120px;border-radius:16px;object-fit:cover;background:#160B28}
.np-label{margin:0;color:var(--gold);font-size:.75rem;letter-spacing:.16em}
.np-track{margin:.3rem 0 1rem;font-size:1.25rem;font-weight:700}
.progress{height:6px;background:#ffffff18;border-radius:99px;overflow:hidden;margin-bottom:.6rem}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--magenta),var(--cyan))}
.section{padding:3rem 1.2rem;max-width:1120px;margin:0 auto}
.lead,.muted{color:var(--muted)}
.cols{display:grid;gap:1rem}
@media(min-width:768px){.cols{grid-template-columns:repeat(3,1fr)}}
.col{background:var(--bg-2);border-radius:var(--radius);padding:1rem;border:1px solid #ffffff10}
.col h3{margin-top:0;color:var(--cyan)}
.card{display:grid;grid-template-columns:56px 1fr auto;gap:.7rem;align-items:center;padding:.55rem 0;border-bottom:1px solid #ffffff10}
.card img{width:56px;height:56px;border-radius:12px;object-fit:cover}
.tag{font-size:.7rem;color:var(--gold)}
.want{font-size:.75rem;background:transparent;color:var(--magenta);border:1px solid var(--magenta);border-radius:99px;padding:.3rem .55rem;cursor:pointer}
.form{display:grid;gap:.8rem;max-width:560px}
label{display:grid;gap:.3rem;font-size:.85rem;color:var(--muted)}
input{background:#ffffff0c;border:1px solid #ffffff22;color:var(--text);border-radius:14px;padding:.7rem .85rem;font:inherit}
.queue{list-style:none;padding:0}
.queue li{padding:.4rem 0;border-bottom:1px dashed #ffffff18;display:flex;gap:.6rem;align-items:center}
.poster{list-style:none;padding:0}
.poster li{display:flex;gap:1.2rem;align-items:baseline;font-size:clamp(1.4rem,4vw,2.4rem);border-bottom:2px solid var(--magenta);padding:.6rem 0}
.poster time{color:var(--gold);min-width:4.5rem}
.poster li.is-on{color:var(--cyan);text-shadow:0 0 18px #22E6FF66}
.grid-covers{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media(min-width:768px){.grid-covers{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--card);border-radius:20px;padding:.6rem;cursor:pointer;border:1px solid transparent;color:inherit;text-align:left;font:inherit}
.tile img{width:100%;aspect-ratio:1;border-radius:14px;object-fit:cover}
.tile:hover,.tile:focus-visible{border-color:var(--cyan)}
.crew{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.person{background:var(--card);border-radius:var(--radius);padding:1rem}
.badge{display:inline-block;background:var(--magenta);color:#1a0518;font-size:.7rem;font-weight:800;padding:.15rem .5rem;border-radius:99px}
.ticker-wrap{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding:1rem 1.2rem;background:#12081F;border-top:1px solid #22E6FF33}
.marquee{flex:1;overflow:hidden;white-space:nowrap;color:var(--muted)}
.footer{padding:2rem 1.2rem 4rem;text-align:center;color:var(--muted)}
.footer a{color:var(--gold)}
dialog{border:0;border-radius:24px;background:var(--bg-2);color:var(--text);padding:0}
.modal-box{padding:1.2rem}
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%) translateY(140%);background:var(--magenta);color:#1a0518;font-weight:800;padding:.7rem 1.1rem;border-radius:999px;z-index:80;transition:transform .25s}
.toast.show{transform:translateX(-50%) translateY(0)}
audio{width:min(100%,420px);margin-top:1rem}
@media(prefers-reduced-motion:reduce){.disco-ball,.live-dot,.scanlines{animation:none}html{scroll-behavior:auto}}