#xhair {
  display: none;
  position: fixed;
  left: -40px;
  top: -40px;
  width: 22px;
  height: 22px;
  z-index: 2147483647;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.1s ease, transform 0.08s ease;
  will-change: left, top;
}

#xhair line {
  stroke: #4694fc;
  stroke-width: 1.2;
  opacity: 0.7;
}

#xhair circle {
  fill: none;
  stroke: #4694fc;
  stroke-width: 1;
  opacity: 0.5;
}

@media (any-hover: hover) and (any-pointer: fine) {
  html.site-cursor-ready,
  html.site-cursor-ready body,
  html.site-cursor-ready body *,
  html.site-cursor-ready body *::before,
  html.site-cursor-ready body *::after {
    cursor: none !important;
  }

  html.site-cursor-ready input[type="range"]::-webkit-slider-thumb {
    cursor: none !important;
  }

  html.site-cursor-ready input[type="range"]::-moz-range-thumb {
    cursor: none !important;
  }

  html.site-cursor-ready #xhair {
    display: block;
  }

  html.site-cursor-ready #xhair.is-visible {
    visibility: visible;
    opacity: 1;
  }
}