:root {
  color-scheme: light;
  --text: #303641;
  --muted: #67717d;
  --blue: #3266a3;
  --green: #187b68;
  --coral: #bd594f;
  --line: #e0e3e7;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  color: var(--text);
  background: #fff;
}
* { box-sizing: border-box; letter-spacing: 0; }
html { scroll-behavior: smooth; }
body { margin: 0; font-size: 17px; line-height: 1.7; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.container { width: min(1040px, calc(100% - 48px)); margin-inline: auto; }
.reading-width { max-width: 830px; margin-inline: auto; }
.page-nav { position: sticky; top: 0; z-index: 5; min-height: 56px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 32px; border-bottom: 1px solid #edf0f3; padding: 13px 18px; background: rgb(255 255 255 / 96%); backdrop-filter: blur(12px); }
.page-nav a { color: #646871; font-size: 13px; }
.page-nav a:first-child { font-weight: 700; color: var(--text); }
.nav-brand span { color: var(--blue); }
.page-nav a[aria-current] { color: var(--blue); text-decoration: underline; text-underline-offset: 7px; }
.skip-link { position: fixed; z-index: 10; top: -70px; left: 16px; padding: 10px 18px; background: #fff; }
.skip-link:focus { top: 12px; }
.paper-header { text-align: center; padding-top: 26px; padding-bottom: 35px; }
h1, h2, h3 { line-height: 1.25; color: #2d3036; overflow-wrap: break-word; }
h1 { font-size: 30px; font-weight: 600; margin: 0 auto 19px; }
.method-name { display: block; color: #2d4b72; font-size: 49px; font-weight: 700; margin-bottom: 12px; }
.paper-title { display: block; max-width: 860px; margin-inline: auto; font-weight: 550; }
.paper-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 4px; }
.resource-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 16px; background: #35373c; border: 1px solid #35373c; border-radius: 6px; color: white; font-size: 14px; line-height: 1.4; }
a.resource-link:hover { background: #4b4e56; text-decoration: none; }
.resource-link-static { cursor: default; }
.resource-link img { width: 16px; height: 16px; filter: invert(1); }
.spatial { color: var(--blue); }
.temporal { color: var(--coral); }
figure { margin: 29px 0; }
.figure-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.figure-button img { width: 100%; }
figcaption { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; text-align: left; max-width: none; }
.hero-video { margin: 24px auto 28px; scroll-margin-top: 80px; }
.paper-figures { margin-top: 48px; }
.overview-figure { margin-top: 0; }
.overview-figure,
.paper-figures .task-figure,
#method > figure { margin-left: auto; margin-right: auto; width: 100%; }
.paper-section { padding-top: 60px; padding-bottom: 60px; scroll-margin-top: 74px; }
.section-kicker { text-align: center; font-size: 12px; font-weight: 600; color: var(--blue); margin-bottom: 10px; }
.citation-band { background: #f7f8fa; }
.abstract-band p { text-align: justify; margin-bottom: 0; }
h2 { text-align: center; font-size: 31px; font-weight: 650; margin: 0 0 23px; }
h3 { text-align: center; font-size: 24px; font-weight: 600; margin: 32px 0 17px; }
p { margin: 0 0 20px; }
.prose { max-width: 850px; margin: 0 auto 24px; }
.centered { text-align: center; }
.method-description { margin-top: 32px; margin-bottom: 40px; }
.method-description p { margin-bottom: 17px; }
#abstract, #experiments, #videos, #method, #ablations { border-top: 1px solid var(--line); }
.experiment { margin-top: 42px; }
.experiment, .video-experiment { scroll-margin-top: 80px; }
.experiment + .experiment { margin-top: 58px; }
.experiment h3 { margin-top: 0; }
.table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border-bottom: 2px solid #59616c; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
caption { text-align: left; font-size: 13px; color: var(--muted); padding-bottom: 12px; }
th, td { padding: 11px 13px; text-align: center; border-bottom: 1px solid #e8eaee; }
thead { border-top: 2px solid #59616c; border-bottom: 1px solid #9ca2ac; background: #f8f9fb; }
thead th { font-size: 13px; font-weight: 600; }
th:first-child { text-align: left; }
tbody th { font-weight: 400; }
tbody tr:hover { background: #f8fafc; }
tbody tr:nth-child(even):not(.ours) { background: #fafbfc; }
tbody tr.ours { background: #eaf5ef; border-top: 2px solid #88ad9a; }
.ours th { color: #16684e; font-weight: 700; }
.ours td:last-child { color: #16684e; }
td strong { font-weight: 750; color: #202328; }
.table-note { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 12px 0 0; }
sup { font-size: 10px; }
.video-experiment { margin-top: 43px; }
.task-meta { text-align: center; color: var(--green); font-weight: 600; font-size: 14px; margin-top: -7px; margin-bottom: 17px; }
.preview-note { text-align: center; font-size: 13px; color: #846128; margin: 12px auto; }
.video-experiment + .video-experiment { margin-top: 56px; }
.video-figure { width: 100%; max-width: none; margin: 23px auto 0; }
.video-slot { width: 100%; aspect-ratio: 16 / 9; position: relative; border: 1px solid #dce0e5; border-radius: 6px; overflow: hidden; background: #f2f4f6; }
.video-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #747b86; padding: 20px; text-align: center; }
.video-placeholder img { width: 37px; height: 37px; opacity: .42; margin-bottom: 18px; }
.video-placeholder p { font-size: 19px; color: #606774; font-weight: 600; margin: 0 0 6px; }
.video-placeholder span { font-size: 14px; color: #7d848e; }
.video-slot video { display: block; width: 100%; height: 100%; object-fit: contain; background: #151618; }
.video-error { position: absolute; bottom: 48px; inset-inline: 15px; background: #fff; padding: 10px; text-align: center; font-size: 14px; }
.sim-gallery { margin: 8px 0 36px; }
.benchmark-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 28px; }
.benchmark-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 78px; padding: 12px 14px; border: 1px solid #d4d8df; border-radius: 8px; background: #fff; color: #3a3e46; text-align: left; cursor: pointer; }
.benchmark-tabs button:hover { background: #f4f6f8; }
.benchmark-tabs button[aria-selected="true"] { background: #35373c; border-color: #35373c; color: #fff; }
.benchmark-name { font-size: 13px; font-weight: 600; }
.benchmark-score { font-size: 22px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.benchmark-note { font-size: 12px; color: var(--muted); }
.benchmark-tabs button[aria-selected="true"] .benchmark-note { color: #c8ccd3; }
.benchmark-switch .experiment { margin-top: 0; }
.suite-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 20px; }
.suite-tabs button { border: 1px solid #d4d8df; background: #fff; min-height: 36px; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #646871; }
.suite-tabs button:hover { background: #e9edf2; }
.suite-tabs button[aria-selected="true"] { background: #35373c; color: #fff; border-color: #35373c; }
.sim-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.sim-video-grid.dense { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
.sim-video-card { margin: 0; }
.sim-video-card .video-slot { aspect-ratio: 1 / 1; }
.sim-gallery[data-gallery="mikasa"] .video-slot,
.sim-gallery[data-gallery="bridge"] .video-slot { aspect-ratio: 3 / 2; }
.hero-video figcaption { text-align: left; }
.sim-video-card figcaption { text-align: center; }
.sim-video-card figcaption { margin-top: 10px; font-size: 13px; line-height: 1.45; max-width: none; }
.sim-video-card figcaption strong { display: block; color: #2d3036; font-size: 13px; margin-bottom: 2px; }
.sim-gallery-empty { text-align: center; color: var(--muted); font-size: 14px; margin: 12px 0; }
#real-world-results { margin: 55px auto 0; }
.paper-figures .task-figure { margin-top: 36px; }
.task-figure { margin-top: 55px; }
.citation-block { position: relative; }
pre { margin: 0; padding: 25px 54px 25px 24px; background: #eceef2; border-radius: 5px; overflow-x: auto; font-size: 13px; line-height: 1.7; }
code { font-family: Consolas, monospace; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #d4d8df; border-radius: 5px; cursor: pointer; background: #fff; }
.icon-button img { width: 18px; height: 18px; }
.icon-button:hover { background: #e9edf2; }
.copy-button { position: absolute; top: 10px; right: 10px; }
.copy-status { min-height: 24px; font-size: 13px; color: var(--green); margin: 7px 0 0; }
footer { text-align: center; padding: 26px 20px 35px; font-size: 13px; color: var(--muted); }
footer p { margin: 0 0 5px; }
.lightbox { width: min(1500px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 54px 20px 20px; border: 0; border-radius: 6px; }
.lightbox::backdrop { background: rgb(24 27 33 / 80%); }
.lightbox-image img { max-height: calc(100dvh - 190px); width: auto; max-width: 100%; margin-inline: auto; object-fit: contain; }
.lightbox-close { position: absolute; top: 10px; right: 10px; }
.lightbox p { text-align: left; font-size: 13px; color: var(--muted); margin: 16px auto 0; max-width: 850px; }
body:has(.lightbox[open]) { overflow: hidden; }
@media (max-width: 900px) {
  .sim-video-grid.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .benchmark-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .container { width: calc(100% - 32px); }
  .page-nav { gap: 17px; padding-inline: 12px; }
  .page-nav a { font-size: 12px; }
  .paper-header { padding-top: 32px; padding-bottom: 29px; }
  h1 { font-size: 23px; line-height: 1.35; margin-bottom: 21px; }
  .method-name { font-size: 35px; margin-bottom: 14px; }
  .desktop-break { display: none; }
  .paper-links { gap: 7px; }
  .resource-link { padding: 8px 10px; font-size: 12px; gap: 5px; }
  .paper-section { padding-top: 42px; padding-bottom: 42px; }
  h2 { font-size: 27px; margin-bottom: 20px; }
  h3 { font-size: 22px; }
  .abstract-band p { text-align: left; }
  figcaption, .overview-figure figcaption { font-size: 13px; }
  th, td { padding: 10px 12px; }
  .table-note { font-size: 11px; }
  .video-placeholder img { width: 29px; height: 29px; margin-bottom: 12px; }
  .video-placeholder p { font-size: 17px; }
  .video-placeholder span { font-size: 12px; }
  .video-experiment + .video-experiment { margin-top: 39px; }
  .sim-video-grid,
  .sim-video-grid.dense { grid-template-columns: 1fr; }
  .sim-video-card figcaption { font-size: 12px; }
  pre { font-size: 11px; padding-left: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}