@font-face{font-family:Kalice;font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/kalice-regular.woff2) format("woff2")}@font-face{font-family:Kalice;font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/kalice-italic.woff2) format("woff2")}@font-face{font-family:PP Neue Montreal;font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/pp-neue-montreal-regular.woff2) format("woff2")}@font-face{font-family:PP Neue Montreal;font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/pp-neue-montreal-italic.woff2) format("woff2")}:root{--font-display: "Kalice", serif;--font-text: "PP Neue Montreal", sans-serif}body{font-family:var(--font-text);padding-inline:1rem;color:#070705;background-color:#faf8f4}.app-header{margin-block-start:.75rem}.app-header:after{display:block;width:1px;height:9rem;margin-inline:auto;content:"";background-image:linear-gradient(to bottom,#4d4d4b,transparent)}.app-header__image{display:block;max-width:5rem;margin-block-end:.5rem;margin-inline:auto}.app-header__title{font-family:var(--font-display);font-size:1.5rem;font-weight:400;line-height:1;margin-block-start:0;margin-block-end:.75rem;text-align:center;color:#4d4d4b}.list-group{margin-block-end:2rem;padding-block-end:1.5rem;border-block-end:1px solid #dcdad6}.list-group:last-child{border:none}.list-header{display:grid;grid-auto-flow:dense;gap:.75rem;grid-template-columns:minmax(0,1fr) max-content;align-items:baseline;cursor:pointer;color:#4d4d4b}.list-header:marker{display:none}.list-header__title{font-family:var(--font-display);font-size:1.5rem;font-weight:400;margin-block-start:0;margin-block-end:0}.list-header__title-input{font-family:var(--font-display);font-size:1.5rem;font-weight:400;line-height:1;margin-inline:-.25rem;padding:0 .25rem;color:inherit;border:0;border-radius:4px}.list-header__title-input:is(:focus,:focus-within){outline:1px solid #b3b3b2}.list-header__action{font:inherit;font-size:.875rem;padding:none;cursor:pointer;color:inherit;border:0;background:none}.list-header__action:is(:hover,:focus,:active){text-decoration:underline;text-decoration-color:#b3b3b2;text-decoration-thickness:.08em}.list-items{margin:0;margin-block-start:1rem;margin-inline-start:1rem;padding:0;list-style-type:none}.list-item{line-height:2;display:grid;gap:.5rem;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}.list-item__completed{text-decoration:line-through}.list-item:before{width:.75rem;aspect-ratio:1;content:"";cursor:pointer;transition:all .2s;border:1px solid #dcdad6;border-radius:4px}.list-item__completed:before{border-color:currentColor;background-color:currentColor}.list-item span{position:relative}.list-item span:after{position:absolute;inset-block-start:50%;inset-inline:0;width:100%;height:.05em;content:"";transition:.3s;transform:scaleX(0);transform-origin:0 0;background-color:currentColor}.list-item__completed span:after{transform:scaleX(1)}.list-item:not(.list-item__completed,:last-child):hover:before{background-color:#dcdad6}.list-item label,.list-item input{cursor:pointer}.list-item__checkbox{display:none}.list-item__delete{width:1rem;padding:0;cursor:pointer;color:#dcdad6;border:0;background:none}.list-item__delete:is(:hover,:focus,:active){color:#b3b3b2}.list-item__delete svg{width:100%;height:100%}.list__form{display:grid;gap:.5rem;grid-template-columns:minmax(0,1fr) auto;margin-block-start:1rem;padding:.5rem;border:1px solid #dcdad6;border-radius:4px}.list-item__text-input{font:inherit;line-height:1.5;margin-inline-end:1px;padding-inline:.25rem;border:1px solid #dcdad6;border-radius:4px}.list-item__text-input:is(:focus,:focus-within){outline:1px solid #b3b3b2}.list-item__submit{font:inherit;font-family:var(--font-display);font-size:1rem;padding:0 .5rem;cursor:pointer;text-transform:lowercase;color:#4d4d4b;border:1px solid #dcdad6;border-radius:4px;background-color:transparent}.list-item__submit:is(:hover,:focus,:active){border-color:#b3b3b2;background-color:#f0eeea}
