.home{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem}@media (max-width: 500px){#home{padding:.5rem}}.clock{font-family:Tahoma,Verdana,Segoe,sans-serif;opacity:0;transition:opacity 2s ease-in-out}.clock.visible{opacity:1}.clock-time{margin:0;padding:0;font-size:clamp(6rem,15vw,12rem);color:var(--text-color);letter-spacing:1px}.quote{min-height:5em;max-width:500px;font-size:clamp(1rem,3vw,1.25rem);opacity:0;transition:opacity 2s ease-in-out;margin-bottom:1.5rem;font-family:Tahoma,Verdana,Segoe,sans-serif;color:var(--text-color)}.quote.visible{opacity:1}.initial-timer-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:140px;background-color:var(--background-color);color:var(--text-color);transition:background-color .5s ease,color .5s ease}.initial-timer-screen-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;border-radius:15px;transition:background-color .2s ease-out,transform .1s ease-out;cursor:pointer;margin-bottom:40px}.initial-timer-screen-content:hover{background-color:var(--initial-screen-content-hover)}.initiate-image{max-width:200px}.initiate-text{font-size:clamp(1.5rem,5vw,1.8rem);color:var(--initial-text-color);font-family:Tahoma,Verdana,Segoe,sans-serif;line-height:1.3;transition:color .5s ease}.info-text{padding:0 20px;font-size:clamp(.9rem,3vw,1.2rem);max-width:500px;font-family:Tahoma,Verdana,Segoe,sans-serif;color:var(--info-text-color);line-height:1.6;text-align:center;transition:color .5s ease}@keyframes timerFadeIn{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.timer-content{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;opacity:0;transition:opacity 1s ease-out,transform 1s ease-out}.timer-content.fade-in{animation:timerFadeIn 1s ease-out forwards;opacity:1;transform:translateY(0)}.timer-container{height:calc(100vh - 80px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.timer-display{font-size:clamp(6rem,15vw,12rem);font-family:Tahoma,Verdana,Segoe,sans-serif;color:var(--text-color);transition:color .5s ease}.button-row{display:flex;gap:1rem;justify-content:center;margin-top:1.5rem}.start-button,.restart-button,.break-button{padding:.75rem 1.5rem;margin:.5rem;font-size:.9rem;border:none;border-radius:8px;cursor:pointer;color:#fff;transition:background-color .3s ease}.start-button{background-color:var(--button-start-bg)}.restart-button{background-color:var(--button-restart-bg)}.start-button:hover{background-color:var(--button-start-hover-bg)}.restart-button:hover{background-color:var(--button-restart-hover-bg)}.break-button{background-color:var(--button-break-bg)}.break-button:hover{background-color:var(--button-break-hover-bg)}.congrats-text{font-size:2rem;color:var(--congrats-text-color);margin-bottom:1rem;max-width:500px;transition:color .5s ease}.guided-access-btn{font-size:.9rem;padding:.4rem .9rem;background:var(--button-guide-bg);color:var(--input-text-color);border:none;border-radius:6px;cursor:pointer;transition:background-color .3s ease,color .3s ease}.guided-access-btn:hover{background:var(--button-guide-hover-bg)}.guided-access-overlay{position:fixed;display:flex;justify-content:center;align-items:center;opacity:0;animation:overlayFadeIn .3s ease-out forwards}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}@keyframes dialogPopIn{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.guided-access-dialog{background:var(--container-bg);width:95%;max-width:500px;min-width:300px;margin:20px;padding:1.5rem 2rem;border-radius:12px;box-shadow:0 20px 25px #00000040;text-align:center;font-size:clamp(.95rem,3.5vw,1.05rem);line-height:1.6;color:var(--text-color);opacity:0;animation:dialogPopIn .4s cubic-bezier(.68,-.55,.27,1.55) forwards;transition:background-color .5s ease,color .5s ease}.close-btn{margin-top:1.5rem;padding:.6rem 1.5rem;background:var(--button-start-bg);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;transition:background-color .3s ease}.close-btn:hover{background:var(--button-start-hover-bg);transform:translateY(-1px)}.close-btn:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn 1s ease-out forwards}@keyframes taskEnter{0%{opacity:0;transform:translateY(20px);max-height:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}to{opacity:1;transform:translateY(0);max-height:200px;padding-top:12px;padding-bottom:12px;margin-top:0;margin-bottom:10px}}@keyframes taskExit{0%{opacity:1;transform:translateY(0);max-height:200px;padding-top:12px;padding-bottom:12px;margin-top:0;margin-bottom:10px}to{opacity:0;transform:translateY(-20px);max-height:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}}.task-entering{animation:taskEnter .7s ease-out forwards}.task-exiting{animation:taskExit .7s ease-out forwards}.goals-container{width:80vw;max-width:600px;padding:20px;background-color:var(--container-bg);border-radius:12px;box-shadow:0 0 25px #0003;text-align:center;transition:background-color .5s ease,box-shadow .5s ease}h1{margin-bottom:30px;font-size:2rem;color:var(--goals-h1-color);font-family:Tahoma,Verdana,Segoe,sans-serif;transition:color .5s ease}.todo-form{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.todo-input,.edit-input{flex:1;padding:8px 12px;border:1px solid var(--input-border-color);border-radius:6px;font-size:1rem;font-family:Tahoma,Verdana,Segoe,sans-serif;background-color:var(--todo-item-bg);color:var(--input-text-color);transition:background-color .5s ease,border-color .5s ease,color .5s ease}.todo-input::placeholder,.edit-input::placeholder{color:var(--input-placeholder-color);transition:color .5s ease}.todo-btn,.edit-btn,.complete-btn,.delete-btn,.save-btn{padding:7px 13px;margin-left:6px;font-size:clamp(.5rem,3vw,.9rem);border:none;border-radius:6px;cursor:pointer}.todo-btn{background-color:var(--todo-btn-bg);color:#fff;font-family:Tahoma,Verdana,Segoe,sans-serif}.todo-btn:hover{background-color:var(--todo-btn-hover-bg)}.edit-btn{background-color:var(--edit-btn-bg)}.complete-btn{background-color:var(--complete-btn-bg);color:#fff}.delete-btn{background-color:var(--delete-btn-bg);color:#fff}.save-btn{background-color:var(--save-btn-bg);color:#fff;font-family:Tahoma,Verdana,Segoe,sans-serif}.save-btn:hover{background-color:var(--save-btn-hover-bg)}ul{list-style-type:none;padding:0}li{background-color:var(--todo-item-bg);margin-bottom:10px;padding:12px;border-radius:8px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;transition:all .7s ease-out,background-color .5s ease;overflow:hidden}.li.complete{background-color:var(--todo-item-completed-bg)}.text{flex:1;text-align:left;font-family:Tahoma,Verdana,Segoe,sans-serif;font-size:clamp(.9rem,3vw,1rem);color:var(--text-color);transition:color .5s ease}.text-completed{flex:1;text-align:left;text-decoration:line-through;color:var(--todo-text-completed-color);font-family:Tahoma,Verdana,Segoe,sans-serif;font-size:clamp(.9rem,3vw,1rem);transition:color .5s ease}:root{--background-color: #f7f7f7;--text-color: #000000;--nav-background: #f3f4f6;--nav-active-line: #000000;--button-start-bg: #10b981;--button-start-hover-bg: #45a049;--button-restart-bg: #ef4444;--button-restart-hover-bg: #700505;--button-break-bg: #26a8e4;--button-break-hover-bg: #3384aa;--button-guide-bg: #e2e8f0;--button-guide-hover-bg: #cbd5e1;--container-bg: #ffffff;--border-color: #ccc;--initial-screen-content-hover: rgba(48, 48, 48, .05);--initial-text-color: #71bae4;--info-text-color: #4d4d4d;--congrats-text-color: #10b981;--todo-item-bg: #f1f1f1;--todo-item-completed-bg: #c2c2c2;--todo-text-completed-color: gray;--input-border-color: #ccc;--input-text-color: #000000;--input-placeholder-color: #666;--goals-h1-color: #000000;--todo-btn-bg: #0c007c;--todo-btn-hover-bg: #0a015c;--edit-btn-bg: #ffc107;--complete-btn-bg: #28a745;--delete-btn-bg: #dc3545;--save-btn-bg: #17a2b8;--save-btn-hover-bg: #0c6977;--theme-btn: #555;--theme-btn-hover: #383838}html[data-theme=dark]{--background-color: #1a1a1a;--text-color: #f0f0f0;--nav-background: #555;--nav-active-line: #e0e0e0;--button-start-bg: #0e8a5a;--button-start-hover-bg: #0a6b46;--button-restart-bg: #b52b2b;--button-restart-hover-bg: #801f1f;--button-break-bg: #1f8ad1;--button-break-hover-bg: #1a6da7;--button-guide-bg: #3a3a3a;--button-guide-hover-bg: #5a5a5a;--container-bg: #2a2a2a;--border-color: #555;--initial-screen-content-hover: rgba(255, 255, 255, .1);--initial-text-color: #8bbff7;--info-text-color: #b0b0b0;--congrats-text-color: #82e0aa;--todo-item-bg: #3a3a3a;--todo-item-completed-bg: #555;--todo-text-completed-color: #aaa;--input-border-color: #555;--input-text-color: #f0f0f0;--input-placeholder-color: #ccc;--goals-h1-color: #f0f0f0;--todo-btn-bg: #09005c;--todo-btn-hover-bg: #070042;--edit-btn-bg: #d19e07;--complete-btn-bg: #208736;--delete-btn-bg: #b32a3a;--save-btn-bg: #138295;--save-btn-hover-bg: #094e5a;--theme-btn: #555;--theme-btn-hover: #383838}body{margin:0;padding:0;min-height:100vh;display:flex;justify-content:center;align-items:center;font-family:Tahoma,Verdana,Segoe,sans-serif;background-color:var(--background-color);color:var(--text-color);flex-direction:column;transition:background-color .5s ease,color .5s ease}html{height:100%;overflow:hidden;transition:background-color .5s ease,color .5s ease}.app-container{transition:background-color .5s ease,color .5s ease}.bottom-nav{position:fixed;bottom:0;left:0;width:100%;background-color:var(--nav-background);display:flex;justify-content:space-around;padding:1rem 0 .25rem;border-top:1px solid var(--border-color);transition:background-color .5s ease,border-color .5s ease}.nav-icon{width:25px;height:25px;object-fit:contain}.bottom-nav a.active{border-bottom:2px solid var(--nav-active-line);transform:translateY(-2px);padding-bottom:3px}.bottom-nav a:hover{transform:translateY(-2px)}.theme-toggle-button{position:absolute;top:40px;right:40px;padding:8px 12px;border:none;border-radius:5px;background-color:var(--theme-btn);color:var(--text-color);cursor:pointer;font-size:.9rem;z-index:1000;transition:background-color .3s ease,color .3s ease}.theme-toggle-button:hover{background-color:var(--theme-btn-hover)}
