/* Use the available lesson height; long content still scrolls naturally. */
html[data-design] #modal .lessonInner .exerciseArea:has(:is(.options,.tapCards,.foundationChoices,.missionChoices,.workshopActivity)){display:flex;flex-direction:column;justify-content:space-evenly;gap:18px;padding-bottom:20px}
html[data-design] #modal .lessonInner .exerciseArea:has(:is(.options,.tapCards,.foundationChoices,.missionChoices,.workshopActivity))>*{flex-shrink:0}
html[data-design] #modal .exerciseArea>.options{width:100%;margin:0;gap:12px}
html[data-design] #modal .exerciseArea>.options>.option{min-height:clamp(58px,9dvh,94px);display:flex;align-items:center}
html[data-design] #modal .workshopActivity{display:flex;flex-direction:column;justify-content:space-evenly;flex:1;gap:16px}
html[data-design] #modal .workshopActivity>h2{margin-bottom:4px}
html[data-design] #modal .workshopActivity .workshopAnswers{margin-top:0}
html[data-design] #modal .characterQuiz .characterStoryBody{display:flex;flex-direction:column;gap:12px;padding-top:12px;padding-bottom:20px}
html[data-design] #modal .characterQuiz .quizPortrait{flex:none;margin:0 auto}
html[data-design] #modal .characterQuiz .quizPortrait>.storyPerson{width:76px;height:88px}
html[data-design] #modal .characterQuiz .characterStoryBody>h2{margin:0;font-size:clamp(22px,5.7vw,30px);line-height:1.35}
html[data-design] #modal .characterQuiz .characterChoices{flex:1;display:grid;grid-auto-rows:minmax(58px,1fr);gap:12px;margin:6px 0 0;min-height:min(42dvh,420px)}
html[data-design] #modal .characterQuiz .characterChoice{margin:0;display:flex;align-items:center;padding:14px 18px;font-size:17px;line-height:1.5}
html[data-design] #modal .characterQuiz .characterHint:empty{display:none}
/* Menus fit their contents rather than inheriting the lesson's full-screen height. */
html[data-design] #modal:has(.characterLibrary){height:fit-content!important;min-height:0!important;max-height:calc(100dvh - 24px);inset:0;margin:auto;width:calc(100% - 24px);border-radius:24px}
html[data-design] #modal:has(.characterLibrary) #modalBody{height:auto!important;min-height:0!important}
html[data-design] #modal .characterLibrary{height:auto!important;min-height:0!important;padding:22px;overflow-y:auto}
html[data-design] #modal .characterLibrary .sheetHeader{margin-bottom:18px}
html[data-design] #modal .characterCover{height:132px}
html[data-design] #modal .characterCover>.storyPerson{height:126px;width:108px}
html[data-design] #modal .characterStoryGrid{gap:12px}
html[data-design] #modal .characterStoryCopy{padding:13px}
html[data-design] #modal .characterStoryCopy strong{font-size:16px;line-height:1.35}
html[data-design] #modal .characterLibrary>.supportDetails{margin-bottom:0}
@media(max-height:700px){html[data-design] #modal .characterQuiz .quizPortrait>.storyPerson{width:52px;height:60px}html[data-design] #modal .characterQuiz .characterChoices{min-height:260px}html[data-design] #modal .lessonInner .exerciseArea{gap:12px!important}}

html[data-design] #modal .exerciseArea>.missionChoices{width:100%;display:grid;gap:12px;margin:0}
html[data-design] #modal .missionChoices button{min-height:clamp(58px,9dvh,94px);display:flex;align-items:center}
html[data-design] #modal .miniGameBody{display:flex;flex-direction:column;justify-content:space-evenly;gap:18px}
html[data-design] #modal .miniGameBody>*{flex-shrink:0}