.lesson-banner{margin:22px 0 28px;overflow:hidden;background:#fff;border:1px solid #c8d9ef;border-radius:14px}
.lesson-banner>img{display:block;width:100%;height:auto;max-height:360px;object-fit:cover;object-position:50% 40%}.lesson-banner>figcaption{font-size:14px;color:#435873;padding:8px 16px;background:#fff}
.lesson-thumbnail{display:block;width:100%;height:170px;object-fit:cover;border-radius:9px;margin-bottom:18px}.lesson-card .lesson-thumbnail{flex:none}
.lesson-media{margin:28px 0 36px;padding:24px;background:#f1f7ff;border:1px solid #b5cde9;border-radius:14px}
.lesson-media>h2{margin:4px 0 12px;font-size:28px}.lesson-media>.eyebrow{margin:0}.lesson-media .media-intro{font-size:17px;color:#435873;margin-top:0}
.lesson-stage{position:relative;isolation:isolate;overflow:hidden;border-radius:12px;background:#e4f1fc;min-height:330px;display:flex;align-items:end;padding:24px}
.lesson-stage-art{position:absolute;inset:0;z-index:-1}.lesson-stage-art>img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1)}
.scene-bubble{padding:18px 22px;border:1px solid #b5cfe8;border-left:5px solid #075ac4;border-radius:12px;background:#fffffff5;box-shadow:0 4px 22px #15315c14;width:100%;margin-top:130px}
.scene-bubble>.scene-step{display:inline-block;font-size:14px;font-weight:700;background:#dbefff;color:#064594;padding:3px 10px;border-radius:5px}.scene-bubble h3{font-size:23px;margin:10px 0 6px;color:#172b46}.lesson-media .scene-bubble p{font-size:18px;margin:0;line-height:1.85}
.lesson-stage[data-step='1'] .scene-bubble{border-left-color:#bc6b00}.lesson-stage[data-step='1'] .scene-step{background:#fff0d3;color:#834700}.lesson-stage[data-step='2'] .scene-bubble{border-left-color:#00735a}.lesson-stage[data-step='2'] .scene-step{background:#def5e9;color:#005842}
.scene-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none!important;padding:0!important;gap:10px;margin:18px 0}
.lesson-media .scene-progress li{font-size:15px;line-height:1.6;padding:10px;border:1px solid #afc6df;background:#fff;border-radius:7px;color:#435873}.lesson-media .scene-progress li.active{background:#075ac4;border-color:#075ac4;color:#fff;font-weight:700}
.scene-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.scene-actions .primary,.scene-actions .secondary{font-size:16px;min-height:48px;width:auto;margin:0;padding:10px 18px}
.media-announcement{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.scene-practice{background:#fff;border:1px solid #c2d6ec;padding:22px;border-radius:10px;margin-top:24px}.scene-practice h3{font-size:21px;margin:0 0 14px}.scene-practice>.secondary{display:block;width:100%;text-align:left;font-size:17px;margin:10px 0;white-space:normal}
.lesson-media .practice-feedback{font-size:17px;color:#8a4300;border-radius:8px;padding:12px;background:#fff1d9}.lesson-media .practice-feedback:empty{display:none}.lesson-media .practice-feedback.is-correct{background:#e3f6eb;color:#005b45}.lesson-media .scene-practice .small{font-size:14px;color:#435873;line-height:1.8}
.lesson-narration{margin:6px 0 12px;padding:0;border:0;background:transparent}.lesson-narration audio{display:block;width:min(420px,100%);height:40px;margin:0}.lesson-narration .narration-error{font-size:13px;line-height:1.4;color:#8a4300;margin:4px 0}.lesson-narration .narration-error:empty{display:none}
@keyframes lesson-camera{from{transform:scale(1)}to{transform:scale(1.055)}}@keyframes lesson-bubble-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes lesson-bubble-next{from{opacity:.2;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes lesson-bubble-end{from{opacity:.2;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.lesson-stage.is-playing .lesson-stage-art img{animation:lesson-camera 15s linear 1 both}.lesson-stage.is-playing[data-step='0'] .scene-bubble{animation:lesson-bubble-in .45s ease-out}.lesson-stage.is-playing[data-step='1'] .scene-bubble{animation:lesson-bubble-next .45s ease-out}.lesson-stage.is-playing[data-step='2'] .scene-bubble{animation:lesson-bubble-end .45s ease-out}
@media(max-width:750px){.lesson-media{padding:18px 14px}.lesson-media>h2{font-size:25px}.lesson-banner>img{min-height:180px;object-fit:cover}.lesson-banner>figcaption{font-size:14px}.lesson-stage{padding:14px;min-height:360px}.scene-bubble{padding:16px;margin-top:150px}.scene-bubble h3{font-size:22px}.lesson-media .scene-bubble p{font-size:18px}.scene-progress{grid-template-columns:1fr}.lesson-media .scene-progress li{font-size:15px}.scene-actions>.primary{width:100%}.scene-actions>.secondary{flex:1}.scene-practice{padding:18px 14px}.scene-practice h3{font-size:20px}}
@media(prefers-reduced-motion:reduce){.lesson-stage.is-playing .lesson-stage-art img,.lesson-stage.is-playing .scene-bubble{animation:none!important}}
@media(max-width:750px){.lesson-stage-art>img{object-position:25% 40%}}

.lesson-category{align-self:flex-start;border-radius:20px;background:#e5efff;color:#164e96;font-size:16px!important;font-weight:700;padding:4px 12px;margin:12px 0 0}.catalog-filters{flex-wrap:wrap}.catalog-filters select{flex:0 1 230px}.catalog-filters .search-form{min-width:260px}@media(max-width:750px){.catalog-filters select{max-width:none;width:100%}.catalog-filters .search-form{min-width:0}}

.constitution-thumbnail{height:170px;flex:none;display:flex;justify-content:center;align-items:center;gap:28px;border-radius:9px;background:linear-gradient(120deg,#fce8ce,#e9f1ff);margin-bottom:18px;padding:16px;overflow:hidden}.constitution-book{display:flex;align-items:center;justify-content:center;width:95px;height:132px;flex:none;border-radius:3px 9px 9px 3px;border-left:9px solid #123a75;background:#225ca2;box-shadow:6px 7px 0 #fff,8px 9px 0 #cfdbec;color:#fff6d6;font-size:19px;writing-mode:vertical-rl;letter-spacing:5px;transform:rotate(-7deg)}.constitution-caption{white-space:pre-line;color:#214164;font-size:21px;font-weight:700;line-height:1.7}@media(max-width:480px){.constitution-thumbnail{gap:16px}.constitution-caption{font-size:17px}}
