:root{--navy:#000C35;--orange:#FF6A3D}
*{box-sizing:border-box}
body{margin:0;font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#1b1f2a;background:#f6f7fb}
header{background:var(--navy);padding:22px 20px}
header .in,main,footer .in{max-width:820px;margin:0 auto}
header img{height:44px;display:block}
nav{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap}
nav a{color:#fff;opacity:.85;text-decoration:none;font-size:15px}
nav a:hover,nav a.on{opacity:1;border-bottom:2px solid var(--orange)}
main{background:#fff;margin:28px auto;padding:32px 36px;border-radius:14px;box-shadow:0 2px 14px rgba(0,12,53,.06)}
h1{font-size:28px;line-height:1.25;margin:0 0 12px;color:var(--navy)}
h2{font-size:20px;margin:28px 0 8px;color:var(--navy)}
a{color:#d4471c}
.lead{font-size:18px;color:#3a4152}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0}
.card{border:1px solid #e6e8f0;border-radius:12px;padding:16px}
.card b{display:block;color:var(--navy);margin-bottom:4px}
.muted{color:#6b7285;font-size:14px}
.ru{border-top:1px solid #e6e8f0;margin-top:32px;padding-top:20px}
code,.code{font-family:ui-monospace,Menlo,Consolas,monospace;background:#f1f3f8;border-radius:6px;padding:2px 6px}
.code{display:block;padding:14px;font-size:15px;word-break:break-all;margin:12px 0}
button{background:var(--orange);color:#fff;border:0;border-radius:8px;padding:10px 18px;font-size:15px;cursor:pointer}
footer{color:#6b7285;font-size:14px;padding:0 20px 36px}
@media(max-width:600px){main{padding:22px 18px;margin:16px 10px}}