/* Sound design exhibit ("The same jump, six ways"). Shared primitives live in museum.css.
   The only motion is an optional playhead line on the drawing; a playing panel is marked by its border and a label, not colour alone. */
.sd-stage { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); align-items: start; }
.sd-main { grid-column: 1 / -1; }
.sd-fx { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.sd-fx-l { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: var(--r-s); color: var(--ink-2); font: 700 1rem var(--f-display); letter-spacing: .02em; cursor: pointer; }
.sd-fx-l input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sd-fx-l:has(input:checked) { border-color: var(--era); color: var(--era); background: var(--era-glow); box-shadow: inset 0 0 0 1px var(--era); }
.sd-fx-l:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.sd-main-row { gap: 10px 16px; margin-bottom: 10px; }
.sd-vol { flex: 1 1 160px; max-width: 260px; }
.sd-era { display: flex; flex-direction: column; gap: 10px; }
.sd-era > h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sd-year { font: 700 .85rem var(--f-mono); letter-spacing: .06em; color: var(--ink-3); }
.sd-wave { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; border-radius: 6px; background: #07070a; color: var(--era); }
.sd-hear { margin: 0; min-height: 3em; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.sd-params { display: grid; gap: 4px 16px; }
.sd-play { align-self: flex-start; }
.museum .sd-stage .sd-era.is-playing { box-shadow: inset 0 0 0 2px var(--era); }
.sd-era.is-playing > h3::after { content: "Playing"; padding: 1px 8px; border: 1px solid currentColor; border-radius: 3px; font: 600 .72rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }