:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:#0a0a0f;color:#e0e0e0;min-height:100vh}.app{max-width:1400px;margin:0 auto;padding:2rem 1rem}header{text-align:center;margin-bottom:3rem}header h1{font-size:2rem;font-weight:300;letter-spacing:.2em;color:#fff}.subtitle{font-size:.85rem;letter-spacing:.3em;text-transform:uppercase;color:#666;margin-top:.5rem}.clocks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2rem;justify-items:center}.clock-card{display:flex;flex-direction:column;align-items:center;gap:.75rem}.clock-face{position:relative;width:140px;height:140px;border-radius:50%;border:2px solid #2a2a35;background:radial-gradient(circle at 50% 40%,#1a1a25,#0d0d15);transition:border-color .3s}.clock-face.day{border-color:#3a3a50;background:radial-gradient(circle at 50% 40%,#1e1e30,#12121d)}.clock-face.night{border-color:#1a1a2a;background:radial-gradient(circle at 50% 40%,#0f0f1a,#080810)}.clock-face.local{border-color:#4a9eff;box-shadow:0 0 16px #4a9eff59,0 0 4px #4a9eff33;background:radial-gradient(circle at 50% 40%,#1a2540,#0d1525)}.clock-card.local .clock-city,.clock-card.local .clock-label{color:#4a9eff}.hour-mark{position:absolute;top:8px;left:50%;width:2px;height:12px;margin-left:-1px;background:#555;transform-origin:50% 62px;border-radius:1px}.minute-mark{position:absolute;top:12px;left:50%;width:1px;height:6px;margin-left:-.5px;background:#333;transform-origin:50% 58px}.hand{position:absolute;bottom:50%;left:50%;transform-origin:50% 100%;border-radius:2px}.hour-hand{width:3px;height:32px;margin-left:-1.5px;background:#ddd}.minute-hand{width:2px;height:44px;margin-left:-1px;background:#bbb}.second-hand{width:1px;height:50px;margin-left:-.5px;background:#e74c3c}.center-dot{position:absolute;top:50%;left:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#e74c3c}.clock-info{display:flex;flex-direction:column;align-items:center;gap:2px}.clock-city{font-size:.9rem;font-weight:600;color:#fff}.clock-time{font-size:.85rem;font-family:JetBrains Mono,Fira Code,monospace;color:#aaa;letter-spacing:.05em}.clock-date{font-size:.7rem;color:#666}.clock-label{font-size:.65rem;color:#555;letter-spacing:.15em;text-transform:uppercase}@media(max-width:600px){.clocks-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1.5rem}.clock-face{width:110px;height:110px}.hour-mark{transform-origin:50% 47px;height:10px;top:6px}.minute-mark{transform-origin:50% 43px;height:5px;top:10px}.hour-hand{height:24px}.minute-hand{height:34px}.second-hand{height:38px}}