:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f6f7f9;--surface:#fff;--surface-2:#f1f3f6;--border:#e3e7ed;--text:#0f172a;--text-dim:#64748b;--accent:#2563eb;--accent-text:#fff;--warn:#b45309;--radius:10px;--shadow-1:0 1px 2px #0f172a0f, 0 1px 3px #0f172a14;--shadow-2:0 8px 30px #0f172a24;--font:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#0d1117;--surface:#161b22;--surface-2:#1f2630;--border:#2a323d;--text:#e6edf3;--text-dim:#8b949e;--accent:#4c8dff;--shadow-1:0 1px 2px #0006;--shadow-2:0 8px 30px #00000080}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}.app{flex-direction:column;height:100%;display:flex}.topbar{background:var(--surface);border-bottom:1px solid var(--border);flex:none;align-items:center;gap:8px;height:52px;padding:0 14px;display:flex}.brand{letter-spacing:-.01em;-webkit-user-select:none;user-select:none;margin-right:6px;font-size:15px;font-weight:650}.spacer{flex:1}.group{background:var(--surface-2);border-radius:var(--radius);align-items:center;gap:2px;padding:3px;display:flex}.chip{appearance:none;color:var(--text-dim);font:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:7px;padding:5px 10px;font-size:13px;transition:background .12s,color .12s}.chip:hover{color:var(--text);background:color-mix(in srgb, var(--text) 7%, transparent)}.chip[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}.chip:focus-visible,.btn:focus-visible,.swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.swatch{border:1px solid color-mix(in srgb, var(--text) 22%, transparent);cursor:pointer;border-radius:7px;width:24px;height:24px;padding:0}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--accent)}.swatch--transparent{background-color:#fff;background-image:linear-gradient(45deg,#c9cfd8 25%,#0000 25%),linear-gradient(-45deg,#c9cfd8 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#c9cfd8 75%),linear-gradient(-45deg,#0000 75%,#c9cfd8 75%);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px}.btn{appearance:none;font:inherit;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;padding:8px 14px;font-size:13px;font-weight:550;transition:background .12s,transform 80ms}.btn:hover:not(:disabled){background:var(--surface-2)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:default}.btn--primary{background:var(--accent);color:var(--accent-text);border-color:#0000;min-width:92px}.btn--primary:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 88%, black)}.btn--done{background:#16a34a}.slider{color:var(--text-dim);align-items:center;gap:7px;padding:0 8px;font-size:12px;display:flex}.slider input{width:78px;accent-color:var(--accent)}.stage{flex:1;place-items:center;padding:28px;display:grid;position:relative;overflow:auto}.board-canvas{box-shadow:var(--shadow-2);background-color:#fff;background-image:linear-gradient(45deg,#d7dce4 25%,#0000 25%),linear-gradient(-45deg,#d7dce4 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d7dce4 75%),linear-gradient(-45deg,#0000 75%,#d7dce4 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;border-radius:6px;display:block}.empty{text-align:center;border:2px dashed var(--border);background:var(--surface);border-radius:18px;place-items:center;gap:18px;max-width:460px;padding:60px 40px;display:grid}.empty h2{margin:0;font-size:19px;font-weight:600}.empty kbd{font:inherit;background:var(--surface-2);border:1px solid var(--border);border-bottom-width:2px;border-radius:8px;padding:7px 14px;font-size:15px;font-weight:600;display:inline-block}.empty p{color:var(--text-dim);margin:0;font-size:13px}.empty .privacy{opacity:.85;font-size:12px}.dropzone{z-index:50;background:color-mix(in srgb, var(--accent) 12%, transparent);border:3px solid var(--accent);pointer-events:none;color:var(--accent);place-items:center;font-size:17px;font-weight:600;display:grid;position:fixed;inset:0}.toasts{z-index:60;pointer-events:none;gap:8px;display:grid;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.toast{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-2);border-radius:var(--radius);padding:9px 15px;font-size:13px;animation:.16s ease-out toast-in}.toast--warn{border-color:var(--warn);color:var(--warn)}.toast--success{border-color:#16a34a}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}.busy{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-2);z-index:60;padding:9px 15px;font-size:13px;position:fixed;bottom:20px;right:20px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}