/* Native scrolling, no JavaScript and no changes to layout widths. */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) and (forced-colors: none) {
  html {
    scrollbar-color: #e60083 #b9f3ff;
    scrollbar-width: auto;
  }
  @supports selector(::-webkit-scrollbar) {
    /* Let the richer native scrollbar pseudo-elements take precedence. */
    html { scrollbar-color: auto; scrollbar-width: auto; }
    html::-webkit-scrollbar { width: 16px; height: 16px; }
    html::-webkit-scrollbar-track {
      background: repeating-linear-gradient(135deg, #b9f3ff 0 9px, #e2faff 9px 18px);
      border-left: 2px solid #19121c;
      box-shadow: inset 2px 0 0 #ff69bc;
    }
    html::-webkit-scrollbar-track:horizontal {
      border-left: 0; border-top: 2px solid #19121c;
    }
    html::-webkit-scrollbar-thumb {
      min-height: 52px; min-width: 52px;
      border: 2px solid #19121c;
      border-radius: 7px;
      background: linear-gradient(150deg, #ffaad7 0%, #ff299d 40%, #e50080 70%, #fff54f 100%);
      box-shadow: inset 2px 0 0 #fff9, inset -2px 0 0 #920052;
    }
    html::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(150deg, #fff65b 0%, #ffb4df 40%, #ff299d 75%, #a7f4ff 100%);
      box-shadow: inset 2px 0 0 #fff, inset -2px 0 0 #ae0061;
    }
    html::-webkit-scrollbar-thumb:active {
      background: linear-gradient(150deg, #fff84b, #a1f0ff 48%, #ff6cbd);
      box-shadow: inset 1px 1px 3px #19121c99;
    }
    html::-webkit-scrollbar-corner { background: #fff54f; }
  }
}