tailwindcss have descendent ignore mix

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.