:root{--ink:#f8fafc;--muted:#f1f5f9a6;--faint:#f1f5f961;--clay:#ea580c;--primary:#f97316;--primary-glow:#f9731652;--primary-grad:linear-gradient(135deg, #fb923c 0%, #ea580c 100%);--mint:#34d399;--mint-glow:#34d39938;--danger:#f87171;--danger-glow:#f8717140;--glass:#121826b8;--glass-2:#ffffff14;--glass-card:#1820318c;--stroke:#ffffff1f;--stroke-hover:#ffffff3d;--inset:#ffffff2e;--blur:24px;--r:18px;--sans:"Plus Jakarta Sans", "IBM Plex Sans Thai", system-ui, -apple-system, sans-serif;--mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--dock-h:calc(64px + env(safe-area-inset-bottom));--paper:#fff;--paper-ink:#0f172a}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty;background:#080c15;min-height:100dvh;overflow-x:hidden}.sky{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.sky:after{content:"";opacity:.035;mix-blend-mode:overlay;background-image:repeating-linear-gradient(0deg,#0000,#0000 2px,#fff6 2px 3px);position:absolute;inset:0}.orb{filter:blur(72px);border-radius:50%;animation:18s ease-in-out infinite alternate orbFloat;position:absolute}.o1{opacity:.42;background:radial-gradient(circle,#1e3a8a 0%,#0f172a 70%);width:55vw;height:55vw;animation-duration:22s;top:-18vw;left:-14vw}.o2{opacity:.32;background:radial-gradient(circle,#701a75 0%,#1e1b4b 70%);width:38vw;height:38vw;animation-duration:26s;animation-delay:-5s;top:12vh;right:-8vw}.o3{opacity:.28;background:radial-gradient(circle,#065f46 0%,#0f172a 70%);width:34vw;height:34vw;animation-duration:20s;animation-delay:-9s;bottom:-12vw;left:32vw}@keyframes orbFloat{0%{transform:translate(0)scale(1)}50%{transform:translate(25px,-30px)scale(1.06)}to{transform:translate(-20px,20px)scale(.96)}}.shell{z-index:1;min-height:100dvh;padding:14px 16px calc(14px + env(safe-area-inset-bottom));flex-direction:column;gap:12px;display:flex;position:relative}.glass{background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.5);backdrop-filter:blur(var(--blur)) saturate(1.5);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--inset), 0 16px 48px #0006}.top{padding:10px 14px 10px 18px;padding-left:max(18px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));border-radius:999px;align-items:center;gap:10px;transition:all .2s;display:flex}.brand-wrap{color:inherit;align-items:center;gap:8px;text-decoration:none;display:flex}.brand-icon{background:var(--primary-grad);width:28px;height:28px;box-shadow:0 4px 12px var(--primary-glow);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.brand-icon svg{fill:none;stroke:#fff;stroke-width:2.2px;width:16px;height:16px}.brand{letter-spacing:-.02em;white-space:nowrap;background:linear-gradient(#fff 30%,#ffffffbf 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:16px;font-weight:700}.priv{font-family:var(--mono);color:var(--mint);white-space:nowrap;background:#34d3991a;border:1px solid #34d39947;border-radius:999px;align-items:center;gap:6px;padding:4px 12px;font-size:11px;font-weight:500;display:inline-flex}.priv-dot{background:var(--mint);width:6px;height:6px;box-shadow:0 0 8px var(--mint);border-radius:50%;animation:2.4s ease-in-out infinite pulseDot}@keyframes pulseDot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.4)}}.grow{flex:1}button{font:inherit;color:var(--ink);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;gap:6px;transition:all .18s cubic-bezier(.16,1,.3,1);display:inline-flex}.cta{background:var(--primary-grad);color:#fff;min-height:40px;box-shadow:0 1px 0 #ffffff3d inset, 0 6px 20px var(--primary-glow);border:1px solid #ffffff2e;border-radius:12px;padding:9px 18px;font-size:13.5px;font-weight:600;transform:translateY(0)}.cta:hover{filter:brightness(1.1);box-shadow:0 1px 0 #ffffff4d inset, 0 10px 26px var(--primary-glow);transform:translateY(-1px)}.cta:active{transform:translateY(1px)}.ghost{color:var(--muted);border-radius:10px;min-height:40px;padding:8px 12px;font-size:13px;font-weight:500}.ghost:hover{color:#fff;background:var(--glass-2)}.cta:disabled,.ghost:disabled,.verb:disabled,.tools>button:disabled{opacity:.38;cursor:not-allowed;pointer-events:none}.stage{border-radius:var(--r);border:1px solid var(--stroke);flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.cols{flex:1;grid-template-columns:220px minmax(0,1fr);min-height:0;display:grid}.cols.with-pane{grid-template-columns:220px minmax(0,1fr) minmax(260px,320px)}.col{-webkit-overflow-scrolling:touch;padding:14px;overflow:auto}.col+.col{border-left:1px solid var(--stroke)}.h{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);align-items:center;gap:6px;margin-bottom:10px;font-size:10.5px;font-weight:600;display:flex}.src,.verb{text-align:left;background:var(--glass-card);border:1px solid var(--stroke);cursor:pointer;width:100%;color:var(--ink);border-radius:12px;transition:all .16s}.src{min-height:48px;margin-bottom:8px;padding:12px;display:block}.src.add{opacity:.9;background:#ffffff08;border-style:dashed;border-color:#ffffff38}.src.add:hover{opacity:1;border-color:var(--primary);background:#f973160f}.src.on,.src:hover{border-color:var(--stroke-hover);background:#ffffff17}.src b{text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;display:block;overflow:hidden}.src span{font-family:var(--mono);color:var(--muted);margin-top:2px;font-size:11.5px;display:block}.verb{min-height:44px;margin-top:8px;padding:11px 14px;font-size:13.5px;font-weight:500}.verb:hover{background:var(--glass-2);border-color:var(--stroke-hover)}.verb.bad{color:var(--danger);border-color:#f871714d}.verb.bad:hover{background:var(--danger-glow)}.sel{color:#fff;font-size:13.5px;font-weight:600}.board-bar{flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:14px;display:flex}.board-bar .h{margin-bottom:2px}.tools{flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto;display:flex}.tools>button,.menu-wrap>button{background:var(--glass-card);border:1px solid var(--stroke);width:auto;min-height:38px;color:var(--ink);font:inherit;cursor:pointer;border-radius:10px;align-items:center;gap:6px;padding:7px 14px;font-size:13px;font-weight:500;display:inline-flex}.tools>button:hover,.menu-wrap>button:hover{border-color:var(--stroke-hover);background:#ffffff1f;transform:translateY(-1px)}.tools>button:active,.menu-wrap>button:active{transform:translateY(1px)}.tools>button.bad{color:var(--danger);border-color:#f871714d}.tools>button.bad:hover{background:var(--danger-glow);border-color:var(--danger)}.tools svg,.menu-wrap svg{stroke-width:2px;flex-shrink:0;width:15px;height:15px}.menu-wrap{position:relative}.menu{z-index:25;border:1px solid var(--stroke-hover);-webkit-backdrop-filter:blur(24px)saturate(1.4);backdrop-filter:blur(24px)saturate(1.4);background:#0f1521f0;border-radius:14px;min-width:210px;padding:8px;animation:.16s cubic-bezier(.16,1,.3,1) menuIn;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 16px 40px #00000080}@keyframes menuIn{0%{opacity:0;transform:translateY(-4px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.menu button{text-align:left;width:100%;min-height:40px;color:var(--ink);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:9px;align-items:center;gap:8px;padding:10px 14px;font-size:13px;font-weight:500;display:flex}.menu button:hover{background:var(--glass-2);color:#fff}.col-pane h3{margin-bottom:8px;font-size:17px;font-weight:700}.col-pane .row{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.col-pane .row .cta,.col-pane .row .ghost{flex:1}.col-pane p,.sheet p{color:var(--muted);margin-bottom:14px;font-size:13.5px;line-height:1.5}.col-pane label,.sheet label{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:12px 0 6px;font-size:10.5px;display:block}.col-pane input,.col-pane textarea,.sheet input,.sheet textarea{width:100%;font:inherit;color:var(--ink);border:1px solid var(--stroke);background:#00000059;border-radius:11px;min-height:44px;padding:11px 14px;transition:border-color .18s}.col-pane input:focus,.col-pane textarea:focus,.sheet input:focus,.sheet textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);outline:none}.sign-pad-wrap{background:#fdfbf7;border:1px dashed #d1c7b7;border-radius:14px;margin:10px 0 14px;padding:12px 12px 30px;position:relative}.sign-pad-wrap canvas,#sign-pad{cursor:crosshair;touch-action:none;background:0 0;border-radius:8px;width:100%;height:154px;display:block}.sign-pad-wrap:after{content:"ลงชื่อที่นี่ด้วยเมาส์หรือนิ้ว";color:#8a8174;pointer-events:none;border-top:1px solid #dcd3c4;padding-top:4px;font-size:12px;font-weight:500;position:absolute;bottom:8px;left:16px;right:16px}.col-board{flex-direction:column;display:flex;overflow:auto}.board{grid-template-columns:repeat(auto-fill,minmax(134px,1fr));gap:12px;padding:2px;display:grid}.pg{background:var(--paper);color:var(--paper-ink);cursor:grab;text-align:left;-webkit-user-select:none;user-select:none;touch-action:pan-y;border:1px solid #fff6;border-radius:14px;flex-direction:column;padding:8px;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s;display:flex;position:relative;box-shadow:0 6px 18px #00000059,0 1px 3px #0003}.pg:hover{transform:translateY(-4px);box-shadow:0 14px 32px #00000073,0 0 0 1px #f973164d}.pg.sel{outline:2.5px solid var(--primary);outline-offset:2px;box-shadow:0 0 0 4px var(--primary-glow), 0 12px 28px #0006}.pg img,.pg .ph{object-fit:contain;background:#f8fafc;border:1px solid #0000000f;border-radius:8px;width:100%;height:110px;display:block}.pg .m{justify-content:space-between;align-items:center;margin-top:8px;font-size:11.5px;display:flex}.pg .m b{font-family:var(--mono);color:#f8fafc;background:#0f172a;border-radius:6px;padding:2px 7px;font-size:11px;font-weight:700}.pg .m span{color:#64748b;text-overflow:ellipsis;white-space:nowrap;max-width:68%;font-weight:500;overflow:hidden}.pg-actions{opacity:0;pointer-events:none;z-index:10;gap:4px;transition:opacity .18s,transform .18s;display:flex;position:absolute;top:10px;right:10px;transform:translateY(-4px)}.pg:hover .pg-actions,.pg:focus-within .pg-actions,.pg.sel .pg-actions{opacity:1;pointer-events:auto;transform:translateY(0)}@media (hover:none){.pg-actions{opacity:.9;pointer-events:auto;transform:none}}.pg-act-btn{color:#fff;cursor:pointer;background:#0f172aeb;border:1px solid #ffffff40;border-radius:7px;justify-content:center;align-items:center;width:26px;height:26px;min-height:26px;padding:0;font-size:12px;transition:all .14s;display:flex;box-shadow:0 4px 10px #0006}.pg-act-btn:hover{background:var(--primary);border-color:#ffffff80;transform:scale(1.12)}.pg-act-btn.bad:hover{background:var(--danger)}.pg-act-btn svg{stroke-width:2.2px;stroke:currentColor;fill:none;width:13px;height:13px}.drop{text-align:center;background:radial-gradient(circle at 50% 30%,#f973160d 0%,#ffffff05 100%);border:2px dashed #ffffff2e;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:260px;margin:18px 18px 0;padding:32px 24px;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}.drop:before{content:"";background:radial-gradient(circle at 50% 0%, var(--primary-glow) 0%, transparent 60%);opacity:.4;pointer-events:none;position:absolute;inset:0}.drop.over{border-color:var(--mint);background:#34d3991f;transform:scale(1.01)}.drop-icon{border:1px solid var(--stroke-hover);background:#ffffff0f;border-radius:18px;justify-content:center;align-items:center;width:58px;height:58px;margin-bottom:4px;animation:3.5s ease-in-out infinite floatIcon;display:flex;box-shadow:0 10px 24px #0000004d}@keyframes floatIcon{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.drop-icon svg{width:28px;height:28px;stroke:var(--primary);fill:none;stroke-width:2px}.drop strong{letter-spacing:-.02em;color:#fff;font-size:clamp(20px,4vw,24px);font-weight:700}.drop-desc{color:var(--muted);max-width:420px;font-size:13.5px;line-height:1.5}.drop-btns{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:8px;display:flex}.showcase-wrap{width:100%;max-width:1000px;margin:0 auto;padding:18px}.showcase-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;display:grid}.showcase-card{background:var(--glass-card);border:1px solid var(--stroke);cursor:pointer;text-align:left;border-radius:16px;flex-direction:column;gap:8px;padding:16px;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex}.showcase-card:hover{border-color:var(--stroke-hover);background:#ffffff14;transform:translateY(-2px);box-shadow:0 12px 28px #0000004d}.showcase-head{align-items:center;gap:10px;display:flex}.showcase-icon{background:#ffffff0f;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.showcase-icon svg{stroke-width:2px;fill:none;width:18px;height:18px}.showcase-title{color:#fff;font-size:14px;font-weight:650}.showcase-desc{color:var(--muted);font-size:12.5px;line-height:1.45}.chips{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;display:flex}.chip{font-family:var(--mono);color:var(--ink);background:var(--glass-card);border:1px solid var(--stroke);cursor:pointer;border-radius:999px;min-height:38px;padding:7px 14px;font-size:12px;font-weight:500;transition:all .16s}.chip:hover{border-color:var(--stroke-hover);color:#fff;background:#ffffff1f;transform:translateY(-1px)}.foot{color:var(--muted);border-top:1px solid var(--stroke);background:#0000002e;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 16px;font-size:12.5px;display:flex}.foot b{color:#fff;font-weight:600}.toast{left:50%;bottom:calc(var(--dock-h) + 16px);z-index:50;color:#fff;border:1px solid var(--stroke-hover);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#121826f2;border-radius:14px;max-width:min(92vw,420px);padding:12px 18px;font-size:13.5px;font-weight:500;display:none;position:fixed;transform:translate(-50%);box-shadow:0 16px 40px #00000080}.toast.show{align-items:center;gap:8px;animation:.2s cubic-bezier(.16,1,.3,1) toastPop;display:flex}@keyframes toastPop{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.busy{z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#080c148c;justify-content:center;align-items:center;font-size:14px;font-weight:600;display:none;position:absolute;inset:0}.busy.on{display:flex}.dock{z-index:8;padding:10px 10px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--stroke);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.5);backdrop-filter:blur(var(--blur)) saturate(1.5);gap:8px;display:none;position:sticky;bottom:0}.dock button{background:var(--glass-card);border:1px solid var(--stroke);border-radius:12px;flex:1;min-height:44px;font-size:12.5px;font-weight:550}.dock .cta{flex:1.4}.file{display:none}[hidden]{display:none!important}.sheet{z-index:30;max-height:min(80%,580px);padding:20px 20px calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--stroke-hover);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);backdrop-filter:blur(var(--blur)) saturate(1.4);background:#0e1420eb;border-radius:22px 22px 0 0;animation:.22s cubic-bezier(.16,1,.3,1) slideUp;position:absolute;bottom:0;left:0;right:0;overflow:auto;box-shadow:0 -16px 48px #0009}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sheet h3{color:#fff;margin-bottom:8px;font-size:17px;font-weight:700}.sheet p{color:var(--muted);margin-bottom:14px;font-size:13.5px}.sheet .row{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.sheet .row .cta,.sheet .row .ghost{flex:1}.sheet canvas{touch-action:none;background:#fcfaf6;border:1px dashed #c8bead;border-radius:12px;width:100%;height:144px}.pills{flex-wrap:wrap;gap:6px;display:flex}.pill{font-family:var(--mono);color:var(--mint);background:#34d3991f;border:1px solid #34d3994d;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:500}.inspect{z-index:20;background:#0b0f19;flex-direction:column;display:flex;position:absolute;inset:0}.inspect-bar{border-bottom:1px solid var(--stroke);background:#0f1521f5;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:10px;padding:10px 14px;display:flex}.inspect-x{width:38px;height:38px;min-height:38px;color:var(--ink);background:var(--glass-card);border:1px solid var(--stroke);border-radius:10px;flex-shrink:0;padding:0;font-size:22px;line-height:1}.inspect-x:hover{color:#fff;border-color:var(--danger);background:#f8717133}.inspect-view{cursor:crosshair;flex:1;min-height:0;padding:16px;position:relative;overflow:auto}.inspect-view.fit{touch-action:none;justify-content:center;align-items:center;display:flex;overflow:hidden}.inspect-view.fit .inspect-frame{max-width:100%;height:100%}.inspect-view.fit canvas{width:auto;max-width:100%;height:100%;display:block}.inspect-view.zoom{cursor:grab;touch-action:pan-x pan-y;display:block}.inspect-view.zoom .inspect-frame{max-width:none;margin:0 auto}.inspect-view.zoom canvas{width:min(1600px,160%);height:auto;margin:0 auto;display:block}.inspect-frame{display:inline-block;position:relative}.inspect-view canvas{pointer-events:none;background:#fff;border-radius:4px;box-shadow:0 16px 48px #00000080}.crop-box{border:2px solid var(--primary);pointer-events:none;background:#f9731633;border-radius:2px;position:absolute}.sign-box{z-index:3;cursor:move;border:1.5px dashed var(--primary);background:#ffffff1f;position:absolute}.sign-box img{pointer-events:none;width:100%;height:auto;display:block}.box-x{color:#fff;z-index:4;cursor:pointer;background:#1b2430;border:1px solid #ffffff4d;border-radius:50%;width:22px;height:22px;min-height:22px;padding:0;font-size:15px;line-height:20px;position:absolute;top:-11px;right:-11px}.note-box{z-index:4;min-width:80px;position:absolute;transform:translateY(-50%)}.note-box input{color:#1b2430;background:#fffabef2;border:1px solid #e0c36a;border-radius:5px;width:190px;min-height:30px;padding:4px 22px 4px 8px;font-size:14px;box-shadow:0 4px 12px #00000040}.inspect-bar .on{color:var(--mint);background:#34d3991f}.pg.cropped{outline:2.5px dashed var(--mint);outline-offset:2px}.more-list{flex-direction:column;gap:8px;display:flex}.more-list .verb{margin:0}.help-btn{border:1px solid var(--stroke);background:var(--glass-card);border-radius:11px;width:38px;min-height:38px;padding:0;font-size:16px;font-weight:700}.help-btn:hover{background:var(--glass-2);color:#fff}.by{font-family:var(--mono);letter-spacing:.04em;color:var(--faint);white-space:nowrap;margin-left:auto;font-size:10.5px}.help{z-index:36;-webkit-backdrop-filter:blur(20px)saturate(1.3);backdrop-filter:blur(20px)saturate(1.3);background:#0b101af5;flex-direction:column;display:flex;position:absolute;inset:0}.help-bar{border-bottom:1px solid var(--stroke);flex-shrink:0;align-items:center;gap:10px;padding:12px 16px;display:flex}.help-body{max-width:860px;padding:20px 24px 36px;overflow:auto}.help-lead{color:var(--mint);margin-bottom:18px;font-size:14px;font-weight:500}.help-body h4{letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-size:12px;font-family:var(--mono);margin:22px 0 10px}.how{border-collapse:collapse;width:100%;font-size:13.5px}.how th,.how td{text-align:left;vertical-align:top;border-bottom:1px solid var(--stroke);padding:10px 12px}.how th{color:var(--faint);font-size:11.5px;font-weight:600}.how td:first-child{color:#fff;width:34%;font-weight:600}.how td:last-child{color:var(--muted)}.how b{color:#fff;font-weight:600}.help-body ul{color:var(--muted);margin:0 0 14px 20px;font-size:13.5px}.help-body li{margin:8px 0}.help-foot{color:var(--faint);margin-top:18px;font-size:12px}@media (width<=860px){.shell{padding:10px 10px 0}.priv{padding:3px 8px;font-size:10px}.ghost.desktop-only{display:none}.cols{grid-template-rows:auto 1fr;grid-template-columns:1fr}.cols.with-pane{grid-template-columns:1fr}.tools,.col-pane{display:none!important}.col-sources{border-left:0;border-bottom:1px solid var(--stroke);gap:8px;padding:10px;display:flex;overflow:auto hidden}.col-sources .h{display:none}.col-sources .src{flex:none;min-width:148px;margin:0}.col-board{border-left:0;padding-bottom:12px}.board{grid-template-columns:repeat(2,minmax(0,1fr))}.dock{display:flex}.stage{border-bottom-right-radius:0;border-bottom-left-radius:0}.top{border-radius:16px}.cta.top-export{display:none}.showcase-grid{grid-template-columns:1fr}}@media (width>=861px){.dock{display:none!important}}@media (prefers-reduced-motion:reduce){.glass,.dock{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.orb{filter:blur(24px);animation:none}.pg,.pg:hover{transition:none;transform:none}}