fix: build files

.github/workflows/main.yml

@@ -0,0 +1,34 @@
+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,3 +1,4 @@
 .idea
 .cache
+dist
 node_modules

docs/index.html

@@ -1,4 +0,0 @@
-<!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

@@ -1,188 +0,0 @@
-// 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

@@ -1 +0,0 @@
-{"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

@@ -1,644 +0,0 @@
-: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

@@ -1 +0,0 @@
-{"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 docs --public-url /html-over-js --no-minify",
+		"build": "parcel build index.pug --out-dir dist --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>",