:root{--field-gap: 2rem;--cell-size: 3rem;--cell-border-size: max(calc(var(--cell-size) / 16), 1.5px);--hand-color: oklch(80.901% .00449 16.155)}*{margin:0;padding:0;box-sizing:border-box}body{background-color:#191818}#app{height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}.clock{display:flex;gap:var(--field-gap)}.clock>.pair{display:flex;gap:.125rem}.digit{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr);gap:.125rem}.cell{height:var(--cell-size);width:var(--cell-size);position:relative;background-color:var(--cell-background-color);border:var(--cell-border-size) solid var(--cell-border-color);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 .25s}.cell>.dot{width:var(--cell-border-size);height:var(--cell-border-size);position:absolute;left:50%;top:50%;translate:-50% -50%;background-color:var(--hand-color);border-radius:1000px}@media(max-width:1440px){:root{--cell-size: 2rem}}@media(max-width:1024px){:root{--field-gap: 1rem;--cell-size: 1.5rem}}@media(max-width:768px){:root{--field-gap: .5rem;--cell-size: 1rem}}@media(max-width:480px){:root{--cell-size: .75rem}}