.grouping-app [hidden]{display:none!important}.grouping-controls{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:24px 0}.grouping-controls label{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0;font-size:1rem}.grouping-controls select{min-height:44px;max-width:100%;font-size:1rem}.grouping-controls .score{margin-left:auto}.grouping-board{display:grid;grid-template-columns:repeat(var(--groups,3),minmax(0,1fr));gap:14px;margin:26px 0}.grouping-beat{min-width:0;border:2px solid #87988b;border-radius:12px;background:#f3f6ee;padding:18px 10px;text-align:center}.grouping-beat h3{font-size:1rem;margin:0 0 16px}.grouping-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.grouping-dot{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;border:2px solid #547041;border-radius:50%;background:white;font-size:1rem;font-weight:650;color:#243522}.grouping-dot:first-child{background:#263e30;color:white;border-color:#263e30}.grouping-beat.is-playing{border-color:#3647b6;box-shadow:inset 0 -4px #3647b6}.grouping-dot.is-playing{outline:3px solid #3647b6;outline-offset:3px;background:#e5eaff;color:#182326}.grouping-explanation{padding:14px 20px;background:#edf5d3;border:1px solid var(--line);border-radius:12px;margin:22px 0;text-align:left;line-height:1.7}.grouping-explanation p{margin:8px 0}.grouping-explanation [data-sum]{font-weight:700;font-size:1.2rem}.grouping-app .grouping-answers{grid-template-columns:repeat(3,minmax(0,1fr));margin:24px 0;max-width:none}.grouping-answers button{font-size:1.2rem;min-height:52px}.grouping-app [data-status]{min-height:1.7em}.grouping-app [data-feedback],.grouping-rate{line-height:1.7}.grouping-app [data-feedback]{font-size:1rem}.grouping-app button:focus-visible{outline:3px solid #3647b6;outline-offset:3px}
@media(max-width:700px){.grouping-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grouping-controls label{width:100%}.grouping-controls select{flex:1 1 170px;width:0}.grouping-controls .score{margin-left:0}.grouping-app .grouping-answers{grid-template-columns:repeat(2,minmax(0,1fr))}.grouping-app .volume{flex-wrap:wrap}.grouping-app .practice-actions>.button{flex:1 1 180px}}
@media(max-width:400px){.grouping-board{grid-template-columns:1fr}.grouping-beat{padding:14px}.grouping-beat h3{margin-bottom:12px}.grouping-dots{gap:14px}}