:root{--ink:#eff3e8;--muted:#c4d2c6;--accent:#d9e4ad;--glass:rgba(20,43,37,.78)}*{box-sizing:border-box}body{margin:0;background:#577669;color:var(--ink);font-family:Manrope,'Noto Sans Thai',sans-serif;font-size:14px;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button{border:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #e4f8b4;outline-offset:5px}button{transition:background .2s,transform .2s}button:hover{filter:brightness(1.15)}a{color:inherit;text-decoration:none}#scene,.shade{position:fixed;inset:0}#scene canvas{display:block;touch-action:none}.shade{pointer-events:none;background:linear-gradient(90deg,rgba(12,32,28,.53),transparent 54%),linear-gradient(0deg,rgba(10,29,24,.8),transparent 32%,transparent 79%,rgba(15,36,34,.22))}header{position:fixed;top:0;left:0;right:0;height:112px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff26}.brand{display:flex;align-items:center;gap:16px;font-size:15px;font-weight:700;letter-spacing:3px}.brand small{display:block;font-size:10px;font-weight:400;letter-spacing:1px;margin-top:6px;color:#d1dccd}.brand-mark{font-family:'Noto Sans Thai',sans-serif;font-size:31px;letter-spacing:-3px;line-height:23px}.brand-mark span{display:block;font-size:32px;letter-spacing:0;text-align:center}nav{display:flex;gap:34px;height:100%;align-items:center}nav button{background:none;color:#d8e1d8;padding:17px 0;font-size:12px}.nav-active{border-bottom:1px solid var(--accent);color:white}.edition{font-size:9px;letter-spacing:1.8px;display:flex;align-items:center;gap:12px}i{display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%}.intro{position:absolute;left:6%;top:23%;pointer-events:none}.intro button{pointer-events:auto}.eyebrow{font-size:9px;letter-spacing:2.4px;display:flex;align-items:center;gap:10px;color:#dde7ca}.eyebrow>span{width:22px;height:1px;background:var(--accent)}h1{font-weight:400;font-size:clamp(43px,4.6vw,72px);line-height:1.4;letter-spacing:-2px;margin:22px 0 14px}h1 span{color:#e0e6b9}p{line-height:1.9}.intro p{font-size:13px;color:#d6ded2;font-weight:300}.primary{background:var(--accent);color:#233b2e;border-radius:4px;padding:15px 22px;margin-top:19px;min-width:181px;display:flex;gap:25px;align-items:center;justify-content:space-between;font-size:12px}.primary span{font-size:20px}.location{margin-top:26px;font-size:9px;color:#d0dace;letter-spacing:.2px}.location>span{font-size:15px;margin-right:6px}.panel{position:absolute;right:4%;top:23%;width:268px;border:1px solid #d7e8da35;border-radius:9px;background:var(--glass);backdrop-filter:blur(22px);box-shadow:0 12px 40px #0b261a19;padding:19px 20px}.panel-top{display:flex;justify-content:space-between;align-items:center;font-size:12px}.panel-top span{display:flex;align-items:center;gap:9px}.panel-top button{background:none;font-size:20px;color:#acbfaa;padding:0 4px}.label{display:flex;justify-content:space-between;font-size:10px;margin:20px 0 11px;color:#ccdacb}.label>span{color:#e7ebcc;font-size:9px}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.presets button{background:#d1dfc208;border:1px solid #d7e8da20;border-radius:5px;padding:10px 3px 9px;font-size:20px;color:#bacbb9}.presets span{display:block;font-size:9px;margin-top:6px}.presets .selected,.views .selected{background:#c9d8aa22;border-color:#d9e4ad8c;color:#edf0cb}.control{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;font-size:10px}.control output{font-size:10px;color:var(--accent)}input[type=range]{width:100%;height:3px;accent-color:#d9e4ad;margin:17px 0 8px;cursor:pointer}.range-ends{display:flex;justify-content:space-between;width:100%;font-size:8px;color:#8fa58e;margin-top:4px}.panel-divider{height:1px;background:#d7e8da20;margin-top:20px}.views{display:flex;gap:6px}.views button{flex:1;padding:9px 2px;border-radius:4px;background:none;border:1px solid #d7e8da25;font-size:9px;color:#bdd0ba}.reset{width:100%;background:none;font-size:9px;color:#aabd9f;margin-top:19px}.bottom{position:absolute;left:6%;right:4%;bottom:88px;display:flex;align-items:center;justify-content:space-between;gap:24px;pointer-events:none}.scene-caption{display:flex;align-items:center;gap:24px}.index{font-size:26px;font-weight:400;align-self:flex-start;line-height:1.1}.index span{font-size:11px;color:#a1b1a0;display:block;margin-top:8px}.scene-caption .eyebrow{font-size:8px;letter-spacing:2px;color:#bcccac}.scene-caption h2{font-size:18px;font-weight:400;margin:9px 0 4px}.scene-caption p{font-size:10px;color:#c4d1bf;margin:0}.interaction{display:flex;gap:19px;align-items:center;color:#d8e2d1;font-size:9px}.interaction button{pointer-events:auto;border:1px solid #d7e8da40;border-radius:30px;background:#173e3020;padding:9px 13px;font-size:9px}.map{width:162px;flex-shrink:0;border-left:1px solid #d7e8da30;padding-left:20px}.map svg{width:132px;height:68px}.contour{fill:none;stroke:#d4e4c3;stroke-width:.5;opacity:.22}.river{fill:none;stroke:#d5e6b5;stroke-width:3}.map circle{fill:#f6f9d1;stroke:#506846;stroke-width:2}.map>span{font-size:8px;display:flex;justify-content:space-between;color:#b4c5aa}footer{position:fixed;bottom:0;left:4%;right:4%;border-top:1px solid #d7e8da30;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#b4c5af;font-size:8px}footer i{margin-right:7px}footer button{background:none;font-size:9px;color:#d3dfc7}#render-status{font-size:8px;letter-spacing:1px}#restore{position:fixed;bottom:24px;left:24px;background:var(--glass);padding:12px 18px;border-radius:6px;font-size:12px}body.clean header,body.clean main,body.clean footer,body.clean .shade{display:none}#loading{position:fixed;inset:0;background:#203e34;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;font-size:13px;transition:opacity .7s}.loader-mark{font-size:64px;color:var(--accent)}#loading button{padding:12px 22px;color:#263d30}dialog{width:min(510px,90vw);max-height:85dvh;border:1px solid #71866a;border-radius:10px;background:#203b31;color:#e4eddd;padding:42px;box-shadow:0 30px 100px #0007}dialog::backdrop{background:#0b241bc9;backdrop-filter:blur(8px)}dialog h2{font-size:32px;font-weight:400;line-height:1.45;margin:24px 0}dialog p{font-size:13px;color:#c8d9c3}.note{font-size:11px;line-height:1.9;background:#ffffff08;border-left:2px solid #bacb92;padding:14px;margin:22px 0}dialog a{font-size:11px;color:#d9e4ad}#close-story{position:absolute;right:18px;top:12px;font-size:27px;background:none}.error{color:#ffc6ab}
@media(min-width:1600px){.panel{top:26%;width:290px}.intro{top:25%}}@media(max-height:760px) and (min-width:761px){header{height:82px}.intro{top:19%}h1{font-size:49px;margin:14px 0}.panel{top:17%;padding:12px 17px}.label{margin-top:12px}.control{margin-top:16px}.panel-divider{margin-top:12px}.reset{margin-top:12px}.bottom{bottom:67px}.location{margin-top:16px}}@media(max-width:1000px){.edition{display:none}.interaction{display:none}.intro{left:5%}.bottom{left:5%}.panel{right:3%;width:244px}h1{font-size:52px}}@media(max-width:760px){header{height:78px;padding:0 6%}.brand{font-size:11px;gap:12px}.brand small{font-size:8px}.brand-mark{font-size:27px}nav{gap:0}nav .nav-active{display:none}nav button{font-size:10px}.intro{left:7%;top:16%;right:6%}.intro .eyebrow{font-size:7px;letter-spacing:2px}h1{font-size:45px;line-height:1.35;margin:17px 0 12px}.intro p{font-size:11px;margin:10px 0}.primary{padding:10px 16px;min-width:158px;font-size:11px;margin-top:14px}.location{font-size:8px;margin-top:14px}.panel{right:6%;top:auto;bottom:114px;width:212px;padding:12px 15px}.panel-top{font-size:11px}.label{margin:12px 0 8px}.presets button{padding:5px 2px;font-size:17px}.presets span{font-size:8px}.control{margin-top:14px}.panel-divider{margin-top:12px}.views button{padding:7px 2px}.reset{margin-top:11px}.bottom{left:7%;right:6%;bottom:58px}.scene-caption{gap:12px}.scene-caption .eyebrow{font-size:6px}.scene-caption h2{font-size:13px;margin:5px 0}.scene-caption p,.map{display:none}.index{font-size:21px}.index span{font-size:9px;margin-top:4px}footer{min-height:42px;left:6%;right:6%}footer>span:first-child{max-width:220px;font-size:7px}footer button{font-size:8px}#render-status{display:none}}@media(max-width:760px) and (max-height:740px){.intro{top:14%}h1{font-size:36px}.intro p,.location{display:none}.panel{bottom:110px}.primary{margin-top:10px}#panel-content{max-height:270px;overflow:auto}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}