/* Inline concept animations inside /know handout sections.
 *
 * The SAME Manim clips that play inline in a /learn lesson (web/learn_render.py →
 * .lx-anim in 17-learn.css) also play inline in the matching /know handout section.
 * /know does NOT load 17-learn.css, so this page-scoped sheet (loaded directly by
 * know/topics.html, like 20-simulate.css — no Tailwind rebuild) restyles them under
 * their own `hz-` classes. web/handout_render.py emits <figure class="hz-figure">
 * <video class="hz-anim">…; playback is driven by handout-anim.js (a clip in a
 * collapsed <details> fold plays when the fold opens, pauses off-screen). The handout
 * PDF path (web/handout_latex.py) drops these clips entirely — website only.
 */

.hz-figure {
  margin: 1.35rem auto;
  width: 100%;
  max-width: 40rem;          /* a full-width diagram, but not wider than the reading column */
}

.hz-anim {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #0b1020;       /* the .lx-figure diagram matte — the clip reads as a live figure */
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
  cursor: pointer;           /* tap toggles play/pause (handout-anim.js) */
}

.hz-figure figcaption {
  text-align: center;
  color: #8b9bb0;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.45;
  margin-top: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  /* handout-anim.js also pauses + shows native controls; this keeps a static poster
     visible even before the script runs. */
  .hz-anim { cursor: default; }
}