:root{
  --navy:#0B2C5F;
  --navy2:#123F7A;
  --teal:#0EA5A8;
  --teal-soft:#E9FAF8;
  --amber:#F6B73C;
  --ink:#17233C;
  --muted:#61708A;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --line:#E5EAF1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}
.wrap{max-width:920px;margin:0 auto;padding:24px}
header{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:24px;padding:28px;margin-top:22px;box-shadow:0 14px 40px rgba(11,44,95,.16)}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#0F6E8A,#0B2C5F);color:#fff;font-weight:800;font-size:22px;border:1px solid rgba(255,255,255,.16)}
header h1{margin:0;font-size:clamp(28px,4vw,42px);line-height:1.12}
header p{margin:8px 0 0;color:#DCE9FF}
nav{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
nav a{text-decoration:none;color:#fff;background:rgba(255,255,255,.12);padding:9px 14px;border-radius:999px}
main{padding:18px 0 36px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;margin:16px 0;box-shadow:0 8px 28px rgba(19,52,89,.06)}
h2{color:var(--navy);margin-top:0} h3{color:var(--navy2)} a{color:#0969DA}
.badge{display:inline-block;background:var(--teal-soft);color:#087B7E;padding:5px 10px;border-radius:999px;font-size:13px;font-weight:650}
.note{border-left:4px solid var(--amber);background:#FFF9EB;padding:14px 16px;border-radius:10px}
footer{color:var(--muted);font-size:14px;padding:24px 0 40px;text-align:center}
ul{padding-left:22px} code{background:#F1F5F9;padding:2px 6px;border-radius:6px}
@media(max-width:600px){.wrap{padding:14px}header{padding:22px;border-radius:18px}.card{padding:18px;border-radius:16px}}