#readingProgress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 80;
  pointer-events: none;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, #00bfa5, #00aaff, #9b68ff, #f4668c);
}
body[data-rgb='off'] #readingProgress {
  background: var(--blue);
}
@keyframes visual-tap {
  from {
    opacity: 0.75;
    scale: 0.96;
  }
  to {
    opacity: 0;
    scale: 1.08;
  }
}
body[data-motion='on'] .visual-tapped::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #35cadd;
  border-radius: inherit;
  pointer-events: none;
  animation: visual-tap 300ms ease-out both;
}
body[data-motion='on'] .toast {
  transition:
    opacity 220ms ease-out,
    transform 220ms cubic-bezier(0.2, 0.65, 0.3, 1);
}
body[data-motion='on'] .nav-item {
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease;
}
body[data-motion='off'] :is(.sidebar, main, .toast, .nav-item, .primary, .secondary, .tool-btn) {
  transition: none !important;
}
body[data-motion='off'] :is(button, .nav-item):hover {
  transform: none !important;
}
body[data-motion='off'] dialog[open] {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .visual-tapped::before {
    display: none !important;
  }
}
@media (max-width: 700px) {
  #readingProgress {
    height: 2px;
  }
}