:root {
  color-scheme: light dark;
  --fg: #1d1d1f;
  --bg: #fdfdfc;
  --muted: #6b6b70;
  --accent: #2b59c3;
}
@media (prefers-color-scheme: dark) {
  :root { --fg: #e6e6e3; --bg: #151517; --muted: #9a9aa0; --accent: #8fb0ff; }
}
body {
  margin: 0 auto;
  max-width: 42rem;
  padding: 2rem 1.25rem 4rem;
  font: 1.0625rem/1.65 system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
}
header { margin-bottom: 2.5rem; font-weight: 600; }
header a { color: inherit; text-decoration: none; }
a { color: var(--accent); }
time { color: var(--muted); font-variant-numeric: tabular-nums; }
.posts { list-style: none; padding: 0; }
.posts li { display: flex; gap: 1rem; margin: .4rem 0; }
article h1 { margin-bottom: .25rem; line-height: 1.25; }
pre { overflow-x: auto; padding: .75rem 1rem; border-radius: 6px; background: color-mix(in srgb, var(--fg) 7%, transparent); }
code { font-size: .92em; }
img { max-width: 100%; height: auto; }