.pxs {
  display: block;
  overflow: visible;
  color: #94e9a6;
}

.pxs [data-pixel-cell] {
  fill: currentColor;
}

.pxs [data-pixel-cell],
[data-pixel-assemble] svg rect {
  transform-box: fill-box;
  transform-origin: center;
}

.pxs .pxs-cell--signal { fill: #f4fff6; }

[data-pixel-assemble].is-pixel-assembling [data-pixel-cell],
[data-pixel-assemble].is-pixel-assembling svg rect {
  animation: pxs-assemble 420ms steps(5, end) both;
  animation-delay: var(--pixel-delay, 0ms);
}

[data-pixel-twinkle].is-pixel-live [data-pixel-cell]:nth-child(5n + 2) {
  animation: pxs-twinkle var(--pixel-twinkle-speed, 2.8s) steps(2, end) infinite;
  animation-delay: var(--pixel-twinkle-delay, 0s);
}

.is-pixel-pulsing { animation: pxs-pulse 360ms steps(3, end); }

@keyframes pxs-assemble {
  0% { opacity: 0.28; transform: translate(var(--pixel-dx, 0), var(--pixel-dy, 0)) scale(0.45); }
  70% { opacity: 1; transform: translate(0, 0) scale(1.12); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes pxs-twinkle {
  0%, 72%, 100% { opacity: 1; }
  73%, 86% { opacity: 0.42; }
}

@keyframes pxs-pulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  [data-pixel-assemble] [data-pixel-cell],
  [data-pixel-assemble] svg rect,
  [data-pixel-twinkle] [data-pixel-cell],
  .is-pixel-pulsing { animation: none !important; transform: none !important; opacity: 1 !important; }
}