/* Token easter egg overlay (round-05 RT2; portable; pairs with tokens-egg.js).
   One fixed layer over the page that takes no pointer events and is never read aloud; it holds the
   hairlines between tokens and the token IDs. Nothing here touches the page's own text, so the text keeps
   its metrics, stays selectable and never moves.
   Override on the page if wanted: --tegg-font (ID face), --tegg-id (ID colour), --tegg-cut (hairline
   colour near the rested word), --tegg-cut-far (the colour hairlines pale toward at the ripple's edge). */
.tegg-layer {
  position: fixed; inset: 0; z-index: 2147483000;
  pointer-events: none; overflow: hidden; contain: strict;
  -webkit-user-select: none; user-select: none;
}
.tegg-id {
  position: absolute; left: 0; top: 0; visibility: hidden;
  height: 1em; overflow: hidden; white-space: nowrap;
  font: 500 9px/1 var(--tegg-font, 'IBM Plex Sans', Arial, sans-serif);
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0; color: var(--tegg-id, #004380);
}
.tegg-id b { display: block; font-weight: inherit; }
.tegg-cut {
  position: absolute; left: 0; top: 0; width: 1px; margin-left: -.5px; visibility: hidden;
  background: var(--tegg-cut, #4896CF); color: var(--tegg-cut-far, #E4E5E6); transform-origin: 50% 50%;
}
/* the leader from a moved row of IDs to its word: dotted, in the ID colour, so it never reads as a boundary */
.tegg-tick { transform-origin: 50% 0; background: repeating-linear-gradient(to bottom, var(--tegg-id, #004380) 0 1px, transparent 1px 2.5px); }
/* for one synchronous measurement while IDs are placed: lets hit tests see text that takes no pointer events
   (pointer-events changes no layout and nothing is painted in between) */
html.tegg-probe body *:not(.tegg-layer):not(.tegg-layer *) { pointer-events: auto !important; }
@media print { .tegg-layer { display: none; } }