Most of the elements you have in the markup have no business in the markup, as they contain scripting only content. Way to confuse users on screen readers / braille readers / etc.

You should probably flex to center instead of translate given that absolute or fixed positioning probably doesn't fit the screen properly.

The "you can't change generated content from JavaScript" thing actually being wrong... create a STYLE tag in the HEAD from the scripting.

document.head.appendChild(document.createElement('style'));

Then assign the desired style as textContent to it.

"content-box" isn't "the right way", it's just one way... and USUALLY it's the harder way which is why border-box was introduced.

The use of pixel measurements is also a bit of a "screw you" to users with accessibility needs. Not as big a deal given the large size you've chosen... but still it's called "EM", use 'em!

I might do a rewrite of this to make things a bit cleaner as my own article. If I do so I'll back-link to yours to give credit where due as the concept is good, I just take issue with your implementation.