.custom-cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  html.custom-cursor-enabled,
  html.custom-cursor-enabled body,
  html.custom-cursor-enabled a,
  html.custom-cursor-enabled button,
  html.custom-cursor-enabled input,
  html.custom-cursor-enabled textarea,
  html.custom-cursor-enabled select,
  html.custom-cursor-enabled label { cursor: none !important; }

  .custom-cursor {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: block;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: width .18s ease, height .18s ease, border-color .18s ease, background-color .18s ease, opacity .14s ease, transform .12s ease;
  }

  .custom-cursor.is-visible { opacity: 1; }
  .custom-cursor.is-interactive {
    width: 32px;
    height: 32px;
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
  }
  .custom-cursor.is-pressed { transform: translate(-50%, -50%) scale(.82); }
  html.custom-cursor-enabled dialog[open]::backdrop { cursor: default; }
}

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