.docs-wrap{max-width:1180px;margin:0 auto;color:var(--text,#f4efe6)}
.docs-intro{padding:4px 0 24px;border-bottom:1px solid var(--line,rgba(255,255,255,.1))}
.docs-kicker{font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.08em;color:var(--gate,#f2b64a);margin-bottom:8px}
.docs-intro h1{font-size:29px;margin:0}.docs-intro p{max-width:76ch;margin:8px 0 0;color:var(--muted,#ada393);font-size:14px;line-height:1.65}
.docs-search{position:relative;margin-top:18px;max-width:680px}.docs-search input{width:100%;padding:12px 90px 12px 14px;background:var(--panel,#1c1914);border:1px solid var(--line-2,rgba(255,255,255,.15));border-radius:8px;color:inherit;font:inherit;font-size:13.5px}.docs-shortcut{position:absolute;right:10px;top:10px;color:var(--faint,#8f8778);font-size:11px}
.docs-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:42px;align-items:start}
.docs-toc>.docs-toc-label:first-child{padding-top:0}
.docs-toc{position:sticky;top:18px;padding:24px 0;max-height:calc(100vh - 36px);overflow:auto}.docs-toc-label{padding:14px 9px 7px;font-size:10.5px;font-weight:750;text-transform:uppercase;letter-spacing:.07em;color:var(--faint,#8f8778)}
.docs-toc button,.docs-toc a{display:block;width:100%;padding:7px 9px;border:0;border-left:2px solid transparent;background:none;color:var(--muted,#ada393);font:inherit;font-size:12.5px;text-align:left;text-decoration:none;cursor:pointer}.docs-toc button:hover,.docs-toc button.on,.docs-toc a:hover,.docs-toc a.on{color:var(--text,#f4efe6);border-left-color:var(--gate,#f2b64a)}
.docs-content{min-width:0}.doc-section{padding:32px 0;border-bottom:1px solid var(--line,rgba(255,255,255,.1));scroll-margin-top:24px}.doc-section h1,.doc-section h2{margin:0 0 8px;font-size:23px}.doc-section h3{margin:24px 0 8px;font-size:15px}.doc-section p,.doc-list{color:var(--muted,#ada393);font-size:14px;line-height:1.65}.doc-list{padding-left:22px}.doc-list li+li{margin-top:7px}.doc-lede{font-size:15px!important;max-width:76ch}.doc-path,.doc-callout{margin:14px 0;padding:12px 14px;border-radius:9px;background:var(--card,#232019);border:1px solid var(--line-2,rgba(255,255,255,.15));color:var(--muted,#ada393);font-size:13px}.doc-path{color:var(--gate,#f2b64a);font-weight:650}.doc-callout.warn{border-color:var(--gate-line,rgba(242,182,74,.36))}.doc-code{margin:15px 0;border:1px solid var(--line-2,rgba(255,255,255,.15));border-radius:9px;overflow:hidden;background:var(--bg,#14120f)}.doc-code-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--card,#232019);color:var(--faint,#8f8778);font-size:11px}.doc-copy{border:0;background:none;color:var(--muted,#ada393);cursor:pointer}.doc-guide-jump{border:0;background:none;padding:0;color:var(--gate,#f2b64a);cursor:pointer;font:inherit;font-size:12.5px;white-space:nowrap}.doc-guide-jump:hover{text-decoration:underline}.doc-code pre{margin:0;padding:15px;overflow:auto;color:var(--text,#f4efe6);font:12px/1.65 'IBM Plex Mono',monospace}.doc-table-wrap{overflow:auto;margin:15px 0;border:1px solid var(--line-2,rgba(255,255,255,.15));border-radius:9px}.doc-table{width:100%;border-collapse:collapse;font-size:12.5px}.doc-table th,.doc-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line,rgba(255,255,255,.1));vertical-align:top}.doc-table th{color:var(--faint,#8f8778);background:var(--card,#232019)}.doc-table td{color:var(--muted,#ada393)}.doc-table-wrap:focus-visible{outline:2px solid var(--gate,#f2b64a);outline-offset:2px}
.docs-empty{display:none;padding:40px 0;color:var(--muted,#ada393)}
/* Links inside guide PROSE, on the standalone pages only. In the app the
   global `a` rule already colours them; a static page has no such rule, so
   every "See also" and every external reference rendered as browser-default
   blue-and-underlined on an otherwise warm-dark page. Scoped by the renderer
   attribute so the in-app screen keeps the styling it already had. */
/* Amber alone is 1.37:1 against the surrounding muted prose, so colour cannot be
   the only thing marking a link (WCAG 1.4.1). The underline is the cue; the
   colour is decoration on top of it. */
[data-documentation-renderer="shared-static"] .guide-more a,
[data-documentation-renderer="shared-static"] .doc-section a{color:var(--gate,#f2b64a);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
[data-documentation-renderer="shared-static"] .guide-more a:hover,
[data-documentation-renderer="shared-static"] .doc-section a:hover{text-decoration-thickness:2px}
/* The CTA is a button, not prose: it sits in no text block, so an underline
   would only make it look broken. */
[data-documentation-renderer="shared-static"] .guide-cta a{text-decoration:none}
/* /guides/* – the same article shell as a doc page, plus the three things a
   guide has that a doc page does not: a dated line, one CTA, and an index of
   cards. Everything else is deliberately reused (SEO.md § 3.2: no blog engine). */
.doc-updated{margin:0 0 20px;color:var(--faint,#8f8778);font-size:12.5px}
.docs-content article.doc-section h2{margin-top:30px}
.guide-cta{margin-top:32px;padding-top:24px;border-top:1px solid var(--line,rgba(255,255,255,.1))}
.guide-cta a{display:inline-block;padding:11px 20px;border-radius:10px;background:var(--gate,#f2b64a);color:var(--gate-ink,#2a1e05)!important;font-weight:700;font-size:14px;text-decoration:none}
.guide-index{display:grid;gap:12px;margin:24px 0 34px}
.guide-index-head{margin:0;font-size:13px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--faint,#8f8778)}
/* The index is full-width cards, so its intro should not sit in a 76ch
   column beside them. */
.docs-wrap:has(.guide-index) .docs-intro p{max-width:none}
.guide-index .guide-card{padding:20px 22px;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:12px;background:var(--card,#232019)}
.guide-index h2{margin:0 0 8px;font-size:18px;line-height:1.3}
.guide-index h2 a{color:var(--text,#f4efe6);text-decoration:none}
.guide-index h2 a:hover{color:var(--gate,#f2b64a)}
.guide-index p{margin:0;color:var(--muted,#ada393);font-size:13.5px;line-height:1.6}
.guide-index .doc-updated{margin:10px 0 0}
.doc-integration-guide{margin:18px 0 24px;padding:18px;border:1px solid var(--line-2,rgba(255,255,255,.15));border-radius:10px;background:var(--panel,#1c1914)}.doc-integration-guide h4{margin:0 0 6px;font-size:16px}.doc-integration-guide p{margin:0 0 10px}.doc-integration-guide .doc-table-wrap{margin:10px 0 0}.doc-integration-guide .doc-table th{width:22%;white-space:nowrap}
.doc-guide-summary{font-size:14px!important;color:var(--faint,#8f8778)!important}.doc-guide-step{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line,rgba(255,255,255,.1))}.doc-guide-step h5{margin:0 0 9px;font-size:15px;color:var(--text,#f4efe6)}.doc-guide-step p,.doc-guide-step li{font-size:14px;line-height:1.7}.doc-guide-step ol,.doc-guide-step ul{margin:8px 0 12px;padding-left:24px;color:var(--muted,#ada393)}.doc-guide-step li+li{margin-top:5px}.doc-guide-step a{color:var(--gate,#f2b64a);text-decoration:underline;text-underline-offset:2px}.doc-guide-code{margin:12px 0 14px}.doc-guide-code .doc-code-head{justify-content:flex-end}
@media(max-width:800px){.docs-layout{grid-template-columns:1fr}.docs-toc{position:static;display:flex;gap:4px;overflow:auto;padding:14px 0}.docs-toc-label{display:none}.docs-toc button,.docs-toc a{width:auto;white-space:nowrap;border-left:0;border-bottom:2px solid transparent}.docs-toc button.on,.docs-toc a.on{border-bottom-color:var(--gate,#f2b64a)}}

/* Larger type, with prose using the full article column. The left guide
   navigation remains intact. */
.docs-content,.doc-section{width:100%}.doc-section{padding:36px 0}
.doc-section h1,.doc-section h2{font-size:25px}.doc-section h3{font-size:17px}
/* Prose keeps a readable measure (~76ch); tables and code still span the full
   column via their own wrappers. */
.doc-section p,.doc-list{max-width:76ch;font-size:15.5px;line-height:1.7}.doc-lede{font-size:16.5px!important}
.doc-callout,.doc-path{font-size:14.5px}.doc-table{font-size:14px}.doc-code pre{font-size:13px}
.doc-callout.warn>div{display:flex;flex-direction:column;gap:4px}.doc-callout.warn>div>b{display:block}.doc-callout.warn>div>span{display:block}