.language-hint-arrow {
  position: fixed;
  z-index: 1000;
  width: 64px;
  height: 68px;
  pointer-events: none;
  color: #218e9a;
  filter: drop-shadow(0 2px 2px #102c4933);
  --hint-bounce: 6px;
  animation: language-hint-bounce .7s ease-in-out 5, language-hint-fade 4s linear forwards;
}
.language-hint-arrow[hidden] { display: none; }
.language-hint-arrow svg { display: block; width: 100%; height: 100%; }
.language-hint-arrow.points-up { --hint-bounce: -6px; }
.language-hint-arrow.points-up svg { transform: rotate(180deg); }
@keyframes language-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--hint-bounce)); }
}
@keyframes language-hint-fade {
  0%, 85% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .language-hint-arrow { animation: none; }
}