@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap";*{box-sizing:border-box}:root{--retro-orange: #ff6b35;--retro-rust: #d84315;--retro-yellow: #ffd23f;--retro-brown: #8b4513;--retro-cream: #fff8e7;--retro-olive: #9b870c;--retro-terracotta: #e07a5f;--retro-beige: #f4e4c1;font-family:Fredoka,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6;font-weight:400;color:var(--retro-brown);background:linear-gradient(135deg,var(--retro-cream) 0%,var(--retro-beige) 100%);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{min-height:100vh}button{font-family:inherit;cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55)}button:hover{transform:translateY(-3px) scale(1.02)}button:active{transform:translateY(-1px) scale(.98)}button:focus-visible{outline:3px solid var(--retro-orange);outline-offset:3px}.timer-container{display:flex;flex-direction:column;align-items:center;gap:2.5rem;padding:2rem;max-width:600px;margin:0 auto}.mode-selector{display:flex;gap:.75rem;background:linear-gradient(135deg,var(--retro-beige),var(--retro-cream));padding:.75rem;border-radius:50px;box-shadow:0 6px 20px #8b451326}.mode-selector button{padding:1rem 2rem;border:none;background:transparent;border-radius:50px;cursor:pointer;font-size:1.3rem;font-weight:500;color:var(--retro-brown);transition:all .3s cubic-bezier(.68,-.55,.265,1.55)}.mode-selector button:hover{background:#ff6b3526;transform:scale(1.05)}.mode-selector button.active{background:var(--retro-orange);color:var(--retro-cream);box-shadow:0 4px 12px #ff6b354d;font-weight:600}.timer-display{position:relative;display:flex;justify-content:center;align-items:center}.progress-ring{position:relative;width:320px;height:320px;display:flex;justify-content:center;align-items:center;background:var(--retro-cream);border-radius:50%;box-shadow:0 10px 50px #8b451333;padding:10px}.progress-ring svg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);transform:rotate(-90deg);filter:drop-shadow(0 2px 2px rgba(255,107,53,.3))}.time-text{position:relative;z-index:1;font-size:5.5rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--retro-rust);text-shadow:3px 3px 0px rgba(255,210,63,.3)}.timer-controls{display:flex;gap:1rem}.btn-primary{padding:1.5rem 4rem;font-size:1.8rem;font-weight:700;border:none;border-radius:50px;background:linear-gradient(135deg,var(--retro-orange),var(--retro-rust));color:var(--retro-cream);cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 6px 20px #d843154d;text-transform:uppercase;letter-spacing:2px}.btn-primary:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 25px #d8431566}.btn-primary:active{transform:translateY(-2px) scale(1.02)}.btn-secondary{padding:1.5rem 3rem;font-size:1.4rem;font-weight:600;border:3px solid var(--retro-orange);border-radius:50px;background:var(--retro-cream);color:var(--retro-orange);cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55)}.btn-secondary:hover{background:var(--retro-orange);color:var(--retro-cream);transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px #ff6b354d}.session-info{text-align:center;font-size:1.6rem;color:var(--retro-brown);background:var(--retro-cream);padding:1.25rem 2.5rem;border-radius:50px;box-shadow:0 4px 15px #8b451326;font-weight:500}.session-info p{margin:0}@media(max-width:768px){.timer-container{gap:2rem;padding:1rem}.mode-selector{gap:.5rem;padding:.5rem}.mode-selector button{padding:.75rem 1.5rem;font-size:1.1rem}.progress-ring{width:280px;height:280px}.time-text{font-size:4.5rem}.btn-primary{padding:1.25rem 3rem;font-size:1.5rem;letter-spacing:1px}.btn-secondary{padding:1.25rem 2.5rem;font-size:1.2rem}.session-info{font-size:1.3rem;padding:1rem 2rem}}@media(max-width:480px){.timer-container{gap:1.5rem;padding:.5rem}.mode-selector{flex-direction:column;gap:.5rem;padding:.5rem;width:100%;max-width:280px}.mode-selector button{padding:.75rem 1rem;font-size:1rem;width:100%}.progress-ring{width:240px;height:240px}.time-text{font-size:3.5rem}.timer-controls{flex-direction:column;width:100%;max-width:280px;gap:.75rem}.btn-primary{padding:1rem 2rem;font-size:1.3rem;width:100%}.btn-secondary{padding:1rem 2rem;font-size:1.1rem;width:100%}.session-info{font-size:1.1rem;padding:.9rem 1.5rem}}.history-container{max-width:1200px;margin:0 auto;padding:2rem}.history-container h2{text-align:center;margin-bottom:2.5rem;color:var(--retro-rust);font-size:3.5rem;font-weight:700;text-shadow:3px 3px 0px rgba(255,210,63,.3)}.stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-bottom:3rem}.stat-card{background:linear-gradient(135deg,var(--retro-cream),var(--retro-beige));border-radius:30px;padding:2rem 1.5rem;box-shadow:0 8px 20px #8b451326;text-align:center;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);border:3px solid transparent}.stat-card:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 12px 30px #8b451340}.stat-card.today{border:3px solid var(--retro-orange);background:linear-gradient(135deg,var(--retro-yellow),var(--retro-beige))}.stat-card h3{margin:0 0 1rem;font-size:1.2rem;text-transform:uppercase;color:var(--retro-brown);font-weight:600;letter-spacing:1px}.stat-value{font-size:4.5rem;font-weight:700;color:var(--retro-rust);margin-bottom:.5rem;text-shadow:3px 3px 0px rgba(255,210,63,.2)}.stat-label{font-size:1.4rem;color:var(--retro-brown);margin-bottom:.5rem;font-weight:500}.stat-subtext{font-size:1.2rem;color:var(--retro-olive);font-weight:400}.chart-controls{display:flex;justify-content:center;align-items:center;gap:1rem;margin:2rem 0 3rem;background:var(--retro-cream);padding:1rem 2rem;border-radius:50px;max-width:300px;margin-left:auto;margin-right:auto;box-shadow:0 4px 15px #8b451326}.chart-controls label{font-weight:600;color:var(--retro-brown);font-size:1.4rem}.chart-controls select{padding:.75rem 1.5rem;border:3px solid var(--retro-orange);border-radius:50px;font-size:1.3rem;cursor:pointer;background:var(--retro-beige);color:var(--retro-brown);font-weight:600;font-family:Fredoka,sans-serif;transition:all .3s cubic-bezier(.68,-.55,.265,1.55)}.chart-controls select:hover{transform:scale(1.05);background:var(--retro-orange);color:var(--retro-cream)}.chart-container{background:linear-gradient(135deg,var(--retro-cream),var(--retro-beige));border-radius:30px;padding:2.5rem;margin-bottom:2rem;box-shadow:0 8px 20px #8b451326;border:3px solid rgba(255,107,53,.2)}.chart-container h3{margin:0 0 2rem;color:var(--retro-rust);font-size:2.2rem;font-weight:700;text-align:center}.history-actions{display:flex;justify-content:center;gap:1.5rem;margin-top:3rem}.btn-secondary{padding:1.25rem 2.5rem;border:3px solid var(--retro-olive);border-radius:50px;background:var(--retro-cream);color:var(--retro-olive);font-size:1.4rem;cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);font-weight:600;box-shadow:0 4px 15px #9b870c33}.btn-secondary:hover{background:var(--retro-olive);color:var(--retro-cream);transform:translateY(-4px) scale(1.05);box-shadow:0 6px 20px #9b870c4d}.btn-danger{padding:1.25rem 2.5rem;border:none;border-radius:50px;background:linear-gradient(135deg,var(--retro-rust),#cc0000);color:var(--retro-cream);font-size:1.4rem;cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);font-weight:600;box-shadow:0 4px 15px #d843154d}.btn-danger:hover{background:linear-gradient(135deg,#c00,#900);transform:translateY(-4px) scale(1.05);box-shadow:0 6px 20px #d8431566}@media(max-width:768px){.history-container{padding:1rem}.history-container h2{font-size:2.5rem;margin-bottom:1.5rem}.stats-cards{grid-template-columns:1fr;gap:1rem;margin-bottom:2rem}.stat-card{padding:1.5rem 1rem}.stat-card h3{font-size:1rem}.stat-value{font-size:3.5rem}.stat-label{font-size:1.2rem}.stat-subtext{font-size:1rem}.chart-controls{padding:.75rem 1.5rem;max-width:100%}.chart-controls label{font-size:1.2rem}.chart-controls select{padding:.6rem 1.2rem;font-size:1.1rem}.chart-container{padding:1.5rem;margin-bottom:1.5rem}.chart-container h3{font-size:1.8rem;margin-bottom:1.5rem}.history-actions{flex-direction:column;gap:1rem;margin-top:2rem}.btn-secondary,.btn-danger{padding:1rem 2rem;font-size:1.2rem;width:100%}}@media(max-width:480px){.history-container{padding:.5rem}.history-container h2{font-size:2rem;margin-bottom:1rem}.stat-card{padding:1.25rem .75rem;border-radius:20px}.stat-card h3{font-size:.9rem}.stat-value{font-size:3rem}.stat-label{font-size:1.1rem}.stat-subtext{font-size:.95rem}.chart-controls{padding:.6rem 1rem;flex-direction:column;gap:.5rem}.chart-controls label{font-size:1.1rem}.chart-controls select{padding:.5rem 1rem;font-size:1rem;width:100%}.chart-container{padding:1rem;border-radius:20px}.chart-container h3{font-size:1.5rem;margin-bottom:1rem}.btn-secondary,.btn-danger{padding:.9rem 1.5rem;font-size:1.1rem}}.settings-container{max-width:800px;margin:0 auto;padding:2rem}.settings-container h2{text-align:center;margin-bottom:2.5rem;color:var(--retro-rust);font-size:3.5rem;font-weight:700;text-shadow:3px 3px 0px rgba(255,210,63,.3)}.settings-section{display:flex;flex-direction:column;gap:2rem}.setting-item{background:linear-gradient(135deg,var(--retro-cream),var(--retro-beige));border-radius:30px;padding:2rem;box-shadow:0 8px 20px #8b451326;border:3px solid rgba(255,107,53,.2)}.setting-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.setting-item h3{margin:0 0 .5rem;color:var(--retro-rust);font-size:2rem;font-weight:700}.setting-description{margin:0 0 1.5rem;color:var(--retro-brown);font-size:1.2rem;opacity:.8}.toggle-switch{position:relative;width:80px;height:40px;display:inline-block}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:50px;box-shadow:inset 0 2px 4px #0003}.toggle-slider:before{position:absolute;content:"";height:32px;width:32px;left:4px;bottom:4px;background:#fff;transition:.4s;border-radius:50%;box-shadow:0 2px 6px #0003}.toggle-switch input:checked+.toggle-slider{background:linear-gradient(135deg,var(--retro-orange),var(--retro-rust))}.toggle-switch input:checked+.toggle-slider:before{transform:translate(40px)}.sound-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.sound-option{position:relative;display:flex;flex-direction:column;padding:1.5rem 1rem;border:3px solid var(--retro-beige);border-radius:20px;background:#fff;cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);text-align:center}.sound-option input{position:absolute;opacity:0}.sound-option:hover{transform:translateY(-4px);border-color:var(--retro-orange);box-shadow:0 6px 20px #ff6b354d}.sound-option.selected{border-color:var(--retro-orange);background:linear-gradient(135deg,var(--retro-yellow),var(--retro-beige));box-shadow:0 6px 20px #ff6b354d}.sound-label{font-size:1.3rem;font-weight:600;color:var(--retro-rust);margin-bottom:.5rem}.sound-desc{font-size:1rem;color:var(--retro-brown);opacity:.8}.volume-control{display:flex;align-items:center;gap:1rem}.volume-icon{font-size:1.8rem}.volume-slider{flex:1;height:12px;border-radius:50px;background:var(--retro-beige);outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--retro-orange),var(--retro-rust));cursor:pointer;box-shadow:0 4px 12px #ff6b3566;transition:all .3s ease}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 6px 16px #ff6b3580}.volume-slider::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--retro-orange),var(--retro-rust));cursor:pointer;border:none;box-shadow:0 4px 12px #ff6b3566;transition:all .3s ease}.volume-slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 6px 16px #ff6b3580}.volume-value{font-size:1.3rem;font-weight:600;color:var(--retro-rust);min-width:60px;text-align:right}.test-sound-btn{width:100%;padding:1.25rem 2.5rem;font-size:1.4rem;font-weight:600;border:3px solid var(--retro-olive);border-radius:50px;background:var(--retro-cream);color:var(--retro-olive);cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 4px 15px #9b870c33}.test-sound-btn:hover{background:var(--retro-olive);color:var(--retro-cream);transform:translateY(-4px) scale(1.02);box-shadow:0 6px 20px #9b870c4d}@media(max-width:768px){.settings-container{padding:1rem}.settings-container h2{font-size:2.5rem;margin-bottom:1.5rem}.settings-section{gap:1.5rem}.setting-item{padding:1.5rem;border-radius:20px}.setting-item h3{font-size:1.6rem}.setting-description{font-size:1.1rem;margin-bottom:1rem}.toggle-switch{width:70px;height:36px}.toggle-slider:before{height:28px;width:28px}.toggle-switch input:checked+.toggle-slider:before{transform:translate(34px)}.sound-options{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.75rem}.sound-option{padding:1.25rem .75rem}.sound-label{font-size:1.1rem}.sound-desc{font-size:.9rem}.volume-icon{font-size:1.5rem}.volume-value{font-size:1.1rem;min-width:50px}.test-sound-btn{padding:1rem 2rem;font-size:1.2rem}}@media(max-width:480px){.settings-container{padding:.5rem}.settings-container h2{font-size:2rem;margin-bottom:1rem}.settings-section{gap:1rem}.setting-item{padding:1.25rem}.setting-header{flex-direction:column;align-items:flex-start;gap:1rem}.setting-item h3{font-size:1.4rem;margin-bottom:0}.setting-description{font-size:1rem}.toggle-switch{width:60px;height:32px}.toggle-slider:before{height:24px;width:24px}.toggle-switch input:checked+.toggle-slider:before{transform:translate(28px)}.sound-options{grid-template-columns:1fr;gap:.75rem}.sound-option{padding:1rem}.sound-label{font-size:1.2rem}.sound-desc{font-size:.95rem}.volume-control{gap:.75rem}.volume-icon{font-size:1.3rem}.volume-slider::-webkit-slider-thumb{width:26px;height:26px}.volume-slider::-moz-range-thumb{width:26px;height:26px}.volume-value{font-size:1rem;min-width:45px}.test-sound-btn{padding:.9rem 1.5rem;font-size:1.1rem}}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,var(--retro-orange) 0%,var(--retro-terracotta) 100%);box-shadow:0 8px 20px #8b45134d;padding:2rem 2rem 1.5rem;margin-bottom:2rem;border-radius:0 0 40px 40px;position:relative}.app-header:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,var(--retro-yellow) 0px,var(--retro-yellow) 20px,var(--retro-rust) 20px,var(--retro-rust) 40px)}.app-header h1{margin:0 0 1.5rem;text-align:center;color:var(--retro-cream);font-size:4rem;font-weight:700;text-shadow:4px 4px 0px rgba(139,69,19,.3);letter-spacing:2px}.tab-navigation{display:flex;justify-content:center;gap:.75rem;padding:.5rem;background:#fff8e733;border-radius:50px;max-width:600px;margin:0 auto}.tab-navigation button{padding:1rem 2.5rem;border:none;background:transparent;font-size:1.4rem;cursor:pointer;border-radius:50px;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);color:var(--retro-cream);font-weight:500}.tab-navigation button:hover{background:#fff8e74d;transform:translateY(-2px)}.tab-navigation button.active{background:var(--retro-cream);color:var(--retro-orange);font-weight:600;box-shadow:0 4px 12px #8b451333}.app-main{flex:1;padding:1rem;position:relative}.tab-content{display:none}.tab-content.active{display:block}@media(max-width:768px){.app-header{padding:1.5rem 1rem 1rem;margin-bottom:1.5rem;border-radius:0 0 25px 25px}.app-header h1{font-size:2.5rem;margin-bottom:1rem;letter-spacing:1px;text-shadow:2px 2px 0px rgba(139,69,19,.3)}.tab-navigation{gap:.4rem;padding:.4rem;max-width:100%}.tab-navigation button{padding:.7rem 1.2rem;font-size:1rem;white-space:nowrap}.app-main{padding:.5rem}}@media(max-width:480px){.app-header h1{font-size:2rem}.tab-navigation{gap:.3rem;padding:.3rem}.tab-navigation button{padding:.6rem .9rem;font-size:.9rem}}