#npm-chat-page .npm-tour { position: fixed; inset: 0; z-index: 70; opacity: 0; transition: opacity .28s ease; touch-action: none; }
#npm-chat-page .npm-tour[hidden] { display: none; }
#npm-chat-page .npm-tour.is-open { opacity: 1; }

#npm-chat-page .npm-tour-hole {
  position: fixed; box-sizing: border-box; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, .95), 0 0 0 9999px rgba(2, 6, 23, .66);
  transition: left .42s var(--npm-side-ease), top .42s var(--npm-side-ease), width .42s var(--npm-side-ease), height .42s var(--npm-side-ease), border-radius .42s var(--npm-side-ease), box-shadow .3s ease;
}
#npm-chat-page .npm-tour-hole::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  border: 2px solid rgba(13, 110, 253, .9); animation: npm-tour-pulse 1.8s ease-out infinite;
}
#npm-chat-page .npm-tour.is-center .npm-tour-hole { box-shadow: 0 0 0 9999px rgba(2, 6, 23, .66); }
#npm-chat-page .npm-tour.is-center .npm-tour-hole::after { display: none; }

#npm-chat-page .npm-tour-hole::before {
  content: ""; position: absolute; display: none; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: rgba(255, 255, 255, .95); box-shadow: 0 0 0 6px rgba(255, 255, 255, .28), 0 6px 16px rgba(0, 0, 0, .3);
}
#npm-chat-page .npm-tour.is-up .npm-tour-hole::before { display: block; left: 50%; bottom: 0; animation: npm-tour-up 1.7s cubic-bezier(.32, .72, 0, 1) infinite; }
#npm-chat-page .npm-tour.is-left .npm-tour-hole::before { display: block; top: 50%; right: 0; animation: npm-tour-left 1.7s cubic-bezier(.32, .72, 0, 1) infinite; }

#npm-chat-page .npm-tour-tip {
  position: fixed; box-sizing: border-box; width: min(20rem, calc(100vw - 24px)); padding: 14px 16px 14px;
  border: 1px solid var(--npm-border); border-radius: 18px;
  background: var(--npm-bg-elevated, var(--npm-bg)); color: var(--npm-text);
  box-shadow: 0 22px 50px -12px rgba(2, 6, 23, .45), 0 2px 8px rgba(2, 6, 23, .1);
  transition: left .42s var(--npm-side-ease), top .42s var(--npm-side-ease);
}
#npm-chat-page .npm-tour-tip.is-show { animation: npm-tour-in .32s var(--npm-side-ease) both; }
#npm-chat-page .npm-tour-arrow {
  position: absolute; width: 14px; height: 14px; margin-left: -7px; background: inherit;
  border: 1px solid var(--npm-border); transform: rotate(45deg);
}
#npm-chat-page .npm-tour-tip.is-under .npm-tour-arrow { top: -8px; border-right: 0; border-bottom: 0; }
#npm-chat-page .npm-tour-tip.is-over .npm-tour-arrow { bottom: -8px; border-left: 0; border-top: 0; }
#npm-chat-page .npm-tour-tip.is-side .npm-tour-arrow { left: -8px; margin-left: 0; border-top: 0; border-right: 0; }
#npm-chat-page .npm-tour.is-center .npm-tour-arrow { display: none; }

#npm-chat-page .npm-tour-head { display: flex; align-items: center; justify-content: space-between; min-height: 20px; margin: -2px -6px 4px 0; }
#npm-chat-page .npm-tour-count { font-size: 12px; font-weight: 600; color: var(--npm-blue); }
#npm-chat-page .npm-tour-x {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--npm-text-muted); cursor: pointer;
}
#npm-chat-page .npm-tour-x:active { background: var(--npm-side-hover-bg); }
#npm-chat-page .npm-tour-x svg { width: 16px; height: 16px; }
#npm-chat-page .npm-tour-title { margin: 0 0 6px; font-size: 16px; font-weight: 650; line-height: 1.35; color: var(--npm-text); }
#npm-chat-page .npm-tour-text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--npm-text-secondary); }
#npm-chat-page .npm-tour-bar { height: 4px; margin: 14px 0 12px; border-radius: 4px; background: var(--npm-side-hover-bg); overflow: hidden; }
#npm-chat-page .npm-tour-bar i { display: block; height: 100%; border-radius: inherit; background: var(--npm-blue); transition: width .4s var(--npm-side-ease); }
#npm-chat-page .npm-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#npm-chat-page .npm-tour-btn {
  height: 38px; padding: 0 16px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
#npm-chat-page .npm-tour-btn:active { transform: scale(.96); }
#npm-chat-page .npm-tour-prev { background: transparent; color: var(--npm-text-secondary); padding: 0 6px; }
#npm-chat-page .npm-tour-next { background: var(--npm-blue); color: #fff; box-shadow: 0 6px 16px -6px rgba(13, 110, 253, .6); }

@keyframes npm-tour-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }
@keyframes npm-tour-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes npm-tour-up { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 70% { opacity: 1; transform: translateY(-70px); } 100% { opacity: 0; transform: translateY(-80px); } }
@keyframes npm-tour-left { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 70% { opacity: 1; transform: translateX(-70px); } 100% { opacity: 0; transform: translateX(-80px); } }

@media (prefers-reduced-motion: reduce) {
  #npm-chat-page .npm-tour-hole, #npm-chat-page .npm-tour-tip { transition: none; }
  #npm-chat-page .npm-tour-hole::after, #npm-chat-page .npm-tour-tip.is-show { animation: none; }
}