:root {
	--nr: 20;
	background-color: #000;
	-moz-user-select: none;
	user-select: none;
}
.g {
	display: grid;
	grid-template-columns: repeat(var(--nr), 1fr);
}
b {
	outline: 1px solid #333;
	height: calc(100vw / var(--nr));
	animation: 800ms fade infinite alternate steps(8) paused;
}
/*
Yup, just unpause animation in cell under cursor while body is active.
That's the trick.
*/
body:active b:hover {
	animation-play-state: running;
}
@keyframes fade {
	from {background-color: black;}
	to {background-color: white;}
}

.erase:active ~ .g b {
	animation: none;
}

.canvas:active ~ .g b {
	animation-play-state: running;
}

b:hover {
	outline-color: #999;
	z-index: 1;
}

button[class]:empty::before {
	content: attr(class);
}