/* Generated by tools/build-guide.py — edit the script, not this file. */
:root{
  --bg:#ffffff; --tint:#eaf1ff; --tint2:#f5f9ff; --line:#d9e4f6;
  --ink:#14243d; --mut:#5b6f8f; --brand:#3d87ea; --deep:#1e4fd8;
  --warn:#a86a00; --warn-bg:#fdf3dd;
  --mono:"Cascadia Mono",Consolas,ui-monospace,monospace;
}
*{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.65 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1160px; margin:0 auto; padding:0 28px; }

.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav-in{ display:flex; align-items:center; gap:26px; height:66px; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; }
.logo b{ color:var(--brand); }
.nav-links{ display:flex; gap:22px; margin-left:12px; font-size:13.5px; color:var(--mut); font-weight:600; }
.nav-links a:hover{ color:var(--ink); }
.nav-spacer{ flex:1; }
.btn{ display:inline-block; white-space:nowrap; border-radius:999px; padding:10px 20px;
  font-size:13.5px; font-weight:700; border:1.5px solid var(--line); }
.btn.ghost{ color:var(--ink); background:#fff; border-color:#c7d7f2; }
.btn.solid{ background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 8px 24px rgba(61,135,234,.30); }
@media (max-width:960px){ .nav-links{ display:none; } }

.hero{ background:linear-gradient(180deg,var(--tint2),#fff);
  border-bottom:1px solid var(--line); padding:46px 0 36px; }
.crumb{ font-size:12.5px; color:var(--mut); font-weight:600; margin-bottom:12px; }
.crumb a{ color:var(--deep); }
h1{ font-size:clamp(26px,4.2vw,36px); letter-spacing:-.02em; line-height:1.2; }
.lead{ color:var(--mut); font-size:16.5px; margin-top:14px; max-width:66ch; }
.lead.sub{ font-size:14px; margin-top:8px; }
main{ padding:40px 0 46px; }

/* ---- index ---- */
.partrow{ display:grid; grid-template-columns:230px 1fr; gap:34px;
  border-top:2px solid var(--line); padding:26px 0 6px; margin-top:20px; }
.partrow:first-child{ border-top:none; margin-top:0; padding-top:0; }
.parthd h2{ font-size:20px; letter-spacing:-.015em; }
.parthd .meta{ color:var(--mut); font-size:12.5px; font-weight:600; margin-top:6px; }
.chaps{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.chap{ border:1px solid var(--line); border-radius:12px; padding:13px 16px; background:#fff; }
.chap:hover{ border-color:var(--brand); background:var(--tint2); }
.chap b{ font-size:14.5px; display:block; letter-spacing:-.01em; }
.chap span{ color:var(--mut); font-size:12px; font-weight:600; }
.chap .n{ font-family:var(--mono); color:var(--brand); font-size:12px; margin-right:6px; }
@media(max-width:900px){ .chaps{ grid-template-columns:1fr; }
  .partrow{ grid-template-columns:1fr; gap:14px; } }

/* ---- chapter ---- */
.doc{ display:grid; grid-template-columns:250px 1fr; gap:44px; }
@media(max-width:900px){ .doc{ grid-template-columns:1fr; } }
.toc{ font-size:13.5px; align-self:start; position:sticky; top:86px; }
.toc .lbl{ font-size:11px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mut); }
.toc ul{ list-style:none; margin:10px 0 0; padding:0; border-left:2px solid var(--line); }
.toc li a{ display:block; padding:6px 0 6px 14px; color:var(--mut); font-weight:600; }
.toc li a:hover{ color:var(--ink); }
.toc li.on a{ color:var(--deep); border-left:2px solid var(--deep);
  margin-left:-2px; padding-left:14px; }
.toc .n{ font-family:var(--mono); font-size:11px; margin-right:7px; opacity:.8; }
.toc-all{ margin-top:14px; font-size:12.5px; }
.toc-all a{ color:var(--deep); font-weight:700; }

/* Byline. The date here is the same value the page's dateModified carries --
   a structured date with nothing visible beside it is the pattern engines
   treat with most suspicion, because it is the cheap way to fake freshness. */
.byline{ margin-top:14px; font-size:13.5px; color:var(--mut); }
.byline b{ color:var(--ink); }
.byline .sep{ margin:0 8px; opacity:.5; }

.prose{ max-width:76ch; min-width:0; }
.docs-num{ font-family:var(--mono); color:var(--brand); font-weight:700; font-size:.72em; }
.docs-num.big{ font-size:.6em; }
.prose h2{ font-size:23px; margin:34px 0 10px; letter-spacing:-.015em; }
.docs-sec{ scroll-margin-top:88px; }

.docs-body{ color:var(--ink); }
.docs-body p{ margin:0 0 13px; line-height:1.7; }
.docs-body a{ color:var(--deep); text-decoration:underline; text-underline-offset:2px; }
.docs-body ul, .docs-body ol{ margin:0 0 14px; padding-left:22px; }
.docs-body li{ margin-bottom:6px; }
.docs-body dl{ margin:0 0 15px; }
.docs-body dt{ font-weight:700; margin-top:12px; }
.docs-body dd{ margin:2px 0 0; color:var(--mut); }
.docs-body table{ width:100%; border-collapse:collapse; margin:0 0 15px; font-size:13.5px; }
.docs-body th,.docs-body td{ text-align:start; padding:8px 10px;
  border-bottom:1px solid var(--line); vertical-align:top; }
.docs-body th{ font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--mut); }
.docs-body .scroller{ overflow-x:auto; margin-bottom:15px; }
.docs-body .scroller table{ margin-bottom:0; min-width:520px; }
.docs-body figure{ margin:0 0 20px; }
.docs-body figure img{ width:100%; height:auto; border:1px solid var(--line);
  border-radius:12px; background:var(--tint2); }
.docs-body figcaption{ margin-top:8px; font-size:12.5px; color:var(--mut); }
.docs-body code{ background:var(--tint2); border:1px solid var(--line); border-radius:5px;
  padding:1px 5px; font-family:var(--mono); font-size:.87em; }
.docs-body kbd{ background:var(--tint2); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:5px; padding:1px 6px; font-family:var(--mono); font-size:.82em; font-weight:600; }
.docs-body .ui{ background:var(--tint); color:var(--deep); border:1px solid var(--line);
  border-radius:5px; padding:1px 7px; font-size:.88em; font-weight:600; white-space:nowrap; }
.docs-body .note{ border:1px solid var(--line); border-left:3px solid var(--brand);
  background:var(--tint2); border-radius:10px; padding:13px 16px; margin:0 0 15px; }
.docs-body .note.warn{ border-left-color:var(--warn); background:var(--warn-bg);
  border-color:#f0dcb8; }
.docs-body .note p:last-child{ margin-bottom:0; }
.docs-body .note b.lbl{ display:block; margin-bottom:4px; }
.docs-body .steps{ counter-reset:step; list-style:none; padding-left:0; }
.docs-body .steps > li{ counter-increment:step; position:relative;
  padding-left:34px; margin-bottom:10px; }
.docs-body .steps > li::before{ content:counter(step); position:absolute; left:0; top:1px;
  width:23px; height:23px; border-radius:50%; background:var(--tint); color:var(--deep);
  border:1px solid #c7d7f2; font-size:11.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; }

.pager{ display:flex; gap:14px; margin-top:38px; padding-top:22px; border-top:1px solid var(--line); }
.pager a{ flex:1; border:1px solid var(--line); border-radius:12px; padding:13px 16px; }
.pager a:hover{ border-color:var(--brand); background:var(--tint2); }
.pager span{ display:block; color:var(--mut); font-size:11.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; }
.pager b{ font-size:14.5px; }
.pager .nx{ text-align:right; }
@media(max-width:620px){ .pager{ flex-direction:column; } .pager .nx{ text-align:left; } }

footer{ border-top:1px solid var(--line); padding:36px 0 50px; background:var(--tint2); }
.foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.foot .tag{ color:var(--mut); font-size:13px; font-weight:600; }
.foot .spacer{ flex:1; }
.foot .cols{ display:flex; gap:22px; font-size:13px; color:var(--mut); font-weight:600; flex-wrap:wrap; }
.foot .cols a:hover{ color:var(--ink); }
.copyright{ margin-top:20px; font-size:12px; color:var(--mut); }