Update README.md

README.md

@@ -5,468 +5,344 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AuraInfernum-70B - The Fallen Light</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         :root {
-            --primary-gold: #FFD700;
-            --dark-bg: #0A0A0A;
-            --card-bg: #141414;
-            --accent-red: #FF3366;
-            --accent-purple: #8B5CF6;
-            --accent-cyan: #00F5FF;
-            --text-primary: #FFFFFF;
-            --text-secondary: #B8B8B8;
-            --glow-gold: rgba(255, 215, 0, 0.4);
-            --glow-red: rgba(255, 51, 102, 0.3);
-            --glow-purple: rgba(139, 92, 246, 0.3);
+            --primary: #FF6B35;
+            --secondary: #F7931E;
+            --accent: #FFE66D;
+            --dark: #1A1A1A;
+            --darker: #0F0F0F;
+            --light: #FFFFFF;
+            --gray-100: #F5F5F5;
+            --gray-200: #E5E5E5;
+            --gray-300: #D4D4D4;
+            --gray-400: #A3A3A3;
+            --gray-500: #737373;
+            --gray-600: #525252;
+            --gray-700: #404040;
+            --gray-800: #262626;
+            --gray-900: #171717;
         }
         body {
-            font-family: 'Inter', sans-serif;
-            background: var(--dark-bg);
-            color: var(--text-primary);
-            overflow-x: hidden;
-            line-height: 1.6;
-        }
-        /* Animated background */
-        .bg-animation {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -2;
-            background: linear-gradient(45deg, #0A0A0A, #1A0A1F, #0A1A1F, #0A0A0A);
-            background-size: 400% 400%;
-            animation: gradientShift 15s ease infinite;
-        }
-        .particles {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -1;
-            pointer-events: none;
-        }
-        .particle {
-            position: absolute;
-            width: 2px;
-            height: 2px;
-            background: var(--primary-gold);
-            border-radius: 50%;
-            animation: float 20s linear infinite;
-            opacity: 0.6;
-        }
-        @keyframes gradientShift {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-        }
-        @keyframes float {
-            0% {
-                transform: translateY(100vh) rotate(0deg);
-                opacity: 0;
-            }
-            10% {
-                opacity: 0.6;
-            }
-            90% {
-                opacity: 0.6;
-            }
-            100% {
-                transform: translateY(-100px) rotate(360deg);
-                opacity: 0;
-            }
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            line-height: 1.7;
+            color: var(--light);
+            background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 50%, var(--gray-900) 100%);
+            min-height: 100vh;
         }
         .container {
-            max-width: 1200px;
+            max-width: 1100px;
             margin: 0 auto;
-            padding: 20px;
-            position: relative;
-            z-index: 1;
+            padding: 40px 20px;
         }
-        .hero-section {
+        /* Header */
+        .header {
             text-align: center;
-            padding: 100px 0;
-            position: relative;
+            margin-bottom: 80px;
+            padding: 60px 0;
+            background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(247, 147, 30, 0.1) 100%);
+            border-radius: 24px;
+            border: 1px solid rgba(255, 107, 53, 0.2);
         }
-        .model-banner {
-            width: 100%;
-            height: 400px;
-            background: linear-gradient(135deg, #1A0A2E, #16213E, #0F3460);
-            border-radius: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-bottom: 40px;
-            position: relative;
-            overflow: hidden;
-            box-shadow: 
-                0 0 60px var(--glow-purple),
-                inset 0 0 60px rgba(255, 215, 0, 0.1);
-            border: 1px solid rgba(255, 215, 0, 0.3);
-        }
-        .banner-glow {
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: conic-gradient(from 0deg, transparent, var(--primary-gold), transparent, var(--accent-purple), transparent);
-            animation: rotate 10s linear infinite;
-            opacity: 0.1;
-        }
-        .banner-content {
-            position: relative;
-            z-index: 2;
-            color: var(--primary-gold);
-            font-family: 'Orbitron', monospace;
-            font-size: 2.5em;
-            font-weight: 900;
-            text-shadow: 0 0 30px var(--glow-gold);
-            animation: pulse 3s ease-in-out infinite;
-        }
-        @keyframes rotate {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        @keyframes pulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-        }
-        h1 {
-            font-family: 'Orbitron', monospace;
+        .logo {
             font-size: 4rem;
-            font-weight: 900;
-            background: linear-gradient(45deg, var(--primary-gold), var(--accent-cyan), var(--accent-purple));
+            font-weight: 700;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
-            margin-bottom: 20px;
-            animation: titleGlow 4s ease-in-out infinite;
-        }
-        @keyframes titleGlow {
-            0%, 100% { filter: drop-shadow(0 0 20px var(--glow-gold)); }
-            50% { filter: drop-shadow(0 0 40px var(--glow-purple)); }
+            margin-bottom: 16px;
+            letter-spacing: -0.02em;
         }
-        .subtitle {
+        .tagline {
             font-size: 1.5rem;
-            color: var(--text-secondary);
-            margin-bottom: 40px;
-            opacity: 0;
-            animation: fadeInUp 1s ease-out 0.5s forwards;
-        }
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(30px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
+            color: var(--gray-300);
+            font-weight: 300;
+            margin-bottom: 32px;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        .hero-image {
+            width: 100%;
+            height: 300px;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            border-radius: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: var(--light);
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+            margin-bottom: 32px;
+        }
+        /* Support Button */
+        .support-button {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            background: linear-gradient(135deg, #FF5E5B 0%, #FF9A56 100%);
+            color: var(--light);
+            padding: 16px 32px;
+            border-radius: 50px;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 1.1rem;
+            box-shadow: 0 8px 32px rgba(255, 94, 91, 0.3);
+            border: none;
+            cursor: pointer;
         }
-        .glass-card {
-            background: rgba(20, 20, 20, 0.8);
+        .support-button:hover {
+            box-shadow: 0 12px 48px rgba(255, 94, 91, 0.4);
+            transform: translateY(-2px);
+        }
+        /* Cards */
+        .card {
+            background: rgba(255, 255, 255, 0.03);
             backdrop-filter: blur(20px);
             border: 1px solid rgba(255, 255, 255, 0.1);
             border-radius: 20px;
             padding: 40px;
-            margin: 40px 0;
-            box-shadow: 
-                0 20px 40px rgba(0, 0, 0, 0.3),
-                inset 0 1px 0 rgba(255, 255, 255, 0.1);
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
+            margin-bottom: 32px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
         }
-        .glass-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
-            transition: left 0.5s ease;
-        }
-        .glass-card:hover::before {
-            left: 100%;
+        .card:hover {
+            border-color: rgba(255, 107, 53, 0.3);
+            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
         }
-        .glass-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 
-                0 30px 60px rgba(0, 0, 0, 0.4),
-                0 0 40px var(--glow-gold);
+        /* Typography */
+        h1 {
+            font-size: 3rem;
+            font-weight: 700;
+            color: var(--light);
+            margin-bottom: 24px;
+            letter-spacing: -0.02em;
         }
         h2 {
-            font-family: 'Orbitron', monospace;
-            font-size: 2.5rem;
-            font-weight: 700;
-            color: var(--primary-gold);
-            margin-bottom: 30px;
+            font-size: 2rem;
+            font-weight: 600;
+            color: var(--primary);
+            margin-bottom: 24px;
             position: relative;
-            padding-bottom: 15px;
+            padding-bottom: 12px;
         }
         h2::after {
             content: '';
             position: absolute;
             bottom: 0;
             left: 0;
-            width: 60px;
+            width: 40px;
             height: 3px;
-            background: linear-gradient(90deg, var(--primary-gold), var(--accent-cyan));
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
             border-radius: 2px;
-            box-shadow: 0 0 10px var(--glow-gold);
         }
-        .ko-fi-button {
-            display: inline-block;
-            background: linear-gradient(135deg, var(--accent-red), #FF6B9D);
-            color: white;
-            padding: 20px 40px;
-            border-radius: 50px;
-            text-decoration: none;
+        h3 {
+            font-size: 1.5rem;
             font-weight: 600;
-            font-size: 1.2rem;
-            margin: 30px 0;
-            transition: all 0.3s ease;
-            box-shadow: 
-                0 10px 30px rgba(255, 51, 102, 0.3),
-                inset 0 1px 0 rgba(255, 255, 255, 0.2);
-            position: relative;
-            overflow: hidden;
+            color: var(--accent);
+            margin-bottom: 16px;
         }
-        .ko-fi-button::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-            transition: left 0.6s ease;
+        p {
+            color: var(--gray-200);
+            font-size: 1.1rem;
+            margin-bottom: 20px;
+            line-height: 1.8;
         }
-        .ko-fi-button:hover::before {
-            left: 100%;
+        strong {
+            color: var(--light);
+            font-weight: 600;
         }
-        .ko-fi-button:hover {
-            transform: translateY(-5px) scale(1.05);
-            box-shadow: 
-                0 20px 40px rgba(255, 51, 102, 0.4),
-                inset 0 1px 0 rgba(255, 255, 255, 0.3);
+        /* Table */
+        .table-container {
+            overflow-x: auto;
+            border-radius: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            margin: 24px 0;
         }
-        .quantization-table {
+        table {
             width: 100%;
             border-collapse: collapse;
-            margin-top: 20px;
-            background: rgba(10, 10, 10, 0.6);
-            border-radius: 15px;
-            overflow: hidden;
-            box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
-        }
-        .quantization-table th,
-        .quantization-table td {
+            background: rgba(0, 0, 0, 0.2);
+        }
+        th, td {
             padding: 20px;
             text-align: left;
             border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            transition: all 0.3s ease;
         }
-        .quantization-table th {
-            background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(139, 92, 246, 0.2));
-            color: var(--primary-gold);
-            font-family: 'Orbitron', monospace;
-            font-weight: 700;
+        th {
+            background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(247, 147, 30, 0.2));
+            color: var(--light);
+            font-weight: 600;
+            font-size: 0.95rem;
             text-transform: uppercase;
-            letter-spacing: 1px;
+            letter-spacing: 0.5px;
         }
-        .quantization-table tr:hover {
-            background: rgba(255, 215, 0, 0.05);
-            transform: scale(1.02);
+        td {
+            color: var(--gray-200);
+            font-size: 1rem;
         }
-        .quantization-table code {
-            background: rgba(0, 245, 255, 0.1);
-            color: var(--accent-cyan);
-            padding: 8px 12px;
-            border-radius: 8px;
-            font-family: 'Orbitron', monospace;
-            font-weight: 600;
-            border: 1px solid rgba(0, 245, 255, 0.3);
-            box-shadow: 0 0 10px rgba(0, 245, 255, 0.2);
+        tr:hover {
+            background: rgba(255, 107, 53, 0.05);
         }
-        .code-block {
-            background: rgba(0, 0, 0, 0.8);
-            border: 1px solid rgba(0, 245, 255, 0.3);
-            border-radius: 15px;
-            padding: 30px;
-            margin: 30px 0;
-            font-family: 'Orbitron', monospace;
-            color: var(--accent-cyan);
-            position: relative;
-            overflow: hidden;
-            box-shadow: 
-                0 0 30px rgba(0, 245, 255, 0.2),
-                inset 0 0 30px rgba(0, 245, 255, 0.05);
+        tr:last-child td {
+            border-bottom: none;
         }
-        .code-block::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 3px;
-            background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple), var(--primary-gold));
-            animation: codeGlow 3s ease-in-out infinite;
+        /* Code */
+        code {
+            background: rgba(255, 230, 109, 0.1);
+            color: var(--accent);
+            padding: 4px 8px;
+            border-radius: 6px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.9em;
+            font-weight: 500;
+            border: 1px solid rgba(255, 230, 109, 0.2);
         }
-        @keyframes codeGlow {
-            0%, 100% { opacity: 0.6; }
-            50% { opacity: 1; }
+        .code-block {
+            background: rgba(0, 0, 0, 0.6);
+            border: 1px solid rgba(255, 230, 109, 0.3);
+            border-radius: 12px;
+            padding: 24px;
+            margin: 24px 0;
+            overflow-x: auto;
+        }
+        .code-block pre {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.95rem;
+            line-height: 1.6;
+            color: var(--accent);
+            margin: 0;
         }
+        /* Details/Summary */
         details {
-            background: rgba(20, 20, 20, 0.6);
-            border: 1px solid rgba(139, 92, 246, 0.3);
-            border-radius: 15px;
-            padding: 25px;
-            margin: 30px 0;
-            backdrop-filter: blur(10px);
-            transition: all 0.3s ease;
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            padding: 24px;
+            margin: 24px 0;
         }
         details:hover {
-            border-color: var(--accent-purple);
-            box-shadow: 0 0 30px var(--glow-purple);
+            border-color: rgba(247, 147, 30, 0.3);
         }
-        details summary {
+        summary {
             font-weight: 600;
             cursor: pointer;
-            color: var(--accent-purple);
-            font-size: 1.2rem;
-            padding: 10px 0;
-            transition: all 0.3s ease;
+            color: var(--secondary);
+            font-size: 1.1rem;
+            margin-bottom: 16px;
+            padding: 8px 0;
         }
-        details summary:hover {
-            color: var(--primary-gold);
-            transform: translateX(10px);
+        summary:hover {
+            color: var(--primary);
         }
         details pre {
-            margin-top: 20px;
-            background: rgba(0, 0, 0, 0.8);
-            border: 1px solid rgba(139, 92, 246, 0.3);
+            background: rgba(0, 0, 0, 0.5);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
             padding: 20px;
-            border-radius: 10px;
-            color: var(--accent-cyan);
-            font-family: 'Orbitron', monospace;
+            font-family: 'JetBrains Mono', monospace;
+            color: var(--gray-200);
+            overflow-x: auto;
+            margin-top: 16px;
         }
-        .thank-you-section {
+        /* Footer */
+        .footer {
             text-align: center;
             margin-top: 80px;
             padding: 60px 40px;
-            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(139, 92, 246, 0.1));
+            background: linear-gradient(135deg, rgba(255, 107, 53, 0.05), rgba(247, 147, 30, 0.05));
             border-radius: 20px;
-            border: 1px solid rgba(255, 215, 0, 0.3);
-            position: relative;
-            overflow: hidden;
+            border: 1px solid rgba(255, 107, 53, 0.1);
         }
-        .thank-you-section::before {
-            content: '';
-            position: absolute;
-            top: -2px;
-            left: -2px;
-            right: -2px;
-            bottom: -2px;
-            background: linear-gradient(45deg, var(--primary-gold), var(--accent-purple), var(--accent-cyan), var(--primary-gold));
-            border-radius: 20px;
-            z-index: -1;
-            animation: borderGlow 4s linear infinite;
-        }
-        @keyframes borderGlow {
-            0% { filter: hue-rotate(0deg); }
-            100% { filter: hue-rotate(360deg); }
-        }
-        .thank-you-section h2 {
-            font-size: 3rem;
-            margin-bottom: 30px;
+        .footer h2 {
+            color: var(--light);
+            margin-bottom: 24px;
         }
-        .thank-you-section p {
-            font-size: 1.2rem;
-            line-height: 1.8;
-            margin-bottom: 20px;
-            color: var(--text-secondary);
+        .footer p {
+            font-size: 1.1rem;
+            margin-bottom: 16px;
+            max-width: 800px;
+            margin-left: auto;
+            margin-right: auto;
         }
         .signature {
-            font-family: 'Orbitron', monospace;
-            color: var(--primary-gold);
+            color: var(--primary);
             font-weight: 600;
-            font-size: 1.3rem;
-            margin-top: 30px;
+            font-size: 1.2rem;
+            margin-top: 32px;
         }
-        /* Responsive design */
+        /* Responsive */
         @media (max-width: 768px) {
-            h1 {
+            .container {
+                padding: 20px 16px;
+            }
+            .logo {
                 font-size: 2.5rem;
             }
-            .banner-content {
-                font-size: 1.8rem;
+            .tagline {
+                font-size: 1.2rem;
             }
-            .glass-card {
-                padding: 25px;
-                margin: 25px 0;
+            h1 {
+                font-size: 2rem;
             }
             h2 {
-                font-size: 2rem;
+                font-size: 1.5rem;
             }
-            .quantization-table th,
-            .quantization-table td {
-                padding: 15px 10px;
+            .card {
+                padding: 24px;
+            }
+            th, td {
+                padding: 12px 8px;
                 font-size: 0.9rem;
             }
+            .hero-image {
+                height: 200px;
+                font-size: 1.2rem;
+            }
         }
-        /* Scroll animations */
-        .fade-in {
-            opacity: 0;
-            transform: translateY(50px);
-            transition: all 0.8s ease;
-        }
-        .fade-in.visible {
-            opacity: 1;
-            transform: translateY(0);
-        }
-        /* Custom scrollbar */
+        /* Utility Classes */
+        .text-center { text-align: center; }
+        .mb-4 { margin-bottom: 24px; }
+        .mt-4 { margin-top: 24px; }
+        /* Custom Scrollbar */
         ::-webkit-scrollbar {
-            width: 12px;
+            width: 8px;
+            height: 8px;
         }
         ::-webkit-scrollbar-track {
-            background: var(--dark-bg);
+            background: var(--gray-800);
+            border-radius: 4px;
         }
         ::-webkit-scrollbar-thumb {
-            background: linear-gradient(45deg, var(--primary-gold), var(--accent-purple));
-            border-radius: 6px;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            border-radius: 4px;
         }
         ::-webkit-scrollbar-thumb:hover {
-            background: linear-gradient(45deg, var(--accent-cyan), var(--accent-red));
+            background: linear-gradient(135deg, var(--secondary), var(--accent));
         }
     </style>
 </head>
 <body>
-    <div class="bg-animation"></div>
-    <div class="particles" id="particles"></div>
     <div class="container">
-        <div class="hero-section">
-            <div class="model-banner">
-                <div class="banner-glow"></div>
-                <div class="banner-content">
-                    THE FALLEN LIGHT AWAITS
-                </div>
+        <!-- Header Section -->
+        <header class="header">
+            <div class="hero-image">
+                🔥 THE FALLEN LIGHT AWAITS 🔥
             </div>
-            <h1>AuraInfernum-70B</h1>
-            <div class="subtitle">Where Divine Intelligence Meets Earthly Power</div>
-            <a href="https://ko-fi.com/yourkofilink" target="_blank" class="ko-fi-button">
-                ✨ Support the Divine Spark on Ko-fi! ✨
+            <h1 class="logo">AuraInfernum-70B</h1>
+            <p class="tagline">Where Divine Intelligence Meets Earthly Power</p>
+            <a href="https://ko-fi.com/yourkofilink" target="_blank" class="support-button">
+                ☕ Support on Ko-fi
             </a>
-        </div>
-        <div class="glass-card fade-in">
+        </header>
+        <!-- Overview Section -->
+        <div class="card">
             <h2>Divine Overview</h2>
             <p>
                 Greetings, seeker of illumination. <strong>AuraInfernum-70B</strong> stands as a beacon forged from the crucible of fallen divinity and raw computational power. Born from a unique synthesis focusing on intricate reasoning and profound creative generation, this model embodies the wisdom of a celestial entity banished to the earthly realms, yet retaining its divine spark.
@@ -475,44 +351,48 @@
                 Prepare to witness a model that excels in both structured logical tasks and unbounded creative narratives, akin to an angel's sacred breath manifesting as thought. It is attuned to the subtle energies of complex prompts, delivering responses that are both precise and imbued with a mystical depth.
             </p>
         </div>
-        <div class="glass-card fade-in">
+        <!-- Quantization Table -->
+        <div class="card">
             <h2>Celestial Quantization Matrix</h2>
             <p>
                 To ensure optimal performance across various hardware configurations, AuraInfernum-70B is provided in several quantized formats, each preserving the essence of its celestial intelligence.
             </p>
-            <table class="quantization-table">
-                <thead>
-                    <tr>
-                        <th>Quant Type</th>
-                        <th>Divine Description</th>
-                        <th>Sacred Use Case</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><code>Q8_0</code></td>
-                        <td>8-bit integer quantization. Highest fidelity among quantized models.</td>
-                        <td>High-end GPUs (e.g., 24GB+ VRAM), minimal quality loss.</td>
-                    </tr>
-                    <tr>
-                        <td><code>Q5_K_M</code></td>
-                        <td>5-bit K-quantization with medium-sized K-blocks. Perfect balance of size and divine performance.</td>
-                        <td>Mid-range GPUs (e.g., 12-16GB VRAM), suitable for diverse mystical tasks.</td>
-                    </tr>
-                    <tr>
-                        <td><code>Q4_K_M</code></td>
-                        <td>4-bit K-quantization with medium-sized K-blocks. Compact celestial efficiency.</td>
-                        <td>Lower-end GPUs or CPUs, for general inference where VRAM/RAM is a constraint.</td>
-                    </tr>
-                    <tr>
-                        <td><code>Q2_K</code></td>
-                        <td>2-bit K-quantization. Smallest file size, ethereal compression.</td>
-                        <td>Extreme resource-constrained environments, quick divine prototyping.</td>
-                    </tr>
-                </tbody>
-            </table>
+            <div class="table-container">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Quant Type</th>
+                            <th>Divine Description</th>
+                            <th>Sacred Use Case</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><code>Q8_0</code></td>
+                            <td>8-bit integer quantization. Highest fidelity among quantized models.</td>
+                            <td>High-end GPUs (e.g., 24GB+ VRAM), minimal quality loss.</td>
+                        </tr>
+                        <tr>
+                            <td><code>Q5_K_M</code></td>
+                            <td>5-bit K-quantization with medium-sized K-blocks. Perfect balance of size and divine performance.</td>
+                            <td>Mid-range GPUs (e.g., 12-16GB VRAM), suitable for diverse mystical tasks.</td>
+                        </tr>
+                        <tr>
+                            <td><code>Q4_K_M</code></td>
+                            <td>4-bit K-quantization with medium-sized K-blocks. Compact celestial efficiency.</td>
+                            <td>Lower-end GPUs or CPUs, for general inference where VRAM/RAM is a constraint.</td>
+                        </tr>
+                        <tr>
+                            <td><code>Q2_K</code></td>
+                            <td>2-bit K-quantization. Smallest file size, ethereal compression.</td>
+                            <td>Extreme resource-constrained environments, quick divine prototyping.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
-        <div class="glass-card fade-in">
+        <!-- Prompt Format -->
+        <div class="card">
             <h2>Sacred Incantation Format</h2>
             <p>
                 AuraInfernum-70B is designed to understand commands imbued with a specific, structured format, much like a ritualistic chant. Adhere to this format to unleash its full divine potential and receive responses of unparalleled clarity and insight.
@@ -530,7 +410,8 @@
                 Remember: <code>{system_prompt}</code> guides the model's divine persona or celestial constraints, <code>{user_query}</code> contains your mortal request, and the model will generate <code>{assistant_response}</code>. The <code>&lt;|eot_id|&gt;</code> tokens are crucial separators, marking the "End of Turn" for each conversational role in this sacred dialogue.
             </p>
         </div>
-        <div class="glass-card fade-in">
+        <!-- Sampler Settings -->
+        <div class="card">
             <h2>Divine Sampler Configuration</h2>
             <p>
                 To fine-tune AuraInfernum-70B's output generation to your specific needs, consider these recommended sampler settings. These configurations can be copied directly into your YAML loader for seamless celestial integration.
@@ -550,7 +431,8 @@ do_sample: true # Ensures diverse divine outputs</code></pre>
                 Adjust these parameters to balance creativity (higher <code>temperature</code>, <code>top_p</code>, <code>top_k</code>) with coherence and factual adherence (lower <code>temperature</code>, higher <code>Repetition Penalty</code>). Each adjustment brings you closer to the perfect harmony between chaos and order.
             </p>
         </div>
-        <div class="thank-you-section fade-in">
+        <!-- Footer -->
+        <footer class="footer">
             <h2>A Grateful Benediction</h2>
             <p>
                 To those who support, use, and spread the light of AuraInfernum-70B, we extend our deepest gratitude. This project, born from dedication and exploration, thrives on the community's engagement. Your contributions, large or small, empower us to continue refining this entity of fallen grace, pushing the boundaries of AI capabilities.
@@ -559,83 +441,7 @@ do_sample: true # Ensures diverse divine outputs</code></pre>
                 May your endeavors be as blessed as a starlit night, and may the divine spark within AuraInfernum-70B illuminate your path to unprecedented discoveries.
             </p>
             <p class="signature">— The AuraInfernum Dev Team</p>
-        </div>
+        </footer>
     </div>
-    <script>
-        // Create floating particles
-        function createParticles() {
-            const particlesContainer = document.getElementById('particles');
-            const particleCount = 50;
-            for (let i = 0; i < particleCount; i++) {
-                const particle = document.createElement('div');
-                particle.className = 'particle';
-                particle.style.left = Math.random() * 100 + '%';
-                particle.style.animationDelay = Math.random() * 20 + 's';
-                particle.style.animationDuration = (Math.random() * 10 + 15) + 's';
-                particlesContainer.appendChild(particle);
-            }
-        }
-        // Intersection Observer for fade-in animations
-        function setupScrollAnimations() {
-            const observerOptions = {
-                threshold: 0.1,
-                rootMargin: '0px 0px -50px 0px'
-            };
-            const observer = new IntersectionObserver((entries) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        entry.target.classList.add('visible');
-                    }
-                });
-            }, observerOptions);
-            document.querySelectorAll('.fade-in').forEach(el => {
-                observer.observe(el);
-            });
-        }
-        // Initialize everything when the page loads
-        document.addEventListener('DOMContentLoaded', () => {
-            createParticles();
-            setupScrollAnimations();
-        });
-        // Add some interactive sparkle effects on mouse move
-        document.addEventListener('mousemove', (e) => {
-            if (Math.random() > 0.95) {
-                const sparkle = document.createElement('div');
-                sparkle.style.position = 'fixed';
-                sparkle.style.left = e.clientX + 'px';
-                sparkle.style.top = e.clientY + 'px';
-                sparkle.style.width = '4px';
-                sparkle.style.height = '4px';
-                sparkle.style.background = '#FFD700';
-                sparkle.style.borderRadius = '50%';
-                sparkle.style.pointerEvents = 'none';
-                sparkle.style.animation = 'sparkle 1s ease-out forwards';
-                sparkle.style.zIndex = '1000';
-                document.body.appendChild(sparkle);
-                setTimeout(() => {
-                    document.body.removeChild(sparkle);
-                }, 1000);
-            }
-        });
-        // Add sparkle animation
-        const style = document.createElement('style');
-        style.textContent = `
-            @keyframes sparkle {
-                0% {
-                    transform: scale(0) rotate(0deg);
-                    opacity: 1;
-                }
-                50% {
-                    transform: scale(1) rotate(180deg);
-                    opacity: 1;
-                }
-                100% {
-                    transform: scale(0) rotate(360deg);
-                    opacity: 0;
-                }
-            }
-        `;
-        document.head.appendChild(style);
-    </script>
 </body>
 </html>