/* Thin Apple-style scrollbars — sitewide */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 9999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.42);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Dark surfaces */
.dot-grid,
.dot-grid *,
.bg-black,
.bg-black *,
#courseModules,
#courseModules * {
  scrollbar-color: rgba(255, 255, 255, 0.28) rgba(0, 0, 0, 0.55);
}

.dot-grid *::-webkit-scrollbar-track,
.bg-black *::-webkit-scrollbar-track,
#courseModules::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.55);
  border-radius: 9999px;
}

.dot-grid *::-webkit-scrollbar-thumb,
.bg-black *::-webkit-scrollbar-thumb,
#courseModules::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 9999px;
}

.dot-grid *::-webkit-scrollbar-thumb:hover,
.bg-black *::-webkit-scrollbar-thumb:hover,
#courseModules::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.42);
}

#courseModules {
  scrollbar-gutter: stable;
}