Onboarding Dots

<div class="nuda-onb">
  <div class="nuda-onb__screen">
    <div class="nuda-onb__art"></div>
    <div class="nuda-onb__heading">Stay focused</div>
    <div class="nuda-onb__body">Block distractions and track your progress.</div>
  </div>
  <div class="nuda-onb__dots" role="tablist" aria-label="Page">
    <span class="nuda-onb__dot" role="tab" aria-selected="false"></span>
    <span class="nuda-onb__dot nuda-onb__dot--active" role="tab" aria-selected="true"></span>
    <span class="nuda-onb__dot" role="tab" aria-selected="false"></span>
    <span class="nuda-onb__dot" role="tab" aria-selected="false"></span>
  </div>
</div>

/* Onboarding Dots
   Page indicator where the active dot stretches into a pill.
   Customize: --onb-accent, --onb-dim */

.nuda-onb {
  --onb-accent: #e4ff54;
  --onb-dim: rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 260px;
  padding: 18px 16px 16px;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  font-family: system-ui;
}

.nuda-onb__screen {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: nuda-onb-fade 0.55s ease both;
}

.nuda-onb__art {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: conic-gradient(from 90deg, #e4ff54, #10b981, #3b82f6, #e4ff54);
  box-shadow: 0 12px 32px -8px rgba(228, 255, 84, 0.35);
  margin-bottom: 4px;
}

.nuda-onb__heading { color: #fafafa; font: 700 15px/1.2 system-ui; }
.nuda-onb__body { color: #a0a0a8; font: 500 12px/1.4 system-ui; max-width: 200px; }

.nuda-onb__dots { display: flex; align-items: center; gap: 6px; margin-top: 2px; }

.nuda-onb__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--onb-dim);
  transition: width 0.35s, background 0.25s;
}

.nuda-onb__dot--active {
  width: 20px;
  border-radius: 3px;
  background: var(--onb-accent);
  animation: nuda-onb-dot 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes nuda-onb-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes nuda-onb-dot {
  from { width: 6px; }
  to { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-onb__screen,
  .nuda-onb__dot--active { animation: none; }
}