/* fxbyfox.com — first-run tips under the header buttons (js/tips.js). Uses the app's tokens from app.css. */
.tip {
  position: fixed; z-index: 30; max-width: min(280px, calc(100vw - 32px));
  padding: 10px 14px; border-radius: 14px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 14px; font-weight: 600; line-height: 1.35;
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s var(--ease);
  cursor: pointer;
}
.tip.on { opacity: 1; transform: none; }
.tip::before {
  content: ''; position: absolute; top: -6px; left: calc(var(--ax) - 7px);
  width: 14px; height: 14px; border-radius: 3px; background: inherit; transform: rotate(45deg);
}

/* keypad size demo: a finger dot that swipes down (compact) or up (full), with a caption */
.kp-hand {
  position: fixed; z-index: 70; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  transform: translate(-22px, -22px); opacity: 0;
  transition: opacity .2s, transform .9s cubic-bezier(.3, .6, .3, 1);
}
.kp-hand.on { opacity: 1; }
.kp-hand.dn.go { transform: translate(-22px, 108px); }
.kp-hand.up.go { transform: translate(-22px, -172px); }
.kp-hand i {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent);
}
.kp-hand span {
  padding: 7px 12px; border-radius: 12px; white-space: nowrap;
  background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 600; box-shadow: var(--shadow);
}
.kp-hand.up span { transform: translateX(-50%); position: absolute; left: 22px; top: -44px; }