*{box-sizing:border-box}body{margin:0;background:#f5f4f0;color:#242c28;font-family:system-ui,sans-serif}main{max-width:680px;margin:100px auto;padding:0 24px}.eyebrow{font-size:11px;letter-spacing:2px;color:#6c786e}h1{font-size:52px;letter-spacing:-2px;margin:16px 0}h1 span{color:#448361}.subtitle{color:#748077;line-height:1.6}form{display:flex;gap:10px;margin:36px 0 24px}form input{min-width:0;flex:1;border:1px solid #dce0d9;background:#fff;padding:16px;border-radius:10px;font:inherit}button{border:0;border-radius:10px;padding:12px 20px;background:#305d45;color:#fff;font:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:default}.list{background:#fff;border:1px solid #e4e5df;border-radius:14px;overflow:hidden}.todo{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #eeeee9}.todo:last-child{border-bottom:0}.todo label{display:flex;align-items:center;gap:14px;min-width:0;cursor:pointer}.todo span{overflow-wrap:anywhere}.todo input{accent-color:#305d45;width:18px;height:18px;flex-shrink:0}.done{text-decoration:line-through;color:#939b94}.delete{background:transparent;color:#939b94;font-size:25px;padding:0 10px}.delete:hover{color:#a23838}.empty{padding:30px 20px;color:#899087;text-align:center}footer{margin:20px 4px;font-size:13px;color:#899087}.error{color:#a23838;line-height:1.6}.error button{font-size:12px;padding:6px 10px}@media(max-width:480px){main{margin-top:48px}h1{font-size:42px}form{flex-direction:column}}