/* Spectrum Terminal · Agent Architecture */
.layer-page {
  --layer-color: var(--green);
  --muted: #9f9995;
  --faint: #5e5a58;
  padding-top: 34px;
}

.layer-page .terminal-head,
.layer-page .terminal-foot,
.layer-page .diagram-control {
  font-size: 12px;
}

.terminal-spark,
.terminal-status > span {
  color: var(--terminal);
}

.title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 30px;
}

.layer-page .spectrum-title {
  max-width: none;
  margin: 34px 0 0;
  font-size: clamp(29px, 2.9vw, 36px);
  line-height: 1;
  white-space: nowrap;
}

.title-layer {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-shadow: 0 0 9px color-mix(in srgb, currentColor 22%, transparent);
}

.title-layer:hover,
.layer-page[data-active-state="prompt"] .title-layer[data-title-state-control="prompt"],
.layer-page[data-active-state="context"] .title-layer[data-title-state-control="context"],
.layer-page[data-active-state="harness"] .title-layer[data-title-state-control="harness"],
.layer-page[data-active-state="loop"] .title-layer[data-title-state-control="loop"],
.layer-page[data-active-state="graph"] .title-layer[data-title-state-control="graph"] {
  text-shadow: 0 0 13px color-mix(in srgb, currentColor 48%, transparent);
}

.layer-page .spectrum-title small {
  color: var(--muted);
  font-size: .47em;
  letter-spacing: -.02em;
}

.title-row > p {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .22em;
  line-height: 1.8;
  text-align: right;
}

.layer-page .spectrum-rule {
  height: 3px;
  margin: 20px 0 28px;
}

.layer-page .comparison {
  grid-template-columns: minmax(280px, 1.25fr) minmax(250px, .85fr) minmax(270px, 1fr);
  align-items: center;
  min-height: 126px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-deep);
}

.course-copy h2,
.course-copy p,
.course-warning {
  margin: 0;
}

.course-copy h2 {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .02em;
}

.course-copy p {
  max-width: 430px;
  margin-top: 11px;
  color: var(--muted);
  font-size: 12px;
}

.course-meter {
  padding: 0 8px;
}

.course-line {
  position: relative;
  display: block;
  height: 2px;
  margin: 4px 0 11px;
  background: linear-gradient(90deg, var(--terminal), var(--magenta) 42%, var(--line) 42%);
}

.course-line i {
  position: absolute;
  top: 50%;
  left: 42%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--terminal);
  box-shadow: 0 0 13px var(--terminal);
  transform: translate(-50%, -50%);
}

.course-meter > div {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
}

.course-warning {
  color: var(--terminal);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.12;
  text-align: right;
  text-shadow: 0 0 14px color-mix(in srgb, var(--terminal) 28%, transparent);
}

.layer-page .stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.layer-page .stat-card {
  min-height: 108px;
  padding: 14px 16px;
  background: var(--panel-deep);
}

.layer-page .stat-card > strong {
  margin: 0 0 13px;
  color: currentColor;
  font-size: 34px;
  text-shadow: 0 0 11px color-mix(in srgb, currentColor 25%, transparent);
}

.layer-page .stat-card > strong {
  font-size: clamp(21px, 2vw, 30px);
  letter-spacing: .01em;
}

.layer-page .stat-card strong small {
  color: var(--muted);
  font-size: .48em;
}

.layer-page .stat-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
}

.machine-section,
.blame-section {
  margin-top: 28px;
}

.section-heading {
  display: flex;
  align-items: baseline;
}

.section-heading h2,
.section-heading p,
.section-note {
  margin: 0;
}

.section-heading h2 {
  font-size: 15px;
  line-height: 1.3;
}

.section-heading h2 i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--terminal);
  box-shadow: 0 0 7px color-mix(in srgb, var(--terminal) 55%, transparent);
}

.section-heading p {
  color: #7b9eea;
  font-size: 13px;
}

.section-note {
  margin: 4px 0 13px 18px;
  color: var(--muted);
  font-size: 12px;
}

.layer-machine {
  position: relative;
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr) 242px;
  grid-template-rows: 132px 132px 132px minmax(132px, 1fr) auto;
  grid-template-areas:
    "prompt visual graph"
    ". visual loop"
    ". visual context"
    "harness visual window"
    "maxim maxim maxim";
  column-gap: 16px;
  row-gap: 14px;
  min-height: 720px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--layer-color) 4%, transparent), transparent 36%),
    linear-gradient(90deg, color-mix(in srgb, var(--orange) 2%, transparent), transparent 34%, color-mix(in srgb, var(--magenta) 2%, transparent)),
    var(--panel);
  transition: background 220ms ease;
}

.layer-page[data-active-state="prompt"] .layer-machine { --layer-color: var(--orange); }
.layer-page[data-active-state="context"] .layer-machine { --layer-color: var(--green); }
.layer-page[data-active-state="harness"] .layer-machine { --layer-color: var(--cyan); }
.layer-page[data-active-state="loop"] .layer-machine { --layer-color: var(--violet); }
.layer-page[data-active-state="graph"] .layer-machine { --layer-color: var(--magenta); }

.ownership-stack {
  display: contents;
}

.ownership-card {
  position: static;
  z-index: 2;
  display: flex;
  min-height: 132px;
  padding: 14px 15px 16px;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-left: 2px solid currentColor;
  border-radius: 9px;
  background: var(--panel-deep);
  color: var(--muted);
  text-align: left;
  transition: border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.ownership-card > span:not(.ring-label-hit) {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: .11em;
  text-align: center;
}

.ownership-card > strong {
  margin-top: 11px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: -.02em;
  line-height: .96;
}

.ownership-card > small {
  margin-top: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.ring-label-hit {
  position: absolute;
  z-index: 4;
  display: grid;
  height: 32px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: var(--panel-deep);
  color: currentColor;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  pointer-events: auto;
  transition: box-shadow 180ms ease, background 180ms ease;
}

.ownership-card:hover .ring-label-hit,
.ownership-card:focus-visible .ring-label-hit,
.ownership-card[data-state-active] .ring-label-hit {
  background: color-mix(in srgb, currentColor 8%, var(--panel-deep));
  box-shadow: 0 0 12px color-mix(in srgb, currentColor 30%, transparent);
}

.ownership-card:focus-visible .ring-label-hit {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.ownership-prompt .ring-label-hit { top: 38px; left: 528px; width: 98px; }
.ownership-context .ring-label-hit { top: 260px; left: 802px; width: 104px; }
.ownership-harness .ring-label-hit { top: 585px; left: 698px; width: 106px; }
.ownership-loop .ring-label-hit { top: 585px; left: 360px; width: 84px; }
.ownership-graph .ring-label-hit { top: 260px; left: 253px; width: 90px; }

.ownership-prompt { grid-area: prompt; align-self: start; margin-top: 18px; color: var(--orange); }
.ownership-context { grid-area: context; color: var(--green); }
.ownership-harness { grid-area: harness; align-self: end; margin-bottom: 54px; color: var(--cyan); }
.ownership-loop { grid-area: loop; color: var(--violet); }
.ownership-graph { grid-area: graph; color: var(--magenta); }

.ownership-card[data-state-active] {
  border-color: currentColor;
  box-shadow: 0 0 18px color-mix(in srgb, currentColor 16%, transparent);
}

.machine-visual {
  position: relative;
  z-index: 1;
  grid-area: visual;
  min-width: 0;
  align-self: center;
}

.machine-visual svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.layer-ring {
  stroke-width: 1.2;
  opacity: .28;
}

.ring-graph { stroke: var(--magenta); }
.ring-loop { stroke: var(--violet); }
.ring-harness { stroke: var(--cyan); }
.ring-context { stroke: var(--green); }
.ring-prompt { stroke: var(--orange); }

.execution-orbit {
  stroke: #4b4643;
  stroke-width: 1.4;
  stroke-dasharray: 12 10;
  opacity: .75;
}

.quiet-orbit {
  stroke: #373331;
  stroke-width: 1;
  stroke-dasharray: 4 10;
  opacity: .65;
}

.energized-arc {
  stroke: var(--layer-color);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--layer-color));
  opacity: .92;
  transform-box: view-box;
  transform-origin: 320px 320px;
  animation: selected-ring-travel 7s linear infinite;
}

.energized-arc--prompt { stroke-dasharray: 112 617; }
.energized-arc--context { stroke-dasharray: 150 830; }
.energized-arc--harness { stroke-dasharray: 185 1034; }
.energized-arc--loop { stroke-dasharray: 220 1238; }
.energized-arc--graph { stroke-dasharray: 255 1441; }

@keyframes selected-ring-travel {
  to { transform: rotate(360deg); }
}

.stage-nodes circle {
  fill: var(--panel);
  stroke: #625d59;
  stroke-width: 2;
}

.stage-nodes text {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
}

.orbital-node {
  transform-box: view-box;
  transform-origin: 320px 320px;
  animation: quiet-orbit var(--orbit-speed) linear infinite;
}

.orbital-node circle {
  filter: url(#node-glow);
}

.orbital-node--orange { --orbit-speed: 17s; }
.orbital-node--orange circle { fill: var(--orange); }
.orbital-node--green { --orbit-speed: 21s; animation-delay: -5s; }
.orbital-node--green circle { fill: var(--green); }
.orbital-node--cyan { --orbit-speed: 25s; animation-delay: -11s; }
.orbital-node--cyan circle { fill: var(--cyan); }
.orbital-node--violet { --orbit-speed: 29s; animation-delay: -17s; }
.orbital-node--violet circle { fill: var(--violet); }

@keyframes quiet-orbit {
  to { transform: rotate(360deg); }
}

.layer-labels rect {
  fill: var(--panel-deep);
  stroke: currentColor;
  opacity: .95;
}

.layer-labels { visibility: hidden; }

.layer-labels text {
  fill: currentColor;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

.layer-labels > g:nth-child(1) { color: var(--orange); }
.layer-labels > g:nth-child(2) { color: var(--green); }
.layer-labels > g:nth-child(3) { color: var(--cyan); }
.layer-labels > g:nth-child(4) { color: var(--violet); }
.layer-labels > g:nth-child(5) { color: var(--magenta); }

.model-call {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 40%;
  min-height: 142px;
  padding: 18px 15px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #4b4541;
  border-radius: 14px;
  background: #070807;
  text-align: center;
  transform: translate(-50%, -50%);
}

.model-call h3,
.model-call p {
  margin: 0;
}

.model-call h3 {
  font-size: 14px;
}

.model-call h3::after {
  display: block;
  width: 56px;
  height: 1px;
  margin: 8px auto 10px;
  background: var(--line);
  content: "";
}

.model-call p {
  color: var(--muted);
  font-size: 12px;
}

.model-call p b,
.model-call p span {
  display: block;
}

.model-call p b {
  margin-bottom: 6px;
  color: var(--layer-color);
  font-weight: 400;
  letter-spacing: .1em;
}

[data-copy-for][hidden],
[data-value-for][hidden] {
  display: none !important;
}

.window-card {
  position: relative;
  z-index: 2;
  grid-area: window;
  align-self: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-deep);
}

.window-card h3,
.window-card dl,
.window-card dd,
.window-card p {
  margin: 0;
}

.window-card h3 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .12em;
}

.window-card dl {
  margin-top: 12px;
}

.window-card dl > div + div {
  margin-top: 8px;
}

.window-card [data-state-active] dt {
  color: var(--layer-color);
}

.window-card [data-state-active] .window-bar {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--layer-color) 34%, transparent);
}

.window-card dt {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.window-card dt b {
  color: var(--ink);
  font-weight: 400;
  white-space: nowrap;
}

.window-card dd {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
}

.window-card code {
  color: var(--layer-color);
  font-family: var(--mono);
  font-size: .92em;
}

.window-bar {
  position: relative;
  height: 6px;
  margin-top: 4px !important;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coral) 0 var(--before), #211e1d var(--before));
}

.window-bar i {
  display: block;
  width: var(--after);
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.window-card > p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 10px;
}

.window-card > p strong { color: var(--coral); font-size: 14px; }
.window-card > p span { color: var(--muted); }
.window-card > p b { color: var(--green); font-size: 14px; }

.machine-maxim {
  position: relative;
  z-index: 2;
  grid-area: maxim;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .16em;
  text-align: center;
}

.layer-lesson-stack {
  margin-top: 16px;
}

.layer-lesson {
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--layer-color);
  border-radius: 9px;
  background: var(--panel-deep);
  box-shadow: -7px 0 18px color-mix(in srgb, var(--layer-color) 12%, transparent);
}

.layer-lesson[hidden] {
  display: none;
}

.layer-callout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.layer-callout span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .1em;
}

.layer-callout strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .03em;
  text-align: right;
}

.topology-section,
.build-order,
.cross-cutting,
.blame-section,
.site2-sources { margin-top: 30px; }

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

.topology-card,
.build-order-track article,
.cross-cut-card,
.diagnostic-row article {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-deep);
}

.topology-card { padding: 15px; border-top-color: var(--layer-color); }
.topology-card svg { display: block; width: 100%; height: auto; margin-bottom: 12px; overflow: visible; }
.topology-card svg path { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.topology-card svg rect { fill: var(--panel); stroke: var(--line); }
.topology-card svg text { fill: var(--ink); font-family: var(--mono); font-size: 10px; text-anchor: middle; }
.topology-card h3, .topology-card p, .build-order-track h3, .build-order-track p, .cross-cut-card h3, .cross-cut-card p { margin: 0; }
.topology-card h3 { color: var(--ink); font-size: 13px; }
.topology-call { --layer-color: var(--orange); }
.topology-loop { --layer-color: var(--violet); }
.topology-route { --layer-color: var(--cyan); }
.topology-fanout { --layer-color: var(--magenta); }
.topology-card p { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.topology-card p b { color: var(--ink); font-weight: 500; }
.topology-card a { color: var(--orange); }

.build-order { padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.build-order-track { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: 8px; }
.build-order-track article { position: relative; min-height: 132px; padding: 16px; }
.build-order-track article > span { color: var(--faint); font-size: 10px; letter-spacing: .12em; }
.build-order-track h3 { margin-top: 10px; color: var(--ink); font-size: 13px; }
.build-order-track p { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.build-order-track > i { color: var(--orange); font-size: 22px; font-style: normal; text-align: center; }
.build-conclusion { margin: 16px 0 0; color: var(--orange); font-family: var(--display); font-size: 15px; text-align: center; }

.cross-cutting-rail { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 18px 0; }
.cross-cutting-rail::before { position: absolute; z-index: 0; top: 50%; right: 4%; left: 4%; height: 2px; background: linear-gradient(90deg, var(--coral), var(--cyan), var(--violet)); content: ''; opacity: .7; }
.cross-cut-card { position: relative; z-index: 1; min-height: 150px; padding: 18px; border-top-color: var(--layer-color); }
.cross-cut-card h3 { color: var(--ink); font-size: 14px; }
.cross-cut-card p { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.cross-cut-card.accent-coral { --layer-color: var(--coral); }
.cross-cut-card.accent-cyan { --layer-color: var(--cyan); }
.cross-cut-card.accent-violet { --layer-color: var(--violet); }

.blame-network { display: grid; gap: 10px; padding: 18px; background: var(--panel); }
.diagnostic-row { --diagnostic-color: var(--orange); display: grid; grid-template-columns: minmax(205px, .92fr) minmax(28px, .16fr) minmax(290px, 1.12fr); align-items: center; }
.diagnostic-row[data-owner-layer="prompt"] { --diagnostic-color: var(--orange); }
.diagnostic-row[data-owner-layer="context"] { --diagnostic-color: var(--green); }
.diagnostic-row[data-owner-layer="harness"] { --diagnostic-color: var(--cyan); }
.diagnostic-row[data-owner-layer="loop"] { --diagnostic-color: var(--violet); }
.diagnostic-row[data-owner-layer="graph"] { --diagnostic-color: var(--magenta); }
.diagnostic-row button, .diagnostic-row article { min-height: 80px; padding: 13px 15px; border-color: var(--line); text-align: left; transition: border-color 180ms ease, box-shadow 180ms ease; }
.diagnostic-row button {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-deep);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
}
.diagnostic-line { display: block; height: 2px; background: var(--line); transition: background-color 180ms ease, box-shadow 180ms ease; }
.diagnostic-row article h3, .diagnostic-row article p { margin: 0; }
.diagnostic-row article h3 { color: var(--ink); font-size: 13px; }
.diagnostic-row article p { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.diagnostic-row article b { color: var(--ink); font-weight: 500; }
.blame-network[data-active-path="prompt-contract"] [data-path-control="prompt-contract"], .blame-network[data-active-path="prompt-contract"] [data-path-output="prompt-contract"],
.blame-network[data-active-path="missing-policy"] [data-path-control="missing-policy"], .blame-network[data-active-path="missing-policy"] [data-path-output="missing-policy"],
.blame-network[data-active-path="tool-rejected"] [data-path-control="tool-rejected"], .blame-network[data-active-path="tool-rejected"] [data-path-output="tool-rejected"],
.blame-network[data-active-path="keeps-acting"] [data-path-control="keeps-acting"], .blame-network[data-active-path="keeps-acting"] [data-path-output="keeps-acting"],
.blame-network[data-active-path="wrong-route"] [data-path-control="wrong-route"], .blame-network[data-active-path="wrong-route"] [data-path-output="wrong-route"] { border-color: var(--diagnostic-color); box-shadow: 0 0 16px color-mix(in srgb, var(--diagnostic-color) 15%, transparent); }
.blame-network[data-active-path="prompt-contract"] [data-path-control="prompt-contract"] + .diagnostic-line,
.blame-network[data-active-path="missing-policy"] [data-path-control="missing-policy"] + .diagnostic-line,
.blame-network[data-active-path="tool-rejected"] [data-path-control="tool-rejected"] + .diagnostic-line,
.blame-network[data-active-path="keeps-acting"] [data-path-control="keeps-acting"] + .diagnostic-line,
.blame-network[data-active-path="wrong-route"] [data-path-control="wrong-route"] + .diagnostic-line { background: var(--diagnostic-color); box-shadow: 0 0 8px var(--diagnostic-color); }

.site2-sources { padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-deep); }
.site2-sources h2 { margin: 0; color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.site2-sources .learning-source-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 12px 0 0; padding-left: 18px; }
.site2-sources a { color: var(--orange); font-size: 12px; line-height: 1.4; }

.layer-page .terminal-foot {
  display: block;
  margin-top: 26px;
}

.footer-maxims {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.3fr;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 900px) {
  .layer-page .spectrum-title { white-space: normal; }

  .layer-page .comparison {
    grid-template-columns: 1fr 1fr;
  }

  .course-warning {
    grid-column: 1 / -1;
    text-align: left;
  }

  .layer-machine {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "visual visual"
      "prompt context"
      "harness loop"
      "graph graph"
      "window window"
      "maxim maxim";
    min-height: 0;
  }

  .machine-visual {
    width: min(100%, 680px);
    margin: 0 auto;
  }

  .ownership-prompt,
  .ownership-harness { margin: 0; }

  .ownership-prompt .ring-label-hit { top: 40px; left: calc(50% - 52px); width: 104px; }
  .ownership-context .ring-label-hit { top: 272px; left: calc(50% + 235px); width: 110px; }
  .ownership-harness .ring-label-hit { top: 612px; left: calc(50% + 126px); width: 112px; }
  .ownership-loop .ring-label-hit { top: 612px; left: calc(50% - 228px); width: 90px; }
  .ownership-graph .ring-label-hit { top: 272px; left: calc(50% - 340px); width: 96px; }

  .topology-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .build-order-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .build-order-track > i { display: none; }
  .cross-cutting-rail { grid-template-columns: 1fr; gap: 12px; padding: 0; }
  .cross-cutting-rail::before { top: 8%; bottom: 8%; left: 50%; width: 2px; height: auto; }
  .blame-network { padding-inline: 18px; }
}

@media (max-width: 620px) {
  .title-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .title-row > p { text-align: left; }

  .layer-page .spectrum-title {
    font-size: clamp(27px, 8vw, 34px);
    line-height: .98;
  }

  .layer-page .comparison {
    grid-template-columns: 1fr;
    padding: 19px;
  }

  .course-warning { grid-column: auto; }

  .layer-page .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-heading p { margin-left: 16px; }

  .layer-machine {
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "prompt"
      "context"
      "harness"
      "loop"
      "graph"
      "window"
      "maxim";
    padding: 13px;
  }
  .ownership-card { min-height: 0; }

  .ring-label-hit { height: 26px; font-size: 10px; }
  .ownership-prompt .ring-label-hit { top: 36px; left: calc(50% - 35px); width: 70px; }
  .ownership-context .ring-label-hit { top: 150px; left: calc(100% - 66px); width: 76px; }
  .ownership-harness .ring-label-hit { top: 317px; left: calc(100% - 120px); width: 78px; }
  .ownership-loop .ring-label-hit { top: 317px; left: 68px; width: 62px; }
  .ownership-graph .ring-label-hit { top: 150px; left: 13px; width: 66px; }

  .machine-visual svg { min-height: 360px; }
  .model-call { width: 47%; min-height: 112px; padding: 12px 8px; }
  .model-call h3 { font-size: 12px; }
  .model-call p { font-size: 12px; }

  .layer-callout { align-items: flex-start; flex-direction: column; gap: 4px; }
  .definition-ledger > div { grid-template-columns: 1fr; }

  .topology-grid { grid-template-columns: 1fr; }
  .build-order { padding: 15px; }
  .build-order-track { grid-template-columns: 1fr; }
  .build-order-track > i { display: none; }
  .diagnostic-row { grid-template-columns: 1fr; gap: 0; }
  .diagnostic-row button, .diagnostic-row article { min-height: 0; }
  .diagnostic-line { justify-self: center; width: 2px; height: 22px; }
  .site2-sources .learning-source-list { grid-template-columns: 1fr; }
  .footer-maxims { grid-template-columns: 1fr; text-align: left; }
}

@media (max-width: 430px) {
  .layer-page .stat-grid { grid-template-columns: 1fr; }
  .course-meter > div { font-size: 9px; }
  .window-card dt { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .energized-arc,
  .orbital-node {
    animation: none;
  }
}