*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    :root {
      --bg:#080810; --s1:#0d0d1a; --w:#f0eeff;
      --wm:rgba(240,238,255,0.5); --wf:rgba(240,238,255,0.18);
      --p:#c084fc; --p2:#e879f9; --b:#38bdf8;
      --g:#34d399; --r:#f98282; --l:#f72f07;
    }
    html,body{height:100%;}
    body {
      background:var(--bg); font-family:'Outfit',sans-serif; color:var(--w);
      min-height:100vh; display:flex; flex-direction:column;
      align-items:center; justify-content:center; overflow:hidden; position:relative;
    }
    body::before {
      content:''; position:fixed; inset:0; z-index:0;
      background:
        radial-gradient(ellipse 80% 50% at 20% 10%,rgba(192,132,252,0.12) 0%,transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%,rgba(56,189,248,0.1) 0%,transparent 55%),
        radial-gradient(ellipse 50% 60% at 50% 50%,rgba(247,47,7,0.06) 0%,transparent 60%);
      pointer-events:none;
    }
    body::after {
      content:''; position:fixed; inset:0; z-index:0;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
      background-size:180px; opacity:0.4; pointer-events:none;
    }
    .wrap {
      position:relative; z-index:1; width:min(460px,94vw);
      display:flex; flex-direction:column; gap:2px;
      animation:fadeUp 0.6s ease both;
    }
    @keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

    .topbar {
      display:flex; align-items:center; justify-content:space-between;
      padding:1.4rem 2rem; background:var(--bg);
      border:1px solid rgba(255,255,255,0.06); position:relative; overflow:hidden;
    }
    .topbar::after {
      content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
      background:linear-gradient(90deg,transparent,var(--p),var(--b),transparent); opacity:0.4;
    }
    .logo {
      font-size:1.4rem; font-weight:900; letter-spacing:-0.02em;
      background:linear-gradient(135deg,#fff 0%,#e0d4ff 40%,var(--p) 70%,var(--p2) 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .live-badge {
      display:inline-flex; align-items:center; gap:0.45rem;
      font-size:0.65rem; font-weight:700; letter-spacing:0.25em; text-transform:uppercase;
      color:var(--l); background:rgba(247,47,7,0.08);
      border:1px solid rgba(247,47,7,0.25); padding:0.3rem 0.75rem; border-radius:100px;
    }
    .live-dot {
      width:6px; height:6px; border-radius:50%;
      background:var(--l); box-shadow:0 0 8px var(--l);
      animation:pulse 1.4s ease infinite;
    }
    @keyframes pulse {
      0%,100%{opacity:1;box-shadow:0 0 8px var(--l)} 50%{opacity:0.3;box-shadow:none}
    }

    .player {
      background:var(--s1); border:1px solid rgba(255,255,255,0.06);
      padding:2.2rem 2rem 1.8rem; position:relative; overflow:hidden;
    }
    .player::before {
      content:''; position:absolute; top:0; left:0; right:0; height:2px;
      background:linear-gradient(90deg,var(--l),var(--p),var(--b)); opacity:0.7;
    }
    .player-orb {
      position:absolute; width:300px; height:300px; border-radius:50%;
      background:radial-gradient(circle,rgba(247,47,7,0.1) 0%,transparent 65%);
      bottom:-100px; right:-80px; pointer-events:none;
      animation:orbDrift 8s ease-in-out infinite alternate; transition:background 0.8s;
    }
    .player-orb.active { background:radial-gradient(circle,rgba(192,132,252,0.18) 0%,transparent 65%); }
    @keyframes orbDrift { from{transform:translate(0,0) scale(1)} to{transform:translate(20px,15px) scale(1.1)} }

    /* Visualizer */
    .viz {
      display:flex; align-items:flex-end; gap:3px;
      height:52px; margin-bottom:1.8rem; justify-content:center;
    }
    .bar { width:3px; border-radius:2px; height:4px; }
    .bar:nth-child(3n)   { background:var(--p); }
    .bar:nth-child(3n+1) { background:var(--l); }
    .bar:nth-child(3n+2) { background:var(--b); }
    .playing .bar { animation:eq var(--dur,0.8s) ease-in-out infinite alternate; }
    @keyframes eq { from{height:4px;opacity:0.4} to{height:var(--h,28px);opacity:1} }

    /* Track info */
    .now-label {
      font-family:'Noto Sans JP',sans-serif; font-size:0.62rem; font-weight:300;
      letter-spacing:0.3em; text-transform:uppercase; color:var(--wf); margin-bottom:0.5rem;
    }
    .track-name-wrap {
      overflow:hidden; white-space:nowrap; margin-bottom:0.3rem;
      position:relative;
    }
    .track-name-wrap::after {
      content:''; position:absolute; right:0; top:0; bottom:0; width:40px;
      background:linear-gradient(90deg,transparent,var(--s1)); pointer-events:none;
    }
    .track-name {
      display:inline-block; font-size:1.6rem; font-weight:900;
      letter-spacing:-0.02em; line-height:1.15; white-space:nowrap;
      background:linear-gradient(135deg,#fff 0%,var(--p) 60%,var(--p2) 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
      transition:opacity 0.3s;
    }
    .track-name.scrolling { animation:marquee 12s linear infinite; }
    @keyframes marquee {
      0%,20%  { transform:translateX(0); }
      80%,100%{ transform:translateX(var(--scroll-dist,-100px)); }
    }
    .track-artist {
      font-size:0.9rem; color:var(--wm); margin-bottom:0.25rem;
      font-weight:600; letter-spacing:0.02em;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      transition:opacity 0.3s;
    }
    .track-sub {
      font-size:0.7rem; color:var(--wf); margin-bottom:1.8rem;
      font-weight:300; letter-spacing:0.08em;
      display:flex; align-items:center; gap:0.4rem;
    }

    /* Controls */
    .controls { display:flex; align-items:center; gap:1.2rem; }
    .btn-play {
      width:54px; height:54px; border-radius:50%; border:none;
      background:linear-gradient(135deg,var(--l) 0%,var(--p) 100%);
      color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
      flex-shrink:0; transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1),filter 0.2s;
      position:relative;
    }
    .btn-play::after {
      content:''; position:absolute; inset:-3px; border-radius:50%;
      border:1px solid rgba(192,132,252,0.35); opacity:0; transition:opacity 0.3s;
    }
    .btn-play:hover{transform:scale(1.08);filter:brightness(1.15)}
    .btn-play:hover::after{opacity:1}
    .btn-play:active{transform:scale(0.96)}
    .btn-play i{font-size:1.1rem}
    .vol-wrap{flex:1;display:flex;flex-direction:column;gap:0.4rem}
    .vol-label{font-family:'Noto Sans JP',sans-serif;font-size:0.6rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--wf)}
    .vol-row{display:flex;align-items:center;gap:0.6rem}
    .vol-icon{color:var(--wf);font-size:0.75rem}
    input[type=range]{-webkit-appearance:none;flex:1;height:2px;background:rgba(255,255,255,0.1);border-radius:2px;outline:none;cursor:pointer}
    input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--p);cursor:pointer;transition:transform 0.15s}
    input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.4)}

    .statusbar {
      margin-top:1.8rem; padding-top:1.2rem;
      border-top:1px solid rgba(255,255,255,0.06);
      display:flex; justify-content:space-between; align-items:center;
    }
    .status-left{font-size:0.65rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--wf)}
    .status-left span{color:var(--p)}
    .listeners{display:flex;align-items:center;gap:0.4rem;font-family:'Noto Sans JP',sans-serif;font-size:0.65rem;color:var(--wf)}
    .listeners i{font-size:0.6rem;color:var(--g)}
    .error-msg{display:none;margin-top:0.8rem;font-size:0.72rem;font-weight:600;letter-spacing:0.1em;color:var(--l);text-align:center}

    .footer {
      padding:0.9rem 2rem; background:var(--bg);
      border:1px solid rgba(255,255,255,0.04);
      display:flex; align-items:center; justify-content:space-between;
    }
    .footer-sig{font-family:'Noto Sans JP',sans-serif;font-size:0.65rem;font-weight:300;color:rgba(255,255,255,0.15);letter-spacing:0.15em}
    .footer-back{font-size:0.65rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.2);text-decoration:none;transition:color 0.2s}
    .footer-back:hover{color:var(--p)}