:root{--clock-bg:#1a1a1d;--clock-text:#ffffff;--clock-primary:#c3073f;--clock-secondary:#950740;--clock-analog-bg:#1f1f1f;--clock-analog-border:#4e4e50;--clock-analog-face:#2c2c2e;--clock-hand-hour:#ffffff;--clock-hand-minute:#ffffff;--clock-hand-second:#ff3b30}.dark{--clock-bg:#121212;--clock-text:#ffffff;--clock-primary:#ff453a;--clock-secondary:#ff9f0a;--clock-analog-bg:#1c1c1e;--clock-analog-border:#38383a;--clock-analog-face:#2c2c2e;--clock-hand-hour:#ffffff;--clock-hand-minute:#ffffff;--clock-hand-second:#ff3b30}.clock-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background-color:var(--clock-bg);padding:1rem;overflow:hidden;position:relative}.clock-glass-card{overflow:hidden;width:100%;max-width:500px}.clock-tabs{border-bottom:1px solid rgba(255,255,255,.1)}.clock-content,.clock-tabs{display:flex;justify-content:center;padding:1rem}.clock-content{align-items:center;aspect-ratio:1/1;width:100%}.digital-clock-face{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--clock-text);text-align:center}.digital-time{font-size:clamp(3rem,18vw,6rem);font-weight:700;letter-spacing:-.05em;font-family:Space Grotesk,sans-serif;line-height:1}.digital-time span{font-size:clamp(1.5rem,8vw,4rem)}.digital-date{font-size:clamp(.875rem,4vw,1.5rem);font-weight:500;opacity:.7}.analog-clock{width:90%;height:90%;max-width:300px;max-height:300px;border-radius:50%;background-color:var(--clock-analog-face);border:clamp(8px,3vw,12px) solid var(--clock-analog-border);box-shadow:inset 0 0 20px rgba(0,0,0,.5),0 10px 20px rgba(0,0,0,.5);position:relative}.analog-clock:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(10px,4%,15px);height:clamp(10px,4%,15px);background:var(--clock-hand-hour);border-radius:50%;z-index:10;border:2px solid var(--clock-hand-second)}.hour-hand,.minute-hand,.second-hand{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;border-radius:2px}.hour-hand{width:6px;height:25%;background-color:var(--clock-hand-hour)}.minute-hand{width:4px;height:35%;background-color:var(--clock-hand-minute)}.second-hand{width:2px;height:40%;background-color:var(--clock-hand-second);z-index:5}.clock-marker{position:absolute;top:0;left:50%;width:2px;height:100%;transform-origin:center center}.clock-marker-inner{background:rgba(255,255,255,.7);width:2px;height:8px;border-radius:2px}.clock-marker-inner.major{width:4px;height:15px}@media (max-width:480px){.clock-glass-card{border-radius:1.5rem}}