*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{color:#2d1f1c;background:#f5f0eb;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5}img{max-width:100%;display:block}button{font-family:inherit}.app{background:#f5f0eb;min-height:100vh}.app-header{text-align:center;padding:40px 16px 24px}.app-header h1{color:#2d1f1c;letter-spacing:-.5px;margin:0;font-size:32px;font-weight:700}.app-header p{color:#8c7d79;margin:6px 0 0;font-size:15px}.app-main{gap:28px;max-width:1200px;margin:0 auto;padding:0 20px 60px;display:flex}.sidebar{flex-shrink:0;width:280px}.uploader{text-align:center;cursor:pointer;background:#fff;border:2px dashed #d9cdc6;border-radius:16px;padding:48px 24px;transition:all .25s}.uploader:hover,.uploader.drag-over{background:#fdf6f3;border-color:#d4543a}.uploader-content{color:#8c7d79;flex-direction:column;align-items:center;gap:10px;display:flex}.uploader-content svg{color:#d4543a}.uploader-content p{color:#5a4a45;margin:0;font-size:15px;font-weight:500}.uploader-hint{color:#b0a29c;font-size:13px}.controls{background:#fff;border-radius:16px;padding:24px;box-shadow:0 1px 4px #0000000f}.controls h3{color:#2d1f1c;margin:0 0 20px;font-size:16px;font-weight:600}.control-group{cursor:pointer;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:18px;display:flex}.control-label{color:#5a4a45;flex:1;font-size:13px}.control-value{color:#d4543a;text-align:right;min-width:36px;font-size:13px;font-weight:600}.control-group input[type=range]{appearance:none;background:#e8e0db;border-radius:2px;outline:none;width:100%;height:4px;margin-top:4px}.control-group input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#d4543a;border-radius:50%;width:16px;height:16px;transition:transform .15s}.control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.control-group input[type=range]::-moz-range-thumb{cursor:pointer;background:#d4543a;border:none;border-radius:50%;width:16px;height:16px}.palette-selector{flex-direction:column;gap:6px;width:100%;margin-top:4px;display:flex}.palette-btn{color:#5a4a45;cursor:pointer;text-align:left;background:#faf8f6;border:1px solid #e8e0db;border-radius:8px;align-items:center;gap:6px;width:100%;padding:8px 10px;font-size:12px;transition:all .15s;display:flex}.palette-btn:hover{background:#fdf6f3;border-color:#d4543a}.palette-btn.active{color:#d4543a;background:#fff0ec;border-color:#d4543a;font-weight:600}.palette-btn svg{flex-shrink:0}.palette-dot-group{align-items:center;gap:2px;margin-left:auto;display:inline-flex}.palette-dot{border:1px solid #00000014;border-radius:2px;width:10px;height:10px}.palette-count{color:#b0a29c;margin-left:2px;font-size:10px}.controls-actions{flex-direction:column;gap:8px;margin-top:24px;display:flex}.download-btn{color:#fff;cursor:pointer;background:#d4543a;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px 16px;font-size:14px;font-weight:600;transition:background .2s;display:flex}.download-btn:hover{background:#bf3f2a}.download-btn:active{background:#a83622}.reupload-btn{color:#5a4a45;cursor:pointer;background:#fff;border:1px solid #d9cdc6;border-radius:10px;justify-content:center;align-items:center;width:100%;padding:10px 16px;font-size:13px;font-weight:500;transition:all .2s;display:flex}.reupload-btn:hover{color:#d4543a;border-color:#d4543a}.content{flex-direction:column;flex:1;gap:24px;min-width:0;display:flex}.image-preview{background:#fff;border-radius:16px;padding:20px;box-shadow:0 1px 4px #0000000f}.image-preview h3,.pixel-result h3{color:#5a4a45;margin:0 0 12px;font-size:14px;font-weight:600}.source-preview{object-fit:contain;border-radius:8px;max-width:100%;max-height:200px;display:block}.pixel-result{background:#fff;border-radius:16px;flex:1;padding:20px;box-shadow:0 1px 4px #0000000f}.pixel-canvas{justify-content:center;align-items:center;min-height:200px;display:flex;overflow:auto}.pixel-canvas canvas{border-radius:8px;max-width:100%;height:auto;display:block;box-shadow:0 2px 12px #00000014}.pixel-canvas.empty{color:#b0a29c;font-size:14px}@media (width<=768px){.app-main{flex-direction:column}.sidebar{width:100%}.app-header h1{font-size:26px}}