.scroll-top{
  position:fixed;
  right:max(1.2rem,env(safe-area-inset-right));
  bottom:calc(max(1rem,env(safe-area-inset-bottom)) + 4rem);
  z-index:850;
  display:grid;
  place-items:center;
  width:3rem;
  height:3rem;
  padding:0;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:var(--c-deep);
  color:#fff;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.4);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(.5rem);
  transition:opacity .25s var(--ease),visibility 0s .25s,transform .25s var(--ease),background-color .25s;
}
.scroll-top.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition-delay:0s;
}
.scroll-top:hover{background:var(--c-ridge)}
.scroll-top:focus-visible{outline:3px solid var(--c-sky);outline-offset:3px}
.scroll-top svg{width:1.35rem;height:1.35rem}
@media (prefers-reduced-motion:reduce){
  .scroll-top{transition-duration:.01ms}
}