:root {
  --yh-ease: cubic-bezier(.2,.72,.2,1);
  --yh-focus-color: color-mix(in srgb, var(--accent, #3157d5) 72%, white);
}

::selection { background: color-mix(in srgb, var(--accent, #3157d5) 22%, transparent); }

button, a, input, select, textarea, [role="button"] { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"] { touch-action: manipulation; }

:where(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--yh-focus-color);
  outline-offset: 3px;
}

dialog::backdrop {
  background: rgba(10, 14, 24, .46);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.yh-skeleton {
  background: linear-gradient(100deg, rgba(148,163,184,.12) 20%, rgba(148,163,184,.25) 38%, rgba(148,163,184,.12) 56%);
  background-size: 220% 100%;
  animation: yh-shimmer 1.4s var(--yh-ease) infinite;
}

@keyframes yh-shimmer { to { background-position-x: -220%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}