*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Arial,sans-serif;background:#f2f5f8;color:#16242e;line-height:1.65;font-size:15px}
header{background:#00205b;color:#fff;padding:18px 28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
header .logo{font-size:24px;font-weight:800;letter-spacing:3px;color:#fff;text-decoration:none}
header .logo span{color:#7fb8ec}
header nav a{color:#bcd8f2;text-decoration:none;margin-right:18px;font-size:14px}
header nav a:hover{text-decoration:underline}
.w{max-width:860px;margin:36px auto;padding:0 20px}
.card{background:#fff;border:1px solid #dde4ea;border-radius:12px;padding:32px 36px;margin-bottom:22px}
h1{margin:0 0 6px;color:#00205b;font-size:28px}
h2{color:#00205b;font-size:18px;margin:26px 0 8px}
.sub{color:#5f7280;margin:0 0 20px}
ul{padding-left:22px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:10px}
.f{border:1px solid #dde4ea;border-radius:10px;padding:16px;background:#f9fbfc}
.f b{display:block;color:#00205b;margin-bottom:4px}
.f span{font-size:13.5px;color:#44555f}
.note{background:#eaf2fa;border-left:3px solid #0b5fa5;padding:12px 16px;border-radius:0 8px 8px 0;font-size:14px}
code{background:#eef2f5;padding:1px 6px;border-radius:4px;font-size:13.5px}
footer{text-align:center;color:#5f7280;font-size:12.5px;padding:10px 20px 36px}
footer a{color:#0b5fa5}