/* A single, local color-inversion lens. No changes to the underlying media. */
.color-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483646;
  display: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: exclusion;
  pointer-events: none;
  user-select: none;
  transition: width 120ms ease, height 120ms ease;
}
.color-cursor[data-link] { width: 40px; height: 40px; }

/* A native circular cursor bridges loading and focus changes until the blending
   lens has a pointer position. Only one cursor is visible at a time. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  @supports (mix-blend-mode: exclusion) {
    html {
      --hidden-pointer: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAEklEQVR4nGNgGAWjYBSMAggAAAQQAAFVN1rQAAAAAElFTkSuQmCC") 0 0, none;
      --circular-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2312110c'/%3E%3C/svg%3E") 12 12, none;
    }
    html[data-theme="dark"] {
      --circular-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23f3f1ea'/%3E%3C/svg%3E") 12 12, none;
    }
    html, html * { cursor: var(--circular-pointer) !important; }
    /* Assign a transparent cursor image instead of relying on the browser's
       hide-cursor state. The exclusion lens is the sole visible pointer. */
    html.color-cursor-active, html.color-cursor-active * { cursor: var(--hidden-pointer) !important; }
    html.color-cursor-active > body > .color-cursor { display: block; }
    html.color-cursor-native, html.color-cursor-native * { cursor: revert !important; }
    html.color-cursor-native > body > .color-cursor { display: none; }
    /* Keep native editing affordances and text input behavior intact. */
    html :is(input, textarea, select, [contenteditable]:not([contenteditable="false"])) { cursor: revert !important; }
  }
}
@media (prefers-contrast: more), (prefers-reduced-motion: reduce), (forced-colors: active) {
  html, html *, html.color-cursor-active, html.color-cursor-active * { cursor: revert !important; }
  html.color-cursor-active > body > .color-cursor { display: none; }
}