@media (pointer: fine) {
  html.custom-cursor-active,
  html.custom-cursor-active * {
    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAaSURBVFhH7cEBAQAAAIIg/69uSEABAAAA7wYQIAABwWAsnwAAAABJRU5ErkJggg==") 0 0, none !important;
  }

}

.custom-cursor-root {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
}

.custom-cursor-root.is-visible {
  visibility: visible;
}

.custom-cursor-shape {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}

.custom-cursor-shape svg {
  display: block;
  overflow: visible;
}

.custom-cursor-arrow {
  transform: scale(0.7);
  transform-origin: 0 0;
  transition-duration: 200ms;
}

.custom-cursor-hand {
  transform: scale(0.75);
  transform-origin: 8px 1px;
}

.custom-cursor-text {
  transform: scale(0.75);
  transform-origin: 6px 12px;
}

.custom-cursor-question {
  top: 13px;
  left: 13px;
  transform: scale(0.5);
  transition-duration: 200ms;
}

.custom-cursor-grab {
  transform: scale(0.75);
  transform-origin: 11px 1px;
  transition-duration: 200ms;
}

.custom-cursor-grabbing {
  transform: scale(0.75);
  transform-origin: 11px 2px;
}

.custom-cursor-resize,
.custom-cursor-resize-active {
  transform: scale(0.78);
  transform-origin: 16px 12px;
}

.custom-cursor-resize-active {
  transform: scale(0.82);
  transition-duration: 100ms;
}

.custom-cursor-root[data-state="default"] .custom-cursor-arrow,
.custom-cursor-root[data-state="question"] .custom-cursor-arrow,
.custom-cursor-root[data-state="hover"] .custom-cursor-hand,
.custom-cursor-root[data-state="text"] .custom-cursor-text,
.custom-cursor-root[data-state="question"] .custom-cursor-question,
.custom-cursor-root[data-state="grab"] .custom-cursor-grab,
.custom-cursor-root[data-state="grabbing"] .custom-cursor-grabbing,
.custom-cursor-root[data-state="resize-column"] .custom-cursor-resize,
.custom-cursor-root[data-state="resize-column-active"] .custom-cursor-resize-active {
  opacity: 1;
  transform: scale(1);
}

.custom-cursor-root[data-state="resize-column-active"] .custom-cursor-resize-active {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .custom-cursor-shape {
    transition: none;
  }
}