I'd like to apply a mix-blend-mode: difference effect to the custom DOM cursor on my carousel, so that it visually inverts against the images underneath — similar to how my navigation menu already behaves when it overlaps images.

I've applied mix-blend-mode: difference to my nav elements and it works perfectly. But I can't seem to target the carousel cursor element in CSS, as it doesn't appear to have a stable/accessible class.

Is there a recommended way to achieve this effect on the carousel DOM cursor?

Here is a link to my website for reference: https://www.clara-andrea.com/tipik/

Thank you!