.dot-cursor { position: fixed; top: 0; left: 0; z-index: 40; width: 12px; height: 12px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; }
@media (any-hover: hover) and (any-pointer: fine) and (forced-colors: none) {
  html.has-dot-cursor, html.has-dot-cursor *, html.has-dot-cursor *::before, html.has-dot-cursor *::after { cursor: none !important; }
  .has-dot-cursor .dot-cursor { opacity: 1; }
}