/* Local system fonts keep the preview independent of external font services. */
:root{--ink:#15382f;--gold:#e8bd68;--paper:#f5f1e7;--muted:#69766d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font:16px 'Noto Sans Thai',Tahoma,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #db9b25;outline-offset:4px}.preview{padding:7px 5%;background:#e7dcc1;font-size:10px;letter-spacing:2px;font-weight:700}.preview span{letter-spacing:0;margin-left:16px;font-size:11px;font-weight:400}header{height:94px;padding:0 5%;display:flex;align-items:center;gap:34px;background:#faf7ee;border-bottom:1px solid #dfdfcf;position:relative;z-index:3}.brand b{font:700 32px Georgia;letter-spacing:-2px;display:block}.brand b span{margin-left:6px;font-weight:400}.brand small{font:8px Arial;letter-spacing:3px;display:block;margin-top:5px}nav{display:flex;gap:27px;margin-left:auto;font-size:14px}nav a{padding:9px 0;border-bottom:2px solid transparent}nav a.active{border-color:#bb903c}.button,button{display:inline-flex;align-items:center;justify-content:center;gap:18px;border:0;background:var(--gold);color:#163b2d;padding:15px 27px;cursor:pointer;font-weight:600;border-radius:3px;transition:.2s}.button:hover,button:hover{background:#f1cf8a;transform:translateY(-1px)}.button.small{font-size:13px;padding:12px 18px}.button.outline{border:1px solid #dadbbf;background:transparent;color:inherit}.button.dark{background:var(--ink);color:#fff}#menu{display:none}.hero{position:relative;min-height:655px;color:#fff;background:linear-gradient(90deg,rgba(8,30,24,.96),rgba(8,30,24,.65) 44%,rgba(8,30,24,.02)),url('assets/world.png') center 46%/cover;padding:90px 8% 65px}.eyebrow{font-size:11px;letter-spacing:3px;color:#a7884f;text-transform:uppercase;font-weight:600}.hero .eyebrow{color:#ebc77e}.hero h1{font-size:clamp(40px,4.8vw,68px);line-height:1.24;font-weight:500;margin:22px 0}.hero h1 em{font-style:normal;color:#edcc8b}.hero p{max-width:465px;line-height:1.9;color:#d2ded2;font-size:16px}.actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}.hero .caption{font-size:11px;color:#c1cdbb;margin-top:46px;letter-spacing:1px}.quick{display:grid;grid-template-columns:repeat(3,1fr);margin:0 8%;border-bottom:1px solid #d5d9c9}.quick a{padding:29px 25px;display:flex;align-items:center;gap:20px;border-right:1px solid #d5d9c9}.quick a:last-child{border:0}.quick i{font:28px Georgia;color:#9d854c}.quick strong{font-size:16px;display:block}.quick small{font-size:12px;color:var(--muted)}.section{padding:75px 8%}.section h2{font-weight:500;font-size:34px;margin:10px 0 12px;line-height:1.4}.lead{color:var(--muted);line-height:1.9;max-width:750px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px}.section-head a{font-size:13px;border-bottom:1px solid}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{background:#fcfaf3;border:1px solid #dce0d3;padding:30px;position:relative}.card .num{font:38px Georgia;color:#b9bd9e}.card h3{font-size:21px;font-weight:500;margin:18px 0 12px}.card p{font-size:14px;color:var(--muted);line-height:1.9}.card a{display:inline-block;font-size:13px;margin-top:16px;border-bottom:1px solid #a68d59}.tag{font-size:11px;display:inline-block;border:1px solid #b9c5af;padding:4px 9px;border-radius:20px;color:#557048}.banner{background:#163d32;color:#f9f2db;display:grid;grid-template-columns:1fr 1fr;gap:45px;padding:50px;align-items:center}.banner img{width:100%;border-radius:4px}.banner p{color:#bacbbb;line-height:1.9}.page-title{padding:65px 8% 35px;background:#e9ecdf;border-bottom:1px solid #d2dac8}.page-title h1{font-size:42px;font-weight:500;line-height:1.3;margin:12px 0}.columns{display:grid;grid-template-columns:1fr 1fr;gap:48px}.steps{counter-reset:step;padding:0;list-style:none}.steps li{position:relative;padding:4px 0 25px 47px;line-height:1.9;color:#526959}.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:4px;width:29px;height:29px;border:1px solid #a9b89e;text-align:center;border-radius:50%;color:#173b2b}.notice{background:#e9e6d5;border-left:3px solid #c6a465;padding:18px 22px;font-size:13px;line-height:1.9;margin:24px 0}.recipe{display:grid;grid-template-columns:1fr 26px 1fr 26px 1.4fr;gap:12px;align-items:center;padding:23px;background:#fcfaf3;border:1px solid #d7ddcb;margin:14px 0;text-align:center}.recipe span{font-size:15px}.recipe strong{color:#56763c;font-weight:500}.recipe small{display:block;font-size:12px;color:#788275}.form{background:#fcfaf3;border:1px solid #d4ddcc;padding:34px}.form label{display:block;font-size:14px;margin:18px 0 7px}.form input:not([type=checkbox]){display:block;width:100%;padding:13px;border:1px solid #bdc9b7;background:white;border-radius:3px}.form .check{display:flex;gap:9px;align-items:start;font-size:12px;line-height:1.8}.form button{width:100%;margin-top:20px}.form input[type=checkbox]{margin-top:5px}#formStatus{font-size:14px;line-height:1.8;color:#735119}details{padding:18px 0;border-bottom:1px solid #cad4c0}summary{cursor:pointer;font-weight:500}details p{color:var(--muted);font-size:14px;line-height:1.9}.map-frame{width:100%;height:850px;border:1px solid #bfcbb7;background:#123c2c;margin-top:25px}.disabled{background:#d8dbcc;color:#71806d;cursor:not-allowed}.disabled:hover{transform:none;background:#d8dbcc}.download-box{padding:36px;border:1px solid #c7d1bd;background:#fdfbf4}.download-box h2{font-size:27px}.download-box .button{width:100%;margin-top:25px}footer{background:#0c2c25;color:#d8e1cf;padding:44px 8%;display:grid;grid-template-columns:1fr 1fr;gap:15px}footer p{font-size:13px;margin:0}footer div{display:flex;gap:24px;font-size:12px}footer small{font-size:10px;color:#8ea793} @media(max-width:1000px){header{gap:15px;padding:0 4%}nav{gap:14px;font-size:12px}.grid{gap:14px}.card{padding:22px}.hero{padding:65px 7%}.section{padding:55px 6%}}@media(max-width:760px){header{height:78px}.brand b{font-size:26px}header>.button{margin-left:auto}#menu{display:block;padding:8px 12px;order:3}nav{display:none;position:absolute;top:78px;left:0;right:0;background:#faf7ee;padding:20px;flex-direction:column;box-shadow:0 20px 30px #0002}nav.open{display:flex}.hero{min-height:580px;background-position:60%;padding:55px 7%}.hero h1{font-size:43px}.hero p{font-size:14px}.quick{margin:0;grid-template-columns:1fr}.quick a{border-right:0;border-bottom:1px solid #d5d9c9;padding:20px 7%}.grid,.columns,.banner{grid-template-columns:1fr}.section h2{font-size:28px}.section-head{display:block}.banner{padding:28px;gap:15px}.page-title{padding:40px 7% 24px}.page-title h1{font-size:32px}.recipe{padding:16px 10px;gap:5px}.recipe span{font-size:12px}.form{padding:24px}footer{grid-template-columns:1fr}.preview span{font-size:10px;margin-left:7px}.map-frame{height:720px}}
.hero{overflow:hidden;background:linear-gradient(90deg,rgba(8,30,24,.98),rgba(8,30,24,.8) 46%,rgba(8,30,24,.24)),url('assets/world.png') center/cover}.hero-copy{position:relative;z-index:1;max-width:570px}.presenter{position:absolute;right:1%;bottom:0;width:49%;max-height:96%;object-fit:contain;filter:drop-shadow(0 20px 25px #0006)}@media(max-width:760px){.hero{padding-bottom:290px;min-height:830px}.presenter{width:340px;max-width:90%;right:0;bottom:-20px;max-height:340px}.hero-copy{max-width:100%}.hero h1{font-size:39px}}
@media(min-width:761px){.hero{min-height:590px}.presenter{bottom:65px;width:51%}}
/* Xiao Mo cartoon brand — artwork supplied by the server owner. */
:root{--ink:#14294f;--gold:#ffbc35;--paper:#f1fbff;--muted:#4b6683}
body{font-family:'Leelawadee UI','Leelawadee',Tahoma,sans-serif;background:linear-gradient(#e9f9ff,#fff9eb);color:var(--ink)}
h1,h2,h3,strong,button,.button{font-family:'Leelawadee UI',Tahoma,sans-serif;font-weight:800!important}
.preview{background:#163660;color:#fff;letter-spacing:1px}.preview span{color:#e3f5ff}
header{height:98px;background:#fff;border-bottom:4px solid #bcecff;gap:26px}.brand{flex-shrink:0}.brand img{display:block;width:185px;height:auto;border-radius:12px}nav{font-weight:700;gap:24px}nav a.active{color:#0877af;border-color:#ff9b27}nav a:hover{color:#0778b6}
.button,button{border:2px solid #172e55;border-radius:15px;background:linear-gradient(#ffd650,#ffa22b);color:#14294f;font-weight:800;box-shadow:0 4px 0 #172e55;padding:14px 25px}.button:hover,button:hover{background:#ffdb68;transform:translateY(-2px)}.button.outline{background:#fff;border:2px solid #1a83be;color:#146490;box-shadow:0 4px 0 #b0dff3}.button.dark{background:#1789c7;color:#fff;border-color:#14527c;box-shadow:0 4px 0 #14527c}
.hero{padding:0;min-height:0!important;background:#fff;color:var(--ink);overflow:hidden}.hero-art{display:block;width:100%;height:auto}.hero-copy{max-width:none;padding:27px 8% 33px;display:flex;align-items:center;justify-content:space-between;gap:25px;background:linear-gradient(100deg,#e5f8ff,#fff7d9);border-bottom:3px solid #c1e6f4}.hero h1{font-size:32px;margin:5px 0;line-height:1.4;color:#153564}.hero p{margin:5px 0 0;color:var(--muted);max-width:none;font-size:15px}.hero .eyebrow{color:#0878aa}.hero .actions{margin:0;flex-shrink:0}.eyebrow{color:#0a7cb5;font-weight:800;letter-spacing:1.8px}
.quick{margin:28px 8% 0;border:2px solid #b3def1;border-radius:20px;background:#fff;box-shadow:0 6px 0 #d6edf6;overflow:hidden}.quick a{border-color:#d4ebf6;padding:24px 20px;gap:15px}.quick a:hover{background:#eaf8ff}.quick i{font:bold 23px 'Leelawadee UI',sans-serif;color:#e6721a;background:#fff0c9;border-radius:12px;padding:8px;font-style:normal}.quick strong{font-size:17px}.quick small{line-height:1.7;display:block}
.section{padding:58px 8%}.section h2{color:#163664;font-size:32px}.card{background:#fff;border:2px solid #b8def0;border-radius:22px;box-shadow:0 7px 0 #d7edf5;padding:29px}.card .num{font-size:32px;color:#1788ba;background:#e3f7ff;padding:5px 13px;border-radius:15px}.card:nth-child(2){border-color:#ffdf97;box-shadow:0 7px 0 #ffefcc}.card:nth-child(3){border-color:#bce5d5;box-shadow:0 7px 0 #dff3e9}.card h3{color:#183965}.card a{color:#0877ac;font-weight:700;border-bottom:2px solid #83d7f5}.tag{background:#e8f8ff;border-color:#a6dff4;color:#126489;font-weight:700}
.banner{background:#e5f7ff;color:var(--ink);border:3px solid #95d7f2;border-radius:26px;box-shadow:0 7px 0 #cce9f5}.banner p{color:var(--muted)}.banner img{border-radius:18px;border:3px solid white}
.page-title{background:linear-gradient(100deg,#e0f6ff 40%,#e0f6ffdd),url('assets/brand-scene.png') right 42%/cover;border-bottom:3px solid #b5e5fa}.page-title h1{color:#173961;font-size:42px;text-shadow:0 2px #fff}.lead{color:var(--muted)}.steps li{color:var(--muted)}.steps li:before{border:2px solid #9ddbf6;background:#e2f6ff;color:#14577f;font-weight:800}.notice{background:#fff4d9;border:1px solid #ffdda1;border-left:5px solid #ffaf2e;border-radius:10px;color:#69502e}.recipe{background:#fff;border:2px solid #cae5f1;border-radius:16px}.recipe strong{color:#126e98;font-weight:800}.recipe small{color:#607187}.form,.download-box{background:#fff;border:2px solid #b7dff1;border-radius:24px;box-shadow:0 7px 0 #d8edf6}.form input:not([type=checkbox]){border:2px solid #bfdbe8;border-radius:11px;color:var(--ink)}.form small{font-size:12px;color:var(--muted)}details{border-color:#b7deef}.map-frame{border:2px solid #a0d9ef;border-radius:18px}.disabled,.disabled:hover{background:#e4ebef;color:#576b79;border-color:#b8c6cf;box-shadow:none;transform:none}
footer{background:#17375d;color:#e0f5ff;border-top:6px solid #49b5ec}footer small{color:#bfdaeb}footer .brand img{width:175px}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #ee751c;outline-offset:5px}
@media(max-width:1100px){header{gap:16px}nav{gap:13px}.hero-copy{padding:25px 6%;flex-wrap:wrap}.hero .actions{margin-top:8px}.quick{margin-left:6%;margin-right:6%}.quick strong{font-size:15px}}
@media(max-width:760px){header{height:82px;padding:0 4%;gap:10px}.brand img{width:135px}header>.button{font-size:12px;padding:9px 10px}#menu{padding:7px 10px}nav{top:78px;background:#fff;border-bottom:3px solid #a5dbf2;padding:18px 7%}.hero-copy{display:block;padding:25px 7% 30px}.hero h1{font-size:29px}.hero .actions{margin-top:20px;gap:12px}.hero .button{padding:12px 17px;font-size:14px}.quick{margin:20px 6% 0}.quick a{padding:18px}.quick a:last-child{border:0}.section{padding:40px 6%}.section h2{font-size:27px}.card{padding:25px}.page-title{padding:35px 7% 24px}.page-title h1{font-size:31px}.banner{padding:25px}.columns{gap:25px}footer div{flex-wrap:wrap}.preview{font-size:9px;letter-spacing:.5px}.preview span{font-size:9px}.recipe strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}