*{box-sizing:border-box}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;background-color:#f0f2f5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;min-width:320px;min-height:100vh}#root{width:100%;height:100vh}a{font-weight:500;color:#2563eb;text-decoration:inherit}a:hover{color:#1d4ed8}button{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 2px 4px #0000001a}.header-title{font-size:1.25rem;font-weight:600;color:#fff;text-decoration:none;transition:opacity .2s}.header-title:hover{opacity:.9;text-decoration:underline}.header-right{display:flex;align-items:center}.github-link{display:flex;align-items:center;gap:8px;color:#fff;padding:6px 10px;border-radius:6px;transition:background-color .2s;text-decoration:none}.github-link:hover{background-color:#fff3}.github-link svg{width:20px;height:20px}.star-count{display:flex;align-items:center;gap:4px;font-size:.875rem;font-weight:500;background-color:#fff3;padding:2px 8px;border-radius:10px}.star-icon{color:#fbbf24}.input-panel{padding:8px 16px;background-color:#f8f9fa;border-bottom:1px solid #e9ecef}.input-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.input-label{font-size:.875rem;font-weight:500;color:#495057;white-space:nowrap}.input-field{flex:1;padding:6px 10px;font-size:.875rem;font-family:Monaco,Menlo,Ubuntu Mono,monospace;border:1px solid #ced4da;border-radius:4px;outline:none;transition:border-color .2s,box-shadow .2s}.input-field:focus{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb33}.input-field.input-error{border-color:#dc3545}.run-button{padding:6px 16px;font-size:.875rem;font-weight:500;color:#fff;background:linear-gradient(135deg,#2563eb,#1d4ed8);border:none;border-radius:4px;cursor:pointer;transition:opacity .2s,transform .1s}.run-button:hover{opacity:.9}.run-button:active{transform:scale(.98)}.random-button{padding:6px 12px;font-size:.875rem;font-weight:500;color:#2563eb;background-color:#fff;border:1px solid #2563eb;border-radius:4px;cursor:pointer;transition:background-color .2s}.random-button:hover{background-color:#eff6ff}.samples-row{display:flex;align-items:center;gap:6px}.samples-label{font-size:.8rem;color:#6c757d}.sample-button{padding:3px 8px;font-size:.75rem;color:#495057;background-color:#e9ecef;border:none;border-radius:3px;cursor:pointer;transition:background-color .2s}.sample-button:hover{background-color:#dee2e6}.error-message{margin-top:6px;padding:6px 10px;font-size:.8rem;color:#dc3545;background-color:#f8d7da;border-radius:4px}.code-panel{display:flex;flex-direction:column;background-color:#1e1e1e;border-radius:8px;overflow:hidden;height:100%}.code-panel-header{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background-color:#2d2d2d;border-bottom:1px solid #3d3d3d}.language-tabs{display:flex;gap:4px}.language-tab{padding:4px 10px;font-size:.75rem;font-weight:500;color:#888;background-color:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;transition:all .2s}.language-tab:hover{color:#e0e0e0;background-color:#3d3d3d}.language-tab.active{color:#e0e0e0;background-color:#0d6efd;border-color:#0d6efd}.code-panel-subtitle{font-size:.75rem;color:#888}.code-container{flex:1;overflow:auto;display:flex;flex-direction:column;min-height:0}.code-pre{margin:0;padding:12px 0;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,monospace;font-size:.8rem;line-height:1.5;overflow-x:auto;flex:1;min-height:0}.code-line{display:flex;align-items:flex-start;padding:0 12px;min-height:1.5em;transition:background-color .2s}.code-line-highlighted{background-color:#ffff0026;border-left:3px solid #ffd700;padding-left:9px}.line-number{display:inline-block;width:2em;margin-right:12px;color:#6e7681;text-align:right;-webkit-user-select:none;user-select:none;flex-shrink:0}.line-content{flex:1;white-space:pre}.variable-display{margin-left:16px;padding:2px 8px;font-size:.7rem;color:#4ec9b0;background-color:#4ec9b026;border-radius:3px;white-space:nowrap;flex-shrink:0}.canvas-container{display:flex;flex-direction:column;background-color:#fff;border-radius:8px;overflow:hidden;height:100%;border:1px solid #e9ecef}.canvas-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background-color:#f8f9fa;border-bottom:1px solid #e9ecef}.canvas-title{font-size:.875rem;font-weight:600;color:#495057}.canvas-hint{font-size:.7rem;color:#adb5bd}.canvas-content{flex:1;position:relative;overflow:hidden}.canvas-svg{width:100%;height:100%;cursor:grab}.canvas-svg:active{cursor:grabbing}.step-description{position:absolute;bottom:12px;left:12px;right:12px;padding:8px 12px;background-color:#2563ebf2;color:#fff;border-radius:6px;font-size:.8rem;display:flex;align-items:center;gap:10px}.step-index{padding:2px 8px;background-color:#fff3;border-radius:4px;font-weight:600;white-space:nowrap}.step-text{flex:1}.canvas-svg .section-title{font-size:14px;font-weight:600;fill:#495057}.canvas-svg .input-box{fill:#e9ecef;stroke:#ced4da;stroke-width:1;transition:all .3s}.canvas-svg .input-box.highlighted{fill:#fff3cd;stroke:#ffc107;stroke-width:2}.canvas-svg .input-text{font-size:12px;font-family:Monaco,Menlo,monospace;fill:#495057}.canvas-svg .input-text.highlighted{fill:#856404;font-weight:600}.canvas-svg .arrow-indicator{font-size:14px;fill:#ffc107}.canvas-svg .key-box{fill:#d4edda;stroke:#28a745;stroke-width:1;transition:all .3s}.canvas-svg .key-box.highlighted{fill:#c3e6cb;stroke:#28a745;stroke-width:2}.canvas-svg .key-text{font-size:11px;font-family:Monaco,Menlo,monospace;fill:#155724}.canvas-svg .arrow-text{font-size:14px;fill:#6c757d}.canvas-svg .value-box{fill:#cce5ff;stroke:#007bff;stroke-width:1;transition:all .3s}.canvas-svg .value-box.highlighted{fill:#b8daff;stroke:#007bff;stroke-width:2}.canvas-svg .value-text{font-size:11px;font-family:Monaco,Menlo,monospace;fill:#004085}.canvas-svg .empty-hint{font-size:12px;fill:#adb5bd;font-style:italic}.control-panel{padding:12px 16px;background-color:#f8f9fa;border-top:1px solid #e9ecef}.controls-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.control-buttons{display:flex;gap:8px;align-items:center}.control-button{display:flex;align-items:center;gap:4px;padding:6px 12px;font-size:.8rem;color:#495057;background-color:#fff;border:1px solid #ced4da;border-radius:6px;cursor:pointer;transition:all .2s}.control-button:hover:not(:disabled){background-color:#e9ecef;border-color:#adb5bd}.control-button:disabled{opacity:.5;cursor:not-allowed}.control-button.play-button{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:none}.control-button.play-button:hover{opacity:.9}.button-icon{font-size:.9rem}.button-text{font-weight:500}.shortcut-hint{font-size:.65rem;padding:1px 4px;background-color:#0000001a;border-radius:3px;margin-left:2px}.play-button .shortcut-hint{background-color:#fff3}.speed-control{position:relative}.speed-button{min-width:70px}.speed-menu{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px;background-color:#fff;border:1px solid #ced4da;border-radius:6px;box-shadow:0 4px 12px #00000026;overflow:hidden;z-index:100}.speed-option{display:block;width:100%;padding:8px 16px;font-size:.8rem;color:#495057;background-color:#fff;border:none;cursor:pointer;transition:background-color .2s;text-align:center}.speed-option:hover{background-color:#e9ecef}.speed-option.active{background-color:#2563eb;color:#fff}.step-indicator{font-size:.85rem;font-weight:500;color:#6c757d;padding:4px 12px;background-color:#e9ecef;border-radius:4px}.progress-bar-container{position:relative;height:8px;background-color:#dee2e6;border-radius:4px;cursor:pointer;overflow:visible}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#28a745,#20c997);border-radius:4px;transition:width .1s ease-out}.progress-bar-handle{position:absolute;top:50%;width:16px;height:16px;background-color:#fff;border:2px solid #28a745;border-radius:50%;transform:translate(-50%,-50%);cursor:grab;box-shadow:0 1px 3px #0003;transition:transform .1s}.progress-bar-handle:hover{transform:translate(-50%,-50%) scale(1.1)}.progress-bar-handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.2)}.wechat-float{position:fixed;bottom:20px;right:20px;z-index:1000}.float-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;background:linear-gradient(135deg,#07c160,#06ad56);border-radius:50%;color:#fff;cursor:pointer;box-shadow:0 4px 12px #07c16066;transition:transform .2s,box-shadow .2s}.float-button:hover{transform:scale(1.05);box-shadow:0 6px 16px #07c16080}.wechat-icon{width:24px;height:24px}.float-text{font-size:.6rem;font-weight:500;margin-top:2px}.qrcode-popup{position:absolute;bottom:70px;right:0;background-color:#fff;border-radius:12px;padding:16px;box-shadow:0 8px 24px #00000026;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.qrcode-image{width:180px;height:auto;border-radius:8px;display:block}.qrcode-hint{margin:12px 0 0;font-size:.75rem;color:#666;text-align:center;line-height:1.5}.qrcode-hint strong{color:#07c160}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden;background-color:#f0f2f5}.main-content{flex:1;display:flex;gap:12px;padding:12px 16px;min-height:0;overflow:hidden}.code-section{flex:0 0 546px;min-width:450px;display:flex;flex-direction:column}.canvas-section{flex:1;min-width:0;display:flex;flex-direction:column}@media(max-width:900px){.main-content{flex-direction:column}.code-section{flex:0 0 auto;max-height:40vh}.canvas-section{flex:1}}