:root{--surround:#0e0e0e;--chrome:#1a1a1a;--panel:#212121;--raised:#2a2a2a;--line:#333;--line-soft:#2b2b2b;--ink:#ededed;--ink-dim:#9a9a9a;--ink-faint:#6a6a6a;--sel:#6ba4e8;--danger:#d97066;--r:5px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}html,body{overscroll-behavior:none;height:100%;margin:0}body{background:var(--surround);color:var(--ink);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;touch-action:pan-x pan-y;font-family:IBM Plex Sans,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:13px;line-height:1.45;overflow:hidden}button,input,select,textarea{font-family:inherit;font-size:inherit;font-variant-numeric:tabular-nums;color:inherit}button{cursor:pointer;background:0 0;border:none}:focus-visible{outline:2px solid var(--sel);outline-offset:1px}#app,dialog{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}#app{grid-template-rows:auto minmax(0,1fr);height:100dvh;display:grid}header{background:var(--chrome);border-bottom:1px solid var(--line);align-items:center;gap:14px;height:46px;padding:0 12px;display:flex}.brand{letter-spacing:-.01em;align-items:center;gap:8px;padding-right:4px;font-weight:600;display:flex}.brand canvas{border-radius:3px;display:block}.spacer{flex:1}.grp{align-items:center;gap:6px;display:flex}.grp+.grp{border-left:1px solid var(--line-soft);padding-left:14px}label.field{color:var(--ink-dim);align-items:center;gap:5px;display:flex}.sm,.coarse,.ico{display:none}.ico{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.btn{background:var(--raised);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);white-space:nowrap;padding:5px 10px}.btn.primary{background:var(--sel);border-color:var(--sel);color:#08121d;font-weight:600}.btn.quiet{color:var(--ink-dim);background:0 0;border-color:#0000;padding:5px 7px}.btn[disabled]{opacity:.35;pointer-events:none}.btn.tog.on{background:var(--sel);border-color:var(--sel);color:#08121d;font-weight:600}@media (hover:hover){.btn:hover{background:#333}.btn.primary:hover{background:#7db2ee}.btn.quiet:hover{background:var(--raised);color:var(--ink)}.lay:hover{background:#262626}.lay .eye:hover{color:var(--ink);background:#3a3a3a}.del:hover{background:#3a2523}}input[type=text],input[type=number],select,textarea{border:1px solid var(--line);border-radius:var(--r);background:#171717;min-width:0;padding:4px 6px}textarea{resize:vertical;width:100%;min-height:54px;line-height:1.35}input[type=number]{width:64px}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=color]{border:1px solid var(--line);border-radius:var(--r);cursor:pointer;background:#171717;width:30px;height:26px;padding:2px}input[type=range]{appearance:none;background:0 0;width:100%;height:16px}input[type=range]::-webkit-slider-runnable-track{background:var(--line);border-radius:2px;height:2px}input[type=range]::-moz-range-track{background:var(--line);border-radius:2px;height:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ink);border-radius:50%;width:11px;height:11px;margin-top:-4.5px}input[type=range]::-moz-range-thumb{background:var(--ink);border:0;border-radius:50%;width:11px;height:11px}main{grid-template-columns:1fr 272px;min-height:0;display:grid}#stage{background:var(--surround);position:relative;overflow:hidden}#stage canvas{touch-action:none;width:100%;height:100%;display:block}#stage.panning canvas{cursor:grab}#stage.panning.down canvas{cursor:grabbing}#zoombar{border:1px solid var(--line);border-radius:var(--r);background:#1a1a1aeb;align-items:center;gap:2px;padding:3px;display:flex;position:absolute;bottom:10px;left:10px}#zoombar .val{text-align:center;min-width:48px;color:var(--ink-dim)}#hint{color:var(--ink-faint);border-radius:var(--r);pointer-events:none;background:#1a1a1acc;padding:3px 8px;position:absolute;bottom:10px;right:10px}#empty{text-align:center;pointer-events:none;place-content:center;justify-items:center;gap:14px;padding:20px;display:grid;position:absolute;inset:0}#empty canvas{border-radius:8px;box-shadow:0 8px 30px #00000080}#empty h1{margin:0;font-size:17px;font-weight:500}#empty p{color:var(--ink-dim);max-width:34ch;margin:0}#empty .row{pointer-events:auto;gap:8px;display:flex}#drop{border:2px dashed var(--sel);pointer-events:none;background:#6ba4e81a;place-content:center;font-weight:500;display:none;position:absolute;inset:0}#drop.on{display:grid}#cropBadge{text-align:center;color:#f0b357;border-radius:var(--r);pointer-events:none;background:#f0b35724;border:1px solid #f0b357;width:max-content;max-width:calc(100% - 20px);padding:4px 10px;display:none;position:absolute;top:10px;left:50%;transform:translate(-50%)}aside{background:var(--panel);border-left:1px solid var(--line);flex-direction:column;min-height:0;display:flex}.sechead{border-bottom:1px solid var(--line-soft);justify-content:space-between;align-items:center;gap:8px;padding:7px 8px 7px 10px;display:flex}.sechead h2{margin:0;font-size:13px;font-weight:600}.count{color:var(--ink-faint);margin-left:6px;font-weight:400}#layers{overscroll-behavior:contain;flex:1;min-height:120px;padding:6px;overflow-y:auto}#layers .none{color:var(--ink-faint);text-align:center;padding:14px 8px}.lay{border-radius:var(--r);cursor:grab;border:1px solid #0000;align-items:center;gap:8px;padding:5px;display:flex}.lay.on{border-color:var(--sel);background:#2c3846}.lay.ghost{opacity:.35}.lay.above{box-shadow:inset 0 2px 0 0 var(--sel)}.lay.below{box-shadow:inset 0 -2px 0 0 var(--sel)}.lay canvas{pointer-events:none;background:#111;border-radius:3px;flex:none}.lay .nm{text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:1;min-width:0;overflow:hidden}.lay.hid .nm{color:var(--ink-faint);text-decoration:line-through}.lay .eye{color:var(--ink-dim);border-radius:3px;padding:2px 4px;line-height:1}.lay .grip{color:var(--ink-faint);cursor:grab;touch-action:none;line-height:1;display:none}.lay.lift{z-index:1;background:#262626;position:relative;box-shadow:0 4px 14px #00000080}.lay.lift.on{background:#2c3846}#props{border-top:1px solid var(--line);overscroll-behavior:contain;max-height:58%;overflow-y:auto}#props .body,#props .cbody{flex-direction:column;gap:11px;padding:10px;display:flex}#props.empty .body,#props:not(.empty) .cbody{display:none}#props .cbody .k{width:76px}.row{align-items:center;gap:8px;display:flex}.row>span.k{color:var(--ink-dim);flex:none;width:54px}.grid2{grid-template-columns:1fr 1fr;gap:6px;display:grid}.num{color:var(--ink-dim);align-items:center;gap:5px;display:flex}.num input{flex:1;width:100%}.slider .top{color:var(--ink-dim);justify-content:space-between;display:flex}.quick{flex-wrap:wrap;gap:5px;display:flex}.quick .btn{padding:4px 8px}.rule{background:var(--line-soft);height:1px;margin:1px 0}.del{color:var(--danger);background:#2b1e1d;border-color:#4a2b28}.seg{border:1px solid var(--line);border-radius:var(--r);display:flex;overflow:hidden}.seg button{color:var(--ink-dim);background:#171717;flex:1;padding:5px 0}.seg button.on{background:var(--sel);color:#08121d;font-weight:600}#textProps{flex-direction:column;gap:11px;display:none}#textProps.on{display:flex}#imgOnly{display:contents}#imgOnly.off{display:none}dialog{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;width:min(340px,92vw);margin:auto;padding:0}dialog::backdrop{background:#0000008c}dialog .body{flex-direction:column;gap:12px;padding:14px;display:flex}dialog h2{margin:0;font-size:14px}dialog .acts{justify-content:flex-end;gap:8px;padding:0 14px 14px;display:flex}#exInfo.warn{color:#f0b357}#exInfo.err{color:var(--danger)}@media (width<=820px){header{scrollbar-width:none;overflow-x:auto}header::-webkit-scrollbar{display:none}.grp.opt,#hint{display:none}}@media (width<=820px) and (orientation:portrait){main{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:1fr}aside{border-left:none;border-top:1px solid var(--line);height:45dvh}#layers{flex:0 auto;min-height:0;max-height:36%}#props{flex:1 1 0;max-height:none}}@media (width<=820px) and (orientation:landscape){main{grid-template-columns:1fr 240px}}@media (width<=560px){header{gap:6px;padding:0 8px}.grp+.grp{border-left:none;padding-left:0}.spacer{display:none}.grp.hist{gap:0;margin-left:auto}.lg{display:none}.sm{display:inline}.ico{display:block}.btn{padding-left:9px;padding-right:9px}.btn.quiet{padding-left:8px;padding-right:8px}}@media (width<=440px){.brand .name{display:none}}@media (width<=340px){.brand{display:none}}@media (pointer:coarse){.fine{display:none}.coarse{display:inline}#hint{display:none}header{height:54px}.btn{min-height:40px}.btn.quiet{min-width:40px}.btn .ico{margin:auto}#zoombar .btn{min-width:40px}#zoombar .val{min-width:52px}input[type=text],input[type=number],select{min-height:38px}input[type=color]{width:44px;height:38px}input[type=range]{height:32px}input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-11px}input[type=range]::-moz-range-thumb{width:24px;height:24px}.seg button{min-height:38px}.lay{min-height:44px}.lay .eye{padding:10px 12px}.lay .grip{padding:10px 10px 10px 4px;font-size:16px;display:block}.quick .btn{padding:6px 12px}#app:has(#tText:focus) #zoombar{visibility:hidden}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}