/* DSEG7 Classic — keshikan/DSEG (https://github.com/keshikan/DSEG), SIL OFL 1.1
   (see public/fonts/DSEG7-Classic/LICENSE.txt).
   Seven-segment LCD/LED digit font. The Classic cut keeps faint "ghost"
   unlit segments behind the lit ones (phosphor/LCD panel, not plain bold).
   Usage notes from upstream: period is zero-width; "!" is all-off; colon and
   space share advance width. Pair with monospace for non-digit unit labels. */
@font-face {
  font-family: "DSEG7 Classic";
  src: url("./fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2") format("woff2"),
       url("./fonts/DSEG7-Classic/DSEG7Classic-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #000000;
  --panel: #1b1e22;
  --panel-2: #20252a;
  --text: #f3f1ec;
  --muted: #aeb4bb;
  --line: #343a40;
  --good: #71d49b;
  --warn: #f0c56f;
  --bad-bg: #332a1d;
  --accent: #7fc7d9;
  --accent-2: #e2a86d;
  --node-constraint-cpu: #f0b35f;
  --node-constraint-ram: #5fc7ee;
  --node-constraint-gpu: #c083ff;
  /*
   * App-wide default cursor: tiny white + (hotspot center).
   * Never use hand / finger (`pointer`) or grab-hand. Resize / text / module-move
   * arrow may still be set explicitly.
   */
  --node-dot-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M2.5 6.5h8M6.5 2.5v8' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='square'/%3E%3C/svg%3E") 6 6, crosshair;
  --node-default-cursor: var(--node-dot-cursor);
  --node-slider-dot-cursor: url("./cursors/slider-drag-dot.svg") 8 8, crosshair;
  --node-module-roundness-ratio: 0.11;
  --node-module-corner-shape: squircle;
  --node-module-frame-radius: calc(var(--node-grid-size, 28px) * 2 * var(--node-module-roundness-ratio, 0.11));
  /* Module drag only — OS arrow for familiarity (not the app + / not “move”). */
  --node-module-move-cursor: default;
}

* {
  box-sizing: border-box;
}

html {
  background: #000000;
  overflow: hidden;
  scrollbar-gutter: auto;
  cursor: var(--node-default-cursor);
}

body {
  margin: 0;
  min-width: 320px;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  cursor: var(--node-default-cursor);
}

button,
a,
summary,
label,
select,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="color"] {
  cursor: var(--node-dot-cursor);
}

input[type="range"] {
  cursor: var(--node-slider-dot-cursor);
}

:is(input, textarea, select, [contenteditable="true"], .node-text-selectable),
#seDebugPanel .se-log,
#seDebugPanel .se-log * {
  user-select: text;
  -webkit-user-select: text;
}

/*
 * App-wide keyboard focus: replace the UA thick white double stroke (Chrome
 * `outline: auto` on dark UI) with a thin accent ring — but only while
 * keyboard-navigating (`body.keyboard-nav`, set on Tab, cleared on pointer).
 * Click / drag anywhere dismisses the ring without fighting real focus.
 * Components that set `outline: none` on :focus-visible keep their cues.
 */
:focus,
:focus-visible {
  outline: none;
}

body.keyboard-nav :focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent, #7fc7d9) 55%, transparent);
  outline-offset: 1px;
}

body.node-boot-loading,
body.node-boot-fading {
  overflow-x: hidden;
}

body.node-boot-loading .shell,
body.node-boot-fading .shell {
  visibility: hidden;
}

.node-boot-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  background: #000000;
  color: rgba(243, 241, 236, 0.82);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 1;
}

.node-boot-loading-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  /* Slim side padding so soundemote.io/{patch} can use near-full viewport width. */
  padding: 5vh clamp(0.4rem, 1vw, 1rem);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.node-boot-secure-context-banner {
  max-width: min(92vw, 40rem);
  margin: 0 auto;
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(255, 140, 90, 0.55);
  border-radius: 0.65rem;
  background: rgba(255, 95, 81, 0.14);
  color: rgba(255, 210, 190, 0.95);
  font-size: clamp(0.85rem, 2.2vw, 1.05rem);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}



body.node-boot-waiting .node-boot-loading-label,
body.node-boot-waiting .node-boot-loading-bar,
body.node-boot-waiting .node-boot-loading-messages {
  display: none;
}

body:not(.node-boot-waiting) .node-boot-start-button {
  display: none;
}
/* Start page only: treat the overlay as normal text. Body is user-select:none
 * for the graph UI, which leaves a selected hero title stuck when you click
 * empty chrome. */
body.node-boot-waiting .node-boot-loading-screen {
  user-select: text;
  -webkit-user-select: text;
}



.node-boot-hero-title {
  margin: 0 0 0.35rem;
  padding: 0;
  /* Stretch across the panel (not max-content): leftover constraint after
   * max-width:100% was glyph size (~4.6rem) + 5vw side padding eating ~10%
   * of the viewport. Prefer one line on typical desktop. */
  align-self: stretch;
  max-width: none;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  color: rgba(243, 241, 236, 0.98);
  font-family: var(
    --node-header-title-font-family,
    "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace
  );
  font-size: clamp(1.55rem, 3.6vw, 2.95rem);
  font-weight: 700;
  letter-spacing: 0.008em;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 0 28px rgba(127, 199, 217, 0.35);
  overflow-wrap: break-word;
  word-break: normal;
  user-select: text;
  -webkit-user-select: text;
}

body:not(.node-boot-waiting) .node-boot-hero-title {
  display: none;
}

/* Boot menu links: same chrome as START SANDBOX */
.node-boot-menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: min(90vw, 28rem);
}

body:not(.node-boot-waiting) .node-boot-menu-links {
  display: none;
}

.node-boot-start-button,
.node-boot-discord-button,
.node-boot-menu-rect {
  appearance: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  min-width: min(90vw, 28rem);
  padding: 1.15rem 2.4rem;
  border: 1px solid rgba(127, 199, 217, 0.45);
  border-radius: 0.85rem;
  background: linear-gradient(180deg, rgba(127, 199, 217, 0.22), rgba(127, 199, 217, 0.08));
  color: rgba(243, 241, 236, 0.96);
  font-family: inherit;
  font-size: clamp(1.15rem, 3.2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-decoration: none;
  cursor: default;
  box-shadow: 0 0 28px rgba(127, 199, 217, 0.18);
}

.node-boot-start-button:hover,
.node-boot-start-button:focus-visible,
.node-boot-discord-button:hover,
.node-boot-discord-button:focus-visible,
.node-boot-menu-rect:hover,
.node-boot-menu-rect:focus-visible {
  border-color: rgba(243, 241, 236, 0.7);
  background: linear-gradient(180deg, rgba(127, 199, 217, 0.34), rgba(127, 199, 217, 0.14));
  outline: none;
}

.node-boot-start-button:active,
.node-boot-discord-button:active,
.node-boot-menu-rect:active {
  transform: translateY(1px);
}

.node-boot-discord-icon,
.node-boot-youtube-icon {
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
}


/* Bottom row: middle pair = full menu/rect column width; squares sit outside. */
.node-boot-menu-bottom-row {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* Two half-rects together match one full rect above (100% of menu column). */
.node-boot-menu-half-pair {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

.node-boot-menu-rect.node-boot-menu-rect-half {
  width: auto;
  min-width: 0;
  flex: 1 1 0;
  height: 4.25rem;
  padding: 0 0.7rem;
  font-size: clamp(0.78rem, 2.1vw, 1.05rem);
  letter-spacing: 0.02em;
}

/* Squares flank the half-pair outside the full-rect column edges. */
.node-boot-menu-squares {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.node-boot-menu-squares-left {
  right: calc(100% + 1.5rem);
}

.node-boot-menu-squares-right {
  left: calc(100% + 1.5rem);
}

.node-boot-email-button,
.node-boot-youtube-button {
  appearance: none;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(127, 199, 217, 0.45);
  border-radius: 0.85rem;
  background: linear-gradient(180deg, rgba(127, 199, 217, 0.22), rgba(127, 199, 217, 0.08));
  color: rgba(243, 241, 236, 0.96);
  text-decoration: none;
  cursor: default;
  box-shadow: 0 0 28px rgba(127, 199, 217, 0.18);
}

.node-boot-email-button:hover,
.node-boot-email-button:focus-visible,
.node-boot-youtube-button:hover,
.node-boot-youtube-button:focus-visible {
  border-color: rgba(243, 241, 236, 0.7);
  background: linear-gradient(180deg, rgba(127, 199, 217, 0.34), rgba(127, 199, 217, 0.14));
  outline: none;
}

.node-boot-email-button:active,
.node-boot-youtube-button:active {
  transform: translateY(1px);
}

.node-boot-logo-button {
  cursor: pointer;
  overflow: hidden;
}

.node-boot-logo-icon {
  display: block;
  width: 2.7rem;
  height: 2.7rem;
  object-fit: contain;
  pointer-events: none;
}

.node-boot-email-emoji {
  font-size: 1.6rem;
  line-height: 1;
}

.node-boot-youtube-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: #FF0000;
}

.node-boot-loading-label {
  font-size: clamp(2.8rem, 7vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
  width: 100%;
}

.node-boot-loading-bar {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 18px;
  border: 1px solid rgba(127, 199, 217, 0.22);
  border-radius: 999px;
  background: rgba(127, 199, 217, 0.07);
  flex-shrink: 0;
}

.node-boot-loading-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(127, 199, 217, 0.42), rgba(243, 241, 236, 0.92));
  box-shadow: 0 0 18px rgba(127, 199, 217, 0.34);
}

.node-boot-loading-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 0.6em;
  width: 100%;
  user-select: text;
  cursor: text;
}

.node-boot-build-number {
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0.38;
  white-space: nowrap;
}

.node-boot-sysinfo {
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.28;
  line-height: 1.5;
  text-align: center;
}

.node-boot-sysinfo:not(:empty)::before {
  content: "\00b7\00a0\00a0";
  opacity: 0.5;
}

.node-boot-loading-messages {
  margin-top: auto;
  width: 100%;
  overflow-y: auto;
  max-height: 8rem;
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.4;
  display: flex;
  flex-direction: column-reverse;
  text-align: center;
}

.node-boot-loading-message {
  padding: 0.15rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

body.node-boot-loading .node-boot-loading-screen,
body.node-boot-fading .node-boot-loading-screen {
  display: block;
}

body.node-boot-fading .node-boot-loading-screen {
  opacity: 0;
}

body.node-boot-ready .node-boot-loading-screen {
  display: none;
}

.dsp-node.output-node .node-module-scope-window,
.dsp-node.output-node .node-module-display-face {
  position: relative;
}

body.node-ear-protection-tripped {
  --node-ear-protection-color: rgba(255, 95, 81, 0.92);
}

.node-ear-protection-fault {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: none;
  place-items: center;
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 95, 81, 0.13), transparent 34%),
    rgba(0, 0, 0, 0.46);
  animation: nodeEarProtectionVeil 520ms ease-out both;
}

body.node-ear-protection-tripped .node-ear-protection-fault {
  display: grid;
}

.node-ear-protection-fault-panel {
  min-inline-size: min(520px, calc(100vw - 32px));
  max-inline-size: min(680px, calc(100vw - 32px));
  padding: 18px 22px;
  border: 1px solid rgba(255, 95, 81, 0.42);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(255, 95, 81, 0.08), rgba(127, 199, 217, 0.06)),
    rgba(5, 7, 9, 0.92);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.86),
    0 0 32px rgba(255, 95, 81, 0.25),
    inset 0 0 24px rgba(255, 95, 81, 0.06);
  color: var(--text);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  text-align: center;
  pointer-events: auto;
  user-select: text;
  animation: nodeEarProtectionPanel 720ms cubic-bezier(0.2, 1, 0.2, 1) both;
}

.node-ear-protection-fault-panel > * {
  display: block;
  user-select: text;
}

.node-ear-protection-fault-kicker {
  color: rgba(255, 150, 140, 0.88);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.node-ear-protection-fault-title {
  margin-block: 8px 4px;
  color: var(--node-ear-protection-color);
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 0 18px rgba(255, 95, 81, 0.44);
}

/* Primary recovery message — most important line after the title. */
.node-ear-protection-fault-paused {
  margin: 10px auto 6px;
  color: rgba(255, 214, 120, 0.98);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 0 14px rgba(255, 190, 80, 0.35);
}

.node-ear-protection-fault-detail {
  color: rgba(243, 241, 236, 0.92);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

.node-ear-protection-fault-reset {
  margin-top: 10px;
  color: rgba(127, 199, 217, 0.82);
  font-size: 0.78rem;
}

.node-ear-protection-fault-close {
  width: min(220px, 100%);
  margin: 16px auto 0;
  padding: 10px 14px;
  border: 1px solid rgba(127, 199, 217, 0.45);
  border-radius: 6px;
  background: rgba(17, 20, 24, 0.9);
  color: rgba(243, 241, 236, 0.96);
  font: 700 0.9rem/1 "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  pointer-events: auto;
  user-select: none;
}

.node-ear-protection-fault-close:hover,
.node-ear-protection-fault-close:focus-visible {
  border-color: rgba(127, 199, 217, 0.8);
  background: rgba(28, 36, 42, 0.96);
  outline: 0;
}

.node-ear-protection-fault-explain {
  max-inline-size: 52em;
  margin: 12px auto 0;
  color: rgba(243, 241, 236, 0.62);
  font-size: 0.76rem;
  line-height: 1.45;
}

.node-ear-protection-fault-contact {
  display: block;
  max-inline-size: 52em;
  margin: 14px auto 0;
  color: rgba(243, 241, 236, 0.88);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
}

.node-ear-protection-fault-email {
  display: inline-block;
  width: fit-content;
  max-inline-size: 100%;
  margin-top: 8px;
  color: rgba(140, 220, 255, 0.98);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-shadow: 0 0 16px rgba(100, 190, 255, 0.35);
  word-break: break-all;
}

.node-ear-protection-fault-email:hover,
.node-ear-protection-fault-email:focus-visible {
  color: rgba(190, 240, 255, 1);
  text-decoration: underline;
  outline: 0;
}

/* Patch load hard-fail — modal like speaker protector; Copy / Initialize / Close. */
body.node-patch-load-fault-open {
  --node-patch-load-fault-color: rgba(255, 160, 90, 0.95);
}

.node-patch-load-fault {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: none;
  place-items: center;
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 150, 70, 0.12), transparent 36%),
    rgba(0, 0, 0, 0.52);
}

body.node-patch-load-fault-open .node-patch-load-fault {
  display: grid;
}

.node-patch-load-fault-panel {
  min-inline-size: min(520px, calc(100vw - 32px));
  max-inline-size: min(720px, calc(100vw - 32px));
  max-block-size: min(90vh, 860px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px 16px;
  border: 1px solid rgba(255, 160, 90, 0.42);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(255, 150, 70, 0.08), rgba(127, 199, 217, 0.05)),
    rgba(5, 7, 9, 0.94);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.86),
    0 0 28px rgba(255, 140, 60, 0.22);
  color: var(--text);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  text-align: left;
  pointer-events: auto;
  user-select: text;
  overflow: hidden;
}

.node-patch-load-fault-kicker {
  color: rgba(255, 180, 120, 0.9);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.node-patch-load-fault-title {
  margin: 0;
  color: var(--node-patch-load-fault-color, rgba(255, 160, 90, 0.95));
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 0 16px rgba(255, 140, 60, 0.35);
}

.node-patch-load-fault-detail {
  margin: 4px 0 0;
  max-block-size: 7.5em;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid rgba(255, 160, 90, 0.22);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 230, 200, 0.95);
  font: 600 0.78rem/1.4 "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.node-patch-load-fault-script-label {
  margin-top: 6px;
  color: rgba(243, 241, 236, 0.72);
  font-size: 0.72rem;
  font-weight: 600;
}

.node-patch-load-fault-script {
  display: block;
  width: 100%;
  min-height: 7.5rem;
  max-height: 14rem;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(127, 199, 217, 0.28);
  border-radius: 4px;
  background: rgba(8, 10, 12, 0.92);
  color: rgba(210, 230, 240, 0.92);
  font: 0.72rem/1.35 "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  resize: vertical;
  overflow: auto;
  white-space: pre;
  tab-size: 2;
}

.node-patch-load-fault-script:focus {
  outline: 0;
  border-color: rgba(127, 199, 217, 0.55);
}

.node-patch-load-fault-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.node-patch-load-fault-copy,
.node-patch-load-fault-init,
.node-patch-load-fault-close {
  min-width: min(160px, 100%);
  padding: 10px 14px;
  border-radius: 6px;
  font: 700 0.88rem/1 "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  cursor: var(--node-dot-cursor);
  user-select: none;
  pointer-events: auto;
}

.node-patch-load-fault-copy {
  border: 1px solid rgba(127, 199, 217, 0.45);
  background: rgba(17, 20, 24, 0.9);
  color: rgba(243, 241, 236, 0.96);
}

.node-patch-load-fault-copy:hover,
.node-patch-load-fault-copy:focus-visible {
  border-color: rgba(127, 199, 217, 0.8);
  background: rgba(28, 36, 42, 0.96);
  outline: 0;
}

.node-patch-load-fault-init {
  border: 1px solid rgba(255, 160, 90, 0.55);
  background: rgba(48, 28, 12, 0.92);
  color: rgba(255, 230, 200, 0.98);
}

.node-patch-load-fault-init:hover,
.node-patch-load-fault-init:focus-visible {
  border-color: rgba(255, 180, 110, 0.85);
  background: rgba(64, 36, 14, 0.96);
  outline: 0;
}

.node-patch-load-fault-close {
  border: 1px solid rgba(180, 190, 200, 0.35);
  background: rgba(14, 16, 18, 0.92);
  color: rgba(230, 232, 236, 0.92);
}

.node-patch-load-fault-close:hover,
.node-patch-load-fault-close:focus-visible {
  border-color: rgba(220, 225, 230, 0.55);
  background: rgba(28, 32, 36, 0.96);
  outline: 0;
}

.node-missing-sample-assets {
  display: none !important;
}

.node-missing-sample-assets[hidden] {
  display: none;
}

.node-missing-sample-assets-panel {
  display: grid;
  gap: 9px;
  width: min(640px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow: auto;
  padding: 16px 18px;
  border: 1px solid rgba(240, 197, 111, 0.5);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(240, 197, 111, 0.09), rgba(127, 199, 217, 0.055)),
    rgba(5, 7, 9, 0.94);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(240, 197, 111, 0.18);
  color: var(--text);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  pointer-events: auto;
}

.node-missing-sample-assets-kicker,
.node-missing-sample-assets-explain {
  color: rgba(243, 241, 236, 0.72);
  font-size: 0.78rem;
}

.node-missing-sample-assets-panel > strong {
  color: rgba(240, 197, 111, 0.96);
  font-size: 1.1rem;
  line-height: 1.1;
}

.node-missing-sample-assets-list {
  display: grid;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.node-missing-sample-assets-list li {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(127, 199, 217, 0.2);
  border-radius: 4px;
  background: rgba(12, 17, 20, 0.72);
}

.node-missing-sample-assets-list strong {
  color: rgba(243, 241, 236, 0.94);
  font-size: 0.9rem;
}

.node-missing-sample-assets-list span,
.node-missing-sample-assets-list small {
  overflow-wrap: anywhere;
  color: rgba(174, 180, 187, 0.9);
  font-size: 0.74rem;
}

.node-missing-sample-assets-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.node-missing-sample-assets-controls #nodeMissingSampleAssetsPath {
  min-width: 0;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(127, 199, 217, 0.28);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(243, 241, 236, 0.92);
  font: 600 0.82rem/1.2 "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
}

.node-missing-sample-assets-controls input {
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid rgba(127, 199, 217, 0.22);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(243, 241, 236, 0.92);
  font: 600 0.76rem/1.1 "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
}

.node-missing-sample-assets-controls button {
  padding: 6px 10px;
  border: 1px solid rgba(127, 199, 217, 0.28);
  border-radius: 4px;
  background: rgba(19, 25, 29, 0.88);
  color: rgba(243, 241, 236, 0.9);
  font: 700 1rem/1.1 "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
}

.node-missing-sample-assets-controls button:hover,
.node-missing-sample-assets-controls button:focus-visible,
.node-missing-sample-assets-controls input:focus {
  border-color: rgba(127, 199, 217, 0.6);
  outline: 0;
}

.node-missing-sample-assets-status {
  min-height: 1em;
  color: rgba(127, 199, 217, 0.86);
}

.node-missing-sample-assets-close {
  justify-self: center;
  min-width: 180px;
  padding: 8px 14px;
  border: 1px solid rgba(127, 199, 217, 0.36);
  border-radius: 6px;
  background: rgba(17, 20, 24, 0.82);
  color: rgba(243, 241, 236, 0.92);
  font: 700 0.82rem/1 "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
}

.node-missing-sample-assets-close:hover,
.node-missing-sample-assets-close:focus-visible {
  border-color: rgba(127, 199, 217, 0.68);
  background: rgba(24, 31, 36, 0.92);
  outline: 0;
}

body.node-sample-load-lock-open {
  overflow: hidden;
}

.node-sample-load-lock {
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: none;
  place-items: center;
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 46%, rgba(80, 180, 160, 0.12), transparent 38%),
    rgba(0, 0, 0, 0.62);
}

body.node-sample-load-lock-open .node-sample-load-lock {
  display: grid;
}

.node-sample-load-lock[hidden] {
  display: none !important;
}

.node-sample-load-lock-panel {
  box-sizing: border-box;
  width: min(520px, calc(100vw - 32px));
  min-inline-size: min(520px, calc(100vw - 32px));
  max-inline-size: min(520px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 18px 22px 16px;
  border: 1px solid rgba(120, 220, 190, 0.4);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(40, 120, 100, 0.1), rgba(127, 199, 217, 0.05)),
    rgba(5, 7, 9, 0.96);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.86), 0 0 28px rgba(40, 160, 120, 0.2);
  color: var(--text);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  text-align: center;
}

.node-sample-load-lock-kicker {
  color: rgba(160, 230, 200, 0.88);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.node-sample-load-lock-title {
  margin-block: 8px 4px;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: 0;
}

.node-sample-load-lock-progress {
  margin: 10px 0 6px;
  color: rgba(180, 255, 220, 0.98);
  font-size: 1.12rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.node-sample-load-lock-detail,
.node-sample-load-lock-ram {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 1.4em;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: rgba(210, 230, 225, 0.88);
}

.node-sample-load-lock-close {
  width: min(220px, 100%);
  min-height: 38px;
  margin: 16px auto 0;
  padding: 10px 14px;
  border: 1px solid rgba(127, 199, 217, 0.45);
  border-radius: 6px;
  background: rgba(17, 20, 24, 0.9);
  color: rgba(243, 241, 236, 0.96);
  font: 700 0.9rem/1 "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  visibility: hidden;
  pointer-events: none;
}

.node-sample-load-lock-close:not([hidden]) {
  visibility: visible;
  pointer-events: auto;
}

.node-sample-load-lock-close[hidden] {
  display: block;
}

.node-sample-load-lock-close:hover,
.node-sample-load-lock-close:focus-visible {
  border-color: rgba(127, 199, 217, 0.8);
  background: rgba(28, 36, 42, 0.96);
  outline: 0;
}

@keyframes nodeEarProtectionVeil {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes nodeEarProtectionPanel {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  48% {
    opacity: 1;
    transform: scale(1.012);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes nodeTextCaretBlink {
  0%,
  89.999% {
    caret-color: var(--node-editor-caret-color, rgba(255, 255, 255, 0.98));
  }

  90%,
  100% {
    caret-color: transparent;
  }
}

/* 1.8s on / 0.2s off, one blink per 2 whole seconds. */
:is(
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  textarea,
  [contenteditable="true"]
):not(.node-text-box-input):not([readonly]):not(:disabled):focus,
.node-text-box-input:focus,
.node-header-title[data-title-editing="1"]:focus {
  --node-editor-caret-color: currentColor;
  animation: nodeTextCaretBlink 2s steps(1, end) infinite;
}

.shell {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.audio-panel p,
.summary-card > span:first-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: none;
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 650;
  letter-spacing: 0;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1rem;
}

h3 {
  font-size: 0.95rem;
}

button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
}

button:hover {
  border-color: var(--accent);
}

/* Jacks are <button>s — crescent is inset box-shadow, not border. */
button.node-port:hover,
button.node-param-port:hover {
  border-color: transparent;
}

button:disabled {
  opacity: 0.62;
}

:root {
  --node-floating-window-header-height: 30px;
  --node-floating-window-button-height: 30px;
  --node-unified-window-min-width: 24px;
  --node-unified-window-min-height: 120px;
  /* Singular Command Center floating seat — keep JS DefaultSize in sync. */
  --node-unified-window-default-width: 380px;
  --node-unified-window-default-height: 620px;
  --node-unified-window-max-width: 980px;
  --node-front-button-hover-border: rgba(127, 199, 217, 0.18);
  --node-front-button-hover-color: rgba(190, 198, 208, 0.86);
  --node-front-button-hover-bg: rgba(17, 20, 24, 0.7);
  /* Shared hover / selected look for flat buttons and list rows (DOM and GL HUD).
     Mixes the element's own text color, so it fits any palette. Hover is a clear
     tint; selected is a stronger fill (no ring) and stays selected on hover. */
  --node-ui-hover-mix: 26%;
  --node-ui-selected-mix: 55%;
  --node-ui-hover-bg: color-mix(in srgb, currentColor var(--node-ui-hover-mix), transparent);
  --node-ui-selected-bg: color-mix(in srgb, currentColor var(--node-ui-selected-mix), transparent);
  --node-front-construction-hover-bg:
    repeating-linear-gradient(
      135deg,
      rgba(226, 168, 109, 0.18) 0 8px,
      transparent 8px 16px
    ),
    rgba(17, 20, 24, 0.7);
}

:where(
  .node-view-toolbar button,
  .node-toolbar-hsl-control,
  .node-graph-controls button:not(.node-debug-hidden-control),
  .node-script-actions button,
  .node-settings-actions button:not(.node-settings-disabled-action),
  .node-settings-actions .node-settings-link-action,
  .node-ui-dev-actions button,
  .node-user-ui-settings-actions button
):not(.node-patch-community-control):not(.node-under-construction-view-button):not(:disabled):not(.active):not(.confirming-default):not(.saved-default):hover,
:where(
  .node-view-toolbar button,
  .node-toolbar-hsl-control,
  .node-graph-controls button:not(.node-debug-hidden-control),
  .node-script-actions button,
  .node-settings-actions button:not(.node-settings-disabled-action),
  .node-settings-actions .node-settings-link-action,
  .node-ui-dev-actions button,
  .node-user-ui-settings-actions button
):not(.node-patch-community-control):not(.node-under-construction-view-button):not(:disabled):not(.active):not(.confirming-default):not(.saved-default):focus-visible {
  border-color: var(--node-front-button-hover-border);
  background: var(--node-front-button-hover-bg);
  box-shadow: none;
  color: var(--node-front-button-hover-color);
}

:where(
  .node-patch-community-control,
  .node-under-construction-view-button,
  .node-settings-disabled-action
):hover,
:where(
  .node-patch-community-control,
  .node-under-construction-view-button,
  .node-settings-disabled-action
):focus-visible {
  border-color: var(--node-front-button-hover-border);
  background: var(--node-front-construction-hover-bg);
  box-shadow: none;
  color: var(--node-front-button-hover-color);
}

.panel-close-button {
  display: inline-grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  flex: 0 0 2em;
  inline-size: 2em;
  min-inline-size: 2em;
  max-inline-size: 2em;
  block-size: 2em;
  min-block-size: 2em;
  max-block-size: 2em;
  overflow: visible;
  padding: 0;
  color: var(--accent);
  font-size: 0;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* Optical X — two bars through the button center (not a low-sitting × glyph).
   Fixed px bars; do not use % + overflow:hidden (clips the rotated arms). */
.panel-close-button > span,
.panel-close-glyph {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  color: inherit;
  font-size: 0;
  line-height: 0;
}

.panel-close-button > span::before,
.panel-close-button > span::after,
.panel-close-glyph::before,
.panel-close-glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  margin: 0;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}

.panel-close-button > span::after,
.panel-close-glyph::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}


.panel,
.audio-panel {
  background: var(--panel);
}





.audio-panel {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 360px);
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

audio {
  justify-self: end;
  width: min(100%, 360px);
  max-width: 360px;
}

#audioTitle {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.2;
}

.node-sample-panel {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  min-height: 58px;
  gap: 7px;
  padding: 6px 8px;
}

.node-sample-identity {
  display: grid;
  grid-template-columns: auto minmax(74px, 112px) minmax(88px, 116px) minmax(0, 1fr);
  grid-template-rows: minmax(42px, auto);
  min-width: 0;
  align-items: stretch;
  gap: 6px;
}

/* Sample/Music Player controls are a flush segmented stack, like the header
   timing widgets: no outer padding, no gaps, square corners, every row the
   same height, dividers instead of separate floating boxes. The old
   2px-gap / 6px-8px-padding treatment was the odd one out in the app. */
.node-sample-module-body {
  --node-sample-control-height: var(--node-body-row-height, 22px);
  --node-sample-control-line: rgba(0, 2, 4, 0.82);
  display: grid;
  align-content: start;
  gap: 0;
  padding: 0;
}

.node-sample-module-body > * {
  border-radius: 0;
}

.node-sample-name,
.node-sample-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

/* Empty-state rows collapse instead of reserving height -- the Music Player's
   waveform draws its own "No sample loaded" placeholder, so these would just
   be a duplicate. See applyNodeGraphSampleTextRow in node-graph-samples.js. */
.node-sample-name[hidden],
.node-sample-status[hidden] {
  display: none;
}

.node-sample-name {
  color: var(--text);
  font-size: 0.78rem;
}

.node-sample-status {
  color: var(--muted);
  font-size: 0.64rem;
  text-transform: uppercase;
}

.node-sample-phase-readout {
  display: grid;
  /* Copy button first, then the number. Square cell, row height shared with
     every other control in this body. */
  grid-template-columns: var(--node-sample-control-height) minmax(0, 1fr);
  align-items: stretch;
  height: var(--node-sample-control-height);
  min-height: 0;
  gap: 0;
  padding: 0;
  border: 0;
  border-block-end: 1px solid var(--node-sample-control-line);
  background: rgba(2, 5, 8, 0.52);
  color: var(--muted);
  font: 0.62rem/1 var(--mono);
  /* Doubles as the module's drag handle (attachNodeGraphNodeEvents).
     Arrow only when move is available — see :not(.movement-locked) block. */
  cursor: var(--node-default-cursor);
}

.node-sample-phase-readout strong {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0 4px;
  color: #9fe7f6;
  font: inherit;
  text-align: center;
}

.node-sample-copy-phase-button,
.node-sample-path-button {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  width: var(--node-sample-control-height);
  min-width: var(--node-sample-control-height);
  height: var(--node-sample-control-height);
  min-height: var(--node-sample-control-height);
  padding: 0;
  /* No vertical rule between an icon button and the field it acts on -- the
     button and its readout are one control, and a divider there just chopped
     the row in half. The horizontal rules between rows carry the separation
     instead (see the border-block-end on the phase readout and file picker),
     which is what actually needs telling apart: the clipboard row above and
     the folder row below. */
  border: 0;
  border-radius: 0;
  font-family: var(--mono);
  font-size: calc(var(--node-sample-control-height) * 0.72);
  line-height: 1;
  white-space: nowrap;
}

.node-sample-file-picker {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--node-sample-control-height);
  min-height: var(--node-sample-control-height);
  border: 0;
  border-block-end: 1px solid var(--node-sample-control-line);
  border-radius: 0;
  overflow: hidden;
}

.node-sample-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.node-sample-path-loader {
  display: grid;
  /* Folder button first, then the path box. */
  grid-template-columns: var(--node-sample-control-height) minmax(0, 1fr);
  align-items: stretch;
  height: var(--node-sample-control-height);
  gap: 0;
}

.node-sample-path-loader.path-only {
  grid-template-columns: minmax(0, 1fr);
}

.node-sample-path-input {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(2, 5, 8, 0.82);
  color: var(--text);
  font: 0.62rem var(--mono);
  padding: 0 4px;
}

/* Read-only until double-clicked (see createNodeGraphSampleModuleBody). */
.node-sample-path-input[readonly] {
  cursor: var(--node-dot-cursor);
  user-select: none;
  caret-color: transparent;
}

.node-sample-path-input.editing {
  border-color: rgba(127, 199, 217, 0.52);
  cursor: text;
}

/* Square icon button -- the label is on aria-label, the face is the emoji.
   Size/border shared with .node-sample-copy-phase-button above. */
.node-sample-path-button {
  font-size: calc(var(--node-sample-control-height) * 0.72);
}

/* The global `button:hover { border-color: var(--accent) }` lit up the only
   border these two have -- the 1px divider on their inline end -- as a bright
   stroke down one edge. Hover feedback is a background lift instead. */
button.scw-control:hover,
button.scw-label:hover,
.scw-root button:hover {
  border-color: var(--color-widget-control-border, transparent);
  box-shadow: none;
  outline: none;
}

.node-sample-copy-phase-button:hover,
.node-sample-copy-phase-button:focus-visible,
.node-sample-path-button:hover,
.node-sample-path-button:focus-visible {
  border-color: var(--node-sample-control-line);
  outline: none;
  background: rgba(127, 199, 217, 0.10);
}

/* ── Music Player face: waveform ↔ playlist (pl) ───────────────────────── */
/* Display cell size is fixed by the module grid. Wave and playlist pages are
   absolute overlays of that cell (not flex siblings that re-split height).
   Author `display:flex` must NOT beat the HTML hidden attribute or both
   pages stay visible and slowly steal space from the waveform. */
.node-sample-waveform-display {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  --sample-waveform-hud-font: 600 11px/1 system-ui, sans-serif;
  --sample-waveform-hud-font-sm: 600 10px/1 system-ui, sans-serif;
  --sample-waveform-hud-color: hsla(140, 90%, 57%, 0.55);
  --sample-waveform-hud-color-hot: hsla(140, 90%, 85%, 0.7);
  --sample-waveform-hud-color-dim: hsla(140, 90%, 57%, 0.28);
  --node-music-player-pl-row-height: 1.35rem;
}
/* Music Player faces are often only a few hundred pixels wide. Keep the HUD
   type inside its cells as the display shrinks, without changing the shared
   sample/wavetable displays. */
.node-sample-waveform-display[data-node-type="audioPlayer"] {
  container-type: inline-size;
  --sample-waveform-hud-font: 600 clamp(8px, 2.6cqi, 10px)/1 system-ui, sans-serif;
  --sample-waveform-hud-font-sm: 600 clamp(7px, 2.3cqi, 9px)/1 system-ui, sans-serif;
}
/* Playlist row text is sized from the row itself (see .node-music-player-pl-row). */
/* Keep the now-playing label and face tabs clipped to their cells too. */
.node-sample-waveform-display[data-node-type="audioPlayer"] .node-music-player-face-btn,
.node-sample-waveform-display[data-node-type="audioPlayer"] .node-music-player-waveplay-song .node-music-player-pl-name,
.node-sample-waveform-display[data-node-type="audioPlayer"] .node-music-player-page-btn {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Wavetable 2D: result / Morph preview (one cycle) / Warp boxes. */
.node-sample-waveform-display.has-wavetable-morph-strip {
  display: flex;
  flex-direction: column;
}
.node-sample-waveform-display.has-wavetable-morph-strip .node-sample-waveform-canvas {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  width: 100%;
  height: auto;
}
.node-wavetable-morph-preview {
  flex: 0 0 56px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  border-top: 1px solid hsla(140, 40%, 40%, 0.25);
  overflow: hidden;
  cursor: ew-resize;
}
.node-wavetable-morph-preview-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.node-wavetable-warp-strip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  gap: 3px;
  padding: 3px 4px 4px;
  border-top: 1px solid hsla(140, 40%, 40%, 0.25);
  overflow: hidden;
}
.node-wavetable-warp-slot {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 30px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 1px solid hsla(140, 50%, 45%, 0.35);
  border-radius: 3px;
  background: hsla(140, 30%, 12%, 0.55);
  cursor: pointer;
  overflow: hidden;
}
.node-wavetable-warp-slot.is-selected {
  border-color: hsla(140, 80%, 62%, 0.95);
  box-shadow: 0 0 0 1px hsla(140, 80%, 62%, 0.35);
}
.node-wavetable-warp-slot-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.node-music-player-face-bar {
  position: absolute;
  top: calc(
    var(--sample-waveform-inset, 2px)
    + 1px
    + var(--sample-waveform-label-inset, 0px)
  );
  left: calc(
    var(--sample-waveform-inset, 2px)
    + 1px
    + var(--sample-waveform-label-inset, 0px)
  );
  z-index: 8;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.node-music-player-face-bar > * {
  pointer-events: auto;
}
.node-sample-waveform-display:not([data-music-player-face="wave"]) .node-music-player-face-bar {
  display: none;
}
/* Zoom % is a drag control but must look like the canvas HUD ("No sample loaded"
   / speed label): 600 system-ui, phosphor line color, no button chrome. */
.node-sample-waveform-zoom,
.node-music-player-face-btn,
.node-music-player-pl-row,
.node-music-player-pl-ram {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--sample-waveform-hud-color);
  font: var(--sample-waveform-hud-font);
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
  outline: none;
}
.node-sample-waveform-zoom {
  position: absolute;
  z-index: 8;
  top: calc(
    1px
    + var(--sample-waveform-label-inset, 0px)
  );
  right: calc(
    1px
    + var(--sample-waveform-label-inset, 0px)
  );
  left: auto;
  height: auto;
  font: var(--sample-waveform-hud-font-sm);
  color: var(--sample-waveform-hud-color);
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.node-sample-waveform-zoom:hover,
.node-sample-waveform-zoom:focus-visible,
.node-sample-waveform-zoom.is-dragging {
  outline: none;
  background: transparent;
  color: var(--sample-waveform-hud-color-hot);
}
.node-sample-waveform-display:not([data-music-player-face="wave"]):not([data-music-player-face="waveplay"]) .node-sample-waveform-zoom {
  display: none;
}
.node-music-player-face-btn {
  height: auto;
  font: var(--sample-waveform-hud-font-sm);
  line-height: 1.2;
  color: var(--sample-waveform-hud-color);
  cursor: var(--node-dot-cursor);
}
.node-music-player-face-btn:hover,
.node-music-player-face-btn:focus-visible,
.node-music-player-page-btn:hover,
.node-music-player-page-btn:focus-visible,
.node-music-player-pl-transport-btn:hover,
.node-music-player-pl-transport-btn:focus-visible {
  color: var(--sample-waveform-hud-color-hot);
  background: var(--node-ui-hover-bg);
  outline: none;
}
.node-music-player-face-btn.is-active,
.node-music-player-page-btn.is-active,
.node-music-player-pl-transport-btn.is-active {
  color: var(--sample-waveform-hud-color-hot);
  background: var(--node-ui-selected-bg);
  outline: none;
}
/* Fill the display content box (section padding already applies Edge Spacing). */
.node-music-player-page {
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--node-music-player-pl-row-height, 1.35rem);
  left: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
/* Critical: class `display:flex` would otherwise override [hidden]. */
.node-music-player-page[hidden] {
  display: none !important;
}
.node-music-player-page-wave {
  z-index: 2;
  bottom: var(--node-music-player-pl-row-height, 1.35rem);
}
.node-music-player-page-wave .node-sample-waveform-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  /* Buffer is sized to this box — never letterbox-stretch glyphs. */
  object-fit: fill;
  image-rendering: auto;
}
.node-music-player-page-pl,
.node-music-player-page-playinfo {
  top: 0;
  right: 0;
  bottom: var(--node-music-player-pl-row-height, 1.35rem);
  left: 0;
  z-index: 2;
  gap: 0;
  padding: 0;
  border: 0;
  outline: none;
  box-shadow: none;
  background: #050805;
  color: var(--sample-waveform-hud-color);
  font: var(--sample-waveform-hud-font);
  overflow: hidden;
}
.node-music-player-page-waveplay {
  top: 0;
  right: 0;
  bottom: var(--node-music-player-pl-row-height, 1.35rem);
  left: 0;
  z-index: 3;
  overflow: hidden;
}
.node-music-player-waveplay-wave {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.node-music-player-waveplay-wave .node-sample-waveform-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
}
.node-music-player-waveplay-song {
  flex: 0 0 var(--node-music-player-pl-row-height, 1.35rem);
  container-type: size;
  display: flex;
  align-items: center;
  z-index: 6;
  width: 100%;
  height: var(--node-music-player-pl-row-height, 1.35rem);
  min-height: var(--node-music-player-pl-row-height, 1.35rem);
  max-height: var(--node-music-player-pl-row-height, 1.35rem);
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 var(--sample-waveform-hud-color-dim);
  background: #050805;
  color: var(--sample-waveform-hud-color);
  font: var(--sample-waveform-hud-font);
  line-height: 1.2;
  overflow: hidden;
}
.node-music-player-waveplay-song .node-music-player-pl-name {
  grid-column: auto;
  grid-row: auto;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0 8px;
  border: 0 !important;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 70cqh;
  line-height: 100cqh;
  text-align: left;
  cursor: var(--node-dot-cursor);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.node-music-player-waveplay-song:hover,
.node-music-player-waveplay-song:focus-visible {
  color: var(--sample-waveform-hud-color-hot);
  background: #050805;
  outline: none;
}
.node-music-player-page-vs {
  top: calc(-1 * var(--sample-waveform-inset, 0px));
  right: calc(-1 * var(--sample-waveform-inset, 0px));
  bottom: calc(
    var(--node-music-player-pl-row-height, 1.35rem)
    - var(--sample-waveform-inset, 0px)
  );
  left: calc(-1 * var(--sample-waveform-inset, 0px));
  z-index: 2;
  background: #020503;
  overflow: hidden;
}
.node-music-player-page-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  height: var(--node-music-player-pl-row-height, 1.35rem);
  min-height: var(--node-music-player-pl-row-height, 1.35rem);
  max-height: var(--node-music-player-pl-row-height, 1.35rem);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sample-waveform-hud-color-dim);
  background: #050805;
}
.node-music-player-page-btn {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-right: 1px solid var(--sample-waveform-hud-color-dim) !important;
  border-radius: 0;
  background: transparent;
  color: var(--sample-waveform-hud-color);
  font: var(--sample-waveform-hud-font-sm);
  /* font-size: per button, set by nodeGraphAudioPlayerFitLabel (fills the box). */
  text-overflow: clip;
  /* A unit line-height clips the lowercase p descender at small sizes. */
  line-height: 1.2;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: var(--node-dot-cursor);
}
.node-music-player-page-btn:last-child {
  border-right: 0 !important;
}
.node-music-player-vs-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
}
.node-music-player-pl-transport {
  flex: 0 0 var(--node-music-player-pl-row-height, 1.35rem);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  height: var(--node-music-player-pl-row-height, 1.35rem);
  min-height: var(--node-music-player-pl-row-height, 1.35rem);
  max-height: var(--node-music-player-pl-row-height, 1.35rem);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-top: 1px solid var(--sample-waveform-hud-color-dim);
  background: #050805;
}
.node-music-player-pl-transport-btn {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-right: 1px solid var(--sample-waveform-hud-color-dim) !important;
  border-radius: 0;
  background: transparent;
  color: var(--sample-waveform-hud-color);
  font: var(--sample-waveform-hud-font);
  /* font-size: per button, set by nodeGraphAudioPlayerFitLabel (fills the box). */
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  outline: none;
  cursor: var(--node-dot-cursor);
}
.node-music-player-pl-transport-btn:last-child {
  border-right: 0 !important;
}
.node-music-player-pl-debug {
  display: none;
}
.node-sample-waveform-playlist-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin: 0;
}
.node-sample-waveform-playlist-actions > button {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
}
.node-music-player-pl-head {
  position: absolute;
  top: 2px;
  right: 4px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-height: 0;
  height: auto;
  padding: 0;
  pointer-events: none;
}
.node-music-player-pl-head > * {
  pointer-events: auto;
}
.node-music-player-pl-head:not(:has(> :not([hidden]))) {
  display: none;
}
/* RAM / debug toggle — also closes the debug panel (no extra ×). */
.node-music-player-pl-ram {
  justify-self: end;
  max-width: 40%;
  height: auto;
  min-height: 0;
  opacity: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: var(--node-dot-cursor);
}
.node-music-player-pl-ram[hidden] {
  display: none !important;
}
.node-music-player-pl-ram:hover,
.node-music-player-pl-ram:focus-visible,
.node-music-player-pl-ram[aria-pressed="true"] {
  color: var(--sample-waveform-hud-color-hot);
  background: transparent;
  outline: none;
}
.node-music-player-pl-ram.is-hog {
  color: var(--sample-waveform-hud-color-hot);
  background: transparent;
}
.node-music-player-page-playinfo .node-music-player-pl-ram-panel {
  flex: 1 1 0%;
  max-height: none;
}
.node-music-player-pl-ram-panel {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: none;
  min-height: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sample-waveform-hud-color);
  font: var(--sample-waveform-hud-font);
  overflow: hidden;
}
.node-music-player-pl-ram-panel[hidden] {
  display: none !important;
}
.node-music-player-pl-ram-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font: var(--sample-waveform-hud-font-sm);
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  color: var(--sample-waveform-hud-color);
}
.node-music-player-pl-ram-body {
  min-height: 0;
  overflow: auto;
  font: var(--sample-waveform-hud-font-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--sample-waveform-hud-color-dim) transparent;
}
.node-music-player-pl-ram-body::-webkit-scrollbar {
  width: 6px;
}
.node-music-player-pl-ram-body::-webkit-scrollbar-track {
  background: transparent;
}
.node-music-player-pl-ram-body::-webkit-scrollbar-thumb {
  background: var(--sample-waveform-hud-color-dim);
  border-radius: 0;
}
.node-music-player-pl-ram-summary {
  margin-bottom: 3px;
  opacity: 1;
}
.node-music-player-pl-ram-summary .is-hog {
  color: var(--sample-waveform-hud-color-hot);
  font-weight: 600;
}
.node-music-player-pl-ram-table {
  width: 100%;
  border-collapse: collapse;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.node-music-player-page-playinfo .node-music-player-pl-ram-summary,
.node-music-player-page-playinfo .node-music-player-pl-ram-head,
.node-music-player-page-playinfo .node-music-player-pl-ram-body,
.node-music-player-page-playinfo .node-music-player-pl-ram-table {
  font-size: calc(0.7 * var(--node-music-player-pl-row-height, 1.35rem));
  line-height: var(--node-music-player-pl-row-height, 1.35rem);
}
.node-music-player-pl-ram-table th,
.node-music-player-pl-ram-table td {
  padding: 0 8px;
  height: var(--node-music-player-pl-row-height, 1.35rem);
  border-bottom: 1px solid var(--sample-waveform-hud-color-dim);
  text-align: left;
  white-space: nowrap;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
}
.node-music-player-pl-ram-table th {
  opacity: 0.7;
  font-weight: 600;
}
.node-music-player-pl-ram-name {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.node-music-player-pl-ram-table tr[data-active="true"] {
  background: transparent;
  color: var(--sample-waveform-hud-color-hot);
}
.node-music-player-pl-ram-table tr[data-playing="true"] {
  background: var(--sample-waveform-hud-color-dim);
}
.node-music-player-pl-ram-table tr.is-heavy {
  color: var(--sample-waveform-hud-color-hot);
}
.node-music-player-pl-ram-empty {
  opacity: 0.6;
  text-align: center;
}

/* N slots equally split the list column. Wheel pages that window through the file list. */
.node-music-player-pl-list {
  --node-music-player-pl-row-height: 1.35rem;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  overscroll-behavior: contain;
}
.node-music-player-pl-list.is-single {
  padding: 8px;
}
.node-music-player-pl-list.is-single .node-music-player-pl-row {
  padding: 10px 14px;
  font-size: 1.25em;
}
/* Each row is a size container so its text scales with the row height (the
   row is a flex slot, so its height depends on how many slots fit). Number
   and title are 0.7 of the row, with line-height equal to the row: one line,
   ellipsis, descenders inside. Defined in layout px at workspace zoom 1;
   zoom and whole-module embeds only scale it uniformly. */
.node-music-player-pl-row {
  --node-music-player-pl-row-height: 1.35rem;
  container-type: size;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 0 4px;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0 8px;
  text-align: left;
  cursor: var(--node-dot-cursor);
  flex: 1 1 0;
  box-sizing: border-box;
  opacity: var(--node-music-player-pl-fade, 1);
}
.node-music-player-pl-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  color: var(--sample-waveform-hud-color);
  font: var(--sample-waveform-hud-font);
  text-align: center;
}
.node-music-player-pl-row.is-empty {
  cursor: default;
  opacity: calc(0.38 * var(--node-music-player-pl-fade, 1));
  pointer-events: none;
}
.node-music-player-pl-row.is-back {
  color: var(--sample-waveform-hud-color-hot);
}
.node-music-player-pl-row:hover,
.node-music-player-pl-row:focus-visible {
  color: var(--sample-waveform-hud-color-hot);
  background: var(--node-ui-hover-bg);
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
.node-music-player-pl-row[data-active="true"] {
  background: transparent;
  color: var(--sample-waveform-hud-color-hot);
}
.node-music-player-pl-row[data-playing="true"] {
  background: var(--sample-waveform-hud-color-dim);
}
.node-music-player-pl-row.is-play-next,
.node-music-player-pl-row[data-queue="next"] {
  background: hsla(140, 90%, 57%, 0.14);
  color: var(--sample-waveform-hud-color-hot);
}
.node-music-player-pl-row.is-played .node-music-player-pl-name,
.node-music-player-pl-row[data-queue="played"] .node-music-player-pl-name {
  text-decoration: line-through;
  opacity: 0.62;
}
.node-music-player-pl-num {
  grid-column: 1;
  grid-row: 1;
  opacity: 0.7;
  font: inherit;
  font-size: 70cqh;
  line-height: 100cqh;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.node-music-player-pl-name {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
  font-size: 70cqh;
  line-height: 100cqh;
}
.node-music-player-pl-now {
  --node-music-player-pl-wave-height: calc(var(--node-grid-height, 28px) * 2);
  flex: 0 0 var(--node-music-player-pl-wave-height);
  align-self: stretch;
  width: 100%;
  height: var(--node-music-player-pl-wave-height);
  min-height: var(--node-music-player-pl-wave-height);
  max-height: var(--node-music-player-pl-wave-height);
  margin: 0;
  margin-top: auto;
  padding: 0;
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  background: #050805;
  cursor: var(--node-dot-cursor);
}
.node-music-player-pl-now-wave {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}
.node-music-player-pl-scrub {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 3.4rem;
  gap: 4px;
  align-items: center;
  min-height: 16px;
}
.node-music-player-pl-scrub-label {
  opacity: 0.7;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.node-music-player-pl-scrub-input {
  width: 100%;
  margin: 0;
  accent-color: rgba(100, 210, 180, 0.95);
  cursor: var(--node-dot-cursor);
}
.node-music-player-pl-scrub-value {
  justify-self: end;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: 0.9;
}

.node-wiring-panel {
  --node-toolbar-button-bg-alpha: 1;
  --node-tooltip-text-size: 14px; /* tip font size, same in the browser and the plugin */
  --node-min-grid-brightness-alpha: 0;
  /* B-048: bypass chrome SSOT for module face + Module Settings (sibling under panel). */
  --node-bypass-icon-size-ratio: 0.36;
  --node-bypass-icon-glow-spread-ratio: 0.4;
  --node-bypass-icon-glow-color: #f25d5d;
  --node-bypass-icon-on-color: #f7b758;
  --node-bypass-on-bg: #5c1818;
  --node-bypass-off-bg: #000000;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  /* Fixed viewport column so the keyboard dock stays on the transport bar
     and extra piano height shrinks the workspace instead of growing the page. */
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Header (toolbar) + main content + footer (transport / I-O) layout. */
.node-wiring-panel > .node-view-toolbar {
  flex: 0 0 auto;
  flex-shrink: 0;
  order: 0;
  z-index: 5;
}

.node-wiring-panel > .node-graph-workspace,
.node-wiring-panel > .node-graph-main-row {
  /* height:0 + grow: leftover column only. auto/100% here lets the
     canvas lock the row so the controller dock can only expand down. */
  flex: 1 1 0%;
  order: 1;
  height: 0;
  min-height: 0;
  overflow: hidden;
}

.node-graph-main-row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
}

.node-graph-main-row > .node-graph-workspace {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* Computer view (not phone): fill the row. No leftover crop box. */
.node-wiring-panel:not(.modular-only-view) .node-graph-main-row > .node-graph-workspace {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
}

.node-command-center-dock {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 20;
  width: var(--node-command-center-dock-width, var(--node-unified-window-default-width, 380px));
  min-width: var(--node-unified-window-min-width, 24px);
  max-width: none;
  min-height: 0;
  overflow: visible;
  pointer-events: auto;
}

.node-wiring-panel.command-center-embed-left .node-command-center-dock,
.node-wiring-panel.command-center-embed-right .node-command-center-dock {
  display: block;
}

.node-wiring-panel.command-center-embed-left .node-command-center-dock {
  left: 0;
  right: auto;
}

.node-wiring-panel.command-center-embed-right .node-command-center-dock {
  right: 0;
  left: auto;
}

.node-command-center-dock > .node-unified-window[hidden],
.node-command-center-dock > .node-scene-context-menu[hidden],
.node-command-center-dock > .node-module-shop-view[hidden],
.node-command-center-dock > .node-user-ui-settings-panel[hidden] {
  display: none !important;
}

.node-command-center-dock > .node-unified-window:not([hidden]),
.node-command-center-dock > .node-scene-context-menu:not([hidden]),
.node-command-center-dock > .node-module-shop-view:not([hidden]),
.node-command-center-dock > .node-user-ui-settings-panel:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  position: relative !important;
  inset: auto !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0;
  overflow: hidden;
}

.node-command-center-dock > .node-unified-window > .scene-context-heading,
.node-command-center-dock > .node-unified-window > .node-unified-window-nav-host {
  flex: 0 0 auto;
}

.node-command-center-dock > .node-unified-window > .node-unified-window-nav-host {
  position: relative;
  top: auto;
}

.node-command-center-dock > .node-unified-window > .node-module-shop-column {
  flex: 1 1 auto;
  min-height: 0;
}

.node-command-center-dock > .scene-context-resize-handle,
.node-command-center-dock .scene-context-resize-handle {
  display: none !important;
}

/* ch4os-style seam: wide hit box, thick bar centered on the division. */
.node-command-center-dock-split {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
}

.node-wiring-panel.command-center-embed-right .node-command-center-dock-split {
  left: 0;
  transform: translateX(-50%);
}

.node-wiring-panel.command-center-embed-left .node-command-center-dock-split {
  right: 0;
  left: auto;
  transform: translateX(50%);
}

.node-command-center-dock-split::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 8px;
  transform: translateX(-50%);
  background: var(--accent-2, #e2a86d);
  opacity: 0;
  pointer-events: none;
}

.node-command-center-dock-split:hover::before,
.node-command-center-dock-split:focus-visible::before,
.node-command-center-dock-split.is-dragging::before,
body.is-resizing-command-center-dock .node-command-center-dock-split::before {
  opacity: 0.92;
}

body.is-resizing-command-center-dock {
  cursor: ew-resize;
  user-select: none;
}

.node-wiring-panel > .node-bottom-stack {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  order: 11;
  z-index: 6;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.node-bottom-stack > .node-graph-controls,
.node-wiring-panel > .node-graph-controls {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-top: 0;
  z-index: 5;
  background: rgba(8, 10, 12, 0.96);
  border-top: 1px solid rgba(127, 199, 217, 0.12);
}

/* Patch / code / mapping pages: fill the column between toolbar and footer. */
.node-wiring-panel.content-view-mode:not(.modular-only-view):not(.camera-view-visible) {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.node-wiring-panel.content-view-mode .node-graph-controls {
  margin-top: 0;
}

.node-wiring-panel.content-view-mode > .node-graph-main-row {
  display: none;
}

/* Modular view keeps .node-help-stack as a zero-height overlay so tips/meters
   do not resize the workspace. On Script / Code Screen / Mapping pages that
   overlay sat on the title bar and close control — give the stack real row
   height here so Tooltips + Debug meters get room above the page chrome. */
.node-wiring-panel.content-view-mode:not(.modular-only-view):not(.camera-view-visible) > .node-help-stack {
  flex: 0 0 auto;
  height: auto;
  z-index: 5;
  gap: 4px;
  padding: 6px 8px 8px;
}

.node-wiring-panel.content-view-mode > .node-settings-view:not([hidden]) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.node-wiring-panel.content-view-mode > .node-code-screen-view:not([hidden]),
.node-wiring-panel.content-view-mode > .node-mapping-view:not([hidden]) {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
  overflow: hidden;
}

.node-wiring-panel.modular-only-view {
  --node-modular-only-inset: 12px;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  margin-top: 0;
  padding: 0;
  border-color: transparent;
  position: relative;
}
.node-wiring-panel.modular-only-view > .node-bottom-stack {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
}

/* Infinite modular view (💻 / V): hide back + resize, fill viewport edge-to-edge. */
.node-wiring-panel.modular-only-view.modular-only-controls-hidden {
  --node-modular-only-inset: 0px;
}

/*
 * V hides app chrome only — not floating windows.
 * Visibility / Hotkeys / etc. must stay reachable with bars hidden.
 * Same pattern as modular-only (phone): toolbar becomes contents, chrome
 * children hide, `.node-floating-window-surface` children stay.
 */
.node-wiring-panel.app-chrome-top-hidden > .node-view-toolbar,
.node-wiring-panel.app-chrome-bars-hidden > .node-view-toolbar {
  display: contents;
}

.node-wiring-panel.app-chrome-top-hidden > .node-view-toolbar > :not(.node-floating-window-surface),
.node-wiring-panel.app-chrome-bars-hidden > .node-view-toolbar > :not(.node-floating-window-surface) {
  display: none !important;
}

/* V second press / bottom hide: transport row (T can stick it back). */
.node-wiring-panel.app-chrome-bars-hidden .node-graph-controls,
.node-wiring-panel.app-chrome-bottom-hidden .node-graph-controls {
  display: none !important;
}

/* T — transport stuck: bottom public buttons win over V hide. */
.node-wiring-panel.app-chrome-bars-hidden.transport-chrome-stuck .node-graph-controls,
.node-wiring-panel.modular-only-view.transport-chrome-stuck .node-graph-controls {
  display: flex !important;
}

/* When bars are hidden and M is off, fill the viewport. Must cancel any leftover
   inline width/height from a prior modular-windowed (M) resize, or the canvas
   stays stuck at the condensed frame size. */
.node-wiring-panel.app-chrome-bars-hidden:not(.modular-only-view),
.node-wiring-panel.app-chrome-top-hidden:not(.modular-only-view) {
  min-height: 100dvh;
  height: 100dvh;
}

.node-wiring-panel.app-chrome-bars-hidden:not(.modular-only-view) > .node-graph-workspace,
.node-wiring-panel.app-chrome-bars-hidden:not(.modular-only-view) > .node-graph-main-row,
.node-wiring-panel.app-chrome-top-hidden:not(.modular-only-view) > .node-graph-workspace,
.node-wiring-panel.app-chrome-top-hidden:not(.modular-only-view) > .node-graph-main-row {
  flex: 1 1 0% !important;
  width: 100% !important;
  max-width: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.node-wiring-panel.modular-only-controls-hidden .node-modular-only-back-button,
.node-wiring-panel.modular-only-controls-hidden .node-graph-resize-handle {
  display: none !important;
}

/* No hard edge in the buttonless modular view -- the workspace already
   fills the viewport edge-to-edge here (--node-modular-only-inset: 0px
   above); a visible border/shadow on top of that reads as a wall around
   an "infinite" canvas instead of it actually looking borderless. Same
   treatment as the ?hideui=1 embed case below, just triggered by the
   View Buttons toggle instead of a query param. */
.node-wiring-panel.modular-only-controls-hidden .node-graph-workspace {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Legacy class: same fill as V when not in M frame (kept for old embeds). */
.node-wiring-panel.modular-only-controls-hidden:not(.modular-only-view) .node-graph-workspace {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Full-screen "no nonsense" embed (?hideui=1): kill remaining chrome. */
.soemdsp-hide-ui .node-wiring-panel.modular-only-view {
  --node-modular-only-inset: 0px;
  width: 100dvw;
  min-height: 100dvh;
  overflow: hidden;
}

.soemdsp-hide-ui .node-modular-only-back-button,
.soemdsp-hide-ui .node-graph-resize-handle {
  display: none !important;
}

.soemdsp-hide-ui .node-graph-workspace {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.soemdsp-hide-ui {
  overflow: hidden;
  scrollbar-gutter: auto;
}

html.soemdsp-hide-ui .node-boot-sysinfo {
  /* Embeds (hero iframe) hide the boot sysinfo line for a clean frame. */
  display: none;
}


/* Embed: never show Command Center / floating chrome even if UI settings restore them. */
html.soemdsp-hide-ui #nodeSceneContextMenu,
html.soemdsp-hide-ui .node-floating-window-surface,
html.soemdsp-hide-ui .node-command-center-dock,
html.soemdsp-hide-ui #nodeModuleShopView,
html.soemdsp-hide-ui #nodeUserUiSettingsPanel,
html.soemdsp-hide-ui #nodeVisibilityMenu,
html.soemdsp-hide-ui #nodeModuleActionsWindow,
html.soemdsp-hide-ui #nodeGlobalScopeMenu,
html.soemdsp-hide-ui #nodePatchLoadFault,
html.soemdsp-hide-ui.body.node-patch-load-fault-open #nodePatchLoadFault {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.node-wiring-panel.modular-only-view > :not(.node-graph-workspace):not(.node-graph-main-row):not(.node-view-toolbar):not(.node-floating-window-surface):not(.node-command-center-dock):not(.node-bottom-stack) {
  display: none;
}
.node-wiring-panel.modular-only-view:not(.transport-chrome-stuck) .node-graph-controls {
  display: none;
}

.node-wiring-panel.modular-only-view > .node-view-toolbar {
  display: contents;
}

.node-wiring-panel.modular-only-view > .node-view-toolbar > :not(.node-floating-window-surface) {
  display: none;
}

.node-wiring-panel .audio-panel {
  margin-top: 3px;
}

.node-wiring-panel.camera-view-visible {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 32%);
  align-items: start;
  gap: 8px;
}

.node-wiring-panel.camera-view-visible > :not(.node-graph-workspace):not(.node-video-view-panel) {
  grid-column: 1 / -1;
}

.node-wiring-panel.camera-view-visible .node-graph-workspace {
  grid-column: 1;
  width: 100%;
  margin-inline: 0;
}

.node-video-view-panel {
  display: grid;
  gap: 8px;
  width: calc(100% - 6px);
  min-height: 180px;
  margin: 3px auto 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(127, 199, 217, 0.06), transparent 42%),
    #080a0c;
}

.node-wiring-panel.camera-view-visible .node-video-view-panel {
  grid-column: 2;
  width: 100%;
  margin-inline: 0;
}

.node-video-view-panel[hidden] {
  display: none;
}

.node-camera-resolution-controls {
  display: grid;
  grid-template-columns: auto minmax(72px, 1fr) auto minmax(72px, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font: 700 0.7rem/1 "Cascadia Mono", Consolas, monospace;
  text-transform: uppercase;
}

.node-camera-resolution-controls input {
  width: 100%;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid rgba(243, 241, 236, 0.16);
  border-radius: 4px;
  background: rgba(5, 7, 9, 0.66);
  color: var(--text);
  font: 800 0.78rem/1 "Cascadia Mono", Consolas, monospace;
}

.node-camera-resolution-controls input:focus-visible {
  outline: 2px solid rgba(127, 199, 217, 0.48);
  outline-offset: 1px;
}

.node-video-view-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--camera-view-aspect, 16 / 9);
  min-height: 136px;
  max-height: min(48vh, 540px);
  overflow: hidden;
  border: 1px solid rgba(243, 241, 236, 0.12);
  border-radius: 6px;
  background:
    linear-gradient(rgba(127, 199, 217, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 199, 217, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(127, 199, 217, 0.12), transparent 45%),
    #050607;
  background-size: 24px 24px, 24px 24px, auto, auto;
}

.node-camera-preview-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.node-camera-preview-surface {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--camera-preview-width, 640px);
  height: var(--camera-preview-height, 360px);
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--camera-preview-scale, 1));
  transform-origin: 50% 50%;
}

.node-camera-preview-world {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--node-workspace-view-width, 900px);
  min-width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: 0 0;
}

.node-camera-preview-wire-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.node-camera-preview-world .node-graph-nodes {
  z-index: auto;
}

.node-video-view-reticle {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(241, 184, 75, 0.36);
  border-radius: 4px;
  pointer-events: none;
}

.node-video-view-reticle::before,
.node-video-view-reticle::after {
  content: "";
  position: absolute;
  background: rgba(241, 184, 75, 0.34);
}

.node-video-view-reticle::before {
  top: 50%;
  left: 12%;
  right: 12%;
  height: 1px;
}

.node-video-view-reticle::after {
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 1px;
}

.node-keyboard-performance-dock {
  display: grid;
  grid-template-columns: minmax(140px, 13%) minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  width: calc(100% - 6px);
  margin: 3px auto 0;
  min-width: 0;
}

.node-keyboard-performance-dock[hidden] {
  display: none;
}

.node-performance-wheels-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(127, 199, 217, 0.1), transparent 48%),
    #080a0c;
}

.node-performance-wheels-module {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}

.node-performance-wheels-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.node-performance-wheels-heading span {
  color: var(--muted);
  font: 700 0.72rem/1 "Cascadia Mono", Consolas, monospace;
  text-transform: uppercase;
}

.node-performance-wheels-heading strong {
  color: var(--text);
  font: 800 0.82rem/1 "Cascadia Mono", Consolas, monospace;
}

.node-midi-keyboard-panel {
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(241, 184, 75, 0.08), transparent 48%),
    #080a0c;
}

.node-midi-keyboard-module {
  /* Default (non-dock / non-module-face hosts): fixed piano track + signal rows. */
  grid-template-rows: auto var(--midi-keyboard-piano-height, 112px) auto auto;
  height: auto;
  min-height: 0;
  margin: 0;
  border-radius: 0;
}

/* Keyboard module face: compact controls on top, piano fills remaining vertical space.
   Same grid when the face is reparented onto layout canvas / Meta shell. */
.dsp-node.keyboard-layout > .node-midi-keyboard-module.node-module-face,
.node-layout-canvas-tile > .node-midi-keyboard-module.node-module-face,
.node-screen-solo-stage .node-midi-keyboard-module.node-module-face,
.node-metamodule-canvas-stage .node-midi-keyboard-module.node-module-face {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  justify-items: stretch;
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 2px 4px 4px;
  gap: 2px;
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Graph module wall: header controls may spill left into the chrome instead of wrapping. */
.dsp-node.keyboard-layout > .node-midi-keyboard-module.node-module-face {
  overflow-x: visible;
  overflow-y: hidden;
}

/* Solo-stage rules set position:relative on every face; keyboard on a canvas
   tile must still fill the tile and keep a real piano row. */
body.node-screen-solo-active .node-layout-canvas-tile > .node-screen-solo-face.node-midi-keyboard-module,
.node-layout-canvas-tile > .node-midi-keyboard-module.node-module-face,
.node-metamodule-canvas-stage .node-layout-canvas-tile > .node-midi-keyboard-module {
  display: grid !important;
  grid-template-rows: auto minmax(48px, 1fr) !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Hide-info (default): heading is display:none, so a two-row auto+1fr grid puts the
   only piano child in the auto track. With height:100%/min-height:0 the piano collapses
   to 0 while the empty 1fr track eats the tile. Force a single fr row instead. */
body.node-screen-solo-active .node-layout-canvas-tile > .node-screen-solo-face.node-midi-keyboard-module:not(.show-keyboard-info),
.node-layout-canvas-tile > .node-midi-keyboard-module.node-module-face:not(.show-keyboard-info),
.node-metamodule-canvas-stage .node-layout-canvas-tile > .node-midi-keyboard-module:not(.show-keyboard-info),
.dsp-node.keyboard-layout > .node-midi-keyboard-module.node-module-face:not(.show-keyboard-info),
.node-screen-solo-stage .node-midi-keyboard-module.node-module-face:not(.show-keyboard-info),
.node-metamodule-canvas-stage .node-midi-keyboard-module.node-module-face:not(.show-keyboard-info) {
  grid-template-rows: minmax(48px, 1fr) !important;
}

body.node-screen-solo-active .node-layout-canvas-tile .node-midi-keyboard-heading,
.node-layout-canvas-tile .node-midi-keyboard-heading,
.node-metamodule-canvas-stage .node-midi-keyboard-heading {
  max-height: 36%;
  overflow: hidden;
  flex-shrink: 0;
}

body.node-screen-solo-active .node-layout-canvas-tile .node-midi-keyboard-performance,
body.node-screen-solo-active .node-layout-canvas-tile .node-midi-keyboard-surface,
.node-layout-canvas-tile .node-midi-keyboard-performance,
.node-layout-canvas-tile .node-midi-keyboard-surface,
.node-metamodule-canvas-stage .node-midi-keyboard-performance,
.node-metamodule-canvas-stage .node-midi-keyboard-surface {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
}

.dsp-node.keyboard-layout > .node-midi-keyboard-module .node-midi-keyboard-signal-bar,
.dsp-node.keyboard-layout > .node-midi-keyboard-module .node-midi-keyboard-bitmask-row,
.node-layout-canvas-tile .node-midi-keyboard-module .node-midi-keyboard-signal-bar,
.node-layout-canvas-tile .node-midi-keyboard-module .node-midi-keyboard-bitmask-row,
.node-screen-solo-stage .node-midi-keyboard-module .node-midi-keyboard-signal-bar,
.node-screen-solo-stage .node-midi-keyboard-module .node-midi-keyboard-bitmask-row,
.node-metamodule-canvas-stage .node-midi-keyboard-module .node-midi-keyboard-signal-bar,
.node-metamodule-canvas-stage .node-midi-keyboard-module .node-midi-keyboard-bitmask-row {
  display: none !important;
}

.dsp-node.keyboard-layout > .node-midi-keyboard-module .node-midi-keyboard-heading,
.node-layout-canvas-tile .node-midi-keyboard-module .node-midi-keyboard-heading,
.node-screen-solo-stage .node-midi-keyboard-module .node-midi-keyboard-heading,
.node-metamodule-canvas-stage .node-midi-keyboard-module .node-midi-keyboard-heading {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
  max-width: none;
  padding: 2px 2px 0;
  gap: 4px;
  overflow: visible;
}

.dsp-node.keyboard-layout > .node-midi-keyboard-module .node-midi-keyboard-heading > .node-midi-keyboard-midi-controls,
.node-layout-canvas-tile .node-midi-keyboard-module .node-midi-keyboard-heading > .node-midi-keyboard-midi-controls,
.node-screen-solo-stage .node-midi-keyboard-module .node-midi-keyboard-heading > .node-midi-keyboard-midi-controls,
.node-metamodule-canvas-stage .node-midi-keyboard-module .node-midi-keyboard-heading > .node-midi-keyboard-midi-controls {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 4px;
  overflow: visible;
}

.dsp-node.keyboard-layout > .node-midi-keyboard-module .node-midi-keyboard-performance,
.node-layout-canvas-tile .node-midi-keyboard-module .node-midi-keyboard-performance,
.node-screen-solo-stage .node-midi-keyboard-module .node-midi-keyboard-performance,
.node-metamodule-canvas-stage .node-midi-keyboard-module .node-midi-keyboard-performance {
  justify-content: stretch;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}

.dsp-node.keyboard-layout > .node-midi-keyboard-module .node-midi-keyboard-surface,
.node-layout-canvas-tile .node-midi-keyboard-module .node-midi-keyboard-surface,
.node-screen-solo-stage .node-midi-keyboard-module .node-midi-keyboard-surface,
.node-metamodule-canvas-stage .node-midi-keyboard-module .node-midi-keyboard-surface {
  flex: 1 1 auto;
  width: 100% !important;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin-inline: 0;
  border-radius: 0;
}

.node-midi-keyboard-panel[hidden] {
  display: none;
}


.node-midi-module {
  box-sizing: border-box;
  display: grid;
  align-content: stretch;
  align-self: stretch;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 4px 8px 2px;
  pointer-events: auto;
}

.node-midi-listen {
  display: grid;
  grid-template-rows: repeat(2, minmax(var(--node-slider-readout-height, 30px), auto));
  gap: 2px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.node-midi-listen-row {
  display: grid;
  grid-template-columns: 5.2em minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: var(--node-slider-readout-height, 30px);
}

.node-midi-listen-row > span {
  color: var(--muted);
  font: 700 0.7rem/1 "Cascadia Mono", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.node-midi-listen select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(127, 199, 217, 0.22);
  border-radius: 4px;
  background: rgba(3, 5, 7, 0.7);
  color: var(--text);
  font: 700 0.72rem/1 "Cascadia Mono", Consolas, monospace;
}

.node-midi-listen select:focus {
  outline: none;
  border-color: rgba(127, 199, 217, 0.58);
}

.node-midi-listen .node-midi-keyboard-octave-control {
  justify-self: start;
}

.node-midi-keyboard-heading {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 12px;
  min-width: 0;
  overflow: visible;
}

.node-midi-keyboard-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.node-midi-keyboard-title span {
  color: var(--muted);
  font: 700 0.72rem/1 "Cascadia Mono", Consolas, monospace;
  text-transform: uppercase;
}

.node-midi-keyboard-title strong {
  color: var(--text);
  font: 800 0.94rem/1 "Cascadia Mono", Consolas, monospace;
}

.node-midi-keyboard-heading > .node-midi-keyboard-midi-controls {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  overflow: visible;
}

.node-midi-keyboard-heading > .node-midi-keyboard-vel-range,
.node-midi-keyboard-vel-range {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.node-midi-keyboard-midi-controls > .node-midi-keyboard-vel-field {
  flex: 0 0 auto;
  white-space: nowrap;
}

.node-midi-keyboard-module:not(.show-keyboard-info) > .node-midi-keyboard-heading,
.node-grid-keyboard-module:not(.show-keyboard-info) > .node-midi-keyboard-heading,
.dsp-node.keyboard-layout > .node-midi-keyboard-module:not(.show-keyboard-info) > .node-midi-keyboard-heading,
.node-layout-canvas-tile .node-midi-keyboard-module:not(.show-keyboard-info) > .node-midi-keyboard-heading {
  display: none !important;
}

.node-midi-keyboard-module:not(.show-keyboard-info),
.node-grid-keyboard-module:not(.show-keyboard-info) {
  grid-template-rows: minmax(0, 1fr);
}

/* Face hosts (graph + canvas): hide-info must win over the shared auto+1fr face grid. */
.dsp-node.keyboard-layout > .node-midi-keyboard-module.node-module-face:not(.show-keyboard-info),
.node-layout-canvas-tile > .node-midi-keyboard-module.node-module-face:not(.show-keyboard-info),
.node-screen-solo-stage .node-midi-keyboard-module.node-module-face:not(.show-keyboard-info),
.node-metamodule-canvas-stage .node-midi-keyboard-module.node-module-face:not(.show-keyboard-info) {
  grid-template-rows: minmax(48px, 1fr) !important;
}

.node-midi-keyboard-vel-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font: 700 0.72rem/1 "Cascadia Mono", Consolas, monospace;
  text-transform: uppercase;
}

.node-midi-keyboard-vel-field input[type="number"] {
  width: 4.2em;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0.15em 0.3em;
  border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, #000 55%, transparent);
  color: var(--text);
  font: 700 0.85rem/1.2 "Cascadia Mono", Consolas, monospace;
  text-transform: none;
}

.node-midi-keyboard-live-readouts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.node-midi-keyboard-live-readouts > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 2px 6px;
  border: 1px solid rgba(243, 241, 236, 0.11);
  border-radius: 4px;
  background: rgba(5, 6, 7, 0.58);
  color: var(--muted);
  font: 700 0.72rem/1 "Cascadia Mono", Consolas, monospace;
}

.node-midi-keyboard-live-readouts strong {
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.dsp-node.keyboard-controller-layout .node-midi-module {
  align-self: stretch;
}

.node-midi-keyboard-midi-controls button,
.node-midi-keyboard-midi-controls select {
  min-height: 24px;
  border: 1px solid rgba(243, 241, 236, 0.14);
  border-radius: 4px;
  background: rgba(5, 6, 7, 0.68);
  color: var(--text);
  font: 700 0.72rem/1 "Cascadia Mono", Consolas, monospace;
  white-space: nowrap;
}

.node-midi-keyboard-mode-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font: 700 0.68rem/1 "Cascadia Mono", Consolas, monospace;
  text-transform: uppercase;
}

.node-midi-keyboard-mode-control span {
  flex: 0 0 auto;
}

.node-midi-keyboard-midi-controls button {
  flex: 0 0 auto;
  padding: 0 8px;
}

.node-midi-keyboard-octave-control {
  display: inline-grid;
  grid-template-columns: 24px minmax(32px, auto) 24px;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
}

.node-midi-keyboard-octave-control strong {
  display: grid;
  place-items: center;
  min-height: 24px;
  padding: 0 6px;
  border: 1px solid rgba(243, 241, 236, 0.14);
  border-radius: 4px;
  background: rgba(5, 6, 7, 0.68);
  color: var(--text);
  font: 800 0.72rem/1 "Cascadia Mono", Consolas, monospace;
}

/* The number between -/+ is drag-scrubbable (bindNodeGraphMidiKeyboardScrubControl
   in node-graph-view-controls.js) -- advertise it with the resize cursor. */
.node-midi-keyboard-octave-control strong.scrubbable {
  cursor: ew-resize;
  user-select: none;
}

.node-midi-keyboard-octave-control strong.scrubbing {
  border-color: rgba(127, 199, 217, 0.55);
  color: var(--scope);
}

.node-midi-keyboard-octave-control button {
  width: 24px;
  padding: 0;
}

.node-midi-keyboard-midi-controls select {
  flex: 0 1 96px;
  min-width: 74px;
  max-width: 110px;
  padding: 0 4px;
}

.node-midi-keyboard-mode-control select {
  flex-basis: 86px;
  min-width: 74px;
  max-width: 96px;
}

.node-midi-keyboard-midi-controls .pill {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 24px;
  padding: 0 7px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

.node-midi-keyboard-midi-controls select:disabled {
  color: var(--muted);
  opacity: 0.64;
}

.node-grid-keyboard-panel,
.node-grid-keyboard-module {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  height: 100%;
}

.node-grid-keyboard-performance {
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 6px 6px;
}

.node-grid-keyboard-surface {
  display: grid;
  gap: 2px;
  width: 100%;
  height: 100%;
  min-height: 120px;
  touch-action: none;
}

.node-grid-keyboard-pad {
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(243, 241, 236, 0.16);
  border-radius: 3px;
  background: rgba(18, 22, 26, 0.92);
  color: var(--text);
  font: 700 0.62rem/1 "Cascadia Mono", Consolas, monospace;
  cursor: pointer;
}

.node-grid-keyboard-pad.black-pc {
  background: rgba(8, 10, 12, 0.95);
  color: rgba(243, 241, 236, 0.82);
}

.node-grid-keyboard-pad.patch-set:not(.active):not(.held) {
  background: rgba(255, 120, 120, 0.38);
  border-color: rgba(255, 160, 160, 0.7);
}

.node-grid-keyboard-pad.ghost-patch:not(.active):not(.held) {
  background: rgba(255, 120, 120, 0.22);
  border-color: rgba(255, 170, 170, 0.55);
  color: inherit;
  box-shadow: inset 0 0 0 2px rgba(255, 120, 120, 0.4);
}

.node-grid-keyboard-pad.held {
  border-color: #c9a227;
  box-shadow: inset 0 0 0 1px #c9a227;
  color: #e8d48a;
}

.node-grid-keyboard-pad.active {
  background: #2a6f9e;
  border-color: #7fc7d9;
  color: #f3f1ec;
}

.node-grid-keyboard-pad.ghost-chord:not(.slot-on):not(.slot-edit):not(.active):not(.held) {
  background: rgba(61, 220, 132, 0.22);
  border-color: rgba(125, 255, 176, 0.55);
  color: inherit;
  box-shadow: inset 0 0 0 2px rgba(61, 220, 132, 0.4);
}
.node-grid-keyboard-pad.chord-memory {
  background: #1f9a55;
  border-color: #7dffb0;
  color: #041a0c;
  box-shadow:
    inset 0 0 0 1px rgba(180, 255, 210, 0.7),
    0 0 10px rgba(61, 220, 132, 0.45);
}
.node-grid-keyboard-pad.chord-memory.held {
  background: #c9a227;
  border-color: #c9a227;
  color: #1a1200;
  box-shadow:
    inset 0 0 0 1px #e8d48a,
    0 0 0 2px #7dffb0,
    0 0 10px rgba(61, 220, 132, 0.45);
}
.node-grid-keyboard-pad.chord-memory.active {
  background: #2a6f9e;
  border-color: #7dffb0;
  color: #f3f1ec;
  box-shadow:
    inset 0 0 0 1px #7fc7d9,
    0 0 0 2px rgba(61, 220, 132, 0.85);
}
.node-grid-keyboard-pad.chord-memory.slot-on,
.node-grid-keyboard-pad.chord-memory.active.slot-on,
.node-grid-keyboard-pad.chord-memory.held.slot-on {
  background: #3dff8a;
  border-color: #e8ffe8;
  color: #041a0c;
  box-shadow:
    inset 0 0 0 1px rgba(230, 255, 240, 0.95),
    0 0 0 2px #c8ffd8,
    0 0 16px rgba(90, 255, 160, 0.95);
}
.node-grid-keyboard-pad.slot-edit,
.node-grid-keyboard-pad.chord-memory.slot-edit,
.node-grid-keyboard-pad.chord-memory.held.slot-edit,
.node-grid-keyboard-pad.chord-memory.active.slot-edit {
  background: #3dff8a;
  border-color: #f4fff4;
  color: #041a0c;
  box-shadow:
    inset 0 0 0 1px rgba(230, 255, 240, 0.95),
    0 0 0 3px #e8ffe8,
    0 0 0 6px rgba(61, 220, 132, 0.85),
    0 0 18px rgba(90, 255, 160, 1);
}
.node-grid-keyboard-pad.chord-edit-note,
.node-grid-keyboard-pad.chord-edit-note.held,
.node-grid-keyboard-pad.chord-edit-note.active,
.node-grid-keyboard-pad.chord-memory.chord-edit-note,
.node-grid-keyboard-pad.ghost-chord.chord-edit-note {
  background: #e23a3a;
  border-color: #ffb0b0;
  color: #1a0404;
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 210, 0.85),
    0 0 0 2px rgba(226, 58, 58, 0.7),
    0 0 14px rgba(226, 58, 58, 0.55);
}

/* Knob dial (class names shared with the old 8-knob plate CSS):
   title above the dial · value in the center of the circle · arc centered in dial. */
.node-macro-knob {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font: 700 0.62rem/1 "Cascadia Mono", Consolas, monospace;
  touch-action: none;
  cursor: var(--node-dot-cursor);
  user-select: none;
  transform: none;
}

.node-macro-knob-label,
.node-macro-knob > span:not(.node-macro-knob-dial):not(.node-macro-knob-edit-input) {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  padding: 0 2px;
  text-align: center;
  line-height: 1.1;
}

body[data-macro-knob-label-position="mid"] .node-macro-knob-label,
body[data-macro-knob-label-position="mid"] .node-macro-knob > span:not(.node-macro-knob-dial):not(.node-macro-knob-edit-input) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

body[data-macro-knob-label-position="bottom"] .node-macro-knob-label,
body[data-macro-knob-label-position="bottom"] .node-macro-knob > span:not(.node-macro-knob-dial):not(.node-macro-knob-edit-input) {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 2px;
  transform: translateX(-50%);
}

/* Dial cell: geometric home of the circle; value lives here too.
   container-type so arc can fill available space at size scale 1. */
.node-macro-knob-dial {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  container-type: size;
  overflow: hidden;
}

/* Value default = center of the dial / circle. */
.node-macro-knob-dial .node-macro-knob-value,
.node-macro-knob-dial > strong,
.node-macro-knob-dial > [data-macro-value],
.node-macro-knob-dial > [data-knob-face-readout] {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  z-index: 2;
  max-width: calc(100% - 6px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  padding: 1px 3px;
  color: var(--text);
  font-size: 0.62rem;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body[data-macro-knob-value-position="top"] .node-macro-knob-dial .node-macro-knob-value,
body[data-macro-knob-value-position="top"] .node-macro-knob-dial > strong,
body[data-macro-knob-value-position="top"] .node-macro-knob-dial > [data-macro-value],
body[data-macro-knob-value-position="top"] .node-macro-knob-dial > [data-knob-face-readout] {
  top: 2px;
  transform: translateX(-50%);
}

body[data-macro-knob-value-position="bottom"] .node-macro-knob-dial .node-macro-knob-value,
body[data-macro-knob-value-position="bottom"] .node-macro-knob-dial > strong,
body[data-macro-knob-value-position="bottom"] .node-macro-knob-dial > [data-macro-value],
body[data-macro-knob-value-position="bottom"] .node-macro-knob-dial > [data-knob-face-readout] {
  top: auto;
  bottom: 2px;
  transform: translateX(-50%);
}

/* mid is the default (center); keep attribute for explicit UIDEV selection */
body[data-macro-knob-value-position="mid"] .node-macro-knob-dial .node-macro-knob-value,
body[data-macro-knob-value-position="mid"] .node-macro-knob-dial > strong,
body[data-macro-knob-value-position="mid"] .node-macro-knob-dial > [data-macro-value],
body[data-macro-knob-value-position="mid"] .node-macro-knob-dial > [data-knob-face-readout] {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}

.node-macro-knob-edit-input {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  z-index: 3;
  width: calc(100% - 8px);
  min-width: 0;
  padding: 1px 3px;
  border: 1px solid rgba(241, 184, 75, 0.42);
  border-radius: 3px;
  background: rgba(5, 6, 7, 0.85);
  color: var(--text);
  font: inherit;
  font-size: 0.62rem;
  text-align: center;
  cursor: text;
  transform: translate(-50%, -50%);
}

body[data-macro-knob-value-position="top"] .node-macro-knob-edit-input {
  top: 2px;
  transform: translateX(-50%);
}

body[data-macro-knob-value-position="bottom"] .node-macro-knob-edit-input {
  top: auto;
  bottom: 2px;
  transform: translateX(-50%);
}

body[data-macro-knob-value-position="mid"] .node-macro-knob-edit-input {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}

/* Hollow arc — centered in the dial cell only (not the title row).
   Span is centered: start = −span/2 (Knob sets CSS vars; bank default 264°).
   Bank / dock size is the grid cell (--macro-knob-size-scale), not a
   transform — so neighbors keep their gap instead of overlapping.
   Knob module plate still scales the ring with --knob-dial-size. */
.node-macro-knob-dial i,
.node-macro-knob-arc,
.node-macro-knob i {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: min(100cqmin, 100%);
  max-width: 100%;
  max-height: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background: conic-gradient(
    from var(--macro-arc-start-deg, -132deg),
    var(--macro-arc-fill, #f1b84b) calc(var(--macro-value, 0) * var(--macro-arc-span-deg, 264deg)),
    var(--macro-arc-track, #3a3428) calc(var(--macro-value, 0) * var(--macro-arc-span-deg, 264deg)) var(--macro-arc-span-deg, 264deg),
    color-mix(in srgb, var(--macro-arc-fill, #f1b84b) calc(var(--macro-knob-arc-gap-brightness, 0) * 100%), transparent) var(--macro-arc-span-deg, 264deg) 360deg
  );
  -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - var(--macro-knob-arc-thickness-percent, 0.3) * 100%), #000 calc(100% - var(--macro-knob-arc-thickness-percent, 0.3) * 100% + 1px));
  mask-image: radial-gradient(closest-side, transparent calc(100% - var(--macro-knob-arc-thickness-percent, 0.3) * 100%), #000 calc(100% - var(--macro-knob-arc-thickness-percent, 0.3) * 100% + 1px));
  /* Soft glow only on bank/dock macros — Knob module overrides to none. */
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--macro-arc-fill, #f1b84b) 40%, transparent));
  outline: none;
  box-shadow: none;
  border: none;
  pointer-events: none;
}

.node-midi-keyboard-performance {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.node-midi-keyboard-wheel-bank {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.node-midi-keyboard-wheel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(243, 241, 236, 0.16);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(243, 241, 236, 0.04), transparent 50%, rgba(243, 241, 236, 0.035)),
    #050607;
  color: var(--muted);
  font: 700 0.62rem/1 "Cascadia Mono", Consolas, monospace;
  text-align: center;
  touch-action: none;
  user-select: none;
}

.node-performance-wheels-module .node-midi-keyboard-wheel {
  min-height: 0;
  height: auto;
}

.node-midi-keyboard-wheel span,
.node-midi-keyboard-wheel strong {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 18px;
  padding: 2px;
  overflow: hidden;
  text-overflow: clip;
}

.node-midi-keyboard-wheel strong {
  color: var(--text);
  font-size: 0.58rem;
}

.node-midi-keyboard-wheel i {
  position: absolute;
  left: 12%;
  right: 12%;
  /* Travel range must account for the thumb's own height (20px), or it
     overshoots the track at both ends: the old `(value * 100%) - 10px`
     put the thumb's bottom at -10px when value=0 (half hanging below the
     container, clipped by overflow: hidden) and its top past 100% when
     value=1. Interpolating across (100% - height) instead keeps the
     whole thumb inside the track at every value. */
  bottom: calc(var(--wheel-value, 0.5) * (100% - 20px));
  z-index: 1;
  height: 20px;
  border: 1px solid rgba(241, 184, 75, 0.46);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(243, 241, 236, 0.42), rgba(127, 199, 217, 0.22)),
    #1a2027;
  box-shadow:
    inset 0 0 0 1px rgba(5, 6, 7, 0.55),
    0 0 16px rgba(241, 184, 75, 0.18);
  pointer-events: none;
}

.node-midi-keyboard-wheel::before {
  content: "";
  position: absolute;
  inset: 24px 50% 24px auto;
  width: 1px;
  background: rgba(243, 241, 236, 0.13);
}

.node-midi-keyboard-wheel.pitch::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  background: rgba(241, 184, 75, 0.34);
}

.node-midi-keyboard-surface {
  position: relative;
  /* cqi font scaling for note labels under tight module widths */
  container-type: inline-size;
  container-name: midi-keys;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  height: var(--midi-keyboard-piano-height, 112px);
  min-width: 0;
  min-height: var(--midi-keyboard-piano-height, 112px);
  overflow: hidden;
  /* border drawn by ::after in container units so tiles scale it 2x exactly */
  border: 0;
  border-radius: 6px;
  /* gradient lives on ::before (inset like the old padding box) */
  background: #050607;
}

.node-midi-keyboard-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(241, 184, 75, 0.06), transparent 34%);
  /* tile = old padding box, repeated into the 1px ring like the old border-box paint */
  background-position: 0 0.1016260163cqi;
  background-size: 100% calc(100% - 2 * 0.1016260163cqi);
}

.node-midi-keyboard-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 0.101627cqi solid rgba(243, 241, 236, 0.16);
  border-radius: 6px;
}

.node-midi-keyboard-module .node-midi-keyboard-surface {
  min-height: var(--midi-keyboard-piano-height, 112px);
}

@media (max-width: 720px) {
  .node-keyboard-performance-dock {
    grid-template-columns: 1fr;
  }

  .node-midi-keyboard-wheel-bank {
    min-height: 0;
  }

  .node-midi-keyboard-wheel {
    min-height: 0;
  }
}

.node-midi-keyboard-surface [data-midi] {
  user-select: none;
}

.node-midi-keyboard-white-row {
  position: absolute;
  inset: 0.101627cqi; /* = old 1px border at zoom 1 (984px) */
  overflow: hidden;
  border-radius: 5px; /* old inner border radius clip */
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  align-items: end;
  min-width: 0;
}

.node-midi-keyboard-white-row span {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  /* Labels near the bottom edge (whites are square-bottomed — no radius). */
  padding: 0 1px 1px;
  overflow: hidden;
  border-right: 1px solid rgba(5, 6, 7, 0.72);
  color: rgba(5, 6, 7, 0.92);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-weight: 700;
  /* Per key: label / white-key width is the zoom-1 ratio of the default
     25-key keyboard (11.52px on 982 / 15 px keys). Scales with the tile and
     keeps that ratio for any key count. Was clamp(0.42rem, 5.2cqi, 0.72rem),
     capped at 0.72rem, so it never grew in canvas tiles. */
  font-size: calc(17.560976cqi / var(--midi-key-units, 15));
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-overflow: clip;
  background:
    linear-gradient(180deg, #f7f2e8 0%, #cfc7b8 72%, #a79f93 100%);
}

.node-midi-keyboard-white-row span.patch-set:not(.active):not(.held) {
  background:
    linear-gradient(180deg, rgba(255, 170, 170, 0.72), rgba(220, 90, 90, 0.34)),
    linear-gradient(180deg, #f7f2e8 0%, #cfc7b8 72%, #a79f93 100%);
}

.node-midi-keyboard-white-row span.ghost-patch:not(.active):not(.held) {
  color: rgba(5, 6, 7, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 120, 120, 0.28), rgba(220, 90, 90, 0.16)),
    linear-gradient(180deg, #f7f2e8 0%, #cfc7b8 72%, #a79f93 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 120, 120, 0.38);
  text-shadow: none;
}

.node-midi-keyboard-white-row span.active {
  color: #eaf8ff;
  background:
    radial-gradient(circle at 50% 18%, rgba(213, 247, 255, 0.92), transparent 28%),
    linear-gradient(180deg, #7edcff 0%, #1e85ff 74%, #0a3f9a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(207, 246, 255, 0.82),
    inset 0 0 22px rgba(17, 102, 255, 0.48),
    0 0 14px rgba(35, 162, 255, 0.68),
    0 0 34px rgba(35, 112, 255, 0.38);
  text-shadow: 0 0 7px rgba(234, 248, 255, 0.84);
}

/* Ctrl+click GOLD Held Keys bitmask (poly / digital mask cable) —
   distinct from .active BLUE (pointer press, MIDI note-on, or
   Shift+click mono sustain latch). Both classes can be set at once. */
.node-midi-keyboard-white-row span.held {
  color: #1a1200;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 226, 173, 0.92), transparent 28%),
    linear-gradient(180deg, #ffcf6b 0%, #e08a1e 74%, #7a3f06 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 173, 0.82),
    inset 0 0 22px rgba(224, 138, 30, 0.48),
    0 0 14px rgba(241, 184, 75, 0.68),
    0 0 34px rgba(224, 138, 30, 0.38);
  text-shadow: 0 0 7px rgba(255, 236, 200, 0.84);
}

/* Plain press on a gold-held key: show blue while down; .held stays set. */
.node-midi-keyboard-white-row span.held.active {
  color: #eaf8ff;
  background:
    radial-gradient(circle at 50% 18%, rgba(213, 247, 255, 0.92), transparent 28%),
    linear-gradient(180deg, #7edcff 0%, #1e85ff 74%, #0a3f9a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(207, 246, 255, 0.82),
    inset 0 0 22px rgba(17, 102, 255, 0.48),
    0 0 14px rgba(35, 162, 255, 0.68),
    0 0 34px rgba(35, 112, 255, 0.38),
    0 0 0 2px rgba(241, 184, 75, 0.55);
  text-shadow: 0 0 7px rgba(234, 248, 255, 0.84);
}

/* Chord Memory OUT — dim alpha wash over the real key. */
.node-midi-keyboard-white-row span.ghost-chord:not(.slot-on):not(.slot-edit):not(.active):not(.held) {
  color: rgba(5, 6, 7, 0.78);
  background:
    linear-gradient(180deg, rgba(61, 220, 132, 0.28), rgba(31, 154, 85, 0.16)),
    linear-gradient(180deg, #f7f2e8 0%, #cfc7b8 72%, #a79f93 100%);
  box-shadow: inset 0 0 0 2px rgba(61, 220, 132, 0.38);
  text-shadow: none;
}
.node-midi-keyboard-black-row span.ghost-chord:not(.slot-on):not(.slot-edit):not(.active):not(.held) {
  border-color: rgba(125, 255, 176, 0.45);
  background:
    linear-gradient(180deg, rgba(61, 220, 132, 0.32), rgba(31, 154, 85, 0.18)),
    linear-gradient(180deg, #2a2a2c 0%, #111113 100%);
  box-shadow:
    inset 0 0 0 2px rgba(61, 220, 132, 0.4),
    0 8px 18px rgba(0, 0, 0, 0.45);
}

/* Chord Memory slot — green fill (same treatment as gold/blue). */
.node-midi-keyboard-white-row span.chord-memory {
  color: #041a0c;
  background:
    radial-gradient(circle at 50% 18%, rgba(180, 255, 210, 0.92), transparent 28%),
    linear-gradient(180deg, #7dffb0 0%, #1f9a55 74%, #0a4a28 100%);
  box-shadow:
    inset 0 0 0 1px rgba(180, 255, 210, 0.82),
    inset 0 0 22px rgba(31, 154, 85, 0.48),
    0 0 14px rgba(61, 220, 132, 0.68),
    0 0 34px rgba(31, 154, 85, 0.38);
  text-shadow: 0 0 7px rgba(200, 255, 220, 0.84);
}
.node-midi-keyboard-white-row span.chord-memory.held {
  color: #1a1200;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 226, 173, 0.92), transparent 28%),
    linear-gradient(180deg, #ffcf6b 0%, #e08a1e 74%, #7a3f06 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 173, 0.82),
    inset 0 0 22px rgba(224, 138, 30, 0.48),
    0 0 14px rgba(241, 184, 75, 0.68),
    0 0 0 2px rgba(61, 220, 132, 0.9),
    0 0 28px rgba(61, 220, 132, 0.45);
  text-shadow: 0 0 7px rgba(255, 236, 200, 0.84);
}
.node-midi-keyboard-white-row span.chord-memory.active,
.node-midi-keyboard-white-row span.chord-memory.held.active {
  color: #eaf8ff;
  background:
    radial-gradient(circle at 50% 18%, rgba(213, 247, 255, 0.92), transparent 28%),
    linear-gradient(180deg, #7edcff 0%, #1e85ff 74%, #0a3f9a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(207, 246, 255, 0.82),
    inset 0 0 22px rgba(17, 102, 255, 0.48),
    0 0 14px rgba(35, 162, 255, 0.68),
    0 0 0 2px rgba(61, 220, 132, 0.9),
    0 0 28px rgba(61, 220, 132, 0.4);
  text-shadow: 0 0 7px rgba(234, 248, 255, 0.84);
}
.node-midi-keyboard-white-row span.chord-memory.slot-on,
.node-midi-keyboard-white-row span.chord-memory.held.slot-on,
.node-midi-keyboard-white-row span.chord-memory.active.slot-on {
  color: #041a0c;
  background:
    radial-gradient(circle at 50% 22%, rgba(240, 255, 245, 0.98), transparent 32%),
    linear-gradient(180deg, #c8ffd8 0%, #3dff8a 55%, #0d6b38 100%);
  box-shadow:
    inset 0 0 0 1px rgba(230, 255, 240, 0.95),
    inset 0 0 28px rgba(80, 255, 160, 0.55),
    0 0 18px rgba(90, 255, 160, 0.9),
    0 0 40px rgba(61, 220, 132, 0.7),
    0 0 0 2px rgba(200, 255, 220, 0.95);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}
.node-midi-keyboard-white-row span.slot-edit,
.node-midi-keyboard-white-row span.chord-memory.slot-edit,
.node-midi-keyboard-white-row span.chord-memory.held.slot-edit,
.node-midi-keyboard-white-row span.chord-memory.active.slot-edit {
  color: #041a0c;
  background:
    radial-gradient(circle at 50% 22%, rgba(240, 255, 245, 0.98), transparent 32%),
    linear-gradient(180deg, #c8ffd8 0%, #3dff8a 55%, #0d6b38 100%);
  box-shadow:
    inset 0 0 0 1px rgba(230, 255, 240, 0.95),
    inset 0 0 28px rgba(80, 255, 160, 0.55),
    0 0 18px rgba(90, 255, 160, 1),
    0 0 0 3px #f4fff4,
    0 0 0 6px rgba(61, 220, 132, 0.9);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}
.node-midi-keyboard-white-row span.chord-edit-note,
.node-midi-keyboard-white-row span.chord-edit-note.held,
.node-midi-keyboard-white-row span.chord-edit-note.active,
.node-midi-keyboard-white-row span.chord-memory.chord-edit-note,
.node-midi-keyboard-white-row span.ghost-chord.chord-edit-note {
  color: #2a0606;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 210, 210, 0.95), transparent 28%),
    linear-gradient(180deg, #ff8a8a 0%, #e23a3a 74%, #7a1010 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 210, 0.85),
    inset 0 0 22px rgba(226, 58, 58, 0.45),
    0 0 14px rgba(226, 58, 58, 0.65),
    0 0 28px rgba(180, 30, 30, 0.4);
  text-shadow: 0 0 7px rgba(255, 220, 220, 0.84);
}

.node-midi-keyboard-black-row span.chord-memory {
  border-color: rgba(120, 255, 180, 0.96);
  background:
    radial-gradient(circle at 50% 20%, rgba(160, 255, 200, 0.7), transparent 30%),
    linear-gradient(180deg, #1f9a55 0%, #062818 100%);
  box-shadow:
    inset 0 0 0 1px rgba(180, 255, 210, 0.72),
    inset 0 0 18px rgba(31, 154, 85, 0.48),
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(61, 220, 132, 0.72),
    0 0 36px rgba(31, 154, 85, 0.42);
}
@container midi-keys (min-width: 520px) {
  .node-midi-keyboard-black-row span.chord-memory {
    color: #041a0c;
    text-shadow: 0 0 7px rgba(200, 255, 220, 0.84);
  }
}
.node-midi-keyboard-black-row span.chord-memory.held {
  border-color: rgba(255, 200, 110, 0.96);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 210, 140, 0.7), transparent 30%),
    linear-gradient(180deg, #c9760f 0%, #4a2604 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 173, 0.72),
    inset 0 0 18px rgba(224, 138, 30, 0.48),
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 0 0 2px rgba(61, 220, 132, 0.9),
    0 0 24px rgba(61, 220, 132, 0.45);
}
.node-midi-keyboard-black-row span.chord-memory.active,
.node-midi-keyboard-black-row span.chord-memory.held.active {
  border-color: rgba(118, 215, 255, 0.96);
  background:
    radial-gradient(circle at 50% 20%, rgba(151, 230, 255, 0.7), transparent 30%),
    linear-gradient(180deg, #236ec9 0%, #081a43 100%);
  box-shadow:
    inset 0 0 0 1px rgba(184, 239, 255, 0.72),
    inset 0 0 18px rgba(35, 139, 255, 0.48),
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 0 0 2px rgba(61, 220, 132, 0.9),
    0 0 24px rgba(61, 220, 132, 0.4);
}
.node-midi-keyboard-black-row span.chord-memory.slot-on,
.node-midi-keyboard-black-row span.chord-memory.held.slot-on,
.node-midi-keyboard-black-row span.chord-memory.active.slot-on {
  border-color: rgba(230, 255, 240, 0.98);
  background:
    radial-gradient(circle at 50% 20%, rgba(210, 255, 230, 0.85), transparent 30%),
    linear-gradient(180deg, #3dff8a 0%, #0a4a28 100%);
  box-shadow:
    inset 0 0 0 1px rgba(230, 255, 240, 0.9),
    inset 0 0 18px rgba(80, 255, 160, 0.55),
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 0 0 2px rgba(200, 255, 220, 0.95),
    0 0 28px rgba(90, 255, 160, 0.85);
}
.node-midi-keyboard-black-row span.slot-edit,
.node-midi-keyboard-black-row span.chord-memory.slot-edit,
.node-midi-keyboard-black-row span.chord-memory.held.slot-edit,
.node-midi-keyboard-black-row span.chord-memory.active.slot-edit {
  border-color: rgba(244, 255, 244, 0.98);
  background:
    radial-gradient(circle at 50% 20%, rgba(210, 255, 230, 0.85), transparent 30%),
    linear-gradient(180deg, #3dff8a 0%, #0a4a28 100%);
  box-shadow:
    inset 0 0 0 1px rgba(230, 255, 240, 0.9),
    inset 0 0 18px rgba(80, 255, 160, 0.55),
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 0 0 3px #f4fff4,
    0 0 0 6px rgba(61, 220, 132, 0.9),
    0 0 28px rgba(90, 255, 160, 0.95);
}
.node-midi-keyboard-black-row span.chord-edit-note,
.node-midi-keyboard-black-row span.chord-edit-note.held,
.node-midi-keyboard-black-row span.chord-edit-note.active,
.node-midi-keyboard-black-row span.chord-memory.chord-edit-note,
.node-midi-keyboard-black-row span.ghost-chord.chord-edit-note {
  border-color: rgba(255, 170, 170, 0.96);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 160, 160, 0.7), transparent 30%),
    linear-gradient(180deg, #c62828 0%, #4a0a0a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 200, 200, 0.72),
    inset 0 0 18px rgba(226, 58, 58, 0.48),
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(226, 58, 58, 0.7),
    0 0 32px rgba(180, 30, 30, 0.4);
}

.node-midi-keyboard-white-row span:last-child {
  border-right: 0;
}

.node-midi-keyboard-black-row {
  position: absolute;
  inset: 0.101627cqi; /* = old 1px border at zoom 1 (984px) */
  overflow: hidden;
  border-radius: 5px; /* old inner border radius clip */
  pointer-events: none;
  min-width: 0;
}

.node-midi-keyboard-black-row span {
  position: absolute;
  top: 0;
  bottom: auto;
  /* left + width set in % from key count (translateX(-50%) centers on joint) */
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  width: var(--midi-black-key-width, 10px);
  max-width: none;
  /* Prefer layout JS; % fallback still leaves a white-key lip. */
  height: var(--midi-black-key-height, 62%);
  max-height: calc(100% - 12px);
  padding: 0 1px 1px;
  overflow: hidden;
  border: 1px solid rgba(127, 199, 217, 0.25);
  border-radius: 0 0 4px 4px;
  color: rgba(243, 241, 236, 0.82);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-weight: 700;
  /* Per key, as the white labels (9.28px at zoom 1 on the default keyboard).
     Was clamp(0.4rem, 3.4cqi, 0.58rem). */
  font-size: calc(14.146342cqi / var(--midi-key-units, 15));
  line-height: 1;
  white-space: nowrap;
  background:
    linear-gradient(180deg, #20252a 0%, #090b0e 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

.node-midi-keyboard-surface[data-key-labels="off"] .node-midi-keyboard-white-row span,
.node-midi-keyboard-surface[data-key-labels="off"] .node-midi-keyboard-black-row span {
  color: transparent;
  font-size: 0;
  text-shadow: none;
}

.node-midi-keyboard-black-row span.patch-set:not(.active):not(.held) {
  background:
    linear-gradient(180deg, rgba(255, 140, 140, 0.55), rgba(90, 18, 18, 0.92));
  border-color: rgba(255, 160, 160, 0.7);
}

.node-midi-keyboard-black-row span.ghost-patch:not(.active):not(.held) {
  border-color: rgba(255, 170, 170, 0.45);
  background:
    linear-gradient(180deg, rgba(255, 120, 120, 0.32), rgba(220, 90, 90, 0.18)),
    linear-gradient(180deg, #2a2a2c 0%, #111113 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 120, 120, 0.4),
    0 8px 18px rgba(0, 0, 0, 0.45);
}

.node-midi-keyboard-black-row span.active {
  border-color: rgba(118, 215, 255, 0.96);
  background:
    radial-gradient(circle at 50% 20%, rgba(151, 230, 255, 0.7), transparent 30%),
    linear-gradient(180deg, #236ec9 0%, #081a43 100%);
  box-shadow:
    inset 0 0 0 1px rgba(184, 239, 255, 0.72),
    inset 0 0 18px rgba(35, 139, 255, 0.48),
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(35, 162, 255, 0.72),
    0 0 36px rgba(35, 112, 255, 0.42);
}

@container midi-keys (min-width: 520px) {
  .node-midi-keyboard-black-row span.active {
    color: #eaf8ff;
    text-shadow: 0 0 7px rgba(234, 248, 255, 0.84);
  }
}

.node-midi-keyboard-black-row span.held {
  border-color: rgba(255, 200, 110, 0.96);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 210, 140, 0.7), transparent 30%),
    linear-gradient(180deg, #c9760f 0%, #4a2604 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 173, 0.72),
    inset 0 0 18px rgba(224, 138, 30, 0.48),
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(241, 184, 75, 0.72),
    0 0 36px rgba(224, 138, 30, 0.42);
}

@container midi-keys (min-width: 520px) {
  .node-midi-keyboard-black-row span.held {
    color: #1a1200;
    text-shadow: 0 0 7px rgba(255, 236, 200, 0.84);
  }
}

.node-midi-keyboard-black-row span.held.active {
  border-color: rgba(118, 215, 255, 0.96);
  background:
    radial-gradient(circle at 50% 20%, rgba(151, 230, 255, 0.7), transparent 30%),
    linear-gradient(180deg, #236ec9 0%, #081a43 100%);
  box-shadow:
    inset 0 0 0 1px rgba(184, 239, 255, 0.72),
    inset 0 0 18px rgba(35, 139, 255, 0.48),
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(35, 162, 255, 0.72),
    0 0 36px rgba(35, 112, 255, 0.42),
    0 0 0 2px rgba(241, 184, 75, 0.55);
}

@container midi-keys (min-width: 520px) {
  .node-midi-keyboard-black-row span.held.active {
    color: #eaf8ff;
    text-shadow: 0 0 7px rgba(234, 248, 255, 0.84);
  }
}

.node-midi-keyboard-signal-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  /* Stay in its own grid track — never spill into the piano */
  max-height: 40%;
  overflow: auto;
}

.node-midi-keyboard-signal-bar span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 2px 6px;
  border: 1px solid rgba(243, 241, 236, 0.11);
  border-radius: 4px;
  background: rgba(5, 6, 7, 0.58);
  color: var(--muted);
  font: 700 0.72rem/1 "Cascadia Mono", Consolas, monospace;
}

.node-midi-keyboard-signal-bar strong {
  display: inline-block;
  min-width: var(--keyboard-readout-width, 1ch);
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: pre;
}

.node-midi-keyboard-signal-bar [data-keyboard-signal="key"] {
  --keyboard-readout-width: 2ch;
}

.node-midi-keyboard-signal-bar [data-keyboard-signal="quantized"],
.node-midi-keyboard-signal-bar [data-keyboard-signal="x"],
.node-midi-keyboard-signal-bar [data-keyboard-signal="y"] {
  --keyboard-readout-width: 5ch;
}

.node-midi-keyboard-signal-bar [data-keyboard-signal="octave"],
.node-midi-keyboard-signal-bar [data-keyboard-signal="pitch"],
.node-midi-keyboard-signal-bar [data-keyboard-signal="midi"] {
  --keyboard-readout-width: 3ch;
}

.node-midi-keyboard-signal-bar [data-keyboard-signal="double"],
.node-midi-keyboard-signal-bar [data-keyboard-signal="tenthVoltPerOctave"],
.node-midi-keyboard-signal-bar [data-keyboard-signal="frequency"] {
  --keyboard-readout-width: 8ch;
}

.node-midi-keyboard-vm-debug {
  grid-column: 1 / -1;
  margin: 4px 8px 6px;
  padding: 4px 6px;
  max-height: 220px;
  overflow: auto;
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #c8d0dc;
  background: rgba(8, 10, 14, 0.72);
  border: 1px solid rgba(180, 190, 210, 0.18);
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}
body.keyboard-debug-hidden .node-midi-keyboard-vm-debug {
  display: none;
}

/* Held-keys bitmask readout -- one square per bit (53, the largest
   integer a double can represent exactly; see the bit-width note on
   nodeGraphMidiKeyboardBitmaskHasBit), black square = held. */
.node-midi-keyboard-bitmask-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  margin-top: 6px;
  color: var(--muted);
  font: 700 0.86rem/1 "Cascadia Mono", Consolas, monospace;
}

.node-midi-keyboard-bitmask-row strong {
  color: var(--text);
  font-size: 1.3rem;
  letter-spacing: 1px;
  word-break: break-all;
}

/* Debug info hidden -- the keyboard's held-keys bitmask row
   and the CPU/RAM/GPU constraint guide, whose vertical space this
   reclaims. Toggled from the Visibility menu's "Hide Debug" button.
   D (constraint-guide-visible) brings the chips back without Evidence. */
body.keyboard-debug-hidden .node-midi-keyboard-bitmask-row {
  display: none;
}
body.keyboard-debug-hidden:not(.constraint-guide-visible) .node-constraint-color-guide {
  display: none;
}

/* Debug off (and D guide off): no CPU/RAM/GPU face badges or rings either.
   Toggles can stay checked in prefs, but marks must not linger on scopes. */
body.keyboard-debug-hidden:not(.constraint-guide-visible) .node-constraint-badges,
body.keyboard-debug-hidden:not(.constraint-guide-visible) .node-constraint-badge {
  display: none !important;
}
body.keyboard-debug-hidden:not(.constraint-guide-visible)
  .node-parameter-row[data-node-constraint]::before,
body.keyboard-debug-hidden:not(.constraint-guide-visible)
  .node-module-scope-window[data-node-constraint]::before,
body.keyboard-debug-hidden:not(.constraint-guide-visible)
  .node-module-face[data-node-constraint]::before {
  opacity: 0 !important;
}

/* F fullscreen: never overlay constraint chrome on the soloed faces. */
body.node-screen-solo-active .node-help-stack,
body.node-screen-solo-active .node-constraint-color-guide {
  display: none !important;
}
body.node-screen-solo-active .node-constraint-badges,
body.node-screen-solo-active .node-constraint-badge {
  display: none !important;
}
body.node-screen-solo-active .node-parameter-row[data-node-constraint]::before,
body.node-screen-solo-active .node-module-scope-window[data-node-constraint]::before,
body.node-screen-solo-active .node-module-face[data-node-constraint]::before {
  opacity: 0 !important;
}

/* Hide Debug: drop the whole under-key signal strip. Live freq/pitch/x/y
   already live in the heading readouts; keeping Frequency under the white
   keys only stole piano height and invited clipping. */
body.keyboard-debug-hidden .node-midi-keyboard-signal-bar {
  display: none !important;
}

.node-patch-community-control {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border-color: rgba(127, 199, 217, 0.12);
  border-radius: 4px;
  border-right: 1px solid var(--line);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(243, 241, 236, 0.045) 0 6px,
      transparent 6px 12px
    ),
    rgba(17, 20, 24, 0.58);
  color: rgba(160, 167, 176, 0.78);
  font-size: clamp(0.68rem, 1vw, 0.86rem);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.node-patch-community-control:hover,
.node-patch-community-control:focus-visible {
  border-color: var(--node-front-button-hover-border);
  border-right-color: var(--line);
  background: var(--node-front-construction-hover-bg);
  box-shadow: none;
  color: var(--node-front-button-hover-color);
}

.node-under-construction-control {
  border-color: rgba(226, 168, 109, 0.34);
  background: var(--node-front-construction-hover-bg);
  color: rgba(243, 241, 236, 0.72);
  user-select: none;
  -webkit-user-select: none;
}

.node-under-construction-control * {
  user-select: none;
  -webkit-user-select: none;
}

.node-under-construction-control:hover,
.node-under-construction-control:focus-visible {
  border-color: var(--node-front-button-hover-border);
  background: var(--node-front-construction-hover-bg);
  box-shadow: none;
  color: var(--node-front-button-hover-color);
}

.node-patch-clipboard-controls {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(32px, 1fr));
  align-self: stretch;
  min-width: 68px;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(127, 199, 217, 0.16);
  border-radius: 4px;
}

.node-patch-clipboard-controls button {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(9, 13, 16, 0.78);
  color: rgba(243, 241, 236, 0.88);
  font: 750 0.58rem/1 var(--mono);
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.node-patch-clipboard-controls button + button {
  border-left: 1px solid rgba(127, 199, 217, 0.16);
}

.node-patch-clipboard-controls button:hover,
.node-patch-clipboard-controls button:focus-visible {
  background: rgba(127, 199, 217, 0.16);
  color: var(--text);
}

.node-current-saved-patch-button {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  min-width: 0;
  min-height: 0;
  padding: 3px 7px;
  border-color: rgba(127, 199, 217, 0.16);
  border-radius: 4px;
  background: rgba(3, 8, 9, 0.58);
  color: rgba(127, 199, 217, 0.92);
  font: 0.64rem/1 var(--mono);
  overflow: hidden;
  text-align: left;
}

.node-current-saved-patch-button span,
.node-current-saved-patch-button strong {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.node-current-saved-patch-button strong {
  color: var(--text);
  font-size: 0.72rem;
  line-height: 1.05;
}

.node-current-saved-patch-button.unsaved {
  color: rgba(160, 167, 176, 0.82);
}

.node-sample-identity #audioTitle {
  grid-column: 1 / -1;
}

.node-sample-identity #audioTitle:empty {
  display: none;
}

/* Continues the Render Sample / Start / End strip as one surface and takes
   every pixel left over instead of stopping at a fixed max width. */
.node-patch-audio-player-row {
  display: inline-grid;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  flex: 1 1 140px;
  min-width: 0;
  max-width: none;
  overflow: hidden;
}

.node-patch-audio-player-row #audioPlayer {
  justify-self: stretch;
  width: 100%;
  max-width: none;
}

/*
 * Modular chrome strip (top toolbar + flush workspace + bottom controls).
 * Shared surface tokens keep the three bands one continuous plate.
 */
.node-view-toolbar {
  --node-toolbar-row-height: 2.8rem;
  --node-toolbar-surface: rgb(32, 37, 42);
  --node-toolbar-chip-bg: rgba(14, 17, 21, 0.88);
  --node-toolbar-mono: Consolas, "Courier New", monospace;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  min-height: 0;
  overflow: visible;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 0;
  background: var(--node-toolbar-surface);
  user-select: none;
  -webkit-user-select: none;
}

.node-view-toolbar input:not([readonly]) {
  user-select: text;
  -webkit-user-select: text;
}

.node-view-toolbar button,
.node-view-toolbar a,
.node-view-toolbar .pill,
.node-zoom-controls,
.node-toolbar-hsl-control,
.node-scope-master-brightness-control {
  background-color: var(--node-toolbar-surface);
}

/* Two full-width rows (tabs + history). */
.node-view-tabs,
.node-history-controls {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  height: 3.25rem;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

/* Flush cells — no margins / borders / radius between siblings. */
.node-view-tabs > *,
.node-history-controls > * {
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
}

.node-history-controls > * {
  min-height: 0;
}

.node-history-controls > .node-patch-timing-controls {
  margin: 0;
  padding: 0;
}

.node-history-controls a {
  color: inherit;
  text-decoration: none;
}

.node-history-controls button {
  flex: 1 1 0;
}

/* Shared cell chrome (buttons + status chips). */
.node-view-tabs button,
.node-history-controls button,
.node-history-controls a,
.node-history-controls .pill,
.node-world-position-readout,
.node-modular-view-size-readout,
.node-selection-count-readout,
.node-build-number-readout,
.node-toolbar-hsl-control,
.node-scope-master-brightness-control {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex: 1 1 0;
  min-height: var(--node-toolbar-row-height);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: clamp(0.92rem, calc(var(--node-toolbar-row-height) * 0.36), 1.28rem);
  line-height: 1.12;
  text-align: center;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* Zoom cluster */
.node-zoom-controls {
  display: grid;
  flex: 2.8 1 0;
  grid-template-rows: minmax(10px, 0.34fr) minmax(0, 1.66fr);
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-inline-size: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.node-zoom-label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-family: var(--node-toolbar-mono);
  font-size: clamp(0.48rem, 0.58vw, 0.62rem);
  line-height: 1;
}

.node-zoom-buttons {
  display: grid;
  grid-template-columns: minmax(34px, 0.7fr) minmax(76px, 1.9fr) minmax(34px, 0.7fr) minmax(34px, 0.7fr);
  position: relative;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  background: var(--node-toolbar-surface);
}

.node-zoom-buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
  font-size: clamp(1.28rem, 1.55vw, 1.68rem);
  line-height: 1;
  white-space: nowrap;
}

.node-view-toolbar .node-zoom-buttons button:not(:disabled):not(.active):hover {
  border-color: var(--node-front-button-hover-border);
  background: var(--node-front-button-hover-bg);
  box-shadow: none;
  color: var(--node-front-button-hover-color);
}

.node-view-toolbar .node-zoom-buttons button:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: -2px;
}

/* Status chips (X/Y · W/H · SEL) — never keyboard focus targets. */
.node-world-position-readout,
.node-modular-view-size-readout,
.node-selection-count-readout {
  flex: 0.86 1 0;
  flex-direction: column;
  gap: 2px;
  background-color: var(--node-toolbar-chip-bg);
  color: color-mix(in srgb, var(--accent) 92%, transparent);
  font-family: var(--node-toolbar-mono);
  font-size: clamp(0.9rem, 1.08vw, 1.18rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.node-world-position-readout {
  cursor: var(--node-dot-cursor);
}

.node-modular-view-size-readout {
  flex: 0.72 1 0;
  color: color-mix(in srgb, var(--accent-2) 90%, transparent);
  cursor: var(--node-default-cursor);
}

.node-selection-count-readout {
  flex: 0.58 1 0;
  font-size: clamp(0.52rem, calc(var(--node-toolbar-row-height) * 0.22), 0.72rem);
}

.node-world-position-readout span,
.node-modular-view-size-readout span,
.node-selection-count-readout span {
  line-height: 1;
}

.node-selection-count-readout span {
  pointer-events: none;
}

/* Build stamp — selectable text, stacked lines. */
.node-build-number-readout {
  flex: 1.15 1 0;
  flex-direction: column;
  gap: 0;
  padding: 0 2px !important;
  min-width: 0;
  overflow: hidden;
  background: rgba(7, 11, 14, 0.94);
  color: color-mix(in srgb, var(--accent) 98%, transparent);
  font-family: var(--node-toolbar-mono);
  font-size: clamp(0.88rem, calc(var(--node-toolbar-row-height) * 0.30), 1.12rem) !important;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05 !important;
  text-transform: uppercase;
  user-select: text;
  -webkit-user-select: text;
}

.node-build-number-readout [data-build-token-value] {
  color: color-mix(in srgb, var(--accent-2) 95%, transparent);
  letter-spacing: 0.08em;
}

.node-build-number-readout span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.05;
  white-space: nowrap;
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}

/* Script page (book) — same icon tile as Modules / Modular view. */
#nodeSettingsViewButton {
  display: grid;
  place-items: center;
  flex: 0.9 1 0;
  padding: 0;
  line-height: 1;
}

/*
 * Toolbar two-line stack labels (Save/Load/Copy/Paste Patch, UI Settings).
 * Equal rows, big type — same contract as Render Sample stack cells.
 * Prefer .node-toolbar-stack-label over growing ID lists.
 */
.node-view-tabs > .node-toolbar-stack-label,
#loadNodeGraphScriptButton,
#nodeToolbarCopyPatchButton,
#nodeUserUiSettingsButton {
  flex: 1.35 1 0;
  min-inline-size: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
  gap: 0;
  padding: 6px 12px;
  white-space: normal;
  font-size: clamp(0.95rem, calc(var(--node-toolbar-row-height) * 0.40), 1.35rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: none;
  overflow: hidden;
}

.node-view-tabs > .node-toolbar-stack-label > span,
#loadNodeGraphScriptButton > span,
#nodeToolbarCopyPatchButton > span,
#nodeUserUiSettingsButton > span {
  display: grid;
  align-items: center;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  line-height: 1;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

#nodeGlobalScopeMenuButton {
  flex: 1.75 1 0;
  min-inline-size: 0;
}

#nodeUndoButton,
#nodeRedoButton,
#nodeHistoryLastAction {
  flex: 0.55 1 0;
  min-inline-size: 0;
  padding: 6px;
  font-size: clamp(1.18rem, calc(var(--node-toolbar-row-height) * 0.48), 1.55rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

#nodeHistoryLastAction {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex: 0.72 1 0;
  box-sizing: border-box;
  min-width: 7.4em;
  background: #050607;
  color: rgba(236, 240, 241, 0.92);
  box-shadow: none;
  font-family: inherit;
  font-size: clamp(0.78rem, calc(var(--node-toolbar-row-height) * 0.30), 1.05rem);
  line-height: 1;
  text-align: center;
  text-transform: none;
}

#nodeUndoButton,
#nodeRedoButton,
#nodeSceneUndoButton,
#nodeSceneRedoButton {
  box-shadow: none;
}

#nodeUndoButton.is-history-glow-undo,
#nodeSceneUndoButton.is-history-glow-undo {
  transition-duration: 0s;
  color: #fff !important;
  background: #c62828 !important;
  box-shadow: 0 0 0 1px #ff8a80, 0 0 14px 3px rgba(229, 57, 53, 0.88);
}

#nodeRedoButton.is-history-glow-redo,
#nodeSceneRedoButton.is-history-glow-redo {
  transition-duration: 0s;
  color: #06240c !important;
  background: #2ecc71 !important;
  box-shadow: 0 0 0 1px #81f4b0, 0 0 14px 3px rgba(46, 204, 113, 0.88);
}

#nodeHistoryLastAction.is-history-glow-last {
  transition-duration: 0s;
  color: #fff !important;
  background: #1565c0 !important;
  box-shadow: 0 0 0 1px #82b1ff, 0 0 14px 3px rgba(33, 150, 243, 0.88);
}

#nodeSceneHistoryDeleteButton.is-history-glow-delete,
#nodeDeleteButton.is-history-glow-delete,
#nodeSceneDeleteModule.is-history-glow-delete {
  color: #fff !important;
  background: #c62828 !important;
  box-shadow: 0 0 0 1px #ff8a80, 0 0 14px 3px rgba(229, 57, 53, 0.88);
}


/* Room dimmer + magnifier zoom/size + snake mouse-smooth share the old dimmer flex cell. */
.node-room-tool-pair {
  display: flex;
  flex: 1 1 0;
  align-items: stretch;
  min-inline-size: 8rem;
  isolation: isolate;
  z-index: 60;
}

.node-room-tool-pair > .node-room-dimmer-button {
  flex: 1 1 0;
  min-inline-size: 1.7rem;
}

.node-toolbar-fill-slider {
  --toolbar-fill: 0;
  --room-dim: var(--toolbar-fill);
  flex-direction: column;
  gap: 1px;
}

.node-toolbar-fill-glyph {
  display: block;
  font-size: 1.05em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.node-toolbar-fill-value {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: rgba(243, 241, 236, 0.88);
  font-family: var(--mono, Consolas, "Courier New", monospace);
  font-size: clamp(0.58rem, calc(var(--node-toolbar-row-height) * 0.22), 0.72rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

/* Room dimmer: fill leftover pair space (Download sits after).
   z-index above the full-UI veil (z:50) so the control stays interactive
   and fully visible even at 100% room black — the veil also punches its rect.
   Icons: stacked on/off bulbs crossfade with --room-dim (0 = full light / on,
   1 = room dark / off). Displays stay punched through the veil. */
#nodeRoomDimmerButton,
.node-room-dimmer-button {
  --room-dim: 0;
  position: relative;
  z-index: 60;
  flex: 1 1 0;
  min-inline-size: 2rem;
  max-inline-size: none;
  padding-inline: 0.35rem;
  font-size: clamp(1.05rem, calc(var(--node-toolbar-row-height) * 0.42), 1.35rem);
  line-height: 1;
  overflow: hidden;
  touch-action: none;
  cursor: ns-resize;
  isolation: isolate;
}

.node-room-dimmer-button .node-room-dimmer-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--room-dim, var(--toolbar-fill, 0)) * 100%);
  background:
    linear-gradient(180deg, rgba(255, 210, 90, 0.08), rgba(255, 200, 80, 0.42));
  pointer-events: none;
  z-index: 0;
}

/* Lightbulb fill tracks room light (up = brighter), not veil amount. */
#nodeRoomDimmerButton .node-room-dimmer-fill {
  height: calc((1 - var(--room-dim, 0)) * 100%);
}

.node-room-dimmer-button.room-dimmer-dragging .node-room-dimmer-fill {
  transition: none;
}

.node-room-dimmer-button .node-room-dimmer-icons {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 1.15em;
  height: 1.55em;
  vertical-align: middle;
  pointer-events: none;
}

.node-room-dimmer-button .node-room-dimmer-icon {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.node-room-dimmer-button.room-dimmer-dragging .node-room-dimmer-icon {
  transition: none;
}

/* dim 0 = full room light → on bulb; dim 1 = room dark → off bulb */
#nodeRoomDimmerButton .node-room-dimmer-icon-on {
  opacity: calc(1 - var(--room-dim));
}

#nodeRoomDimmerButton .node-room-dimmer-icon-off {
  opacity: var(--room-dim);
}

#nodeRoomDimmerButton[aria-pressed="true"],
.node-room-dimmer-button[aria-pressed="true"] {
  border-color: rgba(255, 220, 120, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 220, 120, 0.12), rgb(32, 37, 42));
  box-shadow: 0 0 12px rgba(255, 210, 100, 0.22);
}

#nodeDownloadAppButton {
  flex: 0 0 auto; /* natural size: never crushed by the patch title */
  min-inline-size: 0;
  padding: 6px;
  border-color: rgba(226, 168, 109, 0.28);
  background:
    linear-gradient(180deg, rgba(226, 168, 109, 0.2), rgb(32, 37, 42));
  color: rgba(255, 229, 190, 0.95);
  font-size: clamp(1.05rem, calc(var(--node-toolbar-row-height) * 0.42), 1.4rem);
  font-weight: 700;
}

#nodeDownloadAppButton > span:first-child {
  font-size: inherit;
}

#nodeVisibilityMenuButton {
  flex: 1 1 0;
  min-inline-size: 0;
  font-size: clamp(0.78rem, calc(var(--node-toolbar-row-height) * 0.30), 1rem);
  font-weight: 700;
}

#nodePatchTimingControls {
  flex: 10 1 0;
  min-inline-size: 0;
}

.node-scope-master-brightness-control {
  flex-direction: column;
  gap: 3px;
  text-transform: uppercase;
}

.node-scope-master-brightness-control span,
.node-scope-master-brightness-control output {
  line-height: 1;
  pointer-events: none;
}

.node-scope-master-brightness-control span {
  color: var(--muted);
  font-size: clamp(0.58rem, 0.78vw, 0.76rem);
}

.node-scope-master-brightness-control output {
  color: rgba(224, 255, 249, 0.92);
  font-family: Consolas, "Courier New", monospace;
  font-size: clamp(0.62rem, 0.88vw, 0.82rem);
}

.node-scope-master-brightness-control input {
  width: min(100%, 72px);
  min-width: 0;
  accent-color: #7fc7d9;
}

.node-view-tabs button {
  flex-direction: row;
  gap: 4px;
}

#nodeModuleShopButton,
#nodeGlobalScopeMenuButton {
  flex-direction: column;
  gap: 2px;
  white-space: normal;
  overflow-wrap: normal;
}

#nodeModuleShopButton,
#nodeSettingsViewButton,
#nodeCommandCenterButton,
#nodeModularInfiniteViewButton,
#nodeModularWindowedViewButton {
  display: grid;
  place-items: center;
  align-items: stretch;
  justify-items: stretch;
  padding: 0;
}

/* Toolbar emoji buttons: one CSS size from the button box (not JS). */
#nodeCommandCenterButton,
#nodeSettingsViewButton,
#nodeSettingsSaveScriptButton,
#nodeModuleShopButton,
#nodeModularInfiniteViewButton,
#nodeModularWindowedViewButton,
#nodeToolbarPastePatchButton {
  padding: 6px;
  container-type: size;
}

#nodeCommandCenterButton > .node-modular-view-icon,
#nodeSettingsViewButton > .node-modular-view-icon,
#nodeSettingsSaveScriptButton > .node-modular-view-icon,
#nodeModuleShopButton > .node-modular-view-icon,
#nodeModularInfiniteViewButton > .node-modular-view-icon,
#nodeModularWindowedViewButton > .node-modular-view-icon,
#nodeToolbarPastePatchButton > .node-modular-view-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: min(100cqw, 100cqh);
  line-height: 1;
}

#nodeSettingsSaveScriptButton.is-unsaved {
  background: rgba(90, 140, 200, 0.38);
}

#nodeDownloadAppButton {
  flex: 0 0 auto; /* natural size: never crushed by the patch title */
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
  overflow-wrap: normal;
}

#nodeDownloadAppButton[aria-disabled="true"] {
  cursor: help;
  opacity: 0.82;
}

#nodeDownloadAppButton:hover,
#nodeDownloadAppButton:focus-visible {
  border-color: rgba(226, 168, 109, 0.52);
  background:
    linear-gradient(180deg, rgba(226, 168, 109, 0.32), rgba(17, 20, 24, 0.72));
  box-shadow: inset 0 0 0 1px rgba(255, 229, 190, 0.12);
  color: rgba(255, 241, 218, 1);
}

.node-toolbar-subline {
  color: rgba(243, 241, 236, 0.62);
  font-size: clamp(0.62rem, calc(var(--node-toolbar-row-height) * 0.22), 0.78rem);
  font-weight: 700;
  line-height: 1;
  text-transform: none;
}

.node-history-controls .pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

:is(
  #nodeSceneContextMenu,
  #nodeModuleActionsWindow,
  #nodeModuleShopView,
  #nodeVisibilityMenu,
  #nodeParameterMetadataPopover,
  #nodeUiDevHelper,
  #nodeUserUiSettingsPanel,
  #nodeGlobalScopeMenu,
  .node-module-shop-section,
  .node-module-actions-window-body,
  .node-trace-display-settings-grid,
  .node-visibility-menu-list,
  .node-user-ui-settings-controls
) {
  overscroll-behavior: contain;
}

.node-visibility-menu {
  position: fixed;
  /* No CSS top/right seat. Shared unified left/top is applied in JS.
     The old `top: 54px; right: 10px` default is what yanked Command Center. */
  z-index: 80;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: var(--node-unified-window-min-width, 24px);
  min-height: var(--node-unified-window-min-height, 120px);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(127, 199, 217, 0.42);
  border-radius: var(--node-module-frame-radius);
  corner-shape: var(--node-module-corner-shape, squircle);
  background: rgba(9, 12, 15, 0.96);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

.node-visibility-menu[hidden] {
  display: none !important;
}

.node-hotkeys-page {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: var(--node-unified-window-min-width, 24px);
  min-height: var(--node-unified-window-min-height, 120px);
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(127, 199, 217, 0.42);
  border-radius: var(--node-module-frame-radius);
  corner-shape: var(--node-module-corner-shape, squircle);
  background: rgba(9, 12, 15, 0.96);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

.node-hotkeys-page[hidden] {
  display: none !important;
}

.node-pages-page {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: var(--node-unified-window-min-width, 24px);
  min-height: var(--node-unified-window-min-height, 120px);
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(127, 199, 217, 0.42);
  border-radius: var(--node-module-frame-radius);
  corner-shape: var(--node-module-corner-shape, squircle);
  background: rgba(9, 12, 15, 0.96);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

.node-pages-page[hidden] {
  display: none !important;
}

.node-pages-page > .scene-context-heading,
.node-pages-page > .node-unified-window-nav-host {
  flex: 0 0 auto;
}

.node-pages-page-body {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* Clear the SE resize grip so rows do not stack under / clip into it. */
  padding: 8px 10px 28px;
  display: flex;
  flex-direction: column;
  align-content: start;
  gap: 6px;
}

.node-command-center-dock > .node-pages-page > .node-pages-page-body {
  flex: 1 1 auto;
  min-height: 0;
}

.node-pages-status {
  flex: 0 0 auto;
  color: rgba(160, 167, 176, 0.78);
  font-size: 0.78rem;
  padding: 8px 4px;
}



.node-pages-folder-card {
  width: 100%;
  cursor: var(--node-dot-cursor);
}

.node-pages-folder-card:hover,
.node-pages-folder-card:focus-visible {
  border-color: rgba(127, 199, 217, 0.55);
  background: rgba(24, 32, 38, 0.92);
}

.node-pages-folder-count {
  color: rgba(127, 199, 217, 0.78);
  font-size: 0.72rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}


.node-pages-back {
  width: 100%;
  margin-bottom: 0.35rem;
  justify-content: flex-start;
  font-weight: 600;
  opacity: 0.92;
}

.node-pages-folder {
  box-sizing: border-box;
  width: 100%;
  margin: 0.85rem 0 0.35rem;
  padding: 0.35rem 0.55rem;
  color: rgba(127, 199, 217, 0.92);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(127, 199, 217, 0.28);
}

.node-pages-folder:first-child {
  margin-top: 0.15rem;
}

.node-pages-entry {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid rgba(127, 199, 217, 0.22);
  border-radius: 6px;
  background: rgba(17, 20, 24, 0.72);
  color: rgba(243, 241, 236, 0.92);
  cursor: var(--node-dot-cursor);
  font: inherit;
}

.node-pages-entry:hover,
.node-pages-entry:focus-visible {
  border-color: rgba(127, 199, 217, 0.55);
  background: rgba(24, 32, 38, 0.92);
}

.node-pages-entry.confirming-default {
  border-color: rgba(251, 191, 36, 0.65);
  color: rgba(253, 230, 138, 0.95);
}

.node-pages-entry-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.node-pages-entry-title {
  font-size: 0.82rem;
  font-weight: 650;
}

.node-pages-entry-title.is-custom-name {
  color: rgba(166, 227, 161, 0.95);
}

.node-pages-entry-meta {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  color: rgba(243, 241, 236, 0.52);
  font-size: 0.68rem;
  font-weight: 450;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-pages-entry-author,
.node-pages-entry-tags {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-pages-entry-tags {
  opacity: 0.92;
}

.node-pages-entry-path {
  color: rgba(127, 199, 217, 0.78);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.72rem;
}

.node-emoji-page {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: var(--node-unified-window-min-width, 24px);
  min-height: var(--node-unified-window-min-height, 120px);
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(127, 199, 217, 0.42);
  border-radius: var(--node-module-frame-radius);
  corner-shape: var(--node-module-corner-shape, squircle);
  background: rgba(9, 12, 15, 0.96);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

.node-emoji-page[hidden] {
  display: none !important;
}

.node-emoji-page-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 8px 10px 14px;
}

.node-emoji-section + .node-emoji-section {
  margin-top: 12px;
}

.node-emoji-section-title {
  margin: 0 0 6px;
  color: rgba(127, 199, 217, 0.88);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.node-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 34px);
  gap: 0;
}

.node-emoji-glyph {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
}

.node-emoji-glyph:hover,
.node-emoji-glyph:focus-visible {
  border: none;
  border-color: transparent;
  background: rgba(180, 196, 208, 0.14);
  box-shadow: none;
  outline: none;
}

.node-emoji-glyph.saved-default,
.node-emoji-glyph.saved-default:hover,
.node-emoji-glyph.saved-default:focus-visible {
  border: none;
  background: rgba(18, 122, 73, 0.92);
  color: #d9ffe8;
  box-shadow:
    0 0 0 1px rgba(102, 255, 175, 0.38) inset,
    0 0 22px rgba(102, 255, 175, 0.54),
    0 0 42px rgba(102, 255, 175, 0.24);
  animation: node-default-saved-pulse 1000ms ease-out both;
}

.node-hotkeys-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.node-hotkeys-row {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 8px;
  border-bottom: 1px solid rgba(127, 199, 217, 0.12);
  color: rgba(243, 241, 236, 0.92);
  font: 650 0.78rem/1.2 "Cascadia Mono", Consolas, monospace;
}

.node-hotkeys-row kbd {
  justify-self: start;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(226, 168, 109, 0.95);
  font: 800 0.78rem/1 inherit;
}

.node-hotkeys-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-visibility-menu .scene-context-heading {
  flex: 0 0 auto;
}

.node-visibility-menu-list {
  /* Fixed row height = other floating-window widgets; extra panel height scrolls
     instead of stretching every toggle to fill the window. */
  display: grid;
  grid-auto-rows: var(--node-floating-window-button-height);
  align-content: start;
  flex: 1 1 auto;
  gap: 0;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.node-visibility-menu > .scene-context-resize-handle {
  flex: 0 0 auto;
}

.node-visibility-menu-list button {
  display: flex;
  align-items: center;
  /* Emoji + label flush left (⬜/⬛ then name). */
  justify-content: flex-start;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--node-floating-window-button-height);
  min-height: var(--node-floating-window-button-height);
  max-height: var(--node-floating-window-button-height);
  overflow: hidden;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid rgba(226, 168, 109, 0.24);
  border-radius: 0;
  background: rgb(16, 22, 26);
  font-size: 0.72rem;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep hotkey badge on the right; label/emoji stay left. */
.node-visibility-menu-list button:has(kbd) {
  justify-content: space-between;
}

.node-visibility-menu-list button > span,
.node-visibility-menu-list button > .node-visibility-toggle-label,
.node-visibility-menu-list button > .node-tooltip-mode-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-visibility-menu-list button:last-child {
  border-bottom: 0;
}

.node-visibility-menu-list button:hover,
.node-visibility-menu-list button:focus-visible {
  background: rgb(22, 32, 38);
}

.node-view-toolbar button:not(:disabled):not(.active):not(.confirming-default):not(.saved-default):hover,
.node-view-toolbar a:not(.active):hover,
.node-toolbar-hsl-control:hover {
  border-color: var(--node-front-button-hover-border);
  background: var(--node-front-button-hover-bg);
  box-shadow: none;
  color: var(--node-front-button-hover-color);
}

#nodeZoomResetButton {
  align-items: center;
  justify-content: center;
  font-family: var(--node-toolbar-mono, Consolas, "Courier New", monospace);
  font-size: clamp(0.98rem, 1.28vw, 1.28rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.node-zoom-reset-input {
  width: 4.25ch;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.node-zoom-reset-input:focus {
  outline: none;
}

.node-toolbar-hsl-control {
  gap: 4px;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: clamp(0.9rem, 1.15vw, 1.15rem);
}

.node-toolbar-hsl-control input {
  width: min(2.8em, 70%);
  min-width: 0;
  height: calc(100% - 12px);
  padding: 0;
  border: 1px solid rgba(243, 241, 236, 0.11);
  border-radius: 4px;
  background: #101214;
  color: var(--text);
  font: inherit;
}

.node-toolbar-hsl-control input::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.node-toolbar-hsl-control input::-webkit-color-swatch {
  border: 0;
  border-radius: 3px;
}

.node-toolbar-hsl-control input:focus {
  outline: none;
  border-color: rgba(127, 199, 217, 0.58);
}

/* Same chrome as the command center (.node-scene-context-menu) and the other
   floating windows: identical border, radius, gradient, shadow and mono
   font. Size driven by shared SE grip / floating-window size vars. */
.node-user-ui-settings-panel {
  position: fixed;
  z-index: 96;
  top: 96px;
  right: 22px;
  /* Flex column: heading / actions / tabs / scroll body. Exposed controls
     always pack to the top of the body — never sink when the window is tall. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  width: var(--node-user-ui-settings-width, min(var(--node-unified-window-default-width, 380px), calc(100vw - 32px)));
  height: var(--node-user-ui-settings-height, min(var(--node-unified-window-default-height, 620px), calc(100vh - 124px)));
  min-width: var(--node-user-ui-settings-min-width, var(--node-unified-window-min-width, 24px));
  min-height: var(--node-user-ui-settings-min-height, var(--node-unified-window-min-height, 120px));
  max-width: var(--node-user-ui-settings-max-width, none);
  max-height: var(--node-user-ui-settings-max-height, calc(100vh - 24px));
  overflow: hidden;
  border: 1px solid rgba(127, 199, 217, 0.42);
  border-radius: var(--node-module-frame-radius);
  corner-shape: var(--node-module-corner-shape, squircle);
  background:
    linear-gradient(180deg, rgba(31, 36, 41, 0.98), rgba(10, 13, 16, 0.98)),
    rgba(27, 30, 34, 0.98);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(226, 168, 109, 0.08);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
}

.node-user-ui-settings-panel > .scene-context-heading {
  display: grid;
  flex: 0 0 auto;
}

.node-user-ui-settings-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(127, 199, 217, 0.16);
  background: rgb(5, 8, 10);
}

.node-user-ui-settings-tabs > button {
  flex: 1 1 0;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.node-user-ui-settings-tabs > button[aria-selected="true"] {
  color: var(--accent);
  background: rgba(127, 199, 217, 0.08);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.node-user-ui-settings-tabs > button:hover,
.node-user-ui-settings-tabs > button:focus-visible {
  color: var(--accent);
}

.node-user-ui-settings-page,
.node-user-ui-settings-uidev-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.node-user-ui-settings-page[hidden],
.node-user-ui-settings-uidev-host[hidden] {
  display: none !important;
}

.node-user-ui-settings-panel .node-ui-dev-helper-embedded {
  position: relative;
  inset: auto;
  top: auto;
  right: auto;
  z-index: auto;
  flex: 1 1 auto;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.node-user-ui-settings-panel .node-ui-dev-helper-embedded > .scene-context-heading,
.node-user-ui-settings-panel .node-ui-dev-helper-embedded > .scene-context-resize-handle {
  display: none;
}

#nodeUserUiSettingsClose {
  z-index: 8;
  pointer-events: auto;
}

.node-user-ui-settings-panel[hidden] {
  display: none;
}

.node-patch-defaults-panel[hidden] {
  display: none !important;
}

.node-patch-defaults-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: auto;
}

.node-patch-defaults-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.node-circuit-patch-tools {
  display: flex;
  flex-direction: row;
  gap: 4px;
  margin: 8px 6px 0;
}

.node-circuit-patch-tools button {
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

#nodeCircuitPatchDefault {
  flex: 1 1 auto;
}

.node-circuit-patch-tools button.is-filled {
  background: rgba(255, 120, 120, 0.38);
}

.node-circuit-patch-tools button.is-active {
  outline: 1px solid rgb(255, 170, 170);
}

.node-circuit-patch-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
  margin: 8px 6px 6px;
  overflow: visible;
}

.node-circuit-patch-slot {
  min-height: 26px;
  padding: 0 1px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.node-circuit-patch-slot.is-filled {
  background: rgba(255, 120, 120, 0.38);
}

.node-circuit-patch-slot.is-active {
  outline: 1px solid rgb(255, 170, 170);
}

.node-patch-defaults-actions #nodePatchWiresButton {
  grid-column: 1 / -1;
}

.node-patch-defaults-actions .scene-context-window-button {
  width: auto;
  min-width: 0;
  min-height: 32px;
  margin: 0;
  border-radius: 4px;
  justify-content: center;
}

.node-patch-defaults-lock {
  min-width: 36px;
  padding: 0 8px;
  font-size: 1.15rem;
  line-height: 1;
}

.node-patch-defaults-actions .scene-context-window-button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 18%, #05090b);
  color: color-mix(in srgb, var(--accent) 88%, white 12%);
}

.node-patch-defaults-field {
  display: grid;
  grid-template-columns: 7.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0 10px;
  margin: 0;
  padding: 4px 10px;
  min-height: 36px;
  border: 0;
  border-bottom: 1px solid rgba(127, 199, 217, 0.14);
  background: rgba(5, 9, 11, 0.62);
  color: var(--muted);
  font-size: 0.86rem;
}

.node-patch-defaults-field > span {
  min-width: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.node-patch-defaults-field input,
.node-patch-defaults-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 3px;
  background: #05090b;
  color: var(--text);
  font: 600 0.92rem/1.3 inherit;
}

.node-patch-defaults-field input[type="number"] {
  -moz-appearance: textfield;
}

.node-patch-defaults-field input[type="number"]::-webkit-outer-spin-button,
.node-patch-defaults-field input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.node-patch-defaults-field input:focus,
.node-patch-defaults-field textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
}

.node-patch-defaults-field-wide {
  align-items: start;
  padding-top: 8px;
  padding-bottom: 8px;
}

.node-patch-defaults-field-wide textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.node-patch-defaults-body .scene-context-window-button {
  width: 100%;
  margin: 0;
  border-radius: 0;
  min-height: var(--node-floating-window-button-height);
  justify-content: center;
}

.node-patch-defaults-status {
  display: block;
  min-height: 1.2em;
  margin: 0;
  padding: 4px 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.35;
}

/* Heading, title group, drag handle and close button all come from the
   shared floating-window rules (search .scene-context-heading) -- this panel
   is now just another member of those selector lists, so nothing bespoke is
   needed here. */

.node-user-ui-settings-actions {
  /* Stay above the scrollable exposed-settings list so overflow never steals clicks.
     Fixed row height — never stretch Copy / Paste with panel height. */
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--node-floating-window-button-height);
  gap: 0;
  align-items: stretch;
  align-content: start;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  height: var(--node-floating-window-button-height);
  min-height: var(--node-floating-window-button-height);
  max-height: var(--node-floating-window-button-height);
  min-width: 0;
  padding: 0;
  border-bottom: 1px solid rgba(127, 199, 217, 0.16);
  background: rgba(3, 5, 7, 0.48);
  isolation: isolate;
}

.node-user-ui-settings-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: var(--node-floating-window-button-height);
  min-height: var(--node-floating-window-button-height);
  max-height: var(--node-floating-window-button-height);
  margin: 0;
  padding: 0 4px;
  border-radius: 0;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.68rem;
  line-height: 1;
  /* Long labels (e.g. "Save UI Settings") used to paint over "Clear Startup"
     and capture its clicks — clip to the grid cell hitbox. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  z-index: 0;
}

.node-user-ui-settings-actions button + button {
  margin-left: -1px;
}

.node-user-ui-settings-actions button:hover,
.node-user-ui-settings-actions button:focus-visible {
  z-index: 1;
}

.node-user-ui-settings-controls {
  position: relative;
  z-index: 0;
  /* Top-pack exposed sections; free space stays below (tall window). */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: none;
  /* Clip children that use overflow:visible so they cannot paint over the
     Clear Startup / Save action row above this track. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  scrollbar-gutter: auto;
  /* Bottom room for the shared SE resize grip (18px). */
  padding: 9px 9px 22px;
}

.node-user-ui-settings-controls::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.node-user-ui-settings-section {
  display: grid;
  gap: 0;
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(127, 199, 217, 0.16);
  border-radius: 5px;
  background: rgba(3, 5, 7, 0.28);
}

.node-user-ui-settings-section-heading {
  display: grid;
  align-items: center;
  min-height: 30px;
  padding: 0 8px;
  border-bottom: 1px solid rgba(127, 199, 217, 0.12);
  color: var(--accent);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
  line-height: 1;
}

.node-user-ui-settings-section .node-ui-dev-section-body {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 7px;
  border-top: 0;
  overflow: visible;
}

.node-user-ui-setting-control {
  display: grid;
  grid-template-columns: minmax(96px, 0.88fr) minmax(0, 1.12fr) 58px;
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.node-user-ui-setting-control.color {
  font-family: var(--mono);
  grid-template-columns: minmax(96px, 1fr) 36px 9ch;
}

.node-user-ui-setting-control.select {
  grid-template-columns: minmax(96px, 0.82fr) minmax(0, 1.18fr) 76px;
}

.node-user-ui-setting-control.boolean {
  grid-template-columns: minmax(96px, 1fr) 22px;
}

.node-user-ui-setting-control.action {
  grid-template-columns: minmax(96px, 1fr) minmax(0, 1fr);
}

.node-user-ui-setting-control > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.node-user-ui-setting-control.action button {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  border: 1px solid rgba(127, 199, 217, 0.24);
  border-radius: 4px;
  background: rgba(3, 5, 7, 0.62);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.node-user-ui-setting-control.action button:hover,
.node-user-ui-setting-control.action button:focus-visible {
  border-color: rgba(127, 199, 217, 0.52);
  outline: none;
}

.node-user-ui-setting-control input[type="range"] {
  width: 100%;
  min-width: 0;
  accent-color: var(--accent);
}

.node-user-ui-setting-control input[type="color"] {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(127, 199, 217, 0.24);
  border-radius: 4px;
  background: rgba(3, 5, 7, 0.52);
}

.node-user-ui-setting-control select {
  width: 100%;
  min-width: 0;
  height: 28px;
  border: 1px solid rgba(127, 199, 217, 0.22);
  border-radius: 4px;
  background: rgba(3, 5, 7, 0.7);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.node-user-ui-setting-control input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.node-user-ui-setting-control output,
.node-user-ui-setting-control input[type="number"] {
  display: grid;
  min-height: 24px;
  align-items: center;
  justify-items: end;
  padding: 0 4px;
  border: 1px solid rgba(127, 199, 217, 0.18);
  border-radius: 4px;
  background: rgba(3, 5, 7, 0.46);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  overflow: visible;
  text-overflow: clip;
}

.node-user-ui-setting-control input[type="number"] {
  width: 100%;
  min-width: 0;
  background: rgba(3, 5, 7, 0.82);
  text-align: right;
}

.node-user-ui-setting-control input[type="number"]:focus {
  outline: none;
  border-color: rgba(127, 199, 217, 0.58);
}

.node-user-ui-settings-empty {
  flex: 0 0 auto;
  align-self: stretch;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

/* Overlay the modular workspace. Showing tooltips / CPU meters must not
   steal height from #nodeGraphWorkspace (that pin-camera + pan + wire +
   heatmap + scope pass is a full scene rebuild). */
.node-help-stack {
  display: flex;
  flex-direction: column;
  justify-self: center;
  flex: 0 0 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 0;
  overflow: visible;
  gap: 0;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 18;
  pointer-events: none;
}

.node-help-stack > * {
  pointer-events: auto;
}

.node-help-stack > [hidden] {
  display: none;
}

/* Free-floating, draggable, resizable window -- same generic subsystem
   as Command Center et al (node-graph-floating-windows.js) -- hosting
   the interaction tips. Explicitly exempted from the modular-only-view
   chrome-hiding rule above so tips stay reachable there too, which is
   the whole point of pulling this out of .node-help-stack (a plain
   in-flow row that modular-only view hides along with everything else). */
.node-tooltip-window {
  position: fixed;
  z-index: 60;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: clamp(
    var(--node-tooltip-window-min-width, 260px),
    var(--node-tooltip-window-width, 420px),
    min(var(--node-tooltip-window-max-width, 900px), calc(100vw - 28px))
  );
  height: var(--node-tooltip-window-height, auto);
  min-height: var(--node-tooltip-window-min-height, 90px);
  max-height: min(var(--node-tooltip-window-max-height, 480px), calc(100vh - 28px));
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(127, 199, 217, 0.05), transparent 48%),
    #080a0c;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(127, 199, 217, 0.08);
}

/* Title bar stays fixed; tip body owns every remaining pixel of the window. */
.node-tooltip-window > .scene-context-heading {
  flex: 0 0 auto;
  position: relative; /* not sticky — no scroll body under the title in this window */
  top: auto;
}

.node-tooltip-window[hidden] {
  display: none;
}

.node-sample-waveform-settings-window {
  display: none !important;
}

.node-settings-range-row,
.node-sample-waveform-settings-row,
.node-led-settings-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-top: 1px solid rgba(226, 168, 109, 0.16);
}

.node-settings-range-row > span:first-child,
.node-sample-waveform-settings-row > span:first-child,
.node-led-settings-row > span:first-child {
  flex: 1 1 auto;
  color: var(--muted);
}

/* Waveform settings hosts the Music Player path box and the sample-module
   📂 loader. Keep path box + folder button on one shared control height. */
.node-sample-waveform-loader-slot,
.node-sample-waveform-phase-slot {
  --node-sample-control-height: var(--ds-row-h, var(--metadata-control-row-height, 22px));
  --node-sample-control-line: rgba(0, 2, 4, 0.82);
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
}

.node-sample-waveform-load-row {
  align-items: center;
  min-height: var(--ds-row-h, var(--metadata-control-row-height, 22px));
  padding-top: 0;
  padding-bottom: 0;
}

.node-sample-waveform-loader-slot .node-sample-path-loader {
  width: 100%;
  height: var(--node-sample-control-height);
  align-self: center;
}

.node-sample-waveform-settings-row.node-sample-waveform-playlist-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin: 0;
}

.node-sample-waveform-settings-row.node-sample-waveform-load-actions {
  grid-template-columns: minmax(0, 1fr);
}

.node-sample-waveform-settings-row.node-sample-waveform-playlist-actions > button {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.node-sample-waveform-history-reset {
  grid-template-columns: minmax(0, 1fr);
}

.node-sample-waveform-tune-row {
  display: grid;
  grid-template-columns: minmax(7rem, 0.38fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.node-sample-waveform-tune-row > span:first-child {
  flex: 0 0 auto;
  min-width: 0;
}

.node-sample-waveform-control-widgets {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.node-sample-waveform-control-widgets input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.node-sample-waveform-control-widgets input[type="number"] {
  flex: 0 0 auto;
  width: auto;
  min-width: 2.25em;
  max-width: 100%;
  padding: 3px 4px 3px 2px;
  text-align: left;
}

.node-sample-waveform-formats-row {
  align-items: stretch;
}

.node-sample-waveform-formats-row .node-sample-waveform-format-checks {
  flex: 1 1 auto;
}

.node-sample-waveform-format-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.node-sample-waveform-format-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.node-sample-waveform-loader-slot .node-sample-path-loader {
  width: 100%;
  min-width: 0;
}

.node-sample-waveform-loader-slot .node-sample-path-button,
.node-sample-waveform-phase-slot .node-sample-copy-phase-button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.06);
  font-size: calc(var(--node-sample-control-height) * 0.82);
}

.node-sample-waveform-phase-row > span:first-child {
  flex: 0 0 auto;
}

/* Read-only until double-clicked (time window + px fields). */
#nodeSampleWaveformTimeWindowInput[readonly],
#nodeSampleWaveformLineWidthInput[readonly],
#nodeSampleWaveformTraceWidthInput[readonly],
#nodeSampleWaveformPlaylistVisibleCountInput[readonly] {
  cursor: var(--node-dot-cursor);
  user-select: none;
  caret-color: transparent;
}

#nodeSampleWaveformTimeWindowInput.editing,
#nodeSampleWaveformLineWidthInput.editing,
#nodeSampleWaveformTraceWidthInput.editing,
#nodeSampleWaveformPlaylistVisibleCountInput.editing {
  border-color: rgba(127, 199, 217, 0.52);
  cursor: text;
  caret-color: currentColor;
}

.node-sample-waveform-settings-row input[type="number"],
.node-led-settings-row input[type="number"] {
  width: 56px;
  padding: 3px 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  text-align: right;
  /* Kill browser focus chrome (thick white / OS outline on number fields). */
  outline: none;
  box-shadow: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.node-sample-waveform-settings-row input[type="number"]:focus,
.node-sample-waveform-settings-row input[type="number"]:focus-visible,
.node-led-settings-row input[type="number"]:focus,
.node-led-settings-row input[type="number"]:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: rgba(127, 199, 217, 0.52);
}

.node-sample-waveform-settings-row input[type="number"]::-webkit-outer-spin-button,
.node-sample-waveform-settings-row input[type="number"]::-webkit-inner-spin-button,
.node-led-settings-row input[type="number"]::-webkit-outer-spin-button,
.node-led-settings-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.node-sample-waveform-settings-row input[data-phosphor-number-drag] {
  width: auto;
  min-width: 2.25em;
  padding: 3px 4px 3px 2px;
  text-align: left;
  cursor: var(--node-dot-cursor);
  user-select: none;
  -webkit-user-select: none;
}
.node-led-settings-row input[data-unit-stepper-drag][readonly],
.node-led-settings-row input[data-textbox-field][data-unit-stepper-drag][readonly] {
  cursor: var(--node-dot-cursor);
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
}
.node-led-settings-row input[data-unit-stepper-drag]:not([readonly]):focus,
.node-led-settings-row input[data-unit-stepper-drag].editing {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  caret-color: currentColor;
}
.node-sample-waveform-settings-row input[data-phosphor-number-drag].editing {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}
.node-sample-waveform-settings-row input[type="number"].value-dragging,
.node-led-settings-row input[type="number"].value-dragging {
  border-color: rgba(127, 199, 217, 0.42);
  background: rgba(127, 199, 217, 0.08);
  cursor: var(--node-dot-cursor);
}

.node-sample-waveform-control-widgets > button,
.node-sample-waveform-settings-row button,
.node-led-settings-row button {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
}

/* Image Ghost / keypad asset row: keep Image + Load/Save/Clear readable.
   Inspector grid buttons use padding:0 and flex min-width:0, which clipped
   "Image" to "IM" and "no image" to "n...". */
.node-image-asset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.node-image-asset-row > span:first-child {
  flex: 0 0 auto;
  min-width: min-content;
  overflow: visible;
  white-space: nowrap;
}

.node-trace-display-settings-popover .metadata-popover-grid .node-image-asset-row > button,
.node-image-asset-row > button {
  flex: 0 0 auto;
  min-width: min-content;
  padding: 3px 8px;
}

.node-image-asset-row small {
  flex: 1 1 6rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.72;
}

.node-sample-waveform-settings-row button.active,
.node-led-settings-row button.active {
  border-color: rgba(90, 255, 150, 0.62);
  background: rgba(90, 255, 150, 0.16);
  color: rgba(180, 255, 210, 0.95);
}

/* Off -> quarter -> rated colour -> over-driven -> white, exactly the ramp
   the lamp face uses. Spans the row on its own so it reads as a swatch
   rather than a control. */
.node-led-color-preview {
  flex: 1 1 auto;
  min-width: 0;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.node-settings-range-row input[type="range"],
.node-sample-waveform-settings-row input[type="range"],
.node-led-settings-row input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: rgba(90, 255, 150, 0.85);
  cursor: var(--node-slider-dot-cursor);
}

.node-sample-waveform-settings-row select,
.node-led-settings-row select {
  flex: 1 1 auto;
  min-width: 0;
}

/*
 * LED panel inside Command Center Display Settings.
 * Only fight the shared inspector chrome (.metadata-popover-grid label grid,
 * 0.62rem type, 30px buttons, * { min-width:0 }). Do not invent new type sizes
 * or fixed label columns — original uses body Segoe UI + font:inherit.
 */
.node-trace-display-settings-popover[data-display-settings-type="ledLamp"],
.node-trace-display-settings-popover[data-display-settings-type="phosphorWaveform"],
.node-trace-display-settings-popover[data-display-settings-type="matrixWaterfallFace"] {
  background:
    linear-gradient(180deg, rgba(90, 255, 150, 0.05), transparent 48%),
    #080a0c;
  border-color: rgba(90, 255, 150, 0.28);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(90, 255, 150, 0.08);
}

.node-trace-display-settings-popover[data-display-settings-type="ledLamp"] > .node-trace-display-settings-grid,
.node-trace-display-settings-popover[data-display-settings-type="ledLamp"] > .metadata-popover-grid,
.node-trace-display-settings-popover[data-display-settings-type="phosphorWaveform"] > .node-trace-display-settings-grid,
.node-trace-display-settings-popover[data-display-settings-type="phosphorWaveform"] > .metadata-popover-grid,
.node-trace-display-settings-popover[data-display-settings-type="matrixWaterfallFace"] > .node-trace-display-settings-grid,
.node-trace-display-settings-popover[data-display-settings-type="matrixWaterfallFace"] > .metadata-popover-grid {
  background: transparent;
}

/* Panel: body font stack (same as dedicated window / body). */
.node-trace-display-settings-popover .node-led-display-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background:
    linear-gradient(180deg, rgba(90, 255, 150, 0.05), transparent 48%),
    #080a0c;
  color: var(--text, rgba(243, 241, 236, 0.92));
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: normal;
}

/* Popover sets * { min-width:0 } — restore normal shrink rules for LED rows. */
.node-trace-display-settings-popover .node-led-display-settings-panel,
.node-trace-display-settings-popover .node-led-display-settings-panel * {
  min-width: auto;
  min-inline-size: auto;
}

/*
 * Rows: copy .node-led-settings-row exactly. !important only where the
 * metadata grid label rule would otherwise win (display/grid/font-size).
 */
.node-trace-display-settings-popover .node-led-display-settings-panel .node-led-settings-row,
.node-trace-display-settings-popover .metadata-popover-grid .node-led-display-settings-panel label.node-led-settings-row {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 1px 3px;
  border: 0;
  border-top: 1px solid rgba(226, 168, 109, 0.16);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.node-trace-display-settings-popover .node-led-display-settings-panel .node-led-settings-row:first-child {
  border-top: 0;
}

.node-trace-display-settings-popover .node-led-display-settings-panel .node-led-settings-row.node-sample-waveform-tune-row,
.node-trace-display-settings-popover .metadata-popover-grid .node-led-display-settings-panel label.node-led-settings-row.node-sample-waveform-tune-row {
  display: grid !important;
  grid-template-columns: minmax(6.25rem, 0.34fr) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center;
  gap: 4px;
}

.node-trace-display-hbs-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  align-items: stretch;
}

.node-trace-display-hbs-row > .node-trace-display-hbs-widget,
.node-trace-display-hbs-row > .node-trace-display-color-widget-row,
.node-trace-display-hbs-row > .node-trace-display-hsl-lamp {
  min-width: 0;
  min-height: var(--ds-color-host-h, 168px);
}

.node-trace-display-hbs-widget .node-trace-display-color-widget-host {
  width: 100%;
  min-height: var(--ds-color-host-h, 168px);
}

/* Labels + trailing %: same as original first-span / unit span. */
.node-trace-display-settings-popover .node-led-display-settings-panel .node-led-settings-row > span:first-child,
.node-trace-display-settings-popover .metadata-popover-grid .node-led-display-settings-panel label.node-led-settings-row > span:first-child {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: min-content !important;
  overflow: visible;
  padding: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-overflow: clip;
  white-space: nowrap;
}

/* Rounding % (last span after the range) — same size as Rounding text. */
.node-trace-display-settings-popover .node-led-display-settings-panel .node-led-settings-row > span:not(:first-child) {
  flex: 0 0 auto;
  min-width: min-content !important;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
}

.node-trace-display-settings-popover .node-led-display-settings-panel input[type="range"],
.node-trace-display-settings-popover .metadata-popover-grid .node-led-display-settings-panel input[type="range"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  accent-color: rgba(90, 255, 150, 0.85);
}

/*
 * Square / Squircle: content-sized only (padding 3px 8px, font:inherit).
 * Defeat metadata button min-height:30px / padding:0 / font-size:0.72rem.
 */
.node-trace-display-settings-popover .node-led-display-settings-panel .node-sample-waveform-control-widgets > button,
.node-trace-display-settings-popover .metadata-popover-grid .node-led-display-settings-panel .node-sample-waveform-control-widgets > button,
.node-trace-display-settings-popover .node-led-display-settings-panel .node-led-settings-row > button,
.node-trace-display-settings-popover .metadata-popover-grid .node-led-display-settings-panel .node-led-settings-row > button {
  box-sizing: border-box;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none;
  min-width: min-content !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0;
  padding: 2px 6px !important;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
}

.node-trace-display-settings-popover .node-led-display-settings-panel .node-led-settings-row > button.active,
.node-trace-display-settings-popover .metadata-popover-grid .node-led-display-settings-panel .node-led-settings-row > button.active {
  border-color: rgba(90, 255, 150, 0.62);
  background: rgba(90, 255, 150, 0.16);
  color: rgba(180, 255, 210, 0.95);
}

.node-trace-display-settings-popover .node-sample-waveform-load-row,
.node-trace-display-settings-popover .metadata-popover-grid .node-sample-waveform-load-row {
  display: flex !important;
  align-items: center !important;
  gap: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: var(--ds-row-h, var(--metadata-control-row-height, 22px));
}

.node-trace-display-settings-popover .node-sample-waveform-playlist-actions,
.node-trace-display-settings-popover .metadata-popover-grid .node-sample-waveform-playlist-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0;
}

.node-trace-display-settings-popover .node-sample-waveform-load-actions,
.node-trace-display-settings-popover .metadata-popover-grid .node-sample-waveform-load-actions {
  grid-template-columns: minmax(0, 1fr) !important;
}

.node-trace-display-settings-popover .node-sample-waveform-history-reset,
.node-trace-display-settings-popover .metadata-popover-grid .node-sample-waveform-history-reset {
  grid-template-columns: minmax(0, 1fr) !important;
}

.node-trace-display-settings-popover .node-sample-waveform-playlist-actions > button,
.node-trace-display-settings-popover .metadata-popover-grid .node-sample-waveform-playlist-actions > button {
  flex: 1 1 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.node-trace-display-settings-popover .node-sample-waveform-loader-slot,
.node-trace-display-settings-popover .node-sample-waveform-loader-slot .node-sample-path-loader,
.node-trace-display-settings-popover .node-sample-waveform-loader-slot .node-sample-path-input {
  min-width: 0 !important;
  min-inline-size: 0 !important;
}

.node-trace-display-settings-popover .node-sample-waveform-loader-slot .node-sample-path-button {
  flex: 0 0 auto !important;
  width: var(--node-sample-control-height) !important;
  min-width: var(--node-sample-control-height) !important;
  height: var(--node-sample-control-height) !important;
  min-height: var(--node-sample-control-height) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: calc(var(--node-sample-control-height) * 0.82) !important;
}

.node-trace-display-settings-popover .node-led-display-settings-panel .node-led-color-preview {
  flex: 1 1 auto;
  min-width: 0;
  height: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.node-trace-display-settings-popover[data-display-settings-type="ledLamp"] .node-trace-display-settings-target {
  color: var(--muted);
  border-bottom-color: rgba(90, 255, 150, 0.12);
}

.node-trace-display-settings-popover[data-display-settings-type="ledLamp"] .metadata-field-actions {
  border-color: rgba(90, 255, 150, 0.18);
  background: rgba(4, 8, 6, 0.55);
}

/* Defaults button keeps inspector chrome size — only LED row buttons use inherit. */
.node-trace-display-settings-popover[data-display-settings-type="ledLamp"] .metadata-field-actions button {
  color: rgba(210, 236, 218, 0.9);
}

.node-trace-display-settings-popover[data-display-settings-type="keypadFace"] .node-led-display-settings-panel {
  background: transparent;
  color: inherit;
}

/* Text Box Display Settings: label | controls two-column grid.
   Scoped to [data-textbox-display-settings-panel] only - does not change LED/keypad rows. */
.node-trace-display-settings-popover [data-textbox-display-settings-panel] .node-led-settings-row.textbox-display-settings-row,
.node-trace-display-settings-popover .metadata-popover-grid [data-textbox-display-settings-panel] label.node-led-settings-row.textbox-display-settings-row {
  display: grid !important;
  grid-template-columns: 8.75rem minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center;
  column-gap: 8px;
  row-gap: 0;
  justify-items: stretch;
}

.node-trace-display-settings-popover [data-textbox-display-settings-panel] .textbox-display-settings-row > span:first-child,
.node-trace-display-settings-popover .metadata-popover-grid [data-textbox-display-settings-panel] label.textbox-display-settings-row > span:first-child {
  flex: 0 0 auto;
  grid-column: 1;
  justify-self: start;
  width: auto;
  max-width: 100%;
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-trace-display-settings-popover [data-textbox-display-settings-panel] .textbox-display-controls {
  grid-column: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

/* Mode / Align buttons sit in the controls column (not direct row children). */
.node-trace-display-settings-popover [data-textbox-display-settings-panel] .textbox-display-controls > button,
.node-trace-display-settings-popover .metadata-popover-grid [data-textbox-display-settings-panel] .textbox-display-controls > button {
  box-sizing: border-box;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none;
  min-width: min-content !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0;
  padding: 2px 6px !important;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
}

.node-trace-display-settings-popover [data-textbox-display-settings-panel] .textbox-display-controls > button.active,
.node-trace-display-settings-popover .metadata-popover-grid [data-textbox-display-settings-panel] .textbox-display-controls > button.active {
  border-color: rgba(90, 255, 150, 0.62);
  background: rgba(90, 255, 150, 0.16);
  color: rgba(180, 255, 210, 0.95);
}

.node-trace-display-settings-popover [data-textbox-display-settings-panel] .textbox-display-controls input[type="range"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
}

.node-trace-display-settings-popover [data-textbox-display-settings-panel] .textbox-display-controls select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.node-trace-display-settings-popover [data-textbox-display-settings-panel] .textbox-display-controls input[type="number"] {
  flex: 0 0 auto;
  width: 56px;
  margin: 0;
}

.node-trace-display-settings-popover [data-textbox-display-settings-panel] .textbox-display-controls > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Tips window uses shared .scene-context-resize-handle (SE corner). */

/* No border/background/box-shadow of its own -- .node-tooltip-window
   already provides chrome. Fills leftover window height (flex: 1 + min-height: 0).
   Do NOT set a large min-height here — at window min (90px) the title bar is
   ~30px, so the body only has ~60px; a 72px min left empty/clipped space.
   Font size is --node-tooltip-text-size. The box does not grow with the text. */
.node-interaction-help {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: auto;
  padding: 4px 10px 8px; /* bottom room for the SE resize grip */
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: var(--node-tooltip-text-size, 14px);
  line-height: 1.25;
  overflow: hidden;
  text-align: center;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Floating tips host: claim every pixel under the title bar. */
.node-tooltip-window > .node-interaction-help {
  flex: 1 1 auto;
  min-height: 0;
}

.node-interaction-help:empty {
  color: transparent;
}

/* Embedded tips. Deliberately NOT full-bleed: centred and capped so it reads
   as a contained card sitting with the resource meters, the same way the
   CPU/RAM/GPU guide does, rather than a banner stretching wall to wall.
   width:fit-content keeps a one-line tip narrow instead of padding a short
   sentence out across the whole workspace. */
.node-interaction-help-embed-slot {
  display: flex;
  justify-content: center;
  align-self: center;
  width: 100%;
  min-width: 0;
}

/* FIXED box. The embedded tip sits in the page flow, so anything that lets it
   grow or shrink with the text reflows the whole interface every time the
   pointer moves over a different control -- the old width:fit-content plus
   open-ended min-height did exactly that. Width and height are now constant
   and the text stays at --node-tooltip-text-size.
   --node-tooltip-embed-height is the single knob for the height. */
.node-interaction-help.is-embedded {
  --node-tooltip-embed-height: 46px;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: min(720px, 100%);
  height: var(--node-tooltip-embed-height);
  min-height: var(--node-tooltip-embed-height);
  max-height: var(--node-tooltip-embed-height);
  border: 1px solid rgba(127, 199, 217, 0.12);
  border-radius: 6px;
  background: rgba(5, 8, 10, 0.72);
  padding: 4px 10px;
  overflow: hidden;
}

.node-constraint-color-guide {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(127, 199, 217, 0.12);
  border-radius: 6px;
  background: rgba(5, 8, 10, 0.72);
  color: rgba(243, 241, 236, 0.74);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
  line-height: 1.2;
}

.node-constraint-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
}

.node-constraint-chip {
  --node-constraint-color: var(--node-constraint-cpu);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--node-constraint-color) 42%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--node-constraint-color) 13%, rgba(3, 5, 7, 0.82));
  user-select: none;
  white-space: nowrap;
}

.node-constraint-chip:has(input:checked) {
  border-color: color-mix(in srgb, var(--node-constraint-color) 86%, transparent);
  background: color-mix(in srgb, var(--node-constraint-color) 24%, rgba(3, 5, 7, 0.82));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--node-constraint-color) 18%, transparent) inset,
    0 0 14px color-mix(in srgb, var(--node-constraint-color) 24%, transparent);
}

.node-constraint-chip input {
  width: 0.86rem;
  height: 0.86rem;
  margin: 0;
  accent-color: var(--node-constraint-color);
}

.node-constraint-chip[data-constraint="ram"] {
  --node-constraint-color: var(--node-constraint-ram);
}

.node-constraint-chip[data-constraint="gpu"] {
  --node-constraint-color: var(--node-constraint-gpu);
}

.node-constraint-chip strong {
  color: var(--node-constraint-color);
  font-size: 0.72rem;
  letter-spacing: 0;
}

.node-constraint-metrics {
  --node-constraint-meter-color: var(--node-constraint-gpu);
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--node-constraint-meter-color) 50%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--node-constraint-meter-color) 15%, rgba(3, 5, 7, 0.84));
  color: rgba(243, 241, 236, 0.74);
  white-space: nowrap;
}

.node-scope-cpu-metrics {
  --node-constraint-meter-color: var(--node-constraint-cpu);
}

.node-scope-ram-metrics {
  --node-constraint-meter-color: var(--node-constraint-ram);
}

.node-scope-gpu-metrics {
  --node-constraint-meter-color: var(--node-constraint-gpu);
}

.node-constraint-cpu-active .node-scope-cpu-metrics,
.node-constraint-ram-active .node-scope-ram-metrics,
.node-constraint-gpu-active .node-scope-gpu-metrics {
  display: inline-flex;
}

.node-constraint-metrics span {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}

.node-constraint-metrics strong {
  display: inline-block;
  min-width: 4ch;
  color: var(--node-constraint-meter-color);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-align: right;
}

.node-transport-bpm-face {
  cursor: var(--node-dot-cursor);
}

.node-parameter-row.f-jack-owns-frequency,
.node-parameter-row.bpm-jack-owns-bpm {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(226, 168, 109, 0.16) 0 7px,
      transparent 7px 14px
    );
}

.node-parameter-row[data-node-constraint],
.node-module-scope-window[data-node-constraint],
.node-module-face[data-node-constraint] {
  --node-active-constraint-color: transparent;
  --node-constraint-ring-cpu: transparent;
  --node-constraint-ring-ram: transparent;
  --node-constraint-ring-gpu: transparent;
  position: relative;
  border-radius: 5px;
}

.node-parameter-row[data-node-constraint]::before,
.node-module-scope-window[data-node-constraint]::before,
.node-module-face[data-node-constraint]::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 1px var(--node-port-column-width, 0px);
  z-index: 0;
  border-radius: 5px;
  opacity: 0;
  box-shadow:
    inset 0 0 0 1px var(--node-constraint-ring-cpu),
    inset 0 0 0 2px var(--node-constraint-ring-ram),
    inset 0 0 0 3px var(--node-constraint-ring-gpu),
    0 0 14px color-mix(in srgb, var(--node-active-constraint-color) 22%, transparent);
  background: color-mix(in srgb, var(--node-active-constraint-color) 10%, transparent);
}

.node-module-scope-window[data-node-constraint]::before,
.node-module-face[data-node-constraint]::before {
  inset: 1px;
}

.node-constraint-badges {
  position: absolute;
  top: -2px;
  right: calc(var(--node-port-column-width, 0px) + 4px);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: flex-end;
  pointer-events: none;
  max-width: 70%;
}

.node-module-scope-window > .node-constraint-badges,
.node-module-face > .node-constraint-badges {
  top: 3px;
  right: 4px;
}

.node-constraint-badge {
  display: none;
  padding: 1px 4px;
  border: 1px solid color-mix(in srgb, var(--node-badge-constraint-color) 58%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--node-badge-constraint-color) 24%, rgba(3, 5, 7, 0.9));
  color: var(--node-badge-constraint-color);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.node-constraint-badge[data-constraint-badge="cpu"] {
  --node-badge-constraint-color: var(--node-constraint-cpu);
}

.node-constraint-badge[data-constraint-badge="ram"] {
  --node-badge-constraint-color: var(--node-constraint-ram);
}

.node-constraint-badge[data-constraint-badge="gpu"] {
  --node-badge-constraint-color: var(--node-constraint-gpu);
}

.node-constraint-cpu-active [data-node-constraint~="cpu"] {
  --node-constraint-ring-cpu: var(--node-constraint-cpu);
  --node-active-constraint-color: var(--node-constraint-cpu);
}

.node-constraint-ram-active [data-node-constraint~="ram"] {
  --node-constraint-ring-ram: var(--node-constraint-ram);
  --node-active-constraint-color: var(--node-constraint-ram);
}

.node-constraint-gpu-active [data-node-constraint~="gpu"] {
  --node-constraint-ring-gpu: var(--node-constraint-gpu);
  --node-active-constraint-color: var(--node-constraint-gpu);
}

.node-constraint-cpu-active [data-node-constraint~="cpu"]::before,
.node-constraint-ram-active [data-node-constraint~="ram"]::before,
.node-constraint-gpu-active [data-node-constraint~="gpu"]::before {
  opacity: 1;
}

.node-constraint-cpu-active .node-constraint-badge[data-constraint-badge="cpu"],
.node-constraint-ram-active .node-constraint-badge[data-constraint-badge="ram"],
.node-constraint-gpu-active .node-constraint-badge[data-constraint-badge="gpu"] {
  display: inline-flex;
}

.node-view-tabs button.active {
  border-color: var(--line);
  background: rgba(127, 199, 217, 0.13);
  color: var(--accent);
}

#nodeSnapGridViewButton.active {
  border-color: transparent;
  background: rgba(127, 199, 217, 0.13);
  color: var(--accent);
  box-shadow: none;
}

.node-under-construction-view-button {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(243, 241, 236, 0.045) 0 7px,
      transparent 7px 14px
    ),
    rgba(17, 20, 24, 0.76);
  color: rgba(160, 167, 176, 0.72);
}

.node-under-construction-view-button[aria-disabled="true"]:hover {
  border-color: var(--node-front-button-hover-border);
  background: var(--node-front-construction-hover-bg);
  box-shadow: none;
  color: var(--node-front-button-hover-color);
}

@media (max-width: 980px) {
  /* Toolbar is flex (not grid) — allow horizontal scroll when cramped. */
  .node-view-toolbar {
    overflow-x: auto;
  }

  .node-wiring-panel.camera-view-visible {
    grid-template-columns: 1fr;
  }

  .node-wiring-panel.camera-view-visible .node-graph-workspace,
  .node-wiring-panel.camera-view-visible .node-video-view-panel {
    grid-column: 1;
  }
}


.node-graph-workspace {
  --node-graph-zoom: 1;
  --node-graph-pan-x: 0px;
  --node-graph-pan-y: 0px;
  --node-visual-shake-x: 0px;
  --node-visual-shake-y: 0px;
  --node-visual-bloom: 0;
  --node-visual-brightness: 0;
  --node-visual-glow: 0;
  --node-visual-wash-alpha: 0;
  --node-visual-wash-rgb: 0 0 0;
  --node-grid-color-rgb: 255 255 255;
  --node-grid-height: 28px;
  --node-grid-size: 28px;
  --node-grid-width: 28px;
  --node-grid-visual-scale: 2;
  --node-mouse-light-amount: 0.79;
  --node-mouse-light-color-rgb: 127 199 217;
  --node-mouse-light-spread: 0.05;
  --node-module-light-spread: 0.78;
  --node-module-light-brightness: 1;
  --node-grid-reveal-spread: 0.78;
  --node-grid-line-alpha: 0.2;
  --node-text-light-color-rgb: 243 241 236;
  --node-workspace-bg: #1d1b1b;
  --node-body-row-gap: 2px;
  --node-body-row-height: 30px;
  --node-header-gap: 0;
  --node-header-height: calc(34px + var(--node-grid-size) * 1.9285714);
  --node-header-padding-block-end: 0;
  --node-header-padding-block-start: 0;
  --node-header-padding-inline: 0;
  --node-header-title-row-height: 34px;
  --node-module-primary-text-color: rgba(243, 241, 236, 0.76);
  --node-header-title-font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  --node-io-column-padding: 0px;
  /* Stacked jack rows sit flush. */
  --node-io-gap: 0px;
  --node-io-label-gap: 3px;
  --node-io-section-min-height: max(1em, var(--node-signal-port-height));
  --node-io-section-padding-block: 0;
  --node-io-section-padding-top: 0px;
  --node-io-section-padding-bottom: 0px;
  /* Side + top plate air vs grid cell (UI Dev can override in px). */
  --node-module-grid-inset: calc(var(--node-grid-size) * 0.2142857);
  /* Bottom air is half of side/top → plate bottom sits halfway closer to the grid line. */
  --node-module-grid-inset-bottom: calc(var(--node-module-grid-inset) * 0.5);
  /* Vertical shrink of outer gu box: top full + bottom half. */
  --node-module-grid-inset-y-total: calc(
    var(--node-module-grid-inset) + var(--node-module-grid-inset-bottom)
  );
  /* Plate radius: 11% squircle (not a UIDEV control). */
  --node-module-roundness-ratio: 0.11;
  --node-module-corner-shape: squircle;
  --node-module-frame-radius: calc(var(--node-grid-size) * 2 * var(--node-module-roundness-ratio, 0.11));
  /*
   * Module stroke zoom compensate (UIDEV “module strokes fixed”, default on):
   *   1/zoom → 1px stays 1 *screen* CSS px under workspace camera scale
   *   1      → stroke scales with zoom
   * Applies to idle and selected plate outline.
   * Do NOT also use vector-effect:non-scaling-stroke — that double-handles
   * scale and walks the ring off the edge under zoom.
   */
  --node-module-stroke-zoom-compensate: calc(1 / max(0.0001, var(--node-graph-zoom, 1)));
  --node-module-frame-stroke-width: calc(1px * var(--node-module-stroke-zoom-compensate, 1));
  --node-module-scope-height: calc(var(--node-grid-height) * var(--node-module-display-height-units, 2));
  --node-module-interface-controls-height: calc(var(--node-grid-height) * var(--node-module-interface-controls-height-units, 4));
  --node-scope-port-band-overlap: 0px;
  --node-port-column-gap: calc(var(--node-grid-size) * 0.2857143);
  /*
   * IO jack geometry:
   *   slot = --node-port-area-size (1gu)
   *   visual jack = --node-port-size-ratio of the slot (UIDEV / UI settings)
   *   Ratio is capped (--node-port-size-ratio-max) so the crescent stroke
   *   stays inside the 1gu slot at any custom size (never clipped by the row).
   */
  --node-port-area-size: var(--node-grid-height);
  --node-port-size-ratio-max: 0.9;
  --node-port-size-ratio: 0.52;
  --node-port-diameter: calc(
    var(--node-port-area-size)
    * min(var(--node-port-size-ratio, 0.52), var(--node-port-size-ratio-max, 0.9))
  );
  /* One crescent ring for every inlet/outlet (I/O + param).
     World-space thickness (scales with zoom). UIDEV writes
     --node-port-crescent-stroke-thickness. */
  --node-port-crescent-stroke-thickness: 1.25px;
  --node-port-crescent-stroke-width: var(--node-port-crescent-stroke-thickness, 1.25px);
  /* Crescent = inset ring on a full circle, clipped to the inward half. */
  --node-port-crescent-paint: transparent;
  /* Unused PARAM jack stroke. UIDEV must not write it. Signal I/O jacks
     use type color mixed with outlet RGB / inlet blue brightness. */
  /* Permanent jack stroke = former hover look (no separate idle chrome). */
  --node-port-idle-crescent-stroke: color-mix(in srgb, var(--node-port-hover-stroke, #f3f1ec) 68%, transparent);
  --node-port-crescent-stroke: var(--node-port-idle-crescent-stroke);
  --node-port-radius: calc(var(--node-port-diameter) * 0.5);
  --node-port-area-radius: calc(var(--node-port-area-size) * 0.5);
  /* Column track = half-slot (1gu/2). Visual crescent is narrower (size %). */
  --node-port-column-width: var(--node-port-area-radius);
  /* Shared LayoutA+B: leftover height under last content (≥2px, or +1gu from JS). */
  --node-module-bottom-gap-track: minmax(2px, 1fr);
  /* Connection / wire-end dots — UIDEV --node-wire-patch-point-size-ratio (% of jack). */
  --node-wire-patch-point-size-ratio: 0.54;
  --node-wire-patch-point-size: calc(
    var(--node-port-diameter) * var(--node-wire-patch-point-size-ratio, 0.54)
  );
  /* Zoom-1 cable and trace widths. Both scale with the camera. */
  --node-wire-thickness: 2px;
  --node-trace-wire-thickness: 1px;
  /*
   * Signal jack cell:
   *   width  = half-slot (inward half fits)
   *   height = visual diameter so gap:0 packs crescents flush
   * Tip/wall AA uses clip-path bleed on .node-port (not taller rows).
   */
  --node-signal-port-height: var(--node-port-diameter);
  /* Inward reach of the semicircle. Labels start here, not a half-grid in. */
  --node-signal-port-width: calc(var(--node-port-diameter) * 0.5);
  --node-port-crescent-clip-bleed: var(--node-port-crescent-stroke-width, 2px);
  --node-slider-padding-block: calc(var(--node-grid-size) * 0.0357143);
  --node-slider-padding-inline: calc(var(--node-grid-size) * 0.25);
  --node-slider-row-padding-block: 0px;
  --node-slider-readout-height: 30px;
  --node-slider-readout-center-offset: 2px;
  --node-slider-unit-width: 2.5em;
  --node-slider-label-color: #cfdde5;
  --node-slider-value-color: #ffffff;
  --node-slider-unit-color: #7fc7d9;
  /* Amount/ghost stay HSLA. Handle (numeric + choice) is hue/brightness/alpha
     via nodeGraphHueBrightnessCss. Amount under text (z0); handle over (z2). */
  --node-slider-position-color: rgb(68 164 255 / 0.37);
  --node-slider-amount-color: hsl(200 31% 15% / 0.55);
  --node-slider-ghost-color: hsl(262 100% 76% / 0.38);
  --node-selection-hit-trail-color: rgb(0 208 255);
  --node-selection-hit-trail-alpha: 0.95;
  --node-choice-divider-padding: 3px;
  --node-module-fill: #171a1f;
  --node-module-title-fill: #030113;
  /* I/O strip is see-through like the plate — jacks are stroke-only. */
  --node-module-io-fill: transparent;
  --node-module-stroke: #f3f1ec;
  --node-module-idle-stroke-width: 1px;
  --node-module-idle-stroke: rgb(161 155 155 / 0.9);
  --node-module-selected-stroke: rgb(226 168 109 / 1);
  --node-module-title-padding: 0px;
  --node-module-drag-stroke: #e2a86d;
  --node-port-idle-fill: transparent;
  --node-port-idle-stroke: var(--node-port-idle-crescent-stroke);
  /* Kept for smoke + as the permanent stroke source (no hover restyle). */
  --node-port-hover-fill: #f3f1ec;
  --node-port-hover-stroke: #f3f1ec;
  /* --node-dot-cursor / --node-default-cursor live on :root (app-wide SSOT). */
  --node-move-cursor: move;
  --node-hover-glow-size-ratio: 0.5;
  --node-hover-glow-size: calc(var(--node-port-diameter) * var(--node-hover-glow-size-ratio));
  --node-hover-glow-spread: calc(var(--node-hover-glow-size) * 0.42);
  --node-input-fill: #e2a86d;
  --node-input-stroke: #e2a86d;
  --node-output-fill: #e2a86d;
  --node-output-stroke: #e2a86d;
  --node-digital-fill: #ffffff;
  /* Jack RGB chrome. Brightness is a color-mix % from UIDEV 0…1. */
  --node-jack-red: #f25d5d;
  --node-jack-green: #3ddc84;
  --node-jack-blue: #4d8dff;
  /* Arp Keys / digital gold — brighter than analog #e2a86d (piano .held). */
  --node-jack-gold: #f0b84a;
  --node-jack-purple: #c44dff;
  /* CMYK additive non-realtime plane (distinct from gold analog #e2a86d). */
  --node-jack-cyan: #00e5ff;     /* C — Parameter / block-rate ZOH in/out */
  --node-jack-yellow: #ffe600;   /* Y — Graph chunk in/out */
  --node-jack-magenta: #e040fb;  /* M — reserved unused */
  /* K / Voices — charcoal: dark enough to read as black, light enough on #000. */
  --node-jack-black: #6a6a6a;
  /* Legacy turquoise → same ink as cyan (prefer data-jack-channel="cyan"). */
  --node-jack-turquoise: var(--node-jack-cyan);
  --node-port-used-brightness: 85%;
  /* Match former hover stroke strength so unused jacks look “lit” permanently. */
  --node-port-unused-brightness: 68%;
  --node-port-paint-brightness: var(--node-port-unused-brightness);
  --node-inlet-blue-stroke: #e2a86d;
  --node-outlet-left-stroke: var(--node-jack-red);
  --node-outlet-mono-stroke: var(--node-jack-green);
  --node-outlet-right-stroke: var(--node-jack-blue);
  --node-mod-input-fill: #b184ff;
  --node-mod-input-stroke: #b184ff;
  /* Parameter slider outs match parameter/mod inlet purple (not mono green). */
  --node-param-output-fill: var(--node-mod-input-fill);
  --node-param-output-stroke: var(--node-mod-input-stroke);
  /* --node-bypass-* SSOT lives on .node-wiring-panel (B-048). */
  --node-move-symbol-size-ratio: 0.6;
  position: relative;
  /* Full-bleed plate between top toolbar and bottom public controls. */
  width: 100%;
  height: max(560px, calc(100vh - 230px));
  min-width: calc(var(--node-grid-width) * 4);
  min-height: var(--node-grid-height);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  --room-dim: 0;
  background: color-mix(
    in srgb,
    var(--node-workspace-bg) calc((1 - var(--room-dim, 0)) * 100%),
    #000
  );
  touch-action: none;
  user-select: none;
}

.node-wiring-panel {
  --node-text-light-color-rgb: 243 241 236;
}

:where(.node-no-light, [data-node-light="none"]) {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

.node-graph-workspace::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgb(var(--node-visual-wash-rgb) / var(--node-visual-wash-alpha));
  pointer-events: none;
}

.node-wiring-panel.modular-only-view .node-graph-workspace {
  width: var(--node-modular-only-view-width, calc(100dvw - (var(--node-modular-only-inset) * 2))) !important;
  height: var(--node-modular-only-view-height, calc(100dvh - (var(--node-modular-only-inset) * 2))) !important;
  max-width: calc(100% - (var(--node-modular-only-inset) * 2));
  max-height: calc(100dvh - (var(--node-modular-only-inset) * 2));
  margin: auto;
  justify-self: center;
  align-self: center;
  overflow: hidden;
}

.node-modular-only-back-button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 12;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 6px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.55rem;
  line-height: 1;
  background: rgba(17, 20, 24, 0.9);
  box-shadow: 0 0 0 1px rgba(7, 10, 13, 0.9);
}

.node-wiring-panel.modular-only-view .node-modular-only-back-button {
  display: inline-flex;
}

/* During pan/zoom: light CSS + lite wires; full chrome resumes on settle. */
body.node-graph-magnifying-active,
body.node-graph-magnifying-active .node-graph-workspace,
body.node-graph-magnifying-active .node-graph-workspace * {
  cursor: none !important;
}

.node-graph-magnifier {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  width: 0;
  height: 0;
  pointer-events: none;
  --magnifier-size: 220px;
  --magnifier-rim-width: 5px;
  --magnifier-rim-softness: 4px;
}

.node-graph-magnifier[hidden] {
  display: none;
}

.node-graph-magnifier-lens {
  position: absolute;
  left: calc(var(--magnifier-size) / -2);
  top: calc(var(--magnifier-size) / -2);
  z-index: 1;
  width: var(--magnifier-size);
  height: var(--magnifier-size);
  overflow: hidden;
  border-radius: 50%;
  background: var(--node-workspace-bg, #1d1b1b);
}

/* Soft black ring. Thickness + blur come from UIDEV. */
.node-graph-magnifier-rim,
.node-graph-magnifier-rim::before {
  position: absolute;
  box-sizing: border-box;
  width: var(--magnifier-size);
  height: var(--magnifier-size);
  border: var(--magnifier-rim-width, 5px) solid rgb(0 0 0);
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
}

.node-graph-magnifier-rim {
  left: calc(var(--magnifier-size) / -2);
  top: calc(var(--magnifier-size) / -2);
  z-index: 2;
  border-color: rgb(0 0 0);
}

.node-graph-magnifier-rim::before {
  content: "";
  inset: 0;
  width: 100%;
  height: 100%;
  border-color: rgb(0 0 0);
  filter: blur(var(--magnifier-rim-softness, 4px));
  mix-blend-mode: normal;
}

.node-graph-magnifier-world {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  overflow: hidden;
  transform-origin: 0 0;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Lens scale() must not bilinear-filter scope bitmaps. */
.node-graph-magnifier-world canvas,
.node-graph-magnifier-lens canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.node-graph-workspace.viewport-gesturing {
  cursor: var(--node-dot-cursor);
}
.node-graph-workspace.viewport-gesturing.panning,
.node-graph-workspace.viewport-gesturing.smooth-zooming {
  cursor: var(--node-dot-cursor);
}

/* Mid-zoom: use frozen stroke compensate (JS sets --node-module-stroke-
   zoom-compensate-frozen at gesture start). Live --node-graph-zoom ticks
   must not restyle every module outline (costly at 10-20x). Settle drops
   viewport-zooming + the frozen var so the live 1/zoom calc resumes. */
.node-graph-workspace.viewport-zooming {
  --node-module-stroke-zoom-compensate: var(--node-module-stroke-zoom-compensate-frozen, 1);
}

/* Hide cables, jack inlets/outlets, and connection dots while zooming.
   Modules stay. visibility so settle unhides (class drop). */
.node-graph-workspace.viewport-zooming #nodeWireSvg,
.node-graph-workspace.viewport-zooming #nodeWireEndpointSvg,
.node-graph-workspace.viewport-zooming .node-port,
.node-graph-workspace.viewport-zooming .node-param-port {
  visibility: hidden !important;
  pointer-events: none !important;
}

.node-graph-workspace.panning {
}

.node-graph-workspace.resizing {
  outline: 1px solid rgba(226, 168, 109, 0.62);
}

.node-graph-workspace[hidden] {
  display: none;
}

.node-graph-empty-module-button {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8;
  min-width: 168px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgb(127 199 217 / 0.36);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgb(18 28 34 / 0.92), rgb(7 11 14 / 0.92));
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.7),
    0 0 20px rgb(127 199 217 / 0.12);
  color: rgb(243 241 236 / 0.86);
  font: 0.78rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.node-graph-empty-module-button[hidden],
.node-graph-workspace:not(.empty-patch) .node-graph-empty-module-button {
  display: none;
}

.node-graph-empty-module-button:hover,
.node-graph-empty-module-button:focus-visible {
  border-color: rgb(127 199 217 / 0.62);
  background:
    linear-gradient(180deg, rgb(24 39 47 / 0.96), rgb(8 14 18 / 0.96));
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.78),
    0 0 28px rgb(127 199 217 / 0.2);
  color: rgb(255 255 255 / 0.94);
}

.node-graph-resize-handle {
  display: none;
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 10;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-color: rgba(243, 241, 236, 0.12);
  border-radius: 2px;
  background: rgba(17, 20, 24, 0.88);
  touch-action: none;
  /* APP_POLICY §14: idle-hidden; panel/handle hover or drag reveals. */
  opacity: 0;
}

.node-wiring-panel.modular-only-view .node-graph-resize-handle {
  display: block;
}

.node-wiring-panel.modular-only-view:hover .node-graph-resize-handle,
#nodeGraphWorkspace.resizing .node-graph-resize-handle,
.node-graph-resize-handle:is(:hover, :focus-visible, :active, .dragging) {
  opacity: 1;
}

.node-graph-resize-handle::before,
.node-graph-resize-handle::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  border-right: 2px solid rgba(243, 241, 236, 0.2);
  border-bottom: 2px solid rgba(243, 241, 236, 0.2);
}

.node-graph-resize-handle::before {
  width: 13px;
  height: 13px;
}

.node-graph-resize-handle::after {
  width: 7px;
  height: 7px;
  opacity: 0.48;
}

.node-graph-resize-handle:hover,
.node-graph-resize-handle:active {
  border-color: rgba(226, 168, 109, 0.45);
}

.node-graph-resize-handle:hover::before,
.node-graph-resize-handle:hover::after,
.node-graph-resize-handle:active::before,
.node-graph-resize-handle:active::after {
  border-color: rgba(226, 168, 109, 0.5);
}


.node-script-view {
  margin-top: 16px;
}

.node-script-view > .scene-context-heading-static {
  margin-bottom: 10px;
  border: 1px solid rgba(127, 199, 217, 0.16);
  border-radius: 6px;
}

.node-code-screen-view {
  display: grid;
  grid-template-columns: minmax(190px, 24%) minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  margin-top: 16px;
}

.node-code-screen-view[hidden] {
  display: none;
}

.node-code-screen-sidebar,
.node-code-screen-main,
.node-code-screen-editor,
.node-code-screen-registry-card,
.node-code-screen-helper-card,
.node-code-screen-empty {
  border: 1px solid rgba(127, 199, 217, 0.18);
  border-radius: 6px;
  background: rgba(9, 13, 16, 0.82);
}

.node-code-screen-sidebar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 10px;
}

.node-code-screen-brand {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid rgba(127, 199, 217, 0.16);
}

.node-code-screen-brand span,
.node-code-screen-editor-heading span,
.node-code-screen-helper-card span,
.node-code-screen-registry-card-heading span,
.node-code-screen-registry label span,
.node-code-screen-source-label span {
  color: rgba(127, 199, 217, 0.76);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.node-code-screen-brand strong,
.node-code-screen-editor-heading strong {
  color: rgba(243, 241, 236, 0.94);
  font-size: 1rem;
}

.node-code-screen-brand small,
.node-code-screen-section-list small,
.node-code-screen-codeblock-list small,
.node-code-screen-editor-heading small,
.node-code-screen-helper-card small {
  color: rgba(174, 180, 187, 0.72);
  line-height: 1.25;
}

/* Codeblock and other code-box kinds (see nodeGraphCodeScreenCodeBoxKinds,
   node-graph-code-screen.js) share this editor -- this line is the one
   thing that has to change per kind so it's obvious which execution model
   you're writing for without needing to remember it. */
.node-code-screen-editor-context-hint {
  margin: -4px 0 4px;
  color: rgba(174, 180, 187, 0.72);
  font-size: 0.72rem;
  line-height: 1.3;
}

.node-code-screen-lookup {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(226, 168, 109, 0.18);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(226, 168, 109, 0.09), rgba(3, 7, 9, 0.36));
}

.node-code-screen-lookup > span {
  color: rgba(226, 168, 109, 0.82);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.node-code-screen-lookup strong {
  overflow: hidden;
  color: rgba(255, 219, 176, 0.96);
  font-size: 0.82rem;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-lookup small {
  color: rgba(243, 241, 236, 0.68);
  font-size: 0.68rem;
  line-height: 1.25;
}

.node-code-screen-lookup-target {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 5px;
  align-items: center;
}

.node-code-screen-lookup-target span {
  color: rgba(127, 199, 217, 0.72);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.node-code-screen-lookup-target button {
  min-height: 28px;
  padding: 4px 6px;
}

.node-code-screen-lookup-target button[aria-pressed="true"] {
  border-color: rgba(226, 168, 109, 0.58);
  background: rgba(226, 168, 109, 0.12);
  color: rgba(255, 219, 176, 0.96);
}

.node-code-screen-lookup-target-summary {
  display: block;
  min-height: 14px;
  color: rgba(127, 199, 217, 0.78);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.58rem;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
}

.node-code-screen-lookup label {
  display: grid;
  gap: 4px;
}

.node-code-screen-lookup label span {
  color: rgba(127, 199, 217, 0.72);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.node-code-screen-lookup kbd {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 4px;
  border: 1px solid rgba(127, 199, 217, 0.22);
  border-radius: 3px;
  background: rgba(3, 7, 9, 0.58);
  color: rgba(255, 219, 176, 0.78);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.55rem;
  line-height: 1.1;
  text-transform: none;
}

.node-code-screen-lookup-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  min-width: 0;
  color: rgba(174, 180, 187, 0.68);
  font-size: 0.58rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.node-code-screen-lookup-keys span {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-lookup input {
  min-width: 0;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid rgba(127, 199, 217, 0.18);
  border-radius: 4px;
  background: rgba(3, 7, 9, 0.78);
  color: rgba(243, 241, 236, 0.94);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
}

.node-code-screen-lookup-actions,
.node-code-screen-lookup-namespaces,
.node-code-screen-lookup > div:last-child {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.node-code-screen-lookup-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.node-code-screen-lookup button {
  min-width: 0;
  min-height: 30px;
  padding: 5px 6px;
  font-size: 0.68rem;
}

.node-code-screen-lookup-namespaces {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.node-code-screen-lookup-namespaces button {
  min-height: 24px;
  padding: 3px 6px;
  border-color: rgba(226, 168, 109, 0.24);
  background: rgba(226, 168, 109, 0.06);
  color: rgba(255, 219, 176, 0.92);
  font-size: 0.62rem;
  text-transform: none;
}

.node-code-screen-lookup-namespaces button[aria-pressed="true"] {
  border-color: rgba(226, 168, 109, 0.58);
  background: rgba(226, 168, 109, 0.16);
  color: rgba(255, 244, 210, 0.98);
}

#nodeCodeScreenClearLookupSearch {
  justify-self: start;
  color: rgba(174, 180, 187, 0.82);
}

#nodeCodeScreenSaveLookupSelection {
  color: rgba(226, 168, 109, 0.9);
}

.node-code-screen-lookup-status {
  min-height: 14px;
  color: rgba(174, 180, 187, 0.72);
  font-size: 0.58rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.node-code-screen-lookup-status.ok {
  color: rgba(127, 217, 170, 0.84);
}

.node-code-screen-lookup-status.error {
  color: rgba(255, 126, 126, 0.86);
}

.node-code-screen-lookup-results {
  display: grid;
  gap: 5px;
}

.node-code-screen-lookup-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, auto);
  gap: 5px;
  align-items: stretch;
}

.node-code-screen-lookup-results > small {
  padding: 5px 0;
  color: rgba(174, 180, 187, 0.7);
}

.node-code-screen-lookup-heading {
  display: grid;
  gap: 2px;
  padding: 6px 0 2px;
  border-top: 1px solid rgba(226, 168, 109, 0.14);
}

.node-code-screen-lookup-heading:first-child {
  border-top: 0;
}

.node-code-screen-lookup-heading span {
  color: rgba(226, 168, 109, 0.82);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.node-code-screen-lookup-heading small {
  color: rgba(174, 180, 187, 0.68);
  font-size: 0.58rem;
  line-height: 1.2;
}

.node-code-screen-lookup-result button {
  display: grid;
  gap: 2px;
  justify-items: start;
  min-height: 0;
  padding: 6px;
  border-color: rgba(127, 199, 217, 0.14);
  background: rgba(3, 7, 9, 0.58);
  text-align: left;
}

.node-code-screen-lookup-result button[data-code-screen-copy-lookup-snippet],
.node-code-screen-lookup-result button[data-code-screen-edit-lookup-snippet],
.node-code-screen-lookup-result button[data-code-screen-lookup-helper-detail],
.node-code-screen-lookup-result button[data-code-screen-save-pin-lookup-snippet],
.node-code-screen-lookup-result button[data-code-screen-save-lookup-snippet] {
  place-items: center;
  min-width: 40px;
  color: rgba(226, 168, 109, 0.86);
  text-align: center;
}

.node-code-screen-lookup-result button span {
  color: rgba(127, 199, 217, 0.76);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.62rem;
}

.node-code-screen-lookup-result button strong,
.node-code-screen-lookup-result button small {
  overflow: hidden;
  max-width: 100%;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-section-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  overflow: auto;
}

.node-code-screen-section-list button,
.node-code-screen-codeblock-list button,
.node-code-screen-helper-card button {
  position: relative;
  display: grid;
  gap: 3px;
  justify-items: start;
  min-width: 0;
  min-height: 54px;
  padding: 8px;
  border-color: rgba(127, 199, 217, 0.16);
  background: rgba(14, 19, 23, 0.86);
  text-align: left;
}

.node-code-screen-section-list button[aria-selected="true"],
.node-code-screen-codeblock-list button[aria-pressed="true"] {
  border-color: rgba(226, 168, 109, 0.58);
  background: rgba(226, 168, 109, 0.12);
  color: rgba(255, 219, 176, 0.96);
}

.node-code-screen-section-list button span,
.node-code-screen-codeblock-list button small {
  color: rgba(127, 199, 217, 0.72);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.node-code-screen-codeblock-list button small.node-code-screen-codeblock-list-summary {
  color: rgba(174, 180, 187, 0.72);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  text-transform: none;
}

.node-code-screen-section-list button strong,
.node-code-screen-codeblock-list button strong,
.node-code-screen-helper-card button strong {
  overflow: hidden;
  max-width: 100%;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-section-list button em {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 22px;
  padding: 2px 6px;
  border: 1px solid rgba(127, 199, 217, 0.18);
  border-radius: 999px;
  background: rgba(3, 7, 9, 0.68);
  color: rgba(243, 241, 236, 0.78);
  font-size: 0.62rem;
  font-style: normal;
  text-align: center;
}

.node-code-screen-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.node-code-screen-main > .scene-context-heading-static {
  padding-inline: 12px;
  border-bottom: 1px solid rgba(127, 199, 217, 0.16);
}

.node-code-screen-main > .scene-context-heading-static .scene-context-heading-meta {
  max-width: min(440px, 48%);
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-editor-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.node-code-screen-body {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  overflow: auto;
}

.node-code-screen-codeblocks {
  display: grid;
  grid-template-columns: minmax(170px, 240px) minmax(0, 1fr);
  gap: 10px;
  min-height: 100%;
}

.node-code-screen-codeblock-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.node-code-screen-codeblock-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.node-code-screen-codeblock-search {
  grid-template-columns: minmax(0, 1fr);
}

.node-code-screen-codeblock-search button {
  justify-self: start;
}

.node-code-screen-editor {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(280px, 1fr) auto;
  gap: 10px;
  min-width: 0;
  padding: 10px;
}

.node-code-screen-editor-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.node-code-screen-editor output {
  padding: 5px 8px;
  border: 1px solid rgba(127, 199, 217, 0.22);
  border-radius: 5px;
  color: rgba(127, 199, 217, 0.9);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
}

.node-code-screen-editor output.error {
  border-color: rgba(255, 103, 103, 0.44);
  color: rgba(255, 154, 154, 0.96);
}

.node-code-screen-codeblock-summary {
  overflow: hidden;
  padding: 7px 8px;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 5px;
  background: rgba(3, 7, 9, 0.48);
  color: rgba(174, 180, 187, 0.86);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.68rem;
  line-height: 1.25;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-codeblock-summary.ok {
  border-color: rgba(127, 217, 170, 0.18);
  color: rgba(171, 232, 200, 0.88);
}

.node-code-screen-codeblock-summary.error {
  border-color: rgba(255, 103, 103, 0.32);
  color: rgba(255, 154, 154, 0.92);
}

.node-code-screen-debug-values {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(127, 199, 217, 0.16);
  border-radius: 5px;
  background: rgba(3, 7, 9, 0.56);
}

.node-code-screen-debug-values-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.node-code-screen-debug-values-heading span {
  color: rgba(127, 199, 217, 0.76);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.node-code-screen-debug-values-heading strong {
  color: rgba(255, 219, 176, 0.92);
  font-size: 0.8rem;
}

.node-code-screen-debug-values dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  margin: 0;
}

.node-code-screen-debug-values div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(127, 199, 217, 0.12);
  border-radius: 4px;
  background: rgba(9, 13, 16, 0.6);
}

.node-code-screen-debug-values dt,
.node-code-screen-debug-values dd {
  min-width: 0;
  margin: 0;
}

.node-code-screen-debug-values dt {
  color: rgba(174, 180, 187, 0.68);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.node-code-screen-debug-values dd {
  overflow: hidden;
  color: rgba(243, 241, 236, 0.94);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.72rem;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-codeblock-draft-state {
  justify-self: start;
  padding: 4px 8px;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 4px;
  background: rgba(3, 7, 9, 0.42);
  color: rgba(174, 180, 187, 0.74);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.66rem;
  text-transform: uppercase;
}

.node-code-screen-codeblock-draft-state.changed,
.node-code-screen-editor output.changed {
  border-color: rgba(226, 168, 109, 0.3);
  color: rgba(255, 219, 176, 0.92);
}

.node-code-screen-script-stats {
  padding: 6px 8px;
  border: 1px solid rgba(226, 168, 109, 0.16);
  border-radius: 5px;
  background: rgba(3, 7, 9, 0.42);
  color: rgba(255, 219, 176, 0.82);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.66rem;
  line-height: 1.25;
}

.node-code-screen-script-draft-state {
  justify-self: start;
  padding: 4px 8px;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 4px;
  background: rgba(3, 7, 9, 0.42);
  color: rgba(174, 180, 187, 0.74);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.66rem;
  text-transform: uppercase;
}

.node-code-screen-script-draft-state.changed {
  border-color: rgba(226, 168, 109, 0.3);
  color: rgba(255, 219, 176, 0.92);
}

.node-code-screen-script-language {
  display: grid;
  grid-template-columns: minmax(160px, 0.38fr) auto auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(127, 199, 217, 0.12);
  border-radius: 6px;
  background: rgba(3, 7, 9, 0.42);
}

.node-code-screen-script-language label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.node-code-screen-script-language span {
  color: rgba(127, 199, 217, 0.72);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.node-code-screen-script-language input {
  min-width: 0;
}

.node-code-screen-script-language code {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  min-width: 72px;
  padding: 0 9px;
  border: 1px solid rgba(255, 219, 176, 0.18);
  border-radius: 4px;
  color: rgba(255, 219, 176, 0.92);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.66rem;
}

.node-code-screen-variable-watch {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 6px;
  background: rgba(3, 7, 9, 0.46);
}

.node-code-screen-variable-watch-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.node-code-screen-variable-watch-heading > div {
  display: grid;
  gap: 2px;
}

.node-code-screen-variable-watch-heading span {
  color: rgba(127, 199, 217, 0.78);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.node-code-screen-variable-watch-heading strong {
  color: rgba(255, 219, 176, 0.9);
  font-size: 0.78rem;
}

.node-code-screen-variable-watch-heading menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.node-code-screen-watch-filter {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr);
  align-items: center;
  gap: 8px;
}

.node-code-screen-watch-filter span {
  color: rgba(127, 199, 217, 0.64);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.node-code-screen-watch-filter input {
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid rgba(127, 199, 217, 0.18);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(243, 241, 236, 0.92);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.68rem;
}

.node-code-screen-watch-filter input:focus {
  border-color: rgba(127, 199, 217, 0.46);
  box-shadow: 0 0 0 2px rgba(127, 199, 217, 0.08);
  outline: none;
}

.node-code-screen-variable-watch dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.node-code-screen-watch-row,
.node-code-screen-watch-empty {
  display: grid;
  grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(127, 199, 217, 0.11);
  border-radius: 4px;
  background: rgba(1, 4, 5, 0.72);
}

.node-code-screen-watch-row dt,
.node-code-screen-watch-row dd,
.node-code-screen-watch-empty dt,
.node-code-screen-watch-empty dd {
  min-width: 0;
  margin: 0;
}

.node-code-screen-watch-row dt {
  display: grid;
  gap: 2px;
}

.node-code-screen-watch-row dt strong {
  overflow: hidden;
  color: rgba(243, 241, 236, 0.95);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.72rem;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-watch-row dt span {
  color: rgba(127, 199, 217, 0.62);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.node-code-screen-watch-row dd {
  overflow: hidden;
  color: rgba(216, 247, 255, 0.9);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-watch-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.node-code-screen-watch-actions button {
  min-height: 24px;
  padding: 3px 7px;
  border-color: rgba(127, 199, 217, 0.15);
  font-size: 0.58rem;
}

.node-code-screen-file-list-watch,
.node-code-screen-codeblock-list-watch,
.node-code-screen-variable-group-watch,
.node-code-screen-debug-table-watch,
.node-code-screen-slot-list-watch {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 4px;
}

.node-code-screen-file-list-watch > div,
.node-code-screen-codeblock-list-watch > div,
.node-code-screen-variable-group-watch > div,
.node-code-screen-debug-table-watch > div,
.node-code-screen-slot-list-watch > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.node-code-screen-file-list-watch span,
.node-code-screen-codeblock-list-watch span,
.node-code-screen-variable-group-watch span,
.node-code-screen-debug-table-watch span,
.node-code-screen-slot-list-watch span {
  color: rgba(127, 199, 217, 0.72);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.node-code-screen-file-list-watch strong,
.node-code-screen-codeblock-list-watch strong,
.node-code-screen-variable-group-watch strong,
.node-code-screen-debug-table-watch strong,
.node-code-screen-slot-list-watch strong {
  color: rgba(255, 219, 176, 0.9);
  font-size: 0.66rem;
}

.node-code-screen-file-list-watch table,
.node-code-screen-codeblock-list-watch table,
.node-code-screen-variable-group-watch table,
.node-code-screen-debug-table-watch table,
.node-code-screen-slot-list-watch table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;
  border: 1px solid rgba(127, 199, 217, 0.12);
  border-radius: 4px;
  background: rgba(2, 8, 10, 0.78);
}

.node-code-screen-file-list-watch th,
.node-code-screen-file-list-watch td,
.node-code-screen-codeblock-list-watch th,
.node-code-screen-codeblock-list-watch td,
.node-code-screen-variable-group-watch th,
.node-code-screen-variable-group-watch td,
.node-code-screen-debug-table-watch th,
.node-code-screen-debug-table-watch td,
.node-code-screen-slot-list-watch th,
.node-code-screen-slot-list-watch td {
  overflow: hidden;
  padding: 5px 7px;
  border-bottom: 1px solid rgba(127, 199, 217, 0.08);
  color: rgba(216, 247, 255, 0.88);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.62rem;
  line-height: 1.35;
  text-align: left;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-file-list-watch th,
.node-code-screen-codeblock-list-watch th,
.node-code-screen-variable-group-watch th,
.node-code-screen-debug-table-watch th,
.node-code-screen-slot-list-watch th {
  color: rgba(127, 199, 217, 0.72);
  font-size: 0.56rem;
  text-transform: uppercase;
}

.node-code-screen-file-list-watch tr:last-child td,
.node-code-screen-codeblock-list-watch tr:last-child td,
.node-code-screen-variable-group-watch tr:last-child td,
.node-code-screen-debug-table-watch tr:last-child td,
.node-code-screen-slot-list-watch tr:last-child td {
  border-bottom: 0;
}

.node-code-screen-codeblock-list-watch.error strong {
  color: rgba(255, 154, 154, 0.9);
}

.node-code-screen-regex-match-watch {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 4px;
}

.node-code-screen-regex-match-watch > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.node-code-screen-regex-match-watch span {
  color: rgba(187, 159, 255, 0.78);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.node-code-screen-regex-match-watch strong {
  color: rgba(216, 247, 255, 0.9);
  font-size: 0.66rem;
}

.node-code-screen-regex-match-watch.error strong {
  color: rgba(255, 154, 154, 0.9);
}

.node-code-screen-regex-match-watch table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;
  border: 1px solid rgba(187, 159, 255, 0.13);
  border-radius: 4px;
  background: rgba(8, 6, 13, 0.72);
}

.node-code-screen-regex-match-watch th,
.node-code-screen-regex-match-watch td {
  overflow: hidden;
  padding: 5px 7px;
  border-bottom: 1px solid rgba(187, 159, 255, 0.08);
  color: rgba(226, 221, 255, 0.9);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.62rem;
  line-height: 1.35;
  text-align: left;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-regex-match-watch th {
  width: 86px;
  color: rgba(187, 159, 255, 0.74);
  font-size: 0.56rem;
  text-transform: uppercase;
}

.node-code-screen-regex-match-watch tr:last-child th,
.node-code-screen-regex-match-watch tr:last-child td {
  border-bottom: 0;
}

.node-code-screen-test-results-watch {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 4px;
}

.node-code-screen-test-results-watch > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.node-code-screen-test-results-watch span {
  color: rgba(127, 217, 170, 0.78);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.node-code-screen-test-results-watch strong {
  color: rgba(171, 232, 200, 0.92);
  font-size: 0.66rem;
}

.node-code-screen-test-results-watch.error strong {
  color: rgba(255, 154, 154, 0.9);
}

.node-code-screen-test-results-watch table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;
  border: 1px solid rgba(127, 217, 170, 0.12);
  border-radius: 4px;
  background: rgba(3, 10, 7, 0.72);
}

.node-code-screen-test-results-watch th,
.node-code-screen-test-results-watch td {
  overflow: hidden;
  padding: 5px 7px;
  border-bottom: 1px solid rgba(127, 217, 170, 0.08);
  color: rgba(220, 255, 235, 0.9);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.62rem;
  line-height: 1.35;
  text-align: left;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-test-results-watch th {
  color: rgba(127, 217, 170, 0.72);
  font-size: 0.56rem;
  text-transform: uppercase;
}

.node-code-screen-test-results-watch tr.error td {
  color: rgba(255, 154, 154, 0.92);
}

.node-code-screen-test-results-watch tr:last-child td {
  border-bottom: 0;
}

.node-code-screen-circuit-plan-watch {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 4px;
}

.node-code-screen-circuit-plan-watch > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.node-code-screen-circuit-plan-watch span {
  color: rgba(226, 168, 109, 0.8);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.node-code-screen-circuit-plan-watch strong {
  color: rgba(255, 219, 176, 0.92);
  font-size: 0.66rem;
}

.node-code-screen-circuit-plan-watch table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;
  border: 1px solid rgba(226, 168, 109, 0.12);
  border-radius: 4px;
  background: rgba(9, 7, 4, 0.72);
}

.node-code-screen-circuit-plan-watch th,
.node-code-screen-circuit-plan-watch td {
  overflow: hidden;
  padding: 5px 7px;
  border-bottom: 1px solid rgba(226, 168, 109, 0.08);
  color: rgba(255, 236, 210, 0.88);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.62rem;
  line-height: 1.35;
  text-align: left;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-circuit-plan-watch th {
  color: rgba(226, 168, 109, 0.74);
  font-size: 0.56rem;
  text-transform: uppercase;
}

.node-code-screen-circuit-plan-watch tr:last-child td {
  border-bottom: 0;
}

.node-code-screen-watch-empty {
  grid-template-columns: minmax(0, 1fr);
}

.node-code-screen-watch-empty dt {
  color: rgba(243, 241, 236, 0.82);
  font-size: 0.72rem;
}

.node-code-screen-watch-empty dd {
  color: rgba(174, 180, 187, 0.78);
  font-size: 0.68rem;
  line-height: 1.35;
}

.node-code-screen-watch-empty code {
  color: rgba(255, 219, 176, 0.94);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}

.node-code-screen-build-summary {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(127, 217, 170, 0.13);
  border-radius: 6px;
  background: rgba(3, 7, 9, 0.44);
}

.node-code-screen-build-summary-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.node-code-screen-build-summary-heading > div {
  display: grid;
  gap: 2px;
}

.node-code-screen-build-summary-heading span {
  color: rgba(127, 217, 170, 0.78);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.node-code-screen-build-summary-heading strong {
  color: rgba(171, 232, 200, 0.92);
  font-size: 0.78rem;
}

.node-code-screen-build-summary-heading small {
  overflow: hidden;
  max-width: 52%;
  color: rgba(174, 180, 187, 0.72);
  font-size: 0.66rem;
  text-align: right;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-build-summary-heading small.error {
  color: rgba(255, 154, 154, 0.9);
}

.node-code-screen-test-summary {
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
}

.node-code-screen-test-summary span {
  color: rgba(127, 217, 170, 0.74);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.node-code-screen-test-summary strong {
  color: rgba(171, 232, 200, 0.94);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.68rem;
}

.node-code-screen-test-summary small {
  overflow: hidden;
  color: rgba(174, 180, 187, 0.72);
  font-size: 0.62rem;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-test-summary.error strong,
.node-code-screen-test-summary.error small {
  color: rgba(255, 154, 154, 0.9);
}

.node-code-screen-build-summary dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.node-code-screen-build-summary div:not(.node-code-screen-build-summary-heading),
.node-code-screen-build-summary button[data-code-screen-build-summary-section] {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(127, 217, 170, 0.1);
  border-radius: 4px;
  background: rgba(1, 4, 5, 0.72);
}

.node-code-screen-build-summary button[data-code-screen-build-summary-section] {
  min-height: 48px;
}

.node-code-screen-build-summary button[data-code-screen-build-summary-section]:hover {
  border-color: rgba(127, 217, 170, 0.28);
  background: rgba(127, 217, 170, 0.08);
}

.node-code-screen-build-summary dt,
.node-code-screen-build-summary dd,
.node-code-screen-build-summary dl small {
  min-width: 0;
  margin: 0;
  text-align: center;
}

.node-code-screen-build-summary dt {
  overflow: hidden;
  color: rgba(174, 180, 187, 0.72);
  font-size: 0.58rem;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
}

.node-code-screen-build-summary dd {
  color: rgba(243, 241, 236, 0.94);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.78rem;
}

.node-code-screen-build-summary dl small {
  overflow: hidden;
  color: rgba(127, 217, 170, 0.62);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.58rem;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-run-history {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(226, 168, 109, 0.14);
  border-radius: 6px;
  background: rgba(3, 7, 9, 0.42);
}

.node-code-screen-run-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.node-code-screen-run-history-heading > div {
  display: grid;
  gap: 2px;
}

.node-code-screen-run-history-heading span {
  color: rgba(226, 168, 109, 0.82);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.node-code-screen-run-history-heading strong {
  color: rgba(255, 219, 176, 0.92);
  font-size: 0.78rem;
}

.node-code-screen-run-history ol {
  display: grid;
  gap: 6px;
  max-height: 156px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.node-code-screen-run-history li {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(127, 199, 217, 0.11);
  border-radius: 4px;
  background: rgba(1, 4, 5, 0.72);
}

.node-code-screen-run-history li.error {
  border-color: rgba(255, 103, 103, 0.26);
}

.node-code-screen-run-history li > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.node-code-screen-run-history li strong {
  color: rgba(243, 241, 236, 0.92);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.node-code-screen-run-history li span,
.node-code-screen-run-history li small {
  color: rgba(174, 180, 187, 0.68);
  font-size: 0.6rem;
}

.node-code-screen-run-history li.error small {
  color: rgba(255, 154, 154, 0.9);
}

.node-code-screen-run-history p,
.node-code-screen-run-history code {
  overflow: hidden;
  margin: 0;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-run-history menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.node-code-screen-run-history menu button {
  min-height: 24px;
  padding: 3px 7px;
  font-size: 0.62rem;
}

.node-code-screen-run-history p {
  color: rgba(216, 247, 255, 0.86);
  font-size: 0.7rem;
}

.node-code-screen-run-history code {
  color: rgba(255, 219, 176, 0.74);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.64rem;
}

.node-code-screen-run-history li.empty p {
  color: rgba(174, 180, 187, 0.78);
}

.node-code-screen-script-console {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 6px;
  background: rgba(3, 7, 9, 0.42);
}

.node-code-screen-script-console > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.node-code-screen-script-console span {
  color: rgba(127, 199, 217, 0.78);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.node-code-screen-script-console menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.node-code-screen-script-console pre {
  min-height: 72px;
  max-height: 180px;
  margin: 0;
  padding: 8px;
  overflow: auto;
  border: 1px solid rgba(243, 241, 236, 0.08);
  border-radius: 4px;
  background: rgba(1, 4, 5, 0.88);
  color: rgba(216, 247, 255, 0.92);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.76rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.node-code-screen-port-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.node-code-screen-namespace-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 5px;
  background: rgba(3, 7, 9, 0.42);
}

.node-code-screen-namespace-rail span {
  color: rgba(127, 199, 217, 0.76);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.node-code-screen-namespace-rail button {
  min-height: 28px;
  padding: 4px 8px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
}

.node-code-screen-snippet-target {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 5px;
  background: rgba(3, 7, 9, 0.42);
}

.node-code-screen-snippet-target span {
  color: rgba(127, 199, 217, 0.76);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.node-code-screen-snippet-target button {
  min-height: 28px;
  padding: 4px 8px;
}

.node-code-screen-snippet-target button[aria-pressed="true"] {
  border-color: rgba(226, 168, 109, 0.58);
  background: rgba(226, 168, 109, 0.12);
  color: rgba(255, 219, 176, 0.96);
}

.node-code-screen-helper-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 5px;
  background: rgba(3, 7, 9, 0.42);
}

.node-code-screen-helper-search label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.node-code-screen-helper-search span {
  color: rgba(127, 199, 217, 0.76);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.node-code-screen-helper-search input {
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(127, 199, 217, 0.18);
  border-radius: 4px;
  background: rgba(3, 7, 9, 0.92);
  color: rgba(243, 241, 236, 0.96);
  font-family: Consolas, "Courier New", monospace;
}

.node-code-screen-helper-search button {
  min-height: 34px;
  padding: 6px 10px;
}

.node-code-screen-helper-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.node-code-screen-helper-summary section {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 5px;
  background: rgba(3, 7, 9, 0.42);
}

.node-code-screen-helper-summary span {
  color: rgba(127, 199, 217, 0.76);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.node-code-screen-helper-summary small,
.node-code-screen-helper-summary button {
  overflow: hidden;
  color: rgba(226, 168, 109, 0.82);
  font-size: 0.66rem;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-helper-summary button {
  min-height: 24px;
  padding: 3px 6px;
  border-color: rgba(226, 168, 109, 0.18);
  background: rgba(226, 168, 109, 0.06);
  font-family: Consolas, "Courier New", monospace;
  text-align: left;
  text-transform: none;
}

.node-code-screen-helper-summary button:hover {
  border-color: rgba(226, 168, 109, 0.42);
  background: rgba(226, 168, 109, 0.12);
  color: rgba(255, 219, 176, 0.96);
}

.node-code-screen-helper-filter-rail,
.node-code-screen-snippet-tag-rail,
.node-code-screen-snippet-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 5px;
  background: rgba(3, 7, 9, 0.42);
}

.node-code-screen-helper-filter-rail span,
.node-code-screen-snippet-tag-rail span,
.node-code-screen-snippet-sort span {
  color: rgba(127, 199, 217, 0.76);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.node-code-screen-helper-filter-rail button,
.node-code-screen-snippet-tag-rail button,
.node-code-screen-snippet-sort button {
  min-height: 28px;
  padding: 4px 8px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
}

.node-code-screen-snippet-tag-rail button[data-code-screen-snippet-chip-type="category"] {
  border-color: rgba(127, 199, 217, 0.2);
  background: rgba(127, 199, 217, 0.06);
  color: rgba(182, 233, 246, 0.9);
}

.node-code-screen-snippet-tag-rail small {
  color: rgba(174, 180, 187, 0.64);
  font-size: 0.68rem;
}

.node-code-screen-helper-filter-rail button[aria-pressed="true"],
.node-code-screen-snippet-tag-rail button[aria-pressed="true"],
.node-code-screen-snippet-sort button[aria-pressed="true"] {
  border-color: rgba(226, 168, 109, 0.58);
  background: rgba(226, 168, 109, 0.12);
  color: rgba(255, 219, 176, 0.96);
}

.node-code-screen-snippet-search {
  border-color: rgba(226, 168, 109, 0.16);
}

.node-code-screen-list-status {
  justify-self: start;
  padding: 4px 8px;
  border: 1px solid rgba(226, 168, 109, 0.16);
  border-radius: 4px;
  background: rgba(9, 13, 16, 0.66);
  color: rgba(226, 168, 109, 0.78);
  font-size: 0.66rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.node-code-screen-port-grid label,
.node-code-screen-source-label,
.node-code-screen-registry label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.node-code-screen-port-grid input,
.node-code-screen-source-label textarea,
.node-code-screen-registry input,
.node-code-screen-registry textarea {
  min-width: 0;
  border: 1px solid rgba(127, 199, 217, 0.18);
  border-radius: 4px;
  background: rgba(3, 7, 9, 0.92);
  color: rgba(243, 241, 236, 0.96);
  font-family: Consolas, "Courier New", monospace;
}

.node-code-screen-port-grid input,
.node-code-screen-registry input {
  min-height: 34px;
  padding: 6px 8px;
}

.node-code-screen-source-label textarea {
  min-height: 320px;
  resize: vertical;
  padding: 10px;
  line-height: 1.35;
}

.node-code-screen-registry textarea {
  min-height: 72px;
  resize: vertical;
  padding: 8px;
}

.node-code-screen-registry-status {
  justify-self: start;
  padding: 5px 8px;
  border: 1px solid rgba(127, 199, 217, 0.22);
  border-radius: 5px;
  color: rgba(127, 199, 217, 0.9);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
}

.node-code-screen-registry-status.error {
  border-color: rgba(255, 103, 103, 0.44);
  color: rgba(255, 154, 154, 0.96);
}

.node-code-screen-registry-draft-state {
  justify-self: start;
  padding: 4px 8px;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 4px;
  background: rgba(3, 7, 9, 0.42);
  color: rgba(174, 180, 187, 0.74);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.66rem;
  text-transform: uppercase;
}

.node-code-screen-registry-draft-state.changed {
  border-color: rgba(226, 168, 109, 0.3);
  color: rgba(255, 219, 176, 0.92);
}

.node-code-screen-registry-code-call {
  display: block;
  overflow: hidden;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(226, 168, 109, 0.18);
  border-radius: 4px;
  background: rgba(3, 7, 9, 0.78);
  color: rgba(255, 219, 176, 0.9);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.74rem;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-editor-actions,
.node-code-screen-registry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.node-code-screen-shortcut-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  color: rgba(174, 180, 187, 0.68);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.node-code-screen-shortcut-hint kbd {
  padding: 1px 4px;
  border: 1px solid rgba(127, 199, 217, 0.22);
  border-radius: 3px;
  background: rgba(3, 7, 9, 0.58);
  color: rgba(255, 219, 176, 0.78);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.58rem;
  line-height: 1.1;
  text-transform: none;
}

.node-code-screen-helper-grid,
.node-code-screen-snippet-library,
.node-code-screen-registry {
  display: grid;
  gap: 10px;
}

.node-code-screen-helper-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.node-code-screen-helper-detail {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(226, 168, 109, 0.24);
  border-radius: 6px;
  background: rgba(9, 13, 16, 0.82);
}

.node-code-screen-helper-detail > div {
  display: grid;
  gap: 3px;
}

.node-code-screen-helper-detail span {
  color: rgba(226, 168, 109, 0.76);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.node-code-screen-helper-detail strong {
  color: rgba(255, 219, 176, 0.96);
}

.node-code-screen-helper-detail small,
.node-code-screen-helper-detail p {
  margin: 0;
  color: rgba(174, 180, 187, 0.76);
}

.node-code-screen-helper-detail code {
  display: block;
  overflow: hidden;
  padding: 7px 8px;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 4px;
  background: rgba(2, 5, 7, 0.72);
  color: rgba(243, 241, 236, 0.9);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-helper-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.node-code-screen-helper-card {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding: 10px;
}

.node-code-screen-helper-card > div {
  display: grid;
  gap: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(127, 199, 217, 0.13);
}

.node-code-screen-helper-card button {
  min-height: 70px;
}

.node-code-screen-helper-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}

.node-code-screen-helper-row > button:last-child {
  min-height: 0;
  padding: 6px 8px;
}

.node-code-screen-helper-row > button:last-child[aria-pressed="true"] {
  border-color: rgba(226, 168, 109, 0.58);
  background: rgba(226, 168, 109, 0.12);
  color: rgba(255, 219, 176, 0.96);
}

.node-code-screen-helper-card button code {
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 5px 6px;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 4px;
  background: rgba(2, 5, 7, 0.72);
  color: rgba(243, 241, 236, 0.86);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.68rem;
  line-height: 1.25;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-registry-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
}

.node-code-screen-snippet-preview {
  display: block;
  overflow: hidden;
  padding: 7px 8px;
  border: 1px solid rgba(226, 168, 109, 0.2);
  border-radius: 4px;
  background: rgba(3, 7, 9, 0.72);
  color: rgba(255, 219, 176, 0.9);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: clip;
  white-space: nowrap;
}

.node-code-screen-snippet-stats {
  color: rgba(174, 180, 187, 0.74);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.62rem;
  line-height: 1.2;
}

.node-code-screen-snippet-updated {
  justify-self: start;
  color: rgba(127, 199, 217, 0.66);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.62rem;
  line-height: 1.2;
}

.node-code-screen-snippet-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.node-code-screen-snippet-card-tags button {
  min-height: 24px;
  padding: 3px 7px;
  border-color: rgba(226, 168, 109, 0.24);
  color: rgba(255, 219, 176, 0.86);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.66rem;
}

.node-code-screen-registry-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.node-code-screen-card-actions,
.node-code-screen-json-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.node-code-screen-card-actions button {
  min-height: 28px;
  padding: 4px 8px;
}

.node-code-screen-json-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 6px;
  background: rgba(3, 7, 9, 0.42);
}

.node-code-screen-json-preview summary {
  color: rgba(127, 199, 217, 0.82);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.node-code-screen-json-preview textarea {
  min-height: 180px;
  resize: vertical;
  border: 1px solid rgba(127, 199, 217, 0.18);
  border-radius: 4px;
  background: rgba(3, 7, 9, 0.92);
  color: rgba(243, 241, 236, 0.88);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
}

.node-code-screen-empty {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  color: rgba(243, 241, 236, 0.72);
}

.node-code-screen-empty p {
  margin: 0;
}

.node-code-screen-codeblocks-landing {
  align-content: center;
  justify-items: center;
  gap: 16px;
  min-height: min(60vh, 420px);
  padding: 32px;
  text-align: center;
  border-color: rgba(226, 168, 109, 0.32);
  background: radial-gradient(circle at 50% 0%, rgba(226, 168, 109, 0.08), rgba(9, 13, 16, 0.82) 70%);
}

.node-code-screen-codeblocks-landing h3 {
  margin: 0;
  color: rgba(243, 241, 236, 0.95);
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}

.node-code-screen-codeblocks-landing p {
  max-width: 480px;
  color: rgba(243, 241, 236, 0.68);
  font-size: 0.85rem;
  line-height: 1.5;
}

.node-code-screen-codeblocks-landing-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.node-code-screen-landing-cta {
  padding: 12px 22px;
  border: 1px solid rgba(226, 168, 109, 0.55);
  border-radius: 6px;
  background: rgba(226, 168, 109, 0.14);
  color: rgba(243, 241, 236, 0.95);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: var(--node-dot-cursor);
}

.node-code-screen-landing-cta:hover {
  background: rgba(226, 168, 109, 0.28);
  border-color: rgba(226, 168, 109, 0.85);
  transform: translateY(-1px);
}

.node-code-screen-autocomplete {
  position: absolute;
  right: 18px;
  bottom: 64px;
  z-index: 5;
  display: grid;
  gap: 4px;
  width: min(420px, calc(100% - 36px));
  max-height: 240px;
  padding: 8px;
  border: 1px solid rgba(226, 168, 109, 0.5);
  border-radius: 6px;
  background: rgba(10, 13, 16, 0.98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  overflow: auto;
}

.node-code-screen-autocomplete[hidden] {
  display: none;
}

.node-code-screen-autocomplete-header {
  padding: 2px 4px 5px;
  color: rgba(226, 168, 109, 0.84);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.62rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.node-code-screen-autocomplete button {
  display: grid;
  gap: 3px;
  justify-items: start;
  min-height: 54px;
  padding: 8px;
  text-align: left;
}

.node-code-screen-autocomplete button[aria-selected="true"] {
  border-color: rgba(226, 168, 109, 0.62);
  background: rgba(226, 168, 109, 0.13);
  color: rgba(255, 219, 176, 0.96);
}

.node-code-screen-autocomplete button code {
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 4px 6px;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 4px;
  background: rgba(2, 5, 7, 0.72);
  color: rgba(243, 241, 236, 0.86);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.68rem;
  line-height: 1.25;
  text-overflow: clip;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .node-code-screen-view,
  .node-code-screen-codeblocks {
    grid-template-columns: minmax(0, 1fr);
  }

  .node-code-screen-sidebar {
    max-height: none;
  }

  .node-code-screen-section-list {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .node-code-screen-port-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .node-code-screen-main > .scene-context-heading-static {
    grid-template-columns: minmax(0, 1fr);
  }

  .node-code-screen-main > .scene-context-heading-static .scene-context-heading-meta {
    grid-column: 1;
    justify-self: start;
    max-width: 100%;
  }
}

/* Patch Control Surface / WYSIWYG UI-item editor removed (see node-graph-ui-view.js). */


.node-mapping-view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  height: min(78dvh, 820px);
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0f1316;
  min-height: 420px;
}

.node-mapping-view[hidden] {
  display: none;
}

.node-mapping-view > .scene-context-heading-static {
  border: 0;
  background: transparent;
}

.node-mapping-grid-shell {
  overflow: auto;
  border: 1px solid rgba(243, 241, 236, 0.16);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 120px),
    #070a0c;
}

.node-mapping-grid {
  display: grid;
  grid-template-columns: 92px repeat(128, 22px);
  grid-auto-rows: 22px;
  width: max-content;
  min-width: 100%;
  color: rgba(243, 241, 236, 0.82);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.68rem;
}

.node-mapping-corner,
.node-mapping-col-header,
.node-mapping-row-header {
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(243, 241, 236, 0.13);
  border-bottom: 1px solid rgba(243, 241, 236, 0.13);
  background: #14191d;
  color: rgba(226, 168, 109, 0.88);
  font-weight: 800;
  line-height: 1;
}

.node-mapping-corner,
.node-mapping-row-header {
  position: sticky;
  left: 0;
  z-index: 3;
}

.node-mapping-corner,
.node-mapping-col-header {
  position: sticky;
  top: 0;
  z-index: 4;
}

.node-mapping-corner {
  z-index: 5;
  justify-items: start;
  padding-inline: 8px;
  text-transform: uppercase;
}

.node-mapping-row-header {
  justify-items: start;
  padding-inline: 8px;
  background: #10151a;
}

.node-mapping-cell {
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(243, 241, 236, 0.055);
  border-bottom: 1px solid rgba(243, 241, 236, 0.055);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.02);
  color: transparent;
}

.node-mapping-cell:hover,
.node-mapping-cell:focus-visible {
  outline: 1px solid rgba(226, 168, 109, 0.82);
  outline-offset: -1px;
  background: rgba(226, 168, 109, 0.16);
}

.node-mapping-cell.active,
.node-mapping-cell[aria-pressed="true"] {
  background:
    radial-gradient(circle at center, rgba(255, 238, 177, 0.95) 0 24%, transparent 25%),
    rgba(91, 174, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(226, 168, 109, 0.74);
}

.node-script-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.node-preset-controls {
  display: grid;
  grid-template-columns: minmax(12rem, 1.1fr) minmax(12rem, 1fr) repeat(3, auto);
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}

.node-preset-controls label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.node-preset-controls span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.node-preset-controls input,
.node-preset-controls select {
  min-width: 0;
}


/* SE grip always on top of the patch list (same contract as other inspectors). */


/*
 * Single window / page title chrome.
 * Floating windows: move + title + close
 *   .scene-context-heading > .scene-context-drag-handle | .scene-context-title | .panel-close-button
 * Static page headers (no move/close):
 *   .scene-context-heading.scene-context-heading-static > .scene-context-title [| .scene-context-heading-meta]
 * Do not invent per-window *-heading classes for this chrome.
 */
.scene-context-heading {
  /* Move glyph fills the header cell (100% of the 30px move widget). */
  --node-move-symbol-size: var(--node-floating-window-header-height);
  display: grid;
  grid-template-columns:
    var(--node-floating-window-header-height, 30px)
    minmax(0, 1fr)
    var(--node-floating-window-header-height, 30px);
  align-items: stretch;
  box-sizing: border-box;
  height: var(--node-floating-window-header-height);
  min-height: var(--node-floating-window-header-height);
  max-height: var(--node-floating-window-header-height);
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(127, 199, 217, 0.16);
  background: rgb(3, 5, 7);
  user-select: none;
  touch-action: none;
  /* Keep the title bar pinned while the body scrolls */
  position: sticky;
  top: 0;
  z-index: 6;
  border-start-start-radius: var(--node-module-frame-radius);
  border-start-end-radius: var(--node-module-frame-radius);
  corner-shape: var(--node-module-corner-shape, squircle);
}

/* Full-page / embedded headers: no move or close cells. */
.scene-context-heading.scene-context-heading-static {
  grid-template-columns: minmax(0, 1fr) auto;
  height: auto;
  min-height: var(--node-floating-window-header-height);
  max-height: none;
  padding-inline: 10px;
  position: relative;
  top: auto;
  touch-action: auto;
}

.scene-context-heading.scene-context-heading-static:not(:has(.scene-context-heading-meta)) {
  grid-template-columns: minmax(0, 1fr);
}

.scene-context-heading.dragging {
  filter: brightness(1.08);
}

.scene-context-title {
  display: grid;
  align-content: center;
  justify-items: center;
  box-sizing: border-box;
  grid-column: 2;
  block-size: var(--node-floating-window-header-height);
  min-block-size: 0;
  max-block-size: var(--node-floating-window-header-height);
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
}

.scene-context-heading.scene-context-heading-static .scene-context-title {
  grid-column: 1;
  justify-items: start;
  block-size: auto;
  max-block-size: none;
  min-height: var(--node-floating-window-header-height);
  padding-block: 6px;
  text-align: left;
}

.scene-context-heading-meta {
  align-self: center;
  justify-self: end;
  grid-column: 2;
  min-width: 0;
}

.scene-context-title > span,
.scene-context-title > small {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.scene-context-title > span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--node-floating-window-title-size, 0.82rem);
  font-weight: 650;
  line-height: 1.08;
}

.scene-context-title > small {
  color: var(--muted);
  font-family: var(--font);
  font-size: var(--node-floating-window-subtitle-size, 0.68rem);
  font-weight: 400;
  line-height: 1.08;
  text-transform: none;
}

.scene-context-drag-handle {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  grid-column: 1;
  inline-size: var(--node-floating-window-header-height);
  min-inline-size: var(--node-floating-window-header-height);
  max-inline-size: var(--node-floating-window-header-height);
  block-size: var(--node-floating-window-header-height);
  min-block-size: 0;
  max-block-size: var(--node-floating-window-header-height);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(127, 199, 217, 0.08);
  color: var(--accent);
  font-family: "Noto Sans Symbols 2", "Noto Sans Symbols", var(--mono);
  font-size: var(--node-move-symbol-size);
  line-height: 1;
  cursor: var(--node-move-cursor);
  user-select: none;
}

.scene-context-drag-handle.dragging,
.scene-context-heading.dragging .scene-context-drag-handle {
  color: var(--accent-2);
}

.scene-context-drag-handle.floating-window-locked {
  color: var(--warning, #f3b75f);
}


.scene-context-heading > .panel-close-button {
  grid-column: 3;
  z-index: 3;
  inline-size: var(--node-floating-window-header-height);
  min-inline-size: var(--node-floating-window-header-height);
  max-inline-size: var(--node-floating-window-header-height);
  block-size: var(--node-floating-window-header-height);
  min-height: var(--node-floating-window-header-height);
  min-block-size: var(--node-floating-window-header-height);
  max-block-size: var(--node-floating-window-header-height);
  align-self: stretch;
  justify-self: stretch;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: rgba(127, 199, 217, 0.08);
  color: var(--accent);
  justify-content: center;
  padding: 0;
  text-align: center;
}

/*
 * Single floating-window SE corner resize grip (shared truth).
 * Every floating inspector uses this class only — no per-window look forks.
 * Position: absolute bottom-right on the window surface.
 * z-index must beat scroll bodies / form widgets so SE drag still works when
 * a control sits under the grip.
 *
 * APP_POLICY §14: idle-hidden; reveal only when the grip itself is hovered /
 * focused / dragged — not when the parent window is hovered.
 * Hit box stays live (opacity only) so the 18×18 corner is still findable.
 */
.scene-context-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 90;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  inline-size: 18px;
  block-size: 18px;
  /* Explicit mins — popover * { min-width/min-inline-size: 0 } would shrink the hit box. */
  min-width: 18px !important;
  min-height: 18px !important;
  min-inline-size: 18px !important;
  min-block-size: 18px !important;
  max-width: 18px;
  max-height: 18px;
  max-inline-size: 18px;
  max-block-size: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px 0 6px 0;
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(127, 199, 217, 0.36) 50% 56%, transparent 58%),
    linear-gradient(135deg, transparent 0 64%, rgba(127, 199, 217, 0.58) 66% 72%, transparent 74%),
    rgba(7, 10, 13, 0.72);
  touch-action: none;
  user-select: none;
  pointer-events: auto;
  cursor: se-resize;
  opacity: 0;
}

.scene-context-resize-handle:is(:hover, :focus-visible, :active, .dragging) {
  opacity: 1;
}

.scene-context-resize-handle:hover,
.scene-context-resize-handle:focus-visible,
.scene-context-resize-handle.dragging {
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(226, 168, 109, 0.56) 50% 56%, transparent 58%),
    linear-gradient(135deg, transparent 0 64%, rgba(226, 168, 109, 0.8) 66% 72%, transparent 74%),
    rgba(7, 10, 13, 0.88);
  outline: none;
}

.floating-window-locked .scene-context-resize-handle {
  opacity: 0 !important;
  pointer-events: none;
  transition: none;
}

/* Scrollable inspector bodies stay below the SE grip in the stacking order. */
.node-parameter-metadata-popover > .metadata-popover-grid,
.node-trace-display-settings-popover > .metadata-popover-grid,
.node-trace-display-settings-popover > .node-trace-display-settings-grid,
.node-user-ui-settings-panel .node-user-ui-settings-controls,
.node-ui-dev-helper > .node-ui-dev-helper-body {
  position: relative;
  z-index: 0;
  /* Keep last form rows out from under the 18px corner grip. */
  padding-bottom: 22px;
}

.node-parameter-metadata-popover > .scene-context-resize-handle,
.node-trace-display-settings-popover > .scene-context-resize-handle,
.node-user-ui-settings-panel > .scene-context-resize-handle,
.node-ui-dev-helper > .scene-context-resize-handle {
  z-index: 90;
  pointer-events: auto;
}


@media (max-width: 780px) {
  .node-preset-controls {
    grid-template-columns: 1fr 1fr;
  }

}

.node-settings-view {
  container-type: inline-size;
  --node-settings-action-height: 30px;
  --node-settings-knob-text-ratio: 1;
  --node-settings-knob-top-ratio: 0.44;
  --node-settings-knob-extra-padding: 3px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(14, 18, 22, 0.98), rgba(8, 10, 13, 0.99));
}

.node-settings-view[hidden] {
  display: none !important;
}

/* ── Full Script page (former cogwheel settings) ─────────────────────────── */
.node-patch-page > .scene-context-heading {
  flex: 0 0 auto;
  position: relative;
  top: auto;
}

.node-patch-page-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.node-patch-script-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(127, 199, 217, 0.16);
  background: rgb(5, 8, 10);
}

.node-patch-script-tabs > button {
  flex: 1 1 0;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.node-patch-script-tabs > button[aria-selected="true"] {
  color: var(--accent);
  background: rgba(127, 199, 217, 0.08);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.node-patch-script-tabs > button:hover,
.node-patch-script-tabs > button:focus-visible {
  color: var(--accent);
}

.node-patch-script-page {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.node-patch-script-page[hidden] {
  display: none !important;
}

.node-patch-page-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  margin: 0;
  padding: 0;
  overflow: visible;
  --node-settings-action-height: 60px;
}

.node-settings-view > .node-patch-page-toolbar {
  border-top: 1px solid rgba(127, 199, 217, 0.12);
}

.node-patch-page-toolbar .node-settings-script-action-group,
.node-patch-page-toolbar .node-settings-dev-action-group {
  flex: 1 1 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  overflow: hidden;
  border: 2px solid var(--line);
  --node-settings-action-height: 60px;
}

/* Twice the old 30px chips. Two lines (glyph / label) so 16px type fits. */
.node-patch-page-toolbar button,
.node-patch-page-toolbar a {
  container-type: normal;
  display: inline-flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 3px 4px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden;
  grid-template-rows: none;
  white-space: nowrap;
}

.node-patch-page-toolbar .node-settings-script-action-group > * + *,
.node-patch-page-toolbar .node-settings-dev-action-group > button + button {
  margin-left: 0;
  border-left: 2px solid var(--line) !important;
}

.node-patch-page-toolbar button:hover,
.node-patch-page-toolbar button:focus-visible,
.node-patch-page-toolbar a:hover,
.node-patch-page-toolbar a:focus-visible,
.node-patch-page-toolbar .node-settings-disabled-action,
.node-patch-page-toolbar .node-settings-disabled-action:hover,
.node-patch-page-toolbar .node-settings-disabled-action:focus-visible,
.node-patch-page-toolbar .node-settings-feature-action:hover,
.node-patch-page-toolbar .node-settings-feature-action:focus-visible,
.node-patch-page-toolbar .node-settings-bug-action:hover,
.node-patch-page-toolbar .node-settings-bug-action:focus-visible {
  border-color: transparent !important;
  border-left-color: var(--line) !important;
  box-shadow: none !important;
  outline: none !important;
}

.node-patch-page-toolbar button > span,
.node-patch-page-toolbar a > span,
.node-patch-page-toolbar .node-settings-disabled-action span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 22px;
  font-weight: 650;
  line-height: 1;
}

.node-patch-card {
  box-sizing: border-box;
  padding: 14px 16px 16px;
  border: 1px solid rgba(127, 199, 217, 0.16);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(18, 24, 28, 0.96), rgba(10, 13, 16, 0.98));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.node-patch-card-muted {
  flex: 0 0 auto;
  background: rgba(10, 12, 15, 0.72);
  box-shadow: none;
}

.node-patch-card-title {
  margin: 0 0 10px;
  color: rgba(127, 199, 217, 0.9);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.node-patch-card-hint {
  margin: -4px 0 12px;
  color: rgba(180, 200, 196, 0.62);
  font-size: 0.78rem;
  line-height: 1.35;
}

.node-patch-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.node-patch-card-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 420px;
}

.node-patch-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: rgba(200, 220, 216, 0.72);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.node-patch-field > span {
  line-height: 1.1;
}

.node-patch-field-span-2 {
  grid-column: 1 / -1;
}

.node-patch-field input,
.node-patch-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(127, 199, 217, 0.2);
  border-radius: 6px;
  background: rgba(4, 7, 10, 0.88);
  color: rgba(243, 241, 236, 0.94);
  font: 650 0.9rem/1.3 var(--mono, Consolas, "Courier New", monospace);
  text-transform: none;
  letter-spacing: 0;
}

.node-patch-field textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.node-patch-field input:focus,
.node-patch-field textarea:focus {
  outline: none;
  border-color: rgba(127, 199, 217, 0.55);
  box-shadow: 0 0 0 2px rgba(127, 199, 217, 0.12);
}

.node-patch-page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.node-patch-page-links button,
.node-patch-page-links a {
  min-height: 2rem;
  padding: 0 10px;
  border: 1px solid rgba(127, 199, 217, 0.16);
  border-radius: 4px;
  background: rgba(14, 18, 22, 0.9);
  color: rgba(210, 224, 220, 0.82);
  font-size: 0.78rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.node-patch-page-links button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.node-patch-page-links a:hover {
  border-color: rgba(180, 230, 220, 0.4);
  color: #fff;
}

/* Floating browser: name + description only */

@media (max-width: 640px) {
  .node-patch-card-grid {
    grid-template-columns: 1fr;
  }
  .node-patch-field-span-2 {
    grid-column: auto;
  }
}

/* Always fixed: must never participate in #nodeWiringPanel flow layout
   (that pushed the modular workspace down and blocked its resize handle). */
.node-module-shop-view {
  /* Size queries for back/search stack at very thin window widths. */
  container-type: inline-size;
  container-name: module-shop;
  position: fixed;
  top: 72px;
  left: 12px;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
  width: clamp(
    var(--node-module-shop-min-width, var(--node-unified-window-min-width, 24px)),
    var(--node-module-shop-width, var(--node-unified-window-default-width, 380px)),
    min(var(--node-module-shop-max-width, var(--node-unified-window-max-width, 980px)), calc(100vw - 28px))
  );
  height: clamp(
    var(--node-module-shop-min-height, var(--node-unified-window-min-height, 120px)),
    var(--node-module-shop-height, var(--node-unified-window-default-height, 620px)),
    min(var(--node-module-shop-max-height, 100dvh), 100dvh)
  );
  min-width: var(--node-module-shop-min-width, var(--node-unified-window-min-width, 24px));
  min-height: var(--node-module-shop-min-height, var(--node-unified-window-min-height, 120px));
  max-width: min(var(--node-module-shop-max-width, 980px), calc(100vw - 4px));
  max-height: min(var(--node-module-shop-max-height, 100dvh), 100dvh);
  margin: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--node-module-frame-radius);
  corner-shape: var(--node-module-corner-shape, squircle);
  background: #111418;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(226, 168, 109, 0.08);
  pointer-events: auto;
}

.node-module-shop-view *,
.node-module-shop-view *::before,
.node-module-shop-view *::after {
  min-width: 0;
}

.node-module-shop-view[hidden] {
  display: none;
}

.node-module-shop-section-title span {
  color: rgba(226, 168, 109, 0.86);
  font-size: 0.72rem;
  line-height: 1;
  text-transform: uppercase;
}

.node-module-shop-section-title strong {
  overflow: hidden;
  color: rgba(243, 241, 236, 0.92);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.1;
  text-overflow: clip;
  white-space: nowrap;
}

.node-module-shop-view > .scene-context-heading,
.node-module-shop-view > .node-unified-window-nav-host {
  flex: 0 0 auto;
}

.node-module-shop-view > .node-unified-window-nav-host {
  position: relative;
  top: auto;
}

.node-module-shop-view > .node-module-shop-column {
  flex: 1 1 auto;
  min-height: 0;
}

.node-module-shop-column {
  display: grid;
  /* controls, category title, scroll list, saved groups */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.node-module-shop-column > .node-module-shop-controls {
  grid-row: 1;
}

.node-module-shop-column > .node-module-department-title {
  grid-row: 2;
}

.node-module-shop-column > .node-module-shop-scroll-frame {
  grid-row: 3;
}


/*
 * Unified window chrome SSOT.
 * New Command Center pages: heading + nav host + body. Do not restyle the
 * title bar or let the shell scroll — .node-scene-context-menu { overflow:auto }
 * is the old menu, not a page shell.
 */
.node-unified-window {
  min-width: var(--node-unified-window-min-width, 24px);
  min-height: var(--node-unified-window-min-height, 120px);
  border-radius: var(--node-module-frame-radius);
  corner-shape: var(--node-module-corner-shape, squircle);
}

.node-unified-window > .scene-context-heading,
.node-unified-window > .node-unified-window-nav-host {
  flex: 0 0 auto;
}

.node-scene-context-menu.node-unified-window {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

/* Unified floating-window page nav: fixed square emoji buttons.
   Wrap when the floating window is narrow (responsive width).
   One class set — no per-window ID stacks. */
.node-unified-window-nav-host {
  display: block;
  box-sizing: border-box;
  flex: 0 0 auto;
  grid-row: auto;
  position: sticky;
  top: var(--node-floating-window-header-height);
  z-index: 5;
  min-width: 0;
  width: 100%;
  padding: 2px 3px;
  border-bottom: 1px solid rgba(127, 199, 217, 0.14);
  background: rgba(3, 5, 7, 0.92);
  overflow-x: hidden;
  overflow-y: visible;
}

.node-unified-window-nav-host[hidden] {
  display: none !important;
}

.node-unified-window-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  min-width: 0;
  width: 100%;
}

.node-unified-window-nav-button {
  --node-unified-nav-size: 30px;
  box-sizing: border-box;
  flex: 0 0 var(--node-unified-nav-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: var(--node-unified-nav-size);
  height: var(--node-unified-nav-size);
  min-width: var(--node-unified-nav-size);
  min-height: var(--node-unified-nav-size);
  max-width: var(--node-unified-nav-size);
  max-height: var(--node-unified-nav-size);
  margin: 0;
  padding: 0;
  border: 1px solid rgba(127, 199, 217, 0.22);
  border-radius: 4px;
  background: rgb(16, 22, 26);
  color: rgba(243, 241, 236, 0.95);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
  cursor: var(--node-dot-cursor);
  touch-action: manipulation;
  aspect-ratio: 1 / 1;
}

.node-unified-window-nav-button:hover,
.node-unified-window-nav-button:focus-visible {
  border-color: rgba(226, 168, 109, 0.55);
  background: rgb(22, 32, 38);
  outline: none;
}

.node-unified-window-nav-button.active,
.node-unified-window-nav-button[aria-current="page"],
.node-unified-window-nav-button.is-active,
.node-unified-window-nav-button[aria-pressed="true"] {
  border-color: rgba(127, 199, 217, 0.62);
  background: rgba(28, 48, 56, 0.96);
  box-shadow: inset 0 0 0 1px rgba(127, 199, 217, 0.18);
}

/* Same flush search strip as Command Center — full-width field, no back row. */
.node-module-shop-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  box-sizing: border-box;
  min-height: calc(var(--node-floating-window-button-height) + 20px);
  max-height: none;
  margin: 0;
  padding: 10px;
  border: 0;
  background: rgb(7, 10, 13);
  overflow: visible;
}

.node-module-home-shelf {
  flex: 1 1 100%;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.node-module-home-shelf[hidden] {
  display: none;
}

.node-module-department-search-placeholder {
  display: grid;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  min-height: var(--node-floating-window-button-height);
  max-height: none;
  align-self: stretch;
  overflow: hidden;
}

.node-module-department-search-placeholder span {
  display: none;
  color: rgba(226, 168, 109, 0.78);
  font-size: 0.68rem;
  line-height: 1;
  text-transform: uppercase;
}

.node-module-department-search-placeholder input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: var(--node-floating-window-button-height);
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: rgba(243, 241, 236, 0.86);
  font: 0.84rem/1.2 "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  letter-spacing: 0;
  /* Right pad leaves room for the native search clear (X) so text isn't clipped. */
  padding: 0 1.6rem 0 8px;
}

/* WebKit/Blink search clear control — keep it inside the pad zone. */
.node-module-department-search-placeholder input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 0.85rem;
  height: 0.85rem;
  margin: 0;
  background:
    linear-gradient(45deg, transparent 42%, rgba(174, 180, 187, 0.85) 42%, rgba(174, 180, 187, 0.85) 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, rgba(174, 180, 187, 0.85) 42%, rgba(174, 180, 187, 0.85) 58%, transparent 58%);
  cursor: var(--node-dot-cursor);
  opacity: 0.75;
}

.node-module-department-search-placeholder input[type="search"]::-webkit-search-cancel-button:hover {
  opacity: 1;
}

.node-module-department-search-placeholder input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* The search box is focused automatically every time the browser opens (see
   focusNodeGraphModuleShopSearch), so the UA's default `outline: auto` focus
   ring was on screen constantly -- Chrome draws that as a thick white double
   stroke on a dark background. Removed outright rather than restyled: the box
   already announces focus by being the thing you are typing into, and the
   caret plus the lit border below are the cue. Nothing else inherits or needs
   this ring. */
.node-module-department-search-placeholder input:focus,
.node-module-department-search-placeholder input:focus-visible {
  outline: none;
  border: 0;
  box-shadow: none;
  background: transparent;
  color: rgba(243, 241, 236, 0.94);
}

.node-module-department-search-placeholder input::placeholder {
  color: rgba(174, 180, 187, 0.52);
  font: inherit;
  letter-spacing: inherit;
}

.node-module-department-search-placeholder input:disabled {
  opacity: 1;
}

.node-scene-context-menu.node-module-collections-menu {
  width: min(280px, calc(100vw - 28px));
}

.node-module-collection-card {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 72px;
  padding: 10px;
  text-align: left;
}

.node-module-collection-card span {
  color: rgba(226, 168, 109, 0.8);
  font-size: 0.66rem;
  line-height: 1;
  text-transform: uppercase;
}

.node-module-collection-card strong {
  color: rgba(243, 241, 236, 0.94);
  font-size: 0.94rem;
  line-height: 1.1;
}

.node-module-collection-card small {
  color: rgba(174, 180, 187, 0.74);
  font-size: 0.72rem;
  line-height: 1.25;
}

.node-module-shop-section {
  display: grid;
  gap: 0;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  position: relative;
  scrollbar-width: none;
}

.node-module-shop-section::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.node-module-shop-section-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.node-module-shop-section-title small {
  color: rgba(174, 180, 187, 0.74);
  font-size: 0.7rem;
  line-height: 1.2;
}

.node-module-shop-view .scene-context-store-list,
.node-module-shop-view .scene-context-store-hidden-list {
  gap: 6px;
}

.node-module-shop-view .scene-context-store-department-list {
  gap: 0;
}

.node-module-shop-view .scene-context-store-row {
  grid-template-columns: minmax(0, 1fr) minmax(72px, 0.22fr);
  gap: 6px;
}

.node-module-shop-view .scene-context-store-card {
  min-height: 0;
}

.scene-context-store-department-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  align-content: start;
  gap: 0;
}

/* Scroll chevrons live on a non-scrolling frame around the list so they
   stay pinned to the visible top/bottom edges. Putting them on the
   overflow:auto section made them float over the shop (abspos + scrollport). */
.node-module-shop-scroll-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.node-module-shop-scroll-frame > .node-module-shop-section {
  flex: 1 1 auto;
  align-content: start;
  justify-content: start;
  min-height: 0;
}

.node-module-shop-scroll-frame::before,
.node-module-shop-scroll-frame::after {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  place-items: center;
  height: 1.15rem;
  margin: 0;
  padding: 0;
  color: rgba(243, 241, 236, 0.92);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-shadow:
    0 0 8px rgba(127, 199, 217, 0.55),
    0 0 18px rgba(127, 199, 217, 0.22);
  z-index: 4;
}

.node-module-shop-scroll-frame::before {
  content: "▲";
  top: 0;
  background: linear-gradient(180deg, rgba(17, 20, 24, 0.92), rgba(17, 20, 24, 0));
}

.node-module-shop-scroll-frame::after {
  content: "▼";
  bottom: 0;
  background: linear-gradient(0deg, rgba(17, 20, 24, 0.92), rgba(17, 20, 24, 0));
}

.node-module-shop-scroll-frame.can-scroll-up::before,
.node-module-shop-scroll-frame.can-scroll-down::after {
  opacity: 1;
}

.scene-context-store-visual-group {
  display: grid;
  justify-items: center;
  min-width: 0;
  margin-top: 6px;
  padding: 4px 2px 2px;
  color: rgba(226, 168, 109, 0.9);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.scene-context-store-visual-group:first-child {
  margin-top: 0;
}

.scene-context-store-department-card {
  --node-module-category-stroke: rgba(127, 199, 217, 0.22);
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  overflow: hidden;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: rgba(17, 21, 24, 0.82);
  color: var(--text);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  text-align: left;
  box-shadow:
    inset 1px 0 0 var(--node-module-category-stroke),
    inset -1px 0 0 var(--node-module-category-stroke),
    inset 0 1px 0 var(--node-module-category-stroke);
}

.scene-context-store-department-card:has(+ .scene-context-store-visual-group),
.scene-context-store-department-card:last-child {
  box-shadow:
    inset 1px 0 0 var(--node-module-category-stroke),
    inset -1px 0 0 var(--node-module-category-stroke),
    inset 0 1px 0 var(--node-module-category-stroke),
    inset 0 -1px 0 var(--node-module-category-stroke);
}

.scene-context-store-department-card:hover,
.scene-context-store-department-card:focus-visible {
  background: rgba(19, 24, 28, 0.92);
}

.scene-context-store-department-count {
  display: none;
  align-items: center;
  justify-items: end;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: rgba(226, 168, 109, 0.92);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
}

.scene-context-store-department-symbol {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  color: rgba(243, 241, 236, 0.94);
  font-size: 20px;
  font-weight: 650;
  line-height: 1;
}

.scene-context-store-department-title {
  display: grid;
  align-items: center;
  justify-items: start;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: rgba(243, 241, 236, 0.92);
  font-size: 16px;
  font-weight: 650;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.node-module-store-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(24px, auto);
  align-content: start;
  gap: 0;
  width: 100%;
  min-width: 0;
  user-select: none;
}

.node-module-store-list .scene-context-store-card {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: grid;
  align-items: center;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  overflow: hidden;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgb(3, 5, 7);
  color: rgba(224, 244, 249, 0.95);
  cursor: var(--node-dot-cursor);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
}

.scene-context-store-card-main {
  display: grid;
  grid-template-columns: 1.35em minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 4px;
}

.scene-context-store-card-main .scene-context-store-card-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1;
}

.scene-context-store-card-main strong {
  justify-self: start;
  text-align: left;
}

.scene-context-store-card-main small,
.scene-context-store-card-main .node-module-store-native-status {
  display: inline;
  justify-self: end;
  text-align: right;
  min-width: 0;
}

.node-module-store-list .scene-context-store-card::before {
  display: none;
}

.node-module-store-list .scene-context-store-card[data-context-module]:hover,
.node-module-store-list .scene-context-store-card[data-context-module]:focus-visible {
  border-color: rgba(127, 199, 217, 0.36);
  background: rgb(6, 9, 11);
  color: rgba(243, 251, 253, 0.98);
}

.node-module-store-list .scene-context-store-card[data-context-module].placing-module {
  background: rgb(8, 12, 14);
  box-shadow: inset 0 0 0 1px rgba(226, 168, 109, 0.36);
}

.node-module-shop-view .scene-context-store-card.under-construction,
.node-module-store-list .scene-context-store-card.under-construction {
  border-color: rgba(226, 168, 109, 0.34);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(226, 168, 109, 0.08) 0 7px,
      transparent 7px 14px
    ),
    rgba(17, 21, 24, 0.68);
  color: rgba(243, 241, 236, 0.68);
  opacity: 0.82;
}

.dsp-node .node-module-under-construction {
  display: grid;
  place-items: center;
  min-height: 1.4em;
  padding: 4px 6px;
  color: rgba(226, 168, 109, 0.88);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.node-module-shop-view .scene-context-store-card.under-construction:hover,
.node-module-shop-view .scene-context-store-card.under-construction:focus-visible {
  border-color: rgba(226, 168, 109, 0.42);
}

.node-module-store-list .scene-context-store-card strong {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  font-size: 17px;
  line-height: 1;
  text-align: left;
  text-overflow: clip;
  white-space: nowrap;
  overflow-wrap: normal;
  user-select: none;
  -webkit-user-select: none;
}

.node-module-store-list .scene-context-store-card[data-context-module] strong {
  color: var(--node-module-primary-text-color) !important;
  font-family: var(
    --node-header-title-font-family,
    "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace
  );
  font-weight: 400;
}

.node-module-store-list .scene-context-store-card[data-context-module]:hover strong,
.node-module-store-list .scene-context-store-card[data-context-module]:focus-visible strong {
  color: var(--node-module-primary-text-color) !important;
}

.node-module-store-list .scene-context-store-card small {
  display: inline;
  color: rgba(226, 168, 109, 0.78);
  font: 0.62rem/1 var(--mono);
  text-align: right;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .node-module-shop-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 460px) {
  .scene-context-store-department-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.node-settings-actions {
  display: grid;
  grid-template-columns:
    minmax(30px, 0.55fr)
    minmax(0, 4fr)
    minmax(0, 1.45fr)
    minmax(0, 4fr)
    minmax(0, 2fr);
  align-items: stretch;
  gap: 8px;
  margin-bottom: 12px;
}

.node-settings-actions > * {
  width: 100%;
  min-width: 0;
}

.node-settings-actions button,
.node-settings-actions a {
  container-type: inline-size;
  display: grid;
  grid-template-rows:
    calc(var(--node-settings-knob-top-ratio) * 100%)
    calc((1 - var(--node-settings-knob-top-ratio)) * 100%);
  align-items: stretch;
  justify-items: stretch;
  justify-content: stretch;
  gap: 0;
  height: var(--node-settings-action-height);
  min-height: 0;
  padding: var(--node-settings-knob-extra-padding);
  font-family: inherit;
  overflow: hidden;
}

.node-settings-actions button > span:first-child,
.node-settings-actions a > span:first-child {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  font-size: clamp(0.62rem, 16cqi, 0.95rem);
}

.node-settings-actions button > span:last-child,
.node-settings-actions a > span:last-child {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  font-size: clamp(0.62rem, 16cqi, 0.95rem);
}

#nodeUiDevButton {
  grid-template-rows: minmax(0, 1fr);
}

#nodeUiDevButton > span {
  grid-row: 1;
}

.node-settings-actions .node-settings-back-button {
  grid-template-rows: minmax(0, 1fr);
  font-size: 1.35rem;
  line-height: 1;
}

.node-settings-actions .node-settings-back-button > span {
  grid-row: 1;
}

.node-settings-script-action-group,
.node-settings-view-action-group,
.node-settings-feedback-action-group {
  display: grid;
  align-items: stretch;
  gap: 0;
  height: var(--node-settings-action-height);
  min-width: 0;
  overflow: visible;
}

.node-settings-script-action-group {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.node-settings-script-action-group > button,
.node-settings-script-action-group > a {
  min-height: 0;
  container-type: inline-size;
  display: grid;
  grid-template-rows:
    calc(var(--node-settings-knob-top-ratio) * 100%)
    calc((1 - var(--node-settings-knob-top-ratio)) * 100%);
  align-items: stretch;
  justify-items: stretch;
  justify-content: stretch;
  gap: 0;
  min-width: 0;
  height: 100%;
  padding: var(--node-settings-knob-extra-padding);
  font-family: inherit;
  overflow: hidden;
}

.node-settings-view-action-group {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.node-settings-feedback-action-group {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.node-settings-script-action-group > *,
.node-settings-view-action-group button,
.node-settings-feedback-action-group .node-settings-link-action {
  position: relative;
  z-index: 0;
  min-width: 0;
  height: 100%;
  border-radius: 0;
}

.node-settings-script-action-group > *:hover,
.node-settings-script-action-group > *:focus-visible,
.node-settings-view-action-group button:hover,
.node-settings-view-action-group button:focus-visible,
.node-settings-feedback-action-group .node-settings-link-action:hover,
.node-settings-feedback-action-group .node-settings-link-action:focus-visible {
  z-index: 2;
}

.node-settings-script-action-group > * + *,
.node-settings-view-action-group button + button,
.node-settings-feedback-action-group .node-settings-link-action + .node-settings-link-action {
  margin-left: -1px;
}

.node-settings-script-action-group > :first-child,
.node-settings-view-action-group button:first-child,
.node-settings-feedback-action-group .node-settings-link-action:first-child {
  border-radius: 6px 0 0 6px;
}

.node-settings-script-action-group > :last-child,
.node-settings-view-action-group button:last-child,
.node-settings-feedback-action-group .node-settings-link-action:last-child {
  border-radius: 0 6px 6px 0;
}

.node-settings-dev-action-group {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  height: var(--node-settings-action-height);
  min-width: 0;
  overflow: visible;
}

.node-settings-dev-action-group > button {
  position: relative;
  z-index: 0;
  border-radius: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  container-type: inline-size;
  display: grid;
  grid-template-rows:
    calc(var(--node-settings-knob-top-ratio) * 100%)
    calc((1 - var(--node-settings-knob-top-ratio)) * 100%);
  align-items: stretch;
  justify-items: stretch;
  padding: var(--node-settings-knob-extra-padding);
  font-family: inherit;
  overflow: hidden;
}

.node-settings-dev-action-group > button:hover,
.node-settings-dev-action-group > button:focus-visible {
  z-index: 2;
}

.node-settings-dev-action-group > button + button {
  margin-left: -1px;
}

.node-settings-dev-action-group > button:first-child {
  border-radius: 6px 0 0 6px;
}

.node-settings-dev-action-group > button:last-child {
  border-radius: 0 6px 6px 0;
}

.node-settings-disabled-action {
  display: grid;
  grid-template-rows:
    calc(var(--node-settings-knob-top-ratio) * 100%)
    calc((1 - var(--node-settings-knob-top-ratio)) * 100%);
  height: 100%;
  align-items: stretch;
  justify-items: stretch;
  justify-content: stretch;
  gap: 0;
  border-color: rgba(127, 199, 217, 0.08);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(243, 241, 236, 0.045) 0 6px,
      transparent 6px 12px
    ),
    rgba(17, 20, 24, 0.62);
  color: rgba(160, 167, 176, 0.72);
  line-height: 1.05;
  text-align: center;
}

.node-settings-script-action-group > button > span:first-child,
.node-settings-script-action-group > a > span:first-child,
.node-settings-dev-action-group > button > span:first-child,
.node-settings-disabled-action span:first-child {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.node-settings-script-action-group > button > span:last-child,
.node-settings-script-action-group > a > span:last-child,
.node-settings-dev-action-group > button > span:last-child,
.node-settings-disabled-action span:last-child {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.node-settings-link-action {
  display: grid;
  grid-template-rows:
    calc(var(--node-settings-knob-top-ratio) * 100%)
    calc((1 - var(--node-settings-knob-top-ratio)) * 100%);
  padding: var(--node-settings-knob-extra-padding);
  align-items: stretch;
  justify-items: stretch;
  justify-content: stretch;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
}

.node-settings-link-action span:first-child {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.node-settings-link-action span:last-child {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.node-settings-link-action:hover,
.node-settings-link-action:focus-visible {
  outline: none;
  transform: none;
}

.node-settings-feature-action:hover,
.node-settings-feature-action:focus-visible {
  border-color: var(--node-front-button-hover-border);
  background: var(--node-front-button-hover-bg);
  color: var(--node-front-button-hover-color);
  box-shadow: none;
}

.node-settings-bug-action:hover,
.node-settings-bug-action:focus-visible {
  border-color: var(--node-front-button-hover-border);
  background: var(--node-front-button-hover-bg);
  color: var(--node-front-button-hover-color);
  box-shadow: none;
}

/* Patch toolbar wins over the two-row knob / link-action layout above. */
.node-patch-page-toolbar .node-settings-script-action-group > button,
.node-patch-page-toolbar .node-settings-script-action-group > a,
.node-patch-page-toolbar .node-settings-dev-action-group > button,
.node-patch-page-toolbar .node-settings-link-action,
.node-patch-page-toolbar .node-settings-disabled-action {
  container-type: normal;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  padding: 3px 4px;
  border: 0 !important;
  overflow: hidden;
  grid-template-rows: none;
  line-height: 1;
  transition: none;
}

.node-patch-page-toolbar .node-settings-script-action-group > button > span,
.node-patch-page-toolbar .node-settings-script-action-group > a > span,
.node-patch-page-toolbar .node-settings-dev-action-group > button > span,
.node-patch-page-toolbar .node-settings-link-action span,
.node-patch-page-toolbar .node-settings-disabled-action span,
.node-patch-page-toolbar .node-settings-link-action span:first-child,
.node-patch-page-toolbar .node-settings-link-action span:last-child,
.node-patch-page-toolbar .node-settings-disabled-action span:first-child,
.node-patch-page-toolbar .node-settings-disabled-action span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  max-width: none;
  overflow: hidden;
  font-size: 22px;
  font-weight: 650;
  line-height: 1;
}

.node-ui-dev-helper {
  position: fixed;
  z-index: 60;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--node-ui-dev-helper-width, min(var(--node-unified-window-default-width, 380px), calc(100vw - 36px)));
  height: var(--node-ui-dev-helper-height, min(var(--node-unified-window-default-height, 620px), calc(100vh - 36px)));
  min-width: var(--node-ui-dev-helper-min-width, var(--node-unified-window-min-width, 24px));
  min-height: var(--node-ui-dev-helper-min-height, var(--node-unified-window-min-height, 120px));
  max-width: var(--node-ui-dev-helper-max-width, none);
  max-height: var(--node-ui-dev-helper-max-height, calc(100vh - 24px));
  border: 1px solid rgba(127, 199, 217, 0.32);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(23, 28, 34, 0.96), rgba(12, 15, 18, 0.96));
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.42);
  color: var(--text);
  overflow: hidden;
}

.node-ui-dev-helper[hidden] {
  display: none;
}

/* UIDEV uses the shared .scene-context-heading title bar. */
.node-ui-dev-helper-body {
  display: grid;
  gap: 7px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  /* Bottom room for the shared SE resize grip. */
  padding: 9px 9px 22px;
  color: rgba(243, 241, 236, 0.78);
  font-size: 0.82rem;
  line-height: 1.35;
}

/* UIDEV option groups — always-visible <section> boxes (never closed details). */
#nodeUiDevHelper .node-ui-dev-section,
.node-ui-dev-helper .node-ui-dev-section {
  display: block !important;
  min-width: 0;
  border: 1px solid rgba(127, 199, 217, 0.16);
  border-radius: 5px;
  background: rgba(3, 5, 7, 0.28);
  overflow: visible;
}

#nodeUiDevHelper .node-ui-dev-section-heading,
.node-ui-dev-helper .node-ui-dev-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 30px;
  padding: 0 8px;
  color: var(--accent);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
  line-height: 1.2;
  user-select: none;
}

/* Bodies must always show — never rely on <details open>. */
#nodeUiDevHelper .node-ui-dev-section-body,
.node-ui-dev-helper .node-ui-dev-section-body {
  display: grid !important;
  gap: 7px;
  min-width: 0;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  padding: 7px;
  border-top: 1px solid rgba(127, 199, 217, 0.12);
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* If a stale <details> wrapper remains, force its contents visible. */
#nodeUiDevHelper details.node-ui-dev-section,
.node-ui-dev-helper details.node-ui-dev-section {
  display: block !important;
}

#nodeUiDevHelper details.node-ui-dev-section > :not(summary),
.node-ui-dev-helper details.node-ui-dev-section > :not(summary) {
  display: grid !important;
}

/* Keep section chrome inside the scrollport — overflow:visible let long
   labels / color rows extend under the action bar and block Clear Startup. */
.node-user-ui-settings-controls .node-user-ui-settings-section {
  overflow: hidden;
}

.node-user-ui-settings-controls .node-user-ui-settings-section .node-ui-dev-section-body {
  overflow: hidden;
  min-width: 0;
}

.node-ui-dev-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(var(--node-floating-window-button-height), auto);
  gap: 4px;
  align-items: stretch;
  align-content: start;
  min-width: 0;
}

.node-ui-dev-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}

.node-ui-dev-actions button {
  box-sizing: border-box;
  height: auto;
  min-height: var(--node-floating-window-button-height);
  max-height: none;
  padding: 4px 6px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.68rem;
  line-height: 1.15;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  text-align: center;
}

.node-ui-dev-actions .pill {
  grid-column: 1 / -1;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.node-ui-dev-control {
  display: grid;
  grid-template-columns: minmax(104px, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.node-ui-dev-control.has-expose {
  grid-template-columns: minmax(94px, 0.78fr) minmax(0, 1.14fr) 18px;
}

.node-ui-dev-control > span {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.1;
}

.node-ui-dev-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.node-ui-dev-control-row.select {
  grid-template-columns: minmax(0, 1fr) 76px;
}

.node-ui-dev-control-row-buttons {
  display: flex;
  grid-template-columns: none;
  gap: 6px;
  justify-content: flex-end;
}

.node-ui-dev-control-row-buttons > button {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid var(--line, rgba(127, 199, 217, 0.22));
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  cursor: var(--node-dot-cursor);
}

.node-ui-dev-control-row-buttons > button.active,
.node-ui-dev-control-row-buttons > button[aria-pressed="true"] {
  border-color: rgba(90, 255, 150, 0.62);
  background: rgba(90, 255, 150, 0.16);
  color: rgba(180, 255, 210, 0.95);
}

.node-ui-dev-control-row input[type="range"] {
  width: 100%;
  min-width: 0;
  accent-color: var(--accent);
}

.node-ui-dev-control-row select {
  width: 100%;
  min-width: 0;
  height: 26px;
  border: 1px solid rgba(127, 199, 217, 0.22);
  border-radius: 4px;
  background: rgba(3, 5, 7, 0.7);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.node-ui-dev-control-row output {
  display: grid;
  min-height: 24px;
  align-items: center;
  justify-items: end;
  padding: 0 6px;
  border: 1px solid rgba(127, 199, 217, 0.22);
  border-radius: 4px;
  background: rgba(3, 5, 7, 0.52);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.76rem;
}

.node-ui-dev-bypass-icon-control .node-ui-dev-control-row,
.node-ui-dev-symbol-size-control .node-ui-dev-control-row {
  grid-template-columns: minmax(0, 1fr) 54px minmax(28px, max-content);
}

.node-ui-dev-symbol-preview {
  display: grid;
  place-items: center;
  justify-self: center;
  inline-size: 28px;
  block-size: 28px;
  overflow: hidden;
  border: 1px solid rgba(127, 199, 217, 0.22);
  border-radius: 4px;
  background: rgba(3, 5, 7, 0.52);
  font-family: "Noto Sans Symbols 2", "Noto Sans Symbols", var(--mono);
  font-size: calc(var(--node-ui-dev-symbol-preview-size, 0.5) * 28px);
  line-height: 1;
}

.node-ui-dev-bypass-icon-preview {
  color: var(--node-ui-dev-bypass-preview-on-color, #f7b758);
  background: var(--node-ui-dev-bypass-preview-bg, rgba(92, 24, 24, 0.48));
  font-size: calc(var(--node-ui-dev-bypass-preview-size, 0.36) * 28px);
  text-shadow:
    0 0 calc(28px * var(--node-ui-dev-bypass-preview-glow-spread, 0.4) * 0.18) var(--node-ui-dev-bypass-preview-glow-color, rgba(242, 93, 93, 0.72)),
    0 0 calc(28px * var(--node-ui-dev-bypass-preview-glow-spread, 0.4) * 0.42) var(--node-ui-dev-bypass-preview-glow-color, rgba(242, 93, 93, 0.46));
}

.node-ui-dev-move-symbol-preview {
  color: var(--accent);
  text-shadow: 0 0 9px rgba(127, 199, 217, 0.42);
}

.node-ui-dev-close-icon-preview {
  color: #ff9b9b;
  font-size: 0;
}

.node-ui-dev-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.node-ui-dev-check.has-expose {
  grid-template-columns: 18px minmax(0, 1fr) 18px;
}

.node-ui-dev-check input {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

.node-ui-dev-color-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  min-width: 0;
  padding: 5px;
  border: 1px solid rgba(127, 199, 217, 0.16);
  border-radius: calc(var(--node-grid-size) * 2 * var(--node-module-roundness-ratio));
  background: rgba(3, 5, 7, 0.32);
}

.node-ui-dev-section-title {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1;
}

.node-ui-dev-color-control {
  display: grid;
  font-family: var(--mono);
  grid-template-columns: minmax(0, 1fr) 20px 9ch;
  grid-template-rows: 20px;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1;
}

.node-ui-dev-color-control.has-expose {
  grid-template-columns: minmax(0, 1fr) 20px 9ch 18px;
}

.node-ui-dev-expose {
  display: grid;
  place-items: center;
  min-width: 0;
}

.node-ui-dev-expose input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--accent-2);
}

.node-ui-dev-color-control > span {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  line-height: 1.1;
  text-overflow: clip;
  white-space: nowrap;
}

.node-ui-dev-color-control input[type="color"] {
  grid-column: 2;
  grid-row: 1;
  box-sizing: border-box;
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  inline-size: 20px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  block-size: 20px;
  padding: 0;
  border: 1px solid rgba(127, 199, 217, 0.22);
  border-radius: 4px;
  background: rgba(3, 5, 7, 0.52);
}

.node-ui-dev-color-control input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 1px;
}

.node-ui-dev-color-control input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 2px;
}

.node-ui-dev-color-control output {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  width: 100%;
  height: 20px;
  min-height: 20px;
  align-items: center;
  justify-items: end;
  min-width: 0;
  padding: 0 3px;
  border: 1px solid rgba(127, 199, 217, 0.16);
  border-radius: 4px;
  background: rgba(3, 5, 7, 0.38);
  color: rgba(243, 241, 236, 0.7);
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1;
  overflow: visible;
  text-overflow: clip;
  text-transform: lowercase;
  white-space: nowrap;
}

.node-wiring-panel.settings-header-layout-debug .node-settings-actions {
  background:
    linear-gradient(rgba(60, 180, 255, 0.13), rgba(60, 180, 255, 0.13));
  outline: 2px solid rgba(60, 180, 255, 0.65);
  outline-offset: 3px;
}

.node-wiring-panel.settings-header-layout-debug .node-settings-view {
  background:
    linear-gradient(rgba(60, 180, 255, 0.07), rgba(60, 180, 255, 0.07)),
    #111418;
  outline: 2px dashed rgba(60, 180, 255, 0.62);
  outline-offset: 5px;
}

.node-wiring-panel.settings-header-layout-debug .node-settings-actions > * {
  background-color: rgba(255, 210, 80, 0.16);
  box-shadow: inset 0 0 0 2px rgba(255, 210, 80, 0.68);
}

.node-wiring-panel.settings-header-layout-debug .node-settings-dev-action-group {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(190, 130, 255, 0.22) 0 7px,
      rgba(190, 130, 255, 0.08) 7px 14px
    );
  box-shadow: inset 0 0 0 2px rgba(190, 130, 255, 0.78);
}

.node-wiring-panel.settings-header-layout-debug .node-settings-actions button,
.node-wiring-panel.settings-header-layout-debug .node-settings-actions a {
  background-image:
    linear-gradient(
      to bottom,
      rgba(75, 255, 160, 0.18) 0,
      rgba(75, 255, 160, 0.18) calc(var(--node-settings-knob-top-ratio) * 100%),
      rgba(255, 105, 190, 0.18) calc(var(--node-settings-knob-top-ratio) * 100%),
      rgba(255, 105, 190, 0.18) 100%
    );
  box-shadow:
    inset 0 0 0 2px rgba(243, 241, 236, 0.44),
    inset 0 calc(var(--node-settings-knob-top-ratio) * var(--node-settings-action-height)) 0 rgba(243, 241, 236, 0.44);
}

.node-wiring-panel.settings-header-layout-debug .node-settings-actions button > span,
.node-wiring-panel.settings-header-layout-debug .node-settings-actions a > span {
  background-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78);
}

.node-wiring-panel.settings-header-layout-debug .node-settings-actions button > span:first-child,
.node-wiring-panel.settings-header-layout-debug .node-settings-actions a > span:first-child {
  background-color: rgba(75, 255, 160, 0.28);
}

.node-wiring-panel.settings-header-layout-debug .node-settings-actions button > span:last-child,
.node-wiring-panel.settings-header-layout-debug .node-settings-actions a > span:last-child {
  background-color: rgba(255, 105, 190, 0.28);
}

.node-wiring-panel.settings-header-layout-debug .node-ui-dev-helper {
  outline: 2px solid rgba(255, 156, 64, 0.76);
  outline-offset: 4px;
}

.node-wiring-panel.settings-header-layout-debug .node-ui-dev-helper > .scene-context-heading {
  background:
    linear-gradient(rgba(255, 156, 64, 0.18), rgba(255, 156, 64, 0.18)),
    rgba(3, 5, 7, 0.62);
  box-shadow: inset 0 0 0 2px rgba(255, 156, 64, 0.44);
}

.node-wiring-panel.settings-header-layout-debug .node-ui-dev-helper-body {
  background-color: rgba(255, 230, 80, 0.08);
  box-shadow: inset 0 0 0 2px rgba(255, 230, 80, 0.42);
}

.node-wiring-panel.settings-header-layout-debug .node-ui-dev-control,
.node-wiring-panel.settings-header-layout-debug .node-ui-dev-check {
  background-color: rgba(80, 255, 170, 0.09);
  box-shadow: inset 0 0 0 1px rgba(80, 255, 170, 0.42);
}

.node-wiring-panel.settings-header-layout-debug .node-ui-dev-control-row {
  background-color: rgba(255, 90, 120, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 90, 120, 0.5);
}

.node-wiring-panel.settings-header-layout-debug .node-ui-dev-control-row input {
  background-color: rgba(80, 180, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(80, 180, 255, 0.52);
}

.node-wiring-panel.settings-header-layout-debug .node-ui-dev-control-row output {
  background-color: rgba(190, 130, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(190, 130, 255, 0.58);
}

.node-wiring-panel.settings-header-layout-debug .node-parameter-metadata-popover,
.node-wiring-panel.settings-header-layout-debug .node-scene-context-menu {
  outline: 2px solid rgba(127, 199, 217, 0.62);
  outline-offset: 4px;
}

.node-wiring-panel.settings-header-layout-debug .scene-context-heading {
  background:
    linear-gradient(rgba(127, 199, 217, 0.12), rgba(127, 199, 217, 0.12)),
    rgba(3, 5, 7, 0.62);
  box-shadow: inset 0 0 0 2px rgba(127, 199, 217, 0.38);
}

.node-wiring-panel.settings-header-layout-debug .metadata-popover-grid,
.node-wiring-panel.settings-header-layout-debug .scene-context-selected-module,
.node-wiring-panel.settings-header-layout-debug .scene-context-alias-control,
.node-wiring-panel.settings-header-layout-debug .scene-context-width-controls,
.node-wiring-panel.settings-header-layout-debug .scene-context-text-box-controls {
  background-color: rgba(255, 230, 80, 0.08);
  box-shadow: inset 0 0 0 2px rgba(255, 230, 80, 0.42);
}

.node-wiring-panel.settings-header-layout-debug .metadata-popover-grid label,
.node-wiring-panel.settings-header-layout-debug .scene-context-text-box-controls > span,
.node-wiring-panel.settings-header-layout-debug .scene-context-selected-module > span,
.node-wiring-panel.settings-header-layout-debug .scene-context-alias-control > span {
  background-color: rgba(80, 255, 170, 0.09);
  box-shadow: inset 0 0 0 1px rgba(80, 255, 170, 0.42);
}

.node-wiring-panel.settings-header-layout-debug .metadata-popover-grid input,
.node-wiring-panel.settings-header-layout-debug .metadata-popover-grid select,
.node-wiring-panel.settings-header-layout-debug .metadata-popover-grid textarea,
.node-wiring-panel.settings-header-layout-debug .metadata-popover-grid button,
.node-wiring-panel.settings-header-layout-debug .node-scene-context-menu button,
.node-wiring-panel.settings-header-layout-debug .scene-context-alias-control input,
.node-wiring-panel.settings-header-layout-debug .scene-context-width-controls span {
  background-image:
    linear-gradient(
      to bottom,
      rgba(75, 255, 160, 0.18) 0,
      rgba(75, 255, 160, 0.18) calc(var(--node-settings-knob-top-ratio) * 100%),
      rgba(255, 105, 190, 0.18) calc(var(--node-settings-knob-top-ratio) * 100%),
      rgba(255, 105, 190, 0.18) 100%
    );
  box-shadow:
    inset 0 0 0 2px rgba(243, 241, 236, 0.44),
    inset 0 calc(var(--node-settings-knob-top-ratio) * 32px) 0 rgba(243, 241, 236, 0.44);
}

@media (max-width: 760px) {
  .node-settings-actions {
    grid-template-columns:
      minmax(260px, 4fr)
      minmax(54px, 0.72fr)
      minmax(260px, 4fr)
      minmax(140px, 2fr);
    overflow-x: auto;
  }
}

.node-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.node-settings-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.node-settings-sample-rate-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.node-settings-sample-rate-row label {
  min-width: 0;
}

.node-settings-grid-unit-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.node-settings-grid-unit-row label {
  min-width: 0;
}

.node-settings-hsl-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.node-settings-hsl-row label {
  min-width: 0;
}

.node-settings-grid input,
.node-settings-grid select,
.node-settings-grid textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #101214;
  color: var(--text);
  font: inherit;
  text-transform: none;
}

.node-settings-grid input,
.node-settings-grid select {
  min-height: 36px;
  padding: 0 10px;
}

.node-settings-grid textarea {
  min-height: 150px;
  padding: 10px;
  line-height: 1.45;
  resize: vertical;
}

.node-settings-grid input:focus,
.node-settings-grid select:focus,
.node-settings-grid textarea:focus {
  outline: none;
  border-color: rgba(127, 199, 217, 0.58);
}

.node-script-view textarea {
  width: 100%;
  min-height: 420px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111418;
  color: var(--text);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  resize: vertical;
}

.node-script-grid-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  gap: 8px;
  align-items: end;
  margin: 10px 0;
}

.node-script-grid-settings label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.node-script-grid-settings input {
  width: 100%;
  min-height: 34px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #101214;
  color: var(--text);
  font: inherit;
}

.node-script-view textarea:focus {
  outline: none;
  border-color: rgba(127, 199, 217, 0.58);
}

.node-graph-zoom-surface {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: transparent;
  /* Host stays scale(1). Camera pan/zoom lives on .node-graph-world-layer
     so full-bleed wire SVGs (workspace siblings) are never CSS-scaled. */
  transform: none;
  pointer-events: none;
  overflow: hidden;
}

/* Modules + origin + selection chrome: world coords under compositor camera. */
.node-graph-world-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transform: translate3d(
    var(--node-graph-pan-x),
    var(--node-graph-pan-y),
    0
  ) scale(var(--node-graph-zoom));
  pointer-events: none;
}

/* B-055: Text Box host under #nodeWireSvg. Shares .node-graph-world-layer transform. */
.node-graph-annotation-world-layer {
  z-index: 0;
  /* Sit in the workspace stacking context with #nodeWireSvg (later sibling paints above). */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}


.node-graph-origin-marker {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  z-index: 0;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.node-graph-workspace.origin-marker-visible .node-graph-origin-marker {
  display: block;
}

.node-graph-origin-marker::before,
.node-graph-origin-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: #ff3333;
  box-shadow:
    0 0 4px rgba(255, 51, 51, 0.82),
    0 0 10px rgba(255, 51, 51, 0.42);
  transform: translate(-50%, -50%);
}

.node-graph-origin-marker::before {
  width: 15px;
  height: 3px;
}

.node-graph-origin-marker::after {
  width: 3px;
  height: 15px;
}

.node-camera-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.node-camera-overlay-layer[hidden] {
  display: none;
}

.node-camera-frame {
  position: absolute;
  left: var(--camera-frame-x, 80px);
  top: var(--camera-frame-y, 80px);
  width: var(--camera-frame-width, 640px);
  height: var(--camera-frame-height, 360px);
  border: 2px solid var(--camera-frame-color, #ff3333);
  border-radius: 4px;
  background: color-mix(in srgb, var(--camera-frame-color, #ff3333) 8%, transparent);
  box-shadow:
    0 0 0 1px rgba(5, 7, 9, 0.84),
    0 0 24px color-mix(in srgb, var(--camera-frame-color, #ff3333) 36%, transparent);
  pointer-events: auto;
}

.node-camera-frame:not(.active) {
  border-width: 1px;
  opacity: 0.72;
}

.node-camera-frame-label {
  position: absolute;
  left: 8px;
  top: 6px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(5, 7, 9, 0.82);
  color: var(--camera-frame-color, #ff3333);
  font: 800 0.72rem/1 "Cascadia Mono", Consolas, monospace;
  pointer-events: none;
}

.node-camera-frame-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(5, 7, 9, 0.9);
  border-radius: 999px;
  background: var(--camera-frame-color, #ff3333);
  box-shadow: 0 0 10px color-mix(in srgb, var(--camera-frame-color, #ff3333) 54%, transparent);
}

.node-camera-frame-handle[data-camera-handle="nw"] { left: -7px; top: -7px; }
.node-camera-frame-handle[data-camera-handle="n"] { left: calc(50% - 6px); top: -7px; }
.node-camera-frame-handle[data-camera-handle="ne"] { right: -7px; top: -7px; }
.node-camera-frame-handle[data-camera-handle="e"] { right: -7px; top: calc(50% - 6px); }
.node-camera-frame-handle[data-camera-handle="se"] { right: -7px; bottom: -7px; }
.node-camera-frame-handle[data-camera-handle="s"] { left: calc(50% - 6px); bottom: -7px; }
.node-camera-frame-handle[data-camera-handle="sw"] { left: -7px; bottom: -7px; }
.node-camera-frame-handle[data-camera-handle="w"] { left: -7px; top: calc(50% - 6px); }

.node-graph-workspace.grid-visible {
  background-color: color-mix(
    in srgb,
    var(--node-workspace-bg) calc((1 - var(--room-dim, 0)) * 100%),
    #000
  );
  background-image: none;
}

.node-grid-heatmap {
  --node-grid-reveal-mask: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  background-color: transparent;
  background-image: var(--node-grid-heatmap, none);
  background-position: 0 0;
  background-size: auto;
  pointer-events: none;
}

.node-grid-heatmap::before {
  content: "";
  position: absolute;
  inset: 0;
  display: none;
  background-color: transparent;
  background-image:
    linear-gradient(rgb(var(--node-grid-color-rgb) / var(--node-grid-line-alpha, 0.2)) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--node-grid-color-rgb) / var(--node-grid-line-alpha, 0.2)) 1px, transparent 1px);
  background-position:
    var(--node-grid-heatmap-grid-position, 0 0),
    var(--node-grid-heatmap-grid-position, 0 0);
  background-size:
    calc(var(--node-grid-width) * var(--node-graph-zoom) * var(--node-grid-visual-scale, 2))
    calc(var(--node-grid-height) * var(--node-graph-zoom) * var(--node-grid-visual-scale, 2));
  -webkit-mask-image: var(--node-grid-reveal-mask, none);
  mask-image: var(--node-grid-reveal-mask, none);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: auto;
  mask-size: auto;
  pointer-events: none;
}

.node-graph-workspace.grid-visible .node-grid-heatmap,
.node-graph-workspace.grid-light-visible .node-grid-heatmap {
  display: block;
}

.node-graph-workspace.grid-visible .node-grid-heatmap::before {
  display: block;
}

/* Visibility → Wire Lengths off: hide permanent cable strokes (dots stay). */
.node-graph-workspace.wire-lengths-hidden .node-wire-path:not(.temp) {
  display: none;
}

.node-module-scope-canvas,
.node-module-scope-light-canvas {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.node-module-scope-canvas {
  z-index: 4;
  filter:
    brightness(calc(1 + var(--node-visual-brightness, 0) * 0.65))
    drop-shadow(
      0 0
      calc(2px + var(--node-visual-bloom, 0) * 14px)
      rgba(127, 199, 217, calc(var(--node-visual-glow, 0) * 0.46))
    )
    drop-shadow(
      0 0
      calc(3px + var(--node-visual-bloom, 0) * 28px)
      rgba(127, 199, 217, calc(var(--node-visual-glow, 0) * 0.22))
    )
    drop-shadow(
      0 0
      calc(var(--node-visual-bloom, 0) * 44px)
      rgba(226, 168, 109, calc(var(--node-visual-glow, 0) * 0.12))
    );
  mix-blend-mode: screen;
  transform: translate(var(--node-visual-shake-x), var(--node-visual-shake-y));
}

.node-module-scope-light-canvas {
  z-index: 4;
  mix-blend-mode: screen;
  transform: translate(var(--node-visual-shake-x), var(--node-visual-shake-y));
}

.node-graph-workspace.module-scopes-enabled .node-module-scope-canvas,
.node-graph-workspace.module-scopes-enabled .node-module-scope-light-canvas {
  display: block;
}

/* Face paint hide (LayoutB keeps a shell track for side jacks).
   Article tracks omit the face band in applyNodeGraphModuleLayout.
   Text Box body is tagged as the face band for layout, but it is not an
   oscilloscope — do not hide it with display-off. */
.node-graph-workspace.module-oscilloscopes-hidden
  .dsp-node:not(.oscilloscope-forced-visible)
  .node-module-face:not(.node-text-box-body),
.dsp-node.oscilloscope-hidden .node-module-face:not(.node-text-box-body),
.dsp-node.face-track-omitted .node-module-face:not(.node-text-box-body) {
  display: none !important;
}

/* Room dimmer veil — full UI (top/bottom bars + workspace). Fixed viewport.
   z-index below floating windows (~60+) so Command Center etc. stay usable. */
.node-room-dimmer-canvas {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  pointer-events: none;
}

body.room-dimmer-on .node-room-dimmer-canvas,
.node-graph-workspace.room-dimmer-on .node-room-dimmer-canvas {
  display: block;
}

.node-gl-graph-canvas,
.node-gl-graph-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.node-gl-graph-canvas {
  z-index: 0;
}

.node-gl-graph-dots {
  z-index: 3;
}

.node-graph-workspace.gl-graph-on .dsp-node,
.node-graph-workspace.gl-graph-on .dsp-node * {
  pointer-events: none;
}

.node-graph-workspace.gl-graph-on .dsp-node input,
.node-graph-workspace.gl-graph-on .dsp-node textarea,
.node-graph-workspace.gl-graph-on .dsp-node select,
.node-graph-workspace.gl-graph-on .dsp-node [contenteditable="true"],
.node-graph-workspace.gl-graph-on .dsp-node .node-header-title[data-title-editing="1"],
.node-graph-workspace.gl-graph-on .dsp-node [popover],
.node-graph-workspace.gl-graph-on .dsp-node .metadata-popover,
.node-graph-workspace.gl-graph-on .dsp-node .node-module-graph-face,
.node-graph-workspace.gl-graph-on .dsp-node .node-module-graph-display,
.node-graph-workspace.gl-graph-on .dsp-node .node-keypad-face,
.node-graph-workspace.gl-graph-on .dsp-node .node-knob-face,
.node-graph-workspace.gl-graph-on .dsp-node .node-xy-pad-canvas,
.node-graph-workspace.gl-graph-on .dsp-node .acid-seq-face,
.node-graph-workspace.gl-graph-on .dsp-node .node-arp-keys-face,
.node-graph-workspace.gl-graph-on .dsp-node .node-plugin-toggle-button,
.node-graph-workspace.gl-graph-on .dsp-node .node-plugin-momentary-button,
.node-graph-workspace.gl-graph-on .dsp-node .node-seed-control,
.node-graph-workspace.gl-graph-on .dsp-node .node-seed-control *,
.node-graph-workspace.gl-graph-on .dsp-node .node-sample-waveform-display,
.node-graph-workspace.gl-graph-on .dsp-node .node-sample-waveform-display *,
.node-graph-workspace.gl-graph-on .dsp-node .node-midi-keyboard-surface,
.node-graph-workspace.gl-graph-on .dsp-node .node-midi-keyboard-surface *,
.node-graph-workspace.gl-graph-on .dsp-node .node-grid-keyboard-surface,
.node-graph-workspace.gl-graph-on .dsp-node .node-grid-keyboard-surface *,
.node-graph-workspace.gl-graph-on .dsp-node .node-module-graph-face *,
.node-graph-workspace.gl-graph-on .dsp-node .node-keypad-face *,
.node-graph-workspace.gl-graph-on .dsp-node .node-knob-face *,
.node-graph-workspace.gl-graph-on .dsp-node .acid-seq-face *,
.node-graph-workspace.gl-graph-on .dsp-node:has(> .node-text-box-body),
.node-graph-workspace.gl-graph-on .dsp-node:has(> .node-text-box-body) * {
  pointer-events: auto;
}

.node-graph-workspace.gl-graph-on .dsp-node .node-sample-waveform-display,
.node-graph-workspace.gl-graph-on .dsp-node .node-module-scope-window,
.node-graph-workspace.gl-graph-on .dsp-node .node-module-scope-window-surface,
.node-graph-workspace.gl-graph-on .dsp-node .node-filter-curve-display,
.node-graph-workspace.gl-graph-on .dsp-node .node-phosphillator-draw-display,
.node-graph-workspace.gl-graph-on .dsp-node .node-module-graph-display,
.node-graph-workspace.gl-graph-on .dsp-node .node-wall-room-display,
.node-graph-workspace.gl-graph-on .dsp-node .node-xy-pad {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.node-graph-workspace.gl-graph-on .node-display-canvas,
.node-module-graph-display svg,
.node-module-graph-display canvas {
  /* Inline visibility:visible (trace faces) must not paint the full-bleed
     bitmap under the GPU copy. The GPU quad is the picture. */
  visibility: hidden !important;
  border-width: 0;
}

.node-keypad-face,
.node-keypad-key,
.node-keypad-key-label {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
}

.node-wire-svg {
  position: absolute;
  inset: 0;
  /* Behind .node-graph-zoom-surface (z:1) so cables sit under modules.
     Screen-space: viewBox is the camera frustum; clip to the viewport. */
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Above annotation Text Boxes (sibling layer before this SVG). Full-bleed
     must not steal clicks — hit targets stay on .node-wire-hit-path. */
  pointer-events: none;
}

/* Contact discs always on the overlay. Visual cable follows Visibility →
   Wires Above Modules (overlay vs .node-wire-svg). Hit targets stay under. */
.node-wire-endpoint-svg {
  position: absolute;
  inset: 0;
  /* Above zoom-surface modules; screen-space camera viewBox like #nodeWireSvg. */
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.node-wire-path {
  fill: none;
  stroke-linecap: round;
  stroke-width: var(--node-wire-thickness);
  pointer-events: none;
  color-interpolation: sRGB;
}

/* Overlay cables sit on the plugs. Drop-shadow / opacity pulse here is the
   halo on every jack ("the shadow"). Selected glow stays on under-module SVG. */
.node-wire-endpoint-svg .node-wire-path,
.node-wire-endpoint-svg .node-wire-path.selected,
.node-wire-endpoint-svg .node-wire-path.state-read,
.node-wire-endpoint-svg .node-wire-path.inactive-wire.selected,
.node-wire-endpoint-svg .node-wire-path.trace-wire.selected {
  filter: none !important;
  animation: none;
}

.node-wire-path.trace-wire {
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-width: var(--node-trace-wire-thickness);
  shape-rendering: crispEdges;
}

/* stop-color comes from the wire path (port colors). No accent/mod fallback —
   those could disagree with the endpoint disc at the jack. */
.node-wire-gradient-stop,
.node-modulation-wire-gradient-stop {
  /* intentional empty — color set inline on each <stop> */
}

.node-wire-path.selected {
  filter:
    drop-shadow(0 0 3px rgba(255, 236, 153, 0.78))
    drop-shadow(0 0 8px rgba(247, 183, 88, 0.44));
  animation: node-wire-selected-glow 920ms ease-in-out infinite alternate;
}

.node-modulation-wire-path {
  stroke-width: max(1px, calc(var(--node-wire-thickness) * 0.84));
}

.node-modulation-wire-path.trace-wire {
  stroke-width: var(--node-trace-wire-thickness);
}

.node-wire-path.state-read {
  filter: drop-shadow(0 0 4px rgba(177, 132, 255, 0.22));
}

.node-wire-path.state-read.selected {
  filter:
    drop-shadow(0 0 4px rgba(255, 236, 153, 0.9))
    drop-shadow(0 0 10px rgba(247, 183, 88, 0.56))
    drop-shadow(0 0 7px rgba(177, 132, 255, 0.34));
}

.node-wire-path.trace-wire.selected {
  stroke-width: max(3px, calc(var(--node-trace-wire-thickness) * 3));
  filter:
    drop-shadow(0 0 4px rgba(255, 236, 153, 0.92))
    drop-shadow(0 0 9px rgba(247, 183, 88, 0.5));
}

.node-wire-path.state-read.trace-wire.selected {
  filter:
    drop-shadow(0 0 4px rgba(255, 236, 153, 0.95))
    drop-shadow(0 0 12px rgba(247, 183, 88, 0.58))
    drop-shadow(0 0 8px rgba(177, 132, 255, 0.42));
}

/* Dim only — never dash. Dotted = .temp (connecting) only. */
.node-wire-path.inactive-wire {
  opacity: 0.45;
}

.node-wire-path.inactive-wire.selected {
  opacity: 0.78;
  filter: drop-shadow(0 0 5px rgba(247, 183, 88, 0.36));
}

.node-wire-path.inactive-wire.trace-wire.selected,
.node-wire-path.inactive-wire.state-read.trace-wire.selected {
  opacity: 0.9;
  stroke-width: max(3px, calc(var(--node-trace-wire-thickness) * 3));
  filter:
    drop-shadow(0 0 4px rgba(255, 236, 153, 0.92))
    drop-shadow(0 0 10px rgba(247, 183, 88, 0.52))
    drop-shadow(0 0 7px rgba(177, 132, 255, 0.34));
}

@keyframes node-wire-selected-glow {
  0% {
    stroke-opacity: 0.82;
  }
  100% {
    stroke-opacity: 1;
  }
}

.node-wire-hit-path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.001);
  stroke-linecap: round;
  stroke-width: max(18px, calc(var(--node-wire-thickness) * 5));
  pointer-events: stroke;
}

.node-wire-path.temp {
  stroke-dasharray: 8 7;
  pointer-events: none;
}

.node-io-row.port-connection-selected,
.node-io-row.port-connection-selected .node-port {
  color: var(--accent);
  --node-port-stroke-mask-color: transparent;
  --node-port-crescent-fill: transparent;
  --node-port-crescent-stroke: color-mix(in srgb, var(--accent) 80%, transparent);
  cursor: var(--node-dot-cursor);
}

.node-port.port-connection-selected,
.node-param-port.port-connection-selected {
  filter: brightness(1.15);
  cursor: var(--node-dot-cursor);
}

.node-param-port.port-connection-selected {
  --node-port-crescent-fill: transparent;
  --node-port-crescent-stroke: color-mix(in srgb, var(--accent) 80%, transparent);
}

.node-wire-path.destroyed {
  stroke: rgba(255, 82, 82, 0.96);
  stroke-dasharray: 10 5;
  stroke-width: calc(var(--node-wire-thickness) + 1px);
  filter: drop-shadow(0 0 7px rgba(255, 82, 82, 0.52));
  pointer-events: none;
  animation: node-wire-destroyed 520ms ease-out forwards;
}

@keyframes node-wire-destroyed {
  0% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 28;
  }
}

.node-graph-nodes {
  position: absolute;
  inset: 0;
  /* Modules stack as units above #nodeWireSvg (z:1) so cables sit behind
     the plate. Wires Above Modules paints on #nodeWireEndpointSvg (z:3). */
  z-index: auto;
  pointer-events: none;
}

/* Legacy area marquee (unused — hit trail replaced it). */
.node-selection-marquee {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  border: 1px dotted var(--accent, #7fc7d9);
  border-radius: 0;
  background: color-mix(in srgb, var(--accent, #7fc7d9) 8%, transparent);
  box-shadow: none;
  pointer-events: none;
}

/* Hitpoint select snake — thick phosphor dotted trail following the cursor.
   Lives on the zoom surface; path coords are surface layout px (same as modules). */
.node-selection-hit-trail {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none !important;
}

.node-selection-hit-trail[hidden] {
  display: none !important;
}

.node-selection-hit-trail-path {
  fill: none !important;
  stroke: var(--node-selection-hit-trail-color, var(--accent, #7fc7d9)) !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--node-selection-hit-trail-alpha, 0.95);
  pointer-events: none !important;
}

/* F / 📱 layout canvas + legacy screen-solo stage. */
.node-screen-solo-stage {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: grid;
  grid-template-columns: repeat(var(--node-screen-solo-cols, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--node-screen-solo-rows, 1), minmax(0, 1fr));
  gap: 2px;
  align-items: stretch;
  justify-items: stretch;
  background: #000;
  pointer-events: auto;
}

/* Freeform layout canvas — no CSS grid auto-organize. */
.node-screen-solo-stage.node-layout-canvas-stage {
  display: block !important;
  gap: 0;
}

.node-layout-canvas-tile {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
}

.node-layout-canvas-tile .node-layout-canvas-face,
.node-layout-canvas-tile .node-screen-solo-face:not(.node-whole-module-face) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.node-layout-canvas-frame {
  display: none;
  position: absolute;
  inset: 0;
  border: 2px solid rgba(0, 208, 255, 0.85);
  box-sizing: border-box;
  pointer-events: auto;
  cursor: move;
  z-index: 5;
  background: transparent;
}

.node-layout-canvas-grip {
  display: none;
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgba(0, 208, 255, 0.95);
  border: 1px solid #fff;
  z-index: 6;
  pointer-events: auto;
}

.node-layout-canvas-grip-nw { left: -2px; top: -2px; cursor: nwse-resize; }
.node-layout-canvas-grip-ne { right: -2px; top: -2px; cursor: nesw-resize; }
.node-layout-canvas-grip-sw { left: -2px; bottom: -2px; cursor: nesw-resize; }
.node-layout-canvas-grip-se { right: -2px; bottom: -2px; cursor: nwse-resize; }

body.node-layout-canvas-active.node-layout-canvas-edit .node-layout-canvas-frame,
body.node-layout-canvas-active .node-layout-canvas-stage.node-layout-canvas-edit .node-layout-canvas-frame,
.node-layout-canvas-stage.node-layout-canvas-edit .node-layout-canvas-frame,
.node-layout-canvas-stage.node-layout-canvas-edit .node-layout-canvas-grip {
  display: block;
}

.node-layout-canvas-tile.is-dragging {
  outline: 2px solid #fff;
  opacity: 0.95;
}

/* Arrange-mode phone guides: thin white portrait/landscape frame (one at a time). */
.node-layout-canvas-phone-guides {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  overflow: hidden;
}

.node-layout-canvas-stage.node-layout-canvas-edit > .node-layout-canvas-phone-guides,
body.node-layout-canvas-active.node-layout-canvas-edit .node-layout-canvas-phone-guides {
  display: block;
}

.node-layout-canvas-phone-guide-frame {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.node-screen-solo-stage[hidden] {
  display: none !important;
}

.node-screen-solo-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  pointer-events: none;
}

body.node-screen-solo-active {
  background: #000;
}

body.node-screen-solo-active .node-screen-solo-face:not(.node-whole-module-face) {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  visibility: visible !important;
  background: #000 !important;
}

body.node-screen-solo-fit-contain .node-screen-solo-stage {
  align-items: center;
  justify-items: center;
}

body.node-screen-solo-fit-contain .node-screen-solo-face {
  width: var(--node-screen-solo-item-w, 100%) !important;
  height: var(--node-screen-solo-item-h, 100%) !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

body.node-screen-solo-fit-fill .node-screen-solo-face {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

/* SinCos4 / filter-curve faces keep a short module-band height in the patch;
   in F solo they must drop that calc and fill the cell so the circle can scale. */
body.node-screen-solo-active .node-screen-solo-face.node-sincos4-display,
body.node-screen-solo-active .node-screen-solo-face.node-filter-curve-display.node-sincos4-display {
  height: var(--node-screen-solo-item-h, 100%) !important;
  min-height: 0 !important;
  display: block !important;
}

body.node-screen-solo-active .node-screen-solo-face,
body.node-screen-solo-active .node-screen-solo-face * {
  pointer-events: auto !important;
}

/* Toggle/momentary paint a dummy scope canvas. Solo stretches it to fill the
   face and the * rule above turns pointer-events back on, so it eats clicks. */
body.node-screen-solo-active .node-plugin-toggle-face canvas,
body.node-screen-solo-active .node-plugin-momentary-face canvas,
.node-plugin-toggle-face canvas,
.node-plugin-momentary-face canvas {
  pointer-events: none !important;
}

body.node-screen-solo-active .node-screen-solo-face:not(.node-whole-module-face) canvas,
body.node-screen-solo-active .node-screen-solo-face:not(.node-whole-module-face) .node-module-scope-window-surface,
body.node-screen-solo-active .node-screen-solo-face:not(.node-whole-module-face) .node-raster-rgb-canvas,
body.node-screen-solo-active .node-screen-solo-face:not(.node-whole-module-face) .node-fbm-field-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}
body.node-screen-solo-active .node-screen-solo-face .node-music-player-waveplay-wave canvas {
  inset: 0 !important;
}

/* Music Player: pages are inset for the module dock. In F they must fill
   the stage (minus the one-row dock) or the wave sits in a short band. */
body.node-screen-solo-active .node-screen-solo-face.node-sample-waveform-display .node-music-player-page {
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  bottom: var(--node-music-player-pl-row-height, 1.35rem) !important;
}
body.node-screen-solo-active .node-screen-solo-face.node-sample-waveform-display .node-music-player-page-wave {
  bottom: var(--node-music-player-pl-row-height, 1.35rem) !important;
}
body.node-screen-solo-active .node-screen-solo-face.node-sample-waveform-display .node-music-player-page-vs {
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  bottom: var(--node-music-player-pl-row-height, 1.35rem) !important;
}

/* Off-screen modules must leave the CSS-zoom paint tree. Face-only
   content-visibility still left chrome/jacks in a zoomed compositor layer. */
.dsp-node.viewport-asleep {
  display: none !important;
}

/* Interior / portal modules stay off Root even if cull wake removes viewport-asleep. */
.dsp-node[hidden] {
  display: none !important;
}

.dsp-node {
  --node-module-scope-height: calc(var(--node-grid-height) * var(--node-module-display-height-units, 2));
  --node-module-interface-controls-height: calc(var(--node-grid-height) * var(--node-module-interface-controls-height-units, 4));
  position: absolute;
  left: var(--node-x);
  top: var(--node-y);
  box-sizing: border-box;
  display: grid;
  /* One definite column = the plate. An implicit `auto` column lets
     width:100% children shrink-wrap (percentage is cyclic), so header / IO /
     face / sliders keep a content-sized right edge while ::before tracks
     the real plate. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  /* LayoutA: I/O band sits above the face. Reserve strip height from
     --node-module-io-height-units so multi-out modules (crossovers) never
     crush outlets into the face or param track. */
  --node-module-io-track-min: max(
    var(--node-io-section-min-height),
    calc(
      var(--node-grid-height) * var(--node-module-io-height-units, 0)
      + var(--node-io-section-padding-top, 0px)
      + var(--node-io-section-padding-bottom, 0px)
    )
  );
  /* Article tracks come from applyNodeGraphModuleLayout (inline + this var).
     Hidden bands are omitted — do not reserve a 0px face hole.
     start, not stretch: leftover height must not inflate the I/O strip
     (that crushed Music Player's waveform and hid jacks in empty space). */
  grid-template-rows: var(--node-module-stack-rows, var(--node-header-height) auto);
  align-content: start;
  gap: 0;
  width: calc((var(--node-grid-width) * var(--node-grid-width-units, 7)) - (var(--node-module-grid-inset) * 2));
  min-width: calc((var(--node-grid-width) * var(--node-grid-width-units, 7)) - (var(--node-module-grid-inset) * 2));
  max-width: calc((var(--node-grid-width) * var(--node-grid-width-units, 7)) - (var(--node-module-grid-inset) * 2));
  height: calc(
    (var(--node-grid-height) * var(--node-grid-height-units, 4))
    - var(--node-module-grid-inset-y-total)
  );
  min-height: calc(
    (var(--node-grid-height) * var(--node-grid-height-units, 4))
    - var(--node-module-grid-inset-y-total)
  );
  padding: 0;
  border-radius: 0;
  corner-shape: square;
  /* Whole plate (including ::before fill) sits above #nodeWireSvg (z:1)
     so cables run behind the module background. Isolate so child z-index
     cannot leak onto the workspace. Wires-above uses overlay z:3. */
  background: none;
  isolation: isolate;
  z-index: 2;
  overflow: visible;
  box-shadow: none;
  outline: none;
  filter: none;
  pointer-events: none;
}

/* Plate fill, outline, and shadow are drawn by the GPU graph. */
.dsp-node::before {
  content: none;
  pointer-events: none;
}

.dsp-node.module-stack {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--node-module-stack-rows, var(--node-header-height) auto);
}

.dsp-node > .node-module-face {
  min-width: 0;
  max-width: 100%;
  min-height: 0;
}

/* Retired SVG frame. Stroke is CSS outline. */
.dsp-node > .node-module-frame,
.node-module-frame {
  display: none !important;
  pointer-events: none !important;
}

/* Empty bottom plate band — same fill as the module; receives drag / right-click. */
.node-module-lip {
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  background: transparent;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  cursor: var(--node-module-move-cursor, default);
}

/* Module content stacks above wires (z:1) and the idle plate stroke (z:0).
   Isolate each child so jack/face z-index cannot escape onto the workspace.
   Do not whitelist faces here — a missing class paints under ::after and
   looks blank (Text Box, Music Player waveform, any new LayoutA face). */
.dsp-node > *:not(.node-module-frame) {
  position: relative;
  z-index: 2;
  isolation: isolate;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  justify-self: stretch;
  pointer-events: auto;
}

/*
 * Jack strokes must never lose to face fill / labels / slider text
 * (reads as “clipping” toward the module interior). IO section above body;
 * header stays on top for drag / title hits.
 */
.dsp-node > .dsp-node-body,
.dsp-node > .node-solid-module-shell,
.dsp-node > .node-module-chrome-layout-b-shell {
  z-index: 2;
}

.dsp-node > .dsp-node-io-section {
  z-index: 14;
}

.dsp-node > .dsp-node-header {
  z-index: 16;
}

.node-module-frame-path {
  fill: none;
  stroke: none;
}

.dsp-node-header,
.node-drag-handle,
.node-header-title-row,
.node-port,
.node-io-row,
.node-param-port,
/* Solid shell must be on the whitelist: .dsp-node is pointer-events:none. */
.node-solid-module-shell,
.node-solid-module-custom-ui,
.node-knob-face,
.node-plugin-toggle-face,
.node-plugin-momentary-face,
.node-xy-pad,
.dsp-node-body,
.dsp-node button,
.dsp-node input,
.dsp-node select,
.dsp-node textarea,
.dsp-node canvas,
.dsp-node svg,
.node-sample-module-body,
.node-sample-module-body *,
.node-midi-keyboard-surface,
.node-midi-keyboard-surface [data-midi],
.node-midi-keyboard-wheel,
.node-module-lip,
.node-slider-readout,
.node-module-graph-display,
.node-module-filter-curve-display,
.node-filter-curve-display,
.node-sample-waveform-display,
.node-phosphillator-draw-display,
.node-wall-room-display {
  pointer-events: auto;
}

.node-graph-workspace .dsp-node {
  box-shadow: none;
  filter: none;
}

.dsp-node.placing {
  z-index: 5;
  filter: drop-shadow(0 0 calc(var(--node-grid-size) * 0.55) color-mix(in srgb, var(--node-module-drag-stroke) 62%, transparent));
  pointer-events: none;
}

/* Snap landing pad under a shop-drag / teleport ghost. Same plate size as the
   free-floating module; left/top are the grid cell mouseup will commit. */
.dsp-node-placement-snap-ghost {
  position: absolute;
  left: var(--node-x);
  top: var(--node-y);
  z-index: 4;
  box-sizing: border-box;
  pointer-events: none;
  background: color-mix(in srgb, var(--node-module-fill, #16130f) 42%, transparent);
  outline: 2px dashed color-mix(in srgb, var(--node-module-drag-stroke) 78%, transparent);
  outline-offset: -1px;
}

.dsp-node.selected {
  outline: none;
  filter: none;
}

.dsp-node.selected::before {
  content: none;
}

.dsp-node.slider-widget-layout[data-hide-module-frame="1"] {
  outline: none;
}

.dsp-node.slider-widget-layout[data-hide-module-frame="1"]::before {
  content: none;
}

/*
 * Disabled (bypassed) modules: full-module construction veil (not only the
 * bottom slider gap). ::before sits above faces (z:40) with pointer-events:none
 * so chrome stays clickable; faces are greyscaled underneath.
 */
.dsp-node.bypassed {
  background: none;
  box-shadow: none;
  /* Contain the OFF veil (z:40) so it cannot cover the workspace. */
  isolation: isolate;
  z-index: 2;
}

/* Construction fill only. Selection ring + I/O sit above this wallpaper. */
.dsp-node.bypassed::before {
  content: none;
  background: none;
  box-shadow: none;
  color: rgba(255, 214, 170, 0.82);
  font-family: var(--node-ui-font, system-ui, sans-serif);
  font-size: clamp(0.7rem, 18%, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 12px rgba(0, 0, 0, 0.55);
  opacity: 1;
}

/* Overlay covers the whole plate (including the title band). Title chrome
   sits above it with a clear fill so stripes show in title-only / collapsed. */
.dsp-node.bypassed > .dsp-node-header,
.dsp-node.bypassed .dsp-node-header,
.dsp-node.bypassed .node-header-title-row {
  position: relative;
  z-index: 50;
  background: transparent !important;
  filter: none;
  opacity: 1;
}

/* Hide painted displays under the OFF wallpaper (keep layout so size holds).
   Band tag + common face classes. Do not hide Layout B I/O columns. */
.dsp-node.bypassed [data-module-band="face"],
.dsp-node.bypassed .node-module-face,
.dsp-node.bypassed .node-module-graph-display,
.dsp-node.bypassed .node-module-scope-window,
.dsp-node.bypassed .node-module-display-face,
.dsp-node.bypassed .node-module-display-placeholder,
.dsp-node.bypassed .node-pitch-detector-face,
.dsp-node.bypassed .node-filter-curve-display,
.dsp-node.bypassed .node-envelope-curve-display,
.dsp-node.bypassed .node-sample-waveform-display,
.dsp-node.bypassed .node-phosphillator-draw-display,
.dsp-node.bypassed .node-pulse-curve-display,
.dsp-node.bypassed .node-wall-room-display,
.dsp-node.bypassed .node-number-readout-face,
.dsp-node.bypassed .node-lcd-dot-face,
.dsp-node.bypassed .node-led-face,
.dsp-node.bypassed .node-solid-module-custom-ui {
  visibility: hidden;
  pointer-events: none;
}

/* Param sliders / control knobs above the OFF construction texture. */
.dsp-node.bypassed > .dsp-node-body,
.dsp-node.bypassed .dsp-node-body,
.dsp-node.bypassed .node-param-row,
.dsp-node.bypassed .node-knob-face {
  position: relative;
  z-index: 50;
  visibility: visible;
  filter: none;
  opacity: 1;
  pointer-events: auto;
}

/* Jacks + labels stay readable on top of the OFF wallpaper.
   Do not rewrite port position — jacks are absolute overlays on the row.
   `position: relative` pulled them into flow and double-padded the labels. */
.dsp-node.bypassed > .dsp-node-io-section,
.dsp-node.bypassed .dsp-node-io-section {
  z-index: 50;
  filter: none;
  opacity: 1;
}

.dsp-node.bypassed .node-io-column,
.dsp-node.bypassed .node-io-row,
.dsp-node.bypassed .node-io-label,
.dsp-node.bypassed .node-port,
.dsp-node.bypassed .node-param-port {
  z-index: 50;
  filter: none;
  opacity: 1;
}

/* Hide unused: per-module .unused-hidden only (unconnected signal jacks). Parameter I/O stays visible. */
.dsp-node.unused-hidden .node-io-row:not(:has(.connected-port)):not(:has(.node-param-port)),
.dsp-node.unused-hidden .node-io-row:not(:has(.node-port.connected-port)):not(:has(.node-param-port)) {
  display: none !important;
}

.dsp-node.unused-hidden .node-port:not(.node-param-port):not(.connected-port) {
  display: none !important;
}

.node-graph-workspace.patch-locked .node-port,
.node-graph-workspace.patch-locked .node-param-port,
.node-graph-workspace.patch-locked .node-wire-svg,
.node-graph-workspace.patch-locked .node-wire-endpoint-svg,
.node-graph-workspace.patch-locked .node-selection-hit-trail {
  pointer-events: none !important;
}

.dsp-node.removed {
  display: none;
}

.dsp-node[hidden] {
  display: none !important;
}

.dsp-node.output-node {
  --node-grid-width-units: 6;
}

/* Article row templates for text/image/scope/trace come from applyNodeGraphModuleLayout. */

/*
 * LayoutB module article grid (chrome-layout-b + solid-module-layout):
 *   header | shell = EXACT face gu | params (auto) | bottom gap
 *
 * Shell track is a definite length — NEVER minmax(…, auto) or 1fr when params
 * exist. minmax(auto) let the face grow past face height (Smooth Graph face
 * painted ~3gu while Height said 1gu; sliders sat outside the plate).
 *
 * Outer box height comes from --node-grid-height-units (JS SSOT).
 * Face units: --node-module-shell-height-units (= face, min 1gu).
 */
.dsp-node.chrome-layout-b,
.dsp-node.solid-module-layout {
  --node-module-layout-b-shell-track: calc(
    var(--node-grid-height) * var(
      --node-module-shell-height-units,
      var(--node-module-display-height-units, 1)
    )
  );
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Visible: hidden + plate corner-shape sliced the side jacks. */
  overflow: visible;
  /* Do not let min-content of children expand the plate past outer gu. */
  max-height: calc(
    (var(--node-grid-height) * var(--node-grid-height-units, 4))
    - var(--node-module-grid-inset-y-total)
  );
}

.dsp-node.chrome-layout-b > .dsp-node-header,
.dsp-node.solid-module-layout > .dsp-node-header {
  min-height: 0;
  max-height: var(--node-header-height);
  overflow: hidden;
}

.dsp-node.chrome-layout-b > .node-solid-module-shell,
.dsp-node.chrome-layout-b > .node-module-chrome-layout-b-shell,
.dsp-node.solid-module-layout > .node-solid-module-shell {
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  /* Fill the article track. Do not also set height to raw face-gu pixels —
     that ignores plate insets and hangs the display off the module. */
  height: 100%;
  min-height: 0;
  max-height: 100%;
  /* visible so half-crescents are not clipped by the shell box */
  overflow: visible;
}

.dsp-node.chrome-layout-b > .dsp-node-body,
.dsp-node.solid-module-layout > .dsp-node-body {
  align-self: start;
  align-content: start;
  min-height: 0;
  overflow: visible;
}

/*
 * No params: shell fills remaining height. minmax min must be 0 — a gu-based
 * min made the track taller than the inset article box (Number Readout, LED).
 */
.dsp-node.chrome-layout-b.layout-b-no-params,
.dsp-node.solid-module-layout.layout-b-no-params {
  overflow: visible;
}

.dsp-node.chrome-layout-b.layout-b-no-params > .dsp-node-body,
.dsp-node.solid-module-layout.layout-b-no-params > .dsp-node-body {
  display: none !important;
}

.dsp-node.chrome-layout-b.layout-b-no-params > .node-solid-module-shell,
.dsp-node.chrome-layout-b.layout-b-no-params > .node-module-chrome-layout-b-shell,
.dsp-node.solid-module-layout.layout-b-no-params > .node-solid-module-shell,
.dsp-node.layout-b-display-only > .node-solid-module-shell,
.dsp-node.layout-b-display-only > .node-module-chrome-layout-b-shell {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: visible;
  border-radius: 0;
  corner-shape: square;
}

/* Faces are square by default. Do not inherit the plate squircle / frame
   radius — only displays with explicit cornerRadius / cornerShape settings
   may round (Raster RGB, Matrix/Asciiscope, sample waveform panel, …). */
.dsp-node .node-module-scope-window,
.dsp-node .node-module-face:not(.node-text-box-body):not(.node-filter-curve-display),
.dsp-node .node-sample-waveform-display,
.dsp-node .node-module-graph-display,
.dsp-node .node-solid-module-custom-ui {
  --node-plate-clip-top: 999px;
  --node-plate-clip-right: 999px;
  --node-plate-clip-bottom: 999px;
  --node-plate-clip-left: 999px;
  overflow: hidden;
  border-radius: 0;
  corner-shape: unset;
  clip-path: none;
}

/* Graph face wrapper: SVG plot + compact numeric strip underneath. */
.node-module-graph-face {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
}

.node-module-graph-face > .node-module-graph-display {
  flex: 1 1 auto;
  min-height: 0;
}

.node-module-graph-point-strip {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  box-sizing: border-box;
  width: 100%;
  padding: 0.2rem 0.35rem 0.28rem;
  border-top: 1px solid rgba(128, 224, 224, 0.16);
  background: rgba(2, 8, 12, 0.92);
  color: rgba(210, 236, 236, 0.88);
  font-size: 0.68rem;
  line-height: 1.1;
}

.node-module-graph-point-strip-field {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 0;
}

.node-module-graph-point-strip-label {
  flex: 0 0 auto;
  opacity: 0.72;
  letter-spacing: 0.02em;
}

.node-module-graph-point-strip-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.12rem 0.22rem;
  border: 1px solid rgba(128, 224, 224, 0.22);
  border-radius: 3px;
  background: #040a0e;
  color: rgba(230, 248, 248, 0.95);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.node-module-graph-point-strip-input:focus {
  outline: 1px solid rgba(255, 236, 181, 0.55);
  outline-offset: 0;
  border-color: rgba(255, 236, 181, 0.45);
}

.node-module-graph-point-strip-input:read-only {
  opacity: 0.55;
}

/* EQ / filter-curve plots: keep square clip (never plate-squircle). */
.dsp-node .node-filter-curve-display,
.dsp-node .node-module-face.node-filter-curve-display {
  clip-path: none;
  overflow: hidden;
  border-radius: 0;
  corner-shape: unset;
}

.dsp-node.layout-b-no-params
  > :is(.node-solid-module-shell, .node-module-chrome-layout-b-shell)
  > :is(.node-module-face, .node-module-scope-window, .node-solid-module-custom-ui),
.dsp-node.layout-b-display-only
  > :is(.node-solid-module-shell, .node-module-chrome-layout-b-shell)
  > :is(.node-module-face, .node-module-scope-window, .node-solid-module-custom-ui) {
  overflow: hidden;
  clip-path: none;
  height: 100%;
  max-height: 100%;
  /* Square face — plate squircle is article chrome only. */
  border-radius: 0;
  corner-shape: unset;
}

/* LED / LCD / Value LED / LCD Dot / Clock: square unless the face schema
   applies its own cornerRadius / cornerShape (Raster RGB path, etc.). */
.dsp-node.led-layout .node-led-face,
.dsp-node.value-lcd-layout .node-module-scope-window,
.dsp-node.value-lcd-layout .node-value-lcd-face,
.dsp-node.lcd-dot-layout .node-module-scope-window,
.dsp-node.lcd-dot-layout .node-lcd-dot-face,
.dsp-node.number-readout-layout .node-module-scope-window,
.dsp-node.number-readout-layout .node-number-readout-face,
.dsp-node.clock-layout .node-module-scope-window,
.dsp-node[data-node-type="clock"] .node-module-scope-window {
  clip-path: none;
  overflow: hidden;
  border-radius: 0;
  corner-shape: unset;
}

/* LayoutB ports live in the shell — never a separate under-face IO strip.
   Must beat `.dsp-node:not(.io-hidden) > .dsp-node-io-section { display:grid }`. */
.dsp-node.chrome-layout-b > .dsp-node-io-section,
.dsp-node.chrome-layout-b > .dsp-node-io-section[hidden],
.dsp-node.chrome-layout-b:not(.io-hidden) > .dsp-node-io-section,
.dsp-node.chrome-layout-b:not(.io-hidden) > .dsp-node-io-section[hidden] {
  display: none !important;
}

/* LayoutA article rows come from applyNodeGraphModuleLayout:
   header → io → face → params → lip. Sample load controls stay under the face.
   Display off / Display Height 0 omits the face track (face-track-omitted).
   LayoutB (ports beside the face) and InletOutletLayout are not this stack. */

/*
 * InletOutletLayout (canonical; title-bar-and-ports / layout-c = aliases):
 *   header | I/O (content-sized jack rows) | lip
 * No display face, no param stack. Jack packing SSOT = shared .node-io-column /
 * .node-io-row (same flush spacing as LayoutA). Do not 1fr-stretch rows (B-074).
 * Leftover outer height is the lip band, not stretched jack gaps.
 */
.dsp-node.chrome-layout-inlet-outlet > .dsp-node-io-section,
.dsp-node.chrome-layout-title-bar-and-ports > .dsp-node-io-section,
.dsp-node.chrome-layout-c > .dsp-node-io-section {
  min-height: 0;
  align-self: start;
  box-sizing: border-box;
  /* Equal in/out columns; row packing inherits shared .node-io-column. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 0) minmax(0, 1fr);
  align-items: start;
  overflow: visible;
}

.dsp-node.chrome-layout-inlet-outlet > .dsp-node-body,
.dsp-node.chrome-layout-title-bar-and-ports > .dsp-node-body,
.dsp-node.chrome-layout-c > .dsp-node-body {
  display: none !important;
}


/* Knob shell height follows shared LayoutB shell units. */
.dsp-node.slider-widget-layout .node-knob-shell {
  /* Shell track already sets exact face height; fill the cell. */
  height: 100%;
  min-height: 0;
  max-height: 100%;
}

/*
 * Knob with face art:
 *  - keep module plate (shell 1px margin + .dsp-node fill)
 *  - kill chrome outline (SVG frame + stroke CSS vars)
 *  - face transparent so no nested plate rim around the knob image
 *
 * --node-module-stroke is also forced transparent in JS on the element.
 */
.dsp-node.slider-widget-layout[data-hide-module-frame="1"] {
  --node-module-stroke: transparent !important;
  --node-module-selected-stroke: transparent !important;
  --node-module-drag-stroke: transparent !important;
  --node-port-crescent-stroke: transparent !important;
}

.dsp-node.slider-widget-layout[data-hide-module-frame="1"] > .node-module-frame,
.dsp-node.slider-widget-layout[data-hide-module-frame="1"] .node-module-frame {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.dsp-node.slider-widget-layout[data-hide-module-frame="1"] > .node-module-frame .node-module-frame-path,
.dsp-node.slider-widget-layout[data-hide-module-frame="1"] .node-module-frame-path {
  stroke: transparent !important;
  stroke: none !important;
  stroke-width: 0 !important;
  stroke-opacity: 0 !important;
  fill: none !important;
}

/* Knob module face, sized to the LayoutB display plate.
   Colors via per-face --macro-arc-* / background (Display Settings). */
.node-knob-face {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  background: var(--knob-module-bg, #000000);
  pointer-events: auto;
  overflow: hidden;
  /* Same drag affordance as Bias .node-slider-readout */
  touch-action: none;
  cursor: var(--node-dot-cursor);
  user-select: none;
}

/* Native WebGL controller faces (Knob, Slider, Toggle, Momentary):
   modules/_shared/controller-face-gl.js draws everything on the canvas.
   DOM keeps only transparent hit / edit elements laid over layout rects
   (percent of the face box), so canvas tiles scale the zoom-1 layout. */
.node-controller-gl-face {
  position: relative;
  container-type: size;
  overflow: hidden;
}
.node-controller-gl-face > .node-controller-face-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none !important;
}
.node-controller-gl-face > .node-controller-face-hit {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: var(--node-dot-cursor);
  touch-action: none;
  user-select: none;
}
.node-controller-gl-face > button.node-controller-face-hit:focus-visible {
  outline: 1px solid var(--node-module-selected-stroke, #89bfc2);
  outline-offset: -1px;
}
.node-controller-gl-face > .node-controller-face-label {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  overflow: hidden;
  color: transparent;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}
.node-controller-gl-face > .node-controller-face-label[hidden] {
  display: none;
}
.node-controller-gl-face > .node-controller-face-label[data-editing="true"] {
  color: #f4f7f8;
  background: rgba(0, 0, 0, 0.82);
  outline: 1px solid rgba(255, 255, 255, 0.35);
  user-select: text;
  cursor: text;
}

/* Phosphor LED plate — all remaining space above the content-sized meta row. */
.node-pitch-detector-lcd {
  position: relative;
  flex: 1 1 auto;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  /* Same continuous plate — never a second background/panel. */
  background: transparent;
  border: none;
  border-radius: 0 !important;
  corner-shape: square;
  box-shadow: none;
}

.node-pitch-detector-lcd > .node-number-readout-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/*
 * Meta strip: mode (left) | cents (center, 8ve page) | Fid + value (right, all pages).
 * Fixed ch widths so cents / Fid never jitter the layout.
 */
.node-pitch-detector-fid {
  position: relative;
  flex: 0 0 auto;
  z-index: 5;
  box-sizing: border-box;
  display: grid;
  /* Left mode · center cents · right Fid (right-aligned cluster). */
  grid-template-columns: minmax(2.2em, 22%) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.25em;
  min-width: 0;
  height: auto;
  min-height: 1.15em;
  max-height: none;
  padding: 3px 0.4em 4px;
  margin: 0;
  border: none;
  border-top: none;
  border-radius: 0 !important;
  corner-shape: square;
  outline: none;
  box-shadow: none;
  background: transparent;
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.15;
  pointer-events: none;
  user-select: none;
}

.node-pitch-detector-fid .node-pitch-detector-hz {
  grid-column: 1;
  justify-self: start;
  align-self: center;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 0;
  height: auto;
  line-height: 1;
  background: transparent;
  color: rgba(160, 167, 176, 0.9);
  font: inherit;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: left;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  text-shadow: 0 0 0.35em rgba(0, 0, 0, 0.85), 0 1px 0 rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  cursor: var(--node-dot-cursor);
  appearance: none;
}

.node-pitch-detector-fid .node-pitch-detector-hz:hover,
.node-pitch-detector-fid .node-pitch-detector-hz:focus-visible {
  color: rgba(220, 230, 238, 0.98);
  outline: none;
}

/* Centered between mode and Fid (8ve / note-name page). */
.node-pitch-detector-fid .node-pitch-detector-cents {
  grid-column: 2;
  justify-self: center;
  /* Sign + 2 digits — fixed 3 mono cells (no ¢). */
  min-width: 3ch;
  width: 3ch;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 210, 140, 0.95);
  white-space: nowrap;
  line-height: 1.15;
  text-shadow: 0 0 0.35em rgba(0, 0, 0, 0.85), 0 1px 0 rgba(0, 0, 0, 0.55);
}

.node-pitch-detector-fid .node-pitch-detector-cents[hidden] {
  /* Keep grid cell so Fid does not jump when cents hide. */
  visibility: hidden;
  display: block !important;
}

/* Fid + value — right-aligned on every page. */
.node-pitch-detector-fid .node-pitch-detector-fid-group {
  grid-column: 3;
  display: grid;
  grid-template-columns: auto 6ch;
  align-items: center;
  justify-content: end;
  justify-self: end;
  column-gap: 0.35em;
  min-width: 0;
  line-height: 1.15;
}

.node-pitch-detector-fid .node-pitch-detector-k {
  justify-self: end;
  color: rgba(160, 167, 176, 0.82);
  font-size: 0.92em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  text-shadow: 0 0 0.35em rgba(0, 0, 0, 0.85), 0 1px 0 rgba(0, 0, 0, 0.55);
}

.node-pitch-detector-fid .node-pitch-detector-v {
  justify-self: stretch;
  min-width: 6ch;
  width: 6ch;
  overflow: hidden;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(160, 214, 228, 0.98);
  white-space: nowrap;
  line-height: 1;
  text-shadow: 0 0 0.35em rgba(0, 0, 0, 0.85), 0 1px 0 rgba(0, 0, 0, 0.55);
}

/*
 * LED face paint only. Layout (In | face | Out, shell, height, ports) comes
 * from shared LayoutB solid-module rules — no LED shell/column overrides.
 */
.dsp-node.led-layout {
  --node-led-face-color: rgb(0, 0, 0);
  --node-led-face-radius: 0px;
  --node-led-face-corner-shape: round;
  --node-led-face-glow: none;
}

/*
 * LED face stack (LayoutB center cell):
 *   bottom image (decoration) → lit lamp plate (fill%) → top image (decoration)
 * Flat lamp only — no decorative white-circle “highlight” stamp.
 */
.dsp-node.led-layout .node-led-face {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--node-scope-background, #000);
}

/* Legacy selector: ports live in the LayoutB side bands, not inside the face. */
.dsp-node.led-layout .node-led-face .node-port.input {
  pointer-events: auto;
}

.dsp-node.led-layout .node-led-lamp {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--node-led-face-radius, 0);
  corner-shape: var(--node-led-face-corner-shape, round);
  background: var(--node-led-face-color, rgb(0, 0, 0));
  box-shadow: var(--node-led-face-glow, none);
  pointer-events: none;
}

.dsp-node.led-layout .node-led-image-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.dsp-node.led-layout .node-led-image-top {
  z-index: 2;
}

.node-led-image-row {
  flex-wrap: wrap;
}

.node-led-image-filename {
  flex: 1 1 4em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.72rem;
}

/* Bug Button -- a compact solid module with a custom pointer surface. */
.dsp-node.bug-button-layout {
  width: calc((var(--node-grid-width) * var(--node-grid-width-units, 1)) - (var(--node-module-grid-inset) * 2));
  min-width: calc((var(--node-grid-width) * var(--node-grid-width-units, 1)) - (var(--node-module-grid-inset) * 2));
  height: calc(
    (var(--node-grid-height) * var(--node-grid-height-units, 1))
    - var(--node-module-grid-inset-y-total)
  );
  min-height: calc(
    (var(--node-grid-height) * var(--node-grid-height-units, 1))
    - var(--node-module-grid-inset-y-total)
  );
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Value LED / Value LCD / LCD Dot: face must not paint past the shell (shared no-params shell). */
.dsp-node.number-readout-layout.layout-b-no-params > .node-solid-module-shell,
.dsp-node.number-readout-layout .node-number-readout-face,
.dsp-node.value-lcd-layout.layout-b-no-params > .node-solid-module-shell,
.dsp-node.value-lcd-layout .node-number-readout-face,
.dsp-node.lcd-dot-layout.layout-b-no-params > .node-solid-module-shell,
.dsp-node.lcd-dot-layout .node-lcd-dot-face {
  overflow: hidden;
}

.node-parameter-row-hidden,
.node-parameter-row[hidden] {
  display: none !important;
}

/* Value LED / Value LCD / LCD Dot solid face — plate fills the shell center cell. */
.dsp-node.number-readout-layout .node-number-readout-face,
.dsp-node.number-readout-layout .node-module-scope-window,
.dsp-node.value-lcd-layout .node-number-readout-face,
.dsp-node.value-lcd-layout .node-module-scope-window,
.dsp-node.lcd-dot-layout .node-lcd-dot-face,
.dsp-node.lcd-dot-layout .node-module-scope-window {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Value LCD / LCD Dot shell: plate color comes from Display Settings (canvas). No fixed CSS bevel. */
.dsp-node.value-lcd-layout .node-value-lcd-face,
.dsp-node.lcd-dot-layout .node-lcd-dot-face,
.node-number-readout-face.node-value-lcd-face {
  background: var(--node-scope-background, rgb(241 255 232));
}

/* Ray Bouncer solid face — phosphor scope fills the shell center cell. */
.dsp-node.ray-bouncer-layout .node-ray-bouncer-face,
.dsp-node.ray-bouncer-layout .node-module-scope-window {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/*
 * LayoutB shell: ports beside face + equal 1fr jack bands.
 * Element always has both class names (legacy dual naming).
 */
:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell) {
  display: grid;
  grid-template-columns:
    minmax(0, max-content)
    minmax(0, 1fr)
    minmax(0, max-content);
  min-width: 0;
  /*
   * Height is owned by the article shell track (exact face gu).
   * Never min-height: calc(face) here — that fought the track and grew the face.
   */
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: visible;
  pointer-events: auto;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell) > .node-io-column {
  display: grid;
  grid-row: 1;
  /* Pack jacks flush (gap from --node-io-gap). Do not 1fr-stretch rows. */
  grid-auto-rows: minmax(var(--node-signal-port-height), auto);
  align-self: stretch;
  align-content: start;
  justify-content: stretch;
  justify-items: stretch;
  gap: var(--node-io-gap, 0px);
  padding: 0 !important;
  min-height: 0;
  max-height: 100%;
  height: 100%;
  position: relative;
  z-index: 8;
  overflow: visible;
  pointer-events: none;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell) > .node-io-column.input {
  grid-column: 1;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell) > .node-io-column.output {
  grid-column: 3;
}

/* Empty side collapses — face already spans the shell. */
:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell)
  > .node-io-column.node-layout-b-io-empty {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell) > .node-io-column .node-io-row {
  box-sizing: border-box;
  /* Fill the 1fr jack band. height:auto + absolute ports collapsed the row
     to 0px so max-height:100% on the crescent painted nothing. */
  height: 100%;
  min-height: 0;
  max-height: none;
  align-self: stretch;
  overflow: visible;
  pointer-events: auto;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell) > .node-io-column .node-io-label {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell)
  > .node-io-column .node-io-row:last-child {
  border-bottom: 0;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell)
  > .node-io-column.labels-hidden .node-io-label {
  display: none;
}

/* Jack-only band (no labels): fixed half-jack width, absolute flush ports. */
:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell)
  > .node-io-column.labels-hidden:not(.node-layout-b-io-empty) {
  width: var(--node-signal-port-width);
  min-width: var(--node-signal-port-width);
  max-width: var(--node-signal-port-width);
  padding: 0 !important;
  overflow: visible;
  justify-items: stretch;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell)
  > .node-io-column.labels-hidden .node-io-row {
  position: relative;
  width: 100%;
  padding: 0 !important;
  min-height: 0;
  overflow: visible;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell)
  > .node-io-column.labels-hidden .node-io-row .node-port {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  width: var(--node-signal-port-width);
  min-width: var(--node-signal-port-width);
  max-width: none;
  height: var(--node-signal-port-height);
  min-height: var(--node-signal-port-height);
  max-height: none;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell)
  > .node-io-column.labels-hidden .node-io-row.input .node-port {
  left: 0;
  right: auto;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell)
  > .node-io-column.labels-hidden .node-io-row.output .node-port {
  right: 0;
  left: auto;
}

.dsp-node.chrome-layout-b .node-solid-module-custom-ui,
.dsp-node.solid-module-layout .node-solid-module-custom-ui {
  overflow: hidden;
}

/* LayoutB shell face = center track (in | face | out). Scope to shell so
   article-level faces (MetamoduleLayout) are not shoved into column 2. */
:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell) > .node-solid-module-custom-ui {
  grid-column: 2;
  grid-row: 1;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.node-bug-button-face {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.82) 0 42%, rgba(0, 0, 0, 0.28) 70%, transparent 100%),
    rgba(3, 7, 10, 0.84);
}

.node-bug-button-control {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  container-type: size;
  color: inherit;
  cursor: var(--node-dot-cursor);
  background: transparent;
}

.node-bug-button-face.pressed {
  --node-bug-button-pressed-scale: 0.82;
}

.node-bug-button-emoji {
  position: absolute;
  left: calc(50% + (var(--node-bug-button-x, 0) * 50%));
  top: calc(50% - (var(--node-bug-button-y, 0) * 50%));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Size from the face between jack columns, not the whole module grid. */
  font-size: calc(min(100cqw, 100cqh) * 0.52 * var(--node-bug-button-size, 1));
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--node-bug-button-pressed-scale, 1));
}

.node-bug-button-emoji.editing {
  pointer-events: auto;
  cursor: text;
  outline: 1px solid rgba(127, 199, 217, 0.8);
  background: rgba(0, 0, 0, 0.45);
  user-select: text;
  -webkit-user-select: text;
}

/* Rendered-sample transport player -- custom phosphor player replacing the
   native <audio controls> row, inspired by the Music Player module: glowing
   waveform seek surface, playhead, monospace time readout. The <audio>
   element itself is the hidden playback engine. */
.node-patch-audio-player-row #audioPlayer {
  display: none;
}

.node-rendered-player {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding: 0;
  /* Left edge is the End cell's right edge -- no border and no radius there,
     so the two read as one continuous control surface rather than two
     widgets sitting next to each other. */
  border: 1px solid var(--line);
  border-left-width: 0;
  border-radius: 0 5px 5px 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(57, 230, 163, 0.05), transparent 70%),
    rgba(5, 9, 12, 0.92);
}

/* Play control uses shared .node-transport-play palette (grey / green / yellow). */
.node-rendered-player button {
  flex: 0 0 auto;
  width: 44px;
  height: 100%;
  min-height: 0;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  cursor: var(--node-dot-cursor);
}

.node-rendered-player button:disabled {
  opacity: 0.35;
  cursor: var(--node-default-cursor);
}

.node-rendered-player-wave {
  position: relative;
  flex: 1 1 auto;
  min-width: 120px;
  align-self: stretch;
  height: auto;
  min-height: 0;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(127, 199, 217, 0.16);
  background: rgba(2, 5, 7, 0.9);
  cursor: var(--node-dot-cursor);
  touch-action: none;
}

.node-rendered-player-wave canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.node-rendered-player-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: rgba(127, 199, 217, 0.95);
  box-shadow: 0 0 6px rgba(127, 199, 217, 0.8);
  pointer-events: none;
}

.node-rendered-player.empty .node-rendered-player-playhead {
  display: none;
}

.node-rendered-player-empty-hint {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: rgba(127, 199, 217, 0.45);
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  pointer-events: none;
}

.node-rendered-player.empty .node-rendered-player-empty-hint {
  display: flex;
}

.node-rendered-player-time {
  flex: 0 0 auto;
  align-self: center;
  min-width: 92px;
  text-align: right;
  color: rgba(127, 199, 217, 0.92);
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
}

/* XY Pad -- interactive pad body above the generic quantize/phase sliders
   (standard chrome, custom widget: same tier as audioPlayer's waveform).
   The module article is a GRID column (not flex), so the pad row must be
   granted the leftover height explicitly: header / pad / io / parameters.
   minmax(0, 1fr) lets the pad shrink cleanly on short modules too. */
/* Display Settings: reset residual plate on XY Pad. */
.node-xy-pad-reset-canvas-button {
  box-sizing: border-box;
  width: 100%;
  margin-top: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(127, 199, 217, 0.35);
  border-radius: 4px;
  color: rgba(220, 240, 245, 0.92);
  background: rgba(8, 16, 22, 0.9);
  font: inherit;
  cursor: var(--node-dot-cursor);
}

.node-xy-pad-reset-canvas-button:hover {
  border-color: rgba(127, 199, 217, 0.55);
  background: rgba(16, 28, 36, 0.95);
}

/* XY Pad face fills the solid shell center cell (shared solid contract). */
.node-xy-pad {
  box-sizing: border-box;
  /* No outer padding — padding used to create a dead ring that started
     module-drag instead of pad drag (hitbox felt "shifted"). */
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  background: #000;
}

.node-xy-pad-canvas {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  border: 0;
  /* Opaque phosphor plate only — drawn face is pure black + residual. */
  background: #000;
  cursor: var(--node-dot-cursor);
  touch-action: none;
}

/* x/y/gate are pad-driven internals -- their parameter rows exist (so the
   normal parameter sync/persistence path drives the DSP) but stay hidden. */
.dsp-node[data-node-type="xyPad"] .node-parameter-row[data-param="x"],
.dsp-node[data-node-type="xyPad"] .node-parameter-row[data-param="y"],
.dsp-node[data-node-type="xyPad"] .node-parameter-row[data-param="gate"] {
  display: none;
}

/* Portal inlet/outlet compact tiles. */
.dsp-node.portal-inlet-layout > .dsp-node-header,
.dsp-node.portal-outlet-layout > .dsp-node-header,
.dsp-node.portal-inlet-layout > .dsp-node-body,
.dsp-node.portal-outlet-layout > .dsp-node-body,
.dsp-node[data-node-type^="portalInlet"].io-hidden > .dsp-node-io-section,
.dsp-node[data-node-type^="portalOutlet"].io-hidden > .dsp-node-io-section {
  display: none;
}

.dsp-node[data-node-type="portalInletMono"],
.dsp-node[data-node-type="portalInletLeft"],
.dsp-node[data-node-type="portalInletRight"],
.dsp-node[data-node-type="portalOutletMono"],
.dsp-node[data-node-type="portalOutletLeft"],
.dsp-node[data-node-type="portalOutletRight"] {
  display: block;
  width: calc((var(--node-grid-width) * var(--node-grid-width-units, 1)) - (var(--node-module-grid-inset) * 2));
  min-width: calc((var(--node-grid-width) * var(--node-grid-width-units, 1)) - (var(--node-module-grid-inset) * 2));
  height: calc(
    (var(--node-grid-height) * var(--node-grid-height-units, 1))
    - var(--node-module-grid-inset-y-total)
  );
  min-height: calc(
    (var(--node-grid-height) * var(--node-grid-height-units, 1))
    - var(--node-module-grid-inset-y-total)
  );
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.dsp-node-header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  height: var(--node-header-height);
  display: grid;
  grid-template-rows: var(--node-header-title-row-height) minmax(0, 1fr);
  gap: var(--node-header-gap);
  padding:
    var(--node-header-padding-block-start)
    var(--node-header-padding-inline)
    var(--node-header-padding-block-end);
  background: transparent;
  border-radius: 0;
  corner-shape: square;
  overflow: hidden;
}

/* LayoutB solid (Knob, XY Pad, …): same title bar metrics/paint as LayoutA. */
.dsp-node.solid-module-layout > .dsp-node-header,
.dsp-node.chrome-layout-b.solid-module-layout > .dsp-node-header,
.dsp-node.chrome-layout-b > .dsp-node-header {
  width: 100%;
  min-width: 0;
  height: var(--node-header-height);
  margin: 0;
  padding:
    var(--node-header-padding-block-start)
    var(--node-header-padding-inline)
    var(--node-header-padding-block-end);
  background: transparent;
  border-radius: 0;
  corner-shape: square;
}

.dsp-node-body {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: min-content;
  justify-self: stretch;
  align-self: start;
  display: grid;
  align-content: start;
  grid-auto-rows: var(--node-body-row-height);
  gap: var(--node-body-row-gap);
  padding: 0;
  overflow: visible;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

/* Buttons-hidden used to rewrite article grid-template-rows. Stack is now
   applyNodeGraphModuleLayout; only header-height vars change. */
.dsp-node.buttons-hidden .dsp-node-body {
  align-content: start;
  grid-auto-rows: var(--node-body-row-height);
}


.node-module-scope-window {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--node-scope-background, #000);
  pointer-events: auto;
}

.node-module-scope-window-surface {
  position: absolute;
  inset: 0;
  background: var(--node-scope-background, #000);
  opacity: 1;
  pointer-events: none;
}

/* Raster RGB: padding is a plate gap; rounding / pill / squircle clip the screen. */
.node-module-scope-window[data-raster-rgb-screen] {
  --raster-rgb-inset: 0px;
  --raster-rgb-radius: 0px;
  --raster-rgb-corner-shape: round;
  box-sizing: border-box;
  padding: var(--raster-rgb-inset, 0px);
  overflow: hidden;
}

.node-module-scope-window[data-raster-rgb-screen] .node-raster-rgb-canvas,
.node-module-scope-window[data-raster-rgb-screen] .node-module-scope-local-fallback-canvas {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--raster-rgb-radius, 0px);
  corner-shape: var(--raster-rgb-corner-shape, round);
}

.node-raster-rgb-canvas {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: normal;
  pointer-events: none;
}

/*
 * Face canvases (phosphor + vector) paint an opaque plate + content.
 * MUST be normal blend: screen turns black/near-black into "see-through",
 * so module chrome (teal/green strokes) bled through as a green tint.
 */
.node-module-scope-local-fallback-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: normal;
  pointer-events: none;
}

/*
 * VECTOR Trace faces: continuous polylines into a face buffer.
 * - normal blend (opaque strokes)
 * - density < 1: always pixelated (chunky lo-fi buffer)
 * - density ≥ 1: default smooth; .pixelated-canvas-zoom (workspace zoom > 1)
 *   switches to crisp nearest-neighbor so zoom-in stays sharp, not mushy
 */
.node-module-scope-local-fallback-canvas.node-module-scope-vector-trace {
  mix-blend-mode: normal;
}

.node-number-readout-canvas,
.node-phosphor-light-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  /* Buffer = layout face × dpr. CSS zoom scales the bitmap; nearest-neighbor
     so zoom-in is pixellated, not vector-sharp. */
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.dsp-node.value-lcd-layout .node-number-readout-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.visual-scope-layout .node-module-square-scope-window {
  height: 100%;
  min-height: 0;
  align-self: stretch;
}

.node-filter-curve-display {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: calc(var(--node-grid-height) * var(--node-module-display-height-units, 5));
  min-height: calc(var(--node-grid-height) * 2);
  align-self: stretch;
  overflow: hidden;
  border-top: 1px solid rgba(128, 224, 224, 0.16);
  border-bottom: 1px solid rgba(128, 224, 224, 0.16);
  background: #020609;
  /* Display-only face — must not steal pointer from module drag / knobs. */
  pointer-events: none;
}

.node-filter-curve-canvas,
.node-softwave-osc-canvas {
  display: block;
  position: static;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

/* RGB Shape face — LayoutA display row; vector canvas painted on rAF. */
.dsp-node.rgb-shape-layout .node-rgb-shape-face,
.dsp-node.rgb-shape-layout .node-module-scope-window.node-rgb-shape-face {
  width: 100%;
  height: var(--node-module-scope-height);
  min-height: 0;
  overflow: hidden;
  background: #000000;
}

.node-rgb-shape-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.node-wall-room-display {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid rgba(128, 224, 224, 0.16);
  border-bottom: 1px solid rgba(128, 224, 224, 0.16);
  background: #020609;
}

.node-wall-room-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The waveform reads as its own sleek panel inset in the module: its own 1px
   phosphor-green border, then a pure-black gap out to the module edge.
   --sample-waveform-inset is written per node from the draw path
   (applyNodeGraphPhosphorWaveformPanelShape) so the "Edge Spacing" setting
   resolves against the live cell size and is quantized to whole pixels.
   The gap used to be a box-shadow ring on a margin-inset panel, which meant
   the black followed the panel's own rounded/squircle outline -- at any
   corner radius the four corners of the cell fell outside the ring and
   leaked the module's grey body colour through. Now the display element
   itself is the full, always-rectangular cell painted pure black, the gap is
   padding, and the border/radius/corner-shape live on the canvas inside it.
   Same measurements (inset on each side + a 1px border), but the revealed
   background is black at every corner shape. */
.node-sample-waveform-display {
  --sample-waveform-inset: 0px;
  --sample-waveform-label-inset: 0px;
  --sample-waveform-radius: 0px;
  --sample-waveform-corner-shape: round;
  /* Written per node from applyNodeGraphSampleWaveformPanelShape, tracking
     the BG Hue setting. The fallback is the hue-140 default. */
  --sample-waveform-border-color: hsl(140 100% 68% / 0.16);
  position: relative;
  /* Above .dsp-node::after plate mask (same contract as .node-module-scope-window). */
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: var(--sample-waveform-inset);
  overflow: hidden;
  background: #000;
}

.node-sample-waveform-canvas {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 1px solid var(--sample-waveform-border-color);
  border-radius: var(--sample-waveform-radius);
  corner-shape: var(--sample-waveform-corner-shape);
  background: #000;
  cursor: var(--node-dot-cursor);
  touch-action: none;
}

.node-sample-waveform-canvas.dragging {
  cursor: var(--node-dot-cursor);
}

.node-phosphillator-draw-display {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid rgba(90, 255, 150, 0.16);
  border-bottom: 1px solid rgba(90, 255, 150, 0.16);
  background: #020a06;
}

.node-phosphillator-draw-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

/*
 * Workspace zoom > 2.5 → nearest-neighbor upscale of face bitmaps.
 * At 2.5 and below the browser scales smoothly (bilinear). Closer than that,
 * nearest-neighbor doubles stray columns and looks torn.
 * Faces paint at layout × dpr (resource-agnostic zoom): app zoom shows defined
 * pixels instead of re-rendering denser detail. Soft Fractal is included —
 * fixed GPU buffer, CSS pixelate on zoom. Asciiscope Sharp keeps auto inline.
 */
/* One marker class (public/lib/visual/display-canvas.js) instead of a per-face list. */
.node-graph-workspace.pixelated-canvas-zoom .node-display-canvas {
  image-rendering: pixelated;
}

/* Display canvases at pixel density < 1 (module toggles the class; JS never sets image-rendering). */
.node-display-canvas.display-canvas-pixelated,
.display-canvas-pixelated {
  image-rendering: pixelated;
}

/* Pinned smooth (Asciiscope Sharp): beats the workspace zoom pixelation. */
.node-graph-workspace.pixelated-canvas-zoom .node-display-canvas.display-canvas-smooth,
.node-display-canvas.display-canvas-smooth {
  image-rendering: auto;
}

/*
 * Matrix Sharp / Asciiscope Sharp set image-rendering:auto inline so they stay
 * smooth under zoom. Pixel mode sets pixelated inline. Do not force here.
 */
.node-graph-workspace.pixelated-canvas-zoom .node-asciiscope-canvas {
  /* Leave to JS: Sharp = auto, Pixel = pixelated */
}

/*
 * Spectrogram: default CSS smooth scale at zoom 1 (permanent buffer is
 * layout×dpr). Pixelate when workspace zoom > 2.5, like other faces.
 */
.node-module-scope-local-fallback-canvas.node-spectrogram-canvas {
  image-rendering: auto;
}
.node-graph-workspace.pixelated-canvas-zoom .node-module-scope-local-fallback-canvas.node-spectrogram-canvas {
  image-rendering: pixelated;
}


.node-module-shop-body {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: calc(var(--node-grid-size) * 0.22);
  min-width: 0;
  min-height: 0;
  padding: calc(var(--node-grid-size) * 0.28);
}

.node-module-shop-title {
  display: grid;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: rgba(217, 236, 240, 0.86);
  font: 700 0.68rem var(--node-mono-font);
  letter-spacing: 0;
  text-transform: uppercase;
}

.node-module-shop-open-button {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding-inline: calc(var(--node-grid-size) * 0.18);
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(112, 201, 214, 0.18), rgba(7, 16, 19, 0.78)),
    rgba(1, 5, 8, 0.92);
  color: var(--text);
  font: 700 clamp(0.66rem, calc(var(--node-grid-size) * 0.39), 0.78rem) var(--node-mono-font);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.node-module-shop-open-button:hover,
.node-module-shop-open-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 78%, white 12%);
  background:
    linear-gradient(180deg, rgba(112, 201, 214, 0.26), rgba(7, 16, 19, 0.72)),
    rgba(1, 5, 8, 0.95);
}

.node-module-home-body {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: calc(var(--node-grid-size) * 0.22);
  min-width: 0;
  min-height: 0;
  padding: calc(var(--node-grid-size) * 0.28);
}

.node-module-home-title {
  display: grid;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: rgba(220, 238, 230, 0.86);
  font: 700 0.76rem var(--node-mono-font);
  letter-spacing: 0;
  text-transform: uppercase;
}

.node-module-home-open-button {
  width: 100%;
  min-width: 0;
  min-height: calc(var(--node-grid-size) * 1.12);
  padding-inline: calc(var(--node-grid-size) * 0.18);
  border: 1px solid rgba(112, 214, 169, 0.42);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(112, 214, 169, 0.2), rgba(7, 17, 12, 0.8)),
    rgba(1, 6, 5, 0.92);
  color: var(--text);
  font: 700 clamp(0.66rem, calc(var(--node-grid-size) * 0.39), 0.78rem) var(--node-mono-font);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.node-module-home-open-button:hover,
.node-module-home-open-button:focus-visible {
  border-color: rgba(142, 238, 190, 0.72);
  background:
    linear-gradient(180deg, rgba(112, 214, 169, 0.3), rgba(7, 17, 12, 0.74)),
    rgba(1, 6, 5, 0.96);
}

/* BADVAL Monitor LayoutA face — fills the display-height row. */
.node-badval-monitor-body {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 8px 10px;
  border-top: 1px solid rgba(128, 224, 224, 0.16);
  border-bottom: 1px solid rgba(128, 224, 224, 0.16);
  background:
    linear-gradient(180deg, rgba(12, 18, 22, 0.88), rgba(2, 4, 6, 0.96)),
    #020609;
  color: rgba(230, 242, 246, 0.88);
  text-align: center;
  overflow: hidden;
}

.node-badval-monitor-body strong {
  color: rgba(160, 190, 200, 0.9);
  font: 800 0.95rem/1.1 var(--node-mono-font);
  letter-spacing: 0.06em;
}

.node-badval-monitor-body.is-clear strong {
  color: rgba(104, 255, 176, 0.94);
  text-shadow: 0 0 12px rgba(80, 220, 140, 0.35);
}

.node-badval-monitor-body.is-bad {
  border-color: rgba(255, 90, 70, 0.55);
  background:
    linear-gradient(180deg, rgba(64, 12, 10, 0.55), rgba(18, 2, 2, 0.96)),
    #1a0404;
  animation: node-badval-monitor-pulse 0.9s ease-in-out infinite alternate;
}

.node-badval-monitor-body.is-bad strong {
  color: rgba(255, 110, 96, 0.98);
  text-shadow: 0 0 14px rgba(255, 60, 40, 0.55);
}

.node-badval-monitor-body span {
  color: rgba(210, 230, 236, 0.72);
  font: 700 0.68rem/1.15 var(--node-mono-font);
}

.node-badval-monitor-body.is-bad [data-badval-reason] {
  color: rgba(255, 200, 180, 0.96);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.node-badval-monitor-hint {
  margin-top: 2px;
  color: rgba(160, 180, 190, 0.45) !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

@keyframes node-badval-monitor-pulse {
  from {
    box-shadow: inset 0 0 0 0 rgba(255, 60, 40, 0);
  }
  to {
    box-shadow: inset 0 0 18px 0 rgba(255, 50, 30, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .node-badval-monitor-body.is-bad {
    animation: none;
  }
}

.node-speaker-protection-body {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 0;
  padding: 8px;
  border-block: 1px solid rgba(255, 95, 81, 0.16);
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 95, 81, 0.16), transparent 54%),
    linear-gradient(180deg, rgba(8, 11, 14, 0.74), rgba(0, 0, 0, 0.86));
  color: rgba(244, 249, 250, 0.9);
  text-align: center;
}

.node-speaker-protection-body strong {
  color: rgba(104, 255, 176, 0.92);
  font: 800 0.92rem var(--node-mono-font);
  letter-spacing: 0;
}

.node-speaker-protection-body.tripped strong {
  color: rgba(255, 95, 81, 0.96);
}

.node-speaker-protection-body span {
  color: rgba(216, 247, 255, 0.72);
  font: 700 0.64rem var(--node-mono-font);
  line-height: 1.1;
}

.node-screen-space-shader-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
  min-height: 0;
  padding: 8px;
  border-block: 1px solid rgba(143, 231, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(12, 18, 22, 0.88), rgba(4, 7, 10, 0.92)),
    rgba(0, 0, 0, 0.72);
}

.node-screen-space-shader-source {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  resize: none;
  border: 1px solid rgba(143, 231, 255, 0.2);
  border-radius: 4px;
  padding: 7px;
  background: rgba(1, 4, 7, 0.78);
  color: var(--text);
  font: 11px/1.35 var(--node-mono-font);
  outline: none;
}

.node-screen-space-shader-source:focus {
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}

.node-screen-space-shader-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(216, 247, 255, 0.72);
  font: 700 0.62rem/1 var(--node-mono-font);
}

.node-screen-space-shader-footer button {
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(143, 231, 255, 0.25);
  border-radius: 4px;
  background: rgba(143, 231, 255, 0.08);
  color: var(--text);
  font: 700 0.62rem/1 var(--node-mono-font);
}


/* Step Grid's CSS lives in public/modules/stepGrid/step-grid.css now,
   loaded via its own <link> tag -- not here. */

/*
 * LayoutB labeled side columns (.layout-b-port-labels):
 * jack flush outer edge, short label toward face — not under the half-jack.
 */
:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell).layout-b-port-labels
  > .node-io-column:not(.labels-hidden):not(.node-layout-b-io-empty) {
  min-width: calc(
    var(--node-signal-port-width)
    + 3px
    + (var(--node-io-label-min-ch, 1) * 0.95ch)
    + 4px
  );
  width: max-content;
  max-width: none;
  overflow: visible;
  justify-items: stretch;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell).layout-b-port-labels
  > .node-io-column:not(.labels-hidden) .node-io-row {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  min-height: var(--node-signal-port-height);
  overflow: visible;
  padding: 0 !important;
  box-sizing: border-box;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell).layout-b-port-labels
  > .node-io-column.input:not(.labels-hidden) .node-io-row {
  flex-direction: row;
  justify-content: flex-start;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell).layout-b-port-labels
  > .node-io-column.output:not(.labels-hidden) .node-io-row {
  flex-direction: row;
  justify-content: flex-end;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell).layout-b-port-labels
  > .node-io-column:not(.labels-hidden) .node-port {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  flex: 0 0 var(--node-signal-port-width);
  width: var(--node-signal-port-width);
  min-width: var(--node-signal-port-width);
  max-width: var(--node-signal-port-width);
  height: var(--node-signal-port-height);
  /* Never max-height:100% — that clipped the crescent stroke when the row
     was shorter than the jack diameter (looked like interior clipping). */
  min-height: var(--node-signal-port-height);
  max-height: none;
  z-index: 2;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell).layout-b-port-labels
  > .node-io-column:not(.labels-hidden) .node-io-label {
  /* Layout only. Typography comes from the base .node-io-label rule (single
     owner; smoke_test IO label typography contract). */
  display: block;
  flex: 0 1 auto;
  min-width: 0.85ch !important;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
  pointer-events: none;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell).layout-b-port-labels
  > .node-io-column.input:not(.labels-hidden) .node-io-label {
  text-align: left;
  padding-left: 3px;
}

:is(.node-solid-module-shell, .node-module-chrome-layout-b-shell).layout-b-port-labels
  > .node-io-column.output:not(.labels-hidden) .node-io-label {
  text-align: right;
  padding-right: 3px;
}

.node-module-graph-display {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  border-top: 1px solid rgba(128, 224, 224, 0.16);
  border-bottom: 1px solid rgba(128, 224, 224, 0.16);
  background: #020609;
  /* App default tiny + (no grab/hand/move from shell drag / workspace pan). */
  cursor: var(--node-default-cursor);
}

.node-module-graph-display,
.node-module-graph-display * {
  cursor: var(--node-default-cursor) !important;
}

.node-module-graph-display:focus-visible {
  outline: 1px solid rgba(255, 236, 181, 0.58);
  outline-offset: -2px;
}

.node-module-graph-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Canvas tiles are free-sized. The plot viewBox is square, so stretch it
   to the tile and the curve shears. Fit the largest square instead. */
.node-layout-canvas-tile .node-module-graph-display,
.node-metamodule-canvas-stage .node-module-graph-display {
  container-type: size;
  display: grid;
  place-items: center;
}

.node-layout-canvas-tile .node-module-graph-svg,
.node-metamodule-canvas-stage .node-module-graph-svg {
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
}

.node-module-graph-svg :is(
  rect,
  line,
  path,
  ellipse
) {
  vector-effect: non-scaling-stroke;
}

.node-module-graph-frame {
  fill: rgba(0, 0, 0, 0.26);
  stroke: rgba(112, 206, 200, 0.16);
  stroke-width: 0.8;
}

.node-module-graph-axis {
  stroke: rgba(218, 235, 226, 0.14);
  stroke-width: 0.6;
}

/* Step Graph: vertical guides for each step boundary (count from Steps param). */
.node-module-graph-step-line {
  stroke: rgba(127, 199, 217, 0.22);
  stroke-width: 0.7;
  pointer-events: none;
}

/* Phase probe: dim like node chrome; full only when the hit target is hot. */
.node-module-graph-cursor {
  stroke: rgba(255, 236, 181, 0.92);
  stroke-width: 0.9;
  opacity: 0.42;
  pointer-events: none;
}

.node-module-graph-cursor.is-phase-hot {
  opacity: 1;
}

.node-module-graph-cursor-hit {
  stroke: transparent;
  stroke-width: 7;
  pointer-events: all;
  touch-action: none;
}

.node-module-graph-cursor-value-guide {
  stroke: rgba(255, 236, 181, 0.22);
  stroke-dasharray: 2.2 2.8;
  stroke-width: 0.7;
  opacity: 0.42;
  pointer-events: none;
}

.node-module-graph-cursor-value-guide.is-phase-hot {
  opacity: 1;
}

/* Final-phase ghost -- mirrors .node-module-graph-cursor (cream phase probe)
   but tracks the engine's actual sample X (__GraphPhase: Rate LFO, Phase, and
   Input-mode CV). Purple like the XY pad ghost puck so it stays readable over
   the teal curve. Hidden until syncNodeGraphGraphLivePlayheads() has a live
   sample and adds .live; pointer-events none (read-only). */
.node-module-graph-playhead,
.node-module-graph-phase-ghost {
  stroke: rgba(177, 132, 255, 0.78);
  stroke-width: 0.9;
  stroke-dasharray: 2.4 2.6;
  pointer-events: none;
  opacity: 0;
}

.node-module-graph-playhead.live,
.node-module-graph-phase-ghost.live {
  opacity: 1;
}

.node-module-graph-curve {
  fill: none;
  stroke: rgba(92, 232, 212, 0.92);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.node-module-graph-control-line {
  fill: none;
  stroke: rgba(0, 239, 175, 0.52);
  stroke-dasharray: 2 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.7;
}

.node-module-graph-shape-badge {
  fill: rgba(210, 231, 224, 0.58);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 4.4px;
  letter-spacing: 0;
  pointer-events: all;
  touch-action: none;
  user-select: none;
}

.node-module-graph-shape-badge.selected {
  fill: rgba(255, 241, 169, 0.96);
}

/*
 * Graph face chrome policy (minimal eye strain):
 *  • idle: only phase line, curve, dotted control polygon
 *  • hover a node or its contour ring: show THAT pair only, both dim
 *  • no “selected = bright” state on the face
 */
.node-module-graph-node {
  fill: rgba(246, 246, 218, 0.72);
  stroke: rgba(7, 10, 13, 0.75);
  stroke-width: 0.7;
  pointer-events: none;
  opacity: 0;
}

.node-module-graph-node.is-hot {
  opacity: 0.42;
}

/* Face hover: show every value point + contour handle (edit chrome). */
.node-module-graph-display.is-hover-reveal .node-module-graph-node {
  opacity: 0.34;
}

.node-module-graph-display.is-hover-reveal .node-module-graph-node.is-hot {
  opacity: 0.72;
}

/* Step Graph: empty-circle curvature ring (paired with its filled node). */
.node-module-graph-contour-handle {
  fill: none;
  stroke: rgba(255, 236, 181, 0.7);
  stroke-width: 0.95;
  pointer-events: all;
  touch-action: none;
  opacity: 0;
}

.node-module-graph-contour-handle.is-hot {
  opacity: 0.48;
}

.node-module-graph-display.is-hover-reveal .node-module-graph-contour-handle {
  opacity: 0.36;
}

.node-module-graph-display.is-hover-reveal .node-module-graph-contour-handle.is-hot {
  opacity: 0.78;
}

/* Invisible hit targets always receive pointer events so hover can resolve. */
.node-module-graph-node-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 0;
  pointer-events: all;
  touch-action: none;
}

.dsp-node-graph-input-section {
  display: grid;
  grid-auto-rows: var(--node-body-row-height);
  gap: var(--node-body-row-gap);
  min-width: 0;
}

.node-graph-input-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--node-port-column-width) minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  height: var(--node-body-row-height);
  color: var(--muted);
  font-size: 0.68rem;
}

.node-graph-input-label {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--node-mod-input-fill) 72%, var(--muted));
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

/* Smooth/Step Graph Module Settings editor removed (face-only). */

.node-image-body {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 6px;
  display: grid;
}

.node-image-preview {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: end start;
  overflow: hidden;
  border: 1px solid rgba(141, 225, 223, 0.18);
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.035) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.035) 75%),
    rgba(0, 0, 0, 0.72);
  background-position: 0 0, 6px 6px, center;
  background-size: 12px 12px, 12px 12px, contain;
  background-repeat: repeat, repeat, no-repeat;
}

.node-image-preview[data-has-image="true"] {
  background-size: 12px 12px, 12px 12px, contain;
}

.node-image-status {
  max-width: 100%;
  box-sizing: border-box;
  padding: 3px 5px;
  overflow: hidden;
  color: rgba(222, 250, 246, 0.78);
  background: rgba(0, 0, 0, 0.58);
  font-size: 10px;
  line-height: 1.1;
  text-overflow: clip;
  white-space: nowrap;
}

.node-canvas-body {
  box-sizing: border-box;
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

.node-canvas-preview {
  position: relative;
  container-type: size;
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--node-canvas-face-background, #000000);
}

.node-canvas-preview[data-canvas-face-background="checkerboard"],
.node-canvas-script-preview[data-canvas-face-background="checkerboard"] {
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.12) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.12) 75%),
    #050607;
  background-position: 0 0, 8px 8px, center;
  background-size: 16px 16px, 16px 16px, auto;
}

.node-canvas-frame {
  position: relative;
  display: grid;
  width: min(100cqw, calc(100cqh * var(--node-canvas-aspect, 1)));
  height: min(100cqh, calc(100cqw / var(--node-canvas-aspect, 1)));
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--node-canvas-screen-background, #000000);
}

.node-canvas-frame[data-canvas-screen-fit="stretch"] {
  width: 100%;
  height: 100%;
}

.node-canvas-frame[data-canvas-screen-background="checkerboard"] {
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.12) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.12) 75%),
    #050607;
  background-position: 0 0, 8px 8px, center;
  background-size: 16px 16px, 16px 16px, auto;
}

.node-canvas-layers {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.node-canvas-layer {
  position: absolute;
  display: grid;
  left: var(--node-canvas-layer-x, 50%);
  top: var(--node-canvas-layer-y, 50%);
  width: 36%;
  height: 36%;
  opacity: var(--node-canvas-layer-opacity, 1);
  place-items: center;
  border: 1px solid rgba(243, 241, 236, 0.18);
  border-radius: 3px;
  color: rgba(243, 241, 236, 0.76);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 800;
  transform:
    translate(-50%, -50%)
    rotate(var(--node-canvas-layer-rotation, 0deg))
    scale(var(--node-canvas-layer-scale, 1));
  transform-origin: center;
  background:
    linear-gradient(135deg, hsl(var(--node-canvas-layer-hue, 190) 76% 58% / 0.24), hsl(calc(var(--node-canvas-layer-hue, 190) + 34) 72% 40% / 0.12));
  box-shadow: 0 0 12px hsl(var(--node-canvas-layer-hue, 190) 80% 60% / 0.16);
}

.node-canvas-status {
  display: none;
}

.node-module-scope-analyzer {
  position: absolute;
  z-index: 4;
  top: 4px;
  left: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 6px;
  max-width: calc(100% - 10px);
  color: rgba(215, 243, 245, 0.72);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.46rem;
  line-height: 1.05;
  letter-spacing: 0;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(73, 205, 226, 0.42);
  text-transform: uppercase;
}

.node-module-scope-analyzer[hidden] {
  display: none;
}

.node-module-scope-analyzer span {
  display: inline-block;
  min-width: 0;
  padding: 1px 3px;
  border: 1px solid rgba(112, 214, 224, 0.12);
  border-radius: 3px;
  background: rgba(2, 5, 8, 0.48);
  white-space: nowrap;
}

.node-module-scope-analyzer.gain-scope-analyzer {
  inset: 4px 5px;
  display: block;
  max-width: none;
}

.node-module-scope-analyzer.gain-scope-analyzer span {
  position: absolute;
}

.node-module-scope-analyzer.gain-scope-analyzer span[data-scope-metric="gain"] {
  top: 0;
  left: 0;
}

.node-module-scope-analyzer.gain-scope-analyzer span[data-scope-metric="in"] {
  top: 0;
  right: 0;
}

.node-module-scope-analyzer.gain-scope-analyzer span[data-scope-metric="pk"] {
  bottom: 0;
  left: 0;
}

.node-module-scope-analyzer.gain-scope-analyzer span[data-scope-metric="rms"] {
  right: 0;
  bottom: 0;
}

.dsp-node:has(> .node-text-box-body),
.dsp-node:has(> .node-module-under-construction) {
  /* Mounted in #nodeGraphAnnotationNodes under #nodeWireSvg (B-055).
     Do not set overflow:hidden — that clips the plate outline on ::before.
     Text clipping stays on .node-text-box-body. */
  overflow: visible;
  z-index: 2;
}

.node-text-box-body {
  display: grid;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  align-self: stretch;
  overflow: hidden;
  contain: paint;
  padding: 0;
  /* Keep the rgba fallback for browsers without color-mix; the widget also
     writes --node-text-box-bg directly for the same paint path. */
  background: var(--node-text-box-bg, rgba(2, 4, 7, 0.78));
  background-color: color-mix(
    in srgb,
    var(--node-text-box-bg-color, #020407)
      calc(var(--node-text-box-bg-alpha, 0.78) * 100%),
    transparent
  );
}

/* Title + buttons off: face fills the plate. Match plate radius/stroke so the
   square face fill cannot poke past the rounded outline (B-064). */
.dsp-node.buttons-hidden.title-hidden > .node-text-box-body,
.dsp-node.title-hidden.buttons-hidden > .node-text-box-body,
.node-graph-workspace.module-buttons-hidden .dsp-node.title-hidden > .node-text-box-body {
  border-radius: inherit;
  corner-shape: inherit;
}

.node-text-box-body[hidden] {
  display: grid !important;
}

/* Alpha zero must reveal the workspace, not the module plate underneath.
   Plate + face share the same bg color SSOT (--node-text-box-bg-color) so
   editor stroke/fill and perform/canvas tiles (face only) stay in agreement. */
.dsp-node:has(> .node-text-box-body)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--node-module-frame-radius);
  corner-shape: var(--node-module-corner-shape, squircle);
  pointer-events: none;
  background: rgba(2, 4, 7, var(--node-text-box-bg-alpha, 0.78));
  background: color-mix(
    in srgb,
    var(--node-text-box-bg-color, #020407)
      calc(var(--node-text-box-bg-alpha, 0.78) * 100%),
    transparent
  );
}

/* Layout canvas / perform / screen-solo: only the face moves to the tile.
   Keep the same painted background (no plate ::before on the canvas). */
.node-layout-canvas-tile > .node-text-box-body,
.node-metamodule-canvas-stage .node-layout-canvas-tile > .node-text-box-body,
body.node-screen-solo-active .node-screen-solo-face.node-text-box-body {
  background: var(--node-text-box-bg, rgba(2, 4, 7, 0.78));
  background-color: color-mix(
    in srgb,
    var(--node-text-box-bg-color, #020407)
      calc(var(--node-text-box-bg-alpha, 0.78) * 100%),
    transparent
  );
  border-radius: inherit;
}

.node-text-box-body[data-text-box-background-alpha="0"] {
  background: transparent !important;
  background-color: transparent !important;
}

.node-text-box-input {
  --node-text-box-base-padding: 0px;
  display: block;
  width: 100%;
  min-width: 0;
  /* Auto height so Vertical translate moves the *full* text block.
     The face (.node-text-box-body / .dsp-node) is the only clip window. */
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  padding: var(--node-text-box-base-padding);
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--node-module-primary-text-color);
  color: var(--node-text-box-fg, var(--node-module-primary-text-color));
  -webkit-text-fill-color: currentColor;
  caret-color: var(--node-text-box-fg, var(--node-module-primary-text-color));
  opacity: 1;
  font-family: var(
    --node-text-box-font,
    "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace
  );
  font-weight: var(--node-text-box-font-weight, 400);
  font-size: calc(
    var(--node-grid-size) * 0.36 * var(--node-text-box-font-scale, 1)
  );
  line-height: var(--node-text-box-line-height, 1.2);
  overflow: visible;
  transform: translateY(var(--node-text-box-content-offset, 0px));
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.node-text-box-input::-webkit-scrollbar {
  display: none;
}

/* Each hard line (Enter) is one block child of the field (text-box-widget.js).
   Wrapped lines inside a block keep Line height; the gap between blocks adds
   New line height − Line height, so a hard newline advances New line height. */
.node-text-box-input > div + div {
  margin-top: calc(
    (
      var(--node-text-box-new-line-height, var(--node-text-box-line-height, 1.2))
      - var(--node-text-box-line-height, 1.2)
    ) * 1em
  );
}

.node-text-box-input[data-text-box-mode="singleLine"],
.node-text-box-input[data-text-box-mode-css="singleLine"] {
  white-space: nowrap;
}

.node-text-box-input[data-text-box-mode="multiline"],
.node-text-box-input[data-text-box-mode="fill"],
.node-text-box-input[data-text-box-mode-css="multiline"] {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.node-text-box-input:focus {
  border-color: color-mix(in srgb, var(--node-input-stroke) 56%, transparent);
}

/* Canvas tile is the text box. Type scales with the short side so glyphs
   stay square. The field fills the tile, so multiline wraps to that width. */
.node-layout-canvas-tile > .node-text-box-body,
.node-metamodule-canvas-stage .node-layout-canvas-tile > .node-text-box-body,
body.node-screen-solo-active .node-screen-solo-face.node-text-box-body {
  container-type: size;
  container-name: textbox;
}

.node-layout-canvas-tile > .node-text-box-body > .node-text-box-input,
.node-metamodule-canvas-stage .node-layout-canvas-tile > .node-text-box-body > .node-text-box-input,
body.node-screen-solo-active .node-screen-solo-face.node-text-box-body > .node-text-box-input {
  height: 100%;
  overflow: auto;
  font-size: calc(
    var(--node-text-box-source-font-px, 10.08px)
    * var(--node-text-box-font-scale, 1)
    * 100cqmin / var(--node-text-box-source-min, 100)
  );
}

.node-header-actions,
.node-header-title-row {
  align-items: center;
  min-width: 0;
  gap: 5px;
}

.node-header-actions {
  display: grid;
  align-self: stretch;
  align-items: stretch;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0;
  justify-content: start;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  background: rgba(17, 20, 24, 0.88);
}

.node-header-timing-widgets {
  box-sizing: border-box;
  display: grid;
  /* Top-bar DOM order after Start/End leave this grid (six children, six tracks):
     BPM | Beats | Unit | patch name | Speed | Smooth Time.
     Column 4 is the only flexible track. Compact tracks share one fixed max
     so none of them can grow into the wide column. */
  --node-header-timing-compact: 6.75rem;
  grid-template-columns:
    minmax(0, var(--node-header-timing-compact))
    minmax(0, var(--node-header-timing-compact))
    minmax(0, var(--node-header-timing-compact))
    minmax(7rem, 1fr)
    minmax(0, var(--node-header-timing-compact))
    minmax(0, var(--node-header-timing-compact));
  grid-auto-flow: row;
  grid-auto-columns: minmax(0, var(--node-header-timing-compact));
  min-width: 0;
  width: 100%;
  height: 100%;
  border-inline: 1px solid rgba(127, 199, 217, 0.08);
}

/* Assign columns by control, not source order. A DOM reorder cannot hand the
   wide track to Speed or Smooth Time. Scoped to the top bar; Command Center
   is a flex column and does not use this grid. */
#nodePatchTimingControls .node-header-timing-widgets > .node-header-bpm-field {
  grid-column: 1;
  grid-row: 1;
}

#nodePatchTimingControls .node-header-timing-widgets > .node-header-timing-field:has([data-timing-field="timeSignatureNumerator"]) {
  grid-column: 2;
  grid-row: 1;
}

#nodePatchTimingControls .node-header-timing-widgets > .node-header-timing-field:has([data-timing-field="timeSignatureDenominator"]) {
  grid-column: 3;
  grid-row: 1;
}

#nodePatchTimingControls .node-header-timing-widgets > .node-header-patch-title {
  grid-column: 4;
  grid-row: 1;
  max-width: none;
}

#nodePatchTimingControls .node-header-timing-widgets > .node-header-speed-placeholder {
  grid-column: 5;
  grid-row: 1;
}

#nodePatchTimingControls .node-header-timing-widgets > .node-header-smoothing-field {
  grid-column: 6;
  grid-row: 1;
}

#nodePatchTimingControls .node-header-timing-widgets > .node-header-timing-field {
  max-width: var(--node-header-timing-compact);
}

.node-header-patch-title {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 0.65rem;
  border: 0;
  border-inline: 1px solid rgba(127, 199, 217, 0.12);
  background: rgba(2, 4, 7, 0.92);
  color: rgba(243, 251, 251, 0.94);
  font-family: var(--node-header-title-font-family, "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace);
  font-size: clamp(0.9rem, calc(var(--node-toolbar-row-height) * 0.4), 1.3rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-align: center;
  text-transform: none;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: text;
  user-select: none;
  -webkit-user-select: none;
}
.node-header-patch-title.is-fallback {
  color: rgba(243, 251, 251, 0.55);
  font-weight: 600;
}
.node-header-patch-title-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.1rem 0.2rem;
  border: 1px solid rgba(127, 199, 217, 0.45);
  border-radius: 3px;
  background: rgba(8, 12, 16, 0.96);
  color: inherit;
  font: inherit;
  text-align: center;
}
.node-patch-name-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
}
.node-patch-name-dialog-card {
  box-sizing: border-box;
  width: min(28rem, calc(100vw - 2rem));
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(127, 199, 217, 0.28);
  border-radius: 8px;
  background: #14181c;
  color: rgba(243, 251, 251, 0.94);
  font: 0.95rem/1.35 system-ui, sans-serif;
}
.node-patch-name-dialog-card p {
  margin: 0;
}
.node-patch-name-dialog-card label {
  display: grid;
  gap: 0.3rem;
}
.node-patch-name-dialog-card input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(127, 199, 217, 0.35);
  border-radius: 4px;
  background: #0c1014;
  color: inherit;
  font: inherit;
}
.node-patch-name-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.node-patch-name-dialog-actions button {
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(127, 199, 217, 0.35);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.node-patch-save-menu {
  position: fixed;
  z-index: 90;
  display: grid;
  min-width: 12.5rem;
  padding: 0.25rem;
  border: 1px solid rgba(127, 199, 217, 0.28);
  border-radius: 6px;
  background: #14181c;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.node-patch-save-menu button {
  display: block;
  width: 100%;
  padding: 0.4rem 0.7rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(243, 251, 251, 0.94);
  font: 0.9rem/1.3 system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.node-patch-save-menu button:hover:not(:disabled) {
  background: rgba(127, 199, 217, 0.16);
}
.node-patch-save-menu button:disabled {
  opacity: 0.4;
  cursor: default;
}
.node-patch-save-menu button.confirming-default {
  background: rgba(226, 168, 109, 0.22);
}

.node-header-timing-row {
  display: contents;
  min-width: 0;
  min-height: 0;
}

.node-header-transport-row {
  display: contents;
}

.node-header-scope-row {
  display: contents;
}

.node-patch-timing-controls {
  display: inline-flex;
  flex: 10 1 46%;
  align-items: stretch;
  min-width: min(620px, 100%);
  min-height: 0;
  padding: 0;
}

.node-history-controls .node-header-timing-widgets {
  min-width: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

.node-header-timing-widgets > .node-header-timing-field {
  min-inline-size: 3.4rem;
}

.node-header-timing-field {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 40% 60%;
  align-content: stretch;
  align-items: stretch;
  justify-items: stretch;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 0;
  color: rgba(199, 226, 226, 0.68);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 100%;
  letter-spacing: 0;
  text-transform: uppercase;
}

.node-header-timing-field[data-timing-row="lower"] {
  grid-row: auto;
}

.node-header-timing-field[data-header-number-drag="true"]:not(.node-header-render-range-field),
.node-header-smoothing-field,
.node-header-speed-placeholder {
  /* Same app + cursor as Command Center scrub numbers -- no L/R / ew-resize icon. */
  cursor: var(--node-dot-cursor);
  user-select: none;
}

.node-header-timing-field[data-header-number-drag="true"]:not(.node-header-render-range-field) .node-header-timing-caption,
.node-header-timing-field[data-header-number-drag="true"]:not(.node-header-render-range-field) .node-header-timing-input,
.node-header-smoothing-field .node-header-timing-caption,
.node-header-smoothing-field .node-header-timing-input,
.node-header-speed-placeholder .node-header-timing-caption,
.node-header-speed-placeholder .node-header-timing-input {
  cursor: var(--node-dot-cursor);
}

.node-header-timing-field.value-dragging {
  border-color: rgba(127, 199, 217, 0.42);
  background:
    linear-gradient(90deg, rgba(127, 199, 217, 0.12), rgba(127, 199, 217, 0.035)),
    rgba(2, 4, 7, 0.5);
  color: rgba(243, 251, 251, 0.94);
}

.node-header-timing-field:last-child {
  border-inline-end: 0;
}

.node-header-render-range-field:first-of-type {
  border-inline-start: 1px solid rgba(127, 199, 217, 0.22);
}

.node-header-timing-row > :last-child {
  border-inline-end: 0;
}

.node-header-timing-field span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
  font-size: clamp(0.72rem, calc(var(--node-toolbar-row-height) * 0.26), 1rem);
  font-weight: 800;
}

.node-header-bpm-tap {
  cursor: pointer;
  color: rgba(127, 199, 217, 0.92);
  background: rgba(127, 199, 217, 0.08);
}

.node-header-bpm-tap:hover,
.node-header-bpm-tap:focus-visible {
  color: rgba(226, 238, 234, 0.94);
  background: rgba(127, 199, 217, 0.16);
}

.node-header-bpm-tap:focus-visible {
  outline: 1px solid rgba(127, 199, 217, 0.52);
  outline-offset: -1px;
}

.node-history-controls .node-header-timing-field[data-header-number-drag="true"] .node-header-bpm-tap {
  cursor: pointer;
}

.node-header-timing-input {
  box-sizing: border-box;
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(127, 199, 217, 0.18);
  border-radius: 0;
  outline: 0;
  background: rgba(0, 0, 0, 0.32);
  color: rgba(236, 252, 249, 0.94);
  font-family: inherit;
  font-size: clamp(1.1rem, calc(var(--node-toolbar-row-height) * 0.5), 1.72rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
  text-align: center;
}

.node-header-timing-input[data-timing-field][readonly],
.node-header-timing-input[data-audio-field][readonly],
.node-header-timing-input[data-speed-limit][readonly],
.node-header-timing-input[data-global-smoothing-seconds][readonly],
.node-header-timing-input[data-speed-readout][readonly],
.node-header-timing-input[data-global-scope-input][readonly] {
  cursor: var(--node-dot-cursor);
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
}

.node-header-timing-input:not([readonly]) {
  cursor: text;
}

.node-header-timing-input:focus {
  border-color: rgba(127, 199, 217, 0.52);
  background: rgba(0, 0, 0, 0.58);
}

.node-header-timing-input::-webkit-outer-spin-button,
.node-header-timing-input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.node-header-oversampling-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: var(--node-dot-cursor);
  background-color: var(--bg);
  background-image:
    linear-gradient(45deg, transparent 50%, #ffffff 50%),
    linear-gradient(135deg, #ffffff 50%, transparent 50%);
  background-position: calc(100% - 0.85em) 50%, calc(100% - 0.55em) 50%;
  background-size: 0.32em 0.32em, 0.32em 0.32em;
  background-repeat: no-repeat;
  color: #ffffff;
  padding-inline: 0.35em 1.2em;
}

.node-header-oversampling-select:focus {
  background-color: var(--bg);
  color: #ffffff;
}

.node-header-oversampling-select option {
  background-color: var(--bg);
  color: #ffffff;
}

.dsp-node.buttons-hidden .node-header-actions {
  display: none;
}

/* Global Visibility hide — skip modules that force-show locally. */
.node-graph-workspace.module-buttons-hidden .dsp-node:not(.buttons-forced-visible) .node-header-actions {
  display: none;
}

.node-graph-workspace.module-buttons-hidden .dsp-node.buttons-forced-visible .node-header-actions {
  display: flex;
}

/* Music Player path + phase widgets are control-surface chrome (text boxes and
   emoji buttons on the module face), not header action buttons. They hide with
   the sample body under module-interface-controls-hidden / interface-controls-
   hidden, not with "Hide module buttons". Waveform display settings keep their
   own phase/path copies for when the surface is off. */

.dsp-node.title-hidden .node-header-title-row {
  display: none;
}

/* Display hide is applyNodeGraphModuleLayout omitting the face band.
   Sample / phosphor faces use the same LayoutA order: header → io → face.
   Do not zero --node-module-scope-height or rematch grid-row here. */

.sample-module-layout .node-sample-module-body {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  z-index: 3;
  background: rgb(3, 5, 7);
}

.node-graph-workspace.module-interface-controls-hidden .sample-module-layout:not(.interface-controls-forced-visible) .node-sample-module-body,
.sample-module-layout.interface-controls-hidden .node-sample-module-body {
  display: none;
}

.node-graph-workspace.module-interface-controls-hidden .sample-module-layout.interface-controls-forced-visible .node-sample-module-body {
  display: grid;
}

.sample-module-layout .dsp-node-body {
  align-content: start;
  grid-auto-rows: var(--node-body-row-height);
  align-self: start;
}

.node-graph-workspace.module-buttons-hidden .dsp-node:not(.title-hidden):not(.buttons-forced-visible),
.dsp-node.buttons-hidden:not(.title-hidden) {
  --node-header-height: var(--node-header-title-row-height);
}

.dsp-node.title-hidden:not(.buttons-hidden) {
  --node-header-height: calc(var(--node-grid-size) * 1.9285714);
}

.dsp-node.buttons-hidden.title-hidden {
  --node-header-height: 0px;
}

.dsp-node.title-only {
  --node-header-height: var(--node-header-title-row-height);
  --node-module-bottom-gap-track: 0px;
}

.dsp-node.title-only .dsp-node-header {
  grid-template-rows: minmax(0, 1fr);
  border-radius: 0;
  corner-shape: square;
}

.dsp-node.module-collapsed {
  --node-header-height: 0px;
  --node-module-bottom-gap-track: 0px;
  pointer-events: auto;
  cursor: var(--node-dot-cursor, grab);
}

.dsp-node.module-collapsed > * {
  pointer-events: none;
}

.node-graph-workspace.module-buttons-hidden .dsp-node.title-hidden:not(.buttons-forced-visible) {
  --node-header-height: 0px;
}

.node-graph-workspace.module-buttons-hidden .dsp-node:not(.title-hidden):not(.buttons-forced-visible) .dsp-node-header,
.dsp-node.buttons-hidden:not(.title-hidden) .dsp-node-header {
  grid-template-rows: minmax(0, 1fr);
}

.dsp-node.title-hidden:not(.buttons-hidden) .dsp-node-header {
  grid-template-rows: minmax(0, 1fr);
}

.dsp-node.buttons-hidden.title-hidden .dsp-node-header {
  overflow: hidden;
  padding: 0;
  visibility: hidden;
}

.node-graph-workspace.module-buttons-hidden .dsp-node.title-hidden:not(.buttons-forced-visible) .dsp-node-header {
  overflow: hidden;
  padding: 0;
  visibility: hidden;
}

/* Headerless LayoutB: no title chrome → zero header track (must win over
   generic .title-hidden header-height rules that still reserve button space). */
.dsp-node.solid-module-layout:not(:has(> .dsp-node-header)),
.dsp-node.chrome-layout-b.solid-module-layout:not(:has(> .dsp-node-header)),
.dsp-node.solid-module-layout.title-hidden,
.dsp-node.chrome-layout-b.solid-module-layout.title-hidden {
  --node-header-height: 0px;
}

.node-graph-workspace.module-sliders-hidden .dsp-node:not(.sliders-forced-visible) .dsp-node-body,
.dsp-node.sliders-hidden .dsp-node-body {
  display: none;
}

.node-graph-workspace.module-sliders-hidden .dsp-node.sliders-forced-visible .dsp-node-body {
  display: grid;
}

.node-header-title-row {
  display: flex;
  align-self: stretch;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 calc(var(--node-grid-size) * 0.1428571);
  container-type: size;
  background: none;
  border-radius: 0;
  corner-shape: square;
}

.node-header-title {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  width: 100%;
  flex: 1 1 auto;
  margin: 0;
  padding: var(--node-module-title-padding, 0px);
  overflow: hidden;
  overflow-wrap: normal;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(
    --node-header-title-font-family,
    "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace
  );
  font-size: min(
    calc(100cqh * 0.62),
    calc(100cqw / max(var(--node-header-title-chars, 1), 1) / 0.62)
  );
  text-fit: none;
  font-weight: 400;
  color: transparent;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  text-transform: none;
  white-space: nowrap;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

.node-header-title[data-title-editing="1"],
.node-header-title[data-title-editing="1"]:focus,
.node-header-title[data-title-editing="1"]:focus-visible {
  font-size: min(
    calc(100cqh * 0.62),
    calc(100cqw / max(var(--node-header-title-chars, 1), 1) / 0.62)
  );
  text-fit: none;
  user-select: text;
  -webkit-user-select: text;
  color: var(--node-module-primary-text-color);
  caret-color: var(--node-module-primary-text-color);
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  cursor: text;
}

/* Hide accidental selection while dragging by the title (not editing). */
.node-header-title:not([data-title-editing="1"])::selection,
.node-header-title:not([data-title-editing="1"])::-moz-selection {
  background: transparent;
  color: inherit;
}

/* While renaming, word/line select must be visible. */
.node-header-title[data-title-editing="1"]::selection,
.node-header-title[data-title-editing="1"]::-moz-selection {
  background: color-mix(in srgb, var(--node-module-primary-text-color) 35%, transparent);
  color: inherit;
}

.dsp-node-io-section {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
  align-self: start;
  overflow: visible;
  display: grid;
  /* Side tracks size to the longest port label (set as --node-io-*-label-ch on
     the section). Old hard cap of 2gu clipped names like Frequency / Fidelity
     on LayoutA modules. Center stays flexible. */
  --node-io-side-pad: calc(var(--node-signal-port-width, 14px) + var(--node-io-label-gap, 4px));
  --node-io-input-track: max(
    calc(var(--node-grid-width) * 1.5),
    calc(var(--node-io-side-pad) + var(--node-io-input-label-ch, 4) * 1ch)
  );
  --node-io-output-track: max(
    calc(var(--node-grid-width) * 1.5),
    calc(var(--node-io-side-pad) + var(--node-io-output-label-ch, 4) * 1ch)
  );
  grid-template-columns:
    minmax(0, var(--node-io-input-track))
    minmax(0, 1fr)
    minmax(0, var(--node-io-output-track));
  align-items: stretch;
  min-width: 0;
  min-height: var(--node-io-section-min-height);
  padding: 0;
  background: transparent;
}

.dsp-node-io-section,
.node-io-column {
  pointer-events: auto;
}

.node-io-proxy {
  display: none;
}

/*
 * App-wide Hide In/Out: collapse the IO section for real (no proxy strip,
 * no LayoutB jack band). Connected wires keep endpoint dots only — see
 * nodeGraphPortCenter fallback + caps-only path in wire-rendering.
 */
.dsp-node.io-hidden .dsp-node-io-section,
.dsp-node.io-hidden .node-io-proxy,
.dsp-node.chrome-layout-b.io-hidden :is(.node-solid-module-shell, .node-module-chrome-layout-b-shell) > .node-io-column,
.dsp-node.solid-module-layout.io-hidden .node-solid-module-shell > .node-io-column {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.dsp-node.io-hidden .dsp-node-io-section {
  align-items: stretch;
}

/* Strip IO paints when its band is in the stack. Do not force [hidden] /
   io-strip-collapsed sections back into the grid (that opened an implicit
   column beside face/params). LayoutB article IO stays none via chrome-layout-b. */
.dsp-node:not(.io-hidden):not(.chrome-layout-b):not(.io-strip-collapsed) > .dsp-node-io-section:not([hidden]) {
  display: grid !important;
  visibility: visible !important;
}

/* Empty hide-unused (and other strip-band omissions): leave the article grid.
   LayoutB shell columns are out of scope — chrome-layout-b rules own those. */
.dsp-node.io-strip-collapsed:not(.chrome-layout-b) > .dsp-node-io-section,
.dsp-node:not(.chrome-layout-b) > .dsp-node-io-section[hidden] {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.dsp-node-io-section.io-outputs-only {
  grid-template-columns: minmax(0, 1fr);
}

.dsp-node-io-section.io-outputs-only .node-io-column.output {
  grid-column: 1;
  justify-self: end;
}

.dsp-node-io-section.io-inputs-only {
  grid-template-columns: minmax(0, 1fr);
}

.dsp-node-io-section.io-inputs-only .node-io-column.input {
  grid-column: 1;
  justify-self: start;
}

.dsp-node.chrome-layout-inlet-outlet > .dsp-node-io-section.io-outputs-only,
.dsp-node.chrome-layout-title-bar-and-ports > .dsp-node-io-section.io-outputs-only,
.dsp-node.chrome-layout-inlet-outlet > .dsp-node-io-section.io-inputs-only,
.dsp-node.chrome-layout-title-bar-and-ports > .dsp-node-io-section.io-inputs-only,
.dsp-node.chrome-layout-c > .dsp-node-io-section.io-outputs-only,
.dsp-node.chrome-layout-c > .dsp-node-io-section.io-inputs-only {
  grid-template-columns: minmax(0, 1fr);
}

.node-io-proxy-port {
  pointer-events: none;
}

.node-io-proxy-port.input {
  justify-self: start;
}

.node-io-proxy-port.output {
  justify-self: end;
}

.node-io-column {
  display: grid;
  /* SSOT jack packing for LayoutA + InletOutletLayout (B-074). LayoutB shell
     columns mirror this: flush rows at signal-port height, gap from --node-io-gap.
     Do not 1fr-stretch rows — that drifted portal / Output Left Right spacing. */
  align-content: start;
  /* One jack per row, flush. A taller row leaves a stroke between semicircles. */
  grid-auto-rows: var(--node-signal-port-height);
  gap: 0;
  min-width: 0;
  overflow: visible;
}

.node-io-column.input {
  grid-column: 1;
  /* Stretch every row to the column track (widest label) so hitboxes match. */
  justify-items: stretch;
  padding-right: var(--node-io-column-padding);
}

.node-io-column.output {
  grid-column: 3;
  justify-items: stretch;
  padding-left: var(--node-io-column-padding);
}

.node-io-row {
  /* The port hit-box is a fixed-size overlay (see .node-io-row .node-port
     below), not a grid track. The label is a flex item so its overflow
     direction is anchored reliably: text-align on a block box only shifts
     content within *available* slack space, and does nothing once nowrap
     content is wider than the box (verified — it just overflows toward the
     block's start edge regardless of text-align). justify-content on a flex
     container instead pins the label's end edge, so overflow always grows
     away from the port, never past it.
     HARD RULE: row is the IO cell. min-height ≥ jack diameter.
     Never a scroll container (visible + hidden on one axis becomes auto).
     Horizontal: every row fills the column (sized by longest label in that
     column via --node-io-label-min-ch) so inlet/outlet hit widths are uniform. */
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--node-signal-port-height);
  min-height: var(--node-signal-port-height);
  max-height: var(--node-signal-port-height);
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: visible;
  color: var(--muted);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.84rem;
  line-height: 1;
  /* Empty band is a module-move surface when unlocked; + only on jack / patch-point-hover. */
  cursor: var(--node-default-cursor);
  user-select: none;
}

.node-io-row.input {
  justify-self: stretch;
  justify-content: flex-start;
  padding-left: calc(var(--node-signal-port-width) + var(--node-io-label-gap, 3px));
}

.node-io-row.output {
  justify-self: stretch;
  justify-content: flex-end;
  padding-right: calc(var(--node-signal-port-width) + var(--node-io-label-gap, 3px));
}

.node-io-row .node-port {
  position: absolute;
  /* Center in the row with layout, not transform. offsetTop ignores
     translateY, which drew the GPU jack below the label and into the face. */
  top: 0;
  bottom: 0;
  height: var(--node-signal-port-height);
  margin-block: auto;
  transform: none;
  box-sizing: border-box;
  /* Do not max-height/width:100% — a 0-tall or 0-wide row collapses the
     crescent to nothing (same bug as the old .node-port rule). */
  max-width: none;
  max-height: none;
}

.node-io-row.input .node-port {
  left: 0;
}

.node-io-row.output .node-port {
  right: 0;
}

/* Digital signal (12-bit bitmask) ports: solid white wire and port taps
   (see nodeGraphPortWireColor). Colors only -- no shape, dash, or animation
   change; dashing stays reserved for the .node-wire-path.temp drag state. */
.node-io-row[data-digital-signal="output"] .node-port.output {
  --node-output-fill: var(--node-digital-fill, #ffffff);
  --node-output-stroke: var(--node-digital-fill, #ffffff);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-digital-fill, #ffffff) var(--node-port-paint-brightness),
    transparent
  );
}

.node-io-row[data-digital-signal="input"] .node-port.input {
  --node-input-fill: var(--node-digital-fill, #ffffff);
  --node-input-stroke: var(--node-digital-fill, #ffffff);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-digital-fill, #ffffff) var(--node-port-paint-brightness),
    transparent
  );
}

/* Play Keys (blue) / Arp Keys (gold): digital bitmasks with colored jacks. */
.node-io-row[data-digital-signal][data-jack-channel="blue"] .node-port,
.dsp-node .node-port[data-jack-channel="blue"] {
  --node-digital-fill: var(--node-jack-blue);
  --node-output-fill: var(--node-jack-blue);
  --node-output-stroke: var(--node-jack-blue);
  --node-input-fill: var(--node-jack-blue);
  --node-input-stroke: var(--node-jack-blue);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-blue) var(--node-port-paint-brightness),
    transparent
  );
}

.node-io-row[data-digital-signal][data-jack-channel="gold"] .node-port,
.dsp-node .node-port[data-jack-channel="gold"],
.dsp-node .node-io-row[data-jack-channel="gold"] .node-port {
  --node-digital-fill: var(--node-jack-gold, #f0b84a);
  --node-output-fill: var(--node-jack-gold, #f0b84a);
  --node-output-stroke: var(--node-jack-gold, #f0b84a);
  --node-input-fill: var(--node-jack-gold, #f0b84a);
  --node-input-stroke: var(--node-jack-gold, #f0b84a);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-gold, #f0b84a) var(--node-port-paint-brightness),
    transparent
  );
}

.node-io-label-rgba {
  display: inline-flex;
}

.node-io-label-rgba-ch {
  font: inherit;
  line-height: inherit;
}

/* Used vs unused I/O jack paint. UIDEV sliders write the two brightness vars. */
.dsp-node .node-port.connected-port,
.dsp-node .node-io-row:has(.node-port.connected-port) .node-port {
  --node-port-paint-brightness: var(--node-port-used-brightness);
}

/* Unused PARAM jacks: same permanent type stroke as signal I/O (no idle chrome). */
.dsp-node .node-param-port:not(.connected-port) {
  --node-port-crescent-fill: transparent;
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-param-hover-stroke, var(--node-mod-input-stroke, var(--node-port-hover-stroke)))
      var(--node-port-paint-brightness),
    transparent
  );
}

/* Analog outlet (no RGB channel, not digital). */
.dsp-node .node-io-row.output:not([data-digital-signal]) .node-port.output:not([data-jack-channel]) {
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-output-stroke) var(--node-port-paint-brightness),
    transparent
  );
}

/* Jack RGB chrome (inlets and outlets). Cables stay gold analog / white digital. */
.dsp-node .node-port.output[data-jack-channel="green"],
.dsp-node .node-io-row.output[data-jack-channel="green"] .node-port.output {
  --node-output-stroke: var(--node-jack-green);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-green) var(--node-port-paint-brightness),
    transparent
  );
}

.dsp-node .node-port.output[data-jack-channel="red"],
.dsp-node .node-io-row.output[data-jack-channel="red"] .node-port.output {
  --node-output-stroke: var(--node-jack-red);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-red) var(--node-port-paint-brightness),
    transparent
  );
}

.dsp-node .node-port.output[data-jack-channel="blue"],
.dsp-node .node-io-row.output[data-jack-channel="blue"] .node-port.output {
  --node-output-stroke: var(--node-jack-blue);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-blue) var(--node-port-paint-brightness),
    transparent
  );
}

.dsp-node .node-port.output[data-jack-channel="purple"],
.dsp-node .node-io-row.output[data-jack-channel="purple"] .node-port.output {
  --node-output-stroke: var(--node-jack-purple);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-purple) var(--node-port-paint-brightness),
    transparent
  );
}

.dsp-node .node-port.output[data-jack-channel="cyan"],
.dsp-node .node-io-row.output[data-jack-channel="cyan"] .node-port.output,
.dsp-node .node-port.output[data-jack-channel="turquoise"],
.dsp-node .node-io-row.output[data-jack-channel="turquoise"] .node-port.output {
  --node-output-stroke: var(--node-jack-cyan);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-cyan) var(--node-port-paint-brightness),
    transparent
  );
}

.dsp-node .node-port.output[data-jack-channel="yellow"],
.dsp-node .node-io-row.output[data-jack-channel="yellow"] .node-port.output {
  --node-output-stroke: var(--node-jack-yellow);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-yellow) var(--node-port-paint-brightness),
    transparent
  );
}

/* Magenta / black reserved (CMYK M/K) — unused in live assignment. */
.dsp-node .node-port.output[data-jack-channel="magenta"],
.dsp-node .node-io-row.output[data-jack-channel="magenta"] .node-port.output {
  --node-output-stroke: var(--node-jack-magenta);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-magenta) var(--node-port-paint-brightness),
    transparent
  );
}

.dsp-node .node-port.output[data-jack-channel="black"],
.dsp-node .node-io-row[data-jack-channel="black"] .node-port.output,
.dsp-node .node-io-row.output[data-jack-channel="black"] .node-port.output {
  --node-output-fill: var(--node-jack-black);
  --node-output-stroke: var(--node-jack-black);
  --node-digital-fill: var(--node-jack-black);
  --node-port-crescent-stroke: var(--node-jack-black);
  --node-port-paint-brightness: 100%;
}

/* Analog inlet — same gold as analog outlets. RGB inlets override. */
.dsp-node .node-port.input:not(.node-param-port):not([data-jack-channel]),
.dsp-node .node-io-row.input:not([data-digital-signal]) .node-port.input:not(.node-param-port):not([data-jack-channel]) {
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-input-stroke, var(--node-inlet-blue-stroke)) var(--node-port-paint-brightness),
    transparent
  );
}

.dsp-node .node-port.input[data-jack-channel="green"]:not(.node-param-port),
.dsp-node .node-io-row.input[data-jack-channel="green"]:not([data-digital-signal]) .node-port.input:not(.node-param-port) {
  --node-input-stroke: var(--node-jack-green);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-green) var(--node-port-paint-brightness),
    transparent
  );
}

.dsp-node .node-port.input[data-jack-channel="red"]:not(.node-param-port),
.dsp-node .node-io-row.input[data-jack-channel="red"]:not([data-digital-signal]) .node-port.input:not(.node-param-port) {
  --node-input-stroke: var(--node-jack-red);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-red) var(--node-port-paint-brightness),
    transparent
  );
}

.dsp-node .node-port.input[data-jack-channel="blue"]:not(.node-param-port),
.dsp-node .node-io-row.input[data-jack-channel="blue"]:not([data-digital-signal]) .node-port.input:not(.node-param-port) {
  --node-input-stroke: var(--node-jack-blue);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-blue) var(--node-port-paint-brightness),
    transparent
  );
}

.dsp-node .node-port.input[data-jack-channel="purple"]:not(.node-param-port),
.dsp-node .node-io-row.input[data-jack-channel="purple"]:not([data-digital-signal]) .node-port.input:not(.node-param-port) {
  --node-input-stroke: var(--node-jack-purple);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-purple) var(--node-port-paint-brightness),
    transparent
  );
}

.dsp-node .node-port.input[data-jack-channel="cyan"]:not(.node-param-port),
.dsp-node .node-io-row.input[data-jack-channel="cyan"]:not([data-digital-signal]) .node-port.input:not(.node-param-port),
.dsp-node .node-port.input[data-jack-channel="turquoise"]:not(.node-param-port),
.dsp-node .node-io-row.input[data-jack-channel="turquoise"]:not([data-digital-signal]) .node-port.input:not(.node-param-port) {
  --node-input-stroke: var(--node-jack-cyan);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-cyan) var(--node-port-paint-brightness),
    transparent
  );
}

.dsp-node .node-port.input[data-jack-channel="yellow"]:not(.node-param-port),
.dsp-node .node-io-row.input[data-jack-channel="yellow"]:not([data-digital-signal]) .node-port.input:not(.node-param-port) {
  --node-input-stroke: var(--node-jack-yellow);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-yellow) var(--node-port-paint-brightness),
    transparent
  );
}

.dsp-node .node-port.input[data-jack-channel="magenta"]:not(.node-param-port),
.dsp-node .node-io-row.input[data-jack-channel="magenta"]:not([data-digital-signal]) .node-port.input:not(.node-param-port) {
  --node-input-stroke: var(--node-jack-magenta);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-jack-magenta) var(--node-port-paint-brightness),
    transparent
  );
}

.dsp-node .node-port.input[data-jack-channel="black"]:not(.node-param-port),
.dsp-node .node-io-row[data-jack-channel="black"] .node-port.input:not(.node-param-port),
.dsp-node .node-io-row.input[data-jack-channel="black"] .node-port:not(.node-param-port) {
  --node-input-fill: var(--node-jack-black);
  --node-input-stroke: var(--node-jack-black);
  --node-digital-fill: var(--node-jack-black);
  --node-port-crescent-stroke: var(--node-jack-black);
  --node-port-paint-brightness: 100%;
}

.node-io-label {
  /* SINGLE OWNER of jack (I/O) label typography. Every module and layout
     uses this one look. Fallbacks = the .node-io-row text look. No module or
     layout rule may set font/color/letter-spacing/line-height on
     .node-io-label (or its children) or set any --node-io-label-* knob.
     The label stays transparent: the GPU draws the name. Hover must not
     reveal this text on top of that. */
  font-family: var(--node-io-label-font-family, "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace);
  font-size: var(--node-io-label-font-size, 0.84rem);
  font-weight: var(--node-io-label-font-weight, 400);
  line-height: var(--node-io-label-line-height, 1);
  letter-spacing: var(--node-io-label-letter-spacing, normal);
  color: transparent;
  position: relative;
  z-index: 0;
  display: block;
  flex: 0 0 auto;
  /* Column sets --node-io-label-min-ch = longest label char count (inlets and
     outlets separately). Monospace ch ≈ equal hit reach for short names. */
  min-width: calc(var(--node-io-label-min-ch, 1) * 1ch);
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  pointer-events: auto;
}

.node-io-row.input .node-io-label {
  text-align: left;
}

.node-io-row.output .node-io-label {
  text-align: right;
}

/* Jack + label are one control. Cursor only — no overflow/z-index boost
   (that made hover look “unclipped” while idle neighbors covered the poles). */
.node-io-row.patch-point-hover {
  cursor: var(--node-dot-cursor);
}

.node-execution-order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(113, 212, 155, 0.045);
  color: color-mix(in srgb, var(--good) 62%, rgba(160, 167, 176, 0.52));
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  /* Arrow when move is available — see :not(.movement-locked) move block. */
  cursor: var(--node-default-cursor);
  user-select: none;
  -webkit-user-select: none;
}

.node-execution-order-badge:hover,
.node-execution-order-badge:focus-visible {
  background: rgba(113, 212, 155, 0.075);
  color: var(--good);
}

.node-execution-order-badge[data-execution-state="bypassed"] {
  background: rgba(226, 168, 109, 0.1);
  color: var(--accent-2);
}

.node-execution-order-badge[data-execution-state="inactive"] {
  background: rgba(243, 241, 236, 0.045);
  color: var(--muted);
}

.node-live-input-state-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  padding: 0 calc(var(--node-grid-size) * 0.12);
  background:
    linear-gradient(
      90deg,
      rgba(127, 199, 217, 0.22) 0 var(--node-live-input-peak, 0%),
      transparent var(--node-live-input-peak, 0%) 100%
    ),
    #020407;
  color: rgba(160, 167, 176, 0.72);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: clamp(0.7rem, 4.2cqmin, 1.05rem);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  container-type: size;
}

.node-live-input-state-badge[data-mic-state="armed"],
.node-live-input-state-badge[data-mic-state="requesting"] {
  color: #f7b758;
}

.node-live-input-state-badge[data-mic-state="connected"] {
  color: var(--good);
}

.node-live-input-state-badge[data-mic-state="paused"] {
  color: var(--transport-pause-fg);
}

.node-live-input-state-badge[data-mic-state="blocked"] {
  color: #ff9b9b;
}

.node-drag-handle,
.node-action-button,
.node-display-settings-button,
.node-metaparameter-button,
.node-bypass-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--accent) 58%, rgba(160, 167, 176, 0.5));
  /* Size emoji to the button cell (cqh), not the full title+actions header. */
  container-type: size;
  font-size: clamp(1.25rem, 62cqh, 1.9rem);
  line-height: 1;
}

.node-drag-handle {
  /* Move glyph: slightly smaller than action emoji, still fills the cell. */
  font-size: clamp(1.1rem, 52cqh, 1.7rem);

  /* Module header move glyph — independent of floating-window 100% size. */
  font-size: calc(var(--node-header-height) * 0.6 * 0.47);
}

/* Floating pages: move widget is 100% of the header cell. */
.scene-context-heading > .scene-context-drag-handle,
.scene-context-heading > .node-drag-handle {
  font-size: var(--node-move-symbol-size);
}

/*
 * Module move affordances: OS arrow on hover (not the app-wide +).
 * Matches beginNodeGraphNodeDrag hit surfaces (excluding jacks / knobs / graph face).
 * Child controls re-assert their own cursors below — do not use `cursor: revert`
 * (it drops author rules and leaves ports/sliders on the UA default).
 */
.dsp-node:not(.movement-locked) .node-drag-handle,
.dsp-node:not(.movement-locked) .node-execution-order-badge,
.dsp-node:not(.movement-locked) .node-header-title-row,
.dsp-node:not(.movement-locked) .node-header-title,
.dsp-node:not(.movement-locked) .node-sample-phase-readout,
.dsp-node:not(.movement-locked) .node-solid-module-shell,
.dsp-node:not(.movement-locked) .node-solid-module-custom-ui,
.dsp-node:not(.movement-locked) .node-module-chrome-layout-b-shell,
.dsp-node:not(.movement-locked) .node-led-face,
.dsp-node:not(.movement-locked) .node-metamodule-boundary-face,
.dsp-node:not(.movement-locked) .node-knob-widget-body,
.dsp-node:not(.movement-locked) .dsp-node-io-section,
.dsp-node:not(.movement-locked) .node-io-row,
.dsp-node:not(.movement-locked) .node-parameter-row {
  cursor: var(--node-module-move-cursor);
}

/* Jacks / patch rows: keep the app + when the IO item is live. */
.dsp-node:not(.movement-locked) .node-param-port,
.dsp-node:not(.movement-locked) .node-io-row.patch-point-hover,
.dsp-node:not(.movement-locked) .node-port:not(.node-io-row .node-port) {
  cursor: var(--node-dot-cursor);
}

/* Bias / graph / pad / knob face: keep specialized cursors over move chrome. */
.dsp-node:not(.movement-locked) .node-slider-readout:not([data-control="number"]),
.dsp-node:not(.movement-locked) .node-xy-pad-canvas,
.dsp-node:not(.movement-locked) .node-knob-face,
.dsp-node:not(.movement-locked) .node-knob-face * {
  cursor: var(--node-dot-cursor);
}

.dsp-node:not(.movement-locked) .node-module-graph-display,
.dsp-node:not(.movement-locked) .node-module-graph-display * {
  cursor: var(--node-default-cursor);
}

.dsp-node:not(.movement-locked) .node-header-actions > button {
  cursor: var(--node-module-move-cursor);
}

.dsp-node:not(.movement-locked) button:not(.node-drag-handle):not(.node-display-settings-button):not(.node-metaparameter-button):not(.node-action-button):not(.node-bypass-button):not(.node-port):not(.node-param-port) {
  cursor: var(--node-dot-cursor);
}

.dsp-node:not(.movement-locked) input:not([readonly]),
.dsp-node:not(.movement-locked) textarea,
.dsp-node:not(.movement-locked) select {
  cursor: text;
}

/* While dragging a module, keep the familiar OS arrow (not grab/move/+). */
.dsp-node.dragging,
.dsp-node.dragging * {
  cursor: var(--node-module-move-cursor) !important;
}

.node-bypass-button {
  container-type: size;
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--node-bypass-off-bg, #000000);
  color: transparent;
  font-size: calc(var(--node-header-height) * var(--node-bypass-icon-size-ratio, 0.36) * 0.34);
}

.node-bypass-button::before {
  content: "\1F5F2";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(160, 167, 176, 0.48);
  font-size: calc(var(--node-bypass-icon-size-ratio, 0.36) * 100cqh);
  line-height: 1;
}

.node-bypass-button[aria-pressed="true"] {
  background: var(--node-bypass-on-bg, #5c1818);
  color: transparent;
}

.node-display-settings-button[aria-pressed="false"],
.node-metaparameter-button[aria-pressed="false"],
.dsp-node.oscilloscope-hidden .node-display-settings-button,
.node-graph-workspace.module-oscilloscopes-hidden .dsp-node:not(.oscilloscope-forced-visible) .node-display-settings-button {
  background: rgba(0, 0, 0, 0.48);
  color: rgba(160, 167, 176, 0.42);
  opacity: 0.68;
  filter: saturate(0.45);
}

.node-display-settings-button[aria-pressed="true"],
.node-metaparameter-button[aria-pressed="true"] {
  color: color-mix(in srgb, var(--accent) 72%, rgba(160, 167, 176, 0.36));
}

.node-bypass-button[aria-pressed="true"]::before {
  content: "\1F5F2";
  color: var(--node-bypass-icon-on-color, #f7b758);
  font-size: calc(var(--node-bypass-icon-size-ratio, 0.36) * 100cqh);
  text-shadow:
    0 0 calc(100cqh * var(--node-bypass-icon-glow-spread-ratio, 0.4) * 0.18) color-mix(in srgb, var(--node-bypass-icon-glow-color, #f25d5d) 72%, transparent),
    0 0 calc(100cqh * var(--node-bypass-icon-glow-spread-ratio, 0.4) * 0.42) color-mix(in srgb, var(--node-bypass-icon-glow-color, #f25d5d) 46%, transparent);
}

.dsp-node.bypassed:not(.connected) .node-bypass-button[aria-pressed="true"] {
  background: var(--node-bypass-on-bg, #5c1818);
  color: transparent;
}

.dsp-node.bypassed:not(.connected) .node-bypass-button[aria-pressed="true"]::before {
  color: color-mix(in srgb, var(--node-bypass-icon-on-color) 72%, transparent);
  text-shadow:
    0 0 calc(100cqh * var(--node-bypass-icon-glow-spread-ratio) * 0.18) color-mix(in srgb, var(--node-bypass-icon-glow-color) 68%, transparent),
    0 0 calc(100cqh * var(--node-bypass-icon-glow-spread-ratio) * 0.42) color-mix(in srgb, var(--node-bypass-icon-glow-color) 42%, transparent);
}

.node-drag-handle:active,
.node-drag-handle.dragging,
.node-action-button:active,
.node-display-settings-button:active,
.node-metaparameter-button:active {
  color: var(--accent-2);
}

.dsp-node.movement-locked .node-drag-handle,
.node-drag-handle.node-drag-handle-locked {
  color: var(--warning, #f3b75f);
}

.node-drag-handle:focus-visible,
.node-action-button:focus-visible,
.node-display-settings-button:focus-visible,
.node-metaparameter-button:focus-visible {
  color: var(--accent);
}

.node-bypass-button:active::before {
  color: var(--accent-2);
}

/* No hover paint on module chrome — global `button:hover` accent must not apply. */
.dsp-node .node-header-actions > button:hover,
.dsp-node .node-drag-handle:hover,
.dsp-node .node-action-button:hover,
.dsp-node .node-display-settings-button:hover,
.dsp-node .node-metaparameter-button:hover,
.dsp-node .node-bypass-button:hover,
.dsp-node .node-bypass-button[aria-pressed="true"]:hover,
.dsp-node.bypassed:not(.connected) .node-bypass-button[aria-pressed="true"]:hover {
  border-color: transparent;
  box-shadow: none;
  filter: none;
}

.dsp-node label,
.node-parameter-control {
  display: grid;
  color: var(--muted);
  font-size: 0.78rem;
}

.node-parameter-row {
  display: grid;
  grid-template-columns: var(--node-port-column-width) minmax(0, 1fr) var(--node-port-column-width);
  grid-template-rows: var(--node-slider-readout-height);
  align-items: center;
  column-gap: 0;
  /* Cover the body-row gap so the sliver between parameters is this row. */
  box-sizing: border-box;
  height: calc(var(--node-body-row-height) + var(--node-body-row-gap));
  min-height: calc(var(--node-body-row-height) + var(--node-body-row-gap));
  margin-block: calc(var(--node-body-row-gap) * -0.5);
  padding: 0;
  position: relative;
  z-index: 1;
}

.node-parameter-control {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: 100%;
  min-width: 0;
  height: var(--node-slider-readout-height);
  min-height: var(--node-slider-readout-height);
  transform: translateY(var(--node-slider-readout-center-offset));
}

.dsp-node p {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0 13px;
}

.dsp-node input[type="range"] {
  display: none;
}

.node-slider-readout,
.node-slider-readout-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--node-slider-readout-height);
  min-height: var(--node-slider-readout-height);
  max-height: var(--node-slider-readout-height);
  padding: var(--node-slider-padding-block) var(--node-slider-padding-inline);
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: transparent;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.86rem;
  line-height: 1;
}

.node-slider-readout {
  border-color: transparent;
  padding: 0;
}

.node-slider-readout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: 7px;
  row-gap: 0;
  touch-action: none;
  position: relative;
  overflow: hidden;
}

.node-slider-readout:not([data-control="number"]),
.node-slider-readout:not([data-control="number"]):hover,
.node-slider-readout:not([data-control="number"]).value-dragging,
body.node-slider-dragging,
body.node-slider-dragging * {
  cursor: var(--node-slider-dot-cursor) !important;
}

.node-slider-readout:hover,
.node-slider-readout:focus,
.node-slider-readout:focus-visible,
.node-slider-readout:active {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

.node-slider-readout::before,
.node-slider-readout::after {
  content: none;
}

.node-slider-amount-fill {
  box-sizing: border-box;
  position: absolute;
  z-index: 0;
  inset-block: 0;
  /* Unipolar: 0 → amount-end. Bipolar: amount-start (mid) → amount-end. */
  left: var(--amount-start, 0px);
  right: calc(100% - var(--amount-end, 0px));
  border: 0;
  border-radius: 0;
  background: none;
  pointer-events: none;
  visibility: hidden;
}

/* Bipolar uses the same amount token so UI Dev alpha is preserved.
   (color-mix with a solid used to force an opaque band over the text path.) */
/* No amount fill (start / mid -> position) on any slider, bipolar included: position handle only. */
.node-slider-readout.is-bipolar .node-slider-amount-fill {
  background: none;
}

.node-graph-workspace.show-slider-amount .node-slider-amount-fill {
  visibility: hidden;
  background: none;
}

.node-slider-readout-portal {
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
  inset-block: 0;
  width: 0;
  border: 0;
  border-radius: 0;
  background: var(--node-slider-position-color);
  pointer-events: none;
  /* GPU draws the wrap pieces. These nodes only publish the widths. */
  visibility: hidden;
}

.node-slider-readout-portal-left {
  left: 0;
  width: var(--portal-left-width, 0);
}

.node-slider-readout-portal-right {
  right: 0;
  width: var(--portal-right-width, 0);
}

.node-slider-readout::after {
  left: var(--ghost-start, 0);
  right: calc(100% - var(--ghost-end, 0));
  opacity: 0;
  background: var(--node-slider-ghost-color);
}

.node-slider-readout.has-ghost-slider::after {
  opacity: 1;
}

.node-slider-readout.value-dragging::before {
  border-color: transparent;
  box-shadow: none;
  outline: none;
  background: var(--node-slider-position-color);
}

.node-slider-readout.value-dragging {
  border-color: transparent;
  outline: none;
}

.node-slider-readout.has-ghost-slider.value-dragging::after {
  background: var(--node-slider-ghost-color);
}

.node-graph-workspace.hide-slider-position .node-slider-readout::before,
.node-graph-workspace.hide-slider-position .node-slider-readout::after,
.node-graph-workspace.hide-slider-position .node-slider-readout-portal {
  visibility: hidden;
}

.node-graph-workspace.hide-slider-position .node-slider-readout.choices-divided {
  background: none;
}

.node-graph-workspace.hide-slider-position .node-choice-debug-layer {
  visibility: hidden;
}

.node-slider-readout.choices-divided {
  background: none;
  border-radius: 0;
}

.node-slider-readout.choices-divided::before {
  display: none;
}

.node-choice-debug-cell-fill,
.node-choice-debug-divider,
.node-choice-debug-cell-stroke {
  visibility: hidden;
}

.node-choice-debug-layer {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.node-choice-debug-divider {
  stroke: rgba(243, 241, 236, 0.2);
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.node-choice-debug-square,
.node-choice-debug-cell {
  fill: var(--node-slider-position-color);
  stroke: transparent;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}

.node-choice-debug-cell-fill {
  stroke: none;
}

.node-choice-debug-cell-stroke {
  fill: none;
  stroke: transparent;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.node-slider-readout.choices-divided.value-dragging .node-choice-debug-cell-fill {
  fill: var(--node-slider-position-color);
}

.node-choice-debug-cell-debug {
  display: none;
  fill: none;
  stroke: rgba(255, 72, 92, 0.95);
  stroke-opacity: 1;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}

.node-choice-debug-wall {
  display: none;
  stroke: rgba(255, 232, 96, 0.98);
  stroke-opacity: 1;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}

.node-choice-debug-slider-wall {
  display: none;
  stroke: rgba(80, 255, 255, 1);
  stroke-opacity: 1;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}

.node-wiring-panel.choice-slider-debug .node-choice-debug-cell-debug,
.node-wiring-panel.choice-slider-debug .node-choice-debug-wall,
.node-wiring-panel.choice-slider-debug .node-choice-debug-slider-wall {
  display: block;
}

.node-slider-readout-label {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  color: transparent;
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: var(--node-slider-text-size, 0.79rem);
  line-height: var(--node-slider-text-line-height, 0.9);
  padding: var(--node-slider-text-padding, 0);
  text-align: left;
  text-overflow: clip;
  white-space: nowrap;
  align-self: end;
}

/* B-073: do not pad labels for the value sign column. Values already reserve
   space in the formatted string (reserveSignSpace / leading + or minus); extra
   label padding-left: 1ch shifted names right of the number. */

.node-slider-readout-value {
  position: relative;
  z-index: 1;
  grid-column: 1;
  min-width: 0;
  max-width: 100%;
  color: transparent;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--node-slider-text-size, 0.86rem);
  line-height: var(--node-slider-text-line-height, 0.9);
  padding: var(--node-slider-text-padding, 0);
  align-self: start;
}

.node-slider-readout-unit {
  position: relative;
  z-index: 1;
  grid-column: 2;
  min-width: var(--node-slider-unit-width);
  color: color-mix(in srgb, var(--node-slider-unit-color, #7fc7d9) 58%, rgba(160, 167, 176, 0.5));
  font-size: calc(var(--node-slider-readout-height) * 0.5);
  line-height: 0.9;
  text-align: right;
  align-self: center;
}

.node-slider-readout:focus-within .node-slider-readout-unit {
  color: color-mix(in srgb, var(--node-slider-unit-color, #7fc7d9) 58%, rgba(160, 167, 176, 0.5));
}

.node-slider-readout-unit.is-empty {
  visibility: hidden;
}

/* B-080: Choice divide/segment labels use the full track width before ellipsis.
   Empty unit still reserved min-width: 2.5em + column-gap, so names like
   "Analog Square" / "Trisaw Center" truncated early on choices-divided sliders.
   Collapse to one column so a spanning label cannot keep the auto unit track alive. */
.node-slider-readout.displays-choices:has(> .node-slider-readout-unit.is-empty) {
  column-gap: 0;
  grid-template-columns: minmax(0, 1fr);
}
.node-slider-readout.displays-choices .node-slider-readout-unit.is-empty {
  display: none;
  min-width: 0;
  width: 0;
  max-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
}
.node-slider-readout.displays-choices:has(> .node-slider-readout-unit.is-empty) > .node-slider-readout-value {
  max-width: 100%;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
/* value-outside / label-value-slider still need label|value side-by-side. */
.node-graph-workspace[data-slider-layout="value-outside"] .node-slider-readout.displays-choices:has(> .node-slider-readout-unit.is-empty),
.node-graph-workspace[data-slider-layout="label-value-slider"] .node-slider-readout.displays-choices:has(> .node-slider-readout-unit.is-empty) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.node-graph-workspace[data-slider-layout="label-value-slider"] .node-slider-readout-label {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  padding-left: 0;
}

.node-graph-workspace[data-slider-layout="label-value-slider"] .node-slider-readout-value {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  min-width: var(--node-slider-unit-width);
  text-align: right;
}

.node-graph-workspace[data-slider-layout="label-value-slider"] .node-slider-readout-unit {
  display: none;
}

.node-graph-workspace[data-slider-layout="value-unit-left"] .node-slider-readout,
.node-graph-workspace[data-slider-layout="value-unit-right"] .node-slider-readout {
  column-gap: 0.5ch;
}

.node-graph-workspace[data-slider-layout="value-unit-left"] .node-slider-readout {
  grid-template-columns: max-content max-content minmax(0, 1fr);
}

.node-graph-workspace[data-slider-layout="value-unit-right"] .node-slider-readout {
  grid-template-columns: minmax(0, 1fr) max-content max-content;
}

.node-graph-workspace[data-slider-layout="value-unit-left"] .node-slider-readout-label,
.node-graph-workspace[data-slider-layout="value-unit-right"] .node-slider-readout-label {
  display: none;
}

.node-graph-workspace[data-slider-layout="value-unit-left"] .node-slider-readout-value {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: start;
  text-align: left;
}

.node-graph-workspace[data-slider-layout="value-unit-left"] .node-slider-readout-unit {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: start;
  min-width: 0;
  text-align: left;
}

.node-graph-workspace[data-slider-layout="value-unit-right"] .node-slider-readout-value {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  text-align: right;
}

.node-graph-workspace[data-slider-layout="value-unit-right"] .node-slider-readout-unit {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  min-width: 0;
  text-align: right;
}

.node-graph-workspace[data-slider-layout="label-outside"] .node-slider-readout,
.node-graph-workspace[data-slider-layout="label-outside-no-unit"] .node-slider-readout,
.node-graph-workspace[data-slider-layout="value-outside"] .node-slider-readout {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  background:
    linear-gradient(#080b0d, #080b0d)
      left bottom / 100% 50%
      no-repeat;
}

.node-graph-workspace[data-slider-layout="label-outside"] .node-slider-readout::before,
.node-graph-workspace[data-slider-layout="label-outside"] .node-slider-readout::after,
.node-graph-workspace[data-slider-layout="label-outside"] .node-slider-amount-fill,
.node-graph-workspace[data-slider-layout="label-outside"] .node-slider-readout-portal,
.node-graph-workspace[data-slider-layout="label-outside-no-unit"] .node-slider-readout::before,
.node-graph-workspace[data-slider-layout="label-outside-no-unit"] .node-slider-readout::after,
.node-graph-workspace[data-slider-layout="label-outside-no-unit"] .node-slider-amount-fill,
.node-graph-workspace[data-slider-layout="label-outside-no-unit"] .node-slider-readout-portal,
.node-graph-workspace[data-slider-layout="value-outside"] .node-slider-readout::before,
.node-graph-workspace[data-slider-layout="value-outside"] .node-slider-readout::after,
.node-graph-workspace[data-slider-layout="value-outside"] .node-slider-amount-fill,
.node-graph-workspace[data-slider-layout="value-outside"] .node-slider-readout-portal {
  inset-block: 50% 0;
  clip-path: none;
}

.node-graph-workspace[data-slider-layout="label-outside"] .node-choice-debug-layer,
.node-graph-workspace[data-slider-layout="label-outside-no-unit"] .node-choice-debug-layer,
.node-graph-workspace[data-slider-layout="value-outside"] .node-choice-debug-layer {
  top: 50%;
  right: 0;
  width: 100%;
  height: 50%;
}

.node-graph-workspace[data-slider-layout="label-outside"] .node-slider-readout-label,
.node-graph-workspace[data-slider-layout="label-outside-no-unit"] .node-slider-readout-label {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding-left: 0;
}

.node-graph-workspace[data-slider-layout="label-outside"] .node-slider-readout-value,
.node-graph-workspace[data-slider-layout="label-outside-no-unit"] .node-slider-readout-value {
  display: none;
}

.node-graph-workspace[data-slider-layout="label-outside"] .node-slider-readout-unit {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  text-align: right;
}

.node-graph-workspace[data-slider-layout="label-outside-no-unit"] .node-slider-readout-unit {
  display: none;
}

.node-graph-workspace[data-slider-layout="value-outside"] .node-slider-readout-label {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding-left: 0;
}

.node-graph-workspace[data-slider-layout="value-outside"] .node-slider-readout-value {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  min-width: var(--node-slider-unit-width);
  text-align: right;
}

.node-graph-workspace[data-slider-layout="value-outside"] .node-slider-readout-unit {
  display: none;
}

.node-graph-workspace[data-slider-layout="unit-only"] .node-slider-readout {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

.node-graph-workspace[data-slider-layout="unit-only"] .node-slider-readout-label,
.node-graph-workspace[data-slider-layout="unit-only"] .node-slider-readout-value {
  display: none;
}

.node-graph-workspace[data-slider-layout="unit-only"] .node-slider-readout-unit {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  text-align: right;
}

.node-graph-workspace[data-slider-layout="value-focus"] .node-slider-readout {
  grid-template-columns: minmax(0, 1fr) minmax(var(--node-slider-unit-width), auto);
  grid-template-rows: minmax(0, 1fr);
  column-gap: 4px;
}

.node-graph-workspace[data-slider-layout="value-focus"] .node-slider-readout-label {
  display: none;
}

.node-graph-workspace[data-slider-layout="value-focus"] .node-slider-readout-value {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  text-align: left;
}

.node-graph-workspace[data-slider-layout="value-focus"] .node-slider-readout-unit {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  text-align: center;
}

.node-parameter-metadata-popover {
  --metadata-popover-min-width: var(--node-unified-window-min-width, 24px);
  --metadata-popover-min-height: var(--node-unified-window-min-height, 120px);
  /* Shared Parameter + Display Settings form chrome (type / row / pad). */
  /* Row = type height + 3px top + 3px bottom (was ~32px with ~14px pad each side). */
  --metadata-control-row-height: 22px;
  --metadata-row-pad-y: 3px;
  --metadata-label-size: 0.76rem;
  --metadata-field-name-size: 0.72rem;
  --metadata-control-size: 0.86rem;
  --metadata-button-size: 0.78rem;
  --metadata-section-title-size: 0.78rem;
  --metadata-section-title-height: 22px;
  --metadata-hint-size: 0.82rem;
  --metadata-cell-pad-x: 2px;
  --metadata-cell-pad-l: 4px;
  --metadata-label-gap: 3px;
  /* Shared name column so Range/Fields number widgets line up. */
  --metadata-label-col: 6.75em;
  position: fixed;
  z-index: 20;
  box-sizing: border-box;
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  width: var(--metadata-popover-width, var(--node-unified-window-default-width, 380px));
  height: var(--metadata-popover-height, var(--node-unified-window-default-height, 620px));
  min-width: var(--node-unified-window-min-width, 24px);
  min-height: var(--node-unified-window-min-height, 120px);
  max-width: none;
  max-height: none;
  /* Shell does not scroll — heading/nav stay fixed; body grid is the scrollport. */
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(127, 199, 217, 0.42);
  border-radius: var(--node-module-frame-radius);
  corner-shape: var(--node-module-corner-shape, squircle);
  background: rgba(27, 30, 34, 0.98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.node-parameter-metadata-popover,
.node-parameter-metadata-popover * {
  min-width: 0;
  min-inline-size: 0;
}

.node-parameter-metadata-popover.node-unified-window {
  min-width: var(--node-unified-window-min-width, 24px);
  min-height: var(--node-unified-window-min-height, 120px);
}

.node-parameter-metadata-popover[hidden] {
  display: none;
}

.metadata-popover-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.metadata-popover-grid button {
  min-height: 30px;
  padding: 0;
  font-size: 0.72rem;
}

.metadata-popover-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
}

.metadata-popover-grid[hidden],
.node-trace-display-settings-grid[hidden] {
  display: none !important;
}

/* Empty inspector pages sit BELOW the unified nav (heading → nav → empty).
   Compact — do not invent a giant centered void under a tall shared seat. */
.node-unified-inspector-empty {
  display: block;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 8px 8px 12px;
  overflow: auto;
  color: rgba(243, 241, 236, 0.55);
  font: 0.78rem/1.35 var(--mono, "Cascadia Mono", Consolas, monospace);
  text-align: left;
  letter-spacing: 0.01em;
}

.node-unified-inspector-empty-hint {
  margin: 0 4px 8px;
  color: rgba(243, 241, 236, 0.55);
  font-size: 0.74rem;
}

.node-unified-inspector-module-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.node-unified-inspector-module-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid rgba(127, 199, 217, 0.12);
  border-radius: 0;
  background: transparent;
  color: rgba(243, 241, 236, 0.92);
  font: 650 0.82rem/1 inherit;
  text-align: left;
  cursor: var(--node-dot-cursor);
}

.node-unified-inspector-module-item:hover,
.node-unified-inspector-module-item:focus-visible {
  background: rgba(40, 90, 110, 0.35);
  outline: none;
}

.node-unified-inspector-module-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-unified-inspector-module-type {
  color: rgba(226, 168, 109, 0.82);
  font-size: 0.7rem;
  font-weight: 650;
  white-space: nowrap;
}

.node-unified-inspector-empty[hidden] {
  display: none !important;
}

/* Parameter / Display popovers: heading + nav fixed, body scrolls. */
.node-parameter-metadata-popover,
.node-trace-display-settings-popover {
  display: flex !important;
  flex-direction: column;
  align-content: stretch;
  justify-content: flex-start;
  justify-items: stretch;
  grid-template-columns: unset;
  grid-auto-rows: unset;
}

.node-parameter-metadata-popover > .scene-context-heading,
.node-trace-display-settings-popover > .scene-context-heading,
.node-parameter-metadata-popover > .node-unified-window-nav-host,
.node-trace-display-settings-popover > .node-unified-window-nav-host {
  flex: 0 0 auto;
  flex-shrink: 0;
}

.node-parameter-metadata-popover > .metadata-popover-grid,
.node-trace-display-settings-popover > .metadata-popover-grid,
.node-trace-display-settings-popover > .node-trace-display-settings-grid {
  flex: 1 1 auto;
  min-height: 0;
  /* Wheel-scroll body (scrollbar hidden via rules below). */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/*
 * No height compression when the window is shortened.
 * Form rows keep fixed content size; the body scrolls instead of crushing rows
 * into each other (which caused overlap).
 */
#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid {
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  /* Pack to top; free space is empty scroll room, never redistributed into rows. */
  justify-content: start;
}

#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-field-actions,
#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-section-title,
#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-choices-label,
#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-tooltip-label,
#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-smoothing-mode-section,
#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-smoothing-type-section,
#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-advanced-toggle,
#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-range-section
  > label,
#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-identity-section
  > label,
#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-toggle-section
  > label {
  flex-shrink: 0;
  align-self: start;
  max-height: none;
}

#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-field-actions {
  height: var(--metadata-control-row-height);
  min-height: var(--metadata-control-row-height);
  max-height: var(--metadata-control-row-height);
}

#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-section-title {
  height: var(--metadata-section-title-height, 24px);
  min-height: var(--metadata-section-title-height, 24px);
  max-height: var(--metadata-section-title-height, 24px);
}

#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-range-section
  > label:not(.metadata-curve-sensitivity-label),
#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-identity-section
  > label,
#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-toggle-section
  > label {
  height: var(--metadata-control-row-height);
  min-height: var(--metadata-control-row-height);
  max-height: var(--metadata-control-row-height);
}

#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  input:not([type="checkbox"]),
#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  select,
#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  button {
  height: var(--metadata-control-row-height);
  min-height: var(--metadata-control-row-height);
  max-height: var(--metadata-control-row-height);
  flex-shrink: 0;
}

/* Multi-line SENSITIVITY block: natural height only, never crushed to 0. */
#nodeParameterMetadataPopover.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-range-section
  > .metadata-curve-sensitivity-label {
  height: auto;
  min-height: calc(var(--metadata-control-row-height) + 1.25em);
  max-height: none;
}

.node-parameter-metadata-popover > .node-unified-inspector-empty,
.node-trace-display-settings-popover > .node-unified-inspector-empty,
.node-module-actions-window > .node-unified-inspector-empty {
  flex: 0 0 auto;
}

.node-parameter-metadata-popover[hidden],
.node-trace-display-settings-popover[hidden] {
  display: none !important;
}

.metadata-popover-grid label {
  /* Label hugs content so value/stepper get the width when the window is narrow. */
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: var(--metadata-label-gap, 3px);
  gap: 0 var(--metadata-label-gap, 3px);
  min-width: 0;
  color: var(--muted);
  font-size: var(--metadata-label-size, 0.76rem);
}

.metadata-popover-grid label > span:first-child {
  white-space: nowrap;
  letter-spacing: 0.01em;
  font-weight: 700;
  font-size: var(--metadata-field-name-size, 0.72rem);
}
.metadata-parameter-picker-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}
.metadata-parameter-picker-controls > select {
  min-width: 0;
  width: 100%;
}
.metadata-parameter-visibility-stepper {
  display: grid;
  grid-template-columns: 1.6rem 1.6rem;
  align-items: stretch;
  min-height: var(--metadata-control-row-height, 32px);
}
.metadata-parameter-visibility-stepper button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(127, 199, 217, 0.28);
  background: rgb(16, 22, 26);
  color: rgba(243, 241, 236, 0.95);
  font: 700 1.05rem/1 inherit;
  cursor: var(--node-dot-cursor);
}
.metadata-parameter-visibility-stepper button:first-child {
  border-radius: 3px 0 0 3px;
}
.metadata-parameter-visibility-stepper button:last-child {
  border-left: 0;
  border-radius: 0 3px 3px 0;
}
.metadata-parameter-visibility-stepper button[aria-pressed="true"] {
  background: rgba(40, 90, 110, 0.55);
  color: rgba(180, 255, 220, 0.98);
}
.metadata-parameter-visibility-stepper button:disabled {
  opacity: 0.35;
}

.metadata-field-actions,
.metadata-field-section,
.metadata-toggle-section {
  display: grid;
  gap: 0;
  /* Visible — never clip MIN/MAX/steppers inside nested cards. */
  overflow: visible;
  border: 1px solid rgba(127, 199, 217, 0.24);
  border-radius: 5px;
  background: rgba(5, 9, 11, 0.62);
}

/* Metaparameter row: Set Default / Restore Default / Make / Pin to canvas. */
.metadata-field-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Parameter popover only: keep actions on one full-width row of the flat grid. */
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-field-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: visible;
}

.metadata-make-wrap {
  position: relative;
  min-width: 0;
}

.metadata-make-wrap > button {
  width: 100%;
}

.metadata-make-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 8;
  display: grid;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: rgba(8, 12, 16, 0.98);
}

.metadata-make-menu[hidden] {
  display: none;
}

.metadata-make-menu button {
  width: 100%;
  border-right: 0;
  text-align: left;
  padding: 0 0.55rem;
}

.metadata-pin-canvas-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: var(--metadata-control-row-height, 32px);
  margin: 0;
  padding: 0 0.35rem;
  font-size: var(--metadata-button-size, 0.72rem);
  white-space: nowrap;
}

/* Single action (Display Settings "Defaults") fills the full row width. */
.metadata-field-actions:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

/* Display Settings: Copy | Paste | Defaults on one row. */
.node-trace-display-settings-popover > .metadata-popover-grid > .metadata-field-actions.is-clipboard-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metadata-field-actions > :only-child {
  width: 100%;
  min-width: 0;
  grid-column: 1 / -1;
}

.metadata-section-title {
  display: grid;
  align-items: center;
  height: var(--metadata-section-title-height, 24px);
  min-height: var(--metadata-section-title-height, 24px);
  max-height: var(--metadata-section-title-height, 24px);
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: color-mix(in srgb, var(--accent) 88%, white 8%);
  font-size: var(--metadata-section-title-size, 0.78rem);
  font-weight: 700;
  letter-spacing: 0;
}

.metadata-field-section {
  grid-template-columns: minmax(0, 1fr);
}

.metadata-toggle-section {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metadata-field-section label,
.metadata-toggle-section label {
  min-height: var(--metadata-control-row-height, 32px);
  padding: 0;
  border-right: 1px solid rgba(127, 199, 217, 0.14);
  border-bottom: 1px solid rgba(127, 199, 217, 0.14);
}

/* 1-col field stacks: no right border. Toggle 2-col: clear on even cells. */
.metadata-field-section:not(.metadata-smoothing-mode-section):not(.metadata-smoothing-type-section) label,
.metadata-toggle-section label:nth-child(2n) {
  border-right: 0;
}

.metadata-field-section .metadata-curve-label,
.metadata-field-section .metadata-curve-sensitivity-label {
  border-right: 0;
}

/* Range cells: fixed name column so steppers/number widgets share one edge. */
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-range-section
  > label {
  grid-template-columns: var(--metadata-label-col, 6.75em) minmax(0, 1fr);
  column-gap: var(--metadata-label-gap, 3px);
  padding: 0 var(--metadata-cell-pad-x, 2px) 0 var(--metadata-cell-pad-l, 4px);
}

.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-range-section
  > label
  > span:first-child {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--metadata-field-name-size, 0.72rem);
  font-weight: 700;
  letter-spacing: 0;
}

/* SKEW select fills the value column without forcing a fat label. */
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-range-section
  > .metadata-curve-label
  > select {
  min-width: 0;
  width: 100%;
}

/* SENSITIVITY: heading + stepper on row 1, hint full-width below. */
.metadata-curve-sensitivity-label {
  align-items: center;
  /* Natural height only — never allow height compression to collapse this row. */
  min-height: calc(var(--metadata-control-row-height, 32px) + 1.25em);
  height: auto;
  max-height: none;
  row-gap: 1px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.metadata-curve-sensitivity-label > .metadata-curve-sensitivity-heading {
  grid-column: 1;
  grid-row: 1;
  max-width: none;
  font-size: var(--metadata-field-name-size, 0.72rem);
  font-weight: 700;
}

.metadata-curve-sensitivity-label > .metadata-stepper-control {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.metadata-curve-sensitivity-hint {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  padding: 1px 0 2px;
  color: rgba(205, 214, 216, 0.78);
  font-size: var(--metadata-hint-size, 0.82rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  white-space: normal;
  text-transform: none;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

.metadata-field-section label:last-child,
.metadata-toggle-section label:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.metadata-smoothing-mode-section,
.metadata-smoothing-type-section {
  padding: 3px;
  gap: 3px;
}

/*
 * Parameter Settings only (not Display Settings — that also uses
 * .node-parameter-metadata-popover as a chrome class and must stay 1-col full width).
 * Flat 2-column body grid; Toggles use display:contents. Range/Fields stay 1-col.
 */
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  /* start, not stretch: short window must not redistribute row heights. */
  align-items: start;
  grid-auto-rows: max-content;
  gap: 0;
  box-sizing: border-box;
}

.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-field-actions,
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-section-title,
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-choices-label,
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-tooltip-label,
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-smoothing-mode-section,
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-smoothing-type-section,
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-advanced-toggle,
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-full-row {
  grid-column: 1 / -1;
}

/* PARAMETER picker shares the same name/value column edge as Range/Fields. */
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-parameter-picker-row {
  grid-template-columns: var(--metadata-label-col, 6.75em) minmax(0, 1fr);
  column-gap: var(--metadata-label-gap, 3px);
  padding: 0 var(--metadata-cell-pad-x, 2px) 0 var(--metadata-cell-pad-l, 4px);
}

/* Range + Fields identity: one column each (full width). Toggles flatten 2-col. */
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-range-section,
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-identity-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-column: 1 / -1;
}

.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-toggle-section {
  display: contents;
}

.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-range-section > label,
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-identity-section > label,
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-toggle-section > label {
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--metadata-control-row-height, 32px);
  margin: 0;
  padding: 0 var(--metadata-cell-pad-x, 2px) 0 var(--metadata-cell-pad-l, 4px);
  border: 0;
  border-right: 1px solid rgba(127, 199, 217, 0.14);
  border-bottom: 1px solid rgba(127, 199, 217, 0.14);
  background: rgba(5, 9, 11, 0.62);
}

.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-range-section > label,
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-identity-section > label {
  border-right: 0;
}

.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-toggle-section > label:nth-child(2n) {
  border-right: 0;
}

.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-identity-section
  > label {
  grid-template-columns: var(--metadata-label-col, 6.75em) minmax(0, 1fr);
  column-gap: var(--metadata-label-gap, 3px);
  padding: 0 var(--metadata-cell-pad-x, 2px) 0 var(--metadata-cell-pad-l, 4px);
}

.node-parameter-metadata-popover:not(.node-trace-display-settings-popover)
  > .metadata-popover-grid
  > .metadata-identity-section
  > label
  > span:first-child {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--metadata-field-name-size, 0.72rem);
  font-weight: 700;
  letter-spacing: 0;
}

/* Full-width rows inside the flat grid when a lone control needs the line. */
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-range-section > .metadata-curve-sensitivity-label {
  grid-column: 1 / -1;
  border-right: 0;
  /* 2-row layout: heading|stepper, then hint — same name column as Range. */
  grid-template-columns: var(--metadata-label-col, 6.75em) minmax(0, 1fr);
  grid-template-rows: auto auto;
}

/* Smoothing blocks stay self-contained full-width (not display:contents). */
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-smoothing-mode-section,
.node-parameter-metadata-popover:not(.node-trace-display-settings-popover) > .metadata-popover-grid > .metadata-smoothing-type-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
}

/* Display Settings: single-column full-width body (never share param 2-col flat).
   Pack to content so a short window scrolls instead of stacking rows on top of each other. */
.node-trace-display-settings-popover > .metadata-popover-grid,
.node-trace-display-settings-popover > .node-trace-display-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  justify-content: start;
  width: 100%;
  box-sizing: border-box;
}

.node-trace-display-settings-body {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: max-content;
}

.node-trace-display-settings-popover > .metadata-popover-grid > *,
.node-trace-display-settings-popover > .node-trace-display-settings-grid > * {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
}

.metadata-smoothing-mode-title {
  font-size: var(--metadata-section-title-size, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--accent) 78%, rgba(205, 214, 216, 0.82) 22%);
}

.metadata-smoothing-mode-group {
  /* Flex so 4-button TYPE and 5-button SOURCE both fill full width evenly. */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(127, 199, 217, 0.24);
  border-radius: 5px;
}

.metadata-smoothing-mode-button {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  min-height: var(--metadata-control-row-height, 32px);
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 0;
  background: rgba(5, 9, 11, 0.62);
  color: rgba(205, 214, 216, 0.82);
  font-size: 1.02rem;
  line-height: 1;
  cursor: var(--node-dot-cursor);
}

.metadata-smoothing-mode-button:last-child {
  border-right: 0;
}

.metadata-smoothing-mode-button:hover {
  background: color-mix(in srgb, var(--accent) 14%, rgba(5, 9, 11, 0.62));
}

.metadata-smoothing-mode-button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 30%, rgba(5, 9, 11, 0.62));
  color: white;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent);
}

.metadata-smoothing-mode-status {
  margin: 0;
  padding: 0;
  font-size: var(--metadata-field-name-size, 0.72rem);
  line-height: 1.3;
  color: rgba(205, 214, 216, 0.72);
}

.metadata-popover-grid .metadata-checkbox-label {
  grid-template-columns: auto minmax(0, 1fr);
  color: rgba(205, 214, 216, 0.82);
  font-size: var(--metadata-label-size, 0.76rem);
  font-weight: 700;
  text-transform: none;
}

.metadata-popover-grid .node-trace-display-sync-row {
  display: inline-grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 4px;
}

.metadata-popover-grid input,
.metadata-popover-grid select,
.metadata-popover-grid textarea,
.metadata-popover-grid button {
  width: 100%;
  min-width: 0;
  height: var(--metadata-control-row-height, 32px);
  padding: 0 2px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #05090b;
  color: var(--text);
  font-family: Consolas, "Courier New", monospace;
  font-size: var(--metadata-control-size, 0.86rem);
}

.metadata-popover-grid textarea {
  height: auto;
  min-height: 52px;
  padding: 4px;
  resize: vertical;
  font-size: 0.8rem;
}

.metadata-popover-grid .metadata-choices-label {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  min-height: 68px;
  padding: 0;
  border: 1px solid rgba(127, 199, 217, 0.24);
  border-radius: 5px;
  background: rgba(5, 9, 11, 0.62);
}

.metadata-popover-grid .metadata-choices-label > span {
  display: grid;
  align-items: center;
  min-height: 18px;
  padding: 0 3px;
  color: var(--muted);
  font-size: var(--metadata-field-name-size, 0.72rem);
  font-weight: 700;
}

.metadata-popover-grid .metadata-choices-label textarea {
  min-height: 48px;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

/* Tip row grows with the textarea so .metadata-popover-grid scrollHeight updates. */
.metadata-popover-grid .metadata-tooltip-label {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  align-content: start;
  align-items: stretch;
}

/* Grow with tip text; no inner scrollbar — the Parameter Settings body scrolls. */
.metadata-popover-grid .metadata-tooltip-label textarea {
  box-sizing: border-box;
  min-height: 4.5em;
  max-height: none;
  height: auto;
  overflow: hidden;
  resize: none;
  padding: 8px 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  field-sizing: content;
  font-size: 1rem;
  line-height: 1.4;
}

.metadata-popover-grid input[type="checkbox"] {
  width: 14px;
  height: 14px;
  padding: 0;
  accent-color: var(--accent);
}

.metadata-popover-grid label.is-choice-divide-idle {
  opacity: 0.72;
}


.metadata-popover-grid button {
  align-self: end;
  font-family: inherit;
  font-size: var(--metadata-button-size, 0.78rem);
}

.metadata-popover-grid .metadata-tooltip-label > span:first-child {
  font-size: var(--metadata-field-name-size, 0.72rem);
  font-weight: 700;
  padding: 0 3px;
  min-height: 18px;
}

/* Shared heading type for Parameter + Display Settings shells. */
.node-parameter-metadata-popover > .scene-context-heading .scene-context-title {
  font-size: 0.92rem;
}

.node-parameter-metadata-popover > .scene-context-heading .scene-context-title small {
  font-size: var(--metadata-field-name-size, 0.72rem);
}

.node-parameter-metadata-popover > .metadata-popover-grid,
.node-parameter-metadata-popover > .node-trace-display-settings-grid {
  /* SE grip clearance — keep tight; was 14/22px empty strip. */
  padding-bottom: 3px;
}

/*
 * App-wide label + −/+ value row (Display Settings, gradient Pos, macro face, …).
 * Same grid rhythm as .metadata-popover-grid label so hosts outside the popover match.
 */
.node-trace-display-line-burn-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--metadata-label-gap, 3px);
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: var(--metadata-label-size, 0.76rem);
}

.node-trace-display-line-burn-row > span:first-child {
  white-space: nowrap;
  letter-spacing: 0.01em;
  font-weight: 700;
  font-size: var(--metadata-field-name-size, 0.72rem);
}

.node-trace-display-line-burn-row.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.metadata-stepper-control {
  --stepper-split: color-mix(in srgb, var(--accent) 18%, transparent);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px 16px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #05090b;
}

.metadata-stepper-control input {
  grid-column: 1;
  grid-row: 1;
  height: var(--metadata-control-row-height, 32px);
  border: 0;
  border-right: 1px solid var(--stepper-split);
  border-radius: 0;
  text-align: center;
  font-size: var(--metadata-control-size, 0.86rem);
  padding: 0 2px;
}

.node-trace-display-settings-popover input[data-trace-display-field][readonly],
.metadata-stepper-control input[readonly],
input[data-global-scope-number-drag="true"][readonly],
.scene-context-global-smoothing-input[readonly] {
  cursor: var(--node-dot-cursor);
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
}

.node-trace-display-settings-popover input[data-trace-display-field].trace-display-field-editing,
.metadata-stepper-control input:not([readonly]):focus,
input[data-global-scope-number-drag="true"]:not([readonly]):focus,
.scene-context-global-smoothing-input:not([readonly]):focus {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  caret-color: currentColor;
}

#nodeTraceDisplaySkipSamples {
  text-align: center;
}

.metadata-stepper-control button {
  grid-row: 1;
  width: 16px;
  height: var(--metadata-control-row-height, 32px);
  min-height: var(--metadata-control-row-height, 32px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(14, 20, 24, 0.96);
  color: rgba(205, 214, 216, 0.88);
  font-size: 0.85rem;
}

.metadata-stepper-control button:first-child {
  grid-column: 2;
  border-right: 1px solid var(--stepper-split, color-mix(in srgb, var(--accent) 18%, transparent));
}

.metadata-stepper-control button:last-child {
  grid-column: 3;
  border-left: 0;
}

.metadata-field-actions button,
.metadata-advanced-toggle {
  min-height: var(--metadata-control-row-height, 32px);
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 0;
  background: rgba(12, 18, 22, 0.86);
  color: color-mix(in srgb, var(--text) 86%, transparent);
  text-align: center;
  font-size: var(--metadata-button-size, 0.78rem);
}

.metadata-field-actions button:last-child {
  border-right: 0;
}

.metadata-field-actions button.dirty {
  background: color-mix(in srgb, #6cff9a 20%, rgba(12, 18, 22, 0.9));
  color: rgba(218, 255, 226, 0.96);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #6cff9a 44%, transparent),
    0 0 12px color-mix(in srgb, #6cff9a 26%, transparent);
}

/*
 * Display Settings shell chrome.
 * Flex column lives above (shared with parameter metadata popover).
 */
.node-trace-display-settings-popover {
  /* Inherit shared Parameter/Display type scale from .node-parameter-metadata-popover. */
  /* Tighter chrome than Parameter Settings — reclaim pad, keep type readable. */
  --metadata-row-pad-y: 0px;
  --metadata-cell-pad-x: 1px;
  --metadata-cell-pad-l: 3px;
  --metadata-label-gap: 2px;
  --metadata-field-name-size: 0.8rem;
  --metadata-control-size: 0.9rem;
  --metadata-label-size: 0.82rem;
  --metadata-section-title-size: 0.82rem;
  --ds-row-h: var(--metadata-control-row-height, 22px);
  --ds-latch-h: var(--metadata-control-row-height, 22px);
  --ds-color-host-h: 168px;
  --ds-label-col: minmax(48px, 0.3fr);
  --ds-hairline: color-mix(in srgb, var(--accent) 14%, transparent);
  --ds-split: color-mix(in srgb, var(--accent) 18%, transparent);
  grid-template-rows: var(--node-floating-window-header-height) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  z-index: 84;
}

.node-parameter-metadata-popover .scene-context-heading {
  margin: 0;
}

.node-trace-display-settings-grid {
  align-content: start;
  grid-auto-rows: max-content;
  min-height: 0;
  overflow: auto;
  padding: 0;
}

.node-trace-display-settings-popover .metadata-popover-grid label,
.node-trace-display-settings-popover .metadata-popover-grid .metadata-choices-label {
  gap: 0;
  grid-template-columns: var(--ds-label-col) minmax(0, 1fr);
  padding: var(--metadata-row-pad-y, 0px) 0;
  box-sizing: border-box;
}

.node-trace-display-settings-popover[data-display-settings-type="waterfall"] .node-trace-display-line-burn-row,
.node-trace-display-settings-popover[data-display-settings-type="waterfallRgb"] .node-trace-display-line-burn-row,
.node-trace-display-settings-popover[data-display-settings-type="waterfallXyz"] .node-trace-display-line-burn-row {
  grid-template-columns: 9.5em minmax(0, 1fr);
}

.node-trace-display-settings-popover[data-display-settings-type="waterfall"] .node-trace-display-line-burn-row > span:first-child,
.node-trace-display-settings-popover[data-display-settings-type="waterfallRgb"] .node-trace-display-line-burn-row > span:first-child,
.node-trace-display-settings-popover[data-display-settings-type="waterfallXyz"] .node-trace-display-line-burn-row > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.node-trace-display-settings-popover .metadata-popover-grid label.node-trace-display-line-burn-row,
.node-trace-display-settings-popover .metadata-popover-grid .node-trace-display-line-burn-row {
  grid-template-columns: var(--ds-label-col, 7.25em) minmax(0, 1fr);
  column-gap: 3px;
  min-height: var(--ds-row-h);
  overflow: visible;
}

.node-trace-display-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-column: 1 / -1;
  column-gap: 0;
  row-gap: 0;
  min-width: 0;
}

.node-trace-display-settings-popover .node-trace-display-choice-grid .node-trace-display-line-burn-row {
  grid-template-columns: 6.5em minmax(0, 1fr);
  column-gap: 3px;
  min-width: 0;
}

/* Spectrogram: one control per row; label | dropdown. Do not 2-col pack. */
.node-trace-display-settings-popover[data-display-settings-type="spectrogramBurn"] .node-trace-display-choice-grid {
  grid-template-columns: minmax(0, 1fr);
}

.node-trace-display-settings-popover[data-display-settings-type="spectrogramBurn"] .node-trace-display-line-burn-row,
.node-trace-display-settings-popover[data-display-settings-type="spectrogramBurn"] .metadata-popover-grid label.node-trace-display-line-burn-row,
.node-trace-display-settings-popover[data-display-settings-type="spectrogramBurn"] .node-trace-display-choice-grid .node-trace-display-line-burn-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 4px;
  min-width: 0;
  pointer-events: auto;
}

.node-trace-display-settings-popover[data-display-settings-type="spectrogramBurn"] .node-trace-display-line-burn-row > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 var(--metadata-cell-pad-x, 2px) 0 var(--metadata-cell-pad-l, 4px);
  font-weight: 700;
}

.node-trace-display-settings-popover[data-display-settings-type="spectrogramBurn"] .node-trace-display-line-burn-row > select {
  min-width: 0;
  width: 100%;
  pointer-events: auto;
  z-index: 1;
}

.node-trace-display-settings-popover .metadata-popover-grid label.node-trace-display-line-burn-row > span:first-child {
  overflow: visible;
  text-overflow: unset;
  padding: 0 var(--metadata-cell-pad-x, 2px) 0 var(--metadata-cell-pad-l, 4px);
  font-weight: 700;
  font-size: var(--metadata-field-name-size, 0.72rem);
}

.node-trace-display-settings-popover .metadata-popover-grid .metadata-checkbox-label {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 4px;
  min-height: var(--ds-row-h);
  overflow: visible;
  padding: 0 3px;
  white-space: nowrap;
}

.node-trace-display-settings-popover .metadata-field-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  align-self: start;
  grid-column: 1 / -1;
  min-height: max-content;
  overflow: visible;
}

/* Mode dropdown removed (one face per module). */
.node-trace-display-settings-popover .node-trace-display-mode-title,
.node-trace-display-settings-popover .node-trace-display-mode-section,
.node-trace-display-settings-popover [data-trace-display-mode-select] {
  display: none !important;
}

.node-trace-display-settings-popover [hidden] {
  display: none !important;
}

/* Legacy checkbox toggles only — latch buttons need pointer hits. */
.node-trace-display-settings-popover input[data-trace-display-toggle] {
  pointer-events: none;
}

.node-trace-display-settings-popover .metadata-stepper-control {
  grid-template-columns: minmax(0, 1fr);
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.node-trace-display-settings-popover .metadata-stepper-control input,
.node-trace-display-settings-popover .metadata-popover-grid .metadata-stepper-control input {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.node-trace-display-settings-popover .metadata-stepper-control input:not([readonly]):focus,
.node-trace-display-settings-popover .metadata-stepper-control input.trace-display-field-editing {
  outline: none;
  border: 0;
  box-shadow: none;
}

/* Drag fields are enough — hide −/+ on every Display Settings face. */
.node-trace-display-settings-popover .metadata-stepper-control > button {
  display: none !important;
}

.node-trace-display-settings-popover .metadata-close-prompt {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.node-trace-display-settings-popover .metadata-popover-grid label > span:first-child,
.node-trace-display-settings-popover .node-trace-display-preview-shell > span:first-child {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  text-overflow: clip;
  white-space: nowrap;
}

.node-trace-display-settings-popover .metadata-popover-grid .metadata-icon-label {
  display: grid;
  gap: 0;
  justify-items: center;
  padding: 0;
}

.node-trace-display-settings-popover .metadata-popover-grid label:has(> .metadata-icon-label) {
  grid-template-columns: 30px minmax(0, 1fr);
}

.node-trace-display-settings-popover .metadata-popover-grid label > .metadata-icon-label {
  align-self: stretch;
  box-sizing: border-box;
  width: 30px;
  min-width: 0;
  font-size: 20px;
  line-height: 1;
  place-items: center;
}

.node-trace-display-settings-popover :is(input, textarea, select) {
  user-select: text;
  -webkit-user-select: text;
  -webkit-user-drag: none;
}

/*
 * Title steppers (title | value | − | +)
 *  .title-stepper      — plain title (e.g. gradient Pos)
 *  .hue-title-stepper  — pure-hue title fill (drag = hue), smart ink
 */
.title-stepper,
.hue-title-stepper {
  display: grid;
  grid-template-columns: var(--ds-label-col, minmax(52px, 0.34fr)) minmax(0, 1fr);
}

.hue-title-stepper {
  grid-template-columns: var(--ds-label-col, minmax(52px, 0.28fr)) minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: var(--ds-row-h, var(--metadata-control-row-height, 32px));
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ds-hairline, color-mix(in srgb, var(--accent) 14%, transparent));
  color: var(--muted);
  font-size: var(--metadata-label-size, 0.76rem);
}

.title-stepper > input[type="hidden"],
.hue-title-stepper > input[type="hidden"] {
  display: none;
}

.title-stepper > .metadata-stepper-control,
.hue-title-stepper > .metadata-stepper-control {
  min-width: 0;
}

.title-stepper.is-disabled,
.hue-title-stepper.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.title-stepper-title {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--ds-row-h, var(--metadata-control-row-height, 32px));
  margin: 0;
  padding: 0 4px;
  border-right: 1px solid var(--ds-split, color-mix(in srgb, var(--accent) 18%, transparent));
  color: var(--muted);
  font-size: var(--metadata-field-name-size, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Defeat global button chrome for hue-title cells */
.hue-title-stepper-title {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: var(--ds-row-h, 28px) !important;
  min-height: var(--ds-row-h, 28px) !important;
  max-height: var(--ds-row-h, 28px) !important;
  margin: 0 !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-right: 1px solid var(--ds-split, color-mix(in srgb, var(--accent) 18%, transparent)) !important;
  border-radius: 0 !important;
  background: var(--hts-hue, #ff0000) !important;
  background-image: none !important;
  color: var(--hts-ink, #fff) !important;
  box-shadow: none !important;
  cursor: default;
  font: inherit;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  touch-action: none;
  user-select: none;
}

.hue-title-stepper-title:hover,
.hue-title-stepper-title:focus,
.hue-title-stepper-title:active {
  border-color: var(--ds-split, color-mix(in srgb, var(--accent) 18%, transparent)) !important;
  background: var(--hts-hue, #ff0000) !important;
  color: var(--hts-ink, #fff) !important;
  filter: none;
}

.hue-title-stepper-title:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.hue-title-stepper-hue-edit {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 650;
  text-align: center;
}

.hue-title-stepper-label {
  display: block;
  width: 100%;
  overflow: hidden;
  color: inherit;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.title-stepper input[data-sge-pos][readonly],
.title-stepper input[data-unit-stepper-drag][readonly] {
  cursor: var(--node-dot-cursor, ew-resize);
  user-select: none;
  caret-color: transparent;
}

/*
 * Display Settings · full-width SoundColorWidget host.
 * No side "Color |" column; plane/hue paint themselves (hue via --scw-hue-spectrum).
 */
.node-trace-display-settings-popover .node-trace-display-color-widget-row,
.node-trace-display-settings-popover .node-trace-display-color-widget-row.no-side-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-height: var(--ds-color-host-h);
  height: auto;
  overflow: visible;
  padding: 0;
}

.node-trace-display-settings-popover .node-trace-display-color-widget-row > span:first-child,
.node-trace-display-settings-popover .node-trace-display-color-widget-row > input[type="hidden"] {
  display: none;
}

.node-trace-display-settings-popover .node-trace-display-color-widget-row.has-color-caption {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 4px;
}

.node-trace-display-settings-popover .node-trace-display-color-caption {
  display: block;
  font: 700 0.72rem/1 "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--text) 72%, transparent);
}

.node-trace-display-settings-popover .node-trace-display-color-widget-host {
  --color-widget-accent: color-mix(in srgb, var(--accent) 86%, transparent);
  --color-widget-bg: rgba(0, 5, 7, 0.42);
  --color-widget-border: color-mix(in srgb, var(--accent) 20%, transparent);
  --color-widget-control-border: color-mix(in srgb, var(--accent) 22%, transparent);
  --color-widget-hex-bg: rgba(0, 5, 7, 0.68);
  --color-widget-hex-ink: rgba(236, 251, 246, 0.9);
  --color-widget-label-ink: rgba(156, 164, 166, 0.78);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: var(--ds-color-host-h);
  overflow: visible;
}

.node-trace-display-settings-popover .node-trace-display-color-widget-host.scw-mount {
  display: grid;
  height: auto;
  min-height: var(--ds-color-host-h);
  overflow: visible;
  place-items: stretch;
}

.node-trace-display-settings-popover .node-trace-display-color-widget-host .scw-root {
  width: 100%;
  height: auto;
  min-height: var(--ds-color-host-h);
  gap: 0;
  /* Title strip is taller: hex line + color line. */
  grid-template-rows:
    auto
    minmax(56px, 1fr)
    minmax(18px, auto);
}

.node-trace-display-settings-popover .node-trace-display-color-widget-host button.scw-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
}

.node-trace-display-settings-popover .node-trace-display-color-widget-host button.scw-control.scw-hue {
  background-color: transparent !important;
  background-image: var(--scw-hue-spectrum) !important;
  background-origin: padding-box !important;
  background-clip: padding-box !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  cursor: default;
  overflow: hidden;
}

.node-trace-display-settings-popover .node-trace-display-color-widget-host button.scw-control:hover,
.node-trace-display-settings-popover .node-trace-display-color-widget-host .scw-label:hover,
.node-trace-display-settings-popover .node-trace-display-color-widget-host button.scw-control:focus,
.node-trace-display-settings-popover .node-trace-display-color-widget-host button.scw-control:focus-visible,
.node-trace-display-settings-popover .node-trace-display-color-widget-host .scw-label:focus,
.node-trace-display-settings-popover .node-trace-display-color-widget-host .scw-label:focus-visible,
.node-trace-display-settings-popover .node-trace-display-color-widget-host .scw-label[data-copied="true"],
.node-trace-display-settings-popover .node-trace-display-color-widget-host .scw-hex:focus,
.node-trace-display-settings-popover .node-trace-display-color-widget-host .scw-hex:focus-visible,
.node-gradient-selector-host button:hover,
.node-gradient-selector-host button:focus,
.node-gradient-selector-host button:focus-visible,
.node-gradient-selector-host button:active {
  border-color: var(--color-widget-control-border, transparent) !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}

.node-trace-display-settings-popover .node-trace-display-color-widget-host .scw-plane {
  min-height: 56px;
  cursor: crosshair;
  background: transparent !important;
}

.node-trace-display-settings-popover .node-trace-display-color-widget-host .scw-hue {
  min-height: 18px;
  cursor: default;
}

/* Title strip: hex on its own row (above), color swatch on its own row (below). */
.node-trace-display-settings-popover .node-trace-display-color-widget-host .scw-label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(28px, 1fr);
  align-items: stretch;
  height: auto;
  min-height: 52px;
  background: var(--color-widget-hex-bg);
  background-image: none;
}

.node-trace-display-settings-popover .node-trace-display-color-widget-host .scw-label::before {
  /* Swatch paints on the color row only (see .scw-label-text background). */
  display: none;
}

.node-trace-display-settings-popover .node-trace-display-color-widget-host .scw-hex {
  grid-row: 1;
  grid-column: 1;
  box-sizing: border-box !important;
  flex: none !important;
  align-self: stretch;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 4px 6px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-widget-control-border) !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: var(--color-widget-hex-ink) !important;
  -webkit-user-select: text;
  user-select: text;
}

.node-trace-display-settings-popover .node-trace-display-color-widget-host .scw-label-text {
  grid-row: 2;
  grid-column: 1;
  min-height: 28px;
  background: var(--scw-final-color, transparent);
}

.node-trace-display-settings-popover .node-trace-display-color-widget-host .scw-label-glyph {
  color: inherit;
}

/* Number Readout · Ghost Gradient flush under Background */
.node-trace-display-settings-popover .node-trace-display-trace-section .node-trace-display-gradient-title {
  margin: 0;
  border-top: 1px solid var(--ds-hairline);
}

.node-trace-display-settings-popover .node-trace-display-trace-section .node-gradient-selector-host {
  margin: 0;
  padding: 0;
}

/* Section / target headers */
.node-trace-display-settings-popover .metadata-section-title {
  display: grid;
  grid-column: 1 / -1;
  align-self: start;
  box-sizing: border-box;
  height: var(--ds-row-h);
  max-height: var(--ds-row-h);
  min-width: 0;
  min-height: var(--ds-row-h);
  place-items: center;
  overflow: hidden;
  padding: 0;
  font-size: var(--metadata-section-title-size, 0.82rem);
  line-height: 1;
  white-space: nowrap;
}

/* Output / stereo Trace: Swap in the label column; L | R over the steppers. */
.node-trace-display-settings-popover .metadata-section-title.node-trace-display-stereo-title {
  grid-template-columns: var(--ds-label-col) minmax(0, 1fr);
  place-items: center stretch;
  overflow: hidden;
  padding: 0;
}

.node-trace-display-settings-popover .node-trace-display-stereo-title > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.node-trace-display-settings-popover .node-trace-display-lr-title-spacer {
  display: block;
}

.node-trace-display-settings-popover .node-trace-display-lr-col-head {
  justify-self: center;
  text-align: center;
  font: 700 0.62rem/1 inherit;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--accent) 88%, white 12%);
}

/* Stereo Instant Waterfall: one Size/Blur/Bright label, two steppers under L | R. */
.node-trace-display-lr-row {
  display: grid;
  grid-template-columns: var(--ds-label-col) minmax(0, 1fr);
  align-items: stretch;
  column-gap: 6px;
  width: 100%;
  min-width: 0;
}

.node-trace-display-lr-shared-label {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 6px 0 8px;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.node-trace-display-lr-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
}

.node-trace-display-settings-popover .node-trace-display-lr-heads {
  align-items: center;
}

.node-trace-display-settings-popover .node-trace-display-lr-row .node-trace-display-stepper-only,
.node-trace-display-settings-popover .metadata-popover-grid .node-trace-display-lr-row .node-trace-display-stepper-only {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  padding-right: 4px;
}

.node-trace-display-settings-popover .node-trace-display-lr-pair > .node-trace-display-stepper-only + .node-trace-display-stepper-only {
  padding-right: 0;
  padding-left: 4px;
  border-left: 1px solid var(--ds-hairline, color-mix(in srgb, var(--accent) 14%, transparent));
}

.node-trace-display-lr-color-row {
  align-items: start;
  padding: 4px 0;
  /* Color widgets have their own L/R captions — do not reserve the stepper label column. */
  grid-template-columns: minmax(0, 1fr);
}

.node-trace-display-lr-color-row .node-trace-display-lr-shared-label {
  display: none;
}

.node-trace-display-settings-popover .node-trace-display-lr-color-row .node-trace-display-color-widget-row {
  min-width: 0;
}

.node-trace-display-settings-popover .node-trace-display-swap-lr {
  appearance: none;
  box-sizing: border-box;
  align-self: stretch;
  justify-self: stretch;
  width: auto !important;
  max-width: 100%;
  height: var(--ds-row-h) !important;
  min-height: 0 !important;
  min-width: 0;
  margin: 0;
  padding: 0 6px !important;
  border: 0 !important;
  border-right: 1px solid var(--ds-split, color-mix(in srgb, var(--accent) 18%, transparent)) !important;
  border-radius: 5px 0 0 5px !important;
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  color: color-mix(in srgb, var(--accent) 92%, white 8%) !important;
  box-shadow: none !important;
  font: 650 0.62rem/1 inherit;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.node-trace-display-settings-target {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--ds-row-h);
  overflow: hidden;
  padding: 0;
  border-block-end: var(--node-hairline, 1px) solid color-mix(in srgb, var(--accent) 25%, transparent);
  color: color-mix(in srgb, var(--accent-2) 90%, transparent);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

/* Dot title = text only; Secondary still has enable checkbox. */
.node-trace-display-settings-popover .node-trace-display-dot1-title {
  grid-template-columns: minmax(0, 1fr);
  place-items: center stretch;
}

.node-trace-display-settings-popover .node-trace-display-secondary-title {
  grid-template-columns: minmax(0, 1fr) var(--ds-row-h);
  place-items: center stretch;
}

.node-trace-display-settings-popover .node-trace-display-dot1-title > span,
.node-trace-display-settings-popover .node-trace-display-secondary-title > span {
  justify-self: center;
}

.node-trace-display-settings-popover .node-trace-display-secondary-title > input {
  justify-self: center;
  margin: 0;
  pointer-events: auto;
}

.node-trace-display-settings-popover .node-trace-display-stereo-colors-section {
  gap: 8px;
  padding: 6px;
  overflow: visible;
}

.node-trace-display-settings-popover .node-trace-display-stereo-colors-section .node-trace-display-color-widget-row {
  min-height: 0;
}

.node-trace-display-settings-popover .node-trace-display-stereo-colors-section .node-trace-display-color-widget-row.has-color-caption {
  grid-template-rows: auto var(--ds-color-host-h);
  gap: 4px;
}

/* Phosphor Dot: keep Ghost / Trail / Burn / Pixel density (energy residual).
   Only hide leftover 1D-trace thickness rows that do not apply to a 0D stamp. */
.node-trace-display-settings-popover[data-display-settings-type="dot"] .node-trace-display-trace-thickness-row,
.node-trace-display-settings-popover[data-display-settings-type="dot"] .node-trace-display-dot2-thickness-row {
  display: none;
}

/*
 * App-wide latch button (Full Dot Economy | Dots only | Clear | …)
 * Flush segmented row: no gaps/padding between cells; shared borders.
 * Full cell, fit-to-box label (JS), on=highlight / off=dim / action=momentary.
 */
.app-latch-button-row,
.node-trace-display-settings-popover .node-trace-display-packing-toggles {
  display: grid;
  /* Equal share per child (inline --latch-cols / grid-template-columns from builder). */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--ds-latch-h, var(--metadata-control-row-height, 22px));
}

.app-latch-button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: var(--ds-latch-h, var(--metadata-control-row-height, 22px));
  margin: 0;
  padding: 3px 4px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(5, 9, 11, 0.55);
  color: color-mix(in srgb, var(--text) 48%, transparent);
  font-family: Consolas, "Courier New", monospace;
  font-weight: 600;
  /* Size once via label + container; no JS fitLabel. */
  font-size: inherit;
  line-height: 1;
  container-type: size;
  cursor: var(--node-dot-cursor);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Segmented strip: outer corners only; collapse shared edges between cells. */
.app-latch-button-row > .app-latch-button:first-child,
.node-trace-display-packing-toggles > .app-latch-button:first-child {
  border-radius: 3px 0 0 3px;
}

.app-latch-button-row > .app-latch-button:last-child,
.node-trace-display-packing-toggles > .app-latch-button:last-child {
  border-radius: 0 3px 3px 0;
}

.app-latch-button-row > .app-latch-button + .app-latch-button,
.node-trace-display-packing-toggles > .app-latch-button + .app-latch-button {
  border-left-width: 0;
}

.app-latch-button:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.app-latch-button.is-off,
.app-latch-button[aria-pressed="false"] {
  opacity: 0.72;
  background: rgba(5, 9, 11, 0.48);
  color: color-mix(in srgb, var(--text) 42%, transparent);
  box-shadow: none;
}

.app-latch-button.is-on,
.app-latch-button[aria-pressed="true"] {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 32%, rgba(5, 9, 11, 0.62));
  color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 72%, transparent);
}

.app-latch-button[data-latch-mode="action"] {
  opacity: 0.85;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  background: rgba(8, 14, 18, 0.72);
}

.app-latch-button[data-latch-mode="action"]:hover {
  opacity: 1;
  color: #fff;
  background: color-mix(in srgb, var(--accent) 18%, rgba(8, 14, 18, 0.85));
}

.app-latch-button[data-latch-mode="action"]:active {
  color: #fff;
  background: color-mix(in srgb, var(--accent) 36%, rgba(5, 9, 11, 0.7));
}

.app-latch-button-label {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1;
  pointer-events: none;
  text-align: center;
  /* One size from the button content box (height-capped; width clips). */
  font-size: min(70cqh, 100cqw);
}

.node-parameter-metadata-popover :is(input, textarea, select),
#nodeGlobalScopeMenu :is(input, textarea, select) {
  -webkit-user-drag: none;
}

.node-trace-display-close-prompt {
  grid-column: 1 / -1;
}

.node-trace-display-dot-section {
  grid-template-columns: minmax(0, 1fr);
}

.node-trace-display-preview-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 1px solid rgba(127, 199, 217, 0.16);
  border-radius: 0;
  background: #020405;
}

.node-trace-display-preview-shell.is-stereo {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}

.node-trace-display-preview-shell.is-xyz,
.node-trace-display-preview-shell.is-rgb,
.node-trace-display-lr-pair.is-xyz {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}

.node-trace-display-lr-pair.is-quad {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}

/* Cap plate size; shrink with the column so 3-up RGB/XYZ never clip the right edge. */
.node-trace-display-preview-shell.is-stereo .node-trace-display-dot-preview,
.node-trace-display-preview-shell.is-xyz .node-trace-display-dot-preview,
.node-trace-display-preview-shell.is-rgb .node-trace-display-dot-preview,
.node-trace-display-preview-shell .node-trace-display-dot-preview {
  width: 100%;
  height: auto;
  max-width: 96px;
  max-height: 96px;
}

.node-trace-display-preview-cell {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  min-width: 0;
  justify-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.node-trace-display-preview-side-label {
  display: block;
  width: 100%;
  text-align: center;
  color: rgba(210, 214, 218, 0.78);
  font: 700 0.62rem/1 inherit;
  letter-spacing: 0.04em;
}

.node-trace-display-dot-preview {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  max-width: 96px;
  max-height: 96px;
  aspect-ratio: 1 / 1;
  justify-self: center;
  border: 0;
  background: #020405;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.metadata-advanced-toggle {
  border: 1px solid rgba(127, 199, 217, 0.24);
  border-radius: 5px;
  color: rgba(127, 199, 217, 0.88);
}

#nodeParameterMetadataPopover .metadata-advanced-toggle,
#nodeParameterMetadataPopover .metadata-script-panel {
  display: none !important;
}

.node-parameter-metadata-popover button:focus {
  outline: none;
  border-color: rgba(127, 199, 217, 0.5);
}

.metadata-popover-grid input:focus,
.metadata-popover-grid select:focus,
.metadata-popover-grid textarea:focus {
  outline: none;
  border-color: var(--line);
}

.metadata-popover-grid button.armed {
  border-color: rgba(242, 93, 93, 0.76);
  background: rgba(122, 28, 28, 0.72);
  color: #ffd7d7;
}

.metadata-script-panel {
  display: none;
  align-self: start;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.node-parameter-metadata-popover.metadata-script-open .metadata-script-panel {
  display: grid;
}

.metadata-script-heading {
  display: grid;
  min-height: 18px;
  align-items: center;
}

.metadata-script-heading strong {
  color: rgba(205, 214, 216, 0.82);
  font-size: 0.82rem;
  font-weight: 500;
}

.metadata-script-reference {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: start;
  align-items: flex-start;
  box-sizing: border-box;
  min-height: 72px;
  min-width: 0;
  overflow: visible;
  padding-right: 0;
}

.metadata-close-prompt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(64px, auto));
  align-items: center;
  gap: 0;
  min-height: 30px;
  border: 1px solid rgba(214, 163, 95, 0.42);
  border-radius: 5px;
  background: rgba(34, 27, 17, 0.72);
  overflow: hidden;
}

.metadata-close-prompt[hidden] {
  display: none;
}

.metadata-close-prompt span {
  min-width: 0;
  padding: 0 8px;
  color: rgba(244, 213, 166, 0.92);
  font-size: 0.68rem;
}

.metadata-close-prompt button {
  min-height: 30px;
  border: 0;
  border-left: 1px solid rgba(214, 163, 95, 0.32);
  border-radius: 0;
  background: rgba(17, 20, 24, 0.84);
  color: rgba(236, 238, 232, 0.92);
  font-size: 0.68rem;
}

.metadata-script-reference span {
  color: rgba(127, 199, 217, 0.68);
  font-size: 0.58rem;
}

.metadata-script-reference code {
  padding: 2px 5px;
  border: 1px solid rgba(127, 199, 217, 0.16);
  border-radius: 4px;
  background: rgba(4, 9, 11, 0.66);
  color: rgba(205, 214, 216, 0.72);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.62rem;
}

.metadata-script-reference code:hover {
  border-color: rgba(127, 199, 217, 0.34);
  color: rgba(220, 232, 234, 0.86);
}

.metadata-script-reference code:focus-visible {
  outline: none;
  border-color: rgba(214, 163, 95, 0.54);
  box-shadow: 0 0 0 1px rgba(214, 163, 95, 0.24);
  color: rgba(244, 213, 166, 0.92);
}

.metadata-script-reference .metadata-script-reference-kind {
  border-color: rgba(210, 188, 235, 0.18);
  background: rgba(20, 10, 31, 0.58);
  color: rgba(210, 188, 235, 0.76);
}

.metadata-script-editor {
  position: relative;
  min-height: 286px;
  overflow: hidden;
  border: 1px solid rgba(127, 199, 217, 0.28);
  border-radius: 6px;
  background: #05090b;
}

.metadata-script-highlight,
.metadata-script-panel textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: inherit;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.48;
  tab-size: 2;
  white-space: pre;
}

.metadata-script-highlight {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: rgba(205, 214, 216, 0.9);
  pointer-events: none;
}

.metadata-script-line {
  display: inline-block;
  min-width: 100%;
}

.metadata-script-line-ignored {
  background: rgba(255, 105, 105, 0.1);
  box-shadow: inset 2px 0 rgba(255, 105, 105, 0.34);
}

.metadata-script-panel textarea {
  position: relative;
  display: block;
  height: auto;
  min-height: 286px;
  color: rgba(205, 214, 216, 0.9);
  caret-color: rgba(255, 255, 255, 0.96);
  overflow: hidden;
  resize: none;
  -webkit-text-fill-color: transparent;
}

.metadata-script-panel textarea:focus {
  outline: none;
}

.metadata-script-editor:focus-within {
  border-color: rgba(127, 199, 217, 0.42);
}

.metadata-token-property { color: rgba(127, 199, 217, 0.96); }
.metadata-token-assignment { color: rgba(214, 163, 95, 0.96); }
.metadata-token-number { color: rgba(169, 205, 166, 0.96); }
.metadata-token-keyword { color: rgba(211, 160, 112, 0.96); }
.metadata-token-list { color: rgba(210, 188, 235, 0.9); }
.metadata-token-value { color: rgba(222, 230, 226, 0.86); }
.metadata-token-comment { color: rgba(156, 164, 166, 0.78); }
.metadata-token-link {
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
  text-underline-offset: 0.16em;
}

.metadata-script-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(127, 199, 217, 0.22);
  border-radius: 5px;
}

.metadata-script-actions button {
  min-height: 30px;
  padding: 0 6px;
  border: 0;
  border-right: 1px solid rgba(127, 199, 217, 0.18);
  border-bottom: 1px solid rgba(127, 199, 217, 0.12);
  border-radius: 0;
  background: rgba(8, 18, 22, 0.82);
  color: rgba(205, 214, 216, 0.78);
  font-size: 0.72rem;
}

.metadata-script-actions button:last-child {
  border-right: 0;
}

.metadata-script-actions button:hover {
  border-color: rgba(127, 199, 217, 0.38);
  color: rgba(220, 232, 234, 0.88);
}

.metadata-script-actions button.armed {
  border-color: rgba(214, 163, 95, 0.52);
  background: rgba(42, 31, 17, 0.88);
  color: rgba(244, 213, 166, 0.94);
}

.metadata-script-status {
  display: grid;
  place-items: center;
  min-height: 30px;
  min-width: 0;
  padding: 0 6px;
  border-right: 1px solid rgba(127, 199, 217, 0.18);
  border-bottom: 1px solid rgba(127, 199, 217, 0.12);
  background: rgba(17, 20, 24, 0.72);
  color: rgba(205, 214, 216, 0.72);
  font-size: 0.68rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.metadata-script-status.dirty {
  border-color: rgba(214, 163, 95, 0.48);
  color: rgba(244, 213, 166, 0.92);
}

.metadata-script-status.error {
  border-color: rgba(255, 105, 105, 0.48);
  color: rgba(255, 178, 178, 0.94);
}

.metadata-script-preview {
  display: grid;
  gap: 4px;
  max-height: 118px;
  margin: 0;
  padding: 7px;
  overflow: auto;
  border: 1px solid rgba(127, 199, 217, 0.16);
  border-radius: 6px;
  background: rgba(4, 9, 11, 0.72);
  list-style: none;
}

.metadata-script-preview[hidden] {
  display: none;
}

.metadata-script-extra-info {
  display: none !important;
}

.metadata-script-preview li {
  display: grid;
  grid-template-columns: 58px 34px minmax(54px, 0.72fr) minmax(0, 1.28fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  color: rgba(205, 214, 216, 0.76);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.68rem;
}

.metadata-script-preview span {
  color: rgba(127, 199, 217, 0.72);
}

.metadata-script-preview em {
  color: rgba(156, 164, 166, 0.66);
  font-style: normal;
}

.metadata-script-preview strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(220, 232, 234, 0.86);
  font-weight: 500;
  text-overflow: clip;
}

.metadata-script-preview code {
  min-width: 0;
  overflow: hidden;
  color: rgba(244, 213, 166, 0.86);
  text-overflow: clip;
  white-space: nowrap;
}

.metadata-script-preview li.ignored span,
.metadata-script-preview li.ignored code {
  color: rgba(255, 178, 178, 0.9);
}

.metadata-script-preview li.changed span,
.metadata-script-preview li.changed code {
  color: rgba(244, 213, 166, 0.9);
}

.metadata-script-preview li.same span,
.metadata-script-preview li.same code {
  color: rgba(156, 164, 166, 0.82);
}

.metadata-script-preview li[data-line]:hover {
  background: rgba(127, 199, 217, 0.08);
}

.metadata-script-effective {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 7px;
  border: 1px solid rgba(127, 199, 217, 0.16);
  border-radius: 6px;
  background: rgba(4, 9, 11, 0.54);
}

.metadata-script-effective[hidden] {
  display: none;
}

.metadata-script-effective div {
  min-width: 0;
}

.metadata-script-effective dt {
  color: rgba(127, 199, 217, 0.68);
  font-size: 0.58rem;
}

.metadata-script-effective dd {
  min-width: 0;
  margin: 1px 0 0;
  overflow: hidden;
  color: rgba(205, 214, 216, 0.82);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.68rem;
  text-overflow: clip;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .node-parameter-metadata-popover {
    grid-template-columns: minmax(0, 1fr);
  }
}

button.confirming-default,
button.confirming-default:hover,
button.confirming-default:focus-visible,
.node-view-toolbar button.confirming-default:not(:disabled):hover,
.node-view-toolbar button.confirming-default:not(:disabled):focus-visible,
.node-script-actions button.confirming-default,
.node-script-actions button.confirming-default:hover,
.node-ui-dev-actions button.confirming-default,
.node-ui-dev-actions button.confirming-default:hover {
  border-color: rgba(242, 93, 93, 0.82);
  background: rgba(122, 28, 28, 0.78);
  color: #ffd7d7;
  box-shadow: 0 0 14px rgba(242, 93, 93, 0.26);
}

button.saved-default,
button.saved-default:hover,
button.saved-default:focus-visible,
.node-view-toolbar button.saved-default:not(:disabled):hover,
.node-view-toolbar button.saved-default:not(:disabled):focus-visible,
.node-script-actions button.saved-default,
.node-script-actions button.saved-default:hover,
.node-ui-dev-actions button.saved-default,
.node-ui-dev-actions button.saved-default:hover {
  border-color: rgba(102, 255, 175, 0.96);
  background: rgba(18, 122, 73, 0.92);
  color: #d9ffe8;
  box-shadow:
    0 0 0 1px rgba(102, 255, 175, 0.38) inset,
    0 0 22px rgba(102, 255, 175, 0.54),
    0 0 42px rgba(102, 255, 175, 0.24);
  animation: node-default-saved-pulse 1000ms ease-out both;
}

button#nodeScenePasteModuleSettings.settings-paste-mismatch {
  border-color: rgba(242, 93, 93, 0.82);
  background: rgba(122, 28, 28, 0.55);
  color: #ffd7d7;
  animation: node-paste-mismatch-glow 1400ms ease-in-out infinite;
}

@keyframes node-paste-mismatch-glow {
  0%,
  100% {
    box-shadow: 0 0 6px rgba(242, 93, 93, 0.22);
  }

  50% {
    box-shadow: 0 0 16px rgba(242, 93, 93, 0.62);
  }
}

@keyframes node-default-saved-pulse {
  0% {
    transform: scale(0.96);
    filter: saturate(1.35) brightness(1.18);
    box-shadow:
      0 0 0 1px rgba(102, 255, 175, 0.68) inset,
      0 0 8px rgba(102, 255, 175, 0.22),
      0 0 18px rgba(102, 255, 175, 0.12);
  }

  24% {
    transform: scale(1.035);
    filter: saturate(1.7) brightness(1.28);
    box-shadow:
      0 0 0 1px rgba(102, 255, 175, 0.78) inset,
      0 0 30px rgba(102, 255, 175, 0.72),
      0 0 60px rgba(102, 255, 175, 0.36);
  }

  100% {
    transform: scale(1);
    filter: saturate(1.15) brightness(1.04);
    box-shadow:
      0 0 0 1px rgba(102, 255, 175, 0.34) inset,
      0 0 16px rgba(102, 255, 175, 0.34),
      0 0 30px rgba(102, 255, 175, 0.16);
  }
}

.node-scene-context-menu {
  position: fixed;
  z-index: 19;
  display: grid;
  gap: 6px;
  width: min(430px, calc(100vw - 4px));
  /* Max is live via --*-max-height from available view space (window top → bottom). */
  max-height: min(var(--node-scene-context-max-height, 100dvh), 100dvh);
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(127, 199, 217, 0.42);
  border-radius: var(--node-module-frame-radius);
  corner-shape: var(--node-module-corner-shape, squircle);
  background:
    linear-gradient(180deg, rgba(31, 36, 41, 0.98), rgba(10, 13, 16, 0.98)),
    rgba(27, 30, 34, 0.98);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(226, 168, 109, 0.08);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
}

#nodeSceneContextMenu {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: min(var(--node-scene-context-width, var(--node-unified-window-default-width, 380px)), calc(100vw - 4px));
  min-width: var(--node-scene-context-min-width, var(--node-unified-window-min-width, 24px));
  max-width: min(var(--node-scene-context-max-width, var(--node-unified-window-max-width, 980px)), calc(100vw - 4px));
  /* Prefer explicit height var; cold open with no var = content height. */
  height: var(--node-scene-context-height, auto);
  min-height: var(--node-scene-context-min-height, var(--node-unified-window-min-height, 120px));
  /* Live cap: set by JS from (viewport bottom − window top − edge pad). */
  max-height: min(var(--node-scene-context-max-height, 100dvh), 100dvh);
  gap: 0;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  /* Thin-window stacking for BPM/Beats/Unit and modular-view button rows. */
  container-type: inline-size;
  container-name: command-center;
}

/* Pack Command Center chrome flush — no phantom section padding. */
#nodeSceneContextMenu > .scene-context-heading {
  margin: 0;
  padding-block: 0;
}

#nodeSceneContextMenu > #nodeSceneWindowControls > div {
  gap: 0;
  margin: 0;
  padding: 0;
}

/* Everything content-sized — no flex-grow voids between sections.
   Extra window height (user resize) sits as empty chrome at the bottom. */
#nodeSceneContextMenu > .scene-context-heading,
#nodeSceneContextMenu > .node-unified-window-nav-host,
#nodeSceneContextMenu > .scene-context-resize-handle,
#nodeSceneContextMenu > :not(.scene-context-heading):not(.scene-context-resize-handle):not(.node-unified-window-nav-host) {
  flex: 0 0 auto;
  min-height: 0;
}

/* Home controls stack — never stretch; that left giant empty gaps under transport. */
#nodeSceneContextMenu > #nodeSceneWindowControls {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

/* Search: compact field; results only claim height when open. */
#nodeSceneContextMenu > #nodeCommandCenterModuleSearch {
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
}

/*
 * Command Center chrome: hide chrome-level scrollbars (top nav is short).
 * Module Settings / Display / Parameter / UI Settings bodies may scroll —
 * do NOT apply * descendant rules that kill their scrollbar tracks.
 */
#nodeSceneContextMenu,
#nodeVisibilityMenu {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#nodeSceneContextMenu::-webkit-scrollbar,
#nodeVisibilityMenu::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Settings inspectors: thin visible scrollbar on the scroll body only. */
.node-module-actions-window-body,
.node-parameter-metadata-popover > .metadata-popover-grid,
.node-trace-display-settings-popover > .node-trace-display-settings-grid,
.node-user-ui-settings-panel > .node-user-ui-settings-controls {
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 199, 217, 0.45) transparent;
}

#nodeSceneContextMenu .scene-context-heading {
  margin: 0;
  background: rgb(3, 5, 7);
}

#nodeSceneContextMenu :is(
  .scene-context-selected-module,
  .scene-context-home-modules,
  .scene-context-text-box-controls:not(#nodeSceneWindowControls),
  .scene-context-text-box-text-control,
  .scene-context-codeblock-controls,
  .scene-context-range-control,
  .scene-context-wire-type-control,
  .scene-context-alias-control
) {
  background: rgb(7, 10, 13);
}

/*
 * Floating-window content buttons (not title chrome / nav / resize).
 * Chrome is classed (.scene-context-drag-handle, .panel-close-button,
 * .scene-context-resize-handle, .node-unified-window-nav-button) and left alone.
 * Bypass (.node-bypass-button) keeps face/UIDEV black-off / red-on paint — do not
 * wash it with the generic panel-grey floating button fill (B-048 regression).
 */
:is(
  .node-scene-context-menu,
  .node-module-actions-window,
  .node-visibility-menu,
  .node-parameter-metadata-popover,
  .node-user-ui-settings-panel
) :is(
  button:not(.scene-context-drag-handle):not(.panel-close-button):not(.scene-context-resize-handle):not(.node-unified-window-nav-button):not(.node-bypass-button),
  .scene-context-window-button,
  .scene-context-module-browser-button,
  .scene-context-home-module-button
) {
  background: rgb(16, 22, 26);
}

:is(
  .node-scene-context-menu,
  .node-module-actions-window,
  .node-visibility-menu,
  .node-parameter-metadata-popover,
  .node-user-ui-settings-panel
) :is(
  button:not(.scene-context-drag-handle):not(.panel-close-button):not(.scene-context-resize-handle):not(.node-unified-window-nav-button):not(.node-bypass-button),
  .scene-context-window-button,
  .scene-context-module-browser-button,
  .scene-context-home-module-button
):is(:hover, :focus-visible) {
  background: rgb(22, 32, 38);
}

/* ID rules set display:flex on #nodeSceneContextMenu — that beats the bare
   [hidden] class selector and left Command Center painted after hide=true,
   so Modules opened "beside" it. Match or exceed that specificity. */
.node-scene-context-menu[hidden],
#nodeSceneContextMenu[hidden],
#nodeModuleActionsWindow[hidden] {
  display: none !important;
}

.node-module-actions-window {
  display: flex;
  flex-direction: column;
  width: clamp(
    var(--node-module-actions-min-width, var(--node-unified-window-min-width, 24px)),
    var(--node-module-actions-width, var(--node-unified-window-default-width, 380px)),
    min(var(--node-module-actions-max-width, var(--node-unified-window-max-width, 980px)), calc(100vw - 28px))
  );
  height: var(--node-module-actions-height, auto);
  min-width: var(--node-module-actions-min-width, var(--node-unified-window-min-width, 24px));
  max-width: min(var(--node-module-actions-max-width, var(--node-unified-window-max-width, 980px)), calc(100vw - 4px));
  min-height: var(--node-module-actions-min-height, var(--node-unified-window-min-height, 120px));
  max-height: min(var(--node-module-actions-max-height, 100dvh), 100dvh);
  gap: 0;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  contain: layout paint;
  user-select: none;
  -webkit-user-select: none;
}

.node-module-actions-window > .scene-context-heading,
.node-module-actions-window > .node-unified-window-nav-host {
  flex: 0 0 auto;
}

.node-module-actions-window > .node-module-actions-window-body {
  flex: 1 1 auto;
  min-height: 0;
}

.node-module-actions-window *,
.node-module-actions-window *::before,
.node-module-actions-window *::after {
  min-width: 0;
}

/*
 * Module Settings body: scroll when content exceeds the window.
 * App-wide inspector policy — never clip settings (graph editor, long param lists).
 */
.node-module-actions-window-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  align-content: flex-start;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  min-inline-size: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  /* Keep last rows clear of the SE resize grip. */
  padding-bottom: 22px;
  box-sizing: border-box;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.node-module-actions-window-body::-webkit-scrollbar {
  width: 8px;
}

.node-module-actions-window-body::-webkit-scrollbar-thumb {
  background: rgba(127, 199, 217, 0.35);
  border-radius: 4px;
}

.node-module-actions-window-body > * {
  flex: 0 0 auto;
  margin-block: 0;
}

/* Display Settings / Parameter Settings: keep wheel-scroll bodies (scrollbars optional). */
.node-parameter-metadata-popover > .metadata-popover-grid,
.node-trace-display-settings-popover > .node-trace-display-settings-grid {
  scrollbar-width: thin;
}

/* Title chrome: shared .scene-context-heading only — no page-local overrides. */
.node-module-actions-window > .scene-context-heading {
  flex: 0 0 auto;
}

.node-module-actions-window button:not(.scene-context-drag-handle):not(.panel-close-button):not(.scene-context-resize-handle):not(.node-unified-window-nav-button):not(.node-unified-inspector-module-item) {
  box-sizing: border-box;
  min-width: 0;
  height: var(--node-floating-window-button-height);
  min-height: var(--node-floating-window-button-height);
  max-height: var(--node-floating-window-button-height);
  padding: 0;
  overflow: hidden;
  font-size: 0.62rem;
  line-height: 1;
  justify-content: center;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

/* Two-line Module Settings action / visibility buttons (shared, all modules). */
.node-module-actions-window .scene-context-button-group button,
.node-module-actions-window .scene-context-two-line-button {
  height: auto;
  min-height: calc(var(--node-floating-window-button-height, 30px) + 12px);
  max-height: none;
  padding: 3px 2px;
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.1;
  white-space: normal;
  text-overflow: clip;
}

/* Content action density only — colors come from the shared floating rule above. */

/* Module title under nav (Display Settings–style), not a “Module” label. */
.node-module-actions-window .scene-context-selected-module {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 2px;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 2px 4px;
  overflow: hidden;
  border-radius: 0;
  border-inline: 0;
}

.node-module-actions-window .scene-context-selected-module.is-knob-settings > strong {
  display: none;
}

.node-module-actions-window .scene-context-selected-module span[hidden],
.node-module-actions-window .scene-context-selected-module-label[hidden] {
  display: none !important;
}

.node-module-actions-window .scene-context-alias-control span,
.node-module-actions-window .scene-context-text-box-controls > span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.node-module-actions-window .scene-context-selected-module strong {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  color: #e8f0f4;
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-module-actions-window :is(
  .scene-context-selected-module,
  .scene-context-alias-control,
  .scene-context-text-box-controls,
  .scene-context-width-controls,
  .scene-context-wire-type-control,
  .scene-context-codeblock-controls,
  .scene-context-range-control
) {
  text-align: center;
}

.node-module-actions-window .scene-context-alias-control,
.node-module-actions-window .scene-context-text-box-controls {
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
}

.node-module-actions-window .scene-context-alias-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(var(--node-floating-window-button-height), auto);
  align-items: stretch;
  border: 0;
  background: transparent;
}

.node-module-actions-window .scene-context-alias-control input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: calc(var(--node-floating-window-button-height) * 1.15);
  padding: 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  box-sizing: border-box;
}

.node-module-actions-window :is(input, textarea, select) {
  user-select: text;
  -webkit-user-select: text;
}

/* Label [-][+] value  e.g. Width [-][+] 6 gu */
.node-module-actions-window .scene-context-width-controls {
  --node-module-actions-grid-control-height: var(--node-floating-window-button-height);
  grid-template-columns:
    minmax(0, 1fr)
    var(--node-module-actions-grid-control-height)
    var(--node-module-actions-grid-control-height)
    minmax(3.4em, 0.95fr);
  align-items: stretch;
}

.node-module-actions-window .scene-context-width-controls button {
  inline-size: var(--node-module-actions-grid-control-height);
  min-inline-size: var(--node-module-actions-grid-control-height);
  min-height: var(--node-module-actions-grid-control-height);
  height: var(--node-module-actions-grid-control-height);
  padding: 0;
}

.node-module-actions-window .scene-context-width-controls span,
.node-module-actions-window .scene-context-width-controls output {
  min-height: var(--node-module-actions-grid-control-height);
  height: var(--node-module-actions-grid-control-height);
  min-width: 0;
  padding: 0 2px;
  font-size: 0.82rem;
  font-weight: 600;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
}

.node-module-actions-window .scene-context-width-controls .scene-context-gu-label {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #cfdde5;
}

.scene-context-store-list {
  display: grid;
  gap: 4px;
}

.scene-context-store-ledger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid rgba(226, 168, 109, 0.22);
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(226, 168, 109, 0.08), rgba(127, 199, 217, 0.06)),
    rgba(7, 10, 13, 0.66);
}

.scene-context-store-ledger span {
  color: rgba(243, 241, 236, 0.52);
  font-size: 0.62rem;
  line-height: 1;
  text-transform: uppercase;
}

.scene-context-store-ledger strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(127, 199, 217, 0.92);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.1;
  text-overflow: clip;
  white-space: nowrap;
}

.scene-context-store-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px;
  gap: 4px;
  min-width: 0;
}

.scene-context-store-department-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin-top: 6px;
  padding: 4px 2px 2px;
  border-top: 1px solid rgba(226, 168, 109, 0.16);
  color: rgba(226, 168, 109, 0.9);
  font-size: 0.66rem;
  line-height: 1;
  text-transform: uppercase;
}

.scene-context-store-department-heading:first-child {
  margin-top: 0;
  border-top: 0;
}

.scene-context-store-department-heading strong,
.scene-context-store-department-heading span {
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.scene-context-store-department-heading span {
  color: rgba(127, 199, 217, 0.68);
  font-size: 0.62rem;
}

.scene-context-store-card {
  display: grid;
  gap: 3px;
  align-items: start;
  justify-content: stretch;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(17, 21, 24, 0.78);
  min-width: 0;
  min-height: 74px;
  touch-action: none;
}

.scene-context-store-card[data-module-enabled="false"] {
  background: rgba(17, 21, 24, 0.38);
  border-color: rgba(174, 180, 187, 0.16);
  filter: grayscale(0.85);
  opacity: 0.46;
}

.scene-context-store-card::before {
  content: "";
  display: block;
  min-height: 0;
}

.scene-context-store-card strong {
  font-size: 0.94em;
  font-weight: 650;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.scene-context-store-card span {
  color: rgb(127 199 217 / 0.76);
  font-size: 0.76em;
}

.scene-context-store-empty {
  align-self: start;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px dashed rgba(127, 199, 217, 0.22);
  border-radius: 5px;
  background: rgba(7, 10, 13, 0.46);
  color: rgba(243, 241, 236, 0.62);
  font-size: 0.72rem;
  line-height: 1.25;
}

.scene-context-store-hidden {
  border-top: 1px solid rgb(243 241 236 / 0.12);
  display: grid;
  gap: 4px;
  margin-top: 4px;
  padding-top: 6px;
}

.scene-context-store-hidden[hidden] {
  display: none;
}

.scene-context-store-hidden-list {
  display: grid;
  gap: 4px;
}

.node-scene-context-menu button:not(.scene-context-drag-handle):not(.panel-close-button):not(.scene-context-resize-handle):not(.node-unified-window-nav-button):not(.node-unified-inspector-module-item) {
  min-height: 32px;
  margin: 0;
  justify-content: flex-start;
  padding: 0 10px;
  border-radius: 0;
  font-size: 0.78rem;
  text-align: left;
}

.node-scene-context-menu button[hidden] {
  display: none;
}

.scene-context-button-group {
  display: flex;
}

.scene-context-button-group[hidden] {
  display: none;
}

.scene-context-license {
  margin: 0.15rem 0 0.35rem;
  padding: 0 0.55rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(243, 241, 236, 0.72);
  white-space: normal;
}

.scene-context-license[hidden] {
  display: none;
}

.scene-context-license a {
  color: rgba(180, 210, 255, 0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.scene-context-license a:hover {
  color: #fff;
}

.scene-context-button-group button {
  flex: 1 1 50%;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.scene-context-button-group button:first-child {
  border-inline-end: 1px solid var(--node-scene-context-menu-divider, rgba(243, 241, 236, 0.14));
}

/* Shared two-line labels: Copy/Module, Hide/Display, Save to/Default, … */
.scene-context-button-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  line-height: 1.12;
  white-space: normal;
  text-align: center;
  pointer-events: none;
}

.scene-context-button-lines > span {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.scene-context-button-group button,
.scene-context-two-line-button {
  min-height: calc(var(--node-floating-window-button-height, 30px) + 10px);
  padding-block: 4px;
  padding-inline: 3px;
  white-space: normal;
  line-height: 1.12;
}

/* 3-up action row (legacy class still used if present). */
.scene-context-button-group-3 button {
  flex: 1 1 33.333%;
  font-size: 0.78rem;
}

.scene-context-button-group-3 button:not(:last-child) {
  border-inline-end: 1px solid var(--node-scene-context-menu-divider, rgba(243, 241, 236, 0.14));
}

/* 4-up: Copy Module / Settings / Paste / Save to Default. */
.scene-context-button-group-4 button {
  flex: 1 1 25%;
  font-size: 0.72rem;
  font-weight: 650;
}

.scene-context-button-group-4 button:not(:last-child) {
  border-inline-end: 1px solid var(--node-scene-context-menu-divider, rgba(243, 241, 236, 0.14));
}

/* 5-up: Copy Module / Settings / Paste / Save to Default / Restore Factory. */
.scene-context-button-group-5 button {
  flex: 1 1 20%;
  font-size: 0.72rem;
  font-weight: 650;
}

.scene-context-button-group-5 button:not(:last-child) {
  border-inline-end: 1px solid var(--node-scene-context-menu-divider, rgba(243, 241, 236, 0.14));
}

/* 2-up: Hide Display + Hide Title. */
.scene-context-button-group-2 button {
  flex: 1 1 50%;
  font-size: 0.72rem;
  font-weight: 650;
}

.scene-context-button-group-2 button:not(:last-child) {
  border-inline-end: 1px solid var(--node-scene-context-menu-divider, rgba(243, 241, 236, 0.14));
}

/* Module settings section (e.g. Show / Hide under Copy/Paste row). */
.scene-context-module-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.scene-context-module-section[hidden] {
  display: none !important;
}

.scene-context-module-section-title {
  display: grid;
  align-items: center;
  min-height: 22px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid rgba(127, 199, 217, 0.2);
  border-bottom: 0;
  background: color-mix(in srgb, var(--accent, #7fc7d9) 10%, rgba(5, 9, 11, 0.92));
  color: color-mix(in srgb, var(--accent, #7fc7d9) 88%, white 8%);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

/* Module visibility: Display|Title|Control surface, Buttons|In/Out|Sliders. */
.scene-context-visibility-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  border: 1px solid rgba(226, 168, 109, 0.24);
  border-radius: 0;
  overflow: hidden;
}

.scene-context-visibility-stack[hidden] {
  display: none;
}

.scene-context-visibility-stack > .scene-context-button-group {
  width: 100%;
  border: 0;
  border-radius: 0;
}

.scene-context-visibility-stack > .scene-context-button-group + .scene-context-button-group {
  border-top: 1px solid var(--node-scene-context-menu-divider, rgba(243, 241, 236, 0.14));
}

.scene-context-visibility-stack .scene-context-button-group button {
  border-radius: 0;
  font-weight: 650;
}

/* Display / Title / Control surface share one row; hidden buttons drop out. */
.scene-context-visibility-stack > .scene-context-button-group-display-title {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.scene-context-visibility-stack > .scene-context-button-group-display-title > button[hidden] {
  display: none !important;
}

.scene-context-visibility-stack > .scene-context-button-group-display-title > button {
  flex: unset;
  font-size: 0.72rem;
  font-weight: 650;
}

.scene-context-visibility-stack > .scene-context-button-group-display-title > button:not([hidden]) + button:not([hidden]) {
  border-inline-start: 1px solid var(--node-scene-context-menu-divider, rgba(243, 241, 236, 0.14));
}

.scene-context-button-group-1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Standalone two-line control (if still used outside a group). */
.scene-context-two-line-button {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 650;
}

.scene-context-selected-module {
  display: grid;
  gap: 2px;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid rgba(127, 199, 217, 0.18);
  border-radius: 5px;
  background: rgba(7, 10, 13, 0.55);
  font-family: Consolas, "Courier New", monospace;
}

.scene-context-selected-module[hidden] {
  display: none;
}

.scene-context-selected-module span {
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1;
  text-transform: uppercase;
}

.scene-context-selected-module strong {
  min-width: 0;
  overflow: hidden;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.15;
  text-overflow: clip;
  white-space: nowrap;
}

/* Command Center module search (same catalog as Module Browser). */
.scene-context-module-search {
  display: grid;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 0;
  background: rgb(7, 10, 13);
  box-sizing: border-box;
}

.scene-context-module-search-field {
  display: block;
  flex: none;
  width: 100%;
  min-width: 0;
}

.scene-context-module-search-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-width: 0;
  max-height: min(240px, 36vh);
  margin-top: 4px;
  overflow: auto;
  border: 1px solid rgba(127, 199, 217, 0.16);
  border-radius: 6px;
  background: rgba(3, 5, 7, 0.55);
}

.scene-context-module-search-results[hidden] {
  display: none;
}

.scene-context-module-search-results .scene-context-store-card {
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  text-align: left;
}

.scene-context-module-search-results .scene-context-store-card:first-child {
  border-top: 0;
}

.scene-context-store-card-category {
  display: inline-flex;
}

.scene-context-module-search-results .scene-context-store-card,
.node-module-store-list.is-module-search-results .scene-context-store-card {
  display: grid;
  align-items: center;
  justify-content: stretch;
}

.scene-context-module-search-results .scene-context-store-card-category,
.node-module-store-list.is-module-search-results .scene-context-store-card-category {
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.05rem;
  line-height: 1;
}

.scene-context-module-search-results .scene-context-store-card strong {
  font-size: 0.74rem;
  text-align: left;
}

.scene-context-module-search-results .scene-context-store-card small,
.node-module-store-list.is-module-search-results .scene-context-store-card small {
  display: inline;
  margin-left: 0;
  color: rgba(226, 168, 109, 0.78);
  font-size: 0.62rem;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.scene-context-module-search-results .scene-context-store-empty {
  padding: 10px 8px;
  color: rgba(174, 180, 187, 0.72);
  font-size: 0.68rem;
  text-align: center;
}

.scene-context-home-modules {
  display: grid;
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(127, 199, 217, 0.07), rgba(226, 168, 109, 0.05)),
    rgba(7, 10, 13, 0.68);
}

.scene-context-home-modules[hidden] {
  display: none;
}

.scene-context-module-browser-button {
  min-height: var(--node-floating-window-button-height);
  justify-content: center;
  border-color: rgba(226, 168, 109, 0.32);
  background: rgba(25, 21, 17, 0.92);
  color: rgba(255, 229, 190, 0.94);
  font-weight: 700;
}

.scene-context-module-browser-button:hover,
.scene-context-module-browser-button:focus-visible {
  border-color: rgba(226, 168, 109, 0.58);
  background: rgba(35, 28, 20, 0.96);
}

.scene-context-home-module-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: 0;
  max-height: 220px;
  overflow: auto;
}

.scene-context-home-module-button {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 34px;
  align-content: center;
  justify-items: start;
  padding: 5px 7px;
  border: 1px solid rgba(127, 199, 217, 0.28);
  border-radius: 5px;
  background: rgba(16, 21, 24, 0.84);
  text-align: left;
}

.scene-context-home-module-button:hover,
.scene-context-home-module-button:focus-visible {
  border-color: rgba(127, 199, 217, 0.58);
  background: rgba(24, 34, 39, 0.94);
}

.scene-context-home-module-button strong,
.scene-context-home-module-button span,
.scene-context-home-empty {
  min-width: 0;
  overflow: hidden;
  line-height: 1.1;
  text-overflow: clip;
  white-space: nowrap;
}

.scene-context-home-module-button strong {
  color: rgba(243, 241, 236, 0.92);
  font-size: 0.72rem;
  font-weight: 600;
}

.scene-context-home-module-button span,
.scene-context-home-empty {
  color: rgba(174, 180, 187, 0.72);
  font-size: 0.6rem;
}

.scene-context-alias-control {
  display: grid;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: Consolas, "Courier New", monospace;
}

.scene-context-wire-type-control {
  display: grid;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid rgba(127, 199, 217, 0.18);
  border-radius: 5px;
  background: rgba(7, 10, 13, 0.55);
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.68rem;
  line-height: 1;
  text-transform: uppercase;
}

.scene-context-wire-type-control[hidden] {
  display: none;
}

.scene-context-wire-type-control > .scene-context-wire-pixel-label {
  margin-top: 2px;
  opacity: 0.9;
}

.scene-context-wire-type-control > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.scene-context-wire-type-control > .scene-context-wire-pixel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.scene-context-wire-type-control > .scene-context-wire-curve-slot {
  display: block;
}

.scene-context-wire-type-control .node-settings-range-row {
  margin-top: 2px;
  padding: 3px 0 0;
  border-top: 1px solid rgba(127, 199, 217, 0.14);
  text-transform: uppercase;
}

.scene-context-wire-type-control button {
  justify-content: center;
  padding: 0 6px;
}

.scene-context-wire-type-control button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.scene-context-wire-type-control button:not(:first-child, :last-child) {
  border-radius: 0;
}

.scene-context-wire-type-control button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.scene-context-wire-type-control button[aria-pressed="true"] {
  background: rgba(23, 42, 36, 0.9);
  color: #66e0a3;
}

.scene-context-alias-control[hidden] {
  display: none;
}

.node-knob-plugin-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.node-knob-plugin-identity[hidden] {
  display: none;
}

.node-knob-look-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 8px;
}

.node-knob-look-tabs button {
  min-height: 28px;
  border: 1px solid var(--line, #3a444c);
  border-radius: 4px;
  background: transparent;
  color: var(--muted, #9aa7b0);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.node-knob-look-tabs button.is-on {
  background: rgba(127, 199, 217, 0.16);
  color: var(--text, #e8eef2);
  border-color: rgba(127, 199, 217, 0.45);
}

.node-module-actions-window .node-knob-settings-field {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr);
  grid-auto-rows: auto;
  align-items: center;
  column-gap: 6px;
  row-gap: 0;
  min-height: 0;
  padding: 0;
}

.node-module-actions-window .node-knob-settings-field span {
  min-height: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: left;
  text-transform: uppercase;
}

.node-module-actions-window .node-knob-settings-field input {
  min-height: 26px;
  height: 26px;
  padding: 0 6px;
}

.scene-context-alias-control span {
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1;
  text-transform: uppercase;
}

.scene-context-alias-control input {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(127, 199, 217, 0.24);
  border-radius: 4px;
  background: rgba(2, 4, 7, 0.72);
  color: var(--text);
  font: inherit;
  outline: none;
}

.scene-context-alias-control input:focus {
  border-color: rgba(127, 199, 217, 0.52);
}

/* Shared GU stepper row: Label [-][+] value (all modules / Module Settings). */
.scene-context-width-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24px, 0.32fr) minmax(24px, 0.32fr) minmax(3.5em, 0.9fr);
  align-items: center;
  gap: 0;
}

.scene-context-width-controls[hidden] {
  display: none;
}

.scene-context-text-box-controls {
  display: grid;
  gap: 3px;
  padding: 4px 6px;
  border: 1px solid rgba(127, 199, 217, 0.18);
  border-radius: 5px;
  background: rgba(7, 10, 13, 0.55);
}

/* Command Center home stack already packs tightly; keep zero chrome there. */
#nodeSceneWindowControls.scene-context-text-box-controls {
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.scene-context-text-box-controls[hidden] {
  display: none;
}

#nodeSceneWindowControls {
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.node-scope-settings-section {
  display: grid;
  gap: 0;
  min-width: 0;
}

.node-scope-settings-section + .node-scope-settings-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.node-scope-settings-section-title {
  display: grid;
  align-items: center;
  min-height: var(--node-floating-window-button-height);
  padding: 0 6px;
  border: 1px solid rgba(127, 199, 217, 0.2);
  background: rgba(10, 18, 22, 0.72);
  color: rgba(127, 199, 217, 0.96);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.node-individual-scope-controls[hidden] {
  display: none;
}

.scene-context-text-box-controls > span {
  color: rgba(127, 199, 217, 0.86);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.6rem;
  font-weight: 750;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.scene-context-text-box-controls > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.scene-context-text-box-controls > div.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scene-context-text-box-controls > div.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.scene-context-text-box-controls > div.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.scene-context-text-box-controls > div.six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.scene-context-window-controls > div {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.scene-context-text-box-controls button {
  justify-content: center;
  padding: 0 6px;
  text-align: center;
}

.scene-context-window-controls .scene-context-window-button,
.node-visibility-menu-list .scene-context-window-button {
  display: grid;
  grid-template-columns: calc(var(--node-floating-window-button-height) + 4px) minmax(0, 1fr);
  align-items: stretch;
  justify-content: stretch;
  height: var(--node-floating-window-button-height);
  min-height: var(--node-floating-window-button-height);
  max-height: var(--node-floating-window-button-height);
  padding: 0;
  border-radius: 5px;
  border-color: rgba(226, 168, 109, 0.24);
  background: rgba(16, 22, 26, 0.94);
  color: rgba(243, 241, 236, 0.9);
  font-size: 0.7rem;
  font-weight: 700;
}

/* Extra column for a hotkey badge (<kbd>Ctrl+K</kbd> etc.) on buttons
   that have one -- icon | label | kbd instead of just icon | label. */
.scene-context-window-controls .scene-context-window-button:has(kbd),
.node-visibility-menu-list .scene-context-window-button:has(kbd) {
  grid-template-columns: calc(var(--node-floating-window-button-height) + 4px) minmax(0, 1fr) auto;
}

/* Icon-only buttons (no label span, e.g. Modular View/View Buttons)
   collapse to a single column so the icon centers across the whole
   button instead of sitting in the narrow icon column with an empty
   label column beside it. Fixed height (not min-height) so a stacked
   kbd badge can't grow the button taller than its siblings -- the
   badge is pulled out of flow (absolute, see below) instead. */
.scene-context-window-controls .scene-context-window-button:not(:has(.scene-context-window-button-label)),
.node-visibility-menu-list .scene-context-window-button:not(:has(.scene-context-window-button-label)) {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  height: var(--node-floating-window-button-height);
}

.scene-context-window-controls .scene-context-window-button:not(:has(.scene-context-window-button-label)) kbd,
.node-visibility-menu-list .scene-context-window-button:not(:has(.scene-context-window-button-label)) kbd {
  position: absolute;
  right: 3px;
  bottom: 1px;
  padding: 0;
  font-size: 0.55rem;
  line-height: 1;
}

.scene-context-window-controls .scene-context-window-button:has(.scene-context-window-button-label) kbd,
.node-visibility-menu-list .scene-context-window-button:has(.scene-context-window-button-label) kbd {
  align-self: center;
  padding-right: 8px;
}

.scene-context-global-smoothing-control {
  display: grid;
  grid-template-columns: 18% 58% 24%;
  align-items: stretch;
  min-height: var(--node-floating-window-button-height);
  border: 1px solid rgba(226, 168, 109, 0.24);
  border-bottom-width: 0;
  background: rgba(16, 22, 26, 0.94);
  color: rgba(243, 241, 236, 0.9);
  font-size: 0.7rem;
  font-weight: 700;
}

.scene-context-global-smoothing-control.value-dragging {
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 28%, transparent);
}

.scene-context-global-smoothing-label,
.scene-context-global-smoothing-unit {
  display: grid;
  align-items: center;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  line-height: 1;
  text-align: center;
  user-select: none;
}

.scene-context-global-smoothing-label {
  padding-inline: 0;
  color: rgba(243, 241, 236, 0.9);
  font-size: 0.86rem;
}

.scene-context-global-smoothing-unit {
  padding-inline: 0;
  color: rgba(127, 199, 217, 0.78);
  font-size: 0.92rem;
}

.scene-context-global-smoothing-input {
  appearance: textfield;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(69, 100, 110, 0.55);
  border-right: 1px solid rgba(69, 100, 110, 0.55);
  border-radius: 0;
  background: rgba(4, 8, 10, 0.95);
  color: #b7f2ff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.scene-context-global-smoothing-input::-webkit-outer-spin-button,
.scene-context-global-smoothing-input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.scene-context-timing-controls {
  display: block;
  min-width: 0;
  --scene-context-timing-row-height: var(--node-floating-window-button-height);
  /* No min-height when empty; rows size themselves. */
  min-height: 0;
  border: 1px solid rgba(226, 168, 109, 0.24);
  border-bottom-width: 0;
  overflow: hidden;
}

.scene-context-timing-controls .node-command-center-timing-widgets {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.scene-context-timing-controls .node-header-timing-field {
  display: grid;
  grid-template-columns: calc(8.5em - 30px) 0.65em minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  column-gap: 0;
  min-width: 0;
  height: var(--scene-context-timing-row-height);
  padding: 0;
  border-radius: 0;
  text-transform: none;
}

.scene-context-timing-controls .node-header-timing-field + .node-header-timing-field {
  border-top: 1px solid rgba(226, 168, 109, 0.24);
}

/* Command Center: keep the app plus cursor on scrubbable timing rows (not ew-resize). */
.scene-context-timing-controls .node-header-timing-field[data-header-number-drag="true"],
.scene-context-timing-controls .node-header-smoothing-field,
.scene-context-timing-controls .node-header-speed-placeholder,
.scene-context-timing-controls .node-header-timing-field[data-header-number-drag="true"] .node-header-timing-caption,
.scene-context-timing-controls .node-header-timing-field[data-header-number-drag="true"] .node-header-timing-input,
.scene-context-timing-controls .node-header-smoothing-field .node-header-timing-caption,
.scene-context-timing-controls .node-header-smoothing-field .node-header-timing-input,
.scene-context-timing-controls .node-header-speed-placeholder .node-header-timing-caption,
.scene-context-timing-controls .node-header-speed-placeholder .node-header-timing-input,
.scene-context-timing-controls .node-header-timing-input[readonly],
.scene-context-timing-controls .node-header-timing-input[data-audio-field][readonly],
.scene-context-timing-controls .node-header-timing-input[data-speed-limit][readonly],
.scene-context-timing-controls .node-header-timing-input[data-global-smoothing-seconds][readonly],
.scene-context-timing-controls .node-header-timing-input[data-speed-readout][readonly],
.scene-context-timing-controls .node-header-timing-input[data-global-scope-input][readonly],
.scene-context-global-smoothing-control,
.scene-context-global-smoothing-label,
.scene-context-global-smoothing-unit,
.scene-context-global-smoothing-input[readonly] {
  cursor: var(--node-dot-cursor);
}

.scene-context-timing-controls .node-header-timing-field[data-header-number-drag="true"] .node-header-bpm-tap {
  cursor: pointer;
  background: transparent;
}


.scene-context-timing-controls .node-header-timing-field span {
  display: flex;
  place-items: center;
  width: auto;
  height: auto;
  justify-content: flex-start;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}

.scene-context-timing-controls .node-header-timing-colon {
  justify-content: center;
  opacity: 0.55;
}

.scene-context-timing-controls .node-header-timing-input {
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
}

.scene-context-timing-controls .node-header-oversampling-select {
  background-color: var(--bg);
  color: #ffffff;
  text-align: left;
}

.scene-context-timing-controls .node-header-planck-readout {
  cursor: default;
  user-select: none;
  background: #000;
  color: #8a8a8a;
}

.scene-context-timing-controls .node-header-planck-readout .node-header-timing-caption,
.scene-context-timing-controls .node-header-planck-readout .node-header-timing-colon,
.scene-context-timing-controls .node-header-planck-value {
  color: #8a8a8a;
  cursor: default;
}

.scene-context-timing-controls .node-header-planck-value {
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.scene-context-history-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  /* Stack under Copy/Paste: omit top so the seam is only Copy/Paste's bottom edge. */
  border: 1px solid rgba(226, 168, 109, 0.24);
  border-top-width: 0;
  border-bottom-width: 0;
}

/*
 * Undo/Redo: two-line stack (label + kbd), truly centered.
 * Must beat: grid window-buttons, menu button flex-start + padding 0 10px,
 * and .scene-context-window-button-label { justify-items:start; text-align:left }.
 */
#nodeSceneContextMenu .scene-context-history-controls .scene-context-window-button,
#nodeSceneContextMenu .scene-context-history-controls .scene-context-window-button:has(kbd),
.scene-context-window-controls .scene-context-history-controls .scene-context-window-button,
.scene-context-window-controls .scene-context-history-controls .scene-context-window-button:has(kbd) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-sizing: border-box;
  height: auto;
  min-height: var(--node-floating-window-button-height);
  margin: 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  grid-template-columns: none;
  place-content: center;
  line-height: 1;
  text-align: center;
}

/* 2×2: Undo|Disable / Redo|Delete — column seam on even cells, row seam on bottom row. */
.scene-context-history-controls .scene-context-window-button:nth-child(2n) {
  border-left: 1px solid rgba(127, 199, 217, 0.16);
}

.scene-context-history-controls .scene-context-window-button:nth-child(n + 3) {
  border-top: 1px solid rgba(127, 199, 217, 0.16);
}

#nodeSceneContextMenu .scene-context-history-controls .scene-context-window-button-label,
.scene-context-window-controls .scene-context-history-controls .scene-context-window-button-label {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  line-height: 1.05;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  justify-items: center;
  place-items: center;
}

#nodeSceneContextMenu
  .scene-context-history-controls
  .scene-context-window-button:has(.scene-context-window-button-label)
  kbd,
#nodeSceneContextMenu .scene-context-history-controls .scene-context-window-button kbd,
.scene-context-window-controls
  .scene-context-history-controls
  .scene-context-window-button:has(.scene-context-window-button-label)
  kbd,
.scene-context-window-controls .scene-context-history-controls .scene-context-window-button kbd {
  position: static;
  display: block;
  box-sizing: border-box;
  width: 100%;
  align-self: stretch;
  margin: 0;
  padding: 0;
  font-size: 0.5rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: center;
  opacity: 0.78;
}

.scene-context-modular-view-controls {
  display: grid;
  /* 3 now -- Show Keyboard joined Modular View/View Buttons in this row. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  border: 1px solid rgba(226, 168, 109, 0.24);
}

.scene-context-modular-view-controls .scene-context-window-button {
  border: 0;
  border-radius: 0;
}

.scene-context-modular-view-controls .scene-context-window-button + .scene-context-window-button {
  border-left: 1px solid rgba(127, 199, 217, 0.16);
}

/* Thin Command Center: Modular View / View Buttons / Keyboard stack vertically. */
@container command-center (max-width: 80px) {
  .scene-context-modular-view-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .scene-context-modular-view-controls .scene-context-window-button + .scene-context-window-button {
    border-left: 0;
    border-top: 1px solid rgba(127, 199, 217, 0.16);
  }
}

/* B-048: Module Settings / Command Center bypass = same .node-bypass-button as
   the module face (UIDEV tokens). Control now lives in #nodeModuleActionsWindow
   (moved out of #nodeSceneContextMenu); keep both hosts covered. */
#nodeSceneContextMenu .node-bypass-button,
#nodeModuleActionsWindow .node-bypass-button,
.node-scene-context-menu .node-bypass-button,
.node-module-actions-window .node-bypass-button,
.scene-context-module-bypass-button {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--node-floating-window-button-height, 1.85rem) + 0.15rem);
  height: calc(var(--node-floating-window-button-height, 1.85rem) + 0.15rem);
  max-height: calc(var(--node-floating-window-button-height, 1.85rem) + 0.15rem);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  /* Match module header bypass cell sizing for the electric glyph. */
  --node-header-height: calc(var(--node-floating-window-button-height, 1.85rem) + 0.15rem);
  container-type: size;
  overflow: hidden;
  /* Off: black plate, dim glyph, no glow (face SSOT / UIDEV). */
  background: var(--node-bypass-off-bg, #000000) !important;
  color: transparent !important;
  box-shadow: none;
  filter: none;
}

#nodeSceneContextMenu .node-bypass-button::before,
#nodeModuleActionsWindow .node-bypass-button::before,
.node-scene-context-menu .node-bypass-button::before,
.node-module-actions-window .node-bypass-button::before,
.scene-context-module-bypass-button::before {
  content: "\1F5F2";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(160, 167, 176, 0.48);
  font-size: calc(var(--node-bypass-icon-size-ratio, 0.36) * 100cqh);
  line-height: 1;
  text-shadow: none;
}

/* On / bypassed: red plate, yellow glyph, glow (face SSOT / UIDEV). */
#nodeSceneContextMenu .node-bypass-button[aria-pressed="true"],
#nodeModuleActionsWindow .node-bypass-button[aria-pressed="true"],
.node-scene-context-menu .node-bypass-button[aria-pressed="true"],
.node-module-actions-window .node-bypass-button[aria-pressed="true"],
.scene-context-module-bypass-button[aria-pressed="true"] {
  background: var(--node-bypass-on-bg, #5c1818) !important;
  color: transparent !important;
}

#nodeSceneContextMenu .node-bypass-button[aria-pressed="true"]::before,
#nodeModuleActionsWindow .node-bypass-button[aria-pressed="true"]::before,
.node-scene-context-menu .node-bypass-button[aria-pressed="true"]::before,
.node-module-actions-window .node-bypass-button[aria-pressed="true"]::before,
.scene-context-module-bypass-button[aria-pressed="true"]::before {
  content: "\1F5F2";
  color: var(--node-bypass-icon-on-color, #f7b758);
  font-size: calc(var(--node-bypass-icon-size-ratio, 0.36) * 100cqh);
  text-shadow:
    0 0 calc(100cqh * var(--node-bypass-icon-glow-spread-ratio, 0.4) * 0.18) color-mix(in srgb, var(--node-bypass-icon-glow-color, #f25d5d) 72%, transparent),
    0 0 calc(100cqh * var(--node-bypass-icon-glow-spread-ratio, 0.4) * 0.42) color-mix(in srgb, var(--node-bypass-icon-glow-color, #f25d5d) 46%, transparent);
}

#nodeSceneContextMenu .node-bypass-button:is(:hover, :focus-visible),
#nodeModuleActionsWindow .node-bypass-button:is(:hover, :focus-visible),
.node-scene-context-menu .node-bypass-button:is(:hover, :focus-visible),
.node-module-actions-window .node-bypass-button:is(:hover, :focus-visible),
.scene-context-module-bypass-button:is(:hover, :focus-visible),
#nodeSceneContextMenu .node-bypass-button[aria-pressed="true"]:is(:hover, :focus-visible),
#nodeModuleActionsWindow .node-bypass-button[aria-pressed="true"]:is(:hover, :focus-visible),
.node-scene-context-menu .node-bypass-button[aria-pressed="true"]:is(:hover, :focus-visible),
.node-module-actions-window .node-bypass-button[aria-pressed="true"]:is(:hover, :focus-visible),
.scene-context-module-bypass-button[aria-pressed="true"]:is(:hover, :focus-visible) {
  border-color: transparent;
  box-shadow: none;
  filter: none;
  background: var(--node-bypass-off-bg, #000000) !important;
}

#nodeSceneContextMenu .node-bypass-button[aria-pressed="true"]:is(:hover, :focus-visible),
#nodeModuleActionsWindow .node-bypass-button[aria-pressed="true"]:is(:hover, :focus-visible),
.node-scene-context-menu .node-bypass-button[aria-pressed="true"]:is(:hover, :focus-visible),
.node-module-actions-window .node-bypass-button[aria-pressed="true"]:is(:hover, :focus-visible),
.scene-context-module-bypass-button[aria-pressed="true"]:is(:hover, :focus-visible) {
  background: var(--node-bypass-on-bg, #5c1818) !important;
}

#nodeSceneContextMenu .node-bypass-button:disabled,
#nodeModuleActionsWindow .node-bypass-button:disabled,
.node-scene-context-menu .node-bypass-button:disabled,
.node-module-actions-window .node-bypass-button:disabled,
.scene-context-module-bypass-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.scene-context-patch-actions {
  display: grid;
  /* 2 columns, not 3 -- Share was removed (Copy/Paste remain), and a
     leftover 3rd track left them off-center with a dead empty gap. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  /* Full frame including bottom — that stroke is the shared seam with Undo/Redo. */
  border: 1px solid rgba(226, 168, 109, 0.24);
}

.scene-context-patch-action-button {
  min-height: var(--node-floating-window-button-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(16, 22, 26, 0.94);
  color: rgba(243, 241, 236, 0.9);
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}

/* Beats the generic ".node-scene-context-menu button:not(...)" rule's
   "justify-content: flex-start; text-align: left" (4 classes + 1 element)
   with an ID-scoped selector instead of piling on more :not() clauses. */
#nodeSceneContextMenu .scene-context-patch-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.scene-context-patch-action-button + .scene-context-patch-action-button {
  border-left: 1px solid rgba(127, 199, 217, 0.16);
}

.scene-context-patch-action-button:hover {
  background: rgba(226, 168, 109, 0.14);
}

.scene-context-window-button-icon,
.scene-context-window-button-label {
  display: grid;
  align-items: center;
  min-width: 0;
  min-height: 0;
  line-height: 1;
  pointer-events: none;
}

.scene-context-window-button-icon {
  justify-items: center;
  width: 100%;
  height: var(--node-floating-window-button-height);
  /* Was 0.48 -- emoji sat small in the middle of a lot of empty button
     space. Bigger ratio lets them fill the button instead of floating
     in a padded box. */
  font-size: calc(var(--node-floating-window-button-height) * 0.78);
}

.scene-context-window-button-label {
  justify-items: start;
  padding-inline: 0 4px;
  overflow: hidden;
  text-align: left;
  text-overflow: clip;
  white-space: nowrap;
}

.scene-context-window-controls .scene-context-window-button:hover,
.scene-context-window-controls .scene-context-window-button:focus-visible,
.node-visibility-menu-list .scene-context-window-button:hover,
.node-visibility-menu-list .scene-context-window-button:focus-visible {
  border-color: rgba(127, 199, 217, 0.5);
  background: rgba(22, 32, 38, 0.96);
}

.scene-context-text-box-controls button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.scene-context-text-box-controls button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.scene-context-window-controls .scene-context-window-button:first-child,
.scene-context-window-controls .scene-context-window-button:last-child,
.node-visibility-menu-list .scene-context-window-button:first-child,
.node-visibility-menu-list .scene-context-window-button:last-child {
  border-radius: 5px;
}

#nodeSceneWindowControls,
#nodeSceneWindowControls > div {
  margin: 0;
  padding: 0;
  border-radius: 0;
}

#nodeSceneWindowControls .scene-context-window-button,
#nodeSceneWindowControls .scene-context-window-button:first-child,
#nodeSceneWindowControls .scene-context-window-button:last-child {
  padding: 0;
  border-radius: 0;
}

.node-code-box-window {
  --node-code-box-window-width: 360px;
  --node-code-box-window-height: 520px;
  --node-code-box-window-min-width: 220px;
  --node-code-box-window-max-width: 720px;
  --node-code-box-window-min-height: 220px;
  --node-code-box-window-max-height: 820px;
  display: grid;
  grid-template-rows:
    var(--node-floating-window-header-height)
    minmax(0, 1fr);
  gap: 0;
  width: var(--node-code-box-window-width);
  min-width: var(--node-code-box-window-min-width);
  max-width: var(--node-code-box-window-max-width);
  height: var(--node-code-box-window-height);
  min-height: var(--node-code-box-window-min-height);
  max-height: var(--node-code-box-window-max-height);
  overflow: hidden;
  padding: 0;
}

.node-code-box-window[hidden] {
  display: none;
}

.node-code-box-window-body {
  --node-code-box-cell-height: calc(var(--node-floating-window-button-height) * 0.86);
  display: grid;
  gap: 0;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.node-code-box-window-body label {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: stretch;
  min-height: var(--node-code-box-cell-height);
  margin: 0;
  border-bottom: 1px solid rgba(130, 225, 245, 0.16);
}

.node-code-box-window-body label > span {
  display: grid;
  align-items: center;
  min-width: 0;
  padding: 0 4px;
  color: rgba(151, 226, 242, 0.82);
  font-size: 0.6rem;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: clip;
}

.node-code-box-window-body input,
.node-code-box-window-body textarea {
  width: 100%;
  min-width: 0;
  border: 0;
  border-left: 1px solid rgba(130, 225, 245, 0.16);
  border-radius: 0;
  background: rgba(2, 6, 8, 0.9);
  color: var(--node-text);
  font: inherit;
  outline: 0;
}

.node-code-box-window-body input {
  min-height: var(--node-code-box-cell-height);
  padding: 0 5px;
  font-size: 0.68rem;
}

.node-code-box-source-label {
  grid-template-columns: 1fr !important;
  grid-template-rows: 18px minmax(0, 1fr);
  min-height: 0;
}

.node-code-box-source-label > span {
  min-height: 18px;
  border-bottom: 1px solid rgba(130, 225, 245, 0.16);
}

.node-code-widget,
.node-code-box-editor {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  background: rgba(2, 6, 8, 0.9);
}

.node-code-widget-fence {
  color: rgba(245, 196, 105, 0.86);
  font-weight: 800;
}

.node-code-widget-fence-lang {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 4px;
  border: 1px solid rgba(134, 233, 189, 0.24);
  border-radius: 3px;
  background: rgba(134, 233, 189, 0.1);
  color: rgba(174, 246, 213, 0.94);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.1;
}

.node-code-box-line-numbers,
.node-code-widget-line-numbers,
.node-code-box-highlight,
.node-code-widget-highlight,
.node-code-box-source-label textarea {
  box-sizing: border-box;
  min-height: 0;
  margin: 0;
  padding: 2px;
  border: 0;
  font-family: var(--node-mono-font, "Cascadia Mono", Consolas, monospace);
  font-size: 0.68rem;
  line-height: 1.2;
  tab-size: 2;
  white-space: pre;
}

.node-code-box-line-numbers,
.node-code-widget-line-numbers {
  z-index: 1;
  overflow: hidden;
  border-right: 1px solid rgba(130, 225, 245, 0.16);
  color: rgba(151, 226, 242, 0.42);
  text-align: right;
  user-select: none;
}

.node-code-box-highlight,
.node-code-widget-highlight,
.node-code-box-source-label textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.node-code-box-highlight,
.node-code-widget-highlight {
  display: none;
  overflow: hidden;
  color: rgba(224, 240, 238, 0.92);
  pointer-events: none;
}

.node-code-box-source-label textarea {
  position: relative;
  min-height: 0;
  background: transparent;
  color: rgba(224, 240, 238, 0.92);
  caret-color: rgba(255, 255, 255, 0.96);
  resize: none;
  -webkit-text-fill-color: rgba(224, 240, 238, 0.92);
}

.node-code-box-source-label textarea:focus {
  outline: 0;
}

.node-code-token-keyword,
.node-code-widget-keyword { color: #9fd4ff; }
.node-code-token-number,
.node-code-widget-number { color: #f5c469; }
.node-code-token-string,
.node-code-widget-string { color: #c8e88f; }
.node-code-token-comment,
.node-code-widget-comment { color: rgba(244, 241, 232, 0.42); }
.node-code-token-property,
.node-code-widget-key { color: #7fc7d9; }
.node-code-widget-literal { color: #d1b3ff; }

.node-custom-display-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#nodeCodeBoxStatus {
  display: grid;
  align-items: center;
  min-height: var(--node-code-box-cell-height);
  padding: 0;
  border-top: 1px solid rgba(130, 225, 245, 0.16);
  color: rgba(130, 255, 190, 0.92);
  overflow: hidden;
  white-space: nowrap;
}

#nodeCodeBoxStatus.changed {
  color: rgba(255, 210, 126, 0.95);
}

#nodeCodeBoxStatus.error {
  color: rgba(255, 126, 126, 0.95);
}

.node-code-box-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: var(--node-code-box-cell-height);
  border-top: 1px solid rgba(130, 225, 245, 0.16);
}

.node-code-box-actions button {
  min-width: 0;
  min-height: var(--node-code-box-cell-height);
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(130, 225, 245, 0.16);
  border-radius: 0;
  background: rgba(18, 28, 32, 0.96);
  color: var(--node-text);
  font-size: 0.64rem;
}

.node-code-box-actions button:last-child {
  border-right: 0;
}

.node-floating-window-attention {
  animation: node-floating-window-attention-pulse 1s ease-out both;
}

@keyframes node-floating-window-attention-pulse {
  0%,
  100% {
    border-color: rgba(127, 199, 217, 0.3);
    box-shadow: none;
  }
  16% {
    border-color: color-mix(in srgb, var(--good) 88%, white 12%);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--good) 60%, transparent) inset,
      0 0 18px color-mix(in srgb, var(--good) 56%, transparent),
      0 0 36px color-mix(in srgb, var(--good) 24%, transparent);
  }
}

.scene-context-text-box-controls button[aria-pressed="true"] {
  background: rgba(23, 42, 36, 0.9);
  color: #66e0a3;
}

.scene-context-scope-fields label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  border: 1px solid rgba(127, 199, 217, 0.16);
  background: rgba(5, 8, 11, 0.42);
}

.scene-context-scope-fields label span {
  display: grid;
  align-items: center;
  min-height: 1rem;
  padding: 0 2px;
  overflow: hidden;
  color: rgba(173, 204, 211, 0.72);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.48rem;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
}

.scene-context-scope-fields input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--node-floating-window-button-height);
  border: 0;
  border-top: 1px solid rgba(127, 199, 217, 0.12);
  border-radius: 0;
  background: rgba(2, 4, 7, 0.72);
  color: rgba(243, 241, 236, 0.9);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.66rem;
  text-align: center;
  user-select: none;
}

.scene-context-scope-fields input:focus {
  border-color: rgba(127, 199, 217, 0.58);
  outline: 0;
}

.scene-context-scope-fields select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--node-floating-window-button-height);
  border: 0;
  border-top: 1px solid rgba(127, 199, 217, 0.12);
  border-radius: 0;
  background: rgba(2, 4, 7, 0.72);
  color: rgba(243, 241, 236, 0.9);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.66rem;
  text-align: center;
}

.scene-context-scope-fields input.value-dragging {
  border-color: rgba(127, 199, 217, 0.74);
  background:
    linear-gradient(90deg, rgba(127, 199, 217, 0.16), rgba(127, 199, 217, 0.05)),
    rgba(2, 4, 7, 0.86);
  color: #ffffff;
}

.node-scope-settings-help {
  margin: 1px 0 0;
  color: rgba(173, 204, 211, 0.58);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.54rem;
  line-height: 1.25;
}

.node-master-scope-dot-preview-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  border: 1px solid rgba(127, 199, 217, 0.16);
  background: rgba(5, 8, 11, 0.42);
}

.node-master-scope-dot-preview-shell span {
  display: grid;
  align-items: center;
  min-height: 1rem;
  padding: 0 2px;
  overflow: hidden;
  color: rgba(173, 204, 211, 0.72);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.48rem;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
}

.scene-context-text-box-controls > .node-master-scope-dot-core-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.node-master-scope-dot-preview {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--node-floating-window-button-height);
  border: 0;
  border-top: 1px solid rgba(127, 199, 217, 0.12);
  border-radius: 0;
  background: #000;
  image-rendering: auto;
}

.node-master-scope-dot-core-grid {
  display: grid;
  gap: 0;
}

.node-master-scope-dot-core-row {
  display: grid;
  grid-template-columns: minmax(54px, 0.7fr) repeat(3, minmax(58px, 1fr)) minmax(74px, 1.05fr);
  gap: 0;
  align-items: end;
  padding: 0;
  border: 1px solid rgba(127, 199, 217, 0.14);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.2);
}

.node-master-scope-dot-core-title {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: var(--node-floating-window-button-height);
  border: 0;
  border-right: 1px solid rgba(127, 199, 217, 0.16);
  border-radius: 0;
  background: rgba(127, 199, 217, 0.08);
  color: var(--accent);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.node-master-scope-dot-core-title[aria-pressed="true"] {
  border-color: rgba(127, 199, 217, 0.48);
  background: rgba(34, 82, 96, 0.34);
  color: #ffffff;
}

.node-master-scope-dot-core-title[aria-pressed="false"] {
  border-color: rgba(173, 204, 211, 0.12);
  background: rgba(0, 0, 0, 0.32);
  color: rgba(173, 204, 211, 0.42);
}

.node-master-scope-dot-core-title:focus-visible {
  outline: 2px solid rgba(127, 199, 217, 0.65);
  outline-offset: 1px;
}

.node-master-scope-dot-core-row.dot-core-disabled label,
.node-master-scope-dot-core-row.dot-core-disabled .node-master-scope-dot-preview-shell {
  opacity: 0.48;
}

.node-master-scope-dot-core-row label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  border-right: 1px solid rgba(127, 199, 217, 0.12);
}

.node-master-scope-dot-core-row label span {
  display: grid;
  align-items: center;
  min-height: 1rem;
  padding: 0 2px;
  overflow: hidden;
  color: rgba(173, 204, 211, 0.72);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.48rem;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
}

.node-master-scope-dot-core-row input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--node-floating-window-button-height);
  border: 0;
  border-top: 1px solid rgba(127, 199, 217, 0.12);
  border-radius: 0;
  background: rgba(2, 4, 7, 0.72);
  color: rgba(243, 241, 236, 0.9);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.66rem;
  text-align: center;
  user-select: none;
}

.node-master-scope-dot-core-row input[type="color"] {
  min-height: 1.85rem;
  padding: 2px;
}

.scene-context-text-box-text-control,
.scene-context-codeblock-controls,
.scene-context-range-control {
  display: grid;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid rgba(127, 199, 217, 0.18);
  border-radius: 5px;
  background: rgba(7, 10, 13, 0.55);
}

.scene-context-text-box-text-control[hidden],
.scene-context-codeblock-controls[hidden],
.scene-context-range-control[hidden] {
  display: none;
}

.scene-context-text-box-text-control > span,
.scene-context-codeblock-controls span,
.scene-context-range-control > span {
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.62rem;
  line-height: 1;
  text-transform: uppercase;
}

.scene-context-codeblock-controls label {
  display: grid;
  gap: 4px;
}

.scene-context-codeblock-controls input,
.scene-context-codeblock-controls select,
.scene-context-codeblock-controls textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(127, 199, 217, 0.24);
  border-radius: 4px;
  background: rgba(2, 4, 7, 0.72);
  color: rgba(243, 241, 236, 0.9);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.72rem;
  line-height: 1.25;
}

.scene-context-codeblock-controls textarea {
  resize: vertical;
}

.scene-context-codeblock-controls output {
  color: rgba(127, 199, 217, 0.86);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.66rem;
  min-height: 1em;
}

.scene-context-text-box-text-control textarea,
.scene-context-text-box-text-control input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  resize: vertical;
  border: 1px solid rgba(127, 199, 217, 0.24);
  border-radius: 4px;
  background: rgba(2, 4, 7, 0.72);
  color: rgba(243, 241, 236, 0.9);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.72rem;
  line-height: 1.25;
}

.scene-context-text-box-text-control input {
  resize: none;
}

/* Bug button character editor -- just a text box, no box-in-box chrome. */
.scene-context-bug-button-control {
  display: grid;
}

.scene-context-bug-button-control[hidden] {
  display: none;
}

.scene-context-bug-button-control input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(127, 199, 217, 0.24);
  border-radius: 4px;
  background: rgba(2, 4, 7, 0.72);
  color: rgba(243, 241, 236, 0.9);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.72rem;
  line-height: 1.25;
}

.scene-context-range-control input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.scene-context-width-controls button {
  justify-content: center;
  text-align: center;
}

/* Joined [-][+] pair between label and value. */
.scene-context-width-controls button:first-of-type {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.scene-context-width-controls button:last-of-type {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}

.scene-context-width-controls span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.74rem;
  line-height: 1;
  text-align: center;
}

.scene-context-width-controls .scene-context-gu-label {
  justify-content: flex-start;
  padding: 0 4px;
  color: rgba(217, 229, 232, 0.9);
  font-size: 0.68rem;
}

.scene-context-width-controls .scene-context-gu-value {
  justify-content: center;
  font-variant-numeric: tabular-nums;
}


.node-scene-context-menu button kbd {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
}

.node-scene-context-menu .scene-context-danger {
  color: #ffb7b7;
}

.node-scene-context-menu .scene-context-danger:not(:disabled) {
  border-color: rgba(242, 93, 93, 0.54);
}

.dsp-node p {
  margin: 0;
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.78rem;
}

/*
 * Half-jacks: full circle centered on the module wall. Clip to the port box
 * on the wall axis (exactly half — no outside bleed or it over-draws past a
 * semicircle). Top/bottom bleed = stroke so tip AA is not shaved. Cell height
 * = diameter so gap:0 packs flush. Param jacks: overflow:hidden + tall cell.
 */
.node-port {
  position: relative;
  z-index: 6;
  --node-port-stroke-mask-color: transparent;
  --node-port-crescent-fill: transparent;
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-port-hover-stroke, var(--node-port-hover-fill, #f3f1ec)) var(--node-port-paint-brightness),
    transparent
  );
  --node-port-crescent-at: left center;
  --node-port-crescent-paint: transparent;
  display: block;
  box-sizing: border-box;
  width: var(--node-signal-port-width);
  min-width: var(--node-signal-port-width);
  max-width: none;
  height: var(--node-signal-port-height);
  min-height: var(--node-signal-port-height);
  max-height: none;
  padding: 0;
  color: transparent;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0;
  overflow: visible;
  text-indent: -999px;
  cursor: var(--node-dot-cursor);
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Signal I/O only: wall flush (L/R = 0), tip bleed only (T/B). */
.node-port:not(.node-param-port) {
  clip-path: inset(
    calc(-1 * var(--node-port-crescent-clip-bleed))
    0
    calc(-1 * var(--node-port-crescent-clip-bleed))
    0
  );
}

body.node-slider-dragging .node-port,
body.node-slider-dragging .node-param-port {
  pointer-events: none;
}

.node-port:not(.node-param-port)::before {
  content: none;
}

.node-port.node-port-square:not(.node-param-port)::before {
  border-radius: 1px;
}

.node-port.output {
  --node-patch-point-x: 100%;
  --node-port-hover-color: var(--node-output-fill);
  --node-port-hover-stroke: var(--node-output-stroke, var(--node-output-fill));
  --node-port-crescent-at: right center;
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-port-hover-stroke) var(--node-port-paint-brightness),
    transparent
  );
}

/* Outlet: circle centered on the right (module) wall. */
.node-port.output:not(.node-param-port)::before {
  right: 0;
  left: auto;
  transform: translate(50%, -50%);
}

.node-port.input {
  --node-patch-point-x: 0%;
  --node-port-hover-color: var(--node-input-fill);
  --node-port-hover-stroke: var(--node-input-stroke, var(--node-input-fill));
  --node-port-crescent-at: left center;
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-port-hover-stroke) var(--node-port-paint-brightness),
    transparent
  );
}

/* Inlet: circle centered on the left (module) wall. */
.node-port.input:not(.node-param-port)::before {
  left: 0;
  right: auto;
  transform: translate(-50%, -50%);
}

.node-param-port {
  position: relative;
  z-index: 8;
  --node-port-stroke-mask-color: transparent;
  --node-port-crescent-fill: transparent;
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-param-hover-stroke, var(--node-port-hover-stroke, #f3f1ec)) var(--node-port-paint-brightness),
    transparent
  );
  --node-port-crescent-at: left center;
  --node-port-crescent-paint: transparent;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  display: block;
  box-sizing: border-box;
  width: var(--node-port-column-width);
  min-width: var(--node-port-column-width);
  /* Same box + optical nudge as the slider so the crescent sits on the param. */
  height: var(--node-slider-readout-height);
  min-height: 0;
  transform: translateY(var(--node-slider-readout-center-offset, 0px));
  padding: 0;
  cursor: var(--node-dot-cursor);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  overflow: hidden;
  text-indent: -999px;
  box-shadow: none;
}

.node-param-port::before {
  content: none;
}

/* Setup params: same purple as ordinary param MOD (--node-mod-input-fill), square = not realtime. */
.node-param-port.node-port-square::before {
  border-radius: 1px;
}

.node-param-port.modulation-input {
  --node-patch-point-x: 0%;
  --node-param-hover-color: var(--node-mod-input-fill);
  --node-param-hover-stroke: var(--node-mod-input-stroke);
  --node-port-crescent-at: left center;
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-param-hover-stroke) var(--node-port-paint-brightness),
    transparent
  );
}

/* Additive CMYK C — Parameter-row mod / slider-out jacks. */
.dsp-node .node-param-port.modulation-input[data-jack-channel="cyan"],
.dsp-node .node-param-port.parameter-output[data-jack-channel="cyan"] {
  --node-mod-input-fill: var(--node-jack-cyan);
  --node-mod-input-stroke: var(--node-jack-cyan);
  --node-param-output-fill: var(--node-jack-cyan);
  --node-param-output-stroke: var(--node-jack-cyan);
  --node-param-hover-color: var(--node-jack-cyan);
  --node-param-hover-stroke: var(--node-jack-cyan);
}

.node-param-port.graph-input {
  --node-patch-point-x: 0%;
  --node-param-hover-color: var(--node-mod-input-fill);
  --node-param-hover-stroke: var(--node-mod-input-stroke);
  --node-port-crescent-at: left center;
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-param-hover-stroke) var(--node-port-paint-brightness),
    transparent
  );
}

.node-param-port.modulation-input::before,
.node-param-port.graph-input::before {
  left: 0;
  right: auto;
  transform: translate(-50%, -50%);
}

.node-param-port.parameter-output {
  --node-patch-point-x: 100%;
  --node-param-hover-color: var(--node-param-output-fill);
  --node-param-hover-stroke: var(--node-param-output-stroke);
  --node-port-crescent-stroke: color-mix(
    in srgb,
    var(--node-param-hover-stroke) var(--node-port-paint-brightness),
    transparent
  );
  --node-port-crescent-at: right center;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  width: var(--node-port-column-width);
  min-width: var(--node-port-column-width);
  height: var(--node-slider-readout-height);
  min-height: 0;
}

.node-param-port.parameter-output::before {
  right: 0;
  left: auto;
  transform: translate(50%, -50%);
}

/*
 * Wired jacks: type-colored crescent stroke, empty interior.
 * Contact discs still live on #nodeWireEndpointSvg.
 */
.node-port.output.connected-port {
  --node-patch-point-color: var(--node-output-fill);
  --node-patch-point-x: 100%;
  --node-port-stroke-mask-color: transparent;
  --node-port-crescent-fill: transparent;
  --node-port-crescent-stroke: color-mix(in srgb, var(--node-output-stroke) 85%, transparent);
}

/* Connected parameter outlets use the same half-jack crescent as signal
   outs / mod ins — not a rectangular “tab” gradient. */
.node-param-port.parameter-output.connected-port {
  --node-patch-point-color: var(--node-param-output-fill);
  --node-patch-point-x: 100%;
  --node-port-stroke-mask-color: transparent;
  --node-port-crescent-fill: transparent;
  --node-port-crescent-stroke: color-mix(in srgb, var(--node-param-output-stroke) 85%, transparent);
  border-color: transparent;
  background: transparent;
}

/* Keep half-disk geometry from .parameter-output::before + shared
   .node-param-port.connected-port::before radial paint (no tab override). */

.node-port.input.connected-port {
  --node-patch-point-color: var(--node-input-fill);
  --node-patch-point-x: 0%;
  --node-port-stroke-mask-color: transparent;
  --node-port-crescent-fill: transparent;
  --node-port-crescent-stroke: color-mix(in srgb, var(--node-input-stroke) 85%, transparent);
}

.node-param-port.modulation-input.connected-port {
  --node-patch-point-color: var(--node-mod-input-fill);
  --node-patch-point-x: 0%;
  --node-port-stroke-mask-color: transparent;
  --node-port-crescent-fill: transparent;
  --node-port-crescent-stroke: color-mix(in srgb, var(--node-mod-input-stroke) 85%, transparent);
  border-color: transparent;
  background: transparent;
}

.node-param-port.graph-input.connected-port {
  --node-patch-point-color: var(--node-mod-input-fill);
  --node-patch-point-x: 0%;
  --node-port-stroke-mask-color: transparent;
  --node-port-crescent-fill: transparent;
  --node-port-crescent-stroke: color-mix(in srgb, var(--node-mod-input-stroke) 85%, transparent);
  border-color: transparent;
  background: transparent;
}

/* Selected/dragging module: do not restyle inlet arcs (match outlets — frame
   selection is enough; jacks keep idle/connected stroke only). */

.node-port:not(.node-param-port).connected-port {
  /* Signal I/O: keep clip-path bleed (do not restore overflow:hidden). */
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.node-param-port.connected-port {
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

/* Jack rings are the GPU outline. Do not paint a second inset crescent. */
.node-port:not(.node-param-port).connected-port::before,
.node-param-port.connected-port::before,
.node-port:not(.node-param-port)::before,
.node-param-port::before {
  content: none;
  background: none;
  box-shadow: none;
}

/*
 * Connected contact disks live on #nodeWireEndpointSvg (above modules), not
 * on the jack and not on the under-module cable SVG. Jack overflow:hidden
 * used to clip ::after pips into half-disks; cable-layer caps were half-hidden
 * by module paint. Never put full circles on .node-port again.
 */
.node-port.connected-port::after,
.node-param-port.connected-port::after {
  content: none;
}

/* Wire-owned solid contact disc (endpoint SVG above modules).
   Radius is CSS (same space as --node-wire-thickness) — not a viewBox
   attribute — so the plug and stroke stay the same size at every zoom. */
.node-wire-endpoint-cap {
  r: calc(var(--node-wire-patch-point-size) * 0.5);
  filter: none !important;
  box-shadow: none !important;
  pointer-events: none;
  color-interpolation: sRGB;
}

.node-wire-endpoint-cap.inactive-wire {
  opacity: 0.32;
}

.node-wire-endpoint-cap.temp {
  opacity: 0.9;
}


/* No jack hover stroke restyle — permanent crescent is already the lit look.
   smoke token: color-mix(in srgb, var(--node-port-hover-fill) */
.node-port.dragging {
  --node-port-crescent-fill: transparent;
  --node-port-crescent-stroke: color-mix(in srgb, var(--node-module-drag-stroke) 70%, transparent);
  color: var(--node-module-drag-stroke);
  filter: brightness(1.35);
  background: transparent;
  box-shadow: none;
}

.node-zap-particle {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  transform: translate(-50%, -50%);
  color: var(--zap-color, #ffec99);
  font-family: Consolas, "Courier New", monospace;
  font-size: calc(1rem * var(--zap-scale, 1));
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 10px var(--zap-glow, rgba(247, 183, 88, 0.6));
  animation: node-zap-burst 560ms ease-out forwards;
}

@keyframes node-zap-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--zap-rotate, 0deg)) scale(calc(0.9 * var(--zap-scale, 1)));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--zap-x, 0px)), calc(-50% + var(--zap-y, -42px))) rotate(calc(var(--zap-rotate, 0deg) + 118deg)) scale(calc(1.35 * var(--zap-scale, 1)));
  }
}

/* Bottom public controls (Input / Live / …) — flush under modular workspace. */
.node-graph-controls {
  --node-public-control-height: 2.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
}

.node-graph-controls > :is(
  .node-patch-community-control,
  .node-live-toggle-palette,
  .node-transport-group,
  .node-render-duration-control,
  .node-patch-audio-player-row
) {
  box-sizing: border-box;
  align-self: flex-start;
  height: var(--node-public-control-height);
  min-height: var(--node-public-control-height);
  max-height: var(--node-public-control-height);
}

.node-debug-hidden-control {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  opacity: 0;
}

#nodeStartMockInputDebugButton {
  left: 0;
  top: 0;
}

#nodeStopMockInputDebugButton {
  left: 2px;
  top: 0;
}

.node-palette {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-right: 10px;
  border-right: 1px solid var(--line);
}

.node-live-toggle-palette {
  display: inline-grid;
  /* The input/output level lanes sit between their two route buttons. */
  /* Button columns fit their labels (min 2.55rem) so Output / Ear Protect are not clipped. */
  grid-template-columns: minmax(2.55rem, max-content) repeat(2, 1.35rem) repeat(2, minmax(2.55rem, max-content));
  /* Extra buttons (MIDI, Trip) add columns instead of wrapping to a second row. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(2.55rem, max-content);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  border-right: none;
  min-width: 0;
  /* Flush to transport (no gap after MIDI Off). */
  padding-right: 0;
  flex: 0 0 auto;
}

.node-transport-group {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  /* Square transport tiles butt together; no gap before Render Sample. */
  gap: 0;
  padding-right: 0;
}

/* Command Center copy: full-width row under the window control buttons. */
#nodeSceneContextMenu .node-transport-group-command-center,
.node-scene-context-menu .node-transport-group-command-center {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  align-items: stretch;
  margin: 0;
  /* Reset toolbar transport's padding-right: 10px (was shoving the row left). */
  padding: 2px 0 0;
  padding-right: 0;
  border-top: 1px solid rgba(127, 199, 217, 0.12);
  gap: 2px;
}

/* Beat .node-scene-context-menu button { justify-content:flex-start; padding:0 10px }. */
#nodeSceneContextMenu .node-transport-group-command-center button,
.node-scene-context-menu .node-transport-group-command-center button {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: auto;
  height: 1.85rem;
  min-height: 1.85rem;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1;
}

/* One 🔊 + slider + percent widget, used by all three volume controls (live
   input in the toggle palette, live output in the transport group, rendered
   sample in the player row). Sized in em so it inherits whatever type scale
   its host row uses. The percent readout has a fixed width so the slider
   doesn't shuffle sideways as the number goes 9% -> 100%. */
.node-volume-control {
  display: inline-grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  align-items: center;
  flex: 0 0 1.35rem;
  gap: 0;
  min-width: 0;
  padding: 2px;
  color: var(--muted);
  font: 0.62rem var(--mono);
  white-space: nowrap;
  cursor: var(--node-dot-cursor);
}

/* Live levels occupy their own narrow columns instead of creating a second
   row beneath the transport buttons. */
.node-live-toggle-palette .node-volume-control {
  border: 1px solid var(--line);
  border-left: 0;
}

.node-live-toggle-palette .node-volume-control input[type="range"] {
  width: 12px;
  min-width: 12px;
}

.node-volume-control input[type="range"] {
  width: 12px;
  min-width: 12px;
  max-width: 12px;
  height: 100%;
  min-height: 0;
  margin: 0;
  /* Vertical range: standardized writing-mode + direction (not nonstandard
     appearance: slider-vertical, which Chromium deprecates). */
  writing-mode: vertical-lr;
  direction: rtl;
  accent-color: var(--accent, #39e6a3);
  cursor: var(--node-dot-cursor);
}

.node-volume-control > span,
.node-volume-control output {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/*
 * Bottom-bar transport tiles: square (width = row height).
 * Scoped to .node-graph-controls so Command Center transport stays flex-row.
 * Fixed length (not aspect-ratio + height:100%) so shrink-to-fit width matches
 * the laid-out height and Render Sample does not overlap the group.
 */
.node-graph-controls .node-transport-group button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--node-public-control-height, 2.8rem);
  min-width: var(--node-public-control-height, 2.8rem);
  max-width: var(--node-public-control-height, 2.8rem);
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(17, 20, 24, 0.62);
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1;
  cursor: var(--node-dot-cursor);
}

/* Conglomerate strip: overlap 1px so one seam is shared. Raise z-index so
   strokes paint across the seam instead of getting clipped by the neighbor.
   Activated (playing / paused / stopped) always beats plain hover/focus —
   hovering an idle neighbor must not bury the lit state. */
.node-graph-controls .node-transport-group {
  isolation: isolate;
}

.node-graph-controls .node-transport-group button {
  position: relative;
  z-index: 0;
}

.node-graph-controls .node-transport-group button + button {
  margin-left: -1px;
}

.node-graph-controls .node-transport-group button:hover:not(:disabled),
.node-graph-controls .node-transport-group button:focus-visible {
  z-index: 2;
}

.node-graph-controls .node-transport-group button.is-playing,
.node-graph-controls .node-transport-group button.is-paused,
.node-graph-controls .node-transport-group button.is-stopped,
.node-graph-controls .node-transport-group button.is-playing:hover:not(:disabled),
.node-graph-controls .node-transport-group button.is-paused:hover:not(:disabled),
.node-graph-controls .node-transport-group button.is-stopped:hover:not(:disabled),
.node-graph-controls .node-transport-group button.is-playing:focus-visible,
.node-graph-controls .node-transport-group button.is-paused:focus-visible,
.node-graph-controls .node-transport-group button.is-stopped:focus-visible {
  z-index: 4;
}

.node-transport-group button:hover {
  background: rgba(17, 20, 24, 0.85);
  color: var(--scope);
}

.node-transport-group button:active {
  background: rgba(17, 20, 24, 1);
}

.node-transport-group button.under-construction,
.node-transport-group button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.node-transport-group button.under-construction:hover,
.node-transport-group button:disabled:hover {
  background: rgba(17, 20, 24, 0.62);
  color: var(--muted);
}

button[data-transport-action="record"] {
  font-variant-emoji: text;
  font-feature-settings: "emoji" 0;
}

button[data-transport-action="record"].is-recording,
button[data-transport-action="record"].is-recording:hover,
button[data-transport-action="record"].is-recording:focus-visible {
  z-index: 4;
  border-color: var(--transport-stop-border);
  background: var(--transport-stop-bg);
  color: var(--transport-stop-fg);
}

/* ── Shared transport palette (app-wide play / pause / stop) ────────────────
   Sample-player phosphor green when playing, idle grey when stopped,
   yellow when paused, red for stop. Used by toolbar transport, Command
   Center mirrors, and the bottom rendered-sample player. */
:root {
  --transport-play-border: rgba(57, 230, 163, 0.4);
  --transport-play-bg: rgba(9, 16, 14, 0.9);
  --transport-play-fg: rgba(57, 230, 163, 0.95);
  --transport-play-bg-hover: rgba(20, 38, 30, 0.95);
  --transport-pause-border: rgba(230, 190, 57, 0.5);
  --transport-pause-bg: rgba(22, 18, 8, 0.92);
  --transport-pause-fg: rgba(240, 205, 80, 0.96);
  --transport-pause-bg-hover: rgba(40, 32, 10, 0.95);
  --transport-stop-border: rgba(230, 90, 90, 0.5);
  --transport-stop-bg: rgba(22, 10, 10, 0.92);
  --transport-stop-fg: rgba(240, 120, 120, 0.96);
  --transport-stop-bg-hover: rgba(42, 14, 14, 0.95);
  --transport-idle-border: var(--line);
  --transport-idle-bg: rgba(17, 20, 24, 0.62);
  --transport-idle-fg: var(--muted);
  --transport-idle-bg-hover: rgba(17, 20, 24, 0.85);
  --transport-idle-fg-hover: var(--scope);
}

/* Transport glyphs: force text presentation so emoji skins do not stay red. */
button.node-transport-play,
button.node-transport-pause,
button.node-transport-stop,
button[data-transport-play],
button[data-transport-action="pause"],
button[data-transport-action="stop"],
#nodeTransportPlay,
#nodeTransportPause,
#nodeTransportStop,
#nodeRenderedPlayerPlay {
  font-variant-emoji: text;
  font-feature-settings: "emoji" 0;
}

/* Ctrl+click lock: keep the play triangle as a text glyph; lock stays emoji. */
.node-transport-play-glyph,
.node-transport-play-lock {
  display: inline-block;
  line-height: 1;
}
.node-transport-play-lock {
  font-variant-emoji: emoji;
  font-feature-settings: normal;
  font-size: 0.82em;
  margin-left: 0.08em;
}

/* Play — grey idle, green playing. Pause is a separate button. */
button.node-transport-play,
button[data-transport-play],
#nodeRenderedPlayerPlay,
#nodeTransportPlay {
  border-color: var(--transport-idle-border);
  background: var(--transport-idle-bg);
  color: var(--transport-idle-fg);
  box-shadow: none;
}

button.node-transport-play:hover:not(:disabled),
button[data-transport-play]:hover:not(:disabled),
#nodeRenderedPlayerPlay:hover:not(:disabled),
#nodeTransportPlay:hover:not(:disabled) {
  border-color: var(--transport-idle-border);
  background: var(--transport-idle-bg-hover);
  color: var(--transport-idle-fg-hover);
  box-shadow: none;
}

button.node-transport-play.is-playing,
button[data-transport-play].is-playing,
#nodeRenderedPlayerPlay.is-playing,
#nodeTransportPlay.is-playing {
  border-color: var(--transport-play-border);
  background: var(--transport-play-bg);
  color: var(--transport-play-fg);
  box-shadow: none;
}

button.node-transport-play.is-playing:hover:not(:disabled),
button[data-transport-play].is-playing:hover:not(:disabled),
#nodeRenderedPlayerPlay.is-playing:hover:not(:disabled),
#nodeTransportPlay.is-playing:hover:not(:disabled) {
  background: var(--transport-play-bg-hover);
  color: var(--transport-play-fg);
  box-shadow: none;
}

button.node-transport-pause,
button[data-transport-action="pause"],
#nodeTransportPause {
  border-color: var(--transport-idle-border);
  background: var(--transport-idle-bg);
  color: var(--transport-idle-fg);
  box-shadow: none;
}

button.node-transport-pause:hover:not(:disabled),
button[data-transport-action="pause"]:hover:not(:disabled),
#nodeTransportPause:hover:not(:disabled) {
  border-color: var(--transport-idle-border);
  background: var(--transport-idle-bg-hover);
  color: var(--transport-idle-fg-hover);
  box-shadow: none;
}

button.node-transport-pause.is-paused,
button[data-transport-action="pause"].is-paused,
#nodeTransportPause.is-paused {
  border-color: var(--transport-pause-border);
  background: var(--transport-pause-bg);
  color: var(--transport-pause-fg);
  box-shadow: none;
}

button.node-transport-pause.is-paused:hover:not(:disabled),
button[data-transport-action="pause"].is-paused:hover:not(:disabled),
#nodeTransportPause.is-paused:hover:not(:disabled) {
  background: var(--transport-pause-bg-hover);
  color: var(--transport-pause-fg);
  box-shadow: none;
}

/* Stop — idle grey; red only when simulation is already stopped. */
button.node-transport-stop,
button[data-transport-action="stop"],
#nodeTransportStop {
  border-color: var(--transport-idle-border);
  background: var(--transport-idle-bg);
  color: var(--transport-idle-fg);
  box-shadow: none;
}

button.node-transport-stop:hover:not(:disabled),
button[data-transport-action="stop"]:hover:not(:disabled),
#nodeTransportStop:hover:not(:disabled) {
  background: var(--transport-idle-bg-hover);
  color: var(--transport-idle-fg-hover);
  box-shadow: none;
}

button.node-transport-stop.is-stopped,
button[data-transport-action="stop"].is-stopped,
#nodeTransportStop.is-stopped {
  border-color: var(--transport-stop-border);
  background: var(--transport-stop-bg);
  color: var(--transport-stop-fg);
  box-shadow: none;
}

button.node-transport-stop.is-stopped:hover:not(:disabled),
button[data-transport-action="stop"].is-stopped:hover:not(:disabled),
#nodeTransportStop.is-stopped:hover:not(:disabled) {
  background: var(--transport-stop-bg-hover);
  color: var(--transport-stop-fg);
  box-shadow: none;
}

button.node-transport-stop:disabled,
button[data-transport-action="stop"]:disabled {
  filter: none;
  opacity: 0.42;
}

.node-live-toggle-palette .node-live-toggle {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
  min-width: 0;
  width: auto;
  min-width: 2.55rem;
  height: 100%;
  min-height: 0;
  gap: 0;
  padding: 0 6px;
  line-height: 1;
  text-transform: none;
  overflow: hidden;
}

.node-live-toggle-palette .node-live-toggle + .node-live-toggle {
  margin-left: -1px;
}

.node-live-toggle-palette .node-live-toggle:first-child {
  border-radius: 5px 0 0 5px;
}

.node-live-toggle-palette .node-live-toggle:last-child {
  border-radius: 0 5px 5px 0;
}

.node-live-toggle-palette .node-live-toggle span:last-child {
  color: var(--muted);
}

.node-live-toggle-palette .node-live-toggle span {
  display: grid;
  align-items: center;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  line-height: 1;
  font-family: inherit;
  font-weight: inherit;
  font-size: clamp(0.72rem, calc(var(--node-toolbar-row-height) * 0.3), 1.05rem);
}

.node-live-toggle-palette .node-live-toggle:hover,
.node-live-toggle-palette .node-live-toggle:focus-visible {
  z-index: 2;
}

/* Render Sample + the Start/End range fields read as ONE segmented control:
   the button is rounded on the left, the last field on the right, and the
   fields share the button's border so there is no visual gap between them.
   (The Start/End fields are moved in here at runtime by
   moveNodeGraphRenderRangeToDurationControl.) */
.node-render-duration-control {
  display: inline-grid;
  align-items: stretch;
  justify-items: stretch;
  gap: 0;
  min-height: 0;
  /* The Start/End cells size their caption/number from this the same way the
     BPM/BEATS/UNIT/FPS cells do. It is declared on the view toolbar, which is
     NOT an ancestor of this row -- without redeclaring it here the clamp()s
     below are invalid and silently fall back to the inherited size. */
  --node-toolbar-row-height: 2.8rem;
}

.node-render-duration-control button,
.node-render-duration-control span,
.node-render-duration-control input {
  border-radius: 0;
}

.node-render-duration-control button {
  border-radius: 0;
}

.node-render-duration-control {
  display: flex;
  align-items: stretch;
  gap: 0;
}

#nodeDownloadSampleButton {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--node-public-control-height, 2.8rem);
  min-width: var(--node-public-control-height, 2.8rem);
  max-width: var(--node-public-control-height, 2.8rem);
  height: 100%;
  padding: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(17, 20, 24, 0.62);
  color: var(--muted);
  line-height: 1;
  cursor: var(--node-dot-cursor);
}

#nodeDownloadSampleButton .node-modular-view-icon {
  width: auto;
  height: auto;
  align-self: center;
  justify-self: center;
  overflow: visible;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: calc((var(--node-public-control-height, 2.8rem) - 12px) * 0.8);
}

#nodeDownloadSampleButton:active {
  cursor: var(--node-dot-cursor);
}

.node-sample-drag-ghost {
  position: fixed;
  z-index: 400;
  pointer-events: none;
  padding: 8px 12px;
  border: 1px solid rgba(226, 168, 109, 0.8);
  background: rgba(18, 20, 15, 0.94);
  color: rgba(243, 240, 230, 0.92);
  font: 12px/1.2 Consolas, "Courier New", monospace;
}

.node-plugin-patch-info {
  padding: 10px 12px 8px;
  overflow: auto;
  flex: 0 0 auto;
  max-height: 46%;
  border-bottom: 1px solid rgba(243, 240, 230, 0.1);
}

.node-patch-raw-card {
  flex: 1 1 auto;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.node-patch-raw-editor {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #05090b;
}

.node-patch-raw-highlight,
.node-patch-raw-text {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  tab-size: 2;
  white-space: pre;
  scrollbar-gutter: stable;
}

.node-patch-raw-highlight {
  display: none;
  color: rgba(205, 214, 216, 0.9);
  pointer-events: none;
  overflow: hidden;
}

.node-patch-raw-text {
  display: block;
  resize: none;
  overflow: auto;
  color: rgba(205, 214, 216, 0.92);
  caret-color: rgba(255, 255, 255, 0.96);
  -webkit-text-fill-color: rgba(205, 214, 216, 0.92);
}

.node-patch-raw-text:focus {
  outline: none;
}

.node-patch-raw-editor:focus-within {
  box-shadow: inset 0 0 0 1px rgba(127, 199, 217, 0.42);
}

.json-token-key { color: rgba(127, 199, 217, 0.96); }
.json-token-string { color: rgba(214, 176, 130, 0.96); }
.json-token-number { color: rgba(169, 205, 166, 0.96); }
.json-token-keyword { color: rgba(211, 160, 112, 0.96); }
.json-token-punct { color: rgba(156, 172, 176, 0.72); }

/* "Render / Sample" stacked on two lines, same type as Input/Output/MIDI. */
.node-render-duration-control #nodeRenderButton {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
  gap: 0;
  min-width: 6.2rem;
  height: 100%;
  min-height: 0;
  padding: 0 10px;
  line-height: 1;
  text-transform: none;
  overflow: hidden;
}

/* Mirrors .node-live-toggle-palette .node-live-toggle span exactly. */
.node-render-duration-control #nodeRenderButton span {
  display: grid;
  align-items: center;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  /* The generic `.node-render-duration-control span` rule paints a bordered,
     filled cell -- meant for the old duration readout, not for text inside a
     button. Left as-is it drew a second rectangle inside the button's own
     border (box-in-box). */
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  line-height: 1;
  font-family: inherit;
  font-weight: inherit;
  font-size: clamp(0.72rem, calc(var(--node-toolbar-row-height) * 0.3), 1.05rem);
}

.node-render-duration-control span {
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-left-width: 0;
  background: rgba(17, 20, 24, 0.62);
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
}

.node-render-duration-control input {
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-left-width: 0;
  border-radius: 0 5px 5px 0;
  background: #101214;
  color: var(--text);
  font: inherit;
}

/* Start/End are styled exactly like the BPM / BEATS / UNIT / FPS cells: they
   already carry .node-header-timing-field, so the job here is to NOT override
   it. Everything below just re-asserts the base values at a specificity that
   beats the generic `.node-render-duration-control span|input` rules above,
   which would otherwise repaint them as part of the button strip. Keep these
   in sync with .node-header-timing-field / .node-header-timing-input. */
.node-render-duration-control .node-header-render-range-field {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 40% 60%;
  align-content: stretch;
  align-items: stretch;
  justify-items: stretch;
  /* Native number inputs are ~20ch wide; do not let them stretch this strip. */
  flex: 0 0 3.75rem;
  width: 3.75rem;
  min-width: 3.75rem;
  max-width: 3.75rem;
  height: 100%;
  padding: 0;
  gap: 0;
  overflow: hidden;
  /* border-block closes the top and bottom of the strip -- without it the
     caption row sat open above the number and the widget looked unfinished
     next to the Render Sample button. */
  border: 0;
  border-block: 1px solid var(--line);
  border-inline-end: 1px solid rgba(127, 199, 217, 0.08);
  border-radius: 0;
  background: none;
  color: rgba(199, 226, 226, 0.68);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 100%;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* Butt straight up against the Render Sample button: the button already draws
   a border on that edge, so a second one here made a visible double line --
   a seam that read as a gap between two separate widgets rather than one
   joined control. */
.node-render-duration-control .node-header-render-range-field:first-of-type {
  border-inline-start: 0;
}

/* The End cell keeps a right border: it is the seam the rendered-sample
   player butts against, so the strip stays one continuous surface. */
.node-render-duration-control .node-header-render-range-field:last-of-type {
  border-inline-end: 1px solid var(--line);
}

.node-render-duration-control .node-header-render-range-field span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  opacity: 1;
  color: inherit;
  text-overflow: clip;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
  font-family: inherit;
  font-size: clamp(0.72rem, calc(var(--node-toolbar-row-height) * 0.26), 1rem);
  font-weight: 800;
}

.node-render-duration-control .node-header-render-range-field input {
  box-sizing: border-box;
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(127, 199, 217, 0.18);
  border-radius: 0;
  outline: 0;
  background: rgba(0, 0, 0, 0.32);
  color: rgba(236, 252, 249, 0.94);
  font-family: inherit;
  font-size: clamp(0.78rem, calc(var(--node-toolbar-row-height) * 0.32), 1.05rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
  text-align: center;
  cursor: text;
  user-select: auto;
  caret-color: auto;
  pointer-events: auto;
}

.node-render-duration-control .node-header-render-range-field input:focus {
  border-color: rgba(127, 199, 217, 0.52);
  background: rgba(0, 0, 0, 0.58);
}

.node-render-duration-control .node-header-render-range-field input::-webkit-outer-spin-button,
.node-render-duration-control .node-header-render-range-field input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.node-render-duration-control input:focus {
  outline: none;
  border-color: rgba(127, 199, 217, 0.58);
}

.node-output-summary {
  flex: 1 1 100%;
  min-width: min(100%, 24rem);
  margin: -2px 0 0;
  color: var(--muted);
  font-family: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.74rem;
  line-height: 1.35;
}

.node-live-controls {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 10px;
  border-right: 1px solid var(--line);
}

.node-live-controls .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

#nodeLiveStatus {
  width: 6.5em;
}

#nodeLiveInputStatus {
  width: 9em;
}

#nodeLiveMicStatus {
  width: 11em;
}

.node-live-input-device-select {
  width: 13em;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(17, 20, 24, 0.72);
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
}

.node-live-input-device-select:disabled {
  color: rgba(160, 167, 176, 0.52);
}

.node-live-input-device-select:focus {
  outline: none;
  border-color: rgba(127, 199, 217, 0.58);
}

#nodeLiveInputMeter {
  width: 17em;
}

#nodeLiveInputTestStatus {
  width: 9.5em;
}

#nodeLiveEngineStatus {
  width: 9.5em;
}

#nodeLivePlanStatus {
  width: 20em;
}

#nodeLiveMeter {
  width: 17em;
}

#nodeLiveRouteStatus {
  width: 22em;
  user-select: text;
  cursor: text;
}

/*
 * Input / Output toggles: neutral “on” (red-ish armed), never green/yellow.
 * Play / pause / stop colors live ONLY on transport controls.
 */
.node-live-toggle.active {
  position: relative;
  z-index: 3;
  border-color: rgba(242, 93, 93, 0.76);
  background: rgba(122, 28, 28, 0.72);
  color: #ffd6d6;
  box-shadow: inset 0 0 0 1px rgba(242, 93, 93, 0.76);
}

.node-live-toggle.active:hover,
.node-live-toggle.active:focus-visible {
  z-index: 4;
}

/* Paused: same armed look as Live — pause color is on the transport ▶/⏸ only. */
.node-live-toggle.paused,
#nodeLiveOutputButton.paused {
  position: relative;
  z-index: 3;
  border-color: rgba(242, 93, 93, 0.76);
  background: rgba(122, 28, 28, 0.72);
  color: #ffd6d6;
  box-shadow: inset 0 0 0 1px rgba(242, 93, 93, 0.76);
}

.node-live-toggle.paused:hover,
.node-live-toggle.paused:focus-visible,
#nodeLiveOutputButton.paused:hover,
#nodeLiveOutputButton.paused:focus-visible {
  z-index: 4;
}

.node-live-toggle-palette .node-live-toggle.active span:last-child,
.node-live-toggle-palette .node-live-toggle.paused span:last-child {
  color: #ffd6d6;
}

.node-palette button[data-palette-node].active {
  border-color: rgba(113, 212, 155, 0.42);
  color: var(--good);
}






















.node-execution-order {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.node-execution-order li {
  min-width: 0;
  padding: 5px 7px;
  overflow: hidden;
  border: 1px solid rgba(243, 241, 236, 0.13);
  border-radius: 5px;
  background: rgba(243, 241, 236, 0.045);
  color: var(--text);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
  text-overflow: clip;
  white-space: nowrap;
}

.node-execution-order li.selected {
  border-color: rgba(247, 183, 88, 0.62);
  box-shadow: 0 0 0 1px rgba(247, 183, 88, 0.24);
}




.node-execution-order li.empty {
  color: var(--muted);
}

.disconnect-wire-button {
  min-height: 30px;
  padding: 0 10px;
  border-color: rgba(226, 168, 109, 0.48);
  border-radius: 999px;
  color: var(--accent-2);
  font-size: 0.72rem;
}











/* "Hide Debug" (nodeKeyboardDebugToggleButton, body.keyboard-debug-hidden)
   is the master switch -- when it's off, the "Show Evidence" button and
   everything it can reveal should be gone too, not just left in whatever
   debug-collapsed state they happened to be in. Without this, someone
   could turn off Hide Debug and still have previously-revealed evidence
   panels sitting there, or still see a button offering to reveal more. */
body.keyboard-debug-hidden #toggleDebugButton {
  display: none;
}

/* Check All Modules writes native-module self-test results into the debug log.
   Keep it available only while debug mode is on, matching the rest of this
   developer-facing block. */
body.keyboard-debug-hidden #nodeCheckAllModulesButton {
  display: none;
}

/* Public render controls remain available with Debug off. Diagnostic surfaces
   opt into this one shared marker instead of relying on DOM position. */
body.keyboard-debug-hidden .node-debug-only {
  display: none;
}

/* With diagnostics removed, the wiring column fills the viewport so the
   public control strip stays on the bottom edge in modular and content views. */
body.keyboard-debug-hidden
  .node-wiring-panel:not(.modular-only-view):not(.camera-view-visible) {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

body.keyboard-debug-hidden
  .node-wiring-panel:not(.modular-only-view):not(.camera-view-visible)
  > .node-graph-main-row,
body.keyboard-debug-hidden
  .node-wiring-panel:not(.modular-only-view):not(.camera-view-visible)
  > #nodeGraphWorkspace:not([hidden]) {
  flex: 1 1 0%;
  height: 0;
  min-height: 0;
  overflow: hidden;
}

body.keyboard-debug-hidden
  .node-wiring-panel:not(.modular-only-view):not(.camera-view-visible)
  .node-graph-controls {
  flex: 0 0 auto;
  margin-top: 0;
}


.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 20px;
  margin-top: 20px;
}

.panel {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.panel.node-wiring-panel {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}






.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
}

.pill.good {
  color: var(--good);
}

.pill.warn {
  color: var(--warn);
}

/* Same gold as transport ⏸ (.is-paused / --transport-pause-fg). */
.pill.paused {
  color: var(--transport-pause-fg);
}

.pill.inspection-source.none {
  color: var(--muted);
}

.pill.inspection-source.transport {
  border-color: rgba(113, 212, 155, 0.42);
  background: rgba(113, 212, 155, 0.09);
  color: var(--good);
}

.pill.inspection-source.hover {
  border-color: rgba(127, 199, 217, 0.5);
  background: rgba(127, 199, 217, 0.11);
  color: var(--accent);
}

.pill.inspection-delta.none {
  color: var(--muted);
}

.pill.inspection-delta.hover {
  border-color: rgba(226, 168, 109, 0.48);
  background: rgba(226, 168, 109, 0.11);
  color: var(--accent-2);
}

.pill.inspection-playback.paused {
  color: var(--muted);
}

.pill.inspection-playback.playing {
  border-color: rgba(113, 212, 155, 0.42);
  background: rgba(113, 212, 155, 0.09);
  color: var(--good);
}

.pill.inspection-playback.ended {
  border-color: rgba(226, 168, 109, 0.48);
  background: rgba(226, 168, 109, 0.11);
  color: var(--accent-2);
}

.pill.inspection-view.follow {
  border-color: rgba(113, 212, 155, 0.42);
  background: rgba(113, 212, 155, 0.09);
  color: var(--good);
}

.pill.inspection-view.free {
  border-color: rgba(127, 199, 217, 0.48);
  background: rgba(127, 199, 217, 0.1);
  color: var(--accent);
}

.pill.inspection-preview.idle {
  color: var(--muted);
}

.pill.inspection-preview.active {
  border-color: rgba(226, 168, 109, 0.54);
  background: rgba(226, 168, 109, 0.13);
  color: var(--accent-2);
}

.pill.inspection-seek.idle {
  color: var(--muted);
}

.pill.inspection-seek.active {
  border-color: rgba(113, 212, 155, 0.42);
  background: rgba(113, 212, 155, 0.09);
  color: var(--good);
}

.pill.inspection-seek-target.none {
  color: var(--muted);
}

.pill.inspection-seek-target.active {
  border-color: rgba(127, 199, 217, 0.48);
  background: rgba(127, 199, 217, 0.1);
  color: var(--accent);
}

.pill.inspection-seek-sync.none {
  color: var(--muted);
}

.pill.inspection-seek-sync.aligned {
  border-color: rgba(113, 212, 155, 0.42);
  background: rgba(113, 212, 155, 0.09);
  color: var(--good);
}

.pill.inspection-seek-sync.diverged {
  border-color: rgba(226, 168, 109, 0.54);
  background: rgba(226, 168, 109, 0.13);
  color: var(--accent-2);
}

.pill.inspection-target.none {
  color: var(--muted);
}

.pill.inspection-target.active {
  border-color: rgba(127, 199, 217, 0.48);
  background: rgba(127, 199, 217, 0.1);
  color: var(--accent);
}

.pill.inspection-transport.none {
  color: var(--muted);
}

.pill.inspection-transport.active {
  border-color: rgba(113, 212, 155, 0.42);
  background: rgba(113, 212, 155, 0.09);
  color: var(--good);
}

.pill.inspection-divergence.aligned {
  color: var(--muted);
}

.pill.inspection-divergence.diverged {
  border-color: rgba(226, 168, 109, 0.54);
  background: rgba(226, 168, 109, 0.13);
  color: var(--accent-2);
}

.waveform {
  display: block;
  width: 100%;
  height: 180px;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #14171a;
  touch-action: none;
  user-select: none;
}




.summary-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
}

.summary-card strong {
  display: block;
  margin-top: 5px;
  color: var(--good);
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.1rem;
}

.summary-card strong.warn {
  color: var(--warn);
}

.summary-card.comparison {
  border-color: rgba(120, 209, 255, 0.38);
  background: #182129;
}


.parameter-track {
  display: grid;
  grid-template-columns: minmax(86px, 116px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  min-height: 48px;
}

.parameter-track-label {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.82rem;
}

.parameter-track-rail {
  display: flex;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #15191d;
}

.parameter-segment {
  display: flex;
  min-width: 64px;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 7px 10px;
  border-right: 1px solid rgba(243, 241, 236, 0.14);
  color: var(--text);
}

.parameter-segment:last-child {
  border-right: 0;
}

.parameter-segment.active {
  background: rgba(127, 199, 217, 0.16);
}

.parameter-segment.preview {
  background: rgba(255, 211, 119, 0.12);
}

.parameter-segment span {
  color: var(--muted);
  font-size: 0.72rem;
}

.parameter-segment strong {
  overflow-wrap: anywhere;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.94rem;
}

.parameter-timeline-marker {
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 2px;
  pointer-events: none;
  background: var(--text);
  box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.72);
}

.parameter-timeline-marker.probe {
  background: #f6c96d;
  box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.72), 0 0 12px rgba(246, 201, 109, 0.25);
}


.report-button {
  min-height: 32px;
  padding: 0 12px;
}

.report-button.active {
  border-color: var(--accent);
  background: rgba(127, 199, 217, 0.16);
}




.control-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-right: 10px;
  border-right: 1px solid var(--line);
}

.control-group:last-child {
  padding-right: 0;
  border-right: 0;
}

.phase-button {
  min-height: 32px;
  padding: 0 12px;
}

.phase-button.active {
  border-color: var(--accent);
  background: rgba(127, 199, 217, 0.16);
  color: var(--text);
}

.phase-button.preview {
  border-color: rgba(255, 211, 119, 0.62);
  background: rgba(255, 211, 119, 0.12);
  color: var(--text);
}

.grid .panel {
  margin-top: 0;
}

.kv {
  display: grid;
  grid-template-columns: minmax(150px, 240px) minmax(0, 1fr);
  gap: 8px 18px;
  margin: 16px 0 0;
}

.kv.compact {
  grid-template-columns: minmax(90px, 130px) minmax(0, 1fr);
}

dt {
  color: var(--muted);
}

dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: Consolas, "Courier New", monospace;
}

dd.warn {
  color: var(--warn);
}


.phase {
  padding: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.phase.preview,
.phase-stat.preview {
  border-color: rgba(255, 211, 119, 0.62);
  background: rgba(255, 211, 119, 0.1);
}


.phase-stat {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
}

.phase-stat.active {
  border-color: rgba(120, 209, 255, 0.48);
  background: rgba(127, 199, 217, 0.12);
}


.checklist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}


.check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
}

.check-row strong {
  color: var(--good);
  font-size: 0.8rem;
}

.check-row span {
  overflow-wrap: anywhere;
  text-align: right;
  color: var(--muted);
}


.contract-row {
  display: grid;
  gap: 6px;
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
}

.contract-row strong {
  color: var(--good);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.contract-row span {
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.84rem;
}

.contract-row.warn-row strong {
  color: var(--warn);
}


.chain-row {
  display: grid;
  grid-template-columns: minmax(34px, 48px) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
}

.chain-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(127, 199, 217, 0.42);
  border-radius: 50%;
  color: var(--accent);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.82rem;
}

.chain-cell {
  min-width: 0;
}

.chain-cell span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.chain-cell strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.9rem;
}

.warn-row {
  background: var(--bad-bg);
}

.warn-row strong {
  color: var(--warn);
}

.artifact-heading,
.artifact-row {
  display: grid;
  grid-template-columns:
    minmax(130px, 1fr)
    minmax(110px, 150px)
    minmax(0, 2fr)
    minmax(150px, 190px)
    minmax(90px, 120px);
  gap: 12px;
  align-items: center;
}

.artifact-heading {
  padding: 0 12px;
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.artifact-heading span:nth-child(4),
.artifact-heading span:nth-child(5) {
  justify-self: end;
}

.artifact-row {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  background: var(--panel-2);
}

.artifact-row:hover {
  border-color: var(--accent);
}

.artifact-row strong {
  color: var(--accent-2);
  font-size: 0.85rem;
}

.artifact-status {
  justify-self: end;
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.78rem;
  white-space: nowrap;
}

.artifact-status.good {
  color: var(--good);
}

.artifact-status.warn {
  color: var(--warn);
}

.artifact-modified {
  justify-self: end;
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.78rem;
  white-space: nowrap;
}

.artifact-modified.warn {
  color: var(--warn);
}

code {
  overflow-wrap: anywhere;
  color: var(--accent);
}

@media (max-width: 820px) {
  .topbar,
  .audio-panel {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .topbar {
    display: grid;
  }

  .grid,
  .checklist,
  .chain-row,
  .artifact-row {
    grid-template-columns: 1fr;
  }

  .node-settings-sample-rate-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .node-graph-workspace {
    min-height: var(--node-grid-height);
  }

}

.metadata-smoothing-mode-button.under-construction,
.metadata-smoothing-mode-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  position: relative;
}
.metadata-smoothing-mode-button.under-construction::after {
  content: "🚧";
  position: absolute;
  right: -3px;
  bottom: -3px;
  font-size: 9px;
  line-height: 1;
  pointer-events: none;
}

/* —— Plugin shelf faces (Knob face + slider/button faces) —— */
.node-plugin-toggle-face,
.node-plugin-momentary-face,
.node-plugin-slider-face {
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}
.node-plugin-slider-face {
  display: flex;
  align-items: center;
  justify-content: center;
}
.node-plugin-slider-face {
  padding: calc(var(--node-grid-size) * 0.15);
}
.node-plugin-toggle-face,
.node-plugin-momentary-face {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  pointer-events: auto;
  z-index: 2;
  container-type: size;
  container-name: pluginbtn;
}
.dsp-node .node-plugin-toggle-face canvas,
.dsp-node .node-plugin-momentary-face canvas {
  pointer-events: none !important;
}
[data-plugin-button-display-settings-panel] [data-plugin-btn-text] {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  outline: none;
}
.node-plugin-slider-face {
  pointer-events: auto;
  touch-action: none;
  cursor: var(--node-dot-cursor);
}
.node-plugin-slider-face-row,
.node-plugin-slider-face-control {
  display: grid;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
/* Native range stays hidden (app-wide .dsp-node input[type=range]). Face
   readout is the visible control and writes the hidden value param. */
.node-plugin-slider-face .node-slider-readout,
.node-plugin-slider-face .node-slider-readout-input {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  pointer-events: auto;
}
.node-plugin-slider-face .node-slider-readout-label {
  display: none;
}

/* LayoutA face row: fixed display-height track (not height:100% of module). */
.node-harmonic-count-display,
.node-harmonic-lines-display,
.node-additive-filter-curve-display {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: calc(var(--node-grid-height) * var(--node-module-display-height-units, 2));
  min-height: calc(var(--node-grid-height) * 2);
  align-self: stretch;
  overflow: hidden;
  background: #050508;
  pointer-events: none;
}
.node-harmonic-count-canvas,
.node-harmonic-lines-canvas,
.node-additive-filter-curve-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

/* Choice names (Waveform / Filter) must not widen the module. */
.dsp-node[data-node-type="additiveGenerator"] .node-slider-readout-value,
.dsp-node[data-node-type="additiveLinearFilter"] .node-slider-readout-value,
.dsp-node[data-node-type="additiveAnalogFilter"] .node-slider-readout-value,
.dsp-node[data-node-type="additiveGrowl"] .node-slider-readout-value,
.dsp-node[data-node-type="additiveNoisyFreq"] .node-slider-readout-value,
.dsp-node[data-node-type="additiveNoisyPhase"] .node-slider-readout-value,
.dsp-node[data-node-type="additiveNoisyPan"] .node-slider-readout-value,
.dsp-node[data-node-type="additiveNoisyAmp"] .node-slider-readout-value,
.dsp-node[data-node-type="additiveOut"] .node-slider-readout-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Metamodule boundary thrus (compact tile: ports painted in createBody). */
.node-metamodule-boundary-face {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.35em;
  min-height: 1.5em;
  padding: 0.15em 0.25em;
  box-sizing: border-box;
}

/*
 * MetamoduleLayout: header | shared LayoutA IO (.dsp-node-io-section) | face | params | lip
 * Jack/label paint is app-wide (no private IO dialect). Band order only differs:
 * IO sits ABOVE the face. Tracks from applyNodeGraphModuleLayout.
 */
.dsp-node.chrome-layout-metamodule {
  display: grid;
  /* Single column only — never inherit LayoutB's implicit face column. */
  grid-template-columns: minmax(0, 1fr) !important;
  overflow: visible;
  max-height: calc(
    (var(--node-grid-height) * var(--node-grid-height-units, 4))
    - var(--node-module-grid-inset-y-total)
  );
}
.dsp-node.chrome-layout-metamodule > * {
  grid-column: 1 !important;
}
.dsp-node.chrome-layout-metamodule > .dsp-node-header {
  min-height: 0;
  max-height: var(--node-header-height);
  overflow: hidden;
}
.dsp-node.chrome-layout-metamodule > .dsp-node-io-section {
  align-self: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.dsp-node.chrome-layout-metamodule > .node-module-face {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  box-sizing: border-box;
  overflow: hidden;
}
.dsp-node.chrome-layout-metamodule > .dsp-node-body {
  align-self: start;
  min-height: 0;
  overflow: visible;
}

/* Metamodule face — layout-canvas arrangement of pinned child displays. */
.node-metamodule-face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: #000;
}
.node-metamodule-canvas-stage {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #000;
  z-index: 2;
}
.node-metamodule-canvas-stage[hidden] {
  display: none !important;
}
.node-metamodule-canvas-stage .node-layout-canvas-tile .node-layout-canvas-face,
.node-metamodule-canvas-stage .node-layout-canvas-tile .node-screen-solo-face {
  pointer-events: none;
}
.node-metamodule-face-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  font-size: 0.85em;
  text-align: center;
  pointer-events: none;
  z-index: 1;
}
.node-metamodule-face-empty[hidden] {
  display: none !important;
}
.node-metamodule-mirror-canvas {
  display: block;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  image-rendering: pixelated;
  pointer-events: none;
}
.node-metamodule-display-stack {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  flex: 1;
}
.dsp-node[data-node-type="metamodule"] .node-io-row.input[data-port="Poly"] .node-port.input {
  border-radius: 2px;
}

/* Whole-module canvas tiles (node.ui.canvasWholeModule or ?module=). The
   module keeps its workspace zoom-1.0 layout; nodeGraphScreenSoloWholeModuleFit
   applies one uniform scale to fit the tile. Same chrome as the circuit
   builder (header, body, sliders, jacks). Dragging the module is off so the
   tile does not move. */
.node-layout-canvas-tile:has(> .dsp-node.node-whole-module-face) {
  overflow: hidden;
}

.node-layout-canvas-tile > .dsp-node.node-whole-module-face .node-drag-handle {
  pointer-events: none !important;
}

/* Embed: no tile frame / arrange grips around the single module. */
html.soemdsp-whole-module .node-layout-canvas-frame,
html.soemdsp-whole-module .node-layout-canvas-grip {
  display: none !important;
}

/* ---- Seed control [NUMBER][🎲][+][−] (node-graph-seed-control.js) ---- */
.node-parameter-control.node-seed-control {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: transparent;
  container-type: inline-size;
}
.node-seed-control > .node-slider-readout,
.node-seed-control > .node-slider-readout-input {
  order: 0;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 1px solid var(--line);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: ns-resize;
}
.node-seed-control > .node-slider-readout:not([data-control="number"]),
.node-seed-control > .node-slider-readout:not([data-control="number"]):hover,
.node-seed-control > .node-slider-readout.value-dragging {
  cursor: ns-resize !important;
}
.node-seed-control > .node-slider-readout::before,
.node-seed-control > .node-slider-readout::after,
.node-seed-control .node-slider-amount-fill,
.node-seed-control .node-slider-readout-portal,
.node-seed-control .node-slider-readout-label,
.node-seed-control .node-slider-readout-unit {
  display: none !important;
}
.node-seed-control .node-slider-readout-value {
  /* Fills its box: JS fits font size to width/height per value. GPU paints it. */
  font-size: 0.86rem; /* overridden per value by fitNodeGraphSeedNumber */
  line-height: 1;
  text-align: center;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  max-width: none;
  font-variant-numeric: tabular-nums;
  color: transparent;
}
.node-seed-btn {
  flex: 0 0 var(--node-slider-readout-height);
  width: var(--node-slider-readout-height);
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  font: inherit;
  font-size: calc(var(--node-slider-readout-height) * 0.7);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.node-seed-btn:hover { background: rgba(255, 255, 255, 0.08); }
.node-seed-btn:active { background: rgba(255, 255, 255, 0.16); }
.node-seed-btn-dice { order: 1; }
.node-seed-btn-plus { order: 2; border-left: 1px solid var(--line); }
.node-seed-btn-minus { order: 3; border-left: 1px solid var(--line); }
/* seed-value-center */
.node-seed-control .node-slider-readout-value {
  position: static;
  grid-row: auto;
  grid-column: auto;
  margin: auto;
  transform: none;
  align-self: center;
  justify-self: center;
}
/* seed-pm-fill: + and − glyphs fill their square button */
.node-seed-btn-plus,
.node-seed-btn-minus {
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(var(--node-slider-readout-height) * 1.15);
  font-weight: 300;
  line-height: 0;
  padding-bottom: calc(var(--node-slider-readout-height) * 0.06);
  box-sizing: border-box;
}

/* seed-geom-glyphs: + / − are CSS bars (no font metrics), dice fits with margin */
.node-seed-btn-plus,
.node-seed-btn-minus {
  position: relative;
  font-size: 0 !important;
  line-height: 0;
  padding: 0 !important;
  color: #fafdff;
}
.node-seed-btn-plus::before,
.node-seed-btn-minus::before,
.node-seed-btn-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  pointer-events: none;
  border-radius: 0;
}
.node-seed-btn-plus::before,
.node-seed-btn-minus::before {
  width: calc(var(--node-slider-readout-height) * 0.62);
  height: max(1px, calc(var(--node-slider-readout-height) * 0.09));
}
.node-seed-btn-plus::after {
  width: max(1px, calc(var(--node-slider-readout-height) * 0.09));
  height: calc(var(--node-slider-readout-height) * 0.62);
}
.node-seed-btn-dice {
  overflow: hidden;
  padding: 0 !important;
  line-height: 1;
  font-size: 0;
  container-type: size;
}
.node-seed-die {
  position: relative;
  width: 62cqmin;
  height: 62cqmin;
  box-sizing: border-box;
  border: max(1px, calc(var(--node-slider-readout-height) * 0.07)) solid transparent;
  border-radius: 18%;
  pointer-events: none;
}
.node-seed-die-pip {
  position: absolute;
  width: 16%;
  height: 16%;
  border-radius: 50%;
  background: transparent;
}
/* Standard 5: four corners and the center. */
.node-seed-die-pip:nth-child(1) { top: 16%; left: 16%; }
.node-seed-die-pip:nth-child(2) { top: 16%; right: 16%; }
.node-seed-die-pip:nth-child(3) { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.node-seed-die-pip:nth-child(4) { bottom: 16%; left: 16%; }
.node-seed-die-pip:nth-child(5) { bottom: 16%; right: 16%; }

/* seed-btn-height: buttons/number exactly fill the control height (no global button min-height) */
.node-seed-control > .node-seed-btn,
.node-seed-control > .node-slider-readout {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch;
  margin: 0 !important;
  box-sizing: border-box;
}
.node-seed-control > .node-slider-readout {
  display: flex !important;
  align-items: center;
  justify-content: center;
}