@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

  :root{
    --bg:#05060a;
    --panel-bg:rgba(18,20,32,0.55);
    --panel-border:rgba(255,255,255,0.09);
    --text-primary:#eef1f8;
    --text-secondary:#8b93ab;
    --accent:#6fd8ff;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html, body{
    width:100%; height:100%; overflow:hidden;
    background:var(--bg);
    font-family:'Space Grotesk', sans-serif;
    color:var(--text-primary);
    -webkit-font-smoothing:antialiased;
  }

  #waveCanvas{ position:fixed; inset:0; display:block; touch-action:none; cursor:crosshair; }

  .topbar{ position:fixed; top:28px; left:28px; z-index:10; pointer-events:none; }
  .topbar .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:0.68rem; letter-spacing:2px; text-transform:uppercase;
    color:var(--text-secondary); margin-bottom:6px;
  }
  .topbar h1{ font-size:1.7rem; font-weight:700; letter-spacing:0.3px; display:flex; align-items:center; gap:10px; }
  .topbar .tagline{ font-size:0.85rem; color:var(--text-secondary); margin-top:4px; font-family:'JetBrains Mono', monospace; }

  .hint{
    position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
    font-size:0.8rem; color:var(--text-secondary); z-index:10;
    font-family:'JetBrains Mono', monospace; letter-spacing:0.5px;
    animation: pulse 2.4s ease-in-out infinite; pointer-events:none;
  }
  @keyframes pulse{ 0%,100%{ opacity:0.35; } 50%{ opacity:0.9; } }

  .panel{
    position:fixed; top:28px; right:28px; width:280px;
    background:var(--panel-bg); border:1px solid var(--panel-border);
    border-radius:18px; padding:22px;
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    z-index:10; box-shadow:0 8px 32px rgba(0,0,0,0.45);
  }
  .panel .deck-label{
    font-family:'JetBrains Mono', monospace; font-size:0.65rem;
    letter-spacing:2px; text-transform:uppercase; color:var(--text-secondary);
    margin-bottom:16px;
  }

  .control{ margin-bottom:18px; }
  .control label{
    display:flex; justify-content:space-between;
    font-size:0.8rem; color:var(--text-secondary); margin-bottom:8px;
  }
  .control label span.val{ color:var(--text-primary); font-family:'JetBrains Mono', monospace; }

  input[type=range]{
    width:100%; -webkit-appearance:none; appearance:none;
    height:4px; border-radius:2px; background:rgba(255,255,255,0.14); outline:none;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
    background:var(--accent); cursor:pointer; box-shadow:0 0 10px var(--accent);
    transition: box-shadow .2s;
  }
  input[type=range]::-moz-range-thumb{
    width:14px; height:14px; border-radius:50%; border:none;
    background:var(--accent); cursor:pointer; box-shadow:0 0 10px var(--accent);
  }

  .section-label{
    font-size:0.7rem; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--text-secondary); margin-bottom:10px; font-family:'JetBrains Mono', monospace;
  }

  .themes{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:18px; }
  .theme-dot{
    width:100%; aspect-ratio:1; border-radius:50%; cursor:pointer;
    border:2px solid transparent; transition: transform .15s, border-color .15s;
  }
  .theme-dot.active{ border-color:#fff; transform:scale(1.12); }

  .row{ display:flex; gap:10px; }
  .row + .row{ margin-top:10px; }
  .btn{
    flex:1; padding:10px; border-radius:10px; border:1px solid var(--panel-border);
    background:rgba(255,255,255,0.04); color:var(--text-primary);
    font-family:'Space Grotesk', sans-serif; font-size:0.78rem; cursor:pointer;
    transition: background .15s, transform .1s, color .15s, border-color .15s;
  }
  .btn:hover{ background:rgba(255,255,255,0.09); }
  .btn:active{ transform:scale(0.96); }
  .btn.active{ background:var(--accent); color:#05060a; border-color:var(--accent); }

  .stats{
    position:fixed; bottom:28px; right:28px; z-index:10; text-align:right;
    font-family:'JetBrains Mono', monospace; color:var(--text-secondary);
  }
  .stats .count{ font-size:1.5rem; color:var(--text-primary); font-weight:600; line-height:1; }
  .stats .count-label{ font-size:0.68rem; letter-spacing:1px; text-transform:uppercase; }

  .credit{
    position:fixed; bottom:28px; left:28px; z-index:10;
    font-family:'JetBrains Mono', monospace; font-size:0.7rem;
    color:var(--text-secondary); opacity:0.55;
  }

  @media (max-width:680px){
    .panel{ left:16px; right:16px; width:auto; top:auto; bottom:16px; max-height:48vh; overflow-y:auto; padding:18px; }
    .topbar{ left:16px; top:16px; }
    .hint{ top:78px; bottom:auto; left:16px; transform:none; font-size:0.72rem; }
    .stats, .credit{ display:none; }
  }