:root {
  --paper:#f3f5f8; --surface:#fff; --surface-2:#eef2f6; --ink:#17202b; --muted:#5e6a78;
  --line:#d6dde6; --blue:#1261a6; --blue-soft:#dcecff; --teal:#087a72; --teal-soft:#d8efeb;
  --amber:#9a5b12; --amber-soft:#f7ead3; --red:#a13a37; --red-soft:#f7dfdd;
  --shadow:0 16px 40px -32px rgba(16,28,44,.45);
}
@media (prefers-color-scheme:dark) {
  :root {
    --paper:#0b1119; --surface:#121b27; --surface-2:#182433; --ink:#edf3fa; --muted:#9aa9bb;
    --line:#29394d; --blue:#75baff; --blue-soft:#123255; --teal:#64d4c7; --teal-soft:#123a38;
    --amber:#f1bd73; --amber-soft:#3d2b14; --red:#ff918a; --red-soft:#44201f;
    --shadow:0 18px 42px -30px rgba(0,0,0,.85);
  }
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif }
a { color:var(--blue); text-underline-offset:3px }
code,.mono { font-family:ui-monospace,"Cascadia Mono",Consolas,monospace }
code { background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:.08em .32em; font-size:.88em }
.skip { position:absolute; left:-9999px; top:8px; background:var(--surface); padding:8px 12px; z-index:100 }
.skip:focus { left:8px }
.wrap { width:min(1160px,calc(100% - 36px)); margin-inline:auto }
.hero { padding:58px 0 42px; border-bottom:1px solid var(--line); background:linear-gradient(145deg,var(--surface),var(--paper) 70%) }
.eyebrow { color:var(--teal); font:700 .73rem/1.2 ui-monospace,Consolas,monospace; letter-spacing:.14em; text-transform:uppercase }
h1,h2,h3,h4 { line-height:1.15; text-wrap:balance }
h1 { font-size:clamp(2.3rem,6vw,4.7rem); letter-spacing:-.05em; margin:.18em 0 .15em }
.lead { max-width:820px; color:var(--muted); font-size:clamp(1.03rem,2vw,1.2rem) }
.topnav { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--paper) 90%,transparent); backdrop-filter:blur(12px) }
.topnav .wrap { min-height:48px; display:flex; align-items:center; gap:18px; overflow-x:auto; white-space:nowrap }
.topnav a { color:var(--muted); text-decoration:none; font-size:.82rem; font-weight:700 }
.topnav a:first-child { color:var(--ink); margin-right:auto }
.doc-shell { width:min(1160px,calc(100% - 36px)); margin:0 auto; display:grid; grid-template-columns:250px minmax(0,1fr); gap:42px; padding:44px 0 76px }
.toc { position:sticky; top:68px; align-self:start; max-height:calc(100vh - 90px); overflow:auto; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:var(--shadow) }
.toc strong { display:block; margin-bottom:8px; font:700 .7rem/1.3 ui-monospace,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.toc ul { list-style:none; margin:0; padding-left:0 }
.toc ul ul { padding-left:14px }
.toc li { margin:5px 0 }
.toc a { text-decoration:none; font-size:.84rem }
.prose { min-width:0; max-width:840px }
.prose h2 { margin:2.1em 0 .55em; padding-top:10px; border-top:1px solid var(--line); font-size:clamp(1.55rem,3vw,2.25rem); letter-spacing:-.025em }
.prose h2:first-child { margin-top:0; border-top:0; padding-top:0 }
.prose h3 { margin:1.6em 0 .45em; font-size:1.22rem }
.prose h4 { margin:1.3em 0 .35em }
.prose p { margin:.65em 0 }
.prose ul,.prose ol { padding-left:1.35rem }
.prose li + li { margin-top:.3em }
.prose blockquote { margin:1.25em 0; padding:10px 16px; border-left:4px solid var(--teal); background:var(--teal-soft); border-radius:0 8px 8px 0 }
.prose blockquote p { margin:.3em 0 }
.prose table { width:100%; border-collapse:collapse; margin:1.25em 0; display:block; overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:9px }
.prose th,.prose td { text-align:left; vertical-align:top; padding:9px 11px; border-bottom:1px solid var(--line); min-width:110px }
.prose th { background:var(--surface-2); color:var(--muted); font:700 .7rem/1.3 ui-monospace,Consolas,monospace; letter-spacing:.06em; text-transform:uppercase }
.prose tr:last-child td { border-bottom:0 }
.prose pre { overflow-x:auto; background:#0a111b; color:#e6edf5; padding:16px 18px; border-radius:9px; border:1px solid #29384b; line-height:1.6 }
.prose pre code { border:0; padding:0; background:transparent; color:inherit }
.prose hr { border:0; border-top:1px solid var(--line); margin:2em 0 }
.prose img { max-width:100%; height:auto; border:1px solid var(--line); border-radius:10px }
.flow-diagram { margin:1.3em 0; padding:18px; display:grid; gap:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow) }
.flow-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:center }
.flow-row.outputs { grid-template-columns:repeat(4,minmax(0,1fr)) }
.flow-node { min-height:64px; display:grid; place-items:center; padding:10px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); text-align:center; font-weight:650 }
.flow-node.accent { border-color:var(--teal); background:var(--teal-soft) }
.flow-arrow { color:var(--teal); font-size:1.55rem; font-weight:800 }
.note { margin-top:22px; padding:12px 16px; border-left:4px solid var(--amber); background:var(--amber-soft); border-radius:0 8px 8px 0 }
footer { border-top:1px solid var(--line); padding:30px 0 52px; color:var(--muted); font-size:.84rem }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px }
@media (max-width:900px) { .doc-shell { grid-template-columns:1fr } .toc { position:static; max-height:none } }
@media (max-width:600px) { .wrap,.doc-shell { width:min(100% - 24px,1160px) } .hero { padding-top:42px } .flow-row,.flow-row.outputs { grid-template-columns:1fr } .flow-arrow { transform:rotate(90deg); justify-self:center } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } }
@media print { .topnav,.toc,.skip { display:none } .doc-shell { display:block; width:100% } body { background:#fff;color:#111 } }