.navbar{display:flex;gap:12px;align-items:center;padding:10px 18px;background:#ffffff08;margin-bottom:12px;border-radius:6px}.navbar a{text-decoration:none;color:#0b2f3a;font-weight:600;padding:6px 10px;border-radius:6px;transition:background .16s ease,color .16s ease}.navbar a:hover{background:#0b2f3a0f}.navbar a.active,.navbar a[aria-current=true]{background:linear-gradient(90deg,#4f46e5,#06b6d4);color:#fff;box-shadow:0 6px 14px #0f172a14}@media (max-width: 520px){.navbar{flex-direction:column;align-items:flex-start;gap:6px}}.container{max-width:800px;margin:2rem auto;padding:2rem;background:#fff;border-radius:12px;box-shadow:0 6px 18px #00000014}.hero{text-align:center;margin-bottom:2rem}.hero h1{font-size:2.2rem;font-weight:700;color:#0b2f3a;margin-bottom:.5rem}.hero .lead{font-size:1.1rem;color:#475569}.api-box{padding:1.5rem;border-radius:10px;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);box-shadow:inset 0 1px 3px #0000000d}.api-box h2{margin-bottom:.8rem;color:#0b2f3a;font-size:1.4rem}.api-box h3{margin-top:1.5rem;margin-bottom:.5rem;font-size:1.2rem;color:#334155}.api-box ul{list-style:none;padding:0}.api-box li{background:#fff;padding:.6rem 1rem;margin:.3rem 0;border-radius:6px;box-shadow:0 2px 5px #0000000d}