@media (hover: hover) and (pointer: fine) {
  html.cursor-native-enabled,
  html.cursor-native-enabled body,
  html.cursor-native-enabled body * {
    cursor: none !important;
  }

  .cursor-native,
  .cursor-native-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 12000;
    opacity: 0;
    transform: translate3d(-120px, -120px, 0);
    will-change: transform, opacity;
    mix-blend-mode: difference;
    transition: opacity 0.25s ease;
  }

  .cursor-native {
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    background: #fff;
    border-radius: 0px;
  }

  .cursor-native-ring {
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0px;
  }

  html.cursor-native-ready .cursor-native,
  html.cursor-native-ready .cursor-native-ring {
    opacity: 1;
  }

  html.cursor-native-hover .cursor-native {
    opacity: 1;
  }

  html.cursor-native-hover .cursor-native-ring {
    opacity: 0.96;
  }
}