/* Native cursor remains available until the custom pointer is ready. */
.monster-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  z-index: 2147483646;
  pointer-events: none;
  opacity: 0;
}
.monster-cursor.is-visible { opacity: 1; }
.monster-cursor-art {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgb(14 97 217 / 38%);
  transform: translate(-50%, -50%);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), background-color 120ms ease;
}
.monster-cursor.is-on-dark .monster-cursor-art { background: rgb(255 255 255 / 58%); }
.monster-cursor.is-hovering .monster-cursor-art { transform: translate(-50%, -50%) scale(1.65); }
.monster-cursor.is-pressed .monster-cursor-art { transform: translate(-50%, -50%) scale(.86); }
.monster-cursor-hotspot {
  position: fixed;
  top: -2px;
  left: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / 22%);
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0;
}
.monster-cursor-hotspot.is-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  html.has-monster-cursor, html.has-monster-cursor * { cursor: none !important; }
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce), (forced-colors: active) {
  .monster-cursor, .monster-cursor-hotspot { display: none; }
}