:root{--navy:#0b2f4b;--blue:#1769cf;--teal:#079a85;--green:#16845f;--gold:#f4c34b;--orange:#ec8b38;--red:#c74b45;--ink:#17324d;--muted:#62788b;--line:#c8dbe6;--bg:#f3f8fb;--soft:#eaf5f9;--mint:#e7f7f2;--cream:#fff7dd;--reader:1}
*{box-sizing:border-box}html,body{margin:0;width:100%;max-width:100%;overflow-x:hidden;font-family:Arial,"Noto Sans Thai",sans-serif;background:var(--bg);color:var(--ink);text-size-adjust:100%;-webkit-text-size-adjust:100%}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.top{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,#071f33,#0e466d);color:#fff;padding:9px 12px;box-shadow:0 4px 16px rgba(5,28,46,.16)}.topin{max-width:1180px;margin:auto;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.brand{font-weight:950;font-size:18px}.meta{font-size:12px;color:#d7e9f3;line-height:1.35}.readerTools{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.readerBtn{border:1px solid rgba(255,255,255,.3);background:#fff;color:var(--navy);border-radius:9px;padding:7px 9px;font-weight:900;min-width:40px}.readerBtn.active{background:var(--gold)}.wrap{width:min(1180px,100%);margin:12px auto;padding:0 clamp(8px,2vw,16px) 70px}.panel,.card{min-width:0;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 20px rgba(15,58,83,.055)}.panel{padding:clamp(12px,2vw,18px);margin-bottom:12px}.card{padding:12px}.h1{font-size:clamp(28px,4vw,42px);font-weight:950;line-height:1.08;color:var(--navy);margin:0 0 8px;overflow-wrap:anywhere}.h2{font-size:clamp(22px,3vw,30px);font-weight:950;line-height:1.15;color:var(--navy);margin:0 0 8px;overflow-wrap:anywhere}.h3{font-size:18px;font-weight:900;color:var(--navy);margin:0 0 5px}.lead{font-size:calc(18px * var(--reader));line-height:1.55;color:var(--muted)}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:950;color:var(--blue)}.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px}.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}.btn{border:0;border-radius:10px;padding:10px 13px;font-weight:900;max-width:100%;white-space:normal}.btn:disabled{opacity:.42;cursor:not-allowed}.teal{background:var(--teal);color:#fff}.blue{background:var(--blue);color:#fff}.navy{background:var(--navy);color:#fff}.gold{background:var(--gold);color:#332b0c}.red{background:var(--red);color:#fff}.light{background:#edf5f8;color:var(--navy);border:1px solid var(--line)}.status{padding:10px 12px;border-radius:10px;background:#eef5f8;font-weight:750;line-height:1.45;margin-top:9px;overflow-wrap:anywhere}.status.ok{background:#e4f7ee;color:#075f46}.status.err{background:#fdeaea;color:#8c302b}.status.warn{background:#fff4d8;color:#725710}.notice,.classnotes{font-size:calc(15px * var(--reader));line-height:1.55;border-radius:12px;padding:11px 13px;overflow-wrap:anywhere}.notice{background:#eef7fb;border:1px solid #c7dce8}.classnotes{background:var(--cream);border:1px solid #ead071;border-left:5px solid var(--gold)}.th{font-size:calc(15px * var(--reader));line-height:1.5;background:var(--mint);border-left:4px solid var(--teal);padding:8px 10px;border-radius:9px;margin-top:6px;overflow-wrap:anywhere}.en{font-size:calc(17px * var(--reader));line-height:1.6;overflow-wrap:anywhere}.small{font-size:12px;color:var(--muted)}label{font-size:13px;font-weight:850}input,select,textarea{width:100%;margin-top:4px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}input[readonly]{background:#f2f6f8}.progress{height:10px;background:#d7e6ed;border-radius:999px;overflow:hidden}.bar{height:100%;background:linear-gradient(90deg,var(--teal),var(--blue));width:0}.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#eaf3f7;color:var(--navy);font-weight:900;font-size:12px}.pill.active{background:var(--teal);color:#fff}.lessonNav{position:sticky;bottom:0;z-index:35;margin-top:10px;padding:9px 10px;background:rgba(243,248,251,.96);border:1px solid var(--line);border-radius:12px;box-shadow:0 -5px 16px rgba(12,48,72,.08);backdrop-filter:blur(6px)}.lessonNav .navHint{flex:1 1 220px;text-align:center;font-size:12px;color:var(--muted)}.aocrwrap{position:relative;isolation:isolate;overflow:hidden}.aocr{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:repeating-linear-gradient(27deg,transparent 0 44px,rgba(12,45,72,.024) 44px 46px),radial-gradient(circle at 2px 2px,rgba(7,154,133,.04) 1px,transparent 1.2px);background-size:auto,18px 18px}.wm{position:absolute;inset:-70px;z-index:0;pointer-events:none;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;transform:rotate(-24deg);opacity:.05;font-size:10px;font-weight:900;color:#16324b}.trace{position:absolute;right:7px;bottom:5px;z-index:3;font-size:9px;color:#6a8294}.inner{position:relative;z-index:2}.aocr.reduced{opacity:.35}.wm.reduced{opacity:.018}footer.dev{text-align:center;color:var(--muted);font-size:12px;margin-top:16px}.metric{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.metric .card b{display:block;font-size:12px}.metric .v{font-size:23px;font-weight:950;color:var(--teal);margin-top:2px}.opts{display:grid;gap:8px}.opt{border:1px solid var(--line);background:#fbfdfe;border-radius:10px;padding:10px;text-align:left;font-weight:800;line-height:1.45;overflow-wrap:anywhere}.opt.sel{background:#eaf3ff;border-color:var(--blue);outline:3px solid rgba(23,105,207,.11)}.opt.good{background:#e5f7ee;border-color:#61b995}.opt.bad{background:#fdeceb;border-color:#df9b97}.feedback{margin-top:8px;padding:9px 10px;border-radius:9px;background:#eef5f8;line-height:1.45}.question{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;margin:9px 0}.qtext{font-size:calc(17px * var(--reader));font-weight:900;line-height:1.45}.step{display:flex;gap:10px;align-items:flex-start;margin:8px 0}.stepNo{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:950}.exampleGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px;margin-top:10px}.exampleCard{min-width:0;background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px}.exampleLabel{display:inline-block;padding:5px 8px;border-radius:999px;background:var(--blue);color:#fff;font-size:12px;font-weight:900;margin-bottom:6px}.passage{font-size:calc(17px * var(--reader));line-height:1.78;overflow-wrap:anywhere}.passage p{margin:0 0 14px}.passage .pnum{font-weight:950;color:var(--blue)}.scramble{border:1px solid var(--line);border-radius:13px;padding:12px;margin:9px 0;background:#fff}.wordbank,.answerline{display:flex;gap:7px;flex-wrap:wrap;min-height:46px;padding:8px;border-radius:9px}.wordbank{background:#f1f7fa}.answerline{margin-top:7px;background:#fff8df;border:1px dashed #d7b746}.word{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px;font-weight:800;max-width:100%;white-space:normal}.cando{display:grid;gap:8px}.cando label{display:flex;gap:8px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}.cando input{width:auto;margin:2px 0}.drawer{position:fixed;z-index:80;inset:4vh 4vw;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(6,28,47,.3);overflow:auto;padding:16px}.drawerHead{position:sticky;top:-16px;background:#fff;padding:9px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.score{font-size:72px;font-weight:950;text-align:center;color:var(--teal);margin:10px}.evidence{margin-top:12px;border:2px solid #e6ba3f;background:#fff8dc;border-radius:14px;padding:13px}.readerBtn,.btn,.opt,.word{touch-action:manipulation}@media(max-width:760px){.topin{align-items:flex-start}.brand{font-size:16px}.readerTools{width:100%}.readerBtn{flex:1 1 50px}.wrap{padding-inline:8px}.lessonNav .navHint{display:none}.lessonNav .btn{flex:1 1 120px}.h1{font-size:clamp(25px,8vw,34px)}.h2{font-size:clamp(21px,6vw,28px)}}@media(prefers-contrast:more){.aocr{opacity:.22}.wm{opacity:.016}}@media print{body{display:none!important}}

/* v2.0 deep-content example cards — responsive and reader-scale aware */
.exampleGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px;margin-top:11px;min-width:0;max-width:100%}
.exampleCard{min-width:0;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 4px 14px rgba(16,56,83,.04);overflow-wrap:anywhere}
.exampleLabel{display:inline-block;margin-bottom:7px;padding:5px 8px;border-radius:999px;background:var(--blue);color:#fff;font-size:calc(12px * min(var(--reader),1.18));font-weight:950}
.exampleEn{font-size:calc(16px * var(--reader));line-height:1.55;font-weight:800;overflow-wrap:anywhere}