body{background-color:#f8fafc;margin:0;font-family:'Inter',sans-serif;color:#1e293b}*{box-sizing:border-box}.tutorial-sidebar{width:280px;background:#ffffff;border-right:1px solid #e2e8f0;position:fixed;top:80px;left:0;bottom:0;padding:0;z-index:1100;display:flex;flex-direction:column;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);overflow:hidden}.sidebar-menu{flex:1;overflow-y:auto;padding:20px 16px;list-style:none;margin:0;position:relative}.sidebar-menu::before{content:'';position:absolute;left:34px;top:40px;bottom:40px;width:2px;background:#f1f5f9;z-index:0}.sidebar-menu::-webkit-scrollbar{width:5px}.sidebar-menu::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:10px}.topic{display:flex;align-items:center;padding:12px 16px;margin:4px 8px;border-radius:8px;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);cursor:pointer;position:relative;z-index:1;background:transparent;color:#64748b;font-weight:500;gap:12px}.topic:hover:not(.active){background:#f8fafc;color:#4f46e5}.topic.active{background:#6366f1;color:#ffffff !important;box-shadow:0 4px 12px rgba(99,102,241,0.25)}.topic i{font-size:16px;width:20px;text-align:center}.topic.completed i{color:#10b981}.topic.active i{color:#ffffff}.topic.locked{opacity:0.6;cursor:not-allowed}.topic-title{font-size:15px;flex:1}.topic.active .topic-title{font-weight:600}.sidebar-footer-nav{margin-top:auto;border-top:1px solid #f1f5f9;padding-top:20px}.sidebar-pro-badge{background:#eef2ff;padding:20px;border-radius:12px;margin-bottom:20px}.header.main-tutorial-header{background:rgba(255,255,255,0.95) !important;backdrop-filter:blur(10px);height:80px;border-bottom:1px solid #f1f5f9;padding:0 32px;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;z-index:1200}.header-left{display:flex;align-items:center;gap:12px}.logo-img{height:48px}.header-right{display:flex;align-items:center}.nav-controls{display:flex;align-items:center;gap:15px}.btn-nav-control{background:transparent;color:#64748b;border:none;font-size:14px;font-weight:700;padding:8px 16px;border-radius:8px;cursor:pointer;transition:0.2s}.btn-nav-control:hover{background:#f1f5f9}.btn-nav-control.primary{background:#6366f1;color:white}.user-profile-avatar{width:42px;height:42px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:16px;border:2px solid #fff;box-shadow:0 4px 12px rgba(99,102,241,0.2);overflow:hidden;transition:all 0.3s ease}.user-profile-avatar:hover{transform:scale(1.05);box-shadow:0 6px 16px rgba(99,102,241,0.3)}.user-profile-avatar img{width:100%;height:100%;object-fit:cover}.user-nav-wrapper{display:flex;align-items:center;gap:12px}.user-nav-info{text-align:right}.user-nav-info .user-name{display:block;font-size:14px;font-weight:700;color:#1e293b}.user-nav-info .user-role{display:block;font-size:11px;color:#64748b;text-transform:uppercase;font-weight:600}@media (max-width:768px){.user-nav-info{display:none}}.btn-next{background:#6366f1;color:#ffffff}.tutorial-content{margin-left:280px;margin-top:80px;padding:60px 40px;display:flex;flex-direction:column;align-items:center;background:#f9fafb}.content-wrapper{width:100%;max-width:1100px}.main-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:20px;padding:40px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}#topicContent{font-size:17px;color:#334155;line-height:1.7}#topicContent h1,#topicContent h2,#topicContent h3{color:#0f172a;margin-top:2em;margin-bottom:0.8em;line-height:1.2;font-weight:700}#topicContent p{margin-bottom:0.85em}#topicContent p:empty,#topicContent p:has(> br:only-child){display:none;margin:0}#topicContent ul,#topicContent ol{margin-bottom:1.25em;padding-left:2em}#topicContent li{margin-bottom:0.5em;line-height:1.6}#topicContent li p{margin:0;display:inline}#topicContent blockquote{border-left:4px solid #6366f1;padding:10px 20px;margin:20px 0;background:rgba(99,102,241,0.05);border-radius:0 8px 8px 0;font-style:italic;color:#475569}#topicContent code{background:#f1f5f9;padding:2px 6px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:0.9em;color:#6366f1}.intro,.callout{background:#f5f3ff;border-radius:8px;padding:24px 32px;margin:32px 0;border-left:4px solid #6366f1;position:relative}.intro::before,.callout::before{content:'\f1ab';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;left:-40px;top:24px;color:#6366f1;font-size:20px;display:none}.intro-header,.callout-header{display:flex;align-items:center;gap:12px;color:#4f46e5;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:12px}.intro h2,.callout h2{font-size:18px;color:#4338ca;margin:0 !important;font-weight:800}.intro p,.callout p{color:#1e1b4b !important;font-size:16px !important;margin-bottom:0 !important;font-style:italic;font-family:'Inter','Noto Sans Telugu',sans-serif;line-height:1.8 !important}.lesson-label{font-size:11px;font-weight:800;color:#6366f1;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:8px}.lesson-title{font-size:42px;font-weight:800;color:#0f172a;letter-spacing:-0.03em;margin-bottom:24px}.social-proof{display:flex;align-items:center;gap:12px;margin-bottom:40px}.avatar-stack{display:flex;align-items:center}.avatar-stack img{width:28px;height:28px;border-radius:50%;border:2px solid #ffffff;margin-right:-8px;background:#e2e8f0}.student-count{font-size:13px;color:#64748b;font-weight:500}.started-count-row{display:inline-flex;align-items:center;margin-top:14px;margin-bottom:40px;margin-left:4px;padding:6px 16px 6px 12px;background:#eff6ff;border-radius:50px;border:1px solid #dbeafe;box-shadow:0 2px 4px rgba(37,99,235,0.05)}.social-proof-container{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:10px}.started-count-text{font-size:12px;font-weight:600;color:#4f46e5}.code-block-container{background:#0f172a;border-radius:12px;overflow:hidden;margin:32px 0;box-shadow:0 20px 40px rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.05)}.code-header{background:rgba(255,255,255,0.03);padding:12px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,0.05)}.header-left{display:flex;align-items:center;gap:12px}.code-dots{display:flex;gap:6px}.code-dots span{width:10px;height:10px;border-radius:50%}.code-dots .red{background:#ff5f56}.code-dots .yellow{background:#ffbd2e}.code-dots .green{background:#27c93f}.lang-badge{font-size:11px;color:#94a3b8;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;background:rgba(255,255,255,0.05);padding:2px 8px;border-radius:4px}.copy-btn{background:transparent;border:1px solid rgba(255,255,255,0.1);color:#94a3b8;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;gap:6px}.copy-btn:hover{background:rgba(255,255,255,0.05);color:#ffffff;border-color:rgba(255,255,255,0.2)}.code-block{display:flex;padding:20px 0;font-family:'Fira Code','JetBrains Mono','Menlo',monospace;font-size:14px;line-height:1.6;overflow-x:auto}.line-numbers{padding:0 16px 0 20px;color:#475569;text-align:right;user-select:none;border-right:1px solid rgba(255,255,255,0.05);min-width:50px}.code-content{padding:0 24px;color:#e2e8f0;white-space:pre;flex:1}.code-content .keyword{color:#f472b6}.code-content .string{color:#34d399}.code-content .comment{color:#64748b;font-style:italic}.code-content .function{color:#60a5fa}.code-content .number{color:#fbbf24}.breadcrumb-label{font-size:13px;font-weight:500;color:#94a3b8;margin-bottom:32px;display:flex;align-items:center;gap:10px}.bc-item{color:#94a3b8;text-decoration:none;transition:all 0.2s ease}.bc-item:hover{color:#6366f1}.bc-item.active{color:#6366f1;font-weight:700}.bc-sep{font-size:8px;color:#cbd5e1;display:flex;align-items:center}.main-box h1{font-size:48px;font-weight:800;margin-bottom:24px;letter-spacing:-0.04em;color:#0f172a}.main-box h1 span{color:#6366f1}.main-box p,.main-box{font-size:18px;line-height:1.8;color:#475569;margin-bottom:40px;white-space:pre-wrap}.main-box b,.main-box strong{font-weight:800;color:#0f172a}.main-box i,.main-box em{font-style:italic}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:60px}.info-card{background:white;padding:24px;border-radius:16px;border:1px solid #f1f5f9;box-shadow:0 4px 6px -1px rgba(0,0,0,0.02)}.info-card i{font-size:20px;color:#38bdf8;margin-bottom:16px;display:block}.info-card h4{font-size:14px;font-weight:700;margin-bottom:8px}.info-card p{font-size:12px;margin:0;color:#94a3b8}.next-lesson-section{margin-top:60px;padding:24px 32px;background:#ffffff;border-radius:16px;border:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all 0.2s ease}.next-lesson-section:hover{border-color:#4f46e5;background:#f8faff;transform:translateY(-2px)}.next-lesson-meta span{font-size:11px;color:#4f46e5;text-transform:uppercase;font-weight:700;letter-spacing:0.1em}.next-lesson-meta h3{font-size:20px;font-weight:700;margin:4px 0 0;color:#0f172a}.next-lesson-btn{width:44px;height:44px;background:#4f46e5;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#ffffff;transition:all 0.3s ease}.next-lesson-section:hover .next-lesson-btn{transform:translateX(4px)}.menu-toggle{display:none;background:var(--primary-color);color:white;border:none;width:44px;height:44px;border-radius:12px;font-size:20px;cursor:pointer;align-items:center;justify-content:center;z-index:1200;box-shadow:0 4px 12px rgba(99,102,241,0.2);transition:all 0.3s ease}.menu-toggle:hover{transform:scale(1.05);background:var(--primary-hover)}.sidebar-close{display:none;position:absolute;top:20px;right:20px;width:36px;height:36px;background:#f1f5f9;color:#64748b;border:none;border-radius:50%;align-items:center;justify-content:center;font-size:16px;cursor:pointer;z-index:100;transition:all 0.2s}.sidebar-close:hover{background:#fee2e2;color:#ef4444}@media (max-width:1024px){.sidebar-close{display:flex}.tutorial-sidebar{transform:translateX(-100%);width:280px;box-shadow:none;top:60px}.tutorial-sidebar.active{transform:translateX(0);box-shadow:20px 0 50px rgba(0,0,0,0.1)}.main-tutorial-header{margin-left:0 !important;padding:0 12px !important;height:60px;position:sticky;top:0;z-index:1100;border-bottom:1px solid #f1f5f9}.tutorial-content{margin-left:0 !important;padding:20px 12px !important}.menu-toggle{display:flex;width:36px;height:36px;border-radius:10px;font-size:16px;margin-right:12px}.nav-controls{gap:8px}.btn-nav-control{padding:6px 12px;font-size:12px}}@media (max-width:768px){.header-actions{gap:10px}.btn-header{padding:8px 16px;font-size:12px}#userProfile{margin-left:10px}}@media (max-width:640px){.playground-tab-bar{flex-direction:column;align-items:flex-start !important;padding:16px;gap:16px}.playground-controls{width:100%;justify-content:space-between}.tab-item{width:100%;border-radius:8px}}.sidebar-header{padding:32px 24px 20px;border-bottom:1px solid rgba(0,0,0,0.05);display:flex;align-items:center;gap:16px;margin-bottom:12px}.sidebar-header i{font-size:38px;color:#6366f1;filter:drop-shadow(0 4px 12px rgba(99,102,241,0.15))}.sidebar-header h2{font-size:19px;font-weight:800;margin:0;color:#0f172a;letter-spacing:-0.02em}.sidebar-header p{font-size:11px;margin:0;color:#64748b;text-transform:uppercase;letter-spacing:0.1em;font-weight:700}