@font-face{font-family:"Inter Tight";src:url(../site/fonts/inter-tight-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Montserrat";src:url(../site/fonts/montserrat-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../site/fonts/geist-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --paper:#F7F7F6;
  --raised:#FDFDFC;
  --deep:#EFEFEC;
  --ink:#141418;
  --tx:#2B2B31;
  --mute:#62626C;
  --faint:#9A9AA3;
  --rule:rgba(20,20,30,.085);
  --edge:rgba(20,20,30,.16);
  --acc:#526CE8;
  --acc-soft:rgba(82,108,232,.10);
  --acc-border:rgba(82,108,232,.26);
  --grad:linear-gradient(100deg,#008DCC,#526CE8 50%,#8A4ED9);
  --zh:"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --sans:"Inter Tight","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --lift1:0 1px 2px rgba(20,20,30,.05),0 4px 12px rgba(20,20,30,.04);
  --lift2:0 2px 6px rgba(20,20,30,.05),0 14px 28px rgba(20,20,30,.07);
  --e-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
html,body{margin:0;background:var(--paper);color:var(--tx);-webkit-font-smoothing:antialiased}
body{font:400 15.5px/1.75 var(--sans);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---------- Top Navigation Bar ---------- */
.d-top{
  position:sticky;
  top:0;
  z-index:60;
  height:64px;
  background:rgba(247,247,246,.88);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--rule);
}
.d-topbar{
  max-width:1440px;
  height:100%;
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  gap:14px;
}
.d-brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font:600 17px "Montserrat",var(--sans);
  letter-spacing:-.01em;
  color:var(--ink);
}
.d-brand svg{width:24px;height:24px;flex:none}
.d-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 9px;
  border-radius:999px;
  background:var(--acc-soft);
  border:1px solid var(--acc-border);
  color:var(--acc);
  font:600 12px/1.2 var(--sans);
}
.d-top-links{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  padding-left:14px;
  border-left:1px solid var(--rule);
}
.d-top-links a{
  padding:6px 10px;
  border-radius:7px;
  font-size:13.5px;
  font-weight:500;
  color:var(--mute);
  transition:color .18s,background .18s;
}
.d-top-links a:hover{
  color:var(--ink);
  background:rgba(20,20,30,.04);
}
.d-sp{flex:1}
.d-lang{
  display:flex;
  border:1px solid var(--rule);
  border-radius:999px;
  padding:2px;
  background:var(--deep);
}
.d-lang button{
  all:unset;
  cursor:pointer;
  font:500 12px var(--mono);
  color:var(--mute);
  padding:3px 10px;
  border-radius:999px;
  transition:background .2s,color .2s;
}
.d-lang button.on{
  background:var(--raised);
  color:var(--ink);
  box-shadow:var(--lift1);
}
.d-gh{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:34px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid var(--rule);
  background:var(--raised);
  font:500 13px var(--sans);
  color:var(--ink);
  box-shadow:var(--lift1);
}
.d-gh svg{width:15px;height:15px}
.d-menu-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid var(--rule);
  border-radius:8px;
  background:var(--raised);
  cursor:pointer;
}
.d-menu-btn svg{width:18px;height:18px}

/* ---------- 3-Column Documentation Layout ---------- */
.d-layout{
  max-width:1440px;
  margin:0 auto;
  display:grid;
  grid-template-columns:288px minmax(0,1fr) 232px;
  align-items:start;
  min-height:calc(100dvh - 64px);
}

/* ---------- Left Multi-Level Sidebar ---------- */
.d-side{
  position:sticky;
  top:64px;
  height:calc(100dvh - 64px);
  overflow-y:auto;
  padding:24px 14px 48px 28px;
  border-right:1px solid var(--rule);
  background:rgba(253,253,252,.65);
}

/* 幽灵滚动条（Ghost Scrollbar）：静止时完全透明隐藏，悬停或聚焦时浮现 4px 细胶囊滑块 */
@supports selector(::-webkit-scrollbar){
  .d-side,.d-toc{
    scrollbar-width:auto;
    scrollbar-color:auto;
  }
}
@supports not selector(::-webkit-scrollbar){
  .d-side,.d-toc{
    scrollbar-width:thin;
    scrollbar-color:transparent transparent;
  }
  .d-side:hover,.d-side:focus-within,
  .d-toc:hover,.d-toc:focus-within{
    scrollbar-color:rgba(20,20,30,.18) transparent;
  }
}
.d-side::-webkit-scrollbar,
.d-toc::-webkit-scrollbar{
  width:4px;
  height:4px;
}
.d-side::-webkit-scrollbar-track,
.d-side::-webkit-scrollbar-corner,
.d-toc::-webkit-scrollbar-track,
.d-toc::-webkit-scrollbar-corner{
  background:transparent;
}
.d-side::-webkit-scrollbar-button,
.d-toc::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}
.d-side::-webkit-scrollbar-thumb,
.d-toc::-webkit-scrollbar-thumb{
  border:0;
  border-radius:999px;
  background-color:transparent;
}
.d-side:hover::-webkit-scrollbar-thumb,
.d-side:focus-within::-webkit-scrollbar-thumb,
.d-toc:hover::-webkit-scrollbar-thumb,
.d-toc:focus-within::-webkit-scrollbar-thumb{
  background-color:rgba(20,20,30,.18);
}
.d-side::-webkit-scrollbar-thumb:hover,
.d-toc::-webkit-scrollbar-thumb:hover{
  background-color:rgba(20,20,30,.34);
}
.d-side-head{
  padding:0 6px 14px;
}
.d-side-head b{
  display:block;
  font-size:15px;
  font-weight:650;
  color:var(--ink);
  letter-spacing:-.01em;
}
.d-side-head span{
  display:block;
  margin-top:3px;
  font-size:12px;
  color:var(--mute);
  line-height:1.4;
}
.d-search{
  position:relative;
  margin:0 4px 18px;
}
.d-search input{
  width:100%;
  height:36px;
  padding:0 36px 0 32px;
  border:1px solid var(--edge);
  border-radius:8px;
  background:var(--raised);
  font-size:13px;
  color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(20,20,30,.03);
  transition:border-color .18s,box-shadow .18s;
}
.d-search input::placeholder{color:var(--faint)}
.d-search input::-webkit-search-cancel-button,
.d-search input::-webkit-search-decoration{appearance:none}
.d-search kbd{
  position:absolute;
  right:8px;
  top:8px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border:1px solid var(--edge);
  border-radius:5px;
  background:var(--paper);
  color:var(--mute);
  font:500 11px/18px var(--mono);
  text-align:center;
  pointer-events:none;
}
.d-search:has(input:not(:placeholder-shown)) kbd{opacity:0}
.d-search input:focus{
  outline:none;
  border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-soft);
}
.d-search svg{
  position:absolute;
  left:10px;
  top:10px;
  width:15px;
  height:15px;
  color:var(--faint);
  pointer-events:none;
}
.d-sec{
  margin-bottom:18px;
}
.d-sec-title{
  margin:18px 10px 4px;
  font-size:15px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:0;
  color:var(--faint);
  text-transform:none;
}
.d-sec:first-child .d-sec-title{margin-top:2px}
.d-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:32px;
  margin:1px 0;
  padding:5px 10px;
  border-radius:8px;
  font-size:13px;
  font-weight:450;
  line-height:1.4;
  color:var(--mute);
  transition:background .14s,color .14s;
}
.d-link:hover{
  background:rgba(20,20,30,.045);
  color:var(--ink);
}
.d-link.on{
  background:var(--acc-soft);
  color:var(--acc);
}
details.d-sub{
  margin:3px 0;
}
details.d-sub>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:33px;
  padding:5px 10px;
  border-radius:8px;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  color:var(--tx);
  cursor:pointer;
  list-style:none;
  user-select:none;
  transition:background .14s,color .14s;
}
details.d-sub>summary::-webkit-details-marker{display:none}
details.d-sub>summary:hover{
  background:rgba(20,20,30,.045);
  color:var(--ink);
}
details.d-sub>summary::after{
  content:"";
  width:6px;
  height:6px;
  border-right:1.6px solid var(--faint);
  border-bottom:1.6px solid var(--faint);
  transform:rotate(-45deg);
  transition:transform .16s ease;
  margin-right:3px;
  flex:none;
}
details.d-sub[open]>summary::after{
  transform:rotate(45deg);
}
details.d-sub.has-on>summary{
  color:var(--ink);
}
.d-sub-list{
  margin:2px 0 6px 13px;
  padding-left:9px;
  border-left:1.5px solid var(--rule);
}
.d-empty{
  padding:18px 10px;
  font-size:13px;
  color:var(--mute);
  line-height:1.55;
}

/* ---------- Center Main Article Area (Generous Breathing Room, Never Flush to Top) ---------- */
.d-main{
  min-width:0;
  padding:48px clamp(32px,5vw,76px) 96px;
}
.d-article{
  max-width:800px;
  margin:0 auto;
}
.d-head{
  margin:0 0 32px;
  padding:0 0 26px;
  border-bottom:1px solid var(--rule);
}
.d-kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 0 14px;
  padding:4px 11px;
  border-radius:999px;
  background:var(--acc-soft);
  border:1px solid var(--acc-border);
  color:var(--acc);
  font:600 12px/1.3 var(--mono);
  letter-spacing:.02em;
}
.d-head h1{
  margin:0 0 14px;
  font:650 clamp(26px,2.6vw,34px)/1.24 var(--sans);
  letter-spacing:-.025em;
  color:var(--ink);
}
.d-lead{
  margin:0;
  font-size:16px;
  line-height:1.72;
  color:var(--mute);
}

/* ---------- Rich Markdown Body Styles ---------- */
.d-body h2{
  margin:38px 0 14px;
  padding-top:8px;
  font:650 21px/1.35 var(--sans);
  letter-spacing:-.015em;
  color:var(--ink);
}
.d-body h2:first-child{
  margin-top:6px;
}
.d-body h3{
  margin:26px 0 10px;
  font:600 16.5px/1.4 var(--sans);
  color:var(--ink);
}
.d-body p{
  margin:12px 0;
  color:var(--tx);
  line-height:1.78;
}
.d-body strong,.d-body b{
  color:var(--ink);
  font-weight:650;
}
.d-body ul,.d-body ol{
  margin:12px 0 18px;
  padding-left:1.45em;
  color:var(--tx);
}
.d-body li{
  margin:7px 0;
  line-height:1.74;
}
.d-body hr{
  border:0;
  border-top:1px solid var(--rule);
  margin:34px 0;
}
.d-body code{
  padding:2px 6px;
  border-radius:5px;
  background:var(--deep);
  border:1px solid var(--rule);
  font:500 13px/1.4 var(--mono);
  color:var(--ink);
}
.d-body pre{
  margin:16px 0 22px;
  padding:16px 20px;
  border-radius:11px;
  background:#18181B;
  color:#F4F4F5;
  overflow-x:auto;
  box-shadow:var(--lift2);
  font:400 13.5px/1.75 var(--mono);
}
.d-body pre code{
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
}
.d-body blockquote{
  margin:18px 0 22px;
  padding:14px 18px;
  border:1px solid var(--acc-border);
  border-left:3.5px solid var(--acc);
  border-radius:10px;
  background:rgba(82,108,232,.055);
  color:var(--tx);
  font-size:14.5px;
}
.d-body blockquote p{
  margin:4px 0;
}
.d-table-wrap{
  margin:18px 0 24px;
  border:1px solid var(--edge);
  border-radius:12px;
  overflow-x:auto;
  background:var(--raised);
  box-shadow:var(--lift1);
}
.d-body table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  line-height:1.6;
}
.d-body th,.d-body td{
  padding:12px 15px;
  border-bottom:1px solid var(--rule);
  text-align:left;
  vertical-align:top;
}
.d-body tr:last-child td{
  border-bottom:0;
}
.d-body th{
  background:var(--deep);
  color:var(--ink);
  font-size:12.5px;
  font-weight:650;
  white-space:nowrap;
}
.d-body figure{
  margin:22px 0 26px;
  border:1px solid var(--edge);
  border-radius:13px;
  overflow:hidden;
  background:var(--raised);
  box-shadow:var(--lift2);
}
.d-fig-media{
  position:relative;
  min-height:0;
  background:#fff;
}
.d-fig.is-loading .d-fig-media{
  min-height:240px;
  overflow:hidden;
  background:#e4e4de;
}
.d-fig.is-loading .d-fig-media::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);
  animation:d-shimmer 1.15s ease-in-out infinite;
}
.d-fig.is-loading .d-fig-media::after{
  content:attr(data-loading);
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:var(--mute);
  font-size:13px;
}
.d-body figure img{
  display:block;
  width:100%;
  max-height:540px;
  object-fit:contain;
  background:#fff;
  opacity:1;
  transition:opacity .18s ease;
}
.d-fig.is-loading img{opacity:0}
.d-fig.is-error .d-fig-media{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:160px;
  background:var(--deep);
  animation:none;
}
.d-fig.is-error img{display:none}
.d-fig.is-error .d-fig-media::after{
  content:attr(data-fail);
  color:var(--mute);
  font-size:13px;
}
@keyframes d-shimmer{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}
.d-body figcaption{
  padding:10px 16px;
  border-top:1px solid var(--rule);
  background:var(--deep);
  color:var(--mute);
  font-size:12.5px;
  line-height:1.5;
  text-align:center;
}

/* ---------- Prev / Next Pager Cards ---------- */
.d-pager{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid var(--rule);
}
.d-page-card{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:16px 20px;
  border:1px solid var(--edge);
  border-radius:12px;
  background:var(--raised);
  box-shadow:var(--lift1);
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.d-page-card:hover{
  border-color:var(--acc);
  transform:translateY(-1px);
  box-shadow:var(--lift2);
}
.d-page-card.next{
  grid-column:2;
  text-align:right;
}
.d-page-card small{
  font:500 12px var(--mono);
  color:var(--mute);
}
.d-page-card b{
  font-size:15px;
  font-weight:650;
  color:var(--ink);
}

/* ---------- Right Anchor Outline ("On This Page") ---------- */
.d-toc{
  position:sticky;
  top:64px;
  height:calc(100dvh - 64px);
  overflow-y:auto;
  padding:48px 24px 40px 8px;
}
.d-toc-box{
  padding-left:14px;
  border-left:1px solid var(--rule);
}
.d-toc-title{
  margin:0 0 10px;
  font:650 12px/1.4 var(--sans);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink);
}
.d-toc a{
  display:block;
  padding:5px 0 5px 8px;
  margin-left:-8px;
  font-size:12.5px;
  font-weight:450;
  line-height:1.45;
  color:var(--mute);
  border-radius:6px;
  transition:color .15s,background .15s;
}
.d-toc a.sub-h3{
  padding-left:20px;
  font-size:12px;
}
.d-toc a:hover,.d-toc a.on{
  color:var(--acc);
  background:var(--acc-soft);
}

/* ---------- Responsive Breakpoints ---------- */
@media (max-width:1180px){
  .d-layout{grid-template-columns:272px minmax(0,1fr)}
  .d-toc{display:none}
}
@media (max-width:860px){
  .d-topbar{padding:0 16px}
  .d-top-links{display:none}
  .d-menu-btn{display:inline-flex}
  .d-layout{grid-template-columns:1fr}
  .d-side{
    position:fixed;
    left:0;
    top:64px;
    bottom:0;
    width:290px;
    z-index:55;
    background:var(--paper);
    box-shadow:var(--lift2);
    transform:translateX(-102%);
    transition:transform .24s var(--e-out);
  }
  body.d-nav-open .d-side{
    transform:none;
  }
  .d-main{
    padding:32px 20px 72px;
  }
  .d-pager{
    grid-template-columns:1fr;
  }
  .d-page-card.next{
    grid-column:1;
  }
}