:root{font:16px/1.6 system-ui,sans-serif;color:#263a35;background:#faf9f5}*{box-sizing:border-box}body{margin:0}button,a{touch-action:manipulation}button{font:inherit;background:#fff;border:1px solid #b7c9bf;border-radius:12px;padding:11px 18px;cursor:pointer;min-height:44px;color:inherit}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #b07a2f;outline-offset:3px}a{color:#386a55}header{max-width:1200px;margin:auto;padding:20px 24px;display:flex;justify-content:space-between;border-bottom:1px solid #dce2db;gap:16px;align-items:center}.brand{font-size:26px;font-weight:750;text-decoration:none}.brand span{font-size:11px;letter-spacing:2px;margin-left:12px}header nav{display:flex;gap:16px;font-size:13px}main{max-width:1200px;margin:30px auto;display:grid;grid-template-columns:310px minmax(0,1fr);gap:30px;padding:0 24px}#teacherStage{position:sticky;top:20px;align-self:start;border:1px solid #dce2db;border-radius:20px;overflow:hidden;background:white;padding-bottom:16px}#portrait{height:370px;background-image:url('/assets/english-team.png');background-size:auto 520px;background-repeat:no-repeat;background-position:27% 0}#teacherStage[data-teacher=lily] #portrait{background-position:51% 0}#teacherStage[data-teacher=noah] #portrait{background-position:78% 0}.teacher-caption{display:flex;flex-direction:column;padding:12px 18px}#speaking{font-size:12px;color:#687970}#greeting{margin:0 18px}#teacherStage.playing{box-shadow:0 0 0 3px #a8c9b7}.teacher-buttons,.categories,.play-actions,.advance{display:flex;gap:10px}.teacher-buttons button{flex:1}.teacher-buttons small{display:block;font-size:11px}button[aria-pressed=true]{background:#e1eee5;border-color:#4e795f}.categories{margin:20px 0 10px}.categories button{flex:1}.quiet{font-size:13px;color:#6a7c70}#card{background:white;border:1px solid #dce2db;border-radius:18px;padding:28px;min-height:380px}h1{font-size:28px;line-height:1.4;margin:12px 0}.eyebrow{font-size:12px;letter-spacing:1px;color:#52816c}.primary{background:#35654f;color:white;border-color:#35654f}#choices{display:grid;gap:9px;margin:20px 0}#choices button{text-align:left}#english{font-size:23px;line-height:1.45}#korean{font-size:18px}#result{color:#366c50;font-weight:700}#status{font-size:13px;color:#a44638}#wordMeaning{font-size:14px}.help{font-size:13px;margin-top:18px}summary{cursor:pointer}footer{max-width:1152px;margin:30px auto;padding:20px;border-top:1px solid #dce2db;font-size:12px}[hidden]{display:none!important}
@media(max-width:740px){body{height:100dvh;overflow:hidden}header{height:58px;padding:10px 14px}.brand{font-size:20px}.brand span{font-size:9px;margin-left:4px}header nav{gap:10px;font-size:11px}main{height:calc(100dvh - 58px);margin:0;display:flex;flex-direction:column;gap:8px;padding:10px 12px 16px}#teacherStage{position:relative;top:0;display:flex;align-items:center;width:100%;height:82px;min-height:82px;padding:0;border-radius:14px}#portrait{width:82px;height:82px;flex-shrink:0;background-size:auto 195px;background-position:27% 0}#teacherStage[data-teacher=lily] #portrait{background-position:51% 0}#teacherStage[data-teacher=noah] #portrait{background-position:77% 0}.teacher-caption{padding:8px;font-size:13px;flex:1}#speaking{font-size:10px}#greeting{padding:6px 10px;margin:0 8px;font-size:12px}.content{min-height:0;display:flex;flex-direction:column;flex:1}.teacher-buttons{gap:5px}.teacher-buttons button{padding:5px;min-height:38px;font-size:12px}.teacher-buttons small{display:none}.categories{margin:8px 0 3px;gap:5px}.categories button{padding:5px;min-height:37px;font-size:12px}.quiet{margin:3px 0;font-size:11px}#card{min-height:0;flex:1;overflow:auto;padding:14px}h1{font-size:21px;margin:7px 0}#instruction{font-size:12px;margin:5px 0 9px}.play-actions button{padding:7px 12px;font-size:13px}#choices{margin:10px 0;gap:6px}#choices button{font-size:13px;padding:7px 10px;min-height:39px}#english{font-size:19px;margin:10px 0}#korean{font-size:15px;margin:8px 0}.advance{position:sticky;bottom:-14px;background:white;padding:8px 0}.advance button{flex:1;padding:8px;font-size:13px}.help{margin:5px 0 0;max-height:60px;overflow:auto;font-size:10px}footer{display:none}}

dialog{width:min(520px,90vw);border:0;border-radius:20px;padding:24px}dialog::backdrop{background:#0008}dialog label{display:block;margin:16px 0}dialog textarea,dialog select{display:block;width:100%;box-sizing:border-box;padding:10px}dialog button{margin:5px}

#portrait{background-image:none!important;background:#fffaf5;cursor:zoom-in;position:relative;overflow:hidden}#portrait canvas{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.portrait-dialog{padding:12px;width:min(540px,94vw);overflow:hidden}.portrait-dialog canvas{display:block;width:100%;height:auto}.portrait-dialog button{float:right}.portrait-dialog p{font-size:12px;text-align:center;margin:4px}.portrait-dialog::backdrop{background:#17251ccc}@media(max-width:740px){#portrait canvas{width:130px;height:130px;max-width:none;position:absolute;left:-24px;top:-9px}}

.portrait-hint{font-size:10px;color:#687970}@media(max-width:740px){.portrait-hint{font-size:9px}}

/* Put the teacher's face first; keep the lesson controls compact. */
@media(min-width:741px){main{max-width:1320px;grid-template-columns:minmax(280px,.95fr) minmax(0,1.1fr);gap:26px}#portrait{height:470px}.content button{font-size:14px;padding:7px 12px;min-height:40px}.categories{margin:14px 0 8px}.teacher-buttons{max-width:510px}.categories{max-width:510px}}
.teacher-option{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.teacher-option button{width:100%;flex:none;padding:5px 9px;min-height:36px}.teacher-option button small{display:inline;font-size:10px;margin-left:4px}.teacher-thumb{display:block;width:88px;height:88px;border-radius:50%;border:2px solid #e2e9e2;background-size:300% 400%;background-position:left top;background-color:#fffaf5}.teacher-option:has(button[aria-pressed=true]) .teacher-thumb{border-color:#477559;box-shadow:0 0 0 3px #e0eee3}.teacher-thumb.emma{background-image:url('/en/teachers/art/emma-atlas-v1.png')}.teacher-thumb.lily{background-image:url('/en/teachers/art/lily-atlas-v1.png')}.teacher-thumb.noah{background-image:url('/en/teachers/art/noah-atlas-v1.png')}#downloadStatus{font-size:11px;margin:2px 0 8px;color:#52685a}
@media(max-width:740px){#teacherStage{height:112px;min-height:112px}#portrait{width:112px;height:112px}#portrait canvas{width:162px;height:162px;left:-25px;top:-10px}.teacher-thumb{width:48px;height:48px}.teacher-option{gap:4px}.teacher-option button{font-size:12px;min-height:32px;padding:3px 6px}.teacher-option button small{display:none}.categories button{min-height:34px;padding:4px}.categories{margin-top:6px}.teacher-caption{font-size:12px}.portrait-hint{font-size:8px}#downloadStatus{font-size:10px;margin:1px 0 4px}.content>.quiet:first-child{font-size:10px;line-height:1.45}}
@media(max-width:740px) and (max-height:650px){#teacherStage{height:94px;min-height:94px}#portrait{width:94px;height:94px}#portrait canvas{width:150px;height:150px;left:-28px;top:-10px}.teacher-thumb{width:36px;height:36px}.teacher-option{gap:2px}.teacher-option button{min-height:30px}.content>.quiet:first-child br{display:none}main{gap:5px;padding-top:6px}.categories{margin:5px 0 2px}#card{padding:10px}.help{max-height:48px}}
@media(max-width:360px){header{gap:8px}header .brand{font-size:18px;white-space:nowrap}header .brand span{display:none}header nav{font-size:10px;gap:8px;white-space:nowrap}}
@media(max-width:740px) and (max-height:650px){body{height:auto;overflow:auto}main{height:auto;min-height:calc(100dvh - 58px)}#teacherStage{position:sticky;top:0;z-index:5}#card{min-height:310px;overflow:visible;scroll-margin-top:104px}.content>.quiet:first-child br{display:initial}.help{max-height:none;overflow:visible}.advance{bottom:0;padding:8px 0}#choices button{min-height:40px}}

.understanding-grades{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.grade-button{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:3px}.grade-button b{font-size:28px;line-height:1}.grade-button span{font-size:14px}@media(max-width:560px){.understanding-grades{grid-template-columns:repeat(3,minmax(86px,1fr));overflow-x:auto}.grade-button{padding:10px 5px}}