@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap";:root{--surface-0: #08080a;--surface-1: #0e0e11;--surface-2: #141418;--surface-3: #1a1a1f;--surface-4: #222228;--surface-5: #2a2a32;--accent-primary: #60a5fa;--accent-secondary: #3b82f6;--accent-dim: #2563eb;--accent-glow: rgba(96, 165, 250, .15);--accent-glow-strong: rgba(96, 165, 250, .3);--danger: #ff4757;--danger-dim: #cc3a47;--success: #2ed573;--warning: #ffa502;--text-1: #ffffff;--text-2: #b4b4bc;--text-3: #7c7c88;--text-4: #52525c;--border-1: #2a2a32;--border-2: #3a3a44;--border-accent: var(--accent-primary);--font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "DM Mono", "SF Mono", Consolas, monospace;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--duration-fast: .1s;--duration-normal: .2s;--duration-slow: .4s;--toolbar-height: 48px;--export-bar-height: 64px;--left-sidebar-width: 280px;--right-sidebar-width: 280px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:var(--font-sans);font-size:13px;line-height:1.5;color:var(--text-1);background:var(--surface-0);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button,input,select,textarea{touch-action:manipulation}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.toolbar{height:var(--toolbar-height);background:var(--surface-1);border-bottom:1px solid var(--border-1);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-4);flex-shrink:0}.toolbar-brand{display:flex;align-items:center;gap:var(--space-2)}.brand-icon{font-size:20px;color:var(--accent-primary);animation:brand-pulse 3s ease-in-out infinite}@keyframes brand-pulse{0%,to{opacity:1}50%{opacity:.6}}.brand-text{font-weight:700;font-size:14px;letter-spacing:.1em;color:var(--text-2)}.toolbar-actions{display:flex;align-items:center;gap:var(--space-1)}.toolbar-divider{width:1px;height:24px;background:var(--border-1);margin:0 var(--space-2)}.tool-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-3);cursor:pointer;transition:all var(--duration-fast)}.tool-btn svg{width:18px;height:18px}.tool-btn:hover:not(:disabled){background:var(--surface-3);color:var(--text-1)}.tool-btn:disabled{opacity:.3;cursor:not-allowed}.workspace{flex:1;display:grid;grid-template-columns:var(--left-sidebar-width) auto 1fr var(--right-sidebar-width);min-height:0;overflow:hidden}.resize-handle{width:6px;background:var(--surface-1);cursor:col-resize;position:relative;transition:background var(--duration-fast)}.resize-handle:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:40px;background:var(--border-2);border-radius:1px;transition:background var(--duration-fast)}.resize-handle:hover{background:var(--surface-3)}.resize-handle:hover:after{background:var(--accent-primary)}.resize-handle.dragging{background:var(--surface-3)}.resize-handle.dragging:after{background:var(--accent-primary)}.source-panel{width:var(--left-sidebar-width);min-width:200px;max-width:600px;background:var(--surface-1);border-right:1px solid var(--border-1);display:flex;flex-direction:column;overflow:hidden}.drop-zone{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-6);cursor:pointer;position:relative;transition:all var(--duration-normal)}.drop-zone:before{content:"";position:absolute;inset:var(--space-4);border:2px dashed var(--border-2);border-radius:var(--radius-lg);transition:all var(--duration-normal);pointer-events:none}.drop-zone:hover:before,.drop-zone.drag-over:before{border-color:var(--accent-primary);background:var(--accent-glow)}.drop-zone-input{display:none}.drop-zone-content{text-align:center;position:relative;z-index:1}.drop-icon{width:64px;height:64px;margin:0 auto var(--space-4);color:var(--text-4);transition:all var(--duration-normal)}.drop-icon svg{width:100%;height:100%}.drop-zone:hover .drop-icon,.drop-zone.drag-over .drop-icon{color:var(--accent-primary);transform:scale(1.1)}.drop-title{font-size:16px;font-weight:600;color:var(--text-2);margin-bottom:var(--space-1)}.drop-subtitle{font-size:12px;color:var(--text-4);margin-bottom:var(--space-3)}.drop-formats{font-family:var(--font-mono);font-size:10px;color:var(--text-4);letter-spacing:.05em;padding:var(--space-1) var(--space-2);background:var(--surface-3);border-radius:var(--radius-sm)}.url-loader{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--surface-2);margin-top:auto;width:100%;border-radius:var(--radius-md);margin-top:var(--space-4);position:relative;z-index:1}.url-label{font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--text-4);text-transform:uppercase;letter-spacing:.05em}.url-loader input{flex:1;background:var(--surface-3);border:1px solid var(--border-1);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:12px;color:var(--text-1);min-width:0}.url-loader input:focus{outline:none;border-color:var(--accent-primary)}.url-loader button{padding:var(--space-2) var(--space-3);background:var(--surface-4);border:1px solid var(--border-1);border-radius:var(--radius-sm);color:var(--text-2);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--duration-fast)}.url-loader button:hover{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--surface-0)}.url-status{font-size:11px;text-align:center;min-height:1em;width:100%}.url-status.error{color:var(--danger)}.url-status.success{color:var(--success)}.source-preview{display:none;flex-direction:column;height:100%}.source-preview.visible{display:flex}.preview-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-1)}.preview-tabs{display:flex;background:var(--surface-2);border-radius:var(--radius-sm);padding:2px}.preview-tab{padding:var(--space-1) var(--space-3);background:transparent;border:none;border-radius:var(--radius-sm);font-size:11px;font-weight:500;color:var(--text-3);cursor:pointer;transition:all var(--duration-fast)}.preview-tab.active{background:var(--surface-4);color:var(--text-1)}.preview-info{font-family:var(--font-mono);font-size:11px;color:var(--text-4)}.preview-viewport{flex:1;position:relative;overflow:hidden;background:repeating-conic-gradient(var(--surface-3) 0% 25%,var(--surface-2) 0% 50%) 50% / 16px 16px}.preview-canvas-wrap{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.preview-canvas-wrap img{max-width:100%;max-height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.pixel-grid-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:none}.pixel-grid-overlay.visible{display:block}.crop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:none;z-index:10}.crop-overlay.active{display:block;cursor:crosshair}.preview-toolbar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--surface-2);border-top:1px solid var(--border-1)}.spacer{flex:1}.mini-toggle{display:flex;align-items:center;gap:var(--space-1);font-size:11px;color:var(--text-3);cursor:pointer}.mini-toggle input{accent-color:var(--accent-primary)}.mini-btn{padding:var(--space-1) var(--space-2);background:var(--surface-3);border:1px solid var(--border-1);border-radius:var(--radius-sm);font-size:11px;color:var(--text-3);cursor:pointer;transition:all var(--duration-fast)}.mini-btn:hover{background:var(--surface-4);color:var(--text-1)}.mini-btn.primary{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--surface-0);font-weight:500}.mini-btn.primary:hover{background:var(--accent-secondary)}.mini-btn.danger:hover{background:var(--danger);border-color:var(--danger);color:var(--text-1)}.crop-actions{display:flex;gap:var(--space-2)}.source-filename{padding:var(--space-2) var(--space-4);background:var(--surface-1);border-top:1px solid var(--border-1);font-family:var(--font-mono);font-size:11px;color:var(--text-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-panel{background:var(--surface-0);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.canvas-container{position:absolute;top:0;right:0;bottom:0;left:0}#preview-canvas{width:100%;height:100%;display:block}.canvas-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-4);pointer-events:none}.canvas-empty p{margin-top:var(--space-6);font-size:13px}.empty-cube{width:60px;height:60px;position:relative;transform-style:preserve-3d;animation:cube-rotate 8s linear infinite}@keyframes cube-rotate{0%{transform:rotateX(-20deg) rotateY(0)}to{transform:rotateX(-20deg) rotateY(360deg)}}.cube-face{position:absolute;width:60px;height:60px;border:1px solid var(--border-2);background:var(--surface-2);opacity:.8}.cube-face.front{transform:translateZ(30px)}.cube-face.back{transform:translateZ(-30px) rotateY(180deg)}.cube-face.left{transform:translate(-30px) rotateY(-90deg)}.cube-face.right{transform:translate(30px) rotateY(90deg)}.cube-face.top{transform:translateY(-30px) rotateX(90deg);background:var(--surface-3)}.cube-face.bottom{transform:translateY(30px) rotateX(-90deg)}.controls-panel{background:var(--surface-1);border-left:1px solid var(--border-1);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}.ctrl-section{border-bottom:1px solid var(--border-1);flex-shrink:0}.ctrl-header{display:flex;align-items:center;width:100%;padding:var(--space-3) var(--space-4);background:transparent;border:none;cursor:pointer;transition:background var(--duration-fast)}.ctrl-header:hover{background:var(--surface-2)}.ctrl-title{flex:1;font-size:12px;font-weight:600;color:var(--text-2);text-align:left;text-transform:uppercase;letter-spacing:.05em}.ctrl-toggle{color:var(--text-4);transition:transform var(--duration-normal)}.ctrl-toggle svg{width:16px;height:16px}.ctrl-header[aria-expanded=false] .ctrl-toggle,.ctrl-body.collapsed+.ctrl-header .ctrl-toggle{transform:rotate(-90deg)}.badge{margin-left:var(--space-2);padding:2px 6px;background:var(--accent-primary);border-radius:10px;font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--surface-0)}.ctrl-body{padding:var(--space-3) var(--space-4);padding-top:0}.ctrl-body.collapsed{display:none}.switch-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) 0;cursor:pointer}.switch-row span{font-size:12px;color:var(--text-2)}.switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:36px;height:20px;background:var(--surface-4);border-radius:10px;position:relative;cursor:pointer;transition:background var(--duration-fast)}.switch:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--text-3);border-radius:50%;transition:all var(--duration-fast)}.switch:checked{background:var(--accent-primary)}.switch:checked:after{left:18px;background:var(--surface-0)}.slider-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--space-2);padding:var(--space-2) 0}.slider-row.compact{padding:var(--space-1) 0}.slider-label{font-size:12px;color:var(--text-3);grid-column:1 / -1;margin-bottom:var(--space-1)}.slider-row .slider-label{grid-column:1;margin-bottom:0}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--surface-4);border-radius:2px;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent-primary);border-radius:50%;cursor:pointer;transition:transform var(--duration-fast)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider-val{font-family:var(--font-mono);font-size:11px;color:var(--accent-primary);min-width:32px;text-align:right}.slider-unit{font-size:10px;color:var(--text-4)}.slider-compact{display:flex;align-items:center;gap:var(--space-2);flex:1}.slider-compact input[type=range]{flex:1;min-width:60px}input[type=number]{width:100%;padding:var(--space-2) var(--space-3);background:var(--surface-3);border:1px solid var(--border-1);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:12px;color:var(--text-1);-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}input[type=number]:focus{outline:none;border-color:var(--accent-primary)}.num-input{width:50px;padding:var(--space-1) var(--space-2);text-align:center}input[type=color]{-webkit-appearance:none;width:32px;height:24px;padding:0;border:1px solid var(--border-1);border-radius:var(--radius-sm);cursor:pointer;overflow:hidden}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}.color-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0}.color-hex{font-family:var(--font-mono);font-size:11px;color:var(--text-4);text-transform:uppercase}.color-pick-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) 0}.color-preview{width:48px;height:28px;background:var(--surface-3);border:1px solid var(--border-1);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:all var(--duration-fast)}.color-preview.has-color{border-color:var(--accent-primary)}.color-preview.has-color .color-hint{display:none}.color-hint{font-size:10px;color:var(--text-4)}.icon-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--surface-3);border:1px solid var(--border-1);border-radius:var(--radius-sm);color:var(--text-3);cursor:pointer;transition:all var(--duration-fast)}.icon-btn svg{width:16px;height:16px}.icon-btn:hover{background:var(--surface-4);color:var(--text-1)}.icon-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--surface-0)}.unit-row{display:flex;gap:var(--space-1);padding:var(--space-2) 0}.unit-btn{flex:1;padding:var(--space-2);background:var(--surface-3);border:1px solid var(--border-1);border-radius:var(--radius-sm);font-size:12px;font-weight:500;color:var(--text-3);cursor:pointer;transition:all var(--duration-fast)}.unit-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--surface-0)}.dim-input-row{padding:var(--space-2) 0}.dim-field{display:flex;align-items:center;gap:var(--space-2)}.dim-label{font-size:11px;color:var(--text-4);min-width:40px}.dim-label.active{color:var(--accent-primary)}.dim-field input{flex:1}.dim-unit{font-size:11px;color:var(--text-4)}.dim-output{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-3);background:var(--surface-2);border-radius:var(--radius-md);margin:var(--space-2) 0}.dim-out-item{text-align:center}.dim-out-val{font-family:var(--font-mono);font-size:18px;font-weight:600;color:var(--accent-primary)}.dim-out-label{font-size:10px;color:var(--text-4);text-transform:uppercase}.dim-out-x{color:var(--text-4);font-size:14px}.dim-out-unit{font-size:11px;color:var(--text-4)}.dim-toggle-row{display:flex;gap:var(--space-1)}.dim-toggle{flex:1;padding:var(--space-2);background:transparent;border:1px solid var(--border-1);border-radius:var(--radius-sm);font-size:11px;color:var(--text-3);cursor:pointer;transition:all var(--duration-fast)}.dim-toggle.active{border-color:var(--accent-dim);color:var(--accent-primary)}.seg-control{display:flex;background:var(--surface-2);border-radius:var(--radius-sm);padding:2px;margin:var(--space-2) 0}.seg-btn{flex:1;padding:var(--space-2);background:transparent;border:none;border-radius:var(--radius-sm);font-size:11px;font-weight:500;color:var(--text-3);cursor:pointer;transition:all var(--duration-fast)}.seg-btn.active{background:var(--surface-4);color:var(--text-1)}.base-options,.keyhole-options,.magnet-options,.color-reduce-options{padding-top:var(--space-2);border-top:1px solid var(--border-1);margin-top:var(--space-2)}.keyhole-type-settings,.magnet-custom-settings{padding:var(--space-2) 0}.depth-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) 0}.magnet-info{background:var(--surface-2);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);margin:var(--space-2) 0}.info-row{display:flex;justify-content:space-between;font-size:11px;padding:var(--space-1) 0}.info-row span:first-child{color:var(--text-4)}.info-row span:last-child{font-family:var(--font-mono);color:var(--text-2)}.info-row.total{border-top:1px solid var(--border-1);margin-top:var(--space-1);padding-top:var(--space-2);font-weight:500}.magnet-actions{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) 0}.magnet-count{font-size:11px;color:var(--text-4)}.hint-text{font-size:11px;color:var(--text-4);text-align:center;padding:var(--space-2) 0}.stepper-row{display:flex;align-items:center;justify-content:center;gap:0;margin:var(--space-2) 0}.stepper-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--surface-3);border:1px solid var(--border-1);font-size:16px;color:var(--text-2);cursor:pointer;transition:all var(--duration-fast)}.stepper-btn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);border-right:none}.stepper-btn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0;border-left:none}.stepper-btn:hover{background:var(--surface-4);color:var(--text-1)}.stepper-btn:active{background:var(--accent-primary);color:var(--surface-0)}.stepper-val{width:48px;height:32px;padding:0;text-align:center;border-radius:0;background:var(--surface-2)}.full-slider{width:100%;margin-top:var(--space-2)}#palette-panel{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}#palette-panel .ctrl-body{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}#palette-panel .ctrl-body.collapsed{display:none}#palette-panel:has(.ctrl-body.collapsed){flex:0 0 auto}.color-palette{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-2) 0;flex:1;overflow-y:auto;min-height:0}.palette-empty{text-align:center;padding:var(--space-4);color:var(--text-4);font-size:12px}.color-swatch{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2);background:var(--surface-3);border-radius:var(--radius-sm);cursor:default;transition:all var(--duration-fast)}.color-swatch:hover{background:var(--surface-4)}.color-delete-btn{width:18px;height:18px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;font-size:14px;color:var(--text-4);cursor:pointer;margin-left:auto;transition:all var(--duration-fast)}.color-delete-btn:hover:not(:disabled){background:var(--surface-5);color:var(--text-2)}.color-delete-btn:disabled{opacity:.3;cursor:not-allowed}.color-swatch-spacer{width:18px;height:18px;flex-shrink:0;margin-left:auto}.export-bar{height:var(--export-bar-height);background:var(--surface-2);border-top:1px solid var(--border-1);display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-6);flex-shrink:0}.export-format{display:flex;gap:var(--space-2)}.format-btn{display:flex;flex-direction:column;align-items:center;padding:var(--space-2) var(--space-4);background:var(--surface-3);border:1px solid var(--border-1);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast)}.format-btn.active{border-color:var(--accent-primary);background:var(--accent-glow)}.format-name{font-size:13px;font-weight:600;color:var(--text-2)}.format-btn.active .format-name{color:var(--accent-primary)}.format-desc{font-size:10px;color:var(--text-4)}.export-filename{display:flex;align-items:center;background:var(--surface-3);border:1px solid var(--border-1);border-radius:var(--radius-md);overflow:hidden}.export-filename input{width:140px;padding:var(--space-2) var(--space-3);background:transparent;border:none;font-size:13px;color:var(--text-1)}.export-filename input:focus{outline:none}.file-ext{padding:var(--space-2) var(--space-3);background:var(--surface-4);font-family:var(--font-mono);font-size:12px;color:var(--accent-primary)}.export-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--accent-primary);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:600;color:var(--surface-0);cursor:pointer;transition:all var(--duration-fast)}.export-btn svg{width:18px;height:18px}.export-btn:hover:not(:disabled){background:var(--accent-secondary);transform:translateY(-1px)}.export-btn:disabled{opacity:.4;cursor:not-allowed}.export-status{margin-left:auto;font-size:12px}.export-status.success{color:var(--success)}.export-status.error{color:var(--danger)}.modal-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center}.modal-overlay.visible{display:flex}.modal{background:var(--surface-2);border:1px solid var(--border-1);border-radius:var(--radius-lg);width:400px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;position:relative}.modal-close{position:absolute;top:var(--space-3);right:var(--space-3);width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-3);font-size:20px;cursor:pointer;border-radius:var(--radius-sm);transition:all var(--duration-fast)}.modal-close:hover{background:var(--surface-4);color:var(--text-1)}.modal-title{padding:var(--space-5);padding-bottom:var(--space-3);font-size:16px;font-weight:600}.modal-body{padding:0 var(--space-5);overflow-y:auto;flex:1}.modal-body p{font-size:13px;color:var(--text-2);margin-bottom:var(--space-4)}.modal-palette{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);background:var(--surface-3);border-radius:var(--radius-md);max-height:200px;overflow-y:auto}.modal-palette-item{display:flex;align-items:center;gap:var(--space-3)}.modal-palette-swatch{width:24px;height:24px;border-radius:var(--radius-sm);border:1px solid var(--border-1)}.modal-palette-label{font-family:var(--font-mono);font-size:11px;color:var(--text-3)}.modal-actions{padding:var(--space-5);display:flex;justify-content:flex-end}.modal-btn{padding:var(--space-2) var(--space-5);background:var(--accent-primary);border:none;border-radius:var(--radius-md);font-size:13px;font-weight:500;color:var(--surface-0);cursor:pointer;transition:all var(--duration-fast)}.modal-btn:hover{background:var(--accent-secondary)}.hidden{display:none!important}.visible{display:flex}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--surface-1)}::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--surface-5)}::selection{background:var(--accent-glow-strong)}:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}@media (max-width: 1200px){:root{--left-sidebar-width: 260px;--right-sidebar-width: 260px}}@media (max-width: 900px){:root{--toolbar-height: 52px}.workspace{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.resize-handle{display:none}.source-panel{width:100%;min-width:unset;max-width:unset;border-right:none;border-bottom:1px solid var(--border-1);max-height:50vh;overflow-y:auto}.source-preview{min-height:0}.preview-viewport{min-height:150px;max-height:30vh}.preview-panel{min-height:250px}.controls-panel{border-left:none;border-top:1px solid var(--border-1);max-height:35vh;overflow-y:auto}.ctrl-header{padding:var(--space-4);min-height:48px}.switch-row{min-height:44px}input[type=range]{height:6px}input[type=range]::-webkit-slider-thumb{width:20px;height:20px}input[type=range]::-moz-range-thumb{width:20px;height:20px}.tool-btn{width:40px;height:40px}.icon-btn{width:36px;height:36px}.export-bar{flex-wrap:wrap;height:auto;padding:var(--space-3) var(--space-4);gap:var(--space-3)}.dim-input-group input{width:70px}.drop-zone{padding:var(--space-4)}.drop-zone-text{font-size:13px}.color-swatch{padding:var(--space-2) var(--space-3)}}@media (max-width: 600px){:root{--toolbar-height: 48px;--export-bar-height: auto}.toolbar{padding:0 var(--space-3)}.toolbar-brand .brand-text{display:none}.toolbar-actions{gap:0}.tool-btn{width:36px;height:36px}.toolbar-divider{margin:0 var(--space-1)}.source-panel{max-height:45vh}.preview-viewport{min-height:120px;max-height:25vh}.source-toolbar{padding:var(--space-2) var(--space-3);gap:var(--space-2)}.preview-panel{min-height:200px}.controls-panel{max-height:40vh}.ctrl-body{padding:var(--space-2) var(--space-3)}.dim-row{flex-wrap:wrap;gap:var(--space-2)}.dim-input-group{flex:1;min-width:100px}.dim-input-group input{width:100%}.export-bar{padding:var(--space-3);gap:var(--space-2)}.export-format{width:100%}.format-btn{flex:1;padding:var(--space-3)}.export-filename{flex:1;min-width:0}.filename-input{min-width:0;width:100%}.export-btn{width:100%;justify-content:center;padding:var(--space-3) var(--space-4)}.color-swatch{gap:var(--space-2)}.color-swatch-name,.color-swatch-hex{font-size:10px}.slider-row{flex-wrap:wrap}.slider-row span:first-child{width:100%;margin-bottom:var(--space-1)}.toggle-row{flex-wrap:wrap}.drop-zone{padding:var(--space-3);min-height:100px}.drop-icon{width:32px;height:32px}.drop-zone-text,.url-loader input{font-size:12px}}@media (max-width: 400px){.source-panel{max-height:40vh}.preview-viewport{min-height:100px;max-height:20vh}.preview-panel{min-height:150px}.controls-panel{max-height:45vh}.ctrl-header{padding:var(--space-3)}.ctrl-title{font-size:12px}.badge{font-size:10px;padding:1px 6px}.color-swatch-name{display:none}}@media (hover: none) and (pointer: coarse){.tool-btn,.icon-btn{min-width:44px;min-height:44px}.switch-row{min-height:48px}.color-swatch:hover{background:var(--surface-3)}.tool-btn:hover{background:transparent}.tool-btn:active,.icon-btn:active{background:var(--surface-4);transform:scale(.95)}.color-swatch:active{background:var(--surface-4)}.color-delete-btn{opacity:1}}.crop-overlay.cursor-move{cursor:move}.crop-overlay.cursor-nw-resize{cursor:nw-resize}.crop-overlay.cursor-ne-resize{cursor:ne-resize}.crop-overlay.cursor-sw-resize{cursor:sw-resize}.crop-overlay.cursor-se-resize{cursor:se-resize}.crop-overlay.cursor-n-resize{cursor:n-resize}.crop-overlay.cursor-s-resize{cursor:s-resize}.crop-overlay.cursor-e-resize{cursor:e-resize}.crop-overlay.cursor-w-resize{cursor:w-resize}.source-preview.eyedropper-mode .preview-canvas-wrap img{cursor:crosshair}.eyedropper-canvas{position:absolute;top:0;right:0;bottom:0;left:0;cursor:crosshair}#image-preview{display:none}#image-preview.visible{display:flex;flex-direction:column;height:100%}.toggle-group{display:flex;gap:var(--space-1)}.toggle-option{flex:1;padding:var(--space-2);background:var(--surface-3);border:1px solid var(--border-1);border-radius:var(--radius-sm);font-size:12px;text-align:center;cursor:pointer}.toggle-option.active{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--surface-0)}.toggle-option input{display:none}.range-container{display:flex;align-items:center;gap:var(--space-2)}.range-container input[type=range]{flex:1}.checkbox-group{display:flex;align-items:center;gap:var(--space-2);cursor:pointer}.checkbox-input{accent-color:var(--accent-primary)}.checkbox-label{font-size:12px;color:var(--text-2)}.status-message{display:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:12px}.status-message.visible{display:block}.status-message.success{background:var(--success);color:var(--surface-0)}.status-message.error{background:var(--danger);color:var(--text-1)}.canvas-control-btn{padding:var(--space-2) var(--space-3);background:var(--surface-3);border:1px solid var(--border-1);border-radius:var(--radius-sm);color:var(--text-3);font-size:12px;cursor:pointer}.canvas-control-btn:hover{background:var(--surface-4);color:var(--text-1)}.download-btn-icon{font-size:16px}.control-hint{font-size:11px;color:var(--text-4);margin-top:var(--space-1)}.height-unit,.output-unit{font-size:11px;color:var(--text-4)}.dimension-separator{color:var(--text-4)}.base-options.hidden{display:none}.keyhole-options.visible,.magnet-options.visible,.color-reduce-options.visible{display:block}.keyhole-type-settings.hidden,.magnet-custom-settings.hidden{display:none}.depth-slider-container.disabled{opacity:.4;pointer-events:none}.buffer-item.warning span:last-child{color:var(--danger)}.keyhole-coords.has-position,.magnet-coords.has-position{color:var(--accent-primary)}.color-swatch-preview{width:20px;height:20px;border-radius:var(--radius-sm);border:1px solid var(--border-1);flex-shrink:0}.color-swatch-hex{font-family:var(--font-mono);font-size:11px;color:var(--text-2)}.color-swatch-name{font-family:var(--font-mono);font-size:11px;color:var(--text-3);flex:1}.color-palette-empty{grid-column:1 / -1;text-align:center;padding:var(--space-4);color:var(--text-4)}.bg-color-inline{display:flex;align-items:center;gap:var(--space-2)}.eyedropper-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--surface-3);border:1px solid var(--border-1);border-radius:var(--radius-sm);color:var(--text-3);cursor:pointer}.eyedropper-btn:hover{background:var(--surface-4);color:var(--text-1)}.eyedropper-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--surface-0)}@keyframes spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;border:2px solid var(--surface-4);border-top-color:var(--accent-primary);border-radius:50%;animation:spin .6s linear infinite}.loading{position:relative;pointer-events:none}.loading:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center}