@font-face{font-family:Mitr;src:url('./fonts/mitr-thai-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:Mitr;src:url('./fonts/mitr-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Mitr;src:url('./fonts/mitr-thai-500-normal.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0E00-0E7F}
@font-face{font-family:Mitr;src:url('./fonts/mitr-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:TrainNumbers;src:url('./fonts/nunito-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
.drag-guide{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}.drag-guide[hidden],.drag-guide [hidden]{display:none}.drag-guide *{pointer-events:none}.guide-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 0 #fffdf2)}.guide-route{fill:none;stroke:#167ea1;stroke-width:3;stroke-dasharray:6 8;stroke-linecap:round}.guide-source,.guide-target{position:absolute;border-radius:20px}.guide-source{border:3px solid #fffdf2;box-shadow:0 0 0 3px #167ea1,0 5px 15px #23576126}.guide-target{border:3px dashed #167ea1;box-shadow:0 0 0 4px #fffdf2;transform-origin:center}.guide-ticket{position:absolute;left:0;top:0;display:grid;place-items:center;border:5px solid #fffdf2;border-radius:20px;box-shadow:0 5px 0 #80573655,0 10px 18px #25493430;font:700 58px/1 TrainNumbers,sans-serif;transform-origin:center;will-change:transform,opacity}.guide-hand{position:absolute;left:0;top:0;width:108px;height:108px;object-fit:contain;filter:drop-shadow(0 4px 3px #31544833);transform-origin:34.56px 9.18px;user-select:none;-webkit-user-drag:none;will-change:transform,opacity}
:root{color-scheme:light;font-family:Mitr,system-ui,sans-serif;color:#365d51;background:#f7f8ed;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;min-height:100%;height:100%}body{display:flex;flex-direction:column;height:100dvh;min-height:500px}h1,h2,p{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}a{color:inherit;text-decoration:none}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #266cb0;outline-offset:4px}button{touch-action:manipulation}button:not(:disabled):active{transform:translateY(2px)}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.skip-link{position:fixed;top:10px;left:10px;z-index:50;padding:12px;background:#fff;transform:translateY(-200%)}.skip-link:focus{transform:none}.header{height:70px;min-height:70px;padding:10px max(23px,env(safe-area-inset-right)) 10px max(23px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{display:flex;align-items:center;gap:11px}.brand-mark{display:grid;place-items:center;background:#e5eed8;border-radius:15px;width:46px;height:46px;transform:rotate(-6deg)}.brand-mark svg{width:42px;height:38px}.brand small{display:block;font-size:8px;letter-spacing:2.4px;color:#7b9780;margin-bottom:2px}.brand h1{font-size:17px;font-weight:500}.header-actions{display:flex;align-items:center;gap:10px}.garden-link{display:flex;gap:6px;align-items:center;min-height:44px;padding:8px 13px;background:#edf1e2;border-radius:14px;color:#68815d;font-size:12px}.garden-link .icon{width:20px;height:20px}.star-total{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 13px;background:#fff0bd;border:1px solid #ecd59d;border-radius:15px;color:#906324}.star-total .icon{fill:#eab842;stroke:#c28d29;width:21px}.star-total output{font:700 17px TrainNumbers,sans-serif}.icon-button{height:47px;width:47px;display:grid;place-items:center;flex-shrink:0;background:#e6f2ff;color:#4079a5;border:2px solid #88b3d2;border-radius:15px;box-shadow:0 3px #b7cddc}.icon-button:hover{background:#d8edff}
main{flex:1;min-height:0;padding:0 max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.train-world{position:relative;height:100%;overflow:hidden;isolation:isolate;border:1px solid #d7e5cb;border-radius:29px;background:radial-gradient(ellipse at 50% 27%,#f4fae9 0%,#e9f3dd 55%,#d7e7ca 100%)}#scene{position:absolute;inset:0;overflow:hidden;outline:none}#scene canvas{display:block;width:100%;height:100%}.loading{height:100%;display:grid;align-content:center;justify-items:center;gap:12px;color:#688c70}.loading svg{width:120px;height:90px}.loading p{font-size:15px}.hud{position:absolute;inset:0;z-index:2;pointer-events:none}.hud button{pointer-events:auto}.top-left{position:absolute;top:19px;left:22px;width:224px}.mode-picker{padding:6px;display:flex;gap:6px;background:#fffdf1ee;border:1px solid #cedcc2;border-radius:21px;box-shadow:0 3px #adc69b40}.mode{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:62px;background:#eaf2e3;color:#658560;border:1px solid #c0d0b3;border-radius:16px}.mode.active{background:#3d8871;border-color:#2b6c58;color:#fff;box-shadow:0 3px #2a6652,inset 0 2px #ffffff24}.mode small{font-size:11px}.mode-numbers{font:700 22px/1.1 TrainNumbers,sans-serif;letter-spacing:2px}.mode-numbers b{font-weight:700;color:#d38c35}.mode.active .mode-numbers b{color:#ffe6a6}.round-progress{display:flex;align-items:center;gap:12px;padding:11px 8px}.round-progress #progress{display:flex;gap:8px;flex:1}.progress-star{width:23px;height:23px;fill:#94b48a55;stroke:none}.progress-star.earned{fill:#dca932}#round{font:700 12px TrainNumbers,sans-serif;white-space:nowrap;color:#6b8661}.question-wrap{position:absolute;right:22px;top:19px;display:flex;flex-direction:column;align-items:flex-end;gap:12px}.question{display:flex;align-items:center;gap:14px;padding:11px 12px 11px 21px;background:#fffdf3f5;border:1px solid #c9d9ba;border-bottom:4px solid #c8d8b9;border-radius:23px;box-shadow:0 5px 13px #4a6a4008}.question h2{font-size:20px;font-weight:400;line-height:1.4;outline:none}.listen{border-radius:50%;width:49px;height:49px;background:#377fc1;color:white;border-color:#2b679f;box-shadow:0 3px #2d6291}.listen:hover{background:#2e70ad}.hint-button{background:#ffefb8;border-color:#d8b65e;color:#927025;box-shadow:0 3px #d0b36d}.hint-button:hover{background:#ffe294}.bottom-note{position:absolute;bottom:19px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 17px 8px 10px;max-width:90%;border:1px solid #d5dfc9;background:#fffff1ed;border-radius:20px;box-shadow:0 3px #9db58b1a;color:#68835e;transition:background .2s}.mini-demo{display:flex;align-items:center;gap:7px}.mini-demo .icon{width:22px;height:22px}.mini-ticket,.mini-wagon{display:grid;place-items:center;width:32px;height:31px;border-radius:9px;font:700 22px TrainNumbers,sans-serif;background:#ffcc72;color:#8b5d25;border:2px solid #fff9e4;box-shadow:0 2px #caa56c}.mini-wagon{background:#a6dad6;color:#428c86}.bottom-note p{font-size:13px;line-height:1.5}.bottom-note.success{color:#337656;background:#eefbe8;border-color:#b6d6a9}.bottom-note.retry{color:#ad6752;background:#fff3e8;border-color:#e9c7a4}.bottom-note.success .mini-demo{display:none}
dialog{width:min(440px,calc(100% - 38px));max-height:calc(100dvh - 40px);overflow:auto;padding:30px 34px 26px;border:1px solid #d1dfc4;border-radius:30px;background:#fffef3;color:#365d51;text-align:center;box-shadow:0 25px 80px #264b3838}dialog::backdrop{background:#375b4c42;backdrop-filter:blur(6px)}dialog h2{font-size:27px;font-weight:500;line-height:1.5}.eyebrow{font-size:11px;color:#819579;margin:7px 0 8px}.welcome-mark{width:100px;height:100px;border-radius:35px;background:#e5f0d8;display:grid;place-items:center;margin:0 auto 12px;transform:rotate(-5deg)}.welcome-mark svg{width:90px;height:74px}.welcome-mark.small{width:74px;height:74px;border-radius:25px}.welcome-mark.small svg{width:65px;height:57px}.example-train{display:flex;gap:10px;justify-content:center;margin:22px auto 13px}.example-train span{position:relative;display:grid;place-items:center;width:67px;height:61px;border:4px solid #fff8e3;border-radius:15px;background:#ffcc7e;box-shadow:0 5px #d89849;color:#80582d;font:700 37px TrainNumbers,sans-serif}.example-train span:nth-child(2){background:#f3a3a3;box-shadow:0 5px #c57778}.example-train span:nth-child(3){background:#9bd6e5;box-shadow:0 5px #5fabbc}.example-train span:after{content:'';position:absolute;bottom:-11px;left:7px;width:12px;height:12px;border-radius:50%;background:#5c7e69;box-shadow:32px 0 #5c7e69}.dialog-intro{font-size:13px;color:#8a9a7c;margin:20px 0}.primary{display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;width:100%;border:2px solid #2f755e;border-radius:18px;background:#438d71;color:white;font-size:18px;box-shadow:0 4px #2e6e56}.primary:hover{background:#377d62}.primary .icon{width:22px}.secondary{width:100%;min-height:52px;border:1px solid #b6c9a7;border-radius:17px;margin-top:14px;background:#edf3e4;color:#5d7d53;font-size:14px}.small-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-size:12px;color:#829575;margin-top:12px}.close{position:absolute;right:13px;top:12px;width:44px;height:44px;border-radius:14px;font:30px system-ui;background:#eef4e4;color:#6d8661}dialog ol{margin:18px 0;padding:0;list-style:none;text-align:left}dialog li{display:flex;gap:12px;align-items:center;margin:14px 0;font-size:14px;line-height:1.7}.step-number{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:12px;background:#e7f1da;color:#548258;font:700 22px TrainNumbers,sans-serif}.motion-setting{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-top:1px dashed #d7e2c9;font-size:13px}.motion-setting input{width:24px;height:24px;accent-color:#438d71}.voice-note{font-size:10px;color:#8a9a7c;line-height:1.8;margin:0 0 19px}.complete-stars{color:#e3b342;font:700 33px TrainNumbers,sans-serif;letter-spacing:6px;margin:15px 0 25px}.fallback{position:absolute;inset:25% 4% 13%;display:flex;flex-direction:column;justify-content:center;gap:50px}.fallback-row{display:flex;justify-content:center;gap:16px}.fallback button{width:120px;min-height:95px;font:700 38px TrainNumbers,sans-serif;border:5px solid #fffdf0;border-radius:22px;background:#a5d8ce;color:#366d5d;box-shadow:0 7px #629b8d}.fallback button[data-token]{background:#ffd084;color:#916326}.fallback button[aria-pressed=true]{outline:5px solid #3377b5;outline-offset:5px}.fallback .fruit-dots{display:flex;justify-content:center;flex-wrap:wrap;width:105px;gap:5px;margin:7px auto}.fruit-dots i{width:13px;height:13px;background:#ec9861;border-radius:50%}
@media(max-width:900px){.header{padding-inline:18px}.garden-link span{display:none}.garden-link{padding:10px}.brand h1{font-size:16px}.top-left{left:17px;top:17px;width:204px}.question-wrap{right:17px;top:17px}.question{gap:10px;padding:10px 10px 10px 17px}.question h2{font-size:18px}.mode-numbers{font-size:21px}.bottom-note{bottom:20px}}
@media(max-width:600px){body{min-height:540px}.header{height:62px;min-height:62px;padding:8px 12px;gap:7px}.brand{gap:7px}.brand-mark{width:36px;height:39px;border-radius:13px}.brand-mark svg{width:34px;height:31px}.brand small{font-size:6px;letter-spacing:1.5px}.brand h1{font-size:12px}.header-actions{gap:6px}.garden-link{display:none}.star-total{min-height:39px;padding:0 7px;gap:4px}.star-total .icon{width:17px}.star-total output{font-size:15px}.header-actions .icon-button{width:38px;height:40px;border-radius:13px}.header-actions .icon{width:21px}main{padding:0 6px max(6px,env(safe-area-inset-bottom))}.train-world{border-radius:22px}.top-left{left:10px;top:13px;width:159px}.mode-picker{padding:4px;gap:4px;border-radius:17px}.mode{min-height:55px;border-radius:13px}.mode small{font-size:10px}.mode-numbers{font-size:19px;letter-spacing:0}.round-progress{padding:9px 3px;gap:4px}.round-progress #progress{gap:4px}.progress-star{width:18px;height:18px}#round{font-size:10px}.question-wrap{top:13px;right:10px;max-width:calc(100% - 183px)}.question{padding:8px 7px 8px 10px;gap:6px;border-radius:18px}.question h2{font-size:14px;max-width:100px}.listen{width:40px;height:40px}.listen .icon{width:20px;height:20px}.hint-button{height:42px;width:42px}.bottom-note{bottom:17px;gap:8px;padding:7px 12px 7px 8px}.bottom-note p{font-size:12px}.mini-ticket,.mini-wagon{width:27px;height:26px;font-size:19px}.mini-demo{gap:4px}.mini-demo .icon{width:18px}dialog{padding:27px 24px 23px}dialog h2{font-size:24px}.fallback{inset:29% 4% 18%}.fallback-row{gap:10px}.fallback button{width:90px;min-height:85px}.fallback .fruit-dots{width:70px}}
@media(max-height:650px) and (min-width:601px){.header{height:58px;min-height:58px}.top-left,.question-wrap{top:12px}.mode{min-height:52px}.question{padding:7px 10px 7px 16px}.question h2{font-size:17px}.listen{width:43px;height:43px}.bottom-note{bottom:10px;padding-block:5px}.bottom-note p{font-size:11px}.question-wrap{gap:9px}}
.reduce-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(forced-colors:active){button,.question,.bottom-note{border:2px solid ButtonText!important;box-shadow:none!important}.mode.active{outline:3px solid Highlight}.icon{forced-color-adjust:auto}}