@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@400;600&display=swap');
  *{box-sizing:border-box;margin:0;padding:0}
  #bsroot{
    background:radial-gradient(ellipse at 50% 0%,#0d1b3e 0%,#050b1a 60%,#000 100%);
    min-height:100vh;display:flex;flex-direction:column;align-items:center;
    padding:16px 0 20px;font-family:'Rajdhani',sans-serif;position:relative;overflow:hidden;
  }
  #bsroot::before{
    content:'';position:absolute;inset:0;
    background:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(0,200,255,0.03) 40px),
               repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(0,200,255,0.03) 40px);
    pointer-events:none;
  }
  h2.sr-only {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}
  #hud{display:flex;justify-content:space-between;align-items:center;width:420px;margin-bottom:10px;position:relative;z-index:2;}
  #score-wrap{text-align:left}
  #slabel{font-size:11px;letter-spacing:2px;color:#00c8ff;text-transform:uppercase;opacity:.7}
  #sval{font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;color:#fff;text-shadow:0 0 12px #00c8ff,0 0 24px #00c8ff88;line-height:1}
  #gmsg{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;color:#ffe040;text-shadow:0 0 10px #ffe040;letter-spacing:1px;min-height:20px;}
  #rbtn{
    font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;
    padding:7px 16px;border:1.5px solid #00c8ff;border-radius:4px;background:rgba(0,200,255,.08);
    color:#00c8ff;cursor:pointer;text-transform:uppercase;transition:all .2s;
    box-shadow:0 0 10px rgba(0,200,255,.2),inset 0 0 6px rgba(0,200,255,.06);
  }
  #rbtn:hover{background:rgba(0,200,255,.2);box-shadow:0 0 20px rgba(0,200,255,.5);}
  canvas{display:block;border-radius:12px;}
  #gc{border:1px solid rgba(0,200,255,.25);box-shadow:0 0 40px rgba(0,200,255,.12),0 0 80px rgba(0,0,80,.5),inset 0 0 30px rgba(0,0,40,.8);}
  #nc{border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(0,10,30,.6);}
  #bottom{display:flex;align-items:center;gap:14px;margin-top:10px;position:relative;z-index:2;}
  #nlabel{font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.4);text-transform:uppercase}
  #lvlbar{width:100px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;}
  #lvlfill{height:100%;width:0%;background:linear-gradient(90deg,#00c8ff,#a020f0);border-radius:2px;transition:width .4s;}
  #poplayer{position:absolute;top:0;left:0;pointer-events:none;z-index:5;}
  #canvas-wrap{position:relative;}

  /* Music bar */
  #musicbar{
    display:flex;align-items:center;gap:10px;width:420px;margin-bottom:8px;
    background:rgba(0,10,30,.7);border:0.5px solid rgba(0,200,255,.2);
    border-radius:8px;padding:8px 14px;position:relative;z-index:2;
  }
  #muteBtn{
    font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:1px;
    padding:5px 12px;border:1px solid rgba(0,200,255,.5);border-radius:4px;
    background:rgba(0,200,255,.1);color:#00c8ff;cursor:pointer;transition:all .2s;
    white-space:nowrap;flex-shrink:0;
  }
  #muteBtn:hover{background:rgba(0,200,255,.25);}
  #muteBtn.muted{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.3);background:transparent;}
  #vizbar{display:flex;align-items:flex-end;gap:2px;height:28px;flex:1;}
  .vbar{width:6px;border-radius:2px 2px 0 0;background:linear-gradient(to top,#00c8ff,#a020f0);transition:height .08s;min-height:2px;}
  #trackname{font-size:10px;letter-spacing:1.5px;color:rgba(0,200,255,.6);text-transform:uppercase;white-space:nowrap;flex-shrink:0;}
  #volslider{-webkit-appearance:none;appearance:none;width:60px;height:3px;background:rgba(255,255,255,.15);border-radius:2px;outline:none;flex-shrink:0;}
  #volslider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#00c8ff;cursor:pointer;box-shadow:0 0 6px #00c8ff;}