@charset "UTF-8"; /* Design tokens as CSS custom properties, so a single [data-theme] attribute on flips the whole site between dark (default) and light. */ :root, [data-theme=dark] { color-scheme: dark; --bg: #0f1115; --bg-soft: #14171d; --surface: #181c23; --code-bg: #0c0e12; --fg: #e7ebf0; --fg-soft: #c2c9d2; --muted: #8b94a3; --border: #272d38; --accent: #1e8cd2; /* logo blue */ --green: #69be46; /* logo green */ --orange: #f59b2d; /* logo orange */ --red: #d2051e; /* logo red */ --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Syntax-highlight token colors (dark). */ --tok-comment: #6b7686; --tok-string: #9ccf6a; --tok-keyword: #c792ea; --tok-number: #f5a96a; --tok-func: #5cb6f0; --tok-property: #7fd4c1; --tok-tag: #f07a82; --tok-attr: #f5b86a; --tok-interp: #5cb6f0; --tok-punct: #8b94a3; } [data-theme=light] { color-scheme: light; --bg: #ffffff; --bg-soft: #f7f8fa; --surface: #f1f3f6; --code-bg: #f6f8fa; --fg: #1a1f29; --fg-soft: #3a424f; --muted: #687180; --border: #e2e6ec; --accent: #1373b0; /* Syntax-highlight token colors (light). */ --tok-comment: #8a93a0; --tok-string: #3f8f2f; --tok-keyword: #8b3fc9; --tok-number: #b5651d; --tok-func: #1373b0; --tok-property: #0f8a76; --tok-tag: #c0392b; --tok-attr: #b5651d; --tok-interp: #1373b0; --tok-punct: #687180; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: var(--mono); } /* Inline code inside prose. */ :not(pre) > code { font-size: 0.88em; padding: 1px 6px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); } /* Prose typography — applies to the doc content rendered by each page. */ h1 { font-size: 34px; line-height: 1.2; margin: 0 0 10px; letter-spacing: -0.02em; } h2 { font-size: 23px; line-height: 1.3; margin: 40px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } h3 { font-size: 18px; margin: 28px 0 10px; } /* Leave room under the sticky top bar when jumping to an anchor. */ h1, h2, h3, h4 { scroll-margin-top: 76px; } p { margin: 14px 0; color: var(--fg-soft); } ul, ol { margin: 14px 0; padding-left: 22px; color: var(--fg-soft); } li { margin: 6px 0; } .lead { font-size: 18px; color: var(--fg-soft); } strong { color: var(--fg); } /* Syntax-highlight token classes. These spans are created in JS by the highlighter (no component scope attribute), so the classes are global. */ .tok-comment { color: var(--tok-comment); font-style: italic; } .tok-string { color: var(--tok-string); } .tok-keyword { color: var(--tok-keyword); } .tok-number { color: var(--tok-number); } .tok-func { color: var(--tok-func); } .tok-property { color: var(--tok-property); } .tok-tag { color: var(--tok-tag); } .tok-attr { color: var(--tok-attr); } .tok-interp { color: var(--tok-interp); } .tok-punct { color: var(--tok-punct); } .topbar[data-w-nq83qt]{ position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; height: 56px; padding: 0 20px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .topbar .brand{ display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 700; font-size: 17px; } .topbar .brand:hover{ text-decoration: none; } .brand-tag[data-w-nq83qt]{ font-weight: 500; font-size: 13px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; } .sections[data-w-nq83qt]{ display: flex; gap: 4px; } .sections .section-link{ color: var(--fg-soft); font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 8px; } .sections .section-link:hover{ color: var(--fg); background: var(--surface); text-decoration: none; } .sections .section-link.active{ color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .topbar-right[data-w-nq83qt]{ margin-left: auto; display: flex; align-items: center; gap: 8px; } .icon-btn[data-w-nq83qt]{ font: inherit; font-size: 13px; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); cursor: pointer; line-height: 1; } .icon-btn[data-w-nq83qt]:hover{ border-color: var(--accent); color: var(--accent); text-decoration: none; } .layout[data-w-nq83qt]{ display: grid; grid-template-columns: 256px 1fr; align-items: start; max-width: 1280px; margin: 0 auto; } .sidebar[data-w-nq83qt]{ position: sticky; top: 56px; align-self: start; height: calc(100vh - 56px); overflow-y: auto; padding: 24px 16px; border-right: 1px solid var(--border); } .nav-group[data-w-nq83qt]{ margin-bottom: 22px; } .nav-group-title[data-w-nq83qt]{ margin: 0 0 6px; padding: 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); } .nav-group .nav-link{ display: block; padding: 6px 10px; border-radius: 7px; color: var(--fg-soft); font-size: 14px; } .nav-group .nav-link:hover{ color: var(--fg); background: var(--surface); text-decoration: none; } .nav-group .nav-link.active{ color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; } .content[data-w-nq83qt]{ min-width: 0; padding: 36px 48px 96px; } @media (max-width: 860px) { .layout[data-w-nq83qt]{ grid-template-columns: 1fr; } .sidebar[data-w-nq83qt]{ display: none; } .content[data-w-nq83qt]{ padding: 28px 22px 80px; } } .search[data-w-1gpge0]{ position: relative; } .search-input[data-w-1gpge0]{ font: inherit; font-size: 13px; width: 220px; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); } .search-input[data-w-1gpge0]::placeholder{ color: var(--muted); } .search-input[data-w-1gpge0]:focus{ outline: none; border-color: var(--accent); } .panel[data-w-1gpge0]{ position: absolute; top: calc(100% + 6px); right: 0; width: 360px; max-height: 60vh; overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); z-index: 50; } .empty[data-w-1gpge0]{ margin: 0; padding: 12px; color: var(--muted); font-size: 13px; } .item[data-w-1gpge0]{ display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 7px; color: var(--fg); } .item[data-w-1gpge0]:hover, .item.active[data-w-1gpge0]{ background: var(--surface); text-decoration: none; } .item.active[data-w-1gpge0]{ outline: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); } .item-main[data-w-1gpge0]{ display: flex; align-items: center; gap: 8px; } .item-title[data-w-1gpge0]{ font-size: 14px; font-weight: 600; } .item-tag[data-w-1gpge0]{ font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--orange); border: 1px solid color-mix(in srgb, var(--orange) 50%, transparent); border-radius: 5px; padding: 0 5px; } .item-crumb[data-w-1gpge0]{ font-size: 12px; color: var(--muted); } .notfound[data-w-1qzpa1]{ text-align: center; padding: 64px 0; } .nf-code[data-w-1qzpa1]{ font-size: 64px; font-weight: 800; color: var(--border); margin: 0; } .nf-home[data-w-1qzpa1]{ font-weight: 600; } .hero[data-w-1klbnn]{ text-align: center; padding: 40px 0 12px; } .hero-logo[data-w-1klbnn]{ filter: drop-shadow(0 6px 20px color-mix(in srgb, var(--accent) 30%, transparent)); } .hero-title[data-w-1klbnn]{ font-size: 56px; margin: 14px 0 6px; letter-spacing: -0.03em; } .hero-tagline[data-w-1klbnn]{ font-size: 20px; color: var(--fg); font-weight: 500; margin: 0 auto 10px; max-width: 640px; } .hero-sub[data-w-1klbnn]{ font-size: 16px; color: var(--fg-soft); max-width: 600px; margin: 0 auto; } .hero-cta[data-w-1klbnn]{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; } .hero-cta .btn{ font-size: 15px; font-weight: 600; padding: 11px 20px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; } .hero-cta .btn:hover{ text-decoration: none; } .hero-cta .btn-primary{ background: var(--accent); border-color: var(--accent); color: #0b0d11; } .hero-cta .btn-primary:hover{ filter: brightness(1.07); } .hero-cta .btn-ghost{ background: var(--surface); color: var(--fg); } .hero-cta .btn-ghost:hover{ border-color: var(--accent); color: var(--accent); } .threads[data-w-1klbnn]{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 56px; } .thread-card[data-w-1klbnn]{ padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); } .thread-card h3[data-w-1klbnn]{ margin: 0 0 6px; font-size: 16px; } .thread-card p[data-w-1klbnn]{ margin: 0; font-size: 14.5px; } @media (max-width: 720px) { .threads[data-w-1klbnn]{ grid-template-columns: 1fr; } .hero-title[data-w-1klbnn]{ font-size: 44px; } } .doc[data-w-ojbzyx]{ max-width: 760px; } .next-link[data-w-ojbzyx]{ font-weight: 600; } .doc[data-w-1mqbpa]{ max-width: 760px; } .next-link[data-w-1mqbpa]{ font-weight: 600; } /* Layout lives in the ApiPage component; nothing page-specific here yet. */ .doc[data-w-t1pnx4]{ max-width: 800px; } .doc .next-link{ font-weight: 600; } .doc blockquote{ margin: 16px 0; padding: 2px 16px; border-left: 3px solid var(--border); color: var(--muted); } .doc hr{ border: none; border-top: 1px solid var(--border); margin: 32px 0; } .doc table{ width: 100%; margin: 20px 0; border-collapse: collapse; font-size: 14px; } .doc th, .doc td{ padding: 8px 12px; text-align: left; border: 1px solid var(--border); vertical-align: top; } .doc thead th{ background: var(--surface-2); font-weight: 600; } .doc tbody tr:nth-child(even){ background: color-mix(in srgb, var(--surface-2) 45%, transparent); } .api-doc[data-w-v50p1s]{ max-width: 820px; } .api-count[data-w-v50p1s]{ color: var(--muted); font-size: 14px; margin-top: 2px; } .api[data-w-v50p1s]{ margin: 8px 0 36px; padding-top: 8px; } .api h3[data-w-v50p1s]{ display: flex; align-items: center; gap: 10px; scroll-margin-top: 76px; } .api-kind[data-w-v50p1s]{ font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; color: var(--bg); background: var(--accent); } .api-kind[data-kind=function][data-w-v50p1s]{ background: var(--tok-func); } .api-kind[data-kind=const][data-w-v50p1s]{ background: var(--tok-number); } .api-kind[data-kind=type][data-w-v50p1s], .api-kind[data-kind=interface][data-w-v50p1s]{ background: var(--tok-property); } .api-kind[data-kind=class][data-w-v50p1s], .api-kind[data-kind=enum][data-w-v50p1s]{ background: var(--tok-keyword); } .api-name[data-w-v50p1s]{ font-size: 17px; } .api-prose[data-w-v50p1s]{ margin-top: 4px; } .api-sub[data-w-v50p1s]{ margin: 14px 0 4px; font-weight: 600; font-size: 13px; color: var(--fg); } .api-params[data-w-v50p1s]{ margin: 4px 0; } .api-pname[data-w-v50p1s]{ font-weight: 600; } .api-ptype[data-w-v50p1s]{ color: var(--muted); font-family: var(--mono); font-size: 0.88em; } .api-pdoc[data-w-v50p1s], .api-rdoc[data-w-v50p1s]{ color: var(--fg-soft); } .code-block[data-w-ejs1pi]{ position: relative; margin: 16px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--code-bg); overflow: hidden; } .code-block[data-w-ejs1pi]::after{ content: attr(data-lang); position: absolute; top: 8px; right: 56px; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); pointer-events: none; } .copy[data-w-ejs1pi]{ position: absolute; top: 8px; right: 8px; z-index: 1; font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); cursor: pointer; } .copy[data-w-ejs1pi]:hover{ border-color: var(--accent); color: var(--accent); } .pre[data-w-ejs1pi]{ margin: 0; padding: 16px; padding-top: 18px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.6; tab-size: 2; } .pre code[data-w-ejs1pi]{ font-family: inherit; white-space: pre; } .demo[data-w-na7ypm]{ position: relative; margin: 16px 0; padding: 28px 20px 22px; border: 1px solid var(--border); border-radius: 10px; background: radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0/18px 18px, var(--bg-soft); } .demo-label[data-w-na7ypm]{ position: absolute; top: 8px; left: 12px; font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); } .demo-stage[data-w-na7ypm]{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; min-height: 56px; } .code-tabs[data-w-j0uz4y]{ margin: 16px 0; } .tab-row[data-w-j0uz4y]{ display: flex; gap: 4px; padding: 4px 4px 0; border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0; background: var(--surface); } .tab[data-w-j0uz4y]{ font: inherit; font-family: var(--mono); font-size: 12.5px; padding: 7px 12px; border: none; border-radius: 7px 7px 0 0; background: transparent; color: var(--muted); cursor: pointer; } .tab[data-w-j0uz4y]:hover{ color: var(--fg); } .tab.active[data-w-j0uz4y]{ background: var(--code-bg); color: var(--fg); } /* The nested CodeBlock squares off its top corners to meet the tab row. */ .code-tabs .code-block{ margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .callout[data-w-1wy7bt]{ margin: 18px 0; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--surface); } .callout[data-kind=tip][data-w-1wy7bt]{ border-left-color: var(--green); } .callout[data-kind=warn][data-w-1wy7bt]{ border-left-color: var(--orange); } .callout-title[data-w-1wy7bt]{ margin: 0 0 6px; font-weight: 600; font-size: 14px; } .callout-body[data-w-1wy7bt]{ color: var(--fg-soft); font-size: 14.5px; line-height: 1.65; } .callout-body p{ margin: 0; } .counter-demo[data-w-1brb1w]{ display: flex; gap: 10px; align-items: center; } .cd-primary[data-w-1brb1w]{ font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #0b0d11; cursor: pointer; } .cd-primary[data-w-1brb1w]:hover{ filter: brightness(1.07); } .cd-ghost[data-w-1brb1w]{ font: inherit; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--fg); cursor: pointer; } .cd-ghost[data-w-1brb1w]:hover{ border-color: var(--accent); color: var(--accent); }