.clock{display:flex;flex-direction:column;align-items:center;gap:1rem}.clock-time{display:flex;align-items:baseline;gap:.25rem}.time-segment{display:flex;gap:.1rem}.time-digit{font-family:Outfit,sans-serif;font-size:clamp(4rem,15vw,8rem);font-weight:200;line-height:1;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 60px var(--glow-warm);min-width:.65em;text-align:center}.time-separator{font-family:Outfit,sans-serif;font-size:clamp(3rem,12vw,6rem);font-weight:200;color:var(--accent-warm);margin:0 .1rem}.time-separator.pulsing{animation:pulse 1s ease-in-out infinite}.time-segment.seconds .time-digit{font-size:clamp(2rem,8vw,4rem);opacity:.7}.time-period{font-family:Outfit,sans-serif;font-size:clamp(1rem,3vw,1.5rem);font-weight:400;color:var(--text-secondary);margin-left:.75rem;text-transform:uppercase;letter-spacing:.1em}.clock-date{font-family:Playfair Display,serif;font-size:clamp(1rem,3vw,1.5rem);font-weight:400;font-style:italic;color:var(--text-secondary);letter-spacing:.05em;animation:fadeIn 1s ease-out .3s backwards}.clock-timezone{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--bg-card);border:1px solid rgba(255,255,255,.06);border-radius:2rem;animation:fadeIn 1s ease-out .5s backwards}.timezone-icon{display:flex;align-items:center;justify-content:center;color:var(--accent-warm)}.timezone-name{font-size:.875rem;font-weight:500;color:var(--text-primary)}.timezone-offset{font-size:.75rem;font-weight:400;color:var(--text-muted);padding:.2rem .5rem;background:#ffffff0d;border-radius:.25rem}@media (max-width: 768px){.clock-time{flex-wrap:wrap;justify-content:center}.time-segment.seconds{width:100%;justify-content:center;margin-top:.5rem}.time-segment.seconds .time-digit{font-size:clamp(1.5rem,6vw,2.5rem)}.time-period{position:absolute;right:-2rem}.clock-timezone{flex-wrap:wrap;justify-content:center;gap:.25rem}}.quote{max-width:600px;text-align:center;padding:2rem;position:relative;transition:opacity .3s ease,transform .3s ease;animation:fadeIn 1s ease-out .7s backwards}.quote.transitioning{opacity:0;transform:translateY(10px)}.quote-decoration{color:var(--accent-warm);opacity:.3;margin-bottom:1rem}.quote-text{font-family:Playfair Display,serif;font-size:clamp(1.25rem,3vw,1.75rem);font-weight:400;font-style:italic;line-height:1.6;color:var(--text-primary);margin-bottom:1rem}.quote-author{font-family:Outfit,sans-serif;font-size:.875rem;font-weight:500;font-style:normal;color:var(--text-secondary);letter-spacing:.1em;text-transform:uppercase}.quote-refresh{position:absolute;bottom:0;right:0;padding:.5rem;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:50%;color:var(--text-muted);cursor:pointer;transition:all .2s ease}.quote-refresh:hover{color:var(--accent-warm);border-color:var(--accent-warm);transform:rotate(180deg)}.quote-refresh:active{transform:rotate(180deg) scale(.95)}@media (max-width: 768px){.quote{padding:1.5rem}.quote-refresh{position:relative;margin-top:1rem}}.settings{position:fixed;bottom:2rem;right:2rem;z-index:100}.settings-toggle-wrapper{padding:8px;cursor:pointer;border-radius:50%}.settings-toggle{width:48px;height:48px;border-radius:50%;background:var(--bg-card);border:1px solid rgba(255,255,255,.1);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none}.settings-toggle-wrapper:hover .settings-toggle{color:var(--accent-warm);border-color:var(--accent-warm);transform:rotate(45deg)}.settings.open .settings-toggle{transform:rotate(90deg);color:var(--accent-warm);border-color:var(--accent-warm)}.settings.open .settings-toggle-wrapper:hover .settings-toggle{transform:rotate(90deg)}.settings-panel{position:absolute;bottom:60px;right:0;width:280px;padding:1.5rem;background:var(--bg-secondary);border:1px solid rgba(255,255,255,.08);border-radius:1rem;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:all .3s ease}.settings.open .settings-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.settings-title{font-family:Outfit,sans-serif;font-size:.875rem;font-weight:600;color:var(--text-primary);margin-bottom:1.25rem;letter-spacing:.05em;text-transform:uppercase}.setting-item{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.setting-label{display:flex;align-items:center;gap:.75rem;font-size:.875rem;color:var(--text-secondary)}.setting-icon{display:flex;align-items:center;justify-content:center;color:var(--accent-warm)}.toggle-switch{width:44px;height:24px;background:#ffffff1a;border:none;border-radius:12px;cursor:pointer;position:relative;transition:background .3s ease}.toggle-switch.active{background:var(--accent-warm)}.toggle-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .3s ease;box-shadow:0 2px 4px #0003}.toggle-switch.active .toggle-knob{transform:translate(20px)}.volume-slider{width:100px;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff1a;border-radius:2px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent-warm);border-radius:50%;cursor:pointer;transition:transform .2s ease}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-thumb{width:14px;height:14px;background:var(--accent-warm);border-radius:50%;border:none;cursor:pointer}.test-button{width:100%;padding:.75rem 1rem;margin-top:1rem;background:var(--bg-card);border:1px solid rgba(255,255,255,.1);border-radius:.5rem;color:var(--text-primary);font-family:Outfit,sans-serif;font-size:.875rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s ease}.test-button:hover:not(:disabled){background:var(--accent-warm);border-color:var(--accent-warm);color:var(--bg-primary)}.test-button:disabled{cursor:not-allowed;opacity:.7}.test-button.playing{background:#f59e0b33;border-color:var(--accent-warm)}.playing-indicator{width:8px;height:8px;background:var(--accent-warm);border-radius:50%;animation:pulse .8s ease-in-out infinite}.settings-note{margin-top:1rem;font-size:.75rem;color:var(--text-muted);text-align:center}@media (max-width: 768px){.settings{bottom:1rem;right:1rem}.settings-panel{width:260px;right:-.5rem}}.background{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:0;pointer-events:none}.gradient-orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.4;animation:float 20s ease-in-out infinite}.orb-1{width:600px;height:600px;background:radial-gradient(circle,var(--accent-warm) 0%,transparent 70%);top:-200px;right:-200px;animation-delay:0s}.orb-2{width:500px;height:500px;background:radial-gradient(circle,var(--accent-coral) 0%,transparent 70%);bottom:-150px;left:-150px;animation-delay:-7s}.orb-3{width:400px;height:400px;background:radial-gradient(circle,#6366f1 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);opacity:.2;animation-delay:-14s}.noise-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:.03;mix-blend-mode:overlay}.grid-pattern{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%)}@media (max-width: 768px){.gradient-orb{filter:blur(80px)}.orb-1{width:400px;height:400px}.orb-2{width:350px;height:350px}.orb-3{width:300px;height:300px}}.app{min-height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden}.main-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;position:relative;z-index:1}.content-wrapper{display:flex;flex-direction:column;align-items:center;gap:3rem;animation:fadeIn 1s ease-out}.footer{padding:1.5rem;text-align:center;position:relative}.footer p{font-size:.75rem;color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase}@media (max-width: 768px){.main-content{padding:1rem}.content-wrapper{gap:2rem}}:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-card: rgba(255, 255, 255, .03);--text-primary: #fafafa;--text-secondary: #a1a1aa;--text-muted: #52525b;--accent-warm: #f59e0b;--accent-coral: #ef4444;--accent-gradient: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);--glow-warm: rgba(245, 158, 11, .15);--glow-coral: rgba(239, 68, 68, .1)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}::selection{background:var(--accent-warm);color:var(--bg-primary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes glow{0%,to{box-shadow:0 0 20px var(--glow-warm),0 0 40px var(--glow-coral)}50%{box-shadow:0 0 30px var(--glow-warm),0 0 60px var(--glow-coral)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}