Spaces:
Running
Running
| :root { | |
| --ink: #19212d; | |
| --muted: #697587; | |
| --line: #e7e8eb; | |
| --surface: #ffffff; | |
| --soft: #f7f7f6; | |
| --accent: #356fbe; | |
| --accent-dark: #24508e; | |
| --accent-soft: #edf4ff; | |
| --blue-soft: #edf3ff; | |
| --green: #21855b; | |
| --shadow: 0 18px 50px rgba(33, 39, 49, 0.08); | |
| color-scheme: light; | |
| } | |
| html[data-theme="dark"] { | |
| --ink: #eef1f6; | |
| --muted: #9da8b8; | |
| --line: #303744; | |
| --surface: #171c24; | |
| --soft: #202630; | |
| --accent: #78aaf0; | |
| --accent-dark: #a8caff; | |
| --accent-soft: #1d2d43; | |
| --blue-soft: #202a3b; | |
| --green: #62c997; | |
| --shadow: 0 20px 55px rgba(0, 0, 0, 0.34); | |
| color-scheme: dark; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| min-height: 100%; | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| min-height: 100vh; | |
| min-height: 100dvh; | |
| margin: 0; | |
| color: var(--ink); | |
| background: radial-gradient( | |
| circle at 8% 0%, | |
| rgba(53, 111, 190, 0.09), | |
| transparent 25rem | |
| ), | |
| #fbfbfa; | |
| font-family: "DM Sans", system-ui, sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| button, | |
| input, | |
| select { | |
| font: inherit; | |
| } | |
| button, | |
| select, | |
| label { | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| .shell { | |
| width: min(1460px, calc(100% - 40px)); | |
| margin: 0 auto; | |
| padding: 34px 0 24px; | |
| } | |
| .hero { | |
| position: relative; | |
| min-height: 190px; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 30px 52px; | |
| border: 1px solid rgba(53, 111, 190, 0.16); | |
| border-radius: 28px; | |
| background: linear-gradient(118deg, #fff 18%, #f7faff 62%, #edf4ff 100%); | |
| box-shadow: var(--shadow); | |
| } | |
| .hero::before { | |
| content: ""; | |
| position: absolute; | |
| width: 240px; | |
| height: 240px; | |
| right: 12%; | |
| top: -58%; | |
| border: 1px solid rgba(53, 111, 190, 0.15); | |
| border-radius: 50%; | |
| } | |
| .hero-tools { | |
| position: absolute; | |
| z-index: 3; | |
| top: 20px; | |
| right: 22px; | |
| display: flex; | |
| align-items: center; | |
| gap: 9px; | |
| } | |
| .theme-toggle { | |
| display: grid; | |
| place-items: center; | |
| width: 38px; | |
| height: 38px; | |
| padding: 0; | |
| border: 1px solid rgba(25, 33, 45, 0.12); | |
| border-radius: 11px; | |
| color: #4e5b6e; | |
| background: rgba(255, 255, 255, 0.72); | |
| backdrop-filter: blur(8px); | |
| cursor: pointer; | |
| transition: 150ms ease; | |
| } | |
| .theme-toggle:hover { | |
| border-color: rgba(53, 111, 190, 0.4); | |
| color: var(--accent-dark); | |
| transform: translateY(-1px); | |
| } | |
| .theme-toggle svg { | |
| width: 19px; | |
| height: 19px; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 1.8; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| .moon-icon { | |
| display: none; | |
| } | |
| html[data-theme="dark"] .sun-icon { | |
| display: none; | |
| } | |
| html[data-theme="dark"] .moon-icon { | |
| display: block; | |
| } | |
| .hero-copy { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 980px; | |
| } | |
| .eyebrow { | |
| display: flex; | |
| align-items: center; | |
| gap: 9px; | |
| margin: 0; | |
| color: var(--accent-dark); | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| } | |
| .eyebrow-mark { | |
| width: 18px; | |
| height: 3px; | |
| border-radius: 2px; | |
| background: var(--accent); | |
| } | |
| h1, | |
| h2, | |
| h3 { | |
| font-family: "Manrope", system-ui, sans-serif; | |
| } | |
| h1 { | |
| margin: 8px 0 10px; | |
| font-size: clamp(38px, 5vw, 60px); | |
| line-height: 0.98; | |
| letter-spacing: -0.055em; | |
| } | |
| .heading-flag { | |
| display: inline-block; | |
| margin-right: 0.08em; | |
| font-size: 0.9em; | |
| line-height: 1; | |
| letter-spacing: 0; | |
| transform: translateY(-0.02em); | |
| } | |
| .lede { | |
| max-width: 710px; | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: clamp(16px, 2vw, 19px); | |
| line-height: 1.6; | |
| } | |
| .version-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| margin-right: 7px; | |
| padding: 2px 7px; | |
| border: 1px solid rgba(53, 111, 190, 0.25); | |
| border-radius: 999px; | |
| color: var(--accent-dark); | |
| background: var(--accent-soft); | |
| font-size: 0.68em; | |
| font-weight: 800; | |
| letter-spacing: 0.04em; | |
| vertical-align: 0.12em; | |
| } | |
| .hero-art { | |
| z-index: 1; | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| height: 92px; | |
| padding: 0 34px; | |
| } | |
| .hero-art span { | |
| display: block; | |
| width: 8px; | |
| border-radius: 10px; | |
| background: linear-gradient(180deg, var(--accent), #79a9eb); | |
| opacity: 0.82; | |
| } | |
| .hero-art span:nth-child(1), | |
| .hero-art span:nth-child(9) { | |
| height: 20%; | |
| } | |
| .hero-art span:nth-child(2), | |
| .hero-art span:nth-child(8) { | |
| height: 42%; | |
| } | |
| .hero-art span:nth-child(3), | |
| .hero-art span:nth-child(7) { | |
| height: 68%; | |
| } | |
| .hero-art span:nth-child(4), | |
| .hero-art span:nth-child(6) { | |
| height: 92%; | |
| } | |
| .hero-art span:nth-child(5) { | |
| height: 60%; | |
| } | |
| .navigation-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| margin: 20px 0; | |
| } | |
| .noscript-notice { | |
| margin: 14px 0 0; | |
| padding: 13px 16px; | |
| border: 1px solid #efb5b5; | |
| border-radius: 12px; | |
| color: #8a2525; | |
| background: #fff0f0; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| .noscript-notice strong { | |
| margin-right: 4px; | |
| } | |
| html:not([data-js="enabled"]) .comparison-chart { | |
| display: none; | |
| } | |
| html:not([data-js="enabled"]) .theme-toggle { | |
| display: none; | |
| } | |
| html:not([data-js="enabled"]) .tabs, | |
| html:not([data-js="enabled"]) .table-controls, | |
| html:not([data-js="enabled"]) .version-link, | |
| html:not([data-js="enabled"]) .version-selector { | |
| display: none; | |
| } | |
| html:not([data-js="enabled"]) .navigation-row { | |
| justify-content: center; | |
| } | |
| html:not([data-js="enabled"]) .blog-link { | |
| margin-left: 0; | |
| } | |
| .tabs { | |
| display: flex; | |
| gap: 6px; | |
| padding: 6px; | |
| width: fit-content; | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| background: rgba(255, 255, 255, 0.86); | |
| } | |
| .tab { | |
| padding: 10px 18px; | |
| border: 0; | |
| border-radius: 9px; | |
| color: var(--muted); | |
| background: transparent; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: 150ms ease; | |
| } | |
| .tab:hover { | |
| color: var(--ink); | |
| background: var(--soft); | |
| } | |
| .tab.is-active { | |
| color: #fff; | |
| background: var(--ink); | |
| box-shadow: 0 5px 15px rgba(25, 33, 45, 0.18); | |
| } | |
| .blog-link { | |
| margin-left: 18px; | |
| color: var(--accent-dark); | |
| font-size: 13px; | |
| font-weight: 700; | |
| text-decoration: underline; | |
| text-decoration-thickness: 1px; | |
| text-underline-offset: 3px; | |
| white-space: nowrap; | |
| transition: 150ms ease; | |
| } | |
| .blog-link:hover { | |
| color: var(--accent); | |
| } | |
| .panel { | |
| animation: reveal 240ms ease; | |
| } | |
| @keyframes reveal { | |
| from { | |
| opacity: 0; | |
| transform: translateY(5px); | |
| } | |
| } | |
| .view-switch { | |
| display: inline-flex; | |
| gap: 4px; | |
| margin-bottom: 14px; | |
| padding: 4px; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| background: var(--surface); | |
| } | |
| .view-button { | |
| padding: 9px 14px; | |
| border: 0; | |
| border-radius: 8px; | |
| color: var(--muted); | |
| background: transparent; | |
| cursor: pointer; | |
| font-size: 13px; | |
| font-weight: 700; | |
| } | |
| .view-button:hover { | |
| color: var(--ink); | |
| background: var(--soft); | |
| } | |
| .view-button.is-active { | |
| color: #fff; | |
| background: #315f9d; | |
| box-shadow: 0 4px 12px rgba(36, 80, 142, 0.24); | |
| } | |
| .filter-card { | |
| display: grid; | |
| gap: 20px; | |
| padding: 20px; | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| background: rgba(255, 255, 255, 0.92); | |
| } | |
| .filter-card { | |
| grid-template-columns: 1fr; | |
| } | |
| .controls-label { | |
| grid-column: 1 / -1; | |
| margin: 0 0 -4px; | |
| color: var(--muted); | |
| font-size: 10px; | |
| font-weight: 800; | |
| letter-spacing: 0.075em; | |
| text-transform: uppercase; | |
| } | |
| .dataset-field { | |
| grid-column: 1 / -1; | |
| } | |
| .matrix-view .dataset-field { | |
| display: none; | |
| } | |
| .matrix-metric-field { | |
| grid-column: 1 / -1; | |
| width: auto; | |
| } | |
| .field { | |
| min-width: 0; | |
| } | |
| .field > label, | |
| fieldset legend { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: #4c5665; | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| } | |
| fieldset { | |
| min-width: 0; | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| } | |
| .choice-pill input { | |
| position: absolute; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .choice-options { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .choice-pill { | |
| position: relative; | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 40px; | |
| padding: 0 14px; | |
| border: 1px solid #dadde2; | |
| border-radius: 10px; | |
| color: #586475; | |
| background: #fff; | |
| cursor: pointer; | |
| font-size: 13px; | |
| font-weight: 700; | |
| transition: 150ms ease; | |
| } | |
| .choice-pill:hover { | |
| border-color: #b8c3d2; | |
| color: var(--ink); | |
| } | |
| .choice-pill:has(input:checked) { | |
| border-color: #4f83c9; | |
| color: #fff; | |
| background: #315f9d; | |
| box-shadow: 0 4px 12px rgba(36, 80, 142, 0.22); | |
| } | |
| .choice-pill.combined-choice:has(input:checked) { | |
| border-color: #142d4f; | |
| background: #0d2a4f; | |
| box-shadow: 0 4px 15px rgba(7, 25, 49, 0.42); | |
| } | |
| .color-toggle { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 7px; | |
| height: 30px; | |
| padding: 0 10px; | |
| border: 1px solid #dadde2; | |
| border-radius: 8px; | |
| color: #586475; | |
| background: transparent; | |
| cursor: pointer; | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| .color-toggle:hover { | |
| border-color: #b8c3d2; | |
| color: var(--ink); | |
| } | |
| .color-toggle.is-active { | |
| border-color: rgba(53, 111, 190, 0.4); | |
| color: var(--accent-dark); | |
| background: var(--accent-soft); | |
| } | |
| .color-swatch { | |
| width: 6px; | |
| height: 13px; | |
| border-radius: 3px; | |
| opacity: 0.85; | |
| } | |
| .color-swatch.good { | |
| background: #22c55e; | |
| } | |
| .color-swatch.mid { | |
| margin-left: -4px; | |
| background: #eab308; | |
| } | |
| .color-swatch.bad { | |
| margin-left: -4px; | |
| background: #ef4444; | |
| } | |
| #matrix-metric-options .choice-pill { | |
| justify-content: center; | |
| width: 94px; | |
| padding-inline: 10px; | |
| } | |
| .table-heading { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: end; | |
| margin: 6px 2px 12px; | |
| } | |
| .table-heading h2 { | |
| margin: 0 0 3px; | |
| font-size: 21px; | |
| letter-spacing: -0.025em; | |
| } | |
| .table-heading p { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 13px; | |
| } | |
| .table-tools { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .result-count { | |
| padding: 6px 10px; | |
| border-radius: 999px; | |
| color: var(--muted); | |
| background: #eeefef; | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| .version-link { | |
| padding: 0; | |
| border: 0; | |
| color: var(--accent-dark); | |
| background: transparent; | |
| font: inherit; | |
| font-size: 12px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| } | |
| .version-link:hover, | |
| .version-link:focus-visible { | |
| color: var(--accent); | |
| text-decoration: underline; | |
| } | |
| .version-selector { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| .version-selector select { | |
| min-height: 29px; | |
| padding: 4px 25px 4px 8px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| color: var(--ink); | |
| background: var(--surface); | |
| font: inherit; | |
| cursor: pointer; | |
| } | |
| .version-notice { | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin: 0 2px 14px; | |
| padding: 10px 13px; | |
| border: 1px solid #f0d9a3; | |
| border-radius: 12px; | |
| color: #7a5a18; | |
| background: #fff8e8; | |
| font-size: 13px; | |
| } | |
| .version-notice[hidden] { | |
| display: none; | |
| } | |
| .version-notice .version-link { | |
| margin-left: auto; | |
| } | |
| .table-card { | |
| overflow: hidden; | |
| min-height: 180px; | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| background: var(--surface); | |
| box-shadow: 0 10px 32px rgba(35, 40, 48, 0.05); | |
| } | |
| .table-scroll { | |
| /* Header (37px) plus fifteen 37px leaderboard rows. */ | |
| max-height: 592px; | |
| overflow: auto; | |
| scrollbar-gutter: stable; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| font-size: 14px; | |
| } | |
| th, | |
| td { | |
| padding: 10px 16px; | |
| border-bottom: 1px solid #eceef0; | |
| text-align: right; | |
| white-space: nowrap; | |
| } | |
| th { | |
| position: sticky; | |
| top: 0; | |
| z-index: 2; | |
| color: #697483; | |
| background: #f7f7f6; | |
| font-size: 11px; | |
| letter-spacing: 0.055em; | |
| text-transform: uppercase; | |
| } | |
| th:first-child, | |
| td:first-child { | |
| position: sticky; | |
| left: 0; | |
| z-index: 2; | |
| width: 64px; | |
| min-width: 64px; | |
| text-align: center; | |
| background: #fff; | |
| } | |
| th:first-child { | |
| z-index: 4; | |
| background: #f7f7f6; | |
| } | |
| th:nth-child(2), | |
| td:nth-child(2) { | |
| position: sticky; | |
| left: 64px; | |
| z-index: 1; | |
| width: 385px; | |
| min-width: 385px; | |
| max-width: 385px; | |
| overflow: hidden; | |
| text-align: left; | |
| background: #fff; | |
| } | |
| th:nth-child(2) { | |
| z-index: 3; | |
| background: #f7f7f6; | |
| } | |
| th:nth-child(3), | |
| td:nth-child(3) { | |
| width: 156px; | |
| min-width: 156px; | |
| max-width: 156px; | |
| text-align: left; | |
| } | |
| th:nth-child(n + 4), | |
| td:nth-child(n + 4) { | |
| width: 110px; | |
| min-width: 110px; | |
| } | |
| .combined-score { | |
| border-right: 2px solid #c8ced7; | |
| border-left: 3px solid #aeb7c3; | |
| } | |
| tbody tr:last-child td { | |
| border-bottom: 0; | |
| } | |
| tbody tr:hover td { | |
| background: #fbfbfa; | |
| } | |
| tbody tr:hover td:first-child { | |
| background: #fbfbfa; | |
| } | |
| tbody tr:hover td:nth-child(2) { | |
| background: #fbfbfa; | |
| } | |
| .model-cell { | |
| display: flex; | |
| align-items: center; | |
| width: 100%; | |
| min-width: 0; | |
| } | |
| .model-name { | |
| flex: 0 1 auto; | |
| min-width: 0; | |
| overflow: hidden; | |
| color: #26374e; | |
| font-weight: 700; | |
| text-overflow: ellipsis; | |
| } | |
| .model-origin-flag { | |
| display: inline-grid; | |
| flex: 0 0 16px; | |
| place-items: center; | |
| width: 16px; | |
| height: 16px; | |
| margin-left: 6px; | |
| border-radius: 50%; | |
| background: linear-gradient( | |
| to bottom, | |
| #d90012 0 33.33%, | |
| #0033a0 33.33% 66.66%, | |
| #f2a800 66.66% 100% | |
| ); | |
| box-shadow: inset 0 0 0 1px rgb(38 55 78 / 22%); | |
| } | |
| .model-link { | |
| display: inline-grid; | |
| flex: 0 0 24px; | |
| place-items: center; | |
| width: 24px; | |
| height: 24px; | |
| margin-left: 6px; | |
| border-radius: 6px; | |
| color: #7d8999; | |
| text-decoration: none; | |
| } | |
| .model-link:hover { | |
| color: var(--accent-dark); | |
| background: var(--accent-soft); | |
| } | |
| .model-link svg { | |
| width: 15px; | |
| height: 15px; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 1.8; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| .rank { | |
| color: #7a8492; | |
| font: 700 12px "Manrope", sans-serif; | |
| } | |
| .rank.rank-top { | |
| color: var(--accent-dark); | |
| } | |
| .availability-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 5px 9px; | |
| border-radius: 999px; | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| .availability-badge.open { | |
| color: #167149; | |
| background: #eaf7f0; | |
| } | |
| .availability-badge.closed { | |
| color: #677180; | |
| background: #f0f1f3; | |
| } | |
| .availability-control { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .availability-label { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 5px 7px; | |
| border: 0; | |
| border-radius: 7px; | |
| color: inherit; | |
| background: transparent; | |
| cursor: pointer; | |
| font: inherit; | |
| letter-spacing: inherit; | |
| text-transform: inherit; | |
| } | |
| .availability-label:hover, | |
| .availability-label[aria-expanded="true"] { | |
| color: var(--ink); | |
| background: #eceef1; | |
| } | |
| .availability-label span { | |
| padding: 2px 5px; | |
| border-radius: 5px; | |
| color: var(--accent-dark); | |
| background: var(--accent-soft); | |
| font-size: 9px; | |
| } | |
| .availability-label b { | |
| color: #9aa3af; | |
| font-size: 12px; | |
| line-height: 1; | |
| transition: transform 150ms ease; | |
| } | |
| .availability-label[aria-expanded="true"] b { | |
| transform: rotate(180deg); | |
| } | |
| .availability-filters { | |
| position: absolute; | |
| z-index: 8; | |
| top: calc(100% + 7px); | |
| left: 0; | |
| display: flex; | |
| gap: 5px; | |
| padding: 7px; | |
| border: 1px solid var(--line); | |
| border-radius: 9px; | |
| background: var(--surface); | |
| box-shadow: 0 10px 28px rgba(25, 33, 45, 0.16); | |
| } | |
| .availability-filters[hidden] { | |
| display: none; | |
| } | |
| .availability-filter { | |
| min-width: 52px; | |
| height: 23px; | |
| padding: 0 7px; | |
| border: 1px solid #d8dce2; | |
| border-radius: 6px; | |
| color: #8993a1; | |
| background: transparent; | |
| cursor: pointer; | |
| font-size: 9px; | |
| font-weight: 800; | |
| letter-spacing: 0.035em; | |
| text-transform: uppercase; | |
| } | |
| .availability-filter:hover { | |
| color: var(--ink); | |
| border-color: #b8c0cb; | |
| } | |
| .availability-filter.open.is-active { | |
| border-color: rgba(33, 133, 91, 0.3); | |
| color: #167149; | |
| background: #eaf7f0; | |
| } | |
| .availability-filter.closed.is-active { | |
| border-color: #cfd4db; | |
| color: #596575; | |
| background: #e9ebee; | |
| } | |
| .sort-button { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 0; | |
| border: 0; | |
| color: inherit; | |
| background: none; | |
| cursor: pointer; | |
| font: inherit; | |
| letter-spacing: inherit; | |
| text-transform: inherit; | |
| } | |
| .sort-button::after { | |
| content: "↕"; | |
| color: #a3a9b2; | |
| font-size: 12px; | |
| } | |
| .sort-button.is-asc::after { | |
| content: "↑"; | |
| color: var(--accent); | |
| } | |
| .sort-button.is-desc::after { | |
| content: "↓"; | |
| color: var(--accent); | |
| } | |
| .heat-cell.heat-score-1 { | |
| background: rgba(16, 185, 129, 0.38); | |
| } | |
| .heat-cell.heat-score-2 { | |
| background: rgba(132, 204, 22, 0.34); | |
| } | |
| .heat-cell.heat-score-3 { | |
| background: rgba(250, 204, 21, 0.38); | |
| } | |
| .heat-cell.heat-score-4 { | |
| background: rgba(249, 115, 22, 0.34); | |
| } | |
| .heat-cell.heat-score-5 { | |
| background: rgba(244, 63, 94, 0.36); | |
| } | |
| .empty-state { | |
| padding: 48px 20px; | |
| text-align: center; | |
| } | |
| .empty-state h3 { | |
| margin: 0 0 5px; | |
| } | |
| .empty-state p { | |
| margin: 0; | |
| color: var(--muted); | |
| } | |
| .section-intro { | |
| max-width: 760px; | |
| padding: 34px 4px 22px; | |
| } | |
| .section-intro h2 { | |
| margin: 9px 0; | |
| font-size: clamp(28px, 4vw, 42px); | |
| letter-spacing: -0.04em; | |
| } | |
| .section-intro > p:last-child { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 16px; | |
| line-height: 1.7; | |
| } | |
| .dataset-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 14px; | |
| } | |
| .dataset-card { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 310px; | |
| padding: 24px; | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| background: #fff; | |
| box-shadow: 0 9px 28px rgba(35, 40, 48, 0.04); | |
| } | |
| .dataset-card.accent { | |
| background: linear-gradient(135deg, #f5f9ff, #edf4ff); | |
| } | |
| .dataset-card-top { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .dataset-card-top > span:first-child { | |
| color: var(--accent); | |
| font: 700 12px "Manrope", sans-serif; | |
| } | |
| .dataset-tag { | |
| padding: 5px 8px; | |
| border-radius: 999px; | |
| color: #697483; | |
| background: #eeeff1; | |
| font-size: 10px; | |
| font-weight: 800; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| } | |
| .dataset-tag.public { | |
| color: #167149; | |
| background: #eaf7f0; | |
| } | |
| .dataset-tag.private { | |
| color: #7556a5; | |
| background: #f2ecfb; | |
| } | |
| .dataset-card h3 { | |
| margin: 24px 0 7px; | |
| font-size: 19px; | |
| } | |
| .dataset-source { | |
| color: var(--ink); | |
| text-decoration: none; | |
| } | |
| .dataset-source span { | |
| color: var(--accent); | |
| font-size: 14px; | |
| } | |
| .dataset-source:hover { | |
| color: var(--accent-dark); | |
| } | |
| .dataset-card p { | |
| margin: 0; | |
| color: var(--muted); | |
| line-height: 1.55; | |
| } | |
| .dataset-card code { | |
| padding: 1px 4px; | |
| border-radius: 4px; | |
| color: var(--ink); | |
| background: var(--soft); | |
| font-size: 0.86em; | |
| } | |
| .dataset-meta { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 8px; | |
| margin: auto 0 0; | |
| padding-top: 22px; | |
| } | |
| .dataset-meta div { | |
| padding-top: 10px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .dataset-meta dt { | |
| color: #949daa; | |
| font-size: 9px; | |
| font-weight: 800; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .dataset-meta dd { | |
| margin: 3px 0 0; | |
| color: var(--ink); | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| .about-grid { | |
| display: grid; | |
| grid-template-columns: 0.9fr 1.1fr; | |
| gap: 50px; | |
| align-items: start; | |
| } | |
| .definition-list { | |
| margin-top: 38px; | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| background: #fff; | |
| } | |
| .definition-list article { | |
| display: grid; | |
| grid-template-columns: 120px 1fr; | |
| gap: 18px; | |
| padding: 20px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .definition-list article:last-child { | |
| border-bottom: 0; | |
| } | |
| .definition-list strong { | |
| color: var(--accent-dark); | |
| } | |
| .definition-list span { | |
| color: var(--muted); | |
| } | |
| .note { | |
| display: grid; | |
| grid-template-columns: 150px 1fr; | |
| gap: 20px; | |
| margin-top: 18px; | |
| padding: 22px; | |
| border-radius: 16px; | |
| background: var(--blue-soft); | |
| } | |
| .note p, | |
| .note > div p { | |
| margin: 0; | |
| color: #57677e; | |
| } | |
| .note > div p + p { | |
| margin-top: 12px; | |
| } | |
| .method-section { | |
| margin-top: 44px; | |
| } | |
| .section-intro.compact { | |
| padding-top: 0; | |
| } | |
| .pipeline-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 14px; | |
| } | |
| .pipeline-card { | |
| min-height: 220px; | |
| padding: 24px; | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| background: var(--surface); | |
| } | |
| .pipeline-card > span { | |
| color: var(--accent); | |
| font: 700 11px "Manrope", sans-serif; | |
| } | |
| .pipeline-card h3 { | |
| margin: 28px 0 8px; | |
| font-size: 18px; | |
| } | |
| .pipeline-card p { | |
| margin: 0; | |
| color: var(--muted); | |
| line-height: 1.6; | |
| } | |
| .method-footnote { | |
| margin: 14px 0 0; | |
| padding: 18px 20px; | |
| border-left: 3px solid var(--accent); | |
| border-radius: 0 12px 12px 0; | |
| color: var(--muted); | |
| background: var(--soft); | |
| line-height: 1.6; | |
| } | |
| .method-footnote b { | |
| color: var(--ink); | |
| } | |
| .lab-card { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| gap: 40px; | |
| align-items: end; | |
| margin-top: 44px; | |
| padding: 34px; | |
| overflow: hidden; | |
| border: 1px solid rgba(53, 111, 190, 0.19); | |
| border-radius: 22px; | |
| background: linear-gradient(125deg, #f5f9ff, #edf4ff); | |
| } | |
| .lab-card h2 { | |
| margin: 8px 0 10px; | |
| font-size: 30px; | |
| letter-spacing: -0.035em; | |
| } | |
| .lab-card p:last-child { | |
| max-width: 800px; | |
| margin: 0; | |
| color: var(--muted); | |
| line-height: 1.65; | |
| } | |
| .lab-card a { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 16px; | |
| border-radius: 11px; | |
| color: #fff; | |
| background: var(--ink); | |
| text-decoration: none; | |
| white-space: nowrap; | |
| font-weight: 700; | |
| } | |
| .lab-card a:hover { | |
| background: var(--accent-dark); | |
| } | |
| .acknowledgments { | |
| width: 100%; | |
| margin-top: 44px; | |
| padding: 26px 30px; | |
| border: 1px solid var(--line); | |
| border-left: 3px solid var(--accent); | |
| border-radius: 16px; | |
| background: var(--surface); | |
| box-shadow: 0 8px 24px rgba(35, 40, 48, 0.04); | |
| transition: transform 180ms ease, box-shadow 180ms ease, | |
| border-color 180ms ease, background 180ms ease; | |
| } | |
| .acknowledgments-label { | |
| margin: 0 0 8px; | |
| color: var(--accent-dark); | |
| font: 700 12px "Manrope", sans-serif; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .acknowledgments p:last-child { | |
| margin: 0; | |
| color: var(--muted); | |
| line-height: 1.7; | |
| } | |
| .acknowledgments strong { | |
| color: var(--ink); | |
| font-weight: 700; | |
| } | |
| /* Model comparison chart */ | |
| .comparison-chart { | |
| margin-top: 34px; | |
| } | |
| .comparison-chart-heading { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: end; | |
| gap: 28px; | |
| margin: 0 2px 12px; | |
| } | |
| .comparison-chart-heading h2 { | |
| margin: 0 0 3px; | |
| font-size: 21px; | |
| letter-spacing: -0.025em; | |
| } | |
| .comparison-chart-heading p { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 13px; | |
| } | |
| .comparison-chart-controls { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(130px, 1fr)); | |
| gap: 10px; | |
| align-items: end; | |
| } | |
| .comparison-chart-controls label { | |
| display: grid; | |
| gap: 5px; | |
| } | |
| .comparison-chart-controls label > span { | |
| color: var(--muted); | |
| font-size: 10px; | |
| font-weight: 800; | |
| letter-spacing: 0.055em; | |
| text-transform: uppercase; | |
| } | |
| .comparison-chart-controls select { | |
| min-width: 135px; | |
| height: 38px; | |
| padding: 0 34px 0 11px; | |
| border: 1px solid var(--line); | |
| border-radius: 9px; | |
| color: var(--ink); | |
| background: var(--surface); | |
| cursor: pointer; | |
| font-size: 13px; | |
| font-weight: 700; | |
| } | |
| .comparison-chart-card { | |
| padding: 20px; | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| background: var(--surface); | |
| box-shadow: 0 10px 32px rgba(35, 40, 48, 0.05); | |
| } | |
| .comparison-bars { | |
| display: grid; | |
| gap: 9px; | |
| } | |
| .comparison-bar-row { | |
| display: grid; | |
| grid-template-columns: minmax(190px, 300px) minmax(180px, 1fr) 72px; | |
| gap: 14px; | |
| align-items: center; | |
| } | |
| .comparison-model { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| min-width: 0; | |
| overflow: hidden; | |
| color: var(--ink); | |
| font-size: 13px; | |
| font-weight: 700; | |
| white-space: nowrap; | |
| } | |
| .comparison-model-name { | |
| display: block; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .comparison-model-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| min-width: 0; | |
| max-width: 100%; | |
| overflow: hidden; | |
| color: var(--ink); | |
| text-decoration: none; | |
| } | |
| .comparison-model-link span { | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .comparison-model-link svg { | |
| flex: 0 0 15px; | |
| width: 15px; | |
| height: 15px; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 1.8; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| color: #7d8999; | |
| } | |
| .comparison-model-link:hover { | |
| color: var(--accent-dark); | |
| } | |
| .comparison-model-link:hover svg { | |
| color: var(--accent-dark); | |
| } | |
| .comparison-track { | |
| position: relative; | |
| height: 12px; | |
| overflow: hidden; | |
| border-radius: 999px; | |
| background: var(--soft); | |
| } | |
| .comparison-fill { | |
| height: 100%; | |
| min-width: 2px; | |
| border-radius: inherit; | |
| background: var(--accent); | |
| transition: width 220ms ease; | |
| } | |
| .comparison-value { | |
| color: var(--ink); | |
| font: 700 12px "Manrope", sans-serif; | |
| text-align: right; | |
| white-space: nowrap; | |
| } | |
| .comparison-chart-empty { | |
| margin: 0; | |
| padding: 28px 0; | |
| color: var(--muted); | |
| text-align: center; | |
| } | |
| html[data-theme="dark"] .comparison-track { | |
| background: #252c37; | |
| } | |
| html[data-theme="dark"] .comparison-chart-controls select { | |
| border-color: #465064; | |
| } | |
| html[data-theme="dark"] .comparison-model-link { | |
| color: #dce5f2; | |
| } | |
| html[data-theme="dark"] .comparison-model-link svg { | |
| color: #91a0b3; | |
| } | |
| @media (max-width: 760px) { | |
| .comparison-chart-heading { | |
| align-items: stretch; | |
| flex-direction: column; | |
| } | |
| .comparison-chart-controls { | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| width: 100%; | |
| } | |
| .comparison-chart-controls select { | |
| width: 100%; | |
| min-width: 0; | |
| } | |
| .comparison-bar-row { | |
| grid-template-columns: minmax(105px, 0.8fr) minmax(100px, 1.2fr) 58px; | |
| gap: 9px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .comparison-chart-controls { | |
| grid-template-columns: 1fr; | |
| } | |
| .comparison-chart-card { | |
| padding: 16px 12px; | |
| } | |
| .comparison-bar-row { | |
| grid-template-columns: minmax(88px, 0.7fr) minmax(90px, 1.3fr) 54px; | |
| gap: 7px; | |
| } | |
| .comparison-model { | |
| font-size: 11px; | |
| } | |
| } | |
| .citation-card { | |
| margin-top: 2rem; | |
| padding: 1.25rem 1.4rem; | |
| border: 1px solid color-mix(in srgb, currentColor 16%, transparent); | |
| border-radius: 16px; | |
| } | |
| .citation-card .citation-label { | |
| margin: 0 0 0.35rem; | |
| font-weight: 700; | |
| } | |
| .citation-card > p:not(.citation-label) { | |
| margin: 0 0 0.9rem; | |
| } | |
| .citation-card pre { | |
| margin: 0; | |
| padding: 1rem; | |
| overflow-x: auto; | |
| border-radius: 12px; | |
| background: color-mix(in srgb, currentColor 7%, transparent); | |
| font-size: 0.86rem; | |
| line-height: 1.55; | |
| white-space: pre; | |
| } | |
| footer { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 20px; | |
| margin-top: 48px; | |
| padding: 20px 4px 0; | |
| border-top: 1px solid var(--line); | |
| color: #8a93a0; | |
| font-size: 12px; | |
| } | |
| footer span:first-child { | |
| color: #596474; | |
| font-weight: 700; | |
| } | |
| html[data-theme="dark"] body { | |
| background: radial-gradient( | |
| circle at 8% 0%, | |
| rgba(120, 170, 240, 0.1), | |
| transparent 25rem | |
| ), | |
| #11151b; | |
| } | |
| html[data-theme="dark"] .hero { | |
| border-color: rgba(120, 170, 240, 0.18); | |
| background: linear-gradient(118deg, #1c222c 18%, #1d2430 62%, #19283d 100%); | |
| } | |
| html[data-theme="dark"] .hero::before { | |
| border-color: rgba(120, 170, 240, 0.18); | |
| } | |
| html[data-theme="dark"] .theme-toggle { | |
| border-color: #3b4350; | |
| color: #cbd3df; | |
| background: rgba(23, 28, 36, 0.74); | |
| } | |
| html[data-theme="dark"] .tabs, | |
| html[data-theme="dark"] .filter-card { | |
| background: rgba(23, 28, 36, 0.92); | |
| } | |
| html[data-theme="dark"] .tab.is-active { | |
| color: #171c24; | |
| background: #eef1f6; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.28); | |
| } | |
| html[data-theme="dark"] .field > label, | |
| html[data-theme="dark"] fieldset legend { | |
| color: #aab4c2; | |
| } | |
| html[data-theme="dark"] .choice-pill, | |
| html[data-theme="dark"] .color-toggle { | |
| border-color: #465064; | |
| color: #d9e1ed; | |
| background: #202630; | |
| } | |
| html[data-theme="dark"] .choice-pill:hover { | |
| border-color: #65738a; | |
| color: #fff; | |
| background: #27303d; | |
| } | |
| html[data-theme="dark"] .choice-pill:has(input:checked) { | |
| border-color: #4f83c9; | |
| color: #fff; | |
| background: #315f9d; | |
| box-shadow: 0 4px 14px rgba(8, 28, 56, 0.38); | |
| } | |
| html[data-theme="dark"] .choice-pill.combined-choice:has(input:checked) { | |
| border-color: #2b527f; | |
| background: #091f3b; | |
| box-shadow: 0 4px 16px rgba(0, 8, 20, 0.64); | |
| } | |
| html[data-theme="dark"] .color-toggle.is-active { | |
| border-color: rgba(120, 170, 240, 0.42); | |
| color: #a8caff; | |
| background: #1d2d43; | |
| } | |
| html[data-theme="dark"] .table-card, | |
| html[data-theme="dark"] .dataset-card, | |
| html[data-theme="dark"] .definition-list { | |
| background: var(--surface); | |
| } | |
| html[data-theme="dark"] .dataset-card.accent { | |
| background: linear-gradient(135deg, #1d2939, #1b304b); | |
| } | |
| html[data-theme="dark"] .dataset-tag { | |
| color: #b5bfcb; | |
| background: #292f38; | |
| } | |
| html[data-theme="dark"] .dataset-tag.public { | |
| color: #7ed6aa; | |
| background: #17362b; | |
| } | |
| html[data-theme="dark"] .dataset-tag.private { | |
| color: #c5a9ee; | |
| background: #302641; | |
| } | |
| html[data-theme="dark"] .lab-card { | |
| background: linear-gradient(125deg, #1d2939, #1b304b); | |
| } | |
| html[data-theme="dark"] .lab-card a { | |
| color: #171c24; | |
| background: #eef1f6; | |
| } | |
| html[data-theme="dark"] .lab-card a:hover { | |
| color: #fff; | |
| background: var(--accent); | |
| } | |
| html[data-theme="dark"] th { | |
| color: #a4afbd; | |
| background: #202630; | |
| } | |
| html[data-theme="dark"] th:first-child, | |
| html[data-theme="dark"] th:nth-child(2) { | |
| background: #202630; | |
| } | |
| html[data-theme="dark"] td:first-child, | |
| html[data-theme="dark"] td:nth-child(2) { | |
| background: var(--surface); | |
| } | |
| html[data-theme="dark"] th, | |
| html[data-theme="dark"] td { | |
| border-bottom-color: #2a313c; | |
| } | |
| html[data-theme="dark"] .combined-score { | |
| border-right-color: #4b5667; | |
| border-left-color: #657185; | |
| } | |
| html[data-theme="dark"] tbody tr:hover td, | |
| html[data-theme="dark"] tbody tr:hover td:first-child, | |
| html[data-theme="dark"] tbody tr:hover td:nth-child(2) { | |
| background: #1c222b; | |
| } | |
| html[data-theme="dark"] .heat-cell.heat-score-1 { | |
| background: rgba(16, 185, 129, 0.42); | |
| } | |
| html[data-theme="dark"] .heat-cell.heat-score-2 { | |
| background: rgba(132, 204, 22, 0.38); | |
| } | |
| html[data-theme="dark"] .heat-cell.heat-score-3 { | |
| background: rgba(250, 204, 21, 0.38); | |
| } | |
| html[data-theme="dark"] .heat-cell.heat-score-4 { | |
| background: rgba(249, 115, 22, 0.38); | |
| } | |
| html[data-theme="dark"] .heat-cell.heat-score-5 { | |
| background: rgba(244, 63, 94, 0.42); | |
| } | |
| html[data-theme="dark"] .model-name { | |
| color: #dce5f2; | |
| } | |
| html[data-theme="dark"] .model-link { | |
| color: #91a0b3; | |
| } | |
| html[data-theme="dark"] .availability-badge.open { | |
| color: #7ed6aa; | |
| background: #17362b; | |
| } | |
| html[data-theme="dark"] .availability-badge.closed { | |
| color: #abb5c3; | |
| background: #292f38; | |
| } | |
| html[data-theme="dark"] .availability-filter { | |
| border-color: #414a58; | |
| color: #8995a6; | |
| } | |
| html[data-theme="dark"] .availability-filter.open.is-active { | |
| border-color: #285c48; | |
| color: #7ed6aa; | |
| background: #17362b; | |
| } | |
| html[data-theme="dark"] .availability-filter.closed.is-active { | |
| border-color: #454d59; | |
| color: #c0c8d3; | |
| background: #292f38; | |
| } | |
| html[data-theme="dark"] .availability-label:hover, | |
| html[data-theme="dark"] .availability-label[aria-expanded="true"] { | |
| background: #303744; | |
| } | |
| html[data-theme="dark"] .result-count { | |
| color: #aeb8c6; | |
| background: #252c35; | |
| } | |
| html[data-theme="dark"] .version-link { | |
| color: #9ec7ff; | |
| } | |
| html[data-theme="dark"] .version-selector select { | |
| border-color: #3b4451; | |
| color: #dce5f2; | |
| background: #252c35; | |
| } | |
| html[data-theme="dark"] .version-notice { | |
| border-color: #745a28; | |
| color: #f3dba2; | |
| background: #302714; | |
| } | |
| html[data-theme="dark"] .note { | |
| background: var(--blue-soft); | |
| } | |
| html[data-theme="dark"] .note p, | |
| html[data-theme="dark"] .note > div p { | |
| color: #aab7ca; | |
| } | |
| html[data-theme="dark"] footer span:first-child { | |
| color: #b1bbc8; | |
| } | |
| /* CSS-only theme fallback for visitors with JavaScript disabled. */ | |
| @media (prefers-color-scheme: dark) { | |
| html:not([data-js]) { | |
| --ink: #eef1f6; | |
| --muted: #9da8b8; | |
| --line: #303744; | |
| --surface: #171c24; | |
| --soft: #202630; | |
| --accent: #78aaf0; | |
| --accent-dark: #a8caff; | |
| --accent-soft: #1d2d43; | |
| --blue-soft: #202a3b; | |
| --green: #62c997; | |
| --shadow: 0 20px 55px rgba(0, 0, 0, 0.34); | |
| color-scheme: dark; | |
| } | |
| html:not([data-js]) body { | |
| background: radial-gradient( | |
| circle at 8% 0%, | |
| rgba(120, 170, 240, 0.1), | |
| transparent 25rem | |
| ), | |
| #11151b; | |
| } | |
| html:not([data-js]) .hero { | |
| border-color: rgba(120, 170, 240, 0.18); | |
| background: linear-gradient(118deg, #1c222c 18%, #1d2430 62%, #19283d 100%); | |
| } | |
| html:not([data-js]) .hero::before { | |
| border-color: rgba(120, 170, 240, 0.18); | |
| } | |
| html:not([data-js]) .tabs, | |
| html:not([data-js]) .filter-card { | |
| background: rgba(23, 28, 36, 0.92); | |
| } | |
| html:not([data-js]) .tab.is-active { | |
| color: #171c24; | |
| background: #eef1f6; | |
| } | |
| html:not([data-js]) .table-card { | |
| background: var(--surface); | |
| } | |
| html:not([data-js]) th, | |
| html:not([data-js]) th:first-child, | |
| html:not([data-js]) th:nth-child(2) { | |
| color: #a4afbd; | |
| background: #202630; | |
| } | |
| html:not([data-js]) td:first-child, | |
| html:not([data-js]) td:nth-child(2) { | |
| background: var(--surface); | |
| } | |
| html:not([data-js]) th, | |
| html:not([data-js]) td { | |
| border-bottom-color: #2a313c; | |
| } | |
| html:not([data-js]) .combined-score { | |
| border-right-color: #4b5667; | |
| border-left-color: #657185; | |
| } | |
| html:not([data-js]) tbody tr:hover td, | |
| html:not([data-js]) tbody tr:hover td:first-child, | |
| html:not([data-js]) tbody tr:hover td:nth-child(2) { | |
| background: #1c222b; | |
| } | |
| html:not([data-js]) .model-name { | |
| color: #dce5f2; | |
| } | |
| html:not([data-js]) .model-link { | |
| color: #91a0b3; | |
| } | |
| html:not([data-js]) .availability-badge.open { | |
| color: #7ed6aa; | |
| background: #17362b; | |
| } | |
| html:not([data-js]) .availability-badge.closed { | |
| color: #abb5c3; | |
| background: #292f38; | |
| } | |
| html:not([data-js]) .result-count { | |
| color: #aeb8c6; | |
| background: #252c35; | |
| } | |
| html:not([data-js]) .noscript-notice { | |
| border-color: #713535; | |
| color: #ffc6c6; | |
| background: #3a1d20; | |
| } | |
| } | |
| @media (max-width: 900px) { | |
| .hero { | |
| min-height: 180px; | |
| padding: 28px 36px; | |
| } | |
| .hero-art { | |
| display: none; | |
| } | |
| .filter-card { | |
| grid-template-columns: 1fr; | |
| } | |
| .dataset-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .pipeline-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .pipeline-card { | |
| min-height: 0; | |
| } | |
| .about-grid { | |
| grid-template-columns: 1fr; | |
| gap: 0; | |
| } | |
| .definition-list { | |
| margin-top: 0; | |
| } | |
| } | |
| @media (max-width: 620px) { | |
| .shell { | |
| width: min(100% - 24px, 1460px); | |
| padding-top: 12px; | |
| } | |
| .hero { | |
| min-height: 168px; | |
| padding: 24px; | |
| border-radius: 20px; | |
| } | |
| .hero-tools { | |
| top: 14px; | |
| right: 14px; | |
| } | |
| .theme-toggle { | |
| width: 35px; | |
| height: 35px; | |
| } | |
| .navigation-row { | |
| width: 100%; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .tabs { | |
| display: grid; | |
| flex: none; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| width: 100%; | |
| } | |
| .tab { | |
| width: 100%; | |
| padding-inline: 9px; | |
| } | |
| .blog-link { | |
| flex-basis: 100%; | |
| margin-left: 0; | |
| text-align: center; | |
| font-size: 12px; | |
| } | |
| .filter-card { | |
| grid-template-columns: 1fr; | |
| padding: 16px; | |
| } | |
| .choice-pill { | |
| flex: 1 1 auto; | |
| justify-content: center; | |
| } | |
| #matrix-metric-options { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| #matrix-metric-options .choice-pill { | |
| width: auto; | |
| } | |
| th:nth-child(2), | |
| td:nth-child(2) { | |
| width: 260px; | |
| min-width: 260px; | |
| max-width: 260px; | |
| } | |
| /* On narrow screens, fixed Rank + Model columns leave too little room for | |
| the score cells. Let the whole table scroll horizontally instead. */ | |
| th:first-child, | |
| td:first-child, | |
| th:nth-child(2), | |
| td:nth-child(2) { | |
| position: static; | |
| } | |
| th:first-child, | |
| td:first-child { | |
| position: sticky; | |
| left: 0; | |
| } | |
| th:nth-child(2) { | |
| position: sticky; | |
| top: 0; | |
| left: auto; | |
| } | |
| .table-heading { | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .table-tools { | |
| flex-direction: column-reverse; | |
| align-items: end; | |
| gap: 5px; | |
| } | |
| .version-notice .version-link { | |
| width: 100%; | |
| margin-left: 0; | |
| } | |
| .dataset-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .lab-card { | |
| grid-template-columns: 1fr; | |
| gap: 24px; | |
| padding: 24px; | |
| } | |
| .lab-card a { | |
| width: fit-content; | |
| } | |
| .definition-list article { | |
| grid-template-columns: 1fr; | |
| gap: 5px; | |
| } | |
| .note { | |
| grid-template-columns: 1fr; | |
| gap: 7px; | |
| } | |
| footer { | |
| flex-direction: column; | |
| } | |
| } | |
| /* Leaderboard control placement */ | |
| .table-controls { | |
| margin: 0 0 14px; | |
| } | |
| .table-controls .view-switch { | |
| margin-bottom: 10px; | |
| } | |
| .table-controls .filter-card { | |
| margin: 0; | |
| } | |
| /* Model availability dots */ | |
| .comparison-availability-dot { | |
| flex: 0 0 8px; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| } | |
| .comparison-availability-dot.open { | |
| background: var(--green); | |
| } | |
| .comparison-availability-dot.closed { | |
| background: #9aa3af; | |
| } | |
| html[data-theme="dark"] .comparison-availability-dot.closed { | |
| background: #7d8795; | |
| } | |
| .filter-card { | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .dataset-field, | |
| .matrix-metric-field { | |
| flex: 1 1 auto; | |
| width: auto; | |
| } | |
| .filter-actions { | |
| display: flex; | |
| align-items: center; | |
| margin-left: auto; | |
| } | |