:root { color-scheme: light dark; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.65; color: #1a1a1a; background: #fafafa;
  max-width: 720px; margin: 0 auto; padding: 48px 24px 96px;
}
@media (prefers-color-scheme: dark) {
  body { color: #e6e6e6; background: #101314; }
  a { color: #4fd1c5; }
  header .brand span { color: #4fd1c5; }
  h1, h2 { color: #fff; }
  .card { background: #1a1f21; }
}
header { margin-bottom: 40px; }
header .brand { font-size: 22px; font-weight: 700; text-decoration: none; color: inherit; }
header .brand span { color: #0d9488; }
nav { margin-top: 8px; font-size: 14px; }
nav a { margin-right: 16px; color: #0d9488; text-decoration: none; }
h1 { font-size: 32px; margin-bottom: 8px; letter-spacing: -0.5px; }
h2 { font-size: 20px; margin: 32px 0 10px; }
p, li { margin-bottom: 10px; font-size: 16px; }
ul { padding-left: 22px; }
.meta { color: #777; font-size: 14px; margin-bottom: 28px; }
.card { background: #fff; border-radius: 14px; padding: 20px 24px; margin: 16px 0; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
a { color: #0b7a70; }
footer { margin-top: 56px; font-size: 13px; color: #888; }