:root { color-scheme: light dark; font: 1rem/1.55 system-ui, sans-serif; }
body { margin: 0; padding: 1.5rem; }
main { max-width: 50rem; margin: auto; }
h1 { line-height: 1.2; }
.previews { display: flex; flex-wrap: wrap; gap: 2rem; margin: 1.5rem 0; }
figure { margin: 0; }
.stage { width: 128px; height: 128px; padding: 1rem; display: grid; place-items: center; background-color: #d9e2ea; background-image: conic-gradient(#f5f7fa 25%, transparent 0 50%, #f5f7fa 0 75%, transparent 0); background-size: 16px 16px; }
figcaption { margin-top: .75rem; }
.sprite {
  width: 64px;
  height: 64px;
  background: url("assets/sprite-strip.png") 0 0 / 512px 64px no-repeat;
  image-rendering: pixelated;
  animation: strip 800ms steps(8, end) infinite;
}
.sprite--wrong { animation-timing-function: steps(7, end); }
@keyframes strip { to { background-position-x: -512px; } }
#pause:checked ~ .previews .sprite { animation-play-state: paused; }
.motion-note { display: none; }
.strip-scroll { overflow-x: auto; }
.strip { display: block; image-rendering: pixelated; max-width: none; }
pre { overflow-x: auto; padding: 1rem; border: 1px solid #929ba4; border-radius: .25rem; }
@media (prefers-reduced-motion: reduce) {
  .sprite { animation: none; background-position: 0 0; }
  .motion-note { display: block; }
}