:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1a1a1a;
  background: #fafafa;
}
.nav {
  border-bottom: 1px solid #e3e3e3;
  background: #fff;
}
.nav-inner {
  max-width: 760px; margin: 0 auto; padding: 14px 24px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px;
}
.nav .brand { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; margin-right: auto; }
.nav a { color: #444; text-decoration: none; font-size: .95rem; }
.nav a:hover { color: #2257d8; }
main { max-width: 680px; margin: 0 auto; padding: 6vh 24px 10vh; }
h1 { font-size: 2.2rem; margin: 0 0 .25em; letter-spacing: -0.02em; }
.tag { color: #666; font-size: 1.1rem; margin: 0 0 2em; }
h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; color: #444; margin: 2.2em 0 .5em; }
p { margin: 0 0 1em; }
a { color: #2257d8; }
ul { padding-left: 1.2em; }
.cta { background:#f0f4ff; border:1px solid #d6e0ff; border-radius:10px; padding:16px 20px; margin:1.5em 0; }
footer { margin-top: 4em; padding-top: 1.5em; border-top: 1px solid #e3e3e3; color: #888; font-size: .9rem; }
footer a { color: #888; margin-right: 1.1em; }
@media (prefers-color-scheme: dark) {
  body { color: #e8e8e8; background: #111; }
  .nav { background:#161616; border-bottom-color:#2a2a2a; }
  .nav a { color:#bbb; } .nav a:hover { color:#7aa2f7; }
  .tag { color: #aaa; } h2 { color: #bbb; } a { color: #7aa2f7; }
  .cta { background:#15203a; border-color:#26365e; }
  footer { border-top-color: #2a2a2a; color: #888; }
}