html,body{margin:0;padding:0}button{margin:0;padding:0;border:0;background:none;font-size:100%;font-family:inherit;font-weight:inherit;color:inherit;appearance:none}body{font:14px Helvetica Neue,Helvetica,Arial,sans-serif;line-height:1.4em;background:#f5f5f5;color:#111;min-width:230px;max-width:550px;margin:0 auto;font-weight:300}.todoapp{background:#fff;margin:130px 0 40px;position:relative;box-shadow:0 2px 4px #0003,0 25px 50px #0000001a}.todoapp h1{position:absolute;top:-140px;width:100%;font-size:80px;font-weight:200;text-align:center;color:#af2f2f26}.new-todo,.edit{width:100%;font-size:24px;padding:16px;border:none;box-sizing:border-box}.new-todo{padding-left:60px}.todo-list{margin:0;padding:0;list-style:none}.todo-list li{position:relative;font-size:24px;border-bottom:1px solid #ededed}.todo-list li:last-child{border-bottom:none}.todo-list li .toggle{position:absolute;top:0;bottom:0;width:40px;opacity:0;cursor:pointer}.todo-list li .toggle+label{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='-10 -18 100 135'><circle cx='50' cy='50' r='50' fill='none' stroke='%23ededed' stroke-width='3'/></svg>");background-repeat:no-repeat;background-position:center left}.todo-list li .toggle:checked+label{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='-10 -18 100 135'><circle cx='50' cy='50' r='50' fill='none' stroke='%23bddad5' stroke-width='3'/><path fill='%235dc2af' d='M72 25L42 71 27 56l-4 4 20 20 34-52z'/></svg>")}.todo-list li label{display:block;padding:15px 85px 15px 60px;line-height:1.2;word-break:break-all}.todo-list li.completed label{color:#d9d9d9;text-decoration:line-through}.todo-list li .icon{position:absolute;top:0;bottom:0;width:30px;height:40px;margin:auto 0;font-size:30px;color:#cc9a9a;cursor:pointer}.todo-list li .icon:hover{color:#af5b5e}.todo-list li .icon-destroy{right:10px}.todo-list li .icon-destroy:after{content:"×"}.todo-list li .icon-edit{right:45px;font-size:18px}.todo-list li .icon-edit:after{content:"✎"}.footer{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;border-top:1px solid #e6e6e6;color:gray;position:relative}.footer:before{content:"";position:absolute;left:0;right:0;bottom:0;height:50px;box-shadow:0 1px 1px #0003,0 8px 0 -3px #f6f6f6,0 9px 1px -3px #0003;pointer-events:none}.todo-count strong{font-weight:300}.filters{list-style:none;padding:0;margin:0}.filters li{display:inline}.filters li button{margin:3px;padding:3px 7px;border-radius:3px;cursor:pointer}.filters li button.selected{border:1px solid rgba(175,47,47,.2)}.clear-completed{cursor:pointer}.clear-completed:hover{text-decoration:underline}.todo-list li label{display:flex;align-items:center;gap:8px}.todo-list li label .created{margin-left:auto;font-size:12px;color:#9e9e9e;white-space:nowrap}