:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; background: #1b1b1d; color: #dcdcdc;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.layout { display: flex; gap: 2.5rem; max-width: 74rem; margin: 0 auto; padding: 2.5rem 1.25rem; align-items: flex-start; }
main.doc { max-width: 46rem; flex: 1 1 auto; min-width: 0; }
.sidebar { width: 16rem; flex: none; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; font-size: 0.9rem; }
.sidebar ul { list-style: none; padding-left: 0.8rem; margin: 0.2rem 0; }
.sidebar > ul { padding-left: 0; }
.nav-home { display: block; font-weight: 600; color: #fff; margin-bottom: 0.8rem; font-size: 1rem; }
.nav-section > span { display: block; color: #8a8a8a; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0.7rem 0 0.2rem; }
.sidebar a { color: #bcbcbc; display: block; padding: 0.12rem 0; }
.sidebar a:hover { color: #fff; text-decoration: none; }
.sidebar a.active { color: #5c8cff; font-weight: 600; }
@media (max-width: 900px) { .layout { flex-direction: column; gap: 1rem; } .sidebar { width: auto; position: static; max-height: none; border-bottom: 1px solid #333; padding-bottom: 1rem; } }
h1, h2, h3, h4, h5, h6 { color: #fff; line-height: 1.25; margin: 1.6em 0 0.6em; }
h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.2rem; }
a { color: #5c8cff; text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0.7em 0; }
code { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.9em; }
:not(pre) > code { background: #2a2a2d; padding: 0.1em 0.35em; border-radius: 4px; }
pre { background: #131315; border: 1px solid #333; border-radius: 6px; padding: 0.9rem 1rem; overflow-x: auto; }
pre code { background: none; padding: 0; }
hr { border: none; border-top: 1px solid #333; margin: 2rem 0; }
ul, ol { padding-left: 1.4rem; }
li { margin: 0.25em 0; }
table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
th, td { border: 1px solid #333; padding: 0.4rem 0.7rem; text-align: left; }
th { background: #232325; }
img { max-width: 100%; border-radius: 6px; }
.callout { border-left: 3px solid; border-radius: 4px; padding: 0.1rem 1rem; margin: 1rem 0; }
.callout > :first-child { margin-top: 0.6em; }
.callout > :last-child { margin-bottom: 0.6em; }
.callout-note { border-color: #5c8cff; background: rgba(92,140,255,0.08); }
.callout-warning { border-color: #ffb400; background: rgba(255,180,0,0.08); }
.callout-tip { border-color: #64c864; background: rgba(100,200,100,0.08); }
.embed { border: 1px dashed #555; border-radius: 6px; padding: 1rem; margin: 1rem 0; color: #9a9a9a; font-size: 0.9rem; }
.embed::before { content: 'Example: ' attr(data-node); }
.embed-params::before { content: 'Parameters: ' attr(data-node); }
/* Live example viewer (docs-embed.js). Once a canvas is mounted the dashed
   placeholder label is dropped and the canvas fills the embed. */
.embed-example--live { border-style: solid; border-color: #333; padding: 0.5rem; }
.embed-example--live::before { content: none; }
.embed-example canvas { display: block; width: 100%; height: auto; border-radius: 4px; background: #0d0d0f; }
.embed-note { margin-top: 0.5rem; font-size: 0.85rem; color: #8a8a8a; }
.embed-note:empty { display: none; }
.embed-example--error { border-color: #c84a4a; }
.embed-example--unsupported .embed-note { color: #b0a060; }