feat: move build files to docs folder

.github/workflows/main.yml

@@ -1,34 +0,0 @@
-name: Deploy to GitHub Pages
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  build-and-deploy:
-    runs-on: ubuntu-latest
-    
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v4
-      
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: '24'
-        cache: 'npm'
-        
-    - name: Install dependencies
-      run: npm i
-      
-    - name: Build
-      run: npm run build
-      
-    - name: Deploy to GitHub Pages
-      uses: peaceiris/actions-gh-pages@v3
-      if: github.ref == 'refs/heads/main'
-      with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./dist

.gitignore

@@ -1,4 +1,3 @@
 .idea
 .cache
-dist
 node_modules

docs/index.html

@@ -0,0 +1,4 @@
+<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Web Platform Fundamentals: Building with Native HTML</title><meta name="description" content="Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable codebases."><link rel="stylesheet" href="/html-over-js/main.612a6b84.css"></head><body class="search_plugin_added"><div class="hero"><h1>🚀 Web Platform Fundamentals</h1><p class="subtitle">Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable codebases.</p></div><div class="section"><h2 class="section-title">🎯 Progressive Disclosure Patterns</h2><div class="comparison-grid"><div class="column bad"><h3>JavaScript-Dependent Implementation <span class="perf-indicator perf-slow">COMPLEX</span></h3><div class="accessibility-note"><strong>⚠️ Implementation Overhead: Manual ARIA state management, keyboard event handling, focus management, and screen reader compatibility.</strong></div><div class="js-wrapper"><div class="js-content" id="content1">Custom collapsible implementations require comprehensive event handling, state synchronization across components, and careful attention to accessibility requirements including proper ARIA attributes and keyboard navigation patterns.</div><button class="js-collapsible" onclick="toggleContent('content1')">Custom Collapsible Architecture</button></div><div class="js-wrapper"><div class="js-content" id="content2">Managing state across multiple collapsible sections introduces complexity in event coordination, memory management, and performance optimization, particularly when dealing with dynamic content loading.</div><button class="js-collapsible" onclick="toggleContent('content2')">State Management Challenges</button></div><div class="pros-cons"><h4 class="cons">❌ Architecture Complexity:</h4><ul><li>Event delegation and memory leak prevention</li><li>ARIA state synchronization and keyboard trap management</li><li>Cross-browser compatibility and polyfill requirements</li></ul></div></div><div class="column good"><h3>Native Details/Summary Elements <span class="perf-indicator perf-fast">ZERO-JS</span></h3><div class="accessibility-note"><strong>🎯 Platform Integration: Built-in ARIA semantics, keyboard navigation, screen reader support, and browser-optimized animations.</strong></div><details name="architecture"><summary>Semantic HTML Architecture</summary><div>The HTML5 details/summary pattern provides declarative progressive disclosure without JavaScript dependencies. Browser engines handle state management, accessibility, and user interaction patterns according to platform conventions.</div></details><details name="architecture"><summary>Progressive Enhancement Benefits</summary><div>Starting with functional HTML ensures graceful degradation across all environments. CSS and JavaScript become enhancement layers rather than functional requirements, improving reliability and reducing technical debt.</div></details><details name="architecture"><summary>Performance Characteristics</summary><div>Native elements eliminate bundle size overhead, reduce runtime memory consumption, and leverage browser optimizations unavailable to custom implementations. Hardware acceleration and efficient event handling come built-in.</div></details><div class="pros-cons"><h4 class="pros">✅ Platform Advantages:</h4><ul><li>Zero JavaScript footprint with full accessibility compliance</li><li>Browser-native performance optimizations and hardware acceleration</li><li>Consistent cross-platform behavior with no maintenance overhead</li></ul></div></div></div></div><div class="section"><h2 class="section-title">🪟 Modal Dialog Patterns</h2><div class="comparison-grid"><div class="column bad"><h3>Custom Modal Implementation <span class="perf-indicator perf-slow">BRITTLE</span></h3><div class="accessibility-note"><strong>⚠️ Critical Requirements: Focus trapping, inert background content, ESC key handling, backdrop click management, and ARIA modal semantics.</strong></div><button onclick="openJSModal()">Launch Custom Modal</button><div class="js-modal-overlay" id="jsModal"><div class="js-modal-content"><h4>Custom Modal Architecture</h4><p>This approach requires managing the modal stack, preventing background interaction, coordinating focus management, and ensuring proper cleanup to avoid memory leaks and accessibility violations.</p><p><strong>Critical Issue: Background content remains accessible to screen readers and keyboard navigation without explicit inert management.</strong></p><button onclick="closeJSModal()">Close Modal</button></div></div><div class="pros-cons"><h4 class="cons">❌ ImplemenLine truncated
+Requires: Date manipulation library, internationalization,
+keyboard navigation, mobile gesture handling,
+timezone calculations, accessibility compliance.</p></div></div><div class="pros-cons"><h4 class="cons">❌ Implementation Overhead:</h4><ul><li>Large JavaScript libraries and complex calendar logic</li><li>Mobile UX inconsistency with platform date pickers</li><li>Internationalization complexity and timezone edge cases</li></ul></div></div><div class="column good"><h3>Native Temporal Inputs <span class="perf-indicator perf-fast">PLATFORM-NATIVE</span></h3><div class="accessibility-note"><strong>🎯 OS Integration: Platform-consistent UI, automatic keyboard navigation, built-in validation, and internationalization support.</strong></div><div class="form-group"><label>Release Date</label><input id="native-date" name="date" type="date" value="2024-12-15" min="2024-01-01" max="2025-12-31"></div><div class="form-group"><label>Build Timestamp</label><input id="native-datetime" name="datetime" type="datetime-local" step="1"></div><div class="form-group"><label>Deployment Window</label><input id="native-time" name="time" type="time" min="02:00" max="18:00" step="900"></div><div class="pros-cons"><h4 class="pros">✅ Platform Integration:</h4><ul><li>Zero-bundle impact with native OS picker integration</li><li>Automatic validation and internationalization support</li><li>Consistent UX aligned with platform conventions</li></ul></div></div></div></div><div class="section"><h2 class="section-title">🔍 Autocomplete Patterns</h2><div class="comparison-grid"><div class="column bad"><h3>Custom Autocomplete <span class="perf-indicator perf-slow">INTERACTION-HEAVY</span></h3><div class="accessibility-note"><strong>⚠️ Interaction Complexity: Dropdown positioning, keyboard navigation, ARIA combobox implementation, and mobile touch handling.</strong></div><div class="form-group"><label>Framework Search (Custom)</label><input id="js-search" type="text" placeholder="Type framework name..." autocomplete="off" onkeyup="filterFrameworks(this.value)"><div id="js-results" style="display: none; position: absolute; background: var(--color-card); border: 1px solid var(--color-border); max-height: 200px; overflow-y: auto; z-index: 100"></div></div><div class="pros-cons"><h4 class="cons">❌ Interaction Management:</h4><ul><li>Complex ARIA combobox implementation and state management</li><li>Dropdown positioning and viewport collision detection</li><li>Mobile keyboard optimization and touch event handling</li></ul></div></div><div class="column good"><h3>Native Datalist Element <span class="perf-indicator perf-fast">ZERO-CONFIG</span></h3><div class="accessibility-note"><strong>🎯 Native Combobox: Built-in ARIA combobox semantics, keyboard navigation, and platform-consistent interaction patterns.</strong></div><div class="form-group"><label>JavaScript Framework</label><input id="native-framework" type="text" list="frameworks" placeholder="Select or type framework..."><datalist id="frameworks"><option value="React">React - Component-based library</option><option value="Vue.js">Vue.js - Progressive framework</option><option value="Angular">Angular - Full platform</option><option value="Svelte">Svelte - Compile-time framework</option><option value="Solid">Solid - Fine-grained reactivity</option><option value="Alpine.js">Alpine.js - Minimal framework</option><option value="Lit">Lit - Web Components library</option><option value="Preact">Preact - Lightweight React alternative</option></datalist></div><div class="form-group"><label>Programming Language</label><input id="native-language" type="text" list="languages" placeholder="Choose language..."><datalist id="languages"><option value="JavaScript" label="JavaScript - Dynamic scripting"></option><option value="TypeScript" label="TypeScript - Typed JavaScript"></option><option value="Python" label="Python - General purpose"></option><option value="Rust" label="Rust - Systems programming"></option><option value="Go" label="Go - Concurrent systems"></option><option value="WebAssembly" label="WebAssembly - High-performance web"></option><option value="C" label="C - Low-level systems"></option><option value="C++" label="C++ - High-performance systems"></option><option value="C#" label="C# - .NET ecosystem"></option><option value="Java" label="Java - Cross-platform enterprise"></option><option value="Kotlin" label="Kotlin - Modern JVM language"></option><option value="Swift" label="Swift - iOS and macOS"></option><option value="Ruby" label="Ruby - Web development (Rails)"></option><option value="PHP" label="PHP - Server-side scripting"></option><option value="Perl" label="Perl - Text processing"></option><option value="Haskell" label="Haskell - Functional programming"></option><option value="Elixir" label="Elixir - Scalable applications"></option><option value="Dart" label="Dart - Web and mobile apps"></option><option value="Scala" label="Scala - Functional JVM language"></option><option value="Lua" label="Lua - Lightweight scripting"></option><option value="R" label="R - Statistical compuLine truncated

docs/main.082e2b9e.js

@@ -0,0 +1,188 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
+      }
+    }
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  parcelRequire = newRequire;
+
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
+
+  return newRequire;
+})({"HJDO":[function(require,module,exports) {
+// JavaScript functions from original HTML
+var frameworks = ['React', 'Vue.js', 'Angular', 'Svelte', 'Solid', 'Alpine.js', 'Lit', 'Preact', 'Qwik', 'SvelteKit', 'Next.js', 'Nuxt.js'];
+function filterFrameworks(value) {
+  var results = document.getElementById('js-results');
+  if (!value) {
+    results.style.display = 'none';
+    return;
+  }
+  var filtered = frameworks.filter(function (fw) {
+    return fw.toLowerCase().includes(value.toLowerCase());
+  });
+  results.innerHTML = filtered.map(function (fw) {
+    return "<div style=\"padding:8px; cursor:pointer;\" onclick=\"selectFramework('".concat(fw, "')\">").concat(fw, "</div>");
+  }).join('');
+  results.style.display = filtered.length ? 'block' : 'none';
+}
+function selectFramework(fw) {
+  document.getElementById('js-search').value = fw;
+  document.getElementById('js-results').style.display = 'none';
+}
+function startNativeProgress() {
+  var progress = document.getElementById('nativeProgress');
+  var text = document.getElementById('nativeProgressText');
+  var value = 0;
+  var interval = setInterval(function () {
+    value += Math.random() * 15;
+    if (value >= 100) {
+      value = 100;
+      clearInterval(interval);
+    }
+    progress.value = value;
+    text.textContent = Math.round(value) + '%';
+  }, 200);
+}
+function toggleContent(id) {
+  document.getElementById(id).classList.toggle("active");
+}
+function openJSModal() {
+  document.getElementById('jsModal').style.display = 'flex';
+}
+function closeJSModal() {
+  document.getElementById('jsModal').style.display = 'none';
+}
+function validateJSForm(event) {
+  event.preventDefault();
+  alert('Custom validation would run here');
+  return false;
+}
+function startJSProgress() {
+  var bar = document.getElementById('jsProgress');
+  var text = document.getElementById('jsProgressText');
+  var width = 0;
+  var interval = setInterval(function () {
+    width += Math.random() * 15;
+    if (width >= 100) {
+      width = 100;
+      clearInterval(interval);
+    }
+    bar.style.width = width + '%';
+    text.textContent = Math.round(width) + '%';
+  }, 200);
+}
+function openDatePicker() {
+  var picker = document.getElementById('datePicker');
+  picker.style.display = picker.style.display === 'none' ? 'block' : 'none';
+}
+},{}]},{},["HJDO"], null)
+//# sourceMappingURL=/html-over-js/main.082e2b9e.js.map

docs/main.082e2b9e.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/main.js"],"names":["frameworks","filterFrameworks","value","results","document","getElementById","style","display","filtered","filter","fw","toLowerCase","includes","innerHTML","map","concat","join","length","selectFramework","startNativeProgress","progress","text","interval","setInterval","Math","random","clearInterval","textContent","round","toggleContent","id","classList","toggle","openJSModal","closeJSModal","validateJSForm","event","preventDefault","alert","startJSProgress","bar","width","openDatePicker","picker"],"mappings":"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","file":"main.082e2b9e.js","sourceRoot":"..","sourcesContent":["// JavaScript functions from original HTML\nconst frameworks = ['React', 'Vue.js', 'Angular', 'Svelte', 'Solid', 'Alpine.js', 'Lit', 'Preact', 'Qwik', 'SvelteKit', 'Next.js', 'Nuxt.js'];\n\nfunction filterFrameworks(value) {\n  const results = document.getElementById('js-results');\n  if (!value) {\n    results.style.display = 'none';\n    return;\n  }\n  const filtered = frameworks.filter(fw => fw.toLowerCase().includes(value.toLowerCase()));\n  results.innerHTML = filtered.map(fw => `<div style=\"padding:8px; cursor:pointer;\" onclick=\"selectFramework('${fw}')\">${fw}</div>`).join('');\n  results.style.display = filtered.length ? 'block' : 'none';\n}\n\nfunction selectFramework(fw) {\n  document.getElementById('js-search').value = fw;\n  document.getElementById('js-results').style.display = 'none';\n}\n\nfunction startNativeProgress() {\n  const progress = document.getElementById('nativeProgress');\n  const text = document.getElementById('nativeProgressText');\n  let value = 0;\n  const interval = setInterval(() => {\n    value += Math.random() * 15;\n    if (value >= 100) {\n      value = 100;\n      clearInterval(interval);\n    }\n    progress.value = value;\n    text.textContent = Math.round(value) + '%';\n  }, 200);\n}\n\nfunction toggleContent(id) {\n  document.getElementById(id).classList.toggle(\"active\");\n}\n\nfunction openJSModal() {\n  document.getElementById('jsModal').style.display = 'flex';\n}\n\nfunction closeJSModal() {\n  document.getElementById('jsModal').style.display = 'none';\n}\n\nfunction validateJSForm(event) {\n  event.preventDefault();\n  alert('Custom validation would run here');\n  return false;\n}\n\nfunction startJSProgress() {\n  const bar = document.getElementById('jsProgreLine truncated

docs/main.612a6b84.css

@@ -0,0 +1,644 @@
+:root {
+    --color-bg: #ffffff;
+    --color-card: #f8f9fa;
+    --color-primary: #0066cc;
+    --color-primary-hover: #0052a3;
+    --color-danger: #dc3545;
+    --color-warning: #856404;
+    --color-warning-bg: #fff3cd;
+    --color-content-bg: #f1f3f4;
+    --color-border: #dee2e6;
+    --color-text: #212529;
+    --color-text-muted: #6c757d;
+    --color-code-bg: #f8f9fa;
+    --color-code-text: #0066cc;
+    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    --radius: 8px;
+    --focus-outline: 2px solid #0066cc;
+    --focus-outline-danger: 2px solid #dc3545;
+    --focus-offset: 2px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+    background: var(--color-bg);
+    color: var(--color-text);
+    min-height: 100vh;
+}
+
+.hero {
+    text-align: center;
+    margin-bottom: 4rem;
+    padding: 3rem;
+    background: var(--color-card);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    border: 1px solid var(--color-border);
+}
+
+.hero:focus-within {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+.hero h1 {
+    font-size: clamp(2rem, 5vw, 3.5rem);
+    margin-bottom: 1.5rem;
+    color: var(--color-primary);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+}
+
+.hero .subtitle {
+    font-size: 1.125rem;
+    color: var(--color-text-muted);
+    max-width: 700px;
+    margin: 0 auto;
+    line-height: 1.5;
+}
+
+.comparison-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin: 2rem 0;
+}
+
+.section {
+    margin: 4rem 0;
+}
+
+.section-title {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+    padding: 1.5rem 0;
+    text-align: center;
+    color: var(--color-primary);
+    position: relative;
+    font-weight: 600;
+}
+
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 2px;
+    background: var(--color-primary);
+}
+
+.column {
+    background: var(--color-card);
+    padding: 2rem;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    border: 1px solid var(--color-border);
+    transition: box-shadow 0.2s ease;
+    position: relative;
+}
+
+.column:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.column:focus-within {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+.column.bad:focus-within {
+    outline: var(--focus-outline-danger);
+}
+
+.column h3 {
+    color: var(--color-text);
+    border-bottom: 1px solid var(--color-border);
+    padding-bottom: 1rem;
+    margin-bottom: 2rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.bad {
+    border-left: 3px solid var(--color-danger);
+}
+
+.bad h3::before {
+    content: '⚠️ ';
+}
+
+.bad button {
+    background: var(--color-danger);
+}
+
+.bad button:hover {
+    background: var(--color-danger);
+}
+
+.bad button:focus {
+    outline: var(--focus-outline-danger);
+    outline-offset: var(--focus-offset);
+}
+
+.good {
+    border-left: 3px solid var(--color-primary);
+}
+
+.good h3::before {
+    content: '✅ ';
+}
+
+.accessibility-note {
+    background: var(--color-warning-bg);
+    border: 1px solid #ffc107;
+    color: var(--color-warning);
+    padding: 1rem;
+    border-radius: var(--radius);
+    margin: 1.5rem 0;
+    font-size: 0.875rem;
+}
+
+.code-block {
+    /*display: none;*/
+    background: var(--color-code-bg);
+    color: var(--color-code-text);
+    padding: 2rem 1.5rem 1rem;
+    border-radius: var(--radius);
+    overflow-x: auto;
+    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+    font-size: 0.875rem;
+    margin: 1.5rem 0;
+    border: 1px solid var(--color-border);
+    position: relative;
+}
+
+.code-block:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+.code-block::before {
+    content: 'CODE';
+    position: absolute;
+    top: -6px;
+    right: 15px;
+    background: var(--color-primary);
+    color: white;
+    padding: 10px 8px 0;
+    font-size: 0.7rem;
+    border-radius: 4px;
+    font-weight: 600;
+}
+
+.pros-cons {
+    margin: 1.5rem 0;
+}
+
+.pros-cons h4 {
+    margin-bottom: 1rem;
+    color: var(--color-text);
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.pros-cons ul {
+    list-style: none;
+    padding-left: 0;
+}
+
+.pros-cons li {
+    padding: 0.5rem 0;
+    padding-left: 1.5rem;
+    position: relative;
+}
+
+.pros li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: var(--color-primary);
+    font-weight: bold;
+}
+
+.cons li::before {
+    content: '✗';
+    position: absolute;
+    left: 0;
+    color: var(--color-danger);
+    font-weight: bold;
+}
+
+/* Interactive Elements */
+.js-collapsible {
+    color: white;
+    cursor: pointer;
+    padding: 12px 16px;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 1rem;
+    border-radius: var(--radius);
+    margin-bottom: 1rem;
+    width: 100%;
+    font-family: inherit;
+    font-weight: 500;
+}
+
+.js-wrapper {
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+.js-content {
+    display: none;
+    background: var(--color-content-bg);
+    border: 1px solid var(--color-border);
+    border-radius: 0 0 var(--radius) var(--radius);
+    margin-bottom: 1rem;
+}
+
+.js-content.active {
+    display: block;
+    padding: 0.5rem;
+}
+
+.js-content.active + .js-collapsible {
+    border-radius: var(--radius) var(--radius) 0 0;
+    margin-bottom: 0;
+}
+
+details {
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    margin-bottom: 1rem;
+    overflow: hidden;
+}
+
+details:focus-within {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+summary {
+    background: var(--color-primary);
+    color: white;
+    padding: 12px 16px;
+    cursor: pointer;
+    font-size: 1rem;
+    list-style: none;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+summary:hover {
+    background: var(--color-primary-hover);
+}
+
+summary:focus {
+    outline: var(--focus-outline);
+    outline-offset: -2px;
+}
+
+summary::-webkit-details-marker {
+    display: none;
+}
+
+summary::before {
+    content: '▶';
+    margin-right: 8px;
+    transition: transform 0.2s ease;
+    display: inline-block;
+}
+
+details[open] summary::before {
+    transform: rotate(90deg);
+}
+
+details > div {
+    padding: 16px;
+    background: var(--color-content-bg);
+}
+
+/* Modal Styles */
+.js-modal-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 1000;
+}
+
+.js-modal-overlay.active {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.js-modal-content {
+    margin: auto;
+    background: var(--color-bg);
+    padding: 2rem;
+    border-radius: var(--radius);
+    max-width: 500px;
+    width: 90%;
+    border: 1px solid var(--color-border);
+    box-shadow: var(--shadow);
+}
+
+.js-modal-content:focus {
+    outline: var(--focus-outline-danger);
+    outline-offset: var(--focus-offset);
+}
+
+dialog {
+    margin: auto;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    padding: 2rem;
+    background: var(--color-bg);
+    color: var(--color-text);
+    box-shadow: var(--shadow);
+    max-width: 500px;
+    width: 90vw;
+}
+
+dialog:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+dialog::backdrop {
+    background: rgba(0, 0, 0, 0.6);
+}
+
+/* Form Styles */
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: var(--color-text);
+}
+
+.form-group input, .form-group textarea, .form-group select {
+    width: 100%;
+    padding: 10px 12px;
+    border: 2px solid var(--color-border);
+    border-radius: var(--radius);
+    font-size: 1rem;
+    background: var(--color-bg);
+    color: var(--color-text);
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
+    outline: var(--focus-outline);
+    outline-offset: 2px;
+    border-color: var(--color-border);
+}
+
+.form-group input:invalid {
+    border-color: var(--color-danger);
+}
+
+.form-group input:valid {
+    border-color: var(--color-primary);
+}
+
+.js-error {
+    color: var(--color-danger);
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+    display: none;
+}
+
+.js-error.active {
+    display: block;
+}
+
+/* Progress Styles */
+.js-progress-container {
+    width: 100%;
+    background: var(--color-border);
+    border-radius: 4px;
+    height: 20px;
+    margin: 1.5rem 0;
+    overflow: hidden;
+}
+
+.js-progress-bar {
+    height: 100%;
+    background: var(--color-danger);
+    width: 0;
+    transition: width 0.3s ease;
+    border-radius: 4px;
+}
+
+progress {
+    width: 100%;
+    height: 20px;
+    margin: 1.5rem 0;
+    border-radius: 4px;
+    border: none;
+    background: var(--color-border);
+}
+
+progress:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+progress::-webkit-progress-bar {
+    background-color: var(--color-border);
+    border-radius: 4px;
+}
+
+progress::-webkit-progress-value {
+    background: var(--color-primary);
+    border-radius: 4px;
+}
+
+progress::-moz-progress-bar {
+    background: var(--color-primary);
+    border-radius: 4px;
+}
+
+/* Button Styles */
+button {
+    background: var(--color-primary);
+    color: white;
+    border: none;
+    padding: 10px 16px;
+    border-radius: var(--radius);
+    cursor: pointer;
+    font-size: 1rem;
+    margin: 0.5rem 0.5rem 0.5rem 0;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+button:hover {
+    background: var(--color-primary-hover);
+    transform: translateY(-1px);
+}
+
+button:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+button:disabled {
+    background: var(--color-text-muted);
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* Component Styles */
+.datalist-container {
+    position: relative;
+}
+
+input[list] {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 12px center;
+    background-repeat: no-repeat;
+    background-size: 16px;
+    padding-right: 36px;
+}
+
+.slider-container {
+    margin: 2rem 0;
+}
+
+input[type="range"] {
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: var(--color-border);
+    outline: none;
+    -webkit-appearance: none;
+}
+
+input[type="range"]:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    cursor: pointer;
+}
+
+input[type="range"]::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    cursor: pointer;
+    border: none;
+}
+
+.color-input {
+    width: 50px;
+    height: 32px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    cursor: pointer;
+}
+
+.color-input:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+.summary-box {
+    margin-top: 4rem;
+    padding: 2rem;
+    background: var(--color-card);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    border: 1px solid var(--color-border);
+    text-align: center;
+}
+
+.summary-box h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: var(--color-primary);
+    font-weight: 600;
+}
+
+.zen-quote {
+    font-style: italic;
+    color: var(--color-text-muted);
+    font-size: 1rem;
+    margin-top: 1.5rem;
+    border-left: 3px solid var(--color-primary);
+    padding-left: 1rem;
+}
+
+@media (max-width: 768px) {
+    .comparison-grid {
+        grid-template-columns: 1fr;
+    }
+
+    body {
+        padding: 1rem;
+    }
+
+    .hero {
+        padding: 2rem;
+    }
+
+    .section-title {
+        font-size: 1.75rem;
+    }
+}
+
+/* Performance indicators */
+.perf-indicator {
+    display: inline-block;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin-left: 8px;
+}
+
+.perf-fast {
+    background: rgba(0, 102, 204, 0.1);
+    color: var(--color-primary);
+}
+
+.perf-slow {
+    background: rgba(220, 53, 69, 0.1);
+    color: var(--color-danger);
+}
+
+
+/*# sourceMappingURL=/html-over-js/main.612a6b84.css.map */

docs/main.612a6b84.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/main.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"main.612a6b84.css","sourceRoot":"..","sourcesContent":[":root {\n    --color-bg: #ffffff;\n    --color-card: #f8f9fa;\n    --color-primary: #0066cc;\n    --color-primary-hover: #0052a3;\n    --color-danger: #dc3545;\n    --color-warning: #856404;\n    --color-warning-bg: #fff3cd;\n    --color-content-bg: #f1f3f4;\n    --color-border: #dee2e6;\n    --color-text: #212529;\n    --color-text-muted: #6c757d;\n    --color-code-bg: #f8f9fa;\n    --color-code-text: #0066cc;\n    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    --radius: 8px;\n    --focus-outline: 2px solid #0066cc;\n    --focus-outline-danger: 2px solid #dc3545;\n    --focus-offset: 2px;\n}\n\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    line-height: 1.6;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 2rem;\n    background: var(--color-bg);\n    color: var(--color-text);\n    min-height: 100vh;\n}\n\n.hero {\n    text-align: center;\n    margin-bottom: 4rem;\n    padding: 3rem;\n    background: var(--color-card);\n    border-radius: var(--radius);\n    box-shadow: var(--shadow);\n    border: 1px solid var(--color-border);\n}\n\n.hero:focus-within {\n    outline: var(--focus-outline);\n    outline-offset: var(--focus-offset);\n}\n\n.hero h1 {\n    font-size: clamp(2rem, 5vw, 3.5rem);\n    margin-bottom: 1.5rem;\n    color: var(--color-primary);\n    font-weight: 700;\n    letter-spacing: -0.02em;\n}\n\n.hero .subtitle {\n    font-size: 1.125rem;\n    color: var(--color-text-muted);\n    max-width: 700px;\n    margin: 0 auto;\n    line-height: 1.5;\n}\n\n.comparison-grid {\n    display: gridLine truncated

package.json

@@ -6,7 +6,7 @@
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
 		"start": "parcel --port 1312 --public-url / index.pug --open",
-		"build": "parcel build index.pug --out-dir dist --public-url /html-over-js --no-minify",
+		"build": "parcel build index.pug --out-dir docs --public-url /html-over-js --no-minify",
 		"format": "prettier --write src/**/*.pug index.pug package.json && prettier --write --parser json .pugrc"
 	},
 	"author": "Michael Werner Czechowski <mail@dailysh.it>",