.lesson__body > .lesson__world-art { height: clamp(180px, 22vw, 300px); }
.lesson__mission-title { position: absolute; z-index: 1; bottom: 16px; left: max(18px, calc((100% - 1000px) / 2)); right: 18px; max-width: 540px; color: white; text-shadow: 0 2px 10px #0d1939; }
.lesson__mission-title span { display: block; font: 800 11px/1.3 system-ui; letter-spacing: .1em; text-transform: uppercase; }
.lesson__mission-title strong { display: block; font: 900 clamp(20px, 3vw, 32px)/1.2 "Avenir Next", system-ui; margin-top: 8px; }
.mission-step-marker { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font: 800 11px/1.4 system-ui; letter-spacing: .03em; color: #087f75; margin: 0 0 16px; text-transform: uppercase; }
.mission-step-marker small { color: #716785; font-size: 11px; }
.lesson__body > .step.step--tutorial { max-width: 940px; }
.mission-explanation { background: white; border: 2px solid #dfd9ef; border-radius: 14px; padding: 18px; }
.mission-explanation summary { cursor: pointer; font: 800 15px/1.4 system-ui; color: #4e3b88; }
.mission-explanation[open] summary { margin-bottom: 20px; }
.program-stage { display: flex; min-height: 260px; align-items: center; justify-content: center; gap: 24px; padding: 32px; margin-bottom: 22px; border-radius: 22px; border: 3px solid #b4c9db; border-bottom-width: 7px; background: #152b40; background-image: linear-gradient(0deg, #102b4980, #102b4930), var(--program-art); background-size: cover; background-position: center; }
.program-stage__mentor { width: 160px; flex-shrink: 0; }.program-stage__mentor .bb-mascot-frame { width: 100%; height: auto; aspect-ratio: 1; }
.program-stage__screen { min-width: 0; flex: 1; max-width: 570px; padding: 22px; background: #20283f; color: #baf5dc; border: 3px solid #b4c9db; border-radius: 16px; box-shadow: 0 7px 0 #0e1a3080; }
.program-stage__status { font: 800 11px/1.5 system-ui; color: #b9e6e4; letter-spacing: .08em; }
.program-stage__output { min-height: 80px; margin: 16px 0 0; font: 18px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.program-stage[data-state="success"] .program-stage__screen { border-color: #4ad5a4; animation: mt-pop .4s ease both; }
.program-stage[data-state="retry"] .program-stage__screen { border-color: #f7c36c; }
.program-stage[data-state="running"] .program-stage__status { color: #f7d36e; }
@media (max-width: 600px) { .program-stage { gap: 8px; padding: 16px 10px; min-height: 220px; }.program-stage__mentor { width: 60px; }.program-stage__screen { padding: 12px; }.program-stage__output { font-size: 14px; }.lesson__mission-title strong { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .program-stage * { animation: none !important; } }