:root{color:#23372f;background:#f5f7f1;font-family:system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}main{max-width:980px;margin:auto;padding:28px clamp(18px,5vw,48px) 64px}header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}h1{margin:0;font-size:1.5rem}h2{margin:4px 0 0;font-size:clamp(1.8rem,5vw,2.5rem)}h3{margin:32px 0 12px}button,input{font:inherit}button{color:#fff;cursor:pointer;background:#285b48;border:0;border-radius:10px;padding:12px 18px}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #d49230}nav{border-bottom:1px solid #dce4d9;margin:32px 0 24px}nav button{color:#285b48;background:0 0;border-bottom:3px solid #285b48;border-radius:0;font-weight:700}.tasks{background:#fff;border:1px solid #e0e8dd;border-radius:20px;padding:clamp(20px,4vw,36px);box-shadow:0 8px 30px #254b3710}.task-heading{flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px;display:flex}.eyebrow{color:#658074;text-transform:uppercase;letter-spacing:.06em;margin:0;font-size:.85rem;font-weight:700}.sync,.task-state{color:#536d5e;font-size:.9rem}.task-form{margin-top:28px}label{margin-bottom:8px;font-weight:600;display:block}.task-input{gap:10px;display:flex}input{border:1px solid #a9bbae;border-radius:10px;flex:1;min-width:0;padding:12px}.task-list{margin:0;padding:0;list-style:none}.task-list li{border-top:1px solid #e6ece4;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;display:flex}.task-list li div{gap:5px;min-width:0;display:grid}.task-title{overflow-wrap:anywhere}.task-state{display:block}.pending,.alert{background:#fff5dd;border-radius:10px;margin-top:16px;padding:12px 16px}.pending p{margin:0 0 8px}.alert{color:#753c15}.empty{color:#607568}@media (width<=480px){main{padding:20px 14px 48px}.task-input{flex-direction:column}.task-input button{width:100%}.task-list li{align-items:flex-start}}