:root{
  --bg:#0E1117; --surface:#161B25; --stroke:#243040;
  --text:#E6EBF2; --dim:#9AA6B8; --accent:#34D399; --link:#818CF8;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#FFFFFF; --surface:#F4F6FA; --stroke:#DCE2EC;
    --text:#11161F; --dim:#4B5666; --accent:#0F9C6C; --link:#4F46E5;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
main{max-width:720px; margin:0 auto; padding:40px 22px 72px; overflow-wrap:anywhere}
h1{font-size:28px; line-height:1.25; margin:0 0 6px; letter-spacing:-.01em}
h2{font-size:18px; margin:28px 0 8px; color:var(--text)}
p{margin:0 0 12px; color:var(--dim)}
a{color:var(--link); text-decoration:none}
a:hover,a:focus{text-decoration:underline}
.lede{font-size:17px; margin-bottom:26px}
.date{font-size:13px; margin-bottom:26px}
.crumb{font-size:14px; margin:26px 0 0}
section{margin-bottom:22px}
.cards{display:flex; flex-wrap:wrap; gap:10px; margin:24px 0}
.cards a,.pagenav a{
  display:inline-block; padding:11px 16px; border-radius:12px;
  border:1px solid var(--stroke); background:var(--surface);
  color:var(--text); font-weight:600;
}
.pagenav{display:flex; flex-wrap:wrap; gap:10px; margin-top:32px}
.langs{list-style:none; margin:26px 0 0; padding:0}
.langs li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px;
  padding:14px 0; border-top:1px solid var(--stroke);
}
.langs .lang{min-width:110px; font-weight:700}