Improve visual keyboard state representation

[toBeOfUse]

This is not quite stylish enough:

The font should not be Arial. It feels like the letters should be side-by-side within each key instead of arranged diagonally to each other? There should also be a drop-shadow with no blur under each key, and the key should move down a little and the shadow should disappear when the real physical key is depressed.

Ideally, I would still like to keep the graphic as a static SVG so that it can be used outside of the web environment, like it is in the little Python utility. It should be possible to do the above and still have an SVG that is updated to match the real keyboard's state using simple generated CSS.

However, this would probably preclude using CSS transitions. QSVGRenderer supports animated SVGs, but it's unclear if there's a way to trigger animations based on specific events, and I'm also not sure how to create a different instance of any given animation for e.g. each key with SMIL. It would probably be possible to handle animating the SVG by generating slightly different CSS in Python on a per-frame basis.

Does the representation of keys being pressed down need to be softened with transitions anyway? Keys typically go up and down pretty fast.

It should also be updated to match #3 and #4. And should be informed by the design arrived at from #2.

[toBeOfUse]

I am pretty much giving up on the SVG version, considering how much easier it is to create this as a component (with any library) that accepts props