:root{
    --bd-bg: #111;
    --bd-grid: rgba(255,255,255,0.06);

    /* Baseline wave look (used if gradient temporarily disabled) */
    --bd-wave: #00e676;
    --bd-fill: rgba(0,230,118,0.12);

    /* Hue endpoints for frequency → color (log scale) */
    --bd-hue-low: 260; /* deep blue/violet at 40 Hz */
    --bd-hue-high: 0;  /* red at 8 kHz */

    /* Controls */
    --bd-btn-bg: #222;
    --bd-btn-fg: #eee;
    --bd-btn-bg-active: #333;
  }

  .audio-player {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 24px auto;
    text-align: center;
    padding: 8px 0 0;
  }

  #audioCanvas {
    width: 100%;
    height: 160px;
    background: var(--bd-bg);
    display: block;
    border-radius: 10px;
  }

  .audio-player::before {
    content: "";
    position: absolute;
    inset: 56px 0 8px;
    pointer-events: none;
    background-image:
      linear-gradient(var(--bd-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--bd-grid) 1px, transparent 1px);
    background-size: 100% 28px, 56px 100%;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  }

  .controls {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  .ctrl-btn {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    padding: 10px 16px;
    background: var(--bd-btn-bg);
    color: var(--bd-btn-fg);
    font-size: 15px;
  }
  .ctrl-btn:active { background: var(--bd-btn-bg-active); }

  #dbg {
    font: 12px/1.35 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #bbb;
    margin: 6px 0 0;
    min-height: 1.35em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #dbg.ok { color: #7dff9e; }
  #dbg.err { color: #ff7676; }
  
    /* Keep audio element present for JS but ensure no browser UI shows */
.audio audio {
  display: block;         /* occupy no height when controls are absent */
  height: 0;              /* defensively collapse if a UA tries to draw chrome */
  overflow: hidden;
}

/* Extra hardening for WebKit-based browsers if someone re-adds controls by accident */
.audio audio::-webkit-media-controls-panel,
.audio audio::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}