How and why?

Why? Well, because it is possible. Essentially, I enjoy taking things to extremes and making things that some people might think are not possible.

How did I do it? Well, it's a mix of using CSS variables, a fitting HTML structure with over 80 checkboxes and labels, calc() for the math, and CSS counters to output things. Have a look at the source code! I promise, there's absolutely zero Javascript. Even this dialog is pure CSS!

PS: unfortunately Google Chrome doesn't like it when you divide with calc(). It should work according to the specs, but it doesn't. Bummer. Try it in Firefox!