.puzzle{--size: 720px}.puzzle__playground{display:grid;grid-template-columns:1fr var(--size) 1fr;grid-template-rows:var(--size) auto;gap:2rem}.puzzle__info{border-radius:6px;border:1px solid #cccfde}.puzzle__title{color:#476bf0;padding:.8rem;text-align:center;font-size:2rem;font-weight:600;border-bottom:1px solid #dbdfec}.puzzle__description{padding:1rem;line-height:1.5;max-height:calc(var(--size) - 5rem);overflow-y:scroll}.puzzle__description h2{font-size:1.8rem;font-weight:600;margin-bottom:.8rem}.puzzle__description p{margin-bottom:.6rem}.puzzle__description ul,.puzzle__description ol{padding-left:2rem;margin-bottom:.6rem}.puzzle__subtitle{padding:1rem;text-align:center;font-size:1.6rem;font-weight:600;border-bottom:1px solid #dbdfec}.puzzle__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)}.puzzle__sidebar{border-radius:6px;display:grid;grid-template-rows:auto 1fr auto;border-radius:4px;border:1px solid #cccfde}.puzzle__history{width:100%;display:grid;grid-template-columns:40px 1fr 1fr;grid-auto-rows:32px;overflow-y:scroll}.puzzle__history index{display:flex;justify-content:center;align-items:center;color:gray;font-size:1.5rem;background-color:#f7f6f5;height:32px;border-right:1px solid #dbdfec}.puzzle__history move{cursor:pointer;display:flex;justify-content:center;align-items:center;height:32px}.puzzle__history move.active{font-weight:600;color:#1f1f1f;background-color:#c6ddf3}.puzzle__history move:hover{color:#fff;background-color:#1b78d0}.puzzle__help,.puzzle__next-problem{display:flex;justify-content:center;align-items:center;width:100%;border-top:1px solid #dbdfec}.puzzle__help--hidden,.puzzle__next-problem--hidden{display:none}.puzzle__help .btn,.puzzle__next-problem .btn{padding:1.2rem .8rem;margin:1rem;width:100%;height:4rem;border-radius:4px;background-color:#1b78d0}.puzzle__help .btn:hover,.puzzle__next-problem .btn:hover{background-color:#3356d7}.puzzle__controls{display:none;grid-template-columns:repeat(4, 1fr);padding:.5rem;width:100%;border-top:1px solid #dbdfec}.puzzle__controls--active{display:grid}.puzzle__button{padding:0;margin:.5rem;display:flex;justify-content:center;align-items:center;height:4rem;border-radius:4px;color:#fff;background-color:#1b78d0;transition:background-color .1s ease-in-out}.puzzle__chapters{grid-area:chapters}.puzzle__chapters ul{display:grid;grid-template-columns:repeat(auto-fill, minmax(3.8rem, 1fr));grid-gap:.5rem}.puzzle__chapters li{list-style:none}.puzzle__chapter{padding:0 10px;height:3.8rem;width:3.8rem;display:flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid #cccfde;border-radius:4px}.puzzle__chapter--solved{color:#007b34;background-color:#e8fdf3;border:1px solid #82dca7}.puzzle__chapter--active{font-weight:600;border:2px solid #1b78d0}.puzzle__chapter:hover{border:2px solid #1b78d0}@media screen and (max-width: 1100px){.puzzle__playground{grid-template-columns:auto 1fr;gap:1rem}.puzzle__info{order:1;grid-column:1/3;margin-bottom:1rem}}@media screen and (max-width: 768px){.puzzle{--size: 100vw !important}.puzzle__playground{grid-template-columns:1fr}.puzzle__info{grid-column:1}}