:root { --bg:#08131f; --ink:#eef6ff; --dim:#9db3c8; --water:#3fb6ff; --card:#0f2234; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:var(--water); }
header.hero { min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:48px 16px; background:linear-gradient(rgba(8,19,31,.35), var(--bg)), url(/assets/title-bg.jpg) center/cover; }
header.hero img.logo { width:min(520px, 90vw); }
header.hero p { font-size:20px; max-width:560px; text-shadow:0 2px 8px #000; }
.badges { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.badge { padding:10px 18px; border-radius:12px; background:#ffffff1a; border:1px solid #ffffff33; color:var(--ink); }
main { max-width:760px; margin:0 auto; padding:24px 16px 48px; }
main.doc h1 { font-size:34px; margin-bottom:4px; }
main.doc h2 { font-size:21px; margin-top:32px; }
.updated { color:var(--dim); margin-top:0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; }
.grid div { background:var(--card); border-radius:16px; padding:16px 18px; }
nav.top { display:flex; align-items:center; gap:10px; padding:14px 16px; max-width:760px; margin:0 auto; }
nav.top img { width:40px; height:40px; border-radius:10px; }
nav.top a { color:var(--ink); text-decoration:none; font-weight:700; }
footer { border-top:1px solid #1d3349; padding:24px 16px; text-align:center; color:var(--dim); font-size:14px; }
footer a { color:var(--dim); margin:0 8px; }
footer img { width:22px; height:22px; vertical-align:-5px; margin-right:4px; }