*{margin:0;padding:0;box-sizing:border-box}:root{--gray-50: #f7f8fa;--gray-100: #ebedf2;--gray-200: #d1d5e0;--gray-300: #a3aabe;--gray-400: #7a8299;--gray-500: #5c6478;--gray-600: #3d4455;--gray-700: #282e3e;--gray-800: #1a1f2e;--gray-900: #111520;--gray-950: #0b0e16;--blue-400: #60a5fa;--blue-500: #3b82f6;--blue-600: #2563eb;--green-400: #4ade80;--red-400: #f87171;--amber-400: #fbbf24;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--duration-fast: .1s;--duration-normal: .2s;--duration-slow: .3s;--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--color-bg-base: var(--gray-950);--color-bg-surface: var(--gray-900);--color-bg-elevated: var(--gray-800);--color-bg-hover: var(--gray-800);--color-bg-input: var(--gray-950);--color-text-primary: var(--gray-50);--color-text-secondary: var(--gray-300);--color-text-muted: var(--gray-500);--color-text-inverse: var(--gray-950);--color-border: var(--gray-700);--color-border-subtle: var(--gray-800);--color-accent: var(--blue-400);--color-accent-hover: var(--blue-500);--color-accent-text: var(--blue-400);--color-success: var(--green-400);--color-error: var(--red-400);--color-warning: var(--amber-400);--bg: var(--color-bg-base);--surface: var(--color-bg-surface);--surface-hover: var(--color-bg-hover);--border: var(--color-border);--text: var(--color-text-primary);--text-secondary: var(--color-text-secondary);--text-muted: var(--color-text-muted);--accent: var(--color-accent);--radius: var(--radius-lg)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;background:var(--color-bg-base);color:var(--color-text-primary);min-height:100vh;overflow-x:hidden;font-size:var(--text-sm);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{display:flex;flex-direction:column;min-height:100vh}.header{padding:20px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.header-left{display:flex;align-items:center;gap:12px}.header h1{font-size:1.1rem;font-weight:600;letter-spacing:-.02em}.header-badge{font-size:.7rem;padding:2px 8px;border-radius:99px;background:var(--border);color:var(--text-secondary)}.header-right{display:flex;gap:8px}.main{flex:1;display:flex;overflow:hidden}.canvas-area{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;min-height:500px}.upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);width:100%;max-width:600px;padding:80px 40px;border:2px dashed var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);position:relative}.upload-zone:hover{border-color:var(--color-text-muted);background:var(--color-bg-surface)}.upload-zone.dragging{border-color:var(--color-accent);background:#60a5fa0d;animation:pulse-border 1.5s ease-in-out infinite}@keyframes pulse-border{0%,to{border-color:var(--color-accent)}50%{border-color:var(--blue-600)}}.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.upload-icon{width:48px;height:48px;border-radius:var(--radius-lg);background:var(--color-bg-surface);display:flex;align-items:center;justify-content:center;font-size:24px;transition:transform var(--duration-normal) var(--ease-out)}.upload-zone:hover .upload-icon{transform:translateY(-2px)}.upload-title{font-size:1rem;font-weight:500}.upload-hint{font-size:.8rem;color:var(--text-muted)}.upload-examples{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;margin-top:var(--space-2)}.example-chip{font-size:var(--text-xs);color:var(--color-text-muted);background:var(--color-bg-surface);padding:4px 10px;border-radius:var(--radius-full);border:1px solid var(--color-border-subtle);transition:all var(--duration-normal) var(--ease-out)}.upload-zone:hover .example-chip{color:var(--color-text-secondary);border-color:var(--color-border)}.compare-wrapper{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative}.compare-canvas{max-width:100%;max-height:calc(100vh - 200px);border-radius:8px;cursor:col-resize;display:block;background:var(--surface)}.compare-labels{display:flex;justify-content:space-between;width:100%;max-width:600px;padding:0 8px}.compare-labels span{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.gif-play-btn{width:auto!important;padding:4px 16px!important;font-size:.8rem!important}.shape-selector{display:flex;gap:4px;flex-wrap:wrap}.shape-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:transparent;color:var(--color-text-muted);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);flex:1;min-width:50px}.shape-btn:hover{background:var(--color-bg-base);color:var(--color-text-secondary);transform:translateY(-1px)}.shape-btn.active{border-color:var(--color-accent);color:var(--color-text-primary);background:var(--color-bg-base);box-shadow:0 0 0 1px var(--color-accent)}.shape-icon{font-size:1.1rem;line-height:1;transition:transform var(--duration-normal) var(--ease-out)}.shape-btn:active .shape-icon{transform:scale(.9)}.shape-name{font-size:.6rem;white-space:nowrap}.sidebar{width:320px;border-left:1px solid var(--border);padding:24px;display:flex;flex-direction:column;gap:24px;overflow-y:auto;background:var(--surface)}.sidebar-section{display:flex;flex-direction:column;gap:16px}.sidebar-section h2{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);font-weight:var(--font-semibold)}.control-item{display:flex;flex-direction:column;gap:8px}.control-header{display:flex;justify-content:space-between;align-items:center}.control-label{font-size:.85rem;font-weight:500}.control-value{font-size:var(--text-xs);color:var(--color-text-secondary);font-family:JetBrains Mono,monospace;font-variant-numeric:tabular-nums;background:var(--color-bg-input);padding:2px 8px;border-radius:var(--radius-sm)}.control-desc{font-size:.75rem;color:var(--text-muted);line-height:1.4}input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:var(--color-border);outline:none;transition:background var(--duration-fast) var(--ease-out)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-accent);cursor:pointer;box-shadow:0 0 0 3px #60a5fa26;transition:box-shadow var(--duration-normal) var(--ease-out)}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 5px #60a5fa40}input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 5px #60a5fa4d}.btn{padding:10px 20px;border:none;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);width:100%;text-align:center}.btn-primary{background:var(--color-accent);color:var(--color-text-inverse);box-shadow:var(--shadow-sm)}.btn-primary:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.btn-primary:disabled{background:var(--color-border);color:var(--color-text-muted);cursor:not-allowed;box-shadow:none;transform:none}.btn-ghost{background:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border)}.btn-ghost:hover{background:var(--color-bg-hover);color:var(--color-text-primary);border-color:var(--color-text-muted)}.file-info{font-size:var(--text-xs);color:var(--color-text-muted);padding:var(--space-2) var(--space-3);background:var(--color-bg-input);border-radius:var(--radius-md);font-family:JetBrains Mono,monospace;line-height:1.6}.export-actions{display:flex;flex-direction:column;gap:var(--space-2)}.privacy-hint{font-size:.7rem;color:var(--text-muted);text-align:center;padding:4px 0}.mode-tabs{display:flex;gap:4px;background:var(--color-bg-input);border-radius:var(--radius-md);padding:3px}.mode-tab{flex:1;padding:6px 8px;border:none;border-radius:6px;font-size:var(--text-xs);font-weight:var(--font-medium);cursor:pointer;background:transparent;color:var(--color-text-muted);transition:all var(--duration-normal) var(--ease-out)}.mode-tab.active{background:var(--color-border);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.mode-tab:hover:not(.active){color:var(--color-text-secondary)}.palette-list{display:flex;flex-direction:column;gap:8px}.palette-option{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-md);border:1px solid var(--color-border);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);background:transparent;width:100%;text-align:left}.palette-option:hover{background:var(--color-bg-base);transform:translate(2px)}.palette-option.active{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}.palette-name{font-size:.8rem;color:var(--text);font-weight:500}.palette-colors{display:flex;gap:2px}.palette-swatch{width:14px;height:14px;border-radius:3px}@media(max-width:768px){.header{padding:var(--space-4) var(--space-4)}.header h1{font-size:var(--text-base)}.main{flex-direction:column}.sidebar{width:100%;border-left:none;border-top:1px solid var(--color-border);padding:var(--space-4);gap:var(--space-4);max-height:50vh}.canvas-area{min-height:280px;padding:var(--space-3)}.upload-zone{padding:48px 24px}.shape-btn{min-width:56px;min-height:44px;padding:10px 8px}.mode-tab{min-height:44px;padding:10px 8px}.palette-option{min-height:44px;padding:10px 12px}.btn{min-height:44px;padding:12px 20px}input[type=range]::-webkit-slider-thumb{width:22px;height:22px}}@media(max-width:480px){.header-badge{display:none}.compare-canvas{max-height:calc(100vh - 350px)}.shape-selector{gap:3px}.shape-btn{min-width:48px}.shape-name{display:none}}.footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border-subtle);font-size:var(--text-xs);color:var(--color-text-muted)}.footer-tagline{font-style:italic;letter-spacing:.02em}.footer-credit a{color:var(--color-accent-text);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}.footer-credit a:hover{color:var(--color-accent);text-decoration:underline}.toast{position:fixed;bottom:32px;left:50%;transform:translate(-50%) translateY(100px);background:var(--color-bg-elevated);color:var(--color-text-primary);padding:12px 24px;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);box-shadow:var(--shadow-lg);border:1px solid var(--color-border);z-index:1000;opacity:0;transition:all var(--duration-slow) var(--ease-out);pointer-events:none;display:flex;align-items:center;gap:var(--space-2)}.toast.show{transform:translate(-50%) translateY(0);opacity:1}.toast-icon{font-size:var(--text-lg)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}