.html-lesson-viewer{max-width:1200px;margin:0 auto;padding:2rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(180deg,#ffffff,#f7fafc);min-height:100vh}.lesson-content{position:relative;background:white;border-radius:12px;padding:2rem;box-shadow:0 4px 20px rgba(0,0,0,.08)}.lesson-content h2,.lesson-content>h2{font-size:2.2rem!important;color:#2d3748!important;margin:2.5rem 0 1.5rem!important;font-weight:700!important;position:relative;padding-bottom:.75rem}.lesson-content h2:after{content:"";position:absolute;bottom:0;left:0;width:60px;height:4px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:2px}.lesson-content h3,.lesson-content>h3{font-size:1.7rem!important;color:#4a5568!important;margin:2rem 0 1rem!important;font-weight:600!important}.lesson-content p,.lesson-content>p{font-size:1.15rem!important;line-height:1.8!important;color:#4a5568!important;margin:1.25rem 0!important}.lesson-content strong{font-weight:700!important;color:#1a202c!important}.lesson-content em{font-style:italic!important;color:#667eea!important}.lesson-content hr{border:none!important;border-top:3px solid #e2e8f0!important;margin:3rem 0!important;border-radius:2px}.lesson-content .hero-section{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center;text-align:center;padding:4rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:24px;overflow:hidden;margin-bottom:3rem;box-shadow:0 20px 60px rgba(102,126,234,.3)}.lesson-content .hero-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,144C960,149,1056,139,1152,128C1248,117,1344,107,1392,101.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;background-size:cover;opacity:.3}.lesson-content .hero-section .hero-content{position:relative;z-index:2;color:white;animation:fadeInUp 1s ease-out}.lesson-content .hero-section h1{font-size:3.5rem;font-weight:800;margin-bottom:1.5rem;text-shadow:0 2px 20px rgba(0,0,0,.2);line-height:1.2}.lesson-content .hero-section .subtitle{font-size:1.4rem;opacity:.95;max-width:700px;margin:0 auto;line-height:1.6}.lesson-content .hero-section .hero-image{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;opacity:.2;z-index:1}.lesson-content .content-card{background:white;border-radius:20px;padding:3rem;margin-bottom:2.5rem;box-shadow:0 10px 40px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.05);transition:transform .3s ease,box-shadow .3s ease}.lesson-content .content-card:hover{transform:translateY(-5px);box-shadow:0 15px 50px rgba(0,0,0,.12)}.lesson-content .content-card h2{font-size:2.2rem;color:#2d3748;margin-bottom:1.5rem;font-weight:700;position:relative;padding-bottom:.75rem}.lesson-content .content-card h2:after{content:"";position:absolute;bottom:0;left:0;width:60px;height:4px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:2px}.lesson-content .content-card p{font-size:1.15rem;line-height:1.8;color:#4a5568;margin-bottom:1.5rem}.html-lesson-viewer img,.lesson-content .content-card img,.lesson-content div img,.lesson-content img,.lesson-content section img{width:100%!important;max-width:800px!important;height:auto!important;border-radius:.75rem!important;box-shadow:0 4px 12px rgba(0,0,0,.15)!important;margin:2rem auto!important;display:block!important;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease,box-shadow .3s ease}.html-lesson-viewer img:hover,.lesson-content img:hover{transform:scale(1.02);box-shadow:0 8px 24px rgba(0,0,0,.2)!important}.lesson-content .highlight-box{background:linear-gradient(135deg,#ffeaa7,#fdcb6e);border-left:5px solid #fdcb6e;padding:2rem 2.5rem;margin:2.5rem 0;border-radius:12px;box-shadow:0 8px 25px rgba(253,203,110,.3);animation:pulse 2s ease-in-out infinite}.lesson-content .highlight-box h3{font-size:1.5rem;color:#2d3748;margin-bottom:1rem;font-weight:700}.lesson-content .highlight-box p{font-size:1.1rem;color:#2d3748;margin:0;line-height:1.7}.lesson-content .tip-box{background:linear-gradient(135deg,#a8e6cf,#56ccf2);border-left:5px solid #56ccf2;padding:2rem 2.5rem;margin:2.5rem 0;border-radius:12px;box-shadow:0 8px 25px rgba(86,204,242,.3)}.lesson-content .tip-box h3{font-size:1.5rem;color:white;margin-bottom:1rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.1)}.lesson-content .tip-box p{font-size:1.1rem;color:white;margin:0;line-height:1.7}.lesson-content .key-points{list-style:none;padding:0;margin:2rem 0}.lesson-content .key-points li{margin-bottom:1rem;background:linear-gradient(90deg,#f7f9fc,#ffffff);border-left:4px solid #667eea;border-radius:8px;font-size:1.1rem;color:#2d3748;transition:all .3s ease;position:relative;padding:1rem 1.5rem 1rem 3rem}.lesson-content .key-points li:before{content:"✓";position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:1.3rem;color:#667eea;font-weight:700}.lesson-content .key-points li:hover{transform:translateX(10px);box-shadow:0 4px 15px rgba(102,126,234,.2)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.01)}}.animate-in{animation:fadeInUp .8s ease-out forwards;opacity:0}@media (max-width:768px){.html-lesson-viewer{padding:1rem}.lesson-content .hero-section h1{font-size:2.5rem}.lesson-content .hero-section .subtitle{font-size:1.1rem}.lesson-content .content-card{padding:2rem}.lesson-content .content-card h2{font-size:1.8rem}}html{scroll-behavior:smooth}.lesson-content table{width:100%!important;border-collapse:collapse!important;margin:2.5rem 0!important;border-radius:12px!important;overflow:hidden!important;box-shadow:0 4px 15px rgba(0,0,0,.1)!important}.lesson-content th{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:white!important;text-align:left!important;font-weight:700!important}.lesson-content td,.lesson-content th{padding:1.2rem!important;font-size:1.05rem!important}.lesson-content td{border-bottom:1px solid #e2e8f0!important;color:#4a5568!important}.lesson-content tr:hover{background:#f7fafc!important}.lesson-content tr:last-child td{border-bottom:none!important}.lesson-content ol,.lesson-content ul,.lesson-content>ol,.lesson-content>ul{margin:2rem 0!important;padding-left:2rem!important}.lesson-content li,.lesson-content>ol>li,.lesson-content>ul>li{margin:1rem 0!important;font-size:1.1rem!important;line-height:1.7!important;color:#4a5568!important}.lesson-content div[style*=background-color],.lesson-content div[style*=border-left]{padding:1.5rem 2rem!important;margin:2.5rem 0!important;border-radius:12px!important;box-shadow:0 4px 15px rgba(0,0,0,.08)!important;animation:fadeInUp .8s ease-out!important}.lesson-content pre{background:#2d3748;color:#e2e8f0;padding:1.5rem;border-radius:12px;overflow-x:auto;margin:2rem 0;font-family:Courier New,monospace;font-size:.95rem;line-height:1.6}.lesson-content code{background:#edf2f7;color:#d73a49;padding:.2rem .5rem;border-radius:4px;font-family:Courier New,monospace;font-size:.9em}