/* Final polish layer: improves hierarchy, readability and responsive behavior without changing the docs structure. */

:root{
  --sidebar:252px;
  --toc:204px;
  --content:810px;
}

/* Header: tighter brand grouping and less visual dead-space. */
.topbar-inner{max-width:1600px;padding-inline:16px;gap:14px}
.brand{gap:8px}
.brand img{width:96px;height:30px}
.brand span{font-size:.885rem;letter-spacing:-.005em}
.top-links{gap:2px}
.top-links a,.muted-link{font-size:.845rem;padding:6px 8px}

/* Sidebar: slightly stronger hierarchy, especially in dark mode. */
.docs-sidebar{padding-inline:13px}
.sidebar-head{font-size:.805rem;color:color-mix(in srgb,var(--ink) 66%,var(--muted));}
.nav-group-title{font-size:.735rem;color:color-mix(in srgb,var(--ink) 58%,var(--muted));font-weight:700}
.sidebar-nav a{font-size:.825rem;padding:6px 9px}
.sidebar-nav a.active{box-shadow:inset -2px 0 0 var(--primary)}
.sidebar-nav a:hover{color:var(--ink)}
html[data-theme='dark'] .nav-group-title{color:#93a4bf}
html[data-theme='dark'] .sidebar-head{color:#a8b4c8}

/* Main documentation column and on-page TOC. */
.docs-main{padding-top:30px}
.doc-grid{gap:44px}
.doc-article{font-size:.945rem}
.theme-doc-markdown>h1:first-child{font-size:clamp(1.66rem,1.85vw,1.9rem);line-height:1.5;margin-bottom:13px}
.theme-doc-markdown h2{font-size:clamp(1.17rem,1.28vw,1.32rem);margin-top:1.95rem;margin-bottom:.78rem}
.theme-doc-markdown h3{font-size:1rem;margin-top:1.55rem}
.theme-doc-markdown p,.theme-doc-markdown li{line-height:1.92}

.page-toc{font-size:.79rem;padding-right:15px;border-right-color:color-mix(in srgb,var(--line) 86%,var(--ink))}
.toc-title{font-size:.79rem;font-weight:700;color:var(--ink);margin-bottom:8px}
.toc-link{padding:4.5px 0;color:color-mix(in srgb,var(--muted) 82%,var(--ink));transition:color .14s ease,transform .14s ease}
.toc-link:hover,.toc-link.is-active{color:var(--primary)}
.toc-link.is-active{transform:translateX(-2px)}
html[data-theme='dark'] .toc-link{color:#9caac0}
html[data-theme='dark'] .toc-link:hover,html[data-theme='dark'] .toc-link.is-active{color:#87a1ff}

/* Code examples: copy control and container hierarchy. */
.theme-doc-markdown pre{font-size:.805rem;border-radius:11px;box-shadow:none}
.copy-code{top:7px;right:7px;min-width:42px;padding:5px 9px;border-radius:7px;font-family:var(--font-sans);font-size:.7rem;font-weight:500;opacity:.86;transition:opacity .14s ease,background-color .14s ease,border-color .14s ease}
.theme-doc-markdown pre:hover .copy-code,.copy-code:focus-visible{opacity:1}
html[data-theme='dark'] .copy-code{background:#14213a;border-color:#33445f;color:#d9e2f2}

/* Tables: stronger header/body separation and better horizontal fallback. */
.theme-doc-markdown table{font-size:.875rem;box-shadow:0 4px 18px rgba(15,23,42,.025)}
.theme-doc-markdown th{background:color-mix(in srgb,var(--surface) 78%,var(--primary) 4%);font-weight:700}
.theme-doc-markdown td{background:color-mix(in srgb,var(--bg) 98%,var(--surface))}
.theme-doc-markdown tbody tr:hover td{background:color-mix(in srgb,var(--surface) 85%,var(--bg))}
html[data-theme='dark'] .theme-doc-markdown th{background:#121f33}
html[data-theme='dark'] .theme-doc-markdown td{background:#0b1525}
html[data-theme='dark'] .theme-doc-markdown tbody tr:hover td{background:#101d30}

/* Home hero: slightly more compact, preserving the current visual language. */
.home-hero{max-width:1080px;margin-top:14px;margin-bottom:48px;padding:clamp(24px,2.7vw,36px);gap:30px}
.hero-copy h1{max-width:560px;font-size:clamp(1.78rem,2.18vw,2.25rem);line-height:1.5;margin-top:11px;margin-bottom:12px}
.hero-copy p{max-width:570px;font-size:.91rem;line-height:1.9}
.hero-actions{margin-top:17px}
.button{min-height:39px;font-size:.855rem}
.code-window pre{font-size:11.35px;line-height:1.62}
.code-window-top{height:36px}
.home-section{max-width:1080px;margin-bottom:47px}
.section-heading h2{font-size:1.4rem;margin-bottom:16px}
.feature-card{padding:15px}
.feature-card span{font-size:.75rem;transition:color .15s ease,transform .15s ease;display:inline-block}
.feature-card:hover span{color:var(--primary-2);transform:translateY(-1px)}
.feature-card h3{font-size:.91rem;margin-top:7px}
.feature-card p{font-size:.805rem;line-height:1.78}
.scope-banner{max-width:1080px}

/* Theme toggle stays compact, but clearly interactive. */
[data-theme-toggle]{border-color:color-mix(in srgb,var(--line) 78%,var(--primary) 18%)}
[data-theme-toggle]:hover{border-color:var(--primary);color:var(--primary)}

/* Responsive safeguards for docs tables/code and navigation. */
@media(max-width:1220px){
  .home-hero{max-width:860px}
  .doc-grid{gap:34px}
}

@media(max-width:900px){
  .docs-main{padding-inline:15px}
  .home-hero{margin-bottom:38px;padding:22px 18px;gap:22px}
  .hero-copy h1{font-size:1.7rem}
  .theme-doc-markdown table{display:block;overflow-x:auto;white-space:nowrap}
  .theme-doc-markdown pre{max-width:calc(100vw - 30px)}
}

@media(max-width:600px){
  .brand img{width:92px}
  .home-hero{border-radius:17px}
  .hero-copy h1{font-size:1.62rem;line-height:1.55}
  .hero-copy p{font-size:.89rem}
  .theme-doc-markdown>h1:first-child{font-size:1.52rem}
  .theme-doc-markdown h2{font-size:1.14rem}
  .theme-doc-markdown pre{font-size:.76rem;padding:14px 11px}
}