* {
  cursor: none !important;
}

#cursor-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999999911;
  mix-blend-mode: difference;
  isolation: isolate;
}

#cursor-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#cursor-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background-color: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

#cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  border: 1.5px solid white;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  opacity: 0;
  will-change: transform, width, height, opacity;
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  #cursor-wrap { display: none; }
  * { cursor: auto; }
}