:root {
  --paper:#fbfcfd; --surface:#f1f4f7; --surface-2:#e8edf1; --ink:#14202b; --ink-2:#33454f; --muted:#5d6b78;
  --rule:#dde4ea; --rule-soft:#e9eef2; --accent:#10666e; --accent-ink:#0b4a50; --accent-wash:#e4f0f0;
  --amber:#8a6410; --amber-wash:#f7f0dd; --crit:#9a3320;
  --f-serif:"IBM Plex Serif", Georgia, "Times New Roman", serif;
  --f-sans:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --measure:68ch; --shadow:0 1px 2px rgba(20,32,43,.05);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0f151b; --surface:#161f27; --surface-2:#1d2932; --ink:#dfe7ed; --ink-2:#bcc9d3; --muted:#8b9aa7;
    --rule:#263440; --rule-soft:#1e2a34; --accent:#4fb6bd; --accent-ink:#7fd0d5; --accent-wash:#12292c;
    --amber:#d3a54b; --amber-wash:#2a2314; --crit:#d98570; --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --paper:#0f151b; --surface:#161f27; --surface-2:#1d2932; --ink:#dfe7ed; --ink-2:#bcc9d3; --muted:#8b9aa7;
  --rule:#263440; --rule-soft:#1e2a34; --accent:#4fb6bd; --accent-ink:#7fd0d5; --accent-wash:#12292c;
  --amber:#d3a54b; --amber-wash:#2a2314; --crit:#d98570; --shadow:0 1px 2px rgba(0,0,0,.4);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-sans); font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased; }
a { color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
a:hover { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* masthead */
.masthead { border-bottom:1px solid var(--rule); background:var(--surface); }
.masthead-inner { max-width:1140px; margin:0 auto; padding:22px 32px 34px; }
.sitenav { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 24px; padding-bottom:16px; margin-bottom:26px; border-bottom:1px solid var(--rule); }
.sitenav .brand { font-family:var(--f-serif); font-weight:600; font-size:16px; color:var(--ink); text-decoration:none; }
.sitenav-links { display:flex; flex-wrap:wrap; gap:4px 22px; }
.sitenav-links a { font-family:var(--f-mono); font-size:11.5px; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.sitenav-links a:hover { color:var(--accent); }
.sitenav-links a[aria-current=page] { color:var(--accent); }
.eyebrow { font-family:var(--f-mono); font-size:11.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin:0 0 14px; }
.eyebrow a { color:var(--accent); text-decoration:none; }
.eyebrow a:hover { text-decoration:underline; }
h1 { font-family:var(--f-serif); font-weight:600; font-size:clamp(30px,4.4vw,44px); line-height:1.12; letter-spacing:-.015em; text-wrap:balance; margin:0 0 14px; max-width:22ch; }
h1.h1-code { font-family:var(--f-mono); font-weight:500; font-size:clamp(22px,3.2vw,32px); letter-spacing:0; max-width:none; overflow-wrap:anywhere; }
.standfirst { max-width:var(--measure); color:var(--ink-2); font-size:17px; margin:0 0 30px; }
.standfirst .chip { margin-left:2px; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:3px; overflow:hidden; margin:0; }
.fact { background:var(--paper); padding:13px 16px; }
.fact dt { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin:0 0 4px; }
.fact dd { margin:0; font-size:14.5px; font-weight:500; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }

/* shell + contents */
.shell { max-width:1140px; margin:0 auto; padding:0 32px 96px; display:grid; grid-template-columns:232px minmax(0,1fr); gap:56px; align-items:start; }
.page { max-width:1140px; margin:0 auto; padding:0 32px 96px; }
.toc { position:sticky; top:0; padding:44px 0; font-size:14px; max-height:100vh; overflow-y:auto; }
.toc h2 { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--rule); display:block; }
.toc ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.toc a { display:grid; grid-template-columns:24px 1fr; gap:4px; padding:4px 0; text-decoration:none; color:var(--ink-2); line-height:1.35; }
.toc a:hover { color:var(--accent); }
.toc .n { font-family:var(--f-mono); font-size:12px; color:var(--muted); }
main { padding:44px 0 0; min-width:0; }

/* sections */
section { padding-bottom:46px; scroll-margin-top:20px; }
section + section { border-top:1px solid var(--rule-soft); padding-top:42px; }
h2 { font-family:var(--f-serif); font-size:27px; font-weight:600; line-height:1.2; letter-spacing:-.01em; text-wrap:balance; margin:0 0 14px; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:baseline; }
h2 .n { font-family:var(--f-mono); font-size:14px; font-weight:500; color:var(--accent); font-variant-numeric:tabular-nums; }
h2 .code-title { font-family:var(--f-mono); font-size:22px; font-weight:500; letter-spacing:0; }
h3 { font-family:var(--f-sans); font-size:15px; font-weight:600; letter-spacing:.005em; margin:30px 0 10px; color:var(--ink); }
p, ul, ol { max-width:var(--measure); }
p { margin:0 0 15px; }
ul, ol { margin:0 0 15px; padding-left:20px; }
li { margin-bottom:7px; }
li::marker { color:var(--muted); }
strong { font-weight:600; }
.muted { color:var(--muted); font-size:15px; }
code { font-family:var(--f-mono); font-size:.875em; background:var(--surface); border:1px solid var(--rule-soft); border-radius:3px; padding:.08em .34em; word-break:break-word; }
pre { margin:0 0 20px; background:var(--surface); border:1px solid var(--rule); border-radius:3px; padding:16px 18px; font-family:var(--f-mono); font-size:13px; line-height:1.62; color:var(--ink-2); overflow-x:auto; }
pre code { background:none; border:0; padding:0; font-size:inherit; word-break:normal; }

/* tables */
.scroll { overflow-x:auto; margin:0 0 20px; border-radius:3px; }
table { border-collapse:collapse; width:100%; min-width:460px; font-size:14.5px; background:var(--paper); border:1px solid var(--rule); border-radius:3px; }
table.narrow { width:auto; min-width:320px; }
thead th { text-align:left; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--muted); background:var(--surface); border-bottom:1px solid var(--rule); padding:9px 14px; white-space:nowrap; }
tbody td { padding:10px 14px; border-bottom:1px solid var(--rule-soft); vertical-align:top; line-height:1.5; }
tbody tr:last-child td { border-bottom:0; }
td code { white-space:nowrap; }
.t-key { font-family:var(--f-mono); font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap; }
a.t-key { color:var(--accent-ink); text-decoration:none; }
a.t-key:hover { color:var(--accent); text-decoration:underline; }
.t-type { font-family:var(--f-mono); font-size:12.5px; color:var(--muted); white-space:nowrap; }
td.chips { white-space:nowrap; }

/* chips */
.chip { display:inline-block; font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; padding:2px 7px; border-radius:2px; border:1px solid var(--rule); background:var(--surface); color:var(--muted); vertical-align:middle; white-space:nowrap; }
.chip.s { border-color:var(--accent); color:var(--accent-ink); background:var(--accent-wash); }
.chip.p { border-color:var(--amber); color:var(--amber); background:var(--amber-wash); }
.chip-key { display:flex; flex-wrap:wrap; gap:8px 20px; margin:0 0 22px; font-size:14px; color:var(--muted); max-width:var(--measure); }

/* callouts */
.note { max-width:var(--measure); border-left:2px solid var(--accent); background:var(--accent-wash); padding:13px 18px; margin:0 0 20px; border-radius:0 3px 3px 0; font-size:15px; }
.note p:last-child { margin-bottom:0; }
.note.limit { border-left-color:var(--amber); background:var(--amber-wash); }
.note .label, .label-inline { display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:5px; }
.note.limit .label { color:var(--amber); }
.label-inline { display:inline; margin-right:8px; color:var(--muted); }
.used-by { font-size:15px; }
.tree { background:var(--surface); border:1px solid var(--rule); border-radius:3px; padding:16px 18px; font-family:var(--f-mono); font-size:13px; line-height:1.85; white-space:pre; overflow-x:auto; margin-bottom:20px; }
.tree .path { color:var(--ink); font-weight:500; }
.tree .gloss { color:var(--muted); }
ul.refs { list-style:none; padding:0; max-width:none; }
ul.refs li { font-size:14.5px; }

/* dictionary filter */
.filter { display:flex; align-items:center; gap:12px; margin:0; }
.filter label { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }
.filter input { font:inherit; font-size:15px; padding:8px 12px; border:1px solid var(--rule); border-radius:3px; background:var(--paper); color:var(--ink); width:min(420px,100%); }
.filter input:focus { outline:2px solid var(--accent); outline-offset:1px; }

footer { border-top:1px solid var(--rule); background:var(--surface); margin-top:8px; }
.footer-inner { max-width:1140px; margin:0 auto; padding:28px 32px 40px; font-size:13.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px 28px; }
.footer-inner span { font-variant-numeric:tabular-nums; }

@media (max-width: 880px) {
  .shell { grid-template-columns:minmax(0,1fr); gap:0; padding:0 22px 72px; }
  .page { padding:0 22px 72px; }
  .toc { position:static; padding:32px 0 0; max-height:none; }
  .toc ol { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0 20px; }
  .masthead-inner { padding:18px 22px 28px; }
  .footer-inner { padding:24px 22px 34px; }
  main { padding-top:32px; }
}
@media (max-width: 480px) {
  .masthead-inner, .shell, .page, .footer-inner { padding-left:16px; padding-right:16px; }
  table { min-width:0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
