tailwindcss have descendent ignore mix - css

Question

I've been chasing down a problem, getting blur and mix to work well together in Tailwind, so I can have a Navbar component look good regardless of the color of the underlying content.
That is now largely solved for the text, but I have an issue where an anchor element styled as a button is "mixing" when I don't want it to do so.
This is the mix, over a dark background:
That green is what the button should always look like (actually, the text should be white, but that's a different problem). However, when over a light background, it turns pink (or mauve, or something):
The structure looks like this:
<div className="backdrop-blur sticky top-0 left-0">
<header className="backdrop-blur z-[1100] w-full mix-blend-difference bg-black">
<div className="mx-auto">
<div className="py-4 px-8 mx-4">
<nav>
<a href="/">
<div className="text-white">My Site</div>
</a>
<ul className="flex justify-between ml-auto">
<li className="text-white">Products</li>
<li> // I want this to not mix
<a
className="bg-emerald-700 hover:bg-emerald-600 text-white py-2 px-4 rounded-sm shadow-lg shadow-emerald-800"
href="/"
>
About
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
</div>
Basically, I need some deeply nested element inside a container that is using mix-blend-<whatever> to ignore the mix.
I've tried applying mix-blend-normal to the li element, but no effect.
Any idea how to do this?
CodeSandbox is here.