/* Syidax website — shared visual system.
   One neutral shell for every product. The product accent is the only variable:
   it colors links, active states, focus rings and primary actions, nothing else. */
@font-face { font-family:'Pretendard'; src:url('./assets/fonts/PretendardVariable.woff2') format('woff2'); font-style:normal; font-weight:45 920; font-display:swap; }

:root {
  --font-sans:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif;
  --font-mono:ui-monospace,'Cascadia Code','SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --header-h:56px; --sidebar-w:272px; --toc-w:216px; --gutter:48px;
  --radius-s:6px; --radius-m:8px; --radius-l:12px;
  --bg:#fff; --surface:#fafafa; --surface-2:#f4f4f5; --hover:#f4f4f5; --line:#e4e4e7; --line-strong:#d4d4d8;
  --text:#18181b; --muted:#52525b; --faint:#71717a; --code-bg:#fafafa;
  --viz-1:#2f7fd3; --viz-2:#23b394; --viz-3:#9cc3ea; --viz-4:#b6e6d8; --viz-5:#1f5fa8; --viz-6:#d7e7f6;
  --positive:#15803d; --negative:#dc2626;
  --shadow-s:0 1px 2px rgb(24 24 27 / .06);
  --shadow-m:0 4px 16px -4px rgb(24 24 27 / .12),0 1px 3px rgb(24 24 27 / .06);
  --shadow-l:0 24px 64px -16px rgb(24 24 27 / .28),0 2px 8px rgb(24 24 27 / .08);
  --token-tag:#116329; --token-attr:#0550ae; --token-string:#0a3069;
  color-scheme:light;
}
html[data-theme="dark"] {
  --bg:#0f0f11; --surface:#151518; --surface-2:#1c1c20; --hover:#1c1c20; --line:#27272c; --line-strong:#38383f;
  --text:#ededef; --muted:#a1a1aa; --faint:#80808b; --code-bg:#141417;
  --viz-1:#5aa6f2; --viz-2:#39cfb0; --viz-3:#3a6a9b; --viz-4:#2a7a6a; --viz-5:#8fc2f7; --viz-6:#243a55;
  --positive:#4ade80; --negative:#f87171;
  --shadow-s:0 1px 2px rgb(0 0 0 / .4);
  --shadow-m:0 4px 16px -4px rgb(0 0 0 / .5),0 1px 3px rgb(0 0 0 / .4);
  --shadow-l:0 24px 64px -16px rgb(0 0 0 / .7),0 2px 8px rgb(0 0 0 / .4);
  --token-tag:#7ee787; --token-attr:#79c0ff; --token-string:#a5d6ff;
  color-scheme:dark;
}
body { --accent:#5a4fcf; --accent-hover:#4a40b8; --accent-ink:#4036a8; --on-accent:#fff; }
body[data-product="charts"] { --accent:#0b7285; --accent-hover:#0a6577; --accent-ink:#0a5f70; }
body[data-product="grid"] { --accent:#1b7f4b; --accent-hover:#166a3e; --accent-ink:#146a3f; }
html[data-theme="dark"] body { --accent:#a29bff; --accent-hover:#b8b2ff; --accent-ink:#c4bfff; --on-accent:#13112b; }
html[data-theme="dark"] body[data-product="charts"] { --accent:#3fc7de; --accent-hover:#63d5e8; --accent-ink:#7fdbeb; --on-accent:#062a31; }
html[data-theme="dark"] body[data-product="grid"] { --accent:#5bd48c; --accent-hover:#7ee0a5; --accent-ink:#8fe6b2; --on-accent:#06281a; }
body {
  --accent-soft:color-mix(in srgb,var(--accent) 9%,var(--bg));
  --accent-ring:color-mix(in srgb,var(--accent) 30%,transparent);
  --accent-line:color-mix(in srgb,var(--accent) 35%,var(--line));
}

/* Core and Chart use section tabs. Grid retains its document outline. */
body:is([data-product="core"],[data-product="charts"]) :is(.site-layout,.reference-layout) { grid-template-columns:var(--sidebar-w) minmax(0,1fr); }
body:is([data-product="core"],[data-product="charts"]) .page-outline { display:none; }
.doc-section-tabs {
  position:sticky; top:var(--header-h); z-index:20; display:flex; gap:8px;
  max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin;
  margin-top:32px; padding:8px 0 0; background:var(--bg); border-bottom:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + 12px);
}
.doc-section-tabs > [role="tab"] {
  flex:0 0 auto; position:relative; padding:12px 18px 14px; border-radius:8px 8px 0 0;
  white-space:nowrap; font-size:14px; font-weight:500; line-height:1.5; color:var(--muted);
  border-bottom:2px solid transparent;
}
.doc-section-tabs > [role="tab"]:hover { color:var(--text); background:var(--surface); }
.doc-section-tabs > [role="tab"][aria-selected="true"] { color:var(--accent-ink); border-bottom-color:var(--accent); background:var(--accent-soft); font-weight:650; }
.doc-section-tabs > [role="tab"]:focus-visible { outline-offset:-3px; }
body #main-content section.doc-tab-panel { padding-top:28px; margin-top:0; border-top:0; scroll-margin-top:calc(var(--header-h) + 76px); }
@media (max-width:600px) {
  .doc-section-tabs { gap:2px; margin-top:24px; }
  .doc-section-tabs > [role="tab"] { padding:11px 12px 13px; font-size:13px; }
}

/* Base */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:400 15px/1.7 var(--font-sans); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; font-synthesis:none; word-break:keep-all; overflow-wrap:break-word; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:0; padding:0; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:not-allowed; }
a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
svg { display:block; flex-shrink:0; }
h1,h2,h3,h4 { margin:0; font-weight:600; line-height:1.3; letter-spacing:-.01em; }
:not(pre) > code { font-family:var(--font-mono); font-size:.86em; padding:.12em .4em; border:1px solid var(--line); border-radius:4px; background:var(--surface-2); color:var(--text); }
kbd { display:inline-block; font:500 11px/1 var(--font-sans); color:var(--faint); background:var(--bg); border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:3px 5px; white-space:nowrap; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
::selection { background:color-mix(in srgb,var(--accent) 22%,var(--bg)); }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-64px; left:16px; z-index:200; padding:10px 14px; border-radius:var(--radius-s); background:var(--text); color:var(--bg); font-size:13px; font-weight:600; transition:top .15s; }
.skip-link:focus { top:12px; }
.noscript { padding:24px var(--gutter); color:var(--muted); }

/* Shared action styles */
:is(.core-start-link,.core-download-button,.charts-primary-link,.grid-primary-action,.ai-run) {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 16px;
  border:1px solid transparent; border-radius:var(--radius-s); background:var(--accent); color:var(--on-accent);
  font-size:13.5px; font-weight:600; line-height:1; white-space:nowrap; box-shadow:var(--shadow-s); transition:background .15s;
}
:is(.core-start-link,.core-download-button,.charts-primary-link,.grid-primary-action,.ai-run):hover { background:var(--accent-hover); color:var(--on-accent); }
:is(.core-browse-link,.grid-secondary-action,.grid-export-button,.ai-new,.ai-cancel,.charts-no-results button,.line-install-files a) {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 14px;
  border:1px solid var(--line-strong); border-radius:var(--radius-s); background:var(--bg); color:var(--text);
  font-size:13.5px; font-weight:500; line-height:1; white-space:nowrap; transition:background .15s,border-color .15s;
}
:is(.core-browse-link,.grid-secondary-action,.grid-export-button,.ai-new,.ai-cancel,.charts-no-results button,.line-install-files a):hover { background:var(--hover); color:var(--text); }
:is(.core-browse-link,.grid-secondary-action,.line-install-files a) svg { color:var(--faint); }

/* Header */
.site-header { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:12px; height:var(--header-h); padding:0 20px; background:color-mix(in srgb,var(--bg) 86%,transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.header-brand { display:flex; align-items:center; gap:6px; min-width:0; }
.wordmark { display:inline-flex; align-items:center; gap:9px; padding:4px 2px; border-radius:var(--radius-s); color:var(--text); white-space:nowrap; }
.brand-symbol { display:flex; align-items:flex-end; gap:2.5px; height:16px; transform:skewX(-12deg); }
.brand-symbol i { display:block; width:3.5px; border-radius:1px; background:var(--accent); }
.brand-symbol i:nth-child(1) { height:8px; opacity:.5; }
.brand-symbol i:nth-child(2) { height:12px; opacity:.75; }
.brand-symbol i:nth-child(3) { height:16px; }
.brand-name { font-size:16px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.brand-product { margin-left:-4px; font-size:16px; font-weight:500; letter-spacing:-.02em; line-height:1; color:var(--muted); white-space:nowrap; }
.product-nav:empty { display:none; }
.product-nav { position:relative; display:flex; align-self:stretch; align-items:stretch; gap:2px; margin-left:12px; padding-left:16px; }
.product-nav::before { content:""; position:absolute; left:0; top:50%; width:1px; height:20px; background:var(--line); transform:translateY(-50%); }
.product-nav > a { position:relative; display:flex; align-items:center; padding:0 10px; font-size:13.5px; font-weight:500; color:var(--muted); transition:color .15s; }
.product-nav > a:hover { color:var(--text); }
.product-nav > a[aria-current="page"] { color:var(--text); font-weight:600; }
.product-nav > a[aria-current="page"]::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; border-radius:2px 2px 0 0; background:var(--accent); }
.header-end { display:flex; align-items:center; gap:8px; margin-left:auto; }
.header-links { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.site-header .icon-button, .header-brand { flex-shrink:0; }
.search-trigger { display:flex; align-items:center; gap:8px; height:32px; min-width:236px; padding:0 6px 0 10px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface); color:var(--faint); font-size:13px; transition:border-color .15s,color .15s; }
.search-trigger:hover { border-color:var(--line-strong); color:var(--muted); }
.search-label { flex:1; text-align:left; white-space:nowrap; }
.search-icon { display:inline-flex; color:inherit; }
.docs-header-nav { display:flex; align-items:center; gap:2px; margin:0 4px; }
.docs-header-nav a { padding:6px 10px; border-radius:var(--radius-s); font-size:13.5px; font-weight:500; color:var(--muted); transition:background .12s,color .12s; }
.docs-header-nav a:hover { color:var(--text); background:var(--hover); }
.docs-header-nav a[aria-current="page"] { color:var(--text); font-weight:600; }
.icon-button { display:grid; place-items:center; width:32px; height:32px; border:1px solid transparent; border-radius:var(--radius-s); color:var(--muted); transition:background .12s,color .12s,border-color .12s; }
.icon-button:hover { background:var(--hover); color:var(--text); }
#theme-toggle { border-color:var(--line); background:var(--bg); }
#theme-toggle:hover { border-color:var(--line-strong); background:var(--hover); }
.mobile-menu { display:none; }

/* Layout */
.site-layout { display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--toc-w); min-height:calc(100vh - var(--header-h)); }
body[data-view="home"] .site-layout, body[data-ai-page="true"] .site-layout, body[data-core-page="components"] .site-layout { grid-template-columns:var(--sidebar-w) minmax(0,1fr); }
main { min-width:0; padding:40px var(--gutter) 96px; outline:0; }
/* Let documentation and code examples grow with the space between the sidebars. */
main > article { width:100%; min-width:0; margin:0 auto; }
body[data-view="home"] main { padding:0; container-type:inline-size; }
body[data-view="home"] .page-outline, body[data-ai-page="true"] .page-outline, body[data-core-page="components"] .page-outline { display:none; }
.loading-page { padding:40px 0; font-size:14px; color:var(--faint); }

/* Sidebar */
.sidebar { position:sticky; top:var(--header-h); height:calc(100dvh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain; padding:20px 14px 48px 20px; border-right:1px solid var(--line); background:var(--bg); scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.theme-light-icon,.theme-dark-icon { display:contents; }
:root:not([data-theme="dark"]) .theme-dark-icon,:root[data-theme="dark"] .theme-light-icon { display:none; }
:root[data-promo-dismissed="chart-grid"] [data-site="design-system"] .sidebar-promo,
:root[data-promo-dismissed="design-system"] [data-site="chart-grid"] .sidebar-promo { display:none; }
.sidebar-search { display:flex; align-items:center; gap:8px; height:32px; margin:0 0 18px; padding:0 10px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface); color:var(--faint); transition:border-color .15s,box-shadow .15s; }
.sidebar-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
.sidebar-search input { flex:1; min-width:0; border:0; outline:0; background:none; font-size:13px; color:var(--text); }
.sidebar-search input::placeholder { color:var(--faint); }
.core-nav-heading { margin:22px 0 6px; padding:0 10px; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); }
.core-sidebar-guides .core-nav-heading:first-child { margin-top:0; }
.core-sidebar-guides a, .nav-group a { display:flex; align-items:center; gap:8px; min-height:30px; margin:1px 0; padding:4px 10px; border-radius:var(--radius-s); font-size:13.5px; line-height:1.5; color:var(--muted); transition:background .12s,color .12s; }
.core-sidebar-guides a:hover, .nav-group a:hover { background:var(--hover); color:var(--text); }
.core-sidebar-guides a[aria-current="page"], .nav-group a[aria-current="page"] { background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }
.core-sidebar-guides a svg { margin-left:auto; color:var(--faint); }
.core-menu-tools { display:flex; align-items:center; justify-content:space-between; padding:14px 10px 6px; font-size:11.5px; color:var(--faint); }
.core-menu-tools button { font-size:11.5px; font-weight:500; color:var(--muted); }
.core-menu-tools button:hover { color:var(--accent-ink); }
.nav-group { margin:2px 0 4px; }
.nav-group h2 { margin:0; font-size:inherit; letter-spacing:0; }
.core-group-toggle { display:flex; align-items:center; gap:8px; width:100%; min-height:30px; padding:4px 10px; border-radius:var(--radius-s); text-align:left; font-size:13px; font-weight:600; color:var(--text); transition:background .12s; }
.core-group-toggle:hover { background:var(--hover); }
.core-group-toggle:disabled { cursor:default; background:none; }
.core-group-toggle small { margin-left:auto; font-size:11px; font-weight:500; color:var(--faint); font-variant-numeric:tabular-nums; }
.core-group-toggle svg { color:var(--faint); transition:transform .15s; }
.core-group-toggle[aria-expanded="true"] svg { transform:rotate(90deg); }
.nav-group > div { margin:0 0 4px 15px; padding:2px 0 2px 6px; border-left:1px solid var(--line); }
.pro-badge { display:inline-flex; align-items:center; margin-left:auto; padding:0 5px; border:1px solid var(--line); border-radius:4px; background:var(--surface-2); font-size:9.5px; font-weight:600; line-height:16px; letter-spacing:.06em; color:var(--faint); }
.pro-badge.large { margin-left:0; padding:0 7px; font-size:11px; line-height:20px; vertical-align:middle; }
.nav-empty { padding:12px 10px; font-size:13px; line-height:1.7; color:var(--faint); }
.sidebar-backdrop { display:none; }

/* Page outline */
.page-outline { position:sticky; top:var(--header-h); align-self:start; max-height:calc(100dvh - var(--header-h)); overflow-y:auto; padding:44px 24px 40px 4px; font-size:12.5px; }
.outline-title { margin-bottom:12px; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); }
.outline-links { display:flex; flex-direction:column; border-left:1px solid var(--line); }
.outline-links a { margin-left:-1px; padding:5px 0 5px 14px; border-left:1px solid transparent; line-height:1.5; color:var(--muted); transition:color .12s,border-color .12s; }
.outline-links a:hover { color:var(--text); }
.outline-links a[aria-current="location"] { color:var(--accent-ink); border-left-color:var(--accent); font-weight:600; }

/* Document primitives shared by Core, Charts and Grid pages */
.breadcrumb, .button-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:20px; font-size:12.5px; color:var(--faint); }
.breadcrumb a:hover, .button-breadcrumb a:hover { color:var(--accent-ink); }
.breadcrumb svg, .button-breadcrumb svg { color:var(--line-strong); }
.page-title-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.page-title-row h1 { font-size:34px; font-weight:700; letter-spacing:-.025em; line-height:1.2; }
.lead { max-width:640px; margin:0 0 20px; font-size:17px; line-height:1.65; color:var(--muted); }
.doc-section { margin-top:52px; scroll-margin-top:calc(var(--header-h) + 24px); }
.section-heading { display:flex; align-items:baseline; gap:8px; margin-bottom:12px; }
.section-heading h2 { font-size:22px; font-weight:600; letter-spacing:-.015em; line-height:1.3; }
.anchor-link { font-size:16px; color:var(--faint); opacity:0; transition:opacity .12s; }
.section-heading:hover .anchor-link, .anchor-link:focus-visible { opacity:1; }
.section-description { margin:0 0 20px; font-size:15px; line-height:1.75; color:var(--muted); }
.subheading { margin:32px 0 12px; font-size:16px; font-weight:600; }
.example-note { margin:24px 0 10px; font-size:13px; color:var(--faint); }
.doc-footer { display:flex; justify-content:space-between; gap:16px; margin-top:56px; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:var(--faint); }
.back-to-top { display:inline-flex; align-items:center; gap:5px; font-weight:500; color:var(--muted); }
.back-to-top:hover { color:var(--text); }

.code-panel { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--code-bg); }
.code-label { position:absolute; top:11px; left:16px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.copy-button { position:absolute; top:8px; right:8px; display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 9px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--bg); color:var(--muted); font-size:12px; font-weight:500; box-shadow:var(--shadow-s); transition:color .12s,border-color .12s; }
.copy-button:hover { color:var(--text); border-color:var(--line-strong); }
.code-panel pre { margin:0; padding:40px 18px 18px; overflow:auto; font:12.5px/1.75 var(--font-mono); color:var(--text); tab-size:2; }
.code-panel code { font:inherit; padding:0; border:0; background:none; }
.token-tag { color:var(--token-tag); }
.token-attr { color:var(--token-attr); }
.token-string { color:var(--token-string); }

.api-scroll, .core-table-scroll, .line-table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-m); }
:is(.api-table,.core-doc-table,.line-api-table,.line-table-scroll table) { width:100%; border-collapse:collapse; text-align:left; font-size:13.5px; line-height:1.6; }
:is(.api-table,.core-doc-table,.line-api-table,.line-table-scroll table) thead th { padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface); font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
:is(.api-table,.core-doc-table,.line-api-table,.line-table-scroll table) :is(td,tbody th) { padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--muted); }
:is(.api-table,.core-doc-table,.line-api-table,.line-table-scroll table) tbody th { font-weight:500; color:var(--text); white-space:nowrap; }
:is(.api-table,.core-doc-table,.line-api-table,.line-table-scroll table) tr:last-child :is(td,th) { border-bottom:0; }
:is(.api-table,.core-doc-table,.line-api-table) td:first-child { color:var(--text); }
:is(.api-table,.core-doc-table,.line-api-table) td code { padding:0; border:0; background:none; font-size:12.5px; color:inherit; }
.api-table td:first-child code { color:var(--accent-ink); }

:is(.info-note,.core-doc-callout,.button-guidance-note,.line-note) { display:flex; gap:10px; margin:20px 0 0; padding:12px 16px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius-s); background:var(--surface); font-size:13.5px; line-height:1.7; color:var(--muted); }
:is(.info-note,.core-doc-callout,.button-guidance-note,.line-note) svg { flex-shrink:0; margin-top:3px; color:var(--accent); }
:is(.info-note,.core-doc-callout,.button-guidance-note,.line-note) p { margin:0; }

/* Reference-page parts shared by the Button (Core) and Line chart (Chart & Grid) pages */
.button-page-links, .line-links { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-bottom:28px; font-size:13px; color:var(--muted); }
.button-page-links code, .line-links code { padding:3px 8px; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--bg)); border-radius:4px; background:var(--accent-soft); font:12.5px var(--font-mono); color:var(--accent-ink); }
.button-page-links a, .line-links a { display:inline-flex; align-items:center; gap:5px; font-weight:500; }
.button-page-links a:hover, .line-links a:hover { color:var(--accent-ink); }
.button-preview-heading i, .line-live i { width:7px; height:7px; border-radius:50%; background:var(--positive); box-shadow:0 0 0 3px color-mix(in srgb,var(--positive) 18%,transparent); }
/* Tooltips invert the page surface, so their syntax colors need the opposite palette. */
.api-example-tooltip { --token-tag:#7ee787; --token-attr:#79c0ff; --token-string:#a5d6ff; position:fixed; z-index:1000; width:max-content; max-width:min(560px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:14px 16px; border:1px solid color-mix(in srgb,var(--bg) 25%,var(--text)); border-radius:var(--radius-m); background:var(--text); color:var(--bg); box-shadow:var(--shadow-l); }
html[data-theme="dark"] .api-example-tooltip { --token-tag:#116329; --token-attr:#0550ae; --token-string:#0a3069; }
.api-example-tooltip .api-tooltip-title { display:block; font:700 13px var(--font-mono); }
.api-tooltip-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.api-tooltip-copy { display:inline-flex; align-items:center; justify-content:center; flex:none; width:28px; height:28px; margin:-4px -4px -4px 0; padding:0; border:1px solid transparent; border-radius:5px; background:transparent; color:inherit; opacity:.8; cursor:pointer; }
.api-tooltip-copy:hover, .api-tooltip-copy:focus-visible { opacity:1; background:color-mix(in srgb,currentColor 10%,transparent); border-color:color-mix(in srgb,currentColor 25%,transparent); }
.api-tooltip-copy:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.api-example-tooltip .api-tooltip-description { margin:8px 0 12px; max-width:48ch; font:13px/1.65 var(--font-sans); color:inherit; overflow-wrap:anywhere; }
.api-example-tooltip .api-code-focus { background:#32363c; color:#dfe4eb; font-weight:600; border-radius:3px; box-shadow:0 0 0 1px #454c57; text-decoration:none; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
html[data-theme="dark"] .api-example-tooltip .api-code-focus { background:#e7ebf0; color:#344054; box-shadow:0 0 0 1px #d3d9e1; }
.api-example-tooltip pre { margin:10px 0 0; padding:3px; max-height:min(360px,calc(100dvh - 180px)); overflow:auto; font:12.5px/1.7 var(--font-mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.api-example-tooltip[hidden] { display:none; }

/* Menu-only pages */
.empty-page .pending-hero { margin-bottom:28px; }
.pending-tag { display:inline-flex; margin-top:4px; padding:3px 8px; border:1px solid var(--line); border-radius:4px; background:var(--surface-2); font:12.5px var(--font-mono); color:var(--muted); }
.empty-state { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:32px; border:1px dashed var(--line-strong); border-radius:var(--radius-m); background:var(--surface); }
.pending-label { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.pending-label svg { color:var(--accent); }
.empty-state p { margin:0; font-size:15px; color:var(--muted); }
.directory-return { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:13.5px; font-weight:600; color:var(--accent-ink); transition:gap .15s; }
.directory-return:hover { gap:10px; }

/* Footer: a promotion of the other Syidax service, then the site row. Hidden in the AI workspace. */
.site-footer { border-top:1px solid var(--line); background:var(--surface); }
body[data-ai-page="true"] .site-footer { display:none; }
.footer-row { display:flex; align-items:center; gap:24px; width:min(1200px,100% - 2 * var(--gutter)); margin:0 auto; padding:24px 0 32px; font-size:12.5px; color:var(--faint); }
.footer-wordmark { display:inline-flex; align-items:baseline; gap:5px; font-size:14px; font-weight:700; letter-spacing:-.02em; color:var(--text); }
.footer-wordmark span { font-weight:500; color:var(--muted); }
.footer-row p { margin:0; }
.footer-row nav { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-left:auto; }
.footer-row nav a { display:inline-flex; align-items:center; gap:4px; font-weight:500; color:var(--muted); }
.footer-row nav a:hover { color:var(--text); }
.footer-row > span { font-size:12px; }

/* Cross-promotion. The promoted service brings its own accent (Core indigo, Chart & Grid teal). */
[data-promo="chart-grid"] { --promo-accent:#0b7285; --promo-on:#fff; }
[data-promo="design-system"] { --promo-accent:#5a4fcf; --promo-on:#fff; }
html[data-theme="dark"] [data-promo="chart-grid"] { --promo-accent:#3fc7de; --promo-on:#062a31; }
html[data-theme="dark"] [data-promo="design-system"] { --promo-accent:#a29bff; --promo-on:#13112b; }
[data-promo] { --promo-soft:color-mix(in srgb,var(--promo-accent) 14%,transparent); --promo-line:color-mix(in srgb,var(--promo-accent) 30%,var(--line)); --promo-ink:color-mix(in srgb,var(--promo-accent) 78%,var(--text)); }
.site-promo-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--promo-ink); }
.site-promo-eyebrow i { width:6px; height:6px; border-radius:50%; background:var(--promo-accent); box-shadow:0 0 0 3px var(--promo-soft); }
.site-promo { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,340px); align-items:center; gap:28px 56px; width:min(1200px,100% - 2 * var(--gutter)); margin:40px auto 8px; padding:32px 40px; overflow:hidden; border:1px solid var(--promo-line); border-radius:var(--radius-l); background:radial-gradient(720px 280px at 100% 0%,var(--promo-soft),transparent 70%),var(--bg); box-shadow:var(--shadow-s); }
.site-promo h2 { margin:12px 0 8px; font-size:24px; font-weight:700; letter-spacing:-.025em; line-height:1.3; }
.site-promo p { max-width:520px; margin:0 0 22px; font-size:15px; line-height:1.7; color:var(--muted); }
.site-promo-cta { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:var(--radius-s); background:var(--promo-accent); color:var(--promo-on); font-size:13.5px; font-weight:600; box-shadow:var(--shadow-s); transition:filter .15s,gap .15s; }
.site-promo-cta:hover { filter:brightness(1.08); gap:11px; }
.site-promo-art svg { width:100%; height:auto; filter:drop-shadow(0 12px 24px color-mix(in srgb,var(--promo-accent) 18%,transparent)); }
/* Sticky offsets cancel the sidebar's 48px bottom padding so the card sits on the visible edge. */
.sidebar-promo { position:sticky; bottom:-48px; z-index:2; margin:20px 0 -32px; padding:16px 0; background:linear-gradient(to bottom,transparent,var(--bg) 16px); }
.sidebar-promo > a { display:flex; flex-direction:column; gap:5px; padding:12px 34px 12px 12px; border:1px solid var(--promo-line); border-radius:var(--radius-m); background:radial-gradient(260px 120px at 100% 0%,var(--promo-soft),transparent 70%),var(--bg); transition:border-color .15s,box-shadow .15s; }
.sidebar-promo > a:hover { border-color:var(--promo-accent); box-shadow:var(--shadow-m); }
.sidebar-promo .site-promo-eyebrow { font-size:10.5px; }
.sidebar-promo strong { font-size:13px; font-weight:600; line-height:1.45; color:var(--text); }
.sidebar-promo-cta { display:inline-flex; align-items:center; gap:4px; margin-top:2px; font-size:12px; font-weight:600; color:var(--promo-ink); }
.sidebar-promo-close { position:absolute; top:24px; right:8px; display:grid; place-items:center; width:22px; height:22px; border-radius:4px; color:var(--faint); }
.sidebar-promo-close:hover { background:var(--hover); color:var(--text); }

/* Search dialog and toast */
.search-dialog { width:min(640px,calc(100vw - 32px)); max-height:min(76vh,640px); margin:12vh auto 0; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-l); background:var(--bg); color:var(--text); box-shadow:var(--shadow-l); }
.search-dialog::backdrop { background:rgb(24 24 27 / .45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.dialog-search { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); color:var(--faint); }
.dialog-search input { flex:1; min-width:0; border:0; outline:0; background:none; font-size:16px; color:var(--text); }
.dialog-search input::placeholder { color:var(--faint); }
.dialog-close { padding:3px 6px; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; background:var(--surface); font-size:11px; font-weight:500; color:var(--faint); }
.dialog-close:hover { color:var(--text); }
.search-results { max-height:min(52vh,460px); overflow-y:auto; padding:8px; }
.search-result { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:var(--radius-s); }
.search-result:hover, .search-result:focus-visible { background:var(--hover); outline:0; }
.result-icon { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface); color:var(--muted); }
.search-result-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.search-result-main strong { font-size:13.5px; font-weight:500; }
.search-result-main small { font-size:12px; color:var(--faint); }
.dialog-footer { display:flex; justify-content:space-between; gap:12px; padding:10px 16px; border-top:1px solid var(--line); background:var(--surface); font-size:11.5px; color:var(--faint); }
.dialog-footer kbd { margin:0 2px; }
.toast { position:fixed; bottom:24px; left:50%; z-index:100; max-width:calc(100vw - 32px); padding:10px 16px; border-radius:var(--radius-m); background:var(--text); color:var(--bg); font-size:13px; font-weight:500; line-height:1.6; box-shadow:var(--shadow-m); opacity:0; pointer-events:none; transform:translate(-50%,8px); transition:opacity .15s,transform .15s; }
.toast.visible { opacity:1; transform:translate(-50%,0); }

/* Responsive */
@media (max-width:1240px) {
  :root { --gutter:36px; --sidebar-w:256px; }
  .site-layout { grid-template-columns:var(--sidebar-w) minmax(0,1fr); }
  .page-outline { display:none; }
}
@media (max-width:1024px) {
  .search-trigger { min-width:0; width:32px; padding:0; justify-content:center; }
  .search-label, .search-trigger kbd { display:none; }
  .docs-header-nav { margin:0; }
}
@media (max-width:800px) {
  :root { --header-h:96px; --gutter:20px; }
  .site-header { flex-wrap:wrap; align-content:center; gap:0 6px; padding:0 12px; }
  .site-header::after { content:""; flex-basis:100%; order:1; }
  .header-brand { flex:1; min-width:0; height:52px; }
  .header-end { display:contents; }
  .header-links { order:2; margin-left:auto; height:43px; }
  .site-header > .product-nav { order:2; height:43px; margin:0; padding:0; }
  .site-header > .product-nav::before { display:none; }
  .mobile-menu { display:grid; }
  .product-nav { margin-left:2px; padding-left:10px; }
  .product-nav > a { padding:0 7px; font-size:13px; }
  .docs-header-nav { display:none; }
  .site-layout, body[data-view="home"] .site-layout, body[data-ai-page="true"] .site-layout, body[data-core-page="components"] .site-layout { display:block; }
  .sidebar { position:fixed; top:var(--header-h); bottom:0; left:0; z-index:40; width:min(300px,86vw); height:auto; box-shadow:var(--shadow-l); transform:translateX(-100%); visibility:hidden; transition:transform .2s,visibility .2s; }
  .sidebar.open { transform:none; visibility:visible; }
  .sidebar-backdrop { display:block; position:fixed; inset:var(--header-h) 0 0; z-index:39; border:0; background:rgb(24 24 27 / .4); }
  main { padding:28px var(--gutter) 64px; }
  .page-title-row h1 { font-size:28px; }
  .lead { font-size:16px; }
  .footer-row { flex-wrap:wrap; gap:12px 20px; }
  .footer-row nav { width:100%; margin-left:0; }
  .site-promo { grid-template-columns:1fr; gap:24px; margin-top:28px; padding:24px 22px; }
  .site-promo h2 { font-size:21px; }
  .site-promo-art { max-width:340px; }
  .search-dialog { margin-top:6vh; }
}
@media (max-width:560px) {
  body:is([data-site="chart-grid"],[data-site="design-system"]) .brand-product { display:none; }
}
@media (max-width:480px) {
  .product-nav > a { padding:0 5px; font-size:12.5px; }
  .page-title-row h1 { font-size:26px; }
  .code-panel pre { padding:40px 14px 16px; font-size:12px; }
  .doc-footer { flex-direction:column; }
}
@media (max-width:359px) {
  .site-header .brand-product { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}