/* A small kinetic instrument: spectrum orbit, quiet ticks, continuous descent. */
.ae-scroll-cue {
  --cue-size: 112px;
  position: fixed;
  z-index: 980;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: max-content;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #292735;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.ae-scroll-cue__dial {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--cue-size);
  height: var(--cue-size);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 48%, #ffffffc9 65%, #ffffff00 71%);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.ae-scroll-cue__ticks,
.ae-scroll-cue__orbit,
.ae-scroll-cue__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.ae-scroll-cue__ticks {
  background: repeating-conic-gradient(from 0deg, #706d8b66 0deg 1deg, transparent 1deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 65%, #000 66% 69%, transparent 70%);
  mask: radial-gradient(circle, transparent 65%, #000 66% 69%, transparent 70%);
}
.ae-scroll-cue__halo {
  inset: 9px;
  background: conic-gradient(from 0deg, #8fb8ff, #7b7cff, #a12894, #f97316, #facc15, #8fb8ff);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65% 69%, transparent 70%);
  mask: radial-gradient(circle, transparent 64%, #000 65% 69%, transparent 70%);
  animation: ae-cue-turn 9s linear infinite;
}
.ae-scroll-cue__orbit {
  inset: 1px;
  animation: ae-cue-turn 7s linear infinite;
}
.ae-scroll-cue__orbit::before {
  content: "";
  position: absolute;
  top: -1px;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7b7cff;
  box-shadow: 0 0 0 4px #7b7cff18, 0 0 14px #7b7cff55;
}
.ae-scroll-cue__core {
  position: relative;
  width: 64%;
  height: 64%;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #373244, #15141d 75%);
  box-shadow: inset 0 1px 0 #ffffff38, 0 7px 20px #28213c26;
  transition: box-shadow .3s;
}
.ae-scroll-cue__arrows {
  position: absolute;
  inset: 0;
  animation: ae-cue-descend 2.6s cubic-bezier(.65,0,.25,1) infinite;
}
.ae-scroll-cue__arrows svg {
  position: absolute;
  top: 25%;
  left: 30%;
  width: 40%;
  height: 50%;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ae-scroll-cue__arrows svg + svg { top: -75%; }
.ae-scroll-cue__label {
  padding: 5px 9px;
  border-radius: 20px;
  background: #ffffffe6;
  font: 500 10px/1.3 Goga, Arial, sans-serif;
  letter-spacing: .19em;
  white-space: nowrap;
}
.ae-scroll-cue__trail {
  position: relative;
  width: 1px;
  height: 23px;
  margin-top: -8px;
  overflow: hidden;
  background: #7b7cff25;
}
.ae-scroll-cue__trail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, #6b6bee);
  animation: ae-cue-trace 2.6s ease-in-out infinite;
}
.ae-scroll-cue:focus-visible {
  outline: 2px solid #6b6bee;
  outline-offset: 9px;
  border-radius: 10px;
}
@media (hover: hover) {
  .ae-scroll-cue:hover .ae-scroll-cue__dial { transform: translateY(3px) scale(1.07); }
  .ae-scroll-cue:hover .ae-scroll-cue__core {
    box-shadow: inset 0 1px 0 #ffffff38, 0 9px 28px #7b7cff55;
  }
}
.ae-scroll-cue:active .ae-scroll-cue__dial { transform: scale(.96); }
.ae-scroll-cue[data-paused] *,
.ae-scroll-cue[data-paused] *::after { animation-play-state: paused; }
#music { scroll-margin-top: 32px; }
@keyframes ae-cue-turn { to { transform: rotate(360deg); } }
@keyframes ae-cue-descend {
  0%, 30% { transform: translateY(0); }
  78%, 100% { transform: translateY(100%); }
}
@keyframes ae-cue-trace {
  0%, 20% { transform: translateY(-100%); opacity: 0; }
  40% { opacity: 1; }
  90%, 100% { transform: translateY(100%); opacity: 0; }
}
@media (max-width: 767px) {
  .ae-scroll-cue {
    --cue-size: 80px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    gap: 8px;
  }
  .ae-scroll-cue__label { font-size: 9px; letter-spacing: .1em; }
  .ae-scroll-cue__trail { display: none; }
  .ae-scroll-cue__halo { inset: 6px; }
}
@media (max-height: 500px) and (min-width: 768px) {
  .ae-scroll-cue { --cue-size: 80px; gap: 10px; }
  .ae-scroll-cue__trail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ae-scroll-cue *, .ae-scroll-cue *::after { animation: none !important; transition: none !important; }
  .ae-scroll-cue__arrows svg + svg { display: none; }
  .ae-scroll-cue__trail::after { opacity: 1; }
}