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!