.scroll-top-button {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 9999;

  width: 46px;
  height: 46px;
  border: 1px solid rgba(45, 36, 27, 0.16);
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 250, 241, 0.92);
  color: #1e1b18;

  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;

  box-shadow: 0 18px 38px rgba(31, 27, 24, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  -webkit-transform: translateY(8px);

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease;
}

.scroll-top-button.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  -webkit-transform: translateY(0);
}

.scroll-top-button:hover {
  background: #fff;
}

.scroll-top-button:focus-visible {
  outline: 3px solid rgba(168, 82, 36, 0.35);
  outline-offset: 4px;
}

@media (min-width: 768px) {
  .scroll-top-button {
    display: none;
  }
}