/* A single viewport-sized frame and a single navigation baseline for every scene. */
body{overflow:hidden}
main{width:100%;max-width:1040px;height:100dvh;padding:28px 36px}
main>section.lesson-screen{position:relative!important;display:block!important;width:100%;height:calc(100dvh - 56px)!important;min-height:0!important;max-height:none!important;margin:0!important;padding:24px!important;overflow:hidden!important;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
main>section.lesson-screen[hidden]{display:none!important}
.lesson-screen>.lesson-body{position:relative;display:flex;flex-direction:column;height:calc(100% - 76px);width:100%;min-height:0;overflow:auto;overflow-x:hidden;scrollbar-width:thin;overscroll-behavior:contain}
main>section.lesson-screen>.lesson-nav{position:absolute;bottom:20px;left:24px;right:24px;height:52px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:0;padding:0;border:0;z-index:20}
.lesson-nav .lesson-back{justify-self:start;font:400 14px/1.2 var(--sans);color:var(--muted);background:none;border:0;border-radius:8px;padding:12px 0;min-height:44px;text-decoration:none;white-space:nowrap}
.lesson-nav .lesson-nav-aux{display:flex;justify-content:center;align-items:center;gap:16px}.lesson-nav .lesson-nav-forward{justify-self:end}
main .lesson-nav .source{font:400 14px/1.2 var(--sans)!important;color:var(--muted);padding:12px 0!important;border:0!important;text-decoration:none!important;white-space:nowrap}
main .lesson-nav .next{font:500 15px/1.2 var(--sans)!important;width:auto!important;min-width:130px!important;height:46px!important;padding:12px 20px!important;margin:0!important;border:0!important;border-radius:12px!important;background:var(--clay)!important;color:var(--surface)!important;white-space:nowrap;animation:none!important}
main .lesson-nav .next span{margin-left:14px}.lesson-nav button:focus-visible{outline:3px solid var(--clay);outline-offset:4px}.lesson-nav button:hover{filter:brightness(.95)}
#intro>.lesson-body,#story-intro>.lesson-body{align-items:center;justify-content:center;gap:26px;text-align:center}
#play>.lesson-body{overflow:hidden}
.lesson-screen .stage,.lesson-screen .bulk-stage,.lesson-screen .skill-demo-stage,.lesson-screen .hook-demo-stage,.lesson-screen .casino-stage{height:100%!important;max-height:none!important;min-height:0!important;flex:1 0 100%;width:100%}
#approval-scene .approval-stage{min-height:100%;flex:1 0 auto}
.lesson-screen.prompt-theory{background:var(--lesson-panel)}
.lesson-screen .prompt-takeaway{border:0;box-shadow:none;background:none;padding:18px 12px;min-height:100%;flex:1 0 auto}
.lesson-screen .prompt-footer{margin-top:24px;padding:0;border:0}
#skill-theory .skill5-content{padding:12px 12px 24px;margin:auto;width:100%}
#skill-theory .skill5-footer{padding:0 12px 10px;border:0;justify-content:flex-start}
#recap-problem .recap-content{padding:20px 12px;margin:auto}
#recap-remedies>.lesson-body{padding:12px;gap:25px}#recap-remedies .remedies-list{margin:auto}
#final-conclusion .final-composition{padding:12px;margin:auto}
@media(max-width:650px){main{padding:14px}main>section.lesson-screen{height:calc(100dvh - 28px)!important;padding:18px!important}.lesson-screen>.lesson-body{height:calc(100% - 72px)}main>section.lesson-screen>.lesson-nav{left:18px;right:18px;bottom:16px;gap:8px}.lesson-nav .lesson-nav-aux{gap:8px}main .lesson-nav .source,.lesson-nav .lesson-back{font-size:12px!important}main .lesson-nav .next{min-width:104px!important;font-size:14px!important;padding:12px 14px!important}.lesson-nav .next span{margin-left:8px}.lesson-screen .bulk-stage{min-height:570px!important}.lesson-screen .skill-demo-stage{min-height:520px!important}.lesson-screen .hook-demo-stage,.lesson-screen .casino-stage{min-height:550px!important}.lesson-screen .stage{min-height:460px!important}#play>.lesson-body{overflow:auto}#recap-remedies>.lesson-body{padding:8px 0}#skill-theory .skill5-content{padding:10px 0 24px}#skill-theory .skill5-footer{padding:0 0 10px}#final-conclusion .final-composition{padding:10px 0}}
/* Result captions occupy their own space above the shared navigation. */
.lesson-screen .hook-demo-stage,.lesson-screen .casino-stage{height:auto!important;flex:1 1 auto}
.lesson-screen .hook-result,.lesson-screen .casino-result{flex:0 0 32px;margin:0;line-height:32px}
.lesson-screen .human-intro-art img{height:195px;width:135px}

/* Desktop: reserve room for guard replies above the illustration. */
@media(min-width:651px){
 .lesson-screen .hook-demo-stage,.lesson-screen .casino-stage{padding-top:80px}
 .hook-guard-pose,.casino-guard-pose{max-width:clamp(230px,calc(100dvh - 420px),350px);margin-inline:auto}
}

/* Keep the explanation and the complete approval decision visible on short desktops. */
@media(min-width:651px) and (max-height:780px){
 #skill-theory .skill5-content{padding-bottom:16px}
 #skill-demo .skill-workspace{grid-template-rows:auto 220px;gap:18px 22px;padding-bottom:10px}
 #skill-demo .checklist-robot{height:180px}
 #skill-demo .live-checklist{padding-top:30px;padding-bottom:16px}
 #skill-demo .live-checklist li{padding-block:8px}
 #hook-intro .hook-intro-art img{height:240px;width:249px}
 #hook-intro .prompt-footer:empty{display:none}
 #human-intro .prompt-takeaway{padding-top:8px;padding-bottom:8px}
 #human-intro .human-intro-art{margin-top:16px}
 #human-intro .human-intro-art img{height:150px;width:104px}
 #human-intro .prompt-copy>.human-main-rule{margin-top:14px}
 #human-intro .prompt-footer:empty{display:none}
 #approval-scene .approval-plan header{padding:10px 16px 8px}
 #approval-scene .approval-roster{padding:6px 16px}
 #approval-scene .approval-roster li{line-height:1.5}
 #approval-scene .approval-message{padding:9px 16px}
 #approval-scene .approval-content{min-height:100px}
 #approval-scene .approval-ad{padding:8px}
 #approval-scene .approval-plan footer{padding:7px 12px}
 #approval-scene .approval-decision{min-height:92px}
 #approval-scene .approval-decision:has(.approval-choices:not([hidden])) #approval-status{margin-bottom:8px}
 #approval-scene .approval-decision #approval-feedback{margin-top:8px}
}