/* Reserve the same viewport width while loading, scrolling or opening a dialog. */
html {
  overflow-y: auto;
  scrollbar-gutter: stable;
  color-scheme: dark;
}

/* Lenis uses overflow: clip when stopped; clip discards the reserved gutter.
   Hidden still locks scrolling and retains the gutter throughout the intro. */
html.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: hidden;
}

html, .project-dialog {
  scrollbar-width: thin;
  scrollbar-color: #326fba #090b0e;
}
.project-dialog { scrollbar-gutter: stable; }

/* Native scrolling and dragging, with a slim blue capsule in Blink/WebKit. */
@supports selector(::-webkit-scrollbar) {
  html, .project-dialog { scrollbar-width: auto; scrollbar-color: auto; }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: #090b0e; }
  ::-webkit-scrollbar-thumb {
    min-height: 48px;
    border: 3px solid #090b0e;
    border-radius: 12px;
    background: linear-gradient(180deg, #4288d9, #255a9b);
    box-shadow: inset 0 1px 0 #a3d5ff33;
  }
  ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #70b5ff, #3793ff); }
  ::-webkit-scrollbar-thumb:active { background: #8cc8ff; }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  ::-webkit-scrollbar-corner { background: #090b0e; }
}

@media (forced-colors: active) {
  html, .project-dialog { scrollbar-color: auto; }
  ::-webkit-scrollbar-thumb { background: ButtonText; border-color: Canvas; box-shadow: none; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: Canvas; }
}