/* SpatialDex project page. */

:root{
  --bg:#f9f9fb;            /* page */
  --surface:#ffffff;       /* cards, figures, tables */
  --surface-2:#f1f1f4;     /* table headers, subtle fills */
  --ink:#16161d;           /* headings */
  --text:#2e2e38;          /* body copy */
  --text-2:#5f5f75;        /* secondary copy, captions */
  --muted:#9494a8;         /* metadata */
  --line:#e4e4ea;          /* borders */
  --hair:rgba(148,148,168,0.25);
  --accent:#4f46e5;
  --tint:#eef0ff;
  --bad:#b42318;           /* baseline failure tags */
  --bad-tint:#fdecea;
  --bar:#d9d9e3;
  --max:980px;
  --r-lg:16px;
  --r-md:12px;
  --shadow:0 0 2px rgba(0,0,0,0.05), 0 0 16px rgba(0,0,0,0.04), 3px 5px 20px -6px rgba(0,0,0,0.12);
  --sans:'Geist', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16.5px; line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
img, video{ display:block; max-width:100%; }
b, strong{ color:var(--ink); font-weight:600; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 1.5rem; }
@media (max-width:680px){ .wrap{ padding:0 1rem; } body{ font-size:16px; } }

/* ---------- hero: full-screen video ---------- */
.hero{
  position:relative; height:100vh; height:100svh; min-height:540px; max-height:1100px;
  overflow:hidden; background:#0b0b0f; color:#fff; display:flex; align-items:flex-end;
}
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-shade{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(8,8,12,0.88) 0%, rgba(8,8,12,0.45) 38%, rgba(8,8,12,0.08) 70%),
    rgba(8,8,12,0.18);
}
.hero-text{ position:relative; z-index:2; width:100%; padding-bottom:5.2rem; }
.pub-name{
  font-weight:600; font-size:4.5rem; line-height:1; letter-spacing:-0.05em;
  color:#fff; margin:0 0 0.9rem;
}
.pub-title{
  font-weight:500; font-size:1.5rem; line-height:1.3; letter-spacing:-0.025em;
  color:rgba(255,255,255,0.84); margin:0 0 1.2rem; max-width:760px; text-wrap:balance;
}
.authors{
  font-size:0.95rem; font-weight:500; line-height:1.8;
  color:rgba(255,255,255,0.84);
}
.authors span{ display:inline-block; }
.authors sup{ font-size:0.7em; line-height:0; }
.author-note{ margin-top:0.35rem; font-size:0.78rem; line-height:1.5; color:rgba(255,255,255,0.72); }
.pub-links{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.5rem; }
.pub-btn{
  display:inline-flex; align-items:center; gap:0.5rem; height:40px; padding:0 1.05rem;
  border-radius:999px; font-size:0.92rem; font-weight:500; line-height:1; white-space:nowrap;
  color:#fff; border:1px solid rgba(255,255,255,0.26); background:rgba(255,255,255,0.08);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.pub-btn.primary{ background:#fff; border-color:#fff; color:var(--ink); }
.pub-btn.primary:hover{ background:rgba(255,255,255,0.86); text-decoration:none; }
.pub-btn.primary:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.pub-btn.pending{ color:rgba(255,255,255,0.62); cursor:default; }
.pub-btn .soon{
  font-family:var(--mono); font-size:0.64rem; letter-spacing:0.07em; text-transform:uppercase;
  color:rgba(255,255,255,0.48); margin-left:0.1rem;
}
.scroll-cue{
  position:absolute; left:50%; bottom:1.4rem; z-index:3; transform:translateX(-50%);
  width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
  color:#fff; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  animation:cue 2.2s ease-in-out infinite;
}
.scroll-cue:hover{ background:rgba(255,255,255,0.2); text-decoration:none; }
@keyframes cue{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,5px); } }
@media (prefers-reduced-motion:reduce){ .scroll-cue{ animation:none; } }
@media (max-width:680px){
  .hero{ min-height:480px; }
  .hero-text{ padding-bottom:4.6rem; }
  .pub-name{ font-size:3rem; }
  .pub-title{ font-size:1.12rem; }
  .pub-btn{ height:36px; padding:0 0.85rem; font-size:0.86rem; }
}

/* ---------- sections ---------- */
section.block{ padding:3.4rem 0; }
.sec-title{
  font-weight:500; font-size:2.25rem; line-height:1.15; letter-spacing:-0.035em;
  color:var(--ink); margin:0 0 1.3rem;
}
.subhead{
  font-weight:500; font-size:1.3rem; line-height:1.3; letter-spacing:-0.02em;
  color:var(--ink); margin:2.4rem 0 0.9rem;
}
.content p{ text-align:left; }
.lead-p{ font-size:1.08rem; color:var(--text); }
.hl{ color:var(--accent); font-weight:600; }
ul.points{ padding-left:1.25rem; margin:1.1rem 0 0; }
ul.points li{ margin:0 0 0.5rem; padding-left:0.2rem; line-height:1.65; }
ul.points li::marker{ color:var(--muted); }
ul.points li b{ color:var(--accent); }
@media (max-width:680px){ .sec-title{ font-size:1.75rem; } }

/* ---------- figures ---------- */
figure{ margin:0; }
figure img{ width:100%; height:auto; }
.fig{ margin:1.2rem 0 0; }
.fig > img{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.1rem;
}
.fig.narrow{ max-width:760px; margin-left:auto; margin-right:auto; }
figcaption{ font-size:0.9rem; color:var(--text-2); margin-top:0.8rem; line-height:1.6; }
@media (max-width:680px){ .fig > img{ padding:0.5rem; border-radius:var(--r-md); } }

/* ---------- video clips ---------- */
.clip{
  position:relative; border-radius:var(--r-md); overflow:hidden; background:#0b0b0f;
  aspect-ratio:16/9; border:1px solid var(--hair); box-shadow:var(--shadow);
}
.clip video{ width:100%; height:100%; object-fit:cover; }
.clip .tag{
  position:absolute; left:10px; top:10px; z-index:2;
  font-size:0.75rem; font-weight:500; line-height:1; color:#fff; letter-spacing:0.01em;
  padding:0.4rem 0.6rem; border-radius:999px;
  background:rgba(0,0,0,0.45); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.clip[data-speed]::after{
  content:attr(data-speed) "\00D7"; position:absolute; right:10px; bottom:10px; z-index:2;
  font-family:var(--mono); font-size:0.68rem; font-weight:500; line-height:1; color:#fff;
  padding:0.32rem 0.45rem; border-radius:6px;
  background:rgba(0,0,0,0.45); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}

.teaser{ max-width:820px; margin:0 auto; }
.teaser-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.3rem 1.3rem 1.3rem;
}
.teaser-card > img{ width:100%; height:auto; max-width:700px; margin:0 auto 0.4rem; }
.teaser-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:680px){ .teaser-card{ padding:0.7rem; } .teaser-grid{ grid-template-columns:repeat(2,1fr); gap:6px; } }

/* real-world task bar: jump links that stick only while the tasks are on screen */
.task-list{ margin-top:1.6rem; }
.tabbar{
  position:sticky; top:0; z-index:10; display:flex; gap:0.15rem;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin:0 0 1.1rem; padding-top:0.4rem; background:var(--bg); border-bottom:1px solid var(--line);
}
.tabbar::-webkit-scrollbar{ display:none; }
.tabbar a{
  flex:none; appearance:none; border:0; background:none; cursor:pointer; white-space:nowrap;
  font:inherit; font-size:0.95rem; font-weight:500; color:var(--text-2);
  padding:0.65rem 0.85rem; margin-bottom:-1px; border-bottom:2px solid transparent;
}
.tabbar a:hover{ color:var(--ink); text-decoration:none; }
.tabbar a[aria-current="true"]{ color:var(--accent); border-bottom-color:var(--accent); }
.tabbar a:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; border-radius:6px; }
@media (max-width:680px){ .tabbar a{ padding:0.6rem 0.7rem; font-size:0.9rem; } }

/* one block per real-world task; scroll-margin keeps headings clear of the sticky bar */
.task{ margin-top:2.4rem; scroll-margin-top:4.2rem; }
.task-nav + .task{ margin-top:0.6rem; }
.task-head h3, .cmp-task{
  margin:0; font-weight:500; font-size:1.3rem; letter-spacing:-0.02em; color:var(--ink);
}
.task-desc{ margin:0.15rem 0 0.9rem; color:var(--text-2); font-size:0.95rem; }
.var-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:560px){ .var-grid{ grid-template-columns:1fr; } }

/* controls on the real-robot clips: shown on hover, focus, or while paused */
.clip.ctl video{ cursor:pointer; }
.clip.ctl[data-speed]::after{ top:10px; bottom:auto; }
.vc{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:0.45rem; padding:1.8rem 0.55rem 0.4rem;
  background:linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0));
  color:#fff; opacity:0; transition:opacity .18s ease;
}
.clip.ctl:hover .vc, .clip.ctl:focus-within .vc, .clip.ctl.paused .vc{ opacity:1; }
@media (hover:none){ .clip.ctl .vc{ opacity:1; } }
.vc button{
  flex:none; width:30px; height:30px; padding:0; border:0; border-radius:6px;
  display:grid; place-items:center; background:none; color:inherit; cursor:pointer;
}
.vc button:hover{ background:rgba(255,255,255,0.14); }
.vc button:focus-visible, .vc-seek:focus-visible{ outline:2px solid #fff; outline-offset:1px; }
.clip.ctl .i-pause, .clip.ctl.paused .i-play{ display:block; }
.clip.ctl .i-play, .clip.ctl.paused .i-pause{ display:none; }
.vc-time{
  flex:none; font-family:var(--mono); font-size:0.7rem; line-height:1;
  font-variant-numeric:tabular-nums; color:rgba(255,255,255,0.85); white-space:nowrap;
}
.vc-seek{
  flex:1; min-width:0; height:18px; margin:0; background:transparent; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.vc-seek::-webkit-slider-runnable-track{
  height:3px; border-radius:2px;
  background:linear-gradient(to right, #fff var(--p,0%), rgba(255,255,255,0.32) var(--p,0%));
}
.vc-seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; margin-top:-4px; border:0; border-radius:50%; background:#fff;
}
.vc-seek::-moz-range-track{ height:3px; border-radius:2px; background:rgba(255,255,255,0.32); }
.vc-seek::-moz-range-progress{ height:3px; border-radius:2px; background:#fff; }
.vc-seek::-moz-range-thumb{ width:11px; height:11px; border:0; border-radius:50%; background:#fff; }
.clip.ctl:fullscreen{ border:0; border-radius:0; }
.clip.ctl:fullscreen video{ object-fit:contain; }
.clip.ctl:-webkit-full-screen{ width:100%; height:100%; border:0; border-radius:0; }
.clip.ctl:-webkit-full-screen video{ object-fit:contain; }

/* end-to-end comparison: SpatialDex vs. baselines on the same task, one row per task */
.cmp{ margin-top:2.4rem; }
.cmp-task{ margin-bottom:0.9rem; }
.cmp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cmp-item{ margin:0; }
.cmp-item figcaption{ margin-top:0.7rem; font-size:0.88rem; line-height:1.5; }
.cmp-item figcaption p{ margin:0.45rem 0 0; }
.cmp-head{ display:flex; align-items:baseline; justify-content:space-between; gap:0.5rem; }
.cmp-name{ font-size:0.98rem; font-weight:600; color:var(--ink); }
.cmp-name sub{ line-height:0; }
.cmp-rate{ font-family:var(--mono); font-size:0.85rem; color:var(--text-2); font-variant-numeric:tabular-nums; }
.cmp-item.ours .cmp-name, .cmp-item.ours .cmp-rate{ color:var(--accent); }
.cmp-item.ours .cmp-rate{ font-weight:600; }
.result{
  display:inline-block; margin-top:0.35rem; padding:0.2rem 0.55rem; border-radius:999px;
  font-size:0.74rem; font-weight:500; line-height:1.3; color:var(--bad); background:var(--bad-tint);
}
.result.ok{ color:var(--accent); background:var(--tint); }
@media (max-width:760px){ .cmp-grid{ grid-template-columns:1fr; gap:24px; } }

/* overview video */
.player{
  position:relative; border-radius:var(--r-lg); overflow:hidden; background:#0b0b0f;
  aspect-ratio:16/9; border:1px solid var(--hair); box-shadow:var(--shadow);
}
.player video{ width:100%; height:100%; }

/* ---------- tables ---------- */
p.tbl-cap{ font-size:0.9rem; color:var(--text-2); margin:1.4rem 0 0; }
.table-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:0.8rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
table.res{
  width:100%; border-collapse:collapse; font-size:0.88rem; white-space:nowrap;
}
table.res th, table.res td{ padding:0.55rem 0.6rem; text-align:center; }
table.res th:first-child, table.res td:first-child{ text-align:left; padding-left:1rem; }
table.res th:last-child, table.res td:last-child{ padding-right:1rem; }
table.res td{ font-family:var(--mono); font-size:0.84rem; font-variant-numeric:tabular-nums; color:var(--text); }
table.res td:first-child{ font-family:var(--sans); font-size:0.88rem; }
table.res thead th{
  background:var(--surface-2); color:var(--text-2); font-weight:500; font-size:0.8rem;
  line-height:1.3; vertical-align:bottom; border-bottom:1px solid var(--line);
}
table.res thead tr.group th{ padding-bottom:0.2rem; color:var(--ink); border-bottom:0; }
table.res tbody tr{ border-bottom:1px solid #f0f0f4; }
table.res tbody tr:last-child{ border-bottom:0; }
table.res tbody tr.sep{ border-top:1px solid var(--line); }
table.res tr.ours td{ background:var(--tint); color:var(--accent); font-weight:600; }
table.res tr.ours td:first-child{ color:var(--accent); }
table.res td.avg, table.res th.avg{ border-left:1px solid var(--line); }
table.res td b{ color:var(--ink); font-weight:600; }
table.res.compact{ font-size:0.8rem; }
table.res.compact th, table.res.compact td{ padding:0.5rem 0.32rem; }
table.res.compact td{ font-size:0.78rem; }
table.res.compact th:first-child, table.res.compact td:first-child{ padding-left:0.9rem; }

/* ---------- ablation bars ---------- */
.bars{
  margin-top:1.4rem; padding:1.1rem 1.3rem 1.2rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
.bar-group{ margin-top:1rem; }
.bar-group:first-child{ margin-top:0; }
.bar-group-label{
  font-family:var(--mono); font-size:0.7rem; font-weight:500; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:0.35rem;
}
.bar-row{
  display:grid; grid-template-columns:minmax(150px, 220px) 1fr; align-items:center; gap:0.8rem;
  padding:3px 0; position:relative;
}
.bar-row .name{ font-size:0.9rem; color:var(--text-2); line-height:1.3; }
.bar-row .track{ position:relative; height:20px; }
.bar-row .fill{
  height:100%; border-radius:0 4px 4px 0; background:var(--bar);
  transition:filter .12s ease;
}
.bar-row .val{
  position:absolute; top:50%; transform:translateY(-50%); margin-left:8px;
  font-family:var(--mono); font-size:0.78rem; color:var(--text-2); font-variant-numeric:tabular-nums;
}
.bar-row.ours .name{ color:var(--accent); font-weight:600; }
.bar-row.ours .fill{ background:var(--accent); }
.bar-row.ours .val{ color:var(--ink); font-weight:600; }
.bar-row:hover .fill{ filter:brightness(0.93); }
.bar-row:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.bar-tip{
  position:fixed; z-index:50; pointer-events:none; opacity:0; transition:opacity .1s ease;
  background:#16161d; color:#fff; font-size:0.78rem; line-height:1.5;
  padding:0.6rem 0.75rem; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.2);
  max-width:260px;
}
.bar-tip.show{ opacity:1; }
.bar-tip .t{ font-weight:600; margin-bottom:0.25rem; }
.bar-tip .r{ display:flex; justify-content:space-between; gap:1rem; color:#c9c9d6; }
.bar-tip .r span:last-child{ font-family:var(--mono); color:#fff; }
.bar-note{ margin:0.8rem 0 0; font-size:0.86rem; color:var(--text-2); }
@media (max-width:560px){
  .bars{ padding:0.9rem 1rem; }
  .bar-row{ grid-template-columns:1fr; gap:0.15rem; padding:5px 0; }
}


footer{
  padding:2.4rem 0; border-top:1px solid var(--line); text-align:center;
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);
}