*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0f1419;color:#e2e8f0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#1a1a2e}::-webkit-scrollbar-thumb{background:#4a5568;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#718096}::selection{background:#63b3ed4d}button:focus,input:focus{outline:none}button{font-family:inherit}a{color:inherit;text-decoration:none}.header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:linear-gradient(135deg,#1a1a2e,#16213e);border-bottom:1px solid #2d3748;height:48px;box-sizing:border-box}.header-left{flex:1;display:flex;align-items:center}.back-link{color:#63b3ed;text-decoration:none;font-size:13px;transition:color .2s;white-space:nowrap}.back-link:hover{color:#90cdf4}.header-center{flex:2;display:flex;justify-content:center}.title-link{text-decoration:none}.title{color:#f7fafc;font-size:18px;font-weight:600;margin:0;white-space:nowrap}.title-link:hover .title{color:#63b3ed}.header-right{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:12px}.algorithm-info-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;background:#2d3748;border:1px solid #4a5568;border-radius:6px;color:#e2e8f0;font-size:13px;cursor:pointer;transition:all .2s}.algorithm-info-btn:hover{background:#4a5568;border-color:#63b3ed}.algorithm-info-btn svg{flex-shrink:0}.github-link{display:flex;align-items:center;gap:6px;color:#e2e8f0;text-decoration:none;padding:6px 10px;background:#2d3748;border-radius:6px;transition:all .2s}.github-link:hover{background:#4a5568}.star-count{font-size:13px;font-weight:500}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#1a1a2e;border-radius:12px;max-width:600px;width:90%;max-height:80vh;overflow:hidden;border:1px solid #2d3748;box-shadow:0 20px 60px #00000080}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #2d3748}.modal-header h2{margin:0;font-size:18px;color:#f7fafc}.modal-close{background:none;border:none;color:#a0aec0;font-size:24px;cursor:pointer;padding:0;line-height:1;transition:color .2s}.modal-close:hover{color:#f7fafc}.modal-body{padding:20px;overflow-y:auto;max-height:calc(80vh - 60px)}.algorithm-description{color:#e2e8f0;font-size:14px;line-height:1.8;white-space:pre-wrap;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.data-input{padding:8px 16px;background:#1e2a3a;border-bottom:1px solid #2d3748}.input-row{display:flex;align-items:center;gap:8px}.presets-divider{width:1px;height:20px;background:#4a5568;margin:0 4px}.input-label{color:#a0aec0;font-size:13px;white-space:nowrap}.input-field{flex:1;padding:6px 12px;background:#2d3748;border:1px solid #4a5568;border-radius:6px;color:#e2e8f0;font-size:13px;font-family:Monaco,Menlo,monospace;outline:none;transition:border-color .2s}.input-field:focus{border-color:#63b3ed}.input-field.input-error{border-color:#fc8181}.input-field::placeholder{color:#718096}.apply-btn,.random-btn{padding:6px 14px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s;white-space:nowrap}.apply-btn{background:#3182ce;border:none;color:#fff}.apply-btn:hover{background:#4299e1}.random-btn{background:#2d3748;border:1px solid #4a5568;color:#e2e8f0}.random-btn:hover{background:#4a5568}.error-message{color:#fc8181;font-size:12px;margin-top:6px;padding-left:70px}.presets-label{color:#718096;font-size:12px;white-space:nowrap}.preset-btn{padding:4px 8px;background:#2d3748;border:1px solid #4a5568;border-radius:4px;color:#a0aec0;font-size:12px;cursor:pointer;transition:all .2s;white-space:nowrap}.preset-btn:hover{background:#4a5568;color:#e2e8f0;border-color:#63b3ed}.algorithm-tabs{display:flex;gap:4px;padding:8px 16px;background:#1a1a2e;border-bottom:1px solid #2d3748}.tab-btn{padding:8px 20px;background:#2d3748;border:1px solid #4a5568;border-radius:6px;color:#a0aec0;font-size:13px;cursor:pointer;transition:all .2s}.tab-btn:hover{background:#4a5568;color:#e2e8f0}.tab-btn.active{background:#3182ce;border-color:#3182ce;color:#fff}.code-panel{display:flex;flex-direction:column;background:#1a1a2e;border-radius:8px;border:1px solid #2d3748;overflow:hidden;height:100%}.code-header{display:flex;align-items:center;padding:8px 12px;background:#16213e;border-bottom:1px solid #2d3748}.language-tabs{display:flex;gap:4px}.lang-btn{padding:4px 12px;background:transparent;border:1px solid transparent;border-radius:4px;color:#718096;font-size:12px;cursor:pointer;transition:all .2s}.lang-btn:hover{color:#a0aec0;background:#2d3748}.lang-btn.active{color:#63b3ed;background:#2d3748;border-color:#63b3ed}.code-content{flex:1;overflow:auto;padding:8px 0}.code-pre{margin:0;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;line-height:1.6}.code-line{display:flex;align-items:flex-start;padding:0 12px;min-height:20px;transition:background .2s}.code-line.highlighted{background:#63b3ed26;border-left:3px solid #63b3ed;padding-left:9px}.line-number{flex-shrink:0;width:32px;color:#4a5568;text-align:right;padding-right:12px;-webkit-user-select:none;user-select:none}.line-content{flex:1;white-space:pre}.line-variables{color:#68d391;font-style:italic;margin-left:16px;opacity:.8}.variables-panel{border-top:1px solid #2d3748;padding:8px 12px;background:#16213e;max-height:120px;overflow-y:auto}.variables-title{color:#a0aec0;font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.variables-list{display:flex;flex-wrap:wrap;gap:8px}.variable-item{display:flex;align-items:center;gap:4px;padding:2px 8px;background:#2d3748;border-radius:4px;font-size:11px;font-family:Monaco,Menlo,monospace}.variable-name{color:#f6ad55}.variable-value{color:#68d391}.explanation-panel{background:linear-gradient(135deg,#63b3ed1a,#48bb781a);border:1px solid rgba(99,179,237,.3);border-radius:8px;padding:12px 16px;margin:8px 0}.explanation-title{color:#63b3ed;font-size:14px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px}.explanation-content{color:#cbd5e0;font-size:13px;line-height:1.6;text-align:justify}.canvas-wrapper{flex:1;display:flex;flex-direction:column;gap:8px;min-height:0}.canvas-container{flex:1;display:flex;flex-direction:column;background:linear-gradient(135deg,#0f1419,#1a1a2e);border-radius:8px;border:1px solid #2d3748;overflow:hidden;position:relative;min-height:0}.canvas-header{padding:10px 16px;background:#16213ecc;border-bottom:1px solid #2d3748;display:flex;justify-content:space-between;align-items:center}.step-description{color:#e2e8f0;font-size:14px;font-weight:500;flex:1}.legend-toggle{background:#63b3ed26;border:1px solid rgba(99,179,237,.3);color:#63b3ed;padding:4px 10px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.legend-toggle:hover{background:#63b3ed40;border-color:#63b3ed80}.canvas-svg{flex:1;cursor:grab}.canvas-svg:active{cursor:grabbing}.canvas-legend{position:absolute;top:55px;right:12px;background:#16213ef2;border:1px solid #3d4f6f;border-radius:8px;padding:12px;min-width:160px;box-shadow:0 4px 12px #0000004d;z-index:10}.legend-title{color:#e2e8f0;font-size:13px;font-weight:600;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #3d4f6f}.legend-items{display:flex;flex-direction:column;gap:8px}.legend-item{display:flex;align-items:center;gap:8px}.legend-color{width:16px;height:16px;border-radius:50%;flex-shrink:0;border:2px solid rgba(255,255,255,.2)}.legend-label{color:#cbd5e0;font-size:12px;white-space:nowrap}.legend-hint{margin-top:10px;padding-top:8px;border-top:1px solid #3d4f6f;color:#f6ad55;font-size:11px;line-height:1.4}.canvas-hint{position:absolute;bottom:8px;right:12px;color:#4a5568;font-size:11px;pointer-events:none}.main-group{transition:transform .1s ease-out}.input-node,.result-node{cursor:pointer}.input-node circle,.result-node circle{transition:all .3s ease}.input-node:hover circle,.result-node:hover circle{filter:brightness(1.2)}.annotation{pointer-events:none}.control-panel{background:#1a1a2e;border-top:1px solid #2d3748;padding:12px 16px}.controls-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.control-buttons{display:flex;align-items:center;gap:8px}.control-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 12px;background:#2d3748;border:1px solid #4a5568;border-radius:8px;color:#e2e8f0;cursor:pointer;transition:all .2s;min-width:50px}.control-btn:hover:not(:disabled){background:#4a5568;border-color:#63b3ed}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn.play-btn{background:#3182ce;border-color:#3182ce;padding:10px 16px}.control-btn.play-btn:hover{background:#4299e1;border-color:#4299e1}.btn-hint{font-size:9px;color:#718096;margin-top:2px}.play-btn .btn-hint{color:#ffffffb3}.speed-control{display:flex;align-items:center;gap:8px}.speed-label{color:#718096;font-size:13px}.speed-buttons{display:flex;gap:4px}.speed-btn{padding:4px 10px;background:#2d3748;border:1px solid #4a5568;border-radius:4px;color:#a0aec0;font-size:12px;cursor:pointer;transition:all .2s}.speed-btn:hover{background:#4a5568;color:#e2e8f0}.speed-btn.active{background:#3182ce;border-color:#3182ce;color:#fff}.step-info{display:flex;align-items:center;gap:4px;font-family:Monaco,Menlo,monospace;font-size:14px}.step-current{color:#63b3ed;font-weight:600}.step-separator{color:#4a5568}.step-total{color:#718096}.progress-bar{position:relative;height:8px;background:#2d3748;border-radius:4px;cursor:pointer;overflow:visible}.progress-fill{height:100%;background:linear-gradient(90deg,#3182ce,#63b3ed);border-radius:4px;transition:width .1s ease-out}.progress-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:#63b3ed;border:2px solid #1a1a2e;border-radius:50%;cursor:grab;transition:transform .1s,box-shadow .2s}.progress-handle:hover{transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 10px #63b3ed80}.progress-bar:active .progress-handle{cursor:grabbing;transform:translate(-50%,-50%) scale(1.3)}.floating-ball-container{position:fixed;bottom:24px;right:24px;z-index:100}.floating-ball{display:flex;flex-direction:column;align-items:center;justify-content:center;width:60px;height:60px;background:linear-gradient(135deg,#07c160,#06ae56);border-radius:50%;cursor:pointer;box-shadow:0 4px 20px #07c16066;transition:all .3s ease;color:#fff}.floating-ball:hover{transform:scale(1.1);box-shadow:0 6px 30px #07c16080}.ball-text{font-size:9px;margin-top:2px;font-weight:500}.qrcode-popup{position:absolute;bottom:70px;right:0;background:#fff;border-radius:12px;box-shadow:0 10px 40px #0000004d;overflow:hidden;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.qrcode-content{padding:16px;text-align:center}.qrcode-image{width:200px;height:auto;border-radius:8px}.qrcode-hint{margin:12px 0 0;color:#333;font-size:13px;line-height:1.5}.qrcode-hint strong{color:#07c160}.app{display:flex;flex-direction:column;height:100vh;background:#0f1419;overflow:hidden}.main-content{flex:1;display:flex;gap:12px;padding:12px 16px;min-height:0}.code-section{width:570px;flex-shrink:0;display:flex;flex-direction:column}.canvas-section{flex:1;display:flex;flex-direction:column;min-width:0}