:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{color:#000;background:#fff;margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}:root{--ink:#111016;--panel:#1a1820;--panel-2:#23202b;--line:#332f3d;--fg:#eee8df;--muted:#978fa3;--accent:#ff9f43;--accent-soft:#ff9f4324;--ok:#8fd8b0;--warn:#ffb4a8;--f-display:"Mitr", "IBM Plex Sans Thai", system-ui, sans-serif;--f-body:"IBM Plex Sans Thai", system-ui, sans-serif;--f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{background:var(--ink);color:var(--fg);font-family:var(--f-body);margin:0;font-size:14px;line-height:1.5}.app{grid-template-columns:minmax(0,1fr) 380px;align-items:start;gap:16px;min-height:100%;padding:16px;display:grid}@media (width<=960px){.app{grid-template-columns:minmax(0,1fr)}}.stage{flex-direction:column;align-items:start;gap:12px;min-width:0;display:flex;position:sticky;top:30px}header.top{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;display:flex}h1{font-family:var(--f-display);margin:0;font-size:22px;font-weight:600}h1 span{color:var(--accent)}.sub{color:var(--muted);font-size:13px}.view{aspect-ratio:16/10;border:1px solid var(--line);background:#0d0c11;border-radius:14px;width:100%;position:relative;overflow:hidden}.view canvas{touch-action:none;width:100%;height:100%;display:block}.hud{pointer-events:none;flex-direction:column;gap:3px;max-width:75%;display:flex;position:absolute;top:12px;left:14px}.hud .badge{font-family:var(--f-mono);color:#1d1306;background:var(--accent);border-radius:999px;align-self:flex-start;padding:2px 8px;font-size:11px}.hud .ht{font-family:var(--f-display);font-size:18px;font-weight:500}.hud .hd{color:var(--muted);font-size:12.5px}.tag{font-family:var(--f-mono);color:var(--muted);font-size:11px;position:absolute;top:10px;right:12px}.lib{flex-direction:column;gap:10px;display:flex}.libcat{flex-direction:column;gap:6px;display:flex}.section-label{font-family:var(--f-mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}.presets{flex-wrap:wrap;gap:6px;display:flex}.chip{font-family:var(--f-body);background:var(--panel);color:var(--muted);border:1px solid var(--line);cursor:pointer;border-radius:999px;align-items:center;gap:7px;padding:5px 12px;font-size:13px;display:flex}.chip i{border-radius:50%;flex:none;width:10px;height:10px;display:inline-block}.chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}.chip.mine{border-style:dashed}aside.rail{flex-direction:column;gap:12px;min-width:0;display:flex}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:10px;min-width:0;padding:14px;display:flex}.card h2{font-family:var(--f-display);justify-content:space-between;align-items:baseline;gap:8px;margin:0;font-size:15px;font-weight:500;display:flex}.card h2 small{font-family:var(--f-mono);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:10.5px;font-weight:400}.card.sel{border-color:#ff9f4366}.row{grid-template-columns:100px minmax(0,1fr) 46px;align-items:center;gap:8px;display:grid}.row label{color:var(--muted);font-size:12.5px}.row output{font-family:var(--f-mono);text-align:right;font-variant-numeric:tabular-nums;font-size:11.5px}.row.color{grid-template-columns:100px 1fr}.row.color input{border:1px solid var(--line);background:var(--panel-2);border-radius:8px;width:100%;height:28px;padding:2px}input[type=range]{width:100%;accent-color:var(--accent)}.seg{background:var(--panel-2);border-radius:10px;gap:3px;padding:3px;display:flex}.seg button{font-family:var(--f-body);color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:8px;flex:1;padding:6px 8px;font-size:13px}.seg button.on{background:var(--accent);color:#1d1306;font-weight:600}.pal{gap:6px;display:flex}.pal input{border:1px solid var(--line);background:var(--panel-2);cursor:pointer;border-radius:8px;flex:1;min-width:0;height:30px;padding:2px}.pal-labels{color:var(--muted);gap:6px;font-size:11px;display:flex}.pal-labels span{text-align:center;text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.check{align-items:center;gap:8px;font-size:13px;display:flex}.check input{accent-color:var(--accent)}.grid2{grid-template-columns:1fr 1fr;gap:8px;display:grid}.grid3{grid-template-columns:1fr 1fr 1fr;gap:8px;display:grid}select,input[type=text]{width:100%;font-family:var(--f-body);background:var(--panel-2);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px}.field{flex-direction:column;gap:4px;min-width:0;display:flex}.field span{color:var(--muted);font-size:12px}.btn{font-family:var(--f-body);cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:#1d1306;border-radius:10px;padding:9px 12px;font-size:14px;font-weight:600}.btn.ghost{color:var(--fg);border-color:var(--line);background:0 0;font-weight:500}.btn.small{padding:6px 10px;font-size:12.5px}.btn:disabled{opacity:.45;cursor:not-allowed}.btnrow{flex-wrap:wrap;gap:8px;display:flex}.btnrow .btn{flex:1}.note{color:var(--muted);margin:0;font-size:12px}.status{font-family:var(--f-mono);color:var(--ok);min-height:1.4em;font-size:11.5px}.file{color:var(--muted);flex-direction:column;gap:4px;font-size:12.5px;display:flex}.file input{color:var(--muted);max-width:100%;font-size:12px}.layers{flex-direction:column;gap:4px;max-height:300px;display:flex;overflow:auto}.layer{background:var(--panel-2);cursor:pointer;border:1px solid #0000;border-radius:9px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 8px;display:grid}.layer.sel{border-color:var(--accent);background:var(--accent-soft)}.layer .nm{text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.layer .pt{color:var(--muted);font-size:11px}.layer .meta{font-family:var(--f-mono);color:var(--muted);text-align:right;font-size:11px}.layer .bar{background:#ffffff10;border-radius:2px;grid-column:1/-1;height:4px;position:relative}.layer .bar b{background:var(--accent);opacity:.75;border-radius:2px;position:absolute;top:0;bottom:0}.layer .ord{align-items:center;gap:4px;display:flex}.mini{background:var(--panel);color:var(--muted);border:1px solid var(--line);cursor:pointer;border-radius:7px;width:24px;height:22px;padding:0;font-size:10px}.mini:disabled{opacity:.35;cursor:default}.addrow{grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.chip:focus-visible,.btn:focus-visible,.mini:focus-visible,.seg button:focus-visible,.layer:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.nav{border-bottom:1px solid var(--line);background:var(--panel);z-index:10;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex;position:sticky;top:0}.nav-brand{font-family:var(--f-display);color:var(--fg);font-size:18px;font-weight:600;text-decoration:none}.nav-brand span{color:var(--accent)}.nav-right{align-items:center;gap:12px;min-width:0;display:flex}.nav-email{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}@media (width<=560px){.nav-email{display:none}}.nav-badge{font-family:var(--f-mono);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:3px 8px;font-size:11px}.nav-badge.ok{color:var(--ok);border-color:var(--ok)}a.btn{text-decoration:none;display:inline-block}.nav .btn{padding:6px 12px;font-size:13px}.locked{opacity:.45;filter:grayscale(.6);-webkit-user-select:none;user-select:none;position:relative}.locked:after{content:"ปลดล็อก Lifetime เพื่อใช้งาน";background:var(--accent);color:#1d1306;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:600;position:absolute;top:10px;right:10px}