Shade Ramp

<div class="nuda-cpk2-shade-ramp" role="radiogroup" aria-label="Violet shade ramp">
  <button type="button" class="nuda-cpk2-shade-ramp__step" role="radio"
          aria-checked="false" aria-label="Violet 50"
          style="background:#f5f3ff;color:#0a0a0a">50</button>
  <button type="button" class="nuda-cpk2-shade-ramp__step is-checked" role="radio"
          aria-checked="true" aria-label="Violet 500, selected"
          style="background:#8b5cf6;color:#fafafa">500</button>
  <button type="button" class="nuda-cpk2-shade-ramp__step" role="radio"
          aria-checked="false" aria-label="Violet 950"
          style="background:#2e1065;color:#fafafa">950</button>
  <!-- Full ramp: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 -->
</div>

.nuda-cpk2-shade-ramp {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  padding: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  width: 100%;
  max-width: 260px;
}

.nuda-cpk2-shade-ramp__step {
  position: relative;
  flex: 0 0 44px;
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s;
  animation: _nuda-cpk2shaderamp .4s cubic-bezier(.16,1,.3,1) both;
}

.nuda-cpk2-shade-ramp__step:hover {
  transform: translateY(-3px);
}

.nuda-cpk2-shade-ramp__step.is-checked {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5),0 0 0 2px #e4ff54;
}

.nuda-cpk2-shade-ramp__step:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

@keyframes _nuda-cpk2shaderamp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cpk2-shade-ramp__step {
    animation: none;
    transition: none;
  }
}