@font-face{font-family:Sarabun;src:url(/fonts/Sarabun-Regular.ttf)}@font-face{font-family:Sarabun;src:url(/fonts/Sarabun-Bold.ttf);font-weight:700}@font-face{font-family:Pridi;src:url(/fonts/Pridi-Medium.ttf);font-weight:500}:root{font-family:Sarabun,sans-serif;color:#243d32;background:#eaece4;--ink:#253e32;--green:#32624c;--paper:#fffaf0;--line:#cad0c0}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;border:1px solid #bdc7b7;background:#f7f8f1;border-radius:5px;color:var(--ink);padding:9px 14px;transition:background .2s,transform .2s}button:hover:not(:disabled){background:#e0e8d8}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b4904b;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.primary{background:#315b46;color:#fff;border-color:#315b46}.primary:hover:not(:disabled){background:#204c36}.quiet{background:transparent;border-color:transparent}.topbar{height:78px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:#f7f8f0;border-bottom:1px solid #d4dacb}.brand{display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:.02em}.brand-mark{font:500 35px Pridi;display:grid;place-items:center;background:#315b46;color:#faf5e4;width:40px;height:43px;border-radius:3px}.brand small{font-size:11px;font-weight:400;display:block;color:#6a7b6c;letter-spacing:.03em}.top-actions{display:flex;gap:20px;align-items:center}.level{font-size:12px;color:#758574}.intro{text-align:center;padding-top:24px;position:relative;z-index:1;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:.12em;color:#8b764b;text-transform:uppercase;margin:0 0 4px}h1{font:500 33px/1.2 Pridi;margin:0}h2{font:500 29px Pridi;margin:0}.intro>p:last-child{font-size:13px;margin:8px 0 0;color:#617160}main{position:relative;background:radial-gradient(ellipse at 50% 32%,#99aa93,#7b917d 48%,#657e6d);min-height:calc(100vh - 78px);padding-bottom:20px}#stage{height:min(62vh,660px);min-height:340px;position:relative;width:100%;margin-top:0}#scene{display:block;width:100%;height:100%;touch-action:none}#loading{position:absolute;inset:42% 0 auto;text-align:center;color:#fdf7e6;font-size:16px}.stage-tip{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:10px;color:#dfebd8;pointer-events:none;letter-spacing:.03em}.experiment{text-align:center;position:relative;padding:12px 10px 0}.experiment-label{display:inline-block;color:#eff5e7;font-size:11px;letter-spacing:.05em;margin-bottom:9px}.experiment-buttons{display:flex;justify-content:center;gap:7px}.experiment-buttons button{font-size:12px;padding:7px 13px;border-radius:4px}.experiment-buttons .quiet{color:#eef4e7}.experiment p{color:#f4f4e5;font-size:12px;min-height:20px;margin:9px 0 12px}.book-nav{display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:calc(100% - 24px);margin:auto;padding:5px 9px;background:#e5ebdc;border:1px solid #ccd7c0;border-radius:8px;box-shadow:0 8px 25px #18332826}.book-nav button{border:0;background:transparent;padding:5px 10px;font-size:12px}#previous,#next{font-size:25px;line-height:1}#page-label{min-width:168px;text-align:center;font-size:11px}.nav-divider{height:18px;width:1px;background:#bac9b3}.footer-note{text-align:center;color:#cbd9c5;font-size:10px;letter-spacing:.02em;margin:12px 0 0}.drawer{position:fixed;right:0;top:0;bottom:0;width:min(460px,100vw);z-index:10;background:var(--paper);box-shadow:-10px 0 70px #162b3150;overflow:auto}.drawer[hidden],#drawer-scrim[hidden]{display:none}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:24px 28px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:1}.drawer-head button{font-size:25px;line-height:1;background:transparent;border:0}.drawer-content{padding:18px 28px 35px;font-size:15px;line-height:1.8}.drawer-content p{margin:0 0 15px}.drawer-content h3{margin:23px 0 8px;font-size:17px}.drawer-content ol{padding-left:22px}.reading-formula{text-align:center;font:500 30px Pridi;padding:15px;background:#eef1e3;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.reading-callout{background:#e9eddf;padding:12px;font-size:13px}.prediction-list{display:grid;gap:7px;margin-bottom:12px}.prediction-list button{text-align:left;font-size:13px}.small{font-size:12px;color:#798170}#exercises label{display:flex;justify-content:space-between;align-items:center;margin:10px 0 0;font-weight:700}#exercises input{width:70px;padding:8px;border:1px solid #bdc7b7;background:#fff;border-radius:4px}#exercises .answer-feedback{font-size:12px;min-height:22px;color:#527343;margin:3px 0 14px}#reason{width:100%;resize:vertical;padding:10px;margin-top:8px;border:1px solid var(--line);border-radius:4px}#drawer-feedback{font-size:13px;color:#416d40;min-height:24px}#drawer-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#10291866;z-index:9;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}#pdf-link{color:#42674c;font-size:13px}body.drawer-open{overflow:hidden}.fallback #stage{min-height:150px;height:150px}.fallback .stage-tip{display:none}@media(max-width:700px){.topbar{height:65px;padding:0 18px}.brand small{font-size:10px}.top-actions{gap:2px}.level{display:none}.top-actions button{font-size:12px;padding:8px}.intro{padding-top:22px}h1{font-size:28px}#stage{height:45vh;min-height:285px}.experiment-buttons{gap:4px;flex-wrap:wrap}.experiment-buttons button{font-size:11px;padding:8px 9px}.experiment-label{font-size:11px}.book-nav{gap:0;padding:5px 3px}#page-label{min-width:135px;font-size:10px}.book-nav button{padding:6px 7px;font-size:11px}.footer-note{font-size:9px;padding:0 10px}.drawer-content{padding:18px 22px 30px}.drawer-head{padding:22px}.stage-tip{font-size:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}