:root { --console-bg:#10151b; --panel:#192129; --edge:#35424d; --ink:#dce7eb; --a:#61d4e4; --b:#f9a66c; --keys:#b9a6ef; color:var(--ink); background:var(--console-bg); --lime:var(--a); --line:var(--edge); --muted:#a4b3bd; }
.header-inner, main { max-width:1800px; padding-inline:32px; }
.header-inner { height:auto; min-height:76px; }
.brand-mode { font:11px ui-monospace,Menlo,monospace; color:var(--muted); letter-spacing:2px; }
.console-title { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:32px; }
.console-title h1 { font-size:clamp(30px,3vw,44px); letter-spacing:-1px; margin:0 0 18px; }
.eyebrow { font:11px var(--utility); letter-spacing:1.6px; color:var(--muted); margin-bottom:8px; }
.prototype { font:12px ui-monospace,Menlo,monospace; color:var(--muted); }
.consent { font-size:13px; margin-bottom:18px; }
.console { display:grid; grid-template-columns:minmax(0,1fr) 230px minmax(0,1fr); border:1px solid var(--edge); border-radius:12px; overflow:hidden; background:var(--panel); box-shadow:0 12px 40px #0003; }
.deck { min-width:0; padding:24px; --deck:var(--a); border-top:3px solid var(--deck); }
.deck-b { --deck:var(--b); }
.deck input { accent-color:var(--deck); }
.deck-heading { flex-wrap:wrap; }
.deck-heading h2 { flex:1; }
.deck-heading { display:flex; align-items:center; gap:12px; }
.deck-heading h2 { font:700 15px ui-monospace,Menlo,monospace; letter-spacing:2px; color:var(--deck); margin-right:auto; }
.deck-state { font:11px ui-monospace,Menlo,monospace; text-transform:uppercase; color:var(--deck); }
.small-button, .cue-button { background:#25313b; border:1px solid #50616e; border-radius:5px; color:var(--ink); padding:8px 10px; font-size:12px; min-height:44px; }
.small-button[aria-pressed=true], .cue-button { border-color:var(--deck,var(--keys)); color:var(--deck,var(--keys)); }
.track-name { font-weight:650; font-size:16px; margin:16px 0 8px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.file-label { display:flex; gap:12px; align-items:center; font-size:12px; color:var(--muted); }
.file-label input { min-width:0; max-width:100%; font-size:11px; }
input::file-selector-button { background:#25313b; border:1px solid #50616e; color:var(--ink); border-radius:3px; padding:5px; }
.deck-scope { width:100%; height:50px; display:block; background:#0b1015; border:1px solid #2b3742; border-radius:4px; margin-top:14px; }
.position-readout { display:flex; justify-content:space-between; align-items:center; padding-top:8px; font:17px ui-monospace,Menlo,monospace; }
.position-readout span { font-size:9px; letter-spacing:1px; color:var(--muted); }
.deck > input[type=range] { min-height:24px; }
.platter-row { display:flex; align-items:center; justify-content:center; gap:30px; padding-top:6px; }
.jog { width:clamp(160px,20vw,285px); aspect-ratio:1; border-radius:50%; touch-action:none; cursor:grab; padding:10px; background:linear-gradient(135deg,#586872,#182129 35%,#10171d 65%,#60727e); box-shadow:0 5px 18px #0008; border:1px solid #60727e; }
.jog:active { cursor:grabbing; }
.jog[aria-disabled=true] { opacity:.7; cursor:default; }
.vinyl { width:100%; height:100%; border-radius:50%; position:relative; background:repeating-radial-gradient(circle,#101418 0 3px,#263038 4px,#11171b 5px 7px); border:2px solid #0a1014; }
.disc-mark { position:absolute; top:5px; left:49%; width:3px; height:16%; background:var(--deck); border-radius:2px; }
.disc-label { position:absolute; inset:31%; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:50%; background:var(--deck); color:#10151b; box-shadow:0 0 0 5px #111a22; }
.disc-label b { font:800 clamp(24px,3vw,42px) ui-monospace,Menlo,monospace; }
.disc-label span { font:8px/1.4 ui-monospace,Menlo,monospace; text-align:center; letter-spacing:1px; }
.spindle { position:absolute; left:49%; top:49%; width:2%; height:2%; border-radius:50%; background:#111; }
.pitch-strip { display:flex; flex-direction:column; align-items:center; gap:8px; font:10px ui-monospace,Menlo,monospace; color:var(--muted); }
.pitch-strip input { writing-mode:vertical-lr; direction:rtl; width:26px; height:160px; min-height:0; }
.pitch-strip output { color:var(--deck); font-size:13px; font-variant-numeric:tabular-nums; }
.jog-help { font:10px ui-monospace,Menlo,monospace; text-align:center; color:var(--muted); margin:12px 0; }
.transport { display:grid; grid-template-columns:1fr 1fr 1.5fr 1.3fr; gap:7px; }
.play-button { background:var(--deck); color:#10151b; border-radius:5px; font-size:13px; font-weight:750; min-height:44px; }
.tempo-row { display:flex; align-items:end; gap:8px; margin:14px 0; flex-wrap:wrap; }
.tempo-row > label { font:9px ui-monospace,Menlo,monospace; color:var(--muted); }
.tempo-row input[type=number] { width:78px; display:block; background:#0b1015; border:1px solid var(--edge); color:var(--deck); padding:7px; border-radius:4px; margin-top:5px; font:14px ui-monospace,Menlo,monospace; }
.key-lock { display:flex; align-items:center; gap:5px; min-height:44px; margin-left:auto; }
.key-lock input { width:18px; height:18px; }
.eq { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; border-top:1px solid var(--edge); padding-top:12px; }
.eq label, .level-label { color:var(--muted); font-size:11px; }
.eq output, .level-label output { float:right; font:11px ui-monospace,Menlo,monospace; }
.hotcues { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }
.hotcue { background:#10181e; border:1px solid #526775; color:var(--muted); border-radius:5px; min-height:47px; font:14px ui-monospace,Menlo,monospace; }
.hotcue small { display:block; font-size:8px; margin-top:2px; }
.hotcue[data-set=true] { border-color:var(--deck); color:var(--deck); background:#25343d; }
.pad-help { font-size:10px; color:var(--muted); margin:6px 0 13px; }
.level-label { display:block; }
.deck-error { color:#ffb6a6; font-size:12px; }
.deck-error:empty { display:none; }
.mix-bus { border-inline:1px solid var(--edge); padding:24px 18px; background:#131b22; display:flex; flex-direction:column; gap:30px; }
.bus-heading h2 { font-size:22px; }
.master label, .blend label { display:block; color:var(--muted); font-size:12px; }
.master label output { float:right; }
.master meter { width:100%; height:16px; }
#peak { display:block; font:12px ui-monospace,Menlo,monospace; text-align:right; margin-top:6px; }
.blend { margin-top:auto; }
#blend-value { display:block; text-align:center; font:11px ui-monospace,Menlo,monospace; color:var(--muted); margin-top:10px; }
.ends { display:flex; justify-content:space-between; font:700 15px ui-monospace,Menlo,monospace; }
.ends span:first-child { color:var(--a); }.ends span:last-child { color:var(--b); }
.mix-bus .secondary { font-size:12px; padding:10px; min-height:44px; }
.bus-note { border-top:1px solid var(--edge); padding-top:18px; font-size:12px; color:var(--muted); }
.bus-note b { color:var(--ink); font-weight:500; }
#mixer-status { font-size:11px; color:var(--muted); margin:0; }
#instruments { margin-top:24px; background:#191f2b; border:1px solid #4c4561; border-top:3px solid var(--keys); border-radius:10px; padding:22px; }
.instrument-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center; }
.instrument-heading h2 { font-size:25px; }
#instruments .primary { background:var(--keys); color:#14121c; min-height:44px; padding:10px 18px; font-size:13px; }
#instrument-status { font-size:12px; color:var(--muted); margin:10px 0 18px; }
.instrument-controls { display:flex; flex-wrap:wrap; align-items:center; gap:22px; }
.instrument-controls label { font-size:12px; color:var(--muted); flex:1 1 140px; min-width:0; }
.instrument-controls label output { float:right; }
.instrument-controls select { display:block; background:#111820; border:1px solid #59626d; color:var(--ink); padding:10px; width:100%; min-width:0; border-radius:5px; margin-top:7px; }
#instruments input { accent-color:var(--keys); }
.keyboard-tools { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0 12px; }
.keyboard-tools p { font-size:11px; color:var(--muted); margin:0; }
#octave-name { font:12px ui-monospace,Menlo,monospace; padding:0 15px; }
.keyboard-scroll { overflow:auto; border:1px solid #090e12; border-radius:5px; background:#0a1016; padding:8px 8px 14px; }
.keyboard { display:flex; position:relative; width:max-content; height:145px; user-select:none; }
.piano-key { width:31px; flex-shrink:0; border:1px solid #a0a9b0; border-bottom:5px solid #bec6ce; border-radius:0 0 4px 4px; background:#e9edf0; color:#35404a; display:flex; align-items:end; justify-content:center; padding-bottom:9px; font:9px ui-monospace,Menlo,monospace; touch-action:none; }
.piano-key.black { width:20px; height:91px; margin-left:-10px; margin-right:-10px; z-index:1; border:1px solid #050a0d; border-bottom:5px solid #000; background:linear-gradient(#111923,#25303a); color:#c9d1d7; font-size:8px; }
.piano-key[aria-pressed=true] { background:var(--keys); border-bottom-color:#7963b8; color:#181425; }
.piano-key:disabled { opacity:.4; }
.pad-heading { display:flex; align-items:center; gap:20px; margin:18px 0 10px; }
.pad-heading h3 { margin:0; font-size:15px; }.pad-heading span { color:var(--muted); font-size:11px; }
.drum-pads { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.drum-pad { border:1px solid #6b5d86; border-bottom:4px solid #6b5d86; background:#262435; border-radius:6px; color:#e6def5; padding:15px 8px; font-size:12px; touch-action:none; }
.drum-pad small { display:block; font:9px ui-monospace,Menlo,monospace; color:#b8a8cc; margin-top:4px; }
.drum-pad[aria-pressed=true] { background:#7963a6; }
#session-notes { padding:24px 0; font-size:12px; color:var(--muted); max-width:1100px; }
#session-notes summary { color:var(--ink); cursor:pointer; }
#session-notes p { margin-top:12px; }
@media(max-width:1150px) { .header-inner,main { padding-inline:20px; }.console { grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr); }.deck { padding:16px; }.platter-row { gap:12px; }.jog { width:clamp(140px,18vw,230px); }.brand-mode { display:none; }.transport { grid-template-columns:1fr 1fr; } }
@media(max-width:820px) { .console { grid-template-columns:1fr 1fr; }.mix-bus { grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:1fr 1fr; gap:16px; border:0; border-top:1px solid var(--edge); }.bus-heading,.bus-note { display:none; }.blend { margin:0; }.jog { width:clamp(140px,25vw,230px); }.deck-b { border-left:1px solid var(--edge); }.keyboard-tools { align-items:start; flex-direction:column; }.drum-pads { grid-template-columns:repeat(4,1fr); }.pitch-strip input { height:120px; } }
@media(max-width:560px) { .header-inner,main { padding-inline:12px; }.header-inner { height:auto; min-height:70px; gap:6px; }.console-title { align-items:start; flex-direction:column; gap:0; }.console-title h1 { font-size:28px; margin-bottom:8px; }.prototype { margin-bottom:18px; }.console { grid-template-columns:1fr; }.deck-b { border-left:0; }.mix-bus { grid-row:3; }.jog { width:min(235px,60vw); }.transport { grid-template-columns:1fr 1fr 1.5fr 1.3fr; }.instrument-heading { align-items:start; flex-direction:column; }.instrument-heading h2 { font-size:23px; }.instrument-controls { gap:14px; }.pad-heading { flex-direction:column; align-items:start; gap:4px; }.piano-key { width:36px; }.file-label { flex-wrap:wrap; gap:5px; } }
@media(prefers-reduced-motion:reduce) { .vinyl { transform:none!important; } }
@media(max-width:380px) { .drum-pads { grid-template-columns:repeat(2,1fr); } }

.instrument-effects { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; border:1px solid #4c4561; border-radius:6px; margin:20px 0 0; padding:12px 16px; min-width:0; }
.instrument-effects legend { font:11px ui-monospace,Menlo,monospace; color:var(--keys); padding:0 8px; }
.instrument-effects label { flex:1 1 140px; min-width:0; font-size:11px; color:var(--muted); }
.instrument-effects output { float:right; color:var(--ink); font:11px ui-monospace,Menlo,monospace; }
.instrument-effects p { flex-basis:100%; font-size:11px; color:var(--muted); margin:0; }

#performance { margin: 2rem 0; padding: clamp(1rem, 3vw, 2rem); border: 1px solid #405947; border-radius: 16px; background: #17221e; }
#performance h2 { margin: .2rem 0 .7rem; }
#performance > p { color: #bdc7c3; max-width: 85ch; }
.session-actions, .session-context { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; margin: 1rem 0; }
.session-context label { flex: 1 1 150px; display: grid; gap: .4rem; }
.session-context input, .session-context select { width: 100%; padding: .6rem; background: #10151b; color: #f3f5f4; border: 1px solid #526057; border-radius: 6px; }
#performance .file-label { flex: 1 1 240px; min-width: 0; }
#performance .file-label input { width: 100%; }
#performance .consent { margin: 1rem 0; }
#performance-download { display: inline-block; margin-top: .7rem; }
#performance-download[hidden] { display: none; }

#performance .session-actions button { min-height: 42px; }
#phrase-generate, #c-arm { background: #c3ef69; color: #182014; border-color: #c3ef69; font-weight: 700; }
.session-context input, .session-context select { min-height: 44px; }

.midi-controls { display:flex; flex-wrap:wrap; gap:14px; align-items:end; border:1px solid #4c4561; border-radius:6px; padding:16px; margin-top:20px; min-width:0; }
.midi-controls legend { color:var(--keys); font:11px ui-monospace,Menlo,monospace; }
.midi-controls label { display:grid; gap:6px; font-size:12px; flex:1 1 160px; min-width:0; }
.midi-controls select { width:100%; min-width:0; min-height:44px; background:#111820; color:var(--ink); border:1px solid #59626d; border-radius:5px; padding:8px; }
.midi-controls p { flex-basis:100%; font-size:12px; color:var(--muted); margin:0; overflow-wrap:anywhere; }

.deck-effects { border-color:var(--edge); margin:14px 0; padding:10px; gap:12px; }
.deck-effects legend { color:var(--deck); }
.deck-effects label { flex-basis:110px; }
.deck-effects select { display:block; width:100%; min-width:0; min-height:44px; margin-top:7px; background:#111820; color:var(--ink); border:1px solid #59626d; border-radius:5px; padding:8px; }

.midi-learn-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:end; width:100%; }
#midi-bindings { width:100%; margin:0; padding-left:20px; font:12px ui-monospace,Menlo,monospace; line-height:1.8; overflow-wrap:anywhere; }
#midi-bindings:empty { display:none; }
.instrument-controls select,.midi-controls select,.deck-effects select,.session-context select { appearance:none; min-height:48px; padding-right:36px; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 19px) center,calc(100% - 14px) center; background-size:5px 5px; background-repeat:no-repeat; }

#saved-mixes { margin: 2rem 0; padding: clamp(1rem, 3vw, 2rem); border: 1px solid #405947; border-radius: 16px; }
#saved-mixes .session-context label { flex: 1; min-width: 0; }
#saved-mixes select { height: 44px; font: inherit; contain: paint; }

@media(max-width:760px) {
  .header-inner nav { width:100%; justify-content:flex-start; gap:4px 20px; }
  .deck-heading { gap:8px; }
  .deck-heading h2 { letter-spacing:1px; }
  .console-title { padding-top:28px; }
  .mix-bus { padding:20px; }
  .eq { gap:10px; }
  .instrument-controls select,.session-context input,.session-context select,.midi-controls select { font-size:16px; }
  .instrument-controls { align-items:end; }
  .instrument-controls label { flex-basis:calc(50% - 14px); }
}
@media(max-width:560px) {
  .header-inner,main { padding-inline:16px; }
  .transport { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mix-bus { grid-template-columns:minmax(0,1fr); gap:24px; }
  #instruments { padding:18px; }
  .session-actions button { flex:1 1 130px; }
  .instrument-effects { padding:12px; }
  .instrument-heading > div { display:flex; flex-wrap:wrap; gap:8px; }
  .keyboard-tools > div { display:flex; align-items:center; width:100%; justify-content:space-between; }
  #octave-name { padding-inline:8px; }
  .deck-heading .small-button { margin-left:auto; }
}