¿Cómo funciona esta implementación de la regla 110 de Turing-Completa en HTML5+CSS3?

Question

Esta mañana, me encontré con la siguiente implementación de la Regla 110 en HTML5 + CSS3 puro (sin JavaScript). Presione la pestaña y el espacio en secuencia para ejecutar el autómata.

http://elilies.com/rule110-full.html

Miré el código fuente, pero realmente no puedo entender cómo está haciendo un seguimiento del estado. Cuando se presiona la pestaña, me imagino que los selectores de enfoque entran en juego, pero no estoy seguro de qué sucede cuando se presiona el espacio.

Answer 1

Cada uno de los cuadros de la cuadrícula es realmente una casilla de verificación. Presentar espacio con él seleccionado alterna su estado.

Answer 2

Presionando las teclas es un "bucle externo" que está invocando código que es no Turing Complete: HTML + CSS (excluyendo las expresiones de JavaScript CSS ...) siempre se detiene para que no esté completo.

Pero llamar a un código no-completo en un bucle puede completarlo.