#rln-cursor-color-trail-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none !important;
  overflow: hidden;
  z-index: 2147483646;
  contain: layout style paint;
}

.rln-cursor-color-dot {
  --rln-size: 13px;
  --rln-color: #1497e5;
  --rln-duration: 760ms;
  --rln-opacity: .96;

  position: fixed;
  left: 0;
  top: 0;
  width: var(--rln-size);
  height: var(--rln-size);
  border-radius: 999px;
  pointer-events: none !important;
  opacity: var(--rln-opacity);
  transform: translate3d(-50%, -50%, 0) scale(.58);
  animation: rlnCursorColorTrail var(--rln-duration) cubic-bezier(.18, .82, .2, 1) forwards;
  will-change: transform, opacity, filter;
}

.rln-cursor-color-dot.is-ring {
  background: transparent;
  border: 2px solid var(--rln-color);
  box-shadow:
    0 0 8px var(--rln-color),
    0 0 18px var(--rln-color),
    inset 0 0 5px var(--rln-color);
}

.rln-cursor-color-dot.is-solid {
  background: var(--rln-color);
  box-shadow:
    0 0 8px var(--rln-color),
    0 0 20px var(--rln-color);
}

@keyframes rlnCursorColorTrail {
  0% {
    opacity: var(--rln-opacity);
    transform: translate3d(-50%, -50%, 0) scale(.58);
    filter: blur(0);
  }

  38% {
    opacity: calc(var(--rln-opacity) * .92);
    transform: translate3d(-50%, -62%, 0) scale(1.05);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, -128%, 0) scale(1.72);
    filter: blur(.4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #rln-cursor-color-trail-layer {
    display: none !important;
  }
}