.grid-visual .beatgrid-visual {
  display: block;
  flex: 0 1 390px;
  width: 100%;
  max-width: 390px;
  height: auto;
  max-height: 230px;
  overflow: visible;
  pointer-events: none;
}
.beatgrid-visual .beatgrid-label {
  fill: #b8d0bc;
  font: 400 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .1px;
}
.beatgrid-visual .beatgrid-cells { filter: drop-shadow(0 0 5px #42d87520); }
.beatgrid-visual .beatgrid-play { animation: beatgrid-cycle 9s linear infinite; }
.beatgrid-visual .beatgrid-trace { stroke-dasharray: 10; stroke-dashoffset: 0; animation: beatgrid-draw 9s linear infinite; }
.beatgrid-visual .beatgrid-head-point,
.beatgrid-visual .beatgrid-head-cell { transform: translate(104px,104px); }
.beatgrid-visual .beatgrid-head-point { animation: beatgrid-cursor 9s linear infinite; }
.beatgrid-visual .beatgrid-head-cell { animation: beatgrid-cursor 9s steps(1,end) infinite; }
.beatgrid-visual .beatgrid-instruction { opacity: 0; animation: beatgrid-instruction 9s linear infinite; }
.beatgrid-visual .beatgrid-complete { opacity: 1; animation: beatgrid-complete 9s linear infinite; }
.beatgrid-visual .beatgrid-visited { opacity: 1; animation-duration: 9s; animation-timing-function: linear; animation-iteration-count: infinite; }

/* Every animated position is one vertex of the game's actual solution. */
@keyframes beatgrid-cursor {
  0%, 8% { transform: translate(0,0); }
  14% { transform: translate(0,52px); }
  20% { transform: translate(0,104px); }
  26% { transform: translate(52px,104px); }
  32% { transform: translate(52px,52px); }
  38% { transform: translate(52px,0); }
  44% { transform: translate(104px,0); }
  50% { transform: translate(156px,0); }
  56% { transform: translate(156px,52px); }
  62% { transform: translate(156px,104px); }
  68%, 95% { transform: translate(104px,104px); }
  96%, 100% { transform: translate(0,0); }
}
@keyframes beatgrid-draw {
  0%, 8% { stroke-dashoffset: 10; }
  68%, 95% { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 10; }
}
@keyframes beatgrid-cycle {
  0%, 89%, 100% { opacity: 1; }
  95%, 98% { opacity: 0; }
}
@keyframes beatgrid-instruction {
  0%, 65%, 100% { opacity: 1; }
  69%, 95% { opacity: 0; }
}
@keyframes beatgrid-complete {
  0%, 68%, 96%, 100% { opacity: 0; }
  72%, 89% { opacity: 1; }
}

.beatgrid-visual .beatgrid-visit-1 { animation-name: beatgrid-visit-1; }
@keyframes beatgrid-visit-1 {
  0%, 13.9% { opacity: 0; }
  14%, 95% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

.beatgrid-visual .beatgrid-visit-2 { animation-name: beatgrid-visit-2; }
@keyframes beatgrid-visit-2 {
  0%, 19.9% { opacity: 0; }
  20%, 95% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

.beatgrid-visual .beatgrid-visit-3 { animation-name: beatgrid-visit-3; }
@keyframes beatgrid-visit-3 {
  0%, 25.9% { opacity: 0; }
  26%, 95% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

.beatgrid-visual .beatgrid-visit-4 { animation-name: beatgrid-visit-4; }
@keyframes beatgrid-visit-4 {
  0%, 31.9% { opacity: 0; }
  32%, 95% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

.beatgrid-visual .beatgrid-visit-5 { animation-name: beatgrid-visit-5; }
@keyframes beatgrid-visit-5 {
  0%, 37.9% { opacity: 0; }
  38%, 95% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

.beatgrid-visual .beatgrid-visit-6 { animation-name: beatgrid-visit-6; }
@keyframes beatgrid-visit-6 {
  0%, 43.9% { opacity: 0; }
  44%, 95% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

.beatgrid-visual .beatgrid-visit-7 { animation-name: beatgrid-visit-7; }
@keyframes beatgrid-visit-7 {
  0%, 49.9% { opacity: 0; }
  50%, 95% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

.beatgrid-visual .beatgrid-visit-8 { animation-name: beatgrid-visit-8; }
@keyframes beatgrid-visit-8 {
  0%, 55.9% { opacity: 0; }
  56%, 95% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

.beatgrid-visual .beatgrid-visit-9 { animation-name: beatgrid-visit-9; }
@keyframes beatgrid-visit-9 {
  0%, 61.9% { opacity: 0; }
  62%, 95% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

.beatgrid-visual .beatgrid-visit-10 { animation-name: beatgrid-visit-10; }
@keyframes beatgrid-visit-10 {
  0%, 67.9% { opacity: 0; }
  68%, 95% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

.project-grid:not(.in-view) .beatgrid-visual * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .beatgrid-visual .beatgrid-play,
  .beatgrid-visual .beatgrid-trace,
  .beatgrid-visual .beatgrid-head-point,
  .beatgrid-visual .beatgrid-head-cell,
  .beatgrid-visual .beatgrid-visited,
  .beatgrid-visual .beatgrid-instruction,
  .beatgrid-visual .beatgrid-complete { animation: none !important; }
}