*{border:0;box-sizing:border-box;margin:0;padding:0}:root{--hue: 255;--bg: hsl(var(--hue),10%,90%);--fg: hsl(var(--hue),10%,10%);--primary: hsl(var(--hue),100%,40%);--shadow1: hsl(var(--hue),10%,80%);--shadow2: hsl(var(--hue),10%,100%);--trans-dur: .3s;font-size:calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320))}@media (prefers-color-scheme: dark){:root{--bg: hsl(var(--hue), 100%, 100%);--fg: hsl(var(--hue), 20%, 40%);--shadow1: hsl(var(--hue), 90%, 90%);--shadow2: hsl(var(--hue), 20%, 60%)}}body{background-color:var(--bg);color:var(--fg);display:flex;font:1em/1.5 sans-serif;height:100vh;align-items:center;justify-content:center}.clock[data-v-6b4fcd22],.clock[data-v-6b4fcd22]:before,.clock__tick[data-v-6b4fcd22]:before{animation-duration:.6s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}.clock[data-v-6b4fcd22]{animation-name:clockOuter-6b4fcd22;background-color:var(--bg);border-radius:50%;box-shadow:0 0 0 var(--shadow1),0 0 0 var(--shadow2);margin:auto;position:relative;width:16em;height:16em}.clock[data-v-6b4fcd22]:before,.clock__hand[data-v-6b4fcd22],.clock__hand[data-v-6b4fcd22]:before,.clock__tick[data-v-6b4fcd22],.clock__tick[data-v-6b4fcd22]:before{position:absolute}.clock[data-v-6b4fcd22]:before,.clock__hand[data-v-6b4fcd22]:before,.clock__tick[data-v-6b4fcd22]:before{content:"";display:block}.clock[data-v-6b4fcd22]:before{animation-name:clockInner-6b4fcd22;border-radius:inherit;box-shadow:0 0 0 var(--shadow1),0 0 0 var(--shadow2);top:calc(50% - 4em);left:calc(50% - 4em);width:8em;height:8em;z-index:1}.clock__hand[data-v-6b4fcd22],.clock__hand[data-v-6b4fcd22]:before{transform-origin:50% calc(100% - 1em)}.clock__hand[data-v-6b4fcd22]{bottom:calc(50% - 1em);left:calc(50% - .125em);width:.25em;transform:scaleY(0);z-index:2}.clock__hand[data-v-6b4fcd22]:before{width:100%;height:100%}.clock__hand--hr[data-v-6b4fcd22]{height:4em}.clock__hand--hr[data-v-6b4fcd22]:before{background-color:hsl(var(--hue),10%,50%)}.clock__hand--min[data-v-6b4fcd22]{height:6em}.clock__hand--min[data-v-6b4fcd22]:before{background-color:var(--fg)}.clock__hand--sec[data-v-6b4fcd22]{height:7em}.clock__hand--sec[data-v-6b4fcd22]:before{background-color:var(--primary)}.clock--moving .clock__hand--sec[data-v-6b4fcd22]:before{animation:clockSecondHand-6b4fcd22 .5s ease-in-out}.clock__tick[data-v-6b4fcd22]{bottom:50%;left:calc(50% - .125em);width:.25em;height:1.25em;transform-origin:50% 100%}.clock__tick[data-v-6b4fcd22]:before{background-color:hsla(var(--hue),10%,50%,.5);animation-name:clockTick-6b4fcd22;width:100%;height:100%;transform-origin:50% 0%}.clock__tick--0[data-v-6b4fcd22]{transform:translateY(-6.5em)}.clock__tick--3[data-v-6b4fcd22]{transform:rotate(90deg) translateY(-6.5em)}.clock__tick--6[data-v-6b4fcd22]{transform:rotate(180deg) translateY(-6.5em)}.clock__tick--9[data-v-6b4fcd22]{transform:rotate(270deg) translateY(-6.5em)}.start-button[data-v-6b4fcd22]{border-radius:12px;border:3px outset #888;position:relative;display:inline-block;padding:15px 30px;color:#eee;text-transform:uppercase;letter-spacing:4px;overflow:hidden;box-shadow:0 0 10px #000;font-family:verdana;font-size:28px;font-weight:bolder;text-decoration:none;background:linear-gradient(160deg,#666,#444);text-shadow:0px 0px 2px rgba(0,0,0,.5);transition:.2s}.start-button[data-v-6b4fcd22]:active{border:3px outset #ddd;color:#fff;background:linear-gradient(160deg,#666,#444);text-shadow:0px 0px 4px #ccc;box-shadow:0 0 10px #fff,0 0 40px #fff,0 0 80px #fff;transition-delay:1s}.start-button span[data-v-6b4fcd22]{position:absolute;display:block}.start-button span[data-v-6b4fcd22]:nth-child(1){top:0;left:-100%;width:100%;height:2px;background:linear-gradient(90deg,transparent,#eee)}.start-button:active span[data-v-6b4fcd22]:nth-child(1){left:100%;transition:1s}.start-button span[data-v-6b4fcd22]:nth-child(2){top:-100%;right:0;width:2px;height:100%;background:linear-gradient(180deg,transparent,#eee)}.start-button:active span[data-v-6b4fcd22]:nth-child(2){top:100%;transition:1s;transition-delay:.25s}.start-button span[data-v-6b4fcd22]:nth-child(3){bottom:0;right:-100%;width:100%;height:2px;background:linear-gradient(270deg,transparent,#eee)}.start-button:active span[data-v-6b4fcd22]:nth-child(3){right:100%;transition:1s;transition-delay:.5s}.start-button span[data-v-6b4fcd22]:nth-child(4){bottom:-100%;left:0;width:2px;height:100%;background:linear-gradient(360deg,transparent,#eee)}.start-button:active span[data-v-6b4fcd22]:nth-child(4){bottom:100%;transition:1s;transition-delay:.75s}@keyframes clockInner-6b4fcd22{0%,50%{box-shadow:0 0 0 var(--shadow1),0 0 0 var(--shadow2)}75%,to{box-shadow:.375em .375em .75em var(--shadow1),-.375em -.375em .75em var(--shadow2)}}@keyframes clockOuter-6b4fcd22{0%,25%{box-shadow:0 0 0 var(--shadow1),0 0 0 var(--shadow2)}50%,to{box-shadow:.75em .75em 1.5em var(--shadow1),-.75em -.75em 1.5em var(--shadow2)}}@keyframes clockSecondHand-6b4fcd22{0%,25%{transform:rotate(-6deg)}50%{transform:rotate(2deg)}75%{transform:rotate(-1deg)}to{transform:rotate(0)}}@keyframes clockTick-6b4fcd22{0%,75%{transform:scaleY(0)}to{transform:scaleY(1)}}