:root{font-family:system-ui,sans-serif;color:#243128;background:#f5f1e8}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 85% 0,#dce9d1 0,transparent 29rem),#f5f1e8}.app-shell{max-width:760px;margin:0 auto;padding:72px 24px 34px}header{margin-bottom:34px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font:12px ui-monospace,SFMono-Regular,monospace;color:#638258;margin:0 0 12px}h1{font:600 clamp(45px,9vw,72px)/.92 Georgia,serif;letter-spacing:-.05em;margin:0;color:#23382d}.intro{font-size:17px;color:#68736b;margin:17px 0 0}.todo-card{background:#fffdf8;border:1px solid #e3dfd4;box-shadow:0 18px 48px #4a573018;border-radius:18px;overflow:hidden}.add-form{padding:27px 28px 23px;border-bottom:1px solid #ece8df}.add-form label{display:block;font-size:14px;font-weight:700;margin-bottom:9px}.input-row{display:flex;gap:9px}input{font:inherit;color:inherit;border:1px solid #cdd5c7;border-radius:8px;background:#fff;padding:11px 12px;min-width:0}input:focus-visible,button:focus-visible{outline:3px solid #a5c595;outline-offset:2px}.input-row input{flex:1}.input-row button,.edit-form button{background:#315a42;color:#fff;border:0;border-radius:8px;padding:0 16px;font:500 14px inherit;cursor:pointer}.error{margin:9px 0 0;color:#a33329;font-size:14px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid #ece8df}.filters{display:flex;gap:3px}.filters button,.actions button,.clear{border:0;background:transparent;color:#667169;font:500 13px inherit;padding:7px 8px;border-radius:6px;cursor:pointer}.filters button.selected{background:#e4efdc;color:#284a35}.filters span{font:11px ui-monospace,SFMono-Regular,monospace;margin-left:3px}.clear{color:#8a5746}.todo-list{list-style:none;margin:0;padding:0}.todo-list li{min-height:65px;display:flex;align-items:center;gap:13px;padding:12px 20px;border-bottom:1px solid #f0ede6}.todo-title{flex:1;font-size:16px}.done .todo-title{text-decoration:line-through;color:#929a92}.check{position:relative;width:22px;height:22px;flex:none}.check input{opacity:0;position:absolute}.check span{display:grid;place-items:center;width:22px;height:22px;border:1.5px solid #9dad9f;border-radius:50%;color:transparent;font-size:13px}.check input:checked+span{background:#5f8a65;border-color:#5f8a65;color:#fff}.actions{display:flex;opacity:.65}.actions button:last-child{color:#a34f43}.todo-list li:hover .actions{opacity:1}.edit-form{display:flex;flex:1;flex-wrap:wrap;gap:7px}.edit-form input{flex:1}.edit-form button{padding:0 11px}.edit-form button[type=button]{background:#778178}.edit-form .error{flex-basis:100%;margin:0}.empty{text-align:center;padding:47px 20px;color:#778178}.empty span{font-size:27px;color:#8eae81}.empty p{margin:9px auto 0;max-width:280px}footer{display:flex;justify-content:space-between;color:#747d75;font-size:13px;padding:17px 4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:560px){.app-shell{padding:42px 14px 22px}.add-form{padding:22px 17px}.toolbar{padding:12px}.todo-list li{padding:12px 14px}.actions{opacity:1}.actions button{padding:7px 5px}footer{font-size:12px;gap:14px}.input-row button{padding:0 12px}}