*{box-sizing:border-box;margin:0;padding:0;font-family:"Consolas",monospace}button,select,input,label{-webkit-tap-highlight-color:transparent}:root{--bgcolor:#223;--bgcolor2:#334;--color:#ddf;--coloraccent:#b2b2ff;--focus:#d64f4f;--short:#26baba;--long:#5fbbe6;color-scheme:dark}body{width:100vw;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--bgcolor);color:var(--color);font-family:"Consolas",monospace}#main{display:flex;width:100vw;height:100vh;flex-direction:column;align-items:center;justify-content:center;background-color:var(--bgcolor)}#popupbtn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background-color:var(--bgcolor);border:0;border-radius:50%;position:fixed;top:0;right:0}.svg-icon{fill:var(--color);width:48px;height:48px;transition:fill 300ms}.svg-icon:hover{fill:var(--coloraccent)}#menubtn{border:0;position:fixed;width:48px;height:48px;background-color:transparent;cursor:pointer;z-index:20;top:0;left:0}#menubtn::before,#menubtn::after{content:"";background-color:var(--color);transition:background-color 300ms,transform 300ms;height:4px;border-radius:10px;position:absolute}#menubtn:hover::before,#menubtn:hover::after{background-color:var(--coloraccent)}#menubtn::before{width:40px;top:20px;left:10px;transform:translate(0,0) rotate(0)}#menubtn::after{width:24px;top:30px;left:10px;transform:translate(0,0) rotate(0) scaleX(1)}#menubtn.cross::before{transform:translate(-3px,6px) rotate(-45deg)}#menubtn.cross::after{transform:translate(4px,-4px) rotate(45deg) scaleX(1.6667)}#title{flex-grow:1;flex-shrink:1;text-align:center;height:100%;display:flex;flex-direction:column;justify-content:center;font-size:30px}#timer{position:relative;width:70vmin;height:70vmin;border-radius:50%;flex-grow:0;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;overflow:hidden}#ring{position:absolute;top:0;left:0;width:70vmin;height:70vmin;transform:rotate(-90deg)}#secondary{stroke:var(--coloraccent);stroke-width:1px}#progress{stroke-width:4px;stroke-dasharray:100.15;stroke-dashoffset:0;transition:stroke-dashoffset 1000ms linear}.t-focus #progress{stroke:var(--focus)}.t-short #progress{stroke:var(--short)}.t-long #progress{stroke:var(--long)}#time{font-size:15vmin;padding-top:3vmin}#status{font-size:6vmin;padding-top:3vmin;text-transform:uppercase;display:grid;grid-template-areas:"area";text-align:center;user-select:none}#status span{opacity:0;grid-area:area;transition:opacity 300ms}.t-focus #s-focus,.t-short #s-short,.t-long #s-long{opacity:1}#pauseplay{margin-top:2vmin;width:15vmin;height:15vmin;background-color:var(--bgcolor);transition:background-color 300ms;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;display:grid;grid-template-areas:"area";text-align:center;cursor:pointer}#playing,#paused{grid-area:area;opacity:0;fill:var(--color);transition:fill 300ms;width:15vmin;height:15vmin}#pauseplay:hover #playing,#pauseplay:hover #paused{fill:var(--coloraccent)}#pauseplay.playing #playing,#pauseplay.paused #paused{opacity:1!important}#resetround,#next,#volume-button{width:54px;height:54px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;position:fixed;bottom:0;right:2vmin;background-color:var(--bgcolor)}#roundno{position:fixed;bottom:10px;left:auto;right:auto;font-size:22px}#resetround{left:0;right:auto}#slider-overlay{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;width:54px;position:absolute;bottom:64px;right:64px}#slider-container:focus-within #slider-overlay{display:flex}#slider-container.disabled,#volume-button.disabled{display:none}#slider-container #volume-muted-icon{display:none}#slider-container.muted #volume-muted-icon{display:initial}#slider-container #volume-icon{display:initial}#slider-container.muted #volume-icon{display:none}#volume-slider{height:120px;outline:0;appearance:slider-vertical;writing-mode:bt-lr;accent-color:var(--coloraccent)}#volume-button{bottom:0;right:64px}#volume-button .svg-icon{width:40px;height:40px}#menu{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:10;flex-direction:column;flex-wrap:nowrap;align-items:center;overflow-y:scroll;display:none;background-color:var(--bgcolor)}.content{width:100%;max-width:800px;display:flex;flex-direction:column;flex-wrap:nowrap;padding:0 15px 15px 15px}.menu-title{width:100%;height:60px;background-color:var(--bgcolor);color:var(--coloraccent);text-align:center;padding:10px;margin-bottom:30px;font-size:32px;position:sticky;top:0;z-index:2;left:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.4)}.section{margin-bottom:30px}h2{width:100%;font-size:32px;margin:10px auto;padding-bottom:10px;border-bottom:4px solid var(--color)}h3{font-size:24px;font-weight:normal}.setting{width:100%;padding:15px 5px}
.setting label{font-size:24px}.input-holder{padding-top:5px;font-size:20px}.ibtn{background-color:var(--bgcolor2);color:var(--color);border:0;margin:0 1px;font-size:22px;width:30px;height:30px;border-radius:5px}#focus-input,#short-input,#long-input,#rounds-input{background-color:var(--bgcolor2);color:var(--color);font-size:inherit;width:fit-content;max-width:100px;padding:2px;border:0;text-align:center;border-radius:5px;font-size:20px}#theme-select,#notif-select,#audio-select,#stat-time-select{background-color:var(--bgcolor2);color:var(--color);font-size:20px;padding:5px;border-radius:5px;border:0;cursor:pointer}#colors{display:flex;flex-direction:row;flex-wrap:wrap}.color{width:54px;height:54px;border:0 solid var(--color);border-width:0;border-radius:50%;transition:border-width 300ms;margin:5px;cursor:pointer}.color[data-active="true"]{border-width:6px}#about-desc{font-size:18px;margin-bottom:10px}#create-backup,#backup-restore-label{font-size:22px;padding:5px 10px;margin-right:10px;border:2px solid var(--coloraccent);border-radius:5px;color:var(--bgcolor);background-color:var(--coloraccent);cursor:pointer;margin-top:5px;display:inline-block;width:fit-content}.hover-shadow{transition:box-shadow .3s}.hover-shadow:hover{box-shadow:0 2px 5px 1px rgba(0,0,0,0.4)}#backup-restore{width:0;height:0;opacity:0}.button-link{padding:5px 10px;text-decoration:none;border:medium solid var(--coloraccent);font-size:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;margin-right:10px;margin-bottom:10px}.button-link img{width:28px;height:28px;margin-right:4px}#github-link{background-color:#efefff;color:#000}#kofi-link{margin-top:5px}canvas{width:300px;height:300px;position:fixed;top:0;left:0;background:black;display:none}video{width:200px;height:200px;position:fixed;top:60px;right:15px;background:black;display:none;box-shadow:0 0 15px 5px rgba(0,0,0,0.8)}video.pipactive{display:block}.pip::after{content:"Picture in Picture Mode Active";display:block;position:absolute;top:50%}#firstload{display:none;width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:var(--bgcolor);padding:20px;overflow:hidden scroll;z-index:20;box-shadow:0 0 25px 10px rgba(0,0,0,0.8)}#firstloadcontent{max-width:800px;margin:auto;font-size:1.2em}#new-list{padding-left:20px}#new-list h3{font-size:24px;font-weight:600;border-bottom:3px solid var(--color);padding-bottom:2px;display:inline}.whats-new-desc{margin:10px 0}#closeintro{background-color:transparent;border:0;font-size:24px;background-color:var(--coloraccent);color:var(--bgcolor);padding:10px;font-family:Consolas,monospace;margin:15px auto 60px auto;display:block;border-radius:5px;cursor:pointer}#taskswitcher button,#closetasks,#closestats{width:54px;height:54px;position:relative;border:0;background-color:transparent;cursor:pointer}#statbtn span{position:absolute;bottom:10px;width:5px;background-color:var(--color);transition:background-color .5s;border-radius:3px}#statbtn:hover span{background-color:var(--coloraccent)}#statline1{height:14px;left:16px}#statline2{height:35px;left:26px}#statline3{height:22px;left:36px}.crossbtn::before,.crossbtn::after{content:"";position:absolute;top:15px;left:28px;width:4px;height:30px;border-radius:5px;background-color:var(--color);transition:background-color .5s}.crossbtn:hover::before,.crossbtn:hover::after{background-color:var(--coloraccent)}#taskswitcher{position:fixed;top:0;left:48px;width:calc(100vw - 96px);height:54px;display:flex;align-items:center;justify-content:center;z-index:2}#task-select{padding:5px 2px;font-size:24px;color:var(--coloraccent);background-color:var(--bgcolor);border:2px solid var(--coloraccent);border-radius:5px;outline:0;max-width:calc(100vw - 192px);margin:0 5px;text-align:center;cursor:pointer;text-overflow:ellipsis}#no-task-title{display:none;padding:5px;font-size:24px;color:var(--coloraccent);background-color:var(--bgcolor);border-radius:5px;text-align:center}@media(max-width:500px){#task-select{font-size:18px;margin:0}#no-task-title{font-size:18px}}@media(max-width:400px){#task-select{border-width:1px;font-size:16px}}@media(max-width:350px){#taskswitcher{justify-content:space-between}#task-select{position:fixed;top:54px;left:48px;text-align:center;max-width:initial;width:calc(100vw - 96px)}#no-task-title{font-size:16px}}#managetasks,#statistics{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:30;flex-direction:column;flex-wrap:nowrap;align-items:center;overflow-y:scroll;display:none;background-color:var(--bgcolor)}#statistics .content{display:block;max-width:1000px}#closetasks,#closestats{position:absolute;top:0;right:0}.crossbtn::before{transform:rotate(45deg)}.crossbtn::after{transform:rotate(135deg)}#task-container{width:100%;padding:10px}.task{width:100%;border:3px solid var(--bgcolor2);border-radius:10px;display:flex;flex-direction:row;flex-wrap:nowrap;min-height:60px;align-items:center;overflow:hidden;margin:5px 0;padding:2px}
#newtask{border-color:var(--coloraccent);position:sticky;bottom:5px;background-color:var(--bgcolor);box-shadow:0 0 10px 2px rgba(0,0,0,0.4)}.task-name{padding-left:10px;font-size:20px;flex-grow:1;text-overflow:ellipsis;overflow:hidden;flex-shrink:1}#new-task-name{background-color:transparent;padding:10px;margin:0 6px;font-size:20px;outline-color:var(--coloraccent);flex-grow:1;flex-shrink:1;border:0;width:200px}#new-task-name:focus{outline:var(--coloraccent) solid}.task-delete-btn,#new-task-btn{flex-grow:0;flex-shrink:0;background-color:inherit;position:relative;width:60px;height:60px;border:0;font-size:40px;cursor:pointer;z-index:0}#new-task-btn::after{transform:rotate(0)}#new-task-btn::before{transform:rotate(90deg)}#filters{padding:10px 5px;display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:scroll;scroll-snap-align:start end;scroll-snap-type:x mandatory}.scrollbar::-webkit-scrollbar{width:8px;height:8px}.scrollbar::-webkit-scrollbar-thumb{background-color:var(--color);border-radius:5px}.scrollbar::-webkit-scrollbar-thumb:active{background-color:var(--coloraccent)}.task-chip{background-color:var(--bgcolor2);padding:5px 20px;border-radius:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;margin:0 6px;scroll-snap-align:start end;scroll-margin:5px;width:max-content}.task-chip input{width:20px;height:20px;margin-right:8px;background-color:var(--coloraccent);color:var(--coloraccent);accent-color:var(--coloraccent);cursor:pointer}.chip-task-name{width:max-content}.remark{margin-bottom:54px;font-size:28px;padding:0 10px}#stat-details{margin-bottom:40px;border-radius:5px;background-color:var(--bgcolor2);--card-width:300px}#stat-details summary{padding:8px;background-color:var(--bgcolor2);border-bottom:0 solid var(--bgcolor2);transition:border-bottom .3s,border-radius .3s;border-radius:5px}#stat-details[open] summary{border-bottom:4px solid var(--color);border-radius:5px 5px 0 0}#stat-details summary h2{display:inline;border-bottom:0;padding-left:5px}#round-entries{display:grid;grid-template-columns:repeat(auto-fit,var(--card-width));gap:10px;justify-content:space-evenly;width:100%;padding:10px}.round-entry{width:var(--card-width);padding:10px;background-color:var(--bgcolor);border-radius:5px;font-size:16px;transition:box-shadow .3s}.entry-delete{margin-top:10px;background-color:var(--coloraccent);color:var(--bgcolor);border:0;font-size:18px;padding:5px 10px;border-radius:5px;cursor:pointer;transition:box-shadow .3s}.entry-delete:hover,.round-entry:hover{box-shadow:0 2px 5px 1px rgba(0,0,0,0.4)}@media(max-width:1000px){#stat-details{--card-width:250px}}@media(max-width:1000px){#stat-details{--card-width:250px}}@media(max-width:800px){#stat-details{--card-width:300px}}@media(max-width:670px){#stat-details{--card-width:250px}}@media(max-width:570px){#stat-details{--card-width:100%}}.round-entry-name{font-size:20px;padding-bottom:5px;margin-bottom:10px;border-bottom:2px solid var(--color)}@media(max-width:500px){.remark{font-size:24px}}.remark span{margin:0 5px;color:var(--coloraccent)}.remark-value{text-transform:capitalize}.remark-value::after{content:"."}.stat-chart{width:100%;padding:10px 0;border-radius:10px;display:flex;flex-direction:column;flex-wrap:nowrap}.task-bar-container{width:100%;height:60px;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;padding:10px 0;transform:translateY(0)}.legend{width:120px;padding-right:5px;flex-grow:0;flex-shrink:0;color:var(--color);transition:color .3s;text-align:center;line-break:auto;overflow:hidden;font-size:14px;font-stretch:condensed}@media(max-width:350px){.legend{width:100px}}@media(min-width:800px){.legend{width:200px;font-size:16px}}.bar-container{flex-grow:1;flex-shrink:1;margin-right:70px}.bar{position:relative;flex-grow:0;flex-shrink:0;height:40px;width:1%;min-width:1%;border-radius:3px;background-color:var(--coloraccent);display:flex;align-items:center;justify-content:center;box-shadow:none;transition:box-shadow .3s,width .3s}.task-bar-container:last-child .bar{--v:5%}.stat-value{width:70px;height:40px;position:absolute;text-align:center;display:flex;align-items:center;justify-content:center;right:-70px;top:0;transform:translateX(0);transition:color .3s,transform .3s;font-size:16px}.task-bar-container:hover .legend,.task-bar-container:hover .stat-value{color:var(--coloraccent)}.task-bar-container:hover .stat-value{transform:translateX(5px)}.task-bar-container:hover .bar{box-shadow:0 0 10px 0 rgba(0,0,0,0.4)}.tooltip{position:absolute;top:5px;left:5px;height:30px;width:fit-content;padding:5px 8px;background-color:var(--bgcolor2);border-radius:5px;box-shadow:none;opacity:0;transition:opacity .3s,box-shadow .3s;z-index:1}.task-bar-container:hover .tooltip{box-shadow:0 2px 10px 5px rgba(0,0,0,0.4);opacity:1}#pie-container{width:100%;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-evenly;padding:20px 0;margin-bottom:54px}
#pie{width:300px;height:300px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--bgcolor2)}#pie svg{width:300px;height:300px}@media(max-width:340px){#pie,#pie svg{width:250px;height:250px}}#pie-card-container{width:300px;height:350px;background-color:var(--bgcolor2);padding:10px;overflow:hidden scroll;display:flex;flex-direction:column;flex-wrap:nowrap;border-radius:5px;scroll-snap-type:both proximity;position:relative;border:5px solid var(--bgcolor2)}.pie-card{width:100%;padding:10px;font-size:16px;background-color:var(--bgcolor);margin-bottom:10px;border-radius:5px;scroll-snap-align:start;scroll-margin:10px;border:3px solid var(--bgcolor);transition:border .3s}.pie-card-active{border:3px solid var(--coloraccent)}.pie-card-name{font-size:20px;padding-bottom:5px;margin-bottom:10px;border-bottom:2px solid var(--color)}.pie-card-time{color:var(--coloraccent)}.pie-card-time-text{margin-top:5px}@media(max-width:700px){#pie-container{flex-direction:column;justify-content:flex-start}#pie-card-container{margin-top:20px;flex-direction:row;width:100%;height:auto;overflow:scroll hidden}.pie-card{margin:0 10px;width:300px;flex-grow:0;flex-shrink:0}}#pie svg path{transition:transform .3s,opacity .3s;transform-origin:center;opacity:.8;fill:var(--coloraccent);stroke:var(--bgcolor2)}#pie svg path:hover{opacity:1}