.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--bg-secondary);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);max-width:600px;max-height:80vh;width:90%;overflow:hidden;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);border-bottom:1px solid var(--border-color);background:var(--bg-primary)}.modal-title{font-size:16px;font-weight:600;color:var(--text-primary)}.modal-close{width:28px;height:28px;border:none;background:transparent;color:var(--text-secondary);font-size:20px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.modal-close:hover{background:var(--border-color);color:var(--text-primary)}.modal-body{padding:var(--spacing-md);overflow-y:auto;max-height:calc(80vh - 60px)}.algorithm-idea{line-height:1.8;color:var(--text-primary)}.algorithm-idea h3{font-size:15px;font-weight:600;margin:var(--spacing-md) 0 var(--spacing-sm);color:var(--primary-color)}.algorithm-idea h3:first-child{margin-top:0}.algorithm-idea p{margin-bottom:var(--spacing-sm);font-size:14px}.algorithm-idea ul{margin:var(--spacing-sm) 0;padding-left:var(--spacing-lg)}.algorithm-idea li{margin-bottom:var(--spacing-xs);font-size:14px}.algorithm-idea code{background:var(--bg-primary);padding:2px 6px;border-radius:3px;font-family:var(--font-mono);font-size:13px;color:var(--primary-dark)}.algorithm-idea .formula{background:var(--bg-primary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);margin:var(--spacing-sm) 0;font-family:var(--font-mono);font-size:13px;overflow-x:auto}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-secondary);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm);min-height:50px}.header-left{display:flex;align-items:center}.back-link{display:flex;align-items:center;gap:var(--spacing-xs);color:var(--primary-color);text-decoration:none;font-size:13px;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);transition:var(--transition-fast)}.back-link:hover{background:var(--bg-primary);color:var(--primary-dark)}.back-link svg{width:16px;height:16px}.header-center{flex:1;display:flex;justify-content:center}.title-link{color:var(--text-primary);text-decoration:none;font-size:18px;font-weight:600;transition:var(--transition-fast)}.title-link:hover{color:var(--primary-color)}.header-right{display:flex;align-items:center;gap:var(--spacing-md)}.algorithm-idea-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-primary);font-size:13px;cursor:pointer;transition:var(--transition-fast)}.algorithm-idea-btn:hover{background:var(--primary-light);color:var(--text-light);border-color:var(--primary-light)}.algorithm-idea-btn svg{width:16px;height:16px}.github-section{display:flex;align-items:center;gap:var(--spacing-sm)}.github-link{display:flex;align-items:center;gap:var(--spacing-xs);color:var(--text-primary);text-decoration:none;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);transition:var(--transition-fast)}.github-link:hover{background:var(--bg-primary)}.github-link svg{width:20px;height:20px}.star-count{display:flex;align-items:center;gap:2px;font-size:13px;color:var(--text-secondary)}.star-count svg{width:14px;height:14px;color:var(--accent-color)}.input-panel{background:var(--bg-secondary);border-radius:var(--border-radius);padding:var(--spacing-sm);box-shadow:var(--shadow-sm)}.input-section{display:flex;flex-direction:column;gap:var(--spacing-sm)}.input-row{display:flex;align-items:center;gap:var(--spacing-sm)}.input-label{font-size:13px;font-weight:500;color:var(--text-secondary);min-width:50px}.input-field{flex:1;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:14px;font-family:var(--font-mono);transition:var(--transition-fast)}.input-field:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #2196f31a}.input-field.error{border-color:var(--error-color)}.input-actions{display:flex;gap:var(--spacing-xs);margin-top:var(--spacing-xs)}.action-btn{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--bg-primary);color:var(--text-primary);font-size:12px;cursor:pointer;transition:var(--transition-fast)}.action-btn:hover,.action-btn.primary{background:var(--primary-color);color:var(--text-light);border-color:var(--primary-color)}.action-btn.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}.examples-section{margin-top:var(--spacing-sm);padding-top:var(--spacing-sm);border-top:1px solid var(--border-color)}.examples-label{font-size:12px;color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.examples-list{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.example-btn{padding:2px 8px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-primary);color:var(--text-secondary);font-size:11px;cursor:pointer;transition:var(--transition-fast)}.example-btn:hover{background:var(--secondary-color);color:var(--text-light);border-color:var(--secondary-color)}.error-message{color:var(--error-color);font-size:12px;margin-top:var(--spacing-xs)}.code-panel{background:var(--bg-secondary);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;flex:1;overflow:hidden}.code-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xs) var(--spacing-sm);border-bottom:1px solid var(--border-color);background:var(--bg-primary)}.language-tabs{display:flex;gap:2px}.language-tab{padding:4px 10px;border:none;background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;border-radius:4px;transition:var(--transition-fast)}.language-tab:hover{background:var(--bg-secondary);color:var(--text-primary)}.language-tab.active{background:var(--primary-color);color:var(--text-light)}.code-container{flex:1;overflow:auto;padding:var(--spacing-sm);background:#1e1e1e}.code-content{display:flex;font-family:var(--font-mono);font-size:12px;line-height:1.6}.line-numbers{display:flex;flex-direction:column;padding-right:var(--spacing-sm);border-right:1px solid #333;margin-right:var(--spacing-sm);color:#858585;-webkit-user-select:none;user-select:none;text-align:right;min-width:30px}.line-number{height:19.2px}.code-lines{flex:1;display:flex;flex-direction:column}.code-line{display:flex;align-items:center;height:19.2px;padding:0 var(--spacing-xs);border-radius:2px;transition:var(--transition-fast)}.code-line.highlighted{background:#ffeb3b33}.code-line-text{color:#d4d4d4;white-space:pre}.variable-value{margin-left:var(--spacing-md);padding:1px 6px;background:#4caf5033;border-radius:3px;color:#4caf50;font-size:11px}.code-line-text .keyword{color:#569cd6}.code-line-text .string{color:#ce9178}.code-line-text .number{color:#b5cea8}.code-line-text .comment{color:#6a9955}.code-line-text .function{color:#dcdcaa}.code-line-text .type{color:#4ec9b0}.code-line-text .operator{color:#d4d4d4}.canvas-container{flex:1;position:relative;overflow:hidden;background:linear-gradient(135deg,#f5f7fa,#e4e8ec)}.canvas-svg{width:100%;height:100%;cursor:grab}.canvas-svg:active{cursor:grabbing}.dp-table-group{transition:transform .3s ease}.dp-cell{stroke:var(--border-color);stroke-width:1;transition:fill .3s ease}.dp-cell.header{fill:var(--cell-header)}.dp-cell.default{fill:var(--cell-default)}.dp-cell.current{fill:var(--cell-current);stroke:var(--accent-color);stroke-width:2}.dp-cell.compare{fill:var(--cell-compare)}.dp-cell.result{fill:var(--cell-result);stroke:var(--success-color);stroke-width:2}.dp-cell-text{font-family:var(--font-mono);font-size:14px;fill:var(--text-primary);text-anchor:middle;dominant-baseline:middle;pointer-events:none}.dp-header-text{font-family:var(--font-family);font-size:12px;fill:var(--text-secondary);text-anchor:middle;dominant-baseline:middle;pointer-events:none}.arrow-line{stroke:var(--primary-color);stroke-width:2;fill:none;marker-end:url(#arrowhead)}.arrow-label{font-family:var(--font-family);font-size:11px;fill:var(--text-primary);text-anchor:middle;background:#fff}.arrow-label-bg{fill:#fff;stroke:var(--border-color);stroke-width:1;rx:3}.operation-label{font-family:var(--font-family);font-size:12px;font-weight:500;text-anchor:middle}.operation-label.insert{fill:var(--op-insert)}.operation-label.delete{fill:var(--op-delete)}.operation-label.replace{fill:var(--op-replace)}.operation-label.match{fill:var(--op-match)}.step-description{position:absolute;bottom:var(--spacing-md);left:50%;transform:translate(-50%);background:#fffffff2;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);box-shadow:var(--shadow-md);max-width:80%;text-align:center;font-size:14px;color:var(--text-primary);z-index:10}.zoom-controls{position:absolute;bottom:var(--spacing-md);right:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-xs);z-index:10}.zoom-btn{width:32px;height:32px;border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--bg-secondary);color:var(--text-primary);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.zoom-btn:hover{background:var(--primary-color);color:var(--text-light);border-color:var(--primary-color)}.legend{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:#fffffff2;padding:var(--spacing-sm);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);z-index:10}.legend-title{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.legend-item{display:flex;align-items:center;gap:var(--spacing-xs);font-size:11px;color:var(--text-secondary);margin-bottom:2px}.legend-color{width:16px;height:16px;border-radius:3px;border:1px solid var(--border-color)}.legend-color.current{background:var(--cell-current)}.legend-color.compare{background:var(--cell-compare)}.legend-color.result{background:var(--cell-result)}.control-panel{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:var(--spacing-sm) var(--spacing-md)}.control-buttons{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.control-btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--bg-primary);color:var(--text-primary);font-size:13px;cursor:pointer;transition:var(--transition-fast);min-width:80px}.control-btn:hover{background:var(--primary-light);color:var(--text-light);border-color:var(--primary-light)}.control-btn:disabled{opacity:.5;cursor:not-allowed}.control-btn.primary{background:var(--primary-color);color:var(--text-light);border-color:var(--primary-color)}.control-btn.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}.control-btn svg{width:16px;height:16px}.shortcut-hint{font-size:10px;opacity:.7;margin-left:2px}.speed-control{display:flex;align-items:center;gap:var(--spacing-sm);padding:0 var(--spacing-md)}.speed-label{font-size:12px;color:var(--text-secondary);white-space:nowrap}.speed-slider-container{display:flex;align-items:center;gap:var(--spacing-xs)}.speed-slider{width:100px;height:4px;-webkit-appearance:none;appearance:none;background:var(--border-color);border-radius:2px;outline:none}.speed-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--primary-color);border-radius:50%;cursor:pointer;transition:var(--transition-fast)}.speed-slider::-webkit-slider-thumb:hover{background:var(--primary-dark);transform:scale(1.1)}.speed-value{font-size:12px;font-weight:500;color:var(--text-primary);min-width:35px}.progress-container{margin-top:var(--spacing-sm)}.progress-bar{position:relative;height:8px;background:var(--border-color);border-radius:4px;cursor:pointer;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--success-color),var(--primary-color));border-radius:4px;transition:width .1s ease}.progress-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:var(--primary-color);border:2px solid white;border-radius:50%;box-shadow:var(--shadow-sm);cursor:grab;transition:var(--transition-fast)}.progress-handle:hover{transform:translate(-50%,-50%) scale(1.2)}.progress-handle:active{cursor:grabbing}.progress-info{display:flex;justify-content:space-between;margin-top:var(--spacing-xs);font-size:11px;color:var(--text-secondary)}.wechat-float{position:fixed;bottom:var(--spacing-lg);right:var(--spacing-lg);z-index:100}.wechat-trigger{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#07c160,#00a854);border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:var(--transition-normal)}.wechat-trigger:hover{transform:scale(1.1);box-shadow:0 8px 25px #07c16066}.wechat-trigger svg{width:28px;height:28px;fill:#fff}.wechat-trigger-text{font-size:8px;color:#fff;margin-top:2px;font-weight:500}.wechat-popup{position:absolute;bottom:70px;right:0;background:var(--bg-secondary);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);padding:var(--spacing-md);width:240px;animation:popupIn .3s ease}@keyframes popupIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.wechat-popup:after{content:"";position:absolute;bottom:-8px;right:20px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--bg-secondary)}.wechat-popup-title{font-size:14px;font-weight:600;color:var(--text-primary);text-align:center;margin-bottom:var(--spacing-sm)}.wechat-popup-desc{font-size:12px;color:var(--text-secondary);text-align:center;margin-bottom:var(--spacing-sm)}.wechat-popup-highlight{color:#07c160;font-weight:500}.wechat-qr-image{width:100%;height:auto;border-radius:var(--border-radius);border:1px solid var(--border-color)}:root{--primary-color: #2196F3;--primary-light: #64B5F6;--primary-dark: #1976D2;--secondary-color: #00BCD4;--accent-color: #FF9800;--bg-primary: #f5f7fa;--bg-secondary: #ffffff;--bg-dark: #1e2a38;--text-primary: #2c3e50;--text-secondary: #7f8c8d;--text-light: #ffffff;--success-color: #4CAF50;--warning-color: #FF9800;--error-color: #f44336;--info-color: #2196F3;--cell-default: #ffffff;--cell-current: #FFE082;--cell-compare: #B3E5FC;--cell-result: #A5D6A7;--cell-header: #E3F2FD;--op-insert: #81C784;--op-delete: #E57373;--op-replace: #FFB74D;--op-match: #64B5F6;--border-color: #e0e0e0;--border-radius: 8px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .15);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "Fira Code", "Monaco", "Consolas", monospace;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary)}.app{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}.main-content{display:flex;flex:1;overflow:hidden;padding:var(--spacing-sm);gap:var(--spacing-sm)}.left-panel{width:320px;min-width:280px;display:flex;flex-direction:column;gap:var(--spacing-sm);overflow:hidden}.canvas-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-secondary);border-radius:var(--border-radius);box-shadow:var(--shadow-md)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary);border-radius:3px}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}