:root{
  --scrollbar-size:12px;
  --scroll-track:var(--wall,#f4f4f1);
  --scroll-thumb:rgba(44,44,42,.38);
  --scroll-thumb-hover:rgba(37,37,35,.50);
  --scroll-thumb-active:rgba(29,29,28,.62);
  --scroll-thumb-highlight:rgba(255,255,255,.46);
  --scroll-thumb-shadow:rgba(18,18,17,.16)
}

:where(.side,.photo-archive){
  --scroll-track:#111;
  --scroll-thumb:rgba(255,255,255,.30);
  --scroll-thumb-hover:rgba(255,255,255,.50);
  --scroll-thumb-active:rgba(255,255,255,.66);
  --scroll-thumb-highlight:rgba(255,255,255,.34);
  --scroll-thumb-shadow:rgba(0,0,0,.32)
}

*{
  scrollbar-color:transparent var(--scroll-track);
  scrollbar-width:thin
}

:where(.is-scroll-interacting){
  scrollbar-color:var(--scroll-thumb) var(--scroll-track)
}

*::-webkit-scrollbar{
  width:var(--scrollbar-size);
  height:var(--scrollbar-size);
  background:var(--scroll-track)
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-corner{
  border:0;
  background-color:var(--scroll-track);
  box-shadow:none
}

:where(.paper-detail-scroll,.project-detail-scroll){--scroll-track:#151514}
:where(.project-detail-lightbox,.paper-carousel__lightbox){--scroll-track:#f8f7f3}
:where(.photo-archive__index,.photo-viewer){--scroll-track:#0d0e0e}

html:has(.paper-detail-dialog[open]),
html:has(.project-dialog--detail[open]){--scroll-track:#151514}

html:has(.paper-carousel__lightbox[open]),
html:has(.project-detail-lightbox[open]){--scroll-track:#f8f7f3}

html:has(.photo-viewer[open]){--scroll-track:#080b0a}

*::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0
}

*::-webkit-scrollbar-thumb{
  min-width:30px;
  min-height:30px;
  border:3px solid transparent;
  border-radius:999px;
  background-color:transparent;
  background-clip:padding-box;
  box-shadow:none;
  -webkit-backdrop-filter:blur(9px) saturate(1.15);
  backdrop-filter:blur(9px) saturate(1.15);
  transition:background-color .72s cubic-bezier(.22,1,.36,1),box-shadow .72s cubic-bezier(.22,1,.36,1)
}

:where(.is-scroll-interacting)::-webkit-scrollbar-thumb{
  background-color:var(--scroll-thumb);
  box-shadow:inset 0 0 0 .5px var(--scroll-thumb-highlight),0 2px 8px var(--scroll-thumb-shadow)
}

:where(.is-scroll-interacting)::-webkit-scrollbar-thumb:hover{
  background-color:var(--scroll-thumb-hover)
}

:where(.is-scroll-interacting)::-webkit-scrollbar-thumb:active{
  background-color:var(--scroll-thumb-active)
}

@media(max-width:768px){
  :root{--scrollbar-size:10px}
  *::-webkit-scrollbar-thumb{border-width:3px}
}

@media(prefers-reduced-motion:reduce){
  *::-webkit-scrollbar-thumb{transition:none}
}

@media print{
  *{scrollbar-color:transparent transparent!important}
  *::-webkit-scrollbar{display:none!important}
}