@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&family=Space+Mono:wght@400;700&display=swap";:root{--bg-base:#000;--bg-secondary:#0d0d0d;--bg-tertiary:#1a1a1a;--bg-hover:#262626;--accent-primary:#d4af37;--accent-hover:#c9a227;--accent-dim:#d4af3714;--text-primary:#fff;--text-secondary:#d0d0d0;--text-tertiary:#a0a0a0;--border-subtle:#d4af3714;--border-light:#d4af3726;--success:#10b981;--error:#ef4444;--font-display:"Space Mono", monospace;--font-body:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"Fira Code", monospace;--sp-xs:4px;--sp-sm:8px;--sp-md:16px;--sp-lg:24px;--sp-xl:32px;--sp-2xl:48px;--sp-3xl:64px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);letter-spacing:-.02em;font-weight:700;line-height:1.2}h1{font-size:3.5rem}h2{font-size:2.25rem}h3{font-size:1.5rem}h4{font-size:1.125rem}p{color:var(--text-secondary)}a{color:var(--accent-primary);text-decoration:none;transition:color .2s}a:hover{color:var(--accent-hover)}.app-header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);z-index:1000;height:72px;padding:0 var(--sp-lg);background:#000000e6;justify-content:space-between;align-items:center;display:flex;position:fixed;top:0;left:0;right:0}.header-logo{font-family:var(--font-display);background:linear-gradient(135deg, #fff 0%, var(--accent-primary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;flex:1;font-size:20px;font-weight:700}.header-actions{align-items:center;gap:var(--sp-md);display:flex}.header-btn{padding:var(--sp-md) var(--sp-lg);border-radius:var(--radius-lg);font-family:var(--font-display);cursor:pointer;align-items:center;gap:var(--sp-sm);white-space:nowrap;border:none;font-size:.95rem;font-weight:600;transition:all .2s;display:flex}.header-submit{background:var(--accent-primary);color:#000}.header-submit:hover{background:var(--accent-hover);transform:translateY(-2px)}.header-exit{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-light)}.header-exit:hover{background:var(--bg-hover);border-color:var(--accent-primary);color:var(--accent-primary)}.section{padding:var(--sp-3xl) var(--sp-lg);position:relative}.section-container{max-width:1200px;margin:0 auto}.section-header{text-align:center;margin-bottom:var(--sp-3xl)}.section-title{margin-bottom:var(--sp-lg)}.section-subtitle{max-width:600px;color:var(--text-tertiary);margin:0 auto;font-size:1.125rem}.hero-section{justify-content:center;align-items:center;min-height:100vh;padding-top:80px;display:flex;position:relative;overflow:hidden}.hero-bg-orb{opacity:.05;pointer-events:none;filter:blur(80px);border-radius:50%;position:absolute}.hero-bg-orb.orb-1{background:var(--accent-primary);width:600px;height:600px;top:10%;left:10%}.hero-bg-orb.orb-2{background:var(--accent-primary);width:400px;height:400px;bottom:20%;right:15%}.hero-content{z-index:2;text-align:center;max-width:800px;margin:0 auto;position:relative}.hero-title{margin-bottom:var(--sp-xl);font-size:3.5rem;line-height:1.1}.hero-title .accent-text{color:var(--accent-primary)}.hero-description{color:var(--text-secondary);margin-bottom:var(--sp-2xl);font-size:1.125rem;line-height:1.8}.hero-form{margin-bottom:var(--sp-2xl)}.form-group{gap:var(--sp-sm);max-width:600px;margin:0 auto;display:flex}.form-input{padding:var(--sp-md);background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-lg);color:var(--text-primary);font-family:var(--font-body);flex:1;font-size:1rem;transition:all .2s}.form-input:focus{border-color:var(--accent-primary);background:var(--bg-tertiary);outline:none}.form-input::placeholder{color:var(--text-muted)}.form-button{padding:var(--sp-md) var(--sp-lg);background:var(--accent-primary);color:#000;border-radius:var(--radius-lg);font-family:var(--font-display);cursor:pointer;align-items:center;gap:var(--sp-sm);white-space:nowrap;border:none;font-weight:700;transition:all .2s;display:flex}.form-button:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-2px)}.form-button:disabled{opacity:.6;cursor:not-allowed}.spinner{border:2px solid #0003;border-top-color:#000;border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.form-error{color:var(--error);margin-top:var(--sp-sm);font-size:.875rem}.hero-trust{color:var(--text-tertiary);font-size:.875rem}.problem-section{background:linear-gradient(180deg, transparent 0%, var(--accent-dim) 100%)}.problem-grid{gap:var(--sp-lg);margin-bottom:var(--sp-3xl);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.problem-card{padding:var(--sp-lg);background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);position:relative}.problem-card h3{margin-bottom:var(--sp-sm)}.problem-card p{color:var(--text-tertiary);font-size:.95rem}.card-dot{background:var(--accent-primary);width:8px;height:8px;margin-bottom:var(--sp-md);border-radius:50%}.solution-highlight{padding:var(--sp-xl);background:linear-gradient(135deg, var(--accent-dim) 0%, transparent 100%);border:1px solid var(--border-light);border-radius:var(--radius-lg);text-align:center;max-width:700px;margin:0 auto}.solution-highlight p{font-size:1.1rem;line-height:1.8}.features-grid{gap:var(--sp-lg);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));display:grid}.feature-card{padding:var(--sp-xl);background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);text-align:center;transition:all .3s}.feature-card:hover{border-color:var(--border-light);transform:translateY(-4px)}.feature-icon{background:var(--accent-dim);border-radius:var(--radius-lg);width:48px;height:48px;margin:0 auto var(--sp-lg);color:var(--accent-primary);justify-content:center;align-items:center;display:flex}.feature-card h3{margin-bottom:var(--sp-sm);font-size:1.25rem}.feature-card p{color:var(--text-tertiary);font-size:.95rem}.steps-container{gap:var(--sp-lg);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:900px;margin:0 auto;display:grid}.step-card{padding:var(--sp-xl);background:linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);position:relative}.step-number{font-family:var(--font-display);color:var(--accent-primary);margin-bottom:var(--sp-md);opacity:.8;font-size:2.5rem}.step-card h3{margin-bottom:var(--sp-sm);font-size:1.25rem}.step-card p{color:var(--text-tertiary);font-size:.95rem}.step-connector{display:none}@media (width>=768px){.steps-container{gap:var(--sp-xl);display:flex}.step-card{flex:1;position:relative}.step-card:after{content:"";width:var(--sp-xl);background:var(--border-light);height:2px;position:absolute;top:60px;left:100%}.step-card:last-child:after{display:none}}.demo-mockup{max-width:800px;margin:0 auto}.mockup-frame{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 20px 60px #0000004d}.mockup-header{gap:var(--sp-sm);padding:var(--sp-md);background:var(--bg-tertiary);border-bottom:1px solid var(--border-subtle);display:flex}.mockup-dot{background:var(--border-light);border-radius:50%;width:10px;height:10px}.mockup-content{padding:var(--sp-xl)}.mockup-line{background:linear-gradient(90deg, var(--border-light) 0%, transparent 100%);border-radius:var(--radius-sm);height:12px}.mockup-label{color:var(--accent-primary);text-transform:uppercase;margin-bottom:var(--sp-sm);font-size:.75rem;font-weight:600}.mockup-exercise{margin-top:var(--sp-xl)}.mockup-option{background:var(--border-light);border-radius:var(--radius-sm);height:10px;margin-bottom:var(--sp-sm)}.mockup-code{padding:var(--sp-lg);border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:#d4af370a}.stats-section{background:linear-gradient(180deg, var(--accent-dim) 0%, transparent 100%)}.stats-grid{gap:var(--sp-lg);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.stat-card{padding:var(--sp-xl);background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-lg);text-align:center}.stat-value{font-family:var(--font-display);color:var(--accent-primary);margin-bottom:var(--sp-sm);font-size:1.75rem;font-weight:700}.stat-label{color:var(--text-tertiary);font-size:.95rem}.faq-list{max-width:700px;margin:0 auto}.faq-item{margin-bottom:var(--sp-lg);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}.faq-question{width:100%;padding:var(--sp-lg);background:var(--bg-secondary);cursor:pointer;justify-content:space-between;align-items:center;gap:var(--sp-md);color:var(--text-primary);font-size:1rem;font-weight:600;font-family:var(--font-body);border:none;transition:all .2s;display:flex}.faq-question:hover{background:var(--bg-tertiary)}.faq-question.open{background:var(--bg-tertiary);border-bottom:1px solid var(--border-light)}.faq-question svg{color:var(--accent-primary);flex-shrink:0;transition:transform .3s}.faq-question.open svg{transform:rotate(180deg)}.faq-answer{background:var(--bg-tertiary);padding:var(--sp-lg);color:var(--text-secondary);border-top:1px solid var(--border-subtle)}.faq-answer p{margin:0;line-height:1.8}.footer{background:var(--bg-secondary);border-top:1px solid var(--border-subtle);padding:var(--sp-3xl) var(--sp-lg) var(--sp-lg);position:relative}.footer-content{max-width:1200px;margin:0 auto var(--sp-2xl);gap:var(--sp-2xl);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.footer-section h3,.footer-section h4{margin-bottom:var(--sp-md);font-size:1rem}.footer-section p{margin-bottom:var(--sp-lg);font-size:.95rem}.footer-section ul{gap:var(--sp-sm);flex-direction:column;list-style:none;display:flex}.footer-section a{color:var(--text-secondary);font-size:.95rem;transition:color .2s}.footer-section a:hover{color:var(--accent-primary)}.social-links{gap:var(--sp-md);display:flex}.social-links a{background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);width:40px;height:40px;color:var(--text-primary);justify-content:center;align-items:center;transition:all .2s;display:flex}.social-links a:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.footer-bottom{text-align:center;padding-top:var(--sp-lg);border-top:1px solid var(--border-subtle);color:var(--text-tertiary);font-size:.875rem}.landing-page{width:100%}.app{flex-direction:column;min-height:100vh;display:flex}.error-box{padding:var(--sp-md) var(--sp-lg);border:1px solid var(--error);color:#fca5a5;border-radius:var(--radius-md);margin:var(--sp-lg) var(--sp-lg) 0;background:#ef44441a;font-size:.9rem}.chapter-layout{flex:1;grid-template-columns:300px 1fr;gap:0;width:100%;height:100vh;padding:72px 0 0;display:grid}@media (width<=768px){.chapter-layout{grid-template-columns:1fr;padding:72px 0 0}.chapter-sidebar{border-right:none;border-bottom:1px solid var(--border-subtle);height:auto;max-height:200px}}.chapter-sidebar{background:var(--bg-secondary);border:none;border-right:1px solid var(--border-subtle);padding:var(--sp-lg);gap:var(--sp-lg);border-radius:0;flex-direction:column;height:calc(100vh - 72px);display:flex;overflow-y:auto}.progress-section{padding:var(--sp-lg);background:linear-gradient(135deg, var(--accent-dim) 0%, transparent 100%);border:1px solid var(--border-light);border-radius:var(--radius-lg)}.progress-header{margin-bottom:var(--sp-md);justify-content:space-between;align-items:center;display:flex}.progress-title{color:var(--text-primary);margin:0;font-size:1rem}.progress-count{font-family:var(--font-display);color:var(--accent-primary);font-size:.9rem;font-weight:600}.progress-bar-container{background:var(--bg-tertiary);width:100%;height:8px;margin-bottom:var(--sp-md);border:1px solid var(--border-subtle);border-radius:4px;overflow:hidden}.progress-bar{background:linear-gradient(90deg, var(--accent-primary) 0%, #e6c200 100%);border-radius:4px;height:100%;transition:width .4s}.progress-details{gap:var(--sp-md);font-size:.85rem;display:flex}.progress-item{gap:var(--sp-xs);flex-direction:column;flex:1;display:flex}.progress-label{color:var(--text-tertiary);text-transform:uppercase;font-size:.75rem;font-weight:600}.progress-value{color:var(--text-primary);font-family:var(--font-display);font-weight:600}.chapter-list{gap:var(--sp-sm);flex-direction:column;flex:1;min-height:200px;display:flex}.sidebar-heading{text-transform:uppercase;color:var(--text-tertiary);margin:0 0 var(--sp-md) 0;letter-spacing:.05em;font-size:.85rem;font-weight:600}.chapter-item{padding:var(--sp-md);background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;gap:var(--sp-sm);flex-direction:column;transition:all .2s;display:flex}.chapter-item:hover{background:var(--bg-hover);border-color:var(--border-light)}.chapter-item.active{background:var(--accent-dim);border-color:var(--accent-primary)}.chapter-content{gap:var(--sp-xs);flex-direction:column;display:flex}.chapter-header{justify-content:space-between;align-items:center;gap:var(--sp-sm);display:flex}.chapter-number{text-transform:uppercase;color:var(--accent-primary);font-size:.75rem;font-weight:600}.chapter-title{color:var(--text-primary);font-size:.95rem;font-weight:500;line-height:1.3}.chapter-item.active .chapter-title{color:var(--accent-primary)}.chapter-time{color:var(--text-tertiary);font-size:.75rem}.submit-btn{width:100%;margin-top:var(--sp-lg);padding:var(--sp-md);background:var(--accent-primary);color:#000;border-radius:var(--radius-md);cursor:pointer;font-weight:600;font-family:var(--font-display);border:none;transition:all .2s}.submit-btn:hover{background:var(--accent-hover);transform:translateY(-2px)}.exercise-panel{background:var(--bg-base);padding:var(--sp-xl);border:none;border-radius:0;height:calc(100vh - 72px);overflow-y:auto}.video-player-container{width:100%;margin-bottom:var(--sp-2xl);border-radius:var(--radius-lg);background:var(--bg-secondary);border:1px solid var(--border-subtle);overflow:hidden;box-shadow:0 4px 12px #0000004d}.video-player-container iframe{border-radius:var(--radius-lg);display:block}.chapter-header-section{margin-bottom:var(--sp-2xl);padding-bottom:var(--sp-xl);border-bottom:1px solid var(--border-subtle)}.exercise-card{margin-bottom:var(--sp-2xl);padding:var(--sp-lg);background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}.exercise-header{margin-bottom:var(--sp-lg);justify-content:space-between;align-items:center;display:flex}.exercise-badge{text-transform:uppercase;padding:var(--sp-xs) var(--sp-sm);border-radius:var(--radius-sm);background:var(--accent-dim);color:var(--accent-primary);font-size:.75rem;font-weight:600}.exercise-num{color:var(--text-tertiary);font-size:.85rem}.exercise-question{margin-bottom:var(--sp-lg);font-size:1.05rem;font-weight:500}.mcq-options{gap:var(--sp-sm);margin-bottom:var(--sp-lg);flex-direction:column;display:flex}.mcq-option{padding:var(--sp-md);background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;color:var(--text-primary);text-align:left;align-items:center;gap:var(--sp-md);font-family:var(--font-body);font-size:.95rem;transition:all .2s;display:flex}.mcq-option:hover:not(:disabled){border-color:var(--border-light);background:var(--bg-secondary)}.mcq-option.selected{border-color:var(--accent-primary);background:var(--accent-dim)}.mcq-option.correct{border-color:var(--success);background:#10b9811a}.mcq-option.wrong{border-color:var(--error);background:#ef44441a}.option-dot{border:2px solid var(--border-light);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;font-size:.8rem;font-weight:700;display:flex}.mcq-option.selected .option-dot{border-color:var(--accent-primary);background:var(--accent-primary);color:#000}.mcq-option.correct .option-dot{border-color:var(--success);background:var(--success);color:#fff}.mcq-option.wrong .option-dot{border-color:var(--error);background:var(--error);color:#fff}.mcq-explanation{padding:var(--sp-md);background:var(--bg-base);border-left:2px solid var(--accent-primary);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.9rem}.monaco-wrapper{background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:var(--sp-lg);overflow:hidden}.monaco-toolbar{padding:var(--sp-sm) var(--sp-md);background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.monaco-dots{gap:var(--sp-xs);display:flex}.monaco-dots span{border-radius:50%;width:10px;height:10px}.monaco-lang{color:var(--text-tertiary);text-transform:uppercase;font-size:.75rem;font-weight:600}.btn-run{padding:var(--sp-md) var(--sp-lg);background:var(--accent-primary);color:#000;border-radius:var(--radius-md);cursor:pointer;font-weight:600;font-family:var(--font-display);border:none;width:100%;transition:all .2s}.btn-run:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-2px)}.btn-run:disabled{opacity:.6;cursor:not-allowed}.run-output{padding:var(--sp-md);background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-family:var(--font-mono);color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;max-height:150px;margin-top:var(--sp-md);font-size:.85rem;overflow-y:auto}.run-output.error-output{border-color:var(--error);color:#fca5a5}.modal-overlay{z-index:2000;background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--sp-xl);max-width:600px;max-height:80vh;overflow-y:auto}.modal-title{margin-bottom:var(--sp-lg);font-size:1.5rem}.score-summary{background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:var(--sp-lg)}.score-row{padding:var(--sp-lg);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.score-row:last-child{border-bottom:none}.score-row.score-total{background:var(--accent-dim);font-weight:600}.score-label{color:var(--text-secondary)}.score-value{font-family:var(--font-display);color:var(--accent-primary);font-size:1.25rem}.btn-close-modal{width:100%;padding:var(--sp-md);background:var(--accent-primary);color:#000;border-radius:var(--radius-md);cursor:pointer;font-weight:600;font-family:var(--font-display);border:none;transition:all .2s}.btn-close-modal:hover{background:var(--accent-hover)}.confetti-container{pointer-events:none;z-index:1000;width:100%;height:100%;position:fixed;top:0;left:0}.confetti{background:var(--accent-primary);border-radius:50%;width:8px;height:8px;animation:2.5s ease-out forwards confetti-fall;position:absolute}@keyframes confetti-fall{to{opacity:0;transform:translateY(400px)rotate(720deg)}}.confetti:first-child{animation-duration:2.5s;animation-delay:0s;left:20%}.confetti:nth-child(2){animation-duration:2.7s;animation-delay:.1s;left:30%}.confetti:nth-child(3){animation-duration:2.4s;animation-delay:.2s;left:40%}.confetti:nth-child(4){animation-duration:2.6s;animation-delay:50ms;left:50%}.confetti:nth-child(5){animation-duration:2.8s;animation-delay:.15s;left:60%}.confetti:nth-child(6){animation-duration:2.5s;animation-delay:.1s;left:70%}.confetti:nth-child(7){animation-duration:2.7s;animation-delay:0s;left:80%}.confetti:nth-child(8){animation-duration:2.6s;animation-delay:80ms;left:25%}.confetti:nth-child(9){animation-duration:2.5s;animation-delay:.12s;left:55%}.confetti:nth-child(10){animation-duration:2.9s;animation-delay:60ms;left:75%}@media (width<=768px){h1{font-size:2.5rem}h2{font-size:1.75rem}.section{padding:var(--sp-2xl) var(--sp-md)}.form-group{flex-direction:column}.hero-section{padding-top:80px}}@media (width<=480px){h1{font-size:2rem}h2{font-size:1.5rem}.hero-title{font-size:2rem}.section{padding:var(--sp-xl) var(--sp-md)}.problem-grid,.features-grid,.stats-grid{grid-template-columns:1fr}}