:root{
  --navy:#0b1730; --navy2:#0f1d3a; --ink:#081124; --panel:#0e1c38;
  --gold:#e6b94a; --gold2:#d09a2f; --text:#e7edf6; --muted:#9fb0c8; --line:rgba(255,255,255,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.65}
a{color:#f1cf6e;text-decoration:none}
a:hover{text-decoration:underline}
/* sidebar */
.side{position:fixed;top:0;left:0;width:280px;height:100vh;overflow-y:auto;background:linear-gradient(180deg,#0f1d3a,#0a1428);border-right:1px solid var(--line);padding:22px 16px 60px}
.brand{display:flex;align-items:center;gap:12px;padding:8px 8px 18px;color:#fff}
.brand:hover{text-decoration:none}
.brand .logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#f1cf6e,#d09a2f);color:#0c1830;font-weight:800;font-size:24px;display:grid;place-items:center}
.brand b{display:block;letter-spacing:2px;font-size:15px}
.brand small{color:var(--gold);font-size:11px;letter-spacing:3px}
.navgroup{margin:18px 8px 6px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:700}
.side ul{list-style:none;margin:0 0 6px;padding:0}
.side li a{display:block;padding:8px 12px;border-radius:9px;color:var(--muted);font-size:14.5px}
.side li a:hover{background:rgba(255,255,255,.05);color:#fff;text-decoration:none}
.side li a.on{background:rgba(230,185,74,.14);color:#fff;box-shadow:inset 3px 0 0 var(--gold)}
/* content */
.content{margin-left:280px;max-width:1180px;padding:34px 48px 80px}
.crumb{color:var(--muted);font-size:13px;letter-spacing:.3px;margin-bottom:14px}
.crumb span{margin:0 8px;color:#46587a}
.phead h1{font-size:40px;line-height:1.12;margin:0 0 8px;letter-spacing:-.5px}
.phead .sub{color:var(--muted);font-size:19px;margin:0 0 8px;max-width:760px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:40px;margin-top:18px}
.prose{min-width:0}
.prose h2{font-size:27px;margin:38px 0 12px;padding-top:10px;border-top:1px solid var(--line)}
.prose h3{font-size:20px;margin:26px 0 8px;color:#fff}
.prose p{margin:0 0 14px;color:#dbe4f1}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:7px 0}
.prose code{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:13.5px;font-family:'SFMono-Regular',Consolas,Menlo,monospace;color:#f3d178}
ol.steps{counter-reset:s;list-style:none;padding-left:0}
ol.steps li{position:relative;padding:10px 14px 10px 46px;margin:8px 0;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px}
ol.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:12px;top:9px;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#f1cf6e,#d09a2f);color:#0c1830;font-weight:800;font-size:13px;display:grid;place-items:center}
.callout{display:flex;gap:12px;padding:14px 16px;border-radius:12px;margin:18px 0;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.callout .ico{flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px}
.callout.note{border-color:rgba(90,160,255,.35);background:rgba(42,91,181,.12)}
.callout.note .ico{background:#3b6fc4;color:#fff}
.callout.warn{border-color:rgba(230,185,74,.45);background:rgba(230,185,74,.10)}
.callout.warn .ico{background:var(--gold);color:#0c1830}
pre.code{background:#0a1530;border:1px solid var(--line);border-radius:12px;padding:16px 18px;overflow-x:auto;margin:0 0 18px}
pre.code code{background:none;border:none;color:#cfe0ff;padding:0;font-size:13.5px;line-height:1.6;white-space:pre}
figure.shot{margin:18px 0 26px}
figure.shot img{width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45);display:block;background:var(--panel)}
figure.shot figcaption{margin-top:9px;color:var(--muted);font-size:13.5px;text-align:center}
.tbl{width:100%;border-collapse:collapse;margin:6px 0 22px;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl th{color:var(--gold);font-size:12.5px;letter-spacing:.5px;text-transform:uppercase}
.tbl td code{font-size:13px}
.tbl tbody tr:hover{background:rgba(255,255,255,.03)}
.toc{position:sticky;top:24px;align-self:start;font-size:13.5px;border-left:1px solid var(--line);padding-left:16px}
.toc-t{color:var(--gold);text-transform:uppercase;letter-spacing:1.5px;font-size:11px;font-weight:700;margin-bottom:8px}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{margin:6px 0}
.toc a{color:var(--muted)}
.toc a:hover{color:#fff;text-decoration:none}
.pfoot{margin-top:50px;padding-top:20px;border-top:1px solid var(--line);color:#5f7297;font-size:13px}
.menu-btn{display:none;position:fixed;top:14px;right:14px;z-index:50;background:var(--panel);color:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:14px}
@media(max-width:1080px){
  .layout{grid-template-columns:1fr}.toc{display:none}
  .menu-btn{display:block}
  .side{transform:translateX(-100%);transition:transform .25s;z-index:40}
  body.nav-open .side{transform:none}
  .content{margin-left:0;padding:64px 20px 60px}
  .phead h1{font-size:30px}
}