:root{--primary:#a7440b;--primary-contrast:#fff;--accent:#b9430c;--surface:#fffdf7;--surface-2:#edf2f2;--text:#263b48;--heading:#18262a;--muted:#536570;--border:#a8b9c1;--font-head:'Plus Jakarta Sans',sans-serif;--font-body:'Plus Jakarta Sans',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:#e8e6e0;color:var(--text);font:400 16px/1.85 var(--font-body)}a{color:var(--primary);text-underline-offset:4px}button{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}p{margin:0 0 1em}h1,h2,h3{color:var(--heading);font-family:var(--font-head);line-height:1.35}h1{font-size:clamp(30px,4vw,57px);margin:18px 0;max-width:18ch}h2{font-size:clamp(24px,2.5vw,33px);margin:0 0 24px}h3{font-size:21px}main,.mast,footer{max-width:1280px;margin:auto;padding:0 32px}.skip{position:absolute;left:16px;top:-80px;padding:14px;background:#fff;z-index:20}.skip:focus{top:8px}.mast{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding-top:22px;padding-bottom:22px;border-bottom:2px solid var(--heading)}.brand{font-weight:800;font-size:24px;display:flex;gap:12px;align-items:center;min-height:44px;text-decoration:none}.brandmark{width:26px;height:26px;border:3px solid var(--primary);position:relative}.brandmark:after{content:'';position:absolute;inset:5px;border:2px solid var(--accent)}.mast-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.lang,.demo-link,.menu{display:inline-flex;justify-content:center;align-items:center;min-width:44px;min-height:44px;padding:10px 14px;border:1px solid var(--border);background:var(--surface);text-decoration:none;font-weight:700;color:var(--primary)}.lang.active,.demo-link{background:var(--primary);color:#fff}.menu{display:none}#site-nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}#site-nav a{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;text-decoration:none;font-size:14px}#site-nav span{font-size:12px;color:var(--muted)}#site-nav [aria-current]{text-decoration:underline}.page-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:42px;padding:56px 0}.head-copy{min-width:0}.badge{display:inline-block;border-bottom:4px solid var(--accent);font-weight:700}.lead{font-size:19px}.intro{font-size:16px}.head-art{align-self:start;aspect-ratio:1;background:linear-gradient(90deg,transparent 95%,#b9c9cd 95%) 0 0/32px 32px,linear-gradient(transparent 95%,#b9c9cd 95%) 0 0/32px 32px,var(--surface);border:2px solid var(--heading);position:relative;box-shadow:12px 12px 0 #dae4e5}.art-one{position:absolute;inset:15%;border:2px dashed var(--primary)}.art-two{position:absolute;top:21%;left:25%;width:37%;height:60%;border:3px solid var(--accent);transform:skewY(-17deg)}.art-three{position:absolute;top:45%;left:12%;width:75%;height:2px;background:var(--primary)}.art-four{position:absolute;top:12%;left:46%;width:2px;height:76%;background:var(--primary)}.play-bench{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:28px;background:var(--surface);border:2px solid var(--heading);padding:30px;margin-bottom:60px}.bench-label{min-width:0}.bench-label h2{padding-bottom:18px;border-bottom:4px solid var(--accent)}.chips{display:flex;flex-wrap:wrap;gap:8px;font-size:13px}.chips span{border:1px solid var(--border);padding:6px 9px}.game-box{min-width:0;border:1px solid var(--border)}.reading{display:grid;grid-template-columns:240px minmax(0,1fr);gap:52px}.index{align-self:start;position:sticky;top:24px;border-top:3px solid var(--primary)}.index-title{font-size:15px;font-weight:800;padding:14px 0}.index nav{display:flex;flex-direction:column}.index a{display:flex;gap:12px;min-height:44px;padding:10px 0;border-top:1px solid var(--border);font-size:14px;text-decoration:none}.index span{color:var(--muted)}article{min-width:0}.chapter{padding:0 0 34px;margin:0 0 40px;border-bottom:1px solid var(--border)}.chapter ul,.chapter ol{padding-left:25px}.faq{margin-bottom:40px}.faq details{border-top:1px solid var(--border)}.faq summary{min-height:44px;padding:18px 0;cursor:pointer;font-weight:700}.faq details>div{padding-bottom:20px}.table-wrap{max-width:100%;overflow-x:auto;margin-bottom:22px}table{border-collapse:collapse;min-width:100%;font-size:14px}th,td{text-align:left;padding:12px;border:1px solid var(--border)}.cta{display:flex;justify-content:space-between;gap:20px;align-items:center;border-top:3px solid var(--accent);padding:30px 0;margin-top:24px}.cta p{max-width:70ch;margin:0}.related{padding:40px 0}.related>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.related a{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--border);background:var(--surface);padding:20px;min-height:44px}.related strong{font-size:18px;margin-bottom:12px}.related span{font-size:14px;color:var(--muted)}footer{padding-top:40px;padding-bottom:30px;border-top:2px solid var(--heading)}.foot-brand{font-size:26px;font-weight:800;margin-bottom:20px}.foot-nav{display:flex;gap:12px 22px;flex-wrap:wrap;margin-bottom:24px}.foot-nav a{min-height:44px;display:flex;align-items:center;font-size:14px}footer p{font-size:14px;max-width:100ch}.breadcrumbs{display:flex;flex-wrap:wrap;gap:12px;padding-top:24px;font-size:14px}.breadcrumbs a,.breadcrumbs span{min-height:44px;display:flex;align-items:center}.breadcrumbs a:after{content:'/';padding-left:12px;color:var(--muted)}.page-inner .page-head{padding-top:26px}.page-inner .head-art{max-width:300px;justify-self:end;width:100%}
@media(max-width:980px){.mast{grid-template-columns:1fr}.mast-tools{justify-content:flex-start}.menu{display:inline-flex;margin-left:auto}#site-nav{display:none}body.nav-open #site-nav{display:flex}.page-head{gap:26px;padding-top:36px}.play-bench{grid-template-columns:1fr}.reading{grid-template-columns:190px minmax(0,1fr);gap:24px}.related>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){main,.mast,footer{padding-left:14px;padding-right:14px}.mast{gap:12px}.brand{font-size:22px}.mast-tools .demo-link{font-size:13px;padding:8px}.page-head{grid-template-columns:minmax(0,1fr);gap:18px;padding:30px 0}.head-art{max-width:320px;width:100%;justify-self:center;box-shadow:6px 6px 0 #dae4e5}.lead{font-size:17px}h1{font-size:32px;max-width:none}.play-bench{padding:12px;gap:16px;margin-bottom:36px}.chips{font-size:12px}.reading{grid-template-columns:minmax(0,1fr);gap:30px}.index{position:static}.index nav{display:grid;grid-template-columns:minmax(0,1fr)}.chapter{padding-bottom:20px;margin-bottom:28px}.related>div{grid-template-columns:minmax(0,1fr)}.cta{display:block}.cta .demo-link{margin-top:16px}.page-inner .head-art{justify-self:center;max-width:220px}.foot-nav{gap:6px 18px}#game-root{padding:10px}#game-root .g-main{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.mast{margin-top:20px;border-radius:22px;background:#18262a;border:0;padding-top:20px;padding-bottom:20px}.brand,.mast #site-nav a,.mast #site-nav span{color:#fff}.brandmark{border:3px solid #e98025;border-radius:6px}.brandmark:after{border-color:#e98025}.lang,.menu{border-color:#789098}.lang.active,.demo-link{background:#a7440b}.page-head{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;padding:40px 0}.head-copy{border-left:8px solid #a7440b;padding-left:22px}.head-art{aspect-ratio:16/11;border:16px solid #18262a;border-radius:24px;background:radial-gradient(ellipse at 35% 50%,#ffd358 0 8%,#ed7722 16%,#92222e 28%,#272c50 46%,#1a3348 75%);box-shadow:0 16px 0 #798489}.art-one{inset:16%;border:2px solid #fce1b0}.art-two{inset:24%;width:auto;height:auto;transform:none;border:1px dashed #ffe3b3}.art-three{width:20%;height:35%;left:78%;top:32%;background:linear-gradient(#ffd358,#ed7722,#92222e,#1a3348);border:2px solid #18262a}.art-four{width:20px;height:20px;background:#ffe6b4;left:48%;top:48%;border:0;border-radius:50%}.play-bench{display:grid;grid-template-columns:210px minmax(0,1fr);border:0;border-radius:20px;padding:24px;background:#18262a;color:#e9eeeb}.bench-label h2{color:#fff;border-color:#e98025}.chips span{border-color:#789098}.game-box{border:0;border-radius:16px;overflow:hidden}.reading{grid-template-columns:minmax(0,1fr) 220px;gap:38px}.index{grid-column:2;grid-row:1;border-color:#a7440b}article{grid-column:1;grid-row:1}.chapter{background:#fffdf7;border:0;border-radius:16px;padding:28px;margin-bottom:20px}.related a{border:0;border-left:6px solid #a7440b;border-radius:14px}.related>div{grid-template-columns:repeat(2,minmax(0,1fr))}.cta{border-top:0;background:#e0d3c6;padding:24px;border-radius:14px}@media(max-width:980px){.mast{border-radius:0;margin-top:0}.page-head{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px}.play-bench{grid-template-columns:minmax(0,1fr)}.reading{grid-template-columns:minmax(0,1fr) 180px;gap:20px}}@media(max-width:600px){.page-head{grid-template-columns:minmax(0,1fr);gap:24px}.head-copy{padding-left:14px;border-left-width:5px}.head-art{border-width:10px;max-width:100%;width:100%}.play-bench{padding:12px}.reading{grid-template-columns:minmax(0,1fr)}.index{grid-column:1;grid-row:auto}article{grid-column:1;grid-row:auto}.chapter{padding:18px}.related>div{grid-template-columns:minmax(0,1fr)}}
:root{--primary:#245bba;--accent:#a54c16;--heading:#283b50;--text:#4b5057;--border:#b5a78e;--surface:#fff7e5;--surface-2:#e8dcc5;--font-body:'Plus Jakarta Sans',sans-serif;--font-head:'Plus Jakarta Sans',sans-serif}body{background:#e8dcc5}.mast{border-bottom:8px solid #d77726}.page-head{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.head-art{background:linear-gradient(0deg,#245bba 0 25%,transparent 25%),linear-gradient(90deg,#d77726 0 50%,#fff7e5 50%);clip-path:polygon(0 25%,25% 25%,25% 0,75% 0,75% 25%,100% 25%,100% 100%,0 100%);border:0;box-shadow:none}.art-one,.art-two,.art-three,.art-four{display:none}.chapter{border:0;border-bottom:8px solid #d77726;background:#fff7e5;padding:28px}.chapter:nth-child(3n){margin-left:30px;border-color:#245bba}.chapter h2{line-height:1.4}.index{border:0;border-top:8px solid #245bba}.related a{border:0;background:#fff7e5;border-bottom:6px solid #245bba}.chapter p,.intro p{overflow-wrap:anywhere}@media(max-width:600px){.page-head{grid-template-columns:minmax(0,1fr)}.chapter:nth-child(3n){margin-left:0}.chapter{padding:18px}.play-bench{padding:12px}}
.lead,.head-copy,.chapter,.intro{min-width:0;overflow-wrap:anywhere}

:root{--primary:#275b7b;--accent:#a83c33;--heading:#203744;--text:#495963;--border:#a7b6bd;--surface:#f6fbff;--surface-2:#d9e5eb;--font-body:'IBM Plex Sans Thai',sans-serif;--font-head:'IBM Plex Sans Thai',sans-serif}body{background:#d9e5eb}.mast{border-color:#ae4a40;background:#203744}.page-head{grid-template-columns:1fr}.head-copy{display:block;border:0;padding:0;max-width:1050px}.head-art{height:160px;aspect-ratio:auto;clip-path:none;background:repeating-linear-gradient(90deg,transparent 0 54px,#203744 54px 64px),linear-gradient(0deg,transparent 0 32%,#78abc6 32% 45%,transparent 45% 65%,#ae4a40 65% 72%,transparent 72%);border:0;border-radius:0}.reading{grid-template-columns:1fr}.index{display:block;grid-column:1;grid-row:auto;background:#f6fbff;border-top:6px solid #275b7b}.index nav{display:flex;flex-wrap:wrap;gap:12px}article{grid-column:1;grid-row:auto}.chapter,.chapter:nth-child(3n){margin-left:0;border:0;border-left:7px solid #ae4a40;background:#f6fbff;padding:26px}.chapter h2{line-height:1.7}.play-bench{background:#f6fbff;border:0;border-top:7px solid #275b7b}.lead,.head-copy,.chapter,.intro{min-width:0;overflow-wrap:anywhere}@media(max-width:600px){.head-art{height:105px}.chapter{padding:18px}}

.play-bench .bench-label,.play-bench .bench-label h2{color:#203744}