.settings-button,
.home-button {
  position: fixed;
  z-index: 10;
  inset-block-start: max(1rem, env(safe-area-inset-top));
  display: grid;
  min-block-size: 2.75rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 0.9rem;
  background: #18243f;
  box-shadow: 0 0.65rem 1.75rem rgb(0 0 0 / 18%);
  color: #ffffff;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.settings-button {
  inset-inline-end: max(1rem, env(safe-area-inset-right));
  inline-size: 2.75rem;
}

.home-button {
  inset-inline-start: max(1rem, env(safe-area-inset-left));
  padding-inline: 0.95rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.settings-button svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.settings-button:hover,
.home-button:hover {
  background: #1f2e4f;
  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 24%);
  transform: translateY(-1px);
}

.settings-button:active,
.home-button:active {
  transform: translateY(0) scale(0.97);
}

.settings-button:focus-visible,
.home-button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .settings-button,
  .home-button {
    transition-duration: 1ms;
  }
}