/* scroll-top.css — Scroll-to-top button */

.stt {
  position: fixed;
  right: var(--sp-8);
  bottom: var(--sp-8);
  z-index: var(--z-toast);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 1rem;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease);
}

.stt.is-vis {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.stt:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

@media (max-width: 600px) {
  .stt { right: var(--sp-4); bottom: var(--sp-4); }
}