<div class="ccm-chrono">
  <input type="radio" name="ccm-chrono" id="ccm-chrono-3" hidden checked />
  <input type="radio" name="ccm-chrono" id="ccm-chrono-6" hidden />
  <input type="radio" name="ccm-chrono" id="ccm-chrono-9" hidden />
  <input type="radio" name="ccm-chrono" id="ccm-chrono-12" hidden />
  <div class="ccm-chrono-face"></div>
  <div class="ccm-chrono-hand" aria-hidden="true"></div>
  <label for="ccm-chrono-12" class="ccm-chrono-i" style="--a: 0deg" aria-label="12">12</label>
  <label for="ccm-chrono-3" class="ccm-chrono-i" style="--a: 90deg" aria-label="3">3</label>
  <label for="ccm-chrono-6" class="ccm-chrono-i" style="--a: 180deg" aria-label="6">6</label>
  <label for="ccm-chrono-9" class="ccm-chrono-i" style="--a: 270deg" aria-label="9">9</label>
</div>

.ccm-chrono {
  position: relative;
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  --hand: 90deg;
}

.ccm-chrono-face {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f5f5f5, #d8d8d8);
  border: 3px solid #2a2a3e;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.4);
}

.ccm-chrono-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 60px;
  margin-left: -1.5px;
  background: #2a2a3e;
  border-radius: 1.5px;
  transform-origin: top center;
  transform: rotate(var(--hand));
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ccm-chrono-hand::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff3d6e;
}

.ccm-chrono:has(#ccm-chrono-3:checked) {
  --hand: -90deg;
}

.ccm-chrono:has(#ccm-chrono-6:checked) {
  --hand: 0deg;
}

.ccm-chrono:has(#ccm-chrono-9:checked) {
  --hand: 90deg;
}

.ccm-chrono:has(#ccm-chrono-12:checked) {
  --hand: 180deg;
}

.ccm-chrono-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: #2a2a3e;
  font:
    700 13px/28px Georgia,
    serif;
  text-align: center;
  cursor: pointer;
  transform: rotate(var(--a)) translate(70px) rotate(calc(var(--a) * -1));
  transition:
    background 0.2s,
    color 0.2s;
}

.ccm-chrono-i:hover {
  background: rgba(255, 61, 110, 0.15);
  color: #ff3d6e;
}