:root{--bg:#111316;--panel:#181b1f;--field:#22262c;--line:#2a2f36;--fg:#e4e7eb;--muted:#8a939e;--accent:#4c8dff;--on-accent:#0b0d10;--warn:#f2a93b;--danger:#ff6b6b;--ok:#45c486;--chk-a:#2a2e34;--chk-b:#33383f;--sans:"IBM Plex Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif;--mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--bg:#e6e9ed;--panel:#f6f7f9;--field:#fff;--line:#d3d8de;--fg:#15181c;--muted:#5d6773;--accent:#2f6feb;--on-accent:#fff;--warn:#a55e00;--danger:#c9323a;--ok:#1f8a4c;--chk-a:#fff;--chk-b:#dce0e5;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}}:root[data-theme=light]{--bg:#e6e9ed;--panel:#f6f7f9;--field:#fff;--line:#d3d8de;--fg:#15181c;--muted:#5d6773;--accent:#2f6feb;--on-accent:#fff;--warn:#a55e00;--danger:#c9323a;--ok:#1f8a4c;--chk-a:#fff;--chk-b:#dce0e5;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-size:12px;line-height:16px}[hidden]{display:none!important}button,select,input{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px}.warn{color:var(--warn)}.muted{color:var(--muted)}.ok{color:var(--ok)}.err{color:var(--danger)}.app{grid-template:"bar bar bar"44px"center layers insp"minmax(0,1fr)/minmax(0,1fr) 260px 288px;height:100%;display:grid}.bar{grid-area:bar}.layers{grid-area:layers}.center{grid-area:center}.inspector{grid-area:insp}.bar{background:var(--panel);border-bottom:1px solid var(--line);padding-left:max(12px, env(safe-area-inset-left,0px));padding-right:max(12px, env(safe-area-inset-right,0px));grid-column:1/-1;align-items:center;gap:4px;min-width:0;padding-block:0;display:flex}.brand{white-space:nowrap;padding-right:12px;font-size:13px;font-weight:600}.tabs{scrollbar-width:none;flex:1;align-self:stretch;min-width:0;display:flex;overflow-x:auto}.tab{box-sizing:border-box;color:var(--muted);border-top:2px solid #0000;border-bottom:2px solid #0000;flex:none;align-items:center;display:flex}.tab:hover{color:var(--fg)}.tab.on{color:var(--fg);border-bottom-color:var(--accent)}.tab .tn{cursor:pointer;color:inherit;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:0;align-self:stretch;max-width:200px;padding:0 4px 0 14px;overflow:hidden}.tab .tx{width:20px;height:20px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:4px;flex:none;place-items:center;margin-right:6px;padding:0;display:grid}.tab .tx:hover{color:var(--fg);background:var(--field)}.bar-r{flex:none;align-items:center;gap:8px;display:flex}.btn{border:1px solid var(--line);background:var(--field);box-sizing:border-box;cursor:pointer;white-space:nowrap;border-radius:6px;align-items:center;gap:6px;height:27px;padding:0 12px;line-height:1;display:inline-flex}.btn:hover{border-color:var(--muted)}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}.btn.primary:hover{filter:brightness(1.08)}.btn:disabled{opacity:.5;cursor:default}.panel{background:var(--panel);flex-direction:column;min-width:0;min-height:0;display:flex}.layers,.inspector{border-left:1px solid var(--line)}.ph{border-bottom:1px solid var(--line);height:31px;color:var(--muted);flex:none;align-items:center;gap:6px;padding:0 8px 0 12px;display:flex;overflow:hidden}.ph b{color:var(--fg);margin-right:auto;font-weight:600}.link{color:var(--muted);cursor:pointer;box-sizing:border-box;background:0 0;border:0;border-radius:4px;align-items:center;height:21px;padding:0 4px;line-height:1;display:inline-flex}.link:hover{color:var(--fg);background:var(--field)}.link.ic{justify-content:center;width:21px;padding:0}.link:disabled{opacity:.5;cursor:default;color:var(--muted);background:0 0}.fold{border-radius:0;flex:none;justify-content:center;width:44px;height:31px;margin-right:-8px;padding:0;display:none}.fold svg{width:14px;height:14px;transition:transform .12s;transform:rotate(180deg)}.app.folded .fold svg{transform:none}.tree{flex:1;padding:4px 0;overflow:auto}.row{cursor:pointer;white-space:nowrap;align-items:center;gap:6px;height:34px;padding-right:8px;display:flex}.row:hover{background:var(--field)}.row.sel{background:color-mix(in srgb, var(--accent) 20%, transparent)}.row .name{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.row.hid .name,.row.hid .thumb{opacity:.45}.row .name.renamed{color:var(--accent)}.rn{border:1px solid var(--accent);background:var(--field);border-radius:4px;outline:none;flex:1;min-width:0;height:24px;padding:0 6px}.tw{width:16px;height:16px;color:var(--muted);cursor:pointer;background:0 0;border:0;flex:none;place-items:center;padding:0;display:grid}.tw svg{transition:transform .12s}.tw.closed svg{transform:rotate(-90deg)}.eye{width:16px;height:34px;color:var(--muted);cursor:pointer;background:0 0;border:0;flex:none;place-items:center;padding:0;display:grid}.eye:hover{color:var(--fg)}.row.hid .eye{opacity:.35}.thumb{border:1px solid var(--line);background-color:var(--chk-a);background-image:conic-gradient(var(--chk-b) 25%, transparent 0 50%, var(--chk-b) 0 75%, transparent 0);background-size:6px 6px;border-radius:3px;flex:none;width:26px;height:26px}.thumb.folder{color:var(--muted);background:0 0;border:0;place-items:center;display:grid}.ck{appearance:none;border:1px solid var(--muted);cursor:pointer;background:0 0;border-radius:3px;flex:none;place-items:center;width:14px;height:14px;margin:0;display:grid}.ck:checked{background:var(--accent);border-color:var(--accent)}.ck:checked:after{content:"";border:solid var(--on-accent);border-width:0 0 2px 2px;width:7px;height:4px;transform:translateY(-1px)rotate(-45deg)}.tag{color:var(--muted);flex:none;font-size:10px}.tag.w{color:var(--warn)}.center{background:var(--bg);flex-direction:column;min-width:0;min-height:0;display:flex}.stage{flex:1;place-items:center;min-height:0;padding:16px;display:grid;position:relative;overflow:hidden}.stage canvas{image-rendering:auto;background-color:var(--chk-a);background-image:conic-gradient(var(--chk-b) 25%, transparent 0 50%, var(--chk-b) 0 75%, transparent 0);background-size:12px 12px;display:block}.cv{line-height:0;position:relative}.sl{touch-action:none;position:absolute;inset:0}.sl.on,.stage.slicing{cursor:crosshair}#stage{touch-action:pan-y}#stage.slicing{touch-action:none}.sr{box-sizing:border-box;border:1px solid var(--accent);background:color-mix(in srgb, var(--accent) 10%, transparent);cursor:move;position:absolute}.sr.off{background:0 0;border-style:dashed}.sr.sel{background:color-mix(in srgb, var(--accent) 18%, transparent);border-width:2px}.sr>b{background:var(--accent);color:var(--on-accent);font:500 10px/16px var(--sans);white-space:nowrap;pointer-events:none;text-overflow:ellipsis;box-sizing:border-box;max-width:100%;padding:0 4px;position:absolute;top:-1px;left:-1px;overflow:hidden}.sl.round .sr:before{content:"";background:var(--bg);opacity:.85;pointer-events:none;position:absolute;inset:0;-webkit-mask:radial-gradient(circle closest-side,#0000 calc(100% - .5px),#000 100%);mask:radial-gradient(circle closest-side,#0000 calc(100% - .5px),#000 100%)}.ct{pointer-events:none;width:11px;height:11px;margin:-5px 0 0 -5px;position:absolute;top:50%;left:50%}.ct:before,.ct:after{content:"";background:var(--accent);position:absolute}.ct:before{width:1px;height:11px;top:0;left:5px}.ct:after{width:11px;height:1px;top:5px;left:0}.stage canvas.sg{pointer-events:none;background:0 0;position:absolute}.hd{box-sizing:border-box;background:var(--panel);border:1.5px solid var(--accent);width:9px;height:9px;margin:-5px 0 0 -5px;position:absolute}.slist{flex:1;padding:4px 0;overflow:auto}.slist .row{height:30px;padding-left:12px}.slist .empty{color:var(--muted);padding:12px}.sprops{border-top:1px solid var(--line);flex:none;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 12px;display:grid}.sprops .g{grid-template-columns:16px 1fr 16px 1fr;align-items:center;gap:6px 8px;display:grid}.sprops .g span{color:var(--muted)}.sprops input{background:var(--field);border:1px solid var(--line);box-sizing:border-box;min-width:0;height:24px;color:var(--fg);border-radius:5px;padding:0 6px}.sprops input.n{font-family:var(--mono);text-align:right;font-size:11px}.sprops input:focus{border-color:var(--accent);outline:none}.sprops .r{align-items:center;gap:8px;display:flex}.sprops .r input{flex:1;min-width:0}.sprops .g input{width:100%}.ph .seg{flex:none;margin-right:auto}.ph .seg button{padding-left:8px;padding-right:8px}.ph>span{flex:none;align-items:center;gap:2px;display:flex}.seg button,.link,.tag{white-space:nowrap}.dual{display:inline-grid}.dual>*{grid-area:1/1}.dual>:last-child{visibility:hidden}button .dual>*{justify-self:center}.pickb .dual>*{justify-self:start}.drop{border:2px dashed var(--accent);color:var(--accent);background:color-mix(in srgb, var(--bg) 85%, transparent);border-radius:10px;place-items:center;font-weight:600;display:grid;position:absolute;inset:12px}.warnbox{background:var(--panel);border:1px solid var(--warn);color:var(--warn);border-radius:6px;gap:2px;max-height:40%;padding:8px 10px;display:grid;position:absolute;top:12px;left:12px;right:12px;overflow:auto}.status{border-top:1px solid var(--line);background:var(--panel);height:29px;color:var(--muted);white-space:nowrap;flex:none;align-items:center;gap:12px;padding:0 12px;display:flex;overflow:hidden}.status #pvName{color:var(--fg);text-overflow:ellipsis;min-width:0;overflow:hidden}.status #gName{text-overflow:ellipsis;min-width:0;overflow:hidden}.status>:not(#gName):not(#pvName){flex:none}.insp{flex:0 auto;overflow:auto}.sec{border-bottom:1px solid var(--line);gap:10px;padding:12px;display:grid}.prop{grid-template-columns:64px auto 1fr;align-items:center;gap:8px;min-height:26px;display:grid}.prop>span:first-child{color:var(--muted);white-space:nowrap}.prop>:nth-child(2){justify-self:start}.prop.sw{display:grid}.prop.sw input{grid-column:2;justify-self:start}.unit{color:var(--muted);align-items:center;gap:4px;display:inline-flex}.prop input.n,.prop input.t,.prop select{background:var(--field);border:1px solid var(--line);box-sizing:border-box;height:24px;color:var(--fg);border-radius:5px;padding:0 6px}.prop input.n{width:64px;font-family:var(--mono);text-align:right;font-size:11px}.prop input.t{width:160px}.prop input:focus,.prop select:focus{border-color:var(--accent);outline:none}.prop.signrow{grid-template-columns:64px minmax(0,1fr) auto}.prop.signrow input.t{justify-self:stretch;width:100%;min-width:0}.gif .prop.signrow{grid-template-columns:80px minmax(0,1fr) auto}.gif .prop.signopt{grid-template-columns:minmax(0,1fr)}.gif .signopt>span:first-child{display:none}.signopt .unit{gap:6px}.signopt .seg button{padding:0 6px}.sumrow{justify-content:space-between;gap:8px;min-height:16px;display:flex}.act{justify-content:space-between;align-items:center;gap:8px;display:flex}.sec h3{color:var(--muted);margin:0;font-size:11px;font-weight:600}.seg{background:var(--field);border:1px solid var(--line);border-radius:6px;grid-auto-flow:column;justify-self:start;gap:2px;width:max-content;padding:2px;display:inline-grid}.seg button{cursor:pointer;height:21px;color:var(--muted);background:0 0;border:0;border-radius:4px;justify-content:center;align-items:center;padding:0 10px;line-height:1;display:inline-flex}.seg button:hover:not(:disabled){color:var(--fg)}.seg button:disabled{opacity:.5;cursor:default}.seg button[aria-pressed=true]{background:var(--panel);color:var(--fg);box-shadow:0 0 0 1px var(--line);font-weight:500}.prop.ps>.seg{justify-self:stretch;width:auto;display:flex}.prop.ps>.seg button{flex:auto;padding:0 4px}.kv{grid-template-columns:56px minmax(0,1fr);align-items:center;gap:8px;display:grid}@media (width>=1101px){#mode,#fmt,#size{grid-column:2/-1;justify-self:stretch;width:auto;display:flex}#mode button,#fmt button,#size button{flex:auto;padding:0 4px}.prop.ps{grid-template-columns:64px minmax(0,1fr)}.gif .prop.ps{grid-template-columns:80px minmax(0,1fr)}}.kv>span{color:var(--muted)}.kv input{background:var(--field);border:1px solid var(--line);box-sizing:border-box;border-radius:5px;width:100%;min-width:0;height:26px;padding:0 8px}.kv input:focus{border-color:var(--accent);outline:none}.sw{cursor:pointer;justify-content:space-between;align-items:center;gap:8px;display:flex}.sw input{appearance:none;background:var(--line);cursor:pointer;border-radius:8px;flex:none;width:28px;height:16px;margin:0;transition:background .12s;position:relative}.sw input:after{content:"";background:var(--fg);border-radius:50%;width:12px;height:12px;transition:transform .12s;position:absolute;top:2px;left:2px}.sw input:checked{background:var(--accent)}.sw input:checked:after{background:var(--on-accent);transform:translate(12px)}.foot{flex:none;gap:8px;padding:12px;display:grid}.foot .btn.primary{height:27px;padding:0 16px}.act>.seg button{padding:0 7px}.gif{grid-area:2/1/-1/-1;grid-template-columns:minmax(0,1fr) 288px;min-height:0;display:none}.app.tool-gif .gif{display:grid}.app.tool-gif>.layers,.app.tool-gif>.center,.app.tool-gif>.inspector,.app.tool-gif .img-only,.app:not(.tool-gif) .gif-only{display:none!important}.bar-r{margin-left:auto}.gif .stage video,.gif .stage img{background-color:var(--chk-a);background-image:conic-gradient(var(--chk-b) 25%, transparent 0 50%, var(--chk-b) 0 75%, transparent 0);background-size:12px 12px;display:block}.add{color:var(--muted);pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:absolute;inset:0}.add svg{display:block}.stage.pick{cursor:pointer}.stage.pick:hover .add{color:var(--fg)}.add .coarse{display:none}@media (pointer:coarse){.add .fine{display:none}.add .coarse{display:inline}}.fi{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;overflow:hidden}#gStage.crop{touch-action:none;cursor:crosshair}#gCrop .sr{background:0 0}#gCrop .hd:after{content:"";position:absolute;inset:-8px}@media (pointer:coarse){#gCrop .hd:after{inset:-14px}}.tl{border-top:1px solid var(--line);background:var(--panel);flex:none;align-items:center;gap:8px;height:60px;padding:0 12px;display:flex}.tl .play{border:1px solid var(--line);background:var(--field);cursor:pointer;width:44px;height:44px;color:var(--fg);border-radius:6px;flex:none;place-items:center;padding:0;display:grid}.track{background:var(--field);cursor:pointer;touch-action:none;border-radius:4px;flex:1;height:44px;position:relative;overflow:hidden}.track canvas{width:100%;height:100%;position:absolute;inset:0}.track .dim{background:var(--bg);opacity:.7;pointer-events:none;position:absolute;top:0;bottom:0}.track .rng{box-sizing:border-box;border:2px solid var(--accent);pointer-events:none;border-left-width:8px;border-right-width:8px;border-radius:4px;position:absolute;top:0;bottom:0}.track .ph2{background:var(--fg);pointer-events:none;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0}.tl .num{color:var(--muted);white-space:nowrap}.gif>.center,.gif>.inspector{grid-area:auto;min-height:0}.gif .inspector{border-left:1px solid var(--line);display:flex}.gif .prop input.n{width:72px}.gif .prop{grid-template-columns:80px auto 1fr}.gif .prop select{max-width:176px}.gif .prop.use{grid-template-columns:minmax(0,1fr)}.gif .prop.use .seg{justify-self:stretch;width:auto;display:flex}.gif .prop.use .seg button{flex:auto;padding:0 6px}.prop .unit select{height:24px}.pick{display:inline-flex;position:relative}.pickb{box-sizing:border-box;background:var(--field);border:1px solid var(--line);min-width:72px;height:24px;color:var(--fg);cursor:pointer;border-radius:5px;justify-content:space-between;align-items:center;gap:8px;padding:0 7px 0 8px;line-height:1;display:inline-flex}.pickb svg{color:var(--muted);flex:none}.pickb[aria-expanded=true],.pickb:focus-visible{border-color:var(--accent);outline:none}.pickl{z-index:20;background:var(--field);border:1px solid var(--line);border-radius:6px;grid-template-columns:repeat(5,36px);gap:2px;padding:2px;display:grid;position:fixed}.pickl button{height:27px;color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:4px;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}.pickl button:hover{color:var(--fg)}.pickl button[aria-selected=true]{background:var(--panel);color:var(--fg);box-shadow:0 0 0 1px var(--line);font-weight:500}@media (width<=1100px){.gif{grid-template-rows:62vh auto;grid-template-columns:minmax(0,1fr)}.gif .inspector{border-left:0;border-top:1px solid var(--line)}.gif .insp .sec>.prop{grid-template-columns:auto minmax(0,1fr)}.gif .insp .sec>.prop>.unit{justify-self:stretch}.gif .insp .unit input.n{flex:1 1 0;width:0;min-width:64px}.gif .insp .prop.pair select{justify-self:stretch;width:100%;max-width:none}.gif .insp .prop.pair .unit>.pick,.gif .insp .prop.pair .unit>select{flex:1 1 0;min-width:0}.gif .insp .prop.pair .pickb{width:100%;min-width:0}.gif .insp .sec>.prop.pair[for=gTpl]{flex:1 1 0;min-width:0}.gif .insp .sec>.prop.pair[for=gTpl] select{min-width:0}.gif .insp .sec>#gFmtRow{flex:1 1 0;min-width:0}.gif #gHeadSec{grid-template-columns:auto minmax(0,1fr);column-gap:12px;display:grid}.gif #gHeadSec>.prop:not(#gRatioRow){grid-column:1}.gif #gHeadSec>#gRatioRow{grid-area:1/2/span 2;grid-template-columns:minmax(0,1fr);align-self:center}.gif #gHeadSec>#gRatioRow .seg{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row;justify-self:stretch;width:auto;display:grid}.gif #gHeadSec>#gRatioRow .seg button{padding:0 4px}}@media (width<=640px){.gif{grid-template-rows:56vh auto}.gif .insp .sec>.prop.pair .seg button{padding:0 7px}.gif #gHeadSec{grid-template-columns:minmax(0,1fr)}.gif #gHeadSec>#gRatioRow{grid-area:auto/1}.gif #gHeadSec>.prop.use{grid-template-columns:minmax(0,1fr)}.gif #gHeadSec>#gRatioRow .seg{grid-template-columns:repeat(7,minmax(0,1fr))}}@media (width<=1100px){html,body,#root{height:auto}.app{grid-template:"bar bar"44px"center layers"62vh"insp insp"/minmax(0,1fr) 260px;height:auto}.layers{min-height:0}.inspector{border-left:0;border-top:1px solid var(--line)}.insp{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.insp .sec:nth-child(2n){border-right:0}.insp .sec{border-right:1px solid var(--line)}.foot{border-top:1px solid var(--line)}.act{justify-content:flex-start;gap:12px}#stage{padding:0}#stage.slicing{z-index:1;overflow:visible}.insp .sec{flex-wrap:wrap;align-content:start;column-gap:16px;display:flex}.insp .sec>*{flex:1 0 100%}.insp .sec>.prop.pair{flex:auto;grid-template-columns:auto minmax(0,1fr)}.insp .sec>.prop.pair.sw{flex:none;grid-template-columns:auto auto}.insp .sec>.prop.pair>.seg{justify-self:stretch;width:auto;display:flex}.insp .sec>.prop.pair>.seg button{flex:auto}.insp .sec>.prop.pair.nl .seg button{padding:0 7px}#sizeRow,.prop.ps{order:1}#qualityRow{grid-template-columns:36px auto 1fr}.insp .sec>.prop.pair.fill{flex:1 1 0;grid-template-columns:auto minmax(0,1fr);min-width:0}.prop.pair.fill input.t{width:100%;min-width:0}.insp .sec>.prop.signrow{grid-template-columns:auto minmax(0,1fr) auto}.insp .sec>.prop.signopt{grid-template-columns:minmax(0,1fr)}.insp .signopt>span:first-child{display:none}}@media (width<=640px){.app{grid-template:"bar""center""layers""insp"/minmax(0,1fr)}.layers{border-left:0;border-bottom:1px solid var(--line)}.tree{max-height:300px}.fold{display:inline-flex}#stage{aspect-ratio:var(--ar,4 / 3);max-height:calc(100svh - var(--bar-h,44px) - 61px);flex:none}.app.folded .layers>:not(.ph){display:none}.app.folded .layers>.ph{border-bottom:0}.bar{flex-wrap:wrap;row-gap:8px;height:auto;padding-block:8px}.tabs{flex-basis:100%;order:3;height:32px}.tabs:empty{display:none}.insp{grid-template-columns:minmax(0,1fr)}.insp .sec{border-right:0}.insp .sec>.prop.pair.nl>span:first-child{display:none}.insp .sec>.prop.pair.nl{grid-template-columns:minmax(0,1fr)}.insp .sec{column-gap:12px}.act>.seg{flex:auto;width:auto;display:flex}.act>.seg button{flex:auto}.act>.btn{flex:1 1 0;justify-content:center}}.stage#stage.zoomed{touch-action:none;overflow:hidden}.stage#stage.zoomed:not(.slicing){cursor:grab}@media (prefers-reduced-motion:reduce){*{transition:none!important}}