*,:before,:after{box-sizing:border-box}html{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;font:inherit}summary{display:list-item}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;cursor:pointer;display:inline-block;background-repeat:no-repeat;background-position:center}input[type=checkbox]:checked{background-color:transparent}:root{--color-bg-dark: #111;--color-bg-light: #fff;--color-bg-gray: #f1f1f1;--color-bg-accent: #03793b;--color-bg-accent-hover: #026b35;--color-bg-accent-active: #015a2c;--color-bg-disabled: #ccc;--color-bg-gray-hover: #ddd;--color-text-light: #fff;--color-text-dark: #111;--color-text-label: #aaa;--color-text-disabled: #666;--border-radius-large: 30px;--border-radius-medium: 10px;--transition-fast: .2s ease-in-out;--font-main: sans-serif}*{margin:0;padding:0;box-sizing:border-box}.todo{min-height:100vh;background-color:var(--color-bg-dark);font-family:var(--font-main);padding:20px}.todo__box{max-width:600px;border-radius:var(--border-radius-medium);background-color:var(--color-bg-light);margin:100px auto 20px;padding:30px 40px 70px}.todo__title{font-weight:300;text-align:center;font-size:20px;text-transform:uppercase;margin-bottom:30px}.todo__label{position:absolute;top:50%;left:25px;color:var(--color-text-label);transform:translateY(-50%);pointer-events:none}.todo__form{position:relative;display:flex;justify-content:space-between;align-items:center;background-color:var(--color-bg-gray);border-radius:var(--border-radius-large);margin-bottom:30px;padding-left:10px}.todo__form:has(.todo__input:not(:-moz-placeholder)) .todo__label{color:var(--color-text-label);scale:.7;translate:-2em -2.2em;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.todo__form:has(.todo__input:not(:placeholder-shown)) .todo__label{color:var(--color-text-label);scale:.7;translate:-2em -2.2em;transition:all .5s ease-in-out}.todo__input{background-color:transparent;padding:10px;border:none;outline:none;font-size:16px;width:100%}.todo__btn{border:none;background-color:var(--color-bg-accent);color:var(--color-text-light);padding:10px 45px;border-radius:var(--border-radius-large);cursor:pointer;font-size:18px;transition:background-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.todo__btn:hover{background-color:var(--color-bg-accent-hover)}.todo__btn:active{background-color:var(--color-bg-accent-active);transform:scale(.97);box-shadow:inset 0 2px 4px #0000004d}.todo__btn:focus{outline:2px solid var(--color-bg-accent);outline-offset:2px}.todo__btn:disabled{background-color:var(--color-bg-disabled);color:var(--color-text-disabled);cursor:not-allowed;opacity:.6}.todo__list{list-style-type:none;padding:4px}.todo__item{display:grid;grid-template-columns:1fr auto;cursor:pointer;font-size:20px;position:relative;color:var(--color-text-dark);overflow-wrap:break-word;white-space:normal;width:100%}.todo__check{position:absolute;opacity:0;pointer-events:none}.todo__text{flex-grow:1;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.todo__text:before{content:"";display:inline-block;width:40px;height:40px;margin:8px 12px 8px 8px;border:2px solid var(--color-bg-accent);border-radius:50%;vertical-align:middle;transition:background-color .2s ease}.todo__check:checked+.todo__text{text-decoration:line-through;color:var(--color-text-label, #999)}.todo__check:checked+.todo__text:before{background-color:var(--color-bg-accent);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12l4 4 8-8' fill='none' stroke='white' stroke-width='2'/></svg>");background-repeat:no-repeat;background-position:center}.todo__check:focus-visible+.todo__text:before{outline:2px solid var(--color-bg-accent);outline-offset:3px}.todo__remove{width:40px;height:40px;border-radius:50%;border-width:0;background-color:var(--color-bg-gray);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:background-color var(--transition-fast)}.todo__remove:hover{background-color:var(--color-bg-gray-hover)}.todo__remove:focus-visible{outline:2px solid var(--color-bg-accent);outline-offset:3px}.todo__error{color:red;margin-top:8px;font-size:.9rem}@media (width <= 768px){.todo__text:before{width:35px;height:35px}.todo__label{font-size:18px}.todo__box{margin:40px 10px;padding:20px 25px 40px}.todo__row{flex-direction:column;align-items:stretch;gap:10px;padding:10px}.todo__btn{width:50%;padding:10px}.todo__input{font-size:16px}.todo__title,.todo__item{font-size:18px}.todo__remove{width:35px;height:35px;top:-2px;right:6px}}@media (width <= 480px){.todo__text:before{width:28px;height:28px}.todo__label{font-size:14px}.todo__title{font-size:16px}.todo__input{font-size:14px}.todo__btn,.todo__item{font-size:16px}.todo__remove{width:28px;height:28px;top:0;right:4px}}@media (width <= 360px){.todo__form{flex-direction:column;gap:8px;align-items:stretch}.todo__label{font-size:14px;padding:0 0 36px}.todo__input{width:100%;font-size:14px;padding:10px 11px 12px 13px}.todo__btn{width:100%;padding:10px 0;font-size:16px;margin:0 0 0 -5px}}