:root{--paper:#f7f8f3;--ink:#222d26;--muted:#657067;--green:#235b45;--green-dark:#183d2f;--lime:#d8ee9c;--line:#dbe0d6;--soft:#eef3e9;--serif:Georgia,"Thonburi",Tahoma,serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Thonburi","Noto Sans Thai",Tahoma,Arial,sans-serif;line-height:1.72}a{color:inherit;text-underline-offset:4px}a:hover{color:var(--green)}:focus-visible{outline:3px solid #b87525;outline-offset:4px}.topbar{height:76px;position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1080px)/2));border-bottom:1px solid var(--line);background:#f7f8f3ec;backdrop-filter:blur(16px)}.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font:bold 19px/1.2 Arial,sans-serif;letter-spacing:-.6px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--green);color:#fff;font:bold 24px/1 Arial,sans-serif}.topbar nav{display:flex;gap:24px;align-items:center}.topbar nav a{font-size:13px;text-decoration:none}.topbar nav a[aria-current="page"]{color:var(--green);font-weight:700}.topbar nav .nav-install{background:#e9eddf;padding:9px 15px;border-radius:8px}.site-hero{padding:90px 24px 70px;background:radial-gradient(circle at 78% 12%,#dcebc8 0,transparent 24%),var(--soft);border-bottom:1px solid var(--line)}.site-hero-inner,.wrap{width:min(940px,calc(100% - 44px));margin:auto}.site-hero-inner{width:min(1080px,calc(100% - 44px))}.eyebrow{display:flex;align-items:center;gap:8px;color:var(--green);font-size:12px;font-weight:700;letter-spacing:.045em}.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}.site-hero h1{max-width:820px;margin:19px 0 17px;font-size:clamp(2.8rem,6.6vw,6.2rem);line-height:1.11;letter-spacing:-.07em}.site-hero h1 em{color:var(--green);font-style:normal}.site-hero p{max-width:665px;margin:0;color:var(--muted);font-size:1.1rem}.hero-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px}.button,.cta{display:inline-flex;align-items:center;gap:34px;padding:13px 19px;border-radius:9px;background:var(--green);color:#fff!important;font-weight:700;text-decoration:none;transition:transform .25s,box-shadow .25s}.button:hover,.cta:hover{transform:translateY(-3px);box-shadow:0 10px 24px #183d2f25}.quiet-link{font-size:13px;text-decoration:none}.section{padding:82px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}.section-heading h2,.section>h2{margin:8px 0 0;font-size:clamp(2rem,4vw,3.5rem);line-height:1.16;letter-spacing:-.055em}.section-heading p,.section>p{max-width:590px;color:var(--muted);font-size:14px}.skill-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.skill{position:relative;min-height:200px;padding:25px;border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}.skill:after{content:"";position:absolute;right:-45px;bottom:-55px;width:150px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#d8ee9c 0,transparent 70%);opacity:0;transition:opacity .25s,transform .45s}.skill:hover{transform:translateY(-5px);box-shadow:0 16px 34px #183d2f10;border-color:#bbcfad}.skill:hover:after{opacity:1;transform:scale(1.3)}.skill>*{position:relative;z-index:1}.skill code,.platform-code{color:var(--green);font-weight:700}.skill h3{font-size:1.35rem;line-height:1.35;margin:14px 0 9px}.skill p{margin:0;color:var(--muted);font-size:.95rem}.callout{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:28px;padding:27px;border-radius:18px;background:var(--green);color:#fff}.callout strong{font-size:1.15rem}.callout p{margin:6px 0 0;color:#d7e5d7;font-size:14px}.callout .cta{background:var(--lime);color:var(--green-dark)!important;white-space:nowrap}.platform{padding:80px 0;border-bottom:1px solid var(--line)}.platform:first-child{padding-top:0}.platform:last-child{border-bottom:0}.platform-label{color:#708168;font:14px Georgia,serif}.platform h2{margin:9px 0 9px;font-size:clamp(2rem,4vw,3.5rem);line-height:1.15;letter-spacing:-.055em}.platform>p{max-width:650px;margin:0;color:var(--muted)}.steps{display:grid;gap:14px;margin-top:28px}.step{position:relative;padding:28px 28px 28px 88px;border:1px solid var(--line);border-radius:17px;background:#fff}.step:before{content:attr(data-step);position:absolute;top:25px;left:26px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;font:bold 12px Arial}.step h3{font-size:1.2rem;margin:0 0 8px}.step p{color:var(--muted);font-size:14px;margin:8px 0}.step strong{color:var(--ink)}pre{position:relative;overflow:auto;margin:18px 0 6px;padding:50px 22px 22px;border-radius:13px;background:#122019;color:#eaf4ea;box-shadow:inset 0 1px #ffffff0d;font:13px/1.8 Menlo,Consolas,monospace}pre code{color:inherit}.copy-btn{position:absolute;right:13px;top:12px;border:1px solid #5f8069;border-radius:7px;background:#1e3c2b;color:#e9f7ea;padding:6px 11px;font:12px Arial;cursor:pointer;transition:background .2s}.copy-btn:hover{background:#2c5b40}.copy-btn.done{background:#496f30;border-color:#9ac16e}.install-note{margin:18px 0 0;padding:18px 21px;border-left:3px solid #91a97d;background:var(--soft);color:var(--muted);font-size:13px}.article-hero{background:radial-gradient(circle at 78% 12%,#dcebc8 0,transparent 24%),var(--soft)!important}.article-hero h1{color:var(--ink)!important}.article-hero .label{color:var(--green)!important}.article{color:var(--ink)}.article h2{color:var(--ink)}.article .flow div{border-top-color:var(--green)!important;background:var(--soft)!important}.article .example{background:var(--green-dark)!important}.article .article-cta{background:var(--green)!important}.article .article-cta .cta{background:var(--lime)!important;color:var(--green-dark)!important}.page-footer,footer{padding:42px max(22px,calc((100vw - 1080px)/2));display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap;border-top:1px solid var(--line);background:#f0f3ec;color:var(--muted);font-size:13px}.page-footer .brand{color:var(--ink)}.page-footer p,footer p{margin:6px 0}.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.75,.3,1)}.reveal.in-view{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}@media(max-width:700px){.topbar{height:64px;padding-inline:18px}.brand{font-size:16px}.brand-mark{width:29px;height:29px;font-size:21px}.topbar nav{gap:13px}.topbar nav a{font-size:11px}.topbar nav a:first-child{display:none}.topbar nav .nav-install{padding:8px 11px}.site-hero{padding:55px 0 50px}.site-hero h1{font-size:clamp(2.5rem,11vw,4.2rem)}.site-hero p{font-size:.97rem}.section{padding:58px 0}.section-heading{display:block}.section-heading>p,.section-heading>.quiet-link{margin-top:17px}.skill-grid{grid-template-columns:1fr}.skill{min-height:0;padding:22px}.callout{display:block;padding:24px}.callout .cta{margin-top:17px}.platform{padding:58px 0}.step{padding:22px 18px 22px 70px}.step:before{top:20px;left:17px;width:32px;height:32px;font-size:10px}.step h3{font-size:1.06rem}pre{margin-left:-52px;padding:48px 17px 18px;font-size:11px}.page-footer,footer{padding:30px 18px;display:block}.page-footer>div+div,footer>div+div{margin-top:18px}}