/* Fireworks design-system adapter.
   Source: the supplied fireworks-design-system folder, measured 2026-09-11.
   Geometry remains in the existing skins: no widths, heights, font sizes, line
   heights, padding, gaps or section positions are redefined here.
   Compact sorting/filter controls retain Inter to avoid reflow; primary actions
   and metadata use the existing JetBrains Mono substitute for licensed Favorit.
   Vendor artwork, chart/model colors and drawing/export code are not restyled. */
html:root {
  --fw-brand: var(--fw-color-purple-400);
  --fw-brand-hover: var(--fw-color-purple-500);
  --fw-brand-pressed: var(--fw-color-purple-600);
  --fw-ink: var(--fw-color-neutrals-900);
  --fw-ink-secondary: var(--fw-color-gray);
  --fw-ink-muted: var(--fw-color-neutrals-400);
  --fw-surface: var(--fw-color-white);
  --fw-surface-muted: var(--fw-color-neutrals-25);
  --fw-surface-elevated: var(--fw-color-neutrals-50);
  --fw-info: var(--fw-color-blue-300);
  --fw-success: var(--fw-color-success-500);
  --fw-warning: var(--fw-color-warning-500);
  --fw-danger: var(--fw-color-red-500);
  --fw-link: var(--fw-color-purple-400);
  --fw-purple-300: var(--fw-color-purple-100);
  --fw-purple-700: var(--fw-brand-hover);
  --fw-lavender: var(--fw-brand-light);
  --fw-gray-600: var(--fw-ink-muted);
  --fw-gray-750: var(--fw-color-neutrals-600);
  --fw-gray-800: var(--fw-color-neutrals-700);
  /* Site-specific component roles override the generic radius size ramp. */
  --fw-radius-sm: 0;
  --fw-radius-md: 0;
  --fw-radius-lg: 0;
  --r-card: var(--fw-radius-md);
  --r-tile: var(--fw-radius-lg);
  --r-input: var(--fw-radius-sm);
  --r-pill: var(--fw-radius-full);
  --r-cta: var(--fw-radius-sm);
  --fw-result-wash: color-mix(in srgb, var(--fw-brand-light) 70%, transparent);
}

body { color:var(--fw-ink);font-family:var(--fw-font-sans);background:var(--fw-surface); }
:where(h1,h2,h3,h4,h5,h6), .claim-head, .hl-model-name, .industry-title,
.benchmarks-title, .leaderboard-heading strong, .benchmark-card-identity strong,
.models-title, .detail-title, .detail-chart-title, .boards-section .cat-head h3 {
  font-family:var(--fw-font-display)!important;font-weight:var(--fw-weight-heading)!important;
  letter-spacing:var(--fw-heading-tracking)!important;color:var(--fw-ink)!important;
}
/* Figma hero: ink headline with a pale marker, not purple letterforms. */
.hero h1 { font-weight:600!important;letter-spacing:-.02em!important;color:#18181B!important; }
/* Inset the marker paint by 2px per edge without changing text or line height. */
.hero-highlight { color:inherit;background:linear-gradient(#F7F3FF,#F7F3FF) center/100% calc(100% - 4px) no-repeat; }
.hero .claim-head { font-weight:550!important;letter-spacing:-.02em!important; }
.hero .claim-body { color:#6E6E7F!important;font-weight:500!important; }
.leaderboard-count, .benchmark-card-identity > span, .detail-crumb-link, .detail-crumb-current, .hl-count { font-weight:var(--fw-weight-heading); }
:where(.detail-lede,.detail-scope-note,.models-summary,.claim-body,.chart-note,.hl-body,.hl-note,.cost-note) {
  color:var(--fw-ink-secondary)!important;font-weight:var(--fw-weight-body)!important;
}
.leaderboard-count, .leaderboard-rank, .leaderboard-provider, .detail-provider,
.detail-chart-value, .detail-crumb-link, .industry-note, .graph-axis-label { color:var(--fw-ink-muted); }
.detail-crumb-current, .leaderboard-model .mx-model-name, .detail-page .mx-model-name { color:var(--fw-ink); }

/* Links use the brand purple, matching the action/focus color. Keep destinations and
   the existing underline/tooltip affordances exactly as they are. */
a { color:var(--fw-link); }
a:hover { color:var(--fw-brand-hover); }
.leaderboard-model .model-link-group[data-tooltip]:not([data-tooltip=""]) > .mx-model-link,
.detail-page .mx-model-link, .detail-page .detail-meta-link,
.fw-link, .fw-try, .foot-link { color:var(--fw-link)!important; }
.leaderboard-model .model-link-group[data-tooltip]:not([data-tooltip=""]) > .mx-model-link:hover,
.detail-page .mx-model-link:hover, .detail-page .detail-meta-link:hover,
.fw-link:hover, .fw-try:hover, .foot-link:hover { color:var(--fw-brand-hover)!important; }
.benchmark-card-heading, .benchmark-card-heading:hover { color:var(--fw-ink); }

/* Favorit Mono is not included/licensed in the attachment. Use the supplied
   profile's existing mono alias, without changing any current control sizes. */
.cta-btn, .graph-export-btn, .detail-toggle, .back-link, .ghost-btn,
.fw-eyebrow, .why-eyebrow, .graph-brand, .hl-title {
  font-family:var(--fw-font-label)!important;font-weight:var(--fw-weight-heading)!important;
  letter-spacing:var(--fw-label-tracking)!important;text-transform:uppercase;
}
.cta-solid, .hl-btn-solid { color:var(--fw-brand-ink)!important;background:var(--fw-brand)!important; }
.cta-solid:hover, .hl-btn-solid:hover { background:var(--fw-brand-hover)!important; }
.cta-solid:active, .hl-btn-solid:active { background:var(--fw-brand-pressed)!important; }
.cta-ghost, .hl-btn-ghost, .graph-export-btn, .detail-toggle, .back-link, .ghost-btn { color:var(--fw-ink);border-color:var(--fw-border); }
.cta-ghost { box-shadow:inset 0 0 0 1px var(--fw-border); }
.graph-export-btn:hover, .detail-toggle:hover, .back-link:hover, .ghost-btn:hover { background:var(--fw-brand-light);color:var(--fw-brand-hover); }

/* Change shape, not footprint. Filter/segmented pills and circular marks retain
   their original shape; cards and ordinary action buttons become square. */
.claim, .benchmark-card, .leaderboard-columns, .benchmark-columns,
.detail-page .board-table, .graph-visual, .detail-page .graph-visual .plot,
.detail-chart-head, .detail-page .pareto-aside .detail-chart-head,
.hl-head, .hl-viewport, .hl-proof, .hl-cost-item, .contribute-cta,
.rank-pick, .rank-trigger, .rank-dir, .rank-menu, .rank-opt,
.graph-export-btn, .detail-toggle, .ghost-btn, .back-link, .cta-btn, .hl-btn,
.model-link-tooltip, .leaderboard-info-tooltip { border-radius:var(--fw-radius-sm)!important; }
.benchmark-card-heading:focus-visible { border-radius:var(--fw-radius-sm); }
.model-link-tooltip, .leaderboard-info-tooltip { color:var(--fw-ink);border-color:var(--fw-border);box-shadow:var(--fw-shadow-popover); }
.benchmark-card:hover, .benchmark-card:focus-within { border-color:var(--fw-border);box-shadow:0 0 16px rgba(50,52,57,.06)!important; }
.fireworks-mark { border-radius:var(--fw-radius-nav); }
/* Benchmark tables get a softened 12px radius; other components stay square. */
.benchmark-card, .detail-page .board-table { border-radius:16px!important; }
.model-leaderboard .leaderboard-columns { border-radius:6px!important; }

/* Neutral chrome follows the same cool hairline and surface tokens everywhere. */
.site-nav, .nav-inner, .claim, .benchmark-card, .leaderboard-row, .model-logo-wrapper,
.leaderboard-columns, .benchmark-columns, .benchmark-row,
.detail-page .board-table, .detail-page .board-row, .detail-chart-row,
.detail-page .pareto-panel, .graph-brand, .chart-scope-tabs, .models-controls .segmented,
.method-row, .method-detail, .leader-item, .contribute-cta, .detail-toggle, .rank-pick,
.rank-menu, .rank-dir, .col-chip, .domain-tab, .graph-export-btn { border-color:var(--fw-border)!important; }
.leaderboard-columns, .benchmark-columns, .graph-visual,
.models-controls .segmented, .segmented { background:var(--fw-surface-muted)!important; }
.model-leaderboard, .benchmark-card, .detail-page .board-table,
.detail-page .board-row, .detail-page .pareto-panel, .detail-page .pareto-aside { background:var(--fw-surface); }
.detail-page .graph-visual .plot { background:transparent; }
.detail-page .board-head > *, .detail-page .board-head .bh,
.leaderboard-columns, .detail-chart-head { color:var(--fw-gray-800)!important; }
.leaderboard-columns, .benchmark-columns, .detail-page .board-head,
.detail-page .pareto-aside .detail-chart-head { background:color-mix(in srgb,var(--fw-color-neutrals-25) 80%,transparent)!important; }
.benchmark-columns { color:var(--fw-gray-800)!important; }
/* The chart-side header is sticky: rows scroll beneath it, so its light
   background must be fully opaque or the contents show through. */
.detail-chart-head, .detail-page .pareto-aside .detail-chart-head {
  background:var(--fw-color-neutrals-25)!important;
  border-radius:8px!important;
}
.models-controls .seg-btn.on, .seg-btn.on { color:var(--fw-ink);background:var(--fw-surface); }
.chart-scope-tab { color:var(--fw-ink-muted);font-weight:var(--fw-weight-heading); }
.chart-scope-tab[aria-selected="true"] { color:var(--fw-ink); }
.chart-scope-tab::after { background:var(--fw-ink); }
.models-controls .seg-btn, .benchmark-toolbar .domain-tab, .col-chip, .rank-trigger { font-weight:var(--fw-weight-heading); }
/* Active column pills match the Benchmark tab's light-purple hairline. */
.col-chip.on { border-color:var(--fw-color-purple-25)!important; }
.benchmark-toolbar .domain-tab { color:var(--fw-ink); }
.benchmark-toolbar .domain-tab[aria-pressed="true"] { color:var(--fw-ink-inverse);background:var(--fw-ink);border-color:var(--fw-ink)!important; }
.benchmark-toolbar .domain-tab[data-in-view="true"]:not([aria-pressed="true"]),
.benchmark-toolbar .domain-tab[data-in-view="true"]:not([aria-pressed="true"]):hover,
.detail-page .dim-btn.on { color:var(--fw-brand-hover);background:var(--fw-brand-light);border-color:var(--fw-color-purple-25)!important; }
.benchmark-toolbar .domain-tab[data-in-view="true"]:not([aria-pressed="true"]) .domain-tab-count { color:var(--fw-brand-hover);background:var(--fw-color-purple-25); }
.benchmark-toolbar .domain-tab[aria-pressed="true"] .domain-tab-count { background:var(--fw-color-neutrals-700);color:var(--fw-ink-inverse); }
.leaderboard-row.is-model-result, .benchmark-cell.is-benchmark-best, .benchmark-cell.is-model-result,
.detail-page .board-row > [data-best="true"] { background:var(--fw-result-wash)!important;color:var(--fw-ink)!important; }
.detail-page .board-row > [data-best="true"] { box-shadow:5px 0 var(--fw-result-wash),-5px 0 var(--fw-result-wash); }
.benchmark-cell.is-benchmark-best, .benchmark-cell.is-model-result,
.detail-page .board-row > [data-best="true"] > .num { color:var(--fw-ink)!important; }
.model-leaderboard > .model-row-reveal.is-visible:not(:has(~ .model-row-reveal.is-visible)) .leaderboard-row,
.benchmark-table > .model-row-reveal.is-visible:not(:has(~ .model-row-reveal.is-visible)) .benchmark-row,
.detail-chart-row:last-child { border-bottom-color:var(--fw-surface)!important; }

/* Dynamic UI strings keep their original values for comparisons/exports. Only
   template-marked UI chrome is remapped. Plot labels and vendor SVGs are excluded. */
[data-ui-ink="#6720FF"] { color:var(--fw-brand)!important; }
[data-ui-ink="#18181B"], [data-ui-ink="#000000"] { color:var(--fw-ink)!important; }
[data-ui-ink="#6E6E7F"], [data-ui-ink="#4C4C57"] { color:var(--fw-ink-secondary)!important; }
[data-ui-ink="#BCBCC7"], [data-ui-ink="#BABABA"], [data-ui-ink="#ABABAB"], [data-ui-ink="#8E8E9F"] { color:var(--fw-ink-muted)!important; }
[data-ui-ink="#B32519"] { color:var(--fw-color-red-700)!important; }
[data-ui-ink="#B74600"] { color:var(--fw-color-warning-700)!important; }
[data-ui-bg="#F7F7F8"] { background:var(--fw-surface-muted)!important; }
[data-ui-bg="#F8F4FF"], [data-ui-bg="#F7F3FF"] { background:var(--fw-brand-light)!important; }

/* Inverted surfaces remain inverted; never replace their white text with ink. */
.hl-proof { background:var(--fw-color-black);color:var(--fw-ink-inverse); }
.hl-section { background:var(--fw-brand-light); }
.hl-section .hl-title { color:var(--fw-ink-muted)!important; }
.hl-section .hl-proof::before, .hl-section .hl-proof::after { background:var(--fw-brand); }
.hl-section .hl-badge-fw { background:color-mix(in srgb,var(--fw-color-purple-25) 45%,white);color:var(--fw-brand-hover); }
.hl-proof :is(.hl-proof-label,.hl-bar-name,.hl-cost-label,.hl-cost-val) { color:var(--fw-ink-inverse)!important;font-weight:var(--fw-weight-heading); }
.hl-proof :is(.hl-cost-sub,.hl-bar-org,.hl-cost-unit) { color:color-mix(in srgb,var(--fw-ink-inverse) 70%,transparent); }
.hl-proof .hl-chip-text { color:var(--fw-ink-inverse); }
.hl-proof .hl-chip { background:color-mix(in srgb,var(--fw-color-marine-400) 12%,transparent); }
.training-cta { background:var(--fw-brand);color:var(--fw-ink-inverse); }
.training-cta h2, .training-cta .cta-outline { color:var(--fw-ink-inverse)!important; }
.cta-light { background:var(--fw-surface);color:var(--fw-ink)!important; }

/* The attachment's solid 3px purple focus ring never changes layout. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline:3px solid var(--fw-brand)!important;outline-offset:2px;
}

.hl-section .hl-cost-item { background:linear-gradient(90deg,color-mix(in srgb,var(--fw-brand-light) 15%,transparent),color-mix(in srgb,var(--fw-brand-light) 5%,transparent)); }
[data-ui-bg="#6720FF"] { background:var(--fw-brand)!important; }
[data-ui-bg="#AD86FF"], [data-ui-bg="#B394FF"] { background:var(--fw-color-purple-100)!important; }
[data-ui-bg="#C9B8FF"] { background:var(--fw-color-purple-50)!important; }

/* One continuous strip with subtle internal rules, matching the hero reference. */
.hero .claim { border-color:rgba(238,238,242,.7)!important;box-shadow:none; }
.site-nav .why-link { color:var(--fw-ink);background:var(--fw-surface); }
.site-nav .why-link:hover { color:var(--fw-ink);background:var(--fw-surface-muted); }

/* The header's "Why we built the Index" link: a gentle underline draws in on hover.
   (The arrow nudge lives in the page stylesheet, which owns this link's base styles.) */
.why-link { text-decoration:none; }
.why-link-label { background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;transition:background-size 240ms cubic-bezier(.22,.61,.36,1); }
.why-link:hover .why-link-label, .why-link:focus-visible .why-link-label { background-size:100% 1px; }
@media (prefers-reduced-motion:reduce) {
  .why-link-label { transition:none; }
}