.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; }