.northaxis-cursor-ribbon,
.northaxis-cursor-dot,
.northaxis-cursor-pulse {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.northaxis-cursor-ready,
  html.northaxis-cursor-ready body,
  html.northaxis-cursor-ready a,
  html.northaxis-cursor-ready button,
  html.northaxis-cursor-ready input,
  html.northaxis-cursor-ready select,
  html.northaxis-cursor-ready textarea,
  html.northaxis-cursor-ready label,
  html.northaxis-cursor-ready [role="button"],
  html.northaxis-cursor-ready [tabindex]:not([tabindex="-1"]) {
    cursor: none;
  }

  .northaxis-cursor-ribbon {
    width: 100vw;
    height: 100vh;
    overflow: visible;
  }

  .northaxis-cursor-ribbon-glow {
    fill: none;
    stroke: url("#northaxis-cursor-gradient");
    stroke-width: 13;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: url("#northaxis-cursor-glow");
    opacity: 0.42;
  }

  .northaxis-cursor-ribbon-core {
    fill: none;
    stroke: url("#northaxis-cursor-gradient");
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.82;
  }

  .northaxis-cursor-dot {
    width: 20px;
    height: 20px;
    background: var(--accent);
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    filter:
      drop-shadow(0 0 3px rgba(255, 236, 177, 0.98))
      drop-shadow(0 0 7px rgba(var(--accent-rgb),0.72));
    transform: translate3d(-50%, -50%, 0);
    transition: width 120ms ease, height 120ms ease, filter 120ms ease;
  }

  .northaxis-cursor-dot.is-interactive {
    width: 26px;
    height: 26px;
    filter:
      drop-shadow(0 0 4px rgba(255, 242, 199, 1))
      drop-shadow(0 0 9px rgba(var(--accent-rgb),0.9));
  }

  html.northaxis-cursor-money-bag .northaxis-cursor-dot {
    width: 28px;
    height: 28px;
    background-color: transparent;
    clip-path: none;
    display: grid;
    place-items: center;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    filter:
      drop-shadow(0 0 2px rgba(255, 244, 207, .9))
      drop-shadow(0 0 5px rgba(var(--accent-rgb),.55));
    text-shadow: none;
  }

  html.northaxis-cursor-money-bag .northaxis-cursor-dot::before {
    content: '\1f4b0';
  }

  html.northaxis-cursor-money-bag .northaxis-cursor-dot.is-interactive {
    width: 34px;
    height: 34px;
    font-size: 30px;
    filter:
      drop-shadow(0 0 2px rgba(255, 248, 222, 1))
      drop-shadow(0 0 7px rgba(var(--accent-rgb),.72));
  }

  html.northaxis-cursor-active .northaxis-cursor-ribbon,
  html.northaxis-cursor-active .northaxis-cursor-dot {
    opacity: 1;
  }

  .northaxis-cursor-pulse {
    width: 8px;
    height: 8px;
    border: 1px solid rgba(255, 229, 154, 0.86);
    border-radius: 50%;
    box-shadow: 0 0 9px rgba(var(--accent-rgb),0.62);
    opacity: 0.76;
    transform: translate3d(-50%, -50%, 0) scale(0.75);
    animation: northaxis-cursor-pulse 280ms ease-out forwards;
  }
}

@keyframes northaxis-cursor-pulse {
  to {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(2.1);
  }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .northaxis-cursor-ribbon,
  .northaxis-cursor-dot,
  .northaxis-cursor-pulse {
    display: none !important;
  }
}
