@layer components {
.page-docs { --brand-dark:var(--brand-ink);--tint:var(--brand-tint);--panel:#f5f6f8;--blue:#2968ae; }
.page-docs .docs-shell { max-width:1248px;margin:112px auto 0;padding:0 4px;display:grid;grid-template-columns:220px minmax(0,1fr) 156px;gap:44px;align-items:start }
.page-docs .sidebar { position:sticky;top:120px;max-height:calc(100dvh - 135px);overflow:auto;padding-right:12px;scrollbar-width:thin }
.page-docs .docs-brand { display:flex;align-items:baseline;gap:10px;font-size:20px;color:var(--ink);font-weight:650 }
.page-docs .docs-brand span { font-size:12px;color:var(--muted);font-weight:400 }
.page-docs .search-open { width:100%;display:flex;align-items:center;gap:9px;margin:20px 0 26px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:white;color:var(--muted);font-size:13px;text-align:left }
.page-docs kbd { font:11px/1.4 var(--mono);border:1px solid var(--line);padding:2px 5px;border-radius:4px;background:#fff;color:var(--muted) }
.page-docs .search-open kbd { margin-left:auto }
.page-docs .nav-group { margin-top:25px }
.page-docs .nav-group:first-child { margin-top:0 }
.page-docs .nav-group h2 { font-size:13px;line-height:1.4;color:var(--ink);font-weight:680;margin:0 0 10px;padding-left:10px }
.page-docs .nav-group h2 span { margin-left:7px;font-size:10px;color:var(--muted);font-weight:400 }
.page-docs .nav-group a { display:flex;align-items:center;padding:5px 10px;font-size:13px;line-height:1.7;color:#657068;border-radius:7px;margin:2px 0;gap:6px }
.page-docs .nav-group a.active { color:var(--brand-dark);background:var(--tint);font-weight:620 }
.page-docs .nav-group a:hover { background:var(--panel);color:var(--ink) }
.page-docs .nav-group a em { margin-left:auto;font-size:10px;font-style:normal;color:var(--brand-dark) }
.page-docs .nav-divider { height:1px;background:var(--line);margin:28px 10px 20px }
.page-docs .sidebar-help { border-top:1px solid var(--line);display:block;margin:25px 10px 0;padding-top:18px;font-size:11px;color:var(--muted) }
.page-docs .sidebar-help span { display:block;font-size:12px;margin-top:4px;color:var(--brand-dark) }
.page-docs .reading-area { min-width:0;padding-top:2px }
.page-docs .breadcrumb { display:flex;gap:9px;font-size:12px;color:var(--muted);align-items:center;margin:0 0 26px }
.page-docs .breadcrumb b { color:var(--brand-dark);font-weight:500 }
.page-docs .doc-head h1 { margin:0 0 14px;font-size:40px;font-weight:650;letter-spacing:-.055em;line-height:1.22;color:var(--ink) }
.page-docs .doc-head .lead { font-size:17px;line-height:1.85;color:#647169;margin:0;max-width:660px }
.page-docs .doc-head .meta { display:flex;gap:16px;align-items:center;margin-top:18px;font-size:11px;color:var(--muted) }
.page-docs .doc-head .meta span:first-child { color:var(--brand-dark) }
.page-docs .doc-head { margin-bottom:30px }
.page-docs .reading-area h2 { font-size:24px;color:var(--ink);line-height:1.4;letter-spacing:-.035em;font-weight:650;margin:44px 0 16px;scroll-margin-top:112px }
.page-docs .reading-area h3 { font-size:18px;color:var(--ink);margin:27px 0 10px;font-weight:630;scroll-margin-top:112px }
.page-docs .reading-area p { margin:12px 0 }
.page-docs .reading-area ul,.page-docs .reading-area ol { padding-left:23px;margin:14px 0 }
.page-docs .reading-area li { margin:8px 0 }
.page-docs .reading-area strong { color:var(--ink);font-weight:620 }
.page-docs .body-link { color:var(--brand-dark);text-decoration:underline;text-underline-offset:4px }
.page-docs .start-strip { padding:22px 24px;border:1px solid #ccdfd3;border-radius:12px;background:linear-gradient(115deg,#f4faf6,#fff);display:flex;gap:20px;align-items:center;justify-content:space-between;margin:30px 0 }
.page-docs .start-strip strong { font-size:17px;display:block }
.page-docs .start-strip p { margin:3px 0 0;font-size:13px;color:var(--muted) }
.page-docs .btn { display:inline-flex;gap:12px;align-items:center;justify-content:center;background:var(--ink);border:1px solid var(--ink);color:white;padding:10px 17px;border-radius:8px;font-size:13px;font-weight:570;white-space:nowrap }
.page-docs .btn:hover { background:#1a2c23;color:white }
.page-docs .btn.secondary { background:#fff;color:var(--ink);border-color:var(--line) }
.page-docs .guide-choices { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0 }
.page-docs .guide-card { border:1px solid var(--line);border-radius:12px;padding:24px 22px;transition:border-color .18s }
.page-docs .guide-card:hover { border-color:#89b69c }
.page-docs .guide-icon { width:40px;height:40px;border-radius:10px;background:var(--panel);display:grid;place-items:center;margin-bottom:25px;color:var(--ink);font:18px var(--mono) }
.page-docs .guide-icon.green { background:var(--tint);color:var(--brand-dark) }
.page-docs .guide-card h2 { font-size:22px;margin:0 0 8px;letter-spacing:-.025em }
.page-docs .guide-card p { font-size:13px;line-height:1.85;color:var(--muted);margin:0 0 18px }
.page-docs .guide-card .chips { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px }
.page-docs .chip { font-size:10px;border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:#647169;background:white }
.page-docs .card-arrow { font-size:12px;font-weight:560;display:flex;justify-content:space-between;color:var(--brand-dark) }
.page-docs .feature-links { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px }
.page-docs .feature-link { display:flex;gap:14px;border-top:1px solid var(--line);padding:20px 0 }
.page-docs .feature-link .little-icon { width:32px;height:32px;border:1px solid var(--line);border-radius:7px;display:grid;place-items:center;flex:none;font:15px var(--mono);margin-top:3px }
.page-docs .feature-link strong { display:block;font-size:14px }
.page-docs .feature-link p { font-size:12px;margin:5px 0 9px;color:var(--muted);line-height:1.8 }
.page-docs .feature-link .text-arrow { font-size:11px;color:var(--brand-dark) }
.page-docs .read-path { display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;background:var(--panel);padding:15px 18px;border-radius:9px }
.page-docs .read-path span { color:#a1aba5 }
.page-docs .page-toc { position:sticky;top:121px;padding-top:3px;font-size:11px;color:var(--muted) }
.page-docs .page-toc p { margin:0 0 17px;font-weight:620;color:var(--ink) }
.page-docs .page-toc nav { border-left:1px solid var(--line);display:grid;gap:14px;padding-left:15px }
.page-docs .page-toc nav a:first-child { color:var(--brand-dark) }
.page-docs .toc-note { font-size:10px;line-height:1.9;margin-top:32px;padding-top:18px;border-top:1px solid var(--line);color:#94a098 }
.page-docs .doc-footer { display:flex;justify-content:space-between;gap:15px;font-size:10px;border-top:1px solid var(--line);margin:50px 0 32px;padding-top:20px;color:var(--muted) }
.page-docs .doc-footer a { color:var(--brand-dark) }
.page-docs .callout { border:1px solid var(--line);border-left:3px solid var(--brand);padding:16px 20px;background:#f8faf9;border-radius:0 8px 8px 0;margin:24px 0;font-size:14px }
.page-docs .callout p { margin:5px 0 }
.page-docs .callout.info { border-left-color:var(--blue);background:#f5f8fc }
.page-docs .callout.note { border-left-color:#9b7a47;background:var(--panel) }
.page-docs .callout strong { display:block }
.page-docs .step { position:relative;padding:0 0 23px 44px;border-left:1px solid var(--line);margin-left:13px }
.page-docs .step:last-child { border-left-color:transparent;padding-bottom:0 }
.page-docs .step .step-no { position:absolute;left:-14px;top:0;width:28px;height:28px;border-radius:50%;background:white;border:1px solid #9fbaa9;display:grid;place-items:center;font:12px var(--mono);color:var(--brand-dark) }
.page-docs .step h3 { margin:0 0 8px }
.page-docs .step p { font-size:14px;margin:7px 0 }
.page-docs .step .check { color:var(--brand-dark);font-size:12px;display:flex;gap:7px;align-items:start }
.page-docs .sample-prompt { border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:16px 18px;font-size:14px;line-height:1.9;margin:18px 0 }
.page-docs .sample-prompt small { display:block;color:var(--muted);font-size:10px;margin-bottom:8px }
.page-docs .workflow { display:flex;gap:7px;align-items:center;margin:24px 0;overflow:auto;padding-bottom:3px }
.page-docs .workflow .node { border:1px solid var(--line);border-radius:9px;padding:12px 13px;flex:1;min-width:84px;font-size:12px;line-height:1.55;text-align:center;color:var(--ink);background:white }
.page-docs .workflow .node b { display:block;font-size:10px;font-weight:400;color:var(--muted);margin-bottom:3px }
.page-docs .workflow .node.current { background:var(--tint);border-color:#b7d9c5;color:var(--brand-dark) }
.page-docs .workflow .flow-arrow { color:#b4beb8 }
.page-docs .table-scroll { overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:10px }
.page-docs table { width:100%;border-collapse:collapse;font-size:12px;line-height:1.8;text-align:left }
.page-docs th { background:var(--panel);font-weight:570;color:var(--ink);white-space:nowrap }
.page-docs td,.page-docs th { padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top }
.page-docs tr:last-child td { border-bottom:0 }
.page-docs td:first-child { color:var(--ink) }
.page-docs code { font:.86em var(--mono);background:#f0f3f2;padding:2px 5px;border-radius:4px;overflow-wrap:anywhere }
.page-docs .codeblock { margin:20px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fafbfc }
.page-docs .code-title { display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:8px 14px;background:#f2f4f6;font-size:10px;color:var(--muted) }
.page-docs .copy-code { border:0;background:transparent;font-size:10px;color:var(--muted);padding:3px 5px }
.page-docs pre { margin:0;padding:18px;overflow:auto;font:12px/1.9 var(--mono);color:#31443b;white-space:pre;tab-size:2 }
.page-docs pre code { background:none;padding:0;font:inherit }
.page-docs .example-screen { background:#15181d;color:#e8ebef;border-radius:12px;overflow:hidden;margin:22px 0;font-size:12px;border:1px solid #262e35 }
.page-docs .screen-bar { background:#20252d;padding:10px 14px;display:flex;justify-content:space-between;font-size:10px;color:#a7b0b9 }
.page-docs .screen-inner { padding:22px }
.page-docs .screen-title { display:flex;align-items:center;gap:10px;color:white;font-size:15px;font-weight:550 }
.page-docs .status-pill { font-size:10px;color:#83d7ad;background:#234332;padding:2px 7px;border-radius:5px;font-weight:400 }
.page-docs .screen-inner p { color:#96a4ad;font-size:11px;margin:6px 0 15px }
.page-docs .screen-tabs { border-bottom:1px solid #394149;display:flex;gap:25px;padding-bottom:10px;color:#93a0aa;font-size:11px }
.page-docs .screen-tabs b { color:#e8ebef;font-weight:500 }
.page-docs .screen-row { display:flex;gap:13px;align-items:center;padding:14px 0;border-bottom:1px solid #2b3239;font-size:12px;color:#c7d0d8 }
.page-docs .screen-row:last-child { border-bottom:0 }
.page-docs .screen-row .ok { color:#7dd8a8 }
.page-docs .screen-row .busy { color:#8ec5ff }
.page-docs .screen-row .time { margin-left:auto;font-size:10px;color:#93a0aa }
.page-docs .caption { color:var(--muted);font-size:10px;margin-top:-12px!important }
.page-docs details.faq { border-bottom:1px solid var(--line);padding:15px 0;font-size:14px }
.page-docs details.faq summary { cursor:pointer;font-weight:550;color:var(--ink) }
.page-docs details.faq p { font-size:13px;color:var(--muted) }
.page-docs .pager { display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:45px }
.page-docs .pager a { border:1px solid var(--line);padding:15px 18px;border-radius:9px;font-size:13px }
.page-docs .pager a:last-child { text-align:right }
.page-docs .pager small { display:block;font-size:10px;color:var(--muted);margin-bottom:3px }
.page-docs .command-tabs { display:flex;gap:6px;flex-wrap:wrap;margin:24px 0 }
.page-docs .command-tabs a { font-size:11px;padding:6px 11px;border:1px solid var(--line);border-radius:7px }
.page-docs .command-tabs a.active { background:var(--ink);border-color:var(--ink);color:white }
.page-docs .command-list { margin-top:22px;border-top:1px solid var(--line) }
.page-docs .command-list a { display:grid;grid-template-columns:minmax(150px,.75fr) 1fr auto;gap:16px;align-items:center;padding:14px 2px;border-bottom:1px solid var(--line) }
.page-docs .command-list code { background:none;font-size:12px;padding:0;color:var(--brand-dark) }
.page-docs .command-list p { margin:0;font-size:12px;color:var(--muted) }
.page-docs .command-list span { color:#9caaa1;font-size:12px }
.page-docs .command-count { font-size:11px;color:var(--muted) }
.page-docs .options-table code { white-space:nowrap;font-size:11px }
.page-docs .command-header { font-family:var(--mono);font-size:30px!important;letter-spacing:-.04em!important }
.page-docs .mobile-docs { display:none }
.page-docs .docs-search-dialog { width:min(620px,calc(100% - 32px));margin:100px auto auto;padding:20px;border:1px solid var(--line);border-radius:14px;color:var(--text);box-shadow:0 24px 100px #0e1b1540;max-height:75dvh }
.page-docs .docs-search-dialog::backdrop { background:#14261d3b;backdrop-filter:blur(3px) }
.page-docs .search-heading { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px }
.page-docs .search-heading h2 { font-size:16px;margin:0;font-weight:600 }
.page-docs .search-heading button { background:transparent;border:0;font-size:11px;color:var(--muted) }
.page-docs .docs-search-dialog input { width:100%;padding:12px;border:1px solid var(--line);border-radius:7px;font-size:14px;color:var(--ink) }
.page-docs .docs-search-results { display:grid;gap:3px;margin-top:16px;max-height:50dvh;overflow:auto }
.page-docs .docs-search-results a { padding:12px;border-radius:7px;display:block }
.page-docs .docs-search-results a:hover { background:var(--panel) }
.page-docs .docs-search-results strong { display:block;font-size:13px;color:var(--ink);font-weight:580 }
.page-docs .docs-search-results span { display:block;font-size:11px;color:var(--muted);margin-top:2px }
.page-docs .empty-search { font-size:13px;padding:15px;color:var(--muted) }
.page-docs .docs-copy-status { position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;border-radius:9px;font-size:12px;padding:10px 18px;opacity:0;pointer-events:none;z-index:100 }
.page-docs .docs-copy-status.visible { opacity:1 }
.page-docs [hidden] { display:none!important }
@container page (max-width:1300px) {.page-docs .docs-shell { margin-inline:32px;gap:32px;grid-template-columns:200px minmax(0,1fr) 140px }
}
@container page (max-width:1060px) {.page-docs .docs-shell { grid-template-columns:200px minmax(0,1fr);gap:35px }
.page-docs .page-toc { display:none }
.page-docs .topbar-inner { gap:30px }
.page-docs .preview-label { display:none }
.page-docs .top-links { margin-left:auto }
}
@container page (max-width:760px) {.page-docs .topbar { padding:10px 16px 0;top:8px }
.page-docs .topbar-inner { height:58px;padding:0 16px;border-radius:14px;gap:18px }
.page-docs .top-links { display:none }
.page-docs .mobile-nav { display:block;margin-left:auto }
.page-docs .mobile-nav summary { list-style:none;font-size:20px;cursor:pointer;padding:6px 10px }
.page-docs .mobile-nav nav { position:absolute;top:77px;left:16px;right:16px;background:white;box-shadow:0 14px 30px #0e1b1520;border:1px solid var(--line);border-radius:12px;padding:12px;display:grid }
.page-docs .mobile-nav nav a { padding:10px 12px;font-size:14px }
.page-docs .docs-shell { margin:104px 23px 0;display:block }
.page-docs .sidebar { display:none }
.page-docs .mobile-docs { display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 0 14px;margin-bottom:25px;gap:20px;font-size:13px }
.page-docs .mobile-docs summary { cursor:pointer }
.page-docs .mobile-docs button { background:transparent;border:0;font-size:12px;color:var(--muted) }
.page-docs .mobile-docs nav { padding-top:16px }
.page-docs .breadcrumb { margin-bottom:20px;font-size:11px }
.page-docs .doc-head h1 { font-size:34px }
.page-docs .doc-head .lead { font-size:15px }
.page-docs .doc-head .meta { font-size:10px }
.page-docs .guide-choices { gap:12px }
.page-docs .guide-card { padding:20px 16px }
.page-docs .guide-icon { margin-bottom:20px }
.page-docs .guide-card h2 { font-size:20px }
.page-docs .guide-card p { font-size:12px }
.page-docs .start-strip { padding:18px;align-items:start;flex-direction:column;gap:14px }
.page-docs .start-strip .btn { width:100% }
.page-docs .feature-links { grid-template-columns:1fr }
.page-docs .reading-area h2 { font-size:22px }
.page-docs .reading-area { font-size:14px }
.page-docs .step { padding-left:30px }
.page-docs .command-list a { grid-template-columns:1fr auto;gap:8px }
.page-docs .command-list p { grid-column:1 / -1;grid-row:2 }
.page-docs .command-list span { grid-column:2;grid-row:1 }
.page-docs .doc-footer { flex-direction:column;gap:8px }
.page-docs .home-preview { margin-top:65px }
.page-docs .command-header { font-size:24px!important }
.page-docs .pager a { padding:12px;font-size:12px }
}
@container page (max-width:420px) {.page-docs .guide-choices { grid-template-columns:1fr }
.page-docs .guide-card { padding:22px }
.page-docs .guide-icon { margin-bottom:15px }
.page-docs .doc-head h1 { font-size:30px }
.page-docs .workflow { gap:5px }
.page-docs .workflow .node { min-width:82px }
}

}
