@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";:root{--bg: #1a1a1a;--panel: #3c3c3c;--panel-hi: #4e4e4e;--panel-lo: #1e1e1e;--slot: #1c1c1c;--slot-hi: #484848;--slot-lo: #111111;--green: #55ff55;--green-dim: #256325;--green-lo: rgba(85,255,85,.07);--gold: #ffaa00;--gold-dim: #7a4e00;--gold-lo: rgba(255,170,0,.07);--blue: #55ffff;--text: #cccccc;--text-hi: #ffffff;--text-lo: #777777;--pixel: "Press Start 2P", monospace;--ui: system-ui, -apple-system, sans-serif;--bevel-out: inset -3px -4px 0 var(--panel-lo), inset 3px 3px 0 var(--panel-hi);--bevel-in: inset 3px 4px 0 var(--panel-lo), inset -3px -3px 0 var(--panel-hi);--slot-in: inset 2px 2px 0 var(--slot-lo), inset -2px -2px 0 var(--slot-hi)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.12) 3px,rgba(0,0,0,.12) 4px),repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(0,0,0,.07) 3px,rgba(0,0,0,.07) 4px);background-size:4px 4px;min-height:100vh;color:var(--text);font-family:var(--ui);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;display:flex;justify-content:center;align-items:flex-start;padding:36px 16px 80px}.app{background:var(--panel);box-shadow:var(--bevel-out),0 0 0 3px #0d0d0d;padding:28px 32px 36px;max-width:980px;width:100%}.inner{display:flex;flex-direction:column;gap:28px}.header{padding-bottom:20px;border-bottom:3px solid var(--panel-lo);box-shadow:0 1px 0 var(--panel-hi);display:flex;flex-direction:column;gap:10px}.header h1{font-family:var(--pixel);font-size:20px;line-height:1.5;color:var(--green);text-shadow:3px 3px 0 var(--green-dim)}.header h1 span{color:var(--text-hi);text-shadow:3px 3px 0 #111}.header p{font-size:12px;color:var(--text-lo)}.dropzone-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media (max-width: 520px){.dropzone-row{grid-template-columns:1fr}}.dropzone{background:var(--slot);box-shadow:var(--slot-in);padding:36px 20px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:160px;transition:background .08s}.dropzone:hover{background:#242424}.dropzone.drag-green{background:var(--green-lo);box-shadow:inset 2px 2px 0 var(--green-dim),inset -2px -2px 0 var(--green)}.dropzone.drag-gold{background:var(--gold-lo);box-shadow:inset 2px 2px 0 var(--gold-dim),inset -2px -2px 0 var(--gold)}.dropzone.has-image{padding:16px}.dropzone-eyebrow{font-family:var(--pixel);font-size:8px;letter-spacing:.06em;color:var(--text-lo);text-transform:uppercase}.dropzone-eyebrow.green{color:var(--green);text-shadow:1px 1px 0 var(--green-dim)}.dropzone-eyebrow.gold{color:var(--gold);text-shadow:1px 1px 0 var(--gold-dim)}.dropzone-title{font-size:13px;font-weight:600;color:var(--text-hi)}.dropzone-hint{font-size:11px;color:var(--text-lo)}.dropzone canvas{max-width:96px;max-height:96px;image-rendering:pixelated;background:#111;box-shadow:var(--slot-in)}.dropzone-replace{font-size:10px;color:var(--text-lo)}.card{background:#333;box-shadow:var(--bevel-out);padding:16px 18px}.card-label{font-family:var(--pixel);font-size:8px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-lo);margin-bottom:14px;display:block}.card-label.green{color:var(--green);text-shadow:1px 1px 0 var(--green-dim)}.card-label.gold{color:var(--gold);text-shadow:1px 1px 0 var(--gold-dim)}.workspace{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start}@media (max-width: 680px){.workspace{grid-template-columns:1fr}}.controls-col{display:flex;flex-direction:column;gap:12px}.preview-col{display:flex;flex-direction:column;gap:20px}.slider-group{display:flex;flex-direction:column;gap:10px}.slider-row{display:flex;align-items:center;gap:10px}.slider-axis{font-family:var(--pixel);font-size:8px;color:var(--text-lo);width:12px;flex-shrink:0}.slider-val{font-family:ui-monospace,Courier New,monospace;font-size:11px;color:var(--text);width:36px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0}input[type=range]{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;border-radius:0;background:var(--slot);box-shadow:var(--slot-in);outline:none;cursor:pointer}input[type=range].green::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:22px;border-radius:0;background:var(--green);box-shadow:inset -1px -2px 0 var(--green-dim),inset 1px 1px #afa;border:none}input[type=range].green::-moz-range-thumb{width:10px;height:22px;border-radius:0;background:var(--green);border:none}input[type=range].gold::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:22px;border-radius:0;background:var(--gold);box-shadow:inset -1px -2px 0 var(--gold-dim),inset 1px 1px #ffd060;border:none}input[type=range].gold::-moz-range-thumb{width:10px;height:22px;border-radius:0;background:var(--gold);border:none}.previews{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}.preview-item{display:flex;flex-direction:column;align-items:center;gap:8px}.preview-item canvas{image-rendering:pixelated;background:#111;box-shadow:var(--slot-in)}.viewer-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}.viewer-canvas-wrap{background:#111;box-shadow:var(--slot-in);overflow:hidden}.anim-controls{display:flex;gap:4px;flex-wrap:wrap}.anim-btn{padding:7px 12px;font-family:var(--pixel);font-size:8px;letter-spacing:.04em;color:var(--text);text-shadow:1px 1px 0 #111;background:#555;border:none;cursor:pointer;box-shadow:inset -2px -3px #00000059,inset 2px 2px #ffffff24,0 0 0 2px #111;transition:background .08s}.anim-btn:hover{background:#7070b8;color:#fff}.anim-btn.active{background:#2a5a2a;color:var(--green);text-shadow:1px 1px 0 var(--green-dim);box-shadow:inset 2px 3px #00000059,inset -2px -2px #ffffff1a,0 0 0 2px #111}.viewer-hint{font-size:10px;color:var(--text-lo)}.uv-section canvas{image-rendering:pixelated;display:block;max-width:100%;box-shadow:var(--slot-in)}.uv-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}.legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-lo)}.legend-dot{width:8px;height:8px;flex-shrink:0}.export-section{display:flex;flex-direction:column;gap:14px}.btn-download{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:#555;color:#ffffa0;text-shadow:2px 2px 0 #3a3a00;font-family:var(--pixel);font-size:10px;letter-spacing:.04em;border:none;cursor:pointer;box-shadow:inset -3px -5px #00000059,inset 3px 3px #ffffff26,0 0 0 2px #111;transition:background .08s;align-self:flex-start;white-space:nowrap}.btn-download:hover{background:#7070b8;color:#fff;text-shadow:2px 2px 0 #222}.btn-download:active{box-shadow:inset 3px 5px #00000059,inset -3px -3px #ffffff26,0 0 0 2px #111}.btn-download:disabled{background:#333;color:#555;text-shadow:none;cursor:not-allowed}.slim-card{display:flex;flex-direction:column;gap:10px}.btn-toggle{padding:7px 12px;font-family:var(--pixel);font-size:8px;letter-spacing:.04em;color:var(--text);text-shadow:1px 1px 0 #111;background:#555;border:none;cursor:pointer;box-shadow:inset -2px -3px #00000059,inset 2px 2px #ffffff24,0 0 0 2px #111;transition:background .08s;white-space:nowrap;width:100%;text-align:center}.btn-toggle:hover{background:#7070b8;color:#fff}.btn-toggle.active{background:#1a4a5a;color:var(--blue);text-shadow:1px 1px 0 #0a2030;box-shadow:inset 2px 3px #00000059,inset -2px -2px #ffffff1a,0 0 0 2px #111}.advanced-card{display:flex;flex-direction:column}.advanced-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;padding:0;color:inherit}.advanced-toggle:hover .chevron{color:var(--text)}.chevron{font-size:14px;color:var(--text-lo);transition:transform .15s ease;line-height:1}.chevron.open{transform:rotate(180deg)}.advanced-body{max-height:0;overflow:hidden;transition:max-height .25s ease;display:flex;flex-direction:column;gap:14px}.advanced-body.open{max-height:1200px;padding-top:16px}.advanced-divider{border:none;border-top:1px solid var(--panel-lo);margin:2px 0}.side-mode-row{display:flex;gap:6px;flex-wrap:wrap}.color-pick{width:36px;height:24px;padding:0;border:none;background:none;cursor:pointer;border-radius:2px}.btn-reset{align-self:flex-start;background:var(--slot);color:#f88;border:none;padding:6px 12px;font-family:var(--pixel);font-size:.6rem;cursor:pointer;box-shadow:var(--bevel-out)}.btn-reset:hover{background:#5a2222;color:#faa}.dropzone.has-image{padding:12px;min-height:unset;gap:8px}.dropzone-empty{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;cursor:pointer}.cropper-canvas{display:block;cursor:grab;image-rendering:pixelated;box-shadow:var(--slot-in);-webkit-user-select:none;user-select:none;-webkit-user-drag:none;max-width:100%}.cropper-canvas:active{cursor:grabbing}.crop-hint{font-size:10px;color:var(--text-lo);text-align:center}.info-box{background:var(--slot);box-shadow:var(--slot-in);padding:14px 18px;font-size:12px;color:var(--text-lo);line-height:1.7}.info-box strong{color:var(--text);font-weight:600}.info-link{color:var(--green);text-shadow:1px 1px 0 var(--green-dim)}