.clock{text-align:center;user-select:none}.time-display{font-size:clamp(4rem,15vw,10rem);font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:flex;gap:.1em;align-items:center;justify-content:center}.time-char{display:inline-block;animation:fadeIn .6s ease-out;will-change:transform}.time-char.separator{opacity:.7;animation:pulse 2s ease-in-out infinite}.app.midnight .time-display{text-shadow:0 0 40px rgba(99,102,241,.3)}.app.aurora .time-display{text-shadow:0 0 40px rgba(22,199,154,.3)}.app.minimal .time-display{text-shadow:none}.app.neon .time-display{text-shadow:0 0 10px rgba(255,0,255,.8),0 0 20px rgba(255,0,255,.6),0 0 30px rgba(0,255,255,.4)}.app.sunset .time-display{text-shadow:0 0 40px rgba(255,107,107,.4)}.app.forest .time-display{text-shadow:0 0 40px rgba(46,204,113,.3)}.app.ocean .time-display{text-shadow:0 0 40px rgba(59,130,246,.4)}.app.rosegold .time-display{text-shadow:0 0 40px rgba(212,175,55,.3)}.app.monochrome .time-display{text-shadow:0 0 20px rgba(255,255,255,.2)}.app.retro .time-display{text-shadow:0 0 10px rgba(255,110,199,.8),0 0 20px rgba(57,255,20,.6)}.app.cherry .time-display{text-shadow:0 0 30px rgba(255,107,157,.3)}@media (max-width: 768px){.time-display{font-size:clamp(3rem,12vw,6rem)}}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-midnight: #0a0e27;--text-midnight: #e0e6ff;--accent-midnight: #6366f1;--bg-aurora: #1a1a2e;--text-aurora: #eee;--accent-aurora: #16c79a;--bg-minimal: #fafafa;--text-minimal: #1a1a1a;--accent-minimal: #2563eb;--bg-neon: #0d0221;--text-neon: #ff00ff;--accent-neon: #00ffff;--bg-sunset: #1a0b2e;--text-sunset: #ffd89b;--accent-sunset: #ff6b6b;--bg-forest: #0f2027;--text-forest: #98d8c8;--accent-forest: #2ecc71;--bg-ocean: #0a2342;--text-ocean: #7dd3fc;--accent-ocean: #3b82f6;--bg-rosegold: #2c1810;--text-rosegold: #f4c2c2;--accent-rosegold: #d4af37;--bg-monochrome: #000000;--text-monochrome: #ffffff;--accent-monochrome: #888888;--bg-retro: #2b0e3a;--text-retro: #ff6ec7;--accent-retro: #39ff14;--bg-cherry: #fff5f7;--text-cherry: #8b3a62;--accent-cherry: #ff6b9d}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;width:100vw;height:100vh}#root{width:100%;height:100%}.app{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:background .6s ease,color .6s ease}.app.midnight{background:var(--bg-midnight);color:var(--text-midnight)}.app.aurora{background:var(--bg-aurora);color:var(--text-aurora)}.app.minimal{background:var(--bg-minimal);color:var(--text-minimal)}.app.neon{background:var(--bg-neon);color:var(--text-neon)}.app.sunset{background:var(--bg-sunset);color:var(--text-sunset)}.app.forest{background:var(--bg-forest);color:var(--text-forest)}.app.ocean{background:var(--bg-ocean);color:var(--text-ocean)}.app.rosegold{background:var(--bg-rosegold);color:var(--text-rosegold)}.app.monochrome{background:var(--bg-monochrome);color:var(--text-monochrome)}.app.retro{background:var(--bg-retro);color:var(--text-retro)}.app.cherry{background:var(--bg-cherry);color:var(--text-cherry)}.app.midnight .background-gradient{background:radial-gradient(circle at 50% 50%,rgba(99,102,241,.15),transparent 70%)}.app.aurora .background-gradient{background:radial-gradient(circle at 20% 30%,rgba(22,199,154,.2),transparent 40%),radial-gradient(circle at 80% 70%,rgba(255,107,107,.15),transparent 40%)}.app.minimal .background-gradient{background:radial-gradient(circle at 50% 50%,rgba(37,99,235,.08),transparent 60%)}.app.neon .background-gradient{background:radial-gradient(circle at 30% 40%,rgba(255,0,255,.2),transparent 50%),radial-gradient(circle at 70% 60%,rgba(0,255,255,.2),transparent 50%)}.app.sunset .background-gradient{background:radial-gradient(circle at 50% 80%,rgba(255,107,107,.25),transparent 60%),radial-gradient(circle at 50% 20%,rgba(255,165,0,.15),transparent 60%)}.app.forest .background-gradient{background:radial-gradient(circle at 50% 50%,rgba(46,204,113,.15),transparent 70%)}.app.ocean .background-gradient{background:radial-gradient(circle at 40% 60%,rgba(59,130,246,.2),transparent 50%),radial-gradient(circle at 60% 30%,rgba(14,165,233,.15),transparent 50%)}.app.rosegold .background-gradient{background:radial-gradient(circle at 50% 50%,rgba(212,175,55,.15),transparent 70%)}.app.monochrome .background-gradient{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.05),transparent 70%)}.app.retro .background-gradient{background:radial-gradient(circle at 25% 25%,rgba(255,110,199,.2),transparent 40%),radial-gradient(circle at 75% 75%,rgba(57,255,20,.15),transparent 40%)}.app.cherry .background-gradient{background:radial-gradient(circle at 50% 50%,rgba(255,107,157,.12),transparent 60%)}.background-gradient{position:absolute;inset:0;pointer-events:none;transition:background .6s ease}.main-content{display:flex;flex-direction:column;align-items:center;gap:2rem;z-index:1}.controls{position:fixed;top:2rem;right:2rem;display:flex;gap:.75rem;z-index:100}.control-btn{width:44px;height:44px;border-radius:12px;border:none;background:#ffffff1a;backdrop-filter:blur(10px);color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.control-btn:hover{background:#ffffff26;transform:translateY(-2px)}.control-btn:active{transform:translateY(0)}.footer{position:fixed;bottom:2rem;text-align:center;font-size:.875rem;opacity:.6;z-index:1}.footer .logo{font-weight:600;letter-spacing:.05em}@media (max-width: 768px){.controls{top:1rem;right:1rem;gap:.5rem}.control-btn{width:40px;height:40px}.footer{bottom:1rem;font-size:.75rem}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes glow{0%,to{filter:drop-shadow(0 0 10px currentColor)}50%{filter:drop-shadow(0 0 20px currentColor)}}.fade-in{animation:fadeIn .6s ease-out}.slide-in{animation:slideIn .4s ease-out}*{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;transition-duration:.2s;transition-timing-function:ease}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}