:root {
  color-scheme: light;
  --ink: #363636;
  --muted: #6b6b6b;
  --blue: #1674bb;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--ink);
  font:
    16px/1.5 "Noto Sans",
    sans-serif;
}
a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #1674bb;
  outline-offset: 5px;
}
.container {
  max-width: 1000px;
  margin: auto;
  padding-inline: 24px;
}
.narrow {
  max-width: 820px;
  margin: auto;
  padding-inline: 24px;
}
.hero {
  text-align: center;
  max-width: 1160px;
  margin: auto;
  padding: 66px 24px 34px;
}
h1 {
  font-family: "Google Sans", sans-serif;
  font-size: 44px;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: normal;
  margin: 0 0 22px;
}
.venue {
  font-size: 25px;
  font-weight: 500;
  margin: 0 0 16px;
}
.authors {
  font-size: 20px;
  color: var(--blue);
  margin: 0 0 22px;
}
.publication-links {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.button {
  font: inherit;
  font-size: 16px;
  border: 0;
  border-radius: 30px;
  background: #363636;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 19px;
  line-height: 1.5;
  text-decoration: none;
}
.button:hover {
  background: #242424;
  text-decoration: none;
}
.button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pending {
  background: #565656;
  cursor: not-allowed;
}
.pending:hover {
  background: #565656;
}
.teaser {
  /* Space between resource buttons and the teaser image. */
  padding-top: 60px;
  padding-bottom: 40px;
}
.teaser img {
  display: block;
  width: 100%;
  height: auto;
}
.teaser-caption {
  max-width: 850px;
  margin: 20px auto 0;
  font-size: 20px;
  text-align: center;
  line-height: 1.5;
}
.band {
  background: #f5f5f5;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  padding-block: 26px;
}
.stats strong {
  display: block;
  font-size: 30px;
  font-weight: 600;
}
.stats span {
  color: var(--muted);
  font-size: 14px;
}
.section {
  padding-top: 48px;
  padding-bottom: 48px;
}
h2 {
  font-size: 32px;
  line-height: 1.125;
  text-align: center;
  margin: 0 0 26px;
  font-weight: 600;
  letter-spacing: normal;
}
p {
  margin: 0 0 18px;
}
.intro {
  max-width: 820px;
  margin: 0 auto 30px;
  text-align: center;
}
#abstract p {
  text-align: justify;
}
.task-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 44px;
}
.task-grid article {
  border-top: 1px solid #dedede;
  padding-top: 20px;
}
h3 {
  font-size: 19px;
  line-height: 1.4;
  margin: 8px 0 12px;
  font-weight: 600;
}
.formula {
  color: var(--blue);
  font-family: inherit;
  font-size: 21px;
}
article p {
  margin: 0;
}
figure {
  margin: 0;
}
figure img {
  width: 100%;
  height: auto;
  display: block;
}
figcaption {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  margin-top: 16px;
}
.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  white-space: nowrap;
}
caption {
  text-align: left;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 12px;
}
th,
td {
  padding: 11px 12px;
  text-align: right;
  border-bottom: 1px solid #e5e5e5;
}
thead th {
  background: #f4f4f4;
  font-weight: 600;
}
th:first-child {
  text-align: left;
}
tbody th {
  font-weight: 400;
}
tbody tr:nth-child(even) {
  background: #fafafa;
}
tbody tr:hover {
  background: #edf5fb;
}
td strong {
  color: #1267a2;
}
.findings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 32px;
}
footer {
  background: #fafafa;
  padding: 38px 0;
  font-size: 14px;
  color: var(--muted);
}
footer p:last-child {
  margin-bottom: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 650px) {
  .hero {
    padding: 38px 24px 34px;
  }
  h1 {
    font-size: 32px;
    letter-spacing: normal;
  }
  .venue {
    font-size: 22px;
  }
  .teaser-caption {
    font-size: 17px;
  }
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .task-grid,
  .findings {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  h2 {
    font-size: 26px;
  }
  .section {
    padding-block: 34px;
  }
  #abstract p {
    text-align: left;
  }
  .intro {
    text-align: left;
  }
  .container,
  .narrow {
    padding-inline: 20px;
  }
}

#qualitative {
  background: #fff;
}
#qualitative figure + figure {
  margin-top: 48px;
}

.authors {
  margin-bottom: 6px;
}
.author-link {
  color: var(--blue);
  white-space: nowrap;
}
.author-link[aria-disabled="true"] {
  cursor: default;
}
.affiliation {
  font-size: 18px;
  margin: 0 0 24px;
}
.button .resource-icon {
  width: 19px;
  height: 19px;
  object-fit: contain;
}
#bibtex h2 {
  text-align: left;
}
#bibtex pre {
  margin: 0;
  padding: 24px;
  background: #f5f5f5;
  border-radius: 4px;
  overflow-x: auto;
  font:
    14px/1.65 Consolas,
    monospace;
  tab-size: 2;
}
#bibtex code {
  font: inherit;
}

.authors,
.affiliation,
.teaser {
  font-family: "Google Sans", sans-serif;
}
.affiliation {
  font-size: 20px;
}
.author-link {
  color: hsl(204, 86%, 53%);
}
.venue {
  font-weight: 700;
  color: #555;
}
.button .ai {
  font-size: 20px;
  line-height: 1;
}
#bibtex pre {
  font-family: monospace;
  line-height: 1.5;
}

/* Task colors sampled from the manuscript, Section 3.3. */
:root {
  --task-0: rgb(99.22% 89.8% 80.39%);
  --task-1: rgb(91.76% 81.96% 86.28%);
  --task-2: rgb(80.79% 88.63% 95.29%);
  --task-3: rgb(85.1% 92.16% 82.74%);
}
.benchmark-design {
  padding-top: 40px;
}
.benchmark-design h2 {
  margin-bottom: 8px;
}
.formula {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  color: #363636;
  font-size: 20px;
}
.task-0 {
  background: var(--task-0);
}
.task-1 {
  background: var(--task-1);
}
.task-2 {
  background: var(--task-2);
}
.task-3 {
  background: var(--task-3);
}
.evaluation-copy {
  max-width: 820px;
  margin: 0 auto 30px;
}
.evaluation-videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.evaluation-videos video {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
}
.result-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px;
}
.result-charts h3 {
  font-size: 17px;
  min-height: 65px;
  text-align: center;
}
.result-charts h3 .formula {
  display: table;
  margin: 0 auto 8px;
}
.chart-caption {
  text-align: center;
  color: #6b6b6b;
  font-size: 14px;
  margin-top: 20px;
}
.result-data {
  margin-top: 24px;
}
.result-data summary {
  cursor: pointer;
  padding: 12px 0;
  color: #1674bb;
}
.result-data .table-wrap {
  margin-top: 12px;
}
@media (max-width: 760px) {
  .evaluation-videos,
  .result-charts {
    grid-template-columns: 1fr;
  }
  .result-charts h3 {
    min-height: 0;
  }
}

/* Header wrapping and task typography. */
h1 {
  text-wrap: balance;
}
.affiliation {
  line-height: 1.6;
}
.stats {
  align-items: center;
}
.stats .board-names {
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 6px;
}
.task-grid h3,
.result-charts h3,
.formula {
  font-weight: 700;
  font-style: italic;
}
@media (max-width: 650px) {
  .stats .board-names {
    font-size: 21px;
  }
}

.lab-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
}
.lab-icon {
  width: 48px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

.lab-button-icon {
  width: 28px;
  height: 22px;
  object-fit: contain;
}

.button.lab-button {
  background: #fff;
  color: #363636;
  border: 1px solid #363636;
  padding: 7px 18px;
}
.button.lab-button:hover {
  background: #f5f5f5;
  border-color: #242424;
}

/* Manuscript introduction: Teacher C interview and benchmark motivation. */
.teacher-quote{max-width:850px;margin:36px auto 24px;padding:8px 0 8px 24px;border-left:3px solid #d3d3d3}
.teacher-quote blockquote{margin:0;font-size:19px;line-height:1.7;font-style:italic;color:#555}
.teacher-quote blockquote p{margin:0}
.teacher-quote figcaption{text-align:left;margin-top:14px;font-size:14px}
.teaser-role{text-align:left;line-height:1.65}
@media(max-width:650px){.teacher-quote{padding-left:16px}.teacher-quote blockquote{font-size:17px}}

/* Full-width section backgrounds; content widths stay inside each section. */
#abstract, #automated-evaluation {
  background: #f5f5f5;
}
#benchmark-design, #tasks, #results, #qualitative, #bibtex {
  background: #fff;
}
/* Equal value rows keep all four statistic labels on the same baseline. */
.stats {
  align-items: start;
}
.stats > div {
  display: grid;
  grid-template-rows: 68px auto;
  row-gap: 8px;
}
.stats > div > strong {
  align-self: center;
  margin: 0;
}
.stats > div > span {
  align-self: start;
}

/* Larger quantitative figures with compact task badges. */
#results{max-width:1240px}
#results .intro{max-width:1100px}
.result-charts{gap:28px 24px}
.result-charts h3{min-height:0;margin:0 0 2px;line-height:1.2}
.result-charts h3 .formula{margin:0 auto;padding:3px 12px}
.result-charts figure>a{display:block}
.result-data thead .formula{font-size:15px;padding:5px 10px}
.site-footer{background:#fafafa;text-align:center;padding:40px 0}
.site-footer .publication-links{margin-bottom:24px}
.site-footer p{margin-bottom:12px}
@media(max-width:1000px){.result-charts{grid-template-columns:1fr}.result-charts figure{width:100%;max-width:760px;margin:auto}}

/* Nerfies footer: centered icon-only links, then left-aligned license and credit. */
.site-footer{background:#fafafa;padding:48px 24px 96px;font-size:16px;text-align:left}
.footer-icons{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:24px}
.footer-icon-link{display:inline-flex;align-items:center;justify-content:center;padding:0;background:none;border:0;border-radius:0;color:#000;line-height:1;vertical-align:middle}
.footer-icon-link img{display:block;width:25px;height:25px;object-fit:contain;filter:brightness(0)}
.footer-icon-link:disabled{opacity:1;cursor:default}
.footer-icon-link:hover{background:none}
.footer-copy{max-width:760px;margin:0 auto}
.site-footer .footer-copy p{margin:0 0 16px}
.site-footer .footer-copy p:last-child{margin-bottom:0}

/* Space before the qualitative figures. */
#qualitative h2{margin-bottom:48px}

.result-data tr.model-group th{border-top:2px solid #999;border-bottom:1px solid #ddd;background:#f4f4f4;text-align:left;font-weight:700;padding:13px 12px}.result-data tr.model-group:first-child th{border-top:0}

/* Provider icons and subdued source groups. */
.model-name{display:inline-flex;align-items:center;gap:8px}
.model-icon{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.result-data tr.model-group th{color:#888;border-top:1px solid #ccc;border-bottom:1px solid #e5e5e5;font-weight:400;background:#fafafa}
/* Keep chart typography at its native size; reflow before resorting to scrolling. */
#results{max-width:1536px}
.result-charts{grid-template-columns:repeat(2,minmax(0,1fr))}
.result-charts figure{min-width:0;max-width:720px;width:100%;margin-inline:auto}
.result-charts .chart-scroll{display:block;overflow-x:auto;width:100%}
.result-charts .chart-scroll img{width:720px;min-width:720px;max-width:none;height:850px}
.result-data table{font-size:16px}
@media(max-width:1500px){.result-charts{grid-template-columns:minmax(0,1fr)}}
@media(max-width:650px){h2{font-size:32px}.teaser-caption{font-size:20px}.teacher-quote blockquote{font-size:19px}.venue{font-size:25px}.stats .board-names{font-size:24px}}

/* Site-wide Nerfies / Bulma typography. Keep after responsive overrides. */
html { font-size: 16px; }
body { font-family: "Noto Sans", sans-serif; font-size: 1rem; line-height: 1.5; }
h1 { font-family: "Google Sans", sans-serif; font-size: 3rem; line-height: 1.125; }
h2 { font-size: 2rem; line-height: 1.125; }
h3, .task-grid h3 { font-size: 1.5rem; line-height: 1.25; }
.authors, .affiliation, .teaser-caption { font-size: 1.25rem; }
.button, .stats span, figcaption, .teacher-quote figcaption,
.chart-caption, caption, table, .result-data table, .result-data summary,
.site-footer { font-size: 1rem; line-height: 1.5; }
.teacher-quote blockquote { font-size: 1.25rem; }
.formula, .result-charts h3, .result-charts h3 .formula { font-size: 1.25rem; }
.result-data thead .formula { font-size: 1rem; }
.stats strong { font-size: 2rem; }
.stats .board-names { font-size: 1.5rem; }
#bibtex pre { font-size: 0.875rem; }

/* Match quantitative results to the other 1000px content sections. */
#results { max-width: 1000px; }
#results .intro { max-width: 820px; }
.result-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.result-charts figure { width: 100%; max-width: none; min-width: 0; }
.result-charts .chart-scroll { width: 100%; overflow: visible; }
.result-charts .chart-scroll img { width: 100%; min-width: 0; max-width: 100%; height: auto; }
.result-data table { font-size: 0.875rem; }
.result-data th, .result-data td { padding: 10px; }
.result-data thead .formula { font-size: 0.875rem; }
.result-data .model-icon { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .result-charts { grid-template-columns: minmax(0, 1fr); }
  .result-charts figure { max-width: 600px; margin-inline: auto; }
}

/* Slightly smaller interview quotation and expanded task names. */
.teacher-quote blockquote { font-size: 1.125rem; }
.task-grid h3 { font-size: 1.25rem; }