.lesson-main{flex:1;padding:20px 24px 100px;max-width:820px;margin:0 auto;width:100%}.lesson-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;padding-top:12px}.lesson-back{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#848484;text-decoration:none;padding:8px 16px 8px 12px;border-radius:99px;background:#fff;border:1px solid rgba(0,0,0,.05);transition:all .2s}.lesson-back:hover{color:#1b1b1b;border-color:#0000001a;transform:translate(-2px)}.lesson-progress-pills{display:flex;gap:6px}.progress-pill{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:#0000000a;color:#848484;transition:all .2s}.progress-pill.active{background:#1b1b1b;color:#fff;box-shadow:0 2px 8px #00000026}.progress-pill.done{background:#b2f0d1;color:#059669}.lesson-hero{border-radius:32px;padding:36px 32px;margin-bottom:24px;position:relative;overflow:hidden}.lesson-hero:after{content:"";position:absolute;top:0;right:0;width:50%;height:100%;background:linear-gradient(to left,rgba(255,255,255,.3),transparent);pointer-events:none}.hero-decoration{position:absolute;top:16px;right:24px;font-size:48px;opacity:.15;transform:rotate(12deg)}.lesson-hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;padding:8px 16px;border-radius:14px;font-size:13px;font-weight:600;color:#1b1b1b;box-shadow:0 2px 8px #0000000f;margin-bottom:20px;position:relative;z-index:1}.lesson-hero-title{font-size:clamp(28px,5vw,42px);font-weight:700;color:#1b1b1b;line-height:1.15;margin-bottom:12px;position:relative;z-index:1}.lesson-hero-desc{font-size:16px;color:#1b1b1bb3;line-height:1.6;max-width:520px;margin-bottom:16px;position:relative;z-index:1}.lesson-hero-meta{display:flex;gap:10px;position:relative;z-index:1}.meta-chip{font-size:12px;font-weight:600;padding:6px 14px;border-radius:99px;background:#fff9;color:#1b1b1b}.lesson-content{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}.lesson-card{background:#fff;border-radius:28px;padding:28px;border:1px solid rgba(0,0,0,.04);box-shadow:0 2px 12px #00000005}.lesson-card-header{display:flex;align-items:center;gap:14px;margin-bottom:18px}.card-number{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0}.lesson-card-header h2{font-size:20px;font-weight:700;color:#1b1b1b}.lesson-text{font-size:15px;color:#555;line-height:1.7;margin-bottom:16px}.lesson-callout{display:flex;align-items:flex-start;gap:12px;border-radius:18px;padding:16px 20px;border:1.5px solid}.callout-icon{font-size:20px;flex-shrink:0}.lesson-callout p{font-size:14px;color:#1b1b1b;line-height:1.55}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}.feature-item{border-radius:18px;padding:16px;display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:500;color:#1b1b1b;line-height:1.45;transition:transform .2s}.feature-item:hover{transform:translateY(-2px)}.feature-icon{font-size:20px;flex-shrink:0}.steps-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.step-item{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#fbf9f6;border-radius:16px;font-size:14px;font-weight:500;color:#1b1b1b}.step-num{width:28px;height:28px;border-radius:50%;background:#1b1b1b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0}.interactive-demo{background:#fbf9f6;border-radius:22px;padding:24px;border:1.5px solid rgba(0,0,0,.05)}.demo-header{margin-bottom:12px}.demo-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#1b1b1b;background:#fff;padding:6px 16px;border-radius:99px;box-shadow:0 1px 4px #0000000f}.demo-desc{font-size:14px;color:#848484;margin-bottom:16px}.demo-form{display:flex;flex-direction:column;gap:14px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:13px;font-weight:600;color:#1b1b1b}.form-input{width:100%;padding:12px 16px;border:1.5px solid rgba(0,0,0,.08);border-radius:14px;font-size:14px;font-family:Outfit,sans-serif;background:#fff;outline:none;transition:border-color .2s}.form-input:focus{border-color:#1b1b1b}.checkbox-group{display:flex;flex-wrap:wrap;gap:8px}.checkbox-pill{display:flex;align-items:center;gap:6px;background:#fff;padding:8px 16px;border-radius:99px;border:1.5px solid rgba(0,0,0,.06);cursor:pointer;transition:all .2s;font-size:13px;font-weight:500}.checkbox-pill:hover{border-color:#1b1b1b}.checkbox-pill input[type=checkbox]{accent-color:#1B1B1B}.demo-btn{width:100%;padding:14px 24px;background:#1b1b1b;color:#fff;border:none;border-radius:16px;font-size:15px;font-weight:700;font-family:Outfit,sans-serif;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #00000026}.demo-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0003}.code-block{background:#1b1b1b;color:#b2f0d1;padding:18px;border-radius:14px;font-size:12px;line-height:1.6;overflow-x:auto;font-family:SF Mono,Fira Code,monospace}.terminal-card{background:#1b1b1b;border-radius:18px;overflow:hidden}.terminal-dots{display:flex;gap:6px;padding:12px 16px;background:#ffffff0d}.terminal-dot{width:10px;height:10px;border-radius:50%}.terminal-body{padding:18px 20px;color:#b2f0d1;font-size:13px;line-height:1.7;font-family:SF Mono,Fira Code,monospace}.key-lesson-card{background:linear-gradient(135deg,#1b1b1b,#333)!important;border:none!important}.key-lesson-card h2{color:#fff}.key-lesson-card p{color:#ffffffe6;font-size:16px;line-height:1.7}.lesson-slider{-webkit-appearance:none;width:100%;height:6px;border-radius:99px;background:#0000000f;outline:none}.lesson-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#1b1b1b;cursor:pointer;box-shadow:0 2px 8px #0003}.lesson-tabs{display:flex;gap:6px;margin-bottom:16px}.lesson-tab{padding:8px 18px;border-radius:99px;font-size:13px;font-weight:600;border:1.5px solid rgba(0,0,0,.06);background:#fff;color:#848484;cursor:pointer;transition:all .2s;font-family:Outfit,sans-serif}.lesson-tab.active{background:#1b1b1b;color:#fff;border-color:#1b1b1b}.lesson-nav{display:flex;justify-content:space-between;align-items:center;padding-top:8px}.nav-btn{display:flex;align-items:center;gap:8px;padding:14px 24px;border-radius:16px;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s}.nav-btn-secondary{background:#fff;color:#848484;border:1.5px solid rgba(0,0,0,.06)}.nav-btn-secondary:hover{color:#1b1b1b;border-color:#0000001f}.nav-btn-primary{background:#1b1b1b;color:#fff;box-shadow:0 4px 12px #00000026}.nav-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0003}.skill-card-grid{display:flex;flex-direction:column;gap:12px}.skill-card-item{background:#fbf9f6;border-radius:20px;padding:18px 20px;display:flex;align-items:flex-start;gap:14px;cursor:pointer;transition:all .2s;border:1.5px solid transparent}.skill-card-item:hover{border-color:#00000014;transform:translateY(-2px);background:#fff}.skill-emoji{font-size:28px;flex-shrink:0}.skill-details{margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.06)}.celebration-card{background:linear-gradient(135deg,#fbe6c2,#facdd1)!important;border:none!important;text-align:center}.celebration-emoji{font-size:56px;margin-bottom:12px}@media(max-width:768px){.lesson-main{padding:16px 16px 120px}.lesson-hero{padding:28px 24px;border-radius:24px}.lesson-card{padding:22px;border-radius:22px}.feature-grid{grid-template-columns:1fr}.lesson-nav{flex-direction:column;gap:10px}.nav-btn{width:100%;justify-content:center}.lesson-progress-pills{display:none}.lesson-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}}.hidden{display:none}