:root {
  color-scheme: dark;
  --studio-bg: #141519;
  --studio-bar: #101115;
  --studio-panel: #1c1e23;
  --studio-panel-2: #22242a;
  --studio-panel-3: #282b31;
  --studio-inset: #111216;
  --studio-border: #363940;
  --studio-border-soft: #2b2e34;
  --studio-text: #e7e6e2;
  --studio-muted: #96989f;
  --studio-dim: #676a72;
  --studio-green: #1cb420;
  --studio-green-deep: #0d2b12;
  --studio-purple: #a48bd7;
  --studio-purple-deep: #352c49;
  --studio-yellow: #f2b84b;
  --studio-red: #e01826;
  --studio-blue: #72a9ce;
  --studio-radius: 5px;

  --bg: var(--studio-bg);
  --panel: var(--studio-panel);
  --panel-2: var(--studio-panel-2);
  --line: var(--studio-border);
  --text: var(--studio-text);
  --muted: var(--studio-muted);
  --accent: var(--studio-green);
  --accent-2: var(--studio-purple);
  --good: var(--studio-green);
  --warn: var(--studio-yellow);
  --bad: var(--studio-red);
  --shadow: none;
}

html[data-theme="normal"] {
  color-scheme: light;
  --studio-bg: #e7e8e3;
  --studio-bar: #f4f4f0;
  --studio-panel: #f8f8f5;
  --studio-panel-2: #efefeb;
  --studio-panel-3: #e5e6e1;
  --studio-inset: #fff;
  --studio-border: #bfc1bb;
  --studio-border-soft: #d4d5cf;
  --studio-text: #202126;
  --studio-muted: #64676d;
  --studio-dim: #898c91;
  --studio-green: #168f1b;
  --studio-green-deep: #dcefdc;
  --studio-purple: #7455a8;
  --studio-purple-deep: #e8e1f2;
  --studio-yellow: #936000;
  --studio-red: #b41627;
  --studio-blue: #356f97;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  background: var(--studio-bg);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--studio-text);
  background: var(--studio-bg);
  background-image: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0;
}

body::before { display: none; }

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

button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--studio-purple);
  outline-offset: 2px;
}

::selection {
  color: #111216;
  background: var(--studio-green);
}

/* Application chrome */
.menu-bar {
  position: sticky;
  z-index: 30;
  top: 0;
  min-height: 46px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 18px;
  color: var(--studio-muted);
  border: 0;
  border-bottom: 1px solid #090a0c;
  background: var(--studio-bar);
  box-shadow: none;
}

.menu-bar strong {
  min-width: 156px;
  display: flex;
  align-items: center;
  margin-right: 6px;
  color: var(--studio-text);
  font-size: 15px;
  font-weight: 680;
  letter-spacing: -.02em;
}

.menu-bar strong::first-letter { color: var(--studio-green); }

.menu-bar a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--studio-muted);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 560;
  text-decoration: none;
}

.menu-bar a:hover {
  color: var(--studio-text);
  background: #181a1f;
}

.menu-bar a.active {
  color: var(--studio-text);
  background: #1b1d22;
}

.menu-bar a.active::after {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  content: "";
  background: var(--studio-green);
}

html[data-ui="calm"] .menu-bar { display: none; }
html[data-ui="calm"] .topbar { top: 0; }

.topbar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  border: 0;
  border-bottom: 1px solid var(--studio-border);
  background: #191b20;
  box-shadow: none;
}

.topbar::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg,
    rgb(12 14 20 / 72%) 0%,
    rgb(12 14 20 / 44%) 34%,
    rgb(12 14 20 / 24%) 55%,
    rgb(12 14 20 / 64%) 100%);
}

.cloud-banner {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #263c6a;
  background: #4c79d4;
  image-rendering: pixelated;
  opacity: .72;
  pointer-events: none;
}

.brand-lockup,
.connection-cluster {
  position: relative;
  z-index: 2;
}

.brand-lockup { display: flex; align-items: center; }

.brand-ascii {
  margin: 0;
  color: #fff;
  font: 800 8px/1.04 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  letter-spacing: 0;
  white-space: pre;
  text-shadow: 0 0 8px rgb(28 180 32 / 30%);
}

.connection-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid #363940;
  border-radius: 4px;
  background: #111216;
}

.theme-switch button {
  min-height: 26px;
  padding: 3px 8px;
  color: #858890;
  border: 0;
  border-radius: 2px;
  background: transparent;
  font-size: 9px;
  font-weight: 680;
  cursor: pointer;
}

.theme-switch button:hover { color: #fff; }
.theme-switch button[aria-pressed="true"] {
  color: #111216;
  background: #f2f2ee;
}

.connection-state {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: var(--studio-muted);
  border: 1px solid var(--studio-border-soft);
  border-radius: 4px;
  background: #15171b;
  font-size: 11px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: #656870;
  box-shadow: none;
}

.connection-state.connected { color: var(--studio-green); }
.connection-state.connected .status-dot { background: var(--studio-green); box-shadow: 0 0 8px rgb(28 180 32 / 48%); }

.support-banner {
  margin: 0;
  padding: 9px 20px;
  color: #17130c;
  border: 0;
  border-bottom: 1px solid #6f5e32;
  background: var(--studio-yellow);
  font-size: 11px;
}

/* Quiet onboarding strip */
.welcome-panel {
  width: min(1700px, calc(100% - 28px));
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(440px, 1.15fr) auto;
  align-items: center;
  gap: 16px;
  margin: 14px auto 0;
  padding: 10px 12px;
  overflow: hidden;
  color: var(--studio-text);
  border: 1px solid var(--studio-border);
  border-radius: var(--studio-radius);
  background: var(--studio-panel);
  box-shadow: none;
}

.welcome-panel::before, .welcome-panel::after { display: none; }

.welcome-copy { min-width: 0; display: flex; align-items: center; gap: 10px; }

.welcome-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--studio-green);
  border: 1px solid #1d6d28;
  border-radius: 3px;
  background: #102817;
  font-size: 13px;
}

.welcome-copy div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.welcome-copy strong { flex: none; color: var(--studio-text); font-size: 12px; letter-spacing: 0; }
.welcome-copy span { min-width: 0; margin: 0; color: var(--studio-muted); font-size: 11px; }

.quick-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-steps li {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: var(--studio-muted);
  border: 0;
  border-left: 1px solid var(--studio-border);
  border-radius: 0;
  background: transparent;
  font-size: 10px;
}

.quick-steps b {
  width: auto;
  height: auto;
  display: inline;
  color: var(--studio-purple);
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 650 10px "SFMono-Regular", Consolas, monospace;
}

.welcome-toggle {
  justify-self: end;
  color: var(--studio-purple);
  white-space: nowrap;
}

html[data-ui="classic"] .welcome-toggle { display: none; }

html[data-ui="calm"] .welcome-panel.collapsed {
  min-height: 34px;
  grid-template-columns: auto;
  justify-content: start;
  margin-top: 8px;
  padding: 4px 6px;
  border-color: var(--studio-border-soft);
  background: #181a1e;
}

html[data-ui="calm"] .welcome-panel.collapsed .welcome-copy,
html[data-ui="calm"] .welcome-panel.collapsed .quick-steps { display: none; }

html[data-ui="calm"] .welcome-panel.collapsed .welcome-toggle {
  justify-self: start;
  color: var(--studio-muted);
}

/* Controls */
.eyebrow {
  margin: 0 0 4px;
  color: var(--studio-purple);
  font-size: 9px;
  font-weight: 680;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.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 {
  min-height: 32px;
  padding: 6px 10px;
  color: var(--studio-text);
  border: 1px solid #454850;
  border-radius: 4px;
  background: #292c32;
  box-shadow: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.listen-route {
  min-height: 32px;
  padding: 6px 11px;
  color: var(--studio-green);
  border: 1px solid #1d6d28;
  border-radius: 4px;
  background: #102817;
  box-shadow: none;
  font-size: 10px;
  font-weight: 750;
}
.listen-route:hover:not(:disabled), .listen-route.active {
  color: #111;
  border-color: var(--studio-green);
  background: var(--studio-green);
}

.button:hover:not(:disabled), .icon-button:hover:not(:disabled),
.loop-card-actions button:hover:not(:disabled), .loop-trim-actions button:hover:not(:disabled) {
  color: #fff;
  border-color: #5b5f69;
  background: #33363d;
}

.button.primary {
  color: #101512;
  border-color: var(--studio-green);
  background: var(--studio-green);
  box-shadow: none;
}

.button.primary:hover:not(:disabled) { color: #071108; background: #2fca38; }
.button.secondary { color: #e4ddf0; border-color: #5b4e76; background: var(--studio-purple-deep); }
.button.ghost { color: var(--studio-muted); border-color: var(--studio-border); background: #1a1c21; }
.button.panic, .button.danger-text { color: var(--studio-red); border-color: #7b1b25; background: #2b1519; }
.button.page-focus { color: var(--studio-yellow); border-color: #705424; background: #2d2416; }
.button:disabled { opacity: .32; cursor: default; }
.button.compact { min-height: 29px; padding: 5px 9px; }
.icon-button { width: 32px; min-width: 32px; padding: 0; display: grid; place-items: center; font-size: 15px; }
.text-button { min-height: 24px; padding: 3px 6px; color: var(--studio-muted); border-color: transparent; background: transparent; }

.text-input, select, input[type="number"] {
  min-height: 32px;
  padding: 5px 8px;
  color: var(--studio-text);
  border: 1px solid #44474f;
  border-radius: 3px;
  background: var(--studio-inset);
  box-shadow: none;
}

.text-input:focus, select:focus, input[type="number"]:focus {
  border-color: var(--studio-purple);
  box-shadow: 0 0 0 1px var(--studio-purple);
  outline: 0;
}

input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--studio-green); }
input[type="range"] { min-height: 18px; }

/* Main workspace */
.workspace {
  width: min(1700px, calc(100% - 28px));
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 10px auto 22px;
}

html[data-ui="calm"] .workspace { grid-template-columns: minmax(0, 1fr); }
html[data-ui="calm"] .workspace.scene-library-open {
  grid-template-columns: 250px minmax(0, 1fr);
}

.panel {
  min-width: 0;
  color: var(--studio-text);
  border: 1px solid var(--studio-border);
  border-radius: var(--studio-radius);
  background: var(--studio-panel);
  box-shadow: none;
}

.slots-panel {
  position: sticky;
  top: 56px;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  background: #191b1f;
}

.panel-heading, .editor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.slots-panel h2, .editor-heading h2 {
  margin: 0;
  color: var(--studio-text);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.panel-copy, .editor-heading p { color: var(--studio-muted); font-size: 10px; line-height: 1.45; }
.capacity-note { border-color: var(--studio-border-soft); }
.capacity-note summary { color: var(--studio-purple); font-size: 10px; }
.capacity-note p { color: var(--studio-muted); font-size: 10px; }

.slot-list { display: grid; gap: 5px; }

.slot-card {
  min-height: 96px;
  padding: 7px;
  color: var(--studio-text);
  border: 1px solid var(--studio-border-soft);
  border-radius: 3px;
  background: #202227;
  box-shadow: none;
}

.slot-card:hover { border-color: #51545d; background: #25272d; }
.slot-card.selected { border-color: #6b5b8c; background: #282331; box-shadow: inset 2px 0 var(--studio-purple); }

.slot-number {
  color: var(--studio-text);
  border-color: #50535b;
  border-radius: 3px;
  background: #2d3036;
}

.slot-card.active .slot-number { color: #111612; border-color: var(--studio-green); background: var(--studio-green); }
.slot-meta, .slot-state { color: var(--studio-dim); }
.slot-state.valid { color: var(--studio-green); }
.slot-layer { border-left-color: var(--studio-border); }
.slot-layer.stored { border-left-color: var(--studio-green); }
.slot-layer b { color: var(--studio-muted); }
.slot-layer small { color: var(--studio-dim); }
.slot-card.working { border-color: var(--studio-purple); }
.field-label { color: var(--studio-muted); font-size: 10px; }
.slot-note { color: var(--studio-muted); border-color: var(--studio-border-soft); }
.note-key { color: var(--studio-purple); }
.slot-actions { gap: 6px; }

.editor-panel { overflow: hidden; background: var(--studio-panel); }

.editor-heading {
  min-height: 74px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--studio-border);
  background: #202228;
}

.editor-heading h2 { font-size: 19px; }
.editor-heading p { margin: 4px 0 0; }
.editor-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.scene-status-button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  color: var(--studio-muted);
  border: 1px solid var(--studio-border);
  border-radius: 4px;
  background: #1a1c21;
  cursor: pointer;
}

.scene-status-button:hover { color: var(--studio-text); border-color: #5b5f69; }
.scene-status-button span {
  color: var(--studio-purple);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.scene-status-button strong { color: inherit; font-size: 10px; font-weight: 600; }
.editor-actions [hidden] { display: none !important; }

.workspace-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding: 0 8px;
  border-bottom: 1px solid var(--studio-border);
  background: #17191d;
}

.workspace-nav button {
  position: relative;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 8px;
  color: var(--studio-muted);
  border: 0;
  border-right: 1px solid #24272c;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
}

.workspace-nav button:first-child { border-left: 1px solid #24272c; }
.workspace-nav button:hover { color: var(--studio-text); background: #202228; }
.workspace-nav button strong { color: inherit; font-size: 10px; font-weight: 650; }
.workspace-nav button small { display: block; margin-top: 2px; color: var(--studio-dim); font-size: 8px; }

.workspace-nav button.active {
  color: var(--studio-text);
  border-color: #2b2e34;
  background: #24262c;
  box-shadow: none;
}

.workspace-nav button.active::after {
  position: absolute;
  right: 8px;
  bottom: -1px;
  left: 8px;
  height: 2px;
  content: "";
  background: var(--studio-purple);
}

.workspace-nav button.active small { color: var(--studio-muted); }

.workspace-nav-icon, .feature-icon {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--studio-muted);
  border: 1px solid #474a52;
  border-radius: 3px;
  background: #191b20;
  box-shadow: none;
  font: 650 8px "SFMono-Regular", Consolas, monospace;
}

.workspace-nav button.active .workspace-nav-icon { color: var(--studio-purple); border-color: #6e5e90; background: #2c2638; }

.calm-copy { display: none; }
html[data-ui="calm"] .classic-copy { display: none; }
html[data-ui="calm"] .calm-copy { display: block; }

/* Work pages and module headers */
.feature-window, .mapping-workspace,
.scene-morph-panel, .clock-panel, .system-health-panel,
.event-stage-panel, .pulse-field-panel, .preset-bank-panel {
  scroll-margin-top: 54px;
  margin: 10px;
  overflow: hidden;
  color: var(--studio-text);
  border: 1px solid var(--studio-border);
  border-radius: 4px;
  background: #1a1c21;
  background-image: none;
  box-shadow: none;
}

.mapping-titlebar, .morph-header, .clock-header,
.system-health-header, .event-stage-header, .pulse-field-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: var(--studio-text);
  border-bottom: 1px solid var(--studio-border);
  background: #25272d;
  background-image: none;
  box-shadow: none;
}

.mapping-titlebar h3, .morph-header h3, .clock-header h3,
.system-health-header h3, .event-stage-header h3, .pulse-field-header h3 {
  margin: 0;
  color: var(--studio-text);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.mapping-titlebar p:not(.eyebrow), .morph-header p:not(.eyebrow),
.clock-header p:not(.eyebrow), .system-health-header p:not(.eyebrow),
.event-stage-header p:last-child, .pulse-field-header p:last-child {
  margin: 3px 0 0;
  color: var(--studio-muted);
  font-size: 10px;
}

.mapping-view-nav, .mapping-target-summary, .loop-view-nav,
.event-stage-view-nav { display: none; }
[data-mapping-view-panel][hidden] { display: none !important; }
.mapping-view-nav[hidden], .mapping-target-summary[hidden] { display: none !important; }
[data-loop-view-panel][hidden], .loop-view-nav[hidden] { display: none !important; }
[data-event-stage-view-panel][hidden], .event-stage-view-nav[hidden] { display: none !important; }

html[data-ui="calm"] .mapping-titlebar { justify-content: flex-start; }
html[data-ui="calm"] .mapping-titlebar > div:first-child { margin-right: auto; }

html[data-ui="calm"] .mapping-target-summary {
  min-width: 136px;
  min-height: 38px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 3px 8px;
  padding: 6px 9px;
  color: var(--studio-text);
  border: 1px solid #5b4e76;
  border-radius: 4px;
  background: #211d2a;
  text-align: left;
  cursor: pointer;
}

html[data-ui="calm"] .mapping-target-summary span {
  grid-row: 1 / 3;
  color: var(--studio-purple);
  font: 750 8px "SFMono-Regular", Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html[data-ui="calm"] .mapping-target-summary strong { font-size: 10px; }
html[data-ui="calm"] .mapping-target-summary:hover { border-color: var(--studio-purple); background: #292231; }

html[data-ui="calm"] .mapping-view-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--studio-border);
  background: #17191d;
}

html[data-ui="calm"] .mapping-view-nav button {
  min-height: 48px;
  display: grid;
  grid-template-columns: 28px auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: start;
  column-gap: 8px;
  padding: 7px 14px;
  color: var(--studio-muted);
  border: 0;
  border-right: 1px solid var(--studio-border-soft);
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

html[data-ui="calm"] .mapping-view-nav button > span {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--studio-dim);
  font: 700 9px "SFMono-Regular", Consolas, monospace;
}

html[data-ui="calm"] .mapping-view-nav button strong { font-size: 10px; }
html[data-ui="calm"] .mapping-view-nav button small { color: var(--studio-dim); font-size: 8px; }
html[data-ui="calm"] .mapping-view-nav button:hover { color: var(--studio-text); background: #202228; }
html[data-ui="calm"] .mapping-view-nav button.active {
  color: var(--studio-text);
  background: #25272d;
  box-shadow: inset 0 -2px var(--studio-purple);
}
html[data-ui="calm"] .mapping-view-nav button.active > span { color: var(--studio-purple); }
html[data-ui="calm"] .mapping-view-nav button.active small { color: var(--studio-muted); }

html[data-ui="calm"] .target-profile-panel {
  border-bottom: 0;
  background: #1a1c21;
}

html[data-ui="calm"] .lane-workspace { min-width: 0; }
html[data-ui="calm"] .lane-workspace .route-legend { display: none; }

.target-profile-panel, .midi-discovery-panel, .target-tools, .constellation-panel, .terrain-panel,
.page-strip, .page-tools, .route-legend, .lane-list,
.calibration-grid, .clock-config, .loop-matrix,
.stress-console, .stress-results, .event-stage-panel,
.event-stage-console, .event-stage-track-workbench,
.event-stage-rack-scroll, .event-stage-step-inspector,
.morph-endpoints, .morph-route-controls, .morph-route-inspector,
.morph-lane-compare, .pulse-cells {
  color: var(--studio-text);
  border-color: var(--studio-border);
  border-radius: 3px;
  background: var(--studio-panel-2);
  background-image: none;
  box-shadow: none;
}

.target-profile-head, .midi-discovery-heading, .arcc-scene-tools, .target-tool-tabs,
.page-strip, .page-tools, .route-legend, .monitor-toolbar,
.event-stage-clock-source, .event-stage-global,
.event-stage-track-primary, .event-stage-track-musical,
.event-stage-advanced, .event-stage-strip-heading,
.pulse-track-tabs, .pulse-global, .pulse-cells-heading {
  color: var(--studio-text);
  border-color: var(--studio-border);
  background: #202228;
  background-image: none;
  box-shadow: none;
}

.target-profile-head h4, .target-profile-head p:not(.eyebrow),
.target-profile-head > label, .target-profile-import,
.arcc-scene-tools strong, .arcc-scene-tools span,
.route-legend, .copy-control, .event-stage-global label,
.event-stage-track-workbench label, .event-stage-step label,
.event-stage-step-inspector label { color: var(--studio-muted); }

.target-tool-tabs button, .terrain-layer-tabs button, .page-tab,
.event-stage-track-tabs button, .pulse-track-tabs button {
  color: var(--studio-muted);
  border: 1px solid #41444c;
  border-radius: 3px;
  background: #202228;
  box-shadow: none;
}

.target-tool-tabs button:hover, .terrain-layer-tabs button:hover,
.page-tab:hover, .event-stage-track-tabs button:hover,
.pulse-track-tabs button:hover { color: var(--studio-text); background: #292c32; }

.target-tool-tabs button.active, .terrain-layer-tabs button.active,
.page-tab.active, .event-stage-track-tabs button.active,
.pulse-track-tabs button.active {
  color: var(--studio-text);
  border-color: #6b5b8a;
  background: var(--studio-purple-deep);
  box-shadow: inset 0 -2px var(--studio-purple);
}

.page-tab.active span { color: #d7c9ed; }

.target-tool-intro, .constellation-voice, .terrain-grid {
  color: var(--studio-text);
  border-color: var(--studio-border-soft);
  border-radius: 3px;
  background: #191b20;
  box-shadow: none;
}

.target-tool-intro strong, .constellation-voice strong { color: #c5b4e2; }
.target-tool-intro div > span, .constellation-voice span { color: var(--studio-muted); }
.verified-badge { color: var(--studio-green) !important; border-color: #1d6d28; background: #102817; }
.midi-discovery-panel { border-color: var(--studio-border); background: #191b20; }
.midi-discovery-heading h4 { color: var(--studio-text); }
.midi-discovery-heading p:not(.eyebrow) { color: var(--studio-muted); }
.midi-learn-steps span { color: var(--studio-muted); }
.midi-learn-steps b { color: #111; background: var(--studio-green); }
.midi-learn-target { color: var(--studio-muted); border-color: var(--studio-border-soft); }
.midi-learn-target strong { color: var(--studio-yellow); }
.midi-device-identity {
  color: var(--studio-muted);
  border-color: var(--studio-border-soft);
  background: #14161a;
}
.discovery-badge { color: var(--studio-green); border-color: #1d6d28; background: #102817; }
.discovery-badge.profile { color: #c5b4e2; border-color: #6b5b8a; background: #251d31; }
.discovery-badge.learn { color: var(--studio-yellow); border-color: #806326; background: #2d2615; }
.discovery-badge.muted { color: var(--studio-muted); border-color: #454850; background: #25282e; }
.midi-observed-controls { background: #17191d; }
.midi-observed-controls > p { color: var(--studio-muted); }
.midi-observed-control { border-color: var(--studio-border-soft); background: #202228; }
.midi-observed-control strong { color: var(--studio-text); }
.midi-observed-control b { color: var(--studio-green); }
.midi-observed-control span { color: var(--studio-muted); }

.terrain-cell {
  color: var(--studio-text);
  border-color: #454850;
  border-radius: 2px;
  background: #25282e;
  box-shadow: none;
}

.terrain-cell.selected { border-color: var(--studio-green); box-shadow: inset 0 0 0 1px var(--studio-green); }

/* Mapping lanes */
.lane-list { gap: 6px; padding: 8px; background: #14161a; }

.lane-card {
  overflow: hidden;
  color: var(--studio-text);
  border: 1px solid #3a3d44;
  border-radius: 3px;
  background: #1d1f24;
  box-shadow: none;
}

.lane-heading {
  min-height: 46px;
  color: var(--studio-text);
  border: 0;
  border-bottom: 1px solid transparent;
  background: #24262c;
  background-image: none;
  box-shadow: none;
}

.lane-heading:hover { background: #292c31; }
.lane-card[open] .lane-heading { border-bottom-color: var(--studio-border); background: #282a30; }
.lane-route-count, .lane-card[open] .lane-heading .lane-route-count { color: var(--studio-green); }
.lane-route-count.note-layer-warning { color: var(--studio-yellow); }

html[data-ui="calm"] .calm-lane-body { background: #15171b; }

html[data-ui="calm"] .lane-view-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(105px, 1fr));
  overflow-x: auto;
  border-bottom: 1px solid var(--studio-border);
  background: #17191d;
}

html[data-ui="calm"] .lane-view-nav button {
  min-height: 52px;
  display: grid;
  grid-template-columns: 24px auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: start;
  gap: 1px 7px;
  padding: 7px 9px;
  color: var(--studio-muted);
  border: 0;
  border-right: 1px solid var(--studio-border-soft);
  border-radius: 0;
  background: #191b20;
  text-align: left;
  cursor: pointer;
}

html[data-ui="calm"] .lane-view-nav button > span {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--studio-dim);
  font: 700 8px "SFMono-Regular", Consolas, monospace;
}

html[data-ui="calm"] .lane-view-nav button strong { font-size: 9px; }
html[data-ui="calm"] .lane-view-nav button small { color: var(--studio-dim); font-size: 7px; }
html[data-ui="calm"] .lane-view-nav button:hover { color: var(--studio-text); background: #22242a; }
html[data-ui="calm"] .lane-view-nav button.active {
  color: var(--studio-text);
  background: #282a30;
  box-shadow: inset 0 -2px var(--studio-purple);
}
html[data-ui="calm"] .lane-view-nav button.active > span { color: var(--studio-purple); }
html[data-ui="calm"] .lane-view-nav button.active small { color: var(--studio-muted); }

html[data-ui="calm"] .lane-view-panel {
  min-height: 160px;
  padding: 10px;
  background: #15171b;
}

html[data-ui="calm"] .lane-view-panel > .calibration-grid {
  margin-bottom: 9px;
  border: 1px solid var(--studio-border-soft);
  border-radius: 3px;
}

html[data-ui="calm"] .lane-view-panel .motion-settings-panel,
html[data-ui="calm"] .lane-view-panel > .event-extractor,
html[data-ui="calm"] .lane-view-panel > .event-destinations {
  margin: 0;
  border: 1px solid var(--studio-border-soft);
  border-radius: 3px;
}

html[data-ui="calm"] .lane-view-panel > .event-destinations { margin-top: 9px; }
html[data-ui="calm"] .focused-routes { grid-template-columns: 1fr; padding: 0; background: transparent; }
html[data-ui="calm"] .focused-routes .route-card { width: 100%; }
html[data-ui="calm"] .route-grid-destination { grid-template-columns: repeat(4, minmax(110px, 1fr)); }
html[data-ui="calm"] .route-grid-transform { grid-template-columns: repeat(5, minmax(100px, 1fr)); }
html[data-ui="calm"] .lane-view-panel .event-routes-grid { grid-template-columns: 1fr; }

html[data-ui="calm"] .add-destination {
  min-height: 66px;
  display: grid;
  grid-template-columns: 34px auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: start;
  gap: 2px 9px;
  padding: 10px 13px;
  color: var(--studio-text);
  border: 1px dashed #555862;
  border-radius: 4px;
  background: #1a1c21;
  text-align: left;
  cursor: pointer;
}

html[data-ui="calm"] .focused-routes .add-destination { width: 100%; }
html[data-ui="calm"] .add-destination > span {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--studio-green);
  font-size: 22px;
}
html[data-ui="calm"] .add-destination strong { font-size: 10px; }
html[data-ui="calm"] .add-destination small { color: var(--studio-muted); font-size: 8px; }
html[data-ui="calm"] .add-destination:hover { border-color: var(--studio-green); background: #19211b; }
html[data-ui="calm"] .event-add { width: calc(100% - 18px); margin: 0 9px 9px; }

html[data-ui="calm"] .lane-view-empty,
html[data-ui="calm"] .lane-view-intro {
  min-height: 84px;
  display: grid;
  place-content: center;
  gap: 4px;
  padding: 16px;
  color: var(--studio-muted);
  border: 1px dashed var(--studio-border);
  border-radius: 4px;
  text-align: center;
}
html[data-ui="calm"] .lane-view-empty strong,
html[data-ui="calm"] .lane-view-intro strong { color: var(--studio-text); font-size: 11px; }
html[data-ui="calm"] .lane-view-empty span,
html[data-ui="calm"] .lane-view-intro span { font-size: 9px; }
html[data-ui="calm"] .lane-monitor-view .motion-telemetry { margin-top: 9px; }

.motion-panel, .event-extractor, .event-destinations, .pitch-panel,
.routes-grid, .motion-telemetry, .event-live {
  color: var(--studio-text);
  border-color: var(--studio-border-soft);
  border-radius: 3px;
  background: #191b20;
  background-image: none;
  box-shadow: none;
}

.event-extractor, .event-destinations, .pitch-panel { margin-inline: 10px; }
.event-extractor.enabled, .pitch-panel.enabled { border-color: #1d6d28; box-shadow: inset 2px 0 var(--studio-green); }

.motion-heading strong, .event-heading strong,
.pitch-heading > div:first-child strong { color: var(--studio-text); }

.event-toggle, .event-extractor > p, .pitch-toggle,
.pitch-grid label, .pitch-scale > span, .pitch-scale label { color: var(--studio-muted); }

.route-card, .event-route-card, .loop-card,
.pulse-cell, .event-stage-step, .health-card,
.morph-route-value, .morph-lane-section, .morph-lane-value,
.morph-endpoint, .morph-endpoint.endpoint-b {
  color: var(--studio-text);
  border-color: #3d4047;
  border-radius: 3px;
  background: #22242a;
  background-image: none;
  box-shadow: none;
}

.route-card.route-off, .event-route-card.route-off { color: var(--studio-dim); border-color: #2a2d32; background: #17191d; }

.route-heading, .event-route-heading, .pulse-cell header,
.event-stage-select, .event-stage-step footer {
  color: var(--studio-text);
  border-color: var(--studio-border-soft);
  background: #27292f;
  background-image: none;
  box-shadow: none;
}

.route-heading strong { color: #c2b1df; }
.event-route-heading strong { color: var(--studio-green); }

.route-field, .route-number, .curve-preview,
.event-route-live span, .event-mask-grid label,
.event-route-note, .loop-meta, .loop-card > label { color: var(--studio-muted); }

.route-codec {
  color: #d4c7e7;
  border-color: #5e5178;
  border-radius: 2px;
  background: #302a3d;
}

/* Event Stage */
.event-stage-clock-source {
  margin: 10px 12px;
  padding: 8px 10px;
  border: 1px solid #205f29;
  border-radius: 3px;
  background: #0d2112;
}

.event-stage-clock-jack {
  width: 28px;
  height: 28px;
  color: #101612;
  border: 0;
  border-radius: 50%;
  background: var(--studio-green);
  box-shadow: inset 0 0 0 4px #1d6d28;
}

.event-stage-clock-source > strong {
  color: var(--studio-green);
  border-color: #1d6d28;
  border-radius: 2px;
  background: #0d2412;
}

.event-stage-screen-shell {
  color: #6bd06e;
  border: 1px solid #205f29;
  border-radius: 3px;
  background: #071008;
  box-shadow: inset 0 0 0 1px #0c2410;
}

.event-stage-screen-head { color: #3d8f43; border-color: #17451d; background: #060d07; }
.event-stage-screen-primary > strong { color: var(--studio-yellow); }
.event-stage-screen-primary.live > strong { color: var(--studio-green); }

.event-stage-screen-readouts span, .event-stage-screen-sequence > span {
  color: #4aa650;
  border-color: #1a4d20;
  border-radius: 2px;
  background: #09170b;
  box-shadow: none;
}

.event-stage-screen-sequence > span.current { color: #b5f0b7; border-color: var(--studio-green); background: #102817; }
.event-stage-screen-sequence i { background: #245d2a; box-shadow: none; }
.event-stage-screen-sequence > span.current i { background: var(--studio-green); box-shadow: none; }

.event-stage-scale-editor button {
  color: var(--studio-muted);
  border-color: #454850;
  border-radius: 2px;
  background: #1a1c21;
  box-shadow: none;
}

.event-stage-scale-editor button[aria-pressed="true"] {
  color: #111612;
  border-color: var(--studio-green);
  background: var(--studio-green);
  box-shadow: none;
}

.event-stage-track-workbench { border-top: 0; }
.stage-enable { color: var(--studio-muted); border-color: var(--studio-border); border-radius: 3px; background: #1b1d22; }

.event-stage-strip {
  gap: 5px;
  padding: 7px;
  border-color: var(--studio-border);
  border-radius: 3px;
  background: #14161a;
  background-image: none;
  box-shadow: none;
}

.event-stage-step { border-color: #3d4047; background: #22242a; }
.event-stage-step.current { border-color: var(--studio-green); box-shadow: inset 0 3px var(--studio-green); }
.event-stage-step.selected { border-color: var(--studio-purple); box-shadow: inset 0 3px var(--studio-purple); }
.event-stage-select i { border: 0; background: #555861; box-shadow: none; }
.event-stage-step.current .event-stage-select i { background: var(--studio-green); box-shadow: 0 0 7px rgb(28 180 32 / 48%); }

.event-stage-fader-wrap output:first-child {
  color: var(--studio-text);
  border-color: #41444c;
  border-radius: 2px;
  background: #14161a;
  box-shadow: none;
  font-family: "SFMono-Regular", Consolas, monospace;
}

.event-stage-step input.event-stage-pitch-fader { accent-color: var(--studio-purple); }

/* Focused Stage Engine workspace */
.event-stage-track-switcher { padding: 0 12px; }

html[data-ui="calm"] .event-stage-view-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--studio-border);
  background: #17191d;
}

html[data-ui="calm"] .event-stage-view-nav button {
  min-height: 48px;
  display: grid;
  grid-template-columns: 28px auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: start;
  column-gap: 8px;
  padding: 7px 12px;
  color: var(--studio-muted);
  border: 0;
  border-right: 1px solid var(--studio-border-soft);
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

html[data-ui="calm"] .event-stage-view-nav button > span {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--studio-dim);
  font: 700 9px "SFMono-Regular", Consolas, monospace;
}
html[data-ui="calm"] .event-stage-view-nav button strong { font-size: 10px; }
html[data-ui="calm"] .event-stage-view-nav button small { color: var(--studio-dim); font-size: 8px; }
html[data-ui="calm"] .event-stage-view-nav button:hover { color: var(--studio-text); background: #202228; }
html[data-ui="calm"] .event-stage-view-nav button.active {
  color: var(--studio-text);
  background: #25272d;
  box-shadow: inset 0 -2px var(--studio-purple);
}
html[data-ui="calm"] .event-stage-view-nav button.active > span { color: var(--studio-purple); }
html[data-ui="calm"] .event-stage-view-nav button.active small { color: var(--studio-muted); }

html[data-ui="calm"] .event-stage-track-switcher {
  padding: 8px 10px;
  border-bottom: 1px solid var(--studio-border);
  background: #14161a;
}
html[data-ui="calm"] .event-stage-track-tabs { gap: 5px; margin: 0; }
html[data-ui="calm"] .event-stage-track-tabs button { min-height: 40px; }

html[data-ui="calm"] .event-stage-view-panel { min-width: 0; background: #17191d; }
html[data-ui="calm"] .event-stage-performance-panel { padding-bottom: 10px; }
html[data-ui="calm"] .event-stage-performance-panel .event-stage-clock-source { margin: 10px; }
html[data-ui="calm"] .event-stage-performance-panel .event-stage-console {
  margin: 0 10px;
  padding: 9px;
  border-radius: 3px;
}
html[data-ui="calm"] .event-stage-performance-control {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 9px;
  align-items: center;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--studio-border);
}
html[data-ui="calm"] .event-stage-performance-control > span { display: grid; gap: 3px; }
html[data-ui="calm"] .event-stage-performance-control > span strong { color: var(--studio-text); font-size: 9px; }
html[data-ui="calm"] .event-stage-performance-control > span small { color: var(--studio-muted); font-size: 7px; }

html[data-ui="calm"] .event-stage-page-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: var(--studio-text);
  border-bottom: 1px solid var(--studio-border);
  background: #202228;
}
html[data-ui="calm"] .event-stage-page-heading strong { font-size: 10px; }
html[data-ui="calm"] .event-stage-page-heading span { color: var(--studio-muted); font-size: 8px; }

html[data-ui="calm"] .event-stage-scale-panel { padding-bottom: 10px; }
html[data-ui="calm"] .event-stage-scale-panel .event-stage-global {
  grid-template-columns: minmax(130px, .7fr) minmax(240px, 1.3fr);
  gap: 8px;
  margin: 10px;
  padding: 10px;
  border: 1px solid var(--studio-border-soft);
  border-radius: 3px;
  background: #191b20;
}

html[data-ui="calm"] .event-stage-track-panel { padding-bottom: 10px; }
html[data-ui="calm"] .event-stage-track-panel .event-stage-track-workbench {
  margin: 10px;
  border: 1px solid var(--studio-border-soft);
  border-radius: 3px;
  background: #191b20;
  box-shadow: none;
}
html[data-ui="calm"] .event-stage-track-panel .event-stage-track-primary,
html[data-ui="calm"] .event-stage-track-panel .event-stage-track-musical { background: #202228; }
html[data-ui="calm"] .event-stage-track-panel .event-stage-advanced[open] summary { display: none; }
html[data-ui="calm"] .event-stage-track-panel .event-stage-advanced > div { padding: 10px 12px; }

html[data-ui="calm"] .event-stage-pattern-panel { padding-bottom: 1px; }
html[data-ui="calm"] .event-stage-pattern-panel .event-stage-strip-heading { padding: 10px 12px 8px; }
html[data-ui="calm"] .event-stage-pattern-panel .event-stage-rack-scroll { margin: 0 10px; }
html[data-ui="calm"] .event-stage-pattern-panel .event-stage-step-inspector { margin: 10px; }

/* Morph, clock, loops and health */
.morph-endpoints { gap: 8px; padding: 10px; }
.morph-endpoint, .morph-endpoint.endpoint-b { background: #202228; }
.morph-endpoint span, .morph-route-controls > strong,
.morph-route-controls label, .morph-route-controls .morph-include { color: var(--studio-muted); }
.morph-endpoint select { color: var(--studio-text); background: var(--studio-inset); }
.morph-side span { color: var(--studio-purple); }

.clock-position strong {
  color: var(--studio-green);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.clock-position span, .clock-config label { color: var(--studio-muted); }

.clock-health, .health-summary, .morph-route-compare,
.morph-lane-compare, .morph-lane-section > div {
  border-color: var(--studio-border-soft);
  background: var(--studio-border-soft);
}

.clock-health span { background: #191b20; }
.clock-health small, .health-card small, .health-card span { color: var(--studio-dim); }
.clock-health strong, .health-card strong { color: var(--studio-text); }
.health-card.good strong { color: var(--studio-green); }
.health-card.warn strong { color: var(--studio-yellow); }
.health-card.bad strong { color: var(--studio-red); }

.health-verdict {
  color: var(--studio-text);
  border-color: var(--studio-border);
  border-radius: 3px;
  background: #202228;
  box-shadow: none;
}

.health-verdict.good strong { color: var(--studio-green); }
.health-verdict.warn strong { color: var(--studio-yellow); }
.health-verdict.bad strong { color: var(--studio-red); }

.cv-preset-section, .global-loop-section {
  color: var(--studio-text);
  border-color: var(--studio-border);
  border-radius: 3px;
  background: #1b1d22;
  box-shadow: none;
}

.cv-preset-heading, .global-loop-heading {
  border-color: var(--studio-border);
  background: #24262c;
  background-image: none;
}

.cv-preset-heading .eyebrow { color: var(--studio-purple); }
.cv-preset-heading strong, .global-loop-heading strong { color: var(--studio-text); }
.cv-preset-heading span, .global-loop-heading span, .global-loop-heading p { color: var(--studio-muted); }

.cv-preset-explainer { border-color: var(--studio-border-soft); background: #181a1f; }
.cv-preset-explainer span, .cv-preset-flash, .cv-preset-progress {
  color: var(--studio-muted);
  border-color: var(--studio-border-soft);
  background: #1c1e23;
}

.cv-preset-bank, .global-loop-bank { gap: 6px; }

.cv-preset-card, .global-loop-card {
  color: var(--studio-text);
  border-color: #3d4047;
  border-radius: 3px;
  background: #22242a;
  box-shadow: none;
}

.cv-preset-card header strong, .global-loop-card > div strong { color: var(--studio-text); }
.cv-preset-card-meta span { color: var(--studio-muted); border-color: var(--studio-border); border-radius: 2px; background: #181a1f; }
.cv-preset-card .button, .global-loop-card .button { color: var(--studio-text); }
.cv-preset-card .button.primary { color: #101512; border-color: var(--studio-green); background: var(--studio-green); }
.cv-preset-name { color: var(--studio-muted); }
.cv-preset-name .text-input { color: var(--studio-text); background: var(--studio-inset); }

.loop-matrix-heading, .loop-matrix { color: var(--studio-text); background: #17191d; }
.loop-card.playing, .loop-card.overdubbing { border-color: var(--studio-green); box-shadow: inset 2px 0 var(--studio-green); }
.loop-card.recording { border-color: var(--studio-red); box-shadow: inset 2px 0 var(--studio-red); }
.loop-card.armed { border-color: var(--studio-yellow); box-shadow: inset 2px 0 var(--studio-yellow); }
.loop-card.global-owned { border-color: var(--studio-purple); box-shadow: inset 2px 0 var(--studio-purple); }
.loop-card-head strong { color: var(--studio-text); }
.loop-card > i { background: #353840; }

.loop-waveform-svg {
  border-color: var(--studio-border-soft);
  border-radius: 2px;
  background: #101216;
}

.global-loop-heading kbd {
  color: var(--studio-text);
  border-color: #484b53;
  border-radius: 2px;
  background: #292b31;
  box-shadow: none;
}

.global-loop-warning { color: var(--studio-red); border-color: #721923; border-radius: 2px; background: #2b1519; }

/* Focused loop workspace */
html[data-ui="calm"] .loop-view-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--studio-border);
  background: #17191d;
}

html[data-ui="calm"] .loop-view-nav button,
html[data-ui="calm"] .loop-lane-view-nav button {
  min-height: 48px;
  display: grid;
  grid-template-columns: 28px auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: start;
  column-gap: 8px;
  padding: 7px 14px;
  color: var(--studio-muted);
  border: 0;
  border-right: 1px solid var(--studio-border-soft);
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

html[data-ui="calm"] .loop-view-nav button > span,
html[data-ui="calm"] .loop-lane-view-nav button > span {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--studio-dim);
  font: 700 9px "SFMono-Regular", Consolas, monospace;
}

html[data-ui="calm"] .loop-view-nav button strong,
html[data-ui="calm"] .loop-lane-view-nav button strong { font-size: 10px; }
html[data-ui="calm"] .loop-view-nav button small,
html[data-ui="calm"] .loop-lane-view-nav button small { color: var(--studio-dim); font-size: 8px; }
html[data-ui="calm"] .loop-view-nav button:hover,
html[data-ui="calm"] .loop-lane-view-nav button:hover { color: var(--studio-text); background: #202228; }
html[data-ui="calm"] .loop-view-nav button.active,
html[data-ui="calm"] .loop-lane-view-nav button.active {
  color: var(--studio-text);
  background: #25272d;
  box-shadow: inset 0 -2px var(--studio-purple);
}
html[data-ui="calm"] .loop-view-nav button.active > span,
html[data-ui="calm"] .loop-lane-view-nav button.active > span { color: var(--studio-purple); }
html[data-ui="calm"] .loop-view-nav button.active small,
html[data-ui="calm"] .loop-lane-view-nav button.active small { color: var(--studio-muted); }

html[data-ui="calm"] .loop-view-panel { min-width: 0; background: #17191d; }
html[data-ui="calm"] .loop-global-panel,
html[data-ui="calm"] .loop-lanes-panel { padding: 10px; }
html[data-ui="calm"] .loop-global-panel .global-loop-section { margin: 0; }
html[data-ui="calm"] .loop-lanes-panel .loop-matrix-heading { padding: 2px 2px 9px; }
html[data-ui="calm"] .loop-lanes-panel .loop-matrix {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

html[data-ui="calm"] .loop-lane-selector {
  display: grid;
  grid-template-columns: repeat(8, minmax(72px, 1fr));
  gap: 5px;
  margin-bottom: 8px;
}

html[data-ui="calm"] .loop-lane-choice {
  min-width: 0;
  min-height: 47px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 5px;
  padding: 6px 7px;
  color: var(--studio-muted);
  border: 1px solid var(--studio-border-soft);
  border-radius: 3px;
  background: #1d1f24;
  text-align: left;
  cursor: pointer;
}

html[data-ui="calm"] .loop-lane-choice strong { color: var(--studio-text); font-size: 9px; }
html[data-ui="calm"] .loop-lane-choice span {
  overflow: hidden;
  color: var(--studio-dim);
  font-size: 6px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
html[data-ui="calm"] .loop-lane-choice small {
  grid-column: 1 / -1;
  color: var(--studio-dim);
  font: 7px "SFMono-Regular", Consolas, monospace;
}
html[data-ui="calm"] .loop-lane-choice:hover { border-color: #565962; background: #25272d; }
html[data-ui="calm"] .loop-lane-choice.active {
  border-color: #6b5b8a;
  background: var(--studio-purple-deep);
  box-shadow: inset 2px 0 var(--studio-purple);
}
html[data-ui="calm"] .loop-lane-choice.playing strong,
html[data-ui="calm"] .loop-lane-choice.overdubbing strong { color: var(--studio-green); }
html[data-ui="calm"] .loop-lane-choice.recording strong { color: var(--studio-red); }
html[data-ui="calm"] .loop-lane-choice.armed strong { color: var(--studio-yellow); }

html[data-ui="calm"] .focused-loop-card {
  padding: 0;
  overflow: hidden;
  border-color: var(--studio-border);
  background: #1a1c21;
}
html[data-ui="calm"] .focused-loop-card > .loop-card-head,
html[data-ui="calm"] .focused-loop-card > .loop-meta { padding-inline: 12px; }
html[data-ui="calm"] .focused-loop-card > .loop-card-head { min-height: 48px; background: #25272d; }
html[data-ui="calm"] .focused-loop-card > .loop-card-head > div { display: grid; gap: 2px; }
html[data-ui="calm"] .focused-loop-card > .loop-card-head strong { font-size: 11px; }
html[data-ui="calm"] .focused-loop-card > .loop-card-head small { color: var(--studio-dim); font-size: 7px; }
html[data-ui="calm"] .focused-loop-card > i { margin: 0; border-radius: 0; }
html[data-ui="calm"] .focused-loop-card > .loop-meta { padding-block: 7px; border-bottom: 1px solid var(--studio-border-soft); }

html[data-ui="calm"] .loop-lane-view-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--studio-border);
  background: #17191d;
}
html[data-ui="calm"] .loop-lane-view-nav button { min-height: 45px; padding: 6px 12px; }

html[data-ui="calm"] .loop-lane-view-panel { min-height: 134px; padding: 12px; background: #15171b; }
html[data-ui="calm"] .loop-view-empty {
  min-height: 104px;
  display: grid;
  place-content: center;
  gap: 4px;
  color: var(--studio-muted);
  border: 1px dashed var(--studio-border);
  border-radius: 4px;
  text-align: center;
}
html[data-ui="calm"] .loop-view-empty strong { color: var(--studio-text); font-size: 11px; }
html[data-ui="calm"] .loop-view-empty span { font-size: 8px; }

html[data-ui="calm"] .loop-capture-primary {
  display: grid;
  grid-template-columns: 1fr minmax(160px, 220px);
  align-items: end;
  gap: 12px;
}
html[data-ui="calm"] .loop-capture-primary > div { display: grid; gap: 4px; }
html[data-ui="calm"] .loop-capture-primary strong { color: var(--studio-text); font-size: 11px; }
html[data-ui="calm"] .loop-capture-primary span { color: var(--studio-muted); font-size: 8px; }
html[data-ui="calm"] .loop-capture-primary label,
html[data-ui="calm"] .focused-loop-grid label {
  min-width: 0;
  color: var(--studio-muted);
  font-size: 8px;
}
html[data-ui="calm"] .loop-capture-primary select,
html[data-ui="calm"] .focused-loop-grid select,
html[data-ui="calm"] .focused-loop-grid input[type="number"] {
  width: 100%;
  min-width: 0;
  height: 30px;
  margin-top: 4px;
}
html[data-ui="calm"] .focused-loop-actions { max-width: 460px; margin-top: 12px; }
html[data-ui="calm"] .focused-loop-actions button { min-height: 31px; }
html[data-ui="calm"] .random-motion-control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #315f37;
  border-radius: 4px;
  background: #112417;
}
html[data-ui="calm"] .random-motion-control > div { display: grid; gap: 3px; }
html[data-ui="calm"] .random-motion-control strong {
  color: var(--studio-green);
  font-size: 10px;
}
html[data-ui="calm"] .random-motion-control span {
  color: var(--studio-muted);
  font-size: 8px;
}
.random-motion-button {
  color: #0c160e !important;
  border-color: var(--studio-green) !important;
  background: var(--studio-green) !important;
}
.random-motion-button:hover:not(:disabled) { background: #2fca38 !important; }
html[data-ui="calm"] .loop-page-help { display: block; margin-top: 8px; color: var(--studio-muted); font-size: 7px; }
html[data-ui="calm"] .focused-loop-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  gap: 8px;
}
html[data-ui="calm"] .processor-grid { grid-template-columns: repeat(5, minmax(100px, 1fr)); }
html[data-ui="calm"] .loop-shape-view { display: grid; grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr); gap: 9px; }
html[data-ui="calm"] .loop-shape-section { min-width: 0; padding: 10px; border: 1px solid var(--studio-border-soft); border-radius: 3px; background: #191b20; }
html[data-ui="calm"] .loop-shape-heading { display: grid; gap: 2px; margin-bottom: 8px; }
html[data-ui="calm"] .loop-shape-heading strong { color: var(--studio-text); font-size: 9px; }
html[data-ui="calm"] .loop-shape-heading span { color: var(--studio-muted); font-size: 7px; }
html[data-ui="calm"] .loop-shape-view .processor-grid { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
html[data-ui="calm"] .focused-loop-trim { margin: 0; padding: 0; border: 0; }

/* Diagnostics */
.stress-titlebar, .stress-safety, .stress-options,
.stress-controls, .stress-progress, .stress-results {
  color: var(--studio-text);
  border-color: var(--studio-border);
  border-radius: 3px;
  background: #202228;
  background-image: none;
  box-shadow: none;
}

.stress-titlebar h3 { color: var(--studio-text); }
.stress-titlebar p:not(.eyebrow), .stress-options label,
.stress-progress span, .stress-results > p { color: var(--studio-muted); }
.stress-safety strong { color: var(--studio-yellow); }
.stress-safety ul { color: var(--studio-muted); }

.stress-badge {
  color: #101512;
  border-color: var(--studio-green);
  border-radius: 2px;
  background: var(--studio-green);
  box-shadow: none;
}

.stress-phase, .stress-checkpoint {
  color: var(--studio-text);
  border-color: var(--studio-border);
  border-radius: 3px;
  background: #1a1c21;
  box-shadow: none;
}

.stress-phase > summary, .stress-phase[open] > summary,
.stress-check-list {
  color: var(--studio-text);
  border-color: var(--studio-border-soft);
  background: #202228;
}

.stress-phase > summary strong, .stress-check-list span strong { color: var(--studio-text); }
.stress-phase > summary small, .stress-check-list span small { color: var(--studio-muted); }

.terminal { width: min(1700px, calc(100% - 28px)); }
.terminal summary { color: var(--studio-muted); border-color: var(--studio-border); background: #191b20; }
.terminal pre { color: var(--studio-green); border-color: var(--studio-border); background: #0e1013; }

.toast {
  color: var(--studio-text);
  border-color: #655581;
  border-radius: 4px;
  background: #282231;
  box-shadow: 0 10px 28px rgb(0 0 0 / 28%);
}

.toast.error { border-color: #721923; background: #2b1519; }

/* Semantic colour language: colour identifies function rather than decoration. */
.quick-steps li:nth-child(1) b { color: var(--studio-green); }
.quick-steps li:nth-child(2) b { color: var(--studio-purple); }
.quick-steps li:nth-child(3) b { color: var(--studio-yellow); }
.quick-steps li:nth-child(4) b { color: var(--studio-red); }

.menu-bar a[data-workspace-target="mappings"].active,
.workspace-nav button[data-workspace-target="mappings"].active strong { color: #c7b5e4; }

.menu-bar a[data-workspace-target="presets"].active,
.workspace-nav button[data-workspace-target="presets"].active strong { color: var(--studio-blue); }

.menu-bar a[data-workspace-target="scenes"].active,
.workspace-nav button[data-workspace-target="scenes"].active strong { color: var(--studio-yellow); }

.menu-bar a[data-workspace-target="stage"].active,
.workspace-nav button[data-workspace-target="stage"].active strong { color: var(--studio-red); }

.menu-bar a[data-workspace-target="loops"].active,
.workspace-nav button[data-workspace-target="loops"].active strong { color: var(--studio-yellow); }

.menu-bar a[data-workspace-target="health"].active,
.workspace-nav button[data-workspace-target="health"].active strong { color: var(--studio-green); }

.menu-bar a[data-workspace-target="scenes"].active::after,
.menu-bar a[data-workspace-target="loops"].active::after,
.workspace-nav button[data-workspace-target="scenes"].active::after,
.workspace-nav button[data-workspace-target="loops"].active::after { background: var(--studio-yellow); }

.menu-bar a[data-workspace-target="stage"].active::after,
.workspace-nav button[data-workspace-target="stage"].active::after { background: var(--studio-red); }

.menu-bar a[data-workspace-target="health"].active::after,
.workspace-nav button[data-workspace-target="health"].active::after { background: var(--studio-green); }

.menu-bar a[data-workspace-target="presets"].active::after,
.workspace-nav button[data-workspace-target="presets"].active::after { background: var(--studio-blue); }

.workspace-nav button[data-workspace-target="presets"].active .workspace-nav-icon {
  color: var(--studio-blue);
  border-color: #3d6985;
  background: #172730;
}

.workspace-nav button[data-workspace-target="scenes"].active .workspace-nav-icon,
.workspace-nav button[data-workspace-target="loops"].active .workspace-nav-icon {
  color: var(--studio-yellow);
  border-color: #705424;
  background: #2d2416;
}

.workspace-nav button[data-workspace-target="stage"].active .workspace-nav-icon {
  color: var(--studio-red);
  border-color: #721923;
  background: #301317;
}

.workspace-nav button[data-workspace-target="health"].active .workspace-nav-icon {
  color: var(--studio-green);
  border-color: #1d6d28;
  background: #102817;
}

.morph-header .eyebrow, .morph-side small,
.endpoint-b b, .endpoint-b > div b { color: var(--studio-yellow); }

.event-stage-header .eyebrow,
.event-stage-strip-heading > span,
.event-route-heading strong { color: var(--studio-red); }

.event-stage-step output,
.event-stage-step footer strong,
.event-stage-step-inspector output { color: var(--studio-yellow); }

.clock-header .eyebrow, .clock-position strong,
.global-loop-heading .eyebrow,
.loop-matrix-heading .eyebrow { color: var(--studio-yellow); }

.loop-card.recording .loop-card-head strong,
.global-loop-card.recording > div strong,
.cv-preset-card.busy header strong { color: var(--studio-red); }

.system-health-header .eyebrow,
.health-card.good .health-label { color: var(--studio-green); }

.health-card.warn .health-label,
.health-verdict.warn p,
.stress-safety strong { color: var(--studio-yellow); }

.health-card.bad .health-label,
.health-verdict.bad p,
.stress-titlebar .eyebrow,
.global-loop-warning strong { color: var(--studio-red); }

.route-card:not(.route-off) .route-number,
.route-card:not(.route-off) .route-field > span { color: #d1c2e8; }

.event-route-card:not(.route-off) .route-number,
.event-route-card:not(.route-off) .event-route-note strong { color: var(--studio-yellow); }

/* Brighter readout text across the working surface. */
#workspaceEyebrow,
.mapping-titlebar .eyebrow,
.target-profile-head .eyebrow,
.terrain-panel .eyebrow,
.pitch-heading > div:first-child strong,
.pitch-scale > span,
.page-tools > strong,
.clock-config label,
.event-stage-global label,
.event-stage-track-workbench label,
.morph-manual > p,
.cv-preset-explainer b { color: var(--studio-yellow); }

.event-heading strong,
.event-destinations .eyebrow,
.event-stage-clock-source b,
.stress-safety li::marker,
.global-loop-warning,
.loop-card.recording .loop-meta,
.loop-card.recording .loop-card-actions button,
.global-loop-card.recording span { color: var(--studio-red); }

.clock-position strong,
.clock-header .eyebrow,
.global-loop-heading .eyebrow,
.event-stage-step output,
.event-stage-step footer strong,
.health-card.warn strong,
.health-verdict.warn strong {
  color: var(--studio-yellow);
  text-shadow: 0 0 9px rgb(242 184 75 / 18%);
}

.event-stage-header .eyebrow,
.event-route-heading strong,
.loop-card.recording .loop-card-head strong,
.global-loop-card.recording > div strong,
.health-card.bad strong,
.health-verdict.bad strong,
.stress-titlebar .eyebrow,
.button.panic,
.button.danger-text {
  color: var(--studio-red);
  text-shadow: 0 0 9px rgb(224 24 38 / 22%);
}

/* High-colour mode: strong labelling with dark, quiet control surfaces. */
.eyebrow,
.field-label,
.capacity-note summary,
.target-profile-head > label,
.target-profile-import,
.page-tools label,
.route-legend strong,
.motion-telemetry strong,
.pitch-grid label,
.pitch-scale label,
.clock-config label,
.cv-preset-name,
.loop-card > label,
.morph-route-controls label,
.stress-options label {
  color: var(--studio-yellow);
  font-weight: 750;
}

.menu-bar a[data-workspace-target="scenes"],
.menu-bar a[data-workspace-target="loops"],
.workspace-nav button[data-workspace-target="scenes"] strong,
.workspace-nav button[data-workspace-target="loops"] strong {
  color: var(--studio-yellow);
  font-weight: 750;
}

.menu-bar a[data-workspace-target="stage"],
.workspace-nav button[data-workspace-target="stage"] strong {
  color: var(--studio-red);
  font-weight: 750;
}

.workspace-nav button[data-workspace-target="scenes"] small,
.workspace-nav button[data-workspace-target="loops"] small { color: #c4ae45; }

.workspace-nav button[data-workspace-target="stage"] small { color: #c46a74; }

.mapping-titlebar h3,
.clock-header h3,
.global-loop-heading strong,
.cv-preset-heading strong,
.morph-header h3,
.endpoint-b b,
.event-stage-step footer strong,
.event-stage-step output {
  color: var(--studio-yellow);
  font-weight: 780;
}

.event-stage-header h3,
.event-heading strong,
.event-destinations strong,
.event-route-heading strong,
.event-stage-clock-source b,
.stress-titlebar h3,
.global-loop-warning strong,
.loop-card.recording strong {
  color: var(--studio-red);
  font-weight: 780;
}

.route-card:not(.route-off) .route-heading strong,
.route-card:not(.route-off) .route-field > span,
.route-card:not(.route-off) .curve-preview strong,
.motion-heading strong,
.motion-panel label,
.constellation-voice strong,
.terrain-panel label {
  color: var(--studio-yellow);
  font-weight: 720;
}

.event-route-card:not(.route-off) .event-route-heading strong,
.event-route-card:not(.route-off) .route-field > span,
.event-route-card:not(.route-off) .event-route-live strong,
.event-extractor.enabled .event-toggle,
.event-extractor.enabled .event-heading strong {
  color: var(--studio-red);
  font-weight: 760;
}

.event-stage-track-tabs button strong,
.pulse-track-tabs button strong,
.event-stage-strip-heading strong { color: var(--studio-red); font-weight: 760; }

.event-stage-track-tabs button.active strong,
.pulse-track-tabs button.active strong { color: var(--studio-yellow); }

.event-stage-track-primary label,
.event-stage-track-musical label,
.event-stage-advanced label,
.event-stage-step-inspector label,
.pulse-global label,
.pulse-cell label {
  color: var(--studio-yellow);
  font-weight: 720;
}

.event-stage-step.current .event-stage-select,
.event-stage-step.current .event-stage-select strong,
.event-stage-screen-primary.live > strong { color: var(--studio-yellow); font-weight: 800; }

.loop-card.recording .loop-card-head strong,
.loop-card.recording .loop-meta,
.loop-card.recording button,
.global-loop-card.recording strong,
.global-loop-card.recording span,
.health-card.bad strong,
.health-card.bad span,
.health-verdict.bad strong,
.health-verdict.bad p,
.toast.error {
  color: var(--studio-red);
  font-weight: 760;
}

.loop-card.armed .loop-card-head strong,
.loop-card.armed .loop-meta,
.global-loop-card.armed strong,
.health-card.warn strong,
.health-card.warn span,
.health-verdict.warn strong,
.health-verdict.warn p,
.clock-position strong {
  color: var(--studio-yellow);
  font-weight: 780;
}

.button.panic,
.button.danger-text {
  color: var(--studio-red);
  border-color: #8b1c27;
  font-weight: 800;
}

.button.page-focus,
#clockTapButton,
#clockResetButton,
#eventStageRandomButton {
  color: var(--studio-yellow);
  border-color: #705424;
  font-weight: 760;
}

.menu-bar a[data-workspace-target="scenes"],
.menu-bar a[data-workspace-target="loops"],
.workspace-nav button[data-workspace-target="scenes"].active strong,
.workspace-nav button[data-workspace-target="loops"].active strong,
.mapping-titlebar h3,
.clock-header h3,
.route-card:not(.route-off) .route-heading strong {
  text-shadow: 0 0 10px rgb(242 184 75 / 16%);
}

.menu-bar a[data-workspace-target="stage"],
.workspace-nav button[data-workspace-target="stage"].active strong,
.event-stage-header h3,
.event-route-card:not(.route-off) .event-route-heading strong,
.loop-card.recording strong,
.button.panic,
.button.danger-text {
  text-shadow: 0 0 10px rgb(224 24 38 / 22%);
}

/* Preset Bank: factory architectures, never hardware storage slots. */
.preset-bank-panel { overflow: hidden; }

.preset-bank-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--studio-border);
  background: var(--studio-panel-2);
}

.preset-bank-header h3 { margin: 0; color: var(--studio-blue); font-size: 19px; }
.preset-bank-header p:not(.eyebrow) { margin-top: 4px; color: var(--studio-muted); font-size: 11px; }
.preset-bank-count {
  flex: none;
  padding: 6px 8px;
  color: var(--studio-blue);
  border: 1px solid #3d6985;
  border-radius: 3px;
  background: #172730;
  font: 700 9px "SFMono-Regular", Consolas, monospace;
  letter-spacing: .08em;
}

.preset-bank-safety {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--studio-muted);
  border-bottom: 1px solid var(--studio-border-soft);
  background: #171d20;
}

.preset-bank-safety > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--studio-green);
  border: 1px solid #1d6d28;
  border-radius: 50%;
  font-size: 13px;
}

.preset-bank-safety strong,
.preset-bank-safety small { display: block; }
.preset-bank-safety strong { color: var(--studio-green); font-size: 10px; }
.preset-bank-safety small { margin-top: 2px; font-size: 9px; line-height: 1.35; }

.preset-bank-grid {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--studio-inset);
}

.preset-bank-device {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.preset-bank-device-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 1px 5px;
  color: var(--studio-muted);
  border-bottom: 1px solid var(--studio-border-soft);
  font: 700 8px "SFMono-Regular", Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.preset-bank-device-heading strong { color: var(--studio-text); }
.preset-bank-device-heading span { color: var(--studio-dim); }

.preset-bank-card {
  --preset-tone: var(--studio-blue);
  min-width: 0;
  padding: 12px;
  color: var(--studio-text);
  border: 1px solid var(--studio-border);
  border-radius: 4px;
  background: var(--studio-panel);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.preset-bank-card:hover { border-color: #555962; background: var(--studio-panel-2); }
.preset-bank-card.selected {
  grid-column: 1 / -1;
  border-color: var(--preset-tone);
  box-shadow: inset 3px 0 var(--preset-tone);
  cursor: default;
}
.preset-bank-card.tone-purple { --preset-tone: var(--studio-purple); }
.preset-bank-card.tone-yellow { --preset-tone: var(--studio-yellow); }
.preset-bank-card.tone-green { --preset-tone: var(--studio-green); }
.preset-bank-card.tone-red { --preset-tone: var(--studio-red); }
.preset-bank-card.tone-blue { --preset-tone: var(--studio-blue); }

.preset-bank-card > header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.preset-bank-number {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--preset-tone);
  border: 1px solid color-mix(in srgb, var(--preset-tone), transparent 45%);
  border-radius: 3px;
  background: color-mix(in srgb, var(--preset-tone), transparent 88%);
  font: 760 10px "SFMono-Regular", Consolas, monospace;
}

.preset-bank-card header small,
.preset-bank-card header h4 { display: block; margin: 0; }
.preset-bank-card header small {
  color: var(--preset-tone);
  font: 700 8px "SFMono-Regular", Consolas, monospace;
  letter-spacing: .09em;
}
.preset-bank-card header h4 { margin-top: 2px; font-size: 14px; }
.preset-bank-arrow { color: var(--preset-tone); font: 18px "SFMono-Regular", Consolas, monospace; }
.preset-bank-card > p { min-height: 33px; margin: 10px 0; color: var(--studio-muted); font-size: 10px; line-height: 1.45; }

.preset-bank-sequence {
  height: 48px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 3px;
  padding: 5px 6px 4px;
  border: 1px solid var(--studio-border-soft);
  background: var(--studio-inset);
}

.preset-bank-sequence span { height: 100%; display: flex; align-items: end; gap: 2px; }
.preset-bank-sequence span i {
  width: 100%;
  height: var(--preset-stage-height);
  display: block;
  border-top: 2px solid var(--preset-tone);
  background: color-mix(in srgb, var(--preset-tone), transparent 73%);
}
.preset-bank-sequence span.negative i { opacity: .55; }
.preset-bank-sequence span b { color: var(--studio-dim); font: 6px "SFMono-Regular", Consolas, monospace; }

.preset-bank-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.preset-bank-tags span {
  padding: 3px 5px;
  color: var(--studio-muted);
  border: 1px solid var(--studio-border-soft);
  border-radius: 2px;
  background: var(--studio-panel-2);
  font-size: 7px;
}

.preset-bank-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--studio-border-soft);
}
.preset-bank-detail[hidden] { display: none; }
.preset-bank-patch,
.preset-bank-character,
.preset-bank-destinations { min-width: 0; }
.preset-bank-detail small {
  display: block;
  margin-bottom: 4px;
  color: var(--preset-tone);
  font: 700 7px "SFMono-Regular", Consolas, monospace;
  letter-spacing: .08em;
}
.preset-bank-patch strong,
.preset-bank-character span { color: var(--studio-text); font-size: 10px; line-height: 1.45; }
.preset-bank-character span { color: var(--studio-muted); }
.preset-bank-destinations { grid-column: 1 / -1; }
.preset-bank-destinations ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.preset-bank-destinations li {
  overflow: hidden;
  color: var(--studio-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preset-bank-destinations li::before { color: var(--preset-tone); content: "› "; }
.preset-bank-destinations.full-map ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preset-bank-destinations.full-map li {
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
  gap: 5px;
  overflow: visible;
  white-space: normal;
}
.preset-bank-destinations.full-map li::before { display: none; }
.preset-bank-destinations.full-map li b {
  color: var(--studio-text);
  font: 700 8px "SFMono-Regular", Consolas, monospace;
}
.preset-bank-destinations.full-map li span { min-width: 0; }
.preset-bank-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--studio-border-soft);
}
.preset-bank-stats span { padding: 7px; color: var(--studio-muted); border-right: 1px solid var(--studio-border-soft); font-size: 8px; }
.preset-bank-stats span:last-child { border-right: 0; }
.preset-bank-stats b { display: block; color: var(--preset-tone); font: 14px "SFMono-Regular", Consolas, monospace; }
.preset-bank-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }

.preset-bank-footer {
  min-height: 36px;
  padding: 10px 14px;
  color: var(--studio-muted);
  border-top: 1px solid var(--studio-border);
  background: var(--studio-panel-2);
  font-size: 9px;
}

html[data-theme="normal"] .preset-bank-header,
html[data-theme="normal"] .preset-bank-footer { background: var(--studio-panel-2); }
html[data-theme="normal"] .preset-bank-count {
  color: #285d80;
  border-color: #91b5ca;
  background: #e2eef4;
}
html[data-theme="normal"] .preset-bank-safety {
  color: #526056;
  border-color: #b9d3bb;
  background: #e8f3e8;
}
html[data-theme="normal"] .preset-bank-safety > span {
  color: #176b1b;
  border-color: #8dbd90;
  background: #f4faf4;
}
html[data-theme="normal"] .preset-bank-safety strong { color: #176b1b; }
html[data-theme="normal"] .preset-bank-grid { background: #e8e9e4; }
html[data-theme="normal"] .preset-bank-card { background: #f7f7f4; }
html[data-theme="normal"] .preset-bank-card:hover { border-color: #999c95; background: #fff; }
html[data-theme="normal"] .preset-bank-card.selected { background: #fff; }
html[data-theme="normal"] .preset-bank-sequence { background: #e6e7e1; }
html[data-theme="normal"] .preset-bank-tags span { background: #ecece7; }
html[data-theme="normal"] .workspace-nav button[data-workspace-target="presets"].active .workspace-nav-icon {
  color: #285d80;
  border-color: #91b5ca;
  background: #e2eef4;
}

/* Status states are the only luminous elements. */
.live, .playing, .connected, .good {
  --state-color: var(--studio-green);
}

/* Normal mode: a light working surface with the original dark instrument bar. */
html[data-theme="normal"] .topbar {
  color-scheme: dark;
  border-bottom-color: #303239;
  background: #191b20;
}

html[data-theme="normal"] .topbar .connection-state {
  color: #aaaeb5;
  border-color: #363940;
  background: #15171b;
}

html[data-theme="normal"] .topbar .button.ghost {
  color: #aaaeb5;
  border-color: #363940;
  background: #1a1c21;
}

html[data-theme="normal"] .topbar .button.ghost:hover:not(:disabled) {
  color: #fff;
  border-color: #5b5f69;
  background: #292c32;
}

html[data-theme="normal"] .support-banner {
  color: #382500;
  border-bottom-color: #c79a3a;
  background: #f0c461;
}

html[data-theme="normal"] .welcome-icon,
html[data-theme="normal"] .verified-badge,
html[data-theme="normal"] .discovery-badge,
html[data-theme="normal"] .workspace-nav button[data-workspace-target="health"].active .workspace-nav-icon {
  border-color: #8dbd90;
  background: #e1f1e1;
}

html[data-theme="normal"] .welcome-icon { color: #176b1b !important; }

html[data-theme="normal"] .workspace-nav button[data-workspace-target="mappings"].active strong {
  color: #513a72;
}

html[data-theme="normal"] .workspace-nav button[data-workspace-target="scenes"] small,
html[data-theme="normal"] .workspace-nav button[data-workspace-target="loops"] small {
  color: #765300;
}

html[data-theme="normal"] .workspace-nav button[data-workspace-target="stage"] small {
  color: #983846;
}

html[data-theme="normal"] .welcome-panel.collapsed,
html[data-theme="normal"] .slots-panel,
html[data-theme="normal"] .feature-window,
html[data-theme="normal"] .mapping-workspace,
html[data-theme="normal"] .scene-morph-panel,
html[data-theme="normal"] .clock-panel,
html[data-theme="normal"] .system-health-panel,
html[data-theme="normal"] .event-stage-panel,
html[data-theme="normal"] .pulse-field-panel,
html[data-theme="normal"] .target-profile-panel,
html[data-theme="normal"] .focused-loop-card {
  background: var(--studio-panel);
}

html[data-theme="normal"] .editor-heading,
html[data-theme="normal"] .mapping-titlebar,
html[data-theme="normal"] .morph-header,
html[data-theme="normal"] .clock-header,
html[data-theme="normal"] .system-health-header,
html[data-theme="normal"] .event-stage-header,
html[data-theme="normal"] .pulse-field-header,
html[data-theme="normal"] .cv-preset-heading,
html[data-theme="normal"] .global-loop-heading,
html[data-theme="normal"] .focused-loop-card > .loop-card-head,
html[data-theme="normal"] .event-stage-track-panel .event-stage-track-primary,
html[data-theme="normal"] .event-stage-track-panel .event-stage-track-musical {
  background: var(--studio-panel-2);
}

html[data-theme="normal"] .workspace-nav,
html[data-theme="normal"] .mapping-view-nav,
html[data-theme="normal"] .lane-view-nav,
html[data-theme="normal"] .event-stage-view-nav,
html[data-theme="normal"] .loop-view-nav,
html[data-theme="normal"] .loop-lane-view-nav,
html[data-theme="normal"] .event-stage-track-tabs,
html[data-theme="normal"] .loop-matrix-heading,
html[data-theme="normal"] .loop-matrix,
html[data-theme="normal"] .midi-observed-controls {
  background: #ecece7;
}

html[data-theme="normal"] .workspace-nav button:hover,
html[data-theme="normal"] .mapping-view-nav button:hover,
html[data-theme="normal"] .lane-view-nav button:hover,
html[data-theme="normal"] .event-stage-view-nav button:hover,
html[data-theme="normal"] .loop-view-nav button:hover,
html[data-theme="normal"] .loop-lane-view-nav button:hover,
html[data-theme="normal"] .target-tool-tabs button:hover,
html[data-theme="normal"] .terrain-layer-tabs button:hover,
html[data-theme="normal"] .page-tab:hover,
html[data-theme="normal"] .event-stage-track-tabs button:hover,
html[data-theme="normal"] .pulse-track-tabs button:hover,
html[data-theme="normal"] .lane-heading:hover,
html[data-theme="normal"] .loop-lane-choice:hover {
  color: var(--studio-text);
  background: #dedfd9;
}

html[data-theme="normal"] .workspace-nav button.active,
html[data-theme="normal"] .mapping-view-nav button.active,
html[data-theme="normal"] .lane-view-nav button.active,
html[data-theme="normal"] .event-stage-view-nav button.active,
html[data-theme="normal"] .loop-view-nav button.active,
html[data-theme="normal"] .loop-lane-view-nav button.active,
html[data-theme="normal"] .lane-card[open] .lane-heading {
  color: var(--studio-text);
  border-color: var(--studio-border);
  background: #dfe0da;
}

html[data-theme="normal"] .workspace-nav-icon,
html[data-theme="normal"] .feature-icon,
html[data-theme="normal"] .scene-status-button,
html[data-theme="normal"] .button.ghost,
html[data-theme="normal"] .add-destination,
html[data-theme="normal"] .stress-options,
html[data-theme="normal"] .focused-loop-card,
html[data-theme="normal"] .health-verdict {
  background: #f3f3ef;
}

html[data-theme="normal"] .button,
html[data-theme="normal"] .icon-button,
html[data-theme="normal"] .loop-card-actions button,
html[data-theme="normal"] .loop-trim-actions button,
html[data-theme="normal"] .motion-learn-actions button,
html[data-theme="normal"] .pitch-subheading button,
html[data-theme="normal"] .pitch-point button,
html[data-theme="normal"] .reset-lane,
html[data-theme="normal"] .reset-route {
  color: var(--studio-text);
  border-color: var(--studio-border);
  background: #e4e5df;
}

html[data-theme="normal"] .button:hover:not(:disabled),
html[data-theme="normal"] .icon-button:hover:not(:disabled),
html[data-theme="normal"] .loop-card-actions button:hover:not(:disabled),
html[data-theme="normal"] .loop-trim-actions button:hover:not(:disabled) {
  color: var(--studio-text);
  border-color: #999c95;
  background: #d8d9d2;
}

html[data-theme="normal"] .button.primary,
html[data-theme="normal"] .cv-preset-card .button.primary {
  color: #071108;
  border-color: #1b9e20;
  background: #28b92d;
}

html[data-theme="normal"] .random-motion-control {
  border-color: #9fcaa2;
  background: #e8f4e8;
}
html[data-theme="normal"] .random-motion-control span { color: #4f6151; }
html[data-theme="normal"] .random-motion-button {
  color: #071108 !important;
  border-color: #1b9e20 !important;
  background: #28b92d !important;
}

html[data-theme="normal"] .button.secondary {
  color: #513a72;
  border-color: #b9a7d2;
  background: var(--studio-purple-deep);
}

html[data-theme="normal"] .button.panic,
html[data-theme="normal"] .button.danger-text,
html[data-theme="normal"] .global-loop-warning,
html[data-theme="normal"] .toast.error {
  color: var(--studio-red);
  border-color: #d8a0a7;
  background: #f8e5e7;
}

html[data-theme="normal"] .button.page-focus,
html[data-theme="normal"] #clockTapButton,
html[data-theme="normal"] #clockResetButton,
html[data-theme="normal"] #eventStageRandomButton,
html[data-theme="normal"] .discovery-badge.learn {
  color: var(--studio-yellow);
  border-color: #d1b371;
  background: #f5ecd6;
}

html[data-theme="normal"] .slot-card,
html[data-theme="normal"] .route-card,
html[data-theme="normal"] .event-route-card,
html[data-theme="normal"] .event-extractor,
html[data-theme="normal"] .pitch-panel,
html[data-theme="normal"] .event-stage-step,
html[data-theme="normal"] .morph-endpoint,
html[data-theme="normal"] .morph-endpoint.endpoint-b,
html[data-theme="normal"] .cv-preset-card,
html[data-theme="normal"] .global-loop-card,
html[data-theme="normal"] .loop-card,
html[data-theme="normal"] .health-card,
html[data-theme="normal"] .stress-phase,
html[data-theme="normal"] .stress-phase > summary,
html[data-theme="normal"] .stress-check-list,
html[data-theme="normal"] .midi-observed-control {
  color: var(--studio-text);
  border-color: var(--studio-border-soft);
  background: #f1f1ed;
}

html[data-theme="normal"] .slot-card:hover { background: #e7e8e2; }
html[data-theme="normal"] .slot-card.selected {
  border-color: #a58bc8;
  background: #ece6f3;
}

html[data-theme="normal"] .slot-number,
html[data-theme="normal"] .clock-health span,
html[data-theme="normal"] .cv-preset-explainer,
html[data-theme="normal"] .cv-preset-card-meta span,
html[data-theme="normal"] .loop-shape-section,
html[data-theme="normal"] .loop-view-panel,
html[data-theme="normal"] .loop-lane-view-panel,
html[data-theme="normal"] .event-stage-view-panel,
html[data-theme="normal"] .event-stage-track-tabs,
html[data-theme="normal"] .event-stage-global,
html[data-theme="normal"] .event-stage-step-inspector,
html[data-theme="normal"] .event-stage-track-primary,
html[data-theme="normal"] .event-stage-track-musical {
  background: var(--studio-panel-2);
}

html[data-theme="normal"] .lane-list,
html[data-theme="normal"] .calm-lane-body,
html[data-theme="normal"] .lane-view-panel,
html[data-theme="normal"] .event-stage-step-grid,
html[data-theme="normal"] .event-stage-strip,
html[data-theme="normal"] .loop-lane-view-panel {
  background: #e9eae4;
}

html[data-theme="normal"] .lane-card,
html[data-theme="normal"] .focused-loop-card,
html[data-theme="normal"] .loop-lane-choice {
  border-color: var(--studio-border);
  background: #f5f5f1;
}

html[data-theme="normal"] .lane-heading,
html[data-theme="normal"] .route-card:not(.route-off) .route-heading,
html[data-theme="normal"] .event-route-card:not(.route-off) .event-route-heading {
  background: #e5e6e0;
}

html[data-theme="normal"] .route-card.route-off,
html[data-theme="normal"] .event-route-card.route-off {
  color: var(--studio-dim);
  border-color: var(--studio-border-soft);
  background: #ededE8;
}

html[data-theme="normal"] .mapping-target-summary,
html[data-theme="normal"] .discovery-badge.profile,
html[data-theme="normal"] .workspace-nav button.active .workspace-nav-icon,
html[data-theme="normal"] .loop-lane-choice.active {
  color: #513a72;
  border-color: #b9a7d2;
  background: #ece6f3;
}

html[data-theme="normal"] .text-input,
html[data-theme="normal"] select,
html[data-theme="normal"] input[type="number"],
html[data-theme="normal"] .morph-endpoint select,
html[data-theme="normal"] .cv-preset-name .text-input {
  color: var(--studio-text);
  border-color: #b8bab4;
  background: #fff;
}

html[data-theme="normal"] .toast {
  color: var(--studio-text);
  border-color: #a58bc8;
  background: #ece6f3;
  box-shadow: 0 10px 28px rgb(40 42 38 / 16%);
}

html[data-theme="normal"] .terminal summary { background: #e1e2dc; }
html[data-theme="normal"] .terminal pre,
html[data-theme="normal"] .event-stage-screen {
  color-scheme: dark;
}

html[data-theme="normal"] .route-card:not(.route-off) .route-number,
html[data-theme="normal"] .route-card:not(.route-off) .route-field > span,
html[data-theme="normal"] .route-card:not(.route-off) .route-heading strong,
html[data-theme="normal"] .motion-heading strong,
html[data-theme="normal"] .motion-panel label,
html[data-theme="normal"] .constellation-voice strong,
html[data-theme="normal"] .terrain-panel label {
  color: #6b4a94;
  text-shadow: none;
}

html[data-theme="normal"] .clock-position strong,
html[data-theme="normal"] .clock-header .eyebrow,
html[data-theme="normal"] .global-loop-heading .eyebrow,
html[data-theme="normal"] .event-stage-step output,
html[data-theme="normal"] .event-stage-step footer strong,
html[data-theme="normal"] .health-card.warn strong,
html[data-theme="normal"] .health-verdict.warn strong,
html[data-theme="normal"] .event-stage-header .eyebrow,
html[data-theme="normal"] .event-route-heading strong,
html[data-theme="normal"] .button.panic,
html[data-theme="normal"] .button.danger-text {
  text-shadow: none;
}

html[data-theme="normal"] .event-stage-track-switcher {
  border-bottom-color: var(--studio-border);
  background: #e9eae4;
}

html[data-theme="normal"] .event-stage-track-tabs {
  background: transparent;
}

html[data-theme="normal"] .event-stage-track-tabs button {
  color: var(--studio-muted);
  border-color: #b7b9b3;
  background: #f5f5f1;
  box-shadow: none;
}

html[data-theme="normal"] .event-stage-track-tabs button:hover {
  color: var(--studio-text);
  border-color: #999c95;
  background: #ecece7;
}

html[data-theme="normal"] .event-stage-track-tabs button strong {
  color: #45474d;
}

html[data-theme="normal"] .event-stage-track-tabs button.active {
  color: #513a72;
  border-color: #a58bc8;
  background: #e9e2f2;
  box-shadow: inset 0 -2px var(--studio-purple);
}

html[data-theme="normal"] .event-stage-track-tabs button.active strong {
  color: #513a72;
}

html[data-theme="normal"] .event-stage-track-tabs .event-stage-tab-live {
  color: #6f726c;
}

html[data-theme="normal"] .event-stage-tab-live i {
  border-color: #8c8e88;
  background: #c9cbc5;
  box-shadow: inset 0 0 0 1px #f7f7f4;
}

html[data-theme="normal"] .page-strip {
  color: var(--studio-text);
  border-bottom-color: var(--studio-border);
  background: #e9eae4;
}

html[data-theme="normal"] .page-tab {
  color: var(--studio-muted);
  border-color: #b7b9b3;
  background: #f5f5f1;
  box-shadow: none;
}

html[data-theme="normal"] .page-tab span { color: var(--studio-dim); }
html[data-theme="normal"] .page-tab:hover {
  color: var(--studio-text);
  border-color: #999c95;
  background: #ecece7;
}

html[data-theme="normal"] .page-tab.active {
  color: #513a72;
  border-color: #a58bc8;
  background: #e9e2f2;
  box-shadow: inset 0 -2px var(--studio-purple);
}

html[data-theme="normal"] .page-tab.active span { color: #7455a8; }

html[data-theme="normal"] .page-strip .button.page-focus {
  color: #176b1b;
  border-color: #94c497;
  background: #e2f1e2;
}

html[data-theme="normal"] .page-strip .button.page-focus:hover:not(:disabled) {
  color: #0c5110;
  border-color: #6fae73;
  background: #d4ead5;
}

html[data-theme="normal"] .page-tools {
  color: var(--studio-text);
  border-bottom-color: var(--studio-border);
  background: #f1f1ed;
}

html[data-theme="normal"] .page-tools .copy-control { color: var(--studio-muted); }

html[data-theme="normal"] .lane-view-nav button {
  color: var(--studio-muted);
  border-color: var(--studio-border-soft);
  background: #f1f1ed;
}

html[data-theme="normal"] .lane-view-nav button strong { color: #494b50; }
html[data-theme="normal"] .lane-view-nav button small { color: var(--studio-dim); }

html[data-theme="normal"] .lane-view-nav button:hover {
  color: var(--studio-text);
  background: #e4e5df;
}

html[data-theme="normal"] .lane-view-nav button.active {
  color: #513a72;
  background: #e9e2f2;
  box-shadow: inset 0 -2px var(--studio-purple);
}

html[data-theme="normal"] .lane-view-nav button.active strong { color: #513a72; }
html[data-theme="normal"] .lane-view-nav button.active small { color: #745f91; }

html[data-theme="normal"] .cv-preset-progress {
  color: var(--studio-muted);
  border-color: var(--studio-border);
  background: #f1f1ed;
}

html[data-theme="normal"] .cv-preset-progress i {
  border-color: #aeb0aa;
  background: #d8d9d3;
  box-shadow: inset 0 1px 2px rgb(40 42 38 / 10%);
}

html[data-theme="normal"] .cv-preset-progress i b {
  background: var(--studio-green);
}

html[data-theme="normal"] .event-stage-clock-source {
  color: var(--studio-text);
  border-color: #94c497;
  background: #e2f1e2;
}

html[data-theme="normal"] .event-stage-clock-source small {
  color: var(--studio-muted);
}

html[data-theme="normal"] .event-stage-clock-jack {
  color: #effaf0;
  border-color: #4c9650;
  background: #238f28;
  box-shadow: inset 0 0 0 2px #9bd29e;
}

html[data-theme="normal"] .event-stage-clock-source > strong {
  color: #176b1b;
  border-color: #94c497;
  background: #f2f8f2;
}

html[data-theme="normal"] .event-stage-console {
  color: var(--studio-text);
  border-color: var(--studio-border);
  background: #e8e9e3;
  box-shadow: none;
}

html[data-theme="normal"] .event-stage-performance-control {
  color: var(--studio-text);
  border-color: var(--studio-border-soft);
  background: #f5f5f1;
}

html[data-theme="normal"] .stage-enable,
html[data-theme="normal"] .event-stage-global .stage-enable {
  color: var(--studio-text);
  border-color: #b7b9b3;
  background: #f5f5f1;
}

html[data-theme="normal"] .stage-enable input {
  accent-color: var(--studio-green);
}

/* Whole-app Normal-mode audit: remove residual dark editing trays. */
html[data-theme="normal"] .monitor-toolbar,
html[data-theme="normal"] .target-profile-head,
html[data-theme="normal"] .midi-discovery-heading,
html[data-theme="normal"] .arcc-scene-tools,
html[data-theme="normal"] .target-tool-tabs,
html[data-theme="normal"] .event-stage-page-heading,
html[data-theme="normal"] .event-stage-strip-heading,
html[data-theme="normal"] .stress-titlebar,
html[data-theme="normal"] .stress-controls,
html[data-theme="normal"] .stress-progress,
html[data-theme="normal"] .stress-results {
  color: var(--studio-text);
  border-color: var(--studio-border);
  background: #efefeb;
}

html[data-theme="normal"] .monitor-toolbar label,
html[data-theme="normal"] .target-profile-head h4,
html[data-theme="normal"] .target-profile-head p:not(.eyebrow),
html[data-theme="normal"] .target-profile-head > label,
html[data-theme="normal"] .target-profile-import,
html[data-theme="normal"] .midi-discovery-heading h4,
html[data-theme="normal"] .midi-discovery-heading p:not(.eyebrow),
html[data-theme="normal"] .midi-learn-steps span,
html[data-theme="normal"] .arcc-scene-tools strong,
html[data-theme="normal"] .arcc-scene-tools span,
html[data-theme="normal"] .event-stage-page-heading span,
html[data-theme="normal"] .event-stage-strip-heading > span,
html[data-theme="normal"] .stress-titlebar p:not(.eyebrow),
html[data-theme="normal"] .stress-options label,
html[data-theme="normal"] .stress-progress span,
html[data-theme="normal"] .stress-results > p {
  color: var(--studio-muted);
}

html[data-theme="normal"] .target-profile-panel,
html[data-theme="normal"] .midi-discovery-panel,
html[data-theme="normal"] .target-tools,
html[data-theme="normal"] .constellation-panel,
html[data-theme="normal"] .terrain-panel,
html[data-theme="normal"] .motion-panel,
html[data-theme="normal"] .event-destinations,
html[data-theme="normal"] .event-stage-track-workbench,
html[data-theme="normal"] .event-stage-advanced,
html[data-theme="normal"] .global-loop-section,
html[data-theme="normal"] .stress-safety,
html[data-theme="normal"] .stress-options,
html[data-theme="normal"] .stress-checkpoint {
  color: var(--studio-text);
  border-color: var(--studio-border);
  background: #f5f5f1;
  background-image: none;
  box-shadow: none;
}

html[data-theme="normal"][data-ui="calm"] .event-stage-track-panel .event-stage-track-workbench {
  color: var(--studio-text);
  border-color: var(--studio-border);
  background: #f5f5f1;
  box-shadow: none;
}

html[data-theme="normal"] .target-tool-intro,
html[data-theme="normal"] .constellation-voice,
html[data-theme="normal"] .terrain-grid,
html[data-theme="normal"] .midi-device-identity,
html[data-theme="normal"] .motion-telemetry,
html[data-theme="normal"] .event-live,
html[data-theme="normal"] .event-stage-global,
html[data-theme="normal"] .event-stage-track-primary,
html[data-theme="normal"] .event-stage-track-musical,
html[data-theme="normal"] .event-stage-advanced > div {
  color: var(--studio-text);
  border-color: var(--studio-border-soft);
  background: #f1f1ed;
  background-image: none;
  box-shadow: none;
}

html[data-theme="normal"] .target-tool-intro strong { color: #513a72; }
html[data-theme="normal"] .morph-side.endpoint-b span,
html[data-theme="normal"] .morph-endpoint.endpoint-b b { color: var(--studio-blue); }
html[data-theme="normal"] .morph-readout > span { color: var(--studio-blue); }
html[data-theme="normal"] .lane-route-count { color: #62717d; }
html[data-theme="normal"] .lane-card:not([open]) .lane-route-count { color: #62717d; }

html[data-theme="normal"][data-ui="calm"] .event-stage-scale-panel .event-stage-global {
  color: var(--studio-text);
  border-color: var(--studio-border-soft);
  background: #f1f1ed;
  box-shadow: none;
}

html[data-theme="normal"] .midi-device-identity {
  color: var(--studio-muted);
  background: #e6e7e1;
}

html[data-theme="normal"] .target-tool-tabs button,
html[data-theme="normal"] .terrain-layer-tabs button,
html[data-theme="normal"] .event-stage-scale-editor button {
  color: var(--studio-muted);
  border-color: #b7b9b3;
  background: #f5f5f1;
  box-shadow: none;
}

html[data-theme="normal"] .target-tool-tabs button.active,
html[data-theme="normal"] .terrain-layer-tabs button.active {
  color: #513a72;
  border-color: #a58bc8;
  background: #e9e2f2;
  box-shadow: inset 0 -2px var(--studio-purple);
}

html[data-theme="normal"] .event-stage-scale-editor button[aria-pressed="true"] {
  color: #f7fff7;
  border-color: #238f28;
  background: #319536;
  box-shadow: inset 0 -2px #176b1b;
}

html[data-theme="normal"] .event-stage-scale-editor button[aria-pressed="true"] small {
  color: #e8f6e8;
}

html[data-theme="normal"] .terrain-cell {
  color: var(--studio-text);
  border-color: #b7b9b3;
  background: #e7e8e2;
  box-shadow: none;
}

html[data-theme="normal"] .terrain-cell:hover {
  border-color: #999c95;
  background: #dedfd9;
}

html[data-theme="normal"] .terrain-cell.selected {
  border-color: var(--studio-green);
  background: #dcefdc;
}

html[data-theme="normal"] .listen-route {
  color: #0c5110;
  border-color: #6fae73;
  background: #dcefdc;
}

html[data-theme="normal"] .listen-route:hover:not(:disabled),
html[data-theme="normal"] .listen-route.active {
  color: #071108;
  border-color: #238f28;
  background: #55bd59;
}

html[data-theme="normal"] .event-destinations-heading {
  color: var(--studio-text);
  border-color: #d1c6a8;
  background: #f3ecd9;
  background-image: none;
}

html[data-theme="normal"] .motion-telemetry {
  background: #e9f1e9;
}

html[data-theme="normal"] .telemetry-heading,
html[data-theme="normal"] .motion-meter span {
  color: #4c6253;
}

html[data-theme="normal"] .motion-meter b { color: #176b1b; }
html[data-theme="normal"] .motion-meter i { background: #c7d1c8; }

html[data-theme="normal"] .event-live {
  border-color: #c1b3d2;
  background: #eee9f3;
}

html[data-theme="normal"] .event-chip,
html[data-theme="normal"] .event-peak {
  color: var(--studio-muted);
  border-color: #bbb6c1;
  background: #faf8fb;
}

html[data-theme="normal"] .event-chip.active {
  color: #513a72;
  border-color: #a58bc8;
  background: #e9e2f2;
}

html[data-theme="normal"] .event-history > span,
html[data-theme="normal"] .event-history li { color: #655b70; }
html[data-theme="normal"] .event-history time,
html[data-theme="normal"] .event-history em,
html[data-theme="normal"] .event-history .event-empty { color: #7a737f; }
html[data-theme="normal"] .event-history strong { color: #513766; }

html[data-theme="normal"] .motion-trace {
  color: var(--studio-text);
  border-color: #aeb8b0;
  background: #eef3ee;
}

html[data-theme="normal"] .motion-trace .trace-grid { stroke: #c9d1ca; }
html[data-theme="normal"] .motion-trace .event-threshold { stroke: rgb(116 85 168 / 24%); }
html[data-theme="normal"] .motion-trace .event-threshold.active { stroke: rgb(116 85 168 / 78%); }
html[data-theme="normal"] .trace-raw { color: #8a5a00; }
html[data-theme="normal"] .trace-effective { color: #a33e2d; }
html[data-theme="normal"] .trace-position { color: #176b4d; }
html[data-theme="normal"] .trace-velocity { color: #356f97; }
html[data-theme="normal"] .trace-activity { color: #6b4a94; }
html[data-theme="normal"] .trace-routeTransformed { color: #a63675; }
html[data-theme="normal"] .trace-routeOutputNormalized { color: #303238; }

html[data-theme="normal"] .event-stage-strip-heading strong { color: var(--studio-red); }

html[data-theme="normal"] .event-stage-track-workbench label,
html[data-theme="normal"] .event-stage-global label,
html[data-theme="normal"] .event-stage-advanced label,
html[data-theme="normal"] .event-stage-step label,
html[data-theme="normal"] .event-stage-step-inspector label {
  color: var(--studio-muted);
}

html[data-theme="normal"] .event-stage-select,
html[data-theme="normal"] .event-stage-step footer,
html[data-theme="normal"] .event-stage-fader-wrap output:first-child {
  color: var(--studio-text);
  border-color: #b7b9b3;
  background: #e4e5df;
  box-shadow: none;
}

html[data-theme="normal"] .event-stage-step.selected .event-stage-select {
  color: #513a72;
  background: #e9e2f2;
}

html[data-theme="normal"] .event-stage-fader-wrap output:first-child {
  color: var(--studio-blue);
  background: #fff;
}

html[data-theme="normal"] .event-stage-step footer strong,
html[data-theme="normal"] .event-stage-step output {
  text-shadow: none;
}

html[data-theme="normal"] .stress-titlebar h3 { color: var(--studio-red); }

html[data-theme="normal"] .stress-safety {
  border-color: #d1b371;
  background: #f5ecd6;
}

html[data-theme="normal"] .stress-safety strong { color: var(--studio-yellow); }
html[data-theme="normal"] .stress-safety ul { color: var(--studio-muted); }

html[data-theme="normal"] .stress-progress progress {
  accent-color: var(--studio-green);
}

/* The monitor drawer inherits a light legacy skin unless Dark mode is explicit. */
html[data-theme="dark"] .monitor-drawer > summary {
  color: var(--studio-text);
  border-color: var(--studio-border);
  background: #1a1c21;
  box-shadow: none;
}

html[data-theme="dark"] .monitor-toolbar {
  color: var(--studio-text);
  border-color: var(--studio-border);
  background: #202228;
}

html[data-theme="dark"] .monitor-toolbar label { color: var(--studio-muted); }

@media (max-width: 1100px) {
  .welcome-panel { grid-template-columns: 1fr; }
  .quick-steps li:first-child { border-left: 0; }
  .workspace { grid-template-columns: 1fr; }
  html[data-ui="calm"] .workspace.scene-library-open { grid-template-columns: 1fr; }
  .slots-panel { position: static; }
  .slot-list { grid-template-columns: repeat(5, minmax(190px, 1fr)); overflow-x: auto; }
  .workspace-nav { grid-template-columns: repeat(6, minmax(110px, 1fr)); overflow-x: auto; }
  html[data-ui="calm"] .loop-lane-selector { grid-template-columns: repeat(4, minmax(72px, 1fr)); }
}

@media (max-width: 760px) {
  .menu-bar { min-height: 42px; overflow-x: auto; padding: 0 8px; }
  .menu-bar strong { min-width: auto; padding: 0 8px; }
  .menu-bar a { flex: none; padding: 0 10px; }
  .topbar { align-items: flex-start; padding: 10px 12px; }
  .connection-cluster { flex-wrap: wrap; justify-content: flex-end; }
  .connection-state { width: 100%; justify-content: flex-end; border: 0; background: transparent; }
  .welcome-panel, .workspace, .terminal { width: calc(100% - 16px); }
  .welcome-copy div { display: block; }
  .welcome-copy span { display: block; margin-top: 2px; }
  .quick-steps { grid-template-columns: repeat(2, 1fr); }
  .quick-steps li:nth-child(3) { border-left: 0; }
  .editor-heading { align-items: flex-start; flex-direction: column; }
  .editor-actions { justify-content: flex-start; }
  .workspace-nav { padding: 0; }
  .workspace-nav button { justify-content: flex-start; min-width: 118px; }
  .mapping-titlebar, .morph-header, .clock-header,
  .system-health-header, .event-stage-header, .pulse-field-header { align-items: flex-start; flex-wrap: wrap; }
  html[data-ui="calm"] .mapping-target-summary { width: 100%; }
  html[data-ui="calm"] .mapping-view-nav { grid-template-columns: 1fr 1fr; }
  html[data-ui="calm"] .lane-view-nav { grid-template-columns: repeat(5, minmax(104px, 1fr)); }
  html[data-ui="calm"] .route-grid-destination,
  html[data-ui="calm"] .route-grid-transform { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  html[data-ui="calm"] .loop-capture-primary { grid-template-columns: 1fr; align-items: stretch; }
  html[data-ui="calm"] .random-motion-control { grid-template-columns: 1fr; }
  html[data-ui="calm"] .random-motion-button { width: 100%; }
  html[data-ui="calm"] .focused-loop-grid { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  html[data-ui="calm"] .loop-shape-view { grid-template-columns: 1fr; }
  html[data-ui="calm"] .event-stage-view-nav {
    grid-template-columns: repeat(4, minmax(138px, 1fr));
    overflow-x: auto;
  }
  html[data-ui="calm"] .event-stage-performance-control,
  html[data-ui="calm"] .event-stage-scale-panel .event-stage-global { grid-template-columns: 1fr; }
  html[data-ui="calm"] .event-stage-page-heading { align-items: flex-start; flex-direction: column; }
  .preset-bank-device { grid-template-columns: 1fr; }
  .preset-bank-card.selected { grid-column: auto; }
  .preset-bank-detail { grid-template-columns: 1fr; }
  .preset-bank-destinations { grid-column: auto; }
  .preset-bank-destinations ul { grid-template-columns: 1fr 1fr; }
  .preset-bank-destinations.full-map ul { grid-template-columns: 1fr; }
  .preset-bank-stats { grid-column: auto; grid-template-columns: repeat(2, 1fr); }
  .preset-bank-stats span:nth-child(2) { border-right: 0; }
  .preset-bank-stats span:nth-child(-n+2) { border-bottom: 1px solid var(--studio-border-soft); }
  .preset-bank-actions { grid-column: auto; }
}

@media (max-width: 480px) {
  .brand-ascii { font-size: 7px; }
  .guide-button { display: none; }
  .quick-steps { display: none; }
  .welcome-panel { display: block; }
  .workspace { margin-top: 8px; }
  .feature-window, .mapping-workspace,
  .scene-morph-panel, .clock-panel, .system-health-panel,
  .event-stage-panel, .pulse-field-panel { margin: 6px; }
  html[data-ui="calm"] .loop-view-nav,
  html[data-ui="calm"] .loop-lane-view-nav {
    grid-template-columns: repeat(3, minmax(138px, 1fr));
    overflow-x: auto;
  }
  html[data-ui="calm"] .loop-lane-selector { grid-template-columns: repeat(2, minmax(72px, 1fr)); }
  .preset-bank-header { align-items: flex-start; }
  .preset-bank-safety { grid-template-columns: 26px 1fr; }
  .preset-bank-safety .button { grid-column: 1 / -1; }
  .preset-bank-destinations ul { grid-template-columns: 1fr; }
}