:root{--primary-color:#3b82f6;--accent-color:#b8860b;--orange-color:#d99734;--orange-dark:#b45309;--whatsapp-color:#25d366;--star-color:#fbbf24;--bg-white:#ffffff;--bg-light:#f8fafc;--bg-light-blue:#eff6ff;--bg-card:#f8fbff;--text-color:#171717;--text-main:#334155;--text-dark:#1e293b;--text-navy:rgb(24, 16, 89);--text-muted:#64748b;--text-light:#94a3b8;--text-slate:#475569;--text-white:#ffffff;--text-link:#2563eb;--border-light:#e2e8f0;--border-slate:#f1f5f9;--border-mid:#cbd5e1;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);--alert-bg:#fef9c3;--alert-icon:#ca8a04;--alert-text:#854d0e;--sidevat-inactive:rgba(255, 255, 255, 0.19);--header-height:80px;--max-width:95%;--sp-xs:0.25rem;--sp-sm:0.5rem;--sp-md:0.75rem;--sp-base:1rem;--sp-lg:1.25rem;--sp-xl:1.5rem;--sp-2xl:2rem;--sp-3xl:2.5rem;--sp-4xl:3rem;--fs-xs:12px;--fs-sm:14px;--fs-base:16px;--fs-md:18px;--fs-lg:20px;--fs-xl:24px;--fs-2xl:30px;--fs-3xl:36px;--fs-4xl:48px;--fs-6xl:72px;--font-header-text:8.5em;--alert-bg:#fef9c3;--alert-icon:#ca8a04;--alert-text:#854d0e}*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Source Sans 3",sans-serif;background-color:var(--bg-white);color:var(--text-color);line-height:1.5;-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}ul{list-style:none}.main-app{min-height:calc(100vh - var(--header-height));width:100%;max-width:var(--max-width);margin:0 auto;padding:20px 40px}.full-width-app{min-height:calc(100vh - var(--header-height));width:100%;max-width:100%;margin:0;padding:0}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 20px}@media (max-width:768px){.main-app{padding:20px 0}}.dynamic-block-container{margin-top:48px;margin-bottom:48px}.practice-card{background-color:#f1f5f9;padding:32px;margin-bottom:24px}.practice-code-wrapper{background-color:#fff;padding:24px;border-left:2px solid var(--primary-color,#3b82f6);margin-bottom:24px;color:var(--text-dark,#1e293b)}.code-pre{margin:0;font-family:"Fira Code",monospace;font-size:15px;white-space:pre-wrap;word-wrap:break-word;overflow-x:auto}.center-flex{display:flex;justify-content:center}.try-it-btn{background-color:var(--orange-color,#d99734);color:#fff;padding:12px 48px;border:none;font-weight:700;font-size:16px;cursor:pointer;border-radius:4px;transition:opacity .2s}.try-it-btn:hover{opacity:.9}.example-card{margin-bottom:48px}.example-title{font-size:24px;font-weight:700;color:var(--text-dark,#1e293b);margin-bottom:0}.example-desc{margin-bottom:24px}.example-code-wrapper{background-color:#fdf2f8;padding:24px;color:#be185d;margin-bottom:24px}.example-img{max-width:100%;height:auto;border:1px solid var(--border-light,#e2e8f0);display:block}@keyframes fadeIn{from{opacity:0}to{opacity:1}}main.main-app{animation:fadeIn .4s ease-out}.scrolling-banner{background-color:#f8fafc;padding:12px 0;margin-bottom:24px;overflow:hidden;white-space:nowrap;width:100%;border-radius:4px}.scrolling-text{display:inline-block;padding-left:100%;animation:marquee 20s linear infinite;color:#475569;font-size:15px}.scrolling-text a{color:#3b82f6;text-decoration:none;font-weight:500}.scrolling-text a:hover{text-decoration:underline}.scrolling-banner:hover .scrolling-text{animation-play-state:paused}@keyframes marquee{0%{transform:translate(0,0)}100%{transform:translate(-100%,0)}}:root{--auth-primary:#9b51e0;--auth-primary-hover:#8e44ad;--auth-bg:#f4f7f6;--auth-text:#2d3748;--auth-text-light:#718096;--auth-border:#e2e8f0;--auth-fb:#3b5998;--auth-tw:#00acee}body{margin:0}.auth-page{min-height:80vh;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,sans-serif}.auth-container{display:flex;width:100%;max-width:950px;background:#fff;border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,.08);overflow:hidden;position:relative;min-height:550px}.auth-form-section{width:50%;padding:3rem 4rem;display:flex;flex-direction:column;justify-content:center;z-index:2}.auth-header{margin-bottom:2.5rem}.auth-header h1{font-size:2.2rem;font-weight:700;color:var(--auth-text);margin:0 0 .5rem 0}.auth-header p{color:var(--auth-text-light);font-size:.95rem;margin:0;white-space:nowrap}.auth-header a{color:var(--auth-primary);text-decoration:none;font-weight:500}.auth-form{display:flex;flex-direction:column;gap:1.25rem;max-width:400px}.form-group input{width:100%;padding:.85rem 1.25rem;border-radius:8px;border:1px solid var(--auth-border);font-size:.95rem;outline:0;transition:all .2s;box-sizing:border-box;color:var(--auth-text)}.form-group input::placeholder{color:#a0aec0}.form-group input:focus{border-color:var(--auth-primary);box-shadow:0 0 0 3px rgba(155,81,224,.15)}.form-actions{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--auth-text-light);margin-top:-.25rem}.remember-me{display:flex;align-items:center;gap:.5rem;cursor:pointer}.remember-me input{accent-color:var(--auth-primary);width:14px;height:14px;cursor:pointer}.forgot-password{color:var(--auth-text-light);text-decoration:none}.forgot-password:hover{color:var(--auth-primary)}.auth-btn{background:var(--auth-primary);color:#fff;padding:.85rem 2rem;border-radius:50px;border:none;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s;margin-top:1rem;width:fit-content;min-width:140px;text-align:center;box-shadow:0 4px 10px rgba(155,81,224,.3);white-space:nowrap}.auth-btn:hover{background:var(--auth-primary-hover);transform:translateY(-2px);box-shadow:0 6px 15px rgba(155,81,224,.4)}.auth-social{margin-top:2rem;display:flex;align-items:center;gap:1rem}.auth-social span{color:var(--auth-text-light);font-size:.85rem}.social-buttons{display:flex;gap:.75rem}.social-btn{width:45px;height:32px;border-radius:16px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:#fff;font-size:1rem}.social-btn.fb{background:var(--auth-fb)}.social-btn.tw{background:var(--auth-tw)}.social-btn.go{background:#fff;border:1px solid var(--auth-border)}.social-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.1)}.auth-image-section{position:absolute;top:0;right:0;bottom:0;width:60%;background:linear-gradient(135deg,#a855f7 0,#3b82f6 100%);background-image:radial-gradient(circle at 15% 50%,rgba(255,255,255,.08) 0,transparent 50%),radial-gradient(circle at 85% 30%,rgba(255,255,255,.08) 0,transparent 50%),linear-gradient(135deg,#9b51e0 0,#3498db 100%);clip-path:polygon(10% 0,100% 0,100% 100%,25% 100%);display:flex;align-items:center;justify-content:flex-end;padding:3rem;color:#fff;z-index:1}.auth-image-content{text-align:right;max-width:280px}.auth-image-content h2{font-size:3.5rem;font-weight:800;line-height:1.1;margin:0 0 1rem 0;text-shadow:0 2px 10px rgba(0,0,0,.1)}.auth-image-content p{font-size:.95rem;line-height:1.6;opacity:.9;text-shadow:0 1px 5px rgba(0,0,0,.1)}.auth-error{background:#fee2e2;color:#b91c1c;padding:.75rem 1rem;border-radius:8px;font-size:.85rem;font-weight:500;margin-bottom:1.5rem;display:none}@media (max-width:900px){.auth-header p{white-space:normal}.auth-container{flex-direction:column-reverse;min-height:auto}.auth-form-section{width:100%;padding:2.5rem 1.5rem}.auth-form{max-width:100%}.auth-image-section{position:relative;width:100%;height:220px;clip-path:polygon(0 0,100% 0,100% 85%,0 100%);justify-content:center;padding:2rem;text-align:center}.auth-image-content{text-align:center;max-width:100%}.auth-image-content h2{font-size:2.2rem}}.lesson-container{padding:var(--sp-4xl);width:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:#333}.course-title{font-size:var(--fs-3xl);font-weight:800;color:#181059;margin-bottom:var(--sp-xl)}.button-row{display:flex;gap:var(--sp-md);margin-bottom:var(--sp-2xl);flex-wrap:wrap}.action-btn{padding:var(--sp-sm) var(--sp-base);border:1px solid var(--border-light);background:var(--bg-white);border-radius:6px;font-size:var(--fs-xs);color:var(--text-muted);cursor:pointer;transition:all .2s ease;font-weight:500}.action-btn:hover{background:var(--bg-light);border-color:var(--border-mid);color:var(--text-dark)}.action-btn.btn-highlight{border-color:var(--text-link);color:var(--text-link)}.action-btn--video{color:#64748b;font-weight:500;background:#fff;text-transform:capitalize}.action-btn--video:hover{opacity:.85}.chapter-subtitle{color:var(--primary-color);font-size:var(--fs-md);font-weight:600;margin-bottom:var(--sp-sm)}.lesson-breadcrumb{font-size:15px;color:#3b82f6;font-weight:600;margin-bottom:8px;display:block}.lesson-heading{font-size:var(--fs-3xl);font-weight:700;color:var(--text-dark);letter-spacing:-.02em}.content-area code:not(pre code){color:#d63384;background:0 0;padding:0;font-family:inherit;font-weight:400;font-size:large}.content-area p{font-size:var(--fs-md);line-height:1.6;margin-bottom:var(--sp-base);color:var(--text-color)}.content-area ul{padding-left:var(--sp-lg);margin-left:var(--sp-sm);margin-bottom:var(--sp-xl);list-style-type:disc}.content-area ul li{font-size:var(--fs-md);line-height:1.6;margin-bottom:var(--sp-md);color:#333}.content-area ol{padding-left:var(--sp-2xl);margin-bottom:var(--sp-xl);list-style-type:decimal}.content-area ol li{font-size:var(--fs-md);line-height:1.6;margin-bottom:var(--sp-md);color:#333;padding-left:var(--sp-sm)}.content-area h4{font-size:var(--fs-xl);font-weight:700;color:var(--text-dark)}.content-area pre code{color:var(--text-dark);font-size:15px}.content-area .token.atrule,.content-area .token.keyword,.content-area .token.selector{color:var(--primary-color)}.login-alert{background-color:rgba(211,147,49,.17);border-radius:8px;padding:var(--sp-base) var(--sp-lg);display:flex;gap:var(--sp-base);align-items:center;margin:var(--sp-3xl) 0;width:fit-content}.alert-icon{color:var(--alert-icon);flex-shrink:0}.login-alert p{margin:0;font-size:var(--fs-sm);color:var(--alert-text)}.text-link{color:var(--text-link);text-decoration:underline;font-weight:500}.lesson-footer-link{background:0 0;border:none;border-radius:0;padding:0;display:flex;width:fit-content;align-items:center;gap:var(--sp-md);margin:var(--sp-3xl) 0}.play-icon-large{color:var(--text-navy);display:flex;align-items:center}.footer-link-text{font-size:var(--fs-md);color:#1e293b;font-weight:500;flex:1}.lock-icon{color:#1e293b}.bottom-nav{display:flex;justify-content:space-between}.nav-btn-outline{padding:var(--sp-sm) var(--sp-xl);border:1px solid var(--border-light);background:var(--bg-white);border-radius:6px;font-size:var(--fs-sm);color:var(--text-muted);cursor:pointer;transition:all .2s ease}.nav-btn-outline:hover{background:var(--bg-light);border-color:var(--border-mid)}.comments-container{border-top:1px solid var(--border-light);margin-top:var(--sp-4xl);padding-top:var(--sp-2xl)}.comments-header{display:flex;align-items:baseline;gap:var(--sp-xs);margin-bottom:var(--sp-lg)}.comments-title{font-size:var(--fs-xl);font-weight:700;color:var(--text-color)}.comments-count{font-size:var(--fs-md);color:var(--text-light);font-weight:400}.comments-not-found{font-size:var(--fs-sm);color:var(--text-slate);margin-bottom:var(--sp-4xl)}.course-page-wrapper{display:flex;min-height:calc(100vh - 80px)}.page-body{display:flex;flex:1;width:100%;min-width:0}.sidebar-container{width:320px;min-width:320px;flex-shrink:0}.lesson-content-main{flex:1;background-color:var(--bg-white);overflow-y:auto;overflow-x:hidden}.mobile-course-header{display:none;background-color:#968aee;padding:15px 20px;position:fixed;top:85px;z-index:1001;border-bottom:1px solid rgba(255,255,255,.1)}.sidebar-toggle-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:8px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.sidebar-toggle-btn:hover{background:rgba(255,255,255,.2)}.sidebar-toggle-btn.active{background:var(--primary-color);border-color:var(--primary-color)}.sidebar-toggle-btn .close-icon{display:none}.sidebar-toggle-btn.active .menu-icon{display:none}.sidebar-toggle-btn.active .close-icon{display:block}.sidebar{width:320px;background-color:#181059;color:var(--text-white);height:calc(100vh - 80px);position:sticky;top:80px;overflow-y:auto;border-right:1px solid rgba(255,255,255,.1);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.35) transparent;transition:transform .3s ease}.sidebar-nav{width:100%;max-width:100%}.sidebar::-webkit-scrollbar{width:6px;height:0}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:999px}.sidebar-header{padding:var(--sp-xl);border-bottom:1px solid rgba(255,255,255,.1)}.sidebar-header h3{font-size:var(--fs-md);font-weight:700}.sidebar-chapter-title{padding:var(--sp-base) var(--sp-xl);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;list-style:none;background-color:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.05)}.sidebar-lesson.active{background-color:rgba(59,130,246,.15);border-left:3px solid var(--primary-color)}.sidebar-lesson a{padding:10px 16px 10px 24px;display:flex;align-items:flex-start;gap:10px;color:rgba(255,255,255,.7);font-size:13.5px;line-height:1.45;transition:all .2s;word-break:break-word}.sidebar-lesson a .status-icon{margin-top:3px;flex-shrink:0}.sidebar-lesson:hover a{color:#fff;background-color:rgba(255,255,255,.05)}.sidebar-lesson.active a{color:#fff;font-weight:600}.sidebar-lesson.locked{opacity:.4}@media (max-width:1024px){.course-page-wrapper{display:block;min-height:auto}.page-body{display:block}.mobile-course-header{display:flex!important;background-color:#181059;padding:12px 20px;position:fixed;top:85px;z-index:2002;border-bottom:1px solid rgba(255,255,255,.1);width:100%;box-sizing:border-box}.sidebar-container{display:block;position:fixed;top:70px;left:0;width:100%;min-width:100%;height:100%;z-index:2000;overflow:hidden;border-right:none;background-color:transparent!important;visibility:hidden;pointer-events:none;transition:visibility .3s}.sidebar-container.open{visibility:visible;pointer-events:auto}.sidebar{position:absolute;top:79px;left:0;width:280px;height:calc(100vh - 79px);z-index:2001;transform:translateX(-100%);box-shadow:10px 0 30px rgba(0,0,0,.5);background-color:#181059;transition:transform .3s ease;overflow-x:hidden}.sidebar-container.open .sidebar{transform:translateX(0)}.sidebar-container.open::after{content:"";position:fixed;top:150px;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:2000}.lesson-container{padding:var(--sp-lg);width:100%;box-sizing:border-box;margin-top:0}}@media (max-width:480px){.mobile-course-header{display:flex!important;background-color:#181059;padding:10px 20px!important;position:fixed;top:50px!important;z-index:1001;border-bottom:1px solid rgba(255,255,255,.1);width:100%;box-sizing:border-box}.sidebar-container.open::after{content:"";position:fixed;top:105px;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:2000}.sidebar-container{display:block;position:fixed;top:25px;left:0;width:100%;height:100%;z-index:2000;overflow:hidden;border-right:none;background-color:transparent!important;visibility:hidden;pointer-events:none;transition:visibility .3s}}.site-header{height:auto;background-color:var(--bg-white);display:flex;align-items:center;position:sticky;top:0;z-index:3000;transition:all .3s ease}.header-container{width:100%;max-width:95%;margin:0 auto;padding:0 var(--sp-3xl);display:flex;align-items:center;justify-content:space-between}.logo{flex-shrink:0}.logo-icon{width:90px;height:90px;display:flex;justify-content:center;position:relative}.nav-wrapper{display:flex;align-items:center;justify-content:space-between;flex:1;min-width:0;padding-left:200px}.main-nav{display:flex;flex:1;min-width:0}.main-nav ul{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 var(--sp-4xl)}.main-nav a{font-size:16px;color:#313131;font-weight:400;transition:color .2s;text-decoration:none;white-space:nowrap}.main-nav li.active a{color:var(--accent-color);font-weight:600}.main-nav a:hover{color:var(--accent-color)}.signup-btn{padding:var(--sp-sm) var(--sp-xl);border:1px solid var(--accent-color);color:var(--accent-color);font-weight:500;border-radius:4px;transition:all .2s;text-decoration:none;flex-shrink:0;white-space:nowrap}.mobile-menu-toggle{display:none;flex-direction:column;gap:6px;background:0 0;border:none;cursor:pointer;padding:5px;z-index:1001}.mobile-menu-toggle span{width:25px;height:2px;background-color:var(--accent-color);transition:all .3s ease;transform-origin:center}.mobile-menu-toggle.icon-active span:first-child{transform:translateY(8px) rotate(45deg)}.mobile-menu-toggle.icon-active span:nth-child(2){opacity:0;transform:translateX(-20px)}.mobile-menu-toggle.icon-active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.mobile-only{display:none}@media (max-width:1200px){.main-nav{position:fixed;top:80px;left:0;width:100%;height:0;background-color:var(--bg-white);overflow:hidden;transition:height .4s cubic-bezier(.4, 0, .2, 1);box-shadow:0 10px 20px rgba(0,0,0,.05)}.main-nav.nav-open{height:auto;bottom:0;overflow-y:auto;-webkit-overflow-scrolling:touch}.main-nav ul{flex-direction:column;padding:var(--sp-sm) var(--sp-3xl);gap:0}.main-nav li{width:100%;border-bottom:1px solid var(--border-slate)}.main-nav a{width:100%;padding:var(--sp-base) 0;font-size:var(--fs-md);display:block}.mobile-menu-toggle{display:flex}.header-actions{display:none}.mobile-only{display:block;margin-top:var(--sp-3xl);border-bottom:none!important}.main-nav a.signup-btn-mobile{display:inline-block;padding:var(--sp-base) var(--sp-3xl);border:1px solid var(--accent-color);color:var(--accent-color)!important;font-weight:600;border-radius:6px;text-align:center;transition:all .2s ease}}@media (max-width:480px){.header-container{padding:0 var(--sp-base)}.main-nav{position:fixed;top:50px;left:0;width:100%;height:0;background-color:var(--bg-white);overflow:hidden;transition:height .4s cubic-bezier(.4, 0, .2, 1);box-shadow:0 10px 20px rgba(0,0,0,.05)}.logo-icon{width:52px;height:52px}.logo-icon img{width:52px;height:52px}}.user-profile-menu{position:relative;display:inline-block}.profile-avatar-btn{background:0 0;border:none;padding:4px 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:6px;transition:background-color .2s;color:#d97706}.profile-avatar-btn:hover{background-color:var(--bg-slate,#f8fafc)}.profile-icon{width:28px;height:28px}.profile-btn-name{font-weight:700;font-size:16px;white-space:nowrap}.profile-caret{width:20px;height:20px}.profile-dropdown{position:absolute;top:100%;right:0;margin-top:10px;width:200px;background:var(--bg-white,#fff);border:1px solid var(--border-slate,#e2e8f0);border-radius:8px;box-shadow:0 10px 25px rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease;z-index:100;display:flex;flex-direction:column}.user-profile-menu:hover .profile-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{padding:12px 15px;text-decoration:none;color:var(--text-dark,#2d3748);font-size:.95rem;transition:background .2s;text-align:left;border:none;background:0 0;cursor:pointer;width:100%}.dropdown-item:hover{background:var(--bg-slate,#f7fafc)}.logout-item{color:#dc3545;border-top:1px solid var(--border-slate,#e2e8f0);border-radius:0 0 8px 8px}.logout-item:hover{background:#fff5f5}body.auth-loading .auth-link,body.auth-loading .guest-link{display:none!important}.site-footer{background-color:#1e3465;color:var(--text-white);padding:60px 0 var(--sp-lg);position:relative}.footer-container{max-width:95%;margin:0 auto;padding:0 var(--sp-3xl)}.footer-grid{display:grid;grid-template-columns:1fr 1.5fr 1.5fr 1.5fr 1.5fr;gap:var(--sp-3xl);margin-bottom:60px}.footer-logo-col .logo-icon.white{color:#1a2d4d}.footer-col h3{font-size:var(--fs-sm);font-weight:400;margin-bottom:var(--sp-md);color:var(--border-mid)}.footer-col h3 a{color:inherit}.footer-col ul{display:flex;flex-direction:column;gap:var(--sp-md);padding:0;margin:0}.footer-col a{color:var(--border-mid);font-size:var(--fs-sm);transition:color .2s;text-decoration:none}.footer-col a:hover{color:var(--text-white)}.social-links{display:flex;gap:var(--sp-lg)}.social-icon{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .3s ease,background-color .3s ease;background-color:transparent}.social-icon:hover{transform:translateY(-5px);background-color:rgba(255,255,255,.1)}.social-icon img,.social-icon svg{width:100%;height:100%;object-fit:contain}.social-icon.slack{background-color:var(--bg-white);color:#1e3465;padding:10px}.social-icon.slack:hover{color:#1e3465;transform:translateY(-5px)}.whastapp-icon{display:flex;justify-content:center;align-items:center}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:var(--sp-lg);text-align:center}.footer-bottom p{font-size:var(--fs-xs);color:var(--text-light)}.whatsapp-float{position:fixed;bottom:30px;right:30px;width:50px;height:50px;background-color:var(--whatsapp-color);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-white);font-size:var(--fs-xl);box-shadow:0 4px 10px rgba(0,0,0,.3);cursor:pointer;z-index:9999}@media (max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr}.footer-logo-col{grid-column:span 2;display:flex;justify-content:center;margin-bottom:var(--sp-lg)}}@media (max-width:768px){.footer-container{max-width:100%;padding:0 var(--sp-base);margin:0 auto}.footer-grid{grid-template-columns:repeat(3,1fr);gap:var(--sp-xl) var(--sp-md);margin-bottom:40px}.footer-logo-col{grid-column:span 3;display:flex;justify-content:center;margin-bottom:var(--sp-md)}.footer-col:not(.social-col){grid-column:span 1}.footer-col h3{font-size:12px;margin-bottom:var(--sp-md)}.footer-col a{font-size:12px}.footer-col.social-col{grid-column:span 3;display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:var(--sp-md)}.footer-col.social-col h3{margin-bottom:var(--sp-md)}}@media (max-width:480px){.footer-container{padding:0 var(--sp-md)}.footer-grid{gap:var(--sp-lg) var(--sp-xs)}.footer-col h3{font-size:10.5px}.footer-col a{font-size:10.5px}.social-links{gap:var(--sp-sm)}.social-icon{width:38px;height:38px}}.breadcrumb{display:flex;align-items:center;gap:var(--sp-sm);margin-bottom:var(--sp-lg)}.breadcrumb-list{display:flex;list-style:none;padding:0;margin:0;gap:var(--sp-sm);align-items:center}.breadcrumb-item{display:flex;align-items:center;gap:var(--sp-sm);font-size:var(--fs-sm);color:var(--accent-color)}.breadcrumb-item a{text-decoration:none;color:var(--accent-color);transition:opacity .2s}.breadcrumb-item a:hover{opacity:.8}.separator{color:var(--accent-color);font-weight:500}.breadcrumb-item:last-child a{cursor:default;pointer-events:none}.course-card{display:grid;grid-template-columns:280px 1fr;background:var(--bg-white);border-radius:4px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.05);transition:all .3s ease;border:1px solid var(--border-slate);text-decoration:none}.course-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.1);border-color:var(--border-light)}.course-image-wrapper{background-color:var(--bg-white);display:flex;align-items:center;justify-content:center;padding:var(--sp-lg)}.course-image{object-fit:contain;max-width:100%;height:auto}.course-content{padding:var(--sp-xl) var(--sp-3xl);display:flex;flex-direction:column}.bestseller-badge{background-color:#fffbeb;color:#d39331;padding:var(--sp-xs) var(--sp-md);border-radius:4px;font-size:var(--fs-xs);font-weight:600;align-self:flex-start;margin-bottom:var(--sp-md)}.course-title{font-size:var(--fs-4xl);font-weight:700;color:#181059;margin-bottom:var(--sp-sm)}.course-title a{color:inherit;text-decoration:none}.course-subtitle{color:var(--text-main);font-size:var(--fs-xl);margin-bottom:var(--sp-base)}.course-meta-row{display:flex;align-items:center;gap:var(--sp-md);margin-bottom:var(--sp-lg);flex-wrap:wrap;font-size:var(--fs-lg)}.course-instructor{color:var(--primary-color)}.course-year{font-weight:800;color:var(--text-dark)}.stars{color:#fbbf24;letter-spacing:1px}.rating-count{color:var(--text-muted)}.course-footer{display:flex;margin-top:auto;border-top:1px solid var(--border-slate);padding-top:var(--sp-base)}.icon-stats{display:flex;gap:var(--sp-xl)}.stat-item{display:flex;align-items:center;gap:var(--sp-sm);font-size:var(--fs-lg);color:#1a2d4d;font-weight:700}.stat-icon{color:#1a2d4d}.enroll-btn{display:none}@media (max-width:991px){.course-card{grid-template-columns:220px 1fr}}@media (max-width:768px){.course-card{grid-template-columns:1fr}.course-image-wrapper{height:200px;padding:var(--sp-lg)}.course-title{font-size:var(--fs-xl)}.course-subtitle{font-size:var(--fs-base)}.course-meta-row{font-size:var(--fs-sm)}.stat-item{font-size:var(--fs-sm)}.course-footer{flex-direction:column;align-items:stretch;text-align:center}.icon-stats{justify-content:center}.enroll-btn{width:100%}}@media (max-width:480px){.icon-stats{gap:var(--sp-md)}.stat-item{font-size:var(--fs-xs)}}.training-section{padding:100px 0;background-color:var(--bg-white)}.training-container{max-width:100%}.training-header{text-align:center;max-width:900px;margin:0 auto 100px}.training-main-title{font-size:var(--fs-2xl);color:var(--text-dark);margin-bottom:var(--sp-3xl);font-weight:400}.training-main-title .bold{font-weight:800;color:var(--text-dark)}.training-main-subtitle{font-size:var(--fs-base);color:var(--text-muted);line-height:1.8}.training-list{display:flex;flex-direction:column;gap:120px}.training-item{display:grid;grid-template-columns:2fr 1fr;grid-template-areas:"content image" "button image";align-items:center;gap:var(--sp-lg) 80px;max-width:1440px;margin:0 auto}.training-item.reverse{grid-template-areas:"image content" "image button"}.training-content{grid-area:content}.training-title{font-size:var(--fs-2xl);font-weight:800;color:var(--text-dark);margin-bottom:var(--sp-md)}.training-subtitle{font-size:var(--fs-xl);color:var(--text-light);margin-bottom:var(--sp-3xl);font-weight:300}.training-features{list-style:none;padding:0;margin-bottom:var(--sp-3xl);display:flex;flex-direction:column;gap:var(--sp-base)}.training-features li{font-size:var(--fs-base);color:var(--text-slate);position:relative;padding-left:var(--sp-lg)}.training-features li::before{content:"\2022";position:absolute;left:0;color:var(--text-dark)}.highlight-feature{color:var(--primary-color)!important}.enroll-btn{grid-area:button;display:inline-block;width:fit-content;padding:var(--sp-base) var(--sp-3xl);background-color:transparent;color:var(--orange-color);border:1px solid var(--orange-color);border-radius:4px;font-weight:600;font-size:var(--fs-base);cursor:pointer;transition:all .3s ease;text-decoration:none}.training-image-wrapper{grid-area:image;position:relative;display:flex;justify-content:center;align-items:center}.blob-bg{position:absolute;width:100%;height:100%;border-radius:40% 60% 70% 30%/40% 50% 60% 50%;z-index:0;transform:scale(1.1)}.training-image{position:relative;z-index:1;max-width:320px;width:100%;height:auto;filter:drop-shadow(0 10px 20px rgba(0, 0, 0, .05))}@media (max-width:1024px){.training-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3xl)}.training-item,.training-item.reverse{grid-template-columns:1fr;grid-template-areas:"image" "content" "button";text-align:center;gap:var(--sp-2xl);padding:0;background:0 0;border-radius:0;align-content:start}.enroll-btn{display:inline-block;justify-self:center;margin:0 auto}.training-features{align-items:flex-start;width:fit-content;margin:0 auto var(--sp-3xl)}.training-image-wrapper{max-width:250px;margin:0 auto;justify-content:center}}@media (max-width:768px){.training-list{grid-template-columns:1fr;gap:var(--sp-4xl)}}@media (max-width:768px){.training-section{padding:var(--sp-4xl) 0}.training-main-title{font-size:var(--fs-2xl)}.training-title{font-size:var(--fs-xl)}.training-subtitle{font-size:var(--fs-lg)}.training-list{gap:80px}}.hero-section{padding:var(--sp-4xl) 0;overflow:hidden}.hero-container{max-width:100%;margin:0 auto;display:flex;align-items:center;gap:var(--sp-3xl);justify-content:space-between}.hero-content{flex:1.2;max-width:650px}.hero-title{font-size:var(--fs-6xl);font-weight:800;line-height:1.1;color:var(--text-dark);margin-bottom:var(--sp-xl)}.hero-title .highlight{color:var(--primary-color)}.hero-description{font-size:var(--fs-lg);color:var(--text-muted);line-height:1.6;margin-bottom:var(--sp-3xl)}.hero-section .search-container{display:flex;flex-direction:row;background:0 0;padding:0;border-radius:0;box-shadow:none;border:none;max-width:100%;gap:var(--sp-md);align-items:stretch}.hero-section .search-input-wrapper{display:flex;align-items:center;flex:1;background:var(--bg-white);padding:var(--sp-md) var(--sp-base);border:1px solid var(--border-light);box-shadow:0 4px 25px rgba(0,0,0,.08)}.hero-section .search-icon{color:var(--text-light);margin-right:var(--sp-md);flex-shrink:0}.hero-section .hero-search-input{border:none;outline:0;width:100%;font-size:var(--fs-base);color:var(--text-dark);background:0 0}.hero-section .hero-search-input::placeholder{color:var(--text-light)}.hero-section .hero-search-btn{background-color:var(--orange-color);color:var(--text-white);padding:0 var(--sp-4xl);border:none;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center}.hero-section .hero-search-btn:hover{background-color:var(--orange-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(217,119,6,.3)}.hero-video{flex:1;width:100%;max-width:800px;display:flex;justify-content:center;align-items:center;position:relative}.video-wrapper{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.2)}.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.hero-yt-facade{position:relative;width:100%;height:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;background-color:#000;overflow:hidden}.hero-yt-thumb{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform .4s ease,filter .3s ease}.hero-yt-facade:hover .hero-yt-thumb{transform:scale(1.06);filter:brightness(1.05)}.hero-yt-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;transition:transform .25s cubic-bezier(0, 0, .2, 1),filter .25s ease;filter:drop-shadow(0 4px 12px rgba(0, 0, 0, .5))}.hero-yt-play-btn svg{display:block;width:68px;height:48px}.hero-yt-play-btn .hero-yt-bg{transition:fill .2s ease;fill:#f00}.hero-yt-facade:hover .hero-yt-play-btn{transform:translate(-50%,-50%) scale(1.15);filter:drop-shadow(0 6px 20px rgba(255, 0, 0, .65))}.hero-yt-facade:hover .hero-yt-play-btn .hero-yt-bg{fill:#cc0000}.vd-yt-facade{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;background-color:#000;overflow:hidden}.vd-yt-thumb{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .3s ease,filter .3s ease}.vd-yt-facade:hover .vd-yt-thumb{transform:scale(1.05);filter:brightness(.92)}.vd-yt-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;transition:transform .25s cubic-bezier(.34, 1.56, .64, 1);filter:drop-shadow(0 4px 16px rgba(0, 0, 0, .6))}.vd-yt-play-btn svg{display:block;width:68px;height:48px}.vd-yt-play-btn .vd-yt-bg{transition:fill .2s ease;fill:#f00}.vd-yt-facade:hover .vd-yt-play-btn{transform:translate(-50%,-50%) scale(1.12)}.vd-yt-facade:hover .vd-yt-play-btn .vd-yt-bg{fill:#cc0000}@media (max-width:1200px){.hero-container{gap:var(--sp-3xl)}.hero-title{font-size:var(--fs-3xl)}}@media (max-width:1024px){.hero-section{padding:var(--sp-4xl) 0}.hero-container{flex-direction:column-reverse;text-align:center;gap:50px}.hero-content{max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center}.hero-title{font-size:var(--fs-4xl);margin-bottom:var(--sp-lg)}.hero-description{font-size:var(--fs-md);margin-bottom:var(--sp-3xl)}.hero-section .search-container{width:100%;max-width:550px}.hero-video{width:100%;max-width:711px;height:auto;aspect-ratio:16/9}}@media (max-width:768px){.hero-title{font-size:var(--fs-2xl)}}@media (max-width:640px){.hero-section{padding:var(--sp-3xl) 0}.hero-title{font-size:var(--fs-3xl)}.hero-description{font-size:var(--fs-base)}.hero-section .search-container{flex-direction:column;align-items:stretch;padding:0;background:0 0;box-shadow:none;border:none;gap:var(--sp-md)}.hero-section .search-input-wrapper{background:var(--bg-white);padding:var(--sp-md) var(--sp-base);border-radius:0;border:1px solid var(--border-light);box-shadow:none}.hero-section .hero-search-btn{width:100%;padding:14px var(--sp-4xl);border-radius:0;display:flex;align-items:center;justify-content:center}}.features-section{padding:80px 0;background-color:var(--bg-white)}.features-container{margin:0 auto}.features-header{text-align:center;max-width:800px;margin:0 auto 60px}.features-title{font-size:var(--fs-3xl);color:var(--text-dark);line-height:1.3;margin-bottom:var(--sp-xl);font-weight:400}.features-title .bold{font-weight:700;color:var(--text-dark)}.features-subtitle{font-size:var(--fs-base);color:var(--text-muted);line-height:1.6}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3xl)}.feature-card{background-color:var(--bg-card);padding:60px var(--sp-3xl);border-radius:12px;text-align:center;transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center}.feature-icon-wrapper{margin-bottom:var(--sp-xl);display:flex;align-items:center;justify-content:center}.feature-icon{color:var(--primary-color)}.feature-card-title{font-size:var(--fs-lg);color:var(--text-muted);margin-bottom:var(--sp-base);font-weight:500}.feature-card-number{font-size:28px;color:var(--primary-color);font-weight:800;margin:0}.feature-card-number:hover{color:#00acee}@media (max-width:1024px){.features-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.features-title{font-size:var(--fs-2xl)}.features-grid{grid-template-columns:1fr;gap:var(--sp-lg)}.feature-card{padding:var(--sp-3xl) var(--sp-lg)}}@media (max-width:640px){.features-section{padding:var(--sp-4xl) 0}}.home-test-code-section{background-color:var(--bg-white);text-align:center}.home-test-code-container{max-width:1200px;margin:0 auto;padding:0 var(--sp-3xl)}.home-test-code-title{font-size:var(--fs-4xl);font-weight:300;color:var(--text-muted);letter-spacing:-1px}.home-test-code-title strong{font-weight:800;color:var(--text-dark)}.home-test-code-subtitle{font-size:var(--fs-base);color:var(--text-muted);line-height:1.8;margin-bottom:var(--sp-lg)}.home-test-code-stats{font-size:var(--fs-md);color:var(--text-slate);font-weight:500}.home-test-code-interactive-box{background-color:#eee;padding:50px;border-radius:0;display:flex;flex-direction:column;align-items:center;gap:35px}.home-code-editor-mockup{background:var(--bg-white);border-radius:0;box-shadow:none;width:100%;overflow:hidden;border:none;margin:0}.home-editor-body{padding:40px;display:flex;text-align:left;font-family:"Fira Code",Menlo,Monaco,Consolas,monospace;font-size:var(--fs-md);line-height:1.6;color:#1e293b}.home-code-content{flex:1;border-left:2px solid #3182ce;padding-left:var(--sp-xl)}.home-code-line{font-size:var(--fs-md);color:#1e293b;font-weight:500;font-family:inherit}.home-code-line.home-second-line{margin-top:var(--sp-lg)}.home-try-it-btn{padding:14px 45px;background-color:#d99734;color:var(--text-white);border:none;border-radius:0;font-size:var(--fs-md);font-weight:500;cursor:pointer;transition:background-color .2s ease;box-shadow:none}.home-try-it-btn:hover{background-color:#b77a23}@media (max-width:768px){.home-test-code-section{padding:60px 0}.home-test-code-title{font-size:var(--fs-3xl)}.home-test-code-interactive-box{padding:var(--sp-xl)}.home-editor-body{padding:var(--sp-lg);font-size:var(--fs-base)}.home-test-code-container{padding:0 var(--sp-lg)}}.iq-page{font-family:"Source Sans 3",sans-serif;background-color:var(--bg-light);min-height:100vh}.iq-page-header{background:var(--bg-white);padding:40px var(--sp-3xl);border-bottom:1px solid var(--border-light)}.iq-header-inner{max-width:860px}.iq-header-title-simple{font-size:var(--fs-xl);font-weight:800;color:var(--text-dark);margin-bottom:25px;text-transform:uppercase;letter-spacing:-.01em}.iq-info-row{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;font-size:15px;line-height:1.5}.iq-info-label{color:#64748b;font-weight:500;min-width:150px}.iq-info-value-link{color:#2563eb;text-decoration:none;font-weight:600;transition:text-decoration .2s}.iq-info-value-link:hover{text-decoration:underline}.iq-info-value-dark{color:#1e293b;font-weight:700}.iq-info-value-green{color:#10b981;font-weight:700}.iq-goback-row{margin-top:30px}.iq-goback-link{display:inline-flex;align-items:center;gap:6px;color:#3b82f6;text-decoration:none;font-weight:500;font-size:var(--fs-md);transition:transform .2s}.iq-goback-link:hover{transform:translateX(-3px)}.iq-goback-link .back-arrow{font-size:1.1em}.iq-list{max-width:97.5%;padding:var(--sp-3xl) var(--sp-3xl) var(--sp-4xl);display:flex;flex-direction:column;gap:var(--sp-2xl)}.iq-card{background:var(--bg-white);border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.07);overflow:hidden;border-left:4px solid var(--text-navy);transition:box-shadow .2s ease}.iq-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.11)}.iq-card:nth-child(2n){border-left-color:var(--orange-color)}.iq-question-row{display:flex;align-items:flex-start;gap:var(--sp-xl);padding:var(--sp-2xl) var(--sp-3xl);background:var(--bg-white);cursor:pointer;user-select:none}.iq-q-num{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--text-navy);color:var(--text-white);font-size:var(--fs-sm);font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}.iq-card:nth-child(2n) .iq-q-num{background:var(--orange-color)}.iq-q-text{flex:1;font-size:var(--fs-md);font-weight:700;color:var(--text-navy);line-height:1.5}.iq-toggle-icon{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--bg-light);display:flex;align-items:center;justify-content:center;transition:transform .3s ease,background .2s;margin-top:4px;color:var(--text-navy)}.iq-card.iq-open .iq-toggle-icon{transform:rotate(180deg);background:var(--text-navy);color:#fff}.iq-answer-wrap{max-height:0;overflow:hidden;transition:max-height .4s ease}.iq-card.iq-open .iq-answer-wrap{max-height:5000px}.iq-answer-inner{border-top:1px solid var(--border-light);padding:var(--sp-2xl) var(--sp-3xl);background:#fafbff}.iq-explanation-label{font-size:var(--fs-lg);font-weight:800;color:var(--text-navy);margin-bottom:var(--sp-md)}.iq-answer-text{font-size:var(--fs-base);color:var(--text-main);line-height:1.85;white-space:pre-wrap;word-wrap:break-word;font-family:"Source Sans 3",sans-serif}.iq-code-block{border-radius:8px;padding:0 var(--sp-2xl);overflow-x:auto}.iq-code-block code{font-family:"JetBrains Mono","Fira Code",monospace;font-size:var(--fs-sm);color:#e2e8f0;line-height:1.8;white-space:pre-wrap!important;word-wrap:break-word!important}.iq-answer-text .bullet{display:flex;gap:var(--sp-sm);align-items:flex-start}@media (max-width:1024px){.iq-page{margin-top:50px}}@media (max-width:768px){.iq-page-header{padding:var(--sp-3xl) var(--sp-xl)}.iq-header-title{font-size:var(--fs-xl)}.iq-list{padding:var(--sp-xl) var(--sp-base) var(--sp-3xl);gap:var(--sp-xl)}.iq-question-row{padding:var(--sp-xl) var(--sp-xl);gap:var(--sp-base)}.iq-answer-inner{padding:var(--sp-xl) var(--sp-xl)}.iq-q-text{font-size:var(--fs-base)}.iq-q-num{width:30px;height:30px;font-size:var(--fs-xs)}}@media (max-width:480px){.iq-header-title{font-size:var(--fs-lg)}.iq-breadcrumb{font-size:11px}.iq-code-block{padding:var(--sp-base)}}.lesson-content-wrapper{flex-direction:column;gap:var(--sp-4xl,3rem);padding-bottom:80px;margin:0 auto}.content-text{font-size:var(--fs-md, 18px);color:var(--text-main,#334155);font-family:"Source Sans 3",sans-serif}.test-code-section{display:flex;flex-direction:column}.section-title{font-size:var(--fs-xl, 24px);font-weight:800;color:var(--text-navy,#181059);margin:0 0 var(--sp-xl,1.5rem) 0;text-transform:uppercase;letter-spacing:.05em;display:block;padding-bottom:var(--sp-sm,.5rem)}.example-comment{font-size:var(--fs-base, 16px);font-weight:500;color:var(--text-slate,#475569);margin:0;line-height:1.6}.code-card{background:var(--bg-white,#fff);padding:var(--sp-3xl,2.5rem) var(--sp-4xl,3rem);display:flex;position:relative;min-height:120px;border-radius:6px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.blue-accent-line{position:absolute;left:30px;top:30px;bottom:30px;width:3px;background-color:var(--primary-color,#3b82f6);border-radius:2px}.code-card pre{margin:0;padding-left:25px;white-space:pre;word-break:normal;overflow-x:auto;width:100%}.code-card code{font-family:"JetBrains Mono","Fira Code",monospace;font-size:var(--fs-base, 16px);color:var(--text-dark,#1e293b);line-height:1.8}.code-card code .token,.code-card code .token.boolean,.code-card code .token.builtin,.code-card code .token.class-name,.code-card code .token.comment,.code-card code .token.function,.code-card code .token.keyword,.code-card code .token.number,.code-card code .token.operator,.code-card code .token.property,.code-card code .token.punctuation,.code-card code .token.string,.code-card code [class*=token]{color:var(--text-dark,#1e293b)!important;background:0 0!important;font-weight:400!important;font-style:normal!important;text-decoration:none!important}.action-row{display:flex;justify-content:center;margin-top:var(--sp-xl,1.5rem)}.try-it-btn{background-color:var(--orange-color,#d99734);color:var(--text-white,#fff);padding:14px 80px;border:none;border-radius:4px;font-size:19px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 14px 0 rgba(217,151,52,.3)}.try-it-btn:hover{background-color:var(--orange-dark,#b45309);transform:translateY(-2px);box-shadow:0 6px 20px rgba(217,151,52,.2)}.visual-walkthrough-section{display:flex;flex-direction:column;gap:var(--sp-4xl,3rem);padding-top:60px;border-top:1px solid var(--border-light,#e2e8f0)}.walkthrough-step{display:flex;flex-direction:column;gap:var(--sp-3xl,2.5rem)}.step-title{font-size:var(--fs-2xl, 30px);font-weight:800;color:var(--text-navy,#181059);margin:0;letter-spacing:-.03em;line-height:1.2}.step-description{font-size:var(--fs-md, 18px);line-height:1.8;color:var(--text-main,#334155);margin:0}.step-code-block{background:#f8f9fa;border-radius:6px;padding:20px;margin:10px 0;border:1px solid #e2e8f0}.step-code-block code{font-family:"JetBrains Mono",monospace;font-size:15px;color:#ec407a;line-height:1.7}.step-code-block .token{color:#ec407a!important;background:0 0!important;font-weight:400!important}.step-image-container{width:100%;border-radius:12px;overflow:hidden;box-shadow:0 20px 25px -5px rgba(0,0,0,.1);background:var(--bg-light,#f8fafc);border:1px solid var(--border-light,#e2e8f0)}.step-image{width:100%;height:auto;display:block;transition:transform .5s ease}.step-image:hover{transform:scale(1.02)}@media (max-width:768px){.lesson-content-wrapper{gap:var(--sp-3xl,2.5rem);padding-bottom:60px}.visual-walkthrough-section{gap:var(--sp-3xl,2.5rem);margin-top:40px;padding-top:40px}.step-title{font-size:var(--fs-xl, 24px)}.step-description{font-size:var(--fs-base, 16px);line-height:1.7}.step-code-block{padding:15px;overflow-x:auto}.example-comment{font-size:14px}}.lesson-info-section{display:flex;flex-direction:column;gap:15px;margin:0}.lesson-info-section .lesson-footer-link,.lesson-info-section .login-alert{margin:20px!important;width:fit-content}.ij-test-code-section{background-color:var(--bg-white);text-align:center}.ij-test-code-container{padding:0 var(--sp-3xl)}.ij-test-code-header{max-width:800px;margin:0 auto 50px}.ij-test-code-title{font-size:var(--fs-4xl);font-weight:300;color:var(--text-muted);margin-bottom:var(--sp-3xl);letter-spacing:-1px}.ij-test-code-title strong{font-weight:800;color:var(--text-dark)}.ij-test-code-subtitle{font-size:var(--fs-base);color:var(--text-muted);line-height:1.8;margin-bottom:var(--sp-lg)}.ij-test-code-stats{font-size:var(--fs-md);color:var(--text-slate);font-weight:500}.ij-test-code-interactive-box{background-color:#eee;padding:50px;border-radius:0;display:flex;flex-direction:column;align-items:center;gap:35px}.ij-code-editor-mockup{background:var(--bg-white);border-radius:0;box-shadow:none;width:100%;overflow:hidden;border:none;margin:0}.ij-editor-body{padding:40px;display:flex;text-align:left;font-family:"Fira Code",Menlo,Monaco,Consolas,monospace;font-size:var(--fs-md);line-height:1.6;color:#1e293b}.ij-code-content{flex:1;border-left:2px solid #3182ce;padding-left:var(--sp-xl)}.ij-code-line{font-size:var(--fs-md);color:#1e293b;font-weight:500;font-family:inherit}.ij-code-line.ij-second-line{margin-top:var(--sp-lg)}.ij-try-it-btn{padding:14px 45px;background-color:#d99734;color:var(--text-white);border:none;border-radius:0;font-size:var(--fs-md);font-weight:500;cursor:pointer;transition:background-color .2s ease;box-shadow:none}.ij-try-it-btn:hover{background-color:#b77a23}@media (max-width:768px){.ij-test-code-section{padding:60px 0}.ij-test-code-title{font-size:var(--fs-3xl)}.ij-test-code-interactive-box{padding:var(--sp-xl)}.ij-editor-body{padding:var(--sp-lg);font-size:var(--fs-base)}.ij-test-code-container{padding:0 var(--sp-lg)}}.footer-sections-container{border-top:1px solid var(--border-light);margin-top:var(--sp-3xl);padding-top:var(--sp-3xl)}.footer-section-title{font-size:var(--fs-lg);font-weight:700;color:var(--text-navy);margin-bottom:var(--sp-base)}.footer-section-subtitle{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--sp-2xl)}.most-visited-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2xl);margin-bottom:var(--sp-4xl)}.topic-card{display:flex;flex-direction:column;gap:var(--sp-xs)}.topic-label{font-size:var(--fs-xs);color:var(--text-muted)}.topic-name{font-size:var(--fs-md);font-weight:700;color:var(--primary-color);text-decoration:none;line-height:1.3}.topic-name:hover{text-decoration:underline}.topic-views{font-size:var(--fs-xs);color:var(--text-muted)}@media (max-width:1024px){.most-visited-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.most-visited-grid{grid-template-columns:1fr}}.search-container{display:flex;gap:12px;margin-top:var(--sp-4xl);margin-bottom:var(--sp-2xl);max-width:620px;align-items:center}.search-input-wrapper{position:relative;flex:1;border:1px solid var(--border-mid);overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05)}.search-input-icon{position:absolute;left:var(--sp-base);top:50%;transform:translateY(-50%);color:var(--text-light)}.search-input{width:100%;padding:14px var(--sp-base) 14px 44px;border:none;outline:0;font-size:var(--fs-sm);color:var(--text-dark);background:var(--bg-white)}.search-btn{background-color:var(--orange-color);color:var(--text-white);border:none;padding:14px var(--sp-3xl);font-weight:600;font-size:var(--fs-base);cursor:pointer;transition:background .2s;white-space:nowrap;flex-shrink:0}.search-btn:hover{background-color:var(--orange-dark)}.filter-row{display:flex;flex-direction:column;gap:var(--sp-xl);margin-bottom:var(--sp-4xl)}.filter-select{width:200px;padding:var(--sp-sm) var(--sp-md);border:1px solid var(--border-light);border-radius:4px;font-size:var(--fs-sm);color:var(--text-dark);background-color:var(--bg-white)}.radio-group{display:flex;gap:var(--sp-2xl);align-items:center}.radio-label{display:flex;align-items:center;gap:var(--sp-sm);font-size:var(--fs-sm);font-weight:600;color:var(--text-navy);cursor:pointer}.radio-input{width:18px;height:18px;cursor:pointer}@media (max-width:768px){.search-container{flex-direction:column}.search-input{border-right:1px solid var(--border-light);border-bottom:none;border-radius:4px 4px 0 0}.search-btn{padding:14px;border-radius:0 0 4px 4px}}.quiz-page{min-height:100vh;font-family:"Source Sans 3",sans-serif}.quiz-page-header-simple{background:var(--bg-white);padding:40px var(--sp-3xl)}.quiz-main-title{font-size:32px;font-weight:700;color:#1e293b;margin-bottom:30px;text-align:left;letter-spacing:-.02em}.quiz-header-content{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4xl)}.quiz-header-left{flex:1;display:flex;flex-direction:column;gap:12px}.quiz-info-row{display:flex;align-items:baseline;gap:8px;font-size:15px;line-height:1.5}.quiz-info-label{color:#64748b;font-weight:500;min-width:150px}.quiz-info-value-link{color:#2563eb;text-decoration:none;font-weight:600;transition:text-decoration .2s}.quiz-info-value-link:hover{text-decoration:underline}.quiz-info-value-dark{color:#1e293b;font-weight:700}.quiz-info-value-green{color:#10b981;font-weight:700}.quiz-login-alert{display:inline-flex;align-items:center;gap:var(--sp-base);background-color:#fef3c7;border:1px solid #fde68a;border-radius:8px;padding:10px 16px;margin-top:15px;font-size:14px;color:#78350f;width:max-content}.quiz-login-alert .alert-icon{font-size:16px;color:#d97706}.quiz-login-alert .alert-text a{color:#2563eb;font-weight:600;text-decoration:none}.quiz-login-alert .alert-text a:hover{text-decoration:underline}.quiz-goback-row{margin-top:20px}.quiz-goback-link{display:inline-flex;align-items:center;gap:6px;color:#3b82f6;text-decoration:none;font-weight:500;font-size:var(--fs-md);transition:transform .2s}.quiz-goback-link:hover{transform:translateX(-3px)}.quiz-goback-link .back-arrow{font-size:1.1em}.quiz-header-right{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;border-radius:12px;min-width:280px}.quiz-submit-btn-new{background:#d99734;color:var(--text-white);border:none;padding:14px 30px;font-size:16px;font-weight:700;border-radius:6px;cursor:pointer;font-family:"Source Sans 3",sans-serif;transition:all .2s ease;width:100%}.quiz-submit-btn-new:disabled{opacity:.5;cursor:not-allowed}.quiz-submit-note{font-size:12px;color:#dc2626;margin-top:10px;font-weight:500}.quiz-submit-note a{color:#dc2626;text-decoration:underline;font-weight:600}.quiz-progress-bar-wrap{display:none}.quiz-questions-container{padding-top:var(--sp-3xl);display:flex;flex-direction:column;gap:var(--sp-3xl)}.question-card{background:var(--bg-white);border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.07);border:2px solid transparent;overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease}.question-card.answered{border-color:var(--border-light)}.question-card-top{padding:var(--sp-2xl) var(--sp-3xl) var(--sp-xl);display:flex;align-items:flex-start;gap:var(--sp-xl)}.question-num-badge{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--text-navy);color:var(--text-white);font-size:var(--fs-sm);font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}.question-content{flex:1}.question-type-tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 10px;border-radius:999px;margin-bottom:var(--sp-sm);text-transform:uppercase;letter-spacing:.06em}.tag-tf{background:#ede9fe;color:#6d28d9}.tag-radio{background:#dbeafe;color:#1d4ed8}.tag-checkbox{background:#dcfce7;color:#15803d}.question-text{font-size:var(--fs-md);font-weight:600;color:var(--text-dark);line-height:1.6}.question-code-wrap{margin:0 var(--sp-3xl) var(--sp-xl);background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.code-block-label{background:#f1f5f9;color:#64748b;font-size:11px;font-weight:600;padding:6px 16px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #e2e8f0}.question-code-wrap pre[class*=language-]{margin:0;padding:var(--sp-xl) var(--sp-2xl);white-space:pre-wrap!important;word-wrap:break-word!important}.question-code-wrap code{font-family:"JetBrains Mono","Fira Code",monospace;font-size:var(--fs-sm);line-height:1.8;color:#1e293b}.options-list{padding:0 var(--sp-3xl) var(--sp-2xl);display:flex;flex-direction:column;gap:var(--sp-sm)}.option-label{display:flex;align-items:flex-start;gap:var(--sp-base);padding:14px var(--sp-2xl);border:2px solid var(--border-light);border-radius:8px;cursor:pointer;transition:all .2s ease;background:var(--bg-white);position:relative}.option-label:hover{border-color:var(--primary-color);background:var(--bg-light-blue)}.option-label input[type=checkbox],.option-label input[type=radio]{display:none}.option-marker{width:20px;height:20px;border-radius:50%;border:2px solid var(--border-mid);flex-shrink:0;margin-top:2px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;background:var(--bg-white)}.option-label.is-checkbox .option-marker{border-radius:4px}.option-label.selected .option-marker{background:var(--primary-color);border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(59,130,246,.15)}.option-label.correct-answer .option-marker::after,.option-label.selected .option-marker::after{content:"";display:block;width:8px;height:8px;border-radius:50%;background:#fff}.option-label.is-checkbox.correct-answer .option-marker::after,.option-label.is-checkbox.selected .option-marker::after{width:5px;height:9px;border-radius:0;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translate(-1px,-1px);background:0 0}.option-label.selected{border-color:var(--primary-color);background:#eff6ff}.option-label.correct-answer{border-color:#16a34a!important;background:#f0fdf4!important}.option-label.wrong-answer{border-color:#dc2626!important;background:#fef2f2!important}.option-label.correct-answer .option-marker{background:#16a34a!important;border-color:#16a34a!important}.option-label.wrong-answer .option-marker{background:#dc2626!important;border-color:#dc2626!important}.option-text{font-size:var(--fs-base);color:var(--text-main);line-height:1.6;flex:1}.option-text .option-code-text{font-family:"JetBrains Mono",monospace;font-size:var(--fs-sm);white-space:pre-wrap;display:block;line-height:1.7}.question-feedback{margin:0 var(--sp-3xl) var(--sp-2xl);padding:var(--sp-base) var(--sp-xl);border-radius:8px;display:none;gap:var(--sp-sm);align-items:flex-start}.question-feedback.show-feedback{display:flex}.question-feedback.feedback-correct{background:#f0fdf4;border-left:4px solid #16a34a}.question-feedback.feedback-incorrect{background:#fef2f2;border-left:4px solid #dc2626}.feedback-icon{font-size:var(--fs-lg);flex-shrink:0;margin-top:1px}.feedback-result-text{font-size:var(--fs-sm);font-weight:700;margin-bottom:var(--sp-xs)}.feedback-correct .feedback-result-text{color:#16a34a}.feedback-incorrect .feedback-result-text{color:#dc2626}.feedback-explanation{font-size:var(--fs-sm);color:var(--text-slate);line-height:1.6}.quiz-submit-section{margin:0;margin-left:2.5%;padding:0 var(--sp-3xl) var(--sp-4xl);text-align:center}.quiz-submit-btn{background:var(--text-navy);color:var(--text-white);border:none;padding:16px 60px;font-size:var(--fs-md);font-weight:700;border-radius:8px;cursor:pointer;transition:all .3s ease;font-family:"Source Sans 3",sans-serif;box-shadow:0 4px 14px rgba(24,16,89,.35)}.quiz-submit-btn:hover:not(:disabled){background:#1e3465;transform:translateY(-2px);box-shadow:0 8px 20px rgba(24,16,89,.4)}.quiz-submit-btn:disabled{opacity:.5;cursor:not-allowed}.quiz-score-card{max-width:1020px;margin:0;margin-left:4.5%;margin-bottom:20px;gap:var(--sp-3xl);background:var(--bg-white);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.12);padding:var(--sp-4xl) var(--sp-3xl);text-align:center;display:none}.quiz-score-card.show-score{display:flex;animation:scoreReveal .5s ease}@keyframes scoreReveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.score-donut{width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--text-navy) var(--score-pct,0),var(--border-light) 0);display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp-2xl);position:relative}.score-donut::before{content:"";position:absolute;width:84px;height:84px;border-radius:50%;background:#fff}.score-numbers{position:relative;z-index:1;font-size:var(--fs-xl);font-weight:800;color:var(--text-navy);line-height:1}.score-numbers span{font-size:var(--fs-sm);font-weight:400;color:var(--text-muted);display:block;margin-top:2px}.score-headline{font-size:var(--fs-xl);font-weight:800;color:var(--text-dark);margin-bottom:var(--sp-sm)}.score-message{font-size:var(--fs-base);color:var(--text-muted);margin-bottom:var(--sp-2xl);line-height:1.6}.quiz-retry-btn{background:var(--orange-color);color:var(--text-white);border:none;padding:12px 40px;border-radius:6px;font-size:var(--fs-base);font-weight:700;cursor:pointer;font-family:"Source Sans 3",sans-serif;transition:background .2s}.quiz-retry-btn:hover{background:var(--orange-dark)}@media (max-width:768px){.quiz-page-header-simple{padding:var(--sp-2xl) var(--sp-xl)}.quiz-score-card.show-score{display:block}.quiz-score-card-wrap{padding:var(--sp-xl) var(--sp-base)}.quiz-main-title{font-size:24px;margin-bottom:20px}.quiz-header-content{display:flex;flex-direction:column}}.video-card{background:var(--bg-white);border-radius:12px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column}.video-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.1)}.video-thumbnail-wrapper{position:relative;width:100%;padding-top:56.25%;background-color:var(--bg-light-blue);overflow:hidden;display:block}.video-thumbnail{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;transition:transform .5s ease}.play-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:0 0;display:flex;align-items:center;justify-content:center;transition:background .3s ease;color:#fff;pointer-events:none}.play-overlay .yt-play-button,.play-overlay svg{transition:transform .25s cubic-bezier(0, 0, .2, 1),filter .25s ease;filter:drop-shadow(0 2px 6px rgba(0, 0, 0, .4))}.video-card:hover .play-overlay .yt-play-button,.video-card:hover .play-overlay svg{transform:scale(1.12);filter:drop-shadow(0 4px 14px rgba(255, 0, 0, .5))}.video-card:hover .play-overlay{background:rgba(0,0,0,.2)}.video-duration{font-weight:500}.video-info{padding:var(--sp-lg);flex-grow:1;display:flex;flex-direction:column;gap:var(--sp-sm)}.video-title{font-size:18px;font-weight:700;color:var(--text-dark);line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.video-title a{color:inherit;text-decoration:none;transition:color .2s}.video-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;color:var(--text-muted)}.meta-dot{font-size:10px}@media (max-width:640px){.video-title{font-size:16px}}.quiz-score-card-wrap.show-modal{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;background:rgba(0,0,0,.6)!important;z-index:999999!important;display:flex!important;align-items:center!important;justify-content:center!important;backdrop-filter:blur(4px)!important;padding:0!important}.quiz-score-card-wrap.show-modal .quiz-score-card{position:relative!important;max-width:800px!important;width:90%!important;margin:0!important;display:flex!important}.profile-pic-wrapper{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;overflow:hidden;background-color:rgba(255,102,0,.1);color:#f60;font-weight:600;font-size:16px}.nav-profile-img{width:100%;height:100%;object-fit:cover}.nav-profile-initial{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1}@property --spin-angle{syntax:"<angle>";initial-value:0deg;inherits:false}.action-btn--video{background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--spin-angle),#ec4899,#3b82f6,#ec4899) border-box!important;border:2px solid transparent!important;border-radius:5px!important;color:#181059!important;font-weight:600!important;text-transform:capitalize!important;box-shadow:0 4px 20px rgba(168,85,247,.3)!important;padding:10px 30px 10px 20px!important;transition:transform .3s ease,box-shadow .3s ease!important;position:relative!important;overflow:hidden!important;animation:borderSpin 2s linear infinite!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}@keyframes borderSpin{0%{--spin-angle:0deg}100%{--spin-angle:360deg}}.action-btn--video:hover{transform:translateY(-2px)!important;box-shadow:0 6px 25px rgba(168,85,247,.5)!important}.action-btn--video svg{width:18px;height:18px;fill:currentColor;display:inline-block;flex-shrink:0}.action-btn--video::after{content:"NEW";position:absolute;top:7px;right:-20px;background:red!important;color:#ffff!important;font-size:8px!important;font-weight:800!important;padding:2px 22px!important;transform:rotate(45deg);box-shadow:0 2px 4px rgba(0,0,0,.5)!important;z-index:10;text-align:center;letter-spacing:1px!important;animation:ribbonShine 3s infinite linear}@keyframes ribbonShine{0%,80%{filter:brightness(1)}90%{filter:brightness(1.3)}100%{filter:brightness(1)}}