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

  html.codex-cursor-active #sheetScrollArea.is-right-panning,
  html.codex-cursor-active #sheetScrollArea.is-right-panning * {
    cursor: none !important;
  }

  .codex-cursor-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 2147483647;
    overflow: visible;
    pointer-events: none;
  }

  .codex-cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    opacity: 0;
    contain: layout style;
    will-change: transform, opacity;
  }

  .codex-cursor__rotator {
    width: 24px;
    height: 24px;
    transform-origin: 1px 11.3px;
    will-change: transform;
  }

  .codex-cursor__offset {
    transform: translate3d(1px, -5.3px, 0);
  }

  .codex-cursor__breather {
    --cursor-breathe-opacity-min: .72;
    --cursor-breathe-scale-min: 1;
    --cursor-breathe-scale-max: 1.09;
    width: 23px;
    height: 24px;
    opacity: 1;
    transform: scale(1);
    transform-origin: 50% 50%;
    transform-box: border-box;
    will-change: transform, opacity;
  }

  .codex-cursor__asset {
    display: block;
    width: 23px;
    height: 24px;
    transform: rotate(44deg) scale(1);
    transform-origin: 0 0;
    backface-visibility: hidden;
    will-change: transform, filter;
    transition:
      transform 130ms cubic-bezier(.34, 1.56, .64, 1),
      filter 100ms ease;
    filter:
      drop-shadow(0 0 6px color-mix(in srgb, #339cff 90%, transparent))
      drop-shadow(0 0 15px color-mix(in srgb, #339cff 48%, transparent));
    user-select: none;
  }

  .codex-cursor-layer.is-actionable .codex-cursor__breather {
    --cursor-breathe-opacity-min: .76;
    --cursor-breathe-scale-min: 1;
    --cursor-breathe-scale-max: 1.0853;
  }

  .codex-cursor-layer.is-actionable .codex-cursor__asset {
    transform: rotate(44deg) scale(1.055);
    filter:
      invert(1)
      drop-shadow(0 0 5px rgba(255, 255, 255, .54))
      drop-shadow(0 0 13px rgba(255, 255, 255, .18));
  }

  .codex-cursor-layer.is-breathing:not(.is-pressed) .codex-cursor__breather {
    animation: codex-cursor-breathe 2s ease-in-out infinite;
  }

  .codex-cursor-layer.is-pressed .codex-cursor__asset {
    transform: rotate(44deg) scale(.86);
    transition-duration: 55ms;
    transition-timing-function: cubic-bezier(.3, 0, .4, 1);
  }

  @keyframes codex-cursor-breathe {
    0%, 100% {
      opacity: 1;
      transform: scale(var(--cursor-breathe-scale-min));
    }
    50% {
      opacity: var(--cursor-breathe-opacity-min);
      transform: scale(var(--cursor-breathe-scale-max));
    }
  }
}