.off-canvas{position:fixed;top:0;right:0;width:70%;height:100%;background-color:#c9c5c5a3;box-shadow:-4px 0 8px #00000080;transform:translate(100%);transition:transform .3s ease;z-index:1001;display:flex;flex-direction:column}.off-canvas.open{transform:translate(0)}.off-canvas-header{display:flex;justify-content:flex-end;padding:5px;background-color:#000000e6}.close-btn{background:none;border:none;font-size:32px;font-weight:700;cursor:pointer;padding:5px 20px;color:#fff;border-radius:30px}.close-btn:hover{color:#c9c5c5a3}.close-btn:focus{outline:none}.off-canvas-body{display:flex;flex-direction:row;height:calc(100% - 50px)}.sidebar{width:20%;display:flex;flex-direction:column;gap:10px;padding:20px;background-color:#000000e6;border-right:2px solid #fbfbfb7e}.sidebar a{display:block;padding:10px 20px;text-decoration:none;color:#fff;border-radius:4px;transition:background-color .3s ease;font-size:14px}.sidebar a:hover{color:#cf1515;background-color:#333}.content{flex:1;padding:20px;background-color:#000000e6}.spotify-widget{padding:20px;background-color:#000000e6;border-radius:8px;box-shadow:0 4px 8px #00000080;overflow:hidden;margin-top:20px}.sidebar a svg{margin-right:8px;font-size:20px;color:#fff}.background-options{display:flex;flex-wrap:wrap;max-height:400px;overflow-y:auto}.background-item{margin:10px;text-align:center;width:150px}.background-option{width:150px;height:150px;background-size:cover;background-position:center;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.background-option:hover{opacity:.8;box-shadow:0 2px 12px #fff}.background-option:focus{outline:none}.background-name{color:#fff;margin-top:10px;font-size:14px}.information-content{font-family:Arial,sans-serif;font-weight:300;font-style:normal;color:#333;border-radius:8px;box-shadow:0 4px 8px #0003;overflow:hidden;padding:15px;background-color:#ffffffb3}.information-content h1,.information-content h3{font-family:Georgia,serif;color:#000;font-size:1.2em}.information-content p{line-height:1.4;margin-bottom:12px;font-size:.9em}.todo-container{background-color:#fcfcfc80;padding:20px;border-radius:15px}.button-add{padding:0;border:none;background:none;cursor:pointer;color:#fff;transition:color .3s,transform .2s}.button-add:hover{color:#54bb79;transform:scale(1.1)}.button-add:focus{outline:none}.task-input-container{display:flex;align-items:center;margin-bottom:20px}input[type=text]{width:calc(100% - 60px);padding:12px;border:1px solid #ddd;border-radius:8px;margin-right:10px;box-sizing:border-box;font-size:16px;outline:none;background-color:#ffffff80;transition:border-color .3s}input[type=text]:focus{box-shadow:0 0 0 2px #f003;outline:none}.button-edit,.button-delete{padding:0;border:none;background:none;cursor:pointer;font-size:18px;transition:color .3s,transform .2s}.button-edit{color:#28a745}.button-edit:hover{color:#218838;transform:scale(1.1)}.button-delete{color:#dc3545}.button-delete:hover{color:#c82333;transform:scale(1.1)}.button-save,.button-cancel{padding:0;border:none;background:none;cursor:pointer;font-size:24px;transition:color .3s,transform .2s}.button-save{color:#28a745}.button-save:hover{color:#218838;transform:scale(1.1)}.button-cancel{color:#dc3545}.button-cancel:hover{color:#c82333;transform:scale(1.1)}.button-cancel:focus{outline:none}.button-save:focus{outline:none}ul{list-style-type:none;padding:0;margin:10px;font-size:18px;cursor:pointer}li{padding:12px;margin-bottom:10px;border-radius:8px;background-color:#ffffff80;display:flex;align-items:center;justify-content:space-between;transition:background-color .3s}li:hover{background-color:#ffffffb3}li.completed{text-decoration:line-through;color:#a0a0a0}.task-buttons{display:flex;gap:8px}.edit-container{margin-top:20px;display:flex;align-items:center;justify-content:center}.edit-container input{width:calc(100% - 80px);margin-right:10px}.edit-container button{margin-right:10px}.button-edit:focus{outline:none}.button-delete:focus{outline:none}.button-finish{padding:0;border:none;background:none;cursor:pointer;font-size:24px;transition:color .3s,transform .2s;color:#007bff}.button-finish:hover{color:#0056b3;transform:scale(1.1)}.button-finish:focus{outline:none}.sounds-container{width:100%;max-width:300px;margin:0;border-radius:8px;box-shadow:0 4px 8px #0000001a}.sounds-title{font-size:25px;color:#fff}.controls{display:flex;flex-direction:column;gap:10px}.buttons-container{display:flex;gap:10px}.play-button{transform:scale(1.05);border-color:#565656;border:none;outline:none;padding:10px 40px;font-size:18px;border:2px solid #000000;border-radius:12px;background-color:#f6eeeeb6;color:#000;cursor:pointer;transition:background-color .3s ease}.play-button:hover{background-color:#000;color:#fff;transform:scale(1.05);border-color:#565656;outline:none}.play-button:focus{outline:none}.volume-control{display:flex;flex-direction:column;gap:10px}.volume-slider{width:100%}.sound-options{margin-top:10px}.form-check-label{display:flex;align-items:center;width:100%;padding:2px;background:transparent;margin-bottom:10px;font-size:1em}.form-check-input{margin-right:15px;width:18px;height:18px;cursor:pointer}.sound-icon{margin-left:10px;font-size:.9em}.quotes-content{font-family:Arial,sans-serif;color:#fff;border-radius:8px;overflow:hidden}.quotes-content h1{color:#fff}.quotes-content select{width:50%;padding:10px;border-radius:8px;border:1px solid #ddd;font-size:16px;margin-bottom:20px;font-weight:700;outline:none;background-color:#ffffff80;color:#000;cursor:pointer}.quotes-content select:focus{box-shadow:0 2px 8px #eef1f4;outline:none;cursor:pointer}.quote-display{font-size:18px;line-height:1.6}.icon{font-size:32px}.quote-input{display:flex;gap:10px;margin-top:20px;width:50%}.quote-input input{flex:1;padding:10px;border-radius:8px;border:1px solid #ddd;font-size:16px;background-color:#ffffff80;color:#000}.quote-input button{border:none;color:#ffffffba;font-size:16px;font-weight:700;padding:10px 40px;font-size:18px;border:2px solid #000000;border-radius:12px;background-color:#fff;color:#000;cursor:pointer;transition:background-color .3s ease}.quote-input button:hover{background-color:#000;color:#fff;transform:scale(1.05);border-color:#565656}.quote-input button:focus{outline:none}.track-page{display:flex;flex-direction:column;align-items:center;color:#fff}.track-header{text-align:center;margin-bottom:20px}.track-header h1,.track-header h4{margin:10px 0}.track-container{text-align:left;padding:20px;background-color:#000000b3;border-radius:10px;width:80%;max-width:600px;margin:auto}.track-input-group{margin-bottom:20px}.track-input-group h4,.track-input-group h5{margin:10px 0;text-align:left}.track-input{width:calc(100% - 22px);padding:10px;border:1px solid #ccc;border-radius:5px;font-size:16px;background-color:#ffffffb3;transition:background-color .3s ease,box-shadow .3s ease}.track-input:hover,.track-input:focus{background-color:#fff;box-shadow:0 4px 8px #ffa50080;outline:none}.track-container p{margin-top:10px;color:#ccc;font-size:14px}.start-now-button{display:block;margin:20px auto;padding:10px 20px;font-size:16px;color:#fff;background-color:#fec610;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease,box-shadow .3s ease}.start-now-button:hover{background-color:#fefeff;color:#000;box-shadow:0 4px 8px #ffa50080}.start-now-button:focus{outline:none}.time-container{margin-top:20px;display:flex;align-items:center}.time-button{width:50px;height:50px;background-color:transparent;color:#fec610;border:3px solid #fec610;border-radius:50%;font-size:24px;font-weight:bolder;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .3s ease,border-color .3s ease;margin:0 5px;padding:0}.time-button:hover{color:#fff;border-color:#fff}.time-button:focus{outline:none}.time-display{font-size:20px;margin:0 10px}.sessions-table{margin-top:20px}.sessions-table h3{font-size:24px;margin-bottom:10px;color:#fff}.sessions-table table{width:100%;border-collapse:collapse}.sessions-table th,.sessions-table td{border:1px solid #ffffff;padding:10px;text-align:center;color:#fff}.sessions-table th{background-color:#333;color:#fff}.sessions-table tr:nth-child(2n){background-color:#444}.sessions-table tr:nth-child(odd){background-color:#555}.chain-container{display:flex;flex-direction:column;padding:5px;gap:20px;width:100%;overflow-y:auto;max-height:500px}.description{font-size:15px;font-weight:700;text-align:center;padding:5px;margin-right:5px;background-color:#ffffffb3;border:1px solid #ddd;border-radius:5px}.month{font-weight:700;font-size:20px;text-align:center;margin:10px 0}.days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.day{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid #ffffff;cursor:pointer;font-size:14px;transition:background-color .3s,color .3s,transform .2s}.day:hover{transform:scale(1.1)}.day.completed{background-color:red;color:#fff;text-decoration:line-through}.support-container{font-family:Roboto,Arial,sans-serif;background-color:#ffffffb3;border-radius:8px;box-shadow:0 4px 8px #0003;padding:20px}h1{font-size:1.8em;color:#333;margin-bottom:15px}p{font-size:1em;color:#666;line-height:1.5;margin-bottom:15px}.version-info{margin-top:20px;border-top:1px solid #e0e0e0;padding-top:10px;font-size:.8em;color:#888}.discord-link{margin-top:20px;text-align:center}.discord-logo{width:120px;height:auto;border-radius:50%;margin-top:10px}.contact-support-button{display:block;padding:12px 20px;width:180px;background-color:#5865f2;color:#fff;border:none;border-radius:20px;font-size:14px;font-weight:700;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .3s ease,transform .3s ease,box-shadow .3s ease;margin-top:20px}.contact-support-button:hover{background-color:#4a54f1;transform:scale(1.05);box-shadow:0 4px 12px #0000004d}.contact-support-button:focus{outline:none}.social-media{display:flex;justify-content:center;gap:20px;margin-top:20px}.social-media a{color:#333;font-size:28px;transition:color .3s ease}.social-media a:hover{color:#5865f2}.button-container{position:fixed;bottom:20px;right:20px;display:flex;align-items:center;gap:10px;z-index:1001}.settings-btn{background-color:#fffc;border:none;cursor:pointer;box-shadow:0 4px 6px #0000001a;border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center}.settings-btn:hover{background-color:#ffffff4b}.settings-btn:focus{outline:none}.fullscreen-btn{background-color:#fffc;border:none;cursor:pointer;box-shadow:0 4px 6px #0000001a;border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center}.fullscreen-btn:hover{background-color:#ffffff4b}.fullscreen-btn:focus{outline:none}.streak-btn{background-color:#fffc;border:none;cursor:pointer;box-shadow:0 4px 6px #0000001a;border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center}.streak-btn:hover{background-color:#ffffff4b}.streak-btn:focus{outline:none}.app{width:100%;height:100vh;background-image:url(/backgrounds/background);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;position:relative}.quote-display-bottom-left{position:fixed;bottom:20px;left:20px;color:#fff;padding:10px;border-radius:8px;font-family:Arial,sans-serif;font-size:24px;z-index:1000}.name-display-bottom-left{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;padding:10px;border-radius:8px;font-family:Arial,sans-serif;font-size:24px;z-index:1000;background:#00000080}.custom-display-top{position:fixed;top:20px;left:50%;transform:translate(-50%);color:#fff;padding:10px;border-radius:8px;font-family:Arial,sans-serif;font-size:24px;z-index:1000}.music-content{position:absolute;top:20px;right:20px;z-index:1000;width:400px;height:120px}.music-widget{border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0003;padding:0;margin:0;background-color:transparent}.music-widget iframe{display:block;margin:0;padding:0;border:none}.tooltip{position:relative;display:inline-block}.tooltip .tooltip-text{visibility:hidden;width:120px;background-color:#0006;color:#fff;text-align:center;border-radius:6px;padding:10px;position:absolute;z-index:1;bottom:125%;left:50%;margin-left:-60px;opacity:0;transition:opacity .3s}.tooltip:hover .tooltip-text{visibility:visible;opacity:1}.header{position:absolute;top:20px;left:20px;margin:auto;font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:40px;font-weight:700;color:#fff;background:transparent;padding:10px 20px;border-radius:5px}.header span{display:block;font-size:12px;padding-left:80px}.greetings-container{position:absolute;top:20px;left:20px;z-index:1000}.greetings-display{position:fixed;top:20px;left:50%;transform:translate(-50%);color:#fff;padding-top:20px;border-radius:8px;font-family:Arial,sans-serif;font-size:24px;align-items:center;z-index:1000}.name-display{position:fixed;top:20px;left:30%;transform:translate(-50%);background:#00000080;padding:20px;border-radius:10px;box-shadow:0 4px 8px #0003;z-index:1001;display:flex;align-items:center;gap:10px}.name-display input{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:16px;font-style:italic;flex:1}.name-display button{background-color:#00000034;color:#fff;border:none;border:2px solid #ffffff;padding:10px 20px;border-radius:15px;cursor:pointer;font-size:16px;transition:background-color .3s ease;white-space:nowrap}.name-display button:hover{background-color:#00000034;transform:scale(1.05);border-color:#565656}.name-display button:focus{outline:none}.track-timer{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:600px;height:400px;margin:0 auto;padding:20px;background-color:#00000080;border-radius:10px;box-shadow:0 0 10px #0000001a;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.track-header{font-size:24px;color:#fff;margin-bottom:20px}.track-timer-display{font-size:120px;margin-bottom:20px;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;color:#fff}.icon-controls{display:flex;gap:20px}.icon-control{font-size:45px;color:#fff;cursor:pointer;transition:background-color .3s ease}.icon-control:hover{color:#000;transform:scale(1.05)}.pomodoro-timer{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:600px;height:400px;margin:0 auto;padding:20px;background-color:#00000080;border-radius:10px;box-shadow:0 0 10px #0000001a;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.focus-label{display:flex;align-items:center;margin-bottom:20px}.focus-label span{font-size:18px;margin-right:10px}.edit-icon{font-size:24px;color:#fff;cursor:pointer}.timer-modes{display:flex;gap:15px;margin-bottom:20px}.timer-mode-button{padding:10px 40px;font-size:18px;border:2px solid #39191984;border-radius:10px;background-color:#fff;color:#565656;cursor:pointer;transition:background-color .3s ease}.timer-mode-button:hover,.timer-mode-button.active{background-color:#fff;color:#000;transform:scale(1.05);border-color:#000}.timer-mode-button:focus{outline:none}.timer-display{font-size:120px;margin-bottom:20px;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif}.timer-controls{display:flex;gap:20px}.timer-button:focus{outline:none}.timer-button{padding:10px 40px;font-size:18px;border:2px solid #000000;border-radius:12px;background-color:#fff;color:#000;cursor:pointer;transition:background-color .3s ease}.timer-button:hover{background-color:#000;color:#fff;transform:scale(1.05);border-color:#565656}.focus-name-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;background-color:#00000080}.focus-name{background:#fff;padding:20px;border-radius:8px;text-align:center}.focus-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#fcfcfc80;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;border-radius:8px;align-items:center;justify-content:center;z-index:1000}.focus-modal{background:#f9f9f9b3;color:#000;padding:30px;border-radius:8px;position:relative;width:400px;max-width:90%;height:auto;max-height:80%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.close-button{position:absolute;top:10px;right:10px;background:none;border:none;color:#000;font-size:1.5rem;cursor:pointer}.close-button:focus{outline:none}.close-button:hover{color:gray}.clear-button{position:absolute;top:10px;left:10px;background:none;border:none;color:#000;font-size:1.4rem;cursor:pointer}.clear-button:focus{outline:none}.clear-button:hover{color:gray}.save-button{background-color:#000;color:#fff;border:none;padding:12px 20px;border-radius:20px;cursor:pointer;transition:background-color .3s ease,transform .3s ease;margin-top:20px;width:50%}.save-button:focus{outline:none}.save-button:hover{background-color:#8990f2;transform:scale(1.05)}.focus-modal input[type=text]{border-color:#a22e96;border-width:2px;border-style:solid;box-shadow:none}.focus-modal input[type=text]:hover{border-color:#541b4e}.focus-modal input[type=text]:focus{outline:none;border-color:#541b4e;box-shadow:none}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;width:100%;height:100%}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#ff6464}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#fff;font-weight:700}a:hover{color:#747bff}button{background-color:#f9f9f9}}@media (max-width: 1200px){.container{padding:0 15px}}@media (max-width: 992px){.container{padding:0 10px}header,footer{padding:15px}}@media (max-width: 768px){header,footer{padding:10px;text-align:center}.container{padding:0 5px}}@media (max-width: 576px){header,footer{padding:5px;font-size:.875rem}.container{padding:0 2px}}