/* Each material page fills the application's 1920 x 1080 (16:9) stage. */
.lesson-reader{overflow:hidden}
#materi .topbar{position:absolute;left:0;right:0;top:0;z-index:3;padding:25px 46px 16px;padding-right:470px;min-height:112px;background:linear-gradient(#10303de8,#10303d00)}
#materi .topbar h2{font-size:46px}
.lesson-deck{position:absolute;inset:0;aspect-ratio:16/9}
.lesson-page{position:absolute;inset:0;aspect-ratio:16/9;padding:142px 58px 140px;display:flex;flex-direction:column;gap:23px;overflow:hidden;animation:lesson-in .22s ease-out}
.lesson-heading{display:flex;flex-direction:column;gap:9px;flex-shrink:0}
.lesson-heading .eyebrow{color:#b5d5c5;font-size:18px;letter-spacing:.12em}
.lesson-heading h3{font:800 52px/1.1 var(--display);color:#ffdb86;margin:0;max-width:1600px}
.lesson-content{display:flex;flex-direction:column;gap:22px;min-height:0;font:26px/1.5 var(--body);color:#f4f5e9}
.lesson-content p{margin:0;max-width:92ch;line-height:1.5}
.lesson-content>.grid2,.lesson-content>.acts,.lesson-content>.lesson-route{width:100%;gap:24px}
.lesson-content .def{padding:25px 28px;gap:13px;border:1px solid #8ea99b55;box-shadow:0 10px 25px #062d3820}
.lesson-content .def b{font-size:37px;line-height:1.12}
.lesson-content .def .muted{color:#d2ddd1}
.lesson-types .opt-img{display:block;width:100%;height:240px;object-fit:contain;background:#dcece7;border-radius:15px;margin-bottom:6px}
.lesson-content .acts{grid-template-columns:repeat(3,1fr)}
.lesson-content .acts>div{padding:27px 29px;border:1px solid #6f96875c;border-radius:24px;background:#194353;font-size:26px;line-height:1.52}
.lesson-content .acts>div>b{font:800 34px/1.15 var(--display);margin-bottom:16px;color:#ffdd91}
.lesson-content .bubble{grid-template-columns:95px 1fr;padding:21px 27px;gap:20px;font-size:25px;line-height:1.5}
.lesson-content .bubble>img{width:95px;height:110px;object-fit:contain}
.lesson-content .bubble p{max-width:none}
.lesson-content .tabs{gap:13px;margin-bottom:0}
.lesson-content .tabs .tab{font-size:25px;padding:13px 22px}
.lesson-content .concept{grid-template-columns:repeat(3,1fr)!important;gap:15px}
.lesson-content .concept>div{font-size:25px;line-height:1.4;padding:19px 24px;border:1px solid #729a8b44;border-radius:18px}
.lesson-content .concept b{font-size:32px;line-height:1.2;margin-bottom:8px;color:#ffe2a0}
.lesson-content #conceptBody .bubble{margin-top:20px!important}
.lesson-sort .sort-pool{gap:12px}
.lesson-sort .mv{font-size:24px;padding:11px 20px;line-height:1.3}
.lesson-sort .bin{min-height:174px;padding:21px;gap:14px;font-size:25px}
.lesson-sort .bin b{font-size:34px}
.lesson-sort .bin .got span{font-size:22px;padding:5px 12px}
.lesson-sort .fb{font-size:24px;line-height:1.4;padding:16px 22px}
.lesson-motion .lesson-two-activities{grid-template-columns:1fr 1fr}
.lesson-motion .motion-picture{height:265px;aspect-ratio:auto;margin-bottom:20px}
.lesson-motion .motion-picture>.pose-window{left:calc(50% - 106px);width:212px}
.lesson-motion .lesson-demo-link{display:block;width:max-content;max-width:100%;margin-top:18px;font-size:23px!important;padding:11px 18px!important}
.lesson-intro>.lesson-content{gap:32px}
.lesson-intro .def{padding:38px;min-height:240px;justify-content:center;font-size:29px}
.lesson-compare .running-compare{font-size:30px;line-height:1.6;padding:36px;gap:30px 35px;margin:0;border:1px solid #88a99a55}
.lesson-compare .lesson-content>p{font-size:28px;padding:27px 32px;border-left:6px solid #f3bc58;background:#173e4b;border-radius:0 20px 20px 0}
.lesson-content .learn-table{font-size:27px;line-height:1.5;background:#143b48;border-radius:22px;overflow:hidden}
.lesson-content .learn-table th{font-size:26px;padding:23px 27px}
.lesson-content .learn-table td{padding:27px;line-height:1.55}
.lesson-content .learn-table td:first-child{width:26%}
.lesson-content .learn-table td:nth-child(2){width:35%}
.lesson-game-compare .motion-picture{height:270px;aspect-ratio:auto;margin:0 0 10px}
.lesson-game-compare .motion-picture>img{object-fit:contain}
.lesson-game-compare .motion-picture>.pose-window{left:calc(50% - 108px);width:216px}
.lesson-game-compare .def{font-size:28px}
.lesson-content .lesson-route>div{font-size:27px;line-height:1.6;padding:34px;border:1px solid #86ab9555;min-height:420px}
.lesson-content .lesson-route b{font-size:36px;line-height:1.2;margin-bottom:24px}
.lesson-reflection .lesson-content>p{max-width:none;background:#1c4653;border-radius:22px;padding:35px 39px;font-size:29px;line-height:1.65;border:1px solid #83ad9655}
.lesson-camera .lesson-content>p{max-width:none}
.lesson-camera .camera-lesson-figure{margin:0;border:1px solid #d4ead9;border-radius:23px}
.lesson-camera .camera-lesson-figure img{height:350px;max-height:none}
.lesson-camera .camera-lesson-figure figcaption{font-size:23px;padding:14px 20px}
.lesson-ready .ind{gap:20px}
.lesson-ready .ind li{font-size:27px;line-height:1.5;grid-template-columns:52px 1fr;gap:21px}
.lesson-ready .lesson-content>.muted{font-size:23px;max-width:none}
.lesson-ready .actions{margin-top:6px}
.lesson-controls{position:absolute;z-index:4;left:46px;right:46px;bottom:24px;display:flex;align-items:center;gap:23px;padding:17px 20px;border:1px solid #85aa9766;background:#0b2d3bf2;border-radius:24px;box-shadow:0 -10px 30px #06273433}
.lesson-controls .btn{font-size:27px;min-height:65px;white-space:nowrap;padding:14px 25px}
.lesson-controls .btn:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}
.lesson-position{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px 12px;flex:1;min-width:0}
.lesson-position>label{font-size:18px;color:#bad6c6}
.lesson-position select{font:20px var(--body);color:#fff4d6;background:#204755;border:1px solid #8cb3a580;border-radius:12px;padding:9px 12px;min-height:44px;min-width:0;width:100%}
.lesson-position progress{grid-column:1/-1;width:100%;height:6px;border:0;overflow:hidden;border-radius:6px;accent-color:#ffd077;background:#32555f}
.lesson-position progress::-webkit-progress-bar{background:#32555f}.lesson-position progress::-webkit-progress-value{background:#ffd077}
#lessonStatus{font-size:22px;color:#e1eddc;white-space:nowrap;min-width:170px;text-align:center}
.material-references .reference-entry{font-size:25px;line-height:1.65;max-width:none}
.reference-sections{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.reference-sections>span{padding:22px;background:#214855;border:1px solid #8bac9650;border-radius:18px;font-size:20px;line-height:1.55}
.reference-sections b{display:block;font:800 29px/1.2 var(--display);color:#f4d28d;margin-bottom:10px}
.material-references>p{max-width:none;font-size:22px}
.material-references .actions a{text-decoration:none}
@keyframes lesson-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lesson-page{animation:none}}

.lesson-camera .camera-lesson-figure img{object-fit:contain;width:100%;background:#e9eee1}
/* Give the instructional artwork enough room to read its camera and height labels. */
.lesson-camera .lesson-content{display:grid;grid-template-columns:520px minmax(0,1fr);gap:36px;align-items:start}
.lesson-camera .lesson-content>p{font-size:28px;line-height:1.65;padding:24px 12px 0 0}
.lesson-camera .camera-lesson-figure{width:100%;max-width:1120px;justify-self:center;overflow:hidden;background:#e6f3ee}
.lesson-camera .camera-lesson-figure img{display:block;width:100%;height:560px;object-fit:contain;background:#e9eee1}
.lesson-camera .camera-lesson-figure figcaption{line-height:1.4}