style fixes

app.py

@@ -1,7 +1,15 @@
+import asyncio
 import json
 from collections import defaultdict
 from pathlib import Path
 
+# Gradio 5.19's safe_get_lock() returns None on Python 3.12+/3.14 when no
+# event loop exists yet, which breaks /queue/join (pending_message_lock).
+try:
+    asyncio.get_running_loop()
+except RuntimeError:
+    asyncio.set_event_loop(asyncio.new_event_loop())
+
 import gradio as gr
 import pandas as pd
 
@@ -13,92 +21,373 @@ from ui import (
     render_home,
 )
 
+# Visual tokens from https://www.pruna.ai/ and https://playground.pruna.ai/
 custom_css = """
-.logo {
-    width: 300px;
-    height: auto;
-    max-width: 100%;
-    margin: 0 auto;
+:root {
+    --pruna-bg-primary: #120b1b;
+    --pruna-bg-card: #171021;
+    --pruna-bg-elevated: #1d1429;
+    --pruna-border: rgba(74, 57, 98, 0.75);
+    --pruna-text-primary: #fafafa;
+    --pruna-text-body: #d4d4d4;
+    --pruna-text-muted: #a3a3a3;
+    --pruna-accent: #9334e9;
+    --pruna-accent-bright: #8f35ff;
+    --pruna-lavender: #d8b4fe;
+    --pruna-green: #69a45c;
+    --pruna-link: #bf8bff;
+    --pruna-font: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+}
+
+html, body, .gradio-container, .main {
+    background: var(--pruna-bg-primary) !important;
+    color: var(--pruna-text-primary) !important;
+    font-family: var(--pruna-font) !important;
+}
+
+/* Subtle depth — not a marketing-site hero glow */
+body, .gradio-container {
+    background-image:
+        radial-gradient(ellipse 60% 35% at 50% -5%, rgba(147, 52, 233, 0.18), transparent 55%) !important;
+    background-attachment: fixed !important;
+}
+
+.gradio-container {
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+    padding-top: 0 !important;
+}
+
+/* —— App header (InferBench only) —— */
+.app-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 14px;
+    margin: 8px 0 20px;
+    padding: 8px 4px 4px;
+    text-align: left;
+}
+.app-header-logo {
+    width: 40px;
+    height: 47px;
     object-fit: contain;
-    padding-bottom: 0;
-}
-.text {
-    font-size: 16px !important;
-}
-.tabs button,
-.tab-nav button,
-.subtabs button {
-    font-size: 20px;
-    color: #581c87 !important;
-}
-.tabs button.selected,
-.tabs button[aria-selected="true"],
-.tab-nav button.selected,
-.tab-nav button[aria-selected="true"],
-.subtabs button.selected,
-.subtabs button[aria-selected="true"] {
+    flex-shrink: 0;
+}
+
+/* —— Page tabs: centered underline nav (Gradio 5 uses tab-wrapper/container) —— */
+.tabs {
+    gap: 0 !important;
+}
+.main-tabs > .tab-wrapper {
+    height: auto !important;
+    min-height: 0 !important;
+    padding: 0 !important;
+    margin: 0 0 22px !important;
+    justify-content: center !important;
+}
+.main-tabs .tab-container {
+    height: auto !important;
+    justify-content: center !important;
+    overflow: visible !important;
+    gap: 2px;
+}
+.main-tabs .tab-container::after {
+    background: rgba(255, 255, 255, 0.08) !important;
+}
+.main-tabs .tab-container > button {
+    font-family: var(--pruna-font) !important;
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.015em !important;
+    color: var(--pruna-text-muted) !important;
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    padding: 12px 20px !important;
+    min-height: 44px !important;
+    height: auto !important;
+}
+.main-tabs .tab-container > button:hover:not(.selected) {
+    color: #e4e4e7 !important;
+    background: transparent !important;
+}
+.main-tabs .tab-container > button.selected,
+.main-tabs .tab-container > button[aria-selected="true"] {
     color: #ffffff !important;
-    background: #7c3aed !important;
-    border-color: #6d28d9 !important;
-}
-.dark .tabs button,
-.dark .tab-nav button,
-.dark .subtabs button {
-    color: #e9d5ff !important;
-}
-.dark .tabs button.selected,
-.dark .tabs button[aria-selected="true"],
-.dark .tab-nav button.selected,
-.dark .tab-nav button[aria-selected="true"],
-.dark .subtabs button.selected,
-.dark .subtabs button[aria-selected="true"] {
+    background: transparent !important;
+}
+.main-tabs .tab-container > button.selected::after,
+.main-tabs .tab-container > button[aria-selected="true"]::after {
+    background: var(--pruna-accent-bright) !important;
+    height: 2px !important;
+}
+
+/* —— Benchmark view menu (Leaderboard / Graphs / Compare) —— */
+.benchmark-back-btn,
+.benchmark-back-btn.block,
+.benchmark-back-btn .padded {
+    width: fit-content !important;
+    min-width: 0 !important;
+    margin: 0 0 4px !important;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+.benchmark-back-btn button,
+.benchmark-back-btn button.secondary,
+.benchmark-back-btn button.lg,
+.benchmark-back-btn button.sm {
+    display: inline-flex !important;
+    align-items: center !important;
+    width: auto !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    height: auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    border-radius: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    color: var(--pruna-text-muted) !important;
+    font-family: var(--pruna-font) !important;
+    font-size: 0.9rem !important;
+    font-weight: 500 !important;
+    letter-spacing: -0.01em !important;
+    line-height: 1.4 !important;
+}
+.benchmark-back-btn button:hover {
+    color: var(--pruna-link) !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+.benchmark-view-menu,
+.benchmark-view-menu.block,
+.benchmark-view-menu .form {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 4px 0 20px !important;
+}
+.benchmark-view-menu .wrap {
+    display: grid !important;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 4px !important;
+    width: 100%;
+    padding: 4px !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border-radius: 12px !important;
+    background: rgba(255, 255, 255, 0.03) !important;
+}
+.benchmark-view-menu label {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    margin: 0 !important;
+    padding: 10px 12px !important;
+    border: none !important;
+    border-radius: 8px !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    color: var(--pruna-text-muted) !important;
+    font-family: var(--pruna-font) !important;
+    font-size: 0.9rem !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.015em !important;
+    cursor: pointer;
+}
+.benchmark-view-menu label:hover {
+    color: #e4e4e7 !important;
+    background: rgba(255, 255, 255, 0.05) !important;
+}
+.benchmark-view-menu label.selected {
     color: #ffffff !important;
-    background: #6d28d9 !important;
+    background: rgba(143, 53, 255, 0.22) !important;
+}
+.benchmark-view-menu input[type="radio"] {
+    position: absolute !important;
+    opacity: 0 !important;
+    width: 0 !important;
+    height: 0 !important;
+    margin: 0 !important;
+    pointer-events: none !important;
 }
+.benchmark-view-menu label span {
+    margin: 0 !important;
+    color: inherit !important;
+}
+@media (max-width: 700px) {
+    .benchmark-view-menu .wrap {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Surfaces */
 .benchmark-catalogue-row {
     width: 100%;
-    gap: 16px;
+    gap: 16px !important;
+    align-items: stretch !important;
+}
+.benchmark-catalogue-row > div {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+}
+.benchmark-card-col {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: space-between !important;
+    gap: 16px !important;
+    height: 100% !important;
+    min-height: 240px !important;
+    padding: 18px 20px !important;
+    border: 1px solid var(--pruna-border) !important;
+    border-radius: 16px !important;
+    background: color-mix(in oklab, var(--pruna-bg-elevated) 92%, black 8%) !important;
+    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.04) !important;
+}
+.benchmark-card-col:hover {
+    border-color: color-mix(in srgb, var(--pruna-accent) 50%, transparent) !important;
+}
+.benchmark-card-body {
+    flex: 1 1 auto;
+    min-height: 0;
+}
+.benchmark-card-title {
+    color: var(--pruna-text-primary);
+    font-size: 1.25rem;
+    font-weight: 700;
+    line-height: 1.3;
+    margin: 0 0 8px;
 }
-.benchmark-card {
-    width: 100%;
-    max-width: none;
-    min-height: 220px;
-    border: 1px solid rgba(124, 58, 237, 0.45);
-    border-left: 4px solid #7c3aed;
-    border-radius: 12px;
-    background: rgba(139, 92, 246, 0.14);
-    padding: 16px 18px;
-    box-shadow: 0 4px 12px rgba(76, 29, 149, 0.12);
-}
-.benchmark-card:hover {
-    border-color: #5b21b6;
-    box-shadow: 0 6px 18px rgba(76, 29, 149, 0.22);
-}
-.community-footer {
-    margin-top: 24px;
-    padding: 18px 20px;
-    border: 1px solid #c4b5fd;
-    border-radius: 12px;
-    background: rgba(139, 92, 246, 0.16);
+.benchmark-card-blurb {
+    margin: 0;
+    color: var(--pruna-text-body);
+    font-size: 0.95rem;
+    line-height: 1.45;
 }
-.community-footer h3 {
-    margin: 0 0 10px;
-    color: #581c87;
-    font-size: 1.05rem;
+.benchmark-card-col .benchmark-open-btn,
+.benchmark-card-col button {
+    margin-top: auto !important;
+    width: 100% !important;
+    align-self: stretch !important;
+    flex-shrink: 0 !important;
+}
+.home-callouts > div,
+.compare-prompt-block {
+    border: 1px solid var(--pruna-border) !important;
+    border-radius: 16px !important;
+    background: color-mix(in oklab, var(--pruna-bg-elevated) 92%, black 8%) !important;
+    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.04) !important;
+}
+
+/* Page footer — flat community strip + quiet citation accordion */
+.page-footer-host,
+.page-footer-host .html-container,
+.page-footer-host .prose,
+.page-footer-host.block,
+.page-footer-host .padded {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+.page-footer {
+    margin: 32px 0 16px;
+    padding: 20px 0 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+.page-footer h3 {
+    margin: 0 0 10px !important;
+    font-size: 1.05rem !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.015em !important;
+    text-transform: none !important;
+    color: #ffffff !important;
 }
 .community-footer-links {
     display: flex;
     flex-wrap: wrap;
-    gap: 10px 14px;
+    gap: 8px 16px;
     align-items: center;
 }
-.dark .community-footer {
-    border-color: #6d28d9;
-    background: rgba(76, 29, 149, 0.35);
+.community-footer-links a {
+    color: var(--pruna-text-muted) !important;
+    text-decoration: none !important;
+    font-size: 0.9rem !important;
+    font-weight: 500 !important;
 }
-.dark .community-footer h3 {
-    color: #f5f3ff;
+.community-footer-links a:hover {
+    color: var(--pruna-link) !important;
 }
+
+/* Citation accordion — full-width control, not a section heading */
+.citation-accordion {
+    margin: 0 0 28px !important;
+}
+.citation-accordion,
+.citation-accordion.block {
+    border: 1px solid rgba(216, 180, 254, 0.15) !important;
+    border-radius: 10px !important;
+    background: rgba(255, 255, 255, 0.02) !important;
+    box-shadow: none !important;
+    overflow: hidden !important;
+}
+.citation-accordion > .label-wrap,
+.citation-accordion .label-wrap {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 11px 14px !important;
+    font-size: 0.92rem !important;
+    font-weight: 500 !important;
+    color: #e4e4e7 !important;
+    letter-spacing: -0.01em !important;
+}
+.citation-accordion > .label-wrap:hover,
+.citation-accordion .label-wrap:hover {
+    background: rgba(255, 255, 255, 0.04) !important;
+}
+.citation-accordion > .label-wrap span,
+.citation-accordion .label-wrap span {
+    color: #e4e4e7 !important;
+    font-size: 0.92rem !important;
+    font-weight: 500 !important;
+}
+.citation-accordion .icon,
+.citation-accordion .label-wrap .icon {
+    color: var(--pruna-text-muted) !important;
+    opacity: 0.9;
+}
+.citation-accordion .prose,
+.citation-accordion .markdown,
+.citation-accordion pre,
+.citation-accordion code {
+    color: var(--pruna-text-muted) !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+.citation-accordion .wrap,
+.citation-accordion > .wrap {
+    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
+    padding: 4px 14px 12px !important;
+    background: transparent !important;
+}
+.citation-accordion pre {
+    margin: 0 !important;
+    padding: 0 !important;
+    font-size: 0.8rem !important;
+    line-height: 1.55 !important;
+    overflow-x: auto;
+}
+
 .home-callouts {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -107,143 +396,177 @@ custom_css = """
 }
 .home-callouts > div {
     padding: 14px 16px;
-    border: 1px solid #a78bfa;
-    border-radius: 10px;
-    background: #f5f3ff;
+    background: color-mix(in oklab, var(--pruna-bg-card) 82%, black 18%) !important;
+    box-shadow: none !important;
 }
 .home-callouts span {
-    color: #5b21b6;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.05em;
+    display: block;
 }
 .home-callouts strong {
     display: block;
     margin-top: 6px;
-    color: #1e1b4b;
-    font-size: 18px;
     word-break: break-word;
 }
 .home-callouts em {
     display: block;
     margin-top: 4px;
-    color: #4c1d95;
     font-style: normal;
-    font-size: 13px;
-}
-.home-benchmark-card {
-    height: 100%;
-    padding: 18px 18px 16px;
-    border: 1px solid #a78bfa;
-    border-left: 4px solid #7c3aed;
-    border-radius: 12px;
-    background: #f5f3ff;
-    box-shadow: 0 4px 12px rgba(76, 29, 149, 0.12);
 }
-.home-benchmark-title {
-    color: #1e1b4b;
-    font-size: 1.35rem;
-    font-weight: 700;
-}
-.home-benchmark-blurb {
-    margin: 8px 0 14px;
-    color: #312e81;
-    font-size: 0.95rem;
-    line-height: 1.45;
+.home-snapshots-host,
+.home-snapshots-host .html-container,
+.home-snapshots-host .prose,
+.home-snapshots-host.block,
+.home-snapshots-host .padded {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+.home-snapshots-table {
+    display: table !important;
+    width: 100% !important;
+    border-collapse: separate !important;
+    border-spacing: 40px 14px !important;
+    margin: 0 !important;
+    table-layout: fixed !important;
+    border: none !important;
+    background: transparent !important;
+}
+.home-snapshots-table tbody {
+    display: table-row-group !important;
+}
+.home-snapshots-table tr {
+    display: table-row !important;
+}
+.home-snapshots-table td.home-snap-cell {
+    display: table-cell !important;
+    vertical-align: top !important;
+    width: 50% !important;
+    padding: 0 !important;
+    border: 0 !important;
+    background: transparent !important;
+}
+.home-snap-title,
+.prose .home-snap-title {
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+    margin: 0 !important;
+    min-height: 1.5rem;
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.01em;
+    line-height: 1.3 !important;
+    color: #e4e4e7 !important;
+}
+.home-snap-emoji {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+    font-size: 1rem;
+    line-height: 1;
+}
+.home-snap-blurb,
+.prose .home-snap-blurb,
+.prose p.home-snap-blurb {
+    margin: 0 !important;
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.875rem !important;
+    font-weight: 400 !important;
+    line-height: 1.45 !important;
+}
+.home-snap-top {
+    padding-top: 10px;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    width: 100%;
 }
 .home-top-label {
-    color: #5b21b6;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
+    margin: 0;
 }
 .home-top-list {
     list-style: none;
     margin: 8px 0 0;
     padding: 0;
 }
-.home-top-list li {
+.home-top-list li,
+.prose .home-top-list li {
     display: grid;
-    grid-template-columns: 28px 1fr auto;
+    grid-template-columns: 28px minmax(0, 1fr) auto;
     gap: 10px;
     align-items: center;
     padding: 8px 0;
-    border-bottom: 1px solid #ddd6fe;
-    color: #1e1b4b;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    color: var(--pruna-text-primary) !important;
 }
-.home-rank {
+@media (max-width: 700px) {
+    .home-snapshots-table,
+    .home-snapshots-table tbody,
+    .home-snapshots-table tr,
+    .home-snapshots-table td {
+        display: block;
+        width: 100% !important;
+    }
+    .home-snapshots-table {
+        margin: 4px 0 8px;
+        border-spacing: 0;
+    }
+    .home-snapshots-table td.home-snap-cell {
+        margin-bottom: 8px;
+    }
+    .home-snap-top {
+        margin-bottom: 16px;
+    }
+}
+.home-rank,
+.prose .home-rank {
     width: 28px;
     height: 28px;
     border-radius: 999px;
-    background: #ede9fe;
-    color: #5b21b6;
+    background: rgba(143, 53, 255, 0.22) !important;
+    color: var(--pruna-lavender) !important;
     font-weight: 700;
     font-size: 13px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    box-shadow: 0 0 0 1px rgba(143, 53, 255, 0.45);
 }
-.home-model {
+.home-model,
+.prose .home-model {
     font-weight: 600;
     word-break: break-word;
-    color: #1e1b4b;
+    color: var(--pruna-text-primary) !important;
 }
-.home-score {
+.home-score,
+.prose .home-score {
     font-variant-numeric: tabular-nums;
-    color: #4c1d95;
+    color: #ddd6fe !important;
     font-weight: 600;
 }
-.home-empty {
-    color: #4c1d95;
-}
-.dark .home-callouts > div,
-.dark .home-benchmark-card {
-    border-color: #7c3aed;
-    background: #1e1b4b;
-}
-.dark .home-callouts span,
-.dark .home-top-label,
-.dark .home-rank {
-    color: #c4b5fd;
-}
-.dark .home-rank {
-    background: #312e81;
-}
-.dark .home-callouts strong,
-.dark .home-benchmark-title,
-.dark .home-model,
-.dark .home-top-list li {
-    color: #faf5ff;
-}
-.dark .home-callouts em,
-.dark .home-benchmark-blurb,
-.dark .home-score,
-.dark .home-empty {
-    color: #ddd6fe;
-}
-.dark .home-top-list li {
-    border-bottom-color: #4c1d95;
+.home-empty,
+.prose .home-empty {
+    color: var(--pruna-text-muted) !important;
 }
+
 @media (max-width: 700px) {
-    .home-callouts {
-        grid-template-columns: 1fr;
+    .home-callouts { grid-template-columns: 1fr; }
+    .app-header {
+        flex-direction: column;
+        text-align: center;
     }
+    .app-header-copy { text-align: center; }
 }
-.pareto-plot {
-    width: 100%;
-}
-.pareto-plot .plotly {
-    width: 100% !important;
-}
+
+.pareto-plot { width: 100%; }
+.pareto-plot .plotly,
 .pareto-plot .js-plotly-plot,
-.pareto-plot .plot-container {
-    width: 100% !important;
-}
-/* Hide the Plotly toolbar so it doesn't cover points in the top-right. */
-.pareto-plot .modebar {
-    display: none !important;
-}
+.pareto-plot .plot-container { width: 100% !important; }
+.pareto-plot .modebar { display: none !important; }
+
 .leaderboard-summary {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -252,13 +575,13 @@ custom_css = """
 }
 .leaderboard-summary > div {
     padding: 14px 16px;
-    border: 1px solid #c4b5fd;
-    border-radius: 10px;
-    background: rgba(139, 92, 246, 0.14);
+    border: 1px solid color-mix(in oklab, var(--pruna-border) 60%, transparent);
+    border-radius: 12px;
+    background: color-mix(in oklab, var(--pruna-bg-card) 82%, black 18%);
 }
 .leaderboard-summary span,
 .results-heading {
-    color: #7e22ce;
+    color: var(--pruna-text-muted);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.05em;
@@ -266,19 +589,90 @@ custom_css = """
 .leaderboard-summary strong {
     display: block;
     margin-top: 4px;
-    color: #581c87;
+    color: var(--pruna-text-primary);
     font-size: 22px;
 }
 .leaderboard-controls {
-    align-items: end;
-    margin-bottom: 8px;
-}
-.ranking-table-host {
-    width: 100%;
+    align-items: end !important;
+    gap: 10px !important;
+    margin-bottom: 12px;
+}
+.leaderboard-controls > .block,
+.leaderboard-controls .form,
+.leaderboard-controls .block {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    --block-border-width: 0 !important;
+}
+.leaderboard-controls label {
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+}
+.leaderboard-search label,
+.leaderboard-search .block-label,
+.leaderboard-search .block-label span {
+    color: #ffffff !important;
+    font-size: 0.85rem !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.01em !important;
+}
+.leaderboard-search input,
+.leaderboard-controls input,
+.leaderboard-controls textarea {
+    min-height: 40px !important;
+    height: 40px !important;
+    padding: 0 12px !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border-radius: 10px !important;
+    background: rgba(255, 255, 255, 0.03) !important;
+    box-shadow: none !important;
+    color: var(--pruna-text-primary) !important;
+    font-family: var(--pruna-font) !important;
+    font-size: 0.9rem !important;
+    line-height: 40px !important;
+    resize: none !important;
+}
+.leaderboard-search input {
+    font-weight: 600 !important;
+}
+.leaderboard-search input::placeholder,
+.leaderboard-controls input::placeholder {
+    color: var(--pruna-text-muted) !important;
+    opacity: 0.85;
 }
-.ranking-table {
-    margin-top: 4px;
-    width: 100%;
+.leaderboard-search input:focus,
+.leaderboard-controls input:focus,
+.leaderboard-controls textarea:focus {
+    border-color: rgba(143, 53, 255, 0.45) !important;
+    outline: none !important;
+    box-shadow: 0 0 0 3px rgba(143, 53, 255, 0.16) !important;
+}
+.leaderboard-controls .wrap,
+.leaderboard-controls .wrap-inner,
+.leaderboard-controls .secondary-wrap {
+    min-height: 40px !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border-radius: 10px !important;
+    background: rgba(255, 255, 255, 0.03) !important;
+    box-shadow: none !important;
+}
+.ranking-table-host,
+.ranking-table-host .html-container,
+.ranking-table-host .prose,
+.ranking-table-host.block,
+.ranking-table-host .padded,
+.ranking-table-host.prose {
+    border: none !important;
+    outline: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    width: 100% !important;
+    --block-border-width: 0 !important;
 }
 .results-heading {
     display: flex;
@@ -287,143 +681,173 @@ custom_css = """
     text-transform: uppercase;
 }
 .ranking-table-scroll {
-    overflow-x: auto;
-    border: 1px solid #c4b5fd;
-    border-radius: 10px;
-    background: rgba(139, 92, 246, 0.12);
-}
-.ranking-table table {
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.03);
+    box-shadow: none;
+    max-height: min(70vh, 720px);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+}
+.ranking-table,
+.prose .ranking-table {
     width: 100%;
-    min-width: 800px;
-    border-collapse: collapse;
-    color: #581c87;
-    font-size: 14px;
-}
-.ranking-table th {
-    padding: 11px 14px;
-    border-bottom: 1px solid #c4b5fd;
-    color: #7e22ce;
-    font-size: 11px;
+    margin: 0 !important;
+    overflow: visible;
+}
+.ranking-table table,
+.prose .ranking-table table {
+    display: table !important;
+    width: max-content !important;
+    min-width: 100% !important;
+    max-width: none !important;
+    margin: 0 !important;
+    border-collapse: separate !important;
+    border-spacing: 0 !important;
+    color: var(--pruna-text-body) !important;
+    font-size: 13px !important;
+    line-height: 1.35 !important;
+    background: transparent !important;
+    border: none !important;
+    outline: none !important;
+}
+.ranking-table thead { display: table-header-group !important; }
+.ranking-table tbody { display: table-row-group !important; }
+.ranking-table tr { display: table-row !important; }
+.ranking-table th,
+.ranking-table td,
+.prose .ranking-table th,
+.prose .ranking-table td {
+    display: table-cell !important;
+    vertical-align: middle !important;
+    padding: 11px 14px !important;
+    border: 0 !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+.ranking-table th,
+.prose .ranking-table th {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    background: #17101f !important;
+    color: var(--pruna-text-muted) !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
     letter-spacing: 0.04em;
     text-align: left;
     text-transform: uppercase;
-}
-.ranking-table th.sortable-col {
-    cursor: pointer;
-    user-select: none;
     white-space: nowrap;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) !important;
 }
-.ranking-table th.sortable-col:hover {
-    color: #4c1d95;
-}
+.ranking-table th.sortable-col { cursor: pointer; user-select: none; }
+.ranking-table th.sortable-col:hover { color: var(--pruna-lavender) !important; }
 .ranking-table th.sortable-col.sorted-asc::after,
 .ranking-table th.sortable-col.sorted-desc::after {
     margin-left: 0.35em;
     font-size: 0.85em;
     opacity: 0.85;
 }
-.ranking-table th.sortable-col.sorted-asc::after {
-    content: "▲";
-}
-.ranking-table th.sortable-col.sorted-desc::after {
-    content: "▼";
-}
-.ranking-table td {
-    padding: 13px 14px;
-    border-bottom: 1px solid #e9d5ff;
-}
-.ranking-table tbody tr:last-child td {
-    border-bottom: 0;
-}
-.ranking-table tbody tr:hover {
-    background: #6d28d9;
+.ranking-table th.sortable-col.sorted-asc::after { content: "▲"; }
+.ranking-table th.sortable-col.sorted-desc::after { content: "▼"; }
+.ranking-table tbody tr:last-child td { border-bottom: 0 !important; }
+.ranking-table tbody tr:hover td {
+    background: rgba(143, 53, 255, 0.16) !important;
 }
 .ranking-table tbody tr:hover td,
 .ranking-table tbody tr:hover .rank,
 .ranking-table tbody tr:hover .metric-score,
+.ranking-table tbody tr:hover .text-cell,
 .ranking-table tbody tr:hover .model-cell strong,
-.ranking-table tbody tr:hover .model-cell span {
-    color: #ffffff;
+.ranking-table tbody tr:hover .model-cell span { color: #ffffff !important; }
+.ranking-table .rank,
+.prose .ranking-table .rank {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    box-sizing: border-box;
+    width: 3.25rem;
+    min-width: 3.25rem;
+    color: var(--pruna-lavender) !important;
+    font-weight: 700 !important;
+    text-align: center;
+    background: #17101f !important;
 }
-.ranking-table .rank {
-    color: #7c3aed;
-    font-weight: 700;
+.ranking-table th.rank,
+.prose .ranking-table th.rank {
+    top: 0;
+    left: 0;
+    z-index: 5;
+    text-align: center;
+}
+.ranking-table .model-cell,
+.prose .ranking-table .model-cell {
+    position: sticky;
+    left: 3.25rem;
+    z-index: 1;
+    min-width: 180px;
+    max-width: 260px;
+    background: #17101f !important;
+}
+.ranking-table th.model-cell,
+.prose .ranking-table th.model-cell {
+    top: 0;
+    left: 3.25rem;
+    z-index: 5;
+}
+.ranking-table tbody tr:hover .rank,
+.ranking-table tbody tr:hover .model-cell {
+    background: #2a1844 !important;
 }
 .ranking-table .model-cell strong,
-.ranking-table .model-cell span {
-    display: block;
+.ranking-table .model-cell span { display: block; }
+.ranking-table .model-cell strong {
+    color: var(--pruna-text-primary) !important;
+    font-weight: 600 !important;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 .ranking-table .model-cell span {
     margin-top: 3px;
-    color: #9333ea;
+    color: var(--pruna-text-muted) !important;
     font-size: 12px;
 }
-.ranking-table .metric-score {
-    color: #4c1d95;
+.ranking-table .text-cell,
+.prose .ranking-table .text-cell {
+    color: var(--pruna-text-muted) !important;
+    font-weight: 500 !important;
+    white-space: nowrap;
+}
+.ranking-table .metric-score,
+.prose .ranking-table .metric-score {
+    color: var(--pruna-text-primary) !important;
     font-variant-numeric: tabular-nums;
-    font-weight: 700;
+    font-weight: 600 !important;
+    text-align: right;
+    white-space: nowrap;
 }
+.ranking-table th.metric-score { text-align: right; }
 .ranking-table .empty-state {
-    color: #9333ea;
+    color: var(--pruna-text-muted);
     padding: 32px;
     text-align: center;
 }
-@media (prefers-color-scheme: dark) {
-    .leaderboard-summary > div,
-    .ranking-table-scroll {
-        border-color: rgba(221, 214, 254, 0.45);
-    }
-    .leaderboard-summary span,
-    .results-heading,
-    .ranking-table th,
-    .ranking-table .model-cell span,
-    .ranking-table .empty-state {
-        color: #ddd6fe;
-    }
-    .leaderboard-summary strong,
-    .ranking-table table,
-    .ranking-table .rank,
-    .ranking-table .metric-score {
-        color: #f5f3ff;
-    }
-    .ranking-table td {
-        border-bottom-color: rgba(221, 214, 254, 0.2);
-    }
-}
-.dark .leaderboard-summary > div,
-.dark .ranking-table-scroll {
-    border-color: rgba(221, 214, 254, 0.45);
-}
-.dark .leaderboard-summary span,
-.dark .results-heading,
-.dark .ranking-table th,
-.dark .ranking-table .model-cell span,
-.dark .ranking-table .empty-state {
-    color: #ddd6fe;
-}
-.dark .leaderboard-summary strong,
-.dark .ranking-table table,
-.dark .ranking-table .rank,
-.dark .ranking-table .metric-score {
-    color: #f5f3ff;
-}
-.compare-samples-help {
-    color: #6b21a8;
-    margin-bottom: 8px;
-}
+
+.compare-samples-help { color: var(--pruna-text-body); margin-bottom: 8px; }
 .compare-prompt-block {
     margin: 0 0 22px;
     padding: 14px 16px;
-    border: 1px solid #c4b5fd;
-    border-radius: 12px;
-    background: rgba(139, 92, 246, 0.10);
+    background: color-mix(in oklab, var(--pruna-bg-card) 82%, black 18%) !important;
 }
 .compare-prompt-meta {
     display: flex;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 8px;
-    color: #7e22ce;
+    color: var(--pruna-text-muted);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.04em;
@@ -431,20 +855,15 @@ custom_css = """
 }
 .compare-prompt-text {
     margin: 0 0 14px;
-    color: #3b0764;
+    color: var(--pruna-text-body);
     font-size: 15px;
     line-height: 1.45;
 }
-.compare-row {
-    display: grid;
-    gap: 12px;
-}
-.compare-cell {
-    min-width: 0;
-}
+.compare-row { display: grid; gap: 12px; }
+.compare-cell { min-width: 0; }
 .compare-model-label {
     margin-bottom: 6px;
-    color: #5b21b6;
+    color: var(--pruna-lavender);
     font-size: 13px;
     font-weight: 700;
     word-break: break-word;
@@ -454,57 +873,269 @@ custom_css = """
     width: 100%;
     aspect-ratio: 1 / 1;
     object-fit: cover;
-    border-radius: 10px;
-    border: 1px solid #ddd6fe;
-    background: #f5f3ff;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--pruna-bg-elevated);
 }
 .compare-empty {
     padding: 18px;
-    border: 1px dashed #c4b5fd;
-    border-radius: 10px;
-    color: #6b21a8;
+    border: 1px dashed color-mix(in oklab, var(--pruna-border) 60%, transparent);
+    border-radius: 12px;
+    color: var(--pruna-text-muted);
     text-align: center;
 }
-.dark .compare-samples-help,
-.dark .compare-prompt-meta,
-.dark .compare-model-label,
-.dark .compare-empty {
-    color: #e9d5ff;
+
+@media (max-width: 700px) {
+    .leaderboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
-.dark .compare-prompt-block {
-    border-color: #6d28d9;
-    background: rgba(76, 29, 149, 0.35);
+
+/*
+  Type scale (playground-like):
+  product title > page h1 > section h2/h3 > meta labels > body
+  Uppercase lavender is reserved for meta labels only — not section titles.
+*/
+.app-header-copy h1 {
+    margin: 0;
+    font-size: clamp(1.9rem, 3vw, 2.4rem) !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.035em;
+    line-height: 1.1;
+    color: #ffffff !important;
 }
-.dark .compare-prompt-text {
-    color: #f5f3ff;
+.app-header-copy p {
+    margin: 6px 0 0;
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.95rem !important;
+    line-height: 1.45;
+    font-weight: 400;
 }
-.dark .compare-cell img {
-    border-color: #6d28d9;
-    background: #2e1065;
+
+.gradio-container h1,
+.markdown h1, .md h1, .prose h1 {
+    margin: 0 0 0.65rem !important;
+    padding: 0 !important;
+    color: #ffffff !important;
+    font-family: var(--pruna-font) !important;
+    font-size: 1.5rem !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.03em !important;
+    line-height: 1.2 !important;
+    text-transform: none !important;
+}
+.gradio-container h2,
+.markdown h2, .md h2, .prose h2 {
+    margin: 1.75rem 0 0.75rem !important;
+    padding: 0 !important;
+    color: #ffffff !important;
+    font-family: var(--pruna-font) !important;
+    font-size: 1.25rem !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.02em !important;
+    line-height: 1.3 !important;
+    text-transform: none !important;
+}
+.gradio-container h3,
+.markdown h3, .md h3, .prose h3 {
+    margin: 1.35rem 0 0.5rem !important;
+    padding: 0 !important;
+    color: #f4f4f5 !important;
+    font-family: var(--pruna-font) !important;
+    font-size: 1.05rem !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.015em !important;
+    line-height: 1.35 !important;
+    text-transform: none !important;
+}
+.gradio-container h4,
+.markdown h4, .md h4, .prose h4 {
+    margin: 1rem 0 0.4rem !important;
+    padding: 0 !important;
+    color: var(--pruna-text-body) !important;
+    font-family: var(--pruna-font) !important;
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.01em !important;
+    line-height: 1.35 !important;
+    text-transform: none !important;
 }
-.dark .ranking-table td {
-    border-bottom-color: rgba(221, 214, 254, 0.2);
+
+/* Brand header wins over generic h1 rules */
+.app-header .app-header-copy h1 {
+    font-size: clamp(1.9rem, 3vw, 2.4rem) !important;
+    margin: 0 !important;
 }
-@media (max-width: 700px) {
-    .leaderboard-summary {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
+
+.markdown p, .md p, .prose p,
+.gradio-container .markdown p {
+    margin: 0 0 0.8rem !important;
+    color: var(--pruna-text-body) !important;
+    font-size: 0.95rem !important;
+    font-weight: 400 !important;
+    line-height: 1.55 !important;
+}
+.markdown li, .md li, .prose li {
+    color: var(--pruna-text-body) !important;
+    font-size: 0.95rem;
+    line-height: 1.5;
 }
-h1, h2 {
-    margin: 0;
-    padding-top: 0;
+.markdown strong, .md strong, .prose strong {
+    color: #ffffff !important;
+    font-weight: 600 !important;
+}
+
+/* Card / list titles sit under section headings */
+.home-snap-title,
+.benchmark-card-title {
+    margin: 0 0 6px !important;
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.01em;
+    line-height: 1.3;
+    color: #e4e4e7 !important;
+}
+.home-snap-blurb,
+.benchmark-card-blurb {
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.875rem !important;
+    font-weight: 400 !important;
+}
+
+/* Meta labels only — not used for real headings */
+.home-callouts span,
+.home-top-label {
+    color: var(--pruna-text-muted) !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.06em !important;
+    text-transform: uppercase !important;
+}
+.home-callouts strong {
+    color: #ffffff !important;
+    font-size: 1.15rem !important;
+    font-weight: 600 !important;
+}
+.home-callouts em {
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.85rem !important;
+}
+
+label, .block-label span {
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+}
+a { color: var(--pruna-link); }
+
+/* Gradio form chrome → playground */
+button.primary, .gr-button-primary,
+button.primary:hover, .primary-button {
+    background: var(--pruna-accent) !important;
+    border: 1px solid color-mix(in oklab, var(--pruna-accent) 72%, transparent) !important;
+    color: #fff !important;
+    border-radius: 8px !important;
+    box-shadow: inset 0 1px #fff3 !important;
+    font-weight: 600 !important;
+}
+.block, .gr-group, .form, .panel {
+    border-color: var(--pruna-border) !important;
+    background: transparent !important;
+}
+input, textarea, select, .wrap .secondary-wrap {
+    background: var(--pruna-bg-card) !important;
+    border-color: var(--pruna-border) !important;
+    color: var(--pruna-text-primary) !important;
+    border-radius: 8px !important;
+}
+footer, .footer { display: none !important; }
+
+/* Search label lives in a Gradio BlockTitle span with its own font-weight */
+.leaderboard-search span[data-testid="block-info"],
+.leaderboard-search label > span {
+    color: #ffffff !important;
+    font-size: 0.95rem !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.015em !important;
+}
+.leaderboard-search input {
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+}
+.leaderboard-search input::placeholder {
+    color: #d4d4d4 !important;
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    opacity: 1 !important;
 }
 """
 
-theme = gr.Theme.from_hub("Werli/Purple-Crimson-Gradio-Theme").set(
-    body_background_fill="#c4b5fd",
-    body_background_fill_dark="#120B1B",
-    body_text_color="#3b0764",
-    body_text_color_dark="#ffffff",
-    block_background_fill="#ede9fe",
-    block_background_fill_dark="#2e1065",
+theme = gr.themes.Base(
+    primary_hue=gr.themes.Color(
+        c50="#faf5ff",
+        c100="#f3e8ff",
+        c200="#e9d5ff",
+        c300="#d8b4fe",
+        c400="#c084fc",
+        c500="#9334e9",
+        c600="#9334e9",
+        c700="#7e22ce",
+        c800="#6b21a8",
+        c900="#3b0764",
+        c950="#120b1b",
+    ),
+    secondary_hue="zinc",
+    neutral_hue="zinc",
+    font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
+    font_mono=[gr.themes.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace"],
+).set(
+    body_background_fill="#120b1b",
+    body_background_fill_dark="#120b1b",
+    body_text_color="#fafafa",
+    body_text_color_dark="#fafafa",
+    body_text_color_subdued="#a3a3a3",
+    body_text_color_subdued_dark="#a3a3a3",
+    background_fill_primary="#120b1b",
+    background_fill_primary_dark="#120b1b",
+    background_fill_secondary="#171021",
+    background_fill_secondary_dark="#171021",
+    block_background_fill="#1d1429",
+    block_background_fill_dark="#1d1429",
+    block_border_color="#4a3962bf",
+    block_border_color_dark="#4a3962bf",
+    block_label_text_color="#a3a3a3",
+    block_label_text_color_dark="#a3a3a3",
+    block_title_text_color="#fafafa",
+    block_title_text_color_dark="#fafafa",
+    border_color_primary="#4a3962bf",
+    border_color_primary_dark="#4a3962bf",
+    button_primary_background_fill="#9334e9",
+    button_primary_background_fill_dark="#9334e9",
+    button_primary_background_fill_hover="#8f35ff",
+    button_primary_background_fill_hover_dark="#8f35ff",
+    button_primary_text_color="#ffffff",
+    button_primary_text_color_dark="#ffffff",
+    button_secondary_background_fill="#ffffff05",
+    button_secondary_background_fill_dark="#ffffff05",
+    button_secondary_background_fill_hover="rgba(147, 52, 233, 0.10)",
+    button_secondary_background_fill_hover_dark="rgba(147, 52, 233, 0.10)",
+    button_secondary_text_color="#fafafa",
+    button_secondary_text_color_dark="#fafafa",
+    button_secondary_border_color="#d8b4fe26",
+    button_secondary_border_color_dark="#d8b4fe26",
+    input_background_fill="#171021",
+    input_background_fill_dark="#171021",
+    input_border_color="#4a3962bf",
+    input_border_color_dark="#4a3962bf",
+    input_placeholder_color="#a3a3a3",
+    input_placeholder_color_dark="#a3a3a3",
+    link_text_color="#bf8bff",
+    link_text_color_dark="#bf8bff",
+    link_text_color_hover="#d2a8ff",
+    link_text_color_hover_dark="#d2a8ff",
+    shadow_drop="none",
+    shadow_drop_lg="none",
 )
 
+
 space_root = Path(__file__).resolve().parent
 data_dir = space_root / "data"
 
@@ -842,6 +1473,9 @@ benchmarks = [
 
 
 custom_head = """
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
 <script>
 (() => {
   if (window.__inferbenchLeaderboardSortBound) return;
@@ -903,7 +1537,7 @@ with gr.Blocks(
     theme=theme, fill_width=True, css=custom_css, head=custom_head
 ) as demo:
     render_header()
-    with gr.Tabs():
+    with gr.Tabs(elem_classes="main-tabs"):
         with gr.TabItem("Home"):
             render_home(benchmarks)
         with gr.TabItem("Benchmarks") as benchmarks_tab:
@@ -918,4 +1552,7 @@ with gr.Blocks(
 
 
 if __name__ == "__main__":
-    demo.launch(ssr_mode=False)
+    demo.launch(
+        ssr_mode=False,
+        allowed_paths=[str(space_root)],
+    )

ui.py

@@ -1,10 +1,20 @@
 from html import escape
+from pathlib import Path
+import base64
 import random
 
 import gradio as gr
 import pandas as pd
 import plotly.graph_objects as go
 
+_MASCOT_PATH = Path(__file__).resolve().parent / "pruna-mascot.png"
+_MASCOT_DATA_URI = (
+    "data:image/png;base64,"
+    + base64.b64encode(_MASCOT_PATH.read_bytes()).decode("ascii")
+    if _MASCOT_PATH.exists()
+    else "https://playground.pruna.ai/logo.svg"
+)
+
 
 FILTER_COLUMNS = ["Platform", "Endpoint Owner", "Model", "Optimized"]
 MAX_COMPARE_MODELS = 4
@@ -163,14 +173,14 @@ ABOUT_DETAILS_CONTENT = """
 Built by [Pruna AI](https://www.pruna.ai/). Contributions and new evaluation runs welcome.
 """
 
-COMMUNITY_CONTENT = """
-<div class="community-footer">
+FOOTER_CONTENT = """
+<div class="page-footer">
   <h3>Join the Pruna AI community</h3>
   <div class="community-footer-links">
     <a rel="nofollow" href="https://x.com/PrunaAI" target="_blank">X / Twitter</a>
     <a rel="nofollow" href="https://github.com/PrunaAI/pruna" target="_blank">GitHub</a>
     <a rel="nofollow" href="https://www.linkedin.com/company/pruna-ai" target="_blank">LinkedIn</a>
-    <a rel="nofollow" href="https://discord.com/invite/rskEr4BZJx" target="_blank">Discord</a>
+    <a rel="nofollow" href="https://discord.gg/JFQmtFKCjd" target="_blank">Discord</a>
     <a rel="nofollow" href="https://www.reddit.com/r/PrunaAI/" target="_blank">Reddit</a>
     <a rel="nofollow" href="https://www.pruna.ai/" target="_blank">pruna.ai</a>
   </div>
@@ -191,11 +201,14 @@ CITATION_CONTENT = """
 
 def render_header():
     gr.HTML(
-        """
-        <div style="text-align: center;">
+        f"""
+        <header class="app-header">
+          <img class="app-header-logo" src="{_MASCOT_DATA_URI}" alt="" />
+          <div class="app-header-copy">
             <h1>InferBench</h1>
-            <h2>Compare text-to-image models on quality, speed, and price</h2>
-        </div>
+            <p>Compare text-to-image models on quality, speed, and price</p>
+          </div>
+        </header>
         """
     )
 
@@ -274,39 +287,52 @@ def render_home(benchmarks):
         ]
         gr.HTML(f'<div class="home-callouts">{"".join(callout_bits)}</div>')
 
-    gr.Markdown("### Benchmark snapshots")
-    with gr.Row(equal_height=True, elem_classes="benchmark-catalogue-row"):
-        for benchmark in benchmarks:
-            data = benchmark["data"]
-            score_column = benchmark.get("overall_column")
-            score_columns = benchmark.get("score_columns") or []
-            if not score_column or score_column not in data.columns:
-                score_column = score_columns[0] if score_columns else None
-            top = _top_models(data, score_column, n=3) if score_column else []
-            score_label = _display_label(score_column) if score_column else "Score"
-            rows_html = "".join(
-                f"<li><span class='home-rank'>{idx}</span>"
-                f"<span class='home-model'>{escape(model)}</span>"
-                f"<span class='home-score'>{_format_score(score)}</span></li>"
-                for idx, (model, score) in enumerate(top, start=1)
-            ) or "<li class='home-empty'>No scores yet.</li>"
-
-            with gr.Column(scale=1, min_width=280):
-                gr.HTML(
-                    f"""
-                    <div class="home-benchmark-card">
-                      <div class="home-benchmark-title">
-                        {escape(benchmark.get("emoji", "📊"))}
-                        {escape(benchmark["title"])}
-                      </div>
-                      <p class="home-benchmark-blurb">
-                        {escape(benchmark.get("card_description", ""))}
-                      </p>
-                      <div class="home-top-label">Top 3 by {escape(score_label)}</div>
-                      <ol class="home-top-list">{rows_html}</ol>
-                    </div>
-                    """
-                )
+    gr.Markdown("## Benchmark snapshots")
+    title_cells = []
+    blurb_cells = []
+    top_cells = []
+    for benchmark in benchmarks:
+        data = benchmark["data"]
+        score_column = benchmark.get("overall_column")
+        score_columns = benchmark.get("score_columns") or []
+        if not score_column or score_column not in data.columns:
+            score_column = score_columns[0] if score_columns else None
+        top = _top_models(data, score_column, n=3) if score_column else []
+        score_label = _display_label(score_column) if score_column else "Score"
+        rows_html = "".join(
+            f"<li><span class='home-rank'>{idx}</span>"
+            f"<span class='home-model'>{escape(model)}</span>"
+            f"<span class='home-score'>{_format_score(score)}</span></li>"
+            for idx, (model, score) in enumerate(top, start=1)
+        ) or "<li class='home-empty'>No scores yet.</li>"
+        title_cells.append(
+            "<td class='home-snap-cell'>"
+            "<div class='home-snap-title'>"
+            f"<span class='home-snap-emoji' aria-hidden='true'>{escape(benchmark.get('emoji', '📊'))}</span>"
+            f"<span>{escape(benchmark['title'])}</span>"
+            "</div></td>"
+        )
+        blurb_cells.append(
+            "<td class='home-snap-cell'>"
+            f"<p class='home-snap-blurb'>{escape(benchmark.get('card_description', ''))}</p>"
+            "</td>"
+        )
+        top_cells.append(
+            "<td class='home-snap-cell'>"
+            "<div class='home-snap-top'>"
+            f"<div class='home-top-label'>Top 3 by {escape(score_label)}</div>"
+            f"<ol class='home-top-list'>{rows_html}</ol>"
+            "</div></td>"
+        )
+    gr.HTML(
+        "<table class='home-snapshots-table' role='presentation'>"
+        f"<tr>{''.join(title_cells)}</tr>"
+        f"<tr>{''.join(blurb_cells)}</tr>"
+        f"<tr>{''.join(top_cells)}</tr>"
+        "</table>",
+        padding=False,
+        elem_classes="home-snapshots-host",
+    )
 
 
 def _format_leaderboard_cell(column, value):
@@ -353,6 +379,16 @@ def _leaderboard_sort_type(column):
     return "number"
 
 
+def _leaderboard_cell_class(column):
+    if column == "Rank":
+        return "rank"
+    if column == "Model":
+        return "model-cell"
+    if _leaderboard_sort_type(column) == "text":
+        return "text-cell"
+    return "metric-score"
+
+
 def _leaderboard_html(data, columns, score_columns, overall_column):
     leaderboard = _leaderboard_dataframe(
         data, columns, score_columns, overall_column
@@ -367,18 +403,19 @@ def _leaderboard_html(data, columns, score_columns, overall_column):
     header_cells = []
     for index, column in enumerate(leaderboard.columns):
         sort_type = _leaderboard_sort_type(column)
+        cell_class = _leaderboard_cell_class(column)
         header_cells.append(
-            f'<th class="sortable-col" data-col="{index}" data-type="{sort_type}" '
-            f'title="Sort by {escape(str(column))}">{escape(str(column))}</th>'
+            f'<th class="sortable-col {cell_class}" data-col="{index}" '
+            f'data-type="{sort_type}" title="Sort by {escape(str(column))}">'
+            f"{escape(str(column))}</th>"
         )
     body_rows = []
     for _, row in leaderboard.iterrows():
         cells = []
         for column in leaderboard.columns:
-            css = "rank" if column == "Rank" else "metric-score"
+            css = _leaderboard_cell_class(column)
             sort_value = escape(_leaderboard_sort_value(column, row[column]), quote=True)
             if column == "Model":
-                css = "model-cell"
                 cells.append(
                     f'<td class="{css}" data-sort-value="{sort_value}">'
                     f"<strong>{_format_leaderboard_cell(column, row[column])}</strong></td>"
@@ -422,8 +459,10 @@ def render_leaderboard(
     with gr.Row(elem_classes="leaderboard-controls"):
         search = gr.Textbox(
             label="Search models",
-            placeholder="Search by model or provider",
+            placeholder="Type a model or provider name…",
             scale=3,
+            max_lines=1,
+            elem_classes="leaderboard-search",
         )
         filter_inputs.append(search)
         platform = None
@@ -459,6 +498,7 @@ def render_leaderboard(
 
     ranking = gr.HTML(
         _leaderboard_html(data, columns, score_columns, overall_column),
+        padding=False,
         elem_classes="ranking-table-host",
     )
 
@@ -636,20 +676,38 @@ def render_benchmark_detail(benchmark):
         {benchmark["intro"]}
         """
     )
-    with gr.Tabs(elem_classes="subtabs", selected=0) as detail_tabs:
-        with gr.TabItem("Leaderboard"):
-            render_leaderboard(
-                benchmark["data"],
-                benchmark["columns"],
-                note=benchmark.get("note"),
-                score_columns=benchmark.get("score_columns"),
-                overall_column=benchmark.get("overall_column"),
-            )
-        with gr.TabItem("Graphs"):
-            render_benchmark_graphs(benchmark)
-        with gr.TabItem("Compare samples"):
-            render_compare_samples(benchmark)
-    return detail_tabs
+    view_menu = gr.Radio(
+        choices=["Leaderboard", "Graphs", "Compare samples"],
+        value="Leaderboard",
+        show_label=False,
+        container=False,
+        elem_classes="benchmark-view-menu",
+    )
+    with gr.Column(visible=True) as leaderboard_view:
+        render_leaderboard(
+            benchmark["data"],
+            benchmark["columns"],
+            note=benchmark.get("note"),
+            score_columns=benchmark.get("score_columns"),
+            overall_column=benchmark.get("overall_column"),
+        )
+    with gr.Column(visible=False) as graphs_view:
+        render_benchmark_graphs(benchmark)
+    with gr.Column(visible=False) as compare_view:
+        render_compare_samples(benchmark)
+
+    def switch_view(choice):
+        return (
+            gr.update(visible=choice == "Leaderboard"),
+            gr.update(visible=choice == "Graphs"),
+            gr.update(visible=choice == "Compare samples"),
+        )
+
+    view_menu.change(
+        switch_view,
+        inputs=view_menu,
+        outputs=[leaderboard_view, graphs_view, compare_view],
+    )
 
 
 def render_compare_samples(benchmark):
@@ -830,25 +888,41 @@ def render_benchmarks(benchmarks):
         for row in card_rows:
             with gr.Row(equal_height=True, elem_classes="benchmark-catalogue-row"):
                 for benchmark in row:
-                    with gr.Column(scale=1, min_width=280):
-                        with gr.Group(elem_classes="benchmark-card"):
-                            gr.Markdown(
-                                f"""
-                                ## {benchmark.get("emoji", "📊")} {benchmark["title"]}
-
-                                {benchmark["card_description"]}
-                                """
-                            )
-                            open_buttons.append(
-                                (
-                                    benchmark["id"],
-                                    gr.Button("View benchmark →", variant="primary"),
-                                )
+                    with gr.Column(
+                        scale=1,
+                        min_width=280,
+                        elem_classes="benchmark-card-col",
+                    ):
+                        gr.HTML(
+                            f"""
+                            <div class="benchmark-card-body">
+                              <div class="benchmark-card-title">
+                                {escape(benchmark.get("emoji", "📊"))}
+                                {escape(benchmark["title"])}
+                              </div>
+                              <p class="benchmark-card-blurb">
+                                {escape(benchmark.get("card_description", ""))}
+                              </p>
+                            </div>
+                            """
+                        )
+                        open_buttons.append(
+                            (
+                                benchmark["id"],
+                                gr.Button(
+                                    "View benchmark →",
+                                    variant="primary",
+                                    elem_classes="benchmark-open-btn",
+                                ),
                             )
+                        )
 
     for benchmark in benchmarks:
         with gr.Column(visible=False) as detail:
-            back_button = gr.Button("← All benchmarks", size="sm")
+            back_button = gr.Button(
+                "← All benchmarks",
+                elem_classes="benchmark-back-btn",
+            )
             render_benchmark_detail(benchmark)
             detail_entries.append((benchmark["id"], detail, back_button))
 
@@ -938,8 +1012,8 @@ def _build_pareto_figure(
                 hovertemplate=hover,
                 marker={
                     "size": 9,
-                    "color": "#c4b5fd",
-                    "opacity": 0.75,
+                    "color": "#d8b4fe",
+                    "opacity": 0.8,
                     "line": {"width": 0},
                 },
             )
@@ -953,11 +1027,11 @@ def _build_pareto_figure(
                 name="On frontier",
                 text=frontier["Model"],
                 hovertemplate=hover,
-                line={"color": "#7c3aed", "width": 2.5},
+                line={"color": "#69a45c", "width": 2.5},
                 marker={
                     "size": 12,
-                    "color": "#db2777",
-                    "line": {"width": 1.5, "color": "#7c3aed"},
+                    "color": "#69a45c",
+                    "line": {"width": 1.5, "color": "#86c077"},
                 },
             )
         )
@@ -977,30 +1051,30 @@ def _build_pareto_figure(
             "xanchor": "center",
             "x": 0.5,
             "bgcolor": "rgba(0,0,0,0)",
-            "font": {"color": "#e9d5ff", "size": 12},
+            "font": {"color": "#d4d4d4", "size": 12},
         },
-        # Dark-theme plot: soft purple panel + light text (readable, not a white flash).
-        plot_bgcolor="#1e1b4b",
-        paper_bgcolor="#17153b",
-        font={"color": "#e9d5ff", "size": 13},
+        # Match Pruna playground surfaces (#120b1b / #1d1429).
+        plot_bgcolor="#1d1429",
+        paper_bgcolor="#171021",
+        font={"color": "#d4d4d4", "size": 13},
     )
-    axis_font = {"color": "#f3e8ff", "size": 13}
-    tick_font = {"color": "#ddd6fe", "size": 12}
+    axis_font = {"color": "#fafafa", "size": 13}
+    tick_font = {"color": "#a3a3a3", "size": 12}
     fig.update_xaxes(
         showgrid=True,
-        gridcolor="rgba(167, 139, 250, 0.28)",
+        gridcolor="rgba(74, 57, 98, 0.55)",
         zeroline=False,
         title_font=axis_font,
         tickfont=tick_font,
-        color="#e9d5ff",
+        color="#d4d4d4",
     )
     fig.update_yaxes(
         showgrid=True,
-        gridcolor="rgba(167, 139, 250, 0.28)",
+        gridcolor="rgba(74, 57, 98, 0.55)",
         zeroline=False,
         title_font=axis_font,
         tickfont=tick_font,
-        color="#e9d5ff",
+        color="#d4d4d4",
     )
     return fig
 
@@ -1079,10 +1153,11 @@ def render_benchmark_graphs(benchmark):
     if price_figures or time_figures:
         gr.Markdown(
             "### Pareto frontiers\n\n"
-            "<span style='color:#4c1d95;font-size:0.95rem;'>"
-            "Pink = on the frontier (lower cost or time at the same or better score). "
-            "Light purple = below the frontier."
-            "</span>"
+            "<span style='color:#a3a3a3;font-size:0.95rem;'>"
+            "Green = on the frontier (lower cost or time at the same or better score). "
+            "Lavender = below the frontier."
+            "</span><br/>"
+            "<strong style='color:#ffffff;font-size:1rem;'>Hover a point to see which model it is.</strong>"
         )
         with gr.Row(equal_height=False):
             with gr.Column(scale=1, min_width=320):
@@ -1118,6 +1193,10 @@ def render_about():
 
 
 def render_footer():
-    gr.HTML(COMMUNITY_CONTENT)
-    with gr.Accordion("Citation", open=False):
+    gr.HTML(FOOTER_CONTENT, padding=False, elem_classes="page-footer-host")
+    with gr.Accordion(
+        "Citation",
+        open=False,
+        elem_classes="citation-accordion",
+    ):
         gr.Markdown(CITATION_CONTENT)