/* Apple-style product page: white / #f5f5f7 bands, one system typeface (SF Pro on Apple devices, Inter elsewhere),
   big tight headlines, gray subheads, blue links with chevrons, flat rounded media. No shadows, gradients or cards. */
:root {
  --white: #ffffff;
  --gray: #f5f5f7;
  --ink: #1d1d1f;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --rule: #d2d2d7;
  --blue: #0066cc;
  --red: #c8423f;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --code: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;   /* BibTeX only: alignment needs fixed width */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font: 17px/1.47 var(--font);
  letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img, video { display: block; max-width: 100%; }
.wrap { width: min(980px, 100% - 44px); margin: 0 auto; }

/* ---------------------------------------------------------------- hero */
.hero { text-align: center; padding: 88px 0 48px; }
.hero-logo { width: 132px; margin: 0 auto 26px; }
h1 {
  margin: 0 auto;
  max-width: 900px;
  color: var(--ink);
  font: 600 clamp(40px, 6.4vw, 72px)/1.05 var(--font);
  letter-spacing: -.035em;
}
h1 .hl { color: var(--red); }
.tagline { margin: 18px auto 0; max-width: 720px; font: 400 clamp(19px, 2.4vw, 26px)/1.35 var(--font); color: var(--muted); letter-spacing: -.02em; }
.tagline em { font-style: normal; color: var(--ink); }
.authors { margin: 34px auto 2px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 18px; font-size: 17px; }
.authors span { color: var(--ink); white-space: nowrap; }
.authors a { color: inherit; }
.authors sup, .affil sup { color: var(--red); }
/* Raise the contribution marker without changing the author's line box. */
.authors sup { position: relative; top: -.5em; vertical-align: baseline; font-size: .75em; line-height: 0; }
.affil { margin: 0; color: var(--muted); font-size: 14px; letter-spacing: -.01em; }
.links { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 30px; font-size: 17px; }
.links .pill { padding: 11px 22px; border-radius: 980px; background: var(--blue); color: #fff; }
.links .pill:hover { background: #0077ed; text-decoration: none; }
.links .soon { color: var(--muted); }
.chev { display: inline-block; margin-left: 2px; font-size: 1.15em; line-height: 1; }

/* ---------------------------------------------------------------- bands */
.band { padding: 88px 0; }
.band.gray { background: var(--gray); }
.band#teaser { padding-top: 0; }
h2 {
  margin: 0 0 14px;
  text-align: center;
  color: var(--ink);
  font: 600 clamp(32px, 4.4vw, 48px)/1.08 var(--font);
  letter-spacing: -.03em;
}
.sub { max-width: 680px; margin: 0 auto 48px; text-align: center; color: var(--muted); font-size: clamp(19px, 2.2vw, 21px); line-height: 1.38; }
h2 + .abstract, h2 + .plain-figure, h2 + .bib { margin-top: 36px; }
h3 { color: var(--ink); font: 600 21px/1.25 var(--font); margin: 0 0 8px; letter-spacing: -.02em; }
.abstract { max-width: 760px; margin: 0 auto; color: var(--text); font-size: 17px; line-height: 1.6; }

.media { margin: 0; border-radius: 22px; overflow: hidden; background: var(--gray); }
.media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.caption { margin: 16px auto 0; max-width: 720px; text-align: center; color: var(--muted); font-size: 14px; }

.columns { display: grid; gap: 40px; text-align: center; }
.columns.three { grid-template-columns: repeat(3, 1fr); }
.columns.two { grid-template-columns: repeat(2, 1fr); }
.columns p { margin: 0; color: var(--muted); font-size: 17px; }
.columns p em { font-style: normal; color: var(--ink); }
.index { display: block; margin-bottom: 12px; color: var(--red); font: 600 40px/1 var(--font); letter-spacing: -.03em; }

.plain-figure { margin: 0; }
.plain-figure img { width: 100%; border-radius: 22px; mix-blend-mode: multiply; }
.plain-figure figcaption { margin-top: 16px; text-align: center; color: var(--muted); font-size: 14px; }
.plain-figure strong { color: var(--ink); font-weight: 600; }
.orange { color: #bf5b00; }

/* ---------------------------------------------------------------- rollouts */
.key {
  list-style: none; margin: -24px 0 36px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  color: var(--muted); font-size: 14px;
}
.key li { display: flex; align-items: center; gap: 8px; }
.key svg { width: 20px; height: 20px; flex: 0 0 20px; }

.tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  width: fit-content; max-width: 100%; margin: 0 auto 26px; padding: 4px;
  border-radius: 980px; background: #e8e8ed;
}
.tab {
  padding: 8px 18px; border: 0; border-radius: 980px; background: none; cursor: pointer;
  color: var(--ink); font: 400 14px/1.3 var(--font); letter-spacing: -.01em; white-space: nowrap;
}
.tab:hover { color: var(--blue); }
.tab.active { background: var(--white); font-weight: 500; }
.player { margin-bottom: 20px; }
.task-info { margin-top: 44px; }
.iface-title { margin: 0 0 22px; text-align: center; color: var(--muted); font-size: 14px; }
.iface { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px 32px; }
.iface-skill { border-top: 2px solid var(--ink); padding-top: 14px; }
.iface-name { margin: 0 0 12px; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.iface-name .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.iface-name .step { margin-right: 6px; color: var(--muted); font-weight: 500; }
.iface-policy { margin: 0; }
.iface-policy + .iface-policy { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e8e8ed; }
.iface-policy dt { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.iface-policy dd { margin: 2px 0 8px; color: var(--ink); font-size: 15px; line-height: 1.4; }
.iface-policy dd.when { color: var(--muted); margin-bottom: 0; }

/* ---------------------------------------------------------------- what is a prior */
.pr-tabs .tab { display: inline-flex; align-items: center; gap: 7px; }
.pr-tabs .tab svg { width: 18px; height: 18px; flex: 0 0 18px; }
.pr-stage { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 0 8px; margin-top: 8px; }
.pr-panel { margin: 0; }
.pr-panel figcaption { display: flex; gap: 10px; align-items: baseline; margin: 0 0 10px 6px; color: var(--muted); font-size: 15px; }
.pr-panel figcaption b { color: var(--ink); font-weight: 600; }
.pr-box { border-radius: 18px; overflow: hidden; background: var(--gray); }
.band.gray .pr-box { background: var(--white); }
.pr-box svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
#pr-test { touch-action: none; }
#pr-test > * { pointer-events: none; }                    /* axes, paths and the robot never block a drag */
#pr-test > .drag { pointer-events: auto; cursor: grab; }
.pr-arrow { padding-top: 30px; color: var(--rule); font-size: 34px; line-height: 1; text-align: center; }
.pr-mode { margin: 28px auto 0; }

/* ---------------------------------------------------------------- results */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0 0 72px; text-align: center; }
.figures .num { display: block; color: var(--ink); font: 600 clamp(40px, 5vw, 56px)/1.05 var(--font); letter-spacing: -.04em; }
.figures .what { display: block; margin-top: 8px; color: var(--ink); font-size: 17px; font-weight: 500; }
.figures .vs { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; }

.table-title { margin: 56px 0 6px; text-align: center; font: 600 24px/1.2 var(--font); letter-spacing: -.02em; }
.table-note { margin: 0 auto 18px; max-width: 760px; text-align: center; color: var(--muted); font-size: 14px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; min-width: 720px; letter-spacing: -.01em; }
th, td { padding: 9px 10px; text-align: center; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { color: var(--muted); font-weight: 500; font-size: 13px; }
thead tr:last-child th { border-bottom: 1px solid var(--rule); }
tbody tr + tr { border-top: 1px solid #e8e8ed; }
tbody tr.group, tbody tr.ours { border-top: 1px solid var(--rule); }
tbody tr.ours td { color: var(--red); font-weight: 600; }
td b { color: var(--ink); font-weight: 600; }
tbody tr.ours td b { color: inherit; }
table.exp2 { min-width: 980px; }
.findings { margin-top: 72px; }

/* ---------------------------------------------------------------- bibtex / footer */
.bib { position: relative; max-width: 760px; margin: 0 auto; }
.bib pre {
  margin: 0; padding: 22px 24px; overflow-x: auto; border-radius: 18px;
  background: var(--gray); color: var(--ink);
  font: 13.5px/1.6 var(--code); letter-spacing: 0;
}
.copy {
  position: absolute; top: 14px; right: 18px;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--blue); font: 14px var(--font);
}
.copy:hover { text-decoration: underline; }
footer { padding: 22px 0 36px; background: var(--gray); text-align: center; color: var(--muted); font-size: 12px; }
footer p { margin: 0; }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 900px) {
  .pr-stage { grid-template-columns: 1fr; gap: 6px 0; }
  .pr-arrow { padding: 0; transform: rotate(90deg); }
  .columns.three, .columns.two { grid-template-columns: 1fr; gap: 36px; }
  .figures { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .band { padding: 64px 0; }
}
@media (max-width: 560px) {
  .hero { padding-top: 56px; }
  .hero-logo { width: 104px; }
  .media, .plain-figure img { border-radius: 14px; }
  .tabs { border-radius: 18px; }
}