.course-hero { padding: 90px 0; background: linear-gradient(140deg,#f7f6ff,#eefcff); }
.course-hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 70px; align-items: center; }
.course-hero h1 { font-size: clamp(3rem,5vw,5rem); }.course-hero>p { font-size: 1.1rem; }
.course-progress-card,.outcomes-card { padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.big-course-icon { font-size: 4.5rem; }.big-progress,.lesson-progress { height: 12px; border-radius: 999px; background: #e9e8f1; overflow: hidden; }.big-progress i,.lesson-progress i { display: block; height: 100%; background: linear-gradient(90deg,var(--course-color,var(--purple)),var(--green)); border-radius: inherit; }
.course-facts { display: grid; gap: 9px; margin-top: 22px; color: var(--muted); font-weight: 800; }
.two-col { display: grid; grid-template-columns: 1fr 360px; gap: 55px; align-items: start; }.outcomes-card { position: sticky; top: 100px; }.outcomes-card>span { font-size: 3rem; }.outcomes-card ul { list-style: none; padding: 0; }.outcomes-card li { margin: 12px 0; }.safe-note { margin-top: 25px; padding: 18px; border-radius: 17px; background: #e9fbf4; }
.lesson-list { display: grid; gap: 15px; }.lesson-item { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: .25s; }.lesson-item:hover { transform: translateX(7px); border-color: var(--purple); }.lesson-item h3,.lesson-item p { margin: 4px 0; }.lesson-item small { color: var(--purple); font-weight: 900; }.lesson-number { display: grid; place-items: center; width: 50px; height: 50px; background: #f0eeff; border-radius: 16px; font-weight: 900; color: var(--purple); }
.lesson-top { position: sticky; top: 0; z-index: 80; min-height: 76px; padding: 10px 25px; background: #fff; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr minmax(240px,460px) 1fr; align-items: center; }.lesson-top>div { text-align: center; font-size: .8rem; font-weight: 900; }.lesson-progress { margin-top: 5px; height: 7px; }.close-lesson { justify-self: end; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #f2f1f7; font-size: 1.8rem; }
.animated-lesson { width: min(980px,calc(100% - 40px)); margin: auto; padding: 65px 0; }.lesson-title { display: flex; align-items: center; justify-content: space-between; gap: 25px; }.lesson-title h1 { font-size: clamp(3rem,6vw,5.4rem); margin-bottom: 10px; }.narrate-btn { border: 2px solid #dcd8ff; background: #f5f3ff; color: var(--purple); padding: 12px 18px; border-radius: 15px; font-weight: 900; cursor: pointer; }
.teacher-story { display: grid; grid-template-columns: 180px 1fr; align-items: end; margin: 45px 0 30px; }.teacher-avatar { position: relative; text-align: center; }.teacher-head { width: 110px; height: 110px; margin: auto; display: grid; place-items: center; background: #ffc08d; border: 6px solid #fff; border-radius: 50%; font-size: 3.5rem; box-shadow: var(--shadow); }.teacher-body { height: 100px; padding-top: 25px; background: #ff8d5e; color: #fff; border-radius: 35px 35px 12px 12px; font-weight: 900; }.teacher-wave { position: absolute; right: -5px; top: 80px; font-size: 2.6rem; animation: wave 1.5s infinite; }.story-bubble { position: relative; padding: 32px; border-radius: 28px 28px 28px 6px; background: #fff8df; border: 2px solid #ffe49a; }.story-bubble>span { color: #a77700; font-weight: 900; text-transform: uppercase; font-size: .75rem; }.story-bubble h2 { font-size: 2rem; margin: 7px 0; }
.animated-lesson>.kids-visual-stage,.external-animation,.lesson-video,.lesson-image { width: 100%; margin: 35px 0; border-radius: 30px; background: linear-gradient(135deg,#e9e6ff,#e8fbff); }.external-animation { min-height: 380px; display: grid; place-items: center; }.external-animation lottie-player { width: min(500px,100%); height: 380px; }.lesson-video,.lesson-image { max-height: 560px; object-fit: contain; }
.learning-steps,.activity-preview { margin: 75px 0; }.step-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }.step-card { padding: 25px; background: #fff; border: 1px solid var(--line); border-radius: 24px; }.step-card>span { font-size: 2.5rem; }.step-card small,.activity-card small { color: var(--purple); font-weight: 900; text-transform: uppercase; }.step-card h3 { margin: 10px 0; }
.activity-grid { display: grid; gap: 14px; }.activity-card { display: grid; grid-template-columns: 65px 1fr auto; align-items: center; gap: 18px; padding: 20px; border-radius: 20px; border: 1px solid var(--line); }.activity-card>span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: #f2f0ff; font-size: 2rem; }.activity-card h3,.activity-card p { margin: 3px 0; }.activity-card>b { color: var(--purple); }
.lesson-finish { padding: 30px; border-radius: 28px; background: #effcf6; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; justify-content: space-between; }.lesson-finish>div>span { font-size: 3rem; }.lesson-finish h2,.lesson-finish p { margin: 3px 0; }.lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 30px; }.lesson-nav>a { display: flex; align-items: center; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; font-weight: 900; }.lesson-nav .next { justify-content: end; text-align: right; }.lesson-nav small { display: block; color: var(--muted); font-weight: 600; }
@keyframes wave { 50% { transform: rotate(20deg); } }