body {
  font-family: 'Noto Sans', sans-serif;
}

/* ----------------------------------------------------------------------------
   Shared page width / margins
   Every major block shares the same max-width so left/right edges line up.
---------------------------------------------------------------------------- */
:root {
  --page-max: 1080px;
  --page-pad: 1.75rem;
}

.section > .container,
.section > .container.is-max-desktop,
#experimental-results > .container,
.publication-header-container {
  max-width: var(--page-max) !important;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.section {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}

/* ----------------------------------------------------------------------------
   Footer / misc links
---------------------------------------------------------------------------- */
.footer .icon-link {
  font-size: 25px;
  color: #000;
}

.link-block a {
  margin-top: 5px;
  margin-bottom: 5px;
}

.publication-links .button.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.hf-emoji {
  font-size: 1.15em;
  line-height: 1;
}

.dnerf {
  font-variant: small-caps;
}

/* ----------------------------------------------------------------------------
   Hero / publication header
---------------------------------------------------------------------------- */
.publication-hero {
  background: #f7f7f8;
}

.publication-hero .hero-body {
  padding: 3.25rem 1.5rem 2.5rem;
}

.publication-title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-bottom: 0.65rem;
}

.publication-logo {
  flex: 0 0 auto;
  max-height: 78px;
  width: clamp(56px, 5vw, 78px);
}

/* Title: noticeably smaller than before */
.publication-title {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(2.2rem, 3.2vw, 3.1rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
  margin-bottom: 0 !important;
}

.publication-subtitle {
  color: #5f6368;
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  font-weight: 400;
  line-height: 1.3;
  margin: 0 auto 1.9rem;
  max-width: 820px;
}

/* Authors */
.publication-authors {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(1.02rem, 1.25vw, 1.22rem);
  line-height: 1.5;
}

.publication-author-list {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 1.15rem;
  max-width: 960px;
  row-gap: 0.4rem;
  width: 100%;
}

.publication-author-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.6rem;
  row-gap: 0.35rem;
  width: 100%;
}

/* inline-block (not inline-flex) so <sup> tags raise correctly */
.author-block {
  display: inline-block;
  white-space: nowrap;
}

.author-block sup {
  font-size: 0.62em;
  font-weight: 600;
  color: #888;
  margin-left: 1px;
}

.publication-authors a {
  color: hsl(204, 86%, 45%) !important;
}

.publication-authors a:hover {
  text-decoration: underline;
}

/* Affiliations: larger / more legible than before */
.publication-affiliations {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  color: #444;
  column-gap: 1.8rem;
  row-gap: 0.3rem;
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: 1.4;
  margin: 0.4rem auto 1.6rem;
  max-width: 920px;
}

.publication-affiliations sup {
  font-weight: 600;
  color: #2c91d0;
  margin-right: 2px;
}

.publication-link-row {
  margin-top: 0.5rem;
}

/* ----------------------------------------------------------------------------
   Figures
---------------------------------------------------------------------------- */
.publication-figure {
  margin: 2rem auto 0;
  text-align: center;
}

.publication-figure img {
  height: auto;
  max-width: min(100%, 760px);
}

.section-title {
  color: #2d3e50;
  font-family: 'Google Sans', sans-serif;
}

/* ----------------------------------------------------------------------------
   Key findings
---------------------------------------------------------------------------- */
.key-findings-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.09);
  margin: 2.35rem auto 2rem;
  padding: 2.1rem 2.25rem 2rem;
}

.key-findings-card h3 {
  border-bottom: 2px solid #e1e7ef;
  color: #2d3e50;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 1.55rem;
  padding-bottom: 1rem;
}

.key-findings-card ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.key-findings-card li {
  color: #526174;
  font-size: 1.08rem;
  line-height: 1.6;
  padding-left: 1.65rem;
  position: relative;
}

.key-findings-card li + li {
  margin-top: 0.9rem;
}

.key-findings-card li::before {
  background: #3f7df6;
  border-radius: 50%;
  content: "";
  height: 0.42rem;
  left: 0.25rem;
  position: absolute;
  top: 0.78em;
  width: 0.42rem;
}

.key-findings-figure {
  margin: 0 auto;
  text-align: center;
}

.key-findings-figure img {
  border-radius: 8px;
  height: auto;
  max-width: 100%;
}

/* ----------------------------------------------------------------------------
   Method pipeline (animated, PPT-style sequential reveal)
---------------------------------------------------------------------------- */
.method-section .container {
  text-align: center;
}

.method-pipeline {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.75rem auto 0;
}

.method-step {
  flex: 1 1 240px;
  max-width: 300px;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-top: 4px solid var(--step-color, #2c91d0);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  padding: 1.5rem 1.25rem 1.6rem;
  text-align: left;
  /* hidden until revealed */
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.method-step.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.method-step .step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--step-color, #2c91d0);
  color: #fff;
  font-family: 'Google Sans', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.85rem;
}

.method-step h4 {
  font-family: 'Google Sans', sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: #2d3e50;
  margin-bottom: 0.5rem;
}

.method-step p {
  font-size: 0.96rem;
  line-height: 1.5;
  color: #555;
  margin: 0;
}

.method-step .step-tag {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--step-color, #2c91d0);
}

/* connecting arrow between steps */
.method-arrow {
  display: flex;
  align-items: center;
  color: #c4c9d0;
  font-size: 1.4rem;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.method-arrow.is-visible {
  opacity: 1;
}

.method-replay {
  margin-top: 1.75rem;
}

.method-replay button {
  font-family: 'Google Sans', sans-serif;
}

.method-figure {
  margin-top: 2rem;
}

.method-figure img {
  max-width: min(100%, 860px);
}

@media screen and (max-width: 768px) {
  .method-arrow {
    transform: rotate(90deg);
  }
}

/* ----------------------------------------------------------------------------
   Experimental results table
---------------------------------------------------------------------------- */
.results-section-title {
  color: #2d3e50;
  font-family: 'Google Sans', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.6rem;
  text-align: center;
}

.results-subtitle {
  color: #2d3e50;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.1rem !important;
  text-align: center;
}

.results-subsection-spaced {
  margin-top: 2.5rem;
}

.results-copy {
  color: #4f4f4f;
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 auto 2rem;
  max-width: 880px;
  text-align: left;
}

.results-copy p {
  margin: 0;
}

.results-table-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-width: 880px;
  margin: 0 auto;
}

.results-table-card + .results-table-card {
  margin-top: 2rem;
}

.results-table-caption {
  background: #fff;
  border-top: 1px solid #e3e3e3;
  color: #777;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.05rem;
  line-height: 1.35;
  padding: 0.95rem 1.25rem;
  text-align: center;
}

/* Scoped above Bulma's .table-container:not(:last-child) margin, which would
   otherwise add a stray gap below the table in cards that have a footnote. */
.results-table-card .results-table-container {
  margin: 0;
  max-width: none;
  overflow-x: auto;
}

.results-table {
  background: #fff;
  border-collapse: collapse;
  font-family: 'Google Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.35;
  margin: 0;
  width: 100%;
}

.results-model-col {
  width: 58%;
}

.results-pass-col {
  width: 18%;
}

.results-performance-col {
  width: 24%;
}

.results-alf-model-col {
  width: 70%;
}

.results-alf-performance-col {
  width: 30%;
}

.results-rank-col {
  width: 8%;
}

.results-putnam-model-col {
  width: 44%;
}

.results-solved-col {
  width: 15%;
}

.results-open-col {
  width: 16%;
}

.results-compute-col {
  width: 17%;
}

.results-table th,
.results-table td {
  border: none;
  padding: 0.72rem 1.4rem;
  vertical-align: middle;
}

.results-table thead th {
  background: #2d3e50;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 700;
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
}

.results-table tbody tr {
  border-bottom: 1px solid #ececec;
}

.results-table th:first-child,
.results-table td:first-child {
  text-align: left;
}

.results-table th:nth-child(2),
.results-table td:nth-child(2),
.results-table th:nth-child(3),
.results-table td:nth-child(3) {
  text-align: center;
  white-space: nowrap;
}

/* Three contiguous budget tiers, clean palette */
.results-table .tier-a td {
  background: #fff5ee;
}

.results-table .tier-b td {
  background: #eef4fd;
}

.results-table .tier-c td {
  background: #edf8f0;
}

/* Pythagoras (our) rows: stronger accent + single left marker */
.results-table .highlight-row td {
  font-weight: 700;
}

.results-table .highlight-row td:first-child {
  box-shadow: inset 3px 0 0 #2c91d0;
}

/* Key-metric cell of our rows: consistently blue (bold comes from .highlight-row).
   Scoped per table so the metric column is correct in each, e.g. PutnamBench's
   Num-solved is the last column after the Open-source/Compute reorder. */
.main-table .highlight-row td:nth-child(3),
.alf-table .highlight-row td:nth-child(2),
.diffusion-table .highlight-row td:nth-child(2),
.putnam-table .highlight-row td:nth-child(5) {
  color: #2c91d0;
}

/* Tables 2-4 are not budget-grouped, so the tier palette would read as random
   noise. Neutralise the tier backgrounds here and keep only the "our model"
   highlight, so these tables share Table 1's clean accent without the rainbow. */
.results-table.alf-table tbody td,
.results-table.putnam-table tbody td,
.results-table.diffusion-table tbody td {
  background: #fff;
}

.results-table.alf-table .highlight-row td,
.results-table.putnam-table .highlight-row td,
.results-table.diffusion-table .highlight-row td {
  background: #eef4fd;
}

.results-table-note {
  border-top: 1px solid #e3e3e3;
  color: #6f6f6f;
  font-size: 0.9rem;
  line-height: 1.45;
  padding: 0.85rem 1.25rem 1rem;
}

.putnam-table {
  min-width: 760px;
}

.putnam-table th:first-child,
.putnam-table td:first-child,
.putnam-table th:nth-child(3),
.putnam-table td:nth-child(3),
.putnam-table th:nth-child(4),
.putnam-table td:nth-child(4),
.putnam-table th:nth-child(5),
.putnam-table td:nth-child(5) {
  text-align: center;
  white-space: nowrap;
}

.putnam-table th:nth-child(2),
.putnam-table td:nth-child(2) {
  text-align: left;
  white-space: normal;
}

.results-table tbody tr:last-child td {
  border-bottom: none;
}

/* small tier divider label */
.results-table .tier-label td {
  background: #fafafa;
  color: #8a8f98;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

/* ----------------------------------------------------------------------------
   Analysis flip cards
---------------------------------------------------------------------------- */
.analysis-section {
  background: #f8f9fa;
}

.analysis-kicker {
  color: #6b6b6b;
  font-family: 'Google Sans', sans-serif;
  margin: -0.45rem auto 2.1rem;
  max-width: 760px;
  text-align: center;
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.45rem;
}

.analysis-card {
  background: transparent;
  border: 0;
  min-height: 520px;
  outline: none;
  perspective: 1400px;
}

.analysis-card-inner {
  height: 100%;
  min-height: 520px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.62s ease;
}

.analysis-card:hover .analysis-card-inner,
.analysis-card.is-flipped .analysis-card-inner {
  transform: rotateY(180deg);
}

.analysis-card:focus-visible .analysis-face {
  outline: 3px solid rgba(44, 145, 208, 0.35);
  outline-offset: 3px;
}

.analysis-face {
  backface-visibility: hidden;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  inset: 0;
  overflow: hidden;
  padding: 1.45rem 1.55rem;
  position: absolute;
}

.analysis-back {
  transform: rotateY(180deg);
}

.analysis-heading {
  align-items: center;
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1.05rem;
}

.analysis-heading h3 {
  color: #3e3e3e;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.analysis-icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.6rem;
  justify-content: center;
  width: 1.9rem;
}

.analysis-blue {
  color: #3f7df6;
}

.analysis-green {
  color: #28b968;
}

.analysis-yellow {
  color: #e8aa00;
}

.analysis-red {
  color: #ef4b4f;
}

.analysis-front p,
.analysis-front li,
.analysis-text-back p {
  color: #555;
  font-size: 1rem;
  line-height: 1.55;
}

.analysis-front p {
  margin-bottom: 1rem;
}

.analysis-front ul {
  list-style: none;
  margin: 0 0 0.5rem 0;
  padding: 0;
}

.analysis-front li {
  padding-left: 1.3rem;
  position: relative;
}

.analysis-front li::before {
  content: "\203A"; /* › chevron */
  color: #3f7df6;
  font-weight: 700;
  left: 0.2rem;
  position: absolute;
  top: -0.04em;
}

.analysis-front li + li {
  margin-top: 0.45rem;
}

.analysis-hint {
  color: #8a8f98;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: auto;
  text-transform: uppercase;
}

.analysis-figure-back {
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.analysis-figure-back img {
  border-radius: 6px;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Back face that pairs the figure with a short readout */
.analysis-figtext-back {
  gap: 0.85rem;
  overflow-y: auto;
}

.analysis-figtext-back img {
  border-radius: 6px;
  flex: 0 0 auto;
  height: auto;
  max-height: 215px;
  object-fit: contain;
  width: 100%;
}

.analysis-figtext-back p {
  color: #555;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}

/* Distinguishable card: two pies + transition heatmap + colour legend */
.analysis-distinguish-back {
  gap: 0.65rem;
}

.pie-pair {
  display: flex;
  gap: 0.5rem;
}

.pie-pair figure {
  flex: 1 1 0;
  margin: 0;
  text-align: center;
}

.pie-pair img {
  height: auto;
  max-height: 132px;
  object-fit: contain;
  width: 100%;
}

.pie-pair figcaption,
.heatmap-figure figcaption {
  color: #7a7f88;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 0.2rem;
}

.heatmap-figure {
  margin: 0;
}

.heatmap-figure img {
  border-radius: 4px;
  height: auto;
  width: 100%;
}

.heatmap-figure figcaption {
  text-align: center;
}

.heatmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.85rem;
  list-style: none;
  margin: 0.1rem 0 0;
  padding: 0;
}

.heatmap-legend li {
  align-items: center;
  color: #555;
  display: flex;
  font-size: 0.75rem;
  gap: 0.35rem;
}

.heatmap-legend .sw {
  border-radius: 2px;
  flex: 0 0 auto;
  height: 0.72rem;
  width: 0.72rem;
}

.sw-green { background: #609c6c; }
.sw-orange { background: #d89c6c; }
.sw-blue { background: #5478b4; }
.sw-red { background: #c05454; }

.analysis-text-back {
  overflow-y: auto;
}

.analysis-text-back h4 {
  color: #2d3e50;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.9rem;
}

.analysis-text-back p {
  margin-bottom: 0.85rem;
}

.analysis-text-back p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
   BibTeX
---------------------------------------------------------------------------- */
#BibTeX pre {
  border-radius: 8px;
}

@media screen and (max-width: 768px) {
  .publication-hero .hero-body {
    padding-top: 2.5rem;
  }

  .publication-title-row {
    flex-direction: column;
    gap: 0.5rem;
  }

  .publication-logo {
    max-height: 64px;
    width: 64px;
  }

  .publication-author-row {
    column-gap: 1rem;
  }

  .analysis-grid {
    grid-template-columns: 1fr;
  }

  .analysis-card,
  .analysis-card-inner {
    min-height: 540px;
  }
}