:root{--bg:#fafafa;--fg:#1a1a1a;--muted:#666;--surface:#fff;--border:#d0d0d0;--accent:#0b64d8}@media (prefers-color-scheme:dark){:root{--bg:#16181d;--fg:#e8e8e8;--muted:#9a9a9a;--surface:#22262e;--border:#3a3f4a;--accent:#6ea8ff}}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);margin:0;font-family:system-ui,-apple-system,sans-serif}.app{background:var(--surface);border:1px solid var(--border);border-radius:.5rem;max-width:32rem;margin:3rem auto;padding:1.5rem}h1{margin-top:0}form{gap:.5rem;margin-bottom:1rem;display:flex}form label{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}input[type=text]{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:.25rem;flex:1;padding:.5rem}button{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--border);cursor:pointer;border-radius:.25rem;padding:.5rem .75rem}button:hover{border-color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.todo-list{margin:0;padding:0;list-style:none}.todo-item{border-bottom:1px solid var(--border);align-items:center;gap:.5rem;padding:.5rem 0;display:flex}.todo-item .title{cursor:default;flex:1}.todo-item .title.completed{color:var(--muted);text-decoration:line-through}.filter-bar{color:var(--muted);align-items:center;gap:.75rem;margin-top:1rem;display:flex}.filter-bar .filters{gap:.25rem;display:flex}.filter-bar button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.filter-bar>button:last-child{margin-left:auto}