/*
 * OmniDiMM — MODUS presentation layer
 *
 * This file intentionally sits on top of the existing Clarity styles. The
 * research content, figure DOM, stable IDs, and interaction classes remain
 * owned by the original page; this layer only defines the page shell, visual
 * tokens, section rhythm, and responsive navigation.
 */

:root {
    --modus-ink: #1a1a1a;
    --modus-ink-soft: #4f5554;
    --modus-navy: #14213d;
    --modus-navy-deep: #1c2a4a;
    --modus-teal: #2c5d63;
    --modus-teal-dark: #1f4549;
    --modus-mint: #e8f3ee;
    --modus-mint-line: #d6e4dc;
    --modus-cream: #f7f4ed;
    --modus-cream-line: #ebe5d6;
    --modus-paper: #ffffff;
    --modus-hairline: #e5e7e5;
    --modus-muted: #747a78;
    --modus-radius-sm: 7px;
    --modus-radius: 10px;
    --modus-radius-lg: 14px;
    --modus-shadow: 0 10px 32px rgba(20, 33, 61, 0.08);
    --modus-shadow-soft: 0 4px 18px rgba(20, 33, 61, 0.06);
    --modus-nav-height: 54px;
    --modus-content: 960px;
    --modus-wide: 1180px;
    /* Directly mirrors Modus' any2any-matrix-wrap: a 1500px cap with a
     * 16px viewport gutter on narrower screens. */
    --modus-wide-figure: min(1500px, calc(100vw - 32px));
    --modus-ui-font: "Inter", "Noto Sans", sans-serif;
    --modus-heading-font: "Space Grotesk", "Inter", sans-serif;
    --modus-reading-font: "Inter", "Noto Sans", sans-serif;
    --modus-display-font: "Cormorant Garamond", Palatino, Georgia, serif;
    --modus-brand-font: "Cutive Mono", "Source Code Pro", "JetBrains Mono", "Fira Code",
        ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --modus-code-font: "Fira Code", "JetBrains Mono", "Source Code Pro",
        ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --omnidimm-slider-blue: #304d6d;
}

html {
    background: var(--modus-mint);
    overflow-x: clip;
    scroll-behavior: smooth;
}

body.modus-theme {
    margin: 0;
    overflow-x: clip;
    color: var(--modus-ink);
    background: var(--modus-paper);
    font-family: var(--modus-ui-font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.modus-theme *,
body.modus-theme *::before,
body.modus-theme *::after {
    box-sizing: border-box;
}

body.modus-theme a {
    color: var(--modus-teal);
    font-size: inherit;
    line-height: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

body.modus-theme a:hover {
    color: var(--modus-teal-dark);
}

body.modus-theme h1,
body.modus-theme h2,
body.modus-theme h3,
body.modus-theme h4,
body.modus-theme h5,
body.modus-theme h6 {
    color: var(--modus-navy);
    font-family: var(--modus-heading-font);
    font-weight: 700;
    letter-spacing: -0.025em;
}

body.modus-theme h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.12;
}

body.modus-theme h2 {
    margin-bottom: 1.25rem;
    font-size: clamp(1.7rem, 3vw, 2.15rem);
    line-height: 1.2;
}

body.modus-theme h3 {
    font-size: clamp(1.18rem, 2vw, 1.42rem);
    line-height: 1.3;
}

body.modus-theme p,
body.modus-theme li {
    font-family: var(--modus-ui-font) !important;
    line-height: 1.5;
}

body.modus-theme p.text {
    max-width: var(--modus-content);
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0.9rem;
    padding: 0;
    color: #2b2b2b;
    font-family: var(--modus-ui-font) !important;
    font-size: 1rem !important;
    line-height: 1.72 !important;
    text-align: left !important;
}

body.modus-theme ul.text,
body.modus-theme ol.text {
    max-width: var(--modus-content);
    margin-right: auto;
    margin-left: auto;
    font-family: var(--modus-ui-font) !important;
    font-size: 1rem !important;
    line-height: 1.72 !important;
}

body.modus-theme .caption {
    color: #6b6b6b;
    font-size: 0.9rem;
    line-height: 1.5;
}

body.modus-theme code,
body.modus-theme pre,
body.modus-theme .code-copy-btn,
body.modus-theme output {
    font-family: var(--modus-code-font);
}

body.modus-theme :is(
        .generation-mode-button,
        .navbar-brand,
        .before figcaption,
        .after figcaption,
        .spider-chart
    ) {
    font-family: var(--modus-ui-font);
}

/* -------------------------------------------------------------------------- */
/* Main navigation                                                            */
/* -------------------------------------------------------------------------- */

body.modus-theme .navbar {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    min-height: var(--modus-nav-height);
    padding: 0 24px;
    border-bottom: 0;
    background: linear-gradient(
        to right,
        rgba(233, 175, 116, 0.75),
        rgba(242, 180, 200, 0.75)
    );
    box-shadow: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

body.modus-theme .navbar > .container.extra-large {
    width: 100%;
    max-width: var(--modus-wide);
    min-height: var(--modus-nav-height);
    margin: 0 auto;
    padding: 0;
}

body.modus-theme .navbar-content {
    display: flex;
    width: 100%;
    min-height: var(--modus-nav-height);
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
}

body.modus-theme .navbar-links {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 1.2rem;
    overflow-x: auto;
    scrollbar-width: none;
}

body.modus-theme .navbar-links::-webkit-scrollbar {
    display: none;
}

body.modus-theme .navbar-links > * {
    flex: 0 0 auto;
}

body.modus-theme .navbar-links > .navbar-section-divider {
    width: 1px;
    height: 18px;
    flex: 0 0 1px;
    margin: 0 -0.5rem;
    background: rgba(20, 33, 61, 0.16);
    opacity: 0.8;
}

body.modus-theme .navbar-links > .dropdown:not(.active) + .navbar-section-divider {
    margin-left: -0.65rem;
}

body.modus-theme .navbar-links > a:first-child {
    margin-right: auto;
    padding-right: 0.65rem;
}

body.modus-theme .navbar-links a,
body.modus-theme .navbar-links .dropdown-trigger {
    display: inline-flex;
    min-height: var(--modus-nav-height);
    align-items: center;
    gap: 0.38rem;
    padding: 0;
    color: rgba(20, 33, 61, 0.78);
    font-family: var(--modus-ui-font);
    font-size: 0.79rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    transition: color 150ms ease;
}

body.modus-theme .navbar-links a:hover,
body.modus-theme .navbar-links a.active,
body.modus-theme .navbar-links .dropdown.active > .dropdown-trigger {
    color: var(--modus-navy);
    text-decoration: none;
}

body.modus-theme .navbar-links a.active,
body.modus-theme .navbar-links .dropdown.active > .dropdown-trigger {
    font-weight: 700;
}

body.modus-theme .navbar-links > a:first-child .brand-logo {
    color: var(--modus-navy);
    font-family: var(--modus-brand-font);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

body.modus-theme .navbar-links .fa-chevron-down {
    font-size: 0.58rem;
    opacity: 0.55;
}

body.modus-theme > .dropdown-content {
    min-width: 188px;
    overflow: hidden;
    padding: 0.35rem;
    border: 1px solid var(--modus-hairline);
    border-radius: var(--modus-radius);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--modus-shadow);
}

body.modus-theme > .dropdown-content a {
    padding: 0.62rem 0.75rem;
    border-radius: 6px;
    color: var(--modus-navy);
    font-family: var(--modus-ui-font);
    font-size: 0.79rem;
}

body.modus-theme > .dropdown-content a:hover,
body.modus-theme > .dropdown-content a.active {
    background: var(--modus-mint);
    color: var(--modus-teal-dark);
}

body.modus-theme .burger-menu {
    display: none;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 9px;
    border: 0;
    border-radius: 50%;
    background: transparent;
}

body.modus-theme .burger-menu:hover {
    background: rgba(44, 93, 99, 0.08);
}

body.modus-theme .burger-menu div {
    width: 22px;
    height: 2px;
    margin: 4px auto;
    border-radius: 999px;
    background: var(--modus-navy);
}

/* -------------------------------------------------------------------------- */
/* Publication hero                                                           */
/* -------------------------------------------------------------------------- */

body.modus-theme #first-content {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: calc(var(--modus-nav-height) + 1.3rem) 24px 4rem;
    border: 0;
    background: linear-gradient(to right, #e9af74 0%, #f2b4c8 100%) !important;
    color: var(--modus-ink);
}

body.modus-theme div.container.blog#first-content div.blog-title {
    display: block;
    width: min(100%, 1100px);
    padding: 1rem 2rem 0.8rem;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: var(--modus-radius-lg);
    background: rgba(255, 255, 255, 0.28);
    box-shadow: 0 8px 32px rgba(20, 33, 61, 0.1);
}

body.modus-theme div.container.blog#first-content div.blog-title .blog-intro {
    display: block;
    width: 100%;
}

body.modus-theme div.container.blog#first-content div.blog-title .blog-intro > div {
    width: 100%;
    min-width: 0;
}

body.modus-theme #first-content h1.title {
    max-width: none;
    margin: 0 0 1.25rem;
    color: var(--modus-navy);
    font-family: var(--modus-ui-font);
    font-size: clamp(1.8rem, 2.25vw, 2.5rem);
    font-weight: 700;
    line-height: 1.13;
    letter-spacing: -0.03em;
    text-align: center;
}

body.modus-theme #first-content .brand-logo {
    color: var(--modus-navy);
    font-family: var(--modus-brand-font);
    letter-spacing: -0.02em;
}

body.modus-theme #first-content .author {
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    color: var(--modus-ink);
    font-family: var(--modus-ui-font) !important;
    font-weight: 400;
    line-height: 1.55;
    text-align: center;
}

body.modus-theme #first-content .blog-title .blog-intro p.author.author-list {
    position: relative;
    width: 100%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    font-size: clamp(0.92rem, 1.28vw, 1.05rem) !important;
    line-height: 1.5 !important;
}

body.modus-theme #first-content .author-name {
    white-space: nowrap;
}

body.modus-theme #first-content .author-reference-break {
    display: block;
}

body.modus-theme #first-content .author a {
    color: var(--modus-ink);
    font-family: var(--modus-ui-font) !important;
}

body.modus-theme #first-content .author sup,
body.modus-theme #first-content .institution sup {
    color: var(--modus-ink);
}

body.modus-theme #first-content .institution {
    display: flex;
    max-width: 1034px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem 1rem;
    margin: 1rem auto 0;
    color: var(--modus-ink);
}

body.modus-theme #first-content .institution-item {
    gap: 0.35rem;
}

body.modus-theme #first-content .institution-logo {
    margin: 0 !important;
    padding: 0 !important;
}

body.modus-theme #first-content .links,
body.modus-theme #first-content .institution + p + div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    margin: 1.45rem auto 1.8rem;
}

body.modus-theme #first-content .button.icon,
body.modus-theme #first-content a.button.icon {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.55rem 1rem;
    border: 1px solid rgba(20, 33, 61, 0.12);
    border-radius: 999px;
    background: var(--modus-navy) !important;
    box-shadow: none;
    color: #fff !important;
    font-family: var(--modus-ui-font);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        transform 150ms ease,
        background-color 150ms ease;
}

body.modus-theme #first-content .button.icon:hover,
body.modus-theme #first-content a.button.icon:hover {
    background: var(--modus-teal-dark) !important;
    transform: translateY(-1px);
}

body.modus-theme #first-content .button.is-disabled {
    background: #5f687a !important;
    color: rgba(255, 255, 255, 0.86) !important;
    cursor: not-allowed;
    opacity: 0.72;
    transform: none;
}

body.modus-theme .teaser-figure {
    max-width: 1120px;
    margin: 1.5rem auto 1rem;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.modus-theme .teaser-figure-toggle {
    border: 1px solid rgba(20, 33, 61, 0.12);
    background: rgba(255, 255, 255, 0.94);
    color: var(--modus-navy);
}

body.modus-theme #first-content > .caption,
body.modus-theme #first-content .blog-title > .caption {
    max-width: 960px;
    margin: 1rem auto 0;
    color: #4d5552;
    font-size: 0.95rem;
    text-align: left;
}

/* -------------------------------------------------------------------------- */
/* Section system                                                             */
/* -------------------------------------------------------------------------- */

body.modus-theme :is(
        #summary,
        #generation,
        #tokenization,
        #modelling,
        #capabilities,
        #object-decomposition,
        #retrieval,
        #baselines,
        #transfers
    ) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4rem max(24px, calc((100vw - var(--modus-wide)) / 2));
    border-radius: 0;
    box-shadow: none;
}

body.modus-theme :is(#summary, #tokenization, #retrieval, #transfers) {
    border-top: 1px solid #f0f0ed;
    background: var(--modus-paper);
}

body.modus-theme :is(#generation, #modelling, #capabilities, #object-decomposition, #baselines) {
    border-top: 1px solid var(--modus-cream-line);
    border-bottom: 1px solid var(--modus-cream-line);
    background: var(--modus-cream);
}

body.modus-theme :is(
        #summary,
        #generation,
        #tokenization,
        #modelling,
        #capabilities,
        #object-decomposition,
        #retrieval,
        #baselines,
        #transfers
    ) > h1,
body.modus-theme :is(
        #summary,
        #generation,
        #tokenization,
        #modelling,
        #capabilities,
        #object-decomposition,
        #retrieval,
        #baselines,
        #transfers
    ) > h2 {
    max-width: var(--modus-content);
    margin-right: auto;
    margin-left: auto;
}

body.modus-theme #summary > h1 {
    color: var(--modus-navy);
    font-family: var(--modus-ui-font);
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.12;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-bottom: 2rem;
    text-align: center;
}

body.modus-theme #summary > ul.text {
    margin-top: 0;
    margin-bottom: 0.9rem;
}

body.modus-theme :is(
        #capabilities,
        #object-decomposition,
        #retrieval,
        #baselines,
        #transfers
    ) > h1 {
    padding: 0 !important;
    margin-bottom: 1.5rem;
    font-family: var(--modus-heading-font);
    font-size: clamp(1.9rem, 3vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

body.modus-theme :is(
        #generation,
        #tokenization,
        #modelling,
        #capabilities,
        #object-decomposition,
        #retrieval,
        #baselines,
        #transfers
    ) h2 {
    padding: 0 !important;
    font-family: var(--modus-heading-font);
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* Keep the page-level headings on the same scale as Modus' regular sections.
 * The method masthead remains the larger Space Grotesk title below. */
body.modus-theme :is(
        #generation,
        #capabilities,
        #object-decomposition,
        #retrieval,
        #baselines,
        #transfers
    ) > :is(h1, h2) {
    font-family: var(--modus-ui-font);
    font-size: 2rem;
    line-height: 1.125;
    letter-spacing: -0.02em;
}

body.modus-theme :is(
        #generation,
        #tokenization,
        #modelling,
        #capabilities,
        #object-decomposition,
        #retrieval,
        #baselines,
        #transfers
    ) h2 {
    font-size: 1.75rem;
    line-height: 1.2;
}

body.modus-theme .retrieval-active-heading .retrieval-heading-slot {
    font-family: var(--modus-ui-font);
    font-size: 1.5rem;
    line-height: 1.125;
    text-align: center;
}

body.modus-theme #summary .video-box {
    max-width: var(--modus-content);
    margin: 2rem auto 0;
    overflow: hidden;
    border: 1px solid rgba(44, 93, 99, 0.12);
    border-radius: var(--modus-radius);
    background: #fff;
    box-shadow: var(--modus-shadow-soft);
}

body.modus-theme #summary .video-box img {
    display: block;
    width: 100%;
    height: auto;
}

body.modus-theme .gray-linear {
    background-image: none !important;
}

body.modus-theme .special-gradient {
    background: linear-gradient(to right, #e9af74 0%, #f2b4c8 100%) !important;
}

/* Wide interactive surfaces retain their natural DOM and data contracts. */
body.modus-theme :is(
        .tokenization-section,
        .retrieval-panel,
        .generation-panel,
        .transfers-carousel,
        .partfield-explode,
        .partfield-parts,
        .any-to-any-wrap
    ) {
    max-width: var(--modus-wide);
    margin-right: auto;
    margin-left: auto;
}

/* Apply `modus-wide-figure` to another constrained surface to use the same
 * centered breakout as Modus' `.any2any-matrix-wrap`. */
body.modus-theme .modus-wide-figure {
    position: relative;
    left: 50%;
    width: var(--modus-wide-figure);
    max-width: var(--modus-wide-figure);
    margin-right: 0;
    margin-left: 0;
    transform: translateX(-50%);
}

body.modus-theme :is(
        .tokenization-carousel,
        .modelling-figure-frame,
        .tokenization-slide-frame,
        .tokenization-panel,
        .partfield-panel,
        .retrieval-panel,
        .generation-panel,
        .transfers-card,
        .transfers-slide-frame,
        .transfers-carousel,
        .t2-panel,
        .partfield-explode,
        .partfield-parts,
        .ablations-side-card,
        .ablations-chart-card
    ) {
    border: 1px solid rgba(44, 93, 99, 0.12);
    border-radius: var(--modus-radius);
    background: #fff;
    box-shadow: var(--modus-shadow-soft);
}

/* Keep the legacy tokenization/model containers inside the unified method
 * narrative instead of rendering them as standalone paper/cream sections. */
body.modus-theme .method-flow > :is(#tokenization, #modelling) {
    position: relative;
    isolation: isolate;
    width: min(100%, 1100px);
    max-width: 1100px;
    margin: 72px auto 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.modus-theme .method-step-data > h2,
body.modus-theme .method-step-tokenization > h2,
body.modus-theme .method-step-modelling h2 {
    font-size: 1.75rem;
    line-height: 1.2;
}

body.modus-theme .method-flow > :is(#tokenization, #modelling)::before {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    content: "";
    transform: translateX(-50%);
    border-top: 0;
    background: var(--modus-paper);
}

body.modus-theme .method-flow > .method-step-modelling {
    margin-top: 64px;
}

body.modus-theme .method-flow > :is(#tokenization, #modelling) > h2,
body.modus-theme .method-flow > :is(#tokenization, #modelling) > p {
    max-width: none;
}

/* Match Modus' 960px reading column and Space Grotesk method titles while
 * keeping the existing interactive method figure and controls intact. */
body.modus-theme .method-flow {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4rem 24px;
}

body.modus-theme .method-flow-header {
    max-width: var(--modus-content);
    margin: 0 auto 4rem;
}

body.modus-theme .method-flow-header h1 {
    margin: 0 0 1.25rem;
    color: var(--modus-navy);
    font-family: var(--modus-heading-font);
    font-size: clamp(2rem, 3.7vw, 2.625rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.025em;
    white-space: normal;
}

body.modus-theme .method-flow-header p,
body.modus-theme .method-step-intro {
    font-family: var(--modus-ui-font) !important;
    font-size: 1rem;
    line-height: 1.72;
}

body.modus-theme .method-step-data {
    max-width: var(--modus-content);
}

body.modus-theme .method-step-data > h2,
body.modus-theme .method-step-tokenization > h2,
body.modus-theme .method-step-modelling h2 {
    color: var(--modus-navy);
    font-family: var(--modus-heading-font);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

body.modus-theme #generation-any-to-any {
    width: min(100%, var(--modus-wide-figure));
    max-width: var(--modus-wide-figure);
    margin: 2rem auto 0;
    padding: 0;
}

/* The reference grid is intentionally wider than the reading column. Keep
 * the surrounding generation copy constrained while giving the matrix the
 * same 950px table + detail-panel footprint as Modus. */
body.modus-theme #generation {
    padding-right: 16px;
    padding-left: 16px;
}

body.modus-theme #generation .any-to-any-wrap {
    width: min(100%, var(--modus-wide-figure));
    max-width: var(--modus-wide-figure);
}

body.modus-theme .a2a-main {
    width: 100%;
    min-width: 0;
}

body.modus-theme .a2a-hint {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 0.75rem;
    padding: 8px 13px;
    border: 1px solid rgba(184, 106, 57, 0.22);
    border-radius: 8px;
    background: rgba(184, 106, 57, 0.08);
    color: #7c4522;
    font-family: var(--modus-ui-font) !important;
    font-size: 0.88rem !important;
    font-style: normal;
    line-height: 1.5 !important;
    text-align: left !important;
}

body.modus-theme .a2a-hint i.lead {
    flex: 0 0 auto;
    margin-top: 3px;
    color: #b86a39;
    font-size: 0.98rem;
}

body.modus-theme .a2a-hint b {
    color: #6f3d1f;
    font-weight: 650;
}

body.modus-theme .any-to-any-figure {
    border: 1px solid rgba(44, 93, 99, 0.12);
    border-radius: var(--modus-radius);
    background: #fff;
    box-shadow: var(--modus-shadow-soft);
}

/* The matrix header follows Modus' corner/source/target treatment: each
 * target column gets its ground-truth input first, then the modality name,
 * with the separator immediately below the names. */
body.modus-theme .a2a-corner-label {
    display: flex;
    position: relative;
    align-self: stretch;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0;
    padding: 4px 8px;
    border-bottom: 0;
    color: #6b6b6b;
    font-family: var(--modus-ui-font);
    font-size: var(--a2a-label-font-size);
    line-height: 1.2;
    white-space: nowrap;
}

body.modus-theme .a2a-corner-source {
    color: #6b6b6b;
    font-weight: 400;
}

body.modus-theme .a2a-corner-target {
    color: var(--modus-navy);
    font-weight: 600;
}

body.modus-theme .a2a-gt-thumb {
    position: relative;
    width: var(--a2a-cell-size);
    height: var(--a2a-cell-size);
    align-self: center;
    justify-self: center;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
    pointer-events: none;
}

body.modus-theme .a2a-gt-thumb.cat-2d { background: var(--a2a-color-2d); }
body.modus-theme .a2a-gt-thumb.cat-3d { background: var(--a2a-color-3d); }
body.modus-theme .a2a-gt-thumb.cat-1d { background: var(--a2a-color-1d); }

body.modus-theme .a2a-gt-thumb img {
    position: absolute;
    top: var(--a2a-frame-width);
    left: var(--a2a-frame-width);
    width: calc(100% - var(--a2a-frame-width) * 2);
    height: calc(100% - var(--a2a-frame-width) * 2);
    padding: 0 !important;
    margin: 0;
    border-radius: 2px;
    background: #fff;
    display: block;
    object-fit: cover;
}

/* Caption and Metadata ground-truth panels use a DOM text block rather than
 * an image. Keep that block inside the same inset square as every other GT
 * thumbnail; without this rule the text's normal flow height expands to the
 * full paragraph and the 48px panel clips it away. */
body.modus-theme .a2a-gt-thumb--text .a2a-cell-text {
    position: absolute;
    top: var(--a2a-frame-width);
    left: var(--a2a-frame-width);
    width: calc(100% - var(--a2a-frame-width) * 2);
    height: calc(100% - var(--a2a-frame-width) * 2);
    padding: 2px 3px;
    box-sizing: border-box;
    border-radius: 1px;
    background: #fff;
    color: #1a1a1a;
    font-size: clamp(3.5px, calc(var(--a2a-cell-size) * 0.10), 7px);
    line-height: 1.1;
    overflow: hidden;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}

body.modus-theme .a2a-col-label {
    align-self: stretch;
    display: flex;
    position: relative;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 0;
    padding-bottom: 2px;
    top: -3px;
}

/* The divider is a real grid item in row 2 for both the source/target corner
 * and every GT target column. Anchoring all segments to the same track keeps
 * their vertical position identical at every viewport width and zoom level. */
body.modus-theme .a2a-header-separator {
    display: block;
    align-self: end;
    justify-self: stretch;
    width: 100%;
    height: 1px;
    margin: 0;
    background: rgba(44, 93, 99, 0.5);
    pointer-events: none;
    z-index: 1;
}

body.modus-theme .a2a-gt-thumb {
    overflow: visible;
    transform: translateY(-6px);
}

body.modus-theme .a2a-corner-source,
body.modus-theme .a2a-corner-target {
    position: relative;
    top: -6px;
}

/* Modus' matrix table fills its table column edge-to-edge.  The legacy
 * figure card keeps 16px of horizontal padding, which makes the dense grid
 * visibly narrower even when the outer 1500px breakout is matched.  Keep the
 * card chrome, but let the matrix use the full table width and inset only the
 * controls below it on the wide desktop layout. */
@media (min-width: 901px) {
    body.modus-theme .any-to-any-wrap .any-to-any-figure {
        padding-right: 0;
        padding-left: 0;
    }

    body.modus-theme .any-to-any-wrap .a2a-slider-row {
        padding-right: 16px;
        padding-left: 16px;
    }
}

body.modus-theme :is(
        .tokenization-slide,
        .transfers-slide
    )[data-position="active"] :is(
        .tokenization-slide-frame,
        .transfers-slide-frame
    ) {
    box-shadow: var(--modus-shadow-soft);
}

body.modus-theme .any-to-any-grid {
    scrollbar-color: rgba(44, 93, 99, 0.35) transparent;
}

body.modus-theme .any-to-any-grid .a2a-row-label {
    cursor: pointer;
}

/* Row/source hover follows Modus' focus treatment: fade unrelated rows and
 * keep the active source/target legible while the preview follows the pair. */
body.modus-theme .any-to-any-grid.has-row-hover .a2a-cell {
    opacity: 0.3;
}

body.modus-theme .any-to-any-grid.has-row-hover :is(
        .a2a-row-label,
        .a2a-input-thumb,
        .a2a-arrow,
        .a2a-gt-thumb,
        .a2a-col-label
    ) {
    opacity: 0.45;
}

body.modus-theme .any-to-any-grid.has-row-hover .a2a-cell:is(
        .a2a-row-active,
        .a2a-col-active
    ),
body.modus-theme .any-to-any-grid.has-row-hover :is(
        .a2a-row-label.a2a-row-active,
        .a2a-input-thumb.a2a-row-active,
        .a2a-arrow.a2a-row-active,
        .a2a-gt-thumb.a2a-col-active,
        .a2a-col-label.a2a-col-active
    ) {
    opacity: 1;
}

body.modus-theme .any-to-any-grid.has-row-hover .a2a-row-label.a2a-row-active,
body.modus-theme .any-to-any-grid.has-row-hover .a2a-col-label.a2a-col-active {
    color: var(--modus-navy);
    font-weight: 700;
}

body.modus-theme .any-to-any-grid.has-row-hover .a2a-input-thumb.a2a-row-active {
    outline: 2px solid var(--modus-navy);
    outline-offset: 2px;
}

body.modus-theme .any-to-any-grid.has-row-hover .a2a-cell.a2a-row-active.a2a-col-active {
    z-index: 2;
    transform: scale(1.08);
    box-shadow: inset 0 0 0 2px var(--modus-navy), 0 0 0 2px rgba(255, 255, 255, 0.88);
}

/* Source autoplay is intentionally row-only: the whole source row stays
 * readable while the currently cycled output cell is the only cell that gets
 * the stronger active keyline. */
body.modus-theme .any-to-any-grid.has-source-hover .a2a-cell {
    opacity: 0.3;
}

body.modus-theme .any-to-any-grid.has-source-hover :is(
        .a2a-corner-label,
        .a2a-gt-thumb,
        .a2a-col-label
    ) {
    opacity: 0.45;
}

body.modus-theme .any-to-any-grid.has-source-hover :is(
        .a2a-row-label.a2a-row-active,
        .a2a-input-thumb.a2a-row-active,
        .a2a-arrow.a2a-row-active,
        .a2a-cell.a2a-row-active
    ) {
    opacity: 1;
}

body.modus-theme .any-to-any-grid.has-source-hover .a2a-cell.a2a-row-active.is-active {
    z-index: 2;
    transform: scale(1.08);
    box-shadow: inset 0 0 0 2px var(--modus-navy), 0 0 0 2px rgba(255, 255, 255, 0.88);
}

body.modus-theme .any-to-any-grid [role="button"]:focus-visible,
body.modus-theme button:focus-visible,
body.modus-theme a:focus-visible,
body.modus-theme input:focus-visible {
    outline: 3px solid rgba(44, 93, 99, 0.34);
    outline-offset: 2px;
}

body.modus-theme .any-to-any-popup {
    border: 1px solid rgba(44, 93, 99, 0.18);
    border-radius: var(--modus-radius);
    background: #fff;
    box-shadow: 0 18px 48px rgba(20, 33, 61, 0.18);
}

body.modus-theme .a2a-slider-row,
body.modus-theme .tokenization-controls,
body.modus-theme .retrieval-buttons,
body.modus-theme .generation-buttons,
body.modus-theme .t2-qual-nav {
    gap: 0.55rem;
}

body.modus-theme input[type="range"] {
    accent-color: var(--omnidimm-slider-blue);
}

body.modus-theme :is(
        button.button,
        .tokenization-arrow,
        .tokenization-tab,
        .t2-mode-tab,
        .t2-nav-btn,
        .view-carousel-button,
        .a2a-export-button,
        .tokenization-media-pill
    ) {
    border-color: rgba(44, 93, 99, 0.18);
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    color: var(--modus-navy);
    font-family: var(--modus-ui-font);
    font-weight: 600;
}

body.modus-theme :is(
        button.button,
        .tokenization-arrow,
        .tokenization-tab,
        .t2-mode-tab,
        .t2-nav-btn,
        .view-carousel-button,
        .a2a-export-button
    ):hover {
    border-color: rgba(44, 93, 99, 0.34);
    background: var(--modus-mint);
    color: var(--modus-teal-dark);
}

body.modus-theme :is(
        .tokenization-tab.is-active,
        .t2-mode-tab.is-active,
        .a2a-export-button
    ) {
    border-color: var(--modus-teal);
    background: var(--modus-teal);
    color: #fff;
}

body.modus-theme .tokenization-media-bar {
    color: var(--modus-navy);
}

body.modus-theme .tokenization-media-pill {
    overflow: hidden;
}

body.modus-theme .tokenization-media-button {
    color: var(--modus-navy);
}

body.modus-theme :is(.retrieval-card, .generation-card, .t2-obj-card, .transfer-card) {
    overflow: hidden;
    border: 1px solid rgba(44, 93, 99, 0.12);
    border-radius: var(--modus-radius);
    background: #fff;
    box-shadow: none;
}

body.modus-theme :is(.retrieval-card, .generation-card, .t2-obj-card, .transfer-card) h3,
body.modus-theme :is(.retrieval-card, .generation-card, .t2-obj-card, .transfer-card) h4 {
    color: var(--modus-navy);
}

body.modus-theme table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    color: var(--modus-ink);
    font-feature-settings: "tnum", "lnum";
}

body.modus-theme table th {
    padding: 0.7rem 0.75rem;
    border-bottom: 2px solid var(--modus-navy);
    color: var(--modus-navy);
    font-family: var(--modus-ui-font);
    font-weight: 700;
}

body.modus-theme table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--modus-hairline);
}

/* -------------------------------------------------------------------------- */
/* Quantitative 3D-baseline results                                           */
/*                                                                            */
/* These rules mirror Modus' benchmark table: a cream header, compact grid   */
/* rows, family pills, teal best cells, and a wide scroll-safe wrapper.       */
/* -------------------------------------------------------------------------- */

body.modus-theme .baseline-results {
    width: 100%;
    max-width: var(--modus-wide);
    margin: 3rem auto 0;
}

body.modus-theme .baseline-results-heading {
    max-width: var(--modus-content);
    margin: 0 auto;
}

body.modus-theme .baseline-results-eyebrow {
    margin: 0 0 0.35rem;
    color: var(--modus-muted);
    font-family: var(--modus-brand-font) !important;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}

body.modus-theme .baseline-results-heading h2 {
    margin-bottom: 0.8rem;
    text-align: center;
}

body.modus-theme .baseline-results-dataset {
    display: flex;
    max-width: var(--modus-wide);
    align-items: baseline;
    gap: 0.65rem;
    margin: 1.5rem auto 0.75rem;
    color: var(--modus-navy);
    font-family: var(--modus-ui-font);
}

body.modus-theme .baseline-results-dataset-kicker {
    color: var(--modus-muted);
    font-family: var(--modus-brand-font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.modus-theme .baseline-results-dataset strong {
    font-size: 1rem;
    font-weight: 750;
}

body.modus-theme .baseline-results-dataset span:last-child {
    color: var(--modus-muted);
    font-size: 0.86rem;
}

body.modus-theme .baseline-results-scroll {
    width: min(100%, var(--modus-wide-figure));
    max-width: var(--modus-wide-figure);
    margin: 0 auto;
    overflow-x: auto;
    border: 1px solid var(--modus-cream-line);
    border-radius: var(--modus-radius);
    background: #fff;
    box-shadow: var(--modus-shadow-soft);
    scrollbar-width: thin;
}

body.modus-theme .baseline-results-table {
    min-width: 1060px;
    overflow: hidden;
    border-radius: inherit;
    background: #fff;
    color: var(--modus-navy);
    font-feature-settings: "tnum", "lnum";
}

body.modus-theme .baseline-results-head,
body.modus-theme .baseline-results-row {
    display: grid;
    grid-template-columns: minmax(240px, 1.55fr) repeat(7, minmax(100px, 1fr));
    align-items: stretch;
}

body.modus-theme .baseline-results-head {
    background: var(--modus-cream);
    border-bottom: 1px solid var(--modus-cream-line);
}

body.modus-theme .baseline-results-row {
    min-height: 3.8rem;
    border-bottom: 1px solid #f0ebde;
    transition: background-color 140ms ease;
}

body.modus-theme .baseline-results-row:last-child {
    border-bottom: 0;
}

body.modus-theme .baseline-results-row:hover {
    background: #faf6ea;
}

body.modus-theme .baseline-results-row--group-start {
    border-top: 6px solid var(--modus-teal);
}

body.modus-theme .baseline-results-row--subgroup-start {
    border-top: 1px dashed #d6d0c2;
}

body.modus-theme .baseline-results-row--mv-start {
    border-top: 6px solid #c87932;
}

body.modus-theme .baseline-results-row.is-ours {
    background: var(--modus-mint);
    border-top: 2px solid var(--modus-teal);
}

body.modus-theme .baseline-results-row.is-ours:hover {
    background: #def0e6;
}

body.modus-theme .baseline-results-header-cell {
    min-width: 0;
    padding: 0.72rem 0.75rem;
    color: #444;
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.2;
}

body.modus-theme .baseline-results-header-cell:not(:first-child) {
    border-left: 1px solid var(--modus-cream-line);
    text-align: right;
}

body.modus-theme .baseline-results-header-cell .metric-direction {
    color: var(--modus-teal-dark);
    font-size: 0.75rem;
    font-weight: 800;
}

body.modus-theme .baseline-results-metric-name sub {
    font-size: 0.72em;
    line-height: 0;
    vertical-align: sub;
}

body.modus-theme .baseline-results-method {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.8rem;
    font-size: 0.86rem;
    font-weight: 600;
}

body.modus-theme .baseline-results-family {
    flex: 0 0 auto;
    padding: 0.17rem 0.42rem;
    border-radius: 4px;
    color: #fff;
    font-family: var(--modus-brand-font);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.modus-theme .baseline-results-family--nvs {
    background: var(--modus-teal);
}

body.modus-theme .baseline-results-family--3dgen {
    background: #d2863c;
}

body.modus-theme .baseline-results-family--3dgen-mv {
    background: #b86a39;
}

body.modus-theme .baseline-results-method-name {
    min-width: 0;
    line-height: 1.25;
    white-space: normal;
}

body.modus-theme .baseline-results-brand {
    color: var(--modus-navy);
    font-size: 1em;
    font-weight: 600;
    letter-spacing: -0.02em;
}

body.modus-theme .baseline-results-cell {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    padding: 0.7rem 0.72rem 0.78rem;
    border-left: 1px solid #f0ebde;
    color: var(--modus-navy);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: right;
}

body.modus-theme .baseline-results-cell.is-best {
    background: rgba(44, 93, 99, 0.06);
    color: var(--modus-teal-dark);
}

body.modus-theme .baseline-results-cell.is-best .baseline-results-value {
    font-weight: 850;
}

body.modus-theme .baseline-results-cell.is-second .baseline-results-value {
    font-weight: 750;
    text-decoration: underline;
    text-decoration-color: rgba(210, 134, 60, 0.7);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

body.modus-theme .baseline-results-row.is-ours .baseline-results-cell.is-best {
    background: rgba(44, 93, 99, 0.18);
}

body.modus-theme .baseline-results-caption {
    max-width: var(--modus-wide);
    margin: 0.7rem auto 0;
    color: var(--modus-muted);
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.45;
    text-align: left;
}

body.modus-theme .baseline-results-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin: 1rem auto 0;
}

body.modus-theme .baseline-results-tabs {
    display: flex;
    gap: 0.45rem;
}

body.modus-theme .baseline-results-tabs .tokenization-tab {
    min-width: 2.45rem;
    padding-right: 0.7rem;
    padding-left: 0.7rem;
}

/* -------------------------------------------------------------------------- */
/* Open model release                                                         */
/*                                                                            */
/* This follows Modus' open-release card anatomy while leaving the model     */
/* descriptions as simple, editable placeholders for the OmniDiMM release.  */
/* -------------------------------------------------------------------------- */

body.modus-theme #model-checkpoints {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4rem max(24px, calc((100vw - var(--modus-wide)) / 2));
    border-top: 1px solid #f0f0ed;
    border-radius: 0;
    background: var(--modus-paper);
    box-shadow: none;
}

body.modus-theme .model-release-wrap {
    width: min(100%, var(--modus-content));
    max-width: var(--modus-content);
    margin: 0 auto;
}

body.modus-theme .model-release-eyebrow {
    margin: 0 0 0.45rem;
    color: #8a8378;
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.modus-theme .model-release-title {
    margin: 0 0 0.5rem;
    color: var(--modus-navy);
    font-family: var(--modus-heading-font);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

body.modus-theme .model-release-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.1rem;
    margin-top: 1.1rem;
}

body.modus-theme .model-release-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 222px;
    flex-direction: column;
    overflow: hidden;
    padding: 22px 24px 24px;
    border: 1px solid #e6e8ec;
    border-radius: var(--modus-radius-lg);
    background: #fff;
    box-shadow: 0 10px 30px rgba(20, 33, 61, 0.06);
}

body.modus-theme .model-release-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--modus-teal), #4a8f86);
    content: "";
}

body.modus-theme .model-release-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--modus-teal);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.modus-theme .model-release-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--modus-teal);
    box-shadow: 0 0 0 3px rgba(44, 93, 99, 0.16);
}

body.modus-theme .model-release-name {
    margin: 13px 0 17px;
    color: var(--modus-navy);
    font-family: "Roboto Mono", monospace;
    font-size: clamp(15px, 1.7vw, 17px);
    font-weight: 600;
    letter-spacing: -0.01em;
    word-break: break-word;
}

body.modus-theme .model-release-description {
    min-height: 4.8rem;
    margin: 0;
    color: var(--modus-ink-soft);
    font-size: 0.9rem;
    line-height: 1.55;
}

body.modus-theme .model-release-button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 8px 16px;
    border: 1.5px solid var(--modus-teal);
    border-radius: 999px;
    background: transparent;
    color: var(--modus-teal);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition:
        background-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

body.modus-theme .model-release-hf {
    display: block;
    width: auto;
    height: 17px;
}

body.modus-theme .model-release-button:hover {
    background: var(--modus-teal);
    color: #fff;
    transform: translateY(-1px);
}

body.modus-theme .model-release-arrow {
    transition: transform 160ms ease;
}

body.modus-theme .model-release-button:hover .model-release-arrow {
    transform: translate(2px, -2px);
}

body.modus-theme .model-release-code {
    margin-top: 3rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--modus-cream-line);
}

body.modus-theme .model-release-code h3 {
    margin: 0 0 0.35rem;
    color: var(--modus-navy);
    font-family: var(--modus-heading-font);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

body.modus-theme .model-release-code p {
    margin: 0;
    color: var(--modus-muted);
    font-size: 0.9rem;
}

/* -------------------------------------------------------------------------- */
/* Open release section                                                       */
/*                                                                            */
/* Keep model checkpoints, tokenizer checkpoints, and code in one release    */
/* section while preserving the page-wide alternating paper/cream rhythm.    */
/* -------------------------------------------------------------------------- */

body.modus-theme #open-release {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--modus-cream-line);
    border-bottom: 1px solid var(--modus-cream-line);
    border-radius: 0;
    background: var(--modus-cream);
    box-shadow: none;
}

body.modus-theme .open-release-wrap,
body.modus-theme .open-release-subsection {
    width: 100%;
    max-width: none;
    margin: 0;
}

body.modus-theme #model-checkpoints {
    border-top: 0;
    border-bottom: 0;
    background: transparent;
}

body.modus-theme #tokenizer-checkpoints {
    padding-top: 4rem;
    border-top: 0;
    border-bottom: 0;
    background: transparent;
}

body.modus-theme .open-release-code {
    margin: 0;
    padding: 4rem max(24px, calc((100vw - var(--modus-wide)) / 2));
    border-top: 0;
    border-bottom: 0;
    background: transparent;
}

body.modus-theme .open-release-code > * {
    width: min(100%, var(--modus-content));
    margin-right: auto;
    margin-left: auto;
}

/* The legacy code rules set a fixed zero margin on h3/p with higher
 * specificity. Re-apply the release-column centering so Code lines up with
 * the Model and Tokenizer checkpoint headings. */
body.modus-theme .open-release-code > :is(h3, p) {
    margin-right: auto;
    margin-left: auto;
}

/* -------------------------------------------------------------------------- */
/* Open tokenizer release                                                     */
/*                                                                            */
/* Tokenizer cards keep the Modus release-card language, with a full-width     */
/* heading above the editable copy/link and modality preview halves.           */
/* -------------------------------------------------------------------------- */

body.modus-theme #tokenizer-checkpoints {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 3rem max(24px, calc((100vw - var(--modus-wide)) / 2)) 4rem;
    border-top: 0;
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.modus-theme .tokenizer-release-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.1rem;
    margin-top: 1.1rem;
}

body.modus-theme .tokenizer-release-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    column-gap: 1rem;
    min-height: 222px;
    align-items: stretch;
}

body.modus-theme .tokenizer-release-copy {
    display: contents;
}

body.modus-theme .tokenizer-release-card > .tokenizer-release-copy > .model-release-status {
    grid-column: 1 / -1;
    grid-row: 1;
}

body.modus-theme .tokenizer-release-card > .tokenizer-release-copy > .model-release-name {
    grid-column: 1 / -1;
    grid-row: 2;
}

body.modus-theme .tokenizer-release-card > .tokenizer-release-copy > .model-release-description {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
}

body.modus-theme .tokenizer-release-card > .tokenizer-release-copy > .tokenizer-release-button {
    grid-column: 1;
    grid-row: 4;
    align-self: end;
    margin-top: 1rem;
}

body.modus-theme .tokenizer-release-media {
    display: flex;
    grid-column: 2;
    grid-row: 3 / span 2;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding-left: 1rem;
}

body.modus-theme .tokenizer-release-media img {
    display: block;
    width: min(100%, 136px);
    aspect-ratio: 1 / 1;
    border-radius: var(--modus-radius-sm);
    object-fit: contain;
}

body.modus-theme .tokenizer-release-media--3d > img {
    padding: 3px;
    border: 3px solid color-mix(in srgb, var(--modality-label-3d) 48%, white);
    border-radius: 9px;
    background: #fff;
}

body.modus-theme .tokenizer-release-button {
    width: max-content;
}

body.modus-theme .tokenizer-release-media--split {
    position: relative;
    align-self: center;
    width: min(calc(100% - 1rem), 136px);
    height: auto;
    aspect-ratio: 1 / 1;
    margin-left: 1rem;
    padding: 3px;
    border: 3px solid color-mix(in srgb, var(--modality-label-2d) 46%, white);
    overflow: hidden;
    border-radius: var(--modus-radius-sm);
    background: #fff;
}

body.modus-theme .tokenizer-release-media--split .tokenizer-split-image {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: cover;
}

body.modus-theme .tokenizer-release-media--split .tokenizer-split-image--normals {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

body.modus-theme .tokenizer-release-media--split .tokenizer-split-image--mask {
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* Keep the final tokenizer row aligned despite its longer image-tokenizer name. */
body.modus-theme .tokenizer-release-card:nth-last-child(-n + 3) > .tokenizer-release-copy > .model-release-name {
    min-height: 3.2rem;
}

body.modus-theme .tokenizer-release-card:nth-last-child(-n + 3) > .tokenizer-release-media {
    align-items: flex-start;
}

body.modus-theme .tokenizer-release-card:nth-last-child(-n + 3) > .tokenizer-release-media--split {
    align-self: start;
}

/* -------------------------------------------------------------------------- */
/* Related VILAB work                                                        */
/*                                                                            */
/* The three cards use the same compact, bordered language as the release     */
/* cards while keeping the video preview and website links easy to scan.      */
/* -------------------------------------------------------------------------- */

body.modus-theme #related-works {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4rem max(24px, calc((100vw - var(--modus-wide)) / 2));
    border-top: 1px solid #f0f0ed;
    border-bottom: 1px solid #f0f0ed;
    border-radius: 0;
    background: var(--modus-paper);
    box-shadow: none;
}

body.modus-theme .related-works-wrap {
    width: min(100%, var(--modus-wide));
    max-width: var(--modus-wide);
    margin: 0 auto;
}

body.modus-theme .related-works-eyebrow {
    margin: 0 0 0.45rem;
    color: #8a8378;
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.modus-theme .related-works-title {
    margin: 0;
    color: var(--modus-navy);
    font-family: var(--modus-heading-font);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

body.modus-theme .related-works-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.1rem;
    margin-top: 1.1rem;
}

body.modus-theme .related-work-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 390px;
    flex-direction: column;
    overflow: hidden;
    padding: 22px 24px 24px;
    border: 1px solid #e6e8ec;
    border-radius: var(--modus-radius-lg);
    background: #fff;
    box-shadow: 0 10px 30px rgba(20, 33, 61, 0.06);
}

body.modus-theme .related-work-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--modus-teal), #4a8f86);
    content: "";
}

body.modus-theme .related-work-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--modus-teal);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.modus-theme .related-work-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--modus-teal);
    box-shadow: 0 0 0 3px rgba(44, 93, 99, 0.16);
}

body.modus-theme .related-work-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem;
    margin: 13px 0 17px;
    color: var(--modus-navy);
    font-family: var(--modus-heading-font);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

body.modus-theme .related-work-name-note {
    color: var(--modus-muted);
    font-size: 0.68em;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}

body.modus-theme .related-work-media {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 1rem;
    overflow: hidden;
    contain: paint;
    border: 1px solid var(--modus-cream-line);
    border-radius: var(--modus-radius);
    background: #f6f4ee;
}

body.modus-theme .related-work-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    clip-path: inset(0 round var(--modus-radius));
    object-fit: contain;
    object-position: center;
    background: #f6f4ee;
}

body.modus-theme .related-work-replay {
    position: absolute;
    right: 9px;
    bottom: 9px;
    margin: 0;
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 50%;
    background: rgba(20, 33, 61, 0.82);
    color: #fff;
    cursor: pointer;
    font-size: 0.78rem;
    box-shadow: 0 3px 9px rgba(20, 33, 61, 0.2);
    transition: background-color 150ms ease, transform 150ms ease;
}

body.modus-theme .related-work-replay:hover,
body.modus-theme .related-work-replay:focus-visible {
    background: var(--modus-teal);
    transform: translateY(-1px);
}

body.modus-theme .related-work-replay:focus-visible {
    outline: 2px solid var(--modus-teal);
    outline-offset: 2px;
}

body.modus-theme .related-work-description {
    min-height: 3.1rem;
    margin: 0;
    color: var(--modus-ink-soft);
    font-size: 0.9rem;
    line-height: 1.55;
}

body.modus-theme .related-work-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: auto;
    padding-top: 1.2rem;
}

body.modus-theme .related-work-links a {
    display: inline-flex;
    min-width: 0;
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.48rem 0.72rem;
    border: 1.5px solid var(--modus-teal);
    border-radius: 999px;
    color: var(--modus-teal);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.modus-theme .related-work-links a:hover {
    background: var(--modus-teal);
    color: #fff;
    transform: translateY(-1px);
}

body.modus-theme .related-work-links a span {
    font-size: 1em;
    transition: transform 160ms ease;
}

body.modus-theme .related-work-links a:hover span {
    transform: translate(2px, -2px);
}

body.modus-theme .related-work-card:first-child .related-work-links a {
    flex-basis: calc(50% - 0.28rem);
}

@media (max-width: 900px) {
    body.modus-theme .baseline-results {
        margin-top: 2.25rem;
    }

    body.modus-theme .baseline-results-scroll {
        width: 100%;
    }

    body.modus-theme .baseline-results-table {
        min-width: 1000px;
    }

    body.modus-theme .baseline-results-dataset,
    body.modus-theme .baseline-results-caption {
        width: 100%;
    }

    body.modus-theme #model-checkpoints {
        padding: 3.2rem 16px;
    }

    body.modus-theme #tokenizer-checkpoints {
        padding: 3.2rem 16px;
    }

    body.modus-theme .open-release-code {
        padding: 3.2rem 16px;
    }

    body.modus-theme .model-release-grid {
        grid-template-columns: 1fr;
    }

    body.modus-theme .tokenizer-release-grid {
        grid-template-columns: 1fr;
    }

    body.modus-theme #related-works {
        padding: 3.2rem 16px;
    }

    body.modus-theme .related-works-grid {
        grid-template-columns: 1fr;
    }

    body.modus-theme .related-work-card {
        min-height: 0;
    }
}

@media (max-width: 560px) {
    body.modus-theme .tokenizer-release-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    }

    body.modus-theme .tokenizer-release-media {
        grid-column: 1;
        grid-row: 5;
        justify-content: flex-start;
        padding-top: 1rem;
        padding-left: 0;
    }
}

body.modus-theme .bibtex-modal,
body.modus-theme .download-modal {
    border: 1px solid rgba(44, 93, 99, 0.18);
    border-radius: var(--modus-radius-lg);
    background: #fff;
    box-shadow: 0 24px 80px rgba(20, 33, 61, 0.24);
}

body.modus-theme .bibtex-modal pre,
body.modus-theme .download-modal pre {
    border: 1px solid var(--modus-hairline);
    border-radius: var(--modus-radius-sm);
    background: #f6f7f6;
}

body.modus-theme .download-modal-tab {
    border-radius: 999px;
    font-family: var(--modus-ui-font);
    font-weight: 600;
}

body.modus-theme .download-modal-tab.is-active {
    background: var(--modus-teal);
    color: #fff;
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */

body.modus-theme footer {
    min-height: 0;
    padding: 40px 24px;
    background: var(--modus-cream);
    color: var(--modus-ink-soft);
}

body.modus-theme footer .footer-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(100%, var(--modus-content));
    max-width: var(--modus-content);
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    gap: 0.25rem;
}

body.modus-theme footer .footer-copy {
    width: 100%;
}

body.modus-theme footer .footer-copy p:last-child {
    margin-bottom: 0;
}

body.modus-theme footer p {
    margin: 0 0 1rem;
    color: var(--modus-ink-soft);
    font-family: var(--modus-ui-font) !important;
    font-size: 0.85rem !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

body.modus-theme footer strong {
    font-weight: 700 !important;
}

body.modus-theme footer a {
    color: var(--modus-teal);
}

body.modus-theme footer .footer-snap-toggle {
    flex: 0 0 auto;
    align-self: flex-start;
    color: var(--modus-teal);
    font-family: var(--modus-ui-font);
    font-size: 0.78rem;
}

/* Legacy Clarity rules use a more specific container selector at desktop
 * widths. These parity selectors keep the Modus rhythm in force without
 * changing the custom OmniDiMM wordmark. */
body.modus-theme div.container.blog#first-content {
    padding: calc(var(--modus-nav-height) + 1.3rem) 24px 4rem !important;
    font-size: 1rem;
    line-height: 1.5;
}

body.modus-theme div.container.blog#first-content div.blog-title h1.title {
    padding: 0 !important;
    font-size: clamp(1.8rem, 2.25vw, 2.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.13 !important;
}

body.modus-theme div.container.blog#first-content div.blog-title p.author.author-list {
    padding: 0 !important;
    font-weight: 400 !important;
}

body.modus-theme div.container.blog p.text {
    margin-bottom: 0.9rem;
    padding: 0 !important;
    font-weight: 400 !important;
    line-height: 1.72 !important;
}

body.modus-theme div.container.blog ul.text li,
body.modus-theme div.container.blog ol.text li {
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.72 !important;
}

body.modus-theme :is(
        #summary,
        #generation,
        #tokenization,
        #modelling,
        #capabilities,
        #object-decomposition,
        #retrieval,
        #baselines,
        #transfers,
        .method-flow
    ) {
    font-size: 1rem;
    line-height: 1.5;
}

body.modus-theme #summary > h1,
body.modus-theme .method-flow-header h1,
body.modus-theme .method-step-data > h2,
body.modus-theme .method-step-tokenization > h2,
body.modus-theme .method-step-modelling h2 {
    padding: 0 !important;
}

body.modus-theme .method-flow > :is(#tokenization, #modelling) {
    width: min(100%, var(--modus-content)) !important;
    max-width: var(--modus-content) !important;
}

/* Direct section titles use Modus' 32px Inter scale; nested figure headings
 * stay at the 28px Space Grotesk scale above. */
body.modus-theme :is(
        #generation,
        #capabilities,
        #object-decomposition,
        #retrieval,
        #baselines,
        #transfers
    ) > :is(h1, h2) {
    font-family: var(--modus-ui-font);
    font-size: 2rem;
    line-height: 1.125;
    letter-spacing: -0.02em;
}

/* -------------------------------------------------------------------------- */
/* Back-to-top                                                                */
/* -------------------------------------------------------------------------- */

.modus-back-to-top {
    position: fixed;
    z-index: 900;
    right: 22px;
    bottom: 22px;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(44, 93, 99, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--modus-shadow);
    color: var(--modus-teal);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition:
        opacity 160ms ease,
        transform 160ms ease,
        background-color 160ms ease;
}

.modus-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.modus-back-to-top:hover {
    background: var(--modus-mint);
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    :root {
        --modus-nav-height: 60px;
    }

    body.modus-theme .navbar {
        padding: 0 14px;
    }

    body.modus-theme .navbar-content {
        justify-content: space-between;
    }

    body.modus-theme .burger-menu {
        display: block;
        order: 2;
        margin-left: auto;
    }

    body.modus-theme .navbar-links {
        position: static;
        display: flex;
        height: auto;
        min-height: var(--modus-nav-height);
        flex: 1 1 auto;
        padding: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    body.modus-theme .navbar-links > :not(:first-child) {
        display: none;
    }

    body.modus-theme .navbar-links > a:first-child {
        display: inline-flex;
        width: auto;
        min-height: var(--modus-nav-height);
        margin: 0;
    }

    body.modus-theme .navbar-links.active {
        position: fixed;
        z-index: 999;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        width: min(86vw, 350px);
        height: 100dvh;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow-y: auto;
        padding: 78px 20px 28px;
        border-left: 0;
        background: linear-gradient(
            to bottom,
            rgba(244, 165, 126, 0.95),
            rgba(242, 168, 183, 0.95)
        );
        box-shadow: -14px 0 48px rgba(20, 33, 61, 0.16);
    }

    body.modus-theme .navbar-links.active > * {
        display: block;
        width: 100%;
        min-width: 0 !important;
        margin: 0;
    }

    body.modus-theme .navbar-links.active > .navbar-section-divider {
        height: 1px;
        min-height: 1px;
        margin: 0.35rem 0;
        background: rgba(20, 33, 61, 0.14);
    }

    body.modus-theme .navbar-links.active > a:first-child {
        display: none;
    }

    body.modus-theme .navbar-links.active a,
    body.modus-theme .navbar-links.active .dropdown-trigger {
        display: flex;
        width: 100%;
        min-height: 44px;
        padding: 0.55rem 0.7rem;
        border-radius: 7px;
        color: var(--modus-navy);
        font-size: 0.9rem;
    }

    body.modus-theme .navbar-links.active .dropdown-content {
        position: static !important;
        display: block;
        width: 100%;
        padding: 0 0 0.35rem 0.8rem;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    body.modus-theme .navbar-links.active .dropdown-content a {
        min-height: 38px;
        padding: 0.45rem 0.65rem;
        color: #68706d;
        font-size: 0.79rem;
    }

    body.modus-theme.nav-open {
        overflow: hidden;
    }

    body.modus-theme #first-content {
        padding-top: calc(var(--modus-nav-height) + 2.4rem);
    }
}

@media (max-width: 768px) {
    body.modus-theme {
        font-size: 15px;
    }

    body.modus-theme #first-content {
        padding-right: 16px;
        padding-bottom: 3.3rem;
        padding-left: 16px;
    }

    body.modus-theme #first-content h1.title {
        font-size: clamp(1.7rem, 8vw, 2.2rem);
        line-height: 1.14;
    }

    body.modus-theme #first-content .author {
        font-size: 0.92rem;
        line-height: 1.68;
    }

    body.modus-theme #first-content .author-reference-break {
        display: none;
    }

    body.modus-theme #first-content .institution {
        gap: 0.55rem 0.8rem;
    }

    body.modus-theme #first-content .links {
        gap: 0.45rem;
    }

    body.modus-theme #first-content .button.icon,
    body.modus-theme #first-content a.button.icon {
        min-height: 36px;
        padding: 0.48rem 0.8rem;
        font-size: 0.78rem;
    }

    body.modus-theme :is(
            #summary,
            #generation,
            #tokenization,
            #modelling,
            #capabilities,
            #object-decomposition,
            #retrieval,
            #baselines,
            #transfers
        ) {
        padding: 3.2rem 16px;
    }

    body.modus-theme #summary > h1 {
        font-size: 2.15rem;
    }

    body.modus-theme h2 {
        font-size: 1.7rem;
    }

    body.modus-theme #generation-any-to-any {
        width: 100%;
        max-width: 100%;
    }

    body.modus-theme .any-to-any-figure {
        border-radius: 8px;
    }

    body.modus-theme .a2a-slider-row {
        align-items: stretch;
    }

    body.modus-theme .a2a-slider-group {
        min-width: min(220px, 100%);
    }

    body.modus-theme :is(.tokenization-controls, .retrieval-buttons, .generation-buttons) {
        flex-wrap: wrap;
    }

    body.modus-theme :is(.tokenization-carousel-controls, .t2-carousel-controls) {
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 0.5rem;
        overflow: hidden;
    }

    body.modus-theme .tokenization-tabs {
        display: flex;
        width: 0;
        max-width: 100%;
        flex: 1 1 auto;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: 10px;
        scrollbar-width: none;
    }

    body.modus-theme .tokenization-tabs::-webkit-scrollbar {
        display: none;
    }

    body.modus-theme .t2-stage {
        overflow: hidden;
    }

    .modus-back-to-top {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 480px) {
    body.modus-theme #first-content .institution-logo {
        max-height: 17px;
    }

    body.modus-theme .teaser-figure {
        border-radius: 0;
    }

    body.modus-theme .teaser-figure-toggle {
        top: 4px;
        right: 4px;
        width: 24px;
        height: 24px;
        font-size: 9px;
    }

    body.modus-theme :is(
            .tokenization-carousel,
            .modelling-figure-frame,
            .retrieval-panel,
            .generation-panel,
            .transfers-carousel,
            .partfield-explode,
            .partfield-parts
        ) {
        border-radius: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    body.modus-theme *,
    body.modus-theme *::before,
    body.modus-theme *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}