@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;450;500;600;700&display=swap');
:root{--ink:#183d32;--green:#13503b;--soft:#edf1e8;--paper:#f7f7ef;--line:#dce2d7;--muted:#727d74;--orange:#f3a56f;font-family:'IBM Plex Sans Thai','Segoe UI',Tahoma,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:28px}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}img{max-width:100%}button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #d58a51;outline-offset:5px}[hidden]{display:none!important}.wrap{width:min(1200px,calc(100% - 96px));margin-inline:auto}.skip-link{position:fixed;left:20px;top:-90px;z-index:99;background:var(--green);color:white;padding:14px}.skip-link:focus{top:12px}.reading-progress{height:3px;position:fixed;inset:0 0 auto;z-index:99}.reading-progress span{display:block;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:28px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;font-size:22px;font-weight:700;letter-spacing:-.8px}.brand img{border-radius:12px;display:block}.brand b{color:#27815c}.brand small{display:block;font-size:8px;letter-spacing:2px;font-weight:500;margin-top:1px}.nav nav{display:flex;gap:30px;font-size:13px;font-weight:500}.nav nav a:hover,.text-link:hover{color:#a45529}.button{display:inline-flex;align-items:center;justify-content:center;gap:30px;min-height:52px;padding:14px 24px;background:var(--green);border:1px solid var(--green);border-radius:10px;color:#fff;font-size:14px;font-weight:600;transition:transform .2s,background .2s;white-space:nowrap}.button:hover{background:#0b3a2a;transform:translateY(-2px)}.button.small{min-height:42px;padding:10px 17px;font-size:12px;gap:24px}.button.secondary{background:transparent;color:var(--ink);border-color:#bac9bb}.button.secondary:hover{background:#e9efe4}.hero{padding:70px 0 84px;display:grid;grid-template-columns:.9fr 1.1fr;gap:38px;align-items:center}.eyebrow{font:600 10px/1.5 'Segoe UI',sans-serif;letter-spacing:2px;display:flex;align-items:center;gap:9px;margin-bottom:20px}.status-dot{width:6px;height:6px;background:#71b58b;border-radius:50%;display:inline-block;flex-shrink:0;box-shadow:0 0 0 4px #70b58a12}h1{font-size:clamp(46px,5.3vw,76px);line-height:1.19;letter-spacing:-3px;font-weight:600;margin:0 0 25px}h1 span{color:#39875f}h2{font-size:clamp(30px,3.5vw,46px);line-height:1.35;letter-spacing:-1.5px;margin:0;font-weight:600}h2 em{font-style:normal;color:#488362}p{line-height:1.85}.lead{font-size:16px;line-height:1.9;color:#6f7b71;margin:0 0 28px}.actions{display:flex;align-items:center;gap:24px}.text-link{display:inline-flex;align-items:center;gap:14px;font-size:12px;font-weight:600}.hero-note{font-size:10px;color:#7d887e;margin-top:16px}.hero-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:29px}.hero-tags span{font-size:10px;color:#708371;border:1px solid #d9e2d4;border-radius:30px;padding:6px 11px}.workbench{position:relative;background:#e9eee2;border:1px solid #d4dece;border-radius:20px;margin:0 0 44px;padding-bottom:81px;box-shadow:0 30px 60px -40px #1a3b3166}.workbench-top{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border-bottom:1px solid #d7dfd1}.workbench-top>span:first-child{display:flex;gap:4px}.workbench-top i{width:6px;height:6px;display:block;border-radius:50%;background:#c0cdb9}.workbench-top i:first-child{background:#dcad80}.workbench-top b{font:600 7px 'Segoe UI',sans-serif;letter-spacing:1.6px}.preview-tag{font-size:8px;color:#7c8a72}.workbench-content{display:flex;padding:18px;gap:15px}.mock-sidebar{display:flex;flex-direction:column;align-items:center;gap:19px;padding-top:5px;width:35px;flex-shrink:0}.mock-sidebar img{border-radius:10px}.mock-sidebar>span{font:600 12px 'Segoe UI',sans-serif;color:#788974;display:grid;place-items:center;width:31px;height:31px}.mock-sidebar>span.active{background:#fff;border-radius:9px;color:#2f6544;box-shadow:0 2px 5px #26473210}.mock-chat{background:#fff;border:1px solid #e0e6dc;border-radius:12px;flex:1;min-width:0;padding:16px}.mock-chat-head{display:flex;align-items:center;gap:9px;padding-bottom:15px;border-bottom:1px solid #edf0e9}.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#eee4ce;font-size:13px;color:#998257}.mock-chat-head b{font-size:11px}.mock-chat-head small{display:block;font-size:8px;color:#9aa396}.chat-menu{margin-left:auto;font-size:9px;letter-spacing:2px;color:#adbaaa}.chat-message{background:#eff1eb;width:fit-content;padding:10px 13px;font-size:10px;border-radius:0 9px 9px 9px;margin:24px 0 14px}.chat-reply{width:fit-content;margin-left:auto;background:#e3efda;padding:12px 14px;border-radius:10px 0 10px 10px;font-size:10px;line-height:1.9}.chat-reply small{display:block;font-size:7px;color:#76906a;margin-top:9px}.composer{display:flex;align-items:center;gap:8px;margin-top:22px;padding:10px 8px;border:1px solid #dce7d6;border-radius:7px;font-size:8px;color:#82917b;white-space:nowrap}.command{background:#eaf0e5;color:#406843;border-radius:4px;padding:4px}.composer b{margin-left:auto;background:var(--green);color:white;border-radius:4px;padding:4px 6px}.composer-arrow{color:#a1ad9a}.name-mini{display:flex;align-items:center;gap:8px;font-size:8px;margin-top:13px}.name-mini>span:first-child{color:#8e9b85}.name-mini b{font-weight:500}.mini-check{margin-left:auto;color:#599465}.floating-calc{position:absolute;right:-20px;top:165px;width:172px;background:#fff;border:1px solid #e3e8db;border-radius:12px;box-shadow:0 15px 35px #22492c19;transform:rotate(5deg);padding:12px}.mini-title{display:flex;justify-content:space-between;font-size:8px;color:#789172}.calc-expression{font:11px 'Segoe UI',sans-serif;color:#9aa991;text-align:right;margin-top:20px}.floating-calc strong{display:block;text-align:right;font:500 30px/1.9 'Segoe UI',sans-serif;letter-spacing:-1px}.floating-calc strong span{font-size:8px;letter-spacing:0;margin-left:4px;color:#8a9981}.calc-copy{display:flex;justify-content:space-between;font-size:8px;background:#edf2e8;border-radius:5px;padding:8px}.floating-capture{position:absolute;bottom:-25px;left:37px;display:flex;align-items:center;gap:12px;background:#fff;padding:15px 17px;border-radius:13px;border:1px solid #e4e9de;box-shadow:0 15px 25px #203d2412;transform:rotate(-4deg);width:245px}.capture-icon{font-size:21px;color:#ca8658;background:#fbefdf;padding:5px 9px;border-radius:9px}.floating-capture b{font-size:11px}.floating-capture small{font-size:8px;display:block;color:#93a08b;margin-top:3px}.capture-check{margin-left:auto;background:#ebf3e5;color:#3b7d47;border-radius:50%;padding:3px 6px;font-size:9px}.bench-caption{position:absolute;bottom:20px;left:70px;display:flex;align-items:center;gap:8px;font-size:8px;color:#859479}.bench-caption .status-dot{width:4px;height:4px}.feature-strip{background:#e9eee1;border-block:1px solid #dfe5d5}.strip-inner{display:flex;justify-content:space-between;align-items:center;padding-block:20px;font-size:13px;font-weight:500;color:#5d7458}.strip-inner i{font-style:normal;color:#a2b08e;font-size:17px}.section{padding-block:88px}.section-top{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:34px}.section-top p{font-size:12px;color:var(--muted);margin:0;max-width:340px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{position:relative;display:flex;flex-direction:column;align-items:stretch;min-height:320px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:24px;text-align:left;color:var(--ink);transition:border-color .2s,transform .2s,box-shadow .2s}.card:hover{transform:translateY(-4px);border-color:#94af8a;box-shadow:0 15px 28px #234d3110}.card.featured{background:#ebf0e3}.card-top{display:flex;align-items:center;gap:10px}.card-icon{font:600 20px 'Segoe UI',sans-serif;letter-spacing:-1px}.card-icon.numbers{font-size:16px}.card-number{font:500 8px 'Segoe UI',sans-serif;letter-spacing:1px;color:#8c9884}.arrow{margin-left:auto;font-size:19px;color:#87977c}.card h3{font-size:19px;font-weight:600;margin:23px 0 8px;letter-spacing:-.4px}.card p{font-size:11px;color:#7d8876;margin:0;line-height:1.8}.card-link{font-size:9px;color:#94a087;margin-top:auto;padding-top:19px}.snippet-visual,.calc-visual,.name-visual,.win-visual,.keys-visual{margin-block:23px 9px;min-height:46px;display:flex;align-items:center;gap:8px}.snippet-visual{font-size:8px}.snippet-visual span:first-child{padding:8px;background:white;border-radius:5px;color:#44764b}.snippet-visual span:last-child{background:#dfe9d3;padding:8px;border-radius:5px}.snippet-visual b{font-size:12px;color:#829a76}.calc-visual{justify-content:space-between;background:#f6f7f2;padding:12px;border-radius:6px}.calc-visual span{font:12px 'Segoe UI',sans-serif;color:#96a08d}.calc-visual strong{font:500 27px 'Segoe UI',sans-serif;letter-spacing:-1px}.capture-visual{position:relative;margin:20px 0 9px;border:1px dashed #a4b993;padding:11px;border-radius:7px;min-height:62px;color:#97a88b;font-size:7px}.capture-visual div{width:67%;height:3px;background:#e3e9dd;margin-top:7px;border-radius:3px}.capture-visual div:nth-child(3){width:45%}.capture-visual b{position:absolute;right:9px;bottom:9px;background:#edf3e6;border-radius:4px;padding:5px;font-size:8px;color:#5b8050;font-weight:500}.name-visual{display:block}.name-visual>span{font-size:8px;color:#9aa68e}.name-visual b{display:block;font-size:11px;font-weight:500;border:1px solid #e6ebdf;border-radius:5px;margin-top:7px;padding:10px}.name-visual i{float:right;font-style:normal;color:#6e995b}.win-visual{gap:5px;flex-wrap:wrap}.win-visual span{font:500 17px 'Segoe UI',sans-serif;background:#eef3e6;padding:8px;border-radius:5px}.keys-visual kbd{font:13px 'Segoe UI',sans-serif;background:#fff;border:1px solid #dce3d4;box-shadow:0 3px 0 #dce3d4;padding:9px 11px;border-radius:6px;color:#70816b}.keys-visual>span{font-size:10px;color:#9ca58e}.settings-card{background:#f0f0e6}.workflow-section{background:#123e32;color:#f4f5e9}.workflow{display:grid;grid-template-columns:1fr 1fr;gap:95px;padding-block:70px}.workflow .eyebrow{color:#93b295}.workflow h2 em{color:#b4cfa3;display:block}.workflow p{font-size:13px;color:#9bb39e}.workflow .text-link{color:#d0e0c0;margin-top:14px}.flow-list>div{display:flex;gap:20px;align-items:center;border-bottom:1px solid #ffffff15;padding:20px 0}.flow-list>div:first-child{padding-top:7px}.flow-list>div>span{font:10px 'Segoe UI',sans-serif;color:#6b9a7c}.flow-list h3{font-size:17px;font-weight:500;margin:0}.flow-list p{font-size:11px;margin:3px 0 0}.flow-list>div>b{font:500 24px 'Segoe UI',sans-serif;color:#a4c292;margin-left:auto}.demo-shell{display:grid;grid-template-columns:285px 1fr;border:1px solid var(--line);background:white;border-radius:18px;overflow:hidden}.demo-sidebar{padding:28px;background:#eaf0e3}.demo-kicker{font:600 8px 'Segoe UI',sans-serif;letter-spacing:1px;color:#7e9473}.demo-sidebar h3{font-size:18px;margin:18px 0}.demo-tabs{display:flex;flex-direction:column;gap:8px}.demo-tabs button{display:flex;align-items:center;gap:12px;background:transparent;border:1px solid transparent;border-radius:8px;padding:14px 12px;text-align:left;color:#7c8d74;font-size:10px}.demo-tabs button span{font-size:12px}.demo-tabs button b{margin-left:auto;font-weight:400}.demo-tabs button[aria-selected=true]{background:#fff;color:var(--green);border-color:#d6e0cd}.demo-sidebar>small{display:block;font-size:10px;line-height:1.8;color:#97a08e;margin-top:30px}.demo-topbar{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#a0ac96;border-bottom:1px solid #edf0e7;padding:16px 26px}.demo-topbar>span:first-child{display:flex;gap:5px}.demo-topbar i{width:6px;height:6px;background:#dce4d3;border-radius:50%}.demo-topbar b{font:500 7px 'Segoe UI',sans-serif;letter-spacing:1px;color:#82966f}.demo-workspace section{padding:28px 34px}.demo-label{font-size:9px;color:#8ea17e}.demo-workspace h3{font-size:21px;font-weight:500;margin:10px 0}.demo-workspace p{font-size:11px;color:#91a086}.demo-workspace label{display:block;font-size:11px;color:#738866;margin-bottom:8px}.demo-workspace textarea,.demo-workspace input{width:100%;border:1px solid #dce5d4;background:#fafbf7;border-radius:8px;padding:13px;color:var(--ink);font-size:13px}.demo-workspace textarea{display:block;resize:vertical;min-height:100px}.demo-shortcuts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.demo-shortcuts button{background:#eef3e7;border:1px solid #dee7d4;border-radius:6px;padding:8px 13px;font-size:11px;color:#4c7441}.demo-shortcuts span{font-size:10px;margin-left:8px;color:#94a486}.demo-shortcuts #demo-clear{background:transparent;margin-left:auto;color:#98a48e}.demo-status{min-height:17px;font-size:10px!important}.demo-number-grid,.demo-name-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:25px 0}.demo-number-grid{grid-template-columns:1fr 12px 1fr;align-items:center}.demo-number-grid>span{font-size:16px;color:#94aa86}.demo-workspace input{display:block;margin-top:9px}.demo-result{border-top:1px solid #e9eedf;padding-top:20px}.demo-result>span{font-size:10px;color:#8fa37e}.demo-result output{display:block;font-size:32px;color:var(--green);margin-top:6px;overflow-wrap:anywhere}.demo-name-grid+.demo-result output{font-size:23px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.steps article{position:relative;border-top:1px solid #c9d4be;padding-top:25px}.step-no{font:400 38px 'Segoe UI',sans-serif;color:#b6c4aa;letter-spacing:-1px}.steps h3{font-size:19px;font-weight:500;margin:19px 0 10px}.steps p{font-size:12px;color:#7b8b70;margin-bottom:14px}.faq{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.4fr;gap:70px;padding-top:60px}.faq-list details{border-bottom:1px solid var(--line);padding:21px 0}.faq-list details:first-child{padding-top:0}.faq-list summary{font-size:13px;font-weight:500;cursor:pointer;list-style:none;padding-right:25px;position:relative}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'＋';position:absolute;right:0;color:#879b7a}.faq-list details[open] summary:after{content:'−'}.faq-list p{font-size:12px;color:#829276;padding-top:7px}.end{display:flex;align-items:center;justify-content:space-between;gap:35px;border-radius:20px;background:#e7edde;padding:55px 60px;margin-bottom:60px}.end p{font-size:12px;color:#7c8e70}.end-actions{display:flex;flex-direction:column;align-items:center;gap:18px}.end-actions img{border-radius:17px;transform:rotate(-8deg);margin-bottom:4px}.button.orange{background:#efab7a;border-color:#efab7a;color:#3e392c}.button.orange:hover{background:#e99a63}.end-actions>a:last-child{font-size:10px;color:#6c8060}footer{display:flex;align-items:center;gap:30px;padding:25px 0 35px;border-top:1px solid var(--line)}footer .brand{font-size:16px}footer p{font-size:10px;color:#92a084}footer>div{margin-left:auto;display:flex;gap:20px;font-size:10px;color:#92a084}.back-to-top{position:fixed;right:23px;bottom:23px;z-index:10;background:var(--green);color:white;width:40px;height:40px;border:0;border-radius:12px;font-size:18px}dialog{border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);width:min(600px,calc(100% - 32px));max-height:90vh;padding:35px}dialog::backdrop{background:#0b241ecc;backdrop-filter:blur(5px)}dialog h2{font-size:28px;margin-bottom:22px}.close{position:absolute;right:14px;top:10px;border:0;background:none;color:#65855c;font-size:28px}.preview-frame{border-radius:12px;overflow:hidden;border:1px solid #dce5d3;background:#eef2e9;height:360px;display:flex;justify-content:center;align-items:flex-start}.preview-frame iframe{width:100%;height:100%;border:0;background:white}.preview-frame img{object-fit:contain;height:100%;width:auto}.name-example{background:#e4eddb;border:1px solid #cfddc2;padding:25px;border-radius:12px;text-align:center}.name-example>b{display:block;background:#f6fbf0;padding:14px;color:#4d7a3d;border:1px solid #aec59d;border-radius:6px}.name-example label{display:block;font-size:11px;color:#879b78;margin-top:20px}.name-example>div{background:white;border-radius:5px;padding:12px;margin-top:8px;font-size:15px}dialog ul{padding-left:20px;font-size:13px;line-height:1.9;color:#728767;margin:25px 0}dialog li{margin-bottom:7px}.motion-reveal{transition:opacity .65s,transform .65s}.motion-ready .motion-reveal{opacity:0;transform:translateY(22px)}.motion-ready .motion-reveal.revealed{opacity:1;transform:none}
@media(min-width:1450px){.hero{gap:80px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.nav nav{gap:16px;font-size:11px}.hero{gap:23px}.hero h1{font-size:60px}.floating-calc{right:-12px;width:145px;top:170px}.floating-calc strong{font-size:26px}.card{padding:20px}.card-number{font-size:7px;letter-spacing:.4px}.snippet-visual{font-size:7px;gap:5px}.workbench-content{gap:8px;padding:13px}.mock-chat{padding:13px}.composer{font-size:7px;gap:5px}.workflow{gap:50px}.actions{gap:17px}.hero .text-link{font-size:10px}.hero .button{padding-inline:18px;font-size:12px}}
@media(max-width:850px){.hero{grid-template-columns:1fr;gap:65px;padding-top:50px}.hero-copy{max-width:620px}.hero h1{font-size:65px}.hero h1 br:nth-child(2){display:none}.hero h1 span{margin-right:12px}.workbench{width:min(560px,100%);justify-self:center;margin-bottom:25px}.floating-calc{right:-12px;width:172px;top:155px}.floating-calc strong{font-size:30px}.mock-chat{padding:19px}.composer{font-size:9px}.cards{grid-template-columns:repeat(2,1fr)}.section{padding-block:65px}.workflow{gap:35px}.workflow h2{font-size:31px}.demo-shell{grid-template-columns:235px 1fr}.demo-sidebar{padding:21px}.demo-workspace section{padding:24px}.demo-tabs button{padding:12px 7px;gap:8px}.demo-tabs button span{font-size:10px}.demo-number-grid{gap:9px}.steps{gap:22px}.faq{gap:30px}.end{padding:35px}.nav nav{display:none}footer p{display:none}.strip-inner{font-size:11px}.strip-inner i{font-size:13px}}
@media(max-width:560px){.wrap{width:calc(100% - 40px)}.nav{padding-block:20px}.brand{font-size:19px;gap:8px}.brand img{width:36px;height:36px}.brand small{font-size:6px;letter-spacing:1.3px}.nav .button{font-size:10px;padding:9px 12px;gap:12px;min-height:38px}.hero{padding-top:40px;gap:40px;padding-bottom:50px}.hero h1{font-size:53px;letter-spacing:-2px}.hero .eyebrow{font-size:8px}.lead{font-size:14px;margin-bottom:24px}.actions{gap:19px;flex-wrap:wrap}.hero .text-link{font-size:11px}.hero .button{font-size:12px;min-height:48px}.hero-tags{margin-top:22px}.hero-tags span{font-size:8px;padding:5px 10px}.hero-note{font-size:8px}.workbench{border-radius:15px;padding-bottom:64px;transform:none;margin-top:0;margin-bottom:18px}.workbench-top{padding:13px}.workbench-top b{font-size:6px;letter-spacing:1px}.workbench-content{padding:12px;gap:7px}.mock-sidebar{width:25px;gap:12px}.mock-sidebar img{width:24px;height:24px;border-radius:7px}.mock-sidebar>span{font-size:10px;width:25px;height:26px}.mock-chat{padding:12px}.mock-chat-head{gap:6px;padding-bottom:12px}.mock-chat-head b{font-size:9px}.avatar{width:25px;height:25px;font-size:11px}.mock-chat-head small{font-size:6px}.chat-message{font-size:9px;margin:17px 0 10px;padding:9px}.chat-reply{font-size:8px;padding:10px}.chat-reply small{font-size:6px}.composer{margin-top:15px;font-size:6px;padding:7px 5px;gap:5px}.name-mini{font-size:6px;gap:6px}.floating-calc{width:126px;right:-9px;top:130px;padding:10px;border-radius:9px;transform:rotate(4deg)}.mini-title{font-size:6px}.calc-expression{font-size:9px;margin-top:12px}.floating-calc strong{font-size:24px}.calc-copy{font-size:6px;padding:6px}.floating-capture{left:23px;bottom:-17px;width:203px;padding:11px;gap:9px;border-radius:10px}.capture-icon{font-size:18px;padding:4px 7px}.floating-capture b{font-size:9px}.floating-capture small{font-size:7px}.bench-caption{left:47px;bottom:16px;font-size:6px}.strip-inner{flex-wrap:wrap;justify-content:center;gap:10px 15px;font-size:10px;padding-block:15px}.strip-inner i:last-of-type{display:none}.strip-inner span:last-child{display:none}.section{padding-block:50px}.section-top{display:block;margin-bottom:24px}.section-top p{margin-top:16px;font-size:11px}.eyebrow{font-size:8px;margin-bottom:15px}h2{font-size:32px;letter-spacing:-1px}.cards{gap:12px;grid-template-columns:1fr}.card{min-height:275px;padding:24px}.card-top .card-number{font-size:8px;letter-spacing:1px}.card h3{margin-top:19px;font-size:21px}.card p{font-size:12px}.card-link{font-size:10px;padding-top:14px}.snippet-visual{font-size:9px;margin-top:22px}.win-visual{margin-top:18px}.workflow{grid-template-columns:1fr;gap:28px;padding-block:45px}.workflow h2{font-size:32px}.workflow p{font-size:12px}.flow-list>div{padding:17px 0}.flow-list h3{font-size:16px}.demo-shell{grid-template-columns:1fr}.demo-sidebar{padding:22px}.demo-sidebar h3{font-size:15px;margin:10px 0 15px}.demo-tabs{flex-direction:row;gap:5px}.demo-tabs button{flex:1;padding:9px 7px;gap:5px;font-size:8px}.demo-tabs button span{font-size:9px}.demo-tabs button b{display:none}.demo-sidebar>small{display:none}.demo-workspace section{padding:23px 20px}.demo-topbar{padding:13px 20px}.demo-workspace h3{font-size:20px}.demo-shortcuts{gap:5px}.demo-shortcuts button{font-size:10px;padding:8px}.demo-shortcuts span{font-size:9px;margin-left:3px}.demo-name-grid{gap:10px}.demo-result output{font-size:28px}.demo-name-grid+.demo-result output{font-size:19px}.demo-number-grid input{font-size:12px;padding:10px}.steps{grid-template-columns:1fr;gap:25px}.steps article{padding-top:20px;padding-left:60px;min-height:110px}.step-no{position:absolute;left:0;top:20px;font-size:31px}.steps h3{margin-top:0;font-size:18px}.steps p{font-size:12px;margin-bottom:0}.section-top>.button{margin-top:22px}.faq{display:block}.faq-list{margin-top:30px}.faq-list summary{font-size:12px}.faq-list p{font-size:11px}.end{padding:30px;display:block;margin-bottom:35px}.end h2{font-size:32px}.end-actions{align-items:flex-start;margin-top:25px;gap:15px}.end-actions img{display:none}.end p{font-size:11px}footer{flex-wrap:wrap;gap:23px;padding-block:25px}footer>div{margin-left:0;width:100%;font-size:10px}.back-to-top{right:13px;bottom:13px;width:35px;height:35px}dialog{padding:27px 22px}dialog h2{font-size:24px}.preview-frame{height:330px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.motion-ready .motion-reveal{opacity:1;transform:none}}

.feature-note{font-size:10px;color:#8a987e;line-height:1.8;margin:20px 0 0}
/* Readable Thai typography and premium two-column feature composition. */
h1,h2,h3,.brand{letter-spacing:0}h1{font-size:clamp(42px,4.55vw,65px);font-weight:500;line-height:1.48;margin-bottom:20px}h2{font-size:clamp(29px,3.1vw,42px);font-weight:500;line-height:1.5}.lead{color:#586b5c;line-height:1.9}.section-top p,.card p,.steps p,.faq-list p,.end p{font-size:14px;line-height:1.9;color:#65755f}.cards{grid-template-columns:1.12fr 1fr;gap:14px}.card{min-height:225px;padding:27px 28px}.card h3{font-size:22px;font-weight:500;line-height:1.65;margin:14px 0 8px}.card-link{font-size:11px;color:#718565;line-height:1.8}.card-number{font-size:9px}.card.featured{min-height:310px;background:#123f32;color:#f7f8ed;border-color:#123f32}.card.featured h3{font-size:27px}.card.featured p{color:#c7d8c0}.card.featured .card-number,.card.featured .arrow,.card.featured .card-link{color:#b2c9a9}.featured .snippet-visual{font-size:13px;gap:17px;margin:28px 0 10px}.featured .snippet-visual span{padding:15px 18px}.featured .snippet-visual span:first-child{color:#123f32}.featured .snippet-visual b{font-size:22px;color:#c3d4b9}.card[data-tool="calculator"]{min-height:310px}.calc-visual{margin-top:26px;padding:21px}.calc-visual strong{font-size:38px}.card[data-tool="win"],.card[data-tool="settings"]{min-height:195px}.card .name-visual b{font-size:14px}.card .capture-visual{font-size:10px;min-height:75px}.card .capture-visual b{font-size:10px}.keys-visual{margin-top:19px}.hero-note,.feature-note{font-size:11px;color:#6d7e63}.demo-workspace h3,.steps h3{font-weight:500}.demo-workspace label{font-size:13px}.faq-list summary{font-size:15px;font-weight:500}
@media(max-width:850px){.hero h1{font-size:56px;line-height:1.48}.hero h1 br:nth-child(2){display:initial}.hero h1 span{margin-right:0}}
@media(max-width:560px){.hero h1{font-size:42px;line-height:1.5}.cards{grid-template-columns:1fr}.card,.card.featured,.card[data-tool="calculator"]{min-height:260px;padding:24px}.featured .snippet-visual{font-size:11px;gap:11px}.featured .snippet-visual span{padding:12px}.card h3{font-size:21px}.card.featured h3{font-size:24px}h2{font-size:30px;line-height:1.55}.section-top p,.card p,.demo-workspace p,.steps p,.faq-list p{font-size:13px}.faq-list summary{font-size:14px}.hero-note,.feature-note{font-size:10px}}