Sync content.py from kosmonautical/openhands-index-paul

content.py

@@ -17,16 +17,13 @@ def create_gradio_anchor_id(text: str, validation) -> str:
 TITLE = """<h1 align="left" id="space-title">OpenHands Index</h1>"""
 
 INTRO_PARAGRAPH = """
+<h1 class="intro-page-title">The OpenHands Index</h1>
 <p>
-    The <strong>OpenHands Index</strong> is a comprehensive benchmark for evaluating AI coding agents across real-world software engineering tasks. As agents become more capable, we need ways to measure their performance across diverse challenges, from fixing bugs to building applications.
+    This is a comprehensive benchmark for evaluating AI coding agents across real-world software engineering tasks. As agents become more capable, we need ways to measure their performance across diverse challenges, from fixing bugs to building applications.
 </p>
-
-
 <p>
-    The OpenHands Index assesses models across five categories: <strong>Issue Resolution</strong> (fixing bugs), <strong>Greenfield</strong> (building new apps), <strong>Frontend</strong> (UI development), <strong>Testing</strong> (test generation), and <strong>Information Gathering</strong>. All models are currently evaluated using the <a href="https://github.com/OpenHands/software-agent-sdk">OpenHands Software Agent SDK</a>. This provides a single view of both <strong>performance</strong> and <strong>cost efficiency</strong>, enabling fair comparisons between agents.
+    The index assesses models across five categories: <strong>Issue Resolution</strong> (fixing bugs), <strong>Greenfield</strong> (building new apps), <strong>Frontend</strong> (UI development), <strong>Testing</strong> (test generation), and <strong>Information Gathering</strong>. All models are currently evaluated using the <a href="https://github.com/OpenHands/software-agent-sdk">OpenHands Software Agent SDK</a>. This provides a single view of both <strong>performance</strong> and <strong>cost efficiency</strong>, enabling fair comparisons between agents.
 </p>
-
-
 <p>
     For methodology details, see the <a href="/about" class="intro-link">About</a> page.
 </p>
@@ -235,45 +232,234 @@ def hf_uri_to_web_url(uri: str) -> str:
 
 
 css = """
-/* CSS Color Variables aligned with OpenHands brand (openhands-ui/tokens.css) */
+/* OpenHands-Design tokens (OpenHands-Design/index.html, DESIGN.md) */
 :root {
-    /* Primary - Yellow */
-    --color-primary-accent: #FFE165;
-    --color-primary-light: #FFF3C0;
-    --color-primary-dark: #BBA54A;
-    
-    /* Secondary - Green */
-    --color-secondary-accent: #BCFF8C;
-    --color-secondary-dark: #577641;
-    
-    /* Neutral - Grey scale */
-    --color-neutral-50: #F7F8FB;
-    --color-neutral-100: #EBEDF3;
-    --color-neutral-200: #D4D8E7;
-    --color-neutral-300: #B1B9D3;
-    --color-neutral-700: #2F3137;
-    --color-neutral-800: #222328;
-    --color-neutral-900: #18191C;
-    --color-neutral-950: #0D0D0F;
-    
-    /* Semantic colors */
-    --color-primary-link: #2F3137;
-    --color-primary-link-dark: #B1B9D3;
-    --color-background-light: #F7F8FB;
-    --color-background-dark: #18191C;
-    --color-text-dark: #0D0D0F;
-    --color-text-light: #F7F8FB;
-    --color-button-hover: #222328;
-    
-    /* Danger/Error - Red */
-    --color-danger: #FF684E;
+  --oh-bg: hsl(0 0% 5%);
+  --oh-card: hsl(0 0% 7%);
+  --oh-secondary: hsl(0 0% 8%);
+  --oh-muted: hsl(0 0% 12%);
+  /* Light mode: 1px strokes / dividers — same grey as top nav bar (#e4e4e7 zinc-200) */
+  --oh-border: #e4e4e7;
+  /* Slightly stronger on interactive hover (zinc-300) */
+  --oh-border-hover: #d4d4d8;
+  --oh-muted-hover: hsl(0 0% 18%);
+  --oh-fg: hsl(0 0% 98%);
+  --oh-fg-muted: hsl(0 0% 55%);
+  --oh-primary: hsl(0 0% 100%);
+  --oh-primary-fg: hsl(0 0% 0%);
+  --oh-success: #22c55e;
+  --oh-success-fg: #86efac;
+  --oh-warning: #f59e0b;
+  --oh-info: #3b82f6;
+  --oh-destructive: #dc2626;
+  --oh-ring: #cccccc;
+  --oh-shadow-card: 0 1px 2px 0 hsl(0 0% 0% / 0.3);
+  --oh-font-sans: 'Inter', system-ui, sans-serif;
+  --oh-font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  /* DESIGN.md §5: spacing (4px scale) — index.html / section rhythm */
+  --oh-pad-x-page: 24px;
+  /* DESIGN.md: container max 1400px — page column + #page-content-wrapper */
+  --oh-content-max: 87.5rem;
+  /* DESIGN.md §4: dropdown item hover (light / dark) */
+  --oh-form-hover-light: #f4f4f5;
+  --oh-form-active-dark: hsl(0 0% 12% / 0.6);
+  --oh-pad-y-section: 4rem;              /* 64px — .section in index.html */
+  --oh-gap-prose-paragraph: 1rem;         /* 16px — gap-4 */
+  --oh-gap-prose-tight: 0.5rem;           /* 8px — gap-2 */
+  --oh-prose-size: 0.875rem;              /* 14px — text-sm, primary body */
+  --oh-prose-leading: 1.5rem;            /* 24px — leading-6 w/ text-sm */
+  /* DESIGN.md: inline links use --info; focus ring = --oh-ring */
+  --oh-link-visited: hsl(217 60% 48%);
+  --oh-link-hover: hsl(217 85% 62%);
+  /* Legacy var names (charts, tables) — mapped to design surfaces */
+  --color-primary-accent: #e8e8e5;
+  --color-primary-light: #f5f5f4;
+  --color-primary-dark: #a1a1aa;
+  --color-secondary-accent: #22c55e;
+  --color-secondary-dark: #16a34a;
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f4f4f4;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-900: #171717;
+  --color-neutral-950: #0d0d0d;
+  --color-primary-link: #404040;
+  --color-primary-link-dark: #a3a3a3;
+  --color-background-light: #fafafa;
+  --color-background-dark: #0d0d0d;
+  --color-text-dark: #0d0d0d;
+  --color-text-light: #fafafa;
+  --color-button-hover: #404040;
+  --color-danger: #dc2626;
+}
+
+/* Dark theme: near-black strokes (DESIGN.md --border / #242424) */
+html.dark,
+body.dark,
+html:has([class*="gradio-container-"].dark),
+.gradio-container.dark,
+[class*="gradio-container-"].dark {
+  --oh-border: hsl(0 0% 14%);
+  --oh-border-hover: hsl(0 0% 24%);
+}
+
+body, .gradio-container {
+  font-family: var(--oh-font-sans) !important;
+  -webkit-font-smoothing: antialiased;
+}
+code, kbd, pre, .cell-wrap.svelte-v1pjjd {
+  font-family: var(--oh-font-mono) !important;
+}
+
+/* Markdown `---` → <hr>. Gradio preflight uses color:inherit on hr, which tracks body text, not the border line. */
+/* Section divider: 1px solid var(--oh-border) — light #e4e4e7 (top nav), dark #242424 */
+gradio-app hr,
+.gradio-container hr,
+#about-page-content-wrapper hr,
+#page-content-wrapper hr,
+.prose hr,
+div[class*="markdown"] hr,
+.divider-line hr,
+[class~="divider-line"] hr {
+    box-sizing: border-box;
+    display: block;
+    height: 0 !important;
+    margin: 0.75rem 0 1.5rem 0;
+    padding: 0 !important;
+    border: 0 !important;
+    border-top: 1px solid var(--oh-border) !important;
+    background: transparent !important;
+    background-color: transparent !important;
+    /* Some UAs use `color` for the default <hr> border; lock to the border token (not --body-text-color) */
+    color: var(--oh-border) !important;
+    opacity: 1 !important;
 }
 
-/* This makes space for the huggingface header bar which must shown on HF spaces. */
-/* FIXME Media queries don't seem to survive rendering. */
-/* @media (min-width: 768px) { ... } */
+/* No top padding on gradio-app (control_page_title is a prop on this element) */
 gradio-app {
-    padding-top: 65px;
+    padding-top: 0;
+    overflow: visible !important;
+    display: block;
+}
+/* In-flow strip so the fixed <nav> does not sit on top of the first line of main content */
+gradio-app::before {
+    content: "" !important;
+    display: block !important;
+    width: 100% !important;
+    height: 56px !important;
+    flex-shrink: 0 !important;
+    pointer-events: none !important;
+}
+html {
+    scroll-padding-top: 56px;
+    min-height: 100%;
+    /* Full-viewport canvas; match body/gradio so gutter + Gradio block fills never show a wrong tone (About’s lighter DOM hides this) */
+    background-color: var(--color-background-light, #fafafa);
+}
+html.dark,
+html:has([class*="gradio-container-"].dark) {
+    background-color: var(--color-background-dark, #0d0d0d);
+}
+/* Main column: cap width to match DESIGN.md; nav stays full-bleed (sibling, not inside .main) */
+gradio-app .main,
+gradio-app .main.fillable {
+    max-width: var(--oh-content-max) !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+}
+/*
+ * OpenHands-Design §4: Dropdown — menu z-index, min-w, border bg-popover, shadow-md, p-1
+ * + menu item: text-sm, rounded-md, px-2 py-1.5, data-[highlighted]:bg-muted/60
+ * Gradio uses ul.options / li.item; active row uses bg-gray-100 / dark:bg-gray-600 — override to tokens.
+ */
+gradio-app ul.options {
+    border: 1px solid var(--border-color-primary) !important;
+    border-radius: 0.25rem !important;
+    padding: 0.25rem !important;
+    background: var(--background-fill-primary) !important;
+    box-shadow: var(--shadow-drop-lg) !important;
+    scrollbar-width: thin;
+    scrollbar-color: hsl(0 0% 55% / 0.45) transparent;
+}
+gradio-app ul.options li.item {
+    font-size: 0.875rem !important;
+    line-height: 1.25rem;
+    border-radius: 0.25rem;
+    padding: 0.375rem 0.5rem !important;
+    margin: 0 0.125rem;
+    transition: color 0.2s ease, background-color 0.2s ease;
+}
+/* Light: hover / keyboard highlight — neutral chip */
+gradio-app ul.options li.item:hover,
+gradio-app ul.options li.item.active {
+    background-color: var(--oh-form-hover-light) !important;
+}
+/* Dark: canonical hover:bg-muted/60 (DESIGN.md §2) */
+html.dark gradio-app ul.options li.item:hover,
+html.dark gradio-app ul.options li.item.active,
+body.dark gradio-app ul.options li.item:hover,
+body.dark gradio-app ul.options li.item.active,
+html:has([class*="gradio-container-"].dark) gradio-app ul.options li.item:hover,
+html:has([class*="gradio-container-"].dark) gradio-app ul.options li.item.active,
+.gradio-container.dark gradio-app ul.options li.item:hover,
+.gradio-container.dark gradio-app ul.options li.item.active,
+[class*="gradio-container-"].dark gradio-app ul.options li.item:hover,
+[class*="gradio-container-"].dark gradio-app ul.options li.item.active {
+    background-color: var(--oh-form-active-dark) !important;
+    color: var(--body-text-color) !important;
+}
+/* Touch target: min h-10 (40px) for dropdown / text field wrap (DESIGN.md §8) */
+gradio-app .container > .wrap > .wrap-inner {
+    min-height: 2.5rem;
+    box-sizing: border-box;
+    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+/* Leaderboard filter column: form stacks checkboxes with no gap (Gradio form uses --form-gap-width) */
+gradio-app .column.oh-leaderboard-filter-col .form {
+    gap: 0 !important;
+}
+/* Gradio root: overflow: hidden; — keep visible; sticky still fails if scroll is on an inner .main, so nav uses position: fixed */
+body > [class*="gradio-container-"],
+body > div.gradio-container,
+body > [class^="gradio-container"] {
+    overflow: visible !important;
+}
+/* Multipage top <nav> — fixed + opaque background + single bottom edge (see .nav-holder: border removed) */
+gradio-app nav.svelte-ti537g {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 100% !important;
+    z-index: 200 !important;
+    min-height: 56px !important;
+    height: 56px !important;
+    max-height: 56px !important;
+    box-sizing: border-box !important;
+    display: flex !important;
+    align-items: center !important;
+    flex-wrap: nowrap !important;
+    /* Default = light top bar (Gradio / :root use dark design tokens, so we don’t use --oh-bg here) */
+    background: #fafafa !important;
+    background-color: #fafafa !important;
+    border-bottom: 1px solid #e4e4e7 !important;
+    box-shadow: none !important;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+/* Dark theme: restore near-black bar (html/body, or any [class*=gradio-container-] with .dark) */
+html.dark gradio-app nav.svelte-ti537g,
+body.dark gradio-app nav.svelte-ti537g,
+html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g,
+.gradio-container.dark gradio-app nav.svelte-ti537g,
+[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g {
+    background: var(--oh-bg) !important;
+    background-color: var(--oh-bg) !important;
+    border-bottom: 1px solid var(--oh-border) !important;
 }
 
 /* Global Styles */
@@ -281,42 +467,117 @@ h2 {
     overflow: hidden;
 }
 
-/* Global link color styles */
-.dark a {
-    color: var(--color-primary-link-dark);
-}
-.dark a:hover {
-    color: #dddddd;
-}
-.dark a:visited {
-    color: #bbbbbb;
+/* In-content links (DESIGN.md — semantic info for links; top nav is outside #page-content-wrapper) */
+#page-content-wrapper a[href],
+#about-page-content-wrapper a[href],
+#about-content a[href],
+#category-intro a[href],
+#intro-paragraph a[href],
+#intro-category-paragraph a[href],
+.prose a[href],
+table.gr-table a[href] {
+    color: var(--oh-info) !important;
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+#page-content-wrapper a[href]:hover,
+#about-page-content-wrapper a[href]:hover,
+#about-content a[href]:hover,
+#category-intro a[href]:hover,
+#intro-paragraph a[href]:hover,
+#intro-category-paragraph a[href]:hover,
+.prose a[href]:hover,
+table.gr-table a[href]:hover {
+    color: var(--oh-link-hover) !important;
+}
+#page-content-wrapper a[href]:visited,
+#about-page-content-wrapper a[href]:visited,
+#about-content a[href]:visited,
+#category-intro a[href]:visited,
+#intro-paragraph a[href]:visited,
+#intro-category-paragraph a[href]:visited,
+.prose a[href]:visited,
+table.gr-table a[href]:visited {
+    color: var(--oh-link-visited) !important;
+}
+#page-content-wrapper a[href]:focus-visible,
+#about-page-content-wrapper a[href]:focus-visible,
+#about-content a[href]:focus-visible,
+#category-intro a[href]:focus-visible,
+#intro-paragraph a[href]:focus-visible,
+#intro-category-paragraph a[href]:focus-visible,
+.prose a[href]:focus-visible,
+table.gr-table a[href]:focus-visible {
+    outline: 2px solid var(--oh-ring);
+    outline-offset: 2px;
+    border-radius: 2px;
 }
 
 #intro-paragraph {
-    font-size: 18px;
-    max-width: 90%;
-    padding-left: 35px;
-    margin-top: 20px;
+    font-size: var(--oh-prose-size);
+    max-width: min(100%, 52rem);
+    padding-left: 0;
+    padding-right: 0;
+    margin-top: 0;
+    margin-bottom: var(--oh-gap-prose-paragraph);
+}
+/* Theme-aware: Gradio’s --body-text-color (matches light/dark theme); prose overrides need same specificity */
+#intro-paragraph h1.intro-page-title,
+#intro-paragraph .prose h1.intro-page-title {
+    font-size: clamp(2rem, 2.5rem + 1.2vw, 2.75rem) !important;
+    font-weight: 600 !important;
+    line-height: 1.1 !important;
+    letter-spacing: -0.03em !important;
+    margin: 0 0 1.25rem 0 !important;
+    color: var(--body-text-color, var(--color-neutral-950)) !important;
+    text-align: left;
+}
+html.dark #intro-paragraph h1.intro-page-title,
+html.dark #intro-paragraph .prose h1.intro-page-title,
+body.dark #intro-paragraph h1.intro-page-title,
+body.dark #intro-paragraph .prose h1.intro-page-title,
+.gradio-container.dark #intro-paragraph h1.intro-page-title,
+.gradio-container.dark #intro-paragraph .prose h1.intro-page-title,
+[class*="gradio-container-"].dark #intro-paragraph h1.intro-page-title,
+[class*="gradio-container-"].dark #intro-paragraph .prose h1.intro-page-title {
+    color: var(--body-text-color, var(--oh-fg)) !important;
+}
+#intro-paragraph .html-container,
+#intro-paragraph .prose {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    margin-left: 0 !important;
 }
 
 #intro-paragraph p,
 #intro-paragraph li {
-    font-size: 16px; 
-    line-height: 1.8; 
+    font-size: var(--oh-prose-size);
+    line-height: var(--oh-prose-leading);
+}
+#intro-paragraph p,
+#intro-paragraph .prose p {
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+#intro-paragraph p:last-child {
+    margin-bottom: 0;
 }
 
-/* Links in intro paragraph */
+/* DESIGN.md: Label pattern — same link token, medium weight for explicit intro-link */
 .intro-link {
-    color: var(--color-primary-link);
-    text-decoration: underline;
+    color: var(--oh-info) !important;
+    text-decoration: none;
+    font-weight: 500;
 }
-.dark .intro-link {
-    color: var(--color-primary-link-dark);
+.intro-link:hover {
+    color: var(--oh-link-hover) !important;
 }
 
 #intro-paragraph ul {
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin: var(--oh-gap-prose-paragraph) 0;
+    padding-left: 1.25rem;
+}
+#intro-paragraph ul li + li {
+    margin-top: 0.35em;
 }
 
 #diagram-image {
@@ -329,40 +590,82 @@ h2 {
     object-fit: cover; 
 }
 #intro-category-paragraph {
-    font-size: 18px;
-    max-width: 90%;
-    margin-top: 20px;
+    font-size: var(--oh-prose-size);
+    max-width: min(100%, 52rem);
+    margin-top: 1.5rem;
+    margin-bottom: var(--oh-gap-prose-paragraph);
 }
 
 #intro-category-paragraph p,
 #intro-category-paragraph li {
-    font-size: 16px; 
-    line-height: 1.8; 
+    font-size: var(--oh-prose-size);
+    line-height: var(--oh-prose-leading);
+}
+#intro-category-paragraph p {
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+#intro-category-paragraph p:last-child {
+    margin-bottom: 0;
 }
 
 #intro-category-paragraph ul {
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin: var(--oh-gap-prose-paragraph) 0;
+    padding-left: 1.25rem;
+}
+#intro-category-paragraph ul li + li {
+    margin-top: 0.35em;
 }
 
 #about-content {
-    font-size: 18px;
-    max-width: 60%;
-    padding-left: 25px;
+    font-size: var(--oh-prose-size);
+    line-height: var(--oh-prose-leading);
+    max-width: min(100%, 42rem);
+    padding-left: 0;
+    margin-bottom: var(--oh-pad-y-section);
+}
+#about-content p {
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+#about-content p:last-child {
+    margin-bottom: 0;
 }
 #category-intro {
-    font-size: 18px;
-    max-width: 60%;
+    font-size: var(--oh-prose-size);
+    line-height: var(--oh-prose-leading);
+    max-width: min(100%, 42rem);
+    margin-bottom: var(--oh-gap-prose-paragraph);
+}
+#category-intro p {
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+#category-intro p:last-child {
+    margin-bottom: 0;
 }
 #logo-image { 
     margin: 0;
-    margin-bottom: 30px; 
+    margin-bottom: 2rem; 
     justify-content: flex-start;        
-    max-width: 250px;       
+    max-width: 250px;           
     height: auto;           
 }
-#page-content-wrapper{
-    padding-left: 25px;
+/* index.html hero/section: comfortable row gap for intro + diagram */
+#intro-row {
+    gap: 1.5rem;
+    align-items: flex-start;
+    width: 100%;
+}
+/* DESIGN.md: container max 1400px, horizontal padding 24px (index .section) */
+#page-content-wrapper {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: min(100%, var(--oh-content-max));
+    margin-left: auto;
+    margin-right: auto;
+    /* Match home: gradio-app::before (56px nav) + intro-paragraph’s former margin-top */
+    padding: 1.5rem var(--oh-pad-x-page) 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem; /* gap-6 between major blocks */
 }
 .table-component{
     height: auto !important;
@@ -383,7 +686,7 @@ table.svelte-1e98i6s td {
     vertical-align: top !important;
 }
 table.gr-table {
-    font-size: 15px !important;
+    font-size: 14px !important;
 }
 .html-container {
     padding-top: 0 !important;
@@ -392,22 +695,152 @@ table.gr-table {
         overflow: visible !important;
 }
 #pareto-disclaimer {
-    color: var(--color-primary-accent) !important;
+    color: var(--oh-success) !important;
 }
 thead.svelte-1e98i6s th {
-    background: white !important;
+    background: var(--color-neutral-50) !important;
 }
 .dark thead.svelte-1e98i6s th {
-    background: var(--color-background-dark) !important;
+    background: var(--color-neutral-900) !important;
 }
 .cell-wrap.svelte-v1pjjd {
-    font-family: Arial, sans-serif;
-    }
+    font-family: var(--oh-font-mono) !important;
+}
+/* Gradio 5.30: top route row — right-align; left padding reserves zone for wordmark (app.py) */
+gradio-app .nav-holder > nav.svelte-ti537g,
+gradio-app .nav-holder nav.svelte-ti537g,
+gradio-app nav.svelte-ti537g {
+    margin: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    width: 100% !important;
+    max-width: none !important;
+    box-sizing: border-box !important;
+    justify-content: flex-end !important;
+    padding: 0 20px 0 164px !important;
+}
 nav.svelte-ti537g.svelte-ti537g {
-    justify-content: flex-start;
+    justify-content: flex-end !important;
+}
+/* First paint: default route chip text only — not .active (Gradio gives .active the block fill; we override in app.py last) */
+gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active) {
+    font-size: 13px !important;
+    font-weight: 400 !important;
+    line-height: 1.4 !important;
+    color: #71717a !important;
+    padding: 6px 12px !important;
+    border-radius: 6px !important;
+    white-space: nowrap !important;
+}
+html.dark gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active),
+body.dark gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active),
+html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active),
+.gradio-container.dark gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active),
+[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active) {
+    color: var(--oh-fg-muted) !important;
+}
+/* Dedupe & trim root link before/after .oh-top-nav (mirrors app.py) */
+gradio-app nav.svelte-ti537g a[href$="/"] {
+    display: none !important;
+}
+gradio-app .nav-holder nav a[href="/home"]:not(.oh-nav-link) {
+    display: none !important;
+}
+/* Gradio: .nav-holder had border-bottom in flow while <nav> is position:fixed — that border scrolled (moving line). No border/background on holder; edge lives on <nav> only. */
+gradio-app .nav-holder,
+.nav-holder.svelte-ti537g.svelte-ti537g {
+    padding: 0 !important;
+    border: none !important;
+    border-bottom: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    width: 100% !important;
+    max-width: none !important;
+    text-align: left !important;
+}
+/* Gradio 5.30: default nav has horizontal margin/padding; keep bar tight */
+nav.oh-top-nav.svelte-ti537g.svelte-ti537g {
+    margin: 0 !important;
+}
+/* .oh-top-nav is applied by oh_top_nav_script — Gradio 5.30+ has no .nav-holder */
+.oh-top-nav {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    z-index: 200 !important;
+    flex: 0 0 auto !important;
+    display: flex !important;
+    flex-direction: row !important;
+    flex-flow: row nowrap !important;
+    flex-wrap: nowrap !important;
+    align-items: center !important;
+    align-content: center !important;
+    justify-content: flex-end !important;
+    gap: 4px !important;
+    height: 56px !important;
+    min-height: 56px !important;
+    max-height: 56px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    padding: 0 20px 0 164px !important;
+    margin: 0 !important;
+    /* Opaque bar — default light; dark overrides follow */
+    background: #fafafa !important;
+    background-color: #fafafa !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    border-bottom: 1px solid #e4e4e7 !important;
+    box-shadow: none !important;
+    overflow: visible !important;
+    list-style: none !important;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+/* Gradio .fillable limits max-width at breakpoints; keep route bar edge-to-edge (nav can be .fillable.svelte-ti537g) */
+nav.oh-top-nav.fillable,
+.oh-top-nav.fillable,
+nav.fillable.oh-top-nav,
+nav.oh-top-nav.svelte-ti537g.fillable {
+    max-width: none !important;
+    width: 100% !important;
 }
-.nav-holder {
-    padding-left: 20px !important;
+/* Dark top bar: document and/or .dark on Gradio container (including :has when only container is .dark) */
+html.dark .oh-top-nav,
+body.dark .oh-top-nav,
+html:has([class*="gradio-container-"].dark) .oh-top-nav,
+.gradio-container.dark .oh-top-nav,
+[class*="gradio-container-"].dark .oh-top-nav {
+    background: var(--oh-bg) !important;
+    background-color: var(--oh-bg) !important;
+    border-bottom: 1px solid var(--oh-border) !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+}
+/* Active route chip visuals: see app.py final_css (appended after this file; must beat Gradio a.active.svelte-ti537g) */
+/* Avoid double line: nav border-bottom + first block border-top */
+.oh-top-nav + * {
+    border-top: none !important;
+    box-shadow: none !important;
+}
+.oh-top-nav::-webkit-scrollbar { display: none !important; }
+/* Gradio 5.30: every route <a> uses .svelte-ti537g; some (e.g. duplicate Home) lack .oh-nav-link — clear underline/visited */
+.oh-top-nav a.svelte-ti537g,
+.oh-top-nav a.svelte-ti537g:hover,
+.oh-top-nav a.svelte-ti537g:focus,
+.oh-top-nav a.svelte-ti537g:active,
+.oh-top-nav a.svelte-ti537g:visited,
+.oh-top-nav a.svelte-ti537g.active {
+    text-decoration: none !important;
+    text-decoration-line: none !important;
+}
+/* Gradio can set column layout on parents; keep links in one row */
+.oh-top-nav > a.oh-nav-link,
+.oh-top-nav a.oh-nav-link {
+    flex: 0 0 auto !important;
+    display: inline-flex !important;
+    align-items: center !important;
 }
 #legend-markdown span {
     margin-right: 15px !important; 
@@ -418,7 +851,7 @@ nav.svelte-ti537g.svelte-ti537g {
     position: relative !important;
 }
 .dark #leaderboard-accordion .label-wrap {
-    color: var(--color-primary-accent) !important; 
+    color: var(--oh-fg) !important;
 }
 .dark block.svelte-1svsvh2 {
     background: var(--color-background-dark) !important;
@@ -430,40 +863,48 @@ nav.svelte-ti537g.svelte-ti537g {
     display: flex !important;
     flex-wrap: wrap !important; 
     align-items: center !important; 
-    gap: 10px !important;
-}
-.dark .primary-link-button {
-    color: var(--color-primary-link-dark);
+    gap: 0.5rem !important; /* gap-2 */
 }
+.dark .primary-link-button,
 .primary-link-button {
     background: none;
     border: none;
     padding: 0;
     margin: 0;
     font-family: inherit;
-    font-size: 16px;
-    color: var(--color-primary-link);
+    font-size: var(--oh-prose-size);
+    font-weight: 500;
+    color: var(--oh-info);
     text-decoration: none;
     cursor: pointer;
     white-space: nowrap;
+    transition: color 0.2s ease;
 }
 .primary-link-button:hover {
-    text-decoration: underline;
+    color: var(--oh-link-hover);
+    text-decoration: none;
+}
+.primary-link-button:focus-visible {
+    color: var(--oh-link-hover);
+    text-decoration: none;
+    outline: 2px solid var(--oh-ring);
+    outline-offset: 2px;
+    border-radius: 2px;
 }
 .sub-nav-label {
-    font-weight: bold;
-    font-size: 16px;
+    font-weight: 600;
+    font-size: var(--oh-prose-size);
     display: flex;
     align-items: center;
 }
-.wrap-header-df th span{
+.wrap-header-df th span {
     white-space: normal !important;
     word-break: normal !important;
     overflow-wrap: break-word !important;
     line-height: 1.2 !important;
     vertical-align: top !important;
     font-size: 12px !important;
-    font-family: Arial, sans-serif;
+    font-family: var(--oh-font-sans) !important;
 }
 .wrap-header-df th {
     height: auto !important;
@@ -537,110 +978,149 @@ span.wrap[tabindex="0"][role="button"][data-editable="false"] {
 /* --- inside table tooltips --- */
 .native-tooltip-icon {
     cursor: help;
-    text-decoration: underline dotted 1px;
-}
-/* Main Nav bar styling */
-.nav-holder nav {
-    display: grid !important;
-    grid-template-columns: auto auto auto auto auto 1fr auto auto !important;
-    gap: 10px 20px !important; /* Vertical and horizontal spacing */
-    width: 100% !important;
-    align-items: center;
-}
-.nav-holder nav a[href*="about"] {
-    grid-row: 1 !important;
-    grid-column: 7 !important;
+    text-decoration: none;
 }
-.nav-holder nav a[href*="submit"] {
-    grid-row: 1 !important;
-    grid-column: 8 !important;
+/* Route chips: do not require .oh-nav-link (JS adds it async — without it, .dark a and Gradio nav rules used to break hover/active) */
+gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
+gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
+.oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active) {
+    font-family: var(--oh-font-sans) !important;
+    font-size: 13px !important;
+    font-weight: 400 !important;
+    line-height: 1.4 !important;
+    color: #71717a !important;
+    text-decoration: none !important;
+    padding: 6px 12px !important;
+    border-radius: 6px !important;
+    border: 1px solid transparent !important;
+    transition: color 0.2s, background-color 0.2s, border-color 0.2s !important;
     white-space: nowrap !important;
-}
-/* Hide the Alternative Agents page from the top-level nav for now. */
-.nav-holder nav a[href*="alternative-agents"] {
-    display: none !important;
-}
-
-/* Divider line between header and category nav */
-.nav-holder nav::after {
-    content: ''; /* Required for pseudo-elements to appear */
-    background-color: #C9C9C3;
-    height: 1px; 
-    grid-row: 2 !important;
-    grid-column: 1 / -1 !important;
-}
-
-/* Horizontal scrolling for navigation */
-.nav-holder nav {
-    overflow-x: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-}
-.nav-holder nav::-webkit-scrollbar {
-    display: none;
-}
-
-/* Category navigation buttons in row 3 */
-.nav-holder nav a[href*="literature-understanding"],
-.nav-holder nav a[href*="code-execution"],
-.nav-holder nav a[href*="data-analysis"],
-.nav-holder nav a[href*="discovery"] {
-    grid-row: 3 !important;
-    justify-self: center !important;
-    width: fit-content !important;
-    white-space: nowrap;
-    flex-shrink: 0;
-}
-
-.nav-holder nav a[href*="literature-understanding"] { grid-column: 1 !important; }
-.nav-holder nav a[href*="code-execution"] { grid-column: 2 !important; }
-.nav-holder nav a[href*="data-analysis"] { grid-column: 3 !important; }
-.nav-holder nav a[href*="discovery"] { grid-column: 4 !important; }
-
-/* Navigation hover styles */
-.nav-holder nav a[href*="about"]:hover,
-.nav-holder nav a[href*="submit"]:hover,
-.nav-holder nav a[href*="literature-understanding"]:hover,
-.nav-holder nav a[href*="code-execution"]:hover,
-.nav-holder nav a[href*="data-analysis"]:hover,
-.nav-holder nav a[href*="discovery"]:hover {
-    background-color: #FDF9F4;
-}
-
-.dark .nav-holder nav a[href*="about"]:hover,
-.dark .nav-holder nav a[href*="submit"]:hover,
-.dark .nav-holder nav a[href*="literature-understanding"]:hover,
-.dark .nav-holder nav a[href*="code-execution"]:hover,
-.dark .nav-holder nav a[href*="data-analysis"]:hover,
-.dark .nav-holder nav a[href*="discovery"]:hover {
-    background-color: #1C3A3C;
-}
-.benchmark-main-subtitle{
-    color: var(--color-primary-link);
+    box-shadow: none !important;
+    cursor: pointer !important;
+    pointer-events: auto !important;
+    position: relative !important;
+    z-index: 1 !important;
+}
+gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+.oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
+.oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible {
+    color: #fafafa !important;
+    background-color: #18181b !important;
+    border-color: transparent !important;
+}
+/* Dark: muted links on dark bar */
+html.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
+html.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
+html.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active),
+body.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
+body.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
+body.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active),
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
+html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
+html:has([class*="gradio-container-"].dark) .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active),
+.gradio-container.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
+.gradio-container.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
+.gradio-container.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active),
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
+[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
+[class*="gradio-container-"].dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active) {
+    color: var(--oh-fg-muted) !important;
+}
+html.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+html.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+html.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+html.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+html.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
+html.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible,
+body.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+body.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+body.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+body.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+body.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
+body.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible,
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+html:has([class*="gradio-container-"].dark) .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
+html:has([class*="gradio-container-"].dark) .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible,
+.gradio-container.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+.gradio-container.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+.gradio-container.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+.gradio-container.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+.gradio-container.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
+.gradio-container.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible,
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
+[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
+[class*="gradio-container-"].dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
+[class*="gradio-container-"].dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible {
+    color: #ffffff !important;
+    background-color: var(--oh-muted) !important;
+}
+/* Dark app shell (OpenHands-Design near-black) */
+body.dark, .gradio-container.dark {
+    --body-background-fill: #0d0d0d !important;
+    /* Must match body: #121212 vs #0d0d0d on nested Gradio blocks reads as a full-height left band on leaderboard/row layouts; About is unaffected visually */
+    --block-background-fill: #0d0d0d !important;
+}
+body.dark, .gradio-container.dark,
+.gradio-container.dark .contain,
+.gradio-container.dark .wrap,
+.gradio-container.dark .main,
+.gradio-container.dark {
+    background-color: #0d0d0d !important;
+    color: #fafafa !important;
+}
+.benchmark-main-subtitle {
+    color: var(--oh-fg-muted);
     overflow: hidden;
     padding-top: 120px;
+    font-size: var(--oh-prose-size);
+    font-weight: 500;
+    line-height: var(--oh-prose-leading);
 }
-.dark .benchmark-main-subtitle{
-    color: var(--color-primary-link-dark);
+.benchmark-title {
+    color: var(--color-text-dark);
+    margin-top: 2.5rem;
+    /* DESIGN.md: section heading — text-lg / font-semibold */
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: -0.02em;
 }
-.benchmark-title{
-    color: var(--color-primary-link);
-    margin-top: 50px;
-        font-size: 20px;
-}
-.dark .benchmark-title{
-    color: var(--color-primary-accent);
+.dark .benchmark-title {
+    color: var(--oh-fg);
 }
 .benchmark-description {
-    margin: 20px 0;
-    max-width: 800px;
+    margin: var(--oh-gap-prose-paragraph) 0 1.5rem;
+    max-width: 52rem;
+    font-size: var(--oh-prose-size);
+    line-height: var(--oh-prose-leading);
 }
-
-.dark #main-header h2 {
-    color: var(--color-primary-accent); 
+.benchmark-description p {
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+.benchmark-description p:last-child {
+    margin-bottom: 0;
 }
+
+/* DESIGN.md: page heading — text-2xl / font-semibold */
+.dark #main-header h2,
 #main-header h2 {
-    color: var(--color-primary-link);
+    color: #fafafa !important;
+    font-size: 1.5rem;
+    line-height: 1.2;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+.gradio-container:not(.dark) #main-header h2 {
+    color: #0d0d0d !important;
 }
 
 /* --- New HTML-Based Tooltip Styles --- */
@@ -726,18 +1206,66 @@ span.wrap[tabindex="0"][role="button"][data-editable="false"] {
     flex-wrap: wrap;
 }
 
-/* About Page CSS */
+/* About Page CSS — nested in #page-content-wrapper for same horizontal + top padding as Home */
 #about-page-content-wrapper {
     margin-left: auto;
     margin-right: auto;
-    max-width: 800px; 
-    padding: 0 24px;
+    max-width: 50rem; /* 800px — readable line length */
+    padding: 0;
     display: flex;
     flex-direction: column; 
-    gap: 40px; 
-    margin-top: 40px;
-    opacity: 85%; 
-    margin-bottom: 60px;
+    gap: 2.5rem; /* 40px — matches index .section-title margin rhythm */
+    margin-top: 0;
+    opacity: 0.85; 
+    margin-bottom: 3.75rem; /* 60px */
+    box-sizing: border-box;
+}
+
+/* Alternative Agents intro — align with Home / category hero width and heading scale */
+#alternative-agents-intro {
+    font-size: var(--oh-prose-size);
+    line-height: var(--oh-prose-leading);
+    max-width: min(100%, 52rem);
+}
+#alternative-agents-intro h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+    color: var(--body-text-color, var(--oh-fg)) !important;
+}
+#alternative-agents-intro p {
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+#alternative-agents-intro p:last-child {
+    margin-bottom: 0;
+}
+#about-page-content-wrapper h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+    margin: 0 0 0.75rem 0;
+    color: var(--body-text-color, var(--oh-fg)) !important;
+}
+#about-page-content-wrapper p,
+#about-page-content-wrapper li {
+    font-size: var(--oh-prose-size);
+    line-height: var(--oh-prose-leading);
+}
+#about-page-content-wrapper p {
+    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
+}
+#about-page-content-wrapper p:last-child {
+    margin-bottom: 0;
+}
+#about-page-content-wrapper .info-list {
+    margin: var(--oh-gap-prose-paragraph) 0;
+    padding-left: 1.25rem;
+}
+#about-page-content-wrapper .info-list li + li {
+    margin-top: 0.35em;
 }
 .link-buttons-container {
     display: flex;
@@ -804,13 +1332,13 @@ html {
     min-height: 572px;
     background-color: #fff;
     padding: 24px 32px;
-    border: 1px solid var(--color-neutral-300);
+    border: 1px solid var(--oh-border);
     border-radius: 4px;
 }
 
 .dark .plot-legend-container {
     background: rgba(247, 248, 251, 0.1);
-    border-color: var(--color-neutral-700);
+    border-color: var(--oh-border);
 }
 
 #plot-legend-logo {
@@ -872,6 +1400,38 @@ h3 .header-link-icon {
 .winners-by-category-container {
     margin: 20px 0;
     overflow-x: auto;
+    scrollbar-gutter: stable;
+    /* Horizontal scrollbar: thin thumb, no visible track (OpenHands-Design) */
+    scrollbar-width: thin;
+    scrollbar-color: hsl(0 0% 40% / 0.5) transparent;
+}
+html.dark .winners-by-category-container,
+body.dark .winners-by-category-container,
+.gradio-container.dark .winners-by-category-container {
+    scrollbar-color: hsl(0 0% 55% / 0.45) transparent;
+}
+.winners-by-category-container::-webkit-scrollbar {
+    height: 6px;
+}
+.winners-by-category-container::-webkit-scrollbar-track {
+    background: transparent;
+}
+.winners-by-category-container::-webkit-scrollbar-thumb {
+    background: hsl(0 0% 40% / 0.5);
+    border-radius: 9999px;
+}
+.winners-by-category-container::-webkit-scrollbar-thumb:hover {
+    background: hsl(0 0% 35% / 0.7);
+}
+html.dark .winners-by-category-container::-webkit-scrollbar-thumb,
+body.dark .winners-by-category-container::-webkit-scrollbar-thumb,
+.gradio-container.dark .winners-by-category-container::-webkit-scrollbar-thumb {
+    background: hsl(0 0% 55% / 0.5);
+}
+html.dark .winners-by-category-container::-webkit-scrollbar-thumb:hover,
+body.dark .winners-by-category-container::-webkit-scrollbar-thumb:hover,
+.gradio-container.dark .winners-by-category-container::-webkit-scrollbar-thumb:hover {
+    background: hsl(0 0% 60% / 0.65);
 }
 
 .winners-unified-table {
@@ -879,22 +1439,23 @@ h3 .header-link-icon {
     border-collapse: collapse;
     font-size: 13px;
     background: #fff;
-    border: 1px solid var(--color-neutral-300);
+    border: 1px solid var(--oh-border);
     border-radius: 12px;
     overflow: hidden;
 }
 
 .dark .winners-unified-table {
     background: rgba(247, 248, 251, 0.05);
-    border-color: var(--color-neutral-700);
+    border-color: var(--oh-border);
 }
 
+/* Category header bar: flat neutral grey */
 .winners-unified-table thead tr {
-    background: linear-gradient(to right, rgba(255, 225, 101, 0.15), rgba(220, 194, 87, 0.25));
+    background: hsl(0 0% 92%);
 }
 
 .dark .winners-unified-table thead tr {
-    background: linear-gradient(to right, rgba(255, 225, 101, 0.2), rgba(220, 194, 87, 0.3));
+    background: hsl(0 0% 12%);
 }
 
 .winners-unified-table .category-header {
@@ -903,15 +1464,15 @@ h3 .header-link-icon {
     font-weight: 700;
     font-size: 13px;
     color: var(--color-text-dark);
-    border-bottom: 2px solid var(--color-primary-accent) !important;
-    border-right: 2px solid #999 !important;
+    border-bottom: 1px solid var(--oh-border) !important;
+    border-right: 1px solid var(--oh-border) !important;
     white-space: nowrap;
 }
 
 .dark .winners-unified-table .category-header {
     color: #fff;
-    border-bottom-color: var(--color-primary-accent) !important;
-    border-right-color: var(--color-neutral-500) !important;
+    border-bottom-color: var(--oh-border) !important;
+    border-right-color: var(--oh-border) !important;
 }
 
 .winners-unified-table .category-header:last-child {
@@ -928,23 +1489,24 @@ h3 .header-link-icon {
 .winners-unified-table td {
     padding: 8px 6px;
     vertical-align: middle;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--oh-border);
 }
 
 .dark .winners-unified-table td {
-    border-bottom-color: #2a3a3a;
+    border-bottom-color: var(--oh-border);
 }
 
 .winners-unified-table tbody tr:last-child td {
     border-bottom: none;
 }
 
+/* Row hover: muted/60 style (DESIGN.md), not yellow */
 .winners-unified-table tbody tr:hover {
-    background: rgba(255, 225, 101, 0.1);
+    background: hsl(0 0% 0% / 0.04);
 }
 
 .dark .winners-unified-table tbody tr:hover {
-    background: rgba(255, 225, 101, 0.15);
+    background: hsl(0 0% 12% / 0.5);
 }
 
 .winners-unified-table .score-cell {
@@ -953,12 +1515,12 @@ h3 .header-link-icon {
     color: var(--color-primary-dark);
     padding-left: 12px;
     min-width: 50px;
-    border-right: 1px solid #eee;
+    border-right: 1px solid var(--oh-border);
 }
 
 .dark .winners-unified-table .score-cell {
     color: var(--color-primary-accent);
-    border-right-color: var(--color-neutral-700);
+    border-right-color: var(--oh-border);
 }
 
 .winners-unified-table .model-cell {
@@ -966,12 +1528,12 @@ h3 .header-link-icon {
     color: var(--color-text-dark);
     font-weight: 500;
     padding-right: 12px;
-    border-right: 2px solid #999;
+    border-right: 1px solid var(--oh-border);
 }
 
 .dark .winners-unified-table .model-cell {
     color: #fff;
-    border-right-color: var(--color-neutral-500);
+    border-right-color: var(--oh-border);
 }
 
 .winners-unified-table td:nth-last-child(1) {
@@ -1061,10 +1623,9 @@ h3 .header-link-icon {
         padding-right: 8px !important;
     }
     
-    /* Reduce padding on intro paragraph */
     #intro-paragraph {
-        padding-left: 8px !important;
-        padding-right: 8px !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
         max-width: 100% !important;
     }
     
@@ -1075,9 +1636,10 @@ h3 .header-link-icon {
         max-width: 100% !important;
     }
     
-    /* Reduce navigation holder padding */
-    .nav-holder {
-        padding-left: 8px !important;
+    /* Nav: keep left gutter for wordmark; tighten sides on small viewports */
+    .oh-top-nav,
+    gradio-app nav.svelte-ti537g {
+        padding-left: 116px !important;
         padding-right: 8px !important;
     }
     
@@ -1088,10 +1650,10 @@ h3 .header-link-icon {
         max-width: 100% !important;
     }
     
-    /* Reduce about page wrapper padding */
+    /* About is inside #page-content-wrapper — outer handles horizontal padding */
     #about-page-content-wrapper {
-        padding-left: 12px !important;
-        padding-right: 12px !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
     }
     
     /* Reduce gradio container padding */