:root {
  --paper:#f7f7f4;
  --surface:#fff;
  --ink:#151619;
  --ink-2:#45484f;
  --muted:#777a82;
  --rule:#dddeda;
  --rule-strong:#babcb6;
  --accent:#315f9e;
  --accent-soft:#e9eef5;
  --warm:#a16a35;
  --attn:#1c2430;
  --recurrent:#d9dde2;
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans: "IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono: "IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --frame: 1080px;
  --prose: 660px;
  --rail: 145px;
  --gutter: clamp(16px,4vw,40px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#111316;
    --surface:#171a1e;
    --ink:#ecece8;
    --ink-2:#c0c3c8;
    --muted:#8d929b;
    --rule:#2c3036;
    --rule-strong:#454b53;
    --accent:#80a8df;
    --accent-soft:#1e2a3b;
    --warm:#d49a63;
    --attn:#e5e9ef;
    --recurrent:#353a42;
    color-scheme: dark;
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font: 400 16px/1.66 var(--sans);
  text-rendering:optimizeLegibility;
}
a { color:var(--accent); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
strong { font-weight:600; }
em { font-family:var(--serif); }
code { font-family:var(--mono); font-size:.88em; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.skip { position:absolute; left:-9999px; top:0; }
.skip:focus { left:16px; top:12px; z-index:20; padding:8px 12px; background:var(--surface); border:1px solid var(--rule-strong); }

.frame { max-width:var(--frame); margin-inline:auto; padding-inline:var(--gutter); }
.site-head {
  display:flex;
  justify-content:space-between;
  gap:16px 28px;
  align-items:baseline;
  flex-wrap:wrap;
  padding-block:18px;
  border-bottom:1px solid var(--rule);
  font-size:.82rem;
  color:var(--muted);
}
.site-head strong { color:var(--ink); font-weight:500; }
.site-head nav { display:flex; flex-wrap:wrap; gap:6px 18px; }
.site-head nav a { color:var(--ink-2); text-decoration:none; }
.site-head nav a:hover { color:var(--accent); }

.hero { padding-block:clamp(52px,8vw,96px) clamp(42px,6vw,70px); display:grid; gap:20px; }
.eyebrow {
  margin:0;
  font:500 .74rem/1.4 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
h1,h2,h3 { margin:0; font-family:var(--serif); font-weight:600; letter-spacing:-.015em; text-wrap:balance; }
h1 { font-size:clamp(2.45rem,2rem + 2.7vw,4.2rem); line-height:1.03; max-width:16ch; }
h2 { font-size:clamp(1.8rem,1.55rem + 1.3vw,2.55rem); line-height:1.13; max-width:25ch; }
h3 { font-size:1.28rem; line-height:1.3; }
.subtitle { margin:0; max-width:36ch; font:500 clamp(1.25rem,1.1rem + .6vw,1.6rem)/1.4 var(--serif); color:var(--ink-2); }
.lede { margin:0; max-width:var(--prose); font-size:1.08rem; color:var(--ink-2); }
.meta {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:12px 0 0;
  border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule);
}
.meta div { padding:13px 18px 13px 0; min-width:0; }
.meta dt { font:500 .69rem/1.3 var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
.meta dd { margin:4px 0 0; font-size:.83rem; line-height:1.45; }
.status-line {
  margin:0;
  max-width:var(--prose);
  padding-left:16px;
  border-left:2px solid var(--rule-strong);
  color:var(--ink-2);
  font-size:.9rem;
}
.status-line strong { color:var(--ink); }
.hero-links { display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.84rem; }

.step {
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  column-gap:32px;
  padding-block:clamp(50px,7vw,86px);
  border-top:1px solid var(--rule);
}
.rail { padding-top:6px; font:400 .76rem/1.4 var(--mono); color:var(--muted); }
.rail b { display:block; color:var(--ink-2); font-weight:500; margin-top:2px; }
.body { min-width:0; display:grid; gap:28px; }
.prose { max-width:var(--prose); display:grid; gap:14px; }
.prose p { margin:0; color:var(--ink-2); }
.prose h3 { margin-top:8px; font-family:var(--sans); font-size:1rem; letter-spacing:0; }
.conclusion {
  color:var(--ink)!important;
  font-family:var(--serif);
  font-size:1.15rem;
  line-height:1.48;
  border-left:2px solid var(--accent);
  padding-left:14px;
}

.figure { margin:0; display:grid; gap:16px; padding-top:16px; border-top:1px solid var(--rule-strong); }
.figure-head { display:grid; gap:5px; max-width:720px; }
.figure-kicker { margin:0; font:400 .68rem/1.4 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.figure-head h3 { font-family:var(--sans); font-size:1rem; letter-spacing:0; }
.takeaway { margin:0; color:var(--ink-2); font-size:.84rem; max-width:680px; }

.arch-controls { display:flex; gap:18px 36px; flex-wrap:wrap; }
fieldset { margin:0; padding:0; border:0; min-width:0; }
legend { margin-bottom:5px; font-size:.76rem; color:var(--muted); }
.text-tabs { display:flex; gap:12px; flex-wrap:wrap; border-bottom:1px solid var(--rule); }
.text-tabs button {
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--muted);
  padding:4px 0 6px;
  margin-bottom:-1px;
  font:500 .79rem/1.2 var(--sans);
  cursor:pointer;
}
.text-tabs button[aria-pressed="true"] { color:var(--ink); border-bottom-color:var(--ink); }
.text-tabs button:hover { color:var(--ink-2); }

.stack-visual {
  display:grid;
  grid-template-columns:repeat(16,minmax(12px,1fr));
  gap:5px;
  max-width:760px;
  padding-block:10px;
}
.layer {
  height:80px;
  border:1px solid var(--rule-strong);
  background:var(--recurrent);
  position:relative;
}
.layer.attention { background:var(--attn); border-color:var(--attn); }
.layer::after {
  content:attr(data-i);
  position:absolute;
  bottom:-20px;
  left:50%;
  transform:translateX(-50%);
  font:400 .62rem/1 var(--mono);
  color:var(--muted);
}
.stack-summary { margin:10px 0 0; font:500 .84rem/1.4 var(--mono); color:var(--ink-2); }
.legend { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.76rem; color:var(--muted); }
.legend span { display:inline-flex; align-items:center; gap:7px; }
.swatch { display:inline-block; width:14px; height:8px; border:1px solid var(--rule-strong); }
.swatch.attn { background:var(--attn); border-color:var(--attn); }
.swatch.recurrent { background:var(--recurrent); }

.probe-ledger,
.engineering-ledger,
.status-ledger {
  display:grid;
  border-top:1px solid var(--rule-strong);
}
.probe-ledger > div,
.engineering-ledger > div,
.status-ledger > div {
  display:grid;
  grid-template-columns:110px minmax(0,200px) minmax(0,1fr);
  gap:14px 22px;
  padding:13px 0;
  border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.probe-ledger span,
.status-ledger span {
  font:400 .7rem/1.4 var(--mono);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.probe-ledger strong,
.engineering-ledger strong,
.status-ledger strong { font-size:.9rem; }
.probe-ledger p,
.engineering-ledger p,
.status-ledger p { margin:0; font-size:.84rem; color:var(--ink-2); }

.design-sequence {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--rule-strong);
}
.design-sequence > div { padding:12px 14px 0 0; min-width:0; }
.design-sequence span { display:block; font:400 .7rem/1.3 var(--mono); color:var(--muted); margin-bottom:6px; }
.design-sequence strong { display:block; font-size:.84rem; }
.design-sequence p { margin:3px 0 0; color:var(--muted); font-size:.74rem; line-height:1.45; }

.finding {
  display:grid;
  gap:18px;
  padding-top:22px;
  border-top:1px solid var(--rule-strong);
}
.finding header { display:grid; gap:5px; max-width:760px; }
.finding header span { font:400 .68rem/1.4 var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.finding header h3 { font-size:clamp(1.35rem,1.15rem + .8vw,1.8rem); max-width:32ch; }
.result-figure { margin:0; display:grid; gap:9px; max-width:820px; }
.result-figure img { width:100%; height:auto; display:block; border:1px solid var(--rule); background:var(--surface); }
.result-figure figcaption { color:var(--muted); font-size:.76rem; line-height:1.5; max-width:720px; }
.source-note { margin:0; font-size:.78rem; color:var(--muted); }

.engineering-ledger > div { grid-template-columns:minmax(0,190px) minmax(0,1fr); }
.numbers {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule);
}
.numbers > div { padding:14px 18px 14px 0; }
.numbers strong { display:block; font:600 clamp(1.55rem,1.2rem + 1vw,2.1rem)/1.1 var(--serif); }
.numbers span { display:block; margin-top:4px; font-size:.76rem; color:var(--muted); }

.status-ledger > div { grid-template-columns:85px minmax(0,210px) minmax(0,1fr); }

.commands { display:grid; border-top:1px solid var(--rule-strong); max-width:760px; }
.commands > div {
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:18px;
  align-items:baseline;
  padding:11px 0;
  border-bottom:1px solid var(--rule);
}
.commands span { font-size:.8rem; color:var(--muted); }
.commands code { color:var(--ink); overflow-wrap:anywhere; }
.sources { margin:0; padding-left:1.2rem; max-width:760px; display:grid; gap:7px; font-size:.82rem; color:var(--ink-2); }
.small-note { margin:0; max-width:var(--prose); font-size:.76rem; color:var(--muted); }

.site-foot {
  display:flex;
  justify-content:space-between;
  gap:12px 24px;
  flex-wrap:wrap;
  padding-block:30px 48px;
  border-top:1px solid var(--rule);
  color:var(--muted);
  font-size:.78rem;
}
.site-foot nav { display:flex; gap:18px; }

@media (max-width:850px) {
  .meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .step { grid-template-columns:minmax(0,1fr); row-gap:10px; }
  .rail b { display:inline; margin:0 0 0 6px; }
  .probe-ledger > div,
  .status-ledger > div { grid-template-columns:90px minmax(0,1fr); gap:4px 16px; }
  .probe-ledger p,
  .status-ledger p { grid-column:2; }
  .design-sequence { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .numbers { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  h1 { max-width:none; }
  .meta { grid-template-columns:minmax(0,1fr); }
  .stack-visual { gap:3px; }
  .layer { height:58px; }
  .probe-ledger > div,
  .engineering-ledger > div,
  .status-ledger > div { grid-template-columns:minmax(0,1fr); gap:3px; }
  .probe-ledger p,
  .status-ledger p { grid-column:auto; }
  .design-sequence { grid-template-columns:minmax(0,1fr); }
  .numbers { grid-template-columns:minmax(0,1fr); }
  .commands > div { grid-template-columns:minmax(0,1fr); gap:2px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}