/* ═══════════════════════════════════════════════════════════════
   CLAUDE CODE DOCS STYLE — Dark Theme
   Based on code.claude.com/docs
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#09090B;--bg2:#0E0E0E;--bg3:#141414;--bg4:#1A1A1A;
  --border:#252525;--border2:#333;
  --fg:#FFFFFF;--fg2:#CECECE;--fg3:#9E9E9E;--fg4:#6B6B6B;
  --accent:#D4A27F;--accent-g:rgba(212,162,127,.1);
  --blue:#6B9FFF;--teal:#4ECDC4;--purple:#A78BFA;
  --green:#6EE7B7;--rose:#F87171;--amber:#FBBF24;
  --tag-blue-bg:rgba(107,159,255,.12);--tag-teal-bg:rgba(78,205,196,.12);
  --tag-purple-bg:rgba(167,139,250,.12);--tag-green-bg:rgba(110,231,183,.12);
  --tag-rose-bg:rgba(248,113,113,.12);--tag-amber-bg:rgba(251,191,36,.12);
  --code-bg:rgba(255,255,255,.05);
  --hdr-bg:rgba(9,9,11,.92);
  --overlay-bg:rgba(0,0,0,.6);
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --serif:Georgia,"PingFang SC","Noto Serif SC","Songti SC","SimSun","Times New Roman",serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --head-h:64px;--side-w:260px;--toc-w:200px;--max-w:1200px;
}
[data-theme="light"]{
  --bg:#FAFAF9;--bg2:#FFFFFF;--bg3:#F5F5F4;--bg4:#E7E5E4;
  --border:#E7E5E4;--border2:#D6D3D1;
  --fg:#1C1917;--fg2:#44403C;--fg3:#78716C;--fg4:#A8A29E;
  --accent:#C2713A;--accent-g:rgba(194,113,58,.08);
  --blue:#3B82F6;--teal:#14B8A6;--purple:#7C3AED;
  --green:#10B981;--rose:#EF4444;--amber:#D97706;
  --tag-blue-bg:rgba(59,130,246,.1);--tag-teal-bg:rgba(20,184,166,.1);
  --tag-purple-bg:rgba(124,58,237,.1);--tag-green-bg:rgba(16,185,129,.1);
  --tag-rose-bg:rgba(239,68,68,.1);--tag-amber-bg:rgba(217,119,6,.1);
  --code-bg:rgba(0,0,0,.04);
  --hdr-bg:rgba(250,250,249,.92);
  --overlay-bg:rgba(0,0,0,.3);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--bg);color:var(--fg2);font-family:var(--sans);line-height:1.5;overflow-x:hidden}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border2)}

/* ═══ HEADER ═══ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--head-h);
  background:var(--hdr-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:1rem}
.hdr-inner{max-width:var(--max-w);margin:0 auto;width:100%;display:flex;align-items:center;padding:0 1.5rem;gap:1rem}
.hdr-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--fg)}
.hdr-logo{width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.hdr-logo img{width:28px;height:28px;opacity:1}
[data-theme="light"] .hdr-logo img{opacity:1}
.hdr-title{font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--fg);letter-spacing:-.01em}
.hdr-title span{color:var(--fg3);font-weight:400}

/* Search */
.search-btn{display:flex;align-items:center;gap:.5rem;margin-left:auto;
  background:var(--bg);border:1px solid var(--border);border-radius:12px;
  padding:6px 12px;color:var(--fg3);font:.82rem/1 var(--sans);cursor:pointer;transition:all .15s}
.search-btn:hover{border-color:var(--border2);color:var(--fg3)}
.search-btn kbd{font:.68rem var(--mono);background:var(--bg3);padding:2px 6px;border-radius:4px;
  border:1px solid var(--border);color:var(--fg4)}

/* Dark mode toggle */
.theme-btn{background:0;border:0;color:var(--fg3);cursor:pointer;padding:6px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;transition:color .15s}
.theme-btn:hover{color:var(--fg)}
.icon-moon{display:none}
.icon-sun{display:block}
[data-theme="light"] .icon-sun{display:none}
[data-theme="light"] .icon-moon{display:block}

/* ═══ TABS ═══ */
.tabs{position:fixed;top:var(--head-h);left:0;right:0;z-index:199;
  background:var(--hdr-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none;white-space:nowrap;text-align:center}
.tabs::-webkit-scrollbar{display:none}
.tabs-inner{display:inline-flex;gap:2px;padding:8px 1.5rem}
.tab{padding:6px 16px;border-radius:10px;border:0;background:0;color:var(--fg3);
  font:500 .82rem/1.4 var(--sans);cursor:pointer;transition:all .2s;letter-spacing:-.01em}
.tab:hover{color:var(--fg2);background:var(--code-bg)}
.tab.on{background:var(--fg);color:var(--bg);font-weight:600}
[data-theme="light"] .tab.on{background:var(--fg);color:#fff}

/* ═══ LAYOUT ═══ */
.wrap{display:grid;grid-template-columns:var(--side-w) 1fr;
  margin-top:calc(var(--head-h) + 49px);min-height:calc(100vh - var(--head-h) - 49px);
  max-width:var(--max-w);margin-left:auto;margin-right:auto}

/* ═══ SIDEBAR ═══ */
.side{position:sticky;top:calc(var(--head-h) + 49px);height:calc(100vh - var(--head-h) - 49px);
  overflow-y:auto;border-right:1px solid var(--border);background:var(--bg);padding:1rem 0}
.sp{display:none}.sp.on{display:block}
.sg{margin-bottom:1.25rem}
.sg-title{font:500 .7rem/1 var(--sans);color:var(--fg4);text-transform:uppercase;letter-spacing:.08em;
  padding:0 1rem;margin-bottom:.3rem}
.si{display:block;padding:6px 12px 6px 16px;font:500 .82rem/1.5 var(--sans);color:var(--fg3);
  border-radius:12px;cursor:pointer;transition:all .15s ease;text-decoration:none;
  margin:0 .5rem;border-left:2px solid transparent}
.si:hover{color:var(--fg2);background:var(--code-bg)}
.si.on{color:var(--fg);background:var(--code-bg);border-left-color:var(--accent)}

/* ═══ MAIN ═══ */
.main{padding:2rem 2.5rem 6rem;max-width:860px;min-width:0}
.tc{display:none}.tc.on{display:block;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ═══ TOC (On this page) ═══ */
.toc-side{position:fixed;top:calc(var(--head-h) + 49px + 2rem);right:2rem;
  width:var(--toc-w);max-height:calc(100vh - var(--head-h) - 100px);overflow-y:auto;
  scrollbar-width:none}
.toc-side::-webkit-scrollbar{display:none}
.toc-title{font:600 .68rem/1 var(--sans);color:var(--fg4);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem}
.toc-link{display:block;padding:3px 0;font:.75rem/1.6 var(--sans);color:var(--fg4);
  text-decoration:none;transition:color .15s;border-left:2px solid transparent;padding-left:10px}
.toc-link:hover{color:var(--fg3)}
.toc-link.on{color:var(--accent);border-left-color:var(--accent)}

/* ═══ HERO ═══ */
.hero-title{font-family:var(--serif);font-size:1.85rem;font-weight:400;line-height:1.2;
  letter-spacing:-.02em;margin-bottom:.4rem;color:var(--fg)}
.hero-title em{font-style:italic;color:var(--accent)}
.hero-sub{font-size:.875rem;color:var(--fg3);margin-bottom:2rem;max-width:520px;line-height:1.6}

/* ═══ TYPOGRAPHY ═══ */
h1{font-size:inherit;font-weight:inherit;margin:0}
h2{font-family:var(--sans);font-size:1rem;font-weight:400;line-height:1.5;
  color:var(--fg);margin:2.5rem 0 .85rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--border);letter-spacing:-.01em}
h3{font:600 .875rem/1.4 var(--sans);color:var(--fg);margin:1.5rem 0 .5rem}

p{margin-bottom:.75rem;color:var(--fg2);line-height:1.65;font-size:.875rem}
a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px;transition:all .15s}
a:hover{text-decoration-color:var(--accent);color:var(--accent)}
strong{color:var(--fg);font-weight:600}
ol,ul{margin:.5rem 0 .85rem 1.25rem;font:.875rem/1.75 var(--sans);color:var(--fg2)}
li{margin-bottom:.2rem}
li code{font-size:.82em}

/* ═══ CODE ═══ */
code{font-family:var(--mono);background:var(--code-bg);padding:2px 8px;border-radius:6px;font-size:.84em;color:var(--fg2)}
pre{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:1rem 1.15rem;
  overflow-x:auto;margin:1rem 0;position:relative;font:.82rem/1.65 var(--mono);color:var(--fg2)}
pre code{background:0;padding:0;color:var(--fg2);font-size:1em}
.cp{position:absolute;top:8px;right:8px;background:var(--code-bg);border:0;color:var(--fg3);
  padding:3px 10px;border-radius:6px;font:.68rem var(--mono);cursor:pointer;transition:all .15s}
.cp:hover{background:var(--code-bg);color:var(--fg2)}

/* ═══ CARDS ═══ */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:1rem;
  margin:.75rem 0;transition:all .2s ease}
.card:hover{border-color:var(--border2)}
.card-t{font:500 .875rem/1.3 var(--sans);color:var(--fg);margin-bottom:.35rem}
.card img{width:100%;border-radius:6px;margin:.5rem 0;border:1px solid var(--border)}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:.75rem 0}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;margin:.75rem 0}

/* ═══ TABLES ═══ */
table{width:100%;border-collapse:collapse;margin:.85rem 0;font:.84rem var(--sans)}
th{text-align:left;padding:8px 12px;border-bottom:1px solid var(--border);
  color:var(--fg);font:500 .72rem var(--sans);letter-spacing:.02em}
td{padding:8px 12px;border-bottom:1px solid var(--border);color:var(--fg3)}
tr:hover td{background:var(--code-bg)}

/* ═══ TAGS ═══ */
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font:600 .68rem var(--mono);letter-spacing:.02em}
.t-o{background:var(--tag-amber-bg);color:var(--amber)}
.t-b{background:var(--tag-blue-bg);color:var(--blue)}
.t-g{background:var(--tag-teal-bg);color:var(--teal)}
.t-p{background:var(--tag-purple-bg);color:var(--purple)}
.t-d{background:var(--tag-amber-bg);color:var(--amber)}
.t-r{background:var(--tag-rose-bg);color:var(--rose)}

/* ═══ CROSS-LINKS ═══ */
.xl{color:var(--accent);text-decoration:underline;text-decoration-style:dashed;
  text-decoration-color:var(--accent);text-underline-offset:3px;cursor:pointer;
  transition:all .15s;font-weight:500}
.xl:hover{color:var(--fg);text-decoration-style:solid}

/* ═══ CALLOUTS ═══ */
.callout{border-radius:8px;padding:.75rem 1rem;margin:.85rem 0;display:flex;gap:.6rem;align-items:flex-start;
  border-left:3px solid var(--blue);background:rgba(107,159,255,.06)}
.callout-icon{font-size:.95rem;flex-shrink:0;margin-top:.1rem}
.callout-body{flex:1}
.callout-body p{margin-bottom:0}
.tip{border-left-color:var(--teal);background:rgba(78,205,196,.06)}
.warn{border-left-color:var(--amber);background:rgba(251,191,36,.06)}
.info{border-left-color:var(--blue);background:rgba(107,159,255,.06)}

/* ═══ DETAILS ═══ */
details{margin:.75rem 0;border:1px solid var(--border);border-radius:8px;overflow:hidden}
summary{padding:10px 14px;background:var(--bg2);cursor:pointer;font:500 .84rem var(--sans);
  color:var(--fg);transition:background .15s;list-style:none}
summary::before{content:'▸ ';color:var(--fg4);transition:transform .2s}
details[open] summary::before{content:'▾ '}
details[open] summary{border-bottom:1px solid var(--border)}
details>div{padding:.85rem 1.1rem}

/* ═══ IMAGE FIGURE ═══ */
.fig{margin:1rem 0;text-align:center}
.fig img{max-width:100%;border-radius:8px;border:1px solid var(--border)}
.fig-caption{font:.72rem var(--sans);color:var(--fg4);margin-top:.4rem;text-align:center}

/* ═══ VIDEO CARD ═══ */
.vid{display:block;background:var(--bg2);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:all .2s ease;text-decoration:none}
.vid:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.vid img{width:100%;height:130px;object-fit:cover;border-bottom:1px solid var(--border)}
.vid-body{padding:.75rem .9rem}
.vid-body h4{margin:0 0 .25rem;text-transform:none;letter-spacing:0;color:var(--fg);font:600 .84rem var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vid-body p{margin:0;font-size:.76rem;color:var(--fg3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vid-body .tag{flex-shrink:0}

/* ═══ SEARCH MODAL ═══ */
.search-overlay{display:none;position:fixed;inset:0;z-index:500;background:var(--overlay-bg);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.search-overlay.open{display:flex;align-items:flex-start;justify-content:center;padding-top:15vh}
.search-box{width:560px;max-width:90vw;background:var(--bg2);border:1px solid var(--border);
  border-radius:12px;box-shadow:0 16px 64px rgba(0,0,0,.5);overflow:hidden}
.search-input-wrap{display:flex;align-items:center;gap:.6rem;padding:12px 16px;border-bottom:1px solid var(--border)}
.search-input-wrap svg{flex-shrink:0;color:var(--fg4)}
.search-input{flex:1;background:0;border:0;color:var(--fg);font:.9rem var(--sans);outline:none}
.search-input::placeholder{color:var(--fg4)}
.search-results{max-height:400px;overflow-y:auto;padding:8px}
.search-item{display:flex;align-items:center;gap:.75rem;padding:8px 12px;border-radius:8px;
  cursor:pointer;transition:background .1s}
.search-item:hover,.search-item.active{background:var(--code-bg)}
.search-item-type{font:.65rem var(--mono);color:var(--fg4);background:var(--bg3);
  padding:2px 6px;border-radius:4px;flex-shrink:0;min-width:36px;text-align:center}
.search-item-text{font:.82rem var(--sans);color:var(--fg3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-item-text mark{background:0;color:var(--accent);font-weight:500}
.search-empty{padding:2rem;text-align:center;color:var(--fg4);font:.82rem var(--sans)}
.search-hint{padding:8px 16px;border-top:1px solid var(--border);display:flex;gap:1rem;
  font:.68rem var(--sans);color:var(--fg4)}
.search-hint kbd{font:.65rem var(--mono);background:var(--bg3);padding:1px 5px;border-radius:3px;
  border:1px solid var(--border)}

/* ═══ FOOTER ═══ */
.ftr{border-top:1px solid var(--border);padding:2rem;color:var(--fg4);font:.75rem var(--sans);text-align:center;margin-top:3rem}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1200px){.toc-side{display:none}}
@media(max-width:1024px){:root{--side-w:240px}.main{padding:1.75rem 1.75rem 4rem}}
@media(max-width:768px){
  .side{display:none}.wrap{grid-template-columns:1fr}
  .main{padding:1.25rem 1rem 3rem}
  .g2,.g3{grid-template-columns:1fr}
  .tabs-inner{padding:8px 1rem}
  .hero-title{font-size:1.4rem}
  .search-btn kbd{display:none}
}