:root {
  --stp-tracking-width: 3px;
  --stp-tracking-offset: 4px;
  --stp-tracking-marker-width: .42rem;
  --stp-reading-mask-opacity: .38;
  --stp-pointer-guide-size: 3rem;
}

.stp-visual-tracker {
  position: fixed;
  display: none;
  pointer-events: none;
  z-index: 99990;
  border: var(--stp-tracking-width) solid var(--uac-color-tracking, #404040);
  border-inline-start-width: var(--stp-tracking-marker-width);
  border-radius: .2rem;
  box-sizing: border-box;
  background: transparent;
}

.stp-visual-tracker[data-stp-active="true"] {
  display: block;
}

.stp-visual-tracker--focus {
  opacity: 1;
  box-shadow: 0 0 0 2px Canvas;
}

.stp-visual-tracker--hover {
  opacity: .62;
  border-style: solid;
}

html[data-stp-tracking-intensity="enhanced"] {
  --stp-tracking-width: 4px;
  --stp-tracking-marker-width: .55rem;
}

html[data-stp-tracking-intensity="high"] {
  --stp-tracking-width: 5px;
  --stp-tracking-marker-width: .7rem;
}

html[data-stp-tracking-intensity="high"] .stp-visual-tracker--hover {
  opacity: .9;
}

.stp-visual-focus-within {
  outline: 2px dashed var(--uac-color-tracking, #404040);
  outline-offset: .35rem;
}

.stp-reading-highlight {
  box-shadow: inset var(--stp-tracking-marker-width) 0 0 var(--uac-color-reading-guide, #5a3e00);
  outline: 2px solid var(--uac-color-reading-guide, #5a3e00);
  outline-offset: .2rem;
}

[dir="rtl"] .stp-reading-highlight {
  box-shadow: inset calc(-1 * var(--stp-tracking-marker-width)) 0 0 var(--uac-color-reading-guide, #5a3e00);
}

.stp-reading-ruler,
.stp-pointer-guide,
.stp-reading-mask {
  position: fixed;
  display: none;
  pointer-events: none;
  inset-inline: 0;
  z-index: 99985;
}

.stp-reading-ruler[data-stp-active="true"] {
  display: block;
  block-size: 0;
  border-block-start: 4px solid var(--uac-color-reading-guide, #5a3e00);
  box-shadow: 0 2px 0 Canvas;
}

.stp-pointer-guide[data-stp-active="true"] {
  display: block;
  block-size: var(--stp-pointer-guide-size);
  border-block: 2px solid var(--uac-color-reading-guide, #5a3e00);
  background: rgb(90 62 0 / .08);
  background: color-mix(in srgb, var(--uac-color-reading-guide, #5a3e00) 8%, transparent);
}

.stp-reading-mask[data-stp-active="true"] {
  display: block;
  background: rgb(0 0 0 / var(--stp-reading-mask-opacity));
}

.stp-current-section {
  box-shadow: inset var(--stp-tracking-marker-width) 0 0 var(--uac-color-tracking, #404040);
}

[dir="rtl"] .stp-current-section {
  box-shadow: inset calc(-1 * var(--stp-tracking-marker-width)) 0 0 var(--uac-color-tracking, #404040);
}

@media (prefers-reduced-motion: reduce) {
  .stp-visual-tracker,
  .stp-reading-ruler,
  .stp-pointer-guide,
  .stp-reading-mask {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .stp-visual-tracker,
  .stp-reading-highlight,
  .stp-visual-focus-within,
  .stp-current-section {
    border-color: CanvasText;
    outline-color: CanvasText;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  .stp-pointer-guide {
    background: transparent;
    border-color: CanvasText;
  }

  .stp-reading-ruler {
    border-color: CanvasText;
    box-shadow: none;
  }

  .stp-reading-mask {
    display: none !important;
  }
}

@media print {
  .stp-visual-tracker,
  .stp-reading-ruler,
  .stp-pointer-guide,
  .stp-reading-mask {
    display: none !important;
  }

  .stp-visual-focus-within,
  .stp-reading-highlight,
  .stp-current-section {
    outline: none !important;
    box-shadow: none !important;
  }
}