.school-bands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 28px}.school-bands button{border:2px solid transparent;background:#fffdf4;border-radius:22px;display:grid;grid-template-columns:46px 1fr;text-align:left;align-items:center;padding:13px;gap:4px 11px;color:#668064;min-height:78px}.school-bands .art{width:43px;height:43px;grid-row:span 2}.school-bands span{font-size:16px;font-weight:700}.school-bands small{font-size:10px;color:#97a18b;line-height:1.5}.school-bands [aria-pressed=true]{background:#e7eedb;border-color:#aebe95}.school-band-label{background:#eef2e4;color:#8a9d75;border-radius:12px;padding:3px 8px;font-size:10px}.classroom-diagram{width:100%;display:block;max-height:420px;font-family:ui-rounded,system-ui,sans-serif}.extra-pictures,.extra-seasons,.extra-faces,.extra-safety{display:flex;gap:17px;flex-wrap:wrap;justify-content:center;align-items:center;width:100%;padding:24px}.extra-pictures>.art,.extra-seasons>.art,.extra-faces>.art,.extra-safety>.art{width:clamp(65px,14vw,140px);height:clamp(65px,14vw,140px)}.extra-words{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px;padding:30px 18px}.extra-words b{display:block;padding:17px 22px;background:#fffbef;border-radius:20px;color:#718266;font-family:"KaiTi","Kaiti SC",system-ui,sans-serif;font-size:clamp(20px,3.6vw,37px);line-height:1.6;box-shadow:0 4px 0 #e8eadb}.extra-english{display:flex;justify-content:center;gap:25px;flex-wrap:wrap;padding:25px 17px;width:100%}.extra-english>div{flex:1 1 125px;min-width:0;max-width:230px;display:flex;align-items:center;flex-direction:column;gap:12px}.extra-picture{display:grid;place-items:center;width:112px;height:112px;background:var(--extra-color);border-radius:28px;border:1px solid #e3e6d7}.extra-picture>.art{width:88px;height:88px}.extra-english strong{font-size:clamp(19px,2.8vw,28px);line-height:1.4;color:#65816e;overflow-wrap:anywhere}.extra-english small{color:#9b9f86;font-size:14px}.extra-groups{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;padding:25px;max-width:660px}.extra-groups>span{width:55px;height:55px}.extra-groups .art{width:100%;height:100%}.extra-groups>i{font-style:normal;font-size:31px;color:#8c9d7d;padding:10px}.extra-tens{display:flex;gap:24px;flex-wrap:wrap;padding:25px;align-items:center;justify-content:center}.extra-tens>strong{width:100%;font-size:42px;color:#c29b6e}.ten-bundle{display:flex;gap:20px}.ten-bundle>i{display:flex;gap:3px;border-top:9px solid #c9a382;border-bottom:9px solid #c9a382;padding:7px 3px}.ten-bundle b,.one-sticks i{width:7px;height:110px;background:#d7b76e;border-radius:3px;display:block}.one-sticks{display:flex;gap:8px;flex-wrap:wrap;max-width:220px}.extra-equal-groups{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;padding:25px}.extra-equal-groups>span{border:3px solid #cdddb9;border-radius:32px;display:flex;flex-wrap:wrap;justify-content:center;max-width:210px;padding:12px;gap:6px}.extra-equal-groups i{display:block;width:45px;height:45px}.extra-equal-groups .art{width:100%;height:100%}.extra-pattern{display:flex;gap:15px;flex-wrap:wrap;justify-content:center;padding:25px}.extra-pattern i{width:58px;height:58px;border-radius:50%}.extra-chart{display:flex;gap:45px;padding:20px}.extra-chart>div{display:flex;flex-direction:column-reverse;gap:15px}.extra-chart b{color:#829370;font-size:19px}.extra-chart span{display:flex;flex-direction:column-reverse;gap:7px;min-height:160px}.extra-chart i{display:block;width:42px;height:42px;border-radius:50%;background:#b4c88f}.extra-chart>div+div i{background:#dfc179}.extra-solids{display:flex;gap:85px;padding:40px}.sphere{width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 30% 28%,#d6e5e2,#8cafb4);box-shadow:0 14px 13px -10px #72969575}.cube{width:95px;height:95px;margin-top:12px;background:#d2ad83;box-shadow:14px -14px #e3c79d;transform:skewY(-9deg)}.extra-sizes{display:flex;align-items:flex-end;gap:34px;padding:30px}.extra-sizes>span:first-child{width:180px;height:180px}.extra-sizes>span:last-child{width:85px;height:85px}.extra-sizes .art{width:100%;height:100%}.extra-safe-circle,.extra-online,.extra-socket,.extra-breathing,.extra-sound{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:25px;gap:18px}.extra-safe-circle .art,.extra-online .art,.extra-socket .art,.extra-breathing .art,.extra-sound .art{width:140px;height:140px}.extra-safe-circle b,.extra-online b,.extra-socket b,.extra-breathing b{font-size:23px;line-height:1.7;color:#7f9576}.extra-week{display:flex;gap:12px;padding:22px;flex-wrap:wrap;justify-content:center}.extra-week i{display:grid;place-items:center;background:#e6d6ad;width:60px;height:72px;border-radius:12px;border-top:12px solid #aec29a;font-style:normal;font-size:26px;color:#8c825e}.extra-money{display:flex;flex-wrap:wrap;padding:24px;gap:15px;max-width:500px;justify-content:center}.extra-money i{width:61px;height:61px;display:grid;place-items:center;border:4px double #c6a866;border-radius:50%;background:#f1dba3;color:#9c844d;font-style:normal;font-size:17px}.extra-money b{width:100%;font-size:26px;color:#8e996f;margin-top:10px}.extra-shop{display:flex;gap:40px;padding:25px;justify-content:center}.extra-shop>span{display:flex;flex-direction:column;gap:12px;align-items:center}.extra-shop .art{width:130px;height:130px}.extra-shop b{padding:8px 23px;border-radius:11px;background:#efdfb7;color:#9c865c;font-size:23px}.extra-sound i{width:28px;height:80px;border-right:4px solid #aec399;border-radius:50%}.is-playing .extra-breathing>.art{animation:classBreath 5s ease-in-out infinite}.is-playing .diagram-rain{animation:classRain 2s infinite;animation-delay:var(--delay)}.is-playing .diagram-ice{animation:classMelt 7s ease-in-out infinite alternate}.is-playing .extra-sound i{animation:classWave 2s infinite}.is-playing .diagram-motion{animation:softGlow 3s infinite}@keyframes classBreath{50%{transform:scale(1.13)}}@keyframes classRain{to{transform:translateY(37px);opacity:.15}}@keyframes classMelt{to{transform:translate(26px,53px) scale(.9);opacity:.5}}@keyframes classWave{50%{opacity:.3;transform:translateX(8px)}}@media(max-width:600px){.school-bands{gap:8px}.school-bands button{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 6px;gap:5px}.school-bands span{font-size:13px}.school-bands small{font-size:9px}.school-bands .art{width:34px;height:34px}.extra-english{gap:12px}.extra-english>div{flex-basis:85px}.extra-picture{width:78px;height:78px;border-radius:19px}.extra-picture>.art{width:60px;height:60px}.extra-english small{font-size:11px}.extra-groups{padding:18px;gap:5px}.extra-groups>span{width:39px;height:39px}.extra-pattern i{width:35px;height:35px}.extra-pattern{gap:9px}.extra-sizes>span:first-child{width:130px;height:130px}.extra-sizes>span:last-child{width:65px;height:65px}.extra-solids{gap:45px;padding:25px}.sphere{width:80px;height:80px}.cube{width:67px;height:67px}.extra-equal-groups>span{max-width:130px;padding:8px}.extra-equal-groups i{width:31px;height:31px}.extra-safe-circle b,.extra-online b,.extra-socket b,.extra-breathing b{font-size:18px}.extra-shop{gap:20px}.extra-shop .art{width:88px;height:88px}.extra-tens{gap:13px;padding:16px}.ten-bundle{gap:14px}.ten-bundle>i{gap:2px}.ten-bundle b,.one-sticks i{width:5px;height:77px}.one-sticks{max-width:130px}.classroom-diagram{min-height:185px}.extra-words{gap:12px;padding:19px 12px}.extra-words b{padding:12px}.extra-week i{width:40px;height:55px;font-size:21px}.extra-money{gap:10px}.extra-money i{width:44px;height:44px;font-size:13px}}@media(prefers-reduced-motion:reduce){.school-visual *{animation:none!important}}
.extra-groups>div{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;max-width:44%;padding:9px;border:2px solid #d9dfc7;border-radius:24px}.extra-groups>div:only-child{max-width:95%}.extra-groups>div>span{display:block;width:48px;height:48px}@media(max-width:600px){.extra-groups>div{padding:5px;gap:3px}.extra-groups>div>span{width:31px;height:31px}}