.br-note { margin: .9rem auto 0; max-width: 62ch; color: var(--text-soft); font-size: .88rem; text-align: center; }
.br-busy { padding-block: 2.5rem; }
.br-busy .progress-wrap { width: 100%; max-width: 440px; margin-inline: auto; }
.br-spin { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; border: 4px solid var(--primary-soft); border-top-color: var(--primary); animation: br-spin .9s linear infinite; }
@keyframes br-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .br-spin { animation-duration: 3s; } }
.br-stage { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
  background: repeating-conic-gradient(var(--checker-a) 0 25%, var(--checker-b) 0 50%) 0 0 / 22px 22px; }
.br-img { display: block; width: 100%; max-height: var(--preview-max-h); object-fit: contain; }
.br-swatches { flex-wrap: wrap; align-items: center; }
.br-swatches button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); cursor: pointer; }
.br-swatches input[type=color] { width: 38px; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.br-stage .compare-after { background: repeating-conic-gradient(var(--checker-a) 0 25%, var(--checker-b) 0 50%) 0 0 / 22px 22px; }