.back-to-top{
  --scroll-progress:0deg;
  position:fixed;
  z-index:90;
  right:clamp(18px,2.4vw,38px);
  bottom:clamp(20px,3vw,42px);
  width:58px;
  height:58px;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:conic-gradient(#454039 var(--scroll-progress),rgba(66,61,54,.16) 0);
  color:#35312c;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,14px,0) scale(.94);
  transition:opacity .28s ease,transform .42s cubic-bezier(.22,1,.36,1),visibility .28s;
  filter:drop-shadow(0 10px 22px rgba(36,31,25,.16));
}

.back-to-top:before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:inherit;
  background:rgba(247,244,238,.88);
  border:1px solid rgba(255,255,255,.62);
  backdrop-filter:blur(12px);
}

.back-to-top>span,
.back-to-top>small{
  position:relative;
  z-index:1;
  pointer-events:none;
}

.back-to-top>span{
  margin-top:5px;
  font:300 21px/1 Georgia,serif;
  transition:transform .32s cubic-bezier(.22,1,.36,1);
}

.back-to-top>small{
  margin-top:-8px;
  color:#777168;
  font:600 7px/1 Arial,sans-serif;
  letter-spacing:.13em;
}

.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(0,0,0) scale(1);
}

.back-to-top:hover>span{transform:translate3d(0,-3px,0)}
.back-to-top:active{transform:translate3d(0,1px,0) scale(.97)}
.back-to-top:focus-visible{outline:2px solid rgba(53,49,44,.55);outline-offset:4px}

@media(max-width:650px){
  .back-to-top{
    right:16px;
    bottom:max(18px,env(safe-area-inset-bottom));
    width:52px;
    height:52px;
  }
}

@media(prefers-reduced-motion:reduce){
  .back-to-top,.back-to-top>span{transition:none}
}