body{margin:0;min-height:100vh;display:grid;place-items:center;background:#111;color:#eee;font-family:system-ui,sans-serif}
main{text-align:center}
.face{position:relative;width:min(80vw,360px);aspect-ratio:1;border-radius:50%;border:8px solid #444;background:#1c1c1c;box-shadow:0 0 30px #000 inset,0 0 20px #0008;margin:0 auto}
.tick{position:absolute;left:50%;top:0;width:3px;height:100%;margin-left:-1.5px}
.tick::before{content:"";display:block;width:100%;height:6%;background:#aaa}
.tick.big{width:5px;margin-left:-2.5px}.tick.big::before{height:9%;background:#fff}
.hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:4px}
.hour{width:6px;height:25%;margin-left:-3px;background:#fff}
.minute{width:4px;height:36%;margin-left:-2px;background:#ddd}
.second{width:2px;height:40%;margin-left:-1px;background:#e5484d}
.pin{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:#e5484d}
#digital{margin-top:1.5rem;font-size:1.5rem;letter-spacing:.15em;font-variant-numeric:tabular-nums;color:#aaa}