/* Shared by every page and its nested scrollable panels. */
@property --site-scroll-thumb {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--site-scroll-thumb, transparent) transparent !important;
}
html, [data-site-scrollbar] {
  transition: --site-scroll-thumb .35s ease;
}
[data-site-scrolling] {
  --site-scroll-thumb: rgba(229, 117, 31, .55);
}
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { min-height: 48px; border-radius: 999px; background: transparent; }
[data-site-scrolling]::-webkit-scrollbar-thumb { background: rgba(229, 117, 31, .55); }
*::-webkit-scrollbar-button { display: none; }

@media (prefers-reduced-motion: reduce) {
  html, [data-site-scrollbar] { transition: none; }
}
@media (forced-colors: active) {
  * { scrollbar-color: auto !important; }
  *::-webkit-scrollbar-thumb { background: CanvasText; }
}