:root{--bg:#f7f9fc;--card:#fff;--ink:#111827;--muted:#667085;--brand:#10b8d4;--line:#e5e7eb}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;line-height:1.62}
header{background:linear-gradient(135deg,#06111f,#163b6b);color:#fff;padding:56px 22px}.wrap,main{max-width:1080px;margin:0 auto}
h1{font-size:clamp(2rem,5vw,4rem);line-height:1.05;margin:0 0 12px}h2{font-size:2rem;margin:0 0 12px}h3{color:var(--brand);margin-top:24px}
.meta{color:#7dd3fc;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.subtitle{max-width:800px;color:rgba(255,255,255,.83);font-size:1.18rem}
main{padding:28px 18px 80px}.card,.chapter{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;margin-bottom:24px;box-shadow:0 8px 24px rgba(16,24,40,.06)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.grid a{display:block;background:#f8fafc;border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;color:#0d6efd;font-weight:800}
figure{margin:22px 0}figure img{width:100%;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 22px rgba(16,24,40,.08)}figcaption{color:var(--muted);text-align:center;font-size:.9rem;margin-top:8px}
pre{white-space:pre-wrap;background:#0b1220;color:#e5f9ff;border-radius:16px;padding:18px;overflow:auto}.callout{background:#ecfeff;border-left:5px solid var(--brand);border-radius:12px;padding:16px;margin:18px 0}
footer{text-align:center;color:var(--muted);padding:30px}@media(max-width:760px){.grid{grid-template-columns:1fr}.card,.chapter{padding:20px}}