| :root { |
| --bg: #040619; |
| --block: #1a1820; |
| --primary: #6C8CFF; |
| --secondary: #52B788; |
| --instruction: color-mix(in srgb, var(--secondary) 70%, var(--primary)); |
| --highlight: #ffe23e; |
| --separator: #302934; |
|
|
| --font-sans: |
| Manrope, |
| "Avenir Next", |
| "Segoe UI Variable Text", |
| "Segoe UI", |
| ui-sans-serif, |
| system-ui, |
| -apple-system, |
| BlinkMacSystemFont, |
| sans-serif; |
| font-family: var(--font-sans); |
| color: color-mix(in srgb, white 92%, var(--block)); |
| background: var(--bg); |
| font-synthesis: none; |
| font-kerning: normal; |
| font-optical-sizing: auto; |
| text-rendering: optimizeLegibility; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
| * { |
| box-sizing: border-box; |
| } |
| html { |
| scroll-behavior: smooth; |
| } |
| body { |
| margin: 0; |
| min-width: 320px; |
| background-color: var(--bg); |
| background-image: |
| radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--highlight) 5%, transparent), transparent 34rem), |
| radial-gradient(circle at 0% 38%, color-mix(in srgb, var(--highlight) 5%, transparent), transparent 25rem), |
| radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--highlight) 4%, transparent), transparent 24rem), |
| radial-gradient(circle at 22% 82%, color-mix(in srgb, var(--highlight) 2.5%, transparent), transparent 28rem); |
| background-attachment: fixed; |
| font-size: 16px; |
| font-weight: 400; |
| line-height: 1.5; |
| scrollbar-color: color-mix(in srgb, var(--secondary) 42%, var(--block)) var(--bg); |
| scrollbar-width: thin; |
| } |
| * { |
| scrollbar-color: color-mix(in srgb, var(--secondary) 42%, var(--block)) var(--bg); |
| scrollbar-width: thin; |
| } |
| *::-webkit-scrollbar { |
| width: 9px; |
| height: 9px; |
| } |
| *::-webkit-scrollbar-track { |
| background: color-mix(in srgb, var(--bg) 92%, var(--block)); |
| } |
| *::-webkit-scrollbar-thumb { |
| border: 2px solid color-mix(in srgb, var(--bg) 92%, var(--block)); |
| border-radius: 999px; |
| background: color-mix(in srgb, var(--secondary) 42%, var(--block)); |
| } |
| *::-webkit-scrollbar-thumb:hover { |
| background: color-mix(in srgb, var(--secondary) 68%, var(--primary)); |
| } |
| *::-webkit-scrollbar-corner { |
| background: var(--bg); |
| } |
| button { |
| font: inherit; |
| } |
| strong { |
| font-weight: 500; |
| } |
| main { |
| max-width: 1440px; |
| margin: 0 auto; |
| padding: 0 40px; |
| } |
| .track { |
| color: color-mix(in srgb, white 66%, var(--block)); |
| border: 0; |
| border-radius: 0; |
| padding: 0; |
| font-size: 12px; |
| font-weight: 400; |
| } |
| .hero { |
| position: relative; |
| display: block; |
| max-width: 900px; |
| min-height: 620px; |
| padding: 68px 0 62px; |
| } |
| .hero-copy { position: relative; z-index: 2; } |
| .hero-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } |
| .hero-kicker .eyebrow { margin: 0; } |
| .edition { |
| margin-left: 3px; padding-left: 12px; |
| border-left: 1px solid color-mix(in srgb, white 22%, transparent); |
| color: color-mix(in srgb, white 44%, var(--block)); |
| font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; |
| } |
| .eyebrow { |
| margin: 0 0 13px; |
| color: color-mix(in srgb, white 74%, var(--block)); |
| text-transform: uppercase; |
| font-size: 11px; |
| font-weight: 500; |
| letter-spacing: 0.12em; |
| } |
| h1, |
| h2, |
| p { |
| margin-top: 0; |
| } |
| h1, |
| h2 { |
| letter-spacing: -0.045em; |
| font-weight: 400; |
| } |
| h1 { |
| margin-bottom: 0; |
| font-size: clamp(56px, 6.4vw, 88px); |
| line-height: 0.91; |
| color: color-mix(in srgb, white 94%, var(--block)); |
| } |
| h1 span { color: inherit; font-style: italic; font-weight: 300; } |
| h2 { |
| font-size: 29px; |
| line-height: 1.15; |
| } |
| .hero-description { |
| max-width: 590px; |
| margin: 34px 0 0; |
| color: color-mix(in srgb, white 65%, var(--block)); |
| font-size: 17px; |
| line-height: 1.6; |
| } |
| .hero-link { |
| display: inline-block; margin-top: 26px; |
| color: var(--highlight); |
| font-size: 12px; font-weight: 500; letter-spacing: 0.08em; |
| text-decoration: underline; |
| text-decoration-color: color-mix(in srgb, var(--highlight) 65%, transparent); |
| text-decoration-thickness: 1px; |
| text-underline-offset: 5px; |
| text-transform: uppercase; |
| transition: color 160ms ease, text-decoration-color 160ms ease; |
| } |
| .hero-link:hover, .hero-link:focus-visible { |
| color: color-mix(in srgb, var(--highlight) 78%, white); |
| text-decoration-color: currentColor; |
| } |
| .protocol-notice { |
| max-width: 650px; |
| margin: 18px 0 0; |
| padding-left: 13px; |
| border-left: 2px solid color-mix(in srgb, var(--highlight) 70%, var(--block)); |
| color: color-mix(in srgb, white 62%, var(--block)); |
| font-size: 13px; |
| line-height: 1.55; |
| } |
| .summary-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 0; |
| border: 1px solid color-mix(in srgb, var(--secondary) 45%, transparent); |
| background: color-mix(in srgb, var(--secondary) 45%, transparent); |
| } |
| .summary-grid article { |
| position: relative; |
| min-height: 132px; |
| display: flex; |
| align-items: flex-end; |
| justify-content: space-between; |
| padding: 24px 27px; |
| background: var(--bg); |
| } |
| .summary-grid article + article { |
| border-left: 1px solid color-mix(in srgb, var(--secondary) 45%, transparent); |
| } |
| .summary-grid article > div { display: grid; gap: 2px; } |
| .summary-index { |
| position: absolute; left: 27px; top: 20px; |
| color: color-mix(in srgb, white 35%, var(--block)) !important; |
| font-size: 10px !important; letter-spacing: 0.14em; text-transform: uppercase; |
| } |
| .summary-grid strong { |
| color: color-mix(in srgb, white 92%, var(--block)); |
| font-size: 40px; |
| font-weight: 400; |
| letter-spacing: -0.05em; |
| } |
| .summary-grid span { |
| color: color-mix(in srgb, white 60%, var(--block)); |
| font-size: 13px; |
| } |
| .leaderboard-section { |
| padding: 68px 0 46px; |
| } |
| .section-heading { |
| display: flex; |
| align-items: end; |
| justify-content: space-between; |
| gap: 22px; |
| } |
| .section-heading .eyebrow { |
| margin-bottom: 9px; |
| } |
| .filters, |
| .task-tabs, |
| .size-filters { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| flex-wrap: wrap; |
| } |
| .filter-stack { |
| display: grid; |
| justify-items: end; |
| gap: 8px; |
| } |
| .top-filter-row { |
| display: grid; |
| grid-template-columns: auto minmax(0, 1fr); |
| align-items: center; |
| gap: 8px; |
| } |
| .leaderboard-controls { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
| .view-filter { |
| width: max-content; |
| flex: 0 0 auto; |
| } |
| .filters { |
| border: 1px solid var(--block); |
| padding: 3px; |
| border-radius: 9px; |
| background: var(--block); |
| } |
| .filters button, |
| .task-tabs button, |
| .size-filters button { |
| border: 1px solid transparent; |
| background: transparent; |
| color: color-mix(in srgb, white 65%, var(--block)); |
| border-radius: 6px; |
| cursor: pointer; |
| padding: 9px 12px; |
| font-size: 13px; |
| font-weight: 400; |
| } |
| .filters button:hover, |
| .task-tabs button:hover, |
| .size-filters button:hover { |
| color: color-mix(in srgb, white 92%, var(--block)); |
| } |
| .filters button.active { |
| color: color-mix(in srgb, white 88%, var(--block)); |
| background: color-mix(in srgb, var(--block) 70%, var(--primary)); |
| } |
| .size-filters { |
| border: 1px solid var(--block); |
| padding: 3px; |
| border-radius: 9px; |
| background: var(--block); |
| color: color-mix(in srgb, white 48%, var(--block)); |
| font-size: 11px; |
| } |
| .size-filters span { |
| margin-right: 2px; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| } |
| .size-filters button { |
| padding: 6px 9px; |
| border-color: var(--block); |
| font-size: 11px; |
| } |
| .filters button, |
| .size-filters button, |
| .view-filter button { |
| height: 30px; |
| padding: 0 9px; |
| font-size: 11px; |
| line-height: 1; |
| } |
| .size-filters button.active { |
| color: color-mix(in srgb, white 88%, var(--block)); |
| border-color: var(--block); |
| background: color-mix(in srgb, var(--block) 70%, var(--primary)); |
| } |
| .table-wrap { |
| max-block-size: clamp(540px, 80vh, 860px); |
| overflow: auto; |
| margin-top: 24px; |
| border: 1px solid var(--block); |
| border-radius: 10px; |
| background: var(--block); |
| overscroll-behavior: contain; |
| scrollbar-color: color-mix(in srgb, var(--secondary) 46%, var(--block)) color-mix(in srgb, var(--bg) 82%, var(--block)); |
| } |
| .table-wrap::-webkit-scrollbar-track { |
| background: color-mix(in srgb, var(--bg) 82%, var(--block)); |
| } |
| .table-wrap::-webkit-scrollbar-thumb { |
| border-color: color-mix(in srgb, var(--bg) 82%, var(--block)); |
| background: color-mix(in srgb, var(--secondary) 46%, var(--block)); |
| } |
| .table-wrap::-webkit-scrollbar-thumb:hover { |
| background: var(--secondary); |
| } |
| table { |
| min-width: 1320px; |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 14px; |
| line-height: 1.45; |
| } |
| .full-table { |
| width: max(100%, 1356px); |
| min-width: 1356px; |
| table-layout: fixed; |
| } |
| .full-table .rank-column { width: 74px; } |
| .full-table .model-column { width: 230px; } |
| .full-table .release-column { width: 112px; } |
| .full-table .parameters-column { width: 104px; } |
| .full-table .vocab-column { width: 104px; } |
| .full-table .track-column { width: 96px; } |
| .full-table .score-column { width: 124px; } |
| .full-table .hellaswag-column { width: 102px; } |
| .full-table .benchmark-column { width: 82px; } |
| .simplified { |
| width: max(100%, 1074px); |
| min-width: 1074px; |
| table-layout: fixed; |
| } |
| .simplified th:nth-child(1) { width: 74px; } |
| .simplified th:nth-child(2) { width: 230px; } |
| .simplified th:nth-child(4) { width: 112px; } |
| .simplified th:nth-child(7) { width: 118px; } |
| .simplified th:nth-child(8) { width: 100px; } |
| .simplified th:nth-child(n + 9) { width: 88px; } |
| .full-table td:nth-child(2), |
| .full-table .model-link, |
| .full-table .model-source { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .full-table .model-link, |
| .full-table .model-source { |
| display: block; |
| } |
| th { |
| position: sticky; |
| top: 0; |
| z-index: 1; |
| color: color-mix(in srgb, white 64%, var(--block)); |
| background: color-mix(in srgb, var(--primary) 30%, var(--block)); |
| padding: 16px; |
| border-bottom: 1px solid var(--block); |
| text-align: left; |
| text-transform: uppercase; |
| letter-spacing: 0.09em; |
| font-size: 11px; |
| font-weight: 500; |
| white-space: nowrap; |
| } |
| .sort-button { |
| display: block; |
| width: 100%; |
| margin: 0; |
| padding: 0; |
| border: 0; |
| color: color-mix(in srgb, white 82%, var(--block)); |
| background: transparent; |
| font: inherit; |
| letter-spacing: inherit; |
| text-align: inherit; |
| text-transform: inherit; |
| white-space: inherit; |
| cursor: pointer; |
| } |
| .sort-button:hover, |
| th.sortable.sorted .sort-button { |
| color: color-mix(in srgb, white 94%, var(--block)); |
| } |
| .sort-button:focus-visible { |
| outline: 1px solid color-mix(in srgb, white 52%, transparent); |
| outline-offset: 4px; |
| } |
| th:first-child, |
| td:first-child { |
| padding-left: 22px; |
| } |
| th span { |
| text-transform: none; |
| letter-spacing: 0; |
| font-weight: 400; |
| } |
| td { |
| border-bottom: 1px solid color-mix(in srgb, white 6%, var(--block)); |
| padding: 18px 16px; |
| vertical-align: middle; |
| white-space: nowrap; |
| color: color-mix(in srgb, white 78%, var(--block)); |
| } |
| tbody tr:last-child td { |
| border-bottom: 0; |
| } |
| tbody tr:hover { |
| background: color-mix(in srgb, var(--block) 92%, white); |
| } |
| .table-note { |
| margin: 9px 0 0; |
| color: color-mix(in srgb, white 48%, var(--block)); |
| font-size: 11px; |
| line-height: 1.4; |
| } |
| .rank { |
| color: color-mix(in srgb, white 92%, var(--block)); |
| font-variant-numeric: tabular-nums; |
| font-weight: 500; |
| } |
| .model-name { |
| color: color-mix(in srgb, white 92%, var(--block)); |
| font-weight: 500; |
| } |
| .model-link { |
| color: inherit; |
| text-decoration: none; |
| } |
| .model-link:hover .model-name, |
| .model-link:focus-visible .model-name { |
| text-decoration: underline; |
| text-decoration-thickness: 1px; |
| text-underline-offset: 3px; |
| } |
| .model-link:focus-visible { |
| outline: 2px solid color-mix(in srgb, white 45%, transparent); |
| outline-offset: 3px; |
| border-radius: 2px; |
| } |
| .model-source, |
| .metric span { |
| display: block; |
| color: color-mix(in srgb, white 52%, var(--block)); |
| font-size: 11px; |
| margin-top: 4px; |
| } |
| .metric { |
| font-variant-numeric: tabular-nums; |
| } |
| .score-main { |
| color: color-mix(in srgb, white 88%, var(--block)); |
| font-weight: 500; |
| } |
| .simplified .model-source, |
| .simplified .metric span, |
| .simplified .score-head span, |
| .simplified .metadata, |
| .simplified .metadata-head, |
| .simplified .track-cell, |
| .simplified .track-head { |
| display: none; |
| } |
| .simplified .score-head, |
| .simplified .metric-head, |
| .simplified .metric { |
| text-align: center; |
| } |
| .track { |
| padding: 0; |
| } |
| .track.instruction { |
| color: color-mix(in srgb, white 78%, var(--block)); |
| background: transparent; |
| } |
| .empty-row td { |
| color: color-mix(in srgb, white 55%, var(--block)); |
| padding: 45px 18px; |
| text-align: center; |
| } |
| .panel { |
| border: 1px solid var(--block); |
| background: var(--block); |
| border-radius: 12px; |
| } |
| .landscape { |
| padding: 32px 34px 28px; |
| } |
| .legend { |
| display: flex; |
| align-items: center; |
| gap: 7px; |
| color: color-mix(in srgb, white 64%, var(--block)); |
| font-size: 13px; |
| white-space: nowrap; |
| } |
| .legend-dot { |
| display: inline-block; |
| height: 8px; |
| width: 8px; |
| margin-left: 8px; |
| border-radius: 50%; |
| background: var(--primary); |
| } |
| .legend-dot:first-child { |
| margin-left: 0; |
| } |
| .legend-dot.instruction { |
| background: var(--instruction); |
| } |
| .frontier-key { |
| display: inline-block; |
| width: 22px; |
| margin-left: 10px; |
| border-top: 2px dashed color-mix(in srgb, white 78%, var(--block)); |
| } |
| .frontier-label { |
| display: inline-flex; |
| align-items: center; |
| gap: 7px; |
| margin-left: 10px; |
| } |
| .scatter-area { |
| position: relative; |
| margin-top: 22px; |
| min-height: 412px; |
| padding-bottom: 22px; |
| } |
| .scatter-area svg { |
| display: block; |
| width: 100%; |
| height: auto; |
| min-height: 320px; |
| overflow: visible; |
| shape-rendering: geometricPrecision; |
| text-rendering: geometricPrecision; |
| } |
| .grid-line { |
| stroke: color-mix(in srgb, var(--primary) 35%, var(--bg)); |
| stroke-width: 1; |
| } |
| .axis-line { |
| stroke: color-mix(in srgb, var(--primary) 42%, var(--bg)); |
| stroke-width: 1; |
| } |
| .axis-text, |
| .axis-title { |
| fill: color-mix(in srgb, white 57%, var(--block)); |
| font-size: 13px; |
| font-family: var(--font-sans); |
| font-weight: 400; |
| letter-spacing: 0.005em; |
| } |
| .axis-title { |
| font-size: 13.5px; |
| fill: color-mix(in srgb, white 72%, var(--block)); |
| letter-spacing: 0.01em; |
| } |
| .frontier-line { |
| fill: none; |
| stroke: color-mix(in srgb, white 78%, var(--block)); |
| stroke-width: 2; |
| stroke-dasharray: 7 6; |
| opacity: 0.9; |
| } |
| .point { |
| fill: var(--primary); |
| stroke: var(--block); |
| stroke-width: 3; |
| cursor: pointer; |
| transition: |
| r 0.15s ease, |
| filter 0.15s ease; |
| } |
| .point:hover, |
| .point:focus-visible { |
| r: 8; |
| filter: brightness(1.25); |
| } |
| .point:focus { |
| outline: none; |
| } |
| .point.instruction-point { |
| fill: var(--instruction); |
| } |
| .chart-tooltip { |
| pointer-events: none; |
| position: absolute; |
| transform: translate(-50%, -100%); |
| min-width: 160px; |
| max-width: calc(100% - 20px); |
| z-index: 2; |
| padding: 12px 14px; |
| border: 1px solid var(--block); |
| border-radius: 8px; |
| background: var(--block); |
| color: color-mix(in srgb, white 92%, var(--block)); |
| box-shadow: 0 12px 28px rgb(0 0 0 / 45%); |
| font-size: 13px; |
| } |
| .chart-tooltip strong, |
| .chart-tooltip span, |
| .chart-tooltip b { |
| display: block; |
| } |
| .chart-tooltip strong { |
| font-weight: 500; |
| } |
| .chart-tooltip span { |
| margin: 4px 0 8px; |
| color: color-mix(in srgb, white 68%, var(--block)); |
| } |
| .chart-tooltip b { |
| color: color-mix(in srgb, white 88%, var(--block)); |
| font-size: 15px; |
| font-weight: 500; |
| } |
| .chart-tooltip em { |
| font-style: normal; |
| font-size: 11px; |
| color: color-mix(in srgb, white 56%, var(--block)); |
| font-weight: 400; |
| } |
| .chart-controls { |
| display: flex; |
| align-items: end; |
| justify-content: space-between; |
| gap: 24px; |
| margin: 46px 0 22px; |
| } |
| .chart-controls .eyebrow { |
| margin-bottom: 7px; |
| } |
| .chart-controls .section-note { |
| margin: 0; |
| max-width: 460px; |
| } |
| .chart-controls .task-tabs { |
| margin: 0; |
| justify-content: flex-end; |
| } |
| .score-panel { |
| margin-top: 22px; |
| padding: 32px 34px 34px; |
| } |
| .compact-heading { |
| display: block; |
| } |
| .section-note { |
| max-width: 720px; |
| margin: 12px 0 0; |
| color: color-mix(in srgb, white 65%, var(--block)); |
| font-size: 14px; |
| line-height: 1.6; |
| } |
| .task-tabs { |
| margin: 28px 0 22px; |
| } |
| .task-tabs button { |
| border-color: transparent; |
| background: color-mix(in srgb, var(--bg) 62%, var(--block)); |
| border-radius: 6px; |
| font-size: 12px; |
| } |
| .task-tabs button.active { |
| border-color: transparent; |
| background: color-mix(in srgb, var(--block) 70%, var(--primary)); |
| color: color-mix(in srgb, white 88%, var(--block)); |
| } |
| .bar-list { |
| padding: 12px 0; |
| } |
| .bar-toggle { |
| display: grid; |
| place-items: center; |
| width: 46px; |
| height: 32px; |
| margin: 12px auto 0; |
| padding: 0; |
| border: 0; |
| border-radius: 999px; |
| background: transparent; |
| color: color-mix(in srgb, white 72%, var(--block)); |
| cursor: pointer; |
| transition: background 160ms ease, color 160ms ease; |
| } |
| .bar-toggle:hover, |
| .bar-toggle:focus-visible { |
| background: color-mix(in srgb, var(--primary) 28%, transparent); |
| color: color-mix(in srgb, white 92%, var(--block)); |
| outline: none; |
| } |
| .bar-toggle-chevron { |
| width: 10px; |
| height: 10px; |
| border-right: 1.5px solid currentColor; |
| border-bottom: 1.5px solid currentColor; |
| transform: translateY(-3px) rotate(45deg); |
| transition: transform 180ms ease; |
| } |
| .bar-toggle.expanded .bar-toggle-chevron { |
| transform: translateY(3px) rotate(225deg); |
| } |
| .bar-row { |
| display: grid; |
| grid-template-columns: 30px minmax(165px, 220px) 1fr 58px; |
| gap: 16px; |
| align-items: center; |
| min-height: 46px; |
| } |
| .bar-rank { |
| color: color-mix(in srgb, white 48%, var(--block)); |
| font-size: 12px; |
| text-align: right; |
| } |
| .bar-name { |
| color: color-mix(in srgb, white 74%, var(--block)); |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| font-size: 13px; |
| } |
| .bar-track { |
| position: relative; |
| height: 18px; |
| overflow: hidden; |
| border-radius: 4px; |
| background: color-mix(in srgb, var(--block) 88%, var(--primary)); |
| } |
| .zero-line { |
| position: absolute; |
| z-index: 1; |
| top: 0; |
| bottom: 0; |
| left: var(--zero); |
| border-left: 1px solid color-mix(in srgb, var(--secondary) 45%, var(--bg)); |
| } |
| .bar-fill { |
| position: absolute; |
| z-index: 2; |
| top: 2px; |
| bottom: 2px; |
| left: var(--start); |
| width: var(--width); |
| border-radius: 3px; |
| background: var(--primary); |
| } |
| .bar-fill.instruction-fill { |
| background: var(--instruction); |
| } |
| .bar-fill.negative { |
| background: color-mix(in srgb, var(--primary) 48%, var(--block)); |
| } |
| .ci-band { |
| position: absolute; |
| z-index: 3; |
| top: 2px; |
| bottom: 2px; |
| left: var(--start); |
| width: var(--width); |
| border-radius: 3px; |
| background: color-mix(in srgb, white 30%, transparent); |
| } |
| .ci-band.instruction-band { |
| background: color-mix(in srgb, white 26%, transparent); |
| } |
| .ci-band.negative-band { |
| background: color-mix(in srgb, white 22%, transparent); |
| } |
| .bar-row strong { |
| color: color-mix(in srgb, white 83%, var(--block)); |
| font-size: 13px; |
| font-weight: 500; |
| text-align: right; |
| font-variant-numeric: tabular-nums; |
| } |
| .empty-chart { |
| min-height: 320px; |
| display: grid; |
| place-items: center; |
| color: color-mix(in srgb, white 58%, var(--block)); |
| border: 1px dashed var(--block); |
| background: var(--block); |
| margin-top: 20px; |
| border-radius: 8px; |
| font-size: 14px; |
| } |
| .empty-chart.short { |
| min-height: 180px; |
| } |
| .bottom-grid { |
| display: grid; |
| grid-template-columns: 1.15fr 0.85fr; |
| gap: 20px; |
| padding: 22px 0 46px; |
| } |
| .method-card, |
| .protocol-card { |
| padding: 32px 34px; |
| } |
| .method-card p:not(.eyebrow), |
| .protocol-card p:not(.eyebrow), |
| .protocol-card li { |
| color: color-mix(in srgb, white 70%, var(--block)); |
| font-size: 14px; |
| line-height: 1.6; |
| } |
| .formula { |
| color: color-mix(in srgb, white 92%, var(--block)) !important; |
| font-size: 24px !important; |
| letter-spacing: -0.04em; |
| margin: 24px 0 18px; |
| } |
| .formula span { |
| color: color-mix(in srgb, white 78%, var(--block)); |
| } |
| .protocol-card ul { |
| padding-left: 17px; |
| margin: 20px 0; |
| } |
| .protocol-card a { |
| color: color-mix(in srgb, white 84%, var(--block)); |
| font-size: 14px; |
| font-weight: 500; |
| text-decoration-color: color-mix(in srgb, var(--primary) 55%, transparent); |
| text-underline-offset: 3px; |
| } |
| .protocol-card a:hover { |
| color: white; |
| } |
| .additional-card { |
| display: grid; |
| grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1fr); |
| gap: 24px; |
| align-items: start; |
| margin-bottom: 22px; |
| padding: 30px 34px; |
| } |
| .additional-card .eyebrow { |
| margin-bottom: 9px; |
| } |
| .additional-card h2 { |
| margin: 0; |
| } |
| .credits-content { |
| max-width: 680px; |
| } |
| .credits-content p { |
| margin: 0; |
| color: color-mix(in srgb, white 70%, var(--block)); |
| font-size: 14px; |
| line-height: 1.6; |
| } |
| .credits-content .credits-attribution { |
| margin-top: 14px; |
| color: color-mix(in srgb, white 58%, var(--block)); |
| } |
| .credits-content a { |
| color: color-mix(in srgb, white 84%, var(--block)); |
| text-decoration-color: color-mix(in srgb, var(--primary) 55%, transparent); |
| text-underline-offset: 3px; |
| } |
| .credits-content a:hover { |
| color: white; |
| } |
| footer { |
| color: color-mix(in srgb, white 50%, var(--block)); |
| border-top: 1px solid var(--separator); |
| padding: 26px 0 38px; |
| font-size: 12px; |
| line-height: 1.6; |
| } |
| footer p { |
| margin: 0; |
| } |
| footer p + p { |
| margin-top: 4px; |
| } |
| footer a { |
| color: var(--secondary); |
| text-decoration: none; |
| } |
| footer a:hover, |
| footer a:focus-visible { |
| color: color-mix(in srgb, white 92%, var(--block)); |
| text-decoration: underline; |
| } |
| @media (max-width: 760px) { |
| html, |
| body { |
| width: 100%; |
| } |
| main { |
| width: 100%; |
| max-width: none; |
| padding: 0 20px; |
| } |
| .hero { |
| grid-template-columns: 1fr; |
| gap: 35px; |
| min-height: 0; |
| padding: 52px 0 38px; |
| } |
| h1 { font-size: clamp(51px, 16vw, 72px); } |
| .hero-description { margin-top: 26px; font-size: 15px; } |
| .hero-kicker { flex-wrap: wrap; } |
| .summary-grid { |
| width: min(100%, 390px); |
| margin-inline: auto; |
| grid-template-columns: 1fr; |
| } |
| .summary-grid article { |
| display: grid; |
| align-content: center; |
| justify-items: center; |
| text-align: center; |
| padding-inline: 27px; |
| } |
| .summary-grid article + article { |
| padding-left: 27px; |
| } |
| .summary-index { |
| left: 0; |
| right: 0; |
| width: 100%; |
| transform: none; |
| text-align: center !important; |
| } |
| .summary-grid article > div { |
| position: absolute; |
| left: 0; |
| right: 0; |
| top: 58%; |
| width: auto; |
| max-width: none; |
| margin: 0; |
| display: grid !important; |
| justify-items: center; |
| gap: 2px; |
| transform: translateY(-50%); |
| text-align: center !important; |
| } |
| .summary-grid article > div > strong, |
| .summary-grid article > div > span { |
| display: block; |
| align-self: center; |
| text-align: center !important; |
| } |
| .summary-grid strong { |
| font-size: 30px; |
| } |
| .section-heading { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
| .chart-controls { |
| align-items: flex-start; |
| flex-direction: column; |
| gap: 12px; |
| margin: 34px 0 18px; |
| } |
| .chart-controls .task-tabs { |
| justify-content: flex-start; |
| width: 100%; |
| overflow: visible; |
| flex-wrap: wrap; |
| gap: 4px; |
| } |
| .chart-controls .task-tabs button { |
| padding: 8px 9px; |
| font-size: 11px; |
| } |
| .filters, |
| .filter-stack { |
| width: 100%; |
| } |
| .leaderboard-controls { |
| width: 100%; |
| flex-direction: column; |
| align-items: stretch; |
| gap: 8px; |
| } |
| .top-filter-row { |
| width: 100%; |
| } |
| .top-filter-row .view-filter { |
| width: max-content; |
| } |
| .top-filter-row .filters { |
| width: auto; |
| flex: 1; |
| min-width: 0; |
| } |
| .filter-stack { |
| justify-items: stretch; |
| } |
| .size-filters { |
| justify-self: start; |
| width: max-content; |
| max-width: 100%; |
| flex-wrap: nowrap; |
| overflow-x: auto; |
| } |
| .filters button { |
| flex: 1; |
| } |
| .leaderboard-section { |
| padding: 52px 0 35px; |
| } |
| .landscape, |
| .score-panel { |
| padding: 22px 16px; |
| } |
| .legend { |
| flex-wrap: wrap; |
| white-space: normal; |
| } |
| .frontier-label { |
| margin-left: 0; |
| } |
| .scatter-area { |
| min-height: 0; |
| margin-top: 14px; |
| padding-bottom: 6px; |
| } |
| .scatter-area svg { |
| height: auto; |
| min-height: 0; |
| } |
| .chart-tooltip { |
| left: 50% !important; |
| min-width: 0; |
| width: max-content; |
| max-width: calc(100% - 20px); |
| padding: 10px 12px; |
| font-size: 12px; |
| } |
| .bar-row { |
| grid-template-columns: 22px minmax(90px, 120px) 1fr 58px; |
| gap: 9px; |
| } |
| .bar-name, |
| .bar-row strong { |
| font-size: 11px; |
| } |
| .bottom-grid { |
| grid-template-columns: 1fr; |
| } |
| .method-card, |
| .protocol-card { |
| padding: 28px 24px; |
| } |
| .additional-card { |
| grid-template-columns: 1fr; |
| gap: 14px; |
| padding: 26px 24px; |
| } |
| } |
| @media (min-width: 761px) and (max-width: 1040px) { |
| .hero { min-height: 620px; } |
| .visual-tag { display: none; } |
| } |
| @media (prefers-reduced-motion: reduce) { |
| html { |
| scroll-behavior: auto; |
| } |
| } |
|
|
