:root{font-family:IBM Plex Sans,Segoe UI,sans-serif;color:#1f2937;background:#f3f6f8;--text: #1f2937;--heading: #0f172a;--muted: #334155;--page-bg: radial-gradient(circle at top left, #ffffff 0%, #eaf1f5 55%, #d9e5ed 100%);--panel-border: #c9d6df;--panel-bg: #f8fcffcc;--input-border: #9fb7c8;--input-bg: #ffffff;--input-text: #1f2937;--focus: #93c5fd;--file-btn-border: #8da4b4;--file-btn-bg: #eef4f8;--file-btn-text: #1f2937;--disabled-text: #64748b;--disabled-bg: #eef4f8;--disabled-border: #c9d6df;--preview-border: #8da4b4;--preview-pattern-a: rgba(156, 172, 185, .22);--preview-pattern-b: rgba(156, 172, 185, .12)}@media (prefers-color-scheme: dark){:root{color:#e2e8f0;background:#0b1221;--text: #e2e8f0;--heading: #f8fafc;--muted: #cbd5e1;--page-bg: radial-gradient(circle at top left, #1e293b 0%, #0f172a 55%, #020617 100%);--panel-border: #334155;--panel-bg: rgba(15, 23, 42, .82);--input-border: #475569;--input-bg: #0f172a;--input-text: #e2e8f0;--focus: #38bdf8;--file-btn-border: #64748b;--file-btn-bg: #1e293b;--file-btn-text: #e2e8f0;--disabled-text: #94a3b8;--disabled-bg: #111827;--disabled-border: #374151;--preview-border: #64748b;--preview-pattern-a: rgba(100, 116, 139, .25);--preview-pattern-b: rgba(100, 116, 139, .12)}}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;min-height:100%}body{color:var(--text);background:var(--page-bg)}.layout{min-height:100vh;display:grid;gap:16px;grid-template-columns:minmax(380px,520px) 1fr;grid-template-rows:1fr auto;padding:16px}.controls,.preview{border:1px solid var(--panel-border);border-radius:12px;background:var(--panel-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:16px}h1,h2{margin-top:0;margin-bottom:8px;color:var(--heading)}.preview-subtitle{margin-top:24px;font-size:1.1rem}p{margin-top:0;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{display:grid;grid-template-columns:minmax(0,1fr) minmax(96px,120px);align-items:center;gap:10px;font-size:.95rem;color:var(--text);min-width:0}.field>span{min-width:0;white-space:nowrap}input[type=number],input[type=file]{width:100%;min-width:0;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);border-radius:8px;padding:10px;font-size:.95rem}.field input[type=number]{width:100%;min-width:0}input[type=number]:focus,input[type=file]:focus{outline:2px solid var(--focus);outline-offset:1px}input[type=file]::file-selector-button{border:1px solid var(--file-btn-border);border-radius:6px;padding:5px 10px;margin-right:10px;background:var(--file-btn-bg);color:var(--file-btn-text);cursor:pointer}input[type=number]:disabled{color:var(--disabled-text);background:var(--disabled-bg);border-color:var(--disabled-border);cursor:not-allowed}.file-input small{color:var(--muted)}.controls .file-input+.file-input{margin-top:14px}.file-input{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center;row-gap:8px;column-gap:10px}.file-input>span{grid-column:1}.file-input>.file-picker,.file-input>.json-download,.file-input>.file-error,.file-input>.file-status,.file-input>.sprite-download-actions{grid-column:2}.sprite-download-actions{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sprite-download-actions .json-download{margin-bottom:0}.file-input-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.file-picker{display:flex;align-items:center;gap:10px;min-width:0}.file-picker-button{display:inline-flex;align-items:center;border:1px solid var(--file-btn-border);border-radius:6px;padding:8px 12px;background:var(--file-btn-bg);color:var(--file-btn-text);cursor:pointer;font-size:.95rem;line-height:1;white-space:nowrap}.file-picker-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.json-download{justify-self:start;margin-top:0;margin-bottom:12px;border:1px solid var(--file-btn-border);border-radius:8px;padding:10px 12px;background:var(--file-btn-bg);color:var(--file-btn-text);font-size:.95rem;font-weight:600;cursor:pointer}.json-download:focus{outline:2px solid var(--focus);outline-offset:1px}.json-download:disabled{color:var(--disabled-text);background:var(--disabled-bg);border-color:var(--disabled-border);cursor:not-allowed}.file-error{margin:0 0 12px;color:#b91c1c}.file-status{margin:0 0 12px;color:var(--muted)}.preview{display:grid;justify-items:start;align-content:start}.preview-stage{display:grid;place-items:center;border:1px dashed var(--preview-border);border-radius:10px;background:repeating-linear-gradient(45deg,var(--preview-pattern-a),var(--preview-pattern-a) 12px,var(--preview-pattern-b) 12px,var(--preview-pattern-b) 24px);overflow:hidden}.preview-resizable{position:relative;min-width:32px;min-height:32px}.preview-stage canvas{image-rendering:pixelated}.preview-resizer{position:absolute;border:0;padding:0;background:transparent;touch-action:none}.preview-resizer:focus-visible{outline:2px solid var(--focus);outline-offset:1px}.preview-resizer-right{top:0;right:-5px;width:10px;height:100%;cursor:ew-resize}.preview-resizer-bottom{left:0;bottom:-5px;width:100%;height:10px;cursor:ns-resize}.preview-resizer-corner{right:-7px;bottom:-7px;width:16px;height:16px;border:1px solid var(--preview-border);border-radius:4px;background:color-mix(in srgb,var(--panel-bg) 80%,transparent);cursor:nwse-resize}.project-badge{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:flex-end;border:1px solid var(--panel-border);border-radius:12px;background:var(--panel-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.02em;padding:10px 14px}.project-status{min-height:1em}@media (max-width: 960px){.layout{grid-template-columns:1fr;grid-template-rows:auto auto auto}.grid{grid-template-columns:1fr}}