:root {
  --bg: #ffffff;
  --band: #f7f8fa;
  --ink: #222831;
  --muted: #5f6873;
  --line: #d8dde3;
  --line-dark: #aeb7c1;
  --accent: #244b72;
  --accent-dark: #183754;
  --warning: #8b3b42;
  --max: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1rem; }
h1, h2, h3 { color: #1d2732; letter-spacing: 0; margin: 0; }
h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2.15rem, 4.4vw, 3.15rem);
  font-weight: 600;
  line-height: 1.15;
  margin-inline: auto;
  max-width: 1020px;
}
h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.65rem, 3vw, 1.95rem);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 1rem;
}
h3 { font-size: 1rem; font-weight: 700; line-height: 1.35; margin-bottom: .6rem; }
.site-header {
  align-items: center;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 62px;
  justify-content: space-between;
  left: 0;
  padding: 0 max(1rem, calc((100vw - var(--max)) / 2));
  position: sticky;
  right: 0;
  top: 0;
  z-index: 20;
}
.brand { align-items: center; display: inline-flex; font-size: .95rem; font-weight: 700; gap: .65rem; }
.brand-mark {
  display: block;
  height: 32px;
  object-fit: contain;
  width: 32px;
}
.site-nav { align-items: center; display: flex; gap: 1.4rem; }
.site-nav a { color: #4d5965; font-size: .9rem; font-weight: 600; }
.site-nav a:hover, .site-nav a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nav-toggle { background: transparent; border: 0; display: none; height: 42px; padding: 0; width: 42px; }
.nav-toggle span { background: var(--ink); display: block; height: 2px; margin: 7px auto; width: 22px; }
.section-wrap { margin: 0 auto; max-width: var(--max); padding: 4.75rem 1.5rem; }
.section-wrap.narrow { max-width: 850px; }
.content-band { background: var(--band); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.hero {
  display: grid;
  gap: 2.75rem;
  grid-template-columns: 1fr;
  min-height: auto;
  padding-bottom: 4rem;
  padding-top: 4.75rem;
}
.hero-copy { min-width: 0; text-align: center; }
.venue { color: var(--muted); font-size: .95rem; font-weight: 600; margin-bottom: 1.1rem; }
.authors {
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.5rem auto .35rem;
  max-width: 900px;
}
.authors a { color: inherit; text-decoration-color: rgba(15, 118, 110, .45); text-underline-offset: .18em; }
.authors a:hover { text-decoration-color: currentColor; }
.affiliation { color: var(--muted); font-size: .95rem; margin: 0 auto 1.2rem; max-width: 820px; }
.hero-summary { color: #46515c; font-size: 1.02rem; margin: 0 auto; max-width: 790px; }
.button-row { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.6rem; }
.button {
  align-items: center;
  border: 1px solid var(--accent);
  border-radius: 3px;
  display: inline-flex;
  font-size: .9rem;
  font-weight: 600;
  justify-content: center;
  min-height: 40px;
  padding: .55rem .95rem;
  transition: background .15s ease, color .15s ease;
}
.button-primary { background: var(--accent); color: #fff; }
.button-primary:hover, .button-primary:focus-visible { background: var(--accent-dark); border-color: var(--accent-dark); }
.button-secondary { background: #fff; color: var(--accent); }
.button-secondary:hover, .button-secondary:focus-visible { background: #f1f4f7; }
.button-disabled { background: #f3f4f5; border-color: var(--line-dark); color: #727a83; cursor: not-allowed; }
.media-frame { background: #fff; margin: 0; }
.hero-media { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.hero-media img, .method-frame img, .wide-frame img { background: #fff; margin-inline: auto; }
figcaption { color: var(--muted); font-size: .84rem; line-height: 1.5; padding: .8rem 0 0; text-align: left; }
.teaser-explanation {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr);
  padding-top: 1.5rem;
}
.teaser-explanation h2 { font-size: 1.25rem; margin-bottom: .45rem; }
.teaser-explanation > div > p { color: var(--muted); font-size: .9rem; margin: 0; }
.ap-steps {
  counter-reset: ap-step;
  display: grid;
  gap: 1.2rem 1.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.ap-steps li {
  color: #4f5b66;
  counter-increment: ap-step;
  font-size: .9rem;
  padding-left: 2.15rem;
  position: relative;
}
.ap-steps li::before {
  align-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  content: counter(ap-step);
  display: flex;
  font-size: .75rem;
  font-weight: 700;
  height: 1.5rem;
  justify-content: center;
  left: 0;
  position: absolute;
  top: .05rem;
  width: 1.5rem;
}
.ap-steps strong { color: #273543; display: block; margin-bottom: .15rem; }
.section-heading { margin-bottom: 1.75rem; max-width: 780px; }
.section-heading p, .narrow p, .two-column p { color: #4f5b66; font-size: 1rem; }
.split-section { padding-bottom: 4.5rem; }
.method-frame {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin-bottom: 1.75rem;
  padding: 1.25rem 0;
}
.method-grid { display: grid; gap: 2rem; grid-template-columns: repeat(3, 1fr); }
.method-grid article { border-left: 2px solid var(--line-dark); padding: .15rem 0 .15rem 1rem; }
.method-grid p { color: var(--muted); font-size: .94rem; margin: 0; }
.results-band { background: var(--band); }
.result-highlights {
  border-bottom: 1px solid var(--line-dark);
  border-top: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 2rem;
}
.result-highlights article { padding: 1.25rem 1.1rem; text-align: center; }
.result-highlights article + article { border-left: 1px solid var(--line); }
.result-highlights strong {
  color: var(--accent);
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: .35rem;
}
.result-highlights span { color: var(--muted); font-size: .9rem; }
.table-panel, .chart-card, .command-card, .citation-card { background: #fff; border: 1px solid var(--line); }
.table-panel { padding: 1.25rem; }
.table-scroll { overflow-x: auto; }
.results-table { border-collapse: collapse; min-width: 1050px; width: 100%; }
.results-table th, .results-table td {
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
  padding: .55rem .58rem;
  text-align: center;
  white-space: nowrap;
}
.results-table thead th { background: #eef1f4; color: #273543; font-weight: 700; }
.results-table tbody th { color: #273543; font-weight: 700; text-align: left; }
.results-table .ours th, .results-table .ours td { background: #e9eff5; color: #163a5d; font-weight: 700; }
.table-note { color: var(--muted); font-size: .84rem; margin: .8rem 0 0; }
.chart-grid { display: grid; gap: 1rem; grid-template-columns: 1.2fr .8fr; margin-top: 1rem; }
.chart-card { padding: 1.25rem; }
.bar-group { display: grid; gap: .7rem; }
.bar-row { align-items: center; display: grid; gap: .8rem; grid-template-columns: minmax(120px, 170px) 1fr 58px; }
.bar-row span { color: var(--muted); font-size: .84rem; }
.bar-row i { background: #e2e6ea; display: block; height: 10px; overflow: hidden; position: relative; }
.bar-row i::before { background: #8b98a5; content: ""; display: block; height: 100%; width: var(--value); }
.bar-row.accent i::before { background: var(--accent); }
.bar-row b { color: #273543; font-size: .84rem; text-align: right; }
.bar-axis { color: var(--muted); display: flex; font-size: .72rem; justify-content: space-between; margin-left: calc(170px + .8rem); margin-right: calc(58px + .8rem); }
.reader-grid { display: grid; gap: 0; grid-template-columns: repeat(2, 1fr); }
.reader-grid div { padding: .6rem 1rem; }
.reader-grid div + div { border-left: 1px solid var(--line); }
.reader-grid span { color: var(--muted); display: block; font-size: .8rem; font-weight: 700; margin-bottom: .4rem; }
.reader-grid strong {
  color: var(--accent);
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.1;
}
.reader-grid small { font-family: Arial, Helvetica, sans-serif; font-size: .8rem; }
.reader-grid p { color: var(--muted); font-size: .86rem; margin: .6rem 0 0; }
.qualitative-section { padding-top: 4.5rem; }
.wide-frame { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); padding: 1.25rem 0; }
.qualitative-notes {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.5rem;
}
.qualitative-note {
  border-left: 3px solid var(--callout);
  color: #4f5b66;
  font-size: .94rem;
  margin: 0;
  padding-left: 1rem;
}
.qualitative-note strong {
  color: var(--callout);
  display: block;
  margin-bottom: .25rem;
}
.note-orange { --callout: #b64f13; }
.note-purple { --callout: #7b3fa4; }
.two-column { align-items: start; display: grid; gap: 2.5rem; grid-template-columns: .9fr 1.1fr; }
.notice {
  border-left: 2px solid var(--warning);
  color: #68353a !important;
  font-size: .9rem !important;
  margin-top: 1.2rem;
  padding-left: 1rem;
}
.command-card { overflow: auto; padding: 1.15rem; }
pre { margin: 0; white-space: pre-wrap; }
code {
  color: #273543;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .86rem;
  line-height: 1.65;
}
.citation-section { padding-top: 4.5rem; }
.citation-card { overflow: hidden; padding: 1.15rem; position: relative; }
.copy-button {
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: 3px;
  color: var(--accent);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  padding: .45rem .7rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
}
.copy-button:hover, .copy-button:focus-visible { background: #f1f4f7; }
.citation-card pre { padding-right: 4.5rem; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; padding: 1.5rem 1rem; text-align: center; }
.site-footer p { margin: 0; }

@media (max-width: 920px) {
  .two-column, .chart-grid, .teaser-explanation { grid-template-columns: 1fr; }
  .method-grid { gap: 1.25rem; grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .site-header { height: 58px; padding: 0 1rem; }
  .nav-toggle { display: block; }
  .site-nav {
    align-items: stretch;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: none;
    flex-direction: column;
    gap: 0;
    left: 0;
    padding: .5rem 1rem;
    position: absolute;
    right: 0;
    top: 58px;
  }
  .site-nav a { border-bottom: 1px solid #eef0f2; padding: .7rem 0; }
  .site-nav.is-open { display: flex; }
  h1 { font-size: 2.05rem; }
  .section-wrap { padding: 3.5rem 1rem; }
  .hero { gap: 2rem; padding-bottom: 3rem; padding-top: 3.25rem; }
  .button-row { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .ap-steps { grid-template-columns: 1fr; }
  .result-highlights { grid-template-columns: 1fr; }
  .result-highlights article + article { border-left: 0; border-top: 1px solid var(--line); }
  .bar-row { gap: .3rem; grid-template-columns: 1fr; }
  .bar-row b { text-align: left; }
  .bar-axis { margin: 0; }
  .reader-grid { grid-template-columns: 1fr; }
  .qualitative-notes { grid-template-columns: 1fr; }
  .reader-grid div + div { border-left: 0; border-top: 1px solid var(--line); }
  .citation-card pre { padding-right: 0; padding-top: 2.8rem; }
}