/* The vocoder's controls, for the front page. */
h2.inline { margin: 0 8px 0 0; }
.vc-panel { padding: 16px; margin-bottom: 24px; }
.vc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.vc-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.vc-groups { display: flex; flex-wrap: wrap; gap: 18px 36px; }
.vc-group h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 8px; }
.knobs { display: flex; flex-wrap: wrap; gap: 8px 4px; }
/* The phrase, a letter a step, the one sounding lit. */
.vc-phrase { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 14px; font: 600 14px var(--mono); }
.vc-phrase span { min-width: 1.4em; text-align: center; padding: 3px 0; border-radius: 5px; color: var(--muted); }
.vc-phrase span.on { background: var(--accent-soft); color: var(--text); }
.vc-phrase span.now { background: var(--accent); color: white; }