:root {
  --bg:#fbfcfd; --surface:#ffffff; --fg:#14171f; --muted:#57606f;
  --accent:#b3541e; --accent-soft:rgba(179,84,30,.10);
  --line:rgba(20,23,31,.12); --line-strong:rgba(20,23,31,.22);
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:48px; --s6:96px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0b0d12; --surface:#12151d; --fg:#e9edf3; --muted:#8b95a5;
    --accent:#ff8a3d; --accent-soft:rgba(255,138,61,.12);
    --line:rgba(233,237,243,.10); --line-strong:rgba(233,237,243,.20);
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:46rem; margin:0 auto; padding:0 var(--s4); }

a { color:var(--accent); }
a:hover { text-decoration:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.skip { position:absolute; left:-9999px; top:0; background:var(--surface); color:var(--fg);
  padding:var(--s2) var(--s3); border:1px solid var(--line-strong); border-radius:6px; z-index:10; }
.skip:focus { left:var(--s3); top:var(--s3); }

.topbar { border-bottom:1px solid var(--line); padding:var(--s4) 0; }
.topbar .wrap { display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.brand { font-weight:650; letter-spacing:-.02em; font-size:1.1rem; color:var(--fg); text-decoration:none; }
.brand .dot { color:var(--accent); }
.crumb { color:var(--muted); font-size:.9rem; }

main { padding:var(--s5) 0 var(--s6); }
h1 { font-size:clamp(1.7rem,5vw,2.2rem); letter-spacing:-.02em; line-height:1.2; margin:0 0 var(--s2); }
h2 { font-size:1.2rem; letter-spacing:-.01em; margin:var(--s5) 0 var(--s3); scroll-margin-top:var(--s4); }
h3 { font-size:1.02rem; margin:var(--s4) 0 var(--s2); }
p, li { max-width:70ch; }
.updated { color:var(--muted); font-size:.9rem; margin:0 0 var(--s5); }
.lead { font-size:1.05rem; }

.box {
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:8px; padding:var(--s4); margin:var(--s4) 0;
}
.box p:first-child, .box ul:first-child { margin-top:0; }
.box p:last-child, .box ul:last-child { margin-bottom:0; }
.box h3 { margin-top:0; }

table { border-collapse:collapse; width:100%; margin:var(--s4) 0; font-size:.95rem; }
th, td { border:1px solid var(--line); padding:var(--s2) var(--s3); text-align:left; vertical-align:top; }
th { background:var(--surface); font-weight:600; }
.tablewrap { overflow-x:auto; }

.toc { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:var(--s4); margin:var(--s5) 0; }
.toc h2 { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin:0 0 var(--s3); }
.toc ol { margin:0; padding-left:1.4em; }
.toc li { margin:var(--s1) 0; }

code { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9em;
  background:var(--accent-soft); padding:1px 5px; border-radius:3px; }
dt { font-weight:600; margin-top:var(--s3); }
dd { margin:var(--s1) 0 0; }

footer { border-top:1px solid var(--line); padding:var(--s5) 0; color:var(--muted); font-size:.9rem; line-height:1.8; }
.foot-links { display:flex; flex-wrap:wrap; gap:var(--s3); margin-bottom:var(--s4); }
address { font-style:normal; }
.todo { background:var(--accent-soft); color:var(--accent); border-radius:3px; padding:0 5px;
  font-size:.85em; font-weight:600; }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }