:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.symmetric-tree-app{display:flex;flex-direction:column;height:100vh;overflow:hidden;background-color:#1a1d29}.main-container{display:flex;flex:1;overflow:hidden}.sidebar{width:280px;min-width:240px;max-width:280px;background:#252836;border-right:1px solid #3a3f4b;display:flex;flex-direction:column;overflow-y:auto;padding:12px;gap:12px}.sidebar.collapsed{width:48px;min-width:48px;padding:8px}.sidebar.collapsed .controls-section,.sidebar.collapsed .algorithm-explanation{display:none}.sidebar-toggle{position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:24px;height:48px;background:#3a3f4b;border:none;border-radius:0 6px 6px 0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#aaa;z-index:10}.sidebar-toggle:hover{background:#4a4f5b;color:#fff}.controls-section{display:flex;flex-direction:column;gap:12px}.tree-input-compact{display:flex;flex-direction:column;gap:8px}.input-row{display:flex;gap:8px}.tree-input-field-compact{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:13px;font-family:monospace;transition:border-color .2s}.tree-input-field-compact:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 2px #2196f31a}.create-tree-btn-compact{padding:8px 16px;background:#2196f3;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:background .2s}.create-tree-btn-compact:hover{background:#1976d2}.preset-examples{display:flex;flex-wrap:wrap;gap:6px}.preset-btn{padding:4px 10px;background:#f0f0f0;border:1px solid #ddd;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s}.preset-btn:hover{background:#e3f2fd;border-color:#2196f3;color:#1976d2}.random-buttons{display:flex;gap:8px}.random-btn{flex:1;padding:8px 12px;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s}.random-btn.symmetric{background:linear-gradient(135deg,#4caf50,#8bc34a);color:#fff}.random-btn.symmetric:hover{background:linear-gradient(135deg,#43a047,#7cb342)}.random-btn.random{background:linear-gradient(135deg,#ff9800,#ffc107);color:#fff}.random-btn.random:hover{background:linear-gradient(135deg,#f57c00,#ffb300)}.random-btn:disabled{opacity:.6;cursor:not-allowed}.method-selector{display:flex;gap:8px}.method-selector label{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;background:#f5f5f5;border:2px solid transparent;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}.method-selector label:hover{background:#e3f2fd}.method-selector label.active{background:#e3f2fd;border-color:#2196f3;color:#1976d2}.method-selector input{display:none}.error-msg{padding:8px 12px;background:#ffebee;color:#c62828;border-radius:6px;font-size:13px;border-left:3px solid #c62828}.result-badge{padding:10px;border-radius:8px;text-align:center;font-weight:600;font-size:16px}.result-badge.symmetric{background:linear-gradient(135deg,#4caf501a,#8bc34a1a);color:#2e7d32;border:1px solid #4CAF50}.result-badge.not-symmetric{background:linear-gradient(135deg,#f443361a,#ff98001a);color:#c62828;border:1px solid #F44336}.animation-controls{background:#f8f9fa;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:12px}.playback-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.ctrl-btn{padding:6px 10px;background:#fff;border:1px solid #ddd;border-radius:6px;cursor:pointer;font-size:12px;transition:all .2s;display:flex;align-items:center;gap:4px}.ctrl-btn:hover:not(:disabled){background:#f0f0f0;border-color:#bbb}.ctrl-btn:disabled{opacity:.5;cursor:not-allowed}.ctrl-btn.play{background:#2196f3;color:#fff;border-color:#2196f3}.ctrl-btn.play:hover{background:#1976d2}.ctrl-btn.play.playing{background:#ff9800;border-color:#ff9800}.speed-row{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:#666}.speed-btn{padding:4px 12px;background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:12px;transition:all .2s}.speed-btn:hover{background:#f0f0f0}.speed-btn.active{background:#2196f3;color:#fff;border-color:#2196f3}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:8px;min-width:0}.visualization-area{flex:1;display:flex;gap:8px;min-height:0}.tree-panel{flex:3;display:flex;flex-direction:column;background:#1a1d29;border-radius:8px;overflow:hidden;position:relative;cursor:grab}.tree-panel:active{cursor:grabbing}.tree-panel .tree-visualization-container{flex:1;min-height:0}.step-info{position:absolute;bottom:8px;left:8px;right:8px;padding:10px 14px;background:#252836f2;border-radius:8px;border:1px solid #3a3f4b;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10}.step-header{font-weight:600;color:#fff;margin-bottom:4px;font-size:13px}.step-detail{font-size:12px;color:#aaa;margin-bottom:4px}.step-hint{font-size:11px;color:#2196f3;font-style:italic}.code-panel{flex:1;min-width:320px;max-width:400px;background:#252836;border-radius:8px;overflow:hidden;transition:all .3s ease}.code-panel.collapsed{min-width:40px;max-width:40px}.code-panel-toggle{position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:24px;height:48px;background:#3a3f4b;border:none;border-radius:6px 0 0 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#aaa;z-index:10}.code-panel-toggle:hover{background:#4a4f5b;color:#fff}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#999}.empty-icon{font-size:64px;margin-bottom:16px}.empty-state p{font-size:16px}.algorithm-explanation{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:12px}.algorithm-explanation h3{margin:0 0 8px;color:#2196f3;font-size:14px}.explanation-content p{margin:0 0 8px;font-size:13px;color:#555}.rule-box{background:#f8f9fa;border-radius:6px;padding:10px}.rule-title{font-weight:600;font-size:13px;margin-bottom:6px;color:#333}.rule-list{margin:0;padding-left:20px;font-size:12px;color:#555}.rule-list li{margin-bottom:4px}.rule-list ul{margin-top:4px;padding-left:16px}.info-icon,.check-icon,.error-icon{margin-right:4px}@media (max-width: 1200px){.visualization-area{flex-direction:column}.code-panel{max-width:none;min-width:auto}}@media (max-width: 768px){.main-container{flex-direction:column}.sidebar{width:100%;max-height:40vh;border-right:none;border-bottom:1px solid #e0e0e0}.main-content{padding:12px}.playback-row{flex-wrap:wrap}.ctrl-btn{font-size:11px;padding:5px 8px}}.tree-visualization-container{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.tree-visualization{width:100%;height:100%}.explanation-panel{position:absolute;bottom:10px;left:10px;right:10px;background:#fffffff2;border-radius:8px;padding:10px 15px;box-shadow:0 2px 10px #0000001a;z-index:10}.tree-visualization{display:flex;flex-direction:column;width:100%;height:100vh;overflow:hidden;font-family:Arial,sans-serif}.app-header{background:linear-gradient(135deg,#1976d2,#2196f3);color:#fff;padding:15px 0;text-align:center;box-shadow:0 2px 4px #0000001a;z-index:10}.app-title{font-size:1.8rem;margin:0;font-weight:500}.app-subtitle{font-size:.9rem;margin:5px 0 0;font-weight:300;opacity:.9}.main-content{display:flex;flex:1;overflow:hidden}.control-panel{width:340px;background-color:#f8f9fa;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;overflow-y:auto;padding:15px}.tree-input-section{margin-bottom:15px;padding:10px;background-color:#fff;border-radius:4px;box-shadow:0 1px 3px #0000001a}.current-tree-data{padding:8px;background-color:#f5f5f5;border-radius:4px;font-family:monospace;margin-bottom:10px;overflow:auto}.tree-buttons{display:flex;gap:10px}.tree-button{flex:1;padding:8px;background-color:#2196f3;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.tree-button:hover{background-color:#1976d2}.algorithm-selector{margin:15px 0}.algorithm-option{margin-right:15px;display:inline-flex;align-items:center}.algorithm-option input{margin-right:5px}.algorithm-result{padding:8px;background-color:#f5f5f5;border-radius:4px;margin:10px 0}.result-text{color:#4caf50;font-weight:700}.algorithm-explanation{margin-top:15px;padding:15px;background-color:#fff;border-radius:4px;box-shadow:0 1px 3px #0000001a}.explanation-title{margin-top:0;font-size:1.1rem;color:#333;padding-bottom:8px;border-bottom:1px solid #eee}.rule-list{padding-left:20px;margin-bottom:0}.rule-list li{margin-bottom:8px;position:relative}.rule-success{color:#4caf50}.rule-failure{color:#f44336}.sub-rule-list{padding-left:20px;margin-top:8px}.visualization-container{flex:1;position:relative;background-color:#1a1d29;overflow:hidden;display:flex;align-items:center;justify-content:center}.tree-visualization-container{width:100%;height:100%;background-color:#1a1d29;position:relative}.visualization-header{position:absolute;top:0;left:0;right:0;background-color:#2196f3;color:#fff;text-align:center;padding:10px;font-size:1.2rem;z-index:5}.visualization-container svg{width:100%;height:100%;display:block;overflow:visible}.tree-node{cursor:pointer;transition:transform .2s}.node-circle{transition:all .3s ease-in-out}.tree-node-root .node-circle{fill:#c67b30;stroke:#e8a54b;stroke-width:3}.tree-node-left .node-circle,.tree-node-right .node-circle{fill:#4a4a4a;stroke:#6b6b6b;stroke-width:3}.tree-node-null .node-circle{fill:transparent;stroke:#6b6b6b;stroke-width:1.5;stroke-dasharray:5,3}.tree-node.highlighted .node-circle,.tree-node.comparing .node-circle{fill:#7b68ee;stroke:#fff;stroke-width:4}.node-text{font-size:18px;font-weight:700;text-anchor:middle;dominant-baseline:middle;pointer-events:none;fill:#fff}.null-text{font-size:12px;fill:#6b6b6b}.tree-node.highlight .node-circle{stroke-width:3;stroke:#ff9800;filter:drop-shadow(0 0 2px rgba(255,152,0,.5))}.tree-node.left-highlight .node-circle{stroke-width:3;stroke:#4caf50;fill:#e8f5e9}.tree-node.right-highlight .node-circle{stroke-width:3;stroke:#8bc34a;fill:#f1f8e9}.tree-link{fill:none;stroke:#6b6b6b;stroke-width:2;stroke-linecap:round;transition:stroke .3s,stroke-width .3s}.null-link{stroke-dasharray:4,4}.arrow-head{transition:fill .3s}.tree-link.highlighted{stroke-width:3;filter:drop-shadow(0 0 2px rgba(0,0,0,.2))}.left-label,.right-label{font-size:10px;fill:#fff;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.left-label-bg{fill:#4caf50}.right-label-bg{fill:#8bc34a}.algorithm-controller{margin-top:15px;padding:15px;background-color:#fff;border-radius:4px;box-shadow:0 1px 3px #0000001a}.controller-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.controller-header h3{margin:0;font-size:1rem;color:#333}.speed-control{display:flex;align-items:center;gap:5px}.speed-control select{padding:2px 5px;border-radius:3px;border:1px solid #ddd}.steps-container{max-height:120px;overflow-y:auto;padding:8px;background-color:#f5f5f5;border-radius:4px;margin-bottom:10px}.current-step{display:flex;align-items:flex-start;padding:5px;background-color:#fff;border-radius:4px;margin-bottom:5px;box-shadow:0 1px 2px #0000000d}.step-result{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:8px;flex-shrink:0;font-size:12px;font-weight:700}.step-result.success{background-color:#e8f5e9;color:#4caf50}.step-result.failure{background-color:#ffebee;color:#f44336}.step-message{flex:1}.step-text{font-size:.9rem;transition:margin-left .3s}.controls{display:flex;flex-wrap:wrap;gap:8px}.controls button{padding:5px 10px;border:none;border-radius:4px;cursor:pointer;font-size:.85rem;transition:all .2s}.controls button:disabled{opacity:.5;cursor:not-allowed}.reset-btn{background-color:#ffebee;color:#d32f2f}.reset-btn:hover:not(:disabled){background-color:#ffcdd2}.start-btn{background-color:#e8f5e9;color:#388e3c}.start-btn:hover:not(:disabled){background-color:#c8e6c9}.step-btn{background-color:#e3f2fd;color:#1976d2}.step-btn:hover:not(:disabled){background-color:#bbdefb}.auto-btn{background-color:#fff3e0;color:#e65100}.auto-btn:hover:not(:disabled){background-color:#ffe0b2}.auto-btn.active{background-color:#ff9800;color:#fff}@media (max-width: 1024px){.main-content{flex-direction:column}.control-panel{width:100%;max-height:40vh;border-right:none;border-bottom:1px solid #e0e0e0}.visualization-container{height:60vh}}@media (max-width: 768px){.app-title{font-size:1.5rem}.app-subtitle{font-size:.8rem}.tree-buttons{flex-direction:column}.controls{justify-content:center}.algorithm-option{display:block;margin-bottom:8px}}.code-display{background-color:#1e1e1e;border-radius:8px;overflow:hidden;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;box-shadow:0 2px 8px #00000026;display:flex;flex-direction:column;height:100%}.code-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background-color:#2d2d2d;border-bottom:1px solid #3d3d3d}.language-tabs{display:flex;gap:4px}.language-tab{padding:4px 10px;background-color:transparent;border:1px solid #4d4d4d;border-radius:4px;color:#9d9d9d;font-size:11px;cursor:pointer;transition:all .2s ease}.language-tab:hover{background-color:#3d3d3d;color:#e0e0e0}.language-tab.active{background-color:#0d6efd;border-color:#0d6efd;color:#fff}.code-method{color:#9cdcfe;font-size:11px;padding:2px 8px;background-color:#3d3d3d;border-radius:4px}.code-content{display:flex;overflow-x:auto;flex:1;overflow-y:auto}.line-numbers{display:flex;flex-direction:column;padding:12px 0;background-color:#252526;border-right:1px solid #3d3d3d;-webkit-user-select:none;user-select:none;min-width:55px}.line-number{padding:0 8px;color:#858585;text-align:right;line-height:1.6;font-size:12px;display:flex;align-items:center;justify-content:flex-end;gap:4px;min-height:21px;transition:all .2s ease}.line-number.highlighted{background-color:#ffeb3b0d}.line-number.execution-line{background-color:#ffeb3b26;color:#ffeb3b}.line-num-text{min-width:20px;text-align:right}.execution-arrow{color:#ffeb3b;font-size:10px;animation:pulse-arrow 1s ease-in-out infinite;flex-shrink:0}@keyframes pulse-arrow{0%,to{opacity:1;transform:translate(0)}50%{opacity:.6;transform:translate(2px)}}.code-lines{flex:1;margin:0;padding:12px 0;overflow-x:auto}.code-line{display:flex;align-items:center;padding:0 12px;line-height:1.6;white-space:pre;transition:all .2s ease;min-height:21px;position:relative}.code-line.highlighted{background-color:#ffeb3b14}.code-line.execution{background-color:#ffeb3b2e;border-left:3px solid #ffeb3b;padding-left:9px;box-shadow:inset 0 0 20px #ffeb3b0d}.code-text{color:#d4d4d4;flex-shrink:0}.variable-annotations{display:inline-flex;gap:8px;margin-left:20px;flex-wrap:wrap;align-items:center}.variable-tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:4px;font-size:11px;animation:fade-in .3s ease;white-space:nowrap;box-shadow:0 1px 3px #0003;transition:all .2s ease}.variable-tag:hover{transform:translateY(-1px);box-shadow:0 2px 6px #0000004d}.variable-tag.highlight-pulse{animation:highlight-pulse 1.5s ease-in-out infinite}@keyframes highlight-pulse{0%,to{box-shadow:0 1px 3px #0003}50%{box-shadow:0 0 12px #ffffff4d}}.variable-tag.variable-node{background-color:#2196f340;border:1px solid #2196F3;color:#64b5f6}.variable-tag.variable-value{background-color:#9c27b040;border:1px solid #9C27B0;color:#ce93d8}.variable-tag.variable-result{background-color:#4caf5040;border:1px solid #4CAF50;color:#81c784}.variable-tag.variable-size{background-color:#ff980040;border:1px solid #FF9800;color:#ffb74d}.variable-tag.variable-boolean{background-color:#00bcd440;border:1px solid #00BCD4;color:#4dd0e1}.variable-tag.variable-comparison{background-color:#e91e6340;border:1px solid #E91E63;color:#f48fb1}.var-name{font-weight:600;letter-spacing:.3px}.var-equals{margin:0 4px;opacity:.6}.var-value{font-weight:700;display:inline-flex;align-items:center;gap:3px}.var-icon{font-size:10px}@keyframes fade-in{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.variables-panel{background:linear-gradient(180deg,#252526,#1e1e1e);border-top:1px solid #3d3d3d;padding:12px;min-height:80px;max-height:160px;overflow-y:auto;flex-shrink:0}.variables-header{display:flex;align-items:center;gap:8px;color:#9cdcfe;font-size:12px;font-weight:600;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #3d3d3d}.variables-icon{font-size:14px}.step-type-badge{margin-left:auto;padding:2px 8px;background-color:#ffeb3b33;border:1px solid rgba(255,235,59,.4);border-radius:10px;font-size:10px;color:#ffeb3b;font-weight:500}.variables-groups{display:flex;flex-direction:column;gap:10px}.variable-group{display:flex;flex-direction:column;gap:6px}.group-label{display:flex;align-items:center;gap:6px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:.5px}.group-icon{font-size:8px}.group-items{display:flex;flex-wrap:wrap;gap:8px 16px;padding-left:16px}.variable-item{display:flex;align-items:center;font-size:12px;padding:3px 8px;border-radius:4px;background-color:#ffffff08;transition:all .2s ease}.variable-item:hover{background-color:#ffffff14}.variable-item.variable-node{border-left:2px solid #2196F3}.variable-item.variable-value{border-left:2px solid #9C27B0}.variable-item.variable-result{border-left:2px solid #4CAF50}.variable-item.variable-result.result-true{background-color:#4caf5026}.variable-item.variable-result.result-false{background-color:#f4433626;border-left-color:#f44336}.variable-item.variable-size{border-left:2px solid #FF9800}.variable-key{color:#9cdcfe;font-weight:500}.variable-separator{color:#666;margin:0 4px}.variable-val{font-weight:600;display:inline-flex;align-items:center;gap:4px}.val-icon{font-size:10px}.variable-val.val-null{color:#569cd6;font-style:italic}.variable-val.val-true{color:#4ec9b0}.variable-val.val-false{color:#f48771}.variable-val.val-number{color:#b5cea8}.variable-val.val-string{color:#ce9178}.code-text .keyword{color:#569cd6}.code-text .type{color:#4ec9b0}.code-text .method{color:#dcdcaa}.code-text .string{color:#ce9178}.code-text .number{color:#b5cea8}.code-text .comment{color:#6a9955;font-style:italic}.code-text .operator{color:#d4d4d4}.code-content::-webkit-scrollbar,.variables-panel::-webkit-scrollbar{width:8px;height:8px}.code-content::-webkit-scrollbar-track,.variables-panel::-webkit-scrollbar-track{background:#1e1e1e}.code-content::-webkit-scrollbar-thumb,.variables-panel::-webkit-scrollbar-thumb{background:#424242;border-radius:4px}.code-content::-webkit-scrollbar-thumb:hover,.variables-panel::-webkit-scrollbar-thumb:hover{background:#555}@media (max-width: 768px){.code-display{font-size:11px}.code-content{max-height:200px}.line-number{padding:0 6px;min-width:45px}.code-line{padding:0 8px}.variable-annotations{margin-left:10px}.variable-tag{padding:1px 6px;font-size:10px}.variables-panel{max-height:100px;padding:8px}.group-items{padding-left:10px}}.bottom-control-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e0e0e0;box-shadow:0 -2px 10px #0000001a;z-index:1000;padding:12px 20px 16px}.bottom-progress-wrapper{width:100%;margin-bottom:12px}.bottom-progress-wrapper .progress-bar-container{margin-bottom:0;padding:0}.bottom-progress-wrapper .progress-bar-track{height:10px}.bottom-progress-wrapper .progress-bar-thumb{width:18px;height:18px;top:-4px}.bottom-controls-wrapper{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap}.playback-controls{display:flex;gap:8px;align-items:center}.bottom-control-bar .ctrl-btn{padding:8px 14px;background:#fff;border:1px solid #ddd;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s;display:flex;align-items:center;gap:4px}.bottom-control-bar .ctrl-btn:hover:not(:disabled){background:#f0f0f0;border-color:#bbb}.bottom-control-bar .ctrl-btn:disabled{opacity:.5;cursor:not-allowed}.bottom-control-bar .ctrl-btn.play{background:#2196f3;color:#fff;border-color:#2196f3;padding:8px 20px}.bottom-control-bar .ctrl-btn.play:hover{background:#1976d2}.bottom-control-bar .ctrl-btn.play.playing{background:#ff9800;border-color:#ff9800}.speed-controls{display:flex;align-items:center;gap:8px;font-size:13px;color:#666}.speed-label{font-weight:500}.speed-slider-container{display:flex;gap:4px}.bottom-control-bar .speed-btn{padding:6px 14px;background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:12px;transition:all .2s;min-width:45px}.bottom-control-bar .speed-btn:hover{background:#f0f0f0}.bottom-control-bar .speed-btn.active{background:#2196f3;color:#fff;border-color:#2196f3}.shortcut-hint{font-size:10px;opacity:.7;padding:1px 4px;background:#0000001a;border-radius:3px;margin-left:2px}.ctrl-btn.play .shortcut-hint{background:#fff3}@media (max-width: 768px){.bottom-control-bar{padding:10px 12px 14px}.bottom-controls-wrapper{gap:12px}.playback-controls{gap:4px}.bottom-control-bar .ctrl-btn{padding:6px 10px;font-size:12px}.bottom-control-bar .ctrl-btn.play{padding:6px 14px}.speed-controls{font-size:12px;gap:4px}.bottom-control-bar .speed-btn{padding:4px 10px;font-size:11px}}@media (max-width: 480px){.bottom-controls-wrapper{flex-direction:column;gap:10px}}.progress-bar-container{width:100%;padding:10px 0;margin-bottom:1rem}.progress-bar-track{position:relative;width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;cursor:pointer;transition:height .2s ease}.progress-bar-track:hover{height:10px}.progress-bar-track:hover .progress-bar-thumb{width:18px;height:18px;top:-4px}.progress-bar-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);border-radius:4px;transition:width .1s ease}.progress-bar-thumb{position:absolute;top:-3px;width:14px;height:14px;background-color:#fff;border:3px solid #4CAF50;border-radius:50%;transform:translate(-50%);cursor:grab;transition:all .2s ease;box-shadow:0 2px 4px #0003}.progress-bar-thumb:active{cursor:grabbing;transform:translate(-50%) scale(1.2);box-shadow:0 3px 8px #0000004d}.progress-bar-labels{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:#666}.progress-label-start,.progress-label-end{color:#999}.progress-label-current{font-weight:600;color:#4caf50;background-color:#4caf501a;padding:2px 8px;border-radius:4px}@media (max-width: 768px){.progress-bar-track{height:10px}.progress-bar-thumb{width:18px;height:18px;top:-4px}.progress-bar-labels{font-size:11px}}.recursion-call-visualizer{background:#fff;border-radius:8px;padding:12px;margin:8px 0;box-shadow:0 2px 8px #0000001a;border-left:4px solid #2196F3;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.recursion-call-visualizer.initial{border-left-color:#2196f3}.recursion-call-visualizer.compare{border-left-color:#ff9800}.recursion-call-visualizer.check-null{border-left-color:#9c27b0}.recursion-call-visualizer.check-value{border-left-color:#f44336}.recursion-call-visualizer.check-subtree{border-left-color:#4caf50}.recursion-call-visualizer.return{border-left-color:#607d8b}.recursion-call-visualizer.final{border-left-color:#e91e63}.recursion-call-visualizer.entering{background:linear-gradient(135deg,#e3f2fd,#bbdefb)}.recursion-call-visualizer.exiting{background:linear-gradient(135deg,#fff3e0,#ffe0b2)}.call-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,.1)}.call-icon{font-size:20px}.call-action{font-weight:600;font-size:14px;color:#333;padding:2px 8px;background:#0000000d;border-radius:4px}.call-depth{margin-left:auto;font-size:12px;color:#666;background:#f0f0f0;padding:2px 8px;border-radius:10px}.call-body{transition:padding-left .3s ease}.call-description{font-family:Consolas,Monaco,monospace;font-size:13px;color:#1565c0;background:#2196f31a;padding:8px 12px;border-radius:4px;margin-bottom:8px}.call-params{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}.param{display:flex;flex-direction:column;align-items:center;padding:8px 16px;border-radius:8px;min-width:80px}.param.left{background:linear-gradient(135deg,#fce4ec,#f8bbd9);border:1px solid #E91E63}.param.right{background:linear-gradient(135deg,#f3e5f5,#e1bee7);border:1px solid #9C27B0}.param-label{font-size:11px;color:#666;margin-bottom:4px}.param-value{font-size:18px;font-weight:700;font-family:Consolas,Monaco,monospace}.param.left .param-value{color:#c2185b}.param.right .param-value{color:#7b1fa2}.param-arrow{font-size:24px;color:#ff9800;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}.return-value{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 12px;border-radius:6px;font-weight:600}.return-value.success{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);color:#2e7d32;border:1px solid #4CAF50}.return-value.failure{background:linear-gradient(135deg,#ffebee,#ffcdd2);color:#c62828;border:1px solid #F44336}.return-arrow{font-size:18px;animation:bounceLeft .5s ease-out}@keyframes bounceLeft{0%{transform:translate(20px);opacity:0}50%{transform:translate(-5px)}to{transform:translate(0);opacity:1}}.return-text{font-family:Consolas,Monaco,monospace;font-size:14px}.recursion-indicator{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed #ccc}.recursion-line{flex:1;height:2px;background:linear-gradient(90deg,#4CAF50,transparent);animation:expandLine .5s ease-out}@keyframes expandLine{0%{width:0}to{width:100%}}.recursion-text{font-size:12px;color:#4caf50;font-weight:500;white-space:nowrap}@media (max-width: 768px){.recursion-call-visualizer{padding:10px}.call-params{flex-direction:column;gap:8px}.param-arrow{transform:rotate(90deg)}.param{width:100%}}.compact-recursion-stack{position:absolute;top:20px;left:20px;width:180px;max-height:300px;background:#1a1d29f2;border-radius:8px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;z-index:100;box-shadow:0 4px 12px #0000004d}.stack-header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.1)}.stack-icon{font-size:14px}.stack-title{font-size:12px;font-weight:600;color:#ffffffe6;flex:1}.stack-count{font-size:11px;color:#fff9;background:#ffffff1a;padding:2px 6px;border-radius:10px}.stack-frames{max-height:250px;overflow-y:auto;padding:6px}.stack-frames::-webkit-scrollbar{width:4px}.stack-frames::-webkit-scrollbar-track{background:transparent}.stack-frames::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.frame{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:4px;background:#ffffff0d;border-radius:6px;cursor:pointer;transition:all .2s ease;border:1px solid transparent;position:relative}.frame:hover{background:#ffffff1a}.frame.active{background:#2196f333;border-color:#2196f380;box-shadow:0 0 8px #2196f34d}.frame.success{background:#4caf5026;border-color:#4caf504d}.frame.fail{background:#f4433626;border-color:#f443364d}.frame-depth{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fffc;background:#ffffff1a;border-radius:4px}.frame.active .frame-depth{background:#2196f34d;color:#64b5f6}.frame.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#ff9800,#ffc107);border-radius:3px 0 0 3px}.frame-values{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;font-size:12px;font-family:SF Mono,Monaco,monospace}.left-val{color:#f48fb1}.separator{color:#fff6;font-size:10px}.right-val{color:#ce93d8}.frame-status{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#ffffff80}.frame-status.success{color:#4caf50}.frame-status.fail{color:#f44336}@keyframes frameEnter{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.frame{animation:frameEnter .2s ease-out}.app-header-new{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(135deg,#2196f3,#1976d2);color:#fff;box-shadow:0 2px 10px #0000001a}.header-content{flex:1}.header-title{margin:0;font-size:1.4rem;font-weight:700}.leetcode-link{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .3s ease}.leetcode-link:hover{color:#ffeb3b}.external-link-icon{opacity:.7;transition:opacity .3s ease}.leetcode-link:hover .external-link-icon{opacity:1}.header-subtitle{margin:4px 0 0;font-size:.85rem;opacity:.9}.github-link{display:flex;align-items:center;gap:6px;padding:8px 16px;background-color:#ffffff26;border-radius:20px;color:#fff;text-decoration:none;transition:all .3s ease;font-size:14px;font-weight:500}.github-link:hover{background-color:#ffffff40;transform:translateY(-2px)}.github-icon{width:20px;height:20px}.github-text{display:inline}.github-stars{display:flex;align-items:center;gap:4px;padding:2px 8px;background-color:#fff3;border-radius:12px;font-size:12px}.star-icon{width:14px;height:14px;color:gold}.star-count{font-weight:600}@media (max-width: 768px){.app-header-new{padding:10px 15px}.header-title{font-size:1.1rem}.header-subtitle{font-size:.75rem}.github-text{display:none}.github-link{padding:8px;border-radius:50%}}.wechat-float{position:fixed;right:20px;bottom:20px;z-index:1000}.wechat-float-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:60px;height:60px;background:linear-gradient(135deg,#07c160,#06ad56);border-radius:50%;cursor:pointer;box-shadow:0 4px 12px #07c16066;transition:all .3s ease}.wechat-float-button:hover{transform:scale(1.1);box-shadow:0 6px 20px #07c16080}.wechat-icon{width:28px;height:28px;color:#fff}.float-text{font-size:10px;color:#fff;margin-top:2px;font-weight:500}.wechat-popup{position:absolute;bottom:70px;right:0;background:#fff;border-radius:12px;box-shadow:0 8px 30px #00000026;padding:16px;animation:popup-fade-in .3s ease;min-width:200px}@keyframes popup-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.popup-arrow{position:absolute;bottom:-8px;right:24px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.popup-content{display:flex;flex-direction:column;align-items:center}.qr-code{width:180px;height:auto;border-radius:8px;border:1px solid #eee}.popup-tip{margin-top:12px;font-size:13px;color:#666;text-align:center;line-height:1.5}.popup-tip strong{color:#07c160}@media (max-width: 768px){.wechat-float{right:10px;bottom:10px}.wechat-float-button{width:50px;height:50px}.wechat-icon{width:24px;height:24px}.float-text{font-size:9px}.wechat-popup{right:-10px;min-width:180px}.qr-code{width:150px}}:root{--primary-color: #2196F3;--primary-dark: #1976D2;--success-color: #4CAF50;--danger-color: #F44336;--warning-color: #FF9800;--light-color: #f8f9fa;--dark-color: #333;--border-color: #e0e0e0}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100vh;width:100vw;overflow:hidden}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f7fa;color:#333}.app{height:100vh;width:100vw;overflow:hidden}button{cursor:pointer;outline:none;font-family:inherit}button:focus{outline:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}::selection{background:#2196f34d}a{color:var(--primary-color);text-decoration:none}a:hover{text-decoration:underline}