mail-react: Reproduce Gmail dropping a mail's head CSS

[VPS-Ricky]

Gmail counts the combined content of every <style> in a message, and past 16384 characters it removes all of them, not only the excess.

This limit is easy to reach because registerStyles collects the CSS of a module when the module is imported, not when a mail renders. MjmlMailRoot then puts the whole registry into the head, so a theme with twelve text variants sends rules for all twelve even when the mail uses five.

The two stories send the same mail body with a different theme, one below the limit and one above it, so the difference is visible when both are sent to the same account. Each mail reports its own character count, and a probe line turns green only if the head CSS arrived.

Two changes to what registerStyles emits would fix most of this without changing a rule. The CSS is 41% whitespace: minifying it takes the branded mail from 21066 to 12680 characters, below the limit on its own. Merging the @media blocks by condition, of which that mail emits 88 with 6 distinct conditions, takes it to 10506, half the original. Beyond that, emitting only the text variants a mail renders would stop the head CSS growing with the size of the theme.

---

Task: https://vivid-planet.atlassian.net/browse/PHSB2C-13467