.term-hint { display: inline-block; position: relative; }
.term-hint__toggle { position: absolute; z-index: 11; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.term-hint__trigger { text-decoration: underline dotted; text-underline-offset: .15em; }
.term-hint__toggle:focus-visible + .term-hint__trigger { outline: 2px solid currentColor; outline-offset: 2px; }
.term-hint__text {
  display: none;
  position: absolute;
  z-index: 10;
  bottom: 100%;
  left: 0;
  width: max-content;
  max-width: min(20rem, 70vw);
  padding: .5em .7em;
  border: 1px solid #888;
  border-radius: .3em;
  background: var(--body-background, white);
  color: var(--body-font-color, #222);
  box-shadow: 0 2px 8px #0003;
}
.term-hint__text > a:last-child { display: block; margin-top: .35em; }
.term-hint__toggle:checked ~ .term-hint__text { display: block; }
.term-hint__text:focus-within { display: block; }
@media (hover: hover) {
  .term-hint:hover .term-hint__text { display: block; }
  .term-hint__text::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 1em; }
}