custom_css = """

:root, html, body, .gradio-container, .dark, body.dark, html.dark {
    --body-background-fill: white !important;
    --background-fill-primary: white !important;
    --background-fill-secondary: #f9fafb !important;
    --body-text-color: #1f2937 !important;
    --body-text-color-subdued: #6b7280 !important;
    --block-background-fill: white !important;
    --block-border-color: #e5e7eb !important;
    --block-label-background-fill: #f3f4f6 !important;
    --block-label-text-color: #374151 !important;
    --block-title-text-color: #111827 !important;
    --input-background-fill: white !important;
    --input-border-color: #d1d5db !important;
    --table-even-background-fill: #f9fafb !important;
    --table-odd-background-fill: white !important;
    --table-row-focus: #e0f2fe !important;
    --table-border-color: #e5e7eb !important;
    --border-color-primary: #e5e7eb !important;
    --border-color-accent: #8CD0FF !important;
    --color-accent: #8CD0FF !important;
    --neutral-50: #f9fafb !important;
    --neutral-100: #f3f4f6 !important;
    --neutral-200: #e5e7eb !important;
    --neutral-300: #d1d5db !important;
    --neutral-400: #9ca3af !important;
    --neutral-500: #6b7280 !important;
    --neutral-600: #4b5563 !important;
    --neutral-700: #374151 !important;
    --neutral-800: #1f2937 !important;
    --neutral-900: #111827 !important;
    --neutral-950: #030712 !important;
}

html, body, .gradio-container {
    background: white !important;
    color: #1f2937 !important;
}

.dark .svelte-table, body.dark .svelte-table,
.dark [data-testid="dataframe"], body.dark [data-testid="dataframe"],
.table-wrap:not(.js-plotly-plot *), 
.dataframe:not(.js-plotly-plot *) {
    background: white !important;
    color: #1f2937 !important;
}

.gradio-container table:not(.js-plotly-plot table),
.dark .gradio-container table:not(.js-plotly-plot table) {
    background: white !important;
    color: #1f2937 !important;
}

.gradio-container th:not(.js-plotly-plot th),
.gradio-container td:not(.js-plotly-plot td),
.dark .gradio-container th:not(.js-plotly-plot th),
.dark .gradio-container td:not(.js-plotly-plot td) {
    background-color: inherit !important;
    color: #1f2937 !important;
    border-color: #e5e7eb !important;
}

.gradio-container thead:not(.js-plotly-plot thead),
.dark .gradio-container thead:not(.js-plotly-plot thead) {
    background: #f8fafc !important;
}

.gradio-container tbody tr:nth-child(even):not(.js-plotly-plot tr),
.dark .gradio-container tbody tr:nth-child(even):not(.js-plotly-plot tr) {
    background: #f9fafb !important;
}

.gradio-container tbody tr:nth-child(odd):not(.js-plotly-plot tr),
.dark .gradio-container tbody tr:nth-child(odd):not(.js-plotly-plot tr) {
    background: white !important;
}

@media (prefers-color-scheme: dark) {
    :root, html, body, .gradio-container {
        --body-background-fill: white !important;
        --background-fill-primary: white !important;
        --body-text-color: #1f2937 !important;
        background: white !important;
        color: #1f2937 !important;
    }
}

.js-plotly-plot, .js-plotly-plot *, 
.plotly, .plotly *,
.js-plotly-plot svg, .js-plotly-plot svg * {
    background: unset !important;
    background-color: unset !important;
}

.js-plotly-plot .plotly .main-svg,
.js-plotly-plot .plotly .bg {
    fill: white !important;
}

.gradio-container,
.gradio-container *,
body {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

b, strong,
.gradio-container b,
.gradio-container strong,
.prose b,
.prose strong,
.md b,
.md strong,
.markdown-code b,
.markdown-code strong,
[class*="markdown"] b,
[class*="markdown"] strong,
p b, p strong,
span b, span strong,
div b, div strong {
    font-weight: 600 !important;
}

#banner-image {
    width: 100%;
    margin-bottom: 1rem;
}

#banner-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

:root {
    --metric-table-bg: #ffffff;
    --metric-table-border: #d3d3d3;
    --metric-table-header-bg: #f8fafc;
    --metric-table-header-color: #0f172a;
    --metric-table-row-header-bg: #f2f5f9;
    --metric-table-caption: #666666;
    --metric-table-empty-color: #777777;
    --metric-table-row-highlight: #DDF1FF;
}

::selection {
    background-color: rgba(140, 208, 255, 0.4) !important;
    color: inherit !important;
}

::-moz-selection {
    background-color: rgba(140, 208, 255, 0.4) !important;
    color: inherit !important;
}

button.primary {
    background-color: #8CD0FF !important;
    border-color: #8CD0FF !important;
    color: #0f172a !important;
}

button.primary:hover {
    background-color: #6bc0f5 !important;
    border-color: #6bc0f5 !important;
    color: #0f172a !important;
}

.visually-hidden[aria-hidden="true"] button,
[aria-hidden="true"] .tab-container button,
.tab-container.visually-hidden[aria-hidden="true"] button,
div[aria-hidden="true"] button {
    pointer-events: none !important;
    visibility: hidden !important;
}

.markdown-text {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

#filter-customize-accordion .label-wrap span,
#filter-customize-accordion .label-wrap .open-button,
#filter-customize-accordion > div > button span {
    font-size: 15px !important;
    font-weight: 400 !important;
}

.explainer-text,
.explainer-text h3,
.explainer-text p {
    font-size: 15px !important;
    line-height: 1.5 !important;
}

#wer-leaderboard-table th:first-child,
#cer-leaderboard-table th:first-child,
#rtfx-leaderboard-table th:first-child {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 60px !important;
    font-weight: 400 !important;
}

#wer-leaderboard-table td:first-child,
#cer-leaderboard-table td:first-child,
#rtfx-leaderboard-table td:first-child {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 60px !important;
    font-weight: 400 !important;
    text-align: center;
}

#wer-leaderboard-table th:nth-child(2),
#cer-leaderboard-table th:nth-child(2),
#rtfx-leaderboard-table th:nth-child(2) {
    background-color: #EEF8FF !important;
}

#wer-leaderboard-table td:nth-child(2),
#cer-leaderboard-table td:nth-child(2),
#rtfx-leaderboard-table td:nth-child(2) {
    background-color: #EEF8FF !important;
}

body.dark #wer-leaderboard-table th:nth-child(2),
body.dark #cer-leaderboard-table th:nth-child(2),
body.dark #rtfx-leaderboard-table th:nth-child(2),
body.dark #wer-leaderboard-table td:nth-child(2),
body.dark #cer-leaderboard-table td:nth-child(2),
body.dark #rtfx-leaderboard-table td:nth-child(2),
[data-theme="dark"] #wer-leaderboard-table th:nth-child(2),
[data-theme="dark"] #cer-leaderboard-table th:nth-child(2),
[data-theme="dark"] #rtfx-leaderboard-table th:nth-child(2),
[data-theme="dark"] #wer-leaderboard-table td:nth-child(2),
[data-theme="dark"] #cer-leaderboard-table td:nth-child(2),
[data-theme="dark"] #rtfx-leaderboard-table td:nth-child(2) {
    background-color: rgba(140, 208, 255, 0.3) !important;
}

.cell-menu,
.context-menu,
[data-testid="dataframe"] .cell-menu,
[data-testid="dataframe"] .context-menu,
.table-wrap .cell-menu,
.table-wrap .context-menu,
.svelte-virtual-table-viewport .cell-menu,
.svelte-virtual-table-viewport .context-menu,
#wer-leaderboard-table .cell-menu,
#cer-leaderboard-table .cell-menu,
#rtfx-leaderboard-table .cell-menu,
#wer-leaderboard-table .context-menu,
#cer-leaderboard-table .context-menu,
#rtfx-leaderboard-table .context-menu {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.metric-note {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 8px !important;
    padding: 8px 12px !important;
    background-color: #f8f9fa !important;
    border-left: 3px solid #8CD0FF !important;
    border-radius: 4px !important;
}

.metric-note p,
.metric-note .prose p,
.metric-note .prose,
.metric-note > div,
.metric-note .markdown-code,
.metric-note .md {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

#models-to-add-text {
    font-size: 18px !important;
}

#citation-button span {
    font-size: 16px !important;
}

#citation-button textarea {
    font-size: 16px !important;
}

#citation-button > label > button {
    margin: 6px;
    transform: scale(1.3);
}

#leaderboard-table {
    margin-top: 15px
}

#leaderboard-table-lite {
    margin-top: 15px
}

#wer-leaderboard-table,
#cer-leaderboard-table,
#rtfx-leaderboard-table {
    margin-top: 15px;
}

#wer-leaderboard-table table,
#cer-leaderboard-table table,
#rtfx-leaderboard-table table {
    font-size: 14px;
}


#wer-leaderboard-table th,
#cer-leaderboard-table th,
#rtfx-leaderboard-table th {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 70px;
}

#wer-leaderboard-table th .col-resize-handle,
#cer-leaderboard-table th .col-resize-handle,
#rtfx-leaderboard-table th .col-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
}

#wer-leaderboard-table th .col-resize-handle:hover,
#cer-leaderboard-table th .col-resize-handle:hover,
#rtfx-leaderboard-table th .col-resize-handle:hover,
#wer-leaderboard-table th .col-resize-handle.resizing,
#cer-leaderboard-table th .col-resize-handle.resizing,
#rtfx-leaderboard-table th .col-resize-handle.resizing {
    background: #8CD0FF;
}

#wer-leaderboard-table td,
#cer-leaderboard-table td,
#rtfx-leaderboard-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#wer-leaderboard-table td[title],
#cer-leaderboard-table td[title],
#rtfx-leaderboard-table td[title],
#wer-leaderboard-table th[title],
#cer-leaderboard-table th[title],
#rtfx-leaderboard-table th[title] {
    cursor: help;
}

#wer-leaderboard-table th,
#cer-leaderboard-table th,
#rtfx-leaderboard-table th {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    font-weight: 600;
}

#wer-leaderboard-table th,
#wer-leaderboard-table th *,
#cer-leaderboard-table th,
#cer-leaderboard-table th *,
#rtfx-leaderboard-table th,
#rtfx-leaderboard-table th * {
    font-size: 15px !important;
}

#wer-leaderboard-table th:hover,
#cer-leaderboard-table th:hover,
#rtfx-leaderboard-table th:hover {
    background-color: transparent !important;
    text-decoration: underline;
}

#wer-leaderboard-table th.focus,
#cer-leaderboard-table th.focus,
#rtfx-leaderboard-table th.focus,
#wer-leaderboard-table th:focus,
#cer-leaderboard-table th:focus,
#rtfx-leaderboard-table th:focus,
#wer-leaderboard-table th.sorted,
#cer-leaderboard-table th.sorted,
#rtfx-leaderboard-table th.sorted {
    --ring-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
}

body.dark #wer-leaderboard-table th.focus,
body.dark #cer-leaderboard-table th.focus,
body.dark #rtfx-leaderboard-table th.focus,
body.dark #wer-leaderboard-table th:focus,
body.dark #cer-leaderboard-table th:focus,
body.dark #rtfx-leaderboard-table th:focus,
body.dark #wer-leaderboard-table th.sorted,
body.dark #cer-leaderboard-table th.sorted,
body.dark #rtfx-leaderboard-table th.sorted,
[data-theme="dark"] #wer-leaderboard-table th.focus,
[data-theme="dark"] #cer-leaderboard-table th.focus,
[data-theme="dark"] #rtfx-leaderboard-table th.focus,
[data-theme="dark"] #wer-leaderboard-table th:focus,
[data-theme="dark"] #cer-leaderboard-table th:focus,
[data-theme="dark"] #rtfx-leaderboard-table th:focus,
[data-theme="dark"] #wer-leaderboard-table th.sorted,
[data-theme="dark"] #cer-leaderboard-table th.sorted,
[data-theme="dark"] #rtfx-leaderboard-table th.sorted {
    --ring-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
}

#wer-leaderboard-table th .cell-wrap,
#cer-leaderboard-table th .cell-wrap,
#rtfx-leaderboard-table th .cell-wrap,
#wer-leaderboard-table th .header-button,
#cer-leaderboard-table th .header-button,
#rtfx-leaderboard-table th .header-button {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body.dark #wer-leaderboard-table th .cell-wrap,
body.dark #cer-leaderboard-table th .cell-wrap,
body.dark #rtfx-leaderboard-table th .cell-wrap,
body.dark #wer-leaderboard-table th .header-button,
body.dark #cer-leaderboard-table th .header-button,
body.dark #rtfx-leaderboard-table th .header-button,
[data-theme="dark"] #wer-leaderboard-table th .cell-wrap,
[data-theme="dark"] #cer-leaderboard-table th .cell-wrap,
[data-theme="dark"] #rtfx-leaderboard-table th .cell-wrap,
[data-theme="dark"] #wer-leaderboard-table th .header-button,
[data-theme="dark"] #cer-leaderboard-table th .header-button,
[data-theme="dark"] #rtfx-leaderboard-table th .header-button {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

#wer-leaderboard-table td:first-child,
#cer-leaderboard-table td:first-child,
#rtfx-leaderboard-table td:first-child {
    font-weight: 600;
    position: sticky;
    left: 0;
    background-color: var(--metric-table-row-header-bg);
    z-index: 1;
}

#wer-leaderboard-table td:nth-child(1),
#wer-leaderboard-table td:nth-child(2),
#cer-leaderboard-table td:nth-child(1),
#cer-leaderboard-table td:nth-child(2),
#rtfx-leaderboard-table td:nth-child(1),
#rtfx-leaderboard-table td:nth-child(2) {
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative;
}

.row-sort-btn {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.4;
    cursor: pointer;
    vertical-align: middle;
}

#wer-leaderboard-table td:nth-child(2):hover .row-sort-btn,
#cer-leaderboard-table td:nth-child(2):hover .row-sort-btn,
#rtfx-leaderboard-table td:nth-child(2):hover .row-sort-btn {
    opacity: 0.8;
}

#wer-leaderboard-table td:nth-child(1):hover,
#wer-leaderboard-table td:nth-child(2):hover,
#cer-leaderboard-table td:nth-child(1):hover,
#cer-leaderboard-table td:nth-child(2):hover,
#rtfx-leaderboard-table td:nth-child(1):hover,
#rtfx-leaderboard-table td:nth-child(2):hover {
    background-color: rgba(140, 208, 255, 0.2) !important;
    text-decoration: underline;
    color: #0066cc !important;
}

#search-bar-table-box > div:first-child {
    background: none;
    border: none;
}
 
#search-bar {
    padding: 0px;
}

#leaderboard-table td:nth-child(2),
#leaderboard-table th:nth-child(2) {
    max-width: 400px;
    overflow: auto;
    white-space: nowrap;
}

.tab-buttons button {
    font-size: 20px;
}

.tab-buttons button.selected,
.tabs button.selected,
button.tab-nav.selected,
[role="tab"][aria-selected="true"],
.tab-nav.selected {
    background-color: #DDF1FF !important;
    border-color: #8CD0FF !important;
    color: #0f172a !important;
}

.tab-buttons button:hover,
.tabs button:hover,
button.tab-nav:hover,
[role="tab"]:hover {
    background-color: #DDF1FF !important;
}

body.dark .tab-buttons button:hover,
body.dark .tabs button:hover,
body.dark button.tab-nav:hover,
body.dark [role="tab"]:hover,
[data-theme="dark"] .tab-buttons button:hover,
[data-theme="dark"] .tabs button:hover,
[data-theme="dark"] button.tab-nav:hover,
[data-theme="dark"] [role="tab"]:hover,
.dark .tab-buttons button:hover,
.dark .tabs button:hover,
.dark button.tab-nav:hover,
.dark [role="tab"]:hover {
    background-color: transparent !important;
    text-decoration: underline;
}

body.dark .tab-buttons button.selected,
body.dark .tabs button.selected,
body.dark button.tab-nav.selected,
body.dark [role="tab"][aria-selected="true"],
[data-theme="dark"] .tab-buttons button.selected,
[data-theme="dark"] .tabs button.selected,
[data-theme="dark"] button.tab-nav.selected,
[data-theme="dark"] [role="tab"][aria-selected="true"],
.dark .tab-buttons button.selected,
.dark .tabs button.selected,
.dark button.tab-nav.selected,
.dark [role="tab"][aria-selected="true"] {
    background-color: rgba(140, 208, 255, 0.2) !important;
    border-color: #8CD0FF !important;
    color: #e5e7eb !important;
}

.tab-buttons button,
.tabs button,
button.tab-nav,
[role="tab"] {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.tabs .tab-nav::after,
.tab-buttons button::after,
button.tab-nav::after,
[role="tab"]::after {
    background-color: #8CD0FF !important;
}

.tabs .tab-nav.selected::after,
.tab-buttons button.selected::after,
button.tab-nav.selected::after,
[role="tab"][aria-selected="true"]::after {
    background-color: #8CD0FF !important;
}

.table-wrap td.focus,
.table-wrap th.focus,
table td:focus,
table th:focus,
.dataframe td.selected,
.dataframe th.selected,
.svelte-table td.focus,
.svelte-table th.focus,
[data-testid="dataframe"] td.selected,
[data-testid="dataframe"] th.selected {
    outline-color: #8CD0FF !important;
    border-color: #8CD0FF !important;
    box-shadow: 0 0 0 2px #8CD0FF !important;
}

*:focus {
    outline-color: #8CD0FF !important;
}

input:focus,
textarea:focus,
select:focus,
button:focus {
    border-color: #8CD0FF !important;
    box-shadow: 0 0 0 2px rgba(140, 208, 255, 0.3) !important;
}

.gradio-container {
    --color-accent: #8CD0FF !important;
    --color-accent-soft: #DDF1FF !important;
    --checkbox-label-background-fill-selected: transparent !important;
    --checkbox-background-color-selected: #8CD0FF !important;
    --checkbox-border-color-selected: #8CD0FF !important;
    --slider-color: #8CD0FF !important;
    --primary-50: #DDF1FF !important;
    --primary-100: #c5e7ff !important;
    --primary-200: #aeddff !important;
    --primary-300: #8CD0FF !important;
    --primary-400: #6bc0f5 !important;
    --primary-500: #4ab0eb !important;
    --primary-600: #29a0e1 !important;
    --primary-700: #0890d7 !important;
}

body.dark .gradio-container,
[data-theme="dark"] .gradio-container {
    --color-accent: #8CD0FF !important;
    --color-accent-soft: #1e3a5f !important;
    --checkbox-label-background-fill-selected: transparent !important;
    --checkbox-background-color-selected: #8CD0FF !important;
    --checkbox-border-color-selected: #8CD0FF !important;
    --slider-color: #8CD0FF !important;
}

.progress-bar,
.eta-bar,
[class*="progress"],
[class*="loader"],
[class*="loading"],
.wrap.svelte-j1gjts,
.wrap.svelte-j1gjts .progress-bar {
    background-color: transparent !important;
}

body.dark .progress-bar,
body.dark .eta-bar,
body.dark [class*="progress"],
[data-theme="dark"] .progress-bar,
[data-theme="dark"] .eta-bar,
[data-theme="dark"] [class*="progress"],
.dark .progress-bar,
.dark .eta-bar,
.dark [class*="progress"] {
    background-color: transparent !important;
}

.label-wrap:hover,
button.label-wrap:hover {
    background-color: transparent !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

body.dark .label-wrap:hover,
body.dark button.label-wrap:hover,
[data-theme="dark"] .label-wrap:hover,
[data-theme="dark"] button.label-wrap:hover,
.dark .label-wrap:hover,
.dark button.label-wrap:hover {
    background-color: transparent !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.label-wrap::selection,
.label-wrap *::selection,
button.label-wrap::selection,
button.label-wrap *::selection {
    background-color: transparent !important;
}

body.dark .label-wrap::selection,
body.dark .label-wrap *::selection,
[data-theme="dark"] .label-wrap::selection,
[data-theme="dark"] .label-wrap *::selection,
.dark .label-wrap::selection,
.dark .label-wrap *::selection {
    background-color: transparent !important;
}

body.dark table th:hover,
body.dark [data-testid="dataframe"] th:hover,
body.dark .table-wrap th:hover,
body.dark .svelte-table th:hover,
[data-theme="dark"] table th:hover,
[data-theme="dark"] [data-testid="dataframe"] th:hover,
[data-theme="dark"] .table-wrap th:hover,
[data-theme="dark"] .svelte-table th:hover,
.dark table th:hover,
.dark [data-testid="dataframe"] th:hover,
.dark .table-wrap th:hover,
.dark .svelte-table th:hover {
    background-color: transparent !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

body.dark th,
body.dark thead th,
body.dark .header,
body.dark [class*="header"],
body.dark th[role="columnheader"],
[data-theme="dark"] th,
[data-theme="dark"] thead th,
[data-theme="dark"] .header,
[data-theme="dark"] [class*="header"],
[data-theme="dark"] th[role="columnheader"],
.dark th,
.dark thead th,
.dark .header,
.dark [class*="header"],
.dark th[role="columnheader"] {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
}

body.dark th:hover,
body.dark thead th:hover,
body.dark th[role="columnheader"]:hover,
[data-theme="dark"] th:hover,
[data-theme="dark"] thead th:hover,
[data-theme="dark"] th[role="columnheader"]:hover,
.dark th:hover,
.dark thead th:hover,
.dark th[role="columnheader"]:hover {
    background-color: transparent !important;
    text-decoration: underline;
}

th::selection,
th *::selection,
thead::selection,
thead *::selection {
    background-color: transparent !important;
}

body.dark th.focus,
body.dark thead th.focus,
body.dark .table-wrap th.focus,
body.dark [data-testid="dataframe"] th.focus,
[data-theme="dark"] th.focus,
[data-theme="dark"] thead th.focus,
[data-theme="dark"] .table-wrap th.focus,
[data-theme="dark"] [data-testid="dataframe"] th.focus,
.dark th.focus,
.dark thead th.focus,
.dark .table-wrap th.focus,
.dark [data-testid="dataframe"] th.focus {
    --ring-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body.dark th.selected,
body.dark thead th.selected,
body.dark th[aria-selected="true"],
[data-theme="dark"] th.selected,
[data-theme="dark"] thead th.selected,
[data-theme="dark"] th[aria-selected="true"],
.dark th.selected,
.dark thead th.selected,
.dark th[aria-selected="true"] {
    --ring-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
}

th.focus,
thead th.focus,
.table-wrap th.focus,
[data-testid="dataframe"] th.focus {
    --ring-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

th.selected,
thead th.selected,
th[aria-selected="true"] {
    --ring-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.sort-indicators,
.table-wrap .sort-indicators,
[data-testid="dataframe"] .sort-indicators,
th .sort-indicators {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sort-arrow,
.sort-indicators .sort-arrow,
th .sort-arrow {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--body-text-color) !important;
}

.sort-priority,
.sort-indicators .sort-priority,
th .sort-priority {
    display: flex !important;
    visibility: visible !important;
}

th.sorted,
th[aria-sort="ascending"],
th[aria-sort="descending"] {
    background-color: transparent !important;
}

body.dark th.sorted,
body.dark th[aria-sort="ascending"],
body.dark th[aria-sort="descending"],
[data-theme="dark"] th.sorted,
[data-theme="dark"] th[aria-sort="ascending"],
[data-theme="dark"] th[aria-sort="descending"],
.dark th.sorted,
.dark th[aria-sort="ascending"],
.dark th[aria-sort="descending"] {
    background-color: transparent !important;
}

th .cell-wrap,
thead th .cell-wrap,
.table-wrap th .cell-wrap,
[data-testid="dataframe"] th .cell-wrap {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

th .header-button,
thead th .header-button,
th .cell-wrap .header-button,
th button.header-button {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body.dark th .cell-wrap,
body.dark th .header-button,
body.dark th .cell-wrap .header-button,
[data-theme="dark"] th .cell-wrap,
[data-theme="dark"] th .header-button,
[data-theme="dark"] th .cell-wrap .header-button,
.dark th .cell-wrap,
.dark th .header-button,
.dark th .cell-wrap .header-button {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

th .header-button:focus,
th .header-button:active,
th .header-button:hover,
th .cell-wrap:focus,
th .cell-wrap:active {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body.dark th .header-button:focus,
body.dark th .header-button:active,
body.dark th .header-button:hover,
body.dark th .cell-wrap:focus,
body.dark th .cell-wrap:active,
[data-theme="dark"] th .header-button:focus,
[data-theme="dark"] th .header-button:active,
[data-theme="dark"] th .header-button:hover,
[data-theme="dark"] th .cell-wrap:focus,
[data-theme="dark"] th .cell-wrap:active,
.dark th .header-button:focus,
.dark th .header-button:active,
.dark th .header-button:hover,
.dark th .cell-wrap:focus,
.dark th .cell-wrap:active {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body.dark table th:focus,
body.dark table td:focus,
body.dark [data-testid="dataframe"] th:focus,
body.dark [data-testid="dataframe"] td:focus,
[data-theme="dark"] table th:focus,
[data-theme="dark"] table td:focus,
[data-theme="dark"] [data-testid="dataframe"] th:focus,
[data-theme="dark"] [data-testid="dataframe"] td:focus,
.dark table th:focus,
.dark table td:focus,
.dark [data-testid="dataframe"] th:focus,
.dark [data-testid="dataframe"] td:focus {
    background-color: rgba(140, 208, 255, 0.15) !important;
}

table th::selection,
table th *::selection,
[data-testid="dataframe"] th::selection,
[data-testid="dataframe"] th *::selection {
    background-color: transparent !important;
}

body.dark ::selection,
[data-theme="dark"] ::selection,
.dark ::selection {
    background-color: rgba(140, 208, 255, 0.4) !important;
    color: inherit !important;
}

input[type="radio"]:checked {
    accent-color: #8CD0FF !important;
}

.gradio-radio label.selected,
[data-testid*="radio-label"].selected {
    background-color: transparent !important;
    border-color: transparent !important;
}

input[type="checkbox"]:checked {
    accent-color: #8CD0FF !important;
}

#scale-logo {
    border-style: none !important;
    box-shadow: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
}

#scale-logo .download {
    display: none;
}
#filter_type{
    border: 0;
    padding-left: 0;
    padding-top: 0;
}
#filter_type label {
    display: flex;
}
#filter_type label > span{
    margin-top: var(--spacing-lg);
    margin-right: 0.5em;
}
#filter_type label > .wrap{
    width: 103px;
}
#filter_type label > .wrap .wrap-inner{  
    padding: 2px;
}
#filter_type label > .wrap .wrap-inner input{
    width: 1px
}
#filter-columns-type{
    border:0;
    padding:0.5;
}
#filter-columns-size{
    border:0;
    padding:0.5;
}
#box-filter > .form{
    border: 0
}

.metric-tabs button {
    font-size: 18px;
}

.metric-table-wrapper {
    overflow-x: auto;
    margin-top: 1rem;
}

.markdown-text table th:nth-child(4),
.markdown-text table td:nth-child(4),
.prose table th:nth-child(4),
.prose table td:nth-child(4) {
    min-width: 80px !important;
    white-space: nowrap;
}

.markdown-text table th:nth-child(5),
.markdown-text table td:nth-child(5),
.prose table th:nth-child(5),
.prose table td:nth-child(5) {
    min-width: 100px !important;
    white-space: nowrap;
}

.chart-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.js-plotly-plot, .plotly {
    width: 100% !important;
}

.js-plotly-plot .plotly .main-svg {
    width: 100% !important;
}

@media (max-width: 768px) {
    .js-plotly-plot .plotly .legend {
        font-size: 9px !important;
    }
    
    .js-plotly-plot .plotly .gtitle {
        font-size: 14px !important;
    }
    
    .js-plotly-plot .plotly .xtitle,
    .js-plotly-plot .plotly .ytitle {
        font-size: 11px !important;
    }
}

.chart-card {
    background: var(--metric-table-bg, #ffffff);
    border: 1px solid var(--metric-table-border, #d3d3d3);
    border-radius: 8px;
    padding: 1rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.chart-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.chart-card h4 {
    margin: 0 0 0.5rem 0;
    color: var(--metric-table-header-color, #0f172a);
    font-size: 1.1rem;
}

.chart-card p {
    margin: 0;
    color: var(--metric-table-caption, #666666);
    font-size: 0.9rem;
    line-height: 1.4;
}

.metric-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 600px;
    text-align: center;
    font-size: 16px;
    background-color: var(--metric-table-bg);
}

.metric-table caption {
    caption-side: bottom;
    padding-top: 0.5rem;
    color: var(--metric-table-caption);
    font-size: 0.9rem;
}

.metric-table th,
.metric-table td {
    border: 1px solid var(--metric-table-border);
    padding: 0.5rem;
}

.metric-table thead th {
    background-color: var(--metric-table-header-bg);
    color: var(--metric-table-header-color);
    position: sticky;
    top: 0;
    z-index: 1;
}

.metric-table tbody th {
    text-align: left;
    background-color: var(--metric-table-row-header-bg);
    color: var(--metric-table-header-color);
    position: sticky;
    left: 0;
    z-index: 2;
    cursor: pointer;
}

.metric-table tbody th:hover {
    text-decoration: underline;
}

.metric-table tbody tr.row-highlighted {
    background-color: var(--metric-table-row-highlight) !important;
}

.metric-table tbody tr.row-highlighted td,
.metric-table tbody tr.row-highlighted th {
    background-color: var(--metric-table-row-highlight) !important;
}

#wer-leaderboard-table tbody tr.leaderboard-row-highlighted,
#cer-leaderboard-table tbody tr.leaderboard-row-highlighted,
#rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted {
    background-color: var(--metric-table-row-highlight, rgba(140, 208, 255, 0.3)) !important;
}

#wer-leaderboard-table tbody tr.leaderboard-row-highlighted td,
#cer-leaderboard-table tbody tr.leaderboard-row-highlighted td,
#rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted td {
    background-color: var(--metric-table-row-highlight, rgba(140, 208, 255, 0.3)) !important;
}

body.dark #wer-leaderboard-table tbody tr.leaderboard-row-highlighted,
body.dark #cer-leaderboard-table tbody tr.leaderboard-row-highlighted,
body.dark #rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted,
[data-theme="dark"] #wer-leaderboard-table tbody tr.leaderboard-row-highlighted,
[data-theme="dark"] #cer-leaderboard-table tbody tr.leaderboard-row-highlighted,
[data-theme="dark"] #rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted {
    background-color: rgba(140, 208, 255, 0.25) !important;
}

body.dark #wer-leaderboard-table tbody tr.leaderboard-row-highlighted td,
body.dark #cer-leaderboard-table tbody tr.leaderboard-row-highlighted td,
body.dark #rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted td,
[data-theme="dark"] #wer-leaderboard-table tbody tr.leaderboard-row-highlighted td,
[data-theme="dark"] #cer-leaderboard-table tbody tr.leaderboard-row-highlighted td,
[data-theme="dark"] #rtfx-leaderboard-table tbody tr.leaderboard-row-highlighted td {
    background-color: rgba(140, 208, 255, 0.25) !important;
}

#wer-leaderboard-table tbody td,
#cer-leaderboard-table tbody td,
#rtfx-leaderboard-table tbody td {
    cursor: pointer;
}

.metric-table-empty {
    padding: 1rem;
    text-align: center;
    color: var(--metric-table-empty-color);
}

.paza-footer {
    margin-top: 2rem;
    padding: 1.5rem 1rem;
    border-top: 1px solid var(--metric-table-border, #d3d3d3);
    text-align: center;
    font-size: 0.9rem;
    color: var(--metric-table-caption, #666666);
}

.paza-footer a {
    color: #0078d4;
    text-decoration: none;
    transition: color 0.2s ease;
}

.paza-footer a:hover {
    color: #106ebe;
    text-decoration: underline;
}

body.dark .paza-footer a,
[data-theme="dark"] .paza-footer a,
body[class*="dark"] .paza-footer a,
[data-color-mode="dark"] .paza-footer a {
    color: #60a5fa;
}

body.dark .paza-footer a:hover,
[data-theme="dark"] .paza-footer a:hover,
body[class*="dark"] .paza-footer a:hover,
[data-color-mode="dark"] .paza-footer a:hover {
    color: #93c5fd;
}

.paza-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem 1.5rem;
}

.paza-footer-links .copyright {
    font-size: 0.85rem;
}
"""

get_window_url_params = """
    function(url_params) {
        const params = new URLSearchParams(window.location.search);
        url_params = Object.fromEntries(params);
        return url_params;
    }
    """
    
fix_aria_hidden_focus_js = """
<script>
(function() {
    const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    const isHFDark = document.documentElement.classList.contains('dark') || 
                     document.body?.classList.contains('dark') ||
                     document.documentElement.getAttribute('data-theme') === 'dark' ||
                     document.documentElement.getAttribute('data-color-mode') === 'dark';
    
    if (isDarkMode || isHFDark) {
        document.documentElement.classList.add('dark');
        document.documentElement.setAttribute('data-theme', 'dark');
        if (document.body) {
            document.body.classList.add('dark');
        } else {
            document.addEventListener('DOMContentLoaded', function() {
                document.body.classList.add('dark');
            });
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.attributeName === 'class' || 
                mutation.attributeName === 'data-theme' ||
                mutation.attributeName === 'data-color-mode') {
                const html = document.documentElement;
                const body = document.body;
                if (html.classList.contains('dark') || 
                    html.getAttribute('data-theme') === 'dark' ||
                    html.getAttribute('data-color-mode') === 'dark') {
                    if (body && !body.classList.contains('dark')) {
                        body.classList.add('dark');
                    }
                }
            }
        });
    });
    
    observer.observe(document.documentElement, { 
        attributes: true, 
        attributeFilter: ['class', 'data-theme', 'data-color-mode'] 
    });
})();
</script>
<script>
(function() {
    function fixAriaHiddenFocus() {
        const hiddenContainers = document.querySelectorAll('[aria-hidden="true"]');
        hiddenContainers.forEach(container => {
            const focusableElements = container.querySelectorAll(
                    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
                );
            focusableElements.forEach(el => {
                el.setAttribute('tabindex', '-1');
                el.setAttribute('aria-disabled', 'true');
                el.setAttribute('data-a11y-fixed', 'true');
                if (el.tagName === 'BUTTON') {
                    el.disabled = true;
                }
            });
        });
    }

    fixAriaHiddenFocus();

    document.addEventListener('DOMContentLoaded', fixAriaHiddenFocus);

    setTimeout(fixAriaHiddenFocus, 100);
    setTimeout(fixAriaHiddenFocus, 500);
    setTimeout(fixAriaHiddenFocus, 1000);
    setTimeout(fixAriaHiddenFocus, 2000);

    const observer = new MutationObserver((mutations) => {
        fixAriaHiddenFocus();
    });

    function startObserver() {
        if (document.body) {
            observer.observe(document.body, {
                childList: true,
                subtree: true,
                attributes: true,
                attributeFilter: ['aria-hidden']
            });
            fixAriaHiddenFocus();
        } else {
            setTimeout(startObserver, 10);
        }
    }
    startObserver();
})();

(function() {
    function setupRowHighlighting() {
        const tables = document.querySelectorAll('.metric-table');
        tables.forEach(table => {
            if (table.dataset.highlightSetup) return;
            table.dataset.highlightSetup = 'true';
            
            const rows = table.querySelectorAll('tbody tr');
            rows.forEach(row => {
                const languageCell = row.querySelector('th');
                if (languageCell) {
                    languageCell.addEventListener('click', function() {
                        const isHighlighted = row.classList.contains('row-highlighted');
                        rows.forEach(r => r.classList.remove('row-highlighted'));
                        if (!isHighlighted) {
                            row.classList.add('row-highlighted');
                        }
                    });
                }
            });
        });
    }

    document.addEventListener('DOMContentLoaded', setupRowHighlighting);
    setTimeout(setupRowHighlighting, 100);
    setTimeout(setupRowHighlighting, 500);
    setTimeout(setupRowHighlighting, 1000);
    setTimeout(setupRowHighlighting, 2000);

    const rowObserver = new MutationObserver((mutations) => {
        setupRowHighlighting();
    });

    function startRowObserver() {
        if (document.body) {
            rowObserver.observe(document.body, {
                childList: true,
                subtree: true
            });
            setupRowHighlighting();
        } else {
            setTimeout(startRowObserver, 10);
        }
    }
    startRowObserver();
})();

(function() {
    const rowSortState = {};
    const setupContainers = new WeakSet();
    
    function setupLeaderboardRowSorting() {
        const leaderboardIds = ['#wer-leaderboard-table', '#cer-leaderboard-table', '#rtfx-leaderboard-table'];
        
        leaderboardIds.forEach(tableId => {
            const container = document.querySelector(tableId);
            if (!container) return;
            
            if (!rowSortState[tableId]) {
                rowSortState[tableId] = { rowIndex: null, ascending: true };
            }
            
            if (setupContainers.has(container)) return;
            setupContainers.add(container);
            
            console.log('Setting up row sort for', tableId);
            
            container.addEventListener('click', function(e) {
                if (e.target.closest('button') || e.target.closest('.sort-button')) {
                    return;
                }
                
                const ariaHiddenTable = e.target.closest('table[aria-hidden="true"]');
                if (ariaHiddenTable) {
                    return;
                }
                
                let clickedCell = e.target.closest('td');
                if (!clickedCell) {
                    const cellWrap = e.target.closest('.cell-wrap');
                    if (cellWrap) {
                        clickedCell = cellWrap.closest('td');
                    }
                }
                if (!clickedCell) {
                    return;
                }
                
                const clickedRow = clickedCell.closest('tr');
                if (!clickedRow) {
                    return;
                }
                
                const tbody = clickedRow.closest('tbody.tbody') || clickedRow.closest('tbody');
                if (!tbody) {
                    return;
                }
                
                const virtualViewport = tbody.closest('svelte-virtual-table-viewport');
                if (!virtualViewport) {
                    return;
                }
                
                const allCells = Array.from(clickedRow.querySelectorAll('td'));
                const cellIndex = allCells.indexOf(clickedCell);
                
                console.log('Row sort click - cell index:', cellIndex, 'Cell text:', clickedCell.textContent.trim().substring(0, 20));
                
                if (cellIndex === 0 || cellIndex === 1) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const virtualTableViewport = container.querySelector('svelte-virtual-table-viewport');
                    const table = virtualTableViewport ? 
                        virtualTableViewport.querySelector('table.table') : 
                        container.querySelector('table:not([aria-hidden="true"])');
                    const thead = table ? table.querySelector('thead.thead') || table.querySelector('thead') : null;
                    const virtualTbody = table ? table.querySelector('tbody.tbody') || table.querySelector('tbody') : null;
                    
                    console.log('Found elements - table:', !!table, 'thead:', !!thead, 'tbody:', !!virtualTbody);
                    
                    if (table && thead && virtualTbody) {
                        sortRowColumns(tableId, table, thead, virtualTbody, clickedRow);
                    } else {
                        console.log('Missing table elements:', { table: !!table, thead: !!thead, tbody: !!virtualTbody });
                    }
                    return;
                }
                
                const allRows = tbody.querySelectorAll('tr');
                const isHighlighted = clickedRow.classList.contains('leaderboard-row-highlighted');
                
                allRows.forEach(row => row.classList.remove('leaderboard-row-highlighted'));
                
                if (!isHighlighted) {
                    clickedRow.classList.add('leaderboard-row-highlighted');
                }
            }, true);
            
            addRowSortTooltips(container);
        });
    }
    
    function addRowSortTooltips(container) {
        const virtualTableViewport = container.querySelector('svelte-virtual-table-viewport');
        const table = virtualTableViewport ? 
            virtualTableViewport.querySelector('table.table') : 
            container.querySelector('table:not([aria-hidden="true"])');
        const tbody = table ? table.querySelector('tbody.tbody') || table.querySelector('tbody') : null;
        if (!tbody) return;
        
        const rows = tbody.querySelectorAll('tr');
        rows.forEach(row => {
            const cells = row.querySelectorAll('td');
            if (cells.length >= 2) {
                if (cells[0] && !cells[0].dataset.tooltipSet) {
                    cells[0].title = 'Click to sort columns by this row\'s values';
                    cells[0].dataset.tooltipSet = 'true';
                }
                if (cells[1] && !cells[1].dataset.tooltipSet) {
                    const langName = cells[1].textContent.trim();
                    cells[1].title = `Click to sort model columns by ${langName}'s scores`;
                    cells[1].dataset.tooltipSet = 'true';
                }
            }
        });
    }
    
    function sortRowColumns(tableId, table, thead, tbody, clickedRow) {
        console.log('sortRowColumns called for', tableId);
        
        const headerRow = thead.querySelector('tr');
        if (!headerRow) {
            console.log('No header row found');
            return;
        }
        
        const headerCells = Array.from(headerRow.querySelectorAll('th'));
        const rowCells = Array.from(clickedRow.querySelectorAll('td'));
        
        console.log('Header cells:', headerCells.length, 'Row cells:', rowCells.length);
        
        const fixedCols = 2;
        
        const modelHeaders = headerCells.slice(fixedCols);
        const modelCells = rowCells.slice(fixedCols);
        
        if (modelHeaders.length === 0 || modelCells.length === 0) {
            console.log('No model columns to sort');
            return;
        }
        
        const allBodyRows = Array.from(tbody.querySelectorAll('tr'));
        const rowIndex = allBodyRows.indexOf(clickedRow);
        
        let ascending;
        if (rowSortState[tableId].rowIndex === rowIndex) {
            ascending = !rowSortState[tableId].ascending;
        } else {
            ascending = !tableId.includes('rtfx');
        }
        rowSortState[tableId] = { rowIndex, ascending };
        
        console.log('Sorting', ascending ? 'ascending' : 'descending', 'for row', rowIndex);
        
        const columnsData = modelHeaders.map((header, i) => {
            const cell = modelCells[i];
            let cellText = '';
            if (cell) {
                const textEl = cell.querySelector('.cell-wrap .text') || 
                               cell.querySelector('.cell-wrap') || 
                               cell.querySelector('span') ||
                               cell;
                cellText = textEl.textContent.trim();
            }
            let value = parseFloat(cellText);
            if (isNaN(value) || cellText === '--' || cellText === '') {
                value = ascending ? Infinity : -Infinity;
            }
            console.log('Column', i, ':', cellText, '->', value);
            return { header, cell, value, originalIndex: i };
        });
        
        columnsData.sort((a, b) => {
            if (ascending) {
                return a.value - b.value;
            } else {
                return b.value - a.value;
            }
        });
        
        console.log('New order:', columnsData.map(c => `${c.originalIndex}:${c.value}`).join(', '));
        
        const newOrder = columnsData.map(col => col.originalIndex);
        
        const newHeaderOrder = [];
        for (let i = 0; i < fixedCols; i++) {
            newHeaderOrder.push(headerCells[i]);
        }
        newOrder.forEach(idx => {
            newHeaderOrder.push(headerCells[fixedCols + idx]);
        });

        while (headerRow.firstChild) {
            headerRow.removeChild(headerRow.firstChild);
        }
        newHeaderOrder.forEach(cell => {
            if (cell) headerRow.appendChild(cell);
        });
        

        allBodyRows.forEach((row, rIdx) => {
            const cells = Array.from(row.querySelectorAll('td'));
            const newCellOrder = [];
            for (let i = 0; i < fixedCols; i++) {
                newCellOrder.push(cells[i]);
            }
            newOrder.forEach(idx => {
                newCellOrder.push(cells[fixedCols + idx]);
            });
            
            while (row.firstChild) {
                row.removeChild(row.firstChild);
            }
            newCellOrder.forEach(cell => {
                if (cell) row.appendChild(cell);
            });
        });
        
        allBodyRows.forEach(row => row.classList.remove('leaderboard-row-highlighted'));
        const newRows = tbody.querySelectorAll('tr');
        if (newRows[rowIndex]) {
            newRows[rowIndex].classList.add('leaderboard-row-highlighted');
        }
        
        console.log('Sort complete');
    }

    document.addEventListener('DOMContentLoaded', setupLeaderboardRowSorting);
    setTimeout(setupLeaderboardRowSorting, 500);
    setTimeout(setupLeaderboardRowSorting, 1000);
    setTimeout(setupLeaderboardRowSorting, 2000);
    setTimeout(setupLeaderboardRowSorting, 3000);
    setTimeout(setupLeaderboardRowSorting, 5000);

    const leaderboardObserver = new MutationObserver((mutations) => {
        for (const m of mutations) {
            if (m.type === 'childList') {
                const targetContainer = m.target.closest('#wer-leaderboard-table, #cer-leaderboard-table, #rtfx-leaderboard-table');
                if (targetContainer) {
                    const tableId = '#' + targetContainer.id;
                    if (rowSortState[tableId]) {
                        rowSortState[tableId] = { rowIndex: null, ascending: true };
                    }
                    addRowSortTooltips(targetContainer);
                }
            }
        }
        
        setupLeaderboardRowSorting();
        
        const containers = document.querySelectorAll('#wer-leaderboard-table, #cer-leaderboard-table, #rtfx-leaderboard-table');
        containers.forEach(addRowSortTooltips);
    });

    function startLeaderboardObserver() {
        if (document.body) {
            leaderboardObserver.observe(document.body, {
                childList: true,
                subtree: true
            });
            setupLeaderboardRowSorting();
        } else {
            setTimeout(startLeaderboardObserver, 10);
        }
    }
    startLeaderboardObserver();
})();

(function() {
    function setupColumnResize() {
        const leaderboardIds = ['#wer-leaderboard-table', '#cer-leaderboard-table', '#rtfx-leaderboard-table'];
        
        leaderboardIds.forEach(tableId => {
            const container = document.querySelector(tableId);
            if (!container) return;
            
            const table = container.querySelector('table');
            if (!table || table.dataset.resizeSetup) return;
            table.dataset.resizeSetup = 'true';
            
            const headers = table.querySelectorAll('thead th');
            
            headers.forEach((th, index) => {
                if (th.querySelector('.col-resize-handle')) return;
                
                const headerText = th.textContent.trim();
                if (headerText && !th.getAttribute('title')) {
                    th.setAttribute('title', headerText);
                }
                
                const resizeHandle = document.createElement('div');
                resizeHandle.className = 'col-resize-handle';
                th.appendChild(resizeHandle);
                
                let startX, startWidth, isResizing = false;
                
                resizeHandle.addEventListener('mousedown', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    isResizing = true;
                    startX = e.pageX;
                    startWidth = th.offsetWidth;
                    resizeHandle.classList.add('resizing');
                    document.body.style.cursor = 'col-resize';
                    document.body.style.userSelect = 'none';
                });
                
                document.addEventListener('mousemove', function(e) {
                    if (!isResizing) return;
                    const diff = e.pageX - startX;
                    const newWidth = Math.max(60, Math.min(300, startWidth + diff));
                    th.style.width = newWidth + 'px';
                    th.style.minWidth = newWidth + 'px';
                    th.style.maxWidth = newWidth + 'px';
                    const tbody = table.querySelector('tbody');
                    if (tbody) {
                        const rows = tbody.querySelectorAll('tr');
                        rows.forEach(row => {
                            const cell = row.children[index];
                            if (cell) {
                                cell.style.width = newWidth + 'px';
                                cell.style.minWidth = newWidth + 'px';
                                cell.style.maxWidth = newWidth + 'px';
                            }
                        });
                    }
                });
                
                document.addEventListener('mouseup', function() {
                    if (isResizing) {
                        isResizing = false;
                        resizeHandle.classList.remove('resizing');
                        document.body.style.cursor = '';
                        document.body.style.userSelect = '';
                    }
                });
            });
            
            const cells = table.querySelectorAll('tbody td');
            cells.forEach(cell => {
                const cellText = cell.textContent.trim();
                if (cellText && !cell.getAttribute('title')) {
                    cell.setAttribute('title', cellText);
                }
            });
        });
    }

    document.addEventListener('DOMContentLoaded', setupColumnResize);
    setTimeout(setupColumnResize, 100);
    setTimeout(setupColumnResize, 500);
    setTimeout(setupColumnResize, 1000);
    setTimeout(setupColumnResize, 2000);
    setTimeout(setupColumnResize, 3000);

    const resizeObserver = new MutationObserver((mutations) => {
        setupColumnResize();
    });

    function startResizeObserver() {
        if (document.body) {
            resizeObserver.observe(document.body, {
                childList: true,
                subtree: true
            });
            setupColumnResize();
        } else {
            setTimeout(startResizeObserver, 10);
        }
    }
    startResizeObserver();
})();

(function() {
    function disableDataframeContextMenu() {
        const leaderboardIds = ['#wer-leaderboard-table', '#cer-leaderboard-table', '#rtfx-leaderboard-table'];
        
        leaderboardIds.forEach(tableId => {
            const container = document.querySelector(tableId);
            if (!container || container.dataset.contextMenuDisabled) return;
            container.dataset.contextMenuDisabled = 'true';
            
            container.addEventListener('contextmenu', function(e) {
                e.preventDefault();
                e.stopPropagation();
                return false;
            }, true);
        });
        
        const dataframes = document.querySelectorAll('[data-testid="dataframe"], .table-wrap, .svelte-virtual-table-viewport');
        dataframes.forEach(df => {
            if (df.dataset.contextMenuDisabled) return;
            df.dataset.contextMenuDisabled = 'true';
            
            df.addEventListener('contextmenu', function(e) {
                e.preventDefault();
                e.stopPropagation();
                return false;
            }, true);
        });
    }

    document.addEventListener('DOMContentLoaded', disableDataframeContextMenu);
    setTimeout(disableDataframeContextMenu, 100);
    setTimeout(disableDataframeContextMenu, 500);
    setTimeout(disableDataframeContextMenu, 1000);
    setTimeout(disableDataframeContextMenu, 2000);

    const contextMenuObserver = new MutationObserver((mutations) => {
        disableDataframeContextMenu();
    });

    function startContextMenuObserver() {
        if (document.body) {
            contextMenuObserver.observe(document.body, {
                childList: true,
                subtree: true
            });
            disableDataframeContextMenu();
        } else {
            setTimeout(startContextMenuObserver, 10);
        }
    }
    startContextMenuObserver();
})();
</script>
"""


light_mode_head = """
<script>
    (function() {
        document.documentElement.classList.remove('dark');
        document.body && document.body.classList.remove('dark');
        
        var url = new URL(window.location);
        if (url.searchParams.get('__theme') !== 'light') {
            url.searchParams.set('__theme', 'light');
            var newUrl = url.pathname + url.search + url.hash;
            history.replaceState(null, '', newUrl);
        }
        
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.attributeName === 'class') {
                    var target = mutation.target;
                    if (target.classList.contains('dark')) {
                        target.classList.remove('dark');
                    }
                }
            });
        });
        
        observer.observe(document.documentElement, { attributes: true });
        
        if (document.body) {
            observer.observe(document.body, { attributes: true });
        } else {
            document.addEventListener('DOMContentLoaded', function() {
                document.body.classList.remove('dark');
                observer.observe(document.body, { attributes: true });
            });
        }
    })();
</script>
<style>
    :root, html, body, .gradio-container, .dark, body.dark {
        --body-background-fill: white !important;
        --background-fill-primary: white !important;
        --background-fill-secondary: #f9fafb !important;
        --body-text-color: #1f2937 !important;
        --body-text-color-subdued: #6b7280 !important;
        --block-background-fill: white !important;
        --block-border-color: #e5e7eb !important;
        --block-label-background-fill: #f3f4f6 !important;
        --block-label-text-color: #374151 !important;
        --block-title-text-color: #111827 !important;
        --input-background-fill: white !important;
        --input-border-color: #d1d5db !important;
        --table-even-background-fill: #f9fafb !important;
        --table-odd-background-fill: white !important;
        --table-row-focus: #e0f2fe !important;
        --border-color-primary: #e5e7eb !important;
        --neutral-50: #f9fafb !important;
        --neutral-100: #f3f4f6 !important;
        --neutral-200: #e5e7eb !important;
        --neutral-700: #374151 !important;
        --neutral-800: #1f2937 !important;
        --neutral-900: #111827 !important;
        --neutral-950: #030712 !important;
    }
    
    html, body, .gradio-container {
        background: white !important;
        color: #1f2937 !important;
    }
    
    .gradio-container table:not(.js-plotly-plot table),
    .dark .gradio-container table:not(.js-plotly-plot table) {
        background: white !important;
        color: #1f2937 !important;
    }
    
    .gradio-container th:not(.js-plotly-plot th),
    .gradio-container td:not(.js-plotly-plot td) {
        background: inherit !important;
        color: #1f2937 !important;
        border-color: #e5e7eb !important;
    }
    
    @media (prefers-color-scheme: dark) {
        :root, html, body, .gradio-container {
            --body-background-fill: white !important;
            --background-fill-primary: white !important;
            --background-fill-secondary: #f9fafb !important;
            --body-text-color: #1f2937 !important;
            --block-background-fill: white !important;
            background: white !important;
            color: #1f2937 !important;
        }
    }
    
    .js-plotly-plot, .js-plotly-plot *,
    .plotly, .plotly * {
        background: unset !important;
        background-color: unset !important;
    }
</style>
"""

# =============================================================================
# HTML Templates
# =============================================================================

chart_gallery_html = """
<div class="chart-gallery">
    <div class="chart-card">
        <h4>🏆 CER Performance Leaderboard</h4>
        <p>Ranks models by Character Error Rate. Especially useful for agglutinative and low-resource languages.</p>
    </div>
    <div class="chart-card">
        <h4>🏆 WER Performance Leaderboard</h4>
        <p>Ranks model families or top individual models by Word Error Rate. Filter by language to see top performers.</p>
    </div>
    <div class="chart-card">
        <h4>🚀 Speed vs Accuracy Tradeoffs</h4>
        <p>Scatter plot comparing model speed (RTFx) against accuracy (WER). Find the sweet spot between fast and accurate models.</p>
    </div>
    <div class="chart-card">
        <h4>🔍 CER vs WER Correlation</h4>
        <p>Scatter plot showing relationship between character and word error rates. Understand error patterns across models.</p>
    </div>
</div>
"""

section_divider_html = "<hr style='margin: 2rem 0;'>"

footer_html = """
<footer class="paza-footer">
    <div class="paza-footer-links">
        <a href="https://go.microsoft.com/fwlink/?LinkId=521839" target="_blank" rel="noopener noreferrer">Privacy &amp; Cookies</a>
        <a href="https://www.microsoft.com/en-us/research/lab/microsoft-research-lab-africa-nairobi/" target="_blank" rel="noopener noreferrer">Microsoft Research Africa, Nairobi</a>
        <a href="https://www.microsoft.com/en-us/research/project/project-gecko/" target="_blank" rel="noopener noreferrer">Project Gecko</a>
        <a href="https://www.microsoft.com/en-us/research/" target="_blank" rel="noopener noreferrer" class="copyright">&copy; Microsoft Research 2026</a>
    </div>
</footer>
"""