* {
  cursor: none !important;
}

input,
textarea,
[contenteditable] {
  cursor: text !important;
}

@media (hover: none) and (pointer: coarse) {
  * {
    cursor: auto !important;
  }
  input,
  textarea,
  [contenteditable] {
    cursor: text !important;
  }
  .cursor-outer,
  .cursor-inner {
    display: none !important;
  }
}

.cursor-outer {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--primary, #6260FF) 35%, transparent);
  border-radius: 2px;
  background: transparent;
  pointer-events: none;
  z-index: 999999;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cursor-inner {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--primary, #6260FF);
  border-radius: 0;
  pointer-events: none;
  z-index: 999999;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cursor-outer.hover {
  border-color: var(--primary, #6260FF);
  box-shadow: 0 0 24px color-mix(in srgb, var(--primary, #6260FF) 40%, transparent),
              0 0 60px color-mix(in srgb, var(--primary, #6260FF) 20%, transparent);
}