/* The circle inverts the content below it. It never intercepts interaction. */
.negative-cursor {
  position: fixed;
  z-index: 2147483646;
  top: 0;
  left: 0;
  display: block;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  opacity: 1;
  mix-blend-mode: difference;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  contain: layout style;
  will-change: transform;
}
.negative-cursor[hidden] { display: none !important; }
@media (any-hover: hover) and (any-pointer: fine) and (forced-colors: none) {
  body.negative-cursor-ready,
  body.negative-cursor-ready * { cursor: none !important; }
  body :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], textarea, [role="textbox"]),
  body [contenteditable]:not([contenteditable="false"]),
  body [contenteditable]:not([contenteditable="false"]) * { cursor: text !important; }
  body textarea::-webkit-resizer { cursor: nwse-resize !important; }
  body :is(button:disabled, input:disabled, textarea:disabled, select:disabled, [aria-disabled="true"]),
  body [aria-disabled="true"] * { cursor: not-allowed !important; }
}
@media (forced-colors: active), print {
  .negative-cursor { display: none !important; }
  body.negative-cursor-ready,
  body.negative-cursor-ready * { cursor: auto !important; }
}