:root { --bg:#F6F7F9; --card:#FFFFFF; --ink:#131A21; --sub:#5E6873; --line:#E3E7EC; --accent:#2F5BD3; --head:#16202A; }
@media (prefers-color-scheme: dark) { :root { --bg:#0F1418; --card:#161E25; --ink:#EEF2F5; --sub:#9AA6B2; --line:#26313B; --accent:#7397F2; --head:#0A0F13; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
header { background:var(--head); color:#F3F5F7; padding:28px 16px 22px; }
header .in, main { max-width:720px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; font-size:20px; }
.brand svg { flex:none; }
.sub { color:#8C9AA8; font-size:14px; margin-top:4px; }
nav { margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
nav a { color:#F3F5F7; text-decoration:none; font-size:14px; padding:6px 12px; border-radius:999px; background:#243241; }
nav a:hover { background:#2F5BD3; }
main { padding:24px 16px 48px; }
section { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 20px; margin-bottom:20px; }
h1 { font-size:26px; line-height:1.25; margin:0 0 4px; }
h2 { font-size:17px; margin:24px 0 6px; }
p, li { color:var(--ink); }
ul { padding-left:20px; margin:6px 0; }
.muted { color:var(--sub); font-size:14px; }
.summary { background:color-mix(in srgb, var(--accent) 10%, var(--card)); border-left:4px solid var(--accent); padding:12px 14px; border-radius:8px; margin:14px 0 4px; }
a { color:var(--accent); }
footer { text-align:center; color:var(--sub); font-size:13px; padding:0 16px 32px; }