/* ============================================================ BENCH — design language for llmcheck.net A bench is where instruments are calibrated and benchmarks run. Light is default; dark follows system and [data-theme="dark"]. Same-origin, no build step, no third-party request. ============================================================ */ /* ---------- TOKENS ------------------------------------------ DARK IS THE DEFAULT. Newcomers land on dark regardless of OS setting; light is an explicit opt-in via the toggle, which writes data-theme="light" and persists it. The pre-paint script applies a stored choice before first paint. ------------------------------------------------------------ */ :root { --paper: #0F1114; --surface: #15181C; --surface-2: #1A1E23; --surface-3: #20252B; --rule: #2A3038; --rule-strong: #39404A; --ink: #E9EBEE; --ink-2: #A7AEB8; --ink-3: #7E8691; --accent: oklch(0.76 0.10 252); --accent-2: oklch(0.66 0.10 252); --accent-wash: oklch(0.30 0.045 252); --sp-1: oklch(0.34 0.030 252); --sp-2: oklch(0.44 0.055 252); --sp-3: oklch(0.55 0.075 252); --sp-4: oklch(0.66 0.095 252); --sp-5: oklch(0.78 0.110 252); --ram-1: oklch(0.34 0.028 82); --ram-2: oklch(0.44 0.050 82); --ram-3: oklch(0.56 0.070 72); --ram-4: oklch(0.68 0.090 62); --lic-open: oklch(0.78 0.10 158); --lic-open-wash: oklch(0.28 0.045 158); --lic-cond: oklch(0.80 0.09 72); --lic-cond-wash: oklch(0.30 0.050 72); --lic-closed: var(--ink-3); --lic-closed-wash:var(--surface-2); --prov-sourced: var(--ink); --prov-est: oklch(0.76 0.09 252); --prov-comm: oklch(0.76 0.09 305); --shadow: 0 1px 2px rgba(0,0,0,.40), 0 10px 30px -14px rgba(0,0,0,.70); --shadow-rail: 0 1px 2px rgba(0,0,0,.45), 0 18px 44px -20px rgba(0,0,0,.80); --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 14px; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:44px; --s-8:64px; --s-9:96px; --measure: 62ch; --page-max: 1220px; --gutter: 32px; --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color-scheme: dark; } /* ---------- LIGHT: explicit opt-in only --------------------- */ :root[data-theme="light"] { color-scheme: light; --paper:#FCFCFB; --surface:#FFFFFF; --surface-2:#F6F6F4; --surface-3:#EFEFEC; --rule:#D6D6D1; --rule-strong:#C2C2BA; --ink:#15171A; --ink-2:#4B5058; --ink-3:#6C7179; --accent:oklch(0.47 0.115 252); --accent-2:oklch(0.62 0.10 252); --accent-wash:oklch(0.96 0.022 252); --sp-1:oklch(0.93 0.035 252); --sp-2:oklch(0.86 0.055 252); --sp-3:oklch(0.78 0.078 252); --sp-4:oklch(0.68 0.100 252); --sp-5:oklch(0.57 0.125 252); --ram-1:oklch(0.94 0.028 82); --ram-2:oklch(0.88 0.050 82); --ram-3:oklch(0.80 0.075 72); --ram-4:oklch(0.70 0.095 62); --lic-open:oklch(0.50 0.09 158); --lic-open-wash:oklch(0.95 0.03 158); --lic-cond:oklch(0.54 0.10 62); --lic-cond-wash:oklch(0.96 0.035 82); --lic-closed:var(--ink-3); --lic-closed-wash:var(--surface-2); --prov-sourced:var(--ink); --prov-est:oklch(0.50 0.09 252); --prov-comm:oklch(0.50 0.09 305); --shadow:0 1px 2px rgba(20,22,26,.05), 0 8px 24px -12px rgba(20,22,26,.18); --shadow-rail:0 1px 2px rgba(20,22,26,.06), 0 16px 40px -20px rgba(20,22,26,.28); } /* ---------- BASE ------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-sans); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } img, svg { max-width: 100%; height: auto; } hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; } h1, h2, h3, h4 { color: var(--ink); margin: 0 0 var(--s-3); text-wrap: balance; } h1 { font-size: 44px; line-height: 1.06; letter-spacing: -0.025em; font-weight: 620; } h2 { font-size: 30px; line-height: 1.15; letter-spacing: -0.020em; font-weight: 620; } h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; } h4 { font-size: 17px; line-height: 1.35; letter-spacing: -0.010em; font-weight: 600; } p { margin: 0 0 var(--s-4); color: var(--ink-2); text-wrap: pretty; } /* Mono is a semantic choice: anything a machine produced or would parse. */ .mono, .num, code, kbd, samp, pre, .b-table td, .b-table th, .b-meta, .b-label { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ---------- LAYOUT ----------------------------------------- */ .b-wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); } .b-main { padding-bottom: var(--s-9); } .b-section { margin-top: 72px; } .b-section-tight { margin-top: 36px; } .b-measure { max-width: var(--measure); text-wrap: pretty; } /* ---------- 1. NAV ----------------------------------------- */ .b-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: 14px var(--gutter); background: var(--surface); border-bottom: 1px solid var(--rule); } .b-nav-left { display: flex; align-items: center; gap: 28px; min-width: 0; } .b-logo { display: flex; align-items: baseline; gap: var(--s-2); text-decoration: none; } .b-logo:hover { text-decoration: none; } .b-logo b { font-family: var(--font-mono); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); } .b-logo span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .b-nav-links { display: flex; gap: 20px; font-size: 13.5px; } .b-nav-links a { color: var(--ink-2); text-decoration: none; white-space: nowrap; } .b-nav-links a:hover { color: var(--ink); text-decoration: none; } .b-nav-links a[aria-current="page"] { color: var(--ink); font-weight: 530; box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 3px; } .b-nav-right { display: flex; align-items: center; gap: 10px; } .b-theme { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; padding: 6px 10px; border: 1px solid var(--rule-strong); background: var(--surface-2); color: var(--ink-2); border-radius: var(--r-md); cursor: pointer; } .b-theme:hover { color: var(--ink); } /* Dropdown */ .b-more { position: relative; display: inline-flex; align-items: center; } .b-more-btn { font: inherit; font-size: 13.5px; color: var(--ink-2); background: none; border: 0; cursor: pointer; padding: 0; } .b-more-btn:hover { color: var(--ink); } .b-menu { position: absolute; left: 0; right: auto; top: calc(100% + 14px); min-width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow); display: none; } .b-more[data-open="true"] .b-menu { display: block; } .b-menu a { display: block; padding: 8px 12px; border-radius: var(--r-md); font-size: 13.5px; color: var(--ink-2); text-decoration: none; } .b-menu a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } /* ---------- 2. RANKED DATA TABLE --------------------------- */ .b-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .b-table thead th { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); text-align: right; padding: 12px 0 10px 16px; vertical-align: bottom; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; } .b-table thead th .b-unit { display: block; font-family: var(--font-sans); font-size: 10px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); margin-top: 3px; } .b-table th.b-col-rank { width: 44px; padding: 12px 10px 10px 0; } .b-table th.b-col-model { text-align: left; padding: 12px 14px 10px 0; } .b-table th.b-col-lic { text-align: left; } .b-table th[aria-sort] { cursor: pointer; } .b-table th[aria-sort]:hover { color: var(--ink-2); } .b-table th[aria-sort="ascending"], .b-table th[aria-sort="descending"] { color: var(--ink); } .b-sort-arrow { color: var(--accent); margin-left: 5px; } .b-table tbody tr { border-bottom: 1px solid var(--rule); } .b-table tbody tr:hover { background: var(--surface-2); } .b-table td { padding: 11px 0 11px 16px; text-align: right; } .b-rank { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); text-align: right; padding: 13px 10px 13px 0 !important; } .b-model { text-align: left !important; padding: 11px 14px 11px 0 !important; } .b-model-id { font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); } a.b-model-id:hover { color: var(--accent); } .b-model-sub { font-family: var(--font-sans); font-size: 12px; color: var(--ink-3); margin-top: 3px; font-variant-numeric: normal; } .b-score-cell { } .b-score { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .b-score-track { display: block; width: 64px; height: 5px; background: var(--surface-3); border-radius: 2px; overflow: hidden; flex: none; } .b-score-fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; } .b-score-num { font-family: var(--font-mono); font-size: 14.5px; font-weight: 600; min-width: 26px; display: inline-block; color: var(--ink); } .b-num { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); } .b-num-2 { color: var(--ink-2); } .b-numwrap { display: inline-flex; align-items: center; gap: 6px; } .b-none { color: var(--ink-3); } .b-ram { font-family: var(--font-mono); font-size: 12.5px; padding: 3px 8px; border-radius: var(--r-sm); color: var(--ink); white-space: nowrap; } .b-ram-1 { background: var(--ram-1); } .b-ram-2 { background: var(--ram-2); } .b-ram-3 { background: var(--ram-3); } .b-ram-4 { background: var(--ram-4); } .b-lic { font-family: var(--font-mono); font-size: 11.5px; padding: 3px 8px; border-radius: var(--r-sm); white-space: nowrap; } .b-lic-open { color: var(--lic-open); background: var(--lic-open-wash); } .b-lic-cond { color: var(--lic-cond); background: var(--lic-cond-wash); } .b-lic-closed { color: var(--lic-closed); background: var(--lic-closed-wash); } .b-table td.b-lic-cell { text-align: left; } /* ---------- 3. PROVENANCE MARKS ---------------------------- */ .b-prov { width: 8px; height: 8px; flex: none; display: inline-block; box-sizing: border-box; } .b-prov-sourced { background: var(--prov-sourced); } .b-prov-estimated { border: 1.5px solid var(--prov-est); transform: rotate(45deg); } .b-prov-community { border: 1.5px solid var(--prov-comm); border-radius: 50%; } .b-prov-key { border: 1px solid var(--rule); background: var(--surface); border-radius: var(--r-lg); padding: 16px 18px; } .b-prov-key-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .b-prov-rows { display: grid; gap: 10px; } .b-prov-row { display: flex; gap: 10px; align-items: flex-start; } .b-prov-row .b-prov { margin-top: 5px; } .b-prov-name { font-size: 13px; font-weight: 540; color: var(--ink); } .b-prov-gloss { font-size: 12px; color: var(--ink-3); line-height: 1.4; } /* ---------- 4. FILTER CHIPS -------------------------------- */ .b-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .b-filter-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; } .b-filter-div { width: 1px; height: 20px; background: var(--rule); margin: 0 var(--s-2); } .b-spacer { flex: 1; } .b-count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .b-chip { font-family: var(--font-mono); font-size: 11.5px; padding: 5px 10px; border-radius: var(--r-md); border: 1px solid var(--rule-strong); background: transparent; color: var(--ink-2); cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.4; } .b-chip:hover { border-color: var(--ink-3); color: var(--ink); text-decoration: none; } .b-chip[aria-pressed="true"], .b-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--paper); } .b-chip[disabled], .b-chip[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } /* ---------- 5. ANSWER CAPSULE (class name is fixed) -------- */ .answer-capsule { font-family: var(--font-sans); font-size: 16.5px; line-height: 1.55; color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; border-left: 2px solid var(--accent); padding: 2px 0 2px 16px; margin: 0; background: none; } .answer-capsule strong, .answer-capsule b { color: var(--ink); font-weight: 530; } /* ---------- 6. STAT / SPEC CARD ---------------------------- */ .b-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; } .b-card { border: 1px solid var(--rule); background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px; } .b-card-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .b-card-value { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 8px; display: flex; align-items: center; gap: 8px; } .b-card-unit { color: var(--ink-3); font-size: 0.6em; } .b-card-note { font-size: 12px; color: var(--ink-3); margin-top: 6px; } /* ---------- 7. BENCHMARK ROW ------------------------------- */ .b-harness { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); } .b-sp-1 { background: var(--sp-1); } .b-sp-2 { background: var(--sp-2); } .b-sp-3 { background: var(--sp-3); } .b-sp-4 { background: var(--sp-4); } .b-sp-5 { background: var(--sp-5); } .b-table td.b-sp-1, .b-table td.b-sp-2, .b-table td.b-sp-3, .b-table td.b-sp-4, .b-table td.b-sp-5 { color: var(--ink); } .b-group-head td { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); padding: 8px 0 8px 16px; text-align: left; position: sticky; top: 57px; z-index: 5; } /* ---------- 8. HERO ---------------------------------------- */ .b-hero { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; padding: 44px 0 28px; } .b-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } .b-hero h1 { margin: 0 0 18px; } /* ---------- 9. COMPARISON TABLE ---------------------------- */ .b-compare { width: 100%; border-collapse: collapse; } .b-compare th, .b-compare td { padding: 11px 16px; border-bottom: 1px solid var(--rule); text-align: left; } .b-compare .b-rowlabel { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--surface); position: sticky; left: 0; white-space: nowrap; } .b-compare .b-best { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); } /* ---------- 10. BUY BOX + RAIL ----------------------------- */ .b-buybox { border: 1px solid var(--rule); background: var(--surface); border-radius: var(--r-lg); padding: 18px 20px; } .b-buybox-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .b-buybox-name { font-size: 17px; font-weight: 600; color: var(--ink); margin: 8px 0 6px; } .b-buybox-why { font-size: 15.5px; color: var(--ink-2); margin: 0 0 10px; } .b-buybox-spec { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; } .b-cta { display: inline-block; background: var(--accent); color: var(--paper); font-size: 14px; font-weight: 560; padding: 10px 16px; border-radius: var(--r-md); text-decoration: none; } .b-cta:hover { background: var(--accent-2); color: var(--paper); text-decoration: none; } .b-disclosure { font-size: 11.5px; color: var(--ink-3); margin: 10px 0 0; line-height: 1.45; } .b-rail { display: none; } @media (min-width: 1200px) { .b-rail { display: block; position: sticky; top: 88px; width: 300px; } .b-rail .b-buybox { box-shadow: var(--shadow-rail); } } /* ---------- 11. DENSE TABLE ON MOBILE ---------------------- */ .b-rowcards { display: none; } .b-rowcard { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 14px; border-bottom: 1px solid var(--rule); } .b-rowcard-score { font-family: var(--font-mono); font-size: 21px; font-weight: 640; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; } .b-rowcard-rank { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; } .b-rowcard-id { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--ink); } a.b-rowcard-id { text-decoration: none; } .b-rowcard-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; } .b-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; } .b-well { background: var(--surface-2); border-radius: var(--r-md); padding: 7px 9px; } .b-well.b-ram-1 { background: var(--ram-1); } .b-well.b-ram-2 { background: var(--ram-2); } .b-well.b-ram-3 { background: var(--ram-3); } .b-well.b-ram-4 { background: var(--ram-4); } .b-well-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); } .b-well-value { font-family: var(--font-mono); font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 3px; display: flex; align-items: center; gap: 5px; } /* ---------- 12. FAQ ---------------------------------------- */ .b-faq details { border-bottom: 1px solid var(--rule); padding: 16px 0; } .b-faq summary { font-size: 17px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .b-faq summary::-webkit-details-marker { display: none; } .b-faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--ink-3); font-size: 18px; flex: none; } .b-faq details[open] summary::after { content: "\2212"; } .b-faq p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: var(--measure); padding-top: 10px; margin: 0; } /* ---------- 13. CALLOUT ------------------------------------ */ .b-callout { background: var(--surface-2); border: 1px solid var(--rule); border-left: 2px solid var(--rule-strong); border-radius: var(--r-lg); padding: 16px 18px; margin: var(--s-5) 0; } .b-callout-method { border-left-color: var(--accent); } .b-callout-caution { border-left-color: var(--lic-cond); } .b-callout-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .b-callout p { font-size: 15.5px; color: var(--ink-2); margin: 0; } .b-callout p + p { margin-top: 10px; } /* ---------- 14. CODE --------------------------------------- */ .b-code { background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-lg); margin: var(--s-4) 0; overflow: hidden; } .b-code-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); padding: 8px 16px; border-bottom: 1px solid var(--rule); } .b-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.55; color: var(--ink); } code { font-family: var(--font-mono); font-size: 0.92em; background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-sm); color: var(--ink); } .b-code pre code { background: none; padding: 0; } /* ---------- 15. BREADCRUMBS -------------------------------- */ .b-crumbs { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-bottom: 14px; padding-top: 18px; } .b-crumbs a { color: var(--ink-3); } .b-crumbs a:hover { color: var(--ink-2); } .b-crumbs .sep { color: var(--rule-strong); margin: 0 6px; } .b-crumbs [aria-current] { color: var(--ink-2); } /* ---------- 16. FOOTER ------------------------------------- */ .b-footer { border-top: 1px solid var(--rule); background: var(--surface); padding: 44px var(--gutter) 64px; margin-top: 96px; } .b-footer-inner { max-width: var(--page-max); margin: 0 auto; } .b-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .b-footer-col h4 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin: 0 0 12px; } .b-footer-col a { display: block; font-size: 13.5px; color: var(--ink-2); margin-bottom: 8px; text-decoration: none; } .b-footer-col a:hover { color: var(--ink); text-decoration: none; } .b-footer-base { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 18px; } .b-footer-base a { color: var(--ink-3); } /* ---------- 17. PAGER / EMPTY ------------------------------ */ .b-tablefoot { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px 0 0; font-size: 12.5px; color: var(--ink-3); } .b-pager { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .b-empty { padding: 56px 0; text-align: center; } .b-empty p { font-size: 15.5px; color: var(--ink-2); } /* ---------- 18. UTILITIES ---------------------------------- */ .b-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .b-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .b-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .b-note { font-size: 12px; color: var(--ink-3); } /* ---------- A11Y ------------------------------------------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---------- RESPONSIVE ------------------------------------- */ @media (max-width: 1199px) { .b-rail { display: none; } } @media (max-width: 899px) { .b-hero { grid-template-columns: 1fr; gap: 28px; padding: 32px 0 24px; } } @media (max-width: 759px) { :root { --gutter: 16px; } h1 { font-size: 32px; } h2 { font-size: 24px; } .b-table { display: none; } .b-rowcards { display: block; } .b-nav-links { display: none; } .b-nav .b-meta { display: none; } .b-theme, .b-more-btn { min-height: 44px; display: inline-flex; align-items: center; } .b-chip { min-height: 34px; display: inline-flex; align-items: center; } .b-filters { gap: 6px; } .b-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; } .b-tablefoot { flex-direction: column; align-items: flex-start; gap: 10px; } } /* ============================================================ LEGACY BRIDGE — maps the retired terminal-era variable names onto Bench tokens so pages that still carry hand-written layout CSS render in the new language without DOM surgery. Delete a page's alias block once it is natively Bench. ============================================================ */ :root { --bg-base: var(--paper); --bg-surface: var(--surface); --bg-elevated: var(--surface-2); --phosphor: var(--accent); --phosphor-dim: var(--accent-wash); --text-main: var(--ink); --text-muted: var(--ink-3); --text-dark: var(--ink-3); --border-subtle: var(--rule); --border-focus: var(--rule-strong); --font-ui: var(--font-sans); --font-pixel: var(--font-sans); --yellow: var(--lic-cond); --red: var(--lic-cond); --radius: var(--r-lg); --radius-sm: var(--r-md); --radius-xs: var(--r-sm); } /* Kill the CRT costume wherever it still exists: the 32px grid was painted as a background-image on , the scanlines as pseudo-elements. */ body::before, body::after { content: none !important; background: none !important; display: none !important; } body { background-image: none !important; } /* Legacy chrome that must not fight the Bench nav/footer. */ .topnav, .footer { display: none !important; } /* Legacy content components, restyled on Bench tokens. */ .container, .page-wrap, .article-wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); } .article-wrap { max-width: 760px; } .hero { padding: 44px 0 28px; } .section { margin-top: 56px; } .section-divider { border: 0; border-top: 1px solid var(--rule); margin: 56px 0; } .answer-capsule { /* Bench owns this; legacy pages inherit it */ } .callout, .callout.blue, .callout.amber, .buy-box, .retro-box, .spec-card, .stat-card, .related-card, .faq-item, .sources-section, .cta-block, .checker-callout { background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-lg); color: var(--ink-2); } .callout { border-left: 2px solid var(--rule-strong); padding: 16px 18px; margin: 24px 0; } .callout.blue { border-left-color: var(--accent); } .callout.amber { border-left-color: var(--lic-cond); } .callout p, .faq-item p, .related-card p { color: var(--ink-2); } .spec-card, .stat-card { background: var(--surface); padding: 14px 16px; } .spec-grid, .stats-bar, .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .stat-card, .spec-card { padding: 14px 16px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .stat-number { font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .stat-card .stat-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; } .stat-value { font-size: 22px; font-weight: 600; margin-top: 6px; display: flex; align-items: center; gap: 8px; } .stat-unit { font-size: 12px; color: var(--ink-3); margin-top: 4px; font-family: var(--font-mono); } .hero h1 em { font-style: normal; } .s-label, .stat-label, .label, .recap-date, .related-label, .toc-label, .b-legacy-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .s-val, .stat-value { font-family: var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; } .vs-table, .bench-table, .lb-table, table.data { width: 100%; border-collapse: collapse; } .vs-table th, .bench-table th, .lb-table th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; text-align: left; padding: 12px 16px 10px 0; border-bottom: 1px solid var(--rule-strong); background: none; } .vs-table td, .bench-table td, .lb-table td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .vs-table caption { caption-side: bottom; text-align: left; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding-top: 10px; } .vs-table .winner, .highlight-row { color: var(--ink); font-weight: 600; } .model-name, .chip-name { color: var(--ink); font-family: var(--font-mono); } .rank { font-family: var(--font-mono); color: var(--ink-3); } .tag, .moe-label, .est { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); background: var(--surface-2); border-radius: var(--r-sm); padding: 2px 7px; } .code-block, pre { background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-lg); color: var(--ink); } .buy-box { border-left: 2px solid var(--accent); padding: 18px 20px; } .buy-box-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .buy-btn, .cta-btn, .cta-bar-btn, .hero-cta { background: var(--accent); color: var(--paper); border-radius: var(--r-md); font-family: var(--font-sans); font-weight: 560; text-decoration: none; } .buy-btn:hover, .cta-btn:hover { background: var(--accent-2); color: var(--paper); } .buy-box-disclosure { font-size: 11.5px; color: var(--ink-3); } .faq-item { padding: 16px 18px; margin-bottom: 12px; } .faq-q { color: var(--ink); font-weight: 600; font-size: 17px; } .faq-a { color: var(--ink-2); font-size: 15.5px; } .author-bio, .article-meta, .breadcrumb, .b-legacy-meta { color: var(--ink-3); } .breadcrumb a { color: var(--ink-3); } .status-dot { background: var(--accent); } /* Generated pages used to set the whole document in monospace. Prose is Inter; measurement stays mono. */ body, .container p, .section p, .article-body p, li, .faq-a { font-family: var(--font-sans); } /* ============================================================ GENERATED PAGES — hubs, Mac picks, chip links. These live in the two Python generators; styled here so the generators stay pure markup. ============================================================ */ /* --- /best-llm/ + /models/ hub cards --- */ .hub-group { margin-top: 48px; } .hub-group > h2 { margin-bottom: 18px; } .hub-grid, .model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .hub-card, .model-grid .model-card { display: block; border: 1px solid var(--rule); background: var(--surface); border-radius: var(--r-lg); padding: 16px 18px; text-decoration: none; } .hub-card:hover, .model-grid .model-card:hover { border-color: var(--rule-strong); text-decoration: none; } .hc-name, .model-grid .model-name { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; display: block; } .hc-meta, .model-grid .model-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-top: 6px; font-variant-numeric: tabular-nums; display: block; } .hc-best { font-size: 12.5px; color: var(--ink-2); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); display: block; } .model-grid .model-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .model-grid .model-badge { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); border-radius: var(--r-sm); padding: 2px 7px; flex: none; } .chip-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .chip-link { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 5px 9px; text-decoration: none; background: var(--paper); } .chip-link:hover { border-color: var(--ink-3); text-decoration: none; } .chip-name { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); } .chip-tps { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); font-variant-numeric: tabular-nums; } .chip-ram { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); } /* --- Mac page: the pick + runners-up --- */ .picks { display: grid; gap: 12px; margin-top: 18px; } .pick { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px; border: 1px solid var(--rule); background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px; } .pick.best { border-color: var(--rule-strong); box-shadow: inset 2px 0 0 var(--accent); } .pick .rank { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); text-align: right; } .pick-name { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--ink); } .pick-meta { font-size: 12px; color: var(--ink-3); margin-top: 3px; } .pick-speed { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .pick-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); border-radius: var(--r-sm); padding: 2px 7px; margin-left: 8px; } .related { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .other-chip-link, .related a { font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 5px 10px; text-decoration: none; color: var(--ink-2); } .other-chip-link:hover, .related a:hover { border-color: var(--ink-3); color: var(--ink); text-decoration: none; } @media (max-width: 759px) { .hub-grid, .model-grid { grid-template-columns: 1fr; } .pick { grid-template-columns: 28px 1fr; } .pick-speed { grid-column: 2; text-align: left; } } /* ============================================================ BENCH AUTHORITY Page-level inline