fix(tour): declare the backdrop's vendor prefix before its standard property

[Gavriel-M]

.tip-magic-tour-backdrop declares backdrop-filter first and -webkit-backdrop-filter second. Swapping them fixes a bug that is invisible in this repo but breaks the tour backdrop in consumers.

Why the order matters

This package ships its CSS unminified, so both declarations survive and every browser picks the one it understands — nothing here is wrong today.

A consumer whose build minifies CSS is a different story. A minifier that folds an alias and its standard property into one keeps the last one written, so this order ships the alias alone:

/* what a consumer's production bundle ends up with */
.tip-magic-tour-backdrop{…;background:var(--tip-magic-tour-backdrop-bg);-webkit-backdrop-filter:blur(…);…}

And Chrome no longer recognises that alias:

Chrome 152
CSS.supports('backdrop-filter',         'blur(4px)')  →  true
CSS.supports('-webkit-backdrop-filter', 'blur(4px)')  →  false

So the rule computes backdrop-filter: none. The backdrop still dims the page — background is a separate declaration — but blurs nothing behind it, which reads as a broken overlay rather than a spotlight.

	computed backdrop-filter
minified from the current order	none
minified with the prefix first	blur(4px)

How it was found

A downstream app shipped exactly this: correct in dev, wrong in production. Reordering the two lines in the installed package and rebuilding restored the standard property in the minified output; reverting lost it again — same build, same config, only the order changed.

user-select in the same bundle keeps both forms, so this isn't a misconfigured minifier: it prefixes correctly when the source lets it.

The change

Two lines swapped, plus a short comment saying why the order is load-bearing.

Scope

Two lines and a comment — no test. The guard I first considered would have been a bespoke CSS parser
policing a single occurrence: there is exactly one prefixed/standard pair in the codebase, and the other
-webkit- usages (-webkit-box / box-orient / line-clamp, and the ::-webkit-scrollbar
pseudo-elements) have no standard counterpart in play. If enforcement is ever wanted here, stylelint is
the right tool for it rather than something hand-rolled.

npm run validate is green: typecheck, lint, format check, 377 tests.

🤖 Generated with Claude Code

https://claude.ai/code/session_0197yar67v2FaNevznSor91E