:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101826; color: #eef3ff; }
body { margin: 0; min-width: 320px; }
main { max-width: 900px; margin: 0 auto; padding: 48px 24px 64px; }
.eyebrow { color: #77d7bd; font-weight: 700; font-size: .75rem; letter-spacing: .12em; margin: 0; }
h1 { font-size: clamp(2.2rem, 7vw, 4rem); margin: .2rem 0; }
.description, .hint { color: #b9c7df; max-width: 650px; }
.transport, .controls > div { background: #19243a; border: 1px solid #2c3b57; border-radius: 14px; padding: 18px; }
.transport { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 32px 0 18px; }
label { display: flex; gap: 8px; align-items: center; font-weight: 700; }
select, button { border: 1px solid #405574; border-radius: 8px; background: #253551; color: inherit; padding: .7rem .9rem; font: inherit; }
button { cursor: pointer; font-weight: 700; } button:hover:not(:disabled) { background: #334a70; }
button.primary { background: #0b8f71; border-color: #1fc8a0; } button.active { outline: 3px solid #f6bd60; }
button:disabled, select:disabled { opacity: .5; cursor: not-allowed; }
output { color: #77d7bd; font-weight: 600; }
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
h2 { margin: 0 0 12px; font-size: 1rem; color: #b9c7df; }.buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.waveform { margin-top: 16px; background: #19243a; border: 1px solid #2c3b57; border-radius: 14px; padding: 18px; }
.waveform-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }.waveform-heading h2 { margin: 0; }
#waveform-name { color: #77d7bd; font-weight: 700; } #waveform { display: block; width: 100%; height: 180px; margin-top: 12px; background: #0d1421; border-radius: 8px; }
.hint { font-size: .92rem; }
@media (max-width: 580px) { .controls { grid-template-columns: 1fr; } }