:root {
  --bg: #f4f7fa; --surface: #ffffff; --text: #22303c; --muted: #5c6d7d; --primary: #4f81ad; --border: #e1e8ef;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #141b22; --surface: #1c2530; --text: #e6edf3; --muted: #9badbd; --primary: #7fa9cc; --border: #2a3644; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
main { max-width: 680px; margin: 0 auto; padding: 56px 20px 80px; }
h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 2.2em 0 0.4em; }
p, li { color: var(--text); }
.muted { color: var(--muted); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
nav { font-size: 0.95rem; margin-bottom: 40px; }
nav a + a::before { content: "·"; color: var(--muted); margin: 0 10px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 24px; margin-top: 24px; }
footer { margin-top: 56px; font-size: 0.9rem; color: var(--muted); }