/* Native scrolling, with colors matching the contact and mascot palette. */
@media screen {
  html, body * {
    scrollbar-color: #356f61 #f6f3e9;
    scrollbar-width: auto;
  }
}
/* Rounded thumbs where supported; other browsers keep their native shape. */
@supports selector(::-webkit-scrollbar) {
  @media screen and (hover: hover) and (pointer: fine) {
    html, body * { scrollbar-color: auto; }
    ::-webkit-scrollbar { width: 14px; height: 14px; }
    ::-webkit-scrollbar-track { background: #f6f3e9; }
    ::-webkit-scrollbar-thumb {
      background: #356f61;
      border: 3px solid #f6f3e9;
      border-radius: 999px;
      min-height: 44px;
      min-width: 44px;
    }
    ::-webkit-scrollbar-thumb:hover { background: #245449; }
    ::-webkit-scrollbar-thumb:active { background: #183f36; }
    ::-webkit-scrollbar-corner { background: #f6f3e9; }
  }
}
@media (forced-colors: active) {
  html, body * { scrollbar-color: auto; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: Canvas; }
  ::-webkit-scrollbar-thumb { background: ButtonText; border-color: Canvas; }
  ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: Highlight; }
}