.manim-embed {
  position: relative;
  width: 100%;
  margin: 1.5rem 0;
  overflow: hidden;
  border: 1px solid rgba(144, 164, 174, .28);
  border-radius: 14px;
  background: #1c1c1c;
  color: #f5f7fa;
}

.manim-embed__canvas {
  width: 100%;
  height: var(--manim-height, 420px);
  min-height: 240px;
}

.manim-embed__canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.manim-embed__status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  background: #1c1c1c;
}

.manim-embed--ready .manim-embed__status {
  display: none;
}

.manim-embed--failed .manim-embed__status {
  color: #ffb4ab;
}

.manim-embed figcaption {
  padding: .65rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #d6dbe1;
  font-size: .9rem;
  text-align: center;
}

@media (max-width: 600px) {
  .manim-embed__canvas {
    height: min(var(--manim-height, 420px), 68vw);
  }
}