:root{font-family:Arial,Helvetica,sans-serif;color:#18352d;background:#edf4ef;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid #a7beb3;border-radius:12px;background:#fff;padding:.72rem 1rem;font-weight:700}button:hover{border-color:#216b57}button:focus-visible,select:focus-visible{outline:3px solid #216b57;outline-offset:3px}button:disabled{opacity:.55;cursor:not-allowed}[hidden]{display:none!important}.app{max-width:1160px;margin:auto;padding:16px 24px 48px}.topbar,.gamebar{display:flex;align-items:center;gap:16px;min-height:54px}.topbar a{color:#216b57;font-weight:700;text-decoration:none}.topbar>span{margin-right:auto;font-weight:800;letter-spacing:.08em;color:#486158}.panel{background:#fff;border:1px solid #d2e0d8;border-radius:22px;padding:clamp(22px,4vw,48px);margin:24px auto;box-shadow:0 12px 36px #18352d0d}.panel h1{font-size:clamp(2rem,4vw,3.2rem);margin:.15em 0 .4em;line-height:1.1}.panel>p:not(.eyebrow){font-size:1.14rem;line-height:1.55;max-width:760px}.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.12em;color:#26725b}.settings{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:16px;margin:28px 0}.settings label{display:grid;gap:8px;font-weight:700;min-width:0}.settings select{width:100%;min-width:0;min-height:52px;border:1px solid #b6c9be;border-radius:10px;background:#fff;padding:10px 12px;font-size:1rem}.progression{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.progression>div{display:flex;align-items:flex-start;gap:12px;background:#f0f6f2;border:1px solid #dae8df;border-radius:14px;padding:16px}.progression b{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:#216b57;color:white;font-size:1.1rem}.progression span{display:grid;gap:6px}.progression strong{font-size:1rem}.progression small{line-height:1.4;color:#4a6157;font-size:.9rem}.note{border-left:4px solid #e2a73a;padding:10px 14px;background:#fff9e9;color:#4e4b3d}.quality{margin:18px 0;padding:16px 20px;border-radius:14px;background:#eef6f0;line-height:1.5}.quality>strong{display:block;font-size:1.08rem}.quality ul{margin:.6rem 0 0;padding-left:1.35rem}.quality .warnings{color:#714d08}.primary{background:#216b57;color:white;border-color:#216b57;padding:14px 22px}.primary:hover{background:#185440}.review{border:1px solid #d3e0d8;border-radius:12px;padding:14px 18px;margin:18px 0}.review summary{font-weight:700;cursor:pointer}.review p{color:#4b6258;line-height:1.5}.review ol{padding-left:28px}.review li{padding:12px 0;border-top:1px solid #e5ede8;line-height:1.6}.review li img{display:block;max-width:220px;max-height:130px;object-fit:contain;background:#f4f7f4;border-radius:8px;margin:8px 0}.review-key{display:block;color:#1f6b56;font-weight:700}.classroom{min-height:calc(100vh - 32px);background:#fff;border:1px solid #d1dfd7;border-radius:22px;margin-top:10px;padding:clamp(18px,3vw,34px);display:flex;flex-direction:column}.gamebar{min-height:44px}.gamebar #progress{font-weight:800;margin-right:auto}.stage-tag{align-self:center;color:#26725b;background:#eaf4ee;border-radius:50px;padding:9px 18px;font-size:.9rem;font-weight:800;letter-spacing:.08em;margin:18px 0 12px}.prompt{min-height:clamp(120px,24vh,220px);display:grid;place-items:center;text-align:center;font-weight:800;font-size:clamp(2rem,5vw,4rem);line-height:1.12;padding:8px 12px}.question-image{display:block;width:auto;max-width:min(90vw,700px);height:clamp(160px,30vh,260px);object-fit:contain}.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(100%,1050px);margin:12px auto 20px}.choice{position:relative;display:flex;align-items:center;gap:16px;min-height:clamp(68px,10vh,92px);border:2px solid #d5e1da;border-radius:16px;padding:16px 22px;font-size:clamp(1.25rem,2.6vw,2rem);font-weight:700;line-height:1.2;background:#fff}.letter{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:50%;background:#e7f1eb;color:#1f6b56;font-weight:800;font-size:1.05rem}.choice.correct{background:#e7f5eb;border-color:#23835c}.choice.correct .letter{background:#23835c;color:#fff}.choice.dim{opacity:.42}.tick{margin-left:auto;color:#188451;font-size:1.7rem}.teacher-controls{margin-top:auto;text-align:center;border-top:1px solid #e4ece7;padding-top:12px}.teacher-controls p{font-size:1.12rem;font-weight:700}.teacher-controls button{margin:4px 6px}.classroom-hint{text-align:center;color:#52675e;font-size:.95rem;margin-bottom:0}.complete-note{font-size:1.1rem}
@media(max-width:700px){.app{padding:8px 12px 28px}.topbar{gap:8px}.topbar>span{font-size:.74rem}.topbar button,.gamebar button{min-height:44px;padding:9px 10px;font-size:.88rem}.settings,.progression{grid-template-columns:1fr}.progression{gap:8px}.progression>div{padding:12px}.panel{padding:22px 18px}.classroom{padding:12px;border-radius:14px}.stage-tag{margin:10px 0}.prompt{min-height:clamp(125px,28vh,250px)}.question-image{height:clamp(160px,28vh,230px);max-width:100%}.choices{gap:8px}.choice{min-height:72px;padding:6px;font-size:clamp(.88rem,3.75vw,1.3rem);gap:4px}.letter{flex-basis:28px;height:28px}.gamebar{gap:8px;font-size:.85rem}}
@media print{body{background:#fff}.topbar,.teacher-controls,.classroom-hint,.gamebar-actions,.gamebar button{display:none!important}.app,.classroom{max-width:none;border:0;box-shadow:none}.prompt,.choices{break-inside:avoid}}

.app.class-running>.topbar{display:none}
.review-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;list-style:none;padding:0!important;margin:8px 0}.review-options li{padding:3px 0!important;border:0!important}.review-options .review-correct{color:#176d4e;font-weight:700}
.single-setting{grid-template-columns:minmax(240px,620px)}.quality p{margin:.45rem 0 0;color:#496157}.choice{text-align:left}.choice.incorrect{background:#fff0ed;border-color:#bf493b}.choice.incorrect .letter{background:#b93c30;color:#fff}.feedback{display:flex;align-items:center;gap:14px;max-width:980px;margin:0 auto 8px;padding:12px 18px;border:1px solid #d4e5da;border-radius:14px;background:#f1f8f3}.feedback strong{font-size:1.15rem;color:#1d6a50;flex:0 0 auto}.classroom.has-feedback .prompt{min-height:clamp(80px,14vh,125px)}.classroom.has-feedback .question-image{height:clamp(80px,14vh,125px)}.classroom.has-feedback .choice{min-height:clamp(54px,8vh,72px);padding:8px 16px}.classroom.has-feedback .choices{margin:6px auto 10px;gap:8px}
.lesson-choice{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;align-items:center;max-width:760px;margin:24px 0;padding:16px 18px;border:1px solid #d6e3db;border-radius:14px;background:#f8fbf9}.lesson-choice>span{color:#566a61}.lesson-choice>strong{font-size:1.1rem}.lesson-choice details{grid-column:1/-1;margin-top:6px}.lesson-choice summary{cursor:pointer;color:#216b57;font-weight:700}.lesson-choice label{display:grid;gap:8px;max-width:620px;margin:12px 0 0;font-weight:700}.lesson-choice select{width:100%;min-height:48px;border:1px solid #b6c9be;border-radius:10px;background:#fff;padding:10px 12px;font:inherit}
.lesson-choice>strong{min-width:0;overflow-wrap:anywhere}@media(max-width:700px){.lesson-choice{grid-template-columns:1fr;gap:6px}.lesson-choice details{grid-column:1}.lesson-choice{padding:14px}}
.class-outcome{width:min(100%,1000px);margin:0 auto 10px;padding:12px 16px;border:1px solid #d5e3da;border-radius:14px;background:#f8fbf9;text-align:center}.class-outcome>strong{font-size:1.08rem}.class-outcome>p{margin:5px 0 10px;color:#53675d}.outcome-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.outcome-options button{display:grid;justify-items:center;gap:3px;min-height:62px;padding:8px 6px;border-color:#cbdad1}.outcome-options button b{font-size:clamp(.8rem,3.3vw,1rem);color:#1e6b54}.outcome-options button span{font-size:.88rem}.outcome-options button.selected{background:#e2f1e7;border:2px solid #216b57;box-shadow:0 0 0 2px #216b5720}.class-outcome #next{margin-top:8px}.classroom.has-feedback .class-outcome{padding:8px 12px}.classroom.has-feedback .class-outcome>p{margin:3px 0 7px}
@media(max-width:700px){.outcome-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.outcome-options button{min-height:56px}.outcome-options button span{font-size:.8rem}.classroom.has-feedback .feedback{flex-wrap:wrap;gap:8px;padding:10px}}
.scope-choice{display:flex;flex-wrap:wrap;gap:12px 24px;max-width:760px;margin:18px 0 12px;padding:12px 16px 14px;border:1px solid #d6e3db;border-radius:14px;background:#fff}.scope-choice legend{padding:0 6px;font-weight:700}.scope-choice label,.topic-picker label{display:flex;align-items:center;gap:9px;font-weight:600;cursor:pointer}.scope-choice label{min-height:44px;padding:4px 0}.scope-choice input,.topic-picker input{width:19px;height:19px;accent-color:#216b57}.topic-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;max-width:760px;margin:0 0 18px;padding:14px 16px;border-radius:14px;background:#f0f6f2}.topic-picker label{min-height:44px;line-height:1.3}@media(max-width:700px){.topic-picker{grid-template-columns:1fr}.scope-choice{gap:10px 18px}}
.deck-box{max-width:760px;margin:22px 0;padding:16px 18px;border:1px solid #d2e1d8;border-radius:14px;background:#f5faf6}.deck-box>strong{font-size:1.12rem}.deck-box p{color:#4b6258;line-height:1.45;margin:7px 0 12px}.deck-actions{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.deck-actions label,.deck-box details label{display:grid;gap:6px;flex:1 1 220px;font-weight:700}.deck-actions input,.deck-box details input{min-height:44px;width:100%;border:1px solid #b6c9be;border-radius:9px;padding:9px 11px;font:inherit;background:#fff}.deck-box details{margin-top:12px}.deck-box summary{cursor:pointer;color:#216b57;font-weight:700}.deck-box details label{margin:10px 0}.deck-box code{display:block;overflow-wrap:anywhere;padding:10px;margin:8px 0;background:#fff;border:1px solid #cfddd4;border-radius:8px;font-size:.9rem;user-select:all}.deck-box #deck-recovery{margin-top:14px;padding:14px;border-radius:10px;background:#e8f3eb}.deck-box #deck-status{min-height:1.4em}.deck-box button{min-height:44px}@media(max-width:600px){.deck-actions{align-items:stretch;flex-direction:column}.deck-actions label{width:100%}}
.gamebar-actions{display:flex;align-items:center;gap:8px}
#save-indicator{max-width:38%;font-size:.82rem;color:#486158;overflow-wrap:anywhere}#save-indicator:not(:empty){margin-left:auto}.gamebar #progress{margin-right:0}
@media(max-width:700px){#save-indicator{max-width:42%;font-size:.72rem}.gamebar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;min-height:0}.gamebar #progress{min-width:0;font-size:.82rem}.gamebar #save-indicator{max-width:none;margin-left:0;text-align:right;font-size:.72rem}.gamebar-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.gamebar-actions button{width:100%;min-width:0;margin:0;padding:6px 4px;font-size:.82rem;line-height:1.1;min-height:44px}}
.class-picker{margin:14px 0}.class-picker select{width:100%;min-height:44px;border:1px solid #b6c9be;border-radius:9px;background:#fff;padding:9px 11px;font:inherit}
.storage-alert{position:sticky;top:0;z-index:10;background:#fff3d2;color:#59441a;border:1px solid #d6aa43;border-radius:10px;padding:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.storage-alert span{flex:1 1 300px}.storage-alert button{font-size:.9rem;padding:8px}.feedback strong{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.classroom.has-feedback .feedback{width:min(100%,980px)}input:focus-visible{outline:3px solid #216b57;outline-offset:2px}

.stage-tag{max-width:100%;text-align:center;overflow-wrap:anywhere}
#setup-title:focus-visible,#prompt:focus-visible,#feedback:focus-visible,#complete-title:focus-visible{outline:3px solid #216b57;outline-offset:6px;border-radius:4px}
.reset-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.reset-actions button{min-height:44px}.reset-actions .danger{border-color:#a43b30;color:#8d3028}.reset-actions .danger:hover{background:#fff2ef;border-color:#8d3028}#reset-status{min-height:1.3em;margin:.5rem 0;color:#486158}
.progress-reset{max-width:760px;margin:16px 0;padding:12px 16px;border:1px solid #d2e1d8;border-radius:12px;background:#f6faf7;color:#52695e}.progress-reset>summary{cursor:pointer;color:#216b57;font-weight:700}.progress-reset>p{line-height:1.45}

.learning-progress{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;width:min(100%,1050px);margin:0 auto 12px}.progress-item{min-width:0}.progress-item>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:.9rem}.progress-item strong{min-width:0;font-weight:700;overflow-wrap:anywhere}.progress-item span{flex-shrink:0;font-variant-numeric:tabular-nums;color:#425e52}.progress-item progress{display:block;width:100%;height:8px;border:0;border-radius:999px;overflow:hidden;background:#e1ebe4}.progress-item progress::-webkit-progress-bar{border-radius:999px;background:#e1ebe4}.progress-item progress::-webkit-progress-value{border-radius:999px;background:#23835c;transition:width .25s ease}.progress-item progress::-moz-progress-bar{border-radius:999px;background:#23835c}@media(max-width:700px){.learning-progress{grid-template-columns:1fr;gap:10px}.progress-item>div{font-size:.85rem;margin-bottom:4px}}
#choices .choice>span:not(.letter){min-width:0;overflow-wrap:anywhere}.review-alternatives{font-size:.9rem;color:#52675e}
.simple-setup{max-width:760px;margin:24px auto;padding:clamp(22px,4vw,42px)}.setup-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.setup-heading h1{font-size:clamp(1.9rem,4vw,2.7rem);margin:0}.setup-heading button{min-height:44px;font-size:.88rem;padding:9px 12px}.simple-setup>.setup-status{font-size:1rem;margin:10px 0 22px;color:#52695e;line-height:1.4}.class-picker-grid{display:grid;gap:16px;margin-top:22px}.class-picker-grid fieldset{border:0;padding:0;margin:0;min-width:0}.class-picker-grid legend{font-size:.87rem;color:#52695e;font-weight:700;margin-bottom:8px}.class-picker-grid fieldset>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.class-picker-grid button{font-size:1.3rem;min-height:64px;background:#f2f8f4;border-color:#cbded1}.class-picker-grid button:hover,.class-picker-grid button[aria-pressed=true]{background:#e1f0e6;border-color:#216b57}.ready-lesson h2{font-size:clamp(1.3rem,3vw,1.8rem);margin:0 0 8px;line-height:1.25}.ready-lesson p{margin:0 0 24px;color:#52695e;line-height:1.45}.lesson-ready>#start{width:100%;min-height:54px;font-size:1.1rem}.lesson-settings{margin-top:18px}.lesson-settings>summary{cursor:pointer;color:#216b57;font-weight:700;font-size:.95rem}.lesson-settings>label{display:grid;gap:8px;margin-top:18px;font-weight:700}.lesson-settings select{width:100%;font:inherit;min-height:48px;border:1px solid #b6c9be;border-radius:10px;background:#fff;padding:10px 12px}.save-options{margin-top:28px;padding-top:16px;border-top:1px solid #e1eae4;color:#52695e;font-size:.9rem}.save-options>summary{cursor:pointer}.save-options p{line-height:1.5}.save-options details{margin-top:16px}.save-options details>summary{cursor:pointer;font-weight:700}.save-options label{display:grid;gap:6px;margin:12px 0 10px;font-weight:700}.save-options input{font:inherit;width:100%;min-height:44px;padding:9px 11px;border:1px solid #b6c9be;border-radius:9px;color:#18352d}.save-options code{display:block;overflow-wrap:anywhere;user-select:all;padding:12px;background:#f0f6f2;border-radius:9px;margin:10px 0}.save-options #deck-recovery{margin-top:16px}.setup-notice{margin:12px 0;padding:12px;border-radius:10px;background:#fff4d9;color:#674d15;line-height:1.4}@media(max-width:500px){.simple-setup{margin-top:16px;padding:22px 18px}.class-picker-grid fieldset>div{gap:8px}.class-picker-grid button{min-height:58px;font-size:1.15rem;padding:8px}.setup-heading{align-items:flex-start}.setup-heading button{max-width:50%;font-size:.8rem}}
.setup-heading h1{min-width:0;overflow-wrap:anywhere}
.sentence-practice-links a:focus-visible{outline:3px solid #216b57;outline-offset:3px}
.sentence-practice-links{margin-top:16px;padding:12px;border:1px solid #d2e1d8;border-radius:12px;background:#f6faf7;color:#52695e}.sentence-practice-links>strong{color:#216b57}.sentence-practice-links>p{margin:.4rem 0;line-height:1.4}.sentence-practice-links>div{display:flex;flex-wrap:wrap;gap:8px}.sentence-practice-links a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid #a7beb3;border-radius:10px;background:#fff;color:#216b57;font-weight:700;text-decoration:none}.sentence-practice-links a:hover{border-color:#216b57;text-decoration:underline}

/* Keep navigation and disclosure controls easy to reach on touch screens. */
.topbar a{display:inline-flex;align-items:center;min-height:44px;padding:6px 0}
.topbar button{min-height:44px}
.app summary{min-height:44px;padding-block:11px}
.save-options button{min-height:44px}

@media screen and (max-height:800px){
  
  
  .classroom{padding:8px 12px}
  .stage-tag{margin:6px 0;padding:6px 12px}
  .prompt{min-height:clamp(68px,12vh,90px);padding:4px 8px}
  .question-image{height:clamp(96px,18vh,135px)}
  .choices{gap:8px;margin:4px auto 8px}
  .choice{min-height:clamp(48px,8vh,58px);padding:6px 12px}
  .teacher-controls{padding-top:8px}
  .class-outcome{margin-bottom:4px;padding:8px 10px}
  .outcome-options button{min-height:48px}
  .classroom.has-feedback .prompt{min-height:clamp(58px,9vh,72px)}
  .classroom.has-feedback .question-image{height:clamp(72px,12vh,90px)}
  .classroom.has-feedback .choice{min-height:clamp(44px,6vh,50px);padding:4px 10px}
  .classroom.has-feedback .feedback{min-height:38px;margin-bottom:4px;padding:6px 12px}
  .classroom.has-feedback .class-outcome{padding:5px 8px}
  .classroom.has-feedback .outcome-options{gap:4px}
  .classroom.has-feedback .outcome-options button{min-height:44px;padding:4px 3px;gap:0}
  .classroom.has-feedback .class-outcome #next{min-height:44px;margin-top:2px;padding:8px 16px}
}

@media(prefers-reduced-motion:reduce){.progress-item progress::-webkit-progress-value{transition:none}}

/* Vocabulary pictures need to be identifiable in the normal question view. */
.gamebar #change-class{min-width:0;overflow-wrap:anywhere}
@media(min-width:701px){
  .question-image{height:clamp(240px,34vh,320px)}
  .classroom.has-feedback .question-image{height:clamp(130px,20vh,180px)}
}
@media(max-width:700px){
  .question-image{height:clamp(160px,24vh,220px)}
  .classroom.has-feedback .question-image{height:130px}
}

/* Listening uses the same four-choice game and teacher feedback. */
.listen-button{font:inherit;font-size:clamp(1.5rem,4vw,2.6rem);padding:18px 32px;border:2px solid #216b57;border-radius:18px;color:#216b57;background:#eff8f2;min-height:64px}
.audio-status{font-size:1rem;font-weight:500;line-height:1.4;min-height:1.4em}.audio-fallback{font-size:clamp(2rem,5vw,3.5rem)}
.picture-answers .choice{justify-content:center;padding:8px 12px;min-width:0}
.answer-image{display:block;object-fit:contain;min-width:0;width:calc(100% - 58px);height:clamp(150px,23vh,200px)}
.classroom:has(.picture-answers) .prompt{min-height:90px}
.classroom.has-feedback .answer-image{height:clamp(110px,17vh,145px)}
@media(max-width:700px){.picture-answers .choice{padding:6px;gap:4px}.answer-image{width:calc(100% - 32px);height:125px}.classroom.has-feedback .answer-image{height:110px}.classroom:has(.picture-answers) .prompt{min-height:76px}}

@media screen and (min-width:701px) and (max-height:800px){
  .answer-image{height:150px}
  .picture-answers .choice{padding:4px 12px}
  .classroom:has(.picture-answers) .listen-button{padding:12px 28px;font-size:2rem;min-height:60px}
  .classroom:has(.picture-answers) .prompt{min-height:76px}
  .classroom.has-feedback .answer-image{height:115px}
}

@media(max-width:700px){.topbar{flex-wrap:wrap}.topbar .written-test-link{order:4}}