Spaces:
Running on Zero
Running on Zero
| :root { | |
| color-scheme: light; | |
| --text: #17212d; | |
| --muted: #65717d; | |
| --line: #e1e6eb; | |
| --accent: #b45124; | |
| --soft: #fff6ee; | |
| --paper: #fff; | |
| --head: #f5f7f9; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| background: var(--paper); | |
| color: var(--text); | |
| font: | |
| 14px/1.65 ui-sans-serif, | |
| system-ui, | |
| -apple-system, | |
| BlinkMacSystemFont, | |
| "Segoe UI", | |
| sans-serif; | |
| } | |
| button, | |
| input, | |
| select { | |
| font: inherit; | |
| } | |
| button, | |
| summary, | |
| select { | |
| cursor: pointer; | |
| } | |
| a { | |
| color: var(--accent); | |
| text-underline-offset: 3px; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| button:focus-visible, | |
| a:focus-visible, | |
| summary:focus-visible, | |
| input:focus-visible, | |
| select:focus-visible, | |
| .table-shell:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 3px; | |
| } | |
| main { | |
| max-width: 1240px; | |
| margin: auto; | |
| padding: 54px 32px 24px; | |
| } | |
| .introduction { | |
| max-width: 980px; | |
| margin: 0 auto 48px; | |
| } | |
| .eyebrow { | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| font-size: 11px; | |
| font-weight: 650; | |
| color: var(--accent); | |
| margin: 0 0 8px; | |
| } | |
| h1 { | |
| font-size: 44px; | |
| line-height: 1.15; | |
| letter-spacing: -0.04em; | |
| margin: 0 0 10px; | |
| } | |
| .subtitle { | |
| font-size: 21px; | |
| line-height: 1.45; | |
| color: #475567; | |
| margin: 0 0 28px; | |
| } | |
| .introduction h2 { | |
| font-size: 17px; | |
| margin: 0 0 10px; | |
| } | |
| .introduction > p:not(.eyebrow):not(.subtitle) { | |
| color: #4c5865; | |
| font-size: 15px; | |
| line-height: 1.8; | |
| margin: 0 0 12px; | |
| } | |
| strong { | |
| color: var(--text); | |
| font-weight: 600; | |
| } | |
| .resource-links { | |
| display: flex; | |
| gap: 12px; | |
| margin-top: 22px; | |
| } | |
| .resource-links a { | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| padding: 6px 14px; | |
| text-decoration: none; | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .resource-links a:hover { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .resource-links span { | |
| margin-left: 10px; | |
| color: var(--muted); | |
| } | |
| .section-heading { | |
| display: flex; | |
| align-items: end; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .section-heading h2 { | |
| font-size: 27px; | |
| line-height: 1.25; | |
| letter-spacing: -0.025em; | |
| margin: 0; | |
| } | |
| .metadata { | |
| display: flex; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| .subtabs { | |
| display: flex; | |
| border-bottom: 1px solid var(--line); | |
| gap: 24px; | |
| overflow-x: auto; | |
| } | |
| .subtab { | |
| border: 0; | |
| border-bottom: 2px solid transparent; | |
| background: transparent; | |
| padding: 12px 0; | |
| font-size: 13px; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| color: var(--muted); | |
| } | |
| .subtab.active { | |
| color: var(--accent); | |
| border-bottom-color: var(--accent); | |
| } | |
| .toolbar { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 18px 0; | |
| position: relative; | |
| z-index: 8; | |
| } | |
| .metric-control { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| select, | |
| input { | |
| color: var(--text); | |
| background: white; | |
| border: 1px solid #cfd7df; | |
| border-radius: 6px; | |
| min-height: 37px; | |
| padding: 6px 10px; | |
| } | |
| select { | |
| min-width: 120px; | |
| } | |
| .search { | |
| display: flex; | |
| align-items: center; | |
| border: 1px solid #cfd7df; | |
| border-radius: 6px; | |
| padding: 0 10px; | |
| gap: 8px; | |
| margin-left: auto; | |
| width: 260px; | |
| } | |
| .search span { | |
| font-size: 22px; | |
| color: var(--muted); | |
| } | |
| .search input { | |
| border: 0; | |
| min-width: 0; | |
| width: 100%; | |
| padding-left: 0; | |
| outline-offset: 0; | |
| } | |
| .menu { | |
| position: relative; | |
| font-size: 12px; | |
| } | |
| .menu summary { | |
| list-style: none; | |
| padding: 8px 13px; | |
| border: 1px solid #cfd7df; | |
| border-radius: 6px; | |
| white-space: nowrap; | |
| } | |
| .menu summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .menu[open] summary { | |
| background: var(--head); | |
| } | |
| .menu-content { | |
| position: absolute; | |
| right: 0; | |
| top: calc(100% + 8px); | |
| width: 230px; | |
| padding: 12px; | |
| background: white; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| box-shadow: 0 8px 30px #17212d14; | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .menu-content button { | |
| border: 0; | |
| border-radius: 4px; | |
| background: var(--head); | |
| padding: 8px; | |
| text-align: left; | |
| color: var(--text); | |
| } | |
| .menu-content button:hover { | |
| background: var(--soft); | |
| } | |
| .menu-content small { | |
| color: var(--muted); | |
| } | |
| .filter-fields label { | |
| display: grid; | |
| gap: 4px; | |
| } | |
| .filter-fields input { | |
| width: 100%; | |
| } | |
| .table-shell { | |
| height: 560px; | |
| overflow: auto; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| position: relative; | |
| scrollbar-gutter: stable; | |
| overscroll-behavior: contain; | |
| } | |
| table { | |
| width: 100%; | |
| table-layout: fixed; | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| font-size: 13px; | |
| } | |
| thead { | |
| position: sticky; | |
| top: 0; | |
| z-index: 5; | |
| } | |
| th { | |
| background: var(--head); | |
| color: #526071; | |
| font-size: 12px; | |
| line-height: 1.45; | |
| font-weight: 600; | |
| text-align: center; | |
| border-bottom: 1px solid var(--line); | |
| padding: 12px 10px; | |
| height: 68px; | |
| overflow-wrap: normal; | |
| } | |
| th button { | |
| font: inherit; | |
| color: inherit; | |
| border: 0; | |
| background: transparent; | |
| padding: 0; | |
| width: 100%; | |
| text-align: inherit; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 4px; | |
| min-height: 28px; | |
| } | |
| th button:hover { | |
| color: var(--accent); | |
| } | |
| .sort-arrow { | |
| font-size: 12px; | |
| flex-shrink: 0; | |
| color: #94a0ac; | |
| } | |
| th[aria-sort] .sort-arrow { | |
| color: var(--accent); | |
| } | |
| td { | |
| height: 48px; | |
| padding: 10px; | |
| border-bottom: 1px solid #edf0f3; | |
| text-align: center; | |
| white-space: nowrap; | |
| background: white; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| th.identity, | |
| td.identity { | |
| text-align: left; | |
| position: sticky; | |
| left: 0; | |
| z-index: 2; | |
| } | |
| th.model, | |
| td.model { | |
| left: 56px; | |
| } | |
| th.identity { | |
| background: var(--head); | |
| z-index: 6; | |
| } | |
| th.model button { | |
| justify-content: flex-start; | |
| } | |
| td.model { | |
| box-shadow: 1px 0 0 var(--line); | |
| } | |
| td.model a { | |
| color: var(--text); | |
| font-weight: 550; | |
| text-decoration: none; | |
| display: block; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| td.model a:hover { | |
| color: var(--accent); | |
| } | |
| tbody tr:hover td { | |
| background: #f8fafc; | |
| } | |
| td.rank { | |
| color: var(--muted); | |
| } | |
| td.top { | |
| color: var(--accent); | |
| font-weight: 650; | |
| } | |
| td.primary { | |
| font-weight: 700; | |
| color: var(--accent); | |
| background: #fffaf5; | |
| } | |
| th.primary { | |
| color: var(--accent); | |
| } | |
| .group-row th { | |
| height: 36px; | |
| padding: 8px 6px; | |
| text-align: center; | |
| font-size: 12px; | |
| background: #edf1f5; | |
| } | |
| .group-row th:nth-child(even) { | |
| background: #e7edf2; | |
| } | |
| .group-start { | |
| border-left: 1px solid var(--line); | |
| } | |
| .table-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 10px; | |
| margin-top: 10px; | |
| color: var(--muted); | |
| font-size: 11px; | |
| } | |
| .notice { | |
| padding: 10px 14px; | |
| margin-bottom: 12px; | |
| border: 1px solid #ecc69b; | |
| background: #fff7ec; | |
| color: #805020; | |
| border-radius: 6px; | |
| overflow-wrap: anywhere; | |
| } | |
| .hidden { | |
| display: none ; | |
| } | |
| .empty { | |
| text-align: center; | |
| white-space: normal; | |
| color: var(--muted); | |
| height: 160px; | |
| } | |
| .submission { | |
| margin-top: 48px; | |
| border-top: 1px solid var(--line); | |
| padding-top: 32px; | |
| } | |
| .submission > p { | |
| color: var(--muted); | |
| max-width: 850px; | |
| } | |
| .steps { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 24px 38px; | |
| padding: 0; | |
| list-style: none; | |
| counter-reset: step; | |
| margin: 26px 0; | |
| } | |
| .steps li { | |
| position: relative; | |
| padding-left: 36px; | |
| counter-increment: step; | |
| } | |
| .steps li:before { | |
| content: counter(step, decimal-leading-zero); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| color: var(--accent); | |
| font-size: 12px; | |
| font-weight: 650; | |
| } | |
| .steps h3 { | |
| font-size: 14px; | |
| margin: 0 0 7px; | |
| } | |
| .steps p { | |
| font-size: 13px; | |
| color: var(--muted); | |
| margin: 0; | |
| } | |
| .steps code { | |
| font-size: 11px; | |
| overflow-wrap: anywhere; | |
| } | |
| .steps li > code { | |
| display: block; | |
| background: var(--head); | |
| border: 1px solid var(--line); | |
| border-radius: 5px; | |
| padding: 9px; | |
| margin-top: 8px; | |
| } | |
| footer { | |
| border-top: 1px solid var(--line); | |
| padding-top: 18px; | |
| margin-top: 36px; | |
| font-size: 11px; | |
| color: var(--muted); | |
| } | |
| .sr-only { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| border: 0; | |
| } | |
| button:disabled, | |
| select:disabled { | |
| opacity: 0.5; | |
| cursor: wait; | |
| } | |
| @media (min-width: 1500px) { | |
| main { | |
| max-width: 1360px; | |
| } | |
| } | |
| @media (max-width: 760px) { | |
| main { | |
| padding: 30px 18px 20px; | |
| } | |
| h1 { | |
| font-size: 36px; | |
| } | |
| .subtitle { | |
| font-size: 18px; | |
| } | |
| .introduction { | |
| margin-bottom: 34px; | |
| } | |
| .section-heading { | |
| align-items: start; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .toolbar { | |
| flex-wrap: wrap; | |
| } | |
| .metric-control { | |
| margin-right: auto; | |
| } | |
| .search { | |
| order: 4; | |
| width: 100%; | |
| margin: 0; | |
| } | |
| .subtabs { | |
| gap: 20px; | |
| } | |
| .table-shell { | |
| height: 520px; | |
| } | |
| .steps { | |
| grid-template-columns: 1fr; | |
| } | |
| .table-footer { | |
| flex-wrap: wrap; | |
| } | |
| .introduction > p:not(.eyebrow):not(.subtitle) { | |
| font-size: 14px; | |
| } | |
| .menu-content { | |
| width: 210px; | |
| } | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| a, | |
| button, | |
| summary { | |
| transition: | |
| color 0.15s, | |
| background-color 0.15s; | |
| } | |
| } | |
| @media (max-width: 760px) { | |
| .metric-control { | |
| gap: 6px; | |
| } | |
| .metric-control select { | |
| min-width: 100px; | |
| width: 104px; | |
| } | |
| .menu summary { | |
| padding: 8px 9px; | |
| } | |
| .table-shell col:first-child { | |
| width: 56px ; | |
| } | |
| .table-shell col:nth-child(2) { | |
| width: 152px ; | |
| } | |
| th.model, | |
| td.model { | |
| left: 56px; | |
| } | |
| } | |
| /* Editorial introduction and contribution flow. */ | |
| .introduction { | |
| max-width: none; | |
| border-top: 3px solid var(--accent); | |
| padding-top: 28px; | |
| } | |
| .introduction h1 { | |
| font-size: 48px; | |
| } | |
| .introduction .subtitle { | |
| max-width: 780px; | |
| margin-bottom: 30px; | |
| } | |
| .intro-body { | |
| display: grid; | |
| grid-template-columns: 160px minmax(0, 1fr); | |
| gap: 28px; | |
| border-top: 1px solid var(--line); | |
| padding-top: 24px; | |
| } | |
| .intro-body h2 { | |
| font-size: 16px; | |
| padding-top: 3px; | |
| } | |
| .intro-copy { | |
| max-width: 910px; | |
| } | |
| .intro-copy p { | |
| margin: 0 0 14px; | |
| font-size: 15px; | |
| line-height: 1.8; | |
| color: #4c5865; | |
| } | |
| .intro-copy p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .resource-links { | |
| margin-left: 188px; | |
| gap: 10px; | |
| } | |
| .resource-links a { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: #fafbfc; | |
| min-height: 40px; | |
| } | |
| .resource-links a:first-child { | |
| background: var(--soft); | |
| border-color: #e8d5c6; | |
| } | |
| .resource-icon { | |
| width: 17px; | |
| height: 17px; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 1.6; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| } | |
| .resource-links .hf-icon { | |
| margin: 0; | |
| font-size: 18px; | |
| line-height: 1; | |
| } | |
| th.rank, | |
| td.rank { | |
| text-align: center; | |
| padding-inline: 5px; | |
| } | |
| th.model, | |
| td.model { | |
| text-align: left; | |
| } | |
| .group-row th.model { | |
| text-align: left; | |
| } | |
| .leaderboard > .metadata { | |
| justify-content: flex-end; | |
| border-top: 1px solid var(--line); | |
| padding-top: 12px; | |
| margin-top: 14px; | |
| gap: 0; | |
| } | |
| .metadata span + span:not(:empty)::before { | |
| content: "·"; | |
| margin: 0 10px; | |
| color: #a0a8b0; | |
| } | |
| .submission { | |
| padding: 30px; | |
| background: #f8f9fa; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| position: relative; | |
| } | |
| .submission-intro { | |
| max-width: 780px; | |
| margin-bottom: 0; | |
| } | |
| .steps { | |
| gap: 0; | |
| border-top: 1px solid var(--line); | |
| margin: 24px 0 0; | |
| } | |
| .steps li { | |
| padding: 24px 24px 24px 48px; | |
| } | |
| .steps li:nth-child(odd) { | |
| border-right: 1px solid var(--line); | |
| } | |
| .steps li:nth-child(-n + 2) { | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .steps li:nth-child(even) { | |
| padding-left: 68px; | |
| } | |
| .steps li::before { | |
| top: 24px; | |
| left: 0; | |
| width: 30px; | |
| height: 30px; | |
| display: grid; | |
| place-items: center; | |
| background: white; | |
| border: 1px solid #e7d4c5; | |
| border-radius: 50%; | |
| } | |
| .steps li:nth-child(even)::before { | |
| left: 22px; | |
| } | |
| .steps h3 { | |
| margin: 2px 0 8px; | |
| font-size: 15px; | |
| } | |
| .steps li > code { | |
| background: white; | |
| } | |
| @media (max-width: 760px) { | |
| .introduction { | |
| padding-top: 22px; | |
| } | |
| .introduction h1 { | |
| font-size: 36px; | |
| } | |
| .intro-body { | |
| grid-template-columns: 1fr; | |
| gap: 8px; | |
| padding-top: 18px; | |
| } | |
| .intro-copy p { | |
| font-size: 14px; | |
| } | |
| .resource-links { | |
| margin-left: 0; | |
| } | |
| .leaderboard > .metadata { | |
| justify-content: flex-start; | |
| font-size: 11px; | |
| } | |
| .submission { | |
| padding: 22px 18px; | |
| } | |
| .steps li, | |
| .steps li:nth-child(even) { | |
| padding: 22px 0 22px 44px; | |
| border-right: 0; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .steps li:last-child { | |
| border-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| .steps li::before, | |
| .steps li:nth-child(even)::before { | |
| left: 0; | |
| top: 22px; | |
| } | |
| } | |
| .arxiv-icon { | |
| width: 18px; | |
| height: 18px; | |
| fill: #b31b1b; | |
| flex-shrink: 0; | |
| } | |
| .command-panel { | |
| margin-top: 12px; | |
| border: 1px solid #33404c; | |
| border-radius: 8px; | |
| background: #202b36; | |
| overflow: hidden; | |
| box-shadow: 0 3px 8px #17212d0a; | |
| } | |
| .command-heading { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 8px 12px; | |
| border-bottom: 1px solid #3c4650; | |
| background: #29343f; | |
| color: #c1cbd5; | |
| font-size: 11px; | |
| } | |
| .command-heading > span { | |
| letter-spacing: 0.06em; | |
| } | |
| .command-heading button { | |
| font-size: 11px; | |
| padding: 3px 7px; | |
| border: 1px solid #5a6570; | |
| border-radius: 4px; | |
| background: transparent; | |
| color: #e0e6ec; | |
| } | |
| .command-heading button:hover { | |
| background: #3b4854; | |
| border-color: #93a0ac; | |
| } | |
| .command-panel pre { | |
| margin: 0; | |
| padding: 14px; | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| color: #e0e7ee; | |
| line-height: 1.85; | |
| } | |
| .command-panel code { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| font-size: 12px; | |
| } | |
| .syntax-program { | |
| color: #a8dabb; | |
| } | |
| .syntax-option { | |
| color: #a6c9ef; | |
| } | |
| .syntax-path { | |
| color: #f0cba3; | |
| } | |
| .syntax-value { | |
| color: #d6bbed; | |
| } | |
| /* A continuous four-step workflow, paired with a separate command example. */ | |
| .submission-flow { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); | |
| gap: 44px; | |
| align-items: stretch; | |
| } | |
| .submission-guide { | |
| min-width: 0; | |
| } | |
| .submission-flow .steps { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 22px; | |
| margin: 30px 0 0; | |
| padding: 0; | |
| border: 0; | |
| } | |
| .submission-flow .steps li { | |
| padding: 0 0 0 46px; | |
| border: 0; | |
| } | |
| .submission-flow .steps li::before { | |
| left: 0; | |
| top: 0; | |
| } | |
| .submission-flow .steps li:not(:last-child)::after { | |
| content: ""; | |
| position: absolute; | |
| left: 15px; | |
| top: 38px; | |
| bottom: -14px; | |
| width: 1px; | |
| background: var(--line); | |
| } | |
| .submission-flow .steps h3 { | |
| margin-top: 2px; | |
| margin-bottom: 5px; | |
| } | |
| .validation-card { | |
| min-width: 0; | |
| padding: 24px; | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| background: white; | |
| } | |
| .validation-card h3 { | |
| font-size: 18px; | |
| line-height: 1.4; | |
| margin: 0 0 10px; | |
| } | |
| .validation-card > p:not(.eyebrow) { | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.7; | |
| margin: 0; | |
| } | |
| .validation-card .command-panel { | |
| margin-top: 18px; | |
| box-shadow: none; | |
| } | |
| @media (max-width: 760px) { | |
| .submission-flow { | |
| grid-template-columns: 1fr; | |
| gap: 0; | |
| } | |
| .validation-card { | |
| margin-top: 16px; | |
| padding: 16px; | |
| } | |
| .validation-card h3 { | |
| font-size: 16px; | |
| } | |
| .validation-card .command-heading { | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .validation-card .command-panel pre { | |
| padding: 12px; | |
| } | |
| } | |
| /* Prediction upload uses the existing contribution card and accent palette. */ | |
| .evaluation-button { | |
| display: inline-block; | |
| padding: 8px 13px; | |
| margin-top: 12px; | |
| border: 1px solid #cfd7df; | |
| border-radius: 6px; | |
| background: white; | |
| color: var(--text); | |
| font-size: 13px; | |
| font-weight: 600; | |
| } | |
| .evaluation-button:hover:not(:disabled) { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .evaluation-button:disabled { cursor: not-allowed; } | |
| .evaluation-button.primary-action { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| color: white; | |
| } | |
| .evaluation-button.primary-action:hover:not(:disabled) { | |
| background: #914827; | |
| border-color: #914827; | |
| color: white; | |
| } | |
| .prediction-example { | |
| margin-top: 10px; | |
| font-size: 12px; | |
| } | |
| .prediction-example summary { | |
| width: fit-content; | |
| color: var(--accent); | |
| cursor: pointer; | |
| font-weight: 600; | |
| } | |
| .prediction-example code { | |
| display: block; | |
| margin-top: 8px; | |
| padding: 9px 11px; | |
| overflow-wrap: anywhere; | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| background: white; | |
| color: var(--text); | |
| } | |
| #evaluation-form fieldset { | |
| border: 0; | |
| padding: 0; | |
| margin: 20px 0 0; | |
| min-width: 0; | |
| display: grid; | |
| gap: 8px; | |
| } | |
| #evaluation-form label { font-size: 13px; font-weight: 600; } | |
| #evaluation-form label:not(:first-of-type) { margin-top: 8px; } | |
| #evaluation-form label span, #evaluation-file-help { color: var(--muted); font-weight: 400; } | |
| #evaluation-form input { width: 100%; min-width: 0; } | |
| #evaluation-form input:disabled { background: var(--head); } | |
| #evaluation-file { font-size: 12px; } | |
| #evaluation-status { color: var(--muted); font-size: 13px; } | |
| #evaluation-status:empty { margin: 0; } | |
| #evaluation-error { margin: 12px 0 0; } | |
| .evaluation-report { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; } | |
| .evaluation-report h3 { margin: 0 0 10px; font-size: 20px; } | |
| .evaluation-report p { overflow-wrap: anywhere; } | |
| #evaluation-unavailable { color: var(--muted); font-size: 13px; } | |
| .evaluation-table { overflow: auto; border: 1px solid var(--line); border-radius: 8px; } | |
| .evaluation-table table { min-width: 640px; } | |
| .evaluation-table thead { position: static; } | |
| .evaluation-table td { white-space: normal; overflow-wrap: anywhere; } | |
| .evaluation-table:focus-visible, .evaluation-report:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } | |
| .evaluation-actions { display: flex; flex-wrap: wrap; gap: 10px; } | |
| #submission-dialog { | |
| width: min(440px, calc(100vw - 36px)); | |
| padding: 0; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| box-shadow: 0 20px 60px #17212d33; | |
| } | |
| #submission-dialog::backdrop { background: #17212d73; } | |
| .submission-dialog-content { padding: 28px; } | |
| .submission-dialog-content h3 { margin: 0 0 10px; font-size: 20px; } | |
| .submission-dialog-content > p:not(.eyebrow) { color: var(--muted); line-height: 1.65; } | |
| /* Model comparison shares the table's metric, search and parameter filters. */ | |
| .performance-chart { margin: 4px 0 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 3px 12px #17212d06; overflow: hidden; } | |
| .chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; border-bottom: 1px solid var(--line); } | |
| .chart-heading h3 { margin: 0; font-size: 21px; } | |
| .chart-heading p { margin: 4px 0 0; color: var(--muted); } | |
| .chart-heading select { max-width: 290px; } | |
| .chart-scroll { overflow-x: auto; padding: 18px 12px 0; } | |
| .chart-scroll svg { display: block; min-width: 100%; } | |
| .chart-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; } | |
| .chart-empty { padding: 60px 20px; text-align: center; color: var(--muted); } | |
| @media (max-width: 700px) { | |
| .chart-heading { align-items: flex-start; flex-direction: column; padding: 18px; } | |
| .chart-heading select { max-width: 240px; } | |
| } | |
| .performance-chart { border-radius: 9px; box-shadow: none; } | |
| .chart-heading { border-bottom: 0; padding-bottom: 8px; } | |
| .chart-heading h3 { font-family: Georgia, serif; font-weight: 500; font-size: 23px; } | |