*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;line-height:1.5}:root{--primary-gradient:linear-gradient(45deg,#6366f1,#ec4899);--text-light:#f8fafc;--text-dark:#0f172a;--bg-dark:#1e293b;--transition:all .3s ease;--nav-height:4rem;--bg-secondary:#f3f3f3;--bg-secondary-dark:#1a1a1a}html{background-color:#f9fafb;color:var(--text-dark)}html.dark{background-color:#0a0a0a;color:#f5f5f5}a{text-decoration:none;color:inherit}.container{width:100%;margin:0 auto;padding:0 1.5rem}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}.content{margin-top:var(--nav-height)}nav{position:fixed;top:0;left:0;width:100%;z-index:1000;background-color:#fffc;backdrop-filter:blur(10px);border-bottom:1px solid #0000001a}html.dark nav{background-color:#000c;border-bottom:1px solid #ffffff1a}.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;height:var(--nav-height)}.brand{display:flex;align-items:center;gap:.75rem}.navbar__logo{font-size:1.5rem;font-weight:700;background:linear-gradient(45deg,#6366f1,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none}.version{font-size:.75rem;background-color:#0000001a;padding:.25rem .5rem;border-radius:9999px;color:var(--text-dark)}html.dark .version{background-color:#ffffff1a;color:var(--text-light)}.navbar__toggle{background:none;border:none;color:var(--text-dark);font-size:1.5rem;cursor:pointer;padding:.5rem;display:block}html.dark .navbar__toggle{color:var(--text-light)}.navbar__menu{display:none;flex-direction:column;gap:1rem;background-color:#ffffffe6;position:absolute;top:100%;left:0;right:0;padding:1rem}html.dark .navbar__menu{background-color:#000000e6}.navbar__menu.active{display:flex}.navbar__links{display:flex;flex-direction:column;list-style:none;gap:.5rem}.navbar__link{text-decoration:none;color:#666;padding:.75rem;text-align:center;transition:var(--transition)}.navbar__link.active{color:var(--text-dark);font-weight:500}.navbar__link:hover{background:linear-gradient(45deg,#ec4899,#8b5cf6,#6366f1);-webkit-background-clip:text;background-clip:text;color:transparent}html.dark .navbar__link{color:#999}html.dark .navbar__link.active{color:var(--text-light)}html.dark .navbar__link:hover{background:linear-gradient(45deg,#ec4899,#8b5cf6,#6366f1);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:1}.navbar__theme-toggle{background:none;border:none;cursor:pointer;padding:.5rem;color:var(--text-dark);display:flex;align-items:center;gap:.25rem}html.dark .navbar__theme-toggle{color:var(--text-light)}.navbar__theme-toggle:hover{background-color:#0000001a;border-radius:.5rem}html.dark .navbar__theme-toggle:hover{background-color:#ffffff1a}.navbar__theme-toggle svg{width:1.5rem;height:1.5rem}.icon-sun{display:none}.icon-moon{display:inline-block}html.dark .icon-sun{display:inline-block}html.dark .icon-moon{display:none}.github-link{background-color:#0000000d;padding:.5rem 1rem;border-radius:.5rem;text-decoration:none;color:var(--text-dark);transition:background-color .3s ease}html.dark .github-link{background-color:#ffffff0d;color:var(--text-light)}.github-link:hover{background-color:#0000001a}html.dark .github-link:hover{background-color:#ffffff1a}.gradient-text{background:linear-gradient(45deg,#6366f1,#ec4899);background-clip:text;-webkit-background-clip:text;color:transparent;font-weight:500}@media (min-width: 768px){.navbar__toggle{display:none}.navbar__menu{display:flex!important;flex-direction:row;align-items:center;position:static;gap:1.5rem;padding:0}.navbar__links{flex-direction:row;gap:1rem}}.text-center{text-align:center}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.justify-between{justify-content:space-between}.items-center{align-items:center}.w-5{width:1.25rem}.h-5{height:1.25rem}.space-x-4 > * + *{margin-left:1rem}.space-x-6 > * + *{margin-left:1.5rem}.space-x-8 > * + *{margin-left:2rem}.space-y-3 > * + *{margin-top:.75rem}.space-y-4 > * + *{margin-top:1rem}.space-y-6 > * + *{margin-top:1.5rem}.space-y-2 > * + *{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mt-8{margin-top:2rem}.pt-8{padding-top:2rem}.pt-32{padding-top:8rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-32{padding-top:8rem;padding-bottom:8rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.inset-0{top:0;right:0;bottom:0;left:0}.bottom-10{bottom:2.5rem}.left-1-2{left:50%}.transform{transform:translateX(-50%)}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.w-full{width:100%}.w-12{width:3rem}.h-12{height:3rem}.grid{display:grid}.gap-4{grid-gap:1rem}.gap-6{grid-gap:1.5rem}.gap-8{grid-gap:2rem}.gap-12{grid-gap:3rem}.md-grid-cols-2{grid-template-columns:1fr}.md-grid-cols-3{grid-template-columns:1fr}@media (min-width: 768px){.md-grid-cols-2{grid-template-columns:repeat(2,1fr)}.md-grid-cols-3{grid-template-columns:repeat(3,1fr)}.hidden-md{display:none}.md-flex{display:flex}}.lg-flex-row{flex-direction:column}.lg-w-1-2{width:100%}@media (min-width: 1024px){.lg-flex-row{flex-direction:row}.lg-w-1-2{width:50%}}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}.text-7xl{font-size:4.5rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-mono{font-family:monospace}.leading-tight{line-height:1.125}.opacity-0{opacity:0}.opacity-100{opacity:1}@keyframes float{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-20px) rotate(5deg)}}.floating-element{animation:float 6s ease-in-out infinite}@keyframes shine{0%{transform:translateX(-100%) rotate(45deg)}100%{transform:translateX(100%) rotate(45deg)}}@keyframes slideFadeIn{to{opacity:1;transform:translateX(0)}}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}@keyframes waveAnim{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}.scroll-indicator{animation:bounce 2s infinite}.gradient-border{position:relative;background:linear-gradient(45deg,#6366f1,#ec4899);padding:2px;display:inline-block}.gradient-border .bg-black{background:#fff;color:#000;padding:.5rem 1rem;border-radius:9999px}html.dark .gradient-border .bg-black{background:#000;color:#fff}.gradient-text{background:linear-gradient(45deg,#6366f1,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-button{background:linear-gradient(45deg,#6366f1,#ec4899);position:relative;overflow:hidden;transition:all .3s ease;border:none;border-radius:9999px;cursor:pointer;color:#fff}.hero-button:hover{transform:translateY(-2px);box-shadow:0 10px 30px #6366f14d}.hero-button::after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 25%,#fff3 50%,transparent 75%);transform:rotate(45deg);animation:shine 3s infinite}.feature-card{backdrop-filter:blur(10px);border:1px solid #ffffff1a;transition:all .3s ease}.feature-card:hover{transform:translateY(-5px);border-color:#fff3;box-shadow:0 10px 30px #00000080}.feature-gradient-border{background:var(--primary-gradient);padding:2px;border-radius:1rem;overflow:hidden;transition:all .3s ease}.feature-gradient-border:hover{transform:translateY(-5px);box-shadow:0 10px 30px #0000001a}html.dark .feature-gradient-border:hover{box-shadow:0 10px 30px #00000080}.learning-path{border-radius:1rem;overflow:hidden;transition:all .3s ease}.learning-path:hover{transform:translateY(-5px);box-shadow:0 10px 30px #0000001a}html.dark .learning-path:hover{box-shadow:0 10px 30px #00000080}.bg-secondary{background:var(--bg-secondary);height:100%}html.dark .bg-secondary{background:var(--bg-secondary-dark)}.code-line{opacity:0;transform:translateX(-20px);animation:slideFadeIn .5s forwards}.bg-code-preview{background:var(--bg-secondary)}html.dark .bg-code-preview{background:var(--bg-secondary-dark)}.code-tabs{display:flex;gap:.5rem;padding:1rem 1rem 0}.code-tab{background:#ffffff0d;border:none;color:var(--text-primary);padding:.5rem 1rem;border-radius:.5rem;cursor:pointer;transition:all .3s ease;font-family:inherit;font-size:.875rem}.code-tab.active{background:linear-gradient(45deg,#6366f1,#ec4899);color:#fff}.code-tab:hover:not(.active){background:#ffffff1a}.code-content{display:none;padding:1.5rem}.code-content.active{display:block}pre{white-space:pre-wrap;word-wrap:break-word;line-height:1.6}.code-preview-container pre{background:none!important;padding:0!important}html.dark .code-tab{background:#ffffff0d}.code-preview-container{background:#f3f3f3;padding:2rem;border-radius:1.5rem;box-shadow:0 25px 50px -12px #00000040}html.dark .code-preview-container{background:#1a1a1a}.window-controls{display:flex;align-items:center;margin-bottom:1rem;gap:.5rem}.window-button{width:1rem;height:1rem;border-radius:9999px}.window-button.red{background:#ef4444}.window-button.yellow{background:#eab308}.window-button.green{background:#22c55e}.bg-waves{position:absolute;width:200%;height:100%;opacity:.15;animation:waveAnim 20s linear infinite}.bg-black-80{background:#000c}.bg-black-50{background:#00000080}.bg-white-5{background:#ffffff0d}.bg-white-10{background:#ffffff1a}.bg-white-50{background:#ffffff80}.bg-gray-50{background:#f9fafb}.bg-gray-100{background:#f3f3f3}.border-white-10{border:1px solid #ffffff1a}h1,h2,h3{line-height:1.2}nav.navbar{width:100%;background-color:#ffffff80;backdrop-filter:blur(10px);border-bottom:1px solid #0000001a}html.dark nav.navbar{width:100%;background-color:#00000080;backdrop-filter:blur(10px);border-bottom:1px solid #ffffff1a}.hover-bg-white-10:hover{background:#ffffff1a}.hover-text-purple-400:hover{color:#9f7aea}.hover-text-pink-400:hover{color:#ec4899}.hover-text-blue-400:hover{color:#3b82f6}.transition-colors{transition:background-color 0.3s,color .3s}.min-h-screen{min-height:100vh}html.dark-bg-1a1a1a{background:#1a1a1a}html.dark-border-white-10{border:1px solid #ffffff1a}.text-green-400{color:#34d399}.text-blue-400{color:#3b82f6}.text-pink-400{color:#ec4899}.text-purple-400{color:#c084fc}.text-orange-400{color:#fb923c}.text-yellow-400{color:#facc15}.border-gray-200{border-color:#e5e7eb}.text-gray-300{color:#d1d5db}.text-gray-400{color:#9ca3af}.cta-button{cursor:pointer;border-radius:9999px;transition:.3s all;border:none}.cta-button:hover{transform:translateY(-2px)}.cta-button:active{transform:translateY(0)}.button-watch-demo{background:#0000000d;color:var(--text-primary)}.button-watch-demo:hover{background:#0000001a}html.dark .button-watch-demo{background:#ffffff1a;color:var(--text-primary)}html.dark .button-watch-demo:hover{background:#fff3}.animate-on-scroll{transition:all .7s}.opacity-0.translate-y-10{opacity:0;transform:translateY(2.5rem)}.opacity-100.translate-y-0{opacity:1;transform:translateY(0)}.border{border:1px solid #ffffff1a}