:root {
  --bg: #14181d;
  --paper: #1d232b;
  --ink: #dfe6ee;
  --muted: #8fa0b3;
  --accent: #7fd1b9;
  --line: #2c3540;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.65 "Segoe UI", Roboto, "PT Sans", sans-serif; }
header { display: flex; align-items: center; gap: 24px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--paper); }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--accent); text-decoration: none; letter-spacing: 0.02em; }
nav { display: flex; gap: 18px; flex-wrap: wrap; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--accent); }
main { max-width: 760px; margin: 0 auto; padding: 36px 24px 64px; }
h1 { font-size: 1.9rem; margin: 0 0 0.6em; }
h2 { font-size: 1.25rem; margin-top: 2em; border-bottom: 1px solid var(--line); padding-bottom: 0.3em; }
h3 { font-size: 1.05rem; margin-bottom: 0.2em; }
a { color: var(--accent); }
.lead { font-size: 1.1rem; color: var(--muted); }
article { margin: 1.2em 0; }
.muted { color: var(--muted); font-size: 0.85rem; }
footer { border-top: 1px solid var(--line); padding: 18px 24px; color: var(--muted); font-size: 0.9rem; }
footer a { color: var(--muted); }
@media (max-width: 640px) { header { flex-direction: column; gap: 10px; } }