style.css

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
    --mm-bg: #f3f4f6;
    --mm-surface: #ffffff;
    --mm-surface-soft: #f8f9fb;
    --mm-ink: #111827;
    --mm-ink-soft: #4b5563;
    --mm-muted: #6b7280;
    --mm-line: #d9dee5;
    --mm-accent: #244b57;
    --mm-accent-soft: #eef4f6;
    --mm-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    color-scheme: light;

    --body-background-fill: var(--mm-bg);
    --body-background-fill-dark: var(--mm-bg);
    --background-fill-primary: var(--mm-surface);
    --background-fill-secondary: var(--mm-surface-soft);
    --block-background-fill: var(--mm-surface);
    --block-border-color: var(--mm-line);
    --block-label-text-color: var(--mm-ink);
    --block-title-text-color: var(--mm-ink);
    --body-text-color: var(--mm-ink);
    --body-text-color-subdued: var(--mm-muted);
    --input-background-fill: var(--mm-surface-soft);
    --input-border-color: var(--mm-line);
    --input-border-color-focus: var(--mm-accent);
    --input-placeholder-color: var(--mm-muted);
    --color-accent: var(--mm-accent);
    --color-accent-soft: var(--mm-accent-soft);
}

html.dark,
body.dark,
:root[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"],
.dark,
.gradio-container.dark {
    --mm-bg: #0b0f14;
    --mm-surface: #121821;
    --mm-surface-soft: #18212c;
    --mm-ink: #f3f6fb;
    --mm-ink-soft: #c8d2de;
    --mm-muted: #96a3b3;
    --mm-line: rgba(175, 189, 204, 0.18);
    --mm-accent: #9cc1cb;
    --mm-accent-soft: rgba(156, 193, 203, 0.14);
    --mm-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    color-scheme: dark;
}

html,
body {
    margin: 0;
    background: var(--mm-bg) !important;
    width: 100%;
}

body {
    color: var(--mm-ink);
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
}

.gradio-container {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 24px 24px 56px !important;
    box-sizing: border-box;
    background: transparent !important;
    color: var(--mm-ink) !important;
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Gradio 6 inserts an extra <div class="main fillable"> with its own
   max-width caps and padding — neutralize it so our outer container wins. */
.gradio-container .main,
.gradio-container .main.fillable,
.gradio-container .main.fillable.app {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.gradio-container .main .contain,
.gradio-container .main.fillable .contain {
    padding: 0 !important;
    max-width: 100% !important;
}

.gradio-container a {
    color: inherit;
}

.gradio-container *,
.gradio-container *::before,
.gradio-container *::after {
    box-sizing: border-box;
}

.gradio-container .row.mm-controls-shell,
.gradio-container .row.mm-video-grid,
.gradio-container .row.mm-compare-grid {
    width: 100% !important;
    min-width: 0 !important;
}

.gradio-container .row.mm-controls-shell > *,
.gradio-container .row.mm-video-grid > *,
.gradio-container .row.mm-compare-grid > * {
    flex: unset !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.gradio-container .column.mm-video-card,
.gradio-container .column.mm-compare-card,
.gradio-container .column.mm-compare-panel {
    min-width: 0 !important;
}

.gradio-container .column.mm-video-card,
.gradio-container .column.mm-compare-card {
    gap: 0 !important;
}

.gradio-container .block.mm-video-shell,
.gradio-container .block.mm-compare-video {
    border-width: 0 !important;
    box-shadow: none !important;
    background: #0f172a !important;
    overflow: hidden !important;
}

.gradio-container .block.mm-video-shell [data-testid="video"],
.gradio-container .block.mm-compare-video [data-testid="video"] {
    width: 100%;
    height: 100%;
}

.mm-overline {
    margin: 0 0 0.45rem;
    color: var(--mm-muted);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mm-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 1.6rem;
    border: 1px solid var(--mm-line);
    border-radius: 16px;
    background: var(--mm-surface);
    box-shadow: var(--mm-shadow);
    min-width: 0;
}

.mm-hero-copy {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.mm-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.mm-brand img {
    width: 42px;
    height: 42px;
    border: 1px solid var(--mm-line);
    border-radius: 12px;
    background: var(--mm-surface-soft);
    padding: 0.3rem;
    box-sizing: border-box;
}

.mm-brand span {
    color: var(--mm-muted);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.mm-hero h1 {
    margin: 0;
    max-width: 14ch;
    color: var(--mm-ink);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.mm-hero-lede {
    max-width: 64ch;
    margin: 0;
    color: var(--mm-ink-soft);
    font-size: 1rem;
    line-height: 1.72;
    overflow-wrap: anywhere;
}

.mm-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    min-width: 0;
}

.gradio-container .mm-hero .mm-nav a {
    display: block;
    flex: 0 0 auto;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--mm-line);
    border-radius: 999px;
    background: var(--mm-surface-soft);
    color: var(--mm-ink-soft);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.gradio-container .mm-hero .mm-nav a:hover {
    border-color: var(--mm-accent);
    background: var(--mm-surface);
    color: var(--mm-ink);
}

.mm-hero-media {
    flex: 0 1 420px;
    width: min(100%, 420px);
    min-width: 0;
}

.mm-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--mm-line);
    border-radius: 14px;
    background: var(--mm-surface-soft);
    box-shadow: var(--mm-shadow);
    object-fit: cover;
}

.mm-section {
    margin-top: 2rem;
}

.mm-section-head {
    max-width: 780px;
    margin-bottom: 1rem;
    min-width: 0;
}

.mm-section-head h2 {
    margin: 0.15rem 0 0.6rem;
    color: var(--mm-ink);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.mm-section-head p {
    margin: 0;
    color: var(--mm-ink-soft);
    font-size: 1rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.mm-video-grid,
.gradio-container .row.mm-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem !important;
    align-items: stretch !important;
}

.mm-video-card,
.mm-compare-card,
.gradio-container .column.mm-video-card,
.gradio-container .column.mm-compare-card,
.mm-link-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--mm-line);
    border-radius: 14px;
    background: var(--mm-surface);
    box-shadow: var(--mm-shadow);
}

.mm-video-shell,
.gradio-container .block.mm-video-shell {
    overflow: hidden;
    background: #0f172a;
    aspect-ratio: 16 / 10;
}

.mm-video-shell video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mm-video-meta {
    padding: 0.9rem 1rem 1rem;
}

.mm-video-meta h3,
.mm-compare-head h3 {
    margin: 0;
    color: var(--mm-ink);
    font-size: 1rem;
    font-weight: 700;
}

.mm-tag {
    display: inline-flex;
    margin-bottom: 0.6rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--mm-accent-soft);
    color: var(--mm-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mm-controls-shell,
.gradio-container .row.mm-controls-shell {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem !important;
    align-items: stretch !important;
    margin-top: 0.6rem;
    padding: 0.4rem 0.5rem 0;
    border: 1px solid var(--mm-line);
    border-radius: 14px;
    background: var(--mm-surface);
    box-shadow: var(--mm-shadow);
    overflow: visible !important;
    position: relative;
    z-index: 20;
    min-width: 0;
}

.mm-controls-shell > div,
.gradio-container .row.mm-controls-shell > div,
.mm-controls-shell [role="listbox"],
.mm-controls-shell ul {
    overflow: visible !important;
}

.mm-select {
    position: relative;
    z-index: 21;
}

.mm-controls-shell label,
.mm-controls-shell label span {
    color: var(--mm-ink) !important;
}

.mm-controls-shell p {
    color: var(--mm-muted) !important;
}

.mm-select > div,
.mm-select .wrap,
.mm-select input,
.mm-select button,
.mm-select [role="combobox"] {
    background: var(--mm-surface-soft) !important;
    border-color: var(--mm-line) !important;
    color: var(--mm-ink) !important;
    border-radius: 14px !important;
}

.mm-controls-shell [role="listbox"],
.mm-controls-shell ul {
    background: var(--mm-surface) !important;
    border: 1px solid var(--mm-line) !important;
    color: var(--mm-ink) !important;
    z-index: 80 !important;
}

.mm-controls-shell [role="option"] {
    color: var(--mm-ink) !important;
}

.mm-controls-shell [role="option"]:hover,
.mm-controls-shell [role="option"][aria-selected="true"] {
    background: var(--mm-accent-soft) !important;
}

.mm-compare-panel,
.gradio-container .column.mm-compare-panel {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--mm-line);
    border-radius: 14px;
    background: var(--mm-surface);
    box-shadow: var(--mm-shadow);
    min-width: 0;
}

.mm-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.mm-panel-head h3 {
    margin: 0.15rem 0 0.4rem;
    color: var(--mm-ink);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.mm-panel-head p {
    margin: 0;
    color: var(--mm-ink-soft);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.mm-panel-head strong {
    color: var(--mm-ink);
}

.mm-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.mm-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.72rem;
    border: 1px solid var(--mm-line);
    border-radius: 999px;
    background: var(--mm-surface-soft);
    color: var(--mm-ink-soft);
    font-size: 0.84rem;
    font-weight: 700;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.mm-compare-grid,
.gradio-container .row.mm-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem !important;
    align-items: stretch !important;
}

.mm-compare-card {
    border-top: 2px solid var(--mm-card-accent, var(--mm-accent));
}

.mm-compare-head {
    padding: 0.9rem 1rem 0.75rem;
}

.mm-compare-desc {
    margin: 0.3rem 0 0;
    color: var(--mm-ink-soft);
    font-size: 0.88rem;
    line-height: 1.5;
}

.mm-compare-card-10m {
    --mm-card-accent: #9a6237;
}

.mm-compare-card-base-e {
    --mm-card-accent: #2f6a73;
}

.mm-compare-card-100m {
    --mm-card-accent: #7a4c8f;
}

.mm-compare-card-fullbody-base {
    --mm-card-accent: #c13a5b;
}

.mm-bibtex {
    margin: 0;
    padding: 1rem 1.2rem;
    border: 1px solid var(--mm-line);
    border-radius: 14px;
    background: var(--mm-surface);
    box-shadow: var(--mm-shadow);
    color: var(--mm-ink);
    font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.mm-bibtex code {
    background: transparent;
    color: inherit;
    font: inherit;
}

.mm-compare-video,
.gradio-container .block.mm-compare-video {
    overflow: hidden;
    background: #0f172a;
    aspect-ratio: 16 / 10;
}

.mm-compare-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0f172a;
}

.mm-link-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

.gradio-container .mm-link-strip .mm-link-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.3rem;
    padding: 1rem 1.15rem;
    text-align: left;
    text-decoration: none;
    color: var(--mm-ink);
    background: linear-gradient(180deg, var(--mm-surface) 0%, var(--mm-surface-soft) 100%);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.gradio-container .mm-link-strip .mm-link-card:hover,
.gradio-container .mm-link-strip .mm-link-card:focus-visible {
    border-color: var(--mm-accent);
    background: linear-gradient(180deg, var(--mm-surface) 0%, var(--mm-accent-soft) 100%);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
    transform: translateY(-2px);
}

.gradio-container .mm-link-strip .mm-link-card:focus-visible {
    outline: none;
}

.gradio-container .mm-link-strip .mm-link-title,
.gradio-container .mm-link-strip .mm-link-note {
    text-decoration: none;
    overflow-wrap: anywhere;
}

.gradio-container .mm-link-strip .mm-link-title {
    color: var(--mm-ink);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.gradio-container .mm-link-strip .mm-link-note {
    color: var(--mm-ink-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 1100px) {
    .mm-video-grid,
    .gradio-container .row.mm-video-grid,
    .mm-compare-grid,
    .gradio-container .row.mm-compare-grid,
    .mm-link-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .gradio-container {
        padding: 14px 12px 40px !important;
    }

    .mm-hero,
    .mm-compare-panel {
        align-items: stretch;
        flex-direction: column;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .mm-hero h1 {
        max-width: none;
        font-size: clamp(2rem, 9vw, 2.7rem);
    }

    .mm-brand {
        align-items: flex-start;
    }

    .mm-brand span {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .mm-hero-media {
        width: 100%;
    }

    .mm-nav {
        flex-wrap: wrap;
    }

    .mm-panel-head {
        flex-direction: column;
    }

    .mm-bibtex {
        font-size: 0.75rem;
        padding: 0.75rem 0.9rem;
    }

    .mm-controls-shell,
    .gradio-container .row.mm-controls-shell,
    .mm-video-grid,
    .gradio-container .row.mm-video-grid,
    .mm-compare-grid,
    .gradio-container .row.mm-compare-grid,
    .mm-link-strip {
        grid-template-columns: 1fr;
    }
}