.header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:#0000004d;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.header-left{display:flex;align-items:baseline;gap:12px}.title-link{text-decoration:none;color:inherit;transition:color .2s ease}.title-link:hover{color:#4fc3f7}.title{font-size:20px;font-weight:600;color:#fff;margin:0}.subtitle{font-size:14px;color:#fff9}.header-right{display:flex;align-items:center}.github-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#ffffff1a;color:#fff;transition:all .2s ease}.github-link:hover{background:#fff3;transform:scale(1.1)}.github-icon{width:22px;height:22px}.data-input{padding:10px 24px;background:#0003;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.input-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.input-group{display:flex;align-items:center;gap:6px}.input-group label{font-size:13px;color:#fffc;white-space:nowrap}.tree-input-group{flex:1;min-width:300px}.tree-input{flex:1;padding:6px 10px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:13px;font-family:Consolas,Monaco,monospace}.tree-input:focus{border-color:#4fc3f7;background:#ffffff26}.small-input-group{flex-shrink:0}.small-input{width:50px;padding:6px 10px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:13px;text-align:center}.small-input:focus{border-color:#4fc3f7;background:#ffffff26}.apply-btn{padding:6px 16px;background:#4fc3f7;color:#1a1a2e;border-radius:4px;font-size:13px;font-weight:500}.apply-btn:hover{background:#81d4fa}.random-btn{padding:6px 12px;background:#ffc10733;color:#ffc107;border:1px solid rgba(255,193,7,.4);border-radius:4px;font-size:13px}.random-btn:hover{background:#ffc1074d}.examples-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}.examples-label{font-size:12px;color:#fff9}.example-btn{padding:4px 10px;background:#ffffff1a;color:#fffc;border:1px solid rgba(255,255,255,.2);border-radius:4px;font-size:12px}.example-btn:hover{background:#fff3;color:#fff}.error-message{margin-top:8px;padding:6px 12px;background:#f4433633;border:1px solid rgba(244,67,54,.4);border-radius:4px;color:#f44336;font-size:12px}.control-panel{padding:12px 24px;background:#0000004d;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.controls-row{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}.button-group{display:flex;align-items:center;gap:8px}.control-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:6px;font-size:13px;transition:all .2s ease}.control-btn:hover:not(:disabled){background:#fff3;border-color:#ffffff4d}.control-btn:disabled{opacity:.4}.control-btn .shortcut{font-size:10px;padding:2px 4px;background:#ffffff26;border-radius:3px;color:#ffffffb3}.play-btn{background:#4caf504d;border-color:#4caf5080}.play-btn:hover:not(:disabled){background:#4caf5066}.reset-btn{background:#ff980033;border-color:#ff980066;color:#ffb74d}.reset-btn:hover:not(:disabled){background:#ff98004d}.speed-control{display:flex;align-items:center;gap:8px}.speed-control label{font-size:13px;color:#ffffffb3}.speed-control select{padding:6px 10px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:13px}.speed-control select option{background:#1a1a2e;color:#fff}.step-info{font-size:13px;color:#ffffffb3;padding:6px 12px;background:#ffffff0d;border-radius:4px}.progress-container{margin-top:12px;width:100%}.progress-slider{width:100%;height:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:4px;cursor:pointer;outline:none}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#4caf50;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000004d;transition:transform .2s ease}.progress-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.progress-slider::-moz-range-thumb{width:16px;height:16px;background:#4caf50;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 4px #0000004d}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.code-panel{display:flex;flex-direction:column;background:#0006;border-radius:8px;overflow:hidden;height:100%}.code-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#0000004d;border-bottom:1px solid rgba(255,255,255,.1)}.code-title{font-size:13px;font-weight:600;color:#fff}.code-file{font-size:11px;color:#ffffff80;font-family:Consolas,Monaco,monospace}.code-content{flex:1;overflow:auto;padding:8px 0;font-family:Consolas,Monaco,Courier New,monospace;font-size:12px;line-height:1.6}.code-line{display:flex;align-items:flex-start;padding:2px 14px;transition:background .2s ease}.code-line.highlighted{background:#ffeb3b33;border-left:3px solid #ffeb3b;padding-left:11px}.line-number{flex-shrink:0;width:28px;text-align:right;color:#ffffff4d;margin-right:12px;-webkit-user-select:none;user-select:none}.code-line.highlighted .line-number{color:#ffeb3b}.line-code{flex:1;white-space:pre;color:#e8e8e8}.line-code code{font-family:inherit;background:transparent!important;padding:0!important;margin:0!important;text-shadow:none!important;white-space:pre!important}.line-code .token.comment,.line-code .token.prolog,.line-code .token.doctype,.line-code .token.cdata{color:#6a9955}.line-code .token.punctuation{color:#d4d4d4}.line-code .token.property,.line-code .token.tag,.line-code .token.boolean,.line-code .token.number,.line-code .token.constant,.line-code .token.symbol,.line-code .token.deleted{color:#b5cea8}.line-code .token.selector,.line-code .token.attr-name,.line-code .token.string,.line-code .token.char,.line-code .token.builtin,.line-code .token.inserted{color:#ce9178}.line-code .token.operator,.line-code .token.entity,.line-code .token.url,.language-css .token.string,.style .token.string{color:#d4d4d4}.line-code .token.atrule,.line-code .token.attr-value,.line-code .token.keyword{color:#569cd6}.line-code .token.function,.line-code .token.class-name{color:#dcdcaa}.line-code .token.regex,.line-code .token.important,.line-code .token.variable{color:#d16969}.line-variables{display:flex;gap:6px;margin-left:12px;flex-shrink:0}.variable-badge{padding:2px 8px;background:#4caf504d;border:1px solid rgba(76,175,80,.5);border-radius:4px;font-size:10px;color:#81c784;white-space:nowrap}.variables-panel{border-top:1px solid rgba(255,255,255,.1);max-height:120px;overflow-y:auto}.variables-header{padding:8px 14px;background:#0003;font-size:12px;font-weight:600;color:#fffc}.variables-list{padding:8px 14px;display:flex;flex-wrap:wrap;gap:8px}.variable-item{display:flex;align-items:center;gap:6px;padding:4px 10px;background:#ffffff0d;border-radius:4px;font-size:11px}.variable-item.node{border-left:3px solid #4fc3f7}.variable-item.null{border-left:3px solid #9e9e9e}.variable-item.number{border-left:3px solid #ffb74d}.variable-item.boolean{border-left:3px solid #ce93d8}.variable-name{color:#4fc3f7;font-weight:500}.variable-value{color:#e8e8e8;font-family:Consolas,Monaco,monospace}.callstack-panel{border-top:1px solid rgba(255,255,255,.1);max-height:150px;overflow-y:auto}.callstack-header{padding:8px 14px;background:#0003;font-size:12px;font-weight:600;color:#fffc}.callstack-list{padding:8px 14px}.callstack-frame{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:11px;border-bottom:1px solid rgba(255,255,255,.05)}.callstack-frame:last-child{border-bottom:none}.frame-depth{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:#9c27b04d;border-radius:50%;font-size:10px;color:#ce93d8}.frame-name{color:#4fc3f7;font-family:Consolas,Monaco,monospace}.frame-params{color:#fff9;font-family:Consolas,Monaco,monospace}.frame-return{color:#81c784;font-family:Consolas,Monaco,monospace;margin-left:auto}.tree-canvas{display:flex;flex-direction:column;background:#0000004d;border-radius:8px;overflow:hidden;height:100%;position:relative}.canvas-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#0000004d;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.canvas-title{font-size:13px;font-weight:600;color:#fff}.canvas-legend{display:flex;gap:12px}.legend-item{display:flex;align-items:center;gap:4px;font-size:11px;color:#ffffffb3}.legend-color{width:12px;height:12px;border-radius:50%}.canvas-controls{display:flex;align-items:center;gap:4px}.zoom-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fffc;font-size:16px;cursor:pointer;transition:all .2s ease}.zoom-btn:hover{background:#fff3;color:#fff}.zoom-btn:active{background:#ffffff4d;transform:scale(.95)}.zoom-btn.reset-btn{font-size:14px;margin-left:4px}.zoom-info{font-size:11px;color:#ffffffb3;padding:4px 8px;background:#ffffff1a;border-radius:4px;min-width:45px;text-align:center}.tree-svg{flex:1;cursor:grab}.tree-svg:active{cursor:grabbing}.canvas-hint{position:absolute;bottom:60px;left:50%;transform:translate(-50%);padding:6px 12px;background:#000000b3;border-radius:4px;font-size:11px;color:#fff9;pointer-events:none;opacity:0;transition:opacity .3s ease}.tree-canvas:hover .canvas-hint{opacity:1}.tree-edge{stroke:#fff6;stroke-width:2}.tree-node{stroke:#ffffff4d;stroke-width:2;transition:fill .3s ease}.node-glow{animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.3;r:28}50%{opacity:.5;r:32}}.node-value{fill:#1a1a2e;font-size:14px;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;pointer-events:none}.node-label-bg{stroke:#ffffff80;stroke-width:1}.node-label{fill:#fff;font-size:10px;font-weight:700;pointer-events:none}.annotation-bg{fill:#000c;stroke:#ffffff4d;stroke-width:1}.annotation-text{fill:#fff;font-size:11px;pointer-events:none}.step-description{position:absolute;bottom:12px;left:12px;right:12px;display:flex;align-items:center;gap:10px;padding:10px 14px;background:#000c;border-radius:6px;border:1px solid rgba(255,255,255,.1)}.step-number{padding:4px 10px;background:#4fc3f74d;border-radius:4px;font-size:12px;font-weight:600;color:#4fc3f7;white-space:nowrap}.step-text{font-size:13px;color:#e8e8e8;line-height:1.4}.floating-ball-container{position:fixed;bottom:24px;right:24px;z-index:1000}.floating-ball{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}.floating-ball:hover{transform:scale(1.1);box-shadow:0 6px 20px #07c16080}.wechat-icon{width:24px;height:24px;color:#fff}.ball-text{font-size:10px;color:#fff;margin-top:2px;font-weight:500}.qrcode-popup{position:absolute;bottom:70px;right:0;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000004d;padding:16px;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.qrcode-popup:after{content:"";position:absolute;bottom:-8px;right:20px;width:16px;height:16px;background:#fff;transform:rotate(45deg);box-shadow:4px 4px 8px #0000001a}.qrcode-content{display:flex;flex-direction:column;align-items:center}.qrcode-image{width:180px;height:auto;border-radius:8px;object-fit:contain}.qrcode-tip{margin:4px 0 0;font-size:12px;color:#666;text-align:center}.qrcode-tip:first-of-type{margin-top:12px}.app{display:flex;flex-direction:column;width:100%;height:100vh;overflow:hidden}.main-content{flex:1;display:flex;gap:16px;padding:16px 24px;min-height:0;overflow:hidden}.canvas-section{flex:1;min-width:0;display:flex;flex-direction:column}.code-section{width:520px;flex-shrink:0;display:flex;flex-direction:column}@media (max-width: 1200px){.main-content{flex-direction:column}.code-section{width:100%;height:300px}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}body{background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);color:#e8e8e8}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff80}button{cursor:pointer;border:none;outline:none;font-family:inherit;transition:all .2s ease}button:disabled{cursor:not-allowed;opacity:.5}input{font-family:inherit;outline:none;border:none}select{font-family:inherit;outline:none;cursor:pointer}