/* GraphFlow visual system: graphite surfaces with a unified green action language. */

@font-face {
  font-family: "GraphFlow Sans";
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --app-color-scheme: dark;
  --font-sans: "GraphFlow Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --bg-deep: #090b0c;
  --bg: #0d1011;
  --surface-0: #111415;
  --surface-1: #15191a;
  --surface-2: #1a1f20;
  --surface-3: #222829;
  --surface-hover: #262d2d;
  --line-dim: rgba(231, 237, 232, 0.075);
  --line: rgba(231, 237, 232, 0.13);
  --line-strong: rgba(231, 237, 232, 0.22);
  --text: #f0f2ee;
  --text-soft: #b4bbb5;
  --text-dim: #7f8882;
  --text-faint: #5d6560;
  --accent: #4bde8f;
  --accent-bright: #79f2ad;
  --accent-soft: #75cfa1;
  --accent-deep: #16724a;
  --accent-wash: rgba(75, 222, 143, 0.12);
  --mint: #72d6b4;
  --mint-bright: #92ebcb;
  --mint-deep: #246f5a;
  --mint-wash: rgba(114, 214, 180, 0.11);
  --danger: #ff7f73;
  --danger-wash: rgba(255, 127, 115, 0.11);
  --blue: #77a7ff;
  --focus: #83efb3;
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.48), 0 2px 8px rgba(0, 0, 0, 0.42);
  --shadow-sm: 0 8px 26px rgba(0, 0, 0, 0.24);
  --topbar-height: 64px;
  --footer-height: 36px;
  --workspace-left-panel-width: 424px;
  --sidebar-width: var(--workspace-left-panel-width);
  --inspector-width: 408px;
  --topbar-surface: rgba(15, 18, 19, 0.96);
  --toolbar-surface: rgba(7, 10, 10, 0.58);
  --subpanel-surface: rgba(10, 13, 14, 0.76);
  --panel-tint: rgba(7, 9, 10, 0.23);
  --field-surface: rgba(8, 10, 11, 0.72);
  --input-surface: #0d1011;
  --option-surface: #101415;
  --modal-surface: rgba(18, 22, 22, 0.985);
  --modal-footer-surface: rgba(5, 7, 8, 0.2);
  --modal-backdrop: rgba(2, 4, 4, 0.78);
  --hud-surface: #0d1011;
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html[data-app-theme="light"] {
  color-scheme: light;
  --app-color-scheme: light;
  --bg-deep: #e6ebe7;
  --bg: #f1f4f1;
  --surface-0: #fafcf9;
  --surface-1: #f1f4f1;
  --surface-2: #e7ece8;
  --surface-3: #dbe2dc;
  --surface-hover: #e3e9e4;
  --line-dim: rgba(25, 42, 34, 0.075);
  --line: rgba(25, 42, 34, 0.14);
  --line-strong: rgba(25, 42, 34, 0.24);
  --text: #17201c;
  --text-soft: #3d4a44;
  --text-dim: #627068;
  --text-faint: #7e8b84;
  --accent: #147a4c;
  --accent-bright: #086a42;
  --accent-soft: #397d5c;
  --accent-deep: #075132;
  --accent-wash: rgba(20, 122, 76, 0.11);
  --mint: #14765c;
  --mint-bright: #086a51;
  --mint-deep: #0b5945;
  --mint-wash: rgba(20, 118, 92, 0.1);
  --danger: #b7352d;
  --danger-wash: rgba(183, 53, 45, 0.09);
  --blue: #3568bd;
  --focus: #086a42;
  --shadow-lg: 0 24px 70px rgba(38, 50, 43, 0.2), 0 2px 8px rgba(38, 50, 43, 0.14);
  --shadow-sm: 0 8px 26px rgba(38, 50, 43, 0.13);
  --topbar-surface: rgba(250, 252, 249, 0.97);
  --toolbar-surface: rgba(234, 239, 235, 0.86);
  --subpanel-surface: rgba(238, 242, 239, 0.92);
  --panel-tint: rgba(225, 231, 226, 0.46);
  --field-surface: rgba(255, 255, 255, 0.88);
  --input-surface: #ffffff;
  --option-surface: #ffffff;
  --modal-surface: rgba(251, 253, 250, 0.99);
  --modal-footer-surface: rgba(231, 236, 232, 0.55);
  --modal-backdrop: rgba(25, 32, 28, 0.42);
  --hud-surface: #f6f8f5;
}

html[data-app-theme="midnight"] {
  --bg-deep: #04070d;
  --bg: #070b14;
  --surface-0: #0c1320;
  --surface-1: #111a29;
  --surface-2: #182437;
  --surface-3: #22324a;
  --surface-hover: #293b57;
  --line-dim: rgba(183, 207, 240, 0.07);
  --line: rgba(183, 207, 240, 0.135);
  --line-strong: rgba(183, 207, 240, 0.235);
  --text: #f1f6ff;
  --text-soft: #c7d4e7;
  --text-dim: #91a3bd;
  --text-faint: #657792;
  --accent: #50d996;
  --accent-bright: #86efb9;
  --accent-deep: #187a51;
  --accent-wash: rgba(80, 217, 150, 0.13);
  --mint: #65d9c4;
  --mint-bright: #94ead9;
  --mint-deep: #277e70;
  --mint-wash: rgba(101, 217, 196, 0.11);
  --focus: #9bf4c6;
  --topbar-surface: rgba(6, 11, 20, 0.97);
  --toolbar-surface: rgba(4, 8, 15, 0.72);
  --subpanel-surface: rgba(7, 12, 22, 0.84);
  --panel-tint: rgba(4, 9, 17, 0.36);
  --field-surface: rgba(6, 12, 22, 0.8);
  --input-surface: #09111e;
  --option-surface: #09111e;
  --modal-surface: rgba(10, 17, 29, 0.99);
  --modal-footer-surface: rgba(5, 7, 19, 0.35);
  --hud-surface: #090b19;
}

html[data-app-theme="slate"] {
  --bg-deep: #071018;
  --bg: #0b131b;
  --surface-0: #101a23;
  --surface-1: #17212b;
  --surface-2: #1d2a35;
  --surface-3: #293946;
  --surface-hover: #304350;
  --line-dim: rgba(206, 229, 238, 0.075);
  --line: rgba(206, 229, 238, 0.14);
  --line-strong: rgba(206, 229, 238, 0.24);
  --text: #eff8fa;
  --text-soft: #bfd0d5;
  --text-dim: #8fa5ad;
  --text-faint: #687f88;
  --accent: #4bd58d;
  --accent-bright: #7aebab;
  --accent-deep: #19744c;
  --accent-wash: rgba(75, 213, 141, 0.12);
  --mint: #81d4a4;
  --mint-bright: #a5e7bf;
  --mint-deep: #34795a;
  --mint-wash: rgba(129, 212, 164, 0.1);
  --focus: #96f1bc;
  --topbar-surface: rgba(10, 17, 24, 0.97);
  --toolbar-surface: rgba(5, 12, 18, 0.68);
  --subpanel-surface: rgba(8, 15, 22, 0.8);
  --panel-tint: rgba(5, 12, 18, 0.34);
  --field-surface: rgba(7, 14, 20, 0.76);
  --input-surface: #0d1720;
  --option-surface: #0d1720;
  --modal-surface: rgba(15, 25, 34, 0.99);
  --modal-footer-surface: rgba(5, 12, 18, 0.32);
  --hud-surface: #0b131b;
}

html[data-app-theme="contrast"] {
  --bg-deep: #000;
  --bg: #050505;
  --surface-0: #0a0a0a;
  --surface-1: #121212;
  --surface-2: #1c1c1c;
  --surface-3: #292929;
  --surface-hover: #333;
  --line-dim: rgba(255, 255, 255, 0.13);
  --line: rgba(255, 255, 255, 0.25);
  --line-strong: rgba(255, 255, 255, 0.42);
  --text: #fff;
  --text-soft: #e6e6e6;
  --text-dim: #bdbdbd;
  --text-faint: #929292;
  --accent: #75ff9f;
  --accent-bright: #b0ffc8;
  --accent-deep: #168c44;
  --accent-wash: rgba(117, 255, 159, 0.15);
  --mint: #72efdd;
  --mint-bright: #a4fff1;
  --mint-deep: #238978;
  --mint-wash: rgba(114, 239, 221, 0.13);
  --focus: #c7ffd7;
  --topbar-surface: rgba(0, 0, 0, 0.98);
  --toolbar-surface: rgba(12, 12, 12, 0.94);
  --subpanel-surface: rgba(5, 5, 5, 0.94);
  --panel-tint: rgba(0, 0, 0, 0.5);
  --field-surface: rgba(0, 0, 0, 0.92);
  --input-surface: #080808;
  --option-surface: #080808;
  --modal-surface: rgba(8, 8, 8, 0.995);
  --modal-footer-surface: rgba(0, 0, 0, 0.6);
  --hud-surface: #000;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
  background: var(--bg-deep);
  font-family: var(--font-sans);
  font-size: 14px;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 320px;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--text);
}

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

select,
select option,
select optgroup,
input[type="search"],
input[type="text"],
input[type="number"],
textarea {
  color-scheme: var(--app-color-scheme);
}

select option,
select optgroup {
  background: var(--option-surface);
  color: var(--text);
}

select option:checked {
  background: #304038 linear-gradient(0deg, #304038, #304038);
  color: #fff;
}

input[type="search"]::-webkit-search-cancel-button {
  filter: invert(0.85);
  opacity: 0.7;
}

button,
label,
select,
input[type="range"],
input[type="checkbox"],
input[type="radio"] {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

button:not(:disabled),
select:not(:disabled),
input[type="range"]:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
label[for] {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

a {
  color: var(--accent-bright);
  text-underline-offset: 3px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

[hidden] {
  display: none !important;
}

::selection {
  background: rgba(75, 222, 143, 0.34);
  color: #fff;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  min-height: 34px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(204, 215, 207, 0.2);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(204, 215, 207, 0.34);
  background-clip: padding-box;
}

.svg-sprite {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #171008;
  font-weight: 750;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 150ms var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  position: fixed;
  inset: 0;
  display: grid;
  width: auto;
  /*
   * Anchor the shell to the initial containing block instead of relying on a
   * percentage-height chain through html/body. Native form-control changes
   * can trigger a transient intrinsic body-height pass in embedded browsers;
   * a 100%-high shell then collapsed to the settings rail's content height.
   * Fixed insets plus an explicit JS-synchronized viewport block size keep the
   * graph surface tied to the viewport throughout that pass and across panel,
   * title-background, dynamic-viewport, and browser-chrome changes.
   */
  height: var(--app-viewport-height, 100vh);
  height: var(--app-viewport-height, 100dvh);
  min-height: 0;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr) var(--footer-height);
  /* `hidden` still creates a programmatically scrollable box. A focused or
     scrollIntoView-ed setting deep in the control rail could therefore move
     the whole application grid and strand the graph canvas off-screen. The
     shell itself must never be a scroll container; only the dedicated panel
     bodies scroll. */
  overflow: clip;
  background: var(--bg);
}

.topbar {
  position: relative;
  z-index: 40;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 18px;
  height: var(--topbar-height);
  padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(75, 222, 143, 0.035), transparent 30%),
    var(--topbar-surface);
  box-shadow: 0 7px 25px rgba(0, 0, 0, 0.14);
}

.topbar .header-graph-toolbar {
  position: relative;
  top: auto;
  left: auto;
  min-width: 0;
  max-width: none;
  flex: 0 0 auto;
  border-color: var(--line-dim);
  background: var(--toolbar-surface);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  transform: none;
}

.brand-lockup {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  user-select: none;
}

.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(75, 222, 143, 0.34);
  border-radius: 14px;
  background:
    radial-gradient(circle at 35% 22%, rgba(121, 242, 173, 0.2), transparent 55%),
    var(--accent-wash);
  color: var(--accent-bright);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 0 22px rgba(75, 222, 143, 0.07);
}

.brand-mark svg {
  width: 33px;
  height: 33px;
  fill: var(--accent);
  stroke: currentColor;
  stroke-width: 1.2;
}

.brand-copy {
  display: flex;
  align-items: baseline;
  gap: 0;
  letter-spacing: 0;
}

.brand-copy strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 820;
  letter-spacing: -0.02em;
}

.brand-copy span {
  color: var(--mint-bright);
  font-size: 14.5px;
  font-weight: 720;
  letter-spacing: -0.01em;
}

.topbar-divider,
.toolbar-divider {
  width: 1px;
  align-self: stretch;
  background: var(--line);
}

.topbar-divider {
  align-self: center;
  height: 28px;
}

.project-identity {
  display: flex;
  min-width: 0;
  align-items: center;
}

.project-kicker,
.eyebrow {
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.project-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  margin-top: 0;
}

.project-new-button {
  min-height: 40px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.project-switcher {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}

.project-switcher select {
  max-width: min(38vw, 460px);
  min-width: 196px;
  height: 40px;
  appearance: none;
  padding: 0 38px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  outline: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--field-surface) 82%, white 4%), var(--field-surface));
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 2px 9px rgba(0, 0, 0, 0.12);
  text-overflow: ellipsis;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
  white-space: nowrap;
}

.project-switcher select,
.select-wrap select {
  color-scheme: var(--app-color-scheme);
}

.project-switcher select:hover,
.project-switcher select:focus-visible {
  border-color: rgba(114, 214, 180, 0.46);
  background: color-mix(in srgb, var(--field-surface) 88%, var(--mint) 5%);
  box-shadow: 0 0 0 3px rgba(114, 214, 180, 0.07), inset 0 1px rgba(255, 255, 255, 0.045);
}

.project-switcher select:disabled {
  cursor: progress;
  opacity: 0.65;
}

.project-switcher svg {
  position: absolute;
  top: 50%;
  right: 11px;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--mint-bright);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  pointer-events: none;
  transform: translateY(-50%);
}

.status-pill,
.micro-badge,
.capability-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-dim);
  white-space: nowrap;
}

.status-pill {
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0.035em;
  line-height: 1;
}

.status-pill[data-state="ready"] {
  border-color: rgba(114, 214, 180, 0.26);
  background: var(--mint-wash);
  color: var(--mint-bright);
}

.status-pill[data-state="error"] {
  border-color: rgba(255, 127, 115, 0.28);
  background: var(--danger-wash);
  color: var(--danger);
}

.status-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  align-self: center;
  border-radius: 50%;
  background: var(--text-faint);
  box-shadow: 0 0 0 3px rgba(127, 136, 130, 0.08);
}

[data-state="ready"] > .status-dot,
.status-dot--mint {
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(114, 214, 180, 0.1), 0 0 8px rgba(114, 214, 180, 0.3);
}

[data-state="loading"] > .status-dot,
[data-state="pending"] > .status-dot,
.status-dot--accent {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(75, 222, 143, 0.1), 0 0 8px rgba(75, 222, 143, 0.22);
}

[data-state="error"] > .status-dot {
  background: var(--danger);
}

.status-dot--danger {
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-wash), 0 0 8px color-mix(in srgb, var(--danger) 32%, transparent);
}

.status-pill--loading .status-dot {
  animation: status-pulse 1.8s ease-in-out infinite;
}

.topbar-spacer,
.hud-spacer {
  min-width: 0;
  flex: 1 1 auto;
}

.topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}

.button,
.icon-button,
.tool-button,
.text-button,
.hud-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-soft);
  font-weight: 650;
  line-height: 1;
  transition:
    color 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.button svg,
.icon-button svg,
.tool-button svg,
.hud-toggle svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
  transition: transform 140ms var(--ease), opacity 140ms ease;
}

.icon-button:active svg,
.tool-button:active svg {
  transform: scale(0.92);
}

.button {
  min-height: 36px;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid var(--line);
  font-size: 12px;
}

.button--quiet {
  background: rgba(255, 255, 255, 0.026);
}

.button--primary {
  border-color: #2e9d68;
  background: linear-gradient(180deg, #69e9a1, #32b875);
  color: #06160e;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.27), 0 4px 15px rgba(33, 160, 94, 0.14);
  text-shadow: 0 1px rgba(255, 255, 255, 0.12);
}

.button--compact {
  min-height: 30px;
  padding: 0 10px;
  font-size: 10px;
}

.button--danger {
  border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--line));
  background: var(--danger-wash);
  color: color-mix(in srgb, var(--danger) 72%, var(--text));
}

.snapshot-launch {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  color: var(--accent-bright);
}

.button--run {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  border-color: rgba(75, 222, 143, 0.3);
  background: var(--accent-wash);
  color: var(--accent-bright);
}

.button--run kbd {
  margin-left: auto;
}

.button--run[data-state="running"] {
  border-color: rgba(114, 214, 180, 0.35);
  background: var(--mint-wash);
  color: var(--mint-bright);
}

.icon-button {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.text-button {
  padding: 4px 2px;
  color: var(--accent-bright);
  font-size: 10px;
  font-weight: 720;
}

.tool-button {
  min-height: 32px;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid transparent;
  font-size: 11px;
}

.tool-button[aria-pressed="true"] {
  border-color: rgba(75, 222, 143, 0.22);
  background: var(--accent-wash);
  color: var(--accent-bright);
}

.mobile-only {
  display: none;
}

kbd {
  display: inline-flex;
  min-width: 19px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  border-bottom-color: rgba(231, 237, 232, 0.3);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 680;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.workspace {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: var(--sidebar-width) minmax(260px, 1fr) var(--active-inspector-width, var(--inspector-width));
  /* Prevent native focus/scrollIntoView from scrolling the entire graph row.
     `overflow: hidden` clips visually but remains script-scrollable. */
  overflow: clip;
}

.app-shell[data-inspector-open="false"] {
  --active-inspector-width: 0px;
}

.app-shell[data-inspector-open="false"] .node-inspector {
  visibility: hidden;
  pointer-events: none;
}

.control-sidebar,
.node-inspector {
  position: relative;
  z-index: 20;
  min-width: 0;
  min-height: 0;
  background: var(--surface-0);
}

.control-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
}

/* The control rail carries dense expert settings, but should remain readable
   without browser zoom. Keep these increases scoped away from the canvas HUD. */
.control-sidebar .panel-tab {
  font-size: 15px;
}

.control-sidebar .section-heading h2 {
  font-size: 20px;
  line-height: 1.2;
}

.control-sidebar .style-section-tab,
.control-sidebar .preset-fieldset > legend,
.control-sidebar .control-group > legend,
.control-sidebar .field-label,
.control-sidebar .control-label-row label,
.control-sidebar .switch-row strong {
  font-size: 14px;
}

.control-sidebar .select-control > span:first-child,
.control-sidebar .color-control > span:first-child {
  font-size: 13px;
}

.control-sidebar .select-wrap select,
.control-sidebar .segmented-control label span {
  font-size: 14px;
}

.control-sidebar .switch-row small,
.control-sidebar .control-help,
.control-sidebar .segmented-control label small {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
}

.control-sidebar .control-label-row output,
.control-sidebar .color-control em {
  font-size: 13px;
}

.control-sidebar .eyebrow {
  font-size: 12px;
}

.control-sidebar .select-wrap select {
  height: 40px;
}

.control-sidebar .switch-row {
  min-height: 50px;
}

.control-sidebar .text-button,
.control-sidebar .micro-badge,
.control-sidebar .canvas-theme-grid label,
.control-sidebar .palette-grid label {
  font-size: 13px;
}

.control-sidebar .choice-grid label strong,
.control-sidebar .worker-card__copy strong,
.control-sidebar .data-source-card strong {
  font-size: 13px;
}

.control-sidebar .choice-grid label small,
.control-sidebar .worker-card__copy > span,
.control-sidebar .worker-card__status,
.control-sidebar .compact-number > span,
.control-sidebar .data-source-card span:not(.data-source-card__mark) {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.45;
}

.control-sidebar .compact-number input {
  font-size: 13px;
}

.control-sidebar .dataset-stats dt {
  color: var(--text-dim);
  font-size: 13px;
}

.control-sidebar .dataset-stats dd {
  font-size: 14px;
}

.control-sidebar .data-fields dl > div {
  min-height: 40px;
  padding-block: 9px;
}

.control-sidebar .data-fields dt,
.control-sidebar .data-fields dd {
  font-size: 13px;
  line-height: 1.45;
}

.control-sidebar .notice {
  gap: 10px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.control-sidebar .notice svg {
  width: 16px;
  height: 16px;
}

.layout-transport {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 14px 16px 12px;
}

.panel-tabs {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.panel-tab {
  position: relative;
  min-height: 42px;
  padding: 0 8px;
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 690;
}

.panel-tab::after {
  position: absolute;
  right: 8px;
  bottom: -1px;
  left: 8px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  content: "";
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 160ms ease, transform 160ms var(--ease);
}

.panel-tab.is-active,
.panel-tab[aria-selected="true"] {
  color: var(--text);
}

.panel-tab.is-active::after,
.panel-tab[aria-selected="true"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.control-panels {
  width: 100%;
  min-height: 180px;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.control-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 19px 16px 24px;
}

.style-section-tabs {
  position: sticky;
  z-index: 5;
  top: -19px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 12px -16px 0;
  padding: 9px 16px;
  border-block: 1px solid var(--line-dim);
  background: color-mix(in srgb, var(--surface-0) 96%, transparent);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(14px) saturate(1.15);
}

.style-section-tab {
  position: relative;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 680;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.style-section-tab.is-active,
.style-section-tab[aria-selected="true"] {
  border-color: rgba(75, 222, 143, 0.25);
  background: var(--accent-wash);
  color: var(--accent-bright);
}

.style-section-tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.style-section-panel {
  min-width: 0;
}

.section-heading,
.legend-heading-row,
.inspector-heading-row,
.inspector-section__heading,
.modal-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.section-heading {
  margin-bottom: 15px;
  padding: 0 2px;
}

.section-heading h2,
.legend-heading-row h2,
.inspector-heading-row h2 {
  margin-top: 4px;
  color: var(--text);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.012em;
}

.section-heading h2 {
  font-size: 14px;
}

.micro-badge {
  min-height: 20px;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 670;
}

.micro-badge[data-state="running"],
.micro-badge[data-state="ready"] {
  border-color: rgba(114, 214, 180, 0.25);
  background: var(--mint-wash);
  color: var(--mint-bright);
}

.micro-badge[data-state="error"] {
  border-color: rgba(255, 127, 115, 0.28);
  background: var(--danger-wash);
  color: var(--danger);
}

.preset-fieldset > legend,
.control-group > legend,
.field-label {
  margin-bottom: 9px;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.segmented-control {
  display: grid;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}

.segmented-control--three {
  grid-template-columns: repeat(3, 1fr);
}

.segmented-control--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.segmented-control input,
.choice-grid input,
.palette-grid input,
.canvas-theme-grid input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.segmented-control label {
  display: flex;
  min-width: 0;
  min-height: 45px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-dim);
  transition: 140ms ease;
}

.segmented-control label span {
  font-size: 10px;
  font-weight: 720;
}

.segmented-control label small {
  color: var(--text-faint);
  font-size: 8px;
  letter-spacing: 0.035em;
}

.segmented-control input:checked + label {
  border-color: rgba(75, 222, 143, 0.28);
  background: linear-gradient(180deg, rgba(75, 222, 143, 0.14), rgba(75, 222, 143, 0.07));
  color: var(--accent-bright);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.segmented-control input:checked + label small {
  color: var(--accent-soft);
}

.segmented-control input:focus-visible + label,
.choice-grid input:focus-visible + label,
.palette-grid input:focus-visible + label,
.canvas-theme-grid input:focus-visible + label {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Layout quality is an ordered workflow, not three unrelated modes. The
   numbered badges make the Explore → Refine → Polish progression visible
   while the radio inputs retain native single-selection semantics. */
.layout-preset-steps {
  position: relative;
  gap: 5px;
  padding: 5px;
}

.layout-preset-steps label {
  position: relative;
  display: grid;
  min-height: 58px;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: 7px;
  padding: 7px;
  text-align: left;
}

.layout-preset-steps label > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.layout-preset-steps label strong {
  overflow: hidden;
  color: currentColor;
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
}

.layout-preset-steps label small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layout-preset-step {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  color: var(--text-faint);
  font: 720 11px var(--font-mono);
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.layout-preset-steps input:checked + label .layout-preset-step {
  border-color: color-mix(in srgb, var(--accent) 74%, white 4%);
  background: var(--accent);
  color: #06160e;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 18%, transparent);
}

.worker-card {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(114, 214, 180, 0.16);
  border-radius: var(--radius-sm);
  background: linear-gradient(115deg, rgba(114, 214, 180, 0.075), rgba(114, 214, 180, 0.018));
}

.worker-card__icon {
  display: grid;
  width: 29px;
  height: 29px;
  grid-template-columns: repeat(2, 5px);
  place-content: center;
  gap: 3px;
  border: 1px solid rgba(114, 214, 180, 0.22);
  border-radius: 7px;
  background: rgba(114, 214, 180, 0.065);
}

.worker-card__icon span {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--mint);
  opacity: 0.75;
}

.worker-card__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.worker-card__copy strong {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
}

.worker-card__copy > span {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-number {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.compact-number > span {
  color: var(--text-dim);
  font-size: 8px;
}

.compact-number input {
  width: 49px;
  height: 26px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 5px;
  outline: 0;
  background: rgba(0, 0, 0, 0.22);
  color: var(--mint-bright);
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: center;
}

.worker-card__status {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid rgba(114, 214, 180, 0.11);
  color: var(--text-dim);
  font-size: 9px;
}

.worker-card__status strong {
  color: var(--text-soft);
  font-family: var(--font-mono);
}

.control-group {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-dim);
}

.visual-preset-group {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(75, 222, 143, 0.14);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(75, 222, 143, 0.055), rgba(114, 214, 180, 0.018));
}

.visual-preset-group > legend {
  padding: 0 5px;
}

.control-help {
  margin: 8px 0 0;
  color: var(--text-faint);
  font-size: 8px;
  line-height: 1.45;
}

.control-help[role="status"] {
  min-height: 2.9em;
}

.control-help--warning {
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent-soft);
}

.force-approximation-switch {
  margin-top: 12px;
  border-block: 1px solid var(--line-dim);
}

.visual-control {
  margin-top: 13px;
}

.visual-control-grid,
.visual-slider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  margin-top: 13px;
}

.visual-slider-grid {
  align-items: start;
}

.visual-slider-grid .range-control + .range-control,
.visual-control-grid .range-control + .range-control {
  margin-top: 0;
}

.visual-slider-grid__wide,
.visual-control-grid__wide {
  grid-column: 1 / -1;
}

.node-finish-controls > .switch-row {
  margin: 0;
  padding-inline: 0;
}

.node-hub-controls {
  display: grid;
  gap: 3px;
  margin-top: 13px;
  padding: 11px;
  border: 1px solid var(--line-dim);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--accent-wash) 78%, transparent), transparent 48%),
    rgba(0, 0, 0, 0.12);
}

.node-hub-controls .visual-control { margin-top: 10px; }
.node-hub-controls .control-help { margin-top: 7px; }

.title-switches {
  margin-top: 8px;
  border-block: 1px solid var(--line-dim);
}

.node-title-controls .control-help {
  max-width: 34em;
}

.graph-analysis-controls {
  position: relative;
}

.analysis-heat-legend {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 650;
}

.analysis-heat-legend[hidden] {
  display: none;
}

.analysis-heat-legend i {
  height: 7px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: linear-gradient(90deg, #1f3788, #00b7d6 28%, #4bde8f 52%, #ffd54f 76%, #ff3e66);
  box-shadow: 0 0 13px rgba(0, 183, 214, 0.16);
}

.analysis-subsection {
  margin-top: 14px;
  padding: 10px 11px 11px;
  border: 1px solid rgba(122, 151, 170, 0.13);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(21, 34, 41, 0.62), rgba(8, 14, 18, 0.3));
}

.analysis-subsection > .switch-row {
  margin: -3px 0 0;
  padding-inline: 0;
}

.analysis-dependent-controls {
  transition: opacity 150ms ease;
}

.analysis-dependent-controls[data-disabled="true"] {
  opacity: 0.4;
}

.range-control[data-disabled="true"],
.color-control[data-disabled="true"] {
  opacity: 0.42;
}

.color-control {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.color-control > span:first-child {
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 620;
}

.color-control > span:last-child {
  display: flex;
  height: 34px;
  align-items: center;
  gap: 7px;
  padding: 4px 7px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-surface);
}

.color-control input[type="color"] {
  width: 31px;
  height: 24px;
  flex: 0 0 auto;
  padding: 1px;
  border: 0;
  border-radius: 5px;
  outline: none;
  background: transparent;
  cursor: pointer;
}

.color-control input[type="color"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.color-control em {
  min-width: 0;
  overflow: hidden;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.range-control + .range-control {
  margin-top: 15px;
}

.control-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.control-label-row label {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 610;
}

.control-label-row output {
  min-width: 38px;
  color: var(--accent-bright);
  font-family: var(--font-mono);
  font-size: 9px;
  text-align: right;
}

input[type="range"] {
  width: 100%;
  height: 14px;
  margin: 0;
  appearance: none;
  background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(75, 222, 143, 0.78), rgba(75, 222, 143, 0.22));
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--surface-3);
}

input[type="range"]::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}

input[type="range"]::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -5px;
  appearance: none;
  border: 2px solid #101314;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 1px rgba(75, 222, 143, 0.3), 0 2px 7px rgba(0, 0, 0, 0.5);
}

input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid #101314;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 1px rgba(75, 222, 143, 0.3), 0 2px 7px rgba(0, 0, 0, 0.5);
}

.range-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 0;
  color: var(--text-faint);
  font-size: 8px;
}

.range-caption--three > span:nth-child(2) {
  flex: 1 1 auto;
  text-align: center;
}

.toggle-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toggle-list > legend {
  margin-bottom: 3px;
}

.switch-row {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  margin: 0 -5px;
  padding: 6px 5px;
  border-radius: 7px;
}

.switch-row > span:first-child {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
}

.switch-row strong {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 620;
}

.switch-row small {
  color: var(--text-faint);
  font-size: 8px;
  line-height: 1.25;
}

.switch-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch {
  position: relative;
  width: 30px;
  height: 17px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--input-surface);
  transition: 150ms ease;
}

.switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-dim);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  content: "";
  transition: 180ms var(--ease);
}

.switch-row input:checked + .switch {
  border-color: rgba(75, 222, 143, 0.5);
  background: rgba(75, 222, 143, 0.22);
}

.switch-row input:checked + .switch::after {
  background: var(--accent-bright);
  transform: translateX(13px);
}

.switch-row input:focus-visible + .switch {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.choice-grid label {
  display: flex;
  min-width: 0;
  min-height: 74px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.017);
  color: var(--text-dim);
  transition: 140ms ease;
}

.choice-grid label strong {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 650;
}

.choice-grid label small {
  color: var(--text-faint);
  font-size: 8px;
}

.choice-grid input:checked + label {
  border-color: rgba(75, 222, 143, 0.35);
  background: var(--accent-wash);
}

.choice-grid input:checked + label strong {
  color: var(--accent-bright);
}

.link-sample {
  position: relative;
  display: block;
  width: 100%;
  height: 20px;
  margin-bottom: 5px;
}

.link-sample::before,
.link-sample::after {
  position: absolute;
  z-index: 1;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
  box-shadow: 0 0 0 2px rgba(75, 222, 143, 0.12);
}

.link-sample::before {
  left: 4px;
}

.link-sample::after {
  right: 4px;
  background: var(--mint);
}

.link-sample--straight {
  background: linear-gradient(10deg, transparent 47%, rgba(190, 203, 195, 0.45) 48%, rgba(190, 203, 195, 0.45) 51%, transparent 52%);
}

.link-sample--curved {
  overflow: hidden;
}

.link-sample--curved::marker {
  display: none;
}

.link-sample--curved {
  border-top: 1px solid transparent;
  border-radius: 50% 50% 0 0;
  box-shadow: inset 0 7px 0 -6px rgba(190, 203, 195, 0.45);
}

.select-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.select-control > span:first-child,
.paired-inputs label > span:first-child,
.mapping-grid label > span:first-child {
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 620;
}

.select-wrap {
  position: relative;
  display: block;
}

.select-wrap select {
  width: 100%;
  height: 34px;
  appearance: none;
  padding: 0 31px 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: none;
  background: linear-gradient(180deg, #151a1b, #0e1213);
  color: var(--text-soft);
  font-size: 10px;
}

.select-wrap select:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, #1a2021, #111516);
  color: var(--text);
}

.select-wrap select:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow: 0 0 0 3px rgba(75, 222, 143, 0.1);
}

.select-wrap svg {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--text-dim);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  pointer-events: none;
  transform: translateY(-50%);
}

.field-label {
  margin-top: 14px;
}

.canvas-theme-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.canvas-theme-grid label {
  display: flex;
  min-width: 0;
  min-height: 54px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 8px;
  font-weight: 680;
  transition: 140ms ease;
}

.canvas-theme-grid input:checked + label {
  border-color: rgba(75, 222, 143, 0.42);
  background: var(--accent-wash);
  color: var(--text-soft);
  box-shadow: inset 0 0 0 1px rgba(75, 222, 143, 0.07);
}

.canvas-theme-preview {
  display: block;
  width: 32px;
  height: 20px;
  border: 1px solid rgba(225, 233, 229, 0.2);
  border-radius: 5px;
  background-color: var(--theme-preview, #080b0c);
  background-image:
    linear-gradient(rgba(190, 204, 199, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 204, 199, 0.11) 1px, transparent 1px);
  background-size: 7px 7px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.28);
}

.canvas-theme-preview--dark { --theme-preview: #080b0c; }
.canvas-theme-preview--midnight { --theme-preview: #070b16; }
.canvas-theme-preview--paper {
  --theme-preview: #f4f1e8;
  border-color: rgba(35, 43, 43, 0.26);
  background-image:
    linear-gradient(rgba(48, 57, 57, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 57, 57, 0.12) 1px, transparent 1px);
  box-shadow: inset 0 0 8px rgba(89, 76, 52, 0.08);
}

.canvas-theme-preview--custom {
  --theme-preview: #080b0c;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.14) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.14) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.14) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.14) 75%);
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-size: 8px 8px;
}

.canvas-appearance-group .color-control {
  margin-top: 11px;
}

.toggle-list--nested {
  margin-top: 10px;
  border-top: 1px solid var(--line-dim);
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.palette-grid label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text-dim);
  font-size: 9px;
  transition: 140ms ease;
}

.palette-grid input:checked + label {
  border-color: rgba(75, 222, 143, 0.36);
  background: var(--accent-wash);
  color: var(--text-soft);
}

.palette-swatches {
  display: flex;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(225, 233, 229, 0.13);
}

.palette-swatches i {
  flex: 1;
}

.palette-swatches--okabe-ito i:nth-child(1) { background: #e69f00; }
.palette-swatches--okabe-ito i:nth-child(2) { background: #56b4e9; }
.palette-swatches--okabe-ito i:nth-child(3) { background: #009e73; }
.palette-swatches--okabe-ito i:nth-child(4) { background: #f0e442; }
.palette-swatches--okabe-ito i:nth-child(5) { background: #cc79a7; }
.palette-swatches--tol-muted i:nth-child(1) { background: #332288; }
.palette-swatches--tol-muted i:nth-child(2) { background: #88ccee; }
.palette-swatches--tol-muted i:nth-child(3) { background: #44aa99; }
.palette-swatches--tol-muted i:nth-child(4) { background: #ddcc77; }
.palette-swatches--tol-muted i:nth-child(5) { background: #cc6677; }
.palette-swatches--tol-bright i:nth-child(1) { background: #4477aa; }
.palette-swatches--tol-bright i:nth-child(2) { background: #ee6677; }
.palette-swatches--tol-bright i:nth-child(3) { background: #228833; }
.palette-swatches--tol-bright i:nth-child(4) { background: #ccbb44; }
.palette-swatches--tol-bright i:nth-child(5) { background: #66ccee; }
.palette-swatches--ibm-colorblind i:nth-child(1) { background: #648fff; }
.palette-swatches--ibm-colorblind i:nth-child(2) { background: #785ef0; }
.palette-swatches--ibm-colorblind i:nth-child(3) { background: #dc267f; }
.palette-swatches--ibm-colorblind i:nth-child(4) { background: #fe6100; }
.palette-swatches--ibm-colorblind i:nth-child(5) { background: #ffb000; }
.palette-swatches--viridis i:nth-child(1) { background: #440154; }
.palette-swatches--viridis i:nth-child(2) { background: #3b528b; }
.palette-swatches--viridis i:nth-child(3) { background: #21918c; }
.palette-swatches--viridis i:nth-child(4) { background: #5ec962; }
.palette-swatches--viridis i:nth-child(5) { background: #fde725; }
.palette-swatches--cividis i:nth-child(1) { background: #00224e; }
.palette-swatches--cividis i:nth-child(2) { background: #3b496c; }
.palette-swatches--cividis i:nth-child(3) { background: #707173; }
.palette-swatches--cividis i:nth-child(4) { background: #a59c74; }
.palette-swatches--cividis i:nth-child(5) { background: #fde737; }
.palette-swatches--tableau i:nth-child(1) { background: #4e79a7; }
.palette-swatches--tableau i:nth-child(2) { background: #f28e2b; }
.palette-swatches--tableau i:nth-child(3) { background: #e15759; }
.palette-swatches--tableau i:nth-child(4) { background: #76b7b2; }
.palette-swatches--tableau i:nth-child(5) { background: #59a14f; }
.palette-swatches--paired i:nth-child(1) { background: #1f78b4; }
.palette-swatches--paired i:nth-child(2) { background: #33a02c; }
.palette-swatches--paired i:nth-child(3) { background: #e31a1c; }
.palette-swatches--paired i:nth-child(4) { background: #ff7f00; }
.palette-swatches--paired i:nth-child(5) { background: #6a3d9a; }
.palette-swatches--neon i:nth-child(1) { background: #00e5ff; }
.palette-swatches--neon i:nth-child(2) { background: #ffb000; }
.palette-swatches--neon i:nth-child(3) { background: #ff4d8d; }
.palette-swatches--neon i:nth-child(4) { background: #7cff6b; }
.palette-swatches--neon i:nth-child(5) { background: #b388ff; }
.palette-swatches--pastel i:nth-child(1) { background: #8dd3c7; }
.palette-swatches--pastel i:nth-child(2) { background: #fdb462; }
.palette-swatches--pastel i:nth-child(3) { background: #80b1d3; }
.palette-swatches--pastel i:nth-child(4) { background: #fb8072; }
.palette-swatches--pastel i:nth-child(5) { background: #bebada; }
.palette-swatches--spectral i:nth-child(1) { background: #3288bd; }
.palette-swatches--spectral i:nth-child(2) { background: #66c2a5; }
.palette-swatches--spectral i:nth-child(3) { background: #fee08b; }
.palette-swatches--spectral i:nth-child(4) { background: #f46d43; }
.palette-swatches--spectral i:nth-child(5) { background: #9e0142; }
.palette-swatches--earth i:nth-child(1) { background: #5b8e7d; }
.palette-swatches--earth i:nth-child(2) { background: #bc4b51; }
.palette-swatches--earth i:nth-child(3) { background: #d4a373; }
.palette-swatches--earth i:nth-child(4) { background: #6d597a; }
.palette-swatches--earth i:nth-child(5) { background: #e9c46a; }
.palette-swatches--midnight i:nth-child(1) { background: #173f5f; }
.palette-swatches--midnight i:nth-child(2) { background: #3d2462; }
.palette-swatches--midnight i:nth-child(3) { background: #164b45; }
.palette-swatches--midnight i:nth-child(4) { background: #6b2737; }
.palette-swatches--midnight i:nth-child(5) { background: #614a12; }
.palette-swatches--deep-ocean i:nth-child(1) { background: #003049; }
.palette-swatches--deep-ocean i:nth-child(2) { background: #075985; }
.palette-swatches--deep-ocean i:nth-child(3) { background: #155e75; }
.palette-swatches--deep-ocean i:nth-child(4) { background: #115e59; }
.palette-swatches--deep-ocean i:nth-child(5) { background: #1e3a5f; }
.palette-swatches--forest-night i:nth-child(1) { background: #143d2b; }
.palette-swatches--forest-night i:nth-child(2) { background: #24533d; }
.palette-swatches--forest-night i:nth-child(3) { background: #355834; }
.palette-swatches--forest-night i:nth-child(4) { background: #1f4b4a; }
.palette-swatches--forest-night i:nth-child(5) { background: #3f5131; }
.palette-swatches--plum-noir i:nth-child(1) { background: #401f3e; }
.palette-swatches--plum-noir i:nth-child(2) { background: #55233e; }
.palette-swatches--plum-noir i:nth-child(3) { background: #3c2452; }
.palette-swatches--plum-noir i:nth-child(4) { background: #592941; }
.palette-swatches--plum-noir i:nth-child(5) { background: #48284a; }
.palette-swatches--folk-art i:nth-child(1) { background: #d9044d; }
.palette-swatches--folk-art i:nth-child(2) { background: #f29f05; }
.palette-swatches--folk-art i:nth-child(3) { background: #0096b7; }
.palette-swatches--folk-art i:nth-child(4) { background: #6b45a7; }
.palette-swatches--folk-art i:nth-child(5) { background: #16a085; }
.palette-swatches--cyberpunk i:nth-child(1) { background: #00f5d4; }
.palette-swatches--cyberpunk i:nth-child(2) { background: #f72585; }
.palette-swatches--cyberpunk i:nth-child(3) { background: #7b2cff; }
.palette-swatches--cyberpunk i:nth-child(4) { background: #00bbf9; }
.palette-swatches--cyberpunk i:nth-child(5) { background: #fee440; }
.palette-swatches--nord i:nth-child(1) { background: #5e81ac; }
.palette-swatches--nord i:nth-child(2) { background: #a3be8c; }
.palette-swatches--nord i:nth-child(3) { background: #d08770; }
.palette-swatches--nord i:nth-child(4) { background: #b48ead; }
.palette-swatches--nord i:nth-child(5) { background: #88c0d0; }
.palette-swatches--solarized i:nth-child(1) { background: #268bd2; }
.palette-swatches--solarized i:nth-child(2) { background: #2aa198; }
.palette-swatches--solarized i:nth-child(3) { background: #859900; }
.palette-swatches--solarized i:nth-child(4) { background: #b58900; }
.palette-swatches--solarized i:nth-child(5) { background: #d33682; }
.palette-swatches--ice-fire i:nth-child(1) { background: #003f5c; }
.palette-swatches--ice-fire i:nth-child(2) { background: #665191; }
.palette-swatches--ice-fire i:nth-child(3) { background: #d45087; }
.palette-swatches--ice-fire i:nth-child(4) { background: #ff7c43; }
.palette-swatches--ice-fire i:nth-child(5) { background: #ffa600; }
.palette-swatches--candy-dark i:nth-child(1) { background: #ff70a6; }
.palette-swatches--candy-dark i:nth-child(2) { background: #70d6ff; }
.palette-swatches--candy-dark i:nth-child(3) { background: #ff9770; }
.palette-swatches--candy-dark i:nth-child(4) { background: #e9ff70; }
.palette-swatches--candy-dark i:nth-child(5) { background: #b892ff; }

.paired-inputs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 13px 0;
}

.paired-inputs label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.unit-input {
  position: relative;
  display: flex;
}

.unit-input input {
  width: 100%;
  height: 34px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: none;
  background: var(--input-surface);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 10px;
}

.unit-input em {
  position: absolute;
  top: 50%;
  right: 9px;
  color: var(--text-faint);
  font-size: 8px;
  font-style: normal;
  transform: translateY(-50%);
}

.spline-editor {
  margin-top: 12px;
  padding: 9px;
  border: 1px solid var(--line-dim);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.14);
}

.spline-preview {
  position: relative;
  height: 83px;
  margin: 0 0 10px;
  padding: 3px 4px 11px 14px;
}

.spline-preview svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.spline-grid {
  fill: none;
  stroke: rgba(231, 237, 232, 0.075);
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}

.spline-path {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(75, 222, 143, 0.22));
}

.spline-preview span,
.spline-preview em {
  position: absolute;
  color: var(--text-faint);
  font-size: 7px;
  font-style: normal;
}

.spline-preview span {
  right: 3px;
  bottom: 0;
}

.spline-preview em {
  top: 0;
  left: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.range-control--compact + .range-control--compact {
  margin-top: 10px;
}

.range-control--compact .control-label-row {
  margin-bottom: 4px;
}

.dataset-stats,
.node-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--line);
}

.dataset-stats > div,
.node-metrics > div {
  min-width: 0;
  padding: 10px;
  background: var(--surface-1);
}

.dataset-stats dt,
.node-metrics dt {
  color: var(--text-faint);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dataset-stats dd,
.node-metrics dd {
  overflow: hidden;
  margin: 5px 0 0;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-source-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding: 10px;
  border: 1px solid var(--line-dim);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.018);
}

.data-source-card__mark {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: var(--accent-wash);
  color: var(--accent-bright);
}

.data-source-card__mark svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.data-source-card > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.data-source-card strong {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 650;
}

.data-source-card span:not(.data-source-card__mark) {
  overflow: hidden;
  color: var(--text-faint);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-fields dl {
  margin: 0;
}

.data-fields dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 1px;
  border-bottom: 1px solid var(--line-dim);
}

.data-fields dl > div:last-child {
  border-bottom: 0;
}

.data-fields dt {
  color: var(--text-dim);
  font-size: 9px;
}

.data-fields dd {
  overflow: hidden;
  max-width: 60%;
  margin: 0;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 9px;
  line-height: 1.45;
}

.notice svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.notice--success {
  border-color: rgba(114, 214, 180, 0.22);
  background: var(--mint-wash);
  color: var(--mint-bright);
}

.notice--error {
  border-color: rgba(255, 127, 115, 0.25);
  background: var(--danger-wash);
  color: var(--danger);
}

.legend-panel {
  flex: 0 0 auto;
  min-height: 140px;
  max-height: 232px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--panel-tint);
}

.legend-heading-row {
  align-items: center;
  margin: 0 2px 9px;
}

.search-field {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field-surface);
  color: var(--text-dim);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.018);
  transition: 140ms ease;
}

.search-field:focus-within {
  border-color: rgba(75, 222, 143, 0.52);
  box-shadow: 0 0 0 2px rgba(75, 222, 143, 0.08);
}

.search-field svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

/* Custom comboboxes ------------------------------------------------------ */

select.custom-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.has-custom-select > svg:not(.custom-select__indicator) {
  display: none;
}

.custom-select {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.custom-select__trigger {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 0 9px 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--field-surface) 91%, white 3%), var(--field-surface));
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 2px 8px rgba(0, 0, 0, 0.09);
  transition: border-color 130ms ease, background 130ms ease, box-shadow 130ms ease, color 130ms ease;
}

.custom-select__trigger:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--field-surface) 91%, var(--mint) 5%);
  color: var(--text);
}

.custom-select__trigger:focus-visible,
.custom-select[data-open="true"] .custom-select__trigger {
  border-color: color-mix(in srgb, var(--mint) 62%, var(--line-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint-wash) 78%, transparent), inset 0 1px rgba(255, 255, 255, 0.045);
}

.custom-select__trigger:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.custom-select__value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select[data-placeholder="true"] .custom-select__value {
  color: var(--text-dim);
}

.custom-select__indicator {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--mint-bright);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  transition: transform 150ms var(--ease);
}

.custom-select[data-open="true"] .custom-select__indicator {
  transform: rotate(180deg);
}

.custom-select-menu {
  position: fixed;
  z-index: 2147483600;
  inset: auto;
  max-width: calc(100vw - 16px);
  margin: 0;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 86%, var(--mint) 14%);
  border-radius: 11px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--modal-surface) 95%, white 2%), var(--modal-surface));
  color: var(--text);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.48), 0 3px 12px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.055);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
  transform-origin: top center;
}

.custom-select-menu[data-placement="above"] {
  transform-origin: bottom center;
}

.custom-select-menu:popover-open {
  animation: custom-select-enter 120ms var(--ease);
}

@keyframes custom-select-enter {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.custom-select-group {
  padding: 9px 10px 5px;
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.custom-select-group:not(:first-child) {
  margin-top: 5px;
  border-top: 1px solid var(--line-dim);
}

.custom-select-option {
  display: grid;
  min-height: 34px;
  align-items: center;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 6px;
  padding: 6px 9px 6px 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 590;
  line-height: 1.25;
  user-select: none;
}

.custom-select-option + .custom-select-option { margin-top: 2px; }

.custom-select-option[data-active="true"] {
  border-color: color-mix(in srgb, var(--mint) 24%, transparent);
  background: color-mix(in srgb, var(--mint-wash) 82%, var(--surface-2));
  color: var(--text);
}

.custom-select-option[aria-selected="true"] {
  color: var(--mint-bright);
}

.custom-select-option[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.38;
}

.custom-select-option__check {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 6px;
  color: var(--mint-bright);
  font-size: 12px;
  font-weight: 850;
}

.custom-select-option[aria-selected="true"] .custom-select-option__check {
  background: var(--mint-wash);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint) 28%, transparent);
}

.project-switcher .custom-select {
  max-width: min(38vw, 460px);
  min-width: 196px;
}

.project-switcher .custom-select__trigger {
  height: 40px;
  padding: 0 10px 0 12px;
  border-color: var(--line-strong);
  border-radius: 9px;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.control-sidebar .custom-select__trigger {
  height: 40px;
  font-size: 14px;
}

.node-inspector .custom-select__trigger {
  height: 36px;
  font-size: 11px;
}

.chrono-field .custom-select__trigger {
  height: 38px;
  min-height: 36px;
  border-color: var(--line-strong);
  background: var(--field-surface);
  color: var(--text);
  font: 600 12px/1.3 var(--font-sans);
}

#import-modal .mapping-grid .custom-select__trigger { font-size: 12px; }

.search-field input {
  min-width: 0;
  height: 100%;
  flex: 1 1 auto;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-soft);
  font-size: 10px;
}

.search-field input::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

.search-field input::-webkit-search-cancel-button {
  filter: invert(0.7);
}

.search-field--compact {
  height: 31px;
}

.virtual-list {
  position: relative;
  height: 120px;
  margin-top: 7px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 6px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.virtual-list__spacer {
  width: 1px;
  height: 0;
  pointer-events: none;
}

.virtual-list__items {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  will-change: transform;
}

.legend-item {
  display: flex;
  width: 100%;
  height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 2px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-soft);
  font-size: 11px;
}

.legend-item__toggle {
  display: flex;
  min-width: 0;
  height: 40px;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  padding: 0 5px;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.legend-item__switch {
  position: relative;
  width: 30px;
  height: 17px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--mint) 48%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--mint) 24%, var(--surface-2));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.24);
  transition: border-color 140ms ease, background-color 140ms ease, opacity 140ms ease;
}

.legend-item__switch::after {
  position: absolute;
  top: 2px;
  left: 15px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--mint-bright);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), 0 0 7px color-mix(in srgb, var(--mint) 34%, transparent);
  content: "";
  transition: left 150ms var(--ease), background-color 140ms ease, box-shadow 140ms ease;
}

.legend-item__color {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-1);
}

.legend-item__color::-webkit-color-swatch-wrapper { padding: 0; }
.legend-item__color::-webkit-color-swatch { border: 0; border-radius: 3px; }
.legend-item__color::-moz-color-swatch { border: 0; border-radius: 3px; }

.legend-item__color-reset {
  width: 20px;
  height: 24px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
}

.legend-item__swatch {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--category-color, var(--accent));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.045);
}

.legend-item__swatch[data-shape="square"] { border-radius: 1px; }
.legend-item__swatch[data-shape="diamond"] { border-radius: 1px; transform: rotate(45deg) scale(0.86); }
.legend-item__swatch[data-shape="hexagon"] { border-radius: 0; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }

.legend-item__label {
  overflow: hidden;
  min-width: 0;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legend-item__count {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
}

.legend-item[data-visible="false"] .legend-item__toggle {
  color: var(--text-faint);
  opacity: 0.58;
}

.legend-item[data-visible="false"] .legend-item__switch {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.legend-item[data-visible="false"] .legend-item__switch::after {
  left: 2px;
  background: var(--text-faint);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.legend-item[data-visible="false"] .legend-item__swatch {
  background: transparent;
  border: 1px solid var(--text-faint);
}

.legend-behavior-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin: 9px 0 5px;
}

.category-shape-editor {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 7%, transparent), transparent 52%),
    var(--panel-tint);
}

.category-shape-editor > .field-label { margin-bottom: 9px; }
.category-shape-editor .control-help { margin-top: 9px; }

.virtual-list__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.graph-stage {
  --graph-background-color: #080b0c;
  --graph-grid-major: rgba(198, 209, 201, 0.026);
  --graph-grid-minor: rgba(198, 209, 201, 0.012);
  --graph-grid-major-size: 80px;
  --graph-grid-minor-size: 20px;
  --graph-grid-major-x: 0px;
  --graph-grid-major-y: 0px;
  --graph-grid-minor-x: 0px;
  --graph-grid-minor-y: 0px;
  --graph-vignette-opacity: 0.42;
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--graph-background-color);
}

.view-only-hint {
  position: absolute;
  z-index: 30;
  top: 14px;
  right: 14px;
  display: none;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(231, 237, 232, 0.16);
  border-radius: 8px;
  background: rgba(5, 8, 9, 0.72);
  color: #c8d0cb;
  font-size: 10px;
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.app-shell[data-view-only="true"] {
  grid-template-rows: minmax(0, 1fr);
}

.app-shell[data-view-only="true"] > .topbar,
.app-shell[data-view-only="true"] > .performance-hud,
.app-shell[data-view-only="true"] .control-sidebar,
.app-shell[data-view-only="true"] .node-inspector {
  display: none;
}

.app-shell[data-view-only="true"] .workspace {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell[data-view-only="true"] .view-only-hint {
  display: flex;
}

.app-shell:fullscreen {
  width: 100vw;
  height: 100vh;
}

.graph-stage::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(var(--graph-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--graph-grid-major) 1px, transparent 1px),
    linear-gradient(var(--graph-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--graph-grid-minor) 1px, transparent 1px);
  background-position:
    var(--graph-grid-major-x) var(--graph-grid-major-y),
    var(--graph-grid-major-x) var(--graph-grid-major-y),
    var(--graph-grid-minor-x) var(--graph-grid-minor-y),
    var(--graph-grid-minor-x) var(--graph-grid-minor-y);
  background-size:
    var(--graph-grid-major-size) var(--graph-grid-major-size),
    var(--graph-grid-major-size) var(--graph-grid-major-size),
    var(--graph-grid-minor-size) var(--graph-grid-minor-size),
    var(--graph-grid-minor-size) var(--graph-grid-minor-size);
  content: "";
}

.graph-stage[data-background-pattern="dots"]::before {
  /* Dots are point marks rather than one-pixel lines, so the same source
     alpha reads considerably stronger. Keep the pattern subordinate to the
     graph while retaining world-anchored movement during zoom and pan. */
  opacity: 0.55;
  background-image:
    radial-gradient(circle, var(--graph-grid-major) 0 1.4px, transparent 1.6px),
    radial-gradient(circle, var(--graph-grid-minor) 0 1px, transparent 1.2px);
  background-position:
    var(--graph-grid-major-x) var(--graph-grid-major-y),
    var(--graph-grid-minor-x) var(--graph-grid-minor-y);
  background-size:
    var(--graph-grid-major-size) var(--graph-grid-major-size),
    var(--graph-grid-minor-size) var(--graph-grid-minor-size);
}

.graph-stage[data-background-pattern="stripes"]::before {
  background-image:
    repeating-linear-gradient(135deg, transparent 0 calc(var(--graph-grid-major-size) - 1px), var(--graph-grid-major) calc(var(--graph-grid-major-size) - 1px) var(--graph-grid-major-size)),
    repeating-linear-gradient(135deg, transparent 0 calc(var(--graph-grid-minor-size) - 1px), var(--graph-grid-minor) calc(var(--graph-grid-minor-size) - 1px) var(--graph-grid-minor-size));
  background-position: var(--graph-grid-major-x) var(--graph-grid-major-y), var(--graph-grid-minor-x) var(--graph-grid-minor-y);
  background-size: auto;
}

.graph-stage[data-background-pattern="crosshatch"]::before {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 calc(var(--graph-grid-major-size) - 1px), var(--graph-grid-major) calc(var(--graph-grid-major-size) - 1px) var(--graph-grid-major-size)),
    repeating-linear-gradient(135deg, transparent 0 calc(var(--graph-grid-major-size) - 1px), var(--graph-grid-major) calc(var(--graph-grid-major-size) - 1px) var(--graph-grid-major-size)),
    repeating-linear-gradient(45deg, transparent 0 calc(var(--graph-grid-minor-size) - 1px), var(--graph-grid-minor) calc(var(--graph-grid-minor-size) - 1px) var(--graph-grid-minor-size)),
    repeating-linear-gradient(135deg, transparent 0 calc(var(--graph-grid-minor-size) - 1px), var(--graph-grid-minor) calc(var(--graph-grid-minor-size) - 1px) var(--graph-grid-minor-size));
  background-position:
    var(--graph-grid-major-x) var(--graph-grid-major-y),
    var(--graph-grid-major-x) var(--graph-grid-major-y),
    var(--graph-grid-minor-x) var(--graph-grid-minor-y),
    var(--graph-grid-minor-x) var(--graph-grid-minor-y);
  background-size: auto;
}

.graph-stage[data-background-pattern="isometric"]::before {
  opacity: 0.82;
  background-image:
    repeating-linear-gradient(30deg, transparent 0 calc(var(--graph-grid-minor-size) - 1px), var(--graph-grid-minor) calc(var(--graph-grid-minor-size) - 1px) var(--graph-grid-minor-size)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--graph-grid-major-size) - 1px), var(--graph-grid-major) calc(var(--graph-grid-major-size) - 1px) var(--graph-grid-major-size)),
    repeating-linear-gradient(150deg, transparent 0 calc(var(--graph-grid-minor-size) - 1px), var(--graph-grid-minor) calc(var(--graph-grid-minor-size) - 1px) var(--graph-grid-minor-size));
  background-position:
    var(--graph-grid-minor-x) var(--graph-grid-minor-y),
    var(--graph-grid-major-x) var(--graph-grid-major-y),
    var(--graph-grid-minor-x) var(--graph-grid-minor-y);
  background-size: auto;
}

.graph-stage[data-background-pattern="star-map"]::before {
  opacity: 0.72;
  background-image:
    radial-gradient(circle, var(--graph-grid-major) 0 2px, transparent 2.2px),
    radial-gradient(circle, var(--graph-grid-minor) 0 1px, transparent 1.15px),
    radial-gradient(circle, var(--graph-grid-minor) 0 0.7px, transparent 0.9px);
  background-position:
    var(--graph-grid-major-x) var(--graph-grid-major-y),
    var(--graph-grid-minor-x) var(--graph-grid-minor-y),
    calc(var(--graph-grid-minor-x) + var(--graph-grid-minor-size) * 0.5) calc(var(--graph-grid-minor-y) + var(--graph-grid-minor-size) * 0.5);
  background-size:
    var(--graph-grid-major-size) var(--graph-grid-major-size),
    var(--graph-grid-minor-size) var(--graph-grid-minor-size),
    var(--graph-grid-major-size) var(--graph-grid-major-size);
  filter: drop-shadow(0 0 2px var(--graph-grid-major));
}

.graph-stage[data-background-pattern="blueprint"]::before {
  background-image:
    linear-gradient(var(--graph-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--graph-grid-major) 1px, transparent 1px),
    radial-gradient(circle, var(--graph-grid-minor) 0 1px, transparent 1.2px);
  background-position:
    var(--graph-grid-major-x) var(--graph-grid-major-y),
    var(--graph-grid-major-x) var(--graph-grid-major-y),
    var(--graph-grid-minor-x) var(--graph-grid-minor-y);
  background-size:
    var(--graph-grid-major-size) var(--graph-grid-major-size),
    var(--graph-grid-major-size) var(--graph-grid-major-size),
    var(--graph-grid-minor-size) var(--graph-grid-minor-size);
}

.graph-stage[data-background-pattern="radial"]::before {
  opacity: 0.74;
  background-image:
    repeating-radial-gradient(
      circle at var(--graph-grid-major-x) var(--graph-grid-major-y),
      transparent 0 calc(var(--graph-grid-major-size) - 1px),
      var(--graph-grid-major) calc(var(--graph-grid-major-size) - 1px) var(--graph-grid-major-size)
    ),
    linear-gradient(var(--graph-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--graph-grid-minor) 1px, transparent 1px);
  background-position:
    0 0,
    var(--graph-grid-major-x) var(--graph-grid-major-y),
    var(--graph-grid-major-x) var(--graph-grid-major-y);
  background-size:
    100% 100%,
    var(--graph-grid-major-size) var(--graph-grid-major-size),
    var(--graph-grid-major-size) var(--graph-grid-major-size);
}

.graph-toolbar {
  position: absolute;
  z-index: 12;
  top: 12px;
  left: 50%;
  display: flex;
  max-width: calc(100% - 24px);
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(17, 20, 21, 0.9);
  box-shadow: var(--shadow-sm), inset 0 1px rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(16px) saturate(1.2);
  transform: translateX(-50%);
}

.graph-search-shell {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

.graph-search-toggle[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  background: var(--accent-wash);
  color: var(--accent-bright);
}

.graph-search {
  position: absolute;
  z-index: 70;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 24px));
  height: 38px;
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface-0) 97%, transparent);
  box-shadow: var(--shadow-lg);
}

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

.graph-search input { font-size: 12px; }

.graph-search kbd {
  flex: 0 0 auto;
  min-width: 17px;
  height: 17px;
}

.search-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 9px);
  right: -1px;
  left: -1px;
  max-height: min(50vh, 340px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-0) 98%, transparent);
  box-shadow: var(--shadow-lg);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.search-result {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--text-soft);
  text-align: left;
}

.search-result:hover,
.search-result:focus-visible {
  background: var(--surface-hover);
  color: var(--text);
}

.search-result strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 620;
}

.search-result span {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 8px;
}

.search-result-empty {
  padding: 14px 10px;
  color: var(--text-faint);
  font-size: 9px;
  text-align: center;
}

#graph-canvas { cursor: grab; }
#graph-canvas.has-node-hover { cursor: pointer; }
#graph-canvas.is-panning { cursor: grabbing; }
#graph-canvas.is-dragging-node { cursor: move; }

.notice--warning {
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent-soft);
}

.export-menu {
  position: fixed;
  z-index: 110;
  display: grid;
  width: min(318px, calc(100vw - 16px));
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% -15%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 44%),
    var(--modal-surface);
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(22px) saturate(1.15);
  animation: export-menu-enter 160ms var(--ease);
}

.export-menu__header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: -2px -2px 3px;
  padding: 5px 5px 11px;
  border-bottom: 1px solid var(--line-dim);
}

.export-menu__header-icon,
.export-menu__item-icon {
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
  color: var(--accent-bright);
}

.export-menu__header-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.export-menu__header-icon svg,
.export-menu__item-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.export-menu__header > span:last-child,
.export-menu__item-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.export-menu__header strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
}

.export-menu__header small {
  color: var(--text-faint);
  font-size: 10px;
}

.export-menu button {
  appearance: none;
  display: grid;
  width: 100%;
  min-height: 62px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border: 1px solid var(--line-dim);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-1) 82%, transparent);
  color: var(--text-soft);
  text-align: left;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.018);
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms var(--ease);
}

.export-menu button:hover,
.export-menu button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-hover));
  color: var(--text);
  transform: translateX(2px);
}

.export-menu button[data-export="csv"] .export-menu__item-icon {
  border-color: color-mix(in srgb, var(--mint) 30%, var(--line));
  background: color-mix(in srgb, var(--mint) 10%, var(--surface-1));
  color: var(--mint-bright);
}

.export-menu button[data-export="json"] .export-menu__item-icon {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-1));
  color: var(--blue);
}

.export-menu__item-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}

.export-menu__item-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-menu__item-copy small {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-menu__format {
  min-width: 36px;
  padding: 3px 5px;
  border: 1px solid var(--line-dim);
  border-radius: 999px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-align: center;
}

.export-menu__footnote {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 4px 0;
  color: var(--text-faint);
  font-size: 9px;
}

.export-menu__footnote i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px color-mix(in srgb, var(--mint) 45%, transparent);
}

.toolbar-divider {
  height: 22px;
  align-self: center;
  margin: 0 3px;
}

.zoom-control {
  display: flex;
  height: 32px;
  align-items: center;
  border: 1px solid var(--line-dim);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.12);
}

.zoom-control .icon-button {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
}

.zoom-control output {
  min-width: 39px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 8px;
  text-align: center;
}

.inspector-toggle {
  width: 32px;
  height: 32px;
  border-color: transparent;
  background: transparent;
}

.canvas-stack,
.canvas-stack canvas,
.canvas-vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.canvas-stack {
  z-index: 1;
  contain: strict;
  overflow: hidden;
  touch-action: none;
}

.canvas-stack canvas {
  display: block;
}

#graph-canvas {
  z-index: 1;
}

#label-canvas {
  z-index: 2;
  pointer-events: none;
}

.canvas-vignette {
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(4, 6, 6, 0.18), transparent 13%),
    radial-gradient(ellipse at center, transparent 50%, rgba(1, 3, 3, 0.22) 100%);
  opacity: var(--graph-vignette-opacity);
  pointer-events: none;
}

.graph-stage[data-canvas-surface="light"] .canvas-vignette {
  background:
    linear-gradient(180deg, rgba(58, 48, 32, 0.08), transparent 13%),
    radial-gradient(ellipse at center, transparent 55%, rgba(76, 61, 35, 0.15) 100%);
}

.app-shell[aria-busy="true"] #graph-canvas,
.app-shell[aria-busy="true"] #label-canvas {
  opacity: 0.26;
  filter: saturate(0.7);
}

.viewport-overlay {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(420px, calc(100% - 36px));
  flex-direction: column;
  align-items: center;
  padding: 27px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-0) 90%, transparent);
  box-shadow: var(--shadow-lg), inset 0 1px rgba(255, 255, 255, 0.035);
  text-align: center;
  backdrop-filter: blur(18px) saturate(1.1);
  transform: translate(-50%, -50%);
}

.viewport-overlay h2 {
  margin-top: 6px;
  color: var(--text);
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -0.025em;
}

.viewport-overlay p {
  max-width: 330px;
  margin-top: 8px;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.55;
}

.overlay-graphic {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: 17px;
  border: 1px solid rgba(75, 222, 143, 0.3);
  border-radius: 15px;
  background: var(--accent-wash);
  color: var(--accent-bright);
}

.overlay-graphic svg {
  width: 30px;
  height: 30px;
  fill: var(--accent);
  stroke: currentColor;
  stroke-width: 1.1;
}

.overlay-graphic--error {
  border-color: rgba(255, 127, 115, 0.3);
  background: var(--danger-wash);
  color: var(--danger);
}

.overlay-graphic--error svg {
  fill: none;
}

.overlay-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.error-diagnostic {
  margin: 12px 0 0;
  color: var(--text-faint);
  font: 600 10px/1.4 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.no-script {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 28px;
  color: #e7edeb;
  background: #080b0c;
  text-align: center;
}

.no-script strong { font-size: clamp(24px, 5vw, 40px); }
.no-script span { max-width: 52ch; color: #9aa8a4; }

.loading-overlay {
  width: min(350px, calc(100% - 36px));
  padding-top: 31px;
}

.loading-orbit {
  position: relative;
  width: 58px;
  height: 58px;
  margin-bottom: 19px;
  border: 1px solid rgba(75, 222, 143, 0.15);
  border-radius: 50%;
  animation: orbit-rotate 5s linear infinite;
}

.loading-orbit::before,
.loading-orbit::after {
  position: absolute;
  border: 1px solid rgba(114, 214, 180, 0.1);
  border-radius: 50%;
  content: "";
}

.loading-orbit::before {
  inset: 9px;
}

.loading-orbit::after {
  inset: 20px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(75, 222, 143, 0.42);
}

.loading-orbit i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px rgba(114, 214, 180, 0.35);
}

.loading-orbit i:nth-child(1) { top: 4px; left: 24px; }
.loading-orbit i:nth-child(2) { right: 5px; bottom: 13px; }
.loading-orbit i:nth-child(3) { bottom: 11px; left: 7px; }

.progress-track {
  position: relative;
  width: min(240px, 100%);
  height: 4px;
  overflow: hidden;
  margin-top: 19px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
}

.progress-track > span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--mint));
  box-shadow: 0 0 10px rgba(75, 222, 143, 0.24);
  transition: width 250ms var(--ease);
}

.progress-track:not([aria-valuenow]) > span {
  width: 35%;
  animation: indeterminate 1.3s var(--ease) infinite;
}

.selection-marquee {
  position: absolute;
  z-index: 8;
  border: 1px solid rgba(75, 222, 143, 0.75);
  background: rgba(75, 222, 143, 0.09);
  pointer-events: none;
}

.node-inspector {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.45;
  overflow: hidden;
}

.inspector-heading-row {
  flex: 0 0 auto;
  align-items: center;
  min-height: 72px;
  padding: 14px 17px;
  border-bottom: 1px solid var(--line);
}

.node-inspector .eyebrow {
  font-size: 10px;
}

.node-inspector .inspector-heading-row h2 {
  font-size: 18px;
  line-height: 1.2;
}

.inspector-heading-row .icon-button {
  width: 30px;
  height: 30px;
  border-color: transparent;
  background: transparent;
}

.inspector-tabs {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--subpanel-surface);
}

.inspector-tab {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 680;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.inspector-tab svg {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: -4px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.inspector-tab.is-active,
.inspector-tab[aria-selected="true"] {
  border-color: rgba(75, 222, 143, 0.25);
  background: var(--accent-wash);
  color: var(--accent-bright);
}

.inspector-tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.inspector-tab-panels,
.inspector-tab-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

.inspector-tab-panel {
  flex-direction: column;
}

.inspector-tab-panel[hidden] {
  display: none;
}

.analytics-panel {
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 4%, rgba(114, 214, 180, 0.055), transparent 27%),
    var(--panel-tint);
}

.analytics-scroll {
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.analytics-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-bottom: 17px;
}

.analytics-heading__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(114, 214, 180, 0.25);
  border-radius: 11px;
  background: var(--mint-wash);
  color: var(--mint-bright);
  box-shadow: 0 0 18px rgba(114, 214, 180, 0.06);
}

.analytics-heading__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.analytics-heading h2 {
  margin-top: 3px;
  color: var(--text);
  font-size: 18px;
  font-weight: 680;
}

.analytics-heading p {
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.45;
}

.analytics-section {
  padding: 15px 0;
  border-top: 1px solid var(--line-dim);
}

.analytics-section > h3 {
  margin-bottom: 10px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.025em;
}

.analytics-card-grid,
.analytics-detail-grid {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.analytics-card-grid > div {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-1) 76%, transparent);
}

.analytics-card-grid dt,
.analytics-detail-grid dt,
.analytics-facts dt {
  color: var(--text-dim);
  font-size: 10px;
}

.analytics-card-grid dd {
  margin: 5px 0 0;
  color: var(--mint-bright);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 680;
}

.analytics-chart {
  position: relative;
  min-width: 0;
  margin: 12px 0 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--mint) 18%);
  border-radius: 10px;
  background:
    radial-gradient(circle at 78% 4%, color-mix(in srgb, var(--mint) 8%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-1) 84%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.analytics-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

.analytics-chart figcaption {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  border-top: 1px solid var(--line-dim);
  color: var(--text-faint);
  font-size: 9px;
}

.analytics-health-ring__track {
  fill: color-mix(in srgb, var(--text) 8%, transparent);
}

.analytics-health-ring__number {
  fill: var(--text);
  font: 720 12px var(--font-mono);
}

.analytics-health-ring__label {
  fill: var(--text-dim);
  font: 620 9px var(--font-sans);
}

.analytics-axis text {
  fill: var(--text-faint);
  font-size: 8px;
}

.analytics-axis path,
.analytics-axis line {
  stroke: color-mix(in srgb, var(--line) 72%, transparent);
}

.analytics-axis--y .tick line {
  stroke-dasharray: 2 4;
}

.analytics-axis--y .domain {
  display: none;
}

.analytics-degree-bar {
  transition: filter 120ms ease, opacity 120ms ease;
}

.analytics-degree-bar:hover {
  filter: brightness(1.22) saturate(1.08);
}

.analytics-category-bubble circle {
  vector-effect: non-scaling-stroke;
  transition: filter 120ms ease, fill-opacity 120ms ease;
}

.analytics-category-bubble:hover circle {
  fill-opacity: 1;
  filter: brightness(1.12);
}

.analytics-category-bubble__label,
.analytics-category-bubble__count {
  fill: rgba(255, 255, 255, 0.94);
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.62);
  stroke-width: 2px;
  stroke-linejoin: round;
  pointer-events: none;
}

.analytics-category-bubble__label {
  font: 680 8px var(--font-sans);
}

.analytics-category-bubble__count {
  font: 650 7px var(--font-mono);
}

.analytics-detail-grid > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 9px;
  padding: 7px 1px;
  border-bottom: 1px solid var(--line-dim);
}

.analytics-detail-grid dd,
.analytics-facts dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 620;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-bands {
  display: grid;
  gap: 7px;
}

.analytics-band {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font: 10px var(--font-mono);
}

.analytics-band i {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
}

.analytics-band b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--mint));
  box-shadow: 0 0 8px rgba(114, 214, 180, 0.16);
}

.analytics-band output {
  color: var(--text-soft);
  text-align: right;
}

.analytics-facts {
  display: grid;
  gap: 1px;
  margin: 0;
}

.analytics-facts > div {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(92px, 0.8fr) minmax(0, 1.2fr);
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-dim);
}

.analytics-hubs {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.analytics-hubs button {
  display: grid;
  width: 100%;
  min-height: 36px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft);
  font-size: 11px;
  text-align: left;
}

.analytics-hubs button:hover,
.analytics-hubs button:focus-visible {
  border-color: var(--line);
  background: var(--surface-hover);
}

.analytics-hubs span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-hubs output {
  color: var(--accent-bright);
  font: 10px var(--font-mono);
}

.legend-panel.legend-panel--inspector {
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px;
  border-top: 0;
  background: var(--panel-tint);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.legend-panel--inspector .virtual-list {
  min-height: 120px;
  height: auto;
  flex: 1 0 120px;
}

.legend-panel--inspector > .legend-heading-row,
.legend-panel--inspector > .legend-behavior-controls,
.legend-panel--inspector > .control-help,
.legend-panel--inspector > .search-field {
  flex: 0 0 auto;
}

.legend-panel--inspector > .control-help {
  margin: 8px 1px 0;
  overflow: visible;
}

.legend-panel--inspector > .search-field {
  min-height: 31px;
  margin-top: 8px;
}

.inspector-empty {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 26px;
  text-align: center;
}

.inspector-empty__graphic {
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  margin-bottom: 18px;
  border: 1px dashed rgba(231, 237, 232, 0.13);
  border-radius: 50%;
  color: var(--text-faint);
}

.inspector-empty__graphic::after {
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(75, 222, 143, 0.12);
  border-radius: 50%;
  content: "";
}

.inspector-empty__graphic svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

.inspector-empty strong {
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 640;
}

.inspector-empty p {
  max-width: 270px;
  margin-top: 7px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.6;
}

.pointer-hint {
  margin-top: 15px;
  color: var(--text-dim);
  font-size: 11px;
}

.inspector-content {
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.selected-node-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}

.node-color {
  width: 24px;
  height: 24px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: var(--node-color, var(--accent));
  box-shadow: 0 0 15px var(--node-color, rgba(75, 222, 143, 0.2));
}

.selected-node-card > div {
  min-width: 0;
}

.selected-node-card h3 {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-node-card code {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-node-card .icon-button {
  width: 29px;
  height: 29px;
}

.node-metrics {
  margin-bottom: 16px;
}

.node-inspector .node-metrics dt {
  color: var(--text-dim);
  font-size: 10px;
}

.node-inspector .node-metrics dd {
  font-size: 14px;
}

.node-inspector .node-metrics > div {
  padding: 12px;
}

.inspector-section {
  padding: 16px 1px;
  border-top: 1px solid var(--line-dim);
}

.inspector-section__heading {
  align-items: center;
  margin-bottom: 9px;
}

.inspector-section__heading h3 {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 650;
}

.neighbor-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.neighbor-item {
  display: grid;
  width: 100%;
  min-height: 40px;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-soft);
  font-size: 12px;
  text-align: left;
}

.neighbor-item:hover,
.neighbor-item:focus-visible { background: var(--surface-hover); }

.neighbor-item::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neighbor-color, var(--text-dim));
  content: "";
}

.neighbor-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.neighbor-item output {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
}

.attribute-list {
  margin: 0;
}

.attribute-list > div {
  display: grid;
  grid-template-columns: minmax(96px, 0.38fr) minmax(0, 0.62fr);
  gap: 12px;
  padding: 10px 3px;
  border-bottom: 1px solid var(--line-dim);
  font-size: 11px;
  line-height: 1.45;
}

.attribute-list dt {
  overflow: hidden;
  color: var(--text-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attribute-list dd {
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--text-soft);
  font-family: var(--font-mono);
  text-align: right;
}

/* The right rail is a reading surface, not a dense command palette. These
   scoped sizes retain the compact global controls while keeping category
   filtering and node metadata legible at normal browser zoom. */
.node-inspector .text-button {
  font-size: 11px;
}

.node-inspector .micro-badge,
.node-inspector .control-label-row output {
  font-size: 10px;
}

.node-inspector .select-control > span:first-child,
.node-inspector .control-label-row label {
  color: var(--text-soft);
  font-size: 11px;
}

.node-inspector .select-wrap select,
.node-inspector .search-field input {
  font-size: 11px;
}

.node-inspector .select-wrap select {
  height: 36px;
}

.node-inspector .control-help {
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.55;
}

.node-inspector .legend-item {
  font-size: 12px;
  line-height: 1.35;
}

.node-inspector .legend-item__count {
  color: var(--text-dim);
  font-size: 11px;
}

.performance-hud {
  position: relative;
  z-index: 40;
  display: flex;
  min-width: 0;
  height: var(--footer-height);
  align-items: center;
  gap: 12px;
  padding: 0 10px 0 15px;
  border-top: 1px solid var(--line);
  background: var(--hud-surface);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.01em;
}

.hud-status {
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.hud-status span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-separator {
  width: 1px;
  height: 14px;
  flex: 0 0 auto;
  background: var(--line);
}

.hud-metrics {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 15px;
  margin: 0;
}

.hud-metrics > div {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.hud-metrics dt {
  color: var(--text-faint);
}

.hud-metrics dd {
  margin: 0;
  color: var(--text-soft);
}

.capability-chip {
  gap: 5px;
  min-height: 20px;
  padding: 0 7px;
  font-size: 7px;
}

.capability-chip > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-faint);
}

.capability-chip[data-state="ready"] {
  border-color: rgba(114, 214, 180, 0.2);
  color: var(--mint);
}

.capability-chip[data-state="ready"] > span {
  background: var(--mint);
}

.capability-chip strong {
  color: inherit;
  font-weight: 650;
}

.hud-toggle {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--text-faint);
}

.hud-toggle svg {
  width: 12px;
  height: 12px;
  transform: rotate(180deg);
}

.performance-hud[data-collapsed="true"] .hud-metrics,
.performance-hud[data-collapsed="true"] .capability-chip,
.performance-hud[data-collapsed="true"] .hud-separator {
  display: none;
}

.performance-hud[data-collapsed="true"] .hud-toggle svg {
  transform: none;
}

/* -------------------------------------------------------------------------
   Flow — isolated, entirely browser-side graph film workspace
   ------------------------------------------------------------------------- */

.mode-switch-island {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
}

.mode-switch-island::after { content: none; }

.workspace-mode-switch {
  position: relative;
  display: grid;
  min-width: 288px;
  min-height: 36px;
  padding: 2px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--line-strong) 78%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--field-surface) 92%, black 8%);
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 3px 12px rgba(0,0,0,.16);
}

.workspace-mode-option {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  gap: 5px;
  font: 760 11px var(--font-sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 180ms var(--ease), opacity 180ms ease;
}

.workspace-mode-option svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.workspace-mode-option:disabled { cursor: progress; opacity: .5; }

.workspace-mode-option:not(:disabled):hover { color: var(--text); }

.workspace-mode-option:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 56%, transparent);
  outline-offset: -2px;
}

.workspace-mode-switch__thumb {
  position: absolute;
  z-index: 1;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / 4);
  border: 1px solid rgba(75, 222, 143, 0.3);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-wash), color-mix(in srgb, var(--accent-wash) 72%, transparent));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 2px 7px rgba(0, 0, 0, 0.18);
  transition: transform 200ms var(--ease), border-color 200ms ease, background 200ms ease;
}

.app-shell[data-mode="explorer"] #explorer-mode-button {
  color: var(--accent-bright);
}

.app-shell[data-mode="chrono"] #chrono-mode-button {
  color: var(--mint-bright);
}

.app-shell[data-mode="chrono"] .workspace-mode-switch__thumb {
  border-color: rgba(114, 214, 180, 0.42);
  background: linear-gradient(180deg, var(--mint-wash), color-mix(in srgb, var(--mint-wash) 72%, transparent));
  transform: translateX(100%);
}

.app-shell[data-mode="poster"] #poster-mode-button {
  color: #ff9dce;
}

.app-shell[data-mode="poster"] .workspace-mode-switch__thumb {
  border-color: rgba(239,85,165,.52);
  background: linear-gradient(180deg, rgba(239,85,165,.18), rgba(90,226,226,.075));
  box-shadow: 0 0 18px rgba(239,85,165,.12), inset 0 1px rgba(255,255,255,.08);
  transform: translateX(200%);
}

.app-shell[data-mode="animation"] #animation-mode-button {
  color: var(--mint-bright);
}

.app-shell[data-mode="animation"] .workspace-mode-switch__thumb {
  border-color: color-mix(in srgb, var(--mint) 52%, transparent);
  background: linear-gradient(180deg, var(--mint-wash), color-mix(in srgb, var(--mint-wash) 62%, transparent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--mint) 13%, transparent), inset 0 1px rgba(255,255,255,.08);
  transform: translateX(300%);
}

.app-shell[data-mode="chrono"] {
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
}

.app-shell[data-mode="chrono"] > .workspace,
.app-shell[data-mode="chrono"] > .performance-hud {
  display: none;
}

.app-shell[data-mode="chrono"] .header-graph-toolbar {
  display: none;
}

.app-shell[data-mode="chrono"] #open-import-button,
.app-shell[data-mode="chrono"] #export-button,
.app-shell[data-mode="chrono"] #view-only-button,
.app-shell[data-mode="chrono"] #inspector-toggle-button,
.app-shell[data-mode="chrono"] #mobile-sidebar-button {
  display: none;
}

.chrono-workspace {
  --chrono-left-width: var(--workspace-left-panel-width);
  --chrono-right-width: 370px;
  --chrono-timeline-height: 235px;
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: var(--chrono-left-width) minmax(320px, 1fr) var(--chrono-right-width);
  grid-template-rows: minmax(310px, 1fr) var(--chrono-timeline-height);
  overflow: hidden;
  background: #080b0c;
}

@media (min-width: 901px) {
  .chrono-workspace {
    transition: grid-template-columns 170ms var(--ease);
  }

  .chrono-workspace[data-right-panel-collapsed="true"] {
    grid-template-columns: var(--chrono-left-width) minmax(320px, 1fr) 0;
  }

  .chrono-workspace[data-right-panel-collapsed="true"] .chrono-inspector {
    visibility: hidden;
    overflow: hidden;
    border-left-color: transparent;
    opacity: 0;
    pointer-events: none;
  }
}

.chrono-workspace[hidden] { display: none !important; }

.chrono-settings,
.chrono-inspector {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: color-mix(in srgb, var(--surface-0) 98%, black 2%);
  color: var(--text-soft);
}

.chrono-settings {
  border-right: 1px solid var(--line);
}

.chrono-inspector {
  border-left: 1px solid var(--line);
  transition: opacity 120ms ease;
}

.chrono-panel-heading,
.chrono-section-heading,
.chrono-timeline-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chrono-panel-heading {
  flex: 0 0 auto;
  padding: 17px 17px 8px;
}

.chrono-panel-heading h2 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 23px;
  line-height: 1;
}

.chrono-intro {
  margin: 0;
  padding: 4px 17px 14px;
  border-bottom: 1px solid var(--line-dim);
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.55;
}

.chrono-settings-scroll,
.chrono-inspector-scroll {
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.chrono-settings-scroll {
  padding: 3px 15px 14px;
}

.chrono-group {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 14px 0 16px;
  border: 0;
  border-bottom: 1px solid var(--line-dim);
}

.chrono-group > legend {
  padding: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.chrono-field,
.chrono-range {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 6px;
  margin-top: 11px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 650;
}

.chrono-field > input:not([type="color"]),
.chrono-field > textarea,
.chrono-field .select-wrap select,
.chrono-input-unit {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  outline: none;
  background: var(--field-surface);
  color: var(--text);
  font: 600 12px/1.3 var(--font-sans);
}

.chrono-field > input:not([type="color"]),
.chrono-field > textarea,
.chrono-field .select-wrap select {
  padding: 8px 10px;
}

.chrono-field > textarea {
  min-height: 64px;
  resize: vertical;
}

.chrono-field .select-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.chrono-field .select-wrap select {
  height: 38px;
  padding-right: 34px;
  appearance: none;
}

.chrono-field input:focus-visible,
.chrono-field textarea:focus-visible,
.chrono-field select:focus-visible,
.chrono-timeline-surface:focus-visible,
.chrono-preview-stage:focus-visible {
  border-color: rgba(114, 214, 180, 0.58);
  box-shadow: 0 0 0 3px rgba(114, 214, 180, 0.1);
}

.chrono-field-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 9px;
}

.chrono-field-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.chrono-audio-timing-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.chrono-reveal-order {
  margin: 13px 0 14px;
  padding: 12px;
  border: 1px solid var(--line-dim);
  border-radius: 9px;
  background: color-mix(in srgb, var(--field-surface) 72%, transparent);
}

.chrono-reveal-order h4 {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
}

.chrono-reveal-order .control-help { margin-bottom: 0; }

.chrono-reveal-approach {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--mint) 18%, var(--line-dim));
  border-radius: 9px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--mint) 5%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.chrono-reveal-approach[hidden] { display: none; }
.chrono-reveal-approach > :first-child { margin-top: 0; }

.chrono-reveal-approach--chapters {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line-dim));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.chrono-inline-action,
.chrono-build-sequence {
  width: 100%;
  justify-content: center;
}

.chrono-chapter-editor {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-dim);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-0) 70%, transparent);
}

.chrono-chapter-editor__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-dim);
}

.chrono-chapter-editor__heading > span { display: grid; gap: 2px; min-width: 0; }
.chrono-chapter-editor__heading strong { color: var(--text-soft); font-size: 11px; }
.chrono-chapter-editor__heading small { color: var(--text-faint); font-size: 9px; }

.chrono-chapter-list {
  display: grid;
  max-height: 264px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
  scrollbar-gutter: stable;
}

.chrono-chapter-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 28px auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line-dim);
}

.chrono-chapter-row:last-child { border-bottom: 0; }
.chrono-chapter-row__order { color: var(--text-faint); font: 700 9px var(--font-mono); text-align: center; }
.chrono-chapter-row__copy { display: grid; min-width: 0; gap: 2px; }
.chrono-chapter-row__copy input {
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  outline: none;
  background: transparent;
  color: var(--text-soft);
  font: 650 10px var(--font-sans);
}
.chrono-chapter-row__copy input:hover,
.chrono-chapter-row__copy input:focus-visible { border-color: var(--line-strong); background: var(--field-surface); }
.chrono-chapter-row__copy small { overflow: hidden; color: var(--text-faint); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.chrono-chapter-row > input[type="color"] { width: 27px; height: 27px; padding: 2px; border-radius: 6px; }
.chrono-chapter-row__actions { display: flex; gap: 3px; }
.chrono-chapter-row__move {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid var(--line-dim);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text-dim);
}
.chrono-chapter-row__move:hover:not(:disabled) { border-color: var(--mint); color: var(--mint-bright); }
.chrono-chapter-row__move:disabled { opacity: 0.28; }
.chrono-chapter-list__remainder { padding: 9px 11px; color: var(--text-faint); font-size: 9px; }

.chrono-reveal-plan-status {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--mint) 24%, var(--line-dim));
  border-radius: 7px;
  background: color-mix(in srgb, var(--mint) 6%, transparent);
  color: var(--text-dim);
  font-size: 9.5px;
  line-height: 1.45;
}
.chrono-reveal-plan-status[data-state="warning"] {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line-dim));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent-bright);
}

.chrono-input-unit {
  display: flex;
  align-items: center;
  padding-right: 8px;
}

.chrono-input-unit input {
  width: 100%;
  min-width: 0;
  padding: 8px 4px 8px 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.chrono-input-unit em {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
}

.chrono-color-field {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.chrono-color-field > input[type="color"] {
  width: 42px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--field-surface);
}

.chrono-color-field output {
  min-width: 58px;
  color: var(--accent-bright);
  font: 9px var(--font-mono);
}

.chrono-range > span {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chrono-range b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-soft);
  font-weight: 650;
}
.chrono-range output {
  min-width: 58px;
  flex: 0 0 auto;
  color: var(--accent-bright);
  font: 600 9px var(--font-mono);
  text-align: right;
}

.chrono-range input[type="range"] {
  width: 100%;
  height: 20px;
  margin: 0;
  appearance: none;
  background: transparent;
  accent-color: var(--accent);
  cursor: pointer;
}

.chrono-range input[type="range"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 999px;
}

.chrono-range input[type="range"]:disabled {
  cursor: not-allowed;
  filter: saturate(0.2);
  opacity: 0.42;
}

.chrono-range input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 72%, var(--surface-2));
}

.chrono-range input[type="range"]::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  margin-top: -5.5px;
  border: 2px solid var(--surface-0);
  border-radius: 50%;
  appearance: none;
  background: var(--accent-bright);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 72%, transparent), 0 2px 7px rgba(0, 0, 0, 0.36);
}

.chrono-range input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 72%, var(--surface-2));
}

.chrono-range input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 2px solid var(--surface-0);
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 72%, transparent), 0 2px 7px rgba(0, 0, 0, 0.36);
}

.chrono-explainer {
  display: grid;
  gap: 4px;
  margin: 10px 0 13px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--mint) 24%, var(--line));
  border-left: 3px solid var(--mint);
  border-radius: 7px;
  background: color-mix(in srgb, var(--mint-wash) 74%, var(--surface-1));
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.5;
}

.chrono-explainer strong { color: var(--text-soft); font-size: 11px; }

.chrono-file-drop {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 11px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
  cursor: pointer;
}

.chrono-file-drop:hover { border-color: rgba(114, 214, 180, 0.4); background: var(--mint-wash); }
.chrono-file-drop[data-state="loading"] { border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); }
.chrono-file-drop[data-state="error"] {
  border-color: color-mix(in srgb, var(--danger) 64%, var(--line));
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-1));
}
.chrono-file-drop[data-dragging="true"] {
  border-color: var(--mint);
  background: color-mix(in srgb, var(--mint-wash) 72%, var(--surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint) 28%, transparent), 0 0 18px rgba(114, 214, 180, 0.12);
}
.chrono-file-drop > svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--mint); stroke-width: 1.5; }
.chrono-file-drop > span { display: grid; min-width: 0; gap: 3px; }
.chrono-file-drop strong { overflow: hidden; color: var(--text-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chrono-file-drop small { color: var(--text-faint); font-size: 8px; line-height: 1.4; }
.chrono-file-drop input,
.chrono-document-actions input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.chrono-audio-status {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  color: var(--text-faint);
  font-size: 9px;
  line-height: 1.45;
}
.chrono-audio-status[hidden] { display: none; }
.chrono-audio-status[data-state="error"] { color: color-mix(in srgb, var(--danger) 72%, var(--text-soft)); }
.chrono-audio-status .text-button { flex: 0 0 auto; min-height: 26px; padding: 4px 9px; }

.chrono-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line-dim);
  border-radius: 8px;
  background: var(--line-dim);
}

.chrono-summary span {
  display: grid;
  gap: 3px;
  padding: 9px 7px;
  background: var(--surface-1);
  color: var(--text-faint);
  font-size: 8px;
  text-align: center;
}

.chrono-summary b { color: var(--text-soft); font: 650 10px var(--font-mono); }

.chrono-export-actions {
  flex: 0 0 auto;
  padding: 11px 14px 13px;
  border-top: 1px solid var(--line);
  background: var(--surface-1);
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.12);
}

.chrono-export-row { display: flex; gap: 7px; }
.chrono-export-row .button { flex: 1 1 0; }
.chrono-document-actions { justify-content: space-between; margin-top: 7px; }
.chrono-document-actions label { cursor: pointer; }

.chrono-export-progress {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line-dim);
}

.chrono-export-progress > div { display: flex; justify-content: space-between; color: var(--text-dim); font-size: 9px; }
.chrono-export-progress output { color: var(--mint); font-family: var(--font-mono); }
.chrono-export-progress progress { width: 100%; height: 6px; accent-color: var(--mint); }

.chrono-stage-column {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
  background: #050708;
}

.chrono-right-panel-toggle {
  position: absolute;
  z-index: 12;
  top: 10px;
  right: 10px;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(4, 7, 8, 0.78);
  color: var(--text-soft);
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}

.chrono-right-panel-toggle:hover,
.chrono-right-panel-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--mint) 52%, var(--line));
  background: color-mix(in srgb, var(--mint) 12%, rgba(4, 7, 8, 0.9));
  color: var(--mint-bright);
}

.chrono-workspace[data-right-panel-collapsed="true"] .chrono-right-panel-toggle {
  border-color: color-mix(in srgb, var(--mint) 34%, var(--line));
  color: var(--mint-bright);
}

.chrono-timeline-transport .button--run { flex: 0 0 auto; min-width: 82px; }
.chrono-timecode { display: flex; align-items: center; gap: 6px; color: var(--text-soft); font: 10px var(--font-mono); }
.chrono-timecode i { color: var(--text-faint); font-style: normal; }

.chrono-preview-stage {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  outline: 0;
  background: #050708;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .045), 0 18px 52px rgba(0, 0, 0, .34);
  touch-action: none;
  cursor: grab;
}

/* This inset stroke is the literal encoded-frame boundary. It is a DOM
   overlay, so it remains visible in the editor without leaking into stills or
   video. Safe/title guides inside the canvas are composition aids, not crop
   marks. */
.chrono-preview-stage::after {
  position: absolute;
  z-index: 8;
  inset: 0;
  border: 2px solid rgba(240, 246, 244, 0.58);
  box-shadow: inset 0 0 0 1px rgba(4, 8, 10, 0.72);
  pointer-events: none;
  content: "";
}

.chrono-preview-stage[data-dragging="true"] { cursor: grabbing; }
.chrono-preview-stage[data-overlay-edit="caption"] { cursor: grabbing; }
.chrono-preview-stage[data-overlay-edit="image-move"] { cursor: move; }
.chrono-preview-stage[data-overlay-edit="image-resize"] { cursor: nwse-resize; }

.chrono-preview-stage canvas,
.chrono-render-sources {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#chrono-preview-canvas { display: block; }

.chrono-render-sources {
  visibility: hidden;
  pointer-events: none;
}

.chrono-render-sources canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.chrono-preview-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--text-dim);
}

.chrono-preview-empty svg { width: 50px; height: 50px; fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: 0.55; }
.chrono-preview-chip { position: absolute; z-index: 9; top: 10px; right: 54px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(4,7,8,.72); color: #aebbb7; font: 8px var(--font-mono); backdrop-filter: blur(8px); pointer-events: none; }

.chrono-track-tabs {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}

.chrono-track-tab {
  min-width: 0;
  min-height: 46px;
  padding: 14px 4px 12px;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.015em;
}

.chrono-track-tab:hover { color: var(--text-soft); background: var(--surface-hover); }
.chrono-track-tab.is-active { border-bottom-color: var(--mint); color: var(--mint-bright); }

.chrono-mobile-toggle { display: none; }

.chrono-inspector-scroll { padding: 15px 17px 22px; }
.chrono-track-panel { width: 100%; min-width: 0; max-width: 100%; }
.chrono-track-panel[hidden] { display: none; }
.chrono-section-heading { margin-bottom: 5px; }
.chrono-section-heading h3 { margin: 3px 0 0; color: var(--text); font-size: 17px; }
.chrono-editor-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-top: 15px; }
.chrono-editor-actions--delete { display: flex; justify-content: flex-end; }
.chrono-track-panel .control-help { margin: 12px 0 0; color: var(--text-faint); font-size: 10px; line-height: 1.5; }

.chrono-effect-target-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.chrono-effect-target-actions .button {
  min-width: 0;
  min-height: 34px;
  padding-inline: 8px;
  font-size: 9px;
}

.chrono-effect-target-actions svg {
  width: 14px;
  height: 14px;
}

.chrono-effect-target-status {
  min-height: 30px;
  margin: 7px 0 13px;
  padding: 7px 9px;
  border: 1px solid var(--line-dim);
  border-radius: 7px;
  background: var(--panel-tint);
  color: var(--text-faint);
  font: 9px/1.45 var(--font-mono);
}

.chrono-effect-target-status[data-state="ready"] { border-color: color-mix(in srgb, var(--mint) 26%, var(--line)); color: var(--mint-bright); }
.chrono-effect-target-status[data-state="warning"] { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); color: var(--accent-bright); }
.chrono-effect-target-status[data-state="picking"] { border-color: color-mix(in srgb, #70b7ff 52%, var(--line)); color: #b8d9ff; }

.chrono-preview-stage[data-effect-picking="true"] { cursor: crosshair; }

.chrono-effect-network-controls {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--mint) 22%, var(--line));
  border-radius: 9px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--mint) 9%, transparent), transparent 52%),
    color-mix(in srgb, var(--field-surface) 74%, transparent);
}

.chrono-effect-network-controls[hidden] { display: none; }
.chrono-effect-network-controls > :first-child { margin-top: 0; }

.chrono-image-add { cursor: pointer; }
.chrono-image-add input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.chrono-image-drop {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  margin: 8px 0 14px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--mint) 30%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--mint) 5%, var(--surface-1));
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}
.chrono-image-drop:hover,
.chrono-image-drop:focus-visible,
.chrono-image-drop[data-dragging="true"] {
  border-color: color-mix(in srgb, var(--mint) 68%, white);
  background: color-mix(in srgb, var(--mint) 11%, var(--surface-1));
  outline: none;
}
.chrono-image-drop[data-dragging="true"] { transform: scale(1.01); }
.chrono-image-drop > svg { width: 30px; height: 30px; fill: none; stroke: var(--mint-bright); stroke-width: 1.35; }
.chrono-image-drop > span { display: grid; gap: 3px; min-width: 0; }
.chrono-image-drop strong { color: var(--text-soft); font-size: 12px; }
.chrono-image-drop small { color: var(--text-faint); font-size: 9px; }
.chrono-image-preview {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 10px 0 14px;
  padding: 8px;
  border: 1px solid var(--line-dim);
  border-radius: 9px;
  background: var(--surface-1);
}
.chrono-image-preview[hidden] { display: none; }
.chrono-image-preview img {
  width: 58px;
  height: 42px;
  border-radius: 6px;
  background-color: #091012;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.055) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.055) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.055) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.055) 75%);
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-size: 8px 8px;
  object-fit: contain;
}
.chrono-image-preview > span { display: grid; gap: 3px; min-width: 0; }
.chrono-image-preview strong,
.chrono-image-preview small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chrono-image-preview strong { color: var(--text-soft); font-size: 11px; }
.chrono-image-preview small { color: var(--text-faint); font: 9px var(--font-mono); }

.chrono-timeline {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-column: 1 / -1;
  grid-template-rows: 48px minmax(0, 1fr);
  border-top: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface-0) 98%, black 2%);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.18);
}

.chrono-timeline-heading {
  min-width: 0;
  gap: 10px;
  padding: 5px 10px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-dim);
  background: var(--toolbar-surface);
}
.chrono-timeline-transport,
.chrono-timeline-tools {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}
.chrono-timeline-transport { flex: 0 0 auto; }
.chrono-timeline-tools { flex: 0 0 auto; justify-content: flex-end; }
.chrono-timeline-tools .button--quiet { min-height: 32px; padding: 6px 9px; }
.chrono-timeline-tools .button--quiet svg { width: 15px; height: 15px; }
.button--auto-camera {
  min-height: 32px;
  padding: 6px 10px;
  border-color: color-mix(in srgb, var(--mint) 34%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--mint) 13%, var(--surface-2)), var(--surface-2));
  color: var(--mint-bright);
  font-size: 10px;
  font-weight: 720;
}
.button--auto-camera svg { width: 16px; height: 16px; }
.button--auto-camera[data-state="analyzing"] svg { animation: chrono-auto-pulse 900ms ease-in-out infinite alternate; }
.button--auto-camera:disabled { opacity: 0.46; }
@keyframes chrono-auto-pulse { to { filter: drop-shadow(0 0 5px var(--mint)); transform: scale(1.08); } }
.chrono-timeline-zoom { display: flex; align-items: center; gap: 7px; color: var(--text-faint); font-size: 9px; }
.chrono-timeline-zoom input { width: 92px; accent-color: var(--accent); }

.chrono-timeline-context {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center !important;
  justify-content: center;
  gap: 5px !important;
}

.chrono-timeline-context[hidden] { display: none !important; }
.chrono-timeline-context > span {
  max-width: 180px;
  overflow: hidden;
  color: var(--text-dim);
  font: 650 9px var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chrono-timeline-context .text-button {
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--line-dim);
  border-radius: 5px;
  background: var(--surface-2);
  font-size: 9px;
}
.chrono-timeline-context .text-button--danger { color: color-mix(in srgb, var(--danger) 82%, white); }

.flow-clear-button {
  border-color: color-mix(in srgb, var(--danger) 24%, var(--line));
  color: color-mix(in srgb, var(--danger) 72%, var(--text-soft));
}

.flow-clear-button:hover,
.flow-clear-button:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 54%, var(--line));
  background: var(--danger-wash);
  color: var(--text);
}

.modal-card--confirm {
  width: min(520px, calc(100vw - 32px));
}

.flow-clear-body { padding-block: 22px; }

.destructive-confirmation {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--line));
  border-radius: var(--radius-md);
  background: var(--danger-wash);
}

.destructive-confirmation > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}

.destructive-confirmation svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.destructive-confirmation strong { font-size: 14px; }
.destructive-confirmation p { margin: 5px 0 0; color: var(--text-dim); font-size: 12px; line-height: 1.5; }

.chrono-timeline-scroll {
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--line-strong) transparent;
}

.chrono-timeline-surface {
  --chrono-track-label: 112px;
  --chrono-track-edge-padding: 12px;
  position: relative;
  min-width: 100%;
  width: 100%;
  height: 186px;
  min-height: 186px;
  overflow: clip;
  outline: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc((100% - var(--chrono-track-label) - var(--chrono-track-edge-padding) - var(--chrono-track-edge-padding)) / 20 - 1px),
    rgba(255,255,255,.025) calc((100% - var(--chrono-track-label) - var(--chrono-track-edge-padding) - var(--chrono-track-edge-padding)) / 20)
  );
}

.chrono-ruler {
  position: relative;
  height: 24px;
  margin-right: var(--chrono-track-edge-padding);
  margin-left: calc(var(--chrono-track-label) + var(--chrono-track-edge-padding));
  border-bottom: 1px solid var(--line-dim);
  color: var(--text-faint);
  font: 8px var(--font-mono);
}

.chrono-ruler-mark { position: absolute; top: 3px; min-width: 1px; transform: translateX(-50%); white-space: nowrap; }
.chrono-ruler-mark::after { position: absolute; top: 12px; left: 50%; width: 1px; height: 7px; background: var(--line-strong); content: ""; }
.chrono-ruler-mark[data-level="minor"] { top: 0; color: transparent; }
.chrono-ruler-mark[data-level="minor"]::after { top: 14px; height: 5px; background: var(--line-dim); }

.chrono-timeline-row {
  display: grid;
  height: 27px;
  grid-template-columns: var(--chrono-track-label) minmax(0, 1fr);
  border-bottom: 1px solid var(--line-dim);
}

.chrono-track-name {
  position: sticky;
  z-index: 3;
  left: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-right: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 650;
}

.chrono-track-name svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.chrono-track-points {
  position: relative;
  min-width: 0;
  margin-inline: var(--chrono-track-edge-padding);
}

.chrono-key-point,
.chrono-marker-point {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.38);
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,0,0,.42);
  transform: translate(-50%, -50%) rotate(45deg);
  cursor: ew-resize;
  touch-action: none;
}

.chrono-key-point[data-kind="reveal"] { background: var(--mint); }
.chrono-key-point[data-generated="audio"],
.chrono-key-point[data-generated="chapter"] {
  border-color: color-mix(in srgb, var(--mint-bright) 72%, white);
  background: linear-gradient(135deg, var(--accent-bright), var(--mint-bright));
  box-shadow: 0 0 0 2px rgba(0,0,0,.42), 0 0 10px color-mix(in srgb, var(--mint) 32%, transparent);
}
.chrono-key-point[data-generated="chapter"] {
  border-color: color-mix(in srgb, var(--accent-bright) 74%, white);
  background: linear-gradient(135deg, var(--accent), #D273FF);
}
.chrono-marker-point { border-radius: 50% 50% 50% 0; transform: translate(-50%, -60%) rotate(-45deg); }
.chrono-key-point[aria-current="true"], .chrono-marker-point[aria-current="true"] { box-shadow: 0 0 0 3px rgba(75,222,143,.3), 0 0 12px rgba(75,222,143,.4); }
.chrono-key-point[data-disabled="true"] { filter: grayscale(0.85); opacity: 0.34; }
.chrono-key-point[data-endpoint="true"] { cursor: default; }

.chrono-caption-clip {
  position: absolute;
  top: 3px;
  height: 21px;
  min-width: 8px;
  touch-action: none;
}

.chrono-caption-clip[data-dragging="true"] { z-index: 5; }
.chrono-caption-clip[data-dragging="true"] .chrono-clip { cursor: grabbing; }

.chrono-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 2px 12px;
  border: 1px solid rgba(114,214,180,.28);
  border-radius: 4px;
  background: rgba(114,214,180,.11);
  color: var(--mint-bright);
  font-size: 9px;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: grab;
  touch-action: none;
}

.chrono-caption-clip[data-disabled="true"] .chrono-clip {
  border-style: dashed;
  filter: grayscale(0.9);
  opacity: 0.38;
}

.chrono-caption-clip[data-kind="image"] .chrono-clip {
  border-color: color-mix(in srgb, #70b7ff 42%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, #70b7ff 15%, transparent), color-mix(in srgb, #a77bff 14%, transparent));
  color: #b8d9ff;
}
.chrono-caption-clip[data-kind="image"] .chrono-clip-resize {
  background: color-mix(in srgb, #70b7ff 20%, transparent);
}
.chrono-caption-clip[data-kind="image"] .chrono-clip-resize::after {
  border-color: #b8d9ff;
}

.chrono-caption-clip[data-kind="effect"] .chrono-clip {
  border-color: color-mix(in srgb, #4bde8f 48%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, #4bde8f 18%, transparent), color-mix(in srgb, #ff7bd5 14%, transparent));
  color: #a8f5c8;
  box-shadow: inset 0 0 14px color-mix(in srgb, #4bde8f 6%, transparent);
}
.chrono-caption-clip[data-kind="effect"] .chrono-clip-resize { background: color-mix(in srgb, #4bde8f 19%, transparent); }
.chrono-caption-clip[data-kind="effect"] .chrono-clip-resize::after { border-color: #a8f5c8; }

.chrono-clip-resize {
  position: absolute;
  z-index: 3;
  top: 1px;
  bottom: 1px;
  width: 14px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--mint) 18%, transparent);
  cursor: col-resize;
  touch-action: none;
}
.chrono-clip-resize--start { left: 1px; border-right: 1px solid color-mix(in srgb, var(--mint) 45%, transparent); cursor: w-resize !important; }
.chrono-clip-resize--end { right: 1px; border-left: 1px solid color-mix(in srgb, var(--mint) 45%, transparent); cursor: e-resize !important; }
.chrono-clip-resize::after {
  position: absolute;
  top: 4px;
  left: 3px;
  bottom: 4px;
  width: 2px;
  border-right: 1px solid var(--mint-bright);
  border-left: 1px solid var(--mint-bright);
  content: "";
  opacity: 0.72;
}
.chrono-clip-resize:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.chrono-clip[data-kind="visual"] { border-color: rgba(166,120,255,.35); background: rgba(166,120,255,.11); color: #c9b7ff; }

.chrono-audio-track { overflow: hidden; }
.chrono-audio-clip {
  position: absolute;
  z-index: 1;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  min-width: 20px;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #e46ba9 42%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, #a73f78 16%, transparent);
  color: #e79bc3;
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.chrono-audio-clip:hover,
.chrono-audio-clip:focus-visible {
  border-color: color-mix(in srgb, #f19ccb 72%, transparent);
  background: color-mix(in srgb, #a73f78 25%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, #e46ba9 14%, transparent), inset 0 0 16px color-mix(in srgb, #f19ccb 7%, transparent);
  outline: none;
}
.chrono-audio-clip:disabled { cursor: wait; opacity: 0.72; }
.chrono-audio-clip canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.chrono-audio-clip > span {
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 6px;
  max-width: calc(100% - 34px);
  overflow: hidden;
  color: inherit;
  font: 650 8px var(--font-sans);
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chrono-audio-track[data-state="loading"] .chrono-audio-clip { color: var(--accent); }
.chrono-audio-track[data-state="error"] .chrono-audio-clip { color: color-mix(in srgb, var(--danger) 70%, var(--text-soft)); }
.chrono-audio-clip__edit {
  position: absolute;
  z-index: 3;
  top: 4px;
  right: 7px;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  opacity: 0.78;
  pointer-events: none;
}

.chrono-playhead {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  left: var(--chrono-track-label);
  width: 1px;
  background: var(--danger);
  pointer-events: none;
}

.chrono-playhead span { position: absolute; top: 0; left: 50%; width: 9px; height: 9px; border-radius: 1px 1px 50% 50%; background: var(--danger); transform: translateX(-50%); }

/* -------------------------------------------------------------------------
   Poster — deterministic clustered layout-atlas workspace
   ------------------------------------------------------------------------- */

.app-shell[data-mode="poster"] {
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
}

.app-shell[data-mode="poster"] > .workspace,
.app-shell[data-mode="poster"] > .performance-hud,
.app-shell[data-mode="poster"] .header-graph-toolbar {
  display: none;
}

.app-shell[data-mode="poster"] #open-import-button,
.app-shell[data-mode="poster"] #export-button,
.app-shell[data-mode="poster"] #view-only-button,
.app-shell[data-mode="poster"] #inspector-toggle-button,
.app-shell[data-mode="poster"] #mobile-sidebar-button {
  display: none;
}

.poster-workspace {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  grid-template-columns: var(--workspace-left-panel-width) minmax(320px, 1fr);
  background:
    radial-gradient(circle at 74% 18%, rgba(238, 83, 166, .07), transparent 32%),
    radial-gradient(circle at 56% 82%, rgba(62, 213, 214, .055), transparent 38%),
    var(--app-bg);
}

.poster-workspace[hidden] { display: none !important; }

.poster-settings {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  box-shadow: 16px 0 42px rgba(0,0,0,.12);
}

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

.poster-panel-heading {
  padding: 18px 18px 7px;
}

.poster-panel-heading h2 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 24px;
  letter-spacing: -.025em;
}

.poster-intro {
  margin: 0;
  padding: 0 18px 14px;
  border-bottom: 1px solid var(--line-dim);
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.55;
}

.poster-settings-scroll {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  padding: 14px 17px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.poster-group { margin-bottom: 14px; }
.poster-group textarea { resize: vertical; }

.poster-export-actions {
  flex: 0 0 auto;
  padding: 13px 16px 16px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
}

.poster-export-status {
  min-height: 18px;
  margin-bottom: 8px;
  overflow: hidden;
  color: var(--text-faint);
  font: 9px var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poster-export-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.poster-export-row .button { flex: 1 1 0; }
.poster-cancel-export { grid-column: 1 / -1; }

.settings-runtime {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-tint);
}

.settings-runtime h3,
.settings-runtime p { margin: 0; }
.settings-runtime > div > p { margin-top: 5px; color: var(--text-dim); }
.settings-runtime__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-runtime__meta { color: var(--text-dim); font: 11px var(--font-mono); }
.settings-runtime__meta a { color: var(--accent-bright); }

.poster-stage-column {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 18px 22px 16px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
}

.poster-stage-heading {
  min-width: 0;
  padding: 0 2px;
}

.poster-stage-heading > div { display: grid; min-width: 0; gap: 4px; }
.poster-stage-heading strong { overflow: hidden; color: var(--text-soft); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }

.poster-stage-surface {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.018) 75%),
    linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.018) 75%),
    #050708;
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  box-shadow: inset 0 0 60px rgba(0,0,0,.34);
}

.poster-preview-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  outline: 0;
  background: #e9e5dd;
  box-shadow: 0 22px 70px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.16);
}

.poster-preview-stage::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 2px solid rgba(250,252,251,.72);
  box-shadow: inset 0 0 0 1px rgba(7,10,13,.52);
  pointer-events: none;
  content: "";
}

.poster-preview-stage:focus-visible::after {
  border-color: color-mix(in srgb, #ef55a5 70%, white);
  box-shadow: inset 0 0 0 1px rgba(7,10,13,.52), 0 0 0 3px rgba(239,85,165,.22);
}

#poster-preview-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.poster-preview-empty {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  background: #0b1015;
  color: #a8b3b6;
  text-align: center;
}

.poster-preview-empty[hidden] { display: none; }
.poster-preview-empty svg { width: 52px; height: 52px; fill: none; stroke: #ef55a5; stroke-width: 1.25; }

.poster-preview-chip {
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, #ef55a5 32%, var(--line-dim));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  color: var(--text-soft);
  font: 8px var(--font-mono);
}

.poster-stage-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--text-faint);
  font-size: 9px;
}

.poster-stage-meta span {
  padding: 5px 8px;
  border: 1px solid var(--line-dim);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.poster-stage-meta b { color: var(--text-soft); font-family: var(--font-mono); }

@media (max-width: 1040px) {
  .poster-workspace { grid-template-columns: var(--workspace-left-panel-width) minmax(280px, 1fr); }
  .poster-stage-column { padding: 14px; }
}

@media (max-width: 760px) {
  .poster-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(320px, 1fr) minmax(230px, 42vh); }
  .poster-settings { grid-row: 2; border-top: 1px solid var(--line); border-right: 0; }
  .poster-panel-heading,
  .poster-intro { display: none; }
  .poster-settings-scroll { padding-top: 10px; }
  .poster-stage-column { grid-row: 1; }
  .app-shell[data-mode="poster"] .project-identity { display: none; }
}

/* -------------------------------------------------------------------------
   Animation — camera + caption social video/GIF/APNG cycle workspace
   ------------------------------------------------------------------------- */

.app-shell[data-mode="animation"] {
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
}

.app-shell[data-mode="animation"] > .workspace,
.app-shell[data-mode="animation"] > .performance-hud,
.app-shell[data-mode="animation"] .header-graph-toolbar {
  display: none;
}

.app-shell[data-mode="animation"] #open-import-button,
.app-shell[data-mode="animation"] #export-button,
.app-shell[data-mode="animation"] #view-only-button,
.app-shell[data-mode="animation"] #inspector-toggle-button,
.app-shell[data-mode="animation"] #mobile-sidebar-button {
  display: none;
}

.animation-workspace {
  --animation-left-width: min(370px, var(--workspace-left-panel-width));
  --animation-right-width: 360px;
  --animation-timeline-height: 164px;
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: var(--animation-left-width) minmax(300px, 1fr) var(--animation-right-width);
  grid-template-rows: minmax(300px, 1fr) var(--animation-timeline-height);
  overflow: hidden;
  background:
    radial-gradient(circle at 66% 16%, color-mix(in srgb, var(--mint) 6%, transparent), transparent 35%),
    #080b0c;
}

.animation-workspace[hidden] { display: none !important; }

.animation-settings,
.animation-inspector {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: color-mix(in srgb, var(--surface-0) 98%, black 2%);
  color: var(--text-soft);
}

.animation-settings { border-right: 1px solid var(--line); }
.animation-inspector { border-left: 1px solid var(--line); }

.animation-panel-heading,
.animation-stage-heading,
.animation-timeline-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.animation-panel-heading { padding: 17px 17px 8px; }
.animation-panel-heading h2 { margin: 3px 0 0; color: var(--text); font-size: 23px; line-height: 1; }
.animation-intro { margin: 0; padding: 4px 17px 14px; border-bottom: 1px solid var(--line-dim); color: var(--text-dim); font-size: 11px; line-height: 1.55; }

.animation-settings-scroll,
.animation-inspector-scroll {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.animation-settings-scroll { padding: 3px 15px 16px; }
.animation-inspector-scroll { padding: 15px 17px 22px; }

.animation-track-tabs {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}

.animation-track-tabs .chrono-track-tab.is-active {
  border-bottom-color: var(--mint);
  color: var(--mint-bright);
}

.animation-motion-help {
  margin-top: 7px;
  padding: 8px 9px;
  border-left: 2px solid color-mix(in srgb, var(--mint) 58%, transparent);
  border-radius: 0 6px 6px 0;
  background: var(--mint-wash);
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.45;
}

.animation-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line-dim);
  border-radius: 8px;
  background: var(--line-dim);
}

.animation-summary span {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 8px;
  background: var(--surface-1);
  color: var(--text-faint);
  font-size: 8px;
  text-align: center;
}

.animation-summary b { overflow: hidden; color: var(--text-soft); font: 650 9px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }

.animation-budget-status {
  margin: 8px 1px 0;
  color: var(--mint-bright);
  font-size: 9px;
  line-height: 1.45;
}

.animation-budget-status[data-state="warning"] { color: var(--danger); }
.animation-budget-status[data-state="caution"] { color: var(--accent-bright); }

.animation-export-actions {
  display: grid;
  flex: 0 0 auto;
  gap: 8px;
  padding: 12px 15px 15px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-0) 96%, black 4%);
}

.animation-export-status { min-height: 17px; overflow: hidden; color: var(--text-faint); font: 9px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.animation-export-button { width: 100%; min-height: 40px; }
.animation-document-actions { display: flex; align-items: center; justify-content: center; gap: 16px; }
.animation-document-actions .text-button { font-size: 9px; }
.animation-document-actions input { display: none; }

.animation-stage-column {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 16px 20px 12px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 11px;
}

.animation-stage-heading > div { display: grid; min-width: 0; gap: 4px; }
.animation-stage-heading strong { overflow: hidden; color: var(--text-soft); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.animation-stage-heading .micro-badge[data-state="warning"] { border-color: color-mix(in srgb, var(--danger) 32%, var(--line)); color: var(--danger); }

.animation-stage-surface {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-dim);
  border-radius: 16px;
  background:
    linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.018) 75%),
    linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.018) 75%),
    #050708;
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  box-shadow: inset 0 0 54px rgba(0,0,0,.28);
}

.animation-preview-stage { width: auto; height: auto; }
.animation-preview-stage:focus-visible::after { border-color: color-mix(in srgb, var(--mint-bright) 74%, white); box-shadow: inset 0 0 0 1px rgba(4,8,10,.72), 0 0 0 3px color-mix(in srgb, var(--mint) 22%, transparent); }
.animation-preview-stage > canvas,
.animation-render-sources { position: absolute; inset: 0; width: 100%; height: 100%; }
#animation-preview-canvas { display: block; }
.animation-render-sources { visibility: hidden; pointer-events: none; }
.animation-render-sources canvas { display: block; width: 100%; height: 100%; }
.animation-preview-stage .chrono-preview-chip { right: 10px; }

.animation-stage-tip {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--text-faint);
  font-size: 9px;
  line-height: 1.4;
  text-align: center;
}

.animation-stage-tip svg { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: var(--mint); stroke-width: 1.6; }

.animation-timeline {
  --animation-track-label-width: 112px;
  --animation-track-inset: 12px;
  --animation-scrubber-thumb-size: 13px;
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-column: 1 / -1;
  grid-template-rows: 48px 30px 32px 32px;
  border-top: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface-0) 98%, black 2%);
  box-shadow: 0 -10px 34px rgba(0,0,0,.18);
}

.animation-timeline-heading { min-width: 0; padding: 5px 10px; overflow: hidden; border-bottom: 1px solid var(--line-dim); background: var(--toolbar-surface); }
.animation-timeline-tools { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 7px; }
.animation-timeline-tools .button { min-height: 32px; padding: 6px 9px; }
.animation-timeline-tools svg { width: 15px; height: 15px; }
.animation-mobile-toggle { display: none; }

/* Native range thumbs travel within the input's edges by half a thumb width.
   Extend the input by that amount so its centres share the tracks' time axis. */
.animation-scrubber-wrap {
  display: grid;
  align-items: center;
  padding-block: 2px;
  padding-inline: calc(var(--animation-track-label-width) + var(--animation-track-inset) - var(--animation-scrubber-thumb-size) / 2) calc(var(--animation-track-inset) - var(--animation-scrubber-thumb-size) / 2);
  border-bottom: 1px solid var(--line-dim);
}
.animation-scrubber-wrap input { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; accent-color: var(--mint); }
.animation-scrubber-wrap input::-webkit-slider-thumb { box-sizing: border-box; width: var(--animation-scrubber-thumb-size); height: var(--animation-scrubber-thumb-size); }
.animation-scrubber-wrap input::-moz-range-thumb { box-sizing: border-box; width: var(--animation-scrubber-thumb-size); height: var(--animation-scrubber-thumb-size); }
.animation-track-row { display: grid; min-width: 0; grid-template-columns: var(--animation-track-label-width) minmax(0, 1fr); border-bottom: 1px solid var(--line-dim); }
.animation-track-row > span { display: flex; align-items: center; gap: 7px; padding: 0 12px; border-right: 1px solid var(--line); background: var(--surface-1); color: var(--text-dim); font-size: 10px; font-weight: 650; }
.animation-track-row > span svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.animation-track-content { position: relative; min-width: 0; margin-inline: var(--animation-track-inset); }

.animation-key-point {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.42);
  background: var(--mint);
  box-shadow: 0 0 0 2px rgba(0,0,0,.42);
  transform: translate(-50%, -50%) rotate(45deg);
}

.animation-key-point[aria-current="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 30%, transparent), 0 0 12px color-mix(in srgb, var(--mint) 42%, transparent); }
.animation-key-point[data-endpoint="true"] { border-radius: 2px; }

.animation-caption-clip {
  position: absolute;
  top: 4px;
  height: 23px;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: var(--mint-wash);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint) 34%, transparent);
  color: var(--mint-bright);
  font-size: 9px;
  line-height: 16px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.animation-caption-clip > span { display: block; overflow: hidden; padding: 2px 8px; text-overflow: ellipsis; }
.animation-caption-clip[aria-current="true"] { background: color-mix(in srgb, var(--mint) 19%, transparent); box-shadow: inset 0 0 0 1px var(--mint), inset 0 0 10px color-mix(in srgb, var(--mint) 8%, transparent); }
.animation-playhead-track { position: absolute; z-index: 5; grid-row: 3 / 5; inset-block: 0; inset-inline: calc(var(--animation-track-label-width) + var(--animation-track-inset)) var(--animation-track-inset); pointer-events: none; }
.animation-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--danger); transform: translateX(-50%); }
.animation-playhead::before { position: absolute; top: -3px; left: 50%; width: 8px; height: 8px; border-radius: 1px 1px 50% 50%; background: var(--danger); content: ""; transform: translateX(-50%); }

.animation-workspace[aria-busy="true"] .animation-preview-stage { cursor: progress; }

@media (max-width: 1240px) {
  .animation-workspace { --animation-left-width: 340px; --animation-right-width: 320px; }
  .animation-summary { grid-template-columns: 1fr; }
  .animation-summary span { display: flex; justify-content: space-between; }
  .animation-timeline-tools .button { width: 34px; padding: 0; }
  .animation-timeline-tools .button span { display: none; }
}

@media (max-width: 900px) {
  .animation-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(300px, 1fr) var(--animation-timeline-height); }
  .animation-stage-column { grid-column: 1; grid-row: 1; }
  .animation-timeline { grid-column: 1; grid-row: 2; }
  .animation-settings,
  .animation-inspector { display: none; }
  .animation-mobile-toggle { display: inline-flex; }
  .animation-workspace:not([data-mobile-panel="none"])::before { position: absolute; z-index: 18; inset: 0; background: rgba(1,3,3,.55); content: ""; backdrop-filter: blur(2px); }
  .animation-workspace[data-mobile-panel="settings"] .animation-settings,
  .animation-workspace[data-mobile-panel="inspector"] .animation-inspector { position: absolute; z-index: 19; top: 0; bottom: var(--animation-timeline-height); display: flex; width: min(390px, calc(100% - 28px)); box-shadow: var(--shadow-lg); }
  .animation-workspace[data-mobile-panel="settings"] .animation-settings { left: 0; }
  .animation-workspace[data-mobile-panel="inspector"] .animation-inspector { right: 0; }
  .app-shell[data-mode="animation"] .project-identity { display: none; }
}

@media (max-width: 620px) {
  .animation-stage-column { padding: 10px; }
  .animation-stage-heading { display: none; }
  .animation-stage-tip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #animation-total-time { display: none; }
}

@media (max-width: 1240px) {
  .chrono-workspace { --chrono-right-width: 330px; }
  .chrono-timeline-tools .button--quiet { width: 34px; padding: 0; }
  .chrono-timeline-tools .button--quiet span { display: none; }
  .chrono-timeline-tools .button--auto-camera { width: 34px; padding: 0; }
  .chrono-timeline-tools .button--auto-camera span { display: none; }
  .chrono-timeline-tools .micro-badge { display: none; }
  .chrono-summary { grid-template-columns: 1fr; }
  .chrono-summary span { display: flex; justify-content: space-between; }
}

@media (max-width: 900px) {
  .chrono-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(320px, 1fr) var(--chrono-timeline-height);
  }
  .chrono-settings,
  .chrono-inspector { display: none; }
  .chrono-right-panel-toggle { display: none; }
  .chrono-preview-chip { right: 12px; }
  .chrono-mobile-toggle { display: inline-flex; flex: 0 0 auto; }
  .chrono-workspace:not([data-mobile-panel="none"])::before {
    position: absolute;
    z-index: 18;
    inset: 48px 0 var(--chrono-timeline-height);
    background: rgba(2, 4, 4, 0.66);
    backdrop-filter: blur(3px);
    content: "";
  }
  .chrono-workspace[data-mobile-panel="settings"] .chrono-settings,
  .chrono-workspace[data-mobile-panel="inspector"] .chrono-inspector {
    position: absolute;
    z-index: 19;
    top: 48px;
    bottom: var(--chrono-timeline-height);
    display: flex;
    width: min(390px, calc(100% - 32px));
    box-shadow: var(--shadow-lg);
  }
  .chrono-workspace[data-mobile-panel="settings"] .chrono-settings { left: 0; }
  .chrono-workspace[data-mobile-panel="inspector"] .chrono-inspector { right: 0; }
  .chrono-stage-column { grid-column: 1; grid-row: 1; }
  .chrono-timeline { grid-column: 1; grid-row: 2; }
  .app-shell[data-mode="chrono"] .project-identity { display: none; }
}

@media (max-width: 680px) {
  .chrono-timeline-context { justify-content: flex-start; }
  .chrono-timeline-context > span { display: none; }
  .chrono-timecode i,
  #chrono-total-time { display: none; }
  .chrono-timeline-tools .button--quiet { display: none; }
  .chrono-timeline-zoom input { width: 64px; }
}

/* Guided visual tour ------------------------------------------------------ */

.tour-launch {
  border-color: color-mix(in srgb, var(--mint) 34%, var(--line));
  background:
    radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--mint) 22%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface-2) 72%, transparent);
  color: var(--mint-bright);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045), 0 0 18px color-mix(in srgb, var(--mint) 9%, transparent);
}

.tour-launch[data-new="true"]::after {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--surface-0);
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 11px var(--accent);
  content: "";
}

.visual-tour {
  --tour-accent: var(--mint);
  --tour-accent-bright: var(--mint-bright);
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  isolation: isolate;
  color: var(--text);
  font-family: var(--font-sans);
  pointer-events: none;
}

.visual-tour[data-phase="shape"] {
  --tour-accent: var(--accent);
  --tour-accent-bright: var(--accent-bright);
}

.visual-tour[data-phase="understand"] {
  --tour-accent: var(--blue);
  --tour-accent-bright: color-mix(in srgb, var(--blue) 72%, white);
}

.visual-tour[data-phase="create"] {
  --tour-accent: #b783ff;
  --tour-accent-bright: #d4b4ff;
}

.visual-tour[hidden] {
  display: none !important;
}

.visual-tour__blocker {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: transparent;
  cursor: default;
  pointer-events: auto;
  transition: background-color 180ms ease, backdrop-filter 180ms ease;
}

.visual-tour[data-target="none"] .visual-tour__blocker {
  background:
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--tour-accent) 8%, transparent), transparent 34%),
    color-mix(in srgb, var(--modal-backdrop) 88%, transparent);
  backdrop-filter: blur(4px) saturate(0.72);
}

.visual-tour__spotlight {
  position: fixed;
  z-index: 1;
  min-width: 1px;
  min-height: 1px;
  border: 1px solid color-mix(in srgb, var(--tour-accent-bright) 74%, white 10%);
  border-radius: 14px;
  background: transparent;
  box-shadow:
    0 0 0 9999px rgba(1, 4, 5, 0.72),
    0 0 0 4px color-mix(in srgb, var(--tour-accent) 12%, transparent),
    0 0 38px color-mix(in srgb, var(--tour-accent) 28%, transparent),
    inset 0 0 28px color-mix(in srgb, var(--tour-accent) 7%, transparent);
  pointer-events: none;
  transition:
    left 250ms var(--ease),
    top 250ms var(--ease),
    width 250ms var(--ease),
    height 250ms var(--ease),
    border-radius 250ms var(--ease);
}

.visual-tour__spotlight::after {
  position: absolute;
  inset: -7px;
  border: 1px solid color-mix(in srgb, var(--tour-accent-bright) 30%, transparent);
  border-radius: 19px;
  content: "";
  opacity: 0.72;
  animation: tour-spotlight-pulse 2.4s ease-in-out infinite;
}

.visual-tour__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--tour-accent-bright);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tour-accent) 45%, transparent));
}

.visual-tour__corner--1 { top: -3px; left: -3px; border-top: 2px solid; border-left: 2px solid; border-radius: 7px 0 0; }
.visual-tour__corner--2 { top: -3px; right: -3px; border-top: 2px solid; border-right: 2px solid; border-radius: 0 7px 0 0; }
.visual-tour__corner--3 { right: -3px; bottom: -3px; border-right: 2px solid; border-bottom: 2px solid; border-radius: 0 0 7px; }
.visual-tour__corner--4 { bottom: -3px; left: -3px; border-bottom: 2px solid; border-left: 2px solid; border-radius: 0 0 0 7px; }

.visual-tour__connector {
  position: fixed;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.visual-tour__connector path {
  fill: none;
  stroke: color-mix(in srgb, var(--tour-accent-bright) 76%, transparent);
  stroke-dasharray: 4 6;
  stroke-linecap: round;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tour-accent) 40%, transparent));
}

.visual-tour__card {
  position: fixed;
  z-index: 3;
  display: flex;
  width: min(400px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--tour-accent) 32%, var(--line-strong));
  border-radius: 18px;
  outline: 0;
  overflow: hidden;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--tour-accent) 8%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 98%, transparent), color-mix(in srgb, var(--surface-0) 98%, transparent));
  color: var(--text);
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.58),
    0 4px 16px rgba(0, 0, 0, 0.38),
    inset 0 1px rgba(255, 255, 255, 0.055);
  pointer-events: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  transition: left 250ms var(--ease), top 250ms var(--ease), transform 180ms var(--ease);
}

.visual-tour__card::before {
  height: 3px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--accent), var(--tour-accent-bright), var(--blue));
  content: "";
  opacity: 0.92;
}

.visual-tour__card[data-nudge="true"] {
  animation: tour-card-nudge 250ms var(--ease);
}

.visual-tour__top {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 14px 15px 5px;
}

.visual-tour__emblem {
  position: relative;
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 12px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 66%),
    var(--accent-wash);
  color: var(--accent-bright);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 0 20px color-mix(in srgb, var(--accent) 10%, transparent);
}

.visual-tour__emblem::after {
  position: absolute;
  inset: -5px;
  border: 1px dashed color-mix(in srgb, var(--mint) 30%, transparent);
  border-radius: 15px;
  content: "";
  animation: tour-orbit 9s linear infinite;
}

.visual-tour__emblem svg,
.visual-tour__tip svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.visual-tour__identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.visual-tour__identity strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.12em;
}

.visual-tour__identity span {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 620;
}

.visual-tour__close {
  border-color: transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: 22px;
  font-weight: 350;
}

.visual-tour__copy {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 12px 18px 5px;
}

.visual-tour__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--tour-accent-bright);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

#visual-tour-counter {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 620;
  letter-spacing: 0.04em;
}

.visual-tour__copy h2 {
  margin: 8px 0 0;
  color: var(--text);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.visual-tour__copy > p {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.58;
}

.visual-tour__tip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin-top: 13px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line-dim));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-wash) 72%, transparent);
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.46;
}

.visual-tour__tip[hidden] { display: none; }

.visual-tour__tip svg {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--accent-bright);
}

.visual-tour__demo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  padding: 9px 9px 9px 11px;
  border: 1px solid color-mix(in srgb, var(--tour-accent) 28%, var(--line-dim));
  border-radius: 11px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--tour-accent) 11%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface-3) 66%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.visual-tour__demo[hidden] { display: none; }

.visual-tour__demo-pulse {
  width: 9px;
  height: 9px;
  border: 2px solid color-mix(in srgb, var(--tour-accent-bright) 78%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--tour-accent) 38%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tour-accent) 8%, transparent);
}

.visual-tour__demo[data-state="running"] .visual-tour__demo-pulse {
  background: var(--tour-accent-bright);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tour-accent) 13%, transparent), 0 0 16px var(--tour-accent);
  animation: tour-demo-pulse 900ms ease-in-out infinite;
}

.visual-tour__demo[data-state="complete"] .visual-tour__demo-pulse {
  border-color: var(--mint-bright);
  background: var(--mint);
  box-shadow: 0 0 12px color-mix(in srgb, var(--mint) 48%, transparent);
}

.visual-tour__demo[data-state="error"] .visual-tour__demo-pulse {
  border-color: var(--danger);
  background: var(--danger);
}

.visual-tour__demo-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.visual-tour__demo-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visual-tour__demo-copy span {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visual-tour__demo-button {
  min-height: 30px;
  padding-inline: 10px;
  border-color: color-mix(in srgb, var(--tour-accent) 34%, var(--line));
  color: var(--tour-accent-bright);
  font-size: 10px;
  white-space: nowrap;
}

.visual-tour__progress {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  flex: 0 0 auto;
  align-items: center;
  gap: 0 5px;
  padding: 4px 18px;
}

.visual-tour__progress-step {
  position: relative;
  width: auto;
  min-width: 0;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.visual-tour__progress-step::before {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--line-strong);
  content: "";
}

.visual-tour__progress-step[data-complete="true"]::before {
  background: color-mix(in srgb, var(--mint) 55%, var(--line));
}

.visual-tour__progress-step[aria-current="step"]::before {
  background: linear-gradient(90deg, var(--tour-accent), var(--tour-accent-bright));
  box-shadow: 0 0 12px color-mix(in srgb, var(--tour-accent) 28%, transparent);
}

.visual-tour__progress-step:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.visual-tour__controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 18px 9px;
}

.visual-tour__controls .button {
  min-width: 92px;
}

.visual-tour__back:disabled {
  cursor: default;
  opacity: 0.35;
}

.visual-tour__shortcuts {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 18px 13px;
  border-top: 1px solid var(--line-dim);
  color: var(--text-faint);
  font-size: 9px;
  text-align: center;
}

.visual-tour__shortcuts kbd {
  min-width: 18px;
  margin: 0 2px;
  padding: 2px 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface-3) 62%, transparent);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 8px;
}

@keyframes tour-spotlight-pulse {
  0%, 100% { opacity: 0.46; transform: scale(0.998); }
  50% { opacity: 0.92; transform: scale(1.006); }
}

@keyframes tour-orbit {
  to { transform: rotate(360deg); }
}

@keyframes tour-card-nudge {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-4px); }
  70% { transform: translateX(3px); }
}

@keyframes tour-demo-pulse {
  0%, 100% { transform: scale(0.82); opacity: 0.68; }
  50% { transform: scale(1.12); opacity: 1; }
}

@media (max-width: 620px) {
  .visual-tour__card {
    border-radius: 15px;
  }

  .visual-tour__connector { display: none; }
  .visual-tour__copy h2 { font-size: 21px; }
  .visual-tour__copy > p { font-size: 12px; }
  .visual-tour__demo-button { padding-inline: 8px; }
  .visual-tour__shortcuts { display: none; }
  .visual-tour__controls { padding-bottom: 14px; }
}

.modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  box-sizing: border-box;
  margin: 0;
  padding: 15px;
  border: 0;
  outline: 0;
  overflow: hidden;
  background: transparent;
  color: var(--text);
}

.modal::backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(7px) saturate(0.8);
}

.modal[open] {
  display: grid;
  place-items: center;
}

.modal[open] .modal-card {
  animation: modal-enter 180ms var(--ease);
}

.modal-card {
  display: flex;
  width: min(560px, calc(100vw - 30px));
  max-height: min(760px, calc(100dvh - 30px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--modal-surface);
  box-shadow: var(--shadow-lg), inset 0 1px rgba(255, 255, 255, 0.035);
}

.modal-card--wide {
  width: min(780px, calc(100vw - 30px));
}

.modal-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 21px 17px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(115deg, rgba(75, 222, 143, 0.055), transparent 42%);
}

.modal-header h2 {
  margin-top: 5px;
  color: var(--text);
  font-size: 19px;
  font-weight: 630;
  letter-spacing: -0.025em;
}

.modal-header p {
  margin-top: 7px;
  color: var(--text-dim);
  font-size: 9px;
  line-height: 1.45;
}

.modal-header .icon-button {
  width: 31px;
  height: 31px;
  border-color: transparent;
  background: transparent;
}

.modal-body {
  width: 100%;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 19px 21px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.modal-body > *,
.chrono-track-panel > *,
.chrono-group > * {
  min-width: 0;
  max-width: 100%;
}

/* `scrollbar-gutter` prevents controls from being reflowed when a form first
   becomes scrollable. Older engines do not expose that primitive; keeping a
   permanent vertical rail there is preferable to moving or clipping inputs. */
@supports not (scrollbar-gutter: stable) {
  .control-panels,
  .analytics-scroll,
  .inspector-content,
  .chrono-settings-scroll,
  .chrono-inspector-scroll,
  .modal-body {
    overflow-y: scroll;
  }
}

.import-mode-fieldset {
  margin-bottom: 14px;
}

.import-mode-switch label {
  min-height: 48px;
}

.import-file-panel {
  animation: import-panel-enter 150ms var(--ease);
}

@keyframes import-panel-enter {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.file-drop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.file-drop {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 102px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px dashed rgba(231, 237, 232, 0.2);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.018);
  transition: 150ms ease;
}

.file-drop--single {
  min-height: 116px;
}

.file-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.file-drop:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.file-drop[data-dragging="true"] {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: 0 0 0 3px rgba(75, 222, 143, 0.06);
}

.file-drop[data-state="ready"] {
  border-style: solid;
  border-color: rgba(114, 214, 180, 0.34);
  background: var(--mint-wash);
}

.file-drop__icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(75, 222, 143, 0.23);
  border-radius: 9px;
  background: var(--accent-wash);
  color: var(--accent-bright);
}

.file-drop__icon--link {
  border-color: rgba(114, 214, 180, 0.24);
  background: var(--mint-wash);
  color: var(--mint-bright);
}

.file-drop__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.file-drop__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.file-drop__copy strong {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 650;
}

.file-drop__copy > span {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-drop__copy small {
  color: var(--text-faint);
  font-size: 8px;
}

.file-drop__action {
  color: var(--accent-bright);
  font-size: 9px;
  font-weight: 700;
}

.format-support {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
  color: var(--text-faint);
  font-size: 8px;
}

.format-support > span:not(.micro-badge) {
  padding: 3px 6px;
  border: 1px solid var(--line-dim);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.015);
}

/* Import is a primary workflow, so it deliberately uses the more readable
   Settings/About type scale instead of the dense expert-control scale. */
#import-modal .modal-header h2 { font-size: 22px; }
#import-modal .modal-header p { font-size: 12px; line-height: 1.55; }
#import-modal .import-mode-switch label span { font-size: 14px; }
#import-modal .import-mode-switch label small { font-size: 11px; }
#import-modal .file-drop__copy strong { font-size: 14px; }
#import-modal .file-drop__copy > span { font-size: 12px; }
#import-modal .file-drop__copy small { font-size: 10px; line-height: 1.45; }
#import-modal .file-drop__action { font-size: 12px; }
#import-modal .format-support { font-size: 10px; }
#import-modal .modal-section-heading h3,
#import-modal .import-validation h3 { font-size: 15px; }
#import-modal .modal-section-heading p { font-size: 11px; line-height: 1.5; }
#import-modal .mapping-grid label > span:first-child { font-size: 12px; }
#import-modal .mapping-grid select { font-size: 12px; }
#import-modal .import-status { font-size: 11px; line-height: 1.45; }

.csv-template-guide {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-1) 76%, transparent);
  overflow: clip;
}

.csv-template-guide > summary {
  display: grid;
  min-height: 58px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  color: var(--text-soft);
  cursor: pointer;
  list-style: none;
}

.csv-template-guide > summary::-webkit-details-marker { display: none; }

.csv-template-guide > summary:hover {
  background: var(--surface-hover);
}

.csv-template-guide > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -3px;
}

.csv-template-guide__icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--mint) 34%, transparent);
  border-radius: 9px;
  background: var(--mint-wash);
  color: var(--mint-bright);
}

.csv-template-guide__icon svg,
.csv-template-guide__content a svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.csv-template-guide__summary {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.csv-template-guide__summary strong { font-size: 13px; }
.csv-template-guide__summary small { color: var(--text-dim); font-size: 10px; line-height: 1.4; }

.csv-template-guide__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-bright);
  font-size: 11px;
  font-weight: 720;
}

.csv-template-guide__action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform 150ms var(--ease);
}

.csv-template-guide[open] .csv-template-guide__action svg { transform: rotate(180deg); }

.csv-template-guide__content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 13px 8px;
  border-top: 1px solid var(--line-dim);
}

.csv-template-guide__content article {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line-dim);
  border-radius: 9px;
  background: var(--field-surface);
}

.csv-template-guide__content article > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.csv-template-guide__content article > div strong { color: var(--text); font-size: 12px; }
.csv-template-guide__content article > div span { color: var(--text-faint); font-size: 9px; }

.csv-template-guide pre {
  margin: 9px 0;
  padding: 9px;
  overflow-x: auto;
  border: 1px solid var(--line-dim);
  border-radius: 6px;
  background: var(--input-surface);
  color: var(--text-soft);
  font: 10px/1.55 var(--font-mono);
  white-space: pre;
}

.csv-template-guide__content a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 680;
}

.csv-template-guide > p {
  padding: 2px 13px 13px;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.5;
}

.csv-template-guide > p strong { color: var(--text-soft); }
.csv-template-guide code { font: 0.95em var(--font-mono); }

.mapping-section,
.import-validation {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dim);
}

.modal-section-heading {
  align-items: flex-start;
  margin-bottom: 13px;
}

.modal-section-heading h3,
.import-validation h3,
.help-body h3 {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 680;
}

.modal-section-heading p {
  margin-top: 4px;
  color: var(--text-faint);
  font-size: 8px;
  line-height: 1.4;
}

.mapping-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.mapping-grid label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.mapping-grid abbr {
  margin-left: 4px;
  color: var(--accent);
  font-size: 7px;
  text-decoration: none;
  text-transform: uppercase;
}

.import-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.12);
  color: var(--text-dim);
  font-size: 9px;
}

.import-status[data-state="ready"] {
  border-color: rgba(114, 214, 180, 0.24);
  background: var(--mint-wash);
  color: var(--mint-bright);
}

.import-status[data-state="error"] {
  border-color: rgba(255, 127, 115, 0.25);
  background: var(--danger-wash);
  color: var(--danger);
}

.import-issues {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--danger);
  font-size: 9px;
  line-height: 1.5;
}

.import-issues:empty {
  display: none;
}

.modal-footer {
  display: flex;
  min-height: 62px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 21px;
  border-top: 1px solid var(--line);
  background: var(--modal-footer-surface);
}

.modal-footer__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-card {
  width: min(900px, calc(100vw - 30px));
}

/* Project restore points ------------------------------------------------- */

.snapshot-card {
  width: min(820px, calc(100vw - 30px));
}

.snapshot-body {
  display: grid;
  gap: 16px;
  align-content: start;
}

.snapshot-create {
  display: grid;
  grid-template-columns: 42px minmax(150px, 0.72fr) minmax(220px, 1.25fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 4% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 37%),
    var(--subpanel-surface);
}

.snapshot-create__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 12px;
  background: var(--accent-wash);
  color: var(--accent-bright);
}

.snapshot-create__icon svg,
.snapshot-empty svg,
.snapshot-item__marker svg,
.snapshot-item__preview > svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.snapshot-create label strong,
.snapshot-create label span {
  display: block;
}

.snapshot-create label strong {
  color: var(--text);
  font-size: 13px;
}

.snapshot-create label span {
  margin-top: 3px;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.4;
}

.snapshot-create input,
.snapshot-item__rename {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  outline: 0;
  background: var(--input-surface);
  color: var(--text);
}

.snapshot-create input:focus,
.snapshot-item__rename:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 13%, transparent);
}

.snapshot-storage-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-tint);
  color: var(--text-soft);
  font-size: 10px;
}

.snapshot-storage-strip small {
  color: var(--text-faint);
  font-size: 9px;
}

.snapshot-storage-strip:has([data-state="ready"]) .status-dot {
  background: var(--mint);
  box-shadow: 0 0 8px color-mix(in srgb, var(--mint) 32%, transparent);
}

.snapshot-storage-strip:has([data-state="warning"]) .status-dot {
  background: var(--accent);
}

.snapshot-library > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
}

.snapshot-library h3 {
  margin-top: 4px;
  color: var(--text);
  font-size: 16px;
}

.snapshot-list {
  display: grid;
  gap: 8px;
}

.snapshot-empty {
  display: grid;
  min-height: 158px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-1) 42%, transparent);
  color: var(--text-dim);
  text-align: center;
}

.snapshot-empty[hidden] { display: none; }

.snapshot-empty > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-soft);
}

.snapshot-empty strong { color: var(--text-soft); font-size: 12px; }
.snapshot-empty p { max-width: 410px; font-size: 10px; line-height: 1.55; }

.snapshot-item {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 88px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-1) 78%, transparent);
  transition: border-color 140ms ease, background-color 140ms ease;
}

.snapshot-item:hover {
  border-color: var(--line-strong);
  background: var(--surface-1);
}

.snapshot-item__marker {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--mint) 22%, var(--line));
  border-radius: 10px;
  background: var(--mint-wash);
  color: var(--mint-bright);
}

.snapshot-item__preview {
  position: relative;
  display: grid;
  width: 112px;
  height: 68px;
  overflow: hidden;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--mint) 22%, var(--line));
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--mint) 8%, transparent), transparent 72%),
    var(--input-surface);
  color: var(--mint-bright);
}

.snapshot-item__preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.snapshot-item__preview--fallback::after {
  position: absolute;
  right: 5px;
  bottom: 4px;
  color: var(--text-faint);
  content: 'No preview';
  font: 7px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.snapshot-item__content { min-width: 0; }
.snapshot-item__content h3 { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-item__content p { margin-top: 5px; color: var(--text-dim); font-size: 9px; line-height: 1.45; }

.snapshot-item__actions,
.snapshot-item__more,
.snapshot-item__rename-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.snapshot-item__more {
  grid-column: 2 / -1;
  justify-content: flex-end;
  padding-top: 7px;
  border-top: 1px solid var(--line-dim);
}

.snapshot-item__more[hidden] { display: none; }
.snapshot-item__menu svg { width: 17px; height: 17px; }
.snapshot-item__rename-actions { margin-top: 7px; }

.snapshot-item__confirmation {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border-left: 2px solid var(--accent);
  border-radius: 2px 7px 7px 2px;
  background: var(--accent-wash);
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.45;
}

.modal[data-busy="true"] .snapshot-item,
.modal[data-busy="true"] .snapshot-create {
  opacity: 0.66;
}

@media (max-width: 680px) {
  .snapshot-create {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .snapshot-create input,
  .snapshot-create .button {
    grid-column: 1 / -1;
  }

  .snapshot-storage-strip {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .snapshot-storage-strip small { grid-column: 2; }

  .snapshot-item {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .snapshot-item__preview { width: 88px; height: 56px; }

  .snapshot-item__actions,
  .snapshot-item__more {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

.settings-card .modal-header h2,
.help-card .modal-header h2 {
  font-size: 22px;
}

.settings-card .modal-header p,
.help-card .modal-header p {
  font-size: 12px;
  line-height: 1.55;
}

.settings-body fieldset > legend {
  margin-bottom: 12px;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 700;
}

.application-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.application-theme-grid input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.application-theme-grid label {
  display: grid;
  min-width: 0;
  min-height: 72px;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-1) 74%, transparent);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.application-theme-grid label > span:last-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.application-theme-grid strong {
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 700;
}

.application-theme-grid small {
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.35;
}

.application-theme-grid input:checked + label {
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  background: var(--accent-wash);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045);
}

.application-theme-grid input:focus-visible + label {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.application-theme-preview {
  display: grid;
  width: 76px;
  height: 48px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  overflow: hidden;
  border: 1px solid rgba(128, 140, 134, 0.35);
  border-radius: 7px;
  background: var(--preview-base);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.application-theme-preview i:first-child {
  grid-row: 1 / -1;
  background: var(--preview-panel);
}

.application-theme-preview i:nth-child(2) {
  background: var(--preview-base);
}

.application-theme-preview i:nth-child(3) {
  margin: 8px 10px;
  border-radius: 999px;
  background: var(--preview-accent);
}

.application-theme-preview--graphite { --preview-base: #0d1011; --preview-panel: #1a1f20; --preview-accent: #4bde8f; }
.application-theme-preview--light { --preview-base: #f5f7f4; --preview-panel: #fff; --preview-accent: #147a4c; }
.application-theme-preview--midnight { --preview-base: #070b14; --preview-panel: #111a29; --preview-accent: #50d996; }
.application-theme-preview--slate { --preview-base: #0b1118; --preview-panel: #17212b; --preview-accent: #4bd58d; }
.application-theme-preview--contrast { --preview-base: #000; --preview-panel: #121212; --preview-accent: #75ff9f; }

.settings-note {
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 2px solid color-mix(in srgb, var(--mint) 55%, transparent);
  background: var(--mint-wash);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.6;
}

.settings-video-options {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(280px, 1.3fr);
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-1) 84%, transparent);
}

.settings-video-options h3 {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 720;
}

.settings-video-options > div > p {
  margin-top: 4px;
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1.45;
}

.settings-video-options .switch-row {
  margin: 0;
  border: 1px solid var(--line-dim);
  border-radius: 8px;
  background: color-mix(in srgb, var(--field-surface) 80%, transparent);
}

.settings-state-export {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--mint) 25%, var(--line));
  border-radius: 11px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--mint) 10%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-1) 82%, transparent);
}

.settings-state-export__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--mint) 36%, var(--line));
  border-radius: 10px;
  background: var(--mint-wash);
  color: var(--mint-bright);
}

.settings-state-export__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.settings-state-export h3 {
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 720;
}

.settings-state-export p {
  margin-top: 5px;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.42;
}

.settings-state-export small {
  display: block;
  margin-top: 5px;
  color: var(--text-faint);
  font-size: 9px;
  line-height: 1.4;
}

/* Soundtrack editor ------------------------------------------------------ */

.soundtrack-editor-card {
  width: min(920px, calc(100vw - 32px));
}

.soundtrack-editor-header p { max-width: 690px; }

.soundtrack-editor-body {
  display: grid;
  gap: 16px;
  background:
    radial-gradient(circle at 88% 5%, color-mix(in srgb, #bd5a92 8%, transparent), transparent 32%),
    var(--surface-0);
}

.soundtrack-overview {
  display: grid;
  grid-template-columns: 48px minmax(160px, 1fr) minmax(360px, 1.8fr);
  align-items: center;
  gap: 14px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-1) 90%, transparent);
}

.soundtrack-overview__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid color-mix(in srgb, #e46ba9 38%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, #a73f78 13%, transparent);
  color: #f19ccb;
}

.soundtrack-overview__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.soundtrack-overview > div { display: grid; min-width: 0; gap: 4px; }
.soundtrack-overview > div strong { overflow: hidden; color: var(--text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.soundtrack-overview > div span { color: var(--text-faint); font-size: 10px; line-height: 1.4; }
.soundtrack-overview dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line-dim); border-radius: 8px; background: var(--line-dim); }
.soundtrack-overview dl > div { display: grid; gap: 3px; padding: 8px; background: var(--surface-1); }
.soundtrack-overview dt { color: var(--text-faint); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.soundtrack-overview dd { overflow: hidden; color: var(--text-soft); font: 650 10px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }

.soundtrack-visualizer {
  padding: 14px;
  border: 1px solid color-mix(in srgb, #bd5a92 22%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-1) 86%, transparent);
}
.soundtrack-visualizer > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.soundtrack-visualizer h3 { margin-top: 2px; color: var(--text); font-size: 15px; }
.soundtrack-live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--mint) 24%, var(--line)); border-radius: 999px; color: var(--mint-bright); font-size: 9px; font-weight: 720; }
.soundtrack-live-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 7px color-mix(in srgb, var(--mint) 54%, transparent); }
.soundtrack-waveform-frame { height: 210px; overflow: hidden; border: 1px solid var(--line-dim); border-radius: 8px; background: linear-gradient(180deg, rgba(4, 9, 13, .88), rgba(8, 14, 18, .92)); }
.soundtrack-waveform-frame canvas { display: block; width: 100%; height: 100%; }
.soundtrack-legend { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 8px; color: var(--text-faint); font-size: 9px; }
.soundtrack-legend span { display: inline-flex; align-items: center; gap: 5px; }
.soundtrack-legend i { width: 10px; height: 4px; border-radius: 99px; background: #72d6b4; }
.soundtrack-legend i[data-tone="trim"] { background: #263039; }
.soundtrack-legend i[data-tone="film"] { background: #bd5a92; }

.soundtrack-control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.soundtrack-control { margin: 0; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--surface-1) 86%, transparent); }
.soundtrack-control--wide { grid-column: 1 / -1; }
.soundtrack-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line-dim); border-radius: 9px; background: var(--line-dim); }
.soundtrack-readout > div { display: grid; gap: 4px; padding: 10px 12px; background: var(--surface-1); }
.soundtrack-readout span { color: var(--text-faint); font-size: 9px; }
.soundtrack-readout strong { color: var(--text-soft); font: 650 10px var(--font-mono); }
.soundtrack-editor-footer { align-items: center; }
.soundtrack-editor-actions { display: flex; align-items: center; gap: 12px; }
.soundtrack-editor-actions .text-button--danger { color: color-mix(in srgb, var(--danger) 82%, white); }

.settings-state-export__action {
  min-width: 132px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--mint) 32%, var(--line));
  border-radius: 8px;
  background: var(--mint-wash);
  text-align: center;
  line-height: 1.35;
}

.check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 9px;
}

.check-label input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.check-label > span {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--input-surface);
  color: #161009;
}

.check-label svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  opacity: 0;
}

.check-label input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
}

.check-label input:checked + span svg {
  opacity: 1;
}

.check-label input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.help-card {
  width: min(960px, calc(100vw - 30px));
}

.help-nav {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  overflow-x: auto;
  padding: 9px 21px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}

.help-nav .button {
  min-height: 32px;
  flex: 0 0 auto;
  font-size: 12px;
}

.help-version {
  display: inline-flex;
  gap: 6px;
  margin-top: 9px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 11px;
}

.help-body {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 26px;
}

.help-body h3 {
  font-size: 14px;
}

.help-body h3:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.help-body > section {
  scroll-margin-block: 8px;
}

.help-body > section:first-child {
  padding-top: 0;
  border-top: 0;
}

.help-body a {
  color: var(--mint-bright);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.help-body > section > p {
  margin-top: 9px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.65;
}

.shortcut-list {
  margin: 11px 0 0;
}

.shortcut-list > div {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid var(--line-dim);
  padding-block: 5px;
}

.shortcut-list dt,
.shortcut-list dd {
  margin: 0;
  color: var(--text-dim);
  font-size: 11px;
}

.shortcut-list dd {
  color: var(--text-soft);
  text-align: right;
}

.workflow-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}

.workflow-list li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line-dim);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.012);
}

.workflow-list li > span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
}

.workflow-list p {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.55;
}

.workflow-list strong {
  color: var(--text-soft);
  font-weight: 650;
}

.about-section {
  grid-column: 1 / -1;
  padding-top: 18px;
  border-top: 1px solid var(--line-dim);
}

.about-section > p {
  margin-top: 9px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.65;
}

.about-section a {
  color: var(--mint-bright);
  font-weight: 680;
  text-underline-offset: 3px;
}

.about-section .citation {
  padding: 10px 11px;
  border-left: 2px solid rgba(75, 222, 143, 0.48);
  background: rgba(75, 222, 143, 0.045);
  color: var(--text-faint);
}

.help-feature-section {
  align-self: start;
  padding: 14px;
  border: 1px solid var(--line-dim);
  border-radius: 11px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mint) 5%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-1) 45%, transparent);
}

.help-feature-section__heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.help-feature-section__heading > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--mint) 26%, var(--line));
  border-radius: 8px;
  background: var(--mint-wash);
  color: var(--mint-bright);
}

.help-feature-section__heading svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.help-feature-section__heading h3 {
  margin: 0;
}

.help-feature-section--music {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 66%),
    color-mix(in srgb, var(--surface-1) 45%, transparent);
}

.help-feature-section--music .help-feature-section__heading > span {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background: var(--accent-wash);
  color: var(--accent-bright);
}

.citation cite {
  color: var(--text-soft);
}

.citation a {
  margin-left: 4px;
  white-space: nowrap;
}

.modal-footnote {
  color: var(--text-faint);
  font-size: 8px;
}

.settings-card .modal-footnote,
.help-card .modal-footnote {
  font-size: 10px;
}

.toast-region {
  position: fixed;
  z-index: 100;
  right: 14px;
  bottom: calc(var(--footer-height) + 14px);
  display: flex;
  width: min(440px, calc(100vw - 28px));
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

/* Keep transient export/status messages clear of Flow's authored timeline. */
.app-shell[data-mode="chrono"] ~ .toast-region {
  bottom: 238px;
}

.app-shell[data-mode="animation"] ~ .toast-region { bottom: 178px; }

@media (max-width: 900px) {
  .app-shell[data-mode="chrono"] ~ .toast-region { bottom: 238px; }
  .app-shell[data-mode="animation"] ~ .toast-region { bottom: 178px; }
}

.toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 97%, transparent);
  color: var(--text-soft);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-enter 220ms var(--ease);
}

.toast[data-state="success"] { border-color: rgba(114, 214, 180, 0.28); }
.toast[data-state="error"] {
  border-color: rgba(255, 127, 115, 0.58);
  background: color-mix(in srgb, var(--surface-2) 93%, #5f1712 7%);
}

.toast__copy strong {
  display: block;
  font-size: 12px;
  font-weight: 650;
}

.toast__copy p {
  margin-top: 3px;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.5;
}

.toast[data-state="error"] .toast__copy strong {
  color: #ffd3ce;
  font-size: 14px;
}

.toast[data-state="error"] .toast__copy p {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.5;
}

@media (hover: hover) {
  .button--quiet:hover,
  .icon-button:hover,
  .tool-button:hover {
    border-color: var(--line-strong);
    background: var(--surface-hover);
    color: var(--text);
  }

  .button--primary:hover {
    border-color: var(--accent-bright);
    background: linear-gradient(180deg, #69e9a1, #32b875);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 5px 19px rgba(33, 160, 94, 0.22);
    transform: translateY(-1px);
  }

  .button--run:hover {
    border-color: rgba(75, 222, 143, 0.5);
    background: rgba(75, 222, 143, 0.17);
    color: #91f2bb;
  }

  .text-button:hover {
    color: #91f2bb;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .panel-tab:hover,
  .inspector-tab:hover {
    color: var(--text-soft);
  }

  .segmented-control label:hover,
  .choice-grid label:hover,
  .palette-grid label:hover {
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-soft);
  }

  .switch-row:hover,
  .legend-item:hover,
  .neighbor-item:hover {
    background: rgba(255, 255, 255, 0.028);
  }

  .file-drop:hover {
    border-color: rgba(75, 222, 143, 0.42);
    background: rgba(75, 222, 143, 0.045);
  }
}

@keyframes status-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes orbit-rotate {
  to { transform: rotate(360deg); }
}

@keyframes indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(390%); }
}

@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes toast-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Menus must have stable geometry as soon as they enter the accessibility
   tree. A scale animation changes their hit boxes and can make anchored
   positioning and automated keyboard checks race the opening transition. */
@keyframes export-menu-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Preserve product identity first, then compact lower-priority action copy.
   Search is an anchored popover, so the header never reserves its full field
   width and every visible island remains collision-free. */
@media (max-width: 2200px) {
  .topbar {
    gap: 12px;
    padding-right: 12px;
    padding-left: 14px;
  }

  .project-identity { flex: 0 1 355px; }
  .project-title-row { width: 100%; }
  .project-switcher { min-width: 0; flex: 1 1 auto; }
  .project-switcher select,
  .project-switcher .custom-select { width: 100%; min-width: 0; max-width: 240px; }
  .status-pill,
  .topbar-actions .button > span { display: none; }
  .topbar-actions .button { width: 34px; min-height: 34px; padding: 0; }
  .topbar .header-graph-toolbar { max-width: none; flex: 0 0 auto; }
  .mode-switch-island { padding: 0; }
}

@media (max-width: 1760px) {
  .project-identity { flex-basis: 250px; }
  .project-switcher select,
  .project-switcher .custom-select { max-width: 208px; }
  .project-new-button { width: 34px; min-height: 34px; padding: 0; }
  .project-new-button > span { display: none; }
}

@media (max-width: 1460px) {
  .topbar {
    gap: 9px;
    padding-right: 10px;
    padding-left: 12px;
  }

  .project-kicker,
  .status-pill,
  .topbar-actions .button > span {
    display: none;
  }

  .brand-lockup { gap: 9px; }
  .brand-mark { width: 40px; height: 40px; border-radius: 12px; }
  .brand-mark svg { width: 28px; height: 28px; }
  .brand-copy strong { font-size: 17px; }
  .brand-copy span { font-size: 12px; }
  .project-title-row { margin-top: 0; }
  .project-identity { flex: 0 1 220px; }
  .project-switcher { width: 100%; }
  .project-switcher select,
  .project-switcher .custom-select { width: 100%; min-width: 0; max-width: 177px; }
  .topbar-actions .button { width: 34px; min-height: 34px; padding: 0; }
  .topbar .header-graph-toolbar { max-width: none; flex: 0 0 auto; }
  .mode-switch-island { padding: 0; }
  .workspace-mode-switch { min-width: 270px; }
  .workspace-mode-option { padding-inline: 5px; }

  .workspace {
    grid-template-columns: var(--sidebar-width) minmax(260px, 1fr);
  }

  .node-inspector {
    position: absolute;
    z-index: 28;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--inspector-width);
    box-shadow: -18px 0 45px rgba(0, 0, 0, 0.3);
    transition: transform 220ms var(--ease), visibility 220ms;
  }

  .app-shell[data-inspector-open="false"] .node-inspector {
    visibility: hidden;
    transform: translateX(101%);
  }

  .app-shell[data-inspector-open="false"] .inspector-toggle {
    border-color: rgba(75, 222, 143, 0.22);
    background: var(--accent-wash);
    color: var(--accent-bright);
  }
}

@media (max-width: 1180px) {
  .project-identity { flex-basis: 180px; }
  .project-switcher select,
  .project-switcher .custom-select { max-width: 138px; }
  .workspace-mode-switch { min-width: 190px; }
  .workspace-mode-option { min-width: 40px; padding-inline: 0; gap: 0; }
  .workspace-mode-option > span:not(.sr-only) { display: none; }
  .topbar .header-graph-toolbar { gap: 2px; flex: 0 0 auto; }
  .header-graph-toolbar .tool-button span,
  .header-graph-toolbar .zoom-control output,
  .header-graph-toolbar .toolbar-divider { display: none; }
  .topbar-actions #snapshot-button,
  .topbar-actions #tour-button { display: none; }
}

@media (max-width: 980px) {
  .project-identity,
  .topbar-divider { display: none; }
}

@media (max-width: 860px) {
  :root {
    --workspace-left-panel-width: min(400px, calc(100vw - 20px));
  }

  .mobile-only {
    display: inline-flex;
  }

  .workspace {
    display: block;
  }

  .graph-stage {
    width: 100%;
    height: 100%;
  }

  .control-sidebar {
    position: absolute;
    z-index: 35;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    box-shadow: 20px 0 55px rgba(0, 0, 0, 0.48);
    visibility: hidden;
    transform: translateX(-101%);
    transition: transform 220ms var(--ease), visibility 220ms;
  }

  .app-shell[data-sidebar-open="true"] .control-sidebar {
    visibility: visible;
    transform: translateX(0);
  }

  .app-shell[data-sidebar-open="true"] .workspace::after {
    position: absolute;
    z-index: 30;
    inset: 0;
    background: rgba(1, 3, 3, 0.52);
    content: "";
    backdrop-filter: blur(2px);
  }

  .sidebar-mobile-heading {
    display: flex;
    min-height: 51px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 7px 15px;
    border-bottom: 1px solid var(--line);
  }

  .sidebar-mobile-heading strong {
    font-size: 12px;
    font-weight: 650;
  }

  .sidebar-mobile-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .topbar-divider {
    display: none;
  }

  .topbar .header-graph-toolbar {
    gap: 2px;
    flex: 0 0 auto;
  }

  .header-graph-toolbar .tool-button span,
  .header-graph-toolbar .zoom-control output,
  .header-graph-toolbar .toolbar-divider {
    display: none;
  }

  .project-switcher select,
  .project-switcher .custom-select {
    min-width: 0;
    max-width: 26vw;
  }

  .hud-metrics > div:nth-child(5),
  .hud-metrics > div:nth-child(6) {
    display: none;
  }
}

@media (max-width: 860px) {
  .topbar-actions #snapshot-button,
  .topbar-actions #tour-button { display: none; }
}

@media (max-width: 680px) {
  .brand-lockup { display: flex; gap: 0; }
  .brand-mark { display: none; }
  .workspace-mode-switch { min-width: 154px; }
  .workspace-mode-option { min-width: 36px; padding: 0; gap: 0; }
  .workspace-mode-option > span:not(.sr-only) { display: none; }
  .header-graph-toolbar .zoom-control,
  .header-graph-toolbar #labels-toggle-button { display: none; }
  .topbar .header-graph-toolbar { flex: 0 0 auto; }
  .topbar-actions #view-only-button,
  .topbar-actions #settings-button,
  .topbar-actions #help-button { display: none; }
}

@media (max-width: 620px) {
  :root {
    --topbar-height: 56px;
    --footer-height: 34px;
    --inspector-width: min(380px, calc(100vw - 20px));
  }

  .topbar {
    gap: 11px;
    padding: 0 9px 0 11px;
  }

  .project-identity {
    display: none;
  }

  .brand-lockup { display: flex; }

  .brand-mark {
    width: 32px;
    height: 32px;
  }

  .project-kicker,
  .topbar-icon,
  .topbar-actions .button > span {
    display: none;
  }

  /* Graph exposes these utilities in its mobile control drawer. Flow
     hides that drawer, so keep its two global escape hatches visible. */
  .app-shell[data-mode="chrono"] #settings-button,
  .app-shell[data-mode="chrono"] #help-button,
  .app-shell[data-mode="poster"] #settings-button,
  .app-shell[data-mode="poster"] #help-button,
  .app-shell[data-mode="animation"] #settings-button,
  .app-shell[data-mode="animation"] #help-button {
    display: inline-flex;
  }

  .project-title-row {
    margin-top: 0;
  }

  .project-switcher select,
  .project-switcher .custom-select {
    min-width: 0;
    max-width: 26vw;
    font-size: 11px;
  }

  .project-switcher .custom-select__trigger { font-size: 11px; }

  .status-pill {
    display: none;
  }

  .topbar-actions .button {
    width: 34px;
    min-height: 34px;
    padding: 0;
  }

  .topbar .header-graph-toolbar {
    right: auto;
    left: auto;
    max-width: none;
    min-height: 40px;
    flex: 0 0 auto;
    transform: none;
  }

  .mode-switch-island {
    border-radius: 10px;
  }

  .workspace-mode-switch {
    min-width: 154px;
  }

  .workspace-mode-option {
    min-width: 36px;
    padding: 0;
    gap: 0;
  }

  .workspace-mode-option > span:not(.sr-only) {
    display: none;
  }

  .workspace-mode-option svg {
    width: 15px;
    height: 15px;
  }

  .header-graph-toolbar .zoom-control,
  .header-graph-toolbar #labels-toggle-button {
    display: none;
  }

  .tool-button span,
  .toolbar-divider,
  .zoom-control output {
    display: none;
  }

  .zoom-control .icon-button {
    width: 30px;
  }

  .hud-status {
    max-width: 42vw;
  }

  .hud-metrics > div:nth-child(n+3),
  .capability-chip {
    display: none;
  }

  .file-drop-grid,
  .csv-template-guide__content,
  .mapping-grid,
  .help-body,
  .application-theme-grid {
    grid-template-columns: 1fr;
  }

  .modal-card {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 13px;
  }

  .modal {
    padding: 8px;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-right: 14px;
    padding-left: 14px;
  }

  .modal-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .modal-footer__actions {
    justify-content: flex-end;
  }

  .settings-state-export {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .settings-state-export__action {
    width: 100%;
    grid-column: 1 / -1;
  }

  .about-section {
    grid-column: auto;
  }

  .settings-video-options,
  .soundtrack-overview,
  .soundtrack-control-grid,
  .soundtrack-readout {
    grid-template-columns: 1fr;
  }

  .soundtrack-control--wide { grid-column: auto; }
  .soundtrack-overview dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soundtrack-editor-footer,
  .soundtrack-editor-actions { align-items: stretch; flex-direction: column; }
  .soundtrack-editor-footer > .button { width: 100%; }
  .soundtrack-waveform-frame { height: 170px; }
}

@media (max-width: 520px) {
  .topbar { gap: 6px; padding-inline: 7px; }
  .brand-copy strong { font-size: 15px; }
  .brand-copy span { font-size: 10px; }
  .workspace-mode-switch { min-width: 136px; }
  .workspace-mode-option { min-width: 30px; }
  .header-graph-toolbar #fit-view-button,
  .header-graph-toolbar #inspector-toggle-button { display: none; }
}

@media (max-width: 400px) {
  .brand-copy span,
  .topbar-actions #export-button { display: none; }
  .workspace-mode-switch { min-width: 124px; }
}

@media (max-width: 380px) {

  .visual-control-grid,
  .visual-slider-grid {
    grid-template-columns: 1fr;
  }

  .visual-slider-grid__wide,
  .visual-control-grid__wide {
    grid-column: auto;
  }
}

@media (pointer: coarse) {
  input[type="range"] {
    height: 28px;
  }

  .style-section-tab {
    min-height: 44px;
  }
}

@media (max-height: 740px) {
  .legend-panel {
    max-height: 180px;
  }

  .virtual-list {
    height: 70px;
  }

  .control-panel {
    padding-top: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line-dim: rgba(255, 255, 255, 0.2);
    --line: rgba(255, 255, 255, 0.3);
    --line-strong: rgba(255, 255, 255, 0.5);
    --text-soft: #e3e8e3;
    --text-dim: #bdc5bd;
    --text-faint: #979f98;
  }

  .graph-stage::before {
    background: var(--bg-deep);
  }

  .button--primary {
    border-color: #eafff1;
  }
}

@media (forced-colors: active) {
  :root {
    --accent: Highlight;
    --accent-bright: Highlight;
    --mint: LinkText;
    --mint-bright: LinkText;
    --focus: Highlight;
  }

  .brand-mark,
  .button,
  .icon-button,
  .tool-button,
  .segmented-control,
  .segmented-control label,
  .canvas-theme-grid label,
  .canvas-theme-preview,
  .worker-card,
  .choice-grid label,
  .palette-grid label,
  .file-drop,
  .modal-card,
  .viewport-overlay {
    forced-color-adjust: none;
  }

  .switch-row input:checked + .switch::after,
  .legend-item__switch,
  .legend-item__switch::after,
  .status-dot,
  .palette-swatches i {
    forced-color-adjust: none;
  }

  .graph-stage::before,
  .canvas-vignette {
    display: none;
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .graph-toolbar,
  .viewport-overlay {
    background: var(--modal-surface);
  }

  .modal::backdrop {
    background: var(--modal-backdrop);
  }
}