:root{color-scheme:light;--bg: #f3efe8;--ink: #1c1917;--muted: #78716c;--card: #fffdf9;--line: #e7e0d6;--accent: #c2410c;--accent-soft: #ffedd5;--shadow: 0 24px 60px rgba(28, 25, 23, .08)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:DM Sans,system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at top left,#fed7aa 0%,transparent 28%),radial-gradient(circle at top right,#fecaca 0%,transparent 32%),var(--bg)}button,input{font:inherit}.page{min-height:100vh;display:grid;place-items:start center;padding:64px 20px}.shell{width:min(640px,100%)}.hero h1{margin:8px 0 10px;font-size:56px;letter-spacing:-.06em}.eyebrow{margin:0;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:12px}.lede{margin:0 0 28px;color:var(--muted)}code{font-size:.95em}.composer,.todo,.toolbar{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}.composer{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;padding:14px;border-radius:20px}.composer input,.edit-input{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 14px;outline:none}.composer input:focus,.edit-input:focus{border-color:var(--accent)}.composer button,.filters button{border:0;border-radius:12px;padding:12px 16px;background:var(--ink);color:#fff;cursor:pointer}.composer button:disabled{opacity:.45;cursor:not-allowed}.toolbar{display:flex;justify-content:space-between;align-items:center;margin:16px 0;padding:10px 14px;border-radius:16px}.toolbar p{margin:0;color:var(--muted)}.filters{display:flex;gap:6px}.filters button{background:transparent;color:var(--muted);text-transform:capitalize;padding:8px 12px}.filters button.active{background:var(--accent-soft);color:var(--accent)}.list{display:grid;gap:10px}.todo{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:14px;border-radius:18px}.check{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);background:#fff;cursor:pointer}.todo.done .check{background:var(--accent);color:#fff;border-color:var(--accent)}.body{min-width:0}.body h2{margin:2px 0 4px;font-size:18px;font-weight:600}.body p,.empty,.error{margin:0;color:var(--muted)}.todo.done .body h2{text-decoration:line-through;color:var(--muted)}.delete{border:0;background:transparent;color:var(--muted);font-size:24px;cursor:pointer;line-height:1}.empty,.error{padding:18px 4px}.error{color:#b91c1c}@media(max-width:640px){.hero h1{font-size:42px}.composer{grid-template-columns:1fr}.toolbar{flex-direction:column;align-items:stretch;gap:10px}}