.back-to-top{
  --back-to-top-lift:0px;
  position:fixed;
  right:max(14px,env(safe-area-inset-right,0px));
  bottom:calc(max(14px,env(safe-area-inset-bottom,0px)) + var(--back-to-top-lift));
  z-index:29;
  width:42px;
  height:42px;
  border:1px solid rgba(230,0,126,.22);
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:var(--pink-dark);
  box-shadow:0 8px 24px rgba(35,28,33,.16);
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease,bottom .18s ease;
}
.back-to-top svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.back-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{background:#fff7fb;border-color:rgba(230,0,126,.38)}
.back-to-top:focus-visible{outline:3px solid rgba(230,0,126,.22);outline-offset:3px}
@media(max-width:760px){
  .back-to-top{
    right:max(10px,env(safe-area-inset-right,0px));
    bottom:calc(max(10px,env(safe-area-inset-bottom,0px)) + var(--back-to-top-lift));
    width:38px;
    height:38px;
    box-shadow:0 6px 18px rgba(35,28,33,.14);
  }
  .back-to-top svg{width:17px;height:17px}
}
@media(prefers-reduced-motion:reduce){
  .back-to-top{transition:none}
}