@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/geist.19f9c92546.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/geist-mono.684ad5b531.woff2) format("woff2")}
/* Clatter Labs Docs — layout modelled on Mintlify's docs (top bar + tabs, grouped sidebar, content,
   "On this page" TOC, API two-column pages), in the Clatter Labs design system: Geist, black/white,
   one green accent. Light is the default; dark is pure black with hairline borders. */
:root {
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --bg-muted: #f4f4f5;
  --fg: #0a0a0a;
  --fg-2: rgba(10, 10, 10, 0.74);
  --fg-3: rgba(10, 10, 10, 0.54);
  --fg-4: rgba(10, 10, 10, 0.36);
  --line: rgba(10, 10, 10, 0.08);
  --line-2: rgba(10, 10, 10, 0.14);
  --accent: #16a34a;
  --accent-fg: #15803d;
  --accent-soft: rgba(22, 163, 74, 0.09);
  --accent-line: rgba(22, 163, 74, 0.28);
  --code-bg: #fbfbfb;
  --inline-code: rgba(10, 10, 10, 0.05);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --top-h: 64px;
  --tabs-h: 44px;
  --header-h: calc(var(--top-h) + var(--tabs-h));
  --sidebar-w: 272px;
  --toc-w: 240px;
  --content-w: 736px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Geist (SIL OFL): the open match for docs.x.ai's proprietary "X VF" face; shared with the Console. */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* callouts */
  --note: #2563eb; --note-bg: rgba(37, 99, 235, 0.06); --note-line: rgba(37, 99, 235, 0.22);
  --warn: #b45309; --warn-bg: rgba(245, 158, 11, 0.08); --warn-line: rgba(245, 158, 11, 0.32);
  --danger: #dc2626; --danger-bg: rgba(220, 38, 38, 0.06); --danger-line: rgba(220, 38, 38, 0.25);
  --info: rgba(10, 10, 10, 0.7); --info-bg: rgba(10, 10, 10, 0.03); --info-line: rgba(10, 10, 10, 0.12);
  /* methods */
  --get: #16a34a; --get-bg: rgba(22, 163, 74, 0.1);
  --post: #2563eb; --post-bg: rgba(37, 99, 235, 0.1);
  --put: #d97706; --put-bg: rgba(217, 119, 6, 0.1);
  --del: #dc2626; --del-bg: rgba(220, 38, 38, 0.1);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #000000;
  --bg-soft: #050505;
  --bg-muted: #0d0d0d;
  --fg: #ffffff;
  --fg-2: rgba(255, 255, 255, 0.74);
  --fg-3: rgba(255, 255, 255, 0.52);
  --fg-4: rgba(255, 255, 255, 0.32);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --accent: #4ade80;
  --accent-fg: #4ade80;
  --accent-soft: rgba(74, 222, 128, 0.09);
  --accent-line: rgba(74, 222, 128, 0.3);
  --code-bg: #0a0a0a;
  --inline-code: rgba(255, 255, 255, 0.08);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 12px 32px rgba(0, 0, 0, 0.6);
  --note: #60a5fa; --note-bg: rgba(96, 165, 250, 0.07); --note-line: rgba(96, 165, 250, 0.25);
  --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, 0.07); --warn-line: rgba(251, 191, 36, 0.28);
  --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.07); --danger-line: rgba(248, 113, 113, 0.28);
  --info: rgba(255, 255, 255, 0.75); --info-bg: rgba(255, 255, 255, 0.03); --info-line: rgba(255, 255, 255, 0.14);
  --get: #4ade80; --get-bg: rgba(74, 222, 128, 0.12);
  --post: #60a5fa; --post-bg: rgba(96, 165, 250, 0.13);
  --put: #fbbf24; --put-bg: rgba(251, 191, 36, 0.12);
  --del: #f87171; --del-bg: rgba(248, 113, 113, 0.12);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; }
.icon { flex: none; display: inline-block; vertical-align: middle; }
::selection { background: var(--accent-soft); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--fg); color: var(--bg); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ------------------------------------------------------------- top bar + tabs */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 40; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); }
.topbar-row { height: var(--top-h); max-width: 1600px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -0.02em; font-size: 16px; flex: none; }
.brand img { width: 24px; height: 24px; }
.brand-docs { color: var(--fg-3); font-weight: 500; padding-left: 9px; border-left: 1px solid var(--line-2); line-height: 1; }
.topbar-search { margin-left: 28px; flex: 0 1 480px; min-width: 0; display: flex; align-items: center; gap: 8px; }
.search-trigger { flex: 1 1 auto; min-width: 0; height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 8px 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-soft); color: var(--fg-3); font-size: 14px; transition: border-color .2s var(--ease), background .2s var(--ease); }
.search-trigger:hover { border-color: var(--fg-4); }
.search-trigger span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; }
.kbd { font-family: var(--font); font-size: 11.5px; color: var(--fg-3); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; background: var(--bg); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav-ext { font-size: 14px; color: var(--fg-2); padding: 6px 10px; border-radius: 8px; }
.nav-ext:hover { color: var(--fg); }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 10px; color: var(--fg-2); }
.icon-btn:hover { background: var(--bg-muted); color: var(--fg); }
.theme-btn .moon { display: none; }
[data-theme="dark"] .theme-btn .sun { display: none; }
[data-theme="dark"] .theme-btn .moon { display: inline-block; }
.btn-primary { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px 0 15px; margin-left: 6px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 500; transition: opacity .2s; }
.btn-primary:hover { opacity: .86; }
.menu-btn, .search-mobile { display: none; }
.tabbar { height: var(--tabs-h); }
.tabbar-row { max-width: 1600px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: stretch; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.tabbar-row::-webkit-scrollbar { display: none; }
.top-tab { display: flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--fg-3); border-bottom: 2px solid transparent; white-space: nowrap; transition: color .2s; }
.top-tab:hover { color: var(--fg); }
.top-tab.active { color: var(--fg); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------- shell */
.shell { max-width: 1600px; margin: 0 auto; padding-top: var(--header-h); display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); }
.is-api .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) minmax(360px, 460px); }
.sidebar { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.sidebar-inner { padding: 28px 20px 48px 24px; }
.nav-group + .nav-group { margin-top: 26px; }
.nav-group-title { margin: 0 0 8px; padding-left: 12px; font-size: 13px; font-weight: 600; color: var(--fg); letter-spacing: -0.005em; }
.nav-group ul { list-style: none; margin: 0; padding: 0; }
.nav-link { display: flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; color: var(--fg-3); transition: color .15s, background .15s; }
.nav-link span:first-of-type { flex: 1; min-width: 0; }
.nav-link:hover { color: var(--fg); background: var(--bg-muted); }
.nav-link.active { color: var(--accent-fg); background: var(--accent-soft); font-weight: 500; }
.nav-icon { opacity: .8; }
.nav-method { flex: none; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .02em; padding: 1px 5px; border-radius: 6px; }
.nav-tag { flex: none; font-size: 10.5px; font-weight: 500; padding: 0 7px; border-radius: 999px; border: 1px solid var(--accent-line); color: var(--accent-fg); }
.m-get { color: var(--get); background: var(--get-bg); }
.m-post { color: var(--post); background: var(--post-bg); }
.m-put, .m-patch { color: var(--put); background: var(--put-bg); }
.m-delete { color: var(--del); background: var(--del-bg); }
.sidebar-backdrop { display: none; }

.main { min-width: 0; padding: 40px 48px 0; }
.page { max-width: var(--content-w); margin: 0 auto; }
.is-api .page { max-width: 720px; }
.is-wide .page { max-width: 880px; }

/* ------------------------------------------------------------- page header */
.page-head { margin-bottom: 30px; }
.page-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.eyebrow { margin: 0; font-size: 14px; font-weight: 600; color: var(--accent-fg); letter-spacing: -0.005em; }
.page-actions { display: flex; gap: 6px; }
.copy-page { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 9px; font-size: 13px; color: var(--fg-2); background: var(--bg); transition: border-color .15s, color .15s; }
.copy-page:hover { color: var(--fg); border-color: var(--fg-4); }
.copy-page.icon-only { padding: 0; width: 30px; justify-content: center; }
.copy-page.done { color: var(--accent-fg); border-color: var(--accent-line); }
.page-title { margin: 8px 0 0; font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -0.035em; }
.page-desc { margin: 10px 0 0; font-size: 18px; line-height: 1.6; color: var(--fg-3); letter-spacing: -0.01em; }

/* ------------------------------------------------------------- prose */
.prose { color: var(--fg-2); }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 18px; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a:not(.card):not(.anchor):not(.model-card):not(.price-link) { color: var(--fg); font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness .15s; }
.prose a:not(.card):not(.anchor):not(.model-card):not(.price-link):hover { text-decoration-thickness: 2px; }
.prose h2, .prose h3, .prose h4 { color: var(--fg); letter-spacing: -0.025em; position: relative; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h2 { font-size: 24px; line-height: 1.3; font-weight: 600; margin: 44px 0 14px; }
.prose h3 { font-size: 19px; line-height: 1.4; font-weight: 600; margin: 32px 0 10px; }
.prose h4 { font-size: 16px; font-weight: 600; margin: 26px 0 8px; }
.anchor { position: absolute; left: -26px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: var(--fg-3); opacity: 0; transition: opacity .15s; }
.heading:hover .anchor, .anchor:focus { opacity: 1; }
.anchor:hover { background: var(--bg-muted); color: var(--fg); }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin: 5px 0; padding-left: 4px; }
.prose li::marker { color: var(--fg-4); }
.prose ol li::marker { color: var(--fg-3); font-weight: 500; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.prose blockquote { margin: 0 0 18px; padding: 2px 0 2px 16px; border-left: 2px solid var(--line-2); color: var(--fg-3); }
.prose :not(pre) > code { font-family: var(--mono); font-size: .86em; padding: .16em .4em; border-radius: 6px; background: var(--inline-code); color: var(--fg); border: 1px solid var(--line); word-break: break-word; }
.prose img { border-radius: var(--radius); border: 1px solid var(--line); }
.table-wrap { margin: 0 0 22px; overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.prose th { text-align: left; font-weight: 600; color: var(--fg); background: var(--bg-soft); padding: 10px 14px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------- code */
.code-block { margin: 0 0 22px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--code-bg); overflow: hidden; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 42px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); }
.code-title { font-size: 12.5px; font-weight: 500; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code-tabs { display: flex; gap: 2px; height: 100%; overflow-x: auto; scrollbar-width: none; margin-left: -6px; }
.code-tabs::-webkit-scrollbar { display: none; }
.code-tab { position: relative; padding: 0 9px; font-size: 12.5px; font-weight: 500; color: var(--fg-3); white-space: nowrap; transition: color .15s; }
.code-tab:hover { color: var(--fg); }
.code-tab.active { color: var(--fg); }
.code-tab.active::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.copy-btn { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--fg-3); }
.copy-btn:hover { color: var(--fg); background: var(--bg-muted); }
.copy-btn .ok { display: none; color: var(--accent); }
.copy-btn.done .ok { display: block; }
.copy-btn.done svg:not(.ok) { display: none; }
.code-body { overflow: auto; max-height: 640px; }
.code-panel { display: none; }
.code-panel.active { display: block; }
.code-body pre { margin: 0; padding: 14px 16px; font-family: var(--mono); font-size: 13px; line-height: 1.7; background: transparent !important; tab-size: 2; }
.code-body pre code { font-family: inherit; }
.shiki, .shiki span { color: var(--shiki-light); }
[data-theme="dark"] .shiki, [data-theme="dark"] .shiki span { color: var(--shiki-dark); }

/* ------------------------------------------------------------- callouts */
.callout { display: flex; gap: 12px; margin: 0 0 20px; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--info-line); background: var(--info-bg); font-size: 14.5px; line-height: 1.65; }
.callout-icon { margin-top: 3px; color: var(--info); }
.callout-body { min-width: 0; flex: 1; color: var(--fg-2); }
.callout-body > :last-child { margin-bottom: 0; }
.callout-body p { margin-bottom: 10px; }
.callout-title { font-weight: 600; color: var(--fg); }
.callout-note { border-color: var(--note-line); background: var(--note-bg); }
.callout-note .callout-icon { color: var(--note); }
.callout-tip, .callout-check { border-color: var(--accent-line); background: var(--accent-soft); }
.callout-tip .callout-icon, .callout-check .callout-icon { color: var(--accent); }
.callout-warning { border-color: var(--warn-line); background: var(--warn-bg); }
.callout-warning .callout-icon { color: var(--warn); }
.callout-danger { border-color: var(--danger-line); background: var(--danger-bg); }
.callout-danger .callout-icon { color: var(--danger); }

/* ------------------------------------------------------------- cards */
.card-group { display: grid; gap: 14px; margin: 0 0 22px; }
.card-group.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-group.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-group.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-group .card { margin: 0; }
.card { display: block; margin: 0 0 16px; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg); transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
a.card:hover { border-color: var(--accent-line); box-shadow: var(--shadow); }
.card.horizontal { display: flex; gap: 14px; align-items: center; }
.card-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 10px; color: var(--accent-fg); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.card.horizontal .card-icon { margin: 0; }
.card-title { margin: 0 0 4px !important; font-size: 15px; font-weight: 600; color: var(--fg); letter-spacing: -0.015em; display: flex; align-items: center; gap: 4px; }
.card-title .ext { color: var(--fg-3); }
.card-text { font-size: 14px; line-height: 1.6; color: var(--fg-3); }
.card-text > :last-child { margin-bottom: 0; }
.card-text p { margin: 0 0 8px; }

/* ------------------------------------------------------------- steps */
.steps { margin: 6px 0 24px; counter-reset: step; }
.step { position: relative; display: flex; gap: 16px; padding-bottom: 8px; }
.step::before { content: ""; position: absolute; left: 13px; top: 32px; bottom: 0; width: 1px; background: var(--line-2); }
.step:last-child::before { display: none; }
.step-num { flex: none; width: 27px; height: 27px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--fg); background: var(--bg-muted); border: 1px solid var(--line-2); counter-increment: step; position: relative; z-index: 1; }
.step-num::before { content: counter(step); }
.step-content { min-width: 0; flex: 1; padding-top: 1px; }
.step-title { margin: 0 0 8px !important; font-weight: 600; color: var(--fg); letter-spacing: -0.015em; font-size: 15.5px; }

/* ------------------------------------------------------------- tabs, accordions */
.tabs { margin: 0 0 22px; }
.tab-list { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0 10px; font-size: 14px; font-weight: 500; color: var(--fg-3); white-space: nowrap; }
.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.accordion-group { margin: 0 0 22px; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.accordion-group .accordion { margin: 0; border: 0; border-radius: 0; }
.accordion-group .accordion + .accordion { border-top: 1px solid var(--line); }
.accordion { margin: 0 0 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.accordion summary, .expandable summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.accordion summary::-webkit-details-marker, .expandable summary::-webkit-details-marker { display: none; }
.accordion summary { padding: 13px 16px; font-weight: 500; color: var(--fg); font-size: 14.5px; }
.accordion summary:hover { background: var(--bg-soft); }
.chev { transition: transform .2s var(--ease); color: var(--fg-3); }
details[open] > summary .chev { transform: rotate(90deg); }
.accordion-body { padding: 2px 18px 6px 42px; }
.expandable { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: 10px; }
.expandable summary { padding: 6px 12px; font-size: 13px; color: var(--fg-3); }
.expandable summary:hover { color: var(--fg); }
.expandable-body { padding: 0 14px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------- fields (params) */
.field { padding: 16px 0; border-bottom: 1px solid var(--line); }
.field:last-child { border-bottom: 0; }
.f-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prose .f-name, .f-name { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--accent-fg); background: none; border: 0; padding: 0; }
.f-type { font-family: var(--mono); font-size: 12px; color: var(--fg-3); background: var(--bg-muted); padding: 1px 7px; border-radius: 6px; }
.f-default { font-size: 12px; color: var(--fg-3); }
.f-default code { font-size: 11.5px !important; }
.f-req { font-size: 11.5px; font-weight: 500; color: var(--danger); background: var(--danger-bg); padding: 1px 7px; border-radius: 6px; }
.f-desc { margin-top: 6px; font-size: 14px; color: var(--fg-2); }
.f-desc p { margin: 0 0 6px; }
.f-desc > :last-child { margin-bottom: 0; }
.f-enum { color: var(--fg-3); font-size: 13px; }
.api-section { margin-top: 34px; }
.prose .api-h { font-size: 17px; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.api-ct { margin: 10px 0 0 !important; font-family: var(--mono); font-size: 12px; color: var(--fg-3); }

/* ------------------------------------------------------------- endpoint bar */
.endpoint-bar { margin-top: 22px; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-soft); }
.method { flex: none; font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 7px; }
.ep-url { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13.5px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-base { color: var(--fg-3); }
.scope { flex: none; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; }
.try-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600; transition: filter .15s; }
[data-theme="dark"] .try-btn { color: #04210f; }
.try-btn:hover { filter: brightness(1.06); }
.api-side { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; scrollbar-width: thin; }
.api-side-inner { padding: 40px 28px 40px 8px; display: flex; flex-direction: column; gap: 16px; }
.api-side .code-block { margin: 0; }
.api-side .code-body { max-height: 46vh; }
.api-side-mobile { display: none; }

/* ------------------------------------------------------------- changelog */
.update { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 28px; padding: 6px 0 34px; scroll-margin-top: calc(var(--header-h) + 24px); }
.update + .update { border-top: 1px solid var(--line); padding-top: 34px; }
.update-meta { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; display: flex; flex-direction: column; gap: 8px; }
.update-label { display: inline-block; align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--accent-fg); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 2px 10px; border-radius: 999px; }
.update-desc { font-size: 13px; color: var(--fg-3); }
.update-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11.5px; color: var(--fg-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 8px; }
.update-body > :first-child { margin-top: 0; }
.update-body h3 { margin-top: 0 !important; }

/* ------------------------------------------------------------- misc components */
.badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg-2); vertical-align: middle; }
.badge-green { color: var(--accent-fg); border-color: var(--accent-line); background: var(--accent-soft); }
.tooltip { border-bottom: 1px dotted var(--fg-3); cursor: help; }
.frame { margin: 0 0 22px; padding: 8px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--bg-soft); }
.frame img { display: block; border-radius: 12px; }
.frame figcaption { text-align: center; font-size: 13px; color: var(--fg-3); padding-top: 8px; }

/* ------------------------------------------------------------- feedback, prev/next, footer */
.feedback { margin-top: 48px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--fg-3); }
.feedback span { margin-right: 6px; }
.feedback button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--fg-2); }
.feedback button:hover { border-color: var(--fg-4); color: var(--fg); }
.feedback.sent { color: var(--accent-fg); }
.prev-next { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pn { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); transition: border-color .2s; }
.pn:hover { border-color: var(--accent-line); }
.pn-next { text-align: right; align-items: flex-end; }
.pn-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--fg-3); }
.pn-title { font-size: 15px; font-weight: 500; color: var(--fg); }
.site-footer { margin-top: 56px; padding: 28px 0 40px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--fg-3); }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--fg); }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a:hover { color: var(--fg); }

/* ------------------------------------------------------------- TOC */
.toc { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; scrollbar-width: none; }
.toc-inner { padding: 44px 24px 40px 8px; }
.toc-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--fg); margin-bottom: 10px; }
.toc-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc-list a { display: block; padding: 4px 0 4px 14px; margin-left: -1px; border-left: 1px solid transparent; font-size: 13.5px; line-height: 1.45; color: var(--fg-3); transition: color .15s, border-color .15s; }
.toc-list .toc-d3 a { padding-left: 26px; font-size: 13px; }
.toc-list a:hover { color: var(--fg); }
.toc-list a.active { color: var(--accent-fg); border-left-color: var(--accent); font-weight: 500; }

/* ------------------------------------------------------------- search */
.search-modal { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.search-modal[hidden] { display: none; }
.search-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade .15s var(--ease); }
.search-panel { position: relative; width: 100%; max-width: 640px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24); overflow: hidden; animation: pop .18s var(--ease); }
.search-input-row { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 56px; border-bottom: 1px solid var(--line); color: var(--fg-3); }
.search-input-row input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; font-size: 16px; }
.search-input-row input::-webkit-search-cancel-button { display: none; }
.search-results { max-height: min(60vh, 520px); overflow-y: auto; padding: 8px; }
.search-empty { padding: 28px 12px; text-align: center; color: var(--fg-3); font-size: 14px; }
.search-group { padding: 10px 10px 4px; font-size: 12px; font-weight: 600; color: var(--fg-3); }
.search-hit { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; }
.search-hit .icon { margin-top: 3px; color: var(--fg-3); }
.search-hit.sel { background: var(--accent-soft); }
.search-hit.sel .icon { color: var(--accent-fg); }
.sh-main { min-width: 0; }
.sh-title { font-size: 14px; font-weight: 500; color: var(--fg); }
.sh-crumb { font-size: 12px; color: var(--fg-3); }
.sh-text { font-size: 13px; color: var(--fg-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.search-hit mark { background: none; color: var(--accent-fg); font-weight: 600; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.985); } }

/* ------------------------------------------------------------- playground */
.pg-modal { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: center; padding: 24px; }
.pg-modal[hidden] { display: none; }
.pg-panel { position: relative; width: 100%; max-width: 1080px; height: min(86vh, 760px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--bg); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3); overflow: hidden; animation: pop .18s var(--ease); }
.pg-left { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.pg-top { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.pg-url { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg-2); }
.pg-send { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; }
[data-theme="dark"] .pg-send { color: #04210f; }
.pg-send[disabled] { opacity: .6; cursor: progress; }
.pg-form { flex: 1; overflow-y: auto; padding: 6px 16px 20px; }
.pg-sec { margin-top: 16px; font-size: 12px; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; }
.pg-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pg-row label { font-family: var(--mono); font-size: 12.5px; color: var(--fg); }
.pg-row label small { display: block; font-family: var(--font); color: var(--fg-3); font-size: 11px; }
.pg-row input, .pg-row select, .pg-row textarea { width: 100%; font: inherit; font-size: 13px; color: var(--fg); background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; outline: 0; }
.pg-row textarea { font-family: var(--mono); min-height: 64px; resize: vertical; }
.pg-row input:focus, .pg-row select:focus, .pg-row textarea:focus { border-color: var(--accent); }
.pg-note { font-size: 12px; color: var(--fg-3); margin-top: 14px; line-height: 1.55; }
.pg-right { display: flex; flex-direction: column; min-height: 0; background: var(--code-bg); }
.pg-right-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--fg-3); }
.pg-status { font-family: var(--mono); font-weight: 600; }
.pg-status.ok { color: var(--get); }
.pg-status.bad { color: var(--del); }
.pg-out { flex: 1; overflow: auto; margin: 0; padding: 14px 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; color: var(--fg-2); }
.pg-close { position: absolute; top: 10px; right: 10px; z-index: 2; }

/* ------------------------------------------------------------- responsive */

/* ---------------------------------------------------------- Ask AI */

@media (max-width: 1279px) {
  .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .toc { display: none; }
  .is-api .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .api-side { display: none; }
  .api-side-mobile { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
  .api-side-mobile .code-block { margin: 0; }
}
@media (max-width: 1023px) {
  :root { --top-h: 56px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .is-api .shell { grid-template-columns: minmax(0, 1fr); }
  .menu-btn, .search-mobile { display: inline-grid; }
  .search-trigger, .nav-ext { display: none; }
  .topbar-row { padding: 0 12px; gap: 8px; }
  .tabbar-row { padding: 0 16px; }
  .sidebar { position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; height: 100vh; width: min(86vw, 320px); background: var(--bg); border-right: 1px solid var(--line); transform: translateX(-102%); transition: transform .28s var(--ease); }
  .sidebar-inner { padding-top: 20px; }
  .menu-open .sidebar { transform: none; }
  .menu-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.35); }
  .main { padding: 28px 20px 0; }
  .pg-panel { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 40%); height: 92vh; }
  .pg-left { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .brand-name { display: none; }
  .brand-docs { border-left: 0; padding-left: 0; color: var(--fg); font-weight: 600; }
  .btn-primary { padding: 0 12px; }
  .page-title { font-size: 27px; }
  .page-desc { font-size: 16.5px; }
  .card-group.cols-2, .card-group.cols-3, .card-group.cols-4 { grid-template-columns: 1fr; }
  .prev-next { grid-template-columns: 1fr; }
  .update { grid-template-columns: 1fr; gap: 12px; }
  .update-meta { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .endpoint-bar { flex-wrap: wrap; }
  .ep-url { flex-basis: calc(100% - 70px); }
  .scope { order: 3; }
  .try-btn { order: 4; margin-left: auto; }
  .pg-row { grid-template-columns: 1fr; gap: 6px; }
  .page-actions .copy-page span:not(.ask-mark) { display: none; }
  .page-actions .copy-page:not(.icon-only) { width: 30px; padding: 0; justify-content: center; }
  .anchor { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .topbar, .sidebar, .toc, .api-side, .feedback, .prev-next, .page-actions { display: none !important; } .shell { display: block; padding: 0; } }
@keyframes slidein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.t-k { color: #8250df; } .t-s { color: #0a7f3f; } .t-n { color: #0550ae; } .t-c { color: var(--fg-4); font-style: italic; } .t-f { color: #953800; }
[data-theme="dark"] .t-k { color: #d2a8ff; } [data-theme="dark"] .t-s { color: #7ee2a8; } [data-theme="dark"] .t-n { color: #79c0ff; } [data-theme="dark"] .t-f { color: #ffa657; }

/* ---------------------------------------------------------- Ask AI (docked assistant panel, Oct 29 2026)
   Its own mark: a speech bubble with a four-point spark cut out (Ask = bubble, AI = spark), drawn as a CSS mask so the
   green gradient can shimmer while it works. Docked on the right on wide screens (pushes the page, resizable),
   a right drawer on mid-size screens, a bottom sheet on phones. Stays open across pages (sessionStorage). */
:root { --ask-w: 420px; --ask-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 3.5h10a4.5 4.5 0 0 1 4.5 4.5v5.5a4.5 4.5 0 0 1-4.5 4.5h-6.3l-4.3 3.3c-.55.42-1.4.03-1.4-.66V17.7A4.5 4.5 0 0 1 2.5 13.5V8A4.5 4.5 0 0 1 7 3.5Z M12 6.1c.42 2.75 1.9 4.23 4.65 4.65-2.75.42-4.23 1.9-4.65 4.65-.42-2.75-1.9-4.23-4.65-4.65 2.75-.42 4.23-1.9 4.65-4.65Z'/%3E%3C/svg%3E"); }
.ask-mark { flex: none; display: inline-block; width: 20px; height: 20px; position: relative; background: linear-gradient(135deg, #5ee08a 0%, #22c55e 38%, #15803d 100%); background-size: 100% 100%; -webkit-mask: var(--ask-glyph) center / contain no-repeat; mask: var(--ask-glyph) center / contain no-repeat; }
[data-theme="dark"] .ask-mark { background: linear-gradient(135deg, #86efac 0%, #4ade80 40%, #16a34a 100%); }
.ask-mark.xs { width: 15px; height: 15px; }
.ask-mark.sm { width: 18px; height: 18px; }
.ask-mark.busy { background: linear-gradient(110deg, #15803d 0%, #22c55e 30%, #d9fbe5 46%, #22c55e 62%, #15803d 100%); background-size: 260% 100%; animation: askglint 1.5s linear infinite; }
@keyframes askglint { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.ask-tile { flex: none; position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #0b0d12; box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .42), 0 1px 2px rgba(0,0,0,.18); }
.ask-tile .ask-mark { width: 66%; height: 66%; background: linear-gradient(135deg, #86efac 0%, #4ade80 42%, #16a34a 100%); }
.ask-tile.lg { width: 56px; height: 56px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px rgba(34, 197, 94, .45), 0 14px 34px -12px rgba(22, 163, 74, .6); }
.ask-tile.busy::after { content: ""; position: absolute; inset: -3px; border-radius: 11px; padding: 1.5px; background: conic-gradient(from var(--ask-a, 0deg), transparent 0 55%, #4ade80 75%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: askring 1.2s linear infinite; }
.ask-tile.busy .ask-mark { background: linear-gradient(110deg, #16a34a 0%, #4ade80 30%, #f0fdf4 46%, #4ade80 62%, #16a34a 100%); background-size: 260% 100%; animation: askglint 1.5s linear infinite; }
@property --ask-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes askring { to { --ask-a: 360deg; } }

.ask-trigger { flex: none; height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-soft); color: var(--fg-2); font-size: 14px; font-weight: 500; white-space: nowrap; transition: border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.ask-trigger:hover { border-color: var(--accent-line); color: var(--fg); box-shadow: 0 0 0 3px var(--accent-soft); }
html[data-ask] .ask-trigger { border-color: var(--accent-line); color: var(--fg); background: var(--accent-soft); }
.ask-trigger .kbd { margin-left: 2px; }
.ask-mobile { display: none; }
.ask-page .ask-mark { margin: 0 1px; }

.ask-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 85; width: var(--ask-w); display: flex; }
.ask-panel[hidden] { display: none; }
html[data-ask="docked"] .ask-panel { display: flex; }
.ask-backdrop { display: none; position: fixed; inset: 0; background: rgba(10, 10, 10, .28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .18s var(--ease); }
[data-theme="dark"] .ask-backdrop { background: rgba(0, 0, 0, .6); }
.ask-sheet { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--line); overflow: hidden; animation: askslide .28s var(--ease); }
[data-theme="dark"] .ask-sheet { background: #070707; }
.ask-panel.closing .ask-sheet { animation: askslideout .18s var(--ease) forwards; }
.ask-panel.closing .ask-backdrop { animation: fade .16s var(--ease) reverse forwards; }
html.ask-restored .ask-sheet { animation: none; }
@keyframes askslide { from { opacity: 0; transform: translateX(28px); } }
@keyframes askslideout { to { opacity: 0; transform: translateX(28px); } }
.ask-sheet::before { content: ""; position: absolute; inset: 0 0 auto; height: 150px; pointer-events: none; background: radial-gradient(70% 100% at 50% 0%, var(--accent-soft), transparent 70%); opacity: .8; }
.ask-resize { position: absolute; z-index: 5; left: 0; top: 0; bottom: 0; width: 9px; cursor: col-resize; touch-action: none; outline: none; }
.ask-resize::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .15s var(--ease); }
.ask-resize:hover::after, .ask-resize:focus-visible::after, .ask-panel.resizing .ask-resize::after { background: var(--accent); }
html.ask-resizing, html.ask-resizing * { cursor: col-resize !important; user-select: none !important; }
html.ask-resizing .ask-panel, html.ask-resizing .topbar, html.ask-resizing .shell { transition: none !important; }
.ask-grab { display: none; }
/* Wide screens: docked, pushes the page (the TOC / API column folds into the page when space runs short). */
@media (min-width: 1180px) {
  .topbar, .shell { transition: margin-right .28s var(--ease), right .28s var(--ease); }
  html[data-ask="docked"] .topbar { right: var(--ask-w); }
  html[data-ask="docked"] body { padding-right: var(--ask-w); }
  html[data-ask="docked"] .sidebar { height: calc(100vh - var(--header-h)); }
}
@media (min-width: 1180px) and (max-width: 1719px) {
  html[data-ask="docked"] .shell, html[data-ask="docked"] .is-api .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  html[data-ask="docked"] .toc, html[data-ask="docked"] .api-side { display: none; }
  html[data-ask="docked"] .api-side-mobile { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
  html[data-ask="docked"] .api-side-mobile .code-block { margin: 0; }
  html[data-ask="docked"] .topbar-search { margin-left: 16px; }
  html[data-ask="docked"] .search-trigger .kbd { display: none; }
}
@media (min-width: 1180px) and (max-width: 1379px) { html[data-ask="docked"] .nav-ext { display: none; } }
/* Mid-size screens: a drawer over the page. */
@media (max-width: 1179px) {
  .ask-panel { width: min(var(--ask-w), 94vw); }
  .ask-backdrop { display: block; }
  .ask-sheet { box-shadow: -24px 0 60px -20px rgba(0,0,0,.3); }
  .ask-resize { display: none; }
}

.ask-head { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); }
.ask-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ask-title-t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ask-title-t b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.ask-title-t small { font-size: 12px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-head-actions { display: flex; align-items: center; gap: 2px; }
.ask-head-actions .kbd { margin-right: 6px; }
.ask-head .icon-btn { width: 32px; height: 32px; border-radius: 9px; color: var(--fg-3); }
.ask-head .icon-btn:hover { color: var(--fg); background: var(--bg-muted); }

.ask-body { position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; padding: 22px 24px 12px; overscroll-behavior: contain; scroll-behavior: smooth; }
.ask-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 4px 8px; animation: pop .3s var(--ease); }
.ask-empty .ask-mark.lg { margin-bottom: 18px; }
.ask-empty-title { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 6px; }
.ask-empty-sub { color: var(--fg-3); font-size: 14px; line-height: 1.55; margin: 0 0 26px; max-width: 440px; }
.ask-suggest { width: 100%; max-width: 560px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ask-suggest button { display: flex; align-items: flex-start; gap: 10px; text-align: left; font-size: 13.5px; line-height: 1.45; color: var(--fg-2); padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-soft); transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); min-width: 0; }
.ask-suggest button .icon { color: var(--fg-4); flex: none; margin-top: 2px; }
.ask-suggest button:hover { border-color: var(--accent-line); background: var(--bg); color: var(--fg); transform: translateY(-1px); }
.ask-suggest button:hover .icon { color: var(--accent-fg); }

.ask-thread { display: flex; flex-direction: column; gap: 30px; }
.ask-turn { display: flex; flex-direction: column; gap: 14px; animation: pop .25s var(--ease); min-width: 0; }
.ask-user { align-self: flex-end; max-width: 85%; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; }
.ask-user > div { background: var(--fg); color: var(--bg); padding: 9px 14px; border-radius: 18px 18px 5px 18px; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
[data-theme="dark"] .ask-user > div { background: #1a1a1a; color: var(--fg); border: 1px solid var(--line-2); }
.ask-user-ctx { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--fg-3); }
.ask-ai { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.ask-ai > .ask-mark { margin-top: 1px; }
.ask-ai-body { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.7; color: var(--fg); }

/* working state: a vertical timeline of what Ask AI is doing */
.ask-work { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); overflow: hidden; }
.ask-work > summary { list-style: none; display: flex; align-items: center; gap: 9px; padding: 9px 12px; font-size: 13px; color: var(--fg-2); cursor: pointer; user-select: none; }
.ask-work > summary::-webkit-details-marker { display: none; }
.ask-work > summary .ask-work-chev { margin-left: auto; color: var(--fg-4); transition: transform .2s var(--ease); display: inline-flex; }
.ask-work[open] > summary .ask-work-chev { transform: rotate(90deg); }
.ask-work > summary .ask-done-ic { color: var(--accent-fg); display: inline-flex; }
.ask-work-body { padding: 2px 14px 12px; }
.ask-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.ask-tl li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 5px 0; font-size: 13px; color: var(--fg-3); line-height: 1.45; animation: pop .25s var(--ease); }
.ask-tl li::before { content: ""; position: absolute; left: 8.5px; top: 22px; bottom: -5px; width: 1px; background: var(--line-2); }
.ask-tl li:last-child::before { display: none; }
.ask-tl .dot { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-2); color: var(--fg-4); }
.ask-tl .dot .icon { width: 10px; height: 10px; }
.ask-tl li.done .dot { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-fg); }
.ask-tl li.live .dot { border-color: var(--accent); }
.ask-tl li.live .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; animation: askping 1.4s var(--ease) infinite; }
.ask-tl li.live .dot i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@keyframes askping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
.ask-tl .lbl { color: var(--fg-2); }
.ask-tl li.live .lbl { background: linear-gradient(90deg, var(--fg-3) 0%, var(--fg) 45%, var(--fg-3) 90%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: askshine 1.6s linear infinite; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ask-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-size: 12px; color: var(--fg-2); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); animation: pop .3s var(--ease) both; }
.ask-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-chip .icon { flex: none; color: var(--fg-4); }
a.ask-chip:hover { border-color: var(--accent-line); color: var(--fg); }
.ask-spin { width: 14px; height: 14px; border-radius: 50%; border: 1.6px solid var(--line-2); border-top-color: var(--accent); animation: askspin .7s linear infinite; flex: none; }
@keyframes askspin { to { transform: rotate(360deg); } }
@keyframes askshine { to { background-position: -200% 0; } }
.ask-skel { display: flex; flex-direction: column; gap: 9px; padding: 4px 0 2px; }
.ask-skel i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-muted) 0%, var(--line-2) 50%, var(--bg-muted) 100%); background-size: 200% 100%; animation: askshine 1.4s linear infinite; }
.ask-skel i:nth-child(1) { width: 92%; } .ask-skel i:nth-child(2) { width: 78%; } .ask-skel i:nth-child(3) { width: 54%; }

/* answer */
.ask-text > :first-child { margin-top: 0; }
.ask-text p { margin: 0 0 12px; overflow-wrap: anywhere; }
.ask-text ul, .ask-text ol { margin: 0 0 12px; padding-left: 22px; }
.ask-text li { margin: 4px 0; padding-left: 2px; overflow-wrap: anywhere; }
.ask-text li::marker { color: var(--fg-4); }
.ask-text ol li::marker { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.ask-text .ask-h { font-weight: 600; font-size: 15px; margin: 18px 0 8px; letter-spacing: -0.01em; }
.ask-text strong { font-weight: 600; }
.ask-text code { font-family: var(--mono); font-size: 0.86em; background: var(--inline-code); padding: 1.5px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.ask-text a:not(.ask-cite) { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.ask-text a:not(.ask-cite):hover { text-decoration-color: var(--accent); }
.ask-caret { display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; border-radius: 2px; background: var(--accent); animation: askblink 1s steps(2) infinite; }
@keyframes askblink { 50% { opacity: 0; } }
.ask-table { overflow-x: auto; margin: 0 0 12px; border: 1px solid var(--line-2); border-radius: 10px; }
.ask-table table { border-collapse: collapse; width: 100%; font-size: 13px; line-height: 1.5; }
.ask-table th, .ask-table td { text-align: left; padding: 7px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ask-table tr:last-child td { border-bottom: 0; }
.ask-table th { background: var(--bg-soft); font-weight: 600; color: var(--fg-2); font-size: 12.5px; }
.ask-code { margin: 0 0 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--code-bg); overflow: hidden; max-width: 100%; }
.ask-code-head { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--fg-3); }
.ask-code pre { margin: 0; padding: 11px 13px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
.ask-code code { background: none; padding: 0; font-size: inherit; color: var(--fg); }
.ask-copy-code { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--fg-3); }
.ask-copy-code:hover { background: var(--bg-muted); color: var(--fg); }
.ask-copy-code .icon + .icon, [data-copy-answer] .icon + .icon { display: none; }
.ask-copy-code.done .icon:first-child, [data-copy-answer].done .icon:first-child { display: none; }
.ask-copy-code.done .icon + .icon, [data-copy-answer].done .icon + .icon { display: inline; color: var(--accent-fg); }
.ask-cite { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin: 0 2px; border-radius: 6px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none !important; background: var(--bg-muted); color: var(--fg-2) !important; border: 1px solid var(--line-2); vertical-align: 1.5px; line-height: 1; transition: all .15s var(--ease); }
.ask-cite:hover, .ask-cite.hl { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-fg) !important; }
.ask-cites { display: inline; margin-left: 2px; } .ask-code + .ask-cites { display: block; margin: -6px 0 10px; }
.ask-sources { margin-top: 16px; }
.ask-sources-title { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--fg-3); letter-spacing: .01em; display: flex; align-items: center; gap: 6px; }
.ask-sources-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ask-sheet { container-type: inline-size; container-name: ask; }
@container ask (max-width: 470px) { .ask-sheet .ask-sources-grid, .ask-sheet .ask-suggest { grid-template-columns: minmax(0, 1fr); } .ask-sheet .ask-foot .keys { display: none; } .ask-sheet .ask-body { padding: 20px 18px 12px; } }
.ask-source { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; color: var(--fg-2); background: var(--bg); transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease); min-width: 0; animation: pop .3s var(--ease) both; }
.ask-source:hover, .ask-source.hl { border-color: var(--accent-line); background: var(--bg-soft); color: var(--fg); }
.ask-source:hover { transform: translateY(-1px); }
.ask-source-n { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--bg-muted); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ask-source-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ask-source-t span { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-source-t small { font-size: 11.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-actions { display: flex; align-items: center; gap: 2px; margin-top: 12px; }
.ask-actions button { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-3); height: 28px; padding: 0 8px; border-radius: 8px; }
.ask-actions button:hover { background: var(--bg-muted); color: var(--fg); }
.ask-actions button.on { color: var(--accent-fg); background: var(--accent-soft); }
.ask-follow { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 10px; }
.ask-follow-title { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--fg-3); }
.ask-follow button { display: flex; align-items: center; gap: 9px; text-align: left; font-size: 13.5px; color: var(--fg-2); padding: 7px 8px; margin: 0 -8px; border-radius: 9px; transition: background .15s var(--ease), color .15s var(--ease); animation: pop .3s var(--ease) both; }
.ask-follow button .icon { color: var(--fg-4); flex: none; }
.ask-follow button:hover { background: var(--bg-muted); color: var(--fg); }
.ask-follow button:hover .icon { color: var(--accent-fg); }
.ask-error { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--danger); font-size: 13.5px; padding: 9px 10px 9px 12px; border: 1px solid var(--danger-line); background: var(--danger-bg); border-radius: 11px; }
.ask-error button { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--fg-2); padding: 4px 8px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--bg); flex: none; }

.ask-composer { position: relative; flex: none; padding: 10px 16px 10px; border-top: 1px solid var(--line); background: var(--bg); }
[data-theme="dark"] .ask-composer { background: #070707; }
.ask-context { margin: 0 0 8px; }
.ask-context[hidden] { display: none; }
.ask-context-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 12px; color: var(--fg-2); padding: 3px 4px 3px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-soft); }
.ask-context-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-context-chip button { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; color: var(--fg-3); }
.ask-context-chip button:hover { background: var(--bg-muted); color: var(--fg); }
.ask-form { display: flex; align-items: flex-end; gap: 8px; padding: 7px 7px 7px 14px; border: 1px solid var(--line-2); border-radius: 15px; background: var(--bg-soft); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.ask-form:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.ask-form textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; font-size: 15px; line-height: 1.5; padding: 5px 0; max-height: 180px; }
.ask-form textarea::placeholder { color: var(--fg-4); }
.ask-send, .ask-stop { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--fg); color: var(--bg); transition: opacity .15s, transform .15s var(--ease); }
.ask-send:hover, .ask-stop:hover { transform: translateY(-1px); }
.ask-form [hidden] { display: none; }
.ask-stop span { width: 10px; height: 10px; border-radius: 2px; background: var(--bg); }
.ask-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 2px 0; font-size: 11.5px; color: var(--fg-4); }
.ask-foot .keys { display: inline-flex; gap: 10px; white-space: nowrap; }
.ask-foot kbd { font-family: var(--font); font-size: 10.5px; padding: 0 4px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--fg-3); }

@media (max-width: 1023px) { .ask-trigger { display: none; } .ask-mobile { display: inline-grid; } .topbar-search { display: none; } }
@media (max-width: 640px) {
  .ask-panel { top: auto; left: 0; width: 100%; height: 92vh; height: 92dvh; }
  .ask-sheet { border-left: 0; border-top: 1px solid var(--line-2); border-radius: 20px 20px 0 0; box-shadow: 0 -20px 60px -20px rgba(0,0,0,.35); animation: askup .3s var(--ease); }
  .ask-panel.closing .ask-sheet { animation: askdown .2s var(--ease) forwards; }
  .ask-grab { display: block; position: absolute; z-index: 2; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--line-2); }
  .ask-head { padding-top: 6px; }
  .ask-body { padding: 18px 16px 10px; }
  .ask-composer { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); }
  .ask-suggest, .ask-sources-grid { grid-template-columns: minmax(0, 1fr); }
  .ask-head-actions .kbd, .ask-foot .keys { display: none; }
  .ask-ai > .ask-mark { display: none; }
  .ask-user { max-width: 92%; }
  .ask-empty { padding-top: 18px; }
}
@keyframes askup { from { transform: translateY(40px); opacity: 0; } }
@keyframes askdown { to { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ask-sheet, .ask-turn, .ask-empty { animation: none; } .ask-tl li.live .lbl { animation: none; color: var(--fg-2); } }
.ask-empty[hidden], .ask-thread:empty { display: none; }

/* ---------------------------------------------------------- Product marks (lib/marks.mjs), Models tab (Oct 28 2026) */
.mark .mk-line { color: #16a34a; } .mark .mk-line-core { fill: #ffffff; }
.mark-supercosmos .mk-g { fill: #16a34a; } .mark-supercosmos .mk-g2 { fill: #16a34a; fill-opacity: .72; } .mark-supercosmos .mk-c { fill: #0f7a37; }
.mark-supercosmos .mk-w1 { fill: var(--fg); fill-opacity: .7; } .mark-supercosmos .mk-w2 { fill: var(--fg); fill-opacity: .38; }
.mark-supercosmos .mk-s1 { fill: #16a34a; fill-opacity: .5; } .mark-supercosmos .mk-s2 { fill: #16a34a; fill-opacity: .3; }
[data-theme="dark"] .mark .mk-line { color: #4ade80; } [data-theme="dark"] .mark .mk-line-core { fill: #000; }
[data-theme="dark"] .mark-supercosmos .mk-g, [data-theme="dark"] .mark-supercosmos .mk-g2, [data-theme="dark"] .mark-supercosmos .mk-s1, [data-theme="dark"] .mark-supercosmos .mk-s2 { fill: #4ade80; }
[data-theme="dark"] .mark-supercosmos .mk-c { fill: #bbf7d0; }
.nav-link .icon:has(.mark) { opacity: 1; flex: none; }
.nav-link.active .mark .mk-line-core { fill: #eef8f1; } [data-theme="dark"] .nav-link.active .mark .mk-line-core { fill: #06140b; }
/* Cards whose icon is a product mark show the brand tile instead of the green icon chip. */
.card-icon:has(.mark) { background: #0b0d12; border-color: rgba(22, 163, 74, .45); }
.card-icon:has(.mark) .mk-line { color: #4ade80; } .card-icon:has(.mark) .mk-line-core { fill: #0b0d12; }
.card-icon:has(.mark) .mk-w1, .card-icon:has(.mark) .mk-w2 { fill: #fff; }
.card-icon:has(.mark) .mk-g, .card-icon:has(.mark) .mk-g2, .card-icon:has(.mark) .mk-s1, .card-icon:has(.mark) .mk-s2 { fill: #4ade80; } .card-icon:has(.mark) .mk-c { fill: #bbf7d0; }
.mark-tile { display: block; width: 100%; height: 100%; }

/* <ModelCard> */
.model-card { display: flex; flex-direction: column; gap: 14px; margin: 0 0 16px; padding: 20px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg); position: relative; overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.model-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 90px; background: radial-gradient(60% 100% at 0% 0%, var(--accent-soft), transparent 70%); pointer-events: none; }
a.model-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow); transform: translateY(-1px); }
.card-group .model-card { margin: 0; }
.mc-top { display: flex; align-items: center; gap: 14px; position: relative; }
.mc-mark { width: 44px; height: 44px; flex: none; border-radius: 12px; box-shadow: 0 6px 18px -8px rgba(22, 163, 74, .55); }
.mc-head { flex: 1; min-width: 0; }
.prose .mc-title { margin: 0 !important; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); line-height: 1.3; }
.prose .mc-meta { margin: 2px 0 0 !important; font-size: 13px; color: var(--fg-3); line-height: 1.4; }
.mc-go { color: var(--fg-4); flex: none; transition: transform .2s var(--ease), color .2s; }
a.model-card:hover .mc-go { color: var(--accent-fg); transform: translateX(2px); }
.mc-text { font-size: 14px; line-height: 1.6; color: var(--fg-2); position: relative; } .mc-text > :last-child { margin-bottom: 0; }
.mc-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; margin-top: auto; border-top: 1px solid var(--line); }
.mc-efforts, .mc-from { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.mc-k { width: 64px; flex: none; color: var(--fg-4); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.mc-chip { padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-soft); color: var(--fg-2); font-size: 12.5px; font-weight: 500; }
.mc-v { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }

/* <Pricing> / <Price> */
.pricing { display: grid; gap: 12px; margin: 4px 0 24px; }
.pricing.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pricing.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.price { display: flex; flex-direction: column; padding: 16px 16px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg); min-width: 0; }
.price.featured { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.price-h { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.price-mark { width: 22px; height: 22px; border-radius: 6px; overflow: hidden; flex: none; }
.price-name { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: var(--fg); }
.price-tag { margin-left: auto; font-size: 11.5px; font-weight: 500; padding: 1px 8px; border-radius: 999px; color: var(--fg-3); border: 1px solid var(--line-2); white-space: nowrap; }
.price.featured .price-tag { color: var(--accent-fg); border-color: var(--accent-line); background: var(--accent-soft); }
.price-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.price-n { display: flex; flex-direction: column; padding: 9px 10px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--line); }
.price-v { font-size: 21px; font-weight: 600; letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.2; }
.price-l { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
.prose .price-unit { margin: 6px 0 0 !important; font-size: 12px; color: var(--fg-4); }
.price-d { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--fg-2); } .price-d > :last-child { margin-bottom: 0; } .price-d p { margin: 0 0 6px; }
.prose .price-note { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0 !important; padding: 7px 9px; font-size: 12.5px; line-height: 1.45; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 9px; }
.price-note .icon { flex: none; margin-top: 2px; }
.prose a.price-link { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--fg-2); text-decoration: none; }
.prose a.price-link:hover { color: var(--accent-fg); }
@media (max-width: 1023px) { .pricing.cols-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pricing.cols-2 { grid-template-columns: 1fr; } .price-v { font-size: 20px; } .model-card { padding: 16px; } }

/* Ask AI: right-to-left answers (Arabic), the unverified-number note */
.ask-text[dir="rtl"] { text-align: right; }
.ask-text[dir="rtl"] ul, .ask-text[dir="rtl"] ol { padding-left: 0; padding-right: 22px; }
.ask-text[dir="rtl"] li { padding-left: 0; padding-right: 2px; }
.ask-text[dir="rtl"] .ask-code, .ask-text[dir="rtl"] pre, .ask-text[dir="rtl"] code { direction: ltr; text-align: left; unicode-bidi: isolate; }
.ask-text[dir="rtl"] .ask-table table { direction: rtl; } .ask-text[dir="rtl"] .ask-table th, .ask-text[dir="rtl"] .ask-table td { text-align: start; }
.ask-text[dir="rtl"] .ask-cites { margin-left: 0; margin-right: 2px; }
.ask-warn { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 10px; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: var(--warn-fg, #92400e); background: var(--warn-bg, #fffbeb); border: 1px solid var(--warn-line, #fde68a); }
.ask-warn .icon { flex: none; margin-top: 2px; }
.ask-warn a { text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .ask-warn { color: #fcd34d; background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .3); }

/* ---------------------------------------------------------- Models polish (Oct 29 2026)
   <ModelHero> header for a model family, price cards with a depth meter, model cards with an effort track. */
.model-hero { position: relative; overflow: hidden; margin: 6px 0 30px; padding: 24px 24px 20px; border-radius: 20px; border: 1px solid var(--line-2); background: var(--bg); isolation: isolate; }
.model-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--fg) 13%, transparent) 1px, transparent 1.3px); background-size: 14px 14px; -webkit-mask: radial-gradient(90% 120% at 100% 0%, #000 0%, transparent 62%); mask: radial-gradient(90% 120% at 100% 0%, #000 0%, transparent 62%); }
.model-hero::after { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -150px; top: -230px; border-radius: 50%; background: radial-gradient(closest-side, rgba(34, 197, 94, .22), transparent); filter: blur(8px); }
[data-theme="dark"] .model-hero { background: linear-gradient(180deg, #0b0d0c, #070707); border-color: #1d2420; }
[data-theme="dark"] .model-hero::after { background: radial-gradient(closest-side, rgba(34, 197, 94, .28), transparent); }
.mh-top { display: flex; align-items: center; gap: 18px; }
.mh-mark { width: 64px; height: 64px; flex: none; border-radius: 17px; box-shadow: 0 14px 34px -14px rgba(22, 163, 74, .75), 0 0 0 1px rgba(255,255,255,.04); }
.mh-mark svg { display: block; width: 100%; height: 100%; }
.mh-head { min-width: 0; }
.prose .mh-eyebrow { margin: 0 0 2px !important; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-fg); }
.prose .mh-title { margin: 0 !important; font-size: 26px; font-weight: 650; letter-spacing: -0.035em; line-height: 1.15; color: var(--fg); }
.mh-tagline { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--fg-2); max-width: 560px; } .mh-tagline > :last-child { margin-bottom: 0; }
.prose .mh-track { list-style: none; margin: 22px 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; position: relative; }
.mh-track::before { content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 1px; background: linear-gradient(90deg, var(--accent-line), color-mix(in srgb, var(--accent) 70%, transparent)); }
.prose .mh-track li { margin: 0 !important; padding: 0 !important; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.prose .mh-track li::before { display: none; }
.mh-depth { position: relative; display: inline-flex; align-items: flex-end; gap: 2.5px; height: 26px; padding: 0 8px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line-2); }
.mh-track li:last-child .mh-depth { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.mh-depth i { width: 4px; border-radius: 2px; background: var(--line-2); margin-bottom: 7px; }
.mh-depth i:nth-child(1) { height: 6px; } .mh-depth i:nth-child(2) { height: 9px; } .mh-depth i:nth-child(3) { height: 12px; } .mh-depth i:nth-child(4) { height: 15px; }
.mh-depth i.on { background: var(--accent); }
.mh-eff { font-size: 14px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.mh-etag { font-size: 12px; color: var(--fg-3); margin-top: -4px; }
.mh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 20px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.mh-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: color-mix(in srgb, var(--bg) 92%, transparent); min-width: 0; }
.mh-k { font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-4); }
.mh-v { font-size: 13.5px; font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .model-hero { padding: 18px 16px 16px; border-radius: 16px; }
  .mh-top { gap: 14px; } .mh-mark { width: 52px; height: 52px; border-radius: 14px; }
  .prose .mh-title { font-size: 22px; }
  .mh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-etag { display: none; }
}

/* Price cards: depth meter, one number panel, featured accent */
.price { position: relative; padding: 18px 18px 16px; border-radius: 16px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.price:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-2)); transform: translateY(-1px); box-shadow: 0 10px 30px -18px rgba(0,0,0,.25); }
.price.featured { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 70%, var(--bg)) 0%, var(--bg) 46%); }
.price.featured::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent); }
.price-depth { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 14px; margin-top: 8px; }
.price-depth i { width: 4px; border-radius: 2px; background: var(--line-2); }
.price-depth i:nth-child(1) { height: 6px; } .price-depth i:nth-child(2) { height: 9px; } .price-depth i:nth-child(3) { height: 12px; }
.pricing > .price:nth-child(1) .price-depth i:nth-child(-n+1),
.pricing > .price:nth-child(2) .price-depth i:nth-child(-n+2),
.pricing > .price:nth-child(3) .price-depth i:nth-child(-n+3) { background: var(--accent); }
.price-nums { gap: 0; margin-top: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-soft); overflow: hidden; }
.price-n { border: 0; border-radius: 0; background: transparent; padding: 11px 12px; }
.price-n + .price-n { border-left: 1px solid var(--line); }
.price-v { font-size: 23px; }
[data-theme="dark"] .price-nums { background: #0c0c0c; }

/* Model cards: efforts as a track (each step deeper than the last) */
.mc-efforts .mc-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.mc-efforts .mc-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .45; }
.mc-efforts .mc-chip:nth-of-type(2)::before { opacity: .7; width: 7px; height: 7px; }
.mc-efforts .mc-chip:nth-of-type(3)::before { opacity: 1; width: 8px; height: 8px; box-shadow: 0 0 0 3px var(--accent-soft); }
.mc-efforts .mc-chip + .mc-chip { margin-left: 10px; }
.mc-efforts .mc-chip + .mc-chip::after { content: ""; position: absolute; left: -12px; top: 50%; width: 10px; height: 1px; background: var(--line-2); }
.model-card::before { height: 120px; background: radial-gradient(70% 100% at 0% 0%, var(--accent-soft), transparent 72%); }
.mc-from .mc-v { font-size: 14px; }