:root{color-scheme:light dark;font-family:system-ui,sans-serif;--muted: color-mix(in srgb, CanvasText 50%, Canvas);--line: color-mix(in srgb, CanvasText 15%, Canvas)}body{margin:0;background:Canvas;color:CanvasText}main{max-width:32rem;margin:0 auto;padding:2rem 1rem}h1{font-weight:600}form{display:inline;margin:0}button{font:inherit;cursor:pointer}.add{display:flex;gap:.5rem;margin-bottom:1rem}.add input{flex:1;font:inherit;padding:.5rem .75rem;border:1px solid var(--line);border-radius:.5rem}.add button{padding:.5rem 1rem;border:0;border-radius:.5rem;background:CanvasText;color:Canvas}.filters{display:flex;gap:.75rem;margin-bottom:1rem;font-size:.9rem}.filters a{color:var(--muted);text-decoration:none}.filters a.is-active{color:CanvasText;font-weight:600}.todos{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.todos li{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--line)}.todos .title{flex:1}.todos li.is-done .title{color:var(--muted);text-decoration:line-through}.check,.delete{background:none;border:0;font-size:1.1rem;padding:.25rem .5rem}.delete{color:var(--muted)}.delete:hover{color:#dc143c}.empty{color:var(--muted)}footer{display:flex;justify-content:space-between;margin-top:1rem;font-size:.9rem;color:var(--muted)}.link{background:none;border:0;color:var(--muted);text-decoration:underline;padding:0}.meta{margin-top:2rem;font-size:.8rem;color:var(--muted)}.filters button{background:none;border:0;padding:0;color:var(--muted)}.filters button.is-active{color:CanvasText;font-weight:600}.error{color:#dc143c}