Neumorphic 3D Radio Button Group

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="neu-radio-group">
  <label class="neu-radio-label">
    <input type="radio" name="neu_opt" checked />
    <span class="neu-radio-btn"></span>
    <span class="neu-text">Option 1</span>
  </label>
  <label class="neu-radio-label">
    <input type="radio" name="neu_opt" />
    <span class="neu-radio-btn"></span>
    <span class="neu-text">Option 2</span>
  </label>
</div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.neu-radio-group { display: flex; flex-direction: column; gap: 12px; font-family: system-ui, sans-serif; }
.neu-radio-label { display: flex; align-items: center; gap: 10px; cursor: pointer; color: #475569; font-size: 13px; font-weight: 600; }
.neu-radio-label input { display: none; }
.neu-radio-btn {
  width: 22px; height: 22px; border-radius: 50%; background: #e0e5ec;
  box-shadow: inset 3px 3px 6px #a3b1c6, inset -3px -3px 6px #ffffff;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;
}
.neu-radio-btn::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: #3b82f6;
  transform: scale(0); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.neu-radio-label input:checked + .neu-radio-btn::after { transform: scale(1); }
.neu-radio-label input:checked ~ .neu-text { color: #1e293b; }