:root {
  color-scheme: light;
  --font-ui: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --bg: #eef1f8;
  --bg-gradient:
    radial-gradient(60rem 40rem at 5% -10%, rgba(59, 108, 246, .32), transparent 60%),
    radial-gradient(50rem 35rem at 100% 0%, rgba(168, 85, 247, .28), transparent 60%),
    radial-gradient(60rem 40rem at 50% 115%, rgba(20, 184, 166, .22), transparent 60%),
    linear-gradient(180deg, #f6f8fd, #eceff8);
  --fg: #1d2030;
  --muted: #6b7083;
  --surface: rgba(255, 255, 255, .72);         /* frosted panels behind canvases */
  --surface-border: rgba(29, 32, 48, .07);
  --border: rgba(29, 32, 48, .1);
  --shadow: rgba(30, 40, 90, .08);
  --accent: #3b6cf6;
  --accent-2: #8b5cf6;                         /* second gradient stop */
  --accent-glow: rgba(59, 108, 246, .35);
  --accent-soft: #a9bcfb;
  --wave: #c3c8d6;
  --wave-rms: #9aa1b5;
  --grid: rgba(29, 32, 48, .06);
  --sel: rgba(59, 108, 246, 0.14);
  --dim: rgba(242, 244, 250, 0.72);            /* overview outside the visible window */
}

/* Dark palette: follows the system unless the user picked light, or forced via the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c0e18;
    --bg-gradient:
      radial-gradient(60rem 40rem at 5% -10%, rgba(76, 110, 255, .34), transparent 60%),
      radial-gradient(50rem 35rem at 100% 0%, rgba(147, 51, 234, .3), transparent 60%),
      radial-gradient(60rem 40rem at 50% 115%, rgba(13, 148, 136, .22), transparent 60%),
      linear-gradient(180deg, #0e1020, #0a0b13);
    --fg: #e7e8f0;
    --muted: #9097ab;
    --surface: rgba(22, 25, 40, .7);
    --surface-border: rgba(255, 255, 255, .07);
    --border: rgba(255, 255, 255, .08);
    --shadow: rgba(0, 0, 0, .45);
    --accent: #6d8fff;
    --accent-2: #a78bfa;
    --accent-glow: rgba(109, 143, 255, .35);
    --accent-soft: #33467f;
    --wave: #343a4f;
    --wave-rms: #586079;
    --grid: rgba(255, 255, 255, .05);
    --sel: rgba(109, 143, 255, 0.16);
    --dim: rgba(14, 16, 28, 0.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0e18;
  --bg-gradient:
    radial-gradient(60rem 40rem at 5% -10%, rgba(76, 110, 255, .34), transparent 60%),
    radial-gradient(50rem 35rem at 100% 0%, rgba(147, 51, 234, .3), transparent 60%),
    radial-gradient(60rem 40rem at 50% 115%, rgba(13, 148, 136, .22), transparent 60%),
    linear-gradient(180deg, #0e1020, #0a0b13);
  --fg: #e7e8f0;
  --muted: #9097ab;
  --surface: rgba(22, 25, 40, .7);
  --surface-border: rgba(255, 255, 255, .07);
  --border: rgba(255, 255, 255, .08);
  --shadow: rgba(0, 0, 0, .45);
  --accent: #6d8fff;
  --accent-2: #a78bfa;
  --accent-glow: rgba(109, 143, 255, .35);
  --accent-soft: #33467f;
  --wave: #343a4f;
  --wave-rms: #586079;
  --grid: rgba(255, 255, 255, .05);
  --sel: rgba(109, 143, 255, 0.16);
  --dim: rgba(14, 16, 28, 0.7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  background: var(--bg-gradient) fixed, var(--bg);
  color: var(--fg);
}

.app {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 1.25rem;
}

.top { display: flex; justify-content: space-between; align-items: center; margin: 0 0 1.5rem; }
h1 {
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -0.02em;
  margin: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dropzone {
  display: block;
  padding: 2rem;
  border: 1.5px dashed var(--wave);
  border-radius: 14px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(140%);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--surface); }

.player { margin-top: 2rem; }

.wave-wrap {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  box-shadow: 0 8px 24px -12px var(--shadow);
  backdrop-filter: blur(14px) saturate(140%);
  overflow: hidden;
}
canvas { display: block; width: 100%; height: 140px; cursor: text; }
#waveform { height: 180px; }
.overview-wrap { margin-top: .5rem; }
canvas.overview { height: 36px; cursor: grab; touch-action: none; }
canvas.overview:active { cursor: grabbing; }

.time {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--muted);
  margin: .5rem 0 1rem;
  font-family: var(--font-mono);
}
#selection-info { color: var(--accent); }

.controls { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

button {
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  min-width: 44px;
  height: 44px;
  padding: 0 1rem;
  border-radius: 22px;
  font: 500 1rem var(--font-ui);
  box-shadow: 0 6px 16px -6px var(--accent-glow);
  cursor: pointer;
  transition: filter .15s, transform .1s;
}
button:hover:not(:disabled) { filter: brightness(1.08); }
button:active:not(:disabled) { transform: translateY(1px); }
button.secondary {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  box-shadow: none;
  font-size: .85rem;
  backdrop-filter: blur(14px);
}
button:focus-visible, .dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.zoom { display: flex; gap: .4rem; align-items: center; margin-left: auto; }
.zoom output { min-width: 4em; text-align: center; font: .8rem var(--font-mono); color: var(--muted); }

.toggle { font-size: .9rem; display: flex; gap: .35rem; align-items: center; }
.hint { font-size: .8rem; color: var(--muted); margin-top: 1.25rem; }
#stft-status { font-family: var(--font-mono); font-size: .75rem; }

/* ---- STFT panel ---- */
.stft { margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1.5rem; }
.stft h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 1rem; }
.sliders { display: flex; gap: 1.5rem; align-items: end; flex-wrap: wrap; }
/* Fixed width so the slider doesn't resize as its value label changes length. */
.sliders label { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; width: 200px; }
.sliders output { color: var(--muted); font: .8rem var(--font-mono); white-space: nowrap; }
.sliders label.win-field { width: 270px; }
.win-row { display: flex; align-items: center; gap: .4rem; }
.sliders input[type="number"] {
  width: 7.5em;
  font: .85rem var(--font-mono);
  padding: .2rem .45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--fg);
}
.sliders input[type="range"] { accent-color: var(--accent); }
button:disabled { opacity: .4; cursor: not-allowed; }
canvas.spec { height: 260px; cursor: grab; touch-action: none; }
canvas.spec:active { cursor: grabbing; }
#spec-wrap { padding: .5rem; }