:root{--app-safe-top:max(env(safe-area-inset-top,0px),var(--native-safe-top,0px));--app-safe-bottom:max(env(safe-area-inset-bottom,0px),var(--native-safe-bottom,0px));--app-safe-left:max(env(safe-area-inset-left,0px),var(--native-safe-left,0px));--app-safe-right:max(env(safe-area-inset-right,0px),var(--native-safe-right,0px))}
@media(max-width:760px){
 html[data-design="2026"] body:not(.pathHome) .workspace #main{padding-top:calc(20px + var(--app-safe-top))!important;padding-left:max(18px,var(--app-safe-left));padding-right:max(18px,var(--app-safe-right))}
 html[data-design="2026"] body:not(.authPage) .workspace{padding-bottom:calc(118px + var(--app-safe-bottom))!important}
 html[data-design="2026"] body.pathHome .workspace>header{padding-top:calc(9px + var(--app-safe-top))!important}
 html[data-design="2026"] #sidebar{bottom:calc(8px + var(--app-safe-bottom))!important}
 html[data-design="2026"] body.authPage #main{padding-top:calc(20px + var(--app-safe-top))!important;padding-bottom:calc(24px + var(--app-safe-bottom))!important}
}
/* Four choices share the remaining height instead of pushing one below the fold. */
html[data-design] #modal.lessonMode .lessonInner{padding-top:calc(10px + var(--app-safe-top))!important}
html[data-design] #modal.lessonMode .lessonInner>.modalhead{margin-bottom:12px;flex:none}
html[data-design] #modal.lessonMode .lessonInner .exerciseArea:has(>.options:not(.foundationCards)){display:flex;flex-direction:column;justify-content:flex-start;gap:12px;padding-top:0;padding-bottom:12px}
html[data-design] #modal.lessonMode .exerciseArea:has(>.options:not(.foundationCards))>h2{font-size:clamp(21px,5.8vw,27px);line-height:1.25;margin:0}
html[data-design] #modal.lessonMode .exerciseArea>.options:not(.foundationCards){flex:1 1 0!important;min-height:244px;display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(52px,1fr);gap:10px;margin:0;padding:0}
html[data-design] #modal.lessonMode .options:not(.foundationCards)>.choiceRow{display:flex;min-height:0;gap:8px}
html[data-design] #modal.lessonMode .options:not(.foundationCards) .option{min-height:52px;height:100%;padding:10px 14px;line-height:1.35;font-size:16px;box-shadow:none}
html[data-design] #modal.lessonMode .exerciseArea:has(>.options:not(.foundationCards))>.questionPrompt{margin:0;gap:12px;min-height:0;padding:0}
html[data-design] #modal.lessonMode .exerciseArea:has(>.options:not(.foundationCards)) .promptMascot{width:48px;height:58px;flex-basis:48px}
html[data-design] #modal.lessonMode .exerciseArea:has(>.options:not(.foundationCards)) .promptMascot>.heroArt{width:48px;height:58px}
html[data-design] #modal.lessonMode .exerciseArea:has(>.options:not(.foundationCards)) .promptBubble{padding:12px;min-height:0}
html[data-design] #modal.lessonMode .exerciseArea:has(>.options:not(.foundationCards)) .audioControls{margin:0;gap:8px}
html[data-design] #modal.lessonMode .exerciseArea:has(>.options:not(.foundationCards)) .audioBtn{min-height:44px;padding:10px 12px}
html[data-design] #modal.lessonMode .exerciseArea:has(>.options:not(.foundationCards)) .exerciseType{margin:0;font-size:11px}
html[data-design] #modal.lessonMode .lessonInner>.modalfoot{padding-bottom:calc(12px + var(--app-safe-bottom))!important;padding-top:10px;gap:8px}
html[data-design] #modal.lessonMode .modalfoot #feedback>small{font-size:11px;line-height:1.4}
@media(max-height:740px){html[data-design] #modal.lessonMode .lessonInner>.modalhead{margin-bottom:8px}html[data-design] #modal.lessonMode .lessonInner .exerciseArea:has(>.options:not(.foundationCards)){gap:8px}html[data-design] #modal.lessonMode .exerciseArea>.options:not(.foundationCards){min-height:224px;gap:8px}html[data-design] #modal.lessonMode .exerciseArea:has(>.options:not(.foundationCards))>h2{font-size:21px}html[data-design] #modal.lessonMode .options:not(.foundationCards) .option{font-size:15px;padding:8px 12px}}
@media(max-width:760px){html[data-design] #modal:not(.lessonMode):not(:has(.appUtilityPage)){top:var(--app-safe-top)!important;bottom:var(--app-safe-bottom)!important;max-height:calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 24px)!important}html[data-design] #modal:not(.lessonMode):not(:has(.appUtilityPage))>.modalinner,html[data-design] #modal:not(.lessonMode):not(:has(.appUtilityPage)) #modalBody>.modalinner{max-height:calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 32px)!important}}
/* One compact exercise canvas, including the guided beginner types. */
html[data-design] #modal.lessonMode .focusHead{grid-template-columns:minmax(0,1fr) 52px!important;gap:12px!important;padding:0 0 10px!important}
html[data-design] #modal.lessonMode .focusHead .focusProgress{grid-column:1;grid-row:1}
html[data-design] #modal.lessonMode .focusHead #closeSession{grid-column:2;grid-row:1;width:52px!important;min-width:52px!important;border-radius:12px!important;font:600 13px Outfit,sans-serif;padding:7px!important;opacity:1}
html[data-design] #modal .focusProgressLabel>small,html[data-design] #modal .foundationStep{display:none!important}
html[data-design] #modal.lessonMode [hidden]{display:none!important}
html[data-design] #modal.lessonMode .foundationArea{justify-content:flex-start!important;gap:10px!important;padding:4px 0 12px!important;min-height:0;overflow-y:auto}
html[data-design] #modal.lessonMode .foundationArea:has(.foundationCards){display:flex!important;flex-direction:column!important}
html[data-design] #modal.lessonMode .foundationArea>h2{font-size:clamp(20px,5.5vw,25px)!important;line-height:1.25!important;margin:0!important;flex:none}
html[data-design] #modal.lessonMode .foundationCards{display:grid!important;grid-template-columns:1fr!important;grid-auto-rows:minmax(56px,1fr);gap:8px!important;margin:0!important;flex:1 1 auto;min-height:248px}
html[data-design] #modal.lessonMode .foundationCards .foundationCard{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px!important;height:auto!important;padding:9px 12px!important;font-size:17px!important;line-height:1.3!important;border-radius:15px}
html[data-design] #modal.lessonMode .foundationCard .foundationChoiceScript{font-size:18px!important;line-height:1.4!important;margin:0!important}
html[data-design] #modal.lessonMode .foundationInlineFeedback{font-size:12px;line-height:1.3;font-weight:600;color:inherit;margin-top:3px;animation:answerSettle .18s ease-out}
html[data-design] #modal.lessonMode .foundationArea>.foundationTeacher{display:none!important}
html[data-design] #modal.lessonMode .dedicatedListening{margin:0!important;padding:0!important;flex:none;display:grid;gap:4px}
html[data-design] #modal.lessonMode .dedicatedListening .primary{min-height:46px!important;margin:0!important;padding:10px!important;font-size:15px!important}
html[data-design] #modal.lessonMode .dedicatedListening small{font-size:11px!important;line-height:1.3!important;margin:0!important}
html[data-design] #modal.lessonMode .foundationArea .foundationWord,html[data-design] #modal.lessonMode .foundationArea .scriptModel{flex:none;margin:0!important;padding:12px!important;gap:4px!important;border-radius:17px}
html[data-design] #modal.lessonMode .foundationArea .friendlyReading{font-size:27px!important}
html[data-design] #modal.lessonMode .foundationArea .foundationWord>.thai,html[data-design] #modal.lessonMode .foundationArea .scriptModel>.thai{font-size:27px!important;margin:4px 0!important;line-height:1.4!important}
html[data-design] #modal.lessonMode .foundationArea .foundationMeaning{font-size:18px!important;margin:5px 0!important}
html[data-design] #modal.lessonMode .foundationArea .foundationWord>small,html[data-design] #modal.lessonMode .foundationNewExpression{display:none!important}
html[data-design] #modal.lessonMode .foundationSceneBuddy{max-height:62px;display:flex;gap:10px;align-items:center;margin:0!important;font-size:12px}
html[data-design] #modal.lessonMode .foundationSceneBuddy>svg{width:52px;height:62px}
html[data-design] #modal.lessonMode .missionSceneVehicle{width:100px;margin:0 auto!important}
html[data-design] #modal.lessonMode .missionDialogue{padding:10px;margin:0!important;border-radius:15px}
html[data-design] #modal.lessonMode .missionDialogue p{font-size:14px;margin:4px 0;line-height:1.4}
html[data-design] #modal.lessonMode .missionChoices{gap:8px;margin:0!important}
html[data-design] #modal.lessonMode .missionChoice{min-height:56px;padding:9px 12px;gap:2px}
html[data-design] #modal.lessonMode .missionChoice strong{font-size:17px;line-height:1.3}
html[data-design] #modal.lessonMode .deliveryMap{height:130px;margin:0!important}
html[data-design] #modal.lessonMode .foundationInstruction{margin:4px 0!important;font-size:12px;line-height:1.4}
html[data-design] #modal.lessonMode .foundationKeys{margin:4px 0;gap:5px}
html[data-design] #modal.lessonMode .foundationCopy{margin:4px 0;min-height:48px;padding:8px}
html[data-design] #modal.lessonMode .foundationSpeech .foundationTeacher{display:none!important}
html[data-design] #modal .miniGameBody .miniScene{height:145px;min-height:0;margin:8px auto}
html[data-design] #modal .miniGameBody .miniIntroArt{height:125px;margin:6px auto}
html[data-design] #modal .miniGameBody h2{font-size:22px;line-height:1.25;margin:10px 0}
html[data-design] #modal .miniGameBody .miniModels>div{padding:8px;gap:8px}
html[data-design] #modal .miniGameBody .miniChoices{gap:8px;margin:10px 0}
html[data-design] #modal .miniGameBody .miniChoice{min-height:64px;padding:8px}
html[data-design] #modal .miniGameHead>small{display:none}
@keyframes answerSettle{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:700px){html[data-design] #modal.lessonMode .foundationCards{min-height:216px;grid-auto-rows:minmax(48px,1fr)}html[data-design] #modal.lessonMode .foundationCards .foundationCard{min-height:48px!important;padding:6px 9px!important;font-size:15px!important}html[data-design] #modal.lessonMode .foundationArea{gap:7px!important}html[data-design] #modal.lessonMode .foundationArea .foundationWord{padding:8px!important}html[data-design] #modal.lessonMode .foundationListen{min-height:36px;padding:6px 10px}html[data-design] #modal.lessonMode .lessonInner>.modalfoot .primary{min-height:44px!important;padding:8px!important}}
@media(prefers-reduced-motion:reduce){.foundationInlineFeedback{animation:none!important}}
html[data-design] #modal.lessonMode .foundationCards{flex:0 0 auto!important;grid-auto-rows:minmax(56px,auto)!important;min-height:0!important}
html[data-design] #modal.lessonMode .foundationCards .foundationCard{min-height:62px!important}
html[data-design] #modal .foundationInlineFeedback .lessonCoach{display:none!important}
html[data-design] #modal.lessonMode .adaptiveLesson .exerciseArea{display:flex;flex-direction:column;justify-content:flex-start;gap:8px;padding:4px 0 10px!important;min-height:0}
html[data-design] #modal.lessonMode .adaptiveMode{font-size:11px;margin:0;min-height:0;flex:none}
html[data-design] #modal.lessonMode .adaptiveMode>small{display:none}
html[data-design] #modal.lessonMode .adaptiveLesson .exerciseArea>h2{font-size:22px;line-height:1.25;margin:0}
html[data-design] #modal.lessonMode .adaptivePrompt{font-size:22px;margin:0;line-height:1.3}
html[data-design] #modal.lessonMode .adaptiveInstruction{display:none}
html[data-design] #modal.lessonMode .adaptiveListening{margin:0;padding:10px;min-height:0}
html[data-design] #modal.lessonMode .tapCards{gap:8px;margin:0;grid-auto-rows:minmax(54px,auto)}
html[data-design] #modal.lessonMode .adaptiveCard{min-height:54px;padding:8px 10px}
html[data-design] #modal.lessonMode .adaptiveCard .thai{font-size:21px;line-height:1.4}
html[data-design] #modal.lessonMode .speakingModel{margin:0;padding:10px;gap:4px}
html[data-design] #modal.lessonMode .speakingModel>.thai{font-size:23px;line-height:1.4}
html[data-design] #modal.lessonMode .speakingModel>small{font-size:17px}
html[data-design] #modal.lessonMode .papaCall{margin:0;gap:6px}
html[data-design] #modal.lessonMode .papaPortrait{width:65px;height:70px}
html[data-design] #modal.lessonMode .speechPrivacy{font-size:10px;line-height:1.35;margin:0}
html[data-design] #modal.lessonMode .adaptiveStatus{font-size:12px;line-height:1.35;margin:0}
html[data-design] #modal.lessonMode .adaptiveInput{min-height:44px;max-height:60px;font-size:22px;padding:8px;margin:0}
html[data-design] #modal.lessonMode .adaptiveMic{min-height:46px;margin:0;padding:10px}
html[data-design] #modal.lessonMode .typingModel{font-size:26px;margin:0;padding:8px;line-height:1.4}
html[data-design] #modal.lessonMode .thaiKeys{gap:5px;margin:0}
html[data-design] #modal.lessonMode .thaiKey{min-height:44px;min-width:38px;padding:5px;font-size:22px}
html[data-design] #modal.lessonMode .pairGrid{gap:8px;margin:0;min-height:0}
html[data-design] #modal.lessonMode .pairCard{min-height:56px;padding:8px;font-size:17px}
html[data-design] #modal.lessonMode .exerciseType>span,html[data-design] #modal.lessonMode .lessonCardCount{display:none}
html[data-design] #modal.lessonMode .modalfoot #feedback>small{display:none}
html[data-design] #modal.lessonMode .foundationSceneBuddy{height:54px;flex:none}
@media(max-height:700px){html[data-design] #modal.lessonMode .foundationCards .foundationCard{min-height:52px!important}html[data-design] #modal.lessonMode .papaCall{display:none}html[data-design] #modal.lessonMode .adaptiveLesson .exerciseArea{gap:5px}html[data-design] #modal.lessonMode .adaptiveLesson .exerciseArea>h2{font-size:19px}}
html[data-design] #modal.lessonMode .foundationArea:has(.foundationCards){overflow:hidden!important}
@media(max-height:700px){
 html[data-design] #modal.lessonMode .foundationArea .foundationWord{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3px!important;padding:8px!important}
 html[data-design] #modal.lessonMode .foundationArea .foundationWord>.friendlyReading{font-size:23px!important}
 html[data-design] #modal.lessonMode .foundationArea .foundationWord>.thai{font-size:23px!important;margin:0!important}
 html[data-design] #modal.lessonMode .foundationArea .foundationWord>.foundationListen{grid-column:1/-1;min-height:36px;padding:5px 8px}
 html[data-design] #modal.lessonMode .foundationArea .foundationMeaning{font-size:14px!important;margin:0!important}
 html[data-design] #modal.lessonMode .foundationCards{gap:6px!important}
 html[data-design] #modal.lessonMode .foundationCards .foundationCard{min-height:48px!important;font-size:14px!important;padding:5px 8px!important;gap:0}
 html[data-design] #modal.lessonMode .foundationCard .foundationChoiceScript{font-size:16px!important}
 html[data-design] #modal.lessonMode .foundationArea>h2{font-size:19px!important}
 html[data-design] #modal.lessonMode .foundationInlineFeedback{font-size:11px;margin:0}
}
html[data-design] #modal.lessonMode .speechInfo{font-size:11px;color:var(--sub);margin:0;flex:none}html[data-design] #modal.lessonMode .speechInfo summary{min-height:28px;cursor:pointer;padding:4px 0}html[data-design] #modal.lessonMode .speakingModel:not([hidden])~#speakingHint{display:none}html[data-design] #modal.lessonMode .nodeChangCall{margin:0;max-height:70px}html[data-design] #modal.lessonMode .nodeChangCall>div{width:62px;height:68px}html[data-design] #modal.lessonMode .nodeChangCall svg{width:62px;height:68px}
/* Sentence building and workshop variants use the same compact spacing budget. */
html[data-design] #modal.lessonMode .workshopActivity{justify-content:flex-start!important;flex:0 1 auto!important;gap:8px!important}
html[data-design] #modal.lessonMode .workshopActivity h2{font-size:21px;line-height:1.25;margin:0}
html[data-design] #modal.lessonMode .workshopPairs{margin:0;gap:8px}
html[data-design] #modal.lessonMode .workshopPairs>div{gap:8px}
html[data-design] #modal.lessonMode .workshopPairs button{min-height:64px;padding:8px;gap:3px}
html[data-design] #modal.lessonMode .workshopPairs strong{font-size:15px;line-height:1.3}
html[data-design] #modal.lessonMode .workshopPairs small{font-size:18px;line-height:1.4}
html[data-design] #modal.lessonMode .workshopInstruction,html[data-design] #modal.lessonMode .workshopStatus{font-size:12px;margin:0;line-height:1.4}
html[data-design] #modal.lessonMode .workshopPhrase{margin:0;padding:8px 0;gap:4px 8px}
html[data-design] #modal.lessonMode .workshopPhrase strong{font-size:20px;line-height:1.3}
html[data-design] #modal.lessonMode .workshopPhrase small{font-size:20px;line-height:1.4}
html[data-design] #modal.lessonMode .workshopAssembly{min-height:54px;padding:8px 0;margin:0;gap:6px}
html[data-design] #modal.lessonMode .workshopTiles{gap:6px}
html[data-design] #modal.lessonMode .workshopTiles button,html[data-design] #modal.lessonMode .workshopAnswers button{min-height:44px;padding:8px 10px;font-size:15px}
html[data-design] #modal.lessonMode .workshopSpeaker{margin:0;gap:8px}
html[data-design] #modal.lessonMode .workshopSpeaker>div{padding:10px}
html[data-design] #modal.lessonMode .workshopSpeaker>img{width:40px;height:46px}
html[data-design] #modal.lessonMode .workshopSpeaker strong{font-size:17px;line-height:1.35}
html[data-design] #modal.lessonMode .workshopSpeaker .thai{font-size:20px;line-height:1.4;margin:3px 0}
html[data-design] #modal.lessonMode .workshopDialogue>p{font-size:13px;line-height:1.4;margin:4px 0}
html[data-design] #modal.lessonMode .sceneSentence{margin:0;padding:10px;gap:8px}
html[data-design] #modal.lessonMode .sceneSentence .thai{font-size:22px;line-height:1.4}
html[data-design] #modal.lessonMode .sceneSentence>span{gap:3px}
html[data-design] #modal.lessonMode .sceneSentence small{font-size:12px}
html[data-design] #modal.lessonMode .sceneWordTag{font-size:12px;line-height:1.4;margin:0}
html[data-design] #modal.lessonMode .sceneMeaning{font-size:18px!important;line-height:1.35!important;margin:0}
html[data-design] #modal.lessonMode .sceneAssembly{min-height:56px;padding:8px;margin:0}
html[data-design] #modal.lessonMode .sceneBank{gap:6px;margin:0}
html[data-design] #modal.lessonMode .sceneBank button{min-height:44px;padding:8px}
html[data-design] #modal .miniMemoryTop{margin:0;gap:8px;min-height:0}
html[data-design] #modal .miniMemoryTop>div{width:48px;height:55px}
html[data-design] #modal .miniMemoryTop span{font-size:12px}
html[data-design] #modal .miniMemoryGrid{gap:8px;margin:10px 0}
html[data-design] #modal .miniMemoryCard{min-height:74px;padding:8px}
html[data-design] #modal .storyReader .storyScene{display:none}
html[data-design] #modal .storyReader .storyBubble{padding:12px;margin:10px 0}
html[data-design] #modal .storyReader .storyBubble>.thai{font-size:23px;line-height:1.4}
html[data-design] #modal .storyReader .storyBubble>.reading{font-size:16px}
html[data-design] #modal .storyOptions{gap:8px;margin:10px 0}
html[data-design] #modal .storyOptions>.secondary{min-height:44px;padding:10px;font-size:14px;line-height:1.4}
@media(max-height:700px){html[data-design] #modal.lessonMode .pairCard{min-height:44px;padding:6px;font-size:15px}html[data-design] #modal.lessonMode .pairGrid>div{gap:6px}html[data-design] #modal.lessonMode .workshopPairs button{min-height:56px;padding:6px}html[data-design] #modal.lessonMode .workshopSpeaker strong{font-size:15px}html[data-design] #modal.lessonMode .sceneSentence .thai{font-size:20px}}

/* Pair matching keeps its board centered and grades the second tap immediately. */
html[data-design] #modal.lessonMode .exerciseArea:has(.workshopPairs){justify-content:center!important;gap:16px!important;padding-block:16px!important}
html[data-design] #modal.lessonMode .workshopActivity:has(.workshopPairs){display:flex;flex-direction:column;justify-content:center!important;gap:16px!important;flex:0 0 auto!important}
html[data-design] #modal.lessonMode .workshopPairs{gap:12px}
html[data-design] #modal.lessonMode .workshopPairs>div{gap:12px}
html[data-design] #modal.lessonMode .workshopPairs button{min-height:clamp(88px,14svh,120px);padding:12px 10px;gap:6px;font-size:18px}
html[data-design] #modal.lessonMode .workshopPairs strong{font-size:17px;line-height:1.4}
html[data-design] #modal.lessonMode .workshopPairs small{font-size:22px;line-height:1.5}
html[data-design] #modal.lessonMode .workshopStatus{min-height:2.8em;line-height:1.4;text-align:center}
html[data-design] #modal.lessonMode .workshopPairs button.wrong{background:#ffe1d6!important;border-color:#e68b75!important;color:#793c32!important;box-shadow:inset 0 0 0 2px #e68b75!important}
html[data-design] #modal.lessonMode .workshopPairs button.paired{background:#c9f5e7!important;border-color:#37bea0!important;color:#174e42!important;opacity:1!important;box-shadow:inset 0 0 0 2px #37bea0!important}
html[data-design] #modal.lessonMode .workshopPairs button.wrong small,html[data-design] #modal.lessonMode .workshopPairs button.paired small{color:inherit!important}

/* Conversation completion keeps its prompt and equal answer rows together. */
html[data-design] #modal.lessonMode .exerciseArea:has(.workshopDialogue){justify-content:center!important;gap:18px!important;padding-block:16px!important}
html[data-design] #modal.lessonMode .workshopActivity:has(.workshopDialogue){display:flex;flex-direction:column;justify-content:center!important;gap:18px!important;flex:0 0 auto!important}
html[data-design] #modal.lessonMode .workshopActivity:has(.workshopDialogue)>h2{margin:0}
html[data-design] #modal.lessonMode .workshopSpeaker{gap:12px}
html[data-design] #modal.lessonMode .workshopSpeaker>div{padding:14px 16px}
html[data-design] #modal.lessonMode .workshopDialogue>p{margin:14px 0 0;line-height:1.5}
html[data-design] #modal.lessonMode .workshopAnswers{margin:0;gap:12px;grid-auto-rows:1fr}
html[data-design] #modal.lessonMode .workshopAnswers button{min-height:clamp(82px,12svh,108px);padding:14px 12px;font-size:17px;line-height:1.45;display:flex;flex-direction:column;align-items:center;justify-content:center}
@media(max-height:700px){html[data-design] #modal.lessonMode .exerciseArea:has(.workshopDialogue){gap:12px!important;padding-block:10px!important}html[data-design] #modal.lessonMode .workshopActivity:has(.workshopDialogue){gap:12px!important}html[data-design] #modal.lessonMode .workshopAnswers button{min-height:72px;padding:10px;font-size:16px}}