.scroll-top {
  position: fixed;
  inset-inline-start: max(var(--space-4), env(safe-area-inset-left));
  inset-block-end: max(var(--space-4), env(safe-area-inset-bottom));
  z-index: 20;
  display: inline-grid;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  place-items: center;
  border: 1px solid var(--color-brand-yellow);
  border-radius: 50%;
  background: var(--color-brand-charcoal);
  color: var(--color-brand-yellow);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0.6rem 1.25rem rgb(0 0 0 / 30%);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.scroll-top[hidden] {
  display: none;
}

.scroll-top:hover,
.scroll-top:focus-visible {
  background: var(--color-brand-yellow);
  color: var(--color-brand-charcoal);
  transform: translateY(-2px);
}

@media (width <= 30rem) {
  .scroll-top {
    inset-inline-start: max(var(--space-3), env(safe-area-inset-left));
    inset-block-end: max(var(--space-3), env(safe-area-inset-bottom));
  }
}