DeepSeek V4.1 Flash 1017

Let me build a polished Kanban board.

Requirements:
- 3 columns with counts
- 6 pre-populated cards
- priority badges
- modal add form (title required, priority select)
- delete button
- drag and drop with HTML5 DnD, drop indicator
- search filter live
- light/dark theme toggle
- no storage

Also the instructions mention games demo mode — not a game, so skip. But "Click or press a key to start" is for games. Not needed here.

Let me make it look great. Design: modern, soft shadows, rounded, accent color. Dark theme via data-theme attribute on html/body with CSS variables.

Layout: header with title, search field, theme toggle, "Add card" button. Then board with 3 columns, grid, each column scrollable.

Drag and drop: use dragstart on card, dragover on column/card, compute insertion point, show a drop indicator line. Simplest robust approach: each column has a list; on dragover over column, find nearest card by y midpoint and insert a placeholder element (a div with class drop-indicator) at the right spot. Then on drop, insert card before placeholder.

Let me implement with a placeholder element approach:

- `dragState = { cardId, from }`
- On dragstart: card classList.add('dragging'), set dataTransfer.
- On column dragover: e.preventDefault(); compute target index; move the placeholder there.
- On drop: e.preventDefault(); insert dragged card before placeholder in that column, remove placeholder, re-render counts.

Alternatively use a thin line indicator. I'll use a placeholder that's a dashed outline slot — clear visual.

Also keyboard accessibility? Optional; maybe add keyboard support (arrow keys) — not needed but nice. Keep simple.

Filter: cards not matching search get hidden (display:none) with maybe .hidden class. Counts: show count of visible? I'll show count of matching cards vs total... Let's show column count = number of visible cards (filtered). Actually nicer: show count of cards in column, and when filtering show "2/3". Keep it simple: count reflects currently visible cards. Hmm, requirement: "each showing its card count". I'll show visible count, and if filtering, show matching count with dimmed total like "2 / 4". Let's do: count badge shows visible count; if a filter is active, badge shows matched count and a small "/total". Fine.

Add card modal: overlay, form with title input (required), priority radio buttons/segmented control, column select maybe. Default column: To do. Let's add column select for niceness. Actually adding to specific column: I'll add a "column" select.

Delete button: small × on card hover top-right, always visible on mobile.

Card structure:
```html
<article class="card" draggable="true" data-id="1">
  <div class="card-top"><span class="badge high">High</span><button class="del" aria-label="Delete">×</button></div>
  <h3 class="card-title">...</h3>
  <div class="card-meta">…</div>
</article>
```

Add realistic card content: maybe tags / assignee avatars initials. Keep it lightweight: title + priority badge + maybe an id like "KBN-12" and an avatar circle with initials. Nice.

6 cards:
To do (3):
- "Design empty states for the new dashboard" — medium
- "Fix flaky login test in CI pipeline" — high
- "Write release notes for v2.4" — low
In progress (2):
- "Migrate settings page to the new design tokens" — high
- "Add keyboard shortcuts to the editor" — medium
Done (2)? That's 7. Need 6 total spread: 2/2/2 or 3/2/1. Let's do 3/2/1 = 6.

To do: 3, In progress: 2, Done: 1.

Cards:
1. To do — high — "Fix flaky login test in CI pipeline" — assignee MK
2. To do — medium — "Design empty states for the new dashboard" — AL
3. To do — low — "Write release notes for v2.4" — JD
4. In progress — high — "Migrate settings page to design tokens" — RS
5. In progress — medium — "Add keyboard shortcuts to the editor" — AL
6. Done — low — "Audit color contrast on marketing site" — JD

Good.

Theme: light default; toggle with a sun/moon icon. Use `document.documentElement.dataset.theme`.

Colors light: background #f4f5f8, column bg #eceef3 or white cards. Dark: #0f1117 bg, columns #171a21, cards #1e222b.

Accent: indigo #6366f1.

Let me write CSS carefully with variables.

```css
:root{
  --bg:#f2f4f8; --panel:#ffffff; --col:#e9ecf3; --text:#1a1d24; --muted:#6b7280;
  --border:#dfe3ec; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06);
  --accent:#6366f1;
  --high-bg:#fee2e2; --high-fg:#b91c1c;
  --med-bg:#fef3c7; --med-fg:#b45309;
  --low-bg:#dcfce7; --low-fg:#15803d;
}
[data-theme="dark"]{
  --bg:#0e1015; --panel:#151821; --col:#1a1e28; --text:#e6e9f0; --muted:#8b93a7;
  --border:#262b38; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.35);
  --accent:#818cf8;
  --high-bg:#4a1b1b; --high-fg:#fca5a5;
  --med-bg:#4a3410; --med-fg:#fcd34d;
  --low-bg:#14361f; --low-fg:#86efac;
}
```

Layout: body height 100vh, flex column, header fixed, board flex:1 overflow hidden, columns each with header + scrollable list. On mobile (<=700px) board becomes horizontal scroll with columns min-width 260px, or stack vertically. Better: horizontal scroll snap with min-width 280px so it feels like a kanban. But "No horizontal scrollbar" — hmm, page must not scroll horizontally. A horizontally scrollable inner container is fine (it's within the page). But maybe safer to stack columns vertically on narrow widths. Let's stack vertically for <760px: board grid-template-columns: 1fr, and the whole page scrolls vertically. That's cleaner.

Actually with 6 cards, stacking vertically is fine.

Body: overflow hidden on desktop, but on mobile allow vertical scroll. Use media query.

Let's structure:

```html
<div class="app">
  <header class="topbar">
    <div class="brand">
      <div class="logo">▦</div>
      <div>
        <h1>Product Board</h1>
        <p class="sub">Sprint 14 · 6 cards</p>  <!-- dynamic total -->
      </div>
    </div>
    <div class="actions">
      <div class="search">
        <svg .../>
        <input id="search" placeholder="Search cards…" />
      </div>
      <button id="themeBtn" class="icon-btn" title="Toggle theme">...</button>
      <button id="addBtn" class="primary">+ Add card</button>
    </div>
  </header>
  <main class="board" id="board">
    <section class="column" data-col="todo">
      <header class="col-head"><h2>To do</h2><span class="count">3</span></header>
      <div class="list" data-col="todo"></div>
    </section>
    ...
  </main>
</div>
```

Rendering approach: keep state array, render functions. Since we need DnD with placeholder, re-rendering on every dragover would break the drag. So: render fully on init, add, delete, theme (no need), search filter. During drag, manipulate DOM directly.

Simpler: keep `state = [{id,title,priority,col,assignee}]`. Render board fully with render(). For DnD, use placeholder element approach and only re-render after drop.

Render function rebuilds lists. Fine.

DnD details:

```js
let dragEl = null, placeholder = null;

function makePlaceholder(){
  const p = document.createElement('div');
  p.className = 'placeholder';
  return p;
}
```

On dragstart (delegated on board? dragstart doesn't bubble well... actually dragstart does bubble). Use delegation on the board container for dragstart, dragend.

```js
board.addEventListener('dragstart', e => {
  const card = e.target.closest('.card');
  if(!card) return;
  dragEl = card;
  card.classList.add('dragging');
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/plain', card.dataset.id);
  // set drag image after class added? default ok
  placeholder = document.createElement('div');
  placeholder.className = 'placeholder';
});
```

Note: setting .dragging with opacity 0.4 - the drag image may become translucent. Use `opacity:0.35` on the original; default drag image captured at dragstart... Chrome captures after dragstart, so it may show faded ghost. Better: keep card visible but add class after a timeout, or use a separate approach: add `.dragging` class in requestAnimationFrame/setTimeout 0. Common trick:

```js
setTimeout(() => card.classList.add('dragging'), 0);
```

That keeps ghost image solid. Good.

dragover on board:
```js
board.addEventListener('dragover', e => {
  if(!dragEl) return;
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  const list = e.target.closest('.list');
  if(!list) return;
  // remove highlight from others
  document.querySelectorAll('.column').forEach(c => c.classList.toggle('drag-over', c.contains(list)));
  const after = getDragAfterElement(list, e.clientY);
  if(after == null) list.appendChild(placeholder);
  else list.insertBefore(placeholder, after);
});
```

getDragAfterElement:
```js
function getDragAfterElement(container, y){
  const els = [...container.querySelectorAll('.card:not(.dragging)')].filter(el => el.style.display !== 'none' && !el.classList.contains('hidden'));
  let closest = {offset: -Infinity, el: null};
  for(const el of els){
    const box = el.getBoundingClientRect();
    const offset = y - box.top - box.height/2;
    if(offset < 0 && offset > closest.offset) closest = {offset, el};
  }
  return closest.el;
}
```

Wait, the standard algorithm: reduce over elements, offset = y - box.top - box.height/2, keep the largest negative offset. That gives the element right after the cursor. Yes.

Also need the empty column case: if list has no cards, placeholder appends — fine, and list needs min-height so it can be targeted. Give `.list` min-height and flex-grow.

Hmm, dragging over column with no cards: `e.target.closest('.list')` works if list has height. Set `.list { min-height: 80px; flex: 1; }`.

Drop:
```js
board.addEventListener('drop', e => {
  if(!dragEl) return;
  e.preventDefault();
  const list = e.target.closest('.list');
  if(list && placeholder && placeholder.parentNode === list){
    list.insertBefore(dragEl, placeholder);
  }
  // update state from DOM? or from computed target
  ...
});
```

Better: compute target column and index from placeholder position, update state, then render().

On drop:
```js
const list = placeholder.parentNode;
if(list){
  const col = list.dataset.col;
  const cards = [...list.children].filter(el => el !== placeholder && el.classList.contains('card'));
  ...
}
```
Simplify: insert dragEl before placeholder in DOM, remove placeholder, then rebuild state by reading the DOM order of each list. That's clean and robust:

```js
function syncStateFromDOM(){
  document.querySelectorAll('.list').forEach(list => {
    const col = list.dataset.col;
    [...list.querySelectorAll('.card')].forEach((el, i) => {
      const item = state.find(s => s.id === el.dataset.id);
      if(item) { item.col = col; item.order = i; }
    });
  });
}
```
Hmm ordering across columns... state array order. I'll just store order implicitly: on render, sort by state order within column. Simplest: after drop, rebuild state array ordered by DOM:

```js
function commitFromDOM(){
  const newState = [];
  document.querySelectorAll('.list').forEach(list => {
    [...list.querySelectorAll('.card')].forEach(el => {
      const item = state.find(s => String(s.id) === el.dataset.id);
      if(item) newState.push(item);
    });
  });
  state = newState;
}
```
Then render() will place cards in state order within their columns, preserving cross-column order. Nice and simple. But render() re-sorts... it filters state by col, preserving relative order. 

Actually careful: render() rebuilds the DOM entirely which is fine after drop.

But hidden cards (filtered out) — when dragging while filter is active, hidden cards are `display:none` and excluded from getDragAfterElement. But on commitFromDOM we'd lose their order... they're still in the DOM (just hidden with CSS class), so querySelectorAll picks them up. Good — keep hidden cards in DOM with `.hidden {display:none}` rather than removing them.

dragend: remove placeholder, remove .dragging, remove drag-over classes, dragEl = null.

Also `dragleave` on board to clear highlight — use pointer leaving column. Simpler: on dragover, toggle drag-over on the hovered column only.

Now the placeholder styling: dashed border, height 64px, background accent tint, animated. Good visual indicator.

Add card modal:
```html
<div class="modal-backdrop" id="modal" hidden>
  <div class="modal" role="dialog" aria-modal="true">
    <h2>New card</h2>
    <form id="cardForm">
      <label>Title <input id="titleInput" required maxlength="80" placeholder="e.g. Ship onboarding email"></label>
      <fieldset>priority radios</fieldset>
      <label>Column select</label>
      <div class="modal-actions"><button type=button cancel>Cancel</button><button type=submit>Add card</button></div>
    </form>
  </div>
</div>
```

Validation: title required — trim, if empty show error message + red border. Use `required` attribute plus custom check.

Escape key closes modal.

Delete: confirm? No alert/confirm allowed. Just delete immediately with a subtle animation.

Let's add a slight animation for new cards: keyframe pop.

Search: input event → filter. Also show "No cards match" empty state per column when filtered list is empty? Maybe a global "no results" message. I'll add per-column empty text: "No cards match" if filter active, else "Drop cards here".

Let's write render():

```js
function render(){
  const q = searchInput.value.trim().toLowerCase();
  let total = 0, shown = 0;
  COLUMNS.forEach(col => {
    const list = document.querySelector(`.list[data-col="${col.id}"]`);
    list.innerHTML = '';
    const items = state.filter(s => s.col === col.id);
    items.forEach(item => {
      const el = cardEl(item);
      const match = !q || item.title.toLowerCase().includes(q) || (item.priority.includes(q));
      if(!match) el.classList.add('hidden');
      list.appendChild(el);
    });
    const matched = items.filter(i => !q || i.title.toLowerCase().includes(q)).length;
    ...
  });
}
```

Hmm filter by title only per requirement. Keep title only.

Count badge: if q → `${matched}/${items.length}` else items.length. And when q and matched===0, show empty message.

Also add "filtered" indicator? Keep simple.

Card element creation:

```js
function cardEl(item){
  const el = document.createElement('article');
  el.className = 'card';
  el.draggable = true;
  el.dataset.id = item.id;
  el.innerHTML = `
    <div class="card-head">
      <span class="badge ${item.priority}">${LABEL[item.priority]}</span>
      <button class="del" title="Delete card" aria-label="Delete card">✕</button>
    </div>
    <p class="card-title">${escapeHtml(item.title)}</p>
    <div class="card-foot">
      <span class="key">${item.key}</span>
      <span class="avatar" data-i="${item.assignee}">${item.assignee}</span>
    </div>`;
  return el;
}
```

escapeHtml needed since title is user input. Use a helper with textContent.

Better to build elements with textContent for title to avoid XSS. I'll do innerHTML for structure then set title via textContent. Actually simpler: escape function.

```js
const esc = s => s.replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
```

Avatar: colored circle with initials. Use hue based on index.

Now the id/key: "PB-101" etc.

Let's write the full HTML.

Header sub: "Sprint 14 · N cards" dynamic — update in render.

Theme toggle: button with sun/moon SVG swapped. Simpler: use two spans and CSS to show/hide based on data-theme. Or set innerHTML in JS.

I'll do:
```js
function setTheme(t){
  document.documentElement.dataset.theme = t;
  themeBtn.innerHTML = t === 'dark' ? SUN_SVG : MOON_SVG;
  themeBtn.title = ...
}
```

Use emoji? Prefer SVG for crispness. Let's do simple SVG icons.

Search icon SVG inside the input wrapper.

Let's write CSS in detail.

```css
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background .25s, color .25s;
  -webkit-font-smoothing: antialiased;
}
.app{display:flex; flex-direction:column; height:100vh; height:100dvh;}
```

Header:
```css
.topbar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 24px; border-bottom:1px solid var(--border);
  background: var(--panel);
}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:0 6px 16px rgba(99,102,241,.35)}
h1{font-size:16px;margin:0;font-weight:650;letter-spacing:-.01em}
.sub{margin:2px 0 0;font-size:12px;color:var(--muted)}
```

Actions: search + theme + add button.

```css
.search{position:relative}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search input{
  width:230px; padding:9px 12px 9px 34px; border-radius:10px; border:1px solid var(--border);
  background: var(--bg); color:var(--text); font-size:13px; outline:none; transition:.2s;
}
.search input:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(...)}
```
color-mix might be fine in Chrome latest. Safer: use rgba accent ring: `box-shadow:0 0 0 3px rgba(99,102,241,.18)`.

Buttons:
```css
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);display:grid;place-items:center;background:var(--panel);color:var(--muted);transition:.18s}
.icon-btn:hover{color:var(--text);border-color:var(--muted)}
.primary{background:var(--accent);color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:0 6px 16px rgba(99,102,241,.3);transition:.18s}
.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
```

Board:
```css
.board{
  flex:1; min-height:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
  padding:20px 24px 24px; overflow:hidden;
}
.column{
  display:flex;flex-direction:column;min-height:0;
  background:var(--col); border-radius:16px; border:1px solid var(--border);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.column.drag-over{ border-color:var(--accent); box-shadow: inset 0 0 0 2px rgba(99,102,241,.25); }
```

Hmm background --col in dark = #1a1e28 with border. Fine.

Column header:
```css
.col-head{display:flex;align-items:center;gap:8px;padding:14px 16px 10px}
.col-head h2{font-size:13px;font-weight:650;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin:0}
.count{margin-left:auto;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--panel);color:var(--muted);border:1px solid var(--border)}
```
Also a colored dot per column status. Add `.dot` with color.

List:
```css
.list{flex:1;min-height:120px;overflow-y:auto;padding:6px 12px 14px;display:flex;flex-direction:column;gap:10px}
```
Careful: with display:flex column and gap, placeholder insert works fine.

Scrollbar styling: `::-webkit-scrollbar{width:8px}` thumb.

Card:
```css
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:11px 12px; box-shadow:var(--shadow); cursor:grab;
  transition: transform .15s, box-shadow .15s, opacity .15s, border-color .15s;
  animation: pop .18s ease-out;
}
.card:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(16,24,40,.12)}
.card.dragging{opacity:.4; cursor:grabbing}
.card.hidden{display:none}
```

Hmm .card:hover transform while dragging... fine.

Card head: badge left, delete right.
```css
.card-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.badge{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.badge.high{background:var(--high-bg);color:var(--high-fg)}
...
.del{margin-left:auto;width:22px;height:22px;border-radius:6px;font-size:12px;line-height:1;color:var(--muted);display:grid;place-items:center;opacity:0;transition:.15s}
.card:hover .del,.card:focus-within .del{opacity:1}
.del:hover{background:rgba(239,68,68,.14);color:#ef4444}
```
On touch devices opacity 0 hides it — add media (hover:none){ .del{opacity:1} }.

Card title: font-size 13.5, line-height 1.45, margin 0 0 10px, font-weight 500.

Card foot: key text + avatar.
```css
.card-foot{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.key{font-family:ui-monospace,monospace;font-size:10.5px;letter-spacing:.02em}
.avatar{margin-left:auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff}
```
Avatar colors: assign via inline style background from a palette by hashing initials.

Placeholder:
```css
.placeholder{
  border:2px dashed rgba(99,102,241,.55);
  background:rgba(99,102,241,.10);
  border-radius:12px; height:62px; flex:0 0 auto;
  animation: dashPulse 1s ease-in-out infinite alternate;
}
```

Empty state text in column when no visible cards:
```html
<p class="empty">Drop cards here</p>
```
Add via JS in render if no visible cards.

Modal:
```css
.modal-backdrop{position:fixed;inset:0;background:rgba(15,18,25,.5);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;z-index:50;animation:fade .15s}
.modal-backdrop[hidden]{display:none}
.modal{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 30px 60px rgba(0,0,0,.3);animation:rise .2s ease-out}
```

Inputs:
```css
.field{display:block;margin-bottom:16px}
.field > span{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.field input[type=text], select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:13.5px;outline:none;font-family:inherit}
.field input:focus, select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.18)}
.field.invalid input{border-color:#ef4444}
.err{color:#ef4444;font-size:11.5px;margin-top:6px;display:none}
.field.invalid .err{display:block}
```

Priority segmented control: radio inputs hidden with labels styled.

```html
<div class="seg" role="radiogroup">
  <label><input type="radio" name="prio" value="low"><span>Low</span></label>
  ...
</div>
```
CSS: `.seg{display:flex;gap:8px}` `.seg label{flex:1}` `.seg input{position:absolute;opacity:0;pointer-events:none}` `.seg span{display:block;text-align:center;padding:8px;border-radius:9px;border:1px solid var(--border);font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s}` `.seg input:checked + span{...}` per value using :has or attribute selectors:

`.seg input[value="low"]:checked + span{background:var(--low-bg);color:var(--low-fg);border-color:transparent}` etc. Good.

Also focus-visible ring.

Responsive: 
```css
@media (max-width:900px){ .search input{width:170px} }
@media (max-width:760px){
  .app{height:auto;min-height:100vh}
  .board{grid-template-columns:1fr;overflow:visible;padding:14px}
  .list{overflow:visible}
  body{overflow-y:auto}
  .topbar{padding:12px 14px}
  .search{flex:1 1 100%; order:3} .search input{width:100%}
}
```
Careful with `.app{height:100vh; display:flex; flex-direction:column}` and board overflow hidden. On mobile set `.app{height:auto}` and body scrolls.

Actually with `html,body{height:100%}` and body overflow auto it's fine.

Let me also make the desktop list scrollable when crowded (overflow-y:auto).

Now JS.

```js
const COLUMNS = [
  {id:'todo', name:'To do'},
  {id:'doing', name:'In progress'},
  {id:'done', name:'Done'}
];

let state = [
  {id:1, title:'Fix flaky login test in CI pipeline', priority:'high', col:'todo', key:'PB-101', who:'MK'},
  {id:2, title:'Design empty states for the new dashboard', priority:'medium', col:'todo', key:'PB-102', who:'AL'},
  {id:3, title:'Write release notes for v2.4', priority:'low', col:'todo', key:'PB-103', who:'JD'},
  {id:4, title:'Migrate settings page to design tokens', priority:'high', col:'doing', key:'PB-104', who:'RS'},
  {id:5, title:'Add keyboard shortcuts to the editor', priority:'medium', col:'doing', key:'PB-105', who:'AL'},
  {id:6, title:'Audit color contrast on marketing site', priority:'low', col:'done', key:'PB-106', who:'JD'}
];
let nextId = 7, nextKey = 107;
```

Build columns statically in HTML? I'll build via JS to avoid duplication... but static HTML is more robust for first paint. Since JS runs immediately, either is fine. I'll write static HTML for the 3 columns with empty lists and fill via render(). Good.

render():
```js
function render(){
  const q = searchEl.value.trim().toLowerCase();
  let total = 0;
  COLUMNS.forEach(c => {
    const list = document.querySelector(`.list[data-col="${c.id}"]`);
    const items = state.filter(s => s.col === c.id);
    total += items.length;
    list.innerHTML = '';
    let visible = 0;
    items.forEach(item => {
      const el = cardEl(item);
      if(q && !item.title.toLowerCase().includes(q)) el.classList.add('hidden');
      else visible++;
      list.appendChild(el);
    });
    if(visible === 0){
      const p = document.createElement('p');
      p.className = 'empty';
      p.textContent = q ? 'No matching cards' : 'Drop cards here';
      list.appendChild(p);
    }
    const countEl = list.parentElement.querySelector('.count');
    countEl.textContent = q ? `${visible}/${items.length}` : String(items.length);
  });
  document.getElementById('sub').textContent = `Sprint 14 · ${total} card${total===1?'':'s'}${q ? ' · filtered' : ''}`;
}
```

Hmm the `.empty` element inside the list — during drag, `getDragAfterElement` selects `.card` only, ok. And placeholder appended after `.empty` – fine. But the empty element would remain during drag, showing "Drop cards here" plus placeholder. Acceptable; actually I could remove `.empty` on dragover. Minor. Let's remove empties at dragstart and re-render at dragend (render() is called after drop; on dragend without drop, call render() too... but render() during dragend after a drop is fine—it'll rebuild). Careful: after drop we call commitFromDOM + render(). On dragend we clean up. Order: drop fires before dragend. So in drop: insert into DOM, commitFromDOM, remove placeholder, dragEl.classList.remove('dragging')? Then dragend fires and removes placeholder (already removed) and calls render? Let's just do everything in dragend for cleanup, and in drop do the DOM move + commit + render.

Plan:
- drop: e.preventDefault(); if placeholder in a list → list.insertBefore(dragEl, placeholder); commitFromDOM(); render(); (render rebuilds lists, so placeholder & dragEl are discarded — fine)
- dragend: remove placeholder if still attached; if dragEl, remove .dragging; clear dragEl; reset drag-over classes. Since render() replaced nodes, dragEl is detached; harmless.

But if drop doesn't happen (dropped outside), we need the placeholder removed and layout restored. dragend handles it (remove placeholder, unhide card opacity). Good.

Also the `.empty` removal: at dragstart remove all `.empty`. If drag ends without drop, we must restore — call render() in dragend always. That's easy and safe. But render() during dragend while dragEl added .dragging... render creates fresh nodes, no issue. Let's do: dragend → dragEl=null; placeholder=null; render(); clear highlights. Actually render() rebuilds everything, so highlights on columns are on .column elements (not rebuilt) — clear them manually.

Simplify: on dragstart, remove empties from all lists (just remove `.empty` elements). On dragend → render() to restore.

Hmm but render() on drop then again on dragend = double render. Fine, cheap.

Actually careful: drop fires, we insert and render — the dragend then calls render again. No harm.

Let's write it.

```js
const board = document.querySelector('.board');
let dragEl = null, placeholder = null;

board.addEventListener('dragstart', e => {
  const card = e.target.closest('.card');
  if(!card || !board.contains(card)) return;
  dragEl = card;
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/plain', card.dataset.id);
  placeholder = document.createElement('div');
  placeholder.className = 'placeholder';
  document.querySelectorAll('.empty').forEach(el => el.remove());
  setTimeout(() => card.classList.add('dragging'), 0);
});
```

Wait: the `.dragging` class adds opacity .4 — since we use setTimeout, ghost is solid. But the card shrinking opacity also changes layout? No, only opacity.

dragover:
```js
board.addEventListener('dragover', e => {
  if(!dragEl) return;
  const list = e.target.closest('.list');
  if(!list) return;          // still allow? we need preventDefault only over lists
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  highlight(list.parentElement);
  const after = getAfter(list, e.clientY);
  if(after) list.insertBefore(placeholder, after);
  else list.appendChild(placeholder);
});
```

But `e.target.closest('.list')` — when dragging over the column padding area (col-head), no list → no preventDefault → drop not allowed there. Add: also handle `.column` — if target is column but not list, use its list. Let's compute:

```js
const colEl = e.target.closest('.column');
if(!colEl) return;
e.preventDefault();
const list = colEl.querySelector('.list');
```

That way dropping anywhere on the column works, and the placeholder lands in the list. But if hovering over col-head, getAfter with y in header → returns first card → placeholder at top. Fine.

Hmm, but then the `.list` scroll container: getBoundingClientRect on cards inside scroll works with viewport coords, fine.

highlight: 
```js
function highlight(colEl){
  document.querySelectorAll('.column').forEach(c => c.classList.toggle('drag-over', c === colEl));
}
```

drop:
```js
board.addEventListener('drop', e => {
  if(!dragEl) return;
  e.preventDefault();
  const colEl = e.target.closest('.column');
  if(colEl){
    const list = colEl.querySelector('.list');
    if(placeholder && placeholder.parentNode === list){
      list.insertBefore(dragEl, placeholder);
    } else if (!list.contains(dragEl)) {
      list.appendChild(dragEl);
    }
    commitFromDOM();
  }
  finishDrag();
});

function finishDrag(){
  if(placeholder && placeholder.parentNode) placeholder.remove();
  if(dragEl) dragEl.classList.remove('dragging');
  dragEl = null; placeholder = null;
  document.querySelectorAll('.column').forEach(c => c.classList.remove('drag-over'));
  render();
}
board.addEventListener('dragend', finishDrag);
```
Note dragend fires on the source element which may be detached after render in drop → finishDrag called twice. Second time dragEl already null → early return? finishDrag would still render. Guard: if(!dragEl && !placeholder) return; Hmm but drop already set them null. Let's make finishDrag idempotent but still render. Rendering twice is fine. But second call would be from a detached element — the listener is on board (delegation) so dragend bubbles from the detached? If element detached, event may not bubble to board. Either way fine.

Actually wait: drop calls commitFromDOM() then finishDrag() which calls render(). Good.

One issue: `list.insertBefore(dragEl, placeholder)` — dragEl is currently in the DOM in another list; insertBefore moves it. Fine.

If the drop target list doesn't contain placeholder (e.g., drop happened on the column but dragover never placed it), fallback appends. Good enough.

getAfter:
```js
function getAfter(list, y){
  const cards = [...list.querySelectorAll('.card')].filter(c => c !== dragEl);
  let best = null, bestOffset = -Infinity;
  for(const c of cards){
    const r = c.getBoundingClientRect();
    const off = y - r.top - r.height / 2;
    if(off < 0 && off > bestOffset){ bestOffset = off; best = c; }
  }
  return best;
}
```

Delete: delegated click on board:
```js
board.addEventListener('click', e => {
  const btn = e.target.closest('.del');
  if(!btn) return;
  const card = btn.closest('.card');
  const id = Number(card.dataset.id);
  card.style.transition = 'opacity .15s, transform .15s';
  card.style.opacity = '0';
  card.style.transform = 'scale(.95)';
  state = state.filter(s => s.id !== id);
  setTimeout(render, 130);
});
```
Hmm render sooner might be fine. Use setTimeout 140.

Add form submit:
```js
form.addEventListener('submit', e => {
  e.preventDefault();
  const title = titleInput.value.trim();
  if(!title){ field.classList.add('invalid'); titleInput.focus(); return; }
  state.push({id:nextId++, title, priority: prioValue(), col: colSelect.value, key:'PB-'+(nextKey++), who:'YOU'});
  closeModal();
  render();
});
```

Actually `who:'YOU'` – avatar initials "YO"? Use "ME". Fine.

Open modal: reset form, set default priority medium, column todo (or the column clicked? nice touch — but keep simple). Focus title after a tick.

Escape closes.

Theme toggle:
```js
let theme = 'light';
themeBtn.addEventListener('click', () => {
  theme = theme === 'light' ? 'dark' : 'light';
  document.documentElement.dataset.theme = theme;
  themeBtn.innerHTML = theme==='dark' ? SUN : MOON;
});
```
Initial: set on load.

Actually simpler: set the SVG via CSS display based on data-theme in the HTML with both icons. But innerHTML swap is fine. I'll write icons as constants.

Sun icon: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>`

Moon: `<svg ...><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>`

Default theme: light. Hmm the screenshot comparison — light looks clean. Yes light default.

Let's think about first-paint appearance at 1280×800: header ~70px, board padding 20, columns fill. Card heights ~85px each; 3 cards in To do = ~280px, fine.

Make sure columns have decent height: they stretch by grid.

Also add a subtle "Sprint 14" and maybe a header row per column with colored dot:
- To do: gray/blue dot
- In progress: amber
- Done: green

Add `.dot{width:8px;height:8px;border-radius:50%}` with modifier colors via column data-col attribute:
```css
.column[data-col="todo"] .dot{background:#94a3b8}
.column[data-col="doing"] .dot{background:#f59e0b}
.column[data-col="done"] .dot{background:#22c55e}
```

Also maybe a "＋" button in column header to add to that column. Nice extra: clicking opens modal with that column preselected. Let's add small "+" icon button in column head. Good UX.

Column head layout: dot, h2, count, spacer, add button. Use `.col-head` with `gap:8px`, count `margin-left:auto`.

Order: dot, h2, count(badge), then add-btn. Put count right after h2 maybe. I'll do: dot, h2, count, spacer, addBtn → count `margin-left:8px`, addBtn `margin-left:auto`.

Now, writing the code.

Also make sure that dragging works with hidden cards while filtering — fine.

Edge: `card.draggable = true` and clicking the delete button inside a draggable element — fine in Chrome.

Let me write the final HTML.

One more thing: `user-select:none` on cards so dragging doesn't select text.

Also for the drop indicator clarity: when the placeholder is at the end of the list, it shows a dashed slot. Good.

Let me finalize the code.

```html
<!doctype html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Kanban Board</title>
<style>...</style>
</head>
<body>
<div class="app">
  <header class="topbar">...</header>
  <main class="board">
    <section class="column" data-col="todo">
      <div class="col-head">
        <span class="dot"></span>
        <h2>To do</h2>
        <span class="count">0</span>
        <button class="add-mini" data-col="todo" aria-label="Add card to To do">+</button>
      </div>
      <div class="list" data-col="todo"></div>
    </section>
    ...
  </main>
</div>
<div class="modal-backdrop" id="backdrop" hidden>...</div>
<script>...</script>
</body>
</html>
```

The add-mini button in the col-head is inside the column; dragover over it still resolves to the column → fine.

Careful: `board.addEventListener('click')` for `.del` and also `.add-mini` — handle both.

CSS for `.add-mini`: `margin-left:auto;width:22px;height:22px;border-radius:6px;color:var(--muted);font-size:16px;line-height:1;display:grid;place-items:center` hover bg.

Now write everything out.

For the modal select styling, add appearance none and a chevron? Keep default but styled. Fine.

Modal HTML:

```html
<div class="modal-backdrop" id="backdrop" hidden>
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <div class="modal-head">
      <h2 id="modalTitle">New card</h2>
      <button class="icon-btn close" id="closeBtn" aria-label="Close">✕</button>
    </div>
    <form id="cardForm" novalidate>
      <label class="field" id="titleField">
        <span>Title</span>
        <input id="titleInput" type="text" maxlength="90" placeholder="e.g. Ship onboarding email" autocomplete="off">
        <em class="err">A title is required.</em>
      </label>
      <div class="field">
        <span>Priority</span>
        <div class="seg" role="radiogroup" aria-label="Priority">
          <label><input type="radio" name="prio" value="low"><span>Low</span></label>
          <label><input type="radio" name="prio" value="medium" checked><span>Medium</span></label>
          <label><input type="radio" name="prio" value="high"><span>High</span></label>
        </div>
      </div>
      <label class="field">
        <span>Column</span>
        <select id="colSelect">
          <option value="todo">To do</option>
          <option value="doing">In progress</option>
          <option value="done">Done</option>
        </select>
      </label>
      <div class="modal-actions">
        <button type="button" class="ghost" id="cancelBtn">Cancel</button>
        <button type="submit" class="primary">Add card</button>
      </div>
    </form>
  </div>
</div>
```

`.err` styled as block with display none by default — use `<em>` with class and CSS.

Note `.field > span` selector also matches the seg's inner spans? No — `.seg` is not a direct child of `.field`... `.field > span` only direct children. The seg labels contain spans but they're not direct children. But the "Priority" span is a direct child. Fine. However `.field > span` would style the seg? no.

Careful with `.field` being a `<label>` containing radio inputs — clicking the label text toggles the first radio. The "Priority" field is a div, not a label. Good.

But `<label class="field">` for title/select is fine.

Now JS specifics.

```js
const $ = s => document.querySelector(s);
```

Let's write it all.

const state arrays etc.

Priority label map: {low:'Low', medium:'Medium', high:'High'}.

Avatar colors: palette `['#6366f1','#0ea5e9','#f59e0b','#10b981','#ec4899','#8b5cf6']`; hash by initials char codes.

Write `avatarStyle(who)`: sum char codes % palette.length.

Now writing final.

Also should search filter by priority too? Requirement says by title. Keep title only (maybe also key). Just title.

Let me write CSS fully now, being careful.

```css
*{box-sizing:border-box}
:root{
  --bg:#eef1f7;
  --panel:#ffffff;
  --col:#e6eaf3;
  --text:#171b24;
  --muted:#6b7484;
  --border:#dbe0eb;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 3px 10px rgba(16,24,40,.05);
  --shadow-hover:0 6px 18px rgba(16,24,40,.12);
  --accent:#6366f1;
  --ring:rgba(99,102,241,.18);
  --high-bg:#fee2e2;--high-fg:#b42318;
  --med-bg:#fef0c7;--med-fg:#b54708;
  --low-bg:#d1fadf;--low-fg:#067647;
  --placeholder-bg:rgba(99,102,241,.08);
  --placeholder-br:rgba(99,102,241,.5);
}
html[data-theme="dark"]{
  --bg:#0d0f14;
  --panel:#171b24;
  --col:#131720;
  --text:#e7eaf1;
  --muted:#8b93a7;
  --border:#242a38;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.35);
  --shadow-hover:0 8px 22px rgba(0,0,0,.5);
  --accent:#818cf8;
  --ring:rgba(129,140,248,.25);
  --high-bg:#4a1d1d;--high-fg:#fda4a4;
  --med-bg:#483415;--med-fg:#fcd34d;
  --low-bg:#123a24;--low-fg:#6ee7a0;
  --placeholder-bg:rgba(129,140,248,.10);
  --placeholder-br:rgba(129,140,248,.55);
}
```

In dark, --col darker than --panel so cards pop. Good.

Body background subtle gradient? Maybe `background: radial-gradient(1200px 600px at 50% -10%, rgba(99,102,241,.10), transparent), var(--bg)`. Nice touch, works in dark too.

Ok writing final answer now.

One detail: `.board { overflow:hidden }` and columns with internal scroll. On mobile stacked.

Let me handle `body{overflow:hidden}` on desktop to avoid page scroll: `.app{height:100vh}` with `overflow:hidden`. On mobile, `.app{height:auto}` and body `overflow-y:auto`.

Since `html,body{height:100%}` and `.app{height:100vh}` this should be fine.

Write the JS carefully.

```js
(function(){
  const COLUMNS = ['todo','doing','done'];
  const PRIORITY_LABEL = {low:'Low', medium:'Medium', high:'High'};
  const AVATAR_COLORS = ['#6366f1','#0ea5e9','#f59e0b','#10b981','#ec4899','#8b5cf6'];

  let state = [...];
  let nextId = 7;
  let nextKey = 107;

  const board = document.getElementById('board');
  const searchEl = document.getElementById('search');
  const backdrop = document.getElementById('backdrop');
  const form = document.getElementById('cardForm');
  const titleInput = document.getElementById('titleInput');
  const titleField = document.getElementById('titleField');
  const colSelect = document.getElementById('colSelect');
  const subEl = document.getElementById('sub');
  const themeBtn = document.getElementById('themeBtn');
  ...
})();
```

Since I use IIFE, fine.

`esc` helper. Build card.

```js
function avatarColor(who){
  let h = 0;
  for(const ch of who) h = (h*31 + ch.charCodeAt(0)) % 997;
  return AVATAR_COLORS[h % AVATAR_COLORS.length];
}

function cardEl(item){
  const el = document.createElement('article');
  el.className = 'card';
  el.draggable = true;
  el.dataset.id = item.id;
  el.innerHTML =
    '<div class="card-head">' +
      '<span class="badge ' + item.priority + '">' + PRIORITY_LABEL[item.priority] + '</span>' +
      '<button class="del" type="button" aria-label="Delete card" title="Delete card">✕</button>' +
    '</div>' +
    '<p class="card-title"></p>' +
    '<div class="card-foot">' +
      '<span class="key">' + esc(item.key) + '</span>' +
      '<span class="avatar" style="background:' + avatarColor(item.who) + '">' + esc(item.who) + '</span>' +
    '</div>';
  el.querySelector('.card-title').textContent = item.title;
  return el;
}
```

Good.

Now render as described.

For search "filtered" state: count badge shows visible/total.

Let's write everything out now. Also add `aria-live` maybe not needed.

Final check on mobile: `.topbar` flex-wrap; brand margin-right auto; actions wrap. At 375px: brand (logo+text) then search full width, then theme+add. Let's define:

```css
@media (max-width:760px){
  .topbar{padding:12px 14px;gap:10px}
  .brand{flex:1 1 100%}
  .actions{display:flex;gap:8px;width:100%;flex-wrap:wrap}
  .search{flex:1 1 140px;order:1}
  .search input{width:100%}
  .primary{flex:0 0 auto}
}
```
Wait `.actions` currently is a flex container already: `display:flex;gap:10px;align-items:center`. On mobile, make it `flex:1 1 100%` with wrap.

Structure:
```html
<div class="actions">
  <div class="search">...</div>
  <button id="themeBtn" class="icon-btn">…</button>
  <button id="addBtn" class="primary">+ Add card</button>
</div>
```
On mobile: search grows full row (flex 1 1 100%), then theme + add on the next row. Set `.search{flex:1 1 100%}` and `.actions{flex-wrap:wrap}`. Then themeBtn and addBtn sit in a row. Good.

Alright, write it.

For the "+ Add card" button text on mobile, keep it.

Also I should ensure the first paint looks alive: render() is called at the end of the script. Yes.

Now finalize. I'll write out the whole file.

One more: `getAfter` includes `.card` elements hidden by filter (display:none) — getBoundingClientRect gives zeros → off = y - 0 - 0 = y > 0 → not < 0 so excluded naturally? If y positive, off > 0 → not selected. But if y is negative (never). But it could be selected as "best" never since off<0 required. Fine, but rect height 0 → offset = y - top(0) = y ≥ 0 → not < 0 → skipped. Good.

Also the dragging card itself is in the list; filter `c !== dragEl`. Since we inserted `placeholder` not the dragEl (dragEl stays in place until drop), we must exclude it. Yes handled.

Writing final code.

For the card animation `pop` — but render() is called on every search keystroke, which would re-animate all cards. That's a bit flashy but acceptable... Actually it could look janky. Better: only animate newly added cards. Use a class `new` applied only when adding. I'll skip the entrance animation for all cards and add it only on the add path (render then find card and add class). Hmm, simpler: remove animation entirely, or use a subtle one. Let's do: `render()` gives no animation; when a card is added, after render, find the element and add class `pop` which has animation. Good.

CSS:
```css
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.card.pop{animation:pop .22s ease-out}
```

Alright. Writing.

Delete animation: I set inline opacity/transform then re-render after 130ms — but transition on `.card` includes transform .15s and opacity .15s (I'll include). Fine.

Let me write the final CSS for the list scrollbar:

```css
.list::-webkit-scrollbar{width:8px}
.list::-webkit-scrollbar-thumb{background:rgba(120,130,150,.35);border-radius:99px}
.list::-webkit-scrollbar-track{background:transparent}
```

OK, final answer.