:root{--bg:#f9fbf9;--surface:#fff;--text:#18201b;--text-soft:#64706a;--text-faint:#67716b;--line:#e1e8e3;--accent:#1f6f4a;--danger:#b04434;--radius:8px;--fast:.12s;--ease:cubic-bezier(.2, 0, .2, 1);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#111613;--surface:#18201b;--text:#edf2ee;--text-soft:#97a39b;--text-faint:#7b877f;--line:#27302a;--accent:#6fc79a;--danger:#e08573}}*{box-sizing:border-box}body{min-height:100dvh;margin:0}button{font:inherit;color:inherit;cursor:pointer}input{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{width:min(34rem,100% - 2rem);margin:clamp(2rem,12vh,7rem) auto 4rem}.app__header{justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.25rem;display:flex}.app__header h1{letter-spacing:-.015em;margin:0;font-size:1.5rem;font-weight:600}.app__count{color:var(--text-faint);font-variant-numeric:tabular-nums;font-size:.875rem}.new-todo{border-bottom:1px solid var(--line);gap:.5rem;padding-bottom:1rem;display:flex}.new-todo__input{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);min-width:0;transition:border-color var(--fast) var(--ease);flex:1;padding:.625rem .75rem}.new-todo__input::placeholder{color:var(--text-faint)}.new-todo__input:hover{border-color:color-mix(in srgb, var(--line) 60%, var(--text-soft))}.new-todo__submit{background:var(--accent);color:var(--bg);border-radius:var(--radius);transition:opacity var(--fast) var(--ease), filter var(--fast) var(--ease);border:none;padding:.625rem 1rem;font-weight:500}.new-todo__submit:hover:not(:disabled){filter:brightness(1.1)}.new-todo__submit:disabled{opacity:.4;cursor:default}.app__toolbar{justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 0;display:flex}.filters{gap:.25rem;display:flex}.filters__tab{color:var(--text-soft);transition:background var(--fast) var(--ease), color var(--fast) var(--ease);background:0 0;border:none;border-radius:6px;padding:.25rem .625rem;font-size:.875rem}.filters__tab:hover{color:var(--text);background:color-mix(in srgb, var(--line) 50%, transparent)}.filters__tab[aria-pressed=true]{color:var(--text);background:color-mix(in srgb, var(--line) 80%, transparent)}.app__clear{color:var(--text-faint);transition:color var(--fast) var(--ease);background:0 0;border:none;padding:.25rem 0;font-size:.875rem}.app__clear:hover:not(:disabled){color:var(--danger)}.app__clear:disabled{opacity:.45;cursor:default}.todos{margin:0;padding:0;list-style:none}.todo{border-bottom:1px solid var(--line);align-items:center;gap:.75rem;padding:.5rem 0;display:flex}.todo:last-child{border-bottom:none}.todo__check{appearance:none;border:1.5px solid color-mix(in srgb, var(--line) 40%, var(--text-faint));background:var(--surface);cursor:pointer;width:1.125rem;height:1.125rem;transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease);border-radius:5px;flex:none;margin:0}.todo__check:hover{border-color:var(--accent)}.todo__check:checked{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;border-color:var(--accent)}@media (prefers-color-scheme:dark){.todo__check:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23111613' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}.todo__title,.todo__edit{text-align:left;overflow-wrap:anywhere;background:0 0;border:none;flex:1;min-width:0;padding:.125rem 0}.todo__title{transition:color var(--fast) var(--ease)}.todo--done .todo__title{color:var(--text-faint);text-decoration:line-through;-webkit-text-decoration-color:color-mix(in srgb, var(--text-faint) 60%, transparent);text-decoration-color:color-mix(in srgb, var(--text-faint) 60%, transparent)}.todo__edit{border-bottom:1px solid var(--accent);outline:none}.todo__remove{width:1.5rem;height:1.5rem;color:var(--text-faint);opacity:0;transition:opacity var(--fast) var(--ease), color var(--fast) var(--ease);background:0 0;border:none;border-radius:5px;flex:none;place-items:center;padding:0;display:grid}.todo:hover .todo__remove,.todo__remove:focus-visible{opacity:1}.todo__remove:hover{color:var(--danger)}.app__empty{color:var(--text-faint);margin:1.5rem 0 0;font-size:.9375rem}@media (hover:none){.todo__remove{opacity:1}}.app__error{border:1px solid color-mix(in srgb, var(--danger) 35%, var(--line));border-radius:var(--radius);background:color-mix(in srgb, var(--danger) 8%, var(--surface));color:var(--danger);justify-content:space-between;align-items:center;gap:1rem;margin:.75rem 0 0;padding:.5rem .75rem;font-size:.875rem;display:flex}.app__retry{border:1px solid color-mix(in srgb, var(--danger) 40%, transparent);color:inherit;transition:background var(--fast) var(--ease);background:0 0;border-radius:6px;flex:none;padding:.125rem .5rem;font-size:.8125rem}.app__retry:hover{background:color-mix(in srgb, var(--danger) 12%, transparent)}