:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}h1{font-size:3.2em;line-height:1.1}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*,:before,:after{box-sizing:border-box}body{margin:0}.app{--clock-size:3vw;--gap:calc(var(--clock-size) * .08);background:var(--background-color);justify-content:center;align-items:center;width:100vw;height:100vh;display:flex}.time,.time-row{gap:var(--clock-size);display:flex}.digit{gap:var(--gap);grid-template-columns:repeat(4,min-content);display:grid}.clock{--w:48%;--h:3px;--dur:.4s;width:var(--clock-size);height:var(--clock-size);border:2px solid var(--clock-border);background:linear-gradient(225deg, var(--clock-gradient-1), var(--clock-gradient-2));border-radius:50%;flex-shrink:0;position:relative}.clock:before,.clock:after{content:"";top:calc(50% - var(--h) / 2);transform-origin:0%;width:var(--w);height:var(--h);background:var(--line-color);transition:calc(var(--dur) * 1s) ease-in-out;border-radius:999px;position:absolute;left:50%}.clock:before{transform:rotate(calc(var(--hour-angle) * 1deg))}.clock:after{transform:rotate(calc(var(--minute-angle) * 1deg))}.app.light{--background-color:#fff;--clock-border:silver;--clock-gradient-1:#f0f0f0;--clock-gradient-2:#d0d0d0;--line-color:#000}.app.dark{--background-color:#000;--clock-border:#101010;--clock-gradient-1:#000;--clock-gradient-2:#000;--line-color:#fff}@media (max-width:600px){.time{flex-direction:column;align-items:center;gap:1.5rem}.time-row{justify-content:center}.hours .clock{transform:scale(1.1)}.seconds .clock{opacity:.75;transform:scale(.85)}.app{--clock-size:clamp(18px, 6vw, 28px)}}