:root{--bg:#000;--line:#ffffff1a;--txt:#f5f5f7;--dim:#86868b;--acc:#8a8aff;--acc2:#c4b5ff;--cyan:#6ee7ff;--pink:#ff8ad8;--orange:#ff8a3d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;margin:0;font:400 17px/1.6 Kanit,system-ui,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}h1,h2,h3{letter-spacing:-.01em;margin:0;font-family:Kanit,system-ui,sans-serif}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}.page{isolation:isolate;position:relative;overflow-x:clip}.wrap{max-width:1180px;margin:0 auto;padding:0 28px}.muted{color:var(--dim)}.glass{border:1px solid var(--line);-webkit-backdrop-filter:blur(18px)saturate(160%);background:linear-gradient(160deg,#ffffff17,#ffffff06 60%);box-shadow:inset 0 1px #ffffff1f,0 20px 40px -16px #0009}.spot{position:relative}.spot:before{content:"";border-radius:inherit;pointer-events:none;z-index:2;background:radial-gradient(380px circle at var(--x,50%) var(--y,50%),#ffffff14,transparent 45%);opacity:0;transition:opacity .35s;position:absolute;inset:0}.spot:hover:before{opacity:1}.aurora{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.aurora:after{content:"";background-image:linear-gradient(#ffffff08 1px,#0000 0),linear-gradient(90deg,#ffffff06 1px,#0000 0);background-size:100% 32px,96px 100%;position:absolute;inset:0;-webkit-mask-image:radial-gradient(80% 60% at 50% 20%,#000 30%,#0000 75%);mask-image:radial-gradient(80% 60% at 50% 20%,#000 30%,#0000 75%)}.aurora i{filter:blur(100px);opacity:.38;border-radius:50%;animation:22s ease-in-out infinite alternate drift;position:absolute}.aurora i:first-child{background:#6a5cff;width:46vw;height:46vw;top:-24%;left:27%}.aurora i:nth-child(2){opacity:.2;background:#1fb6d9;width:34vw;height:34vw;animation-duration:28s;animation-delay:-8s;top:30%;left:-8%}.aurora i:nth-child(3){opacity:.16;background:#d94fb4;width:30vw;height:30vw;animation-duration:34s;animation-delay:-15s;top:40%;left:70%}@keyframes drift{0%{transform:translate(0)scale(1)}50%{transform:translate(6vw,4vh)scale(1.15)}to{transform:translate(-5vw,8vh)scale(.95)}}.nav{z-index:50;-webkit-backdrop-filter:blur(16px)saturate(150%);background:#0000008c;border-bottom:1px solid #ffffff10;position:sticky;top:0}.nav-in{justify-content:space-between;height:60px;display:flex}.brand,.btn,.hero-in,.nav-in,.nav-links{align-items:center}.brand{gap:10px;font:600 1.1rem Kanit,sans-serif;display:inline-flex}.nav-links{gap:26px;font-size:.92rem;display:flex}.nav-links a:not(.btn){color:var(--dim);transition:color .2s}.nav-links a:not(.btn):hover{color:var(--txt)}.lang{padding:3px;display:flex;box-shadow:inset 0 1px #ffffff1f}.btn,.lang,.lang button{border-radius:999px}.lang button{color:var(--dim);cursor:pointer;background:0 0;border:0;padding:3px 12px;font:500 .8rem Kanit,sans-serif;transition:background .2s,color .2s}.lang button[aria-pressed=true]{color:var(--txt);background:#ffffff1f}.lang button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}.btn{background:linear-gradient(135deg,var(--acc),#b48cff 55%,var(--pink));color:#14102a;gap:8px;padding:14px 28px;font-weight:500;transition:transform .25s,box-shadow .25s;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 10px 34px #8a8aff55,inset 0 1px #fff6}.btn:after{content:"";background:linear-gradient(105deg,#0000 35%,#ffffff8c 50%,#0000 65%);transition:transform .7s;position:absolute;inset:0;transform:translate(-120%)}.btn:hover{transform:translateY(-2px);box-shadow:0 14px 44px #8a8aff80,inset 0 1px #fff6}.btn:hover:after{transform:translate(120%)}.btn span{transition:transform .25s}.btn:hover span{transform:translate(4px)}.btn-sm{padding:6px 16px;font-size:.85rem}.btn-ghost{color:var(--txt);background:linear-gradient(160deg,#ffffff17,#ffffff06 60%)}.btn-ghost:hover{box-shadow:inset 0 1px #ffffff1f,0 0 0 1px #fff3}.hero,.hero-in{position:relative}.hero-in{text-align:center;flex-direction:column;padding-top:64px;padding-bottom:40px;display:flex}.app-icon{border-radius:22px;place-items:center;width:84px;height:84px;display:grid;box-shadow:inset 0 1px #fff3,0 0 60px #8a8aff66,0 20px 40px -10px #000}h1{letter-spacing:-.03em;text-wrap:balance;font-size:calc(clamp(2.8rem,6.6vw,5.6rem));font-weight:600;line-height:1.04}:lang(th) h1{letter-spacing:0;font-size:calc(clamp(2.4rem,5vw,4.3rem));line-height:1.2}.hero-glow{pointer-events:none;opacity:.32;filter:blur(110px);background:conic-gradient(from var(--a),#6ee7ff,#8a8aff,#ff8ad8,#ff8a3d,#6ee7ff);border-radius:50%;width:calc(min(980px,90vw));height:460px;animation:18s linear infinite rim;position:absolute;top:40px;left:50%;translate:-50%}.grad{background:linear-gradient(90deg,var(--acc),var(--acc2) 40%,var(--cyan));color:#0000;-webkit-background-clip:text;background-clip:text}.shine{background-image:linear-gradient(100deg,transparent 40%,#fffc 50%,transparent 60%),linear-gradient(90deg,var(--acc),var(--acc2) 40%,var(--cyan));background-repeat:no-repeat;background-size:250% 100%,100% 100%;animation:6s ease-in-out 1.4s infinite sweep}@keyframes sweep{0%{background-position:130% 0,0 0}30%,to{background-position:-30% 0,0 0}}.lead,.sec-p{color:var(--dim);font-weight:400}.lead b,.sec-p b{color:var(--txt);font-weight:500}.lead{text-wrap:balance;max-width:40rem;margin:22px 0 32px;font-size:calc(clamp(1.1rem,1.6vw,1.4rem));line-height:1.5}.cta-row{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.eyebrow{color:var(--txt);border-radius:999px;align-items:center;gap:10px;margin:0 0 26px;padding:7px 16px;font-size:.86rem;display:inline-flex}.dot{background:#5ee6a8;width:7px;height:7px;position:relative}.dot,.dot:after{border-radius:50%}.dot:after{content:"";background:inherit;animation:1.6s cubic-bezier(0,0,.2,1) infinite ping;position:absolute;inset:0}@keyframes ping{75%,to{opacity:0;transform:scale(2.6)}}.rise{animation:.9s cubic-bezier(.2,.8,.2,1) both rise;animation-delay:var(--d,0s)}@keyframes rise{0%{opacity:0;filter:blur(8px);transform:translateY(22px)}}.motes{pointer-events:none;inset:0;overflow:hidden}.motes,.motes i{position:absolute}.motes i{opacity:0;border-radius:50%;animation:10s linear infinite float;box-shadow:0 0 8px}@keyframes float{0%{opacity:0;transform:translate(0)}15%,80%{opacity:.9}to{opacity:0;transform:translate(var(--fx),-140px)}}.stage{perspective:1800px;padding-bottom:40px}.device-wrap{--px:0;--py:0;border-radius:22px;max-width:1000px;margin:0 auto;position:relative}.device-wrap:after{content:"";z-index:-1;filter:blur(100px);opacity:.6;background:linear-gradient(110deg,var(--cyan),var(--acc) 45%,var(--pink));position:absolute;inset:25% -4% -14%}.device{transform:rotateY(calc(var(--px) * 6deg)) rotateX(calc(var(--py) * -6deg));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.screen{background:#1e1e25;border:10px solid #0d0d10;border-radius:22px 22px 6px 6px;outline:1px solid #ffffff26;overflow:hidden;box-shadow:0 60px 120px -30px #000,inset 0 1px #ffffff1a}.base{background:linear-gradient(#3a3a40,#1b1b1f 60%,#0c0c0f);border-radius:2px 2px 18px 18px;height:16px;margin:0 -7%;position:relative;box-shadow:0 30px 50px -10px #000}.base:before{content:"";background:#111115;border-radius:0 0 8px 8px;width:16%;height:6px;position:absolute;top:0;left:50%;translate:-50%}.chrome{background:#ffffff0a;border-bottom:1px solid #0006;align-items:center;gap:7px;height:36px;padding:0 14px;display:flex}.chrome i{border-radius:50%;width:11px;height:11px}.chrome i:first-child{background:#ff6b6b}.chrome i:nth-child(2){background:#ffcc4d}.chrome i:nth-child(3){background:#5ee6a8}.chrome span{color:var(--dim);margin-left:10px;font-size:.78rem}.chip{z-index:3;white-space:nowrap;background:linear-gradient(160deg,#24242ecc,#14141acc);border-radius:16px;align-items:center;gap:9px;padding:10px 18px;font-size:.92rem;font-weight:500;display:inline-flex;position:absolute}.led{background:var(--c);width:8px;height:8px;box-shadow:0 0 10px var(--c);border-radius:50%}.chip-off{--c:#ff7a7a;animation:6s infinite chip-off;top:26%;left:-40px}.chip-on{--c:#5ee6a8;animation:6s infinite chip-on;bottom:14%;right:-40px}@keyframes chip-off{0%,5%{opacity:0;transform:translateY(8px)}12%,44%{opacity:1;transform:none}52%,to{opacity:0;transform:translateY(-8px)}}@keyframes chip-on{0%,55%{opacity:0;transform:translateY(8px)}63%,92%{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}.manifesto-wrap{padding-top:160px;padding-bottom:160px}.manifesto{text-wrap:balance;max-width:20em;margin:0;font-size:calc(clamp(2rem,4.6vw,3.8rem));font-weight:600;line-height:1.3}.word{white-space:nowrap}.word.hl{background:linear-gradient(90deg,var(--acc2),var(--cyan));color:#0000;-webkit-background-clip:text;background-clip:text}.sec-head{max-width:900px;margin-bottom:56px}.sec-e{background:linear-gradient(90deg,var(--orange),var(--pink) 50%,var(--acc));color:#0000;-webkit-background-clip:text;background-clip:text;width:fit-content;margin:0 0 10px;font-size:calc(clamp(1.2rem,2vw,1.6rem));font-weight:600}.display{letter-spacing:-.03em;text-wrap:balance;font-size:calc(clamp(2.6rem,6.4vw,5.2rem));font-weight:600;line-height:1.06}:lang(th) .display{letter-spacing:0;font-size:calc(clamp(2.2rem,5vw,4.2rem));line-height:1.22}.sec-p{max-width:46rem;margin:28px 0 0;font-size:calc(clamp(1.1rem,1.7vw,1.45rem));line-height:1.5}.section{padding-top:88px;padding-bottom:88px}.pads-sec{padding:0 28px 64px;overflow:hidden}.pads{grid-template-columns:repeat(var(--cols),1fr);gap:10px;max-width:1280px;margin:0 auto;display:grid;position:relative;-webkit-mask-image:linear-gradient(90deg,#0000,#000 12% 88%,#0000);mask-image:linear-gradient(90deg,#0000,#000 12% 88%,#0000)}.pads i{aspect-ratio:1/1.05;background:linear-gradient(#ffffff0d,#ffffff04);border-radius:10px;box-shadow:inset 0 1px #ffffff12}.pads i.on{background:linear-gradient(hsl(var(--h) 90% 62%),hsl(var(--h) 80% 38%));animation:pad var(--loop) linear infinite}@keyframes pad{0%{filter:brightness(1.6);box-shadow:0 0 40px hsl(var(--h) 100% 60%/.9),inset 0 1px 0 #ffffff80;transform:scale(1.06)}12%{filter:brightness();box-shadow:0 0 14px hsl(var(--h) 100% 60%/.4),inset 0 1px 0 #ffffff40;transform:none}to{filter:brightness(.55);box-shadow:none}}.playhead{width:2px;box-shadow:0 0 18px #fff,0 0 40px var(--cyan);animation:playhead var(--loop) linear infinite;background:#fff;border-radius:2px;position:absolute;top:-8px;bottom:-8px;left:0}@keyframes playhead{to{left:100%}}.features{grid-template-columns:repeat(3,1fr);gap:18px;margin:0;padding:0;list-style:none;display:grid}.card{border-radius:28px;padding:32px;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s;overflow:hidden}.card:after{content:"";background:var(--acc);filter:blur(50px);opacity:.14;border-radius:50%;width:180px;height:180px;transition:opacity .35s;position:absolute;top:-60px;right:-60px}.card:nth-child(3n+2):after{background:var(--cyan)}.card:nth-child(3n):after{background:var(--pink)}.card:hover{border-color:#fff3;transform:translateY(-6px)}.card:hover:after{opacity:.4}.card-k{letter-spacing:.15em;color:var(--acc2);font-size:.8rem}.card h3{margin:16px 0 8px;font-size:1.3rem;font-weight:500}.card p{color:var(--dim);margin:0;font-size:1rem}.steps{grid-template-columns:repeat(3,1fr);gap:18px;margin:0;padding:0;list-style:none;display:grid}.step{border-radius:28px;padding:32px}.step-k{color:#0000;-webkit-text-stroke:1px #c4b5ff88;font-size:4.4rem;font-weight:700;line-height:1;transition:color .35s;display:block}.step:hover .step-k{color:#c4b5ff33}.steps h3{margin:18px 0 8px;font-size:1.35rem;font-weight:500}.steps p{color:var(--dim);margin:0}.modes{flex-wrap:wrap;gap:10px;margin-top:40px;display:flex}.mode{align-items:center;gap:10px;padding:7px 16px 7px 7px;font-size:.92rem;display:inline-flex}.mode,kbd{border-radius:999px}kbd{min-width:28px;height:28px;color:var(--txt);background:#ffffff1a;place-items:center;padding:0 6px;font:500 .82rem Kanit,sans-serif;display:inline-grid;box-shadow:inset 0 1px #ffffff26}.spectrum{height:70vh;min-height:420px;margin-top:80px;position:relative}.spectrum:before{content:"";background:radial-gradient(35% 90% at 12% 0,#ff8a3d,#0000 70%),radial-gradient(35% 100% at 38% 0,#ff3d8b,#0000 70%),radial-gradient(35% 100% at 64% 0,#b03dff,#0000 70%),radial-gradient(35% 90% at 92% 0,#3d8bff,#0000 70%);animation:14s ease-in-out infinite alternate hue;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#000 20%,#0000 85%);mask-image:linear-gradient(#000,#000 20%,#0000 85%)}.spectrum:after{content:"";background:linear-gradient(90deg,#ff8a3d,#ff3d8b,#b03dff,#3d8bff);height:2px;position:absolute;top:0;left:0;right:0;box-shadow:0 0 30px #ff3d8b}@keyframes hue{to{filter:hue-rotate(40deg)saturate(1.2)}}.engine-sec{margin-top:-38vh;padding-top:0;position:relative}.stats{grid-template-columns:repeat(3,1fr);gap:18px;margin:0;display:grid}.stats div{border-radius:28px;flex-direction:column;gap:8px;padding:30px;display:flex}.stats dt{white-space:nowrap;font-size:calc(clamp(2.6rem,4.6vw,3.6rem));font-weight:600;line-height:1}.stats dd{color:var(--dim);margin:0}.final{text-align:center;background:linear-gradient(160deg,#1d1a30,#0b0b10 60%) padding-box,conic-gradient(from var(--a),#ff8a3d,#ff3d8b,#b03dff,#3d8bff,#6ee7ff,#ff8a3d) border-box;border-color:#0000;border-radius:36px;flex-direction:column;align-items:center;margin:96px 0;padding:88px 28px;animation:8s linear infinite rim;display:flex}@keyframes rim{to{--a:360deg}}.final:after{content:"";z-index:-1;filter:blur(40px);background:radial-gradient(closest-side,#b03dff66,#0000);width:70%;height:60%;position:absolute;top:0;left:50%;translate:-50% -30%}.final .app-icon{margin-bottom:28px}.final h2{letter-spacing:-.02em;font-size:calc(clamp(2.2rem,5vw,4rem));font-weight:600;line-height:1.15}.final p{margin:14px 0 34px}.footer{border-top:1px solid var(--line);justify-content:space-between;align-items:center;padding-top:28px;padding-bottom:40px;font-size:.9rem;display:flex}@supports (animation-timeline:view()){.reveal{animation:linear both reveal;animation-timeline:view();animation-range:entry 0 entry 55%}@keyframes reveal{0%{opacity:0;filter:blur(10px);transform:translateY(48px)scale(.97)}}.hero-in{animation:linear both hero-out;animation-timeline:scroll();animation-range:0 70vh}@keyframes hero-out{to{opacity:0;filter:blur(8px);transform:translateY(-8vh)scale(.94)}}.device-wrap{animation:linear both tip;animation-timeline:view();animation-range:entry 0 cover 45%}@keyframes tip{0%{opacity:.3;transform:rotateX(32deg)scale(.82)translateY(60px)}}.pads i{animation:linear both pad-in;animation-timeline:view();animation-range:entry 0 cover 40%}.pads i.on{animation:pad var(--loop) linear infinite,pad-in linear both;animation-timeline:auto,view();animation-range:normal,entry 0 cover 40%}@keyframes pad-in{0%{opacity:0;scale:.6}}.spectrum{animation:linear both bloom;animation-timeline:view();animation-range:entry 0 cover 50%}@keyframes bloom{0%{opacity:0;filter:blur(30px);transform:scaleX(.4)}}.manifesto{view-timeline-name:--manifesto}.word{animation:linear both word-light;animation-timeline:--manifesto;animation-range:cover calc(18% + var(--i) * 1.8%) cover calc(26% + var(--i) * 1.8%)}@keyframes word-light{0%{opacity:.16}to{opacity:1}}}@media (width<=920px){.device{transform:none}.chip-off{top:-18px;left:8px}.chip-on{bottom:-22px;right:8px}.features,.stats{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr}.pads{gap:6px}}@media (width<=600px){.nav-links{gap:14px}.nav-links a:not(.btn){display:none}.hero-in{padding-top:56px}.features,.stats{grid-template-columns:1fr}.screen{border-width:5px}.pads{gap:4px}.pads i{border-radius:5px}}@media (prefers-reduced-motion:reduce){.aurora i,.chip,.device-wrap,.dot:after,.final,.hero-glow,.hero-in,.motes,.pads i,.playhead,.reveal,.rise,.shine,.spectrum,.spectrum:before,.word{animation:none!important}.chip-on,.playhead{display:none}.btn,.btn span,.btn:after,.card,.device{transition:none}}html.lang-wait body{visibility:hidden;animation:0s 1.5s forwards lang-show}@keyframes lang-show{to{visibility:visible}}
