@font-face { font-family: Inter; src: url('/fonts/inter-variable.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: Maison; src: url('/fonts/maison-neue-400.woff2') format('woff2'); font-display: swap; }
/* The quiet theme: a near-black ground, white type, three greys and one semantic red. Colour appears only where it identifies
   a voice (--voice is the selected voice, --color a track's own) or a live state (--live). The Input and Output stages are darker still. */
:root {
  color-scheme: dark; font: var(--font-weight) var(--font-control) var(--font-ui); font-optical-sizing: auto; font-variant-numeric: tabular-nums;
  --font-ui: Inter, Maison, Arial, sans-serif; --font-size: 10px; --font-weight: 350;
  --font-control: var(--font-size); --font-secondary: var(--font-size); --font-meta: var(--font-size);
  --font-label: var(--font-size); --font-numeric: var(--font-ui);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --control-height: 28px; --target-min: 24px; --motion-fast: 100ms;
  --inspector-height: 640px; --inspector-voice-height: 310px; --inspector-stages-height: 300px;
  --bg: #111214; --ground: #111214; --field: #1a1c1f; --line: #2c2f33; --line-soft: #232629;
  --text: #ececec; --muted: #a0a0a0; --dim: #5f6266; --live: #e0583d;
  --stage: #0a1012; --stage-line: #26302a; --stage-guide: #4b5551;
  --hue-library: #7f9cc4; --hue-input: #5fb3c1; --hue-output: #b88ad2; --hue-sequencer: #c8a25e; --hue-inspector: #c07a8a;
  --panel-gap: 6px; --panel-padding: 8px; --panel-header-height: 28px; --device-header-height: 24px;
  --panel-border: 1px solid var(--line); --panel-rule: 1px solid var(--line-soft);
  --panel-header-padding: 3px var(--panel-padding); --panel-body-padding: 5px var(--panel-padding);
  --panel-font-size: var(--font-secondary); --effect-preview-height: 28px;
  --preview: 300px; --inspector: 280px;
}
* { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, b, strong, th { font-size: inherit; font-weight: inherit; }
code, pre, kbd { font-family: inherit; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: transparent; padding: 6px 9px; cursor: pointer; border-radius: 3px; white-space: nowrap; }
button:hover, a:hover { color: var(--text); background: var(--field); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible, summary:focus-visible, [role=slider]:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
input, select { min-width: 0; border: 1px solid var(--line); background: var(--field); color: var(--text); border-radius: 3px; outline: none; }
input:focus, select:focus { border-color: var(--text); }
input[type=number] { font-family: var(--font-numeric); appearance: textfield; }
input::-webkit-inner-spin-button { appearance: none; }
input[type=range] { accent-color: var(--text); height: 5px; width: 100%; border: 0; cursor: ew-resize; }
input[type=checkbox] { accent-color: var(--text); width: 15px; height: 15px; }
input[type=color] { width: 48px; height: 32px; padding: 3px; }
select { width: 100%; padding: 7px 8px; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
[hidden] { display: none !important; }
small { font-size: var(--font-secondary); }

/* Project, playback, and setup remain separate from the selected voice. */
#studio { display: grid; grid-template-rows: 32px 48px 1fr 26px; height: 100dvh; min-height: 800px; }
.project-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
#save-state { color: var(--muted); font-size: var(--font-secondary); white-space: nowrap; }
.project-actions { flex-shrink: 0; gap: 5px; }
.project-actions button, .wiki-link { font-size: var(--font-secondary); padding: 4px 7px; }
.wiki-link { margin-left: 6px; border-left: 1px solid var(--line); }
#help-button { border: 1px solid var(--line); border-radius: 50%; padding: 0; width: 19px; height: 19px; }
/* Transport controls are words: grey at rest, black when hovered or pressed; only Record and Live carry --live. */
.transport-bar { background: var(--bg); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; gap: 12px; font-size: var(--font-secondary); border-bottom: 1px solid var(--line-soft); }
.transport-bar button { color: var(--muted); }
.transport-bar button:hover, .transport-bar button[aria-pressed=true] { color: var(--text); }
.transport-left, .transport-main, .transport-right { display: flex; align-items: center; gap: 10px; }
.transport-main { gap: 8px; }
.transport-left { min-width: 245px; }
.transport-right { justify-content: flex-end; min-width: 245px; }
.icon-button { width: 26px; height: 26px; padding: 5px; }
.icon-button svg, .play-button svg { width: 16px; height: 16px; fill: currentColor; }
.play-button { height: 26px; padding: 5px; }
.play-button.playing { color: var(--text); }
.tempo { display: flex; align-items: center; gap: 5px; }
.tempo input { width: 38px; height: 26px; padding: 0 2px; font-size: var(--font-secondary); text-align: right; background: var(--field); border-color: transparent; }
.tempo span { font-size: var(--font-secondary); color: var(--muted); }
#clock-source { color: var(--muted); font-size: var(--font-secondary); }
.record-button { display: grid; place-items: center; width: 26px; height: 26px; }
.record-button span { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.record-button.recording span { background: var(--live); }
/* Screenshot and Record video in the Output's heading (video plan, The interface): the Facade or Interface choice, a camera and a dot. The dot
   and its elapsed time are red only while a video records; the group wraps under the views where the panel is narrow. */
.preview-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0 var(--space-2); min-width: 0; }
.capture-tools { display: flex; align-items: center; gap: 1px; }
.capture-tools::before { content: ''; height: 14px; margin-right: var(--space-1); border-left: 1px solid var(--line); }
#capture-source { width: auto; height: 20px; padding: 0 2px; font-size: var(--font-secondary); color: var(--muted); border-color: transparent; background: transparent; }
#capture-source:hover, #capture-source:focus-visible { color: var(--text); border-color: var(--line); }
.capture-button { display: grid; place-items: center; width: var(--target-min); height: var(--target-min); padding: 0; color: var(--muted); }
.capture-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; }
/* Record video's dot sits in a ring, so it never reads as the transport's Record a take. */
.capture-record span { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); outline: 1px solid var(--muted); outline-offset: 2px; }
.capture-record[aria-pressed=true] span { background: var(--live); }
#capture-time { min-width: 26px; color: var(--live); font-size: var(--font-secondary); font-variant-numeric: tabular-nums; }
.transport-divider { border-left: 1px solid var(--line); height: 16px; margin: 0 5px; }
#beat-position { font: var(--font-weight) var(--font-secondary) var(--font-ui); min-width: 84px; text-align: center; color: var(--text); }
#time-position { font: var(--font-weight) var(--font-secondary) var(--font-ui); color: var(--muted); min-width: 85px; }
.toggle { height: 26px; font-size: 18px; padding: 0 7px; }
.toggle.active { color: var(--text); }
#auto-play { font-size: var(--font-size); }
#simulate-press { padding-inline: 6px; white-space: nowrap; }
.setup-button { padding: 5px 11px; }
.mode-toggle { padding: 5px 11px; color: var(--muted); }
.mode-toggle[aria-pressed="true"] { color: var(--text); }
.help-toggle { padding: 5px 9px; font-weight: var(--font-weight); }
#explain-popover { position: fixed; margin: 0; inset: auto; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 10px 12px; font-size: var(--font-secondary); line-height: 1.45; z-index: 50; pointer-events: none; }
#explain-popover h4 { margin: 0 0 4px; font-size: var(--font-secondary); color: var(--text); }
#explain-popover p { margin: 0; color: var(--muted); }
#explain-popover dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0 0; font-family: var(--font-ui); }
#explain-popover dl b { font-weight: var(--font-weight); overflow-wrap: anywhere; }
#explain-popover .why { grid-column: 1 / -1; color: var(--muted); }
body[data-explain=on] [data-key], body[data-explain=on] .knob, body[data-explain=on] .cell, body[data-explain=on] .pill { cursor: help; }
/* Simple mode dims the Advanced controls and makes them inert (mode.js); nested marks do not compound. */
body[data-mode="simple"] [data-advanced] { display: none !important; }

.setup-button.laser-armed { color: var(--live); }
.export-button { display: flex; align-items: center; gap: 12px; padding: 6px 12px; }
.status-dot { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--dim); }
.status-dot.ready { background: var(--text); }
.status-dot.armed { background: var(--live); }

/* The library has one category row and one place to add a generic voice. */
.main-grid { display: grid; grid-template-columns: 205px minmax(0, 1fr); min-height: 0; }
.browser { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--bg); border-right: 5px solid var(--field); container: library / inline-size; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 24px; padding: 0 8px; font-size: var(--font-secondary); background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.search { display: flex; align-items: center; gap: 6px; margin: 12px 10px; padding: 5px 7px; background: var(--field); border: 1px solid var(--line); border-radius: 3px; }
.search>span:first-child { font-size: 20px; }
.search>span:last-child { font-size: var(--font-meta); color: var(--dim); white-space: nowrap; }
.search input { width: 100%; font-size: var(--font-secondary); border: 0; padding: 3px 0; background: transparent; }
.browser > .search { flex: none; }
.browser-nav { display: flex; gap: 2px; padding: 0 8px 12px; border-bottom: 1px solid var(--line-soft); }
.browser-nav button { font-size: var(--font-secondary); padding: 4px 6px; color: var(--muted); }
.browser-nav button.active { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.browser-nav em { display: none; }
.browser-section-title { display: flex; justify-content: space-between; padding: 14px 12px 6px; font-size: var(--font-meta); letter-spacing: .5px; color: var(--dim); }
.preset-list { flex: 1; min-height: 100px; overflow-y: auto; padding: 0 7px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.library-content { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.library-content > .preset-list { min-height: 0; overflow: visible; }
.library-reference { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: var(--panel-gap); padding: var(--panel-gap); color: var(--muted); }
/* Too narrow for the label and a readable track name, the select wraps under the label together with its buttons. */
.reference-pick { display: flex; flex: 1 1 200px; align-items: center; gap: var(--panel-gap); min-width: 0; }
.library-reference select { flex: 1; min-width: 0; }
/* A narrow Library keeps the reference select readable: the label gives way to its ● (the select's own name stays). Separate stems has
   a line of its own under the select at every width, so a wider Library widens the select. */
@container library (max-width: 320px) { .library-reference .wide-label { display: none; } }
.reference-stems { flex: 1 0 100%; display: flex; } .reference-stems:has(> [hidden]) { display: none; }
/* What makes the selected stage's show sits with the stage buttons; labels stay whole and the toolbar wraps when narrow. The show and the
   Timeline menu wrap as one, so the menu never sits alone on a row; on the stage buttons' row they fill it, the menu at its right edge. */
.stage-tools { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--panel-gap); }
.stage-show { display: flex; align-items: center; flex-wrap: wrap; gap: var(--panel-gap); }
.stage-show .inline-check { white-space: nowrap; min-height: var(--target-min); }
.stage-show button, #separate-stems { min-height: var(--target-min); padding: 0 var(--panel-gap); color: var(--muted); border: var(--panel-border); white-space: nowrap; font: var(--font-weight) var(--font-secondary) var(--font-ui); }
/* Make transition keeps its place on a level, so the toolbar wraps the same way on every stage and nothing jumps between them. */
.stage-show #make-transition[hidden] { display: block !important; visibility: hidden; }
.sequencer-toolbar .timeline-tools { margin-left: auto; }
.preset { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 5px; border-left: 2px solid transparent; }
.preset svg { width: 28px; height: 27px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 1; }
.preset>span { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--font-secondary); }
.preset small { color: var(--muted); font-size: var(--font-meta); }
.preset.selected { background: var(--field); border-color: var(--text); }
.preset.selected svg { stroke: var(--text); }
.preset .preset-add { margin-left: auto; color: var(--muted); font-size: 16px; }
/* One compact row: the full names live in the buttons' accessible labels and titles. */
.browser-import { display: flex; flex: none; gap: 2px; margin: 6px 6px 0; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.browser-import button { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; min-width: 0; min-height: 26px; padding: 0 4px; font-size: var(--font-secondary); overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.browser-import button>span { color: var(--text); }
.browser-bottom { padding: 12px; border-top: 1px solid var(--line-soft); }
.browser-bottom p { margin: 0 0 12px; font-size: var(--font-secondary); color: var(--muted); line-height: 1.6; }
.browser-bottom a { display: flex; justify-content: space-between; font-size: var(--font-meta); color: var(--muted); }

/* Preview and arrangement retain the same positions while inspector tabs change. */
.workbench { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.preview-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; flex-shrink: 0; height: var(--preview); min-height: 225px; max-height: 60vh; background: var(--field); }
.preview-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.segmented { display: flex; gap: 3px; }
.segmented button { color: var(--muted); font-size: var(--font-secondary); padding: 4px 7px; }
.segmented button.active { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.segmented #input-guides[aria-pressed=true] { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
/* Pills are words: grey at rest, black with a 1.5 px underline when chosen. */
.pill-row { display: inline-flex; flex-wrap: wrap; gap: 12px; }
.pill { color: var(--muted); font-size: var(--font-secondary); padding: 2px 0; border-radius: 0; border-bottom: 1.5px solid transparent; }
.pill:hover { background: none; }
.pill.active, .pill[aria-pressed=true] { color: var(--text); border-bottom-color: var(--text); }
/* The stages are dark: they simulate light on a building. The white page ends where the canvas starts. */
.canvas-wrap { position: relative; flex: 1; min-height: 0; background: var(--stage); overflow: hidden; }
.canvas-wrap canvas { width: 100%; height: 100%; display: block; }
.canvas-corner { position: absolute; display: flex; align-items: center; gap: 7px; color: var(--dim); font: var(--font-weight) var(--font-meta) var(--font-ui); pointer-events: none; }
.top-left { left: 14px; top: 14px; }
.mini-dot { display: inline-block; width: 5px; height: 5px; background: var(--voice, var(--dim)); }
.preview-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; min-height: 28px; gap: 10px; padding: 4px 12px; background: var(--bg); color: var(--muted); font-size: var(--font-secondary); }
#input-caption, #manual-help { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-readout { display: flex; align-items: center; gap: 8px; font: var(--font-weight) var(--font-meta) var(--font-ui); white-space: nowrap; }
.scan-readout meter { width: 40px; height: 5px; appearance: none; background: var(--field); border: 0; border-radius: 0; }
.scan-readout meter::-webkit-meter-bar { background: var(--field); border: 0; border-radius: 0; }
.scan-readout meter::-webkit-meter-optimum-value { background: var(--text); }
.scan-readout meter.over::-webkit-meter-optimum-value { background: var(--live); }
#three-view { position: absolute; inset: 0; }
.resize-handle { height: 5px; flex-shrink: 0; cursor: row-resize; background: var(--field); }
.resize-handle:hover { background: var(--line); }
.sequencer { display: flex; flex-direction: column; flex: 1; min-height: 160px; background: var(--bg); }
.sequencer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 28px; flex-shrink: 0; padding: 0 10px; background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.view-switch, .level-switch { display: flex; align-items: center; gap: 4px; }
.view-switch button { font-size: var(--font-secondary); color: var(--muted); padding: 3px 7px; }
.view-switch span { margin-left: 4px; }
.view-switch button.active { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.level-switch button { height: var(--target-min); color: var(--muted); border-radius: 0; border: 1px solid transparent; padding: 0 var(--panel-gap); font: var(--font-weight) var(--font-secondary) var(--font-ui); }
.level-switch small { font: inherit; }
.level-switch button.active { color: var(--text); border-bottom-color: var(--text); }
.level-switch [data-level] { border: var(--panel-border); }
.level-switch [data-level].active { border-color: var(--text); }
/* Out of the visit (Setup → Installation → Levels 3): Level 4 and 4.5 stay selectable, dimmed. */
.level-switch button.off-visit:not(.active) { color: var(--dim); }
/* A recorded timeline marks the stage being heard; the Inspector's edit selection stays in the document. */
.level-switch.following button { color: var(--muted); border-color: transparent; }
.level-switch.following [data-level] { border: var(--panel-border); }
.level-switch.following .playing-stage { color: var(--text); border-bottom-color: var(--text); }
.level-switch.following [data-level].playing-stage { border-color: var(--text); }
/* The stage already shows as selected; Space (play) leaves its button focus-visible, so no second ring around it. */
.level-switch button:focus-visible { outline: 0; }
.level-switch button:not(.active):focus-visible { color: var(--text); border-bottom-color: var(--muted); }
/* Framed levels alternate with labelled transitions; only the selected stage is active. */
.level-switch { flex-wrap: wrap; min-width: 0; gap: var(--panel-gap); }
.level-slot { display: flex; align-items: center; gap: var(--space-1); }
.timeline-tools { height: var(--target-min); font-size: var(--font-secondary); color: var(--muted); padding: 0 8px; }
/* Timeline: white lanes with soft bar lines; the track header keeps its voice colour as a 3 px bar and the meter. */
.arrangement { display: grid; grid-template-columns: 165px minmax(0,1fr); grid-template-rows: 28px 1fr; flex: 1; min-height: 0; overflow: auto; }
.ruler-label, .ruler-wrap { position: sticky; top: 0; z-index: 4; height: 28px; background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.ruler-label { display: flex; align-items: center; padding-left: 12px; font-size: var(--font-secondary); color: var(--muted); border-right: 1px solid var(--line-soft); }
.ruler-wrap { min-width: 0; }
.ruler-wrap canvas { display: block; width: 100%; height: 28px; cursor: crosshair; }
.track-headers, .track-lanes { position: relative; min-width: 0; }
.track-header { position: relative; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 8px 0 12px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--bg); cursor: pointer; }
.track-header:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--color); }
.track-header.selected { background: var(--field); }
.track-name { display: flex; flex-direction: column; flex: 1; gap: 1px; min-width: 0; font-size: var(--font-secondary); }
.track-name span, .track-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-name small { font-size: var(--font-meta); color: var(--muted); }
.track-controls { display: flex; gap: 3px; }
.track-controls button { padding: 2px 3px; font: var(--font-weight) var(--font-meta) var(--font-ui); color: var(--muted); border: 1px solid var(--line); }
.track-controls button.active { color: var(--bg); background: var(--text); border-color: var(--text); }
.track-meter { position: relative; width: 3px; height: 22px; background: var(--line-soft); }
.track-meter i { position: absolute; bottom: 0; width: 100%; background: var(--color); }
.track-lane { height: 34px; border-bottom: 1px solid var(--line-soft); position: relative; background: var(--bg); }
.track-lane canvas { width: 100%; height: 34px; display: block; cursor: grab; }
.track-lane.muted { opacity: .5; }
.playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text); pointer-events: none; z-index: 2; }
.sequencer-footer { display: flex; align-items: center; justify-content: space-between; height: 28px; flex-shrink: 0; padding: 0 10px; color: var(--muted); font-size: var(--font-meta); border-top: 1px solid var(--line-soft); }
.sequencer-footer button { padding: 4px 2px; font-size: var(--font-secondary); }
.session { display: grid; grid-template-columns: repeat(var(--tracks,4),minmax(120px,1fr)) 90px; align-content: start; gap: 6px; flex: 1; overflow: auto; padding: 12px; }
.session-column, .session-master { display: flex; flex-direction: column; gap: 5px; }
.session-title { padding: 6px; font-size: var(--font-secondary); border-top: 2px solid var(--color); }
.session-clip { display: flex; justify-content: space-between; align-items: center; height: 34px; background: color-mix(in srgb,var(--color) 30%,var(--bg)); color: var(--text); border: 1px solid var(--color); font-size: var(--font-secondary); }
.session-clip.active { background: var(--color); color: var(--text); }
.session-clip.disabled { opacity: .6; text-decoration: line-through; }
.session-master { padding-top: 33px; }
.scene-launch { height: 34px; border: 1px solid var(--line); font-size: var(--font-secondary); text-align: left; }

/* One inspector: Voice for the main relationship; Mappings and Levels for detail. */
.device-area { flex-shrink: 0; background: var(--bg); border-top: 1px solid var(--line-soft); }
.device-toolbar { height: 38px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--line-soft); background: var(--bg); }
.selected-voice { display: flex; align-items: center; gap: 6px; min-width: 0; }
.track-color { width: 6px; height: 6px; flex-shrink: 0; background: var(--voice, var(--dim)); }
#rename-track { overflow: hidden; text-overflow: ellipsis; padding: 4px 6px; font-size: var(--font-control); }
#voice-menu-button { justify-self: end; padding: 4px 8px; }
.device-chain { height: var(--inspector); display: grid; grid-template-columns: 265px minmax(0,1fr); gap: 0; overflow: auto; padding: 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* A device is a frameless fieldset: the legend names it, spacing separates it from its neighbours. The fieldset
   defaults (groove border, inline margin, min-inline-size) are reset; the grid or flex layout lives on .device-body. */
.device { min-width: 0; min-height: 0; margin: 0; border: 0; display: flex; flex-direction: column; overflow: auto; padding: 10px 12px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.device > legend { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; margin: 0 0 6px; padding: 0; color: var(--muted); font-size: var(--font-secondary); line-height: 14px; font-weight: var(--font-weight); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.device > legend small { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: var(--font-secondary); letter-spacing: 0; text-transform: none; }
.device > legend .chip { display: inline; font: inherit; }
.device-body { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.device input, .device select { font-size: var(--font-secondary); color: var(--text); border-color: var(--line); }
.device select { min-height: 28px; padding: 4px 6px; }
.device input[type=color] { width: 44px; height: 28px; padding: 2px; }
.device .pill { font-size: var(--font-secondary); padding: 1px 0; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.device-row label { font-size: var(--font-secondary); color: var(--muted); }
.device-row .readout { font: var(--font-weight) var(--font-meta) var(--font-numeric); white-space: nowrap; color: var(--text); }
.audio-gain input { border: 0; }
.audio-spectrum { height: 40px; width: 100%; display: block; flex-shrink: 0; background: var(--field); border: 0; }
.source-badge { display: flex; align-items: center; justify-content: space-between; font-size: var(--font-secondary); color: var(--muted); }
.inspector-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--muted); font-size: var(--font-secondary); line-height: 14px; }
.inspector-field input[type=number] { padding: 4px 6px; width: 100%; min-height: 28px; }
/* A pill row keeps its label on the same line: label, then the pills, wrapping only when the column is narrower than the row. */
.inspector-field:has(> .pill-row) { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.inspector-field:has(> .pill-row) > span:first-child { flex: none; }
/* Free shapes have short names, so with the colour swatch in the row the Sequence select takes the larger share. */
.drawing-selects { display: flex; gap: 6px; }
.drawing-selects > .inspector-field { flex: 1 1 0; }
.drawing-selects:has(input[type=color]) > .inspector-field:has(> [data-key$="order"]) { flex-grow: 1.3; }
.drawing-selects > .inspector-field:has(> input[type=color]) { flex: none; }
.drawing-selects input[type=color] { width: 24px; }
.drawing-controls > .inspector-field { margin-left: auto; }
.drawing-pills, .keyboard-controls, .rhythm-controls, .shape-motion-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 16px; }
.drawing-pills { gap: 4px 16px; }
.rhythm-controls > .inspector-field { flex: 1 1 110px; }
.drawing-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 16px; }
/* Compact knob: label on top, a 28 px dial with the value and unit on the line beside it. A thin grey ring, a black arc for the value. */
.knob-field { position: relative; display: grid; grid-template-columns: 28px minmax(40px,1fr) auto; grid-template-rows: auto auto; gap: 2px 4px; align-items: center; font-size: var(--font-secondary); line-height: 14px; color: var(--muted); min-width: 0; max-width: 128px; }
.knob-field>span:first-child { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knob { width: 28px; height: 28px; display: block; position: relative; border-radius: 50%; cursor: ns-resize; touch-action: none; border: 1.5px solid var(--line); background: conic-gradient(from 225deg,var(--text) 0deg,var(--text) var(--angle,135deg),transparent var(--angle,135deg)); }
.knob:before { content: ''; position: absolute; inset: 2px; background: var(--bg); border-radius: 50%; }
.knob:after { content: ''; position: absolute; left: 11.5px; top: 3.5px; width: 2px; height: 8px; background: var(--text); transform-origin: 1px 9px; transform: rotate(var(--rotation,-135deg)); }
.knob-field input { width: 100%; min-width: 40px; min-height: 0; padding: 3px 2px; font: var(--font-weight) var(--font-secondary) var(--font-numeric); text-align: center; color: var(--text); background: transparent; border-color: transparent; }
.knob-field input:focus { background: var(--field); border-color: var(--text); }
.knob-unit, .knob-readout { font-size: var(--font-secondary); color: var(--muted); white-space: nowrap; }
.knob-readout { font-family: var(--font-numeric); color: var(--text); }
/* Transform is one row: its caption, then the Rotation knob (none for facade shapes). */
.advanced-drawing { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 14px; }
.advanced-drawing h3 { margin: 0; padding: 0 0 2px; font-size: var(--font-secondary); line-height: 14px; font-weight: var(--font-weight); letter-spacing: 0; text-transform: none; color: var(--muted); }
.advanced-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; }
.inline-check { display: flex; align-items: center; gap: 7px; font-size: var(--font-secondary); color: var(--muted); }
.inline-check input { margin: 0; }
/* Modulation matrix: signal columns with a live meter under each header, parameter rows with the modulated value, a bar per cell.
   The table scrolls inside its wrap with both header rails pinned, so the empty-matrix hint and the hidden-mapping list stay put in a short inspector. */
.modulation-device .device-body { flex: 1; min-height: 0; gap: 6px; }
.matrix-wrap { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.matrix { border-collapse: collapse; font-size: var(--font-secondary); user-select: none; -webkit-user-select: none; }
.matrix td { position: relative; padding: 1px; }
.matrix th { height: 24px; font-weight: var(--font-weight); color: var(--text); text-align: left; white-space: nowrap; padding: 0; background: var(--bg); }
.matrix thead th { position: sticky; top: 0; z-index: 2; height: 30px; text-align: center; vertical-align: bottom; padding: 0 1px 2px; font: var(--font-weight) var(--font-meta) var(--font-numeric); line-height: 12px; }
.matrix thead th:first-child { left: 0; z-index: 3; }
.matrix thead th output { display: block; font: var(--font-weight) var(--font-meta) var(--font-numeric); line-height: 11px; color: var(--muted); }
.matrix thead th[data-col]::after { content: ''; display: block; height: 2px; margin-top: 2px; background: linear-gradient(90deg,var(--text) var(--signal,0%),var(--line-soft) var(--signal,0%)); }
.matrix tbody th { position: sticky; left: 0; z-index: 1; padding-right: 10px; line-height: 12px; }
.matrix tbody th .mod-value { display: block; font: var(--font-weight) var(--font-meta) var(--font-numeric); line-height: 10px; color: var(--muted); }
.matrix-hint { margin: 0; font-size: var(--font-secondary); color: var(--muted); }
.cell { position: relative; display: block; width: 40px; height: 22px; padding: 0; border: 1px solid transparent; border-radius: 0; background: var(--field); cursor: pointer; }
.cell:hover { outline: 1px solid var(--text); outline-offset: -1px; }
.cell.filled { cursor: ns-resize; touch-action: none; }
.cell:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.cell .bar { position: absolute; left: var(--from); right: calc(100% - var(--to)); top: 5px; bottom: 5px; min-width: 2px; background: var(--text); opacity: var(--alpha); pointer-events: none; }
.cell .bar.inverted { background: repeating-linear-gradient(90deg,var(--text) 0 3px,transparent 3px 5px); }
.cell[data-bypassed=true] .bar { background: transparent; border: 1px solid var(--text); }
.cell .stack, .cell .dot { position: absolute; top: 1px; right: 3px; font: var(--font-weight) var(--font-meta) var(--font-ui); color: var(--text); pointer-events: none; }
.cell .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text); top: 3px; }
.matrix td .more { position: absolute; left: 2px; bottom: 1px; padding: 0 3px; border-radius: 2px; font-size: var(--font-secondary); line-height: 12px; color: var(--text); background: var(--bg); opacity: 0; }
.matrix td:hover .more, .matrix td:focus-within .more { opacity: 1; }
body[data-mode="simple"] .matrix td:hover .more { opacity: .45; }
.matrix td .more:focus-visible { outline: 2px solid var(--text); outline-offset: 0; }
.hidden-mappings { display: grid; gap: 4px; font-size: var(--font-secondary); color: var(--muted); }
.hidden-mappings > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hidden-mappings button { padding: 3px 8px; border: 1px solid var(--line); font-size: var(--font-secondary); }
.cell-popover { width: 270px; padding: 10px 12px; }
.cell-popover:popover-open { display: grid; gap: 8px; }
.cell-popover > b { font-size: var(--font-secondary); font-weight: var(--font-weight); }
.cell-knobs { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.cell-knobs .knob-field { max-width: none; }
.cell-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cell-actions button, .cell-duplicates button { padding: 4px 8px; border: 1px solid var(--line); font-size: var(--font-secondary); }
.cell-duplicates { display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line-soft); font-size: var(--font-secondary); color: var(--muted); }
.cell-duplicates > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.device-empty { padding: 30px; color: var(--muted); grid-column: 1 / -1; }
/* Eight rows (a level, then its transition): the table scrolls inside its wrap like the matrix, never the panel. */
.level-device .device-body { flex: 1; min-height: 0; }
.level-table-wrap { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.level-table { width: 100%; border-collapse: collapse; font-size: var(--font-secondary); }
.level-table th { text-align: left; color: var(--muted); font-weight: var(--font-weight); padding: 3px 8px 8px; }
.level-table td { padding: 6px 8px; border-top: 1px solid var(--line-soft); }
.level-table tr.current-level { background: var(--field); }
.level-table tr.transition-row td:first-child { padding-left: 24px; color: var(--muted); }
.level-table input[type=number] { width: 70px; padding: 5px; font-size: var(--font-secondary); }
.level-table select { font-size: var(--font-secondary); min-height: 28px; padding: 5px; }
.level-progress { display: flex; align-items: center; gap: 14px; font-size: var(--font-secondary); margin-top: 5px; }
.level-progress input { max-width: 240px; }
.level-progress span { color: var(--muted); font-size: var(--font-secondary); }

/* Occasional actions live in menus. Full setup uses a single tabbed dialog. Both are light, bordered with --line, no shadow. */
.tool-popover { position: fixed; inset: auto; margin: 0; padding: 8px; width: 260px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); color: var(--text); }
.tool-popover:popover-open { display: flex; flex-direction: column; gap: 3px; }
.tool-popover>button { display: flex; justify-content: space-between; text-align: left; font-size: var(--font-control); padding: 10px; }
kbd { font: var(--font-weight) var(--font-secondary) var(--font-ui); color: var(--muted); }
.timeline-popover { width: 300px; }
.timeline-popover>label { display: flex; flex-direction: column; gap: 8px; font-size: var(--font-secondary); padding: 8px 10px 12px; border-bottom: 1px solid var(--line-soft); }
.timeline-popover>label span { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.timeline-popover input { width: 90px; padding: 7px; }
.timeline-popover button[aria-pressed=true] { background: var(--field); color: var(--text); }
.timeline-zoom { display: flex; align-items: center; gap: 5px; border-top: 1px solid var(--line-soft); padding: 9px 10px 3px; }
.timeline-zoom span { margin-right: auto; font-size: var(--font-secondary); }
.timeline-zoom button { border: 1px solid var(--line); }
#status-message { overflow-wrap: anywhere; }
#performance { font: var(--font-weight) var(--font-meta) var(--font-ui); white-space: nowrap; }
#toast { min-width: 0; color: var(--muted); font-size: var(--font-control); }
#toast.error { color: var(--live); }
dialog { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 0; width: 660px; max-width: 94vw; max-height: 90vh; }
/* The heading and tabs stay put; the body scrolls inside the dialog's 90vh. */
dialog[open] { display: flex; flex-direction: column; }
.modal-heading, .setup-tabs { flex-shrink: 0; }
dialog::backdrop { background: color-mix(in srgb,var(--text) 25%,transparent); }
.modal-heading { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.modal-heading h1 { margin: 0; font-size: var(--font-control); font-weight: var(--font-weight); }
.modal-heading button { font-size: 24px; padding: 0 4px; }
#modal-body { flex: 1 1 auto; min-height: 0; padding: 20px; overflow-y: auto; }
#modal-body p { font-size: var(--font-control); color: var(--muted); line-height: 1.7; margin: 0 0 15px; }
#modal-body p a { color: var(--text); text-decoration: underline; }
#modal-body p strong { color: var(--text); font-weight: var(--font-weight); }
.setup-tabs { display: flex; gap: 6px; padding: 10px 20px 0; border-bottom: 1px solid var(--line-soft); }
.setup-tabs button { padding: 9px 12px; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); }
.setup-tabs button[aria-current=page] { border-color: var(--text); color: var(--text); }
/* Setup is flat sections under eyebrow headings (the small print carries the device or scan summary); the two pure help
   texts stay folds. Status is text; only an error turns --live. */
.setup-section { padding: 14px 0 6px; border-top: 1px solid var(--line-soft); }
#modal-body > .setup-section:first-child { padding-top: 0; border-top: 0; }
.setup-section > h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: var(--font-secondary); line-height: 14px; font-weight: var(--font-weight); letter-spacing: 0; text-transform: none; color: var(--muted); }
.setup-section > h3 small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-secondary); letter-spacing: 0; text-transform: none; color: var(--muted); }
.setup-fold { padding: 6px 0; border-top: 1px solid var(--line-soft); }
.setup-fold > summary { cursor: pointer; padding: 4px 0; font-size: var(--font-secondary); color: var(--text); }
.setup-fold[open] > summary { margin-bottom: 6px; }
.follow-setting { padding: 12px 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 15px 0; }
.form-grid > .sync-check { align-self: end; justify-self: start; }
.form-field { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: var(--font-secondary); }
.form-field input, .form-field select { width: 100%; padding: 8px; font-size: var(--font-control); border-color: var(--line); }
.modal-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.primary { padding: 10px 15px; background: var(--text); color: var(--bg); }
.primary:hover { background: var(--muted); color: var(--bg); }
.secondary { padding: 10px 15px; border: 1px solid var(--line); }
.danger { padding: 10px 15px; border: 1px solid var(--text); }
.muted { color: var(--muted) !important; }
.modal-notice { padding: 12px; background: var(--field); color: var(--text); font: var(--font-weight) var(--font-secondary)/1.8 var(--font-ui); white-space: pre-wrap; overflow-wrap: anywhere; }
.progress-bar { height: 5px; background: var(--field); margin: 15px 0; overflow: hidden; }
.progress-bar span { display: block; width: 0; height: 100%; background: var(--text); transition: width .1s; }
.empty-library { font-size: var(--font-secondary); line-height: 1.6; color: var(--muted); padding: 12px 5px; }
.installation-display { text-align: center; padding: 25px 10px; }
.rehearse-timed { display: flex; gap: 6px; }
.rehearse-timed .secondary { padding: 5px 10px; font-size: var(--font-secondary); }
.level-colors { margin-bottom: 15px; }
.level-color-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.level-color { display: flex; align-items: center; gap: var(--space-1); color: var(--text); }
.level-color input[type=color] { width: 48px; padding: 3px; }
.level-start { display: flex; align-items: center; gap: var(--space-1); color: var(--text); }
.level-start input { width: 64px; padding: 5px; font-variant-numeric: tabular-nums; }
.level-start .secondary { padding: 5px 8px; font-size: var(--font-secondary); }
.installation-display .phase { font-size: var(--font-control); margin-bottom: 10px; }
.installation-display .charge { font: var(--font-weight) var(--font-control) var(--font-ui); color: var(--text); }
.help-keys { display: grid; grid-template-columns: 110px 1fr; gap: 10px; color: var(--text); font-size: var(--font-secondary); line-height: 1.7; }
.help-keys kbd { background: var(--field); padding: 3px 7px; width: max-content; }

/* Live mode: Ableton instruments stream in; bound voices, MIDI settings and the capture panel share the chip styling.
   A chip is plain text with tabular figures; only a live one (recording, notes held) is red. */
.live-toggle { font: var(--font-weight) var(--font-meta) var(--font-ui); letter-spacing: .6px; padding: 3px 7px; border-radius: 10px; color: var(--muted); }
.live-toggle.active { background: var(--live); color: var(--bg); }
.chip { display: inline-block; padding: 0; font: var(--font-weight) var(--font-secondary) var(--font-numeric); color: var(--muted); vertical-align: middle; font-weight: var(--font-weight); }
.chip.live-chip { color: var(--live); }
.live-binding { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; font-size: var(--font-secondary); color: var(--muted); border: 1px solid var(--line); border-radius: 3px; }
.live-binding.stale { border-style: dashed; }
.live-binding>span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* MIDI settings are flat rows at the foot of the Source column: Use MIDI with the channel beside its label, then the file
   and the trigger with labels above, then Low note, High note and CC as a line of readouts (Advanced only). The state is
   the legend's small print. */
.midi-settings { display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.midi-row { display: flex; align-items: end; gap: 6px 10px; min-width: 0; }
.midi-line { align-items: center; }
.midi-line > .inspector-field { flex-direction: row; align-items: center; gap: 6px; }
.midi-line > .inspector-field > span { flex: none; }
.midi-fields > .midi-file { flex: 1 1 80px; min-width: 0; }
.midi-fields > .inspector-field { flex: 1 1 126px; min-width: 0; }
.midi-range { flex-wrap: wrap; gap: 2px 6px; }
.midi-range label.readout { gap: 3px; }
.midi-range label.readout > span:first-child { min-width: 0; }
/* Keyboard voices: the MIDI settings head the column as a compact two-column block above a hairline. */
.midi-compact { border-top: 0; border-bottom: 1px solid var(--line-soft); padding: 0 0 6px; }
.midi-grid { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px 8px; align-items: center; }
.midi-grid > .inline-check { font-size: var(--font-secondary); white-space: nowrap; }
.midi-grid .inspector-field { flex-direction: row; align-items: center; gap: 6px; }
.midi-grid .inspector-field > span { flex: none; }
.midi-grid > .midi-file, .midi-grid > .live-midi-hint { grid-column: 1 / -1; }
.midi-grid > .midi-file > .inspector-field { min-width: 0; }
/* The source select (Import audio file… is its last entry) and the state text share one line; live voices wrap the text under the select. */
.source-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.source-row > select { flex: 1 1 110px; width: auto; min-width: 0; }
.source-row > .source-badge { flex: none; margin-left: auto; }
.keyboard-source .audio-spectrum { height: 32px; }
.ableton-setup .modal-notice.error { color: var(--live); }
.ableton-actions { justify-content: space-between; margin-top: 12px; }
.capture-actions { align-items: center; }
.capture-state { margin-right: auto; font-size: var(--font-secondary); color: var(--muted); }
.capture-state.error { color: var(--live); }
.capture-levels { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin: 10px 0 22px; }
.capture-levels:empty { display: none; }
.capture-levels .level { position: relative; flex: 1; max-width: 22px; height: 100%; background: var(--field); }
.capture-levels i { position: absolute; bottom: 0; left: 0; right: 0; height: 0; background: var(--text); transition: height .05s; }
.capture-levels small { position: absolute; bottom: -14px; left: 0; right: 0; text-align: center; font: var(--font-weight) var(--font-meta) var(--font-ui); color: var(--muted); }
.instrument-table-wrap { overflow: auto; }
.instrument-table { width: 100%; border-collapse: collapse; font-size: var(--font-secondary); }
.instrument-table th { text-align: left; color: var(--muted); font-weight: var(--font-weight); padding: 3px 6px 8px; }
.instrument-table td { padding: 6px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.instrument-table tr.stale td { opacity: .8; }
.instrument-table input, .instrument-table select { padding: 5px; font-size: var(--font-secondary); min-width: 60px; }
.instrument-table input[type=number] { width: 62px; }
.instrument-table strong { font-weight: var(--font-weight); color: var(--text); }
.instrument-table small { color: var(--muted); font-size: var(--font-meta); }
.instrument-table .warning { color: var(--muted); }
.instrument-table button { padding: 4px 6px; font-size: var(--font-secondary); border: 1px solid var(--line); white-space: normal; text-align: left; }
.osc-seen { display: flex; flex-direction: column; gap: 3px; max-height: 150px; overflow: auto; font: var(--font-weight) var(--font-secondary) var(--font-ui); color: var(--text); }
.osc-seen div { display: flex; gap: 10px; padding: 4px 8px; background: var(--field); }
.osc-seen span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.osc-seen p { margin: 0; font: var(--font-weight) var(--font-secondary) var(--font-ui); }
.scene-map { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 12px 0; }
.scene-map .form-field { font-size: var(--font-secondary); }
.scene-map select { padding: 6px; font-size: var(--font-secondary); }
.scene-actions { justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.scene-actions button { font-size: var(--font-secondary); padding: 7px 10px; }
.scene-status { margin-top: 10px; font: var(--font-weight) var(--font-secondary)/1.6 var(--font-ui); color: var(--muted); overflow-wrap: anywhere; }
.scene-status.error { color: var(--live); }

@media(min-height:1000px) { :root { --preview: 340px; --inspector: 286px; } }
@media(max-width:1250px) {
  .main-grid { grid-template-columns: 185px minmax(0,1fr); }
  .transport-left, .transport-right { min-width: 190px; }
  #clock-source, #time-position, .level-switch small { display: none; }
  .arrangement { grid-template-columns: 150px minmax(0,1fr); }
  .device-chain { grid-template-columns: 240px minmax(480px,1fr); }
  .drawing-controls { gap: 18px; }
  .drawing-selects { gap: 10px; }
  .drawing-selects select { font-size: var(--font-secondary); }
  .search>span:last-child { display: none; }
}
@media(max-height:900px) { :root { --preview: 250px; --inspector: 260px; } .sequencer { min-height: 145px; } }
@media(max-height:800px) { :root { --preview: 225px; } }
@media(max-width:850px) {
  .main-grid { grid-template-columns: 170px minmax(0,1fr); }
  .transport-left, .transport-right { min-width: 0; gap: 5px; }
  .transport-main { gap: 4px; }
  .project-actions #open-project, #save-state { display: none; }
  .level-switch>span, .view-switch span { display: none; }
  .level-switch button { padding: 0 5px; }
  .segmented button { padding: 4px; }
  .preview-footer { padding: 4px 8px; font-size: var(--font-meta); }
  .scan-readout meter { display: none; }
  .scan-readout { font-size: var(--font-meta); }
  .transport-divider, .tempo span { display: none; }
  .mode-toggle { height: 24px; font-size: var(--font-secondary); }
  #beat-position { min-width: 0; white-space: nowrap; font-size: var(--font-secondary); }
  .setup-button, .export-button { font-size: var(--font-secondary); }
  .export-button { gap: 4px; }
  .device-toolbar { padding: 0 8px; grid-template-columns: auto minmax(0,1fr) auto; }
}
@media(max-width:600px) {
  #simulate-press span { display: none; }
  #studio { min-height: 810px; grid-template-rows: 32px 46px 1fr 26px; }
  :root { --preview: 225px; --inspector: 270px; }
  .main-grid { grid-template-columns: 0 minmax(0,1fr); }
  .project-actions { gap: 1px; }
  .project-actions button, .wiki-link { font-size: var(--font-meta); padding: 3px 5px; }
  .transport-bar { padding: 0 6px; gap: 5px; }
  .transport-left .tempo, #beat-position, .transport-divider { display: none; }
  .live-toggle { width: 14px; height: 14px; padding: 0; font-size: 0; border-radius: 50%; }
  .transport-main { gap: 4px; }
  .segmented { gap: 0; }
  .segmented button { font-size: var(--font-meta); padding: 4px; }
  .canvas-corner { font-size: var(--font-meta); }
  .top-left { top: 10px; left: 9px; }
  .preview-footer { font-size: var(--font-meta); }
  .scan-readout { font-size: var(--font-meta); }
  .sequencer-toolbar { gap: 5px; padding: 0 7px; }
  .timeline-tools { font-size: var(--font-secondary); padding: 4px; }
  .view-switch button { padding: 5px; }
  .arrangement { grid-template-columns: 125px minmax(0,1fr); }
  .track-header { padding: 0 5px 0 8px; gap: 4px; }
  .track-name { font-size: var(--font-secondary); }
  .track-name small { font-size: var(--font-meta); }
  .track-controls { gap: 2px; }
  .track-controls button { font-size: var(--font-meta); padding: 2px; }
  .sequencer-footer>span:nth-child(2) { display: none; }
  .device-toolbar { grid-template-columns: auto minmax(0,1fr) auto; padding: 0 7px; }
  #rename-track { font-size: var(--font-secondary); padding: 4px 2px; }
  .device-chain { grid-template-columns: 220px 480px; }
  .device { padding: 10px; }
  .form-grid { gap: 12px; }
  .scene-map { grid-template-columns: 1fr 1fr; }
  .scene-actions { flex-wrap: wrap; }
  .setup-tabs { padding: 8px 12px 0; gap: 0; }
  .setup-tabs button { font-size: var(--font-secondary); padding: 8px 9px; }
  #modal-body { padding: 15px; }
}

/* Envelope device: the ADSR curve stretches across the card and its corners are the controls. The handles are buttons
   placed over the SVG by --x/--y (the SVG scales non-uniformly, so a circle inside it would distort); the stage values
   are a line of typed readouts beneath; Hold and Gate stay knobs. */
.envelope-device .device-body { display: grid; align-content: start; }
.envelope-device .device-body[inert] { opacity: .5; }
.envelope-graph { position: relative; }
.envelope-graph svg { width: 100%; height: 64px; display: block; background: var(--field); }
.envelope-graph path { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.env-handle { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--text); cursor: ew-resize; touch-action: none; }
.env-handle:hover { background: var(--bg); }
.env-handle[data-handle=sustain] { cursor: move; }
.env-handle:hover, .env-handle:focus-visible { z-index: 1; }
/* Four readouts need two lines in the 300 px column; two grid columns and a fixed label width keep the values in line. */
.envelope-readout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 10px; }
/* A readout reads as text: the label in grey, a tabular value sized to its digits, then the unit. */
label.readout { display: inline-flex; align-items: baseline; gap: 4px; font-size: var(--font-secondary); line-height: 16px; color: var(--muted); white-space: nowrap; }
label.readout > span:first-child { min-width: 46px; }
label.readout input { width: auto; min-width: 2ch; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; font: var(--font-weight) var(--font-secondary) var(--font-numeric); font-variant-numeric: tabular-nums; color: var(--text); text-align: right; appearance: textfield; field-sizing: content; }
label.readout input:focus { background: var(--field); outline: 2px solid var(--text); outline-offset: 1px; }
label.readout small { font-size: var(--font-secondary); color: var(--muted); }
@supports not (field-sizing: content) { label.readout input { width: 5.5ch; } }
.envelope-knobs { display: grid; grid-template-columns: repeat(auto-fill,minmax(72px,1fr)); gap: 8px 6px; align-items: end; }
/* Source timing is one line under Volume: the offset as a readout and the loop as its checkbox, dimmed in Simple. */
.source-timing { display: flex; align-items: center; gap: 14px; }

/* Effects device: one frameless card per effect, in chain order, with a live thumbnail strip of the effect on a plain line. */
.effects-device .device-body { display: grid; align-content: start; }
.effect-chain { display: grid; gap: 4px; }
.effect-chain:empty { display: none; }
.effect-card { display: grid; gap: 2px; min-width: 0; }
.effect-card + .effect-card { padding-top: 6px; border-top: 1px solid var(--line-soft); }
.effect-card.bypassed { opacity: .55; }
.effect-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 20px; }
.effect-title { font-size: var(--font-secondary); font-weight: var(--font-weight); color: var(--text); }
.effect-card.bypassed .effect-title { text-decoration: line-through; }
/* Ghost actions: move, bypass, remove as grey marks that darken under the pointer or focus. */
.effect-actions { display: flex; gap: 2px; }
.effect-actions button { height: 20px; padding: 0 3px; font-size: var(--font-secondary); color: var(--dim); background: none; border: 0; }
.effect-actions button:hover, .effect-actions button:focus-visible { color: var(--text); background: none; }
.effect-actions button:disabled { opacity: .35; }
/* The preview is a strip across the card, like the envelope graph, drawn from the animation tick; dragging it sets rate and depth. */
.effect-thumb { width: 100%; height: 36px; display: block; background: var(--field); cursor: move; touch-action: none; }
.effect-readout { display: flex; gap: 10px; }
/* The modulation line: label, a short select and the Amount as a readout, all on one 20 px line. */
.effect-mod { display: flex; align-items: center; gap: 6px; min-width: 0; }
.effect-mod > .inspector-field { flex: 1 1 0; flex-direction: row; align-items: center; gap: 4px; min-width: 0; }
.effect-mod > .inspector-field > span { flex: none; }
.effect-mod select { flex: 1 1 0; width: auto; min-width: 0; min-height: 20px; padding: 0 2px; font-size: var(--font-secondary); }
.effect-mod label.readout > span:first-child { min-width: 0; }
.effect-add { display: flex; }
#add-effect { padding: 2px 8px; font-size: var(--font-secondary); }
.effect-menu { width: 300px; padding: 6px; gap: 4px; }
.effect-menu > button { display: grid; gap: 2px; text-align: left; white-space: normal; padding: 8px 10px; }
.effect-menu small { color: var(--muted); font-size: var(--font-secondary); }

/* Every text role shares the same size and light weight. */
.inspector-field > span, .knob-field > span:first-child, .knob-unit, label.readout > span, label.readout small, .matrix tbody th, .level-table th { font-size: var(--font-label); font-weight: var(--font-weight); }