Spaces:
Running
Running
| :root { | |
| --ink: #17211d; | |
| --muted: #66716c; | |
| --paper: #f4f2ec; | |
| --surface: #fbfaf7; | |
| --line: #d8d8d0; | |
| --accent: #087f6c; | |
| --accent-dark: #075f52; | |
| --coral: #e76f51; | |
| --amber: #e9b44c; | |
| --blue: #4677a8; | |
| --shadow: 0 18px 50px rgba(23, 33, 29, 0.08); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| margin: 0; | |
| background: var(--paper); | |
| color: var(--ink); | |
| font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| font-size: 16px; | |
| line-height: 1.55; | |
| } | |
| button, | |
| input { | |
| font: inherit; | |
| } | |
| a { | |
| color: inherit; | |
| } | |
| .shell { | |
| width: min(1480px, calc(100% - 64px)); | |
| margin-inline: auto; | |
| } | |
| .topbar { | |
| background: #0b443a; | |
| color: #f7f4eb; | |
| } | |
| .hero { | |
| overflow: hidden; | |
| background: | |
| radial-gradient(circle at 76% 25%, rgba(233, 180, 76, 0.16), transparent 24%), | |
| linear-gradient(135deg, #092e29 0%, #0b443a 56%, #07584b 100%); | |
| color: #f7f4eb; | |
| } | |
| .nav { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| min-height: 76px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.17); | |
| } | |
| .brand { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: inherit; | |
| font-weight: 750; | |
| letter-spacing: 0.02em; | |
| text-decoration: none; | |
| } | |
| .brand-mark { | |
| display: grid; | |
| width: 34px; | |
| height: 34px; | |
| place-items: center; | |
| border: 1px solid rgba(255, 255, 255, 0.55); | |
| border-radius: 50%; | |
| font-family: Georgia, serif; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 30px; | |
| font-size: 0.88rem; | |
| } | |
| .nav-links a { | |
| color: rgba(255, 255, 255, 0.74); | |
| text-decoration: none; | |
| } | |
| .nav-links a:hover { | |
| color: white; | |
| } | |
| .hero-content { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.55fr); | |
| gap: 7vw; | |
| align-items: end; | |
| padding-block: 86px 96px; | |
| } | |
| .eyebrow { | |
| margin: 0 0 22px; | |
| color: #99ddd0; | |
| font-size: 0.73rem; | |
| font-weight: 750; | |
| letter-spacing: 0.16em; | |
| text-transform: uppercase; | |
| } | |
| .eyebrow span { | |
| display: inline-block; | |
| width: 24px; | |
| height: 1px; | |
| margin-right: 9px; | |
| vertical-align: middle; | |
| background: currentColor; | |
| } | |
| .eyebrow.muted { | |
| color: var(--accent); | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| p { | |
| text-wrap: pretty; | |
| } | |
| h1 { | |
| max-width: 930px; | |
| margin: 0; | |
| font-family: Georgia, "Times New Roman", serif; | |
| font-size: clamp(3.4rem, 7vw, 7.6rem); | |
| font-weight: 400; | |
| letter-spacing: -0.052em; | |
| line-height: 0.91; | |
| } | |
| h1 em { | |
| color: #f2c86d; | |
| font-weight: 400; | |
| } | |
| .hero-copy { | |
| max-width: 690px; | |
| margin: 34px 0 0; | |
| color: rgba(255, 255, 255, 0.72); | |
| font-size: clamp(1.05rem, 1.6vw, 1.3rem); | |
| } | |
| .hero-note { | |
| padding: 26px 0 4px 28px; | |
| border-left: 1px solid rgba(255, 255, 255, 0.25); | |
| } | |
| .note-index { | |
| color: #f2c86d; | |
| font-size: 0.77rem; | |
| font-weight: 700; | |
| } | |
| .hero-note p { | |
| margin: 50px 0 28px; | |
| color: rgba(255, 255, 255, 0.78); | |
| } | |
| .research-label { | |
| display: inline-block; | |
| padding: 7px 11px; | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 999px; | |
| font-size: 0.68rem; | |
| font-weight: 700; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| } | |
| .metrics { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| border-top: 1px solid rgba(255, 255, 255, 0.17); | |
| } | |
| .metrics div { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 27px 28px 30px 0; | |
| } | |
| .metrics div + div { | |
| padding-left: 28px; | |
| border-left: 1px solid rgba(255, 255, 255, 0.17); | |
| } | |
| .metrics strong { | |
| font-family: Georgia, serif; | |
| font-size: 2rem; | |
| font-weight: 400; | |
| } | |
| .metrics span { | |
| color: rgba(255, 255, 255, 0.58); | |
| font-size: 0.76rem; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .leaderboard { | |
| padding-block: 56px 64px; | |
| } | |
| .section-heading { | |
| display: block; | |
| margin-bottom: 30px; | |
| } | |
| .performance-title { | |
| max-width: none; | |
| margin: 0; | |
| font-family: Georgia, "Times New Roman", serif; | |
| font-size: clamp(2.5rem, 5vw, 4.8rem); | |
| font-weight: 400; | |
| letter-spacing: -0.045em; | |
| line-height: 1; | |
| } | |
| h2 { | |
| margin: 0; | |
| font-family: Georgia, serif; | |
| font-size: clamp(2.35rem, 4vw, 4.4rem); | |
| font-weight: 400; | |
| letter-spacing: -0.035em; | |
| line-height: 1; | |
| } | |
| .section-heading > p { | |
| margin: 0; | |
| color: var(--muted); | |
| } | |
| .view-tabs { | |
| display: flex; | |
| gap: 6px; | |
| padding: 6px; | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| background: rgba(255, 255, 255, 0.42); | |
| } | |
| .view-tabs button { | |
| flex: 1; | |
| padding: 14px 18px; | |
| border: 0; | |
| border-radius: 9px; | |
| background: transparent; | |
| color: var(--muted); | |
| cursor: pointer; | |
| font-weight: 700; | |
| text-align: left; | |
| } | |
| .view-tabs button span { | |
| margin-right: 12px; | |
| color: #9b9f9c; | |
| font-size: 0.72rem; | |
| } | |
| .view-tabs button[aria-selected="true"] { | |
| background: var(--ink); | |
| box-shadow: var(--shadow); | |
| color: white; | |
| } | |
| .view-tabs button[aria-selected="true"] span { | |
| color: #8ed9cb; | |
| } | |
| .plot-card { | |
| margin-top: 24px; | |
| padding: 24px 24px 14px; | |
| overflow: hidden; | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| background: var(--surface); | |
| box-shadow: var(--shadow); | |
| } | |
| .plot-heading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 24px; | |
| padding-inline: 8px; | |
| } | |
| .plot-heading h2 { | |
| font-family: inherit; | |
| font-size: 1rem; | |
| font-weight: 800; | |
| letter-spacing: -0.01em; | |
| } | |
| .plot-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| } | |
| .plot-controls p { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 0.76rem; | |
| } | |
| .plot-metric { | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| color: var(--muted); | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| } | |
| .plot-metric select { | |
| min-width: 144px; | |
| padding: 7px 30px 7px 10px; | |
| border: 1px solid var(--line); | |
| border-radius: 7px; | |
| background: var(--surface); | |
| color: var(--ink); | |
| font: inherit; | |
| font-size: 0.76rem; | |
| font-weight: 750; | |
| letter-spacing: normal; | |
| text-transform: none; | |
| cursor: pointer; | |
| } | |
| .plot-metric select:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |
| .plot-legend { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| color: var(--muted); | |
| font-size: 0.76rem; | |
| font-weight: 700; | |
| white-space: nowrap; | |
| } | |
| .plot-legend::before { | |
| width: 10px; | |
| height: 10px; | |
| border: 2px solid var(--surface); | |
| border-radius: 50%; | |
| background: var(--coral); | |
| box-shadow: 0 0 0 1px var(--coral); | |
| content: ""; | |
| } | |
| .release-plot { | |
| overflow-x: auto; | |
| } | |
| .plot-tooltip { | |
| position: fixed; | |
| z-index: 20; | |
| display: grid; | |
| max-width: min(320px, calc(100vw - 24px)); | |
| gap: 3px; | |
| padding: 10px 12px; | |
| border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); | |
| border-radius: 8px; | |
| background: var(--ink); | |
| color: var(--surface); | |
| box-shadow: 0 8px 24px rgba(20, 35, 36, 0.2); | |
| font-size: 0.76rem; | |
| line-height: 1.35; | |
| pointer-events: none; | |
| opacity: 1; | |
| transition: opacity 90ms ease; | |
| } | |
| .plot-tooltip[aria-hidden="true"] { | |
| opacity: 0; | |
| visibility: hidden; | |
| } | |
| .plot-tooltip-name { | |
| overflow-wrap: anywhere; | |
| font-size: 0.82rem; | |
| font-weight: 800; | |
| } | |
| .plot-tooltip-meta { | |
| color: color-mix(in srgb, var(--surface) 72%, transparent); | |
| } | |
| .release-plot svg { | |
| display: block; | |
| width: 100%; | |
| min-width: 720px; | |
| height: auto; | |
| } | |
| .plot-grid line { | |
| stroke: var(--line); | |
| stroke-width: 1; | |
| } | |
| .plot-grid text, | |
| .axis-label { | |
| fill: var(--muted); | |
| font-family: inherit; | |
| font-size: 11px; | |
| } | |
| .axis-label { | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: 0.04em; | |
| } | |
| .plot-marks circle { | |
| fill: var(--accent); | |
| stroke: var(--surface); | |
| stroke-width: 3; | |
| cursor: pointer; | |
| transition: r 140ms ease, fill 140ms ease; | |
| } | |
| .plot-marks circle.sota-point { | |
| fill: var(--coral); | |
| } | |
| .plot-marks a:hover circle, | |
| .plot-marks a:focus circle { | |
| r: 10px; | |
| fill: var(--amber); | |
| } | |
| .point-label { | |
| fill: var(--ink); | |
| font-family: inherit; | |
| font-size: 11px; | |
| font-weight: 750; | |
| paint-order: stroke; | |
| stroke: var(--surface); | |
| stroke-width: 4px; | |
| stroke-linejoin: round; | |
| } | |
| .toolbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| min-height: 78px; | |
| } | |
| .search { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| width: min(100%, 420px); | |
| padding: 10px 0; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .search input { | |
| width: 100%; | |
| border: 0; | |
| outline: 0; | |
| background: transparent; | |
| color: var(--ink); | |
| } | |
| .search input::placeholder { | |
| color: #8a928e; | |
| } | |
| #result-count { | |
| color: var(--muted); | |
| font-size: 0.8rem; | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| } | |
| .table-frame { | |
| overflow: auto; | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| background: var(--surface); | |
| box-shadow: var(--shadow); | |
| } | |
| table { | |
| width: 100%; | |
| min-width: 1080px; | |
| border-collapse: collapse; | |
| } | |
| th, | |
| td { | |
| padding: 17px 14px; | |
| border-bottom: 1px solid var(--line); | |
| text-align: left; | |
| white-space: nowrap; | |
| } | |
| th { | |
| position: sticky; | |
| top: 0; | |
| z-index: 1; | |
| background: #ebe9e2; | |
| color: #69716d; | |
| font-size: 0.7rem; | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| } | |
| th button { | |
| padding: 0; | |
| border: 0; | |
| background: transparent; | |
| color: inherit; | |
| cursor: pointer; | |
| font: inherit; | |
| letter-spacing: inherit; | |
| text-transform: inherit; | |
| } | |
| tbody tr:last-child td { | |
| border-bottom: 0; | |
| } | |
| tbody tr:hover { | |
| background: #f4f2eb; | |
| } | |
| .rank-column { | |
| width: 72px; | |
| text-align: center; | |
| } | |
| .rank { | |
| color: var(--muted); | |
| font-variant-numeric: tabular-nums; | |
| text-align: center; | |
| } | |
| .rank.top { | |
| color: var(--accent); | |
| font-weight: 800; | |
| } | |
| .model-cell a { | |
| color: var(--ink); | |
| font-weight: 720; | |
| text-decoration: none; | |
| } | |
| .model-cell a:hover { | |
| color: var(--accent); | |
| text-decoration: underline; | |
| } | |
| .model-org { | |
| display: block; | |
| margin-top: 2px; | |
| color: var(--muted); | |
| font-size: 0.73rem; | |
| font-weight: 500; | |
| } | |
| .run-badge { | |
| display: inline-flex; | |
| padding: 4px 8px; | |
| border-radius: 999px; | |
| background: #e6e5df; | |
| color: #626a66; | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| } | |
| .score { | |
| background: | |
| linear-gradient(90deg, rgba(8, 127, 108, 0.1) var(--score), transparent var(--score)); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .score.average { | |
| color: var(--accent-dark); | |
| font-weight: 800; | |
| } | |
| .mobile-cards { | |
| display: none; | |
| } | |
| .about-view { | |
| padding-top: 50px; | |
| } | |
| .about-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1px; | |
| overflow: hidden; | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| background: var(--line); | |
| box-shadow: var(--shadow); | |
| } | |
| .about-grid > div { | |
| min-height: 280px; | |
| padding: 34px; | |
| background: var(--surface); | |
| } | |
| .about-number { | |
| color: var(--accent); | |
| font-size: 0.75rem; | |
| font-weight: 800; | |
| } | |
| .about-grid h3, | |
| .reproduce h3 { | |
| margin: 48px 0 14px; | |
| font-family: Georgia, serif; | |
| font-size: 1.7rem; | |
| font-weight: 400; | |
| } | |
| .about-grid p:last-child, | |
| .reproduce p { | |
| color: var(--muted); | |
| } | |
| .reproduce { | |
| display: flex; | |
| align-items: end; | |
| justify-content: space-between; | |
| gap: 50px; | |
| margin-top: 34px; | |
| padding: 38px; | |
| border-radius: 14px; | |
| background: #e4eee9; | |
| } | |
| .reproduce h3 { | |
| margin: 0 0 10px; | |
| } | |
| .button-link, | |
| #copy-citation { | |
| display: inline-flex; | |
| min-height: 48px; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0 20px; | |
| border: 1px solid var(--ink); | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--ink); | |
| cursor: pointer; | |
| font-size: 0.84rem; | |
| font-weight: 750; | |
| text-decoration: none; | |
| white-space: nowrap; | |
| } | |
| .button-link:hover, | |
| #copy-citation:hover { | |
| background: var(--ink); | |
| color: white; | |
| } | |
| .citation { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| gap: 50px; | |
| align-items: end; | |
| padding: 70px 0; | |
| border-top: 1px solid var(--line); | |
| } | |
| .citation p:last-child { | |
| max-width: 740px; | |
| margin: 24px 0 0; | |
| color: var(--muted); | |
| } | |
| .citation a { | |
| text-decoration-color: rgba(8, 127, 108, 0.42); | |
| text-decoration-thickness: 1px; | |
| text-underline-offset: 4px; | |
| } | |
| .citation a:hover { | |
| color: var(--accent-dark); | |
| } | |
| footer { | |
| background: var(--ink); | |
| color: white; | |
| } | |
| footer .shell { | |
| display: flex; | |
| justify-content: space-between; | |
| padding-block: 30px; | |
| color: rgba(255, 255, 255, 0.62); | |
| font-size: 0.8rem; | |
| } | |
| .sr-only { | |
| position: absolute; | |
| overflow: hidden; | |
| width: 1px; | |
| height: 1px; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| } | |
| noscript { | |
| display: block; | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| @media (max-width: 900px) { | |
| .shell { | |
| width: min(100% - 32px, 1480px); | |
| } | |
| .hero-note { | |
| max-width: 520px; | |
| } | |
| .metrics { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .metrics div:nth-child(3) { | |
| border-top: 1px solid rgba(255, 255, 255, 0.17); | |
| border-left: 0; | |
| padding-left: 0; | |
| } | |
| .metrics div:nth-child(4) { | |
| border-top: 1px solid rgba(255, 255, 255, 0.17); | |
| } | |
| .about-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .plot-heading { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .plot-controls { | |
| flex-wrap: wrap; | |
| gap: 10px 18px; | |
| } | |
| } | |
| @media (max-width: 720px) { | |
| .nav-links { | |
| display: none; | |
| } | |
| .hero-content { | |
| padding-block: 64px; | |
| } | |
| h1 { | |
| font-size: clamp(3rem, 15vw, 5rem); | |
| } | |
| .metrics strong { | |
| font-size: 1.55rem; | |
| } | |
| .metrics div { | |
| padding: 20px 14px 22px 0; | |
| } | |
| .metrics div + div { | |
| padding-left: 14px; | |
| } | |
| .leaderboard { | |
| padding-block: 68px; | |
| } | |
| .view-tabs { | |
| overflow-x: auto; | |
| } | |
| .view-tabs button { | |
| min-width: 170px; | |
| } | |
| .plot-card { | |
| padding-inline: 12px; | |
| } | |
| .plot-heading { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .plot-controls { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .plot-metric select { | |
| min-width: 176px; | |
| } | |
| .toolbar { | |
| align-items: stretch; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| #result-count { | |
| margin: 10px 0 0; | |
| } | |
| .table-frame { | |
| display: none; | |
| } | |
| .mobile-cards { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .model-card { | |
| padding: 20px; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| background: var(--surface); | |
| box-shadow: 0 8px 24px rgba(23, 33, 29, 0.05); | |
| } | |
| .card-head, | |
| .card-scores { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 18px; | |
| } | |
| .card-head a { | |
| overflow-wrap: anywhere; | |
| color: var(--ink); | |
| font-weight: 750; | |
| text-decoration: none; | |
| } | |
| .card-rank { | |
| color: var(--accent); | |
| font-family: Georgia, serif; | |
| font-size: 1.5rem; | |
| } | |
| .card-average { | |
| margin: 24px 0; | |
| color: var(--accent-dark); | |
| font-family: Georgia, serif; | |
| font-size: 2.4rem; | |
| } | |
| .card-average small { | |
| color: var(--muted); | |
| font-family: inherit; | |
| font-size: 0.7rem; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .card-scores { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .card-scores span { | |
| display: flex; | |
| flex-direction: column; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .card-scores small { | |
| color: var(--muted); | |
| font-size: 0.66rem; | |
| } | |
| .reproduce, | |
| .citation, | |
| footer .shell { | |
| align-items: stretch; | |
| flex-direction: column; | |
| } | |
| .citation { | |
| display: flex; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| html { | |
| scroll-behavior: auto; | |
| } | |
| } | |