/* Animate paint only; preserve native scrolling and deliberately hidden canvas bars. */
:root {
  --ui-scrollbar-size: 4px;
  --ui-scrollbar-thumb: #d1d4cd;
}
@property --ui-scrollbar-paint {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
:where(*) {
  /* Reset on every element so scrolling ancestors cannot reveal nested bars. */
  --ui-scrollbar-paint: transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-scrollbar-paint) transparent;
}
:where([data-scroll-tracked]) { transition: --ui-scrollbar-paint 280ms ease; }
:where([data-scroll-active=true]) {
  --ui-scrollbar-paint: var(--ui-scrollbar-thumb);
  transition-duration: 160ms;
}
@supports selector(::-webkit-scrollbar) {
  :where(*) { scrollbar-width: auto; scrollbar-color: auto; }
  ::-webkit-scrollbar { width: var(--ui-scrollbar-size); height: var(--ui-scrollbar-size); }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--ui-scrollbar-paint); border-radius: 999px; }
  ::-webkit-scrollbar-button { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-scroll-tracked] { transition: none; }
}
@media (forced-colors: active) {
  :where(*) { scrollbar-color: auto; }
  ::-webkit-scrollbar-thumb { background: CanvasText; }
}