Models 44
Claude Haiku 4.5AnthropicClaude Haiku 5.5AnthropicClaude Opus 5.5AnthropicClaude Sonnet 5.5AnthropicNorth Mini Code (free)CohereDeepSeek V4 Flash 0423DeepSeekDeepSeek V4 Pro 0813DeepSeekDeepSeek V4.1 Flash 1017DeepSeekDots3-Note Preview (free)Dots StudioGemini 3.1 Flash LiteGoogleGemini 3.8 FlashGoogleGemini 4 ArgonGoogleGemini 4 HydrogenGoogleGemma 4 31BGoogleLFM2.5-2.6B (free)LiquidAILFM3-1.7B (free)LiquidAIMuse EmberMetaMiniMax M3MiniMaxMiniMax M3.1 FlashMiniMaxMinistral 3 14B 2512MistralMistral Large 4MistralMistral Small 4MistralKimi K3.1 ProMoonshotAINemotron 3 Nano Omni (free)NVIDIANemotron 3 SuperNVIDIANemotron 3 Ultra (free)NVIDIANemotron 3.5 Lightning (free)NVIDIANemotron 3.5 Super VL (free)NVIDIAGPT-5 NanoOpenAIGPT-6 LunaOpenAIGPT-6 Luna ProOpenAIGPT-6.1 SolOpenAIGPT-6.1 TerraOpenAIgpt-oss-120bOpenAIQwen3 Coder NextQwenQwen3.8 FlashQwenQwen3.8 Max (0902)QwenFlint (free)RecursiveGrok 4.7SpaceXAIMiMo-V2.6-FlashXiaomiMiMo-V2.6-ProXiaomiXing4.0 29B A4B (free)XingChenGLM 5.3Z.aiGLM 5.3 FlashZ.ai
Kanban board

Mistral Small 4

by MistralReasoningClean
Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
51.5 s
Cost
$0.0071
Output tokens
10,672
Spent thinking
6,098 tokens
Speed
209.9 tok/s
Console errors
0
First token after
632 ms
First visible text after
32.5 s
Prompt tokens
514
Code size
20.2 KB
Finish reason
stop
Served by
Mistral
Model id
mistralai/mistral-small-2603
Reasoning sent
{"effort":"high"}
Max output
209,715 tokens
Generated
Nov 12, 2026

What it was asked

The prompt
Build an interactive Kanban board in vanilla HTML, CSS and JavaScript (no framework, no library). Requirements: - Three columns: "To do", "In progress", "Done", each showing its card count. - Pre-populate the board with 6 realistic cards spread across the columns so the first screenshot looks alive. - Each card has a title and a priority (low / medium / high) shown as a colored badge. - Add a card through a small modal form (title required), and delete a card with a button on it. - Drag and drop cards between columns with the mouse, with a clear visual drop indicator. - A search field that filters cards live by title. - A light / dark theme toggle. - State lives in memory only (no storage APIs).
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 641 lines

Download
<!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>
        :root {
            --bg-primary: #f5f5f5;
            --bg-secondary: #ffffff;
            --text-primary: #333333;
            --text-secondary: #666666;
            --border-color: #dddddd;
            --shadow: 0 2px 8px rgba(0,0,0,0.1);
            --card-bg: #ffffff;
            --card-border: #eeeeee;
            --priority-low: #4CAF50;
            --priority-medium: #FF9800;
            --priority-high: #F44336;
            --column-bg: #f9f9f9;
        }

        [data-theme="dark"] {
            --bg-primary: #1a1a1a;
            --bg-secondary: #2d2d2d;
            --text-primary: #f0f0f0;
            --text-secondary: #cccccc;
            --border-color: #444444;
            --shadow: 0 2px 8px rgba(0,0,0,0.3);
            --card-bg: #333333;
            --card-border: #444444;
            --priority-low: #8BC34A;
            --priority-medium: #FFC107;
            --priority-high: #E91E63;
            --column-bg: #222222;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .search-container {
            flex: 1;
            min-width: 250px;
            position: relative;
        }

        #search {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background-color: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 16px;
        }

        .header-actions {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        #add-card-btn {
            padding: 12px 20px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        #add-card-btn:hover {
            background-color: #0b7dda;
        }

        #theme-toggle {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--text-primary);
            padding: 8px;
        }

        .board {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            padding-bottom: 20px;
        }

        .column {
            flex: 1;
            min-width: 280px;
            background-color: var(--column-bg);
            border-radius: 8px;
            padding: 15px;
            box-shadow: var(--shadow);
        }

        .column-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--border-color);
        }

        .column-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .card-count {
            background-color: var(--text-secondary);
            color: var(--bg-secondary);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
        }

        .cards-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .card {
            background-color: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 6px;
            padding: 15px;
            box-shadow: var(--shadow);
            cursor: grab;
            transition: transform 0.1s, box-shadow 0.1s;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .card.dragging {
            opacity: 0.5;
            background-color: var(--bg-secondary);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .card-title {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
            flex: 1;
        }

        .priority-badge {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            color: white;
            margin-left: 8px;
        }

        .priority-low {
            background-color: var(--priority-low);
        }

        .priority-medium {
            background-color: var(--priority-medium);
        }

        .priority-high {
            background-color: var(--priority-high);
        }

        .delete-card {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 16px;
            padding: 4px;
            margin-left: 8px;
        }

        .delete-card:hover {
            color: var(--text-primary);
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: var(--bg-secondary);
            padding: 30px;
            border-radius: 8px;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .modal-title {
            font-size: 20px;
            font-weight: 600;
        }

        .close-modal {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--text-secondary);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-primary);
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background-color: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 16px;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #2196F3;
        }

        #add-card-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        #submit-card {
            padding: 12px 20px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        #submit-card:hover {
            background-color: #0b7dda;
        }

        #submit-card:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        .drop-indicator {
            height: 4px;
            background-color: #2196F3;
            border-radius: 2px;
            margin-bottom: 8px;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .drop-indicator.active {
            opacity: 1;
        }

        @media (max-width: 768px) {
            .board {
                flex-direction: column;
            }

            .column {
                min-width: 100%;
            }

            .header {
                flex-direction: column;
                align-items: stretch;
            }

            .header-actions {
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="search-container">
            <input type="text" id="search" placeholder="Search cards...">
        </div>
        <div class="header-actions">
            <button id="theme-toggle" title="Toggle theme">🌓</button>
            <button id="add-card-btn">Add Card</button>
        </div>
    </div>

    <div class="board">
        <div class="column" data-column="todo">
            <div class="column-header">
                <div class="column-title">To do</div>
                <div class="card-count" id="todo-count">0</div>
            </div>
            <div class="drop-indicator" id="todo-drop-indicator"></div>
            <div class="cards-container" id="todo-cards"></div>
        </div>

        <div class="column" data-column="in-progress">
            <div class="column-header">
                <div class="column-title">In progress</div>
                <div class="card-count" id="in-progress-count">0</div>
            </div>
            <div class="drop-indicator" id="in-progress-drop-indicator"></div>
            <div class="cards-container" id="in-progress-cards"></div>
        </div>

        <div class="column" data-column="done">
            <div class="column-header">
                <div class="column-title">Done</div>
                <div class="card-count" id="done-count">0</div>
            </div>
            <div class="drop-indicator" id="done-drop-indicator"></div>
            <div class="cards-container" id="done-cards"></div>
        </div>
    </div>

    <div class="modal" id="card-modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">Add New Card</div>
                <button class="close-modal" id="close-modal">&times;</button>
            </div>
            <form id="add-card-form">
                <div class="form-group">
                    <label for="card-title">Title*</label>
                    <input type="text" id="card-title" required>
                </div>
                <div class="form-group">
                    <label for="card-priority">Priority</label>
                    <select id="card-priority">
                        <option value="low">Low</option>
                        <option value="medium" selected>Medium</option>
                        <option value="high">High</option>
                    </select>
                </div>
                <button type="submit" id="submit-card">Add Card</button>
            </form>
        </div>
    </div>

    <script>
        // Data model
        let cards = [
            { id: 1, title: 'Set up project structure', priority: 'high', column: 'todo' },
            { id: 2, title: 'Design database schema', priority: 'medium', column: 'todo' },
            { id: 3, title: 'Write API documentation', priority: 'low', column: 'todo' },
            { id: 4, title: 'Implement user authentication', priority: 'high', column: 'in-progress' },
            { id: 5, title: 'Create responsive layout', priority: 'medium', column: 'in-progress' },
            { id: 6, title: 'Initialize repository', priority: 'low', column: 'done' }
        ];

        let currentFilter = '';
        let draggedCardId = null;
        let isDragging = false;

        // DOM elements
        const todoCardsContainer = document.getElementById('todo-cards');
        const inProgressCardsContainer = document.getElementById('in-progress-cards');
        const doneCardsContainer = document.getElementById('done-cards');
        const todoCount = document.getElementById('todo-count');
        const inProgressCount = document.getElementById('in-progress-count');
        const doneCount = document.getElementById('done-count');
        const searchInput = document.getElementById('search');
        const addCardBtn = document.getElementById('add-card-btn');
        const themeToggle = document.getElementById('theme-toggle');
        const modal = document.getElementById('card-modal');
        const closeModal = document.getElementById('close-modal');
        const cardTitleInput = document.getElementById('card-title');
        const cardPrioritySelect = document.getElementById('card-priority');
        const addCardForm = document.getElementById('add-card-form');
        const submitCardBtn = document.getElementById('submit-card');

        // Drop indicators
        const todoDropIndicator = document.getElementById('todo-drop-indicator');
        const inProgressDropIndicator = document.getElementById('in-progress-drop-indicator');
        const doneDropIndicator = document.getElementById('done-drop-indicator');

        // Initialize
        renderBoard();
        setupEventListeners();

        function setupEventListeners() {
            // Search
            searchInput.addEventListener('input', (e) => {
                currentFilter = e.target.value.toLowerCase();
                renderBoard();
            });

            // Add card button
            addCardBtn.addEventListener('click', () => {
                cardTitleInput.value = '';
                cardPrioritySelect.value = 'medium';
                modal.style.display = 'flex';
                cardTitleInput.focus();
            });

            // Modal close
            closeModal.addEventListener('click', () => {
                modal.style.display = 'none';
            });

            // Close modal on outside click
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    modal.style.display = 'none';
                }
            });

            // Add card form
            addCardForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const title = cardTitleInput.value.trim();
                if (!title) return;

                const priority = cardPrioritySelect.value;
                const newCard = {
                    id: Date.now(),
                    title,
                    priority,
                    column: 'todo'
                };

                cards.push(newCard);
                renderBoard();
                modal.style.display = 'none';
            });

            // Theme toggle
            themeToggle.addEventListener('click', () => {
                const currentTheme = document.documentElement.getAttribute('data-theme');
                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                document.documentElement.setAttribute('data-theme', newTheme);
            });

            // Drag and drop events
            document.addEventListener('dragstart', (e) => {
                if (e.target.classList.contains('card')) {
                    draggedCardId = e.target.dataset.cardId;
                    isDragging = true;
                    e.target.classList.add('dragging');
                    e.dataTransfer.setData('text/plain', draggedCardId);
                }
            });

            document.addEventListener('dragend', (e) => {
                if (e.target.classList.contains('card')) {
                    e.target.classList.remove('dragging');
                    resetDropIndicators();
                }
            });

            document.addEventListener('dragover', (e) => {
                e.preventDefault();
                if (!isDragging) return;

                const targetColumn = e.target.closest('.column');
                if (!targetColumn) return;

                const dropIndicator = targetColumn.querySelector('.drop-indicator');
                if (dropIndicator) {
                    dropIndicator.classList.add('active');
                }
            });

            document.addEventListener('dragleave', (e) => {
                if (!isDragging) return;

                const targetColumn = e.target.closest('.column');
                if (targetColumn) {
                    const dropIndicator = targetColumn.querySelector('.drop-indicator');
                    if (dropIndicator) {
                        dropIndicator.classList.remove('active');
                    }
                }
            });

            document.addEventListener('drop', (e) => {
                e.preventDefault();
                if (!isDragging) return;

                const targetColumn = e.target.closest('.column');
                if (targetColumn) {
                    const dropIndicator = targetColumn.querySelector('.drop-indicator');
                    if (dropIndicator && dropIndicator.classList.contains('active')) {
                        const columnName = targetColumn.dataset.column;
                        const cardIndex = cards.findIndex(card => card.id == draggedCardId);
                        if (cardIndex !== -1) {
                            cards[cardIndex].column = columnName;
                            renderBoard();
                        }
                    }
                }

                resetDropIndicators();
            });
        }

        function resetDropIndicators() {
            isDragging = false;
            todoDropIndicator.classList.remove('active');
            inProgressDropIndicator.classList.remove('active');
            doneDropIndicator.classList.remove('active');
        }

        function renderBoard() {
            // Filter cards
            const filteredCards = cards.filter(card =>
                card.title.toLowerCase().includes(currentFilter)
            );

            // Update counts
            const todoCountValue = filteredCards.filter(card => card.column === 'todo').length;
            const inProgressCountValue = filteredCards.filter(card => card.column === 'in-progress').length;
            const doneCountValue = filteredCards.filter(card => card.column === 'done').length;

            todoCount.textContent = todoCountValue;
            inProgressCount.textContent = inProgressCountValue;
            doneCount.textContent = doneCountValue;

            // Render cards in each column
            renderColumn('todo', todoCardsContainer, filteredCards);
            renderColumn('in-progress', inProgressCardsContainer, filteredCards);
            renderColumn('done', doneCardsContainer, filteredCards);
        }

        function renderColumn(columnName, container, allCards) {
            const columnCards = allCards.filter(card => card.column === columnName);
            container.innerHTML = '';

            columnCards.forEach(card => {
                const cardElement = document.createElement('div');
                cardElement.className = 'card';
                cardElement.dataset.cardId = card.id;
                cardElement.draggable = true;

                const priorityClass = `priority-${card.priority}`;

                cardElement.innerHTML = `
                    <div class="card-header">
                        <div class="card-title">${escapeHtml(card.title)}</div>
                        <span class="priority-badge ${priorityClass}">${card.priority}</span>
                        <button class="delete-card" data-card-id="${card.id}">🗑️</button>
                    </div>
                `;

                container.appendChild(cardElement);
            });

            // Add event listeners to delete buttons
            container.querySelectorAll('.delete-card').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const cardId = parseInt(e.target.dataset.cardId);
                    cards = cards.filter(card => card.id !== cardId);
                    renderBoard();
                });
            });
        }

        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
    </script>
</body>
</html>
Reasoning trace (6,098 tokens)
I need to build an interactive Kanban board with vanilla HTML, CSS, and JavaScript. Let me break down the requirements:

1. Three columns: "To do", "In progress", "Done" with card counts
2. Pre-populate with 6 realistic cards across columns
3. Each card has title and priority (low/medium/high) with colored badge
4. Add card via modal form (title required)
5. Delete card with button on each card
6. Drag and drop between columns with visual indicator
7. Search field for live filtering by title
8. Light/dark theme toggle
9. State in memory only

Let me plan the structure:

- Data model: Array of cards with id, title, priority, column
- Columns: todo, in-progress, done
- State management: Single source of truth for cards
- UI components:
  - Column containers with titles showing counts
  - Card components with title, priority badge, delete button
  - Add card button that opens modal
  - Search input for filtering
  - Theme toggle button

For drag and drop:
- Need to track dragged card
- Visual indicator for drop position
- Handle drag events: dragstart, dragover, dragleave, drop, dragend
- Update card's column on drop

For the modal:
- Hidden by default
- Shows when "Add card" is clicked
- Form with title input and priority selector
- Submit adds new card to appropriate column

For search:
- Filter cards by title (case-insensitive)
- Update UI to show only matching cards
- Should work live as user types

For theme toggle:
- Toggle between light and dark
- Store preference in data attribute or CSS variables
- Update all relevant elements

Let me structure the code:

HTML:
- Header with search, theme toggle, add card button
- Three column containers
- Modal dialog (hidden initially)
- Each card will be a div with draggable="true"

CSS:
- Use CSS variables for colors to support theme switching
- Flexbox for columns
- Card styling with priority badges
- Modal styling
- Drag and drop visual feedback

JavaScript:
- Card data array
- Render function to update UI based on state
- Event handlers for all interactions
- Drag and drop logic
- Search filtering
- Theme toggle

Let me think about the initial data:

6 realistic cards spread across columns. Maybe:
- todo: 3 cards
- in-progress: 2 cards
- done: 1 card

Priorities should be varied. Let me create:

Todo:
1. "Set up project structure" - high
2. "Design database schema" - medium
3. "Write API documentation" - low

In progress:
4. "Implement user authentication" - high
5. "Create responsive layout" - medium

Done:
6. "Initialize repository" - low

Now for the implementation:

I'll use:
- data-cards array to store all cards
- data-filter for search term
- data-theme for current theme

Functions:
- renderCards(): renders all cards based on current filter and theme
- renderColumns(): updates column titles with counts
- openModal(): shows the modal
- closeModal(): hides the modal
- addCard(): handles form submission
- deleteCard(): removes a card
- setupDragAndDrop(): adds event listeners to cards
- filterCards(): filters cards based on search term
- toggleTheme(): switches between light and dark

For drag and drop:
- When dragging starts, store the card id
- On dragover over a column, show visual indicator
- On drop, update the card's column and re-render

Let me code this step by step.

First, the 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>
        :root {
            --bg-primary: #f5f5f5;
            --bg-secondary: #ffffff;
            --text-primary: #333333;
            --text-secondary: #666666;
            --border-color: #dddddd;
            --shadow: 0 2px 8px rgba(0,0,0,0.1);
            --card-bg: #ffffff;
            --card-border: #eeeeee;
            --priority-low: #4CAF50;
            --priority-medium: #FF9800;
            --priority-high: #F44336;
            --column-bg: #f9f9f9;
        }

        [data-theme="dark"] {
            --bg-primary: #1a1a1a;
            --bg-secondary: #2d2d2d;
            --text-primary: #f0f0f0;
            --text-secondary: #cccccc;
            --border-color: #444444;
            --shadow: 0 2px 8px rgba(0,0,0,0.3);
            --card-bg: #333333;
            --card-border: #444444;
            --priority-low: #8BC34A;
            --priority-medium: #FFC107;
            --priority-high: #E91E63;
            --column-bg: #222222;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .search-container {
            flex: 1;
            min-width: 250px;
            position: relative;
        }

        #search {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background-color: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 16px;
        }

        .header-actions {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        #add-card-btn {
            padding: 12px 20px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        #add-card-btn:hover {
            background-color: #0b7dda;
        }

        #theme-toggle {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--text-primary);
            padding: 8px;
        }

        .board {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            padding-bottom: 20px;
        }

        .column {
            flex: 1;
            min-width: 280px;
            background-color: var(--column-bg);
            border-radius: 8px;
            padding: 15px;
            box-shadow: var(--shadow);
        }

        .column-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--border-color);
        }

        .column-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .card-count {
            background-color: var(--text-secondary);
            color: var(--bg-secondary);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
        }

        .cards-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .card {
            background-color: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 6px;
            padding: 15px;
            box-shadow: var(--shadow);
            cursor: grab;
            transition: transform 0.1s, box-shadow 0.1s;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .card.dragging {
            opacity: 0.5;
            background-color: var(--bg-secondary);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .card-title {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
            flex: 1;
        }

        .priority-badge {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            color: white;
            margin-left: 8px;
        }

        .priority-low {
            background-color: var(--priority-low);
        }

        .priority-medium {
            background-color: var(--priority-medium);
        }

        .priority-high {
            background-color: var(--priority-high);
        }

        #delete-card {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 16px;
            padding: 4px;
            margin-left: 8px;
        }

        #delete-card:hover {
            color: var(--text-primary);
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: var(--bg-secondary);
            padding: 30px;
            border-radius: 8px;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .modal-title {
            font-size: 20px;
            font-weight: 600;
        }

        .close-modal {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--text-secondary);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-primary);
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background-color: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 16px;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #2196F3;
        }

        #add-card-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        #submit-card {
            padding: 12px 20px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        #submit-card:hover {
            background-color: #0b7dda;
        }

        #submit-card:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        .drop-indicator {
            height: 4px;
            background-color: #2196F3;
            border-radius: 2px;
            margin-bottom: 8px;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .drop-indicator.active {
            opacity: 1;
        }

        @media (max-width: 768px) {
            .board {
                flex-direction: column;
            }

            .column {
                min-width: 100%;
            }

            .header {
                flex-direction: column;
                align-items: stretch;
            }

            .header-actions {
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="search-container">
            <input type="text" id="search" placeholder="Search cards...">
        </div>
        <div class="header-actions">
            <button id="theme-toggle" title="Toggle theme">🌓</button>
            <button id="add-card-btn">Add Card</button>
        </div>
    </div>

    <div class="board">
        <div class="column" data-column="todo">
            <div class="column-header">
                <div class="column-title">To do</div>
                <div class="card-count" id="todo-count">0</div>
            </div>
            <div class="drop-indicator" id="todo-drop-indicator"></div>
            <div class="cards-container" id="todo-cards"></div>
        </div>

        <div class="column" data-column="in-progress">
            <div class="column-header">
                <div class="column-title">In progress</div>
                <div class="card-count" id="in-progress-count">0</div>
            </div>
            <div class="drop-indicator" id="in-progress-drop-indicator"></div>
            <div class="cards-container" id="in-progress-cards"></div>
        </div>

        <div class="column" data-column="done">
            <div class="column-header">
                <div class="column-title">Done</div>
                <div class="card-count" id="done-count">0</div>
            </div>
            <div class="drop-indicator" id="done-drop-indicator"></div>
            <div class="cards-container" id="done-cards"></div>
        </div>
    </div>

    <div class="modal" id="card-modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">Add New Card</div>
                <button class="close-modal" id="close-modal">&times;</button>
            </div>
            <form id="add-card-form">
                <div class="form-group">
                    <label for="card-title">Title*</label>
                    <input type="text" id="card-title" required>
                </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>
                <button type="submit" id="submit-card">Add Card</button>
            </form>
        </div>
    </div>

    <script>
        // Data model
        let cards = [
            { id: 1, title: 'Set up project structure', priority: 'high', column: 'todo' },
            { id: 2, title: 'Design database schema', priority: 'medium', column: 'todo' },
            { id: 3, title: 'Write API documentation', priority: 'low', column: 'todo' },
            { id: 4, title: 'Implement user authentication', priority: 'high', column: 'in-progress' },
            { id: 5, title: 'Create responsive layout', priority: 'medium', column: 'in-progress' },
            { id: 6, title: 'Initialize repository', priority: 'low', column: 'done' }
        ];

        let currentFilter = '';
        let draggedCardId = null;
        let isDragging = false;

        // DOM elements
        const todoCardsContainer = document.getElementById('todo-cards');
        const inProgressCardsContainer = document.getElementById('in-progress-cards');
        const doneCardsContainer = document.getElementById('done-cards');
        const todoCount = document.getElementById('todo-count');
        const inProgressCount = document.getElementById('in-progress-count');
        const doneCount = document.getElementById('done-count');
        const searchInput = document.getElementById('search');
        const addCardBtn = document.getElementById('add-card-btn');
        const themeToggle = document.getElementById('theme-toggle');
        const modal = document.getElementById('card-modal');
        const closeModal = document.getElementById('close-modal');
        const cardTitleInput = document.getElementById('card-title');
        const cardPrioritySelect = document.getElementById('card-priority');
        const addCardForm = document.getElementById('add-card-form');
        const submitCardBtn = document.getElementById('submit-card');

        // Drop indicators
        const todoDropIndicator = document.getElementById('todo-drop-indicator');
        const inProgressDropIndicator = document.getElementById('in-progress-drop-indicator');
        const doneDropIndicator = document.getElementById('done-drop-indicator');

        // Initialize
        renderBoard();
        setupEventListeners();

        function setupEventListeners() {
            // Search
            searchInput.addEventListener('input', (e) => {
                currentFilter = e.target.value.toLowerCase();
                renderBoard();
            });

            // Add card button
            addCardBtn.addEventListener('click', () => {
                cardTitleInput.value = '';
                cardPrioritySelect.value = 'medium';
                modal.style.display = 'flex';
                cardTitleInput.focus();
            });

            // Modal close
            closeModal.addEventListener('click', () => {
                modal.style.display = 'none';
            });

            // Close modal on outside click
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    modal.style.display = 'none';
                }
            });

            // Add card form
            addCardForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const title = cardTitleInput.value.trim();
                if (!title) return;

                const priority = cardPrioritySelect.value;
                const newCard = {
                    id: Date.now(),
                    title,
                    priority,
                    column: 'todo'
                };

                cards.push(newCard);
                renderBoard();
                modal.style.display = 'none';
            });

            // Theme toggle
            themeToggle.addEventListener('click', () => {
                const currentTheme = document.documentElement.getAttribute('data-theme');
                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                document.documentElement.setAttribute('data-theme', newTheme);
            });

            // Drag and drop events
            document.addEventListener('dragstart', (e) => {
                if (e.target.classList.contains('card')) {
                    draggedCardId = e.target.dataset.cardId;
                    isDragging = true;
                    e.target.classList.add('dragging');
                    e.dataTransfer.setData('text/plain', draggedCardId);
                }
            });

            document.addEventListener('dragend', (e) => {
                if (e.target.classList.contains('card')) {
                    e.target.classList.remove('dragging');
                    resetDropIndicators();
                }
            });

            document.addEventListener('dragover', (e) => {
                e.preventDefault();
                if (!isDragging) return;

                const targetColumn = e.target.closest('.column');
                if (!targetColumn) return;

                const dropIndicator = targetColumn.querySelector('.drop-indicator');
                if (dropIndicator) {
                    dropIndicator.classList.add('active');
                }
            });

            document.addEventListener('dragleave', (e) => {
                if (!isDragging) return;

                const targetColumn = e.target.closest('.column');
                if (targetColumn) {
                    const dropIndicator = targetColumn.querySelector('.drop-indicator');
                    if (dropIndicator) {
                        dropIndicator.classList.remove('active');
                    }
                }
            });

            document.addEventListener('drop', (e) => {
                e.preventDefault();
                if (!isDragging) return;

                const targetColumn = e.target.closest('.column');
                if (targetColumn) {
                    const dropIndicator = targetColumn.querySelector('.drop-indicator');
                    if (dropIndicator && dropIndicator.classList.contains('active')) {
                        const columnName = targetColumn.dataset.column;
                        const cardIndex = cards.findIndex(card => card.id == draggedCardId);
                        if (cardIndex !== -1) {
                            cards[cardIndex].column = columnName;
                            renderBoard();
                        }
                    }
                }

                resetDropIndicators();
            });
        }

        function resetDropIndicators() {
            isDragging = false;
            todoDropIndicator.classList.remove('active');
            inProgressDropIndicator.classList.remove('active');
            doneDropIndicator.classList.remove('active');
        }

        function renderBoard() {
            // Filter cards
            const filteredCards = cards.filter(card =>
                card.title.toLowerCase().includes(currentFilter)
            );

            // Update counts
            const todoCountValue = filteredCards.filter(card => card.column === 'todo').length;
            const inProgressCountValue = filteredCards.filter(card => card.column === 'in-progress').length;
            const doneCountValue = filteredCards.filter(card => card.column === 'done').length;

            todoCount.textContent = todoCountValue;
            inProgressCount.textContent = inProgressCountValue;
            doneCount.textContent = doneCountValue;

            // Render cards in each column
            renderColumn('todo', todoCardsContainer, filteredCards);
            renderColumn('in-progress', inProgressCardsContainer, filteredCards);
            renderColumn('done', doneCardsContainer, filteredCards);
        }

        function renderColumn(columnName, container, allCards) {
            const columnCards = allCards.filter(card => card.column === columnName);
            container.innerHTML = '';

            columnCards.forEach(card => {
                const cardElement = document.createElement('div');
                cardElement.className = 'card';
                cardElement.dataset.cardId = card.id;
                cardElement.draggable = true;

                const priorityClass = `priority-${card.priority}`;

                cardElement.innerHTML = `
                    <div class="card-header">
                        <div class="card-title">${escapeHtml(card.title)}</div>
                        <span class="priority-badge ${priorityClass}">${card.priority}</span>
                        <button id="delete-card" data-card-id="${card.id}">🗑️</button>
                    </div>
                `;

                container.appendChild(cardElement);
            });

            // Add event listeners to delete buttons
            container.querySelectorAll('#delete-card').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const cardId = parseInt(e.target.dataset.cardId);
                    cards = cards.filter(card => card.id !== cardId);
                    renderBoard();
                });
            });
        }

        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
    </script>
</body>
</html>
```

Wait, I need to check if this meets all requirements:

1. ✓ Three columns with counts
2. ✓ 6 pre-populated cards
3. ✓ Cards have title and priority badges with colors
4. ✓ Add card via modal form (title required)
5. ✓ Delete card button on each card
6. ✓ Drag and drop with visual indicators
7. ✓ Search field for live filtering
8. ✓ Light/dark theme toggle
9. ✓ State in memory only

Let me verify the drag and drop implementation. I'm using:
- dragstart to store dragged card id
- dragend to clean up
- dragover to show indicators
- dragleave to hide indicators
- drop to update card's column

The drop indicators are the colored bars above each column's cards.

For the theme toggle, I'm using data-theme attribute on the html element and CSS variables.

For the search, it filters cards live as you type.

For the modal, it shows when clicking "Add Card" and has a form with title (required) and priority selector.

For the delete button, each card has a delete button that removes it.

The initial cards are pre-populated as specified.

Let me check if there are any issues:

1. The delete button uses id="delete-card" but there are multiple cards. In HTML, ids must be unique, so this is a problem. I need to change it to a class.

2. The drag and drop might have issues with the drop indicators not working correctly.

3. The modal might need better accessibility.

Let me fix the delete button issue first. I'll change it to a class and use data attributes.

Also, I should ensure the drag and drop works smoothly. Let me review the drop logic more carefully.

Actually, looking at the code again, I see that in the renderColumn function, I'm using `id="delete-card"` which is invalid HTML since IDs must be unique. I need to change this to a class.

Let me revise the code:

In the card HTML:
```html
<button class="delete-card" data-card-id="${card.id}">🗑️</button>
```

And in the event listener:
```javascript
container.querySelectorAll('.delete-card').forEach(btn => {
```

Also, I need to make sure the drag and drop works properly. The current implementation should work, but let me double-check the drop logic.

When dropping, I check if the drop indicator is active, then update the card's column. This should work.

Let me also add a check to prevent the modal from closing when clicking inside it (except the close button).

Actually, looking at the code, I already have that:
```javascript
modal.addEventListener('click', (e) => {
    if (e.target === modal) {
        modal.style.display = 'none';
    }
});
```

This is correct.

Now let me check the viewport requirements. The CSS has media queries for mobile, so it should adapt down to 375px.

Let me also verify that the first paint shows meaningful content. With 6 cards pre-populated, the board should show all three columns with cards.

One more thing: the drag and drop should only work after the user interacts with the board. But the requirement says "Drag and drop cards between columns with the mouse" - it doesn't specify that it needs to be behind a click-to-start like games. So the current implementation should be fine.

Let me finalize the code with the fix for the delete button ID issue.