:root {
  color-scheme: dark;
  --bg: #0b0f14;
  --panel: #121922;
  --panel-2: #17212c;
  --line: #293542;
  --line-soft: #202b36;
  --text: #edf2f5;
  --muted: #8fa0ae;
  --accent: #e8b84c;
  --accent-strong: #ffd36d;
  --accent-ink: #261b04;
  --good: #62d29f;
  --bad: #ff7d75;
  --shadow: 0 18px 60px rgb(0 0 0 / 28%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 78% -20%, rgb(232 184 76 / 10%), transparent 34rem),
    linear-gradient(180deg, #0e141b 0, var(--bg) 42rem);
}

button, input, select { font: inherit; }
button { color: inherit; }

.topbar {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(18px, 4vw, 56px);
  border-bottom: 1px solid var(--line-soft);
  background: rgb(11 15 20 / 78%);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand-lockup, .connection-cluster, .panel-heading, .editor-heading,
.editor-actions, .page-strip, .page-tools, .copy-control {
  display: flex;
  align-items: center;
}

.brand-lockup { gap: 13px; }
.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #5b4925;
  border-radius: 14px;
  color: var(--accent-strong);
  background: linear-gradient(145deg, #242014, #111820 60%);
  box-shadow: inset 0 0 20px rgb(232 184 76 / 8%);
  position: relative;
  font-weight: 800;
  font-size: 21px;
}
.brand-mark i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 12px var(--good);
  position: absolute;
  right: 7px;
  bottom: 7px;
}

h1, h2, p { margin: 0; }
h1 { font-size: 18px; letter-spacing: .01em; }
h2 { font-size: 21px; letter-spacing: -.02em; }
.eyebrow {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.connection-cluster { gap: 15px; }
.connection-state {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #58636e;
  box-shadow: 0 0 0 4px rgb(88 99 110 / 12%);
}
.connection-state.connected { color: var(--good); }
.connection-state.connected .status-dot {
  background: var(--good);
  box-shadow: 0 0 0 4px rgb(98 210 159 / 12%), 0 0 12px rgb(98 210 159 / 40%);
}

.button, .icon-button, .text-button {
  border: 0;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.button {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 720;
  border: 1px solid transparent;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button.primary { color: var(--accent-ink); background: var(--accent); }
.button.primary:hover:not(:disabled) { background: var(--accent-strong); }
.button.secondary { background: #26313c; border-color: #364451; }
.button.secondary:hover:not(:disabled), .button.ghost:hover:not(:disabled) { border-color: #536475; background: #2c3945; }
.button.ghost { background: transparent; border-color: var(--line); color: #c5d0d8; }
.button.compact { min-height: 32px; padding: 0 11px; font-size: 12px; }
.button.full { width: 100%; }
.button.danger-text { background: transparent; color: #e89a94; border-color: #4d3132; }
.button.panic { color: #ffb3ad; background: #28191c; border-color: #6a383c; }
.button.panic:hover:not(:disabled) { color: #ffd2ce; background: #3a2024; border-color: #a55258; }
.button.page-focus { background: #242014; border-color: #594821; color: var(--accent-strong); }

.support-banner {
  max-width: 1560px;
  margin: 18px auto 0;
  padding: 12px 16px;
  border: 1px solid #644245;
  border-radius: 10px;
  color: #ffc0ba;
  background: #28191d;
  font-size: 13px;
}

.workspace {
  width: min(1560px, calc(100% - 36px));
  margin: 26px auto 18px;
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.panel {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: linear-gradient(180deg, rgb(20 28 37 / 97%), rgb(15 21 28 / 97%));
  box-shadow: var(--shadow);
}

.slots-panel { padding: 20px; position: sticky; top: 112px; }
.panel-heading, .editor-heading, .page-strip, .page-tools { justify-content: space-between; }
.icon-button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #202b36;
  border: 1px solid var(--line);
  font-size: 18px;
}
.panel-copy, .editor-heading p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.scene-morph-panel {
  margin: 0 14px 14px;
  overflow: hidden;
  border: 1px solid #493763;
  border-radius: 12px;
  background: linear-gradient(125deg, #17131f, #111a20 48%, #171420);
  box-shadow: inset 0 0 50px rgb(161 111 221 / 4%);
}
.morph-header {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-bottom: 1px solid #382d48;
}
.morph-header h3 { margin: 0; color: #d5b5f4; font-size: 16px; }
.morph-header p:not(.eyebrow) { margin-top: 3px; color: #82758e; font-size: 9px; }
.morph-side { min-width: 92px; text-align: center; }
.morph-side span { display: block; color: #d9b8f6; font: 23px "SFMono-Regular", Consolas, monospace; }
.morph-side small { color: #766883; font-size: 7px; text-transform: uppercase; }
.morph-side.side-b span { color: #72d4e8; }
.morph-endpoints {
  display: grid;
  grid-template-columns: minmax(200px, .8fr) minmax(260px, 1.4fr) minmax(200px, .8fr);
  gap: 10px;
  align-items: stretch;
  padding: 11px 14px;
}
.morph-endpoint {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  padding: 9px;
  border: 1px solid #3b3049;
  border-radius: 9px;
  background: #15121b;
}
.morph-endpoint.endpoint-b { border-color: #28444d; background: #101a1e; }
.morph-endpoint > div { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.morph-endpoint b {
  width: 23px; height: 23px; display: grid; place-items: center;
  border-radius: 6px; color: #1b1025; background: #c69bed; font-size: 11px;
}
.morph-endpoint.endpoint-b b { color: #0d1b20; background: #66c9dd; }
.morph-endpoint span { min-width: 0; overflow: hidden; color: #b7a3c8; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 720; }
.morph-endpoint select { grid-column: 1 / -1; width: 100%; height: 30px; padding: 0 8px; color: #bba9c8; background: #11131a; font-size: 9px; }
.morph-manual { align-self: center; padding: 4px 10px; }
.morph-readout { display: grid; grid-template-columns: 25px 1fr 25px; align-items: end; text-align: center; }
.morph-readout span { color: #8e749e; font-size: 10px; font-weight: 800; }
.morph-readout span:last-child { color: #5e9eaa; }
.morph-readout strong { color: #e5d0f5; font: 18px "SFMono-Regular", Consolas, monospace; }
.morph-manual input[type="range"] { width: 100%; margin: 8px 0 2px; accent-color: #af78db; }
.morph-manual p { color: #6f6479; text-align: center; font-size: 7px; }
.morph-route-inspector { border-top: 1px solid #30283c; }
.morph-route-controls {
  min-height: 43px; display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; background: #11151c;
}
.morph-route-controls > strong { margin-right: auto; color: #ac95bd; font-size: 9px; }
.morph-route-controls label { display: flex; align-items: center; gap: 5px; color: #746c7d; font-size: 8px; }
.morph-route-controls select { height: 27px; padding: 0 25px 0 7px; font-size: 8px; }
.morph-route-controls .morph-include { margin-left: 7px; color: #9d8bac; }
.morph-include input { width: 15px; height: 15px; accent-color: #ad78d8; }
.morph-route-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #30283c; }
.morph-route-compare > span { grid-column: 1 / -1; padding: 9px 14px; color: #706779; background: #10141a; font-size: 8px; }
.morph-route-value { min-width: 0; padding: 9px 12px; background: #11161d; }
.morph-route-value b { display: block; color: #85748f; font-size: 8px; text-transform: uppercase; }
.morph-route-value.effective b { color: #d4b6e9; }
.morph-route-value strong { display: block; margin-top: 2px; overflow: hidden; color: #b8a9c1; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.morph-route-value small { display: block; margin-top: 3px; color: #6f6975; font: 7px "SFMono-Regular", Consolas, monospace; }
.morph-lane-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-top: 1px solid #30283c; background: #30283c; }
.morph-lane-compare > span { grid-column: 1 / -1; padding: 9px 14px; color: #706779; background: #10141a; font-size: 8px; }
.morph-lane-section { min-width: 0; background: #0f141a; }
.morph-lane-section h4 { margin: 0; padding: 7px 11px 5px; color: #81738a; font-size: 8px; text-transform: uppercase; }
.morph-lane-section > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #292431; }
.morph-lane-value { min-width: 0; padding: 7px 9px; background: #11161d; }
.morph-lane-value b { display: block; color: #6f6577; font-size: 6.5px; text-transform: uppercase; }
.morph-lane-value.effective b { color: #d4b6e9; }
.morph-lane-value strong, .morph-lane-value small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.morph-lane-value strong { margin-top: 2px; color: #aaa0b0; font-size: 8px; text-transform: capitalize; }
.morph-lane-value small { margin-top: 2px; color: #66626b; font: 6.5px "SFMono-Regular", Consolas, monospace; }

.clock-panel {
  margin: 0 14px 14px;
  overflow: hidden;
  border: 1px solid #4a3d22;
  border-radius: 12px;
  background: linear-gradient(135deg, #171a1d, #17150f 58%, #11191e);
  box-shadow: inset 0 0 45px rgb(232 184 76 / 3%);
}
.clock-header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-bottom: 1px solid #3b3423;
}
.clock-header h3 { margin: 0; color: #f3d17d; font-size: 16px; }
.clock-header p:not(.eyebrow) { margin-top: 3px; color: #8d8879; font-size: 10px; }
.clock-header p.running { color: #69d6a2; }
.clock-header p.waiting { color: #e4af59; }
.clock-header p.fault { color: #ff8c7f; }
.clock-position { min-width: 105px; text-align: center; }
.clock-position strong { display: block; color: #ffd36d; font: 22px "SFMono-Regular", Consolas, monospace; }
.clock-position span { color: #756f61; font-size: 8px; }
.clock-actions { display: flex; align-items: center; gap: 6px; }
.clock-config {
  display: grid;
  grid-template-columns: repeat(5, minmax(105px, 1fr)) minmax(150px, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 11px 14px;
}
.clock-config label { min-width: 0; color: #837e70; font-size: 8px; }
.clock-config select, .clock-config input[type="number"] {
  width: 100%; height: 30px; margin-top: 4px; padding: 0 7px;
  font: 9px "SFMono-Regular", Consolas, monospace;
}
.clock-config .clock-check { min-height: 30px; display: flex; align-items: center; gap: 6px; padding-bottom: 4px; }
.clock-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.clock-health { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; border-top: 1px solid #2e2b21; border-bottom: 1px solid #2e2b21; background: #2e2b21; }
.clock-health span { min-width: 0; padding: 7px 10px; background: #11161a; }
.clock-health small { display: block; color: #68665d; font-size: 7px; text-transform: uppercase; }
.clock-health strong { display: block; overflow: hidden; color: #a7a18e; text-overflow: ellipsis; font: 9px "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.loop-matrix-heading { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px 7px; color: #a9a28d; font-size: 9px; }
.loop-matrix-heading span { color: #6f6b60; font-size: 8px; }
.loop-matrix { display: grid; grid-template-columns: repeat(4, minmax(145px, 1fr)); gap: 7px; padding: 0 14px 14px; }
.loop-card { min-width: 0; padding: 8px; border: 1px solid #30363a; border-radius: 8px; background: #10161a; }
.loop-card.playing, .loop-card.overdubbing { border-color: #32684f; }
.loop-card.recording { border-color: #98504b; }
.loop-card.armed { border-color: #8c6a2d; box-shadow: inset 0 0 20px rgb(232 184 76 / 5%); }
.loop-card-head, .loop-meta, .loop-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.loop-card-head strong { color: #d8c68f; font-size: 10px; }
.loop-card-head span { min-width: 0; overflow: hidden; color: #78766d; font-size: 7px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.loop-card > i { display: block; height: 3px; margin: 7px 0; overflow: hidden; border-radius: 3px; background: #272d30; }
.loop-card > i b { display: block; height: 100%; background: #5dc595; }
.loop-card.recording > i b { background: #ef766c; }
.loop-meta { align-items: stretch; flex-direction: column; gap: 2px; color: #686d6e; font: 7px "SFMono-Regular", Consolas, monospace; }
.loop-card > label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px; margin-top: 7px; color: #6c706f; font-size: 7px; }
.loop-card select, .loop-card input[type="number"] { width: 100%; min-width: 0; height: 24px; padding: 0 4px; font-size: 8px; }
.loop-playback { margin-top: 7px; border-top: 1px solid #293036; }
.loop-playback summary { padding: 6px 1px 0; color: #82928f; cursor: pointer; font-size: 7px; text-transform: uppercase; }
.loop-playback > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding-top: 7px; }
.loop-playback label { min-width: 0; color: #6c706f; font-size: 7px; }
.loop-playback label select, .loop-playback label input { display: block; margin-top: 3px; }
.loop-clock-help { grid-column: 1 / -1; color: #63716f; line-height: 1.45; }
.loop-processor { grid-column: 1 / -1; margin-top: 7px; border: 1px solid #334047; border-radius: 5px; background: #131b20; }
.loop-processor summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 7px; color: #8ba9a5; cursor: pointer; }
.loop-processor summary small { overflow: hidden; color: #687875; font-size: 7px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; text-transform: none; }
.loop-processor > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 0 7px 7px; }
.loop-processor > div > label { color: #6c706f; font-size: 7px; }
.loop-processor label > small { display: inline; color: #65706e; font-size: 6px; }
.loop-processor-check { display: flex; align-items: center; align-self: end; min-height: 24px; gap: 5px; }
.loop-processor-check input { width: auto !important; height: auto !important; margin: 0 !important; }
.loop-processor-help { grid-column: 1 / -1; color: #60706d; font-size: 6px; line-height: 1.4; }
.loop-trim-editor { margin-top: 7px; padding-top: 7px; border-top: 1px solid #293036; }
.loop-waveform-svg { display: block; width: 100%; height: 64px; overflow: hidden; border: 1px solid #29343a; border-radius: 5px; background: #0b1114; }
.waveform-grid { fill: none; stroke: #1d292e; stroke-width: .7; }
.waveform-empty { fill: none; stroke: #415057; stroke-dasharray: 4 4; stroke-width: 1; }
.waveform-band { fill: rgb(93 197 149 / 34%); stroke: #5dc595; stroke-width: .8; }
.waveform-excluded { fill: rgb(7 10 12 / 72%); }
.waveform-trim { stroke: #e8b84c; stroke-width: 1.5; }
.waveform-position { stroke: #f4f6f5; stroke-width: .8; }
.loop-trim-readout { display: flex; justify-content: space-between; gap: 5px; margin-top: 4px; color: #7e8788; font: 6.5px "SFMono-Regular", Consolas, monospace; }
.loop-trim-editor > label { display: grid; grid-template-columns: 29px 1fr; align-items: center; gap: 4px; margin-top: 4px; }
.loop-trim-editor input[type="range"] { width: 100%; min-width: 0; accent-color: #e8b84c; }
.loop-trim-actions { display: flex; gap: 5px; margin-top: 5px; }
.loop-trim-actions button { flex: 1; min-height: 22px; border: 1px solid #394247; border-radius: 5px; color: #a9b4b3; background: #182126; cursor: pointer; font-size: 7px; }
.loop-trim-actions button:disabled { opacity: .35; cursor: default; }
.loop-card-actions { margin-top: 6px; }
.loop-card-actions button { flex: 1; min-height: 24px; border: 1px solid #394247; border-radius: 5px; color: #a9b4b3; background: #182126; cursor: pointer; font-size: 7px; }
.loop-card-actions button:disabled { opacity: .35; cursor: default; }
.panel-copy { margin: 12px 0 16px; }

.system-health-panel {
  margin: 0 14px 14px;
  overflow: hidden;
  border: 1px solid #28504a;
  border-radius: 12px;
  background: linear-gradient(130deg, #111b1d, #111820 58%, #111a17);
  box-shadow: inset 0 0 45px rgb(78 205 166 / 3%);
}
.system-health-header {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-bottom: 1px solid #263c3b;
}
.system-health-header h3 { margin: 0; color: #8de0c2; font-size: 16px; }
.system-health-header p:not(.eyebrow) { margin-top: 3px; color: #748b87; font-size: 9px; }
.health-verdict {
  min-width: 150px;
  padding: 7px 10px;
  border: 1px solid #3a4546;
  border-radius: 8px;
  background: #141c20;
}
.health-verdict strong, .health-verdict span { display: block; }
.health-verdict strong { color: #9ba9aa; font-size: 10px; }
.health-verdict span { margin-top: 2px; color: #657477; font-size: 7px; }
.health-verdict.good { border-color: #326950; background: #11231c; }
.health-verdict.good strong { color: #75d8ac; }
.health-verdict.warn { border-color: #745f31; background: #241f13; }
.health-verdict.warn strong { color: #e7bd61; }
.health-verdict.bad { border-color: #784442; background: #281718; }
.health-verdict.bad strong { color: #f58b83; }
.health-actions { display: flex; gap: 7px; }
.health-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 1px;
  background: #263c3b;
}
.health-card { min-width: 0; padding: 10px 12px; background: #10171b; }
.health-card small { display: block; color: #627b77; font-size: 7px; text-transform: uppercase; }
.health-card strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #b3c9c4;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 11px "SFMono-Regular", Consolas, monospace;
}
.health-card span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #667875;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 7px "SFMono-Regular", Consolas, monospace;
}
.health-card.good strong { color: #76d7ae; }
.health-card.warn strong { color: #e3bb67; }
.health-card.bad strong { color: #ee8b84; }

.slot-list { display: grid; gap: 8px; margin-bottom: 18px; }
.slot-card {
  width: 100%;
  min-height: 96px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: inherit;
  text-align: left;
  background: #111820;
  cursor: pointer;
}
.slot-card:hover { border-color: #40505e; }
.slot-card.selected { border-color: #79612e; background: #201e16; }
.slot-card.active .slot-number { color: var(--accent-strong); border-color: #77612e; }
.slot-number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #35424e;
  border-radius: 8px;
  color: #b9c5ce;
  font-size: 12px;
  font-weight: 800;
}
.slot-name { display: block; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.slot-meta { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.slot-content { min-width: 0; display: grid; gap: 5px; }
.slot-layer {
  min-width: 0;
  display: grid;
  gap: 1px;
  padding-left: 7px;
  border-left: 2px solid #394652;
}
.slot-layer b { color: #aab8c2; font-size: 8px; letter-spacing: .08em; }
.slot-layer small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.slot-layer.stored { border-left-color: var(--good); }
.slot-layer.missing { opacity: .58; }
.slot-state { align-self: start; color: #6d7b87; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.slot-state.valid { color: var(--good); }
.slot-card.working { border-color: var(--accent); }

.field-label { display: block; color: #aebbc5; font-size: 11px; margin: 0 0 6px; }
.text-input, select, input[type="number"] {
  border: 1px solid #33414e;
  border-radius: 8px;
  color: var(--text);
  background: #0d141b;
  outline: none;
}
.text-input:focus, select:focus, input[type="number"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(232 184 76 / 9%); }
.text-input { width: 100%; height: 38px; padding: 0 11px; }
.slot-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.slot-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.note-key { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .08em; }

.editor-panel { min-width: 0; overflow: hidden; }
.editor-heading { padding: 20px 22px 18px; border-bottom: 1px solid var(--line-soft); gap: 18px; }
.editor-heading p { margin-top: 5px; }
.editor-actions { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.monitor-toolbar {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: #101820;
}
.monitor-toolbar label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.monitor-toolbar select { height: 32px; padding: 0 26px 0 8px; font-size: 10px; }
.monitor-actions { display: flex; gap: 7px; margin-left: auto; }
.page-strip { padding: 14px 18px; gap: 18px; background: #101820; border-bottom: 1px solid var(--line-soft); }
.page-tabs { display: flex; gap: 7px; }
.page-tab {
  min-width: 112px;
  height: 40px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid #2d3a46;
  background: #17212a;
  color: #9eacb7;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}
.page-tab span { color: #6f7f8c; margin-left: 5px; font-size: 10px; }
.page-tab.active { color: var(--accent-strong); border-color: #735c2c; background: #211f17; }
.page-tab.active span { color: #b79b5d; }
.page-tools { min-height: 50px; padding: 9px 18px; border-bottom: 1px solid var(--line-soft); gap: 12px; }
.copy-control { gap: 8px; color: var(--muted); font-size: 11px; }
.copy-control select { height: 32px; padding: 0 28px 0 9px; }

.route-legend {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  background: #0d141b;
  font-size: 10px;
}
.route-legend strong { color: var(--accent); }
.lane-list { display: grid; gap: 12px; padding: 14px; }
.lane-card {
  overflow: hidden;
  border: 1px solid #273541;
  border-radius: 12px;
  background: #101820;
}
.lane-heading {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(90deg, #17212b, #121a22);
  cursor: pointer;
  list-style: none;
}
.lane-heading::-webkit-details-marker { display: none; }
.lane-card:not([open]) .lane-heading { border-bottom: 0; }
.lane-card:not([open]) .lane-route-count { color: #82919d; }
.lane-route-count { color: var(--good); font-size: 10px; font-weight: 750; }
.lane-route-count.note-layer-warning { color: #d58a34; }
.reset-lane, .reset-route {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #3c3336;
  border-radius: 7px;
  color: #c98b87;
  background: #21191c;
  cursor: pointer;
  font-size: 10px;
  font-weight: 720;
}
.reset-lane:hover, .reset-route:hover { border-color: #765052; color: #ffaaa3; }
.calibration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 9px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: #0e161d;
}
.motion-panel {
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(90deg, #141d22, #171b17);
}
.motion-heading {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px 6px;
}
.motion-heading strong { display: block; color: var(--good); font-size: 12px; }
.motion-heading-side { display: flex; align-items: center; gap: 10px; }
.motion-heading-side > span { color: #82978e; font-size: 9px; }
.motion-learn-actions { display: flex; gap: 5px; }
.motion-learn-actions button {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #365047;
  border-radius: 6px;
  color: #9bcdb8;
  background: #14241e;
  cursor: pointer;
  font-size: 8px;
  font-weight: 750;
}
.motion-learn-actions button:disabled { opacity: .35; cursor: not-allowed; }
.motion-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: 9px;
  padding: 0 12px 11px;
}
.event-extractor {
  margin: 0 12px 11px;
  border: 1px solid #353342;
  border-radius: 9px;
  background: #12151d;
}
.event-extractor.enabled {
  border-color: #51436a;
  background: linear-gradient(90deg, #171522, #141a20);
}
.event-heading {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 9px;
  border-bottom: 1px solid #292c38;
}
.event-heading strong { display: block; color: #bda4ed; font-size: 11px; }
.event-toggle { display: inline-flex; align-items: center; gap: 6px; color: #a69ab8; font-size: 9px; }
.event-toggle input { width: 17px; height: 17px; accent-color: #9c74dd; }
.event-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(90px, 1fr));
  gap: 8px;
  padding: 9px;
}
.event-extractor > p {
  margin: 0;
  padding: 0 9px 9px;
  color: #796f88;
  font-size: 8px;
}
.event-extractor > p strong { color: #b39bd8; }
.event-destinations {
  margin: 0 12px 11px;
  overflow: hidden;
  border: 1px solid #3a3428;
  border-radius: 9px;
  background: #151712;
}
.event-destinations-heading {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-bottom: 1px solid #383326;
  background: linear-gradient(90deg, #1f1c13, #171a15);
}
.event-destinations-heading strong { display: block; color: var(--accent-strong); font-size: 11px; }
.event-destinations-heading > span { color: #9a8f72; font-size: 8px; }
.event-routes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 9px;
  padding: 9px;
}
.event-route-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #4a412d;
  border-radius: 8px;
  background: #1a1b15;
}
.event-route-card.route-off { border-color: #2d3029; background: #141712; }
.event-route-heading {
  min-height: 45px;
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  border-bottom: 1px solid #363328;
}
.event-route-heading strong { display: block; color: var(--accent-strong); font-size: 10px; text-transform: capitalize; }
.event-route-card.route-off .event-route-heading strong { color: #72766c; }
.event-route-live { min-width: 92px; text-align: right; }
.event-route-live span { display: block; color: #8e927f; font-size: 8px; font-weight: 800; }
.event-route-live small { display: block; margin-top: 2px; color: #64695e; font-size: 7px; }
.event-route-live.active span { color: var(--good); }
.event-route-live.pending span { color: var(--bad); }
.event-route-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 7px;
  padding: 9px;
}
.event-mask-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 0 9px 9px;
}
.event-mask-section > div { min-width: 0; }
.event-mask-section > div > strong { display: block; margin-bottom: 5px; color: #9d9276; font-size: 8px; }
.event-mask-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.event-mask-grid label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #888579;
  font-size: 7px;
  white-space: nowrap;
}
.event-mask-grid input { width: 13px; height: 13px; margin: 0; accent-color: var(--accent); }
.event-mask-grid.disabled { opacity: .35; }
.event-route-note { margin: 0; padding: 0 9px 9px; color: #726e61; font-size: 7px; line-height: 1.45; }
.pitch-panel {
  margin: 0 12px 11px;
  overflow: hidden;
  border: 1px solid #29404a;
  border-radius: 9px;
  background: #10191d;
}
.pitch-panel.enabled {
  border-color: #287084;
  background: linear-gradient(110deg, #101d22, #121a20);
  box-shadow: inset 0 0 30px rgb(64 190 219 / 3%);
}
.pitch-heading {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(300px, 1.3fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid #253942;
  background: linear-gradient(90deg, #14262c, #131b20);
}
.pitch-heading > div:first-child strong { display: block; color: #73d6e9; font-size: 11px; }
.pitch-heading > div:first-child small { color: #648691; font-size: 8px; }
.pitch-toggle { display: inline-flex; align-items: center; gap: 6px; color: #8db8c2; font-size: 9px; }
.pitch-toggle input { width: 17px; height: 17px; accent-color: #41bfd6; }
.pitch-live {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 1px 8px;
  padding: 6px 9px;
  border: 1px solid #293b42;
  border-radius: 8px;
  background: #0e171b;
}
.pitch-live strong { grid-row: span 2; align-self: center; color: #71868d; font-size: 17px; }
.pitch-live span, .pitch-live em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.pitch-live span { color: #79949c; }
.pitch-live em { color: #516970; font-style: normal; }
.pitch-live.active { border-color: #28788a; background: #10252a; }
.pitch-live.active strong { color: #73e0ef; }
.pitch-live.warning { border-color: #805d33; }
.pitch-live.warning em { color: #e2ad68; }
.pitch-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(92px, 1fr));
  gap: 8px;
  padding: 9px;
}
.pitch-play-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(125px, 1fr));
  gap: 8px;
  padding: 10px;
}
.pitch-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid #735e37;
  color: #d9b36c;
  background: #2c2518;
}
.pitch-warning > div { min-width: 0; }
.pitch-warning strong, .pitch-warning span { display: block; }
.pitch-warning strong { font-size: 9px; }
.pitch-warning span { margin-top: 2px; color: #b69b68; font-size: 8px; }
.pitch-warning.danger { border-color: #7a3f3d; color: #e2a39e; background: #2d1c1d; }
.pitch-warning button {
  flex: 0 0 auto;
  min-height: 27px;
  padding: 0 9px;
  border: 1px solid currentColor;
  border-radius: 5px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font-size: 8px;
  font-weight: 750;
}
.pitch-expression-summary {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr);
  gap: 12px;
  align-items: center;
  margin: 0 9px 9px;
  padding: 8px 10px;
  border: 1px solid #29424a;
  border-radius: 7px;
  color: #7da5ae;
  background: #101c20;
}
.pitch-expression-summary strong, .pitch-expression-summary span { display: block; }
.pitch-expression-summary strong { font-size: 9px; }
.pitch-expression-summary span { margin-top: 3px; font-size: 8px; }
.pitch-expression-summary p { margin: 0; color: #66838a; font-size: 8px; line-height: 1.45; }
.pitch-advanced { border-top: 1px solid #29404a; }
.pitch-advanced > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  color: #83bdc8;
  cursor: pointer;
  list-style-position: inside;
  font-size: 9px;
  font-weight: 750;
}
.pitch-advanced > summary small { color: #5e7a81; font-size: 8px; font-weight: 500; }
.pitch-advanced[open] > summary { border-bottom: 1px solid #29404a; }
.pitch-scale {
  display: grid;
  grid-template-columns: minmax(120px, 1.5fr) repeat(12, minmax(34px, 1fr));
  align-items: center;
  gap: 4px;
  padding: 0 9px 9px;
}
.pitch-scale > span { color: #6f929a; font-size: 8px; }
.pitch-scale label { display: grid; place-items: center; gap: 2px; color: #6d8990; font-size: 8px; }
.pitch-scale input { width: 14px; height: 14px; margin: 0; accent-color: #42bfd6; }
.pitch-scale.disabled { opacity: .42; }
.pitch-detail-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
  gap: 9px;
  padding: 0 9px 9px;
}
.pitch-calibration, .pitch-tuning {
  min-width: 0;
  padding: 8px;
  border: 1px solid #263a42;
  border-radius: 8px;
  background: #0d171b;
}
.pitch-tuning:not(.active) { opacity: .55; }
.pitch-subheading { display: flex; align-items: center; gap: 8px; min-height: 24px; margin-bottom: 6px; }
.pitch-subheading strong { color: #83bdc8; font-size: 9px; }
.pitch-subheading span { color: #5e7a81; font-size: 8px; }
.pitch-subheading button, .pitch-point button {
  min-height: 23px;
  padding: 0 7px;
  border: 1px solid #2e5661;
  border-radius: 6px;
  color: #85c5d1;
  background: #10242a;
  cursor: pointer;
  font-size: 8px;
}
.pitch-subheading button { margin-left: auto; }
.pitch-subheading button:disabled, .pitch-point button:disabled { opacity: .3; cursor: default; }
.pitch-point-list { display: grid; gap: 4px; }
.pitch-point {
  display: grid;
  grid-template-columns: 20px 1fr 1fr 25px;
  gap: 5px;
  align-items: center;
}
.pitch-point > span { color: #54747c; font: 8px "SFMono-Regular", Consolas, monospace; }
.pitch-point input { width: 100%; height: 27px; padding: 0 6px; font-size: 9px; }
.pitch-tuning-grid { display: grid; grid-template-columns: repeat(6, minmax(45px, 1fr)); gap: 5px; }
.pitch-tuning-grid label { min-width: 0; }
.pitch-tuning-grid label span { display: block; color: #5f7f87; font-size: 8px; }
.pitch-tuning-grid input { width: 100%; height: 27px; padding: 0 5px; font-size: 9px; }
.motion-telemetry { padding: 0 12px 12px; }
.telemetry-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 7px;
  color: #93b2a5;
  font-size: 9px;
  font-weight: 750;
}
.telemetry-heading small { color: var(--muted); font-size: 8px; font-weight: 500; }
.motion-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 7px;
}
.motion-meter span {
  display: flex;
  justify-content: space-between;
  color: #788c84;
  font-size: 8px;
}
.motion-meter b { color: #a8c7ba; font: 8px "SFMono-Regular", Consolas, monospace; }
.motion-meter i {
  display: block;
  height: 4px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: #202c29;
}
.motion-meter em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--good);
  transition: width .1s linear;
}
.event-live {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr);
  gap: 10px;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #312d3d;
  border-radius: 8px;
  background: #10131a;
}
.event-status { display: flex; align-content: flex-start; flex-wrap: wrap; gap: 6px; }
.event-chip, .event-peak {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #353440;
  border-radius: 12px;
  color: #777784;
  background: #171821;
  font-size: 8px;
  font-weight: 750;
}
.event-chip.active { border-color: #7657a5; color: #d0b7f3; background: #241b32; }
.event-peak { gap: 5px; }
.event-peak b { color: #bda4ed; font: 8px "SFMono-Regular", Consolas, monospace; }
.event-history > span { display: block; margin-bottom: 4px; color: #887b98; font-size: 8px; font-weight: 750; }
.event-history ol { max-height: 72px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.event-history li {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 7px;
  padding: 2px 0;
  color: #8e83a0;
  font-size: 8px;
}
.event-history time, .event-history em { color: #665e70; font: 8px "SFMono-Regular", Consolas, monospace; }
.event-history strong { color: #c4adde; font-weight: 700; }
.event-history .event-empty { display: block; color: #625c69; }
.motion-trace {
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #253831;
  border-radius: 8px;
  background: #0c1513;
}
.motion-trace svg { display: block; width: 100%; height: 150px; overflow: hidden; }
.motion-trace .trace-grid { fill: none; stroke: #20312c; stroke-width: .35; }
.motion-trace .event-window { fill: rgb(149 103 205 / 2.5%); }
.motion-trace .event-window.active { fill: rgb(149 103 205 / 12%); }
.motion-trace .event-threshold {
  stroke: rgb(207 174 246 / 18%);
  stroke-width: .7;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
}
.motion-trace .event-threshold.active { stroke: rgb(207 174 246 / 75%); }
.motion-trace polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}
.trace-raw { color: #f0c66b; }
.trace-effective { color: #ee8a75; }
.trace-position { color: #6bd6a4; }
.trace-velocity { color: #6eb7ee; }
.trace-activity { color: #c28aee; }
.trace-routeTransformed { color: #e96cb4; }
.trace-routeOutputNormalized { color: #f2f4f5; }
.trace-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 13px;
  margin-top: 7px;
  font-size: 8px;
}
.trace-legend span { display: inline-flex; align-items: center; gap: 4px; }
.trace-legend i { width: 10px; height: 2px; background: currentColor; }
.routes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(310px, 1fr));
  gap: 10px;
  padding: 11px;
}
.route-card {
  min-width: 0;
  border: 1px solid #2b3a46;
  border-radius: 10px;
  background: #141e27;
}
.route-card.route-off { background: #111820; border-color: #202c36; }
.route-heading {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px 7px 11px;
  border-bottom: 1px solid #263440;
}
.route-heading > div { min-width: 0; }
.route-heading-actions { display: flex; align-items: center; gap: 6px; }
.listen-route {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #3d7b61;
  border-radius: 7px;
  color: #1f674c;
  background: #dcece4;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}
.listen-route:hover:not(:disabled), .listen-route.active {
  color: #fff;
  border-color: #4d3970;
  background: #4d3970;
}
.listen-route:disabled { opacity: .45; cursor: not-allowed; }
.route-heading strong {
  display: block;
  overflow: hidden;
  color: var(--accent-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.route-off .route-heading strong { color: #6f7e89; }
.route-number {
  display: block;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.route-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 8px;
  padding: 10px;
}
.route-field { min-width: 0; color: #8495a2; font-size: 9px; }
.route-field > span { display: block; min-height: 13px; margin: 0 0 4px; }
.route-field select, .route-field input[type="number"] {
  width: 100%;
  height: 31px;
  padding: 0 7px;
  font: 10px "SFMono-Regular", Consolas, monospace;
}
.route-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 6px 0 0 2px;
  accent-color: var(--accent);
}
.route-field input:disabled, .route-field select:disabled { opacity: .35; }
.curve-preview {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 8px;
  padding: 0 10px 9px;
  color: #758691;
  font-size: 8px;
}
.curve-preview svg { width: 100%; height: 28px; overflow: visible; }
.curve-preview .curve-grid { fill: none; stroke: #293741; stroke-width: .5; }
.curve-preview polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }

.mapping-table-wrap { overflow: auto; }
.mapping-table { width: 100%; min-width: 1120px; border-collapse: collapse; }
.mapping-table th {
  height: 38px;
  padding: 0 7px;
  color: #71818e;
  background: #0e151c;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mapping-table td { height: 52px; padding: 6px 7px; border-bottom: 1px solid #1c2731; }
.mapping-table tr:last-child td { border-bottom: 0; }
.mapping-table tr:hover td { background: rgb(255 255 255 / 1.3%); }
.mapping-table select { width: 88px; height: 34px; padding: 0 7px; text-transform: uppercase; font-size: 11px; font-weight: 750; }
.mapping-table input[type="number"] { width: 92px; height: 34px; padding: 0 7px; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; }
.mapping-table input:disabled, .mapping-table select:disabled { opacity: .34; }
.input-identity { min-width: 100px; }
.input-identity strong { display: block; font-size: 12px; }
.input-identity span { display: block; color: var(--muted); font-size: 9px; margin-top: 2px; }
.reset-row {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #71808b;
  background: transparent;
  cursor: pointer;
}
.reset-row:hover { color: var(--bad); border-color: #503335; background: #261b1d; }

.terminal {
  width: min(1560px, calc(100% - 36px));
  margin: 0 auto 32px;
  overflow: hidden;
}
.terminal summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: #aab7c0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  list-style: none;
}
.terminal summary::-webkit-details-marker { display: none; }
.text-button { color: var(--muted); background: transparent; font-size: 11px; }
.terminal pre {
  max-height: 250px;
  overflow: auto;
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--line-soft);
  color: #91d8b9;
  background: #090e13;
  font: 11px/1.55 "SFMono-Regular", Consolas, monospace;
  white-space: pre-wrap;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  max-width: min(420px, calc(100% - 44px));
  padding: 12px 15px;
  border: 1px solid #3c4d59;
  border-radius: 10px;
  color: var(--text);
  background: #1b2630;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  font-size: 12px;
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { border-color: #7a4545; background: #321f22; }
.sr-only { position: absolute; width: 1px; height: 1px; clip: rect(0, 0, 0, 0); overflow: hidden; }

@media (max-width: 980px) {
  .workspace { grid-template-columns: 1fr; }
  .slots-panel { position: static; }
  .slot-list { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; padding-bottom: 5px; }
  .slot-actions { grid-template-columns: 1fr 1fr; }
  .routes-grid { grid-template-columns: 1fr; }
  .event-routes-grid { grid-template-columns: 1fr; }
  .pitch-play-grid { grid-template-columns: repeat(2, minmax(125px, 1fr)); }
  .pitch-grid { grid-template-columns: repeat(4, minmax(110px, 1fr)); }
  .pitch-scale { grid-template-columns: repeat(6, minmax(42px, 1fr)); }
  .pitch-scale > span { grid-column: 1 / -1; }
  .pitch-detail-grid { grid-template-columns: 1fr; }
  .clock-config { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
  .health-summary { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .loop-matrix { grid-template-columns: repeat(2, minmax(145px, 1fr)); }
  .morph-endpoints { grid-template-columns: 1fr 1.2fr 1fr; }
}

@media (max-width: 700px) {
  .topbar { align-items: flex-start; padding: 14px 16px; }
  .connection-cluster { align-items: flex-end; flex-direction: column-reverse; gap: 7px; }
  .connection-state { font-size: 11px; }
  .workspace, .terminal { width: calc(100% - 20px); }
  .editor-heading, .page-strip, .page-tools { align-items: stretch; flex-direction: column; }
  .editor-actions { justify-content: stretch; }
  .editor-actions .button { flex: 1; }
  .page-tabs { overflow-x: auto; }
  .page-tab { min-width: 100px; }
  .page-focus { width: 100%; }
  .copy-control { flex-wrap: wrap; }
  .monitor-toolbar { align-items: stretch; flex-direction: column; }
  .monitor-toolbar label { justify-content: space-between; }
  .morph-endpoints { grid-template-columns: 1fr; }
  .morph-manual { grid-row: 1; }
  .morph-route-controls { align-items: stretch; flex-wrap: wrap; }
  .morph-route-controls > strong { width: 100%; }
  .morph-route-compare { grid-template-columns: 1fr; }
  .morph-lane-compare { grid-template-columns: 1fr; }
  .monitor-actions { display: grid; grid-template-columns: repeat(3, 1fr); margin-left: 0; }
  .route-legend { align-items: flex-start; flex-direction: column; }
  .lane-heading { grid-template-columns: 1fr auto; }
  .lane-route-count { grid-column: 1 / -1; }
  .calibration-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .motion-heading, .motion-heading-side { align-items: flex-start; flex-direction: column; gap: 5px; }
  .motion-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .event-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .event-route-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .event-mask-section { grid-template-columns: 1fr; }
  .event-live { grid-template-columns: 1fr; }
  .motion-meters { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .route-grid { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .pitch-heading { grid-template-columns: 1fr; align-items: stretch; }
  .pitch-play-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .pitch-warning { align-items: stretch; flex-direction: column; }
  .pitch-expression-summary { grid-template-columns: 1fr; }
  .pitch-advanced > summary { align-items: flex-start; flex-direction: column; }
  .pitch-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .pitch-scale { grid-template-columns: repeat(4, minmax(44px, 1fr)); }
  .pitch-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .pitch-tuning-grid { grid-template-columns: repeat(3, minmax(50px, 1fr)); }
  .clock-header { grid-template-columns: 1fr; align-items: stretch; }
  .clock-position { text-align: left; }
  .clock-actions { flex-wrap: wrap; }
  .clock-config { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
  .clock-health { grid-template-columns: repeat(2, 1fr); }
  .system-health-header { grid-template-columns: 1fr; align-items: stretch; }
  .health-actions { flex-wrap: wrap; }
  .loop-matrix-heading { align-items: flex-start; flex-direction: column; }
  .loop-matrix { grid-template-columns: 1fr; }
}

/* Retro Macintosh clarity pass ------------------------------------------- */

:root {
  color-scheme: light;
  --bg: #a4a399;
  --panel: #e8e6dc;
  --panel-2: #f4f2e9;
  --line: #77766f;
  --line-soft: #b7b4aa;
  --text: #171717;
  --muted: #5d5b55;
  --accent: #4969a7;
  --accent-strong: #294c91;
  --accent-ink: #ffffff;
  --good: #177453;
  --bad: #a43a35;
  --shadow: 5px 5px 0 rgb(38 37 34 / 28%);
  font-family: Geneva, "Charcoal", "Lucida Grande", -apple-system, BlinkMacSystemFont, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  color: var(--text);
  background-color: #a7a69d;
  background-image:
    linear-gradient(45deg, rgb(255 255 255 / 10%) 25%, transparent 25%),
    linear-gradient(-45deg, rgb(255 255 255 / 10%) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgb(0 0 0 / 4%) 75%),
    linear-gradient(-45deg, transparent 75%, rgb(0 0 0 / 4%) 75%);
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-size: 8px 8px;
}

a { color: #234b91; }

.menu-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 clamp(12px, 3vw, 36px);
  border-bottom: 1px solid #494944;
  color: #111;
  background: #f2f0e8;
  box-shadow: inset 0 -1px #fff;
  font-size: 12px;
}
.menu-bar strong { margin-right: 4px; font-size: 13px; }
.menu-bar a { color: #111; text-decoration: none; }
.menu-bar a:hover { text-decoration: underline; }
.menu-bar > span { margin-left: auto; color: #66635c; font-size: 10px; }

.topbar {
  top: 28px;
  min-height: 70px;
  padding: 10px clamp(14px, 3vw, 36px);
  border-bottom: 2px solid #686760;
  background: rgb(224 222 212 / 96%);
  backdrop-filter: none;
  box-shadow: inset 0 1px #fff, 0 2px 0 rgb(0 0 0 / 12%);
}
.brand-mark {
  width: 44px;
  height: 44px;
  border: 2px solid #20201e;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #6f58a6 0 50%, #3b87a0 50%);
  box-shadow: inset 2px 2px rgb(255 255 255 / 40%), inset -2px -2px rgb(0 0 0 / 28%);
}
.brand-mark i {
  width: 7px;
  height: 7px;
  right: 5px;
  bottom: 5px;
  border: 1px solid #10281d;
  background: #45c685;
  box-shadow: none;
}
h1 { font-size: 19px; }
h2 { font-size: 19px; }
.eyebrow { color: #5d3f92; font-size: 9px; letter-spacing: .12em; }

.connection-state { color: #55534e; }
.status-dot { border: 1px solid #77746d; background: #aaa79f; box-shadow: inset 1px 1px #ddd; }
.connection-state.connected { color: #176245; }
.connection-state.connected .status-dot { border-color: #205d48; background: #42b47d; box-shadow: inset 1px 1px rgb(255 255 255 / 45%); }

.button, .icon-button, .text-button, .loop-card-actions button,
.loop-trim-actions button, .motion-learn-actions button,
.pitch-subheading button, .pitch-point button, .reset-lane, .reset-route {
  border: 1px solid #4d4c47;
  border-radius: 4px;
  color: #171717;
  background: #dfddd4;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #8f8c84;
  transition: background .12s ease, color .12s ease;
}
.button { min-height: 34px; font-weight: 700; }
.button:hover:not(:disabled), .icon-button:hover:not(:disabled),
.loop-card-actions button:hover:not(:disabled) { transform: none; background: #f4f2ea; }
.button:active:not(:disabled), .icon-button:active:not(:disabled) {
  box-shadow: inset 1px 1px #77756e, inset -1px -1px #fff;
}
.button.primary { color: #fff; border-color: #19376f; background: #4c6dac; box-shadow: inset 1px 1px #8ca3d0, inset -1px -1px #263f75; }
.button.primary:hover:not(:disabled) { background: #5b79b6; }
.button.secondary { color: #1d3157; border-color: #66769a; background: #dfe6f3; }
.button.secondary:hover:not(:disabled), .button.ghost:hover:not(:disabled) { border-color: #4d4c47; background: #f4f2ea; }
.button.ghost { color: #292824; border-color: #77756e; background: #e8e6dd; }
.button.panic, .button.danger-text { color: #8e2c2b; border-color: #a86b65; background: #f1dcd7; }
.button.page-focus { color: #654411; border-color: #a98549; background: #f7e8bf; }
.guide-button { display: inline-flex; align-items: center; text-decoration: none; }
.icon-button { background: #e4e2d9; }

.support-banner {
  border: 1px solid #8d5b2f;
  border-radius: 5px;
  color: #5c3516;
  background: #fae4b3;
  box-shadow: 3px 3px 0 rgb(0 0 0 / 15%);
}

.welcome-panel {
  width: min(1440px, calc(100% - 28px));
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 14px auto 0;
  padding: 10px 14px;
  border: 2px solid #4a4944;
  border-radius: 7px;
  background: #f3f1e8;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #aaa79e, var(--shadow);
}
.welcome-copy { min-width: 0; display: flex; align-items: center; gap: 11px; }
.welcome-copy > div { min-width: 0; }
.welcome-copy strong, .welcome-copy span { display: block; }
.welcome-copy strong { font-size: 13px; }
.welcome-copy span { margin-top: 3px; color: #5f5c55; font-size: 10px; line-height: 1.4; }
.welcome-icon {
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  display: grid !important;
  place-items: center;
  margin: 0 !important;
  border: 1px solid #365c55;
  border-radius: 5px;
  color: #fff !important;
  background: #3f8c7d;
  box-shadow: inset 1px 1px rgb(255 255 255 / 45%), inset -1px -1px rgb(0 0 0 / 25%);
  font-size: 18px !important;
}
.quick-steps { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.quick-steps li { min-width: 92px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid #aaa79f; background: #e8e5dc; font-size: 9px; }
.quick-steps b { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #6b58a0; font-size: 9px; }

.workspace {
  width: min(1440px, calc(100% - 28px));
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 12px;
  margin: 12px auto 14px;
}
.panel {
  border: 2px solid #4c4b47;
  border-radius: 7px;
  color: var(--text);
  background: #e6e3da;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #a29f97, var(--shadow);
}
.slots-panel { top: 112px; padding: 15px; background: #eae8df; }
.panel-copy, .editor-heading p { color: #5f5d57; }
.capacity-note { margin: -5px 0 14px; border-bottom: 1px solid #b9b6ad; padding-bottom: 10px; }
.capacity-note summary { color: #345c98; cursor: pointer; font-size: 10px; font-weight: 700; }
.capacity-note p { margin: 7px 0 0; color: #64615b; font-size: 9px; line-height: 1.45; }
.slot-list { gap: 6px; margin-bottom: 14px; }
.slot-card {
  min-height: 52px;
  border: 1px solid #96938b;
  border-radius: 5px;
  color: #242321;
  background: #f6f4ed;
  box-shadow: inset 1px 1px #fff;
}
.slot-card:hover { border-color: #4b679e; background: #eef2f8; }
.slot-card.selected { border-color: #284c8c; background: #dce6f6; box-shadow: inset 3px 0 #4969a7; }
.slot-number { border-color: #817f78; border-radius: 4px; color: #33312d; background: #e7e4dc; }
.slot-card.active .slot-number { color: #fff; border-color: #1e664e; background: #318265; }
.slot-meta, .slot-state { color: #77736d; }
.slot-state.valid { color: #176b4d; }
.field-label { color: #4e4c47; }
.slot-note { border-color: #b7b4aa; color: #5f5c56; }
.note-key { color: #5c3f92; }

.text-input, select, input[type="number"] {
  border: 1px solid #66645e;
  border-radius: 3px;
  color: #111;
  background: #fffef8;
  box-shadow: inset 1px 1px 1px rgb(0 0 0 / 13%);
}
.text-input:focus, select:focus, input[type="number"]:focus {
  border-color: #335fa8;
  box-shadow: 0 0 0 2px rgb(73 105 167 / 18%);
}

.editor-panel { background: #d9d7ce; }
.editor-heading { padding: 14px 16px; border-color: #9c9991; background: #eceae2; }
.editor-actions { gap: 6px; }
.editor-actions [hidden] { display: none !important; }
.workspace-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 7px;
  padding: 10px 12px;
  border-bottom: 1px solid #77756e;
  background: #c8c6bd;
}
.workspace-nav button {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #88857d;
  border-radius: 5px;
  color: #33312e;
  background: #e8e5dc;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #aaa69e;
  cursor: pointer;
  text-align: left;
}
.workspace-nav button:hover { background: #f2efe6; }
.workspace-nav button > span:last-child { min-width: 0; }
.workspace-nav button strong, .workspace-nav button small { display: block; }
.workspace-nav button strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-nav button small { margin-top: 2px; overflow: hidden; color: #716d66; font-size: 7px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.workspace-nav button.active { color: #fff; border-color: #24467f; background: #4b68a2; box-shadow: inset 1px 1px #8da3cc, inset -1px -1px #273f70; }
.workspace-nav button.active small { color: #dce6f7; }
.workspace-nav-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(0 0 0 / 38%);
  border-radius: 5px;
  color: #fff;
  box-shadow: inset 1px 1px rgb(255 255 255 / 42%), inset -1px -1px rgb(0 0 0 / 22%);
  font-size: 8px;
  font-weight: 800;
}
.mapping-icon { background: #4b68a2; }
.workspace-page[hidden] { display: none !important; }
.menu-bar a.active { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

.feature-window {
  scroll-margin-top: 112px;
  margin: 10px 12px 12px;
  overflow: hidden;
  border: 1px solid #696761;
  border-radius: 5px;
  background: #efede5;
  box-shadow: 2px 2px 0 rgb(255 255 255 / 55%);
}
.feature-summary {
  min-height: 48px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 0;
  color: #22211f;
  background: repeating-linear-gradient(0deg, #e8e6dd 0 2px, #d5d3ca 2px 3px);
  cursor: pointer;
  list-style: none;
}
.feature-summary::-webkit-details-marker { display: none; }
.feature-window[open] .feature-summary { border-bottom: 1px solid #66645e; background: #e5e3da; }
.feature-summary > span:nth-child(2) { padding: 3px 7px; background: rgb(239 237 229 / 88%); }
.feature-summary strong, .feature-summary small { display: block; }
.feature-summary strong { font-size: 12px; }
.feature-summary small { margin-top: 2px; color: #67645e; font-size: 9px; font-weight: 400; }
.feature-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgb(0 0 0 / 38%); border-radius: 5px; color: #fff; box-shadow: inset 1px 1px rgb(255 255 255 / 42%), inset -1px -1px rgb(0 0 0 / 22%); font-size: 10px; font-weight: 800; }
.scene-icon { background: #7658a2; }
.clock-icon { background: #b4772c; font-size: 17px; }
.health-icon { background: #38836d; font-size: 15px; }
.feature-disclosure { color: #3e5f99; font-size: 9px; font-weight: 700; }
.feature-window[open] .feature-disclosure { font-size: 0; }
.feature-window[open] .feature-disclosure::after { content: "Close"; font-size: 9px; }

.morph-header, .clock-header, .system-health-header {
  border-color: #aaa79f;
  background: #f2f0e8;
}
.morph-header h3 { color: #65438f; }
.morph-header p:not(.eyebrow), .clock-header p:not(.eyebrow),
.system-health-header p:not(.eyebrow) { color: #65615a; }
.morph-side span { color: #684491; }
.morph-side small { color: #6e6962; }
.morph-side.side-b span { color: #28768c; }
.morph-endpoints { background: #e2dfd6; }
.morph-endpoint { border-color: #957cac; background: #f1e7f8; }
.morph-endpoint.endpoint-b { border-color: #75a3af; background: #e3f2f4; }
.morph-endpoint span { color: #45384e; }
.morph-endpoint select { color: #29212f; background: #fff; }
.morph-manual p, .morph-readout span { color: #625c65; }
.morph-readout strong { color: #57347e; }
.morph-route-inspector, .morph-lane-compare { border-color: #aaa79f; }
.morph-route-controls { color: #333; background: #ddd9d0; }
.morph-route-controls > strong, .morph-route-controls label,
.morph-route-controls .morph-include { color: #554b5c; }
.morph-route-compare, .morph-lane-compare,
.morph-lane-section > div { background: #b5b1aa; }
.morph-route-compare > span, .morph-lane-compare > span,
.morph-route-value, .morph-lane-section, .morph-lane-value { color: #37332f; background: #f6f4ed; }
.morph-route-value b, .morph-lane-section h4, .morph-lane-value b { color: #675b70; }
.morph-route-value strong, .morph-lane-value strong { color: #332c37; }
.morph-route-value small, .morph-lane-value small { color: #6b6761; }

.clock-header h3 { color: #815617; }
.clock-header p.running { color: #176a4c; }
.clock-header p.waiting { color: #8b5e1a; }
.clock-header p.fault { color: #a43a35; }
.clock-position strong { color: #805616; }
.clock-position span, .clock-config label { color: #5f5b53; }
.clock-config { background: #eee9dc; }
.clock-health { border-color: #aaa69b; background: #aaa69b; }
.clock-health span { background: #faf7ed; }
.clock-health small { color: #6d675d; }
.clock-health strong { color: #3d3933; }
.loop-matrix-heading { color: #474238; background: #e6dfce; }
.loop-matrix-heading span { color: #686156; }
.loop-matrix { background: #e6dfce; }
.loop-card { border-color: #aaa28e; background: #fffaf0; }
.loop-card.playing, .loop-card.overdubbing { border-color: #3b8369; box-shadow: inset 3px 0 #4c9d7f; }
.loop-card.recording { border-color: #a84c45; box-shadow: inset 3px 0 #c45b52; }
.loop-card.armed { border-color: #a8782b; box-shadow: inset 3px 0 #d49b3d; }
.loop-card-head strong { color: #5b461f; }
.loop-card-head span, .loop-meta, .loop-card > label,
.loop-playback label, .loop-trim-readout { color: #676158; }
.loop-card > i { background: #cbc5b8; }
.loop-playback, .loop-trim-editor { border-color: #c4bdae; }
.loop-playback summary { color: #385f6d; }
.loop-processor { border-color: #b6b1a5; background: #f4efe5; }
.loop-processor summary { color: #3e6d70; }
.loop-processor summary small, .loop-processor-help,
.loop-processor label > small { color: #746f65; }
.loop-clock-help { color: #5d675f; }
.loop-waveform-svg { border-color: #65615a; background: #1c2427; }

.system-health-header h3 { color: #256852; }
.health-verdict { border-color: #8c8981; background: #e4e1d8; }
.health-verdict strong { color: #41403b; }
.health-verdict span { color: #6b6862; }
.health-verdict.good { border-color: #4f856c; background: #dcece3; }
.health-verdict.good strong { color: #176347; }
.health-verdict.warn { border-color: #9a782f; background: #f3e6bd; }
.health-verdict.warn strong { color: #7a5315; }
.health-verdict.bad { border-color: #a64b46; background: #f2d8d4; }
.health-verdict.bad strong { color: #912e2a; }
.health-summary { background: #aaa79f; }
.health-card { background: #f6f4ec; }
.health-card small, .health-card span { color: #64615a; }
.health-card strong { color: #33312d; }
.health-card.good strong { color: #176b4d; }
.health-card.warn strong { color: #8b5e16; }
.health-card.bad strong { color: #9a332f; }

.mapping-workspace { scroll-margin-top: 112px; margin: 10px 12px 12px; overflow: hidden; border: 1px solid #696761; border-radius: 5px; background: #efede5; }
.mapping-titlebar { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 12px; border-bottom: 1px solid #77756e; background: #f2f0e8; }
.mapping-titlebar h3 { margin: 0; font-size: 14px; }
.mapping-titlebar p:not(.eyebrow) { margin-top: 3px; color: #65615a; font-size: 9px; }
.target-profile-panel { border-bottom: 1px solid #8e8b83; color: #2c2a27; background: #e7e3d9; }
.target-profile-head {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 220px) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
}
.target-profile-head h4 { margin: 0; font-size: 13px; }
.target-profile-head p:not(.eyebrow) { margin: 3px 0 0; color: #68645e; font-size: 8px; }
.target-profile-head > label, .target-profile-import {
  display: grid;
  gap: 4px;
  color: #57534d;
  font-size: 8px;
  font-weight: 700;
}
.target-profile-import { grid-template-columns: auto auto; align-items: center; }
.target-profile-import output { max-width: 160px; color: #5f5b54; font-size: 8px; text-align: right; }
.midi-discovery-panel {
  border-top: 1px solid #aaa69d;
  background: #e4e0d6;
}
.midi-discovery-heading {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
}
.midi-discovery-heading h4 { margin: 0; font-size: 12px; }
.midi-discovery-heading p:not(.eyebrow) {
  margin: 3px 0 0;
  color: #68645e;
  font-size: 8px;
}
.midi-discovery-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.midi-learn-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.midi-learn-steps span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #57534d;
  font-size: 8px;
  font-weight: 750;
}
.midi-learn-steps b {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #4d3970;
  font: 800 8px "SFMono-Regular", Consolas, monospace;
}
.midi-learn-target {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  border-top: 1px solid #b7b2a9;
  color: #68645e;
  font-size: 8px;
}
.midi-learn-target strong {
  color: #3d3934;
  font: 800 9px "SFMono-Regular", Consolas, monospace;
}
.midi-device-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-top: 1px solid #b7b2a9;
  border-bottom: 1px solid #b7b2a9;
  color: #4d4943;
  background: #f1eee6;
  font: 8px "SFMono-Regular", Consolas, monospace;
}
.discovery-badge {
  padding: 3px 5px;
  border: 1px solid #3d7b61;
  border-radius: 3px;
  color: #1f674c;
  background: #dcece4;
  font-weight: 800;
  letter-spacing: .04em;
}
.discovery-badge.profile { color: #574178; border-color: #776294; background: #e8e0f0; }
.discovery-badge.learn { color: #835c16; border-color: #a97d2c; background: #f3e4bb; }
.discovery-badge.muted { color: #66615a; border-color: #98938a; background: #dedbd3; }
.midi-observed-controls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  padding: 8px 12px 10px;
}
.midi-observed-controls > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #68645e;
  font-size: 8px;
}
.midi-observed-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 8px;
  padding: 7px;
  border: 1px solid #aaa69d;
  border-radius: 3px;
  background: #f8f5ed;
}
.midi-observed-control strong { color: #3c3934; font-size: 9px; }
.midi-observed-control b {
  grid-row: span 2;
  min-width: 38px;
  color: #4d3970;
  font: 800 10px "SFMono-Regular", Consolas, monospace;
}
.midi-observed-control span { color: #6a655e; font-size: 7px; }
.arcc-scene-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(150px, auto);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid #aaa69d;
  background: #ddd9cf;
}
.arcc-scene-tools[hidden] { display: none; }
.arcc-scene-tools > div:first-child { display: grid; gap: 2px; }
.arcc-scene-tools strong { color: #37342f; font-size: 9px; }
.arcc-scene-tools span { color: #66615a; font-size: 8px; }
.arcc-scene-actions { display: flex; gap: 6px; }
.arcc-scene-actions .dice-button span {
  color: inherit;
  font-size: 14px;
  line-height: 1;
}
.arcc-scene-actions .armed {
  color: #fff;
  border-color: #8f302c;
  background: #a9423d;
  box-shadow: inset 1px 1px #d9827b, inset -1px -1px #702522;
}
.arcc-scene-tools output {
  color: #59554e;
  font-size: 8px;
  text-align: right;
}
.target-tools { border-top: 1px solid #aaa69d; }
.target-tool-tabs {
  display: flex;
  gap: 5px;
  padding: 7px 9px;
  border-bottom: 1px solid #aaa69d;
  background: #d4d0c6;
}
.target-tool-tabs button, .terrain-layer-tabs button {
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid #858178;
  border-radius: 4px;
  color: #44413c;
  background: #eeebe2;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #aaa69d;
  cursor: pointer;
  font-size: 9px;
  font-weight: 750;
}
.target-tool-tabs button.active, .terrain-layer-tabs button.active {
  color: #fff;
  border-color: #285084;
  background: #4d6ba4;
  box-shadow: inset 1px 1px #8ea5d0, inset -1px -1px #263f70;
}
.constellation-panel, .terrain-panel { padding: 10px; background: #eeeae1; }
.target-tool-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
  padding: 8px 9px;
  border: 1px solid #aaa69d;
  border-radius: 4px;
  background: #faf7ef;
}
.target-tool-intro strong, .target-tool-intro span { display: block; }
.target-tool-intro strong { color: #4d3970; font-size: 11px; }
.target-tool-intro div > span { margin-top: 2px; color: #67625b; font-size: 8px; }
.verified-badge {
  flex: 0 0 auto;
  padding: 4px 6px;
  border: 1px solid #4d856e;
  border-radius: 3px;
  color: #236249 !important;
  background: #dcece4;
  font: 700 7px "SFMono-Regular", Consolas, monospace;
  letter-spacing: .05em;
}
.constellation-controls, .terrain-toolbar { display: grid; align-items: end; gap: 7px; }
.constellation-controls { grid-template-columns: repeat(5, minmax(100px, 1fr)) auto; }
.constellation-controls label, .terrain-toolbar label {
  display: grid;
  gap: 4px;
  color: #5c5750;
  font-size: 8px;
  font-weight: 700;
}
.constellation-controls select, .constellation-controls input,
.terrain-toolbar select, .terrain-toolbar input { width: 100%; height: 30px; }
.constellation-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.constellation-voice { min-width: 0; padding: 7px; border: 1px solid #9b93a4; border-radius: 4px; background: #f5eff8; }
.constellation-voice strong, .constellation-voice span { display: block; }
.constellation-voice strong { color: #513672; font-size: 9px; }
.constellation-voice span { margin-top: 2px; color: #66605f; font-size: 7px; }
.terrain-toolbar { grid-template-columns: 115px minmax(280px, 1.4fr) 90px minmax(150px, 1fr) 80px auto auto auto; }
.terrain-layer-tabs { display: flex; gap: 4px; align-items: end; }
.terrain-layer-tabs button.unavailable {
  color: #8b514d;
  border-style: dashed;
  background: #ecdeda;
  opacity: .75;
  cursor: not-allowed;
}
.terrain-workspace {
  width: min(100%, 620px);
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: 1fr 20px;
  margin: 12px auto 4px;
}
.terrain-grid {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(8, minmax(38px, 1fr));
  gap: 3px;
  padding: 5px;
  border: 1px solid #716d65;
  border-radius: 4px;
  background: #b9b5ab;
}
.terrain-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #77736b;
  border-radius: 3px;
  color: #272521;
  background: var(--terrain-color, #f5f2e9);
  box-shadow: inset 1px 1px rgb(255 255 255 / 60%);
  cursor: pointer;
  font: 700 8px "SFMono-Regular", Consolas, monospace;
  user-select: none;
}
.terrain-cell.changed { outline: 2px solid #7655a3; outline-offset: -3px; }
.terrain-cell.selected { border-color: #153e79; box-shadow: 0 0 0 2px #4c6da9; }
.terrain-axis { display: grid; place-items: center; color: #5f5a53; font: 800 8px "SFMono-Regular", Consolas, monospace; }
.terrain-axis-y { grid-column: 1; grid-row: 1; }
.terrain-axis-x { grid-column: 2; grid-row: 2; }
.terrain-status { min-height: 18px; color: #605b54; font-size: 8px; text-align: center; }
.terrain-status.warn { color: #914c28; }
.arcc-action-panel {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-top: 1px solid #b39a6d;
  color: #5c513e;
  background: #efe4c9;
  font-size: 8px;
}
.arcc-action-panel strong { color: #76511a; }
.monitor-drawer { position: relative; }
.monitor-drawer > summary { min-width: 150px; padding: 8px 10px; border: 1px solid #77756e; border-radius: 4px; background: #e1ded5; box-shadow: inset 1px 1px #fff, inset -1px -1px #99968e; cursor: pointer; font-size: 9px; font-weight: 700; list-style: none; }
.monitor-drawer > summary::-webkit-details-marker { display: none; }
.monitor-drawer[open] { width: min(100%, 720px); }
.monitor-toolbar { border: 1px solid #77756e; background: #dfddd4; }
.monitor-toolbar label { color: #45433e; }
.page-strip { border-color: #aaa79f; background: #ddd9d0; }
.page-tab { border-color: #88857d; border-radius: 4px; color: #3d3a35; background: #ece9e0; box-shadow: inset 1px 1px #fff, inset -1px -1px #aaa69e; }
.page-tab span { color: #6f6b65; }
.page-tab.active { color: #fff; border-color: #24467f; background: #4d6aa4; box-shadow: inset 1px 1px #8da3cc, inset -1px -1px #273f70; }
.page-tab.active span { color: #d9e3f4; }
.page-tools { border-color: #b1aea5; background: #ebe8df; }
.copy-control { color: #4e4b46; }
.route-legend { border-color: #aaa79f; color: #57534c; background: #dfdcd3; }
.route-legend strong { color: #3e5f9b; }
.lane-list { gap: 8px; padding: 9px; background: #d5d2c8; }
.lane-card { border-color: #7e7b74; border-radius: 5px; background: #f3f1e9; box-shadow: 2px 2px 0 rgb(255 255 255 / 58%); }
.lane-heading { border-color: #aaa79f; color: #262522; background: #e8e5dc; }
.lane-card[open] .lane-heading { color: #fff; border-color: #2c4778; background: #4e6ca7; }
.lane-card[open] .lane-heading .lane-route-count { color: #dce7f8; }
.lane-route-count { color: #176b4d; }
.lane-route-count.note-layer-warning { color: #9b4f12; }
.reset-lane, .reset-route { color: #8b322f; background: #f0dcd7; }

.calibration-grid { border-color: #c1bdb4; background: #eeeae1; }
.motion-panel { border-color: #b7b4aa; background: #e7efe9; }
.motion-heading strong { color: #246a51; }
.motion-heading-side > span { color: #567568; }
.motion-learn-actions button { color: #285f4a; border-color: #7ca48f; background: #dcebe2; }
.event-extractor { border-color: #a89bb7; background: #eee9f2; }
.event-extractor.enabled { border-color: #79609b; background: #e9e0f2; }
.event-heading { border-color: #c0b4c9; }
.event-heading strong { color: #64418d; }
.event-toggle, .event-extractor > p { color: #65596f; }
.event-extractor > p strong { color: #64418d; }
.event-destinations { border-color: #aa966f; background: #f1ead9; }
.event-destinations-heading { border-color: #c7b991; background: #ece2c9; }
.event-destinations-heading strong, .event-route-heading strong { color: #72501a; }
.event-destinations-heading > span, .event-mask-section > div > strong { color: #6b604c; }
.event-route-card { border-color: #b29d72; background: #fff9e9; }
.event-route-card.route-off { border-color: #aaa79f; background: #e9e7df; }
.event-route-heading { border-color: #c7bea8; }
.event-route-card.route-off .event-route-heading strong { color: #77736d; }
.event-route-live span, .event-mask-grid label, .event-route-note { color: #625e55; }
.event-route-live small { color: #7c776f; }
.event-route-live.active span { color: #176b4d; }
.event-route-live.pending span { color: #9b332f; }
.pitch-panel { border-color: #78a0a9; background: #e4f0f1; }
.pitch-panel.enabled { border-color: #3b8293; background: #dcedf0; box-shadow: inset 3px 0 #4a9cad; }
.pitch-heading { border-color: #9db9bf; background: #d7e8ea; }
.pitch-heading > div:first-child strong { color: #216b7a; }
.pitch-heading > div:first-child small, .pitch-toggle { color: #4e7077; }
.pitch-live { border-color: #8da4a8; background: #f4fbfa; }
.pitch-live span { color: #536f74; }
.pitch-live em { color: #6f7f82; }
.pitch-live.active { border-color: #277a8c; background: #d8f0f2; }
.pitch-live.active strong { color: #176f80; }
.pitch-warning { border-color: #c0a15e; color: #684d17; background: #fff2cc; }
.pitch-warning span { color: #806d47; }
.pitch-warning.danger { border-color: #bd817b; color: #7b2f2a; background: #f7dedb; }
.pitch-warning.unified { border-color: #6e9b8b; color: #27594b; background: #dff1e9; }
.pitch-warning.unified span { color: #4d7468; }
.pitch-expression-summary { border-color: #9cb4b8; color: #2d6975; background: #f3f8f6; }
.pitch-expression-summary p { color: #58767c; }
.pitch-advanced { border-color: #9db9bf; }
.pitch-advanced > summary { color: #286e7b; background: #d2e3e5; }
.pitch-advanced > summary small { color: #607a7f; }
.pitch-advanced[open] > summary { border-color: #9db9bf; }
.pitch-grid label, .pitch-scale > span, .pitch-scale label,
.pitch-subheading span, .pitch-tuning-grid label span { color: #526f75; }
.pitch-calibration, .pitch-tuning { border-color: #9cb4b8; background: #f3f8f6; }
.pitch-subheading strong { color: #286e7b; }
.pitch-subheading button, .pitch-point button { color: #245f6a; border-color: #7ca4ab; background: #d9eaec; }

.routes-grid { background: #e7e4dc; }
.route-card { border-color: #8794ab; border-radius: 5px; background: #f4f7fc; }
.route-card.route-off { border-color: #aaa79f; background: #e4e2da; }
.route-heading { border-color: #b1b8c4; }
.route-heading strong { color: #294e8f; }
.route-off .route-heading strong { color: #74716b; }
.route-number, .route-field, .curve-preview { color: #5f5c56; }
.route-codec {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 4px;
  border: 1px solid #8d7aa1;
  border-radius: 2px;
  color: #5e4578;
  background: #eee6f5;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.route-profile-note {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  padding: 5px 7px;
  border: 1px solid #b4aaa0;
  color: #5f5952;
  background: #f6f1e8;
  font-size: 7px;
}
.curve-preview .curve-grid { stroke: #c0bdb5; }
.curve-preview polyline { stroke: #3d63a7; }
.motion-telemetry { background: #e7efe9; }
.telemetry-heading, .motion-meter span { color: #4c6c5e; }
.motion-meter b { color: #245f48; }
.motion-meter i { background: #bccbc4; }
.event-live { border-color: #a89bb7; background: #eee9f2; }
.event-chip, .event-peak { border-color: #aaa0b4; color: #635d68; background: #f6f2f8; }
.event-chip.active { border-color: #7655a1; color: #5e3686; background: #e6d8f2; }
.event-history > span, .event-history li { color: #655b70; }
.event-history time, .event-history em, .event-history .event-empty { color: #7a737f; }
.event-history strong { color: #513766; }
.motion-trace { border-color: #65766f; background: #17211d; }

.terminal { width: min(1440px, calc(100% - 28px)); }
.terminal summary { color: #292824; background: #e5e2d9; }
.text-button { color: #4f4d48; background: transparent; box-shadow: none; }
.terminal pre { border-color: #77756e; color: #9fe0bf; background: #15201c; }
.toast { border: 2px solid #4b4a45; border-radius: 5px; color: #171717; background: #f5f3ea; }
.toast.error { border-color: #923b37; background: #f1d8d4; }

.stress-console { border-top: 1px solid #8b8880; background: #dedbd2; }
.stress-titlebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px 10px;
  background: linear-gradient(90deg, #eeeae0, #dfe8e4);
}
.stress-titlebar h3 { margin: 0; color: #205f4b; font-size: 14px; }
.stress-titlebar p:not(.eyebrow) { margin-top: 3px; color: #65615a; font-size: 9px; }
.stress-badge {
  min-width: 62px;
  padding: 6px 8px;
  border: 1px solid #6d6a64;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  background: #4b68a2;
  box-shadow: inset 1px 1px rgb(255 255 255 / 35%), inset -1px -1px rgb(0 0 0 / 25%);
  font: 8px "SFMono-Regular", Consolas, monospace;
  letter-spacing: .08em;
}
.stress-badge.pass { background: #2f7b5f; }
.stress-badge.warn, .stress-badge.skip { color: #2e2513; background: #e1b652; }
.stress-badge.fail, .stress-badge.aborted { background: #a74843; }
.stress-safety { padding: 10px 14px; border-block: 1px solid #aaa69d; background: #f4edcf; }
.stress-safety strong { color: #744f13; font-size: 9px; }
.stress-safety ul { margin: 5px 0 0 17px; padding: 0; color: #665d4c; font-size: 8px; line-height: 1.55; }
.stress-options {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 120px 100px;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #aaa69d;
  background: #ebe8df;
}
.stress-options label { color: #5e5a53; font-size: 8px; }
.stress-options input[type="number"] {
  width: 100%;
  min-height: 29px;
  margin-top: 3px;
  padding: 4px 7px;
  border: 1px solid #85827b;
  border-radius: 3px;
  color: #252421;
  background: #fffdf6;
}
.stress-options .stress-check { display: flex; align-items: center; gap: 7px; color: #2f4f45; }
.stress-controls { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 14px; background: #eeece4; }
.stress-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 32%);
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-block: 1px solid #9d9a92;
  color: #383632;
  background: #d5d2ca;
}
.stress-progress strong, .stress-progress span { display: block; }
.stress-progress strong { font-size: 9px; }
.stress-progress span { margin-top: 2px; color: #65615b; font-size: 8px; }
.stress-progress progress { width: 100%; height: 14px; accent-color: #4b68a2; }
.stress-checkpoint {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 10px 14px;
  padding: 11px;
  border: 2px solid #4b68a2;
  border-radius: 4px;
  color: #292823;
  background: #e7edf8;
  box-shadow: 2px 2px 0 #8c8982;
}
.stress-checkpoint[hidden] { display: none; }
.stress-checkpoint strong { color: #294d8d; font-size: 10px; }
.stress-checkpoint p { margin-top: 4px; color: #535049; font-size: 8px; line-height: 1.45; }
.stress-checkpoint-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.stress-results { display: grid; gap: 6px; padding: 10px 14px 14px; background: #dedbd2; }
.stress-results > p { color: #68645d; font-size: 8px; }
.stress-phase {
  border: 1px solid #aaa69e;
  border-radius: 3px;
  background: #f7f5ed;
}
.stress-phase > summary {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 7px 8px;
  cursor: pointer;
  list-style: none;
}
.stress-phase > summary::-webkit-details-marker { display: none; }
.stress-phase > summary > b { color: #77736c; font: 7px "SFMono-Regular", Consolas, monospace; }
.stress-phase > summary strong, .stress-phase > summary small { display: block; }
.stress-phase > summary strong { color: #35332f; font-size: 8px; }
.stress-phase > summary small { margin-top: 2px; color: #6b6760; font-size: 7px; }
.stress-phase > summary em { color: #77736c; font: 7px "SFMono-Regular", Consolas, monospace; font-style: normal; }
.stress-phase[open] > summary { border-bottom: 1px solid #bbb7ae; background: #eeece4; }
.stress-check-list { padding: 5px 8px 7px; background: #f7f5ed; }
.stress-check-list p { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 7px; padding: 5px 0; border-bottom: 1px dotted #c4c0b7; }
.stress-check-list p:last-child { border-bottom: 0; }
.stress-check-list p > b { color: #77736c; font: 7px "SFMono-Regular", Consolas, monospace; }
.stress-check-list span strong, .stress-check-list span small { display: block; }
.stress-check-list span strong { color: #3d3a35; font-size: 8px; }
.stress-check-list span small { margin-top: 2px; color: #68645d; font-size: 7px; line-height: 1.35; }
.stress-check-list p.pass > b { color: #217053; }
.stress-check-list p.warn > b, .stress-check-list p.skip > b { color: #8b631c; }
.stress-check-list p.fail > b { color: #9c3834; }
.stress-phase.pass { border-left: 4px solid #398065; }
.stress-phase.warn, .stress-phase.skip { border-left: 4px solid #c09132; }
.stress-phase.fail, .stress-phase.aborted { border-left: 4px solid #ad4e48; }
.stress-phase.running { border-left: 4px solid #4b68a2; background: #edf1fa; }

@media (max-width: 1100px) {
  .target-profile-head { grid-template-columns: minmax(220px, 1fr) 180px; }
  .target-profile-import { grid-column: 1 / -1; grid-template-columns: auto 1fr; }
  .target-profile-import output { max-width: none; text-align: left; }
  .arcc-scene-tools { grid-template-columns: minmax(220px, 1fr) auto; }
  .arcc-scene-tools output { grid-column: 1 / -1; text-align: left; }
  .constellation-controls { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .terrain-toolbar { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .terrain-layer-tabs { grid-column: span 2; }
  .welcome-panel { align-items: flex-start; flex-direction: column; }
  .quick-steps { width: 100%; }
  .quick-steps li { flex: 1; }
}

@media (max-width: 980px) {
  .workspace { grid-template-columns: 1fr; }
  .workspace > * { min-width: 0; max-width: 100%; }
  .slots-panel { position: static; overflow: hidden; }
  .slot-list {
    max-width: 100%;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .slot-card { flex: 0 0 220px; }
  .workspace-nav { overflow-x: auto; }
  .workspace-nav button { flex: 0 0 155px; }
}

@media (max-width: 700px) {
  .menu-bar { gap: 12px; overflow-x: auto; white-space: nowrap; }
  .menu-bar > span { display: none; }
  .topbar { top: 28px; }
  .guide-button { display: none; }
  .welcome-panel, .workspace, .terminal { width: calc(100% - 16px); }
  .quick-steps { display: grid; grid-template-columns: 1fr 1fr; }
  .quick-steps li { min-width: 0; }
  .workspace-nav { display: flex; padding: 7px; }
  .workspace-nav button { flex-basis: 145px; }
  .feature-window, .mapping-workspace { margin-right: 7px; margin-left: 7px; }
  .feature-summary { grid-template-columns: 34px minmax(0, 1fr); }
  .feature-disclosure { display: none; }
  .mapping-titlebar { align-items: stretch; flex-direction: column; }
  .target-profile-head, .midi-discovery-heading, .arcc-scene-tools, .constellation-controls, .terrain-toolbar { grid-template-columns: 1fr; }
  .target-profile-import, .terrain-layer-tabs { grid-column: auto; }
  .arcc-scene-tools output { grid-column: auto; }
  .arcc-scene-actions { flex-wrap: wrap; }
  .target-tool-tabs, .terrain-layer-tabs { overflow-x: auto; }
  .constellation-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terrain-grid { grid-template-columns: repeat(8, minmax(28px, 1fr)); }
  .monitor-drawer[open] { width: 100%; }
  .stress-options, .stress-checkpoint, .stress-progress { grid-template-columns: 1fr; }
  .stress-checkpoint-actions { justify-content: flex-start; }
}

/* PulseField ------------------------------------------------------------- */

.pulse-icon { background: linear-gradient(145deg, #9a4f76, #5f4a92); }
.pulse-field-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-bottom: 1px solid #aaa69d;
  color: #2f2d29;
  background: #f3eee6;
}
.pulse-field-header h3 { margin: 2px 0 4px; font-size: 16px; }
.pulse-field-header p:last-child { color: #666058; font-size: 9px; }
.pulse-field-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.pulse-track-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #c9c6bd; }
.pulse-track-tabs button {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 13px;
  border: 0;
  border-right: 1px solid #85827b;
  border-bottom: 1px solid #85827b;
  color: #403d38;
  background: #dcd9d0;
  cursor: pointer;
}
.pulse-track-tabs button:last-child { border-right: 0; }
.pulse-track-tabs button.active { color: #fff; background: #5e4e8d; box-shadow: inset 0 -3px #3b2d65; }
.pulse-track-tabs b, .pulse-track-tabs span { display: block; }
.pulse-track-tabs b { font-size: 11px; }
.pulse-track-tabs span { font-size: 8px; opacity: .76; }
.pulse-status {
  display: grid;
  grid-template-columns: repeat(8, minmax(65px, 1fr));
  gap: 1px;
  border-bottom: 1px solid #85827b;
  background: #85827b;
}
.pulse-status span { min-width: 0; padding: 7px 9px; color: #4d4942; background: #e6e3da; }
.pulse-status strong, .pulse-status small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-status strong { color: #24221f; font: 9px "SFMono-Regular", Consolas, monospace; }
.pulse-status small { margin-top: 2px; font-size: 7px; }
.pulse-status span.live { color: #fff; background: #27745b; }
.pulse-status span.live strong { color: #fff; }
.pulse-status span.warning { color: #fff; background: #9a3e37; }
.pulse-status span.warning strong { color: #fff; }
.note-engine-binding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #918d85;
  color: #3e3933;
  background: #f2ede1;
}
.note-engine-binding span, .note-engine-binding strong,
.note-engine-binding small { display: block; }
.note-engine-binding span { color: #655e55; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.note-engine-binding strong { margin-top: 2px; font-size: 11px; }
.note-engine-binding small { margin-top: 2px; color: #6b645b; font-size: 8px; }
.note-engine-binding button { min-height: 28px; border: 1px solid #5e4e8d; border-radius: 3px; color: #3d3066; background: #eee8fa; font-size: 8px; font-weight: 700; cursor: pointer; }
.pulse-global {
  display: grid;
  grid-template-columns: repeat(8, minmax(90px, 1fr));
  align-items: end;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #9d9991;
  background: #e6e2d7;
}
.pulse-global label, .pulse-cell label { color: #514d46; font-size: 8px; font-weight: 700; }
.pulse-global label > small { display: block; margin-top: 3px; color: #716b62; font-size: 7px; font-weight: 400; }
.pulse-global input:not([type="checkbox"]), .pulse-global select,
.pulse-cell input, .pulse-cell select {
  width: 100%;
  min-width: 0;
  min-height: 27px;
  display: block;
  margin-top: 3px;
  padding: 3px 6px;
  border: 1px solid #77736c;
  border-radius: 3px;
  color: #24211e;
  background: #fffdf6;
  font-size: 9px;
}
.pulse-enable { min-height: 31px; display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid #8e8a82; border-radius: 3px; background: #f4f1e8; }
.pulse-enable input { accent-color: #5e4e8d; }
.pulse-note-pool { grid-column: 1 / -2; }
.pulse-note-pool small { display: block; margin-top: 3px; color: #716b62; font-weight: 400; }
.pulse-cells-heading { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; color: #403c36; background: #d8d3c7; font-size: 9px; }
.pulse-cells-heading span { color: #6f685e; font-size: 8px; }
.pulse-cells {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 7px;
  padding: 0 14px 14px;
  background: #d8d3c7;
}
.pulse-cell { overflow: hidden; border: 1px solid #87837a; border-radius: 4px; color: #302d28; background: #f5f2e9; box-shadow: inset 1px 1px #fff; }
.pulse-cell.inactive { opacity: .52; }
.pulse-cell header { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-bottom: 1px solid #aaa59c; background: #ddd8cc; }
.pulse-cell.active header { color: #fff; background: #6c588f; }
.pulse-cell header b { font: 10px "SFMono-Regular", Consolas, monospace; }
.pulse-cell header span { font-size: 8px; }
.pulse-cell > label { display: block; margin: 7px 8px; }
.pulse-cell-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 7px 8px; }
.pulse-cell details { border-top: 1px solid #bbb6ac; background: #ebe7dd; }
.pulse-cell summary { padding: 7px 8px; color: #4a5680; cursor: pointer; font-size: 8px; font-weight: 700; }
.pulse-cell details > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px 8px; }

@media (max-width: 1100px) {
  .pulse-status { grid-template-columns: repeat(4, minmax(70px, 1fr)); }
  .pulse-global { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
  .pulse-note-pool { grid-column: 1 / -1; }
  .pulse-cells { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}

@media (max-width: 700px) {
  .pulse-field-header { grid-template-columns: 1fr; }
  .pulse-field-actions { justify-content: flex-start; }
  .pulse-status { grid-template-columns: repeat(2, minmax(80px, 1fr)); }
  .pulse-global { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
  .pulse-note-pool { grid-column: 1 / -1; }
  .pulse-cells-heading { align-items: flex-start; flex-direction: column; }
  .pulse-cells { grid-template-columns: 1fr; }
}

/* Event Stage ------------------------------------------------------------ */
.event-stage-panel { overflow: hidden; color: #29261f; background: #c9c4b8; }
.event-stage-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  color: #29261f;
  border-bottom: 1px solid #817d73;
  background: linear-gradient(135deg, #f5f1e6 0 68%, #d5e5de 68% 100%);
}
.event-stage-header h3 { margin: 1px 0 3px; font-size: 24px; }
.event-stage-header p:last-child { max-width: 720px; margin: 0; color: #5a554b; }
.event-stage-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.event-stage-clock-source {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 18px;
  color: #31453f;
  border-bottom: 1px solid #9a958b;
  background: #d8e6df;
}
.event-stage-clock-source > span:nth-child(2) { flex: 1; }
.event-stage-clock-source b, .event-stage-clock-source small { display: block; }
.event-stage-clock-source small { margin-top: 2px; color: #60716b; font-size: 8px; }
.event-stage-clock-source > strong { padding: 5px 8px; border: 1px solid #66857b; border-radius: 3px; background: #eef4f0; font-size: 8px; text-transform: uppercase; }
.event-stage-clock-jack { display: grid; place-items: center; width: 31px; height: 31px; color: #eefaf6; border: 3px solid #405650; border-radius: 50%; background: #2b7f6b; box-shadow: inset 0 0 0 2px #9fc9bb, 1px 1px #fff; font: 8px "SFMono-Regular", Consolas, monospace; }
.event-stage-console {
  margin: 16px 18px 0;
  padding: 12px;
  border: 1px solid #77746d;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #e9e6dd, #d3d0c7);
  box-shadow: inset 1px 1px #fff, 3px 3px 0 #aaa69d;
}
.event-stage-screen-shell {
  overflow: hidden;
  min-height: 162px;
  border: 1px solid #719086;
  border-radius: 6px;
  color: #294c43;
  background: linear-gradient(180deg, #eef7f3, #dcebe5);
  box-shadow: inset 1px 1px #fff, inset 0 0 18px rgba(61, 135, 113, .1);
  font-family: "SFMono-Regular", Consolas, monospace;
}
.event-stage-screen-head { display: flex; justify-content: space-between; padding: 7px 10px; color: #356d5e; border-bottom: 1px solid #a9c9bf; background: #d3e7e0; font-size: 8px; letter-spacing: .08em; }
.event-stage-status { display: grid; grid-template-columns: minmax(180px, .9fr) 1.2fr; gap: 10px 16px; padding: 10px; }
.event-stage-screen-primary { min-width: 0; padding-right: 12px; border-right: 1px solid #b6d0c8; }
.event-stage-screen-primary > span, .event-stage-screen-primary > strong, .event-stage-screen-primary > small { display: block; }
.event-stage-screen-primary > span { color: #4d786d; font-size: 8px; }
.event-stage-screen-primary > strong { margin: 8px 0 5px; color: #294c43; font-size: 17px; letter-spacing: .03em; }
.event-stage-screen-primary.live > strong { color: #176b4d; text-shadow: none; }
.event-stage-screen-primary > small { color: #66857c; font-size: 7px; }
.event-stage-screen-readouts { display: grid; grid-template-columns: repeat(4, minmax(60px, 1fr)); gap: 6px; }
.event-stage-screen-readouts span { min-width: 0; padding: 6px; border: 1px solid #bad1ca; border-radius: 3px; background: #f6faf7; box-shadow: inset 1px 1px #fff; }
.event-stage-screen-readouts strong, .event-stage-screen-readouts small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-stage-screen-readouts strong { color: #345b51; font-size: 10px; }
.event-stage-screen-readouts small { margin-top: 4px; color: #66877d; font-size: 6px; text-transform: uppercase; }
.event-stage-screen-sequence { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.event-stage-screen-sequence > span { display: grid; grid-template-columns: 5px auto; gap: 2px 5px; align-items: center; min-width: 0; padding: 4px 5px; color: #52776d; border: 1px solid #bfd4cd; border-radius: 3px; background: #f4f8f5; }
.event-stage-screen-sequence i { grid-row: 1 / 3; width: 5px; height: 100%; min-height: 21px; border-radius: 2px; background: #aac8bf; }
.event-stage-screen-sequence b { font-size: 8px; }
.event-stage-screen-sequence small { overflow: hidden; font-size: 7px; text-overflow: ellipsis; }
.event-stage-screen-sequence > span.current { color: #315f53; border-color: #5ca88f; background: #dff1e9; }
.event-stage-screen-sequence > span.current i { background: #3e9679; box-shadow: none; }
.event-stage-screen-sequence > span.unused { opacity: .36; }
.event-stage-track-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.event-stage-track-tabs button { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 35px; padding: 7px 11px; color: #4e4a44; border: 1px solid #8d8980; border-radius: 4px; background: #f0ede5; box-shadow: inset 1px 1px #fff, inset -1px -1px #b0aba2; text-align: left; }
.event-stage-track-tabs button.active { color: #493a68; border-color: #8b72ae; background: #ddd2ec; box-shadow: inset 0 3px #78b7a5, inset 1px 1px #fff; }
.event-stage-track-tabs b, .event-stage-track-tabs span { display: block; }
.event-stage-track-tabs b { font-size: 10px; letter-spacing: .04em; }
.event-stage-track-tabs span { font-size: 7px; opacity: .8; }
.event-stage-track-tabs .event-stage-tab-live { display: grid; grid-template-columns: 8px auto 8px auto; gap: 4px; align-items: center; color: #5f625c; font: 6px "SFMono-Regular", Consolas, monospace; letter-spacing: .05em; opacity: 1; }
.event-stage-tab-live i { width: 7px; height: 7px; border: 1px solid #77746d; border-radius: 50%; background: #bbb8b0; box-shadow: inset 1px 1px #e4e1da; transition: background 50ms linear, box-shadow 50ms linear; }
.event-stage-tab-live i.on { border-color: #3f7f6d; background: #5ba78e; box-shadow: 0 0 0 2px #d5eee6; }
.event-stage-tab-live i.flash { border-color: #806526; background: #e9b84a; box-shadow: 0 0 0 2px #f8e8b8, 0 0 6px #e3ac36; }
.event-stage-global {
  display: grid;
  grid-template-columns: minmax(140px, 1.3fr) repeat(2, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 9px;
}
.event-stage-global label,
.event-stage-track-workbench label,
.event-stage-step label,
.event-stage-step-inspector label { color: #4f4a42; font-size: 8px; font-weight: 700; }
.event-stage-global label { color: #4f4a42; }
.event-stage-scale-editor {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto repeat(12, minmax(38px, 1fr));
  gap: 5px;
  align-items: stretch;
  padding: 7px;
  border: 1px solid #888279;
  border-radius: 4px;
  background: #dedad0;
  box-shadow: inset 1px 1px #f8f5ec;
}
.event-stage-scale-editor > span { align-self: center; min-width: 88px; color: #514a62; font-size: 8px; font-weight: 700; }
.event-stage-scale-editor > span small { display: block; margin-top: 2px; color: #777066; font-size: 6px; font-weight: 400; }
.event-stage-scale-editor button { min-height: 34px; padding: 4px 2px; color: #615b53; border: 1px solid #918b82; border-radius: 3px; background: #f6f2e9; box-shadow: inset 1px 1px #fff, inset -1px -1px #c0bbb1; font-size: 8px; }
.event-stage-scale-editor button small { display: block; margin-top: 2px; color: #837b71; font-size: 6px; }
.event-stage-scale-editor button[aria-pressed="true"] { color: #fff; border-color: #3f7567; background: #4f927e; box-shadow: inset 0 -2px #326556; }
.event-stage-scale-editor button[aria-pressed="true"] small { color: #e0f1eb; }
.event-stage-global input,
.event-stage-global select,
.event-stage-track-workbench input,
.event-stage-track-workbench select,
.event-stage-step input,
.event-stage-step select,
.event-stage-step-inspector input {
  width: 100%;
  margin-top: 4px;
  padding: 6px 7px;
  color: #28251f;
  border: 1px solid #807c74;
  border-radius: 3px;
  background: #fffdf6;
}
.event-stage-track-workbench { margin: 0 18px; border: 1px solid #7e796f; border-top: 0; background: #e7e3d9; box-shadow: 3px 3px 0 #aaa59a; }
.event-stage-track-primary, .event-stage-track-musical { display: grid; gap: 8px; padding: 10px 12px; }
.event-stage-track-primary { grid-template-columns: minmax(140px, 1.4fr) minmax(150px, 1.4fr) repeat(2, minmax(80px, .6fr)); border-bottom: 1px solid #a8a399; }
.event-stage-track-musical { grid-template-columns: repeat(5, minmax(85px, 1fr)); background: #dcd8ce; }
.event-stage-track-workbench small { display: block; margin-top: 3px; color: #756f65; font-weight: 400; }
.event-stage-advanced { border-top: 1px solid #aaa59b; background: #d2cdc2; }
.event-stage-advanced summary { padding: 8px 12px; color: #4b4565; cursor: pointer; font-size: 8px; font-weight: 700; }
.event-stage-advanced summary span { margin-left: 6px; color: #766f65; font-weight: 400; }
.event-stage-advanced > div { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 8px; padding: 0 12px 11px; }
.stage-enable { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #8b867d; border-radius: 4px; background: #f8f5ec; }
.event-stage-global .stage-enable { color: #4f4a42; border-color: #8b867d; background: #f8f5ec; }
.stage-enable input { width: auto; margin: 0; accent-color: #2b7f6b; }
.event-stage-strip-heading { display: flex; justify-content: space-between; gap: 12px; padding: 15px 18px 8px; color: #3c3932; }
.event-stage-strip-heading span { color: #706a60; font-size: 8px; }
.event-stage-rack-scroll { overflow-x: auto; margin: 0 18px; padding-bottom: 4px; scrollbar-color: #756c96 #aaa59b; }
.event-stage-strip { display: grid; grid-template-columns: repeat(8, minmax(92px, 1fr)); gap: 7px; min-width: 820px; padding: 11px; border: 1px solid #7e7a72; border-radius: 7px; background: linear-gradient(180deg, #dfdcd3, #cfcbc1); box-shadow: inset 1px 1px #fff, 3px 3px 0 #aaa69d; }
.event-stage-step { overflow: hidden; min-width: 0; border: 1px solid #969188; border-radius: 6px; color: #3c3933; background: linear-gradient(180deg, #f8f5ed, #e8e4da); box-shadow: inset 1px 1px #fff; }
.event-stage-step.selected { border-color: #9b86d0; box-shadow: 0 0 0 1px rgba(155,134,208,.45); }
.event-stage-step.current { border-color: #58a68e; box-shadow: inset 0 0 0 1px #97cfbd, 0 0 0 1px rgba(88,166,142,.25); }
.event-stage-step.unused { opacity: .56; }
.event-stage-select { display: grid; grid-template-columns: 1fr auto auto; gap: 5px; align-items: center; width: 100%; min-height: 31px; padding: 5px 7px; color: #615c54; border: 0; border-bottom: 1px solid #aaa49a; background: #e3dfd5; text-align: left; }
.event-stage-select span { font-size: 6px; letter-spacing: .08em; }
.event-stage-select b { font: 11px "SFMono-Regular", Consolas, monospace; }
.event-stage-select i { width: 8px; height: 8px; border: 1px solid #868179; border-radius: 50%; background: #c4c0b7; box-shadow: inset 1px 1px #eee; }
.event-stage-step.current .event-stage-select i { border-color: #40866f; background: #58ad91; box-shadow: 0 0 0 2px #d5eee6; }
.event-stage-step.selected .event-stage-select { color: #493a68; background: #dcd0eb; }
.event-stage-fader-wrap { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 5px; min-height: 206px; padding: 8px 3px 5px; }
.event-stage-fader-wrap output:first-child { display: grid; place-items: center; width: calc(100% - 8px); min-height: 25px; color: #49649a; border: 1px solid #aaa49a; border-radius: 4px; background: #fffdf6; box-shadow: inset 1px 1px #fff; font: 9px "SFMono-Regular", Consolas, monospace; }
.event-stage-fader-wrap output:last-child { color: #6c665e; font: 8px "SFMono-Regular", Consolas, monospace; }
.event-stage-step input.event-stage-pitch-fader { writing-mode: vertical-lr; direction: rtl; width: 30px; height: 145px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: #5c73aa; }
.event-stage-compact-field { display: block; margin: 6px; }
.event-stage-compact-field > span { display: block; margin-bottom: 3px; color: #68625a; font-size: 6px; letter-spacing: .05em; }
.event-stage-step select { margin: 0; padding: 5px 4px; color: #34312d; border-color: #aaa49a; background: #fffdf6; font-size: 8px; }
.event-stage-step footer { display: flex; justify-content: space-between; padding: 6px 7px; color: #68625a; border-top: 1px solid #b8b2a8; background: #dedad0; font: 7px "SFMono-Regular", Consolas, monospace; }
.event-stage-step-inspector { margin: 12px 18px 18px; border: 1px solid #777268; border-radius: 5px; background: #eeeae1; box-shadow: inset 1px 1px #fff, 3px 3px 0 #aaa59b; }
.event-stage-step-inspector > section { display: grid; grid-template-columns: minmax(220px, .8fr) 2fr; }
.event-stage-inspector-title { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; color: #493a68; border-right: 1px solid #a391ba; background: #ddd2ec; }
.event-stage-inspector-title > span small, .event-stage-inspector-title > span strong { display: block; }
.event-stage-inspector-title > span small { color: #725c91; font-size: 6px; }
.event-stage-inspector-title > span strong { margin-top: 4px; font: 16px "SFMono-Regular", Consolas, monospace; }
.event-stage-inspector-title p { grid-column: 1 / -1; margin: 3px 0 0; color: #665876; font-size: 8px; }
.event-stage-inspector-fields { display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)) minmax(130px, 1.1fr); gap: 8px; padding: 11px; }
.event-stage-inspector-fields small { display: block; margin-top: 3px; color: #7c766c; font-size: 7px; font-weight: 400; }
.event-stage-inspector-fields fieldset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 6px 8px; border: 1px solid #a6a097; }
.event-stage-inspector-fields fieldset label { display: flex; align-items: center; gap: 4px; }
.event-stage-inspector-fields fieldset input { width: auto; margin: 0; accent-color: #2b7f6b; }

@media (max-width: 1100px) {
  .event-stage-track-tabs { grid-template-columns: 1fr 1fr; }
  .event-stage-scale-editor { grid-template-columns: auto repeat(6, minmax(38px, 1fr)); }
  .event-stage-scale-editor > span { grid-row: 1 / 3; }
  .event-stage-screen-readouts { grid-template-columns: repeat(2, minmax(70px, 1fr)); }
  .event-stage-track-musical { grid-template-columns: repeat(5, minmax(70px, 1fr)); }
  .event-stage-step-inspector > section { grid-template-columns: 1fr; }
  .event-stage-inspector-fields { grid-template-columns: repeat(4, minmax(100px, 1fr)); }
}

@media (max-width: 700px) {
  .event-stage-header { grid-template-columns: 1fr; }
  .event-stage-actions { justify-content: flex-start; }
  .event-stage-clock-source { align-items: flex-start; }
  .event-stage-clock-source > strong { display: none; }
  .event-stage-console { margin: 12px 10px 0; padding: 8px; }
  .event-stage-status { grid-template-columns: 1fr; }
  .event-stage-screen-primary { padding: 0 0 8px; border: 0; border-bottom: 1px solid #b6d0c8; }
  .event-stage-screen-sequence { overflow-x: auto; grid-template-columns: repeat(8, minmax(48px, 1fr)); }
  .event-stage-global { grid-template-columns: 1fr 1fr; }
  .event-stage-global .stage-enable { grid-column: 1 / -1; }
  .event-stage-scale-editor { grid-template-columns: repeat(6, 1fr); }
  .event-stage-scale-editor > span { grid-column: 1 / -1; grid-row: auto; }
  .event-stage-track-workbench { margin: 0 10px; }
  .event-stage-track-primary, .event-stage-track-musical { grid-template-columns: 1fr 1fr; }
  .event-stage-advanced > div { grid-template-columns: 1fr; }
  .event-stage-strip-heading { flex-direction: column; }
  .event-stage-rack-scroll { margin: 0 10px; }
  .event-stage-step-inspector { margin: 12px 10px 16px; }
  .event-stage-inspector-fields { grid-template-columns: 1fr 1fr; }
}

.global-loop-section {
  margin: 12px 18px 16px;
  border: 1px solid #777268;
  border-radius: 6px;
  background: #e9e5dc;
  box-shadow: inset 1px 1px #fff, 3px 3px 0 #aaa59b;
}

.cv-preset-section {
  margin: 12px 18px 16px;
  overflow: hidden;
  border: 1px solid #6d6a62;
  border-radius: 6px;
  background: #eeeae0;
  box-shadow: inset 1px 1px #fff, 3px 3px 0 #aaa59b;
}
.cv-preset-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid #aaa49a;
  background: #d8e5df;
}
.cv-preset-heading .eyebrow { margin: 0 0 3px; color: #28705a; }
.cv-preset-heading strong,
.cv-preset-heading span { display: block; }
.cv-preset-heading strong { color: #294f44; font-size: 12px; }
.cv-preset-heading span { margin-top: 3px; color: #557168; font-size: 8px; }
.cv-preset-explainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-bottom: 1px solid #bbb5aa;
  background: #bbb5aa;
}
.cv-preset-explainer span {
  padding: 8px 12px;
  color: #5d5850;
  background: #f7f3e9;
  font-size: 8px;
  line-height: 1.45;
}
.cv-preset-explainer b { color: #3d685b; }
.cv-preset-flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid #bbb5aa;
  color: #625d55;
  background: #e3ded3;
  font-size: 8px;
}
.cv-preset-flash.good b { color: #217154; }
.cv-preset-flash.warn { color: #7c3f34; background: #f1dcd5; }
.cv-preset-flash small { font-size: 7px; }
.cv-preset-progress {
  display: grid;
  grid-template-columns: minmax(190px, auto) 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #b2aa9f;
  color: #4d4943;
  background: #eee4c7;
  font-size: 8px;
}
.cv-preset-progress i {
  height: 8px;
  overflow: hidden;
  border: 1px solid #8b8377;
  border-radius: 3px;
  background: #cfc7b8;
}
.cv-preset-progress i b {
  display: block;
  height: 100%;
  width: 0;
  background: #4f719d;
  transition: width .18s linear;
}
.cv-preset-bank {
  display: grid;
  grid-template-columns: repeat(4, minmax(155px, 1fr));
  gap: 8px;
  padding: 10px;
}
.cv-preset-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #a59e92;
  border-radius: 5px;
  background: #fffaf0;
  box-shadow: inset 1px 1px #fff;
}
.cv-preset-card.valid {
  border-color: #55806f;
  box-shadow: inset 3px 0 #4a9378, inset 1px 1px #fff;
}
.cv-preset-card.working {
  outline: 2px solid rgb(73 105 167 / 45%);
  outline-offset: -2px;
}
.cv-preset-card header span {
  display: block;
  color: #6d5290;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .09em;
}
.cv-preset-card header strong {
  display: block;
  min-height: 24px;
  margin-top: 3px;
  color: #35312c;
  font-size: 11px;
  line-height: 1.15;
}
.cv-preset-card-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.cv-preset-card-meta span {
  min-width: 0;
  padding: 5px;
  border: 1px solid #c6bfb2;
  color: #6a6359;
  background: #eee8dc;
  font-size: 6px;
  line-height: 1.25;
}
.cv-preset-card-meta b {
  display: block;
  overflow: hidden;
  color: #3e5f56;
  font-size: 8px;
  text-overflow: ellipsis;
}
.cv-preset-card > small { min-height: 20px; color: #716a60; font-size: 7px; }
.cv-preset-card > div:last-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.cv-preset-card > div:last-child .danger-text { grid-column: 1 / -1; }
.cv-preset-name {
  display: grid;
  grid-template-columns: auto minmax(180px, 360px);
  gap: 10px;
  align-items: center;
  padding: 0 10px 10px;
  color: #514d46;
  font-size: 8px;
}
.cv-preset-name .text-input { min-height: 32px; }
.global-loop-heading {
  display: grid;
  grid-template-columns: minmax(210px, .65fr) 1.35fr;
  gap: 16px;
  align-items: center;
  padding: 11px 13px;
  border-bottom: 1px solid #aaa49a;
  background: #dcd5e9;
}
.global-loop-heading strong,
.global-loop-heading span { display: block; }
.global-loop-heading strong { color: #493a68; font-size: 12px; }
.global-loop-heading span { margin-top: 2px; color: #71647e; font-size: 8px; }
.global-loop-heading p { margin: 0; color: #5d5861; font-size: 8px; line-height: 1.45; }
.global-loop-heading kbd { padding: 2px 4px; border: 1px solid #918b82; border-radius: 3px; color: #3b3732; background: #f8f5ec; box-shadow: 1px 1px #aaa49a; font: 7px "SFMono-Regular", Consolas, monospace; }
.global-loop-bank { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; }
.global-loop-card { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; align-items: center; padding: 10px; border: 1px solid #aaa28e; border-radius: 5px; background: #fffaf0; }
.global-loop-card.selected { outline: 2px solid rgba(89, 112, 169, .38); outline-offset: -2px; }
.global-loop-card.recording { border-color: #a84c45; box-shadow: inset 3px 0 #c45b52; }
.global-loop-card.playing { border-color: #3b8369; box-shadow: inset 3px 0 #4c9d7f; }
.global-loop-card > div span { display: block; color: #725c91; font-size: 7px; font-weight: 700; letter-spacing: .08em; }
.global-loop-card > div strong { display: block; margin-top: 3px; color: #38332d; font-size: 10px; }
.global-loop-card > i { grid-column: 1 / -1; display: block; height: 5px; overflow: hidden; border: 1px solid #aaa49a; border-radius: 3px; background: #cbc5b8; }
.global-loop-card > i b { display: block; height: 100%; background: #5970a9; }
.global-loop-card.recording > i b { background: #c45b52; }
.global-loop-card.playing > i b { background: #4c9d7f; }
.global-loop-card > small { color: #69635a; font-size: 7px; }
.global-loop-warning { grid-column: 1 / -1; padding: 5px 6px; border: 1px solid #b76958; border-radius: 3px; color: #873a31; background: #f5d8cf; font-size: 7px; font-style: normal; line-height: 1.35; }
.global-loop-card > button { grid-column: 2; grid-row: 1; min-width: 116px; }
.loop-card.global-owned { border-color: #6d5a91; box-shadow: inset 3px 0 #7256a5, 1px 1px 0 #b8afc8; }
.loop-card.global-owned .loop-meta span:last-child { color: #62448e; font-weight: 750; }

@media (max-width: 850px) {
  .cv-preset-bank { grid-template-columns: repeat(2, 1fr); }
  .global-loop-heading { grid-template-columns: 1fr; gap: 7px; }
  .global-loop-bank { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .cv-preset-section { margin: 10px; }
  .cv-preset-explainer, .cv-preset-bank { grid-template-columns: 1fr; }
  .cv-preset-progress, .cv-preset-name { grid-template-columns: 1fr; }
  .global-loop-section { margin: 10px; }
  .global-loop-card { grid-template-columns: 1fr; }
  .global-loop-card > button { grid-column: 1; grid-row: auto; }
}