:root { --fg:#1c2230; --muted:#5b6475; --brand:#2457d6; --bg:#fff; --soft:#f4f6fb; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--fg); background:var(--bg); }
.container { max-width:960px; margin:0 auto; padding:0 1.25rem; }
.site-header { border-bottom:1px solid #e3e7ef; }
.site-header .container { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1rem; }
.brand { font-weight:700; font-size:1.15rem; color:var(--fg); text-decoration:none; }
.nav { list-style:none; margin:0; padding:0; display:flex; gap:1.25rem; }
.nav > li { position:relative; }
.nav a { color:var(--muted); text-decoration:none; }
.nav li.active > a, .nav a:hover { color:var(--brand); }
.nav .sub { display:none; position:absolute; left:0; top:100%; list-style:none; margin:0; padding:.5rem 1rem; background:#fff; border:1px solid #e3e7ef; border-radius:8px; min-width:11rem; z-index:10; }
.nav li:hover > .sub, .nav li:focus-within > .sub { display:block; }
main { padding-block:2.5rem; min-height:60vh; }
.btn { display:inline-block; padding:.65rem 1.1rem; background:var(--brand); color:#fff; border-radius:8px; text-decoration:none; }
.site-footer { border-top:1px solid #e3e7ef; padding-block:1.5rem; color:var(--muted); font-size:.9rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.card { padding:1rem 1.25rem; background:var(--soft); border:2px solid transparent; border-radius:10px; }
code { background:var(--soft); padding:.1rem .35rem; border-radius:4px; }