.modao-rhythm-guide-target {
  position: relative;
}

.modao-rhythm-guide-arrow {
  --modao-guide-size: 38px;
  --modao-guide-safe-top: max(10px, env(safe-area-inset-top, 0px));
  --modao-guide-safe-right: max(10px, env(safe-area-inset-right, 0px));
  --modao-guide-safe-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  --modao-guide-safe-left: max(10px, env(safe-area-inset-left, 0px));
  --modao-guide-motion-x: 0px;
  --modao-guide-motion-y: 4px;
  position: fixed;
  z-index: 10000;
  top: clamp(
    var(--modao-guide-safe-top),
    var(--modao-guide-top),
    calc(100dvh - var(--modao-guide-safe-bottom) - var(--modao-guide-size))
  );
  left: clamp(
    var(--modao-guide-safe-left),
    var(--modao-guide-left),
    calc(100vw - var(--modao-guide-safe-right) - var(--modao-guide-size))
  );
  display: grid;
  width: var(--modao-guide-size);
  height: var(--modao-guide-size);
  margin: 0;
  padding: 0;
  overflow: visible;
  place-items: center;
  color: var(--brand-navy);
  background: var(--brand-cyan);
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 50%;
  box-shadow:
    0 7px 20px rgb(0 22 62 / 22%),
    0 0 0 3px rgb(19 191 239 / 20%);
  pointer-events: none;
  animation: modao-guide-nudge 1.4s ease-in-out infinite alternate;
}

.modao-rhythm-guide-arrow::after {
  position: absolute;
  inset: -5px;
  border: 1px solid rgb(19 191 239 / 35%);
  border-radius: inherit;
  content: "";
  animation: modao-guide-halo 1.4s ease-in-out infinite;
}

.modao-rhythm-guide-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modao-rhythm-guide-arrow[data-placement="top"] {
  --modao-guide-motion-y: 4px;
}

.modao-rhythm-guide-arrow[data-placement="top"] svg {
  transform: rotate(90deg);
}

.modao-rhythm-guide-arrow[data-placement="right"] {
  --modao-guide-motion-x: -4px;
  --modao-guide-motion-y: 0px;
}

.modao-rhythm-guide-arrow[data-placement="right"] svg {
  transform: rotate(180deg);
}

.modao-rhythm-guide-arrow[data-placement="bottom"] {
  --modao-guide-motion-y: -4px;
}

.modao-rhythm-guide-arrow[data-placement="bottom"] svg {
  transform: rotate(-90deg);
}

.modao-rhythm-guide-arrow[data-placement="left"] {
  --modao-guide-motion-x: 4px;
  --modao-guide-motion-y: 0px;
}

@keyframes modao-guide-nudge {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--modao-guide-motion-x), var(--modao-guide-motion-y)); }
}

@keyframes modao-guide-halo {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50% { opacity: 0.9; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .modao-rhythm-guide-arrow,
  .modao-rhythm-guide-arrow::after {
    animation: none;
  }
}