:root { --primary:#2B6FF2; --dark:#1E2A3A; --gray:#6E7B8C; --border:#DCE3EC; --bg:#F5F8FC; }
        body { margin:0; font-family:system-ui; background:var(--bg); }
        .topnav { background:white; border-bottom:2px solid var(--border); padding:0 2rem; height:64px; display:flex; align-items:center; justify-content:space-between; }
        .topnav a { text-decoration:none; color:var(--dark); font-weight:600; }
        .topnav-links { display:flex; gap:2rem; }
        .mobile-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:white; border-top:2px solid var(--border); z-index:999; padding:8px 0 12px; justify-content:space-around; }
        .mobile-nav a { flex-direction:column; align-items:center; text-decoration:none; color:var(--gray); font-size:12px; display:flex; gap:4px; }
        .mobile-nav a.active { color:var(--primary); }
        .container { max-width:900px; margin:40px auto; padding:0 2rem 80px; }
        .card { background:white; border:2px solid var(--border); border-radius:16px; padding:28px; margin-bottom:24px; }
        .code { background:#F1F5F9; padding:16px; border-radius:12px; font-family:monospace; margin:12px 0; }
        @media(max-width:768px){ .topnav-links{display:none;} .topnav{justify-content:center;} .mobile-nav{display:flex;} .container{padding:0 1rem 100px;} }