:root { --paper:#fff; --surface:#fafafa; --soft:#f5f5f4; --ink:#1d1d1b; --body-ink:#535350; --muted:#73736f; --line:#e5e5e3; --code-text:#363632; --accent:#37634c; color-scheme:light }
:root[data-theme="dark"] { --paper:#000; --surface:#0c0c0c; --soft:#151515; --ink:#f3f3f3; --body-ink:#c3c3c3; --muted:#969696; --line:#272727; --code-text:#dedede; --accent:#b9cdc2; color-scheme:dark }
* { box-sizing:border-box }
[hidden] { display:none!important }
html { scroll-behavior:smooth; scroll-padding-top:105px }
body { margin:0; background:var(--paper); color:var(--body-ink); font:15px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased }
a { color:var(--accent); text-underline-offset:4px }
button,select { font:inherit; color:var(--ink); cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:6px 11px }
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:4px }
.skip { position:fixed; top:-70px; left:20px; z-index:50; padding:10px 16px; background:var(--ink); color:var(--paper) }
.skip:focus { top:12px }
.topbar { height:72px; position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:34px; padding:0 30px; border-bottom:1px solid var(--line); background:var(--paper) }
.toplinks { display:flex; align-self:stretch; gap:28px; align-items:center }
.toplinks a { color:var(--muted); text-decoration:none; font-size:14px; font-weight:500; height:100%; display:flex; align-items:center; border-bottom:2px solid transparent }
.toplinks a.active { color:var(--ink); border-color:var(--ink) }
.theme-toggle { margin-left:auto; display:flex; gap:7px; align-items:center; font-size:12px; min-width:79px; justify-content:center }
.theme-icon { display:flex; align-items:center }
.menu-toggle svg { display:block }
.menu-toggle { display:none }
.sidebar { position:fixed; top:72px; bottom:0; left:0; width:256px; overflow:auto; padding:30px 20px 60px; border-right:1px solid var(--line); background:var(--paper) }
.sidebar-title { font-size:11px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin:0 12px 15px }
.sidebar a { display:block; padding:7px 12px; margin:2px 0; font-size:12px; line-height:1.6; color:var(--muted); text-decoration:none; border-radius:6px }
.sidebar .toc-h2 { color:var(--body-ink); font-weight:600; margin-top:12px }
.sidebar .toc-h3 { padding-left:23px }
.sidebar a:hover,.sidebar a.active { color:var(--ink); background:var(--soft) }
main { margin-left:256px; padding:54px 64px 120px; max-width:1500px }
.breadcrumb { font-size:12px; color:var(--muted); margin-bottom:14px }
h1,h2,h3,h4 { color:var(--ink); line-height:1.3; font-weight:600; letter-spacing:-.025em; scroll-margin-top:100px }
h1 { font-size:42px; margin:0 0 24px; letter-spacing:-.04em }
h2 { font-size:27px; margin:64px 0 22px; padding-top:34px; border-top:1px solid var(--line) }
h3 { font-size:20px; margin:36px 0 16px }
h4 { font-size:16px; margin:26px 0 12px }
p { margin:0 0 18px }
li { margin:5px 0 }
strong { color:var(--ink); font-weight:600 }
hr { border:0; border-top:1px solid var(--line); margin:34px 0 }
blockquote { margin:24px 0; padding:18px 22px; border-left:3px solid var(--accent); background:var(--soft); border-radius:0 6px 6px 0 }
blockquote p:last-child { margin-bottom:0 }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.87em; background:var(--soft); padding:2px 5px; border-radius:3px; overflow-wrap:anywhere }
pre { margin:0; padding:22px; overflow:auto; font:12px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace; tab-size:4; color:var(--code-text) }
pre code { background:none; padding:0; border-radius:0; font:inherit; overflow-wrap:normal }
.code-example { border:1px solid var(--line); background:var(--surface); border-radius:9px; margin:20px 0 28px; overflow:hidden }
.code-toolbar { display:flex; align-items:center; justify-content:space-between; padding:9px 14px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; min-height:44px }
.code-toolbar select { font-size:11px; padding:3px 8px; background:var(--soft) }
.code-toolbar button { font-size:11px; padding:3px 8px; border:0; color:var(--muted); background:none }
.code-toolbar button:hover { color:var(--ink) }
table { width:100%; margin:22px 0 30px; border-collapse:collapse; font-size:13px; text-align:left; display:block; overflow:auto }
th,td { border-bottom:1px solid var(--line); padding:12px 16px; vertical-align:top; min-width:130px }
th { color:var(--ink); background:var(--surface); font-size:12px; font-weight:600 }
details { margin:18px 0; border:1px solid var(--line); border-radius:8px; padding:0 20px; background:var(--surface) }
summary { cursor:pointer; padding:17px 0; color:var(--ink); font-weight:500 }
details[open] { padding-bottom:8px }
details h3:first-of-type { margin-top:15px }
.harness-callout { background:#101914; color:#d0dfd5; border:1px solid #304c39; padding:24px; border-radius:10px; margin:28px 0 }
.harness-callout h3,.harness-callout strong { color:#eef6f0 }
.harness-callout a { color:#a8d3b7 }
.harness-callout code { color:#d0dfd5; background:#1d2b22 }
.sharing-viz table { display:table }
.sharing-viz th,.sharing-viz td { min-width:0 }
.harness-callout pre { color:#d0dfd5; background:#0c140f; border-radius:6px }
.comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:24px 0 }
.comparison > div { min-width:0 }
.comparison-label { margin:0 0 12px; color:var(--ink); font-size:14px; font-weight:600 }
.comparison .code-example { margin:12px 0 20px }
.comparison pre { padding:16px; font-size:11.5px; white-space:pre-wrap }
.comparison pre code { overflow-wrap:anywhere }
.comparison h3 { margin-top:0 }
.guide-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:14px; margin:28px 0 42px }
.guide-cards p { margin:0; padding:20px; border:1px solid var(--line); border-radius:9px; background:var(--surface); font-size:13px }
.guide-cards a { display:inline-block; margin-bottom:6px; font-size:15px }
.diagram { border:1px solid var(--line); background:var(--surface); padding:22px; border-radius:8px; white-space:pre-wrap; font:12px/1.9 ui-monospace,monospace; overflow:auto }
footer { border-top:1px solid var(--line); margin-top:60px; padding-top:20px; font-size:12px; color:var(--muted) }
@media(min-width:1700px) { main { padding-left:88px; padding-right:88px } }
@media(max-width:1100px) { .sidebar { width:220px } main { margin-left:220px; padding:40px 32px 90px } .toplinks { gap:20px } }
@media(max-width:760px) { .topbar { height:62px; gap:16px; padding:0 16px } .toplinks { gap:13px } .toplinks a { font-size:12px } .menu-toggle { display:block; padding:3px 7px; font-size:17px } .theme-toggle { min-width:35px; padding:5px 7px } .theme-label { display:none } .sidebar { display:none; top:62px; width:280px; z-index:15; box-shadow:12px 0 40px #0003 } body.menu-open .sidebar { display:block } main { margin-left:0; padding:32px 20px 70px } h1 { font-size:32px } h2 { font-size:25px } pre { padding:16px; font-size:11px } .comparison { grid-template-columns:1fr } }
@media(max-width:650px) { .topbar { display:grid; grid-template-columns:auto 1fr auto; height:102px; gap:0 12px; padding-top:6px } .toplinks { grid-column:1/-1; grid-row:2; height:40px; justify-content:space-between } .theme-toggle { grid-column:3; grid-row:1 } .sidebar { top:102px } html { scroll-padding-top:132px } h1,h2,h3,h4 { scroll-margin-top:132px } }
@media(max-width:380px) { .topbar { height:112px } .toplinks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); height:64px; gap:0 12px } .toplinks a { min-width:0 } .sidebar { top:112px } html { scroll-padding-top:142px } h1,h2,h3,h4 { scroll-margin-top:142px } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } }