.replay-controls{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;padding:20px 24px;background:#e4ebdf;border:1px solid var(--line)}select{width:100%;padding:12px;border:1px solid #9eafa0;background:var(--white);font:inherit;color:var(--ink);border-radius:4px}.replay-controls .status{margin:0}.replay-controls p{margin:8px 0 0;font-size:13px}.sim-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.chart-card{padding:22px;background:var(--white);border:1px solid var(--line);min-width:0}.chart-card svg{display:block;width:100%;height:auto}.chart-card p{margin:0 0 8px}.pitch-key{color:var(--green);font-weight:700}.roll-key{color:var(--rust);font-weight:700}.playback{display:flex;align-items:center;gap:20px;padding:20px 0}.playback input{margin:0;flex:1}.playback output{min-width:64px;font:13px ui-monospace,monospace}.playback button{border:1px solid var(--green);background:var(--green);color:white;border-radius:4px;padding:10px 18px;cursor:pointer;white-space:nowrap}.readout-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.readout-grid>div{background:var(--white);padding:16px}.readout-grid span{display:block;font-size:11px;color:var(--muted)}.readout-grid strong{font-size:20px}.source-note{margin:40px 0}#sim-results td:not(:first-child){text-align:right;white-space:nowrap}#sim-results tr.failed{background:#f7e8db}.status.fail{color:#923e1e;border-color:#bd795d}.status.pass{color:var(--green)}svg text{font:12px system-ui,sans-serif;fill:var(--muted)}select:focus-visible,button:focus-visible{outline:3px solid var(--rust);outline-offset:3px}@media(max-width:700px){.replay-controls,.sim-panels{grid-template-columns:1fr}.readout-grid{grid-template-columns:1fr 1fr}.playback{gap:10px}.playback button{padding:10px}.chart-card{padding:15px}}