:root{
  --surface:#ffffff; --ink:#111827; --body:#374151; --muted:#6b7280;
  --hairline:#e5e7eb; --accent:#2563eb; --accent-soft:#eff6ff;
  --fill:#f3f4f6;
}
@media (prefers-color-scheme: dark){
  :root{
    --surface:#0f1115; --ink:#f3f4f6; --body:#d1d5db; --muted:#9ca3af;
    --hairline:#262b36; --accent:#3b82f6; --accent-soft:#16233b;
    --fill:#1a1f29;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--surface); color:var(--body);
  font-family:Inter,-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--accent-soft)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

header{
  position:sticky; top:0; background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--hairline); z-index:10;
}
.bar{
  max-width:720px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.wordmark{font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--ink)}
.wordmark span{color:var(--accent)}
.bar nav{display:flex; flex-wrap:wrap; gap:16px}
.bar a.nav{font-size:13.5px; font-weight:600; color:var(--muted)}
.bar a.nav:hover{color:var(--accent); text-decoration:none}
.bar a.nav.active{color:var(--ink)}

main{max-width:720px; margin:0 auto; padding:56px 24px 48px}
h1{
  font-size:clamp(30px,6vw,38px); font-weight:800; letter-spacing:-.03em;
  line-height:1.15; color:var(--ink); margin:0 0 10px;
}
.lede{font-size:17px; color:var(--body); max-width:56ch; margin:0}
.meta{margin-top:18px; font-size:13.5px; color:var(--muted)}
.meta b{color:var(--body); font-weight:600}

.summary{
  margin:36px 0 8px; padding:20px 22px; background:var(--fill);
  border-radius:14px; font-size:15px;
}
.summary ul{margin:0; padding-left:18px}
.summary li{margin:6px 0}
.summary li::marker{color:var(--accent)}

h2{
  font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--ink);
  margin:44px 0 10px; padding-top:28px; border-top:1px solid var(--hairline);
  scroll-margin-top:80px;
}
h2:first-of-type{border-top:none; padding-top:8px}
h3{font-size:16px; font-weight:600; color:var(--ink); margin:22px 0 6px}
p{margin:10px 0}
ul{padding-left:22px; margin:10px 0}
li{margin:5px 0}
.note{font-size:14px; color:var(--muted)}
code{
  font-family:ui-monospace,Consolas,monospace; font-size:.92em;
  background:var(--fill); border-radius:6px; padding:1px 6px;
}
table{border-collapse:collapse; width:100%; margin:14px 0; font-size:14px}
th,td{border:1px solid var(--hairline); padding:8px 10px; text-align:left; vertical-align:top}
th{background:var(--fill); font-weight:600; color:var(--ink)}

footer{border-top:1px solid var(--hairline); margin-top:56px}
.foot{
  max-width:720px; margin:0 auto; padding:22px 24px 40px;
  font-size:13.5px; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:6px 24px; justify-content:space-between;
}
@media print{ header,footer{display:none} main{padding-top:0} }