@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#242523;--muted:#72726c;--accent:#ef633d;--line:#deded5;--paper:#f8f7f2}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.8 'Noto Sans Thai',Tahoma,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}button,a,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.wrap{max-width:1260px;margin:auto;padding-left:42px;padding-right:42px}.announcement{display:flex;align-items:center;justify-content:center;gap:18px;background:var(--ink);color:#fff;padding:9px 20px;font-size:10px;letter-spacing:2px;font-weight:700}.announcement span{font-size:12px;font-weight:400;letter-spacing:0;color:#c7c8bc}.announcement a{font-size:12px;letter-spacing:0;color:#f7ae8e}.nav{max-width:1260px;margin:auto;padding:28px 42px;display:flex;justify-content:space-between;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:11px;font-size:22px;font-weight:800;letter-spacing:-.8px}.brand img{width:37px;height:37px;border-radius:10px}.brand b{font-weight:500}.nav nav{display:flex;gap:30px;font-size:13px;color:var(--muted)}.nav nav a:hover{color:var(--accent)}.button{display:inline-flex;justify-content:center;align-items:center;gap:22px;border:1px solid transparent;border-radius:8px;padding:14px 24px;background:var(--accent);color:white;min-height:54px;font-size:14px;font-weight:700;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px);background:#d94c28}.button.small{min-height:42px;padding:8px 17px;background:var(--ink);font-size:12px}.button.secondary{border-color:#c9c9c0;background:transparent;color:var(--ink)}.button.secondary:hover{background:white}.hero{display:grid;grid-template-columns:1.06fr 1fr;align-items:center;gap:42px;padding-top:50px;padding-bottom:66px}.hero-copy{padding:15px 0}.eyebrow{display:block;color:var(--accent);font-size:12px;font-weight:700}.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--ink);padding:7px 10px;border:1px solid var(--line);border-radius:5px}.hero-badge span{border-left:1px solid #d4d4cd;padding-left:9px;font:10px Arial;color:var(--muted)}.live-dot{width:6px;height:6px;background:var(--accent);border-radius:50%}h1{font-size:clamp(42px,4.6vw,67px);line-height:1.37;letter-spacing:-3px;font-weight:800;margin:25px 0}h1 .gradient{display:block}.gradient{color:var(--accent)}.lead{font-size:15px;line-height:1.95;color:var(--muted);margin:0}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 17px}.meta{font-size:10px;color:var(--muted)}.showcase{position:relative;background:#292c29;border-radius:18px;height:484px;padding:25px;overflow:hidden;box-shadow:0 24px 50px #28282016}.showcase:before{content:'Q';position:absolute;right:-25px;bottom:-65px;font:900 350px Arial;color:#343834}.showcase-title{position:relative;color:#fff;z-index:1}.showcase-title span{font-size:10px;color:#a7afa4;display:block}.showcase-title strong{display:block;font-size:18px;line-height:1.6;margin-top:4px;font-weight:500}.window{position:absolute;overflow:hidden;background:white;border-radius:10px;border:1px solid #e0e4dc;box-shadow:0 16px 36px #0004}.window-bar{display:flex;align-items:center;gap:5px;height:28px;background:#f4f5f2;border-bottom:1px solid #ddd;padding:0 10px;font:9px Arial;color:#888}.window-bar i{background:#cfd1ca;width:5px;height:5px;border-radius:50%}.window-bar i:first-child{background:#ef9378}.window-bar span{margin-left:8px}.capture{top:111px;left:26px;width:250px;transform:rotate(-3deg)}.capture img{display:block;width:100%;height:auto}.calc{top:177px;right:20px;width:228px;height:305px;transform:rotate(4deg)}.calc iframe{width:290px;height:430px;border:0;transform:scale(.78);transform-origin:top left;pointer-events:none}.hero-label{position:absolute;bottom:16px;left:23px;color:#c7cbbf;display:flex;gap:8px;align-items:center;font-size:10px;z-index:2;background:#292c29db;padding:7px 10px;border-radius:6px}.key{font:10px Arial;border:1px solid #74786d;border-bottom-width:3px;border-radius:4px;padding:4px 6px;background:#393d36}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding-top:28px;padding-bottom:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.facts div{padding-left:24px;border-left:2px solid var(--accent)}.facts strong{display:block;font-size:20px;font-weight:700}.facts span{color:var(--muted);font-size:12px}.section{padding-top:92px;padding-bottom:15px}h2{font-size:40px;letter-spacing:-1.5px;line-height:1.5;margin:12px 0 22px;font-weight:700}h3{font-size:22px;line-height:1.55;letter-spacing:-.6px;font-weight:600;margin:10px 0}.section-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.section-top p{color:var(--muted);font-size:13px;padding-bottom:10px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:25px}.card{position:relative;background:#fff;border:1px solid #e4e4dc;border-radius:12px;text-align:left;padding:27px;cursor:pointer;color:var(--ink);transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-5px);box-shadow:0 16px 30px #2828200b;border-color:#e5aa95}.card[data-tool=text]{background:#f26742;border-color:#f26742;color:#fff}.card[data-tool=capture]{background:#eeeee4}.card-icon{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;background:#f5f4ee;border:1px solid #e7e6df;border-radius:11px;font:600 22px Arial;color:var(--ink)}.card[data-tool=text] .card-icon{background:#ffffff20;border-color:#ffffff40;color:#fff}.card-number{position:absolute;right:25px;top:30px;font:11px Arial;color:#b7b7ab}.card[data-tool=text] .card-number{color:#fbcbbb}.tag{display:block;margin-top:32px;font-size:10px;color:var(--accent)}.card[data-tool=text] .tag{color:#ffe0d6}.card h3{margin-top:7px}.card p{min-height:74px;font-size:13px;line-height:1.85;color:var(--muted);margin:12px 0 23px}.card[data-tool=text] p{color:#ffe9e2}.card-link{border-top:1px solid #e5e5db;display:flex;justify-content:space-between;padding-top:17px;font-size:11px;font-weight:600}.card[data-tool=text] .card-link{border-color:#ffffff40}.card-link span{font:20px Arial}.release{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;margin:62px auto 0;background:#eeeade;border-radius:12px;padding:32px 42px;overflow:hidden}.release h2{font-size:28px;letter-spacing:-1px;margin:8px 0}.release p{font-size:13px;color:var(--muted);margin:0}.release .button{background:var(--ink)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:35px}.step-no{display:inline-block;font:500 43px Arial;color:#bebfb0}.steps h3{margin-top:22px;font-size:20px}.steps p{color:var(--muted);font-size:13px;line-height:1.95}code{background:#edece3;color:#9c492c;font:12px Consolas,monospace;padding:3px 5px;border-radius:4px;overflow-wrap:anywhere}.text-button{font-size:12px;color:var(--accent);border:0;background:transparent;padding:0;border-bottom:1px solid #ddad96;cursor:pointer}#copy-status{display:block;font-size:12px;color:var(--muted);margin-top:8px}.install-tip{margin-top:35px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:21px 0;font-size:12px;color:var(--muted)}.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;padding-bottom:70px}.faq>div>p{font-size:13px;color:var(--muted)}.faq-list details{border-bottom:1px solid var(--line);padding:21px 0}.faq-list summary{font-size:14px;font-weight:500;cursor:pointer}.faq-list p{font-size:13px;color:var(--muted);line-height:1.9}.end{position:relative;background:var(--ink);color:#fff;border-radius:16px;text-align:center;padding-top:55px;padding-bottom:55px;overflow:hidden}.end:before,.end:after{content:'+';position:absolute;font:100px Arial;color:#44473e;top:38%;left:6%}.end:after{left:auto;right:6%;transform:rotate(20deg)}.end img{width:43px;height:43px;border-radius:12px}.end h2{font-size:44px;margin:17px 0}.end p{font-size:13px;color:#b3b7aa}.end .button{margin-top:12px}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:32px;padding-bottom:32px;font-size:11px;color:var(--muted)}footer .brand{font-size:17px}footer .brand img{width:28px;height:28px}dialog{max-width:700px;width:calc(100% - 32px);max-height:88vh;overflow:auto;border:1px solid var(--line);border-radius:16px;padding:36px;background:var(--paper);color:var(--ink);box-shadow:0 30px 70px #0003}dialog::backdrop{background:#20231bba;backdrop-filter:blur(8px)}.close{position:absolute;top:8px;right:18px;border:0;background:none;color:var(--muted);font-size:30px;cursor:pointer}.preview-frame{overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff;max-height:390px;margin:22px 0}.preview-frame iframe{display:block;width:100%;height:370px;border:0;pointer-events:none}.preview-frame img{display:block;max-width:100%;margin:auto}.name-example{border:1px solid var(--line);padding:22px;background:#eeeee5;border-radius:10px}.name-example label{display:block;font-size:13px;margin:12px 0;color:var(--muted)}.name-example div{padding:12px;background:white;border:1px solid #ccc;border-radius:8px}.name-example b{display:block;padding:12px;background:#08a261;color:#fff;border-radius:8px}#tool-items{padding-left:22px;font-size:14px;color:var(--muted)}#tool-items li{margin:10px 0}dialog>.button{margin-top:15px}
@media(max-width:1080px){.hero{gap:24px}.capture{width:215px;left:19px;top:115px}.calc{width:195px;right:13px;top:190px}.calc iframe{transform:scale(.66)}.showcase{height:450px}.showcase-title strong{font-size:16px}h1{font-size:53px}.card{padding:22px}.card h3{font-size:20px}.release{margin-left:42px;margin-right:42px}}
@media(max-width:760px){.wrap{padding-left:22px;padding-right:22px}.announcement{padding:8px 12px;font-size:9px;gap:10px}.announcement span{display:none}.nav{padding:22px;flex-wrap:wrap;gap:15px}.nav nav{order:3;width:100%;justify-content:center;gap:24px;font-size:12px}.brand{font-size:19px}.brand img{width:32px;height:32px}.hero{display:block;padding-top:25px;padding-bottom:35px}.hero-copy{text-align:center;padding-bottom:28px}h1{font-size:48px;letter-spacing:-2px;line-height:1.35;margin:24px 0}.lead{font-size:14px}.desktop{display:none}.actions{justify-content:center;margin-top:24px}.actions .button{font-size:12px;padding:13px 17px;gap:12px}.meta{font-size:10px}.showcase{max-width:440px;margin:auto;height:420px;padding:22px}.showcase-title strong{font-size:16px}.capture{width:57%;max-width:225px;left:20px;top:100px}.calc{width:47%;max-width:202px;right:16px;top:159px;height:260px}.calc iframe{transform:scale(.65)}.facts{gap:12px;padding-top:22px;padding-bottom:22px}.facts div{padding-left:10px}.facts strong{font-size:15px}.facts span{font-size:10px;display:block;line-height:1.65}.section{padding-top:58px}h2{font-size:30px;letter-spacing:-1px}.section-top{display:block}.section-top p{padding:0;font-size:12px}.cards{grid-template-columns:1fr;gap:13px}.card{padding:25px}.card h3{font-size:23px}.card p{min-height:0;font-size:14px}.tag{margin-top:21px}.card-number{right:25px}.release{margin:40px 22px 0;padding:25px;display:block}.release h2{font-size:25px}.release p{font-size:12px}.release .button{margin-top:22px}.steps{grid-template-columns:1fr;gap:20px}.steps article{padding-bottom:20px;border-bottom:1px solid var(--line)}.step-no{font-size:32px}.steps h3{margin-top:13px}.steps p{font-size:14px}.faq{grid-template-columns:1fr;gap:10px;padding-bottom:45px}.end{margin:0 22px;padding:37px 22px}.end h2{font-size:34px}.end:before,.end:after{display:none}footer{flex-wrap:wrap;font-size:10px;gap:10px}footer p{margin:0}dialog{padding:30px 23px}dialog h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Landing page interactions, scoped so membership pages keep their layout. */
.landing{background:#f7f8f2}.landing .hero{position:relative;padding-top:70px;padding-bottom:85px}.landing .hero:before{content:'';position:absolute;width:420px;height:420px;top:10px;right:40px;background:radial-gradient(circle,#dcebc980,transparent 70%);z-index:-1;pointer-events:none}.landing .hero h1{letter-spacing:-2.5px}.landing .hero-badge{border-radius:40px;background:#eef3e5;border-color:#d6e2c8}.landing .showcase{background:linear-gradient(150deg,#203c31,#112c24);border-radius:32px;box-shadow:0 24px 65px #142e231c}.landing .showcase-title span{color:#a5cbb1}.landing .showcase-title strong{color:#f7ffed}.landing .hero-label{background:#f8fbed;color:#233d2e;border:1px solid #d5e2cb;box-shadow:0 12px 30px #182a1720}.landing .facts{border-radius:18px;background:#fff;border:1px solid #e1e6d7;box-shadow:0 12px 40px #27322405}.landing .card{transition:transform .2s,box-shadow .2s,border-color .2s}.landing .card:hover{transform:translateY(-6px);border-color:#b4c6a6;box-shadow:0 14px 34px #283c1810}.landing .card .card-link span{display:inline-block;transition:transform .2s}.landing .card:hover .card-link span{transform:translate(3px,-3px)}.landing .button{transition:transform .2s,box-shadow .2s,background .2s}.landing .button:hover{box-shadow:0 9px 25px #ef633d25}.landing .button:active{transform:translateY(0) scale(.98)}
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1000;pointer-events:none}.reading-progress span{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}.back-to-top{position:fixed;bottom:24px;right:24px;width:46px;height:46px;border:1px solid #d3dfc9;border-radius:15px;z-index:50;background:#203c31;color:white;font-size:23px;cursor:pointer;box-shadow:0 7px 22px #152d2520}.back-to-top[hidden]{display:none}
.demo-section{padding-top:105px}.demo-shell{display:grid;grid-template-columns:300px 1fr;border:1px solid #dce4d3;border-radius:24px;overflow:hidden;box-shadow:0 20px 65px #283b1510;background:white}.demo-sidebar{padding:35px 26px;background:#203c31;color:#f7fbee}.demo-sidebar h3{font-size:20px;margin:12px 0 25px}.demo-kicker{font:10px Arial,sans-serif;letter-spacing:2px;color:#b8d9bc}.demo-sidebar>small{display:block;margin-top:30px;font-size:12px;line-height:1.8;color:#b4ccb8}.demo-tabs{display:grid;gap:10px}.demo-tabs button{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;text-align:left;border:1px solid #ffffff16;background:#ffffff05;color:#b9cfbc;border-radius:12px;padding:12px 14px;font-size:11px;cursor:pointer;transition:background .2s,color .2s}.demo-tabs button span{font-size:14px;font-weight:500;flex:1}.demo-tabs button b{font-size:16px;font-weight:400}.demo-tabs button[aria-selected=true]{background:#e6f3d6;color:#18362b;border-color:#e6f3d6}.demo-tabs button:hover{border-color:#b6d5b977}
.demo-workspace{padding:0 35px 32px;min-height:440px}.demo-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:21px 0;border-bottom:1px solid #e9ece2;color:#7b8573;font-size:11px}.demo-topbar>span:first-child{display:flex;gap:5px}.demo-topbar i{width:7px;height:7px;border-radius:50%;background:#c8d2bf}.demo-topbar i:first-child{background:#f19678}.demo-topbar b{font:9px Arial;letter-spacing:1.5px;color:#587747}.demo-workspace section{padding-top:25px}.demo-workspace section[hidden]{display:none}.demo-label{font-size:11px;color:#73905d}.demo-workspace h3{font-size:23px;line-height:1.5;margin:8px 0 10px}.demo-workspace p{font-size:13px;color:#6b7662;margin:8px 0 18px}.demo-workspace label{display:block;font-size:12px;color:#65705c}.demo-workspace input,.demo-workspace textarea{display:block;width:100%;border:1px solid #dce2d3;border-radius:12px;padding:13px 16px;background:#fafcf7;color:#203529;font:15px/1.7 'Noto Sans Thai',Tahoma,sans-serif;margin-top:8px}.demo-workspace textarea{resize:vertical;min-height:112px;max-height:230px}.demo-workspace input:focus,.demo-workspace textarea:focus{outline:2px solid #a5bf8966;border-color:#a5bf89}.demo-workspace kbd{font:13px 'Noto Sans Thai',Tahoma,sans-serif;background:#edf4e5;color:#32542a;border:1px solid #dce8ce;padding:2px 8px;border-radius:5px}.demo-shortcuts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.demo-shortcuts button{border:1px solid #dce3d3;border-radius:8px;background:white;color:#33562a;padding:7px 12px;font-size:12px;cursor:pointer;min-height:38px}.demo-shortcuts button span{color:#79846e;margin-left:6px}.demo-workspace .demo-status{min-height:24px;color:#4c7d3d;font-size:12px;margin:9px 0 0}.demo-number-grid{display:grid;grid-template-columns:1fr 20px 1fr;gap:15px;align-items:end;margin-top:22px}.demo-number-grid>span{padding-bottom:13px;color:#7c9764;text-align:center}.demo-name-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}.demo-result{padding:20px 24px;margin-top:24px;background:#eef5e5;border:1px solid #d9e7ca;border-radius:16px}.demo-result span{font-size:12px;color:#789063}.demo-result output{display:block;font-size:32px;font-weight:700;color:#254b30;line-height:1.5;overflow-wrap:anywhere}
.landing .motion-reveal{transition:opacity .6s,transform .6s}.landing.motion-ready .motion-reveal:not(.revealed){opacity:0;transform:translateY(20px)}.landing .motion-reveal.revealed{opacity:1;transform:none}.landing .faq-list details[open]{background:white;border-radius:10px;padding-left:14px;padding-right:14px}.landing dialog[open]{animation:dialog-enter .2s ease-out}@keyframes dialog-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:850px){.demo-shell{grid-template-columns:1fr}.demo-sidebar{padding:23px}.demo-sidebar h3{margin-bottom:15px}.demo-tabs{grid-template-columns:repeat(3,1fr);gap:7px}.demo-tabs button{display:block;text-align:center;padding:10px 7px;min-height:66px}.demo-tabs button span{display:block;font-size:12px}.demo-tabs button b{display:none}.demo-sidebar>small{margin-top:14px}.demo-sidebar>small br{display:none}.demo-workspace{padding:0 24px 26px;min-height:390px}.landing .hero{padding-top:30px}.landing .hero h1{letter-spacing:-1.5px}}
@media(max-width:520px){.demo-section{padding-top:65px}.demo-shell{border-radius:18px}.demo-workspace{padding:0 18px 23px}.demo-workspace h3{font-size:20px}.demo-number-grid{gap:8px;grid-template-columns:1fr 15px 1fr}.demo-name-grid{grid-template-columns:1fr;gap:12px}.demo-workspace input{padding:10px 12px}.demo-topbar b{display:none}.demo-result output{font-size:28px}.back-to-top{right:15px;bottom:15px}.landing .hero:before{width:220px;height:220px;right:0}.landing .nav nav{flex-wrap:wrap;justify-content:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.landing *, .landing *:before,.landing *:after{animation:none!important;transition:none!important}.landing.motion-ready .motion-reveal:not(.revealed){opacity:1;transform:none}}