@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap');
:root{--navy:#071827;--ink:#152a36;--paper:#eff1ec;--card:#f8f8f3;--line:#c8d0cc;--teal:#087e83;--green:#3a8f68;--yellow:#d6a638;--red:#b44d3b;--orange:#cd7034;--muted:#596a70}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:74px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans Thai',sans-serif;line-height:1.65}.top{position:sticky;top:0;z-index:30;background:rgba(7,24,39,.97);color:#dbe7e8;min-height:58px;padding:12px max(3vw,20px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #284251}.top a{color:inherit;text-decoration:none;font-size:11px}.top nav{display:flex;gap:24px}.top>span{font-size:9px;letter-spacing:.13em;color:#63d7cf}main{max-width:1280px;margin:auto}.hero{margin:28px 20px 0;padding:clamp(45px,8vw,105px) clamp(25px,7vw,90px);background:radial-gradient(circle at 88% 10%,#1a5063,#0a2536 35%,#061623 75%);color:#f3f7f5;min-height:570px;display:flex;flex-direction:column;justify-content:center}.eyebrow{font-size:10px;letter-spacing:.17em;font-weight:700;color:#65d5ca}.eyebrow.dark{color:var(--teal)}h1,h2{font-family:'Source Serif 4','Noto Sans Thai',serif;line-height:1.06}h1{font-size:clamp(42px,7vw,88px);max-width:1000px;margin:18px 0 34px}.hero button,.experiment button,.lesson button{font:inherit}.hero>button{align-self:flex-start;background:transparent;border:0;border-bottom:2px solid #f1ad65;color:#f4ddc5;padding:12px 0;cursor:pointer;font-size:18px}.hero em{color:#f1ad65}.myth-reveal{margin-top:38px;border-top:1px solid #385466;padding-top:30px}.pipe,.knowledge{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap}.pipe b,.knowledge b,.knowledge li{background:#133448;padding:12px 15px;font-size:11px}.knowledge ul{display:flex;gap:5px;list-style:none;padding:0;flex-wrap:wrap}.plus{text-align:center;color:#f1ad65;font-size:28px}.equation{text-align:center;font:600 clamp(28px,4vw,48px)/1.2 'Source Serif 4',serif;color:#65d5ca;margin:28px}.equation small{display:block;font:400 12px 'Noto Sans Thai',sans-serif;color:#c8d7d9}.question{text-align:center;font-size:18px}.principle{margin:0 20px 80px;padding:30px clamp(24px,5vw,65px);background:#d8e6e2;display:grid;grid-template-columns:220px 1fr;gap:30px}.principle b{color:var(--teal);font-size:11px;letter-spacing:.14em}.principle p{margin:0;font-size:16px}.lesson,.experiment{margin:0 20px 90px;padding-top:25px;border-top:6px solid var(--teal)}.experiment{border-color:var(--orange)}.lesson>header,.experiment>header{display:grid;grid-template-columns:80px 1fr;gap:22px;align-items:start;margin-bottom:25px}.lesson>header>span,.experiment>header>span{font:700 58px/1 'Source Serif 4',serif;color:#9ca9a7}.lesson h2,.experiment h2{font-size:clamp(30px,4.5vw,52px);margin:4px 0 8px}.lesson header p,.experiment header p{margin:0;color:var(--muted)}.spectrum{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}.spectrum button{min-height:135px;border:0;padding:10px 7px;cursor:pointer;writing-mode:vertical-rl;transform:rotate(180deg);font:600 11px 'Noto Sans Thai',sans-serif;color:#142a2f}.spectrum button:nth-child(-n+3){background:#acd3b7}.spectrum button:nth-child(n+4):nth-child(-n+6){background:#ead68f}.spectrum button:nth-child(n+7){background:#e2a595}.spectrum button.active{outline:4px solid var(--navy);outline-offset:2px}.spectrum-detail{margin-top:15px;display:grid;grid-template-columns:1.2fr repeat(4,1fr);border:1px solid var(--line);background:var(--card)}.spectrum-detail>div{padding:18px;border-right:1px solid var(--line)}.spectrum-detail b{display:block;color:var(--teal);font-size:9px;letter-spacing:.1em}.spectrum-detail p{font-size:12px;margin:6px 0}.note{font-size:11px;color:var(--muted)}.qio{display:grid;grid-template-columns:100px 1fr;gap:10px 20px;padding:22px;background:#e1e9e5;margin-bottom:18px}.qio>b{font-size:9px;color:var(--teal);letter-spacing:.12em}.qio p{margin:0}.qio label{font-weight:600}.qio output{color:var(--orange);margin-left:10px}.qio input{display:block;width:100%;margin-top:10px;accent-color:var(--teal)}button{min-height:42px;border:1px solid var(--ink);background:var(--card);color:var(--ink);padding:9px 15px;cursor:pointer}button:hover,button:focus-visible{background:#dbe9e5}button[aria-pressed="true"],button.selected{background:var(--navy);color:white}.sim-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:center}canvas{display:block;width:100%;height:auto;background:var(--card);border:1px solid var(--line)}.live{padding:28px;background:var(--navy);color:white;font-size:14px}.live strong{display:block;font:700 54px/1 'Source Serif 4',serif;color:#65d5ca}.takeaway{margin-top:17px;padding:21px 25px;border-left:6px solid var(--teal);background:#dbe7e3}.takeaway b{font-size:9px;letter-spacing:.14em;color:var(--teal)}.takeaway p{margin:5px 0}.examples{display:flex;flex-wrap:wrap;gap:6px}.examples span{background:var(--card);padding:6px 9px;font-size:10px}.model-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.model-compare article{background:var(--card);border:1px solid var(--line);padding:20px}.model-compare article>b{font-size:9px;color:var(--teal)}.model-compare h3{font-size:15px}.model-compare strong{font:700 30px 'Source Serif 4',serif;color:var(--orange)}.graph-lab{display:grid;grid-template-columns:1fr 2fr 1fr;gap:16px;align-items:center}.records,.graph-features{padding:22px;background:var(--card);border:1px solid var(--line)}.records code{display:block;font-size:17px;line-height:1.7}.records p{font-size:11px}.graph-lab svg{width:100%;background:#e2e9e5;min-height:340px}.graph-lab .edge{stroke:#81918f;stroke-width:3}.graph-lab .cycle{stroke:var(--orange);stroke-width:6}.graph-lab .node{fill:var(--navy)}.graph-lab text{fill:white;font:600 17px sans-serif}.graph-features span{display:block;padding:8px 0;border-bottom:1px solid var(--line);font-size:11px}.domain-select{display:flex;align-items:end;justify-content:space-between;gap:20px}.domain-select label{font-size:11px}.domain-select select{display:block;margin-top:6px;padding:10px;min-width:250px;background:var(--card)}.drag-items{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.drag-item{background:var(--navy);color:white;padding:9px 12px;font-size:11px;cursor:grab}.drop-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.drop-grid>div{min-height:145px;padding:12px;border:2px dashed #94a19f;background:#e4e9e5}.drop-grid b{font-size:10px}.drop-grid .drag-item{display:block;margin-top:6px}.drop-grid .correct{background:#d3ead9}.drop-grid .wrong{background:#efccc5}#checkDrag{margin-top:12px}.maintenance canvas{max-height:280px}.choice-row{display:flex;gap:10px;justify-content:center;margin:16px}.maint-flow{min-height:100px;padding:25px;background:#dce8e4;text-align:center;font-size:16px}.maint-flow span{display:inline-block;padding:10px;background:var(--card);margin:4px}.tradeoffs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.tradeoffs article{padding:19px;background:var(--card);border-top:4px solid var(--teal)}.tradeoffs p,.tradeoffs small{font-size:11px}.tradeoffs small{color:var(--muted)}.shortcut-stage{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px;align-items:center}.objects{display:grid;grid-template-columns:1fr 1fr;gap:8px}.scene{min-height:210px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:.35s}.scene.a{background:#bfd6b6}.scene.b{background:#e8c3a4}.scene i{font-style:normal;font-size:75px;color:var(--navy)}.scene small{font-weight:700}.objects.shifted .a{background:#e8c3a4}.objects.shifted .b{background:#bfd6b6}.shortcut-stage strong{display:block;font:700 55px 'Source Serif 4',serif;color:var(--teal)}.accuracy>div{height:18px;background:#d4d8d4;margin-top:10px}.accuracy i{display:block;height:100%;width:97%;background:var(--green);transition:.5s}.causal-diagram{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:40px;background:#e1e9e5}.causal-diagram div{background:var(--card);padding:15px 20px;font-weight:600}.causal-diagram span{color:var(--orange);font-size:28px}.causal-choices{display:flex;gap:10px;justify-content:center;margin:18px}.causal-choices+p{text-align:center}.table-wrap{overflow-x:auto}.taxonomy table{border-collapse:collapse;width:100%;background:var(--card);font-size:11px}.taxonomy th,.taxonomy td{padding:12px;border-bottom:1px solid var(--line);text-align:left}.taxonomy th{background:var(--navy);color:white}.heat-low{background:#d1e5d5}.heat-mid{background:#eadb9d}.heat-high{background:#e5b0a3}.challenge-progress{display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center}.challenge-progress>i{height:8px;background:#d0d6d2}.challenge-progress b{display:block;width:10%;height:100%;background:var(--teal);transition:.3s}.challenge-card{margin-top:15px;padding:clamp(25px,5vw,55px);background:var(--navy);color:white}.challenge-card>p{font-size:clamp(19px,3vw,30px);font-family:'Source Serif 4','Noto Sans Thai',serif}.challenge-card #challengeChoices{display:grid;grid-template-columns:1fr 1fr;gap:9px}.challenge-card button{background:#173649;color:white;border-color:#57717c}.challenge-card #challengeFeedback{margin:18px 0;color:#8fe2d9}.final-model{margin:0 20px 80px;padding:clamp(35px,6vw,75px);background:#0a2030;color:white}.final-model h2{font-size:clamp(35px,5vw,65px)}.final-model ol{font-size:17px;max-width:850px}.final-model li{margin:13px}.system-equation{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:35px}.system-equation span{background:#18394b;padding:10px}.system-equation b{color:#edb06a}.system-equation strong{display:block;width:100%;font-size:22px;color:#65d5ca;margin-top:12px}.not-equation{margin-top:25px;color:#e4a696}.closing{text-align:center;padding:70px 25px 100px}.closing h2{font-size:clamp(35px,5vw,65px)}.closing em{color:var(--orange)}.closing p{max-width:850px;margin:30px auto}.closing blockquote{max-width:800px;margin:40px auto;padding:25px;border-top:1px solid var(--teal);border-bottom:1px solid var(--teal);font-family:'Source Serif 4','Noto Sans Thai',serif;font-size:20px}footer{background:var(--navy);color:#afc1c5;padding:28px max(calc((100vw - 1200px)/2),20px);display:flex;justify-content:space-between;font-size:11px}footer a{color:white;text-decoration:none}@media(max-width:900px){.spectrum-detail{grid-template-columns:1fr 1fr}.spectrum-detail>div:first-child{grid-column:1/-1}.graph-lab,.shortcut-stage{grid-template-columns:1fr}.drop-grid{grid-template-columns:1fr 1fr}.tradeoffs{grid-template-columns:1fr}.sim-grid{grid-template-columns:1fr}}@media(max-width:620px){.top nav,.top>span{display:none}.hero{min-height:0}.principle{grid-template-columns:1fr}.lesson>header,.experiment>header{grid-template-columns:48px 1fr}.lesson>header>span,.experiment>header>span{font-size:38px}.spectrum{overflow-x:auto;grid-template-columns:repeat(9,65px);padding:4px}.spectrum-detail{grid-template-columns:1fr}.qio{grid-template-columns:1fr}.model-compare,.challenge-card #challengeChoices{grid-template-columns:1fr}.drop-grid{grid-template-columns:1fr}.domain-select{display:block}.choice-row,.causal-choices{flex-direction:column}.shortcut-stage{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}footer{flex-direction:column;gap:8px}}