*{margin:0;padding:0;box-sizing:border-box}body{font-family:Orbitron,Arial,monospace;overflow:hidden;background:#000}.app{width:100vw;height:100vh;position:relative;display:flex;align-items:center;justify-content:center;transition:all .5s ease}@keyframes dayCycle{0%{background-position:0% 0%}25%{background-position:0% 25%}50%{background-position:0% 50%}75%{background-position:0% 75%}to{background-position:0% 100%}}.sidebar-toggle{position:fixed;top:20px;left:20px;z-index:1000;background:#000000b3;border:2px solid rgba(255,255,255,.3);color:#fff;padding:12px 16px;border-radius:12px;cursor:pointer;font-size:18px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.sidebar-toggle:hover{background:#0ff3;border-color:#0ff;box-shadow:0 0 20px #00ffff80}.sidebar{position:fixed;top:0;left:0;width:350px;height:100vh;background:#000000e6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:2px solid rgba(0,255,255,.3);z-index:999;overflow-y:auto;transition:transform .4s cubic-bezier(.4,0,.2,1);padding:20px}.sidebar-closed{transform:translate(-100%)}.sidebar-open{transform:translate(0)}.sidebar-header{text-align:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid rgba(0,255,255,.3)}.sidebar-header h2{color:#0ff;font-size:24px;margin-bottom:5px;text-shadow:0 0 10px #00ffff}.sidebar-header p{color:#ffffffb3;font-size:14px}.sidebar-close{position:absolute;top:15px;right:15px;background:none;border:none;color:#ff6b6b;font-size:24px;cursor:pointer;transition:all .3s ease}.sidebar-close:hover{color:#ff4757;text-shadow:0 0 10px #ff4757}.sidebar-section{margin-bottom:25px}.sidebar-section h3{color:#0ff;font-size:16px;margin-bottom:15px;text-shadow:0 0 5px #00ffff}.clock-modes{display:flex;flex-direction:column;gap:8px}.mode-button{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;cursor:pointer;transition:all .3s ease;font-size:14px}.mode-button:hover{background:#0ff3;border-color:#0ff;box-shadow:0 0 15px #00ffff4d}.mode-button.active{background:#00ffff4d;border-color:#0ff;box-shadow:0 0 20px #00ffff80}.toggle-switch{display:flex;align-items:center;gap:12px;color:#fff;cursor:pointer;font-size:14px}.toggle-switch input{width:50px;height:25px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff3;border-radius:25px;position:relative;cursor:pointer;transition:all .3s ease}.toggle-switch input:checked{background:#0ff;box-shadow:0 0 15px #00ffff80}.toggle-switch input:before{content:"";position:absolute;width:21px;height:21px;border-radius:50%;background:#fff;top:2px;left:2px;transition:all .3s ease}.toggle-switch input:checked:before{transform:translate(25px)}.productivity-stats{display:flex;flex-direction:column;gap:15px}.stat{display:flex;justify-content:space-between;align-items:center}.stat-label{color:#ffffffb3;font-size:12px}.stat-value{color:#0ff;font-weight:700;text-shadow:0 0 5px #00ffff}.progress-bar{position:relative;width:100px;height:20px;background:#ffffff1a;border-radius:10px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#0ff,#f0f);border-radius:10px;transition:width .5s ease}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:10px;font-weight:700}.scene-selector-button{width:100%;padding:15px;background:linear-gradient(45deg,#ff6b6b,#4ecdc4);border:none;border-radius:10px;color:#fff;font-weight:700;cursor:pointer;transition:all .3s ease;font-size:14px}.scene-selector-button:hover{transform:translateY(-2px);box-shadow:0 10px 25px #ff6b6b4d}.future-ready-links{display:flex;flex-direction:column;gap:8px}.future-ready-links a{color:#0ff;text-decoration:none;padding:8px 12px;border-radius:6px;background:#00ffff1a;transition:all .3s ease;font-size:12px}.future-ready-links a:hover{background:#0ff3;box-shadow:0 0 10px #00ffff4d}.main-content{position:relative;z-index:2;text-align:center;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.scene-indicator{position:absolute;top:30px;left:50%;transform:translate(-50%);background:#000000b3;color:#0ff;padding:10px 20px;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,255,255,.3);font-size:14px;text-shadow:0 0 10px #00ffff}.clock-container{display:flex;flex-direction:column;align-items:center;gap:20px}.clock-display{font-size:clamp(4rem,12vw,15rem);font-weight:700;text-align:center;transition:all .5s ease;cursor:pointer}.holographic-clock{background:linear-gradient(45deg,#00f5ff,#f0f,#0f0,#ff0);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:holographicShift 3s ease-in-out infinite,holographicFloat 6s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(0,245,255,.8));transform-style:preserve-3d}@keyframes holographicShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes holographicFloat{0%,to{transform:translateY(0) rotateX(0)}50%{transform:translateY(-10px) rotateX(5deg)}}.particle-clock{color:#ffffffe6;text-shadow:0 0 20px rgba(255,255,255,.8);animation:particleGlow 2s ease-in-out infinite alternate}@keyframes particleGlow{0%{text-shadow:0 0 20px rgba(255,255,255,.8)}to{text-shadow:0 0 40px rgba(0,255,255,1),0 0 60px rgba(255,0,255,.8)}}.liquid-clock{color:#0ff;animation:liquidFlow 4s ease-in-out infinite;filter:drop-shadow(0 0 20px #00ffff)}@keyframes liquidFlow{0%,to{transform:scale(1) skew(0);filter:drop-shadow(0 0 20px #00ffff)}25%{transform:scale(1.02) skew(1deg);filter:drop-shadow(0 0 30px #ff00ff)}50%{transform:scale(.98) skew(-1deg);filter:drop-shadow(0 0 25px #ffff00)}75%{transform:scale(1.01) skew(.5deg);filter:drop-shadow(0 0 35px #00ff00)}}.standard-clock{color:#fff;text-shadow:0 0 20px rgba(255,255,255,.8)}.date-display{color:#fffc;font-size:clamp(1rem,3vw,2rem);text-shadow:0 0 10px rgba(255,255,255,.5);margin-top:10px}.time-format-toggle{margin-top:15px}.time-format-toggle button{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#ffffffb3;padding:8px 16px;border-radius:20px;cursor:pointer;font-size:12px;transition:all .3s ease}.time-format-toggle button:hover{background:#0ff3;border-color:#0ff;color:#0ff}.focus-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1001;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.focus-timer{text-align:center;color:#fff}.focus-timer h3{color:#0ff;margin-bottom:20px;font-size:24px;text-shadow:0 0 10px #00ffff}.focus-progress{display:flex;justify-content:center;align-items:center}.focus-ring{width:200px;height:200px;border:4px solid rgba(0,255,255,.3);border-top:4px solid #00ffff;border-radius:50%;display:flex;justify-content:center;align-items:center;animation:focusSpin 2s linear infinite;box-shadow:0 0 30px #00ffff80}.focus-ring span{font-size:36px;font-weight:700;color:#0ff;text-shadow:0 0 10px #00ffff}@keyframes focusSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dual-monitor-indicator{position:absolute;top:30px;right:30px;display:flex;align-items:center;gap:10px;background:#000000b3;color:#0f0;padding:10px 15px;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,255,0,.3);font-size:14px;text-shadow:0 0 10px #00ff00}.scene-selector-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000e6;display:flex;justify-content:center;align-items:center;z-index:1002;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.scene-selector-content{width:90vw;max-width:1200px;max-height:90vh;background:#000c;border:2px solid rgba(0,255,255,.3);border-radius:20px;padding:30px;overflow-y:auto;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.scene-selector-header{text-align:center;margin-bottom:30px;position:relative}.scene-selector-header h2{color:#0ff;font-size:32px;margin-bottom:10px;text-shadow:0 0 15px #00ffff}.scene-selector-header p{color:#ffffffb3;font-size:16px}.close-button{position:absolute;top:-10px;right:0;background:none;border:none;color:#ff6b6b;font-size:36px;cursor:pointer;transition:all .3s ease}.close-button:hover{color:#ff4757;text-shadow:0 0 15px #ff4757;transform:scale(1.1)}.scenes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.scene-card{background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:15px;overflow:hidden;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.scene-card:hover{transform:translateY(-5px);border-color:#00ffff80;box-shadow:0 15px 35px #0ff3}.scene-card.active{border-color:#0ff;box-shadow:0 0 30px #00ffff80}.scene-preview{width:100%;height:200px;position:relative;background-size:cover;background-position:center}.active-badge{position:absolute;top:10px;right:10px;background:#0ff;color:#000;padding:5px 12px;border-radius:15px;font-size:12px;font-weight:700}.scene-info{padding:20px}.scene-info h3{color:#0ff;font-size:18px;margin-bottom:8px;text-shadow:0 0 5px #00ffff}.scene-info p{color:#ffffffb3;font-size:14px;margin-bottom:10px;line-height:1.4}.scene-mood{color:#fff9;font-size:12px;margin-bottom:10px}.scene-colors{display:flex;gap:5px}.color-dot{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.3)}@media (max-width: 768px){.sidebar{width:100vw}.scene-selector-content{width:95vw;padding:20px}.scenes-grid{grid-template-columns:1fr}.clock-display{font-size:clamp(3rem,15vw,8rem)}}.particle-canvas{opacity:.7}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:#ffffff1a}.sidebar::-webkit-scrollbar-thumb{background:#00ffff80;border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:#0ffc}