html { scroll-behavior: smooth; }
body { color: #4a4a4a; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 28px; }
.hero > .hero-body { padding-bottom: 1.5rem; }
.publication-header .container { max-width: 1240px; width: 100%; }
.publication-header .publication-title { font-size: clamp(2rem, 3.6vw, 3rem); }
.publication-title { line-height: 1.125; }
.publication-authors { font-size: 22px; line-height: 1.5; }
.author-list { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .3em; }
.affiliations { margin-top: .4rem; }
.affiliations .author-block { margin: 0 .3rem; font-size: 22px; }
.publication-venue { margin: .65rem auto .5rem; font-family: 'Google Sans', sans-serif; font-size: 24px; line-height: 1.5; }
.publication-venue .oral { color: #ff0000; }
.publication-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .3rem; }
.publication-links .button { font-size: 1.25rem; }
.publication-links .icon img { width: auto; height: 1em; filter: brightness(0) invert(1); }
video { display: block; width: 100%; height: auto; background: #f5f5f5; }
.teaser .hero-body { padding-left: 0; padding-right: 0; }
.teaser video { aspect-ratio: 16/9; background: white; }
.tldr { margin: 1.75rem auto 0; max-width: 890px; text-align: center; font-family: 'Noto Sans', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.5; }
.section { padding: 3rem 1.5rem; }
.section-intro { max-width: 850px; margin: 0 auto 2rem; text-align: center; font-size: 20px; line-height: 1.5; }
.content { font-size: 20px; line-height: 1.5; }
.prose { max-width: 850px; margin-left: auto; margin-right: auto; }
.real-world { padding: 3.5rem .75rem 3rem; }
.real-world .container { max-width: none; width: 100%; }
.task-row { margin: 2.8rem auto 0; }
.task-row + .task-row { margin-top: 5rem; }
.task-row .title { margin-bottom: .9rem; }
.task-row .columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-left: 0; margin-right: 0; }
.task-row .column { min-width: 0; padding: 0; display: flex; flex-direction: column; }
.task-row video { aspect-ratio: 4/3; object-fit: contain; flex-shrink: 0; }
.media-caption { flex-grow: 1; display: flex; align-items: flex-end; justify-content: center; margin: 0 0 .25rem; font-size: 18px; font-weight: 700; line-height: 1.5; }
.figure-caption, figcaption { font-size: 20px; line-height: 1.5; color: #666; text-align: center; margin-top: .7rem; }
.paper-figure { display: flex; justify-content: center; width: 100%; margin: 1.7rem auto; }
.paper-figure img { display: block; flex: none; width: 100%; height: auto; }
#challenge .paper-figure { max-width: 800px; margin-left: auto; margin-right: auto; }
.method-figure { margin: 2rem auto; }
.method-extension { margin-top: 3.5rem; scroll-margin-top: 28px; }
.tabs { margin-top: 1.7rem; }
.tabs button { appearance: none; border: none; border-bottom: 1px solid #dbdbdb; background: none; color: #4a4a4a; font: inherit; padding: .5em 1em; cursor: pointer; margin-bottom: -1px; }
.tabs .is-active button { border-bottom-color: #3273dc; color: #3273dc; }
.tabs button:hover { color: #3273dc; }
.clip-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.3rem; }
.clip-buttons button { background: white; border: 1px solid #dbdbdb; border-radius: 4px; color: #4a4a4a; padding: .4rem .8rem; font: inherit; cursor: pointer; }
.clip-buttons button[aria-pressed="true"] { background: #363636; color: white; border-color: #363636; }
.rollout-figure { max-width: 860px; margin: auto; }
.rollout-figure video { max-height: 720px; object-fit: contain; background: white; }
.understanding-text { margin-top: 2rem; gap: 1.5rem; }
.secondary-heading { margin-top: 3.5rem; }
.closing-line { font-family: 'Noto Sans', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.5; text-align: center; margin: 2rem auto 1rem; max-width: 820px; }
.footer { margin-top: 2rem; }
.footer .content { font-size: 14px; }
.skip-link { position: absolute; left: -9999px; top: .5rem; padding: .5rem 1rem; background: white; z-index: 10; }
.skip-link:focus { left: .5rem; }
button:focus-visible, a:focus-visible, video:focus-visible { outline: 3px solid #3273dc; outline-offset: 3px; }
.media-missing { aspect-ratio: 16/9; display: grid; place-content: center; border: 1px solid #eee; background: #fafafa; color: #777; font-size: 15px; }
@media (min-width: 1024px) {
  .publication-title .title-line { display: block; white-space: nowrap; }
}
@media (max-width: 768px) {
  .hero .hero-body { padding: 2rem 1.2rem 1rem; }
  .publication-title { font-size: 2rem !important; }
  .publication-authors { font-size: 18px; }
  .affiliations .author-block { font-size: 17px; }
  .publication-venue { font-size: 20px; }
  .teaser .hero-body { padding: 0 1rem 1rem; }
  .tldr { font-size: 18px; text-align: left; margin-top: 1.3rem; }
  .section { padding: 2.2rem 1.2rem; }
  .title.is-3 { font-size: 1.65rem; line-height: 1.25; }
  .title.is-4 { font-size: 1.3rem; }
  .content { font-size: 18px; }
  .method-extension { margin-top: 2.5rem; }
  .content.has-text-justified { text-align: left !important; }
  .section-intro, .figure-caption, figcaption { font-size: 18px; }
  .task-row { margin-top: 2rem; }
  .task-row + .task-row { margin-top: 3.5rem; }
  .task-row .columns { grid-template-columns: 1fr; }
  .task-row .column { margin-bottom: .7rem; }
  .media-caption { font-size: 16px; }
  .tabs button { padding-left: .75em; padding-right: .75em; }
  .closing-line { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }