From b06b39c0e7346987010d56fd9f82671d60998e40 Mon Sep 17 00:00:00 2001
From: Kjell Tore Guttormsen <ktg@humanize.no>
Date: Sun, 15 Mar 2026 16:27:23 +0100
Subject: [PATCH] redesign: warm stone aesthetic for todo app examples

Replace cold navy/teal palette with warm dark theme:
- Warm near-black backgrounds, copper/peach accent
- Sage green for completion, muted category colors
- Plus Jakarta Sans typography
- Refined micro-interactions and hover states
- Grouped card layout with staggered animation
- Completed tasks auto-sort to bottom

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 examples/index-v2.html | 519 +++++++++++++++++++++++++----------------
 examples/index.html    | 294 +++++++++++++++--------
 2 files changed, 519 insertions(+), 294 deletions(-)
diff --git a/examples/index-v2.html b/examples/index-v2.html
index ff2e33b..562e220 100644
--- a/examples/index-v2.html
+++ b/examples/index-v2.html
@@ -3,284 +3,409 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Todo App</title>
+    <title>Todo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
+        :root {
+            --bg: #111110;
+            --surface: #1C1C1A;
+            --surface-hover: #232320;
+            --elevated: #262623;
+            --border: #2E2E2A;
+            --border-focus: #E8A87C;
+            --text: #E8E4DF;
+            --text-muted: #8A8580;
+            --text-faint: #5A5750;
+            --accent: #E8A87C;
+            --accent-hover: #D4926A;
+            --accent-text: #1C1C1A;
+            --check: #7FB88F;
+            --danger: #C96B5E;
+            --cat-work: #7C9CBF;
+            --cat-personal: #8BB896;
+            --cat-health: #D4896A;
+            --cat-learning: #B08FCF;
+            --radius: 10px;
+            --radius-sm: 7px;
         }
 
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: #1a1a2e;
-            color: #e0e0e0;
+            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--bg);
+            color: var(--text);
             min-height: 100vh;
             display: flex;
             justify-content: center;
-            padding: 2rem 1rem;
+            padding: 4rem 1.5rem 2rem;
+            background-image: radial-gradient(ellipse at 50% 0%, #1E1D1A 0%, var(--bg) 70%);
         }
 
         .container {
             width: 100%;
-            max-width: 540px;
+            max-width: 480px;
+        }
+
+        header {
+            margin-bottom: 1.5rem;
         }
 
         h1 {
-            font-size: 1.75rem;
-            font-weight: 600;
+            font-size: 1.5rem;
+            font-weight: 700;
+            letter-spacing: -0.03em;
+        }
+
+        h1 span {
+            color: var(--text-faint);
+            font-weight: 400;
+            font-size: 0.875rem;
+            margin-left: 0.5rem;
+            letter-spacing: 0;
+        }
+
+        /* ---- Toolbar ---- */
+        .toolbar {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            padding: 0.75rem;
             margin-bottom: 1.5rem;
-            color: #ffffff;
+            display: flex;
+            flex-direction: column;
+            gap: 0.625rem;
         }
 
         .search-row {
             position: relative;
-            margin-bottom: 1rem;
+        }
+
+        .search-row svg {
+            position: absolute;
+            left: 0.75rem;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 15px;
+            height: 15px;
+            color: var(--text-faint);
+            pointer-events: none;
         }
 
         .search-row input {
             width: 100%;
-            padding: 0.625rem 2.5rem 0.625rem 1rem;
-            background: #16213e;
-            border: 1px solid #2a2a4a;
-            border-radius: 8px;
-            color: #e0e0e0;
-            font-size: 0.9rem;
+            padding: 0.5625rem 2rem 0.5625rem 2.25rem;
+            background: var(--bg);
+            border: 1px solid transparent;
+            border-radius: var(--radius-sm);
+            color: var(--text);
+            font-family: inherit;
+            font-size: 0.8125rem;
             outline: none;
-            transition: border-color 0.2s;
+            transition: border-color 0.2s, box-shadow 0.2s;
         }
 
         .search-row input:focus {
-            border-color: #4DB8A4;
+            border-color: var(--border);
+            box-shadow: 0 0 0 2px rgba(232, 168, 124, 0.08);
         }
 
-        .search-row input::placeholder {
-            color: #555;
-        }
+        .search-row input::placeholder { color: var(--text-faint); }
 
         .search-clear {
             position: absolute;
-            right: 0.75rem;
+            right: 0.5rem;
             top: 50%;
             transform: translateY(-50%);
             background: none;
             border: none;
-            color: #555;
-            font-size: 1.1rem;
+            color: var(--text-faint);
+            font-size: 1rem;
             cursor: pointer;
             display: none;
+            line-height: 1;
+            padding: 0.125rem;
         }
 
-        .search-clear.visible {
-            display: block;
-        }
-
-        .search-clear:hover {
-            color: #e0e0e0;
-        }
+        .search-clear.visible { display: block; }
+        .search-clear:hover { color: var(--text-muted); }
 
         .filters {
             display: flex;
             gap: 0.375rem;
-            margin-bottom: 1rem;
             flex-wrap: wrap;
         }
 
         .filter-btn {
-            padding: 0.375rem 0.75rem;
-            background: #16213e;
-            border: 1px solid #2a2a4a;
-            border-radius: 6px;
-            color: #888;
-            font-size: 0.8rem;
+            padding: 0.3125rem 0.6875rem;
+            background: transparent;
+            border: 1px solid var(--border);
+            border-radius: 100px;
+            color: var(--text-muted);
+            font-family: inherit;
+            font-size: 0.75rem;
+            font-weight: 500;
             cursor: pointer;
-            transition: all 0.2s;
+            transition: all 0.15s;
         }
 
         .filter-btn:hover {
-            border-color: #4DB8A4;
-            color: #e0e0e0;
+            color: var(--text);
+            border-color: var(--text-faint);
         }
 
         .filter-btn.active {
-            background: #4DB8A4;
-            color: #1a1a2e;
-            border-color: #4DB8A4;
-            font-weight: 600;
+            background: var(--text);
+            color: var(--bg);
+            border-color: var(--text);
         }
 
-        .input-row {
+        .filter-btn.active[data-cat="work"] { background: var(--cat-work); border-color: var(--cat-work); color: #111; }
+        .filter-btn.active[data-cat="personal"] { background: var(--cat-personal); border-color: var(--cat-personal); color: #111; }
+        .filter-btn.active[data-cat="health"] { background: var(--cat-health); border-color: var(--cat-health); color: #111; }
+        .filter-btn.active[data-cat="learning"] { background: var(--cat-learning); border-color: var(--cat-learning); color: #111; }
+
+        /* ---- Input ---- */
+        .input-area {
             display: flex;
             gap: 0.5rem;
             margin-bottom: 1.5rem;
         }
 
-        .input-row input[type="text"] {
+        .input-area input {
             flex: 1;
-            padding: 0.75rem 1rem;
-            background: #16213e;
-            border: 1px solid #2a2a4a;
-            border-radius: 8px;
-            color: #e0e0e0;
-            font-size: 1rem;
+            padding: 0.8125rem 1rem;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            color: var(--text);
+            font-family: inherit;
+            font-size: 0.9375rem;
             outline: none;
+            transition: border-color 0.2s, box-shadow 0.2s;
+        }
+
+        .input-area input:focus {
+            border-color: var(--border-focus);
+            box-shadow: 0 0 0 3px rgba(232, 168, 124, 0.1);
+        }
+
+        .input-area input::placeholder { color: var(--text-faint); }
+
+        .input-area select {
+            padding: 0 0.75rem;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            color: var(--text-muted);
+            font-family: inherit;
+            font-size: 0.8125rem;
+            outline: none;
+            cursor: pointer;
+            appearance: none;
+            -webkit-appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8580' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 0.625rem center;
+            padding-right: 1.75rem;
             transition: border-color 0.2s;
         }
 
-        .input-row input[type="text"]:focus {
-            border-color: #4DB8A4;
-        }
+        .input-area select:focus { border-color: var(--border-focus); }
 
-        .input-row input[type="text"]::placeholder {
-            color: #666;
-        }
-
-        .input-row select {
-            padding: 0.75rem 0.5rem;
-            background: #16213e;
-            border: 1px solid #2a2a4a;
-            border-radius: 8px;
-            color: #e0e0e0;
-            font-size: 0.85rem;
-            outline: none;
-            cursor: pointer;
-        }
-
-        .input-row button {
-            padding: 0.75rem 1.25rem;
-            background: #4DB8A4;
-            color: #1a1a2e;
+        .input-area button {
+            padding: 0 1.25rem;
+            background: var(--accent);
+            color: var(--accent-text);
             border: none;
-            border-radius: 8px;
-            font-size: 1rem;
+            border-radius: var(--radius);
+            font-family: inherit;
+            font-size: 0.875rem;
             font-weight: 600;
             cursor: pointer;
-            transition: background 0.2s;
+            transition: background 0.15s, transform 0.1s;
+            white-space: nowrap;
         }
 
-        .input-row button:hover {
-            background: #3da897;
-        }
+        .input-area button:hover { background: var(--accent-hover); }
+        .input-area button:active { transform: scale(0.97); }
 
+        /* ---- Tasks ---- */
         .task-list {
             list-style: none;
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
         }
 
         .task-item {
             display: flex;
             align-items: center;
             gap: 0.75rem;
-            padding: 0.875rem 1rem;
-            background: #16213e;
-            border-radius: 8px;
-            margin-bottom: 0.5rem;
-            transition: opacity 0.3s, transform 0.3s;
-            animation: slideIn 0.3s ease;
+            padding: 0.8125rem 1rem;
+            background: var(--surface);
+            border-radius: var(--radius-sm);
+            transition: background 0.15s;
+            animation: fadeUp 0.25s ease both;
         }
 
-        @keyframes slideIn {
-            from { opacity: 0; transform: translateY(-10px); }
+        .task-item:first-child { border-radius: var(--radius) var(--radius) var(--radius-sm) var(--radius-sm); }
+        .task-item:last-child { border-radius: var(--radius-sm) var(--radius-sm) var(--radius) var(--radius); }
+        .task-item:only-child { border-radius: var(--radius); }
+        .task-item:hover { background: var(--surface-hover); }
+
+        @keyframes fadeUp {
+            from { opacity: 0; transform: translateY(6px); }
             to { opacity: 1; transform: translateY(0); }
         }
 
-        .task-item.completed .task-text {
-            text-decoration: line-through;
-            color: #555;
-        }
-
-        .task-checkbox {
+        .checkbox {
             width: 20px;
             height: 20px;
-            border: 2px solid #4DB8A4;
-            border-radius: 50%;
+            border: 1.5px solid var(--text-faint);
+            border-radius: 6px;
             cursor: pointer;
+            flex-shrink: 0;
             display: flex;
             align-items: center;
             justify-content: center;
-            flex-shrink: 0;
-            transition: background 0.2s;
+            transition: all 0.2s;
         }
 
-        .task-item.completed .task-checkbox {
-            background: #4DB8A4;
+        .checkbox:hover { border-color: var(--check); }
+
+        .task-item.completed .checkbox {
+            background: var(--check);
+            border-color: var(--check);
         }
 
-        .task-item.completed .task-checkbox::after {
-            content: '\2713';
-            color: #1a1a2e;
-            font-size: 0.75rem;
-            font-weight: bold;
+        .checkbox svg {
+            width: 12px;
+            height: 12px;
+            opacity: 0;
+            transition: opacity 0.15s;
         }
 
-        .category-dot {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
+        .task-item.completed .checkbox svg { opacity: 1; }
+
+        .cat-indicator {
+            width: 3px;
+            height: 20px;
+            border-radius: 3px;
             flex-shrink: 0;
         }
 
-        .category-dot.work { background: #5B9FD6; }
-        .category-dot.personal { background: #4DB8A4; }
-        .category-dot.health { background: #E87020; }
-        .category-dot.learning { background: #A87BDB; }
+        .cat-indicator.work { background: var(--cat-work); }
+        .cat-indicator.personal { background: var(--cat-personal); }
+        .cat-indicator.health { background: var(--cat-health); }
+        .cat-indicator.learning { background: var(--cat-learning); }
 
         .task-text {
             flex: 1;
-            font-size: 0.95rem;
-            line-height: 1.4;
+            font-size: 0.9375rem;
+            line-height: 1.45;
             transition: color 0.2s;
         }
 
-        .delete-btn {
-            background: none;
-            border: none;
-            color: #555;
-            cursor: pointer;
-            font-size: 1.25rem;
-            padding: 0.25rem;
-            line-height: 1;
-            transition: color 0.2s;
+        .task-item.completed .task-text {
+            color: var(--text-faint);
+            text-decoration: line-through;
+            text-decoration-color: var(--text-faint);
+        }
+
+        .cat-label {
+            font-size: 0.6875rem;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+            color: var(--text-faint);
             flex-shrink: 0;
         }
 
-        .delete-btn:hover {
-            color: #e74c3c;
+        .task-item.completed .cat-label { opacity: 0.4; }
+
+        .delete-btn {
+            opacity: 0;
+            background: none;
+            border: none;
+            color: var(--text-faint);
+            cursor: pointer;
+            padding: 0.25rem;
+            font-size: 1rem;
+            line-height: 1;
+            transition: opacity 0.15s, color 0.15s;
+            flex-shrink: 0;
         }
 
+        .task-item:hover .delete-btn { opacity: 1; }
+        .delete-btn:hover { color: var(--danger); }
+
         .empty-state {
             text-align: center;
-            color: #555;
-            padding: 2rem;
-            font-size: 0.95rem;
+            padding: 3rem 1rem;
+            color: var(--text-faint);
+            font-size: 0.9375rem;
+        }
+
+        .empty-state::before {
+            content: '';
+            display: block;
+            width: 48px;
+            height: 48px;
+            margin: 0 auto 1rem;
+            border: 2px dashed var(--border);
+            border-radius: 12px;
+        }
+
+        .footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 1rem;
+            padding: 0 0.25rem;
         }
 
         .task-count {
-            text-align: center;
-            color: #555;
-            font-size: 0.8rem;
-            margin-top: 1rem;
+            color: var(--text-faint);
+            font-size: 0.8125rem;
+        }
+
+        @media (max-width: 480px) {
+            body { padding: 2rem 1rem; }
+            .input-area { flex-wrap: wrap; }
+            .input-area input { min-width: 0; }
+            .input-area select { flex: 1; min-width: 0; }
+            .input-area button { flex: 0 0 100%; padding: 0.75rem; }
+            .delete-btn { opacity: 0.5; }
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>Todo</h1>
+        <header>
+            <h1>Todo <span id="dateDisplay"></span></h1>
+        </header>
 
-        <div class="search-row">
-            <input type="text" id="searchInput" placeholder="Search tasks...">
-            <button class="search-clear" id="searchClear" onclick="clearSearch()">&times;</button>
+        <div class="toolbar">
+            <div class="search-row">
+                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+                    <circle cx="7" cy="7" r="5"/><path d="M11 11l3.5 3.5"/>
+                </svg>
+                <input type="text" id="searchInput" placeholder="Search tasks...">
+                <button class="search-clear" id="searchClear" onclick="clearSearch()">&times;</button>
+            </div>
+            <div class="filters" id="filters">
+                <button class="filter-btn active" data-cat="all" onclick="setFilter('all')">All</button>
+                <button class="filter-btn" data-cat="work" onclick="setFilter('work')">Work</button>
+                <button class="filter-btn" data-cat="personal" onclick="setFilter('personal')">Personal</button>
+                <button class="filter-btn" data-cat="health" onclick="setFilter('health')">Health</button>
+                <button class="filter-btn" data-cat="learning" onclick="setFilter('learning')">Learning</button>
+            </div>
         </div>
 
-        <div class="filters" id="filters">
-            <button class="filter-btn active" onclick="setFilter('all')">All</button>
-            <button class="filter-btn" onclick="setFilter('work')">Work</button>
-            <button class="filter-btn" onclick="setFilter('personal')">Personal</button>
-            <button class="filter-btn" onclick="setFilter('health')">Health</button>
-            <button class="filter-btn" onclick="setFilter('learning')">Learning</button>
-        </div>
-
-        <div class="input-row">
-            <input type="text" id="taskInput" placeholder="What needs to be done?" autofocus>
+        <div class="input-area">
+            <input type="text" id="taskInput" placeholder="Add a new task..." autofocus>
             <select id="categorySelect">
                 <option value="work">Work</option>
                 <option value="personal">Personal</option>
@@ -291,62 +416,65 @@
         </div>
 
         <ul class="task-list" id="taskList"></ul>
-        <div class="task-count" id="taskCount"></div>
+
+        <div class="footer">
+            <div class="task-count" id="taskCount"></div>
+        </div>
     </div>
 
     <script>
+        const checkSvg = '<svg viewBox="0 0 12 12" fill="none" stroke="#1C1C1A" stroke-width="2" stroke-linecap="round"><polyline points="2.5,6 5,8.5 9.5,3.5"/></svg>';
         let tasks = JSON.parse(localStorage.getItem('todos-v2') || '[]');
         let activeFilter = 'all';
         let searchQuery = '';
 
-        const categoryLabels = {
-            work: 'Work',
-            personal: 'Personal',
-            health: 'Health',
-            learning: 'Learning'
-        };
+        const catLabels = { work: 'Work', personal: 'Personal', health: 'Health', learning: 'Learning' };
+
+        const d = new Date();
+        document.getElementById('dateDisplay').textContent =
+            d.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' });
 
         function saveTasks() {
             localStorage.setItem('todos-v2', JSON.stringify(tasks));
         }
 
-        function getFilteredTasks() {
-            return tasks.filter(task => {
-                const matchesFilter = activeFilter === 'all' || task.category === activeFilter;
-                const matchesSearch = !searchQuery ||
-                    task.text.toLowerCase().includes(searchQuery) ||
-                    (categoryLabels[task.category] || '').toLowerCase().includes(searchQuery);
-                return matchesFilter && matchesSearch;
+        function filtered() {
+            return tasks.filter(t => {
+                const matchCat = activeFilter === 'all' || t.category === activeFilter;
+                const matchSearch = !searchQuery ||
+                    t.text.toLowerCase().includes(searchQuery) ||
+                    (catLabels[t.category] || '').toLowerCase().includes(searchQuery);
+                return matchCat && matchSearch;
             });
         }
 
         function renderTasks() {
             const list = document.getElementById('taskList');
             const countEl = document.getElementById('taskCount');
-            const filtered = getFilteredTasks();
+            const f = filtered();
 
-            if (filtered.length === 0) {
-                const msg = tasks.length === 0
-                    ? 'No tasks yet. Add one above.'
-                    : 'No tasks found.';
+            if (f.length === 0) {
+                const msg = tasks.length === 0 ? 'No tasks yet' : 'No tasks found';
                 list.innerHTML = `<li class="empty-state">${msg}</li>`;
                 countEl.textContent = '';
                 return;
             }
 
-            list.innerHTML = filtered.map((task) => {
+            list.innerHTML = f.map((task, vi) => {
                 const idx = tasks.indexOf(task);
                 return `
-                <li class="task-item ${task.completed ? 'completed' : ''}">
-                    <div class="task-checkbox" onclick="toggleTask(${idx})"></div>
-                    <div class="category-dot ${task.category || 'work'}"></div>
+                <li class="task-item ${task.completed ? 'completed' : ''}" style="animation-delay:${vi * 30}ms">
+                    <div class="checkbox" onclick="toggleTask(${idx})">${checkSvg}</div>
+                    <div class="cat-indicator ${task.category || 'work'}"></div>
                     <span class="task-text">${escapeHtml(task.text)}</span>
-                    <button class="delete-btn" onclick="deleteTask(${idx})" title="Delete">&times;</button>
+                    <span class="cat-label">${catLabels[task.category] || ''}</span>
+                    <button class="delete-btn" onclick="deleteTask(${idx})" aria-label="Delete">&times;</button>
                 </li>
             `}).join('');
 
             const active = tasks.filter(t => !t.completed).length;
-            countEl.textContent = `${active} task${active !== 1 ? 's' : ''} remaining`;
+            const total = tasks.length;
+            countEl.textContent = active === 0 ? 'All done' : `${active} of ${total} remaining`;
         }
 
         function addTask() {
@@ -355,33 +483,32 @@
             const text = input.value.trim();
             if (!text) return;
 
-            tasks.unshift({
-                text,
-                completed: false,
-                category: select.value,
-                id: Date.now()
-            });
+            tasks.unshift({ text, completed: false, category: select.value, id: Date.now() });
             input.value = '';
             saveTasks();
             renderTasks();
+            input.focus();
         }
 
-        function toggleTask(index) {
-            tasks[index].completed = !tasks[index].completed;
+        function toggleTask(i) {
+            tasks[i].completed = !tasks[i].completed;
+            const task = tasks.splice(i, 1)[0];
+            if (task.completed) tasks.push(task);
+            else tasks.unshift(task);
             saveTasks();
             renderTasks();
         }
 
-        function deleteTask(index) {
-            tasks.splice(index, 1);
+        function deleteTask(i) {
+            tasks.splice(i, 1);
             saveTasks();
             renderTasks();
         }
 
-        function setFilter(filter) {
-            activeFilter = filter;
+        function setFilter(cat) {
+            activeFilter = cat;
             document.querySelectorAll('.filter-btn').forEach(btn => {
-                btn.classList.toggle('active', btn.textContent.toLowerCase() === filter);
+                btn.classList.toggle('active', btn.dataset.cat === cat);
             });
             renderTasks();
         }
@@ -393,17 +520,17 @@
             renderTasks();
         }
 
-        function escapeHtml(text) {
-            const div = document.createElement('div');
-            div.textContent = text;
-            return div.innerHTML;
+        function escapeHtml(t) {
+            const d = document.createElement('div');
+            d.textContent = t;
+            return d.innerHTML;
         }
 
-        document.getElementById('taskInput').addEventListener('keypress', (e) => {
+        document.getElementById('taskInput').addEventListener('keydown', e => {
             if (e.key === 'Enter') addTask();
         });
 
-        document.getElementById('searchInput').addEventListener('input', (e) => {
+        document.getElementById('searchInput').addEventListener('input', e => {
             searchQuery = e.target.value.toLowerCase();
             document.getElementById('searchClear').classList.toggle('visible', searchQuery.length > 0);
             renderTasks();
diff --git a/examples/index.html b/examples/index.html
index 13e4cc1..beb6c10 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -3,186 +3,278 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Todo App</title>
+    <title>Todo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
+        :root {
+            --bg: #111110;
+            --surface: #1C1C1A;
+            --surface-hover: #232320;
+            --border: #2E2E2A;
+            --border-focus: #E8A87C;
+            --text: #E8E4DF;
+            --text-muted: #8A8580;
+            --text-faint: #5A5750;
+            --accent: #E8A87C;
+            --accent-hover: #D4926A;
+            --accent-text: #1C1C1A;
+            --check: #7FB88F;
+            --danger: #C96B5E;
+            --radius: 10px;
+            --radius-sm: 7px;
         }
 
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: #1a1a2e;
-            color: #e0e0e0;
+            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--bg);
+            color: var(--text);
             min-height: 100vh;
             display: flex;
             justify-content: center;
-            padding: 2rem 1rem;
+            padding: 4rem 1.5rem 2rem;
+            background-image: radial-gradient(ellipse at 50% 0%, #1E1D1A 0%, var(--bg) 70%);
         }
 
         .container {
             width: 100%;
-            max-width: 540px;
+            max-width: 480px;
+        }
+
+        header {
+            margin-bottom: 2rem;
         }
 
         h1 {
-            font-size: 1.75rem;
-            font-weight: 600;
-            margin-bottom: 1.5rem;
-            color: #ffffff;
+            font-size: 1.5rem;
+            font-weight: 700;
+            letter-spacing: -0.03em;
+            color: var(--text);
         }
 
-        .input-row {
+        h1 span {
+            color: var(--text-faint);
+            font-weight: 400;
+            font-size: 0.875rem;
+            margin-left: 0.5rem;
+            letter-spacing: 0;
+        }
+
+        .input-area {
             display: flex;
             gap: 0.5rem;
-            margin-bottom: 1.5rem;
+            margin-bottom: 2rem;
+            position: relative;
         }
 
-        .input-row input {
+        .input-area input {
             flex: 1;
-            padding: 0.75rem 1rem;
-            background: #16213e;
-            border: 1px solid #2a2a4a;
-            border-radius: 8px;
-            color: #e0e0e0;
-            font-size: 1rem;
+            padding: 0.8125rem 1rem;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            color: var(--text);
+            font-family: inherit;
+            font-size: 0.9375rem;
             outline: none;
-            transition: border-color 0.2s;
+            transition: border-color 0.2s, box-shadow 0.2s;
         }
 
-        .input-row input:focus {
-            border-color: #4DB8A4;
+        .input-area input:focus {
+            border-color: var(--border-focus);
+            box-shadow: 0 0 0 3px rgba(232, 168, 124, 0.1);
         }
 
-        .input-row input::placeholder {
-            color: #666;
+        .input-area input::placeholder {
+            color: var(--text-faint);
         }
 
-        .input-row button {
-            padding: 0.75rem 1.25rem;
-            background: #4DB8A4;
-            color: #1a1a2e;
+        .input-area button {
+            padding: 0 1.25rem;
+            background: var(--accent);
+            color: var(--accent-text);
             border: none;
-            border-radius: 8px;
-            font-size: 1rem;
+            border-radius: var(--radius);
+            font-family: inherit;
+            font-size: 0.875rem;
             font-weight: 600;
             cursor: pointer;
-            transition: background 0.2s;
+            transition: background 0.15s, transform 0.1s;
+            white-space: nowrap;
         }
 
-        .input-row button:hover {
-            background: #3da897;
+        .input-area button:hover {
+            background: var(--accent-hover);
+        }
+
+        .input-area button:active {
+            transform: scale(0.97);
         }
 
         .task-list {
             list-style: none;
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
         }
 
         .task-item {
             display: flex;
             align-items: center;
-            gap: 0.75rem;
+            gap: 0.875rem;
             padding: 0.875rem 1rem;
-            background: #16213e;
-            border-radius: 8px;
-            margin-bottom: 0.5rem;
-            transition: opacity 0.3s, transform 0.3s;
-            animation: slideIn 0.3s ease;
+            background: var(--surface);
+            border-radius: var(--radius-sm);
+            transition: background 0.15s;
+            animation: fadeUp 0.25s ease both;
         }
 
-        @keyframes slideIn {
-            from {
-                opacity: 0;
-                transform: translateY(-10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
+        .task-item:first-child { border-radius: var(--radius) var(--radius) var(--radius-sm) var(--radius-sm); }
+        .task-item:last-child { border-radius: var(--radius-sm) var(--radius-sm) var(--radius) var(--radius); }
+        .task-item:only-child { border-radius: var(--radius); }
+
+        .task-item:hover {
+            background: var(--surface-hover);
         }
 
-        .task-item.completed .task-text {
-            text-decoration: line-through;
-            color: #555;
+        @keyframes fadeUp {
+            from { opacity: 0; transform: translateY(6px); }
+            to { opacity: 1; transform: translateY(0); }
         }
 
-        .task-checkbox {
+        .checkbox {
             width: 20px;
             height: 20px;
-            border: 2px solid #4DB8A4;
-            border-radius: 50%;
+            border: 1.5px solid var(--text-faint);
+            border-radius: 6px;
             cursor: pointer;
+            flex-shrink: 0;
             display: flex;
             align-items: center;
             justify-content: center;
-            flex-shrink: 0;
-            transition: background 0.2s;
+            transition: all 0.2s;
         }
 
-        .task-item.completed .task-checkbox {
-            background: #4DB8A4;
+        .checkbox:hover {
+            border-color: var(--check);
         }
 
-        .task-item.completed .task-checkbox::after {
-            content: '\2713';
-            color: #1a1a2e;
-            font-size: 0.75rem;
-            font-weight: bold;
+        .task-item.completed .checkbox {
+            background: var(--check);
+            border-color: var(--check);
+        }
+
+        .checkbox svg {
+            width: 12px;
+            height: 12px;
+            opacity: 0;
+            transition: opacity 0.15s;
+        }
+
+        .task-item.completed .checkbox svg {
+            opacity: 1;
         }
 
         .task-text {
             flex: 1;
-            font-size: 0.95rem;
-            line-height: 1.4;
+            font-size: 0.9375rem;
+            line-height: 1.45;
             transition: color 0.2s;
         }
 
+        .task-item.completed .task-text {
+            color: var(--text-faint);
+            text-decoration: line-through;
+            text-decoration-color: var(--text-faint);
+        }
+
         .delete-btn {
+            opacity: 0;
             background: none;
             border: none;
-            color: #555;
+            color: var(--text-faint);
             cursor: pointer;
-            font-size: 1.25rem;
             padding: 0.25rem;
+            font-size: 1rem;
             line-height: 1;
-            transition: color 0.2s;
+            transition: opacity 0.15s, color 0.15s;
             flex-shrink: 0;
         }
 
+        .task-item:hover .delete-btn {
+            opacity: 1;
+        }
+
         .delete-btn:hover {
-            color: #e74c3c;
+            color: var(--danger);
         }
 
         .empty-state {
             text-align: center;
-            color: #555;
-            padding: 2rem;
-            font-size: 0.95rem;
+            padding: 3rem 1rem;
+            color: var(--text-faint);
+            font-size: 0.9375rem;
+        }
+
+        .empty-state::before {
+            content: '';
+            display: block;
+            width: 48px;
+            height: 48px;
+            margin: 0 auto 1rem;
+            border: 2px dashed var(--border);
+            border-radius: 12px;
+        }
+
+        .footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 1rem;
+            padding: 0 0.25rem;
         }
 
         .task-count {
-            text-align: center;
-            color: #555;
-            font-size: 0.8rem;
-            margin-top: 1rem;
+            color: var(--text-faint);
+            font-size: 0.8125rem;
+        }
+
+        @media (max-width: 480px) {
+            body { padding: 2rem 1rem; }
+            .task-item { padding: 0.75rem; gap: 0.75rem; }
+            .delete-btn { opacity: 0.5; }
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>Todo</h1>
-        <div class="input-row">
-            <input type="text" id="taskInput" placeholder="What needs to be done?" autofocus>
+        <header>
+            <h1>Todo <span id="dateDisplay"></span></h1>
+        </header>
+
+        <div class="input-area">
+            <input type="text" id="taskInput" placeholder="Add a new task..." autofocus>
             <button onclick="addTask()">Add</button>
         </div>
+
         <ul class="task-list" id="taskList"></ul>
-        <div class="task-count" id="taskCount"></div>
+
+        <div class="footer">
+            <div class="task-count" id="taskCount"></div>
+        </div>
     </div>
 
     <script>
+        const checkSvg = '<svg viewBox="0 0 12 12" fill="none" stroke="#1C1C1A" stroke-width="2" stroke-linecap="round"><polyline points="2.5,6 5,8.5 9.5,3.5"/></svg>';
         let tasks = JSON.parse(localStorage.getItem('todos') || '[]');
 
+        // Show today's date
+        const d = new Date();
+        document.getElementById('dateDisplay').textContent =
+            d.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' });
+
         function saveTasks() {
             localStorage.setItem('todos', JSON.stringify(tasks));
         }
@@ -192,21 +284,22 @@
             const countEl = document.getElementById('taskCount');
 
             if (tasks.length === 0) {
-                list.innerHTML = '<li class="empty-state">No tasks yet. Add one above.</li>';
+                list.innerHTML = '<li class="empty-state">No tasks yet</li>';
                 countEl.textContent = '';
                 return;
             }
 
             list.innerHTML = tasks.map((task, i) => `
-                <li class="task-item ${task.completed ? 'completed' : ''}">
-                    <div class="task-checkbox" onclick="toggleTask(${i})"></div>
+                <li class="task-item ${task.completed ? 'completed' : ''}" style="animation-delay:${i * 30}ms">
+                    <div class="checkbox" onclick="toggleTask(${i})">${checkSvg}</div>
                     <span class="task-text">${escapeHtml(task.text)}</span>
-                    <button class="delete-btn" onclick="deleteTask(${i})" title="Delete">&times;</button>
+                    <button class="delete-btn" onclick="deleteTask(${i})" aria-label="Delete">&times;</button>
                 </li>
             `).join('');
 
             const active = tasks.filter(t => !t.completed).length;
-            countEl.textContent = `${active} task${active !== 1 ? 's' : ''} remaining`;
+            const total = tasks.length;
+            countEl.textContent = active === 0 ? 'All done' : `${active} of ${total} remaining`;
         }
 
         function addTask() {
@@ -218,27 +311,32 @@
             input.value = '';
             saveTasks();
             renderTasks();
+            input.focus();
         }
 
-        function toggleTask(index) {
-            tasks[index].completed = !tasks[index].completed;
+        function toggleTask(i) {
+            tasks[i].completed = !tasks[i].completed;
+            // Move completed to bottom
+            const task = tasks.splice(i, 1)[0];
+            if (task.completed) tasks.push(task);
+            else tasks.unshift(task);
             saveTasks();
             renderTasks();
         }
 
-        function deleteTask(index) {
-            tasks.splice(index, 1);
+        function deleteTask(i) {
+            tasks.splice(i, 1);
             saveTasks();
             renderTasks();
         }
 
-        function escapeHtml(text) {
-            const div = document.createElement('div');
-            div.textContent = text;
-            return div.innerHTML;
+        function escapeHtml(t) {
+            const d = document.createElement('div');
+            d.textContent = t;
+            return d.innerHTML;
         }
 
-        document.getElementById('taskInput').addEventListener('keypress', (e) => {
+        document.getElementById('taskInput').addEventListener('keydown', e => {
             if (e.key === 'Enter') addTask();
         });
 
