body.docs{ font-size:16.5px; }
.strip .brand{ text-decoration:none; }
.strip .nav a.on{ color:var(--ink); border-bottom-color:var(--accent); }

.docs-wrap{ display:grid; grid-template-columns:230px minmax(0,1fr) 210px; gap:56px; padding-top:34px; padding-bottom:40px; align-items:start; }
.docs-nav, .docs-toc{ position:sticky; top:24px; }
.docs-list{ display:flex; flex-direction:column; border-top:1px solid var(--line-2); }
.docs-list a{ display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:14.5px; color:var(--ink-2); transition:color .2s; }
.docs-list a .n{ font-family:var(--mono); font-size:11px; color:var(--ink-3); width:20px; flex:none; }
.docs-list a:hover{ color:var(--ink); }
.docs-list a.on{ color:var(--ink); }
.docs-list a.on .n{ color:var(--accent); }
.lbl.mt{ margin-top:34px; }
.skin-dots{ display:flex; flex-wrap:wrap; gap:8px; }
.skin-dots button{ width:22px; height:22px; border-radius:6px; border:1.5px solid transparent; background:var(--c); cursor:pointer; padding:0; opacity:.7; transition:opacity .2s, transform .3s var(--ease); }
.skin-dots button:hover{ opacity:1; transform:scale(1.08); }
.skin-dots button.on{ opacity:1; border-color:var(--ink); }

.docs-toc nav{ display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--line-2); }
.docs-toc a{ font-size:13px; color:var(--ink-3); padding:4px 0 4px 14px; margin-left:-1px; border-left:1px solid transparent; transition:color .2s, border-color .2s; line-height:1.35; }
.docs-toc a:hover{ color:var(--ink); }
.docs-toc a.on{ color:var(--ink); border-left-color:var(--accent); }

.docs-main{ min-width:0; max-width:760px; }
.kicker{ margin:0 0 10px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.prose .d-title{ margin:0 0 26px; font-family:var(--cond); font-weight:400; text-transform:uppercase; font-size:clamp(48px,6vw,96px); line-height:.9; letter-spacing:-.005em; color:var(--ink); }
.prose h2{ margin:52px 0 14px; font-family:var(--sans); font-weight:600; font-size:28px; line-height:1.15; letter-spacing:-.015em; padding-top:18px; border-top:1px solid var(--line); }
.prose h3{ margin:34px 0 10px; font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.prose h2 a, .prose h3 a{ color:inherit; }
.prose h2 a:hover::after, .prose h3 a:hover::after{ content:" #"; color:var(--accent); }
.prose p{ margin:0 0 16px; line-height:1.6; color:var(--ink); }
.prose p:first-of-type{ color:var(--ink-2); font-size:18px; }
.prose a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--ink-3); transition:text-decoration-color .2s; }
.prose a:hover{ text-decoration-color:var(--accent); }
.prose strong{ font-weight:600; }
.prose em{ font-style:italic; color:var(--ink-2); }
.prose ul, .prose ol{ margin:0 0 18px; padding-left:22px; }
.prose li{ margin:0 0 7px; line-height:1.55; }
.prose li::marker{ color:var(--accent); font-family:var(--mono); font-size:13px; }
.prose code{ font-family:var(--mono); font-size:.86em; background:var(--bg-3); border:1px solid var(--line-2); padding:1px 6px; border-radius:4px; color:var(--ink); white-space:nowrap; }
.prose td code, .prose th code{ white-space:normal; }
.prose .dash{ display:inline-block; width:14px; height:1px; background:var(--ink-3); vertical-align:middle; margin:0 2px; }
.keys{ display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.keys kbd{ font-size:11.5px; padding:2px 7px; background:var(--bg-3); border-color:var(--line); color:var(--ink); }
.keys i{ font-style:normal; font-family:var(--mono); font-size:11px; color:var(--ink-3); }

.code{ margin:0 0 22px; border:1px solid var(--line); border-radius:10px; background:var(--bg-2); overflow:hidden; }
.code-h{ display:flex; justify-content:space-between; align-items:center; padding:7px 12px 7px 14px; border-bottom:1px solid var(--line-2); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.code-h .copy{ background:transparent; border:1px solid var(--line-2); color:var(--ink-2); font:inherit; letter-spacing:inherit; text-transform:inherit; padding:3px 9px; border-radius:5px; cursor:pointer; transition:border-color .2s, color .2s; }
.code-h .copy:hover{ border-color:var(--accent); color:var(--ink); }
.code-h .copy.done{ color:var(--accent); border-color:var(--accent); }
.code pre{ margin:0; padding:14px 16px; overflow:auto; font-family:var(--mono); font-size:13.5px; line-height:1.6; color:var(--ink); }
.code pre code{ background:none; border:0; padding:0; white-space:pre; font-size:inherit; }

.tbl{ margin:0 0 22px; border:1px solid var(--line); border-radius:10px; overflow:auto; }
.prose table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.prose th{ text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:500; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--bg-2); white-space:nowrap; }
.prose td{ padding:10px 14px; border-bottom:1px solid var(--line-2); vertical-align:top; line-height:1.5; color:var(--ink-2); }
.prose td:first-child{ color:var(--ink); }
.prose tr:last-child td{ border-bottom:0; }
.prose tbody tr:hover td{ background:color-mix(in srgb, var(--accent) 5%, transparent); }

.pn{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:64px; padding-top:22px; border-top:1px solid var(--line); }
.pn a{ display:flex; flex-direction:column; gap:4px; font-size:18px; font-weight:500; padding:14px 16px; border:1px solid var(--line-2); border-radius:10px; transition:border-color .2s; }
.pn a span{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.pn a.next{ text-align:right; align-items:flex-end; }
.pn a:hover{ border-color:var(--accent); }
body.docs .foot{ margin-top:40px; }

@media (max-width:1180px){
  .docs-wrap{ grid-template-columns:210px minmax(0,1fr); gap:40px; }
  .docs-toc{ display:none; }
}
@media (max-width:760px){
  .docs-wrap{ grid-template-columns:1fr; gap:26px; padding-top:22px; }
  .docs-nav{ position:static; }
  .docs-list{ display:grid; grid-template-columns:1fr 1fr; border-top:0; gap:0 16px; }
  .docs-list a{ font-size:13.5px; }
  .prose h2{ font-size:24px; margin-top:40px; }
  .pn{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  body.docs .strip{ grid-template-columns:1fr auto; }
  body.docs .strip .nav{ margin:0; padding:0; overflow:visible; }
}