/* Four Grade 1 math and science motion models. */
.animated-lesson-label{display:inline-block;margin-top:6px;padding:3px 8px;border-radius:999px;background:#e4efff;color:#174b9e;font-size:12px;font-weight:800}
.g1-make-ten,.g1-subtract,.g1-motion{position:relative;min-height:245px}
.g1-make-ten{display:flex;align-items:center;justify-content:center;gap:22px;padding:22px 18px 58px;background:linear-gradient(#eff7ff,#e9f4fe)}
.g1-frame-group,.g1-extra-group{display:grid;gap:12px;text-align:center}
.g1-group-title{font-size:15px;font-weight:800;color:#153e70}
.g1-ten-frame{position:relative;display:grid;grid-template-columns:repeat(5,38px);gap:5px;padding:5px;border:3px solid #254e82;border-radius:9px;background:#fff}
.g1-ten-frame>span{width:38px;height:38px;border:2px solid #9db7d7;border-radius:5px;display:grid;place-items:center}
.g1-ten-frame .g1-blue-counter:after{content:'';width:28px;height:28px;border-radius:50%;background:#1873d1;box-shadow:inset -3px -3px #11539a}
.g1-ten-frame .g1-counter-moves{position:absolute;right:10px;bottom:10px;width:28px;height:28px;border-radius:50%;background:#efac21;opacity:0;z-index:1;box-shadow:inset -3px -3px #bd7511}
.g1-extra-counters{display:grid;grid-template-columns:repeat(3,28px);gap:8px;align-content:center;justify-content:center;min-height:92px}
.g1-extra-counters i{width:28px;height:28px;border-radius:50%;background:#efac21;box-shadow:inset -3px -3px #bd7511}
.g1-math-plus{color:#17539d;font-size:40px}
.g1-math-result,.g1-subtract-answer{position:absolute;bottom:10px;left:50%;transform:translateX(-50%) scale(.85);opacity:0;padding:8px 17px;border-radius:14px;background:#126f5c;color:#fff;font-size:22px;white-space:nowrap}
.playing .g1-counter-leaves{animation:g1-counter-out .5s ease 1.8s forwards}
.playing .g1-counter-moves{animation:g1-counter-in .8s ease 1.8s forwards}
.playing .g1-math-result{animation:g1-answer-in .6s ease 4.9s forwards}
.g1-subtract{display:grid;justify-items:center;align-content:center;gap:15px;padding:20px;background:linear-gradient(#f0f8ff,#ecf5fb)}
.g1-subtract-equation{color:#153f72;font-size:25px}
.g1-subtract-counters{display:grid;grid-template-columns:repeat(6,36px);gap:13px;padding:15px 20px;background:#fff;border-radius:18px;border:2px solid #b9d4ef}
.g1-subtract-counters span{position:relative;width:36px;height:36px;border-radius:50%;background:#ea764c;box-shadow:inset -4px -4px #ba4c35}
.g1-taken-counter:after{content:'×';position:absolute;inset:-6px;display:grid;place-items:center;color:#092e6d;font-size:49px;font-weight:900;opacity:0}
.playing .g1-taken-counter:after{animation:g1-cross-in .35s ease calc(1.8s + var(--g1-delay)) forwards}
.playing .g1-taken-counter{animation:g1-taken-out .4s ease calc(3.4s + var(--g1-delay)) forwards}
.g1-subtract-answer{bottom:5px}.playing .g1-subtract-answer{animation:g1-answer-in .6s ease 5s forwards}
.g1-shadow-scene{display:block;width:100%;height:auto;min-height:230px;background:#d3ebff}
.g1-shadow-label{font:700 17px system-ui,sans-serif;fill:#173c67}
.playing .g1-light-beam{animation:g1-light-up 1s ease 1.4s forwards}
.playing .g1-light-shadow{animation:g1-shadow-appears 1.1s ease 3.1s forwards}
.g1-motion{overflow:hidden;background:linear-gradient(#d3edff 0 78%,#a6d5a8 78%)}
.g1-motion-track{position:absolute;left:4%;right:4%;bottom:40px;height:9px;border-radius:9px;background:#66829d}
.g1-motion-car{position:absolute;left:13%;bottom:49px;width:106px;height:69px}
.g1-car-top{position:absolute;left:22px;top:2px;width:59px;height:30px;border-radius:28px 28px 5px 5px;background:#82c5ed;border:3px solid #164f88}
.g1-car-body{position:absolute;left:0;top:24px;width:106px;height:32px;border-radius:10px;background:#e76356;border:3px solid #923d3c}
.g1-motion-car i{position:absolute;bottom:0;width:24px;height:24px;border-radius:50%;background:#243850;border:4px solid #e8f5ff}
.g1-motion-car i:nth-of-type(1){left:15px}.g1-motion-car i:nth-of-type(2){right:15px}
.g1-push-arrow,.g1-pull-arrow{position:absolute;font-size:54px;font-weight:900;color:#1456d9;opacity:0}
.g1-push-arrow{left:4%;top:55px}.g1-pull-arrow{right:10%;top:55px;color:#0f7560}
.g1-start-marker,.g1-far-marker{position:absolute;bottom:7px;color:#173c67;font-size:14px;font-weight:800}
.g1-start-marker{left:13%}.g1-far-marker{right:15%}
.playing .g1-motion-car{animation:g1-drive 7s ease-in-out forwards}
.playing .g1-push-arrow{animation:g1-show-push 4.3s ease forwards}
.playing .g1-pull-arrow{animation:g1-show-pull 7s ease forwards}
@keyframes g1-counter-out{to{opacity:0;transform:translateX(-45px)}}
@keyframes g1-counter-in{from{opacity:1;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}
@keyframes g1-answer-in{to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes g1-cross-in{to{opacity:1}}
@keyframes g1-taken-out{to{opacity:.3}}
@keyframes g1-light-up{to{opacity:.9}}
@keyframes g1-shadow-appears{to{opacity:.78}}
@keyframes g1-drive{0%,14%{left:13%}44%{left:36%}69%{left:68%}100%{left:18%}}
@keyframes g1-show-push{0%,20%{opacity:0}33%,80%{opacity:1}100%{opacity:0}}
@keyframes g1-show-pull{0%,73%{opacity:0}82%,100%{opacity:1}}
@media(max-width:620px){
 .g1-make-ten{gap:7px;padding:14px 6px 60px}.g1-ten-frame{grid-template-columns:repeat(5,26px);gap:3px;padding:3px}
 .g1-ten-frame>span{width:26px;height:26px}.g1-ten-frame .g1-blue-counter:after{width:19px;height:19px}
 .g1-ten-frame .g1-counter-moves{right:7px;bottom:7px;width:19px;height:19px}
 .g1-extra-counters{grid-template-columns:repeat(3,18px);gap:4px;min-height:63px}
 .g1-extra-counters i{width:18px;height:18px}.g1-math-plus{font-size:26px}
 .g1-group-title{font-size:12px}.g1-motion-car{transform:scale(.78);transform-origin:left bottom}
 .g1-subtract-counters{grid-template-columns:repeat(6,28px);gap:7px;padding:12px}
 .g1-subtract-counters span{width:28px;height:28px}.g1-shadow-scene{min-height:190px}
}
@media(prefers-reduced-motion:reduce){
 .g1-make-ten *, .g1-subtract *, .g1-shadow-scene *, .g1-motion *{animation:none!important}
 .g1-counter-leaves{opacity:0}.g1-counter-moves{opacity:1!important}
 .g1-math-result,.g1-subtract-answer{opacity:1;transform:translateX(-50%) scale(1)}
 .g1-taken-counter{opacity:.3}.g1-taken-counter:after{opacity:1}
 .g1-light-beam{opacity:.9}.g1-light-shadow{opacity:.78}
 .g1-motion-car{left:18%}.g1-pull-arrow{opacity:1}
}