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

@font-face {
  font-family: "LightParkour Mono";
  src: url("./fonts/geist-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-geist-sans: "LightParkour Sans";
  --font-geist-mono: "LightParkour Mono";
}

:root {
  --paper: #f3f2ee;
  --ink: #171716;
  --body: #3f3f3b;
  --muted: #6e6d67;
  --line: rgba(23, 23, 22, 0.14);
  --line-strong: rgba(23, 23, 22, 0.34);
  --signal: #60756c;
  --signal-soft: #d9dfdb;
  --rail-max: 1240px;
  --page-pad: clamp(20px, 4vw, 64px);
  --gutter: clamp(16px, 1.8vw, 24px);
  --space-block: clamp(44px, 5vw, 68px);
  --space-major: clamp(76px, 8vw, 116px);
  --space-section: clamp(112px, 11vw, 176px);
  --sans:
    var(--font-geist-sans, "Geist"), "Segoe UI Variable", "Segoe UI",
    "Segoe UI Symbol", Arial, sans-serif;
  --mono:
    var(--font-geist-mono, "Geist Mono"), "Cascadia Mono", "Cascadia Code",
    "Segoe UI Symbol", "SFMono-Regular", Consolas, monospace;
  --text-display: clamp(48px, 5.2vw, 70px);
  --text-h2: clamp(34px, 3.4vw, 46px);
  --text-h3: clamp(26px, 2.5vw, 34px);
  --text-h4: 18px;
  --text-body: 17px;
  --text-aux: 12px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-display: -0.045em;
  --tracking-heading: -0.03em;
  --tracking-body: -0.01em;
  --tracking-label: 0.055em;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  text-decoration: none;
}

button {
  border: 0;
}

a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

::selection {
  background: var(--signal-soft);
  color: var(--ink);
}

.page-width {
  width: min(var(--rail-max), calc(100% - (2 * var(--page-pad))));
  margin-inline: auto;
}

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  width: 100%;
  border-bottom: 1px solid var(--line);
  background: rgba(243, 242, 238, 0.94);
  backdrop-filter: blur(18px);
}

.topbar-inner {
  position: relative;
  display: flex;
  min-height: 64px;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 12px;
  font-weight: 540;
  letter-spacing: -0.01em;
}

.brand-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--ink);
  font-size: 9px;
  font-weight: 680;
  letter-spacing: -0.04em;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.topnav a,
.article-actions a,
.paper-links a,
footer a {
  transition: color 160ms ease;
}

.topnav a:hover,
.topnav a:focus-visible,
.article-actions a:hover,
.article-actions a:focus-visible,
.paper-links a:hover,
.paper-links a:focus-visible,
footer a:hover,
footer a:focus-visible {
  color: var(--signal);
}

.menu-button {
  display: none;
  background: transparent;
}

.article-header {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding-top: clamp(88px, 10vw, 144px);
  padding-bottom: clamp(54px, 6vw, 84px);
}

.article-header > :not(.hero-tree-field) {
  position: relative;
  z-index: 1;
}

.article-label,
.section-label {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 620;
  line-height: 1.4;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.article-header h1 {
  max-width: 1080px;
  margin: 32px 0 0;
  font-size: clamp(46px, 5.4vw, 72px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.01;
}

.hero-title-stage {
  position: relative;
  margin-top: 32px;
  isolation: isolate;
}

.article-header .hero-title-stage h1 {
  position: relative;
  z-index: 1;
  margin: 0;
}

.hero-tree-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: paint;
  opacity: 0.94;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    rgb(0 0 0 / 4%) 0%,
    rgb(0 0 0 / 10%) 28%,
    rgb(0 0 0 / 34%) 48%,
    rgb(0 0 0 / 78%) 68%,
    #000 86%
  );
  mask-image: linear-gradient(
    90deg,
    rgb(0 0 0 / 4%) 0%,
    rgb(0 0 0 / 10%) 28%,
    rgb(0 0 0 / 34%) 48%,
    rgb(0 0 0 / 78%) 68%,
    #000 86%
  );
}

.hero-tree-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.article-summary {
  max-width: 820px;
  margin: 38px 0 0;
  color: #33332f;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 390;
  letter-spacing: -0.025em;
  line-height: 1.48;
}

.runtime-line {
  max-width: 820px;
  margin: 34px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.article-meta {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: clamp(32px, 5vw, 72px);
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.72;
}

.article-meta p {
  margin: 0;
}

.article-meta strong,
.article-meta span {
  display: block;
}

.article-meta strong {
  color: var(--ink);
  font-weight: 570;
}

.article-meta sup {
  margin-left: 1px;
  color: var(--muted);
}

.article-actions,
.paper-links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 29px;
}

.article-actions a,
.paper-links a {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 12px;
  font-weight: 560;
}

.article-actions a span,
.paper-links a span {
  margin-left: 12px;
  color: var(--muted);
}

.hero-figure,
.media-figure,
.growth-story figure,
.deployment-story figure,
.results-gallery figure,
.transition-media figure,
.data-figure {
  margin-top: 0;
  margin-bottom: 0;
}

.hero-figure .video-shell {
  aspect-ratio: 16 / 9;
}

.video-shell {
  --media-white: rgba(252, 252, 249, 0.94);
  --media-dim: rgba(252, 252, 249, 0.68);
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(96, 117, 108, 0.24);
  background: color-mix(in srgb, var(--paper) 92%, var(--signal));
}

.video-shell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(0.98) brightness(0.96);
  transform: scale(1.012);
  transition:
    filter 900ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.video-shell.is-media-visible video {
  transform: scale(1);
}

.video-shell.is-playing video {
  filter: saturate(0.94) contrast(1.01) brightness(0.98);
}

.media-surface {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 12, 11, 0.42), transparent 21%),
    linear-gradient(0deg, rgba(10, 12, 11, 0.62), transparent 28%),
    radial-gradient(circle at 78% 40%, transparent 0 34%, rgba(8, 10, 9, 0.08) 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.media-hud {
  position: absolute;
  z-index: 2;
  top: 17px;
  left: 18px;
  pointer-events: none;
  color: var(--media-white);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 590;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.media-hud-eyebrow {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 8px 9px 7px;
  background: rgba(17, 18, 17, 0.34);
  backdrop-filter: blur(12px) saturate(0.75);
}

.media-timeline {
  position: absolute;
  z-index: 5;
  right: 14px;
  bottom: 8px;
  left: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 24px;
  color: rgba(252, 252, 249, 0.76);
}

.media-scrubber {
  --media-progress: 0%;
  width: 100%;
  height: 24px;
  margin: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  touch-action: pan-y;
}

.media-scrubber::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(226, 232, 228, 0.96) 0 var(--media-progress),
    rgba(255, 255, 255, 0.26) var(--media-progress) 100%
  );
}

.media-scrubber::-moz-range-track {
  height: 3px;
  border: 0;
  background: linear-gradient(
    90deg,
    rgba(226, 232, 228, 0.96) 0 var(--media-progress),
    rgba(255, 255, 255, 0.26) var(--media-progress) 100%
  );
}

.media-scrubber::-webkit-slider-thumb {
  width: 11px;
  height: 11px;
  margin-top: -4px;
  cursor: grab;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background: var(--system-green-deep);
  box-shadow: 0 0 0 3px rgba(245, 249, 247, 0.16);
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
}

.media-scrubber::-moz-range-thumb {
  width: 11px;
  height: 11px;
  cursor: grab;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background: var(--system-green-deep);
  box-shadow: 0 0 0 3px rgba(245, 249, 247, 0.16);
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
}

.media-scrubber:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.12);
}

.media-scrubber:active::-moz-range-thumb {
  cursor: grabbing;
  transform: scale(1.12);
}

.media-timeline output {
  min-width: 66px;
  padding: 5px 0 4px;
  color: rgba(252, 252, 249, 0.86);
  font-family: var(--mono);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
  opacity: 0;
  transition: opacity 150ms ease;
}

.video-shell:hover .media-scrubber::-webkit-slider-thumb,
.video-shell.is-paused .media-scrubber::-webkit-slider-thumb,
.media-scrubber:focus-visible::-webkit-slider-thumb {
  opacity: 1;
}

.video-shell:hover .media-scrubber::-moz-range-thumb,
.video-shell.is-paused .media-scrubber::-moz-range-thumb,
.media-scrubber:focus-visible::-moz-range-thumb {
  opacity: 1;
}

.video-shell:hover .media-timeline output,
.video-shell.is-paused .media-timeline output,
.media-timeline:focus-within output {
  opacity: 1;
}

.media-scrubber:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.media-control {
  position: absolute;
  z-index: 6;
  right: 14px;
  bottom: 47px;
  padding: 8px 11px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(14, 14, 13, 0.52);
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  backdrop-filter: blur(10px);
  transition: opacity 160ms ease, background 160ms ease;
}

.media-control span {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.video-shell:hover .media-control,
.media-control:focus-visible {
  opacity: 1;
}

.media-control:hover {
  background: rgba(14, 14, 13, 0.86);
}

.figure-caption {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: var(--gutter);
  margin-top: 15px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.figure-caption > span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 560;
  line-height: 1.55;
  text-transform: uppercase;
}

.figure-caption p {
  max-width: 760px;
  margin: 0;
}

.figure-caption strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-weight: 590;
}

.story-map {
  display: grid;
  grid-template-columns: minmax(136px, 0.72fr) minmax(0, 4fr);
  gap: var(--gutter);
  align-items: stretch;
  margin-top: clamp(48px, 5vw, 68px);
  padding: 22px 0 23px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.story-map > p {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 560;
  letter-spacing: 0.075em;
  line-height: 1.45;
  text-transform: uppercase;
}

.story-map ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.story-map li {
  min-width: 0;
  padding: 0 clamp(16px, 2.2vw, 30px);
  border-left: 1px solid var(--line);
}

.story-map a,
.story-map span,
.story-map strong {
  display: block;
}

.story-map a {
  transition: color 180ms ease;
}

.story-map a:hover,
.story-map a:focus-visible {
  color: var(--signal);
}

.story-map span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

.story-map strong {
  margin-top: 10px;
  font-size: clamp(14px, 1.35vw, 17px);
  font-weight: 510;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.chapter,
.closing-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: var(--space-section);
  scroll-margin-top: 84px;
}

.chapter-copy {
  grid-column: 1 / span 7;
}

.chapter-note {
  grid-column: 10 / -1;
  align-self: end;
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
}

.chapter-note span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 620;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.chapter-note p {
  margin: 14px 0 0;
  color: var(--body);
  font-size: 14px;
  line-height: 1.6;
}

.equation-note {
  align-self: start;
}

.equation-stack {
  margin: 21px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.equation-stack li {
  position: relative;
  padding: 15px 0 15px 25px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 17px;
  font-weight: 470;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.equation-stack li::before {
  position: absolute;
  top: 15px;
  left: 0;
  color: var(--muted);
  content: "+";
  font-family: var(--mono);
  font-size: 13px;
}

.equation-stack li:first-child::before {
  content: "";
}

.equation-note .equation-result {
  margin-top: 21px;
}

.equation-result strong,
.equation-result small {
  display: block;
}

.equation-result strong {
  color: var(--signal);
  font-size: 20px;
  font-weight: 520;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.equation-result small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.equation-note .equation-shift {
  margin-top: 27px;
  padding-top: 17px;
  border-top: 1px solid var(--line-strong);
  font-size: 13px;
}

.chapter h2,
.paper-details h2 {
  margin: 26px 0 0;
  font-size: clamp(34px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.growth-copy h2,
.growth-copy h3,
.deployment-copy h3,
.transition-copy h3,
.motion-space-copy h3,
.closing-statement {
  margin: 26px 0 0;
  font-size: clamp(31px, 2.8vw, 37px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.closing-statement {
  max-width: 720px;
}

.chapter-lead {
  max-width: 780px;
  margin: 40px 0 0;
  color: #30302d;
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 390;
  letter-spacing: -0.025em;
  line-height: 1.48;
}

.chapter-lead.compact {
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.55;
}

.prose {
  max-width: 760px;
  margin-top: 38px;
  color: var(--body);
  font-size: 17px;
  line-height: 1.76;
}

.prose p {
  margin: 0;
}

.prose p + p {
  margin-top: 24px;
}

.fact-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--space-major);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.fact-row > div {
  min-height: 128px;
  padding: 29px 26px 27px;
}

.fact-row > div:first-child {
  padding-left: 0;
}

.fact-row > div:last-child {
  padding-right: 0;
}

.fact-row > div + div {
  border-left: 1px solid var(--line);
}

.fact-row strong,
.fact-row span {
  display: block;
}

.fact-row strong {
  font-size: 25px;
  font-weight: 510;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.fact-row span {
  margin-top: 18px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 610;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.system-flow {
  --sequence-step: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: var(--space-block);
  padding: 9px;
  overflow: hidden;
  border: 1px solid rgba(96, 117, 108, 0.2);
  background:
    linear-gradient(90deg, rgba(96, 117, 108, 0.035), transparent 24% 76%, rgba(96, 117, 108, 0.035)),
    rgba(255, 255, 255, 0.08);
  list-style: none;
}

.system-flow::before,
.system-flow::after {
  position: absolute;
  z-index: 0;
  top: 103px;
  right: 8%;
  left: 8%;
  height: 12px;
  border-radius: 999px;
  content: "";
  pointer-events: none;
}

.system-flow::before {
  background: rgba(96, 117, 108, 0.07);
}

.system-flow::after {
  background: linear-gradient(90deg, transparent, rgba(96, 117, 108, 0.32), transparent);
  opacity: 0;
  transform: translateX(-75%) scaleX(0.32);
}

.system-flow.is-sequenced::after {
  animation: system-flow-passage 4.8s cubic-bezier(0.2, 0.7, 0.2, 1) 180ms 1 both;
}

.system-flow li {
  position: relative;
  z-index: 1;
  min-height: 228px;
  padding: 20px 20px 24px;
  overflow: hidden;
  background: rgba(243, 242, 238, 0.72);
  box-shadow: inset 0 0 0 1px rgba(23, 23, 22, 0.075);
  transition:
    background-color 620ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.system-flow.is-sequenced li {
  animation: system-stage-arrival 4.8s cubic-bezier(0.16, 1, 0.3, 1) 1 both;
}

.system-flow.is-sequenced li:nth-child(2) {
  animation-delay: 520ms;
}

.system-flow.is-sequenced li:nth-child(3) {
  animation-delay: 1040ms;
}

.system-flow.is-sequenced li:nth-child(4) {
  animation-delay: 1560ms;
}

.system-flow-index {
  position: absolute;
  top: 18px;
  left: 18px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--text-aux);
  font-weight: var(--weight-semibold);
}

.system-flow h3 {
  margin: 24px 0 0;
  font-size: 23px;
  font-weight: 520;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.system-flow p {
  max-width: 220px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.system-flow li:nth-child(3) h3,
.system-flow li:nth-child(4) h3,
.system-flow li:nth-child(3) .system-flow-glyph,
.system-flow li:nth-child(4) .system-flow-glyph {
  color: var(--signal);
}

.system-flow-glyph {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  margin: 12px 0 0 auto;
  color: rgba(96, 117, 108, 0.76);
}

.system-flow-glyph::before {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 117, 108, 0.14), rgba(96, 117, 108, 0.025) 68%, transparent 70%);
  content: "";
  transform: scale(0.78);
  transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.system-flow.is-sequenced .system-flow-glyph::before {
  transform: scale(1);
}

.system-flow-glyph i,
.system-flow-glyph b {
  position: absolute;
  display: block;
  background: currentColor;
}

.system-flow-glyph-seed i:first-child {
  top: 29px;
  left: 22px;
  width: 29px;
  height: 16px;
  border-radius: 60% 42% 58% 44%;
  transform: rotate(-13deg);
}

.system-flow-glyph-seed i:nth-child(2) {
  top: 34px;
  left: 32px;
  width: 12px;
  height: 2px;
  background: rgba(243, 242, 238, 0.8);
  transform: rotate(31deg);
}

.system-flow-glyph-seed i:nth-child(3),
.system-flow-glyph-seed i:nth-child(4) {
  top: 47px;
  left: 34px;
  width: 2px;
  height: 11px;
  border-radius: 99px;
  transform: rotate(20deg);
  transform-origin: top;
}

.system-flow-glyph-seed i:nth-child(4) {
  transform: rotate(-28deg);
}

.system-flow-glyph-ground i:nth-child(1),
.system-flow-glyph-ground i:nth-child(2),
.system-flow-glyph-ground i:nth-child(3) {
  bottom: 19px;
  width: 14px;
  border-radius: 2px 2px 0 0;
}

.system-flow-glyph-ground i:nth-child(1) {
  left: 14px;
  height: 12px;
  opacity: 0.46;
}

.system-flow-glyph-ground i:nth-child(2) {
  left: 29px;
  height: 22px;
  opacity: 0.7;
}

.system-flow-glyph-ground i:nth-child(3) {
  left: 44px;
  height: 33px;
}

.system-flow-glyph-ground i:nth-child(4) {
  top: 18px;
  left: 29px;
  width: 21px;
  height: 5px;
  border-radius: 99px;
  transform: rotate(31deg);
}

.system-flow-glyph-ground b {
  top: 15px;
  left: 25px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.system-flow-glyph-grow i {
  bottom: 18px;
  width: 8px;
  border-radius: 99px 99px 2px 2px;
  transform-origin: bottom;
}

.system-flow-glyph-grow i:nth-child(1) {
  left: 13px;
  height: 18px;
  opacity: 0.34;
}

.system-flow-glyph-grow i:nth-child(2) {
  left: 28px;
  height: 29px;
  opacity: 0.54;
}

.system-flow-glyph-grow i:nth-child(3) {
  left: 43px;
  height: 40px;
  opacity: 0.76;
}

.system-flow-glyph-grow i:nth-child(4) {
  left: 58px;
  height: 51px;
}

.system-flow-glyph-grow b {
  right: 3px;
  bottom: 65px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.system-flow-glyph-distill i:nth-child(1),
.system-flow-glyph-distill i:nth-child(2),
.system-flow-glyph-distill i:nth-child(3) {
  left: 11px;
  width: 19px;
  height: 8px;
  border-radius: 99px;
}

.system-flow-glyph-distill i:nth-child(1) { top: 16px; opacity: 0.34; }
.system-flow-glyph-distill i:nth-child(2) { top: 31px; opacity: 0.56; }
.system-flow-glyph-distill i:nth-child(3) { top: 46px; opacity: 0.78; }

.system-flow-glyph-distill i:nth-child(4) {
  top: 20px;
  left: 36px;
  width: 16px;
  height: 32px;
  clip-path: polygon(0 0, 100% 37%, 100% 63%, 0 100%);
  opacity: 0.46;
}

.system-flow-glyph-distill b {
  top: 24px;
  right: 6px;
  width: 11px;
  height: 24px;
  border-radius: 99px;
}

@keyframes system-flow-passage {
  0% { opacity: 0; transform: translateX(-75%) scaleX(0.32); }
  18%, 78% { opacity: 0.86; }
  100% { opacity: 0; transform: translateX(75%) scaleX(0.32); }
}

@keyframes system-stage-arrival {
  0%, 12% { background-color: rgba(243, 242, 238, 0.72); box-shadow: inset 0 0 0 1px rgba(23, 23, 22, 0.075); }
  23%, 60% { background-color: rgba(217, 223, 219, 0.48); box-shadow: inset 0 0 0 1px rgba(96, 117, 108, 0.28); }
  100% { background-color: rgba(243, 242, 238, 0.72); box-shadow: inset 0 0 0 1px rgba(23, 23, 22, 0.075); }
}

.growth-story,
.deployment-story,
.transition-story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
  margin-top: clamp(72px, 7vw, 104px);
}

.growth-story,
.deployment-story {
  padding-top: clamp(48px, 5vw, 72px);
  border-top: 1px solid var(--line-strong);
}

.transition-story {
  margin-top: clamp(56px, 5vw, 76px);
}

.growth-copy,
.deployment-copy,
.transition-copy {
  grid-column: 1 / span 4;
}

.growth-story > figure,
.deployment-story > figure,
.transition-media {
  grid-column: 6 / -1;
}

.growth-copy > p:not(.section-label):not(.disclosure),
.deployment-copy > p:not(.section-label),
.transition-copy > p:not(.section-label) {
  margin: 31px 0 0;
  color: var(--body);
  font-size: 15px;
  line-height: 1.76;
}

.growth-story .video-shell,
.deployment-story .video-shell {
  aspect-ratio: 16 / 9;
}

.reference-figure .media-control {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.range-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 38px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.range-readout div {
  padding: 18px 0 20px;
}

.range-readout div + div {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.range-readout dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 620;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.range-readout dd {
  margin: 10px 0 0;
  font-size: 21px;
  font-weight: 520;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.disclosure {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.media-figure {
  margin-top: var(--space-major);
}

.pipeline {
  --pipe-tint: rgba(96, 117, 108, 0.07);
  --pipe-tint-strong: rgba(96, 117, 108, 0.13);
  --pipe-rule: rgba(96, 117, 108, 0.46);
  --flow-base: rgba(96, 117, 108, 0.3);
  --flow-hot: rgba(96, 117, 108, 0.92);
  --flow-quiet: rgba(96, 117, 108, 0.54);
  --flow-cycle: 11.2s;
  --flow-packet: 28px;
}

.pipeline-map {
  position: relative;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.pipeline-map-header,
.pipeline-stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.pipeline-map-header {
  align-items: end;
  padding: 28px 0 36px;
}

.pipeline-map-header > div {
  grid-column: 1 / span 8;
}

.pipeline-eyebrow,
.pipeline-stage-header p,
.pipeline-node-kicker,
.pipeline-rail-label {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 620;
  line-height: 1.4;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.pipeline-map-header h3 {
  max-width: 760px;
  margin: 16px 0 0;
  font-size: clamp(27px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.042em;
}

.pipeline-sequence {
  display: grid;
  grid-column: 9 / -1;
  grid-template-columns: auto minmax(18px, 1fr) auto minmax(18px, 1fr) auto;
  gap: 9px;
  align-items: center;
  margin: 0 0 4px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.pipeline-sequence i {
  position: relative;
  display: block;
  height: 1px;
  background: var(--pipe-rule);
}

.pipeline-sequence i::before {
  position: absolute;
  inset: -1px 0;
  background: linear-gradient(
      90deg,
      transparent,
      var(--flow-hot) 48%,
      transparent
    )
    no-repeat -32px 50% / var(--flow-packet) 3px;
  content: "";
  opacity: 0;
}

.pipeline-map.is-flowing .pipeline-sequence i::before {
  animation: pipeline-flow-x var(--flow-cycle) linear infinite;
}

.pipeline-map.is-flowing .pipeline-sequence .pipeline-flow-summary-b::before {
  animation-delay: 5.65s;
}

.pipeline-sequence i::after {
  position: absolute;
  top: -2px;
  right: 0;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--signal);
  border-right: 1px solid var(--signal);
  content: "";
  opacity: 0.68;
  transform: rotate(45deg);
}

.pipeline-map.is-flowing .pipeline-sequence i::after {
  animation: pipeline-arrow-arrival var(--flow-cycle) ease-in-out infinite;
}

.pipeline-map.is-flowing .pipeline-sequence .pipeline-flow-summary-b::after {
  animation-delay: 5.65s;
}

.pipeline-stages,
.pipeline-transition-track {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pipeline-stage {
  padding: 38px 0 42px;
  border-top: 1px solid var(--line);
}

.pipeline-stage-header {
  grid-column: 1 / span 3;
}

.pipeline-stage-number {
  display: block;
  color: var(--signal);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 620;
  line-height: 1;
  letter-spacing: 0.04em;
}

.pipeline-stage-header p {
  margin-top: 22px;
}

.pipeline-stage-header h4 {
  max-width: 220px;
  margin: 9px 0 0;
  font-size: 21px;
  font-weight: 510;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.pipeline-stage-main,
.pipeline-stage-content,
.pipeline-loop {
  grid-column: 4 / -1;
  min-width: 0;
}

.pipeline-stage-main {
  display: grid;
  grid-template-columns:
    minmax(160px, 1fr) 28px minmax(145px, 0.82fr) 28px
    minmax(128px, 0.68fr) 28px minmax(145px, 0.82fr);
  gap: 10px;
  align-items: stretch;
}

.pipeline-node-stack {
  display: grid;
  gap: 9px;
}

.pipeline-node {
  --node-delay: 0s;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  padding: 15px 16px 16px;
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 52%),
    rgba(23, 23, 22, 0.014);
}

.pipeline-node::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(96, 117, 108, 0.2), transparent 42%),
    linear-gradient(90deg, rgba(96, 117, 108, 0.12), transparent 66%);
  content: "";
  opacity: 0;
  pointer-events: none;
}

.pipeline-node > * {
  position: relative;
  z-index: 1;
}

.pipeline-node-input { --node-delay: 0.15s; }
.pipeline-node-policy { --node-delay: 1.5s; }
.pipeline-node-sim { --node-delay: 2.65s; }
.pipeline-node-output { --node-delay: 3.7s; }
.pipeline-node-unified { --node-delay: 5.1s; }
.pipeline-node-recurrent { --node-delay: 7.75s; }
.pipeline-node-action { --node-delay: 9s; }

.pipeline-map.is-flowing .pipeline-node::after {
  animation: pipeline-node-surface var(--flow-cycle) cubic-bezier(0.2, 0.7, 0.2, 1) var(--node-delay) infinite;
}

.pipeline-node-policy,
.pipeline-node-output,
.pipeline-node-recurrent,
.pipeline-node-action {
  border-color: var(--pipe-rule);
  background: var(--pipe-tint);
}

.pipeline-node-output,
.pipeline-node-action {
  background: var(--pipe-tint-strong);
}

.pipeline-node strong {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 560;
  line-height: 1.32;
  letter-spacing: -0.018em;
}

.pipeline-node p {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.pipeline-node-with-glyph > .pipeline-node-kicker {
  max-width: calc(100% - 56px);
}

.pipeline-glyph {
  --glyph-delay: 0s;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 30px;
  color: var(--signal);
  opacity: 0.74;
  pointer-events: none;
}

.pipeline-glyph::before {
  position: absolute;
  inset: -7px -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 117, 108, 0.13), transparent 72%);
  content: "";
}

.pipeline-glyph > i,
.pipeline-glyph > b {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.pipeline-glyph > i {
  height: 1px;
  background: currentColor;
  transform-origin: left center;
}

.pipeline-glyph > b {
  width: 4px;
  height: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 34%, transparent);
}

.pipeline-map.is-flowing .pipeline-glyph > i,
.pipeline-map.is-flowing .pipeline-glyph > b {
  animation: pipeline-glyph-signal var(--flow-cycle) ease-in-out infinite;
  animation-delay: var(--glyph-delay);
}

.pipeline-glyph-terrain {
  --glyph-delay: 0s;
}

.pipeline-glyph-terrain i:nth-child(1),
.pipeline-glyph-terrain i:nth-child(2),
.pipeline-glyph-terrain i:nth-child(3) {
  width: 11px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  background: none;
}

.pipeline-glyph-terrain i:nth-child(1) {
  top: 18px;
  left: 1px;
}

.pipeline-glyph-terrain i:nth-child(2) {
  top: 12px;
  left: 11px;
}

.pipeline-glyph-terrain i:nth-child(3) {
  top: 6px;
  left: 21px;
}

.pipeline-glyph-terrain i:nth-child(4) {
  top: 3px;
  left: 29px;
  width: 8px;
  transform: rotate(20deg);
}

.pipeline-glyph-terrain b:nth-of-type(1) {
  top: 20px;
  left: 7px;
}

.pipeline-glyph-terrain b:nth-of-type(2) {
  top: 8px;
  left: 27px;
}

.pipeline-glyph-contact {
  --glyph-delay: 0.32s;
}

.pipeline-glyph-contact i:nth-child(1) {
  top: 9px;
  right: 1px;
  width: 17px;
  height: 15px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  background: none;
}

.pipeline-glyph-contact i:nth-child(2) {
  top: 6px;
  left: 3px;
  width: 15px;
  transform: rotate(28deg);
}

.pipeline-glyph-contact i:nth-child(3) {
  top: 13px;
  left: 16px;
  width: 11px;
  transform: rotate(48deg);
}

.pipeline-glyph-contact i:nth-child(4) {
  top: 19px;
  left: 8px;
  width: 13px;
  transform: rotate(-18deg);
}

.pipeline-glyph-contact b:nth-of-type(1) {
  top: 4px;
  left: 1px;
}

.pipeline-glyph-contact b:nth-of-type(2) {
  top: 17px;
  left: 25px;
}

.pipeline-glyph-network {
  --glyph-delay: 1.35s;
}

.pipeline-glyph-network i:nth-child(1) {
  top: 13px;
  left: 4px;
  width: 12px;
  transform: rotate(-33deg);
}

.pipeline-glyph-network i:nth-child(2) {
  top: 13px;
  left: 4px;
  width: 12px;
  transform: rotate(33deg);
}

.pipeline-glyph-network i:nth-child(3) {
  top: 6px;
  left: 17px;
  width: 17px;
  transform: rotate(25deg);
}

.pipeline-glyph-network i:nth-child(4) {
  top: 20px;
  left: 17px;
  width: 17px;
  transform: rotate(-25deg);
}

.pipeline-glyph-network b:nth-of-type(1) {
  top: 11px;
  left: 1px;
  border: 0;
  background: currentColor;
  box-shadow: 31px 0 0 currentColor;
}

.pipeline-glyph-network b:nth-of-type(2) {
  top: 3px;
  left: 15px;
  border: 0;
  background: currentColor;
  box-shadow: 0 8px 0 currentColor, 0 16px 0 currentColor;
}

.pipeline-glyph-physics {
  --glyph-delay: 2.45s;
  width: 33px;
}

.pipeline-glyph-physics i:nth-child(1) {
  top: 23px;
  left: 0;
  width: 33px;
}

.pipeline-glyph-physics i:nth-child(2) {
  top: 10px;
  left: 11px;
  width: 13px;
  height: 12px;
  border: 1px solid currentColor;
  background: none;
}

.pipeline-glyph-physics i:nth-child(3) {
  top: 1px;
  left: 17px;
  width: 1px;
  height: 9px;
}

.pipeline-glyph-physics i:nth-child(4) {
  top: 3px;
  left: 14px;
  width: 5px;
  transform: rotate(45deg);
}

.pipeline-glyph-physics b:nth-of-type(1) {
  top: 20px;
  left: 9px;
}

.pipeline-glyph-physics b:nth-of-type(2) {
  top: 20px;
  left: 22px;
}

.pipeline-glyph-family {
  --glyph-delay: 3.55s;
}

.pipeline-glyph-family i:nth-child(1) {
  top: 13px;
  left: 18px;
  width: 1px;
  height: 13px;
}

.pipeline-glyph-family i:nth-child(2) {
  top: 13px;
  left: 18px;
  width: 16px;
  transform: rotate(-29deg);
}

.pipeline-glyph-family i:nth-child(3) {
  top: 13px;
  left: 4px;
  width: 16px;
  transform: rotate(29deg);
}

.pipeline-glyph-family i:nth-child(4) {
  top: 13px;
  left: 18px;
  width: 11px;
  transform: rotate(-90deg);
}

.pipeline-glyph-family b:nth-of-type(1) {
  top: 4px;
  left: 16px;
  border: 0;
  background: currentColor;
  box-shadow: -14px 7px 0 currentColor, 14px 7px 0 currentColor;
}

.pipeline-glyph-family b:nth-of-type(2) {
  top: 23px;
  left: 16px;
}

.pipeline-glyph-merge {
  --glyph-delay: 5.15s;
}

.pipeline-glyph-merge i:nth-child(1) {
  top: 5px;
  left: 1px;
  width: 18px;
  transform: rotate(25deg);
}

.pipeline-glyph-merge i:nth-child(2) {
  top: 13px;
  left: 1px;
  width: 18px;
}

.pipeline-glyph-merge i:nth-child(3) {
  top: 21px;
  left: 1px;
  width: 18px;
  transform: rotate(-25deg);
}

.pipeline-glyph-merge i:nth-child(4) {
  top: 13px;
  left: 18px;
  width: 18px;
}

.pipeline-glyph-merge b:nth-of-type(1) {
  top: 3px;
  left: 0;
  border: 0;
  background: currentColor;
  box-shadow: 0 8px 0 currentColor, 0 16px 0 currentColor;
}

.pipeline-glyph-merge b:nth-of-type(2) {
  top: 11px;
  right: 0;
}

.pipeline-glyph-depth {
  --glyph-delay: 7.35s;
}

.pipeline-glyph-depth i:nth-child(1) {
  top: 9px;
  left: 1px;
  width: 10px;
  height: 9px;
  border: 1px solid currentColor;
  background: none;
}

.pipeline-glyph-depth i:nth-child(2) {
  top: 9px;
  left: 10px;
  width: 26px;
  transform: rotate(-19deg);
}

.pipeline-glyph-depth i:nth-child(3) {
  top: 18px;
  left: 10px;
  width: 26px;
  transform: rotate(19deg);
}

.pipeline-glyph-depth i:nth-child(4) {
  top: 5px;
  left: 31px;
  width: 1px;
  height: 18px;
}

.pipeline-glyph-depth b:nth-of-type(1) {
  top: 11px;
  left: 4px;
}

.pipeline-glyph-depth b:nth-of-type(2) {
  top: 3px;
  left: 29px;
}

.pipeline-glyph-memory {
  --glyph-delay: 8.15s;
}

.pipeline-glyph-memory i:nth-child(1),
.pipeline-glyph-memory i:nth-child(2),
.pipeline-glyph-memory i:nth-child(3) {
  top: 9px;
  width: 8px;
  height: 10px;
  border: 1px solid currentColor;
  background: var(--paper);
}

.pipeline-glyph-memory i:nth-child(1) {
  left: 0;
}

.pipeline-glyph-memory i:nth-child(2) {
  left: 15px;
}

.pipeline-glyph-memory i:nth-child(3) {
  right: 0;
}

.pipeline-glyph-memory i:nth-child(4) {
  top: 14px;
  left: 7px;
  width: 24px;
}

.pipeline-glyph-memory b:nth-of-type(1) {
  top: 3px;
  left: 12px;
  width: 14px;
  height: 14px;
  border-right-color: transparent;
}

.pipeline-glyph-memory b:nth-of-type(2) {
  top: 3px;
  left: 22px;
  border: 0;
  background: currentColor;
}

.pipeline-glyph-action {
  --glyph-delay: 9.15s;
}

.pipeline-glyph-action i:nth-child(1) {
  top: 13px;
  left: 11px;
  width: 8px;
}

.pipeline-glyph-action i:nth-child(2) {
  top: 13px;
  left: 18px;
  width: 8px;
  transform: rotate(-56deg);
}

.pipeline-glyph-action i:nth-child(3) {
  top: 6px;
  left: 22px;
  width: 10px;
  transform: rotate(66deg);
}

.pipeline-glyph-action i:nth-child(4) {
  top: 14px;
  right: 0;
  width: 7px;
}

.pipeline-glyph-action b:nth-of-type(1) {
  top: 8px;
  left: 0;
  width: 11px;
  height: 11px;
}

.pipeline-glyph-action b:nth-of-type(2) {
  top: 11px;
  left: 3px;
}

/*
 * Pipeline pictograms use one professional 24 px outline system. The rules
 * below intentionally neutralize the previous CSS sketches while keeping the
 * semantic kind classes available for analytics and future annotation.
 */
.pipeline-node-with-glyph > strong {
  margin-top: 24px;
}

.pipeline-glyph,
.pipeline-glyph-physics {
  position: absolute;
  top: 13px;
  right: 14px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(96, 117, 108, 0.17);
  border-radius: 9px;
  background: rgba(217, 223, 219, 0.28);
  color: var(--signal);
  opacity: 0.94;
  pointer-events: none;
}

.pipeline-glyph::before {
  content: none;
}

.pipeline-glyph svg,
.pipeline-glyph img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.pipeline-node-output .pipeline-glyph,
.pipeline-node-action .pipeline-glyph {
  border-color: rgba(96, 117, 108, 0.24);
  background: rgba(199, 209, 203, 0.42);
}

.pipeline-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.45;
  letter-spacing: 0.025em;
  list-style: none;
  text-transform: uppercase;
}

.pipeline-signals li + li::before {
  margin: 0 6px;
  color: var(--pipe-rule);
  content: "·";
}

.pipeline-arrow {
  --flow-delay: 0s;
  position: relative;
  display: block;
  min-width: 20px;
  height: 1px;
  align-self: center;
  background: var(--pipe-rule);
}

.pipeline-arrow::before {
  position: absolute;
  inset: -1px 0;
  background: linear-gradient(
      90deg,
      transparent,
      var(--flow-hot) 48%,
      transparent
    )
    no-repeat -32px 50% / var(--flow-packet) 3px;
  content: "";
  opacity: 0;
}

.pipeline-map.is-flowing .pipeline-arrow::before {
  animation: pipeline-flow-x var(--flow-cycle) linear var(--flow-delay) infinite;
}

.pipeline-arrow::after {
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--signal);
  border-right: 1px solid var(--signal);
  content: "";
  opacity: 0.68;
  transform: rotate(45deg);
}

.pipeline-map.is-flowing .pipeline-arrow::after {
  animation: pipeline-arrow-arrival var(--flow-cycle) ease-in-out
    var(--flow-delay) infinite;
}

.pipeline-arrow small {
  position: absolute;
  right: 0;
  bottom: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 7px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pipeline-flow-rollout {
  --flow-delay: 0.82s;
}

.pipeline-flow-action {
  --flow-delay: 8.4s;
}

.pipeline-flow-asset {
  --flow-delay: 1.62s;
}

.pipeline-flow-finetune {
  --flow-delay: 5.45s;
}

.pipeline-flow-depth {
  --flow-delay: 7.45s;
}

.pipeline-loop {
  position: relative;
  margin: 31px 0 0;
  padding-top: 25px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.55;
}

.pipeline-loop-label {
  margin-right: 12px;
  color: var(--signal);
  font-weight: 650;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.pipeline-loop-path {
  position: absolute;
  top: -31px;
  right: 10.7%;
  left: 13.1%;
  display: block;
  height: 39px;
  color: var(--signal);
}

.pipeline-loop-path > i {
  position: absolute;
  display: block;
  background: var(--flow-base);
}

.pipeline-loop-path > i:nth-child(1) {
  top: 0;
  right: 0;
  width: 1px;
  height: 22px;
}

.pipeline-loop-path > i:nth-child(2) {
  top: 21px;
  right: 0;
  left: 0;
  height: 1px;
}

.pipeline-loop-path > i:nth-child(3) {
  top: 0;
  left: 0;
  width: 1px;
  height: 22px;
}

.pipeline-loop-path > i:nth-child(3)::after {
  position: absolute;
  top: 0;
  left: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--signal);
  border-left: 1px solid var(--signal);
  content: "";
  opacity: 0.68;
  transform: rotate(45deg);
}

.pipeline-map.is-flowing .pipeline-loop-path > i:nth-child(3)::after {
  animation: pipeline-arrow-arrival var(--flow-cycle) ease-in-out 3.7s infinite;
}

.pipeline-loop-path > i::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0;
}

.pipeline-loop-path > i:nth-child(1)::before {
  background: linear-gradient(180deg, transparent, var(--flow-hot), transparent)
    no-repeat 50% -24px / 3px 20px;
}

.pipeline-loop-path > i:nth-child(2)::before {
  background: linear-gradient(90deg, transparent, var(--flow-hot), transparent)
    no-repeat calc(100% + 32px) 50% / var(--flow-packet) 3px;
}

.pipeline-loop-path > i:nth-child(3)::before {
  background: linear-gradient(180deg, transparent, var(--flow-hot), transparent)
    no-repeat 50% calc(100% + 24px) / 3px 20px;
}

.pipeline-map.is-flowing .pipeline-loop-path > i:nth-child(1)::before {
  animation: pipeline-flow-y var(--flow-cycle) linear 2.3s infinite;
}

.pipeline-map.is-flowing .pipeline-loop-path > i:nth-child(2)::before {
  animation: pipeline-flow-x-reverse var(--flow-cycle) linear 2.86s infinite;
}

.pipeline-map.is-flowing .pipeline-loop-path > i:nth-child(3)::before {
  animation: pipeline-flow-y-reverse var(--flow-cycle) linear 3.7s infinite;
}

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

.pipeline-experts > span {
  position: relative;
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--line);
  color: var(--body);
  font-size: 11px;
  font-weight: 540;
  line-height: 1.3;
}

.pipeline-experts > span::before,
.pipeline-experts > span::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 23px;
  content: "";
}

.pipeline-experts > span::after {
  background: var(--flow-base);
}

.pipeline-experts > span::before {
  z-index: 1;
  background: linear-gradient(180deg, transparent, var(--flow-hot), transparent)
    no-repeat 50% -20px / 3px 18px;
  opacity: 0;
}

.pipeline-map.is-flowing .pipeline-experts > span::before {
  animation: pipeline-flow-y var(--flow-cycle) linear 4.28s infinite;
}

.pipeline-map.is-flowing .pipeline-experts > span:nth-child(2)::before {
  animation-delay: 4.4s;
}

.pipeline-map.is-flowing .pipeline-experts > span:nth-child(3)::before {
  animation-delay: 4.52s;
}

.pipeline-map.is-flowing .pipeline-experts > span:nth-child(4)::before {
  animation-delay: 4.64s;
}

.pipeline-experts i {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.pipeline-distill-bridge {
  position: relative;
  margin: 22px 5% 0;
  padding-top: 9px;
  border-top: 1px solid var(--pipe-rule);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.pipeline-distill-bridge::before {
  position: absolute;
  inset: -2px 0 auto;
  height: 3px;
  background:
    linear-gradient(90deg, transparent, var(--flow-hot), transparent) no-repeat -30px
      50% / 26px 3px,
    linear-gradient(90deg, transparent, var(--flow-hot), transparent) no-repeat
      calc(100% + 30px) 50% / 26px 3px;
  content: "";
  opacity: 0;
}

.pipeline-map.is-flowing .pipeline-distill-bridge::before {
  animation: pipeline-flow-converge var(--flow-cycle) linear 4.76s infinite;
}

.pipeline-distill-bridge::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 28px;
  background: var(--pipe-rule);
  content: "";
}

.pipeline-distill-bridge span {
  position: relative;
  z-index: 1;
  padding: 0 9px;
  background: var(--paper);
}

.pipeline-distill-bridge > i {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  display: block;
  width: 1px;
  height: 28px;
  background: var(--flow-base);
}

.pipeline-distill-bridge > i::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--flow-hot), transparent)
    no-repeat 50% -20px / 3px 18px;
  content: "";
  opacity: 0;
}

.pipeline-distill-bridge > i::after {
  position: absolute;
  right: -3px;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--signal);
  border-bottom: 1px solid var(--signal);
  content: "";
  opacity: 0.68;
  transform: rotate(45deg);
}

.pipeline-map.is-flowing .pipeline-distill-bridge > i::after {
  animation: pipeline-arrow-arrival var(--flow-cycle) ease-in-out 5.35s infinite;
}

.pipeline-map.is-flowing .pipeline-distill-bridge > i::before {
  animation: pipeline-flow-y var(--flow-cycle) linear 5.35s infinite;
}

.pipeline-transition-flow {
  display: grid;
  grid-template-columns: minmax(165px, 0.67fr) 34px minmax(0, 1.8fr);
  gap: 12px;
  align-items: stretch;
  margin-top: 29px;
}

.pipeline-transition-group {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--pipe-rule);
}

.pipeline-transition-group > header {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
}

.pipeline-transition-group > header span,
.pipeline-transition-group > header strong {
  font-size: 10px;
  line-height: 1.3;
}

.pipeline-transition-group > header span {
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.pipeline-transition-group > header strong {
  color: var(--signal);
  font-weight: 620;
}

.pipeline-transition-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.pipeline-transition-track li {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 79px;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid var(--line);
}

.pipeline-transition-track li + li::before {
  position: absolute;
  top: calc(50% - 3px);
  left: -8px;
  width: 8px;
  height: 6px;
  background: var(--flow-base);
  clip-path: polygon(0 42%, 62% 42%, 62% 12%, 100% 50%, 62% 88%, 62% 58%, 0 58%);
  content: "";
}

.pipeline-transition-track li + li::after {
  position: absolute;
  z-index: 2;
  top: calc(50% - 3px);
  left: -8px;
  width: 8px;
  height: 6px;
  background: var(--flow-hot);
  clip-path: polygon(0 42%, 62% 42%, 62% 12%, 100% 50%, 62% 88%, 62% 58%, 0 58%);
  content: "";
  opacity: 0;
}

.pipeline-map.is-flowing .pipeline-transition-track li + li::after {
  animation: pipeline-transition-packet var(--flow-cycle) ease-in-out infinite;
}

.pipeline-map.is-flowing .pipeline-transition-track li:nth-child(2)::after {
  animation-delay: 5.7s;
}

.pipeline-map.is-flowing .pipeline-transition-track li:nth-child(3)::after {
  animation-delay: 6.12s;
}

.pipeline-map.is-flowing .pipeline-transition-track li:nth-child(4)::after {
  animation-delay: 6.54s;
}

.pipeline-transition-track span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 7px;
  line-height: 1;
}

.pipeline-transition-track strong {
  font-size: 11px;
  font-weight: 570;
  line-height: 1.2;
}

.pipeline-transition-track small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.25;
}

.pipeline-transition-track .pipeline-transition-skill {
  border-color: var(--pipe-rule);
  background: var(--pipe-tint-strong);
}

.pipeline-transition-group > .pipeline-prior {
  margin: 13px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 400;
  line-height: 1.45;
}

.pipeline-transition-group > .pipeline-runtime-proof {
  margin: 7px 0 0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 560;
  line-height: 1.35;
}

.pipeline-deploy-rail {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 1.1fr) 32px minmax(190px, 0.95fr) 32px minmax(140px, 0.6fr);
  gap: 11px;
  align-items: stretch;
  padding-top: 27px;
}

.pipeline-rail-label {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--signal);
}

.pipeline-node-recurrent strong i {
  margin: 0 4px;
  color: var(--signal);
  font-style: normal;
  font-weight: 400;
}

.pipeline-map.is-flowing .pipeline-inline-arrow {
  display: inline-block;
  animation: pipeline-inline-signal var(--flow-cycle) ease-in-out 7.65s infinite;
}

.pipeline-map.is-flowing .pipeline-inline-arrow-late {
  animation-delay: 8.45s;
}

.pipeline-training-rail {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(140px, 0.8fr) auto minmax(180px, 1.15fr);
  gap: 11px;
  align-items: center;
  margin-top: 18px;
  padding-top: 30px;
  border-top: 1px dashed var(--pipe-rule);
}

.pipeline-training-rail::before {
  position: absolute;
  top: -2px;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--flow-quiet), transparent)
    no-repeat calc(100% + 32px) 50% / var(--flow-packet) 3px;
  content: "";
  opacity: 0;
}

.pipeline-map.is-flowing .pipeline-training-rail::before {
  animation: pipeline-flow-x-reverse var(--flow-cycle) linear 7.9s infinite;
}

.pipeline-training-rail > article {
  min-width: 0;
  padding: 11px 13px;
  border: 1px dashed var(--line-strong);
}

.pipeline-training-rail > article span {
  display: block;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 7px;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pipeline-training-rail > article strong {
  display: block;
  margin-top: 7px;
  font-size: 10px;
  font-weight: 560;
  line-height: 1.35;
}

.pipeline-training-arrow {
  --training-angle: -34deg;
  position: relative;
  display: block;
  width: 27px;
  height: 1px;
  background: var(--flow-base);
  color: var(--signal);
  transform: rotate(var(--training-angle));
}

.pipeline-training-arrow-teacher {
  --training-angle: -146deg;
}

.pipeline-training-arrow::before {
  position: absolute;
  inset: -1px 0;
  background: linear-gradient(90deg, transparent, var(--flow-hot), transparent)
    no-repeat -18px 50% / 16px 3px;
  content: "";
  opacity: 0;
}

.pipeline-training-arrow::after {
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--signal);
  border-right: 1px solid var(--signal);
  content: "";
  opacity: 0.68;
  transform: rotate(45deg);
}

.pipeline-map.is-flowing .pipeline-training-arrow::after {
  animation: pipeline-arrow-arrival var(--flow-cycle) ease-in-out 7.5s infinite;
}

.pipeline-map.is-flowing .pipeline-training-arrow-teacher::after {
  animation-delay: 2.78s;
}

.pipeline-map.is-flowing .pipeline-training-arrow::before {
  animation: pipeline-flow-x var(--flow-cycle) linear 7.5s infinite;
}

.pipeline-map.is-flowing .pipeline-training-arrow-teacher::before {
  animation-delay: 2.78s;
}

.pipeline-training-rail > p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

@keyframes pipeline-flow-x {
  0%,
  8% {
    background-position: -32px 50%;
    opacity: 0;
  }
  11% {
    opacity: 1;
  }
  34% {
    background-position: calc(100% + 32px) 50%;
    opacity: 1;
  }
  38%,
  100% {
    background-position: calc(100% + 32px) 50%;
    opacity: 0;
  }
}

@keyframes pipeline-flow-x-reverse {
  0%,
  8% {
    background-position: calc(100% + 32px) 50%;
    opacity: 0;
  }
  11% {
    opacity: 1;
  }
  34% {
    background-position: -32px 50%;
    opacity: 1;
  }
  38%,
  100% {
    background-position: -32px 50%;
    opacity: 0;
  }
}

@keyframes pipeline-flow-y {
  0%,
  8% {
    background-position: 50% -24px;
    opacity: 0;
  }
  11% {
    opacity: 1;
  }
  34% {
    background-position: 50% calc(100% + 24px);
    opacity: 1;
  }
  38%,
  100% {
    background-position: 50% calc(100% + 24px);
    opacity: 0;
  }
}

@keyframes pipeline-flow-y-reverse {
  0%,
  8% {
    background-position: 50% calc(100% + 24px);
    opacity: 0;
  }
  11% {
    opacity: 1;
  }
  34% {
    background-position: 50% -24px;
    opacity: 1;
  }
  38%,
  100% {
    background-position: 50% -24px;
    opacity: 0;
  }
}

@keyframes pipeline-flow-converge {
  0%,
  8% {
    background-position:
      -30px 50%,
      calc(100% + 30px) 50%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  30% {
    background-position:
      calc(50% - 26px) 50%,
      calc(50% + 1px) 50%;
    opacity: 1;
  }
  35%,
  100% {
    background-position:
      calc(50% - 26px) 50%,
      calc(50% + 1px) 50%;
    opacity: 0;
  }
}

@keyframes pipeline-transition-packet {
  0%,
  8% {
    opacity: 0;
    transform: translateX(-3px);
  }
  12%,
  24% {
    opacity: 0.9;
  }
  31% {
    opacity: 0;
    transform: translateX(4px);
  }
  100% {
    opacity: 0;
    transform: translateX(4px);
  }
}

@keyframes pipeline-transition-packet-y {
  0%,
  8% {
    opacity: 0;
    transform: translateY(-3px);
  }
  12%,
  24% {
    opacity: 0.9;
  }
  31% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes pipeline-glyph-signal {
  0%,
  12%,
  100% {
    opacity: 0.42;
  }
  18%,
  25% {
    opacity: 0.96;
  }
  33% {
    opacity: 0.58;
  }
}

@keyframes pipeline-node-surface {
  0%, 7%, 100% {
    opacity: 0;
    transform: scale(0.98);
  }
  11%, 24% {
    opacity: 0.82;
    transform: scale(1);
  }
  34% {
    opacity: 0.12;
    transform: scale(1);
  }
}

@keyframes pipeline-inline-signal {
  0%,
  10%,
  100% {
    opacity: 0.4;
    transform: translateX(-1px);
  }
  18%,
  25% {
    opacity: 1;
    transform: translateX(1px);
  }
  34% {
    opacity: 0.5;
    transform: translateX(1px);
  }
}

@keyframes pipeline-arrow-arrival {
  0%,
  25%,
  100% {
    opacity: 0.58;
  }
  31%,
  36% {
    opacity: 1;
  }
  44% {
    opacity: 0.68;
  }
}

.evidence-stack {
  margin-top: var(--space-block);
}

.data-figure {
  padding: 34px 0 30px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.chart-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: end;
}

.chart-head h3 {
  max-width: 820px;
  margin: 17px 0 0;
  font-size: clamp(25px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.038em;
  line-height: 1.13;
}

.chart-head-compact {
  min-height: 130px;
  align-items: start;
}

.chart-head-compact h3 {
  max-width: 500px;
  font-size: clamp(23px, 2.1vw, 29px);
}

.chart-deck {
  max-width: 660px;
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.chart-kpi {
  display: grid;
  justify-items: end;
  gap: 7px;
  color: var(--signal);
  font-size: clamp(31px, 3.7vw, 49px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chart-kpi small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.chart-delta {
  color: var(--signal);
  font-size: clamp(31px, 3.5vw, 46px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.difficulty-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin: 42px 0 27px;
  padding: 0;
  list-style: none;
}

.difficulty-legend li {
  position: relative;
  padding-left: 21px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.035em;
  line-height: 1.2;
}

.difficulty-legend li::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 7px;
  border: 1px solid transparent;
  content: "";
  transform: translateY(-50%);
}

.difficulty-legend-full::before {
  background: var(--signal);
}

.difficulty-legend-fine-tune::before {
  background: #9c9e9a;
}

.difficulty-legend-memory::before {
  border-color: #a7aaa5 !important;
  background: transparent;
}

.difficulty-legend-teacher::before {
  height: 0 !important;
  border-top-color: var(--ink) !important;
}

.difficulty-plot {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.difficulty-axis {
  display: flex;
  height: 272px;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 0 1px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.difficulty-stage {
  position: relative;
  min-width: 0;
}

.difficulty-grid {
  position: absolute;
  inset: 0 0 54px;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.difficulty-grid span {
  width: 100%;
  border-top: 1px solid var(--line);
}

.difficulty-groups {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
}

.difficulty-group {
  display: grid;
  min-width: 0;
  grid-template-rows: 272px 54px;
}

.difficulty-measure {
  position: relative;
  min-width: 0;
  margin: 0 clamp(14px, 2.8vw, 42px);
}

.difficulty-bars {
  position: absolute;
  inset: 0 7% 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(6px, 0.9vw, 12px);
}

.difficulty-bar {
  position: relative;
  width: min(26%, 38px);
  height: 100%;
  min-width: 16px;
}

.difficulty-bar-name {
  display: none;
}

.difficulty-bar-track {
  position: absolute;
  inset: 0;
  display: block;
}

.difficulty-bar-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: var(--value);
  border: 1px solid transparent;
  background: var(--signal);
}

.difficulty-bar-fine-tune .difficulty-bar-fill {
  background: #9c9e9a;
}

.difficulty-bar-memory .difficulty-bar-fill {
  border-color: #a7aaa5;
  background: rgba(167, 170, 165, 0.13);
}

.difficulty-bar data {
  position: absolute;
  bottom: min(calc(var(--value) + 9px), calc(100% + 4px));
  left: 50%;
  z-index: 3;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1;
  transform: translateX(-50%);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.difficulty-teacher-tick {
  position: absolute;
  right: 0;
  bottom: var(--teacher);
  left: 0;
  z-index: 2;
  height: 1px;
  border-top: 1px solid var(--ink);
}

.difficulty-teacher-tick::after {
  position: absolute;
  top: -2px;
  right: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
  content: "";
}

.difficulty-teacher-name,
.difficulty-teacher-track,
.difficulty-teacher-tick data {
  display: none;
}

.difficulty-group-head {
  padding-top: 15px;
  text-align: center;
}

.difficulty-group-head h4,
.difficulty-group-head p {
  margin: 0;
}

.difficulty-group-head h4 {
  color: var(--ink);
  font-size: 13px;
  font-weight: 620;
  line-height: 1;
}

.difficulty-group-head p {
  margin-top: 5px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1;
}

.augmentation-ablation {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(380px, 1.1fr);
  gap: 18px 52px;
  align-items: end;
  margin-top: 34px;
  padding: 22px 0 20px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.augmentation-ablation strong {
  display: block;
  max-width: 490px;
  margin-top: 10px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 540;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.augmentation-outcomes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}

.augmentation-outcomes > span {
  display: grid;
  min-height: 55px;
  align-content: center;
  justify-items: center;
  border-right: 1px solid var(--line);
}

.augmentation-outcomes small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
}

.augmentation-outcomes data,
.augmentation-outcomes b {
  margin-top: 7px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 580;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.augmentation-outcomes b {
  color: var(--muted);
  font-weight: 400;
}

.augmentation-ablation > p {
  grid-column: 2;
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.benchmark-scope-note {
  display: block;
  margin-top: 9px;
}

.bars {
  margin: 0;
}

.bar-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 17px 0;
  border-top: 1px solid var(--line);
}

.bar-row dt,
.bar-row dd {
  margin: 0;
}

.bar-row dt strong,
.bar-row dt span {
  display: block;
}

.bar-row dt strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 560;
}

.bar-row dt span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.bar-row dd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  gap: 16px;
  align-items: center;
}

.bar-track {
  display: block;
  height: 9px;
  background: rgba(23, 23, 22, 0.075);
}

.bar-fill {
  display: block;
  width: var(--value);
  height: 100%;
  background: #7e8782;
}

.has-surface-motion .data-figure .difficulty-bar-fill,
.has-surface-motion .data-figure .bar-fill {
  transform-origin: bottom;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.has-surface-motion .data-figure:not(.is-revealed) .difficulty-bar-fill {
  transform: scaleY(0);
}

.has-surface-motion .data-figure .bar-fill {
  transform-origin: left;
}

.has-surface-motion .data-figure:not(.is-revealed) .bar-fill {
  transform: scaleX(0);
}

.has-surface-motion .data-figure .difficulty-group:nth-child(2) .difficulty-bar-fill {
  transition-delay: 90ms;
}

.has-surface-motion .data-figure .difficulty-group:nth-child(3) .difficulty-bar-fill {
  transition-delay: 180ms;
}

.has-surface-motion .data-figure .difficulty-group:nth-child(4) .difficulty-bar-fill {
  transition-delay: 270ms;
}

.has-surface-motion .data-figure .difficulty-teacher-tick,
.has-surface-motion .data-figure .difficulty-bar data,
.has-surface-motion .data-figure .shape-series data,
.has-surface-motion .data-figure .bar-row data {
  transition:
    opacity 420ms ease 620ms,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1) 620ms;
}

.has-surface-motion .data-figure:not(.is-revealed) .difficulty-teacher-tick,
.has-surface-motion .data-figure:not(.is-revealed) .difficulty-bar data,
.has-surface-motion .data-figure:not(.is-revealed) .shape-series data,
.has-surface-motion .data-figure:not(.is-revealed) .bar-row data {
  opacity: 0;
  transform: translateY(5px);
}

.has-surface-motion .equation-note .equation-stack li,
.has-surface-motion .equation-note .equation-result,
.has-surface-motion .equation-note .equation-shift,
.has-surface-motion .range-readout > div,
.has-surface-motion .runtime-facts li,
.has-surface-motion .motion-space-frame iframe {
  transition:
    opacity 680ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.has-surface-motion .equation-note:not(.is-revealed) .equation-stack li,
.has-surface-motion .equation-note:not(.is-revealed) .equation-result,
.has-surface-motion .equation-note:not(.is-revealed) .equation-shift,
.has-surface-motion .range-readout:not(.is-revealed) > div,
.has-surface-motion .runtime-facts:not(.is-revealed) li,
.has-surface-motion .motion-space-frame:not(.is-revealed) iframe {
  opacity: 0;
  transform: translateY(10px);
}

.has-surface-motion .equation-note.is-revealed .equation-result {
  background: rgba(217, 223, 219, 0.42);
}

.equation-result {
  margin-inline: -14px;
  padding: 14px;
}

.equation-stack li:nth-child(2),
.range-readout > div:nth-child(2),
.runtime-facts li:nth-child(2) {
  transition-delay: 110ms !important;
}

.equation-stack li:nth-child(3),
.runtime-facts li:nth-child(3) {
  transition-delay: 220ms !important;
}

.equation-result {
  transition-delay: 330ms !important;
}

.bar-row-highlight .bar-fill {
  background: var(--signal);
}

.bar-row data,
.shape-series data {
  color: var(--ink);
  font-size: 13px;
  font-weight: 620;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-figure figcaption {
  max-width: 820px;
  margin-top: 26px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.62;
}

.evidence-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(44px, 6vw, 84px);
  margin-top: var(--space-block);
  border-top: 1px solid var(--line-strong);
}

.evidence-pair .data-figure {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-top: 0;
  border-bottom: 0;
}

.evidence-pair .data-figure figcaption {
  margin-top: auto;
  padding-top: 28px;
}

.motion-space-section {
  margin-top: clamp(72px, 7vw, 104px);
  padding-top: clamp(48px, 5vw, 72px);
  border-top: 1px solid var(--line-strong);
}

.motion-space-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
}

.motion-space-copy {
  grid-column: 1 / span 7;
}

.motion-space-copy > p:last-child {
  max-width: 760px;
  margin: 30px 0 0;
  color: var(--body);
  font-size: 15px;
  line-height: 1.76;
}

.motion-space-note {
  grid-column: 10 / -1;
  align-self: end;
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
}

.motion-space-note p {
  margin: 0;
}

.motion-space-note p:not(.section-label) {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.motion-space-figure {
  margin-top: var(--space-block);
}

.motion-space-frame {
  position: relative;
  overflow: hidden;
  padding-top: 34px;
  border: 1px solid rgba(96, 117, 108, 0.24);
  background:
    radial-gradient(circle at 78% 16%, rgba(96, 117, 108, 0.11), transparent 36%),
    linear-gradient(180deg, rgba(217, 223, 219, 0.24), transparent 25%),
    var(--paper);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.motion-space-frame::before {
  position: absolute;
  top: 11px;
  left: 14px;
  color: var(--signal);
  content: "Interactive / policy memory";
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 620;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.motion-space-frame::after {
  position: absolute;
  top: 13px;
  right: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow:
    -12px 0 0 rgba(96, 117, 108, 0.44),
    -24px 0 0 rgba(96, 117, 108, 0.18);
  content: "";
}

.motion-space-frame iframe {
  display: block;
  width: 100%;
  min-height: 520px;
  border: 0;
  background: var(--paper);
}

.shape-chart {
  margin-top: 35px;
}

.shape-row {
  padding: 20px 0 22px;
  border-top: 1px solid var(--line);
}

.shape-row:last-child {
  border-bottom: 1px solid var(--line);
}

.shape-row h4 {
  margin: 0 0 15px;
  font-size: 14px;
  font-weight: 570;
}

.shape-series {
  display: grid;
  gap: 11px;
}

.shape-series > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 52px;
  gap: 12px;
  align-items: center;
}

.shape-series > div > span:first-child {
  color: var(--muted);
  font-size: 10px;
}

.bar-fill-reference {
  background: #b2b1ab;
}

.bars-compact {
  margin-top: 35px;
}

.bars-compact .bar-row {
  grid-template-columns: minmax(180px, 0.85fr) minmax(0, 1.15fr);
  gap: 22px;
  min-height: 89px;
}

.runtime-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 40px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.runtime-facts li {
  padding: 17px 12px 19px 0;
}

.runtime-facts li + li {
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.runtime-facts strong,
.runtime-facts span {
  display: block;
}

.runtime-facts strong {
  font-size: 18px;
  font-weight: 530;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.runtime-facts span {
  margin-top: 9px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 620;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.results-gallery {
  margin-top: var(--space-block);
}

.result-pair {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.result-pair > figure:first-child {
  grid-column: 1 / span 6;
}

.result-pair > figure:last-child {
  grid-column: 7 / -1;
}

.result-pair .video-shell {
  aspect-ratio: 16 / 9;
}

.transition-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.transition-media .video-shell {
  aspect-ratio: 16 / 9;
}

.transition-media .figure-caption {
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
}

.closing-section {
  margin-top: clamp(96px, 9vw, 132px);
  padding-top: var(--space-major);
  border-top: 1px solid var(--line-strong);
}

.limits {
  grid-column: 9 / -1;
  align-self: end;
}

.limits p:last-child {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.paper-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: var(--space-section);
  padding-top: 52px;
  padding-bottom: 132px;
  border-top: 1px solid var(--ink);
  scroll-margin-top: 84px;
}

.paper-details {
  grid-column: 1 / span 5;
}

.citation {
  grid-column: 7 / -1;
  align-self: start;
  border: 1px solid var(--line);
}

.paper-details h2 {
  font-size: clamp(30px, 3.2vw, 40px);
}

.paper-name {
  max-width: 500px;
  margin: 24px 0 0;
  color: var(--body);
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1.45;
}

.paper-abstract {
  max-width: 540px;
  margin: 40px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.citation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.citation-head button {
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-transform: uppercase;
}

.citation pre {
  overflow-x: auto;
  margin: 0;
  padding: clamp(22px, 3vw, 36px);
  color: #555550;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.8;
  white-space: pre-wrap;
}

footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding-top: 34px;
  padding-bottom: 44px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

footer p {
  margin: 0;
}

footer strong,
footer span {
  display: block;
}

footer strong {
  color: var(--ink);
  font-weight: 560;
}

@media (max-width: 1040px) {

  .chapter-copy {
    grid-column: 1 / span 8;
  }

  .chapter-note {
    grid-column: 10 / -1;
  }

  .growth-story,
  .deployment-story,
  .transition-story,
  .paper-section {
    grid-template-columns: 1fr;
    row-gap: 50px;
  }

  .growth-copy,
  .deployment-copy,
  .transition-copy,
  .growth-story > figure,
  .deployment-story > figure,
  .transition-media,
  .paper-details,
  .citation {
    grid-column: 1;
  }

  .growth-copy,
  .deployment-copy,
  .transition-copy,
  .paper-details {
    max-width: 760px;
  }

  .bar-row {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .evidence-pair {
    gap: 44px;
  }

  .motion-space-copy {
    grid-column: 1 / span 8;
  }

  .motion-space-note {
    grid-column: 10 / -1;
  }

  .bars-compact .bar-row {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .paper-section {
    row-gap: 64px;
  }
}

@media (max-width: 820px) {
  .topbar-inner {
    min-height: 58px;
  }

  .brand > span:last-child {
    display: none;
  }

  .menu-button {
    display: flex;
    width: 44px;
    height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-left: auto;
    cursor: pointer;
  }

  .menu-button span {
    width: 18px;
    height: 1px;
    background: var(--ink);
  }

  .topnav {
    position: absolute;
    top: 58px;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px;
    border: 1px solid var(--line);
    background: rgba(243, 242, 238, 0.98);
    backdrop-filter: blur(18px);
  }

  .topnav.open {
    display: flex;
  }

  .topnav a {
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
  }

  .topnav a:last-child {
    border-bottom: 0;
  }

  .article-header {
    padding-top: 78px;
    padding-bottom: 46px;
  }

  .hero-title-stage {
    margin-top: 27px;
  }

  .hero-tree-field {
    inset: 0;
    height: 100%;
  }

  .article-header h1 {
    max-width: 680px;
    margin-top: 27px;
    font-size: clamp(41px, 11vw, 54px);
    letter-spacing: -0.047em;
  }

  .article-summary {
    margin-top: 31px;
    font-size: 19px;
  }

  .runtime-line {
    margin-top: 27px;
    font-size: 13px;
  }

  .article-meta {
    grid-template-columns: 1fr;
    gap: 19px;
    margin-top: 40px;
  }

  .media-control {
    display: grid;
    min-width: 44px;
    min-height: 44px;
    place-items: center;
    opacity: 1;
  }

  .transition-media {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .story-map {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-block: 20px;
  }

  .story-map ol {
    grid-template-columns: 1fr;
  }

  .story-map li {
    padding: 15px 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .story-map li:last-child {
    padding-bottom: 0;
  }

  .chapter,
  .closing-section {
    grid-template-columns: 1fr;
    row-gap: 42px;
  }

  .chapter-copy,
  .chapter-note,
  .limits {
    grid-column: 1;
  }

  .chapter-note {
    max-width: 460px;
  }

  .chapter h2,
  .motion-space-copy h3,
  .growth-copy h3,
  .deployment-copy h3,
  .transition-copy h3,
  .closing-statement,
  .paper-details h2 {
    font-size: 32px;
  }

  .chapter-lead {
    margin-top: 32px;
    font-size: 19px;
  }

  .prose {
    margin-top: 31px;
    font-size: 16px;
  }

  .fact-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fact-row > div {
    min-height: 112px;
    padding: 22px 18px;
  }

  .fact-row > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .fact-row > div:nth-child(even) {
    padding-right: 0;
    border-left: 1px solid var(--line);
  }

  .fact-row > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .fact-row strong {
    font-size: 22px;
  }

  .system-flow {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .system-flow li {
    min-height: 128px;
    padding: 24px 92px 25px 55px;
  }

  .system-flow::before,
  .system-flow::after {
    top: 8%;
    right: auto;
    bottom: 8%;
    left: 33px;
    width: 10px;
    height: auto;
  }

  .system-flow::after {
    background: linear-gradient(180deg, transparent, rgba(96, 117, 108, 0.32), transparent);
    transform: translateY(-75%) scaleY(0.32);
  }

  .system-flow.is-sequenced::after {
    animation-name: system-flow-passage-vertical;
  }

  .system-flow-index {
    position: absolute;
    top: 28px;
    left: 20px;
  }

  .system-flow-glyph {
    position: absolute;
    top: 27px;
    right: 18px;
    width: 66px;
    height: 66px;
    margin: 0;
  }

  .system-flow h3 {
    margin-top: 0;
    font-size: 20px;
  }

  .system-flow p {
    max-width: 520px;
    margin-top: 8px;
  }

  @keyframes system-flow-passage-vertical {
    0% { opacity: 0; transform: translateY(-75%) scaleY(0.32); }
    18%, 78% { opacity: 0.86; }
    100% { opacity: 0; transform: translateY(75%) scaleY(0.32); }
  }

  .growth-story,
  .deployment-story,
  .transition-story {
    row-gap: 46px;
    padding-top: var(--space-major);
  }

  .chart-head {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .chart-head-compact {
    min-height: 0;
  }

  .chart-kpi,
  .chart-delta {
    font-size: 36px;
  }

  .chart-kpi {
    justify-items: start;
  }

  .difficulty-legend {
    gap: 12px 20px;
    margin: 34px 0 28px;
  }

  .difficulty-plot {
    display: block;
  }

  .difficulty-axis,
  .difficulty-grid {
    display: none;
  }

  .difficulty-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 36px;
  }

  .difficulty-group {
    grid-template-areas:
      "head"
      "measure";
    grid-template-rows: auto auto;
    padding: 22px 0 24px;
    border-top: 1px solid var(--line);
  }

  .difficulty-group-head {
    grid-area: head;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 0 18px;
    text-align: left;
  }

  .difficulty-group-head p {
    margin-top: 0;
  }

  .difficulty-measure {
    grid-area: measure;
    margin: 0;
  }

  .difficulty-bars {
    position: static;
    display: grid;
    gap: 10px;
  }

  .difficulty-bar,
  .difficulty-teacher-tick {
    position: static;
    display: grid;
    width: auto;
    min-width: 0;
    height: auto;
    grid-template-columns: minmax(90px, 0.9fr) minmax(90px, 1.1fr) 47px;
    gap: 10px;
    align-items: center;
    border: 0;
  }

  .difficulty-bar-name,
  .difficulty-teacher-name {
    display: block;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.25;
  }

  .difficulty-bar-track,
  .difficulty-teacher-track {
    position: relative;
    inset: auto;
    display: block;
    height: 7px;
    background: rgba(23, 23, 22, 0.06);
  }

  .difficulty-bar-fill {
    position: static;
    width: var(--value);
    height: 100%;
  }

  .difficulty-bar data,
  .difficulty-teacher-tick data {
    position: static;
    display: block;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 560;
    line-height: 1;
    text-align: right;
    transform: none;
    font-variant-numeric: tabular-nums;
  }

  .difficulty-teacher-tick {
    margin-top: 10px;
  }

  .difficulty-teacher-tick::after {
    display: none;
  }

  .difficulty-teacher-track span {
    display: block;
    width: var(--teacher);
    height: 1px;
    margin-top: 3px;
    border-top: 1px solid var(--ink);
  }

  .augmentation-ablation {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .augmentation-ablation > p {
    grid-column: 1;
    margin-top: -10px;
  }

  .bars {
    margin-top: 36px;
  }

  .bar-row,
  .bars-compact .bar-row {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: auto;
    padding: 20px 0;
  }

  .bar-row dd {
    grid-template-columns: minmax(0, 1fr) 54px;
    gap: 12px;
  }

  .evidence-pair {
    grid-template-columns: 1fr;
    gap: var(--space-block);
  }

  .motion-space-intro {
    grid-template-columns: 1fr;
    row-gap: 42px;
  }

  .motion-space-copy,
  .motion-space-note {
    grid-column: 1;
  }

  .motion-space-note {
    max-width: 460px;
  }

  .shape-series > div {
    grid-template-columns: 104px minmax(0, 1fr) 50px;
  }

  .result-pair {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  .result-pair > figure:first-child,
  .result-pair > figure:last-child {
    grid-column: 1;
  }

  .paper-section {
    row-gap: 62px;
    padding-top: 38px;
    padding-bottom: 92px;
  }
}

@media (max-width: 1040px) {
  .pipeline-stage {
    grid-template-columns: 1fr;
    row-gap: 29px;
  }

  .pipeline-stage-header,
  .pipeline-stage-main,
  .pipeline-stage-content,
  .pipeline-loop {
    grid-column: 1;
  }

  .pipeline-stage-header {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .pipeline-stage-header p {
    margin-top: 0;
  }

  .pipeline-stage-header h4 {
    max-width: 440px;
  }
}

@media (max-width: 820px) {
  .pipeline-map-header {
    grid-template-columns: 1fr;
    row-gap: 29px;
  }

  .pipeline-map-header > div,
  .pipeline-sequence {
    grid-column: 1;
  }

  .pipeline-sequence {
    max-width: 480px;
  }

  .pipeline-stage-main,
  .pipeline-transition-flow,
  .pipeline-deploy-rail,
  .pipeline-training-rail {
    grid-template-columns: 1fr;
  }

  .pipeline-stage-main,
  .pipeline-transition-flow,
  .pipeline-deploy-rail {
    gap: 0;
  }

  .pipeline-node-stack {
    gap: 8px;
  }

  .pipeline-arrow {
    width: 1px;
    min-width: 1px;
    height: 25px;
    justify-self: center;
  }

  .pipeline-arrow::before {
    background: linear-gradient(
        180deg,
        transparent,
        var(--flow-hot) 48%,
        transparent
      )
      no-repeat 50% -24px / 3px 20px;
  }

  .pipeline-map.is-flowing .pipeline-arrow::before {
    animation-name: pipeline-flow-y;
  }

  .pipeline-arrow::after {
    top: auto;
    right: -3px;
    bottom: 0;
    transform: rotate(135deg);
  }

  .pipeline-arrow small {
    right: auto;
    bottom: 8px;
    left: 9px;
  }

  .pipeline-experts {
    position: relative;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-right: 28px;
  }

  .pipeline-experts::before,
  .pipeline-experts::after {
    position: absolute;
    top: 21px;
    right: 3px;
    bottom: -24px;
    width: 6px;
    content: "";
  }

  .pipeline-experts::after {
    background: var(--flow-base);
    clip-path: polygon(42% 0, 58% 0, 58% 94%, 100% 94%, 50% 100%, 0 94%, 42% 94%);
  }

  .pipeline-experts::before {
    z-index: 1;
    background: linear-gradient(180deg, transparent, var(--flow-hot), transparent)
      no-repeat 50% -24px / 3px 20px;
    opacity: 0;
  }

  .pipeline-map.is-flowing .pipeline-experts::before {
    animation: pipeline-flow-y 8.6s linear 0.72s infinite;
  }

  .pipeline-experts > span::after {
    top: calc(50% - 3px);
    left: 100%;
    width: 22px;
    height: 6px;
    background: var(--flow-base);
    clip-path: polygon(0 42%, 76% 42%, 76% 14%, 100% 50%, 76% 86%, 76% 58%, 0 58%);
  }

  .pipeline-experts > span::before {
    top: calc(50% - 1px);
    left: 100%;
    width: 22px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--flow-hot), transparent)
      no-repeat -18px 50% / 16px 3px;
  }

  .pipeline-map.is-flowing .pipeline-experts > span::before {
    animation-name: pipeline-flow-x;
  }

  .pipeline-distill-bridge {
    margin-top: 24px;
  }

  .pipeline-transition-flow {
    margin-top: 31px;
  }

  .pipeline-transition-track {
    grid-template-columns: 1fr;
  }

  .pipeline-transition-track li {
    min-height: 67px;
  }

  .pipeline-transition-track li + li::before {
    top: -8px;
    left: calc(50% - 3px);
    width: 6px;
    height: 8px;
    clip-path: polygon(42% 0, 58% 0, 58% 62%, 88% 62%, 50% 100%, 12% 62%, 42% 62%);
  }

  .pipeline-transition-track li + li::after {
    top: -8px;
    left: calc(50% - 3px);
    width: 6px;
    height: 8px;
    clip-path: polygon(42% 0, 58% 0, 58% 62%, 88% 62%, 50% 100%, 12% 62%, 42% 62%);
  }

  .pipeline-map.is-flowing .pipeline-transition-track li + li::after {
    animation-name: pipeline-transition-packet-y;
  }

  .pipeline-deploy-rail {
    padding-top: 29px;
  }

  .pipeline-loop {
    margin-top: 26px;
    padding-top: 0;
  }

  .pipeline-loop-path {
    display: none;
  }

  .pipeline-loop-path > i:nth-child(1),
  .pipeline-loop-path > i:nth-child(3) {
    display: none;
  }

  .pipeline-loop-path > i:nth-child(2) {
    top: 0;
  }

  .pipeline-loop-path > i:nth-child(2)::after {
    position: absolute;
    top: -3px;
    left: 0;
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--signal);
    border-right: 1px solid var(--signal);
    content: "";
    opacity: 0.68;
    transform: rotate(-135deg);
  }

  .pipeline-map.is-flowing .pipeline-loop-path > i:nth-child(2)::after {
    animation: pipeline-arrow-arrival var(--flow-cycle) ease-in-out 2.86s infinite;
  }

  .pipeline-training-rail {
    gap: 10px;
  }

  .pipeline-training-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }
}

@media (max-width: 520px) {
  .pipeline-node-with-glyph > .pipeline-node-kicker {
    max-width: calc(100% - 52px);
  }

  .pipeline-glyph,
  .pipeline-glyph-physics {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .pipeline-glyph svg,
  .pipeline-glyph img {
    width: 20px;
    height: 20px;
  }

  .difficulty-groups {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .difficulty-bar,
  .difficulty-teacher-tick {
    grid-template-columns: minmax(104px, 0.9fr) minmax(82px, 1.1fr) 45px;
    gap: 8px;
  }

  .augmentation-outcomes {
    border-left: 0;
  }

  .augmentation-outcomes > span:first-child {
    border-left: 1px solid var(--line);
  }

  .hero-tree-field {
    inset: 0;
    height: 100%;
    opacity: 0.46;
    transform: translateX(8%);
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      transparent 56%,
      rgb(0 0 0 / 22%) 76%,
      #000 96%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      transparent 56%,
      rgb(0 0 0 / 22%) 76%,
      #000 96%
    );
  }

  .pipeline-map-header {
    padding: 24px 0 31px;
  }

  .pipeline-map-header h3 {
    font-size: 27px;
  }

  .pipeline-stage {
    padding: 32px 0 36px;
  }

  .pipeline-stage-header {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .pipeline-node,
  .pipeline-transition-group {
    padding: 14px;
  }

  .figure-caption {
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 14px;
  }

  .article-actions {
    gap: 20px;
  }

  .fact-row > div {
    min-height: 106px;
  }

  .range-readout {
    grid-template-columns: 1fr;
  }

  .range-readout div + div {
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .runtime-facts {
    grid-template-columns: 1fr;
  }

  .runtime-facts li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 13px 0;
  }

  .runtime-facts li + li {
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .shape-series > div {
    grid-template-columns: 1fr 48px;
    row-gap: 7px;
  }

  .shape-series > div > span:first-child {
    grid-column: 1 / -1;
  }

  .citation pre {
    padding: 18px;
  }

  footer {
    align-items: start;
  }
}

/* LightParkour system plate — one dominant path, two core modules. */
.pipeline-map-v2 {
  --system-field: #e4e9e5;
  --system-shell: #cfd9d3;
  --system-card: #ffffff;
  --system-ink: #121815;
  --system-green: #315e51;
  --system-green-deep: #25493f;
  --system-mint: #bdd5c9;
  --system-rule: rgba(37, 73, 63, 0.3);
  --system-cycle: 12s;
  border-color: var(--line-strong);
}

.system-map-header-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  padding: 28px 0 32px;
}

.system-map-header-v2 h3 {
  max-width: 1080px;
  margin: 14px 0 0;
  color: var(--system-ink);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
}

.system-label-v2,
.system-core-v2 > header,
.system-training-note-v2 > span {
  font-family: var(--mono);
  font-size: var(--text-aux);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.system-plate-v2 {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(132px, 0.58fr) 40px minmax(500px, 2.45fr) 40px
    minmax(210px, 1.05fr);
  gap: 12px;
  align-items: stretch;
  padding: 24px;
  border: 1px solid rgba(37, 73, 63, 0.2);
  border-radius: 22px;
  overflow: hidden;
  background-color: var(--system-field);
  background-image: radial-gradient(
    circle,
    rgba(37, 73, 63, 0.1) 0.7px,
    transparent 0.8px
  );
  background-size: 18px 18px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.64);
}

.system-seed-v2,
.system-output-v2,
.system-module-v2 {
  position: relative;
  min-width: 0;
  min-height: 310px;
  border-radius: 14px;
  overflow: hidden;
}

.system-seed-v2 {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid rgba(37, 73, 63, 0.22);
  background: var(--system-card);
  box-shadow: 0 12px 30px rgba(28, 45, 38, 0.06);
}

.system-seed-v2 .system-label-v2 {
  color: var(--system-green-deep);
}

.system-seed-v2 > strong {
  margin-top: auto;
  color: var(--system-ink);
  font-size: clamp(58px, 5.6vw, 78px);
  font-weight: var(--weight-medium);
  line-height: 0.82;
  letter-spacing: -0.065em;
}

.system-seed-v2 > p {
  margin: 13px 0 0;
  color: #46514c;
  font-size: var(--text-aux);
  line-height: 1.35;
}

.system-seed-trace-v2 {
  position: relative;
  display: block;
  width: 100%;
  height: 32px;
  margin-top: 22px;
}

.system-seed-trace-v2::before {
  position: absolute;
  top: 15px;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--system-green-deep), var(--system-mint));
  content: "";
  transform: rotate(-5deg);
  transform-origin: center;
}

.system-seed-trace-v2 i {
  position: absolute;
  top: 11px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--system-card);
  border-radius: 50%;
  background: var(--system-green);
  box-shadow: 0 0 0 1px var(--system-green);
}

.system-seed-trace-v2 i:nth-child(1) { left: 0; top: 15px; }
.system-seed-trace-v2 i:nth-child(2) { left: 24%; top: 13px; }
.system-seed-trace-v2 i:nth-child(3) { left: 49%; top: 11px; }
.system-seed-trace-v2 i:nth-child(4) { left: 73%; top: 9px; }
.system-seed-trace-v2 i:nth-child(5) { right: 0; top: 7px; }

.system-core-v2 {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(37, 73, 63, 0.34);
  border-radius: 18px;
  background: var(--system-shell);
  box-shadow: 0 14px 32px rgba(28, 45, 38, 0.08);
}

.system-core-v2 > header {
  display: flex;
  justify-content: space-between;
  padding: 1px 4px 11px;
  color: var(--system-green-deep);
}

.system-core-v2 > header small {
  color: rgba(37, 73, 63, 0.68);
  font: inherit;
}

.system-modules-v2 {
  display: grid;
  grid-template-columns: minmax(235px, 1.24fr) 36px minmax(205px, 1fr);
  gap: 10px;
  min-width: 0;
}

.system-module-v2 {
  min-height: 270px;
  border: 1px solid rgba(255, 255, 255, 0.34);
}

.system-generator-v2 video,
.system-output-v2 video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.system-generator-v2 video {
  position: relative;
  inset: auto;
  display: block;
  min-height: 0;
  background: #101412;
  object-fit: contain;
  object-position: 50% 50%;
}

.system-generator-v2 {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--system-card);
}

.system-generator-v2 .system-video-shade-v2 {
  display: none;
}

.system-video-shade-v2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 17, 15, 0.04) 22%,
    rgba(12, 17, 15, 0.26) 57%,
    rgba(12, 17, 15, 0.9) 100%
  );
  pointer-events: none;
}

.system-module-copy-v2,
.system-output-v2 > div {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 19px 20px 20px;
  color: #fff;
}

.system-generator-v2 .system-module-copy-v2 {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  padding: 14px 16px 15px;
  background: var(--system-card);
  color: var(--system-ink);
}

.system-generator-v2 .system-label-v2 {
  color: var(--system-green-deep);
}

.system-module-copy-v2 h4,
.system-distiller-v2 h4 {
  margin: 8px 0 0;
  font-size: clamp(20px, 2vw, 25px);
  font-weight: var(--weight-medium);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.system-module-copy-v2 data {
  display: inline-block;
  margin-top: 15px;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--system-field);
  color: var(--system-green-deep);
  font-family: var(--mono);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.system-distiller-v2 {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-color: rgba(20, 43, 36, 0.34);
  background: var(--system-green-deep);
  color: #f7faf8;
}

.system-distiller-v2 .system-label-v2 {
  color: var(--system-mint);
}

.system-merge-v2 {
  width: 100%;
  height: auto;
  margin: auto 0;
  overflow: visible;
}

.system-merge-v2 path {
  fill: none;
  stroke: rgba(189, 213, 201, 0.72);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.system-merge-v2 circle {
  fill: var(--system-mint);
}

.system-merge-v2 .system-merge-target-v2 {
  fill: #f7faf8;
  stroke: rgba(189, 213, 201, 0.56);
  stroke-width: 5;
}

.system-distiller-v2 > p {
  margin: 0;
  color: rgba(247, 250, 248, 0.76);
  font-family: var(--mono);
  font-size: var(--text-aux);
  line-height: 1.4;
}

.system-output-v2 {
  border: 1px solid rgba(37, 73, 63, 0.25);
  background: #cad2cd;
  box-shadow: 0 12px 30px rgba(28, 45, 38, 0.1);
}

.system-output-v2 video {
  object-position: 50% 50%;
}

.system-output-v2 > div strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(20px, 2vw, 25px);
  font-weight: var(--weight-medium);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.system-output-v2 > div p {
  margin: 11px 0 0;
  font-family: var(--mono);
  font-size: var(--text-aux);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.system-connector-v2 {
  position: relative;
  align-self: center;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--system-green);
  box-shadow: 0 0 0 1px rgba(37, 73, 63, 0.08);
}

.system-connector-v2::before {
  position: absolute;
  top: -5px;
  right: -1px;
  width: 12px;
  height: 18px;
  background: var(--system-green);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
}

.system-connector-v2::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
      90deg,
      transparent,
      rgba(244, 250, 247, 0.96),
      transparent
    )
    no-repeat -46px 50% / 46px 100%;
  content: "";
  opacity: 0;
}

.pipeline-map-v2.is-flowing .system-connector-v2::after {
  animation: system-signal-v2 var(--system-cycle) linear infinite;
}

.pipeline-map-v2.is-flowing .system-connector-core-v2::after {
  animation-delay: 2.7s;
}

.pipeline-map-v2.is-flowing .system-connector-output-v2::after {
  animation-delay: 5.4s;
}

.pipeline-map-v2.is-flowing .system-merge-v2 path {
  animation: system-merge-v2 var(--system-cycle) linear 3.8s infinite;
  stroke-dasharray: 7 7;
}

.pipeline-map-v2.is-flowing .system-generator-v2,
.pipeline-map-v2.is-flowing .system-distiller-v2,
.pipeline-map-v2.is-flowing .system-output-v2 {
  animation: system-module-arrival-v2 var(--system-cycle) ease-in-out infinite;
}

.pipeline-map-v2.is-flowing .system-distiller-v2 {
  animation-delay: 3.8s;
}

.pipeline-map-v2.is-flowing .system-output-v2 {
  animation-delay: 6.5s;
}

.system-training-note-v2 {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 12px 15px;
  border: 1px solid rgba(37, 73, 63, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: #46514c;
  font-size: var(--text-aux);
  line-height: 1.4;
}

.system-training-note-v2 > span {
  color: var(--system-green-deep);
}

.system-training-note-v2 > strong {
  color: var(--system-green-deep);
  font-weight: var(--weight-semibold);
}

@keyframes system-signal-v2 {
  0%, 8% {
    background-position: -46px 50%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  22% {
    background-position: calc(100% + 46px) 50%;
    opacity: 1;
  }
  24%, 100% {
    background-position: calc(100% + 46px) 50%;
    opacity: 0;
  }
}

@keyframes system-merge-v2 {
  0%, 24% {
    stroke-dashoffset: 28;
    opacity: 0.58;
  }
  40%, 56% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  72%, 100% {
    stroke-dashoffset: -28;
    opacity: 0.58;
  }
}

@keyframes system-module-arrival-v2 {
  0%, 12%, 28%, 100% {
    box-shadow: none;
  }
  18% {
    box-shadow: 0 0 0 3px rgba(189, 213, 201, 0.62), 0 16px 34px rgba(28, 45, 38, 0.14);
  }
}

@media (max-width: 1040px) {
  .system-plate-v2 {
    grid-template-columns:
      minmax(110px, 0.5fr) 30px minmax(430px, 2.25fr) 30px
      minmax(180px, 0.95fr);
    gap: 8px;
    padding: 18px;
  }

  .system-modules-v2 {
    grid-template-columns: minmax(205px, 1.16fr) 28px minmax(175px, 1fr);
    gap: 8px;
  }

  .system-seed-v2,
  .system-distiller-v2,
  .system-module-copy-v2,
  .system-output-v2 > div {
    padding: 17px;
  }
}

@media (max-width: 820px) {
  .system-map-header-v2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .system-plate-v2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .system-seed-v2 {
    min-height: 180px;
  }

  .system-seed-v2 > strong {
    font-size: 60px;
  }

  .system-core-v2 {
    min-height: 0;
  }

  .system-modules-v2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .system-module-v2,
  .system-output-v2 {
    min-height: 280px;
  }

  .system-connector-v2 {
    justify-self: center;
    width: 8px;
    height: 34px;
  }

  .system-connector-v2::before {
    top: auto;
    right: -5px;
    bottom: -1px;
    width: 18px;
    height: 12px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  .system-connector-v2::after {
    background: linear-gradient(
        180deg,
        transparent,
        rgba(244, 250, 247, 0.96),
        transparent
      )
      no-repeat 50% -46px / 100% 46px;
  }

  .pipeline-map-v2.is-flowing .system-connector-v2::after {
    animation-name: system-signal-y-v2;
  }

  .system-training-note-v2 {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

@keyframes system-signal-y-v2 {
  0%, 8% {
    background-position: 50% -46px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  22% {
    background-position: 50% calc(100% + 46px);
    opacity: 1;
  }
  24%, 100% {
    background-position: 50% calc(100% + 46px);
    opacity: 0;
  }
}

@media (max-width: 520px) {
  .system-plate-v2 {
    padding: 12px;
    border-radius: 16px;
  }

  .system-core-v2 {
    padding: 9px;
    border-radius: 14px;
  }

  .system-core-v2 > header {
    padding-bottom: 9px;
  }
}

/* System plate v3: four equal media tiles and square-tailed flow arrows. */
.system-plate-v3 {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) 34px minmax(0, 1fr) 34px
    minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 24px;
  border: 1px solid rgba(37, 73, 63, 0.2);
  border-radius: 22px;
  overflow: hidden;
  background-color: var(--system-field);
  background-image: radial-gradient(
    circle,
    rgba(37, 73, 63, 0.1) 0.7px,
    transparent 0.8px
  );
  background-size: 18px 18px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.64);
}

.system-tile-v3 {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 282px;
  border: 1px solid rgba(37, 73, 63, 0.22);
  border-radius: 14px;
  overflow: hidden;
  background: var(--system-card);
  box-shadow: 0 12px 30px rgba(28, 45, 38, 0.07);
}

.system-media-v3 {
  position: relative;
  min-height: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #151a18;
}

.system-media-v3::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(49, 94, 81, 0.03),
    rgba(20, 38, 32, 0.13)
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  content: "";
  pointer-events: none;
}

.system-media-v3 img,
.system-media-v3 video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.68) contrast(1.06) brightness(0.97);
}

.system-seed-v3 .system-media-v3 img {
  position: absolute;
  top: 0;
  left: -3.5%;
  width: 107%;
  height: 107%;
  max-width: none;
  transform: translateY(-5.9%);
}

.system-growth-v3 .system-media-v3 video {
  object-fit: cover;
}

.system-compare-overlay-v3 {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  grid-template-rows: 20.2% 1fr 20.2%;
  pointer-events: none;
}

.system-compare-legend-v3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  color: var(--system-green-deep);
  background: rgba(237, 241, 238, 0.97);
  font-family: var(--mono);
  font-size: clamp(7px, 0.62vw, 9px);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  backdrop-filter: blur(5px);
}

.system-compare-legend-v3 span {
  position: relative;
  padding-inline: 13px;
  white-space: nowrap;
}

.system-compare-legend-v3 span + span {
  border-left: 1px solid rgba(37, 73, 63, 0.13);
}

.system-compare-legend-top-v3 {
  grid-row: 1;
  border-bottom: 1px solid rgba(37, 73, 63, 0.16);
}

.system-compare-legend-bottom-v3 {
  grid-row: 3;
  border-top: 1px solid rgba(37, 73, 63, 0.16);
}

.system-compare-legend-bottom-v3 span {
  padding-left: 25px;
}

.system-compare-legend-bottom-v3 span::before {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  transform: translateY(-50%);
}

.system-compare-legend-bottom-v3 span[data-state="miss"] {
  color: #8c5f56;
}

.system-compare-legend-bottom-v3 span[data-state="grounded"] {
  color: #3f6b5d;
}

.system-output-v3 .system-media-v3 video {
  object-position: 50% 48%;
}

.system-tile-copy-v3 {
  display: grid;
  gap: 7px;
  align-content: start;
  min-height: 86px;
  padding: 15px 17px 17px;
  background: rgba(255, 255, 255, 0.97);
}

.system-tile-copy-v3 > span,
.system-training-note-v3 > span {
  color: var(--system-green-deep);
  font-family: var(--mono);
  font-size: var(--text-aux);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.system-tile-copy-v3 > strong {
  color: var(--system-ink);
  font-size: clamp(17px, 1.65vw, 21px);
  font-weight: var(--weight-medium);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.system-merge-stage-v3 {
  display: grid;
  place-items: center;
  background-color: var(--system-green-deep);
  background-image:
    linear-gradient(rgba(189, 213, 201, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(189, 213, 201, 0.045) 1px, transparent 1px);
  background-size: 18px 18px;
}

.system-merge-v3 {
  position: relative;
  z-index: 1;
  width: 82%;
  height: auto;
  overflow: visible;
}

.system-merge-v3 path {
  fill: none;
  stroke: rgba(189, 213, 201, 0.82);
  stroke-width: 2;
  stroke-dasharray: 7 7;
  vector-effect: non-scaling-stroke;
}

.system-merge-v3 circle {
  fill: var(--system-mint);
}

.system-merge-v3 .system-merge-target-v3 {
  fill: #f7faf8;
  stroke: rgba(189, 213, 201, 0.55);
  stroke-width: 5;
}

.pipeline-map-v2.is-flowing .system-merge-v3 path {
  animation: system-merge-flow-v3 var(--system-cycle) linear infinite;
}

.system-arrow-v3 {
  position: relative;
  align-self: center;
  width: 100%;
  height: 14px;
  overflow: hidden;
  background: var(--system-green);
  clip-path: polygon(
    0 5px,
    calc(100% - 10px) 5px,
    calc(100% - 10px) 0,
    100% 7px,
    calc(100% - 10px) 14px,
    calc(100% - 10px) 9px,
    0 9px
  );
}

.system-arrow-v3::after {
  position: absolute;
  top: 5px;
  left: -18px;
  width: 18px;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(244, 250, 247, 0.98),
    transparent
  );
  content: "";
  opacity: 0;
}

.pipeline-map-v2.is-flowing .system-arrow-v3::after {
  animation: system-arrow-signal-v3 var(--system-cycle) linear infinite;
}

.pipeline-map-v2.is-flowing .system-arrow-distill-v3::after {
  animation-delay: 2.65s;
}

.pipeline-map-v2.is-flowing .system-arrow-output-v3::after {
  animation-delay: 5.3s;
}

.system-training-note-v3 {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 12px 15px;
  border: 1px solid rgba(37, 73, 63, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
  color: #46514c;
  font-size: var(--text-aux);
  line-height: 1.4;
}

.system-training-note-v3 > strong {
  color: var(--system-green-deep);
  font-weight: var(--weight-semibold);
}

@keyframes system-arrow-signal-v3 {
  0%, 8% {
    left: -18px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  22% {
    left: calc(100% + 18px);
    opacity: 1;
  }
  24%, 100% {
    left: calc(100% + 18px);
    opacity: 0;
  }
}

@keyframes system-merge-flow-v3 {
  0%, 22% {
    stroke-dashoffset: 28;
    opacity: 0.62;
  }
  42%, 58% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  78%, 100% {
    stroke-dashoffset: -28;
    opacity: 0.62;
  }
}

@media (max-width: 1040px) {
  .system-plate-v3 {
    grid-template-columns:
      minmax(0, 1fr) 28px minmax(0, 1fr) 28px
      minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 8px;
    padding: 18px;
  }

  .system-tile-v3 {
    min-height: 252px;
  }

  .system-tile-copy-v3 {
    min-height: 82px;
    padding: 13px 14px 15px;
  }
}

@media (max-width: 820px) {
  .system-plate-v3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .system-tile-v3 {
    width: min(100%, 560px);
    min-height: 0;
    justify-self: center;
  }

  .system-media-v3 {
    aspect-ratio: 16 / 10;
  }

  .system-arrow-v3 {
    justify-self: center;
    width: 14px;
    height: 34px;
    clip-path: polygon(
      5px 0,
      9px 0,
      9px calc(100% - 10px),
      14px calc(100% - 10px),
      7px 100%,
      0 calc(100% - 10px),
      5px calc(100% - 10px)
    );
  }

  .system-arrow-v3::after {
    top: -18px;
    left: 5px;
    width: 4px;
    height: 18px;
    background: linear-gradient(
      180deg,
      transparent,
      rgba(244, 250, 247, 0.98),
      transparent
    );
  }

  .pipeline-map-v2.is-flowing .system-arrow-v3::after {
    animation-name: system-arrow-signal-y-v3;
  }

  .system-training-note-v3 {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

@keyframes system-arrow-signal-y-v3 {
  0%, 8% {
    top: -18px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  22% {
    top: calc(100% + 18px);
    opacity: 1;
  }
  24%, 100% {
    top: calc(100% + 18px);
    opacity: 0;
  }
}

@media (max-width: 520px) {
  .system-plate-v3 {
    padding: 12px;
    border-radius: 16px;
  }
}

/* System atlas v4 — paper-faithful training logic, edited for the web. */
.system-atlas-v4 {
  overflow: hidden;
  border: 1px solid rgba(37, 73, 63, 0.22);
  border-radius: 22px;
  background-color: #e8ece9;
  background-image: radial-gradient(circle, rgba(37, 73, 63, 0.085) 0.7px, transparent 0.8px);
  background-size: 18px 18px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.78);
}

.system-stage-v4 {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  gap: 28px;
  padding: 28px;
  scroll-margin-top: 76px;
}

.system-stage-v4 + .system-stage-v4 {
  border-top: 1px solid rgba(37, 73, 63, 0.2);
}

.system-stage-header-v4 {
  align-self: start;
  padding-top: 2px;
}

.system-stage-header-v4 > span,
.system-stage-header-v4 > small,
.system-node-title-v4,
.system-curriculum-loop-v4 > span,
.system-expert-rack-v4 > p,
.system-transition-node-v4 > header,
.system-training-rail-v4 > span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.system-stage-header-v4 > span {
  display: block;
  color: var(--system-green);
  font-size: 12px;
}

.system-stage-header-v4 > small {
  display: block;
  margin-top: 23px;
  color: rgba(37, 73, 63, 0.7);
}

.system-stage-header-v4 h4 {
  max-width: 170px;
  margin: 12px 0 0;
  color: var(--system-ink);
  font-size: 22px;
  font-weight: var(--weight-medium);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.system-stage-board-v4 {
  min-width: 0;
}

.system-reference-board-v4 {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) 34px minmax(180px, 1.15fr) 34px minmax(124px, 0.7fr) 34px minmax(184px, 1.05fr);
  grid-template-rows: minmax(0, auto) 42px;
  gap: 11px 10px;
  align-items: stretch;
}

.system-node-v4,
.system-transition-node-v4,
.system-expert-rack-v4 article,
.system-training-rail-v4 article {
  border: 1px solid rgba(37, 73, 63, 0.2);
  background: rgba(249, 250, 248, 0.82);
  box-shadow: 0 10px 24px rgba(29, 45, 39, 0.035);
}

.system-node-v4 {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-start;
  padding: 15px;
  border-radius: 10px;
}

.system-node-title-v4 {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 9px;
  color: rgba(37, 73, 63, 0.72);
}

.system-node-v4 > strong,
.system-transition-node-v4 strong {
  color: var(--system-ink);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1.22;
  letter-spacing: -0.025em;
}

.system-node-v4 > strong {
  margin-top: 13px;
}

.system-node-v4 > p,
.system-transition-node-v4 > p {
  margin: 10px 0 0;
  color: #64706a;
  font-size: 10.5px;
  line-height: 1.45;
}

.system-input-stack-v4 {
  display: grid;
  gap: 10px;
}

.system-input-node-v4 {
  min-height: 108px;
}

.system-policy-bank-v4,
.system-sim-node-v4,
.system-asset-node-v4 {
  min-height: 226px;
}

.system-policy-bank-v4 {
  background: rgba(239, 243, 240, 0.94);
}

.system-policy-pills-v4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 18px;
}

.system-policy-pills-v4 i {
  display: grid;
  min-height: 32px;
  place-items: center;
  border: 1px solid rgba(37, 73, 63, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--system-green-deep);
  font-family: var(--sans);
  font-size: 14px;
  font-style: italic;
}

.system-sim-node-v4 {
  background: rgba(245, 247, 245, 0.78);
}

.system-asset-node-v4 {
  border-color: rgba(37, 73, 63, 0.32);
  background: rgba(216, 224, 219, 0.92);
}

.system-asset-node-v4 data,
.system-onboard-node-v4 data {
  display: block;
  margin-top: 15px;
  color: var(--system-green-deep);
  font-size: 24px;
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.system-flow-v4 {
  position: relative;
  align-self: center;
  display: block;
  width: 100%;
  height: 14px;
  background:
    radial-gradient(circle, rgba(247, 250, 248, 0.98) 0 2px, transparent 2.5px) no-repeat -12px 50% / 12px 12px,
    linear-gradient(90deg, rgba(37, 73, 63, 0.23), rgba(37, 73, 63, 0.63)) no-repeat 0 50% / calc(100% - 5px) 1px;
}

.system-flow-v4::before {
  position: absolute;
  top: 4px;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid rgba(37, 73, 63, 0.72);
  border-right: 1px solid rgba(37, 73, 63, 0.72);
  content: "";
  transform: rotate(45deg);
}

.system-flow-v4::after {
  position: absolute;
  right: 0;
  bottom: 16px;
  left: 0;
  color: rgba(37, 73, 63, 0.62);
  content: attr(data-label);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
}

.pipeline-map-v2.is-flowing .system-flow-v4 {
  animation: system-flow-line-v4 6.8s linear infinite;
}

.system-reference-board-v4 > .system-flow-v4:nth-of-type(2) { animation-delay: 1.35s; }
.system-reference-board-v4 > .system-flow-v4:nth-of-type(3) { animation-delay: 2.7s; }

.system-curriculum-loop-v4 {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 17px;
  align-items: center;
  padding: 12px 14px 0;
  border-top: 1px dashed rgba(37, 73, 63, 0.25);
  overflow: hidden;
}

.system-curriculum-loop-v4::after {
  position: absolute;
  top: -1px;
  right: -60px;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--system-green), transparent);
  content: "";
}

.pipeline-map-v2.is-flowing .system-curriculum-loop-v4::after {
  animation: system-loop-v4 7.4s linear 2s infinite;
}

.system-curriculum-loop-v4 > span { color: var(--system-green); }
.system-curriculum-loop-v4 > p { margin: 0; color: #69736e; font-size: 10.5px; }

.system-glyph-v4 {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid rgba(37, 73, 63, 0.2);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.66);
}

.system-glyph-v4 b { position: absolute; display: block; background: var(--system-green); }
.system-glyph-scan-v4 b { bottom: 7px; width: 3px; border-radius: 2px 2px 0 0; }
.system-glyph-scan-v4 b:nth-child(1) { left: 7px; height: 7px; opacity: .45; }
.system-glyph-scan-v4 b:nth-child(2) { left: 13px; height: 12px; opacity: .7; }
.system-glyph-scan-v4 b:nth-child(3) { left: 19px; height: 17px; }
.system-glyph-motion-v4 b { width: 5px; height: 5px; border-radius: 50%; }
.system-glyph-motion-v4 b:nth-child(1) { top: 7px; left: 7px; }
.system-glyph-motion-v4 b:nth-child(2) { top: 13px; left: 13px; }
.system-glyph-motion-v4 b:nth-child(3) { right: 7px; bottom: 7px; }
.system-glyph-motion-v4::after { position:absolute; top:9px; left:9px; width:14px; height:11px; border-right:1px solid var(--system-green); border-bottom:1px solid var(--system-green); content:""; transform:rotate(34deg); transform-origin:left bottom; opacity:.55; }
.system-glyph-network-v4 b { top: 7px; bottom: 7px; width: 3px; border-radius: 99px; }
.system-glyph-network-v4 b:nth-child(1) { left: 7px; opacity: .45; }
.system-glyph-network-v4 b:nth-child(2) { left: 13px; opacity: .7; }
.system-glyph-network-v4 b:nth-child(3) { left: 20px; }
.system-glyph-sim-v4 b:nth-child(1) { inset: 7px; border: 1px solid var(--system-green); background: transparent; }
.system-glyph-sim-v4 b:nth-child(2) { top: 4px; right: 4px; width: 7px; height: 1px; transform: rotate(45deg); }
.system-glyph-sim-v4 b:nth-child(3) { right: 6px; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; }
.system-glyph-dataset-v4 b { right: 7px; left: 7px; height: 5px; border: 1px solid var(--system-green); border-radius: 50%; background: rgba(189, 213, 201, .22); }
.system-glyph-dataset-v4 b:nth-child(1) { top: 6px; }
.system-glyph-dataset-v4 b:nth-child(2) { top: 12px; }
.system-glyph-dataset-v4 b:nth-child(3) { top: 18px; }
.system-glyph-depth-v4 b { left: 6px; height: 2px; border-radius: 2px; }
.system-glyph-depth-v4 b:nth-child(1) { top: 7px; width: 17px; opacity: .45; }
.system-glyph-depth-v4 b:nth-child(2) { top: 13px; width: 13px; opacity: .7; }
.system-glyph-depth-v4 b:nth-child(3) { top: 19px; width: 8px; }
.system-glyph-memory-v4 b:nth-child(1) { inset: 6px; border: 1px solid var(--system-green); border-radius: 50%; background: transparent; }
.system-glyph-memory-v4 b:nth-child(2) { top: 9px; left: 9px; width: 10px; height: 10px; border-radius: 50%; opacity: .45; }
.system-glyph-memory-v4 b:nth-child(3) { top: 4px; left: 14px; width: 1px; height: 6px; }
.system-glyph-camera-v4 b:nth-child(1) { top: 8px; left: 5px; width: 20px; height: 14px; border: 1px solid var(--system-green); border-radius: 3px; background: transparent; }
.system-glyph-camera-v4 b:nth-child(2) { top: 11px; left: 11px; width: 8px; height: 8px; border: 1px solid var(--system-green); border-radius: 50%; background: transparent; }
.system-glyph-camera-v4 b:nth-child(3) { top: 5px; left: 9px; width: 8px; height: 3px; border-radius: 2px 2px 0 0; }

.system-distill-board-v4 { display: grid; gap: 22px; }
.system-expert-rack-v4 { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-bottom: 28px; }
.system-expert-rack-v4 article { display:flex; justify-content:space-between; align-items:center; min-height:52px; padding: 0 13px; border-radius:8px; color:var(--system-ink); font-size:12px; font-weight:var(--weight-semibold); }
.system-expert-rack-v4 article i { color:rgba(37,73,63,.66); font-family:var(--sans); font-size:15px; font-style:italic; }
.system-expert-rack-v4::before { position:absolute; right:5%; bottom:15px; left:5%; height:1px; background:rgba(37,73,63,.25); content:""; }
.system-expert-rack-v4::after { position:absolute; bottom:9px; left:50%; width:1px; height:13px; background:rgba(37,73,63,.34); content:""; }
.system-expert-rack-v4 > p { position:absolute; bottom:0; left:50%; margin:0; padding:0 10px; background:#e8ece9; color:rgba(37,73,63,.62); transform:translateX(-50%); }

.system-distill-path-v4 { display:grid; grid-template-columns:minmax(190px,.82fr) 42px minmax(0,2.25fr); gap:12px; align-items:stretch; }
.system-unified-node-v4 { min-height:154px; background:rgba(235,240,236,.96); }
.system-transition-node-v4 { min-width:0; padding:15px 16px 14px; border-radius:10px; background:rgba(249,250,248,.86); }
.system-transition-node-v4 > header { display:flex; justify-content:space-between; gap:14px; color:rgba(37,73,63,.66); }
.system-transition-node-v4 > header strong { color:var(--system-green); font:inherit; }
.system-transition-track-v4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:13px 0 0; padding:0; list-style:none; }
.system-transition-track-v4 li { position:relative; display:grid; gap:4px; min-height:72px; padding:9px 10px; border:1px solid rgba(37,73,63,.16); border-radius:7px; background:rgba(255,255,255,.7); }
.system-transition-track-v4 li + li::before { position:absolute; top:50%; left:-8px; width:8px; height:1px; background:rgba(37,73,63,.34); content:""; }
.system-transition-track-v4 li + li::after { position:absolute; top:calc(50% - 2px); left:-8px; width:4px; height:4px; border-radius:50%; background:var(--system-green); content:""; opacity:0; }
.pipeline-map-v2.is-flowing .system-transition-track-v4 li + li::after { animation:system-track-pulse-v4 5.8s linear infinite; }
.pipeline-map-v2.is-flowing .system-transition-track-v4 li:nth-child(3)::after { animation-delay:1.1s; }
.pipeline-map-v2.is-flowing .system-transition-track-v4 li:nth-child(4)::after { animation-delay:2.2s; }
.system-transition-track-v4 small { color:rgba(37,73,63,.45); font-family:var(--mono); font-size:8px; }
.system-transition-track-v4 strong { align-self:end; font-size:12px; }
.system-transition-track-v4 span { color:#78817d; font-size:9px; }
.system-transition-track-v4 .is-active { border-color:rgba(37,73,63,.3); background:rgba(215,224,219,.86); }
.system-transition-node-v4 > p { font-family:var(--mono); font-size:9px; }
.system-transition-node-v4 > b { display:block; margin-top:7px; color:var(--system-ink); font-size:10.5px; font-weight:var(--weight-semibold); }

.system-depth-board-v4 { display:grid; gap:18px; }
.system-deploy-path-v4 { display:grid; grid-template-columns:minmax(170px,1fr) 36px minmax(215px,1.35fr) 36px minmax(155px,.85fr); gap:10px; align-items:stretch; }
.system-observation-node-v4,.system-recurrent-node-v4,.system-onboard-node-v4 { min-height:132px; }
.system-recurrent-node-v4 { border-color:rgba(37,73,63,.3); background:rgba(221,229,224,.92); }
.system-onboard-node-v4 { background:var(--system-green-deep); }
.system-onboard-node-v4 .system-node-title-v4,.system-onboard-node-v4 > p { color:rgba(239,246,242,.7); }
.system-onboard-node-v4 > strong,.system-onboard-node-v4 data { color:#f5f8f6; }
.system-onboard-node-v4 .system-glyph-v4 { border-color:rgba(239,246,242,.22); background:rgba(255,255,255,.06); }
.system-onboard-node-v4 .system-glyph-v4 b { border-color:var(--system-mint); background:var(--system-mint); }
.system-onboard-node-v4 .system-glyph-camera-v4 b:nth-child(1),.system-onboard-node-v4 .system-glyph-camera-v4 b:nth-child(2) { background:transparent; }
.system-onboard-node-v4 data { margin-top:10px; font-size:15px; letter-spacing:-.02em; }
.system-network-chain-v4 { display:flex; align-items:center; gap:8px; margin-top:15px; }
.system-network-chain-v4 span { padding:6px 9px; border:1px solid rgba(37,73,63,.18); border-radius:6px; background:rgba(255,255,255,.7); color:var(--system-ink); font-size:13px; font-weight:var(--weight-semibold); }
.system-network-chain-v4 i { color:var(--system-green); font-style:normal; }

.system-training-rail-v4 { position:relative; display:grid; grid-template-columns:auto minmax(145px,.85fr) minmax(145px,.85fr) minmax(220px,1.4fr); gap:10px; align-items:stretch; padding-top:17px; border-top:1px dashed rgba(37,73,63,.25); }
.system-training-rail-v4::after { position:absolute; top:-1px; left:14%; width:46px; height:1px; background:linear-gradient(90deg,transparent,var(--system-green),transparent); content:""; }
.pipeline-map-v2.is-flowing .system-training-rail-v4::after { animation:system-training-flow-v4 7.2s linear infinite; }
.system-training-rail-v4 > span { align-self:center; color:var(--system-green); white-space:nowrap; }
.system-training-rail-v4 article { display:grid; gap:5px; padding:10px 12px; border-style:dashed; border-radius:7px; }
.system-training-rail-v4 article small { color:rgba(37,73,63,.58); font-family:var(--mono); font-size:8px; text-transform:uppercase; }
.system-training-rail-v4 article strong { color:var(--system-ink); font-size:10.5px; }
.system-training-rail-v4 > p { align-self:center; margin:0; color:#6d7772; font-size:10px; line-height:1.4; }

/* System atlas v5 — a recovered motion seed replaces descriptive input cards. */
.system-reference-board-v4 {
  grid-template-columns: minmax(320px, 2.1fr) 28px minmax(150px, .95fr) 28px minmax(105px, .62fr) 28px minmax(160px, .92fr);
}

.system-motion-lab-v5 {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(37, 73, 63, .26);
  border-radius: 12px;
  background: rgba(244, 247, 245, .9);
  box-shadow: 0 12px 28px rgba(29, 45, 39, .045), inset 0 1px rgba(255, 255, 255, .8);
}

.system-motion-lab-v5 > header {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 13px;
}

.system-motion-lab-v5 > header .system-node-title-v4 {
  min-height: 30px;
}

.system-motion-lab-v5 > header > strong {
  max-width: 70px;
  color: var(--system-ink);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  line-height: 1.18;
  letter-spacing: .04em;
  text-align: right;
}

.system-motion-viewport-v5 {
  position: relative;
  height: 204px;
  overflow: hidden;
  border-block: 1px solid rgba(37, 73, 63, .16);
  background: #e5ebe7;
}

.system-motion-canvas-v5 {
  display: block;
  width: 100%;
  height: 100%;
}

.system-motion-phases-v5 {
  position: absolute;
  bottom: 9px;
  left: 11px;
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(37, 73, 63, .16);
  border-radius: 99px;
  background: rgba(247, 249, 247, .74);
  backdrop-filter: blur(8px);
  transition: opacity .3s ease;
}

.system-motion-phases-v5 span {
  min-width: 40px;
  padding: 4px 7px;
  border-radius: 99px;
  color: rgba(37, 73, 63, .5);
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: .055em;
  text-align: center;
  text-transform: uppercase;
  transition: color .35s ease, background-color .35s ease;
}

.system-motion-phases-v5 span.is-active {
  background: var(--system-green-deep);
  color: #f2f6f3;
}

.system-motion-lab-v5[data-motion-state="grow"] .system-motion-phases-v5 {
  opacity: 0;
}

.system-motion-lab-v5 > footer {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 13px;
  color: rgba(37, 73, 63, .62);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.2;
}

.system-motion-lab-v5 > footer b {
  flex: 0 0 auto;
  color: var(--system-green-deep);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: -.03em;
}

.system-motion-lab-v5.is-motion-unavailable .system-motion-viewport-v5::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #e5ebe7;
  color: rgba(37, 73, 63, .62);
  content: "Motion preview unavailable";
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
}

.system-policy-bank-v4,
.system-sim-node-v4,
.system-asset-node-v4 {
  min-height: 302px;
}

@media (max-width: 1080px) {
  .system-reference-board-v4 {
    grid-template-columns: minmax(260px, 1.7fr) 22px minmax(145px, .92fr) 22px minmax(104px, .62fr) 22px minmax(150px, .9fr);
  }
  .system-motion-viewport-v5 { height: 185px; }
  .system-policy-bank-v4,
  .system-sim-node-v4,
  .system-asset-node-v4 { min-height: 283px; }
  .system-motion-lab-v5 > header > strong { font-size: 8px; }
}

@media (max-width: 860px) {
  .system-motion-lab-v5 { grid-column: 1; grid-row: 1; }
  .system-motion-viewport-v5 { height: 224px; }
  .system-policy-bank-v4,
  .system-sim-node-v4,
  .system-asset-node-v4 { min-height: 0; }
}

@media (max-width: 620px) {
  .system-motion-lab-v5,
  .system-policy-bank-v4,
  .system-sim-node-v4,
  .system-asset-node-v4,
  .system-reference-board-v4 > .system-flow-v4:nth-of-type(n),
  .system-curriculum-loop-v4 { grid-column: 1; grid-row: auto; }
  .system-motion-viewport-v5 { height: 230px; }
  .system-motion-lab-v5 > header { align-items: flex-start; }
  .system-motion-lab-v5 > header > strong { max-width: 100px; }
}

@keyframes system-flow-line-v4 {
  0% { background-position:-12px 50%,0 50%; }
  58%,100% { background-position:calc(100% + 12px) 50%,0 50%; }
}
@keyframes system-loop-v4 { 0%{right:-60px} 100%{right:100%} }
@keyframes system-track-pulse-v4 { 0%,15%{left:-8px;opacity:0} 18%{opacity:1} 38%{left:calc(100% + 3px);opacity:1} 41%,100%{left:calc(100% + 3px);opacity:0} }
@keyframes system-training-flow-v4 { 0%{left:14%;opacity:0} 8%{opacity:1} 88%{opacity:1} 100%{left:94%;opacity:0} }

@media (max-width: 1080px) {
  .system-stage-v4 { grid-template-columns:155px minmax(0,1fr); gap:20px; padding:22px; }
  .system-reference-board-v4 { grid-template-columns:minmax(160px,1.15fr) 26px minmax(160px,1.1fr) 26px minmax(112px,.68fr) 26px minmax(165px,1fr); gap:9px 7px; }
  .system-stage-header-v4 h4 { font-size:var(--t-h4); }
  .system-node-v4 { padding:13px; }
  .system-node-v4 > strong { font-size:var(--t-sub); }
}

@media (max-width: 860px) {
  .system-stage-v4 { grid-template-columns:1fr; gap:18px; }
  .system-stage-header-v4 { display:grid; grid-template-columns:34px 1fr; gap:3px 12px; }
  .system-stage-header-v4 > span { grid-row:1 / span 2; }
  .system-stage-header-v4 > small { margin:0; }
  .system-stage-header-v4 h4 { max-width:none; margin:3px 0 0; }
  .system-reference-board-v4 { grid-template-columns:1fr 24px 1fr; grid-template-rows:auto 24px auto 42px; }
  .system-input-stack-v4 { grid-column:1; grid-row:1; }
  .system-reference-board-v4 > .system-flow-v4:nth-of-type(1) { grid-column:2; grid-row:1; }
  .system-policy-bank-v4 { grid-column:3; grid-row:1; }
  .system-reference-board-v4 > .system-flow-v4:nth-of-type(2) { grid-column:3; grid-row:2; justify-self:center; }
  .system-sim-node-v4 { grid-column:3; grid-row:3; }
  .system-reference-board-v4 > .system-flow-v4:nth-of-type(3) { grid-column:2; grid-row:3; transform:rotate(180deg); }
  .system-asset-node-v4 { grid-column:1; grid-row:3; }
  .system-curriculum-loop-v4 { grid-row:4; }
  .system-policy-bank-v4,.system-sim-node-v4,.system-asset-node-v4 { min-height:0; }
  .system-distill-path-v4 { grid-template-columns:1fr 30px 2fr; }
  .system-deploy-path-v4 { grid-template-columns:1fr 26px 1.3fr 26px .9fr; gap:7px; }
  .system-training-rail-v4 { grid-template-columns:auto 1fr 1fr; }
  .system-training-rail-v4 > p { grid-column:1/-1; }
}

@media (max-width: 620px) {
  .system-atlas-v4 { border-radius:16px; }
  .system-stage-v4 { padding:18px 14px; }
  .system-reference-board-v4,.system-distill-path-v4,.system-deploy-path-v4 { grid-template-columns:1fr; grid-template-rows:auto; }
  .system-input-stack-v4,.system-policy-bank-v4,.system-sim-node-v4,.system-asset-node-v4,.system-reference-board-v4 > .system-flow-v4:nth-of-type(n),.system-curriculum-loop-v4 { grid-column:1; grid-row:auto; }
  .system-flow-v4 { justify-self:center; width:14px; height:26px; background:linear-gradient(180deg,rgba(37,73,63,.23),rgba(37,73,63,.63)) no-repeat 50% 0 / 1px calc(100% - 5px); animation:none !important; }
  .system-flow-v4::before { top:auto; right:3px; bottom:0; transform:rotate(135deg); }
  .system-flow-v4::after { display:none; }
  .system-expert-rack-v4 { grid-template-columns:1fr 1fr; }
  .system-expert-rack-v4 > p { white-space:nowrap; }
  .system-transition-track-v4 { grid-template-columns:1fr 1fr; }
  .system-training-rail-v4 { grid-template-columns:1fr; }
  .system-curriculum-loop-v4 { grid-template-columns:1fr; gap:4px; }
}

/*
 * Unified typography
 * Two faces: Geist Sans for editorial reading, Geist Mono for machine state.
 * Two reading sizes: body and auxiliary. Display text uses one shared ladder.
 */
html {
  font-synthesis: none;
}

body {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1.65;
  letter-spacing: var(--tracking-body);
  font-optical-sizing: auto;
  font-kerning: normal;
}

strong,
b,
.article-meta strong,
.figure-caption strong,
footer strong {
  font-weight: var(--weight-semibold);
}

sup {
  font-family: var(--sans);
  font-size: var(--text-aux);
}

.article-header h1 {
  font-size: var(--text-display);
  font-weight: var(--weight-medium);
  line-height: 0.99;
  letter-spacing: var(--tracking-display);
}

.chapter h2,
.paper-details h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  line-height: 1.04;
  letter-spacing: var(--tracking-heading);
}

.growth-copy h3,
.deployment-copy h3,
.transition-copy h3,
.motion-space-copy h3,
.closing-statement,
.pipeline-map-header h3,
.chart-head h3,
.chart-head-compact h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
}

.pipeline-stage-header h4,
.story-map strong,
.shape-row h4,
.paper-name {
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.article-summary,
.runtime-line,
.chapter-lead,
.chapter-lead.compact,
.prose,
.chapter-note p,
.equation-stack li,
.equation-note .equation-shift,
.growth-copy > p:not(.section-label):not(.disclosure),
.deployment-copy > p:not(.section-label),
.transition-copy > p:not(.section-label),
.chart-deck,
.augmentation-ablation strong,
.bar-row dt strong,
.motion-space-copy > p:last-child,
.paper-abstract,
.limits p:last-child,
.pipeline-node strong {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1.65;
  letter-spacing: var(--tracking-body);
}

.pipeline-node strong,
.augmentation-ablation strong,
.bar-row dt strong {
  font-weight: var(--weight-medium);
  line-height: 1.3;
}

.fact-row strong,
.range-readout dd,
.equation-result strong,
.augmentation-outcomes data,
.augmentation-outcomes b,
.bar-row data,
.shape-series data,
.runtime-facts strong {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.chart-kpi,
.chart-delta {
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-heading);
}

.brand,
.brand-mark,
.topnav,
.article-label,
.section-label,
.article-meta,
.article-actions a,
.paper-links a,
.figure-caption,
.story-map > p,
.story-map span,
.chapter-note span,
.equation-result small,
.fact-row span,
.range-readout dt,
.disclosure,
.augmentation-ablation > p,
.bar-row dt span,
.data-figure figcaption,
.motion-space-note p:not(.section-label),
.shape-series > div > span:first-child,
.runtime-facts span,
.pipeline-node p,
.pipeline-loop,
.pipeline-experts > span,
.pipeline-transition-group > header strong,
.pipeline-transition-track strong,
.pipeline-transition-track small,
.pipeline-transition-group > .pipeline-runtime-proof,
.pipeline-training-rail > article strong,
.pipeline-training-rail > p,
.citation-head,
footer {
  font-family: var(--sans);
  font-size: var(--text-aux);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  letter-spacing: 0;
}

.article-label,
.section-label,
.story-map > p,
.story-map span,
.chapter-note span,
.fact-row span,
.range-readout dt,
.runtime-facts span {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
}

.media-hud,
.media-control span,
.figure-caption > span,
.pipeline-eyebrow,
.pipeline-stage-header p,
.pipeline-node-kicker,
.pipeline-rail-label,
.pipeline-sequence,
.pipeline-stage-number,
.pipeline-signals,
.pipeline-arrow small,
.pipeline-experts i,
.pipeline-distill-bridge,
.pipeline-transition-group > header span,
.pipeline-transition-track span,
.pipeline-transition-group > .pipeline-prior,
.pipeline-training-rail > article span,
.pipeline-loop-label,
.chart-kpi small,
.difficulty-legend li,
.difficulty-axis,
.difficulty-bar-name,
.difficulty-teacher-name,
.difficulty-group-head h4,
.difficulty-bar data,
.difficulty-teacher-tick data,
.difficulty-group-head p,
.augmentation-outcomes small,
.motion-space-frame::before,
.citation-head,
.citation pre {
  font-family: var(--mono);
  font-size: var(--text-aux);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.pipeline-eyebrow,
.pipeline-stage-header p,
.pipeline-node-kicker,
.pipeline-rail-label,
.pipeline-loop-label,
.difficulty-group-head h4 {
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
}

@media (forced-colors: active), (prefers-contrast: more), print {
  .hero-tree-field {
    display: none;
  }

  .pipeline-arrow::before,
  .pipeline-sequence i::before,
  .pipeline-loop-path > i::before,
  .pipeline-experts > span::before,
  .pipeline-distill-bridge::before,
  .pipeline-distill-bridge > i::before,
  .pipeline-transition-track li + li::after,
  .pipeline-training-rail::before,
  .pipeline-training-arrow::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .pipeline-map *,
  .pipeline-map *::before,
  .pipeline-map *::after {
    animation: none !important;
  }

  .system-flow.is-sequenced::after,
  .system-flow.is-sequenced li {
    animation: none !important;
  }

  .system-flow.is-sequenced::after {
    opacity: 0;
  }

  .video-shell video,
  .media-timeline output,
  .media-control,
  .data-figure *,
  .equation-note *,
  .range-readout *,
  .runtime-facts *,
  .motion-space-frame iframe {
    transition: none !important;
  }

  .media-scrubber::-webkit-slider-thumb {
    transition: none !important;
  }

  .media-scrubber::-moz-range-thumb {
    transition: none !important;
  }


  .topnav a,
  .article-actions a,
  .paper-links a,
  footer a {
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* Renovation pass: video chrome on demand, honest footage color,     */
/* reading measure, rhythm alignment, and small structural rebalances. */
/* ------------------------------------------------------------------ */

/* Videos: controls and the dark protection gradient appear only when
   needed (hover, paused, or keyboard focus), so burned-in lower-thirds
   in the footage never fight the site's own scrubber. */

.media-timeline {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.video-shell:hover .media-timeline,
.video-shell.is-paused .media-timeline,
.media-timeline:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.media-surface {
  background:
    linear-gradient(180deg, rgba(10, 12, 11, 0.3), transparent 15%),
    linear-gradient(0deg, rgba(10, 12, 11, 0.22), transparent 14%);
}

.media-surface::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 12, 11, 0.34), transparent 20%),
    linear-gradient(0deg, rgba(10, 12, 11, 0.56), transparent 27%);
  content: "";
  opacity: 0;
  transition: opacity 200ms ease;
}

.video-shell:hover .media-surface::after,
.video-shell.is-paused .media-surface::after {
  opacity: 1;
}

.video-shell video {
  filter: saturate(0.9) contrast(1) brightness(0.97);
}

.video-shell.is-playing video {
  filter: saturate(1) contrast(1) brightness(1);
}

/* Reading measure: cap long-form paragraphs near 72 characters. */

.prose p,
.chapter-lead,
.article-summary,
.growth-copy > p,
.transition-copy > p,
.deployment-copy > p,
.motion-space-copy > p,
.paper-abstract {
  max-width: 660px;
}

/* Rhythm: fold the 68px offsets into the 72px step. */

.evidence-stack,
.results-gallery {
  margin-top: 72px;
}

/* Range readout: keep values on one baseline when a label wraps. */

.range-readout dt {
  min-height: 30px;
}

/* Evidence pair: let cards keep their natural height. */

.evidence-pair {
  align-items: start;
}

/* Conclusion: kicker leads alone; limits read as a two-column note. */

.closing-section {
  display: block;
}

.closing-section .chapter-copy {
  max-width: 860px;
}

.closing-section .limits {
  max-width: none;
  margin-top: 56px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}

.closing-section .limits p:not(.section-label) {
  max-width: none;
  columns: 2;
  column-gap: 48px;
  margin-top: 12px;
}

@media (max-width: 860px) {
  .closing-section .limits p:not(.section-label) {
    columns: 1;
  }
}

/* System map: drop the DAgger tap toward the unified teacher column. */

.system-expert-rack-v4::after {
  left: 19%;
}

.system-expert-rack-v4 > p {
  left: 19%;
}

/* Interactive frame: drop the faux browser dots; the mono eyebrow is enough. */

.motion-space-frame::after {
  content: none;
}

/* ------------------------------------------------------------------ */
/* System map v5 clarity pass: stage 01 collapses to three cards with */
/* a real curriculum-return channel and a growing reference family;   */
/* stage 02 converges the experts into the teacher; stage 03 breathes.*/
/* ------------------------------------------------------------------ */

.system-reference-board-v4 {
  grid-template-columns: minmax(0, 1.5fr) 68px minmax(0, 1.05fr) 68px minmax(0, 1fr);
  grid-template-rows: minmax(0, auto) auto;
}

.system-rl-node-v5 {
  min-height: 0;
  background: rgba(239, 243, 240, 0.94);
}

.system-asset-node-v4 {
  min-height: 0;
}

/* Reference family glyph: bars grow in sequence while in view. */

.system-family-glyph-v5 {
  display: block;
  width: 100%;
  max-width: 184px;
  height: auto;
  margin: 14px 0 0;
}

.system-fam-ground-v5 {
  stroke: rgba(30, 42, 37, 0.32);
  stroke-width: 1;
}

.system-family-glyph-v5 g rect {
  fill: rgba(49, 94, 81, 0.11);
  stroke: rgba(49, 94, 81, 0.5);
  stroke-width: 1.1;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.system-family-glyph-v5 g circle {
  fill: var(--system-green);
}

.pipeline-map-v2.is-flowing .system-family-glyph-v5 g rect {
  animation: system-fam-grow-v5 9s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 0.55s);
}

.pipeline-map-v2.is-flowing .system-family-glyph-v5 g circle {
  animation: system-fam-dot-v5 9s ease infinite;
  animation-delay: calc(var(--i) * 0.55s);
}

@keyframes system-fam-grow-v5 {
  0% { transform: scaleY(0.14); opacity: 0.3; }
  6% { transform: scaleY(1.05); opacity: 1; }
  9% { transform: scaleY(1); }
  80% { transform: scaleY(1); opacity: 1; }
  90%, 100% { transform: scaleY(0.14); opacity: 0.3; }
}

@keyframes system-fam-dot-v5 {
  0%, 5% { opacity: 0; }
  9%, 80% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

/* Curriculum loop: a drawn return channel instead of a footnote. */

.system-loop-channel-v5 {
  margin-top: 2px;
  border: 1px solid rgba(37, 73, 63, 0.3);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  padding: 12px 18px 10px 30px;
  overflow: visible;
}

.system-loop-channel-v5::after {
  top: auto;
  bottom: -1px;
}

.system-loop-arm-v5 {
  position: absolute;
  top: -11px;
  width: 1px;
  height: 11px;
  background: rgba(37, 73, 63, 0.34);
}

.system-loop-arm-up-v5 {
  left: -1px;
}

.system-loop-arm-up-v5::after {
  position: absolute;
  top: -2px;
  left: 50%;
  border-right: 3.6px solid transparent;
  border-bottom: 5.2px solid rgba(37, 73, 63, 0.6);
  border-left: 3.6px solid transparent;
  content: "";
  transform: translateX(-50%);
}

.system-loop-arm-down-v5 {
  right: -1px;
}

.system-loop-arm-down-v5::after {
  position: absolute;
  bottom: -1px;
  left: 50%;
  border-top: 5.2px solid rgba(37, 73, 63, 0.6);
  border-right: 3.6px solid transparent;
  border-left: 3.6px solid transparent;
  content: "";
  transform: translateX(-50%);
}

/* Stage 02: experts converge into the unified teacher. */

.system-expert-rack-v4::before {
  right: 2%;
  left: 2%;
}

.system-expert-rack-v4::after {
  bottom: -26px;
  left: 12.5%;
  height: 48px;
}

.system-expert-rack-v4 > p {
  left: 12.5%;
}

.pipeline-map-v2.is-flowing .system-expert-rack-v4::before {
  background:
    radial-gradient(circle, rgba(37, 73, 63, 0.85) 0 1.8px, transparent 2.4px)
      no-repeat 100% 50% / 10px 10px,
    linear-gradient(90deg, rgba(37, 73, 63, 0.25), rgba(37, 73, 63, 0.25))
      no-repeat 0 50% / 100% 1px;
  animation: system-dagger-converge-v5 5.4s linear infinite;
}

@keyframes system-dagger-converge-v5 {
  0% { background-position: 100% 50%, 0 50%; }
  55%, 100% { background-position: 12.5% 50%, 0 50%; }
}

/* Stage 03: the recurrent core breathes. */

.pipeline-map-v2.is-flowing .system-glyph-memory-v4 b:nth-child(2) {
  animation: system-gru-breath-v5 3.4s ease-in-out infinite;
}

@keyframes system-gru-breath-v5 {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50% { transform: scale(1.35); opacity: 0.85; }
}

@media (max-width: 1080px) {
  .system-reference-board-v4 {
    grid-template-columns: minmax(0, 1.4fr) 56px minmax(0, 1.05fr) 56px minmax(0, 1fr);
  }

  .system-loop-arm-v5 {
    top: -9px;
    height: 9px;
  }
}

@media (max-width: 860px) {
  .system-reference-board-v4 {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .system-reference-board-v4 > .system-motion-lab-v5,
  .system-reference-board-v4 > .system-node-v4:nth-of-type(n),
  .system-reference-board-v4 > .system-flow-v4:nth-of-type(n),
  .system-reference-board-v4 > .system-curriculum-loop-v4 {
    grid-column: 1;
    grid-row: auto;
    transform: none;
  }

  .system-reference-board-v4 > .system-flow-v4:nth-of-type(n) {
    justify-self: center;
    width: 14px;
    height: 26px;
    background:
      linear-gradient(180deg, rgba(37, 73, 63, 0.23), rgba(37, 73, 63, 0.63))
      no-repeat 50% 0 / 1px calc(100% - 5px);
    animation: none !important;
  }

  .system-reference-board-v4 > .system-flow-v4:nth-of-type(n)::before {
    top: auto;
    right: 3px;
    bottom: 0;
    transform: rotate(135deg);
  }

  .system-reference-board-v4 > .system-flow-v4:nth-of-type(n)::after {
    display: none;
  }

  .system-loop-channel-v5 {
    margin-top: 0;
    border: 0;
    border-top: 1px dashed rgba(37, 73, 63, 0.25);
    border-radius: 0;
    padding: 12px 14px 0;
  }

  .system-loop-channel-v5::after {
    top: -1px;
    bottom: auto;
  }

  .system-loop-arm-v5 {
    display: none;
  }

  .system-expert-rack-v4::after,
  .system-expert-rack-v4 > p {
    left: 50%;
  }

  .system-expert-rack-v4::after {
    bottom: 9px;
    height: 13px;
  }
}

.system-rl-node-v5 {
  justify-content: center;
}

.system-rl-node-v5 .system-node-title-v4 {
  position: absolute;
  top: 15px;
  right: 15px;
  left: 15px;
}

.system-rl-node-v5 {
  position: relative;
  padding-top: 56px;
}

/* ------------------------------------------------------------------ */
/* Hang line: in every two-column spread the right column starts at   */
/* the headline's top edge, not at the eyebrow above it.              */
/* ------------------------------------------------------------------ */

@media (min-width: 901px) {
  .chapter .chapter-note,
  .growth-story .reference-figure,
  .transition-story .transition-media,
  .deployment-story > figure,
  .paper-section .citation,
  .motion-space-intro .motion-space-note {
    align-self: start;
    margin-top: 44px;
  }

  .chart-head {
    align-items: start;
  }

  .chart-kpi,
  .chart-delta {
    align-self: start;
    margin-top: 35px;
  }
}

/* HUD eyebrows step back while footage plays; hover or pause brings
   them home. Keeps burned-in video titles unobstructed. */

.media-hud {
  opacity: 1;
  transition: opacity 220ms ease;
}

.video-shell.is-playing:not(:hover) .media-hud {
  opacity: 0;
}

/* Narrative icons: each chip draws the thing it names. */

.system-icon-v6 {
  color: var(--system-green);
}

.system-onboard-node-v4 .system-icon-v6 {
  color: var(--system-mint);
}

/* The transfer section carries a disclosure; keep it at note scale. */

.transfer-story .deployment-copy > p.disclosure {
  margin-top: 22px;
  font-size: var(--t-cap);
  line-height: 1.6;
}

/* ================================================================== */
/* Type scale                                                         */
/*                                                                    */
/* One ladder for the whole page. Sans carries content, mono carries  */
/* labels and figures. Every size below is a step on this ladder and  */
/* every tracking value is decided by role, not by eye — near-misses  */
/* (9 / 10 / 10.5 / 11px within two pixels, seven different trackings */
/* for the same mono label) are what made the page feel unresolved.   */
/* ================================================================== */

:root {
  --t-fine: 11px;    /* fine print, node body copy   */
  --t-cap: 12px;     /* captions, labels, small UI   */
  --t-sub: 15px;     /* sub-body, inline values      */
  --t-body: 17px;    /* body                         */
  --t-lead: 18px;    /* lead, emphasis, stat         */
  --t-h4: 22px;      /* stat display, small heading  */

  --m-micro: 9px;    /* tightest mono tag            */
  --m-small: 10px;   /* mono kicker                  */
  --m-label: 12px;   /* mono eyebrow, code           */

  --track-label: 0.075em;   /* sans uppercase label   */
  --track-mono: 0.07em;     /* mono uppercase label   */
  --track-tight: -0.01em;   /* sans small emphasis    */
  --track-snug: -0.02em;    /* sans mid emphasis      */
}

/* --- Sans: collapse the four near-identical fine-print sizes ------- */

.system-node-v4 > p,
.system-transition-node-v4 > p,
.system-transition-node-v4 > b,
.system-curriculum-loop-v4 > p,
.system-training-rail-v4 > p,
.system-training-rail-v4 article strong,
.system-transition-track-v4 span,
.transfer-story .deployment-copy > p.disclosure,
.disclosure {
  font-size: var(--t-fine);
}

.system-transition-node-v4 > b,
.system-training-rail-v4 article strong {
  letter-spacing: var(--track-tight);
}

/* --- Sans: fold 13px into the caption step, 24px into the stat ----- */

.system-network-chain-v4 span {
  font-size: var(--t-cap);
  letter-spacing: var(--track-tight);
}

.system-asset-node-v4 data {
  font-size: var(--t-h4);
}

.system-onboard-node-v4 data {
  font-size: var(--t-sub);
  letter-spacing: var(--track-snug);
}

/* --- Sans: one tracking per weight class -------------------------- */

.system-node-v4 > strong,
.system-transition-node-v4 strong,
.system-expert-rack-v4 article,
.system-policy-pills-v4 i {
  letter-spacing: var(--track-snug);
}

.article-label,
.section-label,
.pipeline-eyebrow {
  letter-spacing: var(--track-label);
}

/* --- Mono: three steps, two trackings ----------------------------- */

.system-motion-phases-v5 span,
.system-transition-track-v4 small,
.system-training-rail-v4 article small {
  font-size: var(--m-micro);
  letter-spacing: var(--track-mono);
}

.system-motion-lab-v5 > header > strong {
  font-size: var(--m-small);
  letter-spacing: var(--track-mono);
}

.media-timeline output {
  font-size: var(--m-micro);
  letter-spacing: 0;
}

.system-stage-header-v4 > span,
.system-stage-header-v4 > small,
.system-node-title-v4,
.system-curriculum-loop-v4 > span,
.system-expert-rack-v4 > p,
.system-transition-node-v4 > header,
.system-training-rail-v4 > span,
.system-flow-v4::after,
.system-motion-viewport-v5 > .system-motion-hud-v5,
.media-hud-eyebrow {
  letter-spacing: var(--track-mono);
}

/* Mono labels carry the weight; mono figures stay light and tabular. */

.media-hud-eyebrow,
.pipeline-eyebrow,
.system-node-title-v4,
.system-stage-header-v4 > small,
.system-curriculum-loop-v4 > span,
.system-training-rail-v4 > span {
  font-weight: var(--weight-semibold);
}

.media-timeline output,
.citation pre {
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

/* --- Roles, not eyeballing ----------------------------------------- */
/* em-based letter-spacing resolves against the parent's font size and */
/* then inherits as an absolute length, so small text was dragging the */
/* body's -0.17px around. Every role below states its own tracking.    */

/* Mono labels: words set in small caps. */
.media-control span,
.chart-kpi small,
.citation-head span,
.citation-head button,
.difficulty-legend li,
.pipeline-eyebrow,
.system-transition-node-v4 > header > strong,
.system-training-rail-v4 article small,
.system-motion-phases-v5 span {
  letter-spacing: var(--track-mono);
  font-weight: var(--weight-semibold);
}

/* Mono figures: numerals that should line up, never track out. */
.figure-caption > span,
.media-timeline output,
.system-transition-track-v4 small,
.system-motion-lab-v5 > header > strong,
.citation pre {
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.figure-caption > span,
.system-transition-track-v4 small {
  font-weight: var(--weight-medium);
}

/* Sans uppercase labels: one tracking everywhere. */
.story-map > p,
.story-map li a span,
.chapter-note > span,
.range-readout dt,
.runtime-facts li span,
.article-label,
.section-label {
  letter-spacing: var(--track-label);
}

/* Sans emphasis: one tracking per step. */
.system-network-chain-v4 span,
.system-expert-rack-v4 article span,
.system-transition-track-v4 strong,
.article-meta p strong,
.figure-caption p strong,
footer p strong {
  letter-spacing: var(--track-tight);
}

.system-node-v4 > strong,
.system-expert-rack-v4 article i,
.system-onboard-node-v4 data {
  letter-spacing: var(--track-snug);
}

.system-asset-node-v4 data,
.system-stage-header-v4 h4 {
  letter-spacing: -0.04em;
}

/* Fine print keeps its own tracking instead of inheriting the body's. */
.system-node-v4 > p,
.system-transition-node-v4 > p,
.system-transition-node-v4 > b,
.system-curriculum-loop-v4 > p,
.system-training-rail-v4 > p,
.system-training-rail-v4 article strong,
.system-transition-track-v4 span,
.disclosure {
  letter-spacing: var(--track-tight);
}

/* Display tracking must loosen as the size drops; 22px was tighter    */
/* than 46px, which read as a different typeface at a glance.          */

.chapter h2,
.paper-details h2,
.growth-copy h2,
.chart-kpi span,
.chart-delta {
  letter-spacing: -0.035em;
}

.system-stage-header-v4 h4,
.system-asset-node-v4 data {
  letter-spacing: -0.025em;
}

/* Numeric labels join the mono-figure role. */

.difficulty-group-head h4 {
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* ================================================================== */
/* Type scale, second pass: one job per typeface                      */
/*                                                                    */
/* The page was setting the same job — a small uppercase label — in   */
/* sans at 12px, in mono at 12px, and in mono at 10px. Three answers  */
/* to one question is what read as noise. From here: mono carries     */
/* every label and every figure, sans carries content only, and the   */
/* near-duplicate steps (11 vs 12, 18 vs 17, mono 9 vs 10) are gone.  */
/* Sans 12 / 15 / 17 / 22 / 34 / 46 / 70, mono 10 / 12. Nothing else. */
/* ================================================================== */

/* --- Every label is mono ------------------------------------------ */

.article-label,
.section-label,
.story-map > p,
.story-map li a span,
.chapter-note > span,
.range-readout dt,
.runtime-facts li span,
.augmentation-ablation .section-label,
.motion-space-note .section-label {
  font-family: var(--mono);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}

.article-label,
.section-label,
.story-map > p {
  font-size: var(--m-label);
}

.story-map li a span,
.chapter-note > span,
.range-readout dt,
.runtime-facts li span {
  font-size: var(--m-small);
}

/* --- Sans keeps seven steps; 11 and 18 fold into 12 and 17 -------- */

.system-node-v4 > p,
.system-transition-node-v4 > p,
.system-transition-node-v4 > b,
.system-curriculum-loop-v4 > p,
.system-training-rail-v4 > p,
.system-training-rail-v4 article strong,
.system-transition-track-v4 span,
.disclosure {
  font-size: var(--t-cap);
}

.story-map li a strong,
.equation-result strong,
.range-readout dd,
.augmentation-outcomes data,
.augmentation-outcomes b,
.shape-row h4,
.shape-series data,
.bar-row data,
.paper-name,
.runtime-facts li strong {
  font-size: var(--t-body);
  letter-spacing: var(--track-tight);
}

/* --- Mono keeps two steps; 9 folds into 10 ------------------------ */

.media-timeline output,
.system-motion-phases-v5 span,
.system-transition-track-v4 small,
.system-training-rail-v4 article small,
.system-motion-lab-v5 > header > strong,
.difficulty-group-head h4 {
  font-size: var(--m-small);
}

/* --- Last two wrinkles -------------------------------------------- */
/* Small sans sets flat: 12px is where negative tracking stops paying. */

.system-node-v4 > p,
.system-transition-node-v4 > p,
.system-transition-node-v4 > b,
.system-curriculum-loop-v4 > p,
.system-training-rail-v4 > p,
.system-training-rail-v4 article strong,
.system-transition-track-v4 span,
.disclosure {
  letter-spacing: 0;
}

/* Mono figures share one weight wherever they appear. */

.difficulty-group-head h4,
.system-motion-lab-v5 > header > strong {
  font-weight: var(--weight-medium);
}

.system-onboard-node-v4 data {
  font-weight: var(--weight-semibold);
}

/* Small sans sets flat at 12px, whatever its weight, and the transfer
   note is a caption like every other note on the page. */

.system-network-chain-v4 span,
.system-expert-rack-v4 article span,
.system-transition-track-v4 strong,
.article-meta p strong,
.figure-caption p strong,
footer p strong {
  letter-spacing: 0;
}

.transfer-story .deployment-copy > p.disclosure {
  font-size: var(--t-cap);
  letter-spacing: 0;
}

.transfer-story .deployment-copy > p.transfer-coda {
  max-width: 540px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: var(--t-h4);
  font-weight: var(--weight-medium);
  letter-spacing: -0.025em;
  line-height: 1.35;
}

/* =====================================================================
   Release grid — one reading edge, one media edge, two typefaces.

   The 1240px rail is only the page frame. Editorial copy uses a 720px
   measure; every image, video, chart, system map, and interactive uses the
   same 1120px media measure. Both begin on the rail's left edge.
   ===================================================================== */

:root {
  --reading-col: 720px;
  --media-col: 1120px;
  --rail-left: max(var(--page-pad), calc((100vw - var(--rail-max)) / 2));
  --label-size: 10px;
  --caption-size: 13px;
}

body,
button,
input,
select,
textarea {
  font-family: var(--sans);
}

.pipeline-map,
.pipeline-map * {
  font-family: var(--sans);
}

code,
pre,
.article-label,
.section-label,
.pipeline-eyebrow,
.media-hud-eyebrow,
.media-timeline output,
.figure-caption > span,
.citation-head,
.story-map > p,
.story-map li span,
.chapter-note > span,
.range-readout dt,
.runtime-facts li span,
.essay-stats span {
  font-family: var(--mono);
}

.pipeline-eyebrow,
.system-stage-header-v4 > span,
.system-stage-header-v4 > small,
.system-node-title-v4,
.system-curriculum-loop-v4 > span,
.system-expert-rack-v4 > p,
.system-transition-node-v4 > header,
.system-training-rail-v4 > span,
.system-flow-v4::after,
.system-motion-phases-v5 span,
.system-motion-lab-v5 > header > strong {
  font-family: var(--mono);
}

.article-label,
.section-label,
.pipeline-eyebrow,
.media-hud-eyebrow {
  font-size: var(--label-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.075em;
  line-height: 1.4;
  text-transform: uppercase;
}

.essay-section {
  margin-top: var(--space-section);
}

.essay-section[id] {
  padding-top: clamp(48px, 5.5vw, 76px);
  border-top: 1px solid var(--line);
}

.essay-section > * + * {
  margin-top: var(--space-block);
}

.essay-prose,
.essay-stats,
.essay-quote {
  width: min(var(--reading-col), 100%);
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.essay-prose > * {
  margin-top: 0;
  margin-bottom: 0;
}

.essay-prose > * + * {
  margin-top: 24px;
}

.essay-prose > .section-label + h2,
.essay-prose > .section-label + h3 {
  margin-top: 16px;
}

.essay-prose > h2 {
  color: var(--ink);
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  letter-spacing: -0.035em;
  line-height: 1.06;
}

.essay-prose > h3 {
  margin-top: 68px;
  color: var(--ink);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.essay-prose > h3:first-child {
  margin-top: 0;
}

.essay-prose > .chapter-lead {
  max-width: none;
  margin-top: 30px;
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.58;
}

.essay-prose > p:not(.section-label):not(.chapter-lead):not(.disclosure) {
  color: var(--body);
  font-size: var(--text-body);
  letter-spacing: -0.01em;
  line-height: 1.75;
}

.essay-prose > h2 + p:not(.chapter-lead),
.essay-prose > h3 + p {
  margin-top: 26px;
}

.essay-prose em {
  color: var(--ink);
  font-style: normal;
  font-weight: var(--weight-semibold);
}

.essay-prose > .disclosure {
  max-width: 560px;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.6;
}

/* Every top-level visual occupies the same track and begins at the rail. */
.hero-figure.page-width,
.media-figure.page-width,
.evidence-stack.page-width,
.results-gallery.page-width,
.paper-endmatter.page-width {
  width: min(var(--media-col), calc(100% - (2 * var(--page-pad))));
  max-width: none;
  margin-right: 0;
  margin-left: var(--rail-left);
}

.essay-prose.essay-follow.page-width {
  width: min(var(--reading-col), calc(100% - (2 * var(--page-pad))));
  max-width: none;
  margin: var(--space-block) 0 0 var(--rail-left);
}

.essay-section > .essay-figure,
.essay-section > .essay-pair,
.motion-space-section > .motion-space-figure,
.results-gallery > .essay-pair {
  width: min(var(--media-col), 100%);
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.hero-figure,
.media-figure,
.essay-figure,
.essay-pair,
.evidence-stack,
.motion-space-figure,
.results-gallery,
.video-shell,
.motion-space-frame,
.motion-space-frame iframe,
.pipeline-map {
  min-width: 0;
}

.hero-figure .video-shell,
.essay-figure .video-shell,
.essay-pair .video-shell,
.results-gallery .video-shell {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-shell video,
.motion-space-frame iframe {
  width: 100%;
}

.figure-caption {
  width: 100%;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 16px;
  margin-top: 16px;
  font-family: var(--sans);
  font-size: var(--caption-size);
  line-height: 1.58;
}

.figure-caption > span {
  font-size: var(--label-size);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}

.figure-caption p {
  max-width: var(--reading-col);
}

.figure-caption strong {
  margin-bottom: 2px;
  font-family: var(--sans);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}

.essay-pair,
.evidence-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.essay-pair > figure + figure,
.evidence-pair .data-figure + .data-figure {
  margin-top: 0;
}

.real2sim-pair {
  align-items: start;
  scroll-margin-top: 88px;
}

.real2sim-pair .video-shell {
  background: #0d0e0d;
  border-color: rgba(96, 117, 108, 0.34);
}

.real2sim-pair .video-shell video,
.real2sim-pair .video-shell.is-media-visible video {
  object-fit: cover;
  filter: saturate(0.88) contrast(1.015) brightness(0.98);
  transform: none;
}

.real2sim-pair .video-shell.is-playing video {
  filter: saturate(0.96) contrast(1.025) brightness(1);
}

.real2sim-pair .media-surface {
  background:
    linear-gradient(180deg, rgba(8, 9, 8, 0.34), transparent 19%),
    linear-gradient(0deg, rgba(8, 9, 8, 0.48), transparent 22%);
}

.real2sim-pair .figure-caption p {
  max-width: none;
}

.real2sim-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(var(--media-col), 100%);
  margin-right: 0;
  margin-left: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.essay-section > .real2sim-steps {
  margin-top: clamp(34px, 4vw, 52px);
}

.real2sim-steps li {
  min-width: 0;
  padding: 24px clamp(20px, 2.6vw, 34px) 27px 0;
}

.real2sim-steps li + li {
  padding-left: clamp(20px, 2.6vw, 34px);
  border-left: 1px solid var(--line);
}

.real2sim-steps span,
.real2sim-steps strong,
.real2sim-steps p {
  display: block;
}

.real2sim-steps span {
  color: var(--signal);
  font-family: var(--mono);
  font-size: var(--label-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

.real2sim-steps strong {
  margin-top: 14px;
  color: var(--ink);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.real2sim-steps p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: var(--caption-size);
  line-height: 1.55;
}

.result-pair.essay-pair > figure:first-child,
.result-pair.essay-pair > figure:last-child {
  grid-column: auto;
}

.evidence-pair {
  border-top: 0;
}

.evidence-pair .data-figure {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.essay-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 32px clamp(36px, 6vw, 76px);
  text-align: left;
}

.essay-stats strong {
  display: block;
  color: var(--ink);
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.essay-stats span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--label-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.essay-quote {
  margin-top: var(--space-major);
  color: var(--ink);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.03em;
  line-height: 1.3;
}

.essay-quote::before {
  display: block;
  width: 34px;
  height: 2px;
  margin: 0 0 26px;
  background: var(--signal);
  content: "";
}

.motion-space-section {
  margin-top: var(--space-section);
  padding-top: clamp(48px, 5.5vw, 76px);
  border-top: 1px solid var(--line);
}

.motion-space-section .motion-space-figure {
  margin-top: var(--space-block);
}

.paper-endmatter {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(48px, 7vw, 104px);
  align-items: start;
  margin-top: var(--space-section);
  padding-top: clamp(48px, 5.5vw, 76px);
  border-top: 1px solid var(--line);
}

.paper-endmatter > .essay-prose,
.paper-endmatter > .citation {
  grid-column: auto;
  width: auto;
  max-width: none;
  margin: 0;
}

.paper-endmatter .paper-name,
.paper-endmatter .paper-abstract {
  max-width: none;
}

.paper-endmatter .paper-links {
  margin-top: 26px;
}

/* Cover: full-rail headline, one measured evidence row, motion in the field. */
.article-header h1 {
  max-width: 1120px;
  text-wrap: balance;
}

@media (min-width: 901px) {
  .article-header {
    position: relative;
    display: grid;
    isolation: isolate;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }

  .article-header > .article-label,
  .article-header > .hero-title-stage,
  .article-header > .article-summary,
  .article-header > .runtime-line,
  .article-header > .article-meta,
  .article-header > .article-actions {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }

  .article-header > .article-label {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .article-header > .hero-title-stage {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: clamp(38px, 4vw, 56px);
  }

  .article-header h1 {
    font-size: clamp(58px, 5.55vw, 70px);
    line-height: 0.98;
  }

  .article-header > .article-summary,
  .article-header > .runtime-line {
    grid-row: 3;
    margin-top: clamp(38px, 4vw, 54px);
    padding-top: 18px;
    border-top: 1px solid var(--line-strong);
  }

  .article-header > .article-summary {
    grid-column: 1 / span 7;
  }

  .article-header > .runtime-line {
    grid-column: 8 / -1;
  }

  .article-header > .hero-tree-field {
    position: absolute;
    z-index: 0;
    top: 58px;
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 440px;
    margin: 0;
    overflow: hidden;
    opacity: 0.82;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
      90deg,
      rgb(0 0 0 / 0%) 0%,
      rgb(0 0 0 / 0%) 36%,
      rgb(0 0 0 / 28%) 52%,
      #000 72%
    );
    mask-image: linear-gradient(
      90deg,
      rgb(0 0 0 / 0%) 0%,
      rgb(0 0 0 / 0%) 36%,
      rgb(0 0 0 / 28%) 52%,
      #000 72%
    );
  }

  .hero-tree-field .hero-tree-canvas {
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin-left: 0;
  }

  .article-header > .article-meta {
    grid-column: 1 / -1;
    grid-row: 4;
    grid-template-columns: minmax(0, 1.45fr) minmax(180px, 0.55fr);
    gap: clamp(26px, 5vw, 64px);
    margin-top: 42px;
  }

  .article-header > .article-actions {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 30px;
  }
}

/* Media-only reveal: one direction, once. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.75s ease,
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) {
  .hero-figure.page-width,
  .media-figure.page-width,
  .evidence-stack.page-width,
  .results-gallery.page-width,
  .paper-endmatter.page-width,
  .essay-prose.essay-follow.page-width {
    width: calc(100% - (2 * var(--page-pad)));
    margin-left: var(--page-pad);
  }

  .essay-pair,
  .evidence-pair,
  .paper-endmatter {
    grid-template-columns: minmax(0, 1fr);
  }

  .essay-pair,
  .evidence-pair {
    row-gap: 44px;
  }

  .result-pair.essay-pair > figure:first-child,
  .result-pair.essay-pair > figure:last-child {
    grid-column: 1;
  }

  .paper-endmatter {
    gap: 42px;
  }

  .real2sim-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .real2sim-steps li,
  .real2sim-steps li + li {
    padding: 22px 0 24px;
    border-left: 0;
  }

  .real2sim-steps li + li {
    border-top: 1px solid var(--line);
  }

  .article-header > .hero-tree-field {
    display: none;
  }
}

@media (max-width: 620px) {
  .essay-stats {
    gap: 28px 36px;
  }

  .essay-prose > h3 {
    margin-top: 52px;
  }

  .figure-caption {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 12px;
  }
}

/* Credits sit below the field reel so the video reaches the first screen.
   They keep the two-column split they had inside the header. */
.article-credits {
  margin-top: clamp(30px, 3.4vw, 46px);
}

@media (min-width: 901px) {
  .article-credits > .article-meta {
    grid-template-columns: minmax(0, 1.45fr) minmax(180px, 0.55fr);
    gap: clamp(26px, 5vw, 64px);
  }
}

.article-credits > .article-actions {
  margin-top: 30px;
}

/* First-screen compression: the field reel has to be visible without
   scrolling. Only the vertical air in the cover is reduced; the type
   scale and the runner band keep their positions. */
.article-header {
  padding-bottom: clamp(34px, 3.6vw, 56px);
}

@media (min-width: 901px) {
  .article-header > .hero-title-stage {
    margin-top: clamp(30px, 3.2vw, 46px);
  }

  .article-header > .article-summary,
  .article-header > .runtime-line {
    margin-top: clamp(28px, 3vw, 42px);
  }
}

/* The transition card lost the four-step track (the prose below the map
   explains the handoff); keep its header at the top and centre the claim
   in the height the sibling card sets. */
.system-transition-node-v4 {
  display: flex;
  flex-direction: column;
}

.system-transition-node-v4 > b {
  display: flex;
  flex: 1;
  align-items: center;
  margin-top: 12px;
}

/* Stage 02 rebalanced after the track came out: the claim is now the card's
   headline rather than a footnote under a grid. */
.system-distill-path-v4 {
  grid-template-columns: minmax(190px, 1fr) 42px minmax(0, 1.45fr);
}

.system-transition-node-v4 > b {
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* Paired charts share one row height so the group reads as one block of
   evidence; each caption then sits on the same baseline. */
.evidence-pair {
  align-items: stretch;
}

.evidence-pair.evidence-single {
  grid-template-columns: minmax(0, 1fr);
}

.evidence-pair .data-figure figcaption {
  margin-top: auto;
}

/* =====================================================================
   Type-scale repair. Components added after the typography pass drifted
   off the ladder; these five rules put them back.
   Ladder: sans 12 / 15 / 17 / 22 / 34 / 46 / 78 · mono 10 / 12.
   Labels are mono, always.
   ===================================================================== */

/* 1. Captions were bumped to 13px, wedging a third step between 12 and 15. */
:root {
  --caption-size: var(--t-cap);
}

/* 2. The step-bar titles used 18px, a step merged into 17 long ago. */
.real2sim-steps strong {
  font-size: var(--t-body);
  letter-spacing: var(--track-tight);
}

/* 3. `.pipeline-map *` forces sans on the whole diagram, which made its
      node labels the only sans uppercase labels on the page. */
.system-node-title-v4 span,
.system-transition-node-v4 > header span,
.system-transition-node-v4 > header strong {
  font-family: var(--mono);
  letter-spacing: var(--track-mono);
}

/* 4. Page labels are mono but were tracking on the sans value (0.075). */
.article-label,
.section-label,
.media-hud-eyebrow,
.pipeline-eyebrow {
  letter-spacing: var(--track-mono);
}

/* 5. The transition claim introduced a second tracking at 15px. */
.system-transition-node-v4 > b {
  letter-spacing: var(--track-snug);
}

/* 6. The step-bar body inherited an absolute px letter-spacing from the
      strip; 12px sans sets flat, as everywhere else on the page. */
.real2sim-steps p {
  letter-spacing: 0;
}

/* The autonomous-composition figure already closes with its own rule.
   Move directly into the policy-memory section without an empty divider bay. */
.evidence-stack + .motion-space-section {
  margin-top: var(--space-block);
  padding-top: 0;
  border-top: 0;
}

/* Within the composition comparison, alignment and whitespace are enough to
   separate the two conditions; rules are reserved for section boundaries. */
.composition-figure .bar-row {
  border-top: 0;
}