:root,
[data-bs-theme="light"] {
    color-scheme: light;
    --page: #ffffff;
    --surface: #f6f6f7;
    --surface-blue: #f1f5fd;
    --ink: #1b1c1e;
    --muted: #62656d;
    --line: #e6e6e3;
    --line-strong: #cfcfc9;
    --footer-bg: #faf6ef;
    --blue: #2c6de8;
    --blue-hover: #215bd0;
    --on-blue: #ffffff;
    --link: #215bd0;
    --link-hover: #1d4fbb;
    --focus: #2c6de8;
    --control-border: #686a70;
    --selection: #dbeafe;
    --selection-ink: #1b1c1e;
    --green: #176346;
    --green-bg: #f3f3f4;
    --code-key: var(--ink);
    --code-string: #26624b;
    --code-number: #8a4617;
    --error-background: #f8e5e1;
    --error-text: #86231f;
    --error-border: #ad3e35;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-gradient: none;
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 4px;
    --bs-body-bg: var(--page);
    --bs-body-color: var(--ink);
    --bs-border-color: var(--line);
    --bs-secondary-color: var(--muted);
    --bs-link-color-rgb: 33, 91, 208;
    --bs-link-hover-color-rgb: 29, 79, 187;
}

[data-bs-theme="light"] :is(.theme-toggle, .form-select) { border-color: var(--control-border); }

[data-bs-theme="dark"] {
    color-scheme: dark;
    --page: #17181b;
    --surface: #1d1f23;
    --surface-blue: #1f2228;
    --ink: #e9e9ea;
    --muted: #9a9ca3;
    --line: #2a2c31;
    --line-strong: #383b42;
    --footer-bg: #1c1b19;
    --blue: #2c6de8;
    --blue-hover: #215bd0;
    --on-blue: #ffffff;
    --link: #6ea8fe;
    --link-hover: #9ec5fe;
    --focus: #6ea8fe;
    --control-border: #8b9099;
    --selection: #26436e;
    --selection-ink: #e8e8e8;
    --green: #8cd6b2;
    --green-bg: #1e2024;
    --code-key: var(--ink);
    --code-string: #b4a5a5;
    --code-number: #e4cddd;
    --error-background: #3b2127;
    --error-text: #ffcbc4;
    --error-border: #e99185;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 158, 197, 254;
}

[data-bs-theme="dark"] :is(.theme-toggle, .form-select) { border-color: var(--control-border); }

html { scroll-behavior: auto; scroll-padding-top: 6rem; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--page); color: var(--ink); font-family: var(--bs-body-font-family); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.dialog-open { overflow: hidden; }
body > main { flex: 1 0 auto; min-width: 0; }
.site-header, .site-footer { flex-shrink: 0; }
::selection { background: var(--selection); color: var(--selection-ink); }
button, input, select, summary { font: inherit; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
:is(main, .site-footer) a:not(.btn, .brand) { text-decoration-line: underline; text-decoration-style: dotted; }
:is(main, .site-footer) a:not(.btn, .brand):is(:hover, :focus-visible) { text-decoration-style: solid; }
a, button, input, select, summary { transition: color 120ms, background-color 120ms, border-color 120ms; }
:is(a, button, input, select, summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; box-shadow: none; }
[hidden] { display: none !important; }
.ui-icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -.125em; }
.btn .ui-icon, .text-link .ui-icon, .metric-card a .ui-icon, .dialog-close .ui-icon { margin-left: .35em; }
.container { max-width: 1180px; padding-right: 32px; padding-left: 32px; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: wrap; }
h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 26px; }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); margin: 0 0 1rem; }
h3 { font-size: 1.2rem; letter-spacing: -.015em; margin: 0 0 .75rem; }
p { margin: 0 0 1.2rem; }
.muted, .text-body-secondary { color: var(--muted) !important; }
.small-text { font-size: .875rem; }
.eyebrow { color: var(--muted); font-size: .875rem; font-weight: 500; letter-spacing: normal; margin-bottom: 16px; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 1100; border: 1px solid var(--line); background: var(--page); padding: 12px 20px; }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 100; background: var(--page); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; min-height: 72px; gap: 24px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: inline-flex; align-items: baseline; flex-shrink: 0; color: var(--ink); font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; text-decoration: none; }
.brand span { color: inherit; }
.brand b { color: inherit; font-weight: inherit; }
a.brand:is(:hover, :focus-visible) { color: var(--link); }
a.brand:focus-visible { text-decoration: underline; }
.primary-nav { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 24px; }
.primary-nav a:not(.btn) { color: var(--ink); font-size: inherit; font-weight: 500; text-decoration: none; }
.primary-nav a:not(.btn):is(:hover, :focus-visible) { color: var(--link); text-decoration: underline; text-underline-offset: 6px; }
.header-actions { display: flex; gap: 12px; align-items: center; }
.theme-toggle, .menu-toggle { border: 1px solid var(--line); background: var(--page); color: var(--ink); border-radius: 5px; min-height: 38px; padding: 7px 10px; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; }
.theme-toggle:hover { background: var(--surface); }
.menu-toggle { background: var(--blue); color: var(--on-blue); border-color: var(--blue); border-radius: 4px; }
.menu-toggle:hover { border-color: var(--blue-hover); }
.theme-toggle { border: 0; width: 40px; height: 40px; padding: 7px; justify-content: center; }
.theme-toggle .theme-within { width: 24px; height: 24px; color: #a16207; }
.theme-toggle:hover .theme-within { color: #854d0e; }
[data-bs-theme="dark"] .theme-toggle .theme-within { color: #c4b5fd; }
[data-bs-theme="dark"] .theme-toggle:hover .theme-within { color: #ddd6fe; }
.theme-within__rays, .theme-within__ring, .theme-within__moon { transform-origin: center; }
[data-bs-theme="dark"] .theme-within__rays { transform: scale(.65); }
[data-bs-theme="dark"] .theme-within__ring { transform: scale(1.5); }
[data-bs-theme="dark"] .theme-within__moon { transform: translate3d(3px, -3px, 0) scale(1.2); }
.menu-toggle { display: none; }
.menu-toggle .menu-close, .menu-toggle[aria-expanded="true"] .menu-open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-close { display: inline-block; }
.btn { font-size: .9375rem; font-weight: 600; line-height: 1.5; border-radius: 4px; padding: 11px 24px; background-image: none; box-shadow: none; text-decoration: none; transition: color 120ms, background-color 120ms, border-color 120ms; }
.btn-primary, .btn-outline-primary { --bs-btn-color: var(--on-blue); --bs-btn-bg: var(--blue); --bs-btn-border-color: var(--blue); --bs-btn-hover-color: var(--on-blue); --bs-btn-hover-bg: var(--blue); --bs-btn-hover-border-color: var(--blue-hover); --bs-btn-active-color: var(--on-blue); --bs-btn-active-bg: var(--blue); --bs-btn-active-border-color: var(--blue-hover); --bs-btn-disabled-color: var(--on-blue); --bs-btn-disabled-bg: var(--blue); --bs-btn-disabled-border-color: var(--blue); }
.btn-sm { padding: 7px 13px; font-size: .8rem; }
.primary-nav .btn { padding: 8px 16px; font-size: .9375rem; }
.hero { padding: 76px 0 50px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; grid-template-areas: "copy preview"; gap: 48px; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero-grid > .hero-copy { grid-area: copy; padding-bottom: 12px; }
.hero h1 { font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.hero-grid > .hero-preview { grid-area: preview; }
.hero-preview .preview-code pre { height: 336px; overflow: auto; }
.hero-description { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.1875rem); max-width: 52ch; line-height: 1.58; }
.hero-actions { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-top: 28px; margin-bottom: 14px; }
.text-link { font-size: .9375rem; font-weight: 600; }
.text-link:hover { text-decoration: underline; }
.hero-benefits { display: flex; gap: 20px; margin-top: 27px; font-size: .78rem; color: var(--muted); }
.hero-benefits span { display: flex; gap: 7px; align-items: center; }
.hero-benefits svg { width: 15px; height: 15px; color: inherit; flex-shrink: 0; }
.api-preview { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--page); min-width: 0; }
.panel-heading { padding: 13px 18px; display: flex; align-items: center; justify-content: space-between; background: var(--surface); border-bottom: 1px solid var(--line); font-size: .78rem; font-weight: 600; }
.request-line { display: flex; gap: 12px; align-items: center; padding: 17px 20px; font-size: .74rem; border-bottom: 1px solid var(--line); min-width: 0; }
.request-line code { color: var(--muted); overflow-x: auto; white-space: nowrap; }
.http-method { color: var(--green); font-weight: 700; font-size: .68rem; }
.preview-code { position: relative; }
.preview-code pre { margin: 0; padding: 14px 16px; font-size: .875rem; line-height: 24px; color: var(--muted); }
.json-key { color: var(--code-key); }
.json-string { color: var(--code-string); }
.json-number { color: var(--code-number); }
.copy-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; padding: 7px; border: 0; border-radius: 4px; background: transparent; color: var(--control-border); cursor: pointer; }
.copy-button:hover { color: var(--ink); }
.copy-button .ui-icon { width: 18px; height: 18px; margin: 0; pointer-events: none; }
.preview-code .copy-button { position: absolute; right: 13px; top: 12px; }
.panel-footer { border-top: 1px solid var(--line); padding: 10px 18px; display: flex; justify-content: space-between; align-items: center; font-size: .68rem; color: var(--muted); background: var(--surface); }
.preview-caption { margin: 10px 0 0; text-align: center; color: var(--muted); font-size: .72rem; }
.code-tabs { display: flex; align-items: stretch; gap: 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; background: transparent; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.code-tab { flex: 0 0 auto; min-height: 44px; padding: 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-size: .875rem; font-weight: 500; line-height: 1.5; text-align: left; white-space: nowrap; }
.code-tab:hover { color: var(--ink); background: transparent; outline: 1px dashed var(--focus); outline-offset: -1px; }
.code-tab[aria-selected="true"] { border-bottom-color: var(--ink); color: var(--ink); background: transparent; }
.code-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.capability-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px; border: 1px solid var(--control-border); border-bottom: 0; border-radius: 4px 4px 0 0; background: var(--surface); }
.capability-tab { min-width: 0; min-height: 48px; padding: 9px 6px; border: 1px solid var(--control-border); border-radius: 4px 4px 0 0; background: var(--page); color: var(--ink); font-size: .875rem; line-height: 1.35; text-align: center; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.capability-tab:hover { border-color: var(--focus); background: var(--surface-blue); }
.capability-tab[aria-selected="true"] { border-color: var(--blue); background: var(--blue); color: var(--on-blue); }
.capability-tab:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--focus); outline-offset: 2px; }
.capability-tab strong { display: block; font-size: inherit; font-weight: 600; }
.hero-preview .api-preview { border-color: var(--control-border); border-top-left-radius: 0; border-top-right-radius: 0; }
.section { padding: 72px 0; }
.section-tinted { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-intro { max-width: 670px; margin-bottom: 36px; }
.section-intro p { color: var(--muted); margin-bottom: 0; font-size: 1rem; }
.section-title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; }
.section-title-row .section-intro { margin-bottom: 0; }
.section-title-row > a { white-space: nowrap; padding-bottom: 3px; }
.metric-card { position: relative; border: 1px solid var(--line); border-radius: 4px; padding: 26px; background: var(--page); height: 100%; display: flex; flex-direction: column; }
:is(.metric-card, .plan-card) .stretched-link::after { inset: -1px; border: 1px solid var(--line); border-radius: 4px; }
:is(.metric-card, .plan-card) .stretched-link:focus::after { border-color: var(--focus); }
:is(.metric-card, .plan-card) .stretched-link:hover::after { border-color: var(--focus); border-style: dashed; }
:is(.metric-card, .plan-card) .stretched-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
.metric-number { color: var(--muted); font: .72rem var(--bs-font-monospace); margin-bottom: 22px; }
.metric-card h3 { margin-bottom: 12px; font-size: 1.2rem; }
.metric-card p { color: var(--muted); font-size: .95rem; line-height: 1.6; }
.metric-card a { margin-top: auto; font-size: .875rem; font-weight: 600; }
.metric-card a:hover { text-decoration: underline; }
.metric-example { padding: 17px 0 19px; margin-top: auto; display: flex; align-items: baseline; gap: 8px; }
.metric-example strong { font-size: 1.9rem; line-height: 1; letter-spacing: -.04em; font-weight: 600; }
.metric-example span { font-size: .73rem; color: var(--muted); }
.developer-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 58px; align-items: start; }
.step-list { list-style: none; padding: 0; margin: 27px 0 24px; }
.step-list li { display: flex; gap: 15px; margin-bottom: 22px; }
.step-number { width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .74rem; color: var(--muted); margin-top: 2px; }
.step-list strong { font-size: .9375rem; font-weight: 600; }
.step-list p { color: var(--muted); font-size: .9rem; margin: 3px 0 0; }
.docs-panel { min-width: 0; }
.endpoint-select { padding: 0 0 16px; }
.endpoint-select legend { color: var(--muted); font-size: .875rem; margin-bottom: 10px; }
.endpoint-options { display: flex; flex-wrap: wrap; gap: 8px; }
.endpoint-option { position: relative; flex: 1 1 180px; min-width: 0; }
.endpoint-radio { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.endpoint-choice { display: flex; align-items: center; gap: 10px; min-height: 48px; height: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--page); color: var(--ink); font-size: .875rem; font-weight: 500; line-height: 1.5; }
.endpoint-indicator { display: inline-grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; border: 2px solid var(--control-border); border-radius: 50%; background: var(--page); }
.endpoint-indicator::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); opacity: 0; }
.endpoint-radio:checked + .endpoint-choice { border-color: var(--focus); background: var(--surface); }
.endpoint-radio:checked + .endpoint-choice .endpoint-indicator { border-color: var(--blue); }
.endpoint-radio:checked + .endpoint-choice .endpoint-indicator::after { opacity: 1; }
.endpoint-radio:hover + .endpoint-choice { border-color: var(--focus); border-style: dashed; }
.endpoint-radio:focus-visible + .endpoint-choice { outline: 3px solid var(--focus); outline-offset: 2px; }

.live-demo { border: 1px solid var(--line); border-radius: 4px; padding: 22px; margin-top: 26px; background: var(--page); }
.live-demo h3 { margin-bottom: 12px; }
.live-demo .form-label { font-size: .875rem; }
.demo-input-row { display: flex; align-items: stretch; gap: 10px; }
.demo-input-row .form-control { min-width: 0; background: var(--page); color: var(--ink); border-color: var(--control-border); }
.demo-input-row .btn { flex-shrink: 0; }
.demo-allowance { margin: 14px 0 8px; }
.demo-response pre { max-height: 360px; margin: 0; padding: 14px 16px; overflow: auto; }
.form-select { background-color: var(--page); color: var(--ink); border-color: var(--control-border); font-size: .875rem; transition: color 120ms, background-color 120ms, border-color 120ms; }
.code-tabs { margin-bottom: 16px; }
.code-content { min-width: 0; }
.code-meta { margin-bottom: 0; }
.code-content pre { min-height: 132px; margin-bottom: 0; padding: 14px 16px; }
.terminal-window { --window-background: var(--page); --window-header: var(--surface); --window-text: var(--ink); --window-muted: var(--muted); --window-border: var(--line); --code-key: #116329; --code-string: #26624b; --code-number: #953800; --code-literal: #953800; --code-keyword: #cf222e; --code-import: #cf222e; --code-function: #8250df; --code-variable: #1f2328; --code-constant: #953800; --code-property: #1f2328; --code-command: #953800; --code-comment: #6e7781; border: 1px solid var(--window-border); border-radius: 4px; overflow: hidden; min-width: 0; padding: 0; background: var(--window-header); }
[data-bs-theme="dark"] .terminal-window { --window-background: var(--page); --window-header: var(--surface); --window-text: var(--ink); --window-muted: var(--muted); --window-border: var(--line); --code-key: #b5cea8; --code-string: #ce9178; --code-number: #b5cea8; --code-literal: #d4d4d4; --code-keyword: #c586c0; --code-import: #c586c0; --code-function: #dcdcaa; --code-variable: #d4d4d4; --code-constant: #b5cea8; --code-property: #d4d4d4; --code-command: #dcdcaa; --code-comment: #6a9955; }
.terminal-window-shell, .terminal-window-response { margin-bottom: 18px; }
.terminal-titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; min-height: 34px; padding: 6px 14px; color: var(--window-muted); font-size: .75rem; line-height: 20px; }
.terminal-title { display: inline-flex; align-items: baseline; gap: 14px; min-width: 0; }
.terminal-window pre, .api-documentation .terminal-window pre { background: var(--window-background); color: var(--window-text); font-family: var(--bs-font-monospace); font-size: .875rem; line-height: 24px; white-space: pre; overflow-x: auto; border-radius: 2px; }
.terminal-window code, .api-documentation .terminal-window code { color: inherit; }
.terminal-window .documentation-code { margin: 0; border: 0; border-radius: 2px; }
.terminal-window .request-line code { color: var(--window-text); }
.terminal-window .http-method { color: var(--code-command); }
.terminal-window .syntax-key { color: var(--code-key); }
.terminal-window .syntax-string { color: var(--code-string); }
.terminal-window .syntax-number { color: var(--code-number); }
.terminal-window :is(.syntax-literal, .json-literal) { color: var(--code-literal); }
.terminal-window .syntax-keyword { color: var(--code-keyword); }
.terminal-window .syntax-import { color: var(--code-import); }
.terminal-window .syntax-function { color: var(--code-function); }
.terminal-window .syntax-variable { color: var(--code-variable); }
.terminal-window .syntax-constant { color: var(--code-constant); }
.terminal-window .syntax-property { color: var(--code-property); }
.terminal-window .syntax-command { color: var(--code-command); }
.terminal-window .syntax-comment { color: var(--code-comment); }
.endpoint-description { padding: 0; font-size: .875rem; line-height: 1.6; color: var(--muted); margin: 14px 0 0; }
.pricing-top { text-align: center; }
.pricing-top .section-intro { margin: 0 auto 24px; }
.billing-control { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; color: var(--ink); font-size: .875rem; font-weight: 500; }
.billing-control label { display: inline-flex; align-items: center; min-height: 44px; margin: 0; }
.billing-switch { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 44px; flex-shrink: 0; }
.billing-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.billing-track { position: relative; width: 52px; height: 28px; border: 1px solid var(--control-border); border-radius: 28px; background: var(--surface); color: var(--ink); pointer-events: none; }
.billing-track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: currentColor; }
.billing-input:checked + .billing-track { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.billing-input:checked + .billing-track::before { left: calc(100% - 23px); }
.billing-input:hover + .billing-track { border-color: var(--focus); }
.billing-input:focus-visible + .billing-track { outline: 3px solid var(--focus); outline-offset: 4px; }
.saving-note { display: inline-block; color: var(--green); font-size: .73rem; margin-left: 12px; }
.pricing-note { margin: 15px 0 29px; color: var(--muted); font-size: .75rem; }
.plan-card { position: relative; background: var(--page); border: 1px solid var(--line); border-radius: 4px; padding: 26px; height: 100%; }
.plan-card h3 { font-size: 1.08rem; }
.plan-description { color: var(--muted); font-size: .9rem; min-height: 26px; margin-bottom: 20px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price-amount { font-size: 2.4rem; line-height: 1.25; letter-spacing: -.06em; font-weight: 650; }
.price-period { font-size: .79rem; color: var(--muted); }
.plan-billing { color: var(--muted); font-size: .8rem; margin: 8px 0 23px; min-height: 24px; }
.plan-quota { padding: 19px 0; margin: 21px 0 17px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .83rem; }
.plan-quota strong { font-size: 1.06rem; font-weight: 650; }
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { font-size: .875rem; margin: 11px 0; padding-left: 22px; position: relative; }
.feature-list .ui-icon { position: absolute; left: 0; top: .15em; width: 16px; height: 16px; color: var(--muted); }
.pricing-footnote { color: var(--muted); font-size: .75rem; text-align: center; margin: 23px 0 0; }
.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; }
.faq-intro p { color: var(--muted); font-size: 1rem; }
.faq-item { border: 1px solid var(--line); border-radius: 4px; margin-bottom: 12px; }
.faq-item:hover, .faq-item:focus-within { border-color: var(--blue); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; padding: 18px 20px; font-size: .9375rem; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ui-icon { width: 18px; height: 18px; color: inherit; }
.faq-item .faq-collapse, .faq-item[open] .faq-expand { display: none; }
.faq-item[open] .faq-collapse { display: inline-block; }
.faq-item summary:hover { color: var(--ink); }
.faq-item p { padding: 0 20px 19px; margin: 0; font-size: .9375rem; color: var(--muted); }
.closing-section { background: var(--surface-blue); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 37px 0; }
.closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.closing-inner h2 { font-size: 1.6rem; margin-bottom: 8px; }
.closing-inner p { color: var(--muted); font-size: 1rem; margin: 0; }
.site-footer { padding: 52px 0 32px; border-top: 1px solid var(--line); background: var(--footer-bg); color: var(--muted); font-size: .875rem; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.footer-top p { color: var(--muted); font-size: .875rem; margin: 16px 0 0; max-width: 350px; }
.footer-nav { display: flex; gap: 25px; flex-wrap: wrap; align-items: flex-start; padding-top: 7px; }
.footer-nav a { font-size: .875rem; }
.footer-nav a:hover { text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 23px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.copyright-text, .footer-preview-note { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.footer-preview-note { flex-basis: 100%; }
.legal-content { max-width: 900px; margin: 0 auto; }
.legal-content > h1 { font-size: 2.25rem; }
.legal-notice { padding: 13px 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); font-size: .84rem; }
.legal-contents { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 12px 0 26px; font-size: .85rem; }
.legal-section { border-top: 1px solid var(--line); padding: 30px 0 10px; }
.legal-section h2 { font-size: 1.5rem; margin-bottom: 16px; }
.legal-section p { font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
.preview-dialog { width: min(510px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--page); color: var(--ink); max-height: calc(100% - 40px); }
.preview-dialog::backdrop { background: #00000080; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; padding: 17px 24px; border-bottom: 1px solid var(--line); background: var(--surface); }
.dialog-heading p { margin: 0; font-size: .78rem; font-weight: 600; }
.dialog-close { border: 1px solid var(--blue); border-radius: 4px; background: var(--blue); color: var(--on-blue); padding: 3px 6px; font-size: .8rem; }
.dialog-close:hover { border-color: var(--blue-hover); }
.dialog-body { padding: 26px 24px; }
.dialog-body h2 { font-size: 1.45rem; }
.dialog-body > p { font-size: .87rem; color: var(--muted); }
.workspace-preview { border: 1px solid var(--line); background: var(--surface); border-radius: 4px; padding: 17px; margin: 23px 0; }
.workspace-preview dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px 15px; font-size: .8rem; }
.workspace-preview dt { color: var(--muted); font-weight: 400; }
.workspace-preview dd { margin: 0; font-weight: 600; }
.demo-key { display: block; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 13px; color: var(--muted); font-size: .7rem; overflow-wrap: anywhere; }
.dialog-note { border-left: 2px solid var(--blue); padding-left: 13px; }
.toast-message { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10; background: var(--ink); color: var(--page); border-radius: 4px; padding: 9px 17px; font-size: .79rem; max-width: calc(100% - 30px); text-align: center; }
.account-shell { padding: 44px 0; }
.account-shell h1 { font-size: 2.25rem; margin-bottom: 16px; }
.account-shell h2 { font-size: 1.5rem; letter-spacing: -.025em; }
.account-card { border: 1px solid var(--line); border-radius: 4px; padding: 26px; background: var(--surface); margin-bottom: 24px; min-width: 0; }
.sign-in-panel { max-width: 520px; margin: 12px auto 30px; }
.account-message { border: 1px solid var(--blue); border-left-width: 4px; border-radius: 4px; padding: 14px 16px; background: var(--surface-blue); color: var(--ink); overflow-wrap: anywhere; margin-bottom: 18px; }
.account-message-error { border-color: var(--error-border); background: var(--error-background); color: var(--error-text); }
.account-message-label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: 5px; }
.account-message p { margin: 0; }
.account-shell .form-control { background: var(--page); color: var(--ink); border-color: var(--control-border); }
.account-shell .form-control:focus { border-color: var(--focus); }
.account-shell .form-check { display: flex; align-items: center; gap: .5rem; min-height: 2rem; padding-left: 0; }
.account-shell .form-check-input { float: none; flex-shrink: 0; margin: 0; background-color: var(--page); border-color: var(--control-border); }
.account-shell .form-check-label { padding: .25rem 0; }
.account-shell .form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.account-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.account-page-heading p { overflow-wrap: anywhere; }
.account-plan { color: var(--muted); font-size: .85rem; }
.account-navigation { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 24px; }
.account-navigation a { display: inline-flex; align-items: center; gap: 8px; }
.account-navigation a .ui-icon { width: 18px; height: 18px; margin: 0; }
.account-navigation a[aria-current="page"] { font-weight: 650; }
.account-navigation form { margin-left: auto; }
.account-link-icon { margin-left: .35em; }
.statistics-filter { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 24px 0; }
.statistics-filter label { font-size: .85rem; }
.statistics-filter select { width: auto; min-width: 150px; }
.account-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.account-stat { border: 1px solid var(--line); border-radius: 4px; padding: 18px; min-width: 0; }
.account-stat p { color: var(--muted); font-size: .8rem; margin-bottom: 6px; }
.account-stat strong { display: block; font-size: 1.8rem; line-height: 1.3; overflow-wrap: anywhere; }
.account-stat span { display: block; margin-top: 5px; font-size: .72rem; color: var(--muted); }
.account-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.key-create-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 20px 0 12px; }
.key-create-form > div { flex: 1; min-width: 180px; }
.key-create-form .form-control, .key-create-form > .btn { min-height: 44px; height: 2.75rem; padding-top: .5rem; padding-bottom: .5rem; }
.key-create-form > .btn { display: inline-flex; align-items: center; justify-content: center; }
.key-delete-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 12px; border: 0; border-radius: 4px; background: transparent; color: var(--control-border); }
.key-delete-button:is(:hover, :focus-visible) { color: var(--error-border); }
.key-delete-button .ui-icon { width: 20px; height: 20px; margin: 0; pointer-events: none; }
.key-copy-row { display: flex; gap: 12px; }
.key-copy-row input { min-width: 0; font-family: var(--bs-font-monospace); font-size: .8rem; }
.key-copy-row button { flex-shrink: 0; }
.account-table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); --bs-table-hover-bg: transparent; margin-bottom: 0; font-size: .875rem; }
.account-table th, .account-table td { padding: 12px 10px; vertical-align: middle; }
.account-table th { font-weight: 600; }
.account-table td { overflow-wrap: anywhere; }
.account-table code { color: var(--muted); white-space: nowrap; }
.account-table .btn { white-space: nowrap; }
.reference-table { --bs-table-border-color: var(--line-strong); }
.reference-table th, .reference-table td { border-inline-end: 1px solid var(--line-strong); }
.reference-table tr > :last-child { border-inline-end: 0; }
.reference-table thead th { padding: 0; background: var(--surface); border-bottom-width: 2px; }
.reference-sort { display: inline-flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 12px 10px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; text-align: inherit; white-space: nowrap; }
.reference-sort:hover { background: var(--surface-blue); }
.reference-sort:focus-visible { outline-offset: -3px; }
.reference-sort .reference-sort-icon { width: 14px; height: 14px; margin: 0; visibility: hidden; }
.reference-table [aria-sort="ascending"] .reference-sort-icon { visibility: visible; transform: rotate(-90deg); }
.reference-table [aria-sort="descending"] .reference-sort-icon { visibility: visible; transform: rotate(90deg); }
.statistics-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 13px 18px; font-size: .85rem; margin: 20px 0 0; }
.statistics-list dt { font-weight: 400; }
.statistics-list dd { margin: 0; font-weight: 600; }
@media (max-width: 991.98px) {
    .header-inner { min-height: 72px; flex-wrap: wrap; gap: 0; padding-top: 15px; padding-bottom: 15px; }
    .header-actions { margin-left: auto; gap: 8px; }
    .menu-toggle { display: inline-flex; }
    .primary-nav { display: none; order: 3; flex-basis: 100%; padding-top: 20px; margin-top: 15px; border-top: 1px solid var(--line); align-items: stretch; gap: 4px; }
    .primary-nav.is-open { display: flex; flex-direction: column; }
    .primary-nav a { padding: 10px 0; }
    .primary-nav .btn { margin-top: 8px; padding: 11px 18px; }
    .hero-grid { gap: 32px; }
    .capability-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-benefits { gap: 12px; flex-wrap: wrap; }
    .hero { padding-top: 50px; }
    .developer-layout { gap: 35px; }
    .faq-layout { gap: 35px; }
}
@media (max-width: 767.98px) {
    .account-shell { padding: 28px 0; }
    .account-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .account-columns { grid-template-columns: 1fr; gap: 0; }
    .account-card { padding: 20px; }
    .account-navigation { gap: 12px 18px; }
    .account-navigation form { margin-left: 0; }
    .key-create-form > div, .key-create-form > button { flex-basis: 100%; }
    .key-copy-row { flex-wrap: wrap; }
    .key-copy-row input { flex-basis: 100%; }
    .container { padding-right: 20px; padding-left: 20px; }
    .brand { font-size: 1.15rem; }
    .hero { padding: 42px 0 38px; }
    .hero-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "preview"; gap: 33px; }
    .hero-copy { padding-bottom: 0; }
    h1 { max-width: 500px; }
    .hero-description { font-size: 1rem; max-width: 100%; }
    .hero-actions { gap: 17px; }
    .hero-benefits { margin-top: 23px; }
    .preview-code pre { font-size: .875rem; padding: 14px 16px; }
    .code-tabs { gap: 8px; }
    .section { padding: 48px 0; }
    .section-title-row { display: block; }
    .section-title-row > a { display: inline-block; margin-top: 16px; }
    .developer-layout, .faq-layout { grid-template-columns: 1fr; gap: 25px; }
    .metric-card { padding: 21px; }
    .metric-number { margin-bottom: 16px; }
    .pricing-note { margin-bottom: 26px; }
    .saving-note { display: block; margin: 10px 0 0; }
    .plan-card { padding: 25px; }
    .plan-description { min-height: 0; }
    .closing-inner { flex-direction: column; align-items: flex-start; }
    .footer-top, .footer-bottom { flex-direction: column; }
    .footer-nav { gap: 18px; }
}
@media (max-width: 389.98px) {
    h1 { font-size: 2rem; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 15px; }
    .hero-benefits { font-size: .73rem; }
    .demo-input-row { flex-wrap: wrap; }
    .demo-input-row .form-control, .demo-input-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
    .copy-button.is-copy-flashing .ui-icon { animation: copy-icon-flash 150ms ease-out; }
    html.theme-changing, html.theme-changing *, html.theme-changing *::before, html.theme-changing *::after {
        transition-property: background-color, border-color, color, fill, stroke;
        transition-duration: 150ms;
        transition-timing-function: ease;
    }
    html.theme-changing .theme-within path {
        transition-property: transform, fill;
        transition-duration: 150ms;
        transition-timing-function: cubic-bezier(0, 0, 0, 1.25), ease;
    }
}

@keyframes copy-icon-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

.documentation-code { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px; overflow-x: auto; font-size: .875rem; line-height: 24px; }
.api-documentation code { color: var(--ink); }
.api-documentation .documentation-code code { white-space: pre; }

.brand { align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 700; }
.brand-mark { display: block; flex: 0 0 24px; }
.brand b { color: var(--blue); }
.theme-toggle { width: 36px; height: 36px; min-height: 36px; border: 1px solid var(--line-strong); border-radius: 4px; background: transparent; }
.theme-toggle .ui-icon { width: 18px; height: 18px; }
.theme-sun, [data-bs-theme="dark"] .theme-moon { display: none; }
[data-bs-theme="dark"] .theme-sun { display: inline-block; }
.btn-secondary { background: var(--page); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover, .btn-secondary:active { background: var(--surface); color: var(--ink); border-color: var(--focus); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer-about p { margin: 12px 0 0; max-width: 280px; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-column h2 { font-size: .875rem; font-weight: 700; letter-spacing: normal; margin: 0 0 4px; }
.footer-column a { color: var(--ink); }
.site-footer .footer-column a { text-decoration: none; }
.site-footer .footer-column a:hover { text-decoration: underline; }
.site-footer .footer-bottom { margin-top: 40px; padding: 20px 0 0; }
.site-footer .footer-preview-note { flex-basis: auto; }
@media (min-width: 992px) {
    .site-header .header-inner { min-height: 64px; padding-top: 10px; padding-bottom: 10px; gap: 20px; }
    .primary-nav { justify-content: flex-start; gap: 24px; margin-left: 24px; }
    .primary-nav .account-signin { margin-left: auto; }
    .primary-nav a:not(.btn) { font-size: .9375rem; }
}
@media (max-width: 767.98px) {
    .brand { font-size: 1rem; gap: 8px; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .footer-about { grid-column: 1 / -1; }
    .site-footer .footer-bottom { gap: 12px; align-items: flex-start; }
}