/* A flat, translucent hint in the same mint hue as the Diandian logo. */
#diandian-onboarding { position: relative; z-index: 24; }
.onboarding-tip {
  position: fixed;
  box-sizing: border-box;
  padding: 6px 14px 3px;
  border: 0;
  border-radius: 14px;
  background: rgba(225, 249, 243, .84);
  color: #153c36;
  font-family: inherit;
  /* Deliberately no blur, border, shadow or simulated glass material. */
}
.onboarding-target { position: fixed; pointer-events: none; border: 2px solid #38b6a5; box-shadow: 0 0 0 3px rgba(255,255,255,.9); }
.onboarding-target.is-point { animation: onboarding-point 1.6s ease-in-out infinite; }
.onboarding-pointer { position: fixed; inset: 0; width: 100vw; height: 100dvh; pointer-events: none; overflow: visible; }
.onboarding-pointer path { fill: none; stroke: #258d80; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.onboarding-pointer marker path { stroke-width: 1.6; }
@keyframes onboarding-point { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .onboarding-target.is-point { animation: none; } }
.onboarding-tip-meta { display: flex; align-items: center; justify-content: space-between; min-height: 28px; font-size: 10px; color: #3d665d; }
.onboarding-tip-meta button { display: grid; place-items: center; width: 32px; height: 30px; margin-right: -8px; font-size: 21px; color: #43635d; }
.onboarding-tip h2 { margin: 1px 0 4px; font-size: 15px; line-height: 1.45; font-weight: 550; letter-spacing: -.25px; }
.onboarding-tip p { margin: 0; font-size: 12px; line-height: 1.65; }
.onboarding-tip footer { display: flex; justify-content: flex-end; }
.onboarding-tip footer button { min-height: 40px; padding: 7px 0 2px 16px; color: #1e5a4f; font-size: 12px; font-weight: 550; }
.onboarding-tip button:focus-visible { outline: 2px solid #437e73; outline-offset: 2px; border-radius: 4px; }
.onboarding-replay { margin-top: 20px; min-height: 44px; padding: 8px 16px; color: #27675b; font-size: 14px; background: rgba(154,235,223,.2); border-radius: 10px; }