:root {
  color-scheme: dark;
  --bg: #111315;
  --panel: #1b1e22;
  --panel-2: #24282d;
  --line: #3b4148;
  --muted: #9ba3aa;
  --text: #edf0f2;
  --green: #9fc86a;
  --green-dark: #557337;
  --amber: #e0a95d;
  --red: #d27676;
  --lane-height: 42px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 860px; background: radial-gradient(circle at 15% -20%, #343a40 0, var(--bg) 38rem); color: var(--text); }
button, input, select { font: inherit; }
button, select, input[type="number"] { color: var(--text); background: #15181b; border: 1px solid #4b5259; border-radius: 5px; }
button { padding: .55rem .8rem; cursor: pointer; }
button:hover { border-color: var(--green); background: #22272b; }
button:focus-visible, input:focus-visible, select:focus-visible, canvas:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.masthead { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.5rem; border-bottom: 1px solid #41474d; background: #171a1dcc; box-shadow: 0 8px 30px #0005; }
.eyebrow { margin: 0 0 .25rem; color: var(--green); font-size: .72rem; font-weight: 750; letter-spacing: .19em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -.04em; }
.subtitle { margin: .15rem 0 0; color: var(--muted); }
.transport { display: flex; align-items: center; gap: .55rem; }
.transport-button { min-width: 6rem; font-weight: 750; }
.transport-button.play { border-color: var(--green-dark); color: #dff4c5; }
.transport-button.play.active { color: #111; background: var(--green); }
.transport-readout { min-width: 5.8rem; padding: .55rem .7rem; border: 1px solid #454b51; border-radius: 5px; color: var(--amber); background: #090b0c; font: 700 1rem ui-monospace, monospace; text-align: center; }
main { padding: 1rem 1.25rem; }
.control-rack, .edit-rack { display: flex; align-items: end; flex-wrap: wrap; gap: .7rem; padding: .8rem; border: 1px solid #3a4046; background: linear-gradient(#25292e, #1c1f23); }
.control-rack { border-radius: 8px 8px 0 0; }
.edit-rack { align-items: center; border-top: 0; }
.control-rack label { display: grid; gap: .28rem; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.control-rack input[type="number"] { width: 5.3rem; padding: .48rem; }
.control-rack select { min-width: 5.3rem; padding: .48rem; }
.control-rack input[type="range"] { width: 7rem; accent-color: var(--green); }
.control-rack output { float: right; color: var(--text); }
.signature-control { display: flex; align-items: center; gap: .2rem; }
.signature-control input { width: 3.5rem !important; }
.signature-control select { min-width: 3.6rem; }
.toggle-label { align-self: center; display: flex !important; grid-auto-flow: column; align-items: center; gap: .4rem !important; padding: .5rem; }
.toggle-label input { accent-color: var(--green); }
.velocity-picker { display: flex; align-items: center; gap: .25rem; }
.velocity-picker span { margin-right: .3rem; color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.velocity-picker button { padding: .4rem .65rem; }
.velocity-picker button.active { color: #101310; border-color: var(--green); background: var(--green); }
.danger { color: #f0b2b2; }
.spacer { flex: 1; }
.sequencer-shell { display: grid; grid-template-columns: 264px 1fr; min-height: 700px; border: 1px solid #42484f; border-top: 0; background: #121416; }
.lane-column { position: relative; z-index: 2; border-right: 1px solid #4c535a; box-shadow: 7px 0 18px #0008; background: #1c1f22; }
.lane-heading { height: 30px; padding: 7px 10px; color: var(--muted); border-bottom: 1px solid #454b50; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lane-control { display: grid; grid-template-columns: 40px 1fr; align-items: center; height: var(--lane-height); border-bottom: 1px solid #31363b; }
.pad-button { height: 30px; margin: 0 5px; padding: 0; color: var(--green); border-color: #4c5b40; font: 750 .72rem ui-monospace, monospace; }
.lane-control select { min-width: 0; margin-right: 7px; padding: .35rem .3rem; font-size: .76rem; }
.roll-scroller { overflow: auto; background: #0c0e10; }
#pianoRoll { display: block; cursor: crosshair; touch-action: none; }
.status-panel { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem .8rem; border: 1px solid #3b4147; border-top: 0; border-radius: 0 0 8px 8px; color: var(--muted); background: #181b1e; font-size: .78rem; }
.status-panel p { margin: 0; }
#statusMessage { min-width: 16rem; color: var(--green); }
kbd { padding: .08rem .28rem; border: 1px solid #555d64; border-radius: 3px; background: #0e1012; }
footer { display: flex; justify-content: space-between; padding: 1rem 1.4rem 1.8rem; color: #777f86; font-size: .75rem; }
footer a { color: #a8bd91; }
@media (max-width: 950px) { .instructions { display: none; } }