:root { --bg:#F2F1EE; --card:#FFFFFF; --ink:#111113; --ink2:#5E5E63; --line:rgba(17,17,19,.08); --accent:#7FB8FF; }
@media (prefers-color-scheme: dark) { :root { --bg:#0A0A0B; --card:#161618; --ink:#F5F5F2; --ink2:#A1A1A6; --line:rgba(255,255,255,.08); } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
header { max-width:760px; margin:0 auto; padding:20px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.brand { font-weight:800; font-size:22px; letter-spacing:.02em; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px; font-stretch:125%; }
.dot { width:18px; height:18px; border-radius:50%; background:var(--accent); box-shadow: inset 0 0 0 4px #111113; }
.langs { display:flex; gap:4px; flex-wrap:wrap; }
.langs a { color:var(--ink2); text-decoration:none; font-size:13px; font-weight:600; padding:6px 10px; border-radius:999px; background:var(--card); }
.langs a.active { background:var(--ink); color:var(--bg); }
main { max-width:760px; margin:0 auto; padding:0 16px 64px; }
section { background:var(--card); border-radius:28px; padding:28px 24px; margin-bottom:16px; }
h1 { font-size:34px; line-height:1.15; margin:0 0 6px; font-weight:800; font-stretch:125%; }
h2 { font-size:19px; margin:28px 0 6px; }
.meta { color:var(--ink2); font-size:14px; margin:0 0 20px; }
p, li { color:var(--ink); }
ul { padding-left:20px; }
a { color:inherit; text-decoration-color: var(--accent); text-decoration-thickness:3px; text-underline-offset:3px; }
.links { margin-top:28px; padding-top:16px; border-top:1px solid var(--line); color:var(--ink2); font-size:15px; }
.hero { text-align:center; padding:48px 24px; }
.hero p { color:var(--ink2); }
.js section { display:none; }
.js section.shown { display:block; }