:root{--brand:#0176d3;--brand-dark:#032d60;--ink:#16325c;--muted:#5e6b82;--bg:#f6f8fb;--panel:#fff;--line:#e3e8f0}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:'IBM Plex Sans',-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.55}
code,.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;height:56px;padding:0 20px;background:linear-gradient(90deg,#032d60,#0176d3);color:#fff}
.brand{display:flex;align-items:center;gap:11px;color:#fff}
.brand-mark{width:26px;height:26px;border-radius:7px;background:radial-gradient(circle at 30% 30%,#7fc0ff,#0176d3 60%,#032d60);box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.brand strong{display:block;letter-spacing:1.5px;font-size:14px;line-height:1}
.brand small{display:block;font-size:10px;opacity:.8;margin-top:2px}
.top-links{margin-left:auto;display:flex;gap:20px}.top-links a{color:#dcebff;font-size:13px}.top-links a:hover{color:#fff;text-decoration:none}
#menu{display:none;background:none;border:0;color:#fff;font-size:20px;cursor:pointer}
.layout{display:flex;align-items:flex-start;max-width:1180px;margin:0 auto}
.side{flex:0 0 232px;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;padding:18px 12px 40px;background:var(--panel);border-right:1px solid var(--line)}
.side-group{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#97a0ad;padding:16px 12px 5px}
.side-link{display:block;padding:6px 12px;color:#3a4a63;font-size:13.5px;border-radius:7px}
.side-link:hover{background:#f1f6fc;text-decoration:none}
.side-link.active{background:#e9f3ff;color:var(--brand-dark);font-weight:600}
.content{flex:1;min-width:0;padding:34px 40px 60px;max-width:820px}
.page-head h1{font-size:30px;margin:0 0 8px;letter-spacing:-.4px}
.lead{font-size:17px;color:var(--muted);margin:0 0 26px;max-width:70ch}
.shot{margin:0 0 30px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 6px 24px rgba(16,50,92,.08)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font-size:12px;color:var(--muted);padding:9px 14px;border-top:1px solid var(--line);background:#fbfdff}
.block{margin:0 0 22px}.block h2{font-size:18px;margin:0 0 6px}.block p{margin:0;color:#33425c;max-width:72ch}
.foot{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
@media(max-width:820px){#menu{display:block;margin-left:auto}.top-links{display:none}.side{position:fixed;left:0;top:56px;transform:translateX(-100%);transition:transform .2s;z-index:15;box-shadow:0 10px 30px rgba(0,0,0,.15)}.side.open{transform:none}.content{padding:24px 18px 50px}}