.hpt-gloss {
  border-bottom: 1px dotted #2563eb;
  cursor: help;
  color: inherit;
  font-weight: 650;
  background: transparent;
}
.hpt-gloss:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}
html[data-theme="dark"] .hpt-gloss {
  border-bottom-color: #60a5fa;
}

/* Kill leftover CSS ::after bubbles from older packs (they clip / leak). */
.hpt-gloss::after,
.hpt-gloss:hover::after,
.hpt-gloss:focus::after,
.hpt-gloss:focus-within::after,
.hpt-body .hpt-gloss::after,
.hpt-body .hpt-gloss:hover::after,
.hpt-body .hpt-gloss:focus-within::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  padding: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#hpt-gloss-pop {
  position: fixed;
  z-index: 2147483000;
  display: none;
  max-width: min(280px, calc(100vw - 24px));
  padding: 0.6rem 0.75rem;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.45;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.35);
  pointer-events: none;
  white-space: normal;
  word-wrap: break-word;
}
#hpt-gloss-pop.is-on {
  display: block;
}
#hpt-gloss-pop::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: var(--arrow-left, 16px);
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: #0f172a;
  transform: rotate(45deg);
  padding: 0;
  box-shadow: none;
}
#hpt-gloss-pop.is-below::after {
  bottom: auto;
  top: -6px;
}