.clock-container{display:inline-block;background:#fff;padding:2rem;border-radius:50%;box-shadow:0 0 0 8px #8b7355,0 0 0 12px #6d5a43,0 10px 30px #0006,inset 0 2px 10px #0000001a}.clock{width:400px;height:400px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.2))}.clock-face{fill:#fdfcf8;stroke:#8b7355;stroke-width:.5}.clock-face-inner{fill:none;stroke:#d4af37;stroke-width:.3}.clock-number{font-family:Georgia,serif;font-size:6px;fill:#2c2416;font-weight:700}.minute-marker{stroke:#8b7355;stroke-width:.3;opacity:.6}.hour-marker{stroke:#6d5a43;stroke-width:.8;stroke-linecap:round}.hand{stroke-linecap:round;transform-origin:center}.hour-hand{stroke:#2c2416;stroke-width:1.5}.minute-hand{stroke:#2c2416;stroke-width:1}.second-hand{stroke:#c41e3a;stroke-width:.5;filter:drop-shadow(0 0 2px rgba(196,30,58,.3))}.center-dot{fill:#2c2416;stroke:#d4af37;stroke-width:.5}.digital-time{margin-top:1.5rem;font-family:Georgia,serif;font-size:1.2rem;color:#2c2416;font-weight:700;letter-spacing:1px}@media(max-width:768px){.clock{width:300px;height:300px}.clock-container{padding:1.5rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Georgia,serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:center}.app{text-align:center;padding:2rem}h1{color:#fff;font-size:2.5rem;margin-bottom:2rem;text-shadow:2px 2px 4px rgba(0,0,0,.3);font-weight:400;letter-spacing:2px}