:root{--clock-scale:1}@media (max-width:600px){:root{--clock-scale:1.3}}.clock-picker{position:absolute;z-index:10000;width:240px;height:240px;background:0 0;opacity:0;transform:translateY(-20px) scale(.2);transition:opacity .15s ease,transform .15s ease;margin-top:10px}.clock-picker{filter:drop-shadow(4px 4px 8px #000)}@-moz-document url-prefix(){.clock-picker{filter:none}}.clock-picker.mobile-center{position:fixed!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;z-index:9999!important}.clock-picker.mobile-center.open{transform:translate(-50%,-50%)!important}.clock-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(4px);z-index:9998;display:none}.clock-picker.open{opacity:1;transform:translateY(0) scale(1)}.clock-picker::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:12px solid #fff;filter:drop-shadow(0 2px 2px rgba(0, 0, 0, .15));pointer-events:none}.clock-picker::after{content:"";position:absolute;width:16px;height:16px;top:0;left:50%;transform:translateX(-50%) rotate(45deg);border-top-left-radius:4px;background-color:rgba(255,255,255,.9);filter:drop-shadow(2px 2px 4px #000);backdrop-filter:saturate(180%) blur(20px);z-index:0}.clock-face{position:relative;width:200px;height:200px;margin:20px auto;border-radius:50%;background:#fff;overflow:visible;z-index:1}.clock-face::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:#fff;pointer-events:none;z-index:0}.clock-face::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:12px solid rgba(255,255,255,.9);filter:drop-shadow(2px 2px 4px #000);backdrop-filter:saturate(180%) blur(20px);pointer-events:none;z-index:0}.clock-number{position:absolute;width:30px;height:30px;margin-left:-15px;margin-top:-15px;border-radius:50%;font-weight:700;font-size:17px;color:#333;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;z-index:3;transition:background .15s ease,color .15s ease}.clock-number.highlight,.clock-number:hover{background:rgba(0,202,0,.5)}.clock-number.selected{background:rgba(220,0,0,.8);color:#fff}.clock-number.dense-minute{font-size:12px;font-weight:900;letter-spacing:-.02em}.clock-hand{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;transform:translate(-50%,-50%);z-index:2;--hand-angle:0deg;--hand-scale:1}.clock-hand::before{content:"";position:absolute;left:-2px;bottom:0;width:4px;height:var(--hand-length,68px);background:var(--hand-color);transform-origin:center bottom;transform:rotate(var(--hand-angle));transition:height .12s ease;z-index:2}.clock-hand::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid var(--hand-color);transform-origin:center;transform:translate(-50%,-50%) rotate(var(--hand-angle)) translateY(calc(-1 * var(--hand-length,68px) * var(--hand-scale,1)));pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, .4))}.clock-number{position:absolute;margin-left:0;margin-top:0;display:flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box;font-size:16px;font-weight:bolder}.clock-number{transform:translate(-50%,-52%)}.clock-number:hover{cursor:pointer}.clock-number.inner,.clock-number.outer{opacity:1;transition:opacity 120ms ease}.active-inner-ring .clock-number.outer{opacity:.5}.active-outer-ring .clock-number.inner{opacity:.5}.clock-center{position:absolute;width:30px;height:30px;background:#00ca00;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:4}.clock-handle{position:absolute;width:28px;height:28px;background:#caca00;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.75);cursor:grab;z-index:5}.clock-handle{touch-action:none}.clock-handle::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #caca00}.clock-handle:active{cursor:grabbing}@media (max-width:600px){.clock-picker.mobile-center{height:300px;margin:0;transform:translate(-50%,-50%) scale(.85)!important;transform-origin:center center;width:300px}.clock-picker.mobile-center.open{transform:translate(-50%,-50%) scale(.85)!important}.clock-face{width:calc(200px * var(--clock-scale));height:calc(200px * var(--clock-scale))}.clock-hand::before{height:var(--hand-length,68px)}.clock-hand::after{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--hand-color)}.clock-number{width:calc(30px * var(--clock-scale));height:calc(30px * var(--clock-scale));margin:0;font-size:20px}.clock-picker::after,.clock-picker::before{display:none}}