/* Copyright (c) 2026 Noykosana Maeai. All rights reserved. */
:root{font-family:"Leelawadee UI","Noto Sans Thai",Tahoma,system-ui,sans-serif;color:#141a28;background:#fff;font-synthesis:none;line-height:1.8;--purple:#6450e8;--muted:#616b7c;--line:#e4e8ef}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:auto}figure,p{margin:0}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,summary:focus-visible{outline:3px solid #6450e8;outline-offset:5px;border-radius:5px}a:hover{color:var(--purple)}.wrap{width:min(1160px,calc(100% - 64px));margin-inline:auto}.skip-link{position:absolute;top:-100px;left:16px;background:#fff;padding:12px;z-index:10}.skip-link:focus{top:12px}.intro-surface{padding-top:24px;background:radial-gradient(ellipse at 50% 28%,#fff 0%,#edf5ff 46%,#d9eaff 76%,#edf5ff 100%);position:relative}.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 22px;background:#ffffffed;border:1px solid #fff;border-radius:18px}.brand{display:inline-flex;align-items:center;gap:10px;font-family:system-ui,sans-serif;font-size:23px;font-weight:850;letter-spacing:-1px;white-space:nowrap}.brand-accent{color:var(--purple)}.brand-mark{display:grid;place-items:center;width:32px;height:34px;border-radius:9px;background:#181e2b;color:#fff;font-size:24px;font-style:italic;letter-spacing:-3px;padding-right:3px}.main-nav{display:flex;gap:26px;font-size:14px;color:#4f5868}.main-nav [aria-current]{color:var(--purple)}.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:48px;padding:12px 23px;border:1px solid transparent;border-radius:10px;font-size:15px;font-weight:650;line-height:1.5;transition:background .2s,box-shadow .2s,transform .2s}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--purple);color:#fff;box-shadow:0 7px 18px #6450e827}.button-primary:hover{background:#5140c4;color:#fff}.button-dark{background:#141a28;color:#fff}.button-dark:hover{background:#30384b;color:#fff}.button-light{background:#ffffffb8;border-color:#dce4ef}.button-light:hover{background:#fff}.button span{font-size:20px}.header-cta{font-size:13px;padding:10px 17px;min-height:44px}.hero{text-align:center;padding-top:70px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--purple);line-height:1.7}.pill{display:inline-flex;align-items:center;gap:8px;letter-spacing:.2px;color:#515d76;background:#ffffffb8;border:1px solid #fff;border-radius:30px;padding:6px 15px;font-size:12px}.status-dot,.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6b62df}.hero h1{font-size:clamp(36px,4.6vw,62px);font-weight:750;line-height:1.4;letter-spacing:-1.8px;margin:24px 0 18px}.accent{color:var(--purple)}.hero-description{font-size:18px;line-height:1.9;color:#59667b}.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:26px}.hero-note{font-size:12px;color:#657185;margin:16px 0 42px}.editor-frame{padding:10px 10px 0;border:1px solid #ffffff;background:#ffffff78;border-radius:20px 20px 0 0;box-shadow:0 -5px 50px #6290bc13;text-align:left}.window-bar{display:flex;align-items:center;justify-content:space-between;background:#fff;color:#8590a1;font:11px system-ui,sans-serif;padding:13px 18px;border-radius:10px 10px 0 0}.window-dots{display:flex;gap:5px}.window-dots i{width:7px;height:7px;border-radius:50%;background:#e0e5ee}.window-dots i:first-child{background:#f2b6b3}.window-dots i:nth-child(2){background:#f1d597}.window-dots i:nth-child(3){background:#a9d6c2}.window-label{font-size:10px}.editor-frame>a{display:block;background:#deeeff;overflow:hidden}.editor-frame img{aspect-ratio:1600/1111;object-fit:cover}.editor-frame figcaption{display:flex;align-items:center;gap:7px;justify-content:center;font-size:11px;color:#607189;padding:13px}.editor-frame figcaption>span:last-child{margin-left:auto}.format-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-block:28px;font-size:13px;color:#677187}.format-strip>span:first-child{font-size:12px}.format-strip strong{color:#303b50;font-size:14px}.section{padding-block:90px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:34px}.section-heading h2,.final-cta h2{font-size:clamp(28px,3vw,39px);font-weight:700;line-height:1.5;letter-spacing:-.8px;margin:10px 0 0}.section-heading>p{font-size:14px;line-height:1.95;color:var(--muted);max-width:410px}.section-heading.centered{display:block;text-align:center;margin-bottom:42px}.centered>p{max-width:none;margin-top:14px}.centered>.eyebrow{margin:0}.gallery,.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.gallery-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}.gallery-card:hover{transform:translateY(-4px);box-shadow:0 16px 35px #1f39500c}.gallery-card>a{display:block;overflow:hidden;background:#deeeff}.gallery-card img{aspect-ratio:1.46;object-fit:cover}.gallery-card figcaption{padding:23px}.tag{display:inline-block;color:#62658b;background:#f2f1fb;font-size:10px;border-radius:5px;padding:3px 8px}.gallery h3,.feature-card h3,.steps h3{font-size:19px;line-height:1.6;margin:11px 0 8px;letter-spacing:-.3px}.gallery p,.feature-card p,.steps p{font-size:13px;color:var(--muted);line-height:1.9}.feature-surface{background:#f7f9fc;border-block:1px solid #edf0f5}.feature-card{background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden}.feature-visual{height:225px;background:#eef3fb;overflow:hidden;position:relative}.feature-visual>img{width:100%;height:100%;object-fit:cover}.input-visual{padding:20px 35px 0;background:linear-gradient(135deg,#e5edff,#f0edff)}.input-visual img{object-fit:cover;object-position:top;border-radius:12px 12px 0 0;box-shadow:0 10px 30px #43457d12}.feature-copy{padding:26px}.feature-number{font-size:10px;font-weight:700;letter-spacing:1.2px;color:#7b7e99}.feature-copy>a,.steps a{display:inline-block;color:#5d50bc;font-size:12px;font-weight:650;margin-top:20px}.file-labels{position:absolute;inset:auto 0 20px;display:flex;justify-content:center;gap:8px}.file-labels span{border:1px solid #fff;background:#fffffff0;padding:7px 12px;border-radius:8px;font:700 12px system-ui,sans-serif;color:#48476a;box-shadow:0 5px 15px #1f39500d}.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px;padding:0;margin:0;counter-reset:step}.steps li{position:relative;text-align:center;padding:0 15px}.step-number{position:relative;display:grid;place-items:center;width:48px;height:48px;background:#eeeaff;color:#6450e8;border:5px solid #fff;border-radius:50%;font:650 16px system-ui,sans-serif;margin:0 auto 19px;z-index:1}.steps li:not(:last-child):after{content:"";position:absolute;left:calc(50% + 30px);top:24px;width:calc(100% - 15px);border-top:1px dashed #d9d5ed}.steps h3{font-size:18px}.details-surface{background:#fafbfe;border-block:1px solid var(--line)}.official-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 48px}.official-details section{border-top:1px solid #e3e7ef;padding-top:24px}.official-details h2{font-size:19px;margin:0 0 12px;line-height:1.6}.official-details p{font-size:13px;line-height:2;color:#647083;margin:10px 0}.official-details strong{color:#354157}.official-details a{color:#6554c4;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}.final-cta{text-align:center;padding:65px 25px;margin-block:72px;border:1px solid #e0eaff;border-radius:24px;background:radial-gradient(ellipse at 50% 10%,#fff,#e8f1ff 80%)}.final-cta>p:not(.eyebrow){font-size:14px;color:var(--muted);margin-top:15px}.site-footer{border-top:1px solid var(--line);padding-block:32px}.footer-top,.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px}.footer-top nav{display:flex;gap:22px;flex-wrap:wrap;font-size:12px;color:#5a6477}.footer-bottom{font-size:10px;color:#687389;margin-top:25px}.footer-bottom a{overflow-wrap:anywhere}
@media(min-width:1500px){.wrap{width:min(1240px,calc(100% - 80px))}}
@media(max-width:1000px){.main-nav{gap:15px;font-size:12px}.brand{font-size:20px}.site-header{gap:15px}.hero{padding-top:55px}.feature-copy,.gallery-card figcaption{padding:20px}.steps{gap:20px}.feature-visual{height:190px}.input-visual{padding:15px 20px 0}}
@media(max-width:760px){.wrap{width:calc(100% - 36px)}.intro-surface{padding-top:14px}.site-header{flex-wrap:wrap;padding:14px 16px;border-radius:14px;gap:13px}.main-nav{order:3;width:100%;justify-content:space-between;border-top:1px solid #edf0f7;padding-top:11px;gap:8px}.header-cta{font-size:12px;min-height:38px;padding:8px 13px}.brand-mark{width:26px;height:28px;font-size:20px}.hero{padding-top:42px}.hero h1{font-size:clamp(32px,6.2vw,45px);letter-spacing:-1px;margin:22px 0 16px}.hero-description{font-size:15px}.hero-note{font-size:11px;margin-bottom:30px}.pill{font-size:11px}.actions{margin-top:22px;gap:10px}.button{padding:11px 17px;font-size:13px;gap:12px}.editor-frame{padding:6px 6px 0;border-radius:13px 13px 0 0}.window-bar{padding:9px 11px;font-size:9px}.window-label{font-size:8px}.editor-frame figcaption{font-size:9px;flex-wrap:wrap;padding:10px 5px;gap:5px}.editor-frame figcaption>span:last-child{margin-left:0}.format-strip{justify-content:center;flex-wrap:wrap;gap:9px 13px;padding-block:22px}.format-strip>span:first-child{width:100%;text-align:center}.format-strip strong{font-size:11px}.section{padding-block:54px}.section-heading{display:block;margin-bottom:27px}.section-heading>p{margin-top:15px;font-size:13px}.section-heading h2,.final-cta h2{font-size:29px}.section-heading.centered{margin-bottom:30px}.gallery,.feature-grid{grid-template-columns:1fr;gap:22px}.gallery-card img{aspect-ratio:1.7}.gallery-card figcaption{padding:20px 22px}.gallery h3{margin-top:8px}.feature-visual{height:250px}.input-visual{padding:20px 60px 0}.feature-copy{padding:24px}.steps{grid-template-columns:1fr;gap:32px}.steps li{padding:0 18px}.steps li:not(:last-child):after{display:none}.step-number{margin-bottom:10px}.steps a{margin-top:12px}.official-details{grid-template-columns:1fr;gap:24px}.final-cta{padding:40px 20px;margin-block:45px;border-radius:18px}.footer-top,.footer-bottom{align-items:flex-start;flex-direction:column;gap:18px}.footer-top nav{gap:12px 20px;font-size:11px}.footer-bottom{line-height:1.9;margin-top:22px}.desktop-break{display:none}}
/* A short entrance, once per element. The resting state is always visible. */
@keyframes about-reveal{from{opacity:0;translate:0 var(--reveal-distance,28px);scale:var(--reveal-scale,1)}to{opacity:1;translate:0 0;scale:1}}
.is-revealing{animation:about-reveal 760ms cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms) both}
.editor-frame{--reveal-distance:40px;--reveal-scale:.985}
@media(max-width:760px){.is-revealing{--reveal-distance:18px;animation-duration:620ms}.editor-frame{--reveal-scale:1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.is-revealing{animation:none!important}}
@media print{.is-revealing{animation:none!important}}

.brand-logo{width:148px;height:54px;object-fit:cover;border-radius:8px}.site-header:has(.brand-logo){padding-block:12px}@media(max-width:760px){.brand-logo{width:124px;height:46px}}

@media(max-width:760px){.header-cta{min-height:44px}.main-nav a{min-height:36px;display:flex;align-items:center}.gallery p,.feature-card p,.steps p,.official-details p{font-size:14px}.hero-note{font-size:12px}.footer-bottom{font-size:11px}}
/* Owner-supplied examples: preserve the entire screenshot, including credits. */
.examples-surface{background:linear-gradient(180deg,#f4f7fc,#fff)}
.example-jumps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 48px}
.example-jumps a{padding:10px 18px;border:1px solid #dce2ed;border-radius:30px;background:#fff;font-size:14px}
.example-jumps a:hover{border-color:var(--purple)}
.example-group{margin-top:64px;scroll-margin-top:28px}
.example-heading{max-width:760px;margin-bottom:24px}
.example-heading h3{font-size:clamp(23px,2.4vw,30px);line-height:1.5;margin:10px 0}
.example-heading p,.example-card p,.example-note{color:var(--muted);font-size:16px;line-height:1.9}
.example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.example-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 8px 28px #25395707}
.example-image{display:block;position:relative;background:#dfedfb}
.example-image img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.example-zoom{position:absolute;right:10px;bottom:10px;padding:4px 10px;border-radius:20px;background:#ffffffed;color:#353f53;font-size:12px;box-shadow:0 2px 8px #0001}
.example-card figcaption{padding:24px 26px 28px}
.example-card h3{font-size:21px;line-height:1.6;margin:0 0 8px}
.example-grid-tools .example-image img{aspect-ratio:1/1.15;max-height:600px;background:#edf5fc}
.example-wide .example-image img{aspect-ratio:auto}
.example-note{margin-top:20px;padding-left:16px;border-left:3px solid #bfb5ff}
.example-actions{margin-top:40px}
@media(max-width:760px){.example-grid{grid-template-columns:1fr;gap:20px}.example-group{margin-top:44px}.example-jumps{justify-content:flex-start;margin-bottom:30px;gap:8px}.example-jumps a{font-size:13px;padding:9px 13px}.example-card figcaption{padding:20px}.example-card h3{font-size:20px}.example-heading p,.example-card p,.example-note{font-size:15px}.example-grid-tools .example-image img{max-height:480px}}
.example-wide{display:grid;gap:24px}
.about-page>header.public-header{position:sticky;top:12px;z-index:100;box-shadow:0 8px 28px #25395718}
.about-page .public-header .public-header-start{background:#6450e8;border-color:#6450e8;box-shadow:0 5px 14px #6450e830}
.about-page .public-header .public-header-start:hover{background:#5140c4;border-color:#5140c4;color:#fff}
.about-page .skip-link{z-index:101}
html:has(.about-page){scroll-padding-top:120px}
@media(max-width:1050px){html:has(.about-page){scroll-padding-top:170px}}
@media(max-width:760px){.about-page>header.public-header{top:8px}html:has(.about-page){scroll-padding-top:210px}}
.image-viewer-open{overflow:hidden}
.image-viewer{border:0;padding:0;background:transparent;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:visible}
.image-viewer::backdrop{background:rgb(9 15 28 / 85%)}
.image-viewer-frame{position:relative;line-height:0}
.image-viewer-frame img{display:block;width:auto;height:auto;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);object-fit:contain;border-radius:8px;background:#fff}
.image-viewer-close{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff80;border-radius:50%;background:#172033e8;color:#fff;font-size:32px;line-height:1;cursor:pointer;box-shadow:0 2px 12px #0004}
.image-viewer-close:focus-visible{outline:3px solid #a99aff;outline-offset:3px}
a[aria-haspopup="dialog"]{cursor:zoom-in}