/* ---------- go to the top: an up arrow, fixed at the bottom right once the hero is out of view ---------- */
.to-top {
  position: fixed;
  z-index: 55;
  right: calc(env(safe-area-inset-right, 0px) + 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  width: 56px;
  height: 56px;
  min-height: 0;
  padding: 0;
  border-radius: 14px;
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition:
    opacity 0.25s ease,
    translate 0.25s ease,
    visibility 0s linear 0.25s,
    transform 150ms var(--boing),
    box-shadow 150ms var(--boing),
    border-color 0.25s,
    background-color 0.25s;
}
.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}
.to-top.is-shown.is-aside {
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
} /* steps aside while the phone calendar's own button is on screen */
.to-top .i {
  width: 24px;
  height: 24px;
  stroke-width: 2.6;
}
[data-mode="night"] .to-top {
  border-color: color-mix(in srgb, #b977ff 55%, transparent);
  background: color-mix(in srgb, #b977ff 10%, var(--surface));
  box-shadow: none;
}
[data-mode="night"] .to-top:is(:hover, :focus-visible) {
  transform: translateY(-3px);
  border-color: #b977ff;
  box-shadow: none;
}
@media (max-width: 699px) {
  /* phones: a little smaller and tucked closer to the corner, clear of the thumb-scrolling middle */
  .to-top {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    right: calc(env(safe-area-inset-right, 0px) + 16px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }
  .to-top .i {
    width: 22px;
    height: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .to-top {
    translate: none;
    transition:
      opacity 0.2s,
      visibility 0s linear 0.2s;
  }
  .to-top:is(:hover, :focus-visible) {
    transform: none !important;
  }
}