:root{--scale: 1;--cycle: .25s;--field-gap: calc(var(--scale) * 5rem);--cell-size: calc(var(--scale) * 3rem);--cell-border-size: max(calc(var(--cell-size) / 16), 1.5px);--hand-color: oklch(1 100.1916 119.15)}*{margin:0;padding:0;box-sizing:border-box}body{background-color:#000}#app{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}#button-container{display:flex;justify-content:center;gap:calc(var(--scale) * var(--cell-size) /2);align-items:center;margin-top:calc(var(--scale) * 20px);position:relative;transform:translate(calc(var(--scale) * -.25 * var(--cell-size)))}.clock{display:flex;gap:var(--field-gap)}.clock>.pair{display:flex;gap:.125rem}.digit{display:grid;grid-template-columns:repeat(var(--column),1fr);// 2x3,4x6 grid-template-rows: repeat(var(--row),1fr);gap:.125rem}.cell{height:var(--cell-size);width:var(--cell-size);position:relative;border-radius:1000px}.cell>.hand{width:50%;height:var(--cell-border-size);background-color:var(--hand-color);position:absolute;transform-origin:center left;top:50%;left:50%;translate:0% -50%;rotate:135deg;transition:rotate var(--cycle)}