/* Echo adaptations to the Nerfies project-page template (CC BY-SA 4.0). */
:root {
  --echo: #287b6b;
  --echo-dark: #23564f;
  --link: #267c8a;
  --ink: #363636;
  --muted: #707070;
  --line: #dedede;
}
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { color: #4a4a4a; background: #fff; }
a { color: var(--link); }
a:hover { color: var(--echo-dark); }
img, video { max-width: 100%; height: auto; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
::selection { background: #d9eae3; }
.skip-link { position: fixed; top: -80px; left: 15px; z-index: 50; padding: 10px 16px; color: #fff; background: var(--echo-dark); }
.skip-link:focus { top: 12px; }

/* Keep the original Nerfies centered header and desktop content width. */
.page-nav .navbar-menu { box-shadow: none; padding: 0; }
.page-nav .navbar-start { flex-grow: 1; justify-content: center; display: flex; flex-wrap: wrap; }
.page-nav .navbar-item { font-size: 14px; padding: .5rem 1rem; }
.page-nav .navbar-item:hover { background: #fafafa; color: var(--echo); }
.publication-header .hero-body { padding: 3rem 1.5rem 1.8rem; }
.publication-title { display: flex; align-items: center; justify-content: center; gap: .24em; font-size: clamp(1.85rem, 3.1vw, 2.625rem) !important; font-weight: 600; line-height: 1.16; letter-spacing: -.025em; margin-bottom: 1.5rem !important; text-align: left; }
.publication-title { transform: translateX(-28px); }
.publication-title-text { min-width: 0; text-wrap: balance; }
.title-line { display: block; }
.echo-name { white-space: nowrap; color: var(--echo); }
.echo-title { flex: 0 0 auto; line-height: 0; }
.echo-title img { display: block; width: 2.1em; height: 2.1em; }
.echo-title[data-logo="flat"] img { width: 1.9em; height: 1.9em; }
.publication-authors { max-width: 930px; margin: 0 auto; font-size: 1.1rem; line-height: 1.95; }
.author-block { white-space: nowrap; }
.author-block + .author-block { margin-left: .28em; }
.publication-authors a { color: var(--link) !important; }
.publication-authors sup, .publication-affiliations sup { font-size: .68em; }
.publication-affiliations { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem 1rem; max-width: 800px; margin: .8rem auto 0; font-size: .94rem; line-height: 1.8; }
.publication-affiliations span { white-space: nowrap; }
.author-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem 1.2rem; margin: .75rem 0 1.2rem; color: var(--muted); font-size: .8rem; }
.internship-note { flex-basis: 100%; margin-top: .3rem; }
.publication-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.publication-links .link-block { display: flex; }
.publication-links .button { margin: 5px 0; background-color: #363636; }
.publication-links .button:hover { background-color: #262626; }
.publication-links .button:disabled { background-color: #e4e7e5; color: #69726d; border-color: transparent; opacity: 1; cursor: not-allowed; box-shadow: none; }
.publication-links svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.publication-links .github-icon { fill: currentColor; stroke: none; }
.youtube-video { max-width: 800px; margin: auto; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #f2f4f3; }
.youtube-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.youtube-link { margin-top: .85rem; text-align: center; font-size: .86rem; }
.status-demo { max-width: 580px; margin: 0 auto 2.5rem !important; }
.status-caption { margin-top: .85rem; color: #666; font-size: .86rem; line-height: 1.65; text-align: center; }

/* The paper supplies the visual hierarchy; sections use standard typography. */
.section { padding: 3rem 1.5rem; }
.section-light { background: #f7f8f8; }
.section h2.title { margin-bottom: 1.5rem; }
.reading-width { max-width: 800px !important; margin-left: auto; margin-right: auto; }
p { line-height: 1.75; }
p + p { margin-top: 1rem; }
.section-intro { margin: 0 auto 2rem; }
.abstract-text { font-size: 16px; }
.paper-figure { margin: 2rem auto; }
.figure-link { display: block; cursor: zoom-in; }
.figure-link img { display: block; width: 100%; height: auto; }
.paper-figure figcaption { margin: 1rem auto 0; font-size: .93rem; line-height: 1.7; text-align: justify; }
.teaser-figure { max-width: 640px; margin-top: 2rem; margin-bottom: 0; }
.teaser-figure .figure-link { max-width: 440px; margin: auto; }
.method-figure { max-width: 760px; margin: 2rem auto 2.5rem; }
.method-figure figcaption { max-width: 760px; }
.method-text h3 { margin-top: 1.75rem; margin-bottom: .75rem; font-size: 1.35rem; }
.intervention-figure { max-width: 640px; margin-bottom: 0; }
.intervention-figure .figure-link { max-width: 460px; margin: auto; }

/* All tasks stay on the page, with each recorded signal under its scene. */
.task-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 24px; margin: 0 0 2.5rem; font-size: .93rem; }
.task-links a { border-bottom: 1px solid #adcbc5; padding-bottom: 2px; }
.task { max-width: 800px; margin: 0 auto; scroll-margin-top: 25px; }
.task + .task { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid #ddd; }
.task-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 1.1rem; }
.task-heading .title { font-size: 1.5rem; margin: 0 0 .4rem; }
.task-speed { display: inline-block; margin-left: .55rem; vertical-align: .13em; font: 500 .76rem/1.5 'Noto Sans', sans-serif; color: var(--echo-dark); white-space: nowrap; }
.task-heading p { font-size: .9rem; color: #666; }
.video-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.video-figure { margin: 0; min-width: 0; }
.video-label { font-family: 'Google Sans', sans-serif; font-size: 1.12rem; line-height: 1.5; text-align: center; margin-bottom: .7rem; font-weight: 500; color: #545454; }
.video-label sub { line-height: 0; }
.echo-video .video-label { color: var(--echo); }
.video-label span { font-weight: 400; }
.video-frame { position: relative; background: white; }
.video-frame video { display: block; width: 100%; height: auto; }
.pair-controls { display: flex; flex-shrink: 0; align-items: center; gap: 6px; padding-bottom: 2px; }
.pair-controls button, .pair-controls select { border: 1px solid #d2d6d4; background: white; border-radius: 4px; font-size: 12px; color: #4a4a4a; padding: 6px 10px; line-height: 1.4; }
.pair-controls button:hover { border-color: #869e94; color: var(--echo); }
.pair-controls .pair-play { background: #edf4f1; border-color: #bfd4ca; color: #296b5c; }
.pair-controls label { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-left: 5px; }
.pair-controls select { padding: 6px; }
.video-error { color: #a13e32; font-size: 13px; margin-top: 10px; }

/* Controls are outside the image so that they never obscure the signal. */
.media-controls { display: flex; align-items: center; gap: 8px; min-height: 39px; padding: 6px 9px; border: 1px solid #e4e6e4; border-top: none; background: #fff; border-radius: 0 0 4px 4px; }
.media-controls button { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 0; border-radius: 3px; padding: 0; background: none; color: #5e6863; }
.media-controls button:hover { background: #eff4f0; color: var(--echo); }
.media-controls svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.media-controls > span { flex: none; font: 11px/1 'Noto Sans', sans-serif; color: #727a76; font-variant-numeric: tabular-nums; }
.media-seek { appearance: none; -webkit-appearance: none; min-width: 20px; width: 100%; height: 4px; border-radius: 3px; background: linear-gradient(to right, var(--echo) var(--progress,0%), #e1e6e2 var(--progress,0%)); cursor: pointer; margin: 0 5px; }
.media-seek:disabled { cursor: default; opacity: .55; }
.media-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: var(--echo); }
.media-seek::-moz-range-thumb { border: none; width: 10px; height: 10px; border-radius: 50%; background: var(--echo); }
.video-figure:fullscreen { display: flex; flex-direction: column; justify-content: center; background: #fff; padding: 20px max(20px, calc((100vw - 1200px) / 2)); overflow: auto; }
.video-figure:fullscreen .video-frame { min-height: 0; display: flex; justify-content: center; }
.video-figure:fullscreen video { width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 150px); }
.video-figure:fullscreen .media-controls, .video-figure:fullscreen figcaption { flex-shrink: 0; }

/* Quantitative results are fully visible, as in the original academic template. */
.results-copy { margin-top: 2.5rem; }
.results-copy:first-of-type { margin-top: 0; }
.results-copy h3 { font-size: 1.35rem; margin-bottom: .75rem; }
.table-scroll { overflow-x: auto; margin: 1.6rem auto 0; }
.table { font-size: .86rem; color: #4a4a4a; background: #fff; }
.table caption { text-align: left; font-size: .82rem; color: #666; line-height: 1.6; padding-bottom: .9rem; }
.table th, .table td { padding: .85rem .8rem; vertical-align: middle; text-align: center; white-space: nowrap; }
.table th:first-child, .table td:first-child { text-align: left; }
.table thead th { background: #ecf3f0; color: #394a45; border-bottom: 1px solid #c4d4cc; }
.table tbody th { font-weight: 500; }
.results-table tbody td:nth-child(3) { color: var(--echo-dark); background: #f0f6f3; font-weight: 600; }
.table .ours-row { background: #f0f6f3; }
.ood-table { max-width: 800px; margin: auto; }
.footer { background: #fafafa; padding: 3rem 1.5rem; }
.footer p { font-size: .87rem; line-height: 1.75; }

/* Research figures can be inspected at their original resolution. */
dialog { margin: auto; width: min(1260px, 94vw); max-height: 92dvh; padding: 50px 22px 20px; border: 1px solid #d6ded8; border-radius: 6px; background: #fff; color: #4a4a4a; }
dialog::backdrop { background: #1d2926aa; }
dialog > button { position: absolute; top: 8px; right: 16px; background: none; border: none; color: #666; font-size: 13px; display: flex; gap: 10px; align-items: center; }
dialog > button span { font-size: 26px; }
dialog > img { display: block; width: auto; max-width: 100%; max-height: calc(92dvh - 130px); object-fit: contain; margin: auto; }
dialog > p { margin-top: 15px; text-align: center; font-size: 13px; }
body:has(dialog[open]) { overflow: hidden; }

@media (max-width: 768px) {
  .publication-title { transform: translateX(-10px); }
  /* Center the logo beside the first two title lines on narrow screens. */
  .echo-title { align-self: flex-start; margin-top: .11em; }
  .echo-title[data-logo="flat"] { margin-top: .21em; }
  .page-nav .navbar-item { padding: .5rem .75rem; font-size: 13px; }
  .publication-header .hero-body { padding-top: 2rem; }
  .publication-authors { font-size: 1rem; }
  .publication-affiliations { font-size: .85rem; gap: .15rem .8rem; }
  .section { padding: 2.5rem 1.25rem; }
  .section h2.title { font-size: 1.75rem; }
  .abstract-text { font-size: 15px; }
  .paper-figure figcaption { text-align: left; font-size: .86rem; }
  .task-heading { flex-wrap: wrap; gap: 13px; }
  .video-pair { gap: 16px; }
  .media-controls { gap: 5px; padding-inline: 5px; }
  .media-controls > span { font-size: 9px; }
  .media-controls button { width: 24px; height: 26px; }
  .task + .task { margin-top: 2.5rem; }
}
@media (max-width: 480px) {
  .publication-header .hero-body { padding: 1.75rem 1.25rem 1.3rem; }
  .publication-title { font-size: 1.85rem !important; line-height: 1.19; letter-spacing: -.025em; }
  .echo-title, .echo-title[data-logo="flat"] { margin-top: .39em; }
  .echo-title img, .echo-title[data-logo="flat"] img { width: 1.6em; height: 1.6em; }
  .page-nav .navbar-item { padding: .5rem .5rem; font-size: 12px; }
  .publication-authors { font-size: .94rem; line-height: 2; }
  .author-row { display: inline; }
  .publication-affiliations { font-size: .8rem; }
  .author-notes { font-size: .72rem; gap: .15rem .75rem; }
  .section { padding: 2.25rem 1.15rem; }
  .abstract-text { text-align: left !important; }
  .section h2.title { font-size: 1.65rem; }
  .method-text h3, .results-copy h3 { font-size: 1.2rem; }
  .task-links { gap: 8px 16px; font-size: 13px; }
  .task-heading .title { font-size: 1.3rem; }
  .task-speed { font-size: .7rem; }
  .task-heading p { font-size: 13px; }
  .pair-controls { gap: 5px; }
  .pair-controls label { margin-left: 1px; }
  .pair-controls button, .pair-controls select { font-size: 11px; padding: 6px 9px; }
  .video-pair { grid-template-columns: 1fr; gap: 21px; }
  .video-pair .echo-video { order: -1; }
  .video-label { font-size: 1rem; margin-bottom: .5rem; }
  .media-controls { gap: 8px; padding: 6px 8px; }
  .media-controls > span { font-size: 10px; }
  .table th, .table td { padding: .7rem .65rem; }
  .table { font-size: .8rem; }
  .footer { padding-block: 2rem; }
  .video-figure:fullscreen { padding: 10px; }
  dialog { padding: 45px 12px 15px; }
  dialog > p { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}