:root{--timer-size:30px;--timer-background:var(--glass-bg);--timer-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.5);--timer-hand-color:var(--accent-foreground);--timer-second-color:var(--background);--timer-center-color:var(--background);--timer-color-green:#22c55e;--timer-color-olive:#82823d;--timer-color-gray:#52525b;--timer-color-zinc-400:#a1a1aa;--timer-color-zinc-600:#52525b}.timer-container{position:relative;width:var(--timer-size);height:var(--timer-size);margin:0 auto}.timer{width:100%;height:100%;border-radius:50%;background:var(--timer-background);box-shadow:var(--timer-shadow);position:relative;display:flex;align-items:center;justify-content:center;transition:background-color .3s ease}.timer:after{content:"";position:absolute;width:calc(var(--timer-size) * .05);height:calc(var(--timer-size) * .05);background:var(--timer-center-color);border-radius:50%;z-index:10}.timer-hand{position:absolute;transform-origin:bottom center;bottom:50%;left:50%;border-radius:10px;z-index:5}.timer-hand-seconds{height:40%;width:calc(var(--timer-size) * .02);background:var(--timer-second-color)}.timer-hand-minutes{height:30%}.timer-hand-hours,.timer-hand-minutes{width:calc(var(--timer-size) * .025);background:var(--timer-hand-color)}.timer-hand-hours{height:20%}@keyframes rotate-hand{to{transform:translateX(-50%) rotate(1turn)}}.timer-digital{position:absolute;bottom:30%;left:0;right:0;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px;color:var(--timer-center-color);font-weight:500;letter-spacing:.05em}.timer-running .timer-hand-seconds{animation:rotate-hand var(--seconds-duration,60s) steps(360) infinite;animation-delay:calc(-1s * var(--initial-seconds, 0))}.timer-running .timer-hand-minutes{animation:rotate-hand var(--minutes-duration,3600s) steps(60) infinite;animation-delay:calc(-60s * var(--initial-minutes, 0))}.timer-running .timer-hand-hours{animation:rotate-hand var(--hours-duration,43200s) linear infinite;animation-delay:calc(-3600s * var(--initial-hours, 0))}.timer-paused .timer-hand-hours,.timer-paused .timer-hand-minutes,.timer-paused .timer-hand-seconds{animation-play-state:paused}.timer-sm{--timer-size:120px;--timer-border-width:3px}.timer-lg{--timer-size:300px;--timer-border-width:6px}.timer-progress{position:absolute;width:100%;height:100%;top:0;left:0;border-radius:50%;background:conic-gradient(var(--timer-hand-color) 0 var(--progress-percentage,0),transparent var(--progress-percentage,0) 100%);opacity:.15;z-index:1}@keyframes timer-bg-active{0%{background-color:var(--timer-color-green)}50%{background-color:var(--timer-color-olive)}to{background-color:var(--timer-color-gray)}}@keyframes timer-bg-inactive{0%{background-color:var(--timer-color-zinc-400)}to{background-color:var(--timer-color-zinc-600)}}.timer-animated-bg{border-color:transparent;color:#fff}.timer-animated-bg.timer-running{animation:timer-bg-active var(--animation-duration,45s) linear forwards}.timer-animated-bg.timer-paused{animation:timer-bg-inactive var(--animation-duration,15s) linear forwards}.timer-animated-bg .timer-tick{background-color:hsla(0,0%,100%,.3)}.timer-animated-bg .timer-tick:nth-child(5n){background-color:hsla(0,0%,100%,.6)}.timer-animated-bg .timer-hand-hours,.timer-animated-bg .timer-hand-minutes,.timer-animated-bg .timer-hand-seconds,.timer-animated-bg:after{background-color:#fff}.timer-animated-bg .timer-digital{color:#fff}.timer-animated-bg .timer-progress{background:conic-gradient(hsla(0,0%,100%,.4) 0 var(--progress-percentage,0),transparent var(--progress-percentage,0) 100%)}