:root {
  color-scheme: light dark;
  --acc: hsl(5 45% 38%);
  --bg: #fff; --fg: #17191c; --mut: #5b6169; --line: #e3e6ea; --box: #f7f8fa;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#15171a; --fg:#e6e8ea; --mut:#9aa1a9; --line:#282c31; --box:#1b1e22;
          --acc: hsl(5 55% 62%); }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:16px/1.65 ui-sans-serif,system-ui,sans-serif; }
.wrap { max-width: 54rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
header { border-bottom:1px solid var(--line); padding-bottom:1.2rem; margin-bottom:2rem; }
h1 { font-size:1.6rem; margin:0 0 .3rem; letter-spacing:-.01em; }
h2 { font-size:1.15rem; margin:2.2rem 0 .6rem; }
.lead { color:var(--mut); margin:0; }
nav a { color:var(--acc); text-decoration:none; margin-right:1.1rem; font-size:.92rem; }
nav { margin-top:1rem; }
.card { background:var(--box); border:1px solid var(--line); border-radius:4px;
        padding:1rem 1.2rem; margin:.8rem 0; }
footer { margin-top:3rem; border-top:1px solid var(--line); padding-top:1rem;
         color:var(--mut); font-size:.85rem; }