:root{--var-color-1:#fff;--var-color-2:#dbe6e3;--var-color-3:#98b2ba;--var-color-4:#7d9da1;--var-color-5:#3f6c74;--var-color-6:#2a4c52;--item-height:2.5rem}*,::after,::before{box-sizing:border-box}html{background:var(--var-color-3)}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;color:var(--var-color-5)}.App{padding:1rem;height:100vh;display:flex;flex-direction:column;gap:1rem}.App__title{line-height:1.5;font-size:1.5rem;margin:0;color:var(--var-color-6)}.App__tasks{flex:1;position:relative;display:flex;flex-direction:row;gap:1rem;overflow-y:hidden}.Task{width:100%;max-width:300px;max-height:100%;padding:.5rem 0;background:var(--var-color-2);border:var(--var-color-2) 4px solid;border-radius:4px;overflow-y:auto;transition:background-color .3s;scrollbar-width:thin;scrollbar-color:var(--var-color-3) transparent}.Task--isDraft{background:var(--var-color-1)}.Task::-webkit-scrollbar{width:.3rem;background-color:transparent}.Task::-webkit-scrollbar-thumb{border-radius:10rem;background-color:var(--var-color-3)}.Task__title{height:var(--item-height);padding:0 .8rem;margin:0;margin-bottom:.5rem;line-height:var(--item-height);display:flex;align-items:center}.Task__title__text{flex:1}.Task__title__button{padding:.25rem .5rem;margin:0;margin-left:4px;border:var(--var-color-4) solid thin;border-radius:10rem;background:var(--var-color-1);color:inherit;font-size:.8rem;font-weight:400;line-height:1}.Task__subtasks{padding:0 .8rem .5rem;margin:0}.Task__subtask{height:var(--item-height);padding:.5rem;margin:0;margin-bottom:.5rem;display:flex;align-items:center;list-style:none;gap:.5rem;background-color:var(--var-color-1);border-radius:3px;color:var(--var-color-5);cursor:pointer;user-select:none}.Task__subtask:active{transform:translateY(1px)}.Task__subtask:last-child{margin-bottom:0}.Task__subtask__button{width:1rem;height:1rem;display:inline-flex;align-items:center;justify-content:center;background:0 0;border:none;border-radius:50%;color:inherit;font-size:.75rem;font-weight:inherit;line-height:inherit;cursor:pointer}.Task__subtask__button--check{border:currentColor solid thin}.Task__subtask__text{flex:1}.Task__subtask__text--checked{text-decoration-line:line-through}.Task__newTask{padding:0 .8rem;margin:0}.Task__newTask__input{width:100%;height:var(--item-height);margin:0;margin-bottom:.5rem;padding:0 .5rem;display:block;background-color:var(--var-color-1);border:1px solid var(--var-color-2);border-radius:3px;color:inherit;font-size:inherit;font-weight:inherit;line-height:var(--item-height)}.Task__newTask__input:focus{outline:0;border-color:var(--var-color-4)}