:root{--bg-color: #121214;--surface-color: #1a1a1f;--primary-color: #3b82f6;--primary-hover: #60a5fa;--text-primary: #f8fafc;--text-secondary: #94a3b8;--border-color: #2d2d35;--danger-color: #ef4444;--danger-hover: #f87171;--grid-color-1: #2a2a35;--grid-color-2: #30303d}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-color);color:var(--text-primary);min-height:100vh;margin:0;overflow-x:hidden}button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit;transition:all .2s ease}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.bg-grid{background-image:linear-gradient(45deg,var(--grid-color-1) 25%,transparent 25%,transparent 75%,var(--grid-color-1) 75%,var(--grid-color-1)),linear-gradient(45deg,var(--grid-color-1) 25%,transparent 25%,transparent 75%,var(--grid-color-1) 75%,var(--grid-color-1));background-size:16px 16px;background-position:0 0,8px 8px;background-color:var(--grid-color-2)}.toolbar{background-color:var(--surface-color);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color);display:flex;flex-direction:column;gap:1.5rem}.tool-group{display:flex;flex-direction:column;gap:.8rem}.tool-label{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);font-weight:600}.color-picker{width:100%;height:48px;border:none;border-radius:8px;cursor:pointer;background:var(--bg-color);padding:4px}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:4px}.tool-btn{background-color:var(--bg-color);color:var(--text-primary);padding:.8rem 1rem;border-radius:8px;font-size:.95rem;font-weight:500;border:1px solid var(--border-color);display:flex;justify-content:center;align-items:center}.tool-btn:hover{background-color:#ffffff0d;border-color:var(--text-secondary)}.tool-btn.active{background-color:#3b82f626;border-color:var(--primary-color);color:var(--primary-hover)}.tool-btn.danger{color:var(--danger-color);border-color:#ef44444d}.tool-btn.danger:hover{background-color:#ef44441a;border-color:var(--danger-hover);color:var(--danger-hover)}.app-container{display:flex;flex-direction:column;height:100vh}.app-header{padding:1.5rem 2rem;background:linear-gradient(135deg,#1a1a1fcc,#121214e6);border-bottom:1px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.app-header h1{font-size:1.8rem;font-weight:700;background:linear-gradient(to right,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}.app-header p{color:var(--text-secondary);font-size:.9rem}.editor-layout{display:flex;flex:1;overflow:hidden;padding:1.5rem;gap:1.5rem}.editor-left,.editor-right{width:300px;display:flex;flex-direction:column;gap:1.5rem}.editor-center{flex:1;display:flex;align-items:center;justify-content:center;background-color:var(--surface-color);border-radius:16px;border:1px solid var(--border-color);overflow:hidden;position:relative;box-shadow:inset 0 0 20px #00000080}.canvas-container{width:100%;height:100%;padding:2rem;display:flex;align-items:center;justify-content:center;overflow:auto}.canvas-wrapper{aspect-ratio:1 / 1;width:100%;max-width:600px;max-height:600px;border-radius:4px;box-shadow:0 10px 30px #00000080;overflow:hidden;border:1px solid var(--primary-color)}.skin-canvas{width:100%;height:100%;display:block;image-rendering:pixelated;cursor:crosshair}.instructions-panel,.export-container,.preview-container{background-color:var(--surface-color);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color)}.export-container{text-align:center}.instructions-panel h3,.export-container h3,.preview-container h3{font-size:1.1rem;margin-bottom:1rem;color:var(--text-primary)}.instructions-panel ol{color:var(--text-secondary);font-size:.9rem;padding-left:1.2rem;line-height:1.6}.instructions-panel li{margin-bottom:.5rem}.export-btn{background:linear-gradient(135deg,var(--primary-color),#4f46e5);color:#fff;padding:1rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;width:100%;box-shadow:0 4px 15px #3b82f666}.export-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3b82f699;background:linear-gradient(135deg,var(--primary-hover),#6366f1)}.export-btn:active{transform:translateY(0)}@media(max-width:1024px){.editor-layout{flex-direction:column;overflow-y:auto}.editor-left,.editor-right{width:100%}.editor-center{min-height:500px}}