.alika-hints-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}
.alika-hints-toggle::before {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.alika-hints-toggle.active {
  border-color: var(--app-accent, var(--blue, #087fbd));
  background: var(--app-accent-soft, var(--blue-soft, #e8f5fc));
  color: var(--app-accent, var(--blue, #087fbd));
}
.alika-hint-tooltip {
  position: fixed;
  z-index: 20000;
  width: max-content;
  max-width: min(330px, calc(100vw - 20px));
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--app-accent, var(--blue, #087fbd)) 42%, transparent);
  border-radius: 9px;
  background: #10283c;
  color: #f6fbff;
  box-shadow: 0 10px 30px rgba(3, 22, 38, .24);
  font: 600 12px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  pointer-events: none;
}
.alika-hint-tooltip[hidden] { display: none; }
html[data-hints="on"] [data-hint],
html[data-hints="on"] button,
html[data-hints="on"] a[href],
html[data-hints="on"] input,
html[data-hints="on"] select,
html[data-hints="on"] textarea,
html[data-hints="on"] article,
html[data-hints="on"] th,
html[data-hints="on"] td { cursor: help; }
html[data-hints="on"] button,
html[data-hints="on"] a[href],
html[data-hints="on"] input,
html[data-hints="on"] select,
html[data-hints="on"] textarea { cursor: pointer; }
@media (max-width: 760px) {
  .alika-hint-tooltip { max-width: calc(100vw - 20px); }
}