:root{color:#30423c;--green:#466a56;--ink:#253b32;--muted:#7a887b;--sans:"Space Grotesk","Noto Sans Thai",sans-serif;background:#e8ece5;font-family:Noto Sans Thai,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,canvas:focus-visible{outline-offset:4px;outline:2px solid #397354}[hidden]{display:none!important}button{touch-action:manipulation}.header{z-index:10;pointer-events:none;justify-content:space-between;align-items:center;padding:28px 3.6%;display:flex;position:fixed;top:0;left:0;right:0}.header>*{pointer-events:auto}.brand{font:600 29px var(--sans);letter-spacing:-1.3px;align-items:center;gap:13px;display:flex}.brand-symbol{background:#f1f2eaaa;border:1.5px solid #4e6958;border-radius:13px;justify-content:center;align-items:center;width:48px;height:48px;font-size:27px;display:flex;position:relative;transform:rotate(-7deg)}.brand-symbol>span{background:#e8ece5;font-size:22px;position:absolute;top:-8px;right:-6px}.brand .dot{color:#769a79}.brand small{font:9px var(--sans);letter-spacing:2.4px;color:#7e8d7c;margin-top:6px;display:block}.header-actions{align-items:center;gap:22px;font-size:12px;display:flex}.old-version{color:#7f8c7d;font-size:11px}.old-version:hover{color:#254332}.text-button{width:34px;height:34px;font:16px var(--sans);background:#f7f8f0;border:1px solid #d4ddcf;border-radius:50%}.contact-button{color:#3f5b46;background:#f9faf1c9;border:1px solid #fff;border-radius:30px;padding:12px 19px;font-size:12px}.contact-button span{margin-left:17px}.world{background:radial-gradient(at 55% 57%,#f5f5e9 0%,#e9ede4 55%,#e3e9e1 100%);width:100%;height:100%;position:relative}.intro{z-index:3;pointer-events:none;position:absolute;top:160px;left:4%}.eyebrow{font:500 10px var(--sans);letter-spacing:2px;color:#7b9078;margin-bottom:22px;display:block}.eyebrow i{background:#7c9d79;border-radius:50%;width:6px;height:6px;margin-right:8px;display:inline-block}.intro h1{letter-spacing:-.8px;margin:0 0 20px;font-size:clamp(23px,2.2vw,35px);font-weight:500;line-height:1.45}.intro h1 span{color:#7b977c;display:block}.intro p{color:#83917f;font-size:13px;line-height:1.95}.intro-link{pointer-events:auto;color:#476951;background:0 0;border-bottom:1px solid #aabc9e;padding:11px 0;font-size:12px}.intro-link span{margin-left:15px}.canvas-area{outline:none;position:absolute;inset:11% -2% 12% 16%}#canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.labels{pointer-events:none;position:absolute;inset:0}.station-label{pointer-events:auto;white-space:nowrap;color:#4d6551;background:#f6f8efed;border:1px solid #fcfef7;border-radius:30px;align-items:center;gap:7px;padding:7px 11px 7px 8px;font-size:11px;transition:background .2s,box-shadow .2s;display:flex;position:absolute;transform:translate(-50%,-100%);box-shadow:0 4px 15px #526a4c0c}.station-label .station-number{font:9px var(--sans);color:#74866c;background:#e1e8da;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;display:flex}.station-label.active,.station-label:hover{color:#fff;background:#355b46;border-color:#355b46;box-shadow:0 7px 20px #254d3c25}.station-label.active .station-number,.station-label:hover .station-number{color:#eef8e9;background:#567c5e}.station-label b{color:#8da381;font-size:12px;font-weight:400}.station-label:after{content:"";background:#849b6f66;width:1px;height:14px;position:absolute;bottom:-15px;left:50%}.avatar-label{pointer-events:none;color:#5e6753;white-space:nowrap;background:#fffdf1f2;border:1px solid #fff;border-radius:30px;padding:6px 12px;font-size:11px;position:absolute;transform:translate(-50%,-100%);box-shadow:0 5px 18px #273f3910}.avatar-label span{color:#b79753;margin-left:7px}.destination-label{color:#577659;white-space:nowrap;pointer-events:none;background:#f5f8eabf;border-radius:30px;padding:7px 14px;font-size:11px;position:absolute;bottom:6%;left:50%;transform:translate(-50%)}.map-caption{font:10px/1.6 var(--sans);letter-spacing:1.8px;color:#8b9a80;pointer-events:none;align-items:center;gap:13px;display:flex;position:absolute;bottom:18%;right:5%}.map-caption small{letter-spacing:.3px;color:#9aa68d;font-family:Noto Sans Thai,sans-serif;font-size:10px}.tiny-cross{font:27px var(--sans);color:#a3b098}.view-controls{z-index:4;background:#f7f9f0d9;border:1px solid #fff;border-radius:30px;flex-direction:column;align-items:center;padding:6px;display:flex;position:absolute;top:43%;right:2.7%}.view-controls button{width:39px;height:38px;font:26px var(--sans);color:#73836d;background:0 0;border-radius:50%}.view-controls button:hover{background:#e0e8d9}.view-controls span{background:#d7e0ce;width:18px;height:1px}.view-controls #reset-view{font-size:23px}.dock{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:5;background:#f9faf1e8;border:1px solid #fff;border-radius:27px;padding:14px 17px;display:flex;position:absolute;bottom:25px;left:50%;transform:translate(-50%);box-shadow:0 9px 40px #4569440d}.dock button{color:#687961;background:0 0;border-right:1px solid #dce2d3;flex-direction:column;align-items:center;gap:7px;min-width:86px;padding:2px 16px;font-size:11px;transition:color .2s;display:flex;position:relative}.dock button:last-child{border-right:0}.dock button:hover,.dock button.active{color:#244c35}.dock button.active:after{content:"";background:#668b5b;border-radius:50%;width:4px;height:4px;position:absolute;bottom:-8px}.dock svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:23px;height:23px}.walk-help{color:#8c9b82;font-size:11px;position:absolute;bottom:27px;left:3.6%}.keyboard-keys{align-items:center;gap:3px;display:flex}.keyboard-keys>span{color:#adb7a1;margin:0 4px}kbd{font:9px var(--sans);text-align:center;background:#f7f8ed80;border:1px solid #d3decd;border-radius:4px;min-width:17px;padding:3px}.walk-help p{margin:8px 0 0;line-height:1.8}.walk-help p span{color:#a1ac95}.utility{flex-direction:column;align-items:end;gap:7px;display:flex;position:absolute;bottom:31px;right:3.6%}.utility button{color:#8c9c81;background:0 0;padding:3px 0;font-size:10px}.utility button:hover{color:#3d6546}.near-prompt{text-align:left;z-index:6;white-space:nowrap;background:#fcfdf5f2;border:1px solid #fff;border-radius:16px;align-items:center;gap:13px;max-width:90%;padding:12px 19px;display:flex;position:absolute;bottom:137px;left:50%;transform:translate(-50%);box-shadow:0 10px 35px #47634315}.keycap{width:34px;height:34px;font:16px var(--sans);color:#597246;background:#e7edde;border:1px solid #d2ddc7;border-radius:9px;place-items:center;display:grid}.near-prompt small{color:#94a184;margin-bottom:2px;font-size:10px;display:block}.near-prompt strong{color:#416046;font-size:13px;font-weight:500}.prompt-arrow{color:#768e60;margin-left:7px;font-size:21px}.touch-pad{display:none}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.world-fallback{z-index:7;max-width:550px;padding:30px;position:absolute;top:30%;left:30%}.world-fallback h2{font-size:25px}.world-fallback p{font-size:15px;line-height:1.9}.world.no-webgl .canvas-area,.world.no-webgl .intro{display:none}dialog{color:#344c3b;background:#f6f8ef;border:1px solid #fff;border-radius:23px;width:min(435px,100% - 30px);max-height:calc(100svh - 44px);margin:auto 0;padding:37px 30px 0;position:fixed;inset:0 22px 0 auto;overflow:auto;box-shadow:0 30px 100px #28403225}dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#23382c26}.close{color:#76906c;background:#e7edde;border-radius:50%;width:30px;height:30px;position:absolute;top:14px;right:15px}.close:hover{background:#d6e2c9}dialog .eyebrow{margin:8px 0 19px;font-size:10px}dialog h2{letter-spacing:-.8px;margin:0 0 15px;font-size:29px;font-weight:500;line-height:1.4}dialog>p{color:#7a8e74;margin-bottom:23px;font-size:14px;line-height:1.9}.panel-footer{border-top:1px solid #dce5d3;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;padding:21px 0;display:flex}.panel-footer>span{font:8px var(--sans);letter-spacing:1px;color:#a2ae93}.panel-footer a{color:#486540;font-size:12px}.panel-footer b{margin-left:10px;font-weight:400}.service-list{flex-direction:column;gap:7px;display:flex}.service-option{text-align:left;background:#e8eedf;border-radius:11px;width:100%;padding:15px;display:block}.service-option summary{cursor:pointer;padding-right:15px;list-style:none;position:relative}.service-option summary:after{content:"+";color:#729162;position:absolute;top:4px;right:0}.service-option[open] summary:after{content:"−"}.service-option summary span{font:500 16px var(--sans);color:#476440;display:block}.service-option summary small{color:#859776;margin-top:5px;font-size:11px;display:block}.service-option p{color:#647d58;margin:0;padding-top:10px;font-size:13px;line-height:1.9}.info-block{background:#e9efdf;border-radius:13px;margin-bottom:12px;padding:18px}.info-block h3{color:#4f7044;margin:0 0 9px;font-size:14px;font-weight:500}.info-block p{color:#778b69;margin:0;font-size:13px;line-height:1.9}.info-block.positive{background:#3f644b}.info-block.positive h3{color:#dcebcf}.info-block.positive p{color:#bdd2af}.mini-flow{color:#58744a;justify-content:space-between;align-items:center;gap:5px;margin:18px 0;font-size:10px;display:flex}.mini-flow span{background:#e0e9d3;border-radius:6px;padding:8px}.dash-demo{background:#e9efdf;border:1px solid #d9e4ce;border-radius:13px;margin-bottom:18px;padding:18px}.dash-demo>small{font:9px var(--sans);letter-spacing:1.3px;color:#91a47f}.demo-bars{align-items:end;gap:8px;height:90px;margin:14px 0;display:flex}.demo-bars span{height:var(--h);background:#719367;border-radius:3px 3px 0 0;flex:1}.dash-demo p{color:#8b9d7c;margin:0;font-size:10px}.timeline{counter-reset:steps;flex-direction:column;gap:20px;display:flex}.timeline>div{padding-left:38px;position:relative}.timeline>div:before{counter-increment:steps;content:"0" counter(steps);font:14px var(--sans);color:#91a57e;position:absolute;top:0;left:0}.timeline h3{margin:0 0 5px;font-size:14px;font-weight:500}.timeline p{color:#819475;margin:0;font-size:13px;line-height:1.8}.contact-card{color:#eff6e7;background:#41664a;border-radius:13px;justify-content:space-between;align-items:center;margin-bottom:10px;padding:19px;display:flex}.contact-card.secondary{color:#55744a;background:#e2ead8}.contact-card strong{font:500 18px var(--sans);margin-bottom:4px;display:block}.contact-card small{opacity:.7;font-size:11px;display:block}.contact-card b{font-size:24px;font-weight:400}.contact-note{color:#819374;font-size:12px;line-height:1.9}.app-card{border-bottom:1px solid #dce5d1;padding:17px 0;display:block}.app-card strong{font:500 17px var(--sans)}.app-card span{float:right}.app-card p{color:#839677;margin:6px 0 0;font-size:12px;line-height:1.8}.help-list{color:#718768;padding-left:20px;font-size:14px;line-height:2.1}@media (width>=1700px){.canvas-area{inset:8% 0 10% 11%}.intro{top:20%}}@media (width<=1150px){.intro{top:140px}.intro h1{font-size:27px}.intro .eyebrow{font-size:8px}.intro p{font-size:12px}.canvas-area{inset:16% -5% 15% 9%}.walk-help{bottom:135px}.keyboard-keys kbd:nth-last-child(-n+4),.keyboard-keys>span{display:none}.utility{bottom:142px;right:4%}.map-caption{display:none}.dock button{min-width:76px;padding:2px 13px}.near-prompt{bottom:140px}.old-version{display:none}}@media (width<=700px){.header{align-items:start;padding:22px 6%}.brand{gap:10px;font-size:22px}.brand-symbol{border-radius:11px;width:37px;height:37px;font-size:23px}.brand-symbol>span{font-size:18px}.brand small{letter-spacing:1.8px;font-size:7px}.header-actions{gap:9px}.text-button{width:30px;height:30px;font-size:13px}.contact-button{padding:9px 12px;font-size:10px}.contact-button span{margin-left:6px}.intro{pointer-events:none;top:110px;left:7%;right:7%}.intro .eyebrow{letter-spacing:1.5px;margin-bottom:12px;font-size:8px}.intro h1{margin-bottom:8px;font-size:24px;line-height:1.3}.intro h1 br{display:none}.intro h1 span{display:inline}.intro p{margin:0;font-size:11px;line-height:1.8}.intro p br,.intro-link{display:none}.canvas-area{inset:195px -7%}.station-label{gap:4px;padding:5px 7px 5px 5px;font-size:9px}.station-label .station-number{width:16px;height:16px;font-size:7px}.station-label b{font-size:10px}.station-label:after{height:9px;bottom:-10px}.avatar-label{padding:4px 9px;font-size:9px}.avatar-label span{margin-left:3px}.destination-label{font-size:9px;bottom:0}.view-controls{padding:4px;top:auto;bottom:220px;right:3%}.view-controls button{width:28px;height:30px;font-size:23px}.view-controls #reset-view{font-size:20px}.dock{border-radius:21px;justify-content:space-between;width:calc(100% - 22px);padding:13px 5px;bottom:15px}.dock button{flex:1;gap:7px;min-width:0;padding:0 3px;font-size:9px}.dock svg{width:21px;height:21px}.walk-help{max-width:140px;bottom:113px;left:7%}.keyboard-keys{display:none}.walk-help p{font-size:10px}.touch-pad{z-index:6;grid-template-rows:repeat(2,31px);grid-template-columns:repeat(3,33px);gap:3px;display:grid;position:absolute;bottom:114px;right:7%}.touch-pad button{color:#74876b;font:17px var(--sans);touch-action:none;-webkit-user-select:none;user-select:none;background:#f9faf1ce;border:1px solid #fff;border-radius:10px}.touch-pad [data-direction=up]{grid-column:2}.touch-pad [data-direction=left]{grid-area:2/1}.touch-pad [data-direction=down]{grid-area:2/2}.touch-pad [data-direction=right]{grid-area:2/3}.touch-pad button:active{background:#bfd5b1}.utility{flex-direction:row;gap:15px;display:flex;bottom:91px;left:7%;right:auto}.utility button{font-size:8px}.near-prompt{border-radius:12px;gap:9px;padding:8px 12px;bottom:194px}.near-prompt small{font-size:8px}.near-prompt strong{font-size:11px}.keycap{width:28px;height:28px;font-size:13px}.prompt-arrow{font-size:17px}.world-fallback{padding:20px;top:30%;left:5%;right:5%}dialog{border-radius:20px;width:calc(100% - 24px);max-height:calc(100svh - 24px);margin:auto;padding:33px 24px 0;inset:0}dialog h2{font-size:26px}.panel-footer>span{font-size:7px}.panel-footer a{font-size:11px}}@media (height<=650px) and (width>=701px){.header{padding-top:15px}.intro{top:105px}.intro h1{font-size:24px}.canvas-area{top:6%;bottom:17%}.dock{padding:10px 14px;bottom:12px}.near-prompt{bottom:105px}.intro p{max-width:170px}}@media (prefers-reduced-motion:reduce){*,:after,:before{transition:none!important;animation:none!important}}