@media screen and (prefers-reduced-motion: no-preference) {
  html.anim :is([data-anim="aparecer"], [data-anim="golpe"]):not([data-anim-visto]),
  html.anim [data-anim="escalonado"]:not([data-anim-visto]) > *,
  html.anim [data-anim="crecer"]:not([data-anim-visto]) :is(rect, path):not(.rejilla, .referencia, .marca, .m-pista, [data-fijo]),
  html.anim [data-anim="trazar"]:not([data-anim-visto]) :is(path, line, polyline, polygon, circle, ellipse, rect):not(.rejilla, .referencia, .marca, .m-pista, [data-fijo]) {
    opacity: 0;
  }
}
:where(html.anim [data-anim="golpe"]) { position: relative; }
:where(html.anim :is(span, b, strong, em, i, data, output)[data-anim="golpe"]) { display: inline-block; }
@media screen and (prefers-reduced-motion: no-preference) {
[data-anim-golpe]::after {
  content: "";
  position: absolute;
  left: var(--anim-bx, 0); top: var(--anim-by, 0); width: var(--anim-bw, 100%); height: var(--anim-bh, 100%);
  border-radius: 50%;
  pointer-events: none;
  background: none;
  background: radial-gradient(closest-side,
    color-mix(in srgb, light-dark(var(--superficie), var(--tinta)) 46%, transparent) 0%,
    color-mix(in srgb, light-dark(var(--superficie), var(--tinta)) 14%, transparent) 58%,
    transparent 100%);
  opacity: 0;
  animation: anim-brillo 1100ms linear var(--anim-retraso, 0ms) both;
}
}
@keyframes anim-brillo {
  0% { opacity: 0; }
  10% { opacity: 1; }
  25% { opacity: .62; }
  45% { opacity: .33; }
  70% { opacity: .13; }
  100% { opacity: 0; }
}
canvas[data-mundo] {
  --mundo-horizonte: 66%;
  --m-alto: var(--pagina);
  --m-bajo: light-dark(var(--pagina), color-mix(in srgb, var(--pagina) 80%, var(--tinta-3)));
  --m-lejos: light-dark(color-mix(in srgb, var(--pagina) 72%, var(--linea)), color-mix(in srgb, var(--pagina) 91%, var(--tinta-3)));
  --m-halo: light-dark(transparent, color-mix(in srgb, var(--tinta) 15%, transparent));
  --h: var(--mundo-y, var(--mundo-horizonte));
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background:
    radial-gradient(ellipse min(58%, 820px) min(30%, 240px) at 50% var(--h), var(--m-halo), transparent 70%),
    linear-gradient(to bottom, var(--m-alto) calc(var(--h) - 340px), var(--m-bajo) var(--h), var(--m-lejos) var(--h), var(--pagina) calc(var(--h) + 460px));
}
:where(:has(> canvas[data-mundo])) { position: relative; isolation: isolate; }
@media (max-width: 640px) {
  canvas[data-mundo] { --mundo-horizonte: 74%; }
}
@media print {
  [data-anim], [data-anim="escalonado"] > * { opacity: 1 !important; }
}