:root {
  --bg: #F5F3EF; --card: #FFFFFF; --ink: #17171A; --muted: #6B6760;
  --line: #E2DED6; --accent: #9E4521; --copper: #B0502A;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121214; --card: #1C1C20; --ink: #EDEAE4; --muted: #A19C94;
    --line: #2A2A2F; --accent: #E08A5F; --copper: #C45F35; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.65 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
main { max-width: 42rem; margin: 0 auto; padding: 3rem 1rem 4rem; }
header { display: flex; align-items: center; gap: .8rem; margin-bottom: 2.25rem; }
header img { width: 44px; height: 44px; border-radius: 11px; }
header a { color: var(--ink); text-decoration: none; font: 700 1.15rem 'Bricolage Grotesque', sans-serif; letter-spacing: -.01em; }
h1 { font: 700 2.2rem/1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -.03em; margin: 0 0 .5rem; }
h2 { font: 600 1.2rem/1.3 'Bricolage Grotesque', sans-serif; margin: 2.2rem 0 .5rem; }
p, li { color: var(--ink); }
.muted { color: var(--muted); }
.lede { font-size: 1.1rem; padding: 1.1rem 1.25rem; background: var(--card); border: 1px solid var(--line); border-radius: 18px; margin: 1.5rem 0 0; }
ul { padding-left: 1.2rem; }
li { margin: .35rem 0; }
a { color: var(--accent); }
nav { display: flex; gap: 1.25rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .95rem; }
code{font-size:.92em;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:0 .3em}