Drawing with CSS: cartoon character

I did another piece of CSS Art, this time it is a monster or a cartoon character (depends on how you look at it.)

Of this cartoon, I liked doing the head/face. It's kind of a squircle (combination of square and circle with rounded borders and edges) and a single HTML element. In the past I achieved this by using pseudo-elements, but that causes problems with the colors and shadows. This time it is a single thing (no pseudos) which was an interesting challenge (and a headache tbh).

It uses relative colors combined with CSS variables, so it is easy to change the color of the character. Update one value and it will automatically calculate the darker colors for shadows.

You can find the source code and live demo on CodePen: https://codepen.io/alvaromontoro/pen/myJNBLG

And the link to YouTube: https://youtu.be/ShJDZuSOzHA