:root{
  --navy:#03418a;
  --navy-2:#022f64;
  --ink:#0a1f3d;
  --blue:#2f6fd6;
  --soft:#eaf0fb;
  --trace:#c2d4f0;
  --line:#e3e9f3;
  --bg:#ffffff;
  --bg-alt:#f7f9fd;
  --text:#31415c;
  --muted:#6a7a96;
  --font:'Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font:inherit}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .row{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,32px);display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand .chip{flex:none;transition:transform .3s ease}
.brand:hover .chip{transform:rotate(45deg)}
.chip .pins{stroke:var(--navy);stroke-width:2;stroke-linecap:round}
.chip .body{fill:var(--navy)}
.chip .core{fill:#fff;opacity:.92}
.brand .wm{font-weight:800;font-size:1.0rem;letter-spacing:.04em;color:var(--ink);line-height:1.15;display:block}
.brand .sub{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;display:block}
.links{display:flex;align-items:center;gap:4px}
.links a{position:relative;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text);text-decoration:none;padding:8px 11px;border-radius:7px;transition:color .15s}
.links a:hover{color:var(--navy)}
.links a::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:1.5px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.links a:hover::after{transform:scaleX(1)}
.scrollbar{position:absolute;left:0;bottom:-1px;width:100%;height:2px;pointer-events:none}
.scrollbar span{display:block;height:100%;background:var(--navy);transform:scaleX(0);transform-origin:left}

/* ---------- mobile toolbar ---------- */
.toolbar{display:none;position:sticky;top:64px;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:10px clamp(18px,4vw,32px);align-items:center;gap:12px}
.tb-btn{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:var(--soft);border:1px solid var(--trace);border-radius:8px;padding:8px 12px;cursor:pointer}
.tb-title{font-weight:600;font-size:.86rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:232px minmax(0,1fr) 196px;gap:clamp(24px,3.5vw,44px);padding:34px clamp(18px,4vw,32px) 70px;max-width:var(--maxw);margin:0 auto}
.sidebar h3,.toc h3{font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.sidebar{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 112px);overflow:auto;padding-right:6px}
#page-nav{display:flex;flex-direction:column;gap:3px}
#page-nav a{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--text);font-size:.87rem;font-weight:500;line-height:1.35;transition:background .14s,color .14s}
#page-nav a .pn{font-family:var(--mono);font-size:.58rem;font-weight:600;color:var(--navy);background:var(--soft);border:1px solid var(--trace);border-radius:4px;padding:1px 5px;flex:none}
#page-nav a:hover{background:var(--bg-alt);color:var(--ink)}
#page-nav a.active{background:var(--soft);color:var(--ink);font-weight:600;box-shadow:inset 2px 0 0 var(--navy)}
.side-note{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;line-height:1.8;color:var(--muted);border-top:1px dashed var(--line);margin-top:18px;padding-top:12px}

.toc{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 112px);overflow:auto}
#toc-nav{display:flex;flex-direction:column;gap:2px;border-left:1.5px solid var(--line)}
#toc-nav a{font-size:.78rem;color:var(--muted);text-decoration:none;padding:4px 0 4px 14px;margin-left:-1.5px;border-left:1.5px solid transparent;line-height:1.4;transition:color .14s,border-color .14s}
#toc-nav a.t-h3{padding-left:26px;font-size:.73rem}
#toc-nav a:hover{color:var(--ink)}
#toc-nav a.active{color:var(--navy);font-weight:600;border-left-color:var(--navy)}

/* ---------- doc meta + pager ---------- */
.doc-meta{display:flex;align-items:center;gap:14px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.doc-meta .pgno{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.doc-meta .edit{margin-left:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .14s}
.doc-meta .edit:hover{color:var(--navy)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:52px}
.pg{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-decoration:none;background:#fff;transition:transform .16s,border-color .16s,box-shadow .16s}
.pg:hover{transform:translateY(-2px);border-color:#cdd9ef;box-shadow:0 14px 30px -22px rgba(3,65,138,.45)}
.pg span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pg b{color:var(--ink);font-size:.92rem;font-weight:700}
.pg.next{text-align:right;align-items:flex-end}

/* ---------- markdown ---------- */
.md{min-height:300px}
.md>:first-child{margin-top:0}
.md h1{font-weight:800;font-size:clamp(1.85rem,3.6vw,2.55rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin:0 0 .55em;padding-bottom:.45em;border-bottom:1px solid var(--line)}
.md h2{font-weight:800;font-size:1.42rem;letter-spacing:-.01em;color:var(--ink);margin:2em 0 .6em}
.md h3{font-weight:700;font-size:1.1rem;color:var(--ink);margin:1.7em 0 .5em}
.md h4{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin:1.6em 0 .5em}
.md h5,.md h6{font-weight:700;font-size:.92rem;color:var(--ink);margin:1.4em 0 .4em}
.md :is(h1,h2,h3,h4,h5,h6){scroll-margin-top:96px}
.md .hlink{opacity:0;margin-left:9px;color:var(--trace);text-decoration:none;font-weight:600;border:0;transition:opacity .15s,color .15s}
.md :is(h1,h2,h3,h4,h5,h6):hover .hlink{opacity:1}
.md .hlink:hover{color:var(--navy)}
.md p{margin:.9em 0;line-height:1.78;font-size:.98rem}
.md a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--trace);transition:border-color .14s}
.md a:hover{border-bottom-color:var(--navy)}
.md strong{color:var(--ink);font-weight:700}
.md del{color:var(--muted)}
.md code{font-family:var(--mono);font-size:.84em;background:var(--soft);border:1px solid var(--trace);border-radius:5px;padding:.08em .38em;color:var(--navy-2)}
.md ul,.md ol{margin:.9em 0;padding-left:1.45em}
.md li{margin:.4em 0;line-height:1.7;font-size:.98rem}
.md li::marker{color:var(--navy);font-weight:600}
.md li.task{list-style:none;margin-left:-1.45em;display:flex;align-items:baseline;gap:9px}
.md li.task input{accent-color:var(--navy);transform:translateY(1px)}
.md ul ul,.md ol ol,.md ul ol,.md ol ul{margin:.35em 0}
.md blockquote{margin:1.4em 0;padding:6px 20px;border-left:3px solid var(--navy);background:var(--soft);border-radius:0 12px 12px 0}
.md blockquote p{font-size:.94rem}
.md hr{border:0;height:1px;background:linear-gradient(90deg,var(--line),transparent);margin:2.4em 0}
.codeblock{margin:1.5em 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.codeblock figcaption{display:flex;align-items:center;gap:9px;padding:9px 14px;background:var(--soft);border-bottom:1px solid var(--line)}
.codeblock .dot{width:7px;height:7px;border-radius:50%;background:var(--navy);animation:dotpulse 2.4s ease-in-out infinite}
.codeblock .lang{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.codeblock .copy{margin-left:auto;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 9px;cursor:pointer;transition:color .14s,border-color .14s}
.codeblock .copy:hover{color:var(--navy);border-color:var(--trace)}
.codeblock pre{padding:16px 18px;overflow:auto;background:#fbfcff}
.codeblock pre code{font-family:var(--mono);font-size:.82rem;line-height:1.7;color:var(--ink);background:none;border:0;padding:0}
.tablewrap{margin:1.5em 0;border:1px solid var(--line);border-radius:12px;overflow-x:auto}
.md table{width:100%;border-collapse:collapse;font-size:.9rem}
.md th{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:var(--soft);padding:11px 15px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.md td{padding:10px 15px;border-bottom:1px solid var(--line);line-height:1.6}
.md tbody tr:last-child td{border-bottom:0}
.md tbody tr:nth-child(even){background:#fafcff}
figure.img{margin:1.7em 0}
figure.img img{border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -30px rgba(3,65,138,.4)}
figure.img figcaption{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:9px}

/* ---------- states ---------- */
@keyframes skshimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.sk{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--soft) 25%,#f1f4fb 37%,var(--soft) 63%);background-size:400% 100%;animation:skshimmer 1.4s ease-in-out infinite;margin:10px 0}
.state-card{border:1px dashed var(--trace);border-radius:14px;padding:30px;background:var(--bg-alt)}
.state-card h2{border:0;padding:0;margin:0 0 10px;font-size:1.15rem}
.state-card p{font-size:.9rem;color:var(--muted)}
@keyframes dotpulse{0%,100%{box-shadow:0 0 0 3px rgba(3,65,138,.16)}50%{box-shadow:0 0 0 7px rgba(3,65,138,.04)}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:26px 0;background:var(--bg-alt)}
footer .row{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,32px);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
footer .wm{font-weight:800;color:var(--ink);letter-spacing:.03em;font-size:.92rem}
footer .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
footer a{margin-left:auto;color:var(--text);text-decoration:none;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;transition:color .14s}
footer a:hover{color:var(--navy)}

/* ---------- drawer ---------- */
.backdrop{position:fixed;inset:0;background:rgba(10,31,61,.35);z-index:64;opacity:0;pointer-events:none;transition:opacity .2s}
body.drawer-open .backdrop{opacity:1;pointer-events:auto}

@media(max-width:1120px){
  .toc{display:none}
  .layout{grid-template-columns:232px minmax(0,1fr)}
}
@media(max-width:880px){
  .layout{grid-template-columns:1fr;padding-top:24px}
  .toolbar{display:flex}
  .sidebar{position:fixed;top:64px;bottom:0;left:0;width:min(310px,85vw);background:#fff;z-index:66;padding:22px 20px;transform:translateX(-103%);transition:transform .24s ease;border-right:1px solid var(--line);max-height:none;box-shadow:0 20px 60px rgba(3,65,138,.25)}
  body.drawer-open .sidebar{transform:none}
  .pager{grid-template-columns:1fr}
  .pg.next{text-align:left;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}