Responsive styles - revise property names

[talldanwp]

Related: #65164
Gutenberg PR: ​https://github.com/WordPress/gutenberg/pull/79210

As mentioned in the PR, currently when a user sets a responsive style, the data is stored under plain keys in either block or theme json data:

styles: {
  mobile: {
    color: { text: 'red' }
  },
  color: { text: 'blue' }
}

The key 'mobile' that represents a state lives alongside regular style properties like 'color'.

A concern is that in the future it may be possible for developers to define custom responsive states, for example 'small', 'medium', 'big'. If the names can be arbitrary there's a risk that style state names can clash with the names of regular style properties.

Pseudo style states are already shipped in trunk (and in 7.0) and use keys like :hover, :focus, so the proposal to fix the possible namespace clashes for responsive states is to use a prefix - @mobile, @tablet, the @ will represent a responsive style state.

Trac ticket: https://core.trac.wordpress.org/ticket/65503
Backport for Gutenberg PR: ​https://github.com/WordPress/gutenberg/pull/79210

Updates the property keys for responsive style states to include an @ prefix:

• tablet becomes @tablet
• mobile becomes @mobile

This is to avoid the future possibility of property name clashes.

No backwards compatibility is required in WordPress core since responsive style states have not been shipped in any WordPress version. This is a pure rename.

## Use of AI Tools

AI assistance: Yes
Tool(s): Codex / OpenCode
Model(s): GPT-5.5
Used for: All code changes, reviewed by me.

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See ​GitHub Pull Requests for Code Review in the Core Handbook for more details.