.header{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:#1a1a2ef2;border-bottom:1px solid #3a3a5e;height:50px}.header-left{flex:1}.back-link{color:#00d4aa;text-decoration:none;font-size:14px;transition:color .2s}.back-link:hover{color:#0fc}.header-center{flex:2;text-align:center}.title-link{text-decoration:none}.title{color:#fff;font-size:18px;font-weight:600;margin:0;transition:color .2s}.title-link:hover .title{color:#00d4aa}.header-right{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:16px}.thoughts-btn{background:#2a2a4e;color:#00d4aa;border:1px solid #00d4aa;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:13px;transition:all .2s}.thoughts-btn:hover{background:#00d4aa;color:#1a1a2e}.github-link{display:flex;align-items:center;gap:6px;color:#e0e0e0;text-decoration:none;padding:6px 10px;border-radius:4px;background:#2a2a4e;transition:all .2s}.github-link:hover{background:#3a3a6e}.github-icon{width:20px;height:20px}.star-count{font-size:13px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#1a1a2e;border:1px solid #3a3a5e;border-radius:8px;padding:24px;max-width:700px;max-height:80vh;overflow-y:auto;position:relative}.modal-close{position:absolute;top:12px;right:12px;background:none;border:none;color:#888;font-size:24px;cursor:pointer;line-height:1}.modal-close:hover{color:#fff}.thoughts-content{color:#e0e0e0;line-height:1.6}.thoughts-content h1,.thoughts-content h2,.thoughts-content h3{color:#00d4aa;margin-top:16px;margin-bottom:8px}.thoughts-content h2{font-size:20px}.thoughts-content h3{font-size:16px}.thoughts-content code{background:#2a2a4e;padding:2px 6px;border-radius:3px;font-family:Fira Code,monospace;font-size:13px}.thoughts-content ul{padding-left:20px}.thoughts-content li{margin:4px 0}.thoughts-content strong{color:#fff}.input-panel{display:flex;align-items:center;gap:16px;padding:10px 20px;background:#2a2a4e80;border-bottom:1px solid #3a3a5e}.input-group{display:flex;align-items:center;gap:8px}.input-label{color:#888;font-size:13px;white-space:nowrap}.input-field{background:#1a1a2e;border:1px solid #3a3a5e;border-radius:4px;padding:6px 10px;color:#fff;font-size:13px;font-family:Fira Code,monospace}.input-field:focus{outline:none;border-color:#00d4aa}.input-field.values{width:200px}.input-field.k-value{width:60px}.sample-buttons{display:flex;gap:6px;flex-wrap:wrap}.sample-btn{background:#2a2a4e;border:1px solid #3a3a5e;color:#e0e0e0;padding:4px 10px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s}.sample-btn:hover{background:#3a3a6e;border-color:#00d4aa}.sample-btn.active{background:#00d4aa;color:#1a1a2e;border-color:#00d4aa}.random-btn{background:#00d4aa;border:none;color:#1a1a2e;padding:6px 12px;border-radius:4px;font-size:13px;cursor:pointer;font-weight:500;transition:all .2s}.random-btn:hover{background:#0fc}.apply-btn{background:#2196f3;border:none;color:#fff;padding:6px 12px;border-radius:4px;font-size:13px;cursor:pointer;font-weight:500;transition:all .2s}.apply-btn:hover{background:#42a5f5}.error-message{color:#ff6b6b;font-size:12px;margin-left:8px}.code-panel{display:flex;flex-direction:column;background:#1a1a2e;border-radius:8px;border:1px solid #3a3a5e;overflow:hidden;height:100%}.code-header{display:flex;align-items:center;padding:8px 12px;background:#2a2a4e;border-bottom:1px solid #3a3a5e}.language-tabs{display:flex;gap:4px}.language-tab{background:transparent;border:none;color:#888;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:12px;transition:all .2s}.language-tab:hover{color:#e0e0e0;background:#ffffff1a}.language-tab.active{background:#00d4aa;color:#1a1a2e}.code-content{flex:1;overflow:auto;padding:12px 0}.code-line{display:flex;align-items:flex-start;padding:1px 12px;font-family:Fira Code,Consolas,monospace;font-size:12px;line-height:1.5;transition:background .2s}.code-line.highlighted{background:#00d4aa33}.line-number{color:#666;min-width:32px;text-align:right;padding-right:12px;-webkit-user-select:none;user-select:none;flex-shrink:0}.line-content{flex:1;white-space:pre;color:#e0e0e0}.variable-value{color:#ff9800;margin-left:16px;font-size:11px;background:#ff98001a;padding:0 6px;border-radius:3px}.keyword{color:#c792ea}.type,.function{color:#82aaff}.string{color:#c3e88d}.number{color:#f78c6c}.comment{color:#546e7a;font-style:italic}.operator{color:#89ddff}.variable{color:#f07178}.property{color:#ffcb6b}.canvas-container{flex:1;position:relative;background:#0d0d1a;border-radius:8px;border:1px solid #3a3a5e;overflow:hidden}.canvas-svg{width:100%;height:100%;cursor:grab}.canvas-svg:active{cursor:grabbing}.node-group{cursor:pointer}.node-circle{stroke-width:2;transition:all .3s ease}.node-circle.normal{fill:#2a2a4e;stroke:#4a4a7e}.node-circle.current{fill:#1a3a5e;stroke:#2196f3}.node-circle.reversed{fill:#3a2a4e;stroke:#9c27b0}.node-circle.completed{fill:#1a3a3e;stroke:#00d4aa}.node-circle.head{fill:#2a3a2e;stroke:#4caf50}.node-circle.tail{fill:#3a3a2e;stroke:#ff9800}.node-value{fill:#fff;font-size:14px;font-weight:600;text-anchor:middle;dominant-baseline:central;pointer-events:none}.node-id{fill:#888;font-size:10px;text-anchor:middle;pointer-events:none}.edge-line{stroke:#4a4a7e;stroke-width:2;fill:none;marker-end:url(#arrowhead)}.edge-line.reversed{stroke:#9c27b0}.edge-line.highlight{stroke:#00d4aa;stroke-width:3}.pointer-label{font-size:11px;font-weight:600;text-anchor:middle;pointer-events:none}.annotation-group{pointer-events:none}.annotation-bg{fill:#000000b3;rx:4}.annotation-text{fill:#fff;font-size:11px;text-anchor:middle;dominant-baseline:central}.annotation-text.info{fill:#00d4aa}.annotation-text.action{fill:#ff9800}.annotation-text.value{fill:#2196f3}.transfer-path{stroke:#ff9800;stroke-width:2;fill:none;stroke-dasharray:5,3;marker-end:url(#transfer-arrow)}.transfer-label{fill:#ff9800;font-size:10px;text-anchor:middle}.variables-panel{position:absolute;top:10px;left:10px;background:#1a1a2ef2;border:1px solid #3a3a5e;border-radius:6px;padding:10px;min-width:120px}.variables-title{color:#888;font-size:11px;margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}.variable-item{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:12px}.variable-name{color:#00d4aa;font-family:Fira Code,monospace}.variable-value-text{color:#fff;font-family:Fira Code,monospace}.step-description{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background:#1a1a2ef2;border:1px solid #3a3a5e;border-radius:6px;padding:10px 20px;color:#fff;font-size:14px;max-width:80%;text-align:center}.zoom-controls{position:absolute;bottom:60px;right:10px;display:flex;flex-direction:column;gap:4px}.zoom-btn{width:32px;height:32px;background:#2a2a4ee6;border:1px solid #3a3a5e;border-radius:4px;color:#e0e0e0;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.zoom-btn:hover{background:#3a3a6e;border-color:#00d4aa}.control-panel{display:flex;flex-direction:column;padding:12px 20px;background:#1a1a2ef2;border-top:1px solid #3a3a5e}.control-buttons{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}.control-btn{display:flex;align-items:center;justify-content:center;gap:6px;background:#2a2a4e;border:1px solid #3a3a5e;color:#e0e0e0;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s;min-width:100px}.control-btn:hover{background:#3a3a6e;border-color:#00d4aa}.control-btn:disabled{opacity:.5;cursor:not-allowed}.control-btn.primary{background:#00d4aa;color:#1a1a2e;border-color:#00d4aa}.control-btn.primary:hover{background:#0fc}.shortcut-hint{font-size:10px;color:#888;background:#0000004d;padding:2px 6px;border-radius:3px}.speed-control{display:flex;align-items:center;gap:8px;margin-left:20px}.speed-label{color:#888;font-size:12px}.speed-slider{width:100px;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#3a3a5e;border-radius:2px;outline:none}.speed-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:#00d4aa;border-radius:50%;cursor:pointer}.speed-slider::-moz-range-thumb{width:14px;height:14px;background:#00d4aa;border-radius:50%;cursor:pointer;border:none}.speed-value{color:#00d4aa;font-size:12px;min-width:40px}.progress-container{width:100%;position:relative}.progress-bar{width:100%;height:8px;background:#3a3a5e;border-radius:4px;cursor:pointer;position:relative;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#00d4aa,#0fc);border-radius:4px;transition:width .1s ease}.progress-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 2px 4px #0000004d;cursor:grab;z-index:1}.progress-handle:active{cursor:grabbing}.progress-info{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:#888}.step-counter{color:#00d4aa}.wechat-float{position:fixed;bottom:20px;right:20px;z-index:100}.float-button{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#07c160,#06ad56);border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 12px #07c16066;transition:all .3s}.float-button:hover{transform:scale(1.1);box-shadow:0 6px 16px #07c16080}.float-icon{width:28px;height:28px;fill:#fff}.float-text{color:#fff;font-size:8px;margin-top:2px;font-weight:500}.qrcode-popup{position:absolute;bottom:70px;right:0;background:#fff;border-radius:12px;padding:16px;box-shadow:0 8px 24px #0000004d;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:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fff}.qrcode-image{width:180px;height:auto;display:block}.qrcode-tip{text-align:center;color:#333;font-size:12px;margin-top:10px;line-height:1.4}.qrcode-tip strong{color:#07c160}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.main-content{flex:1;display:flex;gap:16px;padding:16px;overflow:hidden;min-height:0}.code-section{width:380px;flex-shrink:0;display:flex;flex-direction:column;min-height:0}.canvas-section{flex:1;display:flex;flex-direction:column;min-height:0}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#e0e0e0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#1a1a2e}::-webkit-scrollbar-thumb{background:#3a3a5e;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#4a4a7e}