.progress-glass{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:var(--nirvana-progress-height, 3px);
  z-index:99999;
  background:linear-gradient(to bottom, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 50%);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  border-top:1px solid rgba(255,255,255,.4);
  box-shadow:0 -2px 10px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.2) inset;
  overflow:visible;
  pointer-events:auto;
  opacity:1;
  transition:opacity .45s ease;
}
.progress-glass.is-autohide{
  opacity:.16;
}
.progress-glass.is-autohide.is-scrolling,
.progress-glass.is-autohide.is-hover,
.progress-glass.is-autohide.is-dragging{
  opacity:1;
}
.progress-glass.is-top{
  top:var(--nirvana-progress-top, 0px);
  bottom:auto;
  border-top:0;
  border-bottom:1px solid rgba(255,255,255,.4);
  box-shadow:0 2px 10px rgba(0,0,0,.25), 0 -1px 0 rgba(255,255,255,.15) inset;
}
.progress-track{
  position:absolute;
  top:1px;
  left:1px;
  right:1px;
  bottom:1px;
  border-radius:2px;
  background:rgba(0,0,0,.2);
  overflow:hidden;
  opacity:1;
  transition:opacity .45s ease;
}
.progress-glass.is-autohide .progress-track{
  opacity:.25;
}
.progress-glass.is-autohide.is-scrolling .progress-track,
.progress-glass.is-autohide.is-hover .progress-track,
.progress-glass.is-autohide.is-dragging .progress-track{
  opacity:1;
}
.progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--nirvana-progress-color, rgba(32,160,255,1)), var(--nirvana-progress-color2, rgba(61,195,255,1)));
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset;
  transition:width .2s cubic-bezier(.33,1,.68,1);
  position:relative;
  opacity:1;
  transition:width .2s cubic-bezier(.33,1,.68,1), opacity .45s ease;
}
.progress-glass.is-autohide .progress-bar{
  opacity:.35;
}
.progress-glass.is-autohide.is-scrolling .progress-bar,
.progress-glass.is-autohide.is-hover .progress-bar,
.progress-glass.is-autohide.is-dragging .progress-bar{
  opacity:1;
}
.progress-bar::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 45%, rgba(255,255,255,0) 70%);
  opacity:.55;
  transform:translateX(-55%);
  animation:nirvanaProgressShine 2.2s ease-in-out infinite;
  mix-blend-mode:overlay;
}
@keyframes nirvanaProgressShine{
  0%{transform:translateX(-70%)}
  55%{transform:translateX(110%)}
  100%{transform:translateX(110%)}
}
.progress-bar::before{
  content:'';
  position:absolute;
  top:0;
  right:-3px;
  width:6px;
  height:100%;
  background:radial-gradient(circle at center, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 70%);
}

.progress-knob{
  position:absolute;
  z-index:2;
  left:var(--nirvana-page-progress-pct, 0%);
  top:50%;
  transform:translate(-50%,-50%);
  width:12px;
  height:12px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 40%, rgba(255,255,255,0) 70%);
  opacity:.85;
  pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));
}
.progress-bubble{
  position:absolute;
  z-index:3;
  left:var(--nirvana-page-progress-pct, 0%);
  transform:translateX(-50%);
  font-size:12px;
  line-height:1;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.7);
  color:#0f172a;
  box-shadow:0 10px 22px rgba(0,0,0,.16);
  opacity:0;
  transition:opacity .15s ease, transform .15s ease;
  white-space:nowrap;
  pointer-events:none;
  display:block;
}
.progress-glass.is-bottom .progress-bubble{
  bottom:calc(100% + 10px);
}
.progress-glass.is-top .progress-bubble{
  top:calc(100% + 10px);
}
.progress-glass.is-scrolling .progress-bubble,
.progress-glass.is-hover .progress-bubble,
.progress-glass.is-dragging .progress-bubble{
  opacity:1;
  transform:translateX(-50%) translateY(-2px);
}
.progress-glass.is-dragging{
  cursor:ew-resize;
}

body.night .progress-glass{
  background:linear-gradient(to bottom, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 50%);
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -2px 10px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.06) inset;
}
body.night .progress-track{
  background:rgba(0,0,0,.35);
}
body.night .progress-bar{
  background:linear-gradient(90deg, var(--nirvana-progress-color, rgba(0,209,255,1)), var(--nirvana-progress-color2, rgba(121,96,255,1)));
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
}
body.night .progress-bubble{
  background:rgba(16,20,30,.78);
  border:1px solid rgba(255,255,255,.10);
  color:#e9eef7;
  box-shadow:0 12px 26px rgba(0,0,0,.45);
}

@media (max-width:768px){
  .progress-glass{left:0;right:0;bottom:0}
}
