/* Minimalist docs portal */
:root{
  --docs-bg:#030304;
  --docs-panel:rgba(255,255,255,.03);
  --docs-panel-2:rgba(255,255,255,.04);
  --docs-border:rgba(255,255,255,.08);
  --docs-text:rgba(255,255,255,.72);
  --docs-text-2:rgba(255,255,255,.55);
  --docs-white:#fff;
  --docs-accent:#a5b4fc;
  --docs-header-offset:64px;
  --docs-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
html,
body{height:100%;}
*,
*::before,
*::after{box-sizing:border-box;}
body.docs-page{
  background:var(--docs-bg);
  color:#e1e1e6;
  overflow:hidden;
  overflow-x:hidden;
  max-width:100%;
}

.docs-layout{
  display:grid;
  grid-template-columns:300px minmax(0, 1fr) 260px;
  max-width:1480px;
  margin:0 auto;
  margin-top:var(--docs-header-offset);
  height:calc(100vh - var(--docs-header-offset));
  padding-top:0;
}

.docs-sidebar{
  padding:22px 18px;
  position:sticky;
  top:var(--docs-header-offset);
  height:calc(100vh - var(--docs-header-offset));
  overflow:auto;
  border-right:1px solid rgba(255,255,255,.06);
}

/* Nicer (minimal) scrollbars */
body.docs-page .docs-sidebar,
body.docs-page pre{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
body.docs-page .docs-sidebar::-webkit-scrollbar,
body.docs-page pre::-webkit-scrollbar{width:10px; height:10px;}
body.docs-page .docs-sidebar::-webkit-scrollbar-track,
body.docs-page pre::-webkit-scrollbar-track{background:transparent;}
body.docs-page .docs-sidebar::-webkit-scrollbar-thumb,
body.docs-page pre::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
body.docs-page .docs-sidebar::-webkit-scrollbar-thumb:hover,
body.docs-page pre::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.20); border:3px solid transparent; background-clip:padding-box;}

.docs-search{
  display:flex; gap:10px; align-items:center;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background:var(--docs-panel-2);
  margin-bottom: 14px;
}
.docs-search i{color:var(--docs-text-2)}
.docs-search input{flex:1; outline:none; border:none; background:transparent; color:rgba(255,255,255,.86); font-size:.95rem}
.docs-search input::placeholder{color:rgba(255,255,255,.45)}

.nav-group{margin: 12px 0 18px;}
.nav-group-btn{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background:transparent;
  border:none;
  color:rgba(255,255,255,.62);
  padding: 6px 8px;
  border-radius: 12px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-weight: 900;
}
.nav-group-btn:hover{background:rgba(255,255,255,.03); color:rgba(255,255,255,.78)}
.nav-group.collapsed .nav-items{display:none;}
.nav-group .chev{transition: transform .15s ease; color:rgba(255,255,255,.45)}
.nav-group.collapsed .chev{transform: rotate(-90deg)}

.nav-items{padding: 4px 8px 0;}
.nav-link{
  display:block;
  padding: 7px 8px;
  border-radius: 12px;
  text-decoration:none;
  color: rgba(255,255,255,.70);
  font-size: .95rem;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}
.nav-link:hover{background:rgba(255,255,255,.03); color:#fff}
.nav-link.active{background:rgba(165,180,252,.10); border:1px solid rgba(165,180,252,.20); color: var(--docs-accent); font-weight:700}

.sidebar-mini{
  margin-top: 18px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--docs-border);
  background: var(--docs-panel);
  color: var(--docs-text);
  font-size: .92rem;
  line-height: 1.35;
}
.sidebar-mini code{font-family:var(--docs-mono); font-size:.86rem}
.sidebar-mini-title{
  font-weight:800;
  color:#fff;
  margin-bottom:8px;
}
.sidebar-link-list{
  display:grid;
  gap:6px;
}
.sidebar-kv{
  display:grid;
  gap:8px;
  margin-bottom:12px;
}
.sidebar-kv span{color:rgba(255,255,255,.55);}

.docs-content{
  padding: 38px 56px 110px;
  min-width:0;
  height:calc(100vh - var(--docs-header-offset));
  overflow:auto;
}

/* Same minimalist scrollbar for main content */
body.docs-page .docs-content{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
body.docs-page .docs-content::-webkit-scrollbar{width:10px; height:10px;}
body.docs-page .docs-content::-webkit-scrollbar-track{background:transparent;}
body.docs-page .docs-content::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.docs-content::-webkit-scrollbar-thumb:hover{background: rgba(255,255,255,.20); border: 3px solid transparent; background-clip: padding-box;}
.prose{max-width: 980px;}
.prose h1{font-size: 2.35rem; font-weight: 950; margin: 0 0 10px; color:var(--docs-white); letter-spacing:-.04em}
.prose .subtitle{color: rgba(255,255,255,.62); font-size: 1.06rem; line-height: 1.65; margin-bottom: 18px; max-width: 90ch}
.prose h2{font-size: 1.55rem; font-weight: 900; margin: 36px 0 12px; color:var(--docs-white); scroll-margin-top:110px; letter-spacing:-.02em}
.prose h3{font-size: 1.18rem; font-weight: 800; margin: 20px 0 10px; color:var(--docs-white); scroll-margin-top:110px}
.prose p{line-height: 1.75; color: var(--docs-text); margin: 0 0 14px; font-size: 1.02rem}
.prose p,.prose li,.prose td{overflow-wrap: anywhere; word-break: break-word;}
.prose ul, .prose ol{margin: 0 0 18px; padding-left: 20px; color: var(--docs-text)}
.prose li{margin-bottom: 8px;}
.prose a{color: var(--docs-accent);}
.prose hr{border-color: rgba(255,255,255,.12); margin: 28px 0;}

pre{background:#15151a; border:1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 16px 16px; overflow:auto; margin: 16px 0 22px; font-family:var(--docs-mono); font-size:.90rem; color:#e6e6ee; position:relative}
code{font-family:var(--docs-mono); color: var(--docs-accent); background: rgba(165,180,252,.10); padding: 2px 6px; border-radius: 6px; font-size: .92em; overflow-wrap: anywhere; word-break: break-word}
pre code{background:none; padding:0; color:inherit}

.copy-btn{
  position:absolute; top: 10px; right: 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.75);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: .85rem;
  cursor:pointer;
}
.copy-btn:hover{background: rgba(255,255,255,.07); color:#fff}

.docs-toc{
  padding: 22px 18px;
  position:sticky;
  top:var(--docs-header-offset);
  height:max-content;
  border-left:1px solid rgba(255,255,255,.06);
}
.toc-title{font-size:.85rem; font-weight: 900; color:#fff; margin-bottom: 10px; letter-spacing:.02em}
.toc-link{display:block; text-decoration:none; color: rgba(255,255,255,.55); padding: 6px 8px; border-radius: 12px; font-size: .92rem}
.toc-link:hover{background: rgba(255,255,255,.03); color:#fff}
.toc-link.l3{padding-left: 18px; font-size: .90rem; color: rgba(255,255,255,.48)}

.doc-skeleton{border:1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.03); padding: 16px;}
.shimmer{height: 14px; border-radius: 999px; background: rgba(255,255,255,.06); margin: 10px 0;}
.shimmer.w60{width:60%} .shimmer.w85{width:85%} .shimmer.w40{width:40%}

@media (max-width: 1100px){
  .docs-layout{grid-template-columns: clamp(248px, 32vw, 300px) minmax(0,1fr);}
  .docs-toc{display:none;}
}
@media (max-width: 980px){
  body.docs-page{overflow-y:auto; overflow-x:hidden;}
  .docs-layout{
    grid-template-columns: 1fr;
    width:100%;
    height:auto;
    min-height:100vh;
    margin-top:0;
    padding-top:calc(var(--docs-header-offset) + 18px);
  }
  .docs-sidebar{
    position:relative;
    top:0;
    width:calc(100% - 32px);
    margin:0 auto 16px;
    height:auto;
    max-height:none;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    border-right:none;
    background:rgba(255,255,255,.025);
  }
  .docs-content{
    width:100%;
    padding: 22px 20px 90px;
    height:auto;
    overflow:visible;
  }
}

/* Callouts */
.callout{display:flex; gap:12px; padding: 14px 16px; border-radius: 16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); margin: 14px 0 18px;}
.callout-ico{width:24px;height:24px; display:flex; align-items:center; justify-content:center; border-radius: 8px; background: rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.22); color:#fff; font-weight: 900; flex: 0 0 auto}
.callout-title{color:#fff; font-weight: 900; margin-bottom: 4px}
.callout-body{color: rgba(255,255,255,.70); line-height: 1.55}

.noscript{padding: 14px 16px; border-radius: 16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); color: rgba(255,255,255,.70)}

/* Make tables readable in markdown */
.table-wrap{overflow:auto; border:1px solid rgba(255,255,255,.10); border-radius: 16px; margin: 12px 0 18px;}
.table-wrap table{width:100%; border-collapse: collapse; margin:0; border:none;}
.prose th,.prose td{padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top}
.prose th{background: rgba(255,255,255,.04); color:#fff; font-weight: 800; text-align:left}
.prose td{color: rgba(255,255,255,.70)}
.prose tr:last-child td{border-bottom:none}

@media (max-width: 640px){
  html,
  body.docs-page{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .docs-layout{
    display:block;
    width:100%;
    min-height:100vh;
    height:auto;
    margin-top:0;
    padding-top:calc(var(--docs-header-offset) + 18px);
    overflow:visible;
  }

  .docs-sidebar{
    width:calc(100% - 24px);
    margin:0 auto 14px;
    padding:14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    background:rgba(255,255,255,.025);
    max-height:none;
  }

  .docs-search{
    padding:10px;
  }

  .docs-search input{
    min-width:0;
    font-size:16px;
  }

  .nav-group{
    margin:10px 0 14px;
  }

  .nav-group-btn{
    padding:8px 6px;
    font-size:.72rem;
    line-height:1.35;
    text-align:left;
  }

  .nav-items{
    padding:4px 0 0;
  }

  .nav-link{
    padding:9px 8px;
    font-size:.92rem;
  }

  .sidebar-mini{
    padding:12px;
    font-size:.88rem;
  }

  .sidebar-mini code{
    display:inline-block;
    max-width:100%;
    white-space:normal;
    word-break:break-word;
  }

  .docs-content{
    width:100%;
    padding:22px 16px 76px;
    min-width:0;
  }

  .prose{
    width:100%;
    max-width:100%;
  }

  .prose h1{
    font-size:clamp(2rem, 11vw, 2.6rem);
    line-height:1.05;
    overflow-wrap:anywhere;
  }

  .prose .subtitle,
  .prose p{
    font-size:.98rem;
    line-height:1.65;
  }

  .prose h2{
    font-size:1.32rem;
    line-height:1.2;
    margin-top:30px;
  }

  .prose h3{
    font-size:1.08rem;
  }

  .callout{
    gap:10px;
    padding:13px;
    border-radius:14px;
  }

  pre{
    max-width:100%;
    border-radius:14px;
    padding:42px 12px 14px;
    font-size:.82rem;
  }

  pre code{
    white-space:pre;
  }

  code{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .table-wrap{
    width:100%;
    max-width:100%;
    border-radius:14px;
  }
}