.iso{
  --anatomy-page:#0b0b0b;--anatomy-card:#131313;--anatomy-text:#a3a3a3;--anatomy-strong:#e6e6e6;--anatomy-muted:#6e6e6e;
  --anatomy-paper:#131313;--anatomy-face:#1b1b1b;--anatomy-top:#1c1c1c;
  --anatomy-shade-0:#0f0f0f;--anatomy-shade-1:#121212;--anatomy-shade-2:#151515;--anatomy-shade-3:#181818;
  --anatomy-lit-top:#262626;--anatomy-lit-shade:#1d1d1d;
  --anatomy-hi:#d4d4d4;--anatomy-mid:#6a6a6a;--anatomy-lo:#3e3e3e;--anatomy-faint:#2a2a2a;--anatomy-lit:#ffffff;
  --anatomy-halo:#050505;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e6e6;
  --anatomy-red:#ff6b6b;--anatomy-green:#6be0a0;--anatomy-blue:#6b9bff;
  --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1);
  --anatomy-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --anatomy-lift:inset 0 1px 0 0 #ffffff0a,inset 0 0 0 1px #ffffff06,0 0 0 1px #00000026,0 1px 1px -.5px #00000014,0 3px 3px -1.5px #00000014,0 6px 6px -3px #00000014,0 12px 12px -6px #00000014;
}
.iso[data-theme="light"]{
  --anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;
  --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;
  --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb;
  --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000;
  --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;
  --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd;
  --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
}
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
@keyframes iso-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
.iso-figure{margin:32px 0 36px}
.iso-plate{position:relative;padding:52px 24px;border-radius:0;background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-mid);--anatomy-paper:var(--anatomy-card)}
.iso-plate-corners{position:absolute;inset:18px 20px;pointer-events:none}
.iso-plate-corner{position:absolute;color:var(--anatomy-muted);font-family:var(--anatomy-mono);font-size:10.5px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.iso-plate-corner[data-corner="fig"]{top:0;left:0;color:var(--anatomy-text)}
.iso-plate-corner[data-corner="title"]{top:0;right:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="hint"]{bottom:0;left:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="readout"]{right:0;bottom:0;color:var(--anatomy-text);font-variant-numeric:tabular-nums}
.iso-plate .iso-svg{margin:0 auto}
.iso-legend{display:grid;gap:8px;margin-top:12px;color:var(--anatomy-muted);font-size:13px;line-height:1.55}
.iso-keys{display:flex;flex-wrap:wrap;gap:6px 18px}
.iso-key{display:inline-flex;align-items:center;gap:7px}
.iso-swatch{width:16px;height:10px;flex:none;overflow:visible}
.iso-swatch path{fill:none;stroke:var(--anatomy-hi);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.iso-swatch[data-mark="raised"] path,.iso-swatch[data-mark="flat"] path{stroke:var(--anatomy-mid)}
.iso-swatch[data-mark="lit"] path{stroke:var(--anatomy-lit)}
.iso-swatch[data-mark="dim"] path{stroke:var(--anatomy-lo)}
.iso-swatch[data-mark="dotted"] path{stroke-dasharray:.01 3;stroke-width:1.4}
.iso-swatch[data-mark="dashed"] path{stroke-dasharray:3 2.5}
.iso-swatch[data-mark="red"] path{stroke:var(--anatomy-red)}
.iso-swatch[data-mark="green"] path{stroke:var(--anatomy-green)}
.iso-swatch[data-mark="blue"] path{stroke:var(--anatomy-blue)}
.iso-swatch-crease{stroke:var(--anatomy-lo)!important}
@media (max-width:560px){.iso-plate{padding:48px 12px 70px}.iso-plate-corner[data-corner="hint"]{bottom:18px}}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}

/* anatomy of data — site styles. The anatomy kit's ISO_CSS is prepended at build time. */
@font-face { font-family: "Geist Serif"; src: url("fonts/GeistSerifVF.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Pixel"; src: url("fonts/GeistPixel-Square.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #fbfbfd;
  --plate: #fdfdff;
  --ink: #15161a;
  --muted: #6a6e7a;
  --blue: #2340f2;
  --blue-2: #8197ff;
  --blue-3: #c6d0ff;
  --blue-4: #eef1ff;
  --dot: #c9cfe6;
  --mark: #fff1a8;
  --serif: "Geist Serif", Georgia, serif;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --pixel: "Geist Pixel", "Geist Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0e16; --plate: #10131d; --ink: #e6e8f0; --muted: #959aab;
    --blue: #7f95ff; --blue-2: #4a5fd6; --blue-3: #26306b; --blue-4: #161b33; --dot: #232842; --mark: #4d4320;
  }
}
:root[data-theme="dark"] {
  --bg: #0c0e16; --plate: #10131d; --ink: #e6e8f0; --muted: #959aab;
  --blue: #7f95ff; --blue-2: #4a5fd6; --blue-3: #26306b; --blue-4: #161b33; --dot: #232842; --mark: #4d4320;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.7 var(--serif); -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* ---- shared chrome ---- */
.masthead { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; max-width: 1440px; margin: 0 auto; padding: 48px 40px 0; }
.wordmark { font: 400 clamp(44px, 7.4vw, 108px)/0.86 var(--pixel); color: var(--blue); text-decoration: none; letter-spacing: 0.01em; }
.tagline { margin: 0 0 6px; text-align: right; font-size: 17px; line-height: 1.6; }
.tagline span { font-weight: 600; }
.dither-rule { max-width: 1440px; margin: 40px auto; padding: 0 40px; display: flex; align-items: center; gap: 18px; }
.dither-rule::before, .dither-rule::after { content: ""; flex: 1; height: 8px; background: radial-gradient(circle, var(--dot) 1.3px, transparent 1.5px) 0 0 / 9px 8px; }
.dither-rule b { font: 400 13px/1 var(--pixel); letter-spacing: 0.08em; color: var(--muted); }
.dither-rule.plain b { display: none; }
.dither-rule.plain::after { display: none; }

/* ---- figures ---- */
.ms-figure { margin: 0; }
.ms-plate {
  position: relative; padding: 28px 36px 14px;
  background: radial-gradient(circle, var(--dot) 0.55px, transparent 0.7px) 0 0 / 4px 4px, var(--plate);
  outline: 1px dotted var(--dot); outline-offset: -1px;
}
.ms-side { position: absolute; writing-mode: vertical-rl; font: 400 11px/1 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.ms-fig { left: 8px; top: 14px; transform: rotate(180deg); }
.ms-name { right: 8px; top: 14px; }
.ms-year { right: 8px; bottom: 14px; }
.ms-stage { outline: none; }
.ms-stage:focus-visible { box-shadow: 0 0 0 2px var(--blue-3); }
.ms-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ms-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 30px; }
.ms-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.ms-controls button { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); background: var(--plate); border: 1px solid var(--blue); border-radius: 2px; padding: 7px 10px; cursor: pointer; }
.ms-controls button:hover { background: var(--blue-4); }
.ms-controls button[aria-pressed="true"] { background: var(--blue); color: var(--plate); }
.ms-readout { font: 400 11px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--blue); text-transform: uppercase; }
.ms-caption { margin: 10px 2px 0; font: 400 14px/1.55 var(--sans); color: var(--muted); }

.ms-figure {
  --anatomy-paper: #fff; --anatomy-face: #fff; --anatomy-top: #fff;
  --anatomy-shade-0: color-mix(in srgb, var(--blue-4) 65%, var(--blue-3)); --anatomy-shade-1: var(--blue-4); --anatomy-shade-2: color-mix(in srgb, var(--blue-4) 55%, #fff); --anatomy-shade-3: color-mix(in srgb, var(--blue-4) 25%, #fff);
  --anatomy-lit-top: var(--blue-3); --anatomy-lit-shade: color-mix(in srgb, var(--blue-3) 55%, var(--blue-2));
  --anatomy-hi: var(--blue); --anatomy-mid: var(--blue); --anatomy-lo: var(--blue-2); --anatomy-faint: var(--blue-3);
  --anatomy-lit: var(--blue); --anatomy-dot: var(--blue); --anatomy-halo: transparent; --anatomy-halo-opacity: 0;
  --anatomy-weight: 0.85px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ms-figure {
    --anatomy-paper: #121726; --anatomy-face: #121726; --anatomy-top: #141a2b;
    --anatomy-shade-0: #0e1220; --anatomy-shade-1: #101424; --anatomy-shade-2: #121728; --anatomy-shade-3: #141a2c;
    --anatomy-lit-shade: #2c3a85;
  }
}
.ms-svg .iso-halo { display: none; }
.ms-label .ms-arrow { stroke: var(--blue); stroke-width: 0.9; fill: none; vector-effect: non-scaling-stroke; }
.ms-label .ms-head { fill: var(--blue); }
.ms-label .ms-text { font: 400 13px var(--pixel); letter-spacing: 0.06em; fill: var(--blue); }
.ms-label { transition: opacity 0.2s; }
.ms-guide, .ms-guides { fill: none; stroke: var(--blue); stroke-width: 0.8; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.ms-fill-white { fill: var(--anatomy-paper); }
.ms-fill-tint { fill: var(--blue-4); }
.ms-fill-blue { fill: var(--blue-2); }
.ms-fill-hole { fill: var(--blue); }
.ms-hole { display: none; }
.ms-hole.on { display: inline; }
.ms-pos { fill: none; stroke: transparent; stroke-width: 1; }
.ms-pos.hover { stroke: var(--blue); stroke-dasharray: 2 2; }
.ms-needle { stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.ms-hub { fill: var(--blue); }
.ms-spring { fill: none; stroke: var(--blue-2); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.through .iso-top, .through .iso-shade, .through .iso-fill { fill: var(--blue-2); }
[data-wire].live .iso-line { stroke: var(--blue); stroke-width: 2; stroke-dasharray: 4 3; animation: ms-flow 0.6s linear infinite; }
@keyframes ms-flow { to { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: reduce) { [data-wire].live .iso-line { animation: none; } }

/* ---- home: a book spread ---- */
.spread { max-width: 1440px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 56px 56px; }
.spread .col { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.spread .wide { grid-column: span 2; }
.spread p { margin: 0; text-align: justify; hyphens: auto; }
.spread p.lead::first-letter { float: left; font: 400 64px/0.8 var(--serif); margin: 6px 8px 0 0; }
.spread p.strong { font-weight: 650; }
.spread .ms-caption { display: none; }
.spread .ms-plate { padding: 22px 30px 10px; }
.cta { display: flex; flex-direction: column; gap: 14px; }
.cta a.btn { align-self: flex-start; font: 500 13px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); padding: 10px 14px; border-radius: 2px; box-shadow: 0 1px 0 var(--ink); }
.cta a.btn:hover { background: var(--blue-4); }

/* table of contents */
.toc { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
.toc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; }
.toc-head h2 { margin: 0; font: 600 30px/1.2 var(--serif); }
.toc-head span { font: 400 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.toc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 56px; }
.toc-part h3 { margin: 0 0 10px; font: 400 13px/1 var(--pixel); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.toc-part ol { list-style: none; margin: 0; padding: 0; }
.toc-part li > a, .toc-part li.soon { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 16px; line-height: 1.45; text-decoration: none; }
.toc-part li .w { flex: none; font: 400 11px/2.1 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.toc-part li > a .t { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
.toc-part li > a:hover .t { color: var(--blue); }
.toc-part li.soon .t { color: var(--muted); }
.progress { margin: 72px auto 0; max-width: 520px; font: 400 13px/1.7 var(--mono); }
.progress .bar { margin: 4px 0 14px; font-size: 18px; color: var(--blue); letter-spacing: 0.04em; }
.progress dl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; margin: 0; }
.progress dl div { display: flex; justify-content: space-between; }
.progress dt { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.progress dd { margin: 0; }

/* ---- chapter ---- */
.topbar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 24px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--blue-4); font: 400 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.topbar a { text-decoration: none; color: var(--muted); }
.topbar b { font-weight: 500; }
.topbar .progressline { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--blue); width: var(--read, 0%); }
.chapter-head { max-width: 760px; margin: 88px auto 40px; padding: 0 24px; text-align: center; }
.chapter-head .meta { font: 400 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.chapter-head h1 { font: 500 clamp(36px, 5vw, 52px)/1.1 var(--serif); letter-spacing: -0.015em; margin: 18px 0 12px; }
.chapter-head .dek { margin: 0 auto; max-width: 560px; font-size: 17px; color: var(--muted); }
.chapter-head .div { display: block; width: 28px; height: 1px; background: var(--ink); margin: 26px auto 0; }
.article { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr minmax(0, 680px) 1fr; column-gap: 40px; }
.article > * { grid-column: 2; }
.article p { margin: 0 0 1.2em; }
.article h2 { font: 600 24px/1.3 var(--serif); margin: 2.2em 0 0.7em; }
.article h2 .num { font: 400 14px var(--pixel); color: var(--blue); margin-right: 10px; letter-spacing: 0.06em; }
.article .fig { grid-column: 1 / -1; margin: 40px 0 48px; }
.article .fig.small { grid-column: 2; }
.term { text-decoration: underline dotted color-mix(in srgb, var(--ink) 55%, transparent); text-underline-offset: 3px; cursor: help; position: relative; }
.term sup { font-size: 0.6em; margin-left: 2px; }
.term:hover { color: var(--blue); }
.term .tip { display: none; position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 280px; padding: 12px 14px; background: var(--plate); border: 1px solid var(--blue); font: 400 14px/1.5 var(--sans); color: var(--ink); text-align: left; box-shadow: 4px 4px 0 var(--blue-4); }
.term .tip b { display: block; font: 400 12px var(--pixel); letter-spacing: 0.06em; color: var(--blue); margin-bottom: 4px; text-transform: uppercase; }
.term:hover .tip, .term:focus .tip { display: block; }
.fact { grid-column: 3; grid-row: span 3; align-self: start; margin: 4px 0 0; padding: 12px 0 0; border-top: 2px solid var(--blue); font: 400 14px/1.55 var(--sans); color: var(--ink); max-width: 240px; }
.fact b { display: block; font: 400 12px var(--pixel); letter-spacing: 0.08em; color: var(--blue); margin-bottom: 6px; }
.tryit { grid-column: 2; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin: 0 0 1.4em; background: var(--blue-4); border-left: 3px solid var(--blue); font: 400 15px/1.55 var(--sans); }
.tryit b { font: 400 12px/1.8 var(--pixel); letter-spacing: 0.08em; color: var(--blue); flex: none; }
.glossary-list { list-style: none; padding: 0; margin: 0; font: 400 15px/1.55 var(--sans); }
.glossary-list li { padding: 10px 0; border-bottom: 1px dotted var(--dot); }
.glossary-list li:target { background: var(--mark); }
.glossary-list b { font-family: var(--serif); font-size: 17px; margin-right: 6px; }
.glossary-list sup { color: var(--blue); }
.sources li { font: 400 14px/1.5 var(--sans); color: var(--muted); }
.pager { max-width: 680px; margin: 72px auto 0; padding: 20px 24px 0; border-top: 1px solid var(--blue-4); display: flex; justify-content: space-between; gap: 24px; font: 400 12px/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.pager a { color: var(--blue); text-decoration: none; }
.foot { padding: 0 0 72px; text-align: center; font: 400 12px/1.8 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.foot p { margin: 0; }
.todo-plate { min-height: 220px; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle, var(--dot) 0.55px, transparent 0.7px) 0 0 / 4px 4px, var(--plate); outline: 1px dotted var(--dot); font: 400 12px var(--pixel); letter-spacing: 0.08em; color: var(--blue); }

@media (max-width: 1100px) {
  .spread { grid-template-columns: 1fr 1fr; }
  .spread .wide { grid-column: 1 / -1; order: -1; }
  .article { grid-template-columns: minmax(0, 680px); justify-content: center; }
  .article > *, .article .fig, .article .fig.small, .fact, .tryit { grid-column: 1; }
  .fact { max-width: none; margin: 0 0 1.4em; padding: 12px 0; border-bottom: 1px solid var(--blue-4); }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .masthead { flex-direction: column; align-items: flex-start; padding: 28px 16px 0; gap: 16px; }
  .tagline { text-align: left; font-size: 15px; }
  .dither-rule, .spread, .toc { padding-left: 16px; padding-right: 16px; }
  .spread { grid-template-columns: 1fr; gap: 32px; }
  .spread p { text-align: left; }
  .toc-grid { grid-template-columns: 1fr; }
  .progress dl { grid-template-columns: 1fr; }
  .ms-plate { padding: 22px 18px 10px; }
  .article { padding: 0 16px; }
  .term .tip { left: 0; transform: none; width: min(280px, 80vw); }
  .topbar span.part { display: none; }
}
.ghost .iso-fill, .ghost .iso-top, .ghost .iso-shade { fill-opacity: 0.18; }
.ghost .iso-solid { transition: fill-opacity 0.3s; }
.ms-cell { fill: none; stroke: var(--blue-2); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.ms-cell.lit { fill: var(--blue); stroke: var(--blue); }
.ms-pos-dot { fill: none; stroke: var(--blue-3); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.ms-col-guide { fill: none; stroke: var(--blue-2); stroke-width: 0.8; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: 0.35; }
.ms-col-guide.on { stroke: var(--blue); opacity: 1; }
.ms-fill-hole.pick { fill: var(--blue); stroke: var(--blue); stroke-width: 3; vector-effect: non-scaling-stroke; }
.spread-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 8px; }
.cta .note { font: 400 14px/1.5 var(--sans); color: var(--muted); }
.progressline { width: var(--read, 0%); }
@media (max-width: 720px) { .spread-split { grid-template-columns: 1fr; gap: 32px; } }
.spread > .col:first-child .ms-label, .spread-split .ms-label { display: none; }
.spread > .col:first-child .ms-bar, .spread-split .ms-bar { font-size: 10px; }
.wordmark { white-space: nowrap; font-size: clamp(34px, 6.2vw, 96px); }
.tagline { text-wrap: balance; max-width: 460px; }
@media (max-width: 720px) { .wordmark { font-size: clamp(30px, 10.5vw, 60px); } }
@media (max-width: 720px) {
  .spread .wide { order: 0; }
  .ms-label .ms-text { font-size: 22px; }
}

/* ---- figure colours: Making Software's pastel inks, one hue per kind of part ---- */
:root {
  --coral: #ef4d52; --coral-2: #ffb3ad; --coral-3: #ffe3e0;
  --violet: #9a4fd6; --violet-2: #dcb8f7; --violet-3: #f4e9fd;
  --teal: #0c9a8a; --teal-2: #9fe6da; --teal-3: #def7f2;
  --amber: #cf8700; --amber-2: #ffd77a; --amber-3: #fff3d1;
  --sky: #1597e5; --sky-2: #a8dcff; --sky-3: #e3f4ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --coral: #ff8a8a; --coral-2: #7a2f33; --coral-3: #2b1719;
    --violet: #c99af2; --violet-2: #553078; --violet-3: #21172d;
    --teal: #5ad8c6; --teal-2: #1d5c54; --teal-3: #12241f;
    --amber: #ffc95a; --amber-2: #6b4c10; --amber-3: #2a210d;
    --sky: #7cc9ff; --sky-2: #1f4f72; --sky-3: #111f2b;
  }
}
.c-coral, .c-violet, .c-teal, .c-amber, .c-sky {
  --anatomy-hi: var(--hue); --anatomy-mid: var(--hue); --anatomy-lo: var(--hue-2); --anatomy-faint: var(--hue-2); --anatomy-dot: var(--hue);
  --anatomy-paper: var(--hue-3); --anatomy-face: var(--hue-3); --anatomy-top: var(--hue-3);
  --anatomy-shade-0: color-mix(in srgb, var(--hue-2) 60%, var(--hue-3)); --anatomy-shade-1: color-mix(in srgb, var(--hue-2) 42%, var(--hue-3)); --anatomy-shade-2: color-mix(in srgb, var(--hue-2) 26%, var(--hue-3)); --anatomy-shade-3: color-mix(in srgb, var(--hue-2) 12%, var(--hue-3));
  --anatomy-lit-top: var(--hue-2); --anatomy-lit-shade: color-mix(in srgb, var(--hue) 45%, var(--hue-2)); --anatomy-lit: var(--hue);
}
.c-coral { --hue: var(--coral); --hue-2: var(--coral-2); --hue-3: var(--coral-3); }
.c-violet { --hue: var(--violet); --hue-2: var(--violet-2); --hue-3: var(--violet-3); }
.c-teal { --hue: var(--teal); --hue-2: var(--teal-2); --hue-3: var(--teal-3); }
.c-amber { --hue: var(--amber); --hue-2: var(--amber-2); --hue-3: var(--amber-3); }
.c-sky { --hue: var(--sky); --hue-2: var(--sky-2); --hue-3: var(--sky-3); }
.ms-fill-white { fill: var(--plate); }
.ms-fill-deep { fill: var(--hue-2, var(--blue-3)); }
.ms-fill-merc { fill: var(--sky-2); }
.ms-fill-merc-wired { fill: var(--teal); }
.ms-coil { fill: none; stroke: var(--coral); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.through .iso-top, .through .iso-shade, .through .iso-fill { fill: var(--coral); }
[data-wire].live .iso-line { stroke: var(--coral); }
.ms-label[data-label="magnet"] .ms-text, .ms-label[data-label="pins"] .ms-text { fill: var(--coral); }
.ms-fill-band { fill: var(--hue-3, var(--blue-4)); }
.ms-cell.lit { fill: var(--coral); stroke: var(--coral); }
.ms-col-guide.on { stroke: var(--coral); }
.ms-fill-hole.pick { fill: var(--coral); stroke: var(--coral); }
.c-amber .ms-fill-hole, [data-layer="card"] .ms-fill-hole { fill: var(--blue); }
img.cap { float: left; width: 112px; height: 112px; margin: 6px 14px 4px 0; shape-outside: margin-box; }
.spread p.has-cap::first-letter { float: none; font: inherit; margin: 0; }
.spread p.has-cap img.cap { width: 96px; height: 96px; }
@media (max-width: 720px) { img.cap { width: 84px; height: 84px; } }

/* ======================================================================
   Chapter figure style (after Making Software's chapter plates):
   black ink, flat material colours, white panel. Home-page figures stay
   blue line art on the dithered plate (see .spread overrides below).
   ====================================================================== */
:root {
  --ink: #1d1d1f; --ink-2: #6b6b70; --ink-3: #c9c9cd;
  --panel: #ffffff;
  --red: #e5484d; --red-glow: rgba(229, 72, 77, 0.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #ecebe7; --ink-2: #9a9a9f; --ink-3: #3d3d42; --panel: #15161a; }
}
.chapter-page:not(.tinted) .ms-plate { background: var(--panel); outline: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); padding: 28px 40px 14px; }
.chapter-page:not(.tinted) .ms-figure, .ms-ink {
  --anatomy-hi: var(--ink); --anatomy-mid: var(--ink); --anatomy-lo: var(--ink-2); --anatomy-faint: var(--ink-3); --anatomy-dot: var(--ink); --anatomy-lit: var(--ink);
  --anatomy-paper: #ffffff; --anatomy-face: #ffffff; --anatomy-top: #ffffff;
  --anatomy-shade-0: #d9d9dc; --anatomy-shade-1: #e3e3e6; --anatomy-shade-2: #ececee; --anatomy-shade-3: #f5f5f6;
  --anatomy-weight: 1px;
}
.chapter-page:not(.tinted) .ms-label .ms-text { fill: var(--ink); }
.chapter-page:not(.tinted) .ms-label .ms-arrow { stroke: var(--ink); }
.chapter-page:not(.tinted) .ms-label .ms-head { display: none; }
.chapter-page:not(.tinted) .ms-guide, .chapter-page:not(.tinted) .ms-guides { stroke: var(--red); stroke-dasharray: 4 4; }
.chapter-page:not(.tinted) .ms-side { color: var(--ink-2); }
.chapter-page:not(.tinted) .ms-controls button { color: var(--ink); border-color: var(--ink); background: var(--panel); }
.chapter-page:not(.tinted) .ms-controls button:hover { background: #f2f2f3; }
.chapter-page:not(.tinted) .ms-controls button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.chapter-page:not(.tinted) .ms-readout { color: var(--ink); }
.chapter-page:not(.tinted) .ms-label[data-label] .ms-text { fill: var(--ink); }

/* materials: a light top and two darker sides, as flat fills */
.m-metal, .m-manila, .m-brass, .m-silver, .m-wood, .m-copper, .m-red, .m-yellow, .m-mint, .m-lavender, .m-pink, .m-sky, .m-chip {
  --anatomy-paper: var(--top); --anatomy-face: var(--top); --anatomy-top: var(--top);
  --anatomy-shade-0: var(--side-2); --anatomy-shade-1: var(--side-2); --anatomy-shade-2: var(--side); --anatomy-shade-3: var(--side);
  --anatomy-lit-top: var(--top); --anatomy-lit-shade: var(--side);
}
.m-metal { --top: #ececee; --side: #d3d3d7; --side-2: #b9b9be; }
.m-manila { --top: #f6e7bd; --side: #ead28c; --side-2: #d9bb67; }
.m-brass { --top: #f2cf5b; --side: #e2b52a; --side-2: #c4961a; }
.m-silver { --top: #e8ecf1; --side: #c7cdd6; --side-2: #a9b1bd; }
.m-wood { --top: #f7d3a8; --side: #eab77d; --side-2: #d89a5a; }
.m-copper { --top: #f8b46a; --side: #ea9445; --side-2: #cf7a2e; }
.m-red { --top: #ff8f8f; --side: #e5484d; --side-2: #c2343a; }
.m-yellow { --top: #fbe98a; --side: #f2d64f; --side-2: #dcbc2c; }
.m-mint { --top: #a8ebc8; --side: #7fd6a8; --side-2: #5ebf8d; }
.m-lavender { --top: #e6d2f8; --side: #d1b2ef; --side-2: #b994e0; }
.m-pink { --top: #f7c4c4; --side: #f1a3a3; --side-2: #e28585; }
.m-sky { --top: #bfe3fa; --side: #93cdf2; --side-2: #6db7e6; }
.m-chip { --top: #4a4a50; --side: #3a3a3f; --side-2: #2c2c30; }
.chapter-page:not(.tinted) .ms-fill-merc, .chapter-page:not(.tinted) .ms-fill-merc-wired { fill: #cfd5dd; }
.chapter-page:not(.tinted) .ms-fill-merc-wired { fill: #aab3bf; }
.chapter-page:not(.tinted) .ms-fill-hole { fill: #3a3a3f; }
.chapter-page:not(.tinted) .ms-fill-white { fill: #ffffff; }
.chapter-page:not(.tinted) .ms-fill-band { fill: var(--top, #f4f4f5); }
.chapter-page:not(.tinted) .ms-needle { stroke: var(--ink); }
.chapter-page:not(.tinted) .ms-hub { fill: var(--ink); }
.chapter-page:not(.tinted) .ms-spring { stroke: var(--ink-2); }
.chapter-page:not(.tinted) .ms-coil { stroke: #b8661f; }
.chapter-page:not(.tinted) .ms-cell { stroke: var(--ink-3); }
.chapter-page:not(.tinted) .ms-cell.lit { fill: var(--red); stroke: var(--red); }
.chapter-page:not(.tinted) .ms-pos-dot { stroke: #c9b06a; }
.chapter-page:not(.tinted) .ms-col-guide { stroke: var(--ink-2); }
.chapter-page:not(.tinted) .ms-col-guide.on { stroke: var(--red); }
.chapter-page:not(.tinted) .ms-fill-hole.pick { fill: var(--red); stroke: var(--red); }
.chapter-page:not(.tinted) .through .iso-top, .chapter-page:not(.tinted) .through .iso-shade, .chapter-page:not(.tinted) .through .iso-fill { fill: var(--red); }
.chapter-page:not(.tinted) .through { filter: drop-shadow(0 0 3px var(--red-glow)); }
.chapter-page:not(.tinted) [data-wire].live .iso-line { stroke: var(--red); filter: drop-shadow(0 0 2px var(--red-glow)); }
.chapter-page:not(.tinted) .ms-label[data-label="magnet"] .ms-text, .chapter-page:not(.tinted) .ms-label[data-label="pins"] .ms-text { fill: var(--ink); }

/* home page: every material collapses back to blue line art on the dither plate */
:is(.spread, .tinted) .ms-figure [class^="m-"], :is(.spread, .tinted) .ms-figure [class*=" m-"] {
  --top: #ffffff; --side: var(--blue-4); --side-2: color-mix(in srgb, var(--blue-4) 45%, var(--blue-3));
}
:is(.spread, .tinted) .ms-figure .m-manila, :is(.spread, .tinted) .ms-figure .m-red { --top: var(--blue-3); --side: color-mix(in srgb, var(--blue-3) 55%, var(--blue-2)); --side-2: color-mix(in srgb, var(--blue-3) 25%, var(--blue-2)); }
:is(.spread, .tinted) .ms-figure .m-brass, :is(.spread, .tinted) .ms-figure .m-copper { --top: var(--blue-4); --side: var(--blue-3); --side-2: var(--blue-2); }

/* ---- sectional drawings (FIG_003) ---- */
.sx-cut { fill: url(#sx-hatch) var(--anatomy-shade-3); fill: #e4e4e7; stroke: var(--ink, #1d1d1f); stroke-width: 1.2; }
.sx-hatch-line { stroke: #9a9aa0; stroke-width: 1; }
.sx-merc { fill: #cfd5dd; stroke: var(--ink, #1d1d1f); stroke-width: 1.2; }
.sx-card { fill: #f6e7bd; stroke: var(--ink, #1d1d1f); stroke-width: 1.2; }
.sx-box { fill: #ececee; stroke: var(--ink, #1d1d1f); stroke-width: 1.2; }
.sx-box-cut { fill: url(#sx-hatch); stroke: none; }
.sx-bore { fill: #ffffff; stroke: var(--ink, #1d1d1f); stroke-width: 1; }
.sx-spring { fill: none; stroke: #6b6b70; stroke-width: 1.3; stroke-linejoin: round; }
.sx-pin { fill: #f2cf5b; stroke: var(--ink, #1d1d1f); stroke-width: 1.2; }
.sx-pin.on { fill: #ff8f8f; stroke: var(--red); filter: url(#sx-glow); }
.sx-collar { fill: #e2b52a; stroke: var(--ink, #1d1d1f); stroke-width: 1.2; }
.sx-wire { fill: none; stroke: var(--ink, #1d1d1f); stroke-width: 2.2; }
.sx-wire.on { stroke: var(--red); filter: url(#sx-glow); }
.sx-current { fill: none; stroke: transparent; stroke-width: 2.2; stroke-dasharray: 3 9; }
.sx-current.on { stroke: #fff; animation: ms-flow 0.5s linear infinite; }
.sx-dial { fill: #ffffff; stroke: var(--ink, #1d1d1f); stroke-width: 1.4; }
.sx-tick { stroke: var(--ink, #1d1d1f); stroke-width: 1.2; }
.sx-needle { stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; }
.sx-hub { fill: var(--ink, #1d1d1f); }
.sx-cap { font: 400 13px var(--pixel); letter-spacing: 0.08em; fill: var(--ink, #1d1d1f); }
.sx-state { font: 400 12px var(--mono); letter-spacing: 0.06em; fill: var(--ink-2, #6b6b70); }
.sx-state.on { fill: var(--red); }
.sx-cut { fill: url(#sx-hatch); }
.ms-figure[data-fig="section"] .ms-svg { background: transparent; }
.ms-figure[data-fig="section"] .sx-cut { fill: url(#sx-hatch); }
.chapter-page:not(.tinted) .ms-fill-deep { fill: #4a4a50; }
:is(.spread, .tinted) .ms-label .ms-text { fill: var(--blue); }
:is(.spread, .tinted) .ms-coil { stroke: var(--blue); }
:is(.spread, .tinted) .ms-fill-merc { fill: var(--blue-4); }
:is(.spread, .tinted) .ms-fill-merc-wired, :is(.spread, .tinted) .ms-fill-deep { fill: var(--blue-3); }
:is(.spread, .tinted) .ms-fill-hole.pick { fill: var(--blue); stroke: var(--blue); }
:is(.spread, .tinted) .ms-col-guide.on { stroke: var(--blue); }

/* ---- phone markers and legend ---- */
.ms-num { display: none; }
.ms-num-in { transform: scale(var(--k, 1)); }
.ms-num circle { fill: var(--ink, #1d1d1f); }
.ms-num text { font: 600 9px var(--mono); fill: #fff; }
:is(.spread, .tinted) .ms-num circle { fill: var(--blue); }
.ms-legend { display: none; }
@media (max-width: 720px) {
  .ms-label .ms-text, .ms-label .ms-arrow, .ms-label .ms-head { display: none; }
  .ms-num { display: inline; }
  .ms-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dotted var(--ink-3, #ccc); list-style: none; counter-reset: part; font: 400 11px/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink, #1d1d1f); }
  .ms-legend li { counter-increment: part; display: flex; gap: 8px; align-items: baseline; }
  .ms-legend li::before { content: counter(part); flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ink, #1d1d1f); color: #fff; font-size: 9px; display: grid; place-items: center; }
  .spread .ms-legend { display: none; }
  .ms-plate .ms-side.ms-name, .ms-plate .ms-side.ms-year { display: none; }
}

/* ---- numbered steps ---- */
.ms-steps { margin: 6px 0 10px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; border-top: 1px dotted var(--ink-3, #ccc); padding-top: 12px; }
.ms-step-nav { display: flex; align-items: center; gap: 4px; }
.ms-step-nav ol { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ms-step-nav button { width: 26px; height: 26px; border: 1px solid var(--ink, #1d1d1f); background: var(--panel, #fff); color: var(--ink, #1d1d1f); border-radius: 50%; font: 500 11px/1 var(--mono); cursor: pointer; padding: 0; }
.ms-step-nav button[aria-current="step"] { background: var(--ink, #1d1d1f); color: var(--panel, #fff); }
.ms-step-nav .ms-step-arrow { border-color: transparent; font-size: 16px; }
.ms-step-nav button:hover { background: #f1f1f3; }
.ms-step-nav button[aria-current="step"]:hover { background: var(--ink, #1d1d1f); }
.ms-step-texts p { margin: 0; font: 400 14px/1.55 var(--sans); color: var(--ink, #1d1d1f); }
.ms-step-texts b { display: block; font: 400 12px var(--pixel); letter-spacing: 0.08em; margin-bottom: 3px; color: var(--ink, #1d1d1f); }
.spread .ms-steps { display: none; }
@media (max-width: 720px) { .ms-steps { grid-template-columns: 1fr; } }

/* ---- enlarge ---- */
.ms-plate { position: relative; }
.ms-enlarge { position: absolute; top: 8px; right: 26px; z-index: 2; width: 26px; height: 26px; padding: 5px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--ink-2, #6b6b70); cursor: zoom-in; }
.ms-enlarge svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.ms-enlarge:hover { border-color: var(--ink-3, #ccc); color: var(--ink, #1d1d1f); background: var(--panel, #fff); }
.spread .ms-enlarge { color: var(--blue); }
.ms-lightbox { width: min(1400px, 96vw); max-height: 94vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.ms-lightbox::backdrop { background: rgba(250, 250, 252, 0.92); backdrop-filter: blur(3px); }
.ms-lightbox-body { max-height: 90vh; overflow: auto; }
.ms-lightbox .ms-plate { background: var(--panel, #fff); box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 24px 60px -20px rgba(0,0,0,.25); }
.ms-lightbox .ms-enlarge { display: none; }
.ms-lightbox-close { position: absolute; top: -34px; right: 0; border: 0; background: transparent; font: 500 12px var(--mono); letter-spacing: 0.08em; color: var(--ink, #1d1d1f); cursor: pointer; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ms-lightbox::backdrop { background: rgba(10, 11, 16, 0.9); } }

/* ---- sound switch ---- */
.sound-toggle { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--muted); font: 400 11px/1 var(--mono); letter-spacing: 0.08em; cursor: pointer; padding: 4px 0; }
.sound-toggle svg { width: 15px; height: 15px; fill: currentColor; }
.sound-toggle svg .w { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.sound-toggle[aria-pressed="true"] { color: var(--ink, #1d1d1f); }
.masthead .sound-toggle { position: absolute; top: 18px; right: 40px; }
.masthead { position: relative; }
.topbar .sound-toggle { margin-left: 16px; }
@media (max-width: 720px) { .masthead .sound-toggle { right: 16px; top: 10px; } }
:is(.from-home, .tinted) [class^="m-"], :is(.from-home, .tinted) [class*=" m-"] { --top: #ffffff; --side: var(--blue-4); --side-2: color-mix(in srgb, var(--blue-4) 45%, var(--blue-3)); }
:is(.from-home, .tinted) .m-manila, :is(.from-home, .tinted) .m-red { --top: var(--blue-3); --side: color-mix(in srgb, var(--blue-3) 55%, var(--blue-2)); --side-2: color-mix(in srgb, var(--blue-3) 25%, var(--blue-2)); }
:is(.from-home, .tinted) .m-brass, :is(.from-home, .tinted) .m-copper { --top: var(--blue-4); --side: var(--blue-3); --side-2: var(--blue-2); }
:is(.from-home, .tinted) .ms-label .ms-text { fill: var(--blue); }
:is(.from-home, .tinted) .ms-coil { stroke: var(--blue); }
:is(.from-home, .tinted) .ms-fill-merc { fill: var(--blue-4); }
:is(.from-home, .tinted) .ms-fill-merc-wired, :is(.from-home, .tinted) .ms-fill-deep { fill: var(--blue-3); }
.ms-lightbox-body.ms-figure { margin: 0; }
.ms-lightbox .ms-svg { max-height: 74vh; }
.preview-bar { position: sticky; top: 0; z-index: 10; padding: 6px 16px; background: #fff1a8; color: #3d3200; font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-align: center; }
.toc-part li.preview .w { color: #b58900; }
.tp-tape { fill: none; stroke: #8a4a12; stroke-width: 3.2; stroke-linejoin: round; }
.tp-marks { fill: none; stroke: #fff3d6; stroke-width: 2; stroke-dasharray: 2 10; }
.tp-big { font: 400 15px var(--pixel); letter-spacing: 0.08em; fill: var(--ink, #1d1d1f); }
:is(.spread, .tinted) .tp-tape { stroke: var(--blue); }
.m-red.on .iso-top, .m-red.on .iso-shade { fill: var(--red); }
[data-part="head"]:not(.on) { --top: #ececee; --side: #d3d3d7; --side-2: #b9b9be; }
.article code { font: 400 0.86em/1.5 var(--mono); background: #f1f1f3; padding: 2px 6px; border-radius: 3px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .article code { background: #22232a; } }

/* ---- flat block diagrams (navigate-ask and later) ---- */
.nv-h { font: 400 14px var(--pixel); letter-spacing: 0.08em; fill: var(--ink, #1d1d1f); }
.nv-sub { font: 400 12px var(--sans); fill: var(--ink-2, #6b6b70); }
.nv-t { font: 400 12px var(--mono); fill: var(--ink, #1d1d1f); }
.nv-small { font: 500 10px var(--mono); letter-spacing: 0.06em; fill: var(--ink-2, #6b6b70); }
.nv-links path { fill: none; stroke: var(--ink-2, #6b6b70); stroke-width: 1.2; }
.nv-arrowhead { fill: var(--ink-2, #6b6b70); }
.nv-start rect { fill: #fff; stroke: var(--ink, #1d1d1f); stroke-dasharray: 3 3; }
.nv-rec rect { fill: #fff; stroke: var(--ink, #1d1d1f); stroke-width: 1.2; transition: fill 0.25s; }
.nv-cust rect { fill: #fbe98a; }
.nv-ord rect { fill: #a8ebc8; }
.nv-rec.seen rect { stroke-width: 2; }
.nv-rec.on rect { fill: #ff8f8f; stroke: var(--red); }
.nv-cursor { fill: var(--red); stroke: #fff; stroke-width: 2; transition: cx 0.4s ease, cy 0.4s ease; filter: drop-shadow(0 0 4px var(--red-glow)); }
.nv-codeline { font: 400 12px var(--mono); fill: var(--ink-2, #6b6b70); }
.nv-codeline.hit { fill: var(--red); }
.nv-count { font: 400 22px var(--pixel); fill: var(--ink, #1d1d1f); }
.nv-divider { stroke: var(--ink-3, #ccc); stroke-dasharray: 2 5; }
.rl-sql rect { fill: #1d1d1f; }
.rl-code { font: 400 14px var(--mono); fill: #f6e7bd; }
.rl-head { fill: #e6d2f8; stroke: var(--ink, #1d1d1f); }
.rl-ord .rl-head { fill: #bfe3fa; }
.rl-row rect { fill: #fff; stroke: var(--ink, #1d1d1f); stroke-width: 1; transition: fill 0.25s; }
.rl-row.on rect { fill: #ff8f8f; }
.rl-col { stroke: var(--ink-3, #ccc); }
.rl-joins path { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-dasharray: 4 3; }
:is(.spread, .tinted) .nv-cust rect, :is(.spread, .tinted) .nv-ord rect, :is(.spread, .tinted) .rl-head { fill: var(--blue-4); }
.rl-joins circle { fill: var(--red); }
/* ---- star schema ---- */
.st-head { stroke: var(--ink, #1d1d1f); }
.st-mint .st-head { fill: #a8ebc8; } .st-yellow .st-head { fill: #fbe98a; } .st-lavender .st-head { fill: #e6d2f8; } .st-pink .st-head { fill: #f7c4c4; }
.st-cell rect { fill: #fff; stroke: var(--ink-3, #ccc); }
.st-row > rect { fill: none; stroke: var(--ink, #1d1d1f); }
.st-row.scan .st-cell rect { fill: #fff6cf; }
.st-cell.on rect { fill: #ff8f8f; }
[data-col].on text { fill: var(--red); font-weight: 700; }
.st-lines path { fill: none; stroke: var(--ink-3, #ccc); stroke-width: 1.5; }
.st-lines path.on { stroke: var(--red); stroke-width: 2; stroke-dasharray: 5 4; animation: ms-flow 0.8s linear infinite; }
.st-src rect, .st-etl rect { fill: #fff; stroke: var(--ink, #1d1d1f); }
.st-etl rect { fill: #ececee; }
.st-flow { fill: none; stroke: var(--ink-2, #6b6b70); stroke-width: 1.2; stroke-dasharray: 4 4; animation: ms-flow 1.2s linear infinite; }
.st-q rect { fill: #1d1d1f; }
.st-qtext { font: 400 12px var(--pixel); letter-spacing: 0.08em; fill: #fff; }
.st-bar { fill: #a8ebc8; stroke: var(--ink, #1d1d1f); }
:is(.spread, .tinted) .st-head, :is(.spread, .tinted) .st-bar { fill: var(--blue-4); }
@media (prefers-reduced-motion: reduce) { .st-flow, .st-lines path.on { animation: none; } }
/* ---- cluster ---- */
.cl-server { cursor: pointer; outline: none; }
.cl-server:focus-visible .iso-edge, .cl-server:hover .iso-edge { stroke-width: 2; }
.cl-led { fill: #30a46c; }
.cl-x { stroke: var(--red); stroke-width: 2.4; fill: none; display: none; }
.cl-server.down .cl-x { display: inline; }
.cl-server.down .cl-led { fill: var(--red); }
.cl-server.down { opacity: 0.45; }
.cl-piece.working .iso-top { fill: var(--red); }
.cl-piece.working { filter: drop-shadow(0 0 3px var(--red-glow)); }
.cl-net { fill: none; stroke: var(--ink-2, #6b6b70); stroke-width: 2; stroke-dasharray: 6 3; }
.cl-line { font: 400 12px var(--mono); fill: var(--ink, #1d1d1f); }
.cl-line.moved { fill: #b8661f; }
.cl-line.lost { fill: var(--red); }
.cl-total { font: 400 18px var(--pixel); fill: var(--ink, #1d1d1f); white-space: pre; }
.spread .cl-server.down { opacity: 0.4; }
.ms-label { pointer-events: none; }
/* ---- storage and compute ---- */
.sc-node { transition: opacity 0.35s; }
.sc-node.off { opacity: 0; pointer-events: none; }
.sc-read { fill: none; stroke: var(--ink-2, #6b6b70); stroke-width: 1.2; stroke-dasharray: 3 4; }
.sc-busy .sc-node:not(.off) .sc-read { stroke: var(--red); stroke-width: 1.8; animation: ms-flow 0.5s linear infinite reverse; }
.sc-led { fill: #30a46c; }
.ms-label { transition: opacity 0.3s; }
.article blockquote { margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--ink, #1d1d1f); font-size: 1.15em; line-height: 1.55; }
.article ul:not(.sources) { padding-left: 1.2em; margin: 0 0 1.2em; }
.article ul:not(.sources) li { margin: 0 0 0.5em; }
/* ---- reading tag ---- */
.rd-tag { fill: #f6e7bd; stroke: var(--ink, #1d1d1f); stroke-width: 1.4; }
.rd-hole { fill: #fff; stroke: var(--ink, #1d1d1f); stroke-width: 1.4; }
.rd-string { fill: none; stroke: #b8661f; stroke-width: 2; }
.rd-big { font: 400 78px var(--pixel); fill: var(--ink, #1d1d1f); }
.rd-unit { font: 400 40px var(--pixel); fill: var(--ink, #1d1d1f); }
.rd-hit { fill: rgba(255,255,255,0.55); stroke: var(--ink-3, #ccc); }
.rd-row { cursor: pointer; outline: none; }
.rd-row:hover .rd-hit, .rd-row:focus-visible .rd-hit { stroke: var(--ink, #1d1d1f); }
.rd-box { fill: #fff; stroke: var(--ink, #1d1d1f); }
.rd-tick { fill: none; stroke: var(--ink, #1d1d1f); stroke-width: 2; }
.rd-val { font: 400 14px var(--mono); fill: var(--ink, #1d1d1f); }
.rd-row.off .rd-tick { display: none; }
.rd-row.off .rd-val { fill: var(--ink-3, #bbb); text-decoration: line-through; }
.rd-say { font: 400 17px var(--serif); fill: var(--ink, #1d1d1f); }
.rd-verdict { font: 400 26px var(--pixel); fill: #30a46c; }
.rd-verdict.bad { fill: var(--red); }
:is(.spread, .tinted) .rd-tag { fill: var(--blue-4); }
.tp-col .iso-solid { opacity: 0.85; }
.tp-flange { fill: none; stroke: var(--ink-2, #6b6b70); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.tp-hose { fill: none; stroke: var(--ink-2, #6b6b70); stroke-width: 2.4; stroke-linejoin: round; }
.tp-head:not(.on) { --top: #ececee; --side: #d3d3d7; --side-2: #b9b9be; }
.sc-node.off ~ .x {}
.sc-rack { transition: opacity 0.35s; }

/* ---- navigation and the Atlas ---- */
.mainnav { position: absolute; top: 18px; right: 170px; display: flex; gap: 18px; font: 400 11px/1 var(--mono); letter-spacing: 0.1em; }
.mainnav a { text-decoration: none; color: var(--muted); padding: 4px 0; }
.mainnav a:hover { color: var(--blue); }
.at-index { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
.at-intro { max-width: 720px; margin: 0 0 48px; }
.at-intro h1 { font: 500 clamp(36px, 5vw, 52px)/1.1 var(--serif); margin: 0 0 14px; }
.at-intro p { margin: 0 0 10px; }
.at-meta { font: 400 11px var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.at-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 40px; }
.at-system { border-top: 2px solid var(--ink); padding-top: 12px; }
.at-sys-head { display: flex; align-items: baseline; gap: 10px; }
.at-num { font: 400 13px var(--pixel); color: var(--blue); }
.at-sys-head h3 { margin: 0; font: 600 19px var(--serif); flex: 1; }
.at-count { font: 400 11px var(--mono); color: var(--muted); }
.at-blurb { font: 400 14px/1.5 var(--sans); color: var(--muted); margin: 6px 0 12px; }
.at-list { list-style: none; margin: 0; padding: 0; }
.at-list li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dotted var(--dot); font-size: 15px; line-height: 1.45; }
.at-list li a { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
.at-list li a:hover { color: var(--blue); }
.at-list li.soon span:first-child { color: var(--muted); }
.at-list .w { flex: none; font: 400 10px/2.2 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.at-list li.preview .w { color: #b58900; }
.at-home .at-blurb { max-width: 640px; margin-bottom: 30px; }
.at-oneline { font-size: 20px !important; color: var(--ink) !important; max-width: 640px !important; }
.at-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 26px auto 0; max-width: 760px; text-align: left; border: 1px solid var(--ink); }
.at-spec div { padding: 10px 12px; border-right: 1px solid var(--dot); }
.at-spec dt { font: 400 10px var(--mono); letter-spacing: 0.1em; color: var(--muted); margin-bottom: 4px; }
.at-spec dd { margin: 0; font: 400 14px/1.4 var(--sans); }
@media (max-width: 1100px) { .at-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .at-grid { grid-template-columns: 1fr; } .at-index { padding: 0 16px; } .mainnav { position: static; } }
.cta .btn-off { opacity: 0.75; box-shadow: none; }
/* ---- five ways ---- */
.fw-bone { fill: #f6e7bd; stroke: var(--ink, #1d1d1f); stroke-width: 1.3; }
.fw-notch { stroke: var(--ink, #1d1d1f); stroke-width: 1.6; }
.fw-token ellipse { fill: #f8b46a; stroke: var(--ink, #1d1d1f); stroke-width: 1.1; }
.fw-token .fw-token-side { fill: #cf7a2e; }
.fw-clay { fill: #eab77d; stroke: var(--ink, #1d1d1f); stroke-width: 1.3; }
.fw-imp { fill: #d89a5a; stroke: var(--ink, #1d1d1f); stroke-width: 1.1; }
.fw-imp-in { fill: #b97c43; }
.fw-wedge { fill: #b97c43; stroke: var(--ink, #1d1d1f); stroke-width: 1; }
.fw-wedge-tail { stroke: var(--ink, #1d1d1f); stroke-width: 2; }
.fw-oil { fill: #fbe98a; stroke: var(--ink, #1d1d1f); }
.fw-cord-main { stroke: #b8661f; stroke-width: 5; stroke-linecap: round; fill: none; }
.fw-cord { stroke: #d89a5a; stroke-width: 3; fill: none; stroke-linecap: round; }
.fw-cord-dim { stroke: #e9c9a3; }
.fw-knot { fill: #b8661f; stroke: var(--ink, #1d1d1f); }
.fw-knot-8 { fill: #b8661f; stroke: var(--ink, #1d1d1f); }
.fw-long { fill: #b8661f; stroke: var(--ink, #1d1d1f); }
.fw-turn { stroke: #f6e7bd; stroke-width: 1.2; }
.fw-page { fill: #fffdf6; stroke: var(--ink, #1d1d1f); }
.fw-rule { stroke: var(--ink-3, #ccc); fill: none; }
.fw-ink { font: italic 400 15px var(--serif); fill: #23305e; }
.fw-num { font-style: normal; font-weight: 600; }
.fw-ok { font: 400 12px var(--pixel); fill: #30a46c; letter-spacing: 0.06em; }
.fw-count { font: 400 22px var(--pixel); fill: var(--ink, #1d1d1f); }
:is(.spread, .tinted) .fw-bone, :is(.spread, .tinted) .fw-clay, :is(.spread, .tinted) .fw-token ellipse { fill: var(--blue-4); }
/* ---- storage through time ---- */
.st-line { stroke: var(--ink-3, #ccc); stroke-width: 2; }
.st-item { cursor: pointer; outline: none; }
.st-hit { fill: transparent; }
.st-item:hover .st-hit, .st-item:focus-visible .st-hit { fill: #f4f4f6; }
.st-dot { fill: #fff; stroke: var(--ink, #1d1d1f); stroke-width: 1.5; }
.st-item.on .st-dot { fill: var(--red); stroke: var(--red); }
.st-name { font: 400 16px var(--serif); fill: var(--ink, #1d1d1f); }
.st-item.on .st-name { font-weight: 600; }
.st-trick { font: 400 18px var(--pixel); fill: var(--red); letter-spacing: 0.04em; }
.st-fact { font: 400 15px var(--sans); fill: var(--ink, #1d1d1f); }
.sc-card { fill: #f6e7bd; stroke: var(--ink, #1d1d1f); }
.sc-hole { fill: #3a3a3f; }
.sc-nohole { fill: none; stroke: #c9b06a; stroke-dasharray: 3 3; }
.sc-bit { font: 400 14px var(--pixel); fill: var(--ink, #1d1d1f); }
.sc-pin { stroke: #c4961a; stroke-width: 4; }
.sc-pin-tip { fill: #c4961a; }
.sc-pin-tip.on { fill: var(--red); filter: drop-shadow(0 0 4px var(--red-glow)); }
.sc-media { fill: #8a4a12; }
.sc-domain { stroke: var(--ink, #1d1d1f); }
.sc-domain.n { fill: #93cdf2; } .sc-domain.s { fill: #f1a3a3; }
.sc-arrow { stroke: var(--ink, #1d1d1f); stroke-width: 2; }
.sc-ah { fill: var(--ink, #1d1d1f); }
.sc-head { fill: #ececee; stroke: var(--ink, #1d1d1f); }
.sc-coil { stroke: #cf7a2e; stroke-width: 2; }
.sc-arm { fill: none; stroke: var(--ink-2, #6b6b70); stroke-width: 3; }
.sc-disc { fill: #e8ecf1; stroke: var(--ink, #1d1d1f); }
.sc-pit { fill: #a9b1bd; }
.sc-laser { fill: none; stroke: var(--red); stroke-width: 2; filter: drop-shadow(0 0 3px var(--red-glow)); }
.sc-scatter { stroke: var(--red); stroke-dasharray: 3 4; opacity: 0.6; }
.sc-gate { fill: #ececee; stroke: var(--ink, #1d1d1f); }
.sc-float { fill: #fbe98a; stroke: var(--ink, #1d1d1f); }
.sc-chan { fill: #d1b2ef; stroke: var(--ink, #1d1d1f); }
.sc-e { fill: #23305e; }
.sc-file { fill: #f6e7bd; stroke: var(--ink, #1d1d1f); }
.sc-dc { fill: #fff; stroke: var(--ink, #1d1d1f); }
.sc-rack { fill: #3a3a3f; }
.sc-net { fill: none; stroke: var(--ink-2, #6b6b70); stroke-dasharray: 4 4; animation: ms-flow 1s linear infinite; }
/* ---- plate drawer ---- */
.plate-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(520px, 100vw); background: var(--plate, #fff); border-left: 1px solid var(--ink, #1d1d1f); box-shadow: -18px 0 40px -24px rgba(0,0,0,.35); transform: translateX(102%); transition: transform .32s cubic-bezier(.32,.72,0,1); display: flex; flex-direction: column; }
.plate-drawer.open { transform: none; }
.pd-bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--dot); font: 400 11px var(--mono); letter-spacing: .08em; }
.pd-kicker { color: var(--blue); flex: 1; }
.pd-full { color: var(--ink); text-decoration: none; }
.pd-close { border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--ink); }
.pd-body { overflow: auto; padding: 8px 26px 40px; font-size: 16px; }
.pd-body .chapter-head { margin: 18px 0 18px; text-align: left; padding: 0; }
.pd-body .chapter-head h1 { font-size: 32px; }
.pd-body .at-spec { margin: 16px 0 0; }
.pd-body h2 { font: 600 19px var(--serif); margin: 1.4em 0 .5em; }
.pd-body .fact, .pd-body .tryit { display: none; }
.pd-fig, .pd-loading { font: 400 11px var(--mono); letter-spacing: .08em; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .plate-drawer { transition: none; } }

/* ---- preview: compare links ---- */
.preview-bar .pv-links { margin-left: 18px; }
.preview-bar .pv-links a { margin-left: 12px; color: inherit; }

/* ---- plates at the end of a chapter, and "where this appears" on a plate ---- */
.ch-plates { max-width: 680px; margin: 64px auto 0; padding: 0 24px; }
.ch-plates h2 { font: 600 24px/1.2 var(--serif); margin: 0 0 6px; }
.ch-plates > p { margin: 0 0 18px; font-size: 16px; color: var(--muted); }
.ch-plate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ch-plate, .ls-chip, .bk-plate, .bk-lop-item, .mp-dstop { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.ch-plate { padding: 12px 14px; border: 1px solid var(--blue-3); background: radial-gradient(circle, var(--dot) 0.55px, transparent 0.7px) 0 0 / 4px 4px, var(--plate); transition: border-color .15s, transform .15s; }
a.ch-plate:hover { border-color: var(--blue); transform: translateY(-1px); }
.ch-plate.off { border-style: dashed; color: var(--muted); }
.pn { font: 400 10px/1 var(--pixel); letter-spacing: 0.1em; color: var(--blue); }
.pt { font-size: 15px; line-height: 1.35; }
.off .pn { color: var(--muted); }
.off .w, .ls-tour.off, .ch-plates .w { font: 400 10px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.en-routes ul { margin: 0; padding-left: 18px; font-size: 16px; }
.en-routes li { margin: 4px 0; }

/* cross-page transitions where the browser supports them; the sheet title morphs between sheets */
@view-transition { navigation: auto; }
.ds-top h1 { view-transition-name: sheet-title; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.mainnav a[aria-current="page"] { color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }

/* ---- flat figures for the later chapters (one-sale, pipes, metric, lineage, rag, copies) ---- */
.fl-card > rect { fill: var(--panel, #fff); stroke: var(--ink, #1d1d1f); stroke-width: 1.2; transition: stroke 0.25s; }
.fl-card.on > rect { stroke: var(--red); stroke-width: 2; }
.fl-card.dim { opacity: 0.35; }
.fl-card, .fl-node { transition: opacity 0.35s; }
.fl-head { stroke: var(--ink, #1d1d1f); stroke-width: 1.2; }
.c-yellow { fill: #fbe98a; } .c-mint { fill: #a8ebc8; } .c-lavender { fill: #e6d2f8; } .c-blue { fill: #bfe3fa; } .c-pink { fill: #f7c4c4; } .c-grey { fill: #ececee; }
.fl-title { font: 400 13px var(--pixel); letter-spacing: 0.08em; fill: #1d1d1f; }
.fl-kind { font: 500 9.5px var(--mono); letter-spacing: 0.06em; fill: #1d1d1f; opacity: 0.72; }
.fl-line { white-space: pre; font: 400 11.5px var(--mono); fill: var(--ink, #1d1d1f); transition: fill 0.6s; }
.fl-line.dim { fill: var(--ink-2, #6b6b70); }
.fl-line.new, .fl-line.bad, .fl-line.late { fill: var(--red); }
.fl-line.gone { fill: var(--ink-3, #c9c9cd); text-decoration: line-through; }
.fl-say { font: 400 15px var(--serif); fill: var(--ink, #1d1d1f); }
.fl-note { font: 400 12px var(--sans); fill: var(--ink-2, #6b6b70); }
.fl-big { font: 400 44px var(--pixel); fill: var(--ink, #1d1d1f); }
.fl-mid { font: 400 22px var(--pixel); fill: var(--ink, #1d1d1f); }
.fl-big.bad, .fl-mid.bad { fill: var(--red); }
.fl-big.ok, .fl-mid.ok { fill: #30a46c; }
.fl-flow { fill: none; stroke: var(--ink-3, #c9c9cd); stroke-width: 1.3; transition: stroke 0.3s; }
.fl-flow.on { stroke: var(--red); stroke-width: 1.8; stroke-dasharray: 5 4; animation: ms-flow 0.6s linear infinite; }
.fl-flow.up { stroke: var(--ink, #1d1d1f); stroke-width: 1.8; }
.fl-flow.stop { stroke: var(--ink-3, #c9c9cd); stroke-dasharray: 2 4; }
.fl-ah { fill: var(--ink-3, #c9c9cd); }
.fl-btn { cursor: pointer; outline: none; }
.fl-btn:hover > rect, .fl-btn:focus-visible > rect { stroke-width: 2; }
.fl-cell { fill: var(--panel, #fff); stroke: var(--ink, #1d1d1f); stroke-width: 1; transition: fill 0.3s; }
.fl-cell.on { fill: #ff8f8f; }
.fl-cell.a { fill: #fbe98a; } .fl-cell.b { fill: #a8ebc8; }
.fl-ptr { fill: var(--red); transition: transform 0.45s ease; }
.fl-ptr.slow { fill: var(--ink-2, #6b6b70); }
.fl-dot { fill: var(--panel, #fff); stroke: var(--ink, #1d1d1f); stroke-width: 1.2; transition: fill 0.3s, opacity 0.4s; }
.fl-dot.c-yellow { fill: #fbe98a; } .fl-dot.c-mint { fill: #a8ebc8; } .fl-dot.c-blue { fill: #bfe3fa; }
.fl-dot.on { fill: var(--red); stroke: var(--red); }
.fl-q { fill: #1d1d1f; stroke: var(--panel, #fff); stroke-width: 2; }
.fl-ring { fill: none; stroke: var(--red); stroke-width: 1.2; stroke-dasharray: 3 4; }
.fl-tag { font: 400 10.5px var(--mono); fill: var(--ink-2, #6b6b70); }
.fl-tag.on { fill: var(--red); }
.fl-badge rect { fill: #30a46c; } .fl-badge.bad rect { fill: var(--red); }
.fl-badge text { font: 500 9.5px var(--mono); letter-spacing: 0.06em; fill: #fff; }
.fl-dark rect { fill: #1d1d1f; }
.fl-dark text { font: 400 12px var(--mono); fill: #f6e7bd; }
.fl-dark text.dim { fill: #9a9a9f; }
.fl-dark text.hi { fill: #ff8f8f; }
.fl-fade { transition: opacity 0.4s; }
.fl-fade.off { opacity: 0; }
:is(.spread, .tinted) .fl-head, :is(.spread, .tinted) .fl-dot[class*="c-"] { fill: var(--blue-4); }
@media (prefers-reduced-motion: reduce) { .fl-flow.on { animation: none; } .fl-ptr { transition: none; } }
.fl-card.up > rect { stroke-width: 2.4; }
/* the flat figures are drawn 1100 wide; on phones they scroll sideways at a readable size */
@media (max-width: 760px) {
  :is([data-fig="one-sale"], [data-fig="pipes"], [data-fig="metric"], [data-fig="lineage"], [data-fig="rag"], [data-fig="copies"], [data-fig^="at-"]) .ms-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  :is([data-fig="one-sale"], [data-fig="pipes"], [data-fig="metric"], [data-fig="lineage"], [data-fig="rag"], [data-fig="copies"], [data-fig^="at-"]) .ms-svg { min-width: 820px; }
}
.glossary-list .gl-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.glossary-list .gl-links a { color: var(--ink-2, #6b6b70); text-decoration: none; }
.glossary-list .gl-links a.gl-atlas { color: var(--blue); }
.glossary-list .gl-links a:hover { text-decoration: underline; }

/* ---- reading aids ---- */
.ch-rail { display: none; }
@media (min-width: 1240px) {
  .ch-rail { display: block; position: fixed; top: 96px; left: calc(50% - 566px); width: 170px; z-index: 2; font: 400 12px/1.35 var(--sans); }
  .ch-rail ol { list-style: none; margin: 0; padding: 0; }
  .ch-rail li a { display: grid; grid-template-columns: 22px 1fr; gap: 0 6px; padding: 6px 0; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; padding-left: 8px; margin-left: -10px; }
  .ch-rail li a .n { font: 400 11px/1.5 var(--pixel); color: var(--blue); }
  .ch-rail li a .m { grid-column: 2; font: 400 10px var(--mono); letter-spacing: 0.06em; color: var(--ink-3, #c9c9cd); }
  .ch-rail li a.read { color: var(--ink-3, #c9c9cd); }
  .ch-rail li a[aria-current] { color: var(--ink); border-left-color: var(--blue); }
  .ch-rail li a:hover { color: var(--ink); }
}
.ch-rail .rail-k, .ch-rail .rail-left { font: 400 11px var(--pixel); letter-spacing: 0.08em; color: var(--blue); margin: 0 0 10px; }
.ch-rail .rail-left { margin: 14px 0 0; }
@media (max-width: 1239px) {
  .ch-rail { display: block; position: fixed; right: 12px; bottom: 12px; z-index: 4; background: var(--bg); border: 1px solid var(--blue-3); padding: 7px 10px 5px; border-radius: 2px; }
  .ch-rail .rail-k, .ch-rail ol { display: none; }
  .ch-rail .rail-left { margin: 0; }
}
.check, .answer { grid-column: 2; margin: 8px 0 1.8em; padding: 18px 20px 16px; border: 1px solid var(--blue-3); background: var(--bg); font: 400 15px/1.55 var(--sans); }
.check-k, .answer-k { margin: 0 0 6px !important; font: 400 12px var(--pixel); letter-spacing: 0.08em; color: var(--blue); }
.check-q { margin: 0 0 12px !important; font: 500 17px/1.45 var(--serif); }
.check-opts { display: flex; flex-direction: column; gap: 8px; }
.check-opts button { text-align: left; font: 400 15px/1.4 var(--sans); color: var(--ink); background: var(--plate, #fff); border: 1px solid var(--ink-3, #c9c9cd); border-radius: 2px; padding: 9px 12px; cursor: pointer; }
.check-opts button:hover:not(:disabled) { border-color: var(--blue); }
.check-opts button:disabled { cursor: default; opacity: 0.55; }
.check-opts button.right { opacity: 1; border-color: #30a46c; box-shadow: inset 3px 0 0 #30a46c; }
.check-opts button.picked:not(.right) { opacity: 1; border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.check-why { margin: 12px 0 0 !important; }
.check-why b { font: 400 12px var(--pixel); letter-spacing: 0.08em; color: var(--blue); }
.answer { border: 0; border-top: 2px solid var(--blue); border-bottom: 2px solid var(--blue); padding: 18px 0; margin-top: 2em; }
.answer-q { margin: 0 0 8px !important; font: 500 20px/1.35 var(--serif); }
.answer-a { margin: 0 !important; font: 400 17px/1.6 var(--serif); }
details.tail { grid-column: 2; margin: 0; border-top: 1px solid var(--blue-4); }
details.tail summary { cursor: pointer; list-style: none; padding: 16px 0; font: 600 20px/1.3 var(--serif); }
details.tail summary::-webkit-details-marker { display: none; }
details.tail summary::after { content: "+"; float: right; font: 400 18px var(--mono); color: var(--blue); }
details.tail[open] summary::after { content: "−"; }
details.tail summary span { font: 400 12px var(--pixel); color: var(--blue); margin-left: 8px; letter-spacing: 0.06em; }
.ms-hint { display: flex; gap: 12px; align-items: baseline; margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px dashed var(--blue-3); font: 400 14px/1.5 var(--sans); color: var(--ink); }
.ms-hint b { flex: none; font: 400 12px var(--pixel); letter-spacing: 0.08em; color: var(--blue); }
.ms-hint i { font-style: normal; font-weight: 600; }
@media (max-width: 1100px) { .check, .answer, details.tail { grid-column: 1; } }
.pd-body .check, .pd-body .answer { display: none; }
.ch-rail { transition: opacity 0.25s; }
.ch-rail.under { opacity: 0; pointer-events: none; }
.fl-line.ok { fill: #30a46c; }
.fl-cord { fill: none; stroke: #b8661f; stroke-width: 4; stroke-linecap: round; }
.fl-rule { fill: none; stroke: var(--ink-3, #c9c9cd); stroke-width: 1.2; }
.fl-mark { fill: none; stroke: var(--ink, #1d1d1f); stroke-width: 2.4; stroke-linecap: round; }
.fl-wedge { fill: var(--ink, #1d1d1f); }
:root { color-scheme: light; }
.at-intro p.has-cap::after { content: ""; display: block; clear: both; }

/* ---- motion, in Silicon's vocabulary ----
   Calm entrances (fade up 16px, 600ms, once, 100ms stagger), headings that rise out of a clip as they
   scroll in, rules and initials that wipe in steps, numbers that count up in twelve jumps. Everything
   that moves reports something on the page; with reduced motion everything is simply there. */
:root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; translate: 0 16px; }
  .js .rv.in { animation: aod-fade-up 0.6s var(--ease-out) var(--d, 0s) both; }
  .js .rv-wipe { clip-path: inset(0 100% 0 0); }
  .js .rv-wipe.in { animation: aod-wipe 1s steps(8) var(--d, 0s) both; }
  .js img.cap { animation: aod-wipe 0.48s steps(6) 0.15s both; clip-path: inset(0 100% 0 0); }
  @supports (animation-timeline: view()) {
    .article h2, .ch-plates h2, .toc-part h3, .at-sys-head h3 { animation: aod-heading-in linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
  }
  ::view-transition-group(*) { animation-duration: 0.45s; animation-timing-function: var(--ease-out); }
}
@keyframes aod-fade-up { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes aod-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes aod-heading-in { from { clip-path: inset(0 0 100% 0); translate: 0 0.35em; } to { clip-path: inset(0 0 -12% 0); translate: 0 0; } }

/* ---- colour by part: each part of the book (and the Atlas systems that belong to it) has its own
   accent. The --blue tokens are the site's accent everywhere, so a hue class just redefines them.
   Main shades keep 4.5:1 against the page for small text. ---- */
.hue-or { --blue: #c84a0c; --blue-2: #ff8a4c; --blue-3: #ffd3b8; --blue-4: #fff2ea; --dot: #f2cdb6; }
.hue-bl { --blue: #2340f2; --blue-2: #8197ff; --blue-3: #c6d0ff; --blue-4: #eef1ff; --dot: #c9cfe6; }
.hue-ta { --blue: #6e604f; --blue-2: #ad9f8d; --blue-3: #ddd4c8; --blue-4: #f6f2ec; --dot: #ddd4c8; }
.hue-li { --blue: #8a2fa8; --blue-2: #d58ae8; --blue-3: #f1d0f8; --blue-4: #fcf1fe; --dot: #ecd0f3; }
.hue-ma { --blue: #a3203a; --blue-2: #e57c8e; --blue-3: #f6ccd3; --blue-4: #fdf1f3; --dot: #f1cdd3; }
/* chapter pages draw figures in ink with red highlights; take the part's colour for those instead */
.chapter-page[class*="hue-"] { --red: var(--blue); --red-glow: color-mix(in srgb, var(--blue) 45%, transparent); }
.toc-part[class*="hue-"] h3::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: var(--blue); }

/* ---- home: the essay, then the book part by part ---- */
.ph { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
.ph p { margin: 0; }
.ph-intro { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 56px; align-items: start; }
.ph-intro .col { display: flex; flex-direction: column; gap: 20px; }
.ph-intro .lead { font-size: 21px; line-height: 1.55; }
.ph-intro p.strong { font-weight: 650; }
.ph-intro .ms-caption, .ph-plate .ms-caption { display: none; }
.ph-band { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; align-items: start; }
.ph-band.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.ph-band.flip .ph-text { order: 2; }
.ph-text { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }
.ph-k { font: 400 12px/1.4 var(--pixel); letter-spacing: 0.1em; color: var(--blue); }
.ph-text h2 { margin: 0 0 6px; font: 600 clamp(30px, 3.4vw, 44px)/1.08 var(--serif); letter-spacing: -0.01em; }
.ph-text h2::before { content: ""; display: block; width: 36px; height: 6px; margin-bottom: 16px; background: var(--blue); }
.ph-chapters { list-style: none; margin: 0 0 18px; padding: 0; }
.ph-chapters li > a, .ph-chapters li.soon { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px dotted var(--dot); text-decoration: none; color: var(--ink); font-size: 17px; line-height: 1.4; }
.ph-chapters .n { font: 400 12px var(--pixel); color: var(--blue); }
.ph-chapters .w { font: 400 10.5px var(--mono); letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
.ph-chapters li > a:hover .t { color: var(--blue); }
.ph-chapters li.soon .t, .ph-chapters li.preview .t { color: var(--ink); }
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-chip { display: inline-flex; gap: 8px; align-items: baseline; padding: 5px 9px; border: 1px solid var(--blue-3); background: var(--blue-4); color: var(--ink); font: 400 13.5px/1.3 var(--sans); text-decoration: none; transition: border-color 0.15s, background 0.15s; }
.ph-chip:hover { border-color: var(--blue); background: var(--plate); }
.ph-chip.off { background: transparent; border-style: dashed; color: var(--muted); }
.ph-chip i { font: 400 9.5px var(--mono); font-style: normal; letter-spacing: 0.06em; color: var(--blue); }
.ph-atlas a { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 30px; border: 1px solid var(--blue-3); background: radial-gradient(circle, var(--dot) 0.55px, transparent 0.7px) 0 0 / 4px 4px, var(--plate); text-decoration: none; color: var(--ink); }
.ph-atlas b { font: 600 28px var(--serif); }
.ph-atlas a:hover { border-color: var(--blue); }
@media (max-width: 1100px) {
  .ph { padding: 0 20px; }
  .ph-intro, .ph-band, .ph-band.flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ph-band.flip .ph-text { order: 0; }
}
/* inside a coloured part, figure highlights take the part colour too */
.tinted [class*="hue-"], .tinted[class*="hue-"] { --red: var(--blue); --red-glow: color-mix(in srgb, var(--blue) 45%, transparent); }