.trainer{--size: 720px}.trainer__playground{display:grid;grid-template-columns:1fr var(--size) 1fr;grid-template-rows:var(--size) auto;gap:2rem}.trainer__info{border-radius:6px;border:1px solid #cccfde}.trainer__title{color:#476bf0;padding:.8rem;text-align:center;font-size:2rem;font-weight:600;border-bottom:1px solid #dbdfec}.trainer__description{padding:1rem;line-height:1.5;max-height:calc(var(--size) - 5rem);overflow-y:scroll}.trainer__description h2{font-size:1.8rem;font-weight:600;margin-bottom:.8rem}.trainer__description p{margin-bottom:.6rem}.trainer__description ul,.trainer__description ol{padding-left:2rem;margin-bottom:.6rem}.trainer__subtitle{padding:1rem;text-align:center;font-size:1.6rem;font-weight:600;border-bottom:1px solid #dbdfec}.trainer__board-container{position:relative}.trainer__board{overflow:hidden;border-radius:4px;width:var(--size);height:var(--size);box-shadow:0 0 10px rgba(29,58,83,.1),0 5px 8px rgba(29,58,83,.08)}.trainer__overlay{position:absolute;top:0;width:100%;height:100%;background-color:hsla(0,0%,100%,.5);z-index:10;display:flex;justify-content:center;align-items:center;flex-direction:column;user-select:none}.trainer__overlay p{font-size:calc(var(--size)/6.6);line-height:.9;text-align:center}.trainer__overlay span{font-size:calc(var(--size)/7.4);line-height:1.5}.trainer__sidebar{position:relative;border-radius:6px;display:grid;grid-template-rows:auto 1fr auto;border-radius:4px;border:1px solid #cccfde}.trainer__history{max-height:var(--size);width:100%;display:grid;grid-template-columns:40px 1fr 1fr;grid-auto-rows:32px;overflow-y:scroll}.trainer__history index{user-select:none;display:flex;justify-content:center;align-items:center;color:gray;font-size:1.5rem;background-color:#f7f6f5;height:32px;border-right:1px solid #dbdfec}.trainer__history move{user-select:none;cursor:pointer;display:flex;justify-content:center;align-items:center;height:32px}.trainer__history move.active{font-weight:600;color:#1f1f1f;background-color:#c6ddf3}.trainer__history move:hover{color:#fff;background-color:#1b78d0}.trainer__help,.trainer__next{display:flex;justify-content:center;align-items:center;width:100%;border-top:1px solid #dbdfec}.trainer__help--hidden,.trainer__next--hidden{display:none}.trainer__help .btn,.trainer__next .btn{padding:1.2rem .8rem;margin:1rem;width:100%;height:4rem;border-radius:4px}.trainer__help .btn:hover,.trainer__next .btn:hover{background-color:#3356d7}.trainer__controls{display:grid;grid-template-columns:repeat(4, 1fr);padding:.5rem;width:100%;border-top:1px solid #dbdfec}.trainer__controls--hidden{display:none}.trainer__button{padding:0;margin:.5rem;display:flex;justify-content:center;align-items:center;height:4rem;border-radius:4px;transition:background-color .1s ease-in-out}.trainer__list{height:calc(100% - 6rem);overflow-y:auto}.trainer__buy{margin:1rem;height:3.9rem;background-color:#22c55e;display:flex;align-items:center;justify-content:center}.trainer__buy span{margin-left:.8rem}.trainer__buy:hover{background-color:#16a34a}.trainer__chapters{border-radius:6px;border:1px solid #cccfde}.trainer__chapters #trainer-title{margin:1rem;font-size:1.7rem;font-weight:500;padding:.9rem .6rem;text-align:center;border-radius:.6rem;background-color:#343c4a;color:#fff}.trainer__chapters #back-btn{display:none;margin:1rem;padding:1rem 1rem;width:calc(100% - 2rem)}.trainer__chapters--opened .trainer__section-name,.trainer__chapters--opened #trainer-title{display:none}.trainer__chapters--opened #back-btn{display:block}.trainer__chapters--opened .trainer__list{overflow-y:hidden}.trainer__section{max-height:100%;overflow-y:auto}.trainer__section:first-of-type{border-top:1px solid #cccfde}.trainer__section-name{display:grid;grid-template-columns:1fr auto;align-items:center;padding:.8rem 1.4rem;transition:.07s ease-in-out;border-bottom:1px solid #cccfde;user-select:none;cursor:pointer}.trainer__section-name span{color:#476bf0}.trainer__section-name:hover{background-color:#eceffb;color:#3356d7}.trainer__section ul:not(.opened){display:none}.trainer__chapter{width:100%;text-align:left;padding:.8rem 0;display:grid;grid-template-columns:3.8rem 1fr;align-items:center;border:none;transition:.07s ease-in-out;border-bottom:1px solid #cccfde;background-color:rgba(0,0,0,0);user-select:none;cursor:pointer}.trainer__chapter--active{font-weight:600}.trainer__chapter--locked{grid-template-columns:3.8rem 1fr 4.8rem;cursor:default;opacity:.85;color:#111827}.trainer__chapter--locked .material-symbols-outlined{margin-top:-1rem;margin-bottom:-1rem;font-size:2rem;color:#22c55e}.trainer__chapter:hover{background-color:#eceffb;color:#3356d7}.trainer__chapter span{margin:0 1rem;color:#476bf0;font-weight:600;text-align:center}@media screen and (max-width: 1100px){.trainer__playground{grid-template-columns:auto 1fr;gap:1rem;margin-bottom:1rem}.trainer__overlay span{transform:rotate(-90deg)}.trainer__chapters{order:1;grid-column:1/3}.trainer__chapters ul{grid-template-columns:repeat(3, 1fr)}.trainer__info{order:2;grid-column:1/3}}@media screen and (max-width: 768px){.trainer{--size: 100vw !important}.trainer__playground{grid-template-columns:1fr}.trainer__chapters{max-height:39.1rem;grid-column:1}.trainer__chapters ul{grid-template-columns:1fr}.trainer__sidebar{max-height:32.2rem}.trainer__info{grid-column:1}}