:root {
  --paper: #111113;
  --panel: #18181a;
  --panel2: #212123;
  --ink: #ededf0;
  --dim: #a5a5ab;
  --faint: #68686f;
  --line: #303036;
  --healthy: #7fb59e;
  --rented: #829dc3;
  --partial: #a08fc4;
  --review: #c78f5d;
  --planned: #b7aa8b;
  --fault: #b97873;
  --status-missing-fill: #161618;
  --status-missing-surface: #1b1b1e;
  --status-missing-line: #34343a;
  --status-missing-ink: #b0b0b6;
  --status-missing-detail: #7b7b82;
  --status-offline-fill: #211819;
  --status-offline-surface: #291d1f;
  --status-offline-line: #74464a;
  --status-offline-ink: #d2b5b7;
  --status-offline-detail: #aa8588;
  --status-online-fill: #19201c;
  --status-online-surface: #202923;
  --status-online-line: #557563;
  --status-online-ink: #e4ece7;
  --status-online-detail: #a9c0b3;
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 13px/1.55 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
.shell { max-width: 1520px; margin: auto; padding: 44px 4vw 70px; }
.head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 42px; }
.headtitle { color: #f2f2f4; font-size: 22px; font-weight: 300; letter-spacing: .06em; }
.subhead { margin-top: 10px; color: #a4a4aa; font-size: 12.5px; }
.context { margin-top: 6px; color: #68686f; font-size: 11px; letter-spacing: .12em; }
.read { color: #77777e; font-size: 11px; font-variant-numeric: tabular-nums; }
.layout { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 48px; }
.rail { position: sticky; top: 44px; display: flex; flex-direction: column; align-self: start; gap: 16px; }
.rail a, .rail button { color: #85858b; font-size: 12px; letter-spacing: .08em; background: none; border: 0; padding: 0; font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.rail a:hover, .rail button:hover { color: #c7c7cb; }
.rail a.on { color: #ededf0; }
.railout { margin-top: 24px; padding-top: 24px; border-top: 1px solid #29292e; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 32px; }
.card { min-height: 118px; padding: 20px 22px; border: 1px solid #303036; border-radius: 14px; background: #19191b; }
.figure { font-size: 27px; font-weight: 100; letter-spacing: .03em; }
.label { margin-top: 12px; color: #4b4b4b; font-size: 10px; letter-spacing: .16em; }
.note { margin-top: 4px; color: #303030; font-size: 10px; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { padding: 0 16px 8px 0; border-bottom: 1px solid #101010; color: #303030; font-size: 10px; font-weight: 400; letter-spacing: .16em; text-align: left; }
td { padding: 12px 16px 12px 0; border-bottom: 1px solid #0d0d0d; color: #aaa; font-size: 12px; }
.muted { color: #444; }
.empty { padding: 28px; border: 1px solid #141414; border-radius: 16px; background: #030303; }
.empty h2 { margin: 0 0 8px; font-size: 14px; font-weight: 300; }
.empty p { max-width: 600px; margin: 0; color: #4c4c4c; }

.stage {
  position: relative;
  height: min(78vh, 900px);
  min-height: 620px;
  overflow: hidden;
  overscroll-behavior: contain;
  border: 1px solid #35353b;
  border-radius: 12px;
  background-color: #111113;
  background-image: radial-gradient(#2b2b30 .7px, transparent .7px);
  background-size: 22px 22px;
  cursor: grab;
  user-select: none;
}

.stage.dragging { cursor: grabbing; }
.stage .map-entity { cursor: grab; }
.stage.moving-system,
.stage.moving-system .map-entity.is-moving { cursor: grabbing; }
.stage.space-pan { cursor: grab; }
.stage.space-pan.dragging { cursor: grabbing; }
.stage.selecting-systems { cursor: crosshair; }
.stage svg { display: block; width: 100%; height: 100%; touch-action: none; }
.stage marker path { fill: #7d7d84; }
.boundary { fill: #18181a; stroke: #34343a; stroke-width: 1; }
.boundary.nested { fill: #1b1b1e; stroke: #404047; }
.planned-boundary { opacity: .68; }
.recovery-boundary { fill: #18181a; stroke: #34343a; }
.boundary-label { fill: #d0d0d4; font-size: 14px; letter-spacing: .01em; }
.nested-label { fill: #aaaab0; font-size: 12px; }
.edge { fill: none; stroke: #73737a; stroke-width: 1.15; vector-effect: non-scaling-stroke; }
.edge.flow { animation: flow 3s linear infinite; }
.edge.planned { stroke: #606067; stroke-dasharray: 2 5; animation: none; }
.edge.review { stroke: var(--review); stroke-dasharray: 5 5; animation: none; }
.edge.rented { stroke: #707078; }
.edge-label { fill: #b0b0b6; stroke: #111113; stroke-width: 4px; paint-order: stroke; font-size: 12px; }
.machine-read { fill: #a4a4aa; font-size: 12px; font-variant-numeric: tabular-nums; }
.status-nonexistent {
  --state-fill: var(--status-missing-fill);
  --state-surface: var(--status-missing-surface);
  --state-line: var(--status-missing-line);
  --state-ink: var(--status-missing-ink);
  --state-detail: var(--status-missing-detail);
  --state-opacity: .24;
}
.status-offline {
  --state-fill: var(--status-offline-fill);
  --state-surface: var(--status-offline-surface);
  --state-line: var(--status-offline-line);
  --state-ink: var(--status-offline-ink);
  --state-detail: var(--status-offline-detail);
  --state-opacity: .72;
}
.status-online {
  --state-fill: var(--status-online-fill);
  --state-surface: var(--status-online-surface);
  --state-line: var(--status-online-line);
  --state-ink: var(--status-online-ink);
  --state-detail: var(--status-online-detail);
  --state-opacity: 1;
}
.actor-neutral {
  --state-fill: #18181a;
  --state-surface: #202023;
  --state-line: #3e3e44;
  --state-ink: #c9c9ce;
  --state-detail: #929299;
  --state-opacity: .56;
}
.socket-connection { fill: none; stroke: #696970; stroke-width: 1.4; opacity: .52; vector-effect: non-scaling-stroke; }
.socket-connection.sibling { opacity: .64; }
.socket-connection.status-nonexistent,
.gateway-trace.status-nonexistent,
.key-management-trace.status-nonexistent,
.recovery-trace.status-nonexistent,
.core-trace.status-nonexistent,
.console-trace.status-nonexistent,
.node-trace.status-nonexistent,
.mental-trace.status-nonexistent,
.limbic-trace.status-nonexistent,
.psychos-com-trace.status-nonexistent { opacity: .16; }
.socket-connection.status-offline,
.gateway-trace.status-offline,
.key-management-trace.status-offline,
.recovery-trace.status-offline,
.core-trace.status-offline,
.console-trace.status-offline,
.node-trace.status-offline,
.mental-trace.status-offline,
.limbic-trace.status-offline,
.psychos-com-trace.status-offline { stroke: var(--status-offline-line); opacity: .62; }
.socket-connection.status-online,
.gateway-trace.status-online,
.key-management-trace.status-online,
.recovery-trace.status-online,
.core-trace.status-online,
.console-trace.status-online,
.node-trace.status-online,
.mental-trace.status-online,
.limbic-trace.status-online,
.psychos-com-trace.status-online { stroke: var(--status-online-line); opacity: .78; }
.flow-arrowhead { fill: #8a8a92; }
.map-entity .group-body { fill: var(--state-fill); stroke: var(--state-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map-entity .routing-gutter {
  fill: none;
  stroke: var(--state-line);
  stroke-width: 1;
  stroke-dasharray: 3 7;
  opacity: .24;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.map-entity .group-title { fill: var(--state-ink); font-size: 32px; font-weight: 300; }
.system-icon.psychos-icon { fill: var(--state-ink); }
.system-icon.line-icon { fill: none; stroke: var(--state-ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.core-trace { fill: none; stroke: #8a8a92; stroke-width: 1.35; opacity: .65; vector-effect: non-scaling-stroke; }
.core-trace.return { stroke-dasharray: 4 4; opacity: .5; }
.core-trace.recording { stroke: #a17d5a; opacity: .7; }
.core-trace.status-nonexistent { stroke: #696970; opacity: .16; }
.core-trace.status-offline { stroke: var(--status-offline-line); opacity: .62; }
.core-trace.status-online { stroke: var(--status-online-line); opacity: .78; }
.gateway-trace,
.key-management-trace,
.recovery-trace,
.console-trace,
.node-trace,
.mental-trace,
.limbic-trace,
.psychos-com-trace { fill: none; stroke: #8a8a92; stroke-width: 1.35; opacity: .64; vector-effect: non-scaling-stroke; }
.core-component .component-body,
.gateway-component .component-body,
.key-management-component .component-body,
.recovery-component .component-body,
.console-component .component-body,
.vault-component .component-body,
.node-component .component-body,
.mental-component .component-body,
.limbic-component .component-body,
.psychos-com-component .component-body { fill: var(--state-surface); stroke: var(--state-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.core-component .component-title,
.gateway-component .component-title,
.key-management-component .component-title,
.recovery-component .component-title,
.console-component .component-title,
.vault-component .component-title,
.node-component .component-title,
.mental-component .component-title,
.limbic-component .component-title,
.psychos-com-component .component-title { fill: var(--state-ink); font-size: 12px; font-weight: 400; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.core-component .component-detail,
.gateway-component .component-detail,
.key-management-component .component-detail,
.recovery-component .component-detail,
.console-component .component-detail,
.vault-component .component-detail,
.node-component .component-detail,
.mental-component .component-detail,
.limbic-component .component-detail,
.psychos-com-component .component-detail { fill: var(--state-detail); font-size: 11px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.section-group .section-body { fill: var(--state-fill); stroke: var(--state-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.section-group .section-title { fill: var(--state-ink); font-size: 18px; font-weight: 300; }
.node rect.body { fill: var(--state-surface); stroke: var(--state-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.node .n { fill: var(--state-ink); font-size: 16px; font-weight: 400; }
.node .w { fill: var(--state-detail); font-size: 13px; }
.node .v { fill: var(--state-ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.map-entity > .group-body,
.map-entity > .group-title,
.map-entity > .system-icon,
.map-entity > .system-socket,
.core-component > .component-body,
.core-component > .component-title,
.core-component > .component-detail,
.gateway-component > .component-body,
.gateway-component > .component-title,
.gateway-component > .component-detail,
.key-management-component > .component-body,
.key-management-component > .component-title,
.key-management-component > .component-detail,
.recovery-component > .component-body,
.recovery-component > .component-title,
.recovery-component > .component-detail,
.console-component > .component-body,
.console-component > .component-title,
.console-component > .component-detail,
.vault-component > .component-body,
.vault-component > .component-title,
.vault-component > .component-detail,
.node-component > .component-body,
.node-component > .component-title,
.node-component > .component-detail,
.mental-component > .component-body,
.mental-component > .component-title,
.mental-component > .component-detail,
.limbic-component > .component-body,
.limbic-component > .component-title,
.limbic-component > .component-detail,
.psychos-com-component > .component-body,
.psychos-com-component > .component-title,
.psychos-com-component > .component-detail,
.section-group > .section-body,
.section-group > .section-title,
.node > .body,
.node > .n,
.node > .w,
.node > .v,
.node > .system-socket { opacity: var(--state-opacity); }
.status-nonexistent > .group-title,
.status-nonexistent > .section-title,
.status-nonexistent > .component-title,
.status-nonexistent > .n { opacity: .56; }
.status-nonexistent > .component-detail,
.status-nonexistent > .w,
.status-nonexistent > .v { opacity: .42; }
.status-nonexistent > .system-socket { opacity: .5; }
.core-node .n { font-size: 30px; font-weight: 300; }
.section-node .n,
.component-node .n { font-size: 14px; font-weight: 400; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.system-socket .socket-ring { fill: var(--state-surface); stroke: var(--state-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.system-socket .socket-core { fill: var(--state-ink); }
.system-socket .socket-name,
.system-socket .socket-function {
  stroke: #111113;
  stroke-linejoin: round;
  paint-order: stroke;
}
.system-socket .socket-name { fill: var(--state-ink); stroke-width: 5px; font-size: 12px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.system-socket .socket-function { fill: var(--state-detail); stroke-width: 4px; font-size: 10px; }
.zoom-far .routing-gutter,
.zoom-medium .routing-gutter,
.zoom-far .component-detail,
.zoom-far .node .w,
.zoom-far .node .v,
.zoom-far .system-socket .socket-function,
.zoom-medium .component-detail,
.zoom-medium .node .w,
.zoom-medium .node .v,
.zoom-medium .system-socket .socket-function {
  display: none;
}
[data-node-id] { transition: filter 180ms linear; }
[data-node-id].is-active {
  filter: brightness(1.8);
}
[data-node-id].is-compatible {
  filter: brightness(1.4);
}
[data-node-id].is-selected {
  filter: brightness(1.55);
}
[data-flow] {
  stroke-width: 1;
  transition: opacity 180ms linear, stroke 180ms linear, stroke-width 180ms linear;
}
.zoom-far [data-flow] { stroke-width: 1; opacity: .28; }
.zoom-far [data-flow].status-nonexistent { opacity: .1; }
.zoom-medium [data-flow] { stroke-width: 1; }
.zoom-medium [data-flow].status-nonexistent { opacity: .16; }
.zoom-close [data-flow] { stroke-width: 2; }
.zoom-close [data-flow].status-nonexistent { opacity: .22; }
.stage [data-flow].is-compatible {
  stroke: #9a9aa3;
  opacity: .46;
}
.layout-guides { pointer-events: none; }
.layout-interactions { pointer-events: none; }
.layout-interactions .resize-handle {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}
.layout-interactions .resize-nw,
.layout-interactions .resize-se { cursor: nwse-resize; }
.layout-interactions .resize-ne,
.layout-interactions .resize-sw { cursor: nesw-resize; }
.selection-box {
  fill: rgba(190, 190, 198, .06);
  stroke: #8d8d95;
  stroke-width: 1;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}
.layout-guide {
  stroke: #8d8d95;
  stroke-width: 1;
  stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
}
.layout-measure,
.layout-position {
  fill: #c7c7cd;
  stroke: #111113;
  stroke-width: 5px;
  paint-order: stroke;
  font: 12px ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.maphint { position: absolute; right: 20px; bottom: 18px; color: #8c8c93; font-size: 10px; pointer-events: none; }

@keyframes flow { to { stroke-dashoffset: -20; } }

.login { min-height: 100vh; }
.logincard { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 18vh 6vw; }
.logintitle { color: #ececec; font-size: clamp(24px, 3vw, 38px); font-weight: 100; letter-spacing: .1em; }
.loginbox { display: flex; flex-direction: column; gap: 12px; width: min(320px, 88vw); }
.loginbox input { width: 100%; height: 32px; padding: 0 14px; border: 1px solid #1c1c1c; border-radius: 12px; outline: none; background: #070707; color: #b5b5b5; font: inherit; letter-spacing: .04em; }
.loginbox input::placeholder { color: #333; }
.loginbox input:focus { border-color: #303030; }
.loginbox button { align-self: center; height: 32px; margin-top: 0; padding: 0 26px; border: 1px solid #202020; border-radius: 999px; background: transparent; color: #9a9a9a; font: inherit; line-height: 30px; letter-spacing: .06em; cursor: pointer; }
.loginbox button:hover { border-color: #383838; color: #eee; }
.loginerror { min-height: 1.2em; color: #5c3434; font-size: 12px; text-align: center; }

@media (max-width: 760px) {
  .shell { padding: 30px 5vw 55px; }
  .layout { grid-template-columns: 1fr; gap: 28px; }
  .rail { position: static; flex-direction: row; }
  .cards { grid-template-columns: 1fr; }
  .head { margin-bottom: 28px; }
  .stage { height: 70vh; min-height: 520px; }
  .maphint { top: 16px; right: 16px; bottom: auto; max-width: 190px; text-align: right; }
}