:root {
  --ink: #1e2a4a;
  --paper: #f3ebdd;
  --text: #1f2430;
  --muted: #5b6170;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --text: #e8e6e1; --muted: #a8a59e; --ink: #c9d3ee; --paper: #14171f; }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
  color: var(--text);
  background: var(--paper);
}
main { max-width: 720px; margin: 0 auto; padding: 32px 20px 80px; }
header { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline; justify-content: space-between; margin-bottom: 32px; }
.brand { font-size: 28px; font-weight: 700; color: var(--ink); text-decoration: none; }
nav { display: flex; gap: 16px; }
a { color: var(--ink); }
nav a { text-decoration: none; font-weight: 600; }
article { padding-top: 24px; margin-bottom: 64px; border-top: 1px solid color-mix(in srgb, var(--muted) 40%, transparent); }
h1 { font-size: 32px; line-height: 1.2; margin: 0 0 4px; color: var(--ink); }
h2 { font-size: 21px; margin: 36px 0 8px; color: var(--ink); }
h3 { font-size: 17px; margin: 24px 0 4px; }
.meta { color: var(--muted); margin-top: 0; }
li { margin: 6px 0; }
.hero { display: flex; gap: 20px; align-items: center; margin: 8px 0 24px; }
.hero img { width: 96px; height: 96px; border-radius: 22px; }