:root { --bg:#F3F6F1; --card:#FFFFFF; --ink:#1E2A22; --muted:#5E6B62; --line:#DCE3DA; --moss:#3F6B4C; --mossSoft:#E3EDE1; }
@media (prefers-color-scheme: dark) { :root { --bg:#121814; --card:#1A221D; --ink:#E6ECE6; --muted:#9AA79E; --line:#2C3830; --moss:#8FC49C; --mossSoft:#22322A; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
.wrap { max-width:720px; margin:0 auto; padding:32px max(20px, env(safe-area-inset-left)) 64px; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:32px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:700; font-size:20px; }
.brand img { width:36px; height:36px; border-radius:9px; }
.langs a { color:var(--muted); text-decoration:none; margin-left:12px; font-size:15px; }
.langs a.on { color:var(--moss); font-weight:700; }
h1 { font-size:clamp(26px, 7vw, 34px); line-height:1.2; margin:0 0 12px; overflow-wrap:anywhere; hyphens:auto; }
h2 { font-size:21px; margin:32px 0 8px; }
a { color:var(--moss); }
.hero { text-align:center; padding:24px 0 8px; }
.hero img { width:120px; height:120px; border-radius:27px; box-shadow:0 10px 30px rgba(30,60,40,.18); }
.hero p { color:var(--muted); font-size:19px; max-width:560px; margin:0 auto; }
.badge { display:inline-block; margin-top:20px; padding:10px 18px; border-radius:999px; background:var(--mossSoft); color:var(--moss); font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; margin-top:36px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 20px; }
.card h3 { margin:6px 0 4px; font-size:17px; }
.card p { margin:0; color:var(--muted); font-size:15px; }
.doc { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:8px 28px 24px; }
@media (max-width:520px) { .doc { padding:4px 18px 18px; } h2 { font-size:19px; } }
.doc ul { padding-left:22px; }
footer { margin-top:48px; color:var(--muted); font-size:14px; display:flex; flex-wrap:wrap; gap:8px 18px; }
footer a { color:var(--muted); }