diff --git a/CLAUDE.md b/CLAUDE.md
index 64f91af..b86bde7 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -67,3 +67,20 @@ When a form is submitted, the framework resolves the action in this order:
 - `profile-progressive/` — Simple Tier 1 form with validation
 - `live-preview/` — Tier 1 with `Change()` method for live updates
 - `chat/` — Tier 1+2 (uses `lvt-scroll` for auto-scroll)
+
+## CSS
+
+All examples use [Pico CSS](https://picocss.com/docs) exclusively:
+
+- Include via CDN: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">`
+- Use semantic HTML — Pico auto-styles: `<article>` (cards), `<dialog>` (modals), `<details>` (accordions), `<table>`, `<nav>`, `<progress>`
+- Use Pico classes sparingly: `.container`, `.grid`, `.secondary`, `.contrast`, `.outline`
+- Use `aria-invalid="true"` for form validation errors, `<small>` for helper/error text
+- Use `<ins>` for success messages, `<del>` for error messages (with `style="display:block;text-decoration:none"`)
+- Use `<mark>` for highlighted/badge text
+- Use `<progress>` for progress bars
+- Use `<hgroup>` for title + subtitle groupings
+- Use `<fieldset role="group">` for inline input+button groups
+- Use `<blockquote>` for callout/info boxes
+- Do NOT write custom CSS. If Pico cannot express a style, ask before adding custom CSS.
+- Pico CSS variables (`--pico-*`) may be used for theming when semantic markup is insufficient
diff --git a/avatar-upload/avatar-upload.tmpl b/avatar-upload/avatar-upload.tmpl
index 1eaea00..b7a623d 100644
--- a/avatar-upload/avatar-upload.tmpl
+++ b/avatar-upload/avatar-upload.tmpl
@@ -4,321 +4,97 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Avatar Upload Example - LiveTemplate</title>
-    <style>
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 20px;
-        }
-
-        .container {
-            background: white;
-            border-radius: 20px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-            max-width: 500px;
-            width: 100%;
-            padding: 40px;
-        }
-
-        h1 {
-            color: #333;
-            margin-bottom: 10px;
-            font-size: 28px;
-        }
-
-        .subtitle {
-            color: #666;
-            margin-bottom: 30px;
-            font-size: 14px;
-        }
-
-        .avatar-section {
-            text-align: center;
-            margin-bottom: 30px;
-        }
-
-        .avatar-display {
-            width: 150px;
-            height: 150px;
-            border-radius: 50%;
-            margin: 0 auto 20px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 48px;
-            font-weight: bold;
-            overflow: hidden;
-            border: 4px solid #f0f0f0;
-        }
-
-        .avatar-display img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-
-        .form-group {
-            margin-bottom: 20px;
-        }
-
-        label {
-            display: block;
-            margin-bottom: 8px;
-            color: #333;
-            font-weight: 500;
-            font-size: 14px;
-        }
-
-        input[type="text"],
-        input[type="email"] {
-            width: 100%;
-            padding: 12px;
-            border: 2px solid #e0e0e0;
-            border-radius: 8px;
-            font-size: 14px;
-            transition: border-color 0.3s;
-        }
-
-        input[type="text"]:focus,
-        input[type="email"]:focus {
-            outline: none;
-            border-color: #667eea;
-        }
-
-        input[type="file"] {
-            width: 100%;
-            padding: 12px;
-            border: 2px dashed #e0e0e0;
-            border-radius: 8px;
-            font-size: 14px;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-
-        input[type="file"]:hover {
-            border-color: #667eea;
-            background: #f8f9ff;
-        }
-
-        .upload-preview {
-            margin-top: 15px;
-        }
-
-        .upload-entry {
-            background: #f8f9fa;
-            padding: 12px;
-            border-radius: 8px;
-            margin-bottom: 10px;
-        }
-
-        .upload-info {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 8px;
-        }
-
-        .upload-name {
-            font-weight: 500;
-            color: #333;
-            font-size: 14px;
-        }
-
-        .upload-progress {
-            color: #667eea;
-            font-size: 12px;
-            font-weight: 600;
-        }
-
-        .progress-bar {
-            width: 100%;
-            height: 4px;
-            background: #e0e0e0;
-            border-radius: 2px;
-            overflow: hidden;
-        }
-
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-            transition: width 0.3s;
-        }
-
-        .error {
-            color: #dc3545;
-            font-size: 12px;
-            margin-top: 5px;
-        }
-
-        .success {
-            color: #28a745;
-            font-size: 12px;
-            margin-top: 5px;
-        }
-
-        .uploading {
-            color: #667eea;
-            font-size: 12px;
-            margin-top: 5px;
-        }
-
-        .upload-status {
-            min-height: 20px;
-        }
-
-        button {
-            width: 100%;
-            padding: 14px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-size: 16px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: transform 0.2s, box-shadow 0.2s;
-        }
-
-        button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
-        }
-
-        button:active {
-            transform: translateY(0);
-        }
-
-        .info-box {
-            background: #f8f9ff;
-            border-left: 4px solid #667eea;
-            padding: 12px;
-            margin-bottom: 20px;
-            border-radius: 4px;
-            font-size: 13px;
-            color: #555;
-        }
-
-        .powered-by {
-            text-align: center;
-            margin-top: 30px;
-            color: #999;
-            font-size: 12px;
-        }
-
-        .powered-by a {
-            color: #667eea;
-            text-decoration: none;
-        }
-    </style>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 </head>
 <body>
-    <div class="container">
-        <h1>Profile Settings</h1>
-        <p class="subtitle">Upload your avatar and update your profile</p>
-
-        <div class="info-box">
-            📸 Accepted: JPEG, PNG, GIF • Max size: 5MB • Click "Save Profile" to upload
-        </div>
-
-        <div class="avatar-section">
-            <div class="avatar-display">
+    <main class="container">
+        <article>
+            <header>
+                <h1>Profile Settings</h1>
+                <small>Upload your avatar and update your profile</small>
+            </header>
+
+            <blockquote>
+                Accepted: JPEG, PNG, GIF — Max size: 5MB — Click "Save Profile" to upload
+            </blockquote>
+
+            <div>
                 {{if .AvatarURL}}
                     <img src="{{.AvatarURL}}" alt="Avatar">
                 {{else}}
-                    {{slice .Name 0 1}}
+                    <mark>{{slice .Name 0 1}}</mark>
                 {{end}}
             </div>
-        </div>
-
-        <form method="POST" name="updateProfile">
-            <div class="form-group">
-                <label for="name">Name</label>
-                <input type="text" id="name" name="name" value="{{.Name}}" required>
-            </div>
-
-            <div class="form-group">
-                <label for="email">Email</label>
-                <input type="email" id="email" name="email" value="{{.Email}}" required>
-            </div>
 
-            <div class="form-group">
-                <label for="avatar">Avatar</label>
-                <input type="file"
-                       id="avatar"
-                       lvt-upload="avatar"
-                       accept="image/jpeg,image/png,image/gif">
-            </div>
+            <form method="POST" name="updateProfile">
+                <label for="name">
+                    Name
+                    <input type="text" id="name" name="name" value="{{.Name}}" required>
+                </label>
+
+                <label for="email">
+                    Email
+                    <input type="email" id="email" name="email" value="{{.Email}}" required>
+                </label>
+
+                <label for="avatar">
+                    Avatar
+                    <input type="file"
+                           id="avatar"
+                           lvt-upload="avatar"
+                           accept="image/jpeg,image/png,image/gif">
+                </label>
 
-            <div class="upload-preview">
                 {{range .lvt.Uploads "avatar"}}
-                    <div class="upload-entry">
-                        <div class="upload-info">
-                            <span class="upload-name">{{.ClientName}}</span>
-                            <span class="upload-progress">{{.Progress}}%</span>
-                        </div>
-                        <div class="progress-bar">
-                            <div class="progress-fill" style="width: {{.Progress}}%"></div>
-                        </div>
-                        <div class="upload-status">
+                    <div>
+                        <small><strong>{{.ClientName}}</strong> — {{.Progress}}%</small>
+                        <progress value="{{.Progress}}" max="100"></progress>
                         {{if .Error}}
-                            <div class="error">❌ {{.Error}}</div>
+                            <del style="display:block;text-decoration:none">{{.Error}}</del>
                         {{else if .Done}}
-                            <div class="success">✅ Upload complete!</div>
+                            <ins style="display:block;text-decoration:none">Upload complete!</ins>
                         {{else}}
-                            <div class="uploading">⏳ Uploading...</div>
+                            <small>Uploading...</small>
                         {{end}}
-                        </div>
                     </div>
                 {{end}}
 
                 {{if .lvt.HasUploadError "avatar"}}
-                    <div class="error">⚠️ {{.lvt.UploadError "avatar"}}</div>
+                    <del style="display:block;text-decoration:none">{{.lvt.UploadError "avatar"}}</del>
                 {{end}}
-            </div>
 
-            <button type="submit">Save Profile</button>
-        </form>
+                <button type="submit">Save Profile</button>
+            </form>
 
-        <div class="powered-by">
-            Powered by <a href="https://github.com/livetemplate/livetemplate" target="_blank">LiveTemplate v0.3.0</a>
-        </div>
-    </div>
+            <footer>
+                <small>Powered by <a href="https://github.com/livetemplate/livetemplate" target="_blank">LiveTemplate v0.3.0</a></small>
+            </footer>
+        </article>
+    </main>
 
-    {{if .lvt.DevMode}}
-    <script src="/livetemplate-client.js"></script>
-    {{else}}
-    <script src="https://cdn.jsdelivr.net/npm/@livetemplate/client@latest/dist/livetemplate-client.browser.js"></script>
-    {{end}}
     <script>
         // Listen for upload events
         document.addEventListener('DOMContentLoaded', () => {
             const wrapper = document.querySelector('[data-lvt-id]');
             if (wrapper) {
                 wrapper.addEventListener('lvt:upload:progress', (e) => {
-                    console.log('📤 Upload progress:', e.detail.entry.file.name, e.detail.entry.progress + '%');
+                    console.log('Upload progress:', e.detail.entry.file.name, e.detail.entry.progress + '%');
                 });
 
                 wrapper.addEventListener('lvt:upload:complete', (e) => {
-                    console.log('✅ Upload complete:', e.detail.uploadName);
+                    console.log('Upload complete:', e.detail.uploadName);
                 });
 
                 wrapper.addEventListener('lvt:upload:error', (e) => {
-                    console.error('❌ Upload error:', e.detail.error);
+                    console.error('Upload error:', e.detail.error);
                 });
             }
         });
     </script>
+    {{if .lvt.DevMode}}
+    <script src="/livetemplate-client.js"></script>
+    {{else}}
+    <script src="https://cdn.jsdelivr.net/npm/@livetemplate/client@latest/dist/livetemplate-client.browser.js"></script>
+    {{end}}
 </body>
 </html>
diff --git a/chat/chat.tmpl b/chat/chat.tmpl
index 5129e13..d86f9eb 100644
--- a/chat/chat.tmpl
+++ b/chat/chat.tmpl
@@ -10,11 +10,6 @@
         body {
             padding: 1rem;
         }
-        .stats {
-            font-size: 0.9rem;
-            margin-bottom: 1rem;
-            opacity: 0.8;
-        }
         .messages {
             border: 1px solid var(--pico-muted-border-color);
             border-radius: var(--pico-border-radius);
@@ -46,25 +41,12 @@
         .message-time {
             float: right;
         }
-        .input-form {
-            display: grid;
-            grid-template-columns: 1fr auto;
-            gap: 0.5rem;
-        }
-        .input-form input {
-            margin-bottom: 0;
-        }
-        .empty-state {
-            text-align: center;
-            opacity: 0.6;
-            padding: 3rem;
-        }
     </style>
 </head>
 <body>
     <main class="container">
-        <h1>💬 LiveTemplate Chat</h1>
-        <div class="stats">
+        <h1>LiveTemplate Chat</h1>
+        <small>
             {{if .CurrentUser}}
                 Logged in as <strong>{{.CurrentUser}}</strong> •
                 {{.OnlineCount}} user{{if ne .OnlineCount 1}}s{{end}} online •
@@ -72,7 +54,7 @@
             {{else}}
                 Welcome! Please login to join the chat
             {{end}}
-        </div>
+        </small>
 
         {{if not .CurrentUser}}
         <form method="POST" name="join">
@@ -85,9 +67,7 @@
         {{else}}
         <div class="messages" id="messages" lvt-scroll="bottom-sticky">
             {{if eq (len .Messages) 0}}
-            <div class="empty-state">
-                No messages yet. Be the first to send one!
-            </div>
+            <p><small>No messages yet. Be the first to send one!</small></p>
             {{else}}
             {{range .Messages}}
             <div class="message {{if eq .Username $.CurrentUser}}mine{{end}}">
@@ -101,7 +81,7 @@
             {{end}}
         </div>
 
-        <form class="input-form" method="POST" name="send">
+        <form method="POST" name="send" role="group">
             <input type="text" name="message" placeholder="Type your message..." autocomplete="off" autofocus>
             <button type="submit">Send</button>
         </form>
diff --git a/chat/chat_e2e_test.go b/chat/chat_e2e_test.go
index 2c3ce57..dabbd55 100644
--- a/chat/chat_e2e_test.go
+++ b/chat/chat_e2e_test.go
@@ -122,7 +122,7 @@ func TestChatE2E(t *testing.T) {
 
 		err := chromedp.Run(browserCtx,
 			// Capture initial state
-			chromedp.Text(".stats", &initialStatsText, chromedp.ByQuery),
+			chromedp.Text("small", &initialStatsText, chromedp.ByQuery),
 			chromedp.Evaluate(`document.querySelector('form[name="join"]') !== null`, &initialFormVisible),
 
 			// Fill and submit join form
@@ -131,7 +131,7 @@ func TestChatE2E(t *testing.T) {
 			waitFor(`document.querySelector('.messages') !== null`, 5*time.Second),
 
 			// Capture after-join state
-			chromedp.Text(".stats", &afterStatsText, chromedp.ByQuery),
+			chromedp.Text("small", &afterStatsText, chromedp.ByQuery),
 			chromedp.Evaluate(`document.querySelector('.messages') !== null`, &afterChatVisible),
 			chromedp.Evaluate(`document.querySelector('form[name="join"]') !== null`, &afterFormVisible),
 		)
diff --git a/counter/counter.tmpl b/counter/counter.tmpl
index db32af0..75f25af 100644
--- a/counter/counter.tmpl
+++ b/counter/counter.tmpl
@@ -4,20 +4,25 @@
     <title>{{.Title}}</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 </head>
 <body>
-    <h1>{{.Title}}</h1>
-    <div>
-        <p>Counter: {{.Counter}}</p>
-        <div>
-            <button name="increment">+1</button>
-            <button name="decrement">-1</button>
-            <button name="reset">Reset</button>
-        </div>
-    </div>
-    <footer>
-        <p>Last updated: {{.LastUpdated}}</p>
-    </footer>
+    <main class="container">
+        <article>
+            <header>
+                <h1>{{.Title}}</h1>
+            </header>
+            <p>Counter: {{.Counter}}</p>
+            <div class="grid">
+                <button name="increment">+1</button>
+                <button name="decrement" class="secondary">-1</button>
+                <button name="reset" class="contrast">Reset</button>
+            </div>
+            <footer>
+                <small>Last updated: {{.LastUpdated}}</small>
+            </footer>
+        </article>
+    </main>
 
     {{if .lvt.DevMode}}
     <script src="/livetemplate-client.js"></script>
diff --git a/counter/counter_test.go b/counter/counter_test.go
index 4ed0472..1227c48 100644
--- a/counter/counter_test.go
+++ b/counter/counter_test.go
@@ -94,8 +94,28 @@ func TestCounterE2E(t *testing.T) {
 		t.Log("✅ Initial page load verified")
 	})
 
-	// Note: Increment/Decrement tests removed due to chromedp timing issues
-	// Core functionality is verified by TestWebSocketBasic
+	t.Run("Button_Click_Increment", func(t *testing.T) {
+		var counterText string
+
+		err := chromedp.Run(ctx,
+			e2etest.WaitFor(`window.liveTemplateClient && window.liveTemplateClient.isReady()`, 5*time.Second),
+			// Click the increment button
+			chromedp.Evaluate(`document.querySelector('button[name="increment"]').click()`, nil),
+			// Wait for counter to update from 0 to 1
+			e2etest.WaitFor(`document.body.innerText.includes('Counter: 1')`, 5*time.Second),
+			chromedp.Evaluate(`document.querySelector('p').textContent`, &counterText),
+		)
+
+		if err != nil {
+			t.Fatalf("Failed to click increment button: %v", err)
+		}
+
+		if !strings.Contains(counterText, "Counter: 1") {
+			t.Errorf("Expected 'Counter: 1', got %q", counterText)
+		}
+
+		t.Log("✅ Button click increment works")
+	})
 
 	t.Run("WebSocket Connection", func(t *testing.T) {
 		// Check for console errors
diff --git a/flash-messages/flash.tmpl b/flash-messages/flash.tmpl
index 5a2b704..956b796 100644
--- a/flash-messages/flash.tmpl
+++ b/flash-messages/flash.tmpl
@@ -4,215 +4,84 @@
     <title>{{.Title}}</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            max-width: 600px;
-            margin: 40px auto;
-            padding: 0 20px;
-            background: #f5f5f5;
-        }
-        h1 { color: #333; }
-
-        /* Flash message styles */
-        .flash {
-            padding: 12px 16px;
-            border-radius: 6px;
-            margin-bottom: 16px;
-            font-weight: 500;
-        }
-        .flash-success {
-            background: #d4edda;
-            color: #155724;
-            border: 1px solid #c3e6cb;
-        }
-        .flash-error {
-            background: #f8d7da;
-            color: #721c24;
-            border: 1px solid #f5c6cb;
-        }
-        .flash-warning {
-            background: #fff3cd;
-            color: #856404;
-            border: 1px solid #ffeeba;
-        }
-        .flash-info {
-            background: #d1ecf1;
-            color: #0c5460;
-            border: 1px solid #bee5eb;
-        }
-
-        /* Field error styles */
-        .field-error {
-            color: #dc3545;
-            font-size: 14px;
-            margin-top: 4px;
-        }
-
-        /* Form styles */
-        .form-group {
-            margin-bottom: 16px;
-        }
-        input[type="text"] {
-            padding: 10px;
-            font-size: 16px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            width: 200px;
-        }
-        input.error {
-            border-color: #dc3545;
-        }
-        button {
-            padding: 10px 20px;
-            font-size: 16px;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            margin-right: 8px;
-            margin-bottom: 8px;
-        }
-        button[type="submit"] {
-            background: #007bff;
-            color: white;
-        }
-        button[type="submit"]:hover {
-            background: #0056b3;
-        }
-        .btn-danger {
-            background: #dc3545;
-            color: white;
-        }
-        .btn-danger:hover {
-            background: #c82333;
-        }
-        .btn-warning {
-            background: #ffc107;
-            color: #212529;
-        }
-        .btn-warning:hover {
-            background: #e0a800;
-        }
-        .btn-secondary {
-            background: #6c757d;
-            color: white;
-        }
-        .btn-secondary:hover {
-            background: #5a6268;
-        }
-
-        /* List styles */
-        .item-list {
-            background: white;
-            border-radius: 8px;
-            padding: 16px;
-            margin-bottom: 16px;
-        }
-        .item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 8px 0;
-            border-bottom: 1px solid #eee;
-        }
-        .item:last-child {
-            border-bottom: none;
-        }
-        .item-name {
-            font-size: 16px;
-        }
-        .remove-btn {
-            padding: 4px 12px;
-            font-size: 14px;
-        }
-
-        /* Info box */
-        .info-box {
-            background: #e9ecef;
-            padding: 16px;
-            border-radius: 8px;
-            margin-top: 24px;
-            font-size: 14px;
-            color: #495057;
-        }
-        code {
-            background: #f8f9fa;
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-family: monospace;
-        }
-    </style>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 </head>
 <body>
-    <h1>{{.Title}}</h1>
+    <main class="container">
+        <h1>{{.Title}}</h1>
 
-    <!-- Flash Messages Section -->
-    {{if .lvt.HasAnyFlash}}
-    <div id="flash-messages">
-        {{if .lvt.HasFlash "success"}}
-        <div class="flash flash-success" data-flash="success">{{.lvt.Flash "success"}}</div>
-        {{end}}
-        {{if .lvt.HasFlash "error"}}
-        <div class="flash flash-error" data-flash="error">{{.lvt.Flash "error"}}</div>
-        {{end}}
-        {{if .lvt.HasFlash "warning"}}
-        <div class="flash flash-warning" data-flash="warning">{{.lvt.Flash "warning"}}</div>
-        {{end}}
-        {{if .lvt.HasFlash "info"}}
-        <div class="flash flash-info" data-flash="info">{{.lvt.Flash "info"}}</div>
+        <!-- Flash Messages Section -->
+        {{if .lvt.HasAnyFlash}}
+        <div id="flash-messages">
+            {{if .lvt.HasFlash "success"}}
+            <ins style="display:block;text-decoration:none" data-flash="success">{{.lvt.Flash "success"}}</ins>
+            {{end}}
+            {{if .lvt.HasFlash "error"}}
+            <del style="display:block;text-decoration:none" data-flash="error">{{.lvt.Flash "error"}}</del>
+            {{end}}
+            {{if .lvt.HasFlash "warning"}}
+            <ins style="display:block;text-decoration:none" data-flash="warning">{{.lvt.Flash "warning"}}</ins>
+            {{end}}
+            {{if .lvt.HasFlash "info"}}
+            <ins style="display:block;text-decoration:none" data-flash="info">{{.lvt.Flash "info"}}</ins>
+            {{end}}
+        </div>
         {{end}}
-    </div>
-    {{end}}
 
-    <!-- Add Item Form -->
-    <div class="form-group">
+        <!-- Add Item Form -->
         <form method="POST" name="addItem">
             <input type="text"
                    name="item"
                    placeholder="Enter item name"
-                   class="{{if .lvt.HasError "item"}}error{{end}}" />
+                   {{if .lvt.HasError "item"}}aria-invalid="true"{{end}} />
             <button type="submit" name="addItem">Add Item</button>
             {{if .lvt.HasError "item"}}
-            <div class="field-error">{{.lvt.Error "item"}}</div>
+            <small>{{.lvt.Error "item"}}</small>
             {{end}}
         </form>
-    </div>
-
-    <!-- Action Buttons -->
-    <div class="form-group">
-        <button name="clearItems" class="btn-warning">Clear All</button>
-        <button name="simulateError" class="btn-danger">Simulate Error</button>
-    </div>
 
-    <!-- Items List -->
-    <div class="item-list">
-        <h3>Items ({{.ItemCount}})</h3>
-        {{if .Items}}
-        {{range .Items}}
-        <div class="item">
-            <span class="item-name">{{.}}</span>
-            <form method="POST" name="removeItem" style="display:inline; margin:0;">
-                <input type="hidden" name="item" value="{{.}}">
-                <button type="submit" name="removeItem" class="remove-btn btn-secondary">Remove</button>
-            </form>
+        <!-- Action Buttons -->
+        <div class="grid">
+            <button name="clearItems" class="secondary">Clear All</button>
+            <button name="simulateError" class="contrast">Simulate Error</button>
         </div>
-        {{end}}
-        {{else}}
-        <p style="color: #6c757d;">No items. Add some above!</p>
-        {{end}}
-    </div>
 
-    <!-- Info Box -->
-    <div class="info-box">
-        <strong>About Flash Messages:</strong>
-        <ul>
-            <li>Flash messages show once and clear after each action</li>
-            <li>They don't affect <code>ResponseMetadata.Success</code></li>
-            <li>Types: <code>success</code>, <code>error</code>, <code>warning</code>, <code>info</code></li>
-            <li>Set via: <code>ctx.SetFlash("success", "message")</code></li>
-            <li>Read via: <code>.lvt.Flash "success"</code>, <code>.lvt.HasFlash "success"</code></li>
-        </ul>
-    </div>
+        <!-- Items List -->
+        <article>
+            <h3>Items ({{.ItemCount}})</h3>
+            {{if .Items}}
+            <table>
+                <tbody>
+                {{range .Items}}
+                <tr>
+                    <td>{{.}}</td>
+                    <td>
+                        <form method="POST" name="removeItem">
+                            <input type="hidden" name="item" value="{{.}}">
+                            <button type="submit" name="removeItem" class="secondary outline">Remove</button>
+                        </form>
+                    </td>
+                </tr>
+                {{end}}
+                </tbody>
+            </table>
+            {{else}}
+            <small>No items. Add some above!</small>
+            {{end}}
+        </article>
+
+        <!-- Info Box -->
+        <blockquote>
+            <strong>About Flash Messages:</strong>
+            <ul>
+                <li>Flash messages show once and clear after each action</li>
+                <li>They don't affect <code>ResponseMetadata.Success</code></li>
+                <li>Types: <code>success</code>, <code>error</code>, <code>warning</code>, <code>info</code></li>
+                <li>Set via: <code>ctx.SetFlash("success", "message")</code></li>
+                <li>Read via: <code>.lvt.Flash "success"</code>, <code>.lvt.HasFlash "success"</code></li>
+            </ul>
+        </blockquote>
+    </main>
 
     {{if .lvt.DevMode}}
     <script src="/livetemplate-client.js"></script>
diff --git a/flash-messages/flash_test.go b/flash-messages/flash_test.go
index f2152f6..cfba096 100644
--- a/flash-messages/flash_test.go
+++ b/flash-messages/flash_test.go
@@ -59,9 +59,9 @@ func TestFlash_ShowsInTemplate(t *testing.T) {
 		t.Errorf("Expected success flash 'Added item: Test Item' in response, got:\n%s", body)
 	}
 
-	// Should have flash-success class
-	if !strings.Contains(body, "flash-success") {
-		t.Errorf("Expected flash-success class in response")
+	// Should have data-flash="success" attribute
+	if !strings.Contains(body, `data-flash="success"`) {
+		t.Errorf("Expected data-flash=\"success\" attribute in response")
 	}
 }
 
@@ -149,36 +149,36 @@ func TestFlash_DifferentTypes(t *testing.T) {
 		name      string
 		action    string
 		item      string
-		wantClass string
+		wantAttr  string
 		wantText  string
 	}{
 		{
-			name:      "success flash",
-			action:    "addItem",
-			item:      "New Item",
-			wantClass: "flash-success",
-			wantText:  "Added item: New Item",
+			name:     "success flash",
+			action:   "addItem",
+			item:     "New Item",
+			wantAttr: `data-flash="success"`,
+			wantText: "Added item: New Item",
 		},
 		{
-			name:      "warning flash (duplicate)",
-			action:    "addItem",
-			item:      "New Item", // Same item = duplicate
-			wantClass: "flash-warning",
-			wantText:  "Item already exists",
+			name:     "warning flash (duplicate)",
+			action:   "addItem",
+			item:     "New Item", // Same item = duplicate
+			wantAttr: `data-flash="warning"`,
+			wantText: "Item already exists",
 		},
 		{
-			name:      "info flash",
-			action:    "removeItem",
-			item:      "New Item",
-			wantClass: "flash-info",
-			wantText:  "Removed item: New Item",
+			name:     "info flash",
+			action:   "removeItem",
+			item:     "New Item",
+			wantAttr: `data-flash="info"`,
+			wantText: "Removed item: New Item",
 		},
 		{
-			name:      "error flash",
-			action:    "simulateError",
-			item:      "",
-			wantClass: "flash-error",
-			wantText:  "Something went wrong",
+			name:     "error flash",
+			action:   "simulateError",
+			item:     "",
+			wantAttr: `data-flash="error"`,
+			wantText: "Something went wrong",
 		},
 	}
 
@@ -197,8 +197,8 @@ func TestFlash_DifferentTypes(t *testing.T) {
 			body := readBody(t, resp)
 			resp.Body.Close()
 
-			if !strings.Contains(body, tt.wantClass) {
-				t.Errorf("Expected %s in response", tt.wantClass)
+			if !strings.Contains(body, tt.wantAttr) {
+				t.Errorf("Expected %s in response", tt.wantAttr)
 			}
 			if !strings.Contains(body, tt.wantText) {
 				t.Errorf("Expected '%s' in response, got:\n%s", tt.wantText, body)
@@ -243,8 +243,8 @@ func TestFlash_FieldErrorsStillWork(t *testing.T) {
 	if !strings.Contains(body, "Item name is required") {
 		t.Error("Expected field error 'Item name is required'")
 	}
-	if !strings.Contains(body, "field-error") {
-		t.Error("Expected field-error class")
+	if !strings.Contains(body, "<small>Item name is required</small>") {
+		t.Error("Expected field error in <small> element")
 	}
 }
 
diff --git a/go.mod b/go.mod
index be164aa..c6a8ce2 100644
--- a/go.mod
+++ b/go.mod
@@ -15,10 +15,21 @@ require (
 )
 
 require (
+	github.com/atotto/clipboard v0.1.4 // indirect
+	github.com/aymanbagabas/go-osc52/v2 v2.0.1 // indirect
+	github.com/brianvoe/gofakeit/v7 v7.8.2 // indirect
 	github.com/cespare/xxhash/v2 v2.3.0 // indirect
+	github.com/charmbracelet/bubbles v0.21.0 // indirect
+	github.com/charmbracelet/bubbletea v1.3.10 // indirect
+	github.com/charmbracelet/colorprofile v0.2.3-0.20250311203215-f60798e515dc // indirect
+	github.com/charmbracelet/lipgloss v1.1.0 // indirect
+	github.com/charmbracelet/x/ansi v0.10.1 // indirect
+	github.com/charmbracelet/x/cellbuf v0.0.13-0.20250311204145-2c3ea96c31dd // indirect
+	github.com/charmbracelet/x/term v0.2.1 // indirect
 	github.com/chromedp/sysutil v1.1.0 // indirect
 	github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f // indirect
 	github.com/dustin/go-humanize v1.0.1 // indirect
+	github.com/erikgeiser/coninput v0.0.0-20211004153227-1c3628e74d0f // indirect
 	github.com/gabriel-vasile/mimetype v1.4.12 // indirect
 	github.com/go-json-experiment/json v0.0.0-20260214004413-d219187c3433 // indirect
 	github.com/go-playground/locales v0.14.1 // indirect
@@ -28,20 +39,35 @@ require (
 	github.com/gobwas/ws v1.4.0 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
 	github.com/leodido/go-urn v1.4.0 // indirect
+	github.com/lucasb-eyer/go-colorful v1.2.0 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/mattn/go-localereader v0.0.1 // indirect
+	github.com/mattn/go-runewidth v0.0.16 // indirect
+	github.com/mfridman/interpolate v0.0.2 // indirect
 	github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421 // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
+	github.com/muesli/ansi v0.0.0-20230316100256-276c6243b2f6 // indirect
+	github.com/muesli/cancelreader v0.2.2 // indirect
+	github.com/muesli/termenv v0.16.0 // indirect
 	github.com/ncruces/go-strftime v1.0.0 // indirect
+	github.com/pressly/goose/v3 v3.26.0 // indirect
 	github.com/redis/go-redis/v9 v9.17.2 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
+	github.com/rivo/uniseg v0.4.7 // indirect
+	github.com/sethvargo/go-retry v0.3.0 // indirect
 	github.com/tdewolff/minify/v2 v2.24.8 // indirect
 	github.com/tdewolff/parse/v2 v2.8.5 // indirect
+	github.com/xo/terminfo v0.0.0-20220910002029-abceb7e1c41e // indirect
+	go.uber.org/multierr v1.11.0 // indirect
 	golang.org/x/crypto v0.48.0 // indirect
 	golang.org/x/exp v0.0.0-20251219203646-944ab1f22d93 // indirect
+	golang.org/x/mod v0.33.0 // indirect
 	golang.org/x/net v0.50.0 // indirect
+	golang.org/x/sync v0.20.0 // indirect
 	golang.org/x/sys v0.41.0 // indirect
 	golang.org/x/text v0.35.0 // indirect
 	golang.org/x/time v0.14.0 // indirect
+	gopkg.in/yaml.v3 v3.0.1 // indirect
 	modernc.org/libc v1.67.4 // indirect
 	modernc.org/mathutil v1.7.1 // indirect
 	modernc.org/memory v1.11.0 // indirect
diff --git a/go.sum b/go.sum
index 1c64aea..5c0c001 100644
--- a/go.sum
+++ b/go.sum
@@ -4,6 +4,12 @@ github.com/Azure/go-ansiterm v0.0.0-20210617225240-d185dfc1b5a1 h1:UQHMgLO+TxOEl
 github.com/Azure/go-ansiterm v0.0.0-20210617225240-d185dfc1b5a1/go.mod h1:xomTg63KZ2rFqZQzSB4Vz2SUXa1BpHTVz9L5PTmPC4E=
 github.com/Microsoft/go-winio v0.6.2 h1:F2VQgta7ecxGYO8k3ZZz3RS8fVIXVxONVUPlNERoyfY=
 github.com/Microsoft/go-winio v0.6.2/go.mod h1:yd8OoFMLzJbo9gZq8j5qaps8bJ9aShtEA8Ipt1oGCvU=
+github.com/atotto/clipboard v0.1.4 h1:EH0zSVneZPSuFR11BlR9YppQTVDbh5+16AmcJi4g1z4=
+github.com/atotto/clipboard v0.1.4/go.mod h1:ZY9tmq7sm5xIbd9bOK4onWV4S6X0u6GY7Vn0Yu86PYI=
+github.com/aymanbagabas/go-osc52/v2 v2.0.1 h1:HwpRHbFMcZLEVr42D4p7XBqjyuxQH5SMiErDT4WkJ2k=
+github.com/aymanbagabas/go-osc52/v2 v2.0.1/go.mod h1:uYgXzlJ7ZpABp8OJ+exZzJJhRNQ2ASbcXHWsFqH8hp8=
+github.com/brianvoe/gofakeit/v7 v7.8.2 h1:FWxoSP4Ss9LWSvTOrWZHz7sIHcpZwLVw2xa/DhJABB4=
+github.com/brianvoe/gofakeit/v7 v7.8.2/go.mod h1:QXuPeBw164PJCzCUZVmgpgHJ3Llj49jSLVkKPMtxtxA=
 github.com/bsm/ginkgo/v2 v2.12.0 h1:Ny8MWAHyOepLGlLKYmXG4IEkioBysk6GpaRTLC8zwWs=
 github.com/bsm/ginkgo/v2 v2.12.0/go.mod h1:SwYbGRRDovPVboqFv0tPTcG1sN61LM1Z4ARdbAV9g4c=
 github.com/bsm/gomega v1.27.10 h1:yeMWxP2pV2fG3FgAODIY8EiRE3dy0aeFYt4l7wh6yKA=
@@ -12,6 +18,20 @@ github.com/cenkalti/backoff/v4 v4.2.1 h1:y4OZtCnogmCPw98Zjyt5a6+QwPLGkiQsYW5oUqy
 github.com/cenkalti/backoff/v4 v4.2.1/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
 github.com/cespare/xxhash/v2 v2.3.0 h1:UL815xU9SqsFlibzuggzjXhog7bL6oX9BbNZnL2UFvs=
 github.com/cespare/xxhash/v2 v2.3.0/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
+github.com/charmbracelet/bubbles v0.21.0 h1:9TdC97SdRVg/1aaXNVWfFH3nnLAwOXr8Fn6u6mfQdFs=
+github.com/charmbracelet/bubbles v0.21.0/go.mod h1:HF+v6QUR4HkEpz62dx7ym2xc71/KBHg+zKwJtMw+qtg=
+github.com/charmbracelet/bubbletea v1.3.10 h1:otUDHWMMzQSB0Pkc87rm691KZ3SWa4KUlvF9nRvCICw=
+github.com/charmbracelet/bubbletea v1.3.10/go.mod h1:ORQfo0fk8U+po9VaNvnV95UPWA1BitP1E0N6xJPlHr4=
+github.com/charmbracelet/colorprofile v0.2.3-0.20250311203215-f60798e515dc h1:4pZI35227imm7yK2bGPcfpFEmuY1gc2YSTShr4iJBfs=
+github.com/charmbracelet/colorprofile v0.2.3-0.20250311203215-f60798e515dc/go.mod h1:X4/0JoqgTIPSFcRA/P6INZzIuyqdFY5rm8tb41s9okk=
+github.com/charmbracelet/lipgloss v1.1.0 h1:vYXsiLHVkK7fp74RkV7b2kq9+zDLoEU4MZoFqR/noCY=
+github.com/charmbracelet/lipgloss v1.1.0/go.mod h1:/6Q8FR2o+kj8rz4Dq0zQc3vYf7X+B0binUUBwA0aL30=
+github.com/charmbracelet/x/ansi v0.10.1 h1:rL3Koar5XvX0pHGfovN03f5cxLbCF2YvLeyz7D2jVDQ=
+github.com/charmbracelet/x/ansi v0.10.1/go.mod h1:3RQDQ6lDnROptfpWuUVIUG64bD2g2BgntdxH0Ya5TeE=
+github.com/charmbracelet/x/cellbuf v0.0.13-0.20250311204145-2c3ea96c31dd h1:vy0GVL4jeHEwG5YOXDmi86oYw2yuYUGqz6a8sLwg0X8=
+github.com/charmbracelet/x/cellbuf v0.0.13-0.20250311204145-2c3ea96c31dd/go.mod h1:xe0nKWGd3eJgtqZRaN9RjMtK7xUYchjzPr7q6kcvCCs=
+github.com/charmbracelet/x/term v0.2.1 h1:AQeHeLZ1OqSXhrAWpYUtZyX1T3zVxfpZuEQMIQaGIAQ=
+github.com/charmbracelet/x/term v0.2.1/go.mod h1:oQ4enTYFV7QN4m0i9mzHrViD7TQKvNEEkHUMCmsxdUg=
 github.com/chromedp/cdproto v0.0.0-20250803210736-d308e07a266d h1:ZtA1sedVbEW7EW80Iz2GR3Ye6PwbJAJXjv7D74xG6HU=
 github.com/chromedp/cdproto v0.0.0-20250803210736-d308e07a266d/go.mod h1:NItd7aLkcfOA/dcMXvl8p1u+lQqioRMq/SqDp71Pb/k=
 github.com/chromedp/chromedp v0.14.2 h1:r3b/WtwM50RsBZHMUm9fsNhhzRStTHrKdr2zmwbZSzM=
@@ -45,6 +65,8 @@ github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkp
 github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
 github.com/ebitengine/purego v0.8.4 h1:CF7LEKg5FFOsASUj0+QwaXf8Ht6TlFxg09+S9wz0omw=
 github.com/ebitengine/purego v0.8.4/go.mod h1:iIjxzd6CiRiOG0UyXP+V1+jWqUXVjPKLAI0mRfJZTmQ=
+github.com/erikgeiser/coninput v0.0.0-20211004153227-1c3628e74d0f h1:Y/CXytFA4m6baUTXGLOoWe4PQhGxaX0KpnayAqC48p4=
+github.com/erikgeiser/coninput v0.0.0-20211004153227-1c3628e74d0f/go.mod h1:vw97MGsxSvLiUE2X8qFplwetxpGLQrlU1Q9AUEIzCaM=
 github.com/felixge/httpsnoop v1.0.4 h1:NFTV2Zj1bL4mc9sqWACXbQFVBBg2W3GPvqp8/ESS2Wg=
 github.com/felixge/httpsnoop v1.0.4/go.mod h1:m8KPJKqk1gH5J9DgRY2ASl2lWCfGKXixSwevea8zH2U=
 github.com/gabriel-vasile/mimetype v1.4.12 h1:e9hWvmLYvtp846tLHam2o++qitpguFiYCKbn0w9jyqw=
@@ -98,14 +120,22 @@ github.com/livetemplate/lvt v0.0.0-20260327182801-53d6d40e692e h1:nAV7BaOatFcbSa
 github.com/livetemplate/lvt v0.0.0-20260327182801-53d6d40e692e/go.mod h1:17cFl500ntymD3gx8h+ZODnVnTictHgG8Wmz/By75sU=
 github.com/livetemplate/lvt/components v0.0.0-20260327182801-53d6d40e692e h1:vuR0pQtEQHZOD2/HvTJfHPKEdoD77XUs1mq1kdjgVig=
 github.com/livetemplate/lvt/components v0.0.0-20260327182801-53d6d40e692e/go.mod h1:G9PElN3LRf8xoRtoxbOAcTkV/4FhrCE/Laczkz5bfL4=
+github.com/lucasb-eyer/go-colorful v1.2.0 h1:1nnpGOrhyZZuNyfu1QjKiUICQ74+3FNCN69Aj6K7nkY=
+github.com/lucasb-eyer/go-colorful v1.2.0/go.mod h1:R4dSotOR9KMtayYi1e77YzuveK+i7ruzyGqttikkLy0=
 github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0 h1:6E+4a0GO5zZEnZ81pIr0yLvtUWk2if982qA3F3QD6H4=
 github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0/go.mod h1:zJYVVT2jmtg6P3p1VtQj7WsuWi/y4VnjVBn7F8KPB3I=
 github.com/magiconair/properties v1.8.10 h1:s31yESBquKXCV9a/ScB3ESkOjUYYv+X0rg8SYxI99mE=
 github.com/magiconair/properties v1.8.10/go.mod h1:Dhd985XPs7jluiymwWYZ0G4Z61jb3vdS329zhj2hYo0=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/mattn/go-localereader v0.0.1 h1:ygSAOl7ZXTx4RdPYinUpg6W99U8jWvWi9Ye2JC/oIi4=
+github.com/mattn/go-localereader v0.0.1/go.mod h1:8fBrzywKY7BI3czFoHkuzRoWE9C+EiG4R1k4Cjx5p88=
+github.com/mattn/go-runewidth v0.0.16 h1:E5ScNMtiwvlvB5paMFdw9p4kSQzbXFikJ5SQO6TULQc=
+github.com/mattn/go-runewidth v0.0.16/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
 github.com/mdelapenya/tlscert v0.2.0 h1:7H81W6Z/4weDvZBNOfQte5GpIMo0lGYEeWbkGp5LJHI=
 github.com/mdelapenya/tlscert v0.2.0/go.mod h1:O4njj3ELLnJjGdkN7M/vIVCpZ+Cf0L6muqOG4tLSl8o=
+github.com/mfridman/interpolate v0.0.2 h1:pnuTK7MQIxxFz1Gr+rjSIx9u7qVjf5VOoM/u6BbAxPY=
+github.com/mfridman/interpolate v0.0.2/go.mod h1:p+7uk6oE07mpE/Ik1b8EckO0O4ZXiGAfshKBWLUM9Xg=
 github.com/moby/docker-image-spec v1.3.1 h1:jMKff3w6PgbfSa69GfNg+zN/XLhfXJGnEx3Nl2EsFP0=
 github.com/moby/docker-image-spec v1.3.1/go.mod h1:eKmb5VW8vQEh/BAr2yvVNvuiJuY6UIocYsFu/DxxRpo=
 github.com/moby/go-archive v0.1.0 h1:Kk/5rdW/g+H8NHdJW2gsXyZ7UnzvJNOy6VKJqueWdcQ=
@@ -126,6 +156,12 @@ github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9G
 github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
 github.com/morikuni/aec v1.0.0 h1:nP9CBfwrvYnBRgY6qfDQkygYDmYwOilePFkwzv4dU8A=
 github.com/morikuni/aec v1.0.0/go.mod h1:BbKIizmSmc5MMPqRYbxO4ZU0S0+P200+tUnFx7PXmsc=
+github.com/muesli/ansi v0.0.0-20230316100256-276c6243b2f6 h1:ZK8zHtRHOkbHy6Mmr5D264iyp3TiX5OmNcI5cIARiQI=
+github.com/muesli/ansi v0.0.0-20230316100256-276c6243b2f6/go.mod h1:CJlz5H+gyd6CUWT45Oy4q24RdLyn7Md9Vj2/ldJBSIo=
+github.com/muesli/cancelreader v0.2.2 h1:3I4Kt4BQjOR54NavqnDogx/MIoWBFa0StPA8ELUXHmA=
+github.com/muesli/cancelreader v0.2.2/go.mod h1:3XuTXfFS2VjM+HTLZY9Ak0l6eUKfijIfMUZ4EgX0QYo=
+github.com/muesli/termenv v0.16.0 h1:S5AlUN9dENB57rsbnkPyfdGuWIlkmzJjbFf0Tf5FWUc=
+github.com/muesli/termenv v0.16.0/go.mod h1:ZRfOIKPFDYQoDFF4Olj7/QJbW60Ol/kL1pU3VfY/Cnk=
 github.com/ncruces/go-strftime v1.0.0 h1:HMFp8mLCTPp341M/ZnA4qaf7ZlsbTc+miZjCLOFAw7w=
 github.com/ncruces/go-strftime v1.0.0/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
 github.com/opencontainers/go-digest v1.0.0 h1:apOUWs51W5PlhuyGyz9FCeeBIOUDA/6nW8Oi/yOhh5U=
@@ -140,10 +176,17 @@ github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZb
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c h1:ncq/mPwQF4JjgDlrVEn3C11VoGHZN7m8qihwgMEtzYw=
 github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c/go.mod h1:OmDBASR4679mdNQnz2pUhc2G8CO2JrUAVFDRBDP/hJE=
+github.com/pressly/goose/v3 v3.26.0 h1:KJakav68jdH0WDvoAcj8+n61WqOIaPGgH0bJWS6jpmM=
+github.com/pressly/goose/v3 v3.26.0/go.mod h1:4hC1KrritdCxtuFsqgs1R4AU5bWtTAf+cnWvfhf2DNY=
 github.com/redis/go-redis/v9 v9.17.2 h1:P2EGsA4qVIM3Pp+aPocCJ7DguDHhqrXNhVcEp4ViluI=
 github.com/redis/go-redis/v9 v9.17.2/go.mod h1:u410H11HMLoB+TP67dz8rL9s6QW2j76l0//kSOd3370=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
+github.com/rivo/uniseg v0.4.7 h1:WUdvkW8uEhrYfLC4ZzdpI2ztxP1I582+49Oc5Mq64VQ=
+github.com/rivo/uniseg v0.4.7/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
+github.com/sethvargo/go-retry v0.3.0 h1:EEt31A35QhrcRZtrYFDTBg91cqZVnFL2navjDrah2SE=
+github.com/sethvargo/go-retry v0.3.0/go.mod h1:mNX17F0C/HguQMyMyJxcnU471gOZGxCLyYaFyAZraas=
 github.com/shirou/gopsutil/v4 v4.25.6 h1:kLysI2JsKorfaFPcYmcJqbzROzsBWEOAtw6A7dIfqXs=
 github.com/shirou/gopsutil/v4 v4.25.6/go.mod h1:PfybzyydfZcN+JMMjkF6Zb8Mq1A/VcogFFg7hj50W9c=
 github.com/sirupsen/logrus v1.9.3 h1:dueUQJ1C2q9oE3F7wvmSGAaVtTmUizReu6fjN8uqzbQ=
@@ -166,6 +209,8 @@ github.com/tklauser/go-sysconf v0.3.12 h1:0QaGUFOdQaIVdPgfITYzaTegZvdCjmYO52cSFA
 github.com/tklauser/go-sysconf v0.3.12/go.mod h1:Ho14jnntGE1fpdOqQEEaiKRpvIavV0hSfmBq8nJbHYI=
 github.com/tklauser/numcpus v0.6.1 h1:ng9scYS7az0Bk4OZLvrNXNSAO2Pxr1XXRAPyjhIx+Fk=
 github.com/tklauser/numcpus v0.6.1/go.mod h1:1XfjsgE2zo8GVw7POkMbHENHzVg3GzmoZ9fESEdAacY=
+github.com/xo/terminfo v0.0.0-20220910002029-abceb7e1c41e h1:JVG44RsyaB9T2KIHavMF/ppJZNG9ZpyihvCd0w101no=
+github.com/xo/terminfo v0.0.0-20220910002029-abceb7e1c41e/go.mod h1:RbqR21r5mrJuqunuUZ/Dhy/avygyECGrLceyNeo4LiM=
 github.com/yusufpapurcu/wmi v1.2.4 h1:zFUKzehAFReQwLys1b/iSMl+JQGSCSjtVqQn9bBrPo0=
 github.com/yusufpapurcu/wmi v1.2.4/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0=
 go.opentelemetry.io/auto/sdk v1.1.0 h1:cH53jehLUN6UFLY71z+NDOiNJqDdPRaXzTel0sJySYA=
@@ -178,6 +223,8 @@ go.opentelemetry.io/otel/metric v1.37.0 h1:mvwbQS5m0tbmqML4NqK+e3aDiO02vsf/Wgbsd
 go.opentelemetry.io/otel/metric v1.37.0/go.mod h1:04wGrZurHYKOc+RKeye86GwKiTb9FKm1WHtO+4EVr2E=
 go.opentelemetry.io/otel/trace v1.37.0 h1:HLdcFNbRQBE2imdSEgm/kwqmQj1Or1l/7bW6mxVK7z4=
 go.opentelemetry.io/otel/trace v1.37.0/go.mod h1:TlgrlQ+PtQO5XFerSPUYG0JSgGyryXewPGyayAWSBS0=
+go.uber.org/multierr v1.11.0 h1:blXXJkSxSSfBVBlC76pxqeO+LN3aDfLQo+309xJstO0=
+go.uber.org/multierr v1.11.0/go.mod h1:20+QtiLqy0Nd6FdQB9TLXag12DsQkrbs3htMFfDN80Y=
 golang.org/x/crypto v0.48.0 h1:/VRzVqiRSggnhY7gNRxPauEQ5Drw9haKdM0jqfcCFts=
 golang.org/x/crypto v0.48.0/go.mod h1:r0kV5h3qnFPlQnBSrULhlsRfryS2pmewsg+XfMgkVos=
 golang.org/x/exp v0.0.0-20251219203646-944ab1f22d93 h1:fQsdNF2N+/YewlRZiricy4P1iimyPKZ/xwniHj8Q2a0=
@@ -188,6 +235,7 @@ golang.org/x/net v0.50.0 h1:ucWh9eiCGyDR3vtzso0WMQinm2Dnt8cFMuQa9K33J60=
 golang.org/x/net v0.50.0/go.mod h1:UgoSli3F/pBgdJBHCTc+tp3gmrU4XswgGRgtnwWTfyM=
 golang.org/x/sync v0.20.0 h1:e0PTpb7pjO8GAtTs2dQ6jYa5BWYlMuX047Dco/pItO4=
 golang.org/x/sync v0.20.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
+golang.org/x/sys v0.0.0-20210809222454-d867a43fc93e/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.41.0 h1:Ivj+2Cp/ylzLiEU89QhWblYnOE9zerudt9Ftecq2C6k=
 golang.org/x/sys v0.41.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
@@ -197,6 +245,7 @@ golang.org/x/time v0.14.0 h1:MRx4UaLrDotUKUdCIqzPC48t1Y9hANFKIRpNx+Te8PI=
 golang.org/x/time v0.14.0/go.mod h1:eL/Oa2bBBK0TkX57Fyni+NgnyQQN4LitPmob2Hjnqw4=
 golang.org/x/tools v0.42.0 h1:uNgphsn75Tdz5Ji2q36v/nsFSfR/9BRFvqhGBaJGd5k=
 golang.org/x/tools v0.42.0/go.mod h1:Ma6lCIwGZvHK6XtgbswSoWroEkhugApmsXyrUmBhfr0=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 modernc.org/cc/v4 v4.27.1 h1:9W30zRlYrefrDV2JE2O8VDtJ1yPGownxciz5rrbQZis=
diff --git a/graceful-shutdown/counter.tmpl b/graceful-shutdown/counter.tmpl
index db32af0..75f25af 100644
--- a/graceful-shutdown/counter.tmpl
+++ b/graceful-shutdown/counter.tmpl
@@ -4,20 +4,25 @@
     <title>{{.Title}}</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 </head>
 <body>
-    <h1>{{.Title}}</h1>
-    <div>
-        <p>Counter: {{.Counter}}</p>
-        <div>
-            <button name="increment">+1</button>
-            <button name="decrement">-1</button>
-            <button name="reset">Reset</button>
-        </div>
-    </div>
-    <footer>
-        <p>Last updated: {{.LastUpdated}}</p>
-    </footer>
+    <main class="container">
+        <article>
+            <header>
+                <h1>{{.Title}}</h1>
+            </header>
+            <p>Counter: {{.Counter}}</p>
+            <div class="grid">
+                <button name="increment">+1</button>
+                <button name="decrement" class="secondary">-1</button>
+                <button name="reset" class="contrast">Reset</button>
+            </div>
+            <footer>
+                <small>Last updated: {{.LastUpdated}}</small>
+            </footer>
+        </article>
+    </main>
 
     {{if .lvt.DevMode}}
     <script src="/livetemplate-client.js"></script>
diff --git a/live-preview/live_preview_test.go b/live-preview/live_preview_test.go
index 95a4e68..18b8119 100644
--- a/live-preview/live_preview_test.go
+++ b/live-preview/live_preview_test.go
@@ -219,6 +219,27 @@ func TestLivePreviewE2E(t *testing.T) {
 		}
 	})
 
+	t.Run("Live_Input_Updates_Preview", func(t *testing.T) {
+		// Type in the name field — Change() method auto-fires with 300ms debounce
+		err := chromedp.Run(ctx,
+			chromedp.Clear(`input[name="Name"]`, chromedp.ByQuery),
+			chromedp.SendKeys(`input[name="Name"]`, "Alice", chromedp.ByQuery),
+			e2etest.WaitFor(`document.querySelector('#preview').textContent.includes('Hello, Alice!')`, 5*time.Second),
+		)
+		if err != nil {
+			t.Fatalf("Failed to type and see preview update: %v", err)
+		}
+
+		var preview string
+		if err := chromedp.Run(ctx, chromedp.Text(`#preview`, &preview, chromedp.ByQuery)); err != nil {
+			t.Fatalf("Failed to get preview text: %v", err)
+		}
+		if !strings.Contains(preview, "Hello, Alice!") {
+			t.Errorf("Expected preview 'Hello, Alice!', got %q", preview)
+		}
+		t.Log("✅ Live input updates preview in real-time")
+	})
+
 	t.Run("WebSocket Connection", func(t *testing.T) {
 		err := chromedp.Run(ctx,
 			e2etest.WaitFor(`typeof window.liveTemplateClient !== 'undefined'`, 3*time.Second),
diff --git a/live-preview/preview.tmpl b/live-preview/preview.tmpl
index 445fd95..f7844c2 100644
--- a/live-preview/preview.tmpl
+++ b/live-preview/preview.tmpl
@@ -4,15 +4,23 @@
     <title>Live Preview</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 </head>
 <body>
-    <h1>Live Preview</h1>
-    <form method="POST">
-        <label for="name-input">Name</label>
-        <input id="name-input" name="Name" value="{{.Name}}" placeholder="Type your name...">
-        <button type="submit">Save</button>
-    </form>
-    <div id="preview">{{.Preview}}</div>
+    <main class="container">
+        <article>
+            <header>
+                <h1>Live Preview</h1>
+            </header>
+            <form method="POST">
+                <label for="name-input">Name
+                    <input id="name-input" name="Name" value="{{.Name}}" placeholder="Type your name...">
+                </label>
+                <button type="submit" name="submit">Save</button>
+            </form>
+            <blockquote id="preview">{{.Preview}}</blockquote>
+        </article>
+    </main>
 
     {{if .lvt.DevMode}}
     <script src="/livetemplate-client.js"></script>
diff --git a/login/templates/auth.html b/login/templates/auth.html
index 3224ccd..a394521 100644
--- a/login/templates/auth.html
+++ b/login/templates/auth.html
@@ -4,171 +4,57 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login Example - LiveTemplate</title>
-    <style>
-        * {
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            margin: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .container {
-            background: white;
-            padding: 2rem;
-            border-radius: 8px;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
-            width: 100%;
-            max-width: 400px;
-        }
-        h1 {
-            margin: 0 0 1.5rem;
-            color: #333;
-            text-align: center;
-        }
-        .form-group {
-            margin-bottom: 1rem;
-        }
-        label {
-            display: block;
-            margin-bottom: 0.5rem;
-            color: #555;
-            font-weight: 500;
-        }
-        input {
-            width: 100%;
-            padding: 0.75rem;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            font-size: 1rem;
-        }
-        input:focus {
-            outline: none;
-            border-color: #667eea;
-            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
-        }
-        button {
-            width: 100%;
-            padding: 0.75rem;
-            border: none;
-            border-radius: 4px;
-            font-size: 1rem;
-            cursor: pointer;
-            transition: background 0.2s;
-        }
-        .btn-primary {
-            background: #667eea;
-            color: white;
-        }
-        .btn-primary:hover {
-            background: #5a6fd6;
-        }
-        .btn-danger {
-            background: #dc3545;
-            color: white;
-        }
-        .btn-danger:hover {
-            background: #c82333;
-        }
-        .error {
-            background: #fee;
-            color: #c00;
-            padding: 0.75rem;
-            border-radius: 4px;
-            margin-bottom: 1rem;
-            text-align: center;
-        }
-        .welcome {
-            text-align: center;
-            margin-bottom: 1.5rem;
-        }
-        .welcome p {
-            color: #666;
-            margin: 0.5rem 0;
-        }
-        .info {
-            margin-top: 1rem;
-            padding: 0.75rem;
-            background: #f0f7ff;
-            border-radius: 4px;
-            font-size: 0.875rem;
-            color: #555;
-            text-align: center;
-        }
-        .server-message {
-            background: #e8f5e9;
-            color: #2e7d32;
-            padding: 0.75rem;
-            border-radius: 4px;
-            margin-bottom: 1rem;
-            text-align: center;
-            animation: fadeIn 0.5s ease-in;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(-10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .login-time {
-            font-size: 0.75rem;
-            color: #888;
-            margin-top: 0.5rem;
-        }
-    </style>
-    {{if .lvt.DevMode}}
-    <script src="/livetemplate-client.js"></script>
-    {{else}}
-    <script src="https://cdn.jsdelivr.net/npm/@livetemplate/client@latest/dist/livetemplate-client.browser.js"></script>
-    {{end}}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 </head>
 <body>
-    <div class="container">
+    <main class="container">
         {{if .IsLoggedIn}}
         <!-- Dashboard View -->
-        <h1>Dashboard</h1>
-        {{if .ServerMessage}}
-        <div class="server-message">
-            {{.ServerMessage}}
-        </div>
-        {{end}}
-        <div class="welcome">
-            <p>Welcome, <strong>{{.Username}}</strong>!</p>
-            <p>You are successfully logged in.</p>
-            {{if not .LoginTime.IsZero}}
-            <p class="login-time">Logged in at: {{.LoginTime.Format "15:04:05"}}</p>
+        <article>
+            <h1>Dashboard</h1>
+            {{if .ServerMessage}}
+            <ins style="display:block;text-decoration:none">{{.ServerMessage}}</ins>
             {{end}}
-        </div>
-        <!-- HTTP logout (deletes session cookie) -->
-        <form method="POST">
-            <button type="submit" name="logout" class="btn-danger">Logout</button>
-        </form>
+            <section>
+                <p>Welcome, <strong>{{.Username}}</strong>!</p>
+                <p>You are successfully logged in.</p>
+                {{if not .LoginTime.IsZero}}
+                <small>Logged in at: {{.LoginTime.Format "15:04:05"}}</small>
+                {{end}}
+            </section>
+            <!-- HTTP logout (deletes session cookie) -->
+            <form method="POST">
+                <button type="submit" name="logout" class="contrast">Logout</button>
+            </form>
+        </article>
         {{else}}
         <!-- Login View -->
-        <h1>Login</h1>
-        {{if .Error}}
-        <div class="error">{{.Error}}</div>
-        {{end}}
-        <!-- HTTP login form (sets HttpOnly cookie, redirects to dashboard) -->
-        <form method="POST">
-            <div class="form-group">
-                <label for="username">Username</label>
-                <input type="text" id="username" name="username" placeholder="Enter username" required>
-            </div>
-            <div class="form-group">
-                <label for="password">Password</label>
-                <input type="password" id="password" name="password" placeholder="Enter password" required>
-            </div>
-            <button type="submit" name="login" class="btn-primary">Login</button>
-        </form>
-
-        <div class="info">
-            Demo: Use any username with password <strong>secret</strong><br>
-            <small>After login, the server will push a welcome message via WebSocket.</small>
-        </div>
+        <article>
+            <h1>Login</h1>
+            {{if .Error}}
+            <del style="display:block;text-decoration:none">{{.Error}}</del>
+            {{end}}
+            <!-- HTTP login form (sets HttpOnly cookie, redirects to dashboard) -->
+            <form method="POST">
+                <label for="username">Username
+                    <input type="text" id="username" name="username" placeholder="Enter username" required>
+                </label>
+                <label for="password">Password
+                    <input type="password" id="password" name="password" placeholder="Enter password" required>
+                </label>
+                <button type="submit" name="login">Login</button>
+            </form>
+            <small>
+                Demo: Use any username with password <strong>secret</strong><br>
+                After login, the server will push a welcome message via WebSocket.
+            </small>
+        </article>
         {{end}}
-    </div>
+    </main>
+    {{if .lvt.DevMode}}
+    <script src="/livetemplate-client.js"></script>
+    {{else}}
+    <script src="https://cdn.jsdelivr.net/npm/@livetemplate/client@latest/dist/livetemplate-client.browser.js"></script>
+    {{end}}
 </body>
 </html>
diff --git a/observability/counter.tmpl b/observability/counter.tmpl
index db32af0..75f25af 100644
--- a/observability/counter.tmpl
+++ b/observability/counter.tmpl
@@ -4,20 +4,25 @@
     <title>{{.Title}}</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 </head>
 <body>
-    <h1>{{.Title}}</h1>
-    <div>
-        <p>Counter: {{.Counter}}</p>
-        <div>
-            <button name="increment">+1</button>
-            <button name="decrement">-1</button>
-            <button name="reset">Reset</button>
-        </div>
-    </div>
-    <footer>
-        <p>Last updated: {{.LastUpdated}}</p>
-    </footer>
+    <main class="container">
+        <article>
+            <header>
+                <h1>{{.Title}}</h1>
+            </header>
+            <p>Counter: {{.Counter}}</p>
+            <div class="grid">
+                <button name="increment">+1</button>
+                <button name="decrement" class="secondary">-1</button>
+                <button name="reset" class="contrast">Reset</button>
+            </div>
+            <footer>
+                <small>Last updated: {{.LastUpdated}}</small>
+            </footer>
+        </article>
+    </main>
 
     {{if .lvt.DevMode}}
     <script src="/livetemplate-client.js"></script>
diff --git a/production/single-host/app.tmpl b/production/single-host/app.tmpl
index d6eade7..6a9212a 100644
--- a/production/single-host/app.tmpl
+++ b/production/single-host/app.tmpl
@@ -4,171 +4,47 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{.Title}}</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 20px;
-        }
-        .container {
-            background: white;
-            border-radius: 12px;
-            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
-            padding: 40px;
-            max-width: 500px;
-            width: 100%;
-        }
-        h1 {
-            color: #333;
-            margin-bottom: 10px;
-            font-size: 28px;
-        }
-        .subtitle {
-            color: #666;
-            margin-bottom: 30px;
-            font-size: 14px;
-        }
-        .counter-display {
-            background: #f7fafc;
-            border-radius: 8px;
-            padding: 30px;
-            text-align: center;
-            margin-bottom: 20px;
-        }
-        .counter-value {
-            font-size: 72px;
-            font-weight: bold;
-            color: #667eea;
-            margin-bottom: 10px;
-        }
-        .counter-label {
-            color: #666;
-            font-size: 14px;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-        .button-group {
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
-            gap: 10px;
-            margin-bottom: 20px;
-        }
-        button {
-            background: #667eea;
-            color: white;
-            border: none;
-            border-radius: 6px;
-            padding: 15px 20px;
-            font-size: 16px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        button:hover {
-            background: #5568d3;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-        }
-        button:active {
-            transform: translateY(0);
-        }
-        button.reset {
-            grid-column: 1 / -1;
-            background: #e53e3e;
-        }
-        button.reset:hover {
-            background: #c53030;
-        }
-        .footer {
-            text-align: center;
-            color: #666;
-            font-size: 12px;
-            padding-top: 20px;
-            border-top: 1px solid #e2e8f0;
-        }
-        .badge {
-            display: inline-block;
-            background: #48bb78;
-            color: white;
-            padding: 4px 12px;
-            border-radius: 12px;
-            font-size: 11px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            margin-bottom: 20px;
-        }
-        .features {
-            background: #f7fafc;
-            border-radius: 6px;
-            padding: 15px;
-            margin-bottom: 20px;
-        }
-        .features h3 {
-            font-size: 12px;
-            color: #666;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-bottom: 10px;
-        }
-        .features ul {
-            list-style: none;
-        }
-        .features li {
-            padding: 4px 0;
-            font-size: 13px;
-            color: #555;
-        }
-        .features li:before {
-            content: "✓ ";
-            color: #48bb78;
-            font-weight: bold;
-            margin-right: 5px;
-        }
-    </style>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 </head>
 <body>
-    <div class="container">
-        <span class="badge">Production Ready</span>
-        <h1>{{.Title}}</h1>
-        <p class="subtitle">Showcasing production deployment features</p>
+    <main class="container">
+        <article>
+            <header>
+                <mark>Production Ready</mark>
+                <hgroup>
+                    <h1>{{.Title}}</h1>
+                    <p>Showcasing production deployment features</p>
+                </hgroup>
+            </header>
 
-        <div class="features">
-            <h3>Enabled Features</h3>
-            <ul>
-                <li>Environment-based configuration</li>
-                <li>Structured JSON logging</li>
-                <li>Request tracing with trace IDs</li>
-                <li>Graceful shutdown</li>
-                <li>Health & readiness checks</li>
-                <li>Metrics endpoint</li>
-            </ul>
-        </div>
+            <details>
+                <summary>Enabled Features</summary>
+                <ul>
+                    <li>Environment-based configuration</li>
+                    <li>Structured JSON logging</li>
+                    <li>Request tracing with trace IDs</li>
+                    <li>Graceful shutdown</li>
+                    <li>Health &amp; readiness checks</li>
+                    <li>Metrics endpoint</li>
+                </ul>
+            </details>
 
-        <div class="counter-display">
-            <div class="counter-value">{{.Counter}}</div>
-            <div class="counter-label">Counter Value</div>
-        </div>
+            <hgroup>
+                <h2>{{.Counter}}</h2>
+                <p>Counter Value</p>
+            </hgroup>
 
-        <div class="button-group">
-            <button name="increment">+1</button>
-            <button name="decrement">-1</button>
-            <button class="reset" name="reset">Reset</button>
-        </div>
+            <div class="grid">
+                <button name="increment">+1</button>
+                <button name="decrement" class="secondary">-1</button>
+                <button name="reset" class="contrast">Reset</button>
+            </div>
 
-        <div class="footer">
-            Last updated: {{.LastUpdated}}
-        </div>
-    </div>
+            <footer>
+                <small>Last updated: {{.LastUpdated}}</small>
+            </footer>
+        </article>
+    </main>
 
     {{if .lvt.DevMode}}
     <script src="/livetemplate-client.js"></script>
diff --git a/profile-progressive/profile.tmpl b/profile-progressive/profile.tmpl
index cdd0092..74f244a 100644
--- a/profile-progressive/profile.tmpl
+++ b/profile-progressive/profile.tmpl
@@ -2,60 +2,55 @@
 <html>
 <head>
     <title>Progressive Complexity: Profile Demo</title>
-    <style>
-        body { font-family: system-ui, sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
-        h1 { color: #333; }
-        .subtitle { color: #666; font-size: 14px; margin-top: -10px; }
-        label { display: block; font-weight: 600; margin-top: 16px; margin-bottom: 4px; }
-        input, textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; box-sizing: border-box; }
-        input.error-input, textarea.error-input { border-color: #dc3545; background: #fff5f5; }
-        .error { color: #dc3545; font-size: 13px; margin-top: 4px; }
-        button[type="submit"] { margin-top: 20px; padding: 10px 24px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
-        button[type="submit"]:hover { background: #0056b3; }
-        .success { background: #d4edda; color: #155724; padding: 12px; border-radius: 4px; margin-top: 16px; }
-        .preview { background: #f8f9fa; padding: 20px; border-radius: 8px; margin-top: 30px; }
-        .preview h2 { margin-top: 0; }
-    </style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 </head>
 <body>
-    <h1>Edit Profile</h1>
-    <p class="subtitle">Zero <code>lvt-*</code> attributes &mdash; Tier 1 only</p>
+    <main class="container">
+        <hgroup>
+            <h1>Edit Profile</h1>
+            <p>Zero <code>lvt-*</code> attributes &mdash; Tier 1 only</p>
+        </hgroup>
 
-    {{if .Saved}}
-        <div class="success">Profile saved successfully!</div>
-    {{end}}
-
-    <!-- Form auto-submits to Submit() method. No lvt-* needed. -->
-    <form method="POST">
-        <label for="name">Display Name</label>
-        <input type="text" id="name" name="DisplayName" value="{{.DisplayName}}"
-               class="{{if .lvt.HasError "display_name"}}error-input{{end}}">
-        {{if .lvt.HasError "display_name"}}
-            <div class="error">{{.lvt.Error "display_name"}}</div>
+        {{if .Saved}}
+            <ins style="display:block;text-decoration:none">Profile saved successfully!</ins>
         {{end}}
 
-        <label for="email">Email</label>
-        <input type="email" id="email" name="Email" value="{{.Email}}"
-               class="{{if .lvt.HasError "email"}}error-input{{end}}">
-        {{if .lvt.HasError "email"}}
-            <div class="error">{{.lvt.Error "email"}}</div>
-        {{end}}
+        <form method="POST">
+            <label for="name">Display Name
+                <input type="text" id="name" name="DisplayName" value="{{.DisplayName}}"
+                       {{if .lvt.HasError "display_name"}}aria-invalid="true"{{end}}>
+                {{if .lvt.HasError "display_name"}}
+                    <small>{{.lvt.Error "display_name"}}</small>
+                {{end}}
+            </label>
 
-        <label for="bio">Bio</label>
-        <textarea id="bio" name="Bio" rows="4">{{.Bio}}</textarea>
-        {{if .lvt.HasError "bio"}}
-            <div class="error">{{.lvt.Error "bio"}}</div>
-        {{end}}
+            <label for="email">Email
+                <input type="email" id="email" name="Email" value="{{.Email}}"
+                       {{if .lvt.HasError "email"}}aria-invalid="true"{{end}}>
+                {{if .lvt.HasError "email"}}
+                    <small>{{.lvt.Error "email"}}</small>
+                {{end}}
+            </label>
+
+            <label for="bio">Bio
+                <textarea id="bio" name="Bio" rows="4">{{.Bio}}</textarea>
+                {{if .lvt.HasError "bio"}}
+                    <small>{{.lvt.Error "bio"}}</small>
+                {{end}}
+            </label>
 
-        <button type="submit" name="submit">Save Profile</button>
-    </form>
+            <button type="submit" name="submit">Save Profile</button>
+        </form>
 
-    <div class="preview">
-        <h2>Preview</h2>
-        <p><strong>Name:</strong> {{.DisplayName}}</p>
-        <p><strong>Email:</strong> {{.Email}}</p>
-        <p><strong>Bio:</strong> {{.Bio}}</p>
-    </div>
+        <article>
+            <header><strong>Preview</strong></header>
+            <p><strong>Name:</strong> {{.DisplayName}}</p>
+            <p><strong>Email:</strong> {{.Email}}</p>
+            <p><strong>Bio:</strong> {{.Bio}}</p>
+        </article>
+    </main>
 
     {{if .lvt.DevMode}}
     <script src="/livetemplate-client.js"></script>
diff --git a/profile-progressive/profile_progressive_test.go b/profile-progressive/profile_progressive_test.go
index b161c15..fb753cc 100644
--- a/profile-progressive/profile_progressive_test.go
+++ b/profile-progressive/profile_progressive_test.go
@@ -67,8 +67,8 @@ func TestProfileProgressiveE2E(t *testing.T) {
 		var previewHTML string
 		err := chromedp.Run(ctx,
 			chromedp.OuterHTML("body", &html, chromedp.ByQuery),
-			chromedp.Evaluate(`document.querySelector('.success') !== null`, &hasSuccess),
-			chromedp.OuterHTML(".preview", &previewHTML, chromedp.ByQuery),
+			chromedp.Evaluate(`document.querySelector('ins') !== null`, &hasSuccess),
+			chromedp.OuterHTML("article", &previewHTML, chromedp.ByQuery),
 		)
 		if err != nil {
 			t.Fatalf("Failed to get initial state: %v", err)
@@ -100,7 +100,7 @@ func TestProfileProgressiveE2E(t *testing.T) {
 			chromedp.Clear(`textarea[name="Bio"]`, chromedp.ByQuery),
 			chromedp.SendKeys(`textarea[name="Bio"]`, "Updated bio text.", chromedp.ByQuery),
 			chromedp.Evaluate(`document.querySelector('button[type="submit"]').click()`, nil),
-			e2etest.WaitFor(`document.querySelector('.success') !== null`, 5*time.Second),
+			e2etest.WaitFor(`document.querySelector('ins') !== null`, 5*time.Second),
 		)
 		if err != nil {
 			t.Fatalf("Failed to save profile: %v", err)
@@ -115,7 +115,7 @@ func TestProfileProgressiveE2E(t *testing.T) {
 		}
 
 		var previewHTML string
-		if err := chromedp.Run(ctx, chromedp.OuterHTML(".preview", &previewHTML, chromedp.ByQuery)); err != nil {
+		if err := chromedp.Run(ctx, chromedp.OuterHTML("article", &previewHTML, chromedp.ByQuery)); err != nil {
 			t.Fatalf("Failed to get preview: %v", err)
 		}
 		if !strings.Contains(previewHTML, "John Smith") {
@@ -128,15 +128,21 @@ func TestProfileProgressiveE2E(t *testing.T) {
 
 	t.Run("UpdateProfile", func(t *testing.T) {
 		err := chromedp.Run(ctx,
-			chromedp.Evaluate(`window.liveTemplateClient.send({action: 'submit', data: {DisplayName: 'Jane Updated', Email: 'jane.updated@example.com', Bio: 'Fixed and saved.'}})`, nil),
-			e2etest.WaitFor(`document.querySelector('.success') !== null`, 5*time.Second),
+			chromedp.Clear(`input[name="DisplayName"]`, chromedp.ByQuery),
+			chromedp.SendKeys(`input[name="DisplayName"]`, "Jane Updated", chromedp.ByQuery),
+			chromedp.Clear(`input[name="Email"]`, chromedp.ByQuery),
+			chromedp.SendKeys(`input[name="Email"]`, "jane.updated@example.com", chromedp.ByQuery),
+			chromedp.Clear(`textarea[name="Bio"]`, chromedp.ByQuery),
+			chromedp.SendKeys(`textarea[name="Bio"]`, "Fixed and saved.", chromedp.ByQuery),
+			chromedp.Evaluate(`document.querySelector('button[name="submit"]').click()`, nil),
+			e2etest.WaitFor(`document.querySelector('ins') !== null`, 5*time.Second),
 		)
 		if err != nil {
 			t.Fatalf("Failed to update profile: %v", err)
 		}
 
 		var previewHTML string
-		if err := chromedp.Run(ctx, chromedp.OuterHTML(".preview", &previewHTML, chromedp.ByQuery)); err != nil {
+		if err := chromedp.Run(ctx, chromedp.OuterHTML("article", &previewHTML, chromedp.ByQuery)); err != nil {
 			t.Fatalf("Failed to get preview: %v", err)
 		}
 		if !strings.Contains(previewHTML, "Jane Updated") {
diff --git a/progressive-enhancement/progressive-enhancement.tmpl b/progressive-enhancement/progressive-enhancement.tmpl
index 79921e1..494172a 100644
--- a/progressive-enhancement/progressive-enhancement.tmpl
+++ b/progressive-enhancement/progressive-enhancement.tmpl
@@ -6,25 +6,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
     <style>
-        /* JS/no-JS mode indicator visibility */
+        /* Hidden by default, revealed by JS to show the mode indicator */
         .js-mode { display: none; }
-
-        /* Completed todo item */
-        .completed { text-decoration: line-through; opacity: 0.6; }
-
-        /* Empty state centering */
-        .empty-state { text-align: center; }
-
-        /* Todo item layout */
-        .todo-item { display: flex; align-items: center; gap: var(--pico-spacing); }
-        .todo-item form { margin: 0; }
-        .todo-title { flex: 1; }
     </style>
 </head>
 <body>
     <main class="container">
-        <h1>{{.Title}}</h1>
-        <p><small>This app works with or without JavaScript enabled</small></p>
+        <hgroup>
+            <h1>{{.Title}}</h1>
+            <p>This app works with or without JavaScript enabled</p>
+        </hgroup>
 
         <!-- Mode indicator (no-JS version shown by default) -->
         <noscript>
@@ -40,15 +31,13 @@
 
         <!-- Flash messages -->
         {{if .lvt.Flash "success"}}
-        <ins style="display:block; text-decoration:none;">{{.lvt.Flash "success"}}</ins>
+        <ins style="display:block;text-decoration:none">{{.lvt.Flash "success"}}</ins>
         {{end}}
         {{if .lvt.Flash "error"}}
-        <del style="display:block; text-decoration:none;">{{.lvt.Flash "error"}}</del>
+        <del style="display:block;text-decoration:none">{{.lvt.Flash "error"}}</del>
         {{end}}
 
         <!-- Add todo form -->
-        <!-- Works with JS: client intercepts form and routes via WebSocket/fetch -->
-        <!-- Works without JS: method="POST" triggers HTTP form submission -->
         <article>
             <form method="POST" name="add">
                 <input
@@ -69,29 +58,32 @@
         <!-- Todo list -->
         <article>
             {{if not .Items}}
-            <div class="empty-state">
-                <p>No todos yet. Add one above!</p>
-            </div>
+            <p><small>No todos yet. Add one above!</small></p>
             {{else}}
-            {{range .Items}}
-            {{/* No explicit data-key needed - library auto-generates content-based keys */}}
-            <div class="todo-item{{if .Completed}} completed{{end}}">
-                <!-- Toggle form -->
-                <form method="POST" name="toggle">
-                    <input type="hidden" name="id" value="{{.ID}}">
-                    <button type="submit" name="toggle" class="secondary outline" title="Toggle completed">
-                        {{if .Completed}}&#10003;{{else}}&#9675;{{end}}
-                    </button>
-                </form>
-                <span class="todo-title">{{.Title}}</span>
-                <small>{{.CreatedAt}}</small>
-                <!-- Delete form -->
-                <form method="POST" name="delete">
-                    <input type="hidden" name="id" value="{{.ID}}">
-                    <button type="submit" name="delete" class="contrast outline" title="Delete">&#10005;</button>
-                </form>
-            </div>
-            {{end}}
+            <table>
+                <tbody>
+                {{range .Items}}
+                <tr>
+                    <td>
+                        <form method="POST" name="toggle">
+                            <input type="hidden" name="id" value="{{.ID}}">
+                            <button type="submit" name="toggle" class="secondary outline" title="Toggle completed">
+                                {{if .Completed}}&#10003;{{else}}&#9675;{{end}}
+                            </button>
+                        </form>
+                    </td>
+                    <td>{{if .Completed}}<s>{{.Title}}</s>{{else}}{{.Title}}{{end}}</td>
+                    <td><small>{{.CreatedAt}}</small></td>
+                    <td>
+                        <form method="POST" name="delete">
+                            <input type="hidden" name="id" value="{{.ID}}">
+                            <button type="submit" name="delete" class="contrast outline" title="Delete">&#10005;</button>
+                        </form>
+                    </td>
+                </tr>
+                {{end}}
+                </tbody>
+            </table>
             {{end}}
         </article>
     </main>
diff --git a/progressive-enhancement/progressive_enhancement_test.go b/progressive-enhancement/progressive_enhancement_test.go
index 99d08d9..5addb97 100644
--- a/progressive-enhancement/progressive_enhancement_test.go
+++ b/progressive-enhancement/progressive_enhancement_test.go
@@ -154,7 +154,7 @@ func TestProgressiveEnhancement_JSFormSubmission(t *testing.T) {
 	// Count initial todos
 	var initialTodoCount int
 	err = chromedp.Run(ctx,
-		chromedp.Evaluate(`document.querySelectorAll('.todo-item').length`, &initialTodoCount),
+		chromedp.Evaluate(`document.querySelectorAll('tbody tr').length`, &initialTodoCount),
 	)
 	if err != nil {
 		t.Fatalf("Failed to count initial todos: %v", err)
@@ -192,7 +192,7 @@ func TestProgressiveEnhancement_JSFormSubmission(t *testing.T) {
 	// Count todos after submission
 	var finalTodoCount int
 	err = chromedp.Run(ctx,
-		chromedp.Evaluate(`document.querySelectorAll('.todo-item').length`, &finalTodoCount),
+		chromedp.Evaluate(`document.querySelectorAll('tbody tr').length`, &finalTodoCount),
 	)
 	if err != nil {
 		t.Fatalf("Failed to count final todos: %v", err)
@@ -524,7 +524,7 @@ func TestProgressiveEnhancement_WebSocketCRUD(t *testing.T) {
 		chromedp.Navigate(server.URL),
 		chromedp.WaitReady(`body`, chromedp.ByQuery),
 		e2etest.WaitFor(`window.liveTemplateClient && window.liveTemplateClient.isReady()`, 5*time.Second),
-		chromedp.Evaluate(`document.querySelectorAll('.todo-item').length`, &initialCount),
+		chromedp.Evaluate(`document.querySelectorAll('tbody tr').length`, &initialCount),
 	)
 	if err != nil {
 		t.Fatalf("Step 1 (navigate) error: %v", err)
@@ -537,8 +537,8 @@ func TestProgressiveEnhancement_WebSocketCRUD(t *testing.T) {
 		chromedp.SendKeys(`input[name="title"]`, "E2E Test Todo", chromedp.ByQuery),
 		chromedp.Evaluate(`document.querySelector('button[name="add"]').click()`, nil),
 		// Wait for DOM to update with new item
-		e2etest.WaitFor(fmt.Sprintf(`document.querySelectorAll('.todo-item').length === %d`, expectedAfterAdd), 5*time.Second),
-		chromedp.Evaluate(`document.querySelectorAll('.todo-item').length`, &afterAddCount),
+		e2etest.WaitFor(fmt.Sprintf(`document.querySelectorAll('tbody tr').length === %d`, expectedAfterAdd), 5*time.Second),
+		chromedp.Evaluate(`document.querySelectorAll('tbody tr').length`, &afterAddCount),
 	)
 	if err != nil {
 		t.Fatalf("Step 2 (add) error: %v", err)
@@ -552,11 +552,11 @@ func TestProgressiveEnhancement_WebSocketCRUD(t *testing.T) {
 
 	// Step 3: Toggle the last todo (mark as complete)
 	err = chromedp.Run(ctx,
-		chromedp.Evaluate(`document.querySelector('.todo-item:last-child button[name="toggle"]').click()`, nil),
+		chromedp.Evaluate(`document.querySelector('tbody tr:last-child button[name="toggle"]').click()`, nil),
 		// Wait for the completed class to appear
-		e2etest.WaitFor(`document.querySelector('.todo-item:last-child').classList.contains('completed')`, 5*time.Second),
-		chromedp.Evaluate(`document.querySelectorAll('.todo-item').length`, &afterToggleCount),
-		chromedp.Evaluate(`document.querySelector('.todo-item:last-child').classList.contains('completed')`, &hasCompletedClass),
+		e2etest.WaitFor(`document.querySelector('tbody tr:last-child').querySelector('s') !== null`, 5*time.Second),
+		chromedp.Evaluate(`document.querySelectorAll('tbody tr').length`, &afterToggleCount),
+		chromedp.Evaluate(`document.querySelector('tbody tr:last-child').querySelector('s') !== null`, &hasCompletedClass),
 	)
 	if err != nil {
 		t.Fatalf("Step 3 (toggle) error: %v", err)
@@ -573,11 +573,11 @@ func TestProgressiveEnhancement_WebSocketCRUD(t *testing.T) {
 
 	// Step 4: Toggle again (mark as incomplete)
 	err = chromedp.Run(ctx,
-		chromedp.Evaluate(`document.querySelector('.todo-item:last-child button[name="toggle"]').click()`, nil),
+		chromedp.Evaluate(`document.querySelector('tbody tr:last-child button[name="toggle"]').click()`, nil),
 		// Wait for the completed class to be removed
-		e2etest.WaitFor(`!document.querySelector('.todo-item:last-child').classList.contains('completed')`, 5*time.Second),
-		chromedp.Evaluate(`document.querySelectorAll('.todo-item').length`, &afterUntoggleCount),
-		chromedp.Evaluate(`document.querySelector('.todo-item:last-child').classList.contains('completed')`, &hasCompletedClassAfterUntoggle),
+		e2etest.WaitFor(`document.querySelector('tbody tr:last-child').querySelector('s') === null`, 5*time.Second),
+		chromedp.Evaluate(`document.querySelectorAll('tbody tr').length`, &afterUntoggleCount),
+		chromedp.Evaluate(`document.querySelector('tbody tr:last-child').querySelector('s') !== null`, &hasCompletedClassAfterUntoggle),
 	)
 	if err != nil {
 		t.Fatalf("Step 4 (untoggle) error: %v", err)
@@ -594,10 +594,10 @@ func TestProgressiveEnhancement_WebSocketCRUD(t *testing.T) {
 
 	// Step 5: Delete the last todo (the one we just added)
 	err = chromedp.Run(ctx,
-		chromedp.Evaluate(`document.querySelector('.todo-item:last-child button[name="delete"]').click()`, nil),
+		chromedp.Evaluate(`document.querySelector('tbody tr:last-child button[name="delete"]').click()`, nil),
 		// Wait for DOM to update with deleted item
-		e2etest.WaitFor(fmt.Sprintf(`document.querySelectorAll('.todo-item').length === %d`, initialCount), 5*time.Second),
-		chromedp.Evaluate(`document.querySelectorAll('.todo-item').length`, &afterDeleteCount),
+		e2etest.WaitFor(fmt.Sprintf(`document.querySelectorAll('tbody tr').length === %d`, initialCount), 5*time.Second),
+		chromedp.Evaluate(`document.querySelectorAll('tbody tr').length`, &afterDeleteCount),
 	)
 	if err != nil {
 		t.Fatalf("Step 5 (delete) error: %v", err)
@@ -641,7 +641,7 @@ func TestProgressiveEnhancement_DeleteThenToggle(t *testing.T) {
 		chromedp.Navigate(server.URL),
 		chromedp.WaitReady(`body`, chromedp.ByQuery),
 		e2etest.WaitFor(`window.liveTemplateClient && window.liveTemplateClient.isReady()`, 5*time.Second),
-		chromedp.Evaluate(`document.querySelectorAll('.todo-item').length`, &initialCount),
+		chromedp.Evaluate(`document.querySelectorAll('tbody tr').length`, &initialCount),
 	)
 	if err != nil {
 		t.Fatalf("Step 1 (navigate) error: %v", err)
@@ -655,10 +655,10 @@ func TestProgressiveEnhancement_DeleteThenToggle(t *testing.T) {
 	// Step 2: Delete the FIRST todo
 	expectedAfterDelete := initialCount - 1
 	err = chromedp.Run(ctx,
-		chromedp.Evaluate(`document.querySelector('.todo-item:first-child button[name="delete"]').click()`, nil),
+		chromedp.Evaluate(`document.querySelector('tbody tr:first-child button[name="delete"]').click()`, nil),
 		// Wait for DOM to update with deleted item
-		e2etest.WaitFor(fmt.Sprintf(`document.querySelectorAll('.todo-item').length === %d`, expectedAfterDelete), 5*time.Second),
-		chromedp.Evaluate(`document.querySelectorAll('.todo-item').length`, &afterDeleteCount),
+		e2etest.WaitFor(fmt.Sprintf(`document.querySelectorAll('tbody tr').length === %d`, expectedAfterDelete), 5*time.Second),
+		chromedp.Evaluate(`document.querySelectorAll('tbody tr').length`, &afterDeleteCount),
 	)
 	if err != nil {
 		t.Fatalf("Step 2 (delete) error: %v", err)
@@ -674,7 +674,7 @@ func TestProgressiveEnhancement_DeleteThenToggle(t *testing.T) {
 	// Check if it has completed class before toggle
 	var hasCompletedClassBefore bool
 	err = chromedp.Run(ctx,
-		chromedp.Evaluate(`document.querySelector('.todo-item:last-child').classList.contains('completed')`, &hasCompletedClassBefore),
+		chromedp.Evaluate(`document.querySelector('tbody tr:last-child').querySelector('s') !== null`, &hasCompletedClassBefore),
 	)
 	if err != nil {
 		t.Fatalf("Step 3 (check before toggle) error: %v", err)
@@ -682,17 +682,17 @@ func TestProgressiveEnhancement_DeleteThenToggle(t *testing.T) {
 	t.Logf("Last item has completed class before toggle: %v", hasCompletedClassBefore)
 
 	// Build the wait condition based on whether we expect completed class or not
-	toggleWaitCondition := `document.querySelector('.todo-item:last-child').classList.contains('completed')`
+	toggleWaitCondition := `document.querySelector('tbody tr:last-child').querySelector('s') !== null`
 	if hasCompletedClassBefore {
-		toggleWaitCondition = `!document.querySelector('.todo-item:last-child').classList.contains('completed')`
+		toggleWaitCondition = `document.querySelector('tbody tr:last-child').querySelector('s') === null`
 	}
 
 	err = chromedp.Run(ctx,
-		chromedp.Evaluate(`document.querySelector('.todo-item:last-child button[name="toggle"]').click()`, nil),
+		chromedp.Evaluate(`document.querySelector('tbody tr:last-child button[name="toggle"]').click()`, nil),
 		// Wait for the completed class to change
 		e2etest.WaitFor(toggleWaitCondition, 5*time.Second),
-		chromedp.Evaluate(`document.querySelectorAll('.todo-item').length`, &afterToggleCount),
-		chromedp.Evaluate(`document.querySelector('.todo-item:last-child').classList.contains('completed')`, &hasCompletedClass),
+		chromedp.Evaluate(`document.querySelectorAll('tbody tr').length`, &afterToggleCount),
+		chromedp.Evaluate(`document.querySelector('tbody tr:last-child').querySelector('s') !== null`, &hasCompletedClass),
 	)
 	if err != nil {
 		t.Fatalf("Step 3 (toggle) error: %v", err)
diff --git a/testing/01_basic/welcome.tmpl b/testing/01_basic/welcome.tmpl
index ea2d9c0..ae7f6da 100644
--- a/testing/01_basic/welcome.tmpl
+++ b/testing/01_basic/welcome.tmpl
@@ -2,11 +2,16 @@
 <html>
 <head>
 	<title>{{.Title}}</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 </head>
 <body>
-	<h1>{{.Title}}</h1>
-	<p>{{.Message}}</p>
-	<p>Count: {{.Count}}</p>
+	<main class="container">
+		<h1>{{.Title}}</h1>
+		<p>{{.Message}}</p>
+		<p>Count: {{.Count}}</p>
+	</main>
 	{{if .lvt.DevMode}}
 	<script src="/livetemplate-client.js"></script>
 	{{else}}
diff --git a/todos-components/todos-components.tmpl b/todos-components/todos-components.tmpl
index fcc9967..e9783de 100644
--- a/todos-components/todos-components.tmpl
+++ b/todos-components/todos-components.tmpl
@@ -10,13 +10,6 @@
     {{else}}
     <script src="https://cdn.jsdelivr.net/npm/@livetemplate/client@latest/dist/livetemplate-client.browser.js"></script>
     {{end}}
-    <style>
-        /* Minimal custom styles - Pico handles most styling */
-        .todo-item { display: flex; align-items: center; gap: 0.5rem; }
-        .todo-item label { flex: 1; margin: 0; }
-        .todo-item.completed label { text-decoration: line-through; opacity: 0.6; }
-        .delete-btn { --pico-background-color: transparent; --pico-border-color: transparent; width: auto; padding: 0.25rem 0.5rem; margin: 0; }
-    </style>
 </head>
 <body>
     <main class="container">
@@ -36,34 +29,42 @@
         {{/* Todo List */}}
         <article>
             {{if .Todos}}
-            <div>
+            <table>
+                <tbody>
                 {{range .Todos}}
-                <div class="todo-item{{if .Completed.Checked}} completed{{end}}" data-key="{{.ID}}">
-                    <form method="POST" name="toggleTodo" style="display:inline; margin:0;">
-                        <input type="hidden" name="id" value="{{.ID}}">
-                        <input
-                            type="checkbox"
-                            id="todo-checkbox-{{.ID}}"
-                            {{if .Completed.Checked}}checked{{end}}
-                            onchange="this.form.requestSubmit()"
-                        />
-                        <button type="submit" name="toggleTodo" hidden>Toggle</button>
-                    </form>
-                    <label for="todo-checkbox-{{.ID}}">{{if .Completed.Checked}}<s>{{.Title}}</s>{{else}}{{.Title}}{{end}}</label>
-                    <form method="POST" name="confirmDelete" style="display:inline; margin:0;">
-                        <input type="hidden" name="id" value="{{.ID}}">
-                        <button
-                            type="submit"
-                            name="confirmDelete"
-                            class="delete-btn outline secondary"
-                            title="Delete todo"
-                        >
-                            &times;
-                        </button>
-                    </form>
-                </div>
+                <tr data-key="{{.ID}}">
+                    <td>
+                        <form method="POST" name="toggleTodo">
+                            <input type="hidden" name="id" value="{{.ID}}">
+                            <input
+                                type="checkbox"
+                                id="todo-checkbox-{{.ID}}"
+                                {{if .Completed.Checked}}checked{{end}}
+                                onchange="this.form.requestSubmit()"
+                            />
+                            <button type="submit" name="toggleTodo" hidden>Toggle</button>
+                        </form>
+                    </td>
+                    <td>
+                        <label for="todo-checkbox-{{.ID}}">{{if .Completed.Checked}}<s>{{.Title}}</s>{{else}}{{.Title}}{{end}}</label>
+                    </td>
+                    <td>
+                        <form method="POST" name="confirmDelete">
+                            <input type="hidden" name="id" value="{{.ID}}">
+                            <button
+                                type="submit"
+                                name="confirmDelete"
+                                class="outline contrast"
+                                title="Delete todo"
+                            >
+                                &times;
+                            </button>
+                        </form>
+                    </td>
+                </tr>
                 {{end}}
-            </div>
+                </tbody>
+            </table>
             {{else}}
             <p><small>No todos yet. Add one above!</small></p>
             {{end}}
diff --git a/todos-progressive/todos.tmpl b/todos-progressive/todos.tmpl
index 93daccf..d151646 100644
--- a/todos-progressive/todos.tmpl
+++ b/todos-progressive/todos.tmpl
@@ -2,63 +2,60 @@
 <html>
 <head>
     <title>Progressive Complexity: Todo Demo</title>
-    <style>
-        body { font-family: system-ui, sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
-        h1 { color: #333; }
-        .subtitle { color: #666; font-size: 14px; margin-top: -10px; }
-        form { margin: 0; }
-        .add-form { display: flex; gap: 8px; margin: 20px 0; }
-        .add-form input[type="text"] { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; }
-        .add-form button { padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
-        .error { color: #dc3545; font-size: 13px; margin-top: 4px; }
-        ul { list-style: none; padding: 0; }
-        li { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid #eee; }
-        li form { display: flex; align-items: center; width: 100%; }
-        li span { flex: 1; }
-        li .done { text-decoration: line-through; color: #999; }
-        li button { margin-left: 8px; padding: 4px 8px; border: 1px solid #ddd; border-radius: 4px; background: white; cursor: pointer; font-size: 13px; }
-        li button[name="delete"] { color: #dc3545; border-color: #dc3545; }
-        li button[name="delete"]:hover { background: #dc3545; color: white; }
-        .filters { display: flex; gap: 4px; margin: 16px 0; }
-        .filters button { padding: 4px 12px; border: 1px solid #ddd; border-radius: 4px; background: white; cursor: pointer; }
-        .filters button:hover { background: #f0f0f0; }
-    </style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 </head>
 <body>
-    <h1>Todos ({{.ActiveCount}} remaining)</h1>
-    <p class="subtitle">Zero <code>lvt-*</code> attributes &mdash; standard HTML only</p>
+    <main class="container">
+        <hgroup>
+            <h1>Todos ({{.ActiveCount}} remaining)</h1>
+            <p>Zero <code>lvt-*</code> attributes &mdash; standard HTML only</p>
+        </hgroup>
 
-    <!-- Auto-submit form: routes to Submit() -->
-    <form method="POST" class="add-form">
-        <input type="text" name="Title" placeholder="What needs to be done?" required>
-        <button type="submit" name="submit">Add</button>
-    </form>
-    {{if .lvt.HasError "title"}}
-        <div class="error">{{.lvt.Error "title"}}</div>
-    {{end}}
+        <!-- Auto-submit form: routes to Submit() -->
+        <fieldset role="group">
+            <input type="text" name="Title" placeholder="What needs to be done?" required
+                   form="add-form" {{if .lvt.HasError "title"}}aria-invalid="true"{{end}}>
+            <button type="submit" name="submit" form="add-form">Add</button>
+        </fieldset>
+        <form method="POST" id="add-form"></form>
+        {{if .lvt.HasError "title"}}
+            <small>{{.lvt.Error "title"}}</small>
+        {{end}}
 
-    <!-- Button name routing: button name="toggle" → Toggle(), name="delete" → Delete() -->
-    <ul>
-    {{range .FilteredItems}}
-        <li data-key="{{.ID}}">
-            <form method="POST">
-                <input type="hidden" name="id" value="{{.ID}}">
-                <span class="{{if .Done}}done{{end}}">{{.Title}}</span>
-                <button type="submit" name="toggle">
-                    {{if .Done}}Undo{{else}}Done{{end}}
-                </button>
-                <button type="submit" name="delete">Delete</button>
-            </form>
-        </li>
-    {{end}}
-    </ul>
+        <!-- Button name routing: button name="toggle" → Toggle(), name="delete" → Delete() -->
+        <table>
+            <tbody>
+            {{range .FilteredItems}}
+                <tr data-key="{{.ID}}">
+                    <td>{{if .Done}}<s>{{.Title}}</s>{{else}}{{.Title}}{{end}}</td>
+                    <td>
+                        <form method="POST">
+                            <input type="hidden" name="id" value="{{.ID}}">
+                            <button type="submit" name="toggle" class="secondary outline">
+                                {{if .Done}}Undo{{else}}Done{{end}}
+                            </button>
+                        </form>
+                    </td>
+                    <td>
+                        <form method="POST">
+                            <input type="hidden" name="id" value="{{.ID}}">
+                            <button type="submit" name="delete" class="contrast outline">Delete</button>
+                        </form>
+                    </td>
+                </tr>
+            {{end}}
+            </tbody>
+        </table>
 
-    <!-- Button name routing: button name="filter" → Filter() -->
-    <div class="filters">
-        <form method="POST" style="display:inline"><input type="hidden" name="filter" value="all"><button type="submit" name="filter">All</button></form>
-        <form method="POST" style="display:inline"><input type="hidden" name="filter" value="active"><button type="submit" name="filter">Active</button></form>
-        <form method="POST" style="display:inline"><input type="hidden" name="filter" value="done"><button type="submit" name="filter">Done</button></form>
-    </div>
+        <!-- Button name routing: button name="filter" → Filter() -->
+        <fieldset role="group">
+            <form method="POST" name="filter"><input type="hidden" name="filter" value="all"><button type="submit" class="secondary outline">All</button></form>
+            <form method="POST" name="filter"><input type="hidden" name="filter" value="active"><button type="submit" class="secondary outline">Active</button></form>
+            <form method="POST" name="filter"><input type="hidden" name="filter" value="done"><button type="submit" class="secondary outline">Done</button></form>
+        </fieldset>
+    </main>
 
     {{if .lvt.DevMode}}
     <script src="/livetemplate-client.js"></script>
diff --git a/todos-progressive/todos_progressive_test.go b/todos-progressive/todos_progressive_test.go
index 03a9471..a1c0eb2 100644
--- a/todos-progressive/todos_progressive_test.go
+++ b/todos-progressive/todos_progressive_test.go
@@ -67,8 +67,8 @@ func TestTodosProgressiveE2E(t *testing.T) {
 		var hasDone bool
 		err := chromedp.Run(ctx,
 			chromedp.OuterHTML("body", &html, chromedp.ByQuery),
-			chromedp.Evaluate(`document.querySelectorAll('ul li').length`, &count),
-			chromedp.Evaluate(`document.querySelector('ul li:nth-child(3) span').classList.contains('done')`, &hasDone),
+			chromedp.Evaluate(`document.querySelectorAll('tbody tr').length`, &count),
+			chromedp.Evaluate(`document.querySelector('tbody tr:nth-child(3) s') !== null`, &hasDone),
 		)
 		if err != nil {
 			t.Fatalf("Failed to get initial state: %v", err)
@@ -90,14 +90,15 @@ func TestTodosProgressiveE2E(t *testing.T) {
 			t.Errorf("Expected 3 items, got %d", count)
 		}
 		if !hasDone {
-			t.Error("Third item should have 'done' class")
+			t.Error("Third item should be struck through")
 		}
 	})
 
 	t.Run("AddTodo", func(t *testing.T) {
 		err := chromedp.Run(ctx,
-			chromedp.Evaluate(`window.liveTemplateClient.send({action: 'submit', data: {Title: 'Buy groceries'}})`, nil),
-			e2etest.WaitFor(`document.querySelectorAll('ul li').length === 4`, 5*time.Second),
+			chromedp.SendKeys(`input[name="Title"]`, "Buy groceries", chromedp.ByQuery),
+			chromedp.Evaluate(`document.querySelector('button[name="submit"]').click()`, nil),
+			e2etest.WaitFor(`document.querySelectorAll('tbody tr').length === 4`, 5*time.Second),
 		)
 		if err != nil {
 			t.Fatalf("Failed to add todo: %v", err)
@@ -116,15 +117,10 @@ func TestTodosProgressiveE2E(t *testing.T) {
 	})
 
 	t.Run("ToggleDone", func(t *testing.T) {
-		var itemID string
-		if err := chromedp.Run(ctx, chromedp.Evaluate(
-			`document.querySelector('ul li:nth-child(1) input[name="id"]').value`, &itemID)); err != nil {
-			t.Fatalf("Failed to get item ID: %v", err)
-		}
-
+		// Click the toggle button on the first row
 		err := chromedp.Run(ctx,
-			chromedp.Evaluate(fmt.Sprintf(`window.liveTemplateClient.send({action: 'toggle', data: {id: '%s'}})`, itemID), nil),
-			e2etest.WaitFor(`document.querySelector('ul li:nth-child(1) span').classList.contains('done')`, 5*time.Second),
+			chromedp.Evaluate(`document.querySelector('tbody tr:nth-child(1) button[name="toggle"]').click()`, nil),
+			e2etest.WaitFor(`document.querySelector('tbody tr:nth-child(1) s') !== null`, 5*time.Second),
 		)
 		if err != nil {
 			t.Fatalf("Failed to toggle done: %v", err)
@@ -140,15 +136,10 @@ func TestTodosProgressiveE2E(t *testing.T) {
 	})
 
 	t.Run("ToggleUndo", func(t *testing.T) {
-		var itemID string
-		if err := chromedp.Run(ctx, chromedp.Evaluate(
-			`document.querySelector('ul li:nth-child(1) input[name="id"]').value`, &itemID)); err != nil {
-			t.Fatalf("Failed to get item ID: %v", err)
-		}
-
+		// Click the toggle button on the first row again to undo
 		err := chromedp.Run(ctx,
-			chromedp.Evaluate(fmt.Sprintf(`window.liveTemplateClient.send({action: 'toggle', data: {id: '%s'}})`, itemID), nil),
-			e2etest.WaitFor(`!document.querySelector('ul li:nth-child(1) span').classList.contains('done')`, 5*time.Second),
+			chromedp.Evaluate(`document.querySelector('tbody tr:nth-child(1) button[name="toggle"]').click()`, nil),
+			e2etest.WaitFor(`document.querySelector('tbody tr:nth-child(1) s') === null`, 5*time.Second),
 		)
 		if err != nil {
 			t.Fatalf("Failed to undo toggle: %v", err)
@@ -164,15 +155,10 @@ func TestTodosProgressiveE2E(t *testing.T) {
 	})
 
 	t.Run("DeleteTodo", func(t *testing.T) {
-		var itemID string
-		if err := chromedp.Run(ctx, chromedp.Evaluate(
-			`document.querySelector('ul li:last-child input[name="id"]').value`, &itemID)); err != nil {
-			t.Fatalf("Failed to get item ID: %v", err)
-		}
-
+		// Click delete on the last row (Buy groceries)
 		err := chromedp.Run(ctx,
-			chromedp.Evaluate(fmt.Sprintf(`window.liveTemplateClient.send({action: 'delete', data: {id: '%s'}})`, itemID), nil),
-			e2etest.WaitFor(`document.querySelectorAll('ul li').length === 3`, 5*time.Second),
+			chromedp.Evaluate(`document.querySelector('tbody tr:last-child button[name="delete"]').click()`, nil),
+			e2etest.WaitFor(`document.querySelectorAll('tbody tr').length === 3`, 5*time.Second),
 		)
 		if err != nil {
 			t.Fatalf("Failed to delete todo: %v", err)
@@ -188,16 +174,17 @@ func TestTodosProgressiveE2E(t *testing.T) {
 	})
 
 	t.Run("FilterActive", func(t *testing.T) {
+		// Click the "Active" filter button
 		err := chromedp.Run(ctx,
-			chromedp.Evaluate(`window.liveTemplateClient.send({action: 'filter', data: {filter: 'active'}})`, nil),
-			e2etest.WaitFor(`document.querySelectorAll('ul li').length === 2`, 5*time.Second),
+			chromedp.Evaluate(`(() => { const btn = Array.from(document.querySelectorAll('form[name="filter"] button')).find(b => b.textContent.trim() === 'Active'); btn.click(); })()`, nil),
+			e2etest.WaitFor(`document.querySelectorAll('tbody tr').length === 2`, 5*time.Second),
 		)
 		if err != nil {
 			t.Fatalf("Failed to filter active: %v", err)
 		}
 
 		var html string
-		if err := chromedp.Run(ctx, chromedp.OuterHTML("ul", &html, chromedp.ByQuery)); err != nil {
+		if err := chromedp.Run(ctx, chromedp.OuterHTML("tbody", &html, chromedp.ByQuery)); err != nil {
 			t.Fatalf("Failed to get HTML: %v", err)
 		}
 		if strings.Contains(html, "Add lvt-* only when needed") {
@@ -206,16 +193,17 @@ func TestTodosProgressiveE2E(t *testing.T) {
 	})
 
 	t.Run("FilterDone", func(t *testing.T) {
+		// Click the "Done" filter button
 		err := chromedp.Run(ctx,
-			chromedp.Evaluate(`window.liveTemplateClient.send({action: 'filter', data: {filter: 'done'}})`, nil),
-			e2etest.WaitFor(`document.querySelectorAll('ul li').length === 1`, 5*time.Second),
+			chromedp.Evaluate(`(() => { const btn = Array.from(document.querySelectorAll('form[name="filter"] button')).find(b => b.textContent.trim() === 'Done'); btn.click(); })()`, nil),
+			e2etest.WaitFor(`document.querySelectorAll('tbody tr').length === 1`, 5*time.Second),
 		)
 		if err != nil {
 			t.Fatalf("Failed to filter done: %v", err)
 		}
 
 		var html string
-		if err := chromedp.Run(ctx, chromedp.OuterHTML("ul", &html, chromedp.ByQuery)); err != nil {
+		if err := chromedp.Run(ctx, chromedp.OuterHTML("tbody", &html, chromedp.ByQuery)); err != nil {
 			t.Fatalf("Failed to get HTML: %v", err)
 		}
 		if !strings.Contains(html, "Add lvt-* only when needed") {
@@ -224,9 +212,10 @@ func TestTodosProgressiveE2E(t *testing.T) {
 	})
 
 	t.Run("FilterAll", func(t *testing.T) {
+		// Click the "All" filter button
 		err := chromedp.Run(ctx,
-			chromedp.Evaluate(`window.liveTemplateClient.send({action: 'filter', data: {filter: 'all'}})`, nil),
-			e2etest.WaitFor(`document.querySelectorAll('ul li').length === 3`, 5*time.Second),
+			chromedp.Evaluate(`(() => { const btn = Array.from(document.querySelectorAll('form[name="filter"] button')).find(b => b.textContent.trim() === 'All'); btn.click(); })()`, nil),
+			e2etest.WaitFor(`document.querySelectorAll('tbody tr').length === 3`, 5*time.Second),
 		)
 		if err != nil {
 			t.Fatalf("Failed to filter all: %v", err)
diff --git a/ws-disabled/ws-disabled.tmpl b/ws-disabled/ws-disabled.tmpl
index e1af344..d9870ca 100644
--- a/ws-disabled/ws-disabled.tmpl
+++ b/ws-disabled/ws-disabled.tmpl
@@ -13,10 +13,10 @@
         and applies tree-based DOM updates without page reloads.</small></p>
 
         {{if .lvt.Flash "success"}}
-        <ins style="display:block; text-decoration:none;">{{.lvt.Flash "success"}}</ins>
+        <ins style="display:block;text-decoration:none">{{.lvt.Flash "success"}}</ins>
         {{end}}
         {{if .lvt.Flash "error"}}
-        <del style="display:block; text-decoration:none;">{{.lvt.Flash "error"}}</del>
+        <del style="display:block;text-decoration:none">{{.lvt.Flash "error"}}</del>
         {{end}}
 
         <article>