.scrollTopBtn{
  --size: 58px;
  --ring-size: 60px;
  --circumference: 163.3628;
  --progress: 163.3628;

  --st-accent: var(--accent, #6366f1);
  --st-accent-2: var(--accent2, var(--accent, #8b5cf6));
  --st-btn-bg1: rgba(32,34,48,.94);
  --st-btn-bg2: rgba(18,20,30,.96);
  --st-btn-border: rgba(255,255,255,.12);
  --st-btn-fg: #fff;
  --st-ring-bg: rgba(255,255,255,.12);
  --st-focus-ring: color-mix(in srgb, var(--st-accent) 26%, transparent);

  position: fixed;
  right: 22px;
  bottom: 22px;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: translateY(14px) scale(.92);
  pointer-events: none;
  transition:
    opacity .30s ease,
    transform .30s ease,
    filter .30s ease;
}

.scrollTopBtn.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.scrollTopBtn:hover{
  filter: brightness(1.05);
}

.scrollTopBtn:active{
  transform: translateY(0) scale(.965);
}

.scrollTopBtn:focus-visible{
  outline: none;
}

.scrollTopBtn:focus-visible .scrollTopBtn__core{
  box-shadow:
    0 0 0 3px rgba(255,255,255,.10),
    0 0 0 6px var(--st-focus-ring),
    0 14px 34px rgba(0,0,0,.28);
}

.scrollTopBtn__ring{
  position: absolute;
  inset: 0;
  width: var(--ring-size);
  height: var(--ring-size);
  transform: rotate(-90deg);
  overflow: visible;
  pointer-events: none;
}

.scrollTopBtn__ringBg,
.scrollTopBtn__ringProgress{
  fill: none;
  stroke-width: 4;
}

.scrollTopBtn__ringBg{
  stroke: var(--st-ring-bg);
}

.scrollTopBtn__ringProgress{
  stroke: var(--st-accent);
  stroke-linecap: round;
  stroke-dasharray: var(--circumference);
  stroke-dashoffset: var(--progress);
  transition:
    stroke-dashoffset .12s linear,
    stroke .25s ease,
    filter .25s ease;
  filter:
    drop-shadow(0 0 10px color-mix(in srgb, var(--st-accent) 45%, transparent))
    drop-shadow(0 0 18px color-mix(in srgb, var(--st-accent-2) 22%, transparent));
}

.scrollTopBtn__core{
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  color: var(--st-btn-fg);
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.12), transparent 35%),
    linear-gradient(180deg, var(--st-btn-bg1), var(--st-btn-bg2));
  border: 1px solid var(--st-btn-border);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 34px rgba(0,0,0,.28),
    0 4px 14px rgba(0,0,0,.18);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.scrollTopBtn__core::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 45%, rgba(255,255,255,.04));
  opacity: .8;
  pointer-events: none;
}

.scrollTopBtn__core::after{
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at center,
      color-mix(in srgb, var(--st-accent) 16%, transparent) 0%,
      transparent 62%);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}

.scrollTopBtn:hover .scrollTopBtn__core{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--st-accent) 28%, rgba(255,255,255,.10));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 38px rgba(0,0,0,.32),
    0 0 0 1px color-mix(in srgb, var(--st-accent) 18%, transparent);
}

.scrollTopBtn:hover .scrollTopBtn__core::after{
  opacity: 1;
  transform: scale(1);
}

.scrollTopBtn__icon{
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
  z-index: 1;
}

.scrollTopBtn__shaft,
.scrollTopBtn__head{
  transition:
    transform .24s ease,
    opacity .24s ease,
    stroke .24s ease;
  transform-origin: center;
}

.scrollTopBtn:hover .scrollTopBtn__shaft{
  transform: translateY(-1.5px);
}

.scrollTopBtn:hover .scrollTopBtn__head{
  transform: translateY(-2.5px);
}

.scrollTopBtn:hover .scrollTopBtn__icon{
  color: color-mix(in srgb, var(--st-accent) 72%, white);
}

html[data-theme="light"] .scrollTopBtn{
  --st-btn-bg1: rgba(255,255,255,.95);
  --st-btn-bg2: rgba(240,244,255,.96);
  --st-btn-border: rgba(30,41,59,.10);
  --st-btn-fg: #111827;
  --st-ring-bg: rgba(15,23,42,.10);
}

@media (max-width: 768px){
  .scrollTopBtn{
    right: 16px;
    bottom: 16px;
    --size: 54px;
    --ring-size: 56px;
  }

  .scrollTopBtn__core{
    width: 42px;
    height: 42px;
  }

  .scrollTopBtn__icon{
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce){
  .scrollTopBtn,
  .scrollTopBtn__core,
  .scrollTopBtn__ringProgress,
  .scrollTopBtn__shaft,
  .scrollTopBtn__head{
    transition: none;
  }
}