/* Fallback brand color; override via :root { --color-brand-600: ... } or a parent class */
:root { --color-brand-600: #475569; } /* tailwind slate-600-ish */

.spinner {
  margin: 4.8rem auto;
  width: 2.4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, var(--color-brand-600) 94%, #0000) top/7px 7px no-repeat,
    conic-gradient(#0000 30%, var(--color-brand-600));
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 7px), #000 0);
  animation: spin-1turn 1.5s infinite linear;
}

@keyframes spin-1turn {
  to { transform: rotate(1turn); }
}