@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Orbitron:wght@400;700;900&display=swap";@import"https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap";:root{--bg-dawn: linear-gradient(180deg, #ff6b35 0%, #f7c59f 40%, #ffe4b5 100%);--bg-day: linear-gradient(180deg, #87ceeb 0%, #b0e2ff 50%, #e0f4ff 100%);--bg-evening: linear-gradient(180deg, #ff7043 0%, #ff8c69 30%, #ffb74d 100%);--bg-night: linear-gradient(180deg, #0f0c29 0%, #302b63 50%, #24243e 100%);--primary: #6c63ff;--primary-light: #a29bfe;--secondary: #fd79a8;--accent: #00cec9;--accent2: #fdcb6e;--success: #00b894;--danger: #d63031;--warning: #e17055;--glass: rgba(255,255,255,.12);--glass-border: rgba(255,255,255,.25);--glass-dark: rgba(0,0,0,.25);--shadow-glow: 0 0 30px rgba(108,99,255,.4);--shadow-card: 0 8px 32px rgba(0,0,0,.3);--shadow-btn: 0 4px 15px rgba(0,0,0,.3);--radius-card: 28px;--radius-btn: 16px;--text-light: #ffffff;--text-muted: rgba(255,255,255,.7)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:Nunito,sans-serif;color:var(--text-light);user-select:none;-webkit-user-select:none}#root{display:flex;flex-direction:column;align-items:center;justify-content:center}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-sm{gap:8px}.gap-md{gap:16px}.gap-lg{gap:24px}.glass-card{background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}.btn{border:none;cursor:pointer;font-family:Nunito,sans-serif;font-weight:800;border-radius:var(--radius-btn);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;box-shadow:var(--shadow-btn)}.btn:active{transform:scale(.93)!important;filter:brightness(.9)}@keyframes twinkle{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse-ring{0%{transform:scale(.9);opacity:.8}50%{transform:scale(1.05);opacity:1}to{transform:scale(.9);opacity:.8}}@keyframes slide-in-up{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pop-in{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes correct-bounce{0%,to{transform:scale(1)}30%{transform:scale(1.2)}60%{transform:scale(.95)}}@keyframes star-burst{0%{transform:scale(0) rotate(0);opacity:1}50%{transform:scale(1.5) rotate(180deg);opacity:1}to{transform:scale(0) rotate(360deg);opacity:0}}@keyframes digit-flip{0%{transform:rotateX(90deg);opacity:0}to{transform:rotateX(0);opacity:1}}@keyframes glow-pulse{0%,to{text-shadow:0 0 10px currentColor,0 0 20px currentColor}50%{text-shadow:0 0 20px currentColor,0 0 40px currentColor,0 0 60px currentColor}}.animate-slide-up{animation:slide-in-up .5s cubic-bezier(.34,1.56,.64,1) both}.animate-pop{animation:pop-in .4s cubic-bezier(.34,1.56,.64,1) both}.animate-shake{animation:shake .4s ease both}.animate-correct{animation:correct-bounce .4s ease both}.sky-bg{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;transition:background 3s ease;overflow:hidden}.stars-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.clouds-layer{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}.cloud{position:absolute;background:#fff6;filter:blur(15px);border-radius:50%;animation:cloudDrift 60s linear infinite}@keyframes cloudDrift{0%{transform:translate(-150vw)}to{transform:translate(150vw)}}.celestial-body{position:absolute;border-radius:50%;z-index:2}.sun{width:110px;height:110px;background:radial-gradient(circle at 35% 35%,#fff7a1,gold,#ff8c00);box-shadow:0 0 60px gold}.moon{width:90px;height:90px;background:radial-gradient(circle at 35% 30%,#fffde7,#f0d060,#b8860b);box-shadow:0 0 45px #ffffc84d}.cityscape-static-layer{position:absolute;bottom:0;left:0;width:100%;height:450px;z-index:5;pointer-events:none}*{-webkit-tap-highlight-color:transparent!important;outline:none!important}html,body,#root{margin:0;padding:0;width:100vw;height:100vh;background:transparent!important;overflow:hidden}.app-wrapper-clean{position:relative;z-index:10;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:transparent!important}:root{--analog-dim: clamp(300px, 30vw, 550px);--digital-dim: clamp(400px, 45vw, 800px);--gap-dim: clamp(20px, 6vw, 130px)}.clocks-container-side-by-side{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--gap-dim);width:95vw;height:auto}.analog-clock-container{width:var(--analog-dim);height:var(--analog-dim);flex-shrink:0;display:flex;align-items:center;justify-content:center}.alarm-clock-unit{width:var(--digital-dim);max-width:100%;background:linear-gradient(145deg,#1e272e,#0a0a0a);border-radius:40px;padding:clamp(20px,3vw,40px);border:10px solid #2d3436;box-shadow:0 40px 100px #000;display:flex;flex-direction:column;align-items:center;position:relative;flex-shrink:1}.alarm-display-screen{width:100%;background:#000;padding:clamp(15px,2.5vw,35px) 0;border-radius:20px;box-shadow:inset 0 0 60px #000;display:flex;justify-content:center;align-items:center;border:3px solid #111;margin-bottom:clamp(15px,3vw,40px)}.display-content-v2{display:flex;align-items:center;gap:clamp(10px,1.5vw,25px)}.s-ampm-stack{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding-top:clamp(10px,1.5vw,25px)}.h-m-digits-v2{font-family:Share Tech Mono,monospace;font-size:clamp(80px,11vw,190px);line-height:1;color:#51ff00;text-shadow:0 0 30px rgba(81,255,0,.4)}.s-digits-v2{font-family:Share Tech Mono,monospace;font-size:clamp(30px,4.5vw,80px);color:#51ff00}.am-pm-label-v2{font-family:Share Tech Mono,monospace;font-size:clamp(10px,1.2vw,20px);color:#51ff00;opacity:.6;text-transform:uppercase}.alarm-button-panel{display:flex!important;flex-direction:row!important;justify-content:space-between!important;width:100%!important;padding:0 5%}.btn-group{display:flex;flex-direction:column;align-items:center;gap:8px}.alarm-btn{width:clamp(40px,5.5vw,75px);height:clamp(40px,5.5vw,75px);border-radius:12px;border:2px solid #333;background:#111;color:#fff;font-weight:900;font-size:clamp(16px,2vw,28px);cursor:pointer;display:flex;align-items:center;justify-content:center}.play-btn{width:clamp(80px,10vw,130px);font-size:clamp(12px,1.5vw,18px)}.btn-hint{font-size:clamp(8px,.8vw,10px);color:#ffffff4d;text-transform:uppercase;font-weight:700}.speaker-left,.speaker-right{display:none}@media(max-width:900px){.clocks-container-side-by-side{flex-direction:column;gap:40px;width:100%;padding-top:50px}.alarm-clock-unit{width:90vw}.analog-clock-container{width:80vw;height:80vw;max-width:450px;max-height:450px}}@media(orientation:portrait){.clocks-container-side-by-side{flex-direction:column;gap:40px}}.view-mode-selector{position:fixed;top:20px;right:20px;z-index:100;display:flex;gap:10px;background:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:6px;border-radius:16px;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px #00000080}.mode-btn{width:44px;height:44px;border:none;background:transparent;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;padding:0}.mode-btn:hover{background:#ffffff1a}.mode-btn.active{background:#51ff00;box-shadow:0 0 20px #51ff0066}.mode-btn .icon{width:26px;height:26px;position:relative;transition:transform .3s ease}.mode-btn:hover .icon{transform:scale(1.1)}.analog-icon{border:2px solid #ccc;border-radius:50%}.analog-icon:before,.analog-icon:after{content:"";position:absolute;background:#ccc;left:50%;bottom:50%;transform-origin:bottom center;border-radius:1px}.analog-icon:before{width:2px;height:9px;transform:translate(-50%) rotate(0)}.analog-icon:after{width:2px;height:6px;transform:translate(-50%) rotate(90deg)}.mode-btn.active .analog-icon{border-color:#000}.mode-btn.active .analog-icon:before,.mode-btn.active .analog-icon:after{background:#000}.digital-icon{border:2px solid #ccc;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:2px}.digital-icon span{width:6px;height:10px;border:1px solid #ccc;border-radius:1px}.digital-icon:before{content:":";font-family:inherit;font-size:14px;line-height:0;color:#ccc;margin-bottom:2px}.mode-btn.active .digital-icon,.mode-btn.active .digital-icon span{border-color:#000}.mode-btn.active .digital-icon:before{color:#000}.both-icon{border:none!important}.both-icon .mini-analog{width:16px;height:16px;border:1.5px solid #ccc;border-radius:50%;position:absolute;top:0;left:0;z-index:2;background:transparent}.both-icon .mini-analog:after{content:"";position:absolute;top:50%;left:50%;width:1px;height:5px;background:#ccc;transform-origin:bottom center;transform:translate(-50%,-100%) rotate(45deg)}.both-icon .mini-digital{width:18px;height:12px;border:1.5px solid #ccc;border-radius:2px;position:absolute;bottom:0;right:0;background:transparent}.mode-btn.active .both-icon .mini-analog,.mode-btn.active .both-icon .mini-digital{border-color:#000}.mode-btn.active .both-icon .mini-analog:after{background:#000}@media(max-width:600px){.view-mode-selector{inset:auto auto 30px 50%;transform:translate(-50%)}}