/* RefCraft's paper-inspired identity: pale blue ink, ruled sections, reference composition. */
:root {
  --ink: #203950;
  --blue: #366ba3;
  --muted: #5b7085;
  --line: #d5e2ee;
  --soft: #f2f7fc;
  --paper: #fff;
  --wash: #edf5fc;
}
::selection { background: #c9e2f8; color: #173c60; }
.site-header { height: 55px; background: #f6faff; border-bottom: 1px solid #d0e0ef; }
.nav-inner { gap: 22px; }
.site-header .brand { display: inline-flex; align-items: center; gap: 9px; color: #264d71; font-size: 19px; }
.brand svg { width: 22px; height: 22px; stroke: #6595bf; stroke-width: 1.6; }
.site-header .brand:hover { color: #366ba3; }
.site-header nav a { color: #516a81; font-size: 12px; }
.site-header nav a:hover, .site-header nav a[aria-current] { color: #245d94; }
.site-header nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

.paper-masthead { background: var(--wash); border-bottom: 1px solid #c5dced; position: relative; }
.paper-masthead::before { content: ''; position: absolute; top: 0; left: 0; width: 25%; height: 3px; background: #86b4dc; }
.paper-header { width: min(1180px, calc(100% - 80px)); max-width: 1180px; padding: 33px 0 25px; text-align: left; }
.masthead-grid { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 32px; align-items: center; }
.paper-header h1 { margin: 0; max-width: none; color: var(--ink); }
.paper-name { display: block; color: #24486b; font: 700 108px/1.08 var(--heading); letter-spacing: -6px; margin-bottom: 16px; }
.craft-word { color: #5486b6; }
.paper-subtitle { display: block; color: #233e57; font: 700 38px/1.23 var(--heading); letter-spacing: -1.3px; }
.paper-header .title-break { display: block; }
.composition-mark { margin: 6px 0 0; min-width: 0; }
.composition-mark svg { width: 100%; height: auto; stroke-linecap: butt; stroke-linejoin: round; }
.composition-mark .guide { stroke: #c5dced; stroke-width: .8; stroke-dasharray: 3 4; }
.composition-mark .reference-sheet { fill: #fafdff; stroke: #89aecd; stroke-width: 1; }
.composition-mark .output-sheet { fill: #fff; stroke: #6897bf; stroke-width: 1.3; }
.composition-mark circle { fill: #9fbfd9; stroke: none; }
.composition-mark .browser-rule { stroke: #bdd3e4; stroke-width: 1; }
.composition-mark .content-line { stroke: #c3d6e6; stroke-width: 2; }
.composition-mark .ref-fill-a { fill: #a5c4df; stroke: none; }
.composition-mark .ref-fill-b { fill: #d9e8f5; stroke: none; }
.composition-mark .ref-fill-c { fill: #c1d8eb; stroke: none; }
.composition-mark .sample-a { stroke: #85adcd; stroke-width: 3; }
.composition-mark .composition-arrow { stroke: #648fb3; stroke-width: 1; stroke-dasharray: 3 2; }
.composition-mark text { fill: #526f89; stroke: none; font: 10px var(--mono); }
.composition-mark figcaption { margin: 3px 0 0; text-align: center; font: 10px var(--mono); color: #526f89; }
.paper-header .authors { display: grid; grid-template-columns: repeat(5, max-content); justify-content: start; gap: 2px 22px; margin: 25px 0 0; max-width: none; font-size: 14px; }
.paper-header .authors>span { color: #3b6288; }
.paper-header sup { color: #456e93; }
.paper-header .affiliations { justify-content: start; max-width: none; margin: 10px 0 0; color: #536e86; font-size: 11px; gap: 3px 18px; }
.paper-header .author-notes { color: #526e86; font-size: 10px; margin: 7px 0 16px; }
.paper-header .resource-links { justify-content: start; gap: 8px; margin-bottom: 18px; max-width: none; }
.paper-header .resource { color: #315d84; border: 1px solid #b8d0e5; border-radius: 4px; background: #ffffff94; min-height: 38px; padding: 8px 14px; font-size: 12px; }
.paper-header .resource:hover { background: #deedf9; border-color: #89b1d3; }
.paper-header .resource.primary { background: #416f9c; border-color: #416f9c; color: #fff; }
.paper-header .resource.primary:hover { background: #2e608f; }
.paper-header .resource.unavailable { color: #526e88; border-color: #c4d9ea; background: transparent; }
.paper-header .resource small { color: #506f89; border-color: #b8cfe1; }
.paper-header .paper-deck { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 5px 25px; padding-top: 14px; border-top: 1px solid #c6dcec; margin: 0; color: #4d6c86; font-size: 11px; line-height: 1.7; }
.deck-facts { font-variant-numeric: tabular-nums; }
.deck-facts i { font-style: normal; color: #6588a7; padding: 0 5px; }

.section { padding-top: 39px; }
.section-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.section-heading::after { content: ''; flex: 1; min-width: 18px; height: 1px; background: #cbddeb; margin-left: 8px; }
.section-index { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; color: #426d96; border: 1px solid #c5dced; background: #eff6fc; font: 11px var(--mono); }
.section .section-heading h2 { font-size: 33px; line-height: 1.2; letter-spacing: -1px; margin: 0; color: #264767; }
.section-intro { color: #526a80; font-size: 15px; }
.result-highlights { border: 0; border-block: 1px solid #cbdeed; padding: 17px 0 18px; gap: 0; margin: 23px 0 25px; background: #f3f8fd; border-radius: 0; }
.result-highlights>div, .result-highlights>div:last-child { padding: 0 25px; border: 0; background: none; }
.result-highlights>div+div, .result-highlights>div:last-child { border-left: 1px solid #d2e2ee; }
.result-highlights p:first-child { color: #59758e; font-size: 11px; font-weight: 400; margin-bottom: 8px; letter-spacing: .01em; }
.result-highlights>div>strong { font: 600 38px/1.1 var(--body); letter-spacing: -1.6px; color: #3a729f; margin-bottom: 7px; }
.result-highlights strong>span { color: #56738e; font-size: 11px; letter-spacing: 0; }
.result-highlights p:last-child { color: #4e6981; font-size: 12px; }
.results-chart { padding: 20px 23px 16px; border: 1px solid #c6daeb; border-top: 3px solid #98bddd; border-radius: 0; background: #f2f7fc; }
.chart-heading h3 { font-size: 18px; color: #2e5274; }
.chart-heading>span { color: #59778f; }
.refcraft-pareto { --pareto-blue: #3d79ac; background: transparent; }
.refcraft-pareto .pareto-gridline { stroke: #d8e5f0; }
.refcraft-pareto .pareto-dot { fill: #8aa4bc; }
.refcraft-pareto .pareto-point.is-frontier .pareto-dot { fill: #fff; stroke: #3d79ac; stroke-width: 2.5; }
.refcraft-pareto .pareto-frontier-line { stroke: #4f86b5; stroke-width: 2; opacity: 1; }
.refcraft-pareto .pareto-direct-label { stroke: #f2f7fc; fill: #516c84; }
.refcraft-pareto .pareto-point.is-active .pareto-direct-label { fill: #255c8c; }
.refcraft-pareto .pareto-tick { fill: #5a7288; }
.refcraft-pareto .pareto-legend .pareto-hint { color: #5a7288; }
.refcraft-pareto .pareto-readout { padding: 10px 13px; border: 1px solid #d5e3ee; background: #fff; border-radius: 2px; }
.refcraft-pareto .pareto-model-name { color: #366b96; }
.refcraft-pareto .pareto-model-status { color: #5c748a; }
.chart-footnote { color: #57738b; }
.leaderboard-heading h3 { font-size: 22px; color: #2c4e6f; }
#leaderboard #leaderboard-count { color: #5c748a; }
#leaderboard #leaderboard-views { background: #f0f6fc; border-color: #c7dcea; border-radius: 4px; }
#leaderboard #leaderboard-views button[aria-pressed=true] { background: #dcebf7; color: #2d618e; border-color: #b3cee3; box-shadow: none; }
#leaderboard .lb-scroll-region { border-color: #c7dbe9; border-radius: 3px; border-top: 2px solid #8bb1d2; }
#leaderboard-table.refcraft-leaderboard .lb-column-groups th { background: #e5f0f9; color: #4c6a83; }
#leaderboard-table.refcraft-leaderboard .lb-column-groups th+th { border-color: #cadde9; }
#leaderboard-table.refcraft-leaderboard .lb-column-labels th { background: #eaf3fa; color: #355b7a; border-color: #c3d8e8; }
#leaderboard-table.refcraft-leaderboard .lb-column-labels button:hover,
#leaderboard-table.refcraft-leaderboard th[aria-sort=ascending] button,
#leaderboard-table.refcraft-leaderboard th[aria-sort=descending] button { color: #1e5c8c; }
#leaderboard-table.refcraft-leaderboard .lb-sort-arrow,
#leaderboard-table.refcraft-leaderboard .lb-column-unit { color: #526e86; }
#leaderboard-table.refcraft-leaderboard .lb-model-row.is-even { --lb-row-bg: #f8fbfe; }
#leaderboard-table.refcraft-leaderboard .lb-model-row.is-chart-selected { --lb-row-bg: #eff6fc; }
#leaderboard-table.refcraft-leaderboard .lb-model-row.is-expanded { --lb-row-bg: #e7f1fa; }
#leaderboard-table.refcraft-leaderboard .lb-model-row:hover { --lb-row-bg: #edf5fc; }
#leaderboard-table.refcraft-leaderboard .lb-model-row .lb-rank-cell { color: #5f778b; }
#leaderboard-table.refcraft-leaderboard .lb-model-button { color: #345e81; }
#leaderboard-table.refcraft-leaderboard .lb-number { color: #2e5e84; }
#leaderboard-table.refcraft-leaderboard .lb-best-value { color: #235982; }
#leaderboard-table.refcraft-leaderboard .lb-overall-track { background: #e4eff7; height: 6px; }
#leaderboard-table.refcraft-leaderboard .lb-overall-track>span { background: #9dbfda; }
#leaderboard-table.refcraft-leaderboard .lb-model-row.is-chart-selected .lb-overall-track>span,
#leaderboard-table.refcraft-leaderboard .lb-model-row.is-expanded .lb-overall-track>span { background: #629ac5; }
#leaderboard-table.refcraft-leaderboard .lb-detail-row { background: #f4f8fc; }
#leaderboard-table.refcraft-leaderboard .lb-component-track>span { background: #6899bf; }
#leaderboard-table.refcraft-leaderboard .lb-component:nth-child(2) .lb-component-track>span { background: #84aece; }
#leaderboard-table.refcraft-leaderboard .lb-component:nth-child(3) .lb-component-track>span { background: #487da6; }
#leaderboard-table.refcraft-leaderboard .lb-detail-note { color: #5a7288; }

#abstract { width: min(1180px, calc(100% - 80px)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; border-block: 1px solid #d1e1ee; padding: 28px 0 30px; }
#abstract .section-heading { align-items: center; justify-content: center; margin: 0; }
#abstract .section-heading h2 { font-size: 28px; line-height: 36px; }
#abstract .section-heading::after { display: none; }
.abstract-text { font-size: 14px; line-height: 1.85; color: #435e75; margin: 0; }
.benchmark-statistics { background: #f1f7fc; border: 1px solid #d5e4ef; padding: 20px 23px; }
.compact-table th, .compact-table td { border-color: #d5e3ed; }
.benchmark-protocol>h3, .dataset-summary h3 { color: #2c5679; }
.benchmark-protocol .score-definitions>div>strong { color: #5182ad; }
.benchmark-protocol .equation { color: #355e80; }
.method-details summary { color: #39698f; }
.analysis-columns { gap: 38px; }
.analysis-columns h3 { color: #345f83; }
.ablation-table { border-color: #8cadc8; }
.ablation-table thead { background: #edf5fc; }
.ablation-table td strong { color: #366e9b; }
.validation-note { border-top-color: #cbdfea; background: #f3f8fc; padding: 18px 20px; }
.validation-note h3 { color: #386a90; }
#examples { border-top: 0; margin-top: 8px; padding-top: 36px; }
.example-gallery { gap: 16px; }
.example-gallery button { border-radius: 3px; border: 1px solid #d0e0ed; background: #f7fbff; }
.example-gallery button[aria-selected=true] { border-color: #8ab4d5; background: #eaf3fb; box-shadow: inset 0 -2px #679cc4; }
.example-gallery button[aria-selected=true] .gallery-preview { border-color: #a1c3df; }
.gallery-preview { border: 0; border-bottom: 1px solid #d5e3ee; border-radius: 2px 2px 0 0; }
.gallery-label { padding: 10px 12px 13px; }
.gallery-label b { color: #315d7e; font-size: 14px; }
.gallery-label small { color: #587a94; }
.gallery-open { border-color: #c3d9e9; color: #36698e; }
.example-gallery button[aria-selected=true] .gallery-open { background: #477ba4; border-color: #477ba4; }
.case-heading h3 { font-size: 21px; color: #315d7f; }
#live-browser { border-color: #bad4e7; box-shadow: none; }
.live-toolbar, .live-footer { background: #edf5fb; border-color: #cbdfea; }
.live-title { color: #386888; }
.live-title i { background: #689fc9; }
.viewport-controls button[aria-pressed=true] { color: #2b628b; background: #dcecf7; border-color: #b8d3e6; }
.case-inspector h4 { color: #365f7e; }
.case-inspector li::marker { color: #5787ad; font-weight: 600; }
.reference-image { border-color: #c4dae9; }
.image-label { background: #eff6fc; color: #426983; }
.citation-box { background: #f2f7fc; border-color: #cddfeb; }
.citation-actions { background: #e9f3fb; border-bottom-color: #cddfeb; }
.site-footer { border-top-color: #c4dbea; }

@media(max-width:1200px) {
  .masthead-grid { grid-template-columns: minmax(0, 1fr) 210px; gap: 24px; }
  .paper-name { font-size: 96px; }
  .paper-subtitle { font-size: 33px; letter-spacing: -1px; }
}
@media(max-width:1000px) {
  .masthead-grid { grid-template-columns: minmax(0, 1fr) 150px; gap: 20px; }
  .paper-name { font-size: 88px; }
  .paper-subtitle { font-size: 30px; }
  .paper-header .title-break { display: none; }
  .composition-mark figcaption { font-size: 8px; }
}
@media(max-width:800px) {
  .paper-header { width: calc(100% - 40px); padding: 28px 0 23px; }
  .masthead-grid { grid-template-columns: 1fr; }
  .composition-mark { display: none; }
  .paper-name { font-size: 84px; letter-spacing: -4.6px; margin-bottom: 13px; }
  .paper-subtitle { font-size: 33px; line-height: 1.25; letter-spacing: -.9px; }
  .paper-header .authors { font-size: 13px; gap: 2px 18px; }
  .paper-header .affiliations { font-size: 11px; }
  .section .section-heading h2 { font-size: 30px; }
  .result-highlights>div,.result-highlights>div:last-child { padding-inline: 17px; }
  .result-highlights>div>strong { font-size: 35px; }
  .result-highlights p:first-child { font-size: 10px; }
  .result-highlights p:last-child { font-size: 11px; }
  .results-chart { padding: 17px 16px 13px; }
  .chart-heading h3 { font-size: 17px; }
  #abstract { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 16px; padding-block: 26px; }
  #abstract .section-heading { margin: 0; }
  .gallery-label b { font-size: 13px; }
}
@media(max-width:600px) {
  .site-header { height: 49px; }
  .nav-inner { gap: 8px; }
  .site-header .brand { font-size: 16px; gap: 5px; }
  .brand svg { width: 18px; height: 18px; }
  .site-header nav { gap: 13px; }
  .site-header nav a { font-size: 10px; }
  .site-header nav a[href="#analysis"], .site-header nav a[href="#citation"] { display: none; }
  .paper-header { width: calc(100% - 32px); padding: 25px 0 21px; }
  .paper-name { font-size: 68px; line-height: 1.1; letter-spacing: -3.6px; margin-bottom: 16px; }
  .paper-subtitle { font-size: 28px; line-height: 1.22; letter-spacing: -.65px; }
  .paper-header .authors { display: flex; flex-wrap: wrap; font-size: 12px; gap: 3px 15px; margin-top: 21px; }
  .paper-header .affiliations { font-size: 10px; gap: 3px 12px; }
  .paper-header .author-notes { font-size: 10px; margin-bottom: 16px; }
  .paper-header .resource-links { gap: 7px; }
  .paper-header .resource { font-size: 10px; min-height: 35px; padding: 7px 10px; }
  .paper-header .resource small { font-size: 8px; }
  .paper-header .paper-deck { font-size: 11px; gap: 6px; padding-top: 12px; }
  .deck-facts i { padding-inline: 2px; }
  .section { padding-top: 29px; }
  .section-heading { gap: 10px; margin-bottom: 16px; align-items: start; }
  .section-heading::after { display: none; }
  .section-index { width: 30px; height: 30px; font-size: 10px; margin-top: 1px; }
  .section .section-heading h2 { font-size: 27px; letter-spacing: -.7px; line-height: 1.2; }
  .section-intro { font-size: 13px; }
  .result-highlights { margin: 19px 0 21px; padding-block: 13px; }
  .result-highlights>div,.result-highlights>div:last-child { padding-inline: 10px; }
  .result-highlights>div>strong { font-size: 29px; letter-spacing: -1px; }
  .result-highlights p:first-child { font-size: 9px; line-height: 1.5; min-height: 28px; margin-bottom: 7px; }
  .result-highlights p:last-child { font-size: 10px; }
  .result-highlights strong>span { font-size: 9px; display: block; margin: 4px 0 0; }
  .results-chart { padding: 14px 10px 11px; }
  .chart-heading h3 { font-size: 15px; }
  .chart-heading>span { font-size: 10px; }
  .refcraft-pareto .pareto-readout { padding: 9px 10px; }
  .leaderboard-heading h3 { font-size: 20px; }
  #abstract { width: calc(100% - 32px); margin-top: 28px; }
  #abstract .section-heading h2 { font-size: 27px; line-height: 32px; }
  #abstract .section-heading::after { display: none; }
  .benchmark-statistics { padding: 16px; }
  .validation-note { padding: 15px; }
  #examples { padding-top: 28px; }
  .gallery-label { padding: 9px 9px 11px; }
  .gallery-label b { font-size: 12px; }
  .case-heading h3 { font-size: 18px; }
}
@media(max-width:360px) {
  .site-header nav { gap: 10px; }
  .paper-name { font-size: 61px; letter-spacing: -3.4px; }
  .paper-subtitle { font-size: 26px; }
  .section .section-heading h2 { font-size: 25px; }
  .section-index { width: 27px; height: 27px; }
  .result-highlights>div,.result-highlights>div:last-child { padding-inline: 8px; }
  .result-highlights>div>strong { font-size: 26px; }
}

/* Paper illustrations bring the project's own visual character into the page. */
.paper-name { display: flex; align-items: center; gap: 20px; }
.paper-mascot { display: block; flex: 0 0 auto; width: 142px; height: auto; max-width: none; transform-origin: 50% 80%; }
.section-index { border-radius: 9px 9px 9px 2px; }
.results-chart { border-radius: 9px; }
.dataset-overview { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 62px; margin-top: 25px; }
.domain-figure { width: 100%; max-width: 550px; margin: 0 auto; }
.domain-figure .figure-zoom, .dimension-figure .figure-zoom { border: 1px solid #d3e2ee; border-radius: 11px; padding: 15px 15px 10px; background: #fff; overflow: hidden; }
.domain-figure .figure-zoom:hover, .dimension-figure .figure-zoom:hover { border-color: #8eb7d5; }
.figure-open { display: block; width: fit-content; margin: 9px 0 0 auto; color: #437398; font: 11px/1.5 var(--body); }
.domain-figure figcaption, .dimension-figure figcaption { color: #536f87; font-size: 12px; line-height: 1.7; margin-top: 12px; }
.dataset-overview .benchmark-statistics { border-radius: 11px; padding: 25px 29px; background: #f0f7fc; }
.dataset-overview .dataset-summary h3 { font-size: 22px; margin-bottom: 19px; }
.dataset-overview .compact-table { font-size: 14px; }
.dataset-overview .compact-table th, .dataset-overview .compact-table td { padding-block: 10px; }
.dataset-overview .dataset-summary .small { font-size: 13px; line-height: 1.8; }
.evaluation-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); column-gap: 50px; margin-top: 31px; padding-top: 28px; border-top: 1px solid #d2e2ed; }
.evaluation-intro h3 { color: #2c5679; font-size: 22px; margin-bottom: 13px; }
.evaluation-intro p { color: #49667d; font-size: 14px; line-height: 1.8; margin: 0; }
.evaluation-layout .benchmark-protocol .score-definitions { margin-top: 0; padding-top: 0; border-top: 0; }
.evaluation-layout .benchmark-protocol .score-definitions>div>strong { font-size: 28px; }
.dimension-study { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(220px, .8fr); align-items: center; gap: 36px; margin: 25px 0 32px; }
.dimension-figure { min-width: 0; margin: 0; }
.dimension-note { border-left: 3px solid #b8d5e9; padding-left: 22px; }
.dimension-note h3 { color: #355e7e; font-size: 21px; margin-bottom: 12px; }
.dimension-note p { color: #506b83; font-size: 14px; line-height: 1.8; margin-bottom: 14px; }
.dimension-note p:last-child { margin-bottom: 0; }
.dimension-note strong { color: #2f628e; }
@media(prefers-reduced-motion:no-preference) {
  .paper-mascot { animation: mascot-greeting 1s ease-out 150ms; transition: transform 220ms ease; }
  .paper-name:hover .paper-mascot { transform: translateY(-3px) rotate(-5deg); }
  .paper-header .resource { transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; }
  .paper-header a.resource:hover { transform: translateY(-2px); }
  .domain-figure .figure-zoom, .dimension-figure .figure-zoom { transition: border-color 180ms ease, box-shadow 180ms ease; }
  .domain-figure .figure-zoom:hover, .dimension-figure .figure-zoom:hover { box-shadow: 0 5px 18px #426c8c10; }
}
@keyframes mascot-greeting {
  0%,100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-4px) rotate(-5deg); }
  65% { transform: translateY(-2px) rotate(3deg); }
}
@media(max-width:1100px) {
  .paper-mascot { width: 124px; }
  .dataset-overview { gap: 35px; }
  .dataset-overview .benchmark-statistics { padding: 21px; }
  .dataset-overview .compact-table { font-size: 13px; }
  .evaluation-layout { gap: 30px; }
  .dimension-study { grid-template-columns: minmax(0, 1.8fr) minmax(200px, .8fr); gap: 26px; }
}
@media(max-width:800px) {
  .paper-mascot { width: 118px; }
  .paper-name { gap: 18px; }
  .dataset-overview { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 22px; align-items: start; }
  .domain-figure .figure-zoom, .dimension-figure .figure-zoom { padding: 9px 9px 8px; }
  .dataset-overview .benchmark-statistics { padding: 18px; }
  .dataset-overview .dataset-summary h3 { font-size: 19px; }
  .dataset-overview .compact-table th, .dataset-overview .compact-table td { padding-block: 8px; }
  .dataset-overview .dataset-summary .small { font-size: 12px; }
  .evaluation-layout { grid-template-columns: 1fr; gap: 23px; }
  .evaluation-layout .benchmark-protocol .score-definitions>div { display: block; }
  .dimension-study { grid-template-columns: 1fr; gap: 20px; }
  .dimension-note { padding-left: 17px; }
}
@media(max-width:600px) {
  .paper-mascot { width: 74px; }
  .paper-name { gap: 12px; }
  .dataset-overview { grid-template-columns: 1fr; gap: 23px; margin-top: 21px; }
  .domain-figure { max-width: 430px; }
  .dataset-overview .benchmark-statistics { padding: 20px; }
  .dataset-overview .compact-table { font-size: 13px; }
  .dataset-overview .dataset-summary .small { font-size: 12px; }
  .domain-figure figcaption, .dimension-figure figcaption { font-size: 11px; }
  .figure-open { font-size: 10px; }
  .evaluation-layout { margin-top: 26px; padding-top: 24px; }
  .evaluation-intro h3 { font-size: 20px; }
  .evaluation-intro p { font-size: 13px; }
  .evaluation-layout .benchmark-protocol .score-definitions>div { display: flex; }
  .dimension-study { margin-block: 21px 26px; }
  .dimension-note h3 { font-size: 19px; }
  .dimension-note p { font-size: 13px; }
}
@media(max-width:360px) {
  .paper-name { font-size: 59px; gap: 8px; }
  .paper-mascot { width: 54px; }
}

/* Validation evidence takes the place of the former component/ablation section. */
.validation-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 25px; margin-top: 25px; }
.validation-card { min-width: 0; display: flex; flex-direction: column; padding: 26px 28px 22px; background: #f4f9fd; border: 1px solid #c8ddeb; border-top: 3px solid #8cb6d6; border-radius: 11px; }
.validation-card-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.validation-card-heading>svg { flex: 0 0 27px; width: 27px; height: 27px; stroke: #5f8eb3; stroke-width: 1.4; }
.validation-card-heading h3 { margin: 0; font-size: 23px; color: #2b5678; line-height: 1.3; }
.study-sample { display: flex; flex-wrap: wrap; gap: 7px 20px; font-size: 12px; line-height: 1.7; color: #56728a; margin: 0 0 23px; }
.study-sample strong { color: #365e7f; font-size: 15px; margin-right: 3px; }
.human-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 24px; padding: 20px 0; border-block: 1px solid #cedeeb; }
.human-metrics>div+div { border-left: 1px solid #cedeeb; padding-left: 22px; }
.metric-caption { display: block; font-size: 11px; line-height: 1.65; color: #58758d; margin-bottom: 5px; }
.agreement-value { color: #326c98; }
.agreement-value>strong { display: block; font: 600 52px/1.13 var(--body); letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.agreement-value>span { display: block; font-size: 12px; color: #3f6887; margin-top: 8px; line-height: 1.5; }
.agreement-value i { font-family: Georgia,serif; font-size: 15px; }
.human-metrics p { font-size: 11px; line-height: 1.65; color: #5a748a; margin: 7px 0 0; }
.validation-description { color: #486980; font-size: 14px; line-height: 1.8; margin-bottom: 17px; }
.agreement-breakdown { margin-bottom: 20px; font-size: 12px; }
.agreement-breakdown summary { color: #3a6c92; cursor: pointer; font-size: 12px; font-weight: 600; }
.agreement-breakdown>p { font-size: 11px; color: #576f84; line-height: 1.7; margin: 10px 0 0; }
.agreement-table-scroll { max-width: 100%; overflow-x: auto; margin-top: 15px; }
.agreement-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.agreement-table th, .agreement-table td { padding: 9px 8px; border-bottom: 1px solid #d3e1ec; font-weight: 400; }
.agreement-table th:first-child { text-align: left; padding-left: 0; }
.agreement-table thead th { vertical-align: top; color: #3b607d; font-size: 11px; }
.agreement-table thead small { display: block; font-size: 10px; line-height: 1.5; color: #5c748a; margin-top: 2px; }
.agreement-table tbody tr:last-child { font-weight: 600; color: #2d638b; }
.validation-citation { font-size: 10px; color: #5b748a; line-height: 1.75; margin: auto 0 0; }
.arena-source-label { margin: 0 0 24px; font-size: 12px; line-height: 1.7; }
.arena-source-label a { color: #476f8d; text-underline-offset: 3px; }
.arena-correlation { margin-bottom: 17px; padding-top: 4px; }
.arena-correlation .agreement-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px; }
.arena-correlation .agreement-value>strong { font-size: 65px; }
.arena-correlation .agreement-value>span { font-size: 13px; }
.ranking-comparison { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 13px 0; margin-bottom: 18px; border-block: 1px solid #cedeeb; font-size: 11px; color: #59758a; line-height: 1.75; }
.ranking-comparison strong { color: #385f7e; font-size: 12px; }
.ranking-comparison>span:last-child { text-align: right; }
.ranking-arrow { color: #789fbd; font-size: 24px; }
.arena-source-note { margin-top: 17px; padding-top: 13px; border-top: 1px solid #d3e1ec; font-size: 11px; line-height: 1.75; color: #597187; }
.arena-source-note p { margin-bottom: 6px; }
.arena-source-note a { font-size: 11px; color: #3b6a8e; }
@media(max-width:1100px) {
  .validation-grid { gap: 20px; }
  .validation-card { padding: 23px 22px 20px; }
  .validation-card-heading h3 { font-size: 21px; }
  .human-metrics { gap: 17px; }
  .human-metrics>div+div { padding-left: 17px; }
  .agreement-value>strong { font-size: 47px; }
}
@media(max-width:900px) {
  .validation-grid { grid-template-columns: 1fr; }
  .validation-card { padding: 25px; }
  .validation-card-heading h3 { font-size: 23px; }
  .human-metrics { gap: 25px; }
  .human-metrics>div+div { padding-left: 25px; }
  .agreement-value>strong { font-size: 52px; }
}
@media(max-width:600px) {
  .site-header nav a[href="#analysis"] { display: inline; }
  .site-header nav a[href="#benchmark"] { display: none; }
  .validation-grid { margin-top: 20px; gap: 20px; }
  .validation-card { padding: 21px 19px 18px; }
  .validation-card-heading { gap: 10px; margin-bottom: 12px; }
  .validation-card-heading>svg { width: 23px; height: 23px; flex-basis: 23px; }
  .validation-card-heading h3 { font-size: 20px; }
  .study-sample { font-size: 11px; gap: 4px 14px; margin-bottom: 18px; }
  .study-sample strong { font-size: 14px; }
  .human-metrics { gap: 15px; padding-block: 16px; margin-bottom: 19px; }
  .human-metrics>div+div { padding-left: 15px; }
  .metric-caption { font-size: 10px; }
  .agreement-value>strong { font-size: 45px; letter-spacing: -1.5px; }
  .agreement-value>span { font-size: 11px; }
  .human-metrics p { font-size: 10px; }
  .validation-description { font-size: 13px; }
  .agreement-table { font-size: 11px; }
  .agreement-table th, .agreement-table td { padding-inline: 5px; }
  .agreement-table thead th { font-size: 10px; }
  .agreement-table thead small { font-size: 9px; }
  .arena-source-label { font-size: 11px; margin-bottom: 19px; }
  .arena-correlation .agreement-value>strong { font-size: 59px; }
  .ranking-comparison { gap: 12px; }
}
@media(max-width:360px) {
  .validation-card { padding-inline: 15px; }
  .validation-card-heading h3 { font-size: 18px; }
  .human-metrics { gap: 12px; }
  .human-metrics>div+div { padding-left: 12px; }
  .agreement-value>strong { font-size: 40px; }
}

/* Proper mathematical typesetting, separated into the two scoring operations. */
@font-face {
  font-family: 'RefCraft Math';
  src: url('assets/fonts/dejavu-math.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.scoring-equations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  border: 1px solid #cfdfec;
  border-radius: 9px;
  overflow: hidden;
  background: #d9e6ef;
  margin-top: 4px;
}
.scoring-step { min-width: 0; padding: 15px 16px 10px; background: #f4f9fd; }
.scoring-label { display: flex; align-items: center; gap: 8px; color: #4a6d87; font: 600 11px/1.5 var(--body); }
.scoring-label>span { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #c8dceb; border-radius: 50%; color: #5682a2; font: 10px var(--body); background: #fff; }
.scoring-math { min-height: 83px; display: flex; align-items: center; justify-content: center; padding-block: 10px; }
.scoring-math math {
  margin: 0;
  font-family: 'RefCraft Math', math;
  font-size: 23px;
  font-weight: 400;
  font-style: normal;
  color: #2b4d67;
  math-style: normal;
}
.scoring-note { color: #536f86; font: 12px/1.8 var(--body); margin: 12px 0 0; }
@media(max-width:600px) {
  .scoring-step { padding: 13px 15px 8px; }
  .scoring-math { min-height: 79px; }
  .scoring-math math { font-size: 23px; }
  .scoring-note { font-size: 11px; line-height: 1.8; }
}
@media(max-width:360px) {
  .scoring-math math { font-size: 21px; }
}

/* Balanced reading hierarchy with moderate spacing and the original page margins. */
@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dm-sans-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root { --ink: #233247; --muted: #586574; --line: #dce2e9; --soft: #f7f8fa; --wash: #f1f7fc; --blue: #306b9f; }
body { font-size: 17px; line-height: 1.65; font-weight: 400; }
p { margin-bottom: 14px; }
.container, .nav-inner { width: min(1180px, calc(100% - 80px)); }
.site-header { height: 62px; background: #fff; border-color: #dfe5eb; }
.nav-identity { display: flex; align-items: center; gap: 16px; flex-shrink: 0; white-space: nowrap; }
.site-header .brand { font-size: 23px; color: #233e57; }
.site-header nav { gap: 22px; }
.site-header nav a { color: #4d5a6a; font-size: 15px; font-weight: 500; }
.paper-masthead { background: var(--wash); border-color: #d4e2ef; }
.paper-masthead::before { height: 2px; width: 18%; }
.paper-header { width: min(1180px, calc(100% - 80px)); max-width: 1180px; padding: 28px 0 22px; }
.masthead-grid { grid-template-columns: minmax(0, 1fr) 356px; gap: 16px 28px; align-items: start; }
.masthead-grid h1 { grid-column: 1; grid-row: 1; }
.masthead-grid .authors { grid-column: 1; grid-row: 2; margin-top: 0; }
.masthead-grid .composition-mark { grid-column: 2; grid-row: 1 / 3; }
.paper-name { font-size: 108px; line-height: 1.02; margin-bottom: 14px; }
.paper-mascot { width: 135px; }
.paper-subtitle { font-size: 34px; line-height: 1.25; letter-spacing: -1.1px; color: #23384c; }
.composition-mark { margin-top: 0; }
.composition-mark figcaption { font-size: 13px; margin-top: 6px; }
.paper-header .authors { font-size: 18px; font-weight: 500; gap: 3px 23px; margin-top: 0; line-height: 1.6; }
.paper-header .authors a { color: #315f88; text-decoration: underline; text-decoration-color: #a9c2d7; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.paper-header .authors a:hover { color: #184970; text-decoration-color: currentColor; }
.paper-header .affiliations { font-size: 14px; gap: 2px 16px; margin-top: 9px; color: #4f6273; line-height: 1.5; }
.paper-header .author-notes { font-size: 13px; font-weight: 400; margin: 6px 0 14px; color: #526274; line-height: 1.6; }
.paper-header .resource-links { gap: 9px; margin-bottom: 14px; padding-block: 8px; }
.paper-header .resource { min-height: 42px; padding: 8px 13px; font-size: 15px; font-weight: 500; border-color: #c8d6e2; background: #fff; border-radius: 5px; color: #324e68; gap: 7px; }
.paper-header .resource.primary { background: #305a7d; border-color: #305a7d; }
.paper-header .resource.unavailable { background: #ffffffb0; border-color: #cbd8e4; color: #526477; }
.paper-header .resource small { font-size: 12px; font-weight: 400; color: #66788a; }
.paper-header .resource.primary small { color: #e4eef7; border-color: #7f9bb3; }
.paper-header .resource svg { width: 19px; height: 19px; }
.resource .official-icon { width: 23px; height: 23px; object-fit: contain; flex: 0 0 auto; }
.resource .official-icon.huggingface-icon { width: 27px; height: 27px; margin-block: -2px; }
.paper-header .paper-deck { font-size: 14px; line-height: 1.6; padding-top: 12px; color: #4a6074; gap: 4px 18px; }
.section { padding-top: 36px; padding-bottom: 0; }
.section-heading { margin-bottom: 12px; gap: 12px; }
.section .section-heading h2 { color: #263d53; font-size: 34px; letter-spacing: -.8px; }
.section-index { background: #fff; border-color: #d2dde8; font-size: 12px; font-weight: 500; }
.section-heading::after { background: #d7e0e9; }
.section-intro { font-size: 17.5px; font-weight: 400; line-height: 1.65; color: #4e5d6e; margin-bottom: 18px; }
.result-highlights { background: transparent; border-color: #d7e0e8; padding-block: 16px; margin: 18px 0 20px; gap: 24px; }
.result-highlights>div, .result-highlights>div:last-child { padding-inline: 12px; }
.result-highlights>div:first-child { padding-left: 0; }
.result-highlights p:first-child { font-size: 14px; font-weight: 500; color: #536577; margin-bottom: 5px; }
.result-highlights>div>strong { font-size: 40px; margin-bottom: 4px; }
.result-highlights strong>span { font-size: 14px; }
.result-highlights p:last-child { font-size: 15px; color: #4f6071; line-height: 1.5; }
.results-chart { background: #fff; border: 1px solid #d7e1e9; border-top: 2px solid #94b8d7; padding: 16px 20px 14px; border-radius: 5px; }
.chart-heading { margin-bottom: 9px; }
.chart-heading h3 { font-size: 22px; color: #293f56; }
.chart-heading>span { font-size: 13px; color: #647385; }
.refcraft-pareto .pareto-gridline { stroke: #e5eaf0; }
.refcraft-pareto .pareto-direct-label { stroke: #fff; font-size: 14px; font-weight: 500; }
.refcraft-pareto .pareto-tick { font-size: 13px; fill: #5c6879; }
.refcraft-pareto .pareto-axis-title { font-size: 14px; font-weight: 500; }
.refcraft-pareto .pareto-legend { font-size: 14px; }
.refcraft-pareto .pareto-readout { border: 0; border-top: 1px solid #e0e5eb; padding: 10px 0 0; font-size: 15px; gap: 7px 18px; }
.refcraft-pareto .pareto-model-name { font-size: 17px; }
.refcraft-pareto .pareto-model-status { font-size: 13px; }
.chart-footnote, .table-note { font-size: 14px; line-height: 1.6; color: #647083; font-weight: 400; }
.leaderboard-heading { margin-top: 24px; }
.leaderboard-heading h3 { font-size: 25px; color: #293f56; }
#leaderboard #leaderboard-count { font-size: 14px; }
#leaderboard #leaderboard-views { background: #f7f8fa; border-color: #dce2e9; }
#leaderboard #leaderboard-views button { font-size: 15px; font-weight: 500; padding: 5px 12px; }
#leaderboard #leaderboard-views button[aria-pressed=true] { background: #fff; border-color: #aebfd0; }
.table-actions input { font-size: 15px; }
.download-link { font-size: 14px; font-weight: 500; }
#leaderboard-table.refcraft-leaderboard { font-size: 16px; min-width: 860px; }
#leaderboard-table.refcraft-leaderboard col.lb-col-name { width: 256px; }
#leaderboard-table.refcraft-leaderboard th, #leaderboard-table.refcraft-leaderboard td { padding-block: 10px; font-weight: 500; }
#leaderboard-table.refcraft-leaderboard .lb-column-groups th { background: #f7f8fa; font-size: 13px; color: #697485; padding-block: 6px 3px; }
#leaderboard-table.refcraft-leaderboard .lb-column-labels th { background: #f7f8fa; font-size: 14px; color: #35485d; padding-block: 5px 8px; }
#leaderboard-table.refcraft-leaderboard .lb-model-button { font-size: 16px; }
#leaderboard-table.refcraft-leaderboard .lb-rank-cell { font-size: 14px; }
#leaderboard-table.refcraft-leaderboard .lb-number { color: #2e4862; font-weight: 600; }
#leaderboard-table.refcraft-leaderboard .lb-best-value { font-weight: 800; }
#leaderboard-table.refcraft-leaderboard .lb-model-row.is-even { --lb-row-bg: #fafbfc; }
#leaderboard-table.refcraft-leaderboard .lb-model-row.is-chart-selected { --lb-row-bg: #f1f6fc; }
#leaderboard-table.refcraft-leaderboard .lb-detail-row { background: #fafbfd; }
#leaderboard-table.refcraft-leaderboard .lb-component-label { font-size: 16px; }
#leaderboard-table.refcraft-leaderboard .lb-detail-heading { font-size: 17px; }
#leaderboard-table.refcraft-leaderboard .lb-detail-note { font-size: 14px; }
.reproducibility { font-size: 15px; }
.validation-grid { gap: 24px; margin-top: 18px; align-items: start; }
.results-validation { margin-top: 28px; }
.results-validation .validation-grid { margin-top: 0; }
.validation-card { background: #fff; border-color: #d8e1e9; border-top: 2px solid #91b5d3; border-radius: 5px; padding: 22px 23px 20px; }
.validation-card-heading { margin-bottom: 12px; }
.validation-card-heading h3 { font-size: 25px; color: #2a455e; }
.study-sample { font-size: 15px; margin-bottom: 14px; }
.study-sample strong { font-size: 18px; }
.human-metrics { padding-block: 15px; margin-bottom: 16px; }
.metric-caption { font-size: 14px; color: #5b6a7c; }
.agreement-value>strong { font-size: 54px; }
.agreement-value>span { font-size: 15px; margin-top: 4px; }
.human-metrics p { font-size: 14px; line-height: 1.5; margin-top: 4px; }
.validation-description { font-size: 17px; line-height: 1.6; color: #4e5d6e; margin-bottom: 14px; }
.agreement-breakdown, .agreement-breakdown summary { font-size: 15px; }
.agreement-breakdown>p, .validation-citation { font-size: 13px; line-height: 1.6; font-weight: 400; }
.agreement-table { font-size: 15px; }
.agreement-table thead th { font-size: 14px; }
.agreement-table thead small { font-size: 12px; }
.arena-source-label { font-size: 15px; margin-bottom: 14px; }
.arena-correlation .agreement-value>strong { font-size: 57px; }
.ranking-comparison { font-size: 14px; margin-bottom: 14px; padding-block: 11px; }
.ranking-comparison strong { font-size: 15px; }
.arena-source-note, .arena-source-note a { font-size: 14px; line-height: 1.6; font-weight: 400; }
#abstract { width: min(1180px, calc(100% - 80px)); grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; padding-block: 24px; }
.abstract-text { font-size: 17.5px; line-height: 1.75; font-weight: 400; color: #425469; text-align: left; }
.dataset-overview { gap: 34px; margin-top: 20px; }
.dataset-overview .benchmark-statistics { background: #fff; border: 0; border-left: 1px solid #dce3ea; border-radius: 0; padding: 0 0 0 20px; }
.dataset-overview .dataset-summary h3 { font-size: 25px; margin-bottom: 14px; color: #2d435a; }
.dataset-overview .compact-table { font-size: 16px; margin-bottom: 14px; }
.dataset-overview .compact-table th { font-weight: 500; }
.dataset-overview .compact-table th, .dataset-overview .compact-table td { padding-block: 8px; }
.dataset-overview .dataset-summary .small { font-size: 15px; line-height: 1.6; color: #5b6c7d; }
.domain-figure .figure-zoom { padding: 6px; border-color: #e1e6ec; border-radius: 5px; }
.domain-figure figcaption { font-size: 14px; line-height: 1.6; font-weight: 400; margin-top: 10px; }
.figure-open { font-size: 14px; }
.evaluation-layout { margin-top: 26px; padding-top: 24px; column-gap: 34px; }
.evaluation-intro h3 { font-size: 24px; }
.evaluation-intro p { font-size: 17px; line-height: 1.65; color: #4e5d6e; }
.score-definitions { gap: 18px; }
.score-definitions p { font-size: 15px; line-height: 1.6; }
.score-definitions b { font-size: 16px; }
.scoring-step { background: #fff; padding: 12px 14px 10px; }
.scoring-label { font-size: 14px; }
.scoring-note { font-size: 14px; line-height: 1.6; }
.method-details summary { font-size: 16px; font-weight: 600; }
.construction-notes p { font-size: 16px; line-height: 1.65; }
#examples { padding-top: 32px; margin-top: 30px; }
.example-tools { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 14px; color: #657283; font-size: 14px; }
.example-gallery { gap: 14px; }
.example-gallery button { background: #fff; border-color: #d9e1e9; }
.example-gallery button[aria-selected=true] { background: #fff; border-color: #739abd; box-shadow: inset 0 -3px #547fa5; }
.gallery-label { padding: 11px 12px 12px; }
.gallery-label b { color: #304960; font-size: 18px; line-height: 1.4; }
.gallery-label>small { font-size: 14px; font-weight: 500; color: #687b8c; }
.gallery-label>span { font-size: 14px; color: #647486; }
.gallery-open { font-size: 13px; font-weight: 500; }
.gallery-label .gallery-score { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e2e7ed; padding-top: 6px; margin-top: 6px; color: #536478; gap: 3px; flex-wrap: wrap; }
.gallery-score strong { color: #2b506f; font-size: 20px; margin-left: 5px; font-variant-numeric: tabular-nums; }
.gallery-score small { font-size: 13px; }
.gallery-score em { font-style: normal; font-size: 12px; color: #76604d; padding: 1px 5px; border: 1px solid #ded5ca; border-radius: 3px; }
.case-heading { margin-block: 16px 9px; }
.case-heading h3 { font-size: 25px; color: #29465e; }
.case-heading>span { font-size: 14px; }
.case-score { border-block: 1px solid #d8e1e9; padding: 12px 0 11px; margin-bottom: 18px; }
.case-score-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; font-size: 14px; font-weight: 500; color: #52677b; }
.case-score-header small { font-size: 13px; font-weight: 500; margin-left: 8px; }
.score-source { font-size: 14px; font-weight: 500; color: #607285; }
.case-score-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0; gap: 16px; }
.case-score-metrics>div { border-left: 1px solid #e0e6ec; padding-left: 16px; }
.case-score-metrics>div:first-child { border-left: 0; padding-left: 0; }
.case-score-metrics dt { font-size: 14px; color: #5c6a7b; }
.case-score-metrics dd { margin: 1px 0 0; font-size: 30px; font-weight: 600; line-height: 1.3; letter-spacing: -.6px; font-variant-numeric: tabular-nums; color: #3b5067; }
.case-score-overall dd { color: #2e6b9c; }
.case-score-note { font-size: 13px; font-weight: 400; color: #637285; line-height: 1.6; margin: 9px 0 0; }
.case-score-note span { white-space: nowrap; }
.live-toolbar, .live-footer { background: #fafbfd; border-color: #dce4eb; font-size: 14px; }
.live-title, .viewport-controls button, #expand-demo, #reset-demo, #download-demo { font-size: 14px; font-weight: 500; }
.case-inspector h4 { font-size: 18px; margin-bottom: 10px; }
.case-inspector li { font-size: 16px; line-height: 1.6; margin-bottom: 8px; }
.case-inspector .image-label { background: #fff; font-size: 14px; }
.case-inspector h4 span { font-size: 14px; }
.case-brief { font-size: 17px; line-height: 1.65; }
.case-brief summary { font-size: 16px; }
.case-caption { font-size: 13px; color: #637285; }
.citation-box { background: #fafbfd; border-color: #dde4eb; }
.citation-actions { background: #f5f7f9; border-color: #dde4eb; }
.citation-actions a, .citation-actions button { font-size: 15px; }
.citation-box pre { font-size: 14px; line-height: 1.6; }
.site-footer { font-size: 14px; margin-top: 30px; }

.paper-header h1 { margin-bottom: 0; }
.composition-mark svg { display: block; }
.refcraft-pareto .pareto-legend .pareto-hint { font-size: 13px; font-weight: 500; }
.refcraft-pareto.is-narrow .pareto-point:not(.is-frontier):not(.is-active) .pareto-direct-label { display: none; }
.reproducibility summary { font-size: 15px; }
.case-brief pre { font-size: 15px; line-height: 1.65; }
.case-inspector .reference-credit, .live-footer button { font-size: 14px; }
.arena-correlation .agreement-value>span { font-size: 15px; }
.benchmark-protocol .score-definitions p { font-size: 15px; line-height: 1.6; }
#leaderboard-table.refcraft-leaderboard .lb-column-unit { font-size: 12px; }
#leaderboard-table.refcraft-leaderboard .lb-detail-heading small, #leaderboard-table.refcraft-leaderboard .lb-resources dt { font-size: 14px; }
#leaderboard-table.refcraft-leaderboard .lb-resources dd small { font-size: 12px; }
.arena-source-note { margin-top: 14px; padding-top: 14px; }
.agreement-breakdown { margin-top: 10px; }
.validation-citation { margin-top: 14px; }
.citation-section { padding-bottom: 24px; }

.example-gallery { margin-top: 14px; margin-bottom: 20px; }
.example-panel { padding-top: 0; }
.case-heading { margin-top: 0; }
.live-toolbar { flex-wrap: wrap; gap: 8px; padding: 9px 11px; }
.viewport-controls { flex-wrap: wrap; }
@media(min-width:1101px) { .example-workspace { grid-template-columns: minmax(0,1fr) 260px; gap: 23px; } }
@media(max-width:1300px) {
  .masthead-grid .authors { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .masthead-grid .composition-mark { grid-row: 1; }
}
@media(max-width:1200px) {
  .masthead-grid { grid-template-columns: minmax(0,1fr) 306px; gap: 24px; }
  .paper-name { font-size: 93px; gap: 15px; }
  .paper-mascot { width: 112px; }
  .paper-subtitle { font-size: 32px; }
  .paper-header .authors { font-size: 17px; gap: 3px 20px; }
}
@media(max-width:1000px) {
  .masthead-grid { grid-template-columns: minmax(0,1fr) 265px; gap: 20px; }
  .paper-name { font-size: 82px; letter-spacing: -4px; }
  .paper-mascot { width: 94px; }
  .paper-subtitle { font-size: 29px; }
  .paper-header .authors { display: flex; flex-wrap: wrap; gap: 2px 18px; }
  .site-header nav { gap: 17px; }
  .site-header nav a { font-size: 15px; }
  .validation-grid { gap: 20px; }
}
@media(max-width:800px) {
  .container, .nav-inner, .paper-header, #abstract { width: calc(100% - 40px); }
  .masthead-grid { grid-template-columns: minmax(0,1fr) 220px; gap: 15px; }
  .composition-mark { display: block; }
  .composition-mark figcaption { font-size: 12px; }
  .paper-name { font-size: 67px; gap: 11px; letter-spacing: -3px; }
  .paper-mascot { width: 76px; }
  .paper-subtitle { font-size: 27px; }
  .paper-header .authors { font-size: 17px; }
  .site-header nav { gap: 13px; }
  .site-header nav a[href="#citation"] { display: none; }
  .nav-identity { gap: 13px; }
  .section .section-heading h2 { font-size: 31px; }
  .section-intro { font-size: 17px; }
  .result-highlights p:first-child { font-size: 15px; }
  .result-highlights p:last-child { font-size: 15px; }
  .result-highlights>div>strong { font-size: 37px; }
  #abstract { grid-template-columns: 1fr; gap: 14px; }
  .dataset-overview { gap: 23px; }
  .dataset-overview .benchmark-statistics { padding-left: 18px; }
  .dataset-overview .compact-table { font-size: 16px; }
  .dataset-overview .dataset-summary h3 { font-size: 24px; }
  .gallery-label b { font-size: 18px; }
  .case-heading h3 { font-size: 24px; }
}
@media(max-width:600px) {
  body { font-size: 16.5px; }
  .container, .nav-inner, .paper-header, #abstract { width: calc(100% - 32px); }
  .site-header { height: 56px; }
  .site-header .brand { font-size: 21px; }
  .brand svg { width: 20px; height: 20px; }
  .nav-identity { gap: 8px; }
  .site-header nav { gap: 11px; }
  .site-header nav a { font-size: 13px; }
  .site-header nav a[href="#analysis"] { display: none; }
  .paper-header { padding: 24px 0 20px; }
  .masthead-grid { grid-template-columns: 1fr; gap: 14px; }
  .masthead-grid .composition-mark { grid-column: 1; grid-row: 2; }
  .masthead-grid .authors { grid-column: 1; grid-row: 3; margin-top: 0; }
  .paper-name { font-size: 68px; gap: 11px; margin-bottom: 10px; }
  .paper-mascot { width: 76px; }
  .paper-subtitle { font-size: 28px; line-height: 1.22; letter-spacing: -.75px; }
  .composition-mark { width: 235px; margin: 0 auto; }
  .composition-mark figcaption { font-size: 11px; }
  .paper-header .authors { font-size: 16.5px; gap: 4px 17px; margin-top: 12px; }
  .paper-header .affiliations { font-size: 14px; gap: 3px 13px; }
  .paper-header .affiliations>span { white-space: normal; }
  .paper-header .author-notes { font-size: 13px; line-height: 1.6; }
  .paper-header .resource { font-size: 14px; padding: 7px 10px; min-height: 40px; gap: 6px; }
  .paper-header .resource small { font-size: 12px; padding-left: 5px; }
  .paper-header .resource-links { gap: 7px; }
  .paper-header .paper-deck { font-size: 14px; }
  .section { padding-top: 30px; }
  .section .section-heading h2 { font-size: 29px; line-height: 1.25; }
  .section-heading { gap: 10px; }
  .section-index { width: 30px; height: 30px; font-size: 11px; }
  .result-highlights { grid-template-columns: 1fr; padding: 0; margin-block: 17px; }
  .result-highlights>div, .result-highlights>div:last-child { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 14px; padding: 13px 0; border-left: 0; }
  .result-highlights>div+div { border-top: 1px solid #e0e6ed; }
  .result-highlights p:first-child { font-size: 13px; min-height: 0; margin: 0; }
  .result-highlights>div>strong { grid-column: 2; grid-row: 1 / 3; font-size: 33px; margin: 0; text-align: right; align-self: center; }
  .result-highlights strong>span { font-size: 10px; margin-top: 1px; }
  .result-highlights p:last-child { font-size: 12px; margin: 0; }
  .results-chart { padding: 15px 12px 13px; }
  .chart-heading h3 { font-size: 20px; }
  .refcraft-pareto .pareto-direct-label { font-size: 11px; }
  .refcraft-pareto .pareto-tick { font-size: 12px; }
  .refcraft-pareto .pareto-axis-title { font-size: 13px; }
  .refcraft-pareto .pareto-readout { gap: 4px 10px; }
  .refcraft-pareto .pareto-model-name { font-size: 17px; }
  .refcraft-pareto .pareto-model-metrics { font-size: 14px; }
  .chart-footnote, .table-note { font-size: 14px; }
  #leaderboard #leaderboard-views button { font-size: 15px; padding-inline: 8px; }
  #leaderboard-table.refcraft-leaderboard { font-size: 16px; min-width: 820px; }
  #leaderboard-table.refcraft-leaderboard col.lb-col-name { width: 238px; }
  #leaderboard-table.refcraft-leaderboard .lb-model-button { font-size: 16px; gap: 7px; }
  #leaderboard-table.refcraft-leaderboard .lb-column-labels th { font-size: 14px; }
  .validation-card { padding: 18px 16px; }
  .validation-card-heading h3 { font-size: 23px; }
  .study-sample { font-size: 15px; gap: 3px 13px; }
  .metric-caption { font-size: 14px; }
  .agreement-value>strong { font-size: 47px; }
  .agreement-value>span { font-size: 14px; }
  .human-metrics p { font-size: 14px; line-height: 1.4; }
  .validation-description { font-size: 16px; }
  .agreement-table { font-size: 15px; }
  .agreement-table thead th { font-size: 13px; }
  .agreement-table thead small { font-size: 12px; }
  .arena-source-note, .arena-source-note a { font-size: 14px; }
  .abstract-text { font-size: 16.5px; line-height: 1.7; }
  .dataset-overview .benchmark-statistics { border-left: 0; border-top: 1px solid #dce3ea; padding: 14px 0 0; }
  .dataset-overview .compact-table { font-size: 16px; }
  .evaluation-intro p { font-size: 16px; }
  .score-definitions p { font-size: 15px; }
  .score-definitions b { font-size: 16px; }
  .scoring-label { font-size: 14px; }
  .scoring-note { font-size: 14px; }
  .example-tools { flex-wrap: wrap; font-size: 14px; }
  .example-gallery { gap: 11px; }
  .gallery-label { padding: 10px; }
  .gallery-label b { font-size: 17px; }
  .gallery-label>small, .gallery-label>span { font-size: 14px; }
  .gallery-open { font-size: 12px; padding: 5px 7px; }
  .gallery-label .gallery-score { flex-wrap: wrap; gap: 3px; }
  .gallery-score strong { font-size: 20px; }
  .gallery-score small { font-size: 12px; }
  .case-heading h3 { font-size: 23px; }
  .case-score-metrics { gap: 10px; }
  .case-score-metrics>div { padding-left: 10px; }
  .case-score-metrics dt { font-size: 14px; }
  .case-score-metrics dd { font-size: 28px; }
  .case-score-note { font-size: 13px; }
  .live-title, .viewport-controls button, #expand-demo, #reset-demo, #download-demo { font-size: 14px; }
  .case-inspector li { font-size: 16px; }
  .citation-box pre { font-size: 14px; }
  .chart-heading>span { font-size: 13px; }
}
@media(max-width:360px) {
  .site-header .brand { font-size: 20px; gap: 4px; }
  .brand svg { display: none; }
  .site-header nav { gap: 9px; }
  .paper-name { font-size: 60px; gap: 8px; }
  .paper-mascot { width: 58px; }
  .paper-subtitle { font-size: 26px; }
  .paper-header .authors { font-size: 16px; gap: 4px 14px; }
  .section .section-heading h2 { font-size: 28px; }
  .validation-card-heading h3 { font-size: 22px; }
  .human-metrics { gap: 10px; }
  .human-metrics>div+div { padding-left: 10px; }
  .agreement-value>strong { font-size: 43px; }
  .case-score-metrics { gap: 7px; }
  .case-score-metrics>div { padding-left: 7px; }
  .case-score-metrics dd { font-size: 22px; }
}

@media(max-width:500px) {
  .case-score-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 16px; }
  .case-score-metrics>div { border-left: 0; padding-left: 0; }
  .case-score-metrics>div:nth-child(even) { border-left: 1px solid #e0e6ec; padding-left: 16px; }
  .case-score-metrics>div:nth-child(n+3) { border-top: 1px solid #e0e6ec; padding-top: 9px; }
  .case-score-metrics dt { font-size: 14px; }
  .case-score-metrics dd { font-size: 28px; }
  .gallery-score>span { white-space: nowrap; }
  .gallery-score small { display: inline; }
}
@media(max-width:600px) {
  .result-highlights { grid-template-columns: 1fr; gap: 0; padding-block: 0; }
  .result-highlights>div, .result-highlights>div:last-child { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: center; border-right: 0; padding: 11px 0; }
  .result-highlights>div+div { border-top: 1px solid var(--line); }
  .result-highlights p:first-child { min-height: 0; margin-bottom: 0; font-size: 14px; line-height: 1.4; }
  .result-highlights>div>strong { grid-column: 2; grid-row: 1 / 3; font-size: 33px; margin: 0; text-align: right; }
  .result-highlights p:last-child { grid-column: 1; font-size: 14px; }
  .result-highlights strong>span { font-size: 12px; margin-top: 1px; }
  .refcraft-pareto .pareto-legend { font-size: 13px; gap: 8px 16px; }
  .refcraft-pareto .pareto-direct-label { font-size: 12px; }
  .case-score-header { flex-wrap: wrap; gap: 2px 12px; }
  .case-score-metrics dt { line-height: 1.4; }
  .case-brief pre { font-size: 15px; }
  .gallery-label b { overflow-wrap: anywhere; }
}

/* ============================================================================
   v19 — Banded rhythm, a narrower abstract measure, capability charts,
   a single agreement block, and motion. Appended as a final layer;
   earlier rules are left untouched.
   ========================================================================= */

:root {
  --band-tint: #f3f8fd;
  --band-edge: #e1ebf5;
  --accent-warm: #c2846c;
  --accent-warm-soft: #ddb3a0;
}

/* --- Abstract keeps a comfortable measure instead of the full column ----- */
#abstract .abstract-text {
  max-width: 880px; margin-inline: auto;
  line-height: 1.8; /* the wider measure needs a little more leading */
  text-align: justify;
  text-justify: inter-word;
  /* The 880px measure is wide enough that justification needs no hyphenation;
     word spacing stays even without breaking terms like "visual-reference-conditioned". */
}

/* --- Banded sections give the page a chapter rhythm ---------------------- */
.band { position: relative; }
.band-tint {
  background:
    radial-gradient(120% 70% at 12% 0%, #ffffff 0%, rgba(255,255,255,0) 62%),
    var(--band-tint);
  border-block: 1px solid var(--band-edge);
  margin-top: 50px;
  padding-bottom: 54px;
}
.band-tint > .section { margin-top: 0; padding-top: 44px; border-top: 0; }
.band-tint .results-chart,
.band-tint .capability-panel,
.band-tint .agreement-panel { background: #fff; }

/* --- Shared panel chrome ------------------------------------------------- */
.capability-panel, .agreement-panel {
  border: 1px solid #dde7f2; border-radius: 11px;
  padding: 25px 28px 24px; margin-top: 30px;
}
.panel-heading {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 20px; margin-bottom: 20px;
}
.panel-heading h3 { color: #28486a; font-size: 21px; letter-spacing: -.2px; margin: 0; }
.panel-heading > span { color: #6b7a8c; font-size: 12px; }
.panel-note { color: #76838f; font-size: 12px; line-height: 1.75; margin: 18px 0 0; }
.panel-note strong { color: #4f627a; }

/* --- Capability bars ----------------------------------------------------- */
.capability-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px 46px;
}
.capability-chart { margin: 0; min-width: 0; }
.capability-chart figcaption {
  color: #51667d; font: 600 12px/1.5 var(--body);
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 15px;
}
.bar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.bar-list li {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) 42px;
  align-items: center; gap: 13px;
}
.bar-label { color: #41566d; font-size: 13.5px; line-height: 1.4; }
.bar-label em { font-style: italic; color: #35536f; }
.bar-track {
  display: block; height: 9px; border-radius: 5px;
  background: #e8eef7; overflow: hidden; min-width: 30px;
}
.bar-fill {
  display: block; height: 100%; width: var(--bar); border-radius: 5px;
  background: linear-gradient(90deg, #9cbce4, #5480bd);
}
.bar-list li.is-low .bar-fill { background: linear-gradient(90deg, var(--accent-warm-soft), var(--accent-warm)); }
.bar-value {
  color: #2f4a6b; font: 600 13px/1 var(--body);
  text-align: right; font-variant-numeric: tabular-nums;
}
.bar-list li.is-low .bar-value { color: #a0634c; }
.chart-aside {
  color: #68788a; font-size: 12.5px; line-height: 1.75;
  margin: 18px 0 0; padding-top: 15px; border-top: 1px dashed #dde7f2;
}
.chart-aside em { font-style: italic; color: #4a6279; }

/* --- Agreement: one block, three headline numbers ------------------------ */
.agreement-panel { margin-top: 30px; }
.agreement-metrics {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 36px;
}
.agreement-metrics > div { padding-right: 30px; border-right: 1px solid #e4edf6; min-width: 0; }
.agreement-metrics > div:last-child { border-right: 0; padding-right: 0; }
.agreement-metrics strong {
  display: block; color: #27548f; font: 600 40px/1.05 var(--heading);
  letter-spacing: -1.4px; font-variant-numeric: tabular-nums;
}
.agreement-metrics > div > span {
  display: block; margin: 9px 0 5px; color: #3c5570; font: 600 13px/1.4 var(--body);
}
.agreement-metrics > div > span i { font-style: italic; }
.agreement-metrics p { color: #66768a; font-size: 12.5px; line-height: 1.65; margin: 0; }

/* --- Dataset stat row ---------------------------------------------------- */
.stat-row {
  list-style: none; margin: 0 0 22px; padding: 0 0 20px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 18px; border-bottom: 1px solid #dbe7f1;
}
.stat-row li { min-width: 0; }
.stat-row strong {
  display: block; color: #27548f; font: 600 31px/1.1 var(--heading);
  letter-spacing: -1px; font-variant-numeric: tabular-nums;
}
.stat-row span { display: block; margin-top: 4px; color: #62748a; font-size: 12.5px; line-height: 1.5; }

/* --- Scroll-aware header ------------------------------------------------- */
.site-header.is-scrolled { box-shadow: 0 1px 14px #24456812; border-bottom-color: #d8e3ee; }

/* --- Scroll reveal, counters, and micro-interactions --------------------- */
@media(prefers-reduced-motion:no-preference) {
  .js-reveal [data-reveal] {
    opacity: 0; transform: translateY(20px);
    transition: opacity .66s ease, transform .66s cubic-bezier(.22,.8,.3,1);
  }
  .js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }

  .js-reveal .stat-row li,
  .js-reveal .agreement-metrics > div {
    opacity: 0; transform: translateY(14px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1);
  }
  .js-reveal [data-reveal].is-revealed li,
  .js-reveal [data-reveal].is-revealed .agreement-metrics > div { opacity: 1; transform: none; }
  .js-reveal [data-reveal].is-revealed li:nth-child(2),
  .js-reveal [data-reveal].is-revealed .agreement-metrics > div:nth-child(2) { transition-delay: .09s; }
  .js-reveal [data-reveal].is-revealed li:nth-child(3),
  .js-reveal [data-reveal].is-revealed .agreement-metrics > div:nth-child(3) { transition-delay: .18s; }
  .js-reveal [data-reveal].is-revealed li:nth-child(4) { transition-delay: .27s; }

  /* Score bars grow once their panel scrolls into view. */
  .js-reveal .capability-panel .bar-fill { width: 0; transition: width .95s cubic-bezier(.22,.9,.3,1); }
  .js-reveal .capability-panel.is-revealed .bar-fill { width: var(--bar); }
  .js-reveal .capability-panel.is-revealed .bar-list li:nth-child(2) .bar-fill { transition-delay: .07s; }
  .js-reveal .capability-panel.is-revealed .bar-list li:nth-child(3) .bar-fill { transition-delay: .14s; }
  .js-reveal .capability-panel.is-revealed .bar-list li:nth-child(4) .bar-fill { transition-delay: .21s; }
  .js-reveal .capability-panel.is-revealed .bar-list li:nth-child(5) .bar-fill { transition-delay: .28s; }
  .js-reveal .capability-panel.is-revealed .bar-list li:nth-child(6) .bar-fill { transition-delay: .35s; }

  /* Hero composition assembles itself on load. */
  .composition-mark .reference-sheet,
  .composition-mark .output-sheet,
  .composition-mark .composition-arrow { animation: sheet-in .72s cubic-bezier(.22,.8,.3,1) both; }
  .composition-mark .reference-sheet:nth-of-type(1) { animation-delay: .10s; }
  .composition-mark .reference-sheet:nth-of-type(2) { animation-delay: .20s; }
  .composition-mark .reference-sheet:nth-of-type(3) { animation-delay: .30s; }
  .composition-mark .composition-arrow { animation-delay: .44s; }
  .composition-mark .output-sheet { animation-delay: .54s; }

  /* Pareto points fade in with the chart. Opacity only: no SVG geometry is touched. */
  .js-reveal .results-chart .pareto-point,
  .js-reveal .results-chart .pareto-frontier-line { opacity: 0; transition: opacity .55s ease; }
  .js-reveal .results-chart.is-revealed .pareto-point { opacity: 1; }
  .js-reveal .results-chart.is-revealed .pareto-frontier-line { opacity: .75; transition-delay: .5s; }
  .js-reveal .results-chart.is-revealed .pareto-point:nth-of-type(2) { transition-delay: .05s; }
  .js-reveal .results-chart.is-revealed .pareto-point:nth-of-type(3) { transition-delay: .10s; }
  .js-reveal .results-chart.is-revealed .pareto-point:nth-of-type(4) { transition-delay: .15s; }
  .js-reveal .results-chart.is-revealed .pareto-point:nth-of-type(5) { transition-delay: .20s; }
  .js-reveal .results-chart.is-revealed .pareto-point:nth-of-type(6) { transition-delay: .25s; }
  .js-reveal .results-chart.is-revealed .pareto-point:nth-of-type(7) { transition-delay: .30s; }
  .js-reveal .results-chart.is-revealed .pareto-point:nth-of-type(8) { transition-delay: .35s; }
  .js-reveal .results-chart.is-revealed .pareto-point:nth-of-type(9) { transition-delay: .40s; }

  /* Overall bars ease to their new length when the table is sorted or filtered. */
  #leaderboard-table.refcraft-leaderboard .lb-overall-track > span {
    transition: width .45s cubic-bezier(.22,.8,.3,1), background .2s ease;
  }

  .site-header { transition: box-shadow .25s ease, border-color .25s ease; }
  .site-header nav a { transition: color .18s ease; }
  .capability-panel, .agreement-panel {
    transition: border-color .22s ease, box-shadow .22s ease;
  }
  .capability-panel:hover, .agreement-panel:hover {
    border-color: #c3d8ea; box-shadow: 0 6px 22px #2b567e12;
  }
  .example-gallery button { transition: transform .22s cubic-bezier(.22,.8,.3,1), box-shadow .22s ease, border-color .22s ease; }
  .example-gallery button:hover { transform: translateY(-4px); box-shadow: 0 10px 26px #2b567e18; }
  .bar-list li { transition: transform .2s ease; }
  .bar-list li:hover { transform: translateX(2px); }
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* --- Responsive ---------------------------------------------------------- */
@media(max-width:1100px) {
  .capability-grid { gap: 26px 32px; }
  .bar-list li { grid-template-columns: 96px minmax(0, 1fr) 38px; gap: 10px; }
  .agreement-metrics { gap: 20px 24px; }
  .agreement-metrics > div { padding-right: 22px; }
  .agreement-metrics strong { font-size: 34px; }
}
@media(max-width:900px) {
  .capability-grid { grid-template-columns: 1fr; }
  .agreement-metrics { grid-template-columns: 1fr; gap: 0; }
  .agreement-metrics > div {
    padding: 16px 0; border-right: 0; border-bottom: 1px solid #e4edf6;
  }
  .agreement-metrics > div:first-child { padding-top: 0; }
  .agreement-metrics > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .agreement-metrics strong { font-size: 32px; }
  .band-tint { margin-top: 38px; padding-bottom: 40px; }
  .band-tint > .section { padding-top: 34px; }
}
@media(max-width:800px) {
  .capability-panel, .agreement-panel { padding: 20px 19px; }
  .panel-heading h3 { font-size: 19px; }
  .stat-row strong { font-size: 27px; }
}
@media(max-width:600px) {
  .site-header nav a[href="#examples"] { display: none; }
  .bar-list li { grid-template-columns: 88px minmax(0, 1fr) 36px; gap: 9px; }
  .bar-label { font-size: 12.5px; }
  .stat-row { gap: 16px 14px; }
  .stat-row strong { font-size: 25px; }
  .agreement-metrics strong { font-size: 29px; }
  .band-tint { margin-top: 30px; padding-bottom: 32px; }
}

/* --- Section sub-headings are set in title case -------------------------- */
.chart-heading h3,
.leaderboard-heading h3,
.panel-heading h3,
.dataset-summary h3,
.evaluation-intro h3 {
  text-transform: none;
  letter-spacing: -.1px;
  font-size: 19px;
  font-weight: 600;
  color: #2b4d70;
}
/* The capability panel's inner captions are a quieter tier of the same style. */
.capability-chart figcaption {
  text-transform: none; letter-spacing: 0; font-size: 13px;
  font-weight: 600; color: #5d7490;
}
@media(max-width:800px) {
  .chart-heading h3,
  .leaderboard-heading h3,
  .panel-heading h3,
  .dataset-summary h3,
  .evaluation-intro h3 { font-size: 17px; }
}

/* --- Model marks, extracted from the paper's Table 1 --------------------- */
.lb-mark {
  width: 18px; height: 18px; flex: 0 0 18px;
  object-fit: contain; display: inline-block;
}
#leaderboard-table.refcraft-leaderboard .lb-model-button { gap: 8px; }
.refcraft-pareto .pareto-mark { pointer-events: none; }
@media(max-width:600px) {
  .lb-mark { width: 15px; height: 15px; flex-basis: 15px; }
}

/* --- Benchmark overview: stack the stats and the task example ----------- */
.dataset-overview { align-items: start; }
.dataset-overview .benchmark-statistics {
  background: transparent; padding: 0; border-radius: 0;
  display: flex; flex-direction: column; gap: 24px;
}
.dataset-overview .dataset-summary {
  background: #f0f7fc; border-radius: 11px; padding: 25px 29px;
}
.task-example-figure { width: 100%; margin: 0; }
.task-example-figure .figure-zoom {
  border: 1px solid #d3e2ee; border-radius: 11px;
  padding: 13px 13px 9px; background: #fff; overflow: hidden;
}
.task-example-figure .figure-zoom:hover { border-color: #8eb7d5; }
.task-example-figure figcaption { color: #536f87; font-size: 12px; line-height: 1.7; margin-top: 12px; }
@media(prefers-reduced-motion:no-preference) {
  .task-example-figure .figure-zoom { transition: border-color .18s ease, box-shadow .18s ease; }
  .task-example-figure .figure-zoom:hover { box-shadow: 0 5px 18px #426c8c10; }
}
@media(max-width:1100px) {
  .dataset-overview .benchmark-statistics { gap: 20px; }
  .dataset-overview .dataset-summary { padding: 21px; }
}

/* ============================================================================
   v20 — Teaser-led benchmark section, no standalone plot, and press feedback.
   ========================================================================= */

/* --- Benchmark leads with the paper's overview figure -------------------- */
.teaser-figure { width: 100%; max-width: 1060px; margin: 26px auto 0; }
.teaser-figure .figure-zoom {
  border: 1px solid #d3e2ee; border-radius: 12px;
  padding: 16px; background: #fff; overflow: hidden;
}
.teaser-figure .figure-zoom:hover { border-color: #8eb7d5; }
.teaser-figure figcaption {
  color: #536f87; font-size: 13px; line-height: 1.75;
  margin: 14px auto 0; max-width: 1000px;
}
.teaser-figure figcaption b { color: #2f628e; font-weight: 600; }
.dataset-overview, .domain-figure, .task-example-figure { /* retired in v20 */ }
.benchmark-statistics { margin-top: 34px; }
.dataset-summary > h3 { margin-bottom: 18px; }
.benchmark-statistics .stat-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 26px;
}
.benchmark-statistics .compact-table { width: 100%; }
.benchmark-statistics .compact-table th,
.benchmark-statistics .compact-table td { padding-block: 11px; }

/* --- Press feedback: everything interactive answers a click -------------- */
@media(prefers-reduced-motion:no-preference) {
  .paper-header .resource,
  #leaderboard-views button,
  .table-actions .download-link,
  .citation-actions a, .citation-actions button,
  .example-gallery button,
  .figure-zoom,
  .site-footer a,
  .lb-model-button,
  .stat-row li,
  .agreement-metrics > div,
  .delta-list li,
  summary {
    transition: transform .14s cubic-bezier(.2,.7,.3,1), background .18s ease,
                color .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .paper-header a.resource:active,
  #leaderboard-views button:active,
  .table-actions .download-link:active,
  .citation-actions a:active, .citation-actions button:active,
  .figure-zoom:active,
  .site-footer a:active { transform: translateY(1px) scale(.985); }
  .example-gallery button:active { transform: translateY(-1px) scale(.99); }
  .lb-model-button:active { transform: translateX(2px); }

  /* Quiet surfaces lift a little when pointed at. */
  .stat-row li:hover, .agreement-metrics > div:hover { transform: translateY(-2px); }
  .stat-row li:hover strong, .agreement-metrics > div:hover strong { color: #1d4578; }
  .teaser-figure .figure-zoom { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
  .teaser-figure .figure-zoom:hover { box-shadow: 0 8px 26px #2b567e14; transform: translateY(-2px); }
  summary:hover { color: #27548f; }

  /* Navigation gets a sliding underline instead of a plain colour change. */
  .site-header nav a { position: relative; }
  .site-header nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
    background: #4a7cb8; border-radius: 2px;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .22s cubic-bezier(.2,.7,.3,1);
  }
  .site-header nav a:hover::after,
  .site-header nav a[aria-current="location"]::after { transform: scaleX(1); }
  .site-header nav a:active { transform: translateY(1px); }

  /* The section number reacts when its heading is pointed at. */
  .section-heading:hover .section-index {
    border-color: #a8c6de; background: #eaf3fb; color: #2f628e;
  }
  .section-index { transition: border-color .2s ease, background .2s ease, color .2s ease; }
}

/* Keyboard users get the same affordance without relying on motion. */
.stat-row li:focus-within strong, .agreement-metrics > div:focus-within strong { color: #1d4578; }

@media(max-width:900px) {
  .benchmark-statistics .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teaser-figure { margin-top: 20px; }
  .teaser-figure .figure-zoom { padding: 11px; border-radius: 10px; }
  .teaser-figure figcaption { font-size: 12px; }
}
@media(max-width:600px) {
  .benchmark-statistics { margin-top: 26px; }
  .teaser-figure .figure-zoom { padding: 8px; }
}