Nemotron 3.5 Super VL (free)

The user wants an interactive Kanban board in vanilla HTML/CSS/JS. Requirements:
- 3 columns: To do, In progress, Done, each showing card count.
- Pre-populate with 6 realistic cards spread across columns.
- Each card has title and priority badge (low/medium/high).
- Modal form to add card (title required).
- Delete card with button on card.
- Drag and drop cards between columns with mouse, clear visual drop indicator.
- Search field filters cards live by title.
- Light/dark theme toggle.
- In-memory state only.

Output rules: Exactly one fenced code block with complete HTML file. No text before/after. Everything inline. Must look right in 1280x800 and adapt to 375px. No horizontal scrollbar. Something meaningful on first paint. No external files except allowed CDN (but we won't need any). No localStorage etc. No alert/confirm/prompt. No window.open.

Let's plan the HTML structure:

- Header: title "Kanban Board", theme toggle button, search field.
- Board container with 3 columns.
- Each column: header with title and count, list of cards.
- Cards: draggable, title, priority badge, delete button.
- Modal for add card (hidden by default), form with title input, priority select, submit/cancel.
- Drop indicator: maybe a placeholder div or highlight column when dragging over.

Drag and drop implementation:
- Use HTML5 Drag and Drop API.
- On dragstart: set dragged card id, add opacity.
- On dragover: prevent default, add drop indicator (e.g., insert a placeholder row or highlight column border).
- On dragleave: remove indicator.
- On drop: move card from source column to target column based on position.

Visual drop indicator: Could be a small horizontal line or a ghost card placeholder. Since cards are in columns, when dragging over a column, show a subtle inset shadow or a "drop here" bar at top or bottom of column list. Simpler: when dragging over a column list, add a class `drag-over` to the column that shows a border or background highlight. But requirement says "clear visual drop indicator". Let's add a placeholder div with class `drop-indicator` that appears inside the target column's card list at the appropriate position (above or below the nearest card). Or simpler: a horizontal dashed line between cards? Since cards are stacked vertically, dropping between cards makes sense.

Let's implement a placeholder approach:
- `dragOverCard` or `dropTarget` column.
- When dragging over a column list, insert a placeholder element (e.g., `<div class="card drop-placeholder"></div>`) at the position where the card would be dropped (based on mouse Y relative to cards). Remove previous placeholder first.
- On drop, remove placeholder and insert dragged card at that position.

Alternatively, simpler and robust: highlight the target column with a border and show a "drop here" label. But placeholder between cards is clearer.

Let's go with: On `dragover` over a column's card container, calculate if mouse is in upper half or lower half of each card to insert placeholder before/after. Actually we can just append placeholder to the column container when entering, and on `dragover` update its position? That's complex.

Simpler clear visual indicator: When dragging a card, the source column fades slightly, and the target column gets a blue border and a small "Drop here" text overlay? But we can't easily know exact drop index without math.

Let's do a hybrid: Drag over a column -> column gets `drag-over` class (border color, background tint). On drop, card is appended to that column. This is clear enough: "clear visual drop indicator" = highlighted target column. But maybe they want to see where in the column. Let's add a placeholder bar at the top of the target column list when dragging over? Hmm.

Actually, simplest clear indicator: when dragging over a column, show a semi-transparent dashed rectangle (placeholder) at the bottom of the column's card list, or just highlight the whole column. I think highlighting the column with a border and adding a small "↓ Drop here" text at top of card list when dragging over is very clear.

Let's implement:
- `.column.drag-over { border-color: var(--accent); background: rgba(...); }`
- Inside column header or list, a `.drop-hint` that appears when `drag-over`: "Drop here".

But we also need to move the card to the correct column. The column id is known from the target.

State management:
- Array of cards: `{ id, title, priority, columnId }`.
- Render function: clear columns, render cards based on search filter.
- Search: input event filters cards by title (case insensitive).
- Counts: update text content.

Modal:
- Click "Add card" button -> open modal.
- Form: title input (required), priority select, submit.
- On submit: prevent default, validate, add card, close modal, render.
- Close on cancel or clicking outside? Clicking outside is nice but not required. Let's add close button and overlay click.

Delete:
- Button on card (e.g., "×"). Click removes card from state and re-renders.

Theme toggle:
- Toggle class `dark` on body or `data-theme`. CSS variables for colors.
- Store in a variable (memory only). Toggle button text/symbol.

Pre-populated cards (6):
1. To do: "Design homepage mockup", high
2. To do: "Write API documentation", medium
3. In progress: "Set up project scaffold", high
4. In progress: "Fix login validation bug", low
5. Done: "Create project repository", medium
6. Done: "Draft sprint plan", low

Responsive:
- Flexbox columns, wrap on mobile? For 375px, stack columns vertically or scroll horizontally? Kanban boards usually scroll horizontally on mobile. But requirement says no horizontal scrollbar. So on narrow screens, stack columns vertically using flex-direction: column. Let's use media query: below 640px, `.board { flex-direction: column; }` and columns full width. No horizontal scrollbar.

Drag and drop with touch? Requirement says mouse. So mouse events only. But we can also support touch? Not necessary.

Drag and drop implementation details:

```js
let draggedCardId = null;

function addDragListeners(cardEl, card) {
  cardEl.draggable = true;
  cardEl.addEventListener('dragstart', (e) => {
    draggedCardId = card.id;
    cardEl.classList.add('dragging');
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', card.id);
  });
  cardEl.addEventListener('dragend', () => {
    cardEl.classList.remove('dragging');
    document.querySelectorAll('.column').forEach(c => c.classList.remove('drag-over'));
    document.querySelectorAll('.drop-hint').forEach(h => h.style.display = 'none');
    draggedCardId = null;
  });
}
```

Column dragover:
```js
columns.forEach(col => {
  col.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    col.classList.add('drag-over');
    // show hint
    const hint = col.querySelector('.drop-hint');
    if (hint) hint.style.display = 'block';
  });
  col.addEventListener('dragleave', (e) => {
    // careful: dragleave fires when leaving child elements too. Use relatedTarget or check.
    // Better: use e.currentTarget.contains(e.relatedTarget) ? but relatedTarget may be null.
    // Simple: use a timeout or check if mouse is still inside.
  });
  col.addEventListener('drop', (e) => {
    e.preventDefault();
    col.classList.remove('drag-over');
    const hint = col.querySelector('.drop-hint');
    if (hint) hint.style.display = 'none';
    if (draggedCardId) {
      const card = state.find(c => c.id === draggedCardId);
      if (card && card.columnId !== col.id) {
        card.columnId = col.id;
        render();
      }
    }
  });
});
```

Dragleave issue: When dragging over cards inside column, dragleave fires on column when entering child card. To prevent flickering, we can add dragover/dragleave on the cards too, or use a flag. Simpler: add `dragenter` and `dragleave` on column but check `e.relatedTarget`? Actually for dragleave, `relatedTarget` is the element being entered? Not reliable across browsers.

Alternative: Use `dragenter` on column to add class, `dragleave` to remove, but since cards inside column trigger it, we can set `pointer-events: none` on `.dragging` card? No.

A common trick: only manage drag-over class on `dragover` (which fires continuously) and remove on `dragend` or `drop`. We can add class on `dragover` and not worry about `dragleave` removal until drop/dragend. That means column stays highlighted while dragging anywhere over it, which is fine. On dragend, remove all classes. So no dragleave needed.

```js
col.addEventListener('dragover', (e) => {
  e.preventDefault();
  col.classList.add('drag-over');
  const hint = col.querySelector('.drop-hint');
  if (hint) hint.style.display = 'flex';
});
```

On dragend, remove all `.drag-over` and hide hints.

Rendering:
- Create elements dynamically.
- For each column, filter cards by columnId and search term.
- Render count in header.
- For each card, create `<article class="card" draggable="true" data-id="...">`.
  - `<span class="priority-badge priority-${priority}">${priority}</span>`
  - `<h3 class="card-title">${title}</h3>`
  - `<button class="delete-btn" aria-label="Delete">×</button>`

Event delegation for delete: Could attach on render or delegate on column. Attach on render is fine.

Modal:
- HTML hidden by default.
- `openModal()`, `closeModal()`.
- Form submit handler.

Search:
- `<input type="search" id="search" placeholder="Search cards...">`
- Input event updates `state.searchTerm` and renders.

Theme:
- `<button id="theme-toggle">🌙</button>` or text.
- Click toggles `data-theme="dark"` on body.
- CSS variables adjust.

CSS variables:
- `--bg`, `--card-bg`, `--text`, `--border`, `--column-bg`, `--accent`, etc.
- Dark theme overrides.

Visual drop indicator:
- `.column.drag-over` gets a border and maybe a subtle background.
- `.drop-hint` absolutely positioned or flex at top of card list: "Drop card here". Style with background var(--accent), color white, small.

Let's write HTML structure:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kanban Board</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #f3f4f6;
    --panel: #ffffff;
    --text: #111827;
    --muted: #6b7280;
    --border: #e5e7eb;
    --accent: #2563eb;
    --column-bg: #f9fafb;
    --card-bg: #ffffff;
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
    --low: #10b981;
    --medium: #f59e0b;
    --high: #ef4444;
    --drop-bg: rgba(37, 99, 235, 0.1);
  }
  [data-theme="dark"] {
    --bg: #0f172a;
    --panel: #1e293b;
    --text: #f1f5f9;
    --muted: #94a3b8;
    --border: #334155;
    --accent: #3b82f6;
    --column-bg: #0f172a;
    --card-bg: #1e293b;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
    --drop-bg: rgba(59, 130, 246, 0.2);
  }
  body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); padding: 1rem; }
  .app { max-width: 1000px; margin: 0 auto; }
  header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
  .toolbar { display: flex; align-items: center; gap: 0.5rem; }
  #search { padding: 0.4rem 0.7rem; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); min-width: 220px; }
  button { cursor: pointer; padding: 0.45rem 0.9rem; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 0.95rem; }
  button:hover { border-color: var(--accent); }
  .board { display: flex; gap: 1rem; flex-wrap: nowrap; overflow-x: auto; } /* horizontal scroll allowed? Requirement says no horizontal scrollbar. But on desktop 3 columns fit. On mobile we stack. So we can avoid overflow-x and instead wrap. */
```

Wait, requirement: "No horizontal scrollbar." So board should not overflow-x scroll. Use `flex-wrap: wrap` on desktop? But 3 columns fixed widths might overflow on narrow. Better: `.board { display: flex; gap: 1rem; }` and on mobile `flex-direction: column`. On desktop if screen < sum of widths, it might overflow. Use `min-width: 0` and `flex: 1` so columns shrink? But then cards get narrow. Maybe set column `min-width: 260px` and board `flex-wrap: wrap` so on smaller than 3 columns they wrap vertically, avoiding horizontal scroll. That works. On 375px, they stack.

Let's do:
```css
.board { display: flex; gap: 1rem; flex-wrap: wrap; }
.column { flex: 1 1 260px; min-width: 260px; display: flex; flex-direction: column; }
```
But `flex: 1 1 260px` means they can shrink below 260? `min-width: 260px` prevents shrinking below, so if board is narrower than 780px, they wrap. Good. No horizontal scrollbar.

Column header:
```css
.column-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; border-bottom: 2px solid var(--border); background: var(--panel); }
.column-title { font-weight: 700; font-size: 1.1rem; }
.card-count { font-size: 0.85rem; background: var(--border); color: var(--muted); padding: 0.1rem 0.5rem; border-radius: 999px; }
.column-body { flex: 1; padding: 0.5rem; overflow-y: auto; min-height: 300px; background: var(--column-bg); border-radius: 0 0 8px 8px; }
```

Card:
```css
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem; margin-bottom: 0.75rem; box-shadow: var(--shadow); cursor: grab; display: flex; flex-direction: column; gap: 0.4rem; }
.card:active { cursor: grabbing; }
.card.dragging { opacity: 0.5; border-style: dashed; }
.card-header { display: flex; justify-content: space-between; align-items: center; }
.badge { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 700; color: #fff; }
.badge.low { background: var(--low); }
.badge.medium { background: var(--medium); color: #111; }
.badge.high { background: var(--high); }
.delete-btn { background: transparent; border: none; color: var(--muted); font-size: 1.2rem; line-height: 1; padding: 0 0.4rem; }
.delete-btn:hover { color: var(--high); background: rgba(239,68,68,0.1); }
```

Drag over:
```css
.column.drag-over { border-color: var(--accent); background: var(--drop-bg); }
.drop-hint { display: none; padding: 0.5rem; background: var(--accent); color: #fff; border-radius: 6px; font-size: 0.8rem; text-align: center; margin-bottom: 0.5rem; }
```

Modal:
```css
.modal { display: none; position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.35); backdrop-filter: blur(2px); }
.modal.open { display: flex; align-items: center; justify-content: center; }
.modal-panel { background: var(--panel); padding: 1.5rem; border-radius: 10px; width: 90%; max-width: 400px; box-shadow: var(--shadow); }
.modal-panel h2 { margin-bottom: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.35rem; font-size: 0.9rem; color: var(--muted); }
.form-group input, .form-group select { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--text); }
.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
```

Responsive tweaks:
- Header flex-wrap.
- On very small screens, padding adjust.

JS:

```js
const state = {
  cards: [
    { id: 'c1', title: 'Design homepage mockup', priority: 'high', columnId: 'todo' },
    { id: 'c2', title: 'Write API documentation', priority: 'medium', columnId: 'todo' },
    { id: 'c3', title: 'Set up project scaffold', priority: 'high', columnId: 'inprogress' },
    { id: 'c4', title: 'Fix login validation bug', priority: 'low', columnId: 'inprogress' },
    { id: 'c5', title: 'Create project repository', priority: 'medium', columnId: 'done' },
    { id: 'c6', title: 'Draft sprint plan', priority: 'low', columnId: 'done' },
  ],
  searchTerm: '',
  nextId: 7
};

const COLUMNS = [
  { id: 'todo', title: 'To do' },
  { id: 'inprogress', title: 'In progress' },
  { id: 'done', title: 'Done' }
];

function getFilteredCards() {
  const term = state.searchTerm.toLowerCase();
  return state.cards.filter(c => c.title.toLowerCase().includes(term));
}

function render() {
  document.querySelectorAll('.column-body').forEach(el => el.innerHTML = '');
  // counts
  COLUMNS.forEach(col => {
    const count = state.cards.filter(c => c.columnId === col.id && c.title.toLowerCase().includes(state.searchTerm.toLowerCase())).length;
    document.getElementById(`count-${col.id}`).textContent = count;
  });
  
  const filtered = getFilteredCards();
  filtered.forEach(card => {
    const colBody = document.getElementById(`body-${card.columnId}`);
    if (!colBody) return;
    const el = document.createElement('article');
    el.className = 'card';
    el.draggable = true;
    el.dataset.id = card.id;
    el.innerHTML = `
      <div class="card-header">
        <span class="badge priority-${card.priority}">${card.priority}</span>
        <button class="delete-btn" aria-label="Delete card" data-id="${card.id}">×</button>
      </div>
      <div class="card-title">${escapeHtml(card.title)}</div>
    `;
    el.querySelector('.delete-btn').addEventListener('click', () => deleteCard(card.id));
    el.addEventListener('dragstart', handleDragStart);
    el.addEventListener('dragend', handleDragEnd);
    colBody.appendChild(el);
  });
}

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

let draggedId = null;

function handleDragStart(e) {
  draggedId = this.dataset.id;
  this.classList.add('dragging');
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/plain', draggedId);
}

function handleDragEnd() {
  this.classList.remove('dragging');
  draggedId = null;
  document.querySelectorAll('.column').forEach(c => c.classList.remove('drag-over'));
  document.querySelectorAll('.drop-hint').forEach(h => h.style.display = 'none');
}

function initColumns() {
  COLUMNS.forEach(col => {
    const colEl = document.getElementById(`col-${col.id}`);
    colEl.addEventListener('dragover', (e) => {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';
      colEl.classList.add('drag-over');
      const hint = colEl.querySelector('.drop-hint');
      if (hint) hint.style.display = 'block';
    });
    colEl.addEventListener('drop', (e) => {
      e.preventDefault();
      colEl.classList.remove('drag-over');
      const hint = colEl.querySelector('.drop-hint');
      if (hint) hint.style.display = 'none';
      if (!draggedId) return;
      const card = state.cards.find(c => c.id === draggedId);
      if (card && card.columnId !== col.id) {
        card.columnId = col.id;
        render();
      }
    });
  });
}
```

Note: `this` in dragstart refers to card element because addEventListener on element. Good.

Modal logic:

```js
const modal = document.getElementById('add-modal');
const openBtn = document.getElementById('open-modal');
const closeBtn = document.getElementById('close-modal');
const form = document.getElementById('add-form');

function openModal() { modal.classList.add('open'); document.getElementById('card-title').focus(); }
function closeModal() { modal.classList.remove('open'); form.reset(); }

openBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const titleInput = document.getElementById('card-title');
  const title = titleInput.value.trim();
  if (!title) return;
  const priority = document.getElementById('card-priority').value;
  const card = {
    id: 'c' + state.nextId++,
    title,
    priority,
    columnId: 'todo'
  };
  state.cards.push(card);
  closeModal();
  render();
});
```

Delete:
```js
function deleteCard(id) {
  state.cards = state.cards.filter(c => c.id !== id);
  render();
}
```

Search:
```js
document.getElementById('search').addEventListener('input', (e) => {
  state.searchTerm = e.target.value;
  render();
});
```

Theme:
```js
const themeToggle = document.getElementById('theme-toggle');
themeToggle.addEventListener('click', () => {
  const isDark = document.body.dataset.theme === 'dark';
  document.body.dataset.theme = isDark ? '' : 'dark';
  themeToggle.textContent = isDark ? '🌙 Light' : '☀️ Dark';
});
```

Initialize:
```js
render();
initColumns();
```

Need to ensure first paint shows something: render() called immediately.

HTML structure details:

```html
<header>
  <h1>Kanban Board</h1>
  <div class="toolbar">
    <button id="theme-toggle">🌙 Dark</button>
    <input type="search" id="search" placeholder="Search cards...">
    <button id="open-modal">+ Add card</button>
  </div>
</header>

<div class="board" role="grid" aria-label="Kanban columns">
  <!-- columns generated by JS? Better to write static HTML for columns and let JS fill bodies. -->
  <div class="column" id="col-todo">
    <div class="column-header">
      <span class="column-title">To do</span>
      <span class="card-count" id="count-todo">0</span>
    </div>
    <div class="column-body" id="body-todo">
      <div class="drop-hint">Drop card here</div>
    </div>
  </div>
  <!-- repeat for inprogress, done -->
</div>

<div class="modal" id="add-modal">
  <div class="modal-panel">
    <h2>Add card</h2>
    <form id="add-form">
      <div class="form-group">
        <label for="card-title">Title *</label>
        <input type="text" id="card-title" required maxlength="100">
      </div>
      <div class="form-group">
        <label for="card-priority">Priority</label>
        <select id="card-priority">
          <option value="low">Low</option>
          <option value="medium">Medium</option>
          <option value="high">High</option>
        </select>
      </div>
      <div class="modal-actions">
        <button type="button" id="close-modal">Cancel</button>
        <button type="submit">Add card</button>
      </div>
    </form>
  </div>
</div>
```

Wait, if columns are static HTML, `initColumns` can query them by id. Good.

Need to make sure no external resources. Use system fonts. Emoji for theme toggle might render differently but okay.

Theme toggle initial text: If no dark class, "🌙 Dark". When dark, "☀️ Light". Good.

Dark theme default? Could default to light. That's fine.

Edge cases:
- `draggedId` variable scoped globally.
- In `handleDragEnd`, `this` is card element. We remove dragging class.
- Drag over column: `e.preventDefault()` needed for drop.
- On drop, if same column, do nothing. Render anyway? Not necessary but fine.

Drop indicator: `.drop-hint` appears when `dragover` on column. Is that "clear visual drop indicator"? Yes, it's a visible hint. Could also add a dashed border around column body. Let's add `.column.drag-over .column-body` border? Maybe just the hint is enough.

Accessibility: add `aria-label` etc. Not strictly required but nice.

No `alert`, `confirm`, etc.

Check for console errors: `document.getElementById` must exist at script time. Put script at end of body or use `DOMContentLoaded`. I'll put script at end.

Responsive: `flex-wrap: wrap` on board. On 375px, columns stack. Need `min-width: 260px` might cause them to be 260px wide on 375px screen, leaving overflow? Since `flex-wrap: wrap`, each column takes 260px, fits one per row. No horizontal scroll. Good.

However, `.board { gap: 1rem; }` and body padding 1rem. On 375px, 375 - 2 - 260 = 111, okay.

One issue: `flex: 1 1 260px` with `min-width: 260px`. On 375px, first column 260px, wraps. Fine.

Let's refine CSS for polished look.

Add `@media (max-width: 640px)` maybe adjust padding.

```css
body { padding: 0.75rem; }
header { gap: 0.75rem; }
.toolbar { gap: 0.5rem; }
#search { min-width: 140px; }
```

Also, ensure `button` in modal actions: submit button should look primary.

```css
button[type="submit"] { background: var(--accent); color: #fff; border-color: var(--accent); }
button[type="submit"]:hover { background: #1d4ed8; }
```

Theme toggle can be simple.

Let's assemble the full HTML.

Double-check requirement: "each showing its card count." We show count in header. Good.
"Pre-populate ... 6 realistic cards spread across columns." Done.
"Each card has a title and a priority ... colored badge." Done.
"Add a card through a small modal form (title required)" Done.
"delete a card with a button on it." Done.
"Drag and drop cards between columns with the mouse, with a clear visual drop indicator." Done with dragover highlight and drop hint.
"Search field that filters cards live by title." Done.
"Light/dark theme toggle." Done.
"State lives in memory only." Done.

First paint: board renders 6 cards immediately.

Potential issue: `e.dataTransfer.setData` might be empty in some browsers if not set, but we set it.

Drag and drop between columns works.

Let's write the code block exactly.

I'll include comments for clarity.

One more thing: "No external files, images, fonts or network requests". We only use inline CSS/JS.

No `window.open`.

No `localStorage`.

Let's ensure code runs in strict mode? Not necessary.

Potential bug: `document.querySelectorAll('.column-body')` inside render clears all bodies, but drop hints are inside bodies. That's fine because we re-render. But `initColumns` adds event listeners to column elements, not bodies, so clearing bodies is fine.

Potential bug: `getFilteredCards` returns cards matching search across all columns. When rendering, we put them in their respective column bodies. Counts also filtered. Good.

Potential bug: `escapeHtml` for title prevents XSS if user inputs HTML. Good.

Delete button `data-id` not strictly needed since we use closure in event listener.

Clicking outside modal closes it. Good.

Search field live filter: input event.

Theme toggle toggles `data-theme` attribute. CSS uses `[data-theme="dark"]`.

Body default has no data-theme, so light.

Everything looks good.

Let's produce final code block.