.tap-finger-cue {
  --tap-delay: 0s;
  --tap-angle: -24deg;
  position: fixed !important;
  z-index: 1200 !important;
  left: var(--tap-left, -100px) !important;
  top: var(--tap-top, -100px) !important;
  width: 50px !important;
  height: 54px !important;
  display: grid !important;
  place-items: center !important;
  opacity: 0;
  pointer-events: none !important;
  transform-origin: 50% 12%;
  overflow: visible !important;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .72)) drop-shadow(0 0 12px rgba(79, 239, 255, .5));
  contain: layout style;
  animation: tap-finger-loop 2.2s var(--tap-delay) cubic-bezier(.22, .72, .28, 1) infinite !important;
}

.tap-finger-glyph {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 42px;
  line-height: 1;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-weight: 400;
  transform: rotate(var(--tap-angle));
  transform-origin: 50% 18%;
}

.tap-finger-ripple {
  position: absolute;
  z-index: 1;
  left: 9px;
  top: 0;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(105, 243, 255, .9);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.35);
  box-shadow: 0 0 9px rgba(68, 231, 255, .72);
  animation: tap-finger-ripple 2.2s var(--tap-delay) ease-out infinite !important;
}

.group-tap-finger,
.universe-bean-tap-finger {
  --tap-angle: -27deg;
}

.group-tap-finger:not(.is-visible),
body.has-focus-qr .group-tap-finger,
body.bean-chat-open .group-tap-finger,
body.bean-chat-open .universe-bean-tap-finger {
  display: none !important;
}

@keyframes tap-finger-loop {
  0%, 12%, 100% {
    opacity: 0;
    transform: translate3d(7px, 7px, 0) scale(.82);
  }
  18% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  30% {
    opacity: 1;
    transform: translate3d(-2px, -2px, 0) scale(.88);
  }
  40% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  64% {
    opacity: .96;
    transform: translate3d(0, 0, 0) scale(1);
  }
  78% {
    opacity: 0;
    transform: translate3d(5px, 5px, 0) scale(.88);
  }
}

@keyframes tap-finger-ripple {
  0%, 19%, 100% {
    opacity: 0;
    transform: scale(.35);
  }
  27% {
    opacity: .95;
  }
  48% {
    opacity: 0;
    transform: scale(1.55);
  }
}