/* ALPS project page. One theme for the whole page, following the visitor's system setting: light by default, dark when
   the system asks for it. The three capabilities keep the hues of the paper's Fig. 1 (state teal, language violet,
   pixels orange); the hero is the top of the page, not a separate band. */
:root {
  --bg: #ffffff;
  --bg-soft: #f4f6f7;
  --ink: #0e141b;
  --ink-2: #39434d;
  --ink-3: #66717c;
  --line: #e2e6ea;
  --card: #ffffff;
  --code-bg: #0e141b;
  --code-ink: #dfe5ea;
  --state: #0a8c9e;
  --lang: #6e25b8;
  --pix: #c96a10;
  --mark: #8a949e;                 /* the "A" bar of the wordmark */
  --accent: #0a8c9e;
  --glow: #eaf0f4;                 /* soft light behind the title */
  --dot: rgba(14, 20, 27, 0.09);   /* the patch grid at rest */
  --btn-border: #d6dce1;
  --btn-bg: #ffffff;
  --btn-bg-hover: #f1f4f6;
  --btn-muted: #8a949e;
  --video-ring: rgba(14, 20, 27, 0.10);
  --video-shadow: rgba(14, 20, 27, 0.20);
  --radius: 10px;
  --wide: 1120px;
  --narrow: 740px;
  --display: "Inter Tight", "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --body: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #080b0f;
    --bg-soft: #0e141b;
    --ink: #eef2f5;
    --ink-2: #b6c0c9;
    --ink-3: #7f8a95;
    --line: #1d252e;
    --card: #ffffff;               /* the paper's figures are drawn on white */
    --code-bg: #0e141b;
    --state: #2bc4cb;
    --lang: #a983ff;
    --pix: #f5a04a;
    --mark: #66717c;
    --accent: #2bc4cb;
    --glow: #111a24;
    --dot: rgba(138, 151, 166, 0.15);
    --btn-border: #2a3440;
    --btn-bg: rgba(255, 255, 255, 0.04);
    --btn-bg-hover: rgba(255, 255, 255, 0.09);
    --btn-muted: #66717c;
    --video-ring: #1c242e;
    --video-shadow: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding-inline: 24px; }
.narrow { max-width: var(--narrow); }

/* ---------------------------------------------------------------- hero (same ground as the page) */
.hero {
  background: radial-gradient(1100px 560px at 64% 0%, var(--glow) 0%, transparent 72%), var(--bg);
  color: var(--ink);
  padding-block: 28px 24px;
  position: relative;               /* no overflow clipping: the video's shadow fades into the next section */
}
.hero::before {                        /* the patch grid at rest, as in the teaser; fades out before the video */
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 720px;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.3px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 58% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 80% at 58% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}
.hero > .wrap { position: relative; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar .org { font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.topbar nav { display: flex; gap: 20px; flex-wrap: wrap; }
.topbar nav a { color: var(--ink-2); text-decoration: none; font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.topbar nav a:hover { color: var(--ink); }

.wordmark { display: inline-flex; align-items: baseline; font: 600 clamp(64px, 11vw, 132px)/1 var(--display); letter-spacing: -.035em; margin-top: 56px; }
.wordmark .peak { font: normal 1.17em/.855 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; letter-spacing: 0; margin-right: .15em;
  position: relative; top: -.043em; }   /* the mountain before the name (system emoji): 17% larger than the capitals and centred on them
  (peak .08em above, foot .08em below the baseline); line height .855 keeps its box at 1em; .15em of its size = the same gap to the A as before */
.wordmark span { position: relative; padding-right: .02em; }
.wordmark span::after {
  content: ""; position: absolute; left: 8%; right: 10%; bottom: -.1em; height: max(3px, .028em); border-radius: 2px;
  background: var(--bar);
}
.expansion { margin: 26px 0 0; font: 500 clamp(17px, 2.2vw, 22px)/1.4 var(--display); color: var(--ink-2); }
.expansion .l { color: var(--lang); } .expansion .p { color: var(--pix); } .expansion .s { color: var(--state); }
h1.title { margin: 18px 0 0; font: 600 clamp(30px, 4.4vw, 50px)/1.08 var(--display); letter-spacing: -.022em; text-wrap: balance; }
.authors { margin-top: 22px; font: 500 19px/1.5 var(--display); display: flex; flex-wrap: wrap; column-gap: 22px; row-gap: 2px; }
.affil { color: var(--ink-2); font-size: 15px; display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 2px; margin-top: 4px; }
.authors span, .affil span { white-space: nowrap; }
.authors .grp { display: flex; flex-wrap: wrap; column-gap: 22px; row-gap: 2px; white-space: normal; }   /* two groups of four: 8 on one line, else 4 + 4 */
.authors sup, .affil sup { font-size: .62em; line-height: 0; margin-left: 1px; color: var(--ink-3); }
.affil sup { margin-left: 0; margin-right: 1px; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--ink);
  font: 500 14px/1 var(--body); text-decoration: none;
}
.btn:hover { background: var(--btn-bg-hover); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.soon { color: var(--btn-muted); cursor: default; }
.btn.soon:hover { background: var(--btn-bg); }
.video {
  margin-top: 44px; border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px var(--video-ring), 0 26px 70px var(--video-shadow); aspect-ratio: 16 / 9;
}
.video video { width: 100%; height: 100%; }
.video-note { margin-top: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font: 400 13px/1.5 var(--mono); color: var(--ink-3); }
.video-note a { color: var(--ink-2); }

/* ---------------------------------------------------------------- sections */
section { padding-block: 72px; }
section + section { border-top: 1px solid var(--line); }
.kicker { font: 500 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 12px; }
.kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; }
h2 { margin: 14px 0 0; font: 600 clamp(26px, 3.2vw, 36px)/1.15 var(--display); letter-spacing: -.02em; text-wrap: balance; }
h3 { margin: 48px 0 0; font: 600 22px/1.25 var(--display); letter-spacing: -.012em; text-wrap: balance; }
p { margin: 16px 0 0; color: var(--ink-2); }
.lead { font-size: 19px; color: var(--ink-2); }

.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.cap { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; background: var(--bg); position: relative; }
.cap::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); }
.cap .name { font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c); margin-top: 6px; }
.cap .verb { font: 600 24px/1.2 var(--display); margin-top: 10px; }
.cap .num { font: 600 44px/1 var(--display); letter-spacing: -.03em; margin-top: 18px; font-variant-numeric: tabular-nums; }
.cap .unit { font: 400 13px/1.45 var(--mono); color: var(--ink-3); margin-top: 8px; }
.cap p { font-size: 15px; margin-top: 12px; }
.verdict { margin-top: 28px; font: 600 22px/1.35 var(--display); letter-spacing: -.01em; text-wrap: balance; color: var(--ink); }

figure { margin: 36px 0 0; }
figure .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
figure img { width: 100%; height: auto; }
figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); max-width: 900px; }
figcaption b { color: var(--ink-2); font-weight: 600; }
.fig-narrow { max-width: 760px; }

/* tables generated by tools/build_tables.py from the paper's numbers */
.table-scroll { overflow-x: auto; margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 10px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { font: 500 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--ink-3); border-bottom: 1px solid var(--line); vertical-align: bottom; }
thead tr.groups th { color: var(--ink-2); font-weight: 600; letter-spacing: .02em; border-bottom: 1px solid var(--line); text-align: center; }
thead tr.groups th:first-child { text-align: left; }
tbody tr.grp td { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  padding-top: 16px; padding-bottom: 6px; text-align: left; }
tbody td { color: var(--ink-2); border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
tbody tr.ref td { color: var(--ink-3); }
tbody tr.ours td { color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
tbody tr.ours td:first-child { font-weight: 600; }
td.best { font-weight: 700; color: var(--ink); }
td.na { color: var(--ink-3); font-style: italic; }
.col-state { box-shadow: inset 0 3px 0 var(--state); }
.col-lang { box-shadow: inset 0 3px 0 var(--lang); }
.col-pix { box-shadow: inset 0 3px 0 var(--pix); }
.table-note { font-size: 13.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.55; }
.t-narrow { max-width: 720px; }
.t-narrow + .t-wide { margin-top: 8px; }

/* ---------------------------------------------------------------- code */
pre {
  margin: 20px 0 0; padding: 18px 20px; border-radius: var(--radius); background: var(--code-bg); color: var(--code-ink);
  font: 400 13.5px/1.65 var(--mono); overflow-x: auto; border: 1px solid var(--line);
}
pre .c { color: #7d8893; }
pre .k { color: #a983ff; }
pre .s { color: #f5a04a; }
.models { margin-top: 20px; }
.models td, .models th { white-space: normal; }
.copy-wrap { position: relative; }
.copy {
  position: absolute; top: 10px; right: 10px; padding: 6px 10px; border-radius: 6px; border: 1px solid #2a3440;
  background: #0e141b; color: #a9b3bd; font: 500 12px/1 var(--mono); cursor: pointer;
}
.copy:hover { color: #eef2f5; }

footer { padding-block: 36px 48px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13.5px; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .caps { grid-template-columns: 1fr; }
  section { padding-block: 56px; }
  figure .card { padding: 10px; }
}
@media (max-width: 520px) {
  .wrap { padding-inline: 16px; }
  body { font-size: 16px; }
  .topbar nav { gap: 14px; }
  .video { margin-top: 32px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }