:root {
  color-scheme: light dark;
  --fg: #1a1a1a;
  --muted: #6b7280;
  --bg: #fdfdfc;
  --line: #e5e5e5;
  --link: #1d4ed8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e8e8e6;
    --muted: #9ca3af;
    --bg: #161616;
    --line: #2a2a2a;
    --link: #7aa2f7;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0 auto;
  padding: 3rem 1.25rem 2rem;
  max-width: 44rem;
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--fg);
  background: var(--bg);
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
header.site {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 600; letter-spacing: .02em; font-size: 1.05rem; color: var(--fg); }
header.site nav a { margin-left: 1.1rem; color: var(--muted); font-size: .92rem; }
main { padding-top: 1.5rem; }
h1, h2 { font-weight: 600; letter-spacing: .01em; }
h2 { font-size: 1.05rem; margin: 2rem 0 .6rem; }
.intro { color: var(--fg); }
ul.posts { list-style: none; padding: 0; margin: 0; }
ul.posts li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
}
ul.posts time { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
footer { margin-top: 3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
footer p { margin: .2rem 0; }