.main-container{width:100%;max-width:1024px;margin:0 auto;padding:1rem;min-height:100vh;display:flex;flex-direction:column;gap:1rem;overflow:hidden;-webkit-overflow-scrolling:touch}@media (max-width: 768px){.main-container{padding:.5rem;gap:.5rem}}.timer{display:flex;flex-direction:column;align-items:center;gap:3rem;width:100%;max-width:1200px;margin:0 auto;padding:1rem 2rem}.digital-clock{display:flex;align-items:center;gap:1.5rem;font-family:SF Mono,monospace;font-size:9rem;font-weight:300;color:var(--color-primary);text-shadow:0 0 30px rgba(127,90,240,.3);margin:1rem 0}.time-unit{background:var(--gradient-surface-light);padding:2.5rem 3.5rem;border-radius:24px;border:1px solid rgba(127,90,240,.1);min-width:200px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-light)}body.light-mode .time-unit{background:var(--gradient-surface-light);box-shadow:var(--shadow-light),inset 0 0 0 1px #ffffff80}body.dark-mode .time-unit{background:var(--gradient-surface-dark);box-shadow:var(--shadow-dark)}.time-unit:after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 50%,transparent 100%)}.separator{color:#8a8fa8;font-weight:200;margin:0 1rem;animation:pulse 1s infinite}.timer-modes{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;justify-content:center;max-width:600px}.mode-button{padding:.75rem 1.5rem;border:none;border-radius:25px;background:transparent;color:var(--color-secondary);cursor:pointer;transition:all .3s ease;border:2px solid rgba(127,90,240,.2);font-size:1rem;letter-spacing:.5px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);min-width:120px}.mode-button:hover{border-color:var(--color-primary);color:var(--color-primary)}.mode-button.active{background:var(--gradient-primary);color:#fff;border:none;box-shadow:var(--shadow-light)}.custom-time-input{display:flex;gap:1.5rem;align-items:center;margin:2rem 0}.custom-time-input input{width:120px;padding:1rem;border:2px solid #3a3d52;border-radius:8px;font-size:1.5rem;text-align:center;background:transparent;color:#8a8fa8;font-family:SF Mono,monospace}.custom-time-input input.no-spinners::-webkit-outer-spin-button,.custom-time-input input.no-spinners::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.custom-time-input input.no-spinners{-moz-appearance:textfield}.timer-controls{display:flex;gap:2rem;margin-top:2rem}.control-button{background:var(--gradient-primary);padding:1.2rem 3rem;border:none;border-radius:30px;color:#fff;font-size:1.3rem;font-weight:500;cursor:pointer;transition:all .3s ease;letter-spacing:1px;box-shadow:var(--shadow-light)}.control-button:hover{box-shadow:0 6px 20px #7f5af066;filter:brightness(1.1)}.control-button.reset{background:transparent;border:2px solid rgba(127,90,240,.2);color:var(--color-secondary)}.control-button.reset:hover{border-color:var(--color-primary);color:var(--color-primary)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (max-width: 1200px){.digital-clock{font-size:6rem}.time-unit{min-width:140px;padding:1.5rem 2rem}}@media (max-width: 768px){.timer{padding:1rem;gap:2rem;width:95%}.digital-clock{font-size:2.5rem;gap:.5rem;padding:0 1.5rem;margin:1rem 0;width:95%;justify-content:center}.time-unit{min-width:80px;padding:.75rem 1rem;border-radius:16px;margin:0 .5rem}.timer-modes{gap:.75rem;padding:0 1.5rem;margin:1rem 0;width:95%;justify-content:center}.mode-button{padding:.5rem 1rem;font-size:.85rem;min-width:auto}.timer-controls{gap:1rem;flex-direction:column;width:100%;max-width:300px;padding:0 1rem}.control-button{width:100%;padding:1rem;font-size:1.1rem}}@media (max-width: 480px){.timer{padding:1rem;width:90%}.digital-clock{font-size:2rem;padding:0 .5rem;margin:.75rem auto;width:90%;justify-content:center}.time-unit{min-width:65px;padding:.5rem;margin:0 .25rem}.timer-modes{padding:.5rem;margin:.75rem auto;gap:.5rem;width:90%}.mode-button{padding:.5rem .75rem;margin:.25rem;font-size:.8rem}.timer-controls{padding:0 1rem;margin:1rem auto;width:85%;max-width:280px}.control-button{margin:.375rem 0;width:100%;font-size:1rem}}@media (max-width: 360px){.timer{width:85%;padding:.75rem}.digital-clock{width:85%}.time-unit{min-width:60px;padding:.5rem;margin:0 .2rem}.timer-modes{width:85%}.timer-controls{width:80%}}.timer-container{position:relative;width:100%;max-width:500px;margin:0 auto;touch-action:none}.timer-display{font-size:clamp(2rem,5vw,3rem)}.timer-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:10px}.timer-button{min-width:44px;min-height:44px;padding:10px 20px;font-size:clamp(.875rem,2vw,1rem)}@media (max-width: 768px){.timer-container{padding:10px}.timer-controls{gap:8px}}@media (max-width: 480px){.timer-display{padding:15px}}@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){.digital-clock{font-size:4rem;gap:1rem}.time-unit{min-width:120px;padding:1.5rem 2rem}.timer-modes{max-width:90%;gap:1rem}.mode-button{padding:.75rem 1.25rem;font-size:.9rem;min-width:110px}.timer-controls{flex-direction:row;max-width:90%;gap:1.5rem}.control-button{padding:1rem 2rem;font-size:1.1rem;width:auto}}@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){.timer{gap:2rem;padding:1rem}.digital-clock{font-size:4.5rem;gap:1.25rem}.time-unit{min-width:150px;padding:2rem 2.5rem}.timer-modes{max-width:80%;gap:1.25rem}.mode-button{padding:.75rem 1.5rem;font-size:1rem;min-width:120px}.timer-controls{flex-direction:row;max-width:80%;gap:2rem}.control-button{padding:1rem 2.5rem;font-size:1.2rem}}@media (min-width: 1024px) and (max-width: 1200px){.digital-clock{font-size:5rem}.time-unit{min-width:160px;padding:2rem 3rem}}@media (min-width: 1024px) and (max-width: 1366px){.timer{gap:2.5rem}.digital-clock{font-size:5.5rem}.time-unit{min-width:180px}}@media (max-aspect-ratio: 3/4){.timer{gap:2rem}.digital-clock{font-size:clamp(2.5rem,8vw,4.5rem)}.time-unit{min-width:clamp(80px,25vw,150px);padding:clamp(1rem,3vw,2rem)}}@media (max-height: 600px) and (orientation: landscape){.timer{gap:1.5rem}.digital-clock{font-size:3rem}.time-unit{min-width:100px;padding:1rem 1.5rem}.timer-modes{margin-bottom:1rem}.mode-button{padding:.5rem 1rem}.timer-controls{margin-top:1rem}.control-button{padding:.75rem 1.5rem}}.mode-button,.control-button{min-height:44px;min-width:44px;touch-action:manipulation}@media (max-width: 280px){.timer{padding:.5rem}.digital-clock{font-size:1.75rem}.time-unit{min-width:55px;padding:.5rem}}.time-unit,.mode-button,.control-button{transition:all .3s ease}@media (min-width: 1920px){.timer{max-width:1400px}.digital-clock{font-size:7rem}}.audio-player{position:fixed;bottom:2rem;right:2rem;display:flex;flex-direction:column;align-items:center;gap:1rem;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;z-index:1000}.vinyl-record{width:180px;height:180px;border-radius:50%;background:url(/FlowBeat/assets/logo.webp) center center/cover;position:relative;transition:all .5s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;padding:0;box-shadow:0 10px 20px #0003;overflow:hidden;z-index:1000}.vinyl-record:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:99%;height:99%;border-radius:50%;background:repeating-radial-gradient(circle at center,rgba(0,0,0,.1) 0,rgba(0,0,0,.1) 1px,transparent 1px,transparent 3px);opacity:.4;pointer-events:none;mask-image:radial-gradient(circle at center,black 0%,black 98%,transparent 100%);-webkit-mask-image:radial-gradient(circle at center,black 0%,black 98%,transparent 100%)}.vinyl-record:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at center,#fff3,#0000001a);pointer-events:none}.vinyl-record.spinning{animation:vinylSpin 4s linear infinite}.track-info{font-size:.9rem;color:var(--color-secondary);text-align:center;opacity:.8}@keyframes vinylSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.vinyl-record:not(.spinning){transition:transform .5s cubic-bezier(.4,0,.2,1)}@media (max-width: 768px){.audio-player{bottom:.5rem;right:.5rem}.vinyl-record{width:120px;height:120px}.track-info{font-size:.8rem}}@media (max-width: 480px){.vinyl-record{width:100px;height:100px}.vinyl-record:after{width:20px;height:20px}}.audio-player:active{cursor:grabbing}.quote{position:relative;text-align:center;padding:1rem;max-width:800px;width:90%;margin:0 auto}.quote-text{font-size:1.5rem;font-weight:300;line-height:1.5;margin-bottom:1rem;color:var(--color-secondary);letter-spacing:.5px;font-family:Georgia,serif}.quote-author{font-size:1rem;color:var(--color-primary);font-style:italic;opacity:.9;letter-spacing:1px}.dark-mode .quote-text{color:var(--color-text-dark)}@media (max-width: 768px){.quote{padding:.5rem;margin-top:1rem}.quote-text{font-size:1.1rem;line-height:1.4;margin-bottom:.5rem}.quote-author{font-size:.9rem}}.theme-toggle{position:fixed;top:1rem;right:1rem;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--color-surface-dark);border:none;cursor:pointer;z-index:1000;transition:all var(--transition-speed);color:var(--color-primary);border-radius:50%;min-width:44px;min-height:44px;padding:10px}.theme-toggle:hover{transform:scale(1.1) rotate(10deg);color:var(--color-primary-dark)}body.dark-mode .theme-toggle{background:var(--color-surface-dark)}@media (max-width: 768px){.theme-toggle{top:.5rem;right:.5rem;width:2.5rem;height:2.5rem;font-size:1.2rem}}.loading-container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100px;text-align:center;padding:2rem}.loading-text{font-size:1.5rem;color:var(--color-text-light);margin-bottom:.5rem;opacity:.8;text-align:center;width:100%;max-width:600px}.dark-mode .loading-text{color:var(--color-text-dark)}.loading-dots{display:inline-block;text-align:center}.loading-dots span{animation:dots 1.5s infinite;font-size:2rem;margin-right:5px;display:inline-block}.loading-dots span:nth-child(2){animation-delay:.5s}.loading-dots span:nth-child(3){animation-delay:1s}@keyframes dots{0%,20%{opacity:0;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}80%,to{opacity:0;transform:translateY(0)}}.install-button{position:fixed;top:1rem;right:5rem;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--color-surface-dark);border:none;border-radius:50%;cursor:pointer;z-index:1000;transition:all .3s ease;color:var(--color-primary);min-width:44px;min-height:44px;padding:10px}.install-button:hover{transform:scale(1.1);color:var(--color-primary-dark)}@media (max-width: 768px){.install-button{top:.5rem;right:4rem;width:2.5rem;height:2.5rem;font-size:1.2rem}}.app{min-height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;background-color:var(--color-background-light);padding:1rem;overflow-x:hidden;overflow-y:auto}.app.dark-mode{background-color:var(--color-background-dark)}.content-wrapper{width:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:1rem;position:relative}.main-section{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3rem;width:100%;min-height:100vh;position:relative;padding-bottom:150px}.song-name{color:var(--color-secondary);font-size:1.1rem;margin-top:.5rem;text-align:center;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.1);background-color:#fffc;padding:.5rem 1rem;border-radius:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.dark-mode .song-name{color:var(--color-text-dark);background-color:#0000004d}@media (max-width: 768px){.app{padding:1rem}.content-wrapper{padding:1rem;gap:1.5rem}.main-section{gap:2rem;padding:3rem 1rem}}@media (max-width: 480px){.content-wrapper{padding:1rem}.main-section{gap:1.5rem;padding:2rem 1rem}}.loading-container{position:absolute;top:0;left:0;right:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--color-background-light)}.dark-mode .loading-container{background:var(--color-background-dark)}.quote-section{position:relative;width:100%;display:flex;justify-content:center;align-items:center;text-align:center}body{margin:0;padding:0;min-height:100vh;overflow-x:hidden}#root{min-height:100vh;overflow:hidden}:root{--color-primary: #7F5AF0;--color-primary-dark: #6B47D6;--color-secondary: #72757E;--color-background-light: #F4F6FA;--color-text-light: #2B2C34;--color-surface-light: #FFFFFF;--color-background-dark: #16161A;--color-text-dark: #FFFFFE;--color-surface-dark: #242629;--color-success: #2CB67D;--color-error: #FF6B6B;--color-warning: #FF8E3C;--gradient-primary: linear-gradient(135deg, #7F5AF0, #6B47D6);--gradient-surface-light: linear-gradient(145deg, #FFFFFF, #F8FAFF);--gradient-surface-dark: linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0));--transition-speed: .3s;--shadow-light: 0 4px 20px rgba(127, 90, 240, .1);--shadow-dark: 0 4px 20px rgba(0, 0, 0, .2);color-scheme:dark}*{margin:0;padding:0;box-sizing:border-box}html,body{overflow-x:hidden;width:100%;height:100%}#root{min-height:100%;width:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#121212;color:#fff;transition:background-color var(--transition-speed),color var(--transition-speed)}body.dark-mode{background-color:var(--color-background-dark);color:var(--color-text-dark)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}@keyframes flip{0%{transform:rotateX(0)}to{transform:rotateX(180deg)}}.flip-animation{animation:flip .6s cubic-bezier(.455,.03,.515,.955) both}