diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,600 +3,2246 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Castlevania Arkanoid</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <title>Arcane Calculator Nexus</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=MedievalSharp&display=swap');
-        
+        /* ===== Global Variables ===== */
+        :root {
+            /* Layout Variables (Following the provided template) */
+            --nav-bar-width: 95px;
+            --char-panel-width: 0px;
+            --settings-panel-width: 0px;
+            --drawer-content-panel-width: 0px;
+            --authors-note-panel-width: 0px;
+            --expression-image-width: 0px;
+            --cfgConfig-panel-width: 0px;
+            --logprobsViewer-panel-width: 0px;
+            --stcdxcodex: 0px;
+            --bottomFormBlockSize: 85px;
+            --chat-panel-width: 0px;
+
+            /* Avatar Variables */
+            --avatar-base-width: 105px;
+            --avatar-base-height: 105px;
+            --big-avatar-width-factor: 2.5;
+            --big-avatar-height-factor: 3.5;
+            --big-avatar-border-factor: 3;
+
+            /* Color Palette & Theme (Enhanced for mystical arcane tech with East Asian aesthetics) */
+            --background-base: #05010A;
+            --panel-bg-color: rgba(10, 5, 20, 0.92);
+            --panel-bg-color-translucent: rgba(15, 10, 25, 0.85);
+            --glass-tint: rgba(30, 20, 40, 0.4);
+            --highlight-color: rgba(255, 255, 255, 0.35);
+            --highlight-color-strong: rgba(255, 255, 255, 0.5);
+            --text-color: rgba(240, 235, 250, 0.98);
+            --text-color-secondary: rgba(190, 180, 210, 0.88);
+            --mechanical-highlight: rgba(255, 255, 255, 0.45);
+            --mechanical-shadow: rgba(0, 0, 0, 0.6);
+            --mechanical-gray: rgba(50, 40, 60, 0.9);
+            --accent-color: var(--SmartThemeShadowColor); /* Using SmartThemeShadowColor as per instruction */
+            --accent-color-darker: color-mix(in srgb, var(--accent-color), black 50%);
+            --accent-color-brighter: color-mix(in srgb, var(--accent-color), white 40%);
+            --accent-color-subtle: color-mix(in srgb, var(--accent-color), black 25%);
+            --accent-color-glow: color-mix(in srgb, var(--accent-color), white 30%);
+            --gold-color: rgba(220, 180, 60, 0.88);
+            --serene-color: rgba(180, 220, 240, 0.25);
+            --luxury-color: rgba(60, 40, 50, 0.9);
+            --spiritual-color: rgba(110, 80, 130, 0.82);
+            --dark-ember: rgba(60, 10, 20, 0.85);
+            --mystic-blue: rgba(40, 70, 110, 0.75);
+            --crimson-glow: rgba(130, 10, 30, 0.65);
+            --ethereal-mist: rgba(210, 200, 230, 0.18);
+            --ancient-stone: rgba(70, 60, 80, 0.88);
+            --shadow-realm: rgba(15, 10, 25, 0.92);
+            --chat-bubble-user: rgba(76, 175, 80, 0.35);
+            --chat-bubble-other: rgba(60, 50, 70, 0.75);
+
+            /* Gradients & Textures (Enhanced for arcane-tech aesthetic with moody, artistic tones) */
+            --background-gradient: radial-gradient(ellipse at 75% 85%, rgba(var(--accent-color-rgb), 0.2) 0%, transparent 65%), radial-gradient(circle at center, rgba(10, 5, 15, 0.95), rgba(0, 0, 0, 0.98));
+            --panel-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.3));
+            --accent-gradient: linear-gradient(135deg, var(--accent-color-brighter), var(--accent-color-darker));
+            --cyberpunk-mist: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.22), transparent 75%);
+            --gothic-stone: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 6px, transparent 6px, transparent 12px);
+            --rune-glow: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.35), transparent 70%);
+            --industrial-metal: linear-gradient(145deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 45%, transparent 65%, rgba(0, 0, 0, 0.2) 95%, rgba(0, 0, 0, 0.3) 100%);
+            --dark-aura: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.3), transparent 65%);
+            --cinematic-gradient: linear-gradient(135deg, rgba(20, 15, 25, 0.94), rgba(5, 3, 8, 0.96));
+            --distressed-metal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' fill-opacity='0.08' d='M1 5h1v1H1V5zm2-2h1v1H3V3zM7 8h1v1H7V8zm2-2h1v1H9V6z'%3E%3C/path%3E%3C/svg%3E");
+            --bezel-gradient: linear-gradient(135deg, rgba(60, 50, 70, 0.88), rgba(25, 20, 35, 0.9));
+            --vent-pattern: repeating-linear-gradient(to right, transparent, transparent 18px, rgba(0, 0, 0, 0.4) 18px, rgba(0, 0, 0, 0.4) 26px);
+            --segmented-line: repeating-linear-gradient(to right, var(--mechanical-gray), var(--mechanical-gray) 9px, transparent 9px, transparent 18px);
+            --energy-pulse-gradient: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.7), transparent 60%);
+            --ember-glow: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.5), transparent 65%);
+            --etched-texture: repeating-linear-gradient(to right, transparent, transparent 5px, rgba(255, 255, 255, 0.06) 5px, rgba(255, 255, 255, 0.06) 6px);
+            --glitch-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ffffff' fill-opacity='0.12' d='M1 1h1v1H1V1zm2 2h1v1H3V3z'%3E%3C/path%3E%3C/svg%3E");
+            --spiritual-gradient: linear-gradient(145deg, rgba(110, 80, 130, 0.45), rgba(60, 45, 70, 0.35));
+            --serene-gradient: linear-gradient(145deg, rgba(180, 220, 240, 0.18), rgba(110, 80, 130, 0.18));
+            --lotus-gradient: radial-gradient(circle, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1));
+            --mandala-gradient: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+            --golden-light-gradient: linear-gradient(145deg, var(--accent-color), rgba(220, 180, 60, 0.1));
+            --buddhist-glow: radial-gradient(circle, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.1) 60%);
+            --zen-garden-gradient: linear-gradient(145deg, rgba(50, 50, 50, 0.18), rgba(30, 30, 30, 0.1));
+            --silk-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+            --mystic-fog-gradient: radial-gradient(circle, rgba(110, 80, 130, 0.18), rgba(60, 45, 70, 0.1));
+            --wuxia-smoke: radial-gradient(circle, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03) 80%);
+            --tao-water-ripple: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06) 70%);
+            --bamboo-texture: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12) 2px, transparent 2px, transparent 4px);
+            --ink-wash-effect: radial-gradient(circle, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.12) 60%);
+            --calligraphy-stroke: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06));
+            --lotus-petal: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06) 70%);
+            --spiritual-aura: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06) 60%);
+            --koi-pond-effect: radial-gradient(circle, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03) 70%);
+            --sakura-petals: radial-gradient(circle, rgba(255, 190, 200, 0.12), rgba(255, 190, 200, 0.06) 70%);
+            --rune-etched-gradient: linear-gradient(145deg, rgba(var(--accent-color-rgb), 0.4), rgba(var(--accent-color-rgb), 0.2) 65%);
+            --arcane-pulse: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.6), transparent 55%);
+            --mystic-gradient: linear-gradient(145deg, var(--mystic-blue), rgba(15, 35, 60, 0.65));
+            --ember-gradient: linear-gradient(135deg, var(--dark-ember), rgba(35, 5, 10, 0.65));
+            --ancient-gradient: linear-gradient(135deg, var(--ancient-stone), rgba(45, 40, 55, 0.85));
+            --crimson-gradient: linear-gradient(135deg, var(--crimson-glow), rgba(90, 5, 20, 0.55));
+            --mist-gradient: radial-gradient(circle, var(--ethereal-mist), rgba(210, 200, 230, 0.08) 75%);
+            --shadow-realm-gradient: linear-gradient(145deg, var(--shadow-realm), rgba(10, 5, 15, 0.94));
+            --luxurious-gradient: linear-gradient(135deg, var(--luxury-color), rgba(40, 30, 35, 0.88));
+            --chat-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2));
+            --ornate-gradient: linear-gradient(135deg, rgba(220, 180, 60, 0.3), rgba(110, 80, 130, 0.3));
+            --ethereal-gradient: linear-gradient(135deg, rgba(180, 220, 240, 0.25), rgba(210, 200, 230, 0.25));
+            --chat-bubble-gradient-user: linear-gradient(145deg, rgba(var(--accent-color-rgb), 0.35), rgba(var(--accent-color-rgb), 0.15));
+            --chat-bubble-gradient-other: linear-gradient(145deg, rgba(80, 70, 90, 0.35), rgba(40, 30, 50, 0.25));
+            --nav-tab-gradient: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.4), rgba(var(--accent-color-rgb), 0.2));
+            --nav-tab-active-gradient: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.7), rgba(var(--accent-color-rgb), 0.4));
+            --button-operator-gradient: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.5), rgba(var(--accent-color-rgb), 0.3));
+            --button-equals-gradient: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.6), rgba(var(--accent-color-rgb), 0.4));
+            --button-advanced-gradient: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.3), rgba(var(--accent-color-rgb), 0.2));
+            --button-memory-gradient: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.4), rgba(var(--accent-color-rgb), 0.25));
+
+            /* Shadows & Depth (Enhanced for dramatic 3D effects with gothic and cinematic tones) */
+            --shadow-soft: 0 0 50px var(--accent-color-subtle);
+            --shadow-strong: 0 20px 55px rgba(0, 0, 0, 0.88);
+            --shadow-depth-light: rgba(255, 255, 255, 0.15);
+            --shadow-depth-dark: rgba(0, 0, 0, 0.75);
+            --shadow-neumorphic-raised: 14px 14px 28px var(--shadow-depth-dark), -14px -14px 28px var(--shadow-depth-light);
+            --shadow-neumorphic-pressed: inset 14px 14px 28px var(--shadow-depth-dark), inset -14px -14px 28px var(--shadow-depth-light);
+            --shadow-glow: 0 0 35px var(--accent-color), 0 0 70px var(--accent-color-darker);
+            --text-shadow: 0 5px 10px rgba(0, 0, 0, 0.85);
+            --text-shadow-glow: 0 0 18px var(--accent-color);
+            --hover-glow: 0 0 65px var(--accent-color-subtle);
+            --mechanical-inset-shadow: inset 0 6px 12px var(--mechanical-shadow), inset 0 -6px 10px var(--mechanical-highlight);
+            --mechanical-raised-shadow: 0 10px 18px var(--mechanical-shadow), inset 0 -6px 10px var(--mechanical-highlight), inset 0 5px 6px var(--mechanical-highlight);
+            --cinematic-shadow: 0 30px 70px rgba(0, 0, 0, 0.98), 0 0 90px rgba(var(--accent-color-rgb), 0.18);
+            --emboss-shadow: 3px 3px 6px rgba(0, 0, 0, 0.55), -3px -3px 6px rgba(255, 255, 255, 0.12);
+            --deep-emboss: inset 4px 4px 8px rgba(0, 0, 0, 0.65), inset -4px -4px 8px rgba(255, 255, 255, 0.12);
+            --arcane-glow: 0 0 25px var(--accent-color), 0 0 50px rgba(var(--accent-color-rgb), 0.65);
+            --mystic-shadow: 0 0 40px rgba(var(--mystic-blue-rgb), 0.4);
+            --ember-shadow: 0 0 30px rgba(var(--dark-ember-rgb), 0.6);
+            --crimson-shadow: 0 0 35px rgba(var(--crimson-glow-rgb), 0.45);
+            --ethereal-shadow: 0 0 45px rgba(var(--ethereal-mist-rgb), 0.35);
+            --luxury-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 25px rgba(var(--accent-color-rgb), 0.25);
+            --ornate-shadow: 0 8px 20px rgba(0, 0, 0, 0.7), 0 0 15px rgba(220, 180, 60, 0.3);
+            --chat-bubble-shadow: 5px 5px 15px rgba(0, 0, 0, 0.6), -3px -3px 10px rgba(255, 255, 255, 0.1);
+            --nav-tab-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), inset 0 -3px 6px rgba(255, 255, 255, 0.15);
+            --nav-tab-active-shadow: 0 8px 16px rgba(0, 0, 0, 0.7), inset 0 -4px 8px rgba(255, 255, 255, 0.2), 0 0 20px var(--accent-color);
+            --button-operator-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
+            --button-equals-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), inset 0 -3px 6px rgba(255, 255, 255, 0.15), 0 0 15px var(--accent-color);
+            --button-advanced-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
+            --button-memory-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
+            --button-number-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
+            --button-clear-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
+
+            /* Borders & Edges (Enhanced for intricate detailing with gothic and mystical elements) */
+            --border-radius: 28px;
+            --border-width: 3px;
+            --border-color: rgba(255, 255, 255, 0.25);
+            --border-color-accent: var(--accent-color-subtle);
+            --border-bevel-outer: inset -3px -3px 6px rgba(0, 0, 0, 0.65), inset 3px 3px 3px rgba(255, 255, 255, 0.15);
+            --border-bevel-inner: inset 3px 3px 6px rgba(0, 0, 0, 0.65), inset -3px -3px 3px rgba(255, 255, 255, 0.15);
+            --gradient-border: linear-gradient(145deg, var(--accent-color), var(--accent-color-darker));
+            --mechanical-border: 3px solid rgba(255, 255, 255, 0.15);
+            --etched-border: 4px solid rgba(255, 255, 255, 0.18), inset 4px 4px 8px rgba(0, 0, 0, 0.5);
+            --ornament-border: 1.5px dashed rgba(255, 255, 255, 0.12);
+            --gothic-border: 3px double rgba(var(--accent-color-rgb), 0.4);
+            --ancient-border: 3.5px solid rgba(var(--ancient-stone-rgb), 0.85);
+            --luxury-border: 2.5px solid var(--gold-color);
+            --ornate-border: 2px double var(--gold-color);
+            --chat-bubble-user-border: 2px solid rgba(var(--accent-color-rgb), 0.5);
+            --chat-bubble-other-border: 2px solid rgba(255, 255, 255, 0.15);
+            --nav-tab-border: 3px solid rgba(var(--accent-color-rgb), 0.3);
+            --nav-tab-active-border: 3px solid rgba(var(--accent-color-rgb), 0.6);
+
+            /* Transitions & Animations (Enhanced for immersive effects with dark fantasy vibes) */
+            --transition-duration: 0.8s;
+            --transition-timing: cubic-bezier(0.34, 0.85, 0.34, 1);
+            --hover-scale: 1.18;
+            --hover-brightness: 1.35;
+            --hover-transition: all var(--transition-duration) var(--transition-timing);
+            --fade-in-animation: fadeIn 1.2s ease-in-out;
+            --pulse-animation: pulse 3s infinite ease-in-out;
+            --energy-pulse-animation: energyPulse 4.5s infinite ease-in-out;
+            --mechanical-press-transition: all 0.4s ease;
+            --flash-animation: flash 2.5s infinite ease-in-out;
+            --ember-animation: ember 6s infinite ease-in-out;
+            --mist-animation: mistFlow 10s infinite ease-in-out;
+            --spark-animation: spark 3.5s infinite ease-in-out;
+            --glitch-animation: glitch 2s infinite ease-in-out;
+            --shimmer-animation: shimmer 4.5s infinite linear;
+            --rune-fade-animation: runeFade 3.6s infinite ease-in-out;
+            --dark-wave-animation: darkWave 9s infinite ease-in-out;
+            --wuxia-smoke-animation: wuxiaSmoke 6s infinite ease-in-out;
+            --sakura-fall-animation: sakuraFall 11s infinite linear;
+            --ripple-animation: ripple 6s infinite ease-in-out;
+            --fly-animation: fly 2s infinite ease-in-out;
+            --arcane-rune-pulse: arcaneRunePulse 5s infinite ease-in-out;
+            --haibane-fade: haibaneFade 7s infinite ease-in-out;
+            --colossus-rumble: colossusRumble 12s infinite ease-in-out;
+            --ethereal-drift: etherealDrift 8s infinite ease-in-out;
+            --crimson-pulse: crimsonPulse 4.2s infinite ease-in-out;
+            --chat-bubble-fade: chatBubbleFade 0.6s ease-out;
+            --ornate-pulse: ornatePulse 5.5s infinite ease-in-out;
+            --chat-bubble-pulse: chatBubblePulse 4s infinite ease-in-out;
+            --nav-tab-pulse: navTabPulse 3.8s infinite ease-in-out;
+            --button-press-animation: buttonPress 0.3s ease-out;
+            --chat-panel-slide: chatPanelSlide 0.6s ease-out;
+            --background-drift: backgroundDrift 20s infinite ease-in-out;
+            --mystic-orb-pulse: mysticOrbPulse 6s infinite ease-in-out;
+            --ethereal-whisper: etherealWhisper 8s infinite ease-in-out;
+            --dark-mist-flow: darkMistFlow 15s infinite ease-in-out;
+            --spirit-flutter: spiritFlutter 5s infinite ease-in-out;
+            --ancient-rune-glow: ancientRuneGlow 4.5s infinite ease-in-out;
+            --slash-animation: slashEffect 0.5s ease-out forwards;
+            --level-up-animation: levelUpFlash 1s ease-out forwards;
+            --magic-aura-animation: magicAura 1.2s ease-out forwards;
+            --magic-flash-animation: magicFlash 0.6s ease-out forwards;
+            --magic-sparkles-animation: magicSparkles 1s ease-out forwards;
+            --smoke-animation: smokeEffect 1.5s ease-out forwards;
+
+            /* Font & Scrollbar */
+            --font-family: 'Noto Serif JP', 'Nanum Myeongjo', 'Hiragino Mincho Pro', 'Roboto', 'Noto Sans JP', 'Nanum Gothic', serif;
+            --scrollbar-width: 16px;
+            --scrollbar-thumb-color: var(--accent-color);
+            --scrollbar-track-color: rgba(0, 0, 0, 0.65);
+
+            /* Blur Effects */
+            --ios-blur: blur(80px);
+            --glass-effect: rgba(255, 255, 255, 0.18);
+            --SmartThemeBlurStrength: 20px;
+            --SmartThemeBlurTintColor: rgba(15, 10, 25, 0.4);
+
+            /* Mouse Position for Dynamic Lighting */
+            --mouse-x: 50%;
+            --mouse-y: 50%;
+        }
+
+        /* ===== Base Styles ===== */
         body {
-            font-family: 'Cinzel Decorative', cursive;
-            background-color: #000;
+            display: flex;
+            background-color: var(--background-base);
+            color: var(--text-color);
+            font-family: var(--font-family);
+            line-height: 2.2;
+            margin: 0;
+            padding: 0;
             overflow: hidden;
-            touch-action: none;
-            user-select: none;
-        }
-        
-        #gameCanvas {
-            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><rect width="400" height="400" fill="%23000"/><path d="M0,0 L400,400 M400,0 L0,400" stroke="%231a0a0a" stroke-width="1"/></svg>');
-            box-shadow: 0 0 30px rgba(186, 0, 0, 0.5);
-            border: 8px solid #3a1a1a;
-            border-image: linear-gradient(45deg, #3a1a1a, #5a2a2a, #3a1a1a) 1;
-        }
-        
-        .gothic-text {
-            font-family: 'MedievalSharp', cursive;
-            text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
-        }
-        
-        .blood-red {
-            background: linear-gradient(135deg, #5a0000, #3a0000);
-        }
-        
-        .vampire-button {
-            background: linear-gradient(135deg, #5a0000, #3a0000);
-            border: 2px solid #8a0000;
-            box-shadow: 0 0 15px rgba(186, 0, 0, 0.7);
-            transition: all 0.3s;
-        }
-        
-        .vampire-button:hover {
-            background: linear-gradient(135deg, #7a0000, #5a0000);
-            box-shadow: 0 0 25px rgba(255, 0, 0, 0.9);
-            transform: translateY(-2px);
-        }
-        
-        .candle-flicker {
-            animation: flicker 3s infinite alternate;
-        }
-        
-        @keyframes flicker {
-            0%, 100% { opacity: 0.8; }
-            25% { opacity: 1; }
+            text-shadow: var(--text-shadow);
+            animation: var(--fade-in-animation);
+            position: relative;
+            perspective: 2500px;
+        }
+
+        /* Dynamic Lighting Effect with Cinematic Flair */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(var(--accent-color-rgb), 0.15) 0%, transparent 55%);
+            pointer-events: none;
+            z-index: 5;
+            mix-blend-mode: soft-light;
+            transition: background 0.025s ease-out;
+        }
+
+        /* Custom Scrollbar with Aggressive Styling */
+        body::-webkit-scrollbar,
+        ::-webkit-scrollbar {
+            width: var(--scrollbar-width);
+            height: var(--scrollbar-width);
+        }
+
+        body::-webkit-scrollbar-thumb,
+        ::-webkit-scrollbar-thumb {
+            background-color: var(--scrollbar-thumb-color);
+            border-radius: calc(var(--border-radius) / 2);
+            background-image: var(--accent-gradient);
+            box-shadow: var(--shadow-neumorphic-pressed), var(--mechanical-inset-shadow), 0 0 18px var(--accent-color);
+            border: 4px solid rgba(0, 0, 0, 0.45);
+        }
+
+        body::-webkit-scrollbar-track,
+        ::-webkit-scrollbar-track {
+            background-color: var(--scrollbar-track-color);
+            border-radius: calc(var(--border-radius) / 2);
+            box-shadow: var(--shadow-neumorphic-pressed), var(--mechanical-inset-shadow);
+            border: 2.5px solid rgba(255, 255, 255, 0.12);
+        }
+
+        /* ===== Animations ===== */
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.12); opacity: 0.88; }
+        }
+
+        @keyframes fadeIn {
+            0% { opacity: 0; transform: translateY(25px); }
+            100% { opacity: 1; transform: translateY(0); }
+        }
+
+        @keyframes mistFlow {
+            0% { opacity: 0.3; transform: translateY(0) translateX(0); }
+            50% { opacity: 0.6; transform: translateY(-30px) translateX(20px); }
+            100% { opacity: 0.3; transform: translateY(0) translateX(0); }
+        }
+
+        @keyframes spark {
+            0% { opacity: 0; transform: scale(0.5); }
+            25% { opacity: 1; transform: scale(1.4); }
+            50% { opacity: 0.7; transform: scale(1); }
+            100% { opacity: 0; transform: scale(0.5); }
+        }
+
+        @keyframes ripple {
+            0% { transform: scale(1); opacity: 0.8; }
+            50% { transform: scale(1.5); opacity: 0.45; }
+            100% { transform: scale(1); opacity: 0.8; }
+        }
+
+        @keyframes shimmer {
+            0% { background-position: -2500px 0; }
+            100% { background-position: 2500px 0; }
+        }
+
+        @keyframes fly {
+            0% { transform: translateY(-6px) rotate(-18deg); }
+            50% { transform: translateY(-12px) rotate(-22deg); }
+            100% { transform: translateY(-6px) rotate(-18deg); }
+        }
+
+        @keyframes energyPulse {
+            0%, 100% { opacity: 0.45; transform: scale(1); }
+            50% { opacity: 0.85; transform: scale(1.18); }
+        }
+
+        @keyframes flash {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.65; }
+        }
+
+        @keyframes ember {
+            0% { opacity: 0.35; transform: translateY(0); }
+            50% { opacity: 0.65; transform: translateY(-35px); }
+            100% { opacity: 0.35; transform: translateY(0); }
+        }
+
+        @keyframes glitch {
+            0%, 100% { opacity: 0.25; transform: translate(0, 0); }
+            20% { opacity: 0.55; transform: translate(3px, -3px); }
+            40% { opacity: 0.35; transform: translate(-3px, 3px); }
+            60% { opacity: 0.55; transform: translate(2px, 2px); }
+            80% { opacity: 0.35; transform: translate(-2px, -2px); }
+        }
+
+        @keyframes runeFade {
+            0%, 100% { opacity: 0.35; }
+            50% { opacity: 0.75; }
+        }
+
+        @keyframes darkWave {
+            0% { opacity: 0.25; transform: translateY(0); }
+            50% { opacity: 0.55; transform: translateY(-18px); }
+            100% { opacity: 0.25; transform: translateY(0); }
+        }
+
+        @keyframes wuxiaSmoke {
+            0% { opacity: 0; transform: translateY(0); }
+            50% { opacity: 0.55; transform: translateY(-12px); }
+            100% { opacity: 0; transform: translateY(-25px); }
+        }
+
+        @keyframes sakuraFall {
+            0% { transform: translateY(-100%); opacity: 0; }
+            50% { opacity: 1; }
+            100% { transform: translateY(100vh); opacity: 0; }
+        }
+
+        @keyframes arcaneRunePulse {
+            0%, 100% { opacity: 0.4; transform: scale(1); }
+            50% { opacity: 0.9; transform: scale(1.15); }
+        }
+
+        @keyframes haibaneFade {
+            0%, 100% { opacity: 0.3; }
             50% { opacity: 0.7; }
-            75% { opacity: 0.9; }
         }
-        
-        .gothic-border {
-            border: 4px solid transparent;
-            border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M0,0 L12,0 L12,12 L0,12 Z" fill="none" stroke="%238a0000" stroke-width="2" stroke-dasharray="4,2"/></svg>') 1;
+
+        @keyframes colossusRumble {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(5px); }
+        }
+
+        @keyframes etherealDrift {
+            0% { opacity: 0.35; transform: translateY(0) translateX(0); }
+            50% { opacity: 0.75; transform: translateY(-18px) translateX(12px); }
+            100% { opacity: 0.35; transform: translateY(0) translateX(0); }
+        }
+
+        @keyframes crimsonPulse {
+            0%, 100% { opacity: 0.45; transform: scale(1); }
+            50% { opacity: 0.85; transform: scale(1.12); }
+        }
+
+        @keyframes chatBubbleFade {
+            0% { opacity: 0; transform: translateY(12px); }
+            100% { opacity: 1; transform: translateY(0); }
+        }
+
+        @keyframes ornatePulse {
+            0%, 100% { opacity: 0.5; transform: scale(1); }
+            50% { opacity: 0.85; transform: scale(1.1); }
+        }
+
+        @keyframes chatBubblePulse {
+            0%, 100% { opacity: 0.8; transform: scale(1); }
+            50% { opacity: 1; transform: scale(1.05); }
+        }
+
+        @keyframes navTabPulse {
+            0%, 100% { transform: scale(1); box-shadow: var(--nav-tab-active-shadow); }
+            50% { transform: scale(1.08); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8), inset 0 -5px 10px rgba(255, 255, 255, 0.25), 0 0 25px var(--accent-color); }
+        }
+
+        @keyframes buttonPress {
+            0% { transform: scale(1); box-shadow: var(--shadow-neumorphic-raised); }
+            50% { transform: scale(0.9); box-shadow: var(--shadow-neumorphic-pressed); }
+            100% { transform: scale(1); box-shadow: var(--shadow-neumorphic-raised); }
+        }
+
+        @keyframes chatPanelSlide {
+            0% { width: 0; opacity: 0; }
+            100% { width: var(--chat-panel-width); opacity: 1; }
+        }
+
+        @keyframes backgroundDrift {
+            0% { background-position: 0 0; }
+            50% { background-position: 50px 50px; }
+            100% { background-position: 0 0; }
+        }
+
+        @keyframes mysticOrbPulse {
+            0%, 100% { transform: scale(0.8); opacity: 0.5; }
+            50% { transform: scale(1.2); opacity: 0.9; }
+        }
+
+        @keyframes etherealWhisper {
+            0% { opacity: 0.2; transform: translateX(0) translateY(0); }
+            50% { opacity: 0.6; transform: translateX(20px) translateY(-20px); }
+            100% { opacity: 0.2; transform: translateX(0) translateY(0); }
+        }
+
+        @keyframes darkMistFlow {
+            0% { opacity: 0.3; transform: translateY(0); }
+            50% { opacity: 0.7; transform: translateY(-40px); }
+            100% { opacity: 0.3; transform: translateY(0); }
+        }
+
+        @keyframes spiritFlutter {
+            0% { transform: rotate(0deg) translateY(0); }
+            50% { transform: rotate(15deg) translateY(-10px); }
+            100% { transform: rotate(0deg) translateY(0); }
+        }
+
+        @keyframes ancientRuneGlow {
+            0%, 100% { opacity: 0.5; box-shadow: 0 0 15px var(--accent-color); }
+            50% { opacity: 0.9; box-shadow: 0 0 30px var(--accent-color); }
+        }
+
+        /* MMORPG-inspired Visual Effects for Interactions */
+        @keyframes slashEffect {
+            0% { transform: scale(0) rotate(-45deg); opacity: 1; }
+            100% { transform: scale(2) rotate(-45deg); opacity: 0; }
+        }
+
+        @keyframes levelUpFlash {
+            0% { transform: scaleY(0); opacity: 1; }
+            50% { transform: scaleY(1.5); opacity: 0.8; }
+            100% { transform: scaleY(0); opacity: 0; }
+        }
+
+        @keyframes magicAura {
+            0% { transform: scale(0.5); opacity: 0.3; }
+            50% { transform: scale(1.2); opacity: 0.8; }
+            100% { transform: scale(1.5); opacity: 0; }
+        }
+
+        @keyframes magicFlash {
+            0% { opacity: 0; transform: scale(0); }
+            30% { opacity: 1; transform: scale(1.3); }
+            100% { opacity: 0; transform: scale(1.5); }
+        }
+
+        @keyframes magicSparkles {
+            0% { transform: translate(0, 0) scale(0.5); opacity: 1; }
+            25% { transform: translate(10px, -10px) scale(0.8); opacity: 0.8; }
+            50% { transform: translate(-15px, 15px) scale(0.6); opacity: 0.6; }
+            75% { transform: translate(20px, -5px) scale(0.9); opacity: 0.4; }
+            100% { transform: translate(-10px, 20px) scale(0.5); opacity: 0; }
+        }
+
+        @keyframes smokeEffect {
+            0% { transform: translateY(0) scale(0.3); opacity: 0.8; }
+            50% { transform: translateY(-30px) scale(1.2); opacity: 0.5; }
+            100% { transform: translateY(-60px) scale(1.5); opacity: 0; }
+        }
+
+        /* ===== Buttons and Interactive Elements ===== */
+        button, .button, .button-like, .menu_button {
+            background-color: var(--panel-bg-color);
+            background-image: var(--accent-gradient), var(--industrial-metal), var(--ornate-gradient);
+            border: none;
+            border-radius: calc(var(--border-radius) / 1.3);
+            padding: 20px 40px;
+            color: var(--background-base);
+            font-family: var(--font-family);
+            font-size: 1.4rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: transform var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), background-color var(--transition-duration) var(--transition-timing);
+            box-shadow: var(--shadow-neumorphic-raised), 0 6px 14px rgba(0, 0, 0, 0.45), var(--mechanical-raised-shadow), var(--ornate-shadow);
+            text-shadow: 0 5px 5px rgba(255, 255, 255, 0.45);
+            position: relative;
+            overflow: hidden;
+            transform-style: preserve-3d;
+            border: 2px solid rgba(var(--accent-color-rgb), 0.35);
+        }
+
+        button::before, .button::before, .button-like::before, .menu_button::before {
+            content: '';
+            position: absolute;
+            top: -60%;
+            left: -60%;
+            width: 220%;
+            height: 220%;
+            background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 65%);
+            transform: rotate(45deg);
+            opacity: 0;
+            transition: opacity var(--transition-duration) var(--transition-timing);
+        }
+
+        button::after, .button::after, .button-like::after, .menu_button::after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            background: rgba(255, 255, 255, 0.28);
+            pointer-events: none;
+        }
+
+        button:hover, .button:hover, .button-like:hover, .menu_button:hover {
+            background-color: var(--accent-color);
+            transform: scale(var(--hover-scale)) translateY(-6px);
+            filter: brightness(var(--hover-brightness)) contrast(1.25);
+            box-shadow: var(--shadow-neumorphic-raised), var(--hover-glow), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--ornate-shadow);
+        }
+
+        button:hover::before, .button:hover::before, .button-like:hover::before, .menu_button:hover::before {
+            opacity: 1;
+        }
+
+        button:active, .button:active, .button-like:active, .menu_button:active {
+            transform: scale(0.9) translateY(5px);
+            box-shadow: var(--shadow-neumorphic-pressed), var(--mechanical-inset-shadow), 0 0 25px var(--accent-color);
+            filter: brightness(0.7);
+        }
+
+        button:focus, .button:focus, .button-like:focus, .menu_button:focus {
+            outline: 7px solid var(--accent-color-brighter);
+            outline-offset: 7px;
+        }
+
+        /* ===== Input Fields ===== */
+        input, textarea, input[type="text"], input[type="search"], input[type="number"], input[type="password"] {
+            width: 100%;
+            background-color: rgba(5, 3, 10, 0.85);
+            border: 4px solid var(--border-color);
+            border-radius: calc(var(--border-radius) / 1.5);
+            padding: 20px 25px;
+            color: var(--text-color);
+            font-family: var(--font-family);
+            font-size: 1.3rem;
+            transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing);
+            box-shadow: var(--shadow-neumorphic-pressed), var(--mechanical-inset-shadow), var(--deep-emboss);
+            background-image: var(--industrial-metal);
+            box-sizing: border-box;
+            transform-style: preserve-3d;
+        }
+
+        input:hover, textarea:hover {
+            border-color: var(--border-color-accent);
+            box-shadow: var(--shadow-neumorphic-pressed), var(--hover-glow), var(--mechanical-inset-shadow), var(--deep-emboss);
+            transform: translateY(-5px);
+        }
+
+        input:focus, textarea:focus {
+            border-color: var(--border-color-accent);
+            box-shadow: var(--shadow-neumorphic-pressed), 0 0 0 6px var(--accent-color-darker), var(--mechanical-inset-shadow), var(--deep-emboss);
+            background-color: rgba(10, 8, 15, 0.9);
+            outline: none;
+        }
+
+        input::placeholder, textarea::placeholder {
+            color: var(--text-color-secondary);
+            opacity: 0.6;
+        }
+
+        /* ===== Calculator Specific Styles ===== */
+        .calculator-app {
+            display: flex;
+            flex-direction: row;
+            width: 100vw;
+            height: 100vh;
+            position: relative;
+        }
+
+        .nav-bar {
+            background-color: var(--SmartThemeBlurTintColor);
+            margin: unset;
+            position: unset;
+            height: 100vh;
+            flex-direction: column;
+            padding: 16px 8px;
+            gap: 16px;
+            justify-content: unset;
+            width: var(--nav-bar-width);
+            left: 0;
+            top: 0;
+            background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 45%), var(--industrial-metal);
+            border-right: 12px solid var(--accent-color-darker);
+            box-shadow: 12px 0 40px rgba(0, 0, 0, 0.8), var(--border-bevel-outer), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -10px 20px rgba(0, 0, 0, 0.5);
+            backdrop-filter: var(--ios-blur);
+            -webkit-backdrop-filter: var(--ios-blur);
+            border-radius: 0 calc(var(--border-radius) * 1.2) calc(var(--border-radius) * 1.2) 0;
+            padding: 55px 18px;
+            gap: 40px;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: center;
+            position: fixed;
+            z-index: 100;
+            transition: box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing);
+            display: flex !important;
+            visibility: visible !important;
+            opacity: 1 !important;
+            overflow: visible;
+            transform-style: preserve-3d;
+        }
+
+        .nav-bar::before {
+            content: "";
+            width: calc(var(--nav-bar-width) * 0.8);
+            aspect-ratio: 1/1;
+            background-size: cover;
+            background-position: center center;
+            border-radius: 50%;
+            margin-bottom: 40px;
+            border: 6px solid var(--accent-color);
+            box-shadow: 0 0 30px var(--accent-color), inset 0 0 15px rgba(0, 0, 0, 0.8), var(--mechanical-inset-shadow), var(--arcane-glow), inset 0 5px 10px rgba(255, 255, 255, 0.3);
+            animation: var(--pulse-animation);
+            background-image: var(--arcane-pulse);
+        }
+
+        .nav-bar::after {
+            content: "";
+            position: absolute;
+            bottom: 25px;
+            width: 75%;
+            height: 6px;
+            background: var(--accent-gradient);
+            box-shadow: 0 0 25px var(--accent-color);
+            border-radius: 3px;
+        }
+
+        .nav-bar:hover {
+            box-shadow: 12px 0 40px rgba(0, 0, 0, 0.8), var(--shadow-neumorphic-raised), var(--hover-glow), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow);
+            transform: scaleX(1.03) translateZ(0);
+        }
+
+        .nav-item {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 18px;
+            padding: 18px;
+            width: calc(var(--nav-bar-width) * 0.85);
+            height: calc(var(--nav-bar-width) * 0.85);
+            border-radius: 50%;
+            background-color: var(--panel-bg-color-translucent);
+            background-image: var(--industrial-metal), var(--nav-tab-gradient);
+            border: var(--nav-tab-border);
+            box-shadow: var(--shadow-neumorphic-raised), var(--mechanical-raised-shadow), var(--nav-tab-shadow), 0 0 18px rgba(var(--accent-color-rgb), 0.35), var(--luxury-shadow), var(--ornate-shadow), inset 0 5px 10px rgba(255, 255, 255, 0.3), inset 0 -5px 10px rgba(0, 0, 0, 0.4);
+            color: var(--text-color-secondary);
+            cursor: pointer;
+            transition: transform var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), background-color var(--transition-duration) var(--transition-timing), border-color var(--transition-duration) var(--transition-timing), color var(--transition-duration) var(--transition-timing);
+            font-size: 2.2rem;
+            position: relative;
+            z-index: 1;
+            transform-style: preserve-3d;
+        }
+
+        .nav-item::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.25), transparent 75%);
+            border-radius: 50%;
+            opacity: 0;
+            transition: opacity var(--transition-duration) var(--transition-timing);
+        }
+
+        .nav-item::after {
+            content: "";
+            position: absolute;
+            top: -10%;
+            left: -10%;
+            width: 120%;
+            height: 120%;
+            background: radial-gradient(circle at center, rgba(var(--accent-color-rgb), 0.15), transparent 70%);
+            border-radius: 50%;
+            opacity: 0;
+            transform: rotate(45deg);
+            transition: opacity var(--transition-duration) var(--transition-timing);
+            pointer-events: none;
+        }
+
+        .nav-item:hover {
+            background-color: var(--accent-color-darker);
+            background-image: var(--industrial-metal), var(--nav-tab-active-gradient);
+            transform: scale(var(--hover-scale)) rotate(15deg) translateY(-6px) translateZ(10px);
+            box-shadow: var(--shadow-neumorphic-raised), var(--hover-glow), var(--mechanical-raised-shadow), 0 0 35px var(--accent-color), var(--luxury-shadow), var(--ornate-shadow), var(--nav-tab-active-shadow), inset 0 5px 10px rgba(255, 255, 255, 0.3), inset 0 -5px 10px rgba(0, 0, 0, 0.4);
+            color: var(--text-color);
+            border: var(--nav-tab-active-border);
+        }
+
+        .nav-item:hover::before, .nav-item:hover::after {
+            opacity: 1;
+        }
+
+        .nav-item.active {
+            background-color: var(--accent-color);
+            background-image: var(--industrial-metal), var(--nav-tab-active-gradient);
+            color: var(--text-color);
+            border: var(--nav-tab-active-border);
+            box-shadow: var(--shadow-neumorphic-raised), var(--arcane-glow), var(--mechanical-raised-shadow), var(--nav-tab-active-shadow), var(--luxury-shadow), var(--ornate-shadow), inset 0 5px 10px rgba(255, 255, 255, 0.3), inset 0 -5px 10px rgba(0, 0, 0, 0.4);
+            animation: var(--nav-tab-pulse);
+        }
+
+        .nav-item.active::before, .nav-item.active::after {
+            opacity: 0.6;
+        }
+
+        .main-content {
+            margin-left: var(--nav-bar-width);
+            width: calc(100vw - var(--nav-bar-width) - var(--chat-panel-width));
+            height: 100vh;
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            background: rgba(var(--primaryBgCol), var(--primaryBgAlpha)), var(--cinematic-gradient);
+            backdrop-filter: blur(var(--SmartThemeBlurStrength));
+            -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
+            border: none;
+            box-shadow: var(--cinematic-shadow);
+            position: fixed;
+            z-index: 10;
+            padding: 0;
+            overflow: hidden;
+            transition: box-shadow var(--transition-duration) var(--transition-timing), width var(--transition-duration) var(--transition-timing);
+        }
+
+        .calculator-panel {
+            background-color: var(--panel-bg-color);
+            background-image: var(--industrial-metal), var(--panel-gradient);
+            border: var(--border-width) solid var(--border-color);
+            box-shadow: var(--shadow-neumorphic-raised), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow);
+            border-radius: var(--border-radius);
+            backdrop-filter: var(--ios-blur);
+            -webkit-backdrop-filter: var(--ios-blur);
+            transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing);
+            position: relative;
+            width: 550px;
+            height: auto;
+            display: flex;
+            flex-direction: column;
+            z-index: 20;
+            transform-style: preserve-3d;
+            animation: var(--fade-in-animation);
+            padding: 40px;
+            margin: 30px;
+        }
+
+        .calculator-panel:hover {
+            border-color: var(--border-color-accent);
+            box-shadow: var(--shadow-neumorphic-raised), var(--shadow-glow), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow);
+            transform: translateY(-6px) translateZ(12px);
+        }
+
+        .calculator-header {
+            text-align: center;
+            margin-bottom: 30px;
+            position: relative;
+        }
+
+        .calculator-header h1 {
+            margin: 0;
+            font-size: 2.5rem;
+            color: var(--accent-color-brighter);
+            text-shadow: var(--text-shadow-glow);
+            letter-spacing: 5px;
+            font-weight: 800;
+        }
+
+        .calculator-header::after {
+            content: "";
+            position: absolute;
+            bottom: -15px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 90%;
+            height: 5px;
+            background: var(--accent-gradient);
+            box-shadow: 0 0 22px var(--accent-color);
+        }
+
+        .calculator-display-container {
+            position: relative;
+            margin-bottom: 35px;
+        }
+
+        .calculator-display {
+            background-color: rgba(5, 3, 10, 0.92);
+            border: 6px solid var(--border-color);
+            border-radius: calc(var(--border-radius) / 1.5);
+            padding: 30px;
+            color: var(--text-color);
+            font-family: var(--font-family);
+            font-size: 3rem;
+            text-align: right;
+            box-shadow: var(--shadow-neumorphic-pressed), var(--mechanical-inset-shadow), var(--mystic-shadow), var(--deep-emboss);
+            background-image: var(--industrial-metal), var(--mystic-gradient);
+            transform-style: preserve-3d;
+            overflow: hidden;
+            letter-spacing: 4px;
+        }
+
+        .calculator-display::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 40%;
+            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.22), transparent);
+            pointer-events: none;
+        }
+
+        .calculator-display::after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 15px;
+            background: linear-gradient(to top, rgba(var(--accent-color-rgb), 0.3), transparent);
+            pointer-events: none;
+        }
+
+        .calculator-buttons {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            gap: 20px;
         }
-        
-        .skull-icon {
-            filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.7));
+
+        .calculator-buttons button {
+            padding: 25px;
+            font-size: 1.9rem;
+            min-height: 90px;
+            position: relative;
+            border-radius: calc(var(--border-radius) / 1.6);
+            overflow: hidden;
+            border: 2px solid var(--gothic-border);
+            box-shadow: var(--shadow-neumorphic-raised), 0 5px 10px rgba(0, 0, 0, 0.5), var(--mechanical-raised-shadow), var(--ornate-shadow);
+            transform-style: preserve-3d;
+            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
+        }
+
+        .calculator-buttons button::before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 0;
+            height: 0;
+            background: var(--arcane-pulse);
+            border-radius: 50%;
+            opacity: 0;
+            transition: width 0.7s ease-out, height 0.7s ease-out, opacity 0.7s ease-out;
+        }
+
+        .calculator-buttons button::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 30%;
+            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
+            pointer-events: none;
+        }
+
+        .calculator-buttons button:active::before {
+            width: 170%;
+            height: 170%;
+            opacity: 0.7;
+        }
+
+        .calculator-buttons button:hover {
+            transform: scale(1.1) translateY(-3px) translateZ(5px);
+            box-shadow: var(--shadow-neumorphic-raised), 0 8px 16px rgba(0, 0, 0, 0.6), var(--mechanical-raised-shadow), var(--ornate-shadow), 0 0 15px rgba(var(--accent-color-rgb), 0.5);
+        }
+
+        .calculator-buttons button:active {
+            transform: scale(0.9) translateY(2px) translateZ(-2px);
+            box-shadow: var(--shadow-neumorphic-pressed), 0 2px 4px rgba(0, 0, 0, 0.3), var(--mechanical-inset-shadow);
+        }
+
+        .button-operator {
+            background-image: var(--button-operator-gradient), var(--industrial-metal);
+            color: var(--text-color);
+            font-weight: bold;
+            box-shadow: var(--shadow-neumorphic-raised), var(--button-operator-shadow), var(--mechanical-raised-shadow);
+        }
+
+        .button-operator:hover {
+            background-image: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.7), rgba(var(--accent-color-rgb), 0.5)), var(--industrial-metal);
+        }
+
+        .button-advanced {
+            background-image: var(--button-advanced-gradient), var(--industrial-metal);
+            color: var(--text-color);
+            font-size: 1.5rem;
+            box-shadow: var(--shadow-neumorphic-raised), var(--button-advanced-shadow), var(--mechanical-raised-shadow);
+        }
+
+        .button-advanced:hover {
+            background-image: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.5), rgba(var(--accent-color-rgb), 0.3)), var(--industrial-metal);
+        }
+
+        .button-clear {
+            background-image: linear-gradient(135deg, rgba(255, 60, 60, 0.7), rgba(160, 10, 10, 0.7)), var(--industrial-metal);
+            color: var(--text-color);
+            font-weight: bold;
+            box-shadow: var(--shadow-neumorphic-raised), var(--button-clear-shadow), var(--mechanical-raised-shadow);
+        }
+
+        .button-clear:hover {
+            background-image: linear-gradient(135deg, rgba(255, 60, 60, 0.9), rgba(160, 10, 10, 0.9)), var(--industrial-metal);
+        }
+
+        .button-equals {
+            background-image: var(--button-equals-gradient), var(--industrial-metal);
+            color: var(--text-color);
+            grid-column: span 2;
+            font-weight: bold;
+            box-shadow: var(--shadow-neumorphic-raised), var(--arcane-glow), var(--button-equals-shadow), var(--ornate-shadow);
+        }
+
+        .button-equals:hover {
+            background-image: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.8), rgba(var(--accent-color-rgb), 0.6)), var(--industrial-metal);
+            box-shadow: var(--shadow-neumorphic-raised), var(--arcane-glow), var(--button-equals-shadow), var(--ornate-shadow), 0 0 25px var(--accent-color);
+        }
+
+        .button-number {
+            background-image: var(--industrial-metal), var(--panel-gradient);
+            color: var(--text-color);
+            font-weight: 600;
+            box-shadow: var(--shadow-neumorphic-raised), var(--button-number-shadow), var(--mechanical-raised-shadow);
+        }
+
+        .button-number:hover {
+            background-image: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.2), rgba(var(--accent-color-rgb), 0.1)), var(--industrial-metal), var(--panel-gradient);
+        }
+
+        .button-memory {
+            background-image: var(--button-memory-gradient), var(--industrial-metal);
+            color: var(--text-color);
+            font-size: 1.4rem;
+            box-shadow: var(--shadow-neumorphic-raised), var(--button-memory-shadow), var(--mechanical-raised-shadow);
+        }
+
+        .button-memory:hover {
+            background-image: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.6), rgba(var(--accent-color-rgb), 0.4)), var(--industrial-metal);
+        }
+
+        .history-panel {
+            background-color: var(--panel-bg-color);
+            background-image: var(--industrial-metal), var(--panel-gradient);
+            border: var(--border-width) solid var(--border-color);
+            box-shadow: var(--shadow-neumorphic-raised), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow);
+            border-radius: var(--border-radius);
+            backdrop-filter: var(--ios-blur);
+            -webkit-backdrop-filter: var(--ios-blur);
+            transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing);
+            position: relative;
+            width: 450px;
+            height: 700px;
+            display: flex;
+            flex-direction: column;
+            z-index: 20;
+            transform-style: preserve-3d;
+            animation: var(--fade-in-animation);
+            padding: 40px;
+            margin: 30px;
+            overflow: hidden;
+        }
+
+        .history-panel:hover {
+            border-color: var(--border-color-accent);
+            box-shadow: var(--shadow-neumorphic-raised), var(--shadow-glow), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow);
+            transform: translateY(-6px) translateZ(12px);
+        }
+
+        .history-panel h2 {
+            margin-top: 0;
+            font-size: 2.2rem;
+            color: var(--accent-color-brighter);
+            text-shadow: var(--text-shadow-glow);
+            text-align: center;
+            position: relative;
+        }
+
+        .history-panel h2::after {
+            content: "";
+            position: absolute;
+            bottom: -15px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 90%;
+            height: 5px;
+            background: var(--accent-gradient);
+            box-shadow: 0 0 22px var(--accent-color);
+        }
+
+        .history-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px 15px;
+            margin-top: 30px;
+            background: rgba(5, 3, 10, 0.7);
+            border-radius: calc(var(--border-radius) / 2.2);
+            border: 3px solid rgba(255, 255, 255, 0.15);
+            box-shadow: var(--shadow-neumorphic-pressed), var(--mystic-shadow), var(--deep-emboss);
+        }
+
+        .history-item {
+            padding: 20px;
+            border-bottom: 2px dashed rgba(255, 255, 255, 0.15);
+            font-size: 1.2rem;
+            color: var(--text-color-secondary);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
+            position: relative;
+            background: rgba(10, 8, 15, 0.6);
+            margin-bottom: 15px;
+            border-radius: calc(var(--border-radius) / 3.5);
+            box-shadow: var(--emboss-shadow);
+            transform-style: preserve-3d;
+        }
+
+        .history-item::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 25%;
+            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
+            pointer-events: none;
+        }
+
+        .history-item:hover {
+            background: rgba(var(--accent-color-rgb), 0.3);
+            color: var(--text-color);
+            transform: translateY(-5px) translateZ(5px);
+            box-shadow: var(--emboss-shadow), var(--hover-glow), 0 5px 10px rgba(0, 0, 0, 0.5);
+        }
+
+        .history-item button {
+            background: transparent;
+            border: 3px solid var(--accent-color);
+            color: var(--accent-color-brighter);
+            padding: 12px 20px;
+            font-size: 1.1rem;
+            cursor: pointer;
+            border-radius: calc(var(--border-radius) / 2.5);
+            transition: background 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
+            box-shadow: var(--mechanical-raised-shadow);
+            text-shadow: none;
+            background-image: var(--industrial-metal);
+            transform-style: preserve-3d;
+        }
+
+        .history-item button:hover {
+            background: rgba(var(--accent-color-rgb), 0.5);
+            transform: scale(1.1) translateZ(3px);
+            box-shadow: var(--arcane-glow), var(--mechanical-raised-shadow), 0 5px 10px rgba(0, 0, 0, 0.4);
+        }
+
+        .clear-history {
+            margin-top: 30px;
+            background-image: linear-gradient(135deg, rgba(255, 60, 60, 0.7), rgba(160, 10, 10, 0.7)), var(--industrial-metal);
+            color: var(--text-color);
+            padding: 18px;
+            font-size: 1.4rem;
+            border-radius: calc(var(--border-radius) / 2.2);
+            transition: transform 0.4s ease, box-shadow 0.4s ease;
+            border: 2px solid var(--gothic-border);
+            box-shadow: var(--shadow-neumorphic-raised), var(--mechanical-raised-shadow);
+            transform-style: preserve-3d;
+        }
+
+        .clear-history:hover {
+            transform: translateY(-4px) translateZ(3px);
+            box-shadow: var(--shadow-neumorphic-raised), var(--hover-glow), var(--mechanical-raised-shadow), 0 6px 12px rgba(0, 0, 0, 0.6);
+        }
+
+        /* ===== Settings Panel ===== */
+        .settings-panel {
+            background-color: var(--panel-bg-color);
+            background-image: var(--industrial-metal), var(--panel-gradient);
+            border: var(--border-width) solid var(--border-color);
+            box-shadow: var(--shadow-neumorphic-raised), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow);
+            border-radius: var(--border-radius);
+            backdrop-filter: var(--ios-blur);
+            -webkit-backdrop-filter: var(--ios-blur);
+            transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing);
+            position: relative;
+            width: 500px;
+            height: 650px;
+            display: flex;
+            flex-direction: column;
+            z-index: 20;
+            transform-style: preserve-3d;
+            animation: var(--fade-in-animation);
+            padding: 40px;
+            margin: 30px;
+            overflow: hidden;
+        }
+
+        .settings-panel:hover {
+            border-color: var(--border-color-accent);
+            box-shadow: var(--shadow-neumorphic-raised), var(--shadow-glow), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow);
+            transform: translateY(-6px) translateZ(12px);
+        }
+
+        .settings-panel h2 {
+            margin-top: 0;
+            font-size: 2.2rem;
+            color: var(--accent-color-brighter);
+            text-shadow: var(--text-shadow-glow);
+            text-align: center;
+            position: relative;
+        }
+
+        .settings-panel h2::after {
+            content: "";
+            position: absolute;
+            bottom: -15px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 90%;
+            height: 5px;
+            background: var(--accent-gradient);
+            box-shadow: 0 0 22px var(--accent-color);
+        }
+
+        .settings-options {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 28px;
+            margin-top: 30px;
+            overflow-y: auto;
+            padding: 15px;
+        }
+
+        .setting-group {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+
+        .setting-group label {
+            font-size: 1.3rem;
+            color: var(--text-color-secondary);
+        }
+
+        .setting-group select, .setting-group input[type="color"] {
+            background-color: rgba(10, 8, 15, 0.8);
+            border: 3px solid var(--border-color);
+            border-radius: calc(var(--border-radius) / 2.2);
+            padding: 15px;
+            color: var(--text-color);
+            font-size: 1.2rem;
+            cursor: pointer;
+            transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
+            box-shadow: var(--shadow-neumorphic-pressed), var(--deep-emboss);
+            transform-style: preserve-3d;
+        }
+
+        .setting-group select:hover, .setting-group input[type="color"]:hover {
+            border-color: var(--accent-color);
+            box-shadow: var(--hover-glow), var(--shadow-neumorphic-pressed), var(--deep-emboss);
+            transform: translateY(-3px) translateZ(2px);
+        }
+
+        .setting-group select:focus, .setting-group input[type="color"]:focus {
+            outline: none;
+            border-color: var(--accent-color-brighter);
+            box-shadow: var(--arcane-glow), var(--shadow-neumorphic-pressed), var(--deep-emboss);
+        }
+
+        /* ===== Info Panel ===== */
+        .info-panel {
+            background-color: var(--panel-bg-color);
+            background-image: var(--industrial-metal), var(--panel-gradient);
+            border: var(--border-width) solid var(--border-color);
+            box-shadow: var(--shadow-neumorphic-raised), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow);
+            border-radius: var(--border-radius);
+            backdrop-filter: var(--ios-blur);
+            -webkit-backdrop-filter: var(--ios-blur);
+            transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing);
+            position: relative;
+            width: 500px;
+            height: 650px;
+            display: flex;
+            flex-direction: column;
+            z-index: 20;
+            transform-style: preserve-3d;
+            animation: var(--fade-in-animation);
+            padding: 40px;
+            margin: 30px;
+            overflow: hidden;
+        }
+
+        .info-panel:hover {
+            border-color: var(--border-color-accent);
+            box-shadow: var(--shadow-neumorphic-raised), var(--shadow-glow), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow);
+            transform: translateY(-6px) translateZ(12px);
+        }
+
+        .info-panel h2 {
+            margin-top: 0;
+            font-size: 2.2rem;
+            color: var(--accent-color-brighter);
+            text-shadow: var(--text-shadow-glow);
+            text-align: center;
+            position: relative;
+        }
+
+        .info-panel h2::after {
+            content: "";
+            position: absolute;
+            bottom: -15px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 90%;
+            height: 5px;
+            background: var(--accent-gradient);
+            box-shadow: 0 0 22px var(--accent-color);
+        }
+
+        .info-content {
+            flex: 1;
+            margin-top: 30px;
+            padding: 20px;
+            background: rgba(10, 8, 15, 0.7);
+            border-radius: calc(var(--border-radius) / 2.2);
+            border: 3px solid rgba(255, 255, 255, 0.15);
+            overflow-y: auto;
+            color: var(--text-color-secondary);
+            font-size: 1.2rem;
+            line-height: 1.8;
+            box-shadow: var(--shadow-neumorphic-pressed), var(--deep-emboss);
+            transform-style: preserve-3d;
+        }
+
+        .info-content p {
+            margin: 15px 0;
+            position: relative;
+        }
+
+        .info-content p::before {
+            content: "•";
+            color: var(--accent-color-brighter);
+            margin-right: 10px;
+            font-weight: bold;
+        }
+
+        /* ===== Chat Panel (Enhanced with Sceomorphic Elegance and East Asian Aesthetics) ===== */
+        body:has(#chat-panel.openDrawer) {
+            --chat-panel-width: 380px;
+        }
+
+        #chat-panel {
+            position: fixed;
+            right: 0;
+            top: 0;
+            width: var(--chat-panel-width);
+            height: 100vh;
+            background-color: var(--panel-bg-color);
+            background-image: var(--chat-gradient), var(--industrial-metal);
+            border-left: 6px solid var(--accent-color-darker);
+            border-radius: calc(var(--border-radius) * 1.2) 0 0 calc(var(--border-radius) * 1.2);
+            box-shadow: -15px 0 40px rgba(0, 0, 0, 0.85), var(--shadow-neumorphic-raised), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -10px 20px rgba(0, 0, 0, 0.5);
+            backdrop-filter: var(--ios-blur);
+            -webkit-backdrop-filter: var(--ios-blur);
+            display: flex;
+            flex-direction: column;
+            z-index: 30;
+            transform-style: preserve-3d;
+            transition: width var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing);
+            padding: 40px 25px;
+            overflow: hidden;
+        }
+
+        #chat-panel:hover {
+            box-shadow: -15px 0 40px rgba(0, 0, 0, 0.85), var(--shadow-neumorphic-raised), var(--shadow-glow), var(--cinematic-shadow), var(--mechanical-raised-shadow), var(--luxury-shadow), var(--ornate-shadow);
+        }
+
+        #chat-panel.openDrawer {
+            animation: var(--chat-panel-slide);
+        }
+
+        .chat-header {
+            text-align: center;
+            margin-bottom: 30px;
+            position: relative;
+        }
+
+        .chat-header h2 {
+            margin: 0;
+            font-size: 2.2rem;
+            color: var(--accent-color-brighter);
+            text-shadow: var(--text-shadow-glow);
+            letter-spacing: 4px;
+            font-weight: 800;
+        }
+
+        .chat-header::after {
+            content: "";
+            position: absolute;
+            bottom: -15px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 85%;
+            height: 5px;
+            background: var(--accent-gradient);
+            box-shadow: 0 0 20px var(--accent-color);
+            border-radius: 2px;
+        }
+
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px 15px;
+            background: rgba(10, 8, 15, 0.7);
+            border-radius: calc(var(--border-radius) / 2);
+            border: 3px solid rgba(255, 255, 255, 0.15);
+            box-shadow: var(--shadow-neumorphic-pressed), var(--mystic-shadow), var(--deep-emboss), inset 0 5px 10px rgba(255, 255, 255, 0.1), inset 0 -5px 10px rgba(0, 0, 0, 0.3);
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            margin-bottom: 20px;
+            transform-style: preserve-3d;
+        }
+
+        .chat-message {
+            max-width: 80%;
+            padding: 18px 25px;
+            border-radius: calc(var(--border-radius) / 2.5);
+            font-size: 1.1rem;
+            color: var(--text-color);
+            position: relative;
+            animation: var(--chat-bubble-fade);
+            box-shadow: var(--chat-bubble-shadow), var(--luxury-shadow), 0 0 10px rgba(var(--accent-color-rgb), 0.3), inset 0 5px 10px rgba(255, 255, 255, 0.2), inset 0 -5px 10px rgba(0, 0, 0, 0.4);
+            transform-style: preserve-3d;
+            line-height: 1.6;
+            overflow: hidden;
+            border: 2px solid transparent;
+            background-clip: padding-box;
+        }
+
+        .chat-message.user {
+            background-color: var(--chat-bubble-user);
+            background-image: var(--chat-bubble-gradient-user);
+            align-self: flex-end;
+            border: var(--chat-bubble-user-border);
+            animation: var(--chat-bubble-fade), var(--chat-bubble-pulse);
+            border-radius: calc(var(--border-radius) / 2.5) 0 calc(var(--border-radius) / 2.5) calc(var(--border-radius) / 2.5);
+        }
+
+        .chat-message.other {
+            background-color: var(--chat-bubble-other);
+            background-image: var(--chat-bubble-gradient-other);
+            align-self: flex-start;
+            border: var(--chat-bubble-other-border);
+            animation: var(--chat-bubble-fade);
+            border-radius: 0 calc(var(--border-radius) / 2.5) calc(var(--border-radius) / 2.5) calc(var(--border-radius) / 2.5);
+        }
+
+        .chat-message::before {
+            content: attr(data-sender);
+            position: absolute;
+            top: -15px;
+            left: 20px;
+            font-size: 0.9rem;
+            color: var(--text-color);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 5px 12px;
+            border-radius: calc(var(--border-radius) / 3.5);
+            box-shadow: var(--shadow-neumorphic-raised);
+            border: 1px solid rgba(var(--accent-color-rgb), 0.3);
+            transform-style: preserve-3d;
+        }
+
+        .chat-message::after {
+            content: attr(data-time);
+            position: absolute;
+            bottom: -15px;
+            right: 20px;
+            font-size: 0.8rem;
+            color: var(--text-color-secondary);
+            opacity: 0.75;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 3px 10px;
+            border-radius: calc(var(--border-radius) / 4);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transform-style: preserve-3d;
+        }
+
+        .chat-message.user::before {
+            background: rgba(var(--accent-color-rgb), 0.3);
+            color: var(--text-color);
+        }
+
+        .chat-message.user::after {
+            background: rgba(var(--accent-color-rgb), 0.2);
+            color: var(--text-color);
+        }
+
+        .chat-message.user::before, .chat-message.user::after {
+            border: 1px solid rgba(var(--accent-color-rgb), 0.5);
+        }
+
+        .chat-message.user::after {
+            right: 20px;
+            left: auto;
+        }
+
+        .chat-message.other::before {
+            left: 20px;
+            right: auto;
+        }
+
+        .chat-message.user::before {
+            left: auto;
+            right: 20px;
+        }
+
+        .chat-input-area {
+            margin-top: 25px;
+            display: flex;
+            gap: 15px;
+            align-items: center;
+            background: rgba(15, 10, 25, 0.5);
+            padding: 15px;
+            border-radius: calc(var(--border-radius) / 2);
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            box-shadow: var(--shadow-neumorphic-pressed), inset 0 5px 10px rgba(255, 255, 255, 0.1), inset 0 -5px 10px rgba(0, 0, 0, 0.3);
+            transform-style: preserve-3d;
+        }
+
+        #chat-input {
+            flex: 1;
+            background-color: rgba(10, 8, 15, 0.9);
+            border: 2.5px solid var(--border-color);
+            border-radius: calc(var(--border-radius) / 2.5);
+            padding: 15px 22px;
+            color: var(--text-color);
+            font-family: var(--font-family);
+            font-size: 1.1rem;
+            box-shadow: var(--shadow-neumorphic-pressed), var(--mechanical-inset-shadow), var(--deep-emboss), inset 0 5px 10px rgba(255, 255, 255, 0.1);
+            transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing);
+            transform-style: preserve-3d;
+        }
+
+        #chat-input:focus {
+            border-color: var(--accent-color);
+            box-shadow: var(--shadow-neumorphic-pressed), var(--hover-glow), var(--mechanical-inset-shadow), var(--deep-emboss);
+            transform: translateY(-3px) translateZ(2px);
+        }
+
+        #chat-send {
+            background-image: var(--accent-gradient), var(--industrial-metal);
+            border: 2px solid var(--accent-color);
+            border-radius: calc(var(--border-radius) / 2.2);
+            padding: 15px 25px;
+            color: var(--text-color);
+            font-size: 1.1rem;
+            cursor: pointer;
+            transition: transform var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing);
+            box-shadow: var(--shadow-neumorphic-raised), var(--mechanical-raised-shadow), var(--ornate-shadow), inset 0 5px 10px rgba(255, 255, 255, 0.2);
+            text-shadow: 0 3px 4px rgba(255, 255, 255, 0.35);
+            transform-style: preserve-3d;
+        }
+
+        #chat-send:hover {
+            transform: scale(1.12) translateY(-4px) translateZ(3px);
+            box-shadow: var(--shadow-neumorphic-raised), var(--hover-glow), var(--mechanical-raised-shadow), var(--ornate-shadow);
+        }
+
+        #chat-send:active {
+            transform: scale(0.93) translateY(3px) translateZ(-1px);
+            box-shadow: var(--shadow-neumorphic-pressed), var(--mechanical-inset-shadow);
+        }
+
+        .chat-toggle {
+            position: fixed;
+            top: 25px;
+            right: calc(var(--chat-panel-width) + 15px);
+            background-image: var(--accent-gradient), var(--industrial-metal);
+            border: 2.5px solid var(--accent-color);
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-color);
+            font-size: 1.8rem;
+            cursor: pointer;
+            box-shadow: var(--shadow-neumorphic-raised), var(--arcane-glow), var(--ornate-shadow), inset 0 5px 10px rgba(255, 255, 255, 0.2);
+            z-index: 40;
+            transition: transform var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), right var(--transition-duration) var(--transition-timing);
+            text-shadow: var(--text-shadow-glow);
+            transform-style: preserve-3d;
+        }
+
+        .chat-toggle:hover {
+            transform: scale(1.25) rotate(10deg) translateZ(5px);
+            box-shadow: var(--shadow-neumorphic-raised), var(--hover-glow), var(--arcane-glow), var(--ornate-shadow);
+        }
+
+        body:has(#chat-panel.openDrawer) .chat-toggle {
+            right: 15px;
+            background-image: var(--accent-gradient), var(--industrial-metal);
+            box-shadow: var(--shadow-neumorphic-raised), var(--arcane-glow), var(--ornate-shadow);
+            animation: var(--pulse-animation);
+        }
+
+        /* ===== Mechanical Details for Panels ===== */
+        .calculator-panel::before, .history-panel::before, .settings-panel::before, .info-panel::before, #chat-panel::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 40px;
+            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3));
+            border-bottom: var(--mechanical-border);
+            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45);
+            z-index: 2;
+            pointer-events: none;
+        }
+
+        .calculator-panel::after, .history-panel::after, .settings-panel::after, .info-panel::after, #chat-panel::after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 60px;
+            background: rgba(15, 10, 25, 0.92);
+            border-top: var(--mechanical-border);
+            border-radius: 0 0 var(--border-radius) var(--border-radius);
+            box-shadow: inset 0 6px 10px rgba(0, 0, 0, 0.45);
+            z-index: 2;
+            pointer-events: none;
+        }
+
+        .screw {
+            position: absolute;
+            width: 22px;
+            height: 22px;
+            background: var(--mechanical-gray);
+            border-radius: 50%;
+            box-shadow: inset 0 6px 7px var(--mechanical-shadow), 0 5px 6px var(--mechanical-highlight);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 3;
+            pointer-events: none;
+            transform-style: preserve-3d;
+        }
+
+        .screw::before {
+            content: "";
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: rgba(25, 20, 35, 0.9);
+            box-shadow: inset 0 4px 6px var(--mechanical-shadow), 0 0 5px var(--mechanical-highlight);
+        }
+
+        .screw::after {
+            content: "+";
+            position: absolute;
+            font-size: 11px;
+            color: var(--mechanical-shadow);
+            font-weight: bold;
+        }
+
+        .screw-tl { top: 35px; left: 35px; }
+        .screw-tr { top: 35px; right: 35px; }
+        .screw-bl { bottom: 35px; left: 35px; }
+        .screw-br { bottom: 35px; right: 35px; }
+
+        /* ===== Rune Decorations ===== */
+        .rune-decoration {
+            position: absolute;
+            width: 55px;
+            height: 55px;
+            background: var(--rune-etched-gradient);
+            border-radius: 50%;
+            box-shadow: var(--arcane-glow);
+            opacity: 0.7;
+            animation: var(--arcane-rune-pulse);
+            pointer-events: none;
+            z-index: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--accent-color-brighter);
+            font-size: 1.8rem;
+            text-shadow: var(--text-shadow-glow);
+            border: 1.5px solid rgba(var(--accent-color-rgb), 0.4);
+            transform-style: preserve-3d;
+        }
+
+        .rune-tl { top: 25px; left: 90px; }
+        .rune-tr { top: 25px; right: 90px; }
+        .rune-bl { bottom: 25px; left: 90px; }
+        .rune-br { bottom: 25px; right: 90px; }
+
+        /* Chat Panel Runes */
+        .chat-rune-tl { top: 25px; left: 25px; }
+        .chat-rune-tr { top: 25px; right: 25px; }
+        .chat-rune-bl { bottom: 25px; left: 25px; }
+        .chat-rune-br { bottom: 25px; right: 25px; }
+
+        /* ===== MMORPG Visual Effects for Interactions ===== */
+        .effect-container {
+            position: absolute;
+            pointer-events: none;
+            z-index: 100;
+            overflow: hidden;
+        }
+
+        .slash-effect {
+            position: absolute;
+            width: 100px;
+            height: 5px;
+            background: linear-gradient(to right, transparent, rgba(var(--accent-color-rgb), 0.8), transparent);
+            transform-origin: center;
+            animation: var(--slash-animation);
+            box-shadow: 0 0 10px var(--accent-color);
+        }
+
+        .level-up-effect {
+            position: absolute;
+            width: 100%;
+            height: 100px;
+            background: linear-gradient(to bottom, transparent, rgba(var(--accent-color-rgb), 0.6), transparent);
+            transform-origin: center;
+            animation: var(--level-up-animation);
+            box-shadow: 0 0 20px var(--accent-color);
+        }
+
+        .magic-aura-effect {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            background: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.5), transparent 70%);
+            border-radius: 50%;
+            transform-origin: center;
+            animation: var(--magic-aura-animation);
+            box-shadow: 0 0 15px var(--accent-color);
+        }
+
+        .magic-flash-effect {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+            background: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.9), transparent 60%);
+            border-radius: 50%;
+            transform-origin: center;
+            animation: var(--magic-flash-animation);
+            box-shadow: 0 0 25px var(--accent-color);
+        }
+
+        .magic-sparkles-effect {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background: rgba(var(--accent-color-rgb), 0.8);
+            border-radius: 50%;
+            transform-origin: center;
+            animation: var(--magic-sparkles-animation);
+            box-shadow: 0 0 5px var(--accent-color);
+        }
+
+        .smoke-effect {
+            position: absolute;
+            width: 50px;
+            height: 50px;
+            background: radial-gradient(circle, rgba(100, 100, 100, 0.6), transparent 70%);
+            border-radius: 50%;
+            transform-origin: center;
+            animation: var(--smoke-animation);
         }
     </style>
 </head>
-<body class="flex flex-col items-center justify-center min-h-screen bg-black text-red-600">
-    <div class="absolute top-0 left-0 w-full h-full opacity-20 pointer-events-none" style="background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><path d=\"M20,20 L80,20 L80,80 L20,80 Z M30,30 L70,30 L70,70 L30,70 Z\" fill=\"none\" stroke=\"%238a0000\" stroke-width=\"1\"/></svg>');"></div>
-
-    <h1 class="text-5xl md:text-6xl font-bold mb-4 gothic-text candle-flicker">
-        <i class="fas fa-skull skull-icon mr-2"></i> CASTLEVANIA ARKANOID
-    </h1>
-    
-    <div class="relative mb-8">
-        <canvas id="gameCanvas" width="800" height="600" class="rounded-lg"></canvas>
-        
-        <div id="startScreen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-80 rounded-lg">
-            <div class="text-center p-8 gothic-border bg-black bg-opacity-90 max-w-md">
-                <h2 class="text-3xl font-bold mb-6 gothic-text candle-flicker">THE NIGHT WALKER'S CHALLENGE</h2>
-                <p class="mb-6 text-gray-300">Break the cursed bricks before the night creatures overwhelm you!</p>
-                <button id="startButton" class="px-8 py-3 rounded-lg text-xl font-bold gothic-text vampire-button">
-                    <i class="fas fa-play mr-2"></i> BEGIN THE HUNT
-                </button>
-            </div>
+<body>
+    <div class="calculator-app">
+        <div class="nav-bar">
+            <div class="nav-item active" onclick="switchMode('calculator')" title="Calculator Mode">算</div>
+            <div class="nav-item" onclick="switchMode('history')" title="History Log">歴</div>
+            <div class="nav-item" onclick="switchMode('settings')" title="Settings">設</div>
+            <div class="nav-item" onclick="switchMode('info')" title="Information">情</div>
+            <div class="nav-item" onclick="toggleChatPanel()" title="Chat">聊</div>
         </div>
-        
-        <div id="gameOverScreen" class="absolute inset-0 hidden flex-col items-center justify-center bg-black bg-opacity-80 rounded-lg">
-            <div class="text-center p-8 gothic-border bg-black bg-opacity-90 max-w-md">
-                <h2 class="text-4xl font-bold mb-6 gothic-text text-red-500">YOU HAVE DIED</h2>
-                <p id="finalScore" class="text-2xl mb-6">Score: 0</p>
-                <button id="restartButton" class="px-8 py-3 rounded-lg text-xl font-bold gothic-text vampire-button">
-                    <i class="fas fa-redo mr-2"></i> TRY AGAIN
-                </button>
+        <div class="main-content">
+            <div class="calculator-panel">
+                <div class="screw screw-tl"></div>
+                <div class="screw screw-tr"></div>
+                <div class="screw screw-bl"></div>
+                <div class="screw screw-br"></div>
+                <div class="rune-decoration rune-tl">符</div>
+                <div class="rune-decoration rune-tr">文</div>
+                <div class="rune-decoration rune-bl">術</div>
+                <div class="rune-decoration rune-br">力</div>
+                <div class="calculator-header">
+                    <h1>Arcane Calculator Nexus</h1>
+                </div>
+                <div class="calculator-display-container">
+                    <input type="text" id="calc-display" class="calculator-display" readonly value="0">
+                </div>
+                <div class="calculator-buttons">
+                    <button class="button-memory" onclick="memoryOperation('mc')">MC</button>
+                    <button class="button-memory" onclick="memoryOperation('mr')">MR</button>
+                    <button class="button-memory" onclick="memoryOperation('m+')">M+</button>
+                    <button class="button-memory" onclick="memoryOperation('m-')">M-</button>
+                    <button class="button-clear" onclick="clearDisplay()">C</button>
+                    <button class="button-advanced" onclick="appendToDisplay('(')">(</button>
+                    <button class="button-advanced" onclick="appendToDisplay(')')">)</button>
+                    <button class="button-operator" onclick="appendToDisplay('/')">/</button>
+                    <button class="button-advanced" onclick="appendFunction('sqrt')">√</button>
+                    <button class="button-number" onclick="appendToDisplay('7')">7</button>
+                    <button class="button-number" onclick="appendToDisplay('8')">8</button>
+                    <button class="button-number" onclick="appendToDisplay('9')">9</button>
+                    <button class="button-operator" onclick="appendToDisplay('*')">×</button>
+                    <button class="button-advanced" onclick="appendFunction('pow')">^</button>
+                    <button class="button-number" onclick="appendToDisplay('4')">4</button>
+                    <button class="button-number" onclick="appendToDisplay('5')">5</button>
+                    <button class="button-number" onclick="appendToDisplay('6')">6</button>
+                    <button class="button-operator" onclick="appendToDisplay('-')">-</button>
+                    <button class="button-advanced" onclick="appendFunction('sin')">sin</button>
+                    <button class="button-number" onclick="appendToDisplay('1')">1</button>
+                    <button class="button-number" onclick="appendToDisplay('2')">2</button>
+                    <button class="button-number" onclick="appendToDisplay('3')">3</button>
+                    <button class="button-operator" onclick="appendToDisplay('+')">+</button>
+                    <button class="button-advanced" onclick="appendFunction('cos')">cos</button>
+                    <button class="button-number" onclick="appendToDisplay('0')">0</button>
+                    <button class="button-number" onclick="appendToDisplay('.')">.</button>
+                    <button class="button-advanced" onclick="appendFunction('log')">log</button>
+                    <button class="button-equals" onclick="calculate()">=</button>
+                </div>
+            </div>
+            <div class="history-panel">
+                <div class="screw screw-tl"></div>
+                <div class="screw screw-tr"></div>
+                <div class="screw screw-bl"></div>
+                <div class="screw screw-br"></div>
+                <div class="rune-decoration rune-tl">歴</div>
+                <div class="rune-decoration rune-tr">史</div>
+                <div class="rune-decoration rune-bl">記</div>
+                <div class="rune-decoration rune-br">録</div>
+                <h2>Calculation History</h2>
+                <div class="history-list" id="history-list">
+                    <!-- History items will be dynamically added here -->
+                </div>
+                <button class="clear-history" onclick="clearHistory()">Clear History</button>
+            </div>
+            <div class="settings-panel">
+                <div class="screw screw-tl"></div>
+                <div class="screw screw-tr"></div>
+                <div class="screw screw-bl"></div>
+                <div class="screw screw-br"></div>
+                <div class="rune-decoration rune-tl">設</div>
+                <div class="rune-decoration rune-tr">定</div>
+                <div class="rune-decoration rune-bl">調</div>
+                <div class="rune-decoration rune-br">整</div>
+                <h2>Settings</h2>
+                <div class="settings-options">
+                    <div class="setting-group">
+                        <label for="theme-select">Theme:</label>
+                        <select id="theme-select" onchange="changeTheme(this.value)">
+                            <option value="arcane">Arcane Nexus (Default)</option>
+                            <option value="demonic">Demonic Citadel</option>
+                            <option value="spiritual">Spiritual Temple</option>
+                            <option value="cyber">Cyber Wasteland</option>
+                        </select>
+                    </div>
+                    <div class="setting-group">
+                        <label for="accent-color">Accent Color:</label>
+                        <input type="color" id="accent-color" value="#4CAF50" onchange="changeAccentColor(this.value)">
+                    </div>
+                    <div class="setting-group">
+                        <label for="animation-toggle">Animations:</label>
+                        <select id="animation-toggle" onchange="toggleAnimations(this.value)">
+                            <option value="on">On</option>
+                            <option value="off">Off</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div class="info-panel">
+                <div class="screw screw-tl"></div>
+                <div class="screw screw-tr"></div>
+                <div class="screw screw-bl"></div>
+                <div class="screw screw-br"></div>
+                <div class="rune-decoration rune-tl">情</div>
+                <div class="rune-decoration rune-tr">報</div>
+                <div class="rune-decoration rune-bl">指</div>
+                <div class="rune-decoration rune-br">南</div>
+                <h2>About Nexus</h2>
+                <div class="info-content">
+                    <p>Welcome to the Arcane Calculator Nexus, a mystical tool forged in the realms of ancient magic and futuristic technology.</p>
+                    <p>Version: 2.0.0</p>
+                    <p>Developed by: Ethereal Codex Studios</p>
+                    <p>Inspired by the dark elegance of Castlevania, the haunting beauty of Ico, and the epic grandeur of Demon's Souls.</p>
+                    <p>Use the navigation runes on the left to switch between modes. Customize your experience in Settings.</p>
+                    <p>For support, contact us through the ethereal plane at support@etherealcodex.com.</p>
+                </div>
             </div>
         </div>
-    </div>
-    
-    <div class="flex justify-between w-full max-w-2xl px-4 mb-8">
-        <div class="bg-black bg-opacity-70 px-6 py-3 rounded-lg gothic-border">
-            <h3 class="text-xl gothic-text mb-1">SCORE</h3>
-            <p id="scoreDisplay" class="text-3xl font-bold">0</p>
-        </div>
-        <div class="bg-black bg-opacity-70 px-6 py-3 rounded-lg gothic-border">
-            <h3 class="text-xl gothic-text mb-1">LIVES</h3>
-            <p id="livesDisplay" class="text-3xl font-bold">3</p>
-        </div>
-        <div class="bg-black bg-opacity-70 px-6 py-3 rounded-lg gothic-border">
-            <h3 class="text-xl gothic-text mb-1">LEVEL</h3>
-            <p id="levelDisplay" class="text-3xl font-bold">1</p>
+        <div id="chat-panel" class="closedDrawer">
+            <div class="screw screw-tl"></div>
+            <div class="screw screw-tr"></div>
+            <div class="screw screw-bl"></div>
+            <div class="screw screw-br"></div>
+            <div class="rune-decoration chat-rune-tl">聊</div>
+            <div class="rune-decoration chat-rune-tr">天</div>
+            <div class="rune-decoration chat-rune-bl">友</div>
+            <div class="rune-decoration chat-rune-br">伴</div>
+            <div class="chat-header">
+                <h2>Ethereal Chat</h2>
+            </div>
+            <div class="chat-messages" id="chat-messages">
+                <!-- Chat messages will be dynamically added here -->
+            </div>
+            <div class="chat-input-area">
+                <input type="text" id="chat-input" placeholder="Type a message...">
+                <button id="chat-send" onclick="sendChatMessage()">Send</button>
+            </div>
         </div>
-    </div>
-    
-    <div class="absolute bottom-4 right-4 text-xs text-gray-600">
-        <p>Beware the creatures of the night...</p>
+        <div class="chat-toggle" onclick="toggleChatPanel()">聊</div>
     </div>
 
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const canvas = document.getElementById('gameCanvas');
-            const ctx = canvas.getContext('2d');
-            const startScreen = document.getElementById('startScreen');
-            const gameOverScreen = document.getElementById('gameOverScreen');
-            const startButton = document.getElementById('startButton');
-            const restartButton = document.getElementById('restartButton');
-            const scoreDisplay = document.getElementById('scoreDisplay');
-            const livesDisplay = document.getElementById('livesDisplay');
-            const levelDisplay = document.getElementById('levelDisplay');
-            const finalScore = document.getElementById('finalScore');
-            
-            // Game variables
-            let gameRunning = false;
-            let score = 0;
-            let lives = 3;
-            let level = 1;
-            let bricks = [];
-            let brickRowCount = 5;
-            let brickColumnCount = 10;
-            let brickWidth = 75;
-            let brickHeight = 20;
-            let brickPadding = 10;
-            let brickOffsetTop = 60;
-            let brickOffsetLeft = 30;
-            
-            // Ball variables
-            let ballRadius = 10;
-            let x = canvas.width / 2;
-            let y = canvas.height - 30;
-            let dx = 4;
-            let dy = -4;
-            
-            // Paddle variables
-            let paddleHeight = 15;
-            let paddleWidth = 100;
-            let paddleX = (canvas.width - paddleWidth) / 2;
-            let rightPressed = false;
-            let leftPressed = false;
-            
-            // Special effects
-            let particles = [];
-            let lastTime = 0;
-            
-            // Initialize bricks
-            function initBricks() {
-                bricks = [];
-                for (let c = 0; c < brickColumnCount; c++) {
-                    bricks[c] = [];
-                    for (let r = 0; r < brickRowCount; r++) {
-                        const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
-                        const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
-                        const brickHealth = Math.floor(Math.random() * 3) + 1; // 1-3 hits to break
-                        
-                        // Different colors based on health
-                        let brickColor;
-                        if (brickHealth === 1) brickColor = '#5a0000'; // Dark red
-                        else if (brickHealth === 2) brickColor = '#8a0000'; // Medium red
-                        else brickColor = '#ba0000'; // Bright red
-                        
-                        bricks[c][r] = { x: brickX, y: brickY, health: brickHealth, color: brickColor, visible: true };
-                    }
-                }
-            }
-            
-            // Draw bricks
-            function drawBricks() {
-                for (let c = 0; c < brickColumnCount; c++) {
-                    for (let r = 0; r < brickRowCount; r++) {
-                        if (bricks[c][r].visible) {
-                            const brick = bricks[c][r];
-                            
-                            // Draw brick with gothic style
-                            ctx.beginPath();
-                            ctx.rect(brick.x, brick.y, brickWidth, brickHeight);
-                            ctx.fillStyle = brick.color;
-                            ctx.fill();
-                            ctx.lineWidth = 2;
-                            ctx.strokeStyle = '#3a0000';
-                            ctx.stroke();
-                            
-                            // Add gothic cross pattern
-                            ctx.beginPath();
-                            ctx.moveTo(brick.x + 5, brick.y + 5);
-                            ctx.lineTo(brick.x + brickWidth - 5, brick.y + brickHeight - 5);
-                            ctx.moveTo(brick.x + brickWidth - 5, brick.y + 5);
-                            ctx.lineTo(brick.x + 5, brick.y + brickHeight - 5);
-                            ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
-                            ctx.stroke();
-                            
-                            // Add health indicator (skull icons)
-                            if (brick.health > 1) {
-                                const skulls = brick.health;
-                                const spacing = brickWidth / (skulls + 1);
-                                for (let i = 1; i <= skulls; i++) {
-                                    const skullX = brick.x + (spacing * i) - 4;
-                                    const skullY = brick.y + brickHeight / 2 - 4;
-                                    
-                                    ctx.beginPath();
-                                    ctx.arc(skullX + 4, skullY + 4, 3, 0, Math.PI * 2);
-                                    ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
-                                    ctx.fill();
-                                    
-                                    ctx.beginPath();
-                                    ctx.arc(skullX + 4, skullY + 4, 5, 0, Math.PI, false);
-                                    ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
-                                    ctx.stroke();
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-            
-            // Draw ball
-            function drawBall() {
-                ctx.beginPath();
-                ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
-                
-                // Create a glowing red ball effect
-                const gradient = ctx.createRadialGradient(
-                    x, y, ballRadius / 2,
-                    x, y, ballRadius
-                );
-                gradient.addColorStop(0, '#ff0000');
-                gradient.addColorStop(1, '#8a0000');
-                
-                ctx.fillStyle = gradient;
-                ctx.fill();
-                
-                // Add inner glow
-                ctx.beginPath();
-                ctx.arc(x, y, ballRadius / 2, 0, Math.PI * 2);
-                ctx.fillStyle = 'rgba(255, 150, 150, 0.5)';
-                ctx.fill();
-                
-                // Add outer glow
-                ctx.beginPath();
-                ctx.arc(x, y, ballRadius + 3, 0, Math.PI * 2);
-                const glowGradient = ctx.createRadialGradient(
-                    x, y, ballRadius,
-                    x, y, ballRadius + 3
-                );
-                glowGradient.addColorStop(0, 'rgba(255, 0, 0, 0.7)');
-                glowGradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
-                ctx.fillStyle = glowGradient;
-                ctx.fill();
-            }
-            
-            // Draw paddle
-            function drawPaddle() {
-                // Main paddle
-                ctx.beginPath();
-                ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
-                
-                // Gradient for paddle
-                const gradient = ctx.createLinearGradient(
-                    paddleX, canvas.height - paddleHeight,
-                    paddleX, canvas.height
-                );
-                gradient.addColorStop(0, '#3a1a1a');
-                gradient.addColorStop(1, '#5a2a2a');
-                
-                ctx.fillStyle = gradient;
-                ctx.fill();
-                ctx.strokeStyle = '#8a0000';
-                ctx.lineWidth = 2;
-                ctx.stroke();
-                
-                // Add gothic details
-                const segmentWidth = paddleWidth / 5;
-                for (let i = 1; i < 5; i++) {
-                    ctx.beginPath();
-                    ctx.moveTo(paddleX + (segmentWidth * i), canvas.height - paddleHeight);
-                    ctx.lineTo(paddleX + (segmentWidth * i), canvas.height);
-                    ctx.strokeStyle = 'rgba(186, 0, 0, 0.5)';
-                    ctx.stroke();
-                }
-                
-                // Add spikes at the ends
-                ctx.beginPath();
-                ctx.moveTo(paddleX, canvas.height - paddleHeight);
-                ctx.lineTo(paddleX - 5, canvas.height - paddleHeight - 10);
-                ctx.lineTo(paddleX + 5, canvas.height - paddleHeight - 10);
-                ctx.closePath();
-                ctx.fillStyle = '#8a0000';
-                ctx.fill();
-                
-                ctx.beginPath();
-                ctx.moveTo(paddleX + paddleWidth, canvas.height - paddleHeight);
-                ctx.lineTo(paddleX + paddleWidth + 5, canvas.height - paddleHeight - 10);
-                ctx.lineTo(paddleX + paddleWidth - 5, canvas.height - paddleHeight - 10);
-                ctx.closePath();
-                ctx.fillStyle = '#8a0000';
-                ctx.fill();
-            }
-            
-            // Draw particles
-            function drawParticles() {
-                for (let i = 0; i < particles.length; i++) {
-                    const p = particles[i];
-                    
-                    ctx.beginPath();
-                    ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
-                    
-                    const alpha = p.lifetime / 100;
-                    ctx.fillStyle = `rgba(255, ${Math.floor(100 + Math.random() * 155)}, 0, ${alpha})`;
-                    ctx.fill();
-                    
-                    p.x += p.vx;
-                    p.y += p.vy;
-                    p.lifetime--;
-                    
-                    if (p.lifetime <= 0) {
-                        particles.splice(i, 1);
-                        i--;
-                    }
-                }
-            }
-            
-            // Create particles
-            function createParticles(x, y, count) {
-                for (let i = 0; i < count; i++) {
-                    particles.push({
-                        x: x,
-                        y: y,
-                        radius: Math.random() * 3 + 1,
-                        vx: (Math.random() - 0.5) * 5,
-                        vy: (Math.random() - 0.5) * 5,
-                        lifetime: Math.floor(Math.random() * 30) + 20
-                    });
-                }
-            }
-            
-            // Collision detection
-            function collisionDetection() {
-                for (let c = 0; c < brickColumnCount; c++) {
-                    for (let r = 0; r < brickRowCount; r++) {
-                        const brick = bricks[c][r];
-                        if (brick.visible) {
-                            if (
-                                x > brick.x &&
-                                x < brick.x + brickWidth &&
-                                y > brick.y &&
-                                y < brick.y + brickHeight
-                            ) {
-                                dy = -dy;
-                                brick.health--;
-                                
-                                // Create particles on hit
-                                createParticles(
-                                    brick.x + brickWidth / 2,
-                                    brick.y + brickHeight / 2,
-                                    10
-                                );
-                                
-                                if (brick.health <= 0) {
-                                    brick.visible = false;
-                                    score += 10 * level;
-                                    scoreDisplay.textContent = score;
-                                    
-                                    // Check if all bricks are cleared
-                                    if (checkLevelComplete()) {
-                                        levelUp();
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
+        let display = document.getElementById('calc-display');
+        let historyList = document.getElementById('history-list');
+        let currentInput = '0';
+        let history = [];
+        let navItems = document.querySelectorAll('.nav-item');
+        let panels = document.querySelectorAll('.calculator-panel, .history-panel, .settings-panel, .info-panel');
+        let memory = 0;
+        let chatPanel = document.getElementById('chat-panel');
+        let chatMessages = document.getElementById('chat-messages');
+        let chatInput = document.getElementById('chat-input');
+        let chatHistory = [];
+        let isChatOpen = false;
+
+        // Initialize calculator
+        display.value = currentInput;
+
+        function appendToDisplay(value) {
+            if (currentInput === '0' && value !== '.') {
+                currentInput = value;
+            } else {
+                currentInput += value;
             }
-            
-            // Check if level is complete
-            function checkLevelComplete() {
-                for (let c = 0; c < brickColumnCount; c++) {
-                    for (let r = 0; r < brickRowCount; r++) {
-                        if (bricks[c][r].visible) {
-                            return false;
-                        }
-                    }
-                }
-                return true;
+            display.value = currentInput;
+            triggerMagicSparkles(display);
+        }
+
+        function appendFunction(func) {
+            if (func === 'sqrt') {
+                currentInput += 'Math.sqrt(';
+            } else if (func === 'pow') {
+                currentInput += 'Math.pow(';
+            } else if (func === 'sin') {
+                currentInput += 'Math.sin(Math.PI/180 * ';
+            } else if (func === 'cos') {
+                currentInput += 'Math.cos(Math.PI/180 * ';
+            } else if (func === 'log') {
+                currentInput += 'Math.log(';
             }
-            
-            // Level up
-            function levelUp() {
-                level++;
-                levelDisplay.textContent = level;
-                
-                // Increase difficulty
-                brickRowCount = Math.min(8, brickRowCount + 1);
-                dx *= 1.1;
-                dy *= 1.1;
-                
-                // Reset ball position
-                x = canvas.width / 2;
-                y = canvas.height - 30;
-                
-                // Create new bricks
-                initBricks();
-                
-                // Show level up message
-                const levelUpDiv = document.createElement('div');
-                levelUpDiv.className = 'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-4xl font-bold gothic-text text-red-500 bg-black bg-opacity-80 px-8 py-4 rounded-lg';
-                levelUpDiv.textContent = `LEVEL ${level}`;
-                document.body.appendChild(levelUpDiv);
-                
-                setTimeout(() => {
-                    levelUpDiv.style.opacity = '0';
-                    setTimeout(() => {
-                        document.body.removeChild(levelUpDiv);
-                    }, 500);
-                }, 1500);
+            display.value = currentInput;
+            triggerMagicSparkles(display);
+        }
+
+        function clearDisplay() {
+            currentInput = '0';
+            display.value = currentInput;
+            triggerSmokeEffect(display);
+        }
+
+        function calculate() {
+            try {
+                let expression = currentInput.replace(/×/g, '*');
+                let result = eval(expression).toString();
+                if (!isFinite(result)) throw new Error('Invalid calculation');
+                history.push({ expression: currentInput, result: result });
+                updateHistory();
+                currentInput = result;
+                display.value = currentInput;
+                triggerLevelUpFlash(display);
+            } catch (error) {
+                display.value = 'Error';
+                setTimeout(clearDisplay, 1000);
+                triggerSmokeEffect(display);
             }
-            
-            // Game over
-            function gameOver() {
-                gameRunning = false;
-                finalScore.textContent = `Score: ${score}`;
-                gameOverScreen.classList.remove('hidden');
-                gameOverScreen.classList.add('flex');
+        }
+
+        function memoryOperation(operation) {
+            switch (operation) {
+                case 'mc':
+                    memory = 0;
+                    break;
+                case 'mr':
+                    currentInput = memory.toString();
+                    display.value = currentInput;
+                    break;
+                case 'm+':
+                    memory += parseFloat(currentInput) || 0;
+                    break;
+                case 'm-':
+                    memory -= parseFloat(currentInput) || 0;
+                    break;
             }
-            
-            // Reset game
-            function resetGame() {
-                score = 0;
-                lives = 3;
-                level = 1;
-                scoreDisplay.textContent = score;
-                livesDisplay.textContent = lives;
-                levelDisplay.textContent = level;
-                
-                x = canvas.width / 2;
-                y = canvas.height - 30;
-                dx = 4;
-                dy = -4;
-                paddleX = (canvas.width - paddleWidth) / 2;
-                
-                brickRowCount = 5;
-                initBricks();
-                
-                gameOverScreen.classList.add('hidden');
-                gameOverScreen.classList.remove('flex');
+            triggerMagicAura(display);
+        }
+
+        function updateHistory() {
+            historyList.innerHTML = '';
+            if (history.length === 0) {
+                historyList.innerHTML = '<p style="text-align: center; color: var(--text-color-secondary);">No calculations yet.</p>';
+                return;
             }
-            
-            // Main draw function
-            function draw() {
-                if (!gameRunning) return;
-                
-                // Clear canvas with dark translucent overlay for motion blur effect
-                ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
-                
-                // Draw game elements
-                drawBricks();
-                drawBall();
-                drawPaddle();
-                drawParticles();
-                
-                // Collision detection
-                collisionDetection();
-                
-                // Wall collision
-                if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
-                    dx = -dx;
-                    createParticles(x, y, 5);
-                }
-                
-                if (y + dy < ballRadius) {
-                    dy = -dy;
-                    createParticles(x, y, 5);
-                } else if (y + dy > canvas.height - ballRadius) {
-                    // Paddle collision
-                    if (x > paddleX && x < paddleX + paddleWidth) {
-                        // Calculate angle based on where ball hits paddle
-                        const hitPosition = (x - paddleX) / paddleWidth;
-                        const angle = (hitPosition - 0.5) * Math.PI / 3; // -30 to 30 degrees
-                        
-                        // Calculate new direction
-                        const speed = Math.sqrt(dx * dx + dy * dy) * 1.05; // Slightly increase speed
-                        dy = -Math.abs(Math.cos(angle) * speed);
-                        dx = Math.sin(angle) * speed;
-                        
-                        createParticles(x, y, 10);
-                    } else {
-                        // Ball missed paddle
-                        lives--;
-                        livesDisplay.textContent = lives;
-                        
-                        if (lives <= 0) {
-                            gameOver();
-                        } else {
-                            // Reset ball position
-                            x = canvas.width / 2;
-                            y = canvas.height - 30;
-                            dx = 4;
-                            dy = -4;
-                            paddleX = (canvas.width - paddleWidth) / 2;
-                        }
-                    }
-                }
-                
-                // Paddle movement
-                if (rightPressed && paddleX < canvas.width - paddleWidth) {
-                    paddleX += 7;
-                } else if (leftPressed && paddleX > 0) {
-                    paddleX -= 7;
-                }
-                
-                // Move ball
-                x += dx;
-                y += dy;
-                
-                requestAnimationFrame(draw);
+            history.slice(-15).forEach((item, index) => {
+                let div = document.createElement('div');
+                div.className = 'history-item';
+                div.innerHTML = `
+                    <span>${item.expression}</span>
+                    <span>= ${item.result}</span>
+                    <button onclick="recallHistory(${index + history.length - 15})">Recall</button>
+                `;
+                historyList.appendChild(div);
+            });
+            historyList.scrollTop = historyList.scrollHeight;
+        }
+
+        function recallHistory(index) {
+            currentInput = history[index].expression;
+            display.value = currentInput;
+            switchMode('calculator');
+            triggerMagicFlash(display);
+        }
+
+        function clearHistory() {
+            history = [];
+            updateHistory();
+            triggerSmokeEffect(historyList);
+        }
+
+        function switchMode(mode) {
+            navItems.forEach(item => item.classList.remove('active'));
+            panels.forEach(panel => panel.style.display = 'none');
+            if (mode === 'calculator') {
+                navItems[0].classList.add('active');
+                panels[0].style.display = 'flex';
+                triggerLevelUpFlash(panels[0]);
+            } else if (mode === 'history') {
+                navItems[1].classList.add('active');
+                panels[1].style.display = 'flex';
+                triggerLevelUpFlash(panels[1]);
+            } else if (mode === 'settings') {
+                navItems[2].classList.add('active');
+                panels[2].style.display = 'flex';
+                triggerLevelUpFlash(panels[2]);
+            } else if (mode === 'info') {
+                navItems[3].classList.add('active');
+                panels[3].style.display = 'flex';
+                triggerLevelUpFlash(panels[3]);
             }
-            
-            // Event listeners
-            document.addEventListener('keydown', keyDownHandler);
-            document.addEventListener('keyup', keyUpHandler);
-            canvas.addEventListener('mousemove', mouseMoveHandler);
-            canvas.addEventListener('touchmove', touchMoveHandler, { passive: false });
-            
-            function keyDownHandler(e) {
-                if (e.key === 'Right' || e.key === 'ArrowRight') {
-                    rightPressed = true;
-                } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
-                    leftPressed = true;
-                }
+        }
+
+        function changeTheme(theme) {
+            console.log("Theme changed to: " + theme);
+            // In a real implementation, this would update CSS variables for different themes
+            triggerMagicAura(document.body);
+        }
+
+        function changeAccentColor(color) {
+            document.documentElement.style.setProperty('--accent-color', color);
+            document.documentElement.style.setProperty('--accent-color-darker', `color-mix(in srgb, ${color}, black 50%)`);
+            document.documentElement.style.setProperty('--accent-color-brighter', `color-mix(in srgb, ${color}, white 40%)`);
+            document.documentElement.style.setProperty('--accent-color-subtle', `color-mix(in srgb, ${color}, black 25%)`);
+            document.documentElement.style.setProperty('--accent-color-glow', `color-mix(in srgb, ${color}, white 25%)`);
+            triggerMagicFlash(document.body);
+        }
+
+        function toggleAnimations(state) {
+            // Animation toggle logic can be implemented here if needed
+            triggerSmokeEffect(document.body);
+        }
+
+        function toggleChatPanel() {
+            if (isChatOpen) {
+                chatPanel.classList.remove('openDrawer');
+                chatPanel.classList.add('closedDrawer');
+                navItems[4].classList.remove('active');
+            } else {
+                chatPanel.classList.remove('closedDrawer');
+                chatPanel.classList.add('openDrawer');
+                navItems[4].classList.add('active');
             }
-            
-            function keyUpHandler(e) {
-                if (e.key === 'Right' || e.key === 'ArrowRight') {
-                    rightPressed = false;
-                } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
-                    leftPressed = false;
-                }
+            isChatOpen = !isChatOpen;
+            triggerSlashEffect(chatPanel);
+        }
+
+        function sendChatMessage() {
+            let messageText = chatInput.value.trim();
+            if (messageText === '') return;
+
+            let now = new Date();
+            let timeStr = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+            // Add user message
+            let userMessage = document.createElement('div');
+            userMessage.className = 'chat-message user';
+            userMessage.textContent = messageText;
+            userMessage.setAttribute('data-sender', 'You');
+            userMessage.setAttribute('data-time', timeStr);
+            chatMessages.appendChild(userMessage);
+            chatHistory.push({ sender: 'You', text: messageText, time: timeStr });
+
+            // Clear input
+            chatInput.value = '';
+
+            // Auto-scroll to bottom
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+
+            // Simulate a response (for demo purposes)
+            setTimeout(() => {
+                let responseText = getBotResponse(messageText);
+                let botMessage = document.createElement('div');
+                botMessage.className = 'chat-message other';
+                botMessage.textContent = responseText;
+                botMessage.setAttribute('data-sender', 'Ethereal Bot');
+                botMessage.setAttribute('data-time', new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+                chatMessages.appendChild(botMessage);
+                chatHistory.push({ sender: 'Ethereal Bot', text: responseText, time: timeStr });
+
+                // Auto-scroll to bottom
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+                triggerMagicSparkles(botMessage);
+            }, 1000);
+
+            triggerMagicAura(userMessage);
+        }
+
+        function getBotResponse(message) {
+            message = message.toLowerCase();
+            if (message.includes('hello') || message.includes('hi')) {
+                return "Greetings, traveler! How may I assist you in the Arcane Nexus?";
+            } else if (message.includes('help') || message.includes('support')) {
+                return "I'm here to aid you. For calculator issues, check the 'About Nexus' panel or contact support@etherealcodex.com.";
+            } else if (message.includes('bye') || message.includes('goodbye')) {
+                return "Farewell, may the ethereal winds guide your path.";
+            } else {
+                return "I sense your query... Could you elaborate? I’m attuned to assist with the Calculator Nexus.";
             }
-            
-            function mouseMoveHandler(e) {
-                const relativeX = e.clientX - canvas.offsetLeft;
-                if (relativeX > 0 && relativeX < canvas.width) {
-                    paddleX = relativeX - paddleWidth / 2;
-                }
+        }
+
+        // Dynamic lighting based on mouse movement
+        document.addEventListener('mousemove', (e) => {
+            let x = (e.clientX / window.innerWidth) * 100;
+            let y = (e.clientY / window.innerHeight) * 100;
+            document.documentElement.style.setProperty('--mouse-x', `${x}%`);
+            document.documentElement.style.setProperty('--mouse-y', `${y}%`);
+        });
+
+        // Add event listener for Enter key on chat input
+        chatInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendChatMessage();
             }
-            
-            function touchMoveHandler(e) {
-                e.preventDefault();
-                const touch = e.touches[0];
-                const relativeX = touch.clientX - canvas.offsetLeft;
-                if (relativeX > 0 && relativeX < canvas.width) {
-                    paddleX = relativeX - paddleWidth / 2;
-                }
+        });
+
+        // Initialize history display
+        updateHistory();
+
+        // Initialize mode
+        switchMode('calculator');
+
+        // MMORPG Visual Effects Functions
+        function triggerSlashEffect(element) {
+            let rect = element.getBoundingClientRect();
+            let container = document.createElement('div');
+            container.className = 'effect-container';
+            container.style.top = `${rect.top + rect.height / 2}px`;
+            container.style.left = `${rect.left + rect.width / 2}px`;
+            container.style.width = '0';
+            container.style.height = '0';
+            document.body.appendChild(container);
+
+            let effect = document.createElement('div');
+            effect.className = 'slash-effect';
+            container.appendChild(effect);
+
+            setTimeout(() => container.remove(), 500);
+        }
+
+        function triggerLevelUpFlash(element) {
+            let rect = element.getBoundingClientRect();
+            let container = document.createElement('div');
+            container.className = 'effect-container';
+            container.style.top = `${rect.top}px`;
+            container.style.left = `${rect.left}px`;
+            container.style.width = `${rect.width}px`;
+            container.style.height = `${rect.height}px`;
+            document.body.appendChild(container);
+
+            let effect = document.createElement('div');
+            effect.className = 'level-up-effect';
+            container.appendChild(effect);
+
+            setTimeout(() => container.remove(), 1000);
+        }
+
+        function triggerMagicAura(element) {
+            let rect = element.getBoundingClientRect();
+            let container = document.createElement('div');
+            container.className = 'effect-container';
+            container.style.top = `${rect.top + rect.height / 2}px`;
+            container.style.left = `${rect.left + rect.width / 2}px`;
+            container.style.width = '0';
+            container.style.height = '0';
+            document.body.appendChild(container);
+
+            let effect = document.createElement('div');
+            effect.className = 'magic-aura-effect';
+            container.appendChild(effect);
+
+            setTimeout(() => container.remove(), 1200);
+        }
+
+        function triggerMagicFlash(element) {
+            let rect = element.getBoundingClientRect();
+            let container = document.createElement('div');
+            container.className = 'effect-container';
+            container.style.top = `${rect.top + rect.height / 2}px`;
+            container.style.left = `${rect.left + rect.width / 2}px`;
+            container.style.width = '0';
+            container.style.height = '0';
+            document.body.appendChild(container);
+
+            let effect = document.createElement('div');
+            effect.className = 'magic-flash-effect';
+            container.appendChild(effect);
+
+            setTimeout(() => container.remove(), 600);
+        }
+
+        function triggerMagicSparkles(element) {
+            let rect = element.getBoundingClientRect();
+            let container = document.createElement('div');
+            container.className = 'effect-container';
+            container.style.top = `${rect.top + rect.height / 2}px`;
+            container.style.left = `${rect.left + rect.width / 2}px`;
+            container.style.width = '0';
+            container.style.height = '0';
+            document.body.appendChild(container);
+
+            for (let i = 0; i < 5; i++) {
+                let effect = document.createElement('div');
+                effect.className = 'magic-sparkles-effect';
+                effect.style.animationDelay = `${i * 0.1}s`;
+                container.appendChild(effect);
             }
-            
-            // Button event listeners
-            startButton.addEventListener('click', () => {
-                startScreen.classList.add('hidden');
-                gameRunning = true;
-                resetGame();
-                draw();
-            });
-            
-            restartButton.addEventListener('click', () => {
-                resetGame();
-                gameRunning = true;
-                draw();
-            });
-            
-            // Initialize game
-            initBricks();
-            
-            // Add ambient candle flicker effect
-            setInterval(() => {
-                const flickerElements = document.querySelectorAll('.candle-flicker');
-                flickerElements.forEach(el => {
-                    el.style.opacity = 0.7 + Math.random() * 0.3;
-                });
-            }, 100);
+
+            setTimeout(() => container.remove(), 1000);
+        }
+
+        function triggerSmokeEffect(element) {
+            let rect = element.getBoundingClientRect();
+            let container = document.createElement('div');
+            container.className = 'effect-container';
+            container.style.top = `${rect.top + rect.height / 2}px`;
+            container.style.left = `${rect.left + rect.width / 2}px`;
+            container.style.width = '0';
+            container.style.height = '0';
+            document.body.appendChild(container);
+
+            let effect = document.createElement('div');
+            effect.className = 'smoke-effect';
+            container.appendChild(effect);
+
+            setTimeout(() => container.remove(), 1500);
+        }
+
+        // Add click event listeners to buttons for visual effects
+        document.querySelectorAll('button').forEach(button => {
+            button.addEventListener('click', () => triggerSlashEffect(button));
         });
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Xie/deepsite-arkanoid" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>
\ No newline at end of file
+</body>
+</html>
