[data-theme=slicer]{color-scheme:dark;--color-base-100:#23262f;--color-base-200:#1d1f25;--color-base-300:#17181c;--color-base-content:#edeef3;--color-primary:#b3c7ff;--color-primary-content:#17264f;--color-secondary:#eebd53;--color-secondary-content:#4e4022;--color-accent:#ee5389;--color-accent-content:#4e2232;--color-neutral:#353841;--color-neutral-content:#edeef3;--color-info:#3347ff;--color-info-content:#fff;--color-success:#84ee53;--color-success-content:#304e22;--color-warning:#eebd53;--color-warning-content:#4e4022;--color-error:#ee5389;--color-error-content:#4e2232;--radius-selector:.25rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:0;--noise:0}[data-theme=slicer-light]{color-scheme:light;--color-base-100:#fff;--color-base-200:#f6f7f9;--color-base-300:#edeef3;--color-base-content:#17181c;--color-primary:#3d50f5;--color-primary-content:#fff;--color-secondary:#f5bb3d;--color-secondary-content:#73520d;--color-accent:#f53d7d;--color-accent-content:#fff;--color-neutral:#23262f;--color-neutral-content:#edeef3;--color-info:#3d50f5;--color-info-content:#fff;--color-success:#4fdf0c;--color-success-content:#28650b;--color-warning:#f5bb3d;--color-warning-content:#73520d;--color-error:#f53d7d;--color-error-content:#fff;--radius-selector:.25rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:0;--noise:0}:root{--line:color-mix(in oklab, var(--color-base-content) 10%, transparent);--muted:color-mix(in oklab, var(--color-base-content) 60%, transparent);--sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;--mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}[hidden]{display:none!important}html,body{height:100%}body{background:var(--color-base-300);color:var(--color-base-content);font:14px / 1.45 var(--sans);margin:0}h1,h2,h3,p{margin:0}.icon-sprite{width:0;height:0;position:absolute;overflow:hidden}.icon{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:1.1em;height:1.1em}.icon-sm{width:.85em;height:.85em}.app{grid-template-rows:minmax(0,1fr) auto;height:100vh;display:grid}.app-bar{background:var(--color-base-100);border-top:1px solid var(--line);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;min-height:3rem;padding:.4rem .75rem;display:grid}.brand-mark{color:var(--color-primary);place-items:center;margin-left:.25rem;display:grid}.brand-mark svg{fill:currentColor;width:32px;height:32px;display:block}.brand-mark .blush{fill:#f472b6}.snip-frame{visibility:hidden}.snip-open{visibility:visible}@media (prefers-reduced-motion:no-preference){.brand-mark:hover .snip-open{animation:1s step-end infinite snip-open}.brand-mark:hover .snip-mid{animation:1s step-end infinite snip-mid}.brand-mark:hover .snip-shut{animation:1s step-end infinite snip-shut}}@keyframes snip-open{0%{visibility:visible}40%,to{visibility:hidden}}@keyframes snip-mid{0%,50%{visibility:hidden}40%,90%,to{visibility:visible}}@keyframes snip-shut{0%,90%,to{visibility:hidden}50%{visibility:visible}}.app-bar-tools{flex-wrap:wrap;grid-column:2;justify-content:center;align-items:center;gap:.5rem;display:flex}.app-bar-end{grid-column:3;justify-content:flex-end;align-items:center;gap:.25rem;display:flex}.canvas-tools{align-items:center;gap:.5rem;display:flex}.zoom-menu>summary{font-variant-numeric:tabular-nums;border-radius:0;min-width:4.75rem}.zoom-menu .dropdown-content,.help-card{z-index:30;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--color-base-100);margin-bottom:.35rem;box-shadow:0 12px 32px oklch(0% 0 0/.3)}.zoom-menu .dropdown-content{width:10rem}.help-card{width:24rem;padding:1rem}.help-card h2{letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;font-size:.8rem;font-weight:700}.help-card dl{grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:0;font-size:.8rem;display:grid}.help-card dt{white-space:nowrap;font-weight:600}.help-card dd{color:var(--muted);margin:0}.app-main{grid-template-columns:280px minmax(320px,1fr) 330px;min-height:0;display:grid}.panel{background:var(--color-base-200);border-right:1px solid var(--line);flex-direction:column;gap:.75rem;min-width:0;min-height:0;padding:.75rem;display:flex;overflow:auto}#rightPanel{border-right:0;border-left:1px solid var(--line)}.app-main:has(#canvasWrap[hidden]){grid-template-columns:minmax(0,1fr)}.app-main:has(#canvasWrap[hidden])>.panel{display:none}.panel-card{background:var(--color-base-100);border:1px solid var(--line);flex:none}.panel-card .card-body{gap:.5rem;padding:.9rem}.panel-card .card-title{letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-size:.72rem;font-weight:700}.mode-toggle{margin:.15rem 0 .25rem;display:flex}.mode-toggle .btn{flex:1}.fieldset{padding:.15rem 0;position:relative}.fieldset-legend{justify-content:flex-start;gap:.3rem;padding-block:.35rem}.fieldset-legend output{font-variant-numeric:tabular-nums;margin-left:auto}.panel .input,.panel .select{width:100%}.pair{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.help-tip{color:color-mix(in oklab, var(--color-base-content) 45%, transparent);cursor:help;background:0 0;border:0;place-items:center;padding:0;font-size:.8rem;display:inline-grid}.help-tip:hover,.help-tip:focus-visible{color:var(--color-primary)}.hint{z-index:10;border-radius:var(--radius-field);background:var(--color-neutral);color:var(--color-neutral-content);visibility:hidden;opacity:0;pointer-events:none;padding:.5rem .65rem;font-size:.75rem;font-weight:400;line-height:1.4;transition:opacity .12s;position:absolute;top:2rem;left:0;right:0;box-shadow:0 8px 24px oklch(0% 0 0/.3)}.help-tip:hover+.hint,.help-tip:focus-visible+.hint{visibility:visible;opacity:1}.divider{margin:.25rem 0}.background-row{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.sample-hint{color:var(--color-primary);font-size:.75rem}.swatch{border:1px solid var(--line);border-radius:var(--radius-field);background:var(--color-base-200);cursor:pointer;flex:none;width:2rem;height:2rem;padding:2px}.swatch:disabled{opacity:.35;cursor:not-allowed}.check{color:var(--color-base-content);cursor:pointer;gap:.4rem;font-size:.8rem}.background-row .check{margin-left:.25rem}.slice-action{margin-top:.5rem}.workspace{background-color:var(--color-base-300);background-image:radial-gradient(circle, color-mix(in oklab, var(--color-base-content) 14%, transparent) 1px, transparent 1.2px);background-size:18px 18px;min-width:0;position:relative;overflow:hidden}.workspace.dragging{box-shadow:inset 0 0 0 3px var(--color-primary)}.empty{place-items:center;height:100%;display:grid}.upload-drop{border:2px dashed color-mix(in oklab, var(--color-base-content) 20%, transparent);border-radius:var(--radius-box);background:color-mix(in oklab, var(--color-base-100) 75%, transparent);width:min(28rem,100% - 3rem);color:var(--muted);text-align:center;cursor:pointer;justify-items:center;gap:.4rem;padding:2.75rem 2rem;transition:border-color .12s,background .12s;display:grid}.upload-drop strong{color:var(--color-base-content);font-size:1.05rem}.upload-drop:hover,.upload-drop.dragging{border-color:var(--color-primary);background:color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100))}.upload-icon{background:color-mix(in oklab, var(--color-primary) 16%, transparent);width:3.5rem;height:3.5rem;color:var(--color-primary);border-radius:50%;place-items:center;margin-bottom:.4rem;font-size:1.5rem;display:grid}.upload-drop .badge{margin-top:.5rem}.upload-drop input{display:none}#canvasWrap:not([hidden]){cursor:crosshair;width:100%;height:100%;position:relative;overflow:hidden}#canvas{transform-origin:0 0;image-rendering:pixelated;display:block}.pixel-cursor{pointer-events:none;filter:drop-shadow(1px 0 #000)drop-shadow(-1px 0 #000)drop-shadow(0 1px #000)drop-shadow(0 -1px #000);position:absolute;top:0;left:0}.pixel-cursor span{border:0 solid #fff;width:5px;height:5px;position:absolute}.pixel-cursor .top-left{border-bottom-width:1px;border-right-width:1px;bottom:100%;right:100%}.pixel-cursor .top-right{border-bottom-width:1px;border-left-width:1px;bottom:100%;left:100%}.pixel-cursor .bottom-left{border-top-width:1px;border-right-width:1px;top:100%;right:100%}.pixel-cursor .bottom-right{border-top-width:1px;border-left-width:1px;top:100%;left:100%}.canvas-status{min-width:0;color:var(--muted);font:12px / 1.4 var(--mono);font-variant-numeric:tabular-nums;white-space:pre;gap:1rem;display:flex;overflow:hidden}.image-size{color:var(--muted);font:12px / 1.4 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;margin-right:.5rem}.canvas-status-box{color:var(--color-primary)}#previewCanvas{border:1px solid var(--line);border-radius:var(--radius-field);background-color:var(--color-base-200);background-image:conic-gradient(var(--color-base-300) 25%, transparent 0 50%, var(--color-base-300) 0 75%, transparent 0);width:100%;height:180px;image-rendering:pixelated;background-size:16px 16px;display:block}.preview-footer{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.preview-status{min-width:0;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;overflow:hidden}.panel .fps{flex:none;width:7rem}.group-actions{gap:.5rem;display:flex}.group-actions .select{flex:1;min-width:0}.groups{gap:.5rem;min-width:0;display:grid}.group{border:1px solid var(--line);border-radius:var(--radius-field);background:color-mix(in oklab, var(--color-base-200) 60%, transparent);min-width:0;overflow:hidden}.group-head{background:var(--color-base-200);align-items:center;gap:.1rem;padding:.25rem;display:flex}.group-name{flex:1;min-width:0;font-weight:650}.group-head .badge{font-variant-numeric:tabular-nums;margin:0 .25rem}.group ul{min-height:2rem;margin:0;padding:.25rem;list-style:none}.group ul:empty:before{color:var(--muted);content:"Drop sprites here";padding:.3rem .5rem;font-size:.75rem;display:block}.group ul.dragover{outline:2px dashed var(--color-primary);outline-offset:-3px;background:color-mix(in oklab, var(--color-primary) 8%, transparent)}.sprite{border-radius:calc(var(--radius-field) - 2px);font:12px / 1.6 var(--mono);cursor:pointer;align-items:center;gap:.4rem;padding:.1rem .25rem .1rem .4rem;display:flex}.sprite:hover{background:color-mix(in oklab, var(--color-base-content) 6%, transparent)}.sprite.selected{background:color-mix(in oklab, var(--color-primary) 16%, transparent);box-shadow:inset 2px 0 0 var(--color-primary)}.sprite .drag{color:var(--muted);cursor:grab}.sprite-label{white-space:pre;flex:1;min-width:0}.sprite .remove{opacity:0}.sprite:hover .remove,.sprite.selected .remove,.sprite .remove:focus-visible{opacity:1}.export{width:100%;height:11rem;font:12px / 1.5 var(--mono);resize:vertical}.export-actions{gap:.5rem;display:flex}.export-actions .btn{flex:1}.modal-title{font-size:1.1rem;font-weight:700}.modal-box p{color:var(--muted);margin-top:.5rem}.toast{z-index:50;margin-bottom:3rem}@media (width<=1150px){.app-main{grid-template-columns:250px minmax(280px,1fr) 290px}}