:root{
  --brand:#3b6cff; --brand-weak:#eef3ff; --ink:#1f2733; --ink-2:#5a6573;
  --line:#e8ebf0; --bg:#fff; --side:#fafbfc; --radius:10px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.78;-webkit-font-smoothing:antialiased;}
a{color:var(--brand);text-decoration:none;}

.topbar{position:sticky;top:0;z-index:30;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);font-size:15px;}
.topbar .logo{width:34px;height:34px;border-radius:8px;object-fit:contain;display:block;}
.topbar .brand small{font-weight:500;font-size:12px;color:var(--ink-2);}
.topbar .back{font-size:13.5px;color:var(--ink-2);border:1px solid var(--line);padding:6px 14px;border-radius:999px;transition:.2s;}
.topbar .back:hover{color:var(--brand);border-color:var(--brand);}

.layout{display:flex;align-items:flex-start;}

.side{position:sticky;top:56px;width:288px;flex:0 0 288px;height:calc(100vh - 56px);overflow:auto;background:var(--side);border-right:1px solid var(--line);padding:22px 16px 80px;}
.side h4{font-size:11.5px;letter-spacing:1px;color:var(--ink-2);text-transform:uppercase;margin:20px 0 8px;font-weight:700;}
.side h4:first-child{margin-top:0;}
.toc{list-style:none;margin:0;padding:0;}
.toc a{display:block;padding:6px 12px;border-radius:8px;color:var(--ink-2);font-size:13.5px;border-left:2px solid transparent;transition:.15s;}
.toc a:hover{background:var(--brand-weak);color:var(--brand);}
.toc a.active{background:var(--brand-weak);color:var(--brand);border-left-color:var(--brand);font-weight:700;}
.toc .sub a{padding-left:26px;font-size:13px;}

.main{flex:1;min-width:0;padding:40px 56px 140px;max-width:1180px;margin:0;}
.main .doc-title{font-size:28px;margin:0 0 6px;}
.main .doc-lead{color:var(--ink-2);margin:0 0 10px;font-size:14.5px;}
.main .note{background:var(--brand-weak);border:1px solid #d6e2ff;border-left:3px solid var(--brand);border-radius:8px;padding:10px 14px;margin:16px 0;font-size:13.5px;color:#33415c;}
.main h2{font-size:21px;margin:40px 0 12px;padding-top:10px;border-top:1px solid var(--line);scroll-margin-top:72px;}
.main h2:first-of-type{border-top:none;margin-top:8px;}
.main h3{font-size:16.5px;margin:24px 0 8px;scroll-margin-top:72px;color:var(--ink);}
.main p{margin:9px 0;color:#3a4452;font-size:14.5px;}
.main ul,.main ol{margin:9px 0;padding-left:22px;color:#3a4452;font-size:14.5px;}
.main li{margin:5px 0;}
.main code{background:#f1f4f9;padding:2px 6px;border-radius:5px;font-size:12.5px;color:#c2255c;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.main table{border-collapse:collapse;width:100%;margin:14px 0;font-size:13.5px;}
.main th,.main td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top;}
.main th{background:var(--side);color:var(--ink);font-weight:700;}
.main .fig{margin:18px 0;text-align:center;}
.main .fig img{max-width:100%;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(20,30,60,.08);background:#fff;}
.main .fig figcaption{margin-top:8px;font-size:12.5px;color:var(--ink-2);}
.main .fig.fig-mobile{display:flex;flex-direction:column;align-items:center;}
.main .fig.fig-mobile img{max-width:400px;width:400px;height:auto;background:#fff;}

@media (max-width:980px){
  .layout{flex-direction:column;}
  .side{position:static;width:100%;flex:none;height:auto;border-right:none;border-bottom:1px solid var(--line);}
  .main{padding:28px 18px 90px;max-width:none;}
}