:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.4;font-weight:400;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}#root{height:100%}.input-panel{display:flex;flex-direction:column;gap:4px}.input-form{display:flex;align-items:center;gap:6px}.input-field{padding:5px 10px;font-size:13px;border:1px solid #ddd;border-radius:4px;width:150px;transition:border-color .2s}.input-field:focus{outline:none;border-color:#2196f3}.input-field:disabled{background:#f5f5f5;cursor:not-allowed}.submit-btn{padding:5px 12px;font-size:13px;background:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background .2s;font-weight:500}.submit-btn:hover:not(:disabled){background:#43a047}.submit-btn:disabled{background:#ccc;cursor:not-allowed}.presets{display:flex;gap:4px;margin-left:8px;padding-left:8px;border-left:1px solid #e0e0e0}.preset-btn{padding:4px 8px;font-size:12px;background:#f0f0f0;color:#666;border:1px solid #ddd;border-radius:4px;cursor:pointer;transition:all .2s;font-family:Fira Code,monospace}.preset-btn:hover:not(:disabled){background:#e0e0e0;border-color:#ccc}.preset-btn.active{background:#e3f2fd;border-color:#2196f3;color:#1976d2}.preset-btn:disabled{opacity:.5;cursor:not-allowed}.preset-btn.random-btn{font-size:14px;padding:4px 10px}.preset-btn.random-btn:hover:not(:disabled){background:#fff3e0;border-color:#ff9800}.error-message{color:#f44336;font-size:11px}.control-panel{display:flex;align-items:center;gap:8px;width:100%}.controls{display:flex;gap:6px;align-items:center}.control-btn{padding:5px 10px;font-size:12px;border:none;border-radius:4px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:4px;font-weight:500}.control-btn:disabled{opacity:.5;cursor:not-allowed}.play-btn{background:#4caf50;color:#fff}.play-btn:hover:not(:disabled){background:#45a049}.pause-btn{background:#ff9800;color:#fff}.pause-btn:hover:not(:disabled){background:#f57c00}.step-back-btn{background:#9c27b0;color:#fff}.step-back-btn:hover:not(:disabled){background:#7b1fa2}.step-btn{background:#2196f3;color:#fff}.step-btn:hover:not(:disabled){background:#1976d2}.reset-btn{background:#f44336;color:#fff}.reset-btn:hover:not(:disabled){background:#d32f2f}.speed-control{display:flex;align-items:center;gap:6px;margin-left:8px;padding-left:8px;border-left:1px solid #ddd}.speed-control label{font-size:12px;color:#666}.speed-control input[type=range]{width:80px}.speed-value{font-size:11px;color:#666;min-width:40px}.step-indicator{display:flex;align-items:center;gap:8px;margin-left:12px;padding-left:12px;border-left:1px solid #ddd;flex:1}.step-text{font-size:11px;color:#666;white-space:nowrap}.step-slider{flex:1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:3px;outline:none;cursor:pointer}.step-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#fff;border:2px solid #4CAF50;border-radius:50%;cursor:grab;box-shadow:0 2px 4px #0003;transition:transform .15s ease,box-shadow .15s ease}.step-slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 3px 6px #0000004d}.step-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1)}.step-slider::-moz-range-thumb{width:16px;height:16px;background:#fff;border:2px solid #4CAF50;border-radius:50%;cursor:grab;box-shadow:0 2px 4px #0003}.step-slider::-moz-range-thumb:hover{transform:scale(1.15)}.step-slider::-moz-range-track{background:transparent;border-radius:3px;height:6px}.shortcut-hint{font-size:10px;opacity:.8;margin-left:2px}.state-display{padding:.35rem .6rem;background:#fff;border-radius:6px;border:1px solid #e0e0e0;flex-shrink:0}.state-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.15rem}.state-row:last-child{margin-bottom:0}.state-label{font-weight:500;min-width:65px;color:#333;font-size:.8rem}.number-boxes{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.number-box{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;border-radius:4px;transition:all .3s ease}.path-box{background:#4caf50;color:#fff;box-shadow:0 3px 8px #4caf504d}.path-box.just-added{animation:pop-in .4s ease;background:#2e7d32;box-shadow:0 4px 12px #4caf5080}@keyframes pop-in{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.available-box{background:#e0e0e0;color:#333}.available-box.just-returned{animation:slide-down .4s ease;background:#ff9800;color:#fff}@keyframes slide-down{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.empty-hint{color:#999;font-style:italic}.arrow-indicator{display:flex;align-items:center;justify-content:center;gap:.2rem;padding:.15rem;margin:.1rem 0;border-radius:4px;font-weight:600;font-size:.7rem}.arrow-indicator.select{background:#4caf501a;color:#4caf50}.arrow-indicator.select .arrow{animation:arrow-up .5s ease infinite}@keyframes arrow-up{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.arrow-indicator.backtrack{background:#ff98001a;color:#ff9800}.arrow-indicator.backtrack .arrow{animation:arrow-down .5s ease infinite}@keyframes arrow-down{0%,to{transform:translateY(0)}50%{transform:translateY(5px)}}.arrow-indicator.complete{background:#9c27b01a;color:#9c27b0}.arrow-indicator.complete .arrow{animation:check-bounce .5s ease}@keyframes check-bounce{0%{transform:scale(0)}50%{transform:scale(1.3)}to{transform:scale(1)}}.arrow{font-size:1rem}.arrow-text{font-size:.75rem}.results-panel{padding:.75rem;background:#fff;border-radius:8px;border:1px solid #e0e0e0;height:100%;overflow-y:auto;display:flex;flex-direction:column}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;padding-bottom:.35rem;border-bottom:1px solid #e0e0e0;flex-shrink:0}.results-header h3{margin:0;font-size:.9rem;color:#333}.results-count{font-size:.9rem;color:#666;background:#f0f0f0;padding:.25rem .5rem;border-radius:4px}.results-list{display:flex;flex-wrap:wrap;gap:.35rem;flex:1;overflow-y:auto;align-content:flex-start}.result-item{padding:.35rem .5rem;background:#f5f5f5;border-radius:4px;font-family:monospace;font-size:.8rem;cursor:pointer;transition:all .2s}.result-item:hover{background:#9c27b0;color:#fff;transform:scale(1.05)}.no-results{color:#999;font-style:italic;text-align:center;padding:1rem}.tree-visualization{width:100%;height:100%;background:linear-gradient(135deg,#fafafa,#f0f0f0);border-radius:12px;border:1px solid #e0e0e0;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000000d}.tree-visualization svg{width:100%;height:100%;display:block}.link{transition:stroke .3s ease,stroke-width .3s ease,opacity .3s ease}.node{cursor:pointer}.node.dimmed{opacity:.3}.node-circle{transition:fill .3s ease,stroke .3s ease,opacity .3s ease,r .2s ease}.node:hover .node-circle{filter:brightness(1.1)}.node-text{pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .3s ease}.pulse-ring{animation:pulse-animation 1.5s ease-in-out infinite}@keyframes pulse-animation{0%{r:18;opacity:.8}50%{r:28;opacity:.3}to{r:18;opacity:.8}}.node.current .node-circle{animation:node-glow 1s ease-in-out infinite}@keyframes node-glow{0%,to{filter:drop-shadow(0 0 6px rgba(76,175,80,.6))}50%{filter:drop-shadow(0 0 12px rgba(76,175,80,.9))}}.annotation-group{pointer-events:none}.annotation-bg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.annotation-bg.select{animation:annotation-bounce .5s ease}.annotation-bg.backtrack{animation:annotation-shake .4s ease}.annotation-bg.complete{animation:annotation-celebrate .6s ease}@keyframes annotation-bounce{0%{transform:translateY(-10px);opacity:0}50%{transform:translateY(2px)}to{transform:translateY(0);opacity:.9}}@keyframes annotation-shake{0%,to{transform:translate(0)}20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}}@keyframes annotation-celebrate{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:.9}}.annotation-text{text-shadow:0 1px 2px rgba(0,0,0,.3)}.tooltip-group{pointer-events:none;animation:tooltip-fade-in .2s ease}@keyframes tooltip-fade-in{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.node-circle[data-state=complete]{animation:complete-sparkle .5s ease}@keyframes complete-sparkle{0%{filter:brightness(1)}25%{filter:brightness(1.5)}50%{filter:brightness(1)}75%{filter:brightness(1.3)}to{filter:brightness(1)}}.code-editor{background:#1e1e1e;border-radius:6px;overflow:hidden;font-family:Consolas,Monaco,Courier New,monospace;font-size:11px;line-height:1.5}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#2d2d2d;border-bottom:1px solid #3c3c3c}.file-info{display:flex;align-items:center;gap:8px}.file-icon{font-size:14px}.file-name{color:#ccc;font-size:12px}.language-selector{display:flex;gap:4px}.lang-btn{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#3c3c3c;border:1px solid #4c4c4c;border-radius:4px;color:#aaa;font-size:11px;cursor:pointer;transition:all .15s ease}.lang-btn:hover{background:#4c4c4c;color:#fff}.lang-btn.active{background:#0e639c;border-color:#17b;color:#fff}.lang-icon{font-size:12px}.lang-name{font-size:11px}.editor-content{padding:8px 0;overflow-x:hidden}.code-line{display:flex;min-height:20px;transition:background-color .15s ease}.code-line:hover{background:#2a2d2e}.code-line.highlighted{background:#569cd61a}.code-line.current{background:#ffcc0026;border-left:2px solid #ffcc00}.code-line.current .line-number{color:#fc0}.gutter{display:flex;align-items:center;min-width:45px;padding:0 6px;background:#1e1e1e;-webkit-user-select:none;user-select:none;flex-shrink:0}.line-number{color:#858585;font-size:12px;min-width:24px;text-align:right}.execution-arrow{color:#fc0;font-size:10px;margin-left:4px;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.line-content{flex:1;padding-right:12px;white-space:pre;overflow:hidden;text-overflow:ellipsis}.token-keyword{color:#569cd6;font-weight:500}.token-type{color:#4ec9b0}.token-string{color:#ce9178}.token-number{color:#b5cea8}.token-comment{color:#6a9955;font-style:italic}.token-variable{color:#9cdcfe}.token-method{color:#dcdcaa}.token-operator,.token-punctuation,.token-plain{color:#d4d4d4}.inline-variable-value{color:#6a9955;font-style:italic;margin-left:16px;opacity:.9;white-space:nowrap}.code-line.current .inline-variable-value{color:#98c379;opacity:1}.memory-panel{background:#1e1e1e;border-radius:6px;overflow:hidden;font-family:Consolas,Monaco,Courier New,monospace;font-size:12px}.memory-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#2d2d2d;border-bottom:1px solid #3c3c3c}.memory-icon{font-size:14px}.memory-title{color:#ccc;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.5px}.memory-content{padding:8px 0}.variables-section{padding:0 12px}.variable-row{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:3px;transition:background-color .15s ease}.variable-row:hover{background:#2a2d2e}.variable-row.flash{animation:flash-highlight .3s ease}@keyframes flash-highlight{0%{background:#4a4a00}to{background:transparent}}.var-name{color:#9cdcfe;min-width:90px}.var-separator{color:#666}.var-value{color:#ce9178;flex:1;font-weight:500}.var-type{color:#4ec9b0;font-size:10px;opacity:.7}.depth-section{margin-top:12px;padding:8px 12px;border-top:1px solid #3c3c3c}.depth-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.depth-label{color:#888;font-size:11px}.depth-value{color:#dcdcaa;font-weight:600;font-size:14px}.depth-indicator{display:flex;gap:3px;height:6px}.depth-bar{flex:1;max-width:20px;background:#3c3c3c;border-radius:2px;transition:all .2s ease}.depth-bar.active{background:linear-gradient(135deg,#569cd6,#4ec9b0)}.call-stack-section{margin-top:12px;padding:8px 12px;border-top:1px solid #3c3c3c}.stack-header{display:flex;align-items:center;gap:6px;margin-bottom:8px}.stack-icon{font-size:12px}.stack-title{color:#ccc;font-size:11px;font-weight:500}.stack-depth{margin-left:auto;color:#dcdcaa;font-size:10px;background:#3c3c3c;padding:2px 6px;border-radius:3px}.stack-frames{display:flex;flex-direction:column-reverse;gap:4px}.stack-empty{display:flex;align-items:center;gap:6px;color:#666;font-size:11px;padding:8px;background:#252526;border-radius:4px}.empty-icon{font-size:12px}.stack-frame{background:#252526;border-radius:4px;padding:6px 8px;border-left:2px solid #3c3c3c;transition:all .2s ease}.stack-frame.active{background:#2d3748;border-left-color:#4ec9b0}.frame-header{display:flex;align-items:center;gap:4px;margin-bottom:2px}.frame-icon{color:#666;font-size:10px;width:12px}.stack-frame.active .frame-icon{color:#4ec9b0}.frame-name{color:#dcdcaa;font-size:11px;font-weight:500}.stack-frame.active .frame-name{color:#4ec9b0}.frame-content{display:flex;gap:12px;padding-left:16px;font-size:10px}.frame-path{color:#9cdcfe}.frame-choice{color:#ce9178}.stack-bottom{display:flex;align-items:center;gap:4px;padding:4px 8px;color:#666;font-size:10px;border-top:1px dashed #3c3c3c;margin-top:4px}.bottom-icon{font-size:10px}.bottom-label{color:#888}.java-debugger-panel{display:flex;flex-direction:column;background:#252526;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000004d}.java-debugger-panel.collapsed{max-height:40px}.debugger-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#3c3c3c;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.debugger-header:hover{background:#4a4a4a}.debugger-icon{font-size:16px}.debugger-title{flex:1;color:#ccc;font-weight:600;font-size:13px;letter-spacing:.3px}.toggle-icon{color:#858585;font-size:10px;transition:transform .2s ease}.debugger-content{display:flex;flex-direction:column;gap:1px;background:#3c3c3c}.debugger-content>*{border-radius:0}@media (max-width: 1200px){.java-debugger-panel{font-size:12px}}.enhanced-step-explanation{background:#fff;border-radius:8px;border-left:3px solid #e0e0e0;padding:12px;transition:all .3s ease}.enhanced-step-explanation.select{border-left-color:#4caf50;background:#f1f8e9}.enhanced-step-explanation.backtrack{border-left-color:#ff9800;background:#fff8e1}.enhanced-step-explanation.complete{border-left-color:#9c27b0;background:#f3e5f5}.step-header{display:flex;align-items:center;gap:6px;margin-bottom:8px}.step-icon{font-size:18px}.step-title{font-size:14px;font-weight:600;color:#333;flex:1}.step-progress{font-size:11px;color:#666;background:#0000000d;padding:2px 6px;border-radius:10px}.step-main{font-size:13px;color:#333;line-height:1.5;margin-bottom:8px}.step-details{display:flex;flex-direction:column;gap:4px}.detail-section{display:flex;align-items:flex-start;gap:6px;font-size:12px}.detail-label{color:#888;white-space:nowrap}.detail-text{color:#555;line-height:1.4}.alternatives-section{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:4px}.alternatives-list{display:flex;gap:4px}.alternative-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#e0e0e0;border-radius:4px;font-weight:600;color:#666;font-size:12px}.paused-hint{display:flex;align-items:center;gap:6px;margin-top:8px;padding:6px 8px;background:#e3f2fd;border-radius:4px;font-size:11px;color:#1565c0}.hint-icon{font-size:12px}.state-summary{display:none}.enhanced-step-explanation.select .step-icon{animation:bounce-in .3s ease}.enhanced-step-explanation.backtrack .step-icon{animation:shake .3s ease}.enhanced-step-explanation.complete .step-icon{animation:celebrate .5s ease}@keyframes bounce-in{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}@keyframes celebrate{0%{transform:scale(1)}50%{transform:scale(1.2) rotate(5deg)}to{transform:scale(1) rotate(0)}}.algorithm-intro-btn{padding:6px 12px;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:1px solid #90caf9;border-radius:6px;color:#1976d2;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.algorithm-intro-btn:hover{background:linear-gradient(135deg,#bbdefb,#90caf9);transform:translateY(-1px);box-shadow:0 2px 8px #1976d233}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom: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:#fff;border-radius:12px;width:90%;max-width:500px;max-height:80vh;overflow:hidden;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;align-items:center;gap:10px;padding:16px 20px;background:linear-gradient(135deg,#e3f2fd,#fff);border-bottom:1px solid #e0e0e0}.modal-icon{font-size:24px}.modal-title{flex:1;font-size:18px;font-weight:600;color:#1976d2}.modal-close{width:32px;height:32px;border:none;background:transparent;color:#666;font-size:18px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}.modal-close:hover{background:#f0f0f0;color:#333}.modal-body{padding:20px;overflow-y:auto;max-height:calc(80vh - 70px)}.intro-section{margin-bottom:20px}.intro-section:last-child{margin-bottom:0}.section-title{font-weight:600;color:#333;margin-bottom:8px;font-size:14px}.modal-body p{margin:0 0 8px;color:#555;font-size:14px;line-height:1.6}.modal-body code{background:#f5f5f5;padding:2px 8px;border-radius:4px;font-family:Monaco,Menlo,monospace;font-size:13px;color:#d32f2f}.thought-steps{margin:8px 0 0;padding-left:24px;color:#555;font-size:14px;line-height:1.8}.thought-steps li{margin-bottom:6px}.thought-steps strong{color:#1976d2}.key-insight{background:#fff8e1;padding:12px 16px;border-radius:8px;border-left:4px solid #ffc107;margin:0;font-size:14px}.key-insight strong{color:#f57c00}.watch-points{margin:8px 0 0;padding:0;list-style:none}.watch-points li{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:#555;font-size:14px}.color-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.color-dot.select{background:#4caf50}.color-dot.backtrack{background:#ff9800}.color-dot.complete{background:#9c27b0}.visual-example{background:#fafafa;padding:16px;border-radius:8px}.shortcut-list{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:12px}.shortcut-list li{display:flex;align-items:center;gap:6px;font-size:13px;color:#555}.shortcut-list kbd{background:#f5f5f5;border:1px solid #ddd;border-radius:4px;padding:2px 8px;font-family:inherit;font-size:12px;color:#333}.legend-panel{background:#fff;border-radius:8px;border:1px solid #e0e0e0;margin-bottom:12px}.legend-header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f8f9fa;cursor:pointer;-webkit-user-select:none;user-select:none;border-bottom:1px solid #e0e0e0;font-size:13px}.legend-header:hover{background:#f0f0f0}.legend-icon{font-size:14px}.legend-title{flex:1;font-weight:600;color:#333}.toggle-icon{color:#666;font-size:10px}.legend-content{padding:10px;overflow:visible}.legend-section{margin-bottom:10px}.legend-section:last-child{margin-bottom:0}.section-title{font-size:10px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.legend-items{display:flex;flex-wrap:wrap;gap:8px 12px}.legend-item{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:12px;white-space:nowrap}.legend-item:hover,.legend-item.hovered{background:#f5f5f5}.item-visual{flex-shrink:0}.color-swatch{display:block;width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.1)}.icon-visual{font-size:14px}.item-info{display:flex;flex-direction:column}.item-label{font-weight:500;color:#333}.item-description,.quick-tips,.legend-panel.collapsed .legend-content{display:none}.legend-panel.collapsed .legend-header{border-bottom:none}.tutorial-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;animation:overlay-fade-in .3s ease}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}.tutorial-card{background:#fff;border-radius:16px;padding:24px;max-width:480px;width:90%;box-shadow:0 20px 60px #0000004d;position:relative;animation:card-slide-in .4s ease}@keyframes card-slide-in{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.tutorial-card.intro{border-top:4px solid #2196f3}.tutorial-card.first-select,.tutorial-card.continue-select{border-top:4px solid #4caf50}.tutorial-card.first-complete{border-top:4px solid #9c27b0}.tutorial-card.first-backtrack{border-top:4px solid #ff9800}.tutorial-card.explore-branch{border-top:4px solid #2196f3}.tutorial-card.summary{border-top:4px solid #4caf50}.close-button{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;background:#f5f5f5;border-radius:50%;cursor:pointer;font-size:16px;color:#666;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.close-button:hover{background:#e0e0e0;color:#333}.tutorial-header{margin-bottom:16px}.tutorial-title{margin:0;font-size:20px;color:#333;padding-right:32px}.tutorial-content{margin-bottom:20px}.tutorial-message{font-size:15px;line-height:1.7;color:#555}.tutorial-message p{margin:0 0 8px}.tutorial-message p:last-child{margin-bottom:0}.prediction-section{margin-top:20px;padding-top:16px;border-top:1px solid #eee}.prediction-label{font-size:14px;font-weight:600;color:#333;margin:0 0 12px}.options-list{display:flex;flex-direction:column;gap:8px}.option-button{padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;background:#fff;font-size:14px;color:#333;cursor:pointer;text-align:left;transition:all .2s ease}.option-button:hover{border-color:#2196f3;background:#f5f9ff}.option-button.selected{border-color:#4caf50;background:#e8f5e9;color:#2e7d32}.prediction-feedback{display:flex;align-items:center;gap:8px;margin-top:16px;padding:12px;background:#e8f5e9;border-radius:8px;border:1px solid #c8e6c9}.feedback-icon{font-size:18px}.feedback-text{font-size:14px;color:#2e7d32}.tutorial-actions{display:flex;gap:12px;justify-content:flex-end}.action-button{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-button.primary{background:#4caf50;color:#fff;border:none}.action-button.primary:hover:not(:disabled){background:#43a047}.action-button.primary:disabled{background:#c8e6c9;cursor:not-allowed}.action-button.secondary{background:#fff;color:#666;border:1px solid #e0e0e0}.action-button.secondary:hover{background:#f5f5f5}.tutorial-progress{margin-top:20px;padding-top:16px;border-top:1px solid #eee}.progress-dots{display:flex;justify-content:center;gap:8px}.progress-dot{width:8px;height:8px;border-radius:50%;background:#e0e0e0;transition:all .3s ease}.progress-dot.active{background:#4caf50;transform:scale(1.3)}html,body,#root{height:100%;margin:0;padding:0;overflow:hidden}.app{height:100vh;display:flex;flex-direction:column;background:#f5f5f5;overflow:hidden}.app-header{display:flex;align-items:center;gap:16px;padding:6px 12px;background:#fff;border-bottom:1px solid #e0e0e0;flex-shrink:0}.header-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.header-left h1{margin:0;font-size:15px;color:#333;white-space:nowrap}.header-left .subtitle{font-size:11px;color:#888;white-space:nowrap}.header-left .subtitle a{color:#f89f1b;text-decoration:none}.header-center{flex:1;display:flex;justify-content:center}.header-right{flex-shrink:0;display:flex;align-items:center;gap:8px}.github-link{display:flex;align-items:center;justify-content:center;color:#333;transition:color .2s}.github-link:hover{color:#000}.tutorial-button{padding:5px 10px;background:#9c27b0;color:#fff;border:none;border-radius:4px;font-size:12px;cursor:pointer;transition:background .2s}.tutorial-button:hover{background:#7b1fa2}.control-bar{padding:6px 12px;background:#f8f8f8;border-bottom:1px solid #e0e0e0;flex-shrink:0}.main-content{flex:1;display:grid;grid-template-columns:560px 1fr 280px;gap:0;min-height:0;overflow:hidden}.left-panel{background:#1e1e1e;overflow-y:auto;border-right:1px solid #333}.left-panel::-webkit-scrollbar{width:6px}.left-panel::-webkit-scrollbar-track{background:#2d2d2d}.left-panel::-webkit-scrollbar-thumb{background:#555;border-radius:3px}.center-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#fafafa}.canvas-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden}.state-bar{flex-shrink:0;padding:12px 16px;background:#fff;border-top:1px solid #e0e0e0}.right-panel{background:#fff;border-left:1px solid #e0e0e0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px}.right-panel::-webkit-scrollbar{width:6px}.right-panel::-webkit-scrollbar-track{background:#f0f0f0}.right-panel::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#666;text-align:center;padding:40px}.empty-icon{font-size:64px;margin-bottom:16px}.empty-state h2{margin:0 0 8px;font-size:20px;color:#333}.empty-state p{margin:0;font-size:14px;max-width:400px}@media (max-width: 1400px){.main-content{grid-template-columns:480px 1fr 240px}}@media (max-width: 1200px){.main-content{grid-template-columns:400px 1fr 240px}}@media (max-width: 1024px){.main-content{grid-template-columns:320px 1fr 200px}.header-left h1{font-size:16px}}@media (max-width: 768px){.app-header{flex-wrap:wrap;gap:8px}.header-center{order:3;flex-basis:100%;max-width:none;margin:0}.main-content{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.left-panel{display:none}.right-panel{flex-direction:row;flex-wrap:wrap;border-left:none;border-top:1px solid #e0e0e0}.right-panel>*{flex:1;min-width:200px}}