/* Dial-up sound room exhibit. Shared primitives live in museum.css. */
.exhibit .ex-stage { max-width: 760px; }
.keypad { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; margin-top: 14px; }
.key { width: 64px; height: 56px; border: 1px solid var(--rule-2); border-radius: var(--r-s); background: var(--room-3); color: var(--ink); font: 500 1.4rem var(--f-mono); cursor: pointer; }
.key:hover { border-color: var(--era); }
.key:active { transform: translateY(1px); background: var(--era-glow); }
.d-opts { margin: 12px 0; }
.d-prog { display: block; width: 100%; height: 14px; margin: 4px 0 10px; accent-color: var(--era); }
.d-now { min-height: 3.2em; color: var(--ink); }
.d-scope { height: auto; aspect-ratio: 16 / 3; }
.d-phases, .d-transcript { margin: 0; padding-left: 1.3em; }
.d-phases li, .d-transcript li { margin: .55em 0; color: var(--ink-2); padding-left: 4px; }
.d-phases li b { color: var(--ink); }
.d-phases li::marker { color: var(--ink-3); font-family: var(--f-mono); }
.d-phases li[aria-current="step"] { color: var(--ink); background: var(--era-glow); box-shadow: -4px 0 0 var(--era); border-radius: 2px; }
.d-phases li[aria-current="step"]::marker { color: var(--era); }
.d-phases li.is-done { opacity: .6; }
@media (max-width: 420px) { .keypad { grid-template-columns: repeat(3, minmax(0, 1fr)); } .key { width: 100%; } }