.sr-only {
  position: absolute;
  width: .1rem;
  height: .1rem;
  margin: -.1rem;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hp-field {
  position: absolute;
  left: -99rem;
  width: .1rem;
  height: .1rem;
  overflow: hidden;
}

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.w-full { width: 100%; }
.flex-1 { flex: 1; }

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: .1rem;
  background: var(--border);
}

.fade-in {
  animation: fade-in .35s var(--ease) both;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(.8rem); }
  to { opacity: 1; transform: none; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}