.docs{max-width:1440px;margin:auto;display:grid;grid-template-columns:280px minmax(0,1fr);gap:36px;padding:0 36px}.docs-top{grid-column:1/-1;display:flex;gap:22px;align-items:center;height:80px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}.docs-side{position:sticky;top:110px;align-self:start;max-height:calc(100vh - 140px);overflow:auto;padding:0 12px 30px 0}.docs-side nav section{margin:26px 0}.docs-side h3{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--fg-3);margin-bottom:9px}.docs-side nav a{display:flex;gap:6px;align-items:center;padding:9px 11px;border-radius:7px;color:var(--fg-3);font-size:13px}.docs-side nav a.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--fg)}.docs-side small{font-size:9px;margin-left:auto;color:var(--accent)}.docs-main{max-width:860px;padding:18px 20px 70px}.doc-category{display:flex;gap:12px;align-items:center;color:var(--accent);font-size:13px}.docs-main h1{font-size:clamp(28px,3vw,40px);line-height:1.2;letter-spacing:-.035em;margin:16px 0}.doc-lead{font-size:18px;line-height:1.7;color:var(--fg-3);max-width:710px}.doc-demo{margin:30px 0;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--bg-elev-1)}.demo-head{display:flex;gap:16px;justify-content:space-between;font-size:12px;margin-bottom:22px}.demo-head span{color:var(--fg-3)}.demo-flow{display:flex;gap:10px}.demo-flow button{flex:1;border:1px solid var(--line);border-radius:8px;padding:15px 10px;color:var(--fg-3);background:transparent;text-align:left;cursor:pointer}.demo-flow button span{display:block;font-size:11px;margin-bottom:8px}.demo-flow button.selected{color:var(--fg);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}.doc-demo p{font-size:13px;color:var(--fg-3);margin-top:16px;min-height:38px;line-height:1.6}.demo-bars{display:flex;gap:4px}.demo-bars button{flex:1;border:0;height:65px;background:var(--ok);opacity:.7;cursor:pointer;border-radius:3px}.demo-bars .warn{background:var(--warn)}.demo-bars .bad{background:var(--danger)}.demo-bars button:hover,.demo-bars button:focus-visible{opacity:1;outline:2px solid var(--fg);outline-offset:3px}.doc-steps{list-style:none;padding:0;counter-reset:step}.doc-steps li{display:flex;align-items:flex-start;gap:18px;padding:17px 0;border-bottom:1px solid var(--line)}.doc-steps li>span{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-size:13px}.doc-steps p{margin:0;line-height:1.8}.doc-code{overflow:auto;padding:24px;border:1px solid var(--line);border-radius:12px;font-size:13px;line-height:1.7;background:var(--bg-elev-1)}.doc-notes{margin:30px 0}.doc-notes h2{font-size:18px;margin-bottom:18px}.doc-notes p{color:var(--fg-3);line-height:1.8;margin:14px 0}.doc-related{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0}.docs footer{line-height:1.8}.docs a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media(max-width:800px){.docs{display:block;padding:0 18px}.docs-top{gap:14px;font-size:12px}.docs-side{position:static;max-height:270px;margin-top:24px}.docs-side nav{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}.docs-side nav section{margin:12px 0}.docs-main{padding:28px 0}.demo-flow{flex-wrap:wrap}.demo-flow button{min-width:100px}.demo-head{flex-wrap:wrap}.demo-bars{gap:2px}}