:root{
    --bg:#000; --fg:#fff; --muted:#a1a1aa; --card:#0a0a0a;
    --line:#1f1f22; --accent:#22d3ee; --accent2:#8b4bc6;
  }
  
  /* Base */
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);
    font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
  a{color:var(--fg);text-decoration:none} a:hover{opacity:.9}
  
  /* Top Nav (reuse site header style) */
  .nav{
    position:sticky;top:0;z-index:50;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:12px 20px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line)
  }
  .brand-left{display:flex;align-items:center;gap:10px}
  .logo-img{height:38px;width:auto}
  .tagline{color:var(--muted);font-size:12px}
  .site-title{justify-self:center;white-space:nowrap;font-weight:700;
    letter-spacing:.10em;font-size:clamp(18px,3vw,28px)}
  .links{justify-self:end;display:flex;gap:22px;white-space:nowrap}
  
  /* Docs layout */
  .docs-shell{display:grid;grid-template-columns:280px 1fr;min-height:calc(100vh - 64px)}
  .sidebar{
    border-right:1px solid var(--line);
    padding:20px; position:sticky; top:64px; align-self:start; height:calc(100vh - 64px);
    overflow:auto; background:rgba(0,0,0,.5)
  }
  .sidebar .group-title{margin:16px 0 8px;color:#cfcfd3;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
  .sidebar a{
    display:block; padding:8px 10px; border-radius:8px; color:#e5e5e5; margin-bottom:4px
  }
  .sidebar a.active{background:#0a0a0a; box-shadow:inset 0 0 0 1px rgba(34,211,238,.25)}
  .sidebar a:hover{background:#0a0a0a}
  
  .doc-content{
    padding:32px; min-width:0
  }
  .doc-content h1{font-size:clamp(24px,3.5vw,40px); margin:0 0 8px}
  .doc-content .lede{color:#d4d4d8; margin:0 0 24px; max-width:70ch}
  .doc-content h2{margin:28px 0 10px; font-size:22px}
  .doc-content h3{margin:22px 0 8px; font-size:18px;color:#e5e5e5}
  .doc-content p{margin:10px 0; color:#e7e7ea}
  .doc-content code{background:#0a0a0a;padding:2px 6px;border-radius:6px;border:1px solid var(--line)}
  .doc-content pre{background:#0a0a0a;padding:14px;border-radius:12px;border:1px solid var(--line);overflow:auto}
  .doc-content table{border-collapse:collapse;border:1px solid var(--line)}
  .doc-content th,.doc-content td{border:1px solid var(--line);padding:8px 10px}
  .doc-content .callout{border-left:3px solid var(--accent);padding:12px;margin:12px 0;background:#0a0a0a;border-radius:8px}
  .loading{color:#cfcfd3}
  
  /* In-page TOC (optional) */
  .toc{position:sticky;top:64px;max-height:calc(100vh - 64px);overflow:auto;
    margin-left:auto;padding-left:24px;border-left:1px dashed var(--line);color:#cfcfd3}
  .toc a{display:block;padding:6px 0;color:#cfcfd3}
  
  /* Footer */
  .footer{display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:20px;border-top:1px solid var(--line);color:#cfcfd3}
  
  /* Responsive */
  @media (max-width: 980px){
    .docs-shell{grid-template-columns:1fr}
    .sidebar{position:relative;height:auto;top:auto;border-right:0;border-bottom:1px solid var(--line)}
  }