.clock-container {width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background:#000} 
.clock-face {width:90vmin;height:90vmin;border-radius:50%;position:relative;background:#000} 
.tick {position:absolute;left:50%;top:50%;transform-origin:top center;background:rgba(255,255,255,.3)} 
.tick.major {width:3px;height:28px;background:rgba(255,255,255,.9)} 
.tick.minor {width:3px;height:28px;background:rgba(255,255,255,.6)} 
.tick-label {position:absolute;color:#fff;font-size:8vmin;font-weight:800;transform:translate(-50%,-50%);font-family:"Helvetica Neue",Arial,sans-serif} 
.outer-number {position:absolute;color:#fff;font-size:3.6vmin;transform:translate(-50%,-50%);font-family:"Helvetica Neue",Arial,sans-serif;font-weight:700} 
.hand {position:absolute;bottom:50%;left:50%;transform-origin:bottom center;border-radius:999px;transform:translateX(-50%) rotate(0)} 
.hour-hand {width:18px;height:30%;background:var(--accent-cyan);z-index:10;border-radius:9px;transition:transform .15s cubic-bezier(.4,2.08,.55,.44);box-shadow:0 0 12px rgba(78,205,196,.3)} 
.minute-hand {width:14px;height:45%;background:var(--text-primary);z-index:11;border-radius:7px;transition:transform .15s cubic-bezier(.4,2.08,.55,.44);box-shadow:0 0 12px rgba(255,255,255,.2)} 
.second-hand {width:3px;height:46%;background:var(--accent-orange);z-index:12;border-radius:1.5px;transition:none} 
.second-tail {position:absolute;top:100%;left:50%;transform:translateX(-50%);width:16px;height:16px;background:var(--accent-orange);border-radius:50%;margin-top:10px} 
.center-dot {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;background:var(--accent-orange);border-radius:50%;z-index:20;box-shadow:0 0 0 8px #000,0 0 0 10px var(--accent-cyan)}