:root { --ink:#0f172a; --muted:#475569; --line:#e2e8f0; --accent:#0e7490; --bg:#ffffff; --soft:#f1f5f9; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--accent); }
.wrap { max-width:880px; margin:0 auto; padding:0 16px; }
.top { border-bottom:1px solid var(--line); }
.bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:14px; padding-bottom:14px; }
.brand { font-weight:700; font-size:20px; color:var(--ink); text-decoration:none; }
nav a { margin-left:16px; text-decoration:none; color:var(--muted); }
nav a:hover { color:var(--accent); }
.hero { background:var(--soft); padding:56px 0 40px; margin-bottom:24px; }
h1 { font-size:36px; line-height:1.2; margin:0 0 16px; }
.lead { font-size:19px; }
.muted { color:var(--muted); }
section { margin-bottom:32px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.card { border:1px solid var(--line); border-radius:10px; padding:16px 18px; }
.card h3 { margin:0 0 6px; font-size:17px; }
.card p { margin:0; color:var(--muted); }
code { background:var(--soft); padding:1px 5px; border-radius:4px; font-size:14px; overflow-wrap:anywhere; }
.doc { padding-top:32px; padding-bottom:16px; }
.doc h2 { margin-top:32px; font-size:22px; }
.doc h3 { font-size:17px; margin-bottom:4px; }
.foot { border-top:1px solid var(--line); padding-top:16px; padding-bottom:32px; color:var(--muted); display:flex; gap:20px; flex-wrap:wrap; }
@media (max-width:560px) { h1 { font-size:28px; } nav a { margin-left:0; margin-right:14px; } }