:root{--navy:#071f38;--blue:#0d5ea8;--ink:#102033;--muted:#52657a;--line:#dce6f2;--bg:#f4f7fb}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--blue)}.wrap{width:min(1500px,calc(100% - 48px));margin:auto}
header{background:linear-gradient(135deg,#071f38,#0d355d);color:white;padding:20px 0}
header a{color:white;text-decoration:none;font-weight:700}.crumb{font-size:.9rem;opacity:.9}
main{padding:34px 0 60px}.shell{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:30px;align-items:start}
.article,.toc,.category-card{background:white;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 30px rgba(15,35,55,.06)}
.head{padding:34px 38px;border-bottom:1px solid var(--line)}.code{font-size:.82rem;font-weight:900;color:var(--blue);letter-spacing:.06em}
h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1.04;margin:.5rem 0 1rem}h2{margin-top:38px}h3{margin-top:28px}
.lede,p,li{line-height:1.72;color:var(--muted)}.body{padding:10px 38px 42px}.callout{padding:18px 20px;border-left:5px solid #1d74c4;background:#edf6ff;border-radius:8px;margin:24px 0}
.callout.warning{background:#fff7e5;border-left-color:#d28a00}.callout.danger{background:#fff0f0;border-left-color:#b42318}
.step{margin:24px 0;padding:22px;border:1px solid var(--line);border-top:5px solid #1d74c4;border-radius:14px;background:#f8fbff}
.step h3{margin:0 0 8px}.toc{padding:22px;position:sticky;top:20px}.toc a{display:block;padding:7px 0;font-weight:700;text-decoration:none}
.cta{margin-top:38px;padding:26px;border-radius:16px;background:var(--navy);color:white}.cta p,.cta h2{color:white}.cta a{display:inline-block;background:#1469d2;color:white;padding:11px 18px;border-radius:999px;font-weight:800;text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.category-card{padding:20px}.category-card h2,.category-card h3{margin-top:0}
.search{width:100%;padding:14px 16px;border:1px solid #b9c7d6;border-radius:10px;font-size:1rem;margin:20px 0}
footer{background:#061827;color:#dbe8f4;padding:28px 0;margin-top:50px;font-size:.9rem}
@media(max-width:1050px){.shell{grid-template-columns:1fr}.toc{position:static;order:-1}.grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.wrap{width:calc(100% - 22px)}.head,.body{padding-left:22px;padding-right:22px}.grid{grid-template-columns:1fr}}