:root { --paper:#f6f5f1; --surface:#fffefa; --ink:#252923; --muted:#666b61; --line:#dcded4; --accent:#a63620; --mono:ui-monospace,SFMono-Regular,Consolas,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--accent); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.skip-link { position:fixed; top:-80px; left:16px; z-index:9; padding:8px 20px; background:var(--surface); }
.skip-link:focus { top:12px; }
.masthead { height:78px; position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 5vw; border-bottom:1px solid var(--line); background:var(--paper); }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); font-size:21px; font-weight:750; text-decoration:none; letter-spacing:-.7px; }
.mark { width:35px; height:35px; background:var(--accent); color:#fff; display:grid; place-items:center; border-radius:7px; font:700 25px/1 var(--mono); }
.brand small { margin-left:8px; padding-left:20px; border-left:1px solid var(--line); font:13px var(--mono); color:var(--muted); letter-spacing:0; }
.repository { color:var(--ink); font-size:13px; font-weight:600; text-decoration:none; }
.layout { display:grid; grid-template-columns:230px minmax(0,850px); gap:65px; max-width:1240px; margin:0 auto; padding:0 40px; }
.sidebar { position:sticky; top:110px; align-self:start; padding:15px 0 40px; max-height:calc(100vh - 120px); overflow:auto; }
.nav-label,.eyebrow { font:11px/1.6 var(--mono); font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:1.8px; }
.sidebar nav a { display:block; padding:6px 12px; margin-left:-12px; color:var(--muted); text-decoration:none; font-size:13px; line-height:1.65; border-left:2px solid transparent; }
.sidebar nav a:hover,.sidebar nav a[aria-current="location"] { border-color:var(--accent); color:var(--accent); background:#ebece3; }
.sidebar-note { margin-top:32px; padding-top:22px; border-top:1px solid var(--line); font:11px/1.9 var(--mono); color:var(--muted); }
.status-dot { display:inline-block; width:6px; height:6px; background:#47633e; border-radius:50%; margin-right:5px; }
main { min-width:0; padding-top:55px; }
.intro { padding-bottom:45px; }
h1 { font-size:clamp(42px,5vw,68px); line-height:1.06; letter-spacing:-3px; font-weight:650; margin:22px 0 27px; }
h1 em { font-family:Georgia,serif; font-weight:400; color:var(--accent); }
.lede { font-size:21px; line-height:1.5; margin-bottom:25px; color:var(--muted); max-width:650px; }
.intro p:not(.eyebrow):not(.lede) { max-width:680px; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:33px 0 22px; padding-top:24px; border-top:1px solid var(--line); }
.principles p { font-size:13px; line-height:1.6; margin:12px 0 0; color:var(--muted); }
.tag { display:inline-block; padding:3px 8px; font:11px var(--mono); border-radius:4px; }
.measured { background:#e2ead9; color:#34502b; }
.estimated { background:#f1e5ce; color:#6e4c17; }
.hypothesis { background:#e6e3ef; color:#594471; }
section:not(.intro) { padding:44px 0 30px; border-top:1px solid var(--line); }
h2 { font-size:27px; letter-spacing:-.8px; line-height:1.3; margin:0 0 25px; font-weight:650; }
h2 .section-number { font:11px var(--mono); display:block; color:var(--accent); letter-spacing:2px; margin-bottom:9px; }
h3 { font-size:18px; line-height:1.4; margin:30px 0 12px; letter-spacing:-.2px; }
p { margin:0 0 19px; }
ul,ol { padding-left:23px; margin-bottom:22px; }
li { padding-left:4px; margin:9px 0; }
code { font:12.5px/1.65 var(--mono); background:#e9ebe3; padding:3px 5px; border-radius:3px; overflow-wrap:anywhere; }
pre { position:relative; margin:22px 0; padding:23px 24px; border-radius:7px; background:#262d26; color:#eef1e6; overflow:auto; max-width:100%; line-height:1.7; }
pre code { padding:0; background:none; color:inherit; border-radius:0; white-space:pre; overflow-wrap:normal; font-size:12px; }
.highlight pre { margin:22px 0; }
.copy-button { float:right; position:sticky; right:0; top:0; margin:-7px -8px 5px 12px; border:1px solid #717b6d; background:#354032; color:#fff; font:11px var(--mono); border-radius:4px; padding:5px 9px; cursor:pointer; }
.table-scroll { width:100%; overflow:auto; margin:24px 0; border:1px solid var(--line); border-radius:6px; }
table { border-collapse:collapse; width:100%; background:var(--surface); font-size:13px; line-height:1.65; }
th { font:11px var(--mono); text-align:left; background:#eceee5; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; }
th,td { padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border:0; }
td:first-child { min-width:170px; }
table code { font-size:11px; }
.callout { border-left:3px solid var(--accent); background:#eeede5; padding:18px 21px; font-size:14px; margin:25px 0; }
details { border:1px solid var(--line); border-radius:6px; margin:14px 0; padding:16px 21px; background:var(--surface); }
summary { cursor:pointer; font-size:15px; font-weight:650; }
details[open]>summary { margin-bottom:20px; }
details p:last-child { margin-bottom:0; }
.quiet { color:var(--muted); font-size:13px; }
footer { border-top:1px solid var(--line); margin:45px 0 0; padding:33px 0 45px; display:flex; align-items:baseline; flex-wrap:wrap; gap:10px 22px; font-size:12px; color:var(--muted); }
footer strong { color:var(--ink); font-size:16px; letter-spacing:-.5px; }
footer a { margin-left:auto; }
@media (max-width:1000px) { .layout { gap:32px; grid-template-columns:190px minmax(0,1fr); padding:0 28px; } }
@media (max-width:760px) { .masthead { height:66px; padding:0 22px; } .brand { font-size:19px; } .brand small { display:none; } .layout { display:block; padding:0 22px; } .sidebar { position:static; max-height:none; padding:22px 0 0; } .sidebar nav { display:flex; overflow:auto; gap:16px; white-space:nowrap; padding-bottom:12px; border-bottom:1px solid var(--line); } .sidebar nav a { padding:3px 0; margin:0; border-left:0; } .nav-label,.sidebar-note { display:none; } main { padding-top:30px; } h1 { letter-spacing:-2px; } .intro { padding-bottom:27px; } .principles { gap:14px; } section:not(.intro) { padding:32px 0 20px; } pre { padding:20px 15px; } th,td { padding:11px 12px; } }
@media (max-width:400px) { .principles { grid-template-columns:1fr; gap:18px; } .principles>div { display:flex; gap:12px; align-items:baseline; } .principles p { margin:0; } .tag { min-width:85px; text-align:center; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { .masthead,.sidebar,.copy-button { display:none; } .layout { display:block; } body { background:white; } pre { white-space:pre-wrap; color:black; background:#eee; } section { break-inside:avoid; } }