:root{
  --paper:#FDFDFC; --ink:#0E1726; --muted:#5B6675; --faint:#8B94A3;
  --accent:#0B8F5A; --accent2:#06C27A; --line:#E5E9EE; --soft:#F4F7F5;
  --mint:#E9F2EB; --cream:#FBF1DF; --grid:rgba(14,23,38,.035);
  --code-bg:#0E1726; --code-ink:#D8E0EA;
  --serif:'Charter','Bitstream Charter','Sitka Text',Cambria,Georgia,serif;
  --sans:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0D141F; --ink:#E6EBF2; --muted:#93A0B0; --faint:#5E6B7C;
    --accent:#2FBF84; --accent2:#27AE74; --line:#1E2938; --soft:#121B28;
    --mint:#12281E; --cream:#241E12; --grid:rgba(230,235,242,.03);
    --code-bg:#080D15; --code-ink:#C9D3E0;
  }
}
:root[data-theme="dark"]{
  --paper:#0D141F; --ink:#E6EBF2; --muted:#93A0B0; --faint:#5E6B7C;
  --accent:#2FBF84; --accent2:#27AE74; --line:#1E2938; --soft:#121B28;
  --mint:#12281E; --cream:#241E12; --grid:rgba(230,235,242,.03);
  --code-bg:#080D15; --code-ink:#C9D3E0;
}
:root[data-theme="light"]{
  --paper:#FDFDFC; --ink:#0E1726; --muted:#5B6675; --faint:#8B94A3;
  --accent:#0B8F5A; --accent2:#06C27A; --line:#E5E9EE; --soft:#F4F7F5;
  --mint:#E9F2EB; --cream:#FBF1DF; --grid:rgba(14,23,38,.035);
  --code-bg:#0E1726; --code-ink:#D8E0EA;
}
*{box-sizing:border-box;margin:0;padding:0}
/* slim scrollbars */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--faint) 45%,transparent) transparent}
*::-webkit-scrollbar{width:5px;height:5px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--faint) 40%,transparent);border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:var(--accent2)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{background:var(--paper);color:var(--ink);font-family:var(--serif);line-height:1.75;font-size:19px}
a{color:inherit}
::selection{background:var(--accent2);color:#fff}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hbar{padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between}
.nav-toggle{border:1px solid var(--line);background:var(--paper);color:var(--muted);font-family:var(--mono);
  font-size:13px;line-height:1;border-radius:8px;width:30px;height:30px;cursor:pointer;margin-right:14px;transition:color .15s,border-color .15s}
.nav-toggle:hover,.nav-toggle:focus-visible{color:var(--accent);border-color:var(--accent2)}
.head-left{display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--sans)}
.brand-dot{width:11px;height:11px;border-radius:3px;background:var(--accent2);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent2) 16%,transparent)}
.brand-name{font-weight:800;font-size:16.5px;letter-spacing:-.2px}
.brand-name span{color:var(--muted);font-weight:500}
.nav{display:flex;gap:22px}
.nav a.lab-btn{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;
  border:1px solid var(--line);border-radius:8px;padding:8px 14px;transition:color .15s,border-color .15s}
.nav a.lab-btn:hover,.nav a.lab-btn:focus-visible{color:var(--accent);border-color:var(--accent2)}
a:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:2px}

/* chapter header - embedded at the top of the reading pane */
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.chap-head{border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:34px}
.chap-head h1{font-family:var(--sans);font-weight:800;font-size:clamp(27px,3.4vw,36px);letter-spacing:-.7px;line-height:1.12;margin-top:10px;text-wrap:balance}
.chap-head .dek{font-family:var(--serif);font-size:18.5px;line-height:1.6;color:var(--muted);margin-top:12px}
.metaline{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--faint);display:flex;gap:16px;flex-wrap:wrap}
.metaline b{color:var(--ink);font-weight:600}

/* ---------- full-width two-pane: resizable nav rail | fluid reading area ---------- */
:root{--nav-w:264px}
.article-wrap{display:grid;grid-template-columns:var(--nav-w) 6px minmax(0,1fr);height:calc(100vh - 60px)}
body{overflow:hidden}
body.nav-collapsed .article-wrap{grid-template-columns:0 0 minmax(0,1fr)}
body:not(.nav-dragging) .article-wrap{transition:grid-template-columns .2s ease}
@media (prefers-reduced-motion: reduce){ .article-wrap{transition:none !important} }

/* drag handle between the panes */
.rail-resizer{grid-column:2;cursor:col-resize;position:relative;background:transparent}
.rail-resizer::after{content:"";position:absolute;inset:0 2px;background:var(--line);opacity:0;transition:opacity .15s}
.rail-resizer:hover::after,body.nav-dragging .rail-resizer::after{opacity:1;background:var(--accent2)}
body.nav-dragging{user-select:none;cursor:col-resize}
body.nav-collapsed .rail-resizer{display:none}

/* left book navigation - anchored to the viewport edge */
.booknav{grid-column:1;background:var(--soft);padding:34px 14px 34px 22px;overflow-x:hidden;overflow-y:auto;white-space:nowrap}
body.nav-collapsed .booknav{padding-left:0;padding-right:0;border-right:0}
.booknav-inner{padding-right:6px;white-space:normal;width:calc(var(--nav-w) - 36px);min-width:190px}
.bn-part{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:20px 0 8px}
.bn-part:first-child{margin-top:0}
.booknav a,.booknav span.draft{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:baseline;text-decoration:none;
  font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--muted);padding:5px 8px 5px 6px;border-radius:7px;transition:background .15s,color .15s}
.booknav a .n,.booknav span.draft .n{font-family:var(--mono);font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.booknav a:hover{background:var(--paper);color:var(--ink)}
.booknav a.current{background:var(--mint);color:var(--accent);font-weight:600}
.booknav a.current .n{color:var(--accent)}
.booknav .draft{color:var(--faint)}
.booknav .draft::after{content:"·";margin-left:4px}
.bn-divider{border-top:1px solid var(--line);margin:18px 8px 14px 6px}
.booknav a.bn-single{grid-template-columns:1fr;color:var(--muted)}
.rev-note{color:var(--muted);font-size:17px}
.rev{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:13px 2px;border-bottom:1px solid var(--line)}
.rev-list{margin-bottom:2.2em;border-top:1px solid var(--line)}
.rev .rv-name{font-family:var(--sans);font-weight:700;font-size:16px}
.rev .rv-aff{color:var(--muted);font-size:15.5px}
.rev .rv-scope{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--accent);white-space:nowrap}
.reading-pane{grid-column:3;min-width:0;overflow-y:auto;overscroll-behavior:contain}
.prose{max-width:76ch;margin:0;padding:44px 40px 30px 60px}
body.nav-collapsed .prose{margin:0 auto;padding-left:40px}

/* ---------- prose typography ---------- */
.prose p{margin-bottom:1.35em}
.prose .lead{font-size:21px;line-height:1.65;color:var(--ink)}
.prose .lead::first-letter{font-family:var(--sans);font-weight:800;font-size:3.1em;float:left;line-height:.85;padding:4px 10px 0 0;color:var(--accent)}
.prose h2{font-family:var(--sans);font-weight:750;font-size:26px;letter-spacing:-.4px;line-height:1.25;margin:2.2em 0 .7em;scroll-margin-top:84px;text-wrap:balance}
.prose h2 .sec-no{font-family:var(--mono);font-weight:600;font-size:14px;color:var(--accent);margin-right:10px;vertical-align:.18em}
.prose h3{font-family:var(--sans);font-weight:700;font-size:19px;margin:1.8em 0 .5em;scroll-margin-top:84px}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose strong{font-weight:700}
.prose ul,.prose ol{margin:0 0 1.35em 1.3em}
.prose li{margin-bottom:.45em}
.prose blockquote{margin:2.2em 0;padding:0;color:var(--ink);font-style:italic;font-size:21px;line-height:1.6;max-width:56ch}
.prose blockquote::before{content:"";display:block;width:34px;height:2px;background:var(--accent2);margin-bottom:14px}

.callout{position:relative;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);
  padding:20px 2px 16px;margin:2.4em 0;font-size:17px;line-height:1.7}
.callout .co-label{position:absolute;top:-8px;left:0;background:var(--paper);padding-right:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.callout.claim{border-top-color:#C07714}
.callout.claim .co-label{color:#C07714}

.prose pre{background:var(--code-bg);color:var(--code-ink);font-family:var(--mono);font-size:13.5px;line-height:1.7;
  border-radius:10px;padding:18px 22px;overflow-x:auto;margin:1.8em 0}
.prose code{font-family:var(--mono);font-size:.82em}
.prose p code,.prose li code{background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:.1em .4em}
.cm{color:#7B8FA6}.ck{color:#57C08A}.cs{color:#E0B36A}

figure{margin:2em 0}
.fig-frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
:root[data-theme="dark"] .fig-frame, .dark-fig{background:#fff}
.fig-ph{aspect-ratio:2.1/1;display:grid;place-items:center;background:
  repeating-linear-gradient(45deg,var(--soft) 0 14px,transparent 14px 28px)}
.fig-ph span{font-family:var(--mono);font-size:12px;color:var(--faint);background:var(--paper);border:1px dashed var(--line);border-radius:8px;padding:8px 14px}
figcaption{font-family:var(--mono);font-size:12px;color:var(--faint);text-align:center;margin-top:10px;line-height:1.5}

.footnotes{margin-top:3em;border-top:1px solid var(--line);padding-top:1.4em;font-size:15px;color:var(--muted)}
.footnotes .fn-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:.8em}
.fn-ref{font-family:var(--mono);font-size:.72em;color:var(--accent);vertical-align:super;text-decoration:none;padding:0 2px}

/* prev / next */
.chapter-nav{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:3.4em 0 4em;border-top:1px solid var(--line);padding-top:20px}
.chapter-nav a{text-decoration:none;transition:color .15s}
.chapter-nav a:hover .t{color:var(--accent)}
.chapter-nav .dir{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:6px}
.chapter-nav .t{font-family:var(--sans);font-weight:700;font-size:15px;line-height:1.4;transition:color .15s}
.chapter-nav .next{text-align:right}
.chapter-nav span.next .t{color:var(--muted)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:20px}
.foot-in{padding:22px 24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--faint)}
.foot-in a{color:var(--faint);text-decoration:none}
.foot-in a:hover{color:var(--accent)}
.cc-badge{display:inline-flex;align-items:center;gap:5px}
.cc-badge .cc-i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--faint);font-family:var(--sans);font-size:8px;font-weight:800;letter-spacing:0;color:var(--faint);transition:border-color .15s,color .15s}
.cc-badge .cc-by{position:relative}
.cc-badge .cc-by::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--faint);position:absolute;top:3.5px;transition:background .15s}
.cc-badge .cc-by::after{content:"";width:9px;height:6px;border-radius:5px 5px 0 0;background:var(--faint);position:absolute;bottom:3px;transition:background .15s}
.cc-badge .cc-t{margin-left:4px;font-size:11px}
.cc-badge:hover .cc-i{border-color:var(--accent);color:var(--accent)}
.cc-badge:hover .cc-by::before,.cc-badge:hover .cc-by::after{background:var(--accent)}

/* ---------- small screens: nav becomes an off-canvas drawer ---------- */
.nav-scrim{display:none}
@media (max-width:880px){
  .article-wrap{display:block;height:auto}
  body{overflow:auto}
  .reading-pane{overflow:visible}
  .rail-resizer{display:none}
  .booknav,body.nav-collapsed .booknav{position:fixed;z-index:30;top:60px;bottom:0;left:0;width:min(320px,85vw);
    padding:26px 18px 30px 22px;border-right:1px solid var(--line);box-shadow:14px 0 40px rgba(8,13,21,.18);
    transform:translateX(-105%);transition:transform .22s ease;overflow-y:auto;white-space:normal}
  body.nav-open .booknav{transform:translateX(0)}
  @media (prefers-reduced-motion: reduce){ .booknav{transition:none} }
  .booknav-inner{position:static;width:auto;min-width:0;max-height:none;padding-right:0}
  .nav-scrim{display:block;position:fixed;z-index:25;inset:0;background:rgba(8,13,21,.45);
    opacity:0;pointer-events:none;transition:opacity .2s ease}
  body.nav-open .nav-scrim{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
  .prose,body.nav-collapsed .prose{margin:0 auto;padding:32px 22px 26px}
  .hbar{padding:0 16px}
  .head-left{min-width:0;margin-right:10px}
  .brand-name{font-size:15.5px}
  .nav a.lab-btn{white-space:nowrap;padding:7px 11px;font-size:12px}
  .foot-in{padding:20px 22px}
  .chapter-nav{grid-template-columns:1fr}
  .chapter-nav a,.chapter-nav span.next{grid-column:auto !important}
  .chapter-nav .next{text-align:left}
}
@media (max-width:600px){
  body{font-size:17.5px}
  .prose,body.nav-collapsed .prose{padding:28px 16px 24px}
  .prose .lead{font-size:19px}
  .prose .lead::first-letter{font-size:2.7em;padding:3px 8px 0 0}
  .prose h2{font-size:23px}
  .prose h3{font-size:18px}
  .chap-head .dek{font-size:17px}
  .prose blockquote{font-size:19px}
  .callout{font-size:16px}
  .metaline{gap:12px}
}
@media (max-width:420px){
  .brand-name span{display:none}
  .hbar{padding:0 12px}
}