.dg-tooltip {
  position: fixed;
  z-index: 12000;
  max-width: min(18rem, calc(100vw - 1rem));
  padding: .36rem .52rem;
  border: var(--dg-border-width) solid color-mix(in srgb, var(--dl-text-main, var(--dg-text-main)) 82%, transparent);
  border-radius: var(--dg-radius-sm);
  background: color-mix(in srgb, var(--dl-text-main, var(--dg-text-main)) 94%, transparent);
  color: var(--dl-bg-card, var(--dg-bg-card));
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.25;
  pointer-events: none;
  opacity: 0;
  transform: translateY(.2rem);
  backdrop-filter: blur(8px) saturate(.8);
  box-shadow: none;
  transition: opacity .14s ease, transform .14s ease;
}
.dg-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.dg-tooltip[data-placement="bottom"] { transform: translateY(-.2rem); }
.dg-tooltip[data-placement="bottom"].is-visible { transform: translateY(0); }
@media (hover: none) { .dg-tooltip { display: none; } }
@media (prefers-reduced-motion: reduce) { .dg-tooltip { transition-duration: .01ms; } }