/* Bounded fluid artwork, contained within the existing 85% text measure. */
.ascii-picture {
  display: block;
  position: relative;
  flex: none;
  align-self: flex-start;
  width: min(var(--ascii-width, clamp(400px, 42.5%, 640px)), 85%);
  aspect-ratio: 3 / 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ascii-bg, transparent);
  color: var(--theme-fg);
}
:root[data-theme="dark"] .ascii-picture {
  background: var(--ascii-bg-dark, var(--ascii-bg, transparent));
}
.ascii-picture ascii-picture,
.ascii-picture canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.ascii-picture ascii-picture {
  /* Canvas bitmap rounding must not change the reserved 3:2 layout area. */
  position: absolute;
  inset: 0;
}
@media (max-width: 809.98px) {
  .ascii-picture {
    width: min(var(--ascii-mobile-width, 400px), 85%);
  }
}