.clock-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:2rem}.clock-display{text-align:center;padding:2rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-medium);min-width:320px}.time-display{font-family:var(--font-mono);font-size:clamp(3rem, 8vw, 6rem);font-weight:600;color:var(--primary-color);line-height:1;margin-bottom:1rem;text-shadow:0 2px 4px rgba(99,102,241,.1);animation:2s ease-in-out infinite subtle-pulse}.date-display{font-size:clamp(1rem, 3vw, 1.5rem);color:var(--text-secondary);font-weight:400;letter-spacing:.5px}.clock-controls{display:flex;justify-content:center;gap:1rem}@keyframes subtle-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.01)}}@media (max-width:768px){.clock-display{padding:1.5rem;min-width:280px}.clock-container{min-height:50vh;gap:1.5rem}}@media (max-width:480px){.clock-display{padding:1rem;min-width:240px}.time-display{margin-bottom:.75rem}.clock-container{gap:1rem}}@media (prefers-color-scheme:dark){:root{--primary-color:#818cf8;--text-primary:#f9fafb;--text-secondary:#d1d5db;--bg-primary:#111827;--bg-secondary:#1f2937;--bg-tertiary:#374151;--border-color:#374151}.time-display{text-shadow:0 2px 4px rgba(129,140,248,.2)}}