.scroll-top-button{
  position:fixed;
  right:20px;
  bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:80;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.2);
  border-radius:6px;
  background:#1f2e26;
  color:#fff;
  box-shadow:0 8px 22px rgba(20,30,23,.22);
  font:700 24px/1 system-ui,sans-serif;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  cursor:pointer;
}
.scroll-top-button.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}
.scroll-top-button:hover{background:#2f5d3f}
.scroll-top-button:focus-visible{outline:3px solid #e6a17d;outline-offset:3px}
@media(max-width:600px){
  .scroll-top-button{
    right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom));
    width:42px;
    height:42px;
  }
}
@media(prefers-reduced-motion:reduce){
  .scroll-top-button{transition:none}
}