@font-face{font-family:"YLD";font-style:normal;font-weight:100 900;font-stretch:62.5% 100%;font-display:swap;src:url(/assets/display-thai-60d3a4c6d1.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"YLD";font-style:normal;font-weight:100 900;font-stretch:62.5% 100%;font-display:swap;src:url(/assets/display-latin-2ac303202a.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:"YLB";font-style:normal;font-weight:100 900;font-stretch:62.5% 100%;font-display:swap;src:url(/assets/body-thai-25affaf763.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
:root{--ink:#0A1012;--ink2:#121B1E;--ink3:#1D2A2E;--line:#2A3A3F;--bone:#F5F2EA;--bone2:#E7E3D8;--mut:#93A5A8;--mut2:#5B6B6E;--lime:#C9FF2F;--red:#E3261B;--emer:#00735A;--disp:"YLD","Noto Sans Thai",system-ui,sans-serif;--body:"YLB","YLD","Noto Sans Thai Looped","Noto Sans Thai",system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
a{color:inherit}
ol,ul{list-style:none;padding:0}
h1,h2{font-family:var(--disp);font-weight:800;line-height:1.22}
small{font-size:.82em}
.kl{display:inline}.kl.out{position:absolute;left:0;top:0;width:100%;pointer-events:none}
.kw{display:inline-block;overflow:hidden;vertical-align:top;padding:.3em .05em .36em;margin:-.3em -.05em -.36em}
.ki{display:inline-block;will-change:transform}
.odo{display:inline-flex;font-variant-numeric:tabular-nums;align-items:flex-start}
.od{display:inline-block;height:1.2em;overflow:hidden;line-height:1.2}
.od-c{display:block;will-change:transform}.od-c i{display:block;font-style:normal;height:1.2em;line-height:1.2em}
.od-s{line-height:1.2;white-space:pre}
.mark{width:26px;height:26px;display:block}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:17px}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:64px;padding:14px 20px;border-radius:20px;font-family:var(--disp);font-size:22px;font-weight:800;text-align:center;text-decoration:none;transition:filter .12s}
.btn:active{filter:brightness(.9)}
.btn.lime{background:var(--lime);color:#0A1012}
.pins{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pin{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.p-sos i{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;background:#E3261B;border:4.5px solid #fff;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.p-sos.big i{left:-17px;top:-17px;width:34px;height:34px}
.p-sos.held i{background:var(--lime);border-color:#0A1012}
.p-veh .veh{position:absolute;left:-32px;top:-32px;width:64px;height:64px}
.p-veh svg{display:block;width:100%;height:100%}
.pt-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#2A3A3F transparent;z-index:3}
.pt-s{position:relative;min-height:105vh;display:flex;align-items:center;padding:90px clamp(18px,5vw,84px)}
.pt-s.tall{min-height:260vh;align-items:flex-start}
.pt-hero{min-height:100vh;padding-top:90px}
.pt-title{font-size:clamp(50px,9.4vw,158px);line-height:1.13;font-weight:900;font-stretch:84%}
.pt-l{position:relative;display:block}
.pt-l.hl{color:var(--lime)}
.pt-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px;font-size:17px;color:#C5D2D4}
.pt-cta .btn{width:auto;padding:14px 26px}
.pt-scrollhint{transition:opacity .25s;position:absolute;left:clamp(18px,5vw,84px);bottom:26px;font-size:14px;color:#AEBCBE;display:flex;align-items:center;gap:10px}
.pt-scrollhint i{display:block;width:1.5px;height:30px;background:var(--lime);transform-origin:top;animation:sh 1.8s cubic-bezier(.6,0,.2,1) infinite}
@keyframes sh{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
.pt-card{position:relative;width:min(560px,100%);padding:26px 28px;border-radius:26px;background:rgba(10,16,18,.84);box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:blur(10px)}
.pt-card.right{margin-left:auto}.pt-card.center{margin:0 auto;text-align:center}
.pt-card.sticky{position:sticky;top:18vh;margin-top:18vh}
.pt-k{display:block;font-family:var(--disp);font-size:15px;font-weight:700;color:var(--lime);margin-bottom:10px}
.pt-card h2{position:relative;font-size:clamp(34px,4.6vw,60px);font-weight:900;font-stretch:86%;line-height:1.18;margin-bottom:12px}
.pt-card p{font-size:18px;line-height:1.6;color:#D3DDDE}
.pt-eta{display:flex;align-items:baseline;gap:10px;margin-top:14px;font-family:var(--disp)}
.pt-eta-n{font-size:64px;font-weight:900;color:var(--lime);line-height:1}.pt-eta small{font-size:17px;font-weight:600}
.pt-end{position:relative;background:linear-gradient(180deg,transparent,rgba(10,16,18,.96) 16%);padding:16vh clamp(18px,5vw,84px) 34px}
.pt-end-in{max-width:1180px;margin:0 auto}
.pt-end h2{position:relative;font-size:clamp(42px,7vw,112px);font-weight:900;font-stretch:84%;line-height:1.14}
.pt-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:34px;counter-reset:s}
.pt-steps li{padding:20px;border-radius:20px;background:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);counter-increment:s}
.pt-steps li::before{content:counter(s);display:block;font-family:var(--disp);font-weight:900;font-size:40px;color:var(--lime);line-height:1.1}
.pt-steps b{display:block;font-family:var(--disp);font-size:21px;margin-top:4px}.pt-steps span{display:block;color:#C5D2D4;line-height:1.5;margin-top:4px}
.pt-dlbox{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}.pt-dlbox .btn{width:auto;padding:14px 30px}.pt-dlbox small{color:#AEBCBE;font-size:14px}
.pt-1669{margin-top:26px;font-size:18px}.pt-1669 b{color:#FF8A6B;font-family:var(--disp);font-size:22px}
.pt-end footer{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;font-size:14px;color:#AEBCBE}
/* a real page, not a frame in the film */
html,body{height:100%;background:var(--ink);color:var(--bone);font-family:var(--body);font-size:16px;overflow:hidden;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a:focus-visible,button:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.skip{position:fixed;left:12px;top:-60px;z-index:20;padding:8px 14px;border-radius:10px;background:var(--lime);color:var(--ink);font-weight:700;transition:top .15s}
.skip:focus{top:10px}
#portal{position:fixed;inset:0;overflow:hidden;background:var(--ink)}
#portal.flat{background:radial-gradient(90vmax 70vmax at 76% 34%,#16262b 0,var(--ink) 70%)}
#portal.flat .pt-map,#portal.flat .pt-pins{display:none}
.map{position:absolute;inset:0;width:100%;height:100%;display:block}
/* The town fades in once it has drawn. The words and the button never wait for it. */
.pt-map{opacity:0;transition:opacity 1.2s ease}
.pt-map.on{opacity:1}
/* On the compositor, not on the frame loop: a slow phone still shows the button at once. */
.pt-tag,.pt-sub,.pt-cta,.pt-now{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.pt-sub{animation-delay:.2s}.pt-cta{animation-delay:.3s}.pt-now{animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
main:focus{outline:0}
.pt-nav{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px clamp(18px,4vw,56px);background:linear-gradient(180deg,rgba(7,12,14,.92),rgba(7,12,14,0))}
.pt-nav .brand{flex:none;color:#fff;font-size:20px;text-decoration:none}
.pt-nav nav{display:flex;gap:clamp(12px,2.2vw,30px);font-size:15.5px;white-space:nowrap}
.pt-nav nav a{text-decoration:none;padding:6px 0;color:#E7EEF0;border-bottom:1.5px solid rgba(255,255,255,.28);transition:border-color .18s,color .18s}
.pt-nav nav a:hover{color:#fff;border-bottom-color:var(--lime)}
.pt-nav nav a[aria-current]{color:var(--lime);border-bottom-color:var(--lime)}
.pt-hero{align-items:center;min-height:100%;padding-top:84px;padding-bottom:64px}
.pt-tag{display:inline-block;font-family:var(--disp);font-size:15px;font-weight:700;color:var(--lime);margin-bottom:10px}
.pt-title{font-size:clamp(46px,min(8.6vw,14.5vh),150px)}
.pt-sub{max-width:640px;margin-top:12px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:#D3DDDE;text-shadow:0 1px 8px rgba(10,16,18,.8)}
.pt-cta{margin-top:20px}
.pt-cta .btn{padding:14px 28px;min-height:66px}
.pt-cta-t{display:flex;flex-direction:column;gap:2px;font-size:16px;color:#E7EEF0}
.pt-cta-t b{font-weight:600}
.pt-cta-t small{color:#AEBCBE;font-size:14px}
.pt-now{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:15px;color:#E7EEF0;text-shadow:0 1px 8px rgba(10,16,18,.8)}
.n1669{flex:none;padding:3px 11px;border-radius:99px;background:#D8231A;color:#fff;font-family:var(--disp);font-weight:800;text-decoration:none}
.pt-types{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pt-types li{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;background:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);font-size:15px}
.pt-types li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.pt-1669 a{text-decoration:none}
.pt-end footer a{text-decoration:none}
.pt-scroll:focus{outline:0}
@media (max-width:760px){
  .pt-nav{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 18px 8px}
  .pt-nav nav{width:100%;overflow-x:auto;scrollbar-width:none;font-size:14.5px;padding-bottom:4px}
  .pt-card{padding:20px}
  .pt-hero{padding-top:104px}
  .pt-cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.pt-scrollhint i,.pt-tag,.pt-sub,.pt-cta,.pt-now{animation:none}.pt-map{transition:none}.pl-rings i{animation:none;opacity:.12}}

/* the plain pages */
body.plain{overflow:auto}
.pl-rings{position:fixed;left:72%;top:58%;width:0;height:0}
.pl-rings i{position:absolute;left:-55vmax;top:-55vmax;width:110vmax;height:110vmax;border-radius:50%;border:2.5px solid var(--lime);opacity:0;animation:pl 8.1s cubic-bezier(.2,.6,.3,1) infinite}
.pl-rings i:nth-child(2){animation-delay:2.7s}.pl-rings i:nth-child(3){animation-delay:5.4s}
@keyframes pl{0%{transform:scale(.02);opacity:.34}100%{transform:scale(1);opacity:0}}
.pl-main{position:relative;max-width:820px;padding:clamp(110px,18vh,190px) clamp(18px,5vw,84px) 60px}
.pl-main h1{font-size:clamp(52px,8vw,110px);font-weight:900;font-stretch:84%;line-height:1.14}
.pl-t{margin-top:16px;font-size:clamp(18px,1.7vw,22px);line-height:1.65;color:#D3DDDE}