:root{--bg:#211827;--paper:#fff7ed;--soft:#ffedd5;--accent:#fb923c;--ink:#111827;--muted:#4b5563;}
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f3f4f6;color:var(--ink);line-height:1.65} a{color:#1d4ed8;text-decoration:none} a:hover{text-decoration:underline}
.hero{background:linear-gradient(135deg,var(--bg),#0f172a);color:white;padding:52px 18px} .wrap{max-width:980px;margin:0 auto} .brand{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:12px}
h1{font-size:clamp(34px,5vw,58px);line-height:1.05;margin:0 0 18px} .lead{max-width:760px;font-size:19px;color:#e5e7eb;margin:0} nav{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px} nav a{color:white;border:1px solid rgba(255,255,255,.25);padding:8px 12px;border-radius:999px} nav a[aria-current="page"]{background:white;color:#111827;text-decoration:none}
main{padding:34px 18px} .card{background:white;border:1px solid #e5e7eb;border-radius:18px;padding:26px;margin:0 0 18px;box-shadow:0 10px 28px rgba(15,23,42,.05)} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px} h2{margin:0 0 10px;font-size:24px} h3{margin:0 0 8px} p{margin:0 0 14px} .muted{color:var(--muted)} .stamp{font-size:14px;color:#6b7280} footer{padding:24px 18px 42px;color:#6b7280} code{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:6px;padding:2px 5px}