*{margin:0;padding:0;box-sizing:border-box}body{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;font-family:Patrick Hand SC,cursive;font-weight:400;font-style:normal}#root{width:100vw;height:100vh}.pomfy{font-family:Patrick Hand SC,cursive;font-size:clamp(2rem,2vw,4rem);letter-spacing:.1rem;font-weight:200}.bg-switcher{position:fixed;bottom:5%;left:50%;transform:translate(-50%);background-color:#0000004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:10px;display:flex;align-items:center;gap:1rem;z-index:1000}.arrow-switch-left,.arrow-switch-right{background:none;border:none;cursor:pointer;color:#fff;padding:0;flex-shrink:0}.dots{display:flex;gap:1rem}.dot{width:.5rem;height:.5rem;border-radius:50%;background-color:#fff;opacity:.5;border:none;cursor:pointer;padding:0}.dot:hover{transition:opacity .3s ease;width:.6rem;height:.6rem;opacity:1}.dot.active{opacity:1}.card{background:#00000073;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:1.5rem;align-content:center;box-shadow:0 0 10px #00000080}.todo-wrapper{display:flex;flex-direction:column;height:100%;max-height:clamp(17rem,5vh,30rem)}.todo-list{flex:1;overflow-y:auto;padding:0 0 0 .5rem;margin-top:1rem;scrollbar-width:thin;scrollbar-color:#e26f6f rgb(0,0,0,.2);min-height:8rem}.todo-item{display:flex;justify-content:space-between;align-items:center;padding:0 .2rem .2rem 0;gap:.5rem}.checkbox-container{display:flex;align-items:center;gap:.5rem;flex:1}.todo-text{font-family:Patrick Hand,cursive;font-size:clamp(.7rem,2vw,1rem);color:#f5f5f5;font-weight:400;cursor:pointer;word-break:break-word}.todo-text.completed{text-decoration:line-through;color:#f5f5f5}h2{font-family:kdam thmor pro,sans-serif;font-size:clamp(.5rem,2vw,1rem);color:#f5f5f5;text-align:center;margin:.5rem 0 .3rem}.add-wrapper{display:flex;justify-content:center;align-items:center;padding:0 0 .5rem;position:relative;width:clamp (10rem,5vw,20rem)}.my-line{border:0;height:1px;background:#f5f5f5;margin-bottom:1rem}.input-box{width:100%;height:clamp(1.5rem,5vw,2rem);border-radius:1rem;background-color:#0003;border:1px solid #f5f5f5;color:#f5f5f5;outline:none;box-shadow:0 0 10px #0000004d;font-family:"Patrick Hand ",cursive;font-weight:400;font-style:normal;padding-left:1rem;font-size:clamp(.5rem,2vw,1rem);position:relative;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .3s ease;padding:0 0 0 1rem}.edit-form{display:flex;justify-content:center;align-items:center;padding:0 0 .5rem;position:relative;width:clamp (10rem,5vw,20rem)}.edit-box{width:100%;font-family:Patrick Hand,cursive;padding:0 1rem;height:clamp(1rem,5vw,1.5rem);border-radius:.4rem;background-color:#0003;border:1px solid #f5f5f5;color:#f5f5f5;outline:none;box-shadow:0 0 10px #0000004d}.update-btn.inside{background-color:transparent;border:none;color:#f5f5f5;cursor:pointer;transition:all .3s ease;filter:drop-shadow(0 0 5px rgba(0,0,0,.7));position:absolute;right:.35rem;top:50%;transform:translateY(-55%);border-radius:50%}.todo-actions{display:flex;gap:.2rem;margin:0 0 0 1.5rem}.edit,.delete{color:#f5f5f5}.todo-actions svg{color:#fff;cursor:pointer;opacity:.7}.todo-actions svg:hover{opacity:1}.add-btn.inside{background-color:transparent;border:none;position:absolute;border-radius:50%;right:.5rem;display:flex;justify-content:center;align-items:center;color:#fff;cursor:pointer;transition:all .3s ease;filter:drop-shadow(0 0 5px rgba(0,0,0,.7))}.timer{position:relative;justify-content:center;align-items:center}.minutes{font-family:Kdam Thmor Pro,sans-serif;font-weight:400;font-style:normal;color:#fff;font-size:clamp(2rem,6vw,4rem);width:100%;text-align:center;letter-spacing:.5rem}.hearts{display:flex;justify-content:center;align-items:center;gap:.3rem}.session-heart{filter:drop-shadow(0 0 2px rgb(0,0,0,.3));transition:fill .3s cubic-bezier(.4,0,.2,1)}@keyframes heartFill{0%{transform:scale(1)}50%{transform:scale(1.4)}to{transform:scale(1)}}.session-heart.filled{animation:heartFill .8s ease}.smc{display:flex;justify-content:space-between;width:100%;font-size:clamp(.75rem,2vw,1.5rem);gap:clamp(.5rem,2vw,1rem);color:#fff;text-align:center;padding:0 1rem 1rem}.mode{font-size:1rem}.sessions{font-family:Patrick Hand SC,cursive;font-weight:400;font-style:normal;color:#fff}.timer-content{transition:opacity .5s ease}.timer-content.hidden{opacity:0;pointer-events:none}.mode-change-overlay{position:absolute;inset:0;z-index:10;display:flex;padding-top:3px;justify-content:center;animation:fadeIn .8s ease-in-out}.mode-change-text{text-align:center}.mode-change-text h2{font-size:2rem;margin-bottom:0;color:#fff;animation:fadeIn .5s ease}.mode-change-text p{font-size:1rem;color:#fff;margin:0;padding:0;font-style:normal;animation:popIn .5s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.start-reset{display:flex;justify-content:center;margin:.5rem 2rem;gap:clamp(2rem,6vw,4rem)}.start,.reset{cursor:pointer;width:clamp(7rem,20vw,9rem);height:clamp(1.75rem,5vw,2rem);border:2px solid #d97878;border-radius:.9rem;background-color:#d97878;font-family:Patrick Hand SC,cursive;letter-spacing:1px;font-size:clamp(1rem,3vw,1.3rem);color:#fff;box-shadow:0 0 10px #0000004d}.pause{cursor:pointer;width:clamp(7rem,20vw,9rem);height:clamp(1.75rem,5vw,2rem);border:2px solid #d97878;border-radius:.9rem;background-color:transparent;font-family:Patrick Hand SC,cursive;letter-spacing:1px;font-size:clamp(1rem,3vw,1.3rem);color:#fff;box-shadow:0 0 10px #0000004d}.start:hover,.reset:hover,.pause:hover{transition:all .5s ease;transform:scale(1.05)}.container{position:fixed;right:.5rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;z-index:100;gap:clamp(1rem,5vw,2rem) width: fit-content;height:fit-content;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding-top:clamp(4rem,5vw,2rem);padding-left:clamp(.2rem,5vw,.4rem);padding-right:clamp(.2rem,5vw,.4rem);padding-bottom:clamp(4rem,5vw,2rem);border-radius:3rem;gap:clamp(3rem,5vw,6rem)}.menu-btn{width:clamp(1rem,10vw,2rem);height:clamp(1rem,10vw,2rem);background:transparent;border:none;color:#fff;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .3s ease;filter:drop-shadow(0 0 5px rgba(0,0,0,.7))}.menu-btn:hover{transform:scale(1.1)}