*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:system-ui,sans-serif;color:#1d2540;background:#f5f7ff}.app{width:min(92%,680px);margin:8vh auto}.hero{margin-bottom:20px}.eyebrow{margin:0;color:#4f46e5;font-size:12px;font-weight:800;letter-spacing:1.5px}h1{margin:6px 0;font-size:clamp(32px,7vw,50px);line-height:1.05}.subtitle,.count{color:#6f7894}.card{overflow:hidden;background:#fff;border-radius:20px;box-shadow:0 18px 45px #dfe2f5}.add-form,.toolbar,.footer{display:flex;gap:10px;padding:16px;align-items:center}.add-form{border-bottom:1px solid #e6e9f2}.add-form input{flex:1;min-width:0;padding:13px;border:1px solid #dce1ee;border-radius:11px;outline:0}.add-form input:focus{border-color:#4f46e5}.add-form button{border:0;border-radius:11px;padding:13px 17px;background:#4f46e5;color:#fff;font-weight:800}.message{margin:0;padding:0 16px;color:#d83b56;font-size:14px}.message.visible{padding-top:10px}.toolbar,.footer{justify-content:space-between}.filters{display:flex;gap:5px}.filter,.clear,.icon-button{border:0;background:transparent;color:#6f7894;font-weight:700}.filter{padding:8px 11px;border-radius:99px}.filter[aria-pressed=true]{background:#eef2ff;color:#4f46e5}.todo-list{list-style:none;margin:0;padding:0 16px}.todo{display:flex;gap:12px;align-items:center;padding:15px 2px;border-top:1px solid #e6e9f2}.check{width:21px;height:21px;border:2px solid #cbd2e6;border-radius:50%;background:#fff;color:#fff}.check svg{width:12px;opacity:0}.completed .check{background:#4f46e5;border-color:#4f46e5}.completed .check svg{opacity:1}.todo-text{flex:1;overflow-wrap:anywhere}.completed .todo-text{color:#6f7894;text-decoration:line-through}.icon-button{width:30px;height:30px;border-radius:8px}.delete:hover{color:#d83b56;background:#fff0f2}.edit-input{width:100%;padding:7px;border:1px solid #4f46e5;border-radius:7px}.empty{padding:50px 10px;text-align:center;color:#6f7894}.empty strong{display:block;color:#1d2540;margin-bottom:5px}.footer{border-top:1px solid #e6e9f2;font-size:14px}.clear:disabled{opacity:.4;cursor:not-allowed}@media(max-width:480px){.app{margin:16px auto}.toolbar{align-items:flex-start;flex-direction:column}}