@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeSlideLeft{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes fadeSlideRight{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.1)}70%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes pulseGlow{0%,to{box-shadow:0 0 20px #667eea4d}50%{box-shadow:0 0 40px #667eea99}}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes confetti{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(-100px)rotate(720deg)}}.step-content-enter{animation:.4s ease-out forwards fadeSlideIn}.step-content-forward{animation:.35s ease-out forwards fadeSlideLeft}.step-content-backward{animation:.35s ease-out forwards fadeSlideRight}.badge-enter{animation:.6s ease-out forwards bounceIn}.badge-locked{animation:.3s ease-out forwards fadeIn}.milestone-emoji{animation:.8s ease-out forwards bounceIn}.milestone-title{opacity:0;animation:.5s ease-out .3s forwards slideUp}.milestone-badge{opacity:0;animation:.4s ease-out .5s forwards scaleIn}.milestone-content{opacity:0;animation:.5s ease-out .7s forwards slideUp}.milestone-button{opacity:0;animation:.5s ease-out .9s forwards slideUp}.milestone-glow{animation:2s ease-in-out infinite pulseGlow}.btn-next{transition:all .25s}.btn-next:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66!important}.btn-next:active{transform:translateY(0)}.btn-prev{transition:all .25s}.btn-prev:hover{transform:translateY(-2px);background:#eef2ff!important}.btn-complete{transition:all .25s}.btn-complete:hover{transform:translateY(-2px);box-shadow:0 6px 20px #10a37f66!important}.sidebar-item{transition:all .2s}.sidebar-item:hover{transform:translate(3px)}.progress-bar{transition:width .6s cubic-bezier(.4,0,.2,1)}.page-enter{animation:.5s ease-out forwards fadeSlideIn}.step-badge{animation:.3s ease-out forwards scaleIn}.step-title{opacity:0;animation:.4s ease-out .1s forwards fadeSlideIn}.step-body{opacity:0;animation:.4s ease-out .2s forwards fadeSlideIn}.sidebar-overlay{z-index:200;background:#00000080;animation:.2s ease-out forwards fadeIn;display:none;position:fixed;inset:0}.sidebar-overlay.active{display:block}.sidebar-drawer{transition:transform .3s cubic-bezier(.4,0,.2,1)}.sidebar-drawer.closed{transform:translate(-100%)}.sidebar-drawer.open{transform:translate(0)}.mobile-bottom-nav{z-index:90;background:#fff;padding:12px 20px;display:none;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 10px #0000001a}.hamburger-btn{transition:all .2s}.hamburger-btn:hover{background:#eef2ff!important}@media (max-width:1023px){.desktop-sidebar{z-index:250!important;height:100vh!important;position:fixed!important;top:0!important;left:0!important;box-shadow:4px 0 20px #00000026!important}.content-area{max-width:100%!important;margin:0!important}}@media (max-width:768px){.mobile-bottom-nav{justify-content:space-between;align-items:center;display:flex!important}.desktop-nav-buttons{display:none!important}.lesson-title-bar h1{font-size:1.2rem!important}.step-title-text{font-size:1.5rem!important}.step-content-box{padding:25px!important;font-size:1rem!important}.content-main{padding:25px 15px 100px!important}.nav-top-bar{padding:12px 15px!important}.step-badge-container{margin-bottom:15px!important}}@media (max-width:480px){.lesson-title-bar{padding:15px!important}.lesson-title-bar h1{font-size:1.1rem!important}.step-title-text{font-size:1.3rem!important}.step-content-box{border-radius:12px!important;padding:20px!important;font-size:.95rem!important}.mobile-bottom-nav{padding:10px 15px!important}}@media (max-width:768px){.milestone-screen{padding:30px 15px!important}.milestone-screen h1{font-size:1.6rem!important}.milestone-emoji-circle{width:90px!important;height:90px!important;font-size:2.5rem!important}.milestone-content-box{padding:20px!important;font-size:1rem!important}}