*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#f5f6f8;color:#202124}.app{width:min(620px,calc(100% - 32px));margin:64px auto;background:#fff;padding:28px;border-radius:16px;box-shadow:0 10px 35px #0001}h1{margin:0 0 22px}form{display:flex;gap:10px}input{flex:1;padding:12px 14px;border:1px solid #d5d7db;border-radius:10px;font:inherit}button{border:0;border-radius:10px;padding:12px 16px;font:inherit;cursor:pointer;background:#202124;color:#fff}ul{list-style:none;padding:0;margin:22px 0 0}.todo{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid #eee}.todo span{flex:1}.todo.done span{text-decoration:line-through;color:#8a8d91}.todo .delete{background:transparent;color:#b3261e;padding:8px}#empty{text-align:center;color:#777;margin:28px 0 4px}@media(max-width:480px){.app{margin:24px auto;padding:20px}form{flex-direction:column}}