:root{--bg-primary: #f8fafc;--bg-secondary: #ffffff;--bg-dark: #0f172a;--text-primary: #1e293b;--text-secondary: #64748b;--text-light: #ffffff;--accent-pink: #ec4899;--accent-pink-light: rgba(236, 72, 153, .6);--accent-blue: #0ea5e9;--accent-blue-light: #38bdf8;--accent-error: #ef4444;--border-light: #e2e8f0;--border-dark: #334155;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 20px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);--shadow-lg: 0 12px 40px rgba(0, 0, 0, .15);--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--font-sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased}.view{display:none;width:100%;height:100%}.view.active{display:block}.drop-zone{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;transition:all var(--transition-normal)}.drop-zone.drag-over{background:#ec48991a}.drop-zone.drag-over .upload-button{transform:scale(1.05);box-shadow:0 20px 60px #ec489966}.checkerboard-bg{position:absolute;inset:0;background-image:linear-gradient(45deg,#e2e8f0 25%,transparent 25%),linear-gradient(-45deg,#e2e8f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e8f0 75%),linear-gradient(-45deg,transparent 75%,#e2e8f0 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0px;background-color:#f1f5f9;opacity:.5}.blob{position:absolute;border-radius:50%;background:var(--accent-pink);opacity:.8;animation:float 20s ease-in-out infinite;pointer-events:none}.blob-1{width:300px;height:280px;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,var(--accent-pink) 0%,#f472b6 100%);border-radius:60% 40% 50% 50%/50% 60% 40% 50%;animation:morph 15s ease-in-out infinite}.blob-2{width:80px;height:80px;top:15%;left:20%;opacity:.5;animation:float 12s ease-in-out infinite;animation-delay:-2s}.blob-3{width:50px;height:50px;top:25%;right:15%;opacity:.4;animation:float 18s ease-in-out infinite;animation-delay:-5s}.blob-4{width:120px;height:120px;bottom:30%;right:10%;opacity:.6;animation:float 14s ease-in-out infinite;animation-delay:-8s}.blob-5{width:40px;height:40px;bottom:40%;left:10%;opacity:.3;animation:float 16s ease-in-out infinite;animation-delay:-3s}@keyframes float{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-20px) rotate(5deg)}50%{transform:translateY(10px) rotate(-5deg)}75%{transform:translateY(-10px) rotate(3deg)}}@keyframes morph{0%,to{border-radius:60% 40% 50% 50%/50% 60% 40% 50%;transform:translate(-50%,-50%) rotate(0)}25%{border-radius:50% 60% 40%/60% 40%}50%{border-radius:40% 50% 60%/50% 50% 50% 60%;transform:translate(-50%,-50%) rotate(5deg)}75%{border-radius:60% 40% 50% 60%/40% 60% 50% 50%}}.wave-decoration{position:absolute;bottom:0;left:0;width:100%;height:180px;pointer-events:none}.drop-header{position:absolute;top:2rem;left:50%;transform:translate(-50%);z-index:10}.drop-header h1{font-size:1.75rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}.upload-prompt{position:relative;z-index:10}.upload-button{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2.5rem 3rem;background:#fffffff2;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);cursor:pointer;transition:all var(--transition-normal);border:2px solid transparent}.upload-button:hover{transform:translateY(-4px);box-shadow:0 20px 60px #0003}.upload-button:active{transform:translateY(-2px)}.upload-icon{width:56px;height:56px;color:var(--accent-pink)}.upload-text{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.or-text{color:var(--text-secondary);font-weight:400}.paste-text{color:var(--accent-blue)}.upload-hint{font-size:.875rem;color:var(--text-secondary)}.comparison-container{display:flex;flex-direction:column;height:100%;background:var(--bg-dark);overflow:hidden}.comparison-container .credit-dark{position:relative;flex-shrink:0}#comparison-view.drag-over{position:relative}#comparison-view.drag-over:after{content:"Drop to replace image";position:absolute;inset:0;background:#0ea5e9e6;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:600;color:#fff;z-index:100;pointer-events:none}.toolbar{display:flex;align-items:center;padding:.75rem 1.5rem;background:#1e293b;border-bottom:1px solid var(--border-dark);gap:1rem}.toolbar-btn{display:flex;align-items:center;gap:.5rem;padding:.625rem 1rem;background:transparent;border:1px solid var(--border-dark);border-radius:var(--radius-sm);color:var(--text-light);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.toolbar-btn:hover{background:#ffffff1a;border-color:#475569}.toolbar-center{flex:1;display:flex;justify-content:center}.file-name{font-size:.875rem;color:var(--text-secondary);font-family:SF Mono,monospace}.toolbar-right{display:flex;align-items:center;gap:1.5rem}.color-picker-group{display:flex;align-items:center;gap:.75rem}.color-picker-group label{font-size:.8125rem;color:var(--text-secondary)}.color-input-wrapper{display:flex;align-items:center;background:#ffffff1a;border-radius:var(--radius-sm);overflow:hidden}.color-input-wrapper input[type=color]{width:32px;height:32px;border:none;cursor:pointer;background:transparent;padding:2px}.color-input-wrapper input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.color-input-wrapper input[type=color]::-webkit-color-swatch{border:1px solid rgba(255,255,255,.2);border-radius:4px}.color-input-wrapper input[type=text]{width:72px;padding:.5rem;background:transparent;border:none;color:var(--text-light);font-family:SF Mono,monospace;font-size:.8125rem;text-transform:uppercase}.color-input-wrapper input[type=text]:focus{outline:none}.download-btn{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background:var(--accent-blue);border:none;border-radius:var(--radius-sm);color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.download-btn:hover{background:var(--accent-blue-light);transform:translateY(-1px)}.download-btn:active{transform:translateY(0)}.download-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.comparison-panels{flex:1;display:flex;overflow:hidden;min-height:0}.panel{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;background:#ffffff0d;border-bottom:1px solid var(--border-dark)}.panel-label{font-size:.8125rem;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.05em}.panel-info{font-size:.75rem;color:var(--text-secondary);font-family:SF Mono,monospace}.panel-content{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;overflow:hidden;min-height:0}.panel-content.checkerboard{background-image:linear-gradient(45deg,#1e293b 25%,transparent 25%),linear-gradient(-45deg,#1e293b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1e293b 75%),linear-gradient(-45deg,transparent 75%,#1e293b 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;background-color:#0f172a}#original-preview{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-sm)}#converted-preview{border-radius:var(--radius-sm);box-shadow:var(--shadow-md)}#converted-container{background-image:linear-gradient(45deg,#1e293b 25%,transparent 25%),linear-gradient(-45deg,#1e293b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1e293b 75%),linear-gradient(-45deg,transparent 75%,#1e293b 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;background-color:#0f172a}.zoom-control{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:#ffffff0d;border-top:1px solid var(--border-dark);flex-shrink:0}.zoom-control label{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--text-secondary);white-space:nowrap}.zoom-control input[type=range]{flex:1;height:4px;background:#334155;border-radius:2px;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}.zoom-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent-blue);border-radius:50%;cursor:pointer;transition:transform var(--transition-fast)}.zoom-control input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.zoom-control input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--accent-blue);border:none;border-radius:50%;cursor:pointer}#zoom-value{font-size:.8125rem;font-family:SF Mono,monospace;color:var(--text-light);min-width:3.5rem;text-align:right}.zoom-reset-btn{padding:.375rem .75rem;background:transparent;border:1px solid var(--border-dark);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.75rem;cursor:pointer;transition:all var(--transition-fast)}.zoom-reset-btn:hover{background:#ffffff1a;color:var(--text-light);border-color:#475569}.panel-divider{width:1px;background:var(--border-dark);display:flex;align-items:center;justify-content:center}.divider-handle{width:6px;height:48px;background:#475569;border-radius:var(--radius-full);cursor:col-resize;transition:background var(--transition-fast)}.divider-handle:hover{background:var(--accent-blue)}.error-box{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;background:#1e293b;border:1px solid var(--accent-error);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:1000;max-width:90vw}.error-box[hidden]{display:none}.error-icon{flex-shrink:0;color:var(--accent-error)}.error-box>span{font-size:.9375rem;color:var(--text-light)}.error-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.error-close:hover{background:#ffffff1a;color:var(--text-light)}@media(max-width:768px){.toolbar{flex-wrap:wrap;gap:.75rem;padding:.75rem 1rem}.toolbar-center{order:-1;flex-basis:100%;justify-content:flex-start}.toolbar-right{flex:1;justify-content:flex-end;gap:.75rem}.color-picker-group label,.download-btn span{display:none}.comparison-panels{flex-direction:column}.panel-divider{width:100%;height:1px;flex-direction:row}.divider-handle{width:48px;height:6px;cursor:row-resize}.blob-1{width:200px;height:180px}.upload-button{padding:2rem}}@media(max-width:480px){.drop-header h1{font-size:1.5rem}.upload-icon{width:44px;height:44px}.upload-text{font-size:1.125rem}}.credit{font-size:.8125rem;color:#ffffffb3;z-index:20;white-space:nowrap}.credit a{color:var(--accent-blue-light);text-decoration:none;transition:color var(--transition-fast)}.credit a:hover{color:#fff;text-decoration:underline}.credit-dark{position:absolute;bottom:0;left:0;right:0;padding:.75rem;text-align:center;background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.upload-button:focus-within{outline:3px solid var(--accent-pink);outline-offset:3px}.toolbar-btn:focus-visible,.download-btn:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}