:root {
  color-scheme: dark;
  --site-notice-height: 44px;
  --bg: #02040b;
  --canvas-bg: #02040b;
  --panel: rgba(7, 12, 25, 0.82);
  --panel-strong: rgba(7, 12, 24, 0.95);
  --line: rgba(162, 184, 224, 0.16);
  --line-strong: rgba(176, 204, 255, 0.3);
  --text: #f6f8ff;
  --muted: #9aa9c4;
  --faint: #64728e;
  --panel-bg: linear-gradient(145deg, rgba(13,20,39,.78), rgba(4,8,18,.7));
  --panel-shadow: 0 16px 46px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
  --control-bg: rgba(255,255,255,.035);
  --control-hover: rgba(255,255,255,.07);
  --control-text: #dce3f3;
  --tab-text: #aeb8ce;
  --tab-active-text: #ffffff;
  --tab-active-bg: rgba(4,10,24,.88);
  --tab-sheen: rgba(255,255,255,.035);
  --edge-capability: #9eabc2;
  --edge-ribbon-neutral: rgba(166, 181, 207, .28);
  --edge-label-bg: rgba(3,6,14,.83);
  --edge-label-stroke: rgba(158,179,216,.2);
  --edge-label-text: #dce7fb;
  --node-label-text: #f5f8ff;
  --node-label-meta: #7f8da9;
  --node-label-bg: rgba(3,6,14,.91);
  --node-label-active-bg: rgba(4,8,18,.98);
  --legend-title: #d9e2f5;
  --legend-text: #b6c1d8;
  --guide-text: #a9b5cb;
  --guide-dot: #53617a;
  --close-text: #b7c2d7;
  --detail-summary: #c1cbe0;
  --detail-heading: #72809d;
  --detail-body: #d0d8e8;
  --detail-list: #bdc8dc;
  --connection-text: #d3dbea;
  --connection-border: rgba(255,255,255,.06);
  --connection-bg: rgba(255,255,255,.025);
  --connection-hover: rgba(255,255,255,.05);
  --integration-panel-bg: rgba(2,6,15,.38);
  --integration-code-bg: rgba(0,2,8,.82);
  --integration-code-text: #dbe8ff;
  --integration-note-bg: rgba(3,192,232,.07);
  --source-text: #edf3ff;
  --notice-bg: rgba(5, 10, 22, .96);
  --notice-border: rgba(3, 192, 232, .32);
  --notice-text: #d7e3f7;
  --notice-label: #69e4fa;
  --notice-button-bg: rgba(3, 192, 232, .09);
  --notice-button-border: rgba(3, 192, 232, .34);
  --dialog-bg: #080e1d;
  --dialog-backdrop: rgba(0, 3, 10, .76);
  --galaxy-wash:
    radial-gradient(ellipse at 48% 46%, rgba(31, 81, 172, .11), transparent 28%),
    radial-gradient(ellipse at 66% 59%, rgba(101, 47, 168, .07), transparent 34%),
    radial-gradient(ellipse at 30% 72%, rgba(3, 192, 232, .045), transparent 26%),
    linear-gradient(180deg, rgba(1,2,8,.05), rgba(1,2,8,.42));
  --gateway: #03c0e8;
  --runtime: #377dff;
  --endpoint: #43e6c5;
  --lifecycle: #ff9e57;
  --model: #9e75ff;
  --agent: #f2cc60;
  --font-sans: "Space Grotesk", Inter, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #edf3fc;
  --canvas-bg: #edf3fc;
  --panel: rgba(255, 255, 255, 0.86);
  --panel-strong: rgba(250, 252, 255, 0.96);
  --line: rgba(48, 69, 105, 0.18);
  --line-strong: rgba(42, 78, 139, 0.34);
  --text: #0b1428;
  --muted: #4f607b;
  --faint: #6d7c94;
  --panel-bg: linear-gradient(145deg, rgba(255,255,255,.88), rgba(232,240,253,.78));
  --panel-shadow: 0 16px 46px rgba(48,70,110,.14), inset 0 1px 0 rgba(255,255,255,.92);
  --control-bg: rgba(255,255,255,.56);
  --control-hover: rgba(255,255,255,.86);
  --control-text: #1b2b46;
  --tab-text: #52617a;
  --tab-active-text: #081529;
  --tab-active-bg: rgba(248,251,255,.94);
  --tab-sheen: rgba(255,255,255,.64);
  --edge-capability: #657791;
  --edge-ribbon-neutral: rgba(72, 91, 123, .25);
  --edge-label-bg: rgba(249,252,255,.94);
  --edge-label-stroke: rgba(58,83,126,.24);
  --edge-label-text: #243550;
  --node-label-text: #0c1830;
  --node-label-meta: #52637d;
  --node-label-bg: rgba(250,252,255,.96);
  --node-label-active-bg: rgba(255,255,255,.995);
  --legend-title: #1a2942;
  --legend-text: #40516e;
  --guide-text: #465873;
  --guide-dot: #8290a5;
  --close-text: #455875;
  --detail-summary: #344761;
  --detail-heading: #60718b;
  --detail-body: #263952;
  --detail-list: #3c4f69;
  --connection-text: #1f324d;
  --connection-border: rgba(45,66,101,.12);
  --connection-bg: rgba(255,255,255,.48);
  --connection-hover: rgba(255,255,255,.88);
  --integration-panel-bg: rgba(241,246,255,.72);
  --integration-code-bg: #10182a;
  --integration-code-text: #eaf1ff;
  --integration-note-bg: rgba(36,91,255,.07);
  --source-text: #142742;
  --notice-bg: rgba(248, 251, 255, .97);
  --notice-border: rgba(36, 91, 255, .24);
  --notice-text: #263a58;
  --notice-label: #0759cf;
  --notice-button-bg: rgba(36, 91, 255, .07);
  --notice-button-border: rgba(36, 91, 255, .25);
  --dialog-bg: #f8fbff;
  --dialog-backdrop: rgba(22, 34, 54, .42);
  --galaxy-wash:
    radial-gradient(ellipse at 48% 46%, rgba(53, 113, 218, .15), transparent 30%),
    radial-gradient(ellipse at 68% 60%, rgba(132, 86, 214, .10), transparent 35%),
    radial-gradient(ellipse at 28% 72%, rgba(3, 192, 232, .10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(213,225,246,.46));
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; background: var(--bg); }

body {
  margin: 0;
  min-width: 320px;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-sans);
  transition: background-color .25s ease, color .25s ease;
}

button, a { font: inherit; }
button { color: inherit; }

#starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--canvas-bg);
}

.galaxy-wash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--galaxy-wash);
  transition: background .3s ease;
}

.site-notice {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  right: 0;
  height: var(--site-notice-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 16px;
  color: var(--notice-text);
  border-bottom: 1px solid var(--notice-border);
  background: var(--notice-bg);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter: blur(18px);
}
.site-notice-copy,
.site-notice-actions { display: flex; align-items: center; min-width: 0; }
.site-notice-copy { gap: 10px; }
.site-notice-copy strong {
  flex: 0 0 auto;
  color: var(--notice-label);
  font: 600 .59rem/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-notice-copy span { min-width: 0; font-size: .7rem; line-height: 1.25; }
.site-notice-actions { flex: 0 0 auto; gap: 12px; }
.site-copyright { color: var(--faint); font: 500 .56rem/1 var(--font-mono); white-space: nowrap; }
.site-notice button,
.legal-dialog button {
  color: inherit;
  border: 1px solid var(--notice-button-border);
  background: var(--notice-button-bg);
  cursor: pointer;
}
.site-notice button {
  min-height: 30px;
  padding: 0 10px;
  color: var(--notice-label);
  font-size: .65rem;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
}
.site-notice button:hover { background: color-mix(in srgb, var(--notice-button-bg) 70%, var(--notice-label) 10%); }

.hud-header {
  position: fixed;
  z-index: 40;
  top: calc(var(--site-notice-height) + 12px);
  left: 16px;
  right: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
}

.brand-panel,
.camera-controls,
.view-tabs,
.level-legend,
.scene-status,
.interaction-guide,
.inspector {
  border: 1px solid var(--line);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(16px);
}

.brand-panel {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  border-radius: 14px;
  pointer-events: auto;
}
.brand-panel img { width: 112px; height: auto; display: block; }
.brand-panel > div { display: grid; gap: 3px; padding-left: 12px; border-left: 1px solid var(--line); }
.brand-panel span { color: var(--gateway); font: 600 .62rem/1 var(--font-mono); letter-spacing: .12em; }
.brand-panel strong { font-size: .84rem; line-height: 1; white-space: nowrap; }

.view-tabs {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 16px;
  transform: translateX(-50%);
  pointer-events: auto;
}
.view-tab {
  position: relative;
  --tab-color: var(--gateway);
  min-height: 42px;
  padding: 0 14px;
  white-space: nowrap;
  color: var(--tab-text);
  font-size: .78rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.view-tab[data-view="runtime"] { --tab-color: var(--runtime); }
.view-tab[data-view="lifecycle"] { --tab-color: var(--lifecycle); }
.view-tab:hover { color: var(--tab-active-text); background: var(--control-bg); }
.view-tab.is-active {
  color: var(--tab-active-text);
  border-color: color-mix(in srgb, var(--tab-color) 68%, white 10%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tab-color) 18%, transparent), var(--tab-sheen)),
    var(--tab-active-bg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tab-color) 22%, transparent),
    0 0 20px color-mix(in srgb, var(--tab-color) 24%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--tab-color) 12%, transparent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--tab-color) 42%, transparent);
}
.view-tab.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: var(--tab-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--tab-color) 78%, transparent);
}

.camera-controls {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 9px 8px 14px;
  border-radius: 14px;
  pointer-events: auto;
}
.camera-controls span { color: var(--faint); font: 500 .61rem/1 var(--font-mono); white-space: nowrap; }
.camera-controls button,
.close-inspector {
  border: 1px solid var(--line);
  background: var(--control-bg);
  cursor: pointer;
}
.camera-controls button {
  min-height: 38px;
  padding: 0 12px;
  color: var(--control-text);
  font-size: .73rem;
  border-radius: 9px;
}
.camera-controls button:hover { border-color: var(--line-strong); background: var(--control-hover); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 76px;
}
.theme-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-icon-moon { display: none; }
:root[data-theme="light"] .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-icon-moon { display: block; }
.theme-toggle-label { line-height: 1; }

.space-stage {
  position: fixed;
  inset: 0;
  overflow: clip;
  cursor: grab;
  touch-action: none;
}
.space-stage.is-dragging { cursor: grabbing; }

.link-layer,
.node-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.link-layer { z-index: 2; overflow: visible; pointer-events: none; }
.node-layer { z-index: 4; pointer-events: none; }

.flow-edge {
  --flow-width: 9px;
  --flow-scale: 1;
  opacity: .58;
  pointer-events: none;
  transition: opacity .24s ease;
}
.flow-edge path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: opacity .24s ease, stroke-width .24s ease;
}
.flow-ribbon-bed {
  stroke: var(--edge-ribbon-neutral);
  stroke-width: calc(var(--flow-width) * var(--flow-scale));
  opacity: .42;
}
.flow-ribbon-shadow {
  stroke-width: calc(var(--flow-width) * 1.72 * var(--flow-scale));
  opacity: 0;
  filter: url(#flowBlur);
}
.flow-ribbon-body {
  stroke-width: calc(var(--flow-width) * var(--flow-scale));
  opacity: .045;
}
.flow-ribbon-current {
  stroke-width: calc(var(--flow-width) * .72 * var(--flow-scale));
  stroke-dasharray: 112 158;
  stroke-dashoffset: 0;
  opacity: 0;
  filter: url(#flowSoft);
  animation: riverCurrent 4.1s linear infinite;
  animation-delay: var(--flow-delay);
}
.flow-ribbon-crest {
  stroke: rgba(255,255,255,.9);
  stroke-width: calc(1.15px * var(--flow-scale));
  stroke-dasharray: 86 184;
  stroke-dashoffset: 0;
  opacity: 0;
  animation: riverCurrent 4.1s linear infinite;
  animation-delay: var(--flow-delay);
}
.flow-edge.is-lens,
.flow-edge.is-focus { opacity: 1; }
.flow-edge.is-lens .flow-ribbon-bed { opacity: .56; }
.flow-edge.is-lens .flow-ribbon-shadow { opacity: .18; }
.flow-edge.is-lens .flow-ribbon-body { opacity: .7; }
.flow-edge.is-lens .flow-ribbon-current { opacity: .62; }
.flow-edge.is-lens .flow-ribbon-crest { opacity: .44; }
.flow-edge.is-focus .flow-ribbon-bed { opacity: .68; }
.flow-edge.is-focus .flow-ribbon-shadow { opacity: .32; }
.flow-edge.is-focus .flow-ribbon-body { opacity: .9; }
.flow-edge.is-focus .flow-ribbon-current { opacity: .9; }
.flow-edge.is-focus .flow-ribbon-crest { opacity: .7; }
.flow-edge.is-muted { opacity: .07; }
.flow-edge.is-view-hidden,
.edge-label-group.is-view-hidden { opacity: 0; visibility: hidden; }

:root[data-theme="dark"] .flow-edge {
  --flow-scale: .62;
  opacity: .72;
}
:root[data-theme="dark"] .flow-ribbon-bed {
  stroke: rgba(68,71,78,.78);
  opacity: .46;
}
:root[data-theme="dark"] .flow-ribbon-shadow {
  opacity: 0;
  filter: none;
}
:root[data-theme="dark"] .flow-ribbon-body { opacity: .12; }
:root[data-theme="dark"] .flow-ribbon-current {
  stroke: rgba(126,129,136,.88);
  stroke-width: calc(var(--flow-width) * .54 * var(--flow-scale));
  stroke-dasharray: 86 194;
  filter: none;
  animation-duration: 5.2s;
}
:root[data-theme="dark"] .flow-ribbon-crest {
  stroke: rgba(218,220,225,.94);
  stroke-width: calc(.9px * var(--flow-scale));
  stroke-dasharray: 24 256;
  animation-duration: 5.2s;
}
:root[data-theme="dark"] .flow-edge.is-lens .flow-ribbon-bed { opacity: .58; }
:root[data-theme="dark"] .flow-edge.is-lens .flow-ribbon-body { opacity: .72; }
:root[data-theme="dark"] .flow-edge.is-lens .flow-ribbon-current { opacity: .46; }
:root[data-theme="dark"] .flow-edge.is-lens .flow-ribbon-crest { opacity: .52; }
:root[data-theme="dark"] .flow-edge.is-focus .flow-ribbon-bed { opacity: .66; }
:root[data-theme="dark"] .flow-edge.is-focus .flow-ribbon-body { opacity: .86; }
:root[data-theme="dark"] .flow-edge.is-focus .flow-ribbon-current { opacity: .62; }
:root[data-theme="dark"] .flow-edge.is-focus .flow-ribbon-crest { opacity: .7; }
:root[data-theme="dark"] .flow-edge.is-muted { opacity: .05; }

@keyframes riverCurrent {
  to { stroke-dashoffset: -270; }
}

.edge-label-group { opacity: 0; transition: opacity .2s ease; }
.edge-label-group.is-lens { opacity: 1; }
.edge-label-group.is-focus { opacity: 1; }
.edge-label-bg { fill: var(--edge-label-bg); stroke: var(--edge-label-stroke); stroke-width: 1; }
.edge-label-text {
  fill: var(--edge-label-text);
  font: 500 9px var(--font-mono);
  letter-spacing: .045em;
  text-anchor: middle;
  dominant-baseline: central;
}
.space-node {
  --node-color: var(--gateway);
  --node-size: 58px;
  --node-render-size: var(--node-size);
  position: absolute;
  top: 0;
  left: 0;
  width: max(112px, calc(var(--node-render-size) + 34px));
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0;
  color: var(--text);
  border: 0;
  background: transparent;
  transform-origin: center center;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform, opacity;
  transition: opacity .22s ease, filter .22s ease;
}
.space-node.is-view-muted { opacity: .38; }
.space-node.is-view-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.space-node.is-muted { opacity: .17; }
.space-node.is-view-active { opacity: 1; }

.node-prism {
  position: relative;
  width: var(--node-render-size);
  height: var(--node-render-size);
  transform-style: preserve-3d;
  transform: rotateX(-9deg) rotateY(14deg);
  transition: transform .25s ease;
}
.space-node:hover .node-prism,
.space-node:focus-visible .node-prism,
.space-node.is-focused .node-prism { transform: rotateX(-4deg) rotateY(7deg) translateY(-2px); }

.node-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(var(--node-render-size) * .18);
  overflow: hidden;
  border: 1px solid rgba(189,204,236,.28);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.015) 46%),
    linear-gradient(155deg, rgba(13,24,52,.96), rgba(4,9,22,.98));
  box-shadow: 0 15px 28px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.025);
  transform: translateZ(6px);
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.node-face::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.15) 43%, transparent 60%);
  transform: translateX(-130%);
  transition: transform .55s ease;
}
.space-node:hover .node-face::before,
.space-node.is-focused .node-face::before { transform: translateX(130%); }
.node-face img { width: 100%; height: 100%; display: block; object-fit: contain; }

.node-side-right,
.node-side-bottom {
  position: absolute;
  display: block;
  background: color-mix(in srgb, var(--node-color) 28%, #071025);
  opacity: .75;
}
.node-side-right {
  top: 5px;
  right: -6px;
  width: 7px;
  height: calc(100% - 7px);
  transform: skewY(45deg);
  transform-origin: left top;
}
.node-side-bottom {
  left: 6px;
  right: -1px;
  bottom: -6px;
  height: 7px;
  transform: skewX(45deg);
  transform-origin: left top;
}

.node-label {
  min-width: 112px;
  max-width: 158px;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 6px 9px 7px;
  color: var(--node-label-text);
  text-align: center;
  border: 1px solid rgba(154,173,210,.16);
  border-radius: 7px;
  background: var(--node-label-bg);
  box-shadow: 0 8px 22px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(8px);
  transition: border-color .22s ease, background .22s ease;
}
.node-label strong { font-size: 12px; line-height: 1.14; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
.node-label small { color: var(--node-label-meta); font: 500 7.5px/1.18 var(--font-mono); letter-spacing: .065em; text-transform: uppercase; text-wrap: balance; }

.space-node.is-focused .node-face,
.space-node.is-related .node-face,
.space-node:hover .node-face,
.space-node:focus-visible .node-face {
  border-color: color-mix(in srgb, var(--node-color) 78%, white 8%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--node-color) 16%, transparent), rgba(255,255,255,.015) 50%),
    linear-gradient(155deg, rgba(13,24,52,.97), rgba(4,9,22,.98));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--node-color) 42%, transparent),
    0 15px 30px rgba(0,0,0,.4);
}
.space-node.is-focused .node-face { box-shadow: 0 0 0 2px var(--node-color), 0 15px 30px rgba(0,0,0,.42); }
.space-node.is-focused .node-label,
.space-node.is-related .node-label,
.space-node:hover .node-label,
.space-node:focus-visible .node-label { border-color: color-mix(in srgb, var(--node-color) 62%, transparent); background: var(--node-label-active-bg); }
.space-node:focus-visible { outline: 0; }

.space-node.is-platform .node-face { background: linear-gradient(150deg, rgba(21,40,81,.98), rgba(5,10,24,.98)); }
.space-node.is-platform .node-label strong { font-size: 14px; }

.space-node.is-child .node-prism::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 6px;
  height: 6px;
  border: 1px solid color-mix(in srgb, var(--node-color) 74%, white 8%);
  border-radius: 50%;
  background: var(--node-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--node-color) 58%, transparent);
  transform: translateX(-50%);
}
.space-node.is-child .node-face {
  border-color: color-mix(in srgb, var(--node-color) 42%, rgba(189,204,236,.28));
}
.space-node.is-child .node-label {
  max-width: 148px;
}

.level-legend {
  position: absolute;
  z-index: 18;
  left: 16px;
  top: 50%;
  width: 166px;
  padding: 14px 13px 12px;
  border-radius: 14px;
  transform: translateY(-50%);
}
.legend-title { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 11px; color: var(--legend-title); font: 600 .62rem/1 var(--font-mono); }
.legend-title span { color: var(--faint); font-size: .52rem; }
.level-legend ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.level-legend li { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; color: var(--legend-text); font-size: .7rem; }
.level-legend li i { width: 7px; height: 7px; border-radius: 50%; }
.level-legend li i.gateway { background: var(--gateway); }
.level-legend li i.runtime { background: var(--runtime); }
.level-legend li i.endpoint { background: var(--endpoint); }
.level-legend li i.lifecycle { background: var(--lifecycle); }
.level-legend li i.model { background: var(--model); }
.level-legend li i.agent { background: var(--agent); }
.level-legend li b { color: var(--faint); font: 500 .5rem/1 var(--font-mono); }

.scene-status {
  position: absolute;
  z-index: 18;
  left: 16px;
  bottom: 20px;
  width: min(440px, calc(100% - 32px));
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 13px;
}
.scene-status > span { padding-top: 3px; color: var(--gateway); font: 600 .58rem/1 var(--font-mono); white-space: nowrap; }
.scene-status strong { display: block; font-size: .82rem; }
.scene-status p { margin: 3px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.35; }

.interaction-guide {
  position: absolute;
  z-index: 18;
  left: 50%;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  color: var(--guide-text);
  font: 500 .62rem/1 var(--font-mono);
  border-radius: 13px;
  transform: translateX(-50%);
}
.interaction-guide i { width: 3px; height: 3px; border-radius: 50%; background: var(--guide-dot); }

.inspector {
  position: absolute;
  z-index: 35;
  top: calc(var(--site-notice-height) + 72px);
  right: 16px;
  bottom: 18px;
  width: min(430px, calc(100% - 32px));
  overflow-y: auto;
  padding: 20px;
  border-radius: 18px;
  transform: translateX(calc(100% + 28px));
  opacity: 0;
  pointer-events: none;
  scrollbar-color: var(--faint) transparent;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
.inspector.is-open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.close-inspector {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--close-text);
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 9px;
}
.close-inspector:hover { color: var(--text); border-color: var(--line-strong); }

.inspector-mark { display: flex; align-items: center; gap: 12px; padding-right: 35px; }
.inspector-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--detail-color, var(--gateway)) 55%, transparent);
  border-radius: 12px;
  background: var(--control-bg);
}
.inspector-icon img { width: 100%; height: 100%; object-fit: contain; }
.inspector-mark > div:last-child { display: grid; gap: 5px; }
.inspector-mark span { color: var(--detail-color, var(--gateway)); font: 600 .62rem/1 var(--font-mono); letter-spacing: .09em; }
.inspector-mark small { color: var(--faint); font: 500 .5rem/1.35 var(--font-mono); letter-spacing: .05em; }
.detail-eyebrow { margin: 24px 0 6px; color: var(--muted); font-size: .75rem; }
.inspector h2 { margin: 0; font-size: clamp(1.55rem, 2.4vw, 2rem); line-height: 1.06; letter-spacing: -.035em; }
.detail-summary { margin: 12px 0 18px; color: var(--detail-summary); font-size: .9rem; line-height: 1.55; }
.inspector-tabs {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 4px;
  margin-bottom: 5px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--control-bg) 72%, transparent);
}
.inspector-tab {
  min-height: 36px;
  padding: 0 10px;
  color: var(--faint);
  font-size: .69rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.inspector-tab:hover { color: var(--text); background: var(--control-bg); }
.inspector-tab.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--detail-color, var(--gateway)) 52%, var(--line));
  background: color-mix(in srgb, var(--detail-color, var(--gateway)) 9%, var(--control-bg));
  box-shadow: 0 0 16px color-mix(in srgb, var(--detail-color, var(--gateway)) 11%, transparent);
}
.inspector-panel[hidden] { display: none; }
.detail-block { padding: 16px 0; border-top: 1px solid var(--line); }
.detail-block h3 { margin: 0 0 9px; color: var(--detail-heading); font: 600 .62rem/1 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.detail-block p { margin: 0; color: var(--detail-body); font-size: .82rem; line-height: 1.52; }
.detail-block ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.detail-block li { position: relative; padding-left: 13px; color: var(--detail-list); font-size: .78rem; line-height: 1.4; }
.detail-block li::before { content: ""; position: absolute; left: 0; top: .54em; width: 5px; height: 5px; background: var(--detail-color, var(--gateway)); }
.detail-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-heading-row span { color: var(--faint); font: 500 .62rem/1 var(--font-mono); }
.connection-list { display: grid; gap: 8px; }
.integration-accordion {
  overflow: hidden;
  color: var(--connection-text);
  border: 1px solid var(--connection-border);
  border-radius: 10px;
  background: var(--connection-bg);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.integration-accordion:hover { border-color: color-mix(in srgb, var(--connection-color) 58%, var(--connection-border)); }
.integration-accordion[open] {
  border-color: color-mix(in srgb, var(--connection-color) 72%, var(--connection-border));
  background: var(--connection-hover);
  box-shadow: 0 0 20px color-mix(in srgb, var(--connection-color) 8%, transparent);
}
.integration-accordion > summary {
  min-height: 52px;
  display: grid;
  grid-template-columns: 7px minmax(0,1fr) auto 18px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
  list-style: none;
}
.integration-accordion > summary::-webkit-details-marker { display: none; }
.connection-light {
  width: 6px;
  height: 6px;
  background: var(--connection-color);
  box-shadow: 0 0 9px color-mix(in srgb, var(--connection-color) 66%, transparent);
}
.connection-title { min-width: 0; display: grid; gap: 3px; }
.connection-title strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.connection-title > span { color: var(--faint); font: 500 .54rem/1.2 var(--font-mono); letter-spacing: .035em; text-transform: uppercase; }
.integration-badge {
  padding: 5px 6px;
  color: color-mix(in srgb, var(--connection-color) 78%, var(--text));
  font: 600 .48rem/1 var(--font-mono);
  letter-spacing: .04em;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--connection-color) 28%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--connection-color) 8%, transparent);
}
.accordion-chevron {
  color: var(--faint);
  font: 400 1.05rem/1 var(--font-mono);
  text-align: center;
  transition: transform .2s ease, color .2s ease;
}
.integration-accordion[open] .accordion-chevron { color: var(--connection-color); transform: rotate(45deg); }
.integration-panel {
  display: grid;
  gap: 15px;
  padding: 15px;
  border-top: 1px solid var(--connection-border);
  background: var(--integration-panel-bg);
}
.detail-block .integration-mode {
  width: fit-content;
  margin: 0;
  padding: 5px 7px;
  color: var(--connection-color);
  font: 600 .53rem/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--connection-color) 28%, transparent);
  border-radius: 5px;
}
.detail-block .integration-summary { color: var(--detail-body); font-size: .78rem; line-height: 1.55; }
.integration-section { display: grid; gap: 8px; }
.integration-section h4,
.integration-sources > span {
  margin: 0;
  color: var(--detail-heading);
  font: 600 .55rem/1 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.detail-block .integration-section ul,
.detail-block .integration-section ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 17px;
  color: var(--detail-list);
}
.detail-block .integration-section ul { list-style: disc; }
.detail-block .integration-section ol { list-style: decimal; }
.detail-block .integration-section li { padding-left: 2px; font-size: .72rem; line-height: 1.45; }
.detail-block .integration-section li::before { display: none; }
.integration-code-section {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--connection-color) 22%, var(--connection-border));
  border-radius: 9px;
  background: var(--integration-code-bg);
}
.integration-code-header {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  color: var(--integration-code-text);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.integration-code-header > span { overflow: hidden; font-size: .66rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.integration-code-header small { color: #91a4c4; font: 500 .48rem/1 var(--font-mono); text-transform: uppercase; }
.copy-code-button {
  min-height: 25px;
  padding: 0 7px;
  color: #dbe8ff;
  font: 600 .52rem/1 var(--font-mono);
  border: 1px solid rgba(160,188,235,.26);
  border-radius: 5px;
  background: rgba(255,255,255,.06);
  cursor: pointer;
}
.copy-code-button:hover { border-color: var(--connection-color); }
.integration-code-section pre {
  max-width: 100%;
  margin: 0;
  padding: 12px;
  overflow-x: auto;
  color: var(--integration-code-text);
  font: 500 .61rem/1.62 var(--font-mono);
  tab-size: 2;
}
.integration-code-section code { font: inherit; }
.detail-block .integration-note {
  padding: 10px 11px;
  color: var(--detail-body);
  font-size: .7rem;
  line-height: 1.5;
  border-left: 2px solid var(--connection-color);
  background: var(--integration-note-bg);
}
.integration-sources { display: grid; gap: 8px; }
.integration-sources > div { display: flex; flex-wrap: wrap; gap: 6px; }
.integration-sources a {
  padding: 6px 7px;
  color: var(--source-text);
  font-size: .65rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--connection-border);
  border-radius: 6px;
  background: var(--connection-bg);
}
.integration-sources a:hover { border-color: var(--connection-color); }
.focus-node-button {
  min-height: 38px;
  color: var(--source-text);
  font-size: .7rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--connection-color) 45%, var(--line-strong));
  border-radius: 8px;
  background: color-mix(in srgb, var(--connection-color) 7%, var(--control-bg));
  cursor: pointer;
}
.focus-node-button:hover { border-color: var(--connection-color); background: color-mix(in srgb, var(--connection-color) 13%, var(--control-bg)); }
.source-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 5px;
  padding: 0 11px;
  color: var(--source-text);
  font-size: .76rem;
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--control-bg);
}
.source-link:hover { border-color: var(--detail-color, var(--gateway)); }

.documentation-panel { padding-top: 14px; }
.documentation-intro {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--detail-color, var(--gateway)) 22%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--detail-color, var(--gateway)) 5%, var(--control-bg));
}
.documentation-intro span {
  color: var(--detail-color, var(--gateway));
  font: 600 .55rem/1 var(--font-mono);
  letter-spacing: .09em;
}
.documentation-intro p { margin: 0; color: var(--detail-body); font-size: .76rem; line-height: 1.5; }
.documentation-freshness {
  display: block;
  margin-top: 9px;
  color: color-mix(in srgb, var(--detail-color) 78%, var(--detail-muted));
  font-family: "IBM Plex Mono", monospace;
  font-size: .61rem;
  line-height: 1.45;
  letter-spacing: .025em;
}
.documentation-list { display: grid; gap: 9px; margin-top: 11px; }
.documentation-card {
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  color: var(--source-text);
  text-decoration: none;
  border: 1px solid var(--connection-border);
  border-radius: 10px;
  background: var(--connection-bg);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.documentation-card:hover {
  border-color: color-mix(in srgb, var(--detail-color, var(--gateway)) 64%, var(--connection-border));
  background: var(--connection-hover);
  transform: translateY(-1px);
}
.documentation-card > span { min-width: 0; display: grid; gap: 5px; }
.documentation-card strong { font-size: .76rem; line-height: 1.22; }
.documentation-card small { color: var(--faint); font: 500 .54rem/1.25 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.documentation-card i { color: var(--detail-color, var(--gateway)); font-style: normal; font-size: .9rem; }

.legal-dialog {
  width: min(680px, calc(100% - 32px));
  max-height: min(780px, calc(100% - 32px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--dialog-bg);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.legal-dialog::backdrop { background: var(--dialog-backdrop); backdrop-filter: blur(7px); }
.legal-dialog-header,
.legal-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}
.legal-dialog-header { border-bottom: 1px solid var(--line); }
.legal-dialog-header > div { display: grid; gap: 5px; }
.legal-dialog-header span { color: var(--gateway); font: 600 .57rem/1 var(--font-mono); letter-spacing: .11em; }
.legal-dialog h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.025em; }
.legal-dialog-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  border-color: var(--line) !important;
  border-radius: 9px;
  background: var(--control-bg) !important;
}
.legal-dialog-body {
  max-height: min(570px, calc(100vh - 210px));
  padding: 20px;
  overflow-y: auto;
  scrollbar-color: var(--faint) transparent;
}
.legal-dialog-intro { color: var(--detail-summary) !important; font-size: .85rem !important; }
.legal-dialog section { padding-top: 17px; margin-top: 17px; border-top: 1px solid var(--line); }
.legal-dialog h3 { margin: 0 0 7px; color: var(--text); font-size: .78rem; letter-spacing: -.01em; }
.legal-dialog p { margin: 0; color: var(--detail-body); font-size: .75rem; line-height: 1.65; }
.legal-dialog a { color: var(--gateway); text-underline-offset: 3px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 11px; }
.legal-links a { font: 500 .62rem/1.4 var(--font-mono); }
.legal-dialog-footer { border-top: 1px solid var(--line); }
.legal-dialog-footer span { color: var(--faint); font: 500 .56rem/1.3 var(--font-mono); }
.legal-dialog-footer button {
  min-height: 34px;
  padding: 0 16px;
  color: var(--notice-label);
  font-size: .7rem;
  font-weight: 600;
  border-radius: 9px;
}

:root[data-theme="light"] .flow-ribbon-bed { opacity: .52; }
:root[data-theme="light"] .flow-edge.is-lens .flow-ribbon-bed { opacity: .7; }
:root[data-theme="light"] .flow-edge.is-focus .flow-ribbon-bed { opacity: .82; }
:root[data-theme="light"] .flow-edge.is-lens .flow-ribbon-body { opacity: .8; }
:root[data-theme="light"] .flow-edge.is-focus .flow-ribbon-body { opacity: .96; }
:root[data-theme="light"] .flow-ribbon-crest { stroke: rgba(255,255,255,.96); }
:root[data-theme="light"] .flow-edge.is-muted { opacity: .055; }
:root[data-theme="light"] .node-label { border-color: rgba(51,72,108,.16); box-shadow: 0 8px 22px rgba(49,69,105,.09); }
:root[data-theme="light"] .node-face {
  border-color: rgba(65,87,126,.22);
  background:
    linear-gradient(145deg, rgba(255,255,255,1), rgba(255,255,255,.76) 48%),
    linear-gradient(155deg, #ffffff, #eaf1fc);
  box-shadow: 0 14px 28px rgba(38,54,86,.18), inset 0 0 0 1px rgba(255,255,255,.92);
}
:root[data-theme="light"] .node-face::before {
  background: linear-gradient(120deg, transparent 25%, color-mix(in srgb, var(--node-color) 12%, transparent) 43%, transparent 60%);
}
:root[data-theme="light"] .node-face img { filter: saturate(1.35) contrast(1.12) drop-shadow(0 2px 4px rgba(32,50,83,.12)); }
:root[data-theme="light"] .space-node.is-platform .node-face img {
  filter: brightness(0) saturate(100%) invert(34%) sepia(99%) saturate(3961%) hue-rotate(222deg) brightness(101%) contrast(101%) drop-shadow(0 2px 4px rgba(36,91,255,.18));
}
:root[data-theme="light"] .node-side-right,
:root[data-theme="light"] .node-side-bottom {
  background: color-mix(in srgb, var(--node-color) 24%, #dce7f7);
  opacity: .7;
}
:root[data-theme="light"] .space-node.is-focused .node-face,
:root[data-theme="light"] .space-node.is-related .node-face,
:root[data-theme="light"] .space-node:hover .node-face,
:root[data-theme="light"] .space-node:focus-visible .node-face {
  border-color: color-mix(in srgb, var(--node-color) 70%, #ffffff);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--node-color) 12%, #ffffff), rgba(255,255,255,.98) 52%),
    linear-gradient(155deg, #ffffff, #edf3fd);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--node-color) 70%, transparent),
    0 14px 28px rgba(38,54,86,.22);
}
:root[data-theme="light"] .space-node.is-focused .node-face {
  box-shadow:
    0 0 0 2px var(--node-color),
    0 14px 30px rgba(38,54,86,.24);
}
.view-tab:focus-visible,
.camera-controls button:focus-visible,
.site-notice button:focus-visible,
.legal-dialog button:focus-visible,
.legal-dialog a:focus-visible,
.close-inspector:focus-visible,
.inspector-tab:focus-visible,
.integration-accordion > summary:focus-visible,
.copy-code-button:focus-visible,
.focus-node-button:focus-visible,
.integration-sources a:focus-visible,
.documentation-card:focus-visible,
.source-link:focus-visible { outline: 2px solid var(--gateway); outline-offset: 3px; }

@media (max-width: 1060px) {
  .brand-panel > div { display: none; }
  .brand-panel img { width: 104px; }
  .camera-controls span { display: none; }
  .camera-controls .theme-toggle-label { display: none; }
  .camera-controls .theme-toggle { width: 38px; min-width: 38px; padding: 0; }
}

@media (max-width: 760px) {
  :root { --site-notice-height: 62px; }
  .flow-edge { --flow-scale: .72; }
  :root[data-theme="dark"] .flow-edge { --flow-scale: .52; }
  .site-notice { gap: 8px; padding: 7px 9px; }
  .site-notice-copy { display: grid; gap: 4px; }
  .site-notice-copy span { font-size: .61rem; line-height: 1.22; }
  .site-notice-actions { gap: 7px; }
  .site-copyright { display: none; }
  .site-notice button { min-height: 34px; padding-inline: 9px; font-size: .61rem; }
  .hud-header { top: calc(var(--site-notice-height) + 8px); left: 9px; right: 9px; }
  .brand-panel { min-height: 50px; padding: 8px 10px; border-radius: 12px; }
  .brand-panel img { width: 94px; }
  .camera-controls { min-height: 50px; gap: 5px; padding: 6px; border-radius: 12px; }
  .camera-controls button { min-height: 36px; padding-inline: 10px; }
  .view-tabs { top: 58px; left: 0; right: 0; justify-content: flex-start; overflow-x: auto; border-radius: 12px; transform: none; scrollbar-width: none; }
  .view-tabs::-webkit-scrollbar { display: none; }
  .view-tab { min-height: 38px; padding-inline: 12px; }
  .level-legend { display: none; }
  .scene-status { left: 9px; bottom: 48px; width: min(360px, calc(100% - 18px)); }
  .interaction-guide { left: 9px; right: 9px; bottom: 8px; justify-content: center; padding: 8px 9px; transform: none; }
  .interaction-guide span:nth-of-type(2),
  .interaction-guide span:nth-of-type(4),
  .interaction-guide i:nth-of-type(2),
  .interaction-guide i:nth-of-type(4) { display: none; }
  .space-node { width: max(104px, calc(var(--node-render-size) + 26px)); gap: 5px; }
  .node-label { min-width: 96px; max-width: 124px; padding: 5px 7px 6px; }
  .space-node.is-child .node-label { max-width: 124px; }
  .node-label strong { font-size: 10.5px; line-height: 1.16; }
  .node-label small { font-size: 6.8px; line-height: 1.2; }
  .space-node.is-view-muted { opacity: .16; }
  .space-node.is-view-muted .node-label { opacity: 0; visibility: hidden; }
  .edge-label-group.is-lens { opacity: 0; }
  .inspector {
    top: auto;
    left: 9px;
    right: 9px;
    bottom: 9px;
    width: auto;
    max-height: 72vh;
    transform: translateY(calc(100% + 20px));
  }
  .inspector.is-open { transform: translateY(0); }
}

@media (max-width: 460px) {
  .site-notice-copy strong { font-size: .54rem; }
  .site-notice-copy span { font-size: .57rem; }
  .site-notice button { padding-inline: 8px; }
  .camera-controls button { font-size: .68rem; }
  .scene-status p { display: none; }
  .scene-status { width: auto; right: 9px; }
  .interaction-guide { font-size: .55rem; }
  .node-label { min-width: 88px; max-width: 110px; padding-inline: 6px; }
  .space-node.is-child .node-label { max-width: 110px; }
  .node-label strong { font-size: 10px; }
  .space-node.is-platform .node-label strong { font-size: 11.5px; }
  .inspector-tabs { grid-template-columns: 1fr 1.45fr; }
  .inspector-tab { padding-inline: 7px; font-size: .64rem; }
  .legal-dialog { width: calc(100% - 18px); max-height: calc(100% - 18px); border-radius: 16px; }
  .legal-dialog-header,
  .legal-dialog-footer { padding: 15px; }
  .legal-dialog-body { max-height: calc(100vh - 178px); padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .flow-ribbon-current,
  .flow-ribbon-crest { animation: none !important; }
}