/* ============================================================================
   /articles/context-engineering  --  "What the model is allowed to see"

   Its own world, deliberately not the home page's specimen survey and not any
   sibling article's. The page is one idea: a fixed strip of space, and
   everything wants in. So the component language is the window itself, a grid
   of cells that gets reconfigured for every diagram on the page, and the
   palette is not one signal color but the five kinds of thing that compete for
   the space -- instructions, tools, retrieved knowledge, history, and filler.
   Those five colors mean the same thing in every figure, in both registers.

   Light by default, because this is a reference read in the afternoon between a
   bad agent run and a decision about how to build a retrieval layer. The two
   evidence rooms invert to near-black, because that is where the reader is
   looking at what the machine saw rather than at their own notes.
   ========================================================================== */

@import url('/articles/context-engineering/assets/fonts.css');

:root {
  /* --- the bench ---------------------------------------------------------- */
  --paper-0: #eef0f1;
  --paper-1: #ffffff;
  --paper-2: #e2e6e8;
  --paper-3: #d5dadd;
  --ink-900: #0e1519;
  --ink-600: #3e4d55;
  /* 4.5:1+ on paper-0, paper-1 AND paper-2, measured rather than eyeballed. */
  --ink-400: #56676f;
  --rule: rgba(14, 21, 25, 0.13);
  --rule-strong: rgba(14, 21, 25, 0.28);

  /* --- the evidence rooms ------------------------------------------------- */
  --void-950: #060b0e;
  --void-900: #0a1216;
  --void-800: #101c22;
  --void-700: #17282f;
  --bone: #e7eef1;
  --mist: #9db0b9;
  --mist-dim: #83979f;
  --rule-d: rgba(157, 176, 185, 0.16);
  --rule-d-strong: rgba(157, 176, 185, 0.32);

  /* --- the five kinds of token -------------------------------------------- */
  --r-instr: #d8a02a;
  --r-tool: #e2603c;
  --r-know: #1f9e6e;
  --r-hist: #4a76d8;
  --r-noise: #9aa8ae;
  /* the same five, darkened until each clears 4.5:1 at body size on paper */
  --r-instr-t: #7d5700;
  --r-tool-t: #a63616;
  --r-know-t: #0a6544;
  --r-hist-t: #2b4fa8;
  --r-noise-t: #56676f;
  /* and lifted for the dark rooms */
  --r-instr-d: #f2c14e;
  --r-tool-d: #ff8464;
  --r-know-d: #3fd39a;
  --r-hist-d: #7fa5ff;
  --r-noise-d: #8d9ba1;

  --shell: 1180px;
  --measure: 68ch;
  --gutter: clamp(1.15rem, 4vw, 3.6rem);
  --pad: clamp(4rem, 9vh, 7.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --s--1: clamp(0.78rem, 0.75rem + 0.12vw, 0.85rem);
  --s-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --s-1: clamp(1.16rem, 1.05rem + 0.48vw, 1.4rem);
  --s-2: clamp(1.48rem, 1.26rem + 1vw, 2.05rem);
  --s-3: clamp(2rem, 1.45rem + 2.3vw, 3.4rem);
  --s-4: clamp(2.5rem, 1.4rem + 4.7vw, 5.4rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scrollbar-color: var(--paper-3) var(--paper-0);
  scrollbar-width: thin;
  caret-color: var(--r-tool-t);
  accent-color: var(--r-tool-t);
  -webkit-text-size-adjust: 100%;
}
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--paper-0); }
::-webkit-scrollbar-thumb { background: var(--paper-3); border: 3px solid var(--paper-0); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }
::selection { background: var(--ink-900); color: var(--paper-0); }
:focus-visible { outline: 2px solid var(--r-tool-t); outline-offset: 3px; border-radius: 2px; }

body {
  margin: 0;
  background: var(--paper-0);
  color: var(--ink-900);
  font-family: 'Synonym', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--s-0);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Excon', 'Synonym', system-ui, sans-serif;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: 0;
}
p { text-wrap: pretty; margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.mono, code, .num, th, .tag, .key, .cap {
  font-family: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
code { font-size: 0.84em; background: var(--paper-2); padding: 0.1em 0.34em; border-radius: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 0; left: 0; z-index: 90;
  padding: 0.7rem 1.1rem; margin: 0.5rem;
  background: var(--ink-900); color: var(--paper-0);
  font: 400 0.8rem/1 'Martian Mono', monospace; border-radius: 4px;
  transform: translateY(-180%); transition: transform 0.25s var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* ---------------------------------------------------------------- topbar -- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 2rem);
  padding: 0.7rem var(--gutter);
  background: rgba(238, 240, 241, 0.95);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
}
.topbar__home {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--ink-400); text-decoration: none;
  font-size: var(--s--1); letter-spacing: 0.03em; padding-block: 0.55rem;
}
.topbar__home svg { width: 16px; height: 16px; }
.topbar__home:hover { color: var(--ink-900); }
.topbar__brand {
  font-family: 'Excon', sans-serif; font-weight: 700; font-size: 0.95rem;
  letter-spacing: -0.02em; text-decoration: none; color: var(--ink-900);
  padding-left: clamp(0.5rem, 2vw, 1.4rem); border-left: 1px solid var(--rule);
}
.topbar__brand span {
  display: block; font-family: 'Martian Mono', monospace; font-weight: 400;
  font-size: 0.54rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-400);
}
.topbar__nav { margin-left: auto; display: flex; gap: clamp(0.6rem, 1.5vw, 1.35rem); }
.topbar__nav a {
  font-family: 'Martian Mono', monospace; font-size: 0.64rem; letter-spacing: -0.03em;
  color: var(--ink-400); text-decoration: none; padding: 0.35rem 0.14rem;
  border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.topbar__nav a:hover { color: var(--ink-900); }
.topbar__nav a.active { color: var(--r-tool-t); border-bottom-color: var(--r-tool-t); }
.topbar__progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; }
.topbar__progress span { display: block; height: 100%; width: 0; background: var(--r-tool-t); }
@media (max-width: 1120px) { .topbar__nav { display: none; } }

/* ------------------------------------------------------------- structure -- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--wide { max-width: 1340px; }
section { position: relative; }
.stage { padding-block: var(--pad); }
.stage--paper { background: var(--paper-0); }
.stage--plate { background: var(--paper-1); }
.pad-tight { padding-block: calc(var(--pad) * 0.55); }

.stage--void { background: var(--void-900); color: var(--bone); }
.stage--void h2, .stage--void h3 { color: var(--bone); }
.stage--void ::selection { background: var(--bone); color: var(--void-950); }
.stage--void .prose { color: var(--mist); }
/* .prose h2/h3 below is two classes deep and would otherwise beat `.stage--void h3`, which put
   near-black headings on the near-black stages. Match its specificity here. */
.stage--void .prose h2, .stage--void .prose h3 { color: var(--bone); }
.stage--void .prose strong { color: var(--bone); font-weight: 600; }
.stage--void .prose em { font-style: normal; color: var(--r-instr-d); }
.stage--void .lede { color: var(--mist); }
.stage--void .marker { color: var(--mist-dim); }
.stage--void .marker::after { background: var(--rule-d); }
.stage--void .note { color: var(--mist-dim); border-left-color: var(--rule-d-strong); }
.stage--void code { background: var(--void-700); color: var(--bone); }
.stage--void a { color: var(--r-instr-d); }
.stage--void .callout p { color: var(--mist); }

.marker {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: 'Martian Mono', monospace; font-size: 0.6rem; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink-400); margin-bottom: 1.3rem;
}
.marker::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

h2 { font-size: var(--s-3); margin-bottom: 1.1rem; }
h3 { font-size: var(--s-1); font-weight: 700; letter-spacing: -0.018em; line-height: 1.16; }
.prose h3 { margin-top: 1.9rem; margin-bottom: 0.6rem; }
.lede { font-size: var(--s-1); line-height: 1.5; color: var(--ink-600); max-width: var(--measure); }
.prose { max-width: var(--measure); color: var(--ink-600); }
.prose h2, .prose h3 { color: var(--ink-900); }
.prose strong { color: var(--ink-900); font-weight: 600; }
.prose em { font-style: normal; color: var(--r-tool-t); font-weight: 500; }
.prose a { text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul { margin: 0 0 1.05em; padding-left: 1.1rem; }
.prose li { margin-bottom: 0.45em; }
.prose li::marker { color: var(--ink-400); }

.note {
  font-size: var(--s--1); line-height: 1.62; color: var(--ink-400);
  border-left: 1px solid var(--rule-strong); padding-left: 1rem; max-width: 66ch;
}
.note a { text-underline-offset: 3px; }

figure { margin: 0; }
figcaption {
  margin-top: 0.7rem; font-size: var(--s--1); line-height: 1.55; color: var(--ink-400);
  max-width: 52ch;
}
.stage--void figcaption { color: var(--mist-dim); }
figure img { border: 1px solid var(--rule); }
.stage--void figure img { border-color: var(--rule-d); }

.reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 0.85s var(--ease), transform 1s var(--ease); }
.reveal.on { opacity: 1; transform: none; }

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.8rem, 5vw, 4.5rem); align-items: start; }
.split--flip > *:first-child { order: 2; }
.stack-gap { display: grid; gap: clamp(1.6rem, 4vh, 2.8rem); }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; } .split--flip > *:first-child { order: 0; } }

/* =========================================================== the window == */
/* One grid of 1,000 cells. Every cell is 200 tokens of a 200,000 token window,
   and every diagram on this page is that same grid with different cells lit. */

.win { display: grid; grid-template-columns: repeat(40, 1fr); gap: 1px; width: 100%; }
.win__cell {
  aspect-ratio: 1;
  background: var(--paper-2);
  border-radius: 1px;
  transition: background-color 0.28s var(--ease);
}
.win--dark .win__cell { background: var(--void-800); }
.win__cell[data-role='instr'] { background: var(--r-instr); }
.win__cell[data-role='tool'] { background: var(--r-tool); }
.win__cell[data-role='know'] { background: var(--r-know); }
.win__cell[data-role='hist'] { background: var(--r-hist); }
.win__cell[data-role='noise'] { background: var(--r-noise); }
.win--dark .win__cell[data-role='instr'] { background: var(--r-instr-d); }
.win--dark .win__cell[data-role='tool'] { background: var(--r-tool-d); }
.win--dark .win__cell[data-role='know'] { background: var(--r-know-d); }
.win--dark .win__cell[data-role='hist'] { background: var(--r-hist-d); }
.win--dark .win__cell[data-role='noise'] { background: var(--r-noise-d); }

.legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.9rem; }
.legend > span {
  display: inline-flex; align-items: center; gap: 0.42rem;
  font-family: 'Martian Mono', monospace; font-size: 0.58rem; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--ink-400);
}
.stage--void .legend > span { color: var(--mist-dim); }
.legend i { width: 9px; height: 9px; border-radius: 1px; display: block; }
.legend i[data-role='instr'] { background: var(--r-instr); }
.legend i[data-role='tool'] { background: var(--r-tool); }
.legend i[data-role='know'] { background: var(--r-know); }
.legend i[data-role='hist'] { background: var(--r-hist); }
.legend i[data-role='noise'] { background: var(--r-noise); }
.legend i[data-role='free'] { background: var(--paper-2); border: 1px solid var(--rule-strong); }

/* ------------------------------------------------------------------ hero -- */
.pin { position: relative; }
.pin__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; }
.pin--hero { height: 380vh; }

.bench {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 76% 8%, rgba(216, 160, 42, 0.13), transparent 62%),
    radial-gradient(100% 70% at 8% 100%, rgba(74, 118, 216, 0.08), transparent 66%),
    var(--paper-0);
}
.bench::after {
  content: ''; position: absolute; inset: 0; opacity: 0.6;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 18%, transparent 76%);
}

.hero {
  position: relative; z-index: 2; align-self: center;
  width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
}
.hero h1 { font-size: var(--s-4); font-weight: 700; letter-spacing: -0.038em; line-height: 0.9; }
.hero h1 b { display: block; color: var(--r-tool-t); font-weight: 700; }
.hero__lede { margin-top: 1.3rem; font-size: var(--s-1); line-height: 1.45; color: var(--ink-600); max-width: 36ch; }
.hero__by {
  margin-top: 1.5rem; font-family: 'Martian Mono', monospace; font-size: 0.62rem;
  letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink-400);
}

.rig { position: relative; }
.rig__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: 'Martian Mono', monospace; font-size: 0.58rem; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--ink-400); margin-bottom: 0.55rem;
}
.rig__head b { font-size: 0.68rem; color: var(--ink-900); font-weight: 600; letter-spacing: -0.03em; }
.rig__win { padding: 0.5rem; background: var(--paper-1); border: 1px solid var(--rule-strong); border-radius: 3px; }
.rig__read {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 0.75rem;
  background: var(--rule); border: 1px solid var(--rule);
}
.rig__read > div { background: var(--paper-0); padding: 0.6rem 0.75rem; }
.rig__read dt {
  font-family: 'Martian Mono', monospace; font-size: 0.53rem; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--ink-400);
}
.rig__read dd {
  margin: 0.2rem 0 0; font-family: 'Martian Mono', monospace; font-weight: 600;
  font-size: clamp(0.92rem, 1.9vw, 1.3rem); letter-spacing: -0.06em; color: var(--ink-900);
}
.rig__read dd.over { color: var(--r-tool-t); }

.hero-stats {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  bottom: clamp(1.4rem, 4vh, 3rem);
  width: min(100% - var(--gutter) * 2, var(--shell) - var(--gutter) * 2);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule);
  border-block: 1px solid var(--rule); opacity: 0; transition: opacity 0.6s var(--ease);
}
.hero-stats.on { opacity: 1; }
.hero-stats > div { background: var(--paper-0); padding: 0.85rem 1rem; }
.hero-stats dt { font-family: 'Martian Mono', monospace; font-size: 0.53rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-400); }
.hero-stats dd { margin: 0.2rem 0 0; font-family: 'Excon', sans-serif; font-size: clamp(1.2rem, 2.8vw, 2rem); font-weight: 700; letter-spacing: -0.03em; color: var(--r-tool-t); }
.hero-stats dd small { display: block; font-family: 'Synonym', sans-serif; font-size: 0.68rem; font-weight: 400; letter-spacing: 0; color: var(--ink-400); margin-top: 0.15rem; line-height: 1.35; }

.scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 0.9rem; transform: translateX(-50%);
  font-family: 'Martian Mono', monospace; font-size: 0.56rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink-400); transition: opacity 0.4s;
}
.scroll-cue.off { opacity: 0; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 1.1rem; align-content: center; padding-top: 3.2rem; padding-bottom: 8.5rem; }
  .hero__lede { margin-top: 0.85rem; font-size: 1rem; }
  .hero__by { margin-top: 0.9rem; }
  .hero__read { display: none; }
  .rig__win { padding: 0.3rem; }
  .hero-stats { bottom: 0.9rem; }
  .hero-stats > div { padding: 0.5rem 0.55rem; }
  .hero-stats dt { font-size: 0.46rem; line-height: 1.3; }
  .hero-stats dd { font-size: 0.98rem; line-height: 1.2; }
  .hero-stats dd small { display: none; }
  .scroll-cue { display: none; }
  .pin--hero { height: 300vh; }
}

/* -------------------------------------------------------------- anatomy -- */
.anat { display: grid; grid-template-columns: 1fr; border: 1px solid var(--rule-strong); background: var(--paper-1); }
.anat__row {
  display: grid; grid-template-columns: 9.5rem 1fr; align-items: center; gap: 0.9rem;
  padding: 0.72rem clamp(0.7rem, 2vw, 1.1rem);
  border-bottom: 1px solid var(--rule);
  opacity: 0.32; transition: opacity 0.5s var(--ease);
}
.anat__row:last-child { border-bottom: 0; }
.anat__row.on { opacity: 1; }
.anat__name {
  font-family: 'Martian Mono', monospace; font-size: 0.6rem; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--ink-900); display: flex; align-items: center; gap: 0.45rem;
}
.anat__name i { width: 9px; height: 9px; border-radius: 1px; flex: none; }
.anat__what { font-size: var(--s--1); line-height: 1.52; color: var(--ink-600); }
.anat__what b { color: var(--ink-900); font-weight: 600; }
@media (max-width: 620px) { .anat__row { grid-template-columns: 1fr; gap: 0.25rem; } }

/* ---------------------------------------------------------------- charts -- */
.bars { display: grid; gap: 0.5rem; }
.brow { display: grid; grid-template-columns: minmax(6.5rem, 11.5rem) 1fr auto; gap: 0.8rem; align-items: center; }
.brow__name { font-family: 'Martian Mono', monospace; font-size: 0.6rem; letter-spacing: -0.04em; color: var(--ink-600); }
.stage--void .brow__name { color: var(--mist); }
.brow__track { position: relative; height: 1.6rem; background: var(--paper-2); border-radius: 2px; overflow: hidden; }
.stage--void .brow__track { background: var(--void-800); }
.brow__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--r-hist); transition: width 1.1s var(--ease); border-radius: 2px; }
.brow.on .brow__fill { width: var(--w); }
.brow[data-tone='bad'] .brow__fill { background: var(--r-tool); }
.brow[data-tone='good'] .brow__fill { background: var(--r-know); }
.brow[data-tone='base'] .brow__fill { background: var(--r-noise); }
.brow__val {
  min-width: 4.6rem; text-align: right;
  font-family: 'Martian Mono', monospace; font-size: 0.64rem; font-weight: 600; letter-spacing: -0.05em;
  color: var(--ink-900);
}
.stage--void .brow__val { color: var(--bone); }
.chart-switch { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.1rem; }
.chart-switch button {
  font-family: 'Martian Mono', monospace; font-size: 0.58rem; letter-spacing: -0.03em;
  padding: 0.45rem 0.72rem; border-radius: 999px; cursor: pointer; min-height: 34px;
  background: transparent; color: var(--ink-400); border: 1px solid var(--rule-strong);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.stage--void .chart-switch button { color: var(--mist-dim); border-color: var(--rule-d-strong); }
.chart-switch button[aria-selected='true'] { background: var(--ink-900); color: var(--paper-0); border-color: var(--ink-900); }
.stage--void .chart-switch button[aria-selected='true'] { background: var(--bone); color: var(--void-950); border-color: var(--bone); }
.chart-key { margin-top: 1rem; font-size: var(--s--1); line-height: 1.55; color: var(--ink-400); max-width: 62ch; }
.stage--void .chart-key { color: var(--mist-dim); }

.ucurve { width: 100%; height: auto; display: block; }
.ucurve .axis { stroke: var(--rule-d-strong); stroke-width: 1; }
.ucurve .curve {
  fill: none; stroke: var(--r-instr-d); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 620; stroke-dashoffset: 620; transition: stroke-dashoffset 1.9s var(--ease);
}
.ucurve.on .curve { stroke-dashoffset: 0; }
.ucurve text { font-family: 'Martian Mono', monospace; font-size: 9px; letter-spacing: -0.05em; fill: var(--mist-dim); }
.ucurve .dot { fill: var(--r-instr-d); opacity: 0; transition: opacity 0.5s var(--ease) 1.5s; }
.ucurve.on .dot { opacity: 1; }

/* ------------------------------------------------------------------ tabs -- */
.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.15rem; }
.tabs button {
  font-family: 'Martian Mono', monospace; font-size: 0.6rem; letter-spacing: -0.03em;
  padding: 0.52rem 0.8rem; border-radius: 3px; cursor: pointer; min-height: 36px;
  background: transparent; color: var(--ink-400); border: 1px solid var(--rule-strong);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.tabs button[aria-selected='true'] { background: var(--ink-900); color: var(--paper-0); border-color: var(--ink-900); }
.panes { position: relative; }
.pane { display: none; }
.pane.on { display: block; }
.pane__grid { display: grid; grid-template-columns: 0.74fr 1.26fr; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start; }
.pane__win { padding: 0.45rem; background: var(--paper-1); border: 1px solid var(--rule-strong); border-radius: 3px; }
.pane__body h3 { margin-bottom: 0.55rem; }
.pane__body { color: var(--ink-600); }
.pane__body p { font-size: var(--s-0); line-height: 1.62; }
.pane__body .pane__src { margin-top: 1.1rem; font-family: 'Martian Mono', monospace; font-size: 0.68rem; line-height: 1.55; letter-spacing: -0.04em; color: var(--ink-400); }
.pane__cap { margin: 0.7rem 0 0; font-family: 'Martian Mono', monospace; font-size: 0.64rem; letter-spacing: -0.05em; color: var(--ink-400); }
.pane__src a { text-underline-offset: 3px; }
@media (max-width: 900px) { .pane__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- packer -- */
.packer { display: grid; grid-template-columns: 1.22fr 0.78fr; gap: clamp(1.4rem, 3.5vw, 3rem); align-items: start; }
.pack { border: 1px solid var(--rule-strong); background: var(--paper-1); }
.pack__row { display: grid; grid-template-columns: 1fr auto; gap: 0.8rem; align-items: center; padding: 0.66rem 0.85rem; border-bottom: 1px solid var(--rule); }
.pack__row:last-child { border-bottom: 0; }
.pack__label { min-width: 0; }
.pack__name { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.95rem; color: var(--ink-900); }
.pack__name i { width: 9px; height: 9px; border-radius: 1px; flex: none; }
.pack__src { font-family: 'Martian Mono', monospace; font-size: 0.55rem; letter-spacing: -0.05em; color: var(--ink-400); margin-top: 0.14rem; overflow-wrap: anywhere; }
.pack__toggle {
  display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule-strong);
  border-radius: 999px; overflow: hidden; flex: none;
}
.pack__toggle button {
  font-family: 'Martian Mono', monospace; font-size: 0.55rem; letter-spacing: -0.04em;
  padding: 0.45rem 0.62rem; min-height: 36px; cursor: pointer; border: 0; background: transparent;
  color: var(--ink-400); white-space: nowrap; transition: background-color 0.2s, color 0.2s;
}
.pack__toggle button[data-mode='all'][aria-pressed='true'] { background: var(--r-tool-t); color: var(--paper-1); }
.pack__toggle button[data-mode='cut'][aria-pressed='true'] { background: var(--r-know-t); color: var(--paper-1); }

.gauge { position: sticky; top: 5rem; }
.gauge__win { padding: 0.45rem; background: var(--paper-1); border: 1px solid var(--rule-strong); border-radius: 3px; }
.gauge__read { display: grid; gap: 1px; margin-top: 0.8rem; background: var(--rule); border: 1px solid var(--rule); }
.gauge__read > div { background: var(--paper-0); padding: 0.62rem 0.8rem; display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.gauge__read dt { font-family: 'Martian Mono', monospace; font-size: 0.54rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-400); }
.gauge__read dd { margin: 0; font-family: 'Martian Mono', monospace; font-weight: 600; font-size: 0.9rem; letter-spacing: -0.06em; color: var(--ink-900); }
.gauge__read dd.over { color: var(--r-tool-t); }
.gauge__actions { display: flex; gap: 0.4rem; margin-top: 0.8rem; }
.gauge__actions button {
  flex: 1; font-family: 'Martian Mono', monospace; font-size: 0.56rem; letter-spacing: -0.03em;
  padding: 0.55rem 0.5rem; min-height: 40px; cursor: pointer; border-radius: 3px;
  border: 1px solid var(--rule-strong); background: transparent; color: var(--ink-600);
  transition: background-color 0.2s, color 0.2s;
}
.gauge__actions button:hover { background: var(--paper-2); color: var(--ink-900); }
@media (max-width: 980px) { .packer { grid-template-columns: 1fr; } .gauge { position: static; } }

/* ----------------------------------------------------------------- facts -- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); margin: 0; }
.facts > div { background: var(--paper-0); padding: 1rem 1.1rem; }
.stage--plate .facts > div { background: var(--paper-1); }
.stage--void .facts { background: var(--rule-d); border-color: var(--rule-d); }
.stage--void .facts > div { background: var(--void-900); }
.facts dt { font-family: 'Martian Mono', monospace; font-size: 0.53rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-400); }
.stage--void .facts dt { color: var(--mist-dim); }
.facts dd { margin: 0.3rem 0 0; font-family: 'Excon', sans-serif; font-size: clamp(1.15rem, 2.3vw, 1.75rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink-900); }
.stage--void .facts dd { color: var(--bone); }
.facts dd small { display: block; font-family: 'Synonym', sans-serif; font-size: 0.72rem; font-weight: 400; letter-spacing: 0; color: var(--ink-400); margin-top: 0.2rem; line-height: 1.4; }
.stage--void .facts dd small { color: var(--mist-dim); }
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------- the wires -- */
.wires { display: grid; grid-template-columns: 1fr; border: 1px solid var(--rule-strong); background: var(--paper-1); }
.wire {
  display: grid; grid-template-columns: 9.5rem 1fr auto; gap: 0.9rem; align-items: center;
  padding: 0.64rem clamp(0.7rem, 2vw, 1.05rem); border-bottom: 1px solid var(--rule);
}
.wire:last-child { border-bottom: 0; }
.wire__src { font-family: 'Martian Mono', monospace; font-size: 0.62rem; letter-spacing: -0.04em; color: var(--ink-900); font-weight: 600; }
.wire__what { font-size: var(--s--1); line-height: 1.5; color: var(--ink-600); }
.wire__kind { font-family: 'Martian Mono', monospace; font-size: 0.53rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-400); white-space: nowrap; }
@media (max-width: 760px) { .wire { grid-template-columns: 1fr; gap: 0.2rem; } .wire__kind { display: none; } }

/* ------------------------------------------------------------- the steps -- */
.steps { display: grid; border-left: 1px solid var(--rule-strong); }
.stage--void .steps { border-left-color: var(--rule-d-strong); }
.step { position: relative; padding: 0.9rem 0 0.9rem 1.6rem; opacity: 0.34; transition: opacity 0.5s var(--ease); }
.step.on { opacity: 1; }
.step::before {
  content: ''; position: absolute; left: -4.5px; top: 1.55rem;
  width: 8px; height: 8px; border-radius: 999px; background: var(--paper-0);
  border: 1px solid var(--rule-strong); transition: background-color 0.4s var(--ease), border-color 0.4s;
}
.step.on::before { background: var(--r-tool-t); border-color: var(--r-tool-t); }
.stage--void .step::before { background: var(--void-900); border-color: var(--rule-d-strong); }
.stage--void .step.on::before { background: var(--r-instr-d); border-color: var(--r-instr-d); }
.step__time { font-family: 'Martian Mono', monospace; font-size: 0.56rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-400); }
.stage--void .step__time { color: var(--mist-dim); }
.step h3 { margin: 0.2rem 0 0.35rem; font-size: 1.05rem; }
.step p { font-size: var(--s--1); line-height: 1.6; color: var(--ink-600); margin: 0; max-width: 58ch; }
.stage--void .step p { color: var(--mist); }

/* ----------------------------------------------------------------- cards -- */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.rw { display: block; background: var(--paper-1); padding: 1.15rem 1.2rem 1.25rem; text-decoration: none; color: inherit; transition: background-color 0.25s var(--ease); }
.rw:hover { background: var(--paper-0); }
.rw__co { margin: 0; font-family: 'Excon', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.025em; color: var(--ink-900); }
.rw__what { margin: 0.1rem 0 0; font-family: 'Martian Mono', monospace; font-size: 0.54rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-400); }
.rw__num { margin: 0.7rem 0 0.5rem; font-family: 'Excon', sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.03em; color: var(--r-tool-t); }
.rw__body { margin: 0; font-size: var(--s--1); line-height: 1.55; color: var(--ink-600); }
.rw__src { margin: 0.8rem 0 0; font-family: 'Martian Mono', monospace; font-size: 0.54rem; letter-spacing: -0.04em; color: var(--ink-400); }

.callout { background: var(--paper-1); border: 1px solid var(--rule-strong); padding: 1.15rem 1.3rem; }
.callout h3 { margin-bottom: 0.5rem; }
.callout p { font-size: var(--s--1); line-height: 1.6; color: var(--ink-600); }
.stage--void .callout { background: var(--void-800); border-color: var(--rule-d-strong); }

.linkout {
  display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none;
  font-family: 'Martian Mono', monospace; font-size: 0.66rem; letter-spacing: -0.03em;
  color: var(--ink-900); border-bottom: 1px solid var(--rule-strong); padding-bottom: 0.28rem;
  min-height: 34px;
}
.stage--void .linkout { color: var(--bone); border-bottom-color: var(--rule-d-strong); }
.linkout svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.linkout:hover svg { transform: translate(2px, -2px); }

/* ----------------------------------------------------------------- foot -- */
.foot__row { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; }
.foot__row a { font-family: 'Martian Mono', monospace; font-size: 0.64rem; letter-spacing: -0.03em; color: var(--ink-600); text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: 0.22rem; min-height: 32px; }
.foot__row a:hover { color: var(--ink-900); }
.foot__meta { font-family: 'Martian Mono', monospace; font-size: 0.58rem; letter-spacing: -0.03em; color: var(--ink-400); }

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .win__cell, .brow__fill, .anat__row, .step, .ucurve .curve, .ucurve .dot, .hero-stats { transition: none; }
}
.no-motion .pin__stage { position: relative; height: auto; overflow: visible; padding-block: var(--pad); }
.no-motion .pin--hero { height: auto; }
.no-motion .hero-stats { position: static; transform: none; opacity: 1; margin: 2.4rem auto 0; }
.no-motion .scroll-cue { display: none; }