Build a small task tracker. Users type a task, add it to a list, and mark tasks as done, while the component keeps a live count of the remaining open tasks.

Render this exact structure:

• An <input> element with the class new-task for typing the task text.
• A <button> element with the class add labeled Add.
• A <ul> element with the class tasks containing one <li> per task. Each <li> has the class task (and additionally the class done when the task is completed, so its class attribute becomes task done). Inside each <li>: a <span> with the class label holding the task text, and a <button> with the class complete labeled Done.
• A <p> element with the class remaining whose text is exactly Remaining: N, where N is the count of tasks that are not done. Initially the list is empty and the text is Remaining: 0.

Behavior:

• Typing in the input and clicking Add appends a task with that text and clears the input. Blank or whitespace-only input must add nothing.
• Clicking the complete button of a task marks that specific task as done: its <li> gains the done class and the remaining count decreases.
• Store tasks as objects with unique ids so each task can be identified. Remember that LWC only re-renders arrays when they are reassigned, and per-item CSS classes must be computed in a getter.

Examples: