/* html-illustrate base stylesheet ("calm technical notebook").
   Paste this whole block into the page's first <style>, then add page-specific rules after it.
   Every color is a token. Light is the default; dark follows the OS unless the page forces
   data-theme="light", and data-theme="dark" forces dark. See references/style-guide.md. */
*{box-sizing:border-box}
:root{color-scheme:light;
  --bg:#f5f6f3;--surface:#fff;--surface-2:#eef1ed;
  --ink:#141b1a;--muted:#4f5d5a;--faint:#5f6b68;
  --line:#d6ddd8;--line-strong:#b9c3bd;--stroke:#7f8b86;
  --accent:#0e5e55;--accent-soft:#e2efea;--accent-ink:#0b4a43;--on-accent:#fff;
  --warn:#8a5300;--warn-soft:#fbf0dc;--danger:#a3261b;--danger-soft:#fbe7e4;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --content:1040px;--prose:46em;
  --toc-bg:var(--bg);--toc-ink:var(--ink);--toc-muted:var(--muted);--toc-accent:var(--accent);--toc-line:var(--line);--toc-max:var(--content)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --bg:#0f1415;--surface:#172022;--surface-2:#1d2729;
  --ink:#e9efec;--muted:#a8b6b1;--faint:#8a9894;
  --line:#2b3739;--line-strong:#3d4c4f;--stroke:#66777a;
  --accent:#7fd1b9;--accent-soft:#183632;--accent-ink:#a6e3d1;--on-accent:#0b1f1b;
  --warn:#f0b45c;--warn-soft:#33281a;--danger:#f19a8f;--danger-soft:#3a1f1c}}
:root[data-theme="dark"]{color-scheme:dark;
  --bg:#0f1415;--surface:#172022;--surface-2:#1d2729;
  --ink:#e9efec;--muted:#a8b6b1;--faint:#8a9894;
  --line:#2b3739;--line-strong:#3d4c4f;--stroke:#66777a;
  --accent:#7fd1b9;--accent-soft:#183632;--accent-ink:#a6e3d1;--on-accent:#0b1f1b;
  --warn:#f0b45c;--warn-soft:#33281a;--danger:#f19a8f;--danger-soft:#3a1f1c}

/* Sizes are tuned for a 14-inch laptop (about 1512 x 773 usable px): the user found the earlier
   large-monitor sizes showed too little per screen (2026-10-13). Check with scripts/measure-density.mjs. */

/* --line and --line-strong are for UI chrome. Meaningful diagram strokes use --stroke (>= 3:1). */

/* Base type */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.7;
  overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{width:min(var(--content),calc(100% - 48px));margin:0 auto}
p{max-width:var(--prose);margin:0 0 12px}
a{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent-ink) 40%,transparent);transition:text-decoration-color .15s}
a:hover{text-decoration-color:currentColor}
h2{font:750 21px/1.35 var(--sans);letter-spacing:-.01em;margin:0 0 12px}
h3{font:700 16px/1.5 var(--sans);margin:20px 0 8px}
.num{display:inline-block;font:500 12px/1 var(--mono);color:var(--accent);background:var(--accent-soft);
  border-radius:6px;padding:4px 6px;margin-right:8px;vertical-align:.18em}
code{font-family:var(--mono);font-size:.86em;background:var(--surface-2);border-radius:5px;padding:1px 5px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
pre{font:13px/1.6 var(--mono);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;overflow-x:auto}
pre code{background:none;padding:0;font-size:inherit}
.caption,figcaption,.source{font-size:12.5px;line-height:1.7;color:var(--faint);max-width:none;margin-top:6px}

/* Hero: one dominant opening */
.hero{padding:44px 0 20px}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:500 12px/1.4 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--accent)}
.hero h1{font:800 clamp(26px,3.2vw,34px)/1.25 var(--sans);letter-spacing:-.02em;max-width:24em;margin:0 0 10px}
.lead{font-size:16px;line-height:1.65;color:var(--muted);max-width:40em;margin:0 0 4px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:16px 0 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats>div{padding:8px 16px 8px 0}
.stats b{display:block;font:700 19px/1.3 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.stats span{font-size:12px;color:var(--faint)}

/* Sections: separated by space and a hairline, not boxes */
section{padding:28px 0 30px;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}

/* Callouts: left rule plus soft tint, one per meaning */
.callout{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 10px 10px 0;
  padding:10px 16px;margin:16px 0}
.callout strong:first-child{color:var(--accent-ink)}
.callout.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.callout.warn strong:first-child{color:var(--warn)}
.callout.danger{border-left-color:var(--danger);background:var(--danger-soft)}
.callout.danger strong:first-child{color:var(--danger)}
.callout p{margin:6px 0 0}
.hero .callout{margin-bottom:0}

/* Tables: one bordered card, quiet header, hairline rows */
.table-wrap{overflow-x:auto;margin:14px 0 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
th,td{text-align:left;vertical-align:top;padding:7px 12px;border-bottom:1px solid var(--line)}
th{background:var(--surface-2);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--muted);padding-block:6px}
tbody tr:last-child td{border-bottom:0}
td:first-child{font-weight:600;white-space:nowrap}
td code{background:none;padding:0}
tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}

/* Buttons and pills */
button{font:inherit}
.btn{min-height:44px;padding:0 20px;border:0;border-radius:10px;background:var(--accent);color:var(--on-accent);
  font-weight:600;cursor:pointer;transition:filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn-ghost{min-height:40px;padding:6px 16px;border:1px solid var(--line-strong);border-radius:999px;
  background:transparent;color:var(--ink);font-size:13.5px;cursor:pointer}
.btn-ghost:hover{background:var(--surface-2)}
button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.pill{display:inline-block;white-space:nowrap;font:600 12px/1.6 var(--mono);padding:1px 9px;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--muted)}
.pill.accent{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.pill.warn{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}

/* Diagrams. The SVG keeps its natural width so type inside it never blows up on wide screens: set style="--svg-max:<viewBox width>px" on the svg.
   Wide ones get class="wide" and scroll inside .figure on phones. */
.figure{margin:16px 0;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px 14px}
.figure svg{display:block;width:100%;max-width:var(--svg-max,760px);height:auto;margin:0 auto}
.figure-hint{font:500 11.5px/1.4 var(--mono);letter-spacing:.06em;color:var(--faint);margin:0 0 10px}
svg .node{fill:var(--surface);stroke:var(--stroke);stroke-width:1.5}
svg .node.focal{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.75}
svg .node.planned{fill:none;stroke-dasharray:6 5}
svg .t-title{font:700 15px var(--sans);fill:var(--ink)}
svg .t-sub{font:400 12.5px var(--mono);fill:var(--muted)}
svg .t-edge{font:500 12px var(--sans);fill:var(--faint)}
svg .edge{fill:none;stroke:var(--stroke);stroke-width:1.5}
svg .edge.hot{stroke:var(--accent);stroke-width:2}
svg .edge.planned{stroke-dasharray:5 4}
svg .head{fill:var(--stroke)}
svg .head.hot{fill:var(--accent)}

@media (max-width:600px){
  .wrap{width:calc(100% - 32px)}
  .hero{padding:52px 0 16px}.hero h1{font-size:26px}.lead{font-size:15.5px}
  .stats{grid-template-columns:1fr 1fr}
  section{padding:24px 0 26px}
  .callout{padding:10px 14px}th,td{padding:7px 10px}
  .figure{padding:10px}.figure svg.wide{min-width:680px}
}