:root{--primary: #667eea;--primary-dark: #5a67d8;--secondary: #764ba2;--accent: #00c6ff;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--dark: #1f2937;--gray: #6b7280;--light: #f3f4f6;--white: #ffffff;--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-accent: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);--gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1);--shadow-xl: 0 25px 50px -12px rgb(0 0 0 / .25);--radius: 12px;--radius-lg: 16px;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}html{background-color:#0a0a0b}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(180deg,#f8fafc,#e2e8f0);min-height:100vh;color:var(--dark);line-height:1.6}html[data-theme=light],html.light-mode{background-color:#f4f4f5}html[data-theme=dark],html.dark-mode{background-color:#0a0a0b}.app{display:flex;min-height:100vh}.sidebar{width:280px;background:var(--dark);color:#fff;padding:0;position:fixed;height:100vh;overflow-y:auto;z-index:100;box-shadow:var(--shadow-xl)}.sidebar-header{padding:24px;background:var(--gradient-primary);position:relative;overflow:hidden}.sidebar-header:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 60%);animation:shimmer 8s linear infinite}@keyframes shimmer{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sidebar-header h1{font-size:1.5em;font-weight:700;margin-bottom:4px;position:relative}.sidebar-header p{font-size:.85em;opacity:.8;position:relative}.sidebar nav{padding:16px 0}.sidebar-section{padding:8px 16px;font-size:.7em;text-transform:uppercase;letter-spacing:1.5px;color:#fff6;margin-top:16px}.sidebar a{display:flex;align-items:center;gap:12px;padding:14px 24px;color:#ffffffb3;text-decoration:none;font-weight:500;transition:var(--transition);position:relative;overflow:hidden}.sidebar a:before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--accent);transform:scaleY(0);transition:var(--transition)}.sidebar a:hover{background:#ffffff1a;color:#fff;transform:translate(4px)}.sidebar a:hover:before{transform:scaleY(1)}.sidebar a.active{background:#ffffff26;color:#fff}.sidebar a.active:before{transform:scaleY(1)}.sidebar .icon{font-size:1.2em;width:28px;text-align:center}.content{flex:1;margin-left:280px;padding:32px 48px;min-height:100vh;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tabs{display:flex;gap:8px;background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px;border-radius:var(--radius-lg);box-shadow:var(--shadow);margin-bottom:24px;overflow-x:auto}.tab{flex:1;padding:14px 20px;border:none;background:transparent;border-radius:var(--radius);cursor:pointer;font-weight:600;font-size:.95em;color:var(--gray);transition:var(--transition);white-space:nowrap;position:relative;overflow:hidden}.tab:after{content:"";position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--gradient-primary);border-radius:3px;transition:var(--transition);transform:translate(-50%)}.tab:hover{color:var(--primary);background:#667eea1a}.tab:hover:after{width:40%}.tab.active{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow);transform:scale(1.02)}.tab.active:after{display:none}.btn{padding:12px 24px;border:none;border-radius:50px;font-weight:600;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:8px;font-size:.95em;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:.5s}.btn:hover:before{left:100%}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 15px #667eea66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.btn-secondary{background:var(--light);color:var(--dark)}.btn-secondary:hover{background:#e5e7eb;transform:translateY(-2px)}.btn-accent{background:var(--gradient-accent);color:#fff;box-shadow:0 4px 15px #00c6ff66}.btn-success{background:var(--gradient-success);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.card{background:#fff;border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);transition:var(--transition);border:1px solid rgba(0,0,0,.05)}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.card-header{background:var(--gradient-primary);margin:-24px -24px 24px;padding:24px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;color:#fff}input[type=range]{-webkit-appearance:none;width:100%;height:8px;background:var(--light);border-radius:4px;outline:none;transition:var(--transition)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--gradient-primary);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #667eea80;transition:var(--transition)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]:focus{background:#e5e7eb}.control{margin-bottom:16px}.control label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:500;color:var(--gray)}.control label strong{color:var(--primary);font-size:1.1em}canvas{border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:var(--transition)}canvas:hover{box-shadow:var(--shadow-lg)}pre{background:#0d1117!important;border-radius:var(--radius)!important;padding:20px!important;overflow-x:auto;box-shadow:var(--shadow-lg);position:relative}pre:before{content:"";position:absolute;top:0;left:0;right:0;height:32px;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 100%);border-radius:var(--radius) var(--radius) 0 0;pointer-events:none}code{font-family:JetBrains Mono,Fira Code,monospace;font-size:.9em}:root{--ease-smooth: cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--ease-spring: cubic-bezier(.175, .885, .32, 1.275);--duration-instant: .1s;--duration-fast: .15s;--duration-normal: .25s;--duration-moderate: .35s;--duration-slow: .5s}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes pulseSoft{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(1deg)}75%{transform:translateY(-12px) rotate(-1deg)}}@keyframes floatSlow{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleInBounce{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1);opacity:1}to{transform:scale(1)}}@keyframes glow{0%,to{box-shadow:0 0 5px var(--primary),0 0 10px var(--primary)}50%{box-shadow:0 0 20px var(--primary),0 0 30px var(--primary)}}@keyframes glowSoft{0%,to{box-shadow:0 0 5px #667eea4d}50%{box-shadow:0 0 15px #667eea80}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes ripple{0%{transform:scale(0);opacity:1}to{transform:scale(4);opacity:0}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes borderGlow{0%,to{border-color:#667eea4d}50%{border-color:#667eeacc}}@keyframes textShimmer{0%{background-position:-200% center}to{background-position:200% center}}.animate-pulse{animation:pulse 2s var(--ease-smooth) infinite}.animate-pulse-soft{animation:pulseSoft 3s var(--ease-smooth) infinite}.animate-float{animation:float 4s var(--ease-smooth) infinite}.animate-float-slow{animation:floatSlow 6s var(--ease-smooth) infinite}.animate-slideIn{animation:slideIn var(--duration-moderate) var(--ease-out) both}.animate-slideInRight{animation:slideInRight var(--duration-moderate) var(--ease-out) both}.animate-slideUp{animation:slideUp var(--duration-moderate) var(--ease-out) both}.animate-slideDown{animation:slideDown var(--duration-moderate) var(--ease-out) both}.animate-fadeIn{animation:fadeIn var(--duration-normal) var(--ease-smooth) both}.animate-fadeInScale{animation:fadeInScale var(--duration-moderate) var(--ease-out) both}.animate-scaleIn{animation:scaleIn var(--duration-moderate) var(--ease-spring) both}.animate-scaleInBounce{animation:scaleInBounce var(--duration-slow) var(--ease-bounce) both}.animate-glow{animation:glow 2s var(--ease-smooth) infinite}.animate-glow-soft{animation:glowSoft 3s var(--ease-smooth) infinite}.animate-shake{animation:shake .5s var(--ease-smooth)}.animate-wiggle{animation:wiggle .5s var(--ease-smooth)}.animate-spin{animation:spin 1s linear infinite}.animate-bounce{animation:bounce 1s var(--ease-smooth) infinite}.animate-gradient{background-size:200% 200%;animation:gradientShift 3s var(--ease-smooth) infinite}.stagger-1{animation-delay:.05s}.stagger-2{animation-delay:.1s}.stagger-3{animation-delay:.15s}.stagger-4{animation-delay:.2s}.stagger-5{animation-delay:.25s}.stagger-6{animation-delay:.3s}.stagger-7{animation-delay:.35s}.stagger-8{animation-delay:.4s}.animate-paused{animation-play-state:paused}.animate-running{animation-play-state:running}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.scroll-animate{opacity:0;transform:translateY(30px);transition:all .6s ease-out}.scroll-animate.visible{opacity:1;transform:translateY(0)}[data-tooltip]{position:relative;cursor:help}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-5px);background:var(--dark);color:#fff;padding:8px 12px;border-radius:8px;font-size:.85em;white-space:nowrap;opacity:0;visibility:hidden;transition:var(--transition);z-index:1000}[data-tooltip]:hover:after{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton 1.5s ease-in-out infinite;border-radius:var(--radius)}@keyframes skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.progress{height:8px;background:var(--light);border-radius:4px;overflow:hidden}.progress-bar{height:100%;background:var(--gradient-primary);border-radius:4px;transition:width .5s ease-out;position:relative}.progress-bar:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer-bar 2s infinite}@keyframes shimmer-bar{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media (max-width: 1024px){.sidebar{width:240px}.content{margin-left:240px;padding:24px}canvas{max-width:100%;height:auto!important}}@media (max-width: 768px){.sidebar{width:100%;height:auto;position:relative}.content{margin-left:0;padding:16px}.app{flex-direction:column}.tabs{flex-wrap:wrap}.tab{flex:none;min-width:120px}canvas{max-width:100%;height:auto!important;min-height:250px}.visualization-container,.canvas-container{width:100%;overflow-x:auto}.progress-indicator{flex-wrap:wrap;justify-content:center}}@media (max-width: 480px){.content{padding:12px}.tab{min-width:100px;padding:10px 12px;font-size:.85em}canvas{min-height:200px}.btn{padding:10px 16px;font-size:.9em}}@media (max-width: 768px){button,a,[role=button],.MuiButtonBase-root,.MuiChip-root,.MuiTab-root{min-height:44px}.MuiListItemButton-root{min-height:48px}input[type=range]::-webkit-slider-thumb{width:28px;height:28px}input[type=range]::-moz-range-thumb{width:28px;height:28px}p,span,h1,h2,h3,h4,h5,h6{-webkit-user-select:text;user-select:text}input,select,textarea{font-size:16px!important}.MuiDrawer-paper,.sidebar,[style*=overflow]{-webkit-overflow-scrolling:touch}pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.katex-display{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;max-width:100%;padding:4px 0}.katex{font-size:.9em!important}.MuiPaper-root{max-width:100%;overflow-wrap:break-word;word-wrap:break-word}.MuiTypography-root{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}svg{max-width:100%;height:auto}.MuiBox-root{max-width:100%}}@media (max-width: 600px){.MuiTypography-h1{font-size:1.75rem!important}.MuiTypography-h2{font-size:1.5rem!important}.MuiTypography-h3{font-size:1.25rem!important}.MuiTypography-h4{font-size:1.125rem!important}body{font-size:15px}code,pre{font-size:.8em!important}}@supports (padding: max(0px)){.main-content-with-sidebar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.MuiDrawer-paper{padding-bottom:env(safe-area-inset-bottom)}.MuiAppBar-root{padding-top:env(safe-area-inset-top)}}@media (max-height: 500px) and (orientation: landscape){.home-hero{padding:24px 20px}.home-hero-logo{width:80px;height:80px}.home-hero-title{font-size:1.5em}}.intro-hero{padding:32px 24px}.intro-hero-title{font-size:1.5em;font-weight:800;margin-bottom:12px}.intro-hero-subtitle{font-size:1em;opacity:.9;max-width:600px}.intro-grid-3,.intro-grid-2{grid-template-columns:1fr}@media (min-width: 480px){.intro-grid-2{grid-template-columns:repeat(2,1fr)}}@media (min-width: 600px){.intro-hero{padding:40px 36px}.intro-hero-title{font-size:2em}.intro-hero-subtitle{font-size:1.1em}.intro-grid-3{grid-template-columns:repeat(3,1fr)}}@media (min-width: 960px){.intro-hero{padding:48px}.intro-hero-title{font-size:2.5em;margin-bottom:16px}.intro-hero-subtitle{font-size:1.2em}}.viz-container{display:grid;grid-template-columns:1fr;gap:16px}.viz-container canvas{width:100%!important;height:auto!important;max-width:100%}.viz-container .controls{order:2}@media (min-width: 900px){.viz-container{grid-template-columns:1fr 320px;gap:20px}.viz-container .controls{order:0}}@media (min-width: 1100px){.viz-container{grid-template-columns:1fr 350px}}.viz-metrics{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}@media (min-width: 480px){.viz-metrics{grid-template-columns:repeat(3,1fr);gap:15px;margin-top:20px}}.viz-container .control{margin-bottom:12px}.viz-container .control label{display:block;margin-bottom:6px;font-size:.9em}.viz-container .control input[type=range]{width:100%}.comparison-box{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0}.grid-2-col,.grid-3-col{display:grid;grid-template-columns:1fr;gap:12px}@media (min-width: 600px){.comparison-box,.grid-2-col{grid-template-columns:1fr 1fr;gap:15px}.grid-3-col{grid-template-columns:repeat(3,1fr);gap:15px}}.glass{background:#ffffffb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)}.step-navigation{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;padding:12px;background:linear-gradient(135deg,#667eea14,#764ba214);border-radius:var(--radius-lg);border:1px solid rgba(102,126,234,.15)}.step-btn{padding:10px 20px;border:2px solid #e0e0e0;background:#fff;border-radius:50px;cursor:pointer;font-weight:600;font-size:.9em;color:var(--gray);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;min-width:90px}.step-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(102,126,234,.2),transparent);transition:.5s}.step-btn:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px #667eea40}.step-btn:hover:before{left:100%}.step-btn.active{background:var(--gradient-primary);color:#fff;border-color:transparent;box-shadow:0 4px 15px #667eea66;transform:scale(1.05)}.step-btn.completed{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-color:transparent}.step-btn.completed:after{content:"✓";margin-left:6px;font-size:.9em}.algorithm-step{background:#fff;border-radius:var(--radius-lg);padding:24px;margin-top:20px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.05);animation:slideUp .4s ease-out}.step-header{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--light)}.step-number{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--gradient-primary);color:#fff;border-radius:50%;font-weight:700;font-size:1.3em;box-shadow:0 4px 15px #667eea66;flex-shrink:0}.step-header h3{margin:0;font-size:1.4em;color:var(--dark);line-height:1.3}.step-content{line-height:1.7}.current-state-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 20px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:var(--radius);margin-bottom:20px;font-size:.95em;border-left:4px solid var(--primary);box-shadow:var(--shadow-sm)}.current-state-bar code{background:#fff;padding:4px 12px;border-radius:6px;font-family:JetBrains Mono,Fira Code,monospace;color:var(--primary-dark);border:1px solid rgba(102,126,234,.2)}.viz-with-controls{display:grid;grid-template-columns:1fr 280px;gap:24px;margin:20px 0;align-items:start}.viz-with-controls canvas{width:100%;height:auto;border-radius:var(--radius);background:#fafafa}.viz-with-controls .controls{display:flex;flex-direction:column;gap:16px}.viz-with-controls .legend{padding:16px;background:#f8f9fa;border-radius:var(--radius);font-size:.9em}.viz-with-controls .legend p{margin:8px 0}.mse-display{padding:16px;background:linear-gradient(135deg,#f0f4ff,#e8f0fe);border-radius:var(--radius);border:1px solid rgba(102,126,234,.15)}.mse-display p{margin:6px 0;font-size:.95em}.explanation-box{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:var(--radius);padding:20px;margin-bottom:20px;border-left:4px solid var(--primary)}.explanation-box h4{margin:0 0 12px;color:var(--primary-dark);font-size:1.1em}.explanation-box ul,.explanation-box ol{margin:12px 0;padding-left:20px}.explanation-box li{margin:8px 0}.key-concept{background:linear-gradient(135deg,#fff8e1,#ffecb3);border-radius:var(--radius);padding:20px;margin:20px 0;border-left:4px solid #f59e0b}.key-concept h4{margin:0 0 12px;color:#b45309}.formula-box{background:#f0f4ff;border-radius:var(--radius);padding:16px 20px;margin:16px 0;border:1px solid rgba(102,126,234,.2)}.formula-box code{font-size:1.1em;color:var(--primary-dark);font-family:JetBrains Mono,Fira Code,monospace}.formula-box.large{text-align:center;font-size:1.2em;padding:24px}.data-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.9em;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}.data-table th{background:var(--gradient-primary);color:#fff;padding:12px 16px;text-align:left;font-weight:600}.data-table td{padding:10px 16px;border-bottom:1px solid #eee;background:#fff}.data-table tr:hover td{background:#f8f9fa}.comparison-box{display:grid;gap:16px;margin:16px 0}@media (max-width: 768px){.step-navigation{justify-content:center}.step-btn{flex:1 1 calc(50% - 8px);min-width:80px;padding:8px 12px;font-size:.85em}.viz-with-controls{grid-template-columns:1fr}.viz-with-controls canvas{max-width:100%}.current-state-bar{flex-direction:column;align-items:flex-start;gap:8px;font-size:.85em}.step-header{flex-direction:column;text-align:center}.algorithm-step{padding:16px}.data-table{display:block;overflow-x:auto;white-space:nowrap}.comparison-box{grid-template-columns:1fr!important}}@media (max-width: 480px){.step-btn{flex:1 1 100%}}.home-hero{padding:48px 32px}.home-hero-content{text-align:center}.home-hero-logo{width:120px;height:120px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.3))}.home-hero-title{font-size:2.2em;font-weight:800;margin-bottom:12px;letter-spacing:-1px;line-height:1.1}.home-hero-subtitle{font-size:1.1em;opacity:.95;max-width:600px;margin:0 auto 28px;line-height:1.7}.home-hero-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.home-hero-cta-primary{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#667eea;padding:14px 28px;border-radius:50px;text-decoration:none;font-weight:700;font-size:1em;box-shadow:0 8px 30px #0003;width:100%;justify-content:center}.home-hero-cta-secondary{display:inline-flex;align-items:center;gap:8px;background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;padding:14px 28px;border-radius:50px;text-decoration:none;font-weight:600;font-size:1em;border:2px solid rgba(255,255,255,.25);width:100%;justify-content:center}.home-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px}.home-algorithms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:40px}.home-features-section{padding:40px 24px}.home-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;position:relative;z-index:1}@media (min-width: 600px){.home-hero{padding:56px 40px}.home-hero-logo{width:140px;height:140px}.home-hero-title{font-size:2.8em}.home-hero-subtitle{font-size:1.2em}.home-hero-buttons{flex-direction:row}.home-hero-cta-primary,.home-hero-cta-secondary{width:auto;padding:16px 32px}.home-stats-grid{gap:20px;margin-bottom:48px}.home-features-section{padding:48px 40px}}@media (min-width: 960px){.home-hero{padding:64px 48px}.home-hero-logo{width:160px;height:160px}.home-hero-title{font-size:3.2em}.home-hero-subtitle{font-size:1.3em;margin-bottom:36px}.home-hero-cta-primary,.home-hero-cta-secondary{padding:18px 36px;font-size:1.1em}.home-stats-grid{gap:24px;margin-bottom:56px}.home-algorithms-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-bottom:56px}.home-features-section{padding:56px 48px}.home-features-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px}}@media (max-width: 480px){.home-hero{padding:32px 20px}.home-hero-logo{width:100px;height:100px}.home-hero-title{font-size:1.8em}.home-hero-subtitle{font-size:1em}.home-hero-cta-primary,.home-hero-cta-secondary{padding:12px 20px;font-size:.9em}.home-stats-grid{grid-template-columns:1fr;gap:12px;margin-bottom:32px}.home-algorithms-grid{grid-template-columns:1fr;gap:16px}.home-features-section{padding:32px 16px}.home-features-grid{grid-template-columns:1fr;gap:24px}}@media (prefers-color-scheme: dark){body{background:linear-gradient(180deg,#0f172a,#1e293b);color:#f8fafc}.card{background:#1e293b;border-color:#ffffff1a}.tabs{background:#1e293be6}.tab{color:#cbd5e1}.tab:hover{background:#818cf833}}body.light-mode,[data-theme=light]{background:linear-gradient(180deg,#f1f5f9,#e2e8f0);color:#0f172a}.light-mode .card,[data-theme=light] .card{background:#fff;color:#0f172a;border:1px solid rgba(0,0,0,.08);box-shadow:0 4px 6px -1px #00000014,0 2px 4px -1px #0000000a}.light-mode .step-btn,[data-theme=light] .step-btn{background:#fff;color:#334155;border-color:#cbd5e1}.light-mode .step-btn:hover,[data-theme=light] .step-btn:hover{border-color:#5a67d8;color:#5a67d8;background:#f8fafc}.light-mode .step-btn.active,[data-theme=light] .step-btn.active{background:linear-gradient(135deg,#5a67d8,#6b46c1);color:#fff;border-color:transparent}.light-mode .algorithm-step,[data-theme=light] .algorithm-step{background:#fff;border:1px solid rgba(0,0,0,.08)}.light-mode .explanation-box,[data-theme=light] .explanation-box{background:linear-gradient(135deg,#f8fafc,#f1f5f9);color:#0f172a;border-left-color:#5a67d8}.light-mode .mse-display,[data-theme=light] .mse-display{background:linear-gradient(135deg,#eef2ff,#e0e7ff);color:#0f172a}.light-mode .content code,[data-theme=light] .content code{background:#f1f5f9;color:#4c51bf;padding:2px 6px;border-radius:4px}.light-mode .content pre code,[data-theme=light] .content pre code{background:transparent;padding:0}.light-mode .current-state-bar,[data-theme=light] .current-state-bar{background:linear-gradient(135deg,#f8fafc,#f1f5f9);color:#0f172a;border-left-color:#5a67d8}.light-mode .content a,[data-theme=light] .content a{color:#4c51bf}.light-mode .content a:hover,[data-theme=light] .content a:hover{color:#3730a3}.light-mode input[type=range],[data-theme=light] input[type=range]{background:#e2e8f0}.light-mode .data-table td,[data-theme=light] .data-table td{background:#fff;color:#0f172a;border-bottom:1px solid #e2e8f0}.light-mode .data-table tr:hover td,[data-theme=light] .data-table tr:hover td{background:#f8fafc}.light-mode canvas,[data-theme=light] canvas{background:#fafafa;border:1px solid #e2e8f0}.light-mode .key-concept,[data-theme=light] .key-concept{background:linear-gradient(135deg,#fffbeb,#fef3c7);border-left-color:#d97706}.light-mode .key-concept h4,[data-theme=light] .key-concept h4{color:#92400e}.light-mode .formula-box,[data-theme=light] .formula-box{background:#eef2ff;border-color:#5a67d84d}.light-mode .formula-box code,[data-theme=light] .formula-box code{color:#4c51bf;background:transparent}.light-mode .progress,[data-theme=light] .progress{background:#e2e8f0}.light-mode .progress-bar,[data-theme=light] .progress-bar{background:linear-gradient(90deg,#5a67d8,#6b46c1)}.light-mode .btn-primary,[data-theme=light] .btn-primary{background:linear-gradient(135deg,#5a67d8,#6b46c1);box-shadow:0 4px 15px #5a67d859}.light-mode .btn-primary:hover,[data-theme=light] .btn-primary:hover{box-shadow:0 6px 20px #5a67d873}.light-mode .MuiTypography-h1,.light-mode .MuiTypography-h2,.light-mode .MuiTypography-h3,.light-mode .MuiTypography-h4,[data-theme=light] .MuiTypography-h1,[data-theme=light] .MuiTypography-h2,[data-theme=light] .MuiTypography-h3,[data-theme=light] .MuiTypography-h4{color:#0f172a}.light-mode .text-secondary,[data-theme=light] .text-secondary{color:#64748b}
