:root{color-scheme:light;font-family:VT323,monospace;font-size:24px;font-synthesis:none;text-rendering:pixelated;letter-spacing:1.5px;--bg: #b5ccf0;--panel: #e3edf9;--panel-2: #d1e1f5;--surface: #c4daf5;--text: #1c3d75;--muted: #4e6f9f;--faint: #8caad4;--border: #7faeff;--accent: #598df7;--accent-2: #ffd54f;--danger: #ef5350;--shadow: 0 4px 0 rgba(28, 61, 117, .12);--btn-bg: #eef4fc;background:var(--bg);color:var(--text);image-rendering:pixelated}:root[data-theme=dark]{color-scheme:dark;--bg: #0b1220;--panel: #152238;--panel-2: #0d131f;--surface: #1f2e46;--text: #ffffff;--muted: #8da2c4;--faint: #5a6e85;--border: #4f86f7;--accent: #598df7;--accent-2: #ffd54f;--danger: #ef5350;--shadow: 0 4px 0 rgba(0, 0, 0, .4);--btn-bg: #1f2e46}*{box-sizing:border-box}html{height:100%;overflow:hidden}body{margin:0;min-width:320px;height:100vh;overflow:hidden;background:var(--bg)}button,input,select,textarea{font-family:VT323,monospace;font-size:24px;letter-spacing:1px;color:var(--text)}button{border:0}.app-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden;padding:12px;gap:12px}#root{height:100%}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--panel-2);border:2px solid var(--border)}::-webkit-scrollbar-thumb{background:var(--border);border:2px solid var(--panel-2)}::-webkit-scrollbar-thumb:hover{background:var(--accent)}.topbar{min-height:72px;flex-shrink:0;background:var(--panel);border:2px solid var(--border);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 16px;position:relative}.brand{display:flex;align-items:center;gap:12px;min-width:250px}.brand>svg{color:var(--accent)}.brand strong{display:block;font-size:32px;line-height:1.1;letter-spacing:.5px}.brand span{display:block;margin-top:2px;color:var(--muted);font-size:20px;letter-spacing:.5px}.toolbar,.tool-strip,.mini-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tool-strip{flex-wrap:wrap}.tolerance-control{display:inline-flex;align-items:center;gap:8px;font-size:22px;color:var(--muted);min-height:38px;border:2px solid var(--border);padding:0 10px;background:var(--panel-2)}.tolerance-control input[type=range]{width:80px}.tolerance-control output{min-width:22px;text-align:right;color:var(--text);font-weight:700}.danger-button{color:var(--danger)!important;border-color:var(--danger)!important}.danger-button:hover{background:color-mix(in srgb,var(--danger) 15%,#ffffff)!important}.icon-button,.primary-button,.secondary-button,.text-button,.toggle,.segmented button{min-height:38px;padding:4px 12px;border:2px solid var(--border);background:var(--btn-bg);color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 3px 0 var(--border);transform:translateY(0);transition:all 80ms ease;-webkit-user-select:none;user-select:none;font-size:24px;font-weight:700}.icon-button{width:38px;height:38px;padding:0}.primary-button{background:var(--accent);color:#fff;border-color:var(--text);box-shadow:0 3px 0 var(--text)}.secondary-button{background:var(--surface);border-color:var(--border)}.text-button{min-height:30px;padding:0 8px;color:var(--accent);background:transparent;border:none;box-shadow:none}.wide{width:100%}.icon-button:hover,.primary-button:hover,.secondary-button:hover,.text-button:hover,.toggle:hover,.segmented button:hover{border-color:var(--text);color:var(--text);background:var(--panel-2)}.primary-button:hover{background:color-mix(in srgb,var(--accent) 85%,#000)}.icon-button:active,.primary-button:active,.secondary-button:active,.toggle:active,.segmented button:active{transform:translateY(3px);box-shadow:none}button:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.toggle.is-on,.tool-button.is-active,.segmented button.is-active{background:var(--accent)!important;border-color:var(--text)!important;color:#fff!important;box-shadow:0 2px 0 var(--text)!important}.segmented button.is-active{box-shadow:none!important}.simple-layout{width:100%;margin:0 auto;display:grid;grid-template-columns:310px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:12px;flex:1;min-height:0}.advanced-layout{display:grid;grid-template-columns:300px minmax(0,1fr) 330px;grid-template-rows:minmax(0,1fr);gap:12px;flex:1;min-height:0}.simple-card,.panel,.canvas-panel{background:var(--panel);border:2px solid var(--border);box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative}.simple-card,.panel{padding:14px;overflow-y:auto}.result-card{min-height:0;display:flex;flex-direction:column;overflow:hidden}.canvas-panel{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}.section-title{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:var(--text);font-size:28px;font-weight:700;letter-spacing:.5px;border-bottom:2px dashed var(--border);padding-bottom:6px}.pixel-panel{position:relative}.corner-dec{position:absolute;width:6px;height:6px;background:var(--bg);border:2px solid var(--border);z-index:10;pointer-events:none}.corner-dec.tl{top:-4px;left:-4px}.corner-dec.tr{top:-4px;right:-4px}.corner-dec.bl{bottom:-4px;left:-4px}.corner-dec.br{bottom:-4px;right:-4px}.drop-zone{height:220px;border:2px dashed var(--border);background-color:var(--panel-2);background-image:linear-gradient(45deg,var(--panel) 25%,transparent 25%),linear-gradient(-45deg,var(--panel) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--panel) 75%),linear-gradient(-45deg,transparent 75%,var(--panel) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;position:relative;transition:border-color .2s}.left-panel .drop-zone{height:200px}.drop-zone.is-dragging{border-color:var(--accent);background-color:var(--surface)}.drop-zone input{display:none}.drop-zone img{max-width:90%;max-height:90%;width:auto;height:auto;object-fit:contain;image-rendering:pixelated;border:2px solid var(--border)}.drop-empty,.empty-result{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);text-align:center;padding:12px}.drop-empty strong,.empty-result strong{color:var(--text);font-size:28px}.drop-empty span,.empty-result span{font-size:20px}.canvas-stage{min-height:0;flex:1;display:flex;flex-direction:column;gap:12px;padding:12px;position:relative}.canvas-stage.has-compare{flex-direction:row}.simple-layout .canvas-stage{min-height:380px}.compare-source{width:180px;flex-shrink:0;border:2px solid var(--border);background:var(--panel-2);overflow:hidden;display:flex;align-items:center;justify-content:center}.compare-source img{max-width:90%;max-height:90%;width:auto;height:auto;object-fit:contain;image-rendering:pixelated}.output-frame{flex:1;min-height:0;border:2px solid var(--border);background-color:var(--panel);background-image:linear-gradient(45deg,var(--panel-2) 25%,transparent 25%),linear-gradient(-45deg,var(--panel-2) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--panel-2) 75%),linear-gradient(-45deg,transparent 75%,var(--panel-2) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;overflow:hidden;contain:layout style;overscroll-behavior:none;position:relative}.output-frame.is-panning{cursor:grabbing;-webkit-user-select:none;user-select:none}.output-frame.with-grid canvas{background-image:linear-gradient(color-mix(in srgb,var(--accent) 25%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 25%,transparent) 1px,transparent 1px);background-size:calc(var(--zoom) * 1px) calc(var(--zoom) * 1px)}.output-frame canvas{position:absolute;top:0;left:0;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair}canvas{image-rendering:pixelated;image-rendering:crisp-edges}.minimap-canvas{position:absolute;bottom:16px;right:16px;border:2px solid var(--border);background:var(--panel);box-shadow:var(--shadow);pointer-events:none;z-index:2;image-rendering:pixelated}.simple-controls{display:grid;grid-template-columns:1fr 1fr 160px;gap:12px;align-items:end;padding:12px;border-top:2px dashed var(--border)}.canvas-bar{min-height:52px;border-bottom:2px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;background:var(--panel-2)}.zoom-control{min-height:38px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:24px;border:2px solid var(--border);padding:0 10px;background:var(--panel)}.zoom-control input{width:100px}.palette-strip{min-height:60px;border-top:2px solid var(--border);display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--panel-2)}.palette-strip input[type=color]{width:36px;height:36px;padding:0;border:2px solid var(--border);background:var(--panel);cursor:pointer}.swatches{display:flex;gap:6px;flex-wrap:wrap}.swatches button,.swatch-transparent{width:24px;height:24px;border:2px solid var(--border);cursor:pointer;box-shadow:0 2px #0000001a}.swatches button.is-active,.swatch-transparent.is-active{outline:2px solid var(--text);outline-offset:1px;transform:scale(1.1)}.swatch-transparent{flex-shrink:0;background-color:var(--panel);background-image:linear-gradient(45deg,#efefef 25%,transparent 25%),linear-gradient(-45deg,#efefef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#efefef 75%),linear-gradient(-45deg,transparent 75%,#efefef 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px}.control-group{display:grid;gap:10px}.slider-row,.select-row{display:grid;grid-template-columns:minmax(110px,1fr) minmax(100px,1.2fr) 40px;align-items:center;gap:8px;color:var(--muted);font-size:24px;font-weight:700}.select-row{grid-template-columns:1fr 140px}.slider-row output{color:var(--text);text-align:right;font-weight:700}input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background:var(--surface);border:2px solid var(--border);height:10px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:var(--panel);border:2px solid var(--accent);height:18px;width:18px;margin-top:-6px;box-shadow:0 2px #0000001a;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{background-color:var(--accent);border-color:var(--text)}select{min-height:34px;border:2px solid var(--border);background:var(--panel);color:var(--text);padding:0 8px;font-weight:700;cursor:pointer}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--panel-2);border:2px solid var(--border);padding:3px}.segmented button{font-size:24px;min-height:34px;border:none;box-shadow:none!important;background:transparent}.metadata,.warnings,.error{margin-top:10px;display:grid;gap:4px;font-size:22px;color:var(--muted);border-top:2px dashed var(--border);padding-top:8px}.warnings,.error{padding:8px;border:2px solid var(--accent-2);background:color-mix(in srgb,var(--accent-2) 10%,var(--panel))}.error{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--panel));color:var(--danger)}.status-dot{color:var(--accent);font-size:22px}.wizard-box{display:flex;align-items:flex-end;gap:8px;margin-top:16px}.wizard-bubble{position:relative;background:var(--panel-2);border:2px solid var(--border);padding:8px 12px;font-size:22px;line-height:1.3;flex:1}.wizard-bubble:after,.wizard-bubble:before{content:"";position:absolute;left:-10px;bottom:12px;border-style:solid;border-width:6px 10px 6px 0;border-color:transparent var(--panel-2) transparent transparent;display:block;width:0;z-index:1}.wizard-bubble:before{left:-12px;border-color:transparent var(--border) transparent transparent;z-index:0}.footer-waves{height:48px;background:var(--panel);border:2px solid var(--border);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:0 16px}.footer-waves-bg{position:absolute;inset:0;z-index:1;pointer-events:none}.footer-text{position:relative;z-index:2;font-size:26px;font-weight:700;letter-spacing:1px}.export-chest-container{display:flex;flex-direction:column;align-items:center;margin-top:12px;position:relative}.export-chest-img{width:80px;height:80px;margin-top:-12px;image-rendering:pixelated}@media(max-width:1100px){.advanced-layout,.simple-layout{grid-template-columns:1fr;overflow-y:auto}.topbar{align-items:center;flex-direction:column;gap:12px}.toolbar{width:100%;justify-content:center}.canvas-stage{flex-direction:column}.compare-source{width:100%;min-height:180px}.app-shell{overflow-y:auto}}@media(max-width:680px){.simple-layout,.advanced-layout{padding:6px}.simple-controls{grid-template-columns:1fr}.toolbar{gap:6px}.toggle span,.secondary-button{font-size:22px}}.topbar-tabs{display:flex;align-items:center;gap:8px}.topbar-tab-button{min-height:38px;padding:0 16px;background:var(--panel-2);border:2px solid var(--border);color:var(--text);font-family:VT323,monospace;font-weight:700;font-size:24px;letter-spacing:1.5px;cursor:pointer;box-shadow:0 3px 0 var(--border);display:flex;align-items:center;gap:6px;transition:all 80ms ease;-webkit-user-select:none;user-select:none}.topbar-tab-button:hover{background:var(--surface);border-color:var(--text)}.topbar-tab-button:active{transform:translateY(2px);box-shadow:none}.topbar-tab-button.is-active{background:var(--accent)!important;border-color:var(--text)!important;color:#fff!important;box-shadow:0 2px 0 var(--text)!important}.sprite-layout{display:grid;grid-template-columns:310px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:12px;flex:1;min-height:0;width:100%}.sprite-preview-container{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--panel-2);border:2px solid var(--border);padding:16px;position:relative;min-height:250px;flex-shrink:0}.sprite-preview-screen{width:160px;height:160px;background:var(--panel);border:4px solid var(--text);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.sprite-preview-screen canvas{max-width:90%;max-height:90%;object-fit:contain;image-rendering:pixelated}.sprite-playback-controls{display:flex;gap:8px;margin-top:12px;align-items:center}.frames-grid-container{flex:1;display:flex;flex-direction:column;min-height:0;border-top:2px dashed var(--border);padding-top:12px;margin-top:12px}.frames-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;overflow-y:auto;flex:1;padding:4px}.frame-thumbnail{aspect-ratio:1;border:2px solid var(--border);background:var(--panel-2);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:all 80ms ease}.frame-thumbnail:hover{border-color:var(--text);background:var(--surface)}.frame-thumbnail.is-active{border-color:var(--text)!important;background:var(--accent)!important}.frame-thumbnail img{max-width:90%;max-height:90%;image-rendering:pixelated;object-fit:contain}.frame-number{position:absolute;bottom:2px;right:4px;font-size:14px;font-weight:700;color:var(--muted);pointer-events:none}.pack-files-list{display:flex;flex-wrap:wrap;gap:8px;max-height:150px;overflow-y:auto;padding:8px;border:2px dashed var(--border);background:var(--panel-2);margin-top:8px}.pack-file-chip{display:flex;align-items:center;gap:6px;background:var(--panel);border:2px solid var(--border);padding:2px 8px;font-size:18px;font-weight:700;color:var(--text)}.pack-file-chip button{background:transparent;color:var(--danger);border:none;cursor:pointer;padding:0;font-size:18px;font-weight:700;display:flex;align-items:center}.pack-file-chip button:hover{color:#ff1a1a}