.sort-boxes{display:grid;grid-template-columns:repeat(var(--boxes),1fr);gap:14px;max-width:850px;margin:auto}.sort-box{min-height:165px;background:#fff9;border:4px solid #cfbfdc;border-bottom-width:10px;border-radius:20px;padding:16px;display:flex;align-items:center;flex-direction:column;gap:12px}.shape{display:inline-block;width:56px;height:56px;background:var(--shape-color);flex-shrink:0}.red{--shape-color:#e8948d}.blue{--shape-color:#86b1d5}.yellow{--shape-color:#edc45b}.purple{--shape-color:#b699dd}.circle{border-radius:50%}.square{border-radius:6px}.triangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.sort-tray{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;max-width:760px;margin:15px auto}.sort-token{width:85px;height:85px;display:grid;place-items:center;background:white;border:2px solid #e0d3e9;border-bottom-width:5px;border-radius:18px;cursor:grab}.sorted{display:flex;gap:8px;min-height:30px}.sorted .shape{width:25px;height:25px}.sorted-away{visibility:hidden}.sort-box:hover{background:#fff}.sort-box:focus-visible{outline-offset:4px}@media(max-width:650px){.sort-boxes{gap:8px;grid-template-columns:repeat(2,1fr)}.sort-box{min-height:118px;padding:10px}.sort-boxes:has(> :last-child:nth-child(3)){grid-template-columns:repeat(3,1fr)}.shape{width:44px;height:44px}.sort-token{width:68px;height:68px}.sort-tray{gap:10px}.sort-box .sorted{gap:3px}}