:root{
  --navy:#1A3B6E; --navy-d:#14305a; --green:#0F6E56; --purple:#534AB7;
  --ink:#1f2328; --muted:#5b6470; --line:#e3e7ec; --bg:#ffffff;
  --side:#f7f8fa; --code:#f4f4f2; --chip:#eef1f6;
  --maxw:1240px; --side-w:300px; --top-h:56px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",system-ui,Arial,sans-serif;color:var(--ink);
  background:var(--bg);line-height:1.6;font-size:16px}

/* top bar */
.topbar{position:sticky;top:0;z-index:30;height:var(--top-h);display:flex;align-items:center;
  gap:14px;padding:0 16px;background:var(--navy);color:#fff;box-shadow:0 1px 6px rgba(0,0,0,.15)}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:17px;white-space:nowrap}
.menu-btn{display:none;background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer}
.searchbox{position:relative;margin-left:auto;width:min(420px,46vw)}
.searchbox input{width:100%;height:36px;border:0;border-radius:8px;padding:0 12px;font-size:14px;
  background:#ffffff;color:#1f2328}
.results{position:absolute;top:42px;right:0;left:0;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.18);
  overflow:hidden;display:none;max-height:70vh;overflow-y:auto}
.results.show{display:block}
.results a{display:block;padding:10px 14px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.results a:last-child{border-bottom:0}
.results a:hover,.results a.sel{background:var(--chip)}
.results .r-t{font-weight:600;color:var(--navy)}
.results .r-s{font-size:12.5px;color:var(--muted);display:block;margin-top:2px}
.results .r-empty{padding:12px 14px;color:var(--muted)}

/* layout */
.layout{display:flex;align-items:flex-start}
.sidebar{position:sticky;top:var(--top-h);align-self:flex-start;width:var(--side-w);
  height:calc(100vh - var(--top-h));overflow-y:auto;background:var(--side);
  border-right:1px solid var(--line);padding:14px 10px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{text-decoration:none;color:var(--ink);border-radius:7px;padding:8px 12px;font-size:14px;display:block}
.nav-home{font-weight:600;margin-bottom:6px}
.nav-item{color:#33404f}
.nav-item:hover,.nav-home:hover{background:#e9edf3}
.nav-item.active,.nav-home.active{background:var(--navy);color:#fff}
.subnav{display:flex;flex-direction:column;margin:2px 0 8px 10px;
  border-left:2px solid #cdd6e2;padding-left:8px}
.subnav a{font-size:13px;color:var(--muted);padding:5px 8px;border-radius:5px;transition:background .12s,color .12s}
.subnav a:hover{color:var(--navy);background:#e9edf3}
.subnav a.here{background:#e6eefb;color:var(--navy);font-weight:600}

.scrim{display:none}

/* content */
.content{flex:1;min-width:0;padding:26px clamp(16px,4vw,48px) 60px;max-width:calc(var(--maxw) + 96px);margin:0 auto}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.breadcrumb a{color:var(--green);text-decoration:none}
.breadcrumb .sep{margin:0 6px}
.doc h1{font-size:26px;color:var(--navy);margin:.2em 0 .6em;line-height:1.25;
  border-bottom:3px solid var(--navy);padding-bottom:10px}
h2{font-size:20px;color:var(--green);margin:1.5em 0 .5em;scroll-margin-top:70px}
h3{font-size:16.5px;color:var(--purple);margin:1.2em 0 .4em;scroll-margin-top:70px}
h4{font-size:15px;color:#33404f;margin:1em 0 .3em}
p{margin:.5em 0}
a{color:var(--green)}
code{background:var(--code);padding:.1em .4em;border-radius:5px;font-family:"Consolas",monospace;
  font-size:.88em;color:#b5311c}
pre.code{background:#0f1b2d;color:#e6edf5;padding:14px 16px;border-radius:10px;overflow-x:auto;
  font-size:13px;line-height:1.5;border:1px solid #1d2f49}
pre.code code{background:transparent;color:inherit;padding:0;font-size:13px}
hr{border:0;border-top:1px solid var(--line);margin:1.6em 0}

/* tables */
.table-wrap{overflow-x:auto;margin:1em 0;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:9px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{background:var(--navy);color:#fff;font-weight:600;position:sticky;top:0}
tbody tr:nth-child(even){background:#f5f8fc}
tbody tr:hover{background:#eef3fb}
td code{font-size:.85em}

/* lists */
ul,ol{margin:.5em 0;padding-left:1.4em}
li{margin:.25em 0}
ul.tasklist{list-style:none;padding-left:.2em}
ul.tasklist .box{color:var(--green);font-weight:700;margin-right:6px}

/* figures */
.fig{margin:1.4em 0;text-align:center}
.fig img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);background:#fff}
.fig figcaption{font-size:13px;color:var(--muted);margin-top:8px;font-style:italic}

/* callouts */
blockquote.note{margin:1.1em 0;padding:12px 16px;border-radius:10px;background:#f4f6f9;
  border-left:5px solid #9aa6b6}
blockquote.note.tip{background:#eef4ff;border-left-color:#1f6feb}
blockquote.note.warn{background:#fff7e6;border-left-color:#e0a800}
blockquote.note.lock{background:#fdeeee;border-left-color:#d0362b}

/* pager */
.pager{display:flex;gap:14px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.pg{flex:1;text-decoration:none;border:1px solid var(--line);border-radius:10px;padding:12px 16px;
  color:var(--ink);transition:.15s;background:#fff}
.pg:hover{border-color:var(--navy);box-shadow:0 4px 14px rgba(26,59,110,.1)}
.pg-next{text-align:right}
.pg-k{display:block;font-size:12px;color:var(--muted)}
.pg-t{display:block;font-weight:600;color:var(--navy);margin-top:3px;font-size:14px}
.pg-empty{flex:1}
.foot{margin-top:34px;font-size:12.5px;color:var(--muted);text-align:center}

/* index hero + cards */
.hero{padding:8px 0 6px}
.hero h1{font-size:30px;color:var(--navy);margin:.1em 0}
.hero .sub{color:var(--green);font-weight:600;margin:.2em 0}
.hero .lead{color:var(--muted);max-width:70ch}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:18px}
.card{display:block;color:var(--ink);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;background:#fff;transition:.15s}
.card:hover{border-color:var(--navy);box-shadow:0 8px 22px rgba(26,59,110,.12);transform:translateY(-2px)}
.card-h{display:block;text-decoration:none;font-weight:700;color:var(--navy);font-size:15.5px;margin-bottom:8px;line-height:1.35}
.card-h:hover{color:var(--green)}
.card-subs{list-style:none;margin:0;padding:0}
.card-subs li{margin:3px 0}
.card-subs a{font-size:13px;color:var(--muted);text-decoration:none}
.card-subs a:hover{color:var(--green)}

/* responsive */
@media (max-width:900px){
  .menu-btn{display:block}
  .sidebar{position:fixed;top:var(--top-h);left:0;z-index:25;transform:translateX(-100%);
    transition:transform .2s;box-shadow:2px 0 18px rgba(0,0,0,.15)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .scrim{display:block;position:fixed;inset:var(--top-h) 0 0 0;z-index:20;
    background:rgba(0,0,0,.35)}
  .searchbox{width:auto;flex:1}
}
@media (prefers-color-scheme:dark){
  :root{--ink:#e6edf3;--muted:#9aa7b4;--line:#2a3340;--bg:#0e1520;--side:#121b28;
    --code:#16202e;--chip:#1c2735;--navy:#5b8def;--green:#3fbf8f;--purple:#9a8cff}
  body{background:var(--bg)}
  .topbar{background:#0b1220}
  .searchbox input{background:#1c2735;color:#e6edf3}
  .doc h1{border-bottom-color:#26527f}
  th{background:#1d3a63}
  tbody tr:nth-child(even){background:#141d2a}
  tbody tr:hover{background:#182234}
  .card,.pg,.fig img{background:#121b28}
  blockquote.note{background:#141d2a}
  blockquote.note.tip{background:#122238}
  blockquote.note.warn{background:#2a2413}
  blockquote.note.lock{background:#2a1616}
  .results{background:#121b28}
  .subnav a.here{background:#1b2b45;color:#c9dbff}
}