<fieldset class="crb-orb">
  <legend class="crb-sr">Speed</legend>
  <input type="radio" name="crb-orb" id="crb-orb-1" checked />
  <label for="crb-orb-1"><span class="crb-orb-dot"></span>Slow</label>
  <input type="radio" name="crb-orb" id="crb-orb-2" />
  <label for="crb-orb-2"><span class="crb-orb-dot"></span>Fast</label>
  <input type="radio" name="crb-orb" id="crb-orb-3" />
  <label for="crb-orb-3"><span class="crb-orb-dot"></span>Turbo</label>
</fieldset>

.crb-orb { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; }
.crb-orb input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-orb label {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-radius: 8px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.crb-orb-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #2a2a3e; box-shadow: inset 0 0 0 2px #444461;
  transition: background 0.35s cubic-bezier(0.65,0,0.35,1), box-shadow 0.35s, transform 0.35s;
}
.crb-orb input:checked + label { background: rgba(124,108,255,0.08); color: #fff; }
.crb-orb input:checked + label .crb-orb-dot {
  background: #7c6cff; box-shadow: inset 0 0 0 2px #7c6cff, 0 0 12px rgba(124,108,255,0.7);
  transform: scale(1.15);
}

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