:root{--blue:#056fb9;--deep:#083a70;--cyan:#dcf8ff;--green:#00ae88;--yellow:#ffcf4d;--line:#bce7f6;--ink:#103652;--light:#f4fcff;--shadow:0 12px 24px #0077aa18}
*{box-sizing:border-box}html{min-height:100%;background:linear-gradient(130deg,#beeafc,#defbe9 49%,#cde5ff);scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:system-ui,'Trebuchet MS',Arial,sans-serif;min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:focus-visible{outline:4px solid #ffb936;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}.app{max-width:1440px;margin:auto;padding:12px 18px;min-height:100vh;display:flex;flex-direction:column;gap:12px}.top{background:linear-gradient(105deg,#074d9d,#0787c6 65%,#25c6d8);border-radius:22px;color:#fff;padding:15px 22px;display:flex;gap:12px;align-items:center;justify-content:space-between;box-shadow:var(--shadow)}.brand{display:flex;gap:14px;align-items:center}.earth{font-size:45px;line-height:1}.brand-title{font-size:clamp(21px,2.5vw,37px);letter-spacing:-.7px;font-weight:1000;line-height:1}.brand small{font-weight:850;letter-spacing:.9px;font-size:clamp(10px,.98vw,15px)}.tools{display:flex;gap:8px}.mini{border:2px solid #a3e8ff;color:#fff;background:#ffffff25;border-radius:13px;padding:12px;white-space:nowrap;font-weight:850;font-size:clamp(12px,1.1vw,17px)}main{flex:1}.screen{border-radius:28px;border:3px solid #d4f2ff;background:#ffffffeb;box-shadow:var(--shadow);min-height:69vh;padding:clamp(18px,2.6vw,34px)}.progressline{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}.tag{display:inline-flex;align-items:center;padding:8px 16px;border-radius:50px;color:#0860ab;font-size:clamp(12px,1.25vw,18px);font-weight:950;background:#e3f4ff}.tag.alt{color:#116949;background:#e1fff2}.title{margin:16px 0;font-size:clamp(32px,4.7vw,62px);line-height:1.09;letter-spacing:-1px;color:var(--deep)}.subtitle{font-size:clamp(17px,1.7vw,25px);line-height:1.5;color:#467a95;font-weight:760;margin:10px 0 21px}.nav{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:22px 0 0}.btn{border:0;border-bottom:5px solid #055a8950;border-radius:16px;background:linear-gradient(#23acec,#0582cb);color:white;font-weight:950;padding:13px 21px;font-size:clamp(17px,1.55vw,23px);box-shadow:0 5px 15px #228cb02a;min-height:54px}.btn.orange{background:linear-gradient(#ffbe46,#f28a1b)}.btn.green{background:linear-gradient(#26d79b,#06ab79)}.btn.light{background:#eaf8ff;color:#075e95;border:2px solid #b4e2fc;border-bottom:3px solid #a7d7ef;box-shadow:none}.btn:hover{filter:brightness(1.04);transform:translateY(-1px)}.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.photo-card{border:5px solid #91d9ff;border-radius:21px;position:relative;overflow:hidden;background:#d6f9ff;box-shadow:var(--shadow)}.photo-card img{width:100%;aspect-ratio:1.62/1;display:block;object-fit:cover}.photo-letter{position:absolute;top:12px;left:12px;background:#087dcc;border:4px solid white;color:#fff;width:57px;height:57px;display:grid;place-items:center;border-radius:50%;font-size:30px;font-weight:1000}.query{margin:18px 0 0;padding:19px;border-radius:18px;background:#ecfaff;border:2px solid #c7ebff;font-size:clamp(20px,2vw,30px);font-weight:850}.compare-choices{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}.compare-choices button,.choice{border:3px solid #a7d9f3;background:white;border-radius:15px;font-weight:900;color:#0f5f96;padding:15px 18px;min-height:56px;font-size:clamp(17px,1.6vw,24px)}.compare-choices button.picked,.choice.picked{background:#ddfff2;border-color:#14ac7e}.reveal{border-radius:17px;background:#fff8df;border:2px solid #ffdb7d;padding:15px 18px;font-size:clamp(18px,1.55vw,23px);margin:16px 0;line-height:1.4}.wordrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.wordcard{display:flex;flex-direction:column;justify-content:space-between;text-align:left;min-height:143px;border:3px solid #c4eaf3;border-radius:19px;background:linear-gradient(145deg,#e4faff,#fff);color:#103d65;padding:15px;transition:transform .16s}.wordcard strong{font-size:clamp(20px,2vw,28px)}.wordcard em{font-size:clamp(14px,1.25vw,18px);font-style:normal;color:#527f91}.wordcard span{font-size:15px;color:#0876b9;font-weight:900}.lesson{display:grid;grid-template-columns:1.15fr .85fr;gap:21px}.panel{background:#f1faff;border:2px solid #c6eafa;border-radius:19px;padding:19px}.panel h3{margin:0 0 11px;font-size:clamp(21px,2vw,29px);color:#064e8e}.panel p{font-size:clamp(16px,1.4vw,20px);line-height:1.55}.term{font-weight:850;color:#007c80}.expression-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.exp{overflow:hidden;border:3px solid #cbeaf7;border-radius:19px;background:#fff}.exp h3{margin:0;padding:13px 16px;color:#fff;background:#067ac8;font-size:clamp(21px,2vw,29px)}.exp.green h3{background:#02a782}.exp.orange h3{background:#ed9613}.exp.pink h3{background:#d65c9d}.exp table{border-collapse:collapse;width:100%}.exp th{font-size:clamp(15px,1.2vw,19px);color:#165379;background:#edf9ff;padding:10px}.exp td{border-top:1px solid #dbecf4;padding:10px;font-size:clamp(15px,1.32vw,20px);line-height:1.35}.exp td:first-child{width:55%}.exp td button{width:100%;border:0;background:#f4fbff;border-radius:10px;color:#073c7a;text-align:left;font-weight:800;padding:8px;font-size:inherit}.exp td button:hover{background:#dffff4}.dialogbox{padding:20px;background:linear-gradient(140deg,#efffff,#f4f6ff);border:3px solid #c9e7fb;border-radius:20px}.dialogline{border:2px solid #cce6f2;border-radius:17px;padding:14px;margin:9px 0;background:white;font-size:clamp(19px,1.5vw,24px);line-height:1.5}.dialogline span{color:#1177b7;font-weight:1000}.dialogline button{float:right;border:0;border-radius:12px;background:#e5f7ff;color:#0b71b4;padding:6px 11px;font-size:19px}.keybox{background:#fff5d7;border:2px solid #f6db91;padding:15px 18px;border-radius:16px;font-size:clamp(18px,1.5vw,23px);margin:18px 0;line-height:1.5}.practice-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.choice{text-align:left}.good{background:#defcea!important;border-color:#12ab79!important}.wrong{background:#ffefef!important;border-color:#ee8f8f!important}.feedback{padding:16px 19px;min-height:60px;margin:16px 0;border:2px solid #adddf6;background:#eafaff;border-radius:16px;font-size:clamp(17px,1.6vw,23px);font-weight:800}.reflect{display:grid;grid-template-columns:1fr 1fr;gap:15px}.reflect .panel{min-height:160px}.checkrows label{display:block;padding:9px 8px;font-size:clamp(17px,1.45vw,22px);font-weight:750}.checkrows input{width:21px;height:21px;margin-right:10px;accent-color:#0ab381}select{width:100%;min-height:55px;border-radius:12px;border:2px solid #ace0fa;font-size:19px;background:#fff;color:#103c60;padding:11px}.finish{display:grid;place-items:center;text-align:center;min-height:48vh}.finish h1{font-size:clamp(38px,5vw,70px);margin:10px}.small{font-size:clamp(13px,1.15vw,17px);color:#537b90;font-weight:700}.info{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.chip{padding:8px 12px;background:#fff6d8;color:#8a5600;border-radius:50px;font-weight:860}footer{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#f2faffbb;padding:10px 12px;border-radius:15px;color:#276f9d;font-size:clamp(11px,1vw,15px);font-weight:740}#dots{letter-spacing:5px;font-weight:1000;font-size:20px}#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,130px);transition:transform .25s;background:#063d6d;color:white;border-radius:20px;padding:15px 23px;font-size:18px;font-weight:850;box-shadow:var(--shadow);z-index:99;text-align:center;min-width:170px}#toast.show{transform:translate(-50%,0)}
@media(max-width:830px){.lesson,.expression-grid{grid-template-columns:1fr}.wordrow{grid-template-columns:repeat(2,1fr)}.photo-pair{gap:9px}.photo-letter{width:38px;height:38px;font-size:22px;top:7px;left:7px;border-width:2px}.app{padding:6px;gap:6px}.top{padding:12px;flex-wrap:wrap;border-radius:15px}.earth{font-size:33px}.tools{width:100%}.mini{flex:1}.screen{padding:13px 12px;border-radius:17px}.query{padding:13px}.reflect{grid-template-columns:1fr}.wordcard{min-height:120px}.exp td{padding:6px}.practice-row{grid-template-columns:1fr}}
@media(max-width:390px){.title{font-size:31px}.brand-title{font-size:23px}.wordcard{padding:11px}.exp td{font-size:15px}}


/* Poster gallery: same infographics may be sent as PNG to WAG or presented on IFP. */
.poster-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0 19px}
.poster-viewer{position:fixed;inset:0;z-index:100;background:rgba(3,32,61,.88);padding:12px;display:flex;align-items:center;justify-content:center}
.poster-panel{max-width:1000px;width:100%;max-height:96dvh;display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 12px 40px #0008}
.poster-toolbar{padding:9px 15px;background:#dff5ff;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:clamp(16px,1.8vw,23px)}
.poster-toolbar .btn{min-height:41px;padding:6px 12px;font-size:16px}
.poster-panel>img{max-width:100%;max-height:calc(96dvh - 69px);object-fit:contain;overflow:auto;align-self:center}
@media(max-width:700px){.poster-toolbar{font-size:13px}.poster-toolbar .btn{font-size:12px}.poster-viewer{padding:4px}}


/* Two-speaker audio dialogues */
.speaker-cast{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;margin:16px 0}
.cast{display:flex;align-items:center;gap:10px;min-width:195px;padding:9px 16px;border-radius:19px;background:#edfaff;border:2px solid #b8e5fc;box-shadow:var(--shadow)}
.cast:nth-child(2){background:#fff5de;border-color:#ffe1a2}
.cast img{width:66px;height:76px;object-fit:contain;object-position:top center}
.cast b{display:block;font-size:20px;color:#075a95}.cast span{font-size:13px;color:#507f96;font-weight:800}
.dialogue-player{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:14px 0;background:#e8fcf8;padding:12px 16px;border:2px solid #90e5d3;border-radius:18px;font-size:clamp(16px,1.5vw,21px);font-weight:850;color:#075d5a}
.dialogue-heading{font-size:clamp(21px,1.95vw,28px)!important;margin:3px 0 15px;color:#063f77}
.dialogue-turns{display:grid;gap:9px}
.dialogline{display:flex;gap:9px;align-items:center;margin:0;padding:10px 12px;transition:background .2s,box-shadow .2s}
.dialogline.speaker-rafi{background:#fffaf0;border-color:#ffe0a0}
.dialogline.speaking{background:#d8ffe9;border-color:#12b981;box-shadow:inset 0 0 0 2px #09a877,0 0 0 4px #62e5a133}
.dialogline .turn-avatar{width:47px;height:59px;object-fit:contain;flex:0 0 auto}
.dialogline .turn-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dialogline .turn-text strong{font-size:17px;color:#0870a9}
.dialogline .turn-text span{font-weight:650;color:#234b62;font-size:clamp(17px,1.35vw,20px);line-height:1.45}
.dialogline button{float:none;flex:0 0 auto;min-width:45px;min-height:45px;border:2px solid #ace2fa;font-size:22px}
.row-player{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 2px}
.row-player .btn{flex:1;min-width:180px}
.small-btn{padding:7px 12px;min-height:40px;font-size:clamp(13px,1.1vw,16px)}
.voice-options{margin:18px 0;border:2px solid #c2dff3;border-radius:17px;background:#f3faff;padding:13px 18px}
.voice-options summary{font-size:clamp(16px,1.25vw,20px);font-weight:900;cursor:pointer;color:#076497}
.voice-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:14px 0}
.voice-picker label{font-weight:850;font-size:16px;color:#17557a}
.voice-picker select{margin-top:7px;font-size:14px;min-height:47px;max-width:100%}
@media(max-width:700px){.speaker-cast{gap:7px}.cast{min-width:0;flex:1;padding:6px;gap:4px}.cast img{width:45px;height:64px}.cast b{font-size:15px}.cast span{font-size:11px}.dialogue-player{font-size:15px}.dialogbox{padding:11px}.dialogline{padding:8px 7px}.dialogline .turn-avatar{width:34px;height:48px}.dialogline .turn-text span{font-size:16px}.dialogline button{padding:5px;min-width:36px;min-height:42px}.voice-picker{grid-template-columns:1fr}}

/* Interactive teaching corrections: clear feedback and mobile readability */
[hidden]{display:none!important}
.prompt-questions{display:grid;gap:8px;margin-top:12px;font-size:clamp(18px,1.45vw,24px);font-weight:750}
.example-speech{padding:12px 14px;margin:10px 0;background:#fff;border-left:5px solid #0e9fc9;border-radius:11px}
.example-speech small,.spoken-proposal small,.spoken-response small{display:block;font-size:clamp(12px,1vw,16px);font-weight:800;color:#547a93;margin-bottom:4px}
.example-speech b{display:block}
.feedback.action-good{background:#e7fff3;border-color:#16b878;color:#0c5843}
.feedback.action-alert{background:#fff2e5;border-color:#e7a34e;color:#794200}
.feedback.neutral{background:#eafaff;color:#355d77}
.evaluation-title{font-weight:1000;font-size:clamp(19px,1.7vw,25px);margin-bottom:10px}
.spoken-proposal{font-size:clamp(16px,1.25vw,21px);font-weight:650;margin-bottom:9px;padding:9px 12px;border-radius:11px;background:#ffffffa8}
.spoken-response{font-size:clamp(18px,1.35vw,22px);margin-bottom:9px;padding:9px 12px;border-radius:11px;background:#fff}
.spoken-response strong{display:block;line-height:1.45}
.consequence{font-size:clamp(16px,1.3vw,20px);line-height:1.45;margin:11px 0 16px}
#actionFeedback .btn{font-size:clamp(16px,1.2vw,19px);padding:9px 14px;min-height:48px}
@media(max-width:700px){.prompt-questions{font-size:17px}.spoken-response strong{font-size:18px}.feedback.action-alert,.feedback.action-good{padding:13px}}

.builder-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:18px;align-items:start}
.builder-layout .photo-card img{aspect-ratio:1.6;object-fit:cover}
.builder-layout .panel .compare-choices button{font-size:clamp(16px,1.3vw,21px)}
@media(max-width:830px){.builder-layout{grid-template-columns:1fr}}
.retry-advice{font-weight:950;color:#8a4900;background:#fff;padding:10px 12px;border-radius:10px;margin-bottom:12px}

/* Standalone poster viewer is optional supporting reading material, not tied to IFP. */
.poster-actions{margin:18px 0 21px}
.poster-trigger{display:inline-flex;align-items:center;justify-content:center;gap:11px;max-width:100%;min-height:57px;color:#075c9e;background:#eaf8ff;border:2px solid #a4dffa;box-shadow:0 4px 13px rgba(5,105,165,.10);font-weight:900;letter-spacing:.01em}
.poster-trigger svg{display:block;flex:0 0 auto;width:25px;height:25px;stroke:#087ac3}
.poster-trigger:focus-visible{outline:3px solid #ffb536;outline-offset:3px}
.poster-panel>img{width:auto;height:auto}
@media(max-width:700px){.poster-trigger{width:100%;font-size:18px;padding:12px 11px;min-height:53px}.poster-trigger svg{width:23px;height:23px}}