:root { color-scheme: light dark; }
body { font: 16px/1.55 system-ui, sans-serif; margin: 0; padding: 2rem; max-width: 52rem; }
canvas#spectrogram { width: 100%; height: 16rem; image-rendering: pixelated; border-radius: 6px; background: #000; }
.row { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.row label { display: flex; gap: .5rem; align-items: center; }
.numbers { display: flex; gap: 2rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.numbers div { min-width: 6rem; }
.numbers span { display: block; color: #6b7280; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.numbers strong { font-size: 1.35rem; font-weight: 600; }
.note { color: #6b7280; }
button { font: inherit; padding: .35rem .9rem; border-radius: 6px; border: 1px solid #8884; background: #8881; cursor: pointer; }