:root {
  --ciw-size: 26px;
  --ciw-size-active: 70px;
}

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

  .ciw-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--ciw-size);
    height: var(--ciw-size);
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    z-index: 2147483647;
    mix-blend-mode: difference;
    transform: translate3d(-100px, -100px, 0);
    transition: width 180ms ease, height 180ms ease, opacity 150ms ease;
    will-change: transform, width, height;
    opacity: 0;
  }

  .ciw-cursor.is-visible {
    opacity: 1;
  }

  .ciw-cursor.is-active {
    width: var(--ciw-size-active);
    height: var(--ciw-size-active);
  }
}

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