@charset "UTF-8";*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box}:where(ul,ol):where([class]){padding-left:0}body,:where(blockquote,figure):where([class]){margin:0}:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl):where([class]){margin-block:0}:where(dd[class]){margin-left:0}:where(fieldset[class]){margin-left:0;padding:0;border:none}:where(ul[class]){list-style:none}:where(address[class]){font-style:normal}p{--paragraphMarginBottom: 1.5rem;margin-block:0}:where(p:not([class]):not(:last-child)){margin-bottom:var(--paragraphMarginBottom)}img,video{display:block;max-width:100%;height:auto}input,textarea,select,button{font:inherit}html{height:100%;scrollbar-gutter:stable}html,:has(:target){scroll-behavior:smooth}body{min-height:100%;line-height:1.5}a:where([class]){display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}button,label{cursor:pointer}:where([fill]:not([fill=none],[fill^=url])){fill:currentColor}:where([stroke]:not([stroke=none],[stroke^=url])){stroke:currentColor}svg *{-webkit-transition-property:fill,stroke;transition-property:fill,stroke}:where(table){border-collapse:collapse;border-color:currentColor}@media (prefers-reduced-motion: reduce){*,:before,:after{-webkit-animation-duration:.01ms!important;animation-duration:.01ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important;-webkit-transition-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--color-white: #FFFFFF;--color-black: #000000;--color-dark-1: #1E1E1E;--color-dark-2: #2C2C2C;--color-gray-1: #F5F5F5;--color-gray-2: #D9D9D9;--color-gray-3: #B3B3B3;--color-gray-4: #757575;--border: .0625rem solid var(--color-gray-2);--border-radius: .5rem;--box-shadow: 0 .25rem .25rem -.25rem rgba(12, 12, 13, .05), 0 1rem 2rem -.25rem rgba(12, 12, 13, .1);--input-height: 2.5rem;--transition-duration: .2s}body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:start;min-height:100vh;padding:6.25rem 1.875rem;font-family:Roboto,sans-serif;background-color:var(--color-gray-1)}input,label,button{-webkit-transition-duration:var(--transition-duration);transition-duration:var(--transition-duration)}:focus-visible{outline:.125rem dashed var(--color-black);outline-offset:.25rem;-webkit-transition-duration:0s!important;transition-duration:0s!important}.button{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:var(--input-height);padding:.75rem;color:var(--color-gray-1);background-color:var(--color-dark-2);border:.0625rem solid var(--color-dark-2);border-radius:var(--border-radius)}@media (any-hover: hover){.button:hover{color:var(--color-dark-2);background-color:transparent}}.button:active{scale:1.05}.field{position:relative}.field:has(.field__input:not(:-moz-placeholder-shown)) .field__label{scale:.7;translate:-1.75em -2.75em;color:var(--color-black)}.field:has(.field__input:not(:-ms-input-placeholder)) .field__label{scale:.7;translate:-1.75em -2.75em;color:var(--color-black)}.field:has(.field__input:not(:placeholder-shown)) .field__label{scale:.7;translate:-1.75em -2.75em;color:var(--color-black)}.field__label{position:absolute;top:50%;left:1.0625rem;color:var(--color-gray-3);translate:0 -50%}.field__input{--field-input-padding-x: 1rem;--field-search-input-icon-size: 1rem;width:100%;height:var(--input-height);padding-inline:var(--field-input-padding-x);background-color:transparent;border:var(--border);border-radius:var(--border-radius)}.field__input:hover,.field__input:focus{color:var(--color-dark-2)}.field__input:focus{background-color:var(--color-gray-1);outline:none}.field__input[type=search]:-moz-placeholder-shown{padding-right:calc(var(--field-input-padding-x) * 2 + var(--field-search-input-icon-size));background-image:url(../img/icon-search_black.svg);background-position:calc(100% - var(--field-input-padding-x)) 50%;background-size:var(--field-search-input-icon-size);background-repeat:no-repeat}.field__input[type=search]:-ms-input-placeholder{padding-right:calc(var(--field-input-padding-x) * 2 + var(--field-search-input-icon-size));background-image:url(../img/icon-search_black.svg);background-position:calc(100% - var(--field-input-padding-x)) 50%;background-size:var(--field-search-input-icon-size);background-repeat:no-repeat}.field__input[type=search]:placeholder-shown{padding-right:calc(var(--field-input-padding-x) * 2 + var(--field-search-input-icon-size));background-image:url(../img/icon-search_black.svg);background-position:calc(100% - var(--field-input-padding-x)) 50%;background-size:var(--field-search-input-icon-size);background-repeat:no-repeat}.todo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;row-gap:1.5rem;width:100%;max-width:25.25rem;min-height:26.8125rem;padding:1.5rem;background-color:var(--color-white);border:var(--border);border-radius:var(--border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}.todo__title{text-align:center;font-size:1.5rem;line-height:1.2;letter-spacing:-.02em}.todo__form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.todo__field{width:100%}.todo__info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem;font-weight:600}.todo__delete-all-button{padding:0;background-color:transparent;border:none}@media (any-hover: hover){.todo__delete-all-button:hover{color:var(--color-gray-4)}}.todo__delete-all-button:not(.is-visible){opacity:0;visibility:hidden}.todo__list:empty,.todo__empty-message:empty{display:none}.todo__list{--todo-list-row-gap: .5rem;display:grid;row-gap:var(--todo-list-row-gap)}.todo__empty-message{text-align:center;color:var(--color-gray-4)}.todo-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:.75rem;-moz-column-gap:.75rem;column-gap:.75rem;padding-left:.625rem;border:var(--border);border-radius:var(--border-radius);-webkit-transition-duration:var(--transition-duration);transition-duration:var(--transition-duration)}.todo-item:hover{background-color:var(--color-gray-1)}.todo-item.is-disappearing{opacity:0;translate:0 -75%;-webkit-transition-duration:calc(var(--transition-duration) * 2);transition-duration:calc(var(--transition-duration) * 2);pointer-events:none}.todo-item.is-disappearing~.todo-item{translate:0 calc((100% + var(--todo-list-row-gap)) * -1);-webkit-transition-delay:var(--transition-duration);transition-delay:var(--transition-duration);-webkit-transition-duration:var(--transition-duration);transition-duration:var(--transition-duration);pointer-events:none}.todo-item__checkbox{-ms-flex-negative:0;flex-shrink:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:1.25rem;height:1.25rem;margin:0;border:.0625rem solid var(--color-gray-4);border-radius:.25rem}.todo-item__checkbox:checked{background-color:var(--color-dark-2);border-color:var(--color-dark-2)}.todo-item__checkbox:checked+.todo-item__label{color:var(--color-gray-4);text-decoration:line-through}.todo-item__checkbox:not(:checked):after{opacity:0}.todo-item__checkbox:after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:1rem;height:1rem;background:url(../img/root/icon-check_white.svg) center/contain no-repeat}.todo-item__label{width:100%;pointer-events:none}.todo-item__delete-button{-ms-flex-negative:0;flex-shrink:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:2.75rem;height:2.75rem;margin-left:auto;padding:0;color:var(--color-gray-4);background-color:transparent;border:none;border-radius:inherit}.todo-item__delete-button:hover{color:var(--color-white);background-color:var(--color-dark-1)}.todo-item__delete-button:active{scale:1.05}.todo-item__delete-button *{pointer-events:none}
