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

  .cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: var(--z-cursor);
    mix-blend-mode: difference;
  }

  .cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--paper);
    transform: translate3d(-50%, -50%, 0);
    transition:
      width var(--dur-base) var(--ease-out-expo),
      height var(--dur-base) var(--ease-out-expo),
      background var(--dur-fast) var(--ease-out-quart);
    pointer-events: none;
    z-index: calc(var(--z-cursor) + 1);
  }

  .cursor-halo {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: radial-gradient(closest-side, rgba(139, 92, 246, 0.4), transparent 70%);
    transform: translate3d(-50%, -50%, 0);
    transition:
      width var(--dur-base) var(--ease-out-expo),
      height var(--dur-base) var(--ease-out-expo);
    pointer-events: none;
    z-index: var(--z-cursor);
    mix-blend-mode: normal;
  }

  body.cursor-hovering .cursor-dot {
    width: 3px;
    height: 3px;
  }

  body.cursor-hovering .cursor-halo {
    width: 72px;
    height: 72px;
    background: radial-gradient(closest-side, rgba(34, 197, 94, 0.4), transparent 70%);
  }

  body.cursor-pressing .cursor-halo {
    width: 32px;
    height: 32px;
  }
}