:root{--linen:#efe6d2;--paper:#fbf6ea;--ink:#211a14;--mute:#6a5b4b;--line:#e2d4bb;--indigo:#23284a;--night:#141626;--red:#d7263d;--pink:#e0457b;--orange:#f28c28;--yellow:#f6c445;--green:#2f9e5b;--blue:#2b59c3;--sky:#3fa7d6;--purple:#7b4bb7;--silver:#d9dee2;
 --f:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai","Noto Sans Myanmar",sans-serif;--s:Georgia,"Noto Serif Thai","Times New Roman",serif}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#1b1712;--ink:#f1e7d6;--mute:#c2b19b;--line:#3a3026}}
:root[data-theme=dark]{--paper:#1b1712;--ink:#f1e7d6;--mute:#c2b19b;--line:#3a3026}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.6 var(--f)}
html[data-lang=en] [lang=th],html[data-lang=th] [lang=en]{display:none!important}
html[data-lang=th] body{line-height:1.8}
a{color:var(--blue)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) a{color:#8fb4ff}}
h1,h2,h3{font-family:var(--s);line-height:1.15;margin:0}
button{font:inherit}

/* the hero stays put while the page slides over it */
.pin{position:relative;height:100svh;min-height:520px}
.pin .stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;background:#cfe3ee}
.pin canvas{display:block;width:100%;height:100%;touch-action:manipulation;cursor:pointer}
.pin .over{position:absolute;left:0;right:0;top:0;padding:calc(max(10px,env(safe-area-inset-top)) + 46px) 16px 0;pointer-events:none}
@media (min-aspect-ratio:1/1){.pin .over{padding-top:max(18px,env(safe-area-inset-top))}}
.pin .over .in{max-width:1100px;margin:0 auto;background:rgba(251,246,234,.86);border-radius:14px;padding:12px 16px 14px;box-shadow:0 2px 0 rgba(60,40,20,.25);outline:2px dashed rgba(120,90,50,.55);outline-offset:-7px}
@media (min-aspect-ratio:1/1){.pin .over .in{max-width:none;margin:0 0 0 max(16px,4vw);width:min(32vw,460px)}.kick{padding-right:0}}
.kick{font-size:clamp(13px,1.6vw,16px);letter-spacing:.04em;font-weight:700;color:#3b2a1c;text-shadow:0 1px 0 rgba(255,255,255,.6);margin:0 0 4px}
.pin h1{font-size:clamp(38px,5vw,78px);color:#1e1a2e}
.pin .sub{font-size:clamp(16px,2vw,21px);max-width:640px;margin:8px 0 0;color:#2a2018}
.pin .acts{position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));padding:0 16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;pointer-events:none}
.pin .acts button,.pin .acts a{pointer-events:auto}
a.btn,.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:11px 18px;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;background:var(--yellow);color:#000!important;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn.ghost{background:rgba(255,255,255,.9);color:#1d1a16!important}
.btn.dark{background:var(--indigo);color:#fff!important}
.btn:focus-visible{outline:3px solid #000;outline-offset:2px}
.langsw{position:absolute;top:max(10px,env(safe-area-inset-top));right:12px;z-index:30;display:flex;border-radius:999px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.langsw button{border:0;padding:6px 12px;font-size:14px;font-weight:700;background:rgba(255,255,255,.92);color:#222;cursor:pointer}
.langsw button[aria-pressed=true]{background:var(--indigo);color:#fff}

/* content slides over the hero */
main{position:relative;z-index:2;background:var(--paper);border-radius:22px 22px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.18);margin-top:-22px}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
section.sec{padding:40px 0 34px;border-top:1px solid var(--line)}
section.sec:first-child{border-top:0}
.sec>.wrap>h2{font-size:clamp(30px,4.6vw,48px);margin:0 0 6px}
.lede{font-size:clamp(17px,2vw,20px);max-width:720px;margin:6px 0 14px}
.facts{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.facts li{background:rgba(127,110,80,.08);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:16px}
.facts b{display:block;font:700 22px/1.15 var(--s)}
.toy{background:var(--linen);border:1px solid #d9c9aa;border-radius:16px;padding:10px;margin:16px 0;color:#211a14}
.toy canvas{display:block;width:100%;border-radius:10px;touch-action:pan-y;cursor:pointer}
.toy .ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 2px 2px;font-size:15px}
.toy .ctl button{border:1px solid #c9b48f;background:#fffaf0;color:#211a14;border-radius:999px;padding:7px 14px;cursor:pointer;font-weight:600}
.toy .ctl button[aria-pressed=true]{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.toy .ctl label{display:flex;gap:6px;align-items:center}
.toy .ctl input[type=range]{width:140px;accent-color:var(--red)}
.toy .ctl output,.toy .read{font-weight:700}
.toy .say{min-height:1.6em;margin:8px 4px 2px;font-size:16px}
.twocol{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:860px){.twocol{grid-template-columns:1fr 1fr}}
.status{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.05em;border-radius:6px;padding:2px 7px;margin-right:6px;vertical-align:2px}
.status.live{background:#2f9e5b;color:#fff}.status.built{background:#f6c445;color:#000}.status.ask{background:#e0457b;color:#fff}
.offers{list-style:none;margin:12px 0;padding:0;display:grid;gap:10px}
.offers li{border-left:5px solid var(--red);padding:6px 12px;background:rgba(127,110,80,.07);border-radius:0 10px 10px 0}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
details{border-top:1px solid var(--line);padding:10px 0}
details summary{cursor:pointer;font-weight:700}
.src{font-size:14px;color:var(--mute)}
.src li{margin:3px 0}
footer{padding:30px 16px 60px;text-align:center;color:var(--mute);font-size:15px}
.band{position:relative;height:46svh;min-height:280px}
.band .stage{position:sticky;top:0;height:46svh;min-height:280px;overflow:hidden}
.band canvas{width:100%;height:100%;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.addr{display:none}
html.card .langsw,html.card .acts,html.card main,html.card footer{display:none}
html.card .pin,html.card .pin .stage{height:630px;min-height:0}
html.card .pin .over{padding:26px 0 0}
html.card .pin .over .in{margin-left:34px;width:470px}
html.card .pin h1{font-size:78px}
html.card .pin .sub{font-size:21px}
html.card .addr{display:block;margin:10px 0 0;font:700 16px/1.2 var(--f);color:#6a3d1a}
.qr{margin:14px 0;display:flex;gap:14px;align-items:center}.qr img{background:#fff;border-radius:10px;padding:6px;box-shadow:0 1px 3px rgba(0,0,0,.2)}.qr figcaption{font-size:16px;color:var(--mute)}
.five{margin:12px 0 4px;padding:14px;border:2px dashed #c9b48f;border-radius:14px;background:rgba(127,110,80,.06)}
.five label{display:flex;gap:10px;align-items:center;margin:8px 0;font-size:17px}
.five label b{width:1.2em;text-align:right;color:var(--mute)}
.five input{flex:1;min-width:0;font:inherit;font-size:17px;padding:10px 12px;border:1px solid #c9b48f;border-radius:10px;background:#fffdf7;color:#211a14}
.five label.share input{flex:0 0 5.5em}
.btn.line{background:#06c755;color:#000!important}
.offers li .btn{margin-top:10px;font-size:15px;padding:9px 15px}