/* Uses each page's existing theme colours. Below navigation and lightboxes. */
.back-to-top {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--color-secondary, #00d4ff);
  border-radius: .9rem;
  color: var(--color-secondary, #00d4ff);
  background: var(--color-surface, #121212);
  box-shadow: 0 6px 22px rgb(0 0 0 / 35%);
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease;
}
.back-to-top[hidden] { display: none; }
.back-to-top svg { width: 1.4rem; height: 1.4rem; pointer-events: none; }
.back-to-top:focus-visible { outline: 2px solid var(--color-secondary, #00d4ff); outline-offset: 4px; }
@media (hover: hover) {
  .back-to-top:hover {
    background: color-mix(in srgb, var(--color-secondary, #00d4ff) 14%, var(--color-surface, #121212));
    box-shadow: 0 6px 24px rgb(0 0 0 / 40%), 0 0 16px color-mix(in srgb, var(--color-secondary, #00d4ff) 18%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: none; } }