.pin-cue{position:absolute;inset:0;pointer-events:none;z-index:3}.pin-cue-rail{position:absolute;right:calc((100% - 100vw) / 2 + .6rem);top:50%;height:min(40svh,18rem);width:2px;translate:0 -50%;border-radius:2px;background:var(--line-strong);opacity:0;transition:opacity .3s ease}.pin-cue-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,var(--accent),var(--accent-2));transform:scaleY(0);transform-origin:top}.pin-cue[data-live=on] .pin-cue-rail{opacity:1}.pin-cue-hint{position:absolute;left:50%;bottom:1.1rem;translate:-50% 0;margin:0;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);box-shadow:0 6px 24px color-mix(in srgb,var(--accent) 22%,transparent);opacity:0;transition:opacity .35s ease,translate .35s ease}.pin-cue[data-live=on][data-state=start] .pin-cue-hint{opacity:1}.pin-cue-hint svg{animation:pin-cue-bob 1.4s ease-in-out infinite;color:var(--accent)}.pin-cue[data-state=end] .pin-cue-hint,.pin-cue[data-state=mid] .pin-cue-hint{opacity:0;translate:-50% 8px}@keyframes pin-cue-bob{0%,to{transform:translateY(-2px)}50%{transform:translateY(3px)}}@media (max-width:860px){.pin-cue-rail{right:.4rem;height:26svh;top:30%}.pin-cue-hint{bottom:.75rem}}@media (prefers-reduced-motion:reduce){.pin-cue{display:none}}.is-static .pin-cue{display:none}