:root{--primary-color:#41907c;--primary-hover:#367a68;--primary-light:#e8f5f3;--success-color:#28a745;--error-color:#dc3545;--warning-color:#ffc107;--info-color:#17a2b8;--text-primary:#333;--text-secondary:#666;--text-muted:#999;--border-color:#f0f0f0;--bg-light:#f8f9fa;--bg-white:#fff;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--shadow-sm:0 1px 3px rgba(0,0,0,0.1);--shadow-md:0 4px 6px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px rgba(0,0,0,0.1);--transition-fast:0.15s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.original,.result{flex:1;min-width:300px;max-width:100%;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:var(--spacing-sm);height:400px;display:flex;flex-direction:column;overflow:hidden}.original h3,.result h3{margin:0 0 10px}.image-container{width:100%;background-color:var(--bg-light);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);display:flex;align-items:center;justify-content:center;flex:1;overflow:hidden}.image-container img{max-width:100%;max-height:100%;object-fit:contain}.result-canvas{max-width:100%;height:auto;min-height:200px;background-color:var(--bg-light);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);object-fit:contain;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}@media screen and (max-width:768px){.original{display:none}.result{max-width:100%;height:auto;max-height:65vh;flex:1 1 100%}.image-container,.result-canvas{min-height:150px;height:100%;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch}}