/* IntimaSway rotary timer */
.timer-control{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:25px 0}
.timer-knob{--knob-size:190px;position:relative;width:var(--knob-size);height:var(--knob-size);border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.08),rgba(255,255,255,.025) 55%,rgba(0,0,0,.35));border:1px solid rgba(255,105,180,.22);box-shadow:inset 0 0 25px rgba(255,105,180,.08),0 10px 35px rgba(0,0,0,.35);user-select:none;touch-action:none;cursor:grab}
.timer-knob:active{cursor:grabbing}
.knob-ring{position:absolute;inset:8px;border-radius:50%;background:conic-gradient(#ff5a9d var(--progress,0deg),rgba(255,105,180,.10) var(--progress,0deg));mask:radial-gradient(transparent 67%,#000 68%);-webkit-mask:radial-gradient(transparent 67%,#000 68%)}
.knob-indicator{position:absolute;width:5px;height:18px;left:50%;top:4px;transform:translateX(-50%);transform-origin:50% calc(50% + 79px);border-radius:5px;background:#ff6bad;box-shadow:0 0 8px rgba(255,90,157,.8)}
.knob-center{position:absolute;width:118px;height:118px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(20,15,25,.82);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 18px rgba(255,105,180,.08),0 4px 15px rgba(0,0,0,.35)}
.timer-value{font-size:30px;line-height:1;font-weight:700;color:#fff;text-shadow:0 0 10px rgba(255,90,157,.25)}
.timer-unit{margin-top:4px;font-size:9px;letter-spacing:2px;color:rgba(255,255,255,.45)}
.timer-play{width:34px;height:34px;margin-top:8px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;padding-left:3px;background:#ff5a9d;color:#fff;font-size:13px;cursor:pointer;box-shadow:0 0 12px rgba(255,90,157,.35);transition:transform .15s ease,box-shadow .15s ease}
.timer-play:hover{transform:scale(1.08);box-shadow:0 0 18px rgba(255,90,157,.55)}
.timer-play:active{transform:scale(.94)}
.timer-status{margin-top:12px;min-height:18px;font-size:12px;color:rgba(255,255,255,.48);text-align:center}
.timer-knob.counting{animation:timerGlow 1.2s ease-in-out infinite alternate}
@keyframes timerGlow{from{box-shadow:inset 0 0 25px rgba(255,105,180,.08),0 10px 35px rgba(0,0,0,.35)}to{box-shadow:inset 0 0 35px rgba(255,90,157,.18),0 0 25px rgba(255,90,157,.18)}}
.timer-knob.finished{animation:timerAlert .45s ease-in-out infinite alternate}
@keyframes timerAlert{from{transform:scale(1)}to{transform:scale(1.025)}}
@media(max-width:480px){.timer-knob{--knob-size:175px}}