:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#e8e8e8;background-color:#0f0f23;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}a{font-weight:500;color:#4ecdc4;text-decoration:inherit}a:hover{color:#45b7aa}button{font-family:inherit}.header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background-color:#1a1a2e;border-bottom:1px solid #16213e;height:48px;box-sizing:border-box}.header-left,.header-right{display:flex;align-items:center;gap:12px;min-width:200px}.header-left{justify-content:flex-start}.header-right{justify-content:flex-end}.header-center{flex:1;display:flex;justify-content:center}.header-center h1{margin:0;font-size:18px;font-weight:600;color:#e8e8e8}.back-link{color:#4ecdc4;text-decoration:none;font-size:13px;padding:4px 8px;border-radius:4px;transition:background-color .2s}.back-link:hover{background-color:#4ecdc41a}.title-link{text-decoration:none;color:inherit}.title-link:hover h1{color:#4ecdc4}.idea-btn{background-color:transparent;border:1px solid #4ecdc4;color:#4ecdc4;padding:4px 12px;border-radius:4px;font-size:13px;cursor:pointer;transition:all .2s}.idea-btn:hover{background-color:#4ecdc41a}.github-link{display:flex;align-items:center;gap:6px;color:#e8e8e8;text-decoration:none;padding:4px 8px;border-radius:4px;transition:background-color .2s}.github-link:hover{background-color:#ffffff1a}.github-icon{flex-shrink:0}.star-count{font-size:13px;color:#ffc107}.data-input{padding:8px 16px;background-color:#16213e;border-bottom:1px solid #1a1a2e}.data-input-container{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.input-group{display:flex;align-items:center;gap:8px}.input-label{color:#888;font-size:13px;white-space:nowrap}.matrix-input{width:640px;padding:6px 10px;border:1px solid #3d3d3d;border-radius:4px;background-color:#1e1e1e;color:#e8e8e8;font-family:Consolas,Monaco,monospace;font-size:13px;outline:none;transition:border-color .2s}.matrix-input:focus{border-color:#4ecdc4}.matrix-input.error{border-color:#ff6b6b}.matrix-input::placeholder{color:#666}.apply-btn{padding:6px 16px;border:none;border-radius:4px;background-color:#4ecdc4;color:#1a1a2e;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .2s}.apply-btn:hover{background-color:#45b7aa}.samples-group{display:flex;align-items:center;gap:6px}.samples-label{color:#888;font-size:13px;margin-right:4px}.sample-btn{padding:4px 10px;border:1px solid #3d3d3d;border-radius:4px;background-color:transparent;color:#e8e8e8;font-size:12px;cursor:pointer;transition:all .2s}.sample-btn:hover{border-color:#4ecdc4;color:#4ecdc4}.sample-btn.active{border-color:#4ecdc4;background-color:#4ecdc41a;color:#4ecdc4}.random-btn{padding:4px 10px;border:1px solid #ffc107;border-radius:4px;background-color:transparent;color:#ffc107;font-size:12px;cursor:pointer;transition:all .2s}.random-btn:hover{background-color:#ffc1071a}.random-group{display:flex;align-items:center;gap:4px;margin-left:8px}.size-input{width:50px;padding:4px 8px;border:1px solid #3d3d3d;border-radius:4px;background-color:#1e1e1e;color:#e8e8e8;font-family:Consolas,Monaco,monospace;font-size:12px;text-align:center;outline:none;transition:border-color .2s}.size-input:focus{border-color:#ffc107}.size-input::placeholder{color:#666}.error-message{color:#ff6b6b;font-size:12px;margin-left:auto}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-display{display:flex;flex-direction:column;background-color:#1e1e1e;border-radius:8px;overflow:hidden;height:100%;min-width:1520px}.code-header{display:flex;align-items:center;padding:0;background-color:#2d2d2d;border-bottom:1px solid #3d3d3d}.language-tabs{display:flex;gap:0}.lang-tab{padding:8px 16px;border:none;background-color:transparent;color:#888;font-size:12px;cursor:pointer;transition:all .2s;border-bottom:2px solid transparent}.lang-tab:hover{color:#e8e8e8;background-color:#ffffff0d}.lang-tab.active{color:#4ecdc4;border-bottom-color:#4ecdc4;background-color:#4ecdc41a}.code-content{flex:1;overflow:auto;position:relative;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;line-height:1.6}.code-content pre{margin:0;padding:12px;background:transparent!important;opacity:0;position:absolute}.code-content code{background:transparent!important}.code-lines-overlay{padding:12px 0}.code-line{display:flex;align-items:flex-start;padding:0 12px;min-height:21px;transition:background-color .2s}.code-line.highlighted{background-color:#ffc10726;border-left:3px solid #ffc107;padding-left:9px}.line-number{flex-shrink:0;width:32px;color:#666;text-align:right;padding-right:12px;-webkit-user-select:none;user-select:none}.line-content{flex:1;white-space:pre;color:#e8e8e8}.line-annotation{flex-shrink:0;margin-left:16px;color:#4ecdc4;font-style:italic;font-size:12px;white-space:nowrap}.code-line .token.comment{color:#6a9955}.code-line .token.keyword{color:#569cd6}.code-line .token.string{color:#ce9178}.code-line .token.number{color:#b5cea8}.code-line .token.function{color:#dcdcaa}.code-line .token.class-name{color:#4ec9b0}.code-line .token.operator,.code-line .token.punctuation{color:#d4d4d4}.code-line .token.boolean{color:#569cd6}.variables-panel{border-top:1px solid #3d3d3d;padding:8px 12px;background-color:#252526;max-height:100px;overflow-y:auto}.variables-title{color:#888;font-size:11px;text-transform:uppercase;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-color:#1e1e1e;border-radius:4px;font-size:12px}.var-name{color:#9cdcfe}.var-value{color:#ce9178}.canvas-container{flex:1;display:flex;flex-direction:column;background-color:#0f0f23;border-radius:8px;overflow:hidden;position:relative;min-height:300px}.canvas-svg{width:100%;height:100%;cursor:grab}.canvas-svg:active{cursor:grabbing}.matrix-cell{stroke:#3d3d3d;stroke-width:1;transition:fill .3s ease}.matrix-cell.unvisited{fill:#2d2d2d}.matrix-cell.visited{fill:#1e5128}.matrix-cell.current{fill:#ffc107;stroke:#ff9800;stroke-width:2}.cell-text{fill:#e8e8e8;font-family:Consolas,Monaco,monospace;font-size:14px;text-anchor:middle;dominant-baseline:central;pointer-events:none}.cell-text.current{fill:#1a1a2e;font-weight:700}.boundary-line{stroke-width:5;stroke-dasharray:10,6;fill:none}.boundary-line.top{stroke:#ff6b6b}.boundary-line.bottom{stroke:#4ecdc4}.boundary-line.left{stroke:#45b7d1}.boundary-line.right{stroke:#96ceb4}.boundary-label{font-family:Consolas,Monaco,monospace;font-size:18px;font-weight:700}.boundary-label.top{fill:#ff6b6b}.boundary-label.bottom{fill:#4ecdc4}.boundary-label.left{fill:#45b7d1}.boundary-label.right{fill:#96ceb4}.direction-arrow{fill:#ffc107;stroke:#ff9800;stroke-width:2}.result-container{position:absolute;bottom:16px;left:16px;right:16px;background-color:#1e1e1ee6;border-radius:8px;padding:12px;border:1px solid #3d3d3d}.result-label{color:#888;font-size:12px;margin-bottom:4px}.result-array{color:#4ecdc4;font-family:Consolas,Monaco,monospace;font-size:14px;word-break:break-all}.step-annotation{position:absolute;top:16px;left:16px;background-color:#1e1e1ee6;border-radius:8px;padding:8px 12px;border:1px solid #3d3d3d;color:#e8e8e8;font-size:13px;max-width:300px}.zoom-controls{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:4px}.zoom-btn{width:32px;height:32px;border:none;border-radius:4px;background-color:#2d2d2de6;color:#e8e8e8;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.zoom-btn:hover{background-color:#3c3c3ce6}.zoom-btn:active{background-color:#505050e6}.control-panel{background-color:#1a1a2e;border-top:1px solid #16213e;padding:12px 16px}.controls-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.control-buttons{display:flex;gap:8px}.control-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid #3d3d3d;border-radius:6px;background-color:#2d2d2d;color:#e8e8e8;font-size:13px;cursor:pointer;transition:all .2s}.control-btn:hover:not(:disabled){border-color:#4ecdc4;background-color:#4ecdc41a}.control-btn:disabled{opacity:.5;cursor:not-allowed}.control-btn kbd{padding:2px 6px;background-color:#1e1e1e;border-radius:3px;font-size:11px;color:#888}.play-btn{background-color:#4ecdc4;border-color:#4ecdc4;color:#1a1a2e;font-weight:500}.play-btn:hover:not(:disabled){background-color:#45b7aa;border-color:#45b7aa}.play-btn kbd{background-color:#0003;color:#1a1a2e}.reset-btn{border-color:#ff6b6b;color:#ff6b6b}.reset-btn:hover:not(:disabled){background-color:#ff6b6b1a}.speed-control{display:flex;align-items:center;gap:8px}.speed-label{color:#888;font-size:13px}.speed-buttons{display:flex;gap:4px}.speed-btn{padding:4px 10px;border:1px solid #3d3d3d;border-radius:4px;background-color:transparent;color:#e8e8e8;font-size:12px;cursor:pointer;transition:all .2s}.speed-btn:hover{border-color:#4ecdc4}.speed-btn.active{border-color:#4ecdc4;background-color:#4ecdc433;color:#4ecdc4}.step-info{color:#888;font-size:13px;font-family:Consolas,Monaco,monospace}.progress-container{position:relative;height:8px;background-color:#3d3d3d;border-radius:4px;cursor:pointer;overflow:hidden}.progress-bar{position:absolute;top:0;left:0;height:100%;background-color:#4ecdc4;border-radius:4px;transition:width .1s ease-out;pointer-events:none}.progress-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}.progress-input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#4ecdc4;border-radius:50%;cursor:pointer}.progress-input::-moz-range-thumb{width:16px;height:16px;background:#4ecdc4;border-radius:50%;cursor:pointer;border:none}.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;border-radius:50%;background:linear-gradient(135deg,#07c160,#06ad56);color:#fff;cursor:pointer;box-shadow:0 4px 12px #07c16066;transition:transform .2s,box-shadow .2s}.floating-ball:hover{transform:scale(1.1);box-shadow:0 6px 16px #07c16080}.wechat-icon{margin-bottom:2px}.ball-text{font-size:10px;font-weight:500}.qr-popup{position:absolute;bottom:70px;right:0;background-color:#fff;border-radius:12px;box-shadow:0 8px 24px #0003;padding:16px;animation:fadeIn .2s ease-out}.qr-popup:after{content:"";position:absolute;bottom:-8px;right:24px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fff}.qr-content{display:flex;flex-direction:column;align-items:center}.qr-image{width:180px;height:auto;border-radius:8px;margin-bottom:12px}.qr-tip{margin:0;text-align:center;font-size:13px;color:#333;line-height:1.5}.qr-tip strong{color:#07c160}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-out}.modal-content{background-color:#1e1e1e;border-radius:12px;width:90%;max-width:600px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 32px #0006;animation:slideIn .2s ease-out}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background-color:#2d2d2d;border-bottom:1px solid #3d3d3d}.modal-header h2{margin:0;font-size:18px;color:#e8e8e8}.close-btn{width:32px;height:32px;border:none;border-radius:6px;background-color:transparent;color:#888;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.close-btn:hover{background-color:#ff6b6b33;color:#ff6b6b}.modal-body{padding:20px;overflow-y:auto;color:#e8e8e8;line-height:1.7}.modal-body h3{margin:0 0 16px;color:#4ecdc4;font-size:16px}.modal-body h4{margin:20px 0 12px;color:#ffc107;font-size:14px}.modal-body p{margin:0 0 12px;color:#ccc}.modal-body ol,.modal-body ul{margin:0 0 12px;padding-left:24px}.modal-body li{margin-bottom:8px;color:#ccc}.modal-body li ul{margin-top:8px;margin-bottom:0}.modal-body strong{color:#e8e8e8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:#0f0f23;color:#e8e8e8}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.main-content{flex:1;display:flex;gap:16px;padding:16px;min-height:0;overflow:hidden}.canvas-section{flex:1;min-width:0;display:flex}.code-section{width:840px;flex-shrink:0;display:flex}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#1e1e1e}::-webkit-scrollbar-thumb{background:#3d3d3d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#4d4d4d}@media(max-width:1024px){.main-content{flex-direction:column}.code-section{width:100%;height:300px}}