.clock-container{--cell-size:48px;justify-content:center;align-items:center;gap:var(--cell-size);flex-wrap:wrap;min-height:100dvh;display:flex}.time-box{gap:calc(var(--cell-size)/3);flex-direction:row;display:flex}.cells-grid{background-color:#111419;border-radius:4px;grid-template-columns:repeat(4,1fr);gap:1px;width:fit-content;display:grid;overflow:hidden}.clock-cell{width:var(--cell-size);height:var(--cell-size);background:linear-gradient(225deg,#111419 10%,#202632);justify-content:center;align-items:center;display:flex;position:relative}.clock-cell .hand{width:calc(var(--cell-size)/2);height:calc(var(--cell-size)/8);transform-origin:0%;translate:50%;rotate:var(--rotation,0deg);background-color:#c0c8df;border-radius:4px;transition:rotate .4s ease-out,opacity .3s ease-out;position:absolute}.clock-cell .hand[style*="135deg"]{opacity:.35;transition:rotate .4s ease-out,opacity .3s ease-out .1s}html,body{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#edf1f5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000;margin:0;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}