PrunaAI/P-Bench
24
1import asyncio2import json3from collections import defaultdict4from pathlib import Path5 6# Gradio 5.19's safe_get_lock() returns None on Python 3.12+/3.14 when no7# event loop exists yet, which breaks /queue/join (pending_message_lock).8try:9 asyncio.get_running_loop()10except RuntimeError:11 asyncio.set_event_loop(asyncio.new_event_loop())12 13import gradio as gr14import pandas as pd15 16from ui import (17 render_footer,18 render_header,19 render_image_workspace,20)21 22# Visual tokens from https://www.pruna.ai/ and https://playground.pruna.ai/23custom_css = """24:root, :host, .dark, :host(.dark) {25 --pruna-bg-primary: #120b1b;26 --pruna-bg-card: #171021;27 --pruna-bg-elevated: #1d1429;28 --pruna-bg-header: #17101f;29 --pruna-border: rgba(74, 57, 98, 0.75);30 --pruna-hairline: rgba(255, 255, 255, 0.08);31 --pruna-text-primary: #fafafa;32 --pruna-text-body: #d4d4d4;33 --pruna-text-muted: #a3a3a3;34 --pruna-accent: #9334e9;35 --pruna-accent-bright: #8f35ff;36 --pruna-lavender: #d8b4fe;37 --pruna-link: #bf8bff;38 --pruna-font: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;39 --pruna-glow: radial-gradient(ellipse 60% 35% at 50% -5%, rgba(147, 52, 233, 0.18), transparent 55%);40 --pruna-card-bg: color-mix(in oklab, #1d1429 92%, black 8%);41 --pruna-card-shadow: 0 24px 55px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.04);42 --pruna-callout-bg: color-mix(in oklab, #171021 82%, black 18%);43 --pruna-menu-border: rgba(255, 255, 255, 0.08);44 --pruna-menu-bg: rgba(255, 255, 255, 0.03);45 --pruna-menu-hover-bg: rgba(255, 255, 255, 0.05);46 --pruna-menu-hover-color: #e4e4e7;47 --pruna-menu-selected-bg: rgba(143, 53, 255, 0.22);48 --pruna-menu-selected-color: #ffffff;49 --pruna-tab-hover: #e4e4e7;50 --pruna-tab-selected: #ffffff;51 --pruna-input-bg: rgba(255, 255, 255, 0.03);52 --pruna-input-border: rgba(255, 255, 255, 0.08);53 --pruna-focus-border: rgba(143, 53, 255, 0.45);54 --pruna-focus-ring: 0 0 0 3px rgba(143, 53, 255, 0.16);55 --pruna-table-hover: rgba(143, 53, 255, 0.16);56 --pruna-table-hover-text: #ffffff;57 --pruna-table-sticky: #17101f;58 --pruna-table-sticky-hover: #2a1844;59 --pruna-rank-bg: rgba(143, 53, 255, 0.22);60 --pruna-rank-ring: 0 0 0 1px rgba(143, 53, 255, 0.45);61 --pruna-score: #ddd6fe;62 --pruna-accordion-bg: rgba(255, 255, 255, 0.02);63 --pruna-accordion-border: rgba(216, 180, 254, 0.15);64 --pruna-dropdown-hover: #2a1844;65 --pruna-toggle-track: var(--pruna-bg-header);66 --pruna-toggle-thumb: var(--pruna-bg-elevated);67 --pruna-toggle-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px rgba(255, 255, 255, 0.06);68 color-scheme: dark;69}70 71.light, :host(.light) {72 --pruna-bg-primary: #f6f3fa;73 --pruna-bg-card: #ffffff;74 --pruna-bg-elevated: #ffffff;75 --pruna-bg-header: #f3eef8;76 --pruna-border: rgba(126, 34, 206, 0.16);77 --pruna-hairline: rgba(24, 24, 27, 0.08);78 --pruna-text-primary: #18181b;79 --pruna-text-body: #3f3f46;80 --pruna-text-muted: #71717a;81 --pruna-accent: #9334e9;82 --pruna-accent-bright: #7c22ce;83 --pruna-lavender: #7e22ce;84 --pruna-link: #6d28d9;85 --pruna-glow: radial-gradient(ellipse 60% 35% at 50% -5%, rgba(147, 52, 233, 0.10), transparent 55%);86 --pruna-card-bg: #ffffff;87 --pruna-card-shadow: 0 10px 28px rgba(88, 28, 135, 0.08);88 --pruna-callout-bg: #ffffff;89 --pruna-menu-border: var(--pruna-border);90 --pruna-menu-bg: var(--pruna-bg-card);91 --pruna-menu-hover-bg: rgba(147, 52, 233, 0.06);92 --pruna-menu-hover-color: var(--pruna-text-primary);93 --pruna-menu-selected-bg: rgba(147, 52, 233, 0.12);94 --pruna-menu-selected-color: var(--pruna-accent-bright);95 --pruna-tab-hover: var(--pruna-text-primary);96 --pruna-tab-selected: var(--pruna-text-primary);97 --pruna-input-bg: var(--pruna-bg-card);98 --pruna-input-border: var(--pruna-border);99 --pruna-focus-border: rgba(124, 34, 206, 0.45);100 --pruna-focus-ring: 0 0 0 3px rgba(143, 53, 255, 0.16);101 --pruna-table-hover: rgba(147, 52, 233, 0.08);102 --pruna-table-hover-text: var(--pruna-text-primary);103 --pruna-table-sticky: var(--pruna-bg-card);104 --pruna-table-sticky-hover: #f3e8ff;105 --pruna-rank-bg: rgba(147, 52, 233, 0.12);106 --pruna-rank-ring: 0 0 0 1px rgba(147, 52, 233, 0.28);107 --pruna-score: var(--pruna-accent-bright);108 --pruna-accordion-bg: var(--pruna-bg-card);109 --pruna-accordion-border: var(--pruna-border);110 --pruna-dropdown-hover: #f3e8ff;111 --pruna-toggle-track: var(--pruna-bg-header);112 --pruna-toggle-thumb: var(--pruna-bg-card);113 --pruna-toggle-thumb-shadow: 0 1px 2px rgba(88, 28, 135, 0.12);114 color-scheme: light;115}116 117html {118 width: 100% !important;119 max-width: 100% !important;120 min-width: 0 !important;121 overflow-x: hidden;122 overflow-y: auto;123 -webkit-text-size-adjust: 100%;124 text-size-adjust: 100%;125 -webkit-tap-highlight-color: transparent;126}127body, gradio-app {128 width: 100% !important;129 max-width: 100% !important;130 min-width: 0 !important;131 overflow: visible;132 -webkit-tap-highlight-color: transparent;133}134html, body, .gradio-container, .main {135 background: var(--pruna-bg-primary) !important;136 color: var(--pruna-text-primary) !important;137 font-family: var(--pruna-font) !important;138}139button, a, label, input, select, textarea,140[role="button"], [role="tab"], [role="radio"],141.gradio-container * {142 -webkit-tap-highlight-color: transparent !important;143}144 145.gradio-container {146 --input-radius: 10px;147 --container-radius: 10px;148 --block-radius: 10px;149}150 151/* Subtle depth — not a marketing-site hero glow */152body, .gradio-container {153 background-image: var(--pruna-glow) !important;154 background-repeat: no-repeat !important;155 background-attachment: scroll !important;156}157@media (min-width: 701px) and (hover: hover) and (pointer: fine) {158 body, .gradio-container {159 background-attachment: fixed !important;160 }161}162 163.gradio-container {164 width: 100% !important;165 max-width: 1200px !important;166 min-width: 0 !important;167 margin: 0 auto !important;168 padding-top: 0 !important;169 padding-left: 20px !important;170 padding-right: 20px !important;171 box-sizing: border-box !important;172 overflow-x: hidden;173}174.gradio-container .main,175.gradio-container .wrap,176.gradio-container .contain,177.gradio-container .block,178.gradio-container .form,179.gradio-container .row,180.gradio-container .column,181.gradio-container .gap,182.gradio-container .html-container,183.gradio-container .prose,184.gradio-container .padded,185.main-tabs,186.main-tabs .tab-wrapper,187.main-tabs .tabitem,188.leaderboard-controls,189.workspace-shell,190.workspace-filters,191.view-filters {192 max-width: 100% !important;193 min-width: 0 !important;194}195 196/* —— App header (P-Bench only) —— */197.app-header-host,198.app-header-host .html-container,199.app-header-host .prose,200.app-header-host.block,201.app-header-host .padded {202 border: none !important;203 background: transparent !important;204 box-shadow: none !important;205 padding: 0 !important;206 margin: 0 auto !important;207 width: 100% !important;208 max-width: none !important;209 display: block !important;210 text-align: center !important;211 overflow: visible !important;212}213.app-header {214 position: relative;215 display: flex;216 flex-direction: column;217 align-items: stretch;218 width: 100%;219 margin: 8px 0 0;220 padding: 4px 0 10px;221 text-align: center;222}223.app-header-bar {224 display: grid;225 grid-template-columns: minmax(36px, 1fr) auto minmax(36px, 1fr);226 align-items: center;227 width: 100%;228 column-gap: 8px;229}230.app-header .theme-toggle,231button.theme-toggle {232 position: static !important;233 top: auto;234 right: auto;235 grid-column: 3;236 justify-self: end;237 display: inline-flex !important;238 align-items: center !important;239 justify-content: center !important;240 width: 36px !important;241 height: 36px !important;242 min-width: 36px !important;243 min-height: 36px !important;244 margin: 0 !important;245 padding: 0 !important;246 border: 1px solid var(--pruna-menu-border) !important;247 border-radius: 10px !important;248 background: var(--pruna-menu-bg) !important;249 color: var(--pruna-text-muted) !important;250 box-shadow: none !important;251 appearance: none !important;252 -webkit-appearance: none !important;253 box-sizing: border-box !important;254 font: inherit !important;255 line-height: 0 !important;256 cursor: pointer;257 z-index: 6;258}259.app-header .theme-toggle:hover,260.app-header .theme-toggle:active,261button.theme-toggle:hover,262button.theme-toggle:active {263 color: var(--pruna-menu-hover-color) !important;264 background: var(--pruna-menu-hover-bg) !important;265 border-color: var(--pruna-menu-border) !important;266 box-shadow: none !important;267}268.app-header .theme-toggle:focus,269button.theme-toggle:focus {270 outline: none !important;271}272.app-header .theme-toggle:focus-visible,273button.theme-toggle:focus-visible {274 color: var(--pruna-menu-hover-color) !important;275 background: var(--pruna-menu-hover-bg) !important;276 border-color: var(--pruna-focus-border) !important;277 box-shadow: var(--pruna-focus-ring) !important;278}279.app-header .theme-toggle svg,280button.theme-toggle svg {281 width: 18px;282 height: 18px;283 flex-shrink: 0;284}285.app-header .theme-toggle .theme-icon-sun,286button.theme-toggle .theme-icon-sun { display: block !important; }287.app-header .theme-toggle .theme-icon-moon,288button.theme-toggle .theme-icon-moon { display: none !important; }289.app-header .theme-toggle[data-mode="light"] .theme-icon-sun,290button.theme-toggle[data-mode="light"] .theme-icon-sun { display: none !important; }291.app-header .theme-toggle[data-mode="light"] .theme-icon-moon,292button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !important; }293.app-header-brand {294 display: inline-flex !important;295 flex-direction: row;296 align-items: center;297 justify-content: center;298 gap: 12px;299 grid-column: 2;300 justify-self: center;301 width: auto !important;302 max-width: 100%;303 margin: 0;304}305.app-header-logo {306 display: block !important;307 width: 44px !important;308 height: 52px !important;309 margin: 0 !important;310 object-fit: contain;311 flex: 0 0 auto;312}313 314/* —— Page tabs: centered underline nav —— */315.workspace-shell,316.workspace-shell.block,317.workspace-shell.column,318.workspace-shell.gap {319 display: flex !important;320 flex-direction: column !important;321 gap: 0 !important;322 padding: 0 !important;323 margin: 0 !important;324 border: none !important;325 background: transparent !important;326 box-shadow: none !important;327}328/* Flatten tabs so the bar sits above shared filters. display:contents is329 the fallback; Safari can drop or mis-order those children, so browsers330 with subgrid use the grid layout below instead. */331.workspace-shell > .tabs,332.workspace-shell > .main-tabs,333.workspace-shell > .block:not(.workspace-filters),334.workspace-shell .tabs.main-tabs {335 display: contents !important;336}337.workspace-filters {338 order: 2 !important;339}340.main-tabs .tabitem {341 order: 3 !important;342}343.tabs {344 gap: 0 !important;345}346.main-tabs > .tab-wrapper {347 order: 1 !important;348 height: auto !important;349 min-height: 0 !important;350 padding: 0 !important;351 margin: 0 0 16px !important;352 justify-content: center !important;353 width: 100% !important;354 overflow: visible !important;355}356@supports (grid-template-rows: subgrid) {357 .workspace-shell,358 .workspace-shell.block,359 .workspace-shell.column,360 .workspace-shell.gap {361 display: grid !important;362 grid-template-columns: minmax(0, 1fr) !important;363 grid-template-rows: auto auto auto !important;364 align-content: start !important;365 }366 .workspace-shell > .tabs,367 .workspace-shell > .main-tabs,368 .workspace-shell .tabs.main-tabs {369 display: grid !important;370 grid-template-columns: minmax(0, 1fr) !important;371 grid-template-rows: subgrid !important;372 grid-column: 1 !important;373 grid-row: 1 / 4 !important;374 position: static !important;375 }376 .main-tabs > .tab-wrapper {377 grid-row: 1 !important;378 order: 0 !important;379 }380 .workspace-filters {381 grid-column: 1 !important;382 grid-row: 2 !important;383 order: 0 !important;384 }385 .main-tabs .tabitem {386 grid-row: 3 !important;387 order: 0 !important;388 min-width: 0 !important;389 }390}391.main-tabs .tab-container {392 height: auto !important;393 min-height: 0 !important;394 justify-content: center !important;395 flex-wrap: wrap !important;396 overflow: visible !important;397 max-width: 100% !important;398 gap: 2px;399}400.main-tabs .tab-container::after {401 background: var(--pruna-hairline) !important;402}403.main-tabs .tab-container > button {404 font-family: var(--pruna-font) !important;405 font-size: 0.95rem !important;406 font-weight: 600 !important;407 letter-spacing: -0.015em !important;408 color: var(--pruna-text-muted) !important;409 background: transparent !important;410 border: none !important;411 border-radius: 0 !important;412 box-shadow: none !important;413 padding: 12px 20px !important;414 min-height: 44px !important;415 height: auto !important;416}417.main-tabs .tab-container > button:hover:not(.selected),418.main-tabs .tab-container > button:active:not(.selected) {419 color: var(--pruna-tab-hover) !important;420 background: transparent !important;421}422.main-tabs .tab-container > button.selected,423.main-tabs .tab-container > button[aria-selected="true"] {424 color: var(--pruna-tab-selected) !important;425 background: transparent !important;426}427.main-tabs .tab-container > button:disabled,428.main-tabs .tab-container > button[disabled] {429 opacity: 0.4 !important;430 color: var(--pruna-text-muted) !important;431 cursor: not-allowed !important;432}433.main-tabs .tab-container > button.selected::after,434.main-tabs .tab-container > button[aria-selected="true"]::after {435 background: var(--pruna-accent-bright) !important;436 height: 2px !important;437}438.main-tabs .tabitem {439 padding: 8px 0 0 !important;440 border-radius: 0 !important;441 overflow: visible !important;442}443 444/* —— About: two columns on desktop, stacked on phone —— */445.about-layout,446.about-layout.row,447.about-layout .form {448 display: flex !important;449 flex-wrap: wrap !important;450 align-items: flex-start !important;451 gap: 8px 40px !important;452 width: 100% !important;453}454.about-layout > .about-col,455.about-layout .form > .about-col {456 flex: 1 1 340px !important;457 min-width: 280px !important;458 max-width: 100% !important;459}460.about-copy,461.about-copy.block,462.about-copy .prose,463.about-copy.prose,464.about-copy.padded {465 border: none !important;466 background: transparent !important;467 box-shadow: none !important;468 padding: 0 !important;469 margin: 0 !important;470 width: 100% !important;471 max-width: 100% !important;472 overflow-wrap: break-word !important;473 word-break: break-word !important;474}475.about-copy ol,476.about-copy ul,477.about-copy .prose ol,478.about-copy .prose ul {479 padding-left: 1.25rem !important;480 margin: 0 0 0.8rem !important;481}482.about-copy li,483.about-copy .prose li {484 overflow-wrap: break-word;485}486 487@media (max-width: 700px) {488 .gradio-container {489 padding-left: 12px !important;490 padding-right: 12px !important;491 }492 .gradio-container .block,493 .gradio-container .form,494 .gradio-container .row,495 .gradio-container .column,496 .gradio-container .wrap,497 .leaderboard-controls,498 .view-filters {499 min-width: 0 !important;500 max-width: 100% !important;501 }502 .app-header {503 padding: 4px 0 8px;504 margin: 4px 0 0;505 }506 .app-header-logo {507 width: 36px !important;508 height: 42px !important;509 }510 .app-header-brand h1,511 .gradio-container .app-header-brand h1 {512 font-size: 1.55rem !important;513 width: auto !important;514 max-width: 100% !important;515 }516 .app-header-tagline {517 font-size: 0.88rem !important;518 padding: 0 8px !important;519 }520 .main-tabs > .tab-wrapper {521 margin: 4px 0 14px !important;522 }523 .main-tabs .tab-container {524 flex-wrap: wrap !important;525 justify-content: center !important;526 gap: 0 !important;527 }528 .main-tabs .tab-container > button {529 padding: 10px 12px !important;530 font-size: 0.88rem !important;531 min-height: 40px !important;532 }533 .about-layout,534 .about-layout.row,535 .about-layout .form {536 flex-direction: column !important;537 flex-wrap: nowrap !important;538 gap: 8px !important;539 }540 .about-layout > .about-col,541 .about-layout > div {542 flex: 1 1 auto !important;543 width: 100% !important;544 }545 .about-copy h1,546 .about-copy .prose h1 {547 font-size: 1.3rem !important;548 }549 .about-copy h2,550 .about-copy .prose h2 {551 margin-top: 1.25rem !important;552 font-size: 1.12rem !important;553 }554 .community-footer-links {555 gap: 10px 14px;556 }557 .leaderboard-controls,558 .leaderboard-controls.row,559 .leaderboard-controls .form,560 .view-filters,561 .view-filters.row,562 .view-filters .form {563 flex-direction: column !important;564 align-items: stretch !important;565 }566 .leaderboard-controls > div,567 .leaderboard-controls .form > div,568 .view-filters > div,569 .view-filters .form > div {570 flex: 1 1 auto !important;571 width: 100% !important;572 max-width: 100% !important;573 }574 .ranking-table-scroll {575 max-height: min(75vh, 640px);576 width: 100%;577 }578 .ranking-table th,579 .ranking-table td,580 .prose .ranking-table th,581 .prose .ranking-table td {582 padding: 8px 10px !important;583 }584 .ranking-table,585 .prose .ranking-table {586 --rank-col-width: 3.25rem;587 }588 .ranking-table .rank,589 .prose .ranking-table .rank,590 .ranking-table th.rank {591 position: sticky !important;592 left: 0 !important;593 width: var(--rank-col-width);594 min-width: var(--rank-col-width);595 max-width: var(--rank-col-width);596 box-shadow: none;597 }598 .ranking-table .model-cell,599 .prose .ranking-table .model-cell {600 position: static !important;601 left: auto !important;602 z-index: auto;603 min-width: 140px;604 max-width: none;605 background: transparent !important;606 box-shadow: none !important;607 }608 .ranking-table th.model-cell,609 .prose .ranking-table th.model-cell {610 position: sticky !important;611 top: 0 !important;612 left: auto !important;613 z-index: 3;614 min-width: 140px;615 max-width: none;616 background: var(--pruna-bg-header) !important;617 box-shadow: 0 1px 0 var(--pruna-hairline) !important;618 }619 .ranking-table tbody tr:hover .model-cell {620 background: var(--pruna-table-hover) !important;621 }622 .compare-controls,623 .compare-controls.row,624 .compare-controls .form {625 flex-direction: column !important;626 flex-wrap: nowrap !important;627 flex: 0 0 auto !important;628 align-items: stretch !important;629 align-content: flex-start !important;630 height: auto !important;631 min-height: 0 !important;632 gap: 10px !important;633 margin-bottom: 12px !important;634 }635 .compare-controls .compare-models,636 .compare-controls .compare-prompt-count,637 .compare-controls .compare-shuffle,638 .compare-controls .form > div {639 flex: 0 0 auto !important;640 width: 100% !important;641 max-width: 100% !important;642 min-width: 0 !important;643 height: auto !important;644 min-height: 0 !important;645 align-self: stretch !important;646 }647 .compare-controls .compare-prompt-count {648 max-width: 100% !important;649 }650 .compare-controls .compare-models .wrap,651 .compare-controls .compare-models .wrap-inner {652 height: auto !important;653 min-height: 40px !important;654 }655 .compare-controls .compare-shuffle,656 .compare-controls .compare-shuffle button {657 width: 100% !important;658 align-self: stretch !important;659 margin-top: 0 !important;660 }661 .compare-row {662 grid-template-columns: 1fr !important;663 }664 .compare-prompt-meta {665 flex-wrap: wrap;666 }667 .pareto-layout,668 .pareto-layout.row,669 .pareto-layout .form {670 flex-direction: column !important;671 }672 .pareto-layout > .pareto-col,673 .pareto-layout > div,674 .pareto-layout .form > div {675 flex: 1 1 auto !important;676 width: 100% !important;677 }678}679 680/* —— Workspace filters (dataset / metric / models) —— */681.workspace-filters,682.workspace-filters.block,683.workspace-filters.column,684.workspace-filters.gap {685 margin: 0 0 12px;686 padding: 0 !important;687 gap: 12px !important;688 overflow: visible !important;689}690.view-filters {691 display: flex !important;692 flex-wrap: wrap !important;693 align-items: flex-end !important;694 gap: 12px !important;695 margin: 0;696 overflow: visible !important;697}698.view-filters > div,699.view-filters > .block,700.view-filters > .form {701 flex: 1 1 0% !important;702 min-width: 0 !important;703}704.view-filters > .block,705.view-filters .form,706.view-filters .block {707 border: none !important;708 background: transparent !important;709 box-shadow: none !important;710 padding: 0 !important;711 overflow: visible !important;712 --block-border-width: 0 !important;713}714.view-filters label {715 display: block !important;716 margin: 0 !important;717 padding: 0 0 8px !important;718 color: var(--pruna-text-muted) !important;719 font-size: 0.8rem !important;720 font-weight: 500 !important;721 line-height: 1.2 !important;722}723.view-filters .wrap {724 min-width: 0 !important;725 border: none !important;726 background: transparent !important;727 box-shadow: none !important;728 overflow: visible !important;729}730.view-filters .wrap-inner {731 display: flex !important;732 flex-wrap: nowrap !important;733 align-items: center !important;734 gap: 6px !important;735 min-height: 40px !important;736 height: 40px !important;737 padding: 0 10px !important;738 border: 1px solid var(--pruna-input-border) !important;739 border-radius: 10px !important;740 background: var(--pruna-input-bg) !important;741 box-shadow: none !important;742 overflow: hidden !important;743}744.view-filters .secondary-wrap {745 display: flex !important;746 flex-wrap: nowrap !important;747 align-items: center !important;748 flex: 1 1 auto !important;749 min-width: 0 !important;750 height: 40px !important;751 margin: 0 !important;752 padding: 0 !important;753 border: none !important;754 background: transparent !important;755 box-shadow: none !important;756 overflow: visible !important;757}758.view-filters .filter-chips .wrap-inner {759 overflow-x: auto !important;760 overflow-y: hidden !important;761 overscroll-behavior-x: contain;762 scrollbar-width: thin;763 scrollbar-color: var(--pruna-border) transparent;764}765.view-filters .filter-chips .secondary-wrap {766 min-width: 2.5rem !important;767}768.view-filters .filter-chips .wrap-inner::-webkit-scrollbar {769 height: 6px;770}771.view-filters .filter-chips .wrap-inner::-webkit-scrollbar-thumb {772 background: var(--pruna-border);773 border-radius: 99px;774}775.view-filters .filter-chips .token {776 flex: 0 0 auto !important;777 white-space: nowrap !important;778 word-break: keep-all !important;779}780.view-filters .filter-chips .token span {781 white-space: nowrap !important;782 overflow: hidden !important;783 text-overflow: ellipsis !important;784 max-width: 14rem;785}786.view-filters .token:empty {787 display: none !important;788}789.view-filters input {790 border: none !important;791 background: transparent !important;792 box-shadow: none !important;793 min-height: 28px !important;794 height: 28px !important;795 width: 100% !important;796 min-width: 0 !important;797 padding: 0 4px !important;798 line-height: 28px !important;799}800.view-filters .dropdown-arrow,801.view-filters .icon-wrap {802 flex: 0 0 auto !important;803 align-self: center !important;804 margin-left: auto !important;805}806.view-title,807.view-title.block,808.view-title .padded {809 border: none !important;810 background: transparent !important;811 box-shadow: none !important;812 padding: 0 !important;813 margin: 0 0 8px !important;814}815.view-title h1,816.view-title .prose h1,817.gradio-container .view-title h1 {818 margin: 0.35rem 0 0.4rem !important;819 font-size: 1.45rem !important;820}821.filter-help-host,822.filter-help-host.block,823.filter-help-host .padded,824.filter-help-host .html-container,825.filter-help-host .prose {826 border: none !important;827 background: transparent !important;828 box-shadow: none !important;829 padding: 0 !important;830 margin: 0 !important;831}832.view-help-host,833.view-help-host.block,834.view-help-host .padded,835.view-help-host .html-container,836.view-help-host .prose {837 border: none !important;838 background: transparent !important;839 box-shadow: none !important;840 padding: 0 !important;841 margin: 0 0 10px !important;842}843.filter-help,844.prose .filter-help,845.view-help,846.prose .view-help {847 margin: 0 !important;848 color: var(--pruna-text-muted) !important;849 font-size: 0.95rem !important;850 line-height: 1.45 !important;851 font-weight: 400 !important;852}853.view-help + .view-help,854.prose .view-help + .view-help {855 margin-top: 0.45rem !important;856}857.view-filters span[data-testid="block-info"],858.view-filters .info,859.view-filters .block-info {860 color: var(--pruna-text-muted) !important;861 font-size: 0.75rem !important;862 line-height: 1.35 !important;863 margin-top: 4px !important;864}865.compare-prompt-block {866 border: 1px solid var(--pruna-border) !important;867 border-radius: 16px !important;868 background: var(--pruna-card-bg) !important;869 box-shadow: var(--pruna-card-shadow) !important;870}871 872/* Page footer — flat community strip + quiet citation accordion */873.page-footer-host,874.page-footer-host .html-container,875.page-footer-host .prose,876.page-footer-host.block,877.page-footer-host .padded {878 border: none !important;879 background: transparent !important;880 box-shadow: none !important;881 padding: 0 !important;882 margin: 0 !important;883 width: 100% !important;884 max-width: none !important;885 overflow: visible !important;886}887.page-footer {888 margin: 32px 0 16px;889 padding: 20px 0 0;890 border-top: 1px solid var(--pruna-hairline);891}892.page-footer h3 {893 margin: 0 0 10px !important;894 font-size: 1.05rem !important;895 font-weight: 600 !important;896 letter-spacing: -0.015em !important;897 text-transform: none !important;898 color: var(--pruna-text-primary) !important;899}900.community-footer-links {901 display: flex;902 flex-wrap: wrap;903 gap: 8px 16px;904 align-items: center;905}906.community-footer-links a {907 color: var(--pruna-text-muted) !important;908 text-decoration: none !important;909 font-size: 0.9rem !important;910 font-weight: 500 !important;911}912.community-footer-links a:hover {913 color: var(--pruna-link) !important;914}915 916/* Citation accordion — full-width control, not a section heading */917.citation-accordion {918 margin: 0 0 28px !important;919}920.citation-accordion,921.citation-accordion.block {922 border: 1px solid var(--pruna-accordion-border) !important;923 border-radius: 10px !important;924 background: var(--pruna-accordion-bg) !important;925 box-shadow: none !important;926 overflow: hidden !important;927}928.citation-accordion > .label-wrap,929.citation-accordion .label-wrap {930 border: none !important;931 background: transparent !important;932 box-shadow: none !important;933 padding: 11px 14px !important;934 font-size: 0.92rem !important;935 font-weight: 500 !important;936 color: var(--pruna-text-primary) !important;937 letter-spacing: -0.01em !important;938}939.citation-accordion > .label-wrap:hover,940.citation-accordion .label-wrap:hover {941 background: var(--pruna-menu-hover-bg) !important;942}943.citation-accordion > .label-wrap span,944.citation-accordion .label-wrap span {945 color: var(--pruna-text-primary) !important;946 font-size: 0.92rem !important;947 font-weight: 500 !important;948}949.citation-accordion .icon,950.citation-accordion .label-wrap .icon {951 color: var(--pruna-text-muted) !important;952 opacity: 0.9;953}954.citation-accordion .prose,955.citation-accordion .markdown,956.citation-accordion pre,957.citation-accordion code {958 color: var(--pruna-text-muted) !important;959 background: transparent !important;960 border: none !important;961 box-shadow: none !important;962}963.citation-accordion .wrap,964.citation-accordion > .wrap {965 border-top: 1px solid var(--pruna-hairline) !important;966 padding: 4px 14px 12px !important;967 background: transparent !important;968}969.citation-accordion pre {970 margin: 0 !important;971 padding: 0 !important;972 font-size: 0.8rem !important;973 line-height: 1.55 !important;974 overflow-x: auto;975}976 977.pareto-plot,978.pareto-plot.block,979.pareto-plot .plotly,980.pareto-plot .js-plotly-plot,981.pareto-plot .plot-container,982.pareto-plot .svg-container,983.pareto-plot .main-svg {984 width: 100% !important;985 max-width: 100% !important;986 background: transparent !important;987 border-color: var(--pruna-border) !important;988}989.pareto-plot .modebar { display: none !important; }990 991.leaderboard-controls {992 display: flex !important;993 flex-wrap: wrap !important;994 align-items: flex-end !important;995 gap: 10px !important;996 margin-bottom: 12px;997 overflow: visible !important;998}999.leaderboard-controls > div {1000 min-width: 0 !important;1001}1002.leaderboard-controls > .block,1003.leaderboard-controls .form,1004.leaderboard-controls .block {1005 border: none !important;1006 background: transparent !important;1007 box-shadow: none !important;1008 padding: 0 !important;1009 --block-border-width: 0 !important;1010}1011.leaderboard-controls label {1012 color: var(--pruna-text-muted) !important;1013 font-size: 0.8rem !important;1014 font-weight: 500 !important;1015}1016.leaderboard-controls textarea {1017 min-height: 40px !important;1018 height: 40px !important;1019 padding: 0 12px !important;1020 border: 1px solid var(--pruna-input-border) !important;1021 border-radius: 10px !important;1022 background: var(--pruna-input-bg) !important;1023 box-shadow: none !important;1024 color: var(--pruna-text-primary) !important;1025 font-family: var(--pruna-font) !important;1026 font-size: 0.9rem !important;1027 line-height: 40px !important;1028 resize: none !important;1029}1030.leaderboard-controls textarea:focus {1031 border-color: var(--pruna-focus-border) !important;1032 outline: none !important;1033 box-shadow: var(--pruna-focus-ring) !important;1034}1035.leaderboard-controls .wrap {1036 min-height: 0 !important;1037 border: none !important;1038 background: transparent !important;1039 box-shadow: none !important;1040 overflow: visible !important;1041}1042.leaderboard-controls .wrap-inner {1043 display: flex !important;1044 flex-wrap: wrap !important;1045 align-items: center !important;1046 gap: 6px !important;1047 min-height: 40px !important;1048 height: auto !important;1049 padding: 4px 10px !important;1050 border: 1px solid var(--pruna-input-border) !important;1051 border-radius: 10px !important;1052 background: var(--pruna-input-bg) !important;1053 box-shadow: none !important;1054 overflow: visible !important;1055}1056.leaderboard-controls .secondary-wrap {1057 display: flex !important;1058 flex-wrap: wrap !important;1059 align-items: center !important;1060 gap: 6px !important;1061 flex: 1 1 auto !important;1062 min-width: 0 !important;1063 min-height: 0 !important;1064 height: auto !important;1065 margin: 0 !important;1066 padding: 0 !important;1067 border: none !important;1068 background: transparent !important;1069 box-shadow: none !important;1070}1071.leaderboard-controls .token {1072 display: inline-flex !important;1073 align-items: center !important;1074 max-width: 100% !important;1075 margin: 0 !important;1076}1077.leaderboard-controls .token:empty {1078 display: none !important;1079}1080.leaderboard-controls .dropdown-arrow,1081.leaderboard-controls .icon-wrap {1082 flex: 0 0 auto !important;1083 align-self: center !important;1084 margin-left: auto !important;1085}1086.ranking-table-host,1087.ranking-table-host .html-container,1088.ranking-table-host .prose,1089.ranking-table-host.block,1090.ranking-table-host .padded,1091.ranking-table-host.prose {1092 display: grid !important;1093 grid-template-columns: minmax(0, 1fr) !important;1094 border: none !important;1095 outline: none !important;1096 background: transparent !important;1097 box-shadow: none !important;1098 padding: 0 !important;1099 margin: 0 !important;1100 width: 100% !important;1101 max-width: 100% !important;1102 min-width: 0 !important;1103 overflow: hidden !important;1104 --block-border-width: 0 !important;1105}1106.ranking-table-scroll {1107 border: 1px solid var(--pruna-menu-border);1108 border-radius: 12px;1109 background: var(--pruna-menu-bg);1110 box-shadow: none;1111 width: 100%;1112 max-width: 100%;1113 min-width: 0;1114 max-height: min(70vh, 720px);1115 overflow-x: auto;1116 overflow-y: auto;1117 overscroll-behavior: none;1118}1119.ranking-table,1120.prose .ranking-table {1121 --rank-col-width: 4.25rem;1122 width: 100%;1123 margin: 0 !important;1124 overflow: visible;1125}1126.ranking-table table,1127.prose .ranking-table table {1128 display: table !important;1129 width: max-content !important;1130 min-width: 100% !important;1131 max-width: none !important;1132 margin: 0 !important;1133 border-collapse: separate !important;1134 border-spacing: 0 !important;1135 color: var(--pruna-text-body) !important;1136 font-size: 13px !important;1137 line-height: 1.35 !important;1138 background: transparent !important;1139 border: none !important;1140 outline: none !important;1141}1142.ranking-table thead { display: table-header-group !important; }1143.ranking-table tbody { display: table-row-group !important; }1144.ranking-table tr { display: table-row !important; }1145.ranking-table th,1146.ranking-table td,1147.prose .ranking-table th,1148.prose .ranking-table td {1149 display: table-cell !important;1150 vertical-align: middle !important;1151 padding: 11px 14px !important;1152 border: 0 !important;1153 border-bottom: 1px solid var(--pruna-hairline) !important;1154 background: transparent !important;1155 box-shadow: none !important;1156 outline: none !important;1157}1158.ranking-table th,1159.prose .ranking-table th {1160 position: sticky;1161 top: 0;1162 z-index: 3;1163 background: var(--pruna-bg-header) !important;1164 color: var(--pruna-text-muted) !important;1165 font-size: 11px !important;1166 font-weight: 600 !important;1167 letter-spacing: 0.04em;1168 text-align: left;1169 text-transform: uppercase;1170 white-space: nowrap;1171 box-shadow: 0 1px 0 var(--pruna-hairline) !important;1172}1173.ranking-table th.sortable-col { cursor: pointer; user-select: none; }1174.ranking-table th.sortable-col:hover { color: var(--pruna-lavender) !important; }1175.ranking-table th.sortable-col.sorted-asc::after,1176.ranking-table th.sortable-col.sorted-desc::after {1177 margin-left: 0.35em;1178 font-size: 0.85em;1179 opacity: 0.85;1180}1181.ranking-table th.sortable-col.sorted-asc::after { content: "▲"; }1182.ranking-table th.sortable-col.sorted-desc::after { content: "▼"; }1183.ranking-table tbody tr:last-child td { border-bottom: 0 !important; }1184.ranking-table tbody tr:hover td {1185 background: var(--pruna-table-hover) !important;1186}1187.ranking-table tbody tr:hover td,1188.ranking-table tbody tr:hover .rank,1189.ranking-table tbody tr:hover .metric-score,1190.ranking-table tbody tr:hover .text-cell,1191.ranking-table tbody tr:hover .model-cell strong,1192.ranking-table tbody tr:hover .model-cell span { color: var(--pruna-table-hover-text) !important; }1193.ranking-table .rank,1194.prose .ranking-table .rank {1195 position: sticky;1196 left: 0;1197 z-index: 2;1198 box-sizing: border-box;1199 width: var(--rank-col-width);1200 min-width: var(--rank-col-width);