/* Chip Synth exhibit. Shared primitives live in museum.css. Nothing here animates position; step highlights are colour only. */
.cs-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.cs-stage > .ex-panel:nth-child(3), .cs-stage > .ex-panel:nth-child(4) { grid-column: 1 / -1; }
.cs-vol { flex: 1 1 180px; }
.cs-gens, .cs-duty { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; border: 0; min-width: 0; }
.cs-duty legend { padding: 0; margin-bottom: 4px; font: 500 .85rem var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.cs-gen, .cs-duty label { position: relative; display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-s); color: var(--ink-2); cursor: pointer; }
.cs-duty label { flex-direction: row; align-items: center; font: 500 .95rem var(--f-display); }
.cs-gen input, .cs-duty input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-gen-t { font: 700 .98rem/1.15 var(--f-display); letter-spacing: .02em; }
.cs-gen-y { font: 400 .68rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cs-gen:has(input:checked), .cs-duty label:has(input:checked) { border-color: var(--era); color: var(--era); background: var(--era-glow); }
.cs-gen:has(input:focus-visible), .cs-duty label:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.cs-wave-wrap { display: grid; gap: 8px; }
.cs-wave { display: block; width: 100%; height: auto; aspect-ratio: 5 / 1; border-radius: 8px; background: #07070a; color: var(--era); }
.cs-about { margin: 0; color: var(--ink-2); font-size: .95rem; }

/* keyboard: 13 keys; wraps to two rows on narrow screens so each key stays at least 44px wide */
.cs-keys { display: grid; grid-template-columns: repeat(13, minmax(44px, 1fr)); gap: 4px; }
.cs-key { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-height: 96px; padding: 6px 2px; border: 1px solid var(--rule-2); border-radius: 0 0 8px 8px; background: #ece6d8; color: #17151c; font: 700 .9rem var(--f-display); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.cs-key.is-sharp { min-height: 72px; background: #1a1820; color: var(--ink); border-color: #000; align-self: start; }
.cs-key-k { font: 400 .64rem var(--f-mono); opacity: .7; }
.cs-key.is-down, .cs-key:active { background: var(--era); color: #0a0a0c; }
.cs-key:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; z-index: 1; }
.cs-key-row { margin-top: 10px; }
.cs-now { flex: 1 1 200px; }

/* sequencer: scrolls sideways inside its panel on narrow screens, never the page */
.cs-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.cs-grid { display: grid; gap: 3px; min-width: 430px; }
.cs-row { display: grid; grid-template-columns: 3.4rem repeat(8, minmax(44px, 1fr)); gap: 3px; align-items: center; }
.cs-row-n, .cs-step-n { font: 400 .72rem var(--f-mono); color: var(--ink-3); text-align: center; }
.cs-row-n { text-align: right; padding-right: 6px; }
.cs-cell { min-height: 44px; border: 1px solid var(--rule-2); border-radius: 4px; background: var(--room); cursor: pointer; }
.cs-cell:nth-child(4n+2) { border-left-color: var(--ink-3); }
.cs-cell[aria-pressed="true"] { background: var(--era); border-color: var(--era); }
.cs-row.is-noise .cs-cell[aria-pressed="true"] { background: var(--ink-2); border-color: var(--ink-2); }
.cs-cell.is-now { box-shadow: inset 0 0 0 3px var(--gold); }
.cs-cell:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.cs-seq-row { margin-top: 12px; }
.cs-tempo { flex: 1 1 180px; }

@media (max-width: 900px) { .cs-stage { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .cs-keys { grid-template-columns: repeat(7, minmax(40px, 1fr)); }
  .cs-key, .cs-key.is-sharp { min-height: 64px; align-self: stretch; }
}

/* ---------- museum interactive finish (design pass, 27 Oct) ---------- */
/* power: a lamp beside the switch, lit while sound is on */
.cs-power-panel .ex-row { gap: 14px 18px; }
.cs-power-panel h2::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 10px; border-radius: 50%; background: #2a2630; box-shadow: inset 0 0 0 1px #000; vertical-align: .05em; }
html.cs-on .cs-power-panel h2::after { background: var(--red); box-shadow: 0 0 8px var(--red); }
/* the scope: a small screen with a faint graticule */
.cs-wave { border: 1px solid #000; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--era) 25%, transparent);
  background: linear-gradient(transparent 49.5%, rgba(255, 255, 255, .06) 49.5% 50.5%, transparent 50.5%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 10%), #07070a; }
.cs-gen { background: var(--room); }
.cs-gen:hover { border-color: var(--ink-3); }
/* the keyboard: a key bed with real-looking keys (physical shading only) */
.cs-keys { padding: 10px 10px 12px; border-radius: 6px; background: linear-gradient(180deg, #0c0b0f, #16141a); box-shadow: inset 0 2px 0 #000, inset 0 0 0 1px #2c2732; }
.cs-key { border: 0; border-radius: 0 0 7px 7px; background: linear-gradient(180deg, #f5f0e4 0%, #e6dfcf 82%, #cfc7b5 100%); box-shadow: inset 0 -5px 0 #bdb5a3, 0 2px 0 #000; transition: transform var(--press), box-shadow var(--press); }
.cs-key.is-sharp { background: linear-gradient(180deg, #2a2730 0%, #141218 70%, #0b0a0e 100%); color: var(--ink); box-shadow: inset 0 -4px 0 #000, inset 0 0 0 1px #3a3541, 0 2px 0 #000; }
.cs-key-n { font: 700 1rem var(--f-display); }
.cs-key-k { font: 500 .7rem var(--f-mono); opacity: .75; }
.cs-key.is-down, .cs-key:active { background: var(--era); color: #0a0a0c; transform: translateY(2px); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--era) 60%, #000), 0 0 0 #000; }
/* the sequencer: unlit and lit lamps */
.cs-grid-wrap { padding: 8px 6px 8px 0; border-radius: 6px; background: #0a090c; box-shadow: inset 0 0 0 1px #2c2732; }
.cs-cell { border-color: #2c2732; background: radial-gradient(circle at 50% 40%, #1d1a22, #121015); }
.cs-cell:hover { border-color: var(--ink-3); }
.cs-cell[aria-pressed="true"] { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--era) 55%, #fff), var(--era) 60%); box-shadow: 0 0 12px -2px color-mix(in srgb, var(--era) 70%, transparent); }
.cs-cell.is-now { box-shadow: inset 0 0 0 3px var(--gold); }
.cs-cell[aria-pressed="true"].is-now { box-shadow: inset 0 0 0 3px var(--gold), 0 0 14px -2px var(--gold); }
.cs-step-n { padding-bottom: 2px; }
@media (max-width: 700px) {
  /* seven keys a row that always fit the bed: about 40px wide at 375px, 64px tall */
  .cs-stage { padding-left: 6px; padding-right: 6px; }
  .cs-stage > .ex-panel { padding: 14px 12px; }
  .cs-keys { grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 4px; gap: 2px; }
  .cs-key.is-sharp { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .cs-key, .cs-cell { transition: none; } .cs-key.is-down, .cs-key:active { transform: none; } }