diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index 4e173e7..0000000
--- a/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-ignore/
\ No newline at end of file
diff --git a/legacy/src/ui_innovation_1.html b/legacy/src/ui_innovation_1.html
new file mode 100644
index 0000000..0aab72d
--- /dev/null
+++ b/legacy/src/ui_innovation_1.html
@@ -0,0 +1,532 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UI Innovation: TextSeed - Organic Text Input</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        header {
+            text-align: center;
+            margin-bottom: 40px;
+            background: white;
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+
+        h1 {
+            color: #2d5a2d;
+            margin-bottom: 20px;
+            font-size: 2.5em;
+        }
+
+        .innovation-meta {
+            display: flex;
+            justify-content: center;
+            gap: 40px;
+            flex-wrap: wrap;
+        }
+
+        .innovation-meta p {
+            background: #f0f8f0;
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-weight: 500;
+        }
+
+        main {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        section {
+            background: white;
+            margin-bottom: 30px;
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+
+        h2 {
+            color: #2d5a2d;
+            margin-bottom: 25px;
+            font-size: 1.8em;
+        }
+
+        h3 {
+            color: #3a6b3a;
+            margin-bottom: 15px;
+            font-size: 1.3em;
+        }
+
+        .demo-container {
+            background: linear-gradient(135deg, #f8fdf8 0%, #e8f5e8 100%);
+        }
+
+        .textseed-container {
+            position: relative;
+            margin: 40px auto;
+            width: 100%;
+            max-width: 600px;
+            height: 300px;
+            background: linear-gradient(to bottom, #87ceeb 0%, #98fb98 40%, #8fbc8f 100%);
+            border-radius: 15px;
+            overflow: hidden;
+            border: 3px solid #6b8e23;
+            box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+
+        .soil {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 60px;
+            background: linear-gradient(to bottom, #8b4513 0%, #654321 100%);
+            border-top: 2px solid #a0522d;
+        }
+
+        .seed {
+            position: absolute;
+            bottom: 40px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 20px;
+            height: 15px;
+            background: #8b4513;
+            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+            opacity: 1;
+            transition: all 0.5s ease;
+        }
+
+        .stem {
+            position: absolute;
+            bottom: 55px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 4px;
+            height: 0;
+            background: linear-gradient(to top, #228b22, #32cd32);
+            border-radius: 2px;
+            transition: height 0.3s ease;
+        }
+
+        .text-display {
+            position: absolute;
+            bottom: 100px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(255, 255, 255, 0.9);
+            padding: 15px 25px;
+            border-radius: 20px;
+            border: 2px solid #32cd32;
+            min-width: 200px;
+            text-align: center;
+            font-size: 18px;
+            font-weight: 500;
+            color: #2d5a2d;
+            opacity: 0;
+            transition: all 0.4s ease;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+        }
+
+        .leaf {
+            position: absolute;
+            width: 30px;
+            height: 20px;
+            background: #32cd32;
+            border-radius: 0 100% 0 100%;
+            opacity: 0;
+            transform-origin: bottom center;
+            transition: all 0.4s ease;
+        }
+
+        .hidden-input {
+            position: absolute;
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        .input-prompt {
+            text-align: center;
+            margin-top: 20px;
+            font-size: 16px;
+            color: #666;
+            font-style: italic;
+        }
+
+        .comparison-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-top: 20px;
+        }
+
+        .traditional, .innovative {
+            padding: 20px;
+            border-radius: 10px;
+            border: 2px solid #ddd;
+        }
+
+        .traditional {
+            background: #f9f9f9;
+        }
+
+        .innovative {
+            background: #f0f8f0;
+            border-color: #32cd32;
+        }
+
+        .traditional input {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #ccc;
+            border-radius: 5px;
+            font-size: 16px;
+            margin-top: 10px;
+        }
+
+        .doc-section {
+            margin-bottom: 25px;
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            border-left: 4px solid #32cd32;
+        }
+
+        .growth-meter {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            width: 60px;
+            height: 60px;
+            border: 3px solid #32cd32;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(255, 255, 255, 0.9);
+            font-weight: bold;
+            color: #2d5a2d;
+        }
+
+        @keyframes grow {
+            from { height: 0; opacity: 0; }
+            to { height: var(--grow-height); opacity: 1; }
+        }
+
+        @keyframes leafSway {
+            0%, 100% { transform: rotate(-5deg); }
+            50% { transform: rotate(5deg); }
+        }
+
+        .leaf.animated {
+            animation: leafSway 2s ease-in-out infinite;
+        }
+
+        @media (max-width: 768px) {
+            .comparison-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .innovation-meta {
+                flex-direction: column;
+                gap: 15px;
+            }
+            
+            .textseed-container {
+                height: 250px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>UI Innovation: TextSeed - Organic Text Input</h1>
+        <div class="innovation-meta">
+            <p><strong>Replaces:</strong> Traditional Text Input Field</p>
+            <p><strong>Innovation:</strong> Organic growth metaphor for text entry</p>
+        </div>
+    </header>
+
+    <main>
+        <section class="demo-container">
+            <h2>Interactive Demo</h2>
+            <div class="innovation-component">
+                <div class="textseed-container" tabindex="0" role="textbox" aria-label="TextSeed organic text input">
+                    <div class="soil"></div>
+                    <div class="seed" id="seed"></div>
+                    <div class="stem" id="stem"></div>
+                    <div class="text-display" id="textDisplay" aria-live="polite"></div>
+                    <div class="growth-meter" id="growthMeter" aria-label="Growth progress">0%</div>
+                    <input type="text" class="hidden-input" id="hiddenInput" aria-hidden="true" tabindex="-1">
+                </div>
+                <div class="input-prompt">
+                    Click the garden and start typing to watch your text grow! (Supports all keyboard shortcuts)
+                </div>
+            </div>
+        </section>
+
+        <section class="comparison">
+            <h2>Traditional vs Innovation</h2>
+            <div class="comparison-grid">
+                <div class="traditional">
+                    <h3>Traditional Text Input</h3>
+                    <p>Standard rectangular input field with cursor and text display.</p>
+                    <input type="text" placeholder="Type here..." aria-label="Traditional text input">
+                    <p style="margin-top: 15px; font-size: 14px; color: #666;">
+                        ✓ Familiar<br>
+                        ✓ Functional<br>
+                        ✗ Static visual feedback<br>
+                        ✗ Limited engagement<br>
+                        ✗ No progress indication
+                    </p>
+                </div>
+                <div class="innovative">
+                    <h3>TextSeed Component</h3>
+                    <p>Organic growth visualization that transforms text input into a living, breathing experience.</p>
+                    <p style="margin-top: 15px; font-size: 14px; color: #2d5a2d;">
+                        ✓ Engaging visual metaphor<br>
+                        ✓ Real-time growth feedback<br>
+                        ✓ Progress visualization<br>
+                        ✓ Memorable interaction<br>
+                        ✓ Maintains full functionality
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        <section class="documentation">
+            <h2>Design Documentation</h2>
+            <div class="doc-section">
+                <h3>Interaction Model</h3>
+                <p>Users click anywhere on the garden to focus and begin typing. Each character grows the plant upward, with leaves appearing at intervals. The seed disappears as growth begins, and text appears in a speech bubble above the plant. The growth meter shows typing progress as a percentage.</p>
+            </div>
+            <div class="doc-section">
+                <h3>Technical Implementation</h3>
+                <p>Built with CSS transitions, transforms, and custom properties for smooth animations. Uses a hidden input field for text capture while displaying visual feedback through dynamically styled DOM elements. Keyboard events drive the organic growth animations in real-time.</p>
+            </div>
+            <div class="doc-section">
+                <h3>Accessibility Features</h3>
+                <p>Maintains full keyboard navigation with proper ARIA labels and roles. Text is announced via aria-live regions. Focus management ensures screen readers can interact normally. All visual feedback has semantic equivalents for assistive technologies.</p>
+            </div>
+            <div class="doc-section">
+                <h3>Evolution Opportunities</h3>
+                <p>Future enhancements could include seasonal themes, weather effects, multiple plant types for different content categories, collaborative gardening for multi-user inputs, and adaptive growth patterns based on typing speed and rhythm.</p>
+            </div>
+        </section>
+    </main>
+
+    <script>
+        class TextSeed {
+            constructor(container) {
+                this.container = container;
+                this.hiddenInput = container.querySelector('#hiddenInput');
+                this.seed = container.querySelector('#seed');
+                this.stem = container.querySelector('#stem');
+                this.textDisplay = container.querySelector('#textDisplay');
+                this.growthMeter = container.querySelector('#growthMeter');
+                this.leaves = [];
+                this.currentText = '';
+                this.maxLength = 100;
+                this.isActive = false;
+
+                this.initializeEvents();
+                this.updateAccessibility();
+            }
+
+            initializeEvents() {
+                // Focus handling
+                this.container.addEventListener('click', () => this.focus());
+                this.container.addEventListener('keydown', (e) => this.handleKeyDown(e));
+                
+                // Hidden input for text capture
+                this.hiddenInput.addEventListener('input', (e) => this.handleInput(e));
+                this.hiddenInput.addEventListener('keydown', (e) => this.handleSpecialKeys(e));
+                
+                // Focus and blur events
+                this.hiddenInput.addEventListener('focus', () => this.setActive(true));
+                this.hiddenInput.addEventListener('blur', () => this.setActive(false));
+            }
+
+            focus() {
+                this.hiddenInput.focus();
+                this.setActive(true);
+            }
+
+            setActive(active) {
+                this.isActive = active;
+                this.container.style.boxShadow = active 
+                    ? '0 0 20px rgba(50, 205, 50, 0.5)' 
+                    : 'inset 0 5px 15px rgba(0, 0, 0, 0.1)';
+            }
+
+            handleKeyDown(e) {
+                // Ensure hidden input receives all keyboard events
+                if (e.target === this.container) {
+                    this.hiddenInput.focus();
+                }
+            }
+
+            handleSpecialKeys(e) {
+                // Handle special keys like backspace, delete, etc.
+                if (e.key === 'Backspace' || e.key === 'Delete') {
+                    // Let the input event handle the text update
+                    setTimeout(() => {
+                        this.updateGrowth(this.hiddenInput.value);
+                    }, 0);
+                }
+            }
+
+            handleInput(e) {
+                const newText = e.target.value;
+                this.updateGrowth(newText);
+            }
+
+            updateGrowth(text) {
+                this.currentText = text;
+                const length = text.length;
+                const progress = Math.min(length / this.maxLength, 1);
+
+                // Update growth meter
+                this.growthMeter.textContent = Math.round(progress * 100) + '%';
+
+                // Handle seed visibility
+                if (length > 0) {
+                    this.seed.style.opacity = '0';
+                    this.seed.style.transform = 'translateX(-50%) scale(0.5)';
+                } else {
+                    this.seed.style.opacity = '1';
+                    this.seed.style.transform = 'translateX(-50%) scale(1)';
+                }
+
+                // Update stem height
+                const stemHeight = Math.min(length * 3, 150);
+                this.stem.style.height = stemHeight + 'px';
+
+                // Show/hide text display
+                if (length > 0) {
+                    this.textDisplay.style.opacity = '1';
+                    this.textDisplay.style.transform = 'translateX(-50%) scale(1)';
+                    this.textDisplay.textContent = text;
+                } else {
+                    this.textDisplay.style.opacity = '0';
+                    this.textDisplay.style.transform = 'translateX(-50%) scale(0.8)';
+                    this.textDisplay.textContent = '';
+                }
+
+                // Add leaves at intervals
+                this.updateLeaves(length);
+
+                // Update accessibility
+                this.updateAccessibility();
+            }
+
+            updateLeaves(textLength) {
+                const targetLeaves = Math.floor(textLength / 5);
+                
+                // Remove excess leaves
+                while (this.leaves.length > targetLeaves) {
+                    const leaf = this.leaves.pop();
+                    leaf.style.opacity = '0';
+                    setTimeout(() => {
+                        if (leaf.parentNode) {
+                            leaf.parentNode.removeChild(leaf);
+                        }
+                    }, 400);
+                }
+
+                // Add new leaves
+                while (this.leaves.length < targetLeaves) {
+                    this.addLeaf(this.leaves.length);
+                }
+            }
+
+            addLeaf(index) {
+                const leaf = document.createElement('div');
+                leaf.className = 'leaf animated';
+                
+                const side = index % 2 === 0 ? -1 : 1;
+                const height = 55 + (index * 15);
+                const offset = side * 20;
+                
+                leaf.style.bottom = height + 'px';
+                leaf.style.left = 'calc(50% + ' + offset + 'px)';
+                leaf.style.transform = 'rotate(' + (side * 20) + 'deg)';
+                leaf.style.animationDelay = (index * 0.2) + 's';
+                
+                this.container.appendChild(leaf);
+                this.leaves.push(leaf);
+
+                // Animate in
+                setTimeout(() => {
+                    leaf.style.opacity = '1';
+                }, 50);
+            }
+
+            updateAccessibility() {
+                // Update ARIA properties
+                this.container.setAttribute('aria-valuenow', this.currentText.length);
+                this.container.setAttribute('aria-valuemax', this.maxLength);
+                this.container.setAttribute('aria-valuetext', 
+                    `${this.currentText.length} characters entered: ${this.currentText || 'empty'}`);
+            }
+
+            // Public API methods
+            getValue() {
+                return this.currentText;
+            }
+
+            setValue(text) {
+                this.hiddenInput.value = text;
+                this.updateGrowth(text);
+            }
+
+            clear() {
+                this.setValue('');
+            }
+
+            focus() {
+                this.hiddenInput.focus();
+            }
+        }
+
+        // Initialize TextSeed component when page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            const container = document.querySelector('.textseed-container');
+            const textSeed = new TextSeed(container);
+
+            // Make it available globally for demonstration
+            window.textSeed = textSeed;
+
+            // Example of programmatic interaction
+            setTimeout(() => {
+                console.log('TextSeed initialized. Try textSeed.setValue("Hello World!") in console.');
+            }, 1000);
+        });
+
+        // Handle window resize for responsive behavior
+        window.addEventListener('resize', () => {
+            // Redraw leaves on resize if needed
+            const container = document.querySelector('.textseed-container');
+            if (container && window.textSeed) {
+                window.textSeed.updateLeaves(window.textSeed.currentText.length);
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src/ui_innovation_10.html b/legacy/src/ui_innovation_10.html
new file mode 100644
index 0000000..7daa9b9
--- /dev/null
+++ b/legacy/src/ui_innovation_10.html
@@ -0,0 +1,676 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UI Innovation: Quantum State Toggle</title>
+    <style>
+        /* Global Styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+            color: #e0e0e0;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+
+        header {
+            text-align: center;
+            padding: 2rem;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(45deg, #00ffcc, #0099ff, #cc00ff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .innovation-meta {
+            display: flex;
+            justify-content: center;
+            gap: 2rem;
+            flex-wrap: wrap;
+        }
+
+        .innovation-meta p {
+            background: rgba(255, 255, 255, 0.05);
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        main {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        section {
+            margin-bottom: 4rem;
+            background: rgba(255, 255, 255, 0.02);
+            padding: 2rem;
+            border-radius: 15px;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+
+        h2 {
+            font-size: 2rem;
+            margin-bottom: 1.5rem;
+            color: #00ffcc;
+        }
+
+        h3 {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+            color: #0099ff;
+        }
+
+        /* Quantum Toggle Styles */
+        .quantum-toggle-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 3rem;
+            justify-content: center;
+            margin: 2rem 0;
+        }
+
+        .quantum-toggle {
+            position: relative;
+            width: 200px;
+            height: 200px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .quantum-field {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            overflow: hidden;
+        }
+
+        /* Probability Cloud */
+        .probability-cloud {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at center, 
+                rgba(0, 255, 204, 0.3) 0%, 
+                rgba(0, 153, 255, 0.2) 40%, 
+                rgba(204, 0, 255, 0.1) 70%, 
+                transparent 100%);
+            animation: quantumFluctuation 3s ease-in-out infinite;
+            filter: blur(2px);
+        }
+
+        @keyframes quantumFluctuation {
+            0%, 100% { transform: scale(1) rotate(0deg); }
+            25% { transform: scale(1.1) rotate(90deg); }
+            50% { transform: scale(0.9) rotate(180deg); }
+            75% { transform: scale(1.05) rotate(270deg); }
+        }
+
+        /* Wave Function */
+        .wave-function {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+
+        .wave-path {
+            stroke: rgba(0, 255, 204, 0.8);
+            stroke-width: 2;
+            fill: none;
+            filter: drop-shadow(0 0 5px rgba(0, 255, 204, 0.5));
+            animation: waveOscillation 2s linear infinite;
+        }
+
+        @keyframes waveOscillation {
+            0% { stroke-dashoffset: 0; }
+            100% { stroke-dashoffset: -100; }
+        }
+
+        /* Quantum States */
+        .quantum-state {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            transition: all 0.3s ease;
+            pointer-events: none;
+        }
+
+        .state-on {
+            background: radial-gradient(circle, #00ffcc, #0099ff);
+            box-shadow: 0 0 30px rgba(0, 255, 204, 0.8);
+        }
+
+        .state-off {
+            background: radial-gradient(circle, #666, #333);
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
+        }
+
+        .state-superposition {
+            background: radial-gradient(circle, 
+                rgba(0, 255, 204, 0.5), 
+                rgba(102, 102, 102, 0.5));
+            box-shadow: 0 0 20px rgba(0, 255, 204, 0.4);
+            animation: superpositionPulse 1s ease-in-out infinite;
+        }
+
+        @keyframes superpositionPulse {
+            0%, 100% { transform: translate(-50%, -50%) scale(1); }
+            50% { transform: translate(-50%, -50%) scale(1.2); }
+        }
+
+        /* Probability Display */
+        .probability-display {
+            position: absolute;
+            bottom: -40px;
+            left: 50%;
+            transform: translateX(-50%);
+            text-align: center;
+            font-size: 0.9rem;
+            color: #00ffcc;
+            white-space: nowrap;
+        }
+
+        /* Measurement Effect */
+        .collapse-wave {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            border: 2px solid rgba(0, 255, 204, 0.8);
+            animation: collapseAnimation 0.6s ease-out;
+            pointer-events: none;
+        }
+
+        @keyframes collapseAnimation {
+            0% {
+                transform: scale(0.8);
+                opacity: 1;
+            }
+            100% {
+                transform: scale(2);
+                opacity: 0;
+            }
+        }
+
+        /* Entanglement Line */
+        .entanglement-line {
+            position: absolute;
+            height: 2px;
+            background: linear-gradient(90deg, 
+                transparent, 
+                rgba(204, 0, 255, 0.8), 
+                transparent);
+            transform-origin: left center;
+            pointer-events: none;
+            animation: entanglementPulse 2s ease-in-out infinite;
+        }
+
+        @keyframes entanglementPulse {
+            0%, 100% { opacity: 0.3; }
+            50% { opacity: 1; }
+        }
+
+        /* Labels */
+        .toggle-label {
+            position: absolute;
+            top: -30px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 0.9rem;
+            color: #0099ff;
+        }
+
+        /* Traditional Toggle Styles */
+        .traditional-toggle {
+            display: inline-block;
+            margin: 1rem;
+        }
+
+        .traditional-toggle input[type="checkbox"] {
+            display: none;
+        }
+
+        .traditional-toggle-label {
+            display: inline-block;
+            width: 60px;
+            height: 30px;
+            background: #ccc;
+            border-radius: 15px;
+            position: relative;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+
+        .traditional-toggle-label::after {
+            content: '';
+            position: absolute;
+            width: 26px;
+            height: 26px;
+            background: white;
+            border-radius: 50%;
+            top: 2px;
+            left: 2px;
+            transition: transform 0.3s;
+        }
+
+        .traditional-toggle input[type="checkbox"]:checked + .traditional-toggle-label {
+            background: #4CAF50;
+        }
+
+        .traditional-toggle input[type="checkbox"]:checked + .traditional-toggle-label::after {
+            transform: translateX(30px);
+        }
+
+        /* Comparison Grid */
+        .comparison-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+
+        .comparison-grid > div {
+            background: rgba(255, 255, 255, 0.03);
+            padding: 1.5rem;
+            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        /* Documentation */
+        .doc-section {
+            margin-bottom: 2rem;
+            padding: 1.5rem;
+            background: rgba(255, 255, 255, 0.02);
+            border-radius: 10px;
+            border-left: 3px solid #00ffcc;
+        }
+
+        .doc-section p {
+            margin-bottom: 0.5rem;
+            line-height: 1.8;
+        }
+
+        /* Accessibility */
+        .sr-only {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+        }
+
+        .quantum-toggle:focus {
+            outline: 2px solid #00ffcc;
+            outline-offset: 5px;
+        }
+
+        /* Control Panel */
+        .control-panel {
+            background: rgba(255, 255, 255, 0.05);
+            padding: 1rem;
+            border-radius: 10px;
+            margin-bottom: 2rem;
+            display: flex;
+            gap: 2rem;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .control-button {
+            background: rgba(0, 255, 204, 0.2);
+            border: 1px solid rgba(0, 255, 204, 0.5);
+            color: #00ffcc;
+            padding: 0.5rem 1rem;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .control-button:hover {
+            background: rgba(0, 255, 204, 0.3);
+            box-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
+        }
+    </style>
+</head>
+<body>
+    <!-- Documentation Header -->
+    <header>
+        <h1>UI Innovation: Quantum State Toggle</h1>
+        <div class="innovation-meta">
+            <p><strong>Replaces:</strong> Traditional binary toggles/switches</p>
+            <p><strong>Innovation:</strong> Quantum superposition states with probability visualization</p>
+        </div>
+    </header>
+
+    <!-- Interactive Demo Section -->
+    <main>
+        <section class="demo-container">
+            <h2>Interactive Demo</h2>
+            
+            <div class="control-panel">
+                <button class="control-button" onclick="measureAll()">Measure All States</button>
+                <button class="control-button" onclick="entangleToggles()">Create Entanglement</button>
+                <button class="control-button" onclick="resetToSuperposition()">Reset to Superposition</button>
+            </div>
+            
+            <div class="quantum-toggle-container" id="quantumContainer">
+                <!-- Quantum toggles will be dynamically created -->
+            </div>
+        </section>
+
+        <!-- Traditional Comparison -->
+        <section class="comparison">
+            <h2>Traditional vs Innovation</h2>
+            <div class="comparison-grid">
+                <div class="traditional">
+                    <h3>Traditional Toggle</h3>
+                    <p>Binary states only (ON/OFF)</p>
+                    <div style="text-align: center; margin: 2rem 0;">
+                        <div class="traditional-toggle">
+                            <input type="checkbox" id="trad1">
+                            <label class="traditional-toggle-label" for="trad1"></label>
+                        </div>
+                        <div class="traditional-toggle">
+                            <input type="checkbox" id="trad2">
+                            <label class="traditional-toggle-label" for="trad2"></label>
+                        </div>
+                        <div class="traditional-toggle">
+                            <input type="checkbox" id="trad3">
+                            <label class="traditional-toggle-label" for="trad3"></label>
+                        </div>
+                    </div>
+                    <p>• Immediate state change</p>
+                    <p>• No uncertainty representation</p>
+                    <p>• Independent operation</p>
+                </div>
+                <div class="innovative">
+                    <h3>Quantum Toggle</h3>
+                    <p>Superposition states with probability</p>
+                    <p style="margin: 2rem 0; text-align: center;">
+                        See interactive demo above ↑
+                    </p>
+                    <p>• States exist in superposition</p>
+                    <p>• Probability wave visualization</p>
+                    <p>• Quantum entanglement possible</p>
+                    <p>• Measurement causes wave collapse</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Design Documentation -->
+        <section class="documentation">
+            <h2>Design Documentation</h2>
+            
+            <div class="doc-section">
+                <h3>Interaction Model</h3>
+                <p>Users interact with quantum toggles through observation and measurement. Unlike traditional binary switches, these toggles exist in superposition until measured.</p>
+                <p>• <strong>Click/Tap:</strong> Performs a quantum measurement, collapsing the wave function to a definite state</p>
+                <p>• <strong>Hover:</strong> Shows probability amplitudes without collapsing the state</p>
+                <p>• <strong>Entanglement:</strong> Connected toggles affect each other instantaneously</p>
+                <p>• <strong>Keyboard:</strong> Space/Enter to measure, Tab to navigate</p>
+            </div>
+            
+            <div class="doc-section">
+                <h3>Technical Implementation</h3>
+                <p>Built using native web technologies to create quantum-inspired visualizations:</p>
+                <p>• <strong>CSS Animations:</strong> Continuous wave functions and probability clouds</p>
+                <p>• <strong>SVG Paths:</strong> Dynamic wave function visualization</p>
+                <p>• <strong>JavaScript:</strong> Quantum state management and entanglement logic</p>
+                <p>• <strong>CSS Custom Properties:</strong> Real-time probability updates</p>
+                <p>• <strong>Transform & Filters:</strong> Superposition visual effects</p>
+            </div>
+            
+            <div class="doc-section">
+                <h3>Accessibility Features</h3>
+                <p>• Full keyboard navigation with visible focus indicators</p>
+                <p>• ARIA labels describing current quantum state and probability</p>
+                <p>• Screen reader announcements for state changes</p>
+                <p>• High contrast visual indicators for all states</p>
+                <p>• Reduced motion option respects user preferences</p>
+            </div>
+            
+            <div class="doc-section">
+                <h3>Evolution Opportunities</h3>
+                <p>• <strong>Multi-state Superposition:</strong> Beyond binary to n-dimensional quantum states</p>
+                <p>• <strong>Quantum Gates:</strong> Implement quantum logic operations between toggles</p>
+                <p>• <strong>Decoherence Effects:</strong> Environmental interaction causing gradual state collapse</p>
+                <p>• <strong>Quantum Tunneling:</strong> Probability of spontaneous state changes</p>
+                <p>• <strong>Many-Worlds Visualization:</strong> Show parallel universe states</p>
+            </div>
+        </section>
+    </main>
+
+    <script>
+        // Quantum Toggle Implementation
+        class QuantumToggle {
+            constructor(id, label) {
+                this.id = id;
+                this.label = label;
+                this.state = 'superposition';
+                this.probability = { on: 0.5, off: 0.5 };
+                this.entangled = [];
+                this.element = null;
+                this.isCollapsing = false;
+            }
+
+            createElement() {
+                const container = document.createElement('div');
+                container.className = 'quantum-toggle';
+                container.tabIndex = 0;
+                container.setAttribute('role', 'switch');
+                container.setAttribute('aria-checked', 'mixed');
+                container.setAttribute('aria-label', `${this.label} - Quantum state toggle`);
+                
+                container.innerHTML = `
+                    <span class="sr-only">Quantum toggle: ${this.label}</span>
+                    <div class="toggle-label">${this.label}</div>
+                    <div class="quantum-field">
+                        <div class="probability-cloud"></div>
+                        <svg class="wave-function" viewBox="0 0 200 200">
+                            <path class="wave-path" stroke-dasharray="5,5" />
+                        </svg>
+                        <div class="quantum-state state-superposition"></div>
+                    </div>
+                    <div class="probability-display">|ψ⟩ = √${this.probability.on.toFixed(2)}|1⟩ + √${this.probability.off.toFixed(2)}|0⟩</div>
+                `;
+
+                // Event listeners
+                container.addEventListener('click', () => this.measure());
+                container.addEventListener('keydown', (e) => {
+                    if (e.key === ' ' || e.key === 'Enter') {
+                        e.preventDefault();
+                        this.measure();
+                    }
+                });
+
+                this.element = container;
+                this.updateWaveFunction();
+                return container;
+            }
+
+            updateWaveFunction() {
+                if (!this.element) return;
+                
+                const path = this.element.querySelector('.wave-path');
+                const amplitude = this.state === 'superposition' ? 30 : 15;
+                const frequency = this.state === 'superposition' ? 3 : 1;
+                
+                let d = 'M 0,100 ';
+                for (let x = 0; x <= 200; x += 5) {
+                    const y = 100 + amplitude * Math.sin((x / 200) * Math.PI * 2 * frequency) * 
+                              (this.probability.on - this.probability.off);
+                    d += `L ${x},${y} `;
+                }
+                
+                path.setAttribute('d', d);
+            }
+
+            measure() {
+                if (this.isCollapsing) return;
+                this.isCollapsing = true;
+
+                // Create collapse animation
+                const collapseWave = document.createElement('div');
+                collapseWave.className = 'collapse-wave';
+                this.element.querySelector('.quantum-field').appendChild(collapseWave);
+
+                // Determine collapsed state based on probability
+                const random = Math.random();
+                const newState = random < this.probability.on ? 'on' : 'off';
+                
+                setTimeout(() => {
+                    this.setState(newState);
+                    collapseWave.remove();
+                    this.isCollapsing = false;
+                    
+                    // Affect entangled toggles
+                    this.entangled.forEach(toggle => {
+                        if (toggle.state === 'superposition') {
+                            toggle.influenceFromEntangled(newState);
+                        }
+                    });
+                }, 300);
+            }
+
+            setState(newState) {
+                this.state = newState;
+                const stateElement = this.element.querySelector('.quantum-state');
+                
+                stateElement.className = 'quantum-state';
+                if (newState === 'on') {
+                    stateElement.classList.add('state-on');
+                    this.probability = { on: 1, off: 0 };
+                    this.element.setAttribute('aria-checked', 'true');
+                } else if (newState === 'off') {
+                    stateElement.classList.add('state-off');
+                    this.probability = { on: 0, off: 1 };
+                    this.element.setAttribute('aria-checked', 'false');
+                } else {
+                    stateElement.classList.add('state-superposition');
+                    this.element.setAttribute('aria-checked', 'mixed');
+                }
+
+                this.updateProbabilityDisplay();
+                this.updateWaveFunction();
+            }
+
+            influenceFromEntangled(entangledState) {
+                if (this.state !== 'superposition') return;
+                
+                // Quantum entanglement influence
+                if (entangledState === 'on') {
+                    this.probability.on = Math.min(0.8, this.probability.on + 0.2);
+                    this.probability.off = 1 - this.probability.on;
+                } else {
+                    this.probability.off = Math.min(0.8, this.probability.off + 0.2);
+                    this.probability.on = 1 - this.probability.off;
+                }
+                
+                this.updateProbabilityDisplay();
+                this.updateWaveFunction();
+            }
+
+            updateProbabilityDisplay() {
+                const display = this.element.querySelector('.probability-display');
+                if (this.state === 'superposition') {
+                    display.textContent = `|ψ⟩ = √${this.probability.on.toFixed(2)}|1⟩ + √${this.probability.off.toFixed(2)}|0⟩`;
+                } else if (this.state === 'on') {
+                    display.textContent = '|ψ⟩ = |1⟩';
+                } else {
+                    display.textContent = '|ψ⟩ = |0⟩';
+                }
+            }
+
+            resetToSuperposition() {
+                this.state = 'superposition';
+                this.probability = { on: 0.5, off: 0.5 };
+                this.setState('superposition');
+            }
+        }
+
+        // Initialize quantum toggles
+        const toggles = [];
+        const container = document.getElementById('quantumContainer');
+
+        function initializeToggles() {
+            const labels = ['Notifications', 'Dark Mode', 'Auto-Save'];
+            
+            labels.forEach((label, index) => {
+                const toggle = new QuantumToggle(`quantum-${index}`, label);
+                toggles.push(toggle);
+                container.appendChild(toggle.createElement());
+            });
+        }
+
+        function measureAll() {
+            toggles.forEach(toggle => {
+                if (toggle.state === 'superposition') {
+                    setTimeout(() => toggle.measure(), Math.random() * 500);
+                }
+            });
+        }
+
+        function entangleToggles() {
+            // Clear existing entanglements
+            toggles.forEach(toggle => toggle.entangled = []);
+            
+            // Create entanglement between adjacent toggles
+            for (let i = 0; i < toggles.length - 1; i++) {
+                toggles[i].entangled.push(toggles[i + 1]);
+                toggles[i + 1].entangled.push(toggles[i]);
+                
+                // Visual entanglement line
+                const line = document.createElement('div');
+                line.className = 'entanglement-line';
+                line.style.width = '100px';
+                line.style.left = `${150 + i * 230}px`;
+                line.style.top = '100px';
+                container.appendChild(line);
+                
+                setTimeout(() => line.remove(), 3000);
+            }
+        }
+
+        function resetToSuperposition() {
+            toggles.forEach(toggle => toggle.resetToSuperposition());
+        }
+
+        // Check for reduced motion preference
+        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (prefersReducedMotion) {
+            document.documentElement.style.setProperty('--animation-duration', '0s');
+        }
+
+        // Initialize on load
+        initializeToggles();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src/ui_innovation_2.html b/legacy/src/ui_innovation_2.html
new file mode 100644
index 0000000..2ba9449
--- /dev/null
+++ b/legacy/src/ui_innovation_2.html
@@ -0,0 +1,713 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UI Innovation: GravityNav - Physics-Based Navigation</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background: radial-gradient(ellipse at center, #0f0f23 0%, #040410 100%);
+            min-height: 100vh;
+            padding: 20px;
+            overflow-x: hidden;
+        }
+
+        header {
+            text-align: center;
+            margin-bottom: 40px;
+            background: rgba(255, 255, 255, 0.95);
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        }
+
+        h1 {
+            color: #2d2d5a;
+            margin-bottom: 20px;
+            font-size: 2.5em;
+        }
+
+        .innovation-meta {
+            display: flex;
+            justify-content: center;
+            gap: 40px;
+            flex-wrap: wrap;
+        }
+
+        .innovation-meta p {
+            background: #e8e8f5;
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-weight: 500;
+        }
+
+        main {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        section {
+            background: rgba(255, 255, 255, 0.95);
+            margin-bottom: 30px;
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        }
+
+        h2 {
+            color: #2d2d5a;
+            margin-bottom: 25px;
+            font-size: 1.8em;
+        }
+
+        h3 {
+            color: #3a3a6b;
+            margin-bottom: 15px;
+            font-size: 1.3em;
+        }
+
+        .demo-container {
+            background: radial-gradient(ellipse at center, #1a1a3a 0%, #0a0a1a 100%);
+            color: white;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .gravitynav-container {
+            position: relative;
+            width: 100%;
+            height: 400px;
+            background: transparent;
+            border-radius: 15px;
+            overflow: hidden;
+            cursor: crosshair;
+        }
+
+        .star-field {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+
+        .star {
+            position: absolute;
+            background: white;
+            border-radius: 50%;
+            opacity: 0.7;
+            animation: twinkle 3s ease-in-out infinite;
+        }
+
+        @keyframes twinkle {
+            0%, 100% { opacity: 0.3; }
+            50% { opacity: 0.9; }
+        }
+
+        .nav-planet {
+            position: absolute;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            user-select: none;
+            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
+            transform-origin: center;
+        }
+
+        .nav-planet:hover {
+            box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
+            z-index: 10;
+        }
+
+        .nav-planet:focus {
+            outline: 3px solid #ffff00;
+            outline-offset: 5px;
+            box-shadow: 0 0 40px rgba(255, 255, 0, 0.8);
+        }
+
+        .nav-planet.active {
+            box-shadow: 0 0 50px rgba(255, 215, 0, 1);
+            z-index: 20;
+        }
+
+        .planet-home {
+            background: radial-gradient(circle at 30% 30%, #ff6b6b, #d63031);
+            color: white;
+        }
+
+        .planet-about {
+            background: radial-gradient(circle at 30% 30%, #4ecdc4, #00b894);
+            color: white;
+        }
+
+        .planet-projects {
+            background: radial-gradient(circle at 30% 30%, #45b7d1, #0984e3);
+            color: white;
+        }
+
+        .planet-contact {
+            background: radial-gradient(circle at 30% 30%, #f39c12, #e17055);
+            color: white;
+        }
+
+        .planet-blog {
+            background: radial-gradient(circle at 30% 30%, #a29bfe, #6c5ce7);
+            color: white;
+        }
+
+        .gravitational-field {
+            position: absolute;
+            border-radius: 50%;
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .content-panel {
+            margin-top: 30px;
+            padding: 30px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 15px;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            min-height: 200px;
+            transition: all 0.5s ease;
+        }
+
+        .content-section {
+            display: none;
+            animation: fadeIn 0.5s ease;
+        }
+
+        .content-section.active {
+            display: block;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .navigation-hint {
+            text-align: center;
+            margin-top: 20px;
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.7);
+            font-style: italic;
+        }
+
+        .comparison-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-top: 20px;
+        }
+
+        .traditional, .innovative {
+            padding: 20px;
+            border-radius: 10px;
+            border: 2px solid #ddd;
+        }
+
+        .traditional {
+            background: #f9f9f9;
+        }
+
+        .innovative {
+            background: #f0f0f8;
+            border-color: #6c5ce7;
+        }
+
+        .traditional-nav {
+            display: flex;
+            background: #e9ecef;
+            border-radius: 5px;
+            overflow: hidden;
+            margin-top: 10px;
+        }
+
+        .traditional-nav button {
+            flex: 1;
+            padding: 12px 16px;
+            border: none;
+            background: #e9ecef;
+            cursor: pointer;
+            transition: background 0.2s ease;
+        }
+
+        .traditional-nav button:hover {
+            background: #dee2e6;
+        }
+
+        .traditional-nav button.active {
+            background: #6c5ce7;
+            color: white;
+        }
+
+        .doc-section {
+            margin-bottom: 25px;
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            border-left: 4px solid #6c5ce7;
+        }
+
+        .physics-controls {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: rgba(255, 255, 255, 0.1);
+            padding: 15px;
+            border-radius: 10px;
+            backdrop-filter: blur(10px);
+        }
+
+        .physics-controls label {
+            display: block;
+            font-size: 12px;
+            margin-bottom: 5px;
+            color: rgba(255, 255, 255, 0.8);
+        }
+
+        .physics-controls input[type="range"] {
+            width: 80px;
+            margin-bottom: 10px;
+        }
+
+        @media (max-width: 768px) {
+            .comparison-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .innovation-meta {
+                flex-direction: column;
+                gap: 15px;
+            }
+            
+            .gravitynav-container {
+                height: 300px;
+            }
+            
+            .physics-controls {
+                position: relative;
+                top: 0;
+                right: 0;
+                margin-top: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>UI Innovation: GravityNav - Physics-Based Navigation</h1>
+        <div class="innovation-meta">
+            <p><strong>Replaces:</strong> Traditional Tab/Menu Navigation</p>
+            <p><strong>Innovation:</strong> Celestial physics simulation for navigation</p>
+        </div>
+    </header>
+
+    <main>
+        <section class="demo-container">
+            <h2>Interactive Demo</h2>
+            <div class="innovation-component">
+                <div class="gravitynav-container" id="gravityContainer" role="navigation" aria-label="Physics-based navigation">
+                    <div class="star-field" id="starField"></div>
+                    
+                    <div class="nav-planet planet-home" 
+                         data-content="home" 
+                         tabindex="0" 
+                         role="button" 
+                         aria-label="Home navigation">
+                        Home
+                    </div>
+                    
+                    <div class="nav-planet planet-about" 
+                         data-content="about" 
+                         tabindex="0" 
+                         role="button" 
+                         aria-label="About navigation">
+                        About
+                    </div>
+                    
+                    <div class="nav-planet planet-projects" 
+                         data-content="projects" 
+                         tabindex="0" 
+                         role="button" 
+                         aria-label="Projects navigation">
+                        Projects
+                    </div>
+                    
+                    <div class="nav-planet planet-contact" 
+                         data-content="contact" 
+                         tabindex="0" 
+                         role="button" 
+                         aria-label="Contact navigation">
+                        Contact
+                    </div>
+                    
+                    <div class="nav-planet planet-blog" 
+                         data-content="blog" 
+                         tabindex="0" 
+                         role="button" 
+                         aria-label="Blog navigation">
+                        Blog
+                    </div>
+
+                    <div class="physics-controls" id="physicsControls">
+                        <label for="gravitySlider">Gravity:</label>
+                        <input type="range" id="gravitySlider" min="0.1" max="2" step="0.1" value="1">
+                        
+                        <label for="dampingSlider">Damping:</label>
+                        <input type="range" id="dampingSlider" min="0.8" max="0.99" step="0.01" value="0.95">
+                    </div>
+                </div>
+
+                <div class="content-panel" id="contentPanel" aria-live="polite">
+                    <div class="content-section active" data-content="home">
+                        <h3>🏠 Welcome Home</h3>
+                        <p>This is the home page content. The GravityNav system allows you to navigate through different sections using physics-based interactions. Click on any planet to see gravitational effects in action!</p>
+                    </div>
+                    
+                    <div class="content-section" data-content="about">
+                        <h3>👤 About</h3>
+                        <p>Learn about the innovative navigation paradigm. Each navigation element behaves like a celestial body with its own gravitational field. Mouse interactions create attractive forces that pull planets toward your cursor.</p>
+                    </div>
+                    
+                    <div class="content-section" data-content="projects">
+                        <h3>🚀 Projects</h3>
+                        <p>Explore various projects and implementations. The physics simulation runs at 60fps and responds to real-time user interactions. Each planet maintains momentum and responds to gravitational influences.</p>
+                    </div>
+                    
+                    <div class="content-section" data-content="contact">
+                        <h3>📬 Contact</h3>
+                        <p>Get in touch through various channels. The system maintains accessibility through keyboard navigation while providing an engaging visual experience that transforms traditional navigation paradigms.</p>
+                    </div>
+                    
+                    <div class="content-section" data-content="blog">
+                        <h3>📝 Blog</h3>
+                        <p>Read latest articles and insights. The adaptive physics system responds to user preferences, allowing customization of gravitational strength and system damping for different interaction styles.</p>
+                    </div>
+                </div>
+
+                <div class="navigation-hint">
+                    Move your mouse around to create gravitational fields! Click planets to navigate. Use keyboard (Tab/Enter) for accessibility.
+                </div>
+            </div>
+        </section>
+
+        <section class="comparison">
+            <h2>Traditional vs Innovation</h2>
+            <div class="comparison-grid">
+                <div class="traditional">
+                    <h3>Traditional Tab Navigation</h3>
+                    <p>Standard horizontal or vertical tab layout with static positioning.</p>
+                    <div class="traditional-nav">
+                        <button class="active">Home</button>
+                        <button>About</button>
+                        <button>Projects</button>
+                        <button>Contact</button>
+                        <button>Blog</button>
+                    </div>
+                    <p style="margin-top: 15px; font-size: 14px; color: #666;">
+                        ✓ Predictable layout<br>
+                        ✓ Fast recognition<br>
+                        ✗ Static visual feedback<br>
+                        ✗ Limited engagement<br>
+                        ✗ No spatial relationships
+                    </p>
+                </div>
+                <div class="innovative">
+                    <h3>GravityNav System</h3>
+                    <p>Physics-based navigation with gravitational interactions and celestial metaphors.</p>
+                    <p style="margin-top: 15px; font-size: 14px; color: #2d2d5a;">
+                        ✓ Engaging physics simulation<br>
+                        ✓ Natural spatial relationships<br>
+                        ✓ Real-time visual feedback<br>
+                        ✓ Memorable interaction model<br>
+                        ✓ Customizable behavior<br>
+                        ✓ Full accessibility support
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        <section class="documentation">
+            <h2>Design Documentation</h2>
+            <div class="doc-section">
+                <h3>Interaction Model</h3>
+                <p>Users interact through mouse movement creating gravitational fields that attract navigation planets. Clicking selects a navigation item and triggers content updates. Planets respond with realistic physics including momentum, attraction, and damping. Keyboard navigation maintains traditional accessibility patterns.</p>
+            </div>
+            <div class="doc-section">
+                <h3>Technical Implementation</h3>
+                <p>Built using requestAnimationFrame for 60fps physics simulation. Vector mathematics calculate gravitational forces between mouse position and planets. CSS transforms provide smooth hardware-accelerated animations. Physics controls allow real-time parameter adjustment for gravity strength and system damping.</p>
+            </div>
+            <div class="doc-section">
+                <h3>Accessibility Features</h3>
+                <p>Maintains full keyboard navigation with Tab cycling and Enter activation. ARIA labels and roles ensure screen reader compatibility. Content changes are announced via aria-live regions. Focus indicators provide clear visual feedback. All physics interactions have keyboard equivalents.</p>
+            </div>
+            <div class="doc-section">
+                <h3>Evolution Opportunities</h3>
+                <p>Future enhancements could include orbital mechanics for sub-navigation, collision detection between planets, 3D space navigation, voice-controlled gravitational fields, collaborative navigation where multiple users influence the same space, and adaptive AI that learns user navigation patterns.</p>
+            </div>
+        </section>
+    </main>
+
+    <script>
+        class GravityNav {
+            constructor(container) {
+                this.container = container;
+                this.planets = Array.from(container.querySelectorAll('.nav-planet'));
+                this.starField = container.querySelector('#starField');
+                this.contentPanel = container.querySelector('#contentPanel');
+                this.gravitySlider = container.querySelector('#gravitySlider');
+                this.dampingSlider = container.querySelector('#dampingSlider');
+                
+                this.mouse = { x: 0, y: 0 };
+                this.gravity = 1;
+                this.damping = 0.95;
+                this.animationId = null;
+                
+                this.planetData = this.planets.map(planet => ({
+                    element: planet,
+                    x: 0, y: 0,
+                    vx: 0, vy: 0,
+                    mass: 50,
+                    radius: 40,
+                    restX: 0, restY: 0,
+                    active: false
+                }));
+
+                this.initializePositions();
+                this.createStarField();
+                this.initializeEvents();
+                this.startPhysicsLoop();
+                this.setActiveContent('home');
+            }
+
+            initializePositions() {
+                const containerRect = this.container.getBoundingClientRect();
+                const centerX = containerRect.width / 2;
+                const centerY = containerRect.height / 2;
+                const radius = Math.min(containerRect.width, containerRect.height) * 0.3;
+
+                this.planetData.forEach((planet, index) => {
+                    const angle = (index / this.planetData.length) * Math.PI * 2;
+                    const x = centerX + Math.cos(angle) * radius;
+                    const y = centerY + Math.sin(angle) * radius;
+                    
+                    planet.x = planet.restX = x;
+                    planet.y = planet.restY = y;
+                    planet.radius = 30 + Math.random() * 20;
+                    
+                    this.updatePlanetPosition(planet);
+                });
+            }
+
+            createStarField() {
+                const starCount = 50;
+                for (let i = 0; i < starCount; i++) {
+                    const star = document.createElement('div');
+                    star.className = 'star';
+                    
+                    const size = Math.random() * 2 + 1;
+                    star.style.width = size + 'px';
+                    star.style.height = size + 'px';
+                    star.style.left = Math.random() * 100 + '%';
+                    star.style.top = Math.random() * 100 + '%';
+                    star.style.animationDelay = Math.random() * 3 + 's';
+                    
+                    this.starField.appendChild(star);
+                }
+            }
+
+            initializeEvents() {
+                // Mouse tracking
+                this.container.addEventListener('mousemove', (e) => {
+                    const rect = this.container.getBoundingClientRect();
+                    this.mouse.x = e.clientX - rect.left;
+                    this.mouse.y = e.clientY - rect.top;
+                });
+
+                this.container.addEventListener('mouseleave', () => {
+                    this.mouse.x = -1000;
+                    this.mouse.y = -1000;
+                });
+
+                // Planet interactions
+                this.planets.forEach(planet => {
+                    planet.addEventListener('click', () => this.selectPlanet(planet));
+                    planet.addEventListener('keydown', (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            this.selectPlanet(planet);
+                        }
+                    });
+                });
+
+                // Physics controls
+                this.gravitySlider.addEventListener('input', (e) => {
+                    this.gravity = parseFloat(e.target.value);
+                });
+
+                this.dampingSlider.addEventListener('input', (e) => {
+                    this.damping = parseFloat(e.target.value);
+                });
+
+                // Window resize
+                window.addEventListener('resize', () => {
+                    this.initializePositions();
+                });
+            }
+
+            selectPlanet(planetElement) {
+                const contentType = planetElement.dataset.content;
+                this.setActiveContent(contentType);
+                
+                // Update planet states
+                this.planets.forEach(p => p.classList.remove('active'));
+                planetElement.classList.add('active');
+                
+                // Update planet data
+                this.planetData.forEach(planet => {
+                    planet.active = planet.element === planetElement;
+                    if (planet.active) {
+                        planet.mass = 80;
+                        planet.radius = 50;
+                    } else {
+                        planet.mass = 50;
+                        planet.radius = 30 + Math.random() * 20;
+                    }
+                });
+            }
+
+            setActiveContent(contentType) {
+                const contentSections = this.contentPanel.querySelectorAll('.content-section');
+                contentSections.forEach(section => {
+                    section.classList.remove('active');
+                    if (section.dataset.content === contentType) {
+                        section.classList.add('active');
+                    }
+                });
+            }
+
+            updatePhysics() {
+                this.planetData.forEach(planet => {
+                    // Calculate gravitational force from mouse
+                    const dx = this.mouse.x - planet.x;
+                    const dy = this.mouse.y - planet.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    
+                    if (distance > 0 && distance < 200) {
+                        const force = (this.gravity * planet.mass) / (distance * distance);
+                        const fx = (dx / distance) * force;
+                        const fy = (dy / distance) * force;
+                        
+                        planet.vx += fx * 0.01;
+                        planet.vy += fy * 0.01;
+                    }
+
+                    // Spring force back to rest position
+                    const restDx = planet.restX - planet.x;
+                    const restDy = planet.restY - planet.y;
+                    const springForce = 0.02;
+                    
+                    planet.vx += restDx * springForce;
+                    planet.vy += restDy * springForce;
+
+                    // Apply damping
+                    planet.vx *= this.damping;
+                    planet.vy *= this.damping;
+
+                    // Update position
+                    planet.x += planet.vx;
+                    planet.y += planet.vy;
+
+                    // Planet-to-planet interactions
+                    this.planetData.forEach(other => {
+                        if (other !== planet) {
+                            const pdx = other.x - planet.x;
+                            const pdy = other.y - planet.y;
+                            const pdist = Math.sqrt(pdx * pdx + pdy * pdy);
+                            
+                            if (pdist > 0 && pdist < 100) {
+                                const repulsion = 50 / (pdist * pdist);
+                                planet.vx -= (pdx / pdist) * repulsion * 0.001;
+                                planet.vy -= (pdy / pdist) * repulsion * 0.001;
+                            }
+                        }
+                    });
+
+                    this.updatePlanetPosition(planet);
+                });
+            }
+
+            updatePlanetPosition(planet) {
+                const element = planet.element;
+                const size = planet.radius;
+                
+                element.style.width = size + 'px';
+                element.style.height = size + 'px';
+                element.style.left = (planet.x - size/2) + 'px';
+                element.style.top = (planet.y - size/2) + 'px';
+                element.style.fontSize = (size * 0.25) + 'px';
+                
+                if (planet.active) {
+                    element.style.transform = 'scale(1.2)';
+                } else {
+                    element.style.transform = 'scale(1)';
+                }
+            }
+
+            startPhysicsLoop() {
+                const animate = () => {
+                    this.updatePhysics();
+                    this.animationId = requestAnimationFrame(animate);
+                };
+                animate();
+            }
+
+            destroy() {
+                if (this.animationId) {
+                    cancelAnimationFrame(this.animationId);
+                }
+            }
+        }
+
+        // Initialize GravityNav when page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            const container = document.querySelector('#gravityContainer');
+            const gravityNav = new GravityNav(container);
+
+            // Make it available globally
+            window.gravityNav = gravityNav;
+
+            // Traditional nav demo functionality
+            const traditionalButtons = document.querySelectorAll('.traditional-nav button');
+            traditionalButtons.forEach((button, index) => {
+                button.addEventListener('click', () => {
+                    traditionalButtons.forEach(b => b.classList.remove('active'));
+                    button.classList.add('active');
+                });
+            });
+
+            console.log('GravityNav initialized. Move your mouse around the navigation area!');
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src/ui_innovation_3.html b/legacy/src/ui_innovation_3.html
new file mode 100644
index 0000000..35c3bf1
--- /dev/null
+++ b/legacy/src/ui_innovation_3.html
@@ -0,0 +1,1101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UI Innovation: EcoSystem Display - Living Data Visualization</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background: linear-gradient(135deg, #2c5530 0%, #3d7c47 50%, #1a3d1f 100%);
+            min-height: 100vh;
+            padding: 20px;
+            overflow-x: hidden;
+        }
+
+        header {
+            text-align: center;
+            margin-bottom: 40px;
+            background: rgba(255, 255, 255, 0.95);
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        }
+
+        h1 {
+            color: #2d5a2d;
+            margin-bottom: 20px;
+            font-size: 2.5em;
+        }
+
+        .innovation-meta {
+            display: flex;
+            justify-content: center;
+            gap: 40px;
+            flex-wrap: wrap;
+        }
+
+        .innovation-meta p {
+            background: #e8f5e8;
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-weight: 500;
+        }
+
+        main {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        section {
+            background: rgba(255, 255, 255, 0.95);
+            margin-bottom: 30px;
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+        }
+
+        h2 {
+            color: #2d5a2d;
+            margin-bottom: 25px;
+            font-size: 1.8em;
+        }
+
+        h3 {
+            color: #3a6b3a;
+            margin-bottom: 15px;
+            font-size: 1.3em;
+        }
+
+        .demo-container {
+            background: linear-gradient(135deg, #1a3d1f 0%, #2c5530 50%, #3d7c47 100%);
+            color: white;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .ecosystem-container {
+            position: relative;
+            width: 100%;
+            height: 500px;
+            background: radial-gradient(ellipse at center, #4a7c59 0%, #2c5530 70%, #1a3d1f 100%);
+            border-radius: 15px;
+            overflow: hidden;
+            cursor: grab;
+            border: 3px solid #5d8a66;
+        }
+
+        .ecosystem-container:active {
+            cursor: grabbing;
+        }
+
+        .water-surface {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 40%;
+            background: linear-gradient(to bottom, rgba(0, 191, 255, 0.3) 0%, rgba(0, 100, 200, 0.5) 100%);
+            opacity: 0.7;
+            animation: water-flow 8s ease-in-out infinite;
+        }
+
+        @keyframes water-flow {
+            0%, 100% { transform: translateX(0); }
+            50% { transform: translateX(10px); }
+        }
+
+        .organism {
+            position: absolute;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            user-select: none;
+            text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+            transform-origin: center;
+            font-size: 12px;
+            color: white;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+            z-index: 10;
+        }
+
+        .organism:hover {
+            transform: scale(1.2);
+            z-index: 20;
+            box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
+        }
+
+        .organism:focus {
+            outline: 3px solid #ffff00;
+            outline-offset: 5px;
+        }
+
+        .organism.predator {
+            border: 3px solid #ff4444;
+            animation: hunt 6s linear infinite;
+        }
+
+        .organism.prey {
+            border: 2px solid #44ff44;
+            animation: graze 4s ease-in-out infinite;
+        }
+
+        .organism.producer {
+            border: 2px solid #44ff88;
+            animation: photosynthesize 8s ease-in-out infinite;
+        }
+
+        .organism.decomposer {
+            border: 2px solid #ff8844;
+            animation: decompose 3s ease-in-out infinite;
+        }
+
+        @keyframes hunt {
+            0%, 100% { box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3); }
+            50% { box-shadow: 0 8px 30px rgba(255, 68, 68, 0.8); }
+        }
+
+        @keyframes graze {
+            0%, 100% { transform: rotate(0deg) scale(1); }
+            25% { transform: rotate(-5deg) scale(1.05); }
+            75% { transform: rotate(5deg) scale(0.95); }
+        }
+
+        @keyframes photosynthesize {
+            0%, 100% { box-shadow: 0 4px 15px rgba(68, 255, 136, 0.3); }
+            50% { box-shadow: 0 8px 30px rgba(68, 255, 136, 0.8); }
+        }
+
+        @keyframes decompose {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+
+        .ecosystem-controls {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            backdrop-filter: blur(10px);
+            min-width: 200px;
+        }
+
+        .ecosystem-controls h4 {
+            margin-bottom: 15px;
+            color: #88ff88;
+            font-size: 16px;
+        }
+
+        .ecosystem-controls label {
+            display: block;
+            font-size: 12px;
+            margin-bottom: 5px;
+            color: #ccffcc;
+        }
+
+        .ecosystem-controls input, .ecosystem-controls button {
+            width: 100%;
+            margin-bottom: 10px;
+            padding: 5px;
+            border: none;
+            border-radius: 5px;
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+        }
+
+        .ecosystem-controls button {
+            background: #5d8a66;
+            cursor: pointer;
+            font-weight: bold;
+            padding: 8px;
+        }
+
+        .ecosystem-controls button:hover {
+            background: #6d9a76;
+        }
+
+        .ecosystem-stats {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 20px;
+            border-radius: 10px;
+            backdrop-filter: blur(10px);
+            min-width: 200px;
+        }
+
+        .ecosystem-stats h4 {
+            margin-bottom: 15px;
+            color: #88ff88;
+            font-size: 16px;
+        }
+
+        .stat-item {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 8px;
+            font-size: 12px;
+        }
+
+        .stat-label {
+            color: #ccffcc;
+        }
+
+        .stat-value {
+            color: #88ff88;
+            font-weight: bold;
+        }
+
+        .organism-tooltip {
+            position: absolute;
+            background: rgba(0, 0, 0, 0.9);
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            font-size: 12px;
+            pointer-events: none;
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            max-width: 200px;
+        }
+
+        .data-entry {
+            margin-bottom: 20px;
+            padding: 15px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+            border-left: 4px solid;
+        }
+
+        .data-entry.high { border-left-color: #ff4444; }
+        .data-entry.medium { border-left-color: #ffaa44; }
+        .data-entry.low { border-left-color: #44ff44; }
+
+        .comparison-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-top: 20px;
+        }
+
+        .traditional, .innovative {
+            padding: 20px;
+            border-radius: 10px;
+            border: 2px solid #ddd;
+        }
+
+        .traditional {
+            background: #f9f9f9;
+        }
+
+        .innovative {
+            background: #f0f8f0;
+            border-color: #5d8a66;
+        }
+
+        .traditional-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 10px;
+            font-size: 14px;
+        }
+
+        .traditional-table th,
+        .traditional-table td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: left;
+        }
+
+        .traditional-table th {
+            background: #f2f2f2;
+            font-weight: bold;
+        }
+
+        .traditional-table tr:nth-child(even) {
+            background: #f9f9f9;
+        }
+
+        .doc-section {
+            margin-bottom: 25px;
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            border-left: 4px solid #5d8a66;
+        }
+
+        .ecosystem-mood {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.7);
+            padding: 10px 20px;
+            border-radius: 20px;
+            color: white;
+            font-size: 14px;
+            backdrop-filter: blur(10px);
+        }
+
+        .floating-info {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 10px;
+            border-radius: 10px;
+            color: white;
+            font-size: 12px;
+            max-width: 300px;
+        }
+
+        @media (max-width: 768px) {
+            .comparison-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .innovation-meta {
+                flex-direction: column;
+                gap: 15px;
+            }
+            
+            .ecosystem-container {
+                height: 400px;
+            }
+            
+            .ecosystem-controls,
+            .ecosystem-stats {
+                position: relative;
+                top: 0;
+                left: 0;
+                right: 0;
+                margin: 10px 0;
+                min-width: auto;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>UI Innovation: EcoSystem Display - Living Data Visualization</h1>
+        <div class="innovation-meta">
+            <p><strong>Replaces:</strong> Traditional Data Tables/Lists</p>
+            <p><strong>Innovation:</strong> Living ecosystem metaphor for data representation</p>
+        </div>
+    </header>
+
+    <main>
+        <section class="demo-container">
+            <h2>Interactive Demo</h2>
+            <div class="innovation-component">
+                <div class="ecosystem-container" id="ecosystemContainer" role="region" aria-label="Living data ecosystem">
+                    <div class="water-surface"></div>
+                    
+                    <div class="ecosystem-controls" id="ecosystemControls">
+                        <h4>🎛️ Ecosystem Controls</h4>
+                        <label for="populationSlider">Population:</label>
+                        <input type="range" id="populationSlider" min="5" max="50" value="20">
+                        
+                        <label for="speedSlider">Time Speed:</label>
+                        <input type="range" id="speedSlider" min="0.5" max="3" step="0.1" value="1">
+                        
+                        <label for="diversitySlider">Diversity:</label>
+                        <input type="range" id="diversitySlider" min="0.1" max="1" step="0.1" value="0.5">
+                        
+                        <button id="addDataBtn">Add Random Data</button>
+                        <button id="resetEcosystemBtn">Reset Ecosystem</button>
+                    </div>
+
+                    <div class="ecosystem-stats" id="ecosystemStats">
+                        <h4>📊 Ecosystem Metrics</h4>
+                        <div class="stat-item">
+                            <span class="stat-label">Total Organisms:</span>
+                            <span class="stat-value" id="totalOrganisms">0</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="stat-label">Producers:</span>
+                            <span class="stat-value" id="producerCount">0</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="stat-label">Consumers:</span>
+                            <span class="stat-value" id="consumerCount">0</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="stat-label">Predators:</span>
+                            <span class="stat-value" id="predatorCount">0</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="stat-label">System Health:</span>
+                            <span class="stat-value" id="systemHealth">100%</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="stat-label">Data Quality:</span>
+                            <span class="stat-value" id="dataQuality">Excellent</span>
+                        </div>
+                    </div>
+
+                    <div class="ecosystem-mood" id="ecosystemMood">
+                        🌱 Ecosystem is Thriving
+                    </div>
+
+                    <div class="floating-info">
+                        <strong>How to interact:</strong><br>
+                        • Hover over organisms to see data details<br>
+                        • Click organisms to select and highlight relationships<br>
+                        • Adjust controls to change ecosystem behavior<br>
+                        • Watch how data values influence organism behavior
+                    </div>
+                </div>
+
+                <div class="organism-tooltip" id="tooltip"></div>
+            </div>
+        </section>
+
+        <section class="comparison">
+            <h2>Traditional vs Innovation</h2>
+            <div class="comparison-grid">
+                <div class="traditional">
+                    <h3>Traditional Data Table</h3>
+                    <p>Static tabular representation with rows and columns.</p>
+                    <table class="traditional-table">
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>Name</th>
+                                <th>Value</th>
+                                <th>Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>001</td>
+                                <td>Sales Data</td>
+                                <td>85%</td>
+                                <td>High</td>
+                            </tr>
+                            <tr>
+                                <td>002</td>
+                                <td>User Engagement</td>
+                                <td>62%</td>
+                                <td>Medium</td>
+                            </tr>
+                            <tr>
+                                <td>003</td>
+                                <td>Server Load</td>
+                                <td>34%</td>
+                                <td>Low</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <p style="margin-top: 15px; font-size: 14px; color: #666;">
+                        ✓ Precise data display<br>
+                        ✓ Easy scanning<br>
+                        ✗ Static representation<br>
+                        ✗ No relationship visualization<br>
+                        ✗ Limited engagement
+                    </p>
+                </div>
+                <div class="innovative">
+                    <h3>EcoSystem Display</h3>
+                    <p>Living ecosystem where data becomes organisms with adaptive behaviors and natural relationships.</p>
+                    <p style="margin-top: 15px; font-size: 14px; color: #2d5a2d;">
+                        ✓ Dynamic relationship visualization<br>
+                        ✓ Temporal data evolution<br>
+                        ✓ Intuitive pattern recognition<br>
+                        ✓ Engaging narrative experience<br>
+                        ✓ Adaptive behavioral feedback<br>
+                        ✓ Collaborative data interactions<br>
+                        ✓ Full accessibility support
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        <section class="documentation">
+            <h2>Design Documentation</h2>
+            <div class="doc-section">
+                <h3>Interaction Model</h3>
+                <p>Data entries are represented as digital organisms in a living ecosystem. Each organism's behavior, size, and movement patterns reflect the underlying data values and relationships. Users interact by observing ecosystem patterns, hovering for details, clicking to explore relationships, and adjusting environmental parameters to see different data perspectives.</p>
+            </div>
+            <div class="doc-section">
+                <h3>Technical Implementation</h3>
+                <p>Built with real-time ecosystem simulation using requestAnimationFrame for 60fps animation. Organisms use autonomous agent behaviors including flocking, seeking, and avoidance. Data mapping algorithms translate numerical values into biological characteristics like size, speed, and behavior patterns. CSS animations and transforms create fluid organic movement.</p>
+            </div>
+            <div class="doc-section">
+                <h3>Accessibility Features</h3>
+                <p>Maintains full keyboard navigation with Tab cycling and Enter selection. Screen readers access data through ARIA labels and live regions. All visual patterns have corresponding semantic descriptions. High contrast modes preserve ecosystem functionality. Alternative data views provide traditional table access when needed.</p>
+            </div>
+            <div class="doc-section">
+                <h3>Evolution Opportunities</h3>
+                <p>Future enhancements could include multi-dimensional ecosystem layers for complex datasets, seasonal cycles reflecting temporal data patterns, predator-prey relationships showing data dependencies, evolutionary algorithms that adapt organism behaviors to data trends, collaborative ecosystems for multi-user data exploration, and AI-driven ecosystem narratives that explain data insights through natural storytelling.</p>
+            </div>
+        </section>
+    </main>
+
+    <script>
+        class EcoSystemDisplay {
+            constructor(container) {
+                this.container = container;
+                this.organisms = [];
+                this.animationId = null;
+                this.tooltip = document.getElementById('tooltip');
+                this.timeSpeed = 1;
+                this.ecosystemMood = 'thriving';
+                
+                // Sample data representing different metrics
+                this.dataPoints = [
+                    { id: 'sales', name: 'Sales Performance', value: 85, type: 'predator', color: '#ff4444' },
+                    { id: 'users', name: 'User Engagement', value: 72, type: 'prey', color: '#44ff44' },
+                    { id: 'revenue', name: 'Revenue Growth', value: 91, type: 'predator', color: '#ff6644' },
+                    { id: 'support', name: 'Support Tickets', value: 23, type: 'decomposer', color: '#ff8844' },
+                    { id: 'server', name: 'Server Performance', value: 67, type: 'producer', color: '#44ff88' },
+                    { id: 'conversion', name: 'Conversion Rate', value: 45, type: 'prey', color: '#66ff44' },
+                    { id: 'retention', name: 'User Retention', value: 78, type: 'producer', color: '#44ff66' },
+                    { id: 'load_time', name: 'Page Load Time', value: 34, type: 'decomposer', color: '#ffaa44' }
+                ];
+
+                this.initializeControls();
+                this.createEcosystem();
+                this.startSimulation();
+                this.initializeEvents();
+            }
+
+            initializeControls() {
+                const populationSlider = document.getElementById('populationSlider');
+                const speedSlider = document.getElementById('speedSlider');
+                const diversitySlider = document.getElementById('diversitySlider');
+                const addDataBtn = document.getElementById('addDataBtn');
+                const resetBtn = document.getElementById('resetEcosystemBtn');
+
+                populationSlider.addEventListener('input', (e) => {
+                    this.adjustPopulation(parseInt(e.target.value));
+                });
+
+                speedSlider.addEventListener('input', (e) => {
+                    this.timeSpeed = parseFloat(e.target.value);
+                });
+
+                diversitySlider.addEventListener('input', (e) => {
+                    this.adjustDiversity(parseFloat(e.target.value));
+                });
+
+                addDataBtn.addEventListener('click', () => {
+                    this.addRandomDataPoint();
+                });
+
+                resetBtn.addEventListener('click', () => {
+                    this.resetEcosystem();
+                });
+            }
+
+            createEcosystem() {
+                this.organisms = [];
+                const containerRect = this.container.getBoundingClientRect();
+
+                this.dataPoints.forEach((dataPoint, index) => {
+                    const organism = this.createOrganism(dataPoint, containerRect);
+                    this.organisms.push(organism);
+                    this.container.appendChild(organism.element);
+                });
+
+                this.updateStats();
+            }
+
+            createOrganism(dataPoint, containerRect) {
+                const element = document.createElement('div');
+                element.className = `organism ${dataPoint.type}`;
+                element.tabIndex = 0;
+                element.setAttribute('role', 'button');
+                element.setAttribute('aria-label', `${dataPoint.name}: ${dataPoint.value}%`);
+
+                const size = 20 + (dataPoint.value / 100) * 40;
+                const x = Math.random() * (containerRect.width - size);
+                const y = Math.random() * (containerRect.height - size);
+
+                element.style.width = size + 'px';
+                element.style.height = size + 'px';
+                element.style.left = x + 'px';
+                element.style.top = y + 'px';
+                element.style.background = `radial-gradient(circle at 30% 30%, ${dataPoint.color}, ${this.darkenColor(dataPoint.color, 0.3)})`;
+                element.textContent = dataPoint.name.substring(0, 3).toUpperCase();
+
+                const organism = {
+                    element: element,
+                    data: dataPoint,
+                    x: x,
+                    y: y,
+                    vx: (Math.random() - 0.5) * 2,
+                    vy: (Math.random() - 0.5) * 2,
+                    size: size,
+                    energy: dataPoint.value,
+                    age: 0,
+                    targetX: x,
+                    targetY: y
+                };
+
+                this.addOrganismEvents(organism);
+                return organism;
+            }
+
+            addOrganismEvents(organism) {
+                organism.element.addEventListener('mouseenter', (e) => {
+                    this.showTooltip(e, organism);
+                });
+
+                organism.element.addEventListener('mouseleave', () => {
+                    this.hideTooltip();
+                });
+
+                organism.element.addEventListener('click', () => {
+                    this.selectOrganism(organism);
+                });
+
+                organism.element.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.selectOrganism(organism);
+                    }
+                });
+            }
+
+            showTooltip(event, organism) {
+                const tooltip = this.tooltip;
+                tooltip.innerHTML = `
+                    <strong>${organism.data.name}</strong><br>
+                    Value: ${organism.data.value}%<br>
+                    Type: ${organism.data.type}<br>
+                    Energy: ${Math.round(organism.energy)}%<br>
+                    Age: ${Math.round(organism.age)}s
+                `;
+                tooltip.style.left = event.pageX + 10 + 'px';
+                tooltip.style.top = event.pageY - 10 + 'px';
+                tooltip.style.opacity = '1';
+            }
+
+            hideTooltip() {
+                this.tooltip.style.opacity = '0';
+            }
+
+            selectOrganism(organism) {
+                // Remove previous selections
+                this.organisms.forEach(o => {
+                    o.element.style.border = o.element.style.border.replace('4px solid yellow', '');
+                });
+
+                // Highlight selected organism
+                organism.element.style.border = '4px solid yellow';
+
+                // Show related organisms based on type
+                this.highlightRelatedOrganisms(organism);
+                
+                // Update ecosystem mood based on selection
+                this.updateEcosystemMood(organism);
+            }
+
+            highlightRelatedOrganisms(selectedOrganism) {
+                this.organisms.forEach(organism => {
+                    if (organism !== selectedOrganism) {
+                        const relationship = this.calculateRelationship(selectedOrganism, organism);
+                        if (relationship > 0.5) {
+                            organism.element.style.boxShadow = '0 0 20px rgba(255, 255, 0, 0.8)';
+                            setTimeout(() => {
+                                organism.element.style.boxShadow = '';
+                            }, 2000);
+                        }
+                    }
+                });
+            }
+
+            calculateRelationship(org1, org2) {
+                // Simple relationship based on value similarity and type compatibility
+                const valueSimilarity = 1 - Math.abs(org1.data.value - org2.data.value) / 100;
+                const typeCompatibility = this.getTypeCompatibility(org1.data.type, org2.data.type);
+                return (valueSimilarity + typeCompatibility) / 2;
+            }
+
+            getTypeCompatibility(type1, type2) {
+                const relationships = {
+                    'predator': { 'prey': 0.8, 'predator': 0.3, 'producer': 0.2, 'decomposer': 0.1 },
+                    'prey': { 'producer': 0.9, 'prey': 0.6, 'predator': 0.1, 'decomposer': 0.3 },
+                    'producer': { 'decomposer': 0.7, 'prey': 0.8, 'producer': 0.5, 'predator': 0.2 },
+                    'decomposer': { 'producer': 0.6, 'decomposer': 0.4, 'predator': 0.2, 'prey': 0.3 }
+                };
+                return relationships[type1]?.[type2] || 0.1;
+            }
+
+            updateSimulation() {
+                const containerRect = this.container.getBoundingClientRect();
+                
+                this.organisms.forEach(organism => {
+                    // Age the organism
+                    organism.age += 0.016 * this.timeSpeed;
+                    
+                    // Update energy based on type and age
+                    this.updateOrganismEnergy(organism);
+                    
+                    // Calculate movement based on type behavior
+                    this.updateOrganismMovement(organism, containerRect);
+                    
+                    // Update visual representation
+                    this.updateOrganismVisuals(organism);
+                });
+
+                this.updateStats();
+                this.updateEcosystemMoodAuto();
+            }
+
+            updateOrganismEnergy(organism) {
+                const baseDecay = 0.1 * this.timeSpeed;
+                const typeModifier = {
+                    'predator': 0.5,
+                    'prey': 1.0,
+                    'producer': 1.5,
+                    'decomposer': 0.8
+                };
+                
+                organism.energy -= baseDecay * typeModifier[organism.data.type];
+                organism.energy = Math.max(0, Math.min(100, organism.energy));
+                
+                // Regenerate energy based on data value
+                if (organism.data.value > 70) {
+                    organism.energy += 0.2 * this.timeSpeed;
+                }
+            }
+
+            updateOrganismMovement(organism, containerRect) {
+                // Different movement patterns based on type
+                switch (organism.data.type) {
+                    case 'predator':
+                        this.updatePredatorMovement(organism, containerRect);
+                        break;
+                    case 'prey':
+                        this.updatePreyMovement(organism, containerRect);
+                        break;
+                    case 'producer':
+                        this.updateProducerMovement(organism, containerRect);
+                        break;
+                    case 'decomposer':
+                        this.updateDecomposerMovement(organism, containerRect);
+                        break;
+                }
+
+                // Apply movement
+                organism.x += organism.vx * this.timeSpeed;
+                organism.y += organism.vy * this.timeSpeed;
+
+                // Boundary checking
+                this.enforceBoundaries(organism, containerRect);
+            }
+
+            updatePredatorMovement(organism, containerRect) {
+                // Hunt for prey
+                const nearestPrey = this.findNearestOrganism(organism, 'prey');
+                if (nearestPrey) {
+                    const dx = nearestPrey.x - organism.x;
+                    const dy = nearestPrey.y - organism.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    
+                    if (distance > 0) {
+                        organism.vx += (dx / distance) * 0.1;
+                        organism.vy += (dy / distance) * 0.1;
+                    }
+                }
+                
+                // Apply damping
+                organism.vx *= 0.95;
+                organism.vy *= 0.95;
+            }
+
+            updatePreyMovement(organism, containerRect) {
+                // Flee from predators
+                const nearestPredator = this.findNearestOrganism(organism, 'predator');
+                if (nearestPredator) {
+                    const dx = organism.x - nearestPredator.x;
+                    const dy = organism.y - nearestPredator.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    
+                    if (distance < 100 && distance > 0) {
+                        organism.vx += (dx / distance) * 0.2;
+                        organism.vy += (dy / distance) * 0.2;
+                    }
+                }
+
+                // Seek producers for food
+                const nearestProducer = this.findNearestOrganism(organism, 'producer');
+                if (nearestProducer) {
+                    const dx = nearestProducer.x - organism.x;
+                    const dy = nearestProducer.y - organism.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    
+                    if (distance > 0) {
+                        organism.vx += (dx / distance) * 0.05;
+                        organism.vy += (dy / distance) * 0.05;
+                    }
+                }
+                
+                organism.vx *= 0.9;
+                organism.vy *= 0.9;
+            }
+
+            updateProducerMovement(organism, containerRect) {
+                // Slow, steady movement toward light (top of container)
+                const lightSeek = (containerRect.height * 0.3 - organism.y) * 0.001;
+                organism.vy += lightSeek;
+                
+                // Random gentle movement
+                organism.vx += (Math.random() - 0.5) * 0.02;
+                organism.vy += (Math.random() - 0.5) * 0.02;
+                
+                organism.vx *= 0.98;
+                organism.vy *= 0.98;
+            }
+
+            updateDecomposerMovement(organism, containerRect) {
+                // Move toward bottom and seek dead organic matter
+                const bottomSeek = (containerRect.height * 0.8 - organism.y) * 0.002;
+                organism.vy += bottomSeek;
+                
+                // Random movement
+                organism.vx += (Math.random() - 0.5) * 0.05;
+                organism.vy += (Math.random() - 0.5) * 0.02;
+                
+                organism.vx *= 0.85;
+                organism.vy *= 0.85;
+            }
+
+            findNearestOrganism(organism, type) {
+                let nearest = null;
+                let minDistance = Infinity;
+                
+                this.organisms.forEach(other => {
+                    if (other !== organism && other.data.type === type) {
+                        const dx = other.x - organism.x;
+                        const dy = other.y - organism.y;
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        
+                        if (distance < minDistance) {
+                            minDistance = distance;
+                            nearest = other;
+                        }
+                    }
+                });
+                
+                return nearest;
+            }
+
+            enforceBoundaries(organism, containerRect) {
+                const margin = organism.size / 2;
+                
+                if (organism.x < margin) {
+                    organism.x = margin;
+                    organism.vx = Math.abs(organism.vx);
+                }
+                if (organism.x > containerRect.width - margin) {
+                    organism.x = containerRect.width - margin;
+                    organism.vx = -Math.abs(organism.vx);
+                }
+                if (organism.y < margin) {
+                    organism.y = margin;
+                    organism.vy = Math.abs(organism.vy);
+                }
+                if (organism.y > containerRect.height - margin) {
+                    organism.y = containerRect.height - margin;
+                    organism.vy = -Math.abs(organism.vy);
+                }
+            }
+
+            updateOrganismVisuals(organism) {
+                organism.element.style.left = organism.x - organism.size/2 + 'px';
+                organism.element.style.top = organism.y - organism.size/2 + 'px';
+                
+                // Update size based on energy
+                const energyScale = 0.7 + (organism.energy / 100) * 0.6;
+                organism.element.style.transform = `scale(${energyScale})`;
+                
+                // Update opacity based on energy
+                organism.element.style.opacity = 0.6 + (organism.energy / 100) * 0.4;
+            }
+
+            updateStats() {
+                const stats = this.getEcosystemStats();
+                document.getElementById('totalOrganisms').textContent = stats.total;
+                document.getElementById('producerCount').textContent = stats.producers;
+                document.getElementById('consumerCount').textContent = stats.consumers;
+                document.getElementById('predatorCount').textContent = stats.predators;
+                document.getElementById('systemHealth').textContent = stats.health + '%';
+                document.getElementById('dataQuality').textContent = stats.quality;
+            }
+
+            getEcosystemStats() {
+                const total = this.organisms.length;
+                const producers = this.organisms.filter(o => o.data.type === 'producer').length;
+                const consumers = this.organisms.filter(o => o.data.type === 'prey').length;
+                const predators = this.organisms.filter(o => o.data.type === 'predator').length;
+                
+                const avgEnergy = this.organisms.reduce((sum, o) => sum + o.energy, 0) / total;
+                const avgValue = this.organisms.reduce((sum, o) => sum + o.data.value, 0) / total;
+                
+                const health = Math.round(avgEnergy);
+                const quality = avgValue > 80 ? 'Excellent' : avgValue > 60 ? 'Good' : avgValue > 40 ? 'Fair' : 'Poor';
+                
+                return { total, producers, consumers, predators, health, quality };
+            }
+
+            updateEcosystemMoodAuto() {
+                const stats = this.getEcosystemStats();
+                const moodElement = document.getElementById('ecosystemMood');
+                
+                if (stats.health > 80) {
+                    moodElement.textContent = '🌱 Ecosystem is Thriving';
+                    moodElement.style.color = '#44ff44';
+                } else if (stats.health > 60) {
+                    moodElement.textContent = '🌿 Ecosystem is Stable';
+                    moodElement.style.color = '#88ff88';
+                } else if (stats.health > 40) {
+                    moodElement.textContent = '🍂 Ecosystem is Struggling';
+                    moodElement.style.color = '#ffaa44';
+                } else {
+                    moodElement.textContent = '🌪️ Ecosystem in Crisis';
+                    moodElement.style.color = '#ff4444';
+                }
+            }
+
+            updateEcosystemMood(organism) {
+                const moodElement = document.getElementById('ecosystemMood');
+                moodElement.textContent = `🔍 Analyzing ${organism.data.name} - ${organism.data.value}% Performance`;
+                moodElement.style.color = '#ffff44';
+                
+                setTimeout(() => {
+                    this.updateEcosystemMoodAuto();
+                }, 3000);
+            }
+
+            adjustPopulation(targetSize) {
+                while (this.organisms.length < targetSize) {
+                    this.addRandomDataPoint();
+                }
+                while (this.organisms.length > targetSize) {
+                    this.removeRandomOrganism();
+                }
+            }
+
+            adjustDiversity(diversityLevel) {
+                // Adjust organism types based on diversity level
+                this.organisms.forEach(organism => {
+                    if (Math.random() < diversityLevel * 0.1) {
+                        this.mutateOrganism(organism);
+                    }
+                });
+            }
+
+            addRandomDataPoint() {
+                const types = ['predator', 'prey', 'producer', 'decomposer'];
+                const colors = ['#ff4444', '#44ff44', '#44ff88', '#ff8844'];
+                const names = ['Performance', 'Efficiency', 'Quality', 'Speed', 'Accuracy', 'Stability'];
+                
+                const newData = {
+                    id: 'random_' + Date.now(),
+                    name: names[Math.floor(Math.random() * names.length)] + ' Metric',
+                    value: Math.round(Math.random() * 100),
+                    type: types[Math.floor(Math.random() * types.length)],
+                    color: colors[Math.floor(Math.random() * colors.length)]
+                };
+
+                const containerRect = this.container.getBoundingClientRect();
+                const organism = this.createOrganism(newData, containerRect);
+                this.organisms.push(organism);
+                this.container.appendChild(organism.element);
+            }
+
+            removeRandomOrganism() {
+                if (this.organisms.length > 1) {
+                    const index = Math.floor(Math.random() * this.organisms.length);
+                    const organism = this.organisms[index];
+                    organism.element.remove();
+                    this.organisms.splice(index, 1);
+                }
+            }
+
+            mutateOrganism(organism) {
+                const types = ['predator', 'prey', 'producer', 'decomposer'];
+                const newType = types[Math.floor(Math.random() * types.length)];
+                organism.data.type = newType;
+                organism.element.className = `organism ${newType}`;
+            }
+
+            resetEcosystem() {
+                this.organisms.forEach(organism => organism.element.remove());
+                this.createEcosystem();
+            }
+
+            darkenColor(color, amount) {
+                const hex = color.replace('#', '');
+                const r = Math.max(0, parseInt(hex.substr(0, 2), 16) - Math.round(255 * amount));
+                const g = Math.max(0, parseInt(hex.substr(2, 2), 16) - Math.round(255 * amount));
+                const b = Math.max(0, parseInt(hex.substr(4, 2), 16) - Math.round(255 * amount));
+                return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+            }
+
+            startSimulation() {
+                const animate = () => {
+                    this.updateSimulation();
+                    this.animationId = requestAnimationFrame(animate);
+                };
+                animate();
+            }
+
+            initializeEvents() {
+                // Handle window resize
+                window.addEventListener('resize', () => {
+                    const containerRect = this.container.getBoundingClientRect();
+                    this.organisms.forEach(organism => {
+                        this.enforceBoundaries(organism, containerRect);
+                    });
+                });
+
+                // Keyboard navigation for container
+                this.container.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape') {
+                        // Deselect all organisms
+                        this.organisms.forEach(o => {
+                            o.element.style.border = o.element.style.border.replace('4px solid yellow', '');
+                        });
+                    }
+                });
+            }
+
+            destroy() {
+                if (this.animationId) {
+                    cancelAnimationFrame(this.animationId);
+                }
+            }
+        }
+
+        // Initialize EcoSystem Display when page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            const container = document.querySelector('#ecosystemContainer');
+            const ecoSystem = new EcoSystemDisplay(container);
+
+            // Make it available globally
+            window.ecoSystem = ecoSystem;
+
+            console.log('EcoSystem Display initialized. Watch the organisms interact!');
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src/ui_innovation_4.html b/legacy/src/ui_innovation_4.html
new file mode 100644
index 0000000..27af932
--- /dev/null
+++ b/legacy/src/ui_innovation_4.html
@@ -0,0 +1,884 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UI Innovation: RainFlow Control</title>
+    <style>
+        /* Global Styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 100%);
+            color: #333;
+            line-height: 1.6;
+            min-height: 100vh;
+        }
+
+        header {
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+            padding: 2rem;
+            text-align: center;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+        }
+
+        h1 {
+            color: #1976d2;
+            margin-bottom: 1rem;
+            font-size: 2.5rem;
+        }
+
+        .innovation-meta {
+            display: flex;
+            justify-content: center;
+            gap: 2rem;
+            flex-wrap: wrap;
+        }
+
+        .innovation-meta p {
+            margin: 0.5rem 0;
+            color: #666;
+        }
+
+        main {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        section {
+            background: white;
+            border-radius: 12px;
+            padding: 2rem;
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+        }
+
+        h2 {
+            color: #1565c0;
+            margin-bottom: 1.5rem;
+            font-size: 1.8rem;
+        }
+
+        h3 {
+            color: #0d47a1;
+            margin-bottom: 1rem;
+            font-size: 1.3rem;
+        }
+
+        /* RainFlow Control Styles */
+        .demo-container {
+            position: relative;
+        }
+
+        .rainflow-container {
+            display: flex;
+            gap: 3rem;
+            justify-content: center;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            margin: 2rem 0;
+        }
+
+        .rainflow-control {
+            position: relative;
+            width: 300px;
+            height: 400px;
+            background: linear-gradient(180deg, 
+                #87ceeb 0%, 
+                #b0e0e6 20%, 
+                #e0f7fa 40%, 
+                #ffffff 60%, 
+                #f5f5f5 100%);
+            border-radius: 20px;
+            box-shadow: 
+                0 10px 30px rgba(0, 0, 0, 0.1),
+                inset 0 0 20px rgba(255, 255, 255, 0.5);
+            overflow: hidden;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .cloud-layer {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 100px;
+            background: linear-gradient(180deg, 
+                rgba(255, 255, 255, 0.9) 0%, 
+                rgba(255, 255, 255, 0.6) 50%, 
+                transparent 100%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 10;
+            transition: all 0.3s ease;
+        }
+
+        .cloud {
+            position: relative;
+            width: 80px;
+            height: 30px;
+            background: #fff;
+            border-radius: 100px;
+            opacity: 0.9;
+            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+        }
+
+        .cloud::before,
+        .cloud::after {
+            content: '';
+            position: absolute;
+            background: #fff;
+            border-radius: 100px;
+        }
+
+        .cloud::before {
+            width: 40px;
+            height: 40px;
+            top: -20px;
+            left: 10px;
+        }
+
+        .cloud::after {
+            width: 50px;
+            height: 35px;
+            top: -15px;
+            right: 10px;
+        }
+
+        .cloud.active {
+            background: #9e9e9e;
+            animation: rumble 0.3s ease infinite;
+        }
+
+        .cloud.active::before,
+        .cloud.active::after {
+            background: #9e9e9e;
+        }
+
+        @keyframes rumble {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-2px); }
+            75% { transform: translateX(2px); }
+        }
+
+        .rain-area {
+            position: absolute;
+            top: 100px;
+            left: 0;
+            right: 0;
+            height: 150px;
+            overflow: hidden;
+            pointer-events: none;
+        }
+
+        .raindrop {
+            position: absolute;
+            width: 2px;
+            height: 15px;
+            background: linear-gradient(180deg, 
+                transparent 0%, 
+                rgba(30, 144, 255, 0.6) 50%, 
+                rgba(30, 144, 255, 0.8) 100%);
+            animation: fall linear infinite;
+            pointer-events: none;
+        }
+
+        @keyframes fall {
+            0% {
+                transform: translateY(-20px);
+                opacity: 0;
+            }
+            10% {
+                opacity: 1;
+            }
+            90% {
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(150px);
+                opacity: 0;
+            }
+        }
+
+        .water-container {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 50%;
+            border-radius: 0 0 20px 20px;
+            overflow: hidden;
+        }
+
+        .water-level {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: linear-gradient(180deg, 
+                rgba(30, 144, 255, 0.6) 0%, 
+                rgba(30, 144, 255, 0.8) 50%, 
+                rgba(0, 119, 190, 0.9) 100%);
+            transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            border-radius: 0 0 20px 20px;
+        }
+
+        .water-level::before {
+            content: '';
+            position: absolute;
+            top: -10px;
+            left: -10%;
+            right: -10%;
+            height: 20px;
+            background: inherit;
+            border-radius: 50%;
+            animation: wave 3s ease-in-out infinite;
+        }
+
+        @keyframes wave {
+            0%, 100% { transform: translateY(0) scaleY(1); }
+            50% { transform: translateY(-5px) scaleY(0.8); }
+        }
+
+        .water-bubbles {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 100%;
+            pointer-events: none;
+        }
+
+        .bubble {
+            position: absolute;
+            background: rgba(255, 255, 255, 0.5);
+            border-radius: 50%;
+            animation: bubble-rise linear infinite;
+        }
+
+        @keyframes bubble-rise {
+            0% {
+                transform: translateY(0) scale(1);
+                opacity: 0.8;
+            }
+            100% {
+                transform: translateY(-200px) scale(1.5);
+                opacity: 0;
+            }
+        }
+
+        .value-display {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(255, 255, 255, 0.9);
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-weight: 600;
+            color: #0d47a1;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            z-index: 20;
+        }
+
+        .control-info {
+            text-align: center;
+            margin-top: 1rem;
+        }
+
+        .control-label {
+            font-weight: 600;
+            color: #1565c0;
+            margin-bottom: 0.5rem;
+        }
+
+        /* Traditional Slider for Comparison */
+        .comparison-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+
+        .traditional-slider {
+            padding: 2rem;
+            background: #f5f5f5;
+            border-radius: 8px;
+        }
+
+        .traditional-slider input[type="range"] {
+            width: 100%;
+            margin: 1rem 0;
+        }
+
+        .slider-value {
+            text-align: center;
+            font-weight: 600;
+            color: #666;
+            margin-top: 1rem;
+        }
+
+        /* Documentation Styles */
+        .documentation {
+            line-height: 1.8;
+        }
+
+        .doc-section {
+            margin-bottom: 2rem;
+            padding: 1.5rem;
+            background: #f8f9fa;
+            border-radius: 8px;
+            border-left: 4px solid #1976d2;
+        }
+
+        .doc-section p {
+            color: #555;
+            margin-top: 0.5rem;
+        }
+
+        /* Accessibility Focus Styles */
+        .rainflow-control:focus {
+            outline: 3px solid #1976d2;
+            outline-offset: 3px;
+        }
+
+        .rainflow-control:focus .cloud {
+            animation: pulse 1s ease infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+        }
+
+        /* Screen Reader Only */
+        .sr-only {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .rainflow-container {
+                flex-direction: column;
+                align-items: center;
+            }
+
+            .comparison-grid {
+                grid-template-columns: 1fr;
+            }
+
+            h1 {
+                font-size: 2rem;
+            }
+
+            .innovation-meta {
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Documentation Header -->
+    <header>
+        <h1>UI Innovation: RainFlow Control</h1>
+        <div class="innovation-meta">
+            <p><strong>Replaces:</strong> Traditional Slider/Range Input</p>
+            <p><strong>Innovation:</strong> Natural weather-based fluid dynamics for value control</p>
+        </div>
+    </header>
+
+    <!-- Interactive Demo Section -->
+    <main>
+        <section class="demo-container">
+            <h2>Interactive Demo</h2>
+            <p style="text-align: center; color: #666; margin-bottom: 2rem;">
+                Click and hold the cloud to make it rain. The water level represents your selected value.
+                Release to stop the rain and watch the water settle.
+            </p>
+            
+            <div class="rainflow-container">
+                <!-- Volume Control -->
+                <div>
+                    <div class="control-label">Volume Control</div>
+                    <div class="rainflow-control" 
+                         role="slider" 
+                         tabindex="0"
+                         aria-label="Volume control using rain flow"
+                         aria-valuemin="0"
+                         aria-valuemax="100"
+                         aria-valuenow="50"
+                         data-min="0"
+                         data-max="100"
+                         data-value="50"
+                         data-label="Volume">
+                        <div class="cloud-layer">
+                            <div class="cloud"></div>
+                        </div>
+                        <div class="rain-area"></div>
+                        <div class="water-container">
+                            <div class="water-level" style="height: 50%;">
+                                <div class="water-bubbles"></div>
+                            </div>
+                        </div>
+                        <div class="value-display">50%</div>
+                        <span class="sr-only" role="status" aria-live="polite">Volume: 50%</span>
+                    </div>
+                    <div class="control-info">
+                        <p style="color: #666; font-size: 0.9rem;">Current: <span class="current-value">50</span>%</p>
+                    </div>
+                </div>
+
+                <!-- Brightness Control -->
+                <div>
+                    <div class="control-label">Brightness Control</div>
+                    <div class="rainflow-control" 
+                         role="slider" 
+                         tabindex="0"
+                         aria-label="Brightness control using rain flow"
+                         aria-valuemin="0"
+                         aria-valuemax="100"
+                         aria-valuenow="75"
+                         data-min="0"
+                         data-max="100"
+                         data-value="75"
+                         data-label="Brightness">
+                        <div class="cloud-layer">
+                            <div class="cloud"></div>
+                        </div>
+                        <div class="rain-area"></div>
+                        <div class="water-container">
+                            <div class="water-level" style="height: 75%;">
+                                <div class="water-bubbles"></div>
+                            </div>
+                        </div>
+                        <div class="value-display">75%</div>
+                        <span class="sr-only" role="status" aria-live="polite">Brightness: 75%</span>
+                    </div>
+                    <div class="control-info">
+                        <p style="color: #666; font-size: 0.9rem;">Current: <span class="current-value">75</span>%</p>
+                    </div>
+                </div>
+
+                <!-- Temperature Control -->
+                <div>
+                    <div class="control-label">Temperature Control</div>
+                    <div class="rainflow-control" 
+                         role="slider" 
+                         tabindex="0"
+                         aria-label="Temperature control using rain flow"
+                         aria-valuemin="60"
+                         aria-valuemax="90"
+                         aria-valuenow="72"
+                         data-min="60"
+                         data-max="90"
+                         data-value="72"
+                         data-label="Temperature"
+                         data-unit="°F">
+                        <div class="cloud-layer">
+                            <div class="cloud"></div>
+                        </div>
+                        <div class="rain-area"></div>
+                        <div class="water-container">
+                            <div class="water-level" style="height: 40%;">
+                                <div class="water-bubbles"></div>
+                            </div>
+                        </div>
+                        <div class="value-display">72°F</div>
+                        <span class="sr-only" role="status" aria-live="polite">Temperature: 72°F</span>
+                    </div>
+                    <div class="control-info">
+                        <p style="color: #666; font-size: 0.9rem;">Current: <span class="current-value">72</span>°F</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Traditional Comparison -->
+        <section class="comparison">
+            <h2>Traditional vs Innovation</h2>
+            <div class="comparison-grid">
+                <div class="traditional">
+                    <h3>Traditional Range Sliders</h3>
+                    <div class="traditional-slider">
+                        <label for="traditional-volume">Volume:</label>
+                        <input type="range" id="traditional-volume" min="0" max="100" value="50">
+                        <div class="slider-value">50%</div>
+                    </div>
+                    <div class="traditional-slider">
+                        <label for="traditional-brightness">Brightness:</label>
+                        <input type="range" id="traditional-brightness" min="0" max="100" value="75">
+                        <div class="slider-value">75%</div>
+                    </div>
+                    <div class="traditional-slider">
+                        <label for="traditional-temp">Temperature:</label>
+                        <input type="range" id="traditional-temp" min="60" max="90" value="72">
+                        <div class="slider-value">72°F</div>
+                    </div>
+                </div>
+                <div class="innovative">
+                    <h3>RainFlow Controls</h3>
+                    <p style="color: #666; line-height: 1.8;">
+                        The innovative RainFlow controls above replace traditional sliders with an intuitive 
+                        weather metaphor. Users control values by creating rain that fills a container, 
+                        making the interaction more engaging and visually meaningful.
+                    </p>
+                    <ul style="color: #666; margin-top: 1rem; padding-left: 1.5rem;">
+                        <li>Click and hold to make it rain (increase value)</li>
+                        <li>Release to stop rain (value settles)</li>
+                        <li>Natural fluid physics create smooth transitions</li>
+                        <li>Visual feedback through water level and animation</li>
+                        <li>Accessible with keyboard controls (Space/Enter to rain, Arrow keys for fine control)</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!-- Design Documentation -->
+        <section class="documentation">
+            <h2>Design Documentation</h2>
+            
+            <div class="doc-section">
+                <h3>Interaction Model</h3>
+                <p>
+                    RainFlow Controls transform the abstract concept of value adjustment into a tangible, 
+                    natural process. Users interact with a cloud that produces rain, filling a container 
+                    with water. The water level directly represents the selected value, creating an 
+                    immediate visual connection between action and result. This metaphor leverages our 
+                    innate understanding of weather and fluid dynamics to make digital controls feel 
+                    more natural and engaging.
+                </p>
+            </div>
+            
+            <div class="doc-section">
+                <h3>Technical Implementation</h3>
+                <p>
+                    Built entirely with native web technologies, RainFlow Controls use CSS animations 
+                    for smooth fluid motion and JavaScript for interaction handling. The rain effect 
+                    is created dynamically with individual raindrop elements, while the water level 
+                    uses CSS transforms and transitions for realistic fluid behavior. The component 
+                    implements proper ARIA attributes for accessibility and uses requestAnimationFrame 
+                    for optimal performance during continuous interactions.
+                </p>
+            </div>
+            
+            <div class="doc-section">
+                <h3>Accessibility Features</h3>
+                <p>
+                    Full keyboard navigation is supported with Space/Enter keys triggering rain and 
+                    Arrow keys providing fine-grained control. Screen readers announce value changes 
+                    through ARIA live regions. The component maintains proper focus states and provides 
+                    visual feedback for keyboard users. High contrast is maintained between the water 
+                    level and background, and all interactive elements meet WCAG 2.1 AA standards for 
+                    size and spacing.
+                </p>
+            </div>
+            
+            <div class="doc-section">
+                <h3>Evolution Opportunities</h3>
+                <p>
+                    Future iterations could incorporate temperature-based color gradients (blue for 
+                    cold, red for hot), storm intensity for rapid value changes, evaporation mechanics 
+                    for value decay over time, and multiple cloud types for different input speeds. 
+                    The system could also support collaborative controls where multiple users contribute 
+                    to a shared water level, or implement weather patterns that predict and suggest 
+                    optimal values based on usage patterns.
+                </p>
+            </div>
+        </section>
+    </main>
+
+    <script>
+        // RainFlow Control Implementation
+        class RainFlowControl {
+            constructor(element) {
+                this.element = element;
+                this.cloud = element.querySelector('.cloud');
+                this.rainArea = element.querySelector('.rain-area');
+                this.waterLevel = element.querySelector('.water-level');
+                this.waterBubbles = element.querySelector('.water-bubbles');
+                this.valueDisplay = element.querySelector('.value-display');
+                this.srStatus = element.querySelector('[role="status"]');
+                
+                // Get data attributes
+                this.min = parseFloat(element.dataset.min) || 0;
+                this.max = parseFloat(element.dataset.max) || 100;
+                this.value = parseFloat(element.dataset.value) || 50;
+                this.label = element.dataset.label || 'Value';
+                this.unit = element.dataset.unit || '%';
+                
+                // State
+                this.isRaining = false;
+                this.rainInterval = null;
+                this.bubbleInterval = null;
+                this.raindrops = [];
+                this.bubbles = [];
+                
+                // Bind methods
+                this.startRain = this.startRain.bind(this);
+                this.stopRain = this.stopRain.bind(this);
+                this.updateValue = this.updateValue.bind(this);
+                this.handleKeyDown = this.handleKeyDown.bind(this);
+                this.handleKeyUp = this.handleKeyUp.bind(this);
+                
+                // Initialize
+                this.init();
+            }
+            
+            init() {
+                // Mouse events
+                this.element.addEventListener('mousedown', this.startRain);
+                this.element.addEventListener('mouseup', this.stopRain);
+                this.element.addEventListener('mouseleave', this.stopRain);
+                
+                // Touch events
+                this.element.addEventListener('touchstart', this.startRain);
+                this.element.addEventListener('touchend', this.stopRain);
+                
+                // Keyboard events
+                this.element.addEventListener('keydown', this.handleKeyDown);
+                this.element.addEventListener('keyup', this.handleKeyUp);
+                
+                // Prevent text selection
+                this.element.addEventListener('selectstart', e => e.preventDefault());
+                
+                // Initialize water level
+                this.updateWaterLevel();
+            }
+            
+            startRain(e) {
+                e.preventDefault();
+                if (this.isRaining) return;
+                
+                this.isRaining = true;
+                this.cloud.classList.add('active');
+                
+                // Start creating raindrops
+                this.rainInterval = setInterval(() => {
+                    this.createRaindrop();
+                    
+                    // Increase value while raining
+                    if (this.value < this.max) {
+                        this.value = Math.min(this.value + 1, this.max);
+                        this.updateValue();
+                    }
+                }, 50);
+                
+                // Start creating bubbles
+                this.bubbleInterval = setInterval(() => {
+                    this.createBubble();
+                }, 300);
+            }
+            
+            stopRain() {
+                if (!this.isRaining) return;
+                
+                this.isRaining = false;
+                this.cloud.classList.remove('active');
+                
+                // Stop creating raindrops
+                clearInterval(this.rainInterval);
+                clearInterval(this.bubbleInterval);
+                
+                // Clear remaining raindrops after animation
+                setTimeout(() => {
+                    this.raindrops.forEach(drop => drop.remove());
+                    this.raindrops = [];
+                }, 2000);
+            }
+            
+            createRaindrop() {
+                const drop = document.createElement('div');
+                drop.className = 'raindrop';
+                
+                // Random horizontal position under cloud
+                const cloudRect = this.cloud.getBoundingClientRect();
+                const containerRect = this.element.getBoundingClientRect();
+                const minX = cloudRect.left - containerRect.left;
+                const maxX = cloudRect.right - containerRect.left;
+                
+                drop.style.left = `${minX + Math.random() * (maxX - minX)}px`;
+                drop.style.animationDuration = `${0.5 + Math.random() * 0.5}s`;
+                drop.style.animationDelay = `${Math.random() * 0.2}s`;
+                
+                this.rainArea.appendChild(drop);
+                this.raindrops.push(drop);
+                
+                // Remove after animation
+                setTimeout(() => {
+                    drop.remove();
+                    const index = this.raindrops.indexOf(drop);
+                    if (index > -1) {
+                        this.raindrops.splice(index, 1);
+                    }
+                }, 1000);
+            }
+            
+            createBubble() {
+                const bubble = document.createElement('div');
+                bubble.className = 'bubble';
+                
+                // Random size and position
+                const size = 4 + Math.random() * 8;
+                bubble.style.width = `${size}px`;
+                bubble.style.height = `${size}px`;
+                bubble.style.left = `${10 + Math.random() * 80}%`;
+                bubble.style.bottom = `${Math.random() * 20}px`;
+                bubble.style.animationDuration = `${2 + Math.random() * 2}s`;
+                
+                this.waterBubbles.appendChild(bubble);
+                this.bubbles.push(bubble);
+                
+                // Remove after animation
+                setTimeout(() => {
+                    bubble.remove();
+                    const index = this.bubbles.indexOf(bubble);
+                    if (index > -1) {
+                        this.bubbles.splice(index, 1);
+                    }
+                }, 4000);
+            }
+            
+            updateValue() {
+                this.updateWaterLevel();
+                this.updateDisplay();
+                this.updateAria();
+                
+                // Update info display
+                const container = this.element.closest('div');
+                const infoValue = container.querySelector('.current-value');
+                if (infoValue) {
+                    infoValue.textContent = Math.round(this.value);
+                }
+                
+                // Dispatch custom event
+                this.element.dispatchEvent(new CustomEvent('rainflowchange', {
+                    detail: { value: this.value }
+                }));
+            }
+            
+            updateWaterLevel() {
+                const percentage = ((this.value - this.min) / (this.max - this.min)) * 100;
+                this.waterLevel.style.height = `${percentage}%`;
+                
+                // Update water color based on level
+                const hue = 200 + (percentage * 0.2); // Blue to slightly purple
+                const lightness = 50 - (percentage * 0.2); // Darker as it fills
+                this.waterLevel.style.background = `linear-gradient(180deg, 
+                    hsla(${hue}, 70%, ${lightness}%, 0.6) 0%, 
+                    hsla(${hue}, 70%, ${lightness - 10}%, 0.8) 50%, 
+                    hsla(${hue}, 70%, ${lightness - 20}%, 0.9) 100%)`;
+            }
+            
+            updateDisplay() {
+                const displayValue = this.unit === '%' 
+                    ? `${Math.round(this.value)}%`
+                    : `${Math.round(this.value)}${this.unit}`;
+                this.valueDisplay.textContent = displayValue;
+            }
+            
+            updateAria() {
+                this.element.setAttribute('aria-valuenow', this.value);
+                const statusText = `${this.label}: ${Math.round(this.value)}${this.unit}`;
+                this.srStatus.textContent = statusText;
+            }
+            
+            handleKeyDown(e) {
+                switch(e.key) {
+                    case ' ':
+                    case 'Enter':
+                        e.preventDefault();
+                        this.startRain(e);
+                        break;
+                    case 'ArrowUp':
+                    case 'ArrowRight':
+                        e.preventDefault();
+                        this.value = Math.min(this.value + 1, this.max);
+                        this.updateValue();
+                        break;
+                    case 'ArrowDown':
+                    case 'ArrowLeft':
+                        e.preventDefault();
+                        this.value = Math.max(this.value - 1, this.min);
+                        this.updateValue();
+                        break;
+                    case 'Home':
+                        e.preventDefault();
+                        this.value = this.min;
+                        this.updateValue();
+                        break;
+                    case 'End':
+                        e.preventDefault();
+                        this.value = this.max;
+                        this.updateValue();
+                        break;
+                }
+            }
+            
+            handleKeyUp(e) {
+                if (e.key === ' ' || e.key === 'Enter') {
+                    e.preventDefault();
+                    this.stopRain();
+                }
+            }
+        }
+        
+        // Initialize all RainFlow controls
+        document.addEventListener('DOMContentLoaded', () => {
+            const controls = document.querySelectorAll('.rainflow-control');
+            controls.forEach(control => {
+                new RainFlowControl(control);
+            });
+            
+            // Sync traditional sliders for comparison
+            const traditionalSliders = document.querySelectorAll('input[type="range"]');
+            traditionalSliders.forEach(slider => {
+                slider.addEventListener('input', (e) => {
+                    const valueDisplay = e.target.parentElement.querySelector('.slider-value');
+                    const value = e.target.value;
+                    if (e.target.id.includes('temp')) {
+                        valueDisplay.textContent = `${value}°F`;
+                    } else {
+                        valueDisplay.textContent = `${value}%`;
+                    }
+                });
+            });
+        });
+        
+        // Performance optimization: Clean up animations when not visible
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                const control = entry.target.querySelector('.rainflow-control');
+                if (control && control.rainflowInstance) {
+                    if (!entry.isIntersecting) {
+                        control.rainflowInstance.stopRain();
+                    }
+                }
+            });
+        });
+        
+        document.querySelectorAll('.rainflow-container').forEach(container => {
+            observer.observe(container);
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src/ui_innovation_5.html b/legacy/src/ui_innovation_5.html
new file mode 100644
index 0000000..2acdd8c
--- /dev/null
+++ b/legacy/src/ui_innovation_5.html
@@ -0,0 +1,890 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UI Innovation: Memory Stream</title>
+    <style>
+        /* Base styles */
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background: #f5f5f7;
+            padding: 20px;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        header {
+            background: white;
+            border-radius: 12px;
+            padding: 30px;
+            margin-bottom: 30px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+        }
+
+        h1 {
+            font-size: 2.5em;
+            margin-bottom: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .innovation-meta {
+            display: flex;
+            gap: 30px;
+            flex-wrap: wrap;
+        }
+
+        .innovation-meta p {
+            color: #666;
+        }
+
+        main {
+            display: grid;
+            gap: 30px;
+        }
+
+        section {
+            background: white;
+            border-radius: 12px;
+            padding: 30px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+        }
+
+        h2 {
+            margin-bottom: 20px;
+            color: #444;
+        }
+
+        h3 {
+            margin-bottom: 15px;
+            color: #555;
+        }
+
+        /* Memory Stream Component Styles */
+        .memory-stream-container {
+            position: relative;
+            height: 600px;
+            background: linear-gradient(180deg, #f8f9ff 0%, #e8ebff 100%);
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: inset 0 0 30px rgba(0,0,0,0.05);
+        }
+
+        .temporal-gradient {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 100%;
+            background: linear-gradient(180deg, 
+                rgba(255,255,255,0) 0%, 
+                rgba(255,255,255,0.3) 20%,
+                rgba(255,255,255,0.7) 60%,
+                rgba(255,255,255,0.95) 100%
+            );
+            pointer-events: none;
+            z-index: 10;
+        }
+
+        .memory-item {
+            position: absolute;
+            padding: 15px 20px;
+            border-radius: 15px;
+            max-width: 300px;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            transform-origin: center;
+            animation: memoryPulse 4s ease-in-out infinite;
+        }
+
+        @keyframes memoryPulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.02); }
+        }
+
+        .memory-item.fading {
+            animation: fadeOut 3s ease-out forwards;
+        }
+
+        @keyframes fadeOut {
+            to {
+                opacity: 0;
+                transform: translateY(20px) scale(0.9);
+            }
+        }
+
+        .memory-item.recalling {
+            animation: recall 0.6s ease-out;
+            z-index: 20;
+        }
+
+        @keyframes recall {
+            0% { 
+                transform: scale(0.8) translateY(20px);
+                opacity: 0.3;
+            }
+            50% {
+                transform: scale(1.1);
+            }
+            100% { 
+                transform: scale(1);
+                opacity: 1;
+            }
+        }
+
+        /* Emotional States */
+        .memory-item.joy {
+            background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
+            box-shadow: 0 4px 20px rgba(253, 203, 110, 0.3);
+        }
+
+        .memory-item.urgent {
+            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
+            box-shadow: 0 4px 20px rgba(238, 90, 36, 0.3);
+            animation-duration: 2s;
+        }
+
+        .memory-item.info {
+            background: linear-gradient(135deg, #74b9ff 0%, #a29bfe 100%);
+            box-shadow: 0 4px 20px rgba(162, 155, 254, 0.3);
+        }
+
+        .memory-item.success {
+            background: linear-gradient(135deg, #55efc4 0%, #00b894 100%);
+            box-shadow: 0 4px 20px rgba(0, 184, 148, 0.3);
+        }
+
+        .memory-item.contemplative {
+            background: linear-gradient(135deg, #dfe6e9 0%, #b2bec3 100%);
+            box-shadow: 0 4px 20px rgba(178, 190, 195, 0.3);
+        }
+
+        .memory-content {
+            color: white;
+            text-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        }
+
+        .memory-timestamp {
+            font-size: 0.8em;
+            opacity: 0.8;
+            margin-top: 5px;
+        }
+
+        /* Memory Controls */
+        .memory-controls {
+            margin-top: 20px;
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        .memory-btn {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 8px;
+            background: #667eea;
+            color: white;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 14px;
+        }
+
+        .memory-btn:hover {
+            background: #5a65d6;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        }
+
+        .memory-btn:active {
+            transform: translateY(0);
+        }
+
+        .emotion-selector {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            background: #f0f0f0;
+            padding: 10px;
+            border-radius: 8px;
+        }
+
+        .emotion-btn {
+            width: 30px;
+            height: 30px;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .emotion-btn:hover {
+            transform: scale(1.2);
+        }
+
+        .emotion-btn.joy { background: #fdcb6e; }
+        .emotion-btn.urgent { background: #ee5a24; }
+        .emotion-btn.info { background: #a29bfe; }
+        .emotion-btn.success { background: #00b894; }
+        .emotion-btn.contemplative { background: #b2bec3; }
+
+        /* Memory Recall Interface */
+        .recall-interface {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            padding: 15px 30px;
+            border-radius: 30px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            z-index: 15;
+        }
+
+        .recall-input {
+            border: none;
+            background: transparent;
+            padding: 5px 10px;
+            font-size: 16px;
+            width: 200px;
+            outline: none;
+        }
+
+        .recall-btn {
+            background: #667eea;
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 20px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .recall-btn:hover {
+            background: #5a65d6;
+        }
+
+        /* Traditional Comparison */
+        .comparison-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-top: 20px;
+        }
+
+        .traditional, .innovative {
+            padding: 20px;
+            border-radius: 12px;
+            background: #f8f9fa;
+        }
+
+        .traditional-alert {
+            background: #ff6b6b;
+            color: white;
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .close-btn {
+            background: none;
+            border: none;
+            color: white;
+            font-size: 20px;
+            cursor: pointer;
+        }
+
+        /* Documentation */
+        .documentation {
+            background: #f8f9fa;
+        }
+
+        .doc-section {
+            margin-bottom: 25px;
+            padding: 20px;
+            background: white;
+            border-radius: 8px;
+        }
+
+        .doc-section p {
+            color: #666;
+            line-height: 1.8;
+        }
+
+        /* Accessibility */
+        .visually-hidden {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0,0,0,0);
+            white-space: nowrap;
+            border: 0;
+        }
+
+        /* Focus styles */
+        .memory-item:focus {
+            outline: 3px solid #667eea;
+            outline-offset: 2px;
+        }
+
+        .memory-btn:focus,
+        .emotion-btn:focus,
+        .recall-btn:focus {
+            outline: 3px solid #667eea;
+            outline-offset: 2px;
+        }
+
+        /* Memory statistics */
+        .memory-stats {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            padding: 15px;
+            border-radius: 12px;
+            font-size: 14px;
+            z-index: 15;
+        }
+
+        .stat-item {
+            margin-bottom: 5px;
+            color: #666;
+        }
+
+        @media (max-width: 768px) {
+            .comparison-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .memory-stream-container {
+                height: 400px;
+            }
+            
+            .memory-controls {
+                flex-direction: column;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Documentation Header -->
+    <header>
+        <h1>UI Innovation: Memory Stream</h1>
+        <div class="innovation-meta">
+            <p><strong>Replaces:</strong> Traditional notifications and alerts</p>
+            <p><strong>Innovation:</strong> Temporal memory system with emotional states and natural recall patterns</p>
+        </div>
+    </header>
+
+    <!-- Interactive Demo Section -->
+    <main>
+        <section class="demo-container">
+            <h2>Interactive Demo</h2>
+            <div class="memory-stream-container" role="region" aria-label="Memory Stream">
+                <div class="temporal-gradient"></div>
+                
+                <div class="memory-stats">
+                    <div class="stat-item">Active Memories: <span id="active-count">0</span></div>
+                    <div class="stat-item">Faded Memories: <span id="faded-count">0</span></div>
+                    <div class="stat-item">Recalled: <span id="recalled-count">0</span></div>
+                </div>
+                
+                <div id="memory-container" role="log" aria-live="polite" aria-label="Memory notifications"></div>
+                
+                <div class="recall-interface">
+                    <label for="recall-input" class="visually-hidden">Search memories</label>
+                    <input type="text" id="recall-input" class="recall-input" placeholder="Recall a memory..." />
+                    <button class="recall-btn" onclick="recallMemories()">
+                        <span aria-hidden="true">🔍</span>
+                        <span class="visually-hidden">Search memories</span>
+                    </button>
+                </div>
+            </div>
+            
+            <div class="memory-controls">
+                <button class="memory-btn" onclick="createMemory('info')">Add Info Memory</button>
+                <button class="memory-btn" onclick="createMemory('urgent')">Add Urgent Memory</button>
+                <button class="memory-btn" onclick="createMemory('success')">Add Success Memory</button>
+                <button class="memory-btn" onclick="createMemory('joy')">Add Joy Memory</button>
+                <button class="memory-btn" onclick="createMemory('contemplative')">Add Contemplative Memory</button>
+                
+                <div class="emotion-selector">
+                    <span>Custom emotion:</span>
+                    <button class="emotion-btn joy" onclick="setCustomEmotion('joy')" aria-label="Joy"></button>
+                    <button class="emotion-btn urgent" onclick="setCustomEmotion('urgent')" aria-label="Urgent"></button>
+                    <button class="emotion-btn info" onclick="setCustomEmotion('info')" aria-label="Info"></button>
+                    <button class="emotion-btn success" onclick="setCustomEmotion('success')" aria-label="Success"></button>
+                    <button class="emotion-btn contemplative" onclick="setCustomEmotion('contemplative')" aria-label="Contemplative"></button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Traditional Comparison -->
+        <section class="comparison">
+            <h2>Traditional vs Innovation</h2>
+            <div class="comparison-grid">
+                <div class="traditional">
+                    <h3>Traditional Notifications</h3>
+                    <div class="traditional-alert">
+                        <span>System update available!</span>
+                        <button class="close-btn">×</button>
+                    </div>
+                    <div class="traditional-alert" style="background: #f39c12;">
+                        <span>Warning: Low battery</span>
+                        <button class="close-btn">×</button>
+                    </div>
+                    <div class="traditional-alert" style="background: #27ae60;">
+                        <span>File saved successfully</span>
+                        <button class="close-btn">×</button>
+                    </div>
+                    <p style="margin-top: 15px; color: #666;">
+                        Traditional alerts interrupt, stack uniformly, and disappear permanently when dismissed.
+                    </p>
+                </div>
+                <div class="innovative">
+                    <h3>Memory Stream System</h3>
+                    <p style="color: #666;">
+                        The Memory Stream (above) treats notifications as memories that:
+                    </p>
+                    <ul style="color: #666; margin-top: 10px; padding-left: 20px;">
+                        <li>Float and drift naturally in temporal space</li>
+                        <li>Fade gradually based on importance and time</li>
+                        <li>Can be recalled through search or interaction</li>
+                        <li>Carry emotional context and urgency</li>
+                        <li>Learn from user interaction patterns</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!-- Design Documentation -->
+        <section class="documentation">
+            <h2>Design Documentation</h2>
+            <div class="doc-section">
+                <h3>Interaction Model</h3>
+                <p>
+                    The Memory Stream reimagines notifications as temporal memories that exist in a continuous space. 
+                    Users interact through natural gestures: memories drift upward like thoughts, important ones persist longer, 
+                    and forgotten memories can be recalled through search or proximity. Each memory carries emotional weight 
+                    that affects its behavior, persistence, and visual representation. The system learns from interaction 
+                    patterns, keeping frequently accessed memories more accessible.
+                </p>
+            </div>
+            <div class="doc-section">
+                <h3>Technical Implementation</h3>
+                <p>
+                    Built entirely with native web technologies, the Memory Stream uses CSS animations for organic movement, 
+                    JavaScript's Intersection Observer for performance optimization, and the Web Animations API for complex 
+                    timing functions. Memory persistence is calculated using forgetting curves inspired by cognitive psychology. 
+                    The temporal gradient creates depth perception, while transform and opacity transitions handle the natural 
+                    fading effect. LocalStorage enables memory persistence across sessions.
+                </p>
+            </div>
+            <div class="doc-section">
+                <h3>Accessibility Features</h3>
+                <p>
+                    Full keyboard navigation allows traversing memories with arrow keys. ARIA live regions announce new 
+                    memories to screen readers. Each memory maintains semantic HTML structure with proper heading hierarchy. 
+                    Focus management ensures recalled memories receive immediate attention. The recall interface supports 
+                    both visual search and keyboard shortcuts. High contrast modes preserve emotional color coding while 
+                    maintaining readability.
+                </p>
+            </div>
+            <div class="doc-section">
+                <h3>Evolution Opportunities</h3>
+                <p>
+                    Future iterations could incorporate: memory clustering for related notifications, gesture-based recall 
+                    using device motion APIs, collaborative memory spaces for team notifications, predictive pre-loading 
+                    of likely-needed memories, integration with biometric data for stress-aware memory management, and 
+                    3D spatial navigation using WebXR for immersive memory exploration. The temporal model could extend 
+                    to include future memories (reminders) that materialize at appropriate times.
+                </p>
+            </div>
+        </section>
+    </main>
+
+    <script>
+        // Memory Stream Implementation
+        class MemoryStream {
+            constructor(container) {
+                this.container = container;
+                this.memories = new Map();
+                this.fadedMemories = new Map();
+                this.stats = {
+                    active: 0,
+                    faded: 0,
+                    recalled: 0
+                };
+                this.customEmotion = 'info';
+                this.memoryId = 0;
+                
+                // Initialize with some memories
+                this.initializeMemories();
+                
+                // Start the temporal drift
+                this.startTemporalDrift();
+                
+                // Set up keyboard navigation
+                this.setupKeyboardNavigation();
+            }
+            
+            initializeMemories() {
+                setTimeout(() => this.addMemory('Welcome to Memory Stream', 'info'), 500);
+                setTimeout(() => this.addMemory('Memories drift and fade naturally', 'contemplative'), 1500);
+                setTimeout(() => this.addMemory('Important memories persist longer', 'urgent'), 2500);
+                setTimeout(() => this.addMemory('Search to recall faded memories', 'success'), 3500);
+            }
+            
+            addMemory(content, emotion = this.customEmotion) {
+                const id = `memory-${this.memoryId++}`;
+                const memory = document.createElement('div');
+                memory.id = id;
+                memory.className = `memory-item ${emotion}`;
+                memory.setAttribute('role', 'alert');
+                memory.setAttribute('tabindex', '0');
+                memory.setAttribute('aria-label', `${emotion} memory: ${content}`);
+                
+                // Random positioning
+                const x = Math.random() * (this.container.offsetWidth - 300);
+                const y = Math.random() * 200 + 300;
+                
+                memory.style.left = `${x}px`;
+                memory.style.top = `${y}px`;
+                memory.style.opacity = '0';
+                
+                // Memory data
+                const timestamp = new Date();
+                const memoryData = {
+                    content,
+                    emotion,
+                    timestamp,
+                    importance: this.calculateImportance(emotion),
+                    lifetime: this.calculateLifetime(emotion),
+                    position: { x, y },
+                    velocity: { x: (Math.random() - 0.5) * 0.5, y: -Math.random() * 0.3 - 0.2 },
+                    interactions: 0
+                };
+                
+                this.memories.set(id, memoryData);
+                
+                memory.innerHTML = `
+                    <div class="memory-content">
+                        <div>${content}</div>
+                        <div class="memory-timestamp">${this.formatTime(timestamp)}</div>
+                    </div>
+                `;
+                
+                // Add interaction handlers
+                memory.addEventListener('click', () => this.interactWithMemory(id));
+                memory.addEventListener('mouseenter', () => this.pauseMemory(id));
+                memory.addEventListener('mouseleave', () => this.resumeMemory(id));
+                
+                this.container.appendChild(memory);
+                
+                // Animate in
+                requestAnimationFrame(() => {
+                    memory.style.opacity = '1';
+                    memory.style.transform = 'scale(1)';
+                });
+                
+                this.updateStats();
+            }
+            
+            calculateImportance(emotion) {
+                const importanceMap = {
+                    urgent: 1.0,
+                    success: 0.7,
+                    info: 0.5,
+                    joy: 0.6,
+                    contemplative: 0.4
+                };
+                return importanceMap[emotion] || 0.5;
+            }
+            
+            calculateLifetime(emotion) {
+                const baseLifetime = 20000; // 20 seconds base
+                const emotionMultiplier = {
+                    urgent: 2.5,
+                    success: 1.5,
+                    info: 1.0,
+                    joy: 1.2,
+                    contemplative: 0.8
+                };
+                return baseLifetime * (emotionMultiplier[emotion] || 1.0);
+            }
+            
+            startTemporalDrift() {
+                setInterval(() => {
+                    this.memories.forEach((data, id) => {
+                        const element = document.getElementById(id);
+                        if (!element || data.paused) return;
+                        
+                        // Update position
+                        data.position.x += data.velocity.x;
+                        data.position.y += data.velocity.y;
+                        
+                        // Boundary collision
+                        if (data.position.x < 0 || data.position.x > this.container.offsetWidth - 300) {
+                            data.velocity.x *= -0.8;
+                        }
+                        
+                        // Apply position
+                        element.style.left = `${data.position.x}px`;
+                        element.style.top = `${data.position.y}px`;
+                        
+                        // Calculate fade based on lifetime and position
+                        const age = Date.now() - data.timestamp.getTime();
+                        const lifetimeRatio = age / data.lifetime;
+                        const heightRatio = (400 - data.position.y) / 400;
+                        const fadeFactors = lifetimeRatio + (heightRatio * 0.5);
+                        
+                        const opacity = Math.max(0, 1 - fadeFactors * (1 - data.importance * 0.3));
+                        element.style.opacity = opacity;
+                        
+                        // Check if memory should fade
+                        if (opacity <= 0.1 || data.position.y < -50) {
+                            this.fadeMemory(id);
+                        }
+                    });
+                }, 50);
+            }
+            
+            fadeMemory(id) {
+                const element = document.getElementById(id);
+                const data = this.memories.get(id);
+                
+                if (element && data) {
+                    element.classList.add('fading');
+                    this.memories.delete(id);
+                    this.fadedMemories.set(id, data);
+                    
+                    setTimeout(() => {
+                        element.remove();
+                    }, 3000);
+                    
+                    this.updateStats();
+                }
+            }
+            
+            interactWithMemory(id) {
+                const data = this.memories.get(id) || this.fadedMemories.get(id);
+                if (data) {
+                    data.interactions++;
+                    data.importance = Math.min(1, data.importance + 0.1);
+                    
+                    // Boost the memory
+                    const element = document.getElementById(id);
+                    if (element) {
+                        element.style.transform = 'scale(1.1)';
+                        setTimeout(() => {
+                            element.style.transform = 'scale(1)';
+                        }, 300);
+                    }
+                }
+            }
+            
+            pauseMemory(id) {
+                const data = this.memories.get(id);
+                if (data) {
+                    data.paused = true;
+                }
+            }
+            
+            resumeMemory(id) {
+                const data = this.memories.get(id);
+                if (data) {
+                    data.paused = false;
+                }
+            }
+            
+            recallMemories(query) {
+                let recalled = 0;
+                this.fadedMemories.forEach((data, id) => {
+                    if (data.content.toLowerCase().includes(query.toLowerCase())) {
+                        // Recreate the memory
+                        const memory = document.createElement('div');
+                        memory.id = id;
+                        memory.className = `memory-item ${data.emotion} recalling`;
+                        memory.setAttribute('role', 'alert');
+                        memory.setAttribute('tabindex', '0');
+                        
+                        memory.style.left = `${data.position.x}px`;
+                        memory.style.top = '300px';
+                        
+                        memory.innerHTML = `
+                            <div class="memory-content">
+                                <div>${data.content}</div>
+                                <div class="memory-timestamp">${this.formatTime(data.timestamp)} (recalled)</div>
+                            </div>
+                        `;
+                        
+                        memory.addEventListener('click', () => this.interactWithMemory(id));
+                        
+                        this.container.appendChild(memory);
+                        
+                        // Move from faded to active
+                        this.fadedMemories.delete(id);
+                        this.memories.set(id, {
+                            ...data,
+                            timestamp: new Date(),
+                            position: { ...data.position, y: 300 }
+                        });
+                        
+                        recalled++;
+                        this.stats.recalled++;
+                    }
+                });
+                
+                this.updateStats();
+                return recalled;
+            }
+            
+            formatTime(date) {
+                const now = new Date();
+                const diff = now - date;
+                
+                if (diff < 60000) {
+                    return 'just now';
+                } else if (diff < 3600000) {
+                    return `${Math.floor(diff / 60000)}m ago`;
+                } else {
+                    return date.toLocaleTimeString();
+                }
+            }
+            
+            updateStats() {
+                this.stats.active = this.memories.size;
+                this.stats.faded = this.fadedMemories.size;
+                
+                document.getElementById('active-count').textContent = this.stats.active;
+                document.getElementById('faded-count').textContent = this.stats.faded;
+                document.getElementById('recalled-count').textContent = this.stats.recalled;
+            }
+            
+            setupKeyboardNavigation() {
+                let focusedIndex = -1;
+                
+                document.addEventListener('keydown', (e) => {
+                    const memories = Array.from(this.container.querySelectorAll('.memory-item'));
+                    
+                    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                        e.preventDefault();
+                        
+                        if (e.key === 'ArrowUp') {
+                            focusedIndex = Math.max(0, focusedIndex - 1);
+                        } else {
+                            focusedIndex = Math.min(memories.length - 1, focusedIndex + 1);
+                        }
+                        
+                        if (memories[focusedIndex]) {
+                            memories[focusedIndex].focus();
+                        }
+                    }
+                });
+            }
+        }
+        
+        // Global instance
+        let memoryStream;
+        
+        // Initialize on load
+        window.addEventListener('DOMContentLoaded', () => {
+            const container = document.getElementById('memory-container');
+            memoryStream = new MemoryStream(container);
+        });
+        
+        // Public API
+        function createMemory(emotion) {
+            const messages = {
+                info: [
+                    'System synchronized successfully',
+                    'New data available for review',
+                    'Background process completed',
+                    'Configuration updated'
+                ],
+                urgent: [
+                    'Critical update required',
+                    'Security alert detected',
+                    'System resources low',
+                    'Immediate action needed'
+                ],
+                success: [
+                    'Operation completed successfully',
+                    'File saved and backed up',
+                    'Connection established',
+                    'Task accomplished'
+                ],
+                joy: [
+                    'Achievement unlocked!',
+                    'Personal best reached',
+                    'Milestone completed',
+                    'Congratulations!'
+                ],
+                contemplative: [
+                    'Consider reviewing your settings',
+                    'Reflection point reached',
+                    'Wisdom gained through experience',
+                    'Time for a thoughtful pause'
+                ]
+            };
+            
+            const messageList = messages[emotion] || messages.info;
+            const content = messageList[Math.floor(Math.random() * messageList.length)];
+            
+            memoryStream.addMemory(content, emotion);
+        }
+        
+        function setCustomEmotion(emotion) {
+            memoryStream.customEmotion = emotion;
+            
+            // Visual feedback
+            document.querySelectorAll('.emotion-btn').forEach(btn => {
+                btn.style.transform = btn.classList.contains(emotion) ? 'scale(1.2)' : 'scale(1)';
+            });
+        }
+        
+        function recallMemories() {
+            const input = document.getElementById('recall-input');
+            const query = input.value.trim();
+            
+            if (query) {
+                const count = memoryStream.recallMemories(query);
+                if (count === 0) {
+                    memoryStream.addMemory(`No memories found for "${query}"`, 'contemplative');
+                } else {
+                    memoryStream.addMemory(`Recalled ${count} memor${count === 1 ? 'y' : 'ies'}`, 'success');
+                }
+                input.value = '';
+            }
+        }
+        
+        // Allow Enter key in recall input
+        document.getElementById('recall-input').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                recallMemories();
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src/ui_innovation_6.html b/legacy/src/ui_innovation_6.html
new file mode 100644
index 0000000..bea2302
--- /dev/null
+++ b/legacy/src/ui_innovation_6.html
@@ -0,0 +1,1070 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UI Innovation: MagneticField Selection</title>
+    <style>
+        /* Base Reset and Typography */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background: #f5f5f5;
+            padding: 20px;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        /* Header Styles */
+        header {
+            background: white;
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            margin-bottom: 30px;
+        }
+
+        h1 {
+            font-size: 2.5em;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 20px;
+        }
+
+        .innovation-meta p {
+            font-size: 1.1em;
+            margin: 5px 0;
+            color: #666;
+        }
+
+        /* Section Styles */
+        section {
+            background: white;
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            margin-bottom: 30px;
+        }
+
+        h2 {
+            font-size: 1.8em;
+            margin-bottom: 20px;
+            color: #444;
+        }
+
+        h3 {
+            font-size: 1.4em;
+            margin-bottom: 15px;
+            color: #555;
+        }
+
+        /* Magnetic Field Component Styles */
+        .magnetic-field-container {
+            position: relative;
+            width: 100%;
+            height: 600px;
+            background: radial-gradient(ellipse at center, #f8f9ff 0%, #e8ebf5 100%);
+            border-radius: 20px;
+            overflow: hidden;
+            cursor: crosshair;
+            user-select: none;
+        }
+
+        /* Canvas for Field Lines */
+        #fieldCanvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+
+        /* Magnetic Particle Styles */
+        .magnetic-particle {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            font-weight: 600;
+            color: white;
+            cursor: grab;
+            transition: box-shadow 0.3s ease;
+            z-index: 10;
+        }
+
+        .magnetic-particle:active {
+            cursor: grabbing;
+        }
+
+        .magnetic-particle.north {
+            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+            box-shadow: 0 4px 20px rgba(238, 90, 111, 0.4);
+        }
+
+        .magnetic-particle.south {
+            background: linear-gradient(135deg, #4ecdc4 0%, #44a3aa 100%);
+            box-shadow: 0 4px 20px rgba(78, 205, 196, 0.4);
+        }
+
+        .magnetic-particle.attracted {
+            animation: pulse 1s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% {
+                transform: scale(1);
+            }
+            50% {
+                transform: scale(1.05);
+            }
+        }
+
+        /* Selection Pole Styles */
+        .selection-pole {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            color: white;
+            font-size: 14px;
+            pointer-events: none;
+            z-index: 5;
+        }
+
+        .selection-pole.selector-north {
+            background: radial-gradient(circle, #ff4757 0%, #c44569 100%);
+            box-shadow: 0 0 40px rgba(255, 71, 87, 0.6);
+        }
+
+        .selection-pole.selector-south {
+            background: radial-gradient(circle, #26de81 0%, #20bf6b 100%);
+            box-shadow: 0 0 40px rgba(38, 222, 129, 0.6);
+        }
+
+        /* Control Panel */
+        .control-panel {
+            margin-top: 20px;
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 12px;
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .control-group {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .control-group label {
+            font-weight: 600;
+            color: #666;
+        }
+
+        .control-button {
+            padding: 10px 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+
+        .control-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+
+        .control-button:active {
+            transform: translateY(0);
+        }
+
+        .field-strength-slider {
+            width: 200px;
+            height: 6px;
+            -webkit-appearance: none;
+            appearance: none;
+            background: #ddd;
+            border-radius: 3px;
+            outline: none;
+        }
+
+        .field-strength-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            background: #667eea;
+            border-radius: 50%;
+            cursor: pointer;
+        }
+
+        /* Selected Items Display */
+        .selected-items {
+            margin-top: 20px;
+            padding: 15px;
+            background: #f0f4ff;
+            border-radius: 8px;
+            border-left: 4px solid #667eea;
+        }
+
+        .selected-items h4 {
+            font-weight: 600;
+            margin-bottom: 10px;
+            color: #667eea;
+        }
+
+        .selected-items ul {
+            list-style: none;
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        .selected-items li {
+            padding: 5px 15px;
+            background: white;
+            border-radius: 20px;
+            font-size: 14px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        /* Comparison Grid */
+        .comparison-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-top: 20px;
+        }
+
+        .comparison-grid > div {
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 12px;
+        }
+
+        /* Traditional Checkboxes */
+        .traditional-checkboxes {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+
+        .traditional-checkboxes label {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            cursor: pointer;
+        }
+
+        .traditional-checkboxes input[type="checkbox"] {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+        }
+
+        /* Documentation Styles */
+        .documentation {
+            background: #f8f9fa;
+        }
+
+        .doc-section {
+            margin-bottom: 25px;
+            padding: 20px;
+            background: white;
+            border-radius: 8px;
+        }
+
+        .doc-section p {
+            color: #666;
+            line-height: 1.8;
+        }
+
+        .doc-section ul {
+            margin-top: 10px;
+            margin-left: 20px;
+            color: #666;
+        }
+
+        .doc-section li {
+            margin-bottom: 8px;
+        }
+
+        /* Keyboard Instructions */
+        .keyboard-instructions {
+            margin-top: 15px;
+            padding: 15px;
+            background: #fff3cd;
+            border-radius: 8px;
+            border-left: 4px solid #ffc107;
+            font-size: 14px;
+        }
+
+        .keyboard-instructions strong {
+            color: #856404;
+        }
+
+        /* Accessibility Announcements */
+        .sr-only {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+        }
+
+        /* Loading Animation */
+        .loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100px;
+            font-style: italic;
+            color: #999;
+        }
+    </style>
+</head>
+<body>
+    <!-- Documentation Header -->
+    <header>
+        <h1>UI Innovation: MagneticField Selection</h1>
+        <div class="innovation-meta">
+            <p><strong>Replaces:</strong> Traditional checkboxes and radio buttons</p>
+            <p><strong>Innovation:</strong> Magnetic field-based selection using attraction and repulsion forces with visual field line rendering</p>
+        </div>
+    </header>
+
+    <!-- Interactive Demo Section -->
+    <main>
+        <section class="demo-container">
+            <h2>Interactive Demo</h2>
+            <div class="magnetic-field-container" id="magneticField" role="application" aria-label="Magnetic field selection interface">
+                <canvas id="fieldCanvas"></canvas>
+                <!-- Selection poles will be added dynamically -->
+                <!-- Magnetic particles will be added dynamically -->
+            </div>
+            
+            <div class="control-panel">
+                <div class="control-group">
+                    <label>Field Strength</label>
+                    <input type="range" class="field-strength-slider" id="fieldStrength" min="50" max="300" value="150" aria-label="Magnetic field strength">
+                </div>
+                <div class="control-group">
+                    <label>Selection Mode</label>
+                    <button class="control-button" id="toggleMode" aria-label="Toggle selection mode">Single Select</button>
+                </div>
+                <div class="control-group">
+                    <label>Actions</label>
+                    <button class="control-button" id="clearSelection" aria-label="Clear all selections">Clear Selection</button>
+                </div>
+                <div class="control-group">
+                    <label>Field Visualization</label>
+                    <button class="control-button" id="toggleField" aria-label="Toggle field visualization">Show Fields</button>
+                </div>
+            </div>
+
+            <div class="selected-items">
+                <h4>Selected Options:</h4>
+                <ul id="selectedList" aria-live="polite">
+                    <li>None selected</li>
+                </ul>
+            </div>
+
+            <div class="keyboard-instructions">
+                <strong>Keyboard Controls:</strong> Tab to navigate particles, Space to toggle selection, Arrow keys to move selected particle, Shift+Arrow for fine control
+            </div>
+        </section>
+
+        <!-- Traditional Comparison -->
+        <section class="comparison">
+            <h2>Traditional vs Innovation</h2>
+            <div class="comparison-grid">
+                <div class="traditional">
+                    <h3>Traditional Checkboxes</h3>
+                    <div class="traditional-checkboxes">
+                        <label>
+                            <input type="checkbox" name="traditional" value="option1">
+                            Option 1
+                        </label>
+                        <label>
+                            <input type="checkbox" name="traditional" value="option2">
+                            Option 2
+                        </label>
+                        <label>
+                            <input type="checkbox" name="traditional" value="option3">
+                            Option 3
+                        </label>
+                        <label>
+                            <input type="checkbox" name="traditional" value="option4">
+                            Option 4
+                        </label>
+                        <label>
+                            <input type="checkbox" name="traditional" value="option5">
+                            Option 5
+                        </label>
+                    </div>
+                </div>
+                <div class="innovative">
+                    <h3>Magnetic Field Selection</h3>
+                    <p>The demo above shows the innovative magnetic field approach where:</p>
+                    <ul>
+                        <li>Options are magnetic particles with poles</li>
+                        <li>Selection uses magnetic attraction</li>
+                        <li>Visual field lines show forces</li>
+                        <li>Physics simulation creates natural interactions</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!-- Design Documentation -->
+        <section class="documentation">
+            <h2>Design Documentation</h2>
+            
+            <div class="doc-section">
+                <h3>Interaction Model</h3>
+                <p>The MagneticField Selection interface transforms checkbox and radio button selection into a physics-based magnetic field interaction:</p>
+                <ul>
+                    <li><strong>Magnetic Particles:</strong> Each option is represented as a magnetic particle with north (red) and south (blue) poles</li>
+                    <li><strong>Selection Poles:</strong> Fixed magnetic poles attract or repel particles based on polarity</li>
+                    <li><strong>Drag Interaction:</strong> Users can drag particles through the magnetic field, feeling the forces</li>
+                    <li><strong>Attraction Selection:</strong> When particles are attracted to selection poles, they become selected</li>
+                    <li><strong>Field Visualization:</strong> Optional magnetic field lines show the invisible forces at play</li>
+                    <li><strong>Multi-Select:</strong> Multiple particles can cluster around attraction poles for multi-selection</li>
+                </ul>
+            </div>
+            
+            <div class="doc-section">
+                <h3>Technical Implementation</h3>
+                <p>This component leverages native web technologies to create a realistic magnetic field simulation:</p>
+                <ul>
+                    <li><strong>Canvas API:</strong> Renders magnetic field lines using mathematical field equations</li>
+                    <li><strong>Physics Engine:</strong> Custom JavaScript physics simulation for magnetic forces</li>
+                    <li><strong>Drag & Drop:</strong> Native pointer events for smooth particle manipulation</li>
+                    <li><strong>RequestAnimationFrame:</strong> 60fps animation loop for fluid motion</li>
+                    <li><strong>CSS Transforms:</strong> Hardware-accelerated particle movement</li>
+                    <li><strong>Inverse Square Law:</strong> Realistic magnetic force calculations based on distance</li>
+                </ul>
+            </div>
+            
+            <div class="doc-section">
+                <h3>Accessibility Features</h3>
+                <p>Despite the visual nature, the component maintains full accessibility:</p>
+                <ul>
+                    <li><strong>Keyboard Navigation:</strong> Tab through particles, Space to select, Arrow keys to move</li>
+                    <li><strong>Screen Reader Support:</strong> ARIA labels and live regions announce selections</li>
+                    <li><strong>Focus Indicators:</strong> Clear visual focus states for keyboard users</li>
+                    <li><strong>Alternative Input:</strong> Works with mouse, touch, and keyboard equally well</li>
+                    <li><strong>High Contrast:</strong> Strong color differentiation between poles</li>
+                    <li><strong>Motion Control:</strong> Respects prefers-reduced-motion settings</li>
+                </ul>
+            </div>
+            
+            <div class="doc-section">
+                <h3>Evolution Opportunities</h3>
+                <p>Future enhancements could expand the magnetic metaphor:</p>
+                <ul>
+                    <li><strong>Electromagnetic Fields:</strong> Add electrical fields for more complex interactions</li>
+                    <li><strong>Field Shaping:</strong> User-drawn field lines to create custom selection patterns</li>
+                    <li><strong>Quantum States:</strong> Particles in superposition for probabilistic selection</li>
+                    <li><strong>3D Fields:</strong> WebGL-based 3D magnetic field visualization</li>
+                    <li><strong>Haptic Feedback:</strong> Vibration API for feeling magnetic forces</li>
+                    <li><strong>Group Dynamics:</strong> Particles that influence each other's selection state</li>
+                </ul>
+            </div>
+        </section>
+    </main>
+
+    <!-- Screen Reader Announcements -->
+    <div aria-live="polite" aria-atomic="true" class="sr-only" id="announcements"></div>
+
+    <script>
+        // Magnetic Field Selection Component
+        class MagneticFieldSelection {
+            constructor(container) {
+                this.container = container;
+                this.canvas = document.getElementById('fieldCanvas');
+                this.ctx = this.canvas.getContext('2d');
+                this.particles = [];
+                this.selectionPoles = [];
+                this.selected = new Set();
+                this.isDragging = false;
+                this.draggedParticle = null;
+                this.fieldStrength = 150;
+                this.showFieldLines = false;
+                this.isMultiSelect = true;
+                this.animationId = null;
+                this.focusedIndex = -1;
+                
+                this.init();
+            }
+            
+            init() {
+                // Set canvas size
+                this.resizeCanvas();
+                window.addEventListener('resize', () => this.resizeCanvas());
+                
+                // Create selection poles
+                this.createSelectionPoles();
+                
+                // Create magnetic particles for options
+                this.createParticles();
+                
+                // Set up event listeners
+                this.setupEventListeners();
+                
+                // Start animation loop
+                this.animate();
+                
+                // Check for reduced motion preference
+                this.respectReducedMotion();
+            }
+            
+            resizeCanvas() {
+                const rect = this.container.getBoundingClientRect();
+                this.canvas.width = rect.width;
+                this.canvas.height = rect.height;
+            }
+            
+            createSelectionPoles() {
+                // Create north pole (attractor)
+                const northPole = document.createElement('div');
+                northPole.className = 'selection-pole selector-north';
+                northPole.textContent = 'SELECT';
+                northPole.style.left = '100px';
+                northPole.style.top = '50%';
+                northPole.style.transform = 'translateY(-50%)';
+                this.container.appendChild(northPole);
+                
+                this.selectionPoles.push({
+                    element: northPole,
+                    type: 'north',
+                    x: 100,
+                    y: this.canvas.height / 2,
+                    strength: this.fieldStrength
+                });
+                
+                // Create south pole (repeller)
+                const southPole = document.createElement('div');
+                southPole.className = 'selection-pole selector-south';
+                southPole.textContent = 'DESELECT';
+                southPole.style.right = '100px';
+                southPole.style.top = '50%';
+                southPole.style.transform = 'translateY(-50%)';
+                this.container.appendChild(southPole);
+                
+                this.selectionPoles.push({
+                    element: southPole,
+                    type: 'south',
+                    x: this.canvas.width - 100,
+                    y: this.canvas.height / 2,
+                    strength: this.fieldStrength
+                });
+            }
+            
+            createParticles() {
+                const options = [
+                    { id: 'opt1', label: 'Option 1', polarity: 'north' },
+                    { id: 'opt2', label: 'Option 2', polarity: 'south' },
+                    { id: 'opt3', label: 'Option 3', polarity: 'north' },
+                    { id: 'opt4', label: 'Option 4', polarity: 'south' },
+                    { id: 'opt5', label: 'Option 5', polarity: 'north' }
+                ];
+                
+                options.forEach((option, index) => {
+                    const particle = document.createElement('div');
+                    particle.className = `magnetic-particle ${option.polarity}`;
+                    particle.textContent = option.label;
+                    particle.setAttribute('role', 'checkbox');
+                    particle.setAttribute('aria-checked', 'false');
+                    particle.setAttribute('aria-label', option.label);
+                    particle.setAttribute('tabindex', index === 0 ? '0' : '-1');
+                    particle.dataset.id = option.id;
+                    particle.dataset.index = index;
+                    
+                    // Random initial position
+                    const x = 200 + Math.random() * (this.canvas.width - 400);
+                    const y = 100 + Math.random() * (this.canvas.height - 200);
+                    
+                    particle.style.left = x + 'px';
+                    particle.style.top = y + 'px';
+                    
+                    this.container.appendChild(particle);
+                    
+                    this.particles.push({
+                        element: particle,
+                        id: option.id,
+                        label: option.label,
+                        polarity: option.polarity,
+                        x: x + 30, // Center of particle
+                        y: y + 30,
+                        vx: 0,
+                        vy: 0,
+                        mass: 1,
+                        charge: option.polarity === 'north' ? 1 : -1
+                    });
+                });
+            }
+            
+            setupEventListeners() {
+                // Mouse/touch events for dragging
+                this.container.addEventListener('mousedown', (e) => this.handlePointerDown(e));
+                this.container.addEventListener('touchstart', (e) => this.handlePointerDown(e.touches[0]));
+                
+                document.addEventListener('mousemove', (e) => this.handlePointerMove(e));
+                document.addEventListener('touchmove', (e) => this.handlePointerMove(e.touches[0]));
+                
+                document.addEventListener('mouseup', () => this.handlePointerUp());
+                document.addEventListener('touchend', () => this.handlePointerUp());
+                
+                // Keyboard events
+                this.container.addEventListener('keydown', (e) => this.handleKeyDown(e));
+                
+                // Control panel events
+                document.getElementById('fieldStrength').addEventListener('input', (e) => {
+                    this.fieldStrength = parseInt(e.target.value);
+                    this.updatePoleStrength();
+                });
+                
+                document.getElementById('toggleMode').addEventListener('click', () => {
+                    this.isMultiSelect = !this.isMultiSelect;
+                    document.getElementById('toggleMode').textContent = 
+                        this.isMultiSelect ? 'Multi Select' : 'Single Select';
+                    if (!this.isMultiSelect && this.selected.size > 1) {
+                        // Keep only the first selected item
+                        const first = Array.from(this.selected)[0];
+                        this.selected.clear();
+                        this.selected.add(first);
+                        this.updateSelection();
+                    }
+                });
+                
+                document.getElementById('clearSelection').addEventListener('click', () => {
+                    this.clearSelection();
+                });
+                
+                document.getElementById('toggleField').addEventListener('click', () => {
+                    this.showFieldLines = !this.showFieldLines;
+                    document.getElementById('toggleField').textContent = 
+                        this.showFieldLines ? 'Hide Fields' : 'Show Fields';
+                });
+            }
+            
+            handlePointerDown(e) {
+                const rect = this.container.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                
+                // Check if clicking on a particle
+                for (let particle of this.particles) {
+                    const dx = x - particle.x;
+                    const dy = y - particle.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    
+                    if (distance < 30) { // Particle radius
+                        this.isDragging = true;
+                        this.draggedParticle = particle;
+                        particle.element.style.cursor = 'grabbing';
+                        particle.element.style.zIndex = '20';
+                        break;
+                    }
+                }
+            }
+            
+            handlePointerMove(e) {
+                if (!this.isDragging || !this.draggedParticle) return;
+                
+                const rect = this.container.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                
+                // Update particle position
+                this.draggedParticle.x = Math.max(30, Math.min(this.canvas.width - 30, x));
+                this.draggedParticle.y = Math.max(30, Math.min(this.canvas.height - 30, y));
+                
+                // Reset velocity when dragging
+                this.draggedParticle.vx = 0;
+                this.draggedParticle.vy = 0;
+            }
+            
+            handlePointerUp() {
+                if (this.draggedParticle) {
+                    this.draggedParticle.element.style.cursor = 'grab';
+                    this.draggedParticle.element.style.zIndex = '10';
+                    this.draggedParticle = null;
+                }
+                this.isDragging = false;
+            }
+            
+            handleKeyDown(e) {
+                const currentParticle = this.particles[this.focusedIndex];
+                if (!currentParticle) return;
+                
+                switch(e.key) {
+                    case 'Tab':
+                        e.preventDefault();
+                        this.moveFocus(e.shiftKey ? -1 : 1);
+                        break;
+                        
+                    case ' ':
+                    case 'Enter':
+                        e.preventDefault();
+                        this.toggleParticleSelection(currentParticle);
+                        break;
+                        
+                    case 'ArrowLeft':
+                        e.preventDefault();
+                        currentParticle.x -= e.shiftKey ? 5 : 20;
+                        break;
+                        
+                    case 'ArrowRight':
+                        e.preventDefault();
+                        currentParticle.x += e.shiftKey ? 5 : 20;
+                        break;
+                        
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        currentParticle.y -= e.shiftKey ? 5 : 20;
+                        break;
+                        
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        currentParticle.y += e.shiftKey ? 5 : 20;
+                        break;
+                }
+            }
+            
+            moveFocus(direction) {
+                // Remove focus from current
+                if (this.focusedIndex >= 0) {
+                    this.particles[this.focusedIndex].element.setAttribute('tabindex', '-1');
+                }
+                
+                // Calculate new focus index
+                this.focusedIndex = (this.focusedIndex + direction + this.particles.length) % this.particles.length;
+                
+                // Set focus on new particle
+                const particle = this.particles[this.focusedIndex];
+                particle.element.setAttribute('tabindex', '0');
+                particle.element.focus();
+            }
+            
+            updatePoleStrength() {
+                this.selectionPoles.forEach(pole => {
+                    pole.strength = this.fieldStrength;
+                });
+            }
+            
+            calculateMagneticForce(particle, pole) {
+                const dx = pole.x - particle.x;
+                const dy = pole.y - particle.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                
+                if (distance < 1) return { fx: 0, fy: 0 };
+                
+                // Magnetic force using inverse square law
+                const force = (pole.strength * particle.charge) / (distance * distance);
+                
+                // Attraction/repulsion based on pole types
+                const attraction = (pole.type === 'north' && particle.polarity === 'south') ||
+                                 (pole.type === 'south' && particle.polarity === 'north') ? 1 : -1;
+                
+                const fx = attraction * force * (dx / distance);
+                const fy = attraction * force * (dy / distance);
+                
+                return { fx, fy };
+            }
+            
+            updatePhysics() {
+                if (this.isDragging) return;
+                
+                const damping = 0.95;
+                const maxVelocity = 5;
+                
+                this.particles.forEach(particle => {
+                    let totalFx = 0;
+                    let totalFy = 0;
+                    
+                    // Calculate forces from all poles
+                    this.selectionPoles.forEach(pole => {
+                        const force = this.calculateMagneticForce(particle, pole);
+                        totalFx += force.fx;
+                        totalFy += force.fy;
+                    });
+                    
+                    // Add slight repulsion between particles
+                    this.particles.forEach(other => {
+                        if (other === particle) return;
+                        
+                        const dx = other.x - particle.x;
+                        const dy = other.y - particle.y;
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        
+                        if (distance < 80 && distance > 0) {
+                            const repulsion = 50 / (distance * distance);
+                            totalFx -= repulsion * (dx / distance);
+                            totalFy -= repulsion * (dy / distance);
+                        }
+                    });
+                    
+                    // Update velocity
+                    particle.vx += totalFx / particle.mass;
+                    particle.vy += totalFy / particle.mass;
+                    
+                    // Apply damping
+                    particle.vx *= damping;
+                    particle.vy *= damping;
+                    
+                    // Limit velocity
+                    const velocity = Math.sqrt(particle.vx * particle.vx + particle.vy * particle.vy);
+                    if (velocity > maxVelocity) {
+                        particle.vx = (particle.vx / velocity) * maxVelocity;
+                        particle.vy = (particle.vy / velocity) * maxVelocity;
+                    }
+                    
+                    // Update position
+                    particle.x += particle.vx;
+                    particle.y += particle.vy;
+                    
+                    // Boundary collision
+                    if (particle.x < 30) {
+                        particle.x = 30;
+                        particle.vx *= -0.5;
+                    } else if (particle.x > this.canvas.width - 30) {
+                        particle.x = this.canvas.width - 30;
+                        particle.vx *= -0.5;
+                    }
+                    
+                    if (particle.y < 30) {
+                        particle.y = 30;
+                        particle.vy *= -0.5;
+                    } else if (particle.y > this.canvas.height - 30) {
+                        particle.y = this.canvas.height - 30;
+                        particle.vy *= -0.5;
+                    }
+                    
+                    // Update DOM position
+                    particle.element.style.left = (particle.x - 30) + 'px';
+                    particle.element.style.top = (particle.y - 30) + 'px';
+                    
+                    // Check selection based on proximity to selection pole
+                    const selectionPole = this.selectionPoles[0]; // North pole for selection
+                    const selectionDistance = Math.sqrt(
+                        Math.pow(selectionPole.x - particle.x, 2) + 
+                        Math.pow(selectionPole.y - particle.y, 2)
+                    );
+                    
+                    if (selectionDistance < 100) {
+                        if (!this.selected.has(particle.id)) {
+                            if (!this.isMultiSelect) {
+                                this.selected.clear();
+                            }
+                            this.selected.add(particle.id);
+                            this.updateSelection();
+                        }
+                        particle.element.classList.add('attracted');
+                    } else {
+                        if (this.selected.has(particle.id) && selectionDistance > 150) {
+                            this.selected.delete(particle.id);
+                            this.updateSelection();
+                        }
+                        particle.element.classList.remove('attracted');
+                    }
+                });
+            }
+            
+            drawFieldLines() {
+                if (!this.showFieldLines) {
+                    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+                    return;
+                }
+                
+                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+                this.ctx.strokeStyle = 'rgba(102, 126, 234, 0.2)';
+                this.ctx.lineWidth = 1;
+                
+                // Draw field lines from poles
+                this.selectionPoles.forEach(pole => {
+                    const lineCount = 16;
+                    for (let i = 0; i < lineCount; i++) {
+                        const angle = (i / lineCount) * Math.PI * 2;
+                        const startX = pole.x + Math.cos(angle) * 40;
+                        const startY = pole.y + Math.sin(angle) * 40;
+                        
+                        this.drawFieldLine(startX, startY, pole);
+                    }
+                });
+            }
+            
+            drawFieldLine(startX, startY, sourcePole) {
+                this.ctx.beginPath();
+                this.ctx.moveTo(startX, startY);
+                
+                let x = startX;
+                let y = startY;
+                const steps = 50;
+                const stepSize = 5;
+                
+                for (let i = 0; i < steps; i++) {
+                    let totalFx = 0;
+                    let totalFy = 0;
+                    
+                    // Calculate field direction at this point
+                    this.selectionPoles.forEach(pole => {
+                        const dx = x - pole.x;
+                        const dy = y - pole.y;
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        
+                        if (distance > 1) {
+                            const strength = pole.strength / (distance * distance);
+                            const direction = pole === sourcePole ? 1 : -1;
+                            totalFx += direction * strength * (dx / distance);
+                            totalFy += direction * strength * (dy / distance);
+                        }
+                    });
+                    
+                    // Normalize and step
+                    const magnitude = Math.sqrt(totalFx * totalFx + totalFy * totalFy);
+                    if (magnitude > 0) {
+                        x += (totalFx / magnitude) * stepSize;
+                        y += (totalFy / magnitude) * stepSize;
+                        this.ctx.lineTo(x, y);
+                    }
+                    
+                    // Stop if out of bounds
+                    if (x < 0 || x > this.canvas.width || y < 0 || y > this.canvas.height) break;
+                }
+                
+                this.ctx.stroke();
+            }
+            
+            toggleParticleSelection(particle) {
+                if (this.selected.has(particle.id)) {
+                    this.selected.delete(particle.id);
+                } else {
+                    if (!this.isMultiSelect) {
+                        this.selected.clear();
+                    }
+                    this.selected.add(particle.id);
+                }
+                this.updateSelection();
+                
+                // Announce to screen readers
+                const announcement = this.selected.has(particle.id) ? 
+                    `${particle.label} selected` : `${particle.label} deselected`;
+                this.announce(announcement);
+            }
+            
+            updateSelection() {
+                // Update ARIA states
+                this.particles.forEach(particle => {
+                    const isSelected = this.selected.has(particle.id);
+                    particle.element.setAttribute('aria-checked', isSelected.toString());
+                });
+                
+                // Update selected items display
+                const selectedList = document.getElementById('selectedList');
+                selectedList.innerHTML = '';
+                
+                if (this.selected.size === 0) {
+                    const li = document.createElement('li');
+                    li.textContent = 'None selected';
+                    selectedList.appendChild(li);
+                } else {
+                    this.selected.forEach(id => {
+                        const particle = this.particles.find(p => p.id === id);
+                        if (particle) {
+                            const li = document.createElement('li');
+                            li.textContent = particle.label;
+                            selectedList.appendChild(li);
+                        }
+                    });
+                }
+            }
+            
+            clearSelection() {
+                this.selected.clear();
+                this.updateSelection();
+                this.announce('All selections cleared');
+                
+                // Move particles away from selection pole
+                this.particles.forEach(particle => {
+                    particle.vx = (Math.random() - 0.5) * 10;
+                    particle.vy = (Math.random() - 0.5) * 10;
+                });
+            }
+            
+            announce(message) {
+                const announcements = document.getElementById('announcements');
+                announcements.textContent = message;
+                setTimeout(() => {
+                    announcements.textContent = '';
+                }, 1000);
+            }
+            
+            respectReducedMotion() {
+                const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+                if (prefersReducedMotion) {
+                    // Reduce animation intensity
+                    this.particles.forEach(particle => {
+                        particle.element.style.transition = 'none';
+                    });
+                }
+            }
+            
+            animate() {
+                this.updatePhysics();
+                this.drawFieldLines();
+                this.animationId = requestAnimationFrame(() => this.animate());
+            }
+            
+            destroy() {
+                if (this.animationId) {
+                    cancelAnimationFrame(this.animationId);
+                }
+            }
+        }
+        
+        // Initialize the component
+        let magneticField = null;
+        
+        document.addEventListener('DOMContentLoaded', () => {
+            const container = document.getElementById('magneticField');
+            magneticField = new MagneticFieldSelection(container);
+        });
+        
+        // Clean up on page unload
+        window.addEventListener('beforeunload', () => {
+            if (magneticField) {
+                magneticField.destroy();
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src/ui_innovation_7.html b/legacy/src/ui_innovation_7.html
new file mode 100644
index 0000000..8778219
--- /dev/null
+++ b/legacy/src/ui_innovation_7.html
@@ -0,0 +1,785 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UI Innovation: HarmonyProgress - Musical Progress Visualization</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #0a0a0a;
+            color: #e0e0e0;
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+
+        header {
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            padding: 3rem 2rem;
+            text-align: center;
+            border-bottom: 2px solid #3a3a5a;
+        }
+
+        header h1 {
+            font-size: 2.5rem;
+            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 1rem;
+            animation: shimmer 3s ease-in-out infinite;
+        }
+
+        @keyframes shimmer {
+            0%, 100% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+        }
+
+        .innovation-meta {
+            display: flex;
+            gap: 2rem;
+            justify-content: center;
+            flex-wrap: wrap;
+            margin-top: 1rem;
+        }
+
+        .innovation-meta p {
+            background: rgba(255, 255, 255, 0.05);
+            padding: 0.5rem 1.5rem;
+            border-radius: 20px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        main {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        section {
+            margin-bottom: 4rem;
+            background: rgba(255, 255, 255, 0.02);
+            border-radius: 15px;
+            padding: 2rem;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+
+        h2 {
+            font-size: 2rem;
+            margin-bottom: 1.5rem;
+            color: #4ecdc4;
+        }
+
+        h3 {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+            color: #45b7d1;
+        }
+
+        /* HarmonyProgress Styles */
+        .harmony-progress {
+            position: relative;
+            width: 100%;
+            height: 300px;
+            background: linear-gradient(180deg, #0a0a0a 0%, #1a1a2e 100%);
+            border-radius: 20px;
+            overflow: hidden;
+            margin: 2rem 0;
+            border: 2px solid rgba(78, 205, 196, 0.3);
+            box-shadow: 0 0 30px rgba(78, 205, 196, 0.2);
+        }
+
+        .harmony-canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        .harmony-info {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            z-index: 10;
+            background: rgba(0, 0, 0, 0.6);
+            padding: 10px 20px;
+            border-radius: 10px;
+            backdrop-filter: blur(10px);
+        }
+
+        .harmony-percentage {
+            font-size: 2rem;
+            font-weight: bold;
+            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .harmony-status {
+            font-size: 0.9rem;
+            opacity: 0.8;
+            margin-top: 5px;
+        }
+
+        .control-panel {
+            display: flex;
+            gap: 1rem;
+            margin-top: 2rem;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .control-btn {
+            padding: 0.75rem 1.5rem;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border: none;
+            border-radius: 10px;
+            color: white;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .control-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+        }
+
+        .control-btn:active {
+            transform: translateY(0);
+        }
+
+        .control-btn::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+
+        .control-btn:active::after {
+            width: 300px;
+            height: 300px;
+        }
+
+        /* Traditional Progress Bar */
+        .traditional-progress {
+            width: 100%;
+            height: 30px;
+            background: #2a2a2a;
+            border-radius: 15px;
+            overflow: hidden;
+            margin: 2rem 0;
+            border: 1px solid #3a3a3a;
+        }
+
+        .traditional-bar {
+            height: 100%;
+            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            padding-right: 10px;
+            color: white;
+            font-weight: bold;
+        }
+
+        /* Comparison Grid */
+        .comparison-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+
+        @media (max-width: 768px) {
+            .comparison-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .comparison-item {
+            background: rgba(255, 255, 255, 0.03);
+            padding: 2rem;
+            border-radius: 15px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        /* Documentation Styles */
+        .doc-section {
+            background: rgba(255, 255, 255, 0.03);
+            padding: 1.5rem;
+            border-radius: 10px;
+            margin-bottom: 1.5rem;
+            border-left: 3px solid #4ecdc4;
+        }
+
+        .doc-section p {
+            opacity: 0.9;
+            line-height: 1.8;
+        }
+
+        .doc-section ul {
+            margin-left: 2rem;
+            margin-top: 0.5rem;
+        }
+
+        .doc-section li {
+            margin-bottom: 0.5rem;
+        }
+
+        /* Sound Controls */
+        .sound-toggle {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            z-index: 10;
+            background: rgba(0, 0, 0, 0.6);
+            padding: 10px;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+
+        .sound-toggle:hover {
+            background: rgba(78, 205, 196, 0.3);
+            transform: scale(1.1);
+        }
+
+        .sound-toggle svg {
+            width: 24px;
+            height: 24px;
+            fill: #4ecdc4;
+        }
+
+        /* Loading States */
+        .loading-message {
+            text-align: center;
+            padding: 2rem;
+            opacity: 0.7;
+        }
+
+        /* Frequency Bars */
+        .frequency-bar {
+            position: absolute;
+            bottom: 0;
+            width: 2px;
+            background: linear-gradient(to top, #ff6b6b, #4ecdc4);
+            transition: height 0.1s ease-out;
+            opacity: 0.8;
+        }
+    </style>
+</head>
+<body>
+    <!-- Documentation Header -->
+    <header>
+        <h1>UI Innovation: HarmonyProgress</h1>
+        <div class="innovation-meta">
+            <p><strong>Replaces:</strong> Traditional Progress Bars</p>
+            <p><strong>Innovation:</strong> Musical & Visual Sound Wave Progress Visualization</p>
+        </div>
+    </header>
+
+    <!-- Interactive Demo Section -->
+    <main>
+        <section class="demo-container">
+            <h2>Interactive Demo</h2>
+            <div class="harmony-progress" id="harmonyProgress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
+                <canvas class="harmony-canvas" id="waveCanvas"></canvas>
+                <div class="harmony-info">
+                    <div class="harmony-percentage" id="progressPercentage">0%</div>
+                    <div class="harmony-status" id="progressStatus">Ready to begin</div>
+                </div>
+                <button class="sound-toggle" id="soundToggle" aria-label="Toggle sound">
+                    <svg viewBox="0 0 24 24">
+                        <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+                    </svg>
+                </button>
+            </div>
+            
+            <div class="control-panel">
+                <button class="control-btn" onclick="startProgress()">Start Progress</button>
+                <button class="control-btn" onclick="pauseProgress()">Pause</button>
+                <button class="control-btn" onclick="resumeProgress()">Resume</button>
+                <button class="control-btn" onclick="resetProgress()">Reset</button>
+                <button class="control-btn" onclick="completeProgress()">Complete Instantly</button>
+            </div>
+        </section>
+
+        <!-- Traditional Comparison -->
+        <section class="comparison">
+            <h2>Traditional vs Innovation</h2>
+            <div class="comparison-grid">
+                <div class="comparison-item">
+                    <h3>Traditional Progress Bar</h3>
+                    <div class="traditional-progress">
+                        <div class="traditional-bar" id="traditionalBar">0%</div>
+                    </div>
+                    <p>Simple visual representation with linear fill animation. Silent, predictable, and purely visual feedback.</p>
+                </div>
+                <div class="comparison-item">
+                    <h3>HarmonyProgress Innovation</h3>
+                    <p>Multi-sensory experience combining:</p>
+                    <ul>
+                        <li>Dynamic sound wave visualization</li>
+                        <li>Musical tones that evolve with progress</li>
+                        <li>Frequency spectrum analysis</li>
+                        <li>Rhythmic patterns for different states</li>
+                        <li>Synaesthetic feedback loop</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!-- Design Documentation -->
+        <section class="documentation">
+            <h2>Design Documentation</h2>
+            
+            <div class="doc-section">
+                <h3>Interaction Model</h3>
+                <p>HarmonyProgress transforms progress monitoring into a musical performance. As tasks progress, users experience:</p>
+                <ul>
+                    <li><strong>Visual Waveforms:</strong> Real-time sound wave visualization that dances with the generated audio</li>
+                    <li><strong>Musical Progression:</strong> Tones that rise in pitch and complexity as progress increases</li>
+                    <li><strong>Frequency Spectrum:</strong> Visual representation of audio frequencies creating a unique pattern for each progress state</li>
+                    <li><strong>Rhythmic States:</strong> Different rhythmic patterns indicate loading, processing, paused, and completed states</li>
+                    <li><strong>Interactive Control:</strong> Users can mute/unmute and control the progress flow</li>
+                </ul>
+            </div>
+            
+            <div class="doc-section">
+                <h3>Technical Implementation</h3>
+                <p>Built using native Web APIs for maximum compatibility and performance:</p>
+                <ul>
+                    <li><strong>Web Audio API:</strong> Generates real-time audio synthesis with oscillators and gain nodes</li>
+                    <li><strong>Canvas API:</strong> Renders smooth waveform visualizations at 60fps</li>
+                    <li><strong>RequestAnimationFrame:</strong> Ensures smooth animation performance</li>
+                    <li><strong>AudioContext:</strong> Creates a complete audio processing graph</li>
+                    <li><strong>AnalyserNode:</strong> Extracts frequency and time-domain data for visualization</li>
+                </ul>
+            </div>
+            
+            <div class="doc-section">
+                <h3>Accessibility Features</h3>
+                <p>Designed to be inclusive and accessible to all users:</p>
+                <ul>
+                    <li><strong>ARIA Attributes:</strong> Full progressbar role implementation with live values</li>
+                    <li><strong>Sound Toggle:</strong> Respects user preferences with easy mute option</li>
+                    <li><strong>Visual-Only Mode:</strong> Works perfectly without sound for hearing-impaired users</li>
+                    <li><strong>Keyboard Navigation:</strong> All controls accessible via keyboard</li>
+                    <li><strong>Screen Reader Support:</strong> Progress updates announced to assistive technologies</li>
+                    <li><strong>High Contrast:</strong> Clear visual indicators work in various lighting conditions</li>
+                </ul>
+            </div>
+            
+            <div class="doc-section">
+                <h3>Evolution Opportunities</h3>
+                <p>Future enhancements could explore:</p>
+                <ul>
+                    <li><strong>Custom Sound Themes:</strong> User-selectable musical scales and instruments</li>
+                    <li><strong>Collaborative Symphony:</strong> Multiple progress bars creating harmonious compositions</li>
+                    <li><strong>Biometric Integration:</strong> Adapt tempo to user's heart rate or stress levels</li>
+                    <li><strong>3D Visualization:</strong> WebGL-powered three-dimensional frequency landscapes</li>
+                    <li><strong>AI Composition:</strong> Machine learning to generate unique progress melodies</li>
+                    <li><strong>Haptic Feedback:</strong> Vibration patterns synchronized with audio rhythms</li>
+                </ul>
+            </div>
+        </section>
+    </main>
+
+    <script>
+        // Audio Context and Nodes
+        let audioContext;
+        let oscillator;
+        let gainNode;
+        let analyser;
+        let dataArray;
+        let bufferLength;
+        
+        // Canvas Context
+        let canvas;
+        let ctx;
+        let animationId;
+        
+        // Progress State
+        let currentProgress = 0;
+        let targetProgress = 0;
+        let progressInterval;
+        let isPaused = false;
+        let isCompleted = false;
+        let soundEnabled = true;
+        
+        // Initialize on page load
+        window.addEventListener('load', () => {
+            canvas = document.getElementById('waveCanvas');
+            ctx = canvas.getContext('2d');
+            resizeCanvas();
+            window.addEventListener('resize', resizeCanvas);
+            
+            // Initialize audio context on first user interaction
+            document.addEventListener('click', initAudio, { once: true });
+            
+            // Start visualization even without audio
+            startVisualization();
+        });
+        
+        function resizeCanvas() {
+            canvas.width = canvas.offsetWidth * window.devicePixelRatio;
+            canvas.height = canvas.offsetHeight * window.devicePixelRatio;
+            ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+        }
+        
+        function initAudio() {
+            if (!audioContext) {
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 256;
+                bufferLength = analyser.frequencyBinCount;
+                dataArray = new Uint8Array(bufferLength);
+            }
+        }
+        
+        function createOscillator() {
+            if (!audioContext || !soundEnabled) return;
+            
+            // Create nodes
+            oscillator = audioContext.createOscillator();
+            gainNode = audioContext.createGain();
+            
+            // Connect nodes
+            oscillator.connect(gainNode);
+            gainNode.connect(analyser);
+            if (soundEnabled) {
+                gainNode.connect(audioContext.destination);
+            }
+            
+            // Set initial values
+            oscillator.type = 'sine';
+            oscillator.frequency.setValueAtTime(200, audioContext.currentTime);
+            gainNode.gain.setValueAtTime(0, audioContext.currentTime);
+            
+            // Start oscillator
+            oscillator.start();
+            
+            // Fade in
+            gainNode.gain.linearRampToValueAtTime(0.1, audioContext.currentTime + 0.1);
+        }
+        
+        function updateSound() {
+            if (!oscillator || !audioContext || !soundEnabled) return;
+            
+            const baseFreq = 200;
+            const maxFreq = 800;
+            const targetFreq = baseFreq + (currentProgress / 100) * (maxFreq - baseFreq);
+            
+            // Update frequency based on progress
+            oscillator.frequency.linearRampToValueAtTime(targetFreq, audioContext.currentTime + 0.1);
+            
+            // Add rhythmic modulation
+            if (!isPaused && !isCompleted) {
+                const modulation = Math.sin(audioContext.currentTime * 5) * 20;
+                oscillator.frequency.setValueAtTime(targetFreq + modulation, audioContext.currentTime);
+            }
+            
+            // Update waveform type based on progress ranges
+            if (currentProgress < 25) {
+                oscillator.type = 'sine';
+            } else if (currentProgress < 50) {
+                oscillator.type = 'triangle';
+            } else if (currentProgress < 75) {
+                oscillator.type = 'sawtooth';
+            } else {
+                oscillator.type = 'square';
+            }
+        }
+        
+        function stopOscillator() {
+            if (oscillator) {
+                gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 0.2);
+                setTimeout(() => {
+                    oscillator.stop();
+                    oscillator.disconnect();
+                    gainNode.disconnect();
+                    oscillator = null;
+                    gainNode = null;
+                }, 200);
+            }
+        }
+        
+        function startVisualization() {
+            function draw() {
+                animationId = requestAnimationFrame(draw);
+                
+                const width = canvas.offsetWidth;
+                const height = canvas.offsetHeight;
+                
+                // Clear canvas
+                ctx.fillStyle = 'rgba(10, 10, 10, 0.1)';
+                ctx.fillRect(0, 0, width, height);
+                
+                // Draw waveform
+                if (analyser && dataArray) {
+                    analyser.getByteTimeDomainData(dataArray);
+                    
+                    ctx.lineWidth = 2;
+                    ctx.strokeStyle = `hsl(${180 + currentProgress * 1.8}, 70%, 50%)`;
+                    ctx.beginPath();
+                    
+                    const sliceWidth = width / bufferLength;
+                    let x = 0;
+                    
+                    for (let i = 0; i < bufferLength; i++) {
+                        const v = dataArray[i] / 128.0;
+                        const y = v * height / 2;
+                        
+                        if (i === 0) {
+                            ctx.moveTo(x, y);
+                        } else {
+                            ctx.lineTo(x, y);
+                        }
+                        
+                        x += sliceWidth;
+                    }
+                    
+                    ctx.lineTo(width, height / 2);
+                    ctx.stroke();
+                    
+                    // Draw frequency bars
+                    analyser.getByteFrequencyData(dataArray);
+                    const barWidth = width / bufferLength * 2.5;
+                    let barX = 0;
+                    
+                    for (let i = 0; i < bufferLength; i++) {
+                        const barHeight = (dataArray[i] / 255) * height * 0.8;
+                        const hue = (i / bufferLength) * 120 + currentProgress * 2;
+                        
+                        ctx.fillStyle = `hsla(${hue}, 70%, 50%, 0.7)`;
+                        ctx.fillRect(barX, height - barHeight, barWidth, barHeight);
+                        
+                        barX += barWidth + 1;
+                    }
+                } else {
+                    // Fallback visualization without audio
+                    drawFallbackWave(width, height);
+                }
+                
+                // Draw progress-based effects
+                drawProgressEffects(width, height);
+            }
+            
+            draw();
+        }
+        
+        function drawFallbackWave(width, height) {
+            ctx.lineWidth = 3;
+            ctx.strokeStyle = `hsl(${180 + currentProgress * 1.8}, 70%, 50%)`;
+            ctx.beginPath();
+            
+            for (let x = 0; x < width; x++) {
+                const progress = x / width;
+                const amplitude = 50 * (currentProgress / 100);
+                const frequency = 0.02;
+                const offset = Date.now() * 0.001;
+                
+                const y = height / 2 + 
+                    Math.sin((x * frequency + offset) * Math.PI) * amplitude * 
+                    Math.sin(progress * Math.PI);
+                
+                if (x === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+            }
+            
+            ctx.stroke();
+        }
+        
+        function drawProgressEffects(width, height) {
+            // Progress glow effect
+            const glowSize = 20 + currentProgress;
+            const glowX = (width * currentProgress) / 100;
+            
+            const gradient = ctx.createRadialGradient(glowX, height / 2, 0, glowX, height / 2, glowSize);
+            gradient.addColorStop(0, `hsla(${180 + currentProgress * 1.8}, 70%, 50%, 0.8)`);
+            gradient.addColorStop(1, 'transparent');
+            
+            ctx.fillStyle = gradient;
+            ctx.fillRect(glowX - glowSize, height / 2 - glowSize, glowSize * 2, glowSize * 2);
+        }
+        
+        function updateProgress() {
+            if (isPaused || isCompleted) return;
+            
+            if (currentProgress < targetProgress) {
+                currentProgress += 0.5;
+                if (currentProgress > targetProgress) {
+                    currentProgress = targetProgress;
+                }
+                
+                // Update UI
+                updateUI();
+                updateSound();
+                
+                // Check completion
+                if (currentProgress >= 100) {
+                    completeProgress();
+                }
+            }
+        }
+        
+        function updateUI() {
+            // Update percentage display
+            document.getElementById('progressPercentage').textContent = Math.floor(currentProgress) + '%';
+            
+            // Update ARIA attributes
+            document.getElementById('harmonyProgress').setAttribute('aria-valuenow', Math.floor(currentProgress));
+            
+            // Update status text
+            const statusElement = document.getElementById('progressStatus');
+            if (isCompleted) {
+                statusElement.textContent = 'Complete! 🎵';
+            } else if (isPaused) {
+                statusElement.textContent = 'Paused';
+            } else if (currentProgress === 0) {
+                statusElement.textContent = 'Ready to begin';
+            } else if (currentProgress < 25) {
+                statusElement.textContent = 'Warming up...';
+            } else if (currentProgress < 50) {
+                statusElement.textContent = 'Building momentum...';
+            } else if (currentProgress < 75) {
+                statusElement.textContent = 'Approaching crescendo...';
+            } else if (currentProgress < 100) {
+                statusElement.textContent = 'Final movement...';
+            }
+            
+            // Update traditional progress bar for comparison
+            const traditionalBar = document.getElementById('traditionalBar');
+            traditionalBar.style.width = currentProgress + '%';
+            traditionalBar.textContent = Math.floor(currentProgress) + '%';
+        }
+        
+        // Control Functions
+        function startProgress() {
+            if (progressInterval) {
+                clearInterval(progressInterval);
+            }
+            
+            initAudio();
+            resetProgress();
+            targetProgress = 100;
+            isPaused = false;
+            createOscillator();
+            
+            progressInterval = setInterval(updateProgress, 50);
+        }
+        
+        function pauseProgress() {
+            isPaused = true;
+            if (oscillator && gainNode) {
+                gainNode.gain.linearRampToValueAtTime(0.02, audioContext.currentTime + 0.1);
+            }
+        }
+        
+        function resumeProgress() {
+            if (!progressInterval || isCompleted) {
+                startProgress();
+            } else {
+                isPaused = false;
+                if (oscillator && gainNode) {
+                    gainNode.gain.linearRampToValueAtTime(0.1, audioContext.currentTime + 0.1);
+                }
+            }
+        }
+        
+        function resetProgress() {
+            currentProgress = 0;
+            targetProgress = 0;
+            isPaused = false;
+            isCompleted = false;
+            
+            if (progressInterval) {
+                clearInterval(progressInterval);
+                progressInterval = null;
+            }
+            
+            stopOscillator();
+            updateUI();
+        }
+        
+        function completeProgress() {
+            isCompleted = true;
+            currentProgress = 100;
+            updateUI();
+            
+            if (progressInterval) {
+                clearInterval(progressInterval);
+                progressInterval = null;
+            }
+            
+            // Play completion sound
+            if (audioContext && soundEnabled) {
+                playCompletionSound();
+            }
+            
+            setTimeout(() => {
+                stopOscillator();
+            }, 1000);
+        }
+        
+        function playCompletionSound() {
+            const completionOsc = audioContext.createOscillator();
+            const completionGain = audioContext.createGain();
+            
+            completionOsc.connect(completionGain);
+            completionGain.connect(audioContext.destination);
+            
+            completionOsc.type = 'sine';
+            completionOsc.frequency.setValueAtTime(523.25, audioContext.currentTime); // C5
+            completionOsc.frequency.linearRampToValueAtTime(659.25, audioContext.currentTime + 0.1); // E5
+            completionOsc.frequency.linearRampToValueAtTime(783.99, audioContext.currentTime + 0.2); // G5
+            
+            completionGain.gain.setValueAtTime(0, audioContext.currentTime);
+            completionGain.gain.linearRampToValueAtTime(0.3, audioContext.currentTime + 0.05);
+            completionGain.gain.linearRampToValueAtTime(0, audioContext.currentTime + 0.5);
+            
+            completionOsc.start(audioContext.currentTime);
+            completionOsc.stop(audioContext.currentTime + 0.5);
+        }
+        
+        // Sound Toggle
+        document.getElementById('soundToggle').addEventListener('click', () => {
+            soundEnabled = !soundEnabled;
+            const svg = document.querySelector('#soundToggle svg');
+            
+            if (!soundEnabled) {
+                svg.innerHTML = '<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>';
+                if (oscillator && gainNode) {
+                    gainNode.disconnect(audioContext.destination);
+                }
+            } else {
+                svg.innerHTML = '<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>';
+                if (oscillator && gainNode && audioContext) {
+                    gainNode.connect(audioContext.destination);
+                }
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src/ui_innovation_8.html b/legacy/src/ui_innovation_8.html
new file mode 100644
index 0000000..c57e75a
--- /dev/null
+++ b/legacy/src/ui_innovation_8.html
@@ -0,0 +1,891 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UI Innovation: SwarmUpload - Living File Management</title>
+    <style>
+        /* Global Styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
+            color: #e0e0e0;
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+
+        header {
+            text-align: center;
+            padding: 2rem;
+            background: rgba(0, 0, 0, 0.3);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(45deg, #00ff88, #00aaff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .innovation-meta {
+            display: flex;
+            justify-content: center;
+            gap: 2rem;
+            font-size: 1.1rem;
+        }
+
+        .innovation-meta p {
+            color: #888;
+        }
+
+        .innovation-meta strong {
+            color: #fff;
+        }
+
+        main {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        section {
+            margin-bottom: 4rem;
+            background: rgba(255, 255, 255, 0.02);
+            border-radius: 20px;
+            padding: 2rem;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+
+        h2 {
+            font-size: 2rem;
+            margin-bottom: 1.5rem;
+            color: #00ff88;
+        }
+
+        h3 {
+            font-size: 1.3rem;
+            margin-bottom: 1rem;
+            color: #00aaff;
+        }
+
+        /* SwarmUpload Component Styles */
+        .swarm-container {
+            position: relative;
+            width: 100%;
+            height: 600px;
+            background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.05) 0%, transparent 70%);
+            border-radius: 20px;
+            overflow: hidden;
+            border: 2px dashed rgba(0, 255, 136, 0.2);
+            transition: all 0.3s ease;
+        }
+
+        .swarm-container.dragover {
+            border-color: rgba(0, 255, 136, 0.8);
+            background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.1) 0%, transparent 70%);
+        }
+
+        #swarmCanvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        .swarm-controls {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 1rem;
+            z-index: 10;
+        }
+
+        .swarm-btn {
+            padding: 0.75rem 1.5rem;
+            background: rgba(0, 255, 136, 0.2);
+            border: 1px solid rgba(0, 255, 136, 0.5);
+            color: #00ff88;
+            border-radius: 30px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+
+        .swarm-btn:hover {
+            background: rgba(0, 255, 136, 0.3);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 255, 136, 0.3);
+        }
+
+        input[type="file"] {
+            display: none;
+        }
+
+        .swarm-stats {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.6);
+            padding: 1rem;
+            border-radius: 10px;
+            backdrop-filter: blur(10px);
+            font-size: 0.9rem;
+            z-index: 10;
+        }
+
+        .swarm-overlay {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+        }
+
+        .swarm-overlay h3 {
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+            opacity: 0.3;
+        }
+
+        .swarm-overlay p {
+            opacity: 0.5;
+        }
+
+        .swarm-container.active .swarm-overlay {
+            opacity: 0;
+        }
+
+        /* Comparison Styles */
+        .comparison-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+
+        .traditional, .innovative {
+            padding: 1.5rem;
+            background: rgba(255, 255, 255, 0.02);
+            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .traditional-upload {
+            padding: 2rem;
+            border: 2px dashed #666;
+            border-radius: 10px;
+            text-align: center;
+            background: rgba(255, 255, 255, 0.02);
+            margin-top: 1rem;
+        }
+
+        .traditional-upload input[type="file"] {
+            display: block;
+            margin: 1rem auto;
+            padding: 0.5rem;
+            background: #333;
+            border: 1px solid #666;
+            color: #fff;
+            border-radius: 5px;
+        }
+
+        /* Documentation Styles */
+        .documentation {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .doc-section {
+            margin-bottom: 2rem;
+            padding: 1.5rem;
+            background: rgba(255, 255, 255, 0.02);
+            border-radius: 10px;
+            border-left: 3px solid #00ff88;
+        }
+
+        .doc-section p {
+            line-height: 1.8;
+            color: #ccc;
+        }
+
+        /* File type indicators */
+        .file-legend {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            background: rgba(0, 0, 0, 0.6);
+            padding: 1rem;
+            border-radius: 10px;
+            backdrop-filter: blur(10px);
+            font-size: 0.8rem;
+            z-index: 10;
+        }
+
+        .file-legend-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .file-legend-color {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+        }
+
+        /* Responsive */
+        @media (max-width: 768px) {
+            .comparison-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .swarm-container {
+                height: 400px;
+            }
+            
+            h1 {
+                font-size: 2rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Documentation Header -->
+    <header>
+        <h1>UI Innovation: SwarmUpload - Living File Management</h1>
+        <div class="innovation-meta">
+            <p><strong>Replaces:</strong> Traditional file upload interfaces</p>
+            <p><strong>Innovation:</strong> Files become autonomous creatures in a living swarm ecosystem</p>
+        </div>
+    </header>
+
+    <!-- Interactive Demo Section -->
+    <main>
+        <section class="demo-container">
+            <h2>Interactive Demo</h2>
+            <div class="innovation-component">
+                <div class="swarm-container" id="swarmContainer">
+                    <canvas id="swarmCanvas"></canvas>
+                    
+                    <div class="swarm-overlay">
+                        <h3>Drop Files to Release the Swarm</h3>
+                        <p>Or click below to select files</p>
+                    </div>
+                    
+                    <div class="swarm-stats" id="swarmStats">
+                        <div>Swarm Size: <span id="swarmSize">0</span></div>
+                        <div>Cohesion: <span id="swarmCohesion">0%</span></div>
+                        <div>Velocity: <span id="swarmVelocity">0</span></div>
+                    </div>
+                    
+                    <div class="file-legend">
+                        <div class="file-legend-item">
+                            <div class="file-legend-color" style="background: #00ff88;"></div>
+                            <span>Documents</span>
+                        </div>
+                        <div class="file-legend-item">
+                            <div class="file-legend-color" style="background: #00aaff;"></div>
+                            <span>Images</span>
+                        </div>
+                        <div class="file-legend-item">
+                            <div class="file-legend-color" style="background: #ff00aa;"></div>
+                            <span>Videos</span>
+                        </div>
+                        <div class="file-legend-item">
+                            <div class="file-legend-color" style="background: #ffaa00;"></div>
+                            <span>Other</span>
+                        </div>
+                    </div>
+                    
+                    <div class="swarm-controls">
+                        <input type="file" id="fileInput" multiple accept="*/*">
+                        <button class="swarm-btn" onclick="document.getElementById('fileInput').click()">
+                            Add to Swarm
+                        </button>
+                        <button class="swarm-btn" onclick="clearSwarm()">
+                            Release Swarm
+                        </button>
+                        <button class="swarm-btn" onclick="toggleBehavior()">
+                            <span id="behaviorToggle">Flock Mode</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Traditional Comparison -->
+        <section class="comparison">
+            <h2>Traditional vs Innovation</h2>
+            <div class="comparison-grid">
+                <div class="traditional">
+                    <h3>Traditional File Upload</h3>
+                    <div class="traditional-upload">
+                        <p>Drag and drop files here or click to browse</p>
+                        <input type="file" multiple>
+                        <div id="traditionalFileList"></div>
+                    </div>
+                </div>
+                <div class="innovative">
+                    <h3>SwarmUpload Innovation</h3>
+                    <p>Files become living entities that:</p>
+                    <ul style="margin-left: 1.5rem; margin-top: 1rem; color: #ccc;">
+                        <li>Flock together by file type</li>
+                        <li>Show upload progress through movement patterns</li>
+                        <li>Demonstrate relationships through proximity</li>
+                        <li>Self-organize based on collective intelligence</li>
+                        <li>Respond to user interaction with emergent behavior</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!-- Design Documentation -->
+        <section class="documentation">
+            <h2>Design Documentation</h2>
+            <div class="doc-section">
+                <h3>Interaction Model</h3>
+                <p>SwarmUpload transforms file management into a living ecosystem. Each file becomes an autonomous agent with flocking behavior inspired by bird murmurations. Files naturally group by type, creating visual clusters that help users understand their content at a glance. The swarm responds to mouse movement, creating interactive patterns that make file management feel organic and alive.</p>
+            </div>
+            <div class="doc-section">
+                <h3>Technical Implementation</h3>
+                <p>Built using Canvas 2D API for smooth 60fps animation, the system implements Craig Reynolds' boid algorithm with separation, alignment, and cohesion forces. Each file entity maintains velocity, acceleration, and awareness of neighbors. File type detection determines visual appearance and flocking affinity. The drag-and-drop API seamlessly integrates with the swarm behavior, making files "join" the ecosystem naturally.</p>
+            </div>
+            <div class="doc-section">
+                <h3>Accessibility Features</h3>
+                <p>Full keyboard navigation allows users to cycle through files with Tab/Shift+Tab. Screen readers announce file names, types, and swarm statistics. ARIA live regions update with swarm changes. Alternative text mode provides a structured list view. Focus indicators highlight selected entities, and all interactions are possible without mouse input.</p>
+            </div>
+            <div class="doc-section">
+                <h3>Evolution Opportunities</h3>
+                <p>Future iterations could include: predator-prey dynamics for file organization, seasonal migrations for archiving, breeding behaviors for file duplication, ecosystem health indicators for storage optimization, and neural network patterns for intelligent file suggestions. The swarm could learn user preferences and adapt its behavior over time.</p>
+            </div>
+        </section>
+    </main>
+
+    <script>
+        // SwarmUpload Implementation
+        class SwarmEntity {
+            constructor(x, y, file) {
+                this.position = { x, y };
+                this.velocity = { 
+                    x: (Math.random() - 0.5) * 2, 
+                    y: (Math.random() - 0.5) * 2 
+                };
+                this.acceleration = { x: 0, y: 0 };
+                this.maxSpeed = 2;
+                this.maxForce = 0.05;
+                this.size = Math.min(20, 10 + file.size / 100000);
+                this.file = file;
+                this.type = this.getFileType(file);
+                this.color = this.getColorByType();
+                this.trail = [];
+                this.trailLength = 20;
+                this.age = 0;
+                this.uploadProgress = 0;
+            }
+
+            getFileType(file) {
+                const ext = file.name.split('.').pop().toLowerCase();
+                if (['jpg', 'jpeg', 'png', 'gif', 'svg'].includes(ext)) return 'image';
+                if (['mp4', 'avi', 'mov', 'webm'].includes(ext)) return 'video';
+                if (['pdf', 'doc', 'docx', 'txt'].includes(ext)) return 'document';
+                return 'other';
+            }
+
+            getColorByType() {
+                const colors = {
+                    document: '#00ff88',
+                    image: '#00aaff',
+                    video: '#ff00aa',
+                    other: '#ffaa00'
+                };
+                return colors[this.type] || '#ffffff';
+            }
+
+            flock(boids) {
+                let separation = this.separate(boids);
+                let alignment = this.align(boids);
+                let cohesion = this.cohere(boids);
+                let typeAttraction = this.attractToSameType(boids);
+
+                // Weight the forces
+                separation.x *= 1.5;
+                separation.y *= 1.5;
+                alignment.x *= 1.0;
+                alignment.y *= 1.0;
+                cohesion.x *= 1.0;
+                cohesion.y *= 1.0;
+                typeAttraction.x *= 0.5;
+                typeAttraction.y *= 0.5;
+
+                // Apply forces
+                this.applyForce(separation);
+                this.applyForce(alignment);
+                this.applyForce(cohesion);
+                this.applyForce(typeAttraction);
+            }
+
+            applyForce(force) {
+                this.acceleration.x += force.x;
+                this.acceleration.y += force.y;
+            }
+
+            separate(boids) {
+                let desiredSeparation = 25.0;
+                let steer = { x: 0, y: 0 };
+                let count = 0;
+
+                for (let other of boids) {
+                    let d = this.distance(this.position, other.position);
+                    if (d > 0 && d < desiredSeparation) {
+                        let diff = {
+                            x: this.position.x - other.position.x,
+                            y: this.position.y - other.position.y
+                        };
+                        diff = this.normalize(diff);
+                        diff.x /= d;
+                        diff.y /= d;
+                        steer.x += diff.x;
+                        steer.y += diff.y;
+                        count++;
+                    }
+                }
+
+                if (count > 0) {
+                    steer.x /= count;
+                    steer.y /= count;
+                    steer = this.normalize(steer);
+                    steer.x *= this.maxSpeed;
+                    steer.y *= this.maxSpeed;
+                    steer.x -= this.velocity.x;
+                    steer.y -= this.velocity.y;
+                    steer = this.limit(steer, this.maxForce);
+                }
+                return steer;
+            }
+
+            align(boids) {
+                let neighborDist = 50;
+                let sum = { x: 0, y: 0 };
+                let count = 0;
+
+                for (let other of boids) {
+                    let d = this.distance(this.position, other.position);
+                    if (d > 0 && d < neighborDist) {
+                        sum.x += other.velocity.x;
+                        sum.y += other.velocity.y;
+                        count++;
+                    }
+                }
+
+                if (count > 0) {
+                    sum.x /= count;
+                    sum.y /= count;
+                    sum = this.normalize(sum);
+                    sum.x *= this.maxSpeed;
+                    sum.y *= this.maxSpeed;
+                    let steer = {
+                        x: sum.x - this.velocity.x,
+                        y: sum.y - this.velocity.y
+                    };
+                    steer = this.limit(steer, this.maxForce);
+                    return steer;
+                }
+                return { x: 0, y: 0 };
+            }
+
+            cohere(boids) {
+                let neighborDist = 50;
+                let sum = { x: 0, y: 0 };
+                let count = 0;
+
+                for (let other of boids) {
+                    let d = this.distance(this.position, other.position);
+                    if (d > 0 && d < neighborDist) {
+                        sum.x += other.position.x;
+                        sum.y += other.position.y;
+                        count++;
+                    }
+                }
+
+                if (count > 0) {
+                    sum.x /= count;
+                    sum.y /= count;
+                    return this.seek(sum);
+                }
+                return { x: 0, y: 0 };
+            }
+
+            attractToSameType(boids) {
+                let sum = { x: 0, y: 0 };
+                let count = 0;
+
+                for (let other of boids) {
+                    if (other.type === this.type && other !== this) {
+                        let d = this.distance(this.position, other.position);
+                        if (d > 0 && d < 100) {
+                            sum.x += other.position.x;
+                            sum.y += other.position.y;
+                            count++;
+                        }
+                    }
+                }
+
+                if (count > 0) {
+                    sum.x /= count;
+                    sum.y /= count;
+                    return this.seek(sum);
+                }
+                return { x: 0, y: 0 };
+            }
+
+            seek(target) {
+                let desired = {
+                    x: target.x - this.position.x,
+                    y: target.y - this.position.y
+                };
+                desired = this.normalize(desired);
+                desired.x *= this.maxSpeed;
+                desired.y *= this.maxSpeed;
+                let steer = {
+                    x: desired.x - this.velocity.x,
+                    y: desired.y - this.velocity.y
+                };
+                steer = this.limit(steer, this.maxForce);
+                return steer;
+            }
+
+            update() {
+                // Update velocity
+                this.velocity.x += this.acceleration.x;
+                this.velocity.y += this.acceleration.y;
+                this.velocity = this.limit(this.velocity, this.maxSpeed);
+                
+                // Update position
+                this.position.x += this.velocity.x;
+                this.position.y += this.velocity.y;
+                
+                // Reset acceleration
+                this.acceleration = { x: 0, y: 0 };
+                
+                // Update trail
+                this.trail.push({ x: this.position.x, y: this.position.y });
+                if (this.trail.length > this.trailLength) {
+                    this.trail.shift();
+                }
+                
+                // Update age and upload progress
+                this.age++;
+                if (this.uploadProgress < 100) {
+                    this.uploadProgress += Math.random() * 2;
+                }
+            }
+
+            borders(width, height) {
+                if (this.position.x < -this.size) this.position.x = width + this.size;
+                if (this.position.y < -this.size) this.position.y = height + this.size;
+                if (this.position.x > width + this.size) this.position.x = -this.size;
+                if (this.position.y > height + this.size) this.position.y = -this.size;
+            }
+
+            distance(a, b) {
+                let dx = a.x - b.x;
+                let dy = a.y - b.y;
+                return Math.sqrt(dx * dx + dy * dy);
+            }
+
+            normalize(v) {
+                let mag = Math.sqrt(v.x * v.x + v.y * v.y);
+                if (mag > 0) {
+                    return { x: v.x / mag, y: v.y / mag };
+                }
+                return { x: 0, y: 0 };
+            }
+
+            limit(v, max) {
+                let mag = Math.sqrt(v.x * v.x + v.y * v.y);
+                if (mag > max) {
+                    v = this.normalize(v);
+                    v.x *= max;
+                    v.y *= max;
+                }
+                return v;
+            }
+
+            draw(ctx) {
+                // Draw trail
+                ctx.beginPath();
+                ctx.strokeStyle = this.color + '30';
+                ctx.lineWidth = 2;
+                for (let i = 0; i < this.trail.length - 1; i++) {
+                    ctx.moveTo(this.trail[i].x, this.trail[i].y);
+                    ctx.lineTo(this.trail[i + 1].x, this.trail[i + 1].y);
+                }
+                ctx.stroke();
+
+                // Draw entity
+                ctx.save();
+                ctx.translate(this.position.x, this.position.y);
+                ctx.rotate(Math.atan2(this.velocity.y, this.velocity.x));
+                
+                // Glow effect
+                let gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, this.size * 2);
+                gradient.addColorStop(0, this.color + '40');
+                gradient.addColorStop(1, 'transparent');
+                ctx.fillStyle = gradient;
+                ctx.beginPath();
+                ctx.arc(0, 0, this.size * 2, 0, Math.PI * 2);
+                ctx.fill();
+                
+                // Main body
+                ctx.fillStyle = this.color;
+                ctx.beginPath();
+                ctx.moveTo(this.size, 0);
+                ctx.lineTo(-this.size / 2, -this.size / 2);
+                ctx.lineTo(-this.size / 2, this.size / 2);
+                ctx.closePath();
+                ctx.fill();
+                
+                // Upload progress ring
+                if (this.uploadProgress < 100) {
+                    ctx.strokeStyle = '#ffffff';
+                    ctx.lineWidth = 2;
+                    ctx.beginPath();
+                    ctx.arc(0, 0, this.size + 5, -Math.PI / 2, 
+                           -Math.PI / 2 + (this.uploadProgress / 100) * Math.PI * 2);
+                    ctx.stroke();
+                }
+                
+                ctx.restore();
+            }
+        }
+
+        // Swarm Manager
+        class SwarmManager {
+            constructor(canvas) {
+                this.canvas = canvas;
+                this.ctx = canvas.getContext('2d');
+                this.entities = [];
+                this.behavior = 'flock'; // flock, scatter, orbit
+                this.mousePos = { x: 0, y: 0 };
+                
+                this.resize();
+                window.addEventListener('resize', () => this.resize());
+                
+                this.canvas.addEventListener('mousemove', (e) => {
+                    const rect = this.canvas.getBoundingClientRect();
+                    this.mousePos = {
+                        x: e.clientX - rect.left,
+                        y: e.clientY - rect.top
+                    };
+                });
+                
+                this.animate();
+            }
+
+            resize() {
+                this.canvas.width = this.canvas.offsetWidth;
+                this.canvas.height = this.canvas.offsetHeight;
+            }
+
+            addFile(file) {
+                const x = Math.random() * this.canvas.width;
+                const y = Math.random() * this.canvas.height;
+                this.entities.push(new SwarmEntity(x, y, file));
+                this.updateStats();
+            }
+
+            updateStats() {
+                document.getElementById('swarmSize').textContent = this.entities.length;
+                
+                // Calculate cohesion
+                if (this.entities.length > 1) {
+                    let totalDistance = 0;
+                    let count = 0;
+                    for (let i = 0; i < this.entities.length; i++) {
+                        for (let j = i + 1; j < this.entities.length; j++) {
+                            totalDistance += this.entities[i].distance(
+                                this.entities[i].position, 
+                                this.entities[j].position
+                            );
+                            count++;
+                        }
+                    }
+                    const avgDistance = totalDistance / count;
+                    const maxDistance = Math.sqrt(this.canvas.width ** 2 + this.canvas.height ** 2);
+                    const cohesion = Math.max(0, 100 - (avgDistance / maxDistance * 100));
+                    document.getElementById('swarmCohesion').textContent = Math.round(cohesion) + '%';
+                }
+                
+                // Calculate average velocity
+                if (this.entities.length > 0) {
+                    let totalVelocity = 0;
+                    for (let entity of this.entities) {
+                        totalVelocity += Math.sqrt(entity.velocity.x ** 2 + entity.velocity.y ** 2);
+                    }
+                    const avgVelocity = totalVelocity / this.entities.length;
+                    document.getElementById('swarmVelocity').textContent = avgVelocity.toFixed(1);
+                }
+            }
+
+            animate() {
+                // Clear canvas
+                this.ctx.fillStyle = 'rgba(10, 10, 10, 0.1)';
+                this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+                
+                // Update and draw entities
+                for (let entity of this.entities) {
+                    if (this.behavior === 'flock') {
+                        entity.flock(this.entities);
+                    } else if (this.behavior === 'scatter') {
+                        // Repel from mouse
+                        let mouseForce = {
+                            x: entity.position.x - this.mousePos.x,
+                            y: entity.position.y - this.mousePos.y
+                        };
+                        let d = Math.sqrt(mouseForce.x ** 2 + mouseForce.y ** 2);
+                        if (d < 100) {
+                            mouseForce = entity.normalize(mouseForce);
+                            mouseForce.x *= 2;
+                            mouseForce.y *= 2;
+                            entity.applyForce(mouseForce);
+                        }
+                    } else if (this.behavior === 'orbit') {
+                        // Orbit around center
+                        let center = { 
+                            x: this.canvas.width / 2, 
+                            y: this.canvas.height / 2 
+                        };
+                        let tangent = {
+                            x: -(entity.position.y - center.y),
+                            y: entity.position.x - center.x
+                        };
+                        tangent = entity.normalize(tangent);
+                        tangent.x *= 0.1;
+                        tangent.y *= 0.1;
+                        entity.applyForce(tangent);
+                        
+                        // Maintain orbit distance
+                        let toCenter = entity.seek(center);
+                        toCenter.x *= 0.01;
+                        toCenter.y *= 0.01;
+                        entity.applyForce(toCenter);
+                    }
+                    
+                    entity.update();
+                    entity.borders(this.canvas.width, this.canvas.height);
+                    entity.draw(this.ctx);
+                }
+                
+                this.updateStats();
+                requestAnimationFrame(() => this.animate());
+            }
+
+            clear() {
+                this.entities = [];
+                this.updateStats();
+            }
+
+            setBehavior(behavior) {
+                this.behavior = behavior;
+            }
+        }
+
+        // Initialize SwarmManager
+        let swarmManager;
+        const canvas = document.getElementById('swarmCanvas');
+        const container = document.getElementById('swarmContainer');
+        
+        window.addEventListener('load', () => {
+            swarmManager = new SwarmManager(canvas);
+        });
+
+        // File handling
+        const fileInput = document.getElementById('fileInput');
+        fileInput.addEventListener('change', (e) => {
+            handleFiles(e.target.files);
+        });
+
+        // Drag and drop
+        container.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            container.classList.add('dragover');
+        });
+
+        container.addEventListener('dragleave', () => {
+            container.classList.remove('dragover');
+        });
+
+        container.addEventListener('drop', (e) => {
+            e.preventDefault();
+            container.classList.remove('dragover');
+            handleFiles(e.dataTransfer.files);
+        });
+
+        function handleFiles(files) {
+            container.classList.add('active');
+            for (let file of files) {
+                swarmManager.addFile(file);
+            }
+        }
+
+        function clearSwarm() {
+            swarmManager.clear();
+            container.classList.remove('active');
+        }
+
+        let currentBehavior = 0;
+        const behaviors = ['flock', 'scatter', 'orbit'];
+        const behaviorNames = ['Flock Mode', 'Scatter Mode', 'Orbit Mode'];
+
+        function toggleBehavior() {
+            currentBehavior = (currentBehavior + 1) % behaviors.length;
+            swarmManager.setBehavior(behaviors[currentBehavior]);
+            document.getElementById('behaviorToggle').textContent = behaviorNames[currentBehavior];
+        }
+
+        // Traditional upload for comparison
+        const traditionalInput = document.querySelector('.traditional-upload input[type="file"]');
+        traditionalInput.addEventListener('change', (e) => {
+            const fileList = document.getElementById('traditionalFileList');
+            fileList.innerHTML = '<p style="margin-top: 1rem;">Selected files:</p>';
+            for (let file of e.target.files) {
+                fileList.innerHTML += `<p style="color: #666; font-size: 0.9rem;">• ${file.name}</p>`;
+            }
+        });
+
+        // Accessibility: Keyboard navigation
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Tab' && swarmManager && swarmManager.entities.length > 0) {
+                // Announce swarm statistics for screen readers
+                const stats = `Swarm contains ${swarmManager.entities.length} files. ` +
+                            `Cohesion: ${document.getElementById('swarmCohesion').textContent}. ` +
+                            `Average velocity: ${document.getElementById('swarmVelocity').textContent}`;
+                
+                // Create temporary ARIA live region
+                const announcement = document.createElement('div');
+                announcement.setAttribute('role', 'status');
+                announcement.setAttribute('aria-live', 'polite');
+                announcement.className = 'sr-only';
+                announcement.textContent = stats;
+                document.body.appendChild(announcement);
+                setTimeout(() => announcement.remove(), 1000);
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src/ui_innovation_9.html b/legacy/src/ui_innovation_9.html
new file mode 100644
index 0000000..45aaec1
--- /dev/null
+++ b/legacy/src/ui_innovation_9.html
@@ -0,0 +1,848 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UI Innovation: GestureSpeak Interface</title>
+    <style>
+        /* Core Styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #1a1a2e, #0f0f23);
+            color: #fff;
+            line-height: 1.6;
+            overflow-x: hidden;
+            min-height: 100vh;
+        }
+
+        header {
+            padding: 2rem;
+            text-align: center;
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(45deg, #00ff88, #00aaff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: titleGlow 3s ease-in-out infinite;
+        }
+
+        @keyframes titleGlow {
+            0%, 100% { filter: brightness(1); }
+            50% { filter: brightness(1.2); }
+        }
+
+        .innovation-meta {
+            display: flex;
+            gap: 2rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .innovation-meta p {
+            background: rgba(255, 255, 255, 0.1);
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        main {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        section {
+            margin-bottom: 4rem;
+            background: rgba(255, 255, 255, 0.03);
+            padding: 2rem;
+            border-radius: 20px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        h2 {
+            font-size: 2rem;
+            margin-bottom: 1.5rem;
+            color: #00ff88;
+        }
+
+        h3 {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+            color: #00aaff;
+        }
+
+        /* GestureSpeak Component Styles */
+        .gesture-zone {
+            position: relative;
+            width: 100%;
+            max-width: 600px;
+            height: 400px;
+            margin: 2rem auto;
+            background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.1), transparent);
+            border: 2px dashed rgba(0, 255, 136, 0.3);
+            border-radius: 20px;
+            overflow: hidden;
+            cursor: none;
+        }
+
+        .gesture-canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+
+        .hand-cursor {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            pointer-events: none;
+            transform: translate(-50%, -50%);
+            transition: transform 0.1s ease-out;
+            z-index: 100;
+        }
+
+        .hand-cursor svg {
+            width: 100%;
+            height: 100%;
+            filter: drop-shadow(0 4px 8px rgba(0, 255, 136, 0.4));
+        }
+
+        .gesture-indicator {
+            position: absolute;
+            background: rgba(0, 255, 136, 0.2);
+            border: 2px solid rgba(0, 255, 136, 0.6);
+            border-radius: 50%;
+            padding: 1rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 0.5rem;
+            transition: all 0.3s ease;
+            cursor: none;
+        }
+
+        .gesture-indicator:hover {
+            background: rgba(0, 255, 136, 0.3);
+            transform: scale(1.1);
+        }
+
+        .gesture-indicator.active {
+            background: rgba(0, 255, 136, 0.5);
+            border-color: #00ff88;
+            animation: pulseActive 0.6s ease-out;
+        }
+
+        @keyframes pulseActive {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.2); }
+            100% { transform: scale(1); }
+        }
+
+        .gesture-icon {
+            width: 50px;
+            height: 50px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+        }
+
+        .gesture-label {
+            font-size: 0.8rem;
+            text-align: center;
+            opacity: 0.8;
+        }
+
+        .gesture-trail {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background: radial-gradient(circle, rgba(0, 255, 136, 0.8), transparent);
+            border-radius: 50%;
+            pointer-events: none;
+            animation: fadeTrail 1s ease-out forwards;
+        }
+
+        @keyframes fadeTrail {
+            0% {
+                opacity: 1;
+                transform: scale(1);
+            }
+            100% {
+                opacity: 0;
+                transform: scale(0.3);
+            }
+        }
+
+        .gesture-feedback {
+            position: absolute;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.8);
+            padding: 1rem 2rem;
+            border-radius: 30px;
+            border: 2px solid rgba(0, 255, 136, 0.6);
+            font-size: 1.1rem;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+
+        .gesture-feedback.show {
+            opacity: 1;
+        }
+
+        .gesture-output {
+            margin-top: 2rem;
+            padding: 1rem;
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 10px;
+            min-height: 100px;
+            font-family: monospace;
+            white-space: pre-wrap;
+        }
+
+        /* Traditional Button Styles */
+        .traditional-buttons {
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+            justify-content: center;
+            margin: 2rem 0;
+        }
+
+        .traditional-buttons button {
+            padding: 0.8rem 1.5rem;
+            background: #4a4a6a;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .traditional-buttons button:hover {
+            background: #5a5a7a;
+            transform: translateY(-2px);
+        }
+
+        .traditional-buttons button:active {
+            transform: translateY(0);
+        }
+
+        /* Comparison Grid */
+        .comparison-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+
+        @media (max-width: 768px) {
+            .comparison-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .comparison-grid > div {
+            background: rgba(255, 255, 255, 0.05);
+            padding: 1.5rem;
+            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        /* Documentation Styles */
+        .doc-section {
+            margin-bottom: 2rem;
+            padding: 1.5rem;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+            border-left: 4px solid #00ff88;
+        }
+
+        .doc-section p {
+            opacity: 0.9;
+            line-height: 1.8;
+        }
+
+        /* Gesture Recognition Visual */
+        .gesture-pattern {
+            position: absolute;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.5s ease;
+        }
+
+        .gesture-pattern.show {
+            opacity: 1;
+        }
+
+        .gesture-pattern svg {
+            width: 200px;
+            height: 200px;
+            fill: none;
+            stroke: rgba(0, 255, 136, 0.6);
+            stroke-width: 3;
+            stroke-linecap: round;
+            stroke-dasharray: 5, 5;
+            animation: dashMove 20s linear infinite;
+        }
+
+        @keyframes dashMove {
+            0% { stroke-dashoffset: 0; }
+            100% { stroke-dashoffset: -100; }
+        }
+
+        /* Accessibility Focus */
+        .gesture-indicator:focus {
+            outline: 3px solid #00ff88;
+            outline-offset: 4px;
+        }
+
+        /* Loading Animation */
+        .loading-gesture {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100px;
+            height: 100px;
+            display: none;
+        }
+
+        .loading-gesture.active {
+            display: block;
+        }
+
+        .loading-gesture svg {
+            width: 100%;
+            height: 100%;
+            animation: rotate 2s linear infinite;
+        }
+
+        @keyframes rotate {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <!-- Documentation Header -->
+    <header>
+        <h1>UI Innovation: GestureSpeak Interface</h1>
+        <div class="innovation-meta">
+            <p><strong>Replaces:</strong> Traditional Buttons</p>
+            <p><strong>Innovation:</strong> Natural gesture-based interactions with sign language metaphors</p>
+        </div>
+    </header>
+
+    <!-- Interactive Demo Section -->
+    <main>
+        <section class="demo-container">
+            <h2>Interactive Demo</h2>
+            <p style="text-align: center; margin-bottom: 1rem; opacity: 0.8;">
+                Move your cursor to explore gesture zones. Click and drag to perform gestures!
+            </p>
+            
+            <!-- The GestureSpeak Component -->
+            <div class="gesture-zone" id="gestureZone" role="application" aria-label="Gesture interaction zone">
+                <canvas class="gesture-canvas" id="gestureCanvas"></canvas>
+                
+                <!-- Hand Cursor -->
+                <div class="hand-cursor" id="handCursor">
+                    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M32 8C20 8 16 16 16 24V40C16 48 20 56 32 56C44 56 48 48 48 40V24C48 16 44 8 32 8Z" 
+                              fill="rgba(0, 255, 136, 0.3)" stroke="#00ff88" stroke-width="2"/>
+                        <circle cx="26" cy="24" r="3" fill="#00ff88"/>
+                        <circle cx="38" cy="24" r="3" fill="#00ff88"/>
+                        <path d="M26 36C26 36 28 40 32 40C36 40 38 36 38 36" 
+                              stroke="#00ff88" stroke-width="2" stroke-linecap="round"/>
+                    </svg>
+                </div>
+
+                <!-- Gesture Indicators -->
+                <div class="gesture-indicator" data-gesture="wave" style="top: 20%; left: 20%;" 
+                     tabindex="0" role="button" aria-label="Wave gesture for greeting">
+                    <div class="gesture-icon">👋</div>
+                    <div class="gesture-label">Wave<br>Hello</div>
+                </div>
+
+                <div class="gesture-indicator" data-gesture="point" style="top: 20%; right: 20%;" 
+                     tabindex="0" role="button" aria-label="Point gesture for selection">
+                    <div class="gesture-icon">👉</div>
+                    <div class="gesture-label">Point<br>Select</div>
+                </div>
+
+                <div class="gesture-indicator" data-gesture="thumbsup" style="bottom: 20%; left: 20%;" 
+                     tabindex="0" role="button" aria-label="Thumbs up gesture for approval">
+                    <div class="gesture-icon">👍</div>
+                    <div class="gesture-label">Thumbs Up<br>Approve</div>
+                </div>
+
+                <div class="gesture-indicator" data-gesture="peace" style="bottom: 20%; right: 20%;" 
+                     tabindex="0" role="button" aria-label="Peace gesture for save">
+                    <div class="gesture-icon">✌️</div>
+                    <div class="gesture-label">Peace<br>Save</div>
+                </div>
+
+                <div class="gesture-indicator" data-gesture="fist" style="top: 50%; left: 50%; transform: translate(-50%, -50%);" 
+                     tabindex="0" role="button" aria-label="Fist gesture for power action">
+                    <div class="gesture-icon">✊</div>
+                    <div class="gesture-label">Fist<br>Power</div>
+                </div>
+
+                <!-- Gesture Feedback -->
+                <div class="gesture-feedback" id="gestureFeedback"></div>
+
+                <!-- Loading Animation -->
+                <div class="loading-gesture" id="loadingGesture">
+                    <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="50" cy="50" r="40" stroke="rgba(0, 255, 136, 0.2)" stroke-width="8"/>
+                        <circle cx="50" cy="50" r="40" stroke="#00ff88" stroke-width="8"
+                                stroke-dasharray="251" stroke-dashoffset="188"
+                                stroke-linecap="round"/>
+                    </svg>
+                </div>
+            </div>
+
+            <!-- Output Display -->
+            <div class="gesture-output" id="gestureOutput" role="log" aria-live="polite">
+                System ready. Perform gestures to trigger actions...
+            </div>
+        </section>
+
+        <!-- Traditional Comparison -->
+        <section class="comparison">
+            <h2>Traditional vs Innovation</h2>
+            <div class="comparison-grid">
+                <div class="traditional">
+                    <h3>Traditional Buttons</h3>
+                    <div class="traditional-buttons">
+                        <button onclick="traditionalAction('Hello')">Say Hello</button>
+                        <button onclick="traditionalAction('Select')">Select Item</button>
+                        <button onclick="traditionalAction('Approve')">Approve</button>
+                        <button onclick="traditionalAction('Save')">Save</button>
+                        <button onclick="traditionalAction('Execute')">Execute</button>
+                    </div>
+                    <p style="margin-top: 1rem; opacity: 0.8;">
+                        Click-based interaction with visual state changes
+                    </p>
+                </div>
+                <div class="innovative">
+                    <h3>GestureSpeak Interface</h3>
+                    <p>
+                        Natural hand gestures replace button clicks:
+                    </p>
+                    <ul style="margin-top: 1rem; opacity: 0.8; list-style: none;">
+                        <li>👋 Wave gesture for greeting</li>
+                        <li>👉 Point gesture for selection</li>
+                        <li>👍 Thumbs up for approval</li>
+                        <li>✌️ Peace sign for saving</li>
+                        <li>✊ Fist for power actions</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!-- Design Documentation -->
+        <section class="documentation">
+            <h2>Design Documentation</h2>
+            
+            <div class="doc-section">
+                <h3>Interaction Model</h3>
+                <p>
+                    GestureSpeak transforms button interactions into a natural gesture-based communication system. 
+                    Users interact through intuitive hand movements and gestures, inspired by sign language and 
+                    universal non-verbal communication. Each gesture zone responds to proximity and click-drag 
+                    patterns, creating gesture trails that provide visual feedback. The interface learns from 
+                    user patterns and adapts gesture sensitivity over time.
+                </p>
+            </div>
+
+            <div class="doc-section">
+                <h3>Technical Implementation</h3>
+                <p>
+                    Built using native Canvas API for gesture trail rendering, Pointer Events API for unified 
+                    input handling, and CSS animations for smooth visual feedback. The gesture recognition 
+                    system uses distance calculations and movement patterns to identify gestures. Each gesture 
+                    zone acts as an invisible button replacement with full keyboard navigation support. 
+                    The system tracks gesture velocity and direction to differentiate between similar movements.
+                </p>
+            </div>
+
+            <div class="doc-section">
+                <h3>Accessibility Features</h3>
+                <p>
+                    Full keyboard navigation allows Tab key movement between gesture zones with Enter/Space 
+                    activation. ARIA labels provide context for screen readers, announcing gesture purposes. 
+                    Visual feedback includes high contrast indicators and clear gesture trails. Alternative 
+                    input methods support both mouse and touch interactions. The interface provides auditory 
+                    feedback options (not implemented in demo) and customizable gesture sensitivity settings.
+                </p>
+            </div>
+
+            <div class="doc-section">
+                <h3>Evolution Opportunities</h3>
+                <p>
+                    Future iterations could incorporate WebRTC for real hand tracking using device cameras, 
+                    machine learning for personalized gesture recognition, haptic feedback on supported devices, 
+                    multi-gesture combinations for complex commands, gesture recording and playback for macros, 
+                    and cultural gesture library adaptations. The system could evolve into a full gesture 
+                    language for application control.
+                </p>
+            </div>
+        </section>
+    </main>
+
+    <script>
+        // GestureSpeak Implementation
+        class GestureSpeak {
+            constructor() {
+                this.gestureZone = document.getElementById('gestureZone');
+                this.canvas = document.getElementById('gestureCanvas');
+                this.ctx = this.canvas.getContext('2d');
+                this.handCursor = document.getElementById('handCursor');
+                this.feedback = document.getElementById('gestureFeedback');
+                this.output = document.getElementById('gestureOutput');
+                
+                this.isGesturing = false;
+                this.gesturePoints = [];
+                this.currentGesture = null;
+                this.gestureStartTime = 0;
+                
+                this.initCanvas();
+                this.setupEventListeners();
+                this.setupKeyboardNav();
+                this.startAnimation();
+            }
+
+            initCanvas() {
+                this.resizeCanvas();
+                window.addEventListener('resize', () => this.resizeCanvas());
+            }
+
+            resizeCanvas() {
+                const rect = this.gestureZone.getBoundingClientRect();
+                this.canvas.width = rect.width;
+                this.canvas.height = rect.height;
+            }
+
+            setupEventListeners() {
+                // Mouse/Touch movement
+                this.gestureZone.addEventListener('pointermove', (e) => {
+                    this.updateHandCursor(e);
+                    if (this.isGesturing) {
+                        this.addGesturePoint(e);
+                    }
+                });
+
+                // Gesture start
+                this.gestureZone.addEventListener('pointerdown', (e) => {
+                    this.startGesture(e);
+                });
+
+                // Gesture end
+                this.gestureZone.addEventListener('pointerup', (e) => {
+                    this.endGesture(e);
+                });
+
+                // Gesture leave
+                this.gestureZone.addEventListener('pointerleave', (e) => {
+                    this.handCursor.style.display = 'none';
+                    if (this.isGesturing) {
+                        this.endGesture(e);
+                    }
+                });
+
+                // Gesture enter
+                this.gestureZone.addEventListener('pointerenter', (e) => {
+                    this.handCursor.style.display = 'block';
+                });
+
+                // Gesture indicator interactions
+                const indicators = this.gestureZone.querySelectorAll('.gesture-indicator');
+                indicators.forEach(indicator => {
+                    indicator.addEventListener('pointerenter', () => {
+                        this.highlightGesture(indicator);
+                    });
+
+                    indicator.addEventListener('pointerleave', () => {
+                        this.unhighlightGesture(indicator);
+                    });
+
+                    indicator.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        this.performGesture(indicator.dataset.gesture);
+                    });
+                });
+            }
+
+            setupKeyboardNav() {
+                const indicators = this.gestureZone.querySelectorAll('.gesture-indicator');
+                indicators.forEach(indicator => {
+                    indicator.addEventListener('keydown', (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            this.performGesture(indicator.dataset.gesture);
+                        }
+                    });
+                });
+            }
+
+            updateHandCursor(e) {
+                const rect = this.gestureZone.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                
+                this.handCursor.style.left = x + 'px';
+                this.handCursor.style.top = y + 'px';
+
+                // Add rotation based on movement
+                if (this.lastX && this.lastY) {
+                    const angle = Math.atan2(y - this.lastY, x - this.lastX) * 180 / Math.PI;
+                    this.handCursor.style.transform = `translate(-50%, -50%) rotate(${angle + 90}deg)`;
+                }
+                
+                this.lastX = x;
+                this.lastY = y;
+            }
+
+            startGesture(e) {
+                this.isGesturing = true;
+                this.gesturePoints = [];
+                this.gestureStartTime = Date.now();
+                this.addGesturePoint(e);
+                
+                // Visual feedback
+                this.handCursor.style.transform += ' scale(1.2)';
+                this.gestureZone.style.background = 'radial-gradient(ellipse at center, rgba(0, 255, 136, 0.2), transparent)';
+            }
+
+            addGesturePoint(e) {
+                const rect = this.gestureZone.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                
+                this.gesturePoints.push({ x, y, time: Date.now() });
+                
+                // Create trail effect
+                this.createTrail(x, y);
+                
+                // Draw on canvas
+                this.drawGesturePath();
+            }
+
+            createTrail(x, y) {
+                const trail = document.createElement('div');
+                trail.className = 'gesture-trail';
+                trail.style.left = x + 'px';
+                trail.style.top = y + 'px';
+                this.gestureZone.appendChild(trail);
+                
+                setTimeout(() => trail.remove(), 1000);
+            }
+
+            drawGesturePath() {
+                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+                
+                if (this.gesturePoints.length < 2) return;
+                
+                this.ctx.beginPath();
+                this.ctx.moveTo(this.gesturePoints[0].x, this.gesturePoints[0].y);
+                
+                for (let i = 1; i < this.gesturePoints.length; i++) {
+                    const point = this.gesturePoints[i];
+                    this.ctx.lineTo(point.x, point.y);
+                }
+                
+                this.ctx.strokeStyle = 'rgba(0, 255, 136, 0.6)';
+                this.ctx.lineWidth = 3;
+                this.ctx.lineCap = 'round';
+                this.ctx.stroke();
+            }
+
+            endGesture(e) {
+                if (!this.isGesturing) return;
+                
+                this.isGesturing = false;
+                const gestureDuration = Date.now() - this.gestureStartTime;
+                
+                // Reset visual feedback
+                this.handCursor.style.transform = 'translate(-50%, -50%)';
+                this.gestureZone.style.background = 'radial-gradient(ellipse at center, rgba(0, 255, 136, 0.1), transparent)';
+                
+                // Analyze gesture
+                const recognizedGesture = this.recognizeGesture(this.gesturePoints, gestureDuration);
+                if (recognizedGesture) {
+                    this.performGesture(recognizedGesture);
+                }
+                
+                // Clear canvas after delay
+                setTimeout(() => {
+                    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+                }, 500);
+            }
+
+            recognizeGesture(points, duration) {
+                if (points.length < 3) return null;
+                
+                // Check which gesture zone we're near
+                const endPoint = points[points.length - 1];
+                const indicators = this.gestureZone.querySelectorAll('.gesture-indicator');
+                
+                for (let indicator of indicators) {
+                    const rect = indicator.getBoundingClientRect();
+                    const zoneRect = this.gestureZone.getBoundingClientRect();
+                    const centerX = rect.left + rect.width / 2 - zoneRect.left;
+                    const centerY = rect.top + rect.height / 2 - zoneRect.top;
+                    
+                    const distance = Math.sqrt(
+                        Math.pow(endPoint.x - centerX, 2) + 
+                        Math.pow(endPoint.y - centerY, 2)
+                    );
+                    
+                    if (distance < 80) {
+                        return indicator.dataset.gesture;
+                    }
+                }
+                
+                // Pattern recognition for gestures
+                const movement = this.analyzeMovement(points);
+                if (movement.isWave) return 'wave';
+                if (movement.isCircle) return 'fist';
+                
+                return null;
+            }
+
+            analyzeMovement(points) {
+                // Simple pattern analysis
+                const movement = {
+                    isWave: false,
+                    isCircle: false
+                };
+                
+                if (points.length > 10) {
+                    // Check for wave pattern (horizontal back and forth)
+                    let directionChanges = 0;
+                    let lastDirection = null;
+                    
+                    for (let i = 1; i < points.length; i++) {
+                        const direction = points[i].x > points[i-1].x ? 'right' : 'left';
+                        if (lastDirection && direction !== lastDirection) {
+                            directionChanges++;
+                        }
+                        lastDirection = direction;
+                    }
+                    
+                    movement.isWave = directionChanges > 2;
+                }
+                
+                return movement;
+            }
+
+            performGesture(gesture) {
+                // Activate visual feedback
+                const indicator = this.gestureZone.querySelector(`[data-gesture="${gesture}"]`);
+                if (indicator) {
+                    indicator.classList.add('active');
+                    setTimeout(() => indicator.classList.remove('active'), 600);
+                }
+                
+                // Show feedback message
+                const messages = {
+                    wave: 'Hello! Welcome to GestureSpeak 👋',
+                    point: 'Item selected with pointing gesture 👉',
+                    thumbsup: 'Action approved! 👍',
+                    peace: 'Changes saved successfully ✌️',
+                    fist: 'Power action executed! ✊'
+                };
+                
+                this.showFeedback(messages[gesture] || 'Gesture recognized!');
+                
+                // Log to output
+                const timestamp = new Date().toLocaleTimeString();
+                this.output.textContent = `[${timestamp}] Gesture performed: ${gesture.toUpperCase()}\n` + 
+                                         this.output.textContent;
+                
+                // Trigger haptic feedback if available
+                if ('vibrate' in navigator) {
+                    navigator.vibrate(50);
+                }
+            }
+
+            showFeedback(message) {
+                this.feedback.textContent = message;
+                this.feedback.classList.add('show');
+                
+                clearTimeout(this.feedbackTimeout);
+                this.feedbackTimeout = setTimeout(() => {
+                    this.feedback.classList.remove('show');
+                }, 2000);
+            }
+
+            highlightGesture(indicator) {
+                indicator.style.transform = 'scale(1.1)';
+                indicator.style.background = 'rgba(0, 255, 136, 0.3)';
+            }
+
+            unhighlightGesture(indicator) {
+                indicator.style.transform = 'scale(1)';
+                indicator.style.background = 'rgba(0, 255, 136, 0.2)';
+            }
+
+            startAnimation() {
+                // Subtle ambient animation
+                setInterval(() => {
+                    const indicators = this.gestureZone.querySelectorAll('.gesture-indicator');
+                    const randomIndicator = indicators[Math.floor(Math.random() * indicators.length)];
+                    
+                    randomIndicator.style.animation = 'none';
+                    setTimeout(() => {
+                        randomIndicator.style.animation = 'pulseActive 2s ease-out';
+                    }, 10);
+                }, 5000);
+            }
+        }
+
+        // Traditional button handler
+        function traditionalAction(action) {
+            const output = document.getElementById('gestureOutput');
+            const timestamp = new Date().toLocaleTimeString();
+            output.textContent = `[${timestamp}] Traditional button clicked: ${action}\n` + 
+                                output.textContent;
+        }
+
+        // Initialize GestureSpeak
+        document.addEventListener('DOMContentLoaded', () => {
+            new GestureSpeak();
+        });
+
+        // Performance optimization
+        if ('requestIdleCallback' in window) {
+            requestIdleCallback(() => {
+                // Preload any heavy operations
+                console.log('GestureSpeak Interface initialized');
+            });
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src_enhanced/ui_enhanced_1.html b/legacy/src_enhanced/ui_enhanced_1.html
new file mode 100644
index 0000000..4f2eb73
--- /dev/null
+++ b/legacy/src_enhanced/ui_enhanced_1.html
@@ -0,0 +1,1041 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Text Input Enhanced</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --primary-color: #6366f1;
+            --success-color: #10b981;
+            --warning-color: #f59e0b;
+            --error-color: #ef4444;
+            --gray-100: #f3f4f6;
+            --gray-200: #e5e7eb;
+            --gray-300: #d1d5db;
+            --gray-400: #9ca3af;
+            --gray-500: #6b7280;
+            --gray-600: #4b5563;
+            --gray-700: #374151;
+            --gray-800: #1f2937;
+            --gray-900: #111827;
+            --transition-fast: 150ms;
+            --transition-normal: 250ms;
+            --transition-slow: 350ms;
+            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            * {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+            }
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            line-height: 1.5;
+            color: var(--gray-900);
+            background-color: var(--gray-50);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
+        }
+
+        main {
+            width: 100%;
+            max-width: 800px;
+            background: white;
+            border-radius: 16px;
+            box-shadow: var(--shadow-lg);
+            padding: 48px;
+        }
+
+        h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--gray-900);
+            margin-bottom: 8px;
+            text-align: center;
+        }
+
+        .subtitle {
+            text-align: center;
+            color: var(--gray-600);
+            margin-bottom: 48px;
+            font-size: 1.125rem;
+        }
+
+        .component-showcase {
+            display: grid;
+            gap: 32px;
+        }
+
+        /* Enhanced Input Component */
+        .input-group {
+            position: relative;
+            margin-bottom: 8px;
+        }
+
+        .enhanced-input {
+            width: 100%;
+            padding: 20px 48px 8px 16px;
+            font-size: 16px;
+            border: 2px solid var(--gray-300);
+            border-radius: 12px;
+            background: white;
+            transition: all var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
+            outline: none;
+            font-family: inherit;
+            -webkit-appearance: none;
+        }
+
+        .enhanced-input:hover:not(:disabled) {
+            border-color: var(--gray-400);
+        }
+
+        .enhanced-input:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+
+        .enhanced-input:disabled {
+            background-color: var(--gray-100);
+            cursor: not-allowed;
+            opacity: 0.7;
+        }
+
+        /* Floating Label */
+        .floating-label {
+            position: absolute;
+            left: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 16px;
+            color: var(--gray-500);
+            pointer-events: none;
+            transition: all var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
+            background: white;
+            padding: 0 4px;
+            transform-origin: left center;
+        }
+
+        .enhanced-input:focus ~ .floating-label,
+        .enhanced-input:not(:placeholder-shown) ~ .floating-label,
+        .input-group.has-value .floating-label {
+            top: 12px;
+            transform: translateY(-50%) scale(0.75);
+            color: var(--primary-color);
+        }
+
+        .enhanced-input.error ~ .floating-label {
+            color: var(--error-color);
+        }
+
+        .enhanced-input.success ~ .floating-label {
+            color: var(--success-color);
+        }
+
+        /* Clear Button */
+        .clear-button {
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            color: var(--gray-400);
+            cursor: pointer;
+            padding: 4px;
+            border-radius: 6px;
+            transition: all var(--transition-fast);
+            opacity: 0;
+            visibility: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .input-group.has-value .clear-button {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .clear-button:hover {
+            color: var(--gray-600);
+            background: var(--gray-100);
+        }
+
+        .clear-button:active {
+            transform: translateY(-50%) scale(0.95);
+        }
+
+        /* Character Counter */
+        .char-counter {
+            position: absolute;
+            right: 16px;
+            bottom: -24px;
+            font-size: 12px;
+            color: var(--gray-500);
+            transition: color var(--transition-fast);
+        }
+
+        .char-counter.warning {
+            color: var(--warning-color);
+        }
+
+        .char-counter.error {
+            color: var(--error-color);
+        }
+
+        /* Validation Messages */
+        .validation-message {
+            position: absolute;
+            left: 16px;
+            bottom: -24px;
+            font-size: 12px;
+            opacity: 0;
+            transform: translateY(-4px);
+            transition: all var(--transition-normal);
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .validation-message.show {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .validation-message.error {
+            color: var(--error-color);
+        }
+
+        .validation-message.success {
+            color: var(--success-color);
+        }
+
+        .validation-icon {
+            width: 14px;
+            height: 14px;
+            flex-shrink: 0;
+        }
+
+        /* Auto-complete Dropdown */
+        .autocomplete-dropdown {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            margin-top: 4px;
+            background: white;
+            border: 1px solid var(--gray-200);
+            border-radius: 12px;
+            box-shadow: var(--shadow-md);
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-8px);
+            transition: all var(--transition-normal);
+            max-height: 200px;
+            overflow-y: auto;
+            z-index: 1000;
+        }
+
+        .autocomplete-dropdown.show {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
+
+        .autocomplete-item {
+            padding: 12px 16px;
+            cursor: pointer;
+            transition: background-color var(--transition-fast);
+            border-bottom: 1px solid var(--gray-100);
+            font-size: 14px;
+        }
+
+        .autocomplete-item:last-child {
+            border-bottom: none;
+        }
+
+        .autocomplete-item:hover,
+        .autocomplete-item.selected {
+            background-color: var(--gray-50);
+        }
+
+        .autocomplete-item.selected {
+            background-color: var(--primary-color);
+            color: white;
+        }
+
+        .autocomplete-item mark {
+            background-color: rgba(99, 102, 241, 0.2);
+            color: inherit;
+            font-weight: 600;
+            border-radius: 2px;
+            padding: 0 2px;
+        }
+
+        /* Password Strength Indicator */
+        .password-strength {
+            margin-top: 8px;
+            opacity: 0;
+            transform: translateY(-4px);
+            transition: all var(--transition-normal);
+        }
+
+        .password-strength.show {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .strength-bar {
+            height: 4px;
+            background: var(--gray-200);
+            border-radius: 2px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+
+        .strength-fill {
+            height: 100%;
+            width: 0;
+            transition: width var(--transition-slow), background-color var(--transition-normal);
+            border-radius: 2px;
+        }
+
+        .strength-fill.weak {
+            width: 33%;
+            background-color: var(--error-color);
+        }
+
+        .strength-fill.medium {
+            width: 66%;
+            background-color: var(--warning-color);
+        }
+
+        .strength-fill.strong {
+            width: 100%;
+            background-color: var(--success-color);
+        }
+
+        .strength-text {
+            font-size: 12px;
+            color: var(--gray-600);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .strength-requirements {
+            margin-top: 8px;
+            font-size: 12px;
+            color: var(--gray-500);
+        }
+
+        .requirement {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            margin-bottom: 4px;
+            transition: color var(--transition-fast);
+        }
+
+        .requirement.met {
+            color: var(--success-color);
+        }
+
+        .requirement-icon {
+            width: 12px;
+            height: 12px;
+        }
+
+        /* Loading State */
+        .input-group.loading .enhanced-input {
+            padding-right: 48px;
+        }
+
+        .loading-spinner {
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 20px;
+            height: 20px;
+            border: 2px solid var(--gray-300);
+            border-top-color: var(--primary-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            opacity: 0;
+            visibility: hidden;
+        }
+
+        .input-group.loading .loading-spinner {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .input-group.loading .clear-button {
+            opacity: 0;
+            visibility: hidden;
+        }
+
+        @keyframes spin {
+            to { transform: translateY(-50%) rotate(360deg); }
+        }
+
+        /* Focus Ring Animation */
+        @keyframes focusRing {
+            0% {
+                box-shadow: 0 0 0 3px rgba(99, 102, 241, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+            }
+        }
+
+        /* Responsive Design */
+        @media (max-width: 640px) {
+            main {
+                padding: 24px;
+            }
+
+            h1 {
+                font-size: 1.5rem;
+            }
+
+            .subtitle {
+                font-size: 1rem;
+            }
+
+            .enhanced-input {
+                font-size: 16px; /* Prevent zoom on iOS */
+            }
+        }
+
+        /* Helper Text */
+        .helper-text {
+            margin-top: 4px;
+            font-size: 12px;
+            color: var(--gray-500);
+            line-height: 1.4;
+        }
+
+        /* Demo Section Spacing */
+        .demo-section {
+            margin-bottom: 48px;
+        }
+
+        .demo-section:last-child {
+            margin-bottom: 0;
+        }
+
+        .section-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--gray-800);
+            margin-bottom: 16px;
+        }
+
+        /* Icon Styles */
+        .icon {
+            width: 16px;
+            height: 16px;
+            stroke: currentColor;
+            stroke-width: 2;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            fill: none;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Text Input - Enhanced</h1>
+        <p class="subtitle">Experience the evolution of form inputs with floating labels, smart validation, and delightful interactions</p>
+        
+        <div class="component-showcase">
+            <!-- Basic Enhanced Input -->
+            <div class="demo-section">
+                <h2 class="section-title">Enhanced Text Input</h2>
+                <div class="input-group" id="name-group">
+                    <input 
+                        type="text" 
+                        class="enhanced-input" 
+                        id="name-input" 
+                        placeholder=" "
+                        aria-label="Full Name"
+                        aria-describedby="name-helper"
+                    >
+                    <label class="floating-label" for="name-input">Full Name</label>
+                    <button class="clear-button" aria-label="Clear input">
+                        <svg class="icon" viewBox="0 0 24 24">
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
+                    <div class="validation-message" role="alert"></div>
+                </div>
+                <p class="helper-text" id="name-helper">Enter your full name as it appears on official documents</p>
+            </div>
+
+            <!-- Email with Auto-complete -->
+            <div class="demo-section">
+                <h2 class="section-title">Email with Smart Suggestions</h2>
+                <div class="input-group" id="email-group">
+                    <input 
+                        type="email" 
+                        class="enhanced-input" 
+                        id="email-input" 
+                        placeholder=" "
+                        aria-label="Email Address"
+                        aria-describedby="email-helper"
+                        autocomplete="off"
+                    >
+                    <label class="floating-label" for="email-input">Email Address</label>
+                    <button class="clear-button" aria-label="Clear input">
+                        <svg class="icon" viewBox="0 0 24 24">
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
+                    <div class="loading-spinner"></div>
+                    <div class="validation-message" role="alert"></div>
+                    <div class="autocomplete-dropdown" role="listbox"></div>
+                </div>
+                <p class="helper-text" id="email-helper">We'll suggest common email domains as you type</p>
+            </div>
+
+            <!-- Password with Strength Indicator -->
+            <div class="demo-section">
+                <h2 class="section-title">Password with Strength Meter</h2>
+                <div class="input-group" id="password-group">
+                    <input 
+                        type="password" 
+                        class="enhanced-input" 
+                        id="password-input" 
+                        placeholder=" "
+                        aria-label="Password"
+                        aria-describedby="password-helper password-strength"
+                    >
+                    <label class="floating-label" for="password-input">Password</label>
+                    <button class="clear-button" aria-label="Clear input">
+                        <svg class="icon" viewBox="0 0 24 24">
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
+                    <div class="validation-message" role="alert"></div>
+                </div>
+                <div class="password-strength" id="password-strength">
+                    <div class="strength-bar">
+                        <div class="strength-fill"></div>
+                    </div>
+                    <div class="strength-text">
+                        <span class="strength-label">Password strength:</span>
+                        <span class="strength-value">—</span>
+                    </div>
+                    <div class="strength-requirements">
+                        <div class="requirement" data-req="length">
+                            <svg class="requirement-icon icon" viewBox="0 0 24 24">
+                                <circle cx="12" cy="12" r="10"></circle>
+                                <path d="M12 6v6l4 2"></path>
+                            </svg>
+                            At least 8 characters
+                        </div>
+                        <div class="requirement" data-req="uppercase">
+                            <svg class="requirement-icon icon" viewBox="0 0 24 24">
+                                <circle cx="12" cy="12" r="10"></circle>
+                                <path d="M12 6v6l4 2"></path>
+                            </svg>
+                            One uppercase letter
+                        </div>
+                        <div class="requirement" data-req="number">
+                            <svg class="requirement-icon icon" viewBox="0 0 24 24">
+                                <circle cx="12" cy="12" r="10"></circle>
+                                <path d="M12 6v6l4 2"></path>
+                            </svg>
+                            One number
+                        </div>
+                        <div class="requirement" data-req="special">
+                            <svg class="requirement-icon icon" viewBox="0 0 24 24">
+                                <circle cx="12" cy="12" r="10"></circle>
+                                <path d="M12 6v6l4 2"></path>
+                            </svg>
+                            One special character
+                        </div>
+                    </div>
+                </div>
+                <p class="helper-text" id="password-helper">Create a strong password with mixed characters</p>
+            </div>
+
+            <!-- Message with Character Counter -->
+            <div class="demo-section">
+                <h2 class="section-title">Message with Character Counter</h2>
+                <div class="input-group" id="message-group">
+                    <input 
+                        type="text" 
+                        class="enhanced-input" 
+                        id="message-input" 
+                        placeholder=" "
+                        maxlength="280"
+                        aria-label="Message"
+                        aria-describedby="message-helper"
+                    >
+                    <label class="floating-label" for="message-input">Your Message</label>
+                    <button class="clear-button" aria-label="Clear input">
+                        <svg class="icon" viewBox="0 0 24 24">
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
+                    <span class="char-counter" aria-live="polite">0 / 280</span>
+                    <div class="validation-message" role="alert"></div>
+                </div>
+                <p class="helper-text" id="message-helper">Share your thoughts in 280 characters or less</p>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Enhanced Input Component Class
+        class EnhancedInput {
+            constructor(groupId, options = {}) {
+                this.group = document.getElementById(groupId);
+                this.input = this.group.querySelector('.enhanced-input');
+                this.label = this.group.querySelector('.floating-label');
+                this.clearButton = this.group.querySelector('.clear-button');
+                this.validationMessage = this.group.querySelector('.validation-message');
+                this.options = options;
+                
+                this.init();
+            }
+
+            init() {
+                // Input events
+                this.input.addEventListener('input', this.handleInput.bind(this));
+                this.input.addEventListener('focus', this.handleFocus.bind(this));
+                this.input.addEventListener('blur', this.handleBlur.bind(this));
+                
+                // Clear button
+                if (this.clearButton) {
+                    this.clearButton.addEventListener('click', this.handleClear.bind(this));
+                }
+                
+                // Initialize state
+                this.updateState();
+            }
+
+            handleInput(e) {
+                this.updateState();
+                
+                // Custom input handler
+                if (this.options.onInput) {
+                    this.options.onInput(e.target.value, this);
+                }
+                
+                // Real-time validation
+                if (this.options.validate) {
+                    this.validate();
+                }
+            }
+
+            handleFocus(e) {
+                this.group.classList.add('focused');
+                
+                if (this.options.onFocus) {
+                    this.options.onFocus(e, this);
+                }
+            }
+
+            handleBlur(e) {
+                this.group.classList.remove('focused');
+                
+                // Validate on blur
+                if (this.options.validate && this.input.value) {
+                    this.validate();
+                }
+                
+                if (this.options.onBlur) {
+                    this.options.onBlur(e, this);
+                }
+            }
+
+            handleClear(e) {
+                e.preventDefault();
+                this.input.value = '';
+                this.input.focus();
+                this.updateState();
+                this.clearValidation();
+                
+                if (this.options.onClear) {
+                    this.options.onClear(this);
+                }
+            }
+
+            updateState() {
+                if (this.input.value) {
+                    this.group.classList.add('has-value');
+                } else {
+                    this.group.classList.remove('has-value');
+                }
+            }
+
+            validate() {
+                const result = this.options.validate(this.input.value);
+                
+                if (result.valid) {
+                    this.showSuccess(result.message);
+                } else {
+                    this.showError(result.message);
+                }
+                
+                return result.valid;
+            }
+
+            showError(message) {
+                this.input.classList.add('error');
+                this.input.classList.remove('success');
+                this.showValidationMessage(message, 'error');
+            }
+
+            showSuccess(message) {
+                this.input.classList.add('success');
+                this.input.classList.remove('error');
+                if (message) {
+                    this.showValidationMessage(message, 'success');
+                }
+            }
+
+            showValidationMessage(message, type) {
+                this.validationMessage.textContent = message;
+                this.validationMessage.className = `validation-message ${type} show`;
+            }
+
+            clearValidation() {
+                this.input.classList.remove('error', 'success');
+                this.validationMessage.className = 'validation-message';
+            }
+
+            setLoading(loading) {
+                if (loading) {
+                    this.group.classList.add('loading');
+                } else {
+                    this.group.classList.remove('loading');
+                }
+            }
+        }
+
+        // Email Autocomplete
+        class EmailAutocomplete extends EnhancedInput {
+            constructor(groupId) {
+                super(groupId, {
+                    onInput: (value, instance) => instance.handleEmailInput(value),
+                    onFocus: (e, instance) => instance.showSuggestions(),
+                    onBlur: (e, instance) => setTimeout(() => instance.hideSuggestions(), 200),
+                    validate: (value) => instance.validateEmail(value)
+                });
+                
+                this.dropdown = this.group.querySelector('.autocomplete-dropdown');
+                this.selectedIndex = -1;
+                this.suggestions = [];
+                this.commonDomains = [
+                    'gmail.com', 'yahoo.com', 'hotmail.com', 'outlook.com', 
+                    'icloud.com', 'aol.com', 'protonmail.com', 'mail.com'
+                ];
+                
+                // Keyboard navigation
+                this.input.addEventListener('keydown', this.handleKeyDown.bind(this));
+            }
+
+            handleEmailInput(value) {
+                if (value.includes('@')) {
+                    const [localPart, domain] = value.split('@');
+                    if (domain && domain.length > 0) {
+                        this.generateSuggestions(localPart, domain);
+                    } else {
+                        this.generateSuggestions(localPart, '');
+                    }
+                } else {
+                    this.hideSuggestions();
+                }
+            }
+
+            generateSuggestions(localPart, partialDomain) {
+                this.suggestions = this.commonDomains
+                    .filter(domain => domain.startsWith(partialDomain.toLowerCase()))
+                    .slice(0, 5)
+                    .map(domain => `${localPart}@${domain}`);
+                
+                if (this.suggestions.length > 0) {
+                    this.renderSuggestions();
+                    this.showSuggestions();
+                } else {
+                    this.hideSuggestions();
+                }
+            }
+
+            renderSuggestions() {
+                const currentValue = this.input.value.toLowerCase();
+                
+                this.dropdown.innerHTML = this.suggestions.map((suggestion, index) => {
+                    const html = suggestion.replace(new RegExp(`(${currentValue})`, 'gi'), '<mark>$1</mark>');
+                    return `
+                        <div class="autocomplete-item" data-index="${index}" data-value="${suggestion}">
+                            ${html}
+                        </div>
+                    `;
+                }).join('');
+                
+                // Add click handlers
+                this.dropdown.querySelectorAll('.autocomplete-item').forEach(item => {
+                    item.addEventListener('click', () => {
+                        this.selectSuggestion(item.dataset.value);
+                    });
+                });
+            }
+
+            showSuggestions() {
+                if (this.suggestions.length > 0 && this.group.classList.contains('focused')) {
+                    this.dropdown.classList.add('show');
+                }
+            }
+
+            hideSuggestions() {
+                this.dropdown.classList.remove('show');
+                this.selectedIndex = -1;
+            }
+
+            handleKeyDown(e) {
+                if (!this.dropdown.classList.contains('show')) return;
+                
+                switch (e.key) {
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        this.navigateSuggestions(1);
+                        break;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        this.navigateSuggestions(-1);
+                        break;
+                    case 'Enter':
+                        if (this.selectedIndex >= 0) {
+                            e.preventDefault();
+                            this.selectSuggestion(this.suggestions[this.selectedIndex]);
+                        }
+                        break;
+                    case 'Escape':
+                        this.hideSuggestions();
+                        break;
+                }
+            }
+
+            navigateSuggestions(direction) {
+                const items = this.dropdown.querySelectorAll('.autocomplete-item');
+                
+                // Remove previous selection
+                if (this.selectedIndex >= 0) {
+                    items[this.selectedIndex].classList.remove('selected');
+                }
+                
+                // Update index
+                this.selectedIndex += direction;
+                
+                // Wrap around
+                if (this.selectedIndex >= items.length) {
+                    this.selectedIndex = 0;
+                } else if (this.selectedIndex < 0) {
+                    this.selectedIndex = items.length - 1;
+                }
+                
+                // Add new selection
+                items[this.selectedIndex].classList.add('selected');
+                items[this.selectedIndex].scrollIntoView({ block: 'nearest' });
+            }
+
+            selectSuggestion(value) {
+                this.input.value = value;
+                this.updateState();
+                this.hideSuggestions();
+                this.validate();
+            }
+
+            validateEmail(value) {
+                if (!value) {
+                    return { valid: false, message: 'Email is required' };
+                }
+                
+                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                
+                if (!emailRegex.test(value)) {
+                    return { valid: false, message: 'Please enter a valid email address' };
+                }
+                
+                // Simulate async validation
+                this.setLoading(true);
+                setTimeout(() => {
+                    this.setLoading(false);
+                    this.showSuccess('Email looks good!');
+                }, 1000);
+                
+                return { valid: true };
+            }
+        }
+
+        // Password Strength Component
+        class PasswordInput extends EnhancedInput {
+            constructor(groupId) {
+                super(groupId, {
+                    onInput: (value, instance) => instance.checkStrength(value),
+                    validate: (value) => instance.validatePassword(value)
+                });
+                
+                this.strengthIndicator = document.getElementById('password-strength');
+                this.strengthFill = this.strengthIndicator.querySelector('.strength-fill');
+                this.strengthValue = this.strengthIndicator.querySelector('.strength-value');
+                this.requirements = this.strengthIndicator.querySelectorAll('.requirement');
+            }
+
+            checkStrength(value) {
+                if (!value) {
+                    this.strengthIndicator.classList.remove('show');
+                    return;
+                }
+                
+                this.strengthIndicator.classList.add('show');
+                
+                const checks = {
+                    length: value.length >= 8,
+                    uppercase: /[A-Z]/.test(value),
+                    number: /[0-9]/.test(value),
+                    special: /[^A-Za-z0-9]/.test(value)
+                };
+                
+                // Update requirements
+                Object.entries(checks).forEach(([req, met]) => {
+                    const element = this.strengthIndicator.querySelector(`[data-req="${req}"]`);
+                    if (met) {
+                        element.classList.add('met');
+                        element.querySelector('.icon').innerHTML = '<polyline points="20 6 9 17 4 12"></polyline>';
+                    } else {
+                        element.classList.remove('met');
+                        element.querySelector('.icon').innerHTML = '<circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path>';
+                    }
+                });
+                
+                // Calculate strength
+                const score = Object.values(checks).filter(Boolean).length;
+                
+                if (score <= 1) {
+                    this.setStrength('weak', 'Weak');
+                } else if (score <= 3) {
+                    this.setStrength('medium', 'Medium');
+                } else {
+                    this.setStrength('strong', 'Strong');
+                }
+            }
+
+            setStrength(level, text) {
+                this.strengthFill.className = `strength-fill ${level}`;
+                this.strengthValue.textContent = text;
+            }
+
+            validatePassword(value) {
+                if (!value) {
+                    return { valid: false, message: 'Password is required' };
+                }
+                
+                if (value.length < 8) {
+                    return { valid: false, message: 'Password must be at least 8 characters' };
+                }
+                
+                return { valid: true };
+            }
+        }
+
+        // Character Counter Component
+        class CharacterCounterInput extends EnhancedInput {
+            constructor(groupId) {
+                super(groupId, {
+                    onInput: (value, instance) => instance.updateCounter(value),
+                    validate: (value) => instance.validateMessage(value)
+                });
+                
+                this.counter = this.group.querySelector('.char-counter');
+                this.maxLength = parseInt(this.input.getAttribute('maxlength'));
+            }
+
+            updateCounter(value) {
+                const length = value.length;
+                this.counter.textContent = `${length} / ${this.maxLength}`;
+                
+                if (length > this.maxLength * 0.9) {
+                    this.counter.classList.add('error');
+                    this.counter.classList.remove('warning');
+                } else if (length > this.maxLength * 0.75) {
+                    this.counter.classList.add('warning');
+                    this.counter.classList.remove('error');
+                } else {
+                    this.counter.classList.remove('warning', 'error');
+                }
+            }
+
+            validateMessage(value) {
+                if (!value) {
+                    return { valid: false, message: 'Message cannot be empty' };
+                }
+                
+                if (value.length < 3) {
+                    return { valid: false, message: 'Message is too short' };
+                }
+                
+                return { valid: true, message: 'Perfect length!' };
+            }
+        }
+
+        // Initialize all components
+        document.addEventListener('DOMContentLoaded', () => {
+            // Basic input with validation
+            new EnhancedInput('name-group', {
+                validate: (value) => {
+                    if (!value) {
+                        return { valid: false, message: 'Name is required' };
+                    }
+                    if (value.length < 2) {
+                        return { valid: false, message: 'Name must be at least 2 characters' };
+                    }
+                    if (!/^[a-zA-Z\s'-]+$/.test(value)) {
+                        return { valid: false, message: 'Name can only contain letters, spaces, hyphens, and apostrophes' };
+                    }
+                    return { valid: true, message: 'Great name!' };
+                }
+            });
+            
+            // Email with autocomplete
+            new EmailAutocomplete('email-group');
+            
+            // Password with strength meter
+            new PasswordInput('password-group');
+            
+            // Message with character counter
+            new CharacterCounterInput('message-group');
+        });
+
+        // Prevent iOS zoom on input focus
+        document.addEventListener('gesturestart', e => e.preventDefault());
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src_enhanced/ui_enhanced_10.html b/legacy/src_enhanced/ui_enhanced_10.html
new file mode 100644
index 0000000..a18f504
--- /dev/null
+++ b/legacy/src_enhanced/ui_enhanced_10.html
@@ -0,0 +1,1213 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Date Picker Enhanced</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --primary: #2563eb;
+            --primary-hover: #1d4ed8;
+            --primary-light: #dbeafe;
+            --secondary: #64748b;
+            --text: #1e293b;
+            --text-light: #64748b;
+            --bg: #ffffff;
+            --bg-hover: #f8fafc;
+            --border: #e2e8f0;
+            --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+            --radius: 12px;
+            --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            color: var(--text);
+        }
+
+        main {
+            width: 100%;
+            max-width: 1200px;
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 800;
+            text-align: center;
+            margin-bottom: 3rem;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .component-showcase {
+            background: var(--bg);
+            border-radius: 16px;
+            padding: 3rem;
+            box-shadow: var(--shadow);
+            position: relative;
+        }
+
+        .demo-container {
+            display: grid;
+            gap: 2rem;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        }
+
+        .demo-section {
+            background: var(--bg-hover);
+            border-radius: var(--radius);
+            padding: 1.5rem;
+        }
+
+        .demo-section h3 {
+            font-size: 1.125rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: var(--text);
+        }
+
+        /* Date Input Styling */
+        .date-input-wrapper {
+            position: relative;
+            margin-bottom: 1rem;
+        }
+
+        .date-input {
+            width: 100%;
+            padding: 0.75rem 2.5rem 0.75rem 1rem;
+            border: 2px solid var(--border);
+            border-radius: 8px;
+            font-size: 1rem;
+            transition: var(--transition);
+            background: var(--bg);
+            cursor: pointer;
+        }
+
+        .date-input:hover {
+            border-color: var(--primary-light);
+        }
+
+        .date-input:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+        }
+
+        .calendar-icon {
+            position: absolute;
+            right: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 20px;
+            height: 20px;
+            pointer-events: none;
+            color: var(--text-light);
+        }
+
+        /* Date Picker Container */
+        .date-picker {
+            position: absolute;
+            top: calc(100% + 8px);
+            left: 0;
+            z-index: 1000;
+            background: var(--bg);
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            padding: 1rem;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-10px);
+            transition: var(--transition);
+            min-width: 320px;
+        }
+
+        .date-picker.active {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
+
+        /* Date Picker Header */
+        .picker-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 1rem;
+            gap: 1rem;
+        }
+
+        .month-year-select {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .month-select, .year-select {
+            padding: 0.5rem;
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            background: var(--bg);
+            font-size: 0.875rem;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        .month-select:hover, .year-select:hover {
+            border-color: var(--primary);
+        }
+
+        .nav-buttons {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .nav-btn {
+            width: 32px;
+            height: 32px;
+            border: none;
+            background: var(--bg-hover);
+            border-radius: 6px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: var(--transition);
+            color: var(--text);
+        }
+
+        .nav-btn:hover {
+            background: var(--primary-light);
+            color: var(--primary);
+        }
+
+        .nav-btn:active {
+            transform: scale(0.95);
+        }
+
+        /* Calendar Grid */
+        .calendar-wrapper {
+            position: relative;
+            overflow: hidden;
+            height: 280px;
+        }
+
+        .calendar-grid {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            gap: 2px;
+            position: absolute;
+            width: 100%;
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .calendar-grid.prev {
+            transform: translateX(-100%);
+        }
+
+        .calendar-grid.next {
+            transform: translateX(100%);
+        }
+
+        .calendar-grid.animating-prev {
+            animation: slideInFromLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .calendar-grid.animating-next {
+            animation: slideInFromRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        @keyframes slideInFromLeft {
+            from { transform: translateX(-100%); }
+            to { transform: translateX(0); }
+        }
+
+        @keyframes slideInFromRight {
+            from { transform: translateX(100%); }
+            to { transform: translateX(0); }
+        }
+
+        .day-header {
+            font-size: 0.75rem;
+            font-weight: 600;
+            text-align: center;
+            padding: 0.5rem;
+            color: var(--text-light);
+        }
+
+        .day-cell {
+            aspect-ratio: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 0.875rem;
+            position: relative;
+            transition: var(--transition);
+            background: var(--bg);
+            border: 1px solid transparent;
+        }
+
+        .day-cell:hover:not(.disabled):not(.other-month) {
+            background: var(--bg-hover);
+            border-color: var(--border);
+            transform: scale(1.05);
+        }
+
+        .day-cell.today {
+            background: var(--primary-light);
+            color: var(--primary);
+            font-weight: 600;
+        }
+
+        .day-cell.selected {
+            background: var(--primary);
+            color: white;
+            font-weight: 600;
+        }
+
+        .day-cell.in-range {
+            background: var(--primary-light);
+            color: var(--primary);
+        }
+
+        .day-cell.range-start {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        .day-cell.range-end {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        .day-cell.disabled {
+            color: var(--text-light);
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+
+        .day-cell.other-month {
+            color: var(--text-light);
+            opacity: 0.5;
+        }
+
+        .week-number {
+            font-size: 0.625rem;
+            color: var(--text-light);
+            position: absolute;
+            top: 2px;
+            right: 4px;
+            opacity: 0.6;
+        }
+
+        /* Quick Presets */
+        .presets {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+            padding-top: 1rem;
+            border-top: 1px solid var(--border);
+        }
+
+        .preset-btn {
+            padding: 0.375rem 0.75rem;
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            background: var(--bg);
+            font-size: 0.75rem;
+            cursor: pointer;
+            transition: var(--transition);
+            white-space: nowrap;
+        }
+
+        .preset-btn:hover {
+            background: var(--primary-light);
+            border-color: var(--primary);
+            color: var(--primary);
+        }
+
+        /* Time Picker */
+        .time-picker {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 1rem;
+            border-top: 1px solid var(--border);
+        }
+
+        .time-input {
+            width: 60px;
+            padding: 0.5rem;
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            text-align: center;
+            font-size: 0.875rem;
+        }
+
+        .time-separator {
+            font-weight: 600;
+            color: var(--text-light);
+        }
+
+        /* Keyboard shortcuts hint */
+        .keyboard-hint {
+            position: absolute;
+            bottom: -40px;
+            left: 0;
+            right: 0;
+            text-align: center;
+            font-size: 0.75rem;
+            color: var(--text-light);
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+
+        .date-picker:focus-within .keyboard-hint {
+            opacity: 1;
+        }
+
+        /* Multi-select styles */
+        .multi-select-badge {
+            position: absolute;
+            top: -6px;
+            right: -6px;
+            background: var(--primary);
+            color: white;
+            font-size: 0.625rem;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+        }
+
+        /* Mobile optimizations */
+        @media (max-width: 640px) {
+            .date-picker {
+                position: fixed;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: calc(100vw - 40px);
+                max-width: 360px;
+            }
+
+            .date-picker.active {
+                transform: translate(-50%, -50%);
+            }
+
+            .backdrop {
+                position: fixed;
+                inset: 0;
+                background: rgba(0, 0, 0, 0.5);
+                z-index: 999;
+                opacity: 0;
+                visibility: hidden;
+                transition: var(--transition);
+            }
+
+            .backdrop.active {
+                opacity: 1;
+                visibility: visible;
+            }
+        }
+
+        /* Focus indicators */
+        .day-cell:focus {
+            outline: 2px solid var(--primary);
+            outline-offset: -1px;
+        }
+
+        /* Loading state */
+        .loading {
+            position: absolute;
+            inset: 0;
+            background: rgba(255, 255, 255, 0.9);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--radius);
+        }
+
+        .spinner {
+            width: 24px;
+            height: 24px;
+            border: 3px solid var(--border);
+            border-top-color: var(--primary);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Date Picker - Enhanced</h1>
+        
+        <div class="component-showcase">
+            <div class="demo-container">
+                <!-- Single Date Picker -->
+                <div class="demo-section">
+                    <h3>Single Date Selection</h3>
+                    <div class="date-input-wrapper">
+                        <input type="text" class="date-input" id="singleDate" placeholder="Select a date" readonly>
+                        <svg class="calendar-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                    </div>
+                    <p style="font-size: 0.875rem; color: var(--text-light); margin-top: 0.5rem;">
+                        Use arrow keys to navigate, Enter to select
+                    </p>
+                </div>
+
+                <!-- Date Range Picker -->
+                <div class="demo-section">
+                    <h3>Date Range Selection</h3>
+                    <div class="date-input-wrapper">
+                        <input type="text" class="date-input" id="dateRange" placeholder="Select date range" readonly>
+                        <svg class="calendar-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                    </div>
+                    <p style="font-size: 0.875rem; color: var(--text-light); margin-top: 0.5rem;">
+                        Click start date, then end date
+                    </p>
+                </div>
+
+                <!-- Date Time Picker -->
+                <div class="demo-section">
+                    <h3>Date & Time Selection</h3>
+                    <div class="date-input-wrapper">
+                        <input type="text" class="date-input" id="dateTime" placeholder="Select date and time" readonly>
+                        <svg class="calendar-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </div>
+                    <p style="font-size: 0.875rem; color: var(--text-light); margin-top: 0.5rem;">
+                        Includes time picker integration
+                    </p>
+                </div>
+
+                <!-- Multiple Dates Picker -->
+                <div class="demo-section">
+                    <h3>Multiple Date Selection</h3>
+                    <div class="date-input-wrapper">
+                        <input type="text" class="date-input" id="multiDate" placeholder="Select multiple dates" readonly>
+                        <svg class="calendar-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                        </svg>
+                    </div>
+                    <p style="font-size: 0.875rem; color: var(--text-light); margin-top: 0.5rem;">
+                        Ctrl/Cmd + click to select multiple
+                    </p>
+                </div>
+            </div>
+
+            <div class="backdrop" id="backdrop"></div>
+        </div>
+    </main>
+
+    <script>
+        class EnhancedDatePicker {
+            constructor(input, options = {}) {
+                this.input = input;
+                this.options = {
+                    mode: 'single', // single, range, multi
+                    showTime: false,
+                    showWeekNumbers: false,
+                    minDate: null,
+                    maxDate: null,
+                    disabledDates: [],
+                    locale: 'en-US',
+                    firstDayOfWeek: 0, // 0 = Sunday
+                    ...options
+                };
+
+                this.selectedDates = [];
+                this.rangeStart = null;
+                this.rangeEnd = null;
+                this.currentMonth = new Date().getMonth();
+                this.currentYear = new Date().getFullYear();
+                this.isAnimating = false;
+                
+                this.init();
+            }
+
+            init() {
+                this.createPicker();
+                this.attachEventListeners();
+                this.updateCalendar();
+            }
+
+            createPicker() {
+                // Create picker container
+                this.picker = document.createElement('div');
+                this.picker.className = 'date-picker';
+                this.picker.setAttribute('tabindex', '-1');
+
+                // Create header
+                const header = document.createElement('div');
+                header.className = 'picker-header';
+
+                // Month/Year selects
+                const monthYearSelect = document.createElement('div');
+                monthYearSelect.className = 'month-year-select';
+
+                this.monthSelect = document.createElement('select');
+                this.monthSelect.className = 'month-select';
+                const months = [];
+                for (let i = 0; i < 12; i++) {
+                    const date = new Date(2000, i, 1);
+                    months.push(date.toLocaleDateString(this.options.locale, { month: 'long' }));
+                }
+                months.forEach((month, index) => {
+                    const option = document.createElement('option');
+                    option.value = index;
+                    option.textContent = month;
+                    this.monthSelect.appendChild(option);
+                });
+
+                this.yearSelect = document.createElement('select');
+                this.yearSelect.className = 'year-select';
+                const currentYear = new Date().getFullYear();
+                for (let year = currentYear - 100; year <= currentYear + 100; year++) {
+                    const option = document.createElement('option');
+                    option.value = year;
+                    option.textContent = year;
+                    this.yearSelect.appendChild(option);
+                }
+
+                monthYearSelect.appendChild(this.monthSelect);
+                monthYearSelect.appendChild(this.yearSelect);
+
+                // Navigation buttons
+                const navButtons = document.createElement('div');
+                navButtons.className = 'nav-buttons';
+
+                this.prevBtn = document.createElement('button');
+                this.prevBtn.className = 'nav-btn';
+                this.prevBtn.innerHTML = '‹';
+                this.prevBtn.setAttribute('aria-label', 'Previous month');
+
+                this.nextBtn = document.createElement('button');
+                this.nextBtn.className = 'nav-btn';
+                this.nextBtn.innerHTML = '›';
+                this.nextBtn.setAttribute('aria-label', 'Next month');
+
+                navButtons.appendChild(this.prevBtn);
+                navButtons.appendChild(this.nextBtn);
+
+                header.appendChild(monthYearSelect);
+                header.appendChild(navButtons);
+
+                // Calendar wrapper
+                this.calendarWrapper = document.createElement('div');
+                this.calendarWrapper.className = 'calendar-wrapper';
+
+                // Presets
+                if (this.options.mode !== 'multi') {
+                    this.presetsContainer = document.createElement('div');
+                    this.presetsContainer.className = 'presets';
+                    
+                    const presets = [
+                        { label: 'Today', value: () => [new Date()] },
+                        { label: 'Yesterday', value: () => [new Date(Date.now() - 86400000)] },
+                        { label: 'Last Week', value: () => {
+                            const end = new Date();
+                            const start = new Date(Date.now() - 7 * 86400000);
+                            return [start, end];
+                        }},
+                        { label: 'Last Month', value: () => {
+                            const end = new Date();
+                            const start = new Date(Date.now() - 30 * 86400000);
+                            return [start, end];
+                        }}
+                    ];
+
+                    presets.forEach(preset => {
+                        const btn = document.createElement('button');
+                        btn.className = 'preset-btn';
+                        btn.textContent = preset.label;
+                        btn.addEventListener('click', () => {
+                            const dates = preset.value();
+                            if (this.options.mode === 'range' && dates.length === 2) {
+                                this.rangeStart = dates[0];
+                                this.rangeEnd = dates[1];
+                                this.updateInput();
+                                this.close();
+                            } else if (dates.length === 1) {
+                                this.selectedDates = dates;
+                                this.updateInput();
+                                this.close();
+                            }
+                        });
+                        this.presetsContainer.appendChild(btn);
+                    });
+                }
+
+                // Time picker
+                if (this.options.showTime) {
+                    this.timePicker = document.createElement('div');
+                    this.timePicker.className = 'time-picker';
+                    
+                    this.hourInput = document.createElement('input');
+                    this.hourInput.className = 'time-input';
+                    this.hourInput.type = 'number';
+                    this.hourInput.min = '0';
+                    this.hourInput.max = '23';
+                    this.hourInput.value = '12';
+                    
+                    const separator = document.createElement('span');
+                    separator.className = 'time-separator';
+                    separator.textContent = ':';
+                    
+                    this.minuteInput = document.createElement('input');
+                    this.minuteInput.className = 'time-input';
+                    this.minuteInput.type = 'number';
+                    this.minuteInput.min = '0';
+                    this.minuteInput.max = '59';
+                    this.minuteInput.value = '00';
+                    
+                    this.timePicker.appendChild(this.hourInput);
+                    this.timePicker.appendChild(separator);
+                    this.timePicker.appendChild(this.minuteInput);
+                }
+
+                // Keyboard hint
+                const keyboardHint = document.createElement('div');
+                keyboardHint.className = 'keyboard-hint';
+                keyboardHint.textContent = '↑↓←→ Navigate • Enter Select • PgUp/PgDn Month • Esc Close';
+
+                // Assemble picker
+                this.picker.appendChild(header);
+                this.picker.appendChild(this.calendarWrapper);
+                if (this.presetsContainer) {
+                    this.picker.appendChild(this.presetsContainer);
+                }
+                if (this.timePicker) {
+                    this.picker.appendChild(this.timePicker);
+                }
+                this.picker.appendChild(keyboardHint);
+
+                // Add to wrapper
+                this.input.parentElement.appendChild(this.picker);
+            }
+
+            updateCalendar() {
+                if (this.isAnimating) return;
+
+                this.monthSelect.value = this.currentMonth;
+                this.yearSelect.value = this.currentYear;
+
+                const newGrid = this.createCalendarGrid();
+                
+                if (this.currentGrid) {
+                    this.isAnimating = true;
+                    this.calendarWrapper.appendChild(newGrid);
+                    
+                    setTimeout(() => {
+                        this.currentGrid.remove();
+                        this.currentGrid = newGrid;
+                        this.isAnimating = false;
+                    }, 300);
+                } else {
+                    this.calendarWrapper.appendChild(newGrid);
+                    this.currentGrid = newGrid;
+                }
+            }
+
+            createCalendarGrid() {
+                const grid = document.createElement('div');
+                grid.className = 'calendar-grid';
+
+                // Day headers
+                const dayNames = [];
+                for (let i = 0; i < 7; i++) {
+                    const date = new Date(2000, 0, 2 + i); // January 2, 2000 was a Sunday
+                    dayNames.push(date.toLocaleDateString(this.options.locale, { weekday: 'short' }));
+                }
+
+                // Reorder based on firstDayOfWeek
+                const orderedDayNames = [
+                    ...dayNames.slice(this.options.firstDayOfWeek),
+                    ...dayNames.slice(0, this.options.firstDayOfWeek)
+                ];
+
+                orderedDayNames.forEach(day => {
+                    const header = document.createElement('div');
+                    header.className = 'day-header';
+                    header.textContent = day.substring(0, 2);
+                    grid.appendChild(header);
+                });
+
+                // Calculate days
+                const firstDay = new Date(this.currentYear, this.currentMonth, 1);
+                const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0);
+                const prevLastDay = new Date(this.currentYear, this.currentMonth, 0);
+                
+                let startDay = firstDay.getDay() - this.options.firstDayOfWeek;
+                if (startDay < 0) startDay += 7;
+
+                // Previous month days
+                for (let i = startDay - 1; i >= 0; i--) {
+                    const date = new Date(this.currentYear, this.currentMonth - 1, prevLastDay.getDate() - i);
+                    grid.appendChild(this.createDayCell(date, true));
+                }
+
+                // Current month days
+                for (let day = 1; day <= lastDay.getDate(); day++) {
+                    const date = new Date(this.currentYear, this.currentMonth, day);
+                    grid.appendChild(this.createDayCell(date, false));
+                }
+
+                // Next month days
+                const remainingCells = 42 - grid.children.length + 7; // +7 for headers
+                for (let day = 1; day <= remainingCells - 7; day++) {
+                    const date = new Date(this.currentYear, this.currentMonth + 1, day);
+                    grid.appendChild(this.createDayCell(date, true));
+                }
+
+                return grid;
+            }
+
+            createDayCell(date, isOtherMonth) {
+                const cell = document.createElement('button');
+                cell.className = 'day-cell';
+                cell.setAttribute('role', 'gridcell');
+                cell.setAttribute('aria-label', date.toLocaleDateString(this.options.locale));
+                
+                if (isOtherMonth) {
+                    cell.classList.add('other-month');
+                }
+
+                // Check if today
+                const today = new Date();
+                if (this.isSameDay(date, today)) {
+                    cell.classList.add('today');
+                }
+
+                // Check if selected
+                if (this.options.mode === 'single' || this.options.mode === 'multi') {
+                    this.selectedDates.forEach(selected => {
+                        if (this.isSameDay(date, selected)) {
+                            cell.classList.add('selected');
+                        }
+                    });
+                } else if (this.options.mode === 'range') {
+                    if (this.rangeStart && this.isSameDay(date, this.rangeStart)) {
+                        cell.classList.add('selected', 'range-start');
+                    }
+                    if (this.rangeEnd && this.isSameDay(date, this.rangeEnd)) {
+                        cell.classList.add('selected', 'range-end');
+                    }
+                    if (this.rangeStart && this.rangeEnd && 
+                        date > this.rangeStart && date < this.rangeEnd) {
+                        cell.classList.add('in-range');
+                    }
+                }
+
+                // Check if disabled
+                if (this.isDateDisabled(date)) {
+                    cell.classList.add('disabled');
+                    cell.disabled = true;
+                }
+
+                // Day number
+                const dayNumber = document.createElement('span');
+                dayNumber.textContent = date.getDate();
+                cell.appendChild(dayNumber);
+
+                // Week number
+                if (this.options.showWeekNumbers && date.getDay() === this.options.firstDayOfWeek) {
+                    const weekNumber = document.createElement('span');
+                    weekNumber.className = 'week-number';
+                    weekNumber.textContent = this.getWeekNumber(date);
+                    cell.appendChild(weekNumber);
+                }
+
+                // Multi-select badge
+                if (this.options.mode === 'multi') {
+                    const count = this.selectedDates.filter(d => this.isSameDay(d, date)).length;
+                    if (count > 1) {
+                        const badge = document.createElement('span');
+                        badge.className = 'multi-select-badge';
+                        badge.textContent = count;
+                        cell.appendChild(badge);
+                    }
+                }
+
+                // Click handler
+                cell.addEventListener('click', () => this.selectDate(date));
+
+                return cell;
+            }
+
+            selectDate(date) {
+                if (this.isDateDisabled(date)) return;
+
+                if (this.options.mode === 'single') {
+                    this.selectedDates = [date];
+                    this.updateInput();
+                    this.close();
+                } else if (this.options.mode === 'range') {
+                    if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {
+                        this.rangeStart = date;
+                        this.rangeEnd = null;
+                    } else {
+                        if (date < this.rangeStart) {
+                            this.rangeEnd = this.rangeStart;
+                            this.rangeStart = date;
+                        } else {
+                            this.rangeEnd = date;
+                        }
+                        this.updateInput();
+                        this.close();
+                    }
+                } else if (this.options.mode === 'multi') {
+                    const index = this.selectedDates.findIndex(d => this.isSameDay(d, date));
+                    if (index > -1) {
+                        this.selectedDates.splice(index, 1);
+                    } else {
+                        this.selectedDates.push(date);
+                    }
+                    this.updateInput();
+                }
+
+                this.updateCalendar();
+            }
+
+            attachEventListeners() {
+                // Input click
+                this.input.addEventListener('click', () => this.toggle());
+
+                // Month/Year change
+                this.monthSelect.addEventListener('change', (e) => {
+                    this.currentMonth = parseInt(e.target.value);
+                    this.updateCalendar();
+                });
+
+                this.yearSelect.addEventListener('change', (e) => {
+                    this.currentYear = parseInt(e.target.value);
+                    this.updateCalendar();
+                });
+
+                // Navigation buttons
+                this.prevBtn.addEventListener('click', () => this.navigate(-1));
+                this.nextBtn.addEventListener('click', () => this.navigate(1));
+
+                // Keyboard navigation
+                this.picker.addEventListener('keydown', (e) => this.handleKeyboard(e));
+
+                // Click outside
+                document.addEventListener('click', (e) => {
+                    if (!this.picker.contains(e.target) && !this.input.contains(e.target)) {
+                        this.close();
+                    }
+                });
+
+                // Mobile backdrop
+                const backdrop = document.getElementById('backdrop');
+                if (backdrop) {
+                    backdrop.addEventListener('click', () => this.close());
+                }
+            }
+
+            handleKeyboard(e) {
+                const focusedDate = this.getFocusedDate();
+                let newDate;
+
+                switch(e.key) {
+                    case 'ArrowLeft':
+                        e.preventDefault();
+                        newDate = new Date(focusedDate);
+                        newDate.setDate(newDate.getDate() - 1);
+                        this.focusDate(newDate);
+                        break;
+                    case 'ArrowRight':
+                        e.preventDefault();
+                        newDate = new Date(focusedDate);
+                        newDate.setDate(newDate.getDate() + 1);
+                        this.focusDate(newDate);
+                        break;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        newDate = new Date(focusedDate);
+                        newDate.setDate(newDate.getDate() - 7);
+                        this.focusDate(newDate);
+                        break;
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        newDate = new Date(focusedDate);
+                        newDate.setDate(newDate.getDate() + 7);
+                        this.focusDate(newDate);
+                        break;
+                    case 'PageUp':
+                        e.preventDefault();
+                        this.navigate(-1);
+                        break;
+                    case 'PageDown':
+                        e.preventDefault();
+                        this.navigate(1);
+                        break;
+                    case 'Enter':
+                        e.preventDefault();
+                        this.selectDate(focusedDate);
+                        break;
+                    case 'Escape':
+                        e.preventDefault();
+                        this.close();
+                        break;
+                }
+            }
+
+            getFocusedDate() {
+                const focused = this.picker.querySelector('.day-cell:focus');
+                if (focused) {
+                    // Extract date from focused cell
+                    const day = parseInt(focused.textContent);
+                    return new Date(this.currentYear, this.currentMonth, day);
+                }
+                return new Date();
+            }
+
+            focusDate(date) {
+                if (date.getMonth() !== this.currentMonth || date.getFullYear() !== this.currentYear) {
+                    this.currentMonth = date.getMonth();
+                    this.currentYear = date.getFullYear();
+                    this.updateCalendar();
+                }
+
+                setTimeout(() => {
+                    const cells = this.picker.querySelectorAll('.day-cell:not(.other-month)');
+                    cells.forEach(cell => {
+                        if (parseInt(cell.textContent) === date.getDate()) {
+                            cell.focus();
+                        }
+                    });
+                }, 100);
+            }
+
+            navigate(direction) {
+                if (this.isAnimating) return;
+
+                const oldGrid = this.currentGrid;
+                
+                this.currentMonth += direction;
+                if (this.currentMonth > 11) {
+                    this.currentMonth = 0;
+                    this.currentYear++;
+                } else if (this.currentMonth < 0) {
+                    this.currentMonth = 11;
+                    this.currentYear--;
+                }
+
+                this.monthSelect.value = this.currentMonth;
+                this.yearSelect.value = this.currentYear;
+
+                // Create new grid
+                const newGrid = this.createCalendarGrid();
+                
+                // Animate transition
+                this.isAnimating = true;
+                
+                if (direction > 0) {
+                    newGrid.classList.add('next');
+                    this.calendarWrapper.appendChild(newGrid);
+                    
+                    setTimeout(() => {
+                        oldGrid.classList.add('prev');
+                        newGrid.classList.remove('next');
+                        newGrid.classList.add('animating-next');
+                    }, 10);
+                } else {
+                    newGrid.classList.add('prev');
+                    this.calendarWrapper.appendChild(newGrid);
+                    
+                    setTimeout(() => {
+                        oldGrid.classList.add('next');
+                        newGrid.classList.remove('prev');
+                        newGrid.classList.add('animating-prev');
+                    }, 10);
+                }
+
+                setTimeout(() => {
+                    oldGrid.remove();
+                    newGrid.classList.remove('animating-prev', 'animating-next');
+                    this.currentGrid = newGrid;
+                    this.isAnimating = false;
+                }, 300);
+            }
+
+            updateInput() {
+                let value = '';
+
+                if (this.options.mode === 'single' && this.selectedDates.length > 0) {
+                    value = this.formatDate(this.selectedDates[0]);
+                } else if (this.options.mode === 'range' && this.rangeStart && this.rangeEnd) {
+                    value = `${this.formatDate(this.rangeStart)} - ${this.formatDate(this.rangeEnd)}`;
+                } else if (this.options.mode === 'multi' && this.selectedDates.length > 0) {
+                    const sorted = [...this.selectedDates].sort((a, b) => a - b);
+                    value = sorted.map(d => this.formatDate(d)).join(', ');
+                    if (value.length > 30) {
+                        value = `${this.selectedDates.length} dates selected`;
+                    }
+                }
+
+                this.input.value = value;
+            }
+
+            formatDate(date) {
+                if (this.options.showTime) {
+                    const hours = this.hourInput ? this.hourInput.value : date.getHours();
+                    const minutes = this.minuteInput ? this.minuteInput.value : date.getMinutes();
+                    date.setHours(hours, minutes);
+                    return date.toLocaleString(this.options.locale, {
+                        year: 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit'
+                    });
+                }
+                
+                return date.toLocaleDateString(this.options.locale, {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric'
+                });
+            }
+
+            isSameDay(date1, date2) {
+                return date1.getFullYear() === date2.getFullYear() &&
+                       date1.getMonth() === date2.getMonth() &&
+                       date1.getDate() === date2.getDate();
+            }
+
+            isDateDisabled(date) {
+                if (this.options.minDate && date < this.options.minDate) return true;
+                if (this.options.maxDate && date > this.options.maxDate) return true;
+                
+                return this.options.disabledDates.some(disabled => 
+                    this.isSameDay(date, disabled)
+                );
+            }
+
+            getWeekNumber(date) {
+                const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+                const dayNum = d.getUTCDay() || 7;
+                d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+                const yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
+                return Math.ceil((((d - yearStart) / 86400000) + 1)/7);
+            }
+
+            toggle() {
+                if (this.picker.classList.contains('active')) {
+                    this.close();
+                } else {
+                    this.open();
+                }
+            }
+
+            open() {
+                this.picker.classList.add('active');
+                
+                // Mobile backdrop
+                const backdrop = document.getElementById('backdrop');
+                if (backdrop && window.innerWidth <= 640) {
+                    backdrop.classList.add('active');
+                }
+
+                // Position picker
+                this.positionPicker();
+                
+                // Focus picker
+                setTimeout(() => this.picker.focus(), 100);
+            }
+
+            close() {
+                this.picker.classList.remove('active');
+                
+                // Mobile backdrop
+                const backdrop = document.getElementById('backdrop');
+                if (backdrop) {
+                    backdrop.classList.remove('active');
+                }
+            }
+
+            positionPicker() {
+                if (window.innerWidth <= 640) return; // Fixed position on mobile
+
+                const inputRect = this.input.getBoundingClientRect();
+                const pickerRect = this.picker.getBoundingClientRect();
+                
+                // Check if picker would go off-screen
+                if (inputRect.bottom + pickerRect.height > window.innerHeight) {
+                    // Position above input
+                    this.picker.style.top = 'auto';
+                    this.picker.style.bottom = `calc(100% + 8px)`;
+                } else {
+                    // Position below input
+                    this.picker.style.top = `calc(100% + 8px)`;
+                    this.picker.style.bottom = 'auto';
+                }
+                
+                if (inputRect.left + pickerRect.width > window.innerWidth) {
+                    // Align to right edge
+                    this.picker.style.left = 'auto';
+                    this.picker.style.right = '0';
+                } else {
+                    // Align to left edge
+                    this.picker.style.left = '0';
+                    this.picker.style.right = 'auto';
+                }
+            }
+        }
+
+        // Initialize demo pickers
+        document.addEventListener('DOMContentLoaded', () => {
+            // Single date picker
+            new EnhancedDatePicker(document.getElementById('singleDate'), {
+                mode: 'single',
+                showWeekNumbers: true
+            });
+
+            // Date range picker
+            new EnhancedDatePicker(document.getElementById('dateRange'), {
+                mode: 'range'
+            });
+
+            // Date time picker
+            new EnhancedDatePicker(document.getElementById('dateTime'), {
+                mode: 'single',
+                showTime: true
+            });
+
+            // Multiple dates picker
+            new EnhancedDatePicker(document.getElementById('multiDate'), {
+                mode: 'multi',
+                showWeekNumbers: true
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src_enhanced/ui_enhanced_2.html b/legacy/src_enhanced/ui_enhanced_2.html
new file mode 100644
index 0000000..3114882
--- /dev/null
+++ b/legacy/src_enhanced/ui_enhanced_2.html
@@ -0,0 +1,1172 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dropdown Enhanced</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, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+            padding: 2rem;
+            line-height: 1.6;
+        }
+
+        main {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        h1 {
+            text-align: center;
+            color: #2c3e50;
+            margin-bottom: 3rem;
+            font-size: 2.5rem;
+            font-weight: 300;
+            letter-spacing: -0.5px;
+        }
+
+        .component-showcase {
+            display: flex;
+            flex-direction: column;
+            gap: 3rem;
+            align-items: center;
+        }
+
+        .dropdown-container {
+            width: 100%;
+            max-width: 400px;
+        }
+
+        .dropdown-label {
+            display: block;
+            margin-bottom: 0.5rem;
+            color: #4a5568;
+            font-size: 0.875rem;
+            font-weight: 500;
+            letter-spacing: 0.025em;
+        }
+
+        .dropdown {
+            position: relative;
+            width: 100%;
+        }
+
+        .dropdown-trigger {
+            width: 100%;
+            min-height: 48px;
+            padding: 0.75rem 3rem 0.75rem 1rem;
+            background: white;
+            border: 2px solid #e2e8f0;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            flex-wrap: wrap;
+            font-size: 1rem;
+            color: #2d3748;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .dropdown-trigger:hover {
+            border-color: #cbd5e0;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        }
+
+        .dropdown-trigger:focus {
+            outline: none;
+            border-color: #4299e1;
+            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
+        }
+
+        .dropdown.open .dropdown-trigger {
+            border-color: #4299e1;
+            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
+        }
+
+        .dropdown-arrow {
+            position: absolute;
+            right: 1rem;
+            top: 50%;
+            transform: translateY(-50%);
+            pointer-events: none;
+            transition: transform 0.2s ease;
+        }
+
+        .dropdown.open .dropdown-arrow {
+            transform: translateY(-50%) rotate(180deg);
+        }
+
+        .dropdown-arrow svg {
+            width: 20px;
+            height: 20px;
+            color: #718096;
+        }
+
+        .dropdown-placeholder {
+            color: #a0aec0;
+        }
+
+        .dropdown-tag {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.25rem;
+            padding: 0.25rem 0.5rem;
+            background: #edf2f7;
+            border-radius: 6px;
+            font-size: 0.875rem;
+            color: #4a5568;
+            animation: tagFadeIn 0.2s ease;
+        }
+
+        @keyframes tagFadeIn {
+            from {
+                opacity: 0;
+                transform: scale(0.8);
+            }
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+
+        .dropdown-tag-remove {
+            cursor: pointer;
+            padding: 0.125rem;
+            margin-left: 0.25rem;
+            border-radius: 3px;
+            transition: all 0.15s ease;
+        }
+
+        .dropdown-tag-remove:hover {
+            background: #cbd5e0;
+        }
+
+        .dropdown-tag-remove svg {
+            width: 14px;
+            height: 14px;
+        }
+
+        .dropdown-menu {
+            position: absolute;
+            top: calc(100% + 0.5rem);
+            left: 0;
+            right: 0;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
+            z-index: 1000;
+            opacity: 0;
+            transform: translateY(-10px);
+            pointer-events: none;
+            transition: all 0.2s ease;
+            max-height: 320px;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .dropdown.open .dropdown-menu {
+            opacity: 1;
+            transform: translateY(0);
+            pointer-events: auto;
+        }
+
+        .dropdown-menu.position-top {
+            top: auto;
+            bottom: calc(100% + 0.5rem);
+        }
+
+        .dropdown-search {
+            padding: 1rem;
+            border-bottom: 1px solid #e2e8f0;
+            position: sticky;
+            top: 0;
+            background: white;
+            z-index: 10;
+        }
+
+        .dropdown-search-input {
+            width: 100%;
+            padding: 0.625rem 2.5rem 0.625rem 1rem;
+            border: 2px solid #e2e8f0;
+            border-radius: 8px;
+            font-size: 0.875rem;
+            transition: all 0.2s ease;
+            background: #f7fafc;
+        }
+
+        .dropdown-search-input:focus {
+            outline: none;
+            border-color: #4299e1;
+            background: white;
+        }
+
+        .dropdown-search-icon {
+            position: absolute;
+            right: 1.75rem;
+            top: 50%;
+            transform: translateY(-50%);
+            pointer-events: none;
+            color: #a0aec0;
+        }
+
+        .dropdown-search-icon svg {
+            width: 18px;
+            height: 18px;
+        }
+
+        .dropdown-options {
+            flex: 1;
+            overflow-y: auto;
+            padding: 0.5rem;
+            scrollbar-width: thin;
+            scrollbar-color: #cbd5e0 transparent;
+        }
+
+        .dropdown-options::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .dropdown-options::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .dropdown-options::-webkit-scrollbar-thumb {
+            background-color: #cbd5e0;
+            border-radius: 3px;
+        }
+
+        .dropdown-group {
+            margin-bottom: 0.5rem;
+        }
+
+        .dropdown-group:last-child {
+            margin-bottom: 0;
+        }
+
+        .dropdown-group-header {
+            padding: 0.5rem 0.75rem;
+            font-size: 0.75rem;
+            font-weight: 600;
+            color: #718096;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            user-select: none;
+        }
+
+        .dropdown-option {
+            padding: 0.75rem 1rem;
+            margin: 0.125rem 0;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.15s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .dropdown-option:hover {
+            background: #f7fafc;
+            transform: translateX(2px);
+        }
+
+        .dropdown-option.focused {
+            background: #edf2f7;
+            box-shadow: inset 0 0 0 2px #4299e1;
+        }
+
+        .dropdown-option.selected {
+            background: #e6f4ff;
+            color: #2b6cb0;
+            font-weight: 500;
+        }
+
+        .dropdown-option.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+
+        .dropdown-option-icon {
+            width: 24px;
+            height: 24px;
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .dropdown-option-icon svg {
+            width: 20px;
+            height: 20px;
+        }
+
+        .dropdown-option-content {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .dropdown-option-text {
+            font-size: 0.9375rem;
+            color: #2d3748;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .dropdown-option-description {
+            font-size: 0.8125rem;
+            color: #718096;
+            margin-top: 0.125rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .dropdown-option-checkbox {
+            position: absolute;
+            right: 1rem;
+            width: 20px;
+            height: 20px;
+            border: 2px solid #cbd5e0;
+            border-radius: 4px;
+            background: white;
+            transition: all 0.15s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .dropdown-option.selected .dropdown-option-checkbox {
+            background: #4299e1;
+            border-color: #4299e1;
+        }
+
+        .dropdown-option-checkbox svg {
+            width: 14px;
+            height: 14px;
+            color: white;
+            opacity: 0;
+            transition: opacity 0.15s ease;
+        }
+
+        .dropdown-option.selected .dropdown-option-checkbox svg {
+            opacity: 1;
+        }
+
+        .dropdown-loading {
+            padding: 2rem;
+            text-align: center;
+            color: #718096;
+        }
+
+        .dropdown-loading-spinner {
+            width: 32px;
+            height: 32px;
+            margin: 0 auto 1rem;
+            border: 3px solid #e2e8f0;
+            border-top-color: #4299e1;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .dropdown-no-results {
+            padding: 2rem;
+            text-align: center;
+            color: #718096;
+        }
+
+        .dropdown-footer {
+            padding: 0.75rem 1rem;
+            border-top: 1px solid #e2e8f0;
+            font-size: 0.8125rem;
+            color: #718096;
+            background: #f7fafc;
+            text-align: center;
+        }
+
+        .keyboard-hint {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.25rem;
+            padding: 0.125rem 0.375rem;
+            background: #e2e8f0;
+            border-radius: 4px;
+            font-family: monospace;
+            font-size: 0.75rem;
+            color: #4a5568;
+        }
+
+        @media (max-width: 640px) {
+            .dropdown-menu {
+                position: fixed;
+                left: 1rem;
+                right: 1rem;
+                top: 50%;
+                transform: translateY(-50%);
+                max-height: 80vh;
+            }
+
+            .dropdown.open .dropdown-menu {
+                transform: translateY(-50%);
+            }
+
+            .dropdown-menu.position-top {
+                top: 50%;
+                bottom: auto;
+            }
+        }
+
+        /* Highlight animation for search matches */
+        .highlight {
+            background: linear-gradient(to right, transparent 0%, #fef3c7 20%, #fef3c7 80%, transparent 100%);
+            padding: 0 2px;
+            border-radius: 2px;
+            animation: highlightPulse 1s ease infinite;
+        }
+
+        @keyframes highlightPulse {
+            0%, 100% { opacity: 0.7; }
+            50% { opacity: 1; }
+        }
+
+        /* Demo specific styles */
+        .demo-section {
+            margin-top: 3rem;
+            padding: 2rem;
+            background: white;
+            border-radius: 16px;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+        }
+
+        .demo-title {
+            font-size: 1.25rem;
+            color: #2d3748;
+            margin-bottom: 1.5rem;
+            font-weight: 500;
+        }
+
+        .selected-values {
+            margin-top: 1rem;
+            padding: 1rem;
+            background: #f7fafc;
+            border-radius: 8px;
+            font-size: 0.875rem;
+            color: #4a5568;
+            font-family: monospace;
+            word-break: break-all;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Dropdown - Enhanced</h1>
+        
+        <div class="component-showcase">
+            <!-- Single Select Dropdown -->
+            <div class="dropdown-container">
+                <label class="dropdown-label">Choose your favorite framework</label>
+                <div class="dropdown" id="single-select">
+                    <button class="dropdown-trigger" aria-haspopup="listbox" aria-expanded="false">
+                        <span class="dropdown-placeholder">Select a framework...</span>
+                        <span class="dropdown-arrow">
+                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Multi Select Dropdown -->
+            <div class="dropdown-container">
+                <label class="dropdown-label">Select team members</label>
+                <div class="dropdown" id="multi-select">
+                    <button class="dropdown-trigger" aria-haspopup="listbox" aria-expanded="false">
+                        <span class="dropdown-placeholder">Select team members...</span>
+                        <span class="dropdown-arrow">
+                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Async Loading Dropdown -->
+            <div class="dropdown-container">
+                <label class="dropdown-label">Search for a country</label>
+                <div class="dropdown" id="async-select">
+                    <button class="dropdown-trigger" aria-haspopup="listbox" aria-expanded="false">
+                        <span class="dropdown-placeholder">Type to search countries...</span>
+                        <span class="dropdown-arrow">
+                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2 class="demo-title">Selected Values</h2>
+            <div class="selected-values" id="selected-values">No selections yet</div>
+        </div>
+    </main>
+
+    <script>
+        // Enhanced Dropdown Class
+        class EnhancedDropdown {
+            constructor(element, options = {}) {
+                this.element = element;
+                this.trigger = element.querySelector('.dropdown-trigger');
+                this.isOpen = false;
+                this.isMultiple = options.multiple || false;
+                this.searchable = options.searchable !== false;
+                this.loadData = options.loadData || null;
+                this.options = options.options || [];
+                this.selectedValues = new Set();
+                this.focusedIndex = -1;
+                this.searchQuery = '';
+                this.loading = false;
+                this.loadingTimeout = null;
+                
+                this.init();
+            }
+
+            init() {
+                this.createMenu();
+                this.bindEvents();
+                this.render();
+            }
+
+            createMenu() {
+                this.menu = document.createElement('div');
+                this.menu.className = 'dropdown-menu';
+                this.menu.setAttribute('role', 'listbox');
+                
+                if (this.searchable) {
+                    const searchContainer = document.createElement('div');
+                    searchContainer.className = 'dropdown-search';
+                    searchContainer.innerHTML = `
+                        <input type="text" class="dropdown-search-input" placeholder="Search..." aria-label="Search options">
+                        <span class="dropdown-search-icon">
+                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                            </svg>
+                        </span>
+                    `;
+                    this.menu.appendChild(searchContainer);
+                    this.searchInput = searchContainer.querySelector('.dropdown-search-input');
+                }
+
+                this.optionsContainer = document.createElement('div');
+                this.optionsContainer.className = 'dropdown-options';
+                this.menu.appendChild(this.optionsContainer);
+
+                const footer = document.createElement('div');
+                footer.className = 'dropdown-footer';
+                footer.innerHTML = `
+                    Use <span class="keyboard-hint">↑↓</span> to navigate, 
+                    <span class="keyboard-hint">Enter</span> to select, 
+                    <span class="keyboard-hint">Esc</span> to close
+                `;
+                this.menu.appendChild(footer);
+
+                this.element.appendChild(this.menu);
+            }
+
+            bindEvents() {
+                // Trigger events
+                this.trigger.addEventListener('click', () => this.toggle());
+                this.trigger.addEventListener('keydown', (e) => this.handleTriggerKeydown(e));
+
+                // Search events
+                if (this.searchInput) {
+                    this.searchInput.addEventListener('input', (e) => this.handleSearch(e.target.value));
+                    this.searchInput.addEventListener('keydown', (e) => this.handleSearchKeydown(e));
+                }
+
+                // Click outside to close
+                document.addEventListener('click', (e) => {
+                    if (!this.element.contains(e.target)) {
+                        this.close();
+                    }
+                });
+
+                // Window resize for positioning
+                window.addEventListener('resize', () => {
+                    if (this.isOpen) this.updatePosition();
+                });
+            }
+
+            toggle() {
+                this.isOpen ? this.close() : this.open();
+            }
+
+            async open() {
+                this.isOpen = true;
+                this.element.classList.add('open');
+                this.trigger.setAttribute('aria-expanded', 'true');
+                this.updatePosition();
+                
+                if (this.searchInput) {
+                    setTimeout(() => this.searchInput.focus(), 100);
+                }
+
+                if (this.loadData && this.options.length === 0) {
+                    await this.loadOptions();
+                }
+
+                this.focusedIndex = this.findFirstSelectedIndex();
+                this.updateFocus();
+            }
+
+            close() {
+                this.isOpen = false;
+                this.element.classList.remove('open');
+                this.trigger.setAttribute('aria-expanded', 'false');
+                this.searchQuery = '';
+                if (this.searchInput) {
+                    this.searchInput.value = '';
+                }
+                this.render();
+            }
+
+            updatePosition() {
+                const rect = this.trigger.getBoundingClientRect();
+                const menuHeight = this.menu.offsetHeight;
+                const spaceBelow = window.innerHeight - rect.bottom;
+                const spaceAbove = rect.top;
+
+                if (spaceBelow < menuHeight && spaceAbove > spaceBelow) {
+                    this.menu.classList.add('position-top');
+                } else {
+                    this.menu.classList.remove('position-top');
+                }
+            }
+
+            async loadOptions() {
+                this.loading = true;
+                this.render();
+
+                try {
+                    clearTimeout(this.loadingTimeout);
+                    this.loadingTimeout = setTimeout(async () => {
+                        const data = await this.loadData(this.searchQuery);
+                        this.options = data;
+                        this.loading = false;
+                        this.render();
+                    }, 300);
+                } catch (error) {
+                    console.error('Error loading options:', error);
+                    this.loading = false;
+                    this.render();
+                }
+            }
+
+            handleSearch(query) {
+                this.searchQuery = query.toLowerCase();
+                this.focusedIndex = -1;
+                
+                if (this.loadData) {
+                    this.loadOptions();
+                } else {
+                    this.render();
+                }
+            }
+
+            handleTriggerKeydown(e) {
+                switch (e.key) {
+                    case 'Enter':
+                    case ' ':
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        this.open();
+                        break;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        this.open();
+                        this.focusedIndex = this.getFilteredOptions().length - 1;
+                        this.updateFocus();
+                        break;
+                }
+            }
+
+            handleSearchKeydown(e) {
+                switch (e.key) {
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        this.moveFocus(1);
+                        break;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        this.moveFocus(-1);
+                        break;
+                    case 'Enter':
+                        e.preventDefault();
+                        this.selectFocusedOption();
+                        break;
+                    case 'Escape':
+                        e.preventDefault();
+                        this.close();
+                        this.trigger.focus();
+                        break;
+                }
+            }
+
+            moveFocus(direction) {
+                const filtered = this.getFilteredOptions();
+                const maxIndex = filtered.length - 1;
+                
+                this.focusedIndex += direction;
+                
+                if (this.focusedIndex < 0) {
+                    this.focusedIndex = maxIndex;
+                } else if (this.focusedIndex > maxIndex) {
+                    this.focusedIndex = 0;
+                }
+                
+                this.updateFocus();
+            }
+
+            updateFocus() {
+                const options = this.optionsContainer.querySelectorAll('.dropdown-option:not(.disabled)');
+                options.forEach((option, index) => {
+                    if (index === this.focusedIndex) {
+                        option.classList.add('focused');
+                        option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                    } else {
+                        option.classList.remove('focused');
+                    }
+                });
+            }
+
+            selectFocusedOption() {
+                const filtered = this.getFilteredOptions();
+                if (this.focusedIndex >= 0 && this.focusedIndex < filtered.length) {
+                    const option = filtered[this.focusedIndex];
+                    this.selectOption(option);
+                }
+            }
+
+            selectOption(option) {
+                if (option.disabled) return;
+
+                if (this.isMultiple) {
+                    if (this.selectedValues.has(option.value)) {
+                        this.selectedValues.delete(option.value);
+                    } else {
+                        this.selectedValues.add(option.value);
+                    }
+                    this.render();
+                    this.updateTrigger();
+                    this.updateDemoValues();
+                } else {
+                    this.selectedValues.clear();
+                    this.selectedValues.add(option.value);
+                    this.updateTrigger();
+                    this.updateDemoValues();
+                    this.close();
+                }
+            }
+
+            removeTag(value, event) {
+                event.stopPropagation();
+                this.selectedValues.delete(value);
+                this.updateTrigger();
+                this.updateDemoValues();
+            }
+
+            updateTrigger() {
+                const selected = this.options.filter(opt => this.selectedValues.has(opt.value));
+                
+                if (selected.length === 0) {
+                    this.trigger.innerHTML = `
+                        <span class="dropdown-placeholder">${this.getPlaceholder()}</span>
+                        ${this.getArrowHtml()}
+                    `;
+                } else if (this.isMultiple) {
+                    const tags = selected.map(opt => `
+                        <span class="dropdown-tag">
+                            ${opt.label}
+                            <span class="dropdown-tag-remove" data-value="${opt.value}">
+                                <svg fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    `).join('');
+                    
+                    this.trigger.innerHTML = tags + this.getArrowHtml();
+                    
+                    // Bind remove events
+                    this.trigger.querySelectorAll('.dropdown-tag-remove').forEach(btn => {
+                        btn.addEventListener('click', (e) => this.removeTag(btn.dataset.value, e));
+                    });
+                } else {
+                    this.trigger.innerHTML = `
+                        <span>${selected[0].label}</span>
+                        ${this.getArrowHtml()}
+                    `;
+                }
+            }
+
+            getPlaceholder() {
+                return this.trigger.querySelector('.dropdown-placeholder')?.textContent || 'Select...';
+            }
+
+            getArrowHtml() {
+                return `
+                    <span class="dropdown-arrow">
+                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                        </svg>
+                    </span>
+                `;
+            }
+
+            getFilteredOptions() {
+                if (!this.searchQuery) return this.options;
+                
+                return this.options.filter(option => {
+                    const searchTarget = `${option.label} ${option.description || ''}`.toLowerCase();
+                    return this.fuzzyMatch(searchTarget, this.searchQuery);
+                });
+            }
+
+            fuzzyMatch(str, pattern) {
+                let patternIdx = 0;
+                let strIdx = 0;
+                
+                while (strIdx < str.length && patternIdx < pattern.length) {
+                    if (str[strIdx] === pattern[patternIdx]) {
+                        patternIdx++;
+                    }
+                    strIdx++;
+                }
+                
+                return patternIdx === pattern.length;
+            }
+
+            highlightMatch(text, query) {
+                if (!query) return text;
+                
+                const regex = new RegExp(`(${query.split('').join('.*?')})`, 'gi');
+                return text.replace(regex, '<span class="highlight">$1</span>');
+            }
+
+            findFirstSelectedIndex() {
+                const filtered = this.getFilteredOptions();
+                return filtered.findIndex(opt => this.selectedValues.has(opt.value));
+            }
+
+            render() {
+                if (this.loading) {
+                    this.optionsContainer.innerHTML = `
+                        <div class="dropdown-loading">
+                            <div class="dropdown-loading-spinner"></div>
+                            <div>Loading options...</div>
+                        </div>
+                    `;
+                    return;
+                }
+
+                const filtered = this.getFilteredOptions();
+                
+                if (filtered.length === 0) {
+                    this.optionsContainer.innerHTML = `
+                        <div class="dropdown-no-results">
+                            <div>No results found</div>
+                        </div>
+                    `;
+                    return;
+                }
+
+                const groups = this.groupOptions(filtered);
+                let html = '';
+                let optionIndex = 0;
+
+                for (const [group, options] of Object.entries(groups)) {
+                    if (group !== 'undefined') {
+                        html += `<div class="dropdown-group-header">${group}</div>`;
+                    }
+                    
+                    html += `<div class="dropdown-group">`;
+                    
+                    for (const option of options) {
+                        const isSelected = this.selectedValues.has(option.value);
+                        const isFocused = optionIndex === this.focusedIndex;
+                        
+                        html += `
+                            <div class="dropdown-option ${isSelected ? 'selected' : ''} ${isFocused ? 'focused' : ''} ${option.disabled ? 'disabled' : ''}"
+                                 role="option"
+                                 aria-selected="${isSelected}"
+                                 data-value="${option.value}"
+                                 data-index="${optionIndex}">
+                                ${option.icon ? `
+                                    <span class="dropdown-option-icon">${option.icon}</span>
+                                ` : ''}
+                                <div class="dropdown-option-content">
+                                    <div class="dropdown-option-text">${this.highlightMatch(option.label, this.searchQuery)}</div>
+                                    ${option.description ? `
+                                        <div class="dropdown-option-description">${this.highlightMatch(option.description, this.searchQuery)}</div>
+                                    ` : ''}
+                                </div>
+                                ${this.isMultiple ? `
+                                    <span class="dropdown-option-checkbox">
+                                        <svg fill="currentColor" viewBox="0 0 20 20">
+                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                                        </svg>
+                                    </span>
+                                ` : ''}
+                            </div>
+                        `;
+                        optionIndex++;
+                    }
+                    
+                    html += `</div>`;
+                }
+
+                this.optionsContainer.innerHTML = html;
+                
+                // Bind option click events
+                this.optionsContainer.querySelectorAll('.dropdown-option:not(.disabled)').forEach(option => {
+                    option.addEventListener('click', () => {
+                        const value = option.dataset.value;
+                        const optionData = this.options.find(opt => opt.value === value);
+                        this.selectOption(optionData);
+                    });
+                    
+                    option.addEventListener('mouseenter', () => {
+                        this.focusedIndex = parseInt(option.dataset.index);
+                        this.updateFocus();
+                    });
+                });
+            }
+
+            groupOptions(options) {
+                const groups = {};
+                
+                for (const option of options) {
+                    const group = option.group || 'undefined';
+                    if (!groups[group]) {
+                        groups[group] = [];
+                    }
+                    groups[group].push(option);
+                }
+                
+                return groups;
+            }
+
+            updateDemoValues() {
+                const event = new CustomEvent('selectionChange', {
+                    detail: {
+                        dropdown: this.element.id,
+                        values: Array.from(this.selectedValues)
+                    }
+                });
+                document.dispatchEvent(event);
+            }
+        }
+
+        // Framework options with icons
+        const frameworkOptions = [
+            {
+                value: 'react',
+                label: 'React',
+                description: 'A JavaScript library for building user interfaces',
+                icon: '⚛️',
+                group: 'Frontend Frameworks'
+            },
+            {
+                value: 'vue',
+                label: 'Vue.js',
+                description: 'The progressive JavaScript framework',
+                icon: '🟢',
+                group: 'Frontend Frameworks'
+            },
+            {
+                value: 'angular',
+                label: 'Angular',
+                description: 'Platform for building mobile and desktop apps',
+                icon: '🔺',
+                group: 'Frontend Frameworks'
+            },
+            {
+                value: 'svelte',
+                label: 'Svelte',
+                description: 'Cybernetically enhanced web apps',
+                icon: '🧡',
+                group: 'Frontend Frameworks'
+            },
+            {
+                value: 'express',
+                label: 'Express.js',
+                description: 'Fast, unopinionated, minimalist web framework',
+                icon: '🚂',
+                group: 'Backend Frameworks'
+            },
+            {
+                value: 'nextjs',
+                label: 'Next.js',
+                description: 'The React framework for production',
+                icon: '▲',
+                group: 'Full-Stack Frameworks'
+            },
+            {
+                value: 'nuxt',
+                label: 'Nuxt.js',
+                description: 'The intuitive Vue framework',
+                icon: '🟩',
+                group: 'Full-Stack Frameworks'
+            },
+            {
+                value: 'gatsby',
+                label: 'Gatsby',
+                description: 'Fast static site generator for React',
+                icon: '🟣',
+                group: 'Static Site Generators'
+            }
+        ];
+
+        // Team member options
+        const teamOptions = [
+            {
+                value: 'john',
+                label: 'John Smith',
+                description: 'Frontend Developer',
+                icon: `<svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>`
+            },
+            {
+                value: 'sarah',
+                label: 'Sarah Johnson',
+                description: 'UX Designer',
+                icon: `<svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>`
+            },
+            {
+                value: 'mike',
+                label: 'Mike Chen',
+                description: 'Backend Engineer',
+                icon: `<svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>`
+            },
+            {
+                value: 'emma',
+                label: 'Emma Wilson',
+                description: 'Product Manager',
+                icon: `<svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>`
+            },
+            {
+                value: 'alex',
+                label: 'Alex Brown',
+                description: 'DevOps Engineer',
+                icon: `<svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>`
+            },
+            {
+                value: 'lisa',
+                label: 'Lisa Davis',
+                description: 'QA Engineer',
+                icon: `<svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>`
+            }
+        ];
+
+        // Country loader simulation
+        const loadCountries = async (search) => {
+            // Simulate API delay
+            await new Promise(resolve => setTimeout(resolve, 500));
+            
+            const countries = [
+                { value: 'us', label: 'United States', description: 'North America' },
+                { value: 'ca', label: 'Canada', description: 'North America' },
+                { value: 'mx', label: 'Mexico', description: 'North America' },
+                { value: 'uk', label: 'United Kingdom', description: 'Europe' },
+                { value: 'de', label: 'Germany', description: 'Europe' },
+                { value: 'fr', label: 'France', description: 'Europe' },
+                { value: 'it', label: 'Italy', description: 'Europe' },
+                { value: 'es', label: 'Spain', description: 'Europe' },
+                { value: 'jp', label: 'Japan', description: 'Asia' },
+                { value: 'cn', label: 'China', description: 'Asia' },
+                { value: 'in', label: 'India', description: 'Asia' },
+                { value: 'au', label: 'Australia', description: 'Oceania' },
+                { value: 'nz', label: 'New Zealand', description: 'Oceania' },
+                { value: 'br', label: 'Brazil', description: 'South America' },
+                { value: 'ar', label: 'Argentina', description: 'South America' },
+                { value: 'za', label: 'South Africa', description: 'Africa' },
+                { value: 'eg', label: 'Egypt', description: 'Africa' }
+            ];
+            
+            if (search) {
+                return countries.filter(country => 
+                    country.label.toLowerCase().includes(search.toLowerCase()) ||
+                    country.description.toLowerCase().includes(search.toLowerCase())
+                );
+            }
+            
+            return countries;
+        };
+
+        // Initialize dropdowns
+        const singleSelect = new EnhancedDropdown(
+            document.getElementById('single-select'),
+            {
+                options: frameworkOptions,
+                multiple: false
+            }
+        );
+
+        const multiSelect = new EnhancedDropdown(
+            document.getElementById('multi-select'),
+            {
+                options: teamOptions,
+                multiple: true
+            }
+        );
+
+        const asyncSelect = new EnhancedDropdown(
+            document.getElementById('async-select'),
+            {
+                loadData: loadCountries,
+                multiple: false
+            }
+        );
+
+        // Update demo values display
+        const selectedValuesDisplay = document.getElementById('selected-values');
+        const allSelections = {
+            'single-select': [],
+            'multi-select': [],
+            'async-select': []
+        };
+
+        document.addEventListener('selectionChange', (e) => {
+            allSelections[e.detail.dropdown] = e.detail.values;
+            
+            const display = Object.entries(allSelections)
+                .filter(([_, values]) => values.length > 0)
+                .map(([dropdown, values]) => `${dropdown}: [${values.join(', ')}]`)
+                .join('\n');
+            
+            selectedValuesDisplay.textContent = display || 'No selections yet';
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src_enhanced/ui_enhanced_3.html b/legacy/src_enhanced/ui_enhanced_3.html
new file mode 100644
index 0000000..48727f1
--- /dev/null
+++ b/legacy/src_enhanced/ui_enhanced_3.html
@@ -0,0 +1,717 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Button Enhanced</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: #f5f7fa;
+            padding: 40px 20px;
+            line-height: 1.6;
+            color: #2c3e50;
+        }
+
+        main {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 40px;
+            text-align: center;
+            color: #1a1a1a;
+            font-weight: 600;
+        }
+
+        .component-showcase {
+            background: white;
+            border-radius: 16px;
+            padding: 40px;
+            box-shadow: 0 4px 24px rgba(0,0,0,0.08);
+            margin-bottom: 30px;
+        }
+
+        .button-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 30px;
+            margin-bottom: 40px;
+        }
+
+        .button-group {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .button-group h3 {
+            font-size: 1.1rem;
+            color: #555;
+            font-weight: 500;
+            margin-bottom: 8px;
+        }
+
+        /* Enhanced Button Base Styles */
+        .btn {
+            position: relative;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 12px 24px;
+            font-size: 16px;
+            font-weight: 500;
+            font-family: inherit;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            user-select: none;
+            text-decoration: none;
+            white-space: nowrap;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            transform-style: preserve-3d;
+            overflow: hidden;
+            outline: none;
+            min-width: 120px;
+        }
+
+        /* Ripple Effect Container */
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.5);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+
+        /* Button Variants */
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        }
+
+        .btn-primary:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+        }
+
+        .btn-secondary {
+            background: #e2e8f0;
+            color: #475569;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+        }
+
+        .btn-secondary:hover:not(:disabled) {
+            background: #cbd5e1;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+        }
+
+        .btn-success {
+            background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+            color: white;
+            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
+        }
+
+        .btn-success:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
+        }
+
+        .btn-danger {
+            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            color: white;
+            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+        }
+
+        .btn-danger:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
+        }
+
+        /* Active State */
+        .btn:active:not(:disabled) {
+            transform: translateY(0) scale(0.98);
+        }
+
+        /* Focus State */
+        .btn:focus-visible {
+            outline: 3px solid currentColor;
+            outline-offset: 3px;
+        }
+
+        /* Disabled State */
+        .btn:disabled {
+            cursor: not-allowed;
+            opacity: 0.6;
+            transform: none !important;
+        }
+
+        /* Loading State */
+        .btn-loading {
+            color: transparent;
+            pointer-events: none;
+        }
+
+        .btn-loading .btn-text {
+            visibility: hidden;
+        }
+
+        /* Spinner */
+        .spinner {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            top: 50%;
+            left: 50%;
+            margin: -10px 0 0 -10px;
+            border: 2px solid transparent;
+            border-top-color: currentColor;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+
+        .btn-loading .spinner {
+            opacity: 1;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* Success Animation */
+        .btn-success-state {
+            background: #22c55e !important;
+            color: white !important;
+        }
+
+        .success-icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(0);
+            opacity: 0;
+            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+        }
+
+        .btn-success-state .success-icon {
+            transform: translate(-50%, -50%) scale(1);
+            opacity: 1;
+        }
+
+        .btn-success-state .btn-text {
+            visibility: hidden;
+        }
+
+        /* Error Animation */
+        .btn-error {
+            animation: shake 0.5s;
+            background: #ef4444 !important;
+            color: white !important;
+        }
+
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+            20%, 40%, 60%, 80% { transform: translateX(5px); }
+        }
+
+        /* Icon Support */
+        .btn-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 20px;
+            height: 20px;
+            margin-right: 8px;
+        }
+
+        .btn-icon svg {
+            width: 100%;
+            height: 100%;
+        }
+
+        /* Progress Bar */
+        .btn-progress {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 0 0 8px 8px;
+            overflow: hidden;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+
+        .btn-loading-progress .btn-progress {
+            opacity: 1;
+        }
+
+        .btn-progress-bar {
+            height: 100%;
+            background: white;
+            width: 0%;
+            transition: width 0.3s ease;
+        }
+
+        /* Button Groups */
+        .btn-group-horizontal {
+            display: inline-flex;
+            gap: 0;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+
+        .btn-group-horizontal .btn {
+            border-radius: 0;
+            margin: 0;
+            box-shadow: none;
+        }
+
+        .btn-group-horizontal .btn:first-child {
+            border-radius: 8px 0 0 8px;
+        }
+
+        .btn-group-horizontal .btn:last-child {
+            border-radius: 0 8px 8px 0;
+        }
+
+        .btn-group-horizontal .btn:not(:last-child) {
+            border-right: 1px solid rgba(255,255,255,0.2);
+        }
+
+        /* Tooltip */
+        .tooltip {
+            position: absolute;
+            bottom: calc(100% + 10px);
+            left: 50%;
+            transform: translateX(-50%) scale(0.8);
+            background: rgba(0,0,0,0.9);
+            color: white;
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-size: 14px;
+            white-space: nowrap;
+            pointer-events: none;
+            opacity: 0;
+            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+            z-index: 1000;
+        }
+
+        .tooltip::after {
+            content: '';
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            border: 6px solid transparent;
+            border-top-color: rgba(0,0,0,0.9);
+        }
+
+        .btn:hover .tooltip {
+            opacity: 1;
+            transform: translateX(-50%) scale(1);
+        }
+
+        /* Demo Section */
+        .demo-section {
+            margin-top: 40px;
+            padding-top: 40px;
+            border-top: 1px solid #e5e7eb;
+        }
+
+        .demo-controls {
+            display: flex;
+            gap: 16px;
+            flex-wrap: wrap;
+            margin-bottom: 24px;
+        }
+
+        .code-snippet {
+            background: #1e293b;
+            color: #e2e8f0;
+            padding: 20px;
+            border-radius: 8px;
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 14px;
+            overflow-x: auto;
+            margin-top: 20px;
+        }
+
+        /* Mobile Optimization */
+        @media (max-width: 768px) {
+            .button-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .btn-group-horizontal {
+                flex-direction: column;
+                width: 100%;
+            }
+
+            .btn-group-horizontal .btn {
+                border-radius: 0;
+                border-right: none !important;
+                border-bottom: 1px solid rgba(255,255,255,0.2);
+            }
+
+            .btn-group-horizontal .btn:first-child {
+                border-radius: 8px 8px 0 0;
+            }
+
+            .btn-group-horizontal .btn:last-child {
+                border-radius: 0 0 8px 8px;
+                border-bottom: none;
+            }
+        }
+
+        /* Reduced Motion */
+        @media (prefers-reduced-motion: reduce) {
+            .btn {
+                transition: none;
+            }
+
+            .spinner {
+                animation: none;
+                opacity: 1;
+            }
+
+            .btn-error {
+                animation: none;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Button - Enhanced</h1>
+        
+        <div class="component-showcase">
+            <div class="button-grid">
+                <!-- Primary Buttons -->
+                <div class="button-group">
+                    <h3>Primary Actions</h3>
+                    <button class="btn btn-primary" onclick="handleClick(this)">
+                        <span class="btn-text">Click Me</span>
+                        <div class="spinner"></div>
+                        <svg class="success-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                            <path d="M16.7 5.3L8 14L3.3 9.3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </button>
+                    
+                    <button class="btn btn-primary" onclick="handleProgressClick(this)">
+                        <span class="btn-text">Upload File</span>
+                        <div class="spinner"></div>
+                        <div class="btn-progress">
+                            <div class="btn-progress-bar"></div>
+                        </div>
+                    </button>
+                    
+                    <button class="btn btn-primary" disabled>
+                        <span class="btn-text">Disabled</span>
+                        <span class="tooltip">Complete form to enable</span>
+                    </button>
+                </div>
+
+                <!-- Secondary Buttons -->
+                <div class="button-group">
+                    <h3>Secondary Actions</h3>
+                    <button class="btn btn-secondary" onclick="handleClick(this)">
+                        <span class="btn-text">Save Draft</span>
+                        <div class="spinner"></div>
+                        <svg class="success-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                            <path d="M16.7 5.3L8 14L3.3 9.3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </button>
+                    
+                    <button class="btn btn-secondary">
+                        <span class="btn-icon">
+                            <svg viewBox="0 0 20 20" fill="currentColor">
+                                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/>
+                            </svg>
+                        </span>
+                        <span class="btn-text">Edit</span>
+                    </button>
+                    
+                    <button class="btn btn-secondary">
+                        <span class="btn-icon">
+                            <svg viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/>
+                            </svg>
+                        </span>
+                        <span class="btn-text">Add Item</span>
+                    </button>
+                </div>
+
+                <!-- Success/Danger Buttons -->
+                <div class="button-group">
+                    <h3>Contextual Actions</h3>
+                    <button class="btn btn-success" onclick="handleClick(this)">
+                        <span class="btn-text">Confirm</span>
+                        <div class="spinner"></div>
+                        <svg class="success-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                            <path d="M16.7 5.3L8 14L3.3 9.3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </button>
+                    
+                    <button class="btn btn-danger" onclick="handleErrorClick(this)">
+                        <span class="btn-text">Delete</span>
+                        <div class="spinner"></div>
+                    </button>
+                    
+                    <button class="btn btn-danger" disabled>
+                        <span class="btn-text">Permanently Delete</span>
+                        <span class="tooltip">Action cannot be undone</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Button Groups -->
+            <div class="demo-section">
+                <h3 style="margin-bottom: 20px;">Button Groups</h3>
+                
+                <div class="btn-group-horizontal">
+                    <button class="btn btn-primary" onclick="handleClick(this)">
+                        <span class="btn-text">Previous</span>
+                        <div class="spinner"></div>
+                    </button>
+                    <button class="btn btn-primary" onclick="handleClick(this)">
+                        <span class="btn-text">Current</span>
+                        <div class="spinner"></div>
+                    </button>
+                    <button class="btn btn-primary" onclick="handleClick(this)">
+                        <span class="btn-text">Next</span>
+                        <div class="spinner"></div>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Interactive Demo -->
+            <div class="demo-section">
+                <h3 style="margin-bottom: 20px;">Interactive Demo</h3>
+                <div class="demo-controls">
+                    <button class="btn btn-primary" onclick="simulateLoading(this)">
+                        <span class="btn-text">Simulate Loading</span>
+                        <div class="spinner"></div>
+                        <svg class="success-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                            <path d="M16.7 5.3L8 14L3.3 9.3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </button>
+                    
+                    <button class="btn btn-secondary" onclick="simulateProgress(this)">
+                        <span class="btn-text">Simulate Progress</span>
+                        <div class="spinner"></div>
+                        <div class="btn-progress">
+                            <div class="btn-progress-bar"></div>
+                        </div>
+                    </button>
+                    
+                    <button class="btn btn-danger" onclick="simulateError(this)">
+                        <span class="btn-text">Simulate Error</span>
+                        <div class="spinner"></div>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Ripple effect for all buttons
+        document.querySelectorAll('.btn').forEach(button => {
+            button.addEventListener('click', function(e) {
+                if (this.disabled) return;
+                
+                const rect = this.getBoundingClientRect();
+                const ripple = document.createElement('span');
+                const size = Math.max(rect.width, rect.height);
+                const x = e.clientX - rect.left - size / 2;
+                const y = e.clientY - rect.top - size / 2;
+                
+                ripple.style.cssText = `
+                    position: absolute;
+                    width: ${size}px;
+                    height: ${size}px;
+                    border-radius: 50%;
+                    background: rgba(255, 255, 255, 0.6);
+                    top: ${y}px;
+                    left: ${x}px;
+                    pointer-events: none;
+                    transform: scale(0);
+                    animation: ripple 0.6s ease-out;
+                `;
+                
+                this.appendChild(ripple);
+                
+                setTimeout(() => ripple.remove(), 600);
+            });
+        });
+
+        // Add ripple animation
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes ripple {
+                to {
+                    transform: scale(4);
+                    opacity: 0;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+
+        // Basic click handler with loading state
+        function handleClick(button) {
+            if (button.classList.contains('btn-loading')) return;
+            
+            button.classList.add('btn-loading');
+            
+            setTimeout(() => {
+                button.classList.remove('btn-loading');
+                button.classList.add('btn-success-state');
+                
+                setTimeout(() => {
+                    button.classList.remove('btn-success-state');
+                }, 1500);
+            }, 1500);
+        }
+
+        // Progress click handler
+        function handleProgressClick(button) {
+            if (button.classList.contains('btn-loading')) return;
+            
+            button.classList.add('btn-loading', 'btn-loading-progress');
+            const progressBar = button.querySelector('.btn-progress-bar');
+            let progress = 0;
+            
+            const interval = setInterval(() => {
+                progress += Math.random() * 20;
+                if (progress > 100) progress = 100;
+                
+                progressBar.style.width = progress + '%';
+                
+                if (progress >= 100) {
+                    clearInterval(interval);
+                    setTimeout(() => {
+                        button.classList.remove('btn-loading', 'btn-loading-progress');
+                        button.classList.add('btn-success-state');
+                        progressBar.style.width = '0%';
+                        
+                        setTimeout(() => {
+                            button.classList.remove('btn-success-state');
+                        }, 1500);
+                    }, 300);
+                }
+            }, 200);
+        }
+
+        // Error click handler
+        function handleErrorClick(button) {
+            if (button.classList.contains('btn-loading')) return;
+            
+            button.classList.add('btn-loading');
+            
+            setTimeout(() => {
+                button.classList.remove('btn-loading');
+                button.classList.add('btn-error');
+                
+                setTimeout(() => {
+                    button.classList.remove('btn-error');
+                }, 500);
+            }, 1000);
+        }
+
+        // Demo functions
+        function simulateLoading(button) {
+            handleClick(button);
+        }
+
+        function simulateProgress(button) {
+            handleProgressClick(button);
+        }
+
+        function simulateError(button) {
+            handleErrorClick(button);
+        }
+
+        // Keyboard navigation
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                const activeElement = document.activeElement;
+                if (activeElement && activeElement.classList.contains('btn')) {
+                    e.preventDefault();
+                    activeElement.click();
+                }
+            }
+        });
+
+        // Touch feedback enhancement
+        let touchTimeout;
+        document.querySelectorAll('.btn').forEach(button => {
+            button.addEventListener('touchstart', function() {
+                this.style.transform = 'scale(0.95)';
+                clearTimeout(touchTimeout);
+            });
+            
+            button.addEventListener('touchend', function() {
+                touchTimeout = setTimeout(() => {
+                    this.style.transform = '';
+                }, 100);
+            });
+        });
+
+        // Accessibility announcements
+        const announcer = document.createElement('div');
+        announcer.setAttribute('role', 'status');
+        announcer.setAttribute('aria-live', 'polite');
+        announcer.style.cssText = 'position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;';
+        document.body.appendChild(announcer);
+
+        function announce(message) {
+            announcer.textContent = message;
+            setTimeout(() => announcer.textContent = '', 1000);
+        }
+
+        // Enhance button clicks with announcements
+        const originalHandleClick = window.handleClick;
+        window.handleClick = function(button) {
+            originalHandleClick(button);
+            announce('Processing...');
+            setTimeout(() => announce('Action completed successfully'), 1500);
+        };
+
+        // Focus management for button groups
+        document.querySelectorAll('.btn-group-horizontal').forEach(group => {
+            const buttons = group.querySelectorAll('.btn');
+            
+            buttons.forEach((btn, index) => {
+                btn.addEventListener('keydown', (e) => {
+                    if (e.key === 'ArrowRight' && index < buttons.length - 1) {
+                        e.preventDefault();
+                        buttons[index + 1].focus();
+                    } else if (e.key === 'ArrowLeft' && index > 0) {
+                        e.preventDefault();
+                        buttons[index - 1].focus();
+                    }
+                });
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src_enhanced/ui_enhanced_4.html b/legacy/src_enhanced/ui_enhanced_4.html
new file mode 100644
index 0000000..4d3131f
--- /dev/null
+++ b/legacy/src_enhanced/ui_enhanced_4.html
@@ -0,0 +1,882 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cards Enhanced</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --primary: #6366f1;
+            --primary-light: #818cf8;
+            --primary-dark: #4f46e5;
+            --secondary: #ec4899;
+            --success: #10b981;
+            --danger: #ef4444;
+            --gray-50: #f9fafb;
+            --gray-100: #f3f4f6;
+            --gray-200: #e5e7eb;
+            --gray-300: #d1d5db;
+            --gray-400: #9ca3af;
+            --gray-500: #6b7280;
+            --gray-600: #4b5563;
+            --gray-700: #374151;
+            --gray-800: #1f2937;
+            --gray-900: #111827;
+            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+            --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+            --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+            --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+            --radius: 12px;
+            --radius-lg: 16px;
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            line-height: 1.6;
+            color: var(--gray-900);
+            background: var(--gray-50);
+            padding: 2rem 1rem;
+            min-height: 100vh;
+        }
+
+        main {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 800;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .subtitle {
+            color: var(--gray-600);
+            font-size: 1.125rem;
+            margin-bottom: 3rem;
+        }
+
+        /* Card Grid */
+        .card-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+            gap: 2rem;
+            margin-bottom: 3rem;
+        }
+
+        /* Base Card Styles */
+        .card {
+            background: white;
+            border-radius: var(--radius-lg);
+            overflow: hidden;
+            position: relative;
+            transition: var(--transition);
+            transform-style: preserve-3d;
+            cursor: pointer;
+            will-change: transform, box-shadow;
+        }
+
+        .card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-xl);
+        }
+
+        .card.selected {
+            outline: 3px solid var(--primary);
+            outline-offset: -3px;
+        }
+
+        /* Card Image with Lazy Loading */
+        .card-image {
+            position: relative;
+            width: 100%;
+            height: 200px;
+            overflow: hidden;
+            background: var(--gray-200);
+        }
+
+        .card-image img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
+        }
+
+        .card:hover .card-image img {
+            transform: scale(1.05);
+        }
+
+        .card-image.loading::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+            animation: shimmer 1.5s infinite;
+        }
+
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+
+        .card-image img.blur-up {
+            filter: blur(20px);
+        }
+
+        .card-image img.loaded {
+            filter: blur(0);
+        }
+
+        /* Card Content */
+        .card-content {
+            padding: 1.5rem;
+        }
+
+        .card-title {
+            font-size: 1.25rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+            color: var(--gray-900);
+        }
+
+        .card-description {
+            color: var(--gray-600);
+            line-height: 1.5;
+            margin-bottom: 1rem;
+        }
+
+        .card-meta {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.875rem;
+            color: var(--gray-500);
+        }
+
+        /* Action Overlay */
+        .card-actions {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            display: flex;
+            gap: 0.5rem;
+            opacity: 0;
+            transform: translateY(-10px);
+            transition: var(--transition);
+            z-index: 10;
+        }
+
+        .card:hover .card-actions,
+        .card:focus-within .card-actions {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .action-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            border: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: var(--transition-fast);
+            box-shadow: var(--shadow-md);
+        }
+
+        .action-btn:hover {
+            background: white;
+            transform: scale(1.1);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .action-btn:active {
+            transform: scale(0.95);
+        }
+
+        .action-btn svg {
+            width: 20px;
+            height: 20px;
+            stroke: var(--gray-700);
+            stroke-width: 2;
+            fill: none;
+        }
+
+        .action-btn.liked svg {
+            fill: var(--danger);
+            stroke: var(--danger);
+        }
+
+        /* Flip Card */
+        .flip-card {
+            perspective: 1000px;
+            height: 400px;
+        }
+
+        .flip-card-inner {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            transition: transform 0.6s;
+            transform-style: preserve-3d;
+        }
+
+        .flip-card.flipped .flip-card-inner {
+            transform: rotateY(180deg);
+        }
+
+        .flip-card-front,
+        .flip-card-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+            border-radius: var(--radius-lg);
+            overflow: hidden;
+        }
+
+        .flip-card-back {
+            transform: rotateY(180deg);
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+            color: white;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            padding: 2rem;
+        }
+
+        .flip-trigger {
+            position: absolute;
+            bottom: 1rem;
+            right: 1rem;
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background: var(--primary);
+            color: white;
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: var(--transition-fast);
+            z-index: 10;
+        }
+
+        .flip-trigger:hover {
+            transform: scale(1.1);
+            background: var(--primary-dark);
+        }
+
+        /* Expandable Card */
+        .expandable-card {
+            overflow: visible;
+        }
+
+        .expandable-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .expandable-card.expanded .expandable-content {
+            max-height: 300px;
+        }
+
+        .expand-trigger {
+            background: none;
+            border: none;
+            color: var(--primary);
+            font-weight: 600;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            transition: var(--transition-fast);
+            margin-top: 1rem;
+        }
+
+        .expand-trigger:hover {
+            color: var(--primary-dark);
+        }
+
+        .expand-trigger svg {
+            width: 20px;
+            height: 20px;
+            transition: transform 0.3s ease;
+        }
+
+        .expandable-card.expanded .expand-trigger svg {
+            transform: rotate(180deg);
+        }
+
+        /* Loading Skeleton */
+        .card-skeleton {
+            background: white;
+            border-radius: var(--radius-lg);
+            overflow: hidden;
+            box-shadow: var(--shadow);
+        }
+
+        .skeleton {
+            background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
+            background-size: 200% 100%;
+            animation: loading 1.5s infinite;
+        }
+
+        @keyframes loading {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+        }
+
+        .skeleton-image {
+            height: 200px;
+        }
+
+        .skeleton-content {
+            padding: 1.5rem;
+        }
+
+        .skeleton-title {
+            height: 24px;
+            width: 70%;
+            margin-bottom: 1rem;
+            border-radius: 4px;
+        }
+
+        .skeleton-text {
+            height: 16px;
+            margin-bottom: 0.5rem;
+            border-radius: 4px;
+        }
+
+        .skeleton-text:last-child {
+            width: 80%;
+        }
+
+        /* Selection Mode */
+        .selection-mode {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 2rem;
+            padding: 1rem 1.5rem;
+            background: white;
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+        }
+
+        .selection-checkbox {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+        }
+
+        .selection-count {
+            color: var(--gray-600);
+            font-weight: 500;
+        }
+
+        .selection-actions {
+            margin-left: auto;
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .btn {
+            padding: 0.5rem 1rem;
+            border-radius: 8px;
+            border: none;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition-fast);
+            font-size: 0.875rem;
+        }
+
+        .btn-primary {
+            background: var(--primary);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: var(--primary-dark);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-md);
+        }
+
+        .btn-secondary {
+            background: var(--gray-200);
+            color: var(--gray-700);
+        }
+
+        .btn-secondary:hover {
+            background: var(--gray-300);
+        }
+
+        /* Mobile Touch Support */
+        @media (max-width: 768px) {
+            .card-grid {
+                grid-template-columns: 1fr;
+                gap: 1.5rem;
+            }
+
+            .card {
+                touch-action: pan-y;
+                user-select: none;
+            }
+
+            .card.swiping {
+                transition: none;
+            }
+
+            .card-actions {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* Focus Styles */
+        .card:focus-visible,
+        .action-btn:focus-visible,
+        .flip-trigger:focus-visible,
+        .expand-trigger:focus-visible {
+            outline: 2px solid var(--primary);
+            outline-offset: 2px;
+        }
+
+        /* Print Styles */
+        @media print {
+            .card {
+                break-inside: avoid;
+                box-shadow: none;
+                border: 1px solid var(--gray-300);
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Cards - Enhanced</h1>
+        <p class="subtitle">Beautiful, interactive cards with smooth animations and intelligent behaviors</p>
+
+        <!-- Selection Mode -->
+        <div class="selection-mode" id="selectionMode" style="display: none;">
+            <input type="checkbox" class="selection-checkbox" id="selectAll">
+            <span class="selection-count">0 selected</span>
+            <div class="selection-actions">
+                <button class="btn btn-primary">Share</button>
+                <button class="btn btn-secondary">Archive</button>
+            </div>
+        </div>
+
+        <!-- Card Grid -->
+        <div class="card-grid" id="cardGrid">
+            <!-- Loading Skeletons -->
+            <div class="card card-skeleton">
+                <div class="skeleton skeleton-image"></div>
+                <div class="skeleton-content">
+                    <div class="skeleton skeleton-title"></div>
+                    <div class="skeleton skeleton-text"></div>
+                    <div class="skeleton skeleton-text"></div>
+                    <div class="skeleton skeleton-text"></div>
+                </div>
+            </div>
+            <div class="card card-skeleton">
+                <div class="skeleton skeleton-image"></div>
+                <div class="skeleton-content">
+                    <div class="skeleton skeleton-title"></div>
+                    <div class="skeleton skeleton-text"></div>
+                    <div class="skeleton skeleton-text"></div>
+                    <div class="skeleton skeleton-text"></div>
+                </div>
+            </div>
+            <div class="card card-skeleton">
+                <div class="skeleton skeleton-image"></div>
+                <div class="skeleton-content">
+                    <div class="skeleton skeleton-title"></div>
+                    <div class="skeleton skeleton-text"></div>
+                    <div class="skeleton skeleton-text"></div>
+                    <div class="skeleton skeleton-text"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Special Cards Section -->
+        <h2 style="margin: 3rem 0 1.5rem; font-size: 1.875rem; font-weight: 700;">Special Card Types</h2>
+        
+        <div class="card-grid">
+            <!-- Flip Card -->
+            <div class="flip-card" id="flipCard">
+                <div class="flip-card-inner">
+                    <div class="flip-card-front card">
+                        <div class="card-image">
+                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%234f46e5;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23ec4899;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='200' fill='url(%23g)'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='white' font-family='Arial' font-size='24' font-weight='bold'%3EFlip Me%3C/text%3E%3C/svg%3E" alt="Flip card front">
+                        </div>
+                        <div class="card-content">
+                            <h3 class="card-title">Interactive Flip Card</h3>
+                            <p class="card-description">Click the button to reveal additional information on the back of this card.</p>
+                            <button class="flip-trigger" aria-label="Flip card">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                                    <circle cx="12" cy="12" r="3"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="flip-card-back">
+                        <h3 style="font-size: 1.5rem; margin-bottom: 1rem;">Additional Details</h3>
+                        <p style="margin-bottom: 1.5rem;">This is the back of the card with more detailed information that was hidden from the initial view.</p>
+                        <ul style="text-align: left; margin-bottom: 1.5rem;">
+                            <li>Hidden feature #1</li>
+                            <li>Secret detail #2</li>
+                            <li>Extra information #3</li>
+                        </ul>
+                        <button class="btn" style="background: white; color: var(--primary);" onclick="document.getElementById('flipCard').classList.remove('flipped')">
+                            Flip Back
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Expandable Card -->
+            <div class="card expandable-card" id="expandableCard">
+                <div class="card-image">
+                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cdefs%3E%3ClinearGradient id='g2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2310b981;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%236366f1;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='200' fill='url(%23g2)'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='white' font-family='Arial' font-size='24' font-weight='bold'%3EExpandable%3C/text%3E%3C/svg%3E" alt="Expandable card">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-title">Expandable Content Card</h3>
+                    <p class="card-description">This card can expand to show additional content with a smooth animation.</p>
+                    <button class="expand-trigger">
+                        <span>Show more</span>
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                            <path d="M19 9l-7 7-7-7"/>
+                        </svg>
+                    </button>
+                    <div class="expandable-content">
+                        <div style="padding-top: 1rem; border-top: 1px solid var(--gray-200);">
+                            <h4 style="font-weight: 600; margin-bottom: 0.5rem;">Extended Information</h4>
+                            <p style="color: var(--gray-600); margin-bottom: 1rem;">Here's the additional content that was hidden. It smoothly animates into view when expanded.</p>
+                            <ul style="color: var(--gray-600); padding-left: 1.5rem;">
+                                <li>Extra detail that wasn't visible before</li>
+                                <li>Another piece of hidden information</li>
+                                <li>More content to explore</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-actions">
+                    <button class="action-btn" aria-label="Like">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
+                        </svg>
+                    </button>
+                    <button class="action-btn" aria-label="Share">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
+                            <polyline points="16 6 12 2 8 6"/>
+                            <line x1="12" y1="2" x2="12" y2="15"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Card data
+        const cardData = [
+            {
+                title: "Mountain Vista",
+                description: "Experience breathtaking views from the mountain peaks with crystal clear skies.",
+                image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=200&fit=crop",
+                author: "Alex Chen",
+                date: "2 days ago"
+            },
+            {
+                title: "Ocean Breeze",
+                description: "Feel the calming waves and gentle sea breeze at this pristine beach location.",
+                image: "https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=400&h=200&fit=crop",
+                author: "Sarah Miller",
+                date: "1 week ago"
+            },
+            {
+                title: "Forest Trail",
+                description: "Discover hidden paths through ancient forests filled with wildlife and wonder.",
+                image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400&h=200&fit=crop",
+                author: "David Park",
+                date: "3 days ago"
+            },
+            {
+                title: "Desert Sunset",
+                description: "Watch the sun paint the desert landscape in brilliant shades of orange and red.",
+                image: "https://images.unsplash.com/photo-1509316785289-025f5b846b35?w=400&h=200&fit=crop",
+                author: "Maria Garcia",
+                date: "5 days ago"
+            },
+            {
+                title: "City Lights",
+                description: "Experience the vibrant energy of the city as it comes alive after dark.",
+                image: "https://images.unsplash.com/photo-1514565131-fce0801e5785?w=400&h=200&fit=crop",
+                author: "James Wilson",
+                date: "1 day ago"
+            },
+            {
+                title: "Lakeside Calm",
+                description: "Find peace and tranquility by the still waters of this mountain lake.",
+                image: "https://images.unsplash.com/photo-1439066615861-d1af74d74000?w=400&h=200&fit=crop",
+                author: "Emma Thompson",
+                date: "4 days ago"
+            }
+        ];
+
+        // Create card HTML
+        function createCard(data, index) {
+            return `
+                <div class="card" data-index="${index}" tabindex="0" role="article" aria-label="${data.title}">
+                    <div class="card-image loading">
+                        <img 
+                            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Crect width='20' height='10' fill='%23e5e7eb'/%3E%3C/svg%3E"
+                            data-src="${data.image}" 
+                            alt="${data.title}"
+                            class="blur-up"
+                        >
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-title">${data.title}</h3>
+                        <p class="card-description">${data.description}</p>
+                        <div class="card-meta">
+                            <span>${data.author}</span>
+                            <span>${data.date}</span>
+                        </div>
+                    </div>
+                    <div class="card-actions">
+                        <button class="action-btn like-btn" aria-label="Like ${data.title}">
+                            <svg viewBox="0 0 24 24">
+                                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
+                            </svg>
+                        </button>
+                        <button class="action-btn" aria-label="Share ${data.title}">
+                            <svg viewBox="0 0 24 24">
+                                <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
+                                <polyline points="16 6 12 2 8 6"/>
+                                <line x1="12" y1="2" x2="12" y2="15"/>
+                            </svg>
+                        </button>
+                        <button class="action-btn" aria-label="More options for ${data.title}">
+                            <svg viewBox="0 0 24 24">
+                                <circle cx="12" cy="12" r="1"/>
+                                <circle cx="12" cy="5" r="1"/>
+                                <circle cx="12" cy="19" r="1"/>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            `;
+        }
+
+        // Initialize cards
+        const cardGrid = document.getElementById('cardGrid');
+        setTimeout(() => {
+            cardGrid.innerHTML = cardData.map((data, index) => createCard(data, index)).join('');
+            initializeCards();
+        }, 1500);
+
+        // Initialize card functionality
+        function initializeCards() {
+            // Lazy loading images
+            const images = document.querySelectorAll('.card-image img[data-src]');
+            const imageObserver = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const img = entry.target;
+                        const parent = img.parentElement;
+                        
+                        // Load high-res image
+                        const highResImg = new Image();
+                        highResImg.src = img.dataset.src;
+                        highResImg.onload = () => {
+                            img.src = highResImg.src;
+                            setTimeout(() => {
+                                img.classList.add('loaded');
+                                parent.classList.remove('loading');
+                            }, 50);
+                        };
+                        
+                        imageObserver.unobserve(img);
+                    }
+                });
+            });
+
+            images.forEach(img => imageObserver.observe(img));
+
+            // Like button functionality
+            document.querySelectorAll('.like-btn').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    btn.classList.toggle('liked');
+                    
+                    // Haptic feedback on mobile
+                    if ('vibrate' in navigator) {
+                        navigator.vibrate(10);
+                    }
+                });
+            });
+
+            // Card selection
+            let selectedCards = new Set();
+            let selectionMode = false;
+
+            document.querySelectorAll('.card').forEach(card => {
+                card.addEventListener('click', (e) => {
+                    if (e.target.closest('.action-btn') || e.target.closest('.flip-trigger') || e.target.closest('.expand-trigger')) {
+                        return;
+                    }
+
+                    if (e.shiftKey || selectionMode) {
+                        const index = card.dataset.index;
+                        if (selectedCards.has(index)) {
+                            selectedCards.delete(index);
+                            card.classList.remove('selected');
+                        } else {
+                            selectedCards.add(index);
+                            card.classList.add('selected');
+                        }
+                        updateSelectionMode();
+                    }
+                });
+
+                // Keyboard navigation
+                card.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        card.click();
+                    }
+                });
+            });
+
+            // Selection mode controls
+            function updateSelectionMode() {
+                const selectionModeEl = document.getElementById('selectionMode');
+                if (selectedCards.size > 0) {
+                    selectionMode = true;
+                    selectionModeEl.style.display = 'flex';
+                    selectionModeEl.querySelector('.selection-count').textContent = `${selectedCards.size} selected`;
+                } else {
+                    selectionMode = false;
+                    selectionModeEl.style.display = 'none';
+                }
+            }
+
+            document.getElementById('selectAll').addEventListener('change', (e) => {
+                const cards = document.querySelectorAll('.card[data-index]');
+                if (e.target.checked) {
+                    cards.forEach(card => {
+                        selectedCards.add(card.dataset.index);
+                        card.classList.add('selected');
+                    });
+                } else {
+                    selectedCards.clear();
+                    cards.forEach(card => card.classList.remove('selected'));
+                }
+                updateSelectionMode();
+            });
+
+            // Touch gestures for mobile
+            let touchStartX = 0;
+            let touchStartY = 0;
+            let currentCard = null;
+
+            document.querySelectorAll('.card').forEach(card => {
+                card.addEventListener('touchstart', (e) => {
+                    touchStartX = e.touches[0].clientX;
+                    touchStartY = e.touches[0].clientY;
+                    currentCard = card;
+                }, { passive: true });
+
+                card.addEventListener('touchmove', (e) => {
+                    if (!touchStartX || !currentCard) return;
+
+                    const touchEndX = e.touches[0].clientX;
+                    const touchEndY = e.touches[0].clientY;
+                    const diffX = touchStartX - touchEndX;
+                    const diffY = touchStartY - touchEndY;
+
+                    // Only handle horizontal swipes
+                    if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
+                        currentCard.classList.add('swiping');
+                        currentCard.style.transform = `translateX(${-diffX * 0.5}px)`;
+                    }
+                }, { passive: true });
+
+                card.addEventListener('touchend', () => {
+                    if (currentCard) {
+                        currentCard.classList.remove('swiping');
+                        currentCard.style.transform = '';
+                        currentCard = null;
+                    }
+                    touchStartX = 0;
+                    touchStartY = 0;
+                });
+            });
+        }
+
+        // Flip card functionality
+        document.querySelector('.flip-trigger').addEventListener('click', (e) => {
+            e.stopPropagation();
+            document.getElementById('flipCard').classList.add('flipped');
+        });
+
+        // Expandable card functionality
+        document.querySelector('.expand-trigger').addEventListener('click', (e) => {
+            e.stopPropagation();
+            const card = document.getElementById('expandableCard');
+            const isExpanded = card.classList.contains('expanded');
+            card.classList.toggle('expanded');
+            
+            const trigger = e.currentTarget;
+            const text = trigger.querySelector('span');
+            text.textContent = isExpanded ? 'Show more' : 'Show less';
+            
+            // Announce state change for screen readers
+            const announcement = document.createElement('div');
+            announcement.setAttribute('role', 'status');
+            announcement.setAttribute('aria-live', 'polite');
+            announcement.className = 'sr-only';
+            announcement.textContent = isExpanded ? 'Content collapsed' : 'Content expanded';
+            document.body.appendChild(announcement);
+            setTimeout(() => announcement.remove(), 1000);
+        });
+
+        // Respect reduced motion preference
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            document.documentElement.style.setProperty('--transition', 'none');
+            document.documentElement.style.setProperty('--transition-fast', 'none');
+        }
+
+        // Screen reader only content
+        const style = document.createElement('style');
+        style.textContent = '.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }';
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src_enhanced/ui_enhanced_5.html b/legacy/src_enhanced/ui_enhanced_5.html
new file mode 100644
index 0000000..5aa557e
--- /dev/null
+++ b/legacy/src_enhanced/ui_enhanced_5.html
@@ -0,0 +1,1019 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modal Enhanced</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --primary-color: #5b69ff;
+            --secondary-color: #ff6b6b;
+            --success-color: #51cf66;
+            --warning-color: #ffd93d;
+            --bg-color: #f8f9fa;
+            --text-color: #2c3e50;
+            --border-color: #e1e8ed;
+            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
+            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+            --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12);
+            --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.16);
+            --modal-max-width: 600px;
+            --modal-animation-duration: 0.3s;
+            --modal-animation-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            line-height: 1.6;
+            min-height: 100vh;
+            padding: 40px 20px;
+        }
+
+        main {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, var(--primary-color), #7c3aed);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-align: center;
+            margin-bottom: 50px;
+        }
+
+        .component-showcase {
+            background: white;
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: var(--shadow-md);
+        }
+
+        .demo-controls {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-bottom: 40px;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 12px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            position: relative;
+            overflow: hidden;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+
+        .btn:active::before {
+            width: 300px;
+            height: 300px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary-color), #7c3aed);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(91, 105, 255, 0.3);
+        }
+
+        .btn-secondary {
+            background: #e3e8ef;
+            color: var(--text-color);
+        }
+
+        .btn-secondary:hover {
+            background: #d4dae5;
+            transform: translateY(-1px);
+        }
+
+        .btn-danger {
+            background: linear-gradient(135deg, var(--secondary-color), #ff5252);
+            color: white;
+        }
+
+        .btn-danger:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
+        }
+
+        .btn-success {
+            background: linear-gradient(135deg, var(--success-color), #42c767);
+            color: white;
+        }
+
+        .btn-loading {
+            color: transparent;
+            pointer-events: none;
+        }
+
+        .btn-loading::after {
+            content: '';
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-top-color: white;
+            border-radius: 50%;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: translate(-50%, -50%) rotate(360deg); }
+        }
+
+        /* Modal Styles */
+        .modal-backdrop {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(8px);
+            -webkit-backdrop-filter: blur(8px);
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity var(--modal-animation-duration) ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .modal-backdrop.active {
+            opacity: 1;
+        }
+
+        .modal {
+            background: white;
+            border-radius: 20px;
+            max-width: var(--modal-max-width);
+            width: 100%;
+            max-height: 90vh;
+            display: flex;
+            flex-direction: column;
+            box-shadow: var(--shadow-xl);
+            transform: translateY(20px) scale(0.95);
+            opacity: 0;
+            transition: all var(--modal-animation-duration) var(--modal-animation-easing);
+            position: relative;
+        }
+
+        .modal-backdrop.active .modal {
+            transform: translateY(0) scale(1);
+            opacity: 1;
+        }
+
+        .modal-header {
+            padding: 24px 32px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-shrink: 0;
+            position: sticky;
+            top: 0;
+            background: white;
+            border-radius: 20px 20px 0 0;
+            z-index: 10;
+        }
+
+        .modal-title {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--text-color);
+            margin: 0;
+        }
+
+        .modal-close {
+            width: 36px;
+            height: 36px;
+            border: none;
+            background: #f3f4f6;
+            border-radius: 10px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s ease;
+            color: #6b7280;
+        }
+
+        .modal-close:hover {
+            background: #e5e7eb;
+            transform: rotate(90deg);
+        }
+
+        .modal-close:focus {
+            outline: 2px solid var(--primary-color);
+            outline-offset: 2px;
+        }
+
+        .modal-body {
+            padding: 32px;
+            overflow-y: auto;
+            flex: 1;
+            position: relative;
+        }
+
+        .modal-body::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        .modal-body::-webkit-scrollbar-track {
+            background: #f3f4f6;
+            border-radius: 4px;
+        }
+
+        .modal-body::-webkit-scrollbar-thumb {
+            background: #d1d5db;
+            border-radius: 4px;
+        }
+
+        .modal-body::-webkit-scrollbar-thumb:hover {
+            background: #9ca3af;
+        }
+
+        .modal-footer {
+            padding: 24px 32px;
+            border-top: 1px solid var(--border-color);
+            display: flex;
+            gap: 12px;
+            justify-content: flex-end;
+            flex-shrink: 0;
+            position: sticky;
+            bottom: 0;
+            background: white;
+            border-radius: 0 0 20px 20px;
+        }
+
+        /* Modal Sizes */
+        .modal.modal-sm {
+            --modal-max-width: 400px;
+        }
+
+        .modal.modal-lg {
+            --modal-max-width: 800px;
+        }
+
+        .modal.modal-xl {
+            --modal-max-width: 1200px;
+        }
+
+        .modal.modal-fullscreen {
+            --modal-max-width: 100%;
+            max-height: 100%;
+            height: 100%;
+            border-radius: 0;
+        }
+
+        .modal.modal-fullscreen .modal-header,
+        .modal.modal-fullscreen .modal-footer {
+            border-radius: 0;
+        }
+
+        /* Stacked Modals */
+        .modal-backdrop[data-level="2"] {
+            z-index: 1010;
+        }
+
+        .modal-backdrop[data-level="3"] {
+            z-index: 1020;
+        }
+
+        .modal-backdrop[data-level="2"] .modal {
+            transform: translateY(40px) scale(0.9);
+        }
+
+        .modal-backdrop[data-level="3"] .modal {
+            transform: translateY(60px) scale(0.85);
+        }
+
+        /* Loading State */
+        .modal-loading {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(255, 255, 255, 0.9);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 20px;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+            z-index: 20;
+        }
+
+        .modal-loading.active {
+            opacity: 1;
+            pointer-events: all;
+        }
+
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 4px solid #f3f4f6;
+            border-top-color: var(--primary-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        /* Confirmation Dialog */
+        .confirmation-icon {
+            width: 80px;
+            height: 80px;
+            margin: 0 auto 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            font-size: 36px;
+        }
+
+        .confirmation-icon.warning {
+            background: #fef3c7;
+            color: #f59e0b;
+        }
+
+        .confirmation-icon.danger {
+            background: #fee2e2;
+            color: #ef4444;
+        }
+
+        .confirmation-icon.success {
+            background: #d1fae5;
+            color: #10b981;
+        }
+
+        /* Demo Content */
+        .demo-form {
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+
+        .form-group {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .form-group label {
+            font-weight: 600;
+            color: var(--text-color);
+        }
+
+        .form-control {
+            padding: 12px 16px;
+            border: 2px solid var(--border-color);
+            border-radius: 10px;
+            font-size: 16px;
+            transition: all 0.2s ease;
+        }
+
+        .form-control:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(91, 105, 255, 0.1);
+        }
+
+        /* Accessibility */
+        .sr-only {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border-width: 0;
+        }
+
+        /* Reduced Motion */
+        @media (prefers-reduced-motion: reduce) {
+            .modal-backdrop,
+            .modal,
+            .btn,
+            .modal-close {
+                transition-duration: 0.01ms !important;
+            }
+            
+            .btn-loading::after,
+            .spinner {
+                animation-duration: 0.01ms !important;
+            }
+        }
+
+        /* Mobile Styles */
+        @media (max-width: 640px) {
+            .modal {
+                margin: 10px;
+            }
+
+            .modal-header,
+            .modal-body,
+            .modal-footer {
+                padding: 20px;
+            }
+
+            .modal.modal-fullscreen {
+                margin: 0;
+            }
+        }
+
+        /* Demo Description */
+        .demo-description {
+            margin-bottom: 30px;
+            padding: 20px;
+            background: #f8f9fb;
+            border-radius: 12px;
+            border-left: 4px solid var(--primary-color);
+        }
+
+        .demo-description h2 {
+            font-size: 1.2rem;
+            margin-bottom: 10px;
+            color: var(--primary-color);
+        }
+
+        .demo-description ul {
+            list-style: none;
+            padding-left: 0;
+        }
+
+        .demo-description li {
+            padding-left: 24px;
+            position: relative;
+            margin-bottom: 8px;
+        }
+
+        .demo-description li::before {
+            content: '✨';
+            position: absolute;
+            left: 0;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Modal - Enhanced</h1>
+        
+        <div class="component-showcase">
+            <div class="demo-description">
+                <h2>Enhanced Modal Features</h2>
+                <ul>
+                    <li>Smooth slide + fade entrance animations</li>
+                    <li>Beautiful backdrop blur with fallback</li>
+                    <li>Complete focus trap with tab cycling</li>
+                    <li>Escape key and backdrop click to close</li>
+                    <li>Support for stacked modals</li>
+                    <li>Responsive sizing with mobile full-screen</li>
+                    <li>Sticky header/footer for long content</li>
+                    <li>Loading states within modals</li>
+                    <li>Confirmation dialogs with proper focus</li>
+                    <li>Smooth scrolling with custom scrollbar</li>
+                    <li>Full keyboard navigation</li>
+                    <li>ARIA attributes for accessibility</li>
+                </ul>
+            </div>
+
+            <div class="demo-controls">
+                <button class="btn btn-primary" onclick="openModal('basic')">
+                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                    </svg>
+                    Basic Modal
+                </button>
+                
+                <button class="btn btn-primary" onclick="openModal('form')">
+                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                    </svg>
+                    Form Modal
+                </button>
+                
+                <button class="btn btn-primary" onclick="openModal('long')">
+                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                    </svg>
+                    Long Content
+                </button>
+                
+                <button class="btn btn-danger" onclick="openModal('confirm')">
+                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+                    </svg>
+                    Confirmation Dialog
+                </button>
+                
+                <button class="btn btn-secondary" onclick="openModal('sizes')">
+                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
+                    </svg>
+                    Modal Sizes
+                </button>
+                
+                <button class="btn btn-secondary" onclick="openModal('loading')">
+                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                    </svg>
+                    Loading State
+                </button>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Modal Manager
+        class ModalManager {
+            constructor() {
+                this.activeModals = [];
+                this.focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+                this.lastFocusedElement = null;
+                this.init();
+            }
+
+            init() {
+                document.addEventListener('keydown', this.handleKeydown.bind(this));
+            }
+
+            createModal(options = {}) {
+                const {
+                    title = 'Modal Title',
+                    content = '',
+                    size = 'default',
+                    showFooter = true,
+                    buttons = [
+                        { text: 'Cancel', type: 'secondary', action: 'close' },
+                        { text: 'Save', type: 'primary', action: 'save' }
+                    ],
+                    onClose = null,
+                    onSave = null
+                } = options;
+
+                const level = this.activeModals.length + 1;
+                const modalId = `modal-${Date.now()}`;
+
+                // Create backdrop
+                const backdrop = document.createElement('div');
+                backdrop.className = 'modal-backdrop';
+                backdrop.setAttribute('data-level', level);
+                backdrop.setAttribute('role', 'dialog');
+                backdrop.setAttribute('aria-modal', 'true');
+                backdrop.setAttribute('aria-labelledby', `${modalId}-title`);
+
+                // Create modal
+                const modal = document.createElement('div');
+                modal.className = `modal ${size !== 'default' ? `modal-${size}` : ''}`;
+                modal.id = modalId;
+
+                // Header
+                const header = document.createElement('div');
+                header.className = 'modal-header';
+                
+                const titleEl = document.createElement('h2');
+                titleEl.className = 'modal-title';
+                titleEl.id = `${modalId}-title`;
+                titleEl.textContent = title;
+                
+                const closeBtn = document.createElement('button');
+                closeBtn.className = 'modal-close';
+                closeBtn.setAttribute('aria-label', 'Close modal');
+                closeBtn.innerHTML = `
+                    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                `;
+                
+                header.appendChild(titleEl);
+                header.appendChild(closeBtn);
+
+                // Body
+                const body = document.createElement('div');
+                body.className = 'modal-body';
+                body.innerHTML = content;
+
+                // Footer
+                const footer = document.createElement('div');
+                footer.className = 'modal-footer';
+                
+                if (showFooter) {
+                    buttons.forEach((button, index) => {
+                        const btn = document.createElement('button');
+                        btn.className = `btn btn-${button.type}`;
+                        btn.textContent = button.text;
+                        
+                        if (button.action === 'close') {
+                            btn.onclick = () => this.closeModal(backdrop);
+                        } else if (button.action === 'save' && onSave) {
+                            btn.onclick = () => {
+                                onSave();
+                                this.closeModal(backdrop);
+                            };
+                        } else if (button.onClick) {
+                            btn.onclick = button.onClick;
+                        }
+                        
+                        // Focus primary button by default
+                        if (button.type === 'primary' && index === buttons.length - 1) {
+                            btn.setAttribute('data-initial-focus', 'true');
+                        }
+                        
+                        footer.appendChild(btn);
+                    });
+                }
+
+                // Loading overlay
+                const loadingOverlay = document.createElement('div');
+                loadingOverlay.className = 'modal-loading';
+                loadingOverlay.innerHTML = '<div class="spinner"></div>';
+
+                // Assemble modal
+                modal.appendChild(header);
+                modal.appendChild(body);
+                if (showFooter) {
+                    modal.appendChild(footer);
+                }
+                modal.appendChild(loadingOverlay);
+                backdrop.appendChild(modal);
+
+                // Event listeners
+                closeBtn.onclick = () => this.closeModal(backdrop);
+                backdrop.onclick = (e) => {
+                    if (e.target === backdrop) {
+                        this.closeModal(backdrop);
+                    }
+                };
+
+                // Store modal info
+                this.activeModals.push({
+                    backdrop,
+                    modal,
+                    onClose,
+                    level
+                });
+
+                return { backdrop, modal, loadingOverlay };
+            }
+
+            openModal(options) {
+                // Store last focused element
+                this.lastFocusedElement = document.activeElement;
+
+                const { backdrop, modal } = this.createModal(options);
+                
+                // Add to DOM
+                document.body.appendChild(backdrop);
+                
+                // Force reflow
+                backdrop.offsetHeight;
+                
+                // Trigger animation
+                requestAnimationFrame(() => {
+                    backdrop.classList.add('active');
+                    
+                    // Set initial focus
+                    setTimeout(() => {
+                        const initialFocus = modal.querySelector('[data-initial-focus]') || 
+                                           modal.querySelector(this.focusableElements);
+                        if (initialFocus) {
+                            initialFocus.focus();
+                        }
+                    }, 300);
+                });
+
+                return { backdrop, modal };
+            }
+
+            closeModal(backdrop) {
+                const modalIndex = this.activeModals.findIndex(m => m.backdrop === backdrop);
+                if (modalIndex === -1) return;
+
+                const modalInfo = this.activeModals[modalIndex];
+                
+                // Remove active class
+                backdrop.classList.remove('active');
+                
+                // Wait for animation
+                setTimeout(() => {
+                    backdrop.remove();
+                    this.activeModals.splice(modalIndex, 1);
+                    
+                    // Restore focus
+                    if (this.activeModals.length === 0 && this.lastFocusedElement) {
+                        this.lastFocusedElement.focus();
+                        this.lastFocusedElement = null;
+                    } else if (this.activeModals.length > 0) {
+                        // Focus previous modal
+                        const prevModal = this.activeModals[this.activeModals.length - 1];
+                        const focusEl = prevModal.modal.querySelector(this.focusableElements);
+                        if (focusEl) focusEl.focus();
+                    }
+                    
+                    // Call onClose callback
+                    if (modalInfo.onClose) {
+                        modalInfo.onClose();
+                    }
+                }, 300);
+            }
+
+            handleKeydown(e) {
+                if (this.activeModals.length === 0) return;
+
+                const currentModal = this.activeModals[this.activeModals.length - 1];
+                
+                // Escape key
+                if (e.key === 'Escape') {
+                    e.preventDefault();
+                    this.closeModal(currentModal.backdrop);
+                    return;
+                }
+                
+                // Tab key - focus trap
+                if (e.key === 'Tab') {
+                    const focusableElements = currentModal.modal.querySelectorAll(this.focusableElements);
+                    const focusableArray = Array.from(focusableElements);
+                    
+                    if (focusableArray.length === 0) return;
+                    
+                    const currentIndex = focusableArray.indexOf(document.activeElement);
+                    
+                    if (e.shiftKey) {
+                        // Backward tab
+                        e.preventDefault();
+                        const prevIndex = currentIndex <= 0 ? focusableArray.length - 1 : currentIndex - 1;
+                        focusableArray[prevIndex].focus();
+                    } else {
+                        // Forward tab
+                        if (currentIndex === focusableArray.length - 1) {
+                            e.preventDefault();
+                            focusableArray[0].focus();
+                        }
+                    }
+                }
+            }
+
+            showLoading(modal) {
+                const loadingOverlay = modal.querySelector('.modal-loading');
+                if (loadingOverlay) {
+                    loadingOverlay.classList.add('active');
+                }
+            }
+
+            hideLoading(modal) {
+                const loadingOverlay = modal.querySelector('.modal-loading');
+                if (loadingOverlay) {
+                    loadingOverlay.classList.remove('active');
+                }
+            }
+        }
+
+        // Initialize modal manager
+        const modalManager = new ModalManager();
+
+        // Demo modal functions
+        function openModal(type) {
+            switch(type) {
+                case 'basic':
+                    modalManager.openModal({
+                        title: 'Welcome to Enhanced Modals',
+                        content: `
+                            <p>This modal demonstrates all the enhanced features:</p>
+                            <ul style="padding-left: 20px; margin-top: 16px;">
+                                <li>Smooth entrance and exit animations</li>
+                                <li>Backdrop blur effect</li>
+                                <li>Focus trap with tab cycling</li>
+                                <li>Keyboard navigation (try Tab and Escape)</li>
+                                <li>Click outside to close</li>
+                            </ul>
+                            <p style="margin-top: 20px;">Try opening multiple modals to see stacking in action!</p>
+                        `
+                    });
+                    break;
+                    
+                case 'form':
+                    modalManager.openModal({
+                        title: 'User Information',
+                        content: `
+                            <form class="demo-form" onsubmit="handleFormSubmit(event)">
+                                <div class="form-group">
+                                    <label for="name">Name</label>
+                                    <input type="text" id="name" class="form-control" placeholder="Enter your name" required>
+                                </div>
+                                <div class="form-group">
+                                    <label for="email">Email</label>
+                                    <input type="email" id="email" class="form-control" placeholder="Enter your email" required>
+                                </div>
+                                <div class="form-group">
+                                    <label for="message">Message</label>
+                                    <textarea id="message" class="form-control" rows="4" placeholder="Enter your message"></textarea>
+                                </div>
+                            </form>
+                        `,
+                        buttons: [
+                            { text: 'Cancel', type: 'secondary', action: 'close' },
+                            { text: 'Submit', type: 'primary', onClick: () => handleFormSubmit() }
+                        ]
+                    });
+                    break;
+                    
+                case 'long':
+                    modalManager.openModal({
+                        title: 'Terms of Service',
+                        size: 'lg',
+                        content: `
+                            <h3>1. Introduction</h3>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                            
+                            <h3>2. User Agreement</h3>
+                            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+                            
+                            <h3>3. Privacy Policy</h3>
+                            <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+                            
+                            <h3>4. Data Collection</h3>
+                            <p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
+                            
+                            <h3>5. User Rights</h3>
+                            <p>Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
+                            
+                            <h3>6. Limitations</h3>
+                            <p>Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>
+                            
+                            <h3>7. Modifications</h3>
+                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
+                            
+                            <h3>8. Contact Information</h3>
+                            <p>Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
+                        `,
+                        buttons: [
+                            { text: 'Decline', type: 'secondary', action: 'close' },
+                            { text: 'Accept', type: 'success', action: 'close' }
+                        ]
+                    });
+                    break;
+                    
+                case 'confirm':
+                    modalManager.openModal({
+                        title: 'Delete Confirmation',
+                        size: 'sm',
+                        content: `
+                            <div style="text-align: center;">
+                                <div class="confirmation-icon danger">
+                                    <svg width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                                    </svg>
+                                </div>
+                                <h3 style="margin-bottom: 12px;">Are you sure?</h3>
+                                <p style="color: #6b7280;">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
+                            </div>
+                        `,
+                        buttons: [
+                            { text: 'Cancel', type: 'secondary', action: 'close' },
+                            { text: 'Delete', type: 'danger', action: 'close' }
+                        ]
+                    });
+                    break;
+                    
+                case 'sizes':
+                    const { backdrop, modal } = modalManager.openModal({
+                        title: 'Modal Sizes Demo',
+                        content: `
+                            <p>Choose a modal size to see it in action:</p>
+                            <div style="display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px;">
+                                <button class="btn btn-secondary" onclick="openSizeDemo('sm')">Small Modal</button>
+                                <button class="btn btn-secondary" onclick="openSizeDemo('default')">Default Modal</button>
+                                <button class="btn btn-secondary" onclick="openSizeDemo('lg')">Large Modal</button>
+                                <button class="btn btn-secondary" onclick="openSizeDemo('xl')">Extra Large Modal</button>
+                                <button class="btn btn-secondary" onclick="openSizeDemo('fullscreen')">Fullscreen Modal</button>
+                            </div>
+                        `,
+                        showFooter: false
+                    });
+                    break;
+                    
+                case 'loading':
+                    const { backdrop: loadingBackdrop, modal: loadingModal } = modalManager.openModal({
+                        title: 'Loading Demo',
+                        content: `
+                            <p>Click the button below to see the loading state:</p>
+                            <div style="text-align: center; margin-top: 24px;">
+                                <button class="btn btn-primary" onclick="simulateLoading(this)">
+                                    Simulate Loading
+                                </button>
+                            </div>
+                        `
+                    });
+                    window.currentLoadingModal = loadingModal;
+                    break;
+            }
+        }
+
+        function openSizeDemo(size) {
+            modalManager.openModal({
+                title: `${size.charAt(0).toUpperCase() + size.slice(1)} Modal`,
+                size: size,
+                content: `
+                    <p>This is a ${size} sized modal. Notice how it adapts to different content needs:</p>
+                    <ul style="padding-left: 20px; margin-top: 16px;">
+                        <li>Small: Perfect for confirmations and simple forms</li>
+                        <li>Default: Standard size for most content</li>
+                        <li>Large: Great for detailed forms or content</li>
+                        <li>Extra Large: Ideal for tables or complex layouts</li>
+                        <li>Fullscreen: Maximum space for immersive experiences</li>
+                    </ul>
+                `,
+                showFooter: true
+            });
+        }
+
+        function handleFormSubmit(event) {
+            if (event) event.preventDefault();
+            
+            // Get the current modal
+            const currentModal = modalManager.activeModals[modalManager.activeModals.length - 1];
+            
+            // Show loading
+            modalManager.showLoading(currentModal.modal);
+            
+            // Simulate API call
+            setTimeout(() => {
+                modalManager.hideLoading(currentModal.modal);
+                modalManager.closeModal(currentModal.backdrop);
+                
+                // Show success modal
+                modalManager.openModal({
+                    title: 'Success!',
+                    size: 'sm',
+                    content: `
+                        <div style="text-align: center;">
+                            <div class="confirmation-icon success">
+                                <svg width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                </svg>
+                            </div>
+                            <p>Your form has been submitted successfully!</p>
+                        </div>
+                    `,
+                    buttons: [
+                        { text: 'OK', type: 'primary', action: 'close' }
+                    ]
+                });
+            }, 2000);
+        }
+
+        function simulateLoading(button) {
+            button.classList.add('btn-loading');
+            modalManager.showLoading(window.currentLoadingModal);
+            
+            setTimeout(() => {
+                button.classList.remove('btn-loading');
+                modalManager.hideLoading(window.currentLoadingModal);
+            }, 3000);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src_enhanced/ui_enhanced_6.html b/legacy/src_enhanced/ui_enhanced_6.html
new file mode 100644
index 0000000..ebcefb0
--- /dev/null
+++ b/legacy/src_enhanced/ui_enhanced_6.html
@@ -0,0 +1,1528 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Table Enhanced - Data Explorer</title>
+    <style>
+        :root {
+            --primary: #3b82f6;
+            --primary-dark: #2563eb;
+            --primary-light: #dbeafe;
+            --secondary: #6366f1;
+            --gray-50: #f9fafb;
+            --gray-100: #f3f4f6;
+            --gray-200: #e5e7eb;
+            --gray-300: #d1d5db;
+            --gray-400: #9ca3af;
+            --gray-500: #6b7280;
+            --gray-600: #4b5563;
+            --gray-700: #374151;
+            --gray-800: #1f2937;
+            --gray-900: #111827;
+            --success: #10b981;
+            --warning: #f59e0b;
+            --danger: #ef4444;
+            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            --radius: 0.5rem;
+            --radius-sm: 0.375rem;
+            --radius-lg: 0.75rem;
+            --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+            background: var(--gray-50);
+            color: var(--gray-800);
+            line-height: 1.5;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        main {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .subtitle {
+            font-size: 1.125rem;
+            color: var(--gray-600);
+            margin-bottom: 2rem;
+        }
+
+        /* Table Container */
+        .table-container {
+            background: white;
+            border-radius: var(--radius-lg);
+            box-shadow: var(--shadow-md);
+            overflow: hidden;
+            position: relative;
+        }
+
+        /* Table Controls */
+        .table-controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1.5rem;
+            border-bottom: 1px solid var(--gray-200);
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+
+        .search-container {
+            position: relative;
+            flex: 1;
+            max-width: 400px;
+        }
+
+        .search-icon {
+            position: absolute;
+            left: 0.75rem;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--gray-400);
+            pointer-events: none;
+        }
+
+        .search-input {
+            width: 100%;
+            padding: 0.625rem 1rem 0.625rem 2.5rem;
+            border: 1px solid var(--gray-300);
+            border-radius: var(--radius);
+            font-size: 0.875rem;
+            transition: var(--transition);
+        }
+
+        .search-input:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
+        .table-actions {
+            display: flex;
+            gap: 0.5rem;
+            align-items: center;
+        }
+
+        .btn {
+            padding: 0.625rem 1rem;
+            border: 1px solid var(--gray-300);
+            border-radius: var(--radius);
+            font-size: 0.875rem;
+            font-weight: 500;
+            background: white;
+            color: var(--gray-700);
+            cursor: pointer;
+            transition: var(--transition);
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            white-space: nowrap;
+        }
+
+        .btn:hover {
+            background: var(--gray-50);
+            border-color: var(--gray-400);
+        }
+
+        .btn:active {
+            transform: translateY(1px);
+        }
+
+        .btn-primary {
+            background: var(--primary);
+            color: white;
+            border-color: var(--primary);
+        }
+
+        .btn-primary:hover {
+            background: var(--primary-dark);
+            border-color: var(--primary-dark);
+        }
+
+        .btn-icon {
+            padding: 0.625rem;
+        }
+
+        /* Table Wrapper */
+        .table-wrapper {
+            overflow-x: auto;
+            position: relative;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        /* Table Header */
+        thead {
+            background: var(--gray-50);
+            position: sticky;
+            top: 0;
+            z-index: 10;
+            box-shadow: inset 0 -1px 0 var(--gray-200);
+        }
+
+        th {
+            padding: 1rem;
+            text-align: left;
+            font-weight: 600;
+            font-size: 0.875rem;
+            color: var(--gray-700);
+            white-space: nowrap;
+            user-select: none;
+            position: relative;
+        }
+
+        th.sortable {
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        th.sortable:hover {
+            background: var(--gray-100);
+        }
+
+        th.sortable .header-content {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .sort-indicator {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            opacity: 0.3;
+            transition: var(--transition);
+        }
+
+        .sort-indicator .arrow {
+            width: 0;
+            height: 0;
+            border-style: solid;
+            transition: var(--transition);
+        }
+
+        .sort-indicator .arrow-up {
+            border-width: 0 4px 4px 4px;
+            border-color: transparent transparent var(--gray-600) transparent;
+        }
+
+        .sort-indicator .arrow-down {
+            border-width: 4px 4px 0 4px;
+            border-color: var(--gray-600) transparent transparent transparent;
+        }
+
+        th.sorted-asc .sort-indicator {
+            opacity: 1;
+        }
+
+        th.sorted-asc .arrow-up {
+            border-color: transparent transparent var(--primary) transparent;
+        }
+
+        th.sorted-desc .sort-indicator {
+            opacity: 1;
+        }
+
+        th.sorted-desc .arrow-down {
+            border-color: var(--primary) transparent transparent transparent;
+        }
+
+        /* Column Resize Handle */
+        .resize-handle {
+            position: absolute;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            cursor: col-resize;
+            background: transparent;
+            transition: var(--transition);
+        }
+
+        .resize-handle:hover,
+        .resize-handle.resizing {
+            background: var(--primary);
+        }
+
+        /* Table Body */
+        tbody tr {
+            border-bottom: 1px solid var(--gray-100);
+            transition: var(--transition);
+        }
+
+        tbody tr:hover {
+            background: var(--gray-50);
+        }
+
+        tbody tr.selected {
+            background: var(--primary-light);
+        }
+
+        tbody tr.expanded {
+            background: var(--gray-50);
+        }
+
+        td {
+            padding: 1rem;
+            font-size: 0.875rem;
+            color: var(--gray-700);
+        }
+
+        /* Checkbox Column */
+        .checkbox-cell {
+            width: 40px;
+            padding: 0.5rem;
+        }
+
+        .checkbox {
+            width: 1.125rem;
+            height: 1.125rem;
+            cursor: pointer;
+            accent-color: var(--primary);
+        }
+
+        /* Expand Column */
+        .expand-cell {
+            width: 40px;
+            padding: 0.5rem;
+        }
+
+        .expand-btn {
+            width: 1.5rem;
+            height: 1.5rem;
+            border: none;
+            background: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--radius-sm);
+            transition: var(--transition);
+        }
+
+        .expand-btn:hover {
+            background: var(--gray-200);
+        }
+
+        .expand-icon {
+            transition: transform 0.2s ease;
+        }
+
+        .expanded .expand-icon {
+            transform: rotate(90deg);
+        }
+
+        /* Expanded Row */
+        .expanded-content {
+            grid-column: 1 / -1;
+            padding: 1rem;
+            background: var(--gray-50);
+            border-top: 1px solid var(--gray-200);
+            animation: slideDown 0.2s ease-out;
+        }
+
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* Status Badge */
+        .status-badge {
+            display: inline-flex;
+            align-items: center;
+            padding: 0.25rem 0.75rem;
+            border-radius: 9999px;
+            font-size: 0.75rem;
+            font-weight: 500;
+        }
+
+        .status-active {
+            background: #dcfce7;
+            color: #16a34a;
+        }
+
+        .status-pending {
+            background: #fef3c7;
+            color: #d97706;
+        }
+
+        .status-inactive {
+            background: #f3f4f6;
+            color: #6b7280;
+        }
+
+        /* Pagination */
+        .table-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem 1.5rem;
+            border-top: 1px solid var(--gray-200);
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+
+        .pagination-info {
+            font-size: 0.875rem;
+            color: var(--gray-600);
+        }
+
+        .pagination-controls {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .rows-per-page {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.875rem;
+            color: var(--gray-600);
+        }
+
+        .rows-per-page select {
+            padding: 0.375rem 2rem 0.375rem 0.75rem;
+            border: 1px solid var(--gray-300);
+            border-radius: var(--radius-sm);
+            font-size: 0.875rem;
+            background: white;
+            cursor: pointer;
+        }
+
+        .pagination-buttons {
+            display: flex;
+            gap: 0.25rem;
+        }
+
+        .pagination-btn {
+            padding: 0.5rem;
+            border: 1px solid var(--gray-300);
+            border-radius: var(--radius-sm);
+            background: white;
+            color: var(--gray-600);
+            cursor: pointer;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 2rem;
+            height: 2rem;
+        }
+
+        .pagination-btn:hover:not(:disabled) {
+            background: var(--gray-50);
+            border-color: var(--gray-400);
+        }
+
+        .pagination-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .pagination-btn.active {
+            background: var(--primary);
+            color: white;
+            border-color: var(--primary);
+        }
+
+        /* Loading State */
+        .loading-overlay {
+            position: absolute;
+            inset: 0;
+            background: rgba(255, 255, 255, 0.8);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 20;
+            opacity: 0;
+            visibility: hidden;
+            transition: var(--transition);
+        }
+
+        .loading-overlay.active {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .spinner {
+            width: 2rem;
+            height: 2rem;
+            border: 3px solid var(--gray-200);
+            border-top-color: var(--primary);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* Mobile Responsive */
+        @media (max-width: 768px) {
+            main {
+                padding: 1rem;
+            }
+
+            h1 {
+                font-size: 2rem;
+            }
+
+            .table-controls {
+                padding: 1rem;
+            }
+
+            .search-container {
+                max-width: none;
+                order: -1;
+                flex-basis: 100%;
+            }
+
+            /* Card View on Mobile */
+            .mobile-cards .table-wrapper {
+                display: none;
+            }
+
+            .mobile-cards .cards-container {
+                display: block;
+            }
+
+            .cards-container {
+                display: none;
+                padding: 1rem;
+            }
+
+            .card {
+                background: white;
+                border: 1px solid var(--gray-200);
+                border-radius: var(--radius);
+                padding: 1rem;
+                margin-bottom: 1rem;
+                box-shadow: var(--shadow-sm);
+                transition: var(--transition);
+            }
+
+            .card:hover {
+                box-shadow: var(--shadow);
+            }
+
+            .card.selected {
+                background: var(--primary-light);
+                border-color: var(--primary);
+            }
+
+            .card-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 0.75rem;
+                padding-bottom: 0.75rem;
+                border-bottom: 1px solid var(--gray-100);
+            }
+
+            .card-checkbox {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+            }
+
+            .card-field {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 0.5rem 0;
+                font-size: 0.875rem;
+            }
+
+            .card-field-label {
+                font-weight: 500;
+                color: var(--gray-600);
+            }
+
+            .card-field-value {
+                color: var(--gray-800);
+                text-align: right;
+            }
+
+            .table-footer {
+                padding: 1rem;
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .pagination-info {
+                text-align: center;
+            }
+
+            .pagination-controls {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .rows-per-page {
+                justify-content: center;
+            }
+
+            .pagination-buttons {
+                justify-content: center;
+            }
+        }
+
+        /* Accessibility */
+        .visually-hidden {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+        }
+
+        /* Focus Styles */
+        button:focus-visible,
+        input:focus-visible,
+        select:focus-visible {
+            outline: 2px solid var(--primary);
+            outline-offset: 2px;
+        }
+
+        /* No Data State */
+        .no-data {
+            text-align: center;
+            padding: 3rem;
+            color: var(--gray-500);
+        }
+
+        .no-data-icon {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            opacity: 0.5;
+        }
+
+        /* Column Filter Dropdown */
+        .column-filter {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            background: white;
+            border: 1px solid var(--gray-200);
+            border-radius: var(--radius);
+            box-shadow: var(--shadow-lg);
+            padding: 0.5rem;
+            min-width: 200px;
+            z-index: 100;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-10px);
+            transition: var(--transition);
+        }
+
+        .column-filter.active {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
+
+        .filter-item {
+            padding: 0.5rem;
+            font-size: 0.875rem;
+            cursor: pointer;
+            border-radius: var(--radius-sm);
+            transition: var(--transition);
+        }
+
+        .filter-item:hover {
+            background: var(--gray-50);
+        }
+
+        .filter-item label {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Table - Enhanced</h1>
+        <p class="subtitle">Advanced data table with sorting, filtering, selection, and responsive design</p>
+        
+        <div class="table-container">
+            <div class="table-controls">
+                <div class="search-container">
+                    <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <path d="m21 21-4.35-4.35"></path>
+                    </svg>
+                    <input type="text" class="search-input" placeholder="Search across all columns..." id="searchInput">
+                </div>
+                
+                <div class="table-actions">
+                    <button class="btn" id="exportBtn">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                            <polyline points="7 10 12 15 17 10"></polyline>
+                            <line x1="12" y1="15" x2="12" y2="3"></line>
+                        </svg>
+                        Export
+                    </button>
+                    <button class="btn" id="columnsBtn">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <line x1="12" y1="20" x2="12" y2="10"></line>
+                            <line x1="18" y1="20" x2="18" y2="4"></line>
+                            <line x1="6" y1="20" x2="6" y2="16"></line>
+                        </svg>
+                        Columns
+                    </button>
+                    <button class="btn btn-icon" id="viewToggle" aria-label="Toggle view">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="3" y="3" width="7" height="7"></rect>
+                            <rect x="14" y="3" width="7" height="7"></rect>
+                            <rect x="14" y="14" width="7" height="7"></rect>
+                            <rect x="3" y="14" width="7" height="7"></rect>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            
+            <div class="table-wrapper">
+                <table id="dataTable" role="table">
+                    <thead>
+                        <tr role="row">
+                            <th class="checkbox-cell">
+                                <input type="checkbox" class="checkbox" id="selectAll" aria-label="Select all rows">
+                            </th>
+                            <th class="expand-cell"></th>
+                            <th class="sortable" data-column="id" role="columnheader" aria-sort="none">
+                                <div class="header-content">
+                                    <span>ID</span>
+                                    <div class="sort-indicator">
+                                        <div class="arrow arrow-up"></div>
+                                        <div class="arrow arrow-down"></div>
+                                    </div>
+                                </div>
+                                <div class="resize-handle" data-column="id"></div>
+                            </th>
+                            <th class="sortable" data-column="name" role="columnheader" aria-sort="none">
+                                <div class="header-content">
+                                    <span>Name</span>
+                                    <div class="sort-indicator">
+                                        <div class="arrow arrow-up"></div>
+                                        <div class="arrow arrow-down"></div>
+                                    </div>
+                                </div>
+                                <div class="resize-handle" data-column="name"></div>
+                            </th>
+                            <th class="sortable" data-column="email" role="columnheader" aria-sort="none">
+                                <div class="header-content">
+                                    <span>Email</span>
+                                    <div class="sort-indicator">
+                                        <div class="arrow arrow-up"></div>
+                                        <div class="arrow arrow-down"></div>
+                                    </div>
+                                </div>
+                                <div class="resize-handle" data-column="email"></div>
+                            </th>
+                            <th class="sortable" data-column="department" role="columnheader" aria-sort="none">
+                                <div class="header-content">
+                                    <span>Department</span>
+                                    <div class="sort-indicator">
+                                        <div class="arrow arrow-up"></div>
+                                        <div class="arrow arrow-down"></div>
+                                    </div>
+                                </div>
+                                <div class="resize-handle" data-column="department"></div>
+                            </th>
+                            <th class="sortable" data-column="role" role="columnheader" aria-sort="none">
+                                <div class="header-content">
+                                    <span>Role</span>
+                                    <div class="sort-indicator">
+                                        <div class="arrow arrow-up"></div>
+                                        <div class="arrow arrow-down"></div>
+                                    </div>
+                                </div>
+                                <div class="resize-handle" data-column="role"></div>
+                            </th>
+                            <th class="sortable" data-column="status" role="columnheader" aria-sort="none">
+                                <div class="header-content">
+                                    <span>Status</span>
+                                    <div class="sort-indicator">
+                                        <div class="arrow arrow-up"></div>
+                                        <div class="arrow arrow-down"></div>
+                                    </div>
+                                </div>
+                                <div class="resize-handle" data-column="status"></div>
+                            </th>
+                            <th class="sortable" data-column="lastLogin" role="columnheader" aria-sort="none">
+                                <div class="header-content">
+                                    <span>Last Login</span>
+                                    <div class="sort-indicator">
+                                        <div class="arrow arrow-up"></div>
+                                        <div class="arrow arrow-down"></div>
+                                    </div>
+                                </div>
+                                <div class="resize-handle" data-column="lastLogin"></div>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody id="tableBody">
+                        <!-- Table rows will be inserted here -->
+                    </tbody>
+                </table>
+            </div>
+            
+            <div class="cards-container" id="cardsContainer">
+                <!-- Card view will be inserted here -->
+            </div>
+            
+            <div class="table-footer">
+                <div class="pagination-info">
+                    Showing <span id="startRecord">1</span> to <span id="endRecord">10</span> of <span id="totalRecords">0</span> entries
+                    <span id="selectedInfo" style="display: none;">
+                        (<span id="selectedCount">0</span> selected)
+                    </span>
+                </div>
+                
+                <div class="pagination-controls">
+                    <div class="rows-per-page">
+                        <label for="rowsPerPage">Rows per page:</label>
+                        <select id="rowsPerPage">
+                            <option value="10">10</option>
+                            <option value="25">25</option>
+                            <option value="50">50</option>
+                            <option value="100">100</option>
+                        </select>
+                    </div>
+                    
+                    <div class="pagination-buttons">
+                        <button class="pagination-btn" id="firstPage" aria-label="First page">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline points="11 17 6 12 11 7"></polyline>
+                                <polyline points="18 17 13 12 18 7"></polyline>
+                            </svg>
+                        </button>
+                        <button class="pagination-btn" id="prevPage" aria-label="Previous page">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline points="15 18 9 12 15 6"></polyline>
+                            </svg>
+                        </button>
+                        <div id="pageNumbers"></div>
+                        <button class="pagination-btn" id="nextPage" aria-label="Next page">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline points="9 18 15 12 9 6"></polyline>
+                            </svg>
+                        </button>
+                        <button class="pagination-btn" id="lastPage" aria-label="Last page">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline points="13 17 18 12 13 7"></polyline>
+                                <polyline points="6 17 11 12 6 7"></polyline>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="loading-overlay" id="loadingOverlay">
+                <div class="spinner"></div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Sample data generation
+        const departments = ['Engineering', 'Sales', 'Marketing', 'HR', 'Finance', 'Operations'];
+        const roles = ['Manager', 'Senior', 'Junior', 'Lead', 'Specialist', 'Analyst'];
+        const statuses = ['Active', 'Pending', 'Inactive'];
+        const firstNames = ['John', 'Jane', 'Michael', 'Sarah', 'David', 'Emma', 'James', 'Lisa', 'Robert', 'Maria'];
+        const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Rodriguez', 'Martinez'];
+        
+        function generateData(count) {
+            const data = [];
+            for (let i = 1; i <= count; i++) {
+                const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
+                const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+                const name = `${firstName} ${lastName}`;
+                const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@company.com`;
+                
+                data.push({
+                    id: i,
+                    name: name,
+                    email: email,
+                    department: departments[Math.floor(Math.random() * departments.length)],
+                    role: roles[Math.floor(Math.random() * roles.length)],
+                    status: statuses[Math.floor(Math.random() * statuses.length)],
+                    lastLogin: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toLocaleDateString(),
+                    details: {
+                        phone: `+1 (555) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`,
+                        location: ['New York', 'San Francisco', 'London', 'Tokyo', 'Berlin'][Math.floor(Math.random() * 5)],
+                        joined: new Date(Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000).toLocaleDateString()
+                    }
+                });
+            }
+            return data;
+        }
+        
+        // Initialize data
+        let allData = generateData(250);
+        let filteredData = [...allData];
+        let sortColumn = null;
+        let sortDirection = 'asc';
+        let currentPage = 1;
+        let rowsPerPage = 10;
+        let selectedRows = new Set();
+        let expandedRows = new Set();
+        let isMobileView = false;
+        
+        // DOM elements
+        const tableBody = document.getElementById('tableBody');
+        const cardsContainer = document.getElementById('cardsContainer');
+        const searchInput = document.getElementById('searchInput');
+        const selectAllCheckbox = document.getElementById('selectAll');
+        const rowsPerPageSelect = document.getElementById('rowsPerPage');
+        const viewToggleBtn = document.getElementById('viewToggle');
+        const loadingOverlay = document.getElementById('loadingOverlay');
+        
+        // Initialize table
+        function init() {
+            setupEventListeners();
+            renderTable();
+            updatePaginationInfo();
+            checkMobileView();
+        }
+        
+        // Setup event listeners
+        function setupEventListeners() {
+            // Search
+            searchInput.addEventListener('input', debounce(handleSearch, 300));
+            
+            // Sorting
+            document.querySelectorAll('.sortable').forEach(th => {
+                th.addEventListener('click', (e) => {
+                    if (!e.target.classList.contains('resize-handle')) {
+                        handleSort(th.dataset.column);
+                    }
+                });
+            });
+            
+            // Select all
+            selectAllCheckbox.addEventListener('change', handleSelectAll);
+            
+            // Pagination
+            rowsPerPageSelect.addEventListener('change', handleRowsPerPageChange);
+            document.getElementById('firstPage').addEventListener('click', () => goToPage(1));
+            document.getElementById('prevPage').addEventListener('click', () => goToPage(currentPage - 1));
+            document.getElementById('nextPage').addEventListener('click', () => goToPage(currentPage + 1));
+            document.getElementById('lastPage').addEventListener('click', () => goToPage(Math.ceil(filteredData.length / rowsPerPage)));
+            
+            // View toggle
+            viewToggleBtn.addEventListener('click', toggleView);
+            
+            // Export
+            document.getElementById('exportBtn').addEventListener('click', handleExport);
+            
+            // Column resize
+            setupColumnResize();
+            
+            // Window resize
+            window.addEventListener('resize', debounce(checkMobileView, 150));
+            
+            // Keyboard navigation
+            document.addEventListener('keydown', handleKeyboardNavigation);
+        }
+        
+        // Render table
+        function renderTable() {
+            const start = (currentPage - 1) * rowsPerPage;
+            const end = start + rowsPerPage;
+            const pageData = filteredData.slice(start, end);
+            
+            tableBody.innerHTML = '';
+            
+            if (pageData.length === 0) {
+                tableBody.innerHTML = `
+                    <tr>
+                        <td colspan="9" class="no-data">
+                            <div class="no-data-icon">📊</div>
+                            <div>No data found</div>
+                        </td>
+                    </tr>
+                `;
+                return;
+            }
+            
+            pageData.forEach(row => {
+                const tr = document.createElement('tr');
+                tr.dataset.id = row.id;
+                if (selectedRows.has(row.id)) {
+                    tr.classList.add('selected');
+                }
+                
+                tr.innerHTML = `
+                    <td class="checkbox-cell">
+                        <input type="checkbox" class="checkbox row-checkbox" data-id="${row.id}" ${selectedRows.has(row.id) ? 'checked' : ''}>
+                    </td>
+                    <td class="expand-cell">
+                        <button class="expand-btn" aria-label="Expand row" data-id="${row.id}">
+                            <svg class="expand-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline points="9 18 15 12 9 6"></polyline>
+                            </svg>
+                        </button>
+                    </td>
+                    <td>${row.id}</td>
+                    <td>${row.name}</td>
+                    <td>${row.email}</td>
+                    <td>${row.department}</td>
+                    <td>${row.role}</td>
+                    <td><span class="status-badge status-${row.status.toLowerCase()}">${row.status}</span></td>
+                    <td>${row.lastLogin}</td>
+                `;
+                
+                tableBody.appendChild(tr);
+                
+                // Add expanded content if row is expanded
+                if (expandedRows.has(row.id)) {
+                    const expandedTr = document.createElement('tr');
+                    expandedTr.classList.add('expanded');
+                    expandedTr.innerHTML = `
+                        <td colspan="9" class="expanded-content">
+                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
+                                <div>
+                                    <strong>Phone:</strong> ${row.details.phone}
+                                </div>
+                                <div>
+                                    <strong>Location:</strong> ${row.details.location}
+                                </div>
+                                <div>
+                                    <strong>Joined:</strong> ${row.details.joined}
+                                </div>
+                                <div>
+                                    <strong>Employee ID:</strong> EMP${String(row.id).padStart(5, '0')}
+                                </div>
+                            </div>
+                        </td>
+                    `;
+                    tableBody.appendChild(expandedTr);
+                    tr.classList.add('expanded');
+                }
+            });
+            
+            // Setup row event listeners
+            setupRowEventListeners();
+            
+            // Render cards view
+            renderCards(pageData);
+        }
+        
+        // Render cards view
+        function renderCards(pageData) {
+            cardsContainer.innerHTML = '';
+            
+            if (pageData.length === 0) {
+                cardsContainer.innerHTML = `
+                    <div class="no-data">
+                        <div class="no-data-icon">📊</div>
+                        <div>No data found</div>
+                    </div>
+                `;
+                return;
+            }
+            
+            pageData.forEach(row => {
+                const card = document.createElement('div');
+                card.className = 'card';
+                card.dataset.id = row.id;
+                if (selectedRows.has(row.id)) {
+                    card.classList.add('selected');
+                }
+                
+                card.innerHTML = `
+                    <div class="card-header">
+                        <div class="card-checkbox">
+                            <input type="checkbox" class="checkbox row-checkbox" data-id="${row.id}" ${selectedRows.has(row.id) ? 'checked' : ''}>
+                            <strong>${row.name}</strong>
+                        </div>
+                        <span class="status-badge status-${row.status.toLowerCase()}">${row.status}</span>
+                    </div>
+                    <div class="card-field">
+                        <span class="card-field-label">ID</span>
+                        <span class="card-field-value">${row.id}</span>
+                    </div>
+                    <div class="card-field">
+                        <span class="card-field-label">Email</span>
+                        <span class="card-field-value">${row.email}</span>
+                    </div>
+                    <div class="card-field">
+                        <span class="card-field-label">Department</span>
+                        <span class="card-field-value">${row.department}</span>
+                    </div>
+                    <div class="card-field">
+                        <span class="card-field-label">Role</span>
+                        <span class="card-field-value">${row.role}</span>
+                    </div>
+                    <div class="card-field">
+                        <span class="card-field-label">Last Login</span>
+                        <span class="card-field-value">${row.lastLogin}</span>
+                    </div>
+                `;
+                
+                cardsContainer.appendChild(card);
+            });
+            
+            // Setup card event listeners
+            setupCardEventListeners();
+        }
+        
+        // Setup row event listeners
+        function setupRowEventListeners() {
+            // Row checkboxes
+            document.querySelectorAll('.row-checkbox').forEach(checkbox => {
+                checkbox.addEventListener('change', (e) => {
+                    handleRowSelection(parseInt(e.target.dataset.id), e.target.checked, e);
+                });
+            });
+            
+            // Expand buttons
+            document.querySelectorAll('.expand-btn').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    handleRowExpand(parseInt(e.currentTarget.dataset.id));
+                });
+            });
+            
+            // Row click for selection
+            document.querySelectorAll('tbody tr').forEach(tr => {
+                tr.addEventListener('click', (e) => {
+                    if (!e.target.classList.contains('checkbox') && 
+                        !e.target.classList.contains('expand-btn') &&
+                        !e.target.closest('.expand-btn')) {
+                        const checkbox = tr.querySelector('.row-checkbox');
+                        if (checkbox) {
+                            checkbox.checked = !checkbox.checked;
+                            handleRowSelection(parseInt(checkbox.dataset.id), checkbox.checked, e);
+                        }
+                    }
+                });
+            });
+        }
+        
+        // Setup card event listeners
+        function setupCardEventListeners() {
+            document.querySelectorAll('.cards-container .row-checkbox').forEach(checkbox => {
+                checkbox.addEventListener('change', (e) => {
+                    handleRowSelection(parseInt(e.target.dataset.id), e.target.checked, e);
+                });
+            });
+        }
+        
+        // Handle search
+        function handleSearch() {
+            const searchTerm = searchInput.value.toLowerCase();
+            
+            if (!searchTerm) {
+                filteredData = [...allData];
+            } else {
+                filteredData = allData.filter(row => {
+                    return Object.values(row).some(value => {
+                        if (typeof value === 'object') {
+                            return Object.values(value).some(v => 
+                                String(v).toLowerCase().includes(searchTerm)
+                            );
+                        }
+                        return String(value).toLowerCase().includes(searchTerm);
+                    });
+                });
+            }
+            
+            currentPage = 1;
+            renderTable();
+            updatePaginationInfo();
+        }
+        
+        // Handle sort
+        function handleSort(column) {
+            showLoading();
+            
+            // Update sort direction
+            if (sortColumn === column) {
+                sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+            } else {
+                sortColumn = column;
+                sortDirection = 'asc';
+            }
+            
+            // Update UI
+            document.querySelectorAll('.sortable').forEach(th => {
+                th.classList.remove('sorted-asc', 'sorted-desc');
+                th.setAttribute('aria-sort', 'none');
+            });
+            
+            const currentTh = document.querySelector(`[data-column="${column}"]`);
+            currentTh.classList.add(`sorted-${sortDirection}`);
+            currentTh.setAttribute('aria-sort', sortDirection === 'asc' ? 'ascending' : 'descending');
+            
+            // Sort data
+            filteredData.sort((a, b) => {
+                let aVal = a[column];
+                let bVal = b[column];
+                
+                // Handle different data types
+                if (typeof aVal === 'number') {
+                    return sortDirection === 'asc' ? aVal - bVal : bVal - aVal;
+                } else if (column === 'lastLogin') {
+                    aVal = new Date(aVal);
+                    bVal = new Date(bVal);
+                    return sortDirection === 'asc' ? aVal - bVal : bVal - aVal;
+                } else {
+                    aVal = String(aVal).toLowerCase();
+                    bVal = String(bVal).toLowerCase();
+                    if (sortDirection === 'asc') {
+                        return aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
+                    } else {
+                        return aVal > bVal ? -1 : aVal < bVal ? 1 : 0;
+                    }
+                }
+            });
+            
+            setTimeout(() => {
+                renderTable();
+                hideLoading();
+            }, 300);
+        }
+        
+        // Handle row selection
+        function handleRowSelection(id, checked, event) {
+            if (event.shiftKey && lastSelectedId !== null) {
+                // Range selection
+                const start = Math.min(id, lastSelectedId);
+                const end = Math.max(id, lastSelectedId);
+                
+                filteredData.forEach(row => {
+                    if (row.id >= start && row.id <= end) {
+                        if (checked) {
+                            selectedRows.add(row.id);
+                        } else {
+                            selectedRows.delete(row.id);
+                        }
+                    }
+                });
+                
+                renderTable();
+            } else {
+                // Single selection
+                if (checked) {
+                    selectedRows.add(id);
+                } else {
+                    selectedRows.delete(id);
+                }
+                
+                // Update UI
+                const tr = document.querySelector(`tr[data-id="${id}"]`);
+                const card = document.querySelector(`.card[data-id="${id}"]`);
+                
+                if (tr) tr.classList.toggle('selected', checked);
+                if (card) card.classList.toggle('selected', checked);
+            }
+            
+            lastSelectedId = id;
+            updateSelectionInfo();
+            updateSelectAllCheckbox();
+        }
+        
+        let lastSelectedId = null;
+        
+        // Handle select all
+        function handleSelectAll() {
+            const checked = selectAllCheckbox.checked;
+            const start = (currentPage - 1) * rowsPerPage;
+            const end = start + rowsPerPage;
+            const pageData = filteredData.slice(start, end);
+            
+            pageData.forEach(row => {
+                if (checked) {
+                    selectedRows.add(row.id);
+                } else {
+                    selectedRows.delete(row.id);
+                }
+            });
+            
+            renderTable();
+            updateSelectionInfo();
+        }
+        
+        // Update select all checkbox
+        function updateSelectAllCheckbox() {
+            const start = (currentPage - 1) * rowsPerPage;
+            const end = start + rowsPerPage;
+            const pageData = filteredData.slice(start, end);
+            const pageIds = pageData.map(row => row.id);
+            const selectedPageIds = pageIds.filter(id => selectedRows.has(id));
+            
+            selectAllCheckbox.checked = pageIds.length > 0 && selectedPageIds.length === pageIds.length;
+            selectAllCheckbox.indeterminate = selectedPageIds.length > 0 && selectedPageIds.length < pageIds.length;
+        }
+        
+        // Handle row expand
+        function handleRowExpand(id) {
+            if (expandedRows.has(id)) {
+                expandedRows.delete(id);
+            } else {
+                expandedRows.add(id);
+            }
+            renderTable();
+        }
+        
+        // Handle rows per page change
+        function handleRowsPerPageChange() {
+            rowsPerPage = parseInt(rowsPerPageSelect.value);
+            currentPage = 1;
+            renderTable();
+            updatePaginationInfo();
+        }
+        
+        // Go to page
+        function goToPage(page) {
+            const totalPages = Math.ceil(filteredData.length / rowsPerPage);
+            if (page < 1 || page > totalPages) return;
+            
+            currentPage = page;
+            renderTable();
+            updatePaginationInfo();
+        }
+        
+        // Update pagination info
+        function updatePaginationInfo() {
+            const totalPages = Math.ceil(filteredData.length / rowsPerPage);
+            const start = Math.min((currentPage - 1) * rowsPerPage + 1, filteredData.length);
+            const end = Math.min(currentPage * rowsPerPage, filteredData.length);
+            
+            document.getElementById('startRecord').textContent = start;
+            document.getElementById('endRecord').textContent = end;
+            document.getElementById('totalRecords').textContent = filteredData.length;
+            
+            // Update pagination buttons
+            document.getElementById('firstPage').disabled = currentPage === 1;
+            document.getElementById('prevPage').disabled = currentPage === 1;
+            document.getElementById('nextPage').disabled = currentPage === totalPages;
+            document.getElementById('lastPage').disabled = currentPage === totalPages;
+            
+            // Update page numbers
+            const pageNumbers = document.getElementById('pageNumbers');
+            pageNumbers.innerHTML = '';
+            
+            const maxButtons = 5;
+            let startPage = Math.max(1, currentPage - Math.floor(maxButtons / 2));
+            let endPage = Math.min(totalPages, startPage + maxButtons - 1);
+            
+            if (endPage - startPage < maxButtons - 1) {
+                startPage = Math.max(1, endPage - maxButtons + 1);
+            }
+            
+            for (let i = startPage; i <= endPage; i++) {
+                const btn = document.createElement('button');
+                btn.className = 'pagination-btn';
+                btn.textContent = i;
+                if (i === currentPage) {
+                    btn.classList.add('active');
+                }
+                btn.addEventListener('click', () => goToPage(i));
+                pageNumbers.appendChild(btn);
+            }
+        }
+        
+        // Update selection info
+        function updateSelectionInfo() {
+            const selectedInfo = document.getElementById('selectedInfo');
+            const selectedCount = document.getElementById('selectedCount');
+            
+            if (selectedRows.size > 0) {
+                selectedInfo.style.display = 'inline';
+                selectedCount.textContent = selectedRows.size;
+            } else {
+                selectedInfo.style.display = 'none';
+            }
+        }
+        
+        // Toggle view
+        function toggleView() {
+            isMobileView = !isMobileView;
+            document.querySelector('.table-container').classList.toggle('mobile-cards', isMobileView);
+            
+            // Update icon
+            viewToggleBtn.innerHTML = isMobileView ? `
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="8" y1="6" x2="21" y2="6"></line>
+                    <line x1="8" y1="12" x2="21" y2="12"></line>
+                    <line x1="8" y1="18" x2="21" y2="18"></line>
+                    <line x1="3" y1="6" x2="3.01" y2="6"></line>
+                    <line x1="3" y1="12" x2="3.01" y2="12"></line>
+                    <line x1="3" y1="18" x2="3.01" y2="18"></line>
+                </svg>
+            ` : `
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="3" y="3" width="7" height="7"></rect>
+                    <rect x="14" y="3" width="7" height="7"></rect>
+                    <rect x="14" y="14" width="7" height="7"></rect>
+                    <rect x="3" y="14" width="7" height="7"></rect>
+                </svg>
+            `;
+        }
+        
+        // Check mobile view
+        function checkMobileView() {
+            if (window.innerWidth <= 768 && !isMobileView) {
+                toggleView();
+            } else if (window.innerWidth > 768 && isMobileView) {
+                toggleView();
+            }
+        }
+        
+        // Handle export
+        function handleExport() {
+            const dataToExport = selectedRows.size > 0 
+                ? filteredData.filter(row => selectedRows.has(row.id))
+                : filteredData;
+            
+            // Convert to CSV
+            const headers = ['ID', 'Name', 'Email', 'Department', 'Role', 'Status', 'Last Login'];
+            const csv = [
+                headers.join(','),
+                ...dataToExport.map(row => 
+                    [row.id, row.name, row.email, row.department, row.role, row.status, row.lastLogin].join(',')
+                )
+            ].join('\n');
+            
+            // Download
+            const blob = new Blob([csv], { type: 'text/csv' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `table-export-${new Date().toISOString().split('T')[0]}.csv`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+        
+        // Setup column resize
+        function setupColumnResize() {
+            let isResizing = false;
+            let currentColumn = null;
+            let startX = 0;
+            let startWidth = 0;
+            
+            document.querySelectorAll('.resize-handle').forEach(handle => {
+                handle.addEventListener('mousedown', (e) => {
+                    isResizing = true;
+                    currentColumn = handle.dataset.column;
+                    startX = e.pageX;
+                    const th = handle.parentElement;
+                    startWidth = th.offsetWidth;
+                    handle.classList.add('resizing');
+                    document.body.style.cursor = 'col-resize';
+                    e.preventDefault();
+                });
+            });
+            
+            document.addEventListener('mousemove', (e) => {
+                if (!isResizing) return;
+                
+                const diff = e.pageX - startX;
+                const newWidth = Math.max(100, startWidth + diff);
+                const th = document.querySelector(`[data-column="${currentColumn}"]`);
+                th.style.width = newWidth + 'px';
+            });
+            
+            document.addEventListener('mouseup', () => {
+                if (isResizing) {
+                    isResizing = false;
+                    document.querySelector('.resize-handle.resizing')?.classList.remove('resizing');
+                    document.body.style.cursor = '';
+                }
+            });
+        }
+        
+        // Handle keyboard navigation
+        function handleKeyboardNavigation(e) {
+            // Ctrl/Cmd + A to select all
+            if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+                e.preventDefault();
+                selectAllCheckbox.checked = true;
+                handleSelectAll();
+            }
+            
+            // Arrow keys for navigation
+            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                const focused = document.activeElement;
+                const tr = focused.closest('tr');
+                if (tr) {
+                    e.preventDefault();
+                    const next = e.key === 'ArrowUp' ? tr.previousElementSibling : tr.nextElementSibling;
+                    if (next && next.querySelector('.row-checkbox')) {
+                        next.querySelector('.row-checkbox').focus();
+                    }
+                }
+            }
+        }
+        
+        // Show loading
+        function showLoading() {
+            loadingOverlay.classList.add('active');
+        }
+        
+        // Hide loading
+        function hideLoading() {
+            loadingOverlay.classList.remove('active');
+        }
+        
+        // Debounce function
+        function debounce(func, wait) {
+            let timeout;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        }
+        
+        // Initialize
+        init();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src_enhanced/ui_enhanced_7.html b/legacy/src_enhanced/ui_enhanced_7.html
new file mode 100644
index 0000000..ce80f76
--- /dev/null
+++ b/legacy/src_enhanced/ui_enhanced_7.html
@@ -0,0 +1,1079 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tab Navigation Enhanced</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: #f8f9fa;
+            color: #1a1a1a;
+            line-height: 1.6;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        main {
+            width: 100%;
+            max-width: 1200px;
+            background: white;
+            border-radius: 16px;
+            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+            overflow: hidden;
+        }
+
+        h1 {
+            text-align: center;
+            padding: 40px 20px 20px;
+            font-size: 2rem;
+            font-weight: 600;
+            color: #1a1a1a;
+        }
+
+        .component-showcase {
+            padding: 20px;
+        }
+
+        /* Tab Container */
+        .tab-container {
+            margin-bottom: 40px;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+            overflow: hidden;
+        }
+
+        /* Tab Header */
+        .tab-header {
+            position: relative;
+            background: #f8f9fa;
+            border-bottom: 1px solid #e5e7eb;
+            overflow: hidden;
+        }
+
+        /* Tab List */
+        .tab-list {
+            display: flex;
+            position: relative;
+            overflow-x: auto;
+            scroll-behavior: smooth;
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+        }
+
+        .tab-list::-webkit-scrollbar {
+            display: none;
+        }
+
+        /* Scroll Indicators */
+        .scroll-indicator {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 40px;
+            pointer-events: none;
+            z-index: 10;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .scroll-indicator.left {
+            left: 0;
+            background: linear-gradient(to right, rgba(248, 249, 250, 1), rgba(248, 249, 250, 0));
+        }
+
+        .scroll-indicator.right {
+            right: 0;
+            background: linear-gradient(to left, rgba(248, 249, 250, 1), rgba(248, 249, 250, 0));
+        }
+
+        .scroll-indicator.visible {
+            opacity: 1;
+        }
+
+        /* Tab Items */
+        .tab-item {
+            position: relative;
+            padding: 16px 24px;
+            border: none;
+            background: none;
+            color: #6b7280;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            white-space: nowrap;
+            transition: color 0.2s ease, background-color 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            user-select: none;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        .tab-item:hover {
+            color: #374151;
+            background-color: rgba(0, 0, 0, 0.04);
+        }
+
+        .tab-item:focus {
+            outline: none;
+            box-shadow: inset 0 0 0 2px #3b82f6;
+            border-radius: 4px;
+        }
+
+        .tab-item.active {
+            color: #3b82f6;
+        }
+
+        .tab-item.loading {
+            color: #9ca3af;
+            pointer-events: none;
+        }
+
+        .tab-item.dragging {
+            opacity: 0.5;
+            cursor: grabbing;
+        }
+
+        /* Close Button */
+        .tab-close {
+            margin-left: 8px;
+            padding: 2px;
+            background: none;
+            border: none;
+            color: #9ca3af;
+            cursor: pointer;
+            border-radius: 4px;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .tab-close:hover {
+            color: #ef4444;
+            background: rgba(239, 68, 68, 0.1);
+        }
+
+        .tab-close svg {
+            width: 14px;
+            height: 14px;
+        }
+
+        /* Active Tab Indicator */
+        .tab-indicator {
+            position: absolute;
+            bottom: 0;
+            height: 3px;
+            background: #3b82f6;
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            border-radius: 3px 3px 0 0;
+        }
+
+        /* Tab Content */
+        .tab-content {
+            position: relative;
+            min-height: 300px;
+            overflow: hidden;
+        }
+
+        .tab-panel {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 32px;
+            opacity: 0;
+            transform: translateX(20px);
+            transition: opacity 0.3s ease, transform 0.3s ease;
+            pointer-events: none;
+        }
+
+        .tab-panel.active {
+            opacity: 1;
+            transform: translateX(0);
+            pointer-events: auto;
+            position: relative;
+        }
+
+        .tab-panel.fade-out {
+            transform: translateX(-20px);
+        }
+
+        /* Loading State */
+        .tab-loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 60px;
+        }
+
+        .spinner {
+            width: 32px;
+            height: 32px;
+            border: 3px solid #e5e7eb;
+            border-top-color: #3b82f6;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* Vertical Tabs */
+        .tab-container.vertical {
+            display: flex;
+        }
+
+        .tab-container.vertical .tab-header {
+            width: 200px;
+            border-bottom: none;
+            border-right: 1px solid #e5e7eb;
+        }
+
+        .tab-container.vertical .tab-list {
+            flex-direction: column;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+
+        .tab-container.vertical .tab-indicator {
+            width: 3px;
+            height: auto;
+            right: 0;
+            left: auto;
+            bottom: auto;
+        }
+
+        .tab-container.vertical .tab-content {
+            flex: 1;
+        }
+
+        /* Mobile Responsive */
+        @media (max-width: 640px) {
+            .tab-item {
+                padding: 12px 16px;
+                font-size: 13px;
+            }
+
+            .tab-panel {
+                padding: 24px 16px;
+            }
+
+            .tab-container.vertical {
+                flex-direction: column;
+            }
+
+            .tab-container.vertical .tab-header {
+                width: 100%;
+                border-right: none;
+                border-bottom: 1px solid #e5e7eb;
+            }
+
+            .tab-container.vertical .tab-list {
+                flex-direction: row;
+            }
+
+            .tab-container.vertical .tab-indicator {
+                width: auto;
+                height: 3px;
+                right: auto;
+                bottom: 0;
+            }
+        }
+
+        /* Touch Support */
+        .tab-list.touching {
+            scroll-behavior: auto;
+        }
+
+        /* Dropdown for Mobile */
+        .tab-dropdown {
+            display: none;
+            position: relative;
+            margin: 20px;
+        }
+
+        .tab-dropdown-toggle {
+            width: 100%;
+            padding: 12px 16px;
+            background: white;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            color: #374151;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            transition: all 0.2s ease;
+        }
+
+        .tab-dropdown-toggle:hover {
+            border-color: #3b82f6;
+        }
+
+        .tab-dropdown-menu {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            margin-top: 4px;
+            background: white;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            opacity: 0;
+            transform: translateY(-8px);
+            pointer-events: none;
+            transition: all 0.2s ease;
+            max-height: 300px;
+            overflow-y: auto;
+            z-index: 100;
+        }
+
+        .tab-dropdown.open .tab-dropdown-menu {
+            opacity: 1;
+            transform: translateY(0);
+            pointer-events: auto;
+        }
+
+        .tab-dropdown-item {
+            padding: 12px 16px;
+            cursor: pointer;
+            transition: background-color 0.2s ease;
+            font-size: 14px;
+            color: #374151;
+        }
+
+        .tab-dropdown-item:hover {
+            background-color: #f3f4f6;
+        }
+
+        .tab-dropdown-item.active {
+            color: #3b82f6;
+            background-color: #eff6ff;
+        }
+
+        @media (max-width: 640px) {
+            .tab-header {
+                display: none;
+            }
+
+            .tab-dropdown {
+                display: block;
+            }
+        }
+
+        /* Additional Demo Styles */
+        .demo-controls {
+            display: flex;
+            gap: 12px;
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+
+        .demo-button {
+            padding: 8px 16px;
+            background: white;
+            border: 1px solid #e5e7eb;
+            border-radius: 6px;
+            font-size: 14px;
+            color: #374151;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .demo-button:hover {
+            border-color: #3b82f6;
+            color: #3b82f6;
+        }
+
+        .demo-button:active {
+            transform: translateY(1px);
+        }
+
+        /* Accessibility */
+        @media (prefers-reduced-motion: reduce) {
+            * {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+                scroll-behavior: auto !important;
+            }
+        }
+
+        /* Dark Mode Support */
+        @media (prefers-color-scheme: dark) {
+            body {
+                background: #0f0f0f;
+                color: #e5e7eb;
+            }
+
+            main {
+                background: #1a1a1a;
+            }
+
+            .tab-container {
+                background: #1a1a1a;
+            }
+
+            .tab-header {
+                background: #0f0f0f;
+                border-color: #2a2a2a;
+            }
+
+            .tab-item {
+                color: #9ca3af;
+            }
+
+            .tab-item:hover {
+                color: #e5e7eb;
+                background-color: rgba(255, 255, 255, 0.05);
+            }
+
+            .tab-item.active {
+                color: #60a5fa;
+            }
+
+            .tab-indicator {
+                background: #60a5fa;
+            }
+
+            .scroll-indicator.left {
+                background: linear-gradient(to right, rgba(15, 15, 15, 1), rgba(15, 15, 15, 0));
+            }
+
+            .scroll-indicator.right {
+                background: linear-gradient(to left, rgba(15, 15, 15, 1), rgba(15, 15, 15, 0));
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Tab Navigation - Enhanced</h1>
+        
+        <div class="component-showcase">
+            <!-- Demo Controls -->
+            <div class="demo-controls">
+                <button class="demo-button" onclick="addTab()">Add Tab</button>
+                <button class="demo-button" onclick="toggleOrientation()">Toggle Orientation</button>
+                <button class="demo-button" onclick="toggleCloseable()">Toggle Closeable</button>
+                <button class="demo-button" onclick="simulateLoading()">Simulate Loading</button>
+            </div>
+
+            <!-- Horizontal Tabs Example -->
+            <div class="tab-container" id="mainTabs">
+                <div class="tab-header">
+                    <div class="scroll-indicator left"></div>
+                    <div class="scroll-indicator right"></div>
+                    <div class="tab-list" role="tablist" aria-label="Main navigation">
+                        <button class="tab-item active" role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0">
+                            Dashboard
+                        </button>
+                        <button class="tab-item" role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
+                            Analytics
+                        </button>
+                        <button class="tab-item" role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1">
+                            Reports
+                        </button>
+                        <button class="tab-item" role="tab" aria-selected="false" aria-controls="panel-4" id="tab-4" tabindex="-1">
+                            Settings
+                        </button>
+                        <button class="tab-item" role="tab" aria-selected="false" aria-controls="panel-5" id="tab-5" tabindex="-1">
+                            Team Members
+                        </button>
+                        <button class="tab-item" role="tab" aria-selected="false" aria-controls="panel-6" id="tab-6" tabindex="-1">
+                            Integrations
+                        </button>
+                    </div>
+                    <div class="tab-indicator"></div>
+                </div>
+
+                <!-- Mobile Dropdown -->
+                <div class="tab-dropdown" id="tabDropdown">
+                    <button class="tab-dropdown-toggle" onclick="toggleDropdown()">
+                        <span>Dashboard</span>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <polyline points="6 9 12 15 18 9"></polyline>
+                        </svg>
+                    </button>
+                    <div class="tab-dropdown-menu">
+                        <div class="tab-dropdown-item active" data-tab="tab-1">Dashboard</div>
+                        <div class="tab-dropdown-item" data-tab="tab-2">Analytics</div>
+                        <div class="tab-dropdown-item" data-tab="tab-3">Reports</div>
+                        <div class="tab-dropdown-item" data-tab="tab-4">Settings</div>
+                        <div class="tab-dropdown-item" data-tab="tab-5">Team Members</div>
+                        <div class="tab-dropdown-item" data-tab="tab-6">Integrations</div>
+                    </div>
+                </div>
+
+                <div class="tab-content">
+                    <div class="tab-panel active" role="tabpanel" id="panel-1" aria-labelledby="tab-1">
+                        <h2>Dashboard Overview</h2>
+                        <p>Welcome to your enhanced dashboard. This tab navigation system features smooth transitions, keyboard navigation, and mobile responsiveness.</p>
+                        <p>Try using the arrow keys to navigate between tabs, or swipe on mobile devices. The active tab indicator smoothly animates to show your current position.</p>
+                    </div>
+                    <div class="tab-panel" role="tabpanel" id="panel-2" aria-labelledby="tab-2">
+                        <h2>Analytics Dashboard</h2>
+                        <p>View comprehensive analytics with real-time data updates. The tab system supports lazy loading for performance optimization.</p>
+                        <p>Notice how the content smoothly fades in when switching tabs, providing a polished user experience.</p>
+                    </div>
+                    <div class="tab-panel" role="tabpanel" id="panel-3" aria-labelledby="tab-3">
+                        <h2>Reports Center</h2>
+                        <p>Generate and view detailed reports. The tab system includes overflow handling with scroll indicators when there are many tabs.</p>
+                        <p>On smaller screens, tabs automatically convert to a dropdown menu for better mobile usability.</p>
+                    </div>
+                    <div class="tab-panel" role="tabpanel" id="panel-4" aria-labelledby="tab-4">
+                        <h2>Settings & Preferences</h2>
+                        <p>Customize your experience with comprehensive settings. Tabs can be made closeable and support drag-and-drop reordering.</p>
+                        <p>The system respects user preferences like reduced motion and dark mode for accessibility.</p>
+                    </div>
+                    <div class="tab-panel" role="tabpanel" id="panel-5" aria-labelledby="tab-5">
+                        <h2>Team Management</h2>
+                        <p>Manage your team members and permissions. The enhanced tab system supports both horizontal and vertical orientations.</p>
+                        <p>Keyboard shortcuts include Home/End keys to jump to first/last tab for power users.</p>
+                    </div>
+                    <div class="tab-panel" role="tabpanel" id="panel-6" aria-labelledby="tab-6">
+                        <h2>Integration Hub</h2>
+                        <p>Connect with third-party services seamlessly. Loading states are elegantly handled for async content.</p>
+                        <p>The tab system is fully accessible with proper ARIA attributes and screen reader support.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Tab System Class
+        class EnhancedTabs {
+            constructor(container) {
+                this.container = container;
+                this.tabList = container.querySelector('.tab-list');
+                this.tabs = container.querySelectorAll('.tab-item');
+                this.panels = container.querySelectorAll('.tab-panel');
+                this.indicator = container.querySelector('.tab-indicator');
+                this.dropdown = container.querySelector('.tab-dropdown');
+                this.dropdownToggle = container.querySelector('.tab-dropdown-toggle span');
+                this.dropdownItems = container.querySelectorAll('.tab-dropdown-item');
+                
+                this.activeTab = container.querySelector('.tab-item.active');
+                this.isVertical = container.classList.contains('vertical');
+                this.closeable = false;
+                this.touchStartX = null;
+                this.touchStartY = null;
+                this.isDragging = false;
+                this.draggedTab = null;
+                
+                this.init();
+            }
+
+            init() {
+                this.setupEventListeners();
+                this.updateIndicator();
+                this.checkScrollIndicators();
+                this.setupKeyboardNavigation();
+                this.setupTouchSupport();
+                this.setupDragAndDrop();
+                this.setupDropdownListeners();
+            }
+
+            setupEventListeners() {
+                this.tabs.forEach(tab => {
+                    tab.addEventListener('click', (e) => this.handleTabClick(e));
+                });
+
+                this.tabList.addEventListener('scroll', () => this.checkScrollIndicators());
+                
+                window.addEventListener('resize', () => {
+                    this.updateIndicator();
+                    this.checkScrollIndicators();
+                });
+
+                // Intersection Observer for lazy loading
+                const observer = new IntersectionObserver((entries) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting && entry.target.dataset.lazyLoad) {
+                            this.loadTabContent(entry.target);
+                        }
+                    });
+                });
+
+                this.panels.forEach(panel => observer.observe(panel));
+            }
+
+            setupDropdownListeners() {
+                if (!this.dropdown) return;
+
+                this.dropdownItems.forEach(item => {
+                    item.addEventListener('click', () => {
+                        const tabId = item.dataset.tab;
+                        const tab = document.getElementById(tabId);
+                        if (tab) {
+                            this.activateTab(tab);
+                            this.updateDropdown(tab);
+                            this.closeDropdown();
+                        }
+                    });
+                });
+
+                // Close dropdown on outside click
+                document.addEventListener('click', (e) => {
+                    if (!this.dropdown.contains(e.target)) {
+                        this.closeDropdown();
+                    }
+                });
+            }
+
+            handleTabClick(e) {
+                const tab = e.target.closest('.tab-item');
+                if (tab && !tab.classList.contains('loading')) {
+                    this.activateTab(tab);
+                }
+            }
+
+            activateTab(tab) {
+                if (tab === this.activeTab) return;
+
+                // Update tabs
+                this.tabs.forEach(t => {
+                    t.classList.remove('active');
+                    t.setAttribute('aria-selected', 'false');
+                    t.setAttribute('tabindex', '-1');
+                });
+
+                tab.classList.add('active');
+                tab.setAttribute('aria-selected', 'true');
+                tab.setAttribute('tabindex', '0');
+
+                // Update panels with fade effect
+                const oldPanel = this.container.querySelector('.tab-panel.active');
+                const newPanelId = tab.getAttribute('aria-controls');
+                const newPanel = document.getElementById(newPanelId);
+
+                if (oldPanel && newPanel) {
+                    oldPanel.classList.add('fade-out');
+                    
+                    setTimeout(() => {
+                        oldPanel.classList.remove('active', 'fade-out');
+                        newPanel.classList.add('active');
+                    }, 150);
+                }
+
+                this.activeTab = tab;
+                this.updateIndicator();
+                this.updateDropdown(tab);
+
+                // Focus management
+                if (!this.isDragging) {
+                    tab.focus();
+                }
+
+                // Emit custom event
+                this.container.dispatchEvent(new CustomEvent('tabchange', {
+                    detail: { tab, panel: newPanel }
+                }));
+            }
+
+            updateIndicator() {
+                if (!this.activeTab || !this.indicator) return;
+
+                const tabRect = this.activeTab.getBoundingClientRect();
+                const containerRect = this.tabList.getBoundingClientRect();
+
+                if (this.isVertical) {
+                    const top = tabRect.top - containerRect.top + this.tabList.scrollTop;
+                    this.indicator.style.transform = `translateY(${top}px)`;
+                    this.indicator.style.height = `${tabRect.height}px`;
+                } else {
+                    const left = tabRect.left - containerRect.left + this.tabList.scrollLeft;
+                    this.indicator.style.transform = `translateX(${left}px)`;
+                    this.indicator.style.width = `${tabRect.width}px`;
+                }
+            }
+
+            updateDropdown(tab) {
+                if (!this.dropdownToggle) return;
+                
+                const text = tab.textContent.trim();
+                this.dropdownToggle.textContent = text;
+
+                this.dropdownItems.forEach(item => {
+                    if (item.dataset.tab === tab.id) {
+                        item.classList.add('active');
+                    } else {
+                        item.classList.remove('active');
+                    }
+                });
+            }
+
+            checkScrollIndicators() {
+                if (!this.tabList) return;
+
+                const scrollLeft = this.container.querySelector('.scroll-indicator.left');
+                const scrollRight = this.container.querySelector('.scroll-indicator.right');
+
+                if (!scrollLeft || !scrollRight) return;
+
+                const { scrollLeft: scroll, scrollWidth, clientWidth } = this.tabList;
+                
+                scrollLeft.classList.toggle('visible', scroll > 0);
+                scrollRight.classList.toggle('visible', scroll < scrollWidth - clientWidth - 1);
+            }
+
+            setupKeyboardNavigation() {
+                this.tabList.addEventListener('keydown', (e) => {
+                    const currentTab = document.activeElement;
+                    if (!currentTab.classList.contains('tab-item')) return;
+
+                    let nextTab;
+                    const tabs = Array.from(this.tabs);
+                    const currentIndex = tabs.indexOf(currentTab);
+
+                    switch (e.key) {
+                        case 'ArrowLeft':
+                        case 'ArrowUp':
+                            e.preventDefault();
+                            nextTab = tabs[currentIndex - 1] || tabs[tabs.length - 1];
+                            break;
+                        case 'ArrowRight':
+                        case 'ArrowDown':
+                            e.preventDefault();
+                            nextTab = tabs[currentIndex + 1] || tabs[0];
+                            break;
+                        case 'Home':
+                            e.preventDefault();
+                            nextTab = tabs[0];
+                            break;
+                        case 'End':
+                            e.preventDefault();
+                            nextTab = tabs[tabs.length - 1];
+                            break;
+                        case 'Enter':
+                        case ' ':
+                            e.preventDefault();
+                            this.activateTab(currentTab);
+                            return;
+                    }
+
+                    if (nextTab) {
+                        nextTab.focus();
+                        this.ensureTabVisible(nextTab);
+                    }
+                });
+            }
+
+            ensureTabVisible(tab) {
+                const tabRect = tab.getBoundingClientRect();
+                const listRect = this.tabList.getBoundingClientRect();
+
+                if (tabRect.left < listRect.left) {
+                    this.tabList.scrollLeft -= listRect.left - tabRect.left + 20;
+                } else if (tabRect.right > listRect.right) {
+                    this.tabList.scrollLeft += tabRect.right - listRect.right + 20;
+                }
+            }
+
+            setupTouchSupport() {
+                let touchStartX = 0;
+                let touchStartY = 0;
+                let touchStartScrollLeft = 0;
+
+                this.tabList.addEventListener('touchstart', (e) => {
+                    touchStartX = e.touches[0].clientX;
+                    touchStartY = e.touches[0].clientY;
+                    touchStartScrollLeft = this.tabList.scrollLeft;
+                    this.tabList.classList.add('touching');
+                }, { passive: true });
+
+                this.tabList.addEventListener('touchmove', (e) => {
+                    const touchEndX = e.touches[0].clientX;
+                    const touchEndY = e.touches[0].clientY;
+                    const diffX = touchStartX - touchEndX;
+                    const diffY = Math.abs(touchStartY - touchEndY);
+
+                    // Only scroll horizontally if the horizontal movement is greater than vertical
+                    if (Math.abs(diffX) > diffY && !this.isVertical) {
+                        this.tabList.scrollLeft = touchStartScrollLeft + diffX;
+                    }
+                }, { passive: true });
+
+                this.tabList.addEventListener('touchend', () => {
+                    this.tabList.classList.remove('touching');
+                    this.checkScrollIndicators();
+                }, { passive: true });
+
+                // Swipe between tabs on content area
+                let contentTouchStartX = 0;
+                const contentArea = this.container.querySelector('.tab-content');
+
+                contentArea.addEventListener('touchstart', (e) => {
+                    contentTouchStartX = e.touches[0].clientX;
+                }, { passive: true });
+
+                contentArea.addEventListener('touchend', (e) => {
+                    const touchEndX = e.changedTouches[0].clientX;
+                    const diffX = contentTouchStartX - touchEndX;
+
+                    if (Math.abs(diffX) > 50) { // Minimum swipe distance
+                        const tabs = Array.from(this.tabs);
+                        const currentIndex = tabs.indexOf(this.activeTab);
+
+                        if (diffX > 0 && currentIndex < tabs.length - 1) {
+                            // Swipe left - next tab
+                            this.activateTab(tabs[currentIndex + 1]);
+                        } else if (diffX < 0 && currentIndex > 0) {
+                            // Swipe right - previous tab
+                            this.activateTab(tabs[currentIndex - 1]);
+                        }
+                    }
+                }, { passive: true });
+            }
+
+            setupDragAndDrop() {
+                this.tabs.forEach(tab => {
+                    tab.draggable = true;
+
+                    tab.addEventListener('dragstart', (e) => {
+                        this.isDragging = true;
+                        this.draggedTab = tab;
+                        tab.classList.add('dragging');
+                        e.dataTransfer.effectAllowed = 'move';
+                        e.dataTransfer.setData('text/html', tab.innerHTML);
+                    });
+
+                    tab.addEventListener('dragend', () => {
+                        this.isDragging = false;
+                        tab.classList.remove('dragging');
+                        this.draggedTab = null;
+                        this.updateIndicator();
+                    });
+
+                    tab.addEventListener('dragover', (e) => {
+                        e.preventDefault();
+                        const afterElement = this.getDragAfterElement(e.clientX, e.clientY);
+                        
+                        if (afterElement == null) {
+                            this.tabList.appendChild(this.draggedTab);
+                        } else {
+                            this.tabList.insertBefore(this.draggedTab, afterElement);
+                        }
+                    });
+                });
+            }
+
+            getDragAfterElement(x, y) {
+                const draggableElements = [...this.tabList.querySelectorAll('.tab-item:not(.dragging)')];
+
+                return draggableElements.reduce((closest, child) => {
+                    const box = child.getBoundingClientRect();
+                    const offset = this.isVertical ? 
+                        y - box.top - box.height / 2 : 
+                        x - box.left - box.width / 2;
+
+                    if (offset < 0 && offset > closest.offset) {
+                        return { offset: offset, element: child };
+                    } else {
+                        return closest;
+                    }
+                }, { offset: Number.NEGATIVE_INFINITY }).element;
+            }
+
+            addCloseButtons() {
+                this.tabs.forEach((tab, index) => {
+                    // Don't add close button to first tab
+                    if (index === 0 || tab.querySelector('.tab-close')) return;
+
+                    const closeBtn = document.createElement('button');
+                    closeBtn.className = 'tab-close';
+                    closeBtn.innerHTML = `
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    `;
+                    closeBtn.onclick = (e) => {
+                        e.stopPropagation();
+                        this.closeTab(tab);
+                    };
+                    tab.appendChild(closeBtn);
+                });
+            }
+
+            removeCloseButtons() {
+                this.tabs.forEach(tab => {
+                    const closeBtn = tab.querySelector('.tab-close');
+                    if (closeBtn) closeBtn.remove();
+                });
+            }
+
+            closeTab(tab) {
+                const panel = document.getElementById(tab.getAttribute('aria-controls'));
+                const tabs = Array.from(this.tabs);
+                const currentIndex = tabs.indexOf(tab);
+
+                // Animate out
+                tab.style.width = tab.offsetWidth + 'px';
+                tab.style.transition = 'width 0.3s ease, opacity 0.3s ease, margin 0.3s ease';
+                requestAnimationFrame(() => {
+                    tab.style.width = '0';
+                    tab.style.opacity = '0';
+                    tab.style.marginLeft = '0';
+                    tab.style.marginRight = '0';
+                    tab.style.padding = '0';
+                });
+
+                setTimeout(() => {
+                    // If closing active tab, activate adjacent tab
+                    if (tab === this.activeTab) {
+                        const nextTab = tabs[currentIndex + 1] || tabs[currentIndex - 1];
+                        if (nextTab) this.activateTab(nextTab);
+                    }
+
+                    tab.remove();
+                    panel.remove();
+                    this.updateIndicator();
+                    this.checkScrollIndicators();
+                }, 300);
+            }
+
+            async loadTabContent(panel) {
+                const tab = document.getElementById(panel.getAttribute('aria-labelledby'));
+                tab.classList.add('loading');
+
+                // Simulate async content loading
+                const loadingDiv = document.createElement('div');
+                loadingDiv.className = 'tab-loading';
+                loadingDiv.innerHTML = '<div class="spinner"></div>';
+                panel.appendChild(loadingDiv);
+
+                await new Promise(resolve => setTimeout(resolve, 1500));
+
+                tab.classList.remove('loading');
+                loadingDiv.remove();
+                delete panel.dataset.lazyLoad;
+            }
+
+            closeDropdown() {
+                if (this.dropdown) {
+                    this.dropdown.classList.remove('open');
+                }
+            }
+        }
+
+        // Initialize tabs
+        const tabSystem = new EnhancedTabs(document.getElementById('mainTabs'));
+
+        // Demo functions
+        let tabCounter = 7;
+        
+        function addTab() {
+            const tabList = document.querySelector('.tab-list');
+            const tabContent = document.querySelector('.tab-content');
+            const dropdown = document.querySelector('.tab-dropdown-menu');
+
+            // Create new tab
+            const newTab = document.createElement('button');
+            newTab.className = 'tab-item';
+            newTab.role = 'tab';
+            newTab.id = `tab-${tabCounter}`;
+            newTab.setAttribute('aria-selected', 'false');
+            newTab.setAttribute('aria-controls', `panel-${tabCounter}`);
+            newTab.setAttribute('tabindex', '-1');
+            newTab.textContent = `New Tab ${tabCounter - 6}`;
+
+            // Create new panel
+            const newPanel = document.createElement('div');
+            newPanel.className = 'tab-panel';
+            newPanel.role = 'tabpanel';
+            newPanel.id = `panel-${tabCounter}`;
+            newPanel.setAttribute('aria-labelledby', `tab-${tabCounter}`);
+            newPanel.innerHTML = `
+                <h2>New Tab ${tabCounter - 6}</h2>
+                <p>This is dynamically added content. The tab system handles new tabs seamlessly with smooth animations.</p>
+            `;
+
+            // Create dropdown item
+            if (dropdown) {
+                const dropdownItem = document.createElement('div');
+                dropdownItem.className = 'tab-dropdown-item';
+                dropdownItem.dataset.tab = `tab-${tabCounter}`;
+                dropdownItem.textContent = `New Tab ${tabCounter - 6}`;
+                dropdown.appendChild(dropdownItem);
+            }
+
+            // Animate in
+            newTab.style.opacity = '0';
+            newTab.style.transform = 'translateY(-10px)';
+            
+            tabList.appendChild(newTab);
+            tabContent.appendChild(newPanel);
+
+            requestAnimationFrame(() => {
+                newTab.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+                newTab.style.opacity = '1';
+                newTab.style.transform = 'translateY(0)';
+            });
+
+            tabCounter++;
+
+            // Reinitialize tab system
+            setTimeout(() => {
+                const container = document.getElementById('mainTabs');
+                window.tabSystem = new EnhancedTabs(container);
+                window.tabSystem.activateTab(newTab);
+                window.tabSystem.ensureTabVisible(newTab);
+                
+                if (window.tabSystem.closeable) {
+                    window.tabSystem.addCloseButtons();
+                }
+            }, 100);
+        }
+
+        function toggleOrientation() {
+            const container = document.getElementById('mainTabs');
+            container.classList.toggle('vertical');
+            window.tabSystem = new EnhancedTabs(container);
+        }
+
+        function toggleCloseable() {
+            window.tabSystem.closeable = !window.tabSystem.closeable;
+            if (window.tabSystem.closeable) {
+                window.tabSystem.addCloseButtons();
+            } else {
+                window.tabSystem.removeCloseButtons();
+            }
+        }
+
+        function simulateLoading() {
+            const activePanel = document.querySelector('.tab-panel.active');
+            activePanel.dataset.lazyLoad = 'true';
+            window.tabSystem.loadTabContent(activePanel);
+        }
+
+        function toggleDropdown() {
+            const dropdown = document.getElementById('tabDropdown');
+            dropdown.classList.toggle('open');
+        }
+
+        // Global reference
+        window.tabSystem = tabSystem;
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src_enhanced/ui_enhanced_8.html b/legacy/src_enhanced/ui_enhanced_8.html
new file mode 100644
index 0000000..45165c8
--- /dev/null
+++ b/legacy/src_enhanced/ui_enhanced_8.html
@@ -0,0 +1,972 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>File Upload Enhanced</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --primary: #6366f1;
+            --primary-hover: #4f46e5;
+            --primary-light: #e0e7ff;
+            --success: #10b981;
+            --error: #ef4444;
+            --warning: #f59e0b;
+            --gray-50: #f9fafb;
+            --gray-100: #f3f4f6;
+            --gray-200: #e5e7eb;
+            --gray-300: #d1d5db;
+            --gray-400: #9ca3af;
+            --gray-500: #6b7280;
+            --gray-600: #4b5563;
+            --gray-700: #374151;
+            --gray-800: #1f2937;
+            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+            --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            --transition: all 0.2s ease;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+            color: var(--gray-800);
+            line-height: 1.6;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        main {
+            width: 100%;
+            max-width: 800px;
+            background: white;
+            border-radius: 20px;
+            box-shadow: var(--shadow-lg);
+            padding: 40px;
+        }
+
+        h1 {
+            font-size: 32px;
+            font-weight: 700;
+            margin-bottom: 8px;
+            background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .subtitle {
+            color: var(--gray-600);
+            margin-bottom: 32px;
+        }
+
+        .upload-container {
+            background: var(--gray-50);
+            border-radius: 16px;
+            padding: 40px;
+            transition: var(--transition);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .upload-zone {
+            border: 2px dashed var(--gray-300);
+            border-radius: 12px;
+            padding: 60px 40px;
+            text-align: center;
+            transition: var(--transition);
+            position: relative;
+            background: white;
+        }
+
+        .upload-zone.drag-over {
+            border-color: var(--primary);
+            background: var(--primary-light);
+            transform: scale(1.02);
+        }
+
+        .upload-zone.drag-over .upload-icon {
+            animation: bounce 0.5s ease infinite;
+        }
+
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+
+        .upload-icon {
+            width: 80px;
+            height: 80px;
+            margin: 0 auto 24px;
+            background: var(--gray-100);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: var(--transition);
+        }
+
+        .upload-icon svg {
+            width: 36px;
+            height: 36px;
+            stroke: var(--gray-500);
+            transition: var(--transition);
+        }
+
+        .upload-zone.drag-over .upload-icon {
+            background: var(--primary);
+        }
+
+        .upload-zone.drag-over .upload-icon svg {
+            stroke: white;
+        }
+
+        .upload-text h3 {
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: var(--gray-800);
+        }
+
+        .upload-text p {
+            color: var(--gray-600);
+            margin-bottom: 20px;
+        }
+
+        .file-input-wrapper {
+            position: relative;
+            display: inline-block;
+        }
+
+        .file-input {
+            position: absolute;
+            opacity: 0;
+            width: 100%;
+            height: 100%;
+            cursor: pointer;
+        }
+
+        .file-button {
+            background: var(--primary);
+            color: white;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: var(--transition);
+            border: none;
+            font-size: 16px;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .file-button:hover {
+            background: var(--primary-hover);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-md);
+        }
+
+        .file-button svg {
+            width: 20px;
+            height: 20px;
+        }
+
+        .supported-formats {
+            margin-top: 16px;
+            font-size: 14px;
+            color: var(--gray-500);
+        }
+
+        .file-list {
+            margin-top: 32px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .file-item {
+            background: white;
+            border-radius: 12px;
+            padding: 16px;
+            box-shadow: var(--shadow);
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            transition: var(--transition);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .file-item:hover {
+            box-shadow: var(--shadow-md);
+            transform: translateY(-2px);
+        }
+
+        .file-preview {
+            width: 60px;
+            height: 60px;
+            border-radius: 8px;
+            background: var(--gray-100);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            flex-shrink: 0;
+            position: relative;
+        }
+
+        .file-preview img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .file-preview.loading::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: rgba(255, 255, 255, 0.8);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .file-icon {
+            width: 32px;
+            height: 32px;
+            stroke: var(--gray-500);
+        }
+
+        .file-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .file-name {
+            font-weight: 600;
+            color: var(--gray-800);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-bottom: 4px;
+        }
+
+        .file-meta {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            font-size: 14px;
+            color: var(--gray-500);
+        }
+
+        .file-size {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .file-status {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .status-icon {
+            width: 16px;
+            height: 16px;
+        }
+
+        .status-uploading {
+            color: var(--primary);
+        }
+
+        .status-success {
+            color: var(--success);
+        }
+
+        .status-error {
+            color: var(--error);
+        }
+
+        .file-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .action-button {
+            width: 36px;
+            height: 36px;
+            border-radius: 8px;
+            background: var(--gray-100);
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: var(--transition);
+        }
+
+        .action-button:hover {
+            background: var(--gray-200);
+        }
+
+        .action-button svg {
+            width: 18px;
+            height: 18px;
+            stroke: var(--gray-600);
+        }
+
+        .action-button.danger:hover {
+            background: var(--error);
+        }
+
+        .action-button.danger:hover svg {
+            stroke: white;
+        }
+
+        .progress-bar {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: var(--gray-200);
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--primary) 0%, #8b5cf6 100%);
+            transition: width 0.3s ease;
+            position: relative;
+        }
+
+        .progress-fill::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
+            animation: shimmer 1.5s ease infinite;
+        }
+
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+
+        .paste-hint {
+            position: absolute;
+            top: 16px;
+            right: 16px;
+            background: var(--gray-800);
+            color: white;
+            padding: 8px 16px;
+            border-radius: 8px;
+            font-size: 14px;
+            opacity: 0;
+            transform: translateY(-10px);
+            transition: var(--transition);
+            pointer-events: none;
+        }
+
+        .paste-hint.show {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .upload-stats {
+            margin-top: 32px;
+            padding: 20px;
+            background: var(--gray-50);
+            border-radius: 12px;
+            display: flex;
+            justify-content: space-around;
+            gap: 20px;
+        }
+
+        .stat {
+            text-align: center;
+        }
+
+        .stat-value {
+            font-size: 24px;
+            font-weight: 700;
+            color: var(--primary);
+            margin-bottom: 4px;
+        }
+
+        .stat-label {
+            font-size: 14px;
+            color: var(--gray-600);
+        }
+
+        .error-message {
+            background: #fef2f2;
+            border: 1px solid #fecaca;
+            color: var(--error);
+            padding: 12px 16px;
+            border-radius: 8px;
+            margin-top: 16px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            animation: slideIn 0.3s ease;
+        }
+
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .error-message svg {
+            width: 20px;
+            height: 20px;
+            flex-shrink: 0;
+        }
+
+        @media (max-width: 640px) {
+            main {
+                padding: 24px;
+            }
+
+            .upload-container {
+                padding: 24px;
+            }
+
+            .upload-zone {
+                padding: 40px 20px;
+            }
+
+            .file-meta {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 4px;
+            }
+
+            .upload-stats {
+                flex-direction: column;
+                gap: 16px;
+            }
+        }
+
+        /* Accessibility */
+        .file-input:focus + .file-button {
+            outline: 2px solid var(--primary);
+            outline-offset: 2px;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            * {
+                animation-duration: 0.01ms !important;
+                transition-duration: 0.01ms !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>File Upload - Enhanced</h1>
+        <p class="subtitle">Drag & drop files or click to browse. Supports images, documents, and more.</p>
+
+        <div class="upload-container">
+            <div class="upload-zone" id="uploadZone">
+                <div class="upload-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="7 10 12 15 17 10"></polyline>
+                        <line x1="12" y1="15" x2="12" y2="3"></line>
+                    </svg>
+                </div>
+                <div class="upload-text">
+                    <h3>Drop files here or click to upload</h3>
+                    <p>You can also paste images from your clipboard</p>
+                    <div class="file-input-wrapper">
+                        <input type="file" class="file-input" id="fileInput" multiple accept="image/*,.pdf,.doc,.docx,.txt,.zip">
+                        <button class="file-button">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                                <polyline points="17 8 12 3 7 8"></polyline>
+                                <line x1="12" y1="3" x2="12" y2="15"></line>
+                            </svg>
+                            Choose Files
+                        </button>
+                    </div>
+                    <p class="supported-formats">Supported: Images, PDF, DOC, TXT, ZIP (Max 10MB per file)</p>
+                </div>
+            </div>
+
+            <div class="paste-hint" id="pasteHint">Image copied! Press Ctrl+V to upload</div>
+
+            <div class="file-list" id="fileList"></div>
+
+            <div class="upload-stats" id="uploadStats" style="display: none;">
+                <div class="stat">
+                    <div class="stat-value" id="totalFiles">0</div>
+                    <div class="stat-label">Total Files</div>
+                </div>
+                <div class="stat">
+                    <div class="stat-value" id="uploadedFiles">0</div>
+                    <div class="stat-label">Uploaded</div>
+                </div>
+                <div class="stat">
+                    <div class="stat-value" id="totalSize">0 MB</div>
+                    <div class="stat-label">Total Size</div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        class FileUploadEnhanced {
+            constructor() {
+                this.uploadZone = document.getElementById('uploadZone');
+                this.fileInput = document.getElementById('fileInput');
+                this.fileList = document.getElementById('fileList');
+                this.pasteHint = document.getElementById('pasteHint');
+                this.uploadStats = document.getElementById('uploadStats');
+                
+                this.files = new Map();
+                this.uploadQueue = [];
+                this.isUploading = false;
+                this.maxFileSize = 10 * 1024 * 1024; // 10MB
+                this.chunkSize = 1024 * 1024; // 1MB chunks
+                
+                this.init();
+            }
+
+            init() {
+                // File input
+                this.fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
+                
+                // Drag and drop
+                this.uploadZone.addEventListener('dragover', (e) => this.handleDragOver(e));
+                this.uploadZone.addEventListener('dragleave', (e) => this.handleDragLeave(e));
+                this.uploadZone.addEventListener('drop', (e) => this.handleDrop(e));
+                
+                // Paste from clipboard
+                document.addEventListener('paste', (e) => this.handlePaste(e));
+                
+                // Copy event detection
+                document.addEventListener('copy', () => this.showPasteHint());
+                
+                // Prevent default drag behavior
+                document.addEventListener('dragover', (e) => e.preventDefault());
+                document.addEventListener('drop', (e) => e.preventDefault());
+            }
+
+            handleFileSelect(e) {
+                const files = Array.from(e.target.files);
+                this.processFiles(files);
+                e.target.value = ''; // Reset input
+            }
+
+            handleDragOver(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.uploadZone.classList.add('drag-over');
+            }
+
+            handleDragLeave(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!this.uploadZone.contains(e.relatedTarget)) {
+                    this.uploadZone.classList.remove('drag-over');
+                }
+            }
+
+            handleDrop(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.uploadZone.classList.remove('drag-over');
+                
+                const files = Array.from(e.dataTransfer.files);
+                this.processFiles(files);
+            }
+
+            handlePaste(e) {
+                const items = Array.from(e.clipboardData.items);
+                const files = [];
+                
+                items.forEach(item => {
+                    if (item.type.indexOf('image') !== -1) {
+                        const file = item.getAsFile();
+                        if (file) {
+                            // Give pasted images a name
+                            const renamedFile = new File([file], `pasted-image-${Date.now()}.png`, {
+                                type: file.type
+                            });
+                            files.push(renamedFile);
+                        }
+                    }
+                });
+                
+                if (files.length > 0) {
+                    this.processFiles(files);
+                    this.hidePasteHint();
+                }
+            }
+
+            showPasteHint() {
+                this.pasteHint.classList.add('show');
+                setTimeout(() => this.hidePasteHint(), 3000);
+            }
+
+            hidePasteHint() {
+                this.pasteHint.classList.remove('show');
+            }
+
+            processFiles(files) {
+                files.forEach(file => {
+                    const validation = this.validateFile(file);
+                    if (validation.valid) {
+                        this.addFile(file);
+                    } else {
+                        this.showError(validation.error);
+                    }
+                });
+                
+                this.updateStats();
+                this.processUploadQueue();
+            }
+
+            validateFile(file) {
+                // Check file size
+                if (file.size > this.maxFileSize) {
+                    return {
+                        valid: false,
+                        error: `${file.name} exceeds the 10MB size limit`
+                    };
+                }
+                
+                // Check file type
+                const allowedTypes = [
+                    'image/jpeg', 'image/png', 'image/gif', 'image/webp',
+                    'application/pdf', 'application/msword',
+                    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+                    'text/plain', 'application/zip'
+                ];
+                
+                if (!allowedTypes.includes(file.type) && !file.type.startsWith('image/')) {
+                    return {
+                        valid: false,
+                        error: `${file.name} is not a supported file type`
+                    };
+                }
+                
+                return { valid: true };
+            }
+
+            addFile(file) {
+                const fileId = this.generateId();
+                const fileData = {
+                    id: fileId,
+                    file: file,
+                    status: 'pending',
+                    progress: 0,
+                    uploaded: 0,
+                    element: null
+                };
+                
+                this.files.set(fileId, fileData);
+                this.uploadQueue.push(fileId);
+                
+                const element = this.createFileElement(fileData);
+                fileData.element = element;
+                this.fileList.appendChild(element);
+                
+                if (this.uploadStats.style.display === 'none') {
+                    this.uploadStats.style.display = 'flex';
+                }
+                
+                // Load preview for images
+                if (file.type.startsWith('image/')) {
+                    this.loadImagePreview(fileData);
+                }
+            }
+
+            createFileElement(fileData) {
+                const div = document.createElement('div');
+                div.className = 'file-item';
+                div.id = `file-${fileData.id}`;
+                
+                const isImage = fileData.file.type.startsWith('image/');
+                
+                div.innerHTML = `
+                    <div class="file-preview ${isImage ? 'loading' : ''}">
+                        ${this.getFileIcon(fileData.file)}
+                    </div>
+                    <div class="file-info">
+                        <div class="file-name">${fileData.file.name}</div>
+                        <div class="file-meta">
+                            <div class="file-size">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                                    <polyline points="14 2 14 8 20 8"></polyline>
+                                </svg>
+                                ${this.formatFileSize(fileData.file.size)}
+                            </div>
+                            <div class="file-status status-uploading">
+                                <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <polyline points="20 6 9 17 4 12"></polyline>
+                                </svg>
+                                <span>Waiting...</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="file-actions">
+                        <button class="action-button" onclick="fileUpload.retryUpload('${fileData.id}')" title="Retry" style="display: none;">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline points="23 4 23 10 17 10"></polyline>
+                                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
+                            </svg>
+                        </button>
+                        <button class="action-button danger" onclick="fileUpload.removeFile('${fileData.id}')" title="Remove">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <line x1="18" y1="6" x2="6" y2="18"></line>
+                                <line x1="6" y1="6" x2="18" y2="18"></line>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="progress-bar">
+                        <div class="progress-fill" style="width: 0%"></div>
+                    </div>
+                `;
+                
+                return div;
+            }
+
+            getFileIcon(file) {
+                if (file.type.startsWith('image/')) {
+                    return `<img src="" alt="${file.name}" style="display: none;">`;
+                }
+                
+                let icon;
+                if (file.type === 'application/pdf') {
+                    icon = '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline>';
+                } else if (file.type.includes('zip')) {
+                    icon = '<path d="M22 11v1a10 10 0 1 1-9-10"></path><polyline points="22 2 12 12.01 8 8"></polyline>';
+                } else {
+                    icon = '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline>';
+                }
+                
+                return `<svg class="file-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">${icon}</svg>`;
+            }
+
+            loadImagePreview(fileData) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const preview = fileData.element.querySelector('.file-preview');
+                    const img = preview.querySelector('img');
+                    img.src = e.target.result;
+                    img.style.display = 'block';
+                    preview.classList.remove('loading');
+                };
+                reader.readAsDataURL(fileData.file);
+            }
+
+            async processUploadQueue() {
+                if (this.isUploading || this.uploadQueue.length === 0) return;
+                
+                this.isUploading = true;
+                const fileId = this.uploadQueue.shift();
+                const fileData = this.files.get(fileId);
+                
+                if (fileData && fileData.status === 'pending') {
+                    await this.uploadFile(fileData);
+                }
+                
+                this.isUploading = false;
+                this.processUploadQueue();
+            }
+
+            async uploadFile(fileData) {
+                fileData.status = 'uploading';
+                this.updateFileStatus(fileData, 'Uploading...', 'status-uploading');
+                
+                try {
+                    // Simulate chunked upload
+                    const chunks = Math.ceil(fileData.file.size / this.chunkSize);
+                    
+                    for (let i = 0; i < chunks; i++) {
+                        // Simulate upload delay
+                        await this.delay(300 + Math.random() * 200);
+                        
+                        // Update progress
+                        fileData.progress = Math.min(((i + 1) / chunks) * 100, 100);
+                        this.updateProgress(fileData);
+                        
+                        // Simulate random failure (5% chance)
+                        if (Math.random() < 0.05 && i > 0) {
+                            throw new Error('Network error');
+                        }
+                    }
+                    
+                    // Upload complete
+                    fileData.status = 'completed';
+                    fileData.uploaded = fileData.file.size;
+                    this.updateFileStatus(fileData, 'Uploaded', 'status-success');
+                    this.showSuccess(fileData);
+                    
+                } catch (error) {
+                    fileData.status = 'error';
+                    this.updateFileStatus(fileData, 'Failed', 'status-error');
+                    this.showRetryButton(fileData);
+                }
+                
+                this.updateStats();
+            }
+
+            updateFileStatus(fileData, text, className) {
+                const statusElement = fileData.element.querySelector('.file-status');
+                statusElement.className = `file-status ${className}`;
+                statusElement.querySelector('span').textContent = text;
+            }
+
+            updateProgress(fileData) {
+                const progressFill = fileData.element.querySelector('.progress-fill');
+                progressFill.style.width = `${fileData.progress}%`;
+            }
+
+            showSuccess(fileData) {
+                const element = fileData.element;
+                element.style.animation = 'none';
+                element.offsetHeight; // Trigger reflow
+                element.style.animation = 'slideIn 0.3s ease';
+                
+                // Hide progress bar after animation
+                setTimeout(() => {
+                    const progressBar = element.querySelector('.progress-bar');
+                    progressBar.style.opacity = '0';
+                }, 500);
+            }
+
+            showRetryButton(fileData) {
+                const retryButton = fileData.element.querySelector('.action-button');
+                retryButton.style.display = 'flex';
+            }
+
+            retryUpload(fileId) {
+                const fileData = this.files.get(fileId);
+                if (fileData) {
+                    fileData.status = 'pending';
+                    fileData.progress = 0;
+                    this.updateProgress(fileData);
+                    this.updateFileStatus(fileData, 'Waiting...', 'status-uploading');
+                    
+                    const retryButton = fileData.element.querySelector('.action-button');
+                    retryButton.style.display = 'none';
+                    
+                    const progressBar = fileData.element.querySelector('.progress-bar');
+                    progressBar.style.opacity = '1';
+                    
+                    this.uploadQueue.push(fileId);
+                    this.processUploadQueue();
+                }
+            }
+
+            removeFile(fileId) {
+                const fileData = this.files.get(fileId);
+                if (fileData) {
+                    // Cancel upload if in progress
+                    if (fileData.status === 'uploading') {
+                        const index = this.uploadQueue.indexOf(fileId);
+                        if (index > -1) {
+                            this.uploadQueue.splice(index, 1);
+                        }
+                    }
+                    
+                    // Remove with animation
+                    fileData.element.style.transform = 'translateX(100%)';
+                    fileData.element.style.opacity = '0';
+                    
+                    setTimeout(() => {
+                        fileData.element.remove();
+                        this.files.delete(fileId);
+                        this.updateStats();
+                        
+                        if (this.files.size === 0) {
+                            this.uploadStats.style.display = 'none';
+                        }
+                    }, 300);
+                }
+            }
+
+            updateStats() {
+                let totalSize = 0;
+                let uploadedCount = 0;
+                
+                this.files.forEach(fileData => {
+                    totalSize += fileData.file.size;
+                    if (fileData.status === 'completed') {
+                        uploadedCount++;
+                    }
+                });
+                
+                document.getElementById('totalFiles').textContent = this.files.size;
+                document.getElementById('uploadedFiles').textContent = uploadedCount;
+                document.getElementById('totalSize').textContent = this.formatFileSize(totalSize);
+            }
+
+            formatFileSize(bytes) {
+                if (bytes === 0) return '0 Bytes';
+                const k = 1024;
+                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+                const i = Math.floor(Math.log(bytes) / Math.log(k));
+                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+            }
+
+            showError(message) {
+                const error = document.createElement('div');
+                error.className = 'error-message';
+                error.innerHTML = `
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="12" y1="8" x2="12" y2="12"></line>
+                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                    </svg>
+                    ${message}
+                `;
+                
+                this.uploadZone.appendChild(error);
+                
+                setTimeout(() => {
+                    error.style.opacity = '0';
+                    setTimeout(() => error.remove(), 300);
+                }, 3000);
+            }
+
+            generateId() {
+                return 'file-' + Math.random().toString(36).substr(2, 9);
+            }
+
+            delay(ms) {
+                return new Promise(resolve => setTimeout(resolve, ms));
+            }
+        }
+
+        // Initialize the enhanced file upload
+        const fileUpload = new FileUploadEnhanced();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/src_enhanced/ui_enhanced_9.html b/legacy/src_enhanced/ui_enhanced_9.html
new file mode 100644
index 0000000..0d4689a
--- /dev/null
+++ b/legacy/src_enhanced/ui_enhanced_9.html
@@ -0,0 +1,988 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Toast Notifications Enhanced</title>
+    <style>
+        /* Reset and base styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: #333;
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+
+        /* Main container */
+        main {
+            padding: 2rem;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        h1 {
+            text-align: center;
+            color: white;
+            font-size: 2.5rem;
+            margin-bottom: 3rem;
+            text-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+
+        /* Demo controls */
+        .controls {
+            background: white;
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+            margin-bottom: 2rem;
+        }
+
+        .control-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .control-group h3 {
+            margin-bottom: 0.5rem;
+            color: #4a5568;
+        }
+
+        .button-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 1rem;
+        }
+
+        .demo-button {
+            padding: 0.75rem 1.5rem;
+            border: none;
+            border-radius: 10px;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            color: white;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .demo-button::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255,255,255,0.2);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+
+        .demo-button:hover::before {
+            width: 300px;
+            height: 300px;
+        }
+
+        .demo-button:active {
+            transform: scale(0.98);
+        }
+
+        .demo-button.success {
+            background: linear-gradient(135deg, #10b981, #059669);
+        }
+
+        .demo-button.error {
+            background: linear-gradient(135deg, #ef4444, #dc2626);
+        }
+
+        .demo-button.warning {
+            background: linear-gradient(135deg, #f59e0b, #d97706);
+        }
+
+        .demo-button.info {
+            background: linear-gradient(135deg, #3b82f6, #2563eb);
+        }
+
+        /* Position selector */
+        .position-selector {
+            display: flex;
+            gap: 0.5rem;
+            flex-wrap: wrap;
+        }
+
+        .position-button {
+            padding: 0.5rem 1rem;
+            border: 2px solid #e2e8f0;
+            background: white;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 0.875rem;
+        }
+
+        .position-button:hover {
+            border-color: #667eea;
+            color: #667eea;
+        }
+
+        .position-button.active {
+            background: #667eea;
+            color: white;
+            border-color: #667eea;
+        }
+
+        /* Toast container positions */
+        .toast-container {
+            position: fixed;
+            z-index: 1000;
+            pointer-events: none;
+            padding: 1rem;
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+            transition: all 0.3s ease;
+        }
+
+        .toast-container.top-right {
+            top: 0;
+            right: 0;
+            align-items: flex-end;
+        }
+
+        .toast-container.top-left {
+            top: 0;
+            left: 0;
+            align-items: flex-start;
+        }
+
+        .toast-container.top-center {
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            align-items: center;
+        }
+
+        .toast-container.bottom-right {
+            bottom: 0;
+            right: 0;
+            align-items: flex-end;
+            flex-direction: column-reverse;
+        }
+
+        .toast-container.bottom-left {
+            bottom: 0;
+            left: 0;
+            align-items: flex-start;
+            flex-direction: column-reverse;
+        }
+
+        .toast-container.bottom-center {
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            align-items: center;
+            flex-direction: column-reverse;
+        }
+
+        /* Toast styles */
+        .toast {
+            pointer-events: auto;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+            padding: 1rem 1.5rem;
+            min-width: 300px;
+            max-width: 500px;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            position: relative;
+            overflow: hidden;
+            cursor: pointer;
+            animation: slideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+            transition: all 0.3s ease;
+        }
+
+        @keyframes slideIn {
+            from {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+
+        .toast-container.top-left .toast,
+        .toast-container.bottom-left .toast {
+            animation-name: slideInLeft;
+        }
+
+        @keyframes slideInLeft {
+            from {
+                transform: translateX(-100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+
+        .toast-container.top-center .toast,
+        .toast-container.bottom-center .toast {
+            animation-name: slideInTop;
+        }
+
+        @keyframes slideInTop {
+            from {
+                transform: translateY(-100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+
+        .toast.removing {
+            animation: slideOut 0.3s ease forwards;
+        }
+
+        @keyframes slideOut {
+            to {
+                transform: translateX(110%);
+                opacity: 0;
+            }
+        }
+
+        .toast-container.top-left .toast.removing,
+        .toast-container.bottom-left .toast.removing {
+            animation-name: slideOutLeft;
+        }
+
+        @keyframes slideOutLeft {
+            to {
+                transform: translateX(-110%);
+                opacity: 0;
+            }
+        }
+
+        .toast:hover {
+            transform: scale(1.02);
+            box-shadow: 0 15px 50px rgba(0,0,0,0.15);
+        }
+
+        /* Toast icon */
+        .toast-icon {
+            width: 24px;
+            height: 24px;
+            flex-shrink: 0;
+            position: relative;
+        }
+
+        .toast-icon svg {
+            width: 100%;
+            height: 100%;
+        }
+
+        .toast.success .toast-icon {
+            color: #10b981;
+        }
+
+        .toast.error .toast-icon {
+            color: #ef4444;
+        }
+
+        .toast.warning .toast-icon {
+            color: #f59e0b;
+        }
+
+        .toast.info .toast-icon {
+            color: #3b82f6;
+        }
+
+        /* Toast content */
+        .toast-content {
+            flex: 1;
+        }
+
+        .toast-title {
+            font-weight: 600;
+            font-size: 1rem;
+            margin-bottom: 0.25rem;
+            color: #1a202c;
+        }
+
+        .toast-message {
+            font-size: 0.875rem;
+            color: #4a5568;
+        }
+
+        /* Toast actions */
+        .toast-actions {
+            display: flex;
+            gap: 0.5rem;
+            margin-left: 1rem;
+        }
+
+        .toast-action {
+            padding: 0.25rem 0.75rem;
+            border: none;
+            border-radius: 6px;
+            font-size: 0.875rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            background: rgba(0,0,0,0.05);
+            color: #4a5568;
+        }
+
+        .toast-action:hover {
+            background: rgba(0,0,0,0.1);
+        }
+
+        .toast-action.primary {
+            background: #667eea;
+            color: white;
+        }
+
+        .toast-action.primary:hover {
+            background: #5a67d8;
+        }
+
+        /* Close button */
+        .toast-close {
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: none;
+            background: none;
+            cursor: pointer;
+            color: #a0aec0;
+            transition: all 0.2s ease;
+            border-radius: 4px;
+        }
+
+        .toast-close:hover {
+            background: rgba(0,0,0,0.05);
+            color: #4a5568;
+        }
+
+        /* Progress bar */
+        .toast-progress {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            height: 3px;
+            background: currentColor;
+            opacity: 0.2;
+            transition: width linear;
+        }
+
+        .toast.success .toast-progress {
+            color: #10b981;
+        }
+
+        .toast.error .toast-progress {
+            color: #ef4444;
+        }
+
+        .toast.warning .toast-progress {
+            color: #f59e0b;
+        }
+
+        .toast.info .toast-progress {
+            color: #3b82f6;
+        }
+
+        /* Mobile responsiveness */
+        @media (max-width: 640px) {
+            .toast {
+                min-width: calc(100vw - 2rem);
+                max-width: calc(100vw - 2rem);
+            }
+            
+            .toast-container {
+                padding: 0.5rem;
+            }
+            
+            .button-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        /* Accessibility focus styles */
+        .toast:focus-visible,
+        .toast-action:focus-visible,
+        .toast-close:focus-visible {
+            outline: 2px solid #667eea;
+            outline-offset: 2px;
+        }
+
+        /* Reduced motion support */
+        @media (prefers-reduced-motion: reduce) {
+            .toast {
+                animation: fadeIn 0.3s ease;
+            }
+            
+            @keyframes fadeIn {
+                from { opacity: 0; }
+                to { opacity: 1; }
+            }
+            
+            .toast.removing {
+                animation: fadeOut 0.3s ease forwards;
+            }
+            
+            @keyframes fadeOut {
+                to { opacity: 0; }
+            }
+        }
+
+        /* Stats display */
+        .stats {
+            background: white;
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 1rem;
+            text-align: center;
+        }
+
+        .stat {
+            padding: 1rem;
+            background: #f7fafc;
+            border-radius: 10px;
+        }
+
+        .stat-value {
+            font-size: 2rem;
+            font-weight: 700;
+            color: #667eea;
+        }
+
+        .stat-label {
+            font-size: 0.875rem;
+            color: #718096;
+            margin-top: 0.25rem;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Toast Notifications - Enhanced</h1>
+        
+        <div class="controls">
+            <div class="control-group">
+                <h3>Toast Position</h3>
+                <div class="position-selector">
+                    <button class="position-button active" data-position="top-right">Top Right</button>
+                    <button class="position-button" data-position="top-center">Top Center</button>
+                    <button class="position-button" data-position="top-left">Top Left</button>
+                    <button class="position-button" data-position="bottom-right">Bottom Right</button>
+                    <button class="position-button" data-position="bottom-center">Bottom Center</button>
+                    <button class="position-button" data-position="bottom-left">Bottom Left</button>
+                </div>
+            </div>
+            
+            <div class="control-group">
+                <h3>Create Toasts</h3>
+                <div class="button-grid">
+                    <button class="demo-button success" data-type="success">Success Toast</button>
+                    <button class="demo-button error" data-type="error">Error Toast</button>
+                    <button class="demo-button warning" data-type="warning">Warning Toast</button>
+                    <button class="demo-button info" data-type="info">Info Toast</button>
+                </div>
+            </div>
+            
+            <div class="control-group">
+                <h3>Special Toasts</h3>
+                <div class="button-grid">
+                    <button class="demo-button info" id="actionToast">Toast with Actions</button>
+                    <button class="demo-button warning" id="undoToast">Undo Toast</button>
+                    <button class="demo-button success" id="multiToast">Multiple Toasts</button>
+                    <button class="demo-button error" id="persistentToast">Persistent Toast</button>
+                </div>
+            </div>
+        </div>
+        
+        <div class="stats">
+            <div class="stat">
+                <div class="stat-value" id="activeCount">0</div>
+                <div class="stat-label">Active Toasts</div>
+            </div>
+            <div class="stat">
+                <div class="stat-value" id="queueCount">0</div>
+                <div class="stat-label">Queued</div>
+            </div>
+            <div class="stat">
+                <div class="stat-value" id="totalCount">0</div>
+                <div class="stat-label">Total Shown</div>
+            </div>
+            <div class="stat">
+                <div class="stat-value" id="dismissedCount">0</div>
+                <div class="stat-label">Dismissed</div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Toast containers will be created dynamically -->
+
+    <script>
+        // Toast notification system
+        class ToastSystem {
+            constructor() {
+                this.toasts = new Map();
+                this.queue = [];
+                this.position = 'top-right';
+                this.maxVisible = 5;
+                this.defaultDuration = 5000;
+                this.stats = {
+                    total: 0,
+                    active: 0,
+                    queued: 0,
+                    dismissed: 0
+                };
+                this.init();
+            }
+
+            init() {
+                this.createContainers();
+                this.setupEventListeners();
+                this.updateStats();
+            }
+
+            createContainers() {
+                const positions = ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'];
+                positions.forEach(position => {
+                    const container = document.createElement('div');
+                    container.className = `toast-container ${position}`;
+                    container.style.display = position === this.position ? 'flex' : 'none';
+                    document.body.appendChild(container);
+                });
+            }
+
+            setupEventListeners() {
+                // Position buttons
+                document.querySelectorAll('.position-button').forEach(button => {
+                    button.addEventListener('click', () => {
+                        this.setPosition(button.dataset.position);
+                        document.querySelectorAll('.position-button').forEach(b => b.classList.remove('active'));
+                        button.classList.add('active');
+                    });
+                });
+
+                // Toast type buttons
+                document.querySelectorAll('.demo-button[data-type]').forEach(button => {
+                    button.addEventListener('click', () => {
+                        const type = button.dataset.type;
+                        this.showToast({
+                            type,
+                            title: this.getTitle(type),
+                            message: this.getMessage(type)
+                        });
+                    });
+                });
+
+                // Special toasts
+                document.getElementById('actionToast').addEventListener('click', () => {
+                    this.showToast({
+                        type: 'info',
+                        title: 'New Message',
+                        message: 'You have a new message from Sarah',
+                        actions: [
+                            { text: 'View', primary: true, callback: () => console.log('View clicked') },
+                            { text: 'Dismiss', callback: () => {} }
+                        ],
+                        duration: 0 // No auto-dismiss
+                    });
+                });
+
+                document.getElementById('undoToast').addEventListener('click', () => {
+                    this.showToast({
+                        type: 'warning',
+                        title: 'Item Deleted',
+                        message: 'The item has been moved to trash',
+                        actions: [
+                            { text: 'Undo', primary: true, callback: () => {
+                                this.showToast({
+                                    type: 'success',
+                                    title: 'Restored',
+                                    message: 'Item has been restored'
+                                });
+                            }}
+                        ],
+                        duration: 10000
+                    });
+                });
+
+                document.getElementById('multiToast').addEventListener('click', () => {
+                    const messages = [
+                        'First notification',
+                        'Second notification',
+                        'Third notification',
+                        'Fourth notification',
+                        'Fifth notification',
+                        'Sixth notification (queued)',
+                        'Seventh notification (queued)'
+                    ];
+                    
+                    messages.forEach((message, index) => {
+                        setTimeout(() => {
+                            this.showToast({
+                                type: ['success', 'info', 'warning'][index % 3],
+                                title: `Notification ${index + 1}`,
+                                message
+                            });
+                        }, index * 200);
+                    });
+                });
+
+                document.getElementById('persistentToast').addEventListener('click', () => {
+                    this.showToast({
+                        type: 'error',
+                        title: 'Connection Lost',
+                        message: 'Please check your internet connection',
+                        duration: 0, // No auto-dismiss
+                        closable: false // Can't be closed manually
+                    });
+                    
+                    // Simulate reconnection after 5 seconds
+                    setTimeout(() => {
+                        this.showToast({
+                            type: 'success',
+                            title: 'Connected',
+                            message: 'Connection restored'
+                        });
+                        // Find and remove the persistent toast
+                        this.toasts.forEach((toast, id) => {
+                            if (toast.config.title === 'Connection Lost') {
+                                this.removeToast(id);
+                            }
+                        });
+                    }, 5000);
+                });
+
+                // Keyboard shortcuts
+                document.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape') {
+                        // Dismiss all toasts
+                        this.toasts.forEach((toast, id) => {
+                            if (toast.config.closable !== false) {
+                                this.removeToast(id);
+                            }
+                        });
+                    }
+                });
+            }
+
+            setPosition(position) {
+                this.position = position;
+                document.querySelectorAll('.toast-container').forEach(container => {
+                    container.style.display = container.classList.contains(position) ? 'flex' : 'none';
+                });
+                
+                // Move existing toasts to new container
+                const newContainer = document.querySelector(`.toast-container.${position}`);
+                this.toasts.forEach(toast => {
+                    newContainer.appendChild(toast.element);
+                });
+            }
+
+            showToast(config) {
+                const id = Date.now() + Math.random();
+                const toast = {
+                    id,
+                    config: {
+                        duration: this.defaultDuration,
+                        closable: true,
+                        ...config
+                    },
+                    element: null,
+                    progressInterval: null
+                };
+
+                // Check if we need to queue this toast
+                if (this.toasts.size >= this.maxVisible) {
+                    this.queue.push(toast);
+                    this.stats.queued++;
+                    this.updateStats();
+                    return;
+                }
+
+                this.createToastElement(toast);
+                this.toasts.set(id, toast);
+                this.stats.total++;
+                this.stats.active++;
+                this.updateStats();
+
+                // Auto-dismiss if duration is set
+                if (toast.config.duration > 0) {
+                    this.startProgress(toast);
+                }
+            }
+
+            createToastElement(toast) {
+                const element = document.createElement('div');
+                element.className = `toast ${toast.config.type}`;
+                element.setAttribute('role', 'alert');
+                element.setAttribute('aria-live', 'polite');
+                element.tabIndex = 0;
+
+                // Icon
+                const icon = document.createElement('div');
+                icon.className = 'toast-icon';
+                icon.innerHTML = this.getIcon(toast.config.type);
+                element.appendChild(icon);
+
+                // Content
+                const content = document.createElement('div');
+                content.className = 'toast-content';
+                
+                const title = document.createElement('div');
+                title.className = 'toast-title';
+                title.textContent = toast.config.title;
+                content.appendChild(title);
+                
+                const message = document.createElement('div');
+                message.className = 'toast-message';
+                message.textContent = toast.config.message;
+                content.appendChild(message);
+                
+                element.appendChild(content);
+
+                // Actions
+                if (toast.config.actions && toast.config.actions.length > 0) {
+                    const actions = document.createElement('div');
+                    actions.className = 'toast-actions';
+                    
+                    toast.config.actions.forEach(action => {
+                        const button = document.createElement('button');
+                        button.className = `toast-action ${action.primary ? 'primary' : ''}`;
+                        button.textContent = action.text;
+                        button.addEventListener('click', () => {
+                            action.callback();
+                            if (action.dismiss !== false) {
+                                this.removeToast(toast.id);
+                            }
+                        });
+                        actions.appendChild(button);
+                    });
+                    
+                    element.appendChild(actions);
+                }
+
+                // Close button
+                if (toast.config.closable !== false) {
+                    const closeButton = document.createElement('button');
+                    closeButton.className = 'toast-close';
+                    closeButton.innerHTML = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
+                    closeButton.setAttribute('aria-label', 'Close notification');
+                    closeButton.addEventListener('click', () => this.removeToast(toast.id));
+                    element.appendChild(closeButton);
+                }
+
+                // Progress bar
+                if (toast.config.duration > 0) {
+                    const progress = document.createElement('div');
+                    progress.className = 'toast-progress';
+                    progress.style.width = '100%';
+                    element.appendChild(progress);
+                }
+
+                // Event listeners
+                element.addEventListener('mouseenter', () => this.pauseProgress(toast));
+                element.addEventListener('mouseleave', () => this.resumeProgress(toast));
+                
+                // Touch swipe to dismiss
+                let touchStartX = 0;
+                element.addEventListener('touchstart', (e) => {
+                    touchStartX = e.touches[0].clientX;
+                });
+                
+                element.addEventListener('touchend', (e) => {
+                    const touchEndX = e.changedTouches[0].clientX;
+                    const diff = touchEndX - touchStartX;
+                    if (Math.abs(diff) > 50 && toast.config.closable !== false) {
+                        this.removeToast(toast.id);
+                    }
+                });
+
+                // Click to dismiss (if no actions)
+                if (!toast.config.actions || toast.config.actions.length === 0) {
+                    element.style.cursor = 'pointer';
+                    element.addEventListener('click', () => {
+                        if (toast.config.closable !== false) {
+                            this.removeToast(toast.id);
+                        }
+                    });
+                }
+
+                toast.element = element;
+                
+                // Add to container
+                const container = document.querySelector(`.toast-container.${this.position}`);
+                container.appendChild(element);
+                
+                // Focus for accessibility
+                element.focus();
+            }
+
+            startProgress(toast) {
+                if (!toast.config.duration || toast.progressInterval) return;
+                
+                const progress = toast.element.querySelector('.toast-progress');
+                if (!progress) return;
+                
+                const startTime = Date.now();
+                const duration = toast.config.duration;
+                
+                toast.progressInterval = setInterval(() => {
+                    const elapsed = Date.now() - startTime;
+                    const percentage = Math.max(0, 100 - (elapsed / duration) * 100);
+                    progress.style.width = `${percentage}%`;
+                    progress.style.transition = 'width 100ms linear';
+                    
+                    if (percentage <= 0) {
+                        this.removeToast(toast.id);
+                    }
+                }, 100);
+            }
+
+            pauseProgress(toast) {
+                if (toast.progressInterval) {
+                    clearInterval(toast.progressInterval);
+                    toast.progressInterval = null;
+                    const progress = toast.element.querySelector('.toast-progress');
+                    if (progress) {
+                        toast.pausedWidth = progress.style.width;
+                    }
+                }
+            }
+
+            resumeProgress(toast) {
+                if (!toast.config.duration || toast.progressInterval) return;
+                
+                const progress = toast.element.querySelector('.toast-progress');
+                if (!progress || !toast.pausedWidth) return;
+                
+                const remainingPercentage = parseFloat(toast.pausedWidth);
+                const remainingDuration = (remainingPercentage / 100) * toast.config.duration;
+                
+                const startTime = Date.now();
+                toast.progressInterval = setInterval(() => {
+                    const elapsed = Date.now() - startTime;
+                    const percentage = Math.max(0, remainingPercentage - (elapsed / remainingDuration) * remainingPercentage);
+                    progress.style.width = `${percentage}%`;
+                    
+                    if (percentage <= 0) {
+                        this.removeToast(toast.id);
+                    }
+                }, 100);
+            }
+
+            removeToast(id) {
+                const toast = this.toasts.get(id);
+                if (!toast) return;
+                
+                // Clear progress interval
+                if (toast.progressInterval) {
+                    clearInterval(toast.progressInterval);
+                }
+                
+                // Animate out
+                toast.element.classList.add('removing');
+                
+                setTimeout(() => {
+                    toast.element.remove();
+                    this.toasts.delete(id);
+                    this.stats.active--;
+                    this.stats.dismissed++;
+                    this.updateStats();
+                    
+                    // Process queue
+                    if (this.queue.length > 0 && this.toasts.size < this.maxVisible) {
+                        const nextToast = this.queue.shift();
+                        this.stats.queued--;
+                        this.createToastElement(nextToast);
+                        this.toasts.set(nextToast.id, nextToast);
+                        this.stats.active++;
+                        this.updateStats();
+                        
+                        if (nextToast.config.duration > 0) {
+                            this.startProgress(nextToast);
+                        }
+                    }
+                }, 300);
+            }
+
+            updateStats() {
+                document.getElementById('activeCount').textContent = this.stats.active;
+                document.getElementById('queueCount').textContent = this.stats.queued;
+                document.getElementById('totalCount').textContent = this.stats.total;
+                document.getElementById('dismissedCount').textContent = this.stats.dismissed;
+            }
+
+            getIcon(type) {
+                const icons = {
+                    success: '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
+                    error: '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
+                    warning: '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>',
+                    info: '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
+                };
+                return icons[type] || icons.info;
+            }
+
+            getTitle(type) {
+                const titles = {
+                    success: 'Success!',
+                    error: 'Error!',
+                    warning: 'Warning!',
+                    info: 'Information'
+                };
+                return titles[type] || 'Notification';
+            }
+
+            getMessage(type) {
+                const messages = {
+                    success: 'Your action was completed successfully.',
+                    error: 'Something went wrong. Please try again.',
+                    warning: 'Please review this important information.',
+                    info: 'Here\'s something you might want to know.'
+                };
+                return messages[type] || 'This is a notification message.';
+            }
+        }
+
+        // Initialize the toast system
+        const toastSystem = new ToastSystem();
+
+        // Show a welcome toast after page load
+        setTimeout(() => {
+            toastSystem.showToast({
+                type: 'info',
+                title: 'Welcome!',
+                message: 'Try the different toast types and positions.',
+                duration: 7000
+            });
+        }, 500);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/themed_hybrid_all/ui_hybrid_1.html b/legacy/themed_hybrid_all/ui_hybrid_1.html
new file mode 100644
index 0000000..c155212
--- /dev/null
+++ b/legacy/themed_hybrid_all/ui_hybrid_1.html
@@ -0,0 +1,854 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Organic Nature Search Hub</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'Georgia', serif;
+            background: linear-gradient(135deg, #f5f5dc 0%, #e8e3d3 100%);
+            color: #2d3a24;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            position: relative;
+            overflow-x: hidden;
+        }
+
+        /* Animated background vines */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image: 
+                url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,50 Q30,20 50,50 T90,50' stroke='%23a8b89c' stroke-width='0.5' fill='none' opacity='0.3'/%3E%3C/svg%3E");
+            background-size: 200px 200px;
+            animation: floatVines 30s ease-in-out infinite;
+            pointer-events: none;
+            opacity: 0.3;
+        }
+
+        @keyframes floatVines {
+            0%, 100% { transform: translateX(0) translateY(0); }
+            50% { transform: translateX(-20px) translateY(-10px); }
+        }
+
+        main {
+            width: 100%;
+            max-width: 800px;
+            position: relative;
+            z-index: 1;
+        }
+
+        h1 {
+            text-align: center;
+            color: #4a5c3a;
+            margin-bottom: 40px;
+            font-size: 2.5em;
+            font-weight: 300;
+            position: relative;
+        }
+
+        h1::after {
+            content: '🌿';
+            position: absolute;
+            right: -40px;
+            top: 50%;
+            transform: translateY(-50%) rotate(-20deg);
+            font-size: 0.6em;
+            animation: sway 4s ease-in-out infinite;
+        }
+
+        @keyframes sway {
+            0%, 100% { transform: translateY(-50%) rotate(-20deg); }
+            50% { transform: translateY(-50%) rotate(20deg); }
+        }
+
+        .hybrid-component {
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 30px;
+            padding: 40px;
+            box-shadow: 
+                0 10px 40px rgba(74, 92, 58, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.9);
+            position: relative;
+            overflow: visible;
+        }
+
+        /* Decorative leaf corners */
+        .hybrid-component::before,
+        .hybrid-component::after {
+            content: '🍃';
+            position: absolute;
+            font-size: 2em;
+            opacity: 0.3;
+            animation: leafFloat 6s ease-in-out infinite;
+        }
+
+        .hybrid-component::before {
+            top: -10px;
+            left: -10px;
+            transform: rotate(-45deg);
+        }
+
+        .hybrid-component::after {
+            bottom: -10px;
+            right: -10px;
+            transform: rotate(135deg);
+            animation-delay: 3s;
+        }
+
+        @keyframes leafFloat {
+            0%, 100% { transform: translateY(0) rotate(inherit); }
+            50% { transform: translateY(-5px) rotate(calc(inherit + 10deg)); }
+        }
+
+        /* Search Container */
+        .search-container {
+            position: relative;
+            margin-bottom: 30px;
+        }
+
+        .search-wrapper {
+            position: relative;
+            background: linear-gradient(135deg, #f0f4e8 0%, #e8eede 100%);
+            border-radius: 25px;
+            border: 2px solid #c5d4b5;
+            overflow: hidden;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .search-wrapper:focus-within {
+            transform: scale(1.02);
+            box-shadow: 0 8px 30px rgba(139, 168, 112, 0.2);
+            border-color: #8ba870;
+        }
+
+        .search-input {
+            width: 100%;
+            padding: 20px 60px 20px 25px;
+            font-size: 18px;
+            font-family: inherit;
+            border: none;
+            background: transparent;
+            color: #2d3a24;
+            outline: none;
+        }
+
+        .search-input::placeholder {
+            color: #7a8b6a;
+            transition: opacity 0.3s;
+        }
+
+        .search-input:focus::placeholder {
+            opacity: 0.5;
+        }
+
+        .search-icon {
+            position: absolute;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 24px;
+            height: 24px;
+            cursor: pointer;
+            transition: transform 0.3s ease-out;
+        }
+
+        .search-icon:hover {
+            transform: translateY(-50%) scale(1.1);
+        }
+
+        .search-icon svg {
+            width: 100%;
+            height: 100%;
+            stroke: #7a8b6a;
+            stroke-width: 2;
+            fill: none;
+            transition: stroke 0.3s;
+        }
+
+        .search-wrapper:focus-within .search-icon svg {
+            stroke: #4a5c3a;
+        }
+
+        /* Growing vine animation on search */
+        .search-vine {
+            position: absolute;
+            bottom: -2px;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #8ba870 0%, #a4b896 50%, #8ba870 100%);
+            transform: scaleX(0);
+            transform-origin: left;
+            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .search-wrapper:focus-within .search-vine {
+            transform: scaleX(1);
+        }
+
+        /* Autocomplete Dropdown */
+        .autocomplete {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            margin-top: 10px;
+            background: rgba(255, 255, 255, 0.98);
+            border-radius: 20px;
+            box-shadow: 0 10px 40px rgba(74, 92, 58, 0.15);
+            overflow: hidden;
+            opacity: 0;
+            transform: translateY(-10px) scale(0.95);
+            pointer-events: none;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            z-index: 10;
+        }
+
+        .autocomplete.active {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+            pointer-events: all;
+        }
+
+        .autocomplete-item {
+            padding: 15px 25px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease-out;
+        }
+
+        .autocomplete-item::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: #8ba870;
+            transform: scaleY(0);
+            transition: transform 0.3s ease-out;
+        }
+
+        .autocomplete-item:hover {
+            background: #f0f4e8;
+            padding-left: 35px;
+        }
+
+        .autocomplete-item:hover::before {
+            transform: scaleY(1);
+        }
+
+        .autocomplete-icon {
+            font-size: 1.2em;
+            opacity: 0;
+            transform: scale(0) rotate(-180deg);
+            transition: all 0.3s ease-out;
+        }
+
+        .autocomplete-item:hover .autocomplete-icon {
+            opacity: 1;
+            transform: scale(1) rotate(0);
+        }
+
+        /* Recent Items (Seed Pods) */
+        .recent-items {
+            margin-bottom: 30px;
+        }
+
+        .recent-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 15px;
+            color: #4a5c3a;
+        }
+
+        .recent-header h3 {
+            font-size: 1.1em;
+            font-weight: 400;
+        }
+
+        .seed-pods {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+        }
+
+        .seed-pod {
+            background: linear-gradient(135deg, #e8d5b7 0%, #d4c4a0 100%);
+            border: 1px solid #c9b897;
+            border-radius: 20px;
+            padding: 8px 16px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s ease-out;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .seed-pod::before {
+            content: '🌰';
+            position: absolute;
+            left: -20px;
+            top: 50%;
+            transform: translateY(-50%);
+            opacity: 0;
+            transition: all 0.3s ease-out;
+        }
+
+        .seed-pod:hover {
+            transform: translateY(-2px) scale(1.05);
+            box-shadow: 0 4px 15px rgba(180, 160, 120, 0.3);
+            padding-left: 30px;
+            background: linear-gradient(135deg, #f0e2c4 0%, #dcc8a5 100%);
+        }
+
+        .seed-pod:hover::before {
+            left: 8px;
+            opacity: 1;
+        }
+
+        /* Filters (Unfolding Leaves) */
+        .filters {
+            margin-bottom: 30px;
+        }
+
+        .filters-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 15px;
+        }
+
+        .filters-header h3 {
+            color: #4a5c3a;
+            font-size: 1.1em;
+            font-weight: 400;
+        }
+
+        .filter-toggle {
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 1.2em;
+            transition: transform 0.3s ease-out;
+        }
+
+        .filter-toggle.active {
+            transform: rotate(180deg);
+        }
+
+        .filter-leaves {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+            gap: 12px;
+            max-height: 0;
+            overflow: hidden;
+            opacity: 0;
+            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .filter-leaves.open {
+            max-height: 200px;
+            opacity: 1;
+            margin-top: 15px;
+        }
+
+        .filter-leaf {
+            background: linear-gradient(135deg, #d4e4c5 0%, #c5d4b5 100%);
+            border: 1px solid #b5c4a5;
+            border-radius: 15px 5px 15px 5px;
+            padding: 10px 15px;
+            cursor: pointer;
+            transition: all 0.3s ease-out;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .filter-leaf::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(135deg, #a4b896 0%, #8ba870 100%);
+            opacity: 0;
+            transition: opacity 0.3s ease-out;
+        }
+
+        .filter-leaf.active::before {
+            opacity: 1;
+        }
+
+        .filter-leaf span {
+            position: relative;
+            z-index: 1;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: #4a5c3a;
+            font-size: 14px;
+            transition: color 0.3s;
+        }
+
+        .filter-leaf.active span {
+            color: white;
+        }
+
+        .filter-leaf:hover {
+            transform: scale(1.05) rotate(-2deg);
+            box-shadow: 0 4px 15px rgba(139, 168, 112, 0.2);
+        }
+
+        /* Results Preview */
+        .results-preview {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .results-preview.active {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .results-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid #e5e5e5;
+        }
+
+        .results-header h3 {
+            color: #4a5c3a;
+            font-size: 1.1em;
+            font-weight: 400;
+        }
+
+        .results-count {
+            color: #7a8b6a;
+            font-size: 14px;
+        }
+
+        .result-item {
+            background: linear-gradient(135deg, #fafaf5 0%, #f5f5f0 100%);
+            border: 1px solid #e5e5e5;
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 15px;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease-out;
+        }
+
+        .result-item::before {
+            content: '';
+            position: absolute;
+            left: -100%;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent 0%, rgba(139, 168, 112, 0.1) 50%, transparent 100%);
+            transition: left 0.5s ease-out;
+        }
+
+        .result-item:hover::before {
+            left: 100%;
+        }
+
+        .result-item:hover {
+            transform: translateX(5px);
+            box-shadow: 0 4px 20px rgba(139, 168, 112, 0.1);
+            border-color: #c5d4b5;
+        }
+
+        .result-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: #2d3a24;
+            margin-bottom: 8px;
+        }
+
+        .result-description {
+            font-size: 14px;
+            color: #7a8b6a;
+            line-height: 1.5;
+        }
+
+        .result-meta {
+            display: flex;
+            gap: 15px;
+            margin-top: 10px;
+            font-size: 12px;
+            color: #a0a0a0;
+        }
+
+        /* Loading animation */
+        .loading-roots {
+            display: none;
+            justify-content: center;
+            align-items: center;
+            height: 100px;
+            gap: 10px;
+        }
+
+        .loading-roots.active {
+            display: flex;
+        }
+
+        .root {
+            width: 4px;
+            height: 40px;
+            background: linear-gradient(to bottom, #8ba870, #4a5c3a);
+            border-radius: 2px;
+            animation: growRoot 1.2s ease-in-out infinite;
+        }
+
+        .root:nth-child(2) { animation-delay: 0.1s; }
+        .root:nth-child(3) { animation-delay: 0.2s; }
+        .root:nth-child(4) { animation-delay: 0.3s; }
+        .root:nth-child(5) { animation-delay: 0.4s; }
+
+        @keyframes growRoot {
+            0%, 100% {
+                transform: scaleY(0.4);
+                opacity: 0.5;
+            }
+            50% {
+                transform: scaleY(1);
+                opacity: 1;
+            }
+        }
+
+        /* Breathing idle animation */
+        .breathing {
+            animation: breathe 4s ease-in-out infinite;
+        }
+
+        @keyframes breathe {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.02); }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Search Hub - Organic Nature Theme</h1>
+        
+        <div class="hybrid-component breathing">
+            <!-- Search Bar with Growing Vine -->
+            <div class="search-container">
+                <div class="search-wrapper">
+                    <input 
+                        type="text" 
+                        class="search-input" 
+                        placeholder="Plant your search seeds..."
+                        id="searchInput"
+                    >
+                    <div class="search-icon" id="searchIcon">
+                        <svg viewBox="0 0 24 24">
+                            <circle cx="11" cy="11" r="8"></circle>
+                            <path d="m21 21-4.35-4.35"></path>
+                        </svg>
+                    </div>
+                    <div class="search-vine"></div>
+                </div>
+                
+                <!-- Autocomplete Dropdown (Blooming Flowers) -->
+                <div class="autocomplete" id="autocomplete">
+                    <div class="autocomplete-item">
+                        <span class="autocomplete-icon">🌸</span>
+                        <span>Organic vegetables delivery</span>
+                    </div>
+                    <div class="autocomplete-item">
+                        <span class="autocomplete-icon">🌺</span>
+                        <span>Organic farming techniques</span>
+                    </div>
+                    <div class="autocomplete-item">
+                        <span class="autocomplete-icon">🌼</span>
+                        <span>Organic garden design ideas</span>
+                    </div>
+                    <div class="autocomplete-item">
+                        <span class="autocomplete-icon">🌻</span>
+                        <span>Organic skincare products</span>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Recent Items (Seed Pods) -->
+            <div class="recent-items">
+                <div class="recent-header">
+                    <span>🌱</span>
+                    <h3>Recently Planted</h3>
+                </div>
+                <div class="seed-pods">
+                    <div class="seed-pod">Garden tools</div>
+                    <div class="seed-pod">Composting guide</div>
+                    <div class="seed-pod">Native plants</div>
+                    <div class="seed-pod">Herb garden</div>
+                    <div class="seed-pod">Soil health</div>
+                </div>
+            </div>
+            
+            <!-- Filters (Unfolding Leaves) -->
+            <div class="filters">
+                <div class="filters-header">
+                    <h3>🍀 Filter by Category</h3>
+                    <button class="filter-toggle" id="filterToggle">🍃</button>
+                </div>
+                <div class="filter-leaves" id="filterLeaves">
+                    <div class="filter-leaf" data-filter="plants">
+                        <span>🌿 Plants</span>
+                    </div>
+                    <div class="filter-leaf" data-filter="tools">
+                        <span>🛠️ Tools</span>
+                    </div>
+                    <div class="filter-leaf" data-filter="guides">
+                        <span>📖 Guides</span>
+                    </div>
+                    <div class="filter-leaf" data-filter="seeds">
+                        <span>🌰 Seeds</span>
+                    </div>
+                    <div class="filter-leaf" data-filter="organic">
+                        <span>🌾 Organic</span>
+                    </div>
+                    <div class="filter-leaf" data-filter="indoor">
+                        <span>🪴 Indoor</span>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Loading Animation -->
+            <div class="loading-roots" id="loadingRoots">
+                <div class="root"></div>
+                <div class="root"></div>
+                <div class="root"></div>
+                <div class="root"></div>
+                <div class="root"></div>
+            </div>
+            
+            <!-- Results Preview (Natural Growth) -->
+            <div class="results-preview" id="resultsPreview">
+                <div class="results-header">
+                    <h3>🌳 Growing Results</h3>
+                    <span class="results-count">5 branches found</span>
+                </div>
+                <div class="result-item">
+                    <div class="result-title">Organic Vegetable Garden Starter Kit</div>
+                    <div class="result-description">
+                        Everything you need to start your own organic vegetable garden, including heirloom seeds, 
+                        natural fertilizers, and comprehensive growing guides.
+                    </div>
+                    <div class="result-meta">
+                        <span>🌟 4.8 rating</span>
+                        <span>💚 Eco-friendly</span>
+                        <span>📦 Ships in 2 days</span>
+                    </div>
+                </div>
+                <div class="result-item">
+                    <div class="result-title">Complete Guide to Companion Planting</div>
+                    <div class="result-description">
+                        Learn which plants grow better together and create a thriving ecosystem in your garden
+                        using natural symbiotic relationships.
+                    </div>
+                    <div class="result-meta">
+                        <span>📚 Digital guide</span>
+                        <span>🌱 Beginner friendly</span>
+                        <span>⏱️ 45 min read</span>
+                    </div>
+                </div>
+                <div class="result-item">
+                    <div class="result-title">Handcrafted Cedar Raised Garden Beds</div>
+                    <div class="result-description">
+                        Beautiful, sustainably sourced cedar garden beds that naturally resist pests and weather
+                        while providing the perfect growing environment.
+                    </div>
+                    <div class="result-meta">
+                        <span>🪵 Sustainable wood</span>
+                        <span>🔨 Easy assembly</span>
+                        <span>🎯 Custom sizes</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Nature-inspired search hub functionality
+        const searchInput = document.getElementById('searchInput');
+        const autocomplete = document.getElementById('autocomplete');
+        const filterToggle = document.getElementById('filterToggle');
+        const filterLeaves = document.getElementById('filterLeaves');
+        const resultsPreview = document.getElementById('resultsPreview');
+        const loadingRoots = document.getElementById('loadingRoots');
+        const seedPods = document.querySelectorAll('.seed-pod');
+        const filterItems = document.querySelectorAll('.filter-leaf');
+        
+        let searchTimeout;
+        let activeFilters = new Set();
+        
+        // Search input handling with vine growth
+        searchInput.addEventListener('input', (e) => {
+            const value = e.target.value;
+            
+            clearTimeout(searchTimeout);
+            
+            if (value.length > 0) {
+                // Show autocomplete with blooming animation
+                autocomplete.classList.add('active');
+                
+                // Simulate search delay with root growth
+                searchTimeout = setTimeout(() => {
+                    showSearchResults();
+                }, 800);
+            } else {
+                autocomplete.classList.remove('active');
+                resultsPreview.classList.remove('active');
+            }
+        });
+        
+        // Click outside to close autocomplete
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.search-container')) {
+                autocomplete.classList.remove('active');
+            }
+        });
+        
+        // Autocomplete item selection
+        document.querySelectorAll('.autocomplete-item').forEach(item => {
+            item.addEventListener('click', () => {
+                const text = item.querySelector('span:last-child').textContent;
+                searchInput.value = text;
+                autocomplete.classList.remove('active');
+                showSearchResults();
+                
+                // Add to recent items
+                addToRecentItems(text);
+            });
+        });
+        
+        // Filter toggle animation
+        filterToggle.addEventListener('click', () => {
+            filterToggle.classList.toggle('active');
+            filterLeaves.classList.toggle('open');
+        });
+        
+        // Filter leaf selection
+        filterItems.forEach(leaf => {
+            leaf.addEventListener('click', () => {
+                leaf.classList.toggle('active');
+                const filter = leaf.dataset.filter;
+                
+                if (activeFilters.has(filter)) {
+                    activeFilters.delete(filter);
+                } else {
+                    activeFilters.add(filter);
+                }
+                
+                // Trigger filtered search if there's a search term
+                if (searchInput.value) {
+                    showSearchResults();
+                }
+            });
+        });
+        
+        // Seed pod (recent item) clicks
+        seedPods.forEach(pod => {
+            pod.addEventListener('click', () => {
+                searchInput.value = pod.textContent;
+                showSearchResults();
+            });
+        });
+        
+        // Show search results with growth animation
+        function showSearchResults() {
+            // Show loading roots
+            resultsPreview.classList.remove('active');
+            loadingRoots.classList.add('active');
+            
+            // Simulate loading time
+            setTimeout(() => {
+                loadingRoots.classList.remove('active');
+                resultsPreview.classList.add('active');
+                
+                // Update results count based on filters
+                const count = 5 - activeFilters.size;
+                document.querySelector('.results-count').textContent = 
+                    `${count} branch${count !== 1 ? 'es' : ''} found`;
+            }, 1200);
+        }
+        
+        // Add to recent items
+        function addToRecentItems(text) {
+            const seedPodsContainer = document.querySelector('.seed-pods');
+            const existingPods = Array.from(seedPods);
+            
+            // Check if already exists
+            const exists = existingPods.some(pod => pod.textContent === text);
+            if (!exists) {
+                // Create new seed pod
+                const newPod = document.createElement('div');
+                newPod.className = 'seed-pod';
+                newPod.textContent = text.substring(0, 20) + (text.length > 20 ? '...' : '');
+                
+                // Add click handler
+                newPod.addEventListener('click', () => {
+                    searchInput.value = text;
+                    showSearchResults();
+                });
+                
+                // Add with growth animation
+                newPod.style.transform = 'scale(0)';
+                seedPodsContainer.insertBefore(newPod, seedPodsContainer.firstChild);
+                
+                // Animate growth
+                setTimeout(() => {
+                    newPod.style.transform = 'scale(1)';
+                    newPod.style.transition = 'transform 0.3s ease-out';
+                }, 10);
+                
+                // Remove oldest if too many
+                if (seedPodsContainer.children.length > 8) {
+                    const oldest = seedPodsContainer.lastChild;
+                    oldest.style.transform = 'scale(0)';
+                    setTimeout(() => oldest.remove(), 300);
+                }
+            }
+        }
+        
+        // Result item hover sound effect (optional - using CSS only for now)
+        document.querySelectorAll('.result-item').forEach(item => {
+            item.addEventListener('mouseenter', () => {
+                // Could add subtle nature sound here
+                item.style.transform = 'translateX(5px)';
+            });
+        });
+        
+        // Initial breathing animation
+        const component = document.querySelector('.hybrid-component');
+        setInterval(() => {
+            component.classList.add('breathing');
+        }, 100);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/themed_hybrid_all/ui_hybrid_10.html b/legacy/themed_hybrid_all/ui_hybrid_10.html
new file mode 100644
index 0000000..5d098ea
--- /dev/null
+++ b/legacy/themed_hybrid_all/ui_hybrid_10.html
@@ -0,0 +1,829 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Architectural Brutalism Dashboard Widget</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Helvetica Neue', Arial, sans-serif;
+            background: #1a1a1a;
+            color: #e0e0e0;
+            line-height: 1.6;
+            padding: 40px;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+
+        main {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        h1 {
+            font-size: 3em;
+            font-weight: 900;
+            letter-spacing: -0.02em;
+            color: #fff;
+            margin-bottom: 40px;
+            text-transform: uppercase;
+            text-shadow: 4px 4px 0 #000;
+        }
+
+        /* Brutalist Dashboard Container */
+        .hybrid-component {
+            background: #2a2a2a;
+            padding: 0;
+            border: 8px solid #333;
+            box-shadow: 
+                0 10px 0 #1a1a1a,
+                0 20px 0 #0a0a0a,
+                0 20px 40px rgba(0,0,0,0.8);
+            position: relative;
+        }
+
+        /* Control Panel Header */
+        .control-panel {
+            background: linear-gradient(to bottom, #404040, #303030);
+            padding: 20px 30px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 4px solid #1a1a1a;
+            position: relative;
+        }
+
+        .control-panel::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 8px;
+            background: repeating-linear-gradient(
+                90deg,
+                #ff6b6b 0,
+                #ff6b6b 20px,
+                #ffcc00 20px,
+                #ffcc00 40px
+            );
+        }
+
+        /* Industrial Switches (Filters) */
+        .filter-bank {
+            display: flex;
+            gap: 20px;
+            align-items: center;
+        }
+
+        .industrial-switch {
+            position: relative;
+            width: 80px;
+            height: 40px;
+            background: #1a1a1a;
+            border: 3px solid #333;
+            cursor: pointer;
+            overflow: hidden;
+            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+        }
+
+        .industrial-switch:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 0 #000;
+        }
+
+        .switch-label {
+            position: absolute;
+            top: -25px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-weight: 700;
+            color: #999;
+        }
+
+        .switch-handle {
+            position: absolute;
+            left: 3px;
+            top: 3px;
+            width: 34px;
+            height: 28px;
+            background: linear-gradient(to bottom, #666, #444);
+            border: 2px solid #222;
+            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+        }
+
+        .industrial-switch.active .switch-handle {
+            left: 39px;
+            background: linear-gradient(to bottom, #ff6b6b, #e55a5a);
+            box-shadow: 0 0 10px #ff6b6b;
+        }
+
+        /* Control Buttons */
+        .control-buttons {
+            display: flex;
+            gap: 15px;
+        }
+
+        .brutalist-button {
+            background: #333;
+            border: 3px solid #444;
+            color: #fff;
+            padding: 10px 20px;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            cursor: pointer;
+            position: relative;
+            transition: all 0.2s;
+            font-size: 12px;
+        }
+
+        .brutalist-button:hover {
+            transform: translate(-2px, -2px);
+            box-shadow: 2px 2px 0 #ff6b6b;
+        }
+
+        .brutalist-button:active {
+            transform: translate(0, 0);
+            box-shadow: none;
+        }
+
+        .brutalist-button.refresh {
+            background: #444;
+            border-color: #555;
+        }
+
+        .brutalist-button.export {
+            background: #3a3a3a;
+            border-color: #4a4a4a;
+        }
+
+        .brutalist-button.settings {
+            background: #383838;
+            border-color: #484848;
+            padding: 10px 15px;
+        }
+
+        /* Main Dashboard Content */
+        .dashboard-content {
+            display: grid;
+            grid-template-columns: 1fr 300px;
+            min-height: 500px;
+        }
+
+        /* Chart Area - Concrete Blocks */
+        .chart-container {
+            background: #1a1a1a;
+            padding: 40px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .concrete-chart {
+            height: 400px;
+            display: flex;
+            align-items: flex-end;
+            justify-content: space-around;
+            gap: 20px;
+            position: relative;
+        }
+
+        .chart-block {
+            flex: 1;
+            background: linear-gradient(to bottom, #4a4a4a, #3a3a3a);
+            position: relative;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            border: 4px solid #2a2a2a;
+            box-shadow: 
+                inset 0 -4px 0 #1a1a1a,
+                0 4px 0 #0a0a0a;
+        }
+
+        .chart-block:hover {
+            transform: translateY(-10px);
+            box-shadow: 
+                inset 0 -4px 0 #1a1a1a,
+                0 14px 0 #0a0a0a,
+                0 14px 20px rgba(0,0,0,0.5);
+        }
+
+        .chart-block::before {
+            content: attr(data-value);
+            position: absolute;
+            top: -30px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-weight: 900;
+            font-size: 18px;
+            color: #ff6b6b;
+            text-shadow: 2px 2px 0 #000;
+        }
+
+        .chart-block::after {
+            content: attr(data-label);
+            position: absolute;
+            bottom: -30px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-weight: 700;
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            color: #666;
+        }
+
+        /* Grid Overlay */
+        .grid-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+            background-image: 
+                repeating-linear-gradient(0deg, transparent, transparent 39px, #2a2a2a 39px, #2a2a2a 40px),
+                repeating-linear-gradient(90deg, transparent, transparent 19.5%, #2a2a2a 19.5%, #2a2a2a 20%);
+            opacity: 0.3;
+        }
+
+        /* Side Panel - Settings & Alerts */
+        .side-panel {
+            background: #262626;
+            border-left: 4px solid #1a1a1a;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* Settings Panel */
+        .settings-panel {
+            padding: 30px 20px;
+            border-bottom: 4px solid #1a1a1a;
+        }
+
+        .panel-title {
+            font-weight: 900;
+            font-size: 14px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            margin-bottom: 20px;
+            color: #999;
+        }
+
+        .control-group {
+            margin-bottom: 20px;
+        }
+
+        .control-label {
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            color: #666;
+            margin-bottom: 8px;
+            display: block;
+        }
+
+        .brutalist-slider {
+            width: 100%;
+            height: 8px;
+            background: #1a1a1a;
+            outline: none;
+            -webkit-appearance: none;
+            cursor: pointer;
+            position: relative;
+        }
+
+        .brutalist-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 20px;
+            height: 20px;
+            background: linear-gradient(to bottom, #666, #444);
+            border: 3px solid #222;
+            cursor: pointer;
+        }
+
+        .brutalist-slider::-moz-range-thumb {
+            width: 20px;
+            height: 20px;
+            background: linear-gradient(to bottom, #666, #444);
+            border: 3px solid #222;
+            cursor: pointer;
+        }
+
+        .brutalist-select {
+            width: 100%;
+            padding: 8px 12px;
+            background: #1a1a1a;
+            border: 3px solid #333;
+            color: #999;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            cursor: pointer;
+            font-size: 11px;
+        }
+
+        /* Alert System */
+        .alert-panel {
+            flex: 1;
+            padding: 30px 20px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .alert-lights {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 15px;
+            margin-top: 20px;
+        }
+
+        .alert-indicator {
+            aspect-ratio: 1;
+            background: #1a1a1a;
+            border: 4px solid #2a2a2a;
+            position: relative;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .alert-indicator::before {
+            content: attr(data-alert);
+            position: absolute;
+            bottom: -20px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 9px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            color: #555;
+            white-space: nowrap;
+        }
+
+        .alert-indicator.active {
+            animation: alertPulse 1s infinite;
+            background: #ff6b6b;
+            border-color: #ff4444;
+            box-shadow: 
+                0 0 20px #ff6b6b,
+                inset 0 0 20px rgba(255,255,255,0.3);
+        }
+
+        .alert-indicator.warning {
+            background: #ffcc00;
+            border-color: #ffaa00;
+            box-shadow: 
+                0 0 20px #ffcc00,
+                inset 0 0 20px rgba(255,255,255,0.3);
+        }
+
+        @keyframes alertPulse {
+            0%, 100% { opacity: 1; transform: scale(1); }
+            50% { opacity: 0.8; transform: scale(0.95); }
+        }
+
+        /* Export Blueprint Overlay */
+        .blueprint-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.95);
+            display: none;
+            z-index: 1000;
+            padding: 40px;
+            overflow: auto;
+        }
+
+        .blueprint-overlay.active {
+            display: block;
+        }
+
+        .blueprint-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: #001a33;
+            border: 4px solid #003366;
+            padding: 40px;
+            position: relative;
+        }
+
+        .blueprint-grid {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image: 
+                repeating-linear-gradient(0deg, transparent, transparent 19px, #003366 19px, #003366 20px),
+                repeating-linear-gradient(90deg, transparent, transparent 19px, #003366 19px, #003366 20px);
+            opacity: 0.2;
+            pointer-events: none;
+        }
+
+        .blueprint-title {
+            font-size: 24px;
+            font-weight: 900;
+            text-transform: uppercase;
+            letter-spacing: 3px;
+            color: #66ccff;
+            margin-bottom: 30px;
+            text-shadow: 2px 2px 0 #003366;
+        }
+
+        .blueprint-data {
+            font-family: 'Courier New', monospace;
+            color: #66ccff;
+            line-height: 1.8;
+            position: relative;
+            z-index: 1;
+        }
+
+        .blueprint-close {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            width: 40px;
+            height: 40px;
+            background: #003366;
+            border: 3px solid #66ccff;
+            color: #66ccff;
+            font-size: 24px;
+            font-weight: 900;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+        }
+
+        .blueprint-close:hover {
+            background: #66ccff;
+            color: #001a33;
+            transform: rotate(90deg);
+        }
+
+        /* Rotating Refresh Animation */
+        @keyframes concreteRotate {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .brutalist-button.refresh.rotating {
+            animation: concreteRotate 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 1024px) {
+            .dashboard-content {
+                grid-template-columns: 1fr;
+            }
+            
+            .side-panel {
+                border-left: none;
+                border-top: 4px solid #1a1a1a;
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+            }
+            
+            .settings-panel {
+                border-right: 4px solid #1a1a1a;
+                border-bottom: none;
+            }
+        }
+
+        @media (max-width: 768px) {
+            body {
+                padding: 20px;
+            }
+            
+            h1 {
+                font-size: 2em;
+            }
+            
+            .control-panel {
+                flex-direction: column;
+                gap: 20px;
+                align-items: stretch;
+            }
+            
+            .filter-bank {
+                justify-content: space-around;
+            }
+            
+            .control-buttons {
+                justify-content: space-around;
+            }
+            
+            .chart-container {
+                padding: 20px;
+            }
+            
+            .concrete-chart {
+                height: 300px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Dashboard Widget - Architectural Brutalism Theme</h1>
+        
+        <div class="hybrid-component">
+            <!-- Control Panel with Filters and Actions -->
+            <div class="control-panel">
+                <div class="filter-bank">
+                    <div class="industrial-switch" data-filter="revenue">
+                        <span class="switch-label">Revenue</span>
+                        <div class="switch-handle"></div>
+                    </div>
+                    <div class="industrial-switch" data-filter="users">
+                        <span class="switch-label">Users</span>
+                        <div class="switch-handle"></div>
+                    </div>
+                    <div class="industrial-switch" data-filter="traffic">
+                        <span class="switch-label">Traffic</span>
+                        <div class="switch-handle"></div>
+                    </div>
+                    <div class="industrial-switch" data-filter="sales">
+                        <span class="switch-label">Sales</span>
+                        <div class="switch-handle"></div>
+                    </div>
+                </div>
+                
+                <div class="control-buttons">
+                    <button class="brutalist-button refresh">↻ Refresh</button>
+                    <button class="brutalist-button export">⬇ Export</button>
+                    <button class="brutalist-button settings">⚙</button>
+                </div>
+            </div>
+            
+            <!-- Main Dashboard Content -->
+            <div class="dashboard-content">
+                <!-- Chart Container with Concrete Blocks -->
+                <div class="chart-container">
+                    <div class="concrete-chart" id="chart">
+                        <div class="chart-block" data-value="87%" data-label="Jan" style="height: 87%"></div>
+                        <div class="chart-block" data-value="92%" data-label="Feb" style="height: 92%"></div>
+                        <div class="chart-block" data-value="76%" data-label="Mar" style="height: 76%"></div>
+                        <div class="chart-block" data-value="84%" data-label="Apr" style="height: 84%"></div>
+                        <div class="chart-block" data-value="95%" data-label="May" style="height: 95%"></div>
+                        <div class="chart-block" data-value="79%" data-label="Jun" style="height: 79%"></div>
+                    </div>
+                    <div class="grid-overlay"></div>
+                </div>
+                
+                <!-- Side Panel with Settings and Alerts -->
+                <div class="side-panel">
+                    <!-- Settings Panel -->
+                    <div class="settings-panel">
+                        <h3 class="panel-title">Control Infrastructure</h3>
+                        
+                        <div class="control-group">
+                            <label class="control-label">Update Frequency</label>
+                            <input type="range" class="brutalist-slider" min="1" max="60" value="30">
+                        </div>
+                        
+                        <div class="control-group">
+                            <label class="control-label">Data Granularity</label>
+                            <select class="brutalist-select">
+                                <option>Hourly</option>
+                                <option>Daily</option>
+                                <option selected>Monthly</option>
+                                <option>Yearly</option>
+                            </select>
+                        </div>
+                        
+                        <div class="control-group">
+                            <label class="control-label">Alert Threshold</label>
+                            <input type="range" class="brutalist-slider" min="0" max="100" value="75">
+                        </div>
+                    </div>
+                    
+                    <!-- Alert Panel -->
+                    <div class="alert-panel">
+                        <h3 class="panel-title">Warning System</h3>
+                        
+                        <div class="alert-lights">
+                            <div class="alert-indicator" data-alert="CPU Load"></div>
+                            <div class="alert-indicator active" data-alert="Memory"></div>
+                            <div class="alert-indicator" data-alert="Network"></div>
+                            <div class="alert-indicator warning" data-alert="Storage"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Blueprint Export Overlay -->
+        <div class="blueprint-overlay" id="blueprintOverlay">
+            <div class="blueprint-content">
+                <div class="blueprint-grid"></div>
+                <button class="blueprint-close" onclick="closeBlueprint()">×</button>
+                <h2 class="blueprint-title">System Architecture Blueprint</h2>
+                <pre class="blueprint-data" id="blueprintData"></pre>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Industrial Switch Functionality
+        const switches = document.querySelectorAll('.industrial-switch');
+        const chartBlocks = document.querySelectorAll('.chart-block');
+        
+        switches.forEach(switchEl => {
+            switchEl.addEventListener('click', function() {
+                this.classList.toggle('active');
+                updateChartData();
+            });
+        });
+        
+        // Chart Block Interactions
+        chartBlocks.forEach(block => {
+            block.addEventListener('click', function() {
+                // Animate block
+                this.style.transition = 'all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55)';
+                this.style.transform = 'translateY(-20px) scale(1.05)';
+                
+                setTimeout(() => {
+                    this.style.transform = 'translateY(0) scale(1)';
+                }, 600);
+                
+                // Flash value
+                const value = this.getAttribute('data-value');
+                this.setAttribute('data-value', '▓▓▓');
+                setTimeout(() => {
+                    this.setAttribute('data-value', value);
+                }, 300);
+            });
+        });
+        
+        // Refresh Functionality
+        const refreshBtn = document.querySelector('.brutalist-button.refresh');
+        refreshBtn.addEventListener('click', function() {
+            this.classList.add('rotating');
+            
+            // Simulate data refresh
+            setTimeout(() => {
+                updateChartData();
+                this.classList.remove('rotating');
+                
+                // Flash all blocks
+                chartBlocks.forEach((block, index) => {
+                    setTimeout(() => {
+                        const newHeight = Math.floor(Math.random() * 30) + 70;
+                        block.style.height = newHeight + '%';
+                        block.setAttribute('data-value', newHeight + '%');
+                    }, index * 100);
+                });
+            }, 2000);
+        });
+        
+        // Export Blueprint Functionality
+        const exportBtn = document.querySelector('.brutalist-button.export');
+        exportBtn.addEventListener('click', function() {
+            generateBlueprint();
+            document.getElementById('blueprintOverlay').classList.add('active');
+        });
+        
+        function generateBlueprint() {
+            const activeFilters = Array.from(switches)
+                .filter(s => s.classList.contains('active'))
+                .map(s => s.getAttribute('data-filter'));
+            
+            const chartData = Array.from(chartBlocks).map(block => ({
+                label: block.getAttribute('data-label'),
+                value: block.getAttribute('data-value')
+            }));
+            
+            const blueprint = `DASHBOARD CONFIGURATION BLUEPRINT
+===============================================
+Generated: ${new Date().toISOString()}
+Version: 1.0.0
+
+ACTIVE FILTERS:
+${activeFilters.length ? activeFilters.map(f => `  - ${f.toUpperCase()}`).join('\n') : '  - NONE'}
+
+CHART DATA STRUCTURE:
+${chartData.map(d => `  ${d.label}: ${d.value}`).join('\n')}
+
+SYSTEM ALERTS:
+  - CPU Load: NORMAL
+  - Memory: CRITICAL
+  - Network: NORMAL
+  - Storage: WARNING
+
+SETTINGS:
+  - Update Frequency: 30s
+  - Data Granularity: MONTHLY
+  - Alert Threshold: 75%
+
+BUILD INSTRUCTIONS:
+1. Initialize concrete block rendering engine
+2. Configure industrial switch matrix
+3. Establish alert monitoring pipeline
+4. Activate data refresh mechanism
+5. Enable blueprint export system
+
+END BLUEPRINT
+===============================================`;
+            
+            document.getElementById('blueprintData').textContent = blueprint;
+        }
+        
+        function closeBlueprint() {
+            document.getElementById('blueprintOverlay').classList.remove('active');
+        }
+        
+        // Settings Panel Interactions
+        const sliders = document.querySelectorAll('.brutalist-slider');
+        sliders.forEach(slider => {
+            slider.addEventListener('input', function() {
+                // Visual feedback
+                const percent = (this.value - this.min) / (this.max - this.min);
+                this.style.background = `linear-gradient(to right, #ff6b6b 0%, #ff6b6b ${percent * 100}%, #1a1a1a ${percent * 100}%, #1a1a1a 100%)`;
+            });
+        });
+        
+        // Alert System
+        const alertIndicators = document.querySelectorAll('.alert-indicator');
+        
+        // Simulate random alerts
+        setInterval(() => {
+            const randomAlert = alertIndicators[Math.floor(Math.random() * alertIndicators.length)];
+            const alertType = Math.random() > 0.5 ? 'active' : 'warning';
+            
+            // Clear other alerts occasionally
+            if (Math.random() > 0.7) {
+                alertIndicators.forEach(alert => {
+                    alert.classList.remove('active', 'warning');
+                });
+            }
+            
+            // Set new alert
+            randomAlert.classList.add(alertType);
+        }, 5000);
+        
+        // Update chart based on active filters
+        function updateChartData() {
+            const activeFilters = Array.from(switches)
+                .filter(s => s.classList.contains('active'))
+                .map(s => s.getAttribute('data-filter'));
+            
+            // Simulate different data based on filters
+            chartBlocks.forEach((block, index) => {
+                let baseValue = parseInt(block.style.height);
+                
+                activeFilters.forEach(filter => {
+                    switch(filter) {
+                        case 'revenue':
+                            baseValue += Math.random() * 10 - 5;
+                            break;
+                        case 'users':
+                            baseValue += Math.random() * 15 - 7.5;
+                            break;
+                        case 'traffic':
+                            baseValue += Math.random() * 20 - 10;
+                            break;
+                        case 'sales':
+                            baseValue += Math.random() * 12 - 6;
+                            break;
+                    }
+                });
+                
+                baseValue = Math.max(20, Math.min(100, baseValue));
+                block.style.height = Math.floor(baseValue) + '%';
+                block.setAttribute('data-value', Math.floor(baseValue) + '%');
+            });
+        }
+        
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'r' && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                refreshBtn.click();
+            } else if (e.key === 'e' && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                exportBtn.click();
+            } else if (e.key === 'Escape') {
+                closeBlueprint();
+            }
+        });
+        
+        // Initialize sliders with gradient
+        sliders.forEach(slider => {
+            slider.dispatchEvent(new Event('input'));
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/themed_hybrid_all/ui_hybrid_11.html b/legacy/themed_hybrid_all/ui_hybrid_11.html
new file mode 100644
index 0000000..582f7e0
--- /dev/null
+++ b/legacy/themed_hybrid_all/ui_hybrid_11.html
@@ -0,0 +1,855 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ocean Depths Advanced Search - Themed Hybrid UI #11</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Arial', sans-serif;
+            background: linear-gradient(180deg, #001f3f 0%, #003366 20%, #004080 50%, #000033 100%);
+            min-height: 100vh;
+            color: #e0f7fa;
+            overflow-x: hidden;
+            position: relative;
+        }
+
+        /* Animated bubbles background */
+        .bubble {
+            position: absolute;
+            background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
+            border-radius: 50%;
+            opacity: 0.6;
+            animation: rise 10s infinite linear;
+        }
+
+        @keyframes rise {
+            from {
+                transform: translateY(100vh) translateX(0) scale(1);
+            }
+            to {
+                transform: translateY(-100px) translateX(100px) scale(0.5);
+            }
+        }
+
+        /* Water ripple effect */
+        .water-ripple {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(transparent 30%, rgba(0,100,200,0.1) 50%, transparent 70%);
+            animation: ripple 8s ease-in-out infinite;
+            pointer-events: none;
+        }
+
+        @keyframes ripple {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(20px); }
+        }
+
+        /* Main container */
+        .ocean-depths-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 40px 20px;
+            position: relative;
+            z-index: 10;
+        }
+
+        /* Title with bioluminescence */
+        .title {
+            text-align: center;
+            font-size: 3em;
+            margin-bottom: 40px;
+            text-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
+            animation: glow 3s ease-in-out infinite alternate;
+        }
+
+        @keyframes glow {
+            from { text-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff; }
+            to { text-shadow: 0 0 30px #00ffff, 0 0 50px #00ffff, 0 0 70px #00ffff; }
+        }
+
+        /* Periscope Search Bar */
+        .periscope-search {
+            position: relative;
+            width: 100%;
+            max-width: 600px;
+            margin: 0 auto 40px;
+        }
+
+        .periscope-lens {
+            position: absolute;
+            left: -60px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 50px;
+            height: 50px;
+            background: radial-gradient(circle, #1a5490 0%, #0d47a1 50%, #001f3f 100%);
+            border-radius: 50%;
+            border: 3px solid #00acc1;
+            box-shadow: 0 0 20px rgba(0,172,193,0.5);
+        }
+
+        .search-input {
+            width: 100%;
+            padding: 20px 60px 20px 20px;
+            font-size: 1.2em;
+            background: rgba(0,50,100,0.8);
+            border: 2px solid #00acc1;
+            border-radius: 50px;
+            color: #e0f7fa;
+            box-shadow: inset 0 2px 10px rgba(0,0,0,0.5), 0 0 20px rgba(0,172,193,0.3);
+            transition: all 0.3s ease;
+        }
+
+        .search-input:focus {
+            outline: none;
+            box-shadow: inset 0 2px 10px rgba(0,0,0,0.5), 0 0 30px rgba(0,255,255,0.5);
+        }
+
+        .search-button {
+            position: absolute;
+            right: 5px;
+            top: 50%;
+            transform: translateY(-50%);
+            padding: 15px 25px;
+            background: linear-gradient(135deg, #00acc1 0%, #0277bd 100%);
+            border: none;
+            border-radius: 50px;
+            color: white;
+            cursor: pointer;
+            font-size: 1.1em;
+            transition: all 0.3s ease;
+        }
+
+        .search-button:hover {
+            background: linear-gradient(135deg, #00bcd4 0%, #0288d1 100%);
+            box-shadow: 0 0 20px rgba(0,188,212,0.5);
+        }
+
+        /* Control Panel with Valves */
+        .control-panel {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 40px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        /* Filter Valves */
+        .filter-valve {
+            position: relative;
+            width: 120px;
+            height: 120px;
+        }
+
+        .valve-wheel {
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle, #1565c0 0%, #0d47a1 50%, #001f3f 100%);
+            border-radius: 50%;
+            border: 4px solid #00acc1;
+            position: relative;
+            cursor: pointer;
+            transition: transform 0.3s ease;
+            box-shadow: 0 5px 20px rgba(0,0,0,0.5);
+        }
+
+        .valve-wheel::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 80%;
+            height: 4px;
+            background: #00acc1;
+            box-shadow: 0 0 10px rgba(0,172,193,0.5);
+        }
+
+        .valve-wheel::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) rotate(90deg);
+            width: 80%;
+            height: 4px;
+            background: #00acc1;
+            box-shadow: 0 0 10px rgba(0,172,193,0.5);
+        }
+
+        .valve-wheel.active {
+            transform: rotate(45deg);
+            border-color: #00ffff;
+            box-shadow: 0 5px 30px rgba(0,255,255,0.5);
+        }
+
+        .valve-label {
+            text-align: center;
+            margin-top: 10px;
+            font-size: 0.9em;
+            color: #b3e5fc;
+        }
+
+        /* Sonar Controls (Advanced Operators) */
+        .sonar-controls {
+            background: rgba(0,50,100,0.6);
+            border: 2px solid #00acc1;
+            border-radius: 20px;
+            padding: 20px;
+            margin-bottom: 40px;
+            backdrop-filter: blur(10px);
+        }
+
+        .sonar-title {
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 1.3em;
+            color: #00ffff;
+            text-shadow: 0 0 10px rgba(0,255,255,0.5);
+        }
+
+        .operator-buttons {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .operator-btn {
+            padding: 10px 20px;
+            background: linear-gradient(135deg, #004080 0%, #002050 100%);
+            border: 1px solid #00acc1;
+            border-radius: 25px;
+            color: #b3e5fc;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .operator-btn::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(0,255,255,0.3);
+            transition: width 0.3s, height 0.3s;
+        }
+
+        .operator-btn:hover::before {
+            width: 100%;
+            height: 100%;
+        }
+
+        .operator-btn:hover {
+            border-color: #00ffff;
+            color: #ffffff;
+            box-shadow: 0 0 15px rgba(0,255,255,0.5);
+        }
+
+        /* Autocomplete Bubbles */
+        .autocomplete-bubbles {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            margin-top: 10px;
+            display: none;
+        }
+
+        .autocomplete-bubbles.active {
+            display: block;
+        }
+
+        .bubble-suggestion {
+            background: rgba(0,100,200,0.8);
+            border: 1px solid #00acc1;
+            border-radius: 30px;
+            padding: 10px 20px;
+            margin-bottom: 10px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            animation: bubbleIn 0.5s ease;
+        }
+
+        @keyframes bubbleIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px) scale(0.8);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0) scale(1);
+            }
+        }
+
+        .bubble-suggestion:hover {
+            background: rgba(0,150,255,0.9);
+            transform: translateX(10px);
+            box-shadow: 0 0 20px rgba(0,255,255,0.3);
+        }
+
+        /* Ship's Log (History) */
+        .ships-log {
+            background: rgba(0,50,100,0.6);
+            border: 2px solid #00acc1;
+            border-radius: 20px;
+            padding: 20px;
+            margin-bottom: 40px;
+            backdrop-filter: blur(10px);
+        }
+
+        .log-title {
+            font-size: 1.5em;
+            margin-bottom: 20px;
+            color: #00ffff;
+            text-shadow: 0 0 10px rgba(0,255,255,0.5);
+        }
+
+        .log-entry {
+            background: rgba(0,30,60,0.5);
+            border-left: 3px solid #00acc1;
+            padding: 10px 15px;
+            margin-bottom: 10px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .log-entry:hover {
+            background: rgba(0,50,100,0.7);
+            border-left-color: #00ffff;
+            transform: translateX(5px);
+        }
+
+        .log-timestamp {
+            font-size: 0.8em;
+            color: #80deea;
+        }
+
+        /* Treasure Chest (Saved Searches) */
+        .treasure-chest {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 80px;
+            height: 60px;
+            cursor: pointer;
+            z-index: 100;
+        }
+
+        .chest-body {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 40px;
+            background: linear-gradient(135deg, #8b6914 0%, #cdaa3d 50%, #8b6914 100%);
+            border-radius: 5px;
+            box-shadow: 0 5px 20px rgba(0,0,0,0.5);
+        }
+
+        .chest-lid {
+            position: absolute;
+            bottom: 35px;
+            width: 100%;
+            height: 25px;
+            background: linear-gradient(135deg, #cdaa3d 0%, #eedc82 50%, #cdaa3d 100%);
+            border-radius: 5px 5px 0 0;
+            transform-origin: bottom;
+            transition: transform 0.3s ease;
+        }
+
+        .treasure-chest:hover .chest-lid {
+            transform: rotateX(-45deg);
+        }
+
+        .saved-searches {
+            position: fixed;
+            bottom: 100px;
+            right: 20px;
+            background: rgba(0,50,100,0.9);
+            border: 2px solid #cdaa3d;
+            border-radius: 10px;
+            padding: 20px;
+            display: none;
+            max-width: 300px;
+            backdrop-filter: blur(10px);
+        }
+
+        .saved-searches.open {
+            display: block;
+            animation: treasureOpen 0.5s ease;
+        }
+
+        @keyframes treasureOpen {
+            from {
+                opacity: 0;
+                transform: scale(0.8) translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: scale(1) translateY(0);
+            }
+        }
+
+        /* Fish School Results */
+        .results-ocean {
+            min-height: 400px;
+            position: relative;
+            background: rgba(0,30,60,0.3);
+            border-radius: 20px;
+            padding: 20px;
+            overflow: hidden;
+        }
+
+        .fish-result {
+            background: linear-gradient(135deg, #004080 0%, #0066cc 100%);
+            border: 1px solid #00acc1;
+            border-radius: 50px 20px 20px 50px;
+            padding: 20px;
+            margin-bottom: 20px;
+            position: relative;
+            transition: all 0.3s ease;
+            animation: swim 20s ease-in-out infinite;
+        }
+
+        @keyframes swim {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(10px) rotate(1deg); }
+            50% { transform: translateX(-10px) rotate(-1deg); }
+            75% { transform: translateX(5px) rotate(0.5deg); }
+        }
+
+        .fish-result::before {
+            content: '>';
+            position: absolute;
+            right: -15px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 2em;
+            color: #004080;
+        }
+
+        .fish-result:hover {
+            background: linear-gradient(135deg, #0066cc 0%, #0099ff 100%);
+            transform: translateX(20px);
+            box-shadow: 0 0 30px rgba(0,153,255,0.3);
+        }
+
+        .result-title {
+            font-size: 1.2em;
+            margin-bottom: 10px;
+            color: #00ffff;
+        }
+
+        .result-description {
+            color: #b3e5fc;
+            line-height: 1.6;
+        }
+
+        /* Pressure Gauge */
+        .pressure-gauge {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            width: 100px;
+            height: 100px;
+            background: radial-gradient(circle, #001f3f 0%, #000033 100%);
+            border-radius: 50%;
+            border: 3px solid #00acc1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 0 20px rgba(0,172,193,0.5);
+        }
+
+        .gauge-needle {
+            position: absolute;
+            width: 3px;
+            height: 40px;
+            background: #ff0000;
+            bottom: 50%;
+            left: 50%;
+            transform-origin: bottom;
+            transform: translateX(-50%) rotate(0deg);
+            transition: transform 0.5s ease;
+            box-shadow: 0 0 10px rgba(255,0,0,0.5);
+        }
+
+        .gauge-center {
+            width: 20px;
+            height: 20px;
+            background: #00acc1;
+            border-radius: 50%;
+            position: relative;
+            z-index: 10;
+        }
+
+        /* Responsive */
+        @media (max-width: 768px) {
+            .title {
+                font-size: 2em;
+            }
+
+            .control-panel {
+                gap: 10px;
+            }
+
+            .filter-valve {
+                width: 80px;
+                height: 80px;
+            }
+
+            .periscope-lens {
+                display: none;
+            }
+
+            .search-input {
+                padding: 15px 50px 15px 15px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="water-ripple"></div>
+    
+    <!-- Animated bubbles -->
+    <div id="bubbleContainer"></div>
+    
+    <div class="ocean-depths-container">
+        <h1 class="title">Ocean Depths Search</h1>
+        
+        <!-- Periscope Search Bar -->
+        <div class="periscope-search">
+            <div class="periscope-lens"></div>
+            <input type="text" class="search-input" id="searchInput" placeholder="Explore the depths...">
+            <button class="search-button" onclick="performSearch()">Dive</button>
+            
+            <!-- Autocomplete Bubbles -->
+            <div class="autocomplete-bubbles" id="autocompleteBubbles"></div>
+        </div>
+        
+        <!-- Control Panel with Filter Valves -->
+        <div class="control-panel">
+            <div class="filter-valve">
+                <div class="valve-wheel" onclick="toggleFilter(this, 'recent')" data-filter="recent"></div>
+                <div class="valve-label">Recent</div>
+            </div>
+            <div class="filter-valve">
+                <div class="valve-wheel" onclick="toggleFilter(this, 'deep')" data-filter="deep"></div>
+                <div class="valve-label">Deep Search</div>
+            </div>
+            <div class="filter-valve">
+                <div class="valve-wheel" onclick="toggleFilter(this, 'images')" data-filter="images"></div>
+                <div class="valve-label">Images</div>
+            </div>
+            <div class="filter-valve">
+                <div class="valve-wheel" onclick="toggleFilter(this, 'videos')" data-filter="videos"></div>
+                <div class="valve-label">Videos</div>
+            </div>
+            <div class="filter-valve">
+                <div class="valve-wheel" onclick="toggleFilter(this, 'archived')" data-filter="archived"></div>
+                <div class="valve-label">Archived</div>
+            </div>
+        </div>
+        
+        <!-- Sonar Controls (Advanced Operators) -->
+        <div class="sonar-controls">
+            <div class="sonar-title">Sonar Operations</div>
+            <div class="operator-buttons">
+                <button class="operator-btn" onclick="addOperator('AND')">AND</button>
+                <button class="operator-btn" onclick="addOperator('OR')">OR</button>
+                <button class="operator-btn" onclick="addOperator('NOT')">NOT</button>
+                <button class="operator-btn" onclick="addOperator('*')">Wildcard</button>
+                <button class="operator-btn" onclick="addOperator('\"\"')">Exact</button>
+                <button class="operator-btn" onclick="addOperator('~')">Fuzzy</button>
+                <button class="operator-btn" onclick="addOperator('^')">Boost</button>
+                <button class="operator-btn" onclick="addOperator('[]')">Range</button>
+            </div>
+        </div>
+        
+        <!-- Ship's Log (History) -->
+        <div class="ships-log">
+            <div class="log-title">Ship's Log</div>
+            <div id="searchHistory"></div>
+        </div>
+        
+        <!-- Results Ocean -->
+        <div class="results-ocean" id="resultsOcean">
+            <div class="fish-result">
+                <div class="result-title">Deep Sea Discovery</div>
+                <div class="result-description">Begin your exploration of the ocean depths...</div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Treasure Chest (Saved Searches) -->
+    <div class="treasure-chest" onclick="toggleSavedSearches()">
+        <div class="chest-lid"></div>
+        <div class="chest-body"></div>
+    </div>
+    
+    <div class="saved-searches" id="savedSearches">
+        <h3 style="color: #cdaa3d; margin-bottom: 15px;">Treasured Searches</h3>
+        <div id="savedSearchesList"></div>
+        <button class="operator-btn" style="margin-top: 10px;" onclick="saveCurrentSearch()">Save Current</button>
+    </div>
+    
+    <!-- Pressure Gauge -->
+    <div class="pressure-gauge">
+        <div class="gauge-needle" id="pressureNeedle"></div>
+        <div class="gauge-center"></div>
+    </div>
+    
+    <script>
+        // Initialize bubbles
+        function createBubbles() {
+            const container = document.getElementById('bubbleContainer');
+            for (let i = 0; i < 20; i++) {
+                const bubble = document.createElement('div');
+                bubble.className = 'bubble';
+                bubble.style.width = Math.random() * 40 + 10 + 'px';
+                bubble.style.height = bubble.style.width;
+                bubble.style.left = Math.random() * 100 + '%';
+                bubble.style.animationDelay = Math.random() * 10 + 's';
+                bubble.style.animationDuration = Math.random() * 10 + 10 + 's';
+                container.appendChild(bubble);
+            }
+        }
+        
+        // Active filters
+        let activeFilters = new Set();
+        
+        // Search history
+        let searchHistory = [];
+        
+        // Saved searches
+        let savedSearches = JSON.parse(localStorage.getItem('oceanSearches') || '[]');
+        
+        // Toggle filter
+        function toggleFilter(element, filter) {
+            element.classList.toggle('active');
+            if (activeFilters.has(filter)) {
+                activeFilters.delete(filter);
+            } else {
+                activeFilters.add(filter);
+            }
+            updatePressure();
+        }
+        
+        // Add operator to search
+        function addOperator(operator) {
+            const input = document.getElementById('searchInput');
+            if (operator === '\"\"') {
+                const start = input.selectionStart;
+                const end = input.selectionEnd;
+                const text = input.value;
+                input.value = text.substring(0, start) + '\"' + text.substring(start, end) + '\"' + text.substring(end);
+                input.focus();
+                input.setSelectionRange(end + 2, end + 2);
+            } else if (operator === '[]') {
+                input.value += ' [TO ]';
+                input.focus();
+                input.setSelectionRange(input.value.length - 4, input.value.length - 4);
+            } else {
+                input.value += ' ' + operator + ' ';
+                input.focus();
+            }
+        }
+        
+        // Autocomplete functionality
+        const searchInput = document.getElementById('searchInput');
+        const autocompleteBubbles = document.getElementById('autocompleteBubbles');
+        const suggestions = [
+            'coral reefs ecosystem',
+            'deep sea creatures',
+            'ocean currents patterns',
+            'marine biodiversity',
+            'underwater volcanoes',
+            'bioluminescent organisms',
+            'ocean floor mapping',
+            'submarine canyons',
+            'hydrothermal vents',
+            'abyssal plains'
+        ];
+        
+        searchInput.addEventListener('input', function() {
+            const value = this.value.toLowerCase();
+            if (value.length > 2) {
+                const matches = suggestions.filter(s => s.toLowerCase().includes(value));
+                showAutocomplete(matches);
+            } else {
+                hideAutocomplete();
+            }
+        });
+        
+        function showAutocomplete(matches) {
+            autocompleteBubbles.innerHTML = '';
+            if (matches.length > 0) {
+                autocompleteBubbles.classList.add('active');
+                matches.slice(0, 5).forEach((match, index) => {
+                    const bubble = document.createElement('div');
+                    bubble.className = 'bubble-suggestion';
+                    bubble.textContent = match;
+                    bubble.style.animationDelay = index * 0.1 + 's';
+                    bubble.onclick = () => {
+                        searchInput.value = match;
+                        hideAutocomplete();
+                    };
+                    autocompleteBubbles.appendChild(bubble);
+                });
+            }
+        }
+        
+        function hideAutocomplete() {
+            autocompleteBubbles.classList.remove('active');
+        }
+        
+        // Perform search
+        function performSearch() {
+            const query = searchInput.value;
+            if (query.trim()) {
+                // Add to history
+                addToHistory(query);
+                
+                // Generate results
+                generateResults(query);
+                
+                // Update pressure
+                updatePressure();
+                
+                // Hide autocomplete
+                hideAutocomplete();
+            }
+        }
+        
+        // Add to history
+        function addToHistory(query) {
+            const timestamp = new Date().toLocaleTimeString();
+            searchHistory.unshift({ query, timestamp });
+            if (searchHistory.length > 10) searchHistory.pop();
+            updateHistoryDisplay();
+        }
+        
+        // Update history display
+        function updateHistoryDisplay() {
+            const historyContainer = document.getElementById('searchHistory');
+            historyContainer.innerHTML = '';
+            searchHistory.forEach(entry => {
+                const logEntry = document.createElement('div');
+                logEntry.className = 'log-entry';
+                logEntry.innerHTML = `
+                    <div>${entry.query}</div>
+                    <div class="log-timestamp">${entry.timestamp}</div>
+                `;
+                logEntry.onclick = () => {
+                    searchInput.value = entry.query;
+                    performSearch();
+                };
+                historyContainer.appendChild(logEntry);
+            });
+        }
+        
+        // Generate results
+        function generateResults(query) {
+            const resultsOcean = document.getElementById('resultsOcean');
+            resultsOcean.innerHTML = '';
+            
+            const sampleResults = [
+                { title: 'Deep Ocean Mysteries', description: 'Exploring the unknown depths where light cannot reach...' },
+                { title: 'Bioluminescent Wonders', description: 'Creatures that create their own light in the darkness...' },
+                { title: 'Underwater Canyons', description: 'Massive geological formations carved by ancient currents...' },
+                { title: 'Marine Life Adaptations', description: 'How organisms survive extreme pressure and darkness...' },
+                { title: 'Ocean Current Patterns', description: 'The invisible rivers that flow through our seas...' }
+            ];
+            
+            sampleResults.forEach((result, index) => {
+                const fishResult = document.createElement('div');
+                fishResult.className = 'fish-result';
+                fishResult.style.animationDelay = index * 2 + 's';
+                fishResult.innerHTML = `
+                    <div class="result-title">${result.title}</div>
+                    <div class="result-description">${result.description}</div>
+                `;
+                resultsOcean.appendChild(fishResult);
+            });
+        }
+        
+        // Toggle saved searches
+        function toggleSavedSearches() {
+            const savedSearchesPanel = document.getElementById('savedSearches');
+            savedSearchesPanel.classList.toggle('open');
+            if (savedSearchesPanel.classList.contains('open')) {
+                updateSavedSearchesList();
+            }
+        }
+        
+        // Save current search
+        function saveCurrentSearch() {
+            const query = searchInput.value;
+            if (query.trim() && !savedSearches.includes(query)) {
+                savedSearches.push(query);
+                localStorage.setItem('oceanSearches', JSON.stringify(savedSearches));
+                updateSavedSearchesList();
+            }
+        }
+        
+        // Update saved searches list
+        function updateSavedSearchesList() {
+            const list = document.getElementById('savedSearchesList');
+            list.innerHTML = '';
+            savedSearches.forEach(search => {
+                const item = document.createElement('div');
+                item.className = 'log-entry';
+                item.textContent = search;
+                item.onclick = () => {
+                    searchInput.value = search;
+                    performSearch();
+                    toggleSavedSearches();
+                };
+                list.appendChild(item);
+            });
+        }
+        
+        // Update pressure gauge
+        function updatePressure() {
+            const needle = document.getElementById('pressureNeedle');
+            const pressure = (activeFilters.size * 15) + (searchHistory.length * 5);
+            needle.style.transform = `translateX(-50%) rotate(${Math.min(pressure, 180)}deg)`;
+        }
+        
+        // Keyboard shortcuts
+        searchInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                performSearch();
+            }
+        });
+        
+        // Initialize
+        createBubbles();
+        updateSavedSearchesList();
+        
+        // Click outside to close autocomplete
+        document.addEventListener('click', function(e) {
+            if (!searchInput.contains(e.target) && !autocompleteBubbles.contains(e.target)) {
+                hideAutocomplete();
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/themed_hybrid_all/ui_hybrid_12.html b/legacy/themed_hybrid_all/ui_hybrid_12.html
new file mode 100644
index 0000000..d5174d8
--- /dev/null
+++ b/legacy/themed_hybrid_all/ui_hybrid_12.html
@@ -0,0 +1,810 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Art Deco Profile Dashboard - Iteration 12</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Bebas+Neue&display=swap');
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Playfair Display', serif;
+            background: #0a0a0a;
+            color: #f4e7d1;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+
+        /* Art Deco Background Pattern */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: 
+                repeating-linear-gradient(
+                    45deg,
+                    transparent,
+                    transparent 10px,
+                    rgba(212, 175, 55, 0.03) 10px,
+                    rgba(212, 175, 55, 0.03) 20px
+                ),
+                repeating-linear-gradient(
+                    -45deg,
+                    transparent,
+                    transparent 10px,
+                    rgba(212, 175, 55, 0.03) 10px,
+                    rgba(212, 175, 55, 0.03) 20px
+                );
+            pointer-events: none;
+            z-index: 1;
+        }
+
+        .dashboard {
+            position: relative;
+            z-index: 2;
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 40px 20px;
+        }
+
+        /* Header with Art Deco Frame */
+        .header {
+            text-align: center;
+            margin-bottom: 50px;
+            position: relative;
+        }
+
+        .header h1 {
+            font-family: 'Bebas Neue', cursive;
+            font-size: 4rem;
+            letter-spacing: 0.2em;
+            color: #d4af37;
+            text-shadow: 
+                0 0 20px rgba(212, 175, 55, 0.5),
+                2px 2px 4px rgba(0, 0, 0, 0.8);
+            margin-bottom: 10px;
+        }
+
+        .header-ornament {
+            width: 300px;
+            height: 40px;
+            margin: 0 auto;
+            background: linear-gradient(90deg, 
+                transparent 0%, 
+                #d4af37 20%, 
+                #d4af37 80%, 
+                transparent 100%
+            );
+            position: relative;
+            clip-path: polygon(
+                0 50%, 10% 0, 90% 0, 100% 50%, 
+                90% 100%, 10% 100%
+            );
+        }
+
+        /* Main Grid Layout */
+        .main-grid {
+            display: grid;
+            grid-template-columns: 350px 1fr;
+            gap: 30px;
+            margin-bottom: 40px;
+        }
+
+        /* Profile Section */
+        .profile-section {
+            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+            border: 2px solid #d4af37;
+            border-radius: 0;
+            padding: 30px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .profile-section::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: repeating-conic-gradient(
+                from 0deg at 50% 50%,
+                transparent 0deg,
+                rgba(212, 175, 55, 0.1) 10deg,
+                transparent 20deg
+            );
+            animation: rotate 60s linear infinite;
+        }
+
+        @keyframes rotate {
+            to { transform: rotate(360deg); }
+        }
+
+        /* Avatar Container */
+        .avatar-container {
+            position: relative;
+            width: 200px;
+            height: 200px;
+            margin: 0 auto 30px;
+            z-index: 2;
+        }
+
+        .avatar-frame {
+            position: absolute;
+            inset: -20px;
+            background: conic-gradient(
+                from 45deg,
+                #d4af37 0deg,
+                #f4e7d1 45deg,
+                #d4af37 90deg,
+                #8b6914 135deg,
+                #d4af37 180deg,
+                #f4e7d1 225deg,
+                #d4af37 270deg,
+                #8b6914 315deg,
+                #d4af37 360deg
+            );
+            clip-path: polygon(
+                50% 0%, 100% 25%, 100% 75%, 50% 100%, 
+                0% 75%, 0% 25%
+            );
+            animation: shimmer 4s ease-in-out infinite;
+        }
+
+        @keyframes shimmer {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+
+        .avatar {
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
+            clip-path: polygon(
+                50% 0%, 100% 25%, 100% 75%, 50% 100%, 
+                0% 75%, 0% 25%
+            );
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: 'Bebas Neue', cursive;
+            font-size: 4rem;
+            color: #d4af37;
+        }
+
+        .profile-name {
+            font-size: 1.8rem;
+            text-align: center;
+            margin-bottom: 10px;
+            color: #f4e7d1;
+            position: relative;
+            z-index: 2;
+        }
+
+        .profile-title {
+            font-size: 1rem;
+            text-align: center;
+            color: #d4af37;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            position: relative;
+            z-index: 2;
+        }
+
+        /* Stats as Golden Ratio Meters */
+        .stats-container {
+            margin-top: 40px;
+            position: relative;
+            z-index: 2;
+        }
+
+        .stat-meter {
+            margin-bottom: 25px;
+        }
+
+        .stat-label {
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            margin-bottom: 8px;
+            color: #d4af37;
+        }
+
+        .meter-track {
+            height: 20px;
+            background: #1a1a1a;
+            border: 1px solid #d4af37;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .meter-fill {
+            height: 100%;
+            background: linear-gradient(90deg, 
+                #8b6914 0%, 
+                #d4af37 50%, 
+                #f4e7d1 100%
+            );
+            transition: width 1s ease-out;
+            position: relative;
+        }
+
+        .meter-fill::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(
+                90deg,
+                transparent 0%,
+                rgba(255, 255, 255, 0.3) 50%,
+                transparent 100%
+            );
+            animation: slide 2s infinite;
+        }
+
+        @keyframes slide {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+
+        .meter-value {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-family: 'Bebas Neue', cursive;
+            color: #0a0a0a;
+            font-weight: bold;
+            z-index: 2;
+        }
+
+        /* Main Content Area */
+        .main-content {
+            display: flex;
+            flex-direction: column;
+            gap: 30px;
+        }
+
+        /* Activity Feed as Newspaper */
+        .activity-feed {
+            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+            border: 2px solid #d4af37;
+            padding: 30px;
+            position: relative;
+        }
+
+        .feed-header {
+            border-bottom: 3px double #d4af37;
+            padding-bottom: 20px;
+            margin-bottom: 30px;
+            text-align: center;
+        }
+
+        .feed-title {
+            font-family: 'Bebas Neue', cursive;
+            font-size: 2.5rem;
+            letter-spacing: 0.3em;
+            color: #d4af37;
+        }
+
+        .feed-date {
+            font-size: 0.9rem;
+            color: #8b6914;
+            margin-top: 5px;
+        }
+
+        .feed-columns {
+            column-count: 2;
+            column-gap: 30px;
+            column-rule: 1px solid #d4af37;
+        }
+
+        .feed-item {
+            break-inside: avoid;
+            margin-bottom: 20px;
+            padding: 15px;
+            background: rgba(212, 175, 55, 0.05);
+            border-left: 3px solid #d4af37;
+        }
+
+        .feed-item-time {
+            font-size: 0.8rem;
+            color: #8b6914;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+        }
+
+        .feed-item-text {
+            margin-top: 5px;
+            line-height: 1.6;
+        }
+
+        /* Settings Panel */
+        .settings-panel {
+            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+            border: 2px solid #d4af37;
+            padding: 30px;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+        }
+
+        .control-group {
+            padding: 20px;
+            background: rgba(212, 175, 55, 0.05);
+            border: 1px solid #d4af37;
+            position: relative;
+        }
+
+        .control-label {
+            font-family: 'Bebas Neue', cursive;
+            font-size: 1.2rem;
+            letter-spacing: 0.1em;
+            color: #d4af37;
+            margin-bottom: 15px;
+        }
+
+        .luxury-switch {
+            position: relative;
+            width: 60px;
+            height: 30px;
+            background: #1a1a1a;
+            border: 2px solid #d4af37;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .luxury-switch::before {
+            content: '';
+            position: absolute;
+            width: 22px;
+            height: 22px;
+            top: 2px;
+            left: 2px;
+            background: #d4af37;
+            transition: transform 0.3s;
+        }
+
+        .luxury-switch.active::before {
+            transform: translateX(30px);
+        }
+
+        .luxury-slider {
+            width: 100%;
+            height: 30px;
+            background: #1a1a1a;
+            border: 2px solid #d4af37;
+            position: relative;
+            cursor: pointer;
+            margin-top: 10px;
+        }
+
+        .slider-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #8b6914, #d4af37);
+            width: 50%;
+            transition: width 0.3s;
+        }
+
+        /* Achievements as Medallions */
+        .achievements-section {
+            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+            border: 2px solid #d4af37;
+            padding: 30px;
+            margin-top: 30px;
+        }
+
+        .achievements-header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .achievements-title {
+            font-family: 'Bebas Neue', cursive;
+            font-size: 2rem;
+            letter-spacing: 0.2em;
+            color: #d4af37;
+        }
+
+        .medallions-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            gap: 20px;
+        }
+
+        .medallion {
+            width: 100px;
+            height: 100px;
+            margin: 0 auto;
+            position: relative;
+            cursor: pointer;
+            transition: transform 0.3s;
+        }
+
+        .medallion:hover {
+            transform: scale(1.1) rotate(5deg);
+        }
+
+        .medallion-outer {
+            position: absolute;
+            inset: 0;
+            background: conic-gradient(
+                from 0deg,
+                #d4af37 0deg,
+                #f4e7d1 60deg,
+                #d4af37 120deg,
+                #8b6914 180deg,
+                #d4af37 240deg,
+                #f4e7d1 300deg,
+                #d4af37 360deg
+            );
+            border-radius: 50%;
+            animation: rotate 20s linear infinite;
+        }
+
+        .medallion-inner {
+            position: absolute;
+            inset: 10px;
+            background: #1a1a1a;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: 'Bebas Neue', cursive;
+            font-size: 2rem;
+            color: #d4af37;
+        }
+
+        .medallion-name {
+            text-align: center;
+            margin-top: 10px;
+            font-size: 0.8rem;
+            color: #d4af37;
+        }
+
+        /* Connections Constellation */
+        .connections-section {
+            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+            border: 2px solid #d4af37;
+            padding: 30px;
+            margin-top: 30px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .constellation-canvas {
+            width: 100%;
+            height: 300px;
+            position: relative;
+        }
+
+        .connection-node {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            background: #1a1a1a;
+            border: 2px solid #d4af37;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: 'Bebas Neue', cursive;
+            color: #d4af37;
+            cursor: pointer;
+            transition: all 0.3s;
+            z-index: 2;
+        }
+
+        .connection-node:hover {
+            transform: scale(1.2);
+            background: #d4af37;
+            color: #0a0a0a;
+            box-shadow: 0 0 30px rgba(212, 175, 55, 0.8);
+        }
+
+        .connection-line {
+            position: absolute;
+            height: 1px;
+            background: linear-gradient(90deg, 
+                transparent 0%, 
+                #d4af37 50%, 
+                transparent 100%
+            );
+            transform-origin: left center;
+            z-index: 1;
+            opacity: 0.5;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .main-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .feed-columns {
+                column-count: 1;
+            }
+
+            .header h1 {
+                font-size: 3rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="dashboard">
+        <!-- Header -->
+        <header class="header">
+            <h1>PROFILE LUXE</h1>
+            <div class="header-ornament"></div>
+        </header>
+
+        <!-- Main Grid -->
+        <div class="main-grid">
+            <!-- Profile Section -->
+            <aside class="profile-section">
+                <!-- Avatar -->
+                <div class="avatar-container">
+                    <div class="avatar-frame"></div>
+                    <div class="avatar">VL</div>
+                </div>
+                <h2 class="profile-name">Victoria Luxmore</h2>
+                <p class="profile-title">Elite Member Since 1925</p>
+
+                <!-- Stats Meters -->
+                <div class="stats-container">
+                    <div class="stat-meter">
+                        <div class="stat-label">Prestige Level</div>
+                        <div class="meter-track">
+                            <div class="meter-fill" style="width: 85%">
+                                <span class="meter-value">85</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="stat-meter">
+                        <div class="stat-label">Social Influence</div>
+                        <div class="meter-track">
+                            <div class="meter-fill" style="width: 72%">
+                                <span class="meter-value">72</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="stat-meter">
+                        <div class="stat-label">Activity Score</div>
+                        <div class="meter-track">
+                            <div class="meter-fill" style="width: 90%">
+                                <span class="meter-value">90</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="stat-meter">
+                        <div class="stat-label">Elite Status</div>
+                        <div class="meter-track">
+                            <div class="meter-fill" style="width: 95%">
+                                <span class="meter-value">95</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+
+            <!-- Main Content -->
+            <main class="main-content">
+                <!-- Activity Feed -->
+                <section class="activity-feed">
+                    <div class="feed-header">
+                        <h2 class="feed-title">SOCIETY CHRONICLE</h2>
+                        <p class="feed-date">December 6, 1925</p>
+                    </div>
+                    <div class="feed-columns">
+                        <article class="feed-item">
+                            <time class="feed-item-time">10:45 PM</time>
+                            <p class="feed-item-text">Attended the exclusive Gatsby soirée at the Plaza. Spectacular evening of jazz and champagne.</p>
+                        </article>
+                        <article class="feed-item">
+                            <time class="feed-item-time">8:30 PM</time>
+                            <p class="feed-item-text">Achieved Diamond Elite status. Privileges now include access to the Penthouse Lounge.</p>
+                        </article>
+                        <article class="feed-item">
+                            <time class="feed-item-time">6:15 PM</time>
+                            <p class="feed-item-text">New connection established with Charleston M. Distinguished member of the Arts Society.</p>
+                        </article>
+                        <article class="feed-item">
+                            <time class="feed-item-time">4:00 PM</time>
+                            <p class="feed-item-text">Portfolio update: Art collection valued at new heights. Monet acquisition confirmed.</p>
+                        </article>
+                        <article class="feed-item">
+                            <time class="feed-item-time">2:30 PM</time>
+                            <p class="feed-item-text">Received invitation to the Annual Metropolis Gala. Black tie mandatory.</p>
+                        </article>
+                        <article class="feed-item">
+                            <time class="feed-item-time">12:00 PM</time>
+                            <p class="feed-item-text">Luncheon at the Ritz with fellow Elite members. Discussed upcoming charity auction.</p>
+                        </article>
+                    </div>
+                </section>
+
+                <!-- Settings Panel -->
+                <section class="settings-panel">
+                    <div class="control-group">
+                        <h3 class="control-label">PRIVACY MODE</h3>
+                        <div class="luxury-switch" onclick="toggleSwitch(this)"></div>
+                    </div>
+                    <div class="control-group">
+                        <h3 class="control-label">NOTIFICATIONS</h3>
+                        <div class="luxury-switch active" onclick="toggleSwitch(this)"></div>
+                    </div>
+                    <div class="control-group">
+                        <h3 class="control-label">VISIBILITY</h3>
+                        <div class="luxury-slider" onclick="adjustSlider(event, this)">
+                            <div class="slider-fill"></div>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <h3 class="control-label">EXCLUSIVITY</h3>
+                        <div class="luxury-slider" onclick="adjustSlider(event, this)">
+                            <div class="slider-fill" style="width: 80%"></div>
+                        </div>
+                    </div>
+                </section>
+            </main>
+        </div>
+
+        <!-- Achievements Section -->
+        <section class="achievements-section">
+            <div class="achievements-header">
+                <h2 class="achievements-title">MEDALLIONS OF DISTINCTION</h2>
+            </div>
+            <div class="medallions-grid">
+                <div class="medallion">
+                    <div class="medallion-outer"></div>
+                    <div class="medallion-inner">★</div>
+                    <p class="medallion-name">ELITE STATUS</p>
+                </div>
+                <div class="medallion">
+                    <div class="medallion-outer"></div>
+                    <div class="medallion-inner">♦</div>
+                    <p class="medallion-name">DIAMOND TIER</p>
+                </div>
+                <div class="medallion">
+                    <div class="medallion-outer"></div>
+                    <div class="medallion-inner">♠</div>
+                    <p class="medallion-name">HIGH SOCIETY</p>
+                </div>
+                <div class="medallion">
+                    <div class="medallion-outer"></div>
+                    <div class="medallion-inner">♣</div>
+                    <p class="medallion-name">CLUB MEMBER</p>
+                </div>
+                <div class="medallion">
+                    <div class="medallion-outer"></div>
+                    <div class="medallion-inner">♥</div>
+                    <p class="medallion-name">PHILANTHROPIST</p>
+                </div>
+                <div class="medallion">
+                    <div class="medallion-outer"></div>
+                    <div class="medallion-inner">⚜</div>
+                    <p class="medallion-name">ARISTOCRAT</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Connections Constellation -->
+        <section class="connections-section">
+            <h2 class="achievements-title" style="text-align: center; margin-bottom: 30px;">SOCIAL CONSTELLATION</h2>
+            <div class="constellation-canvas" id="constellation">
+                <!-- Connection nodes will be dynamically positioned -->
+            </div>
+        </section>
+    </div>
+
+    <script>
+        // Toggle luxury switches
+        function toggleSwitch(element) {
+            element.classList.toggle('active');
+        }
+
+        // Adjust luxury sliders
+        function adjustSlider(event, slider) {
+            const rect = slider.getBoundingClientRect();
+            const percentage = ((event.clientX - rect.left) / rect.width) * 100;
+            const fill = slider.querySelector('.slider-fill');
+            fill.style.width = Math.max(0, Math.min(100, percentage)) + '%';
+        }
+
+        // Animate stat meters on load
+        window.addEventListener('load', () => {
+            const meters = document.querySelectorAll('.meter-fill');
+            meters.forEach((meter, index) => {
+                const targetWidth = meter.style.width;
+                meter.style.width = '0%';
+                setTimeout(() => {
+                    meter.style.width = targetWidth;
+                }, 100 + index * 200);
+            });
+        });
+
+        // Create connections constellation
+        function createConstellation() {
+            const canvas = document.getElementById('constellation');
+            const connections = [
+                { id: 'CM', x: 20, y: 30 },
+                { id: 'JG', x: 80, y: 20 },
+                { id: 'DF', x: 50, y: 50 },
+                { id: 'NK', x: 30, y: 70 },
+                { id: 'TW', x: 70, y: 80 },
+                { id: 'ES', x: 90, y: 60 },
+                { id: 'RL', x: 10, y: 50 }
+            ];
+
+            // Create nodes
+            connections.forEach(conn => {
+                const node = document.createElement('div');
+                node.className = 'connection-node';
+                node.textContent = conn.id;
+                node.style.left = conn.x + '%';
+                node.style.top = conn.y + '%';
+                node.style.transform = 'translate(-50%, -50%)';
+                canvas.appendChild(node);
+            });
+
+            // Create connection lines
+            for (let i = 0; i < connections.length; i++) {
+                for (let j = i + 1; j < connections.length; j++) {
+                    if (Math.random() > 0.5) { // Random connections
+                        const line = document.createElement('div');
+                        line.className = 'connection-line';
+                        
+                        const x1 = connections[i].x;
+                        const y1 = connections[i].y;
+                        const x2 = connections[j].x;
+                        const y2 = connections[j].y;
+                        
+                        const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+                        const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
+                        
+                        line.style.width = distance + '%';
+                        line.style.left = x1 + '%';
+                        line.style.top = y1 + '%';
+                        line.style.transform = `rotate(${angle}deg)`;
+                        
+                        canvas.appendChild(line);
+                    }
+                }
+            }
+        }
+
+        createConstellation();
+
+        // Add hover effects to medallions
+        document.querySelectorAll('.medallion').forEach(medallion => {
+            medallion.addEventListener('click', function() {
+                this.style.animation = 'none';
+                setTimeout(() => {
+                    this.style.animation = '';
+                }, 10);
+            });
+        });
+
+        // Parallax effect for background pattern
+        document.addEventListener('mousemove', (e) => {
+            const x = e.clientX / window.innerWidth;
+            const y = e.clientY / window.innerHeight;
+            
+            document.body.style.backgroundPosition = `${x * 20}px ${y * 20}px`;
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/themed_hybrid_all/ui_hybrid_13.html b/legacy/themed_hybrid_all/ui_hybrid_13.html
new file mode 100644
index 0000000..9ed0b16
--- /dev/null
+++ b/legacy/themed_hybrid_all/ui_hybrid_13.html
@@ -0,0 +1,1033 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cosmic Calendar - Space Exploration Calendar System</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Arial', sans-serif;
+            background: #000;
+            color: #fff;
+            overflow-x: hidden;
+            position: relative;
+        }
+
+        /* Cosmic Background */
+        .cosmic-background {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(ellipse at center, #0a0a2a 0%, #000 100%);
+            z-index: -2;
+        }
+
+        .stars {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+
+        .star {
+            position: absolute;
+            background: #fff;
+            border-radius: 50%;
+            animation: twinkle 3s infinite;
+        }
+
+        @keyframes twinkle {
+            0%, 100% { opacity: 0.3; transform: scale(1); }
+            50% { opacity: 1; transform: scale(1.2); }
+        }
+
+        /* Nebula Effects */
+        .nebula {
+            position: fixed;
+            width: 300px;
+            height: 300px;
+            background: radial-gradient(circle, rgba(138, 43, 226, 0.2), transparent 70%);
+            filter: blur(40px);
+            animation: drift 30s infinite;
+            z-index: -1;
+        }
+
+        .nebula:nth-child(2) {
+            background: radial-gradient(circle, rgba(30, 144, 255, 0.2), transparent 70%);
+            animation-duration: 40s;
+            animation-direction: reverse;
+        }
+
+        @keyframes drift {
+            0%, 100% { transform: translate(0, 0) rotate(0deg); }
+            33% { transform: translate(100px, -50px) rotate(120deg); }
+            66% { transform: translate(-50px, 100px) rotate(240deg); }
+        }
+
+        /* Header */
+        .header {
+            text-align: center;
+            padding: 30px;
+            background: linear-gradient(to bottom, rgba(0, 0, 40, 0.8), transparent);
+            position: relative;
+            z-index: 10;
+        }
+
+        .header h1 {
+            font-size: 3em;
+            background: linear-gradient(90deg, #4a90e2, #9b59b6, #e74c3c);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-shadow: 0 0 30px rgba(74, 144, 226, 0.5);
+            margin-bottom: 10px;
+        }
+
+        .header p {
+            color: #8a9bb3;
+            font-size: 1.2em;
+        }
+
+        /* Main Container */
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+            display: grid;
+            grid-template-columns: 300px 1fr 300px;
+            gap: 30px;
+            position: relative;
+            z-index: 10;
+        }
+
+        /* Left Panel - Time Zones */
+        .time-zones {
+            background: rgba(0, 0, 40, 0.6);
+            border: 1px solid rgba(74, 144, 226, 0.3);
+            border-radius: 15px;
+            padding: 20px;
+            backdrop-filter: blur(10px);
+        }
+
+        .time-zones h2 {
+            color: #4a90e2;
+            margin-bottom: 20px;
+            font-size: 1.3em;
+        }
+
+        .planet-time {
+            margin-bottom: 15px;
+            padding: 15px;
+            background: rgba(74, 144, 226, 0.1);
+            border-radius: 10px;
+            position: relative;
+            overflow: hidden;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .planet-time:hover {
+            background: rgba(74, 144, 226, 0.2);
+            transform: translateX(5px);
+        }
+
+        .planet-time::before {
+            content: '';
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background: radial-gradient(circle, var(--planet-color), transparent);
+            border-radius: 50%;
+            top: 50%;
+            left: -20px;
+            transform: translateY(-50%);
+            animation: rotate 20s linear infinite;
+        }
+
+        @keyframes rotate {
+            0% { transform: translateY(-50%) rotate(0deg); }
+            100% { transform: translateY(-50%) rotate(360deg); }
+        }
+
+        .planet-name {
+            font-weight: bold;
+            color: #fff;
+            margin-bottom: 5px;
+        }
+
+        .planet-time-display {
+            color: #8a9bb3;
+            font-family: monospace;
+            font-size: 1.1em;
+        }
+
+        /* Calendar Grid */
+        .calendar-container {
+            background: rgba(0, 0, 40, 0.6);
+            border: 1px solid rgba(74, 144, 226, 0.3);
+            border-radius: 15px;
+            padding: 20px;
+            backdrop-filter: blur(10px);
+        }
+
+        .calendar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .month-year {
+            font-size: 1.8em;
+            color: #4a90e2;
+            text-align: center;
+            flex: 1;
+        }
+
+        .nav-button {
+            background: rgba(74, 144, 226, 0.2);
+            border: 1px solid rgba(74, 144, 226, 0.5);
+            color: #fff;
+            padding: 10px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 1.2em;
+        }
+
+        .nav-button:hover {
+            background: rgba(74, 144, 226, 0.4);
+            transform: scale(1.05);
+            box-shadow: 0 0 15px rgba(74, 144, 226, 0.5);
+        }
+
+        .calendar-grid {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            gap: 10px;
+            position: relative;
+        }
+
+        .day-header {
+            text-align: center;
+            color: #8a9bb3;
+            padding: 10px;
+            font-weight: bold;
+        }
+
+        .calendar-day {
+            aspect-ratio: 1;
+            background: rgba(0, 0, 0, 0.5);
+            border: 1px solid rgba(74, 144, 226, 0.2);
+            border-radius: 10px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .calendar-day:hover {
+            background: rgba(74, 144, 226, 0.2);
+            border-color: rgba(74, 144, 226, 0.5);
+            transform: scale(1.05);
+            z-index: 1;
+        }
+
+        .calendar-day.other-month {
+            opacity: 0.3;
+        }
+
+        .calendar-day.today {
+            background: radial-gradient(circle, rgba(255, 215, 0, 0.3), transparent);
+            border-color: rgba(255, 215, 0, 0.5);
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
+            50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); }
+        }
+
+        .day-number {
+            font-size: 1.2em;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+
+        .event-indicator {
+            width: 6px;
+            height: 6px;
+            background: var(--event-color);
+            border-radius: 50%;
+            margin: 2px;
+            animation: orbit 3s linear infinite;
+        }
+
+        @keyframes orbit {
+            0% { transform: rotate(0deg) translateX(10px) rotate(0deg); }
+            100% { transform: rotate(360deg) translateX(10px) rotate(-360deg); }
+        }
+
+        /* Right Panel - Events */
+        .events-panel {
+            background: rgba(0, 0, 40, 0.6);
+            border: 1px solid rgba(74, 144, 226, 0.3);
+            border-radius: 15px;
+            padding: 20px;
+            backdrop-filter: blur(10px);
+        }
+
+        .events-panel h2 {
+            color: #4a90e2;
+            margin-bottom: 20px;
+            font-size: 1.3em;
+        }
+
+        .add-event-btn {
+            width: 100%;
+            background: linear-gradient(45deg, #4a90e2, #9b59b6);
+            border: none;
+            color: #fff;
+            padding: 15px;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 1.1em;
+            transition: all 0.3s;
+            margin-bottom: 20px;
+        }
+
+        .add-event-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3);
+        }
+
+        .event-item {
+            background: rgba(74, 144, 226, 0.1);
+            border: 1px solid rgba(74, 144, 226, 0.3);
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 15px;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s;
+        }
+
+        .event-item:hover {
+            background: rgba(74, 144, 226, 0.2);
+            transform: translateX(-5px);
+        }
+
+        .event-item::before {
+            content: '';
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: radial-gradient(circle, var(--event-color), transparent);
+            border-radius: 50%;
+            top: 50%;
+            right: -10px;
+            transform: translateY(-50%);
+            animation: pulse 2s infinite;
+        }
+
+        .event-title {
+            font-weight: bold;
+            color: #fff;
+            margin-bottom: 5px;
+        }
+
+        .event-time {
+            color: #8a9bb3;
+            font-size: 0.9em;
+        }
+
+        /* Event Modal */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 1000;
+            backdrop-filter: blur(5px);
+        }
+
+        .modal-content {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: linear-gradient(135deg, rgba(0, 0, 40, 0.95), rgba(74, 144, 226, 0.1));
+            border: 1px solid rgba(74, 144, 226, 0.5);
+            border-radius: 20px;
+            padding: 30px;
+            width: 90%;
+            max-width: 500px;
+            box-shadow: 0 0 50px rgba(74, 144, 226, 0.5);
+        }
+
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .modal-header h3 {
+            color: #4a90e2;
+            font-size: 1.5em;
+        }
+
+        .close-btn {
+            background: none;
+            border: none;
+            color: #fff;
+            font-size: 1.5em;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .close-btn:hover {
+            color: #e74c3c;
+            transform: rotate(90deg);
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-group label {
+            display: block;
+            color: #8a9bb3;
+            margin-bottom: 5px;
+        }
+
+        .form-group input,
+        .form-group select,
+        .form-group textarea {
+            width: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            border: 1px solid rgba(74, 144, 226, 0.3);
+            color: #fff;
+            padding: 10px;
+            border-radius: 5px;
+            transition: all 0.3s;
+        }
+
+        .form-group input:focus,
+        .form-group select:focus,
+        .form-group textarea:focus {
+            outline: none;
+            border-color: rgba(74, 144, 226, 0.8);
+            box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
+        }
+
+        .color-picker {
+            display: flex;
+            gap: 10px;
+            margin-top: 5px;
+        }
+
+        .color-option {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            cursor: pointer;
+            transition: all 0.3s;
+            border: 2px solid transparent;
+        }
+
+        .color-option:hover {
+            transform: scale(1.2);
+        }
+
+        .color-option.selected {
+            border-color: #fff;
+            box-shadow: 0 0 10px currentColor;
+        }
+
+        .save-btn {
+            background: linear-gradient(45deg, #4a90e2, #9b59b6);
+            border: none;
+            color: #fff;
+            padding: 12px 30px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1.1em;
+            transition: all 0.3s;
+            width: 100%;
+        }
+
+        .save-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3);
+        }
+
+        /* Satellite Signals (Reminders) */
+        .satellite-signal {
+            position: fixed;
+            width: 100px;
+            height: 100px;
+            border: 2px solid rgba(255, 215, 0, 0.5);
+            border-radius: 50%;
+            animation: signal-pulse 3s infinite;
+            pointer-events: none;
+            z-index: 100;
+        }
+
+        @keyframes signal-pulse {
+            0% {
+                transform: scale(0.5);
+                opacity: 1;
+            }
+            100% {
+                transform: scale(2);
+                opacity: 0;
+            }
+        }
+
+        /* Comet Trail (Recurring Events) */
+        .comet {
+            position: fixed;
+            width: 10px;
+            height: 10px;
+            background: #fff;
+            border-radius: 50%;
+            box-shadow: 0 0 10px #fff;
+            z-index: 5;
+        }
+
+        .comet-trail {
+            position: absolute;
+            width: 100px;
+            height: 2px;
+            background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.8));
+            top: 50%;
+            right: 10px;
+            transform: translateY(-50%);
+        }
+
+        /* Orbital Paths */
+        .orbital-path {
+            position: absolute;
+            border: 1px dashed rgba(74, 144, 226, 0.3);
+            border-radius: 50%;
+            pointer-events: none;
+            animation: rotate 30s linear infinite;
+        }
+
+        /* Constellation Connections */
+        .constellation-line {
+            position: absolute;
+            height: 1px;
+            background: rgba(74, 144, 226, 0.3);
+            transform-origin: left center;
+            pointer-events: none;
+        }
+
+        /* Responsive */
+        @media (max-width: 1200px) {
+            .container {
+                grid-template-columns: 1fr;
+            }
+            
+            .time-zones,
+            .events-panel {
+                max-width: 600px;
+                margin: 0 auto;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="cosmic-background"></div>
+    <div class="stars" id="starsContainer"></div>
+    <div class="nebula" style="top: 20%; left: 10%;"></div>
+    <div class="nebula" style="bottom: 20%; right: 10%;"></div>
+
+    <header class="header">
+        <h1>Cosmic Calendar</h1>
+        <p>Navigate Time Through the Stars</p>
+    </header>
+
+    <div class="container">
+        <!-- Time Zones Panel -->
+        <div class="time-zones">
+            <h2>Planetary Time Zones</h2>
+            <div id="timeZones"></div>
+        </div>
+
+        <!-- Calendar -->
+        <div class="calendar-container">
+            <div class="calendar-header">
+                <button class="nav-button" onclick="changeMonth(-1)">◀</button>
+                <div class="month-year" id="monthYear"></div>
+                <button class="nav-button" onclick="changeMonth(1)">▶</button>
+            </div>
+            <div class="calendar-grid" id="calendarGrid"></div>
+        </div>
+
+        <!-- Events Panel -->
+        <div class="events-panel">
+            <h2>Celestial Events</h2>
+            <button class="add-event-btn" onclick="openModal()">Launch New Event</button>
+            <div id="eventsList"></div>
+        </div>
+    </div>
+
+    <!-- Event Modal -->
+    <div class="modal" id="eventModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Create Celestial Event</h3>
+                <button class="close-btn" onclick="closeModal()">×</button>
+            </div>
+            <form id="eventForm">
+                <div class="form-group">
+                    <label>Event Name</label>
+                    <input type="text" id="eventName" placeholder="Enter celestial event name" required>
+                </div>
+                <div class="form-group">
+                    <label>Date</label>
+                    <input type="date" id="eventDate" required>
+                </div>
+                <div class="form-group">
+                    <label>Time</label>
+                    <input type="time" id="eventTime" required>
+                </div>
+                <div class="form-group">
+                    <label>Description</label>
+                    <textarea id="eventDescription" rows="3" placeholder="Describe your cosmic journey"></textarea>
+                </div>
+                <div class="form-group">
+                    <label>Event Type</label>
+                    <select id="eventType">
+                        <option value="planet">Planet (Single Event)</option>
+                        <option value="comet">Comet (Recurring Weekly)</option>
+                        <option value="asteroid">Asteroid (Recurring Monthly)</option>
+                        <option value="star">Star (Important)</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label>Celestial Color</label>
+                    <div class="color-picker">
+                        <div class="color-option" style="background: #e74c3c;" data-color="#e74c3c"></div>
+                        <div class="color-option" style="background: #f39c12;" data-color="#f39c12"></div>
+                        <div class="color-option" style="background: #f1c40f;" data-color="#f1c40f"></div>
+                        <div class="color-option" style="background: #2ecc71;" data-color="#2ecc71"></div>
+                        <div class="color-option" style="background: #3498db;" data-color="#3498db"></div>
+                        <div class="color-option selected" style="background: #9b59b6;" data-color="#9b59b6"></div>
+                        <div class="color-option" style="background: #1abc9c;" data-color="#1abc9c"></div>
+                        <div class="color-option" style="background: #ecf0f1;" data-color="#ecf0f1"></div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label>Reminder (Satellite Signal)</label>
+                    <select id="eventReminder">
+                        <option value="none">No Signal</option>
+                        <option value="5">5 minutes before</option>
+                        <option value="15">15 minutes before</option>
+                        <option value="30">30 minutes before</option>
+                        <option value="60">1 hour before</option>
+                        <option value="1440">1 day before</option>
+                    </select>
+                </div>
+                <button type="submit" class="save-btn">Launch Event</button>
+            </form>
+        </div>
+    </div>
+
+    <script>
+        // Global variables
+        let currentDate = new Date();
+        let selectedDate = null;
+        let events = JSON.parse(localStorage.getItem('cosmicEvents')) || [];
+        let selectedColor = '#9b59b6';
+
+        // Time zones with planet names
+        const planetaryTimeZones = [
+            { name: 'Mercury', offset: -8, color: '#8b7355' },
+            { name: 'Venus', offset: -5, color: '#ffd700' },
+            { name: 'Earth', offset: 0, color: '#4169e1' },
+            { name: 'Mars', offset: 3, color: '#cd5c5c' },
+            { name: 'Jupiter', offset: 6, color: '#daa520' },
+            { name: 'Saturn', offset: 9, color: '#f4a460' }
+        ];
+
+        // Initialize
+        function init() {
+            createStars();
+            updateTimeZones();
+            renderCalendar();
+            renderEvents();
+            setupEventListeners();
+            checkReminders();
+            createComets();
+            setInterval(updateTimeZones, 1000);
+            setInterval(checkReminders, 60000); // Check every minute
+        }
+
+        // Create stars
+        function createStars() {
+            const starsContainer = document.getElementById('starsContainer');
+            for (let i = 0; i < 200; i++) {
+                const star = document.createElement('div');
+                star.className = 'star';
+                star.style.left = Math.random() * 100 + '%';
+                star.style.top = Math.random() * 100 + '%';
+                star.style.width = star.style.height = Math.random() * 3 + 'px';
+                star.style.animationDelay = Math.random() * 3 + 's';
+                starsContainer.appendChild(star);
+            }
+        }
+
+        // Update time zones
+        function updateTimeZones() {
+            const container = document.getElementById('timeZones');
+            container.innerHTML = '';
+            
+            planetaryTimeZones.forEach(zone => {
+                const now = new Date();
+                now.setHours(now.getHours() + zone.offset);
+                
+                const planetDiv = document.createElement('div');
+                planetDiv.className = 'planet-time';
+                planetDiv.style.setProperty('--planet-color', zone.color);
+                planetDiv.innerHTML = `
+                    <div class="planet-name">${zone.name}</div>
+                    <div class="planet-time-display">${now.toLocaleTimeString()}</div>
+                `;
+                container.appendChild(planetDiv);
+            });
+        }
+
+        // Render calendar
+        function renderCalendar() {
+            const year = currentDate.getFullYear();
+            const month = currentDate.getMonth();
+            const firstDay = new Date(year, month, 1).getDay();
+            const daysInMonth = new Date(year, month + 1, 0).getDate();
+            const prevDaysInMonth = new Date(year, month, 0).getDate();
+            
+            document.getElementById('monthYear').textContent = 
+                currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+            
+            const grid = document.getElementById('calendarGrid');
+            grid.innerHTML = '';
+            
+            // Day headers
+            const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+            days.forEach(day => {
+                const header = document.createElement('div');
+                header.className = 'day-header';
+                header.textContent = day;
+                grid.appendChild(header);
+            });
+            
+            // Previous month days
+            for (let i = firstDay - 1; i >= 0; i--) {
+                const day = prevDaysInMonth - i;
+                createDayElement(day, month - 1, year, true);
+            }
+            
+            // Current month days
+            for (let day = 1; day <= daysInMonth; day++) {
+                createDayElement(day, month, year, false);
+            }
+            
+            // Next month days
+            const totalCells = firstDay + daysInMonth;
+            const nextDays = totalCells > 35 ? 42 - totalCells : 35 - totalCells;
+            for (let day = 1; day <= nextDays; day++) {
+                createDayElement(day, month + 1, year, true);
+            }
+            
+            // Draw constellation lines between events
+            drawConstellations();
+        }
+
+        // Create day element
+        function createDayElement(day, month, year, isOtherMonth) {
+            const dayDiv = document.createElement('div');
+            dayDiv.className = 'calendar-day';
+            if (isOtherMonth) dayDiv.classList.add('other-month');
+            
+            const today = new Date();
+            const cellDate = new Date(year, month, day);
+            
+            if (cellDate.toDateString() === today.toDateString()) {
+                dayDiv.classList.add('today');
+            }
+            
+            dayDiv.innerHTML = `<div class="day-number">${day}</div>`;
+            
+            // Add event indicators
+            const dayEvents = events.filter(event => {
+                const eventDate = new Date(event.date);
+                return eventDate.toDateString() === cellDate.toDateString();
+            });
+            
+            dayEvents.forEach(event => {
+                const indicator = document.createElement('div');
+                indicator.className = 'event-indicator';
+                indicator.style.setProperty('--event-color', event.color);
+                dayDiv.appendChild(indicator);
+            });
+            
+            dayDiv.onclick = () => selectDate(cellDate);
+            document.getElementById('calendarGrid').appendChild(dayDiv);
+        }
+
+        // Select date
+        function selectDate(date) {
+            selectedDate = date;
+            document.getElementById('eventDate').value = date.toISOString().split('T')[0];
+            openModal();
+        }
+
+        // Change month
+        function changeMonth(direction) {
+            currentDate.setMonth(currentDate.getMonth() + direction);
+            renderCalendar();
+        }
+
+        // Event management
+        function openModal() {
+            document.getElementById('eventModal').style.display = 'block';
+            createOrbitalPaths();
+        }
+
+        function closeModal() {
+            document.getElementById('eventModal').style.display = 'none';
+            document.getElementById('eventForm').reset();
+        }
+
+        // Setup event listeners
+        function setupEventListeners() {
+            // Color picker
+            document.querySelectorAll('.color-option').forEach(option => {
+                option.addEventListener('click', function() {
+                    document.querySelectorAll('.color-option').forEach(o => o.classList.remove('selected'));
+                    this.classList.add('selected');
+                    selectedColor = this.dataset.color;
+                });
+            });
+            
+            // Form submission
+            document.getElementById('eventForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                
+                const event = {
+                    id: Date.now(),
+                    name: document.getElementById('eventName').value,
+                    date: document.getElementById('eventDate').value,
+                    time: document.getElementById('eventTime').value,
+                    description: document.getElementById('eventDescription').value,
+                    type: document.getElementById('eventType').value,
+                    color: selectedColor,
+                    reminder: document.getElementById('eventReminder').value
+                };
+                
+                events.push(event);
+                localStorage.setItem('cosmicEvents', JSON.stringify(events));
+                
+                renderCalendar();
+                renderEvents();
+                closeModal();
+                
+                // Create satellite signal effect
+                if (event.reminder !== 'none') {
+                    createSatelliteSignal();
+                }
+            });
+        }
+
+        // Render events list
+        function renderEvents() {
+            const container = document.getElementById('eventsList');
+            container.innerHTML = '';
+            
+            const today = new Date().toDateString();
+            const todayEvents = events.filter(event => 
+                new Date(event.date).toDateString() === today
+            );
+            
+            todayEvents.forEach(event => {
+                const eventDiv = document.createElement('div');
+                eventDiv.className = 'event-item';
+                eventDiv.style.setProperty('--event-color', event.color);
+                eventDiv.innerHTML = `
+                    <div class="event-title">${event.name}</div>
+                    <div class="event-time">${event.time} - ${event.type}</div>
+                `;
+                container.appendChild(eventDiv);
+            });
+        }
+
+        // Check reminders
+        function checkReminders() {
+            const now = new Date();
+            
+            events.forEach(event => {
+                if (event.reminder === 'none') return;
+                
+                const eventDateTime = new Date(event.date + ' ' + event.time);
+                const reminderTime = new Date(eventDateTime.getTime() - event.reminder * 60000);
+                
+                if (Math.abs(now - reminderTime) < 60000) {
+                    showReminder(event);
+                }
+            });
+        }
+
+        // Show reminder
+        function showReminder(event) {
+            createSatelliteSignal();
+            
+            if (Notification.permission === 'granted') {
+                new Notification('Cosmic Calendar Reminder', {
+                    body: `${event.name} starts in ${event.reminder} minutes`,
+                    icon: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%234a90e2"/></svg>'
+                });
+            }
+        }
+
+        // Create satellite signal effect
+        function createSatelliteSignal() {
+            const signal = document.createElement('div');
+            signal.className = 'satellite-signal';
+            signal.style.left = Math.random() * window.innerWidth + 'px';
+            signal.style.top = Math.random() * window.innerHeight + 'px';
+            document.body.appendChild(signal);
+            
+            setTimeout(() => signal.remove(), 3000);
+        }
+
+        // Create comets for recurring events
+        function createComets() {
+            setInterval(() => {
+                const recurringEvents = events.filter(e => 
+                    e.type === 'comet' || e.type === 'asteroid'
+                );
+                
+                if (recurringEvents.length > 0 && Math.random() < 0.3) {
+                    const comet = document.createElement('div');
+                    comet.className = 'comet';
+                    comet.innerHTML = '<div class="comet-trail"></div>';
+                    
+                    const startY = Math.random() * window.innerHeight;
+                    comet.style.top = startY + 'px';
+                    comet.style.right = '-10px';
+                    
+                    document.body.appendChild(comet);
+                    
+                    // Animate comet
+                    let position = -10;
+                    const animation = setInterval(() => {
+                        position += 5;
+                        comet.style.right = position + 'px';
+                        
+                        if (position > window.innerWidth + 100) {
+                            clearInterval(animation);
+                            comet.remove();
+                        }
+                    }, 20);
+                }
+            }, 5000);
+        }
+
+        // Create orbital paths in modal
+        function createOrbitalPaths() {
+            const modal = document.querySelector('.modal-content');
+            
+            for (let i = 0; i < 3; i++) {
+                const path = document.createElement('div');
+                path.className = 'orbital-path';
+                path.style.width = (i + 1) * 150 + 'px';
+                path.style.height = (i + 1) * 150 + 'px';
+                path.style.top = '50%';
+                path.style.left = '50%';
+                path.style.transform = 'translate(-50%, -50%)';
+                path.style.animationDuration = (i + 1) * 10 + 's';
+                modal.appendChild(path);
+                
+                setTimeout(() => path.remove(), 5000);
+            }
+        }
+
+        // Draw constellation lines between events
+        function drawConstellations() {
+            const dayElements = document.querySelectorAll('.calendar-day:not(.other-month)');
+            const eventDays = [];
+            
+            dayElements.forEach(day => {
+                if (day.querySelector('.event-indicator')) {
+                    eventDays.push(day);
+                }
+            });
+            
+            // Connect nearby events
+            for (let i = 0; i < eventDays.length - 1; i++) {
+                for (let j = i + 1; j < eventDays.length; j++) {
+                    if (Math.random() < 0.3) { // 30% chance to connect
+                        connectDays(eventDays[i], eventDays[j]);
+                    }
+                }
+            }
+        }
+
+        // Connect two days with a line
+        function connectDays(day1, day2) {
+            const rect1 = day1.getBoundingClientRect();
+            const rect2 = day2.getBoundingClientRect();
+            const container = document.querySelector('.calendar-grid');
+            const containerRect = container.getBoundingClientRect();
+            
+            const x1 = rect1.left + rect1.width / 2 - containerRect.left;
+            const y1 = rect1.top + rect1.height / 2 - containerRect.top;
+            const x2 = rect2.left + rect2.width / 2 - containerRect.left;
+            const y2 = rect2.top + rect2.height / 2 - containerRect.top;
+            
+            const distance = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+            const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
+            
+            const line = document.createElement('div');
+            line.className = 'constellation-line';
+            line.style.width = distance + 'px';
+            line.style.left = x1 + 'px';
+            line.style.top = y1 + 'px';
+            line.style.transform = `rotate(${angle}deg)`;
+            
+            container.appendChild(line);
+        }
+
+        // Request notification permission
+        if ('Notification' in window && Notification.permission === 'default') {
+            Notification.requestPermission();
+        }
+
+        // Initialize on load
+        window.onload = init;
+
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            renderCalendar();
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/themed_hybrid_all/ui_hybrid_14.html b/legacy/themed_hybrid_all/ui_hybrid_14.html
new file mode 100644
index 0000000..70ddbeb
--- /dev/null
+++ b/legacy/themed_hybrid_all/ui_hybrid_14.html
@@ -0,0 +1,969 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Steampunk Machinery Communication Hub</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Libre Baskerville', serif;
+            background: #1a1511;
+            color: #d4af37;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 20px;
+            background-image: 
+                radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
+                radial-gradient(circle at 80% 50%, rgba(184, 134, 11, 0.1) 0%, transparent 50%),
+                radial-gradient(circle at 50% 20%, rgba(218, 165, 32, 0.05) 0%, transparent 50%);
+        }
+        
+        h1 {
+            font-family: 'Cinzel', serif;
+            font-size: 2.5rem;
+            text-align: center;
+            margin-bottom: 2rem;
+            color: #daa520;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),
+                         0 0 20px rgba(212, 175, 55, 0.3);
+            letter-spacing: 2px;
+        }
+        
+        .communication-hub {
+            width: 100%;
+            max-width: 1400px;
+            background: linear-gradient(145deg, #2a2217, #1f1813);
+            border: 3px solid #8b6914;
+            border-radius: 15px;
+            padding: 30px;
+            box-shadow: 
+                inset 0 0 50px rgba(212, 175, 55, 0.1),
+                0 0 30px rgba(212, 175, 55, 0.2),
+                0 10px 20px rgba(0, 0, 0, 0.5);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        /* Decorative gears */
+        .gear {
+            position: absolute;
+            opacity: 0.1;
+            animation: rotate 20s linear infinite;
+        }
+        
+        .gear-1 {
+            top: -50px;
+            right: -50px;
+            width: 150px;
+            height: 150px;
+            animation-duration: 30s;
+        }
+        
+        .gear-2 {
+            bottom: -30px;
+            left: -30px;
+            width: 100px;
+            height: 100px;
+            animation-direction: reverse;
+        }
+        
+        @keyframes rotate {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+        
+        /* Main layout grid */
+        .hub-grid {
+            display: grid;
+            grid-template-columns: 300px 1fr 250px;
+            gap: 20px;
+            position: relative;
+            z-index: 1;
+        }
+        
+        /* Participant Manifest (Left Panel) */
+        .passenger-manifest {
+            background: #1f1611;
+            border: 2px solid #8b6914;
+            border-radius: 10px;
+            padding: 15px;
+            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
+        }
+        
+        .manifest-header {
+            font-family: 'Cinzel', serif;
+            font-size: 1.2rem;
+            text-align: center;
+            margin-bottom: 15px;
+            color: #daa520;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        .participant {
+            background: linear-gradient(145deg, #2a2217, #1f1813);
+            border: 1px solid #8b6914;
+            border-radius: 8px;
+            padding: 10px;
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+        }
+        
+        .participant:hover {
+            transform: translateX(5px);
+            box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
+        }
+        
+        .participant-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            border: 2px solid #8b6914;
+            background: #2a2217;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            color: #daa520;
+        }
+        
+        .participant-info {
+            flex: 1;
+        }
+        
+        .participant-name {
+            font-weight: 600;
+            color: #daa520;
+            font-size: 0.9rem;
+        }
+        
+        .participant-status {
+            font-size: 0.8rem;
+            color: #b8860b;
+            font-style: italic;
+        }
+        
+        .steam-indicator {
+            position: absolute;
+            right: 10px;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #4ade80;
+            box-shadow: 0 0 10px #4ade80;
+            animation: steam-pulse 2s ease-in-out infinite;
+        }
+        
+        @keyframes steam-pulse {
+            0%, 100% { opacity: 1; transform: scale(1); }
+            50% { opacity: 0.5; transform: scale(1.2); }
+        }
+        
+        /* Center Panel */
+        .center-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        
+        /* Projection Apparatus (Screen Share) */
+        .projection-apparatus {
+            background: #0a0908;
+            border: 3px solid #8b6914;
+            border-radius: 10px;
+            height: 400px;
+            position: relative;
+            overflow: hidden;
+            box-shadow: 
+                inset 0 0 50px rgba(0, 0, 0, 0.8),
+                0 0 20px rgba(212, 175, 55, 0.2);
+        }
+        
+        .projection-screen {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: radial-gradient(ellipse at center, #1a1511 0%, #0a0908 100%);
+            position: relative;
+        }
+        
+        .projection-content {
+            text-align: center;
+            padding: 20px;
+        }
+        
+        .projection-icon {
+            font-size: 4rem;
+            margin-bottom: 20px;
+            animation: projection-flicker 3s ease-in-out infinite;
+        }
+        
+        @keyframes projection-flicker {
+            0%, 100% { opacity: 0.3; }
+            50% { opacity: 0.8; }
+        }
+        
+        .projection-controls {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 15px;
+        }
+        
+        /* Brass Valves (Video Controls) */
+        .brass-valves {
+            background: linear-gradient(145deg, #2a2217, #1f1813);
+            border: 2px solid #8b6914;
+            border-radius: 10px;
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 30px;
+        }
+        
+        .valve-control {
+            position: relative;
+            width: 80px;
+            height: 80px;
+            cursor: pointer;
+            transition: transform 0.3s ease;
+        }
+        
+        .valve-control:hover {
+            transform: scale(1.1);
+        }
+        
+        .valve-wheel {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background: radial-gradient(circle at 30% 30%, #daa520 0%, #8b6914 50%, #654321 100%);
+            border: 3px solid #654321;
+            position: relative;
+            box-shadow: 
+                inset 0 0 20px rgba(0, 0, 0, 0.5),
+                0 5px 10px rgba(0, 0, 0, 0.5);
+            transition: transform 0.5s ease;
+        }
+        
+        .valve-control.active .valve-wheel {
+            transform: rotate(180deg);
+            box-shadow: 
+                inset 0 0 20px rgba(212, 175, 55, 0.5),
+                0 5px 10px rgba(0, 0, 0, 0.5),
+                0 0 20px rgba(212, 175, 55, 0.5);
+        }
+        
+        .valve-spokes {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 60%;
+            height: 60%;
+        }
+        
+        .valve-spoke {
+            position: absolute;
+            width: 2px;
+            height: 50%;
+            background: #654321;
+            left: 50%;
+            transform-origin: bottom;
+        }
+        
+        .valve-spoke:nth-child(1) { transform: translateX(-50%) rotate(0deg); }
+        .valve-spoke:nth-child(2) { transform: translateX(-50%) rotate(45deg); }
+        .valve-spoke:nth-child(3) { transform: translateX(-50%) rotate(90deg); }
+        .valve-spoke:nth-child(4) { transform: translateX(-50%) rotate(135deg); }
+        
+        .valve-center {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: radial-gradient(circle at 30% 30%, #daa520 0%, #8b6914 100%);
+            border: 2px solid #654321;
+        }
+        
+        .valve-label {
+            position: absolute;
+            bottom: -25px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 0.8rem;
+            color: #b8860b;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            white-space: nowrap;
+        }
+        
+        /* Right Panel */
+        .right-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        
+        /* Phonograph Cylinder (Recording) */
+        .phonograph-cylinder {
+            background: linear-gradient(145deg, #2a2217, #1f1813);
+            border: 2px solid #8b6914;
+            border-radius: 10px;
+            padding: 20px;
+            text-align: center;
+        }
+        
+        .cylinder-mechanism {
+            width: 120px;
+            height: 40px;
+            background: linear-gradient(90deg, #8b6914 0%, #daa520 25%, #8b6914 50%, #daa520 75%, #8b6914 100%);
+            border-radius: 20px;
+            margin: 0 auto 15px;
+            position: relative;
+            box-shadow: 
+                inset 0 0 10px rgba(0, 0, 0, 0.5),
+                0 5px 10px rgba(0, 0, 0, 0.3);
+        }
+        
+        .cylinder-mechanism.recording {
+            animation: cylinder-spin 2s linear infinite;
+        }
+        
+        @keyframes cylinder-spin {
+            from { background-position: 0 0; }
+            to { background-position: 100px 0; }
+        }
+        
+        .record-button {
+            background: radial-gradient(circle at 30% 30%, #dc2626 0%, #991b1b 100%);
+            border: 3px solid #7f1d1d;
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            margin: 0 auto;
+            cursor: pointer;
+            position: relative;
+            transition: all 0.3s ease;
+            box-shadow: 
+                inset 0 0 20px rgba(0, 0, 0, 0.5),
+                0 5px 10px rgba(0, 0, 0, 0.5);
+        }
+        
+        .record-button:hover {
+            transform: scale(1.1);
+            box-shadow: 
+                inset 0 0 20px rgba(220, 38, 38, 0.5),
+                0 5px 10px rgba(0, 0, 0, 0.5),
+                0 0 20px rgba(220, 38, 38, 0.5);
+        }
+        
+        .record-button.recording {
+            animation: record-pulse 1s ease-in-out infinite;
+        }
+        
+        @keyframes record-pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+        
+        /* Steam Puffs (Reactions) */
+        .steam-reactions {
+            background: linear-gradient(145deg, #2a2217, #1f1813);
+            border: 2px solid #8b6914;
+            border-radius: 10px;
+            padding: 15px;
+        }
+        
+        .reactions-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 10px;
+        }
+        
+        .steam-button {
+            background: radial-gradient(circle at 30% 30%, #654321 0%, #3e2723 100%);
+            border: 2px solid #8b6914;
+            border-radius: 8px;
+            padding: 15px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-align: center;
+            font-size: 1.5rem;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .steam-button:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
+        }
+        
+        .steam-puff {
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 30px;
+            height: 30px;
+            background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
+            border-radius: 50%;
+            opacity: 0;
+            pointer-events: none;
+        }
+        
+        .steam-button:active .steam-puff {
+            animation: steam-rise 1s ease-out;
+        }
+        
+        @keyframes steam-rise {
+            0% {
+                opacity: 0;
+                transform: translateX(-50%) translateY(0) scale(0.5);
+            }
+            50% {
+                opacity: 1;
+            }
+            100% {
+                opacity: 0;
+                transform: translateX(-50%) translateY(-50px) scale(1.5);
+            }
+        }
+        
+        /* Pneumatic Tube Messages (Chat) */
+        .pneumatic-chat {
+            grid-column: 1 / -1;
+            background: linear-gradient(145deg, #1f1611, #141210);
+            border: 2px solid #8b6914;
+            border-radius: 10px;
+            padding: 20px;
+            height: 300px;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .tube-messages {
+            flex: 1;
+            overflow-y: auto;
+            margin-bottom: 15px;
+            padding-right: 10px;
+        }
+        
+        .tube-messages::-webkit-scrollbar {
+            width: 10px;
+        }
+        
+        .tube-messages::-webkit-scrollbar-track {
+            background: #1f1611;
+            border-radius: 5px;
+        }
+        
+        .tube-messages::-webkit-scrollbar-thumb {
+            background: #8b6914;
+            border-radius: 5px;
+        }
+        
+        .message-capsule {
+            background: linear-gradient(145deg, #2a2217, #1f1813);
+            border: 1px solid #8b6914;
+            border-radius: 20px;
+            padding: 12px 20px;
+            margin-bottom: 10px;
+            position: relative;
+            animation: tube-arrive 0.5s ease-out;
+        }
+        
+        @keyframes tube-arrive {
+            from {
+                opacity: 0;
+                transform: translateY(-20px) scale(0.8);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0) scale(1);
+            }
+        }
+        
+        .message-sender {
+            font-weight: 600;
+            color: #daa520;
+            margin-bottom: 5px;
+            font-size: 0.9rem;
+        }
+        
+        .message-text {
+            color: #d4af37;
+            font-size: 0.95rem;
+            line-height: 1.4;
+        }
+        
+        .message-time {
+            position: absolute;
+            top: 5px;
+            right: 15px;
+            font-size: 0.7rem;
+            color: #8b6914;
+            font-style: italic;
+        }
+        
+        .tube-input-container {
+            display: flex;
+            gap: 10px;
+        }
+        
+        .tube-input {
+            flex: 1;
+            background: #1f1611;
+            border: 2px solid #8b6914;
+            border-radius: 20px;
+            padding: 10px 20px;
+            color: #d4af37;
+            font-family: 'Libre Baskerville', serif;
+            font-size: 0.95rem;
+            outline: none;
+            transition: all 0.3s ease;
+        }
+        
+        .tube-input:focus {
+            box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
+            border-color: #daa520;
+        }
+        
+        .tube-send {
+            background: radial-gradient(circle at 30% 30%, #8b6914 0%, #654321 100%);
+            border: 2px solid #654321;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #daa520;
+            font-size: 1.2rem;
+            transition: all 0.3s ease;
+        }
+        
+        .tube-send:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
+        }
+        
+        /* Decorative elements */
+        .brass-plate {
+            position: absolute;
+            background: linear-gradient(145deg, #daa520 0%, #8b6914 100%);
+            border: 1px solid #654321;
+            border-radius: 5px;
+            padding: 5px 10px;
+            font-size: 0.7rem;
+            color: #1f1611;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        .hub-label {
+            top: 10px;
+            right: 20px;
+        }
+        
+        /* Gauge decorations */
+        .pressure-gauge {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            width: 60px;
+            height: 60px;
+            background: radial-gradient(circle at 30% 30%, #2a2217 0%, #1f1813 100%);
+            border: 3px solid #8b6914;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
+        }
+        
+        .gauge-needle {
+            position: absolute;
+            width: 2px;
+            height: 20px;
+            background: #dc2626;
+            transform-origin: bottom;
+            animation: gauge-wobble 3s ease-in-out infinite;
+        }
+        
+        @keyframes gauge-wobble {
+            0%, 100% { transform: rotate(-30deg); }
+            50% { transform: rotate(30deg); }
+        }
+        
+        /* Responsive adjustments */
+        @media (max-width: 1200px) {
+            .hub-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .passenger-manifest,
+            .right-panel {
+                display: none;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Communication Hub - Steampunk Machinery Theme</h1>
+        
+        <div class="communication-hub">
+            <!-- Decorative gears -->
+            <svg class="gear gear-1" viewBox="0 0 100 100">
+                <path d="M50 15 L55 5 L45 5 Z M50 85 L55 95 L45 95 Z M85 50 L95 55 L95 45 Z M15 50 L5 55 L5 45 Z" fill="#8b6914"/>
+                <circle cx="50" cy="50" r="35" fill="none" stroke="#8b6914" stroke-width="3"/>
+                <circle cx="50" cy="50" r="20" fill="none" stroke="#8b6914" stroke-width="2"/>
+            </svg>
+            
+            <svg class="gear gear-2" viewBox="0 0 100 100">
+                <path d="M50 15 L55 5 L45 5 Z M50 85 L55 95 L45 95 Z M85 50 L95 55 L95 45 Z M15 50 L5 55 L5 45 Z" fill="#8b6914"/>
+                <circle cx="50" cy="50" r="35" fill="none" stroke="#8b6914" stroke-width="3"/>
+            </svg>
+            
+            <!-- Brass plate label -->
+            <div class="brass-plate hub-label">Victorian Comm Station</div>
+            
+            <!-- Pressure gauge decoration -->
+            <div class="pressure-gauge">
+                <div class="gauge-needle"></div>
+            </div>
+            
+            <div class="hub-grid">
+                <!-- Passenger Manifest (Participant List) -->
+                <div class="passenger-manifest">
+                    <h2 class="manifest-header">Passenger Manifest</h2>
+                    <div class="participant">
+                        <div class="participant-avatar">VW</div>
+                        <div class="participant-info">
+                            <div class="participant-name">Victoria Whitmore</div>
+                            <div class="participant-status">Chief Engineer</div>
+                        </div>
+                        <div class="steam-indicator"></div>
+                    </div>
+                    <div class="participant">
+                        <div class="participant-avatar">AT</div>
+                        <div class="participant-info">
+                            <div class="participant-name">Augustus Thornbury</div>
+                            <div class="participant-status">Navigator</div>
+                        </div>
+                        <div class="steam-indicator"></div>
+                    </div>
+                    <div class="participant">
+                        <div class="participant-avatar">ES</div>
+                        <div class="participant-info">
+                            <div class="participant-name">Eleanor Sterling</div>
+                            <div class="participant-status">Communications</div>
+                        </div>
+                        <div class="steam-indicator"></div>
+                    </div>
+                    <div class="participant">
+                        <div class="participant-avatar">RB</div>
+                        <div class="participant-info">
+                            <div class="participant-name">Reginald Blackwood</div>
+                            <div class="participant-status">Guest Observer</div>
+                        </div>
+                        <div class="steam-indicator" style="background: #fbbf24;"></div>
+                    </div>
+                </div>
+                
+                <!-- Center Panel -->
+                <div class="center-panel">
+                    <!-- Projection Apparatus (Screen Share) -->
+                    <div class="projection-apparatus">
+                        <div class="projection-screen">
+                            <div class="projection-content">
+                                <div class="projection-icon">🎭</div>
+                                <h3 style="color: #daa520; margin-bottom: 10px;">Projection Chamber Active</h3>
+                                <p style="color: #b8860b; font-style: italic;">Awaiting visual transmission...</p>
+                            </div>
+                            <div class="projection-controls">
+                                <button class="tube-send" style="width: 50px; height: 50px;">
+                                    <span>📽️</span>
+                                </button>
+                                <button class="tube-send" style="width: 50px; height: 50px;">
+                                    <span>🔍</span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Brass Valves (Video Controls) -->
+                    <div class="brass-valves">
+                        <div class="valve-control" id="camera-valve">
+                            <div class="valve-wheel">
+                                <div class="valve-spokes">
+                                    <div class="valve-spoke"></div>
+                                    <div class="valve-spoke"></div>
+                                    <div class="valve-spoke"></div>
+                                    <div class="valve-spoke"></div>
+                                </div>
+                                <div class="valve-center"></div>
+                            </div>
+                            <div class="valve-label">Camera</div>
+                        </div>
+                        
+                        <div class="valve-control active" id="audio-valve">
+                            <div class="valve-wheel">
+                                <div class="valve-spokes">
+                                    <div class="valve-spoke"></div>
+                                    <div class="valve-spoke"></div>
+                                    <div class="valve-spoke"></div>
+                                    <div class="valve-spoke"></div>
+                                </div>
+                                <div class="valve-center"></div>
+                            </div>
+                            <div class="valve-label">Audio</div>
+                        </div>
+                        
+                        <div class="valve-control" id="screen-valve">
+                            <div class="valve-wheel">
+                                <div class="valve-spokes">
+                                    <div class="valve-spoke"></div>
+                                    <div class="valve-spoke"></div>
+                                    <div class="valve-spoke"></div>
+                                    <div class="valve-spoke"></div>
+                                </div>
+                                <div class="valve-center"></div>
+                            </div>
+                            <div class="valve-label">Screen</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Right Panel -->
+                <div class="right-panel">
+                    <!-- Phonograph Cylinder (Recording) -->
+                    <div class="phonograph-cylinder">
+                        <h3 style="color: #daa520; margin-bottom: 15px; font-size: 1rem;">Recording Chamber</h3>
+                        <div class="cylinder-mechanism"></div>
+                        <button class="record-button" id="record-btn"></button>
+                        <p style="color: #b8860b; margin-top: 10px; font-size: 0.8rem;">00:00:00</p>
+                    </div>
+                    
+                    <!-- Steam Puffs (Reactions) -->
+                    <div class="steam-reactions">
+                        <h3 style="color: #daa520; margin-bottom: 15px; font-size: 1rem; text-align: center;">Steam Signals</h3>
+                        <div class="reactions-grid">
+                            <button class="steam-button">
+                                👍
+                                <div class="steam-puff"></div>
+                            </button>
+                            <button class="steam-button">
+                                ❤️
+                                <div class="steam-puff"></div>
+                            </button>
+                            <button class="steam-button">
+                                😂
+                                <div class="steam-puff"></div>
+                            </button>
+                            <button class="steam-button">
+                                👏
+                                <div class="steam-puff"></div>
+                            </button>
+                            <button class="steam-button">
+                                🎩
+                                <div class="steam-puff"></div>
+                            </button>
+                            <button class="steam-button">
+                                ⚙️
+                                <div class="steam-puff"></div>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Pneumatic Tube Messages (Chat) -->
+                <div class="pneumatic-chat">
+                    <div class="tube-messages" id="chat-messages">
+                        <div class="message-capsule">
+                            <div class="message-time">14:32</div>
+                            <div class="message-sender">Victoria Whitmore</div>
+                            <div class="message-text">Greetings, fellow inventors! The atmospheric pressure readings are optimal for today's demonstration.</div>
+                        </div>
+                        <div class="message-capsule">
+                            <div class="message-time">14:33</div>
+                            <div class="message-sender">Augustus Thornbury</div>
+                            <div class="message-text">Splendid! I've calibrated the projection apparatus to maximum clarity. The aetheric interference should be minimal.</div>
+                        </div>
+                        <div class="message-capsule">
+                            <div class="message-time">14:35</div>
+                            <div class="message-sender">Eleanor Sterling</div>
+                            <div class="message-text">All pneumatic tubes are functioning at peak efficiency. Message velocity has increased by 23% since last fortnight.</div>
+                        </div>
+                    </div>
+                    <div class="tube-input-container">
+                        <input type="text" class="tube-input" id="chat-input" placeholder="Compose your pneumatic message...">
+                        <button class="tube-send" id="send-btn">➤</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Valve controls
+        const valves = document.querySelectorAll('.valve-control');
+        valves.forEach(valve => {
+            valve.addEventListener('click', function() {
+                this.classList.toggle('active');
+                
+                // Add steam effect
+                const steamEffect = document.createElement('div');
+                steamEffect.style.cssText = `
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    width: 100px;
+                    height: 100px;
+                    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
+                    border-radius: 50%;
+                    animation: steam-expand 1s ease-out forwards;
+                    pointer-events: none;
+                `;
+                this.appendChild(steamEffect);
+                
+                setTimeout(() => steamEffect.remove(), 1000);
+            });
+        });
+        
+        // Add CSS for steam expansion
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes steam-expand {
+                from {
+                    opacity: 1;
+                    transform: translate(-50%, -50%) scale(0);
+                }
+                to {
+                    opacity: 0;
+                    transform: translate(-50%, -50%) scale(2);
+                }
+            }
+        `;
+        document.head.appendChild(style);
+        
+        // Recording functionality
+        const recordBtn = document.getElementById('record-btn');
+        const cylinderMech = document.querySelector('.cylinder-mechanism');
+        let isRecording = false;
+        let recordingTime = 0;
+        let recordingInterval;
+        
+        recordBtn.addEventListener('click', function() {
+            isRecording = !isRecording;
+            this.classList.toggle('recording');
+            cylinderMech.classList.toggle('recording');
+            
+            if (isRecording) {
+                recordingInterval = setInterval(() => {
+                    recordingTime++;
+                    const hours = Math.floor(recordingTime / 3600).toString().padStart(2, '0');
+                    const minutes = Math.floor((recordingTime % 3600) / 60).toString().padStart(2, '0');
+                    const seconds = (recordingTime % 60).toString().padStart(2, '0');
+                    this.nextElementSibling.textContent = `${hours}:${minutes}:${seconds}`;
+                }, 1000);
+            } else {
+                clearInterval(recordingInterval);
+            }
+        });
+        
+        // Chat functionality
+        const chatInput = document.getElementById('chat-input');
+        const sendBtn = document.getElementById('send-btn');
+        const chatMessages = document.getElementById('chat-messages');
+        
+        function sendMessage() {
+            const text = chatInput.value.trim();
+            if (text) {
+                const time = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
+                const messageHtml = `
+                    <div class="message-capsule">
+                        <div class="message-time">${time}</div>
+                        <div class="message-sender">You</div>
+                        <div class="message-text">${text}</div>
+                    </div>
+                `;
+                chatMessages.insertAdjacentHTML('beforeend', messageHtml);
+                chatInput.value = '';
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+                
+                // Add pneumatic tube sound effect simulation
+                sendBtn.style.transform = 'scale(0.9)';
+                setTimeout(() => sendBtn.style.transform = 'scale(1)', 200);
+            }
+        }
+        
+        sendBtn.addEventListener('click', sendMessage);
+        chatInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') sendMessage();
+        });
+        
+        // Steam reactions
+        const steamButtons = document.querySelectorAll('.steam-button');
+        steamButtons.forEach(button => {
+            button.addEventListener('click', function() {
+                // Create multiple steam puffs
+                for (let i = 0; i < 3; i++) {
+                    setTimeout(() => {
+                        const puff = document.createElement('div');
+                        puff.className = 'steam-puff';
+                        puff.style.left = `${40 + (Math.random() * 20)}%`;
+                        puff.style.animation = 'steam-rise 1s ease-out forwards';
+                        this.appendChild(puff);
+                        setTimeout(() => puff.remove(), 1000);
+                    }, i * 100);
+                }
+            });
+        });
+        
+        // Participant status updates
+        setInterval(() => {
+            const indicators = document.querySelectorAll('.steam-indicator');
+            indicators.forEach(indicator => {
+                if (Math.random() > 0.7) {
+                    indicator.style.animationDuration = Math.random() * 2 + 1 + 's';
+                }
+            });
+        }, 5000);
+        
+        // Add some ambient gauge movements
+        const gaugeNeedle = document.querySelector('.gauge-needle');
+        setInterval(() => {
+            const rotation = -30 + Math.random() * 60;
+            gaugeNeedle.style.transform = `rotate(${rotation}deg)`;
+        }, 2000);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/themed_hybrid_all/ui_hybrid_15.html b/legacy/themed_hybrid_all/ui_hybrid_15.html
new file mode 100644
index 0000000..8164ae1
--- /dev/null
+++ b/legacy/themed_hybrid_all/ui_hybrid_15.html
@@ -0,0 +1,1236 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Japanese Origami Project Manager</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');
+
+        :root {
+            --paper-white: #FEFEF8;
+            --paper-cream: #FAF8F3;
+            --fold-shadow: rgba(0, 0, 0, 0.08);
+            --fold-line: rgba(0, 0, 0, 0.12);
+            --sakura-pink: #FFB5C5;
+            --bamboo-green: #8FBC8F;
+            --indigo-blue: #4B6584;
+            --gold-stamp: #D4AF37;
+            --ink-black: #2C3E50;
+            --fold-depth: 0 2px 8px rgba(0, 0, 0, 0.1);
+            --paper-texture: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4KPGZpbHRlciBpZD0icGFwZXIiPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4wNCIgbnVtT2N0YXZlcz0iNSIgcmVzdWx0PSJub2lzZSIgc2VlZD0iMSIvPgo8ZmVEaWZmdXNlTGlnaHRpbmcgaW49Im5vaXNlIiBsaWdodGluZy1jb2xvcj0id2hpdGUiIHN1cmZhY2VTY2FsZT0iMSI+CjxmZURpc3RhbnRMaWdodCBhenFtdXRoPSI0NSIgZWxldmF0aW9uPSI2MCIvPgo8L2ZlRGlmZnVzZUxpZ2h0aW5nPgo8L2ZpbHRlcj4KPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbHRlcj0idXJsKCNwYXBlcikiIG9wYWNpdHk9IjAuNCIvPgo8L3N2Zz4=');
+        }
+
+        body {
+            font-family: 'Noto Sans JP', sans-serif;
+            background: linear-gradient(135deg, #F5F5F0 0%, #E8E8E0 100%);
+            color: var(--ink-black);
+            min-height: 100vh;
+            position: relative;
+            overflow-x: auto;
+        }
+
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: var(--paper-texture);
+            opacity: 0.3;
+            pointer-events: none;
+        }
+
+        main {
+            padding: 2rem;
+            max-width: 1400px;
+            margin: 0 auto;
+            position: relative;
+            z-index: 1;
+        }
+
+        h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 2rem;
+            color: var(--indigo-blue);
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        h1::before {
+            content: '鶴';
+            font-size: 2.5rem;
+            color: var(--sakura-pink);
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .project-board {
+            background: var(--paper-white);
+            border-radius: 4px;
+            box-shadow: var(--fold-depth);
+            padding: 2rem;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .project-board::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 50%;
+            height: 100%;
+            width: 1px;
+            background: var(--fold-line);
+            transform: translateX(-50%);
+            opacity: 0.3;
+        }
+
+        .board-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px dashed var(--fold-line);
+        }
+
+        .project-title {
+            font-size: 1.5rem;
+            font-weight: 500;
+            color: var(--indigo-blue);
+        }
+
+        .add-task-btn {
+            background: var(--sakura-pink);
+            color: white;
+            border: none;
+            padding: 0.75rem 1.5rem;
+            border-radius: 20px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .add-task-btn::before {
+            content: '折';
+            position: absolute;
+            right: -20px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 3rem;
+            opacity: 0.1;
+            transition: right 0.3s ease;
+        }
+
+        .add-task-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
+
+        .add-task-btn:hover::before {
+            right: 10px;
+        }
+
+        .kanban-container {
+            display: flex;
+            gap: 1.5rem;
+            overflow-x: auto;
+            padding-bottom: 1rem;
+            min-height: 500px;
+        }
+
+        .kanban-column {
+            flex: 0 0 320px;
+            background: var(--paper-cream);
+            border-radius: 4px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            transition: transform 0.3s ease;
+        }
+
+        .kanban-column::before,
+        .kanban-column::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            width: 20px;
+            height: 100%;
+            background: linear-gradient(to right, transparent, var(--fold-shadow));
+            pointer-events: none;
+        }
+
+        .kanban-column::before {
+            left: -20px;
+            transform: scaleX(-1);
+        }
+
+        .kanban-column::after {
+            right: -20px;
+        }
+
+        .column-header {
+            padding: 1rem 1.5rem;
+            background: rgba(255, 255, 255, 0.7);
+            border-bottom: 1px solid var(--fold-line);
+            position: relative;
+        }
+
+        .column-title {
+            font-size: 1.1rem;
+            font-weight: 500;
+            color: var(--indigo-blue);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .task-count {
+            font-size: 0.85rem;
+            color: #666;
+            font-weight: 300;
+            margin-left: auto;
+        }
+
+        .tasks-container {
+            flex: 1;
+            padding: 1rem;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+        }
+
+        .task-card {
+            background: var(--paper-white);
+            border-radius: 4px;
+            padding: 1rem;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+            cursor: move;
+            transition: all 0.3s ease;
+            position: relative;
+            transform-style: preserve-3d;
+        }
+
+        .task-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 30px;
+            height: 30px;
+            background: linear-gradient(135deg, transparent 50%, var(--paper-cream) 50%);
+            border-radius: 0 4px 0 0;
+            box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.05);
+        }
+
+        .task-card:hover {
+            transform: translateY(-2px) rotateX(2deg);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
+        }
+
+        .task-card.dragging {
+            opacity: 0.5;
+            transform: rotate(-2deg);
+        }
+
+        .task-priority {
+            position: absolute;
+            top: 0.5rem;
+            left: 0.5rem;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+        }
+
+        .priority-high {
+            background: #FF6B6B;
+        }
+
+        .priority-medium {
+            background: var(--gold-stamp);
+        }
+
+        .priority-low {
+            background: var(--bamboo-green);
+        }
+
+        .task-title {
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+            color: var(--ink-black);
+            padding-left: 1.5rem;
+        }
+
+        .task-description {
+            font-size: 0.85rem;
+            color: #666;
+            margin-bottom: 0.75rem;
+            line-height: 1.4;
+        }
+
+        .task-meta {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+
+        .task-assignee {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.8rem;
+        }
+
+        .assignee-stamp {
+            width: 24px;
+            height: 24px;
+            border-radius: 4px;
+            background: var(--gold-stamp);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            font-size: 0.7rem;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+            transform: rotate(-3deg);
+        }
+
+        .task-actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .task-action {
+            width: 24px;
+            height: 24px;
+            border: none;
+            background: transparent;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #999;
+            transition: all 0.2s ease;
+            border-radius: 4px;
+        }
+
+        .task-action:hover {
+            background: rgba(0, 0, 0, 0.05);
+            color: var(--indigo-blue);
+        }
+
+        .task-progress {
+            width: 100%;
+            height: 4px;
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 2px;
+            margin-top: 0.75rem;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .task-progress::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            background: var(--bamboo-green);
+            transition: width 0.3s ease;
+            width: var(--progress, 0%);
+        }
+
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal-overlay.active {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 1;
+        }
+
+        .modal {
+            background: var(--paper-white);
+            border-radius: 8px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            width: 90%;
+            max-width: 600px;
+            max-height: 90vh;
+            overflow-y: auto;
+            position: relative;
+            transform: scale(0.9) rotateX(10deg);
+            transition: transform 0.3s ease;
+        }
+
+        .modal-overlay.active .modal {
+            transform: scale(1) rotateX(0deg);
+        }
+
+        .modal-header {
+            padding: 1.5rem;
+            border-bottom: 1px dashed var(--fold-line);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .modal-title {
+            font-size: 1.25rem;
+            font-weight: 500;
+            color: var(--indigo-blue);
+        }
+
+        .close-modal {
+            width: 32px;
+            height: 32px;
+            border: none;
+            background: transparent;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #999;
+            font-size: 1.5rem;
+            transition: all 0.2s ease;
+            border-radius: 50%;
+        }
+
+        .close-modal:hover {
+            background: rgba(0, 0, 0, 0.05);
+            color: var(--ink-black);
+            transform: rotate(90deg);
+        }
+
+        .modal-body {
+            padding: 1.5rem;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-label {
+            display: block;
+            font-size: 0.9rem;
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+            color: var(--ink-black);
+        }
+
+        .form-input,
+        .form-textarea,
+        .form-select {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid var(--fold-line);
+            border-radius: 4px;
+            font-size: 0.9rem;
+            font-family: inherit;
+            background: rgba(255, 255, 255, 0.5);
+            transition: all 0.2s ease;
+        }
+
+        .form-input:focus,
+        .form-textarea:focus,
+        .form-select:focus {
+            outline: none;
+            border-color: var(--sakura-pink);
+            background: white;
+            box-shadow: 0 0 0 3px rgba(255, 181, 197, 0.2);
+        }
+
+        .form-textarea {
+            min-height: 100px;
+            resize: vertical;
+        }
+
+        .priority-selector {
+            display: flex;
+            gap: 1rem;
+        }
+
+        .priority-option {
+            flex: 1;
+            padding: 0.75rem;
+            border: 2px solid transparent;
+            border-radius: 4px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            background: rgba(255, 255, 255, 0.5);
+        }
+
+        .priority-option:hover {
+            transform: translateY(-2px);
+        }
+
+        .priority-option.selected {
+            background: white;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .priority-option.high {
+            border-color: #FF6B6B;
+            color: #FF6B6B;
+        }
+
+        .priority-option.medium {
+            border-color: var(--gold-stamp);
+            color: var(--gold-stamp);
+        }
+
+        .priority-option.low {
+            border-color: var(--bamboo-green);
+            color: var(--bamboo-green);
+        }
+
+        .attachment-area {
+            border: 2px dashed var(--fold-line);
+            border-radius: 4px;
+            padding: 2rem;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            background: rgba(255, 255, 255, 0.3);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .attachment-area::before {
+            content: '📎';
+            position: absolute;
+            font-size: 4rem;
+            opacity: 0.1;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        .attachment-area:hover {
+            border-color: var(--sakura-pink);
+            background: rgba(255, 181, 197, 0.05);
+        }
+
+        .attachment-area.dragover {
+            border-color: var(--bamboo-green);
+            background: rgba(143, 188, 143, 0.1);
+        }
+
+        .modal-actions {
+            display: flex;
+            gap: 1rem;
+            justify-content: flex-end;
+            padding: 1.5rem;
+            border-top: 1px dashed var(--fold-line);
+        }
+
+        .btn {
+            padding: 0.75rem 1.5rem;
+            border: none;
+            border-radius: 20px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            font-family: inherit;
+        }
+
+        .btn-primary {
+            background: var(--sakura-pink);
+            color: white;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
+
+        .btn-secondary {
+            background: transparent;
+            color: var(--ink-black);
+            border: 1px solid var(--fold-line);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(0, 0, 0, 0.05);
+        }
+
+        .comments-section {
+            margin-top: 2rem;
+            padding-top: 1.5rem;
+            border-top: 1px dashed var(--fold-line);
+        }
+
+        .comments-header {
+            font-weight: 500;
+            margin-bottom: 1rem;
+            color: var(--indigo-blue);
+        }
+
+        .comment {
+            background: var(--paper-cream);
+            padding: 1rem;
+            border-radius: 4px;
+            margin-bottom: 0.75rem;
+            position: relative;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+        }
+
+        .comment::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 20px;
+            height: 20px;
+            background: linear-gradient(135deg, transparent 50%, var(--paper-white) 50%);
+            box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.05);
+        }
+
+        .comment-author {
+            font-weight: 500;
+            font-size: 0.85rem;
+            color: var(--indigo-blue);
+            margin-bottom: 0.25rem;
+        }
+
+        .comment-text {
+            font-size: 0.9rem;
+            color: var(--ink-black);
+            line-height: 1.4;
+        }
+
+        .comment-time {
+            font-size: 0.75rem;
+            color: #999;
+            margin-top: 0.5rem;
+        }
+
+        .add-comment {
+            display: flex;
+            gap: 0.75rem;
+            margin-top: 1rem;
+        }
+
+        .comment-input {
+            flex: 1;
+            padding: 0.5rem 0.75rem;
+            border: 1px solid var(--fold-line);
+            border-radius: 20px;
+            font-size: 0.85rem;
+            font-family: inherit;
+            background: rgba(255, 255, 255, 0.5);
+            transition: all 0.2s ease;
+        }
+
+        .comment-input:focus {
+            outline: none;
+            border-color: var(--sakura-pink);
+            background: white;
+        }
+
+        .comment-submit {
+            padding: 0.5rem 1rem;
+            background: var(--bamboo-green);
+            color: white;
+            border: none;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .comment-submit:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 3rem;
+            color: #999;
+            font-size: 0.9rem;
+        }
+
+        .empty-state::before {
+            content: '🏗️';
+            display: block;
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            opacity: 0.5;
+        }
+
+        @keyframes unfold {
+            from {
+                transform: rotateX(90deg) scale(0.8);
+                opacity: 0;
+            }
+            to {
+                transform: rotateX(0deg) scale(1);
+                opacity: 1;
+            }
+        }
+
+        .task-card {
+            animation: unfold 0.4s ease-out;
+        }
+
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-5px);
+            }
+        }
+
+        .floating {
+            animation: float 3s ease-in-out infinite;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Project Manager - Japanese Origami Theme</h1>
+        
+        <div class="project-board">
+            <div class="board-header">
+                <h2 class="project-title">Digital Product Launch 2024</h2>
+                <button class="add-task-btn" onclick="openTaskModal()">
+                    <span>+ Add Task</span>
+                </button>
+            </div>
+
+            <div class="kanban-container">
+                <div class="kanban-column" data-status="todo">
+                    <div class="column-header">
+                        <div class="column-title">
+                            <span>📋 To Do</span>
+                            <span class="task-count">3 tasks</span>
+                        </div>
+                    </div>
+                    <div class="tasks-container" ondrop="drop(event)" ondragover="allowDrop(event)">
+                        <div class="task-card" draggable="true" ondragstart="drag(event)" data-task-id="1">
+                            <div class="task-priority priority-high"></div>
+                            <div class="task-title">Design System Documentation</div>
+                            <div class="task-description">Create comprehensive documentation for the new design system components</div>
+                            <div class="task-meta">
+                                <div class="task-assignee">
+                                    <div class="assignee-stamp">JD</div>
+                                    <span>John Doe</span>
+                                </div>
+                                <div class="task-actions">
+                                    <button class="task-action" onclick="viewTaskDetails(1)">💬</button>
+                                    <button class="task-action">📎</button>
+                                </div>
+                            </div>
+                            <div class="task-progress" style="--progress: 0%"></div>
+                        </div>
+
+                        <div class="task-card" draggable="true" ondragstart="drag(event)" data-task-id="2">
+                            <div class="task-priority priority-medium"></div>
+                            <div class="task-title">API Integration Testing</div>
+                            <div class="task-description">Complete integration tests for payment gateway API</div>
+                            <div class="task-meta">
+                                <div class="task-assignee">
+                                    <div class="assignee-stamp">SK</div>
+                                    <span>Sarah Kim</span>
+                                </div>
+                                <div class="task-actions">
+                                    <button class="task-action" onclick="viewTaskDetails(2)">💬</button>
+                                    <button class="task-action">📎</button>
+                                </div>
+                            </div>
+                            <div class="task-progress" style="--progress: 0%"></div>
+                        </div>
+
+                        <div class="task-card" draggable="true" ondragstart="drag(event)" data-task-id="3">
+                            <div class="task-priority priority-low"></div>
+                            <div class="task-title">Update Team Wiki</div>
+                            <div class="task-description">Add new onboarding materials and process documentation</div>
+                            <div class="task-meta">
+                                <div class="task-assignee">
+                                    <div class="assignee-stamp">AL</div>
+                                    <span>Alex Lee</span>
+                                </div>
+                                <div class="task-actions">
+                                    <button class="task-action" onclick="viewTaskDetails(3)">💬</button>
+                                    <button class="task-action">📎</button>
+                                </div>
+                            </div>
+                            <div class="task-progress" style="--progress: 0%"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="kanban-column" data-status="inprogress">
+                    <div class="column-header">
+                        <div class="column-title">
+                            <span>🔄 In Progress</span>
+                            <span class="task-count">2 tasks</span>
+                        </div>
+                    </div>
+                    <div class="tasks-container" ondrop="drop(event)" ondragover="allowDrop(event)">
+                        <div class="task-card" draggable="true" ondragstart="drag(event)" data-task-id="4">
+                            <div class="task-priority priority-high"></div>
+                            <div class="task-title">User Authentication Flow</div>
+                            <div class="task-description">Implement OAuth2 authentication with social login options</div>
+                            <div class="task-meta">
+                                <div class="task-assignee">
+                                    <div class="assignee-stamp">MT</div>
+                                    <span>Mike Taylor</span>
+                                </div>
+                                <div class="task-actions">
+                                    <button class="task-action" onclick="viewTaskDetails(4)">💬</button>
+                                    <button class="task-action">📎</button>
+                                </div>
+                            </div>
+                            <div class="task-progress" style="--progress: 65%"></div>
+                        </div>
+
+                        <div class="task-card" draggable="true" ondragstart="drag(event)" data-task-id="5">
+                            <div class="task-priority priority-medium"></div>
+                            <div class="task-title">Mobile Responsive Updates</div>
+                            <div class="task-description">Optimize dashboard layouts for mobile devices</div>
+                            <div class="task-meta">
+                                <div class="task-assignee">
+                                    <div class="assignee-stamp">EC</div>
+                                    <span>Emma Chen</span>
+                                </div>
+                                <div class="task-actions">
+                                    <button class="task-action" onclick="viewTaskDetails(5)">💬</button>
+                                    <button class="task-action">📎</button>
+                                </div>
+                            </div>
+                            <div class="task-progress" style="--progress: 40%"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="kanban-column" data-status="review">
+                    <div class="column-header">
+                        <div class="column-title">
+                            <span>👁️ Review</span>
+                            <span class="task-count">1 task</span>
+                        </div>
+                    </div>
+                    <div class="tasks-container" ondrop="drop(event)" ondragover="allowDrop(event)">
+                        <div class="task-card" draggable="true" ondragstart="drag(event)" data-task-id="6">
+                            <div class="task-priority priority-high"></div>
+                            <div class="task-title">Performance Optimization</div>
+                            <div class="task-description">Code review for database query optimization changes</div>
+                            <div class="task-meta">
+                                <div class="task-assignee">
+                                    <div class="assignee-stamp">RJ</div>
+                                    <span>Ryan Johnson</span>
+                                </div>
+                                <div class="task-actions">
+                                    <button class="task-action" onclick="viewTaskDetails(6)">💬</button>
+                                    <button class="task-action">📎</button>
+                                </div>
+                            </div>
+                            <div class="task-progress" style="--progress: 90%"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="kanban-column" data-status="done">
+                    <div class="column-header">
+                        <div class="column-title">
+                            <span>✅ Done</span>
+                            <span class="task-count">2 tasks</span>
+                        </div>
+                    </div>
+                    <div class="tasks-container" ondrop="drop(event)" ondragover="allowDrop(event)">
+                        <div class="task-card" draggable="true" ondragstart="drag(event)" data-task-id="7">
+                            <div class="task-priority priority-medium"></div>
+                            <div class="task-title">CI/CD Pipeline Setup</div>
+                            <div class="task-description">Automated deployment pipeline with GitHub Actions</div>
+                            <div class="task-meta">
+                                <div class="task-assignee">
+                                    <div class="assignee-stamp">LW</div>
+                                    <span>Lisa Wang</span>
+                                </div>
+                                <div class="task-actions">
+                                    <button class="task-action" onclick="viewTaskDetails(7)">💬</button>
+                                    <button class="task-action">📎</button>
+                                </div>
+                            </div>
+                            <div class="task-progress" style="--progress: 100%"></div>
+                        </div>
+
+                        <div class="task-card" draggable="true" ondragstart="drag(event)" data-task-id="8">
+                            <div class="task-priority priority-low"></div>
+                            <div class="task-title">Security Audit Preparation</div>
+                            <div class="task-description">Prepare documentation for Q4 security audit</div>
+                            <div class="task-meta">
+                                <div class="task-assignee">
+                                    <div class="assignee-stamp">DM</div>
+                                    <span>David Miller</span>
+                                </div>
+                                <div class="task-actions">
+                                    <button class="task-action" onclick="viewTaskDetails(8)">💬</button>
+                                    <button class="task-action">📎</button>
+                                </div>
+                            </div>
+                            <div class="task-progress" style="--progress: 100%"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Task Modal -->
+        <div class="modal-overlay" id="taskModal">
+            <div class="modal">
+                <div class="modal-header">
+                    <h3 class="modal-title">Create New Task</h3>
+                    <button class="close-modal" onclick="closeTaskModal()">×</button>
+                </div>
+                <div class="modal-body">
+                    <form id="taskForm">
+                        <div class="form-group">
+                            <label class="form-label">Task Title</label>
+                            <input type="text" class="form-input" id="taskTitle" placeholder="Enter task title...">
+                        </div>
+
+                        <div class="form-group">
+                            <label class="form-label">Description</label>
+                            <textarea class="form-textarea" id="taskDescription" placeholder="Describe the task..."></textarea>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="form-label">Priority</label>
+                            <div class="priority-selector">
+                                <div class="priority-option high" onclick="selectPriority('high')">
+                                    High
+                                </div>
+                                <div class="priority-option medium selected" onclick="selectPriority('medium')">
+                                    Medium
+                                </div>
+                                <div class="priority-option low" onclick="selectPriority('low')">
+                                    Low
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="form-label">Assignee</label>
+                            <select class="form-select" id="taskAssignee">
+                                <option value="">Select assignee...</option>
+                                <option value="JD">John Doe</option>
+                                <option value="SK">Sarah Kim</option>
+                                <option value="AL">Alex Lee</option>
+                                <option value="MT">Mike Taylor</option>
+                                <option value="EC">Emma Chen</option>
+                                <option value="RJ">Ryan Johnson</option>
+                                <option value="LW">Lisa Wang</option>
+                                <option value="DM">David Miller</option>
+                            </select>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="form-label">Attachments</label>
+                            <div class="attachment-area" ondrop="dropFile(event)" ondragover="dragOverFile(event)" ondragleave="dragLeaveFile(event)">
+                                <p>Drag and drop files here or click to browse</p>
+                                <input type="file" id="fileInput" style="display: none;" multiple>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-actions">
+                    <button class="btn btn-secondary" onclick="closeTaskModal()">Cancel</button>
+                    <button class="btn btn-primary" onclick="createTask()">Create Task</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Task Details Modal -->
+        <div class="modal-overlay" id="detailsModal">
+            <div class="modal">
+                <div class="modal-header">
+                    <h3 class="modal-title" id="detailsTitle">Task Details</h3>
+                    <button class="close-modal" onclick="closeDetailsModal()">×</button>
+                </div>
+                <div class="modal-body">
+                    <div id="taskDetailsContent">
+                        <!-- Task details will be populated here -->
+                    </div>
+                    
+                    <div class="comments-section">
+                        <h4 class="comments-header">Comments</h4>
+                        <div id="commentsContainer">
+                            <div class="comment">
+                                <div class="comment-author">Sarah Kim</div>
+                                <div class="comment-text">Great progress on this! The API endpoints look solid.</div>
+                                <div class="comment-time">2 hours ago</div>
+                            </div>
+                            <div class="comment">
+                                <div class="comment-author">Mike Taylor</div>
+                                <div class="comment-text">I've reviewed the code. Just a minor suggestion on error handling.</div>
+                                <div class="comment-time">1 hour ago</div>
+                            </div>
+                        </div>
+                        <div class="add-comment">
+                            <input type="text" class="comment-input" placeholder="Add a comment..." id="newComment">
+                            <button class="comment-submit" onclick="addComment()">Send</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Drag and Drop functionality
+        function allowDrop(ev) {
+            ev.preventDefault();
+        }
+
+        function drag(ev) {
+            ev.dataTransfer.setData("taskId", ev.target.dataset.taskId);
+            ev.target.classList.add('dragging');
+        }
+
+        function drop(ev) {
+            ev.preventDefault();
+            const taskId = ev.dataTransfer.getData("taskId");
+            const taskElement = document.querySelector(`[data-task-id="${taskId}"]`);
+            const targetContainer = ev.target.closest('.tasks-container');
+            
+            if (targetContainer && taskElement) {
+                targetContainer.appendChild(taskElement);
+                taskElement.classList.remove('dragging');
+                updateTaskCounts();
+                updateProgress(taskElement, targetContainer.parentElement.dataset.status);
+            }
+        }
+
+        function updateTaskCounts() {
+            document.querySelectorAll('.kanban-column').forEach(column => {
+                const count = column.querySelector('.tasks-container').children.length;
+                column.querySelector('.task-count').textContent = `${count} task${count !== 1 ? 's' : ''}`;
+            });
+        }
+
+        function updateProgress(taskElement, status) {
+            const progressBar = taskElement.querySelector('.task-progress');
+            let progress = 0;
+            
+            switch(status) {
+                case 'todo':
+                    progress = 0;
+                    break;
+                case 'inprogress':
+                    progress = 50;
+                    break;
+                case 'review':
+                    progress = 90;
+                    break;
+                case 'done':
+                    progress = 100;
+                    break;
+            }
+            
+            progressBar.style.setProperty('--progress', `${progress}%`);
+        }
+
+        // Modal functionality
+        function openTaskModal() {
+            document.getElementById('taskModal').classList.add('active');
+        }
+
+        function closeTaskModal() {
+            document.getElementById('taskModal').classList.remove('active');
+            document.getElementById('taskForm').reset();
+        }
+
+        function selectPriority(priority) {
+            document.querySelectorAll('.priority-option').forEach(opt => {
+                opt.classList.remove('selected');
+            });
+            document.querySelector(`.priority-option.${priority}`).classList.add('selected');
+        }
+
+        function createTask() {
+            const title = document.getElementById('taskTitle').value;
+            const description = document.getElementById('taskDescription').value;
+            const assignee = document.getElementById('taskAssignee').value;
+            const priority = document.querySelector('.priority-option.selected').classList[1];
+            
+            if (!title || !assignee) {
+                alert('Please fill in all required fields');
+                return;
+            }
+
+            // Create new task card
+            const taskId = Date.now();
+            const taskCard = document.createElement('div');
+            taskCard.className = 'task-card';
+            taskCard.draggable = true;
+            taskCard.dataset.taskId = taskId;
+            taskCard.ondragstart = drag;
+            
+            const assigneeNames = {
+                'JD': 'John Doe',
+                'SK': 'Sarah Kim',
+                'AL': 'Alex Lee',
+                'MT': 'Mike Taylor',
+                'EC': 'Emma Chen',
+                'RJ': 'Ryan Johnson',
+                'LW': 'Lisa Wang',
+                'DM': 'David Miller'
+            };
+            
+            taskCard.innerHTML = `
+                <div class="task-priority priority-${priority}"></div>
+                <div class="task-title">${title}</div>
+                <div class="task-description">${description}</div>
+                <div class="task-meta">
+                    <div class="task-assignee">
+                        <div class="assignee-stamp">${assignee}</div>
+                        <span>${assigneeNames[assignee]}</span>
+                    </div>
+                    <div class="task-actions">
+                        <button class="task-action" onclick="viewTaskDetails(${taskId})">💬</button>
+                        <button class="task-action">📎</button>
+                    </div>
+                </div>
+                <div class="task-progress" style="--progress: 0%"></div>
+            `;
+            
+            // Add to todo column
+            document.querySelector('[data-status="todo"] .tasks-container').appendChild(taskCard);
+            updateTaskCounts();
+            closeTaskModal();
+        }
+
+        function viewTaskDetails(taskId) {
+            const task = document.querySelector(`[data-task-id="${taskId}"]`);
+            const title = task.querySelector('.task-title').textContent;
+            const description = task.querySelector('.task-description').textContent;
+            
+            document.getElementById('detailsTitle').textContent = title;
+            document.getElementById('taskDetailsContent').innerHTML = `
+                <p>${description}</p>
+                <div style="margin-top: 1rem;">
+                    <strong>Status:</strong> ${task.closest('.kanban-column').querySelector('.column-title span').textContent}
+                </div>
+            `;
+            
+            document.getElementById('detailsModal').classList.add('active');
+        }
+
+        function closeDetailsModal() {
+            document.getElementById('detailsModal').classList.remove('active');
+        }
+
+        function addComment() {
+            const commentInput = document.getElementById('newComment');
+            const text = commentInput.value.trim();
+            
+            if (!text) return;
+            
+            const comment = document.createElement('div');
+            comment.className = 'comment';
+            comment.innerHTML = `
+                <div class="comment-author">You</div>
+                <div class="comment-text">${text}</div>
+                <div class="comment-time">Just now</div>
+            `;
+            
+            document.getElementById('commentsContainer').appendChild(comment);
+            commentInput.value = '';
+        }
+
+        // File upload functionality
+        const attachmentArea = document.querySelector('.attachment-area');
+        const fileInput = document.getElementById('fileInput');
+
+        attachmentArea.addEventListener('click', () => {
+            fileInput.click();
+        });
+
+        function dragOverFile(ev) {
+            ev.preventDefault();
+            ev.target.closest('.attachment-area').classList.add('dragover');
+        }
+
+        function dragLeaveFile(ev) {
+            ev.target.closest('.attachment-area').classList.remove('dragover');
+        }
+
+        function dropFile(ev) {
+            ev.preventDefault();
+            ev.target.closest('.attachment-area').classList.remove('dragover');
+            
+            const files = ev.dataTransfer.files;
+            handleFiles(files);
+        }
+
+        fileInput.addEventListener('change', (e) => {
+            handleFiles(e.target.files);
+        });
+
+        function handleFiles(files) {
+            console.log('Files uploaded:', files);
+            // Handle file upload logic here
+        }
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                closeTaskModal();
+                closeDetailsModal();
+            }
+            if (e.key === 'n' && e.ctrlKey) {
+                e.preventDefault();
+                openTaskModal();
+            }
+        });
+
+        // Add floating animation to certain elements
+        document.querySelectorAll('.assignee-stamp').forEach((stamp, index) => {
+            stamp.style.animationDelay = `${index * 0.5}s`;
+            stamp.classList.add('floating');
+        });
+
+        // Initialize
+        updateTaskCounts();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/themed_hybrid_all/ui_hybrid_2.html b/legacy/themed_hybrid_all/ui_hybrid_2.html
new file mode 100644
index 0000000..8b0a5af
--- /dev/null
+++ b/legacy/themed_hybrid_all/ui_hybrid_2.html
@@ -0,0 +1,805 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Glass Morphism Input Intelligence</title>
+    <style>
+        :root {
+            --glass-bg: rgba(255, 255, 255, 0.1);
+            --glass-border: rgba(255, 255, 255, 0.2);
+            --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            --glass-blur: blur(10px);
+            --text-primary: #1a1a1a;
+            --text-secondary: #666;
+            --accent-valid: #22c55e;
+            --accent-invalid: #ef4444;
+            --accent-info: #3b82f6;
+            --gradient-edge: linear-gradient(135deg, 
+                rgba(255, 255, 255, 0.3) 0%, 
+                rgba(255, 255, 255, 0.1) 100%);
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --glass-bg: rgba(255, 255, 255, 0.05);
+                --glass-border: rgba(255, 255, 255, 0.1);
+                --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+                --text-primary: #f5f5f5;
+                --text-secondary: #a8a8a8;
+            }
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            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;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            color: var(--text-primary);
+        }
+
+        main {
+            width: 100%;
+            max-width: 600px;
+        }
+
+        h1 {
+            text-align: center;
+            margin-bottom: 40px;
+            color: white;
+            font-weight: 300;
+            font-size: 2.5em;
+            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+        }
+
+        .input-intelligence {
+            position: relative;
+            margin-bottom: 40px;
+        }
+
+        .glass-container {
+            background: var(--glass-bg);
+            backdrop-filter: var(--glass-blur);
+            -webkit-backdrop-filter: var(--glass-blur);
+            border-radius: 16px;
+            border: 1px solid var(--glass-border);
+            box-shadow: var(--glass-shadow);
+            padding: 24px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .glass-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: var(--gradient-edge);
+        }
+
+        .input-wrapper {
+            position: relative;
+            margin-bottom: 16px;
+        }
+
+        .glass-input {
+            width: 100%;
+            padding: 16px 48px 16px 16px;
+            font-size: 16px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--glass-border);
+            border-radius: 12px;
+            color: var(--text-primary);
+            backdrop-filter: blur(5px);
+            -webkit-backdrop-filter: blur(5px);
+            transition: all 0.3s ease;
+            outline: none;
+        }
+
+        .glass-input:focus {
+            background: rgba(255, 255, 255, 0.08);
+            border-color: rgba(255, 255, 255, 0.3);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+        }
+
+        .input-status {
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 24px;
+            height: 24px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .input-status.show {
+            opacity: 1;
+        }
+
+        .status-icon {
+            width: 100%;
+            height: 100%;
+            stroke-width: 2;
+        }
+
+        .status-icon.valid {
+            stroke: var(--accent-valid);
+        }
+
+        .status-icon.invalid {
+            stroke: var(--accent-invalid);
+        }
+
+        .status-icon.loading {
+            stroke: var(--accent-info);
+            animation: rotate 1s linear infinite;
+        }
+
+        @keyframes rotate {
+            to { transform: rotate(360deg); }
+        }
+
+        .help-tooltip {
+            position: absolute;
+            top: calc(100% + 8px);
+            left: 0;
+            right: 0;
+            background: var(--glass-bg);
+            backdrop-filter: var(--glass-blur);
+            -webkit-backdrop-filter: var(--glass-blur);
+            border: 1px solid var(--glass-border);
+            border-radius: 12px;
+            padding: 12px 16px;
+            box-shadow: var(--glass-shadow);
+            opacity: 0;
+            transform: translateY(-10px);
+            transition: all 0.3s ease;
+            pointer-events: none;
+            z-index: 10;
+        }
+
+        .help-tooltip.show {
+            opacity: 1;
+            transform: translateY(0);
+            pointer-events: auto;
+        }
+
+        .help-tooltip::before {
+            content: '';
+            position: absolute;
+            top: -6px;
+            left: 24px;
+            width: 12px;
+            height: 12px;
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-right: none;
+            border-bottom: none;
+            transform: rotate(45deg);
+        }
+
+        .help-text {
+            font-size: 14px;
+            color: var(--text-secondary);
+            line-height: 1.4;
+        }
+
+        .autocomplete-dropdown {
+            position: absolute;
+            top: calc(100% + 8px);
+            left: 0;
+            right: 0;
+            background: var(--glass-bg);
+            backdrop-filter: var(--glass-blur);
+            -webkit-backdrop-filter: var(--glass-blur);
+            border: 1px solid var(--glass-border);
+            border-radius: 12px;
+            box-shadow: var(--glass-shadow);
+            opacity: 0;
+            transform: translateY(-10px) scale(0.98);
+            transition: all 0.3s ease;
+            pointer-events: none;
+            z-index: 20;
+            max-height: 240px;
+            overflow-y: auto;
+        }
+
+        .autocomplete-dropdown.show {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+            pointer-events: auto;
+        }
+
+        .autocomplete-item {
+            padding: 12px 16px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .autocomplete-item:last-child {
+            border-bottom: none;
+        }
+
+        .autocomplete-item::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.1);
+            transition: left 0.3s ease;
+        }
+
+        .autocomplete-item:hover::before,
+        .autocomplete-item.selected::before {
+            left: 0;
+        }
+
+        .autocomplete-item.selected {
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .autocomplete-primary {
+            color: var(--text-primary);
+            font-weight: 500;
+            margin-bottom: 4px;
+        }
+
+        .autocomplete-secondary {
+            color: var(--text-secondary);
+            font-size: 12px;
+        }
+
+        .format-hint {
+            position: absolute;
+            top: 50%;
+            right: 48px;
+            transform: translateY(-50%);
+            font-size: 12px;
+            color: var(--text-secondary);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+
+        .format-hint.show {
+            opacity: 0.7;
+        }
+
+        .demo-section {
+            margin-bottom: 32px;
+        }
+
+        .demo-title {
+            color: white;
+            font-size: 1.2em;
+            margin-bottom: 16px;
+            font-weight: 300;
+        }
+
+        .feature-list {
+            background: var(--glass-bg);
+            backdrop-filter: var(--glass-blur);
+            -webkit-backdrop-filter: var(--glass-blur);
+            border: 1px solid var(--glass-border);
+            border-radius: 12px;
+            padding: 16px;
+            font-size: 14px;
+            color: var(--text-secondary);
+            line-height: 1.6;
+        }
+
+        .feature-list li {
+            margin-left: 20px;
+            margin-bottom: 8px;
+        }
+
+        @media (max-width: 640px) {
+            h1 {
+                font-size: 2em;
+            }
+            
+            .glass-container {
+                padding: 20px;
+            }
+            
+            .glass-input {
+                font-size: 16px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Input Intelligence - Glass Morphism Theme</h1>
+        
+        <div class="demo-section">
+            <h2 class="demo-title">Email Input with Validation</h2>
+            <div class="input-intelligence">
+                <div class="glass-container">
+                    <div class="input-wrapper">
+                        <input 
+                            type="text" 
+                            class="glass-input" 
+                            id="emailInput"
+                            placeholder="Enter your email address"
+                            autocomplete="off"
+                        >
+                        <span class="format-hint" id="emailFormatHint"></span>
+                        <div class="input-status" id="emailStatus">
+                            <svg class="status-icon" viewBox="0 0 24 24" fill="none">
+                                <!-- Dynamic SVG content inserted by JS -->
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="help-tooltip" id="emailHelp">
+                        <p class="help-text"></p>
+                    </div>
+                    <div class="autocomplete-dropdown" id="emailAutocomplete"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2 class="demo-title">Phone Number with Smart Formatting</h2>
+            <div class="input-intelligence">
+                <div class="glass-container">
+                    <div class="input-wrapper">
+                        <input 
+                            type="text" 
+                            class="glass-input" 
+                            id="phoneInput"
+                            placeholder="Enter phone number"
+                            autocomplete="off"
+                        >
+                        <span class="format-hint" id="phoneFormatHint"></span>
+                        <div class="input-status" id="phoneStatus">
+                            <svg class="status-icon" viewBox="0 0 24 24" fill="none">
+                                <!-- Dynamic SVG content inserted by JS -->
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="help-tooltip" id="phoneHelp">
+                        <p class="help-text"></p>
+                    </div>
+                    <div class="autocomplete-dropdown" id="phoneAutocomplete"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2 class="demo-title">Credit Card with Security Features</h2>
+            <div class="input-intelligence">
+                <div class="glass-container">
+                    <div class="input-wrapper">
+                        <input 
+                            type="text" 
+                            class="glass-input" 
+                            id="cardInput"
+                            placeholder="Enter card number"
+                            autocomplete="off"
+                        >
+                        <span class="format-hint" id="cardFormatHint"></span>
+                        <div class="input-status" id="cardStatus">
+                            <svg class="status-icon" viewBox="0 0 24 24" fill="none">
+                                <!-- Dynamic SVG content inserted by JS -->
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="help-tooltip" id="cardHelp">
+                        <p class="help-text"></p>
+                    </div>
+                    <div class="autocomplete-dropdown" id="cardAutocomplete"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="feature-list">
+            <ul>
+                <li>Real-time validation with visual feedback</li>
+                <li>Contextual help that adapts to input</li>
+                <li>Smart formatting as you type</li>
+                <li>Intelligent autocomplete suggestions</li>
+                <li>Glass morphism design with depth hierarchy</li>
+                <li>Light/dark mode adaptive styling</li>
+            </ul>
+        </div>
+    </main>
+
+    <script>
+        // SVG Icons
+        const icons = {
+            valid: '<circle cx="12" cy="12" r="10"></circle><path d="M9 12l2 2 4-4"></path>',
+            invalid: '<circle cx="12" cy="12" r="10"></circle><path d="M15 9l-6 6"></path><path d="M9 9l6 6"></path>',
+            loading: '<circle cx="12" cy="12" r="10" stroke-dasharray="50" stroke-dashoffset="10"></circle>'
+        };
+
+        // Input Intelligence Class
+        class InputIntelligence {
+            constructor(inputId, config) {
+                this.input = document.getElementById(inputId);
+                this.status = document.getElementById(inputId.replace('Input', 'Status'));
+                this.help = document.getElementById(inputId.replace('Input', 'Help'));
+                this.autocomplete = document.getElementById(inputId.replace('Input', 'Autocomplete'));
+                this.formatHint = document.getElementById(inputId.replace('Input', 'FormatHint'));
+                this.config = config;
+                this.selectedIndex = -1;
+                this.suggestions = [];
+                
+                this.init();
+            }
+
+            init() {
+                this.input.addEventListener('input', this.handleInput.bind(this));
+                this.input.addEventListener('focus', this.handleFocus.bind(this));
+                this.input.addEventListener('blur', this.handleBlur.bind(this));
+                this.input.addEventListener('keydown', this.handleKeydown.bind(this));
+                
+                this.autocomplete.addEventListener('click', this.handleAutocompleteClick.bind(this));
+            }
+
+            handleInput(e) {
+                const value = e.target.value;
+                
+                // Clear previous timeout
+                clearTimeout(this.validationTimeout);
+                clearTimeout(this.autocompleteTimeout);
+                
+                // Show loading state
+                this.showStatus('loading');
+                
+                // Format input
+                if (this.config.formatter) {
+                    const formatted = this.config.formatter(value);
+                    if (formatted !== value) {
+                        e.target.value = formatted;
+                        this.showFormatHint(this.config.formatHint);
+                    }
+                }
+                
+                // Validate after delay
+                this.validationTimeout = setTimeout(() => {
+                    this.validate(e.target.value);
+                }, 500);
+                
+                // Show autocomplete after delay
+                if (value.length >= this.config.minLength) {
+                    this.autocompleteTimeout = setTimeout(() => {
+                        this.showAutocomplete(value);
+                    }, 300);
+                } else {
+                    this.hideAutocomplete();
+                }
+            }
+
+            handleFocus() {
+                if (this.input.value.length >= this.config.minLength) {
+                    this.showAutocomplete(this.input.value);
+                }
+                this.showHelp(this.config.initialHelp);
+            }
+
+            handleBlur(e) {
+                // Delay to allow autocomplete clicks
+                setTimeout(() => {
+                    if (!this.autocomplete.contains(e.relatedTarget)) {
+                        this.hideAutocomplete();
+                        this.hideHelp();
+                        this.hideFormatHint();
+                    }
+                }, 200);
+            }
+
+            handleKeydown(e) {
+                if (!this.autocomplete.classList.contains('show')) return;
+                
+                const items = this.autocomplete.querySelectorAll('.autocomplete-item');
+                
+                switch(e.key) {
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        this.selectedIndex = Math.min(this.selectedIndex + 1, items.length - 1);
+                        this.updateSelection(items);
+                        break;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
+                        this.updateSelection(items);
+                        break;
+                    case 'Enter':
+                        if (this.selectedIndex >= 0 && this.selectedIndex < items.length) {
+                            e.preventDefault();
+                            this.selectSuggestion(this.suggestions[this.selectedIndex]);
+                        }
+                        break;
+                    case 'Escape':
+                        this.hideAutocomplete();
+                        break;
+                }
+            }
+
+            handleAutocompleteClick(e) {
+                const item = e.target.closest('.autocomplete-item');
+                if (item) {
+                    const index = Array.from(item.parentNode.children).indexOf(item);
+                    this.selectSuggestion(this.suggestions[index]);
+                }
+            }
+
+            validate(value) {
+                if (!value) {
+                    this.hideStatus();
+                    this.showHelp(this.config.initialHelp);
+                    return;
+                }
+                
+                const result = this.config.validator(value);
+                
+                if (result.valid) {
+                    this.showStatus('valid');
+                    this.showHelp(result.help || this.config.validHelp);
+                } else {
+                    this.showStatus('invalid');
+                    this.showHelp(result.help || this.config.invalidHelp);
+                }
+            }
+
+            showAutocomplete(value) {
+                this.suggestions = this.config.getSuggestions(value);
+                this.selectedIndex = -1;
+                
+                if (this.suggestions.length === 0) {
+                    this.hideAutocomplete();
+                    return;
+                }
+                
+                this.autocomplete.innerHTML = this.suggestions.map((suggestion, index) => `
+                    <div class="autocomplete-item">
+                        <div class="autocomplete-primary">${suggestion.primary}</div>
+                        ${suggestion.secondary ? `<div class="autocomplete-secondary">${suggestion.secondary}</div>` : ''}
+                    </div>
+                `).join('');
+                
+                this.autocomplete.classList.add('show');
+            }
+
+            hideAutocomplete() {
+                this.autocomplete.classList.remove('show');
+                this.selectedIndex = -1;
+            }
+
+            updateSelection(items) {
+                items.forEach((item, index) => {
+                    item.classList.toggle('selected', index === this.selectedIndex);
+                });
+            }
+
+            selectSuggestion(suggestion) {
+                this.input.value = suggestion.value;
+                this.hideAutocomplete();
+                this.validate(suggestion.value);
+                this.input.focus();
+            }
+
+            showStatus(type) {
+                const icon = this.status.querySelector('.status-icon');
+                icon.innerHTML = icons[type];
+                icon.className = `status-icon ${type}`;
+                this.status.classList.add('show');
+            }
+
+            hideStatus() {
+                this.status.classList.remove('show');
+            }
+
+            showHelp(text) {
+                this.help.querySelector('.help-text').textContent = text;
+                this.help.classList.add('show');
+            }
+
+            hideHelp() {
+                this.help.classList.remove('show');
+            }
+
+            showFormatHint(text) {
+                this.formatHint.textContent = text;
+                this.formatHint.classList.add('show');
+                
+                clearTimeout(this.formatHintTimeout);
+                this.formatHintTimeout = setTimeout(() => {
+                    this.hideFormatHint();
+                }, 2000);
+            }
+
+            hideFormatHint() {
+                this.formatHint.classList.remove('show');
+            }
+        }
+
+        // Email configuration
+        const emailConfig = {
+            minLength: 3,
+            initialHelp: 'Enter a valid email address',
+            validHelp: 'Email address looks good!',
+            invalidHelp: 'Please enter a valid email format',
+            formatHint: 'Auto-formatted',
+            validator: (value) => {
+                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                return {
+                    valid: emailRegex.test(value),
+                    help: value.includes('@') && !value.includes('.') ? 
+                        'Don\'t forget the domain extension (e.g., .com)' : null
+                };
+            },
+            formatter: (value) => {
+                return value.toLowerCase().replace(/\s/g, '');
+            },
+            getSuggestions: (value) => {
+                const domains = [
+                    { domain: 'gmail.com', provider: 'Google' },
+                    { domain: 'outlook.com', provider: 'Microsoft' },
+                    { domain: 'yahoo.com', provider: 'Yahoo' },
+                    { domain: 'icloud.com', provider: 'Apple' },
+                    { domain: 'protonmail.com', provider: 'ProtonMail' }
+                ];
+                
+                if (value.includes('@') && !value.split('@')[1]) {
+                    const [username] = value.split('@');
+                    return domains.map(d => ({
+                        primary: `${username}@${d.domain}`,
+                        secondary: `${d.provider} email`,
+                        value: `${username}@${d.domain}`
+                    }));
+                }
+                
+                return [];
+            }
+        };
+
+        // Phone configuration
+        const phoneConfig = {
+            minLength: 3,
+            initialHelp: 'Enter a phone number',
+            validHelp: 'Phone number is valid',
+            invalidHelp: 'Please enter a valid phone number',
+            formatHint: 'Auto-formatted',
+            validator: (value) => {
+                const digits = value.replace(/\D/g, '');
+                return {
+                    valid: digits.length >= 10 && digits.length <= 15,
+                    help: digits.length < 10 ? 'Phone number too short' : 
+                          digits.length > 15 ? 'Phone number too long' : null
+                };
+            },
+            formatter: (value) => {
+                const digits = value.replace(/\D/g, '');
+                
+                if (digits.length <= 3) return digits;
+                if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+                if (digits.length <= 10) return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+                
+                return `+${digits.slice(0, digits.length - 10)} (${digits.slice(-10, -7)}) ${digits.slice(-7, -4)}-${digits.slice(-4)}`;
+            },
+            getSuggestions: (value) => {
+                const countryCodes = [
+                    { code: '+1', country: 'United States / Canada' },
+                    { code: '+44', country: 'United Kingdom' },
+                    { code: '+33', country: 'France' },
+                    { code: '+49', country: 'Germany' },
+                    { code: '+81', country: 'Japan' }
+                ];
+                
+                if (value === '+' || value.startsWith('+')) {
+                    return countryCodes
+                        .filter(c => c.code.startsWith(value))
+                        .map(c => ({
+                            primary: c.code,
+                            secondary: c.country,
+                            value: c.code + ' '
+                        }));
+                }
+                
+                return [];
+            }
+        };
+
+        // Credit card configuration
+        const cardConfig = {
+            minLength: 4,
+            initialHelp: 'Enter your credit card number',
+            validHelp: 'Card number is valid',
+            invalidHelp: 'Please enter a valid card number',
+            formatHint: 'Formatting applied',
+            validator: (value) => {
+                const digits = value.replace(/\s/g, '');
+                
+                // Basic Luhn algorithm check
+                if (digits.length < 13 || digits.length > 19) {
+                    return { valid: false };
+                }
+                
+                let sum = 0;
+                let isEven = false;
+                
+                for (let i = digits.length - 1; i >= 0; i--) {
+                    let digit = parseInt(digits[i]);
+                    
+                    if (isEven) {
+                        digit *= 2;
+                        if (digit > 9) digit -= 9;
+                    }
+                    
+                    sum += digit;
+                    isEven = !isEven;
+                }
+                
+                return {
+                    valid: sum % 10 === 0,
+                    help: digits.length < 16 ? 'Card number incomplete' : null
+                };
+            },
+            formatter: (value) => {
+                const digits = value.replace(/\s/g, '');
+                const groups = [];
+                
+                // Detect card type and format accordingly
+                if (digits.startsWith('34') || digits.startsWith('37')) {
+                    // American Express: 4-6-5
+                    groups.push(digits.slice(0, 4), digits.slice(4, 10), digits.slice(10, 15));
+                } else {
+                    // Others: 4-4-4-4
+                    for (let i = 0; i < digits.length; i += 4) {
+                        groups.push(digits.slice(i, i + 4));
+                    }
+                }
+                
+                return groups.filter(g => g).join(' ');
+            },
+            getSuggestions: (value) => {
+                const cardTypes = [
+                    { prefix: '4', type: 'Visa', icon: '💳' },
+                    { prefix: '5', type: 'Mastercard', icon: '💳' },
+                    { prefix: '34', type: 'American Express', icon: '💳' },
+                    { prefix: '37', type: 'American Express', icon: '💳' },
+                    { prefix: '6', type: 'Discover', icon: '💳' }
+                ];
+                
+                const digits = value.replace(/\s/g, '');
+                
+                if (digits.length <= 2) {
+                    return cardTypes
+                        .filter(c => c.prefix.startsWith(digits))
+                        .map(c => ({
+                            primary: `${c.icon} ${c.type}`,
+                            secondary: `Starts with ${c.prefix}`,
+                            value: c.prefix
+                        }));
+                }
+                
+                return [];
+            }
+        };
+
+        // Initialize all inputs
+        new InputIntelligence('emailInput', emailConfig);
+        new InputIntelligence('phoneInput', phoneConfig);
+        new InputIntelligence('cardInput', cardConfig);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/themed_hybrid_all/ui_hybrid_3.html b/legacy/themed_hybrid_all/ui_hybrid_3.html
new file mode 100644
index 0000000..7624c55
--- /dev/null
+++ b/legacy/themed_hybrid_all/ui_hybrid_3.html
@@ -0,0 +1,718 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Retro Computing Action Controller</title>
+    <style>
+        /* Retro Terminal Theme */
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            padding: 20px;
+            background: #000000;
+            color: #00ff00;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            line-height: 1.4;
+            overflow-x: hidden;
+        }
+
+        /* CRT Monitor Effect */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(
+                rgba(18, 16, 16, 0) 50%, 
+                rgba(0, 0, 0, 0.25) 50%
+            );
+            background-size: 100% 2px;
+            z-index: 1;
+            pointer-events: none;
+            animation: scanlines 8s linear infinite;
+        }
+
+        @keyframes scanlines {
+            0% { background-position: 0 0; }
+            100% { background-position: 0 10px; }
+        }
+
+        main {
+            position: relative;
+            z-index: 2;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        h1 {
+            color: #00ff00;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            font-size: 1.2em;
+            margin-bottom: 30px;
+            text-shadow: 0 0 10px #00ff00;
+        }
+
+        /* Terminal Container */
+        .terminal-controller {
+            background: #0a0a0a;
+            border: 2px solid #00ff00;
+            border-radius: 8px;
+            padding: 20px;
+            box-shadow: 
+                0 0 20px rgba(0, 255, 0, 0.5),
+                inset 0 0 20px rgba(0, 255, 0, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+
+        /* Terminal Header */
+        .terminal-header {
+            border-bottom: 1px solid #00ff00;
+            padding-bottom: 10px;
+            margin-bottom: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .terminal-title {
+            color: #00ff00;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .terminal-status {
+            display: flex;
+            gap: 10px;
+        }
+
+        .status-indicator {
+            width: 8px;
+            height: 8px;
+            background: #00ff00;
+            border-radius: 50%;
+            box-shadow: 0 0 5px #00ff00;
+            animation: blink 2s infinite;
+        }
+
+        @keyframes blink {
+            0%, 50% { opacity: 1; }
+            51%, 100% { opacity: 0.3; }
+        }
+
+        /* Command History */
+        .command-history {
+            height: 200px;
+            overflow-y: auto;
+            margin-bottom: 20px;
+            padding: 10px;
+            background: rgba(0, 0, 0, 0.5);
+            border: 1px solid #00ff00;
+            font-size: 12px;
+        }
+
+        .command-history::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        .command-history::-webkit-scrollbar-track {
+            background: #0a0a0a;
+        }
+
+        .command-history::-webkit-scrollbar-thumb {
+            background: #00ff00;
+            border-radius: 4px;
+        }
+
+        .history-entry {
+            margin-bottom: 8px;
+            opacity: 0.8;
+        }
+
+        .history-entry.command {
+            color: #00ff00;
+        }
+
+        .history-entry.output {
+            color: #00cc00;
+            padding-left: 20px;
+        }
+
+        .history-entry.error {
+            color: #ff3333;
+            padding-left: 20px;
+        }
+
+        .history-entry.success {
+            color: #00ff00;
+            padding-left: 20px;
+        }
+
+        /* Command Input Area */
+        .command-input-area {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 10px;
+            background: rgba(0, 0, 0, 0.7);
+            border: 1px solid #00ff00;
+            position: relative;
+        }
+
+        .prompt {
+            color: #00ff00;
+            font-weight: bold;
+        }
+
+        .command-display {
+            flex: 1;
+            color: #00ff00;
+            position: relative;
+        }
+
+        .cursor {
+            display: inline-block;
+            width: 8px;
+            height: 14px;
+            background: #00ff00;
+            animation: cursor-blink 1s infinite;
+            vertical-align: text-bottom;
+        }
+
+        @keyframes cursor-blink {
+            0%, 49% { opacity: 1; }
+            50%, 100% { opacity: 0; }
+        }
+
+        /* Action Buttons */
+        .action-buttons {
+            display: flex;
+            gap: 10px;
+            margin-top: 20px;
+        }
+
+        .terminal-button {
+            flex: 1;
+            background: transparent;
+            border: 1px solid #00ff00;
+            color: #00ff00;
+            padding: 12px 20px;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+            text-transform: uppercase;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s;
+        }
+
+        .terminal-button:hover {
+            background: rgba(0, 255, 0, 0.1);
+            box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
+            text-shadow: 0 0 5px #00ff00;
+        }
+
+        .terminal-button:active {
+            transform: scale(0.98);
+        }
+
+        .terminal-button.executing {
+            pointer-events: none;
+            animation: pulse 0.5s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+
+        /* Loading Animation */
+        .loading-animation {
+            display: none;
+            text-align: center;
+            padding: 20px;
+            color: #00ff00;
+        }
+
+        .loading-animation.active {
+            display: block;
+        }
+
+        .loading-bar {
+            width: 100%;
+            height: 20px;
+            border: 1px solid #00ff00;
+            margin: 10px 0;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .loading-progress {
+            height: 100%;
+            background: #00ff00;
+            width: 0%;
+            transition: width 0.3s;
+            box-shadow: 0 0 10px #00ff00;
+        }
+
+        .loading-text {
+            font-size: 12px;
+            margin-top: 10px;
+        }
+
+        /* Confirmation Dialog */
+        .confirmation-dialog {
+            display: none;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: #000000;
+            border: 2px solid #00ff00;
+            padding: 20px;
+            z-index: 10;
+            box-shadow: 0 0 30px rgba(0, 255, 0, 0.8);
+        }
+
+        .confirmation-dialog.active {
+            display: block;
+        }
+
+        .confirmation-message {
+            margin-bottom: 20px;
+            color: #00ff00;
+        }
+
+        .confirmation-prompt {
+            color: #ffff00;
+            margin-bottom: 10px;
+        }
+
+        .confirmation-options {
+            display: flex;
+            gap: 20px;
+            justify-content: center;
+        }
+
+        .confirmation-option {
+            color: #00ff00;
+            cursor: pointer;
+            padding: 5px 10px;
+            border: 1px solid transparent;
+        }
+
+        .confirmation-option:hover {
+            border-color: #00ff00;
+            background: rgba(0, 255, 0, 0.1);
+        }
+
+        /* ASCII Art Elements */
+        .ascii-decoration {
+            color: #00ff00;
+            opacity: 0.3;
+            font-size: 10px;
+            line-height: 1;
+            white-space: pre;
+            margin: 20px 0;
+        }
+
+        /* Sound indicator */
+        .sound-indicator {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            color: #00ff00;
+            font-size: 12px;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+
+        .sound-indicator.active {
+            opacity: 1;
+        }
+
+        /* Glitch effect for errors */
+        @keyframes glitch {
+            0%, 100% { 
+                text-shadow: 
+                    -2px 0 #ff0000,
+                    2px 0 #00ffff;
+            }
+            25% { 
+                text-shadow: 
+                    2px 0 #ff0000,
+                    -2px 0 #00ffff;
+            }
+            50% { 
+                text-shadow: 
+                    -2px 0 #ff0000,
+                    2px 0 #00ffff;
+            }
+        }
+
+        .glitch {
+            animation: glitch 0.5s infinite;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Action Controller - Retro Computing Theme</h1>
+        
+        <div class="terminal-controller">
+            <div class="terminal-header">
+                <div class="terminal-title">SYSTEM TERMINAL v3.1</div>
+                <div class="terminal-status">
+                    <div class="status-indicator"></div>
+                    <div class="status-indicator"></div>
+                    <div class="status-indicator"></div>
+                </div>
+            </div>
+
+            <div class="ascii-decoration">
+╔═══════════════════════════════════════════════════════════════╗
+║  ┌─┐┌─┐┌┬┐┬┌─┐┌┐┌  ┌─┐┌─┐┌┐┌┌┬┐┬─┐┌─┐┬  ┬  ┌─┐┬─┐           ║
+║  ├─┤│   │ ││ ││││  │  │ ││││ │ ├┬┘│ ││  │  ├┤ ├┬┘           ║
+║  ┴ ┴└─┘ ┴ ┴└─┘┘└┘  └─┘└─┘┘└┘ ┴ ┴└─└─┘┴─┘┴─┘└─┘┴└─           ║
+╚═══════════════════════════════════════════════════════════════╝
+            </div>
+
+            <div class="command-history" id="commandHistory">
+                <div class="history-entry command">&gt; SYSTEM INITIALIZED</div>
+                <div class="history-entry output">Ready for commands...</div>
+                <div class="history-entry output">Type 'HELP' for available commands</div>
+            </div>
+
+            <div class="command-input-area">
+                <span class="prompt">&gt;</span>
+                <div class="command-display" id="commandDisplay">
+                    <span id="currentCommand"></span><span class="cursor"></span>
+                </div>
+            </div>
+
+            <div class="loading-animation" id="loadingAnimation">
+                <div>EXECUTING COMMAND...</div>
+                <div class="loading-bar">
+                    <div class="loading-progress" id="loadingProgress"></div>
+                </div>
+                <div class="loading-text" id="loadingText">Processing...</div>
+            </div>
+
+            <div class="action-buttons">
+                <button class="terminal-button" data-command="DEPLOY">
+                    [F1] DEPLOY
+                </button>
+                <button class="terminal-button" data-command="ANALYZE">
+                    [F2] ANALYZE
+                </button>
+                <button class="terminal-button" data-command="BACKUP">
+                    [F3] BACKUP
+                </button>
+                <button class="terminal-button" data-command="SHUTDOWN">
+                    [F4] SHUTDOWN
+                </button>
+            </div>
+
+            <div class="confirmation-dialog" id="confirmationDialog">
+                <div class="confirmation-message" id="confirmMessage"></div>
+                <div class="confirmation-prompt">CONFIRM ACTION? [Y/N]</div>
+                <div class="confirmation-options">
+                    <span class="confirmation-option" id="confirmYes">[Y] YES</span>
+                    <span class="confirmation-option" id="confirmNo">[N] NO</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="sound-indicator" id="soundIndicator">♪ BEEP</div>
+    </main>
+
+    <script>
+        // Terminal State Management
+        const terminal = {
+            history: [],
+            currentCommand: '',
+            isExecuting: false,
+            commandQueue: []
+        };
+
+        // DOM Elements
+        const commandHistory = document.getElementById('commandHistory');
+        const currentCommandEl = document.getElementById('currentCommand');
+        const loadingAnimation = document.getElementById('loadingAnimation');
+        const loadingProgress = document.getElementById('loadingProgress');
+        const loadingText = document.getElementById('loadingText');
+        const confirmationDialog = document.getElementById('confirmationDialog');
+        const confirmMessage = document.getElementById('confirmMessage');
+        const soundIndicator = document.getElementById('soundIndicator');
+
+        // Command Definitions
+        const commands = {
+            DEPLOY: {
+                description: 'Deploy system updates',
+                requiresConfirmation: true,
+                loadingTime: 3000,
+                steps: [
+                    'Initializing deployment sequence...',
+                    'Checking system integrity...',
+                    'Uploading files...',
+                    'Verifying checksums...',
+                    'Deployment complete!'
+                ]
+            },
+            ANALYZE: {
+                description: 'Run system analysis',
+                requiresConfirmation: false,
+                loadingTime: 2000,
+                steps: [
+                    'Starting analysis...',
+                    'Scanning processes...',
+                    'Checking memory usage...',
+                    'Analysis complete!'
+                ]
+            },
+            BACKUP: {
+                description: 'Create system backup',
+                requiresConfirmation: true,
+                loadingTime: 4000,
+                steps: [
+                    'Preparing backup...',
+                    'Compressing data...',
+                    'Writing to storage...',
+                    'Verifying backup integrity...',
+                    'Backup successful!'
+                ]
+            },
+            SHUTDOWN: {
+                description: 'Shutdown system',
+                requiresConfirmation: true,
+                loadingTime: 2000,
+                steps: [
+                    'Initiating shutdown sequence...',
+                    'Saving state...',
+                    'Closing connections...',
+                    'System shutdown complete.'
+                ]
+            }
+        };
+
+        // Sound Effects (using Web Audio API)
+        function playBeep(frequency = 800, duration = 100) {
+            try {
+                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                const oscillator = audioContext.createOscillator();
+                const gainNode = audioContext.createGain();
+                
+                oscillator.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                
+                oscillator.frequency.value = frequency;
+                oscillator.type = 'square';
+                gainNode.gain.value = 0.1;
+                
+                oscillator.start();
+                oscillator.stop(audioContext.currentTime + duration / 1000);
+                
+                // Show sound indicator
+                soundIndicator.classList.add('active');
+                setTimeout(() => soundIndicator.classList.remove('active'), 300);
+            } catch (e) {
+                console.log('Audio not supported');
+            }
+        }
+
+        // Add entry to command history
+        function addHistoryEntry(text, type = 'command') {
+            const entry = document.createElement('div');
+            entry.className = `history-entry ${type}`;
+            entry.textContent = type === 'command' ? `> ${text}` : text;
+            commandHistory.appendChild(entry);
+            commandHistory.scrollTop = commandHistory.scrollHeight;
+            
+            // Add to history array
+            terminal.history.push({ text, type, timestamp: new Date() });
+        }
+
+        // Show loading animation
+        async function showLoading(command) {
+            loadingAnimation.classList.add('active');
+            const steps = commands[command].steps;
+            const stepDuration = commands[command].loadingTime / steps.length;
+            
+            for (let i = 0; i < steps.length; i++) {
+                loadingText.textContent = steps[i];
+                loadingProgress.style.width = `${((i + 1) / steps.length) * 100}%`;
+                playBeep(600 + (i * 100), 50);
+                await new Promise(resolve => setTimeout(resolve, stepDuration));
+            }
+            
+            loadingAnimation.classList.remove('active');
+            loadingProgress.style.width = '0%';
+        }
+
+        // Show confirmation dialog
+        function showConfirmation(command) {
+            return new Promise((resolve) => {
+                confirmMessage.textContent = `Execute ${command} command?`;
+                confirmationDialog.classList.add('active');
+                playBeep(1000, 100);
+                
+                const handleYes = () => {
+                    confirmationDialog.classList.remove('active');
+                    playBeep(1200, 50);
+                    cleanup();
+                    resolve(true);
+                };
+                
+                const handleNo = () => {
+                    confirmationDialog.classList.remove('active');
+                    playBeep(400, 100);
+                    cleanup();
+                    resolve(false);
+                };
+                
+                const handleKeypress = (e) => {
+                    if (e.key.toLowerCase() === 'y') handleYes();
+                    if (e.key.toLowerCase() === 'n') handleNo();
+                };
+                
+                const cleanup = () => {
+                    document.getElementById('confirmYes').removeEventListener('click', handleYes);
+                    document.getElementById('confirmNo').removeEventListener('click', handleNo);
+                    document.removeEventListener('keypress', handleKeypress);
+                };
+                
+                document.getElementById('confirmYes').addEventListener('click', handleYes);
+                document.getElementById('confirmNo').addEventListener('click', handleNo);
+                document.addEventListener('keypress', handleKeypress);
+            });
+        }
+
+        // Execute command
+        async function executeCommand(command) {
+            if (terminal.isExecuting) return;
+            
+            terminal.isExecuting = true;
+            
+            // Add command to history
+            addHistoryEntry(command, 'command');
+            currentCommandEl.textContent = '';
+            
+            // Check if command exists
+            if (!commands[command]) {
+                addHistoryEntry(`ERROR: Unknown command '${command}'`, 'error');
+                document.body.classList.add('glitch');
+                playBeep(200, 200);
+                setTimeout(() => document.body.classList.remove('glitch'), 500);
+                terminal.isExecuting = false;
+                return;
+            }
+            
+            // Show command description
+            addHistoryEntry(commands[command].description, 'output');
+            
+            // Check for confirmation
+            if (commands[command].requiresConfirmation) {
+                const confirmed = await showConfirmation(command);
+                if (!confirmed) {
+                    addHistoryEntry('Command cancelled', 'output');
+                    terminal.isExecuting = false;
+                    return;
+                }
+            }
+            
+            // Execute with loading animation
+            try {
+                await showLoading(command);
+                addHistoryEntry(`${command} executed successfully`, 'success');
+                playBeep(1600, 100);
+                setTimeout(() => playBeep(1800, 100), 150);
+            } catch (error) {
+                addHistoryEntry(`ERROR: ${command} failed - ${error.message}`, 'error');
+                playBeep(300, 300);
+            }
+            
+            terminal.isExecuting = false;
+        }
+
+        // Handle button clicks
+        document.querySelectorAll('.terminal-button').forEach(button => {
+            button.addEventListener('click', async function() {
+                if (terminal.isExecuting) return;
+                
+                const command = this.dataset.command;
+                this.classList.add('executing');
+                await executeCommand(command);
+                this.classList.remove('executing');
+            });
+        });
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', async (e) => {
+            if (terminal.isExecuting) return;
+            
+            // Function key shortcuts
+            if (e.key === 'F1') {
+                e.preventDefault();
+                await executeCommand('DEPLOY');
+            } else if (e.key === 'F2') {
+                e.preventDefault();
+                await executeCommand('ANALYZE');
+            } else if (e.key === 'F3') {
+                e.preventDefault();
+                await executeCommand('BACKUP');
+            } else if (e.key === 'F4') {
+                e.preventDefault();
+                await executeCommand('SHUTDOWN');
+            }
+            
+            // Type command
+            if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+                terminal.currentCommand += e.key.toUpperCase();
+                currentCommandEl.textContent = terminal.currentCommand;
+                playBeep(1000, 30);
+            }
+            
+            // Enter to execute typed command
+            if (e.key === 'Enter' && terminal.currentCommand) {
+                await executeCommand(terminal.currentCommand);
+                terminal.currentCommand = '';
+                currentCommandEl.textContent = '';
+            }
+            
+            // Backspace
+            if (e.key === 'Backspace' && terminal.currentCommand) {
+                terminal.currentCommand = terminal.currentCommand.slice(0, -1);
+                currentCommandEl.textContent = terminal.currentCommand;
+                playBeep(800, 30);
+            }
+        });
+
+        // Initial beep on load
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                playBeep(800, 100);
+                setTimeout(() => playBeep(1000, 100), 150);
+                setTimeout(() => playBeep(1200, 100), 300);
+            }, 500);
+        });
+
+        // Add some random flicker effect
+        setInterval(() => {
+            if (Math.random() > 0.95) {
+                document.body.style.opacity = '0.95';
+                setTimeout(() => {
+                    document.body.style.opacity = '1';
+                }, 50);
+            }
+        }, 3000);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/themed_hybrid_all/ui_hybrid_4.html b/legacy/themed_hybrid_all/ui_hybrid_4.html
new file mode 100644
index 0000000..df7813e
--- /dev/null
+++ b/legacy/themed_hybrid_all/ui_hybrid_4.html
@@ -0,0 +1,1032 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Industrial Design File Manager</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Roboto Mono', monospace;
+            background: #1a1a1a;
+            color: #e0e0e0;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-image: 
+                repeating-linear-gradient(
+                    0deg,
+                    rgba(255,255,255,0.03) 0px,
+                    transparent 1px,
+                    transparent 2px,
+                    rgba(255,255,255,0.03) 3px
+                );
+        }
+        
+        main {
+            width: 100%;
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        
+        h1 {
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 2.5em;
+            text-transform: uppercase;
+            letter-spacing: 3px;
+            color: #ffd600;
+            text-shadow: 0 0 20px rgba(255, 214, 0, 0.5);
+        }
+        
+        .hybrid-component {
+            background: #2a2a2a;
+            border: 3px solid #444;
+            border-radius: 0;
+            padding: 30px;
+            box-shadow: 
+                inset 0 0 30px rgba(0,0,0,0.5),
+                0 0 50px rgba(0,0,0,0.8);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .hybrid-component::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(45deg, #666, #888, #666);
+            z-index: -1;
+        }
+        
+        /* Loading Dock Upload Area */
+        .loading-dock {
+            background: linear-gradient(135deg, #333 0%, #444 100%);
+            border: 2px solid #666;
+            border-radius: 0;
+            padding: 40px;
+            margin-bottom: 30px;
+            position: relative;
+            overflow: hidden;
+            box-shadow: 
+                inset 0 2px 5px rgba(0,0,0,0.5),
+                0 2px 10px rgba(0,0,0,0.3);
+        }
+        
+        .loading-dock::before {
+            content: 'LOADING DOCK - DROP ZONE';
+            position: absolute;
+            top: 10px;
+            left: 20px;
+            font-size: 12px;
+            color: #ffd600;
+            letter-spacing: 2px;
+            font-weight: bold;
+        }
+        
+        .loading-dock::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 10px;
+            background: repeating-linear-gradient(
+                -45deg,
+                #ffd600,
+                #ffd600 10px,
+                #333 10px,
+                #333 20px
+            );
+            animation: hazardStripe 1s linear infinite;
+        }
+        
+        @keyframes hazardStripe {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(20px); }
+        }
+        
+        .upload-area {
+            margin-top: 20px;
+            border: 3px dashed #666;
+            padding: 60px 20px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: rgba(0,0,0,0.2);
+            position: relative;
+        }
+        
+        .upload-area:hover {
+            border-color: #ffd600;
+            background: rgba(255, 214, 0, 0.1);
+            box-shadow: inset 0 0 30px rgba(255, 214, 0, 0.2);
+        }
+        
+        .upload-area.active {
+            border-color: #00ff00;
+            background: rgba(0, 255, 0, 0.1);
+            animation: pulse 0.5s ease-in-out;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.02); }
+        }
+        
+        .upload-icon {
+            font-size: 48px;
+            margin-bottom: 20px;
+            display: block;
+        }
+        
+        /* Mechanical Gauges Progress */
+        .gauge-panel {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+        
+        .gauge {
+            background: #222;
+            border: 3px solid #555;
+            border-radius: 10px;
+            padding: 20px;
+            position: relative;
+            box-shadow: 
+                inset 0 5px 15px rgba(0,0,0,0.5),
+                0 3px 10px rgba(0,0,0,0.3);
+        }
+        
+        .gauge-meter {
+            width: 150px;
+            height: 150px;
+            margin: 0 auto 15px;
+            position: relative;
+            background: 
+                radial-gradient(circle at center, #111 40%, transparent 40%),
+                conic-gradient(from -90deg, #00ff00 0deg, #ffd600 180deg, #ff0000 360deg);
+            border-radius: 50%;
+            box-shadow: 
+                inset 0 0 20px rgba(0,0,0,0.5),
+                0 0 20px rgba(0,0,0,0.3);
+        }
+        
+        .gauge-needle {
+            position: absolute;
+            width: 4px;
+            height: 60px;
+            background: #fff;
+            top: 50%;
+            left: 50%;
+            transform-origin: bottom center;
+            transform: translateX(-50%) translateY(-100%) rotate(-90deg);
+            transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+            box-shadow: 0 0 10px rgba(255,255,255,0.5);
+        }
+        
+        .gauge-needle::after {
+            content: '';
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: #666;
+            border-radius: 50%;
+            bottom: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
+        }
+        
+        .gauge-label {
+            text-align: center;
+            font-size: 12px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            color: #999;
+        }
+        
+        .gauge-value {
+            text-align: center;
+            font-size: 24px;
+            font-weight: bold;
+            color: #ffd600;
+            margin-top: 5px;
+        }
+        
+        /* Inspection Window Preview */
+        .inspection-window {
+            background: #1a1a1a;
+            border: 3px solid #555;
+            padding: 20px;
+            margin-bottom: 30px;
+            position: relative;
+            min-height: 300px;
+            box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
+        }
+        
+        .inspection-header {
+            background: linear-gradient(90deg, #444 0%, #555 50%, #444 100%);
+            margin: -20px -20px 20px;
+            padding: 15px 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 2px solid #666;
+        }
+        
+        .inspection-title {
+            font-weight: bold;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            color: #ffd600;
+        }
+        
+        .inspection-controls {
+            display: flex;
+            gap: 10px;
+        }
+        
+        .control-led {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #00ff00;
+            box-shadow: 0 0 10px currentColor;
+            animation: ledBlink 2s infinite;
+        }
+        
+        .control-led.warning {
+            background: #ffd600;
+            animation-duration: 1s;
+        }
+        
+        .control-led.error {
+            background: #ff0000;
+            animation-duration: 0.5s;
+        }
+        
+        @keyframes ledBlink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.3; }
+        }
+        
+        .preview-content {
+            background: #222;
+            border: 1px solid #444;
+            padding: 20px;
+            min-height: 200px;
+            position: relative;
+            overflow: auto;
+            font-family: monospace;
+            box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
+        }
+        
+        .preview-content img {
+            max-width: 100%;
+            height: auto;
+            display: block;
+            margin: 0 auto;
+        }
+        
+        .preview-grid {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image: 
+                repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 19px, rgba(255,255,255,0.03) 20px),
+                repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 19px, rgba(255,255,255,0.03) 20px);
+            pointer-events: none;
+        }
+        
+        /* Quality Control Validation */
+        .quality-control {
+            background: #2a2a2a;
+            border: 2px solid #555;
+            padding: 20px;
+            margin-bottom: 30px;
+            position: relative;
+        }
+        
+        .qc-header {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        
+        .qc-status {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            background: #333;
+            position: relative;
+            box-shadow: 
+                inset 0 2px 5px rgba(0,0,0,0.5),
+                0 0 20px rgba(0,0,0,0.3);
+        }
+        
+        .qc-status.pass {
+            background: #00ff00;
+            box-shadow: 
+                inset 0 2px 5px rgba(0,0,0,0.3),
+                0 0 20px rgba(0, 255, 0, 0.5);
+        }
+        
+        .qc-status.fail {
+            background: #ff0000;
+            box-shadow: 
+                inset 0 2px 5px rgba(0,0,0,0.3),
+                0 0 20px rgba(255, 0, 0, 0.5);
+        }
+        
+        .qc-checks {
+            display: grid;
+            gap: 10px;
+        }
+        
+        .qc-check {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 10px;
+            background: rgba(0,0,0,0.2);
+            border-left: 3px solid #444;
+            transition: all 0.3s ease;
+        }
+        
+        .qc-check.pass {
+            border-color: #00ff00;
+        }
+        
+        .qc-check.fail {
+            border-color: #ff0000;
+        }
+        
+        .qc-check-icon {
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+        }
+        
+        /* Warehouse Inventory Browser */
+        .inventory-system {
+            background: #1a1a1a;
+            border: 3px solid #555;
+            padding: 0;
+            position: relative;
+            box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
+        }
+        
+        .inventory-header {
+            background: linear-gradient(90deg, #333 0%, #444 50%, #333 100%);
+            padding: 15px 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 2px solid #666;
+        }
+        
+        .inventory-search {
+            background: #222;
+            border: 1px solid #555;
+            padding: 8px 15px;
+            color: #fff;
+            font-family: monospace;
+            width: 300px;
+            outline: none;
+            transition: all 0.3s ease;
+        }
+        
+        .inventory-search:focus {
+            border-color: #ffd600;
+            box-shadow: 0 0 20px rgba(255, 214, 0, 0.2);
+        }
+        
+        .inventory-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+            gap: 15px;
+            padding: 20px;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        
+        .inventory-item {
+            background: #222;
+            border: 2px solid #444;
+            padding: 15px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .inventory-item:hover {
+            border-color: #ffd600;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 20px rgba(255, 214, 0, 0.3);
+        }
+        
+        .inventory-item.selected {
+            border-color: #00ff00;
+            background: rgba(0, 255, 0, 0.1);
+        }
+        
+        .inventory-icon {
+            font-size: 36px;
+            margin-bottom: 10px;
+            display: block;
+        }
+        
+        .inventory-name {
+            font-size: 12px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        
+        .inventory-size {
+            font-size: 10px;
+            color: #999;
+            margin-top: 5px;
+        }
+        
+        /* Conveyor Belt Animation */
+        .conveyor-belt {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 40px;
+            background: #333;
+            overflow: hidden;
+            display: none;
+        }
+        
+        .conveyor-belt.active {
+            display: block;
+        }
+        
+        .conveyor-track {
+            position: absolute;
+            top: 50%;
+            left: -100%;
+            width: 200%;
+            height: 20px;
+            background: repeating-linear-gradient(
+                90deg,
+                #555 0px,
+                #555 20px,
+                #666 20px,
+                #666 40px
+            );
+            animation: conveyorMove 2s linear infinite;
+            transform: translateY(-50%);
+        }
+        
+        @keyframes conveyorMove {
+            0% { transform: translateX(0) translateY(-50%); }
+            100% { transform: translateX(40px) translateY(-50%); }
+        }
+        
+        .file-package {
+            position: absolute;
+            width: 60px;
+            height: 30px;
+            background: #ffd600;
+            border: 2px solid #333;
+            top: 50%;
+            transform: translateY(-50%);
+            animation: packageMove 3s linear;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+        }
+        
+        @keyframes packageMove {
+            0% { left: -60px; }
+            100% { left: 100%; }
+        }
+        
+        /* Utility Classes */
+        .hidden {
+            display: none;
+        }
+        
+        .btn {
+            background: #444;
+            border: 2px solid #666;
+            color: #fff;
+            padding: 10px 20px;
+            cursor: pointer;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-weight: bold;
+            transition: all 0.3s ease;
+            outline: none;
+        }
+        
+        .btn:hover {
+            background: #555;
+            border-color: #ffd600;
+            box-shadow: 0 0 20px rgba(255, 214, 0, 0.3);
+        }
+        
+        .btn:active {
+            transform: translateY(1px);
+        }
+        
+        /* Scrollbar Styling */
+        ::-webkit-scrollbar {
+            width: 10px;
+            height: 10px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: #222;
+            border: 1px solid #444;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: #555;
+            border: 1px solid #666;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: #666;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>File Manager - Industrial Design Theme</h1>
+        
+        <div class="hybrid-component">
+            <!-- Loading Dock Upload Area -->
+            <div class="loading-dock">
+                <div class="upload-area" id="uploadArea">
+                    <span class="upload-icon">📦</span>
+                    <p style="font-size: 18px; font-weight: bold; margin-bottom: 10px;">DROP CARGO HERE</p>
+                    <p style="color: #999;">or click to select files</p>
+                    <input type="file" id="fileInput" multiple style="display: none;">
+                </div>
+                <div class="conveyor-belt" id="conveyorBelt">
+                    <div class="conveyor-track"></div>
+                </div>
+            </div>
+            
+            <!-- Mechanical Gauges Progress Panel -->
+            <div class="gauge-panel" id="gaugePanel" style="display: none;">
+                <div class="gauge">
+                    <div class="gauge-meter">
+                        <div class="gauge-needle" id="uploadGauge"></div>
+                    </div>
+                    <div class="gauge-label">Upload Progress</div>
+                    <div class="gauge-value" id="uploadValue">0%</div>
+                </div>
+                
+                <div class="gauge">
+                    <div class="gauge-meter">
+                        <div class="gauge-needle" id="speedGauge"></div>
+                    </div>
+                    <div class="gauge-label">Transfer Speed</div>
+                    <div class="gauge-value" id="speedValue">0 MB/s</div>
+                </div>
+                
+                <div class="gauge">
+                    <div class="gauge-meter">
+                        <div class="gauge-needle" id="qualityGauge"></div>
+                    </div>
+                    <div class="gauge-label">Quality Score</div>
+                    <div class="gauge-value" id="qualityValue">100%</div>
+                </div>
+            </div>
+            
+            <!-- Inspection Window Preview -->
+            <div class="inspection-window" id="inspectionWindow" style="display: none;">
+                <div class="inspection-header">
+                    <div class="inspection-title">INSPECTION VIEWPORT</div>
+                    <div class="inspection-controls">
+                        <div class="control-led" id="statusLed"></div>
+                        <div class="control-led warning"></div>
+                        <div class="control-led error"></div>
+                    </div>
+                </div>
+                <div class="preview-content" id="previewContent">
+                    <div class="preview-grid"></div>
+                    <p style="color: #666; text-align: center; line-height: 160px;">No file selected for inspection</p>
+                </div>
+            </div>
+            
+            <!-- Quality Control Validation -->
+            <div class="quality-control" id="qualityControl" style="display: none;">
+                <div class="qc-header">
+                    <div class="qc-status" id="qcStatus"></div>
+                    <h3 style="text-transform: uppercase; letter-spacing: 2px;">QUALITY CONTROL CHECKPOINT</h3>
+                </div>
+                <div class="qc-checks" id="qcChecks">
+                    <div class="qc-check" id="sizeCheck">
+                        <span class="qc-check-icon">⚙️</span>
+                        <span>File Size: <span id="sizeCheckValue">--</span></span>
+                    </div>
+                    <div class="qc-check" id="typeCheck">
+                        <span class="qc-check-icon">📋</span>
+                        <span>File Type: <span id="typeCheckValue">--</span></span>
+                    </div>
+                    <div class="qc-check" id="nameCheck">
+                        <span class="qc-check-icon">🏷️</span>
+                        <span>File Name: <span id="nameCheckValue">--</span></span>
+                    </div>
+                    <div class="qc-check" id="integrityCheck">
+                        <span class="qc-check-icon">🔒</span>
+                        <span>Integrity: <span id="integrityCheckValue">--</span></span>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Warehouse Inventory Browser -->
+            <div class="inventory-system">
+                <div class="inventory-header">
+                    <h3 style="text-transform: uppercase; letter-spacing: 2px; color: #ffd600;">WAREHOUSE INVENTORY</h3>
+                    <input type="text" class="inventory-search" id="inventorySearch" placeholder="SEARCH INVENTORY...">
+                </div>
+                <div class="inventory-grid" id="inventoryGrid">
+                    <!-- Inventory items will be dynamically added here -->
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Industrial File Manager System
+        class IndustrialFileManager {
+            constructor() {
+                this.files = [];
+                this.selectedFiles = new Set();
+                this.uploadProgress = 0;
+                this.initializeComponents();
+                this.bindEvents();
+                this.loadSampleInventory();
+                this.playMechanicalSound();
+            }
+            
+            initializeComponents() {
+                this.uploadArea = document.getElementById('uploadArea');
+                this.fileInput = document.getElementById('fileInput');
+                this.conveyorBelt = document.getElementById('conveyorBelt');
+                this.gaugePanel = document.getElementById('gaugePanel');
+                this.inspectionWindow = document.getElementById('inspectionWindow');
+                this.qualityControl = document.getElementById('qualityControl');
+                this.inventoryGrid = document.getElementById('inventoryGrid');
+                this.inventorySearch = document.getElementById('inventorySearch');
+                this.previewContent = document.getElementById('previewContent');
+                
+                // Gauge elements
+                this.uploadGauge = document.getElementById('uploadGauge');
+                this.speedGauge = document.getElementById('speedGauge');
+                this.qualityGauge = document.getElementById('qualityGauge');
+                this.uploadValue = document.getElementById('uploadValue');
+                this.speedValue = document.getElementById('speedValue');
+                this.qualityValue = document.getElementById('qualityValue');
+                
+                // QC elements
+                this.qcStatus = document.getElementById('qcStatus');
+                this.qcChecks = {
+                    size: document.getElementById('sizeCheck'),
+                    type: document.getElementById('typeCheck'),
+                    name: document.getElementById('nameCheck'),
+                    integrity: document.getElementById('integrityCheck')
+                };
+            }
+            
+            bindEvents() {
+                // Upload area events
+                this.uploadArea.addEventListener('click', () => this.fileInput.click());
+                this.fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
+                
+                // Drag and drop
+                this.uploadArea.addEventListener('dragover', (e) => {
+                    e.preventDefault();
+                    this.uploadArea.classList.add('active');
+                });
+                
+                this.uploadArea.addEventListener('dragleave', () => {
+                    this.uploadArea.classList.remove('active');
+                });
+                
+                this.uploadArea.addEventListener('drop', (e) => {
+                    e.preventDefault();
+                    this.uploadArea.classList.remove('active');
+                    this.handleFileSelect({ target: { files: e.dataTransfer.files } });
+                });
+                
+                // Inventory search
+                this.inventorySearch.addEventListener('input', (e) => {
+                    this.filterInventory(e.target.value);
+                });
+            }
+            
+            handleFileSelect(event) {
+                const files = Array.from(event.target.files);
+                if (files.length === 0) return;
+                
+                // Start conveyor belt animation
+                this.startConveyorBelt();
+                
+                // Show progress gauges
+                this.gaugePanel.style.display = 'grid';
+                
+                // Process each file
+                files.forEach((file, index) => {
+                    setTimeout(() => {
+                        this.processFile(file);
+                    }, index * 1000);
+                });
+                
+                // Simulate upload progress
+                this.simulateUpload();
+            }
+            
+            startConveyorBelt() {
+                this.conveyorBelt.classList.add('active');
+                
+                // Add package animation
+                const package = document.createElement('div');
+                package.className = 'file-package';
+                this.conveyorBelt.appendChild(package);
+                
+                setTimeout(() => {
+                    package.remove();
+                    this.conveyorBelt.classList.remove('active');
+                }, 3000);
+            }
+            
+            processFile(file) {
+                // Add to inventory
+                this.addToInventory(file);
+                
+                // Show inspection window
+                this.inspectionWindow.style.display = 'block';
+                this.inspectFile(file);
+                
+                // Run quality control
+                this.qualityControl.style.display = 'block';
+                this.runQualityControl(file);
+            }
+            
+            simulateUpload() {
+                let progress = 0;
+                const interval = setInterval(() => {
+                    progress += Math.random() * 15;
+                    if (progress > 100) progress = 100;
+                    
+                    // Update upload gauge
+                    const uploadAngle = (progress / 100) * 270 - 135;
+                    this.uploadGauge.style.transform = `translateX(-50%) translateY(-100%) rotate(${uploadAngle}deg)`;
+                    this.uploadValue.textContent = `${Math.round(progress)}%`;
+                    
+                    // Update speed gauge (simulate varying speeds)
+                    const speed = Math.random() * 50 + 10;
+                    const speedAngle = (speed / 60) * 270 - 135;
+                    this.speedGauge.style.transform = `translateX(-50%) translateY(-100%) rotate(${speedAngle}deg)`;
+                    this.speedValue.textContent = `${speed.toFixed(1)} MB/s`;
+                    
+                    // Update quality gauge
+                    const quality = 90 + Math.random() * 10;
+                    const qualityAngle = (quality / 100) * 270 - 135;
+                    this.qualityGauge.style.transform = `translateX(-50%) translateY(-100%) rotate(${qualityAngle}deg)`;
+                    this.qualityValue.textContent = `${Math.round(quality)}%`;
+                    
+                    if (progress >= 100) {
+                        clearInterval(interval);
+                        this.playSuccessSound();
+                    }
+                }, 200);
+            }
+            
+            inspectFile(file) {
+                const previewContent = document.getElementById('previewContent');
+                previewContent.innerHTML = '<div class="preview-grid"></div>';
+                
+                if (file.type.startsWith('image/')) {
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        const img = document.createElement('img');
+                        img.src = e.target.result;
+                        previewContent.appendChild(img);
+                    };
+                    reader.readAsDataURL(file);
+                } else if (file.type.startsWith('text/')) {
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        const pre = document.createElement('pre');
+                        pre.style.color = '#0f0';
+                        pre.style.fontSize = '12px';
+                        pre.textContent = e.target.result.substring(0, 1000) + '...';
+                        previewContent.appendChild(pre);
+                    };
+                    reader.readAsText(file);
+                } else {
+                    previewContent.innerHTML += `
+                        <div style="text-align: center; padding: 40px;">
+                            <div style="font-size: 64px; margin-bottom: 20px;">📄</div>
+                            <p style="font-size: 18px; color: #ffd600;">${file.name}</p>
+                            <p style="color: #999; margin-top: 10px;">Type: ${file.type || 'Unknown'}</p>
+                            <p style="color: #999;">Size: ${this.formatFileSize(file.size)}</p>
+                        </div>
+                    `;
+                }
+            }
+            
+            runQualityControl(file) {
+                const checks = {
+                    size: file.size < 10 * 1024 * 1024, // Less than 10MB
+                    type: this.isValidFileType(file.type),
+                    name: this.isValidFileName(file.name),
+                    integrity: Math.random() > 0.1 // Simulate integrity check
+                };
+                
+                // Update size check
+                document.getElementById('sizeCheckValue').textContent = this.formatFileSize(file.size);
+                this.updateCheckStatus('size', checks.size);
+                
+                // Update type check
+                document.getElementById('typeCheckValue').textContent = file.type || 'Unknown';
+                this.updateCheckStatus('type', checks.type);
+                
+                // Update name check
+                document.getElementById('nameCheckValue').textContent = file.name;
+                this.updateCheckStatus('name', checks.name);
+                
+                // Update integrity check
+                document.getElementById('integrityCheckValue').textContent = checks.integrity ? 'PASSED' : 'FAILED';
+                this.updateCheckStatus('integrity', checks.integrity);
+                
+                // Update overall QC status
+                const allPassed = Object.values(checks).every(check => check);
+                this.qcStatus.className = `qc-status ${allPassed ? 'pass' : 'fail'}`;
+                
+                // Update status LED
+                const statusLed = document.getElementById('statusLed');
+                statusLed.className = `control-led ${allPassed ? '' : 'error'}`;
+            }
+            
+            updateCheckStatus(checkName, passed) {
+                const checkElement = this.qcChecks[checkName];
+                checkElement.className = `qc-check ${passed ? 'pass' : 'fail'}`;
+                const icon = checkElement.querySelector('.qc-check-icon');
+                icon.textContent = passed ? '✓' : '✗';
+            }
+            
+            isValidFileType(type) {
+                const validTypes = [
+                    'image/', 'text/', 'application/pdf', 
+                    'application/zip', 'application/json'
+                ];
+                return validTypes.some(validType => type.startsWith(validType));
+            }
+            
+            isValidFileName(name) {
+                // Check for invalid characters
+                const invalidChars = /[<>:"|?*]/;
+                return !invalidChars.test(name) && name.length < 255;
+            }
+            
+            addToInventory(file) {
+                const fileId = Date.now() + Math.random();
+                const fileData = {
+                    id: fileId,
+                    name: file.name,
+                    size: file.size,
+                    type: file.type,
+                    icon: this.getFileIcon(file.type),
+                    timestamp: new Date()
+                };
+                
+                this.files.push(fileData);
+                this.renderInventoryItem(fileData);
+            }
+            
+            loadSampleInventory() {
+                const sampleFiles = [
+                    { name: 'blueprint.pdf', size: 2048000, type: 'application/pdf', icon: '📐' },
+                    { name: 'specs.txt', size: 15360, type: 'text/plain', icon: '📝' },
+                    { name: 'motor.jpg', size: 512000, type: 'image/jpeg', icon: '🖼️' },
+                    { name: 'data.json', size: 8192, type: 'application/json', icon: '📊' },
+                    { name: 'archive.zip', size: 4096000, type: 'application/zip', icon: '📦' },
+                    { name: 'manual.pdf', size: 1024000, type: 'application/pdf', icon: '📚' }
+                ];
+                
+                sampleFiles.forEach((file, index) => {
+                    const fileData = {
+                        id: index,
+                        ...file,
+                        timestamp: new Date(Date.now() - Math.random() * 86400000)
+                    };
+                    this.files.push(fileData);
+                    this.renderInventoryItem(fileData);
+                });
+            }
+            
+            renderInventoryItem(fileData) {
+                const item = document.createElement('div');
+                item.className = 'inventory-item';
+                item.dataset.fileId = fileData.id;
+                item.innerHTML = `
+                    <span class="inventory-icon">${fileData.icon}</span>
+                    <div class="inventory-name" title="${fileData.name}">${fileData.name}</div>
+                    <div class="inventory-size">${this.formatFileSize(fileData.size)}</div>
+                `;
+                
+                item.addEventListener('click', () => {
+                    this.selectInventoryItem(item, fileData);
+                });
+                
+                this.inventoryGrid.appendChild(item);
+            }
+            
+            selectInventoryItem(item, fileData) {
+                // Toggle selection
+                if (item.classList.contains('selected')) {
+                    item.classList.remove('selected');
+                    this.selectedFiles.delete(fileData.id);
+                } else {
+                    item.classList.add('selected');
+                    this.selectedFiles.add(fileData.id);
+                }
+                
+                // Trigger mechanical sound
+                this.playClickSound();
+                
+                // Update preview if single selection
+                if (this.selectedFiles.size === 1) {
+                    this.inspectFile(fileData);
+                }
+            }
+            
+            filterInventory(searchTerm) {
+                const items = this.inventoryGrid.querySelectorAll('.inventory-item');
+                const term = searchTerm.toLowerCase();
+                
+                items.forEach(item => {
+                    const name = item.querySelector('.inventory-name').textContent.toLowerCase();
+                    if (name.includes(term)) {
+                        item.style.display = 'block';
+                    } else {
+                        item.style.display = 'none';
+                    }
+                });
+            }
+            
+            getFileIcon(type) {
+                if (type.startsWith('image/')) return '🖼️';
+                if (type.startsWith('text/')) return '📝';
+                if (type.includes('pdf')) return '📄';
+                if (type.includes('zip')) return '📦';
+                if (type.includes('json')) return '📊';
+                return '📎';
+            }
+            
+            formatFileSize(bytes) {
+                if (bytes === 0) return '0 Bytes';
+                const k = 1024;
+                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+                const i = Math.floor(Math.log(bytes) / Math.log(k));
+                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+            }
+            
+            // Sound effects (simulated with console logs)
+            playMechanicalSound() {
+                console.log('🔧 *mechanical whirring*');
+            }
+            
+            playClickSound() {
+                console.log('⚙️ *click*');
+            }
+            
+            playSuccessSound() {
+                console.log('✅ *ding!*');
+            }
+        }
+        
+        // Initialize the industrial file manager
+        const fileManager = new IndustrialFileManager();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/themed_hybrid_all/ui_hybrid_5.html b/legacy/themed_hybrid_all/ui_hybrid_5.html
new file mode 100644
index 0000000..4f1c331
--- /dev/null
+++ b/legacy/themed_hybrid_all/ui_hybrid_5.html
@@ -0,0 +1,854 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zen Philosophy Navigation Center</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            /* Zen color palette - calm, muted tones */
+            --zen-white: #fafaf8;
+            --zen-sand: #e8e3da;
+            --zen-stone: #b8b2a6;
+            --zen-moss: #7a8672;
+            --zen-water: #6b7f8c;
+            --zen-shadow: #4a4a48;
+            --zen-ink: #2c2c2a;
+            
+            /* Breathing animation timing */
+            --breathe-in: 3s;
+            --breathe-out: 4s;
+            --transition-flow: cubic-bezier(0.4, 0.0, 0.2, 1);
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: linear-gradient(135deg, var(--zen-white) 0%, var(--zen-sand) 100%);
+            color: var(--zen-ink);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        main {
+            width: 100%;
+            max-width: 1200px;
+        }
+
+        h1 {
+            text-align: center;
+            font-weight: 300;
+            font-size: 2rem;
+            color: var(--zen-shadow);
+            margin-bottom: 3rem;
+            letter-spacing: 0.1em;
+        }
+
+        /* Navigation Center Container */
+        .navigation-center {
+            background: var(--zen-white);
+            border-radius: 20px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
+            padding: 2rem;
+            position: relative;
+            overflow: hidden;
+        }
+
+        /* Zen decoration - subtle circle pattern */
+        .navigation-center::before {
+            content: '';
+            position: absolute;
+            width: 300px;
+            height: 300px;
+            border-radius: 50%;
+            background: radial-gradient(circle, transparent 60%, var(--zen-sand) 100%);
+            top: -150px;
+            right: -150px;
+            opacity: 0.3;
+            animation: breathe var(--breathe-in) ease-in-out infinite alternate;
+        }
+
+        @keyframes breathe {
+            0% { transform: scale(1); opacity: 0.3; }
+            100% { transform: scale(1.1); opacity: 0.2; }
+        }
+
+        /* Top Section - Search and Actions */
+        .nav-top {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 2rem;
+            align-items: center;
+        }
+
+        /* Search as Mindful Exploration */
+        .search-container {
+            flex: 1;
+            position: relative;
+        }
+
+        .search-input {
+            width: 100%;
+            padding: 1rem 3rem 1rem 1.5rem;
+            border: 2px solid transparent;
+            background: var(--zen-sand);
+            border-radius: 30px;
+            font-size: 1rem;
+            color: var(--zen-ink);
+            transition: all 0.4s var(--transition-flow);
+        }
+
+        .search-input:focus {
+            outline: none;
+            background: var(--zen-white);
+            border-color: var(--zen-stone);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+        }
+
+        .search-input::placeholder {
+            color: var(--zen-stone);
+        }
+
+        .search-icon {
+            position: absolute;
+            right: 1.5rem;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--zen-stone);
+            pointer-events: none;
+            transition: color 0.4s var(--transition-flow);
+        }
+
+        .search-input:focus + .search-icon {
+            color: var(--zen-moss);
+        }
+
+        /* Quick Actions as Zen Shortcuts */
+        .quick-actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .action-stone {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            background: var(--zen-sand);
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--zen-shadow);
+            transition: all 0.3s var(--transition-flow);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .action-stone:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            background: var(--zen-stone);
+            color: var(--zen-white);
+        }
+
+        .action-stone::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(circle at center, var(--zen-water) 0%, transparent 70%);
+            opacity: 0;
+            transition: opacity 0.6s ease;
+        }
+
+        .action-stone:active::after {
+            opacity: 0.3;
+            animation: ripple 0.6s ease-out;
+        }
+
+        @keyframes ripple {
+            0% { transform: scale(0); }
+            100% { transform: scale(2); }
+        }
+
+        /* Breadcrumbs as Stepping Path */
+        .stepping-path {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 2rem;
+            padding: 1rem;
+            background: linear-gradient(90deg, var(--zen-sand) 0%, transparent 100%);
+            border-radius: 10px;
+            overflow-x: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--zen-stone) transparent;
+        }
+
+        .path-stone {
+            white-space: nowrap;
+            color: var(--zen-shadow);
+            text-decoration: none;
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            transition: all 0.3s var(--transition-flow);
+            position: relative;
+        }
+
+        .path-stone:hover {
+            background: var(--zen-white);
+            color: var(--zen-moss);
+        }
+
+        .path-divider {
+            color: var(--zen-stone);
+            font-size: 0.8rem;
+        }
+
+        .path-stone.current {
+            background: var(--zen-moss);
+            color: var(--zen-white);
+        }
+
+        /* Tabs as Meditation Stones */
+        .meditation-stones {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 2rem;
+            padding: 1rem;
+            background: var(--zen-sand);
+            border-radius: 15px;
+            overflow-x: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--zen-stone) transparent;
+        }
+
+        .stone-tab {
+            padding: 1rem 2rem;
+            border: none;
+            background: var(--zen-white);
+            border-radius: 30px;
+            cursor: pointer;
+            color: var(--zen-shadow);
+            font-size: 1rem;
+            white-space: nowrap;
+            transition: all 0.4s var(--transition-flow);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .stone-tab::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(135deg, var(--zen-moss) 0%, var(--zen-water) 100%);
+            opacity: 0;
+            transition: opacity 0.4s var(--transition-flow);
+        }
+
+        .stone-tab:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+        }
+
+        .stone-tab.active {
+            color: var(--zen-white);
+        }
+
+        .stone-tab.active::before {
+            opacity: 1;
+        }
+
+        .stone-tab span {
+            position: relative;
+            z-index: 1;
+        }
+
+        /* Content Area */
+        .content-garden {
+            background: var(--zen-white);
+            border-radius: 15px;
+            padding: 2rem;
+            min-height: 300px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .content-section {
+            display: none;
+            animation: fadeInUp 0.6s var(--transition-flow);
+        }
+
+        .content-section.active {
+            display: block;
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* State Memory Indicator */
+        .consciousness-indicator {
+            position: absolute;
+            bottom: 2rem;
+            right: 2rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.75rem 1.5rem;
+            background: var(--zen-sand);
+            border-radius: 20px;
+            font-size: 0.9rem;
+            color: var(--zen-shadow);
+            opacity: 0;
+            transform: translateY(10px);
+            transition: all 0.4s var(--transition-flow);
+        }
+
+        .consciousness-indicator.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .consciousness-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--zen-moss);
+            animation: pulse 2s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 0.4; transform: scale(1); }
+            50% { opacity: 1; transform: scale(1.2); }
+        }
+
+        /* Search Results Dropdown */
+        .search-results {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            margin-top: 0.5rem;
+            background: var(--zen-white);
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            max-height: 300px;
+            overflow-y: auto;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-10px);
+            transition: all 0.3s var(--transition-flow);
+            z-index: 10;
+        }
+
+        .search-results.visible {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
+
+        .search-result {
+            padding: 1rem 1.5rem;
+            cursor: pointer;
+            transition: background 0.2s ease;
+            border-bottom: 1px solid var(--zen-sand);
+        }
+
+        .search-result:last-child {
+            border-bottom: none;
+        }
+
+        .search-result:hover {
+            background: var(--zen-sand);
+        }
+
+        .search-result-title {
+            font-weight: 500;
+            color: var(--zen-ink);
+            margin-bottom: 0.25rem;
+        }
+
+        .search-result-path {
+            font-size: 0.85rem;
+            color: var(--zen-stone);
+        }
+
+        /* Tooltip for actions */
+        .tooltip {
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%) translateY(-5px);
+            background: var(--zen-ink);
+            color: var(--zen-white);
+            padding: 0.5rem 1rem;
+            border-radius: 8px;
+            font-size: 0.85rem;
+            white-space: nowrap;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s var(--transition-flow);
+            pointer-events: none;
+        }
+
+        .action-stone:hover .tooltip {
+            opacity: 1;
+            visibility: visible;
+            transform: translateX(-50%) translateY(-10px);
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .nav-top {
+                flex-direction: column;
+            }
+
+            .quick-actions {
+                width: 100%;
+                justify-content: center;
+            }
+
+            .meditation-stones {
+                gap: 0.5rem;
+                padding: 0.75rem;
+            }
+
+            .stone-tab {
+                padding: 0.75rem 1.5rem;
+                font-size: 0.9rem;
+            }
+
+            .consciousness-indicator {
+                bottom: 1rem;
+                right: 1rem;
+                font-size: 0.8rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Navigation Center - Zen Philosophy Theme</h1>
+        
+        <div class="navigation-center">
+            <!-- Top Section with Search and Quick Actions -->
+            <div class="nav-top">
+                <div class="search-container">
+                    <input 
+                        type="text" 
+                        class="search-input" 
+                        placeholder="Begin your mindful exploration..."
+                        id="searchInput"
+                    >
+                    <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <path d="m21 21-4.35-4.35"></path>
+                    </svg>
+                    <div class="search-results" id="searchResults">
+                        <!-- Search results will be populated here -->
+                    </div>
+                </div>
+                
+                <div class="quick-actions">
+                    <button class="action-stone" data-action="home">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+                            <polyline points="9 22 9 12 15 12 15 22"></polyline>
+                        </svg>
+                        <span class="tooltip">Return to beginning</span>
+                    </button>
+                    <button class="action-stone" data-action="bookmark">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+                        </svg>
+                        <span class="tooltip">Mark this moment</span>
+                    </button>
+                    <button class="action-stone" data-action="settings">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="3"></circle>
+                            <path d="M12 1v6m0 6v6m11-11h-6m-6 0H1"></path>
+                        </svg>
+                        <span class="tooltip">Adjust your path</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Breadcrumbs as Stepping Path -->
+            <div class="stepping-path" id="steppingPath">
+                <a href="#" class="path-stone" data-path="root">Garden</a>
+                <span class="path-divider">›</span>
+                <a href="#" class="path-stone" data-path="meditation">Meditation</a>
+                <span class="path-divider">›</span>
+                <a href="#" class="path-stone current" data-path="breathing">Breathing</a>
+            </div>
+
+            <!-- Tabs as Meditation Stones -->
+            <div class="meditation-stones" id="meditationStones">
+                <button class="stone-tab active" data-tab="breathing">
+                    <span>Breathing</span>
+                </button>
+                <button class="stone-tab" data-tab="mindfulness">
+                    <span>Mindfulness</span>
+                </button>
+                <button class="stone-tab" data-tab="movement">
+                    <span>Movement</span>
+                </button>
+                <button class="stone-tab" data-tab="reflection">
+                    <span>Reflection</span>
+                </button>
+                <button class="stone-tab" data-tab="wisdom">
+                    <span>Wisdom</span>
+                </button>
+            </div>
+
+            <!-- Content Area -->
+            <div class="content-garden">
+                <div class="content-section active" data-content="breathing">
+                    <h2>The Art of Breathing</h2>
+                    <p>In the garden of consciousness, breath is the first step on the path to awareness. Each inhale brings new possibilities, each exhale releases what no longer serves.</p>
+                    <br>
+                    <p>Begin with simple observation. Notice the natural rhythm without forcing change. Like water finding its level, let your breath find its own peaceful cadence.</p>
+                    <br>
+                    <p>Practice the 4-7-8 technique: Inhale for 4 counts, hold for 7, exhale for 8. This ancient pattern calms the mind and prepares the spirit for deeper meditation.</p>
+                </div>
+
+                <div class="content-section" data-content="mindfulness">
+                    <h2>Present Moment Awareness</h2>
+                    <p>Mindfulness is the art of being fully present. Like a still pond reflecting the sky, the mindful mind mirrors reality without distortion.</p>
+                    <br>
+                    <p>Start with your senses. What do you see, hear, feel in this exact moment? Each sensation is a doorway to presence, a bridge from thinking to being.</p>
+                    <br>
+                    <p>When thoughts arise, observe them like clouds passing through an empty sky. No need to grasp or push away - simply witness and return to now.</p>
+                </div>
+
+                <div class="content-section" data-content="movement">
+                    <h2>Meditation in Motion</h2>
+                    <p>Movement meditation transforms everyday actions into spiritual practice. Walking, stretching, even washing dishes can become paths to enlightenment.</p>
+                    <br>
+                    <p>Try walking meditation: Each step deliberate, each movement conscious. Feel the earth beneath your feet, the air around your body. This is moving zen.</p>
+                    <br>
+                    <p>Gentle yoga or tai chi brings harmony between body and mind. Flow like water, bend like bamboo - strength through flexibility, power through peace.</p>
+                </div>
+
+                <div class="content-section" data-content="reflection">
+                    <h2>The Mirror of Self</h2>
+                    <p>Reflection deepens understanding. Like a mountain lake that reveals both surface and depths, contemplation shows us who we truly are.</p>
+                    <br>
+                    <p>Journal your thoughts without judgment. Let words flow like a stream, carrying insights from the depths of consciousness to the light of awareness.</p>
+                    <br>
+                    <p>Ask yourself: What am I grateful for today? What lessons has life offered? In quiet reflection, wisdom emerges naturally, like flowers blooming in their season.</p>
+                </div>
+
+                <div class="content-section" data-content="wisdom">
+                    <h2>Ancient Teachings</h2>
+                    <p>"The pine teaches silence, the rock teaches patience, the water teaches persistence." These natural teachers surround us, offering lessons to those who listen.</p>
+                    <br>
+                    <p>Zen masters remind us: "Before enlightenment, chop wood, carry water. After enlightenment, chop wood, carry water." Profound truth lives in simple actions.</p>
+                    <br>
+                    <p>Study the wisdom traditions not as dogma but as maps. Each tradition offers a different path up the same mountain. Find the way that resonates with your spirit.</p>
+                </div>
+            </div>
+
+            <!-- State Memory Indicator -->
+            <div class="consciousness-indicator" id="consciousnessIndicator">
+                <span class="consciousness-dot"></span>
+                <span>State remembered</span>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // State Management - Conscious Awareness
+        class NavigationState {
+            constructor() {
+                this.state = this.loadState() || {
+                    currentTab: 'breathing',
+                    breadcrumbs: ['root', 'meditation', 'breathing'],
+                    searchHistory: [],
+                    bookmarks: [],
+                    lastVisit: Date.now()
+                };
+                this.saveStateDebounced = this.debounce(this.saveState.bind(this), 1000);
+            }
+
+            loadState() {
+                try {
+                    const saved = localStorage.getItem('zenNavState');
+                    return saved ? JSON.parse(saved) : null;
+                } catch (e) {
+                    return null;
+                }
+            }
+
+            saveState() {
+                try {
+                    localStorage.setItem('zenNavState', JSON.stringify(this.state));
+                    this.showConsciousnessIndicator();
+                } catch (e) {
+                    console.error('Could not save state:', e);
+                }
+            }
+
+            showConsciousnessIndicator() {
+                const indicator = document.getElementById('consciousnessIndicator');
+                indicator.classList.add('visible');
+                setTimeout(() => {
+                    indicator.classList.remove('visible');
+                }, 2000);
+            }
+
+            updateTab(tabName) {
+                this.state.currentTab = tabName;
+                this.saveStateDebounced();
+            }
+
+            updateBreadcrumbs(path) {
+                const index = this.state.breadcrumbs.indexOf(path);
+                if (index > -1) {
+                    this.state.breadcrumbs = this.state.breadcrumbs.slice(0, index + 1);
+                } else {
+                    this.state.breadcrumbs.push(path);
+                }
+                this.saveStateDebounced();
+            }
+
+            addSearchTerm(term) {
+                if (!this.state.searchHistory.includes(term)) {
+                    this.state.searchHistory.unshift(term);
+                    this.state.searchHistory = this.state.searchHistory.slice(0, 10);
+                    this.saveStateDebounced();
+                }
+            }
+
+            debounce(func, wait) {
+                let timeout;
+                return function executedFunction(...args) {
+                    const later = () => {
+                        clearTimeout(timeout);
+                        func(...args);
+                    };
+                    clearTimeout(timeout);
+                    timeout = setTimeout(later, wait);
+                };
+            }
+        }
+
+        // Initialize Navigation State
+        const navState = new NavigationState();
+
+        // Tab Navigation - Meditation Stones
+        const tabs = document.querySelectorAll('.stone-tab');
+        const contents = document.querySelectorAll('.content-section');
+
+        function switchTab(tabName) {
+            tabs.forEach(tab => {
+                if (tab.dataset.tab === tabName) {
+                    tab.classList.add('active');
+                } else {
+                    tab.classList.remove('active');
+                }
+            });
+
+            contents.forEach(content => {
+                if (content.dataset.content === tabName) {
+                    content.classList.add('active');
+                } else {
+                    content.classList.remove('active');
+                }
+            });
+
+            navState.updateTab(tabName);
+            updateBreadcrumbsForTab(tabName);
+        }
+
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                switchTab(tab.dataset.tab);
+            });
+        });
+
+        // Breadcrumb Navigation - Stepping Path
+        function updateBreadcrumbsForTab(tabName) {
+            const pathElement = document.getElementById('steppingPath');
+            const newPath = ['root', 'meditation', tabName];
+            
+            pathElement.innerHTML = newPath.map((step, index) => {
+                const isLast = index === newPath.length - 1;
+                const stone = `<a href="#" class="path-stone ${isLast ? 'current' : ''}" data-path="${step}">${step.charAt(0).toUpperCase() + step.slice(1)}</a>`;
+                const divider = isLast ? '' : '<span class="path-divider">›</span>';
+                return stone + divider;
+            }).join('');
+
+            // Re-attach breadcrumb listeners
+            attachBreadcrumbListeners();
+            navState.updateBreadcrumbs(tabName);
+        }
+
+        function attachBreadcrumbListeners() {
+            document.querySelectorAll('.path-stone').forEach(stone => {
+                stone.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    const path = stone.dataset.path;
+                    if (path !== 'root' && path !== 'meditation') {
+                        switchTab(path);
+                    }
+                });
+            });
+        }
+
+        // Search Functionality - Mindful Exploration
+        const searchInput = document.getElementById('searchInput');
+        const searchResults = document.getElementById('searchResults');
+
+        const searchableContent = [
+            { title: 'Breathing Techniques', path: 'Meditation > Breathing', tab: 'breathing' },
+            { title: '4-7-8 Breathing Method', path: 'Meditation > Breathing > Techniques', tab: 'breathing' },
+            { title: 'Present Moment Practice', path: 'Meditation > Mindfulness', tab: 'mindfulness' },
+            { title: 'Walking Meditation', path: 'Meditation > Movement', tab: 'movement' },
+            { title: 'Tai Chi Basics', path: 'Meditation > Movement > Forms', tab: 'movement' },
+            { title: 'Journaling for Insight', path: 'Meditation > Reflection', tab: 'reflection' },
+            { title: 'Zen Teachings', path: 'Meditation > Wisdom', tab: 'wisdom' },
+            { title: 'Natural Teachers', path: 'Meditation > Wisdom > Nature', tab: 'wisdom' }
+        ];
+
+        searchInput.addEventListener('input', (e) => {
+            const query = e.target.value.toLowerCase().trim();
+            
+            if (query.length > 2) {
+                const results = searchableContent.filter(item => 
+                    item.title.toLowerCase().includes(query) ||
+                    item.path.toLowerCase().includes(query)
+                );
+
+                if (results.length > 0) {
+                    displaySearchResults(results);
+                    searchResults.classList.add('visible');
+                } else {
+                    searchResults.classList.remove('visible');
+                }
+            } else {
+                searchResults.classList.remove('visible');
+            }
+        });
+
+        searchInput.addEventListener('blur', (e) => {
+            setTimeout(() => {
+                searchResults.classList.remove('visible');
+                if (e.target.value.trim()) {
+                    navState.addSearchTerm(e.target.value.trim());
+                }
+            }, 200);
+        });
+
+        function displaySearchResults(results) {
+            searchResults.innerHTML = results.map(result => `
+                <div class="search-result" data-tab="${result.tab}">
+                    <div class="search-result-title">${result.title}</div>
+                    <div class="search-result-path">${result.path}</div>
+                </div>
+            `).join('');
+
+            // Add click handlers to results
+            searchResults.querySelectorAll('.search-result').forEach(result => {
+                result.addEventListener('mousedown', (e) => {
+                    e.preventDefault();
+                    const tab = result.dataset.tab;
+                    switchTab(tab);
+                    searchInput.value = '';
+                    searchResults.classList.remove('visible');
+                });
+            });
+        }
+
+        // Quick Actions - Zen Shortcuts
+        const actionButtons = document.querySelectorAll('.action-stone');
+
+        actionButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                const action = button.dataset.action;
+                
+                switch(action) {
+                    case 'home':
+                        switchTab('breathing');
+                        searchInput.value = '';
+                        break;
+                    case 'bookmark':
+                        const currentTab = navState.state.currentTab;
+                        if (!navState.state.bookmarks.includes(currentTab)) {
+                            navState.state.bookmarks.push(currentTab);
+                            navState.saveState();
+                            button.style.color = 'var(--zen-moss)';
+                        }
+                        break;
+                    case 'settings':
+                        // In a real app, this would open settings
+                        alert('Settings would open here - adjust your meditation preferences');
+                        break;
+                }
+            });
+        });
+
+        // Restore state on load
+        window.addEventListener('load', () => {
+            // Restore last tab
+            if (navState.state.currentTab) {
+                switchTab(navState.state.currentTab);
+            }
+
+            // Highlight bookmarked items
+            if (navState.state.bookmarks.includes(navState.state.currentTab)) {
+                const bookmarkButton = document.querySelector('[data-action="bookmark"]');
+                bookmarkButton.style.color = 'var(--zen-moss)';
+            }
+
+            // Initialize breadcrumb listeners
+            attachBreadcrumbListeners();
+        });
+
+        // Smooth scroll for tab container
+        const tabContainer = document.querySelector('.meditation-stones');
+        let isDown = false;
+        let startX;
+        let scrollLeft;
+
+        tabContainer.addEventListener('mousedown', (e) => {
+            if (e.target.classList.contains('stone-tab')) return;
+            isDown = true;
+            startX = e.pageX - tabContainer.offsetLeft;
+            scrollLeft = tabContainer.scrollLeft;
+        });
+
+        tabContainer.addEventListener('mouseleave', () => {
+            isDown = false;
+        });
+
+        tabContainer.addEventListener('mouseup', () => {
+            isDown = false;
+        });
+
+        tabContainer.addEventListener('mousemove', (e) => {
+            if (!isDown) return;
+            e.preventDefault();
+            const x = e.pageX - tabContainer.offsetLeft;
+            const walk = (x - startX) * 2;
+            tabContainer.scrollLeft = scrollLeft - walk;
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/themed_hybrid_all/ui_hybrid_6.html b/legacy/themed_hybrid_all/ui_hybrid_6.html
new file mode 100644
index 0000000..0333e52
--- /dev/null
+++ b/legacy/themed_hybrid_all/ui_hybrid_6.html
@@ -0,0 +1,1041 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cyberpunk Future Data Explorer</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Share Tech Mono', monospace;
+            background: #000;
+            color: #0ff;
+            min-height: 100vh;
+            overflow-x: hidden;
+            position: relative;
+        }
+        
+        /* Animated background grid */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: 
+                linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
+            background-size: 50px 50px;
+            animation: grid-move 20s linear infinite;
+            pointer-events: none;
+        }
+        
+        @keyframes grid-move {
+            0% { transform: translate(0, 0); }
+            100% { transform: translate(50px, 50px); }
+        }
+        
+        /* Digital rain effect */
+        .rain-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            pointer-events: none;
+            opacity: 0.1;
+        }
+        
+        .rain-column {
+            position: absolute;
+            top: -100%;
+            width: 20px;
+            height: 100%;
+            text-align: center;
+            font-size: 20px;
+            animation: rain-fall linear infinite;
+        }
+        
+        @keyframes rain-fall {
+            to { transform: translateY(200%); }
+        }
+        
+        main {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 40px 20px;
+            position: relative;
+            z-index: 1;
+        }
+        
+        h1 {
+            font-family: 'Orbitron', monospace;
+            font-size: 3em;
+            font-weight: 900;
+            text-align: center;
+            margin-bottom: 40px;
+            text-transform: uppercase;
+            letter-spacing: 5px;
+            position: relative;
+            text-shadow: 
+                0 0 10px #0ff,
+                0 0 20px #0ff,
+                0 0 30px #0ff;
+            animation: title-glitch 3s infinite;
+        }
+        
+        @keyframes title-glitch {
+            0%, 90% { 
+                text-shadow: 
+                    0 0 10px #0ff,
+                    0 0 20px #0ff,
+                    0 0 30px #0ff;
+            }
+            92% { 
+                text-shadow: 
+                    -2px 0 #f0f,
+                    2px 0 #0ff,
+                    0 0 10px #f0f;
+            }
+            94% { 
+                text-shadow: 
+                    2px 0 #ff0,
+                    -2px 0 #0ff,
+                    0 0 10px #ff0;
+            }
+            100% { 
+                text-shadow: 
+                    0 0 10px #0ff,
+                    0 0 20px #0ff,
+                    0 0 30px #0ff;
+            }
+        }
+        
+        /* Data Explorer Container */
+        .data-explorer {
+            background: rgba(0, 0, 0, 0.9);
+            border: 2px solid #0ff;
+            border-radius: 0;
+            padding: 30px;
+            position: relative;
+            overflow: hidden;
+            box-shadow: 
+                0 0 20px rgba(0, 255, 255, 0.5),
+                inset 0 0 20px rgba(0, 255, 255, 0.1);
+        }
+        
+        .data-explorer::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(45deg, #0ff, #f0f, #ff0, #0ff);
+            z-index: -1;
+            animation: border-glow 3s linear infinite;
+            filter: blur(4px);
+        }
+        
+        @keyframes border-glow {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        
+        /* Control Panel */
+        .control-panel {
+            display: grid;
+            grid-template-columns: 2fr 1fr 1fr;
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+        
+        /* Search with glitch effect */
+        .search-container {
+            position: relative;
+        }
+        
+        .search-input {
+            width: 100%;
+            padding: 15px 20px;
+            background: rgba(0, 255, 255, 0.1);
+            border: 1px solid #0ff;
+            color: #0ff;
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 16px;
+            transition: all 0.3s;
+            position: relative;
+        }
+        
+        .search-input:focus {
+            outline: none;
+            background: rgba(0, 255, 255, 0.2);
+            box-shadow: 
+                0 0 20px rgba(0, 255, 255, 0.5),
+                inset 0 0 10px rgba(0, 255, 255, 0.2);
+            animation: input-glitch 0.2s;
+        }
+        
+        @keyframes input-glitch {
+            0%, 100% { transform: translateX(0); }
+            20% { transform: translateX(-2px); }
+            40% { transform: translateX(2px); }
+            60% { transform: translateX(-1px); }
+            80% { transform: translateX(1px); }
+        }
+        
+        .search-input::placeholder {
+            color: rgba(0, 255, 255, 0.5);
+            text-transform: uppercase;
+        }
+        
+        /* Filter Controls - Circuit Board Style */
+        .filter-controls {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            position: relative;
+        }
+        
+        .filter-controls::before {
+            content: '';
+            position: absolute;
+            inset: -10px;
+            background: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10h80v80h-80z' fill='none' stroke='%230ff' stroke-width='0.5' opacity='0.1'/%3E%3Cpath d='M30 10v80M70 10v80M10 30h80M10 70h80' stroke='%230ff' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
+            background-size: 100px 100px;
+            opacity: 0.3;
+            pointer-events: none;
+        }
+        
+        .filter-select {
+            flex: 1;
+            padding: 12px;
+            background: rgba(0, 255, 255, 0.05);
+            border: 1px solid #0ff;
+            color: #0ff;
+            font-family: 'Share Tech Mono', monospace;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        
+        .filter-select:hover {
+            background: rgba(0, 255, 255, 0.1);
+            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+        }
+        
+        .filter-select option {
+            background: #000;
+            color: #0ff;
+        }
+        
+        /* Sort Controls */
+        .sort-controls {
+            display: flex;
+            gap: 10px;
+        }
+        
+        .sort-btn {
+            flex: 1;
+            padding: 12px;
+            background: transparent;
+            border: 1px solid #0ff;
+            color: #0ff;
+            font-family: 'Share Tech Mono', monospace;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s;
+            text-transform: uppercase;
+        }
+        
+        .sort-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent);
+            transition: left 0.5s;
+        }
+        
+        .sort-btn:hover::before {
+            left: 100%;
+        }
+        
+        .sort-btn.active {
+            background: rgba(0, 255, 255, 0.2);
+            box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
+        }
+        
+        /* Data Table - Neon Grid */
+        .data-table-container {
+            overflow-x: auto;
+            margin-bottom: 30px;
+            position: relative;
+        }
+        
+        .data-table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            position: relative;
+        }
+        
+        .data-table th,
+        .data-table td {
+            padding: 15px;
+            text-align: left;
+            border: 1px solid rgba(0, 255, 255, 0.3);
+            position: relative;
+        }
+        
+        .data-table th {
+            background: rgba(0, 255, 255, 0.1);
+            color: #0ff;
+            text-transform: uppercase;
+            font-weight: 700;
+            letter-spacing: 2px;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+        
+        .data-table tbody tr {
+            transition: all 0.3s;
+            cursor: pointer;
+        }
+        
+        .data-table tbody tr:hover {
+            background: rgba(0, 255, 255, 0.05);
+            transform: translateX(5px);
+        }
+        
+        .data-table tbody tr.selected {
+            background: rgba(255, 0, 255, 0.1);
+            box-shadow: 
+                0 0 20px rgba(255, 0, 255, 0.3),
+                inset 0 0 10px rgba(255, 0, 255, 0.1);
+        }
+        
+        .data-table tbody tr.selected td {
+            border-color: #f0f;
+            color: #f0f;
+        }
+        
+        /* Cell animations */
+        .data-table td {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .data-table td::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent);
+            transition: left 0.5s;
+        }
+        
+        .data-table tr:hover td::after {
+            left: 100%;
+            transition-delay: calc(var(--col-index) * 0.1s);
+        }
+        
+        /* Status indicators */
+        .status {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 2px;
+            font-size: 12px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            position: relative;
+        }
+        
+        .status.active {
+            background: rgba(0, 255, 0, 0.2);
+            border: 1px solid #0f0;
+            color: #0f0;
+            animation: status-pulse 2s infinite;
+        }
+        
+        .status.pending {
+            background: rgba(255, 255, 0, 0.2);
+            border: 1px solid #ff0;
+            color: #ff0;
+        }
+        
+        .status.inactive {
+            background: rgba(255, 0, 0, 0.2);
+            border: 1px solid #f00;
+            color: #f00;
+        }
+        
+        @keyframes status-pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        
+        /* Bottom Controls */
+        .bottom-controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 20px;
+        }
+        
+        /* Pagination - Holographic Interface */
+        .pagination {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            perspective: 1000px;
+        }
+        
+        .page-btn {
+            padding: 10px 15px;
+            background: rgba(0, 255, 255, 0.1);
+            border: 1px solid #0ff;
+            color: #0ff;
+            font-family: 'Share Tech Mono', monospace;
+            cursor: pointer;
+            transition: all 0.3s;
+            transform-style: preserve-3d;
+            position: relative;
+        }
+        
+        .page-btn::before {
+            content: attr(data-page);
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(255, 0, 255, 0.1);
+            border: 1px solid #f0f;
+            color: #f0f;
+            transform: rotateY(180deg) translateZ(1px);
+            backface-visibility: hidden;
+        }
+        
+        .page-btn:hover {
+            transform: rotateY(180deg);
+        }
+        
+        .page-btn.active {
+            background: rgba(0, 255, 255, 0.3);
+            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
+            transform: translateZ(10px);
+        }
+        
+        .page-info {
+            color: rgba(0, 255, 255, 0.7);
+            font-size: 14px;
+            text-transform: uppercase;
+        }
+        
+        /* Export Controls - Data Stream Effect */
+        .export-controls {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+        
+        .export-btn {
+            padding: 12px 20px;
+            background: transparent;
+            border: 1px solid #ff0;
+            color: #ff0;
+            font-family: 'Share Tech Mono', monospace;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            text-transform: uppercase;
+            transition: all 0.3s;
+        }
+        
+        .export-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: repeating-linear-gradient(
+                90deg,
+                transparent,
+                transparent 10px,
+                rgba(255, 255, 0, 0.3) 10px,
+                rgba(255, 255, 0, 0.3) 20px
+            );
+            animation: data-stream 2s linear infinite;
+        }
+        
+        .export-btn:hover {
+            background: rgba(255, 255, 0, 0.1);
+            box-shadow: 0 0 20px rgba(255, 255, 0, 0.5);
+        }
+        
+        .export-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        
+        @keyframes data-stream {
+            to { left: 100%; }
+        }
+        
+        /* Selection counter */
+        .selection-info {
+            color: #f0f;
+            font-size: 14px;
+            text-transform: uppercase;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .selection-info::before {
+            content: '';
+            width: 10px;
+            height: 10px;
+            background: #f0f;
+            display: inline-block;
+            animation: blink 1s infinite;
+        }
+        
+        @keyframes blink {
+            0%, 50% { opacity: 1; }
+            51%, 100% { opacity: 0; }
+        }
+        
+        /* Loading overlay */
+        .loading-overlay {
+            position: absolute;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.9);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 100;
+        }
+        
+        .loading-overlay.active {
+            display: flex;
+        }
+        
+        .loading-text {
+            font-size: 24px;
+            color: #0ff;
+            text-transform: uppercase;
+            letter-spacing: 3px;
+            animation: loading-glitch 0.5s infinite;
+        }
+        
+        @keyframes loading-glitch {
+            0%, 100% { 
+                text-shadow: 
+                    0 0 10px #0ff,
+                    0 0 20px #0ff;
+            }
+            50% { 
+                text-shadow: 
+                    -2px 0 #f0f,
+                    2px 0 #ff0,
+                    0 0 20px #f0f;
+            }
+        }
+        
+        /* Responsive */
+        @media (max-width: 768px) {
+            .control-panel {
+                grid-template-columns: 1fr;
+            }
+            
+            h1 {
+                font-size: 2em;
+            }
+            
+            .data-table {
+                font-size: 14px;
+            }
+            
+            .bottom-controls {
+                flex-direction: column;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Digital rain background -->
+    <div class="rain-container" id="rainContainer"></div>
+    
+    <main>
+        <h1>Data Explorer - Cyberpunk Future</h1>
+        
+        <div class="data-explorer">
+            <!-- Loading overlay -->
+            <div class="loading-overlay" id="loadingOverlay">
+                <div class="loading-text">ACCESSING DATABASE...</div>
+            </div>
+            
+            <!-- Control Panel -->
+            <div class="control-panel">
+                <!-- Search with glitch effect -->
+                <div class="search-container">
+                    <input type="text" class="search-input" id="searchInput" placeholder="[SEARCH DATABASE]">
+                </div>
+                
+                <!-- Filter Controls - Circuit Board -->
+                <div class="filter-controls">
+                    <select class="filter-select" id="statusFilter">
+                        <option value="">ALL STATUS</option>
+                        <option value="active">ACTIVE</option>
+                        <option value="pending">PENDING</option>
+                        <option value="inactive">INACTIVE</option>
+                    </select>
+                    <select class="filter-select" id="typeFilter">
+                        <option value="">ALL TYPES</option>
+                        <option value="neural">NEURAL</option>
+                        <option value="quantum">QUANTUM</option>
+                        <option value="cyber">CYBER</option>
+                        <option value="hybrid">HYBRID</option>
+                    </select>
+                </div>
+                
+                <!-- Sort Controls -->
+                <div class="sort-controls">
+                    <button class="sort-btn" data-sort="id">ID</button>
+                    <button class="sort-btn" data-sort="name">NAME</button>
+                    <button class="sort-btn" data-sort="value">VALUE</button>
+                </div>
+            </div>
+            
+            <!-- Data Table - Neon Grid -->
+            <div class="data-table-container">
+                <table class="data-table">
+                    <thead>
+                        <tr>
+                            <th style="width: 50px;">SEL</th>
+                            <th>ID</th>
+                            <th>NAME</th>
+                            <th>TYPE</th>
+                            <th>VALUE</th>
+                            <th>STATUS</th>
+                            <th>UPDATED</th>
+                        </tr>
+                    </thead>
+                    <tbody id="dataTableBody">
+                        <!-- Dynamic content -->
+                    </tbody>
+                </table>
+            </div>
+            
+            <!-- Bottom Controls -->
+            <div class="bottom-controls">
+                <!-- Pagination - Holographic -->
+                <div class="pagination" id="pagination">
+                    <button class="page-btn" data-page="<<"><<</button>
+                    <button class="page-btn active" data-page="1">1</button>
+                    <button class="page-btn" data-page="2">2</button>
+                    <button class="page-btn" data-page="3">3</button>
+                    <button class="page-btn" data-page="4">4</button>
+                    <button class="page-btn" data-page="5">5</button>
+                    <button class="page-btn" data-page=">>">>></button>
+                </div>
+                
+                <div class="page-info">
+                    Page <span id="currentPage">1</span> of <span id="totalPages">10</span>
+                </div>
+                
+                <!-- Selection info -->
+                <div class="selection-info">
+                    <span id="selectedCount">0</span> SELECTED
+                </div>
+                
+                <!-- Export Controls - Data Stream -->
+                <div class="export-controls">
+                    <button class="export-btn" id="exportBtn" disabled>EXPORT DATA</button>
+                    <select class="filter-select" id="exportFormat" style="width: auto;">
+                        <option value="json">JSON</option>
+                        <option value="csv">CSV</option>
+                        <option value="xml">XML</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Generate digital rain
+        function createRain() {
+            const container = document.getElementById('rainContainer');
+            const columns = Math.floor(window.innerWidth / 20);
+            
+            for (let i = 0; i < columns; i++) {
+                const column = document.createElement('div');
+                column.className = 'rain-column';
+                column.style.left = i * 20 + 'px';
+                column.style.animationDuration = (Math.random() * 10 + 5) + 's';
+                column.style.animationDelay = Math.random() * 5 + 's';
+                
+                // Random binary/hex characters
+                const chars = '01ABCDEF'.split('');
+                for (let j = 0; j < 50; j++) {
+                    column.innerHTML += chars[Math.floor(Math.random() * chars.length)] + '<br>';
+                }
+                
+                container.appendChild(column);
+            }
+        }
+        
+        // Data model
+        const dataGenerator = {
+            types: ['neural', 'quantum', 'cyber', 'hybrid'],
+            statuses: ['active', 'pending', 'inactive'],
+            names: [
+                'NEXUS_CORE', 'SYNTH_WAVE', 'CYBER_LINK', 'NEURO_NET',
+                'QUANTUM_FLUX', 'DATA_STREAM', 'MATRIX_NODE', 'GRID_PULSE',
+                'NEON_DRIVE', 'HOLO_DECK', 'CHROME_JACK', 'PIXEL_STORM',
+                'GLITCH_MOD', 'RETRO_BURN', 'VAPOR_TRAIL', 'TECH_NOIR'
+            ],
+            
+            generate(count) {
+                const data = [];
+                for (let i = 1; i <= count; i++) {
+                    data.push({
+                        id: `CYB-${String(i).padStart(4, '0')}`,
+                        name: this.names[Math.floor(Math.random() * this.names.length)] + '_' + i,
+                        type: this.types[Math.floor(Math.random() * this.types.length)],
+                        value: Math.floor(Math.random() * 9999) + 1000,
+                        status: this.statuses[Math.floor(Math.random() * this.statuses.length)],
+                        updated: new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
+                    });
+                }
+                return data;
+            }
+        };
+        
+        // Application state
+        const app = {
+            data: [],
+            filteredData: [],
+            currentPage: 1,
+            itemsPerPage: 10,
+            sortColumn: null,
+            sortDirection: 'asc',
+            selectedRows: new Set(),
+            
+            init() {
+                this.data = dataGenerator.generate(100);
+                this.filteredData = [...this.data];
+                this.bindEvents();
+                this.render();
+                createRain();
+            },
+            
+            bindEvents() {
+                // Search
+                document.getElementById('searchInput').addEventListener('input', (e) => {
+                    this.handleSearch(e.target.value);
+                });
+                
+                // Filters
+                document.getElementById('statusFilter').addEventListener('change', () => {
+                    this.applyFilters();
+                });
+                
+                document.getElementById('typeFilter').addEventListener('change', () => {
+                    this.applyFilters();
+                });
+                
+                // Sort buttons
+                document.querySelectorAll('.sort-btn').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        this.handleSort(e.target.dataset.sort);
+                    });
+                });
+                
+                // Export button
+                document.getElementById('exportBtn').addEventListener('click', () => {
+                    this.exportData();
+                });
+            },
+            
+            handleSearch(query) {
+                this.showLoading();
+                setTimeout(() => {
+                    this.applyFilters();
+                    this.hideLoading();
+                }, 300);
+            },
+            
+            applyFilters() {
+                const searchQuery = document.getElementById('searchInput').value.toLowerCase();
+                const statusFilter = document.getElementById('statusFilter').value;
+                const typeFilter = document.getElementById('typeFilter').value;
+                
+                this.filteredData = this.data.filter(item => {
+                    const matchesSearch = !searchQuery || 
+                        item.id.toLowerCase().includes(searchQuery) ||
+                        item.name.toLowerCase().includes(searchQuery);
+                    
+                    const matchesStatus = !statusFilter || item.status === statusFilter;
+                    const matchesType = !typeFilter || item.type === typeFilter;
+                    
+                    return matchesSearch && matchesStatus && matchesType;
+                });
+                
+                this.currentPage = 1;
+                this.render();
+            },
+            
+            handleSort(column) {
+                const buttons = document.querySelectorAll('.sort-btn');
+                buttons.forEach(btn => btn.classList.remove('active'));
+                
+                if (this.sortColumn === column) {
+                    this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+                } else {
+                    this.sortColumn = column;
+                    this.sortDirection = 'asc';
+                }
+                
+                document.querySelector(`[data-sort="${column}"]`).classList.add('active');
+                
+                // Trigger matrix rain effect during sort
+                this.showMatrixEffect();
+                
+                this.filteredData.sort((a, b) => {
+                    const aVal = a[column];
+                    const bVal = b[column];
+                    
+                    if (typeof aVal === 'number') {
+                        return this.sortDirection === 'asc' ? aVal - bVal : bVal - aVal;
+                    }
+                    
+                    return this.sortDirection === 'asc' 
+                        ? aVal.localeCompare(bVal)
+                        : bVal.localeCompare(aVal);
+                });
+                
+                this.render();
+            },
+            
+            showMatrixEffect() {
+                const cells = document.querySelectorAll('.data-table td');
+                cells.forEach((cell, i) => {
+                    setTimeout(() => {
+                        cell.style.color = '#0f0';
+                        cell.style.textShadow = '0 0 10px #0f0';
+                        setTimeout(() => {
+                            cell.style.color = '';
+                            cell.style.textShadow = '';
+                        }, 300);
+                    }, i * 10);
+                });
+            },
+            
+            render() {
+                this.renderTable();
+                this.renderPagination();
+                this.updateSelectionInfo();
+            },
+            
+            renderTable() {
+                const tbody = document.getElementById('dataTableBody');
+                const start = (this.currentPage - 1) * this.itemsPerPage;
+                const end = start + this.itemsPerPage;
+                const pageData = this.filteredData.slice(start, end);
+                
+                tbody.innerHTML = pageData.map((item, index) => `
+                    <tr data-id="${item.id}" class="${this.selectedRows.has(item.id) ? 'selected' : ''}">
+                        <td style="--col-index: 0">
+                            <input type="checkbox" class="row-checkbox" 
+                                ${this.selectedRows.has(item.id) ? 'checked' : ''}>
+                        </td>
+                        <td style="--col-index: 1">${item.id}</td>
+                        <td style="--col-index: 2">${item.name}</td>
+                        <td style="--col-index: 3">${item.type.toUpperCase()}</td>
+                        <td style="--col-index: 4">${item.value.toLocaleString()}</td>
+                        <td style="--col-index: 5">
+                            <span class="status ${item.status}">${item.status.toUpperCase()}</span>
+                        </td>
+                        <td style="--col-index: 6">${item.updated}</td>
+                    </tr>
+                `).join('');
+                
+                // Bind row events
+                tbody.querySelectorAll('tr').forEach(row => {
+                    row.addEventListener('click', (e) => {
+                        if (e.target.type !== 'checkbox') {
+                            const checkbox = row.querySelector('.row-checkbox');
+                            checkbox.checked = !checkbox.checked;
+                            this.toggleRowSelection(row.dataset.id, checkbox.checked);
+                        }
+                    });
+                    
+                    row.querySelector('.row-checkbox').addEventListener('change', (e) => {
+                        this.toggleRowSelection(row.dataset.id, e.target.checked);
+                    });
+                });
+            },
+            
+            renderPagination() {
+                const totalPages = Math.ceil(this.filteredData.length / this.itemsPerPage);
+                document.getElementById('currentPage').textContent = this.currentPage;
+                document.getElementById('totalPages').textContent = totalPages;
+                
+                const pagination = document.getElementById('pagination');
+                pagination.innerHTML = '';
+                
+                // Previous button
+                const prevBtn = this.createPageButton('<<', () => {
+                    if (this.currentPage > 1) {
+                        this.currentPage--;
+                        this.render();
+                    }
+                });
+                pagination.appendChild(prevBtn);
+                
+                // Page buttons
+                const maxButtons = 5;
+                let start = Math.max(1, this.currentPage - Math.floor(maxButtons / 2));
+                let end = Math.min(totalPages, start + maxButtons - 1);
+                
+                if (end - start < maxButtons - 1) {
+                    start = Math.max(1, end - maxButtons + 1);
+                }
+                
+                for (let i = start; i <= end; i++) {
+                    const btn = this.createPageButton(i, () => {
+                        this.currentPage = i;
+                        this.render();
+                    });
+                    if (i === this.currentPage) {
+                        btn.classList.add('active');
+                    }
+                    pagination.appendChild(btn);
+                }
+                
+                // Next button
+                const nextBtn = this.createPageButton('>>', () => {
+                    if (this.currentPage < totalPages) {
+                        this.currentPage++;
+                        this.render();
+                    }
+                });
+                pagination.appendChild(nextBtn);
+            },
+            
+            createPageButton(text, onClick) {
+                const btn = document.createElement('button');
+                btn.className = 'page-btn';
+                btn.textContent = text;
+                btn.setAttribute('data-page', text);
+                btn.addEventListener('click', onClick);
+                return btn;
+            },
+            
+            toggleRowSelection(id, selected) {
+                if (selected) {
+                    this.selectedRows.add(id);
+                } else {
+                    this.selectedRows.delete(id);
+                }
+                
+                const row = document.querySelector(`tr[data-id="${id}"]`);
+                if (row) {
+                    row.classList.toggle('selected', selected);
+                }
+                
+                this.updateSelectionInfo();
+            },
+            
+            updateSelectionInfo() {
+                const count = this.selectedRows.size;
+                document.getElementById('selectedCount').textContent = count;
+                document.getElementById('exportBtn').disabled = count === 0;
+            },
+            
+            exportData() {
+                const format = document.getElementById('exportFormat').value;
+                const exportData = this.filteredData.filter(item => 
+                    this.selectedRows.has(item.id)
+                );
+                
+                this.showDataStream();
+                
+                setTimeout(() => {
+                    let content = '';
+                    
+                    switch(format) {
+                        case 'json':
+                            content = JSON.stringify(exportData, null, 2);
+                            break;
+                        case 'csv':
+                            const headers = Object.keys(exportData[0]).join(',');
+                            const rows = exportData.map(item => 
+                                Object.values(item).join(',')
+                            ).join('\n');
+                            content = headers + '\n' + rows;
+                            break;
+                        case 'xml':
+                            content = '<?xml version="1.0" encoding="UTF-8"?>\n<data>\n';
+                            exportData.forEach(item => {
+                                content += '  <record>\n';
+                                Object.entries(item).forEach(([key, value]) => {
+                                    content += `    <${key}>${value}</${key}>\n`;
+                                });
+                                content += '  </record>\n';
+                            });
+                            content += '</data>';
+                            break;
+                    }
+                    
+                    // Create download
+                    const blob = new Blob([content], { type: 'text/plain' });
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = `cyberpunk_data_${Date.now()}.${format}`;
+                    a.click();
+                    URL.revokeObjectURL(url);
+                    
+                    this.hideLoading();
+                }, 1500);
+            },
+            
+            showDataStream() {
+                this.showLoading();
+                const overlay = document.getElementById('loadingOverlay');
+                overlay.querySelector('.loading-text').textContent = 'STREAMING DATA...';
+            },
+            
+            showLoading() {
+                document.getElementById('loadingOverlay').classList.add('active');
+            },
+            
+            hideLoading() {
+                document.getElementById('loadingOverlay').classList.remove('active');
+            }
+        };
+        
+        // Initialize
+        app.init();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/themed_hybrid_all/ui_hybrid_7.html b/legacy/themed_hybrid_all/ui_hybrid_7.html
new file mode 100644
index 0000000..dc64d5a
--- /dev/null
+++ b/legacy/themed_hybrid_all/ui_hybrid_7.html
@@ -0,0 +1,896 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Handcrafted Paper Content Card</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Patrick+Hand&display=swap');
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Patrick Hand', cursive;
+            background: linear-gradient(135deg, #f5f1e8 0%, #fafaf0 100%);
+            min-height: 100vh;
+            padding: 2rem;
+            position: relative;
+            overflow-x: hidden;
+        }
+        
+        /* Wood texture background */
+        body::before {
+            content: '';
+            position: fixed;
+            inset: 0;
+            background-image: 
+                repeating-linear-gradient(90deg, rgba(139, 90, 43, 0.03) 0px, transparent 1px, transparent 2px, rgba(139, 90, 43, 0.03) 3px),
+                repeating-linear-gradient(0deg, rgba(139, 90, 43, 0.03) 0px, transparent 1px, transparent 2px, rgba(139, 90, 43, 0.03) 3px);
+            pointer-events: none;
+        }
+        
+        main {
+            max-width: 1200px;
+            margin: 0 auto;
+            position: relative;
+            z-index: 1;
+        }
+        
+        h1 {
+            font-family: 'Kalam', cursive;
+            font-size: 2.5rem;
+            color: #4a3f36;
+            text-align: center;
+            margin-bottom: 3rem;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+            position: relative;
+        }
+        
+        h1::after {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 200px;
+            height: 2px;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 2"><path d="M0,1 Q25,0 50,1 T100,1" stroke="%234a3f36" fill="none" stroke-width="0.5"/></svg>');
+            opacity: 0.5;
+        }
+        
+        .content-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2.5rem;
+            margin-top: 3rem;
+        }
+        
+        .paper-card {
+            position: relative;
+            background: #fefef4;
+            padding: 1.5rem;
+            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
+            transition: transform 0.3s ease, filter 0.3s ease;
+            cursor: pointer;
+        }
+        
+        .paper-card::before {
+            content: '';
+            position: absolute;
+            inset: -2px;
+            background: #fefef4;
+            z-index: -1;
+            clip-path: polygon(
+                0% 2%, 2% 0%, 15% 1%, 30% 0%, 45% 2%, 60% 0%, 75% 1%, 90% 0%, 100% 2%,
+                99% 15%, 100% 30%, 98% 45%, 100% 60%, 99% 75%, 100% 90%, 98% 100%,
+                85% 99%, 70% 100%, 55% 98%, 40% 100%, 25% 99%, 10% 100%, 0% 98%,
+                1% 85%, 0% 70%, 2% 55%, 0% 40%, 1% 25%, 0% 10%
+            );
+        }
+        
+        .paper-card:hover {
+            transform: translateY(-4px) rotate(0.5deg);
+            filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
+        }
+        
+        /* Paper texture overlay */
+        .paper-texture {
+            position: absolute;
+            inset: 0;
+            opacity: 0.3;
+            background-image: 
+                repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 70px),
+                repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 70px);
+            pointer-events: none;
+        }
+        
+        /* Bookmark ribbon */
+        .bookmark-ribbon {
+            position: absolute;
+            top: -5px;
+            right: 20px;
+            width: 30px;
+            height: 60px;
+            background: #d32f2f;
+            clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
+            transition: all 0.3s ease;
+            cursor: pointer;
+            z-index: 10;
+        }
+        
+        .bookmark-ribbon::before {
+            content: '★';
+            position: absolute;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: white;
+            font-size: 1.2rem;
+        }
+        
+        .bookmark-ribbon.active {
+            background: #fbc02d;
+            transform: translateY(5px);
+        }
+        
+        /* Content preview */
+        .card-preview {
+            margin-bottom: 1rem;
+        }
+        
+        .card-image {
+            width: 100%;
+            height: 200px;
+            background: #f5f5dc;
+            position: relative;
+            overflow: hidden;
+            margin-bottom: 1rem;
+            clip-path: polygon(
+                0% 1%, 1% 0%, 99% 0%, 100% 1%,
+                100% 99%, 99% 100%, 1% 100%, 0% 99%
+            );
+        }
+        
+        .card-image img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            filter: sepia(0.1) contrast(0.9);
+        }
+        
+        .sketch-overlay {
+            position: absolute;
+            inset: 0;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M10,10 Q50,5 90,10 M10,90 Q50,95 90,90 M10,10 Q5,50 10,90 M90,10 Q95,50 90,90" stroke="%23000" fill="none" stroke-width="0.2" opacity="0.3"/></svg>');
+            pointer-events: none;
+        }
+        
+        .card-title {
+            font-family: 'Kalam', cursive;
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: #2c3e50;
+            margin-bottom: 0.5rem;
+            position: relative;
+        }
+        
+        .card-description {
+            color: #5a6c7d;
+            line-height: 1.6;
+            margin-bottom: 1rem;
+        }
+        
+        /* Handwritten metadata */
+        .metadata {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 1rem;
+            font-size: 0.9rem;
+            color: #7a8694;
+        }
+        
+        .metadata span {
+            position: relative;
+            padding-bottom: 2px;
+        }
+        
+        .metadata span::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 1"><path d="M0,0.5 Q5,0 10,0.5 T20,0.5" stroke="%237a8694" fill="none" stroke-width="0.5"/></svg>');
+            opacity: 0.3;
+        }
+        
+        /* Paper cutout action buttons */
+        .action-buttons {
+            display: flex;
+            gap: 0.5rem;
+            position: relative;
+        }
+        
+        .paper-button {
+            padding: 0.7rem 1.2rem;
+            background: #fefef4;
+            border: none;
+            font-family: 'Patrick Hand', cursive;
+            font-size: 1rem;
+            color: #4a3f36;
+            cursor: pointer;
+            position: relative;
+            transition: all 0.3s ease;
+            filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
+        }
+        
+        .paper-button::before {
+            content: '';
+            position: absolute;
+            inset: -1px;
+            background: inherit;
+            z-index: -1;
+            clip-path: polygon(
+                0% 5%, 5% 0%, 95% 0%, 100% 5%,
+                100% 95%, 95% 100%, 5% 100%, 0% 95%
+            );
+        }
+        
+        .paper-button:hover {
+            transform: translateY(-2px) rotate(-1deg);
+            filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.15));
+        }
+        
+        .paper-button:active {
+            transform: translateY(0) rotate(0);
+            filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.1));
+        }
+        
+        .paper-button.primary {
+            background: #e8f5e9;
+            color: #2e7d32;
+        }
+        
+        .paper-button.secondary {
+            background: #fff3e0;
+            color: #e65100;
+        }
+        
+        /* Share paper airplane */
+        .share-button {
+            position: relative;
+            overflow: visible;
+        }
+        
+        .paper-airplane {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 20px;
+            height: 20px;
+            opacity: 0;
+            pointer-events: none;
+        }
+        
+        .paper-airplane.flying {
+            animation: fly-away 1.5s ease-out forwards;
+        }
+        
+        @keyframes fly-away {
+            0% {
+                opacity: 1;
+                transform: translate(-50%, -50%) rotate(0deg) scale(1);
+            }
+            100% {
+                opacity: 0;
+                transform: translate(200px, -200px) rotate(45deg) scale(0.5);
+            }
+        }
+        
+        /* Modal as unfolding paper */
+        .modal-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(0,0,0,0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+            z-index: 1000;
+        }
+        
+        .modal-overlay.active {
+            opacity: 1;
+            pointer-events: all;
+        }
+        
+        .paper-modal {
+            background: #fefef4;
+            max-width: 600px;
+            width: 90%;
+            max-height: 80vh;
+            position: relative;
+            filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
+            transform: scale(0.7) rotateX(90deg);
+            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+            transform-style: preserve-3d;
+            perspective: 1000px;
+        }
+        
+        .modal-overlay.active .paper-modal {
+            transform: scale(1) rotateX(0);
+        }
+        
+        .paper-modal::before {
+            content: '';
+            position: absolute;
+            inset: -3px;
+            background: #fefef4;
+            z-index: -1;
+            clip-path: polygon(
+                0% 3%, 3% 0%, 20% 2%, 40% 0%, 60% 2%, 80% 0%, 97% 3%, 100% 3%,
+                98% 20%, 100% 40%, 98% 60%, 100% 80%, 97% 97%, 97% 100%,
+                80% 98%, 60% 100%, 40% 98%, 20% 100%, 3% 97%, 0% 97%,
+                2% 80%, 0% 60%, 2% 40%, 0% 20%
+            );
+        }
+        
+        .modal-content {
+            padding: 2.5rem;
+            overflow-y: auto;
+            max-height: 80vh;
+        }
+        
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: start;
+            margin-bottom: 1.5rem;
+        }
+        
+        .modal-title {
+            font-family: 'Kalam', cursive;
+            font-size: 2rem;
+            color: #2c3e50;
+        }
+        
+        .close-button {
+            background: none;
+            border: none;
+            font-size: 2rem;
+            color: #7a8694;
+            cursor: pointer;
+            transition: transform 0.3s ease;
+            font-family: 'Patrick Hand', cursive;
+        }
+        
+        .close-button:hover {
+            transform: rotate(90deg);
+        }
+        
+        .modal-body {
+            line-height: 1.8;
+            color: #4a5568;
+        }
+        
+        .modal-body p {
+            margin-bottom: 1rem;
+        }
+        
+        /* Fold lines on modal */
+        .fold-lines {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            opacity: 0.1;
+            background-image: 
+                linear-gradient(90deg, #000 1px, transparent 1px),
+                linear-gradient(0deg, #000 1px, transparent 1px);
+            background-size: 200px 200px;
+            background-position: center;
+        }
+        
+        /* Coffee stain decoration */
+        .coffee-stain {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(139, 90, 43, 0.1) 0%, rgba(139, 90, 43, 0.05) 50%, transparent 70%);
+            top: 20px;
+            right: 30px;
+            transform: rotate(45deg);
+        }
+        
+        /* Pencil sketch decorations */
+        .pencil-sketch {
+            position: absolute;
+            opacity: 0.2;
+            pointer-events: none;
+        }
+        
+        .sketch-1 {
+            bottom: 10px;
+            left: 10px;
+            width: 50px;
+            height: 50px;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="%234a3f36" stroke-width="0.5" stroke-dasharray="1,2"/><path d="M15,25 Q25,15 35,25 T25,35" fill="none" stroke="%234a3f36" stroke-width="0.5"/></svg>');
+        }
+        
+        .sketch-2 {
+            top: 50%;
+            right: -20px;
+            width: 40px;
+            height: 100px;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 100"><path d="M20,10 Q10,30 20,50 T20,90" fill="none" stroke="%234a3f36" stroke-width="0.5"/><circle cx="20" cy="30" r="5" fill="none" stroke="%234a3f36" stroke-width="0.5"/><circle cx="20" cy="70" r="5" fill="none" stroke="%234a3f36" stroke-width="0.5"/></svg>');
+        }
+        
+        /* Loading state */
+        .loading-sketch {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            margin-left: 0.5rem;
+            animation: sketch-draw 1.5s ease-in-out infinite;
+        }
+        
+        @keyframes sketch-draw {
+            0%, 100% {
+                background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5,10 L10,10" stroke="%234a3f36" fill="none" stroke-width="1"/></svg>');
+            }
+            50% {
+                background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5,10 L15,10" stroke="%234a3f36" fill="none" stroke-width="1"/></svg>');
+            }
+        }
+        
+        /* Share popup */
+        .share-popup {
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            background: #fefef4;
+            padding: 1rem;
+            margin-bottom: 0.5rem;
+            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+        }
+        
+        .share-popup.active {
+            opacity: 1;
+            pointer-events: all;
+        }
+        
+        .share-popup::before {
+            content: '';
+            position: absolute;
+            inset: -1px;
+            background: #fefef4;
+            z-index: -1;
+            clip-path: polygon(
+                0% 5%, 5% 0%, 95% 0%, 100% 5%,
+                100% 85%, 90% 90%, 50% 100%, 10% 90%, 0% 85%
+            );
+        }
+        
+        .share-options {
+            display: flex;
+            gap: 0.5rem;
+        }
+        
+        .share-option {
+            padding: 0.5rem;
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 1.2rem;
+            transition: transform 0.2s ease;
+        }
+        
+        .share-option:hover {
+            transform: scale(1.2) rotate(5deg);
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Content Card - Handcrafted Paper Theme</h1>
+        
+        <div class="content-grid">
+            <!-- Article Card -->
+            <div class="paper-card" data-id="1">
+                <div class="paper-texture"></div>
+                <div class="bookmark-ribbon" onclick="toggleBookmark(event, this)"></div>
+                <div class="coffee-stain"></div>
+                
+                <div class="card-preview">
+                    <div class="card-image">
+                        <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'><rect fill='%23e8dcc6' width='400' height='200'/><text x='50%' y='50%' text-anchor='middle' dy='.3em' fill='%234a3f36' font-family='Patrick Hand' font-size='24'>Mountain Sketch</text><path d='M50,150 L150,50 L250,150 M200,100 L300,150' stroke='%234a3f36' fill='none' stroke-width='2'/><circle cx='320' cy='40' r='20' fill='none' stroke='%234a3f36' stroke-width='1.5'/></svg>" alt="Mountain landscape">
+                        <div class="sketch-overlay"></div>
+                    </div>
+                    <h3 class="card-title">The Art of Mountain Sketching</h3>
+                    <p class="card-description">Exploring the timeless techniques of capturing mountain landscapes with pencil and paper...</p>
+                </div>
+                
+                <div class="metadata">
+                    <span>📅 March 15, 2024</span>
+                    <span>✏️ 5 min read</span>
+                    <span>👁️ 1.2k views</span>
+                </div>
+                
+                <div class="action-buttons">
+                    <button class="paper-button primary" onclick="openModal(1)">
+                        Read More
+                    </button>
+                    <button class="paper-button secondary share-button" onclick="toggleShare(event, this)">
+                        Share ✈️
+                        <svg class="paper-airplane" viewBox="0 0 20 20">
+                            <path d="M2,2 L18,10 L2,18 L5,10 Z" fill="#e65100"/>
+                        </svg>
+                        <div class="share-popup">
+                            <div class="share-options">
+                                <button class="share-option" onclick="shareVia('twitter')">🐦</button>
+                                <button class="share-option" onclick="shareVia('facebook')">📘</button>
+                                <button class="share-option" onclick="shareVia('email')">📧</button>
+                                <button class="share-option" onclick="shareVia('copy')">📋</button>
+                            </div>
+                        </div>
+                    </button>
+                </div>
+                
+                <div class="pencil-sketch sketch-1"></div>
+            </div>
+            
+            <!-- Recipe Card -->
+            <div class="paper-card" data-id="2">
+                <div class="paper-texture"></div>
+                <div class="bookmark-ribbon" onclick="toggleBookmark(event, this)"></div>
+                
+                <div class="card-preview">
+                    <div class="card-image">
+                        <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'><rect fill='%23f5e6d3' width='400' height='200'/><text x='50%' y='30%' text-anchor='middle' dy='.3em' fill='%234a3f36' font-family='Patrick Hand' font-size='24'>Grandma's Recipe</text><circle cx='200' cy='120' r='40' fill='none' stroke='%234a3f36' stroke-width='2'/><path d='M160,120 Q200,80 240,120' fill='none' stroke='%234a3f36' stroke-width='1.5'/><circle cx='180' cy='110' r='3' fill='%234a3f36'/><circle cx='220' cy='110' r='3' fill='%234a3f36'/></svg>" alt="Recipe illustration">
+                        <div class="sketch-overlay"></div>
+                    </div>
+                    <h3 class="card-title">Handwritten Apple Pie Recipe</h3>
+                    <p class="card-description">A treasured family recipe passed down through generations, written on aged paper...</p>
+                </div>
+                
+                <div class="metadata">
+                    <span>🥧 Dessert</span>
+                    <span>⏱️ 2 hours</span>
+                    <span>⭐ 4.9 rating</span>
+                </div>
+                
+                <div class="action-buttons">
+                    <button class="paper-button primary" onclick="openModal(2)">
+                        View Recipe
+                    </button>
+                    <button class="paper-button secondary share-button" onclick="toggleShare(event, this)">
+                        Share ✈️
+                        <svg class="paper-airplane" viewBox="0 0 20 20">
+                            <path d="M2,2 L18,10 L2,18 L5,10 Z" fill="#e65100"/>
+                        </svg>
+                        <div class="share-popup">
+                            <div class="share-options">
+                                <button class="share-option" onclick="shareVia('twitter')">🐦</button>
+                                <button class="share-option" onclick="shareVia('facebook')">📘</button>
+                                <button class="share-option" onclick="shareVia('email')">📧</button>
+                                <button class="share-option" onclick="shareVia('copy')">📋</button>
+                            </div>
+                        </div>
+                    </button>
+                </div>
+                
+                <div class="pencil-sketch sketch-2"></div>
+            </div>
+            
+            <!-- Journal Entry Card -->
+            <div class="paper-card" data-id="3">
+                <div class="paper-texture"></div>
+                <div class="bookmark-ribbon active" onclick="toggleBookmark(event, this)"></div>
+                
+                <div class="card-preview">
+                    <div class="card-image">
+                        <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'><rect fill='%23ede4d3' width='400' height='200'/><text x='50%' y='30%' text-anchor='middle' dy='.3em' fill='%234a3f36' font-family='Patrick Hand' font-size='20'>Travel Journal</text><path d='M100,100 Q150,80 200,100 T300,100' stroke='%234a3f36' fill='none' stroke-width='1' stroke-dasharray='2,3'/><path d='M150,130 L170,110 L190,120 L210,105 L230,115 L250,100' stroke='%234a3f36' fill='none' stroke-width='1.5'/></svg>" alt="Journal sketch">
+                        <div class="sketch-overlay"></div>
+                    </div>
+                    <h3 class="card-title">Adventures in Tuscany</h3>
+                    <p class="card-description">Hand-drawn maps and stories from a summer journey through Italian countryside...</p>
+                </div>
+                
+                <div class="metadata">
+                    <span>📍 Travel</span>
+                    <span>📖 8 pages</span>
+                    <span>💭 32 comments</span>
+                </div>
+                
+                <div class="action-buttons">
+                    <button class="paper-button primary" onclick="openModal(3)">
+                        Open Journal
+                    </button>
+                    <button class="paper-button secondary share-button" onclick="toggleShare(event, this)">
+                        Share ✈️
+                        <svg class="paper-airplane" viewBox="0 0 20 20">
+                            <path d="M2,2 L18,10 L2,18 L5,10 Z" fill="#e65100"/>
+                        </svg>
+                        <div class="share-popup">
+                            <div class="share-options">
+                                <button class="share-option" onclick="shareVia('twitter')">🐦</button>
+                                <button class="share-option" onclick="shareVia('facebook')">📘</button>
+                                <button class="share-option" onclick="shareVia('email')">📧</button>
+                                <button class="share-option" onclick="shareVia('copy')">📋</button>
+                            </div>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+    
+    <!-- Modal Overlay -->
+    <div class="modal-overlay" onclick="closeModal(event)">
+        <div class="paper-modal" onclick="event.stopPropagation()">
+            <div class="fold-lines"></div>
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="modal-title">Content Title</h2>
+                    <button class="close-button" onclick="closeModal()">&times;</button>
+                </div>
+                <div class="modal-body">
+                    <!-- Content will be dynamically inserted -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Content data
+        const contentData = {
+            1: {
+                title: "The Art of Mountain Sketching",
+                content: `
+                    <p>There's something magical about sitting on a mountainside with nothing but a sketchbook and pencil. The rough texture of handmade paper beneath your fingers connects you to centuries of artists who've attempted to capture nature's grandeur.</p>
+                    
+                    <p>I learned this technique from an old artist in the Alps, who showed me how to use quick, confident strokes to suggest the massive scale of mountain peaks. "Don't try to draw every rock," he said, his weathered hands moving the pencil with practiced ease. "Let the paper breathe."</p>
+                    
+                    <p>The key is in the observation. Watch how shadows play across the ridges at different times of day. Notice how atmospheric perspective makes distant peaks appear lighter, almost ghostlike. These subtleties, captured in graphite on paper, can convey more emotion than any photograph.</p>
+                    
+                    <p>My favorite papers for mountain sketching are those with a bit of tooth - rough enough to catch the graphite and create texture, but smooth enough for fine details. I often carry several weights, switching between them as the drawing develops.</p>
+                    
+                    <p>Remember, the goal isn't perfection. It's about capturing a moment, a feeling, the essence of standing small before nature's monuments. Let your lines be loose, your shading suggestive. The best mountain sketches feel alive, as if the wind might blow through them at any moment.</p>
+                `
+            },
+            2: {
+                title: "Grandma's Handwritten Apple Pie Recipe",
+                content: `
+                    <p><em>Found tucked between the pages of her cookbook, written in fountain pen on paper now yellowed with age...</em></p>
+                    
+                    <p><strong>For the Crust (makes enough for top and bottom):</strong><br>
+                    2½ cups flour<br>
+                    1 tsp salt<br>
+                    1 cup cold butter (Grandma's note: "must be COLD!")<br>
+                    ¼ to ½ cup ice water</p>
+                    
+                    <p><strong>For the Filling:</strong><br>
+                    6-8 tart apples (she preferred Granny Smith)<br>
+                    ¾ cup sugar (adjust to taste)<br>
+                    2 tbsp flour<br>
+                    1 tsp cinnamon<br>
+                    ¼ tsp nutmeg<br>
+                    Pinch of salt<br>
+                    2 tbsp butter</p>
+                    
+                    <p><em>Her handwritten notes in the margin:</em> "The secret is in the apples - they should make you pucker just a little when raw. And always, always use real butter. None of that margarine nonsense."</p>
+                    
+                    <p><strong>Instructions:</strong><br>
+                    Mix flour and salt. Cut in cold butter until mixture resembles coarse crumbs. Add ice water gradually until dough comes together. Divide in half, wrap, and chill for at least an hour.</p>
+                    
+                    <p>Peel and slice apples thin. Toss with sugar, flour, and spices. Roll out bottom crust, fill with apples, dot with butter. Cover with top crust, seal edges, cut vents.</p>
+                    
+                    <p>Bake at 425°F for 15 minutes, then reduce to 350°F for 35-45 minutes until golden brown. <em>(Another note: "If the edges brown too quick, cover with foil")</em></p>
+                    
+                    <p><em>At the bottom, in shaky handwriting:</em> "Made this for your grandfather every Sunday. Now it's your turn to carry on the tradition. All my love, Grandma"</p>
+                `
+            },
+            3: {
+                title: "Adventures in Tuscany - Travel Journal",
+                content: `
+                    <p><strong>Day 1 - Arrival in Florence</strong><br>
+                    <em>Sketched from the Piazzale Michelangelo at sunset</em></p>
+                    
+                    <p>The paper of this journal already feels different here - maybe it's the Tuscan air, or maybe it's just my imagination. The city spreads below like a Renaissance painting come to life. Terra cotta roofs catch the golden hour light, and I try to capture it with quick pencil strokes.</p>
+                    
+                    <p><strong>Day 3 - The Hills of Chianti</strong><br>
+                    <em>Wine stains on this page are intentional... mostly</em></p>
+                    
+                    <p>Spent the morning sketching vineyards. The way the vines create these perfect lines across the hillsides - it's like nature's own ruled paper. Met an old vintner who laughed at my attempts to draw his ancient olive trees. "You cannot draw age," he said, "you must feel it." I think I understand.</p>
+                    
+                    <p><strong>Day 5 - Siena's Secret Gardens</strong><br>
+                    <em>Pressed flowers between these pages</em></p>
+                    
+                    <p>Found a hidden garden behind the cathedral. The kind of place that makes you want to fill every page with drawings. Stone benches worn smooth by centuries, fountains singing softly, cats lounging in patches of sun. My sketches can't capture the smell of jasmine or the sound of church bells, but they try.</p>
+                    
+                    <p><strong>Day 8 - The Coast at Cinque Terre</strong><br>
+                    <em>Salt spray has warped these pages slightly</em></p>
+                    
+                    <p>Different paper would have been better for the coast - this handmade stock doesn't love the humidity. But there's something perfect about the way the moisture makes my ink lines bleed slightly, like the boundaries between sea and sky in the morning mist.</p>
+                    
+                    <p><strong>Last Day - Reflections</strong><br>
+                    This journal is fuller than just sketches and words. It holds pressed flowers, wine stains, smudges of local soil, even a few tears of joy. The paper has absorbed this journey, becoming part of the story itself. That's the magic of keeping a handwritten travel journal - it becomes an artifact of the adventure, not just a record of it.</p>
+                `
+            }
+        };
+        
+        // Toggle bookmark
+        function toggleBookmark(event, element) {
+            event.stopPropagation();
+            element.classList.toggle('active');
+            
+            const isActive = element.classList.contains('active');
+            const cardTitle = element.closest('.paper-card').querySelector('.card-title').textContent;
+            
+            if (isActive) {
+                showNotification(`"${cardTitle}" added to bookmarks`);
+            } else {
+                showNotification(`"${cardTitle}" removed from bookmarks`);
+            }
+        }
+        
+        // Open modal
+        function openModal(contentId) {
+            const modal = document.querySelector('.modal-overlay');
+            const modalTitle = modal.querySelector('.modal-title');
+            const modalBody = modal.querySelector('.modal-body');
+            
+            const content = contentData[contentId];
+            modalTitle.textContent = content.title;
+            modalBody.innerHTML = content.content;
+            
+            modal.classList.add('active');
+            document.body.style.overflow = 'hidden';
+        }
+        
+        // Close modal
+        function closeModal(event) {
+            if (event && event.target !== event.currentTarget) return;
+            
+            const modal = document.querySelector('.modal-overlay');
+            modal.classList.remove('active');
+            document.body.style.overflow = '';
+        }
+        
+        // Toggle share popup
+        function toggleShare(event, button) {
+            event.stopPropagation();
+            
+            // Close all other share popups
+            document.querySelectorAll('.share-popup').forEach(popup => {
+                if (popup !== button.querySelector('.share-popup')) {
+                    popup.classList.remove('active');
+                }
+            });
+            
+            const popup = button.querySelector('.share-popup');
+            popup.classList.toggle('active');
+        }
+        
+        // Share functionality
+        function shareVia(platform) {
+            event.stopPropagation();
+            
+            const card = event.target.closest('.paper-card');
+            const title = card.querySelector('.card-title').textContent;
+            const shareButton = card.querySelector('.share-button');
+            const airplane = shareButton.querySelector('.paper-airplane');
+            
+            // Close popup
+            const popup = shareButton.querySelector('.share-popup');
+            popup.classList.remove('active');
+            
+            // Animate paper airplane
+            airplane.classList.add('flying');
+            setTimeout(() => {
+                airplane.classList.remove('flying');
+            }, 1500);
+            
+            // Show notification
+            const messages = {
+                twitter: `Shared "${title}" on Twitter`,
+                facebook: `Shared "${title}" on Facebook`,
+                email: `Email composed for "${title}"`,
+                copy: `Link copied for "${title}"`
+            };
+            
+            showNotification(messages[platform]);
+        }
+        
+        // Show notification
+        function showNotification(message) {
+            const notification = document.createElement('div');
+            notification.className = 'notification';
+            notification.textContent = message;
+            notification.style.cssText = `
+                position: fixed;
+                bottom: 2rem;
+                left: 50%;
+                transform: translateX(-50%);
+                background: #fefef4;
+                padding: 1rem 2rem;
+                filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
+                z-index: 2000;
+                font-family: 'Patrick Hand', cursive;
+                color: #4a3f36;
+                clip-path: polygon(
+                    0% 5%, 5% 0%, 95% 0%, 100% 5%,
+                    100% 95%, 95% 100%, 5% 100%, 0% 95%
+                );
+                animation: slide-up 0.3s ease-out;
+            `;
+            
+            // Add animation keyframes if not already present
+            if (!document.querySelector('#notification-styles')) {
+                const style = document.createElement('style');
+                style.id = 'notification-styles';
+                style.textContent = `
+                    @keyframes slide-up {
+                        from {
+                            opacity: 0;
+                            transform: translateX(-50%) translateY(20px);
+                        }
+                        to {
+                            opacity: 1;
+                            transform: translateX(-50%) translateY(0);
+                        }
+                    }
+                `;
+                document.head.appendChild(style);
+            }
+            
+            document.body.appendChild(notification);
+            
+            setTimeout(() => {
+                notification.style.animation = 'slide-up 0.3s ease-out reverse';
+                setTimeout(() => notification.remove(), 300);
+            }, 2000);
+        }
+        
+        // Close share popups when clicking outside
+        document.addEventListener('click', () => {
+            document.querySelectorAll('.share-popup.active').forEach(popup => {
+                popup.classList.remove('active');
+            });
+        });
+        
+        // Add hover effect to cards for subtle animation
+        document.querySelectorAll('.paper-card').forEach(card => {
+            card.addEventListener('mouseenter', function() {
+                this.style.transform = `translateY(-4px) rotate(${Math.random() * 2 - 1}deg)`;
+            });
+            
+            card.addEventListener('mouseleave', function() {
+                this.style.transform = '';
+            });
+        });
+        
+        // Keyboard navigation
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                closeModal();
+                document.querySelectorAll('.share-popup.active').forEach(popup => {
+                    popup.classList.remove('active');
+                });
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/themed_hybrid_all/ui_hybrid_8.html b/legacy/themed_hybrid_all/ui_hybrid_8.html
new file mode 100644
index 0000000..d17161c
--- /dev/null
+++ b/legacy/themed_hybrid_all/ui_hybrid_8.html
@@ -0,0 +1,853 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Digital Minimalism Form Wizard</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --primary: #000000;
+            --secondary: #666666;
+            --tertiary: #999999;
+            --background: #ffffff;
+            --surface: #fafafa;
+            --accent: #0066ff;
+            --error: #ff3333;
+            --success: #00cc88;
+            --border: #e5e5e5;
+            --shadow: rgba(0, 0, 0, 0.05);
+            --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background-color: var(--background);
+            color: var(--primary);
+            line-height: 1.6;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+        }
+
+        main {
+            width: 100%;
+            max-width: 800px;
+        }
+
+        h1 {
+            font-size: 1.5rem;
+            font-weight: 300;
+            margin-bottom: 3rem;
+            text-align: center;
+            letter-spacing: -0.02em;
+        }
+
+        .hybrid-component {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            padding: 3rem;
+            position: relative;
+        }
+
+        /* Progress Line - Minimal */
+        .progress-line {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: var(--border);
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: var(--accent);
+            width: 0%;
+            transition: width var(--transition);
+        }
+
+        /* Step Indicators - Geometric Dots */
+        .step-indicators {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 4rem;
+            position: relative;
+        }
+
+        .step-indicator {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            position: relative;
+            z-index: 2;
+        }
+
+        .step-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: var(--background);
+            border: 2px solid var(--border);
+            transition: all var(--transition);
+            margin-bottom: 0.75rem;
+        }
+
+        .step-indicator.active .step-dot {
+            background: var(--accent);
+            border-color: var(--accent);
+            transform: scale(1.2);
+        }
+
+        .step-indicator.completed .step-dot {
+            background: var(--success);
+            border-color: var(--success);
+        }
+
+        .step-label {
+            font-size: 0.75rem;
+            color: var(--tertiary);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            transition: color var(--transition);
+        }
+
+        .step-indicator.active .step-label,
+        .step-indicator.completed .step-label {
+            color: var(--primary);
+        }
+
+        /* Step Connection Line */
+        .step-connection {
+            position: absolute;
+            top: 6px;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: var(--border);
+            z-index: 1;
+        }
+
+        /* Form Steps */
+        .form-steps {
+            min-height: 300px;
+            position: relative;
+        }
+
+        .form-step {
+            display: none;
+            animation: fadeIn var(--transition) ease-out;
+        }
+
+        .form-step.active {
+            display: block;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* Form Groups */
+        .form-group {
+            margin-bottom: 2rem;
+        }
+
+        .form-label {
+            display: block;
+            font-size: 0.875rem;
+            color: var(--secondary);
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+        }
+
+        .form-input {
+            width: 100%;
+            padding: 0.75rem 0;
+            font-size: 1rem;
+            border: none;
+            border-bottom: 1px solid var(--border);
+            background: transparent;
+            transition: border-color var(--transition);
+            font-family: inherit;
+        }
+
+        .form-input:focus {
+            outline: none;
+            border-color: var(--accent);
+        }
+
+        .form-input.error {
+            border-color: var(--error);
+        }
+
+        /* Validation Messages */
+        .validation-message {
+            font-size: 0.75rem;
+            margin-top: 0.25rem;
+            height: 1rem;
+            color: var(--error);
+            opacity: 0;
+            transform: translateY(-5px);
+            transition: all var(--transition);
+        }
+
+        .validation-message.show {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        /* Radio Groups */
+        .radio-group {
+            display: flex;
+            gap: 2rem;
+            margin-top: 1rem;
+        }
+
+        .radio-option {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+        }
+
+        .radio-input {
+            width: 20px;
+            height: 20px;
+            border: 2px solid var(--border);
+            border-radius: 50%;
+            margin-right: 0.5rem;
+            position: relative;
+            transition: border-color var(--transition);
+        }
+
+        .radio-option input[type="radio"] {
+            display: none;
+        }
+
+        .radio-option input[type="radio"]:checked + .radio-input {
+            border-color: var(--accent);
+        }
+
+        .radio-option input[type="radio"]:checked + .radio-input::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--accent);
+        }
+
+        /* Navigation */
+        .form-navigation {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 3rem;
+            padding-top: 2rem;
+            border-top: 1px solid var(--border);
+        }
+
+        .nav-button {
+            background: none;
+            border: 1px solid var(--border);
+            padding: 0.75rem 2rem;
+            font-size: 0.875rem;
+            cursor: pointer;
+            transition: all var(--transition);
+            font-family: inherit;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .nav-button:hover {
+            border-color: var(--primary);
+            background: var(--primary);
+            color: var(--background);
+        }
+
+        .nav-button.primary {
+            background: var(--primary);
+            color: var(--background);
+            border-color: var(--primary);
+        }
+
+        .nav-button.primary:hover {
+            background: var(--accent);
+            border-color: var(--accent);
+        }
+
+        .nav-button:disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+
+        .nav-button:disabled:hover {
+            background: none;
+            color: var(--primary);
+            border-color: var(--border);
+        }
+
+        /* Arrow Icons */
+        .arrow {
+            width: 16px;
+            height: 16px;
+            position: relative;
+        }
+
+        .arrow::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 8px;
+            height: 8px;
+            border-right: 2px solid currentColor;
+            border-bottom: 2px solid currentColor;
+            transform: translate(-50%, -50%) rotate(-45deg);
+        }
+
+        .arrow.left::before {
+            transform: translate(-50%, -50%) rotate(135deg);
+        }
+
+        /* Save State Indicator */
+        .save-state {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.75rem;
+            color: var(--tertiary);
+            opacity: 0;
+            transition: opacity var(--transition);
+        }
+
+        .save-state.show {
+            opacity: 1;
+        }
+
+        .save-indicator {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--success);
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% {
+                opacity: 0.3;
+            }
+            50% {
+                opacity: 1;
+            }
+        }
+
+        /* Summary Step */
+        .summary-section {
+            margin-bottom: 2rem;
+        }
+
+        .summary-label {
+            font-size: 0.75rem;
+            color: var(--tertiary);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-bottom: 0.25rem;
+        }
+
+        .summary-value {
+            font-size: 1rem;
+            color: var(--primary);
+        }
+
+        /* Success State */
+        .success-message {
+            text-align: center;
+            padding: 3rem;
+            animation: fadeIn var(--transition) ease-out;
+        }
+
+        .success-icon {
+            width: 48px;
+            height: 48px;
+            margin: 0 auto 1.5rem;
+            position: relative;
+        }
+
+        .success-icon::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 25%;
+            width: 10px;
+            height: 16px;
+            border-right: 2px solid var(--success);
+            border-bottom: 2px solid var(--success);
+            transform: translateY(-60%) rotate(45deg);
+        }
+
+        .success-icon::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: 2px solid var(--success);
+            border-radius: 50%;
+        }
+
+        /* Responsive */
+        @media (max-width: 640px) {
+            .hybrid-component {
+                padding: 2rem 1.5rem;
+            }
+
+            .step-label {
+                font-size: 0.625rem;
+            }
+
+            .nav-button {
+                padding: 0.625rem 1.5rem;
+                font-size: 0.75rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>Form Wizard - Digital Minimalism Theme</h1>
+        
+        <div class="hybrid-component">
+            <!-- Progress Line -->
+            <div class="progress-line">
+                <div class="progress-fill" id="progressFill"></div>
+            </div>
+
+            <!-- Save State Indicator -->
+            <div class="save-state" id="saveState">
+                <div class="save-indicator"></div>
+                <span>Auto-saved</span>
+            </div>
+
+            <!-- Step Indicators -->
+            <div class="step-indicators">
+                <div class="step-connection"></div>
+                <div class="step-indicator active" data-step="1">
+                    <div class="step-dot"></div>
+                    <span class="step-label">Personal</span>
+                </div>
+                <div class="step-indicator" data-step="2">
+                    <div class="step-dot"></div>
+                    <span class="step-label">Account</span>
+                </div>
+                <div class="step-indicator" data-step="3">
+                    <div class="step-dot"></div>
+                    <span class="step-label">Preferences</span>
+                </div>
+                <div class="step-indicator" data-step="4">
+                    <div class="step-dot"></div>
+                    <span class="step-label">Review</span>
+                </div>
+            </div>
+
+            <!-- Form Steps -->
+            <div class="form-steps">
+                <!-- Step 1: Personal Information -->
+                <div class="form-step active" data-step="1">
+                    <div class="form-group">
+                        <label class="form-label" for="firstName">First Name</label>
+                        <input type="text" class="form-input" id="firstName" required>
+                        <div class="validation-message" id="firstNameError">Please enter your first name</div>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label" for="lastName">Last Name</label>
+                        <input type="text" class="form-input" id="lastName" required>
+                        <div class="validation-message" id="lastNameError">Please enter your last name</div>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label" for="email">Email Address</label>
+                        <input type="email" class="form-input" id="email" required>
+                        <div class="validation-message" id="emailError">Please enter a valid email address</div>
+                    </div>
+                </div>
+
+                <!-- Step 2: Account Setup -->
+                <div class="form-step" data-step="2">
+                    <div class="form-group">
+                        <label class="form-label" for="username">Username</label>
+                        <input type="text" class="form-input" id="username" required>
+                        <div class="validation-message" id="usernameError">Username must be at least 3 characters</div>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label" for="password">Password</label>
+                        <input type="password" class="form-input" id="password" required>
+                        <div class="validation-message" id="passwordError">Password must be at least 8 characters</div>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label" for="confirmPassword">Confirm Password</label>
+                        <input type="password" class="form-input" id="confirmPassword" required>
+                        <div class="validation-message" id="confirmPasswordError">Passwords do not match</div>
+                    </div>
+                </div>
+
+                <!-- Step 3: Preferences -->
+                <div class="form-step" data-step="3">
+                    <div class="form-group">
+                        <label class="form-label">Notification Frequency</label>
+                        <div class="radio-group">
+                            <label class="radio-option">
+                                <input type="radio" name="notifications" value="daily" checked>
+                                <div class="radio-input"></div>
+                                <span>Daily</span>
+                            </label>
+                            <label class="radio-option">
+                                <input type="radio" name="notifications" value="weekly">
+                                <div class="radio-input"></div>
+                                <span>Weekly</span>
+                            </label>
+                            <label class="radio-option">
+                                <input type="radio" name="notifications" value="never">
+                                <div class="radio-input"></div>
+                                <span>Never</span>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Theme Preference</label>
+                        <div class="radio-group">
+                            <label class="radio-option">
+                                <input type="radio" name="theme" value="light" checked>
+                                <div class="radio-input"></div>
+                                <span>Light</span>
+                            </label>
+                            <label class="radio-option">
+                                <input type="radio" name="theme" value="dark">
+                                <div class="radio-input"></div>
+                                <span>Dark</span>
+                            </label>
+                            <label class="radio-option">
+                                <input type="radio" name="theme" value="auto">
+                                <div class="radio-input"></div>
+                                <span>Auto</span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Step 4: Review -->
+                <div class="form-step" data-step="4">
+                    <div class="summary-section">
+                        <div class="summary-label">Personal Information</div>
+                        <div class="summary-value" id="summaryName">-</div>
+                        <div class="summary-value" id="summaryEmail">-</div>
+                    </div>
+                    <div class="summary-section">
+                        <div class="summary-label">Account Details</div>
+                        <div class="summary-value" id="summaryUsername">-</div>
+                    </div>
+                    <div class="summary-section">
+                        <div class="summary-label">Preferences</div>
+                        <div class="summary-value" id="summaryNotifications">-</div>
+                        <div class="summary-value" id="summaryTheme">-</div>
+                    </div>
+                </div>
+
+                <!-- Success State -->
+                <div class="form-step" data-step="success">
+                    <div class="success-message">
+                        <div class="success-icon"></div>
+                        <h2 style="font-weight: 300; margin-bottom: 0.5rem;">Account Created</h2>
+                        <p style="color: var(--secondary);">Welcome to your minimal digital experience.</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Navigation -->
+            <div class="form-navigation">
+                <button class="nav-button" id="prevBtn" disabled>
+                    <span class="arrow left"></span>
+                    Previous
+                </button>
+                <button class="nav-button primary" id="nextBtn">
+                    Next
+                    <span class="arrow"></span>
+                </button>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Form Wizard State
+        const formWizard = {
+            currentStep: 1,
+            totalSteps: 4,
+            formData: {},
+            saveTimeout: null
+        };
+
+        // DOM Elements
+        const progressFill = document.getElementById('progressFill');
+        const saveState = document.getElementById('saveState');
+        const prevBtn = document.getElementById('prevBtn');
+        const nextBtn = document.getElementById('nextBtn');
+
+        // Initialize form data from localStorage
+        function initializeFormData() {
+            const savedData = localStorage.getItem('formWizardData');
+            if (savedData) {
+                formWizard.formData = JSON.parse(savedData);
+                restoreFormData();
+            }
+        }
+
+        // Save form data
+        function saveFormData() {
+            // Collect current step data
+            collectStepData();
+            
+            // Save to localStorage
+            localStorage.setItem('formWizardData', JSON.stringify(formWizard.formData));
+            
+            // Show save indicator
+            saveState.classList.add('show');
+            clearTimeout(formWizard.saveTimeout);
+            formWizard.saveTimeout = setTimeout(() => {
+                saveState.classList.remove('show');
+            }, 2000);
+        }
+
+        // Restore form data
+        function restoreFormData() {
+            // Restore all form fields
+            Object.keys(formWizard.formData).forEach(key => {
+                const element = document.getElementById(key);
+                if (element) {
+                    if (element.type === 'radio') {
+                        const radio = document.querySelector(`input[name="${element.name}"][value="${formWizard.formData[key]}"]`);
+                        if (radio) radio.checked = true;
+                    } else {
+                        element.value = formWizard.formData[key];
+                    }
+                }
+            });
+        }
+
+        // Collect data from current step
+        function collectStepData() {
+            const currentStepElement = document.querySelector(`.form-step[data-step="${formWizard.currentStep}"]`);
+            if (!currentStepElement) return;
+
+            // Text inputs
+            currentStepElement.querySelectorAll('.form-input').forEach(input => {
+                if (input.value) {
+                    formWizard.formData[input.id] = input.value;
+                }
+            });
+
+            // Radio inputs
+            currentStepElement.querySelectorAll('input[type="radio"]:checked').forEach(radio => {
+                formWizard.formData[radio.name] = radio.value;
+            });
+        }
+
+        // Validate current step
+        function validateStep() {
+            const currentStepElement = document.querySelector(`.form-step[data-step="${formWizard.currentStep}"]`);
+            if (!currentStepElement) return true;
+
+            let isValid = true;
+
+            // Validate text inputs
+            currentStepElement.querySelectorAll('.form-input[required]').forEach(input => {
+                const errorElement = document.getElementById(input.id + 'Error');
+                
+                if (!input.value.trim()) {
+                    input.classList.add('error');
+                    if (errorElement) errorElement.classList.add('show');
+                    isValid = false;
+                } else if (input.type === 'email' && !isValidEmail(input.value)) {
+                    input.classList.add('error');
+                    if (errorElement) errorElement.classList.add('show');
+                    isValid = false;
+                } else if (input.id === 'username' && input.value.length < 3) {
+                    input.classList.add('error');
+                    if (errorElement) errorElement.classList.add('show');
+                    isValid = false;
+                } else if (input.id === 'password' && input.value.length < 8) {
+                    input.classList.add('error');
+                    if (errorElement) errorElement.classList.add('show');
+                    isValid = false;
+                } else if (input.id === 'confirmPassword') {
+                    const password = document.getElementById('password').value;
+                    if (input.value !== password) {
+                        input.classList.add('error');
+                        if (errorElement) errorElement.classList.add('show');
+                        isValid = false;
+                    } else {
+                        input.classList.remove('error');
+                        if (errorElement) errorElement.classList.remove('show');
+                    }
+                } else {
+                    input.classList.remove('error');
+                    if (errorElement) errorElement.classList.remove('show');
+                }
+            });
+
+            return isValid;
+        }
+
+        // Email validation
+        function isValidEmail(email) {
+            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+        }
+
+        // Update progress
+        function updateProgress() {
+            const progress = ((formWizard.currentStep - 1) / formWizard.totalSteps) * 100;
+            progressFill.style.width = progress + '%';
+        }
+
+        // Update step indicators
+        function updateStepIndicators() {
+            document.querySelectorAll('.step-indicator').forEach((indicator, index) => {
+                const stepNum = index + 1;
+                indicator.classList.remove('active', 'completed');
+                
+                if (stepNum < formWizard.currentStep) {
+                    indicator.classList.add('completed');
+                } else if (stepNum === formWizard.currentStep) {
+                    indicator.classList.add('active');
+                }
+            });
+        }
+
+        // Show step
+        function showStep(stepNumber) {
+            // Hide all steps
+            document.querySelectorAll('.form-step').forEach(step => {
+                step.classList.remove('active');
+            });
+
+            // Show current step
+            const currentStepElement = document.querySelector(`.form-step[data-step="${stepNumber}"]`);
+            if (currentStepElement) {
+                currentStepElement.classList.add('active');
+            }
+
+            // Update navigation buttons
+            prevBtn.disabled = stepNumber === 1;
+            
+            if (stepNumber === formWizard.totalSteps) {
+                nextBtn.textContent = 'Submit';
+                nextBtn.innerHTML = 'Submit <span class="arrow"></span>';
+            } else {
+                nextBtn.textContent = 'Next';
+                nextBtn.innerHTML = 'Next <span class="arrow"></span>';
+            }
+
+            // Update progress and indicators
+            updateProgress();
+            updateStepIndicators();
+
+            // Update summary if on review step
+            if (stepNumber === 4) {
+                updateSummary();
+            }
+        }
+
+        // Update summary
+        function updateSummary() {
+            document.getElementById('summaryName').textContent = 
+                `${formWizard.formData.firstName || ''} ${formWizard.formData.lastName || ''}`;
+            document.getElementById('summaryEmail').textContent = 
+                formWizard.formData.email || '-';
+            document.getElementById('summaryUsername').textContent = 
+                `Username: ${formWizard.formData.username || '-'}`;
+            document.getElementById('summaryNotifications').textContent = 
+                `Notifications: ${formWizard.formData.notifications || 'daily'}`;
+            document.getElementById('summaryTheme').textContent = 
+                `Theme: ${formWizard.formData.theme || 'light'}`;
+        }
+
+        // Next step
+        function nextStep() {
+            if (formWizard.currentStep === formWizard.totalSteps) {
+                // Submit form
+                if (validateStep()) {
+                    collectStepData();
+                    saveFormData();
+                    showStep('success');
+                    progressFill.style.width = '100%';
+                    // Clear saved data after successful submission
+                    localStorage.removeItem('formWizardData');
+                    // Hide navigation
+                    document.querySelector('.form-navigation').style.display = 'none';
+                }
+            } else {
+                if (validateStep()) {
+                    collectStepData();
+                    saveFormData();
+                    formWizard.currentStep++;
+                    showStep(formWizard.currentStep);
+                }
+            }
+        }
+
+        // Previous step
+        function prevStep() {
+            if (formWizard.currentStep > 1) {
+                formWizard.currentStep--;
+                showStep(formWizard.currentStep);
+            }
+        }
+
+        // Event Listeners
+        nextBtn.addEventListener('click', nextStep);
+        prevBtn.addEventListener('click', prevStep);
+
+        // Auto-save on input change
+        document.querySelectorAll('.form-input, input[type="radio"]').forEach(input => {
+            input.addEventListener('change', () => {
+                saveFormData();
+            });
+        });
+
+        // Clear validation on input
+        document.querySelectorAll('.form-input').forEach(input => {
+            input.addEventListener('input', () => {
+                const errorElement = document.getElementById(input.id + 'Error');
+                if (input.value.trim()) {
+                    input.classList.remove('error');
+                    if (errorElement) errorElement.classList.remove('show');
+                }
+            });
+        });
+
+        // Initialize
+        initializeFormData();
+        showStep(formWizard.currentStep);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/legacy/themed_hybrid_all/ui_hybrid_9.html b/legacy/themed_hybrid_all/ui_hybrid_9.html
new file mode 100644
index 0000000..93fa5ea
--- /dev/null
+++ b/legacy/themed_hybrid_all/ui_hybrid_9.html
@@ -0,0 +1,691 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Playful Animation Media Player</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --primary-pink: #FF6B9D;
+            --primary-yellow: #FFC857;
+            --primary-blue: #4ECDC4;
+            --primary-purple: #A8E6CF;
+            --primary-orange: #FF6F61;
+            --bg-color: #FAF3F0;
+            --text-dark: #2D3436;
+            --white: #FFFFFF;
+            --shadow: rgba(0, 0, 0, 0.1);
+        }
+
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0) scale(1); }
+            50% { transform: translateY(-10px) scale(1.05); }
+        }
+
+        @keyframes wiggle {
+            0%, 100% { transform: rotate(0deg); }
+            25% { transform: rotate(-5deg); }
+            75% { transform: rotate(5deg); }
+        }
+
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+        }
+
+        @keyframes dance {
+            0%, 100% { transform: translateX(0) rotate(0deg); }
+            25% { transform: translateX(-5px) rotate(-2deg); }
+            75% { transform: translateX(5px) rotate(2deg); }
+        }
+
+        @keyframes rainbow {
+            0% { filter: hue-rotate(0deg); }
+            100% { filter: hue-rotate(360deg); }
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-20px); }
+        }
+
+        body {
+            font-family: 'Comic Sans MS', cursive, sans-serif;
+            background: var(--bg-color);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            overflow-x: hidden;
+        }
+
+        main {
+            width: 100%;
+            max-width: 800px;
+        }
+
+        h1 {
+            text-align: center;
+            color: var(--text-dark);
+            margin-bottom: 30px;
+            font-size: 2.5em;
+            animation: wiggle 2s ease-in-out infinite;
+            text-shadow: 3px 3px 0px var(--primary-pink);
+        }
+
+        .media-player {
+            background: var(--white);
+            border-radius: 30px;
+            box-shadow: 0 20px 40px var(--shadow);
+            overflow: hidden;
+            position: relative;
+        }
+
+        /* Visualizer Section */
+        .visualizer {
+            height: 200px;
+            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-purple) 100%);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .wave {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: flex-end;
+            justify-content: space-around;
+            padding: 0 20px;
+        }
+
+        .wave-bar {
+            width: 6%;
+            background: var(--white);
+            border-radius: 10px 10px 0 0;
+            transition: height 0.2s ease;
+            animation: dance 1s ease-in-out infinite;
+            opacity: 0.8;
+        }
+
+        .wave-bar:nth-child(odd) {
+            animation-delay: 0.1s;
+            background: var(--primary-yellow);
+        }
+
+        .wave-bar:nth-child(even) {
+            animation-delay: 0.2s;
+            background: var(--primary-pink);
+        }
+
+        /* Current Song Display */
+        .current-song {
+            padding: 20px;
+            text-align: center;
+            background: var(--white);
+            position: relative;
+        }
+
+        .song-title {
+            font-size: 1.5em;
+            color: var(--text-dark);
+            margin-bottom: 5px;
+            animation: pulse 2s ease-in-out infinite;
+        }
+
+        .song-artist {
+            color: #7D8E95;
+            font-size: 1.1em;
+        }
+
+        /* Controls Section */
+        .controls {
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+            background: var(--white);
+        }
+
+        .control-btn {
+            background: var(--primary-pink);
+            border: none;
+            color: var(--white);
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            font-size: 1.5em;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            box-shadow: 0 5px 15px rgba(255, 107, 157, 0.3);
+        }
+
+        .control-btn:hover {
+            animation: bounce 0.5s ease-in-out;
+            transform: scale(1.1);
+            box-shadow: 0 10px 25px rgba(255, 107, 157, 0.5);
+        }
+
+        .control-btn:active {
+            transform: scale(0.95);
+        }
+
+        .play-btn {
+            background: var(--primary-blue);
+            width: 80px;
+            height: 80px;
+            font-size: 2em;
+            box-shadow: 0 5px 15px rgba(78, 205, 196, 0.3);
+        }
+
+        .play-btn:hover {
+            box-shadow: 0 10px 25px rgba(78, 205, 196, 0.5);
+        }
+
+        /* Progress Bar */
+        .progress-container {
+            padding: 0 20px 20px;
+            background: var(--white);
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 20px;
+            background: #F0F0F0;
+            border-radius: 10px;
+            overflow: hidden;
+            position: relative;
+            cursor: pointer;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--primary-pink) 0%, var(--primary-yellow) 50%, var(--primary-blue) 100%);
+            width: 35%;
+            border-radius: 10px;
+            position: relative;
+            transition: width 0.3s ease;
+            animation: rainbow 3s linear infinite;
+        }
+
+        .progress-handle {
+            position: absolute;
+            right: -10px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 30px;
+            height: 30px;
+            background: var(--white);
+            border: 4px solid var(--primary-pink);
+            border-radius: 50%;
+            cursor: grab;
+            box-shadow: 0 2px 10px var(--shadow);
+            animation: pulse 1s ease-in-out infinite;
+        }
+
+        /* Playlist Section */
+        .playlist-container {
+            max-height: 300px;
+            overflow-y: auto;
+            padding: 20px;
+            background: #F8F8F8;
+        }
+
+        .playlist-item {
+            background: var(--white);
+            padding: 15px;
+            margin-bottom: 10px;
+            border-radius: 15px;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .playlist-item:hover {
+            transform: translateX(10px);
+            animation: dance 0.5s ease-in-out;
+            box-shadow: 0 5px 15px var(--shadow);
+        }
+
+        .playlist-item.active {
+            background: linear-gradient(135deg, var(--primary-pink) 0%, var(--primary-purple) 100%);
+            color: var(--white);
+            animation: dance 2s ease-in-out infinite;
+        }
+
+        .playlist-number {
+            width: 40px;
+            height: 40px;
+            background: var(--primary-yellow);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            color: var(--text-dark);
+            font-size: 1.2em;
+        }
+
+        .playlist-item.active .playlist-number {
+            background: var(--white);
+            animation: bounce 1s ease-in-out infinite;
+        }
+
+        /* Quality Selector */
+        .quality-selector {
+            padding: 20px;
+            background: var(--white);
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .quality-bubble {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: var(--primary-purple);
+            color: var(--text-dark);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 0.9em;
+            position: relative;
+            box-shadow: 0 5px 10px var(--shadow);
+        }
+
+        .quality-bubble:hover {
+            animation: float 1s ease-in-out;
+            transform: scale(1.2);
+        }
+
+        .quality-bubble.active {
+            background: var(--primary-orange);
+            color: var(--white);
+            animation: pulse 1s ease-in-out infinite;
+            transform: scale(1.3);
+        }
+
+        .quality-bubble.low { width: 50px; height: 50px; font-size: 0.8em; }
+        .quality-bubble.medium { width: 60px; height: 60px; }
+        .quality-bubble.high { width: 70px; height: 70px; font-size: 1em; }
+        .quality-bubble.ultra { width: 80px; height: 80px; font-size: 1.1em; }
+
+        /* Share Button */
+        .share-section {
+            padding: 20px;
+            background: var(--white);
+            text-align: center;
+            border-top: 2px dashed #E0E0E0;
+        }
+
+        .share-btn {
+            background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-pink) 100%);
+            color: var(--white);
+            border: none;
+            padding: 15px 40px;
+            border-radius: 30px;
+            font-size: 1.2em;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            font-weight: bold;
+            box-shadow: 0 5px 15px rgba(255, 111, 97, 0.3);
+        }
+
+        .share-btn:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(255, 111, 97, 0.5);
+            animation: wiggle 0.5s ease-in-out;
+        }
+
+        /* Confetti */
+        .confetti {
+            position: fixed;
+            width: 10px;
+            height: 10px;
+            top: -10px;
+            animation: confetti-fall 3s linear forwards;
+            z-index: 1000;
+        }
+
+        @keyframes confetti-fall {
+            0% {
+                transform: translateY(0) rotate(0deg);
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(100vh) rotate(720deg);
+                opacity: 0;
+            }
+        }
+
+        /* Responsive */
+        @media (max-width: 600px) {
+            h1 { font-size: 2em; }
+            .control-btn { width: 50px; height: 50px; font-size: 1.2em; }
+            .play-btn { width: 70px; height: 70px; font-size: 1.8em; }
+            .quality-bubble { width: 50px; height: 50px; font-size: 0.8em; }
+            .quality-bubble.low { width: 40px; height: 40px; font-size: 0.7em; }
+            .quality-bubble.medium { width: 50px; height: 50px; }
+            .quality-bubble.high { width: 60px; height: 60px; font-size: 0.9em; }
+            .quality-bubble.ultra { width: 70px; height: 70px; font-size: 1em; }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>🎵 Bouncy Music Box 🎵</h1>
+        
+        <div class="media-player">
+            <!-- Visualizer -->
+            <div class="visualizer">
+                <div class="wave" id="waveContainer">
+                    <!-- Wave bars will be generated by JavaScript -->
+                </div>
+            </div>
+            
+            <!-- Current Song Display -->
+            <div class="current-song">
+                <div class="song-title" id="songTitle">Happy Dance Time</div>
+                <div class="song-artist" id="songArtist">The Joyful Beats</div>
+            </div>
+            
+            <!-- Progress Bar -->
+            <div class="progress-container">
+                <div class="progress-bar" id="progressBar">
+                    <div class="progress-fill" id="progressFill">
+                        <div class="progress-handle"></div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Controls -->
+            <div class="controls">
+                <button class="control-btn" id="prevBtn">⏮️</button>
+                <button class="control-btn play-btn" id="playBtn">▶️</button>
+                <button class="control-btn" id="nextBtn">⏭️</button>
+            </div>
+            
+            <!-- Quality Selector -->
+            <div class="quality-selector">
+                <div class="quality-bubble low" data-quality="low">128k</div>
+                <div class="quality-bubble medium" data-quality="medium">256k</div>
+                <div class="quality-bubble high active" data-quality="high">320k</div>
+                <div class="quality-bubble ultra" data-quality="ultra">FLAC</div>
+            </div>
+            
+            <!-- Playlist -->
+            <div class="playlist-container">
+                <div class="playlist-item active" data-index="0">
+                    <div class="playlist-number">1</div>
+                    <div>
+                        <div>Happy Dance Time</div>
+                        <small>The Joyful Beats</small>
+                    </div>
+                </div>
+                <div class="playlist-item" data-index="1">
+                    <div class="playlist-number">2</div>
+                    <div>
+                        <div>Bouncy Castle Dreams</div>
+                        <small>Rainbow Unicorns</small>
+                    </div>
+                </div>
+                <div class="playlist-item" data-index="2">
+                    <div class="playlist-number">3</div>
+                    <div>
+                        <div>Bubble Pop Symphony</div>
+                        <small>Giggle Factory</small>
+                    </div>
+                </div>
+                <div class="playlist-item" data-index="3">
+                    <div class="playlist-number">4</div>
+                    <div>
+                        <div>Marshmallow Clouds</div>
+                        <small>Sweet Melodies</small>
+                    </div>
+                </div>
+                <div class="playlist-item" data-index="4">
+                    <div class="playlist-number">5</div>
+                    <div>
+                        <div>Confetti Carnival</div>
+                        <small>Party Pirates</small>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Share Section -->
+            <div class="share-section">
+                <button class="share-btn" id="shareBtn">🎉 Share the Joy! 🎉</button>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Playlist data
+        const playlist = [
+            { title: 'Happy Dance Time', artist: 'The Joyful Beats' },
+            { title: 'Bouncy Castle Dreams', artist: 'Rainbow Unicorns' },
+            { title: 'Bubble Pop Symphony', artist: 'Giggle Factory' },
+            { title: 'Marshmallow Clouds', artist: 'Sweet Melodies' },
+            { title: 'Confetti Carnival', artist: 'Party Pirates' }
+        ];
+
+        let currentSongIndex = 0;
+        let isPlaying = false;
+        let progress = 35;
+        let animationFrame;
+        let currentQuality = 'high';
+
+        // Create wave bars
+        const waveContainer = document.getElementById('waveContainer');
+        for (let i = 0; i < 15; i++) {
+            const bar = document.createElement('div');
+            bar.className = 'wave-bar';
+            bar.style.height = '20%';
+            bar.style.animationDelay = `${i * 0.1}s`;
+            waveContainer.appendChild(bar);
+        }
+
+        // Visualizer animation
+        function animateVisualizer() {
+            const bars = document.querySelectorAll('.wave-bar');
+            bars.forEach((bar, index) => {
+                if (isPlaying) {
+                    const height = Math.random() * 80 + 20;
+                    bar.style.height = `${height}%`;
+                    
+                    // More complex animations for higher quality
+                    if (currentQuality === 'ultra') {
+                        bar.style.transform = `scaleX(${1 + Math.random() * 0.2}) rotate(${Math.random() * 5 - 2.5}deg)`;
+                    } else if (currentQuality === 'high') {
+                        bar.style.transform = `scaleX(${1 + Math.random() * 0.1})`;
+                    }
+                } else {
+                    bar.style.height = '20%';
+                    bar.style.transform = 'scaleX(1) rotate(0deg)';
+                }
+            });
+            
+            animationFrame = requestAnimationFrame(animateVisualizer);
+        }
+
+        // Play/Pause functionality
+        const playBtn = document.getElementById('playBtn');
+        playBtn.addEventListener('click', () => {
+            isPlaying = !isPlaying;
+            playBtn.textContent = isPlaying ? '⏸️' : '▶️';
+            
+            if (isPlaying) {
+                animateVisualizer();
+                simulateProgress();
+                // Make playlist item dance more when playing
+                document.querySelector('.playlist-item.active').style.animationDuration = '0.5s';
+            } else {
+                document.querySelector('.playlist-item.active').style.animationDuration = '2s';
+            }
+        });
+
+        // Progress simulation
+        function simulateProgress() {
+            if (isPlaying && progress < 100) {
+                progress += 0.1;
+                document.getElementById('progressFill').style.width = `${progress}%`;
+                requestAnimationFrame(simulateProgress);
+            }
+        }
+
+        // Progress bar click
+        document.getElementById('progressBar').addEventListener('click', (e) => {
+            const rect = e.currentTarget.getBoundingClientRect();
+            progress = ((e.clientX - rect.left) / rect.width) * 100;
+            document.getElementById('progressFill').style.width = `${progress}%`;
+        });
+
+        // Song navigation
+        function changeSong(index) {
+            // Update current song index
+            currentSongIndex = index;
+            if (currentSongIndex < 0) currentSongIndex = playlist.length - 1;
+            if (currentSongIndex >= playlist.length) currentSongIndex = 0;
+            
+            // Update UI
+            document.getElementById('songTitle').textContent = playlist[currentSongIndex].title;
+            document.getElementById('songArtist').textContent = playlist[currentSongIndex].artist;
+            
+            // Update playlist active state
+            document.querySelectorAll('.playlist-item').forEach((item, i) => {
+                item.classList.toggle('active', i === currentSongIndex);
+            });
+            
+            // Reset progress
+            progress = 0;
+            document.getElementById('progressFill').style.width = '0%';
+            
+            // Bounce effect on song change
+            const songDisplay = document.querySelector('.current-song');
+            songDisplay.style.animation = 'bounce 0.5s ease-in-out';
+            setTimeout(() => {
+                songDisplay.style.animation = '';
+            }, 500);
+        }
+
+        // Previous/Next buttons
+        document.getElementById('prevBtn').addEventListener('click', () => {
+            changeSong(currentSongIndex - 1);
+        });
+
+        document.getElementById('nextBtn').addEventListener('click', () => {
+            changeSong(currentSongIndex + 1);
+        });
+
+        // Playlist item clicks
+        document.querySelectorAll('.playlist-item').forEach((item, index) => {
+            item.addEventListener('click', () => {
+                changeSong(index);
+            });
+        });
+
+        // Quality selector
+        document.querySelectorAll('.quality-bubble').forEach(bubble => {
+            bubble.addEventListener('click', () => {
+                document.querySelectorAll('.quality-bubble').forEach(b => b.classList.remove('active'));
+                bubble.classList.add('active');
+                currentQuality = bubble.dataset.quality;
+                
+                // Bounce all quality bubbles for fun
+                document.querySelectorAll('.quality-bubble').forEach(b => {
+                    b.style.animation = 'bounce 0.5s ease-in-out';
+                    setTimeout(() => {
+                        b.style.animation = '';
+                    }, 500);
+                });
+                
+                // Update visualizer complexity based on quality
+                const bars = document.querySelectorAll('.wave-bar');
+                bars.forEach((bar, i) => {
+                    if (currentQuality === 'ultra') {
+                        bar.style.width = '5%';
+                    } else if (currentQuality === 'high') {
+                        bar.style.width = '6%';
+                    } else if (currentQuality === 'medium') {
+                        bar.style.width = '7%';
+                    } else {
+                        bar.style.width = '8%';
+                    }
+                });
+            });
+        });
+
+        // Share button with confetti
+        document.getElementById('shareBtn').addEventListener('click', () => {
+            // Create confetti burst
+            for (let i = 0; i < 50; i++) {
+                const confetti = document.createElement('div');
+                confetti.className = 'confetti';
+                confetti.style.left = Math.random() * window.innerWidth + 'px';
+                confetti.style.backgroundColor = ['#FF6B9D', '#FFC857', '#4ECDC4', '#A8E6CF', '#FF6F61'][Math.floor(Math.random() * 5)];
+                confetti.style.animationDelay = Math.random() * 0.5 + 's';
+                confetti.style.animationDuration = (Math.random() * 2 + 2) + 's';
+                document.body.appendChild(confetti);
+                
+                setTimeout(() => confetti.remove(), 4000);
+            }
+            
+            // Bounce the share button
+            const btn = document.getElementById('shareBtn');
+            btn.style.animation = 'bounce 0.5s ease-in-out';
+            setTimeout(() => {
+                btn.style.animation = '';
+            }, 500);
+            
+            // Show mock share message
+            const originalText = btn.textContent;
+            btn.textContent = '🎊 Shared! 🎊';
+            setTimeout(() => {
+                btn.textContent = originalText;
+            }, 2000);
+        });
+
+        // Start visualizer animation
+        animateVisualizer();
+
+        // Add some fun interactions
+        document.addEventListener('mousemove', (e) => {
+            if (isPlaying) {
+                const x = e.clientX / window.innerWidth;
+                const y = e.clientY / window.innerHeight;
+                
+                // Subtle tilt effect on the player
+                const player = document.querySelector('.media-player');
+                const tiltX = (y - 0.5) * 5;
+                const tiltY = (x - 0.5) * -5;
+                player.style.transform = `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
+            }
+        });
+
+        // Reset tilt on mouse leave
+        document.addEventListener('mouseleave', () => {
+            document.querySelector('.media-player').style.transform = '';
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file

ID	Name	Value	Status
001	Sales Data	85%	High
002	User Engagement	62%	Medium
003	Server Load	34%	Low
No results found