body {
  font-family: 'Noto Sans', sans-serif;
}


.footer .icon-link {
  font-size: 25px;
  color: #000;
}

.link-block a {
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Placeholder links (paper not yet announced, code not yet public). */
.link-block a.is-faint {
  opacity: 0.35;
  pointer-events: none;
}

.method-name {
  font-variant: small-caps;
}


.teaser .hero-body {
  padding-top: 0;
  padding-bottom: 3rem;
}

.teaser {
  font-family: 'Google Sans', sans-serif;
}


.publication-title {}

.publication-banner {
  max-height: parent;

}

.publication-banner video {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  object-fit: fit;
}

.publication-header .hero-body {}

.publication-title {
  font-family: 'Google Sans', sans-serif;
}

.publication-authors {
  font-family: 'Google Sans', sans-serif;
}

.publication-venue {
  color: #555;
  width: fit-content;
  font-weight: bold;
}

.publication-awards {
  color: #ff3860;
  width: fit-content;
  font-weight: bolder;
}

.publication-authors {}

.publication-authors a {
  color: hsl(204, 86%, 53%) !important;
}

.publication-authors a:hover {
  text-decoration: underline;
}

.author-block {
  display: inline-block;
}

/* Pin superscripts in the author rows to one absolute size (the browser default, smaller, of the
   1.25rem name line), so the marks in the smaller legend row match the ones next to the names. */
.publication-authors sup {
  font-size: 1.04rem;
}

/* The envelope glyph renders small next to digits; scale it up inside the <sup>. */
.mail-mark {
  font-size: 1.4em;
}

/* The dagger glyph sits shorter than digits; scale it to match the affiliation numbers. */
.dagger-mark {
  font-size: 1.4em;
  /* Shift down without changing line height, so it lines up with the digits and envelope. */
  position: relative;
  top: 0.15em;
}

.publication-banner img {}

.publication-authors {
  /*color: #4286f4;*/
}

.publication-video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;

  overflow: hidden;
  border-radius: 10px !important;
}

.publication-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.publication-body img {}

.teaser img {
  width: 100%;
  margin-bottom: 1rem;
}

.method-figure {
  width: 100%;
  margin: 0 auto 1.5rem;
  display: block;
}

/* Video comparisons (static/js/comparison.js). */

.compare-block {
  margin-bottom: 1rem;
}

.compare-header {
  margin-bottom: 0.75rem;
}

.compare-header .title {
  margin-bottom: 0;
}

/* The play/pause button floats over the top-right corner of the video row it controls. */
.compare-stage {
  position: relative;
}

.compare-toggle {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  opacity: 0.8;
}

.compare-toggle:hover,
.compare-toggle:focus {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  opacity: 1;
}

/* Bulma offsets the first icon of a button to make room for text; this button has none. */
.compare-toggle .icon {
  margin: 0 !important;
}

/* The button holds both icons; .is-paused, set by the script, picks the visible one. */
.compare-toggle .icon-play,
.compare-toggle.is-paused .icon-pause {
  display: none;
}

.compare-toggle.is-paused .icon-play {
  display: inline-flex;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

@media screen and (max-width: 768px) {
  .compare-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.compare-grid figure {
  margin: 0;
}

.compare-grid video {
  display: block;
  width: 100%;
  border-radius: 6px;
  background: #000;
  cursor: pointer;
}

.compare-grid figcaption {
  margin-top: 0.25rem;
  text-align: center;
  font-size: 0.9rem;
}

/* BibTeX block with a copy button (static/js/bibtex.js). */

.bibtex-block {
  position: relative;
}

.content .bibtex-block pre {
  padding: 1.25rem 1.5rem;
  border-radius: 6px;
  background: #1e1e1e;
  color: #f5f5f5;
}

.bibtex-block .copy-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
}

.bibtex-block .copy-button:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Loading overlay over a comparison while its videos download (static/js/comparison.js). */

.compare-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  transition: opacity 0.3s;
}

.compare-loading.is-done {
  opacity: 0;
  pointer-events: none;
}

.compare-loading-bar {
  width: 50%;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #dbdbdb;
}

.compare-loading-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: #363636;
  transition: width 0.2s;
}

.compare-loading-text {
  font-size: 0.9rem;
  color: #363636;
}

/* Shared timeline below a comparison's videos (static/js/comparison.js). */

.compare-timeline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.compare-timeline input[type="range"] {
  flex: 1;
  margin: 0;
  accent-color: #363636;
  cursor: pointer;
}

.compare-timeline input[type="range"]:disabled {
  cursor: default;
  opacity: 0.5;
}

.compare-time {
  min-width: 6.5em;
  color: #4a4a4a;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Context marker on the timeline and dimmed generated videos during the context (static/js/comparison.js). */

.compare-track {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
}

.compare-track input[type="range"] {
  flex: 1;
}

.compare-context-mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  transform: translateX(-1px);
  border-radius: 1px;
  background: #e0442c;
  pointer-events: none;
}

.compare-grid video {
  transition: filter 0.3s;
}

/* Every video but the first (ground truth) is generated; dim it while the context plays. */
.compare-grid-block.is-context .compare-grid figure:not(:first-child) video {
  filter: brightness(0.2);
}

/* One-line label above a comparison, e.g. the Memory Maze forward-walk length. */
.compare-caption {
  margin-bottom: 0.35rem;
  color: #7a7a7a;
  font-size: 0.9rem;
}

/* Slot filling video: full content width, like the teaser. A blurred black shadow on the wrapper
   continues the video's black edges outwards and fades them into the page, so its border tapers to
   white; the video itself, its label and its controls stay untouched. The shadow is on a div because
   Chrome can draw video on its own hardware layer and skip effects on the video element. The margin
   keeps the glow clear of the heading and text. */
.slot-filling-glow {
  --glow: 2rem;
  margin: calc(var(--glow) * 1.5) 0 calc(1rem + var(--glow) * 1.5);
  background: #000;
  /* A dense inner shadow keeps the edge solid black; a wider, fainter one carries the fade further out. */
  box-shadow:
    0 0 var(--glow) calc(var(--glow) * 0.4) #000,
    0 0 calc(var(--glow) * 2) calc(var(--glow) * 0.5) rgba(0, 0, 0, 0.2);
}

.slot-filling-video {
  display: block;
  width: 100%;
  background: #000;
}

@media screen and (max-width: 768px) {
  .slot-filling-glow {
    --glow: 1rem;
  }
}