:root {
  color-scheme: dark;
  --bg: #070a0f;
  --bg-2: #0b0f16;
  --panel: #0e141d;
  --panel-2: #121a25;
  --panel-3: #17212e;
  --line: rgba(184, 207, 231, .16);
  --line-strong: rgba(184, 207, 231, .28);
  --text: #eef4f8;
  --muted: #8fa2b5;
  --soft: #b8c6d4;
  --cyan: #1eb9ff;
  --teal: #2ee6d3;
  --green: #67df5d;
  --yellow: #efd447;
  --orange: #ff9c34;
  --red: #ff5d64;
  --magenta: #e560e8;
  --violet: #ab6cff;
  --signal: #5be084;
  --danger: #ff616c;
  --radius: 8px;
  --shadow: 0 12px 32px rgba(0,0,0,.26);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 45% -15%, #101826 0, var(--bg) 48%); color: var(--text); }
body { min-width: 320px; }
button, select, input { font: inherit; }
button, select, input[type="number"], input[type="search"] {
  border: 1px solid var(--line);
  background: #0a1018;
  color: var(--text);
  border-radius: 5px;
}
button { min-height: 32px; padding: .42rem .65rem; cursor: pointer; font-size: .72rem; font-weight: 700; letter-spacing: .045em; }
button:hover { border-color: rgba(126, 193, 239, .56); background: #111b27; }
button:focus-visible, input:focus-visible, select:focus-visible, [role="slider"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
button[aria-pressed="true"] { border-color: rgba(55,172,255,.68); background: rgba(23,112,178,.24); color: #e8f8ff; box-shadow: inset 0 0 18px rgba(26,143,218,.11); }
button:disabled { opacity: .36; cursor: default; }
select { min-height: 32px; padding: .35rem .55rem; }
input[type="search"], input[type="number"] { min-height: 32px; padding: .42rem .55rem; }
input[type="range"] { accent-color: var(--cyan); }
meter { width: 100%; height: 8px; }
[hidden] { display: none !important; }

.instrument-shell { width: min(1920px, 100%); margin: 0 auto; padding: 7px; display: grid; gap: 7px; }
.instrument-header { min-height: 54px; display: grid; grid-template-columns: auto minmax(240px, 1fr) auto auto auto auto; align-items: stretch; gap: 7px; }
.instrument-header > * { border: 1px solid var(--line); background: rgba(11,15,22,.94); border-radius: var(--radius); }
.brand-lockup { display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-color: transparent !important; background: transparent !important; }
.brand-mark { font-size: 1.44rem; font-weight: 300; letter-spacing: -.05em; color: #dfeaf3; white-space: nowrap; }
.brand-copy { display: grid; gap: 1px; padding-left: 10px; border-left: 1px solid var(--line); }
.brand-copy strong { font-size: .74rem; letter-spacing: .14em; }
.brand-copy small { color: var(--muted); font: 600 .63rem/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0; border: 0 !important; background: transparent !important; }
.mode-switch button { min-height: 54px; font-size: .84rem; }
.mode-switch button[aria-pressed="true"] { background: linear-gradient(180deg, rgba(17,103,169,.38), rgba(7,57,95,.24)); border-color: rgba(32,166,255,.62); color: #45c1ff; }
.header-button { min-width: 112px; }
.conductor-button strong { color: var(--signal); }
.conductor-button[aria-pressed="false"] strong { color: var(--danger); }
.waves-link { display: grid; place-items: center; text-decoration: none; color: var(--text); font-size: .74rem; font-weight: 800; letter-spacing: .06em; }
.source-health { display: flex; align-items: center; gap: 8px; padding: 5px 10px; min-width: 130px; text-align: left; }
.source-health span:last-child { display: grid; gap: 1px; }
.source-health strong { font-size: .7rem; }
.source-health small { color: var(--muted); font-size: .62rem; }
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px rgba(91,224,132,.5); }

.upper-grid { display: grid; grid-template-columns: 263px minmax(440px, 1fr) 318px; gap: 7px; min-height: 470px; }
.tower, .monitor-column, .instrument-bank, .rack-module, .instrument-footer { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(15,21,30,.97), rgba(9,13,19,.97)); border-radius: var(--radius); overflow: hidden; }
.tower { display: grid; grid-template-rows: auto minmax(0,1fr); min-height: 0; }
.tower-title { min-height: 37px; padding: 9px 11px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.tower-title strong { font-size: .72rem; letter-spacing: .08em; color: #57c6ff; }
.media-tower .tower-title strong { color: #d477ff; }
.tower-title span { color: var(--muted); font-size: .57rem; letter-spacing: .06em; }
.audio-design-panel, .media-browser-panel, .queue-panel { min-height: 0; padding: 10px; overflow: auto; }
.field-label { color: #a9bac8; font: 700 .62rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; }
.control-select { width: 100%; margin-top: 5px; }
.transport-row { display: grid; grid-template-columns: auto auto 1fr; gap: 6px; margin-top: 9px; }
.transport-row button:first-child { border-color: rgba(91,224,132,.4); color: #9bf0b2; }
.bpm-control { display: flex; align-items: center; gap: 5px; font-size: .6rem; color: var(--muted); border: 1px solid var(--line); background: #0a1018; padding: 0 6px; border-radius: 5px; }
.bpm-control input { width: 58px; border: 0; background: transparent; min-height: 28px; }
.full-button { width: 100%; margin-top: 7px; }
.analysis-block { margin-top: 11px; display: grid; gap: 6px; }
#spectrum { width: 100%; height: 86px; background: linear-gradient(180deg, rgba(13,30,45,.9), rgba(4,9,15,.9)); border: 1px solid var(--line); border-radius: 5px; }
.band-meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.band-meters label { display: grid; gap: 3px; font-size: .55rem; color: var(--muted); }
.master-slider { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; margin-top: 10px; color: var(--muted); font-size: .6rem; }
.master-slider output { color: var(--soft); font: 600 .62rem ui-monospace, monospace; }

.monitor-column { display: grid; grid-template-rows: auto minmax(320px, 1fr) auto auto; min-width: 0; }
.monitor-toolbar { min-height: 37px; padding: 6px 10px; display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); }
.monitor-toolbar > div:first-child { display: flex; gap: 9px; align-items: baseline; min-width: 0; }
.monitor-toolbar strong { font-size: .67rem; color: #9fdcff; letter-spacing: .07em; }
.monitor-toolbar span { color: var(--muted); font-size: .6rem; }
.monitor-tabs { display: flex; gap: 4px; }
.monitor-tabs button { min-height: 26px; padding: .25rem .55rem; font-size: .62rem; }
.monitor-readout { display: flex; gap: 8px; font: 600 .58rem ui-monospace, monospace; white-space: nowrap; }
.monitor-deck { position: relative; min-height: 320px; background: #020406; overflow: hidden; display: grid; }
.monitor-deck[data-programme-view="split"] { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.monitor-pane { position: relative; min-width: 0; min-height: 100%; background: #03050a; }
.monitor-pane canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.monitor-overlay { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; justify-content: space-between; pointer-events: none; text-shadow: 0 1px 5px #000; }
.monitor-overlay strong { font: 700 .62rem ui-monospace, monospace; }
.monitor-overlay span { color: #a9c0d3; font: 700 .57rem ui-monospace, monospace; }
.programme-authority { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-top: 1px solid var(--line); }
.programme-authority button { min-height: 28px; }
.apply-toggle { display: flex; align-items: center; gap: 5px; font-size: .58rem; color: var(--muted); }
.apply-toggle select { min-height: 28px; }
.draft-status { margin-right: auto; font-size: .61rem; color: var(--muted); }
.draft-status strong { color: var(--signal); }
.draft-status strong[data-dirty="true"] { color: var(--orange); }

.layer-rail-wrap { border-top: 1px solid var(--line); padding: 7px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 7px; align-items: center; }
.layer-rail-heading { min-width: 72px; display: grid; gap: 2px; }
.layer-rail-heading strong { font-size: .61rem; letter-spacing: .06em; }
.layer-rail-heading span { color: var(--muted); font-size: .55rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-rail { display: flex; gap: 5px; overflow-x: auto; min-width: 0; padding-bottom: 2px; }
.layer-chip { min-width: 112px; display: grid; grid-template-columns: auto 1fr; gap: 7px; align-items: center; text-align: left; padding: 5px 7px; min-height: 38px; }
.layer-chip .layer-index { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(41,178,255,.35); background: rgba(18,107,160,.14); border-radius: 5px; color: #72d4ff; font: 700 .62rem ui-monospace, monospace; }
.layer-chip .layer-copy { display: grid; min-width: 0; }
.layer-chip strong { font-size: .6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-chip small { color: var(--muted); font-size: .53rem; }
.layer-chip[aria-pressed="true"] { background: rgba(22,93,134,.25); }
.layer-chip[data-disabled="true"] { opacity: .47; }
.layer-actions { display: flex; gap: 4px; }
.layer-actions button { min-height: 27px; padding: .3rem .45rem; font-size: .55rem; }

.media-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.media-toolbar .control-select { margin: 0; }
.media-search { width: 100%; margin-top: 7px; }
.media-grid { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.media-card { aspect-ratio: 16 / 9; position: relative; overflow: hidden; padding: 0; min-height: 0; border-radius: 5px; text-align: left; }
.media-card img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .8; }
.media-card .media-procedural-preview { position: absolute; inset: 0; background: radial-gradient(circle at 35% 35%, var(--preview-a, #1fb9ff), transparent 35%), radial-gradient(circle at 68% 60%, var(--preview-b, #b15cff), transparent 42%), #0a0d15; }
.media-card span { position: absolute; left: 4px; right: 4px; bottom: 3px; padding: 3px 4px; background: rgba(0,0,0,.64); font-size: .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-card[data-selected="true"] { border-color: var(--magenta); box-shadow: 0 0 0 1px rgba(229,96,232,.32); }
.selected-media-info { border-top: 1px solid var(--line); margin-top: 9px; padding-top: 8px; display: grid; gap: 4px; }
.selected-media-info strong { font-size: .65rem; }
.selected-media-info span { color: var(--muted); font-size: .55rem; }
.selected-media-info button { margin-top: 2px; }

.queue-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 7px; }
.queue-toolbar strong { font-size: .65rem; letter-spacing: .07em; }
.queue-toolbar button { min-height: 27px; padding: .3rem .5rem; }
.queue-list { display: grid; gap: 5px; min-height: 170px; }
.queue-row { display: grid; grid-template-columns: 47px minmax(0,1fr) auto; gap: 7px; align-items: center; padding: 7px; border: 1px solid var(--line); background: #0a1018; border-radius: 5px; min-height: 46px; }
.queue-row[data-current="true"] { border-color: rgba(61,189,255,.48); background: rgba(15,65,95,.2); }
.queue-position { color: #6fcfff; font: 700 .52rem ui-monospace, monospace; }
.queue-copy { min-width: 0; display: grid; gap: 2px; }
.queue-copy strong { font-size: .6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-copy small { color: var(--muted); font-size: .51rem; }
.queue-row button { min-height: 25px; padding: .24rem .42rem; font-size: .5rem; }
.queue-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.queue-library { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 9px; }
.shortlist { display: grid; gap: 4px; margin-top: 5px; }
.shortlist button { min-height: 30px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.instrument-bank { padding: 6px; }
.instrument-cells { display: grid; grid-template-columns: repeat(8, minmax(118px, 1fr)); gap: 6px; }
.instrument-cell { --cell-accent: var(--cyan); position: relative; border: 1px solid color-mix(in srgb, var(--cell-accent) 38%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--cell-accent) 9%, #0d141c), #0a0f16 82%); border-radius: 7px; min-width: 0; padding: 7px; display: grid; grid-template-rows: auto auto auto auto; gap: 7px; box-shadow: inset 0 0 24px color-mix(in srgb, var(--cell-accent) 5%, transparent); }
.instrument-cell[data-accent="cyan"] { --cell-accent: var(--cyan); }
.instrument-cell[data-accent="teal"] { --cell-accent: var(--teal); }
.instrument-cell[data-accent="green"] { --cell-accent: var(--green); }
.instrument-cell[data-accent="yellow"] { --cell-accent: var(--yellow); }
.instrument-cell[data-accent="orange"] { --cell-accent: var(--orange); }
.instrument-cell[data-accent="red"] { --cell-accent: var(--red); }
.instrument-cell[data-accent="magenta"] { --cell-accent: var(--magenta); }
.instrument-cell[data-accent="violet"] { --cell-accent: var(--violet); }
.instrument-cell[data-accent="lime"] { --cell-accent: #a8f05e; }
.cell-heading { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 5px; align-items: center; }
.cell-number { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid color-mix(in srgb, var(--cell-accent) 54%, transparent); background: color-mix(in srgb, var(--cell-accent) 11%, transparent); border-radius: 5px; color: var(--cell-accent); font: 700 .62rem ui-monospace, monospace; }
.cell-bind-button { min-width: 0; min-height: 27px; padding: .28rem .38rem; text-align: left; border-color: transparent; background: transparent; }
.cell-bind-button strong { display: block; color: var(--cell-accent); font-size: .63rem; overflow: hidden; text-overflow: ellipsis; }
.cell-bind-button small { display: block; color: var(--muted); font-size: .48rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-power { width: 27px; min-width: 27px; padding: 0; color: var(--signal); }
.cell-primary { display: grid; place-items: center; gap: 3px; }
.knob { --knob-angle: -120deg; --knob-progress: 0%; width: 72px; height: 72px; border-radius: 50%; position: relative; display: grid; place-items: center; cursor: ns-resize; touch-action: none; background: radial-gradient(circle at 45% 38%, #2a333d 0 12%, #171d25 44%, #080c11 72%), conic-gradient(from 220deg, var(--cell-accent) var(--knob-progress), rgba(255,255,255,.07) 0 68%, transparent 68%); border: 1px solid color-mix(in srgb, var(--cell-accent) 44%, #333); box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 0 13px rgba(255,255,255,.04); }
.knob::before { content: ""; position: absolute; width: 3px; height: 25px; border-radius: 2px; background: var(--cell-accent); top: 7px; left: calc(50% - 1.5px); transform-origin: 50% 29px; transform: rotate(var(--knob-angle)); box-shadow: 0 0 5px color-mix(in srgb, var(--cell-accent) 55%, transparent); }
.knob-value { font: 700 .55rem ui-monospace, monospace; color: #e8f0f5; margin-top: 18px; }
.knob-label { color: var(--soft); font-size: .52rem; letter-spacing: .04em; }
.cell-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mini-control { display: grid; gap: 3px; }
.mini-control label { display: flex; justify-content: space-between; gap: 4px; color: var(--muted); font-size: .48rem; }
.mini-control output { color: var(--soft); font: 600 .48rem ui-monospace, monospace; }
.mini-control input[type="range"] { width: 100%; height: 10px; }
.cell-depth { display: grid; gap: 3px; }
.cell-depth label { display: flex; justify-content: space-between; gap: 4px; color: var(--muted); font-size: .48rem; }
.cell-depth output { color: var(--soft); font: 600 .48rem ui-monospace, monospace; }
.cell-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.cell-actions button { min-height: 27px; font-size: .51rem; padding: .25rem .36rem; }
.cell-actions .cell-lock[aria-pressed="true"] { border-color: var(--cell-accent); color: var(--cell-accent); }

.bottom-rack { display: grid; grid-template-columns: 1.7fr 1.2fr .9fr .8fr; gap: 7px; }
.rack-module { padding: 9px; min-width: 0; }
.module-heading { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; }
.module-heading strong { font-size: .62rem; letter-spacing: .07em; }
.module-heading span { color: var(--muted); font: 600 .52rem ui-monospace, monospace; }
.variation-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.ab-row { display: grid; grid-template-columns: 44px 44px 1fr; gap: 5px; margin-top: 6px; }
.morph-control { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; margin-top: 7px; color: var(--muted); font-size: .55rem; }
.morph-control output { color: var(--soft); font: 600 .52rem ui-monospace, monospace; }
.patch-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 7px; }
.transition-config { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7px; }
.transition-config label, .master-module label { display: grid; gap: 4px; color: var(--muted); font-size: .54rem; }
.transition-config label:last-child { grid-template-columns: auto 1fr auto; align-items: center; }
.transition-config output, .master-module output { color: var(--soft); font: 600 .52rem ui-monospace, monospace; }
.transition-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 9px; }
.master-module { display: grid; align-content: start; gap: 7px; }
.master-module label { grid-template-columns: auto 1fr auto; align-items: center; }
.master-meters { display: grid; gap: 3px; }
.system-list { display: grid; gap: 5px; margin: 0 0 8px; }
.system-list div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.05); padding-bottom: 3px; }
.system-list dt { color: var(--muted); font-size: .51rem; }
.system-list dd { margin: 0; font: 700 .52rem ui-monospace, monospace; }
.status-module button { width: 100%; }
.instrument-footer { min-height: 31px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; color: var(--muted); font: 600 .55rem ui-monospace, monospace; }

.instrument-dialog { width: min(760px, calc(100vw - 24px)); max-height: min(78vh, 760px); padding: 0; border: 1px solid var(--line-strong); border-radius: 10px; background: #0b1119; color: var(--text); box-shadow: 0 28px 90px rgba(0,0,0,.7); }
.instrument-dialog::backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(3px); }
.dialog-shell { display: grid; max-height: inherit; }
.dialog-shell header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--line); }
.dialog-shell header > div { display: grid; gap: 2px; }
.dialog-shell header strong { font-size: .72rem; letter-spacing: .08em; }
.dialog-shell header span { color: var(--muted); font-size: .58rem; }
.binding-options { padding: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; overflow: auto; }
.binding-option { min-height: 74px; text-align: left; display: grid; align-content: center; gap: 4px; }
.binding-option strong { color: #bde9ff; }
.binding-option span { color: var(--muted); font-size: .55rem; }
.patch-list, .health-details { padding: 10px; display: grid; gap: 6px; overflow: auto; }
.patch-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 5px; }
.patch-row > div { display: grid; gap: 2px; min-width: 0; }
.patch-row strong { font-size: .63rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patch-row small { color: var(--muted); font-size: .52rem; }
.health-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.health-row strong { font-size: .61rem; }
.health-row span { color: var(--muted); font: 600 .53rem ui-monospace, monospace; }

.waves-page { margin: 0; overflow: hidden; background: #020406; }
.waves-monitor { position: fixed; inset: 0; background: #020406; }
.waves-monitor canvas { width: 100%; height: 100%; display: block; }
.waves-hud { position: fixed; left: 12px; right: 12px; top: 10px; display: flex; justify-content: space-between; gap: 12px; z-index: 2; pointer-events: none; color: rgba(238,244,248,.78); font: 700 .62rem ui-monospace, monospace; text-shadow: 0 1px 5px #000; }

@media (max-width: 1450px) {
  .instrument-cells { grid-template-columns: repeat(4, minmax(130px, 1fr)); }
  .upper-grid { grid-template-columns: 236px minmax(420px, 1fr) 282px; }
  .bottom-rack { grid-template-columns: 1.45fr 1.2fr .8fr .8fr; }
}
@media (max-width: 1080px) {
  .instrument-header { grid-template-columns: auto 1fr auto auto; }
  .waves-link, .source-health { display: none; }
  .upper-grid { grid-template-columns: 210px minmax(380px, 1fr); }
  .media-tower { grid-column: 1 / -1; min-height: 280px; }
  .media-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .bottom-rack { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .instrument-shell { padding: 4px; gap: 4px; }
  .instrument-header { grid-template-columns: 1fr auto; }
  .brand-lockup { grid-column: 1 / -1; }
  .mode-switch { grid-column: 1 / -1; }
  .header-button { min-width: 0; }
  .upper-grid { grid-template-columns: 1fr; }
  .audio-tower, .media-tower { min-height: 260px; }
  .monitor-column { grid-row: 1; min-height: 440px; }
  .instrument-cells { grid-template-columns: repeat(2, minmax(138px,1fr)); }
  .bottom-rack { grid-template-columns: 1fr; }
  .layer-rail-wrap { grid-template-columns: 1fr; }
  .layer-actions { overflow-x: auto; }
  .media-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .monitor-toolbar { grid-template-columns: 1fr auto; }
  .monitor-readout { display: none; }
  .programme-authority { flex-wrap: wrap; }
  .draft-status { width: 100%; order: -1; }
  .instrument-footer { flex-direction: column; align-items: flex-start; }
  .binding-options { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
  .instrument-cells { grid-template-columns: 1fr; }
  .instrument-cell { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .cell-heading { grid-column: 1 / -1; }
  .cell-primary { grid-row: 2; }
  .cell-secondary, .cell-depth, .cell-actions { grid-column: 2; }
  .binding-options { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* m3 Design music-video synthesiser workbench */
.audition-position { display:grid; grid-template-columns:auto 1fr auto; gap:7px; align-items:center; margin-top:8px; color:var(--muted); font-size:.57rem; }
.audition-position output { font:600 .54rem ui-monospace,monospace; color:var(--soft); }
.design-workbench { display:grid; grid-template-columns:1fr 1.35fr 1.25fr 1.1fr; gap:7px; }
.workbench-panel { border:1px solid var(--line); background:linear-gradient(180deg,rgba(15,21,30,.97),rgba(9,13,19,.97)); border-radius:var(--radius); padding:9px; min-width:0; min-height:190px; }
.workbench-panel .module-heading { margin-bottom:7px; }
.workbench-actions { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:6px; }
.layer-type-actions { grid-template-columns:repeat(2,1fr); margin:0 0 8px; }
.slot-readout { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:9px; padding:7px; border:1px solid var(--line); border-radius:5px; background:#090f16; color:var(--muted); font-size:.53rem; }
.slot-readout strong { color:#83d8ff; font:700 .55rem ui-monospace,monospace; }
.effect-add-row,.mapping-add-row,.section-toolbar { display:grid; gap:5px; align-items:center; }
.effect-add-row { grid-template-columns:1fr auto; }
.mapping-add-row { grid-template-columns:1fr 1fr auto; }
.section-toolbar { grid-template-columns:72px 1fr 1fr; }
.section-toolbar label { display:grid; grid-template-columns:auto 1fr; gap:5px; align-items:center; color:var(--muted); font-size:.54rem; }
.effect-chain,.mapping-list,.section-list { display:grid; gap:5px; margin-top:7px; max-height:142px; overflow:auto; }
.effect-row { display:grid; grid-template-columns:76px 1fr 28px 28px 28px; gap:4px; align-items:center; }
.effect-row button,.mapping-row button,.section-row button { min-height:26px; padding:.23rem .38rem; font-size:.5rem; }
.effect-toggle { text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mapping-row { display:grid; grid-template-columns:1fr 1fr 1.1fr .8fr 28px; gap:4px; align-items:center; }
.mapping-row select,.effect-row select,.mapping-add-row select,.mask-controls select { min-width:0; min-height:27px; font-size:.52rem; }
.mask-controls { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:5px; margin-top:8px; padding-top:7px; border-top:1px solid var(--line); }
.mask-controls label { display:grid; gap:3px; color:var(--muted); font-size:.5rem; }
.section-row { display:grid; grid-template-columns:minmax(0,1fr) 52px 58px 28px; gap:4px; align-items:center; padding:4px; border:1px solid var(--line); border-radius:5px; }
.section-row[data-active="true"] { border-color:rgba(41,178,255,.48); background:rgba(20,93,138,.13); }
.section-row > button:first-child { text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.section-row input { min-width:0; width:100%; }
.section-progress { display:grid; grid-template-columns:auto 1fr; gap:7px; align-items:center; margin-top:7px; color:var(--muted); font:600 .51rem ui-monospace,monospace; }
.section-progress progress { width:100%; }
.patch-actions { grid-template-columns:repeat(3,1fr); }
.patch-row { grid-template-columns:minmax(150px,1fr) repeat(4,auto); }

@media (max-width:1450px){ .design-workbench{grid-template-columns:1fr 1fr;} }
@media (max-width:760px){ .design-workbench{grid-template-columns:1fr;} .workbench-panel{min-height:0;} .mapping-row{grid-template-columns:1fr 1fr;} .mapping-row input{grid-column:1 / -1;} .mask-controls{grid-template-columns:1fr 1fr;} .patch-row{grid-template-columns:1fr 1fr;} .patch-row>div{grid-column:1 / -1;} }
.selected-media-actions { display:grid; grid-template-columns:.8fr 1.4fr; gap:5px; }
.group-performance { display:grid; grid-template-columns:auto 1fr; gap:6px; align-items:center; margin-top:7px; }
.group-performance label { display:grid; grid-template-columns:auto 1fr; gap:6px; align-items:center; color:var(--muted); font-size:.5rem; }