:root{--surface:#F3F6F9;--card:#FFFFFF;--ink:#0F1B2B;--muted:#5B6B7E;--accent:#2F7DD1;--acctext:#1F5FA3;--tip:#E6F0FA;}
@media (prefers-color-scheme:dark){:root{--surface:#0E1622;--card:#16212F;--ink:#E9EEF4;--muted:#9AA8B8;--accent:#6FB1FF;--acctext:#9CC8FF;--tip:#1C2A3B;}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:720px;margin:0 auto;padding:24px 16px 48px}
header{padding:24px 0 12px;border-bottom:3px solid var(--accent);margin-bottom:24px}
header a.brand{color:var(--ink);text-decoration:none;font-weight:700;font-size:1.25rem}
nav{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px 16px}
nav a{color:var(--acctext);text-decoration:none;font-size:.95rem}
nav a:hover,nav a[aria-current]{text-decoration:underline}
h1{font-size:1.75rem;line-height:1.25;margin:0 0 4px}
h2{font-size:1.15rem;margin:32px 0 8px}
p,li{margin:8px 0}
ul{padding-left:22px}
a{color:var(--acctext)}
.meta{color:var(--muted);font-size:.9rem;margin:0 0 16px}
.card{background:var(--card);border-radius:16px;padding:16px 20px;margin:16px 0}
.tip{background:var(--tip);border-radius:12px;padding:12px 16px}
.btn{display:inline-block;background:var(--accent);color:var(--surface);padding:10px 18px;border-radius:12px;text-decoration:none;font-weight:600}
footer{margin-top:40px;color:var(--muted);font-size:.85rem}
details{background:var(--card);border-radius:12px;padding:10px 16px;margin:8px 0}
summary{cursor:pointer;font-weight:600}