/* BPC lesson frame v1. Shared verbatim by every lesson. Content CSS loads first. */
:root{--frame-max:1640px;--frame-gutter:clamp(28px,5vw,88px);--frame-gap:32px;--frame-title:clamp(28px,2.4vw,38px);--frame-rule:#e7e7e7}
html,body{margin:0;background:#fff;font-family:Barlow,Arial,sans-serif}
.viewportShell{width:100%;max-width:var(--frame-max);margin:0 auto;padding:32px var(--frame-gutter) 20px;box-sizing:border-box}
.viewportShell .videoHeader{display:block;height:auto;padding:0 0 28px;margin:0;border-bottom:1px solid var(--frame-rule)}
.viewportShell .backEducation{display:inline-block;font-size:15px;line-height:1.4;margin:0 0 18px;text-decoration:none}
.viewportShell .videoHeader h1{font-size:var(--frame-title);line-height:1.2;font-weight:600;margin:0 0 12px;letter-spacing:0}
.viewportShell .videoHeader p{font-size:18px;line-height:1.5;margin:0}
.viewportShell .lessonMeta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;margin:0}
.viewportShell .lessonMetaCopy{display:flex;align-items:center;flex-wrap:wrap;font-size:16px;line-height:1.4;gap:20px}
.viewportShell .lessonCount{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.viewportShell .lessonCount svg{width:19px;height:19px}
.viewportShell .topArrows{display:flex;gap:12px;flex-shrink:0}
.viewportShell .topArrows button{width:40px;height:40px;padding:6px}
.viewportShell .topArrows svg{width:28px;height:28px}
.viewportShell .classroom{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(280px,1fr);gap:var(--frame-gap);min-height:0}
.viewportShell .lessonColumn{display:flex;flex-direction:column;min-height:0;min-width:0}
.viewportShell .lessonColumn main{max-width:none;width:100%;margin:0;padding:0 14px 24px 0;min-height:0;scrollbar-gutter:stable}
.viewportShell .heading{margin:0 0 20px;padding:0;gap:16px}
.viewportShell .heading h1{font-size:32px;line-height:1.2;margin:0}
.viewportShell .heading:has(h1:empty){display:none}
.viewportShell #stage{height:auto;min-height:0;margin:0;position:relative}
.viewportShell #caption{font-size:16px;line-height:1.6;margin:18px 0 0}
.viewportShell #caption:empty{display:none}
.viewportShell .guide{min-width:0;border-left:1px solid var(--frame-rule);padding:12px 0 20px 24px}
.viewportShell .guide .companion{margin:0 0 28px;padding:0 0 24px;border-bottom:1px solid var(--frame-rule)}
.viewportShell .companion .eyebrow{font-size:12px;line-height:1.5}
.viewportShell .companion h2{font-size:28px;line-height:1.2;margin:12px 0}
.viewportShell .companion p{font-size:18px;line-height:1.5;margin:0 0 20px}
.viewportShell .companionPreview,.viewportShell #lessonVideo{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;height:auto}
.viewportShell .companionPreview img{display:block;width:100%;height:100%;object-fit:contain}
.viewportShell .companion #videoEmpty{font-size:14px;line-height:1.5;margin:14px 0 0}
.viewportShell .guideHead{font-size:25px;line-height:1.3;gap:12px;margin:0 0 16px}
.viewportShell .guide summary{font-size:16px;line-height:1.4}
.viewportShell .guide button[data-go]{font-size:16px;line-height:1.4}
.viewportShell .videoHero{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;margin:0}
.viewportShell .videoHero img{display:block;width:100%;height:100%;object-fit:contain}
.viewportShell .heroLearning{margin:24px 0 0;padding:24px 0 0;border-top:1px solid var(--frame-rule)}
.viewportShell .heroLearning h2{font-size:30px;line-height:1.2;margin:0 0 16px}
.viewportShell .heroLearning p{font-size:17px;line-height:1.6;min-height:3.2em;margin:0 0 18px}
.viewportShell .lessonColumn footer{display:grid;grid-template-columns:44px minmax(0,1fr) 100px;align-items:center;gap:12px;min-height:68px;flex:0 0 68px;padding:12px 0;margin:0;border-top:1px solid var(--frame-rule)}
.viewportShell .lessonColumn footer>button{font-size:15px;line-height:20px;padding:10px 8px;white-space:nowrap;height:42px}
.viewportShell .lessonColumn footer #next{font-size:0}
.viewportShell .lessonColumn footer #next::after{content:'Next →';font-size:15px}
.viewportShell .lessonColumn #nav{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:4px;min-width:0;overflow-x:auto}
.viewportShell #nav button{display:block;flex:0 0 30px;width:30px;height:34px;min-width:30px;margin:0;padding:0;font-size:0;line-height:32px;border:1px solid transparent;border-radius:5px;background:transparent;color:#70757b}
.viewportShell #nav button::before{content:attr(data-num);font-size:13px}
.viewportShell #nav button.active{background:#f4f5f7!important;border-color:#dce0e5!important;color:#222!important}
.viewportShell .rejectionLab{min-height:570px!important}
@media(min-width:941px){
html.fixedClassroom,html.fixedClassroom body{height:100%;overflow:hidden}
.fixedClassroom .viewportShell{position:fixed;inset:0;height:var(--lesson-viewport-height,100dvh);display:flex;flex-direction:column;overflow:hidden}
.fixedClassroom .videoHeader,.fixedClassroom .lessonMeta{flex:none}
.fixedClassroom .classroom{flex:1;overflow:hidden}
.fixedClassroom .lessonColumn main{flex:1;overflow:auto;overscroll-behavior:contain}
.fixedClassroom .guide{height:auto;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
}
@media(min-width:941px) and (max-width:1279px){.viewportShell .videoHeader h1{min-height:2.4em}.viewportShell{--frame-gutter:32px;--frame-gap:24px}.viewportShell .guide{padding-left:20px}}
@media(min-width:941px) and (max-height:800px){.viewportShell{padding-top:20px;padding-bottom:12px}.viewportShell .backEducation{margin-bottom:12px}.viewportShell .videoHeader{padding-bottom:20px}.viewportShell .lessonMeta{padding:16px 0}}
@media(max-width:940px){
.viewportShell{position:static!important;height:auto!important;max-height:none!important;padding:24px clamp(18px,4vw,32px)}
.viewportShell .videoHeader h1{font-size:clamp(26px,4vw,34px)}
.viewportShell .classroom{display:flex;flex-direction:column;gap:28px;overflow:visible}
.viewportShell .lessonColumn main{padding-right:0;overflow:visible;scrollbar-gutter:auto}
.viewportShell .guide{border-left:0;border-top:1px solid var(--frame-rule);padding:24px 0 0;overflow:visible}
.viewportShell .lessonMetaCopy{font-size:14px;gap:12px}
.viewportShell .heroLearning h2,.viewportShell .heading h1{font-size:28px}
.viewportShell .lessonColumn footer{grid-template-columns:36px minmax(0,1fr) 76px;gap:6px}
.viewportShell #nav button{flex-basis:24px;min-width:24px;width:24px}
}