:root{font-family:Arial,Helvetica,sans-serif;color:#242820;background:#f5f3ec;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:850px;margin:auto;padding:38px 32px 24px}header,footer,.list-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-size:15px;letter-spacing:.1em;font-weight:800;text-decoration:none;color:inherit}.brand span{font-size:11px;color:#5e6557;font-weight:400}.environment{font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid #9bA98b;padding:7px 10px;border-radius:3px;background:#eaf0df}.environment.preview{background:#f9e8cf;border-color:#cbad7e}.intro{padding:86px 0 35px}.eyebrow{font-size:10px;letter-spacing:.16em;color:#5e6557}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(36px,6vw,60px);letter-spacing:-.045em;line-height:1.05;margin:20px 0}.subtitle{color:#5e6557;font-size:15px;line-height:1.5}form{display:flex;border-bottom:2px solid #242820;padding:12px 0;gap:10px}input,button{font:inherit}input#title{flex:1;min-width:0;border:0;background:none;font-size:18px;padding:12px 0;color:inherit}button{cursor:pointer;border:0;border-radius:3px;padding:12px 18px;background:#344a2c;color:#fff;font-size:13px}button span{padding-left:14px}button:hover{background:#233b1b}button:disabled{opacity:.5;cursor:wait}:focus-visible{outline:2px solid #587448;outline-offset:4px}input#title:focus-visible{outline-offset:0}.list-heading{margin-top:40px;padding-bottom:13px}h2{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin:0}#count{font-size:12px;color:#5e6557}ul{list-style:none;margin:0;padding:0}.task{display:flex;align-items:center;gap:14px;border-top:1px solid #d5d8cb;padding:19px 0;min-height:68px}.task label{display:flex;align-items:center;gap:14px;flex:1;min-width:0;cursor:pointer}.task input{width:19px;height:19px;accent-color:#344a2c;flex-shrink:0}.task-title{line-height:1.4;overflow-wrap:anywhere}.task.done .task-title{text-decoration:line-through;color:#757a6e}.delete{background:none;color:#69715f;font-size:20px;padding:6px 10px}.delete:hover{color:#8d3025;background:#f2e2da}#error{padding:12px;background:#f4dfd6;color:#7e2d20;font-size:14px}#empty{padding:25px 0;color:#5e6557}footer{margin-top:70px;padding-top:20px;border-top:1px solid #d5d8cb;font-size:10px;color:#5e6557;line-height:1.5}.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:520px){main{padding:24px 20px}.intro{padding-top:62px}.brand span{display:block;margin-top:5px}.task{gap:5px}footer{align-items:flex-start;flex-direction:column;gap:4px}button{padding:12px}button span{padding-left:5px}}