:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #292929;
  background: #fff;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: #1772d0; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }
:focus-visible { outline: 3px solid #1772d0; outline-offset: 5px; }

.paper-header {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px 36px;
  text-align: center;
}
.home-link { display: inline-block; font-size: 15px; margin-bottom: 28px; }
h1 {
  margin: 0 0 25px;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -1.3px;
}
.authors { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 25px; margin: 0; font-size: 20px; line-height: 1.5; }
.authors a { white-space: nowrap; }
.affiliation { margin: 12px 0 22px; font-size: 18px; }
.submission-status { margin: 12px 0 22px; font-size: 18px; color: #6b6b6b; }
.publication-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 22px; font-size: 18px; }
.paper-venue { display: flex; flex-basis: 100%; align-items: center; justify-content: center; gap: 22px; }
.paper-link, .resource-link { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.resource-link[aria-disabled="true"] { cursor: default; text-decoration: none; }
.coming-soon { color: #6b6b6b; font-size: 0.8em; }
.venue { padding-left: 22px; border-left: 1px solid #d9d9d9; }
.presented-as { margin: 18px 0 0; font-size: 16px; color: #6b6b6b; }
.hero { width: min(600px, calc(100% - 48px)); margin: 0 auto; }
.submission-video { margin-bottom: 64px; }
video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #111; }
.hero video { border-radius: 5px; }
.hero-gif { width: min(900px, calc(100% - 48px)); }
.hero img { display: block; width: 100%; height: auto; border-radius: 8px; }
h2 { margin: 0 0 26px; text-align: center; font-size: 30px; line-height: 1.25; font-weight: 500; letter-spacing: -0.5px; }
.demonstrations { margin: 0 auto; padding-top: 72px; max-width: 1280px; border-top: 1px solid #e5e5e5; }
.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 12.5% 12px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.slide video { border-radius: 5px; }
/* Hide floating badges injected by the Video Speed Controller extension. */
.vsc-controller { display: none !important; }
figcaption { text-align: center; margin-top: 16px; font-size: 19px; }
.carousel-controls { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 12px; }
[hidden] { display: none !important; }
.arrow { width: 44px; height: 44px; border: 1px solid #d5d5d5; border-radius: 50%; color: #333; background: #fff; font-size: 24px; cursor: pointer; }
.arrow:hover { background: #f3f5f7; border-color: #777; }
.dots { display: flex; gap: 2px; }
.dots button { border: 0; background: transparent; width: 32px; height: 44px; padding: 0; cursor: pointer; display: grid; place-items: center; }
.dots button::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c9c9c9; }
.dots button[aria-current="true"]::after { background: #1772d0; transform: scale(1.25); }
.slide-status { text-align: center; color: #6b6b6b; font-size: 13px; margin: 10px 0 0; }
.abstract { max-width: 900px; margin: 58px auto 0; padding: 38px 24px 0; border-top: 1px solid #e5e5e5; }
.abstract p { margin: 0; font-size: 18px; line-height: 1.7; text-align: justify; }

/* Feature sections: large title, caption beneath, then an interactive component. */
.feature { max-width: 960px; margin: 0 auto; padding: 72px 24px; border-top: 1px solid #e5e5e5; }
.abstract + .feature { margin-top: 72px; }
.feature h2 { margin-bottom: 14px; font-size: 34px; }
.caption { max-width: 760px; margin: 0 auto 32px; color: #555; font-size: 17px; line-height: 1.65; text-align: center; }
.media { position: relative; border-radius: 8px; overflow: hidden; background: #111; }
.media video { border-radius: 0; }
.media.missing::after {
  content: attr(data-missing);
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #bbb; font-size: 15px; letter-spacing: 0.3px; pointer-events: none;
}
.media.missing video, .media.missing video.active, .media.missing img { opacity: 0; }
.media.still { margin: 0; }
.media.still img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media.still.missing { aspect-ratio: 16 / 9; }

.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: #f0f2f5; }
.segmented button { border: 0; border-radius: 999px; padding: 7px 15px; background: transparent; color: #444; font-size: 14px; cursor: pointer; white-space: nowrap; }
.segmented button:hover { color: #111; }
.segmented button[aria-pressed="true"] { background: #fff; color: #1772d0; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }

/* Setup: CAD viewer beside a short video. */
.setup-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: stretch; }
.cad-viewer { position: relative; min-height: 420px; border: 1px solid #e3e6ea; border-radius: 8px; background: linear-gradient(#fbfcfd, #eef1f4); overflow: hidden; }
.cad-layers { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1; justify-content: center; width: max-content; max-width: calc(100% - 24px); background: rgba(240, 242, 245, 0.92); }
.cad-canvas { position: absolute; inset: 0; cursor: grab; }
.cad-canvas:active { cursor: grabbing; }
.cad-canvas canvas { display: block; width: 100%; height: 100%; }
.cad-hint { position: absolute; bottom: 10px; left: 0; right: 0; margin: 0; text-align: center; color: #888; font-size: 13px; pointer-events: none; }

/* Scrubber */
.scrub-bar { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.scrub-play { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #1772d0; color: #fff; cursor: pointer; }
.scrub-play:hover { background: #125ead; }
.scrub-play .icon-pause, .scrub-play.playing .icon-play { display: none; }
.scrub-play.playing .icon-pause { display: block; }
.scrub-range { flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; --progress: 0%; }
.scrub-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, #1772d0 var(--progress), #dde1e6 var(--progress)); }
.scrub-range::-moz-range-track { height: 6px; border-radius: 3px; background: #dde1e6; }
.scrub-range::-moz-range-progress { height: 6px; border-radius: 3px; background: #1772d0; }
.scrub-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 3px solid #1772d0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.scrub-range::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid #1772d0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.scrub-time { flex: none; min-width: 92px; color: #555; font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }

/* Graphs linked to the scrubber */
.graph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.graph { margin: 0; padding: 14px 14px 10px; border: 1px solid #e3e6ea; border-radius: 8px; }
.graph-title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #333; text-align: left; }
.graph-plot { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: pan-y; user-select: none; font-family: Arial, Helvetica, sans-serif; }
.graph-plot.panning { cursor: grabbing; }
.graph-plot .grid { stroke: #eef0f3; }
.graph-plot .axis { stroke: #bbb; }
.graph-plot .tick { fill: #888; font-size: 11px; }
.graph-plot .axis-label { fill: #666; font-size: 12px; }
.graph-plot .placeholder-note { fill: #aaa; font-size: 11px; font-style: italic; }
.graph-plot .series { fill: none; stroke-width: 1.8; }
.graph-plot .playhead { stroke: #222; stroke-width: 1.5; }
.graph-plot .playhead-dot { stroke: #fff; stroke-width: 1.5; }
.graph-plot .hover { stroke: #999; stroke-dasharray: 3 3; }
.graph-plot .hover-dot { stroke: #fff; stroke-width: 1; opacity: 0.7; }
.graph-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.graph-readout { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: #555; font-size: 13px; font-variant-numeric: tabular-nums; }
.graph-readout span { display: inline-flex; align-items: center; gap: 5px; }
.graph-readout i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.graph-reset { flex: none; padding: 4px 10px; border: 1px solid #d5d8dc; border-radius: 6px; background: #fff; color: #444; font-size: 12px; cursor: pointer; }
.graph-hint { margin: 10px 0 0; text-align: center; color: #888; font-size: 13px; }
.precision-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; align-items: start; }
/* Handheld tracking: the real-time video and its reconstruction side by side at equal height (columns in
   proportion to their aspect ratios, 16:9 and 1280:1092), on the scrubber's shared timeline. */
.handheld-pair { display: grid; grid-template-columns: 1.778fr 1.172fr; gap: 12px; align-items: start; }
.handheld-pair .media.sim { background: #fff; border: 1px solid #e3e6ea; }
.handheld-pair .media.sim video { aspect-ratio: 1280 / 1092; background: #fff; }
.handheld-pair video { cursor: pointer; }
.handheld-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; margin: 8px 0 0; color: #555; font-size: 13px; }
.handheld-legend span { display: inline-flex; align-items: center; gap: 6px; }
.handheld-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.handheld-legend b { font-weight: normal; color: #111; }

/* Synced multi-view video: all play together, one is shown. */
.view-switch { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.view-switch .media { width: 100%; }
.stack video { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.stack video.active { position: relative; opacity: 1; pointer-events: auto; }

/* Smoothing demo */
.smoothing-demo { margin: 0 auto 48px; padding: 24px; border: 1px solid #e3e6ea; border-radius: 8px; }
.equation { margin: 0 0 18px; text-align: center; line-height: 1.6; font-family: "Times New Roman", Times, serif; font-size: 21px; }
.eq-line { display: block; margin: 6px 0; }
.paren { font-size: 2.2em; font-weight: 300; line-height: 1; vertical-align: middle; }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 2px; }
.frac-top { padding: 0 4px 3px; border-bottom: 1px solid currentColor; }
.frac-bottom { padding-top: 3px; }
.num { display: inline-block; min-width: 1.6em; padding: 0 5px; border-radius: 4px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; font-weight: 600; cursor: ew-resize; user-select: none; touch-action: none; }
.num[data-param="H"] { color: #b1500b; background: #fdebd9; border-bottom: 2px dashed #e07b1a; }
.num[data-param="sigma"] { color: #6d2fb3; background: #efe4fb; border-bottom: 2px dashed #8b4fd4; }
.num:hover, .num.dragging { filter: brightness(0.95); }
.smoothing-plot { display: block; width: 100%; height: auto; font-family: Arial, Helvetica, sans-serif; }
.smoothing-plot .axis { stroke: #bbb; stroke-width: 1; }
.smoothing-plot .tick { fill: #888; font-size: 12px; }
.smoothing-plot .overlap { fill: #f6f0e6; }
.smoothing-plot .chunk1 { stroke: #1772d0; }
.smoothing-plot .chunk2 { stroke: #e07b1a; }
.smoothing-plot .chunk1, .smoothing-plot .chunk2 { fill: none; stroke-width: 2; stroke-opacity: 0.55; }
.smoothing-plot .raw { fill: none; stroke: #999; stroke-width: 1.5; stroke-dasharray: 4 4; }
.smoothing-plot .blended { fill: none; stroke: #222; stroke-width: 2.5; }
.smoothing-plot .dot { fill: #222; }
.smoothing-plot .weight { fill: none; stroke: #8b4fd4; stroke-width: 2; }
.smoothing-plot .weight-faint { fill: none; stroke: #8b4fd4; stroke-width: 1; stroke-opacity: 0.25; }
.smoothing-plot .label { fill: #666; font-size: 13px; }
.smoothing-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; margin-top: 14px; }
.smoothing-controls label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #444; }
.smoothing-controls small { color: #888; }
.smoothing-controls input[data-param="H"] { accent-color: #e07b1a; }
.smoothing-controls input[data-param="sigma"] { accent-color: #8b4fd4; }
.plot-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 14px; color: #444; }
.plot-legend li { display: inline-flex; align-items: center; gap: 7px; }
.swatch { display: inline-block; width: 22px; height: 0; border-top: 2.5px solid; }
.swatch.chunk1 { border-color: rgba(23, 114, 208, 0.6); }
.swatch.chunk2 { border-color: rgba(224, 123, 26, 0.6); }
.swatch.blended { border-color: #222; }
.swatch.raw { border-top: 2px dashed #999; }
.method-toggle { display: flex; justify-content: center; margin-bottom: 20px; }
.method-panel { animation: panel-in 0.25s ease; }
@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .method-panel { animation: none; } }
.te-plot { display: block; width: 100%; height: auto; font-family: Arial, Helvetica, sans-serif; }
.te-plot .axis { stroke: #bbb; }
.te-plot .tick { fill: #888; font-size: 12px; }
.te-plot .label { fill: #666; font-size: 13px; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.te-plot .label.strong { fill: #222; font-weight: 600; }
.te-plot .te-now { stroke: #bbb; stroke-dasharray: 4 4; }
.te-plot .te-chunk { fill: none; stroke: #1772d0; stroke-width: 1.5; }
.te-plot .te-executed { fill: none; stroke: #222; stroke-width: 2.5; }
.te-plot .te-dot { fill: #e07b1a; fill-opacity: 0.8; stroke: #fff; stroke-width: 1; }
.te-plot .te-result { fill: #222; stroke: #fff; stroke-width: 2; }
.swatch.te-chunk { border-color: rgba(23, 114, 208, 0.6); }
.dot-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #e07b1a; }
.dot-swatch.result { background: #222; }
.te-explain { max-width: 720px; margin: 16px auto 0; color: #555; font-size: 15px; line-height: 1.65; }
.smoothing-stat { margin: 10px 0 0; text-align: center; color: #666; font-size: 14px; }

/* Citation */
.citation { max-width: 960px; margin: 0 auto; padding: 72px 24px 96px; border-top: 1px solid #e5e5e5; }
.demonstrations + .citation { margin-top: 72px; }
.bibtex { position: relative; }
.bibtex pre { margin: 0; padding: 20px 22px; overflow-x: auto; border-radius: 8px; background: #f5f6f8; font-size: 14px; line-height: 1.6; }
.copy-bibtex { position: absolute; top: 10px; right: 10px; padding: 5px 12px; border: 1px solid #d5d8dc; border-radius: 6px; background: #fff; color: #444; font-size: 13px; cursor: pointer; }
.copy-bibtex:hover { border-color: #888; }

@media (max-width: 760px) {
  .setup-grid { grid-template-columns: 1fr; }
  .cad-viewer { min-height: 380px; }
  .graph-grid, .precision-row, .handheld-pair { grid-template-columns: 1fr; }
  .handheld-legend { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .paper-header { padding: 20px 20px 28px; }
  .home-link { margin-bottom: 24px; }
  h1 { letter-spacing: -0.7px; }
  .desktop-break { display: none; }
  .authors { font-size: 17px; gap: 6px 16px; }
  .affiliation, .submission-status, .publication-links { font-size: 16px; }
  .hero { width: calc(100% - 40px); }
  .demonstrations { margin-top: 36px; }
  h2 { font-size: 26px; margin-bottom: 20px; }
  .carousel-track { padding-inline: 7%; gap: 12px; }
  .carousel-controls { gap: 14px; }
  .abstract { margin: 38px 20px 0; padding: 30px 0 0; }
  .feature, .citation { padding: 48px 16px; }
  .abstract + .feature, .demonstrations + .citation { margin-top: 48px; }
  .demonstrations { padding-top: 48px; }
  .feature h2 { font-size: 26px; }
  .caption { font-size: 16px; text-align: left; }
  .smoothing-demo { padding: 16px 12px; }
  .smoothing-controls { grid-template-columns: 1fr; }
  .equation { font-size: 17px; }
  .scrub-bar { flex-wrap: wrap; gap: 10px; }
  .scrub-range { flex-basis: calc(100% - 160px); }
  .scrub-speed { margin-left: auto; }
  .abstract p { font-size: 16px; text-align: left; }
}

/* Title block, styled after mobile-aloha.github.io: large name, subtitle beneath. */
.paper-header .publication-title {
  margin: 0 0 14px;
  font-family: 'Google Sans', Arial, Helvetica, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.125;
  letter-spacing: normal;
  color: #363636;
}
.paper-header .publication-subtitle {
  margin: 0 0 26px;
  font-family: 'Google Sans', Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: normal;
  color: #4a4a4a;
}
.paper-header .authors { font-family: 'Google Sans', Arial, Helvetica, sans-serif; font-size: 24px; }

/* Autonomous Skills: two-column video grid. */
.skills { max-width: 1120px; }
.skills h2 { margin-bottom: 32px; }
.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.skill { margin: 0; }
.skill .media { border: 1px solid #bbb; border-radius: 10px; }
.skill figcaption { margin-top: 10px; font-size: 17px; }
.skill .placeholder { display: grid; place-items: center; aspect-ratio: 16 / 9; background: #f0f2f5; border-style: dashed; color: #999; font-size: 15px; }
.skills + .citation { margin-top: 0; }

@media (max-width: 640px) {
  .paper-header .publication-title { font-size: 36px; }
  .paper-header .publication-subtitle { font-size: 22px; }
  .paper-header .authors { font-size: 18px; }
  .skills-grid { grid-template-columns: 1fr; }
}
.feature h2 + .media, .feature h2 + .scrubber { margin-top: 26px; }
.affiliation-logo { display: block; width: min(380px, 80%); height: auto; margin: 18px auto 22px; }
.clip-switch { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.clip-switch .media { width: 100%; }
.compare-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; align-items: start; }
@media (max-width: 700px) { .compare-pair { grid-template-columns: 1fr; } }
.feature h2 + .setup-grid { margin-top: 26px; }