@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f3f7f5;--ink:#183b33;--muted:#4d655a;--line:#cddbd3;--green:#075c46;--lime:#d9f58f;--paper:#fff;--orange:#b56b35}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.75 'Manrope','IBM Plex Sans Thai',system-ui,sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b7c872;outline-offset:4px}h1,h2,h3,h4,p{margin:0}h1{font-size:clamp(30px,3.1vw,45px);line-height:1.35;letter-spacing:-1.3px;font-weight:700}h2{font-size:23px;line-height:1.5;letter-spacing:-.5px}h3{font-size:18px;line-height:1.5}p{margin-top:12px}small{font-size:12px}.muted{color:var(--muted)}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:15px;color:#6a8273}.skip{position:fixed;left:10px;top:-100px;z-index:30;background:white;padding:12px}.skip:focus{top:10px}#sidebar{width:245px;background:#fdfefb;border-right:1px solid var(--line);position:fixed;top:0;bottom:0;padding:34px 22px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-1px}.brand small{display:block;font-size:8px;letter-spacing:1.6px;margin-top:7px}.brand-icon{height:40px;width:40px;background:var(--green);color:var(--lime);border-radius:11px;display:grid;place-items:center;font-size:27px}.side-label{font-size:11px;color:#526b5e;margin:49px 13px 13px}nav{display:grid;gap:7px}.nav-link{display:flex;gap:13px;align-items:center;padding:12px 15px;border-radius:8px;color:#405d50;font-size:15px}.nav-link.active{background:#eaf0e1;color:var(--green);font-weight:700}.nav-link .ico{font-size:18px;width:21px}.nav-link b{margin-left:auto;font-size:10px;background:white;padding:0 6px;border-radius:4px}.side-progress{border-top:1px solid var(--line);margin-top:30px;padding:24px 10px;font-size:11px}.side-progress b{float:right}.side-progress small{color:var(--muted);font-size:10px}.meter{height:5px;background:#e7ecdf;border-radius:20px;overflow:hidden;margin:10px 0}.meter i{display:block;height:100%;background:#678c55;transition:width .3s}.side-bottom{margin-top:auto;font-size:11px;color:#607768}.side-bottom small{font-size:9px;color:#526b5e}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#78a66e;margin-right:6px}.shell{margin-left:245px}header{height:82px;border-bottom:1px solid var(--line);padding:0 45px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#4f675a}.header-tag{font-size:10px;color:#566f5c}.header-tag span{padding:0 8px}#menu{display:none}main{max-width:1350px;margin:auto;padding:38px 45px 65px;min-height:calc(100vh - 160px)}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;gap:20px}.page-heading p{font-size:14px;color:var(--muted);margin:5px 0 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:7px;padding:11px 19px;background:var(--green);color:white;font-size:13px;font-weight:600;border:1px solid transparent;line-height:1.6}.btn:hover{filter:brightness(1.08)}.btn.light{background:white;border-color:var(--line);color:var(--ink)}.btn.lime{background:var(--lime);color:#173e30}.btn.small{padding:7px 12px;font-size:12px}.btn.danger{background:#9e453b}.text-link{font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:4px}.hero{display:grid;grid-template-columns:1.15fr 1fr;background:#123c46;color:#fff;min-height:320px;border-radius:14px;overflow:hidden}.hero-copy{padding:37px 38px}.hero .eyebrow{color:var(--lime);font-size:10px;display:flex;align-items:center;gap:10px}.hero .eyebrow:before{content:'';width:20px;height:1px;background:var(--lime)}.hero h1{font-size:38px}.hero h1 em{font-style:normal;color:var(--lime)}.hero p{color:#e0eee6;font-size:15px;max-width:390px;line-height:1.9;margin:16px 0 23px}.hero-visual{position:relative;min-height:300px;background-image:radial-gradient(#3c5c46 1px,transparent 1px);background-size:20px 20px;display:flex;align-items:center;justify-content:center}.schema-scene{position:relative;width:330px;height:250px;transform:rotate(-4deg)}.schema-box{position:absolute;background:#f5f7eb;color:#2a4c38;border:1px solid #99ac85;border-radius:8px;width:150px;box-shadow:9px 12px 0 #09261d4d;font:10px/1.9 'Manrope',sans-serif;overflow:hidden}.schema-box b{display:block;background:#e3edcd;padding:8px 12px;font-size:11px}.schema-box div{padding:7px 12px}.schema-box span{color:#7f916d;font-size:8px;margin-right:7px}.schema-box.a{top:12px;left:0}.schema-box.b{top:73px;right:0}.schema-box.c{bottom:0;left:0}.schema-lines{position:absolute;inset:0;width:100%;height:100%}.scene-note{position:absolute;bottom:15px;right:25px;font-size:9px;letter-spacing:1.5px;color:#daecc7}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:22px 0 36px}.stat{border:1px solid var(--line);background:white;border-radius:10px;padding:18px 21px;display:flex;gap:14px;align-items:center}.stat-icon{height:37px;width:37px;background:#f1f4e9;border-radius:9px;display:grid;place-items:center;color:#6a8455;font-size:20px}.stat strong{font-size:23px;line-height:1.2;display:block;letter-spacing:-1px}.stat small{color:var(--muted);font-size:12px}.section-head{display:flex;align-items:end;justify-content:space-between;margin:27px 0 18px;gap:15px}.section-head p{font-size:14px;color:var(--muted);margin-top:3px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.card{background:white;border:1px solid var(--line);border-radius:11px;padding:23px;min-width:0}.lesson-card{transition:transform .2s,border-color .2s;display:flex;flex-direction:column;min-height:240px}.lesson-card:hover{transform:translateY(-3px);border-color:#9bad87}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.chapter-icon{background:#edf2e4;color:#5b7849;font-size:21px;font-weight:600;width:45px;height:45px;border-radius:9px;display:grid;place-items:center}.tag{display:inline-block;font-size:12px;line-height:1.6;padding:3px 9px;border:1px solid #e1e8d7;border-radius:20px;background:#f4f7ee;color:#405c30}.tag.level2{background:#f6f1e8;color:#825313;border-color:#eee4d3}.tag.level3{background:#edf0f8;color:#3b5489;border-color:#e0e5f2}.lesson-card h3{font-size:16px}.lesson-card p{font-size:14px;color:var(--muted);margin:8px 0 19px}.card-footer{border-top:1px solid #edf0e8;padding-top:13px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#526b5e;margin-top:auto}.card-footer b{font-size:17px;color:#3b5d42}.two-col{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}.feature{background:#eaf0df;position:relative;overflow:hidden}.feature p{font-size:14px;max-width:430px;color:#405e36;margin-bottom:20px}.feature h3{font-size:21px}.feature .big-num{position:absolute;right:18px;bottom:0;font-size:120px;line-height:1;font-weight:800;color:#dde6cd;pointer-events:none}.feature .btn{position:relative}.format-list{display:grid;grid-template-columns:1fr 1fr;gap:15px}.format-list a{font-size:13px;padding:13px 4px;border-bottom:1px solid var(--line)}.format-list small{display:block;color:var(--muted);font-size:12px;margin-left:23px}footer{border-top:1px solid var(--line);padding:22px 45px;font-size:9px;display:flex;gap:20px;letter-spacing:.4px;color:#4f675a}footer a{margin-left:auto}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}input,select,textarea{border:1px solid var(--line);background:white;color:var(--ink);border-radius:7px;padding:10px 13px;max-width:100%}input[type=search]{flex:1;min-width:200px}.chip{background:#eaf0e3;color:#5f7459;padding:8px 15px;border-radius:6px;font-size:12px}.chip.active{background:var(--green);color:white}.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:28px}.article{background:white;border:1px solid var(--line);border-radius:12px;padding:30px}.article section{margin:28px 0}.article section p{font-size:16px;line-height:2}.article h2{font-size:20px}.article li{margin:8px 0}.article .lead{color:var(--muted)}.lesson-aside{align-self:start;position:sticky;top:25px}.lesson-aside a{display:block;padding:9px 0;font-size:12px;color:var(--muted)}.callout{background:#f1f5e7;border-left:3px solid #a6bf6c;border-radius:0 8px 8px 0;padding:18px 20px;margin:22px 0;font-size:13px}.callout.warn{background:#fcf3e8;border-color:#cfa371}.callout p{margin:6px 0 0}.flow{display:flex;gap:8px;align-items:center;overflow:auto;padding:23px 3px}.flow-item{flex:1;min-width:0;overflow-wrap:anywhere;padding:14px 9px;border:1px solid #dce5cc;border-radius:8px;text-align:center;font-size:13px;background:#f0f6e7}.flow-arrow{flex:0 0 auto;color:#537736;font-size:18px}.flow-caption{font-size:12px;color:var(--muted)}pre{background:#152c25;color:#e0eccd;padding:23px;border-radius:9px;overflow:auto;font-size:12px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}details{border:1px solid var(--line);border-radius:8px;padding:15px;margin:16px 0;background:white}summary{cursor:pointer;font-weight:600;font-size:13px}details p{font-size:13px}ul{padding-left:22px}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:22px}.source-link{font-size:13px;text-decoration:underline;margin-right:15px;display:inline-block}.quiz-wrap{max-width:890px;margin:0 auto}.quiz-status{display:flex;justify-content:space-between;align-items:center;margin:20px 0}.timer{font-variant-numeric:tabular-nums;background:#edf2e4;border-radius:7px;padding:8px 14px;font-weight:700}.option{width:100%;text-align:left;display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:8px;background:white;padding:15px 17px;margin:11px 0;color:var(--ink);font-size:14px;opacity:1!important}.option span{display:grid;place-items:center;width:29px;height:29px;flex-shrink:0;border:1px solid var(--line);border-radius:6px;font-size:12px}.option.selected{border-color:#628448;background:#f0f6e7}.option.correct{border-color:#628448;background:#eaf3e0}.option.wrong{border-color:#c67b69;background:#fbefeb}.feedback{padding:17px;border-radius:8px;background:#edf4e6;font-size:13px;margin-top:18px}.feedback.bad{background:#fbefeb}.question-grid{display:flex;flex-wrap:wrap;gap:7px;margin-top:25px}.question-grid button{width:33px;height:33px;border:1px solid var(--line);background:white;color:var(--ink);border-radius:5px;font-size:11px}.question-grid button.answered{background:#e5edda}.question-grid button.current{border:2px solid var(--green)}.score{font-size:64px;line-height:1.2;font-weight:800;color:var(--green)}.score small{font-size:20px;color:var(--muted)}.breakdown{margin:15px 0}.breakdown-row{display:grid;grid-template-columns:1fr 100px 40px;gap:12px;align-items:center;padding:8px 0;font-size:12px;border-bottom:1px solid var(--line)}.flashcard{width:100%;background:#123c46;color:#fff;min-height:320px;border-radius:15px;padding:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.flashcard small{font-size:11px;letter-spacing:1px;color:#b9d48c;margin-bottom:27px}.flashcard strong{font-size:24px;line-height:1.8;max-width:650px}.flashcard.flipped{background:#e9f0db;color:var(--ink);border:1px solid #d8e3c5}.flashcard.flipped small{color:#65844f}.flashcard.flipped strong{font-size:18px;font-weight:500}.center{text-align:center}.seq-row{display:flex;align-items:center;gap:15px;border:1px solid var(--line);padding:12px;border-radius:8px;background:white;margin:9px 0;font-size:13px}.seq-row .step-num{color:#97a48b;width:20px}.seq-row .controls{margin-left:auto;display:flex;gap:4px}.icon-button{background:#edf2e4;color:var(--ink);border-radius:5px;padding:4px 10px}.seq-row.good{border-color:#94b873;background:#f0f6e9}.seq-row.bad{border-color:#cf9b84}.case-text{width:100%;min-height:170px;resize:vertical;margin-top:15px;line-height:1.8}.rubric label{display:block;padding:6px 0;font-size:13px}.rubric input{margin-right:10px}.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.accounts{display:flex;justify-content:center;gap:25px;margin:25px 0}.account{flex:1;background:#f1f5e9;border:1px solid #dde6d0;border-radius:10px;padding:22px;text-align:center}.account strong{font-size:35px;display:block}.lab-log{font:12px/1.9 ui-monospace,monospace;background:#173e30;color:#d7e6b6;border-radius:8px;padding:20px;min-height:100px;white-space:pre-line}.index-bars{display:flex;align-items:end;height:145px;gap:45px;justify-content:center;border-bottom:1px solid var(--line);margin:30px 0 10px}.bar{width:95px;background:#dfb48d;border-radius:5px 5px 0 0;text-align:center;position:relative;min-height:6px;transition:height .4s}.bar.green{background:#9db67a}.bar span{position:absolute;top:-25px;left:0;right:0;font-size:12px}.range-row{display:flex;gap:10px;align-items:center;margin:20px 0}.range-row input{flex:1}.er-tables{display:grid;grid-template-columns:1fr 45px 1fr;align-items:center;gap:8px;margin:20px 0}.entity{border:1px solid #bccda4;border-radius:8px;overflow:hidden;font:12px/1.9 ui-monospace,monospace}.entity b{display:block;background:#e3edcf;padding:10px}.entity div{padding:12px;background:#f9fbf4}.entity-link{text-align:center;font-size:11px;color:#6a8052}.route-list{display:grid;gap:12px;margin-top:20px}.route-list a{display:flex;align-items:center;gap:15px;padding:15px;background:white;border:1px solid var(--line);border-radius:8px;font-size:13px}.route-list small{margin-left:auto;color:var(--muted)}.empty{padding:40px;text-align:center;color:var(--muted)}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#173e30;color:white;border-radius:7px;padding:10px 20px;font-size:12px;z-index:50;opacity:0;pointer-events:none}#toast.show{opacity:1}.print-only{display:none}
@media(min-width:1500px){.hero{min-height:355px}.hero-copy{padding:45px}.hero h1{font-size:44px}.schema-scene{transform:scale(1.1) rotate(-4deg)}}
@media(max-width:1150px){#sidebar{width:210px;padding:28px 15px}.shell{margin-left:210px}main{padding:30px 25px}header{padding:0 25px}.hero-copy{padding:30px 25px}.hero h1{font-size:31px}.schema-scene{transform:scale(.85) rotate(-4deg)}.stats{gap:10px}.stat{padding:14px 12px;gap:9px}.stat-icon{width:30px;height:30px}.grid{gap:12px}.card{padding:19px}.lesson-layout{grid-template-columns:minmax(0,1fr) 190px}.article{padding:24px}footer{padding:20px 25px}footer span{display:none}}
@media(max-width:900px){.hero{grid-template-columns:1.25fr 1fr}.hero-visual{overflow:hidden}.schema-scene{transform:scale(.7) rotate(-4deg);min-width:330px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(2,1fr)}.lesson-layout{display:block}.lesson-aside{display:none}.two-col,.lab-grid{grid-template-columns:1fr}.header-tag{display:none}.hero h1{font-size:29px}}
@media(max-width:680px){#sidebar{transform:translateX(-100%);transition:transform .2s;width:245px;box-shadow:10px 0 30px #15322522}#sidebar.open{transform:translateX(0)}.shell{margin-left:0}header{height:62px;padding:0 18px;justify-content:start;gap:15px;position:sticky;top:0;background:#f6f7f2f5;z-index:8}#menu{display:block}main{padding:25px 18px 45px}.page-heading{align-items:start}.page-heading h2{font-size:21px}.hero{grid-template-columns:1fr}.hero-copy{padding:29px 26px 15px}.hero h1{font-size:34px}.hero-visual{min-height:220px}.schema-scene{transform:scale(.8) rotate(-4deg);height:245px;margin-top:-12px}.hero p{font-size:15px}.stats{margin:18px 0 28px}.stat strong{font-size:22px}.stat small{font-size:12px}.section-head h2{font-size:21px}.grid{grid-template-columns:1fr}.lesson-card{min-height:215px}.card-top{margin-bottom:14px}.card{padding:22px}.article{padding:20px}.article section p{font-size:16px}.flow{flex-direction:column}.flow-item{width:100%;padding:12px}.flow-arrow{transform:rotate(90deg);line-height:1}.flow-caption{margin-top:6px}.page-heading .btn{font-size:11px;padding:8px 10px;flex-shrink:0}h1{font-size:29px}.flashcard{padding:25px;min-height:330px}.flashcard strong{font-size:21px}.flashcard.flipped strong{font-size:16px}.quiz-wrap .card{padding:20px}.option{font-size:13px;padding:13px 12px}.breakdown-row{grid-template-columns:1fr 60px 35px}.accounts{gap:10px}.account{padding:15px}.account strong{font-size:28px}footer{padding:20px 18px;font-size:8px;gap:8px}.er-tables{grid-template-columns:1fr}.entity-link{transform:rotate(90deg)}.toolbar input{width:100%}.section-head{align-items:center}.format-list{gap:10px}.seq-row{gap:8px;padding:10px}.seq-row .controls{flex-shrink:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{#sidebar,header,footer,.actions,.toolbar,.lesson-aside,#toast,.skip,.no-print{display:none!important}.shell{margin:0}main{padding:0;max-width:none}.lesson-layout{display:block}.article{border:0;padding:0}.article section{break-inside:avoid}body{background:white;color:black;font-size:12px}.flow{display:flex;flex-direction:row}details{break-inside:avoid}pre{background:#f1f1f1;color:black}.print-only{display:block}.hero{background:white;color:black}}

/* High-contrast reading palette: text and status are never color-only. */
.nav-link.active{background:#d9f0e4;color:#064d3a;border-left:3px solid #087b59;padding-left:12px}
.card{box-shadow:0 2px 6px #163b2905}
.lesson-card:nth-child(3n+2) .chapter-icon{background:#e1effc;color:#235588}
.lesson-card:nth-child(3n) .chapter-icon{background:#fff0d5;color:#865317}
.tag.level2{background:#e8f2ff;color:#244e83;border-color:#c4d9f0}
.tag.level3{background:#fff0d5;color:#7b4916;border-color:#e9cca4}
.section-head h2{color:#103e32}
.callout{background:#eaf4df;border-color:#527f24;color:#28461e}
.callout.warn{background:#fff2dc;border-color:#bb7518;color:#71430f}
.option.selected{border:2px solid #126747;background:#e3f3e9;padding:14px 16px}
.option.correct{border:2px solid #167347;background:#e1f2e7;color:#184e31}
.option.wrong{border:2px solid #bd4b35;background:#ffede7;color:#862e20}
.feedback{background:#e4f4e9;color:#1e5033}
.feedback.bad{background:#fff0e9;color:#862e20}
.btn{font-size:14px}.btn.light{border-color:#b4c9bc}.btn.light:hover{background:#eaf3ed}
.article section h2{color:#075c46}.lesson-aside a{color:#435e50;font-size:13px}
@media(max-width:680px){.option{font-size:14px}.option.selected{padding:12px 11px}.page-heading>.tag{display:none}.scene-note{font-size:8px}.card-footer{font-size:11px}}