CSS puzzles that check the actual box, not the source text.

Every game below is graded by measuring real computed geometry inside a sandboxed iframe, at more than one viewport width, with a property allow/forbid layer on top. A pixel hack that happens to line up at one width will not survive the second one.

One engine, two skins. Exercise 1 (a game: move the hero onto the goal tile) and Exercise 2 (a craft task: build a real site header) are rendered by different templates but graded by the exact same grade() function, with no branch on which track they belong to. The learning track and the game track are one product.