.nav-brand { position: relative; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.nav-brand img { -webkit-user-drag: none; }
.subsy-hint {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  padding: 5px 9px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--bg-1);
  color: var(--accent-light);
  font: 600 12px var(--font-sans);
  white-space: nowrap;
  pointer-events: none;
}

.subsy-visitor {
  --subsy-size: clamp(112px, 13vw, 164px);
  position: fixed;
  left: 0;
  bottom: max(24px, env(safe-area-inset-bottom));
  width: var(--subsy-size);
  height: var(--subsy-size);
  z-index: 1000;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(calc(-1 * var(--subsy-size) - 24px));
}
.subsy-visitor.is-visible { visibility: visible; }
.subsy-visitor.is-moving { animation: subsy-crossing 5.2s linear both; }
.subsy-visitor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 85%;
  filter: drop-shadow(0 5px 12px #0008);
}
.subsy-visitor.is-running img { animation: subsy-stride .18s ease-in-out infinite alternate; }
.subsy-visitor.is-peeking img { animation: subsy-peek 1.248s ease-in-out both; }
.subsy-visitor.is-still {
  left: auto;
  right: 24px;
  bottom: max(100px, env(safe-area-inset-bottom));
  transform: none;
}
@keyframes subsy-crossing {
  0% { transform: translateX(calc(-1 * var(--subsy-size) - 24px)); }
  34%, 58% { transform: translateX(calc(50vw - var(--subsy-size) / 2)); }
  100% { transform: translateX(calc(100vw + 24px)); }
}
@keyframes subsy-stride {
  from { transform: translateY(0) rotate(-4deg); }
  to { transform: translateY(-8px) rotate(3deg); }
}
@keyframes subsy-peek {
  0%, 100% { transform: rotate(0) scale(1); }
  25%, 70% { transform: rotate(-9deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .subsy-visitor, .subsy-visitor img { animation: none !important; }
}