/* Slightly deeper dark background, closer to polyscope.run. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #16171d;
  --md-code-bg-color: #1f2029;
}
/* Screenshot under each snippet. The PNGs are transparent, so no frame. */
.md-typeset img.shot {
  display: block;
  margin: 0.4rem auto 1.2rem;
}
/* Module cards on the landing page. */
.md-typeset .grid.cards > ul > li { border-radius: 8px; }

/* Footer maple leaf. */
.md-copyright .maple { font-size: 1.1em; margin-left: 0.25em; }

/* Animations: dark cards (their frames carry the site's dark background). */
.md-typeset video.shot {
  display: block;
  width: 640px;
  max-width: 100%;
  height: auto;
  margin: 0.4rem auto 1.2rem;
  border-radius: 8px;
  background: #16171d;
}

/* The landing page's teaser: wider than the content column, centred on the
   page, but never more than 1024 px wide or ~48% of the window's height
   (106vh of width at its 1920:872 aspect). The file stays 1920 px so it is
   sharp at that size on high-DPI screens. */
.md-typeset video.shot.hero {
  width: min(1024px, calc(100vw - 2rem), 106vh);
  max-width: none;
  margin: 0.4rem 0 0.4rem 50%;
  transform: translateX(-50%);
}
/* A wide animation on a page with sidebars: the full content column. */
.md-typeset video.shot.wide {
  width: 100%;
}
/* Module cards on the landing page: each card's animation spans the card. */
.md-typeset .grid.cards.modules video.shot {
  width: 100%;
  margin: 0 0 0.6rem;
}
.md-typeset p.caption {
  text-align: center;
  color: var(--md-default-fg-color--light);
  font-size: 0.8rem;
  margin-top: 0;
}