:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.matrix{display:grid;grid-template-columns:repeat(2,auto);gap:16px}@media (min-width: 720px){.matrix{grid-template-columns:repeat(6,auto)}}@media (min-width: 720px){.digit:nth-child(2n){margin-right:16px}}@media (min-width: 820px){.digit:nth-child(2n){margin-right:32px}}.digit{display:grid;grid-template-columns:repeat(4,minmax(4px,32px));grid-template-rows:repeat(6,auto);gap:4px}.clock{max-width:32px;max-height:32px;border:1px solid rgba(77,77,77,.645);border-radius:999999px;position:relative;rotate:180deg;aspect-ratio:1 / 1}.arm{width:50%;height:2px;background-color:#fff;transform:translate(-50%,-50%) translateY(1px);position:absolute;top:50%;left:25%;transition:rotate .25s ease-in;rotate:var(--r1)}.arm:last-of-type{rotate:var(--r2)}