:root { --fg:#1b1f24; --muted:#5a6470; --bg:#ffffff; --accent:#0b5cad; --soft:#f3f6fa; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --fg:#e8ecf1; --muted:#a7b1bd; --bg:#0f1318; --accent:#6ab0ff; --soft:#1a2029; }
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--fg); background:var(--bg); line-height:1.6; }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; }
header { border-bottom:1px solid var(--soft); }
header .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding-top:14px; padding-bottom:14px; gap:8px; }
.logo { font-weight:700; color:var(--fg); text-decoration:none; }
nav a { color:var(--muted); text-decoration:none; margin-left:14px; font-size:15px; }
nav a:hover { color:var(--accent); }
h1 { font-size: 2rem; line-height:1.25; margin: 36px 0 12px; }
h2 { font-size: 1.4rem; margin: 32px 0 10px; }
h3 { font-size: 1.1rem; margin: 0 0 6px; }
p, li { font-size: 1rem; }
.lead { font-size:1.1rem; color:var(--muted); }
.btn { display:inline-block; background:var(--accent); color:#fff !important; padding:10px 18px; border-radius:8px; text-decoration:none; font-weight:600; margin: 8px 0; }
.cards { display:grid; grid-template-columns: 1fr; gap:14px; margin: 16px 0; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { background:var(--soft); border-radius:10px; padding:16px; }
.card a { color: var(--accent); }
footer { border-top:1px solid var(--soft); margin-top:48px; padding: 20px 0 32px; color:var(--muted); font-size:14px; }
footer a { color:var(--muted); margin-right:14px; }
.note { font-size:14px; color:var(--muted); }
table { width:100%; border-collapse:collapse; margin:12px 0; font-size:15px; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--soft); vertical-align:top; }