:root {
  --bg:#FAF6EF; --surface:#FFFDF8; --ink:#2B2622; --ink-soft:#6B615A;
  --rule:#E3D8C7; --accent:#B54A29; --code-bg:#F2EADE;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#191614; --surface:#211D1A; --ink:#EFE7DA; --ink-soft:#A99C90;
    --rule:#3A332C; --accent:#E08258; --code-bg:#262019;
  }
}
* { box-sizing: border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family: ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.62;
}
.wrap { max-width:720px; margin:0 auto; padding:56px 22px 90px; }
a { color:var(--accent); }
a.plain { text-decoration:none; }
header { border-bottom:2px solid var(--accent); padding-bottom:18px; margin-bottom:10px; }
h1 { font-size:1.95rem; line-height:1.15; margin:0 0 8px; letter-spacing:-0.01em; }
h2 { font-size:1.2rem; margin:38px 0 10px; }
h3 { font-size:1rem; margin:26px 0 6px; }
p, li { margin:0 0 13px; }
ul { padding-left:1.25rem; }
.lede { color:var(--ink-soft); margin:0; }
.meta { color:var(--ink-soft); font-size:.85rem; margin:8px 0 0; }
.card {
  display:block; background:var(--surface); border:1px solid var(--rule);
  border-radius:10px; padding:18px 20px; margin:0 0 14px; text-decoration:none; color:inherit;
}
.card:hover { border-color:var(--accent); }
.card h2 { margin:0 0 4px; font-size:1.1rem; color:var(--accent); }
.card p { margin:0; color:var(--ink-soft); font-size:.94rem; }
.crumb { font-size:.85rem; color:var(--ink-soft); margin:0 0 26px; }
.key { background:var(--surface); border:1px solid var(--rule); border-radius:10px;
  padding:16px 20px; margin:0 0 22px; }
.key ul { margin:0; }
.key li:last-child { margin-bottom:0; }
footer { margin-top:56px; padding-top:18px; border-top:1px solid var(--rule);
  color:var(--ink-soft); font-size:.85rem; }
code { background:var(--code-bg); padding:1px 5px; border-radius:4px; font-size:.88em;
  font-family: ui-monospace,Menlo,Consolas,monospace; }