/* Grade 2 animated diagrams: quantities and science sequences. */
.g2-place,.g2-groups,.g2-cycle,.g2-water{position:relative;min-height:240px;padding:24px 16px;background:#eaf5ff;color:#153e70;overflow:hidden}
.g2-place-parts,.g2-group-row,.g2-cycle-steps{display:flex;justify-content:center;align-items:start;gap:18px;text-align:center}
.g2-place-parts>div{display:grid;justify-items:center;gap:9px;min-width:90px;opacity:.25}
.g2-place-parts b,.g2-group span,.g2-cycle-step b{font-size:15px}
.g2-place-parts strong{font-size:22px}
.g2-hundreds{display:grid;grid-template-columns:repeat(2,26px);gap:5px}.g2-hundreds i{width:26px;height:26px;background:#1d75c5;border:2px solid #12568e}
.g2-tens{display:flex;gap:6px}.g2-tens i{width:15px;height:57px;background:repeating-linear-gradient(to bottom,#f7ac39 0 5px,#bc6f1b 5px 6px);border:1px solid #bc6f1b}
.g2-ones{display:grid;grid-template-columns:repeat(3,15px);gap:5px}.g2-ones i{width:15px;height:15px;background:#e76569;border:1px solid #a63842}
.g2-result{margin:20px auto 0;text-align:center;font-size:23px;font-weight:800;opacity:0}
.g2-group{display:grid;justify-items:center;gap:8px;padding:8px;border:2px solid #4a82ad;border-radius:12px;background:white;opacity:.25}
.g2-group div{display:grid;grid-template-columns:repeat(2,23px);gap:5px}.g2-group i{width:23px;height:23px;border-radius:50%;background:#ee8452}.g2-group b{font-size:19px}
.g2-cycle-steps{align-items:center;flex-wrap:wrap;gap:8px}.g2-cycle-step{display:grid;justify-items:center;gap:5px;width:100px;padding:12px 4px;border:2px solid #9dc7e4;border-radius:15px;background:white;opacity:.25}
.g2-cycle-step:not(:last-child):after{content:'→';position:absolute;transform:translate(60px,15px);font-size:22px;color:#236caa}
.g2-cycle-step span{font-size:39px}.g2-cycle-again{text-align:center;font-size:18px;font-weight:800;opacity:0}
.g2-water{height:260px;background:linear-gradient(#cfeaff 0 72%,#e9ddb0 72%)}
.g2-sun,.g2-cloud,.g2-vapor,.g2-rain,.g2-label{position:absolute}.g2-sun{left:10%;top:15px;font-size:45px}.g2-cloud{right:17%;top:24px;font-size:68px;opacity:.2}.g2-vapor{left:30%;top:93px;font-size:33px;color:#176dae;opacity:0}.g2-rain{right:14%;top:105px;font-size:32px;opacity:0}
.g2-lake{position:absolute;bottom:0;left:7%;right:7%;height:65px;border-radius:50% 50% 0 0;background:#36a3d7}
.g2-label{font-size:14px;font-weight:800;padding:3px 6px;background:#fff;border-radius:6px;opacity:0}.g2-evap{left:16%;top:140px}.g2-cond{right:12%;top:15px}.g2-precip{right:8%;top:148px}.g2-collect{left:42%;bottom:15px}
.playing .g2-place-parts>div{animation:g2-appear .5s ease calc(var(--step, 0) * 1.7s) forwards}
.playing .g2-place-parts>div:nth-child(1){--step:0}.playing .g2-place-parts>div:nth-child(2){--step:1}.playing .g2-place-parts>div:nth-child(3){--step:2}
.playing .g2-group,.playing .g2-cycle-step{animation:g2-appear .5s ease calc(var(--step) * 1.7s) forwards}
.playing .g2-result,.playing .g2-cycle-again{animation:g2-appear .5s ease 5.2s forwards}
.playing .g2-vapor,.playing .g2-evap{animation:g2-appear .5s ease .6s forwards}.playing .g2-cloud,.playing .g2-cond{animation:g2-appear .5s ease 2.2s forwards}
.playing .g2-rain,.playing .g2-precip{animation:g2-appear .5s ease 3.9s forwards}.playing .g2-collect{animation:g2-appear .5s ease 5.3s forwards}
@keyframes g2-appear{to{opacity:1}}
@media(max-width:480px){.g2-place-parts,.g2-group-row{gap:6px}.g2-place,.g2-groups,.g2-cycle{padding:18px 6px;min-height:245px}.g2-place-parts>div{min-width:79px}.g2-group{padding:6px 3px}.g2-group span{font-size:12px}.g2-cycle-step{width:72px}.g2-cycle-step b{font-size:12px}.g2-cycle-step:not(:last-child):after{transform:translate(44px,13px);font-size:17px}.g2-cycle-step span{font-size:30px}}
@media(prefers-reduced-motion:reduce){.g2-place-parts>div,.g2-group,.g2-cycle-step,.g2-result,.g2-cycle-again,.g2-vapor,.g2-cloud,.g2-rain,.g2-label{animation:none!important;opacity:1!important}}