:root { --ink:#0b0f14; --muted:#57606a; --line:#d0d7de; --wash:#f6f8fa; --green:#2da44e; --bright:#3fb950; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI",system-ui,-apple-system,sans-serif; color:var(--ink);
       font-size:18px; line-height:1.65; background:#fff; }
.wrap { max-width:44rem; margin:0 auto; padding:0 20px; }
header.site { border-bottom:1px solid var(--line); }
header.site .wrap { display:flex; align-items:center; gap:10px; padding-top:18px; padding-bottom:18px; }
header.site svg { width:22px; height:22px; color:var(--green); }
header.site a.brand { font-weight:640; letter-spacing:-0.035em; font-size:20px; color:var(--ink); text-decoration:none; }
header.site nav { margin-left:auto; font-size:15px; }
header.site nav a { color:var(--muted); text-decoration:none; margin-left:18px; }
header.site nav a:hover { color:var(--ink); }
main { padding:44px 0 8px; }
h1 { font-size:38px; line-height:1.15; letter-spacing:-0.025em; font-weight:640; margin:0 0 14px; }
h2 { font-size:24px; line-height:1.25; letter-spacing:-0.015em; font-weight:640; margin:36px 0 10px; }
h3 { font-size:19px; font-weight:640; margin:26px 0 8px; }
p { margin:0 0 16px; }
a { color:var(--green); }
.lede { font-size:21px; color:var(--muted); margin:0 0 28px; }
.meta { font-size:15px; color:var(--muted); margin:0 0 30px; }
ul, ol { margin:0 0 16px; padding-left:22px; }
li { margin-bottom:8px; }
code { font-family:Consolas,ui-monospace,monospace; font-size:0.88em; background:var(--wash);
       padding:2px 5px; border-radius:4px; }
pre { background:var(--wash); border:1px solid var(--line); border-left:3px solid var(--green);
      border-radius:8px; padding:14px 16px; overflow-x:auto; font-size:15px; line-height:1.5; }
.cta { border:1px solid var(--line); border-left:3px solid var(--green); border-radius:10px;
       background:var(--wash); padding:20px 22px; margin:36px 0 8px; }
.cta h3 { margin-top:0; }
.cta p:last-child { margin-bottom:0; }
.btn { display:inline-block; background:var(--ink); color:#fff; text-decoration:none; font-weight:600;
       padding:12px 20px; border-radius:8px; margin:6px 10px 6px 0; font-size:16px; }
.btn.ghost { background:#fff; color:var(--ink); border:1px solid var(--line); }
.posts { list-style:none; padding:0; margin:0; }
.posts li { border-top:1px solid var(--line); padding:20px 0; margin:0; }
.posts a { font-size:21px; font-weight:640; text-decoration:none; color:var(--ink); letter-spacing:-0.01em; }
.posts a:hover { color:var(--green); }
.posts p { color:var(--muted); font-size:16px; margin:6px 0 0; }
footer.site { border-top:1px solid var(--line); margin-top:56px; padding:26px 0 44px;
              color:var(--muted); font-size:15px; }
footer.site a { color:var(--muted); }
.sig { font-family:Consolas,monospace; color:var(--green); letter-spacing:0.6em; font-size:14px; margin-top:14px; }
header.site nav a { white-space:nowrap; }
@media (max-width:560px) {
  body { font-size:17px; } h1 { font-size:30px; } .lede { font-size:19px; }
  /* Let the nav drop to its own row instead of wrapping into the wordmark. */
  header.site .wrap { flex-wrap:wrap; padding-bottom:14px; }
  header.site nav { width:100%; margin:10px 0 0; display:flex; gap:18px; }
  header.site nav a { margin-left:0; }
  .btn { display:block; text-align:center; margin-right:0; }
}