:root{
  --bg:#08080c;
  --text:#f4f4f8;
  --muted:#9a9aa8;
  --card:rgba(255,255,255,.045);
  --border:rgba(255,255,255,.09);
  --accent:#b14bff;
  --grad:linear-gradient(135deg,#7c5cff,#b14bff 55%,#22d3ee);
  --radius:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Sora",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(60vw 60vw at 12% -10%,rgba(124,92,255,.22),transparent 60%),
    radial-gradient(55vw 55vw at 100% 0%,rgba(34,211,238,.14),transparent 55%),
    radial-gradient(70vw 60vw at 50% 120%,rgba(177,75,255,.16),transparent 60%);
}
img{display:block;max-width:100%}

.site{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px clamp(18px,5vw,48px);
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(14px);
  background:rgba(8,8,12,.55);
  border-bottom:1px solid var(--border);
}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:var(--text);
}
.brand .mark{width:30px;height:30px}
.brand .word{
  font-weight:800;
  font-size:1.2rem;
  letter-spacing:-.02em;
}
.live{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 15px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  font-size:.78rem;
  font-weight:600;
  color:var(--muted);
}
.live .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--muted);
}
.live:not([data-off]){
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#ff4d8d,#b14bff);
}
.live:not([data-off]) .dot{
  background:#fff;
  animation:pulse 1.4s infinite;
}
@keyframes pulse{50%{opacity:.3;transform:scale(.8)}}

.hero{
  flex:1;
  display:grid;
  place-items:center;
  padding:clamp(40px,9vw,96px) clamp(18px,5vw,48px);
  width:100%;
}
.hero-inner{
  width:100%;
  max-width:720px;
  text-align:center;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  font-weight:700;
  color:var(--muted);
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(2.6rem,10vw,5.4rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.tagline{
  margin:16px auto 0;
  max-width:36ch;
  color:var(--muted);
  font-size:clamp(1rem,2.6vw,1.2rem);
}

.player{
  margin:clamp(30px,6vw,46px) auto 0;
  max-width:640px;
  display:grid;
  grid-template-columns:132px 1fr;
  gap:clamp(18px,4vw,28px);
  align-items:center;
  text-align:left;
  padding:clamp(18px,4vw,26px);
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--card);
  backdrop-filter:blur(18px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
}
.art{
  position:relative;
  width:132px;
  height:132px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:radial-gradient(circle at 50% 35%,rgba(124,92,255,.22),transparent 70%),#0c0c13;
  border:1px solid var(--border);
}
.art img{width:58%}
.art .ring{
  position:absolute;
  inset:-2px;
  border-radius:22px;
  padding:2px;
  background:conic-gradient(from 0deg,transparent 0deg,var(--accent) 120deg,#22d3ee 220deg,transparent 320deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;
  transition:opacity .3s;
}
.player.is-playing .art .ring{
  opacity:1;
  animation:spin 3.5s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.panel{min-width:0;display:flex;flex-direction:column;gap:16px}
.status{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.68rem;
  font-weight:700;
  color:var(--muted);
}
.now{
  font-weight:700;
  font-size:1.18rem;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.viz{
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:24px;
}
.viz i{
  width:4px;
  height:5px;
  border-radius:3px;
  background:var(--grad);
  opacity:.55;
  animation:eq 1s ease-in-out infinite;
  animation-play-state:paused;
}
.viz i:nth-child(2){animation-delay:.18s}
.viz i:nth-child(3){animation-delay:.36s}
.viz i:nth-child(4){animation-delay:.09s}
.viz i:nth-child(5){animation-delay:.27s}
.viz i:nth-child(6){animation-delay:.45s}
.viz i:nth-child(7){animation-delay:.12s}
.player.is-playing .viz i{animation-play-state:running;opacity:1}
@keyframes eq{0%,100%{height:5px}50%{height:24px}}

.controls{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.play{
  position:relative;
  width:64px;
  height:64px;
  flex:none;
  border:0;
  border-radius:50%;
  cursor:pointer;
  background:var(--grad);
  display:grid;
  place-items:center;
  box-shadow:0 12px 30px -8px rgba(177,75,255,.6);
  transition:transform .15s,box-shadow .15s;
}
.play:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(177,75,255,.7)}
.play:active{transform:translateY(0)}
.play .i{width:26px;height:26px;fill:#fff}
.play .pause-icon{display:none}
.player.is-playing .play .play-icon{display:none}
.player.is-playing .play .pause-icon{display:block}
.play .spinner{
  position:absolute;
  width:26px;height:26px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  display:none;
}
.player.is-loading .play .i{display:none}
.player.is-loading .play .spinner{display:block;animation:spin .8s linear infinite}

.volume{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:150px;
}
.vicon{width:22px;height:22px;flex:none;fill:var(--muted)}
.vicon .wave{fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  outline:none;
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:#fff;
  border:3px solid var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);
}
.listeners{
  font-size:.82rem;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
}

.hint{
  margin:clamp(26px,5vw,36px) auto 0;
  max-width:44ch;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.6;
}

.site-foot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  padding:28px 18px 36px;
  color:var(--muted);
  font-size:.82rem;
  border-top:1px solid var(--border);
}
.site-foot .sep{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.6}

@media(max-width:620px){
  .player{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  .panel{align-items:center;width:100%}
  .now{max-width:80vw}
  .controls{justify-content:center}
  .volume{order:3;width:100%}
  .listeners{width:100%;text-align:center}
}