:root {
  --system-sidebar: 294px;
  --system-outline: 208px;
  --system-blue: #1261e8;
  --system-orange: #ff4a22;
  --system-teal: #00a88f;
  --system-canvas: #ffffff;
  --system-subtle: #f7f9fc;
}

html,
body.page-system { height: 100%; }

body.page-system {
  overflow: hidden;
  background: var(--system-canvas);
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.svg-sprite symbol,
.page-system svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.system-header {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(18px, 2vw, 34px);
  flex: 0 0 var(--header-h);
}

.system-header .site-nav {
  justify-self: end;
  gap: var(--site-nav-gap);
  min-width: 0;
}

.system-tree-toggle {
  justify-self: end;
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.system-tree-toggle svg { width: 17px; height: 17px; }

.system-shell {
  height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: var(--system-sidebar) minmax(0, 1fr);
  overflow: hidden;
}

.system-sidebar {
  position: relative;
  z-index: 20;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: #fbfcfe;
  border-right: 1px solid var(--line);
}

.system-sidebar-head {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px 30px;
}

.system-sidebar-head h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.035em;
}

.system-sidebar-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.system-tree-close {
  display: none;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}

.system-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 38px;
  margin: 0 24px 14px 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #8390a5;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.system-search:focus-within {
  border-color: var(--system-blue);
  box-shadow: 0 0 0 3px rgba(18,97,232,.1);
}

.system-search svg {
  width: 16px;
  height: 16px;
  margin-left: 11px;
  flex: 0 0 auto;
}

.system-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 36px 0 9px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
}

.system-search input::placeholder { color: #8b96a8; }
.system-search kbd {
  position: absolute;
  right: 9px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f8fafc;
  color: #7c8797;
  font: 10px var(--font-mono);
}

.system-tree {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 13px 20px 18px;
  scrollbar-width: thin;
  scrollbar-color: #c7d1df transparent;
}

.system-overview-node,
.system-group-toggle,
.system-node {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.system-overview-node {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  margin-bottom: 7px;
  padding: 0 12px;
  border-radius: 5px;
  color: #344054;
  font-size: 12px;
  font-weight: 750;
}

.system-overview-node svg { width: 16px; height: 16px; }
.system-overview-node:hover { background: #f0f4fa; }
.system-overview-node.is-selected { background: #eaf2ff; color: var(--system-blue); }

.system-group { margin-top: 6px; }
.system-group.is-filter-empty { display: none; }

.system-group-toggle {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 9px;
  border-radius: 5px;
  color: #2a3342;
}

.system-group-toggle:hover { background: #f1f4f8; }
.system-group-toggle svg {
  width: 14px;
  height: 14px;
  transform: rotate(0deg);
  transition: transform .18s ease;
}
.system-group:not(.is-open) .system-group-toggle svg { transform: rotate(-90deg); }
.system-group-toggle strong { font-size: 12px; font-weight: 780; }
.system-group-toggle span { color: #8791a1; font: 10px var(--font-mono); }
.system-group:not(.is-open) .system-group-items { display: none; }

.system-group-items { padding: 1px 0 4px 23px; }

.system-node {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 4px 9px;
  border-radius: 5px;
  color: #526078;
}

.system-node:hover { background: #f0f4fa; color: var(--ink); }
.system-node.is-selected { background: #e7f0ff; color: var(--system-blue); }
.system-node.is-hidden { display: none; }
.system-node svg { width: 14px; height: 14px; }
.system-node > span { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.system-node b { font: 600 11px/1.3 var(--font-mono); white-space: nowrap; }
.system-node small {
  min-width: 0;
  overflow: hidden;
  color: #8a95a6;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-node.is-selected small { color: #557dbb; }

.system-sidebar-foot {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 22px 0 30px;
  border-top: 1px solid var(--line);
  background: #fff;
  color: #7b8798;
  font-size: 10px;
}
.system-sidebar-foot a { color: var(--system-blue); text-decoration: none; }

.system-content {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

.system-overview,
.system-detail {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.system-overview {
  padding: 18px clamp(28px, 3vw, 54px) 52px;
}

.system-breadcrumb {
  margin: 0;
  color: #7b8799;
  font-size: 10px;
  letter-spacing: .02em;
}
.system-breadcrumb span { padding: 0 7px; color: #aab3c1; }

.system-intro {
  width: min(100%, 1420px);
  margin: 0 auto;
}

.system-intro-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
  margin-top: 13px;
}

.system-intro h1,
.system-detail-head h1 {
  margin: 0;
  color: #0d1524;
  font-size: clamp(36px, 3vw, 52px);
  line-height: 1.08;
  letter-spacing: -.055em;
  font-weight: 850;
}

.system-intro-row > div:first-child > p {
  margin: 10px 0 0;
  color: #5d6a80;
  font-size: 14px;
}

.system-reading-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 3px;
  color: #5d6a80;
}
.system-reading-hint svg { width: 19px; height: 19px; color: var(--system-blue); flex: 0 0 auto; }
.system-reading-hint p { margin: 0; font-size: 10px; line-height: 1.75; }
.system-reading-hint strong { color: var(--system-blue); font-weight: 750; }

.architecture-board {
  width: min(100%, 1420px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 138px;
  gap: 26px;
  margin: 24px auto 0;
}

.architecture-board > figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.architecture-flow { min-width: 0; }

.architecture-layer {
  --layer-color: var(--system-blue);
  position: relative;
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  gap: 18px;
  min-height: 86px;
  align-items: stretch;
  margin-bottom: 12px;
  padding: 10px 12px 10px 16px;
  border: 1px solid color-mix(in srgb, var(--layer-color) 23%, #dbe3ef);
  border-left: 3px solid var(--layer-color);
  border-radius: 7px;
  background: color-mix(in srgb, var(--layer-color) 2.8%, #fff);
}

.architecture-layer:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -13px;
  left: calc(50% + 70px);
  width: 1px;
  height: 13px;
  background: var(--layer-color);
}

.architecture-layer:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: -13px;
  left: calc(50% + 67px);
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--layer-color);
  border-bottom: 1px solid var(--layer-color);
  transform: rotate(45deg);
}

.layer-application,
.layer-runtime { --layer-color: var(--system-orange); }
.layer-service { --layer-color: var(--system-teal); }

.architecture-layer > header {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-content: center;
  gap: 7px;
  border-right: 1px solid color-mix(in srgb, var(--layer-color) 17%, #dbe3ef);
}
.architecture-layer > header > span {
  padding-top: 2px;
  color: var(--layer-color);
  font: 700 9px/1 var(--font-mono);
}
.architecture-layer h2 { margin: 0; color: var(--layer-color); font-size: 16px; letter-spacing: -.025em; }
.architecture-layer header p { margin: 3px 0 0; color: #788497; font-size: 9px; line-height: 1.5; }

.architecture-nodes {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
}

.architecture-node {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--layer-color) 5%, #fff);
}
.architecture-node svg { width: 23px; height: 23px; flex: 0 0 auto; color: var(--layer-color); }
.architecture-node div { min-width: 0; }
.architecture-node b { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.architecture-node small { display: block; overflow: hidden; margin-top: 1px; color: #758196; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }

.architecture-control-plane {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 478px;
  padding: 23px 12px 18px;
  border: 1px solid #a9c6f8;
  border-radius: 7px;
  background: #f8fbff;
  color: #183a72;
}
.architecture-control-plane::before {
  content: "";
  position: absolute;
  top: 38px;
  bottom: 38px;
  left: -27px;
  width: 26px;
  border-top: 1px solid var(--system-blue);
  border-bottom: 1px solid var(--system-orange);
  border-left: 1px solid var(--system-teal);
}
.architecture-control-plane > svg { width: 27px; height: 27px; color: var(--system-blue); }
.architecture-control-plane h2 { margin: 16px 0 20px; font-size: 18px; line-height: 1.3; text-align: center; }
.architecture-control-plane ul { width: 100%; margin: 0; padding: 0; list-style: none; }
.architecture-control-plane li { padding: 9px 0; border-top: 1px solid #dbe7fa; color: #5b6e8c; font-size: 9.5px; text-align: center; }

.system-control-scope {
  width: min(100%, 1420px);
  margin: 25px auto 0;
}
.system-control-scope h2 {
  margin: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid #b8c4d5;
  font-size: 22px;
  letter-spacing: -.035em;
}
.system-control-scope ol { margin: 0; padding: 0; list-style: none; }
.system-control-scope li {
  display: grid;
  grid-template-columns: 40px 105px minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
}
.system-control-scope li span { color: var(--system-blue); font: 750 11px var(--font-mono); }
.system-control-scope li:nth-child(2) span,
.system-control-scope li:nth-child(4) span { color: var(--system-orange); }
.system-control-scope li:nth-child(3) span { color: var(--system-teal); }
.system-control-scope li strong { font-size: 14px; }
.system-control-scope li p { margin: 0; color: #627086; font-size: 10.5px; }

/* System detail workbench */
.system-detail {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}
.system-detail[hidden],
.system-overview[hidden] { display: none !important; }

.system-detail-head {
  padding: 18px clamp(28px, 3vw, 48px) 16px;
  border-bottom: 1px solid var(--line);
}
.system-detail-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  margin-top: 10px;
}
.system-detail-head h1 { font-size: clamp(30px, 2.3vw, 42px); }
.system-detail-title-row > div:first-child > p {
  max-width: 980px;
  margin: 8px 0 0;
  color: #5e6c81;
  font-size: 12.5px;
  line-height: 1.7;
}
.system-detail-actions a,
.system-artifact-tabs > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--system-blue);
  font-size: 10.5px;
  font-weight: 700;
  text-decoration: none;
}
.system-detail-actions svg,
.system-artifact-tabs > a svg { width: 15px; height: 15px; }

.system-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin: 12px 0 0;
}
.system-detail-meta div { display: flex; align-items: baseline; gap: 8px; }
.system-detail-meta div + div { padding-left: 30px; border-left: 1px solid var(--line); }
.system-detail-meta dt { color: #7d899a; font-size: 9px; }
.system-detail-meta dd { margin: 0; color: #4c5b72; font-size: 9.5px; }

.system-artifact-tabs {
  min-height: 52px;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 clamp(28px, 3vw, 48px);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.system-artifact-tabs button {
  position: relative;
  min-width: 104px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: #536075;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.system-artifact-tabs button::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -1px;
  left: 18px;
  height: 3px;
  background: var(--system-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.system-artifact-tabs button:hover,
.system-artifact-tabs button.is-active { color: var(--system-blue); }
.system-artifact-tabs button.is-active::after { transform: scaleX(1); }
.system-artifact-tabs > a { margin-left: auto; }

.system-artifact-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--system-outline);
  overflow: hidden;
}

.system-frame-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #f6f8fb;
}
.system-frame-shell iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #fff;
  opacity: 1;
  transition: opacity .16s ease;
}
.system-frame-shell[data-loading="true"] iframe { opacity: .25; }
.system-frame-loading {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: none;
  align-items: center;
  gap: 10px;
  color: #6d7a8e;
  font-size: 11px;
  transform: translate(-50%, -50%);
}
.system-frame-shell[data-loading="true"] .system-frame-loading { display: flex; }
.system-frame-loading span {
  width: 14px;
  height: 14px;
  border: 2px solid #c7d6ec;
  border-top-color: var(--system-blue);
  border-radius: 50%;
  animation: system-spin .75s linear infinite;
}
@keyframes system-spin { to { transform: rotate(360deg); } }

.system-detail-outline {
  min-width: 0;
  padding: 24px 22px;
  border-left: 1px solid var(--line);
  background: #fff;
}
.system-detail-outline h2 { margin: 0 0 13px; font-size: 12px; }
.system-detail-outline nav { display: grid; }
.system-detail-outline button {
  position: relative;
  min-height: 34px;
  padding: 0 0 0 13px;
  border: 0;
  background: transparent;
  color: #6d788a;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}
.system-detail-outline button::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 2px;
  background: #e2e7ef;
}
.system-detail-outline button:hover,
.system-detail-outline button.is-active { color: var(--system-blue); }
.system-detail-outline button.is-active::before { background: var(--system-blue); }
.system-detail-outline p {
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  color: #8a94a4;
  font-size: 9px;
  line-height: 1.7;
}
.system-detail-outline.is-disabled { opacity: .38; pointer-events: none; }

.system-drawer-scrim { display: none; }

/* System architecture homepage */

.system-home {
  padding: 0;
  background: #fff;
}

.system-home-hero {
  width: min(100%, 1600px);
  min-height: 660px;
  display: grid;
  grid-template-columns: minmax(620px, .9fr) minmax(650px, 1.1fr);
  align-items: center;
  gap: clamp(42px, 5vw, 84px);
  margin: 0 auto;
  padding: 68px var(--gutter) 66px;
  border-bottom: 1px solid var(--line);
}

.system-home-copy h1 {
  max-width: 680px;
  margin: 0;
  color: #0b111c;
  font-size: clamp(50px, 3.6vw, 60px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.065em;
}
.system-home-copy > p {
  max-width: 620px;
  margin: 28px 0 0;
  color: #596579;
  font-size: 17px;
  line-height: 1.85;
}
.system-home-actions { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 38px; }
.system-home-actions button,
.system-domain-open {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid var(--system-blue);
  background: transparent;
  color: var(--system-blue);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.system-blueprint {
  position: relative;
  min-width: 0;
  height: 540px;
  margin: 0;
  perspective: 1100px;
}
.system-blueprint > figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.system-blueprint-sheet {
  --sheet-color: var(--system-blue);
  position: absolute;
  z-index: 2;
  width: 200px;
  height: 350px;
  padding: 22px 18px;
  border: 1.5px solid var(--sheet-color);
  background: rgba(255,255,255,.96);
  color: var(--sheet-color);
  transform: skewY(-4deg);
  box-shadow: 0 18px 36px rgba(34,82,153,.05);
}
.system-blueprint-sheet::before {
  content: "";
  position: absolute;
  inset: -17px 13px 17px -13px;
  z-index: -1;
  border: 1px dashed var(--sheet-color);
  opacity: .46;
}
.system-blueprint-sheet > * { transform: skewY(4deg); }
.system-blueprint-sheet > span { display: block; font: 750 10px var(--font-mono); }
.system-blueprint-sheet h2 { margin: 8px 0 0; color: #172238; font-size: 15px; white-space: nowrap; }
.system-blueprint-sheet > svg { width: 30px; height: 30px; margin-top: 43px; }
.system-blueprint-sheet ul { margin: 28px 0 0; padding: 0; list-style: none; }
.system-blueprint-sheet li { min-height: 34px; display: flex; align-items: center; border-bottom: 1px solid #dce6f4; color: #536178; font-size: 9.5px; }
.system-sheet-channel { z-index: 1; top: 45px; left: 0; }
.system-sheet-application { z-index: 2; top: 73px; left: 112px; --sheet-color: var(--system-orange); }
.system-sheet-service { z-index: 3; top: 101px; left: 224px; --sheet-color: var(--system-teal); }
.system-sheet-data { z-index: 4; top: 129px; left: 336px; }
.system-sheet-runtime { z-index: 5; top: 157px; left: 448px; --sheet-color: var(--system-orange); }
.system-blueprint-control {
  position: absolute;
  z-index: 8;
  top: 59px;
  right: 0;
  width: 132px;
  min-height: 382px;
  padding: 24px 15px;
  border: 1.5px solid #82aef5;
  background: #f6f9ff;
  color: #173c78;
  box-shadow: 0 18px 36px rgba(34,82,153,.07);
}
.system-blueprint-control::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: -16px;
  width: 15px;
  border-top: 1px solid var(--system-blue);
  border-bottom: 1px solid var(--system-orange);
  border-left: 1px solid var(--system-teal);
}
.system-blueprint-control h2 { margin: 0; font-size: 19px; line-height: 1.35; }
.system-blueprint-control ul { margin: 45px 0 0; padding: 0; list-style: none; }
.system-blueprint-control li { padding: 11px 0; border-top: 1px solid #d6e3f8; color: #546b91; font-size: 9px; }
.system-blueprint-evidence {
  position: absolute;
  z-index: 9;
  right: 151px;
  bottom: 43px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid #b5c8e7;
  background: #fff;
  color: #4d6283;
  font-size: 8.5px;
}
.system-blueprint-evidence i { color: var(--system-blue); font-style: normal; }
.system-blueprint-axis {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8390a4;
  font: 7.5px var(--font-mono);
  letter-spacing: .1em;
}
.system-blueprint-axis i { color: #7595c8; font-style: normal; }

.system-home-section {
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 72px var(--gutter) 82px;
  border-bottom: 1px solid var(--line);
}
.system-home-heading {
  display: grid;
  grid-template-columns: 7px auto minmax(80px, 1fr) auto;
  align-items: center;
  gap: 16px;
}
.system-home-heading > span { width: 7px; height: 42px; background: var(--system-blue); }
.system-home-heading h2 { margin: 0; color: #0d1524; font-size: clamp(29px, 2.6vw, 40px); line-height: 1.15; letter-spacing: -.045em; }
.system-home-heading > i { height: 1px; background: var(--system-blue); }
.system-home-heading > p { margin: 0; color: #647187; font-size: 11px; white-space: nowrap; }
.system-home-lead { margin: 16px 0 0; color: #647187; font-size: 12px; }

.system-layer-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid #b8c4d5;
  border-bottom: 1px solid #b8c4d5;
  list-style: none;
}
.system-layer-rail li {
  position: relative;
  min-height: 170px;
  display: grid;
  grid-template-columns: 30px 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 25px 15px 20px;
  border-right: 1px solid var(--line);
}
.system-layer-rail li:last-child { border-right: 0; }
.system-layer-rail li > span { color: var(--system-blue); font: 800 12px var(--font-mono); }
.system-layer-rail li:nth-child(2) > span,
.system-layer-rail li:nth-child(5) > span { color: var(--system-orange); }
.system-layer-rail li:nth-child(3) > span { color: var(--system-teal); }
.system-layer-rail svg { width: 30px; height: 30px; color: var(--system-blue); }
.system-layer-rail li:nth-child(2) svg,
.system-layer-rail li:nth-child(5) svg { color: var(--system-orange); }
.system-layer-rail li:nth-child(3) svg { color: var(--system-teal); }
.system-layer-rail h3 { margin: 0; font-size: 14px; }
.system-layer-rail p { margin: 11px 0 0; color: #718096; font-size: 9.5px; line-height: 1.7; }
.system-layer-rail li > i { align-self: center; color: #7f9ac5; font-style: normal; }

.system-control-story { background: #fbfcff; }
.system-control-story-grid {
  display: grid;
  grid-template-columns: minmax(540px, 1.2fr) 92px minmax(360px, .8fr);
  gap: 28px;
  margin-top: 40px;
}
.system-runtime-plane,
.system-control-duties { min-width: 0; border-top: 1px solid #aebbd0; border-bottom: 1px solid #aebbd0; background: #fff; }
.system-runtime-plane > header,
.system-control-duties > header { display: grid; grid-template-columns: 5px auto 1fr; align-items: center; gap: 12px; min-height: 62px; border-bottom: 1px solid var(--line); }
.system-runtime-plane > header > span,
.system-control-duties > header > span { width: 5px; height: 26px; background: var(--system-blue); }
.system-runtime-plane header h3,
.system-control-duties header h3 { margin: 0; font-size: 15px; }
.system-runtime-plane header p { margin: 0; justify-self: end; padding-right: 18px; color: #7c8799; font-size: 9px; }
.system-runtime-plane ol { margin: 0; padding: 0; list-style: none; }
.system-runtime-plane li { min-height: 58px; display: grid; grid-template-columns: 32px 30px 100px minmax(0, 1fr) 1fr; align-items: center; gap: 10px; padding: 7px 16px; border-bottom: 1px solid #edf0f5; }
.system-runtime-plane li:last-child { border-bottom: 0; }
.system-runtime-plane li > span { color: var(--system-blue); font: 750 9px var(--font-mono); }
.system-runtime-plane svg { width: 23px; height: 23px; color: var(--system-blue); }
.system-runtime-plane b { font-size: 11px; }
.system-runtime-plane li p { margin: 0; color: #6e7b90; font-size: 9.5px; }
.system-runtime-plane li i { height: 1px; background: repeating-linear-gradient(90deg, #a9bee0 0 5px, transparent 5px 9px); }
.system-control-spine { display: grid; place-items: center; align-content: center; gap: 26px; border: 1px solid #9bbcf0; background: #f4f8ff; color: #173d7c; }
.system-control-spine span { font-size: 19px; font-weight: 850; line-height: 1.55; text-align: center; }
.system-control-spine small { color: #6580a8; font-size: 8.5px; line-height: 1.7; text-align: center; }
.system-control-duties dl { margin: 0; }
.system-control-duties dl > div { display: grid; grid-template-columns: 42px minmax(0, 1fr) 70px; gap: 12px; align-items: center; min-height: 74px; padding: 10px 14px; border-bottom: 1px solid #edf0f5; }
.system-control-duties dl > div:last-child { border-bottom: 0; }
.system-control-duties dt { color: var(--system-blue); font-size: 12px; font-weight: 800; }
.system-control-duties dd { margin: 0; color: #6d798c; font-size: 9px; line-height: 1.55; }
.system-control-duties strong { color: #516b94; font-size: 8.5px; text-align: right; }

.system-domain-columns {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 34px;
  border-top: 1px solid #b8c4d5;
  border-bottom: 1px solid #b8c4d5;
}
.system-domain-columns section { min-height: 230px; padding: 23px 20px; border-right: 1px solid var(--line); }
.system-domain-columns section:last-child { border-right: 0; }
.system-domain-columns section > span { color: var(--system-blue); font: 850 35px/1 var(--font-mono); }
.system-domain-columns section:nth-child(2) > span,
.system-domain-columns section:nth-child(5) > span { color: var(--system-orange); }
.system-domain-columns section:nth-child(3) > span { color: var(--system-teal); }
.system-domain-columns h3 { margin: 14px 0 20px; font-size: 15px; }
.system-domain-columns button { padding: 3px 5px; border: 0; background: #edf3ff; color: var(--system-blue); font: 700 10px var(--font-mono); cursor: pointer; }
.system-domain-columns p { margin: 18px 0 0; color: #718096; font-size: 9.5px; line-height: 1.8; }
.system-domain-open { margin-top: 28px; }

.system-evidence-chain { background: #fbfcff; }
.system-evidence-chain > ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 38px 0 0;
  padding: 0;
  border-top: 1px solid #b8c4d5;
  border-bottom: 1px solid #b8c4d5;
  list-style: none;
}
.system-evidence-chain > ol li { min-height: 150px; display: grid; grid-template-columns: 35px 42px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 22px 20px; border-right: 1px solid var(--line); }
.system-evidence-chain > ol li:last-child { border-right: 0; }
.system-evidence-chain > ol span { color: var(--system-blue); font: 800 10px var(--font-mono); }
.system-evidence-chain > ol svg { width: 31px; height: 31px; color: var(--system-blue); }
.system-evidence-chain > ol h3 { margin: 0; font-size: 14px; }
.system-evidence-chain > ol p { margin: 7px 0 0; color: #728096; font-size: 9.5px; line-height: 1.6; }
.system-evidence-chain > ol i { color: var(--system-blue); font-style: normal; }

@media (max-width: 1360px) {
  :root { --system-sidebar: 274px; --system-outline: 184px; }
  .system-header { grid-template-columns: auto minmax(0, 1fr); padding-inline: var(--gutter); }
  .system-header .site-nav { gap: var(--site-nav-gap); }
  .system-header .site-nav a { font-size: var(--site-nav-font-size); }
  .architecture-layer { grid-template-columns: 152px minmax(0, 1fr); }
  .architecture-node { padding-inline: 9px; }
  .system-home-hero { grid-template-columns: minmax(390px, .78fr) minmax(610px, 1.22fr); gap: 42px; }
  .system-home-copy h1 { font-size: clamp(48px, 4.25vw, 60px); }
  .system-blueprint-sheet { width: 178px; }
  .system-sheet-application { left: 96px; }
  .system-sheet-service { left: 192px; }
  .system-sheet-data { left: 288px; }
  .system-sheet-runtime { left: 384px; }
  .system-blueprint-control { width: 120px; }
  .system-control-story-grid { grid-template-columns: minmax(480px, 1.15fr) 82px minmax(330px, .85fr); gap: 22px; }
  .system-layer-rail li { grid-template-columns: 25px 34px minmax(0, 1fr) auto; padding-inline: 11px; gap: 8px; }
}

@media (max-width: 1120px) {
  .system-header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .system-header .site-nav { gap: 18px; }
  .system-header .site-nav a { display: none; }
  .system-header .site-nav a.is-active { display: flex; }
  .system-tree-toggle { display: inline-flex; margin-left: 0; }
  .system-shell { grid-template-columns: minmax(0, 1fr); }
  .system-sidebar {
    position: fixed;
    z-index: 220;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 88vw);
    transform: translateX(-105%);
    transition: transform .24s ease;
    box-shadow: 18px 0 40px rgba(16,31,55,.15);
  }
  .page-system.tree-open .system-sidebar { transform: none; }
  .system-tree-close { display: block; }
  .system-drawer-scrim {
    position: fixed;
    z-index: 210;
    inset: 0;
    display: block;
    background: rgba(9,17,31,.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease;
  }
  .page-system.tree-open .system-drawer-scrim { opacity: 1; pointer-events: auto; }
  .system-detail-outline { display: none; }
  .system-artifact-layout { grid-template-columns: minmax(0, 1fr); }
  .system-home-hero { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 72px; }
  .system-home-copy { width: min(100%, 760px); }
  .system-home-copy h1 { font-size: clamp(50px, 7vw, 66px); }
  .system-blueprint { width: min(100%, 820px); margin: 0 auto; }
  .system-control-story-grid { grid-template-columns: minmax(0, 1fr); }
  .system-control-spine { min-height: 78px; grid-template-columns: auto auto; gap: 34px; }
  .system-control-spine span { writing-mode: horizontal-tb; }
  .system-control-spine span br { display: none; }
  .system-control-spine small { text-align: left; }
  .system-domain-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .system-domain-columns section:nth-child(3) { border-right: 0; }
  .system-domain-columns section:nth-child(n+4) { border-top: 1px solid var(--line); }
  .system-domain-columns section:nth-child(5) { border-right: 0; }
}

@media (max-width: 820px) {
  .system-overview { padding-inline: 20px; }
  .system-overview.system-home { padding-inline: 0; }
  .system-intro-row { grid-template-columns: 1fr; gap: 18px; }
  .system-reading-hint { padding: 12px 0; border-top: 1px solid var(--line); }
  .architecture-board {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
  .system-overview { overflow-x: hidden; }
  .architecture-layer {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }
  .architecture-layer > header {
    grid-template-columns: 24px minmax(0, 1fr);
    padding: 0 0 9px;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--layer-color) 17%, #dbe3ef);
  }
  .architecture-layer:not(:last-child)::after,
  .architecture-layer:not(:last-child)::before { left: 50%; }
  .architecture-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .architecture-control-plane {
    min-height: 0;
    display: grid;
    grid-template-columns: 32px auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
  }
  .architecture-control-plane::before { display: none; }
  .architecture-control-plane h2 { margin: 0; font-size: 16px; text-align: left; }
  .architecture-control-plane h2 br { display: none; }
  .architecture-control-plane ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .architecture-control-plane li { padding: 5px 3px; border-top: 0; border-left: 1px solid #dbe7fa; }
  .system-control-scope { min-width: 0; }
  .system-control-scope li { grid-template-columns: 34px 68px minmax(0, 1fr); gap: 4px; padding: 8px 0; }
  .system-detail-title-row { grid-template-columns: 1fr; gap: 10px; }
  .system-detail-actions { display: none; }
  .system-detail-meta div + div { width: 100%; padding: 0; border: 0; }
  .system-artifact-tabs { padding-inline: 10px; }
  .system-artifact-tabs button { min-width: 70px; padding-inline: 10px; }
  .system-artifact-tabs > a span { display: none; }
  .system-home-hero { padding: 56px 20px 52px; }
  .system-home-copy h1 { font-size: clamp(42px, 9vw, 56px); }
  .system-home-copy > p { font-size: 15px; }
  .system-home-section { padding: 56px 20px 62px; }
  .system-home-heading { grid-template-columns: 7px auto minmax(24px, 1fr); }
  .system-home-heading > p { grid-column: 2 / -1; white-space: normal; }
  .system-blueprint { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 35px; }
  .system-blueprint-sheet,
  .system-sheet-channel,
  .system-sheet-application,
  .system-sheet-service,
  .system-sheet-data,
  .system-sheet-runtime {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    min-height: 185px;
    padding: 18px;
    transform: none;
  }
  .system-blueprint-sheet::before { display: none; }
  .system-blueprint-sheet > * { transform: none; }
  .system-blueprint-sheet > svg { margin-top: 22px; }
  .system-blueprint-sheet ul { margin-top: 18px; }
  .system-blueprint-control { position: relative; inset: auto; width: auto; min-height: 185px; padding: 18px; }
  .system-blueprint-control::before { display: none; }
  .system-blueprint-control h2 br { display: none; }
  .system-blueprint-control ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; margin-top: 20px; }
  .system-blueprint-evidence { position: relative; inset: auto; grid-column: 1 / -1; justify-content: center; }
  .system-blueprint-axis { display: none; }
  .system-layer-rail { grid-template-columns: minmax(0, 1fr); }
  .system-layer-rail li { min-height: 92px; grid-template-columns: 32px 38px minmax(0, 1fr); align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
  .system-layer-rail li:last-child { border-bottom: 0; }
  .system-layer-rail li > i { display: none; }
  .system-layer-rail p { margin-top: 5px; }
  .system-control-story-grid { margin-top: 30px; }
  .system-runtime-plane li { grid-template-columns: 27px 28px 92px minmax(0, 1fr); }
  .system-runtime-plane li i { display: none; }
  .system-control-duties dl > div { grid-template-columns: 40px minmax(0, 1fr) 66px; }
  .system-domain-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-domain-columns section:nth-child(2n) { border-right: 0; }
  .system-domain-columns section:nth-child(3) { border-right: 1px solid var(--line); }
  .system-domain-columns section:nth-child(n+3) { border-top: 1px solid var(--line); }
  .system-evidence-chain > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-evidence-chain > ol li:nth-child(2) { border-right: 0; }
  .system-evidence-chain > ol li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 560px) {
  :root { --header-h: 64px; }
  .system-header { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 16px; }
  .system-header .brand { font-size: 17px; }
  .system-header .brand img { width: 28px; height: 28px; flex-basis: 28px; }
  .system-header .site-nav { display: none; }
  .system-tree-toggle { grid-column: 2; margin-left: 0; }
  .system-tree-toggle span { display: none; }
  .architecture-nodes { grid-template-columns: minmax(0, 1fr); }
  .architecture-control-plane { grid-template-columns: 28px minmax(0, 1fr); }
  .architecture-control-plane ul { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-control-scope li { grid-template-columns: 30px 64px minmax(0, 1fr); }
  .system-control-scope li p { font-size: 10px; line-height: 1.55; }
  .system-detail-head { padding: 15px 18px 13px; }
  .system-detail-head h1 { font-size: 28px; }
  .system-detail-title-row > div:first-child > p { font-size: 11px; }
  .system-artifact-tabs button { min-width: 58px; font-size: 11px; }
  .system-home-hero { padding-top: 44px; }
  .system-home-copy h1 { font-size: 36px; line-height: 1.16; }
  .system-home-copy > p { margin-top: 22px; font-size: 14px; line-height: 1.75; }
  .system-home-actions { align-items: flex-start; flex-direction: column; gap: 22px; margin-top: 30px; }
  .system-home-section { padding-block: 48px 54px; }
  .system-home-heading h2 { font-size: 29px; }
  .system-blueprint { grid-template-columns: minmax(0, 1fr); padding-top: 25px; }
  .system-blueprint-sheet { min-height: 160px; }
  .system-blueprint-sheet > svg { float: right; margin-top: -30px; }
  .system-blueprint-sheet ul { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; margin-top: 24px; }
  .system-blueprint-control { min-height: 160px; }
  .system-blueprint-evidence { grid-column: 1; flex-wrap: wrap; }
  .system-runtime-plane > header,
  .system-control-duties > header { grid-template-columns: 5px minmax(0, 1fr); }
  .system-runtime-plane header p { display: none; }
  .system-runtime-plane li { min-height: 70px; grid-template-columns: 25px 26px minmax(0, 1fr); }
  .system-runtime-plane li p { grid-column: 3; }
  .system-control-duties dl > div { grid-template-columns: 38px minmax(0, 1fr); }
  .system-control-duties strong { grid-column: 2; text-align: left; }
  .system-domain-columns,
  .system-evidence-chain > ol { grid-template-columns: minmax(0, 1fr); }
  .system-domain-columns section { min-height: 190px; border-right: 0 !important; border-top: 1px solid var(--line); }
  .system-domain-columns section:first-child { border-top: 0; }
  .system-evidence-chain > ol li { min-height: 112px; border-right: 0; border-top: 1px solid var(--line); }
  .system-evidence-chain > ol li:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .system-frame-loading span { animation: none; }
}

/* System runtime topology ------------------------------------------------------ */
.system-home-hero {
  min-height: 690px;
}

.system-runtime-blueprint {
  position: relative;
  display: block;
  width: 100%;
  height: 560px;
  min-width: 0;
  margin: 0;
  overflow: visible;
  perspective: none;
}

.system-runtime-blueprint > figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.runtime-control-bar {
  position: absolute;
  z-index: 10;
  top: 12px;
  right: 34px;
  left: 64px;
  min-height: 82px;
  display: grid;
  grid-template-columns: 36px max-content minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border: 1.4px solid var(--system-blue);
  background: rgba(255, 255, 255, .97);
  color: var(--system-blue);
  transform: skewY(1.8deg);
  transform-origin: left center;
}

.runtime-control-bar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -13px 14px 13px -14px;
  border: 1px dotted #aac5ec;
}

.runtime-control-bar > * { transform: skewY(-1.8deg); }
.runtime-control-bar svg { width: 27px; height: 27px; }
.runtime-control-bar h2 { margin: 0; color: #12223c; font-size: 16px; white-space: nowrap; }
.runtime-control-bar ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-left: 1px solid #b9cce7;
  list-style: none;
}
.runtime-control-bar li {
  min-height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border-right: 1px solid #d7e1ef;
  color: #506783;
  font-size: 9px;
  text-align: center;
  white-space: nowrap;
}
.runtime-control-bar li:last-child { border-right: 0; }

.runtime-plane-stack {
  position: absolute;
  z-index: 3;
  top: 158px;
  right: 42px;
  left: 56px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.runtime-plane {
  --plane-color: var(--system-blue);
  --plane-shift: 0px;
  position: relative;
  min-width: 0;
  min-height: 260px;
  padding: 23px 14px 17px;
  border: 1.35px solid var(--plane-color);
  background: rgba(255, 255, 255, .97);
  color: var(--plane-color);
  transform: translateY(var(--plane-shift)) skewY(-3.4deg);
  transform-origin: left center;
}

.runtime-plane::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14px 12px 14px -12px;
  border: 1px dotted color-mix(in srgb, var(--plane-color) 38%, white);
}

.runtime-plane::after {
  content: "";
  position: absolute;
  top: -62px;
  left: 50%;
  height: 48px;
  border-left: 1px dashed var(--plane-color);
  opacity: .72;
}

.runtime-plane > * { transform: skewY(3.4deg); }
.runtime-plane > span { display: block; font: 800 10px/1 var(--font-mono); }
.runtime-plane > svg { width: 29px; height: 29px; margin-top: 38px; }
.runtime-plane h2 { margin: 12px 0 0; color: #13213a; font-size: 14px; white-space: nowrap; }
.runtime-plane p { margin: 28px 0 0; color: #64748b; font-size: 9px; line-height: 1.75; }

.runtime-plane > i {
  position: absolute;
  z-index: 6;
  top: 49%;
  right: -19px;
  width: 18px;
  border-top: 1.5px solid var(--system-blue);
}

.runtime-plane > i::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--system-blue);
  border-right: 1.5px solid var(--system-blue);
  transform: rotate(45deg);
}

.plane-application,
.plane-runtime { --plane-color: var(--system-orange); }
.plane-service { --plane-color: var(--system-teal); }
.plane-application { --plane-shift: 8px; }
.plane-service { --plane-shift: 16px; }
.plane-data { --plane-shift: 24px; }
.plane-runtime { --plane-shift: 32px; }

.runtime-request,
.runtime-output {
  position: absolute;
  z-index: 8;
  top: 302px;
  display: grid;
  justify-items: center;
  color: var(--system-blue);
}
.runtime-request { left: 0; }
.runtime-output { right: 0; top: 334px; }
.runtime-request i,
.runtime-output i {
  position: relative;
  width: 43px;
  margin-bottom: 7px;
  border-top: 1.5px solid currentColor;
}
.runtime-request i::before,
.runtime-output i::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.runtime-request i::before { left: 0; }
.runtime-output i::after { right: 0; }
.runtime-request b,
.runtime-output b { font-size: 10px; }
.runtime-request small,
.runtime-output small { margin-top: 2px; font: 6px var(--font-mono); }

.runtime-enforcement {
  position: absolute;
  z-index: 8;
  right: 15%;
  bottom: 62px;
  height: 70px;
  border-left: 2px dashed var(--system-orange);
  color: var(--system-orange);
}
.runtime-enforcement::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -5px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.runtime-enforcement span { position: absolute; top: 9px; left: 10px; width: 70px; font-size: 8px; white-space: nowrap; }

.runtime-evidence-route {
  position: absolute;
  z-index: 7;
  right: 38px;
  bottom: 44px;
  left: 64px;
  height: 34px;
  border-right: 2px dashed var(--system-teal);
  border-bottom: 2px dashed var(--system-teal);
  color: var(--system-teal);
}
.runtime-evidence-route::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: -1px;
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.runtime-evidence-route span { position: absolute; right: 17px; bottom: 8px; font-size: 8px; white-space: nowrap; }

.system-runtime-blueprint .system-blueprint-axis {
  right: 34px;
  bottom: 3px;
  left: 56px;
}

/* Five-layer system cross-section -------------------------------------------- */
.system-panorama {
  padding-top: 76px;
  padding-bottom: 92px;
  background: #fff;
}

.system-cross-section {
  position: relative;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 42px;
  margin-top: 46px;
}

.architecture-control-panel {
  min-width: 0;
  padding: 24px 18px 18px;
  border: 1.5px solid var(--system-blue);
  background: #fff;
  color: #15396f;
}

.architecture-control-panel > header {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-bottom: 22px;
  border-bottom: 1px solid #cddbf0;
}
.architecture-control-panel > header svg { width: 27px; height: 27px; color: var(--system-blue); }
.architecture-control-panel h3 { margin: 0; color: #15396f; font-size: 24px; line-height: 1.12; }
.architecture-control-panel header span { display: block; margin-top: 9px; color: #6d88b0; font: 7px/1.5 var(--font-mono); letter-spacing: .14em; }
.architecture-control-panel ol { margin: 0; padding: 0; list-style: none; }
.architecture-control-panel li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 115px;
  border-bottom: 1px solid #dce5f1;
}
.architecture-control-panel li > div { min-width: 0; }
.architecture-control-panel li b { display: block; color: #162541; font-size: 14px; }
.architecture-control-panel li strong { display: block; margin-top: 4px; color: var(--system-blue); font-size: 10px; }
.architecture-control-panel li p { margin: 7px 0 0; color: #65758d; font-size: 8.5px; line-height: 1.55; }
.architecture-control-panel footer { padding-top: 18px; }
.architecture-control-panel footer b { display: block; color: var(--system-blue); font: 800 10px var(--font-mono); }
.architecture-control-panel footer span { display: block; margin-top: 5px; color: #8291a7; font: 6.5px var(--font-mono); letter-spacing: .08em; }

.control-symbol { position: relative; width: 24px; height: 24px; color: var(--system-blue); }
.symbol-boundary { width: 17px; height: 17px; margin-left: 3px; border: 2px solid currentColor; transform: rotate(45deg); }
.symbol-layer::before,
.symbol-layer::after { content: ""; position: absolute; inset: 5px 2px; border: 2px solid currentColor; transform: rotate(30deg) skewX(-20deg); }
.symbol-layer::after { transform: translateY(6px) rotate(30deg) skewX(-20deg); opacity: .55; }
.symbol-contract { border: 2px solid currentColor; }
.symbol-contract::before { content: ""; position: absolute; top: 5px; right: 4px; left: 4px; height: 5px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.symbol-evolution { border-bottom: 2px solid currentColor; }
.symbol-evolution::before { content: ""; position: absolute; right: 3px; bottom: 0; width: 3px; height: 19px; background: currentColor; box-shadow: -7px 5px 0 currentColor, -14px 10px 0 currentColor; }

.system-runtime-section { min-width: 0; }
.runtime-section-heading {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(60px, 1fr) auto auto minmax(60px, 1fr);
  align-items: center;
  gap: 15px;
  color: #15243d;
}
.runtime-section-heading span,
.runtime-section-heading i { border-top: 1px dashed #86abe2; }
.runtime-section-heading h3 { margin: 0; font-size: 17px; }
.runtime-section-heading b { color: #365d97; font: 750 9px var(--font-mono); letter-spacing: .14em; }

.system-runtime-slices { margin: 6px 0 0; padding: 0; list-style: none; }
.runtime-slice {
  --slice-color: var(--system-blue);
  position: relative;
  z-index: 2;
  min-height: 108px;
  display: grid;
  grid-template-columns: minmax(235px, .85fr) minmax(0, 2.15fr);
  align-items: stretch;
  margin-top: 10px;
  border: 1.35px solid var(--slice-color);
  background: rgba(255, 255, 255, .98);
}
.runtime-slice::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10px 13px 10px -13px;
  border: 1px dotted color-mix(in srgb, var(--slice-color) 34%, white);
}
.runtime-slice::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -43px;
  width: 42px;
  border-top: 1px dashed var(--system-blue);
}
.slice-application,
.slice-runtime { --slice-color: var(--system-orange); }
.slice-service { --slice-color: var(--system-teal); }

.slice-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 19px 16px;
  border-right: 1px solid #d9e2ef;
}
.slice-identity > span { align-self: start; color: var(--slice-color); font: 800 12px var(--font-mono); }
.slice-identity svg { width: 31px; height: 31px; color: var(--slice-color); }
.slice-identity h3 { margin: 0; color: #122039; font-size: 15px; }
.slice-identity p { margin: 8px 0 0; color: #64748b; font-size: 8.5px; line-height: 1.55; }

.runtime-slice dl {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}
.runtime-slice dl > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 14px;
  border-left: 1px solid #e1e8f1;
}
.runtime-slice dl > div:first-child { border-left: 0; }
.runtime-slice dt { color: var(--slice-color); font-size: 9px; font-weight: 800; }
.runtime-slice dd { margin: 0; color: #627189; font-size: 8.5px; line-height: 1.55; overflow-wrap: anywhere; }

.cross-section-routes {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  margin: 20px 8px 0;
}
.cross-section-routes > div {
  position: relative;
  min-height: 37px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding-top: 8px;
  font-size: 8.5px;
}
.cross-section-routes b { font-size: 11px; }
.cross-section-routes span { color: #697a92; }
.route-govern { border-top: 2px solid var(--system-blue); color: var(--system-blue); }
.route-enforce { border-top: 2px dashed var(--system-orange); color: var(--system-orange); }
.route-evidence { border-top: 2px dashed var(--system-teal); color: var(--system-teal); }
.route-govern::after,
.route-enforce::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.route-evidence::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -1px;
  width: 9px;
  height: 9px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}

.system-cross-conclusion {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin: 8px 0 0;
  color: #263a57;
  font-size: 14px;
  text-align: center;
}
.system-cross-conclusion span { height: 1px; background: #aebed3; }

@media (max-width: 1550px) {
  .system-home-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding-top: 72px;
  }
  .system-home-copy { max-width: 780px; }
  .system-runtime-blueprint { width: min(940px, 100%); margin-inline: auto; }
  .system-cross-section { grid-template-columns: 206px minmax(0, 1fr); gap: 28px; }
  .runtime-slice { grid-template-columns: minmax(205px, .8fr) minmax(0, 2.2fr); }
  .slice-identity { grid-template-columns: 28px 34px minmax(0, 1fr); gap: 8px; padding-inline: 12px; }
  .slice-identity svg { width: 27px; height: 27px; }
  .runtime-slice dl > div { padding-inline: 10px; }
}

@media (max-width: 1080px) {
  .system-cross-section { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .architecture-control-panel {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: stretch;
    padding: 18px;
  }
  .architecture-control-panel > header { align-content: center; padding: 8px 20px 8px 0; border-right: 1px solid #dce5f1; border-bottom: 0; }
  .architecture-control-panel h3 br { display: none; }
  .architecture-control-panel ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .architecture-control-panel li { min-height: 118px; padding: 8px 12px; border-right: 1px solid #dce5f1; border-bottom: 0; }
  .architecture-control-panel li:last-child { border-right: 0; }
  .architecture-control-panel footer { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid #dce5f1; }
  .runtime-slice::after { display: none; }
}

@media (max-width: 820px) {
  .system-runtime-blueprint {
    height: auto;
    display: grid;
    gap: 26px;
    padding: 0 0 44px;
  }
  .runtime-control-bar,
  .runtime-plane-stack,
  .runtime-request,
  .runtime-output,
  .runtime-enforcement,
  .runtime-evidence-route,
  .system-runtime-blueprint .system-blueprint-axis {
    position: relative;
    inset: auto;
  }
  .runtime-control-bar { grid-template-columns: 30px minmax(0, 1fr); min-height: 0; transform: none; }
  .runtime-control-bar::before { inset: -8px 8px 8px -8px; }
  .runtime-control-bar > * { transform: none; }
  .runtime-control-bar ul { grid-column: 1 / -1; margin-top: 10px; border-top: 1px solid #d7e1ef; border-left: 0; }
  .runtime-control-bar li { min-height: 35px; }
  .runtime-plane-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px; margin: 0 12px; }
  .runtime-plane {
    min-height: 100px;
    display: grid;
    grid-template-columns: 34px 40px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 16px;
    transform: none;
  }
  .runtime-plane::before { inset: -7px 7px 7px -7px; }
  .runtime-plane::after,
  .runtime-plane > i { display: none; }
  .runtime-plane > * { transform: none; }
  .runtime-plane > svg { width: 28px; height: 28px; margin: 0; }
  .runtime-plane h2 { margin: 0; }
  .runtime-plane p { margin: 7px 0 0; }
  .runtime-request,
  .runtime-output,
  .runtime-enforcement,
  .runtime-evidence-route,
  .system-runtime-blueprint .system-blueprint-axis { display: none; }

  .architecture-control-panel { grid-template-columns: minmax(0, 1fr); }
  .architecture-control-panel > header { padding: 4px 0 18px; border-right: 0; border-bottom: 1px solid #dce5f1; }
  .architecture-control-panel ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .architecture-control-panel li { border-bottom: 1px solid #dce5f1; }
  .architecture-control-panel li:nth-child(2) { border-right: 0; }
  .architecture-control-panel li:nth-child(n+3) { border-bottom: 0; }
  .runtime-slice { grid-template-columns: minmax(0, 1fr); }
  .slice-identity { border-right: 0; border-bottom: 1px solid #d9e2ef; }
  .runtime-slice dl > div { min-height: 74px; }
}

@media (max-width: 560px) {
  .runtime-control-bar { padding-inline: 15px; }
  .runtime-control-bar ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .runtime-control-bar li:nth-child(n+3) { border-top: 1px solid #d7e1ef; }
  .runtime-plane-stack { margin-inline: 7px; }
  .system-cross-section { margin-top: 34px; }
  .architecture-control-panel ol { grid-template-columns: minmax(0, 1fr); }
  .architecture-control-panel li { border-right: 0; border-bottom: 1px solid #dce5f1 !important; }
  .architecture-control-panel li:last-child { border-bottom: 0 !important; }
  .runtime-section-heading { grid-template-columns: 1fr auto auto 1fr; gap: 8px; }
  .runtime-slice dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .runtime-slice dl > div { border-top: 1px solid #e1e8f1; }
  .runtime-slice dl > div:nth-child(odd) { border-left: 0; }
  .cross-section-routes { margin-inline: 0; }
  .cross-section-routes > div { grid-template-columns: 82px minmax(0, 1fr); }
  .system-cross-conclusion { grid-template-columns: minmax(0, 1fr); font-size: 12px; }
  .system-cross-conclusion span { display: none; }
}

/* Shared architecture workbench typography
   The shell is used by business, system and framework views. Keep display
   headings unchanged, but never let navigation, metadata or controls read as
   miniature diagram labels on large monitors. */
.system-sidebar-head p { font-size: 12.5px; line-height: 1.55; }
.system-search { height: 42px; }
.system-search input { font-size: 13px; }
.system-search kbd { width: 22px; height: 22px; font-size: 11px; }
.system-overview-node { min-height: 42px; font-size: 13.5px; }
.system-group-toggle { min-height: 39px; }
.system-group-toggle strong { font-size: 13.5px; }
.system-group-toggle span { font-size: 11.5px; }
.system-node { min-height: 39px; }
.system-node b { font-size: 12.5px; line-height: 1.4; }
.system-node small { font-size: 11.5px; }
.system-sidebar-foot { min-height: 46px; font-size: 11.5px; }
.system-breadcrumb { font-size: 12px; line-height: 1.55; }
.system-detail-title-row > div:first-child > p { font-size: 14px; line-height: 1.72; }
.system-detail-actions a,
.system-artifact-tabs > a { font-size: 12.5px; }
.system-detail-meta { margin-top: 14px; }
.system-detail-meta dt { font-size: 11.5px; }
.system-detail-meta dd { font-size: 12.5px; }
.system-artifact-tabs { min-height: 56px; }
.system-artifact-tabs button { font-size: 13px; }
.system-frame-loading { font-size: 12.5px; }

@media (max-width: 560px) {
  .system-detail-title-row > div:first-child > p { font-size: 13px; }
  .system-detail-meta dt { font-size: 11px; }
  .system-detail-meta dd { font-size: 12px; }
  .system-artifact-tabs button { font-size: 12px; }
}

/* System overview diagrams use the same readable annotation floor as the
   workbench. Space is released vertically instead of compressing the copy. */
.page-system .runtime-control-bar li { font-size: 11.5px; line-height: 1.45; }
.page-system .runtime-request b,
.page-system .runtime-output b { font-size: 12px; }
.page-system .runtime-request small,
.page-system .runtime-output small { font-size: 11px; }
.page-system .runtime-plane > span { font-size: 11.5px; }
.page-system .runtime-plane p { font-size: 12px; line-height: 1.62; }
.page-system .runtime-enforcement span,
.page-system .runtime-evidence-route span,
.page-system .system-runtime-blueprint .system-blueprint-axis { font-size: 11px; }

.page-system .architecture-control-panel > header span { font-size: 11px; line-height: 1.45; }
.page-system .architecture-control-panel li { min-height: 126px; }
.page-system .architecture-control-panel li > span { font-size: 11.5px; }
.page-system .architecture-control-panel li strong { font-size: 11.5px; }
.page-system .architecture-control-panel li p { font-size: 12px; line-height: 1.62; }
.page-system .architecture-control-panel footer b,
.page-system .architecture-control-panel footer span { font-size: 11.5px; line-height: 1.5; }
.page-system .runtime-section-heading b { font-size: 11.5px; }

.page-system .slice-identity p { font-size: 12px; line-height: 1.62; }
.page-system .runtime-slice dl > div { min-height: 92px; }
.page-system .runtime-slice dt { font-size: 11.5px; }
.page-system .runtime-slice dd { font-size: 12px; line-height: 1.62; }
.page-system .cross-section-routes > div { min-height: 48px; font-size: 12px; }
.page-system .cross-section-routes b { font-size: 12.5px; }

.page-system .system-domain-columns section { min-height: 250px; }
.page-system .system-domain-columns button { font-size: 11.5px; }
.page-system .system-domain-columns p { font-size: 12.5px; line-height: 1.72; }
.page-system .system-evidence-chain > ol span { font-size: 11.5px; }
.page-system .system-control-scope li p,
.page-system .system-control-duties p,
.page-system .system-evidence-chain p { font-size: 12px; line-height: 1.65; }
.page-system .system-control-duties dt,
.page-system .system-control-duties dd { font-size: 11.5px; }

@media (max-width: 820px) {
  .page-system .architecture-control-panel li { min-height: 134px; }
  .page-system .runtime-slice dl > div { min-height: 98px; }
}

/* 系统架构标准：内嵌展示（与业务侧 .business-standard 同形态） */
.system-standard {
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.system-standard iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.system-standard-node {
  margin-top: 4px;
}

.system-standard-node > span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.system-standard-node b {
  font-size: inherit;
}

.system-standard-node small {
  color: #8a96a8;
  font: 9px var(--font-mono);
  white-space: nowrap;
}

.system-standard-node.is-selected small {
  color: #4e75ad;
}