:root{--primary-light: lch(calc(var(--color-lightness) + 7) 100% var(--color-base));--primary: lch(var(--color-lightness) 100% var(--color-base));--primary-dark: lch(calc(var(--color-lightness) - 7) 100% var(--color-base));--lighter: lch(98% 2% var(--color-base));--light: lch(95% 2% var(--color-base));--mid-light: lch(93% 2% var(--color-base));--grey-light: lch(82% 4% var(--color-base));--grey-mid-light: lch(60% 4% var(--color-base));--grey-mid-dark: lch(46% 4% var(--color-base));--grey-dark: lch(30% 4% var(--color-base));--mid-dark: lch(12% 2% var(--color-base));--dark: lch(9% 2% var(--color-base));--darker: lch(6% 2% var(--color-base));--gradient-color: lch(calc(var(--color-lightness) - 10) 100% calc(var(--color-base) + 10));--gradient: linear-gradient(to right, var(--primary), var(--gradient-color));--body-bg: light-dark(var(--mid-light), var(--darker));--nav-bg: light-dark(var(--lighter), var(--mid-dark));--content-bg: light-dark(var(--lighter), var(--dark));--controls-btn: var(--primary);--controls-btn--hover: var(--primary-dark);--controls-btn--active: var(--primary-light);--item-bg: light-dark(var(--light), var(--mid-dark));--label-bg: light-dark(var(--light), var(--mid-dark));--checkmark-bg: light-dark(var(--grey-light), var(--grey-dark));--checkmark--checked: var(--primary);--button-bg: light-dark(var(--grey-dark), var(--grey-light));--title-color: var(--grey-mid-dark);--font-color: light-dark(var(--grey-dark), var(--grey-light));--item-color--checked: light-dark(var(--grey-mid-dark), var(--grey-mid-light));--main-btn-color: var(--light);--main-btn-color--active: var(--lighter);--outline-color: var(--primary-light);--border-color: light-dark(var(--grey-light), var(--grey-dark));--check-icon: var(--lighter);--cross-icon: light-dark(var(--grey-mid-dark), var(--grey-mid-light));--menu-icon: var(--lighter);--quick-transition: .15s;--medium-transition: .3s;--slow-transition: 2s;--header-height: 4rem;color-scheme:light dark}*,*:before,*:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid var(--outline-color);outline-offset:2px}::selection{background-color:var(--primary);color:var(--lighter)}html{font-size:16px}body{min-width:280px;margin:0;font-family:sans-serif;color:var(--font-color);background-color:var(--body-bg)}body.light{color-scheme:light}body.dark{color-scheme:dark}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;justify-content:space-evenly}.gap-025{gap:.25rem}.btn-primary{contain:content;position:relative}.btn-tertiary{display:flex;border:none;background-color:var(--primary)}.btn-tertiary:is(:hover,:active) .icon{transform:scale(.8)}.ripple{position:absolute;top:var(--btn-y);left:var(--btn-x);display:block;width:100px;aspect-ratio:1/1;background:radial-gradient(at center center,transparent,var(--light),transparent 80%);border-radius:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;animation:ripple var(--slow-transition)}@keyframes ripple{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}to{opacity:0;transform:translate(-50%,-50%) scale(100)}}header{position:fixed;top:0;left:0;display:flex;justify-content:center;height:var(--header-height);width:100%;line-height:1}.logo__container{display:flex;align-items:center;height:100%}.name{color:var(--title-color);font-family:sans-serif;font-weight:400;margin:0;font-size:1.75rem}.name>span{font-weight:bolder}.menu-btn{position:fixed;top:.5rem;right:.5rem;width:3rem;height:3rem;padding:.5rem;aspect-ratio:1/1;background-color:var(--controls-btn);border:none;border-radius:50%;box-shadow:0 0 2px #0000001a;cursor:pointer;transition:background-color var(--quick-transition) ease;z-index:1000}.menu-btn:hover{background-color:var(--controls-btn--hover)}.menu-btn:active{background-color:var(--controls-btn--active)}nav{position:fixed;top:.25rem;right:.25rem;width:calc(280px - .5rem);max-height:calc(280px - 1.5rem);padding:1rem;background-color:var(--nav-bg);border:1px solid var(--border-color);border-radius:2rem;opacity:0;z-index:900;overflow:hidden;transform-origin:top right;animation-duration:var(--quick-transition);animation-fill-mode:forwards}nav.menu--closed{animation-name:hideMenu}nav.menu--closed input{visibility:hidden}nav.menu--opened{animation-name:showMenu}nav>ul{list-style:none;padding:0;margin:0;overflow-y:auto}nav .menu-item{padding:.5rem .5rem 1rem}nav .menu-item:not(:last-child){border-bottom:1px solid var(--border-color)}.menu-item__name{font-size:1.25rem;font-weight:bolder;margin-bottom:.5rem}.custom-radio{width:2.25rem;height:2.25rem;margin:.25rem;aspect-ratio:1/1;border-radius:50%}label:has(.custom-radio){cursor:pointer}input[type=radio]+.custom-radio>.custom-radio__check{opacity:0}input[type=radio]:checked+.custom-radio>.custom-radio__check{opacity:1}[id^=radio--]{position:absolute;width:0;height:0;opacity:0;pointer-events:none}[id^=radio--]:focus+.custom-radio{outline:3px solid var(--outline-color);outline-offset:2px}#theme-sets label:has(input:checked){outline:2px solid var(--primary)}#theme-sets label{flex:1;display:flex;flex-direction:row;align-items:center;padding:.5rem;text-transform:capitalize;font-weight:700;color:var(--font-color);background-color:var(--item-bg);border-radius:1rem}#theme-sets label:is([for=radio--light]){color-scheme:light;margin-right:.5rem}#theme-sets label:is([for=radio--dark]){color-scheme:dark}#theme-sets label>span{text-indent:.25rem}#theme-sets .custom-radio{width:1.5rem;height:1.5rem;background-color:var(--checkmark-bg)}#theme-sets input:checked+.custom-radio{background-color:var(--primary)}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;width:0;height:0;-webkit-backdrop-filter:blur(4px) brightness(.3);backdrop-filter:blur(4px) brightness(.3);z-index:850}.menu--opened+.backdrop{width:100%;height:100%}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;-webkit-backdrop-filter:blur(4px) brightness(.3);backdrop-filter:blur(4px) brightness(.3);z-index:750;width:100%;height:100%}main{display:flex;justify-content:center;margin-top:var(--header-height)}.no-notes{font-weight:bolder;color:var(--item-color--checked)}.note-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(280px - 2rem),36ch));grid-auto-rows:4px;column-gap:1rem;justify-content:center;justify-items:center;width:100%;max-width:120ch;padding:0 1rem 4rem;margin:0 auto}.note-list__note{grid-row:span var(--height);position:relative;min-width:calc(280px - 2rem);width:100%;max-width:calc(40ch - 1rem);height:fit-content;padding:1rem 1.5rem;background-color:var(--content-bg);border-radius:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden;opacity:0;cursor:pointer;animation:noteAppear .3s ease-out forwards;transition:border 02s ease}.note-list__note:hover{box-shadow:0 0 2px var(--primary)}.note-list__note:hover .note_delete-btn{opacity:1}.note__options{padding:0;width:2rem;height:2rem;border:none;border-radius:50%;cursor:pointer}.note_header{margin:.5rem 0}.note_title{margin:0;font-size:1.25rem;line-height:1.125;overflow-wrap:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}.note_text{max-height:4.75rem;line-height:1.5rem;font-size:1.1rem;margin:.5rem 0;white-space:pre-wrap;overflow-wrap:break-word;overflow:hidden}.note_tasks{list-style:none;padding:0;margin:.5rem 0}.note_tasks>.note_task{position:relative;padding:0 0 0 1.5rem;font-size:1.1rem;line-height:1.75rem;overflow-wrap:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note_tasks>.note_task:before{content:"";position:absolute;top:50%;left:.25rem;display:block;width:.75rem;height:.75rem;background-color:var(--checkmark-bg);border-radius:50%;transform:translateY(-50%)}.note_task.note_task--completed{color:var(--item-color--checked);text-decoration:line-through;text-decoration-thickness:2px}.note_task.note_task--completed:before{background-color:var(--checkmark--checked)}.note_delete-btn{position:absolute;top:1rem;right:1rem;width:2rem;height:2rem;padding:0;border:none;border-radius:1rem;cursor:pointer;opacity:0}.note-list__add-note{position:fixed;right:.5rem;bottom:.5rem;width:3rem;height:3rem;padding:.5rem;display:block;background:var(--gradient);border:none;border-radius:1rem;cursor:pointer;transition:transform var(--quick-transition) linear,color var(--quick-transition) linear,box-shadow var(--quick-transition) linear,transform var(--quick-transition) linear;z-index:550}.note-list__add-note:hover{box-shadow:0 4px 8px #0000001a}.note-list__add-note:active{color:var(--main-btn-color--active);transform:translateY(-.25rem);box-shadow:0 2px 4px #0000001a}.note-list__menu{position:fixed;right:.5rem;bottom:3.75rem;display:flex;flex-direction:column;gap:.5rem;padding:1rem;background-color:var(--content-bg);border-radius:1rem;box-shadow:0 2px 4px #0000001a;opacity:0;z-index:500;pointer-events:none}.note-list__menu:not(.open) button{visibility:hidden}.note-list__menu.open{pointer-events:auto;animation:showNotesMenu .3s ease-out forwards}.note-list__menu>button{--percent: 10%;display:flex;justify-content:flex-end;align-content:center;color:var(--font-color);gap:.5rem;padding:.5rem .5rem .5rem 1rem;font-size:1.25rem;line-height:2rem;text-align:end;background-color:color-mix(in srgb,var(--button-bg) var(--percent),transparent 100%);border:none;border-radius:1rem;cursor:pointer}.note-list__menu>button:hover{--percent: 15%}.note-list__menu>button:active{--percent: 25%}@keyframes showNotesMenu{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}.modal{position:fixed;top:var(--header-height);left:50%;display:flex;flex-direction:column;width:clamp(calc(280px - 1rem),calc(100% - 1rem),50ch);height:min-content;max-height:calc(100vh - var(--header-height) - 1rem);overflow-y:auto;background-color:var(--content-bg);border-radius:2rem;box-shadow:0 2px 4px #0000001a;opacity:0;pointer-events:none;z-index:800;overflow:hidden}.modal:not(.modal--open) :is(input,button,.note-modal__text){visibility:hidden}.modal>*{opacity:0;transition:opacity .1s linear}.modal--open{pointer-events:auto;animation:showModal .2s cubic-bezier(0,.6,.8,1) forwards}.modal--open>*{opacity:1}.modal--closing{pointer-events:none;animation:hideModal .2s cubic-bezier(0,.6,.8,1) forwards}.modal--closing>*{opacity:0}.modal-header{padding:1rem 1.5rem .5rem;margin-bottom:.5rem;background-color:var(--item-bg)}.note-modal__close-btn{width:2.5rem;height:2.5rem;padding:0;background:transparent;border:none;border-radius:1.25rem;cursor:pointer}.note-modal__title{width:calc(100% - 2rem);margin:0;font-size:1.4rem;line-height:2.5rem;text-indent:1ch;background-color:transparent;border:none;border-radius:1.25rem}.note-modal__title::placeholder{color:var(--item-color--checked)}.modal-header .wrapper{margin-top:.5rem;justify-content:end;align-content:center}.modal-header .wrapper:has(small.date){justify-content:space-between}small.date{display:inline-flex;align-items:center}small.date>span{margin-right:.25rem;font-weight:bolder}.note-modal__text{flex:1;padding:.75rem 1rem;margin:.5rem 1rem 1rem;min-height:6rem;font-size:1.25rem;line-height:1.375;background-color:var(--item-bg);border:none;border-radius:1rem;overflow-y:auto;overflow-wrap:break-word}.note-modal__text:empty:before{content:"Add a note...";color:var(--item-color--checked);pointer-events:none;display:block}.delete-task{display:flex;padding:.25rem;width:2rem;height:2rem;border-radius:50%}.delete-task .icon{fill:var(--light);width:100%;height:100%;transform:scale(.6);transition:transform .25s ease}.task-list{flex:1;padding:.5rem 1rem;margin:0;list-style:none;overflow-y:auto}.task-list__add-button{width:calc(100% - 2rem);height:4rem;padding:1.4375rem;margin:0 1rem 1rem;font-size:1.125rem;font-weight:bolder;text-transform:capitalize;line-height:1;color:var(--main-btn-color);background:var(--gradient);border:none;border-radius:2rem;cursor:pointer;transition:transform var(--quick-transition) linear,color var(--quick-transition) linear,box-shadow var(--quick-transition) linear,transform var(--quick-transition) linear}.task-list__add-button:before{content:"+";margin-right:.5rem}.task-list__add-button:hover{box-shadow:0 4px 8px #0000001a}.task-list__add-button:active{color:var(--main-btn-color--active);transform:translateY(-.25rem);box-shadow:0 2px 4px #0000001a}.task-item{contain:paint;display:flex;min-height:0rem;background-color:var(--item-bg);border-radius:1.5rem}.task-item.new-task{animation:taskAppear var(--medium-transition) ease-out forwards}.task-item.task-item--ready{min-height:3rem;margin-bottom:.75rem}.checkmark{display:block;width:1.5rem;height:1.5rem;margin:.75rem;background-color:var(--checkmark-bg);border-radius:50%;cursor:pointer}.checkmark>svg{opacity:0}.checkbox--hidden:focus{outline:none}.checkbox--hidden:focus+.checkmark{outline:3px solid var(--outline-color);outline-offset:2px}.checkbox--hidden{position:absolute;opacity:0;pointer-events:none}.task-item__text{flex:1;padding:.640625rem 0;font-size:1.25rem;line-height:1.375;overflow-y:auto;white-space:wrap;overflow-wrap:break-word;overflow-x:hidden}.task-item__text:focus{outline:none;box-shadow:inset 0 -3px 0 var(--outline-color)}.task-item:focus-within{outline:2px solid var(--border-color)}.task-item__remove-button{--percent: 0%;width:2rem;height:2rem;padding:0;margin:.5rem;background-color:color-mix(in srgb,var(--button-bg) var(--percent),transparent 100%);border:none;border-radius:50%;contain:paint;cursor:pointer;opacity:0;will-change:opacity,background-color;transition:background-color var(--quick-transition) linear}.task-item__remove-button:hover{--percent: 15%}.task-item__remove-button:active{--percent: 25%}.task-item:is(:hover,:focus-within) .task-item__remove-button,.task-item__remove-button:focus{opacity:1}.task-item:has(.checkbox--hidden:checked)>.task-item__text{color:var(--item-color--checked);text-decoration:line-through;text-decoration-thickness:2px}.checkbox--hidden:checked+.checkmark{background-color:var(--checkmark--checked)}.checkbox--hidden:checked+.checkmark>svg{opacity:1}.removing-task{animation:taskDisappear var(--medium-transition) ease-in forwards}.removing-task .task-item__text{overflow:hidden}[class*=icon]{width:100%;height:100%}svg.check-icon>path{stroke:var(--check-icon);stroke-width:50;fill:transparent}svg.cross-icon>path,svg.note_delete-icon>path,svg.note_close-icon>path{stroke:var(--font-color);stroke-width:40}svg.note-list__add-icon>path{stroke:var(--lighter);stroke-width:60}svg.menu-icon>path{stroke:none;stroke-width:0;fill:var(--menu-icon)}svg:is(.list__icon,.note__icon){width:2rem;height:2rem}svg:is(.list__icon,.note__icon)>path{stroke:none;stroke-width:0;fill:currentColor}@keyframes taskDisappear{0%{max-height:var(--height);min-height:3rem;margin-bottom:.5rem;opacity:1}to{max-height:0rem;min-height:0rem;margin-bottom:0rem;opacity:0}}@keyframes taskAppear{0%{min-height:0rem;margin-bottom:0rem;opacity:0}to{min-height:3rem;margin-bottom:.5rem;opacity:1}}@keyframes contentApparition{to{opacity:1;transform:translateY(0)}}@keyframes showMenu{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes hideMenu{50%{transform:scale(.5);opacity:0}to{transform:scale(0);opacity:0}}@keyframes showModal{0%{opacity:0;transform:translateY(2rem) translate(-50%)}to{opacity:1;transform:translateY(0) translate(-50%)}}@keyframes hideModal{0%{opacity:1;transform:translateY(0) translate(-50%)}to{opacity:0;transform:translateY(2rem) translate(-50%)}}@keyframes noteAppear{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (hover: none),(pointer: coarse){.menu-btn:hover{background-color:var(--controls-btn)}.menu-btn:active{background-color:var(--controls-btn--active)}.task-list__add-button:hover{box-shadow:0 4px 8px #0000001a}.task-list__add-button:active{box-shadow:0 2px 4px #0000001a}.task-item__remove-button{opacity:1}.task-item__remove-button:hover{--percent: 10%}.task-item__remove-button:active{--percent: 25%}.btn-tertiary:hover{transform:none}.btn-tertiary:active .icon{transform:scale(.8)}}@media (pointer: coarse) and (orientation: landscape) and (max-height: 480px){.modal{top:.5rem;left:50%;width:clamp(calc(280px - 1rem),calc(100% - 1rem),50ch);height:min-content;max-height:calc(100vh - 1rem)}.modal-header{padding:.5rem 1rem;margin-bottom:.25rem}.note-modal__title{font-size:1.25rem;line-height:1.5rem}.note-modal__close-btn{width:2rem;height:2rem}.modal-header .wrapper{margin-top:.25rem}.delete-task{padding:.25rem;width:1.75rem;height:1.75rem}}