/* Roberto Context-Aware Vertical Scroll System V28 */
:root{
  --rvs-bg:#11181d;
  --rvs-bg-2:#202a2f;
  --rvs-lime:#c8ff4d;
  --rvs-cyan:#35f2ff;
  --rvs-pink:#ff4fd8;
  --rvs-ink:#071018;
  --rvs-white:#f7f7f2;
}
html.roberto-global-scroll-theme,
html.roberto-global-scroll-theme body,
html.roberto-global-scroll-theme *{
  scrollbar-width:thin;
  scrollbar-color:var(--rvs-lime) var(--rvs-bg);
}
html.roberto-global-scroll-theme *::-webkit-scrollbar{width:10px;height:10px}
html.roberto-global-scroll-theme *::-webkit-scrollbar-track{
  background:linear-gradient(180deg,var(--rvs-bg),var(--rvs-bg-2));
  border-left:1px solid rgba(53,242,255,.28);
}
html.roberto-global-scroll-theme *::-webkit-scrollbar-thumb{
  min-height:34px;
  border:2px solid var(--rvs-ink);
  border-radius:999px;
  background:linear-gradient(180deg,var(--rvs-lime),var(--rvs-cyan) 52%,var(--rvs-pink));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 12px rgba(200,255,77,.5);
}
html.roberto-global-scroll-theme *::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#efffb8,var(--rvs-lime) 44%,var(--rvs-cyan));
}
html.roberto-scroll-document,
html.roberto-scroll-document body{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
html.roberto-scroll-document::-webkit-scrollbar,
html.roberto-scroll-document body::-webkit-scrollbar,
.roberto-scroll-target::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
.roberto-scroll-target{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
.roberto-scroll-rail{
  position:fixed;
  z-index:2147483000;
  right:max(5px,env(safe-area-inset-right));
  top:50%;
  width:54px;
  height:min(70svh,640px);
  translate:0 -50%;
  display:grid;
  grid-template-rows:38px minmax(126px,1fr) 38px 24px;
  gap:7px;
  padding:8px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:20px;
  color:var(--rvs-white);
  background:
    radial-gradient(circle at 35% 8%,rgba(53,242,255,.17),transparent 30%),
    linear-gradient(160deg,rgba(13,19,23,.96),rgba(31,39,43,.88));
  box-shadow:-18px 20px 55px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(0,0,0,.28),0 0 24px rgba(53,242,255,.12);
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  isolation:isolate;
  opacity:0;
  transform:translateX(calc(100% + 18px));
  pointer-events:none;
  transition:opacity .3s ease,transform .5s cubic-bezier(.22,1,.36,1);
  user-select:none;
  -webkit-user-select:none;
}
.roberto-scroll-rail::before{
  content:"";
  position:absolute;
  inset:4px;
  z-index:-1;
  border-radius:16px;
  border:1px solid rgba(200,255,77,.1);
  pointer-events:none;
}
.roberto-scroll-rail::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-5px;
  top:18px;
  bottom:18px;
  width:5px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(53,242,255,.18),rgba(200,255,77,.6),rgba(255,79,216,.22));
  box-shadow:0 0 18px rgba(200,255,77,.28);
}
.roberto-scroll-rail.is-ready:not([aria-hidden="true"]){
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.roberto-scroll-rail[aria-hidden="true"]{
  display:none!important;
}
html:not(.roberto-scroll-active) .roberto-scroll-rail,
body.intro-open .roberto-scroll-rail,
html[data-roberto-scroll="off"] .roberto-scroll-rail,
body[data-roberto-scroll="off"] .roberto-scroll-rail{
  display:none!important;
}
.roberto-scroll-button{
  display:grid;
  place-items:center;
  width:100%;
  min-width:0;
  min-height:0;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:11px;
  background:rgba(255,255,255,.055);
  color:var(--rvs-white);
  font:700 16px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  cursor:pointer;
  touch-action:manipulation;
  transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.roberto-scroll-button:hover,
.roberto-scroll-button:focus-visible{
  color:var(--rvs-ink);
  background:var(--rvs-lime);
  border-color:var(--rvs-ink);
  box-shadow:0 0 18px rgba(200,255,77,.46);
  transform:scale(1.045);
  outline:2px solid var(--rvs-white);
  outline-offset:2px;
}
.roberto-scroll-track{
  position:relative;
  width:100%;
  min-height:0;
  border-radius:13px;
  background:
    linear-gradient(90deg,transparent 0 46%,rgba(255,255,255,.28) 46% 54%,transparent 54%),
    repeating-linear-gradient(180deg,rgba(53,242,255,.045) 0 9px,rgba(255,79,216,.025) 9px 18px);
  cursor:pointer;
  touch-action:none;
  overflow:visible;
}
.roberto-scroll-track:focus-visible{
  outline:2px solid var(--rvs-cyan);
  outline-offset:2px;
}
.roberto-scroll-fill{
  position:absolute;
  left:calc(50% - 2px);
  top:8px;
  width:4px;
  height:0;
  border-radius:999px;
  background:linear-gradient(180deg,var(--rvs-lime),var(--rvs-white) 58%,var(--rvs-cyan));
  box-shadow:0 0 15px rgba(200,255,77,.7);
  pointer-events:none;
}
.roberto-scroll-markers{
  position:absolute;
  inset:8px 0;
  pointer-events:none;
}
.roberto-scroll-marker{
  position:absolute;
  left:50%;
  width:9px;
  height:9px;
  translate:-50% -50%;
  border:1px solid rgba(255,255,255,.68);
  border-radius:50%;
  background:#141a1d;
  box-shadow:0 0 0 3px rgba(0,0,0,.3);
  transition:width .2s ease,height .2s ease,background .2s ease,box-shadow .2s ease;
}
.roberto-scroll-marker.is-active{
  width:13px;
  height:13px;
  border-color:var(--rvs-ink);
  background:var(--rvs-lime);
  box-shadow:0 0 0 3px rgba(7,16,24,.85),0 0 15px rgba(200,255,77,.72);
}
.roberto-scroll-thumb{
  position:absolute;
  z-index:4;
  left:50%;
  top:8px;
  width:21px;
  min-height:28px;
  translate:-50% 0;
  border:2px solid var(--rvs-ink);
  border-radius:8px;
  background:linear-gradient(180deg,#efffb8 0%,var(--rvs-lime) 42%,#9df73e 100%);
  box-shadow:4px 4px 0 rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.58),0 0 20px rgba(200,255,77,.58);
  cursor:grab;
  touch-action:none;
  transition:filter .18s ease,box-shadow .18s ease;
}
.roberto-scroll-thumb::before{
  content:"";
  position:absolute;
  inset:4px 5px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.7);
}
.roberto-scroll-thumb:hover{filter:brightness(1.08);box-shadow:4px 4px 0 rgba(0,0,0,.64),0 0 0 1px #fff,0 0 28px rgba(200,255,77,.8)}
.roberto-scroll-thumb:active,.roberto-scroll-rail.is-dragging .roberto-scroll-thumb{cursor:grabbing;filter:brightness(1.12)}
.roberto-scroll-percent{
  display:grid;
  place-items:center;
  width:100%;
  color:#d7d9d7;
  font:700 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.03em;
}
.roberto-scroll-label{
  position:absolute;
  right:66px;
  top:50%;
  translate:0 -50%;
  max-width:min(260px,42vw);
  padding:8px 10px;
  border:1px solid var(--rvs-ink);
  background:var(--rvs-lime);
  color:var(--rvs-ink);
  box-shadow:5px 5px 0 var(--rvs-ink);
  font:700 9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0;
  transform:translateX(8px);
  transition:opacity .18s ease,transform .22s ease;
  pointer-events:none;
}
.roberto-scroll-rail:hover .roberto-scroll-label,
.roberto-scroll-rail:focus-within .roberto-scroll-label,
.roberto-scroll-rail.is-dragging .roberto-scroll-label{opacity:1;transform:none}
.roberto-scroll-rail[data-mode="element"]::before{border-color:rgba(53,242,255,.24)}
@media(max-width:780px){
  .roberto-scroll-rail{
    right:max(4px,env(safe-area-inset-right));
    top:auto;
    bottom:max(10px,env(safe-area-inset-bottom));
    translate:0 0;
    width:46px;
    height:min(60svh,430px);
    grid-template-rows:34px minmax(100px,1fr) 34px 22px;
    gap:6px;
    padding:6px;
    border-radius:17px;
  }
  .roberto-scroll-rail::before{border-radius:13px}
  .roberto-scroll-rail::after{right:-4px;width:4px;top:14px;bottom:14px}
  .roberto-scroll-thumb{width:18px;border-radius:7px}
  .roberto-scroll-marker{width:8px;height:8px}
  .roberto-scroll-marker.is-active{width:11px;height:11px}
  .roberto-scroll-label{display:none}
}
@media(max-width:420px){
  .roberto-scroll-rail{width:43px;height:min(56svh,360px);padding:5px;grid-template-rows:32px minmax(88px,1fr) 32px 21px}
  .roberto-scroll-thumb{width:17px}
  .roberto-scroll-percent{font-size:7px}
}
@media(max-height:560px) and (orientation:landscape){
  .roberto-scroll-rail{top:50%;bottom:auto;translate:0 -50%;height:88svh;width:44px;grid-template-rows:31px minmax(70px,1fr) 31px 20px;padding:5px}
}
@media(prefers-reduced-motion:reduce){
  .roberto-scroll-rail,.roberto-scroll-marker,.roberto-scroll-button,.roberto-scroll-thumb,.roberto-scroll-label{transition:none!important}
}
@media(forced-colors:active){
  .roberto-scroll-rail,.roberto-scroll-button,.roberto-scroll-track,.roberto-scroll-thumb{forced-color-adjust:auto}
}