[hidden]{display:none!important}
nav{width:207px;max-height:calc(100% - 250px);overflow-y:auto}
.groups{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:8px}
.groups button{border:0;border-radius:8px;padding:8px 3px;font-size:10px;background:#eceedd}
.groups button.active{background:#d3dfbd}
.lesson{padding:10px 8px}.lesson small{line-height:1.4}
#compareControls{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#compareControls button{border:1px solid #d6d9c7;border-radius:12px;background:#f1f2e5;padding:8px 10px;font-size:11px}
#compareControls button.event-active{background:#f0d8b4}
#miniQuiz{flex-basis:100%;padding:10px;background:#f5edda;border-radius:12px}
#miniQuiz p{margin:4px 0 8px;line-height:1.5}
#quizFeedback{color:#526f50}
#explanation{max-height:55vh;overflow:auto}
@media(max-width:750px){
nav{width:calc(100% - 28px);max-width:500px;max-height:130px;bottom:269px;flex-wrap:wrap;justify-content:center;overflow:auto}
.groups{flex-basis:100%;grid-template-columns:repeat(4,1fr);margin:0 0 3px}
.groups button{padding:6px 3px}
.lesson{width:calc(100% / 5);min-width:55px;padding:5px 2px}
.lesson b{font-size:8px}
.subtitle{max-height:235px;overflow:auto;bottom:27px;padding:13px 16px;min-height:190px}
.subtitle h2{font-size:19px}
.timeline{margin-top:9px;padding-top:8px}
#compareControls button{font-size:10px;padding:6px 8px}
#speech{top:26%;font-size:12px}
footer{bottom:8px;font-size:6px}
}