:root{--bg:#0f1220;--card:#181c30;--text:#e9ecf8;--muted:#9aa3c7;--accent:#4ade80;--line:#2a3050}
@media (prefers-color-scheme:light){:root{--bg:#f5f7fb;--card:#fff;--text:#161a2e;--muted:#5a6384;--accent:#16a34a;--line:#dde2f0}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
header{border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
header a{color:var(--text);text-decoration:none;font-weight:700}
nav a{color:var(--muted);font-weight:500;margin-left:16px}
.hero{text-align:center;padding:56px 0 32px}
.hero img{width:120px;height:120px;border-radius:26px}
h1{font-size:2rem;margin:.6em 0 .2em}
h2{margin-top:2em;font-size:1.25rem}
.sub{color:var(--muted);max-width:480px;margin:0 auto 24px}
.btn{display:inline-block;background:var(--accent);color:#06210f;font-weight:700;padding:12px 22px;border-radius:12px;text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:24px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.card b{display:block;margin-bottom:4px}
.card span{color:var(--muted);font-size:.95rem}
a{color:var(--accent)}
main.doc{padding:32px 0 48px}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;padding:20px 0;text-align:center}