@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800&display=swap);:root{--primary:#7c3aed;--primary-light:#a78bfa;--primary-dark:#5b21b6;--secondary:#0ea5e9;--accent:#f43f5e;--success:#10b981;--warning:#f59e0b;--error:#ef4444;--bg-main:#f8fafc;--bg-white:#fff;--bg-soft:#f1f5f9;--bg-card:#ffffffe6;--bg-glass:#ffffffb3;--text-primary:#1e293b;--text-secondary:#64748b;--text-muted:#94a3b8;--gradient-hero:linear-gradient(135deg,#667eea,#764ba2 50%,#f093fb);--gradient-wave:linear-gradient(135deg,#7c3aed,#a855f7 50%,#ec4899);--gradient-primary:linear-gradient(135deg,#7c3aed,#a855f7);--gradient-secondary:linear-gradient(135deg,#0ea5e9,#06b6d4);--gradient-success:linear-gradient(135deg,#10b981,#34d399);--gradient-warm:linear-gradient(135deg,#f97316,#fb923c);--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--shadow-xl:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;--shadow-glow:0 0 40px #7c3aed4d;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--radius-full:9999px;--font-primary:"Poppins",-apple-system,BlinkMacSystemFont,sans-serif;--font-display:"Outfit",sans-serif;--transition-fast:0.15s ease;--transition-normal:0.3s cubic-bezier(0.4,0,0.2,1);--transition-bounce:0.5s cubic-bezier(0.68,-0.55,0.265,1.55)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;background:#f8fafc;background:var(--bg-main);font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}body,h1,h2,h3,h4,h5,h6{color:#1e293b;color:var(--text-primary)}h1,h2,h3,h4,h5,h6{font-family:Outfit,sans-serif;font-family:var(--font-display);font-weight:700;line-height:1.2}h1{font-size:clamp(2.2rem,5vw,3.5rem)}h2{font-size:clamp(1.5rem,4vw,2.2rem)}h3{font-size:clamp(1.2rem,3vw,1.5rem)}a{color:inherit;text-decoration:none}.container{margin:0 auto;max-width:1400px;min-height:100vh;padding:0;width:100%}.wave-hero{background:linear-gradient(135deg,#667eea,#764ba2 50%,#f093fb);background:var(--gradient-hero);min-height:450px;overflow:hidden;padding:40px 24px 120px;position:relative}.wave-hero:before{animation:rotateGlow 20s linear infinite;background:radial-gradient(circle,#ffffff1a 0,#0000 50%);content:"";height:200%;left:-50%;position:absolute;top:-50%;width:200%}@keyframes rotateGlow{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.wave-hero:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%23f8fafc' d='m0 64 48-5.3C96 53 192 43 288 48s192 27 288 32 192-5 288-16 192-21 288-21.3c96 .3 192 10.3 240 16l48 5.3v36H0Z'/%3E%3C/svg%3E") no-repeat bottom;background-size:cover;bottom:0;content:"";height:100px;left:0;position:absolute;width:100%}.header{align-items:center;animation:slideDown .6s ease-out;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffffff2;border-radius:32px;border-radius:var(--radius-xl);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);display:flex;justify-content:space-between;margin:20px;padding:16px 24px;position:relative;z-index:100}.header.sticky{position:-webkit-sticky;position:sticky;top:20px}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.logo{-webkit-text-fill-color:#0000;align-items:center;background:linear-gradient(135deg,#7c3aed,#a855f7);background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;display:flex;font-family:Outfit,sans-serif;font-family:var(--font-display);font-size:1.6rem;font-weight:800;gap:12px}.logo-icon{animation:bounce 2s ease-in-out infinite;font-size:2.2rem}@keyframes bounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}.nav{display:flex;flex-wrap:wrap;gap:6px}.nav-link{border-radius:9999px;border-radius:var(--radius-full);color:#64748b;color:var(--text-secondary);font-size:.9rem;font-weight:600;padding:10px 18px;position:relative;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal)}.nav-link:hover{background:#7c3aed1a;color:#7c3aed;color:var(--primary)}.nav-link.active{background:linear-gradient(135deg,#7c3aed,#a855f7);background:var(--gradient-primary);box-shadow:0 4px 15px #7c3aed66;color:#fff}@media (max-width:768px){.header{flex-direction:column;gap:16px;margin:10px}.nav{justify-content:center}.nav-link{font-size:.85rem;padding:8px 14px}}.card{background:#fff;background:var(--bg-white);border-radius:24px;border-radius:var(--radius-lg);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md);overflow:hidden;padding:28px;position:relative;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal)}.card:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;box-shadow:var(--shadow-xl);transform:translateY(-8px)}.card-wave{overflow:hidden;position:relative}.card-wave:before{background:linear-gradient(135deg,#7c3aed,#a855f7);background:var(--gradient-primary);border-radius:24px 24px 50% 50%;border-radius:var(--radius-lg) var(--radius-lg) 50% 50%;content:"";height:120px;left:0;position:absolute;right:0;top:0}.card-wave-content{padding-top:80px;position:relative;text-align:center;z-index:1}.card-hover{cursor:pointer}.feature-card{background:#fff;background:var(--bg-white);border-radius:32px;border-radius:var(--radius-xl);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);overflow:hidden;padding:36px;position:relative;text-align:center;transition:all .4s cubic-bezier(.4,0,.2,1)}.feature-card:before{animation:rotate 4s linear infinite;background:conic-gradient(from 0deg,#0000,#7c3aed1a,#0000);content:"";height:200%;left:-50%;opacity:0;position:absolute;top:-50%;transition:opacity .3s;width:200%}@keyframes rotate{to{transform:rotate(1turn)}}.feature-card:hover:before{opacity:1}.feature-card:hover{box-shadow:0 0 40px #7c3aed4d;box-shadow:var(--shadow-glow);transform:translateY(-12px) scale(1.02)}.live-icon{align-items:center;animation:morphBlob 8s ease-in-out infinite,float 3s ease-in-out infinite;background:linear-gradient(135deg,#7c3aed,#a855f7);background:var(--gradient-primary);border-radius:30% 70% 70% 30%/30% 30% 70% 70%;box-shadow:0 10px 30px #7c3aed4d;color:#fff;display:flex;font-size:3rem;height:100px;justify-content:center;margin:0 auto 24px;width:100px}@keyframes morphBlob{0%,to{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}25%{border-radius:58% 42% 75% 25%/76% 46% 54% 24%}50%{border-radius:50% 50% 33% 67%/55% 27% 73% 45%}75%{border-radius:33% 67% 58% 42%/63% 68% 32% 37%}}.live-icon.secondary{background:linear-gradient(135deg,#0ea5e9,#06b6d4);background:var(--gradient-secondary)}.live-icon.success{background:linear-gradient(135deg,#10b981,#34d399);background:var(--gradient-success)}.live-icon.warm{background:linear-gradient(135deg,#f97316,#fb923c);background:var(--gradient-warm)}.btn{align-items:center;border:none;border-radius:9999px;border-radius:var(--radius-full);cursor:pointer;display:inline-flex;font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-primary);font-size:1rem;font-weight:600;gap:10px;justify-content:center;overflow:hidden;padding:16px 32px;position:relative;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal)}.btn:after{background:#ffffff4d;border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;width:0}.btn:active:after{height:400px;width:400px}.btn-primary{background:linear-gradient(135deg,#7c3aed,#a855f7);background:var(--gradient-primary);box-shadow:0 6px 20px #7c3aed66;color:#fff}.btn-primary:hover{box-shadow:0 12px 30px #7c3aed80;transform:translateY(-3px) scale(1.03)}.btn-secondary{background:linear-gradient(135deg,#0ea5e9,#06b6d4);background:var(--gradient-secondary);box-shadow:0 6px 20px #0ea5e966;color:#fff}.btn-secondary:hover{box-shadow:0 12px 30px #0ea5e980;transform:translateY(-3px) scale(1.03)}.btn-success{background:linear-gradient(135deg,#10b981,#34d399);background:var(--gradient-success);box-shadow:0 6px 20px #10b98166;color:#fff}.btn-outline{background:#fff;background:var(--bg-white);border:2px solid #e2e8f0;box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);color:#1e293b;color:var(--text-primary)}.btn-outline:hover{border-color:#7c3aed;border-color:var(--primary);color:#7c3aed;color:var(--primary);transform:translateY(-2px)}.btn-lg{font-size:1.1rem;padding:20px 40px}.btn:disabled{cursor:not-allowed;opacity:.5;transform:none!important}.form-group{margin-bottom:20px}.form-label{color:#64748b;color:var(--text-secondary);display:block;font-size:.9rem;font-weight:600;margin-bottom:8px}.form-input{background:#f1f5f9;background:var(--bg-soft);border:2px solid #0000;border-radius:16px;border-radius:var(--radius-md);color:#1e293b;color:var(--text-primary);font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-primary);font-size:1rem;padding:16px 20px;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal);width:100%}.form-input:focus{background:#fff;background:var(--bg-white);border-color:#7c3aed;border-color:var(--primary);box-shadow:0 0 0 4px #7c3aed1a;outline:none}.status-badge{align-items:center;border-radius:9999px;border-radius:var(--radius-full);display:inline-flex;font-size:.9rem;font-weight:600;gap:8px;padding:10px 20px}.status-badge.success{background:linear-gradient(135deg,#10b98126,#34d39926);color:#059669}.status-badge.warning{background:linear-gradient(135deg,#f59e0b26,#fb923c26);color:#d97706}.status-badge.error{background:linear-gradient(135deg,#ef444426,#f8717126);color:#dc2626}.webcam-container{background:#f1f5f9;background:var(--bg-soft);border-radius:32px;border-radius:var(--radius-xl);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);overflow:hidden;position:relative;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal)}.webcam-container.face-detected{box-shadow:0 0 40px #10b98166}.webcam-container video{border-radius:24px;border-radius:var(--radius-lg);display:block;height:auto;width:100%}.webcam-overlay{height:100%;left:0;top:0;width:100%}.face-guide,.webcam-overlay{pointer-events:none;position:absolute}.face-guide{animation:pulseBorder 2s ease-in-out infinite;border:4px dashed #7c3aed66;border-radius:50%;height:260px;left:50%;top:50%;transform:translate(-50%,-50%);width:200px}@keyframes pulseBorder{0%,to{border-color:#7c3aed4d;transform:translate(-50%,-50%) scale(1)}50%{border-color:#7c3aed99;transform:translate(-50%,-50%) scale(1.02)}}.progress-container{background:#f1f5f9;background:var(--bg-soft);height:12px;margin:16px 0;overflow:hidden;width:100%}.progress-bar,.progress-container{border-radius:9999px;border-radius:var(--radius-full)}.progress-bar{background:linear-gradient(135deg,#7c3aed,#a855f7);background:var(--gradient-primary);height:100%;position:relative;transition:width .5s cubic-bezier(.4,0,.2,1)}.progress-bar:after{animation:shimmer 2s infinite;background:linear-gradient(90deg,#0000,#fff6,#0000);bottom:0;content:"";left:0;position:absolute;right:0;top:0}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.images-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));margin:16px 0}.image-thumb{animation:scaleIn .3s ease-out;aspect-ratio:1;border-radius:16px;border-radius:var(--radius-md);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md);overflow:hidden;position:relative;transition:.5s cubic-bezier(.68,-.55,.265,1.55);transition:var(--transition-bounce)}@keyframes scaleIn{0%{opacity:0;transform:scale(.8) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)}}.image-thumb:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;box-shadow:var(--shadow-xl);transform:scale(1.15) rotate(3deg);z-index:10}.image-thumb img{height:100%;object-fit:cover;width:100%}.image-thumb .index{background:linear-gradient(135deg,#7c3aed,#a855f7);background:var(--gradient-primary);border-radius:8px;border-radius:var(--radius-sm);bottom:4px;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;position:absolute;right:4px}.spinner{animation:spin .8s linear infinite;border:4px solid #f1f5f9;border-top-color:#7c3aed;border:4px solid var(--bg-soft);border-radius:50%;border-top-color:var(--primary);height:50px;width:50px}@keyframes spin{to{transform:rotate(1turn)}}.page-title{color:#fff;margin-bottom:16px;text-align:center;text-shadow:0 2px 10px #0003}.page-title.dark{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#7c3aed,#a855f7);background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:#1e293b;color:var(--text-primary);text-shadow:none}.page-subtitle{color:#ffffffe6;font-size:1.1rem;margin:0 auto 30px;max-width:600px;text-align:center}.page-subtitle.dark{color:#64748b;color:var(--text-secondary)}.stats-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));padding:0 24px}.main-content{margin-top:-60px;padding:0 24px 60px;position:relative;z-index:10}.grid-2{grid-gap:24px;display:grid;gap:24px;grid-template-columns:1fr}@media (min-width:768px){.grid-2{grid-template-columns:1fr 1fr}}.grid-3{grid-gap:24px;display:grid;gap:24px;grid-template-columns:1fr}@media (min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}.recognition-result{animation:scaleIn .4s cubic-bezier(.68,-.55,.265,1.55);background:linear-gradient(135deg,#10b981,#34d399);background:var(--gradient-success);border-radius:32px;border-radius:var(--radius-xl);color:#fff;padding:36px;text-align:center}.recognition-result .confidence{font-size:4rem;font-weight:800}.countdown-overlay,.recognition-result .confidence{font-family:Outfit,sans-serif;font-family:var(--font-display)}.countdown-overlay{animation:countPulse .4s ease-out;color:#7c3aed;color:var(--primary);font-size:8rem;font-weight:900;left:50%;position:absolute;text-shadow:0 0 60px #7c3aed80;top:50%;transform:translate(-50%,-50%)}@keyframes countPulse{0%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.text-center{text-align:center}.text-gradient{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#7c3aed,#a855f7);background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text}.mb-sm{margin-bottom:12px}.mb-md{margin-bottom:24px}.mb-lg{margin-bottom:40px}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:8px}.gap-md{gap:16px}.gap-lg{gap:24px}.w-full{width:100%}.fade-in{animation:fadeInUp .6s ease-out forwards;opacity:0}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}@media (max-width:640px){.wave-hero{min-height:350px;padding:20px 16px 100px}.main-content{margin-top:-40px;padding:0 16px 40px}.stats-grid{padding:0 16px}.feature-card{padding:24px}.live-icon{font-size:2.5rem;height:80px;width:80px}}.tutorial-page{background:#f8fafc;background:var(--bg-main);min-height:100vh}.tutorial-hero{background:linear-gradient(135deg,#1e1b4b,#312e81 50%,#4c1d95);overflow:hidden;padding:80px 24px 100px;position:relative;text-align:center}.tutorial-hero:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z' fill='%23fff' fill-opacity='.03' fill-rule='evenodd'/%3E%3C/svg%3E");right:0;top:0}.tutorial-hero:after,.tutorial-hero:before{bottom:0;content:"";left:0;position:absolute}.tutorial-hero:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%23f8fafc' d='m0 64 60-5.3C120 53 240 43 360 48s240 27 360 32 240-5 360-16 240-21 300-25.3l60-6.7v68H0Z'/%3E%3C/svg%3E") no-repeat bottom;background-size:cover;height:80px;width:100%}.hero-content{margin:0 auto;max-width:700px;position:relative;z-index:1}.hero-badge{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border-radius:9999px;border-radius:var(--radius-full);color:#c4b5fd;display:inline-block;font-size:.9rem;font-weight:600;margin-bottom:20px;padding:8px 20px}.tutorial-hero h1{color:#fff;font-size:clamp(2.5rem,6vw,4rem);margin-bottom:16px;text-shadow:0 4px 20px #0000004d}.tutorial-hero p{color:#ffffffd9;font-size:1.2rem;margin:0 auto 24px;max-width:500px}.hero-meta{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}.hero-meta span{color:#a5b4fc;font-weight:500}.tutorial-nav{background:#fff;background:var(--bg-white);box-shadow:0 1px 2px #0000000d;box-shadow:var(--shadow-sm);display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:20px;position:-webkit-sticky;position:sticky;top:0;z-index:100}.nav-pill{background:#f1f5f9;background:var(--bg-soft);border:none;border-radius:9999px;border-radius:var(--radius-full);color:#64748b;color:var(--text-secondary);cursor:pointer;font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-primary);font-size:.85rem;font-weight:600;padding:10px 18px;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal)}.nav-pill:hover{background:#7c3aed1a;color:#7c3aed;color:var(--primary)}.nav-pill.active{background:linear-gradient(135deg,#7c3aed,#a855f7);background:var(--gradient-primary);color:#fff}.tutorial-content{margin:0 auto;max-width:900px;padding:40px 24px}.tutorial-section{animation:fadeInUp .5s ease-out;background:#fff;background:var(--bg-white);border-radius:32px;border-radius:var(--radius-xl);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);margin-bottom:32px;padding:40px}.section-header{align-items:center;display:flex;gap:16px;margin-bottom:28px}.section-number{align-items:center;border-radius:50%;color:#fff;display:flex;font-family:Outfit,sans-serif;font-family:var(--font-display);font-size:1.2rem;font-weight:800;height:50px;justify-content:center;width:50px}.section-header h2,.section-number{background:linear-gradient(135deg,#7c3aed,#a855f7);background:var(--gradient-primary)}.section-header h2{-webkit-text-fill-color:#0000;-webkit-background-clip:text;background-clip:text;font-size:1.6rem}.info-card{background:#f1f5f9;background:var(--bg-soft);border-radius:16px;border-radius:var(--radius-md);margin-bottom:24px;padding:24px}.info-card.highlight{background:linear-gradient(135deg,#7c3aed1a,#a855f71a);border-left:4px solid #7c3aed;border-left:4px solid var(--primary)}.info-card h3{font-size:1.1rem;margin-bottom:8px}.info-card p{color:#64748b;color:var(--text-secondary);line-height:1.7}.key-points{flex-direction:column;margin-bottom:24px}.key-points,.point{display:flex;gap:12px}.point{align-items:center;background:#f1f5f9;background:var(--bg-soft);border-radius:16px;border-radius:var(--radius-md);padding:12px 16px}.point .icon{font-size:1.3rem}.code-example{background:#1e293b;border-radius:16px;border-radius:var(--radius-md);margin-top:24px;overflow:hidden}.code-header{background:#334155;color:#94a3b8;font-size:.9rem;font-weight:600;padding:12px 20px}.code-example pre{margin:0;overflow-x:auto;padding:20px}.code-example code{color:#e2e8f0;font-family:Fira Code,Monaco,monospace;font-size:.9rem;line-height:1.6;white-space:pre}.interactive-demo{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:2px dashed #e2e8f0;border-radius:24px;border-radius:var(--radius-lg);margin:24px 0;padding:28px}.demo-label{color:#64748b;color:var(--text-secondary);display:block;font-weight:600;margin-bottom:12px}.demo-input{border:2px solid #e2e8f0;border-radius:16px;border-radius:var(--radius-md);font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-primary);font-size:1rem;padding:16px 20px;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal);width:100%}.demo-input:focus{border-color:#7c3aed;border-color:var(--primary);box-shadow:0 0 0 4px #7c3aed1a;outline:none}.method-selector,.word-selector{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.method-btn,.word-btn{background:#fff;border:2px solid #e2e8f0;border-radius:9999px;border-radius:var(--radius-full);cursor:pointer;font-weight:600;padding:10px 18px;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal)}.method-btn:hover,.word-btn:hover{border-color:#7c3aed;border-color:var(--primary)}.method-btn.active,.word-btn.active{background:linear-gradient(135deg,#7c3aed,#a855f7);background:var(--gradient-primary);border-color:#0000;color:#fff}.tokens-display{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.token-chip{align-items:center;animation:scaleIn .3s ease-out;background:#fff;border:2px solid #7c3aed;border:2px solid var(--primary);border-radius:16px;border-radius:var(--radius-md);display:flex;flex-direction:column;padding:8px 14px}.token-text{color:#7c3aed;color:var(--primary)}.token-id{color:#94a3b8;color:var(--text-muted);font-size:.7rem}.embedding-visual{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:24px 0}.embedding-word{background:#fff;border-radius:16px;border-radius:var(--radius-md);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md);color:#7c3aed;color:var(--primary);font-size:1.5rem;font-weight:700;padding:12px 24px}.arrow{color:#94a3b8;color:var(--text-muted);font-size:2rem}.embedding-vector{align-items:center;display:flex;font-family:Fira Code,monospace;gap:4px}.vector-value{border-radius:8px;border-radius:var(--radius-sm);font-weight:600;padding:8px 12px}.embedding-matrix{margin-top:24px;overflow-x:auto}.embedding-matrix table{background:#fff;border-collapse:collapse;border-radius:16px;border-radius:var(--radius-md);overflow:hidden;width:100%}.embedding-matrix td,.embedding-matrix th{border-bottom:1px solid #e2e8f0;padding:12px 16px;text-align:center}.embedding-matrix th{background:#334155;color:#fff;font-weight:600}.embedding-matrix tr.selected{background:#7c3aed1a}.word-cell{color:#7c3aed;color:var(--primary);font-weight:700}.qkv-explanation{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:24px 0}.qkv-card{background:#fff;border-radius:16px;border-radius:var(--radius-md);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md);padding:20px;text-align:center}.qkv-card.query{border-top:4px solid #7c3aed}.qkv-card.key{border-top:4px solid #0ea5e9}.qkv-card.value{border-top:4px solid #10b981}.qkv-card strong{display:block;margin-bottom:8px}.qkv-card span{color:#64748b;color:var(--text-secondary);font-size:.9rem}.formula-box{background:#1e293b;border-radius:16px;border-radius:var(--radius-md);margin:24px 0;padding:24px;text-align:center}.formula{color:#a5b4fc;font-family:Times New Roman,serif;font-size:1.4rem}.attention-visual{margin:24px 0}.attention-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.attention-cell{border-radius:16px;border-radius:var(--radius-md);color:#fff;min-width:100px;padding:16px 24px;text-align:center}.cell-label{font-size:.85rem;margin-bottom:4px}.cell-weight{font-size:1.5rem;font-weight:800}.heads-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin:20px 0}.head-card{border:3px solid #e2e8f0;border-radius:16px;border-radius:var(--radius-md);cursor:pointer;opacity:.5;padding:16px;text-align:center;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal)}.head-card.active{background:#ffffffe6;opacity:1}.head-icon{align-items:center;border-radius:50%;color:#fff;display:flex;font-weight:700;height:40px;justify-content:center;margin:0 auto 8px;width:40px}.head-label{color:#64748b;color:var(--text-secondary);font-size:.8rem}.heads-visual{align-items:center;background:#fff;border-radius:16px;border-radius:var(--radius-md);display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:24px 0;padding:24px}.concat-box,.input-box,.output-box{background:#f1f5f9;background:var(--bg-soft);border-radius:8px;border-radius:var(--radius-sm);font-weight:600;padding:12px 20px}.arrows-container{display:flex;flex-direction:column;gap:6px}.head-arrow{border-radius:8px;border-radius:var(--radius-sm);color:#fff;font-size:.8rem;font-weight:600;padding:6px 12px}.pos-table{background:#fff;border-collapse:collapse;border-radius:16px;border-radius:var(--radius-md);overflow:hidden;width:100%}.pos-table td,.pos-table th{border-bottom:1px solid #e2e8f0;padding:12px;text-align:center}.pos-table th{background:#334155;color:#fff}.pos-cell{color:#7c3aed;color:var(--primary);font-weight:700}.two-col{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.mini-formula{background:#1e293b;border-radius:8px;border-radius:var(--radius-sm);color:#a5b4fc;font-family:Fira Code,monospace;font-size:.85rem;margin-top:12px;padding:12px}.architecture-flow{align-items:center;background:#f1f5f9;background:var(--bg-soft);border-radius:16px;border-radius:var(--radius-md);display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:24px 0;padding:24px}.flow-box{background:#fff;border-radius:8px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;padding:12px 16px}.flow-box.attn{background:#7c3aed33;color:#7c3aed;color:var(--primary)}.flow-box.ffn{background:#0ea5e933;color:#0284c7}.flow-box.add{background:#10b98133;color:#059669}.flow-arrow{color:#94a3b8;color:var(--text-muted);font-weight:700}.architecture-diagram{display:flex;flex-wrap:wrap;gap:40px;justify-content:center;margin:32px 0}.arch-col{border-radius:24px;border-radius:var(--radius-lg);min-width:200px;padding:24px}.arch-col.encoder{background:linear-gradient(135deg,#7c3aed1a,#a855f71a);border:2px solid #7c3aed4d}.arch-col.decoder{background:linear-gradient(135deg,#0ea5e91a,#06b6d41a);border:2px solid #0ea5e94d}.arch-title{color:#7c3aed;color:var(--primary);font-size:1.1rem;font-weight:800;margin-bottom:16px;text-align:center}.arch-stack{display:flex;flex-direction:column;gap:8px}.arch-layer{background:#fff;border-radius:8px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;padding:10px 16px}.arch-repeat{font-weight:600;margin-top:12px;text-align:center}.arch-arrow,.arch-repeat{color:#94a3b8;color:var(--text-muted)}.arch-arrow{align-self:center;font-size:2rem}.step-tracker{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:24px 0}.step{background:#f1f5f9;background:var(--bg-soft);border-radius:8px;border-radius:var(--radius-sm);min-width:80px;padding:12px 16px;text-align:center;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal)}.step.active{background:linear-gradient(135deg,#7c3aed,#a855f7);background:var(--gradient-primary);color:#fff;transform:scale(1.1)}.step.done{background:#10b98133}.step-num{font-size:1.2rem;font-weight:800}.step-name{font-size:.75rem;font-weight:600}.step-desc{font-size:.7rem;margin-top:4px;opacity:.9}.quiz-section{background:linear-gradient(135deg,#fef3c7,#fde68a)}.quiz-question{background:#fff;border-radius:16px;border-radius:var(--radius-md);margin-bottom:20px;padding:20px}.question-text{font-weight:600;margin-bottom:16px}.options{display:flex;flex-direction:column;gap:10px}.option-btn{background:#fff;border:2px solid #e2e8f0;border-radius:16px;border-radius:var(--radius-md);cursor:pointer;font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-primary);padding:14px 20px;text-align:left;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal)}.option-btn.selected,.option-btn:hover{border-color:#7c3aed;border-color:var(--primary)}.option-btn.selected{background:#7c3aed1a}.option-btn.correct{background:#10b98133;border-color:#10b981}.option-btn.wrong{background:#ef444433;border-color:#ef4444}.score{color:#7c3aed;color:var(--primary);font-size:1.5rem;font-weight:800;margin-top:20px;text-align:center}.tutorial-footer{background:#f1f5f9;background:var(--bg-soft);padding:40px 24px;text-align:center}.tutorial-footer p{color:#64748b;color:var(--text-secondary);margin-bottom:16px}@media (max-width:640px){.tutorial-hero{padding:60px 16px 80px}.tutorial-section{padding:24px}.section-header{flex-direction:column;text-align:center}.code-example pre{font-size:.8rem;padding:16px}.interactive-demo{padding:20px}}.deep-dive-page{background:#0a0a0f;color:#e2e8f0;min-height:100vh}.deep-hero{background:linear-gradient(135deg,#0f0a1f,#1a1035 50%,#0d1f3c);overflow:hidden;padding:100px 24px 80px;position:relative;text-align:center}.hero-particles{animation:pulse 8s ease-in-out infinite;background-image:radial-gradient(circle at 20% 30%,#7c3aed4d 0,#0000 40%),radial-gradient(circle at 80% 70%,#0ea5e933 0,#0000 40%),radial-gradient(circle at 50% 50%,#ec48991a 0,#0000 60%);bottom:0;left:0;position:absolute;right:0;top:0}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.deep-hero .hero-content{position:relative;z-index:1}.hero-tag{background:linear-gradient(135deg,#7c3aed4d,#ec48994d);border:1px solid #7c3aed66;border-radius:9999px;border-radius:var(--radius-full);color:#c4b5fd;display:inline-block;font-size:.9rem;font-weight:600;margin-bottom:24px;padding:8px 24px}.deep-hero h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#fff,#c4b5fd 50%,#a5b4fc);-webkit-background-clip:text;background-clip:text;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;margin-bottom:20px}.deep-hero p{color:#ffffffb3;font-size:1.2rem;margin:0 auto;max-width:600px}.deep-hero strong{color:#a78bfa}.deep-nav{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0f0a1fe6;border-bottom:1px solid #7c3aed33;flex-wrap:wrap;justify-content:center;padding:20px;position:-webkit-sticky;position:sticky;top:0;z-index:100}.deep-nav,.deep-tab{display:flex;gap:8px}.deep-tab{align-items:center;background:#7c3aed1a;border:1px solid #7c3aed33;border-radius:9999px;border-radius:var(--radius-full);color:#a5b4fc;cursor:pointer;font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-primary);font-weight:600;padding:12px 20px;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal)}.deep-tab:hover{background:#7c3aed33;border-color:#7c3aed66}.deep-tab.active{background:linear-gradient(135deg,#7c3aed,#a855f7);border-color:#0000;box-shadow:0 4px 20px #7c3aed66;color:#fff}.tab-icon{font-size:1.2rem}.deep-content{margin:0 auto;max-width:1000px;padding:40px 24px}.deep-section{animation:fadeInUp .5s ease-out}.deep-section h2{color:#fff;font-size:1.8rem;margin-bottom:24px}.intro-card{background:linear-gradient(135deg,#7c3aed1a,#0ea5e91a);border:1px solid #7c3aed4d;border-radius:24px;border-radius:var(--radius-lg);margin-bottom:32px;padding:24px}.intro-card p{color:#fffc;font-size:1.1rem;line-height:1.7}.intro-card strong{color:#a78bfa}.vector-space-container{background:#0f0a1f;border:1px solid #7c3aed4d;border-radius:32px;border-radius:var(--radius-xl);padding:20px}.vector-canvas{border-radius:24px;border-radius:var(--radius-lg);cursor:grab;height:auto;max-width:600px;width:100%}.vector-canvas:active{cursor:grabbing}.vector-legend{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:16px}.vector-legend span{align-items:center;color:#94a3b8;display:flex;font-size:.9rem;gap:8px}.legend-dot{border-radius:50%;height:12px;width:12px}.vector-hint{color:#64748b;font-size:.85rem;margin-top:12px;text-align:center}.viz-row{grid-gap:24px;display:grid;gap:24px;grid-template-columns:1fr 300px;margin-bottom:32px}@media (max-width:768px){.viz-row{grid-template-columns:1fr}}.viz-info{background:#1e293b80;border:1px solid #7c3aed33;border-radius:24px;border-radius:var(--radius-lg);padding:24px}.viz-info h4{color:#94a3b8;font-size:.9rem;margin-bottom:8px}.viz-info .highlight{color:#a78bfa;font-size:1.2rem}.neighbors-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}.neighbor{background:#7c3aed1a;border-radius:8px;border-radius:var(--radius-sm);cursor:pointer;display:flex;justify-content:space-between;padding:10px 14px;transition:.15s ease;transition:var(--transition-fast)}.neighbor:hover{background:#7c3aed33}.neighbor .dist{color:#64748b;font-family:monospace}.memory-visualizer{background:#0c0c12;border:1px solid #7c3aed4d;border-radius:24px;border-radius:var(--radius-lg);margin-bottom:24px;overflow:hidden}.memory-header{align-items:center;background:#7c3aed26;border-bottom:1px solid #7c3aed33;display:flex;font-weight:600;gap:12px;padding:16px 20px}.memory-icon{font-size:1.3rem}.memory-size{color:#64748b;font-size:.85rem;margin-left:auto}.memory-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));padding:20px}.memory-cell{background:#1e293b80;border:1px solid #0000;border-radius:16px;border-radius:var(--radius-md);padding:14px;text-align:center;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal)}.memory-cell.hovered,.memory-cell:hover{border-color:#a78bfa;transform:translateY(-2px)}.cell-address{color:#64748b;font-family:monospace;font-size:.75rem;margin-bottom:8px}.cell-bytes{display:flex;gap:3px;justify-content:center;margin-bottom:8px}.byte{border-radius:4px;color:#fff;font-size:.75rem;padding:4px 6px}.byte,.cell-value{font-family:monospace}.cell-value{color:#a78bfa;font-size:1rem;font-weight:600}.cell-index{color:#64748b;font-size:.7rem;margin-top:4px}.memory-tooltip{background:#1e293bf2;border-left:3px solid #a78bfa;border-radius:16px;border-radius:var(--radius-md);color:#94a3b8;font-family:monospace;font-size:.85rem;margin:0 20px 20px;padding:16px}.memory-math{background:#1e293b80;border-radius:24px;border-radius:var(--radius-lg);margin-bottom:24px;padding:24px}.memory-math h4{color:#fff;margin-bottom:16px}.memory-math table{width:100%}.memory-math td{border-bottom:1px solid #7c3aed33;padding:10px 0}.memory-math td:last-child{color:#a5b4fc;text-align:right}.memory-math tr.total td{border-bottom:none;border-top:2px solid #a78bfa;color:#fff}.pros-cons{background:#1e293b4d;border:1px solid #7c3aed33;border-radius:24px;border-radius:var(--radius-lg);margin-top:32px;padding:24px}.pros-cons h4{color:#fff;font-size:1.1rem;margin-bottom:16px}.pros-cons-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr}@media (max-width:640px){.pros-cons-grid{grid-template-columns:1fr}}.cons-header,.pros-header{border-radius:8px;border-radius:var(--radius-sm);font-weight:700;margin-bottom:12px;padding:10px 14px}.pros-header{background:#10b98133;color:#34d399}.cons-header{background:#f59e0b33;color:#fbbf24}.con-item,.pro-item{border-radius:8px;border-radius:var(--radius-sm);font-size:.9rem;margin-bottom:8px;padding:10px 14px}.pro-item{background:#10b9811a;border-left:3px solid #10b981;color:#ffffffd9}.con-item{background:#f59e0b1a;border-left:3px solid #f59e0b;color:#ffffffd9}.token-search{background:#1e293b4d;border:1px solid #7c3aed33;border-radius:32px;border-radius:var(--radius-xl);padding:32px}.token-search h4{color:#fff;font-size:1.3rem;margin-bottom:24px}.search-input-row{display:flex;gap:12px;margin-bottom:32px}.search-input{background:#0f0a1fcc;border:2px solid #7c3aed4d;border-radius:16px;border-radius:var(--radius-md);color:#fff;flex:1 1;font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-primary);font-size:1rem;padding:14px 20px}.search-input:focus{border-color:#a78bfa;outline:none}.search-btn{background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;border-radius:16px;border-radius:var(--radius-md);color:#fff;cursor:pointer;font-weight:600;padding:14px 28px;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal)}.search-btn:hover:not(:disabled){box-shadow:0 6px 20px #7c3aed66;transform:translateY(-2px)}.search-btn:disabled{cursor:not-allowed;opacity:.6}.search-steps{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.search-step{background:#0f0a1f80;border:1px solid #7c3aed1a;border-radius:16px;border-radius:var(--radius-md);display:flex;gap:16px;opacity:.4;padding:20px;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal)}.search-step.active{background:#7c3aed1a;border-color:#a78bfa;opacity:1}.search-step.done{border-color:#10b981;opacity:1}.step-num{align-items:center;background:#7c3aed33;border-radius:50%;color:#a78bfa;display:flex;flex-shrink:0;font-weight:700;height:36px;justify-content:center;width:36px}.search-step.active .step-num{background:#7c3aed;color:#fff}.search-step.done .step-num{background:#10b981;color:#fff}.step-content{flex:1 1}.step-content strong{color:#fff;display:block;margin-bottom:6px}.step-content code{background:#0000004d;border-radius:4px;color:#a5b4fc;font-family:Fira Code,monospace;padding:4px 10px}.success-badge{background:#10b98133;border-radius:9999px;border-radius:var(--radius-full);color:#34d399;display:inline-block;font-weight:600;padding:6px 14px}.attention-heatmap{background:#1e293b4d;border-radius:24px;border-radius:var(--radius-lg);margin-bottom:32px;padding:24px}.heatmap-query{color:#94a3b8;font-size:1.1rem;margin-bottom:20px}.heatmap-query strong{color:#a78bfa}.heatmap-grid{display:flex;flex-direction:column;gap:10px}.heatmap-row{align-items:center;display:flex;gap:12px}.heatmap-label{color:#94a3b8;font-weight:500;width:60px}.heatmap-bar{align-items:center;border-radius:8px;border-radius:var(--radius-sm);color:#fff;display:flex;font-size:.85rem;font-weight:600;height:32px;min-width:40px;padding:0 12px;transition:width .5s ease}.attention-formula{background:#0f0a1fcc;border-radius:24px;border-radius:var(--radius-lg);margin-top:32px;padding:24px}.attention-formula h4{color:#fff;margin-bottom:16px}.attention-formula .formula-box{background:#0a0a0f;border-radius:16px;border-radius:var(--radius-md);color:#c4b5fd;font-family:Times New Roman,serif;font-size:1.3rem;margin-bottom:20px;padding:20px;text-align:center}.formula-steps{display:flex;flex-direction:column;gap:12px}.formula-steps .step{background:#7c3aed1a;border-radius:8px;border-radius:var(--radius-sm);color:#ffffffd9;padding:12px 16px}.code-runner{background:#0c0c12;border:1px solid #7c3aed4d;border-radius:24px;border-radius:var(--radius-lg);margin-bottom:24px;overflow:hidden}.code-runner-header{align-items:center;background:#7c3aed26;border-bottom:1px solid #7c3aed33;display:flex;justify-content:space-between;padding:14px 20px}.run-btn{background:linear-gradient(135deg,#10b981,#34d399);border:none;border-radius:9999px;border-radius:var(--radius-full);color:#fff;cursor:pointer;font-weight:600;padding:10px 20px;transition:.3s cubic-bezier(.4,0,.2,1);transition:var(--transition-normal)}.run-btn:hover:not(:disabled){box-shadow:0 4px 15px #10b98166;transform:translateY(-2px)}.run-btn:disabled{opacity:.6}.code-input{background:#0a0a0f;margin:0;overflow-x:auto;padding:20px}.code-input code{color:#e2e8f0;font-family:Fira Code,Monaco,monospace;font-size:.9rem;line-height:1.6}.code-output{border-top:1px solid #7c3aed33}.output-header{background:#10b9811a;color:#34d399;font-size:.85rem;font-weight:600;padding:10px 20px}.code-output pre{background:#080810;color:#a5b4fc;font-family:Fira Code,monospace;font-size:.85rem;margin:0;overflow-x:auto;padding:16px 20px;white-space:pre-wrap}.deep-footer{background:#050508;border-top:1px solid #7c3aed33;padding:60px 24px;text-align:center}.deep-footer p{color:#64748b;margin-bottom:20px}@media (max-width:640px){.deep-hero{padding:60px 16px 50px}.deep-tab .tab-name{display:none}.deep-tab .tab-icon{font-size:1.4rem}.search-input-row{flex-direction:column}.vector-canvas{height:300px}}.video-tutorial{background:linear-gradient(135deg,#f8fafc,#f1f5f9 50%,#e2e8f0);color:#1e293b;font-family:Poppins,sans-serif;height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100vw}.tutorial-header{align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffffff2;border-bottom:1px solid #7c3aed1a;display:flex;height:60px;justify-content:space-between;left:0;padding:0 30px;position:fixed;right:0;top:0;z-index:1000}.tutorial-logo{color:#7c3aed;font-size:1.2rem;font-weight:800}.current-section{background:#7c3aed14;border-radius:20px;color:#64748b;font-size:.85rem;font-weight:700;padding:6px 14px}.slides-container{height:calc(100vh - 140px);margin-top:60px;overflow:hidden;position:relative;width:100%}.slide{align-items:center;display:flex;height:100%;justify-content:center;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform:translateX(100%);transition:all .5s cubic-bezier(.4,0,.2,1);width:100%}.slide.visible{opacity:1;pointer-events:auto;transform:translateX(0)}.slide.slide-exit-right{opacity:0;transform:translateX(-100%)}.slide.slide-exit-left{opacity:0}.slide.slide-enter-right,.slide.slide-exit-left{transform:translateX(100%)}.slide.slide-enter-left{transform:translateX(-100%)}.slide.slide-active{opacity:1;transform:translateX(0)}.slide-content{align-items:center;box-sizing:border-box;display:flex;flex-direction:row;gap:60px;height:100%;justify-content:space-between;max-height:100%;max-width:1400px;padding:30px 60px;position:relative;width:100%}.slide-content.intro-slide{flex-direction:column;gap:20px;justify-content:center}.particles-container{height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%}.particle{animation:float 20s ease-in-out infinite;background:#7c3aed26;border-radius:50%;position:absolute}@keyframes float{0%,to{opacity:.3;transform:translateY(0) translateX(0)}25%{opacity:.7;transform:translateY(-50px) translateX(30px)}50%{opacity:.5;transform:translateY(-20px) translateX(-20px)}75%{opacity:.6;transform:translateY(-40px) translateX(10px)}}.intro-slide{background:radial-gradient(circle at 50% 30%,#7c3aed14 0,#0000 50%)}.intro-content,.summary-content{text-align:center;z-index:1}.mega-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#7c3aed,#a855f7 50%,#6366f1);-webkit-background-clip:text;background-clip:text;font-size:clamp(3rem,8vw,7rem);font-weight:900;letter-spacing:-.02em;line-height:1;margin:0}.mega-title.small{font-size:clamp(1.5rem,4vw,3.5rem)}.subtitle{color:#64748b;font-size:clamp(1.2rem,2.5vw,1.8rem);margin-top:20px;max-width:700px}.intro-prompt{margin-top:80px}.arrow-hint{animation:pulse-hint 2s ease-in-out infinite;background:#7c3aed33;border:1px solid #7c3aed66;border-radius:50px;color:#a78bfa;display:inline-block;font-weight:600;padding:16px 32px}@keyframes pulse-hint{0%,to{transform:translateX(0)}50%{transform:translateX(10px)}}.animated-text{display:inline-block;opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.4,0,.2,1)}.animated-text.visible{opacity:1;transform:translateY(0)}.typewriter .cursor{animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.section-title{color:#1e293b;font-size:clamp(1.5rem,3.5vw,2.5rem);font-weight:800;gap:16px;margin-bottom:20px}.section-title,.step-number{align-items:center;display:flex}.step-number{background:linear-gradient(135deg,#7c3aed,#a855f7);border-radius:14px;box-shadow:0 6px 20px #7c3aed4d;color:#fff;font-size:1.1rem;font-weight:900;height:50px;justify-content:center;width:50px}.tokenization-animation{align-items:center;display:flex;flex-direction:column;gap:30px;max-width:900px;width:100%}.original-sentence{display:flex;justify-content:center;min-height:80px}.sentence-text{animation:fadeInScale .8s ease-out;color:#1e293b;font-size:clamp(1.5rem,4vw,2.5rem);font-weight:600}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.tokens-container{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}.token-box{animation:popIn .5s cubic-bezier(.175,.885,.32,1.275) both;background:#fff;border:2px solid #7c3aed4d;border-radius:14px;box-shadow:0 4px 15px #00000014;padding:20px 32px;position:relative;transition:all .5s ease}.token-box.separated{box-shadow:0 10px 30px #7c3aed26;transform:translateY(-5px)}.token-box.colored{background:linear-gradient(135deg,#7c3aed1a,#3b82f61a);border-color:#a78bfa}@keyframes popIn{0%{opacity:0;transform:scale(0) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}.token-text{font-size:clamp(1.5rem,3vw,2.5rem)}.token-id,.token-text{color:#fff;font-weight:700}.token-id{align-items:center;animation:bounceIn .5s ease-out;background:linear-gradient(135deg,#10b981,#34d399);border-radius:50%;display:flex;font-size:.9rem;height:32px;justify-content:center;position:absolute;right:-12px;top:-12px;width:32px}@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.3)}to{transform:scale(1)}}.animation-labels{min-height:60px;text-align:center}.label{color:#fffc;font-size:clamp(1.2rem,2.5vw,1.8rem);margin:0}.label.fade-in{animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.embedding-animation{align-items:center;display:flex;flex-direction:column;gap:40px;width:100%}.vector-space-2d{background:#0a0a1ecc;border:2px solid #7c3aed4d;border-radius:24px;height:min(500px,50vh);overflow:hidden;position:relative;width:min(700px,80vw)}.grid-svg,.similarity-lines{height:100%;left:0;position:absolute;top:0;width:100%}.token-point{animation:pointAppear .8s cubic-bezier(.175,.885,.32,1.275) forwards;border-radius:50%;box-shadow:0 0 30px currentColor;height:24px;position:absolute;transform:translate(-50%,-50%) scale(0);width:24px}@keyframes pointAppear{to{transform:translate(-50%,-50%) scale(1)}}.point-label{color:#fff;font-size:1rem;font-weight:600;left:50%;margin-top:10px;position:absolute;text-shadow:0 2px 10px #000c;top:100%;transform:translateX(-50%);white-space:nowrap}.attention-animation{gap:40px;width:100%}.attention-animation,.attention-visual{align-items:center;display:flex;flex-direction:column}.attention-visual{background:#0a0a1e80;border:2px solid #7c3aed33;border-radius:24px;gap:30px;padding:40px}.attention-targets,.attention-words{display:flex;gap:20px}.attention-word{background:#1e293bcc;border:2px solid #0000;border-radius:12px;color:#fff;font-size:1.4rem;font-weight:600;padding:16px 28px;transition:all .3s ease}.attention-word.ready{border-color:#7c3aed80}.attention-word.querying{background:linear-gradient(135deg,#7c3aed,#a855f7);border-color:#a78bfa;box-shadow:0 10px 40px #7c3aed80;transform:scale(1.1)}.attention-lines{display:flex;gap:20px;height:60px}.attention-line{background:linear-gradient(180deg,#a78bfa,#0000);border-radius:4px;transition:all .5s ease;width:60px}.attention-target{align-items:center;background:#1e293b80;border-radius:12px;color:#fff;display:flex;flex-direction:column;font-size:1.2rem;gap:8px;padding:16px 28px;transition:all .5s ease}.attention-target .weight{color:#a78bfa;font-size:.9rem;font-weight:700}.vector-3d-container{align-items:center;display:flex;flex-direction:column;gap:20px}.vector-3d-canvas{border:2px solid #7c3aed4d;border-radius:24px;max-height:60vh;max-width:90vw}.interactive-hint{color:#fff9;font-size:1.1rem}.slide-info{color:#ffffffb3;font-size:1.2rem;margin-top:20px;text-align:center}.summary-steps{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin:40px 0}.summary-step{align-items:center;background:#1e293b99;border:1px solid #7c3aed4d;border-radius:16px;color:#fff;display:flex;font-size:1.3rem;gap:16px;padding:20px 32px}.summary-step span{align-items:center;background:linear-gradient(135deg,#10b981,#34d399);border-radius:50%;display:flex;font-weight:700;height:40px;justify-content:center;width:40px}.summary-note{color:#fff9;font-size:1.1rem;margin-top:20px}.video-nav{align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffffff2;border-top:1px solid #7c3aed26;bottom:0;display:flex;gap:40px;height:80px;justify-content:center;left:0;position:fixed;right:0;width:100%;z-index:1000}.nav-btn{background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;border-radius:50px;color:#fff;cursor:pointer;font-family:Poppins,sans-serif;font-size:.95rem;font-weight:700;padding:12px 28px;transition:all .3s ease}.nav-btn:hover:not(:disabled){box-shadow:0 8px 25px #7c3aed59;transform:scale(1.05)}.nav-btn:disabled{cursor:not-allowed;opacity:.4}.progress-dots{display:flex;gap:12px}.dot{background:#7c3aed4d;border:2px solid #7c3aed80;cursor:pointer;height:14px;transition:all .3s ease;width:14px}.dot:hover{background:#7c3aed80}.dot.done{background:#10b981;border-color:#10b981}.dot.active{background:#7c3aed;border-color:#a78bfa;transform:scale(1.3)}.keyboard-hint{bottom:100px;color:#ffffff59;font-size:.8rem;left:50%;position:fixed;transform:translateX(-50%);z-index:1001}@media (max-width:768px){.slide-content{padding:30px 20px}.mega-title{font-size:3rem}.section-title{flex-direction:column;gap:16px;margin-bottom:40px}.step-number{font-size:1.2rem;height:60px;width:60px}.tokens-container{gap:10px}.token-box{padding:16px 24px}.nav-btn{font-size:.9rem;padding:12px 20px}.keyboard-hint{display:none}}.section-indicator{background:#0000;display:flex;gap:8px;padding:0;position:relative}.section-dot{background:#7c3aed4d;border-radius:50%;cursor:pointer;height:10px;position:relative;transition:all .3s ease;width:10px}.section-dot.active{background:#7c3aed;transform:scale(1.4)}.section-dot.done{background:#10b981}.section-dot .section-label{color:#ffffff80;font-size:.7rem;left:50%;margin-top:8px;opacity:0;pointer-events:none;position:absolute;text-transform:capitalize;top:100%;transform:translateX(-50%);transition:opacity .2s;white-space:nowrap}.section-dot.active .section-label,.section-dot:hover .section-label{opacity:1}.progress-info{align-items:center;display:flex;flex-direction:column;gap:6px}.slide-counter{color:#64748b;font-size:.85rem;font-weight:600}.progress-bar{background:#7c3aed26;border-radius:2px;height:4px;overflow:hidden;width:180px}.progress-fill{background:linear-gradient(90deg,#7c3aed,#a855f7);border-radius:2px;height:100%;transition:width .4s ease}.section-title.center{flex-direction:column;gap:0;justify-content:center;text-align:center}.concept-subtitle{color:#ffffff80;font-size:1.1rem;margin-bottom:20px;margin-top:-20px}.gradient-text{background:linear-gradient(135deg,#fff,#a78bfa 40%,#60a5fa 80%,#34d399)}.intro-stats{display:flex;gap:30px;margin-top:30px}.stat-box{align-items:center;background:#fff;border:1px solid #7c3aed33;border-radius:14px;box-shadow:0 4px 15px #0000000f;display:flex;flex-direction:column;padding:16px 24px}.stat-box .stat-num{color:#7c3aed;font-size:2rem;font-weight:800}.stat-box span:last-child{color:#64748b;font-size:.85rem;margin-top:4px}.binary-animation{align-items:center;gap:50px;max-width:800px}.binary-animation,.binary-visual{display:flex;flex-direction:column}.binary-visual{gap:24px}.binary-row{align-items:center;background:#fff;border:1px solid #7c3aed26;border-radius:12px;box-shadow:0 2px 10px #0000000d;display:flex;gap:20px;padding:16px 24px}.binary-row.highlight{background:linear-gradient(135deg,#7c3aed14,#3b82f614);border-color:#a78bfa}.binary-label{color:#7c3aed;font-size:1.2rem;font-weight:600;min-width:90px}.binary-value{color:#059669;font-family:Fira Code,monospace;font-size:1.2rem;letter-spacing:2px}.binary-decimal{color:#64748b;font-size:1.1rem}.binary-note{color:#d97706;font-size:.95rem;font-weight:600}.detailed-tokenization{max-width:1000px;min-height:300px}.detailed-tokenization,.token-stage{align-items:center;display:flex;flex-direction:column;width:100%}.character-view,.sentence-display,.token-ids-view,.token-summary,.token-view{align-items:center;display:flex;flex-direction:column;gap:30px}.big-text{color:#1e293b;font-size:clamp(1.8rem,4vw,3rem);font-weight:600}.helper-text{color:#64748b;font-size:1.1rem}.helper-text.success{color:#059669}.char-boxes{flex-wrap:wrap;gap:4px}.char-box,.char-boxes{display:flex;justify-content:center}.char-box{align-items:center;animation:charPop .3s ease-out both;background:#fff;border:1px solid #7c3aed4d;border-radius:6px;box-shadow:0 2px 6px #0000000f;color:#7c3aed;font-family:Fira Code,monospace;font-size:1.1rem;height:40px;width:32px}@keyframes charPop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.tokens-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.token-chip{animation:tokenSlide .5s ease-out both;background:linear-gradient(135deg,#7c3aed4d,#3b82f64d);border:2px solid #a78bfa;border-radius:12px;padding:16px 28px}@keyframes tokenSlide{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.token-chip .token-content{color:#fff;font-size:1.5rem;font-weight:600}.token-with-id{align-items:center;animation:tokenSlide .5s ease-out both;background:#1e293b99;border:2px solid #7c3aed66;border-radius:16px;display:flex;flex-direction:column;gap:12px;padding:20px 28px}.token-with-id .token-content{color:#fff;font-size:1.4rem;font-weight:600}.token-id-badge{background:linear-gradient(135deg,#10b981,#34d399);border-radius:20px;color:#fff;font-size:1rem;font-weight:700;padding:6px 14px}.summary-flow{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.flow-box{background:#1e293b99;border:1px solid #7c3aed4d;border-radius:10px;color:#fff;font-size:1.2rem;padding:16px 28px}.flow-box.highlight{background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;font-weight:600}.flow-arrow{color:#a78bfa;font-size:1.5rem}.embedding-explanation{align-items:center;display:flex;flex-direction:column;gap:16px;max-width:900px;transform:scale(.9);width:100%}.concept-card{background:#1e293b99;border:1px solid #7c3aed33;border-radius:16px;padding:24px 36px;text-align:center}.concept-card h3{color:#a78bfa;font-size:1.4rem;margin:0 0 12px}.concept-card p{color:#ffffffd9;font-size:1.2rem;margin:0}.concept-card.highlight{background:linear-gradient(135deg,#10b98133,#34d39933);border-color:#34d399}.concept-card.highlight h3{color:#34d399}.vector-preview{align-items:center;background:#0a0a1ecc;border-radius:12px;display:flex;flex-wrap:wrap;gap:20px;justify-content:center;padding:20px 30px}.vector-preview .token-label{color:#a78bfa;font-size:1.5rem;font-weight:600}.vector-preview .arrow{color:#ffffff80;font-size:1.5rem}.vector-preview .vector-display{color:#34d399;font-family:Fira Code,monospace;font-size:1.1rem}.embedding-explanation.advanced{gap:40px}.dimension-visual h3{color:#a78bfa;font-size:1.4rem;margin-bottom:24px}.dimension-bars{display:flex;flex-direction:column;gap:16px;max-width:500px;width:100%}.dim-bar{align-items:center;display:flex;gap:16px}.dim-bar span:first-child{color:#ffffffb3;min-width:80px}.dim-bar .bar{background:linear-gradient(90deg,#7c3aed,#a78bfa);border-radius:12px;flex:1 1;height:24px;max-width:300px}.dim-bar span:last-child{color:#a78bfa;font-weight:600;min-width:40px}.dimension-example{width:100%}.word-comparison{display:flex;gap:40px;justify-content:center}.word-vec{align-items:center;background:#1e293b80;border-radius:12px;display:flex;flex-direction:column;gap:10px;padding:20px 30px}.word-vec .word{color:#a78bfa;font-size:1.5rem;font-weight:600}.word-vec .dims{color:#ffffffb3;font-family:Fira Code,monospace}.famous-equation{text-align:center}.equation{align-items:center;background:#0a0a1ecc;border:2px solid #7c3aed4d;border-radius:16px;display:flex;gap:16px;justify-content:center;padding:24px 40px}.eq-part{color:#fff;font-size:1.6rem;font-weight:600}.eq-part.result{color:#34d399;font-size:1.8rem}.eq-op{color:#a78bfa;font-size:1.4rem}.model-sizes h3{color:#a78bfa;margin-bottom:20px}.size-list{display:flex;flex-direction:column;gap:12px}.size-item{background:#1e293b66;border-radius:8px;display:flex;justify-content:space-between;min-width:300px;padding:12px 24px}.size-item span:first-child{color:#ffffffb3}.size-item span:last-child{color:#60a5fa;font-weight:600}.size-item.highlight{background:linear-gradient(135deg,#7c3aed4d,#3b82f64d);border:1px solid #a78bfa}.size-item.highlight span:last-child{color:#a78bfa}.vector-space-2d-container{align-items:center;display:flex;flex-direction:column;gap:30px;width:100%}.vector-space-2d.large{height:min(500px,55vh);width:min(800px,85vw)}.space-point{animation:pointAppear .6s cubic-bezier(.175,.885,.32,1.275) forwards;border-radius:50%;box-shadow:0 0 20px currentColor;cursor:pointer;height:18px;position:absolute;transform:translate(-50%,-50%) scale(0);transition:transform .2s;width:18px}.space-point:hover{transform:translate(-50%,-50%) scale(1.4)}.cluster-box{animation:fadeIn .8s ease-out;border:2px dashed #7c3aed66;border-radius:20px;pointer-events:none;position:absolute}.cluster-label{background:#0a0a1a;border-radius:10px;color:#a78bfacc;font-size:.85rem;left:16px;padding:2px 10px;position:absolute;top:-24px}.relationship-svg{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.vector-3d-canvas.interactive{cursor:grab}.vector-3d-canvas.interactive:active{cursor:grabbing}.attention-detailed{gap:40px;max-width:900px;width:100%}.attention-concept,.attention-detailed{align-items:center;display:flex;flex-direction:column}.attention-concept{gap:35px}.concept-intro h3{color:#a78bfa;font-size:1.4rem;margin-bottom:16px}.big-question{color:#fff;font-size:1.2rem;font-style:italic;margin:0;text-align:center}.attention-answer .sentence-display,.example-sentence .sentence-display{color:#ffffffd9;display:flex;flex-wrap:wrap;font-size:1.3rem;gap:6px;justify-content:center}.highlight-word{background:#fbbf2433;border-radius:6px;color:#fbbf24;font-weight:600;padding:4px 8px}.highlight-word.related{background:#34d39933;color:#34d399}.key-insight .insight-box{align-items:center;background:linear-gradient(135deg,#7c3aed33,#3b82f633);border:2px solid #a78bfa;border-radius:12px;display:flex;gap:14px;padding:16px 24px}.insight-box .icon{font-size:1.5rem}.insight-box p{color:#fff;font-size:1.1rem;margin:0}.attention-detailed.qkv{gap:20px;transform:scale(.9)}.qkv-intro h3{color:#a78bfa;margin-bottom:8px}.qkv-intro p{color:#ffffffb3;font-size:1.2rem}.qkv-boxes{display:flex;flex-wrap:wrap;gap:30px;justify-content:center}.qkv-box{align-items:center;background:#1e293b99;border:2px solid #0000;border-radius:12px;display:flex;flex-direction:column;gap:4px;min-width:120px;padding:16px 24px}.qkv-box.query{border-color:#f472b6}.qkv-box.key{border-color:#fbbf24}.qkv-box.value{border-color:#34d399}.qkv-letter{font-size:1.8rem;font-weight:800}.qkv-box.query .qkv-letter{color:#f472b6}.qkv-box.key .qkv-letter{color:#fbbf24}.qkv-box.value .qkv-letter{color:#34d399}.qkv-name{color:#fff;font-size:1.2rem;font-weight:600}.qkv-desc{color:#fff9;font-size:.9rem;text-align:center}.qkv-formula{width:100%}.formula-box{align-items:center;background:#0a0a1ecc;border-radius:12px;color:#fff;display:flex;flex-wrap:wrap;font-size:1.3rem;gap:8px;justify-content:center;padding:20px 40px}.fraction{align-items:center;display:inline-flex;flex-direction:column;margin:0 8px}.fraction .num{border-bottom:2px solid #a78bfa;padding-bottom:4px}.fraction .denom{color:#a78bfa;padding-top:4px}.qkv-visual{align-items:center;gap:16px;width:100%}.attention-matrix,.qkv-visual{display:flex;flex-direction:column}.attention-matrix{background:#0a0a1e80;border-radius:12px;gap:4px;padding:16px}.matrix-row{display:flex;gap:4px}.matrix-row.header{margin-bottom:8px}.matrix-col-head,.matrix-row-head{color:#a78bfa;font-size:.85rem;font-weight:600;text-align:center;width:60px}.matrix-cell{align-items:center;border-radius:4px;color:#fff;display:flex;font-family:Fira Code,monospace;font-size:.8rem;height:36px;justify-content:center;width:60px}.transformer-architecture{display:flex;justify-content:center;width:100%}.architecture-visual{align-items:center;display:flex;flex-direction:column;gap:8px;transform:scale(.85)}.arch-layer{background:#1e293b66;border:2px solid #0000;border-radius:10px;min-width:220px;opacity:.3;padding:10px 30px;text-align:center;transition:all .5s ease}.arch-layer.active{border-color:#7c3aed80;opacity:1}.arch-layer .layer-label{color:#a78bfa;display:block;font-size:.85rem;margin-bottom:4px}.arch-layer .layer-content{color:#fff;font-size:1rem;font-weight:600}.arch-arrow{color:#a78bfa;font-size:1.5rem}.arch-block{background:linear-gradient(135deg,#7c3aed33,#3b82f633);border:2px solid #a78bfa;border-radius:12px;opacity:.3;padding:12px 30px;transition:all .5s ease}.arch-block.active{opacity:1}.block-label{color:#a78bfa;display:block;font-size:1rem;font-weight:700;margin-bottom:10px}.block-content{display:flex;flex-direction:column;gap:8px}.sub-layer{background:#1e293b80;border-radius:8px;color:#fffc;font-size:.95rem;padding:10px 20px}.model-stats{display:flex;gap:20px;margin-top:20px}.model-stats .stat{background:#1e293b80;border-radius:10px;display:flex;flex-direction:column;padding:12px 20px}.model-stats .stat span:first-child{color:#a78bfa;font-weight:600}.model-stats .stat span:last-child{color:#ffffffb3;font-size:.9rem}.summary-pipeline{flex-wrap:wrap;justify-content:center;margin:40px 0}.pipe-step,.summary-pipeline{align-items:center;display:flex;gap:12px}.pipe-step{background:#1e293b99;border:1px solid #7c3aed4d;border-radius:12px;padding:16px 24px}.pipe-step .num{align-items:center;background:linear-gradient(135deg,#7c3aed,#a855f7);border-radius:50%;color:#fff;display:flex;font-weight:700;height:32px;justify-content:center;width:32px}.pipe-step .name{color:#fff;font-size:1.1rem}.pipe-arrow{color:#a78bfa;font-size:1.5rem}.final-note{margin-top:30px;text-align:center}.final-note p{color:#ffffffb3;font-size:1.2rem;margin:8px 0}.final-note p.highlight{color:#34d399;font-size:1.5rem;font-weight:600}@media (max-width:768px){.section-indicator{display:none}.intro-stats{flex-direction:column;gap:16px}.stat-box .stat-num{font-size:1.8rem}.binary-row{gap:8px;text-align:center}.binary-row,.qkv-boxes{flex-direction:column}.equation{flex-wrap:wrap;gap:8px}.word-comparison{gap:20px}.summary-pipeline,.word-comparison{flex-direction:column}.pipe-arrow{transform:rotate(90deg)}}.scanner-banner{align-items:center;background:linear-gradient(135deg,#0f172a,#1e1b4b 50%,#312e81);border:1px solid #ffffff1a;border-radius:32px;border-radius:var(--radius-xl);box-shadow:0 20px 50px #0000004d;display:flex;gap:40px;justify-content:space-between;min-height:300px;overflow:hidden;padding:40px;position:relative}.scanner-content{flex:1 1;position:relative;text-align:left;z-index:10}.scanner-visual{align-items:center;display:flex;flex:1 1;height:250px;justify-content:center;position:relative}.holo-face{animation:floatFace 4s ease-in-out infinite;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:radial-gradient(circle at 30% 30%,#6366f11a 0,#0000 50%),repeating-linear-gradient(0deg,#0000,#0000 19px,#6366f133 20px);border:2px solid #6366f14d;border-radius:60px 60px 80px 80px;box-shadow:0 0 30px #6366f133;height:220px;position:relative;width:180px}.holo-face:before{box-shadow:0 30px 0 #6366f180;height:1px;left:20%;top:20%;width:60%}.holo-face:after,.holo-face:before{background:#6366f180;content:"";position:absolute}.holo-face:after{bottom:25%;height:2px;left:35%;width:30%}.scan-line{animation:scanMove 3s linear infinite;background:#a5b4fc;box-shadow:0 0 15px #a5b4fc,0 0 30px #6366f1;height:2px;left:-10%;opacity:.8;position:absolute;top:0;width:120%}@keyframes scanMove{0%{opacity:0;top:0}10%{opacity:1}90%{opacity:1}to{opacity:0;top:100%}}.tech-dot{animation:blinkDot 2s infinite;background:#fff;border-radius:50%;box-shadow:0 0 10px #fff;height:6px;position:absolute;width:6px}.tech-dot:first-child{animation-delay:.2s;left:30%;top:30%}.tech-dot:nth-child(2){animation-delay:.4s;right:30%;top:30%}.tech-dot:nth-child(3){animation-delay:.6s;left:50%;top:50%;transform:translateX(-50%)}.tech-dot:nth-child(4){animation-delay:.8s;bottom:25%;left:35%}.tech-dot:nth-child(5){animation-delay:1s;bottom:25%;right:35%}@keyframes floatFace{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.code-frag{color:#6366f166;font-family:monospace;font-size:.8rem;pointer-events:none;position:absolute}@media (max-width:768px){.scanner-banner{flex-direction:column}.scanner-banner,.scanner-content{text-align:center}}.modern-home{background:#f8fafc;font-family:Outfit,sans-serif;min-height:100vh;padding-bottom:60px}.glass-nav{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0f172ab3;border-bottom:1px solid #ffffff1a;justify-content:space-between;padding:20px 40px;position:-webkit-sticky;position:sticky;top:0;z-index:50}.glass-nav,.nav-logo{align-items:center;display:flex}.nav-logo{color:#f8fafc;font-size:1.4rem;font-weight:800;gap:12px}.logo-symbol{color:#60a5fa;font-size:1.8rem}.nav-links{display:flex;gap:30px}.nav-item{color:#94a3b8;font-weight:500;transition:color .3s}.nav-item:hover{color:#fff}.hero-section{background:radial-gradient(circle at 70% 50%,#1e293b 0,#0f172a 50%,#020617 100%);color:#fff;display:flex;justify-content:center;min-height:80vh;overflow:hidden;padding:0 5%}.hero-grid,.hero-section{align-items:center;position:relative}.hero-grid{display:grid;grid-template-columns:1fr 1fr;max-width:1400px;width:100%;z-index:2}.hero-text-content{max-width:600px}.pill-badge{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:50px;color:#94a3b8;display:inline-flex;font-size:.9rem;gap:8px;margin-bottom:24px;padding:8px 16px}.dot{animation:pulse 2s infinite;background:#60a5fa;border-radius:50%;height:8px;width:8px}.hero-title{color:#f8fafc;font-size:4rem;line-height:1.1;margin-bottom:24px}.gradient-text{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#60a5fa,#c084fc);background-clip:text;-webkit-background-clip:text}.hero-subtitle{color:#cbd5e1;font-size:1.25rem;line-height:1.6;margin-bottom:40px;max-width:500px}@media (max-width:900px){.hero-grid{grid-template-columns:1fr;text-align:center}.hero-text-content{order:2}.hero-visual{display:flex;justify-content:center;order:1}}.cta-group{display:flex;flex-wrap:wrap;gap:16px}.btn-glow{box-shadow:0 0 30px #6366f166}.btn-glass{background:#fff9;border:1px solid #cbd5e1;border-radius:99px;color:#334155;cursor:pointer;font-weight:600;padding:16px 32px;transition:all .3s}.btn-glass:hover{background:#fff;border-color:#94a3b8;transform:translateY(-2px)}.hero-visual-premium{align-items:center;display:flex;height:500px;justify-content:center;position:relative}.premium-robot-img{animation:floatHero 6s ease-in-out infinite;filter:drop-shadow(0 0 50px rgba(96,165,250,.3));height:auto;max-width:400px;position:relative;width:100%;z-index:10}.hero-visual{align-items:center;display:flex;height:500px;justify-content:center;position:relative}.cyber-face-svg{animation:float 6s ease-in-out infinite;filter:drop-shadow(0 20px 40px rgba(99,102,241,.2));height:auto;max-width:400px;width:100%;z-index:2}.tech-node{animation:blinkNetwork 3s infinite}.scan-beam-light{animation:scanDown 4s ease-in-out infinite;background:linear-gradient(90deg,#0000,#60a5fa,#a78bfa,#0000);box-shadow:0 0 20px #60a5facc,0 0 40px #a78bfa66;height:10px;left:0;opacity:.8;position:absolute;top:0;width:100%;z-index:20}@keyframes scanDown{0%{opacity:0;top:0}10%{opacity:1}90%{opacity:1}to{opacity:0;top:100%}}.face-mesh-overlay{animation:revealMesh 4s ease-in-out infinite;background-image:linear-gradient(#6366f11a 1px,#0000 0),linear-gradient(90deg,#6366f11a 1px,#0000 0);background-size:30px 30px;height:100%;left:0;-webkit-mask-image:radial-gradient(circle at center,#000 40%,#0000 80%);mask-image:radial-gradient(circle at center,#000 40%,#0000 80%);opacity:0;position:absolute;top:0;width:100%;z-index:15}@keyframes revealMesh{0%{opacity:0}40%{opacity:1}60%{opacity:1}to{opacity:0}}.scan-success-msg{align-items:center;animation:msgPop 4s ease-in-out infinite;background:#10b981e6;border:1px solid #34d399;border-radius:4px;bottom:20%;box-shadow:0 4px 15px #10b98166;color:#fff;display:flex;font-family:Courier New,monospace;font-size:.9rem;font-weight:700;gap:8px;left:50%;opacity:0;padding:8px 16px;position:absolute;transform:translateX(-50%);z-index:30}@keyframes msgPop{0%,60%{opacity:0;transform:translate(-50%,10px)}70%{opacity:1;transform:translate(-50%)}90%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-10px)}}.scan-dots{height:100%;left:0;position:absolute;top:0;width:100%;z-index:18}.scan-dot{animation:blinkDot 2s infinite;background:#60a5fa;border-radius:50%;box-shadow:0 0 8px #60a5fa;height:4px;position:absolute;width:4px}@keyframes blinkDot{0%,to{opacity:0}50%{opacity:1}}@keyframes pulseBackdrop{0%{opacity:.5;transform:translate(-50%,-50%) scale(1)}to{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}.floating-card{align-items:center;animation:floatCard 5s ease-in-out infinite alternate;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;box-shadow:0 8px 32px #0003;color:#fff;display:flex;font-size:.95rem;font-weight:500;gap:10px;padding:12px 24px;position:absolute;z-index:20}.floating-card span{font-size:1.2rem}.card-1{animation-delay:0s;left:5%;top:20%}.card-2{animation-delay:2.5s;bottom:25%;right:5%}@keyframes floatCard{0%{transform:translateY(0)}to{transform:translateY(-15px)}}@media (max-width:900px){.hero-visual-premium{height:400px;margin-top:40px}.premium-robot-img{max-width:300px}.floating-card{font-size:.8rem;padding:8px 16px}}.hero-3d-scene{height:100%;position:absolute;right:0;top:0;width:60%;z-index:1}@media (max-width:768px){.hero-section{flex-direction:column;overflow:visible;padding-top:100px}.hero-grid{grid-template-columns:1fr;text-align:center}.hero-3d-scene{height:500px;margin-top:2rem;order:-1;position:relative;right:auto;top:auto;width:100%}}.scan-beam{animation:scanningBeam 3s linear infinite}@keyframes scanningBeam{0%{opacity:0;transform:translateY(0)}10%{opacity:.8}90%{opacity:.8}to{opacity:0;transform:translateY(240px)}}@keyframes blinkNetwork{0%,to{r:2;opacity:.3}50%{r:4;opacity:1}}.hero-backdrop-glow{background:radial-gradient(circle,#818cf833 0,#0000 70%);height:400px;position:absolute;width:400px;z-index:1}.learn-section{margin:0 auto;max-width:1400px;padding:0 40px 60px}.master-glass-card{background:linear-gradient(135deg,#1e1b4b,#312e81);border-radius:24px;box-shadow:0 20px 40px #1e1b4b33;color:#fff;padding:30px 40px;transition:transform .3s}.master-glass-card:hover{transform:translateY(-5px)}.glass-content{gap:24px}.text-box h3{color:#fff;margin-bottom:4px}.text-box p{color:#a5b4fc;margin:0}.glass-arrow-btn{background:#fff;border-radius:99px;color:#312e81;font-weight:600;margin-left:auto;padding:12px 24px;transition:transform .2s}.glass-arrow-btn:hover{transform:translateX(5px)}.features-section{margin:0 auto;max-width:1400px;padding:0 40px 100px}.section-header{margin-bottom:60px;text-align:center}.section-header h2{color:#fff;font-size:2.5rem;margin-bottom:12px}.bento-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:40px}.bento-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff08;border:1px solid #ffffff0d;border-radius:24px;display:flex;flex-direction:column;overflow:hidden;padding:32px;position:relative;transition:all .3s ease}.bento-card:hover{background:#ffffff0f;border-color:#ffffff1a;box-shadow:0 20px 40px #0003;transform:translateY(-5px)}.bento-card h3{color:#f8fafc;font-size:1.4rem;margin-bottom:12px}.bento-card p{color:#94a3b8;font-size:.95rem;line-height:1.6;margin-bottom:0}.icon-float{display:inline-block;font-size:2.5rem;margin-bottom:20px}.master-glass-card{margin:80px auto 0;max-width:1000px;position:relative;z-index:10}.glass-content{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(135deg,#1e293bb3,#0f172ae6);border:1px solid #ffffff1a;border-radius:30px;box-shadow:0 20px 50px #0000004d;gap:30px;padding:40px}.glass-content,.icon-box{align-items:center;display:flex}.icon-box{background:#ffffff1a;border-radius:16px;font-size:2rem;height:60px;justify-content:center;width:60px}.simple-footer{border-top:1px solid #ffffff0d;color:#64748b;padding-top:40px;text-align:center}
/*# sourceMappingURL=main.7848c88b.css.map*/