/* The oud's controls, on the front page. */
h2.inline { margin: 0 8px 0 0; }
.oud-panel { padding: 16px; margin-bottom: 24px; }
.oud-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.oud-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.oud-groups { display: flex; flex-wrap: wrap; gap: 18px 36px; margin-top: 14px; }
.oud-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 maqam's notes, tonic to octave, each lit as it sounds. */
.oud-notes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.oud-note { min-width: 44px; padding: 8px 6px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); text-align: center; font: 600 13px var(--mono); color: var(--muted); transition: background 0.4s, color 0.4s, border-color 0.4s; }
.oud-note.on { background: var(--accent); border-color: var(--accent); color: #fff; transition: none; }