/* OATH project page, in the supplementary video's "broadsheet" look: warm paper, Lato across a real
   weight ramp, hairline rules, square corners, and one burnt accent spent on the O-A-T-H initials and
   on OATH's own results. One centred column; pictures carry the page, words label them. */

:root{
  --paper:#F4F1EB;--paper-2:#ECE7DE;--ink:#191816;--muted:#6B665E;--faint:#A9A399;--keyline:#D9D3C8;
  --accent:#B63E12;--accent-light:#E27A4E;
  --multiply-blue:#397FE7; /* Multiply Labs brand blue, as on multiplylabs.github.io/brace */
  --wash:rgba(182,62,18,.09);
  --line:rgba(25,24,22,.2);--line-soft:rgba(25,24,22,.1);
  --font:"Lato","Helvetica Neue",Arial,sans-serif;--track:.14em;
  --col:1040px;--gut:24px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img,video{display:block;max-width:100%}
h1,h2,h3,p,figure,pre{margin:0}
.initial{font-weight:900;color:var(--accent)}

/* hero: the hardware rollouts loop behind the title */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;background:var(--ink);color:var(--paper);
  text-align:center;padding:72px var(--gut)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;opacity:.42}
.hero::after{content:"";position:absolute;inset:0;background:rgba(25,24,22,.38);pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:980px;display:grid;justify-items:center;gap:22px}
.hero .initial{color:var(--multiply-blue)}
.wordmark{font:900 clamp(72px,14vw,168px)/.9 var(--font);letter-spacing:-.03em}
.hero h1{font:300 clamp(22px,3vw,34px)/1.3 var(--font);text-wrap:balance}
.authors,.affils{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px}
.authors{font-size:18px;font-weight:700;margin-top:10px}
.affils{font-size:14px;color:rgba(244,241,235,.75)}
sup{font-size:.62em;line-height:0;margin-left:1px}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:12px}
.btn{display:inline-flex;align-items:center;gap:8px;min-width:120px;justify-content:center;padding:12px 20px;border:1px solid var(--paper);
  color:var(--paper);text-decoration:none;font:700 12px/14px var(--font);text-transform:uppercase;letter-spacing:var(--track);transition:background .15s,color .15s}
a.btn:hover{background:var(--paper);color:var(--ink)}
.btn.soon{border-color:rgba(244,241,235,.35);color:rgba(244,241,235,.55)}
.btn.soon::after{content:"Soon";font-size:9px;padding:2px 5px;background:rgba(244,241,235,.12)}
.cue{position:absolute;z-index:1;bottom:26px;left:50%;width:14px;height:14px;margin-left:-7px;border-right:2px solid var(--paper);
  border-bottom:2px solid var(--paper);transform:rotate(45deg);opacity:.7}

/* sections: one centred column, a hairline between them */
main section{max-width:calc(var(--col) + 2 * var(--gut));margin:0 auto;padding:88px var(--gut);border-top:1px solid var(--line-soft)}
main section:first-child{border-top:0}
h2{font:900 40px/1.1 var(--font);letter-spacing:-.025em;text-align:center;margin-bottom:40px}
h3{font:700 12px/14px var(--font);text-transform:uppercase;letter-spacing:var(--track);color:var(--muted);text-align:center;margin:64px 0 20px}
h2+h3{margin-top:0}
.prose{max-width:68ch;margin:0 auto;font-size:17px;line-height:1.65;text-align:justify;hyphens:auto}
.player{width:100%;aspect-ratio:16/9;background:var(--ink)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:56px auto 0;max-width:820px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{padding:24px 12px;text-align:center;display:grid;gap:6px}
.stats div+div{border-left:1px solid var(--line-soft)}
.stats b{font:300 54px/1 var(--font);letter-spacing:-.03em}
.stats b small{font-size:.3em;font-weight:400;letter-spacing:0;color:var(--muted);margin-right:.3em}
.stats span em{font-style:normal;font-weight:900;color:var(--ink)} /* the label is already bold caps; emphasis steps up to black */
.stats span{font:700 11px/14px var(--font);text-transform:uppercase;letter-spacing:var(--track);color:var(--muted)}

.fig{display:grid;gap:14px;margin:0 auto 48px}
.fig.narrow{max-width:520px}
.fig img{width:100%;height:auto;background:#fff;border:1px solid var(--keyline)}
.fig figcaption,.note{text-align:center;color:var(--muted);font-size:15px}

/* the reference-generation figure: each stage is a hover target that fills the side panel */
.stages{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:28px;align-items:center;margin:0 auto 48px}
.stage-figure{position:relative;overflow:hidden}
.stage-figure img{width:100%;height:auto;background:#fff;border:1px solid var(--keyline)}
/* hover targets: a numbered badge shows what can be explored; the outline appears only while active */
.hot{position:absolute;padding:0;border:2px solid transparent;border-radius:10px;background:transparent;cursor:pointer;
  transition:border-color .15s,box-shadow .2s}
.hot::after{content:attr(data-stage);position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;font:700 11px/1 var(--font);box-shadow:0 0 0 2px rgba(255,255,255,.85);transition:opacity .15s}
/* the active region stays bright while the rest of the figure dims */
.hot:hover,.hot:focus-visible,.hot.on{border:2px solid var(--accent);box-shadow:0 0 0 2000px rgba(25,24,22,.38);outline:none;z-index:1}
.stage-figure:has(.hot.on) .hot:not(.on)::after{opacity:.35}
.s1{left:1%;top:1%;width:31%;height:35%}
.s2{left:38%;top:1%;width:34%;height:35%}
.s3{left:77%;top:1%;width:22%;height:35%}
/* the pipeline figure: every stage title sits at the top, so its badges go bottom-left */
.s1::after,.s2::after,.s3::after,.s4::after,.s5::after{top:auto;right:auto;bottom:6px;left:6px}
.s4{left:51%;top:42%;width:37%;height:56%}
.s5{left:4.5%;top:42%;width:40.5%;height:56%}
.stages.portrait{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:900px}
.t1{left:14%;top:.3%;width:71%;height:20.2%}
.c1{left:.5%;top:2%;width:46.5%;height:95%}
.c2{left:48.5%;top:2%;width:50.5%;height:95%}
.c3{left:68%;top:24%;width:12.5%;height:50%;z-index:2!important}
.c3::after{top:auto;right:auto;bottom:6px;left:6px} /* clear of the figure's own e label */
.stage-text .eq{font-size:15px;padding:12px 8px;background:var(--paper-2);overflow-x:auto}
.t2{left:1.5%;top:22%;width:40.5%;height:39%}
.t3{left:45.5%;top:29.5%;width:13.5%;height:22.5%}
.t4{left:62.5%;top:22%;width:34%;height:39%}
.t5{left:4.5%;top:87.5%;width:38.5%;height:8.7%}
.t6{left:50%;top:72%;width:45.5%;height:26.5%}
.stage-panel{border-left:3px solid var(--accent);padding:4px 0 4px 20px;min-height:13em;align-self:center}
.stage-text{display:grid;gap:10px}
.stage-text[hidden]{display:none}
.stage-text .num{font:700 11px/14px var(--font);text-transform:uppercase;letter-spacing:var(--track);color:var(--muted)}
.stage-text p{font-size:15px;line-height:1.55}
.stage-text .hint{color:var(--muted)}

/* symbols drawn onto the figures, in the figures' own colours: green on the object, magenta on the hand */
.sym{position:absolute;z-index:3;pointer-events:none;padding:2px 7px;border-radius:7px;background:rgba(255,255,255,.93);
  font-size:17px;line-height:1;color:var(--ink);white-space:nowrap}
.sym.g{color:#23894F}
.sym.h{color:#C8236F}
.sym-c1g{right:77.5%;top:18%}
.sym-c1h{left:26.5%;top:18%}
/* math typeset by tools/render-math.mjs: inline SVG in the text colour */
.m svg{display:inline-block;overflow:visible}
.m.d{display:block;text-align:center}
.fig-out{max-width:72ch;margin:-28px auto 48px;text-align:center;color:var(--muted);font-size:15px}
.jump{color:var(--accent);font-weight:700;text-decoration:none}
.jump:hover{text-decoration:underline}
@keyframes flash{0%,100%{box-shadow:0 0 0 0 rgba(182,62,18,0)}30%{box-shadow:0 0 0 6px rgba(182,62,18,.55)}}
.stages.flash .stage-figure{animation:flash 1.4s ease-out 2;border-radius:4px}

/* the policy's inputs, as chips; the contact error is the accented one */
.obs{max-width:920px;margin:0 auto 18px;display:grid;gap:12px}
.obs-row{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:center}
.obs-label{font:700 11px/14px var(--font);text-transform:uppercase;letter-spacing:var(--track);color:var(--muted)}
.obs-label .m{font-size:16px;margin-left:6px;letter-spacing:0;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:16px/1.2 var(--font);padding:6px 12px;border:1px solid var(--keyline);border-radius:10px;background:#fff;color:var(--ink);cursor:default}
.chip:hover,.chip:focus-visible{border-color:var(--ink);outline:none}
.chip.key{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.struck{font:13px/1.2 var(--font);color:var(--muted);background:transparent;border-style:dashed;
  text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.obs-desc{min-height:1.6em;margin-top:4px;text-align:center;color:var(--muted);font-size:15px}
.obs-zoom{text-align:center;color:var(--accent);font-weight:700;font-size:14px}

/* video grids */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 20px}
.grid figure{position:relative;display:grid;gap:10px}
.grid video{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ink);border:1px solid var(--keyline)}
.grid figcaption{font-weight:700;font-size:16px;display:flex;align-items:baseline;gap:10px}
.grid figcaption span{font-size:11px;text-transform:uppercase;letter-spacing:var(--track);color:var(--muted)}
.speed{position:absolute;top:10px;left:10px;padding:4px 8px;background:var(--ink);color:var(--paper);font:700 12px/14px var(--font);font-style:normal}

/* the comparison table */
.table{overflow-x:auto}
table{width:100%;min-width:720px;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums}
th,td{padding:9px 10px;text-align:center;border-bottom:1px solid var(--line-soft);white-space:nowrap}
th{font:700 11px/14px var(--font);text-transform:uppercase;letter-spacing:var(--track);color:var(--muted)}
th[rowspan]{width:24%}
td:first-child{text-align:left;padding-left:0}
th.grp{border-bottom:1px solid var(--line)}
.dir{color:var(--faint);margin-right:6px;font-weight:700}
.ours{background:var(--wash)}
th.ours,td.ours{color:var(--accent)}
.best{font-weight:900}
a.cite{color:var(--faint);text-decoration:none;letter-spacing:0;font-weight:400}
a.cite:hover{color:var(--accent)}
.note{margin-top:14px;font-size:13px}

/* BibTeX and references */
.bib{position:relative;max-width:780px;margin:0 auto;background:var(--paper-2);border:1px solid var(--keyline)}
.bib pre{padding:22px 24px;overflow-x:auto;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.copy{position:absolute;top:10px;right:10px;padding:6px 10px;border:1px solid var(--ink);background:transparent;cursor:pointer;
  font:700 10px/12px var(--font);text-transform:uppercase;letter-spacing:var(--track)}
.copy:hover{background:var(--ink);color:var(--paper)}
.refs{list-style:none;max-width:780px;margin:40px auto 0;padding:0;display:grid;gap:6px;color:var(--muted);font-size:13px;line-height:1.45}
.refs li{position:relative;padding-left:32px}
.refs li>span:first-child{position:absolute;left:0;color:var(--ink)}
.refs a{text-underline-offset:2px;text-decoration-color:var(--line)}
.refs li:target{background:var(--wash)}

footer{background:var(--ink);color:var(--faint);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:32px var(--gut);font-size:13px}
footer .wordmark{font-size:18px;letter-spacing:var(--track);color:var(--paper)}

@media (max-width:700px){
  main section{padding:64px 18px}
  h2{font-size:30px;margin-bottom:28px}
  .grid{grid-template-columns:1fr}
  .stages,.stages.portrait{grid-template-columns:1fr;gap:18px}
  .obs-row{grid-template-columns:1fr;gap:6px}
  .sym{font-size:11px;padding:1px 4px}
  .stats b{font-size:38px}
  .prose{text-align:left}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-bg{display:none}}