/* ===========================================================
   Are we really tilting? — project page
   =========================================================== */

@font-face { font-family: "Lato"; src: url("assets/fonts/Lato-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("assets/fonts/Lato-Bold.ttf")    format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("assets/fonts/Lato-Italic.ttf")  format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
    --text:           #1d2230;
    --text-soft:      #4a5168;
    --bg:             #ffffff;
    --bg-soft:        #f7f6fb;
    --border:         #e3e1ed;

    --lavender-bg:    #f1ecfa;
    --lavender-edge:  #c5b6e6;
    --lavender-text:  #432d7a;

    --naive:          #f27900;
    --damped:         #007a00;
    --analytic:       #1f49aa;
    --arxiv-red:      #b31b1b;

    --code-bg:        #f3f1ec;

    --content-width:  1240px;
    --figure-gap:     8px;
    --experiment-block-gap: 28px;
    --experiment-group-gap: 68px;
}

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

/* With Tailwind preflight disabled, restore the minimum needed for
   utility border classes (border-b, border-l, etc.) to actually
   render — default border-style would otherwise be `none`. */
*, *::before, *::after {
    border-width: 0;
    border-style: solid;
    border-color: var(--border);
}

html, body { overflow-x: hidden; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .carousel-track { transition: none !important; }
    .topnav { transition: none !important; }
}

:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--lavender-text);
    outline-offset: 3px;
    border-radius: 4px;
}

body {
    margin: 0;
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.62;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--analytic);
    text-decoration: none;
    border-bottom: 1px solid rgba(31, 73, 170, 0.18);
    transition: border-color 120ms ease;
}
a:hover { border-bottom-color: var(--analytic); }

p   { margin: 0 0 1em; }
em  { font-style: italic; }
strong { font-weight: 700; }

/* ============================ Top nav ============================ */

.topnav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-100%);
    transition: transform 220ms ease;
    will-change: transform;
}
.topnav.visible { transform: translateY(0); }

.topnav-inner {
    width: 100%;
    margin: 0;
    padding: 11px 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.topnav-title {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}
.topnav-title .topnav-authors {
    font-weight: 400;
    color: var(--text-soft);
}

.topnav-links {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.topnav-links a { color: var(--text-soft); font-size: 14px; border: none; }
.topnav-links a:hover { color: var(--text); }

.topnav-anchor {
    position: relative;
    padding: 2px 0;
}
.topnav-anchor.active {
    color: var(--lavender-text);
}
.topnav-anchor.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    background: var(--lavender-edge);
    border-radius: 2px;
}

.topnav-divider {
    width: 1px;
    height: 18px;
    background: var(--border);
    display: inline-block;
}

.link-pill {
    border: 1px solid var(--border) !important;
    border-radius: 999px;
    padding: 4px 12px;
    color: var(--text) !important;
    font-weight: 600;
}
.link-pill:hover { background: var(--bg-soft); }

/* ============================ Hero / authors ============================ */

.authors span:not(:last-child)::after { content: " · "; color: var(--text-soft); margin: 0 4px; }
.authors a { border-bottom: none; font-weight: 600; color: var(--text); }
.authors a:hover { color: var(--analytic); }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-weight: 600;
    font-size: 14.5px;
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.btn:hover  { background: var(--bg-soft); border-color: var(--lavender-edge); }
.btn:active { transform: translateY(1px); }

.btn-icon {
    width: 18px;
    height: 18px;
    color: var(--lavender-text);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.arxiv-mark {
    /* official two-tone arXiv logomark — has its own red/grey colors baked in.
       The viewBox is 17.73 × 24.27 (taller than wide); 14 × 19 keeps its
       aspect ratio while matching the visual weight of the GitHub mark
       (18 × 18) and the citation quote glyph (19 × 19). */
    width: 14px;
    height: 19px;
    object-fit: contain;
}

.quote-svg {
    width: 19px;
    height: 19px;
    color: var(--lavender-text);
}

/* ============================ Sections / notes ============================ */

/* Unified note: label that sits directly above a figure/carousel/table.
   Bottom margin is zero — the gap from the note's baseline to the
   figure below is driven entirely by the figure's own top margin, so
   every figure gets the same gap regardless of preceding element. */
.note {
    color: var(--text-soft);
    margin: 16px 0 0;
    line-height: 1.55;
}
.note strong { color: var(--text); }

/* Drop the trailing bottom margin on the LAST child of any section, so
   the section's padding-bottom alone controls the gap to the next h2.
   Without this, a section ending in a figure (mb 44) shows a larger
   inter-section gap than one ending in a paragraph (mb 17), even
   though the padding is identical. */
section > *:last-child { margin-bottom: 0; }

/* ============================ Callout list/paragraph spacing ============================
   (Box itself is styled inline with Tailwind utilities) */

.callout p:last-child { margin-bottom: 0; }
.callout ol { list-style: decimal; padding-left: 20px; margin: 6px 0 12px; }
.callout ul { list-style: disc;    padding-left: 20px; margin: 6px 0 12px; }
.callout li { margin-bottom: 6px; }

.formula-box {
    background: var(--lavender-bg);
    border: 1px solid var(--lavender-edge);
    border-radius: 8px;
    padding: 10px 18px;
    margin: 14px 0 18px;
    text-align: center;
    overflow-x: auto;
}
.formula-box mjx-container { margin: 0 !important; }

/* Each display-math container scrolls horizontally on its own when the
   equation is wider than the column. Without max-width:100%, MathJax's
   SVG would push the page width out; without overflow-x:auto, it would
   be silently clipped. Applies to both bare $$…$$ in body text and the
   .formula-box-wrapped equations. */
mjx-container[display="true"] {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Proof / derivation dropdowns */
.proof-drop {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0;
    margin: 14px 0 22px;
    background: var(--bg);
    overflow: hidden;
}
.proof-drop summary {
    cursor: pointer;
    list-style: none;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--lavender-text);
    background: var(--bg-soft);
    border-bottom: 1px solid transparent;
    transition: background 120ms ease;
    user-select: none;
}
.proof-drop summary::-webkit-details-marker { display: none; }
.proof-drop summary::before {
    content: "▸ ";
    display: inline-block;
    margin-right: 6px;
    transition: transform 120ms ease;
    color: var(--lavender-edge);
}
.proof-drop[open] summary::before { transform: rotate(90deg); }
.proof-drop[open] summary { border-bottom-color: var(--border); }
.proof-drop summary:hover { background: var(--lavender-bg); }
.proof-drop > div {
    padding: 14px 18px 16px;
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
}
.proof-drop > div p { margin: 10px 0; }
.proof-drop > div mjx-container { margin: 12px 0 !important; }

/* ============================ Carousel ============================ */
/*
  Structure:
    .carousel
      .carousel-shell      grid: prev | viewport | next  (all aligned to image)
        button.prev
        .carousel-viewport overflow:hidden
          .carousel-track  flex of slides
        button.next
      .carousel-dots       sits BELOW shell, in normal flow

  The prompt keeps a fixed slot and is pinned to the bottom of that slot, so
  image rows start at the same vertical position across slides. The script
  measures the active image band and sets --carousel-arrow-top so arrows
  align with the images rather than the full slide height.
*/

.carousel {
    position: relative;
    /* Asymmetric: small gap above to sit close to the label (16px),
       generous space below to separate it from the next block (44px). */
    margin: 16px 0 44px;
    min-width: 0;
    --carousel-arrow-top: 150px;
}

.carousel-shell {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: start;
    column-gap: 12px;
}

/* Single-slide carousels have no prev/next buttons — let viewport span full width */
.carousel.single-slide .carousel-shell {
    grid-template-columns: minmax(0, 1fr);
}

.carousel-viewport {
    overflow: hidden;
    border-radius: 10px;
    min-width: 0;
    background: transparent;
    touch-action: pan-y;
    /* Be the slides' offsetParent so Embla measures slide.offsetLeft
       relative to the viewport (0 for slide 0). Without this, the
       offsetParent climbs up to .carousel (position: relative) and the
       grid offset to the viewport column leaks into Embla's transform,
       chopping the first ~48px off slide 0 on desktop. */
    position: relative;
}

/* .carousel-track is Embla's container — Embla drives transform/animation
   itself, so don't set a CSS transition on it. */
.carousel-track {
    display: flex;
    will-change: transform;
}
.carousel-track img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.slide {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
}
.slide > img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    margin: 0 auto;
}

.slide figcaption {
    margin-top: 12px;
    font-size: 14.5px;
    color: var(--text-soft);
    text-align: center;
    max-width: 760px;
    line-height: 1.5;
}

/* arrows */
.carousel-btn {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 36px; height: 36px;
    font-size: 22px; line-height: 1;
    color: var(--text);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    user-select: none;
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
    padding: 0;
    margin-top: var(--carousel-arrow-top);
}
.carousel-btn:hover  { background: var(--bg-soft); border-color: var(--lavender-edge); }
.carousel-btn:active { transform: scale(0.94); }

/* dots sit directly below the carousel caption */
.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 0 0;
    pointer-events: none;
}
.carousel-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(67, 45, 122, 0.22);
    cursor: pointer;
    pointer-events: auto;
    transition: width 220ms ease, background 220ms ease;
}
.carousel-dots button:hover { background: rgba(67, 45, 122, 0.45); }
.carousel-dots button.active {
    width: 24px;
    background: var(--lavender-text);
}

.carousel-counter {
    display: none;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* ============================ Cover slide ============================ */

.cover-slide { padding: 0 12px; }

/* Prompt above a cover/experiment slide. Takes its natural height —
   if slides have different prompt lengths, the JS sync re-centers
   the arrows on each slide's image strip. */
.cover-prompt {
    font-style: italic;
    color: var(--text-soft);
    text-align: center;
    font-size: 15px;
    margin: 0 0 12px;
    line-height: 1.4;
    text-wrap: balance;
}

.cover-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}

.cover-cell { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cover-cell img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    border: none;
    display: block;
}

.cover-label {
    margin-top: 8px;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.01em;
}
.cover-unguided { color: #333; }
.cover-guided   { color: var(--naive); }
.cover-damped   { color: var(--damped); }

/* Hero carousel: no margins — the hero handles its own spacing. */
.hero-carousel-wrap .carousel,
.min-w-0.w-full .carousel { margin: 0; }
#cover-carousel { margin: 0; }

/* ============================ 5-col experiment slides ============================ */

.five-col-slide { padding: 0; }

/* Prompt above an experiment slide. Takes its natural height —
   JS recenters the arrows on each slide's image strip when the
   active slide changes, so we don't need to enforce equal heights. */
.exp-prompt {
    font-style: italic;
    color: var(--text-soft);
    text-align: center;
    font-size: 16px;
    margin: 0 auto 12px;
    line-height: 1.35;
    padding: 0 12px;
    max-width: 820px;
    text-wrap: balance;
}
.prompt-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    width: min(100%, 920px);
    font-size: inherit;
    line-height: 1.28;
}
.prompt-arrow {
    color: var(--lavender-text);
    font-style: normal;
    font-size: 20px;
    line-height: 1;
}
.prompt-pair span:not(.prompt-arrow) {
    text-wrap: balance;
}

@media (min-width: 721px) {
    .market-prompt {
        width: min(100%, 960px);
        max-width: 960px;
    }

    .market-prompt .prompt-pair {
        grid-template-columns: minmax(0, 1.45fr) auto minmax(0, 0.85fr);
        width: 100%;
    }
}

.five-col-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.five-col-row .cover-cell {
    flex: 0 0 calc((100% - 4 * 10px) / 5);
    min-width: 0;
}
.five-col-row .cover-cell img { aspect-ratio: 1 / 1; }

.exp-caption {
    margin: 12px auto 0;
    font-size: 14.5px;
    color: var(--text-soft);
    text-align: center;
    max-width: 820px;
    line-height: 1.5;
    padding: 0 8px;
    /* No display:flex here — caption text needs to wrap freely so long
       captions (e.g. the FLUX mode-selection one) aren't clipped. */
}

/* ============================ Mode-selection 4 method rows × 6 image cells ============================ */

.ms-slide {
    --ms-label-col: 138px;
    padding: 0;
    min-width: 0;
    width: 100%;
}

/* Column headers row spans the same grid as ms-method below */
.ms-col-headers {
    display: grid;
    grid-template-columns: var(--ms-label-col) repeat(3, minmax(0, 1fr));
    column-gap: 14px;
    width: 100%;
    max-width: 1100px;
    margin: 4px auto 6px;
}
.ms-col-label {
    text-align: center;
    font-size: 17px;
    font-weight: 400;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Each method = label + a 6-cell row */
.ms-method {
    display: grid;
    grid-template-columns: var(--ms-label-col) minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 8px;
    min-width: 0;
}
.ms-row-label {
    text-align: right;
    font-size: 17px;
    font-weight: 400;
    padding-right: 4px;
    line-height: 1.2;
}
.ms-cells {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    min-width: 0;
}
.ms-cells > img {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

/* Per-method best-of-N labels — only visible on mobile */
.ms-pair-labels { display: none; }

/* ============================ Figure captions (containers handled by Tailwind) ============================ */

figure figcaption {
    font-size: 14.5px;
    color: var(--text-soft);
    margin: 12px auto 0;
    line-height: 1.5;
    text-align: center;
    max-width: 900px;
}

.triple {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 18px 0;
}
.triple figure { margin: 0; text-align: center; min-width: 0; }
.triple img { width: 100%; height: auto; border-radius: 6px; }
.triple figcaption { font-size: 13px; color: var(--text-soft); margin-top: 6px; line-height: 1.4; }

/* ============================ Checkerboard: figure stacked above table ============================ */

.cb-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 16px auto 44px;
    max-width: 1000px;
}
.cb-figure { margin: 0; min-width: 0; text-align: center; }
.cb-figure img { width: 100%; height: auto; border-radius: 6px; margin: 0; }
.cb-figure figcaption {
    font-size: 13.5px;
    color: var(--text-soft);
    margin-top: 10px;
    line-height: 1.45;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.cb-table { font-size: 14px; min-width: 0; max-width: 720px; margin: 0 auto; width: 100%; }
.cb-table-caption { font-size: 13.5px; color: var(--text-soft); margin: 0 0 8px; line-height: 1.45; text-align: center; }
.cb-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cb-table table { width: 100%; min-width: 360px; border-collapse: collapse; background: var(--bg); border-radius: 6px; overflow: hidden; }
.cb-table th, .cb-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.cb-table th {
    font-weight: 700;
    border-top: 2px solid var(--text);
    border-bottom: 1px solid var(--text);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cb-table tbody tr:last-child td { border-bottom: 2px solid var(--text); }
.cb-table tbody tr.row-highlight { background: var(--lavender-bg); }
.cb-table tbody tr.row-highlight td { font-weight: 700; }

/* ============================ BibTeX / Citation ============================ */

.bibtex-wrap {
    position: relative;
}

.bibtex {
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
    padding-right: 56px;
    font-family: "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 13.5px;
    line-height: 1.55;
    overflow-x: auto;
    color: var(--text);
    margin: 0;
}

.bibtex-copy {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.bibtex-copy .icon { width: 16px; height: 16px; }
.bibtex-copy .icon-copy        { display: block; }
.bibtex-copy .icon-check       { display: none;  }
.bibtex-copy.copied .icon-copy { display: none;  }
.bibtex-copy.copied .icon-check{ display: block; }
.bibtex-copy:hover {
    background: var(--bg-soft);
    border-color: var(--lavender-edge);
    color: var(--text);
}
/* While "copied", only the icon swaps — the button itself looks identical
   to its resting state, so the click feels transient rather than a sticky
   highlighted toggle. */
.bibtex-copy.copied { color: var(--damped); }

/* ============================ Responsive ============================ */

/* Hide section anchors at tablet/narrow-desktop widths to avoid topnav crowding;
   keep just the title and the Paper/Code pills. */
@media (max-width: 1080px) {
    .topnav-anchor,
    .topnav-divider { display: none; }
}

@media (max-width: 720px) {
    body { font-size: 16px; }

    /* Top nav: hide the section anchors and the divider on phones;
       keep just the title + Paper/Code pills. */
    .topnav-inner { padding: 10px 16px; }
    .topnav-links { gap: 10px; }
    .topnav-anchor,
    .topnav-divider { display: none; }
    .topnav-title { font-size: 13.5px; }
    .topnav-title .topnav-authors { display: none; }

    .triple { grid-template-columns: 1fr; }
    .gmm-triple {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    .gmm-triple figcaption {
        font-size: 11.5px;
        line-height: 1.25;
    }

    /* Cover slide: smaller prompt + tighter labels */
    .cover-slide  { padding: 0; }
    .cover-row    { gap: 5px; }
    .cover-label  { font-size: 13px; margin-top: 6px; }
    .cover-prompt {
        font-size: 13.5px;
        margin-bottom: 10px;
        padding: 0 4px;
    }

    /* 5-method comparison on mobile: 2 columns × 3 rows. The 5th cell
       (the "Damped (ours)" result) spans both columns and is centered
       at the same image size — visually intentional emphasis on our
       method rather than an orphaned cell. */
    .five-col-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        max-width: 100%;
    }
    .five-col-row .cover-cell { flex: none; }
    .five-col-row .cover-cell:nth-child(5) {
        grid-column: 1 / -1;
        width: calc((100% - 6px) / 2);
        justify-self: center;
    }
    .five-col-row .cover-cell .cover-label {
        font-size: 13px;
    }
    .exp-prompt {
        font-size: 14.5px;
        line-height: 1.32;
        margin-bottom: 10px;
        padding: 0 4px;
    }
    .exp-caption  { font-size: 13px; padding: 0 4px; }

    /* Arrows are useless at this size — hide them and rely on swipe + dots. */
    .carousel-shell { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
    .carousel-btn { display: none; }
    .carousel-counter { display: inline-block; }
    .carousel-dots { padding-top: 12px; }
    .carousel-dots button {
        width: 10px; height: 10px;
        /* Larger invisible tap target */
        position: relative;
    }
    .carousel-dots button::after {
        content: "";
        position: absolute;
        inset: -8px;
    }
    .carousel-dots button.active { width: 26px; }

    .slide { padding: 4px 0; }

    /* Hero buttons: slightly tighter on mobile */
    .btn { padding: 9px 14px; font-size: 14px; }

    /* Bibtex copy button: smaller on mobile */
    .bibtex { padding-right: 48px; font-size: 12.5px; }
    .bibtex-copy { width: 28px; height: 28px; }
    .bibtex-copy .icon { width: 14px; height: 14px; }

    /* Mode-selection on mobile:
         - hide the slide-level column headers (they only fit the desktop grid)
         - each method becomes a label on top + 3 cols × 2 rows of images
         - per-method best-of-N labels appear above the image grid
    */
    .ms-col-headers { display: none; }
    .ms-method {
        grid-template-columns: 1fr;
        margin-bottom: 18px;
    }
    .ms-row-label {
        text-align: center;
        padding: 0 0 5px;
        font-size: 15.5px;
        font-weight: 700;
    }
    .ms-pair-labels {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        margin-bottom: 4px;
    }
    .ms-pair-labels span {
        text-align: center;
        font-size: 12.5px;
        font-weight: 400;
        color: var(--text-soft);
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
    /* HTML order is bo1_a, bo1_b, bo2_a, bo2_b, bo4_a, bo4_b. With
       grid-auto-flow: column, items fill column-by-column so:
         row 1 = bo1_a, bo2_a, bo4_a
         row 2 = bo1_b, bo2_b, bo4_b */
    .ms-cells {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr 1fr;
        grid-auto-flow: column;
        gap: 4px;
    }

    /* Tables: scroll horizontally rather than squish */
    .cb-table-scroll { margin: 0 -4px; padding: 0 4px; }

    /* Formula boxes can have wide TeX — give a horizontal escape hatch */
    .formula-box { padding: 8px 12px; font-size: 13.5px; }
}