/* Préférence manuelle : valeurs appliquées via <html data-theme="…">. */
:root {
  color-scheme: light;
  --color-base-100: #f8f9fa;
  --color-base-200: #eef0f2;
  --color-base-300: #dfe3e7;
  --color-base-content: #16181d;
  --color-neutral: #e3e6e9;
  --color-neutral-content: #16181d;
  --color-primary: #315efb;
  --color-primary-content: #fff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-base-100: #050505;
  --color-base-200: #0b0b0c;
  --color-base-300: #151518;
  --color-base-content: #f4f4f5;
  --color-neutral: #000;
  --color-neutral-content: #f4f4f5;
  --color-primary: #5b7cff;
  --color-primary-content: #fff;
}

/* Sans choix manuel, le thème système sombre prend la main. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-base-100: #050505;
    --color-base-200: #0b0b0c;
    --color-base-300: #151518;
    --color-base-content: #f4f4f5;
    --color-neutral: #000;
    --color-neutral-content: #f4f4f5;
    --color-primary: #5b7cff;
    --color-primary-content: #fff;
  }
}

html { scroll-behavior: smooth; }

.waveform i { display: block; width: 7px; background: var(--color-primary); }
.waveform i:nth-child(1) { height: 16%; }.waveform i:nth-child(2) { height: 31%; }.waveform i:nth-child(3) { height: 21%; }.waveform i:nth-child(4) { height: 57%; }.waveform i:nth-child(5) { height: 37%; }.waveform i:nth-child(6) { height: 76%; }.waveform i:nth-child(7) { height: 46%; }.waveform i:nth-child(8) { height: 92%; }.waveform i:nth-child(9) { height: 33%; }.waveform i:nth-child(10) { height: 65%; }.waveform i:nth-child(11) { height: 43%; }.waveform i:nth-child(12) { height: 82%; }.waveform i:nth-child(13) { height: 28%; }.waveform i:nth-child(14) { height: 53%; }.waveform i:nth-child(15) { height: 71%; }.waveform i:nth-child(16) { height: 34%; }.waveform i:nth-child(17) { height: 55%; }.waveform i:nth-child(18) { height: 86%; }.waveform i:nth-child(19) { height: 29%; }.waveform i:nth-child(20) { height: 46%; }.waveform i:nth-child(21) { height: 65%; }.waveform i:nth-child(22) { height: 21%; }.waveform i:nth-child(23) { height: 47%; }.waveform i:nth-child(24) { height: 29%; }.waveform i:nth-child(25) { height: 18%; }

@media (max-width: 640px) { .waveform { gap: 3px; }.waveform i { width: 4px; } }