.docs-hero .docs-sub{color:var(--ink-soft);margin:10px 0 0;font-size:var(--fs-sm)}
.docs-hero .kicker{margin-bottom:14px}
.docs-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:34px;align-items:center}
.docs-hero-img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
@media (max-width:820px){.docs-hero-grid{grid-template-columns:1fr}.docs-hero-img{max-width:520px}}

.docs-content{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) 60px}
.docs-content *{box-sizing:border-box}

.docs-tabs{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  position:sticky;top:var(--header-h);z-index:calc(var(--z-header) - 1);
  background:var(--a-header-glass);backdrop-filter:blur(8px);
  padding:10px 0;border-bottom:1px solid var(--line);
}
.docs-content .tab-btn{
  background:transparent;border:1px solid var(--line);color:var(--ink-soft);
  border-radius:var(--radius-sm);padding:6px 14px;font-size:var(--fs-sm);
  font-family:var(--font-sans);cursor:pointer;
}
.docs-content .tab-btn:hover{color:var(--ink);border-color:var(--line-hover)}
.docs-content .tab-btn.active{color:var(--ink);border-color:var(--accent-2);background:var(--accent-2-soft)}

.docs-section{display:none}
.docs-section.active{display:block}

.docs-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;margin-top:28px;align-items:start}
.docs-subnav{
  position:sticky;top:calc(var(--header-h) + 20px);display:flex;flex-direction:column;gap:4px;
  padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  max-height:calc(100vh - var(--header-h) - 96px);overflow-y:auto;
}
.docs-content .subnav-btn{
  background:transparent;border:none;border-left:2px solid transparent;color:var(--ink-soft);
  text-align:left;padding:6px 10px;border-radius:0 var(--radius-xs) var(--radius-xs) 0;
  font-size:var(--fs-sm);font-family:var(--font-sans);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.docs-content .subnav-btn:hover{color:var(--ink);background:var(--accent-2-soft)}
.docs-content .subnav-btn.active{color:var(--ink);border-left-color:var(--accent-2);background:var(--accent-2-soft)}

.docs-body .card{display:none}
.docs-body .card.active{display:block}

.docs-content .card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px 28px;scroll-margin-top:calc(var(--header-h) + 90px);box-shadow:var(--shadow-sm);
}
.docs-content .card h2{font-size:var(--fs-h2);margin:0 0 16px;color:var(--ink)}
.docs-content .card h3{font-size:var(--fs-h3);margin:20px 0 10px;color:var(--ink)}
.docs-content .card p{margin:0 0 12px;color:var(--ink-soft)}
.docs-content .card ul,.docs-content .card ol{margin:0 0 12px 22px;color:var(--ink-soft);line-height:1.65}
.docs-content .card li{margin-bottom:6px}
.docs-content .card a{color:var(--accent-2)}
.docs-content .card code{
  font-family:var(--font-mono);font-size:.85em;color:var(--ink-soft);
  background:var(--surface-tint);padding:2px 6px;border-radius:var(--radius-xs);
}
.docs-content .card pre{
  background:var(--code-bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px;overflow-x:auto;margin:12px 0 16px;
}
.docs-content .card pre code{background:none;padding:0;border-radius:0;font-size:var(--fs-mono);color:var(--code-fg)}

.docs-content .diagram-img{
  display:block;width:min(100%,620px);height:auto;margin:12px auto 16px;
  border:1px solid var(--accent-2);border-radius:var(--radius-sm);
}
.docs-content .warn{color:var(--warn)}

.docs-content details{margin:14px 0 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-tint)}
.docs-content summary{
  cursor:pointer;padding:10px 14px;color:var(--ink);font-weight:var(--fw-semibold);
  font-size:var(--fs-sm);border-radius:var(--radius-sm);
}
.docs-content summary:hover{color:var(--ink);background:var(--accent-2-soft)}
.docs-content details[open] summary{border-bottom:1px solid var(--line);border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.docs-content .detail-body{padding:4px 16px 10px}

@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes detailIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.docs-body .card.active{animation:cardIn .28s var(--ease) both}
.docs-content details[open] .detail-body{animation:detailIn .22s var(--ease) both}
.docs-content .tab-btn,.docs-content .subnav-btn,.docs-content summary{transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
@media (prefers-reduced-motion:reduce){
  .docs-body .card.active,.docs-content details[open] .detail-body{animation:none}
  .docs-content .tab-btn,.docs-content .subnav-btn,.docs-content summary{transition:none}
}

.data-table{width:100%;border-collapse:collapse;margin:12px 0 6px;font-size:var(--fs-sm)}
.data-table th{text-align:left;color:var(--ink);font-weight:var(--fw-semibold);padding:6px 10px;border-bottom:1px solid var(--docs-axis);white-space:nowrap}
.data-table td{
  color:var(--ink-soft);padding:5px 10px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--fs-xs);
}
.data-table td:first-child{font-family:var(--font-sans)}
.data-table .num,.data-table th.num{text-align:right}
.data-table .good{color:var(--ok)}
.data-table .bad{color:var(--docs-bad)}

.table-clamp{max-width:100%;overflow-x:auto;container-type:inline-size}
.data-table.compact{table-layout:fixed;min-width:560px;font-size:clamp(.55rem,1.4cqw,var(--fs-xs))}
.data-table.compact th{font-size:inherit;padding:4px 3px;overflow-wrap:anywhere}
.data-table.compact td{font-size:inherit;padding:3px 3px}

.docs-content .src{color:var(--ink-mute);font-size:var(--fs-xs);margin:2px 0 16px}
.docs-content .src code{font-size:.95em;background:none;padding:0;color:var(--ink-mute)}

.chart{
  display:block;width:100%;height:auto;margin:14px 0 4px;
  background:var(--code-bg);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.chart text{font-family:var(--font-mono);font-size:11px;fill:var(--ink-soft)}
.chart .c-title{fill:var(--code-fg);font-size:12px;font-weight:600;font-family:var(--font-sans)}
.chart .c-lab{fill:var(--ink-soft)}
.chart .c-val{fill:var(--code-fg)}
.chart .c-dim{fill:var(--ink-mute);font-size:10px}
.chart .c-axis{stroke:var(--docs-axis);stroke-width:1}
.chart .c-grid{stroke:var(--docs-grid);stroke-width:1}
.chart .b-blue{fill:var(--docs-blue)}
.chart .b-teal{fill:var(--docs-teal)}
.chart .b-good{fill:var(--docs-good)}
.chart .b-bad{fill:var(--docs-bad)}
.chart .b-warn{fill:var(--docs-warn)}
.chart .b-gray{fill:var(--docs-gray)}
.chart .b-purp{fill:var(--docs-purp)}
.chart .l-line{stroke:var(--docs-teal);stroke-width:2;fill:none}
.chart .l-line2{stroke:var(--docs-blue);stroke-width:2;fill:none}
.chart .l-dot{fill:var(--docs-teal)}
.chart .l-dot2{fill:var(--docs-blue)}
.chart .l-ref{stroke:var(--docs-ref);stroke-width:1;stroke-dasharray:4 4}

@media (max-width:820px){
  .docs-layout{grid-template-columns:1fr;gap:14px}
  .docs-subnav{position:static;flex-direction:row;flex-wrap:wrap;max-height:none;padding:6px;gap:4px}
  .docs-content .subnav-btn{border-left:none;border:1px solid var(--line);border-radius:var(--radius-xs);white-space:normal}
  .docs-content .subnav-btn.active{border-color:var(--accent-2)}
}
@media (max-width:640px){
  .docs-content .card{padding:18px 14px 20px}
}

.archart{margin:10px 0 2px}
.archart-row{display:flex;align-items:center;gap:10px;margin:7px 0}
.archart-label{flex:0 0 170px;color:var(--ink-mute);font-size:.85em;text-align:right;white-space:nowrap}
.archart-track{flex:1;height:14px;background:var(--line-soft);border-radius:var(--radius-xs);overflow:hidden}
.archart-bar{display:block;height:100%;background:var(--docs-blue);border-radius:0 var(--radius-xs) var(--radius-xs) 0}
.arbar-37{width:74%}
.arbar-39{width:78%}
.arbar-40{width:80%}
.arbar-42{width:84%}
.archart-val{flex:0 0 42px;color:var(--ink);font-size:.85em;font-variant-numeric:tabular-nums}
.archart-note{color:var(--ink-mute);font-size:.8em;margin-top:2px}
@media (max-width:640px){
  .archart-label{flex-basis:118px;white-space:normal}
}