:root {
  color-scheme: light;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --soft: #f5f5f7;
  --paper: #ffffff;
  --blue: #0071e3;
  --dark: #101012;
  --dark-line: #3a3a3c;
  --radius: 28px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 4px; }

.shell { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.site-header { width: min(1120px, calc(100% - 48px)); height: 56px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,.12); }
.brand { font-size: 15px; font-weight: 650; letter-spacing: -.02em; }
.site-header nav { display: flex; gap: 28px; font-size: 13px; }
.site-header nav a { color: #424245; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--blue); }
.eyebrow { margin: 0 0 22px; color: var(--blue); font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.inverse { color: #2997ff; }
h1, h2, h3, p { text-wrap: balance; }
h1, h2, h3 { margin-top: 0; letter-spacing: -.045em; }
h1 { margin-bottom: 28px; font-size: clamp(54px, 8vw, 104px); line-height: .94; }
h2 { margin-bottom: 32px; font-size: clamp(40px, 5.5vw, 72px); line-height: 1; }
.hero { padding-block: clamp(110px, 16vw, 190px) 140px; text-align: center; }
.hero-copy { max-width: 760px; margin: 0 auto 30px; color: var(--muted); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.35; }
.text-link { color: var(--blue); font-size: 18px; }
.text-link:hover { text-decoration: underline; }

.system-section { overflow: hidden; padding-block: 120px 140px; background: var(--soft); }
.section-heading { text-align: center; }
.system-map { position: relative; min-height: 620px; margin-top: 76px; }
.core-node, .capability-node, .future-node { position: absolute; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); background: var(--paper); }
.core-node { z-index: 2; top: 210px; left: calc(50% - 108px); width: 216px; height: 216px; justify-content: center; border-color: var(--ink); border-radius: 50%; text-align: center; }
.capability-node { z-index: 2; top: 18px; right: 4%; width: 330px; min-height: 240px; border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease; }
.capability-node:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,.12); }
.future-node { bottom: 18px; left: 5%; width: 250px; min-height: 160px; justify-content: flex-end; border-style: dashed; border-radius: 20px; color: var(--muted); background: transparent; }
.node-index { margin-bottom: 26px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .08em; }
.core-node strong { font-size: 25px; }
.capability-node strong { max-width: 245px; margin-bottom: 22px; font-size: 28px; line-height: 1.05; }
.future-node strong { font-size: 18px; }
.core-node small, .capability-node small, .future-node small { margin-top: 8px; color: var(--muted); font-size: 13px; }
.status { margin-bottom: 18px; color: #237a3b; font-size: 12px; font-weight: 650; }
.status i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #34c759; }
.node-arrow { position: absolute; right: 28px; bottom: 26px; color: var(--blue); font-size: 24px; }
.signal { position: absolute; z-index: 1; display: block; border-top: 1px solid #9a9a9f; transform-origin: left center; }
.signal::after { position: absolute; top: -4px; right: -1px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); content: ""; }
.signal-a { top: 310px; left: 50%; width: 340px; transform: rotate(-33deg); }
.signal-b { top: 350px; left: 24%; width: 260px; transform: rotate(152deg); }

.manifest { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; padding-block: 150px; align-items: start; }
.metric { margin: 0; font-size: clamp(130px, 20vw, 240px); font-weight: 700; line-height: .8; letter-spacing: -.09em; color: var(--ink); }
.manifest h2 { font-size: clamp(38px, 4.5vw, 64px); }
.manifest div > p:last-child, .section-copy { max-width: 660px; color: var(--muted); font-size: 20px; line-height: 1.5; }

.process-hero { padding-block: 70px 120px; }
.back-link { display: inline-block; margin-bottom: 90px; color: var(--blue); font-size: 14px; }
.process-hero .hero-copy { margin-left: 0; text-align: left; }
.release-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 80px; border-block: 1px solid var(--line); }
.release-strip div { display: flex; align-items: baseline; justify-content: space-between; padding: 22px 26px; border-right: 1px solid var(--line); }
.release-strip div:last-child { border: 0; }
.release-strip span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.release-strip strong { font-size: 28px; }

.dark-section { padding-block: 130px 150px; background: var(--dark); color: #f5f5f7; }
.flow-map { margin-top: 80px; }
.flow-label { margin-block: 34px 14px; color: #86868b; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.flow-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.flow-row-wide { grid-template-columns: repeat(6, 1fr); }
.flow-row li { position: relative; min-height: 170px; padding: 24px 18px; border: 1px solid var(--dark-line); border-right: 0; }
.flow-row li:last-child { border-right: 1px solid var(--dark-line); }
.flow-row li::after { position: absolute; z-index: 2; top: 50%; right: -5px; width: 9px; height: 9px; border-radius: 50%; background: #86868b; content: ""; }
.flow-row li:last-child::after { display: none; }
.flow-row span { display: block; margin-bottom: 42px; color: #86868b; font-family: ui-monospace, monospace; font-size: 11px; }
.flow-row strong { display: block; margin-bottom: 8px; font-size: 18px; }
.flow-row small { color: #a1a1a6; line-height: 1.4; }
.flow-row .decision { border-top: 2px solid #2997ff; }
.flow-row .decision strong { color: #2997ff; }
.closure-decision { margin: 14px 0 0; color: #2997ff; font-size: 12px; text-align: right; }

.roles-section { padding-block: 150px; }
.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 70px; border-block: 1px solid var(--line); }
.role-grid article { min-height: 250px; padding: 28px 24px; border-right: 1px solid var(--line); }
.role-grid article:last-child { border: 0; }
.role-grid span { color: var(--muted); font-family: ui-monospace, monospace; font-size: 11px; }
.role-grid h3 { margin: 76px 0 10px; font-size: 25px; }
.role-grid p { margin: 0; color: var(--muted); line-height: 1.45; }

.timeline-section { padding-block: 140px; background: var(--soft); }
.timeline { max-width: 850px; margin: 80px 0 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.timeline li { position: relative; display: grid; grid-template-columns: 150px 200px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.timeline li::before { position: absolute; top: -5px; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: #86868b; content: ""; }
.timeline li.current::before { background: #34c759; }
.timeline li.draft::before { background: var(--blue); }
.timeline time, .timeline p { color: var(--muted); font-size: 14px; }
.timeline strong { font-size: 17px; }
.timeline p { margin: 0; line-height: 1.45; }

.test-section { padding-block: 150px; }
.test-bench { display: grid; grid-template-columns: 1fr 90px 1fr; gap: 24px; margin-top: 76px; align-items: center; }
.test-bench article { min-height: 400px; padding: 30px; border: 1px solid var(--line); border-radius: 24px; }
.test-bench .version { display: block; margin-bottom: 52px; color: var(--blue); font-family: ui-monospace, monospace; font-size: 12px; }
.test-bench strong { display: block; font-size: 24px; letter-spacing: -.03em; }
.test-bench p { color: var(--muted); line-height: 1.45; }
.bench-axis { display: flex; align-items: center; }
.bench-axis span { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.bench-axis i { flex: 1; border-top: 1px solid var(--ink); }
.metric-list { margin: 25px 0 0; }
.metric-list div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-top: 1px solid var(--line); }
.metric-list dt, .metric-list dd { margin: 0; font-size: 12px; line-height: 1.35; }
.metric-list dt { color: var(--muted); }
.metric-list dd { text-align: right; }
.test-conclusion { max-width: 820px; margin-top: 34px; font-size: 17px; line-height: 1.5; }
.source-note { margin-top: 24px; color: var(--muted); font-size: 12px; }
.source-note a { color: var(--blue); }
.site-footer { display: flex; justify-content: space-between; padding-block: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.site-footer a { color: var(--blue); }

@media (max-width: 760px) {
  .shell, .site-header { width: min(100% - 32px, 1120px); }
  h1 { font-size: 44px; }
  .site-header nav { gap: 18px; }
  .hero { padding-block: 90px 100px; }
  .system-section, .roles-section, .timeline-section, .test-section { padding-block: 90px; }
  .system-map { min-height: 660px; }
  .core-node { top: 230px; left: calc(50% - 83px); width: 166px; height: 166px; }
  .capability-node { top: 0; right: 0; width: 88%; min-height: 205px; }
  .future-node { bottom: 0; left: 0; width: 72%; }
  .signal-a { top: 290px; left: 50%; width: 180px; transform: rotate(-56deg); }
  .signal-b { top: 352px; left: 26%; width: 170px; transform: rotate(122deg); }
  .manifest { grid-template-columns: 1fr; gap: 70px; padding-block: 100px; }
  .metric { font-size: 150px; }
  .process-hero { padding-block: 48px 90px; }
  .back-link { margin-bottom: 70px; }
  .release-strip { grid-template-columns: 1fr; }
  .release-strip div { border-right: 0; border-bottom: 1px solid var(--line); }
  .dark-section { padding-block: 90px; }
  .flow-row, .flow-row-wide { grid-template-columns: 1fr; }
  .flow-row li { min-height: auto; border-right: 1px solid var(--dark-line); border-bottom: 0; }
  .flow-row li:last-child { border-bottom: 1px solid var(--dark-line); }
  .flow-row li::after { top: auto; right: 50%; bottom: -5px; }
  .flow-row span { margin-bottom: 28px; }
  .role-grid { grid-template-columns: 1fr 1fr; }
  .role-grid article:nth-child(2) { border-right: 0; }
  .role-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .timeline { margin-top: 60px; }
  .timeline li { grid-template-columns: 1fr; gap: 7px; padding-left: 18px; }
  .test-bench { grid-template-columns: 1fr; }
  .bench-axis { height: 45px; flex-direction: column; }
  .bench-axis i { border-top: 0; border-left: 1px solid var(--ink); }
  .site-footer { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}