/* Plain-words hints (2026-10-15, owner): a technical word gets a quiet dotted underline; hovering it (or tapping it on a
   phone, or focusing it with the keyboard) shows a short explanation in everyday words. gloss.js places the box. */
.tt { text-decoration: underline dotted; text-decoration-color: rgba(237,237,232,.62); text-decoration-thickness: 1.5px; text-underline-offset: .24em;   /* 2026-10-22: a bit more visible (was .38 / 1px) */
  cursor: help; border-radius: 3px; outline: none; }
.tt:hover, .tt:focus-visible, .tt.on { text-decoration-color: rgba(237,237,232,.95); }
.tt:focus-visible { box-shadow: 0 0 0 2px rgba(157,181,255,.5); }
.tt-box { position: fixed; z-index: 95; left: 0; top: 0; max-width: min(300px, calc(100vw - 32px)); padding: 12px 14px 13px; border-radius: 10px;
  background: rgba(20,20,22,.97); border: 1px solid rgba(237,237,232,.14); box-shadow: 0 18px 40px -12px rgba(0,0,0,.85);
  font-family: var(--text, "Geist", system-ui, sans-serif); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none;
  color: rgba(237,237,232,.88); text-align: left; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; }
.tt-box b { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 500; letter-spacing: .04em; color: rgba(237,237,232,.5); }
.tt-box.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tt-box { transition: none; } }