:root{--ground:#f3f4f1;--surface:#fff;--ink:#15171c;--muted:#5b6070;--line:#e2e4e0;--field:#d5d8d1;--accent:#2b3bd6;--accent-ink:#fff;--warn-ground:#fdead7;--warn-ink:#7a2e05;--danger:#b42318;--chip:#e6e8e3;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}body{background:var(--ground);color:var(--ink);margin:0;font:400 16px/1.45 IBM Plex Sans,system-ui,sans-serif}.page{flex-direction:column;gap:24px;max-width:640px;margin:0 auto;padding:28px 16px 48px;display:flex}h1{letter-spacing:-.02em;margin:0;font:700 32px/1 Bricolage Grotesque,sans-serif}.lead{color:var(--muted);margin:6px 0 0}h2{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-size:12px;font-weight:600}.new-todo{background:var(--surface);border:1px solid var(--line);border-radius:18px;flex-direction:column;gap:6px;padding:16px;display:flex}.new-todo label{color:var(--muted);font-size:13px;font-weight:500}.row{gap:8px;display:flex}input{border:1px solid var(--field);min-width:0;height:48px;color:var(--ink);background:var(--surface);border-radius:10px;flex:1;padding:0 12px;font:500 16px IBM Plex Sans,sans-serif}input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button{background:var(--accent);min-width:76px;height:48px;color:var(--accent-ink);cursor:pointer;border:0;border-radius:12px;font:600 15px IBM Plex Sans,sans-serif}button:disabled{opacity:.6;cursor:progress}.error{color:var(--warn-ink);margin:4px 0 0;font-size:14px}.muted{color:var(--muted);margin:0}.todos{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.todos li{background:var(--surface);border:1px solid var(--line);border-radius:14px;align-items:center;gap:12px;padding:12px 14px;display:flex}.title{overflow-wrap:anywhere;flex:1;min-width:0;font-weight:500}.state{background:var(--chip);color:var(--ink);border-radius:8px;flex:none;padding:3px 8px;font-size:12px;font-weight:600}.section-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;display:flex}.section-head h2{margin:0}button.quiet{color:var(--ink);border:1px solid var(--field);background:0 0;height:44px;padding:0 14px;font-weight:500}button.danger{background:var(--danger);color:var(--accent-ink);padding:0 16px}.confirm{background:var(--warn-ground);color:var(--warn-ink);border-radius:14px;margin-bottom:12px;padding:14px}.confirm p{margin:0 0 10px;font-weight:500}
