:root{--bg-primary: #f4f4f5;--bg-secondary: #e4e4e7;--text-primary: #000000;--text-secondary: #404040;--text-tertiary: #525252;--card-bg: linear-gradient(145deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .7) 100%);--card-border: rgba(255, 255, 255, .8);--card-shadow: 0 8px 32px 0 rgba(31, 38, 135, .15), inset 0 0 0 1px rgba(255, 255, 255, .4);--card-hover-bg: #ffffff;--card-hover-border: #000000;--card-hover-text: #000000;--card-hover-shadow: 0 20px 40px -5px rgba(0, 0, 0, .2), 0 10px 20px -6px rgba(0, 0, 0, .1);--accent-cyan: #06b6d4;--accent-purple: #a855f7;--nav-bg: rgba(244, 244, 245, .9);--nav-border: #e4e4e7;--btn-border: #000000;--btn-hover-bg: #000000;--btn-hover-text: #ffffff}.dark{--bg-primary: #050810;--bg-secondary: rgba(255, 255, 255, .03);--text-primary: #ffffff;--text-secondary: #94a3b8;--text-tertiary: #64748b;--card-bg: linear-gradient(145deg, rgba(20, 25, 40, .85) 0%, rgba(20, 25, 40, .7) 100%);--card-border: rgba(255, 255, 255, .15);--card-shadow: 0 8px 32px 0 rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .05);--card-hover-bg: #0f1219;--card-hover-border: rgba(6, 182, 212, .8);--card-hover-text: #ffffff;--card-hover-shadow: 0 20px 40px -5px rgba(0, 0, 0, .7), 0 10px 20px -6px rgba(0, 0, 0, .5);--nav-bg: rgba(5, 8, 16, .8);--nav-border: rgba(255, 255, 255, .1);--btn-border: rgba(255, 255, 255, .2);--btn-hover-bg: rgba(6, 182, 212, .1);--btn-hover-text: #22d3ee}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:Space Grotesk,sans-serif;line-height:1.6;transition:background-color .3s ease,color .3s ease}.font-mono{font-family:JetBrains Mono,monospace}.text-white,.text-gray-900,.text-zinc-900{color:var(--text-primary)!important}.text-zinc-400,.text-zinc-500,.text-zinc-600,.text-gray-500,.text-gray-600{color:var(--text-secondary)!important}.text-zinc-300{color:var(--text-tertiary)!important}.border-zinc-900\/50{border-color:var(--card-border)!important}.glass-card{background:var(--card-bg)!important;border:1px solid var(--card-border)!important;box-shadow:var(--card-shadow)!important;backdrop-filter:blur(40px)!important;-webkit-backdrop-filter:blur(40px)!important;transition:all .3s cubic-bezier(.4,0,.2,1)}.glass-card:hover{background:var(--card-hover-bg)!important;border-color:var(--card-hover-border)!important;box-shadow:var(--card-hover-shadow)!important;transform:translateY(-4px)}.glass-card:hover h3,.glass-card:hover p,.glass-card:hover span,.glass-card:hover .text-zinc-500,.glass-card:hover .text-zinc-400{color:var(--card-hover-text)!important;transition:color .2s ease}.glass-card:hover i.text-zinc-500{color:var(--card-hover-text)!important}nav{background-color:var(--nav-bg)!important;border-bottom:1px solid var(--nav-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.nav-item{color:var(--text-primary);transition:color .2s ease}.nav-item:hover{color:var(--accent-cyan)}button{border:1px solid var(--btn-border)}button:hover{background-color:var(--btn-hover-bg)}button:hover span{color:var(--btn-hover-text)!important}#canvas{position:fixed;top:0;left:0;width:100%;animation:fallback-reveal .5s ease-out 2s forwards}@keyframes fallback-reveal{to{opacity:1}}.reveal-text{opacity:0}body:not(.animations-loaded) .reveal-text{animation:fallback-reveal .5s ease-out 2s forwards}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--card-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@keyframes float{0%{transform:translateY(0) rotate(0);opacity:1}50%{transform:translateY(-15px) rotate(2deg);opacity:.9}to{transform:translateY(0) rotate(0);opacity:1}}POLISHED FLOATING CODE ANIMATIONS Add this to the end of your main.css file========================================*/ @keyframes float{0%{transform:translateY(0) rotate(0);opacity:1}50%{transform:translateY(-15px) rotate(2deg);opacity:.9}100%{transform:translateY(0) rotate(0);opacity:1}}.animate-float{animation:float 4s ease-in-out infinite;will-change:transform,opacity}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-float{animation:fadeInUp .6s ease-out forwards,float 4s ease-in-out infinite .6s}@keyframes typing{0%,to{width:0}20%,80%{width:100%}}.typing-animation{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid transparent;animation:typing 4s steps(20) infinite}@keyframes particleGlow{0%,to{transform:scale(1);opacity:.3;box-shadow:0 0 5px currentColor}50%{transform:scale(1.5);opacity:1;box-shadow:0 0 20px currentColor,0 0 30px currentColor}}.animate-ping{animation:particleGlow 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes terminalPulse{0%,to{transform:scale(1);box-shadow:0 20px 60px #06b6d44d}50%{transform:scale(1.02);box-shadow:0 25px 80px #06b6d480}}.glass-card:has(.typing-animation):hover{animation:terminalPulse 2s ease-in-out infinite}.animate-float:hover{animation-play-state:paused;transform:translateY(-5px) scale(1.05)!important;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.animate-float .glass-card:hover{box-shadow:0 12px 40px rgba(var(--glow-color),.4)}.border-l-cyan-500{--glow-color: 6, 182, 212}.border-l-purple-500{--glow-color: 168, 85, 247}.border-l-blue-500{--glow-color: 59, 130, 246}.border-l-green-500{--glow-color: 34, 197, 94}.border-l-pink-500{--glow-color: 236, 72, 153}.border-l-orange-500{--glow-color: 249, 115, 22}.hero-gradient{background:linear-gradient(135deg,#22d3ee,#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 200%;animation:gradient-shift 8s ease infinite}.hero-gradient-primary{background:linear-gradient(135deg,var(--primary-500) 0%,var(--primary-600) 50%,var(--primary-500) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 200%;animation:gradient-shift 8s ease infinite}.hero-gradient-secondary{background:linear-gradient(135deg,var(--secondary-500) 0%,var(--secondary-600) 50%,var(--secondary-500) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 200%;animation:gradient-shift 8s ease infinite .5s}@keyframes gradient-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.text-primary-theme{color:var(--primary-500)}.text-secondary-theme{color:var(--secondary-500)}.text-primary-600{color:var(--primary-600)}.text-secondary-600{color:var(--secondary-600)}.marquee-container{mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}.marquee-track{display:flex;white-space:nowrap;will-change:transform;animation:marquee 30s linear infinite}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.perspective-1000{perspective:1000px}.preserve-3d{transform-style:preserve-3d}.rotate-y-12{transform:rotateY(12deg) rotateX(5deg)}.rotate-y-n12{transform:rotateY(-12deg) rotateX(5deg)}.stack-card{position:sticky;top:100px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.group:hover .transform-3d-image{transform:rotateY(0) rotateX(0) scale(1.05);transition:transform .7s cubic-bezier(.2,.8,.2,1)}#canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none}:root[data-color-theme=amber],:root{--primary-400: #fbbf24;--primary-500: #f59e0b;--primary-600: #d97706;--primary-700: #b45309;--secondary-400: #38bdf8;--secondary-500: #0ea5e9;--secondary-600: #0284c7;--accent-400: #fbbf24;--accent-500: #fb923c;--accent-600: #f97316;--hero-gradient-from: #f59e0b;--hero-gradient-via: #f97316;--hero-gradient-to: #dc2626}:root[data-color-theme=emerald]{--primary-400: #34d399;--primary-500: #10b981;--primary-600: #059669;--primary-700: #047857;--secondary-400: #2dd4bf;--secondary-500: #14b8a6;--secondary-600: #0d9488;--accent-400: #a3e635;--accent-500: #84cc16;--accent-600: #65a30d;--hero-gradient-from: #10b981;--hero-gradient-via: #14b8a6;--hero-gradient-to: #06b6d4}:root[data-color-theme=crimson]{--primary-400: #f87171;--primary-500: #ef4444;--primary-600: #dc2626;--primary-700: #b91c1c;--secondary-400: #f472b6;--secondary-500: #ec4899;--secondary-600: #db2777;--accent-400: #fb923c;--accent-500: #f97316;--accent-600: #ea580c;--hero-gradient-from: #dc2626;--hero-gradient-via: #ec4899;--hero-gradient-to: #f97316}:root[data-color-theme=violet]{--primary-400: #a78bfa;--primary-500: #8b5cf6;--primary-600: #7c3aed;--primary-700: #6d28d9;--secondary-400: #e879f9;--secondary-500: #d946ef;--secondary-600: #c026d3;--accent-400: #22d3ee;--accent-500: #06b6d4;--accent-600: #0891b2;--hero-gradient-from: #7c3aed;--hero-gradient-via: #d946ef;--hero-gradient-to: #06b6d4}:root[data-color-theme=current]{--primary-400: #22d3ee;--primary-500: #06b6d4;--primary-600: #0891b2;--primary-700: #0e7490;--secondary-400: #c084fc;--secondary-500: #a855f7;--secondary-600: #9333ea;--accent-400: #60a5fa;--accent-500: #3b82f6;--accent-600: #2563eb;--hero-gradient-from: #06b6d4;--hero-gradient-via: #3b82f6;--hero-gradient-to: #a855f7}.nav-item:hover{color:var(--primary-500)!important}.hero-gradient{background:linear-gradient(to right,var(--hero-gradient-from),var(--hero-gradient-via),var(--hero-gradient-to));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.text-primary-accent{color:var(--primary-500)!important}.text-secondary-accent{color:var(--secondary-500)!important}.text-accent{color:var(--accent-500)!important}button:hover{border-color:var(--primary-500)}button:hover span{color:var(--primary-500)!important}.border-l-cyan-500,.border-cyan-500{border-color:var(--primary-500)!important}.border-l-purple-500,.border-purple-500{border-color:var(--secondary-500)!important}.border-l-blue-500,.border-blue-500{border-color:var(--secondary-600)!important}.border-l-green-500,.border-green-500{border-color:var(--accent-500)!important}.text-cyan-400,.text-cyan-500,.text-cyan-600{color:var(--primary-500)!important}.text-purple-400,.text-purple-500,.text-purple-600{color:var(--secondary-500)!important}.text-green-400,.text-green-500{color:var(--accent-500)!important}.text-glow{text-shadow:0 0 30px var(--primary-500)}.shadow-cyan-500\/20,.shadow-cyan-500\/30{box-shadow:0 10px 30px rgba(var(--primary-rgb),.3)}.shadow-purple-500\/20,.shadow-purple-500\/30{box-shadow:0 10px 30px rgba(var(--secondary-rgb),.3)}.bg-cyan-500\/10{background-color:rgba(var(--primary-rgb),.1)}.bg-purple-500\/10{background-color:rgba(var(--secondary-rgb),.1)}.bg-green-500\/10{background-color:rgba(var(--accent-rgb),.1)}:root[data-color-theme=amber],:root{--primary-rgb: 245, 158, 11;--secondary-rgb: 14, 165, 233;--accent-rgb: 251, 146, 60}:root[data-color-theme=emerald]{--primary-rgb: 16, 185, 129;--secondary-rgb: 20, 184, 166;--accent-rgb: 132, 204, 22}:root[data-color-theme=crimson]{--primary-rgb: 220, 38, 38;--secondary-rgb: 236, 72, 153;--accent-rgb: 249, 115, 22}:root[data-color-theme=violet]{--primary-rgb: 124, 58, 237;--secondary-rgb: 217, 70, 239;--accent-rgb: 6, 182, 212}:root[data-color-theme=current]{--primary-rgb: 6, 182, 212;--secondary-rgb: 168, 85, 247;--accent-rgb: 59, 130, 246}#color-theme-switcher{position:fixed;bottom:24px;right:24px;z-index:9999}.theme-switcher-container{position:relative}#theme-switcher-toggle{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--primary-500),var(--secondary-500));border:2px solid rgba(255,255,255,.2);box-shadow:0 8px 24px #0000004d;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:#fff}#theme-switcher-toggle:hover{transform:scale(1.1) rotate(15deg);box-shadow:0 12px 32px #0006}.theme-panel{position:absolute;bottom:70px;right:0;width:320px;background:#fffffff2;border:1px solid rgba(0,0,0,.1);border-radius:16px;box-shadow:0 20px 60px #0000004d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:20px;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:bottom right}.dark .theme-panel{background:#141928f2;border-color:#ffffff1a}.theme-panel.hidden{opacity:0;transform:scale(.9) translateY(10px);pointer-events:none}.theme-panel-header{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.1)}.dark .theme-panel-header{border-bottom-color:#ffffff1a}.theme-panel-header h3{font-size:16px;font-weight:700;color:#000;margin:0 0 4px;font-family:JetBrains Mono,monospace}.dark .theme-panel-header h3{color:#fff}.theme-panel-header p{font-size:12px;color:#666;margin:0}.dark .theme-panel-header p{color:#999}.theme-options{display:flex;flex-direction:column;gap:8px}.theme-option{display:flex;align-items:center;gap:12px;padding:12px;border:2px solid transparent;border-radius:8px;background:#00000008;cursor:pointer;transition:all .2s ease;font-family:JetBrains Mono,monospace;font-size:13px;font-weight:500;color:#000}.dark .theme-option{background:#ffffff0d;color:#fff}.theme-option:hover{background:#00000014;border-color:#0003;transform:translate(4px)}.dark .theme-option:hover{background:#ffffff1a;border-color:#fff3}.theme-option.active-theme{border-color:var(--primary-500);background:rgba(var(--primary-rgb),.1)}.theme-preview{width:40px;height:40px;border-radius:6px;border:2px solid rgba(0,0,0,.1);flex-shrink:0}.dark .theme-preview{border-color:#fff3}.theme-preview-amber{background:linear-gradient(135deg,#f59e0b,#f97316,#dc2626)}.theme-preview-emerald{background:linear-gradient(135deg,#10b981,#14b8a6,#06b6d4)}.theme-preview-crimson{background:linear-gradient(135deg,#dc2626,#ec4899,#f97316)}.theme-preview-violet{background:linear-gradient(135deg,#7c3aed,#d946ef,#06b6d4)}.theme-preview-current{background:linear-gradient(135deg,#06b6d4,#3b82f6,#a855f7)}@media (max-width: 640px){#color-theme-switcher{bottom:80px;right:16px}.theme-panel{width:280px}#theme-switcher-toggle{width:48px;height:48px}}