:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{padding:2em}#app{width:100%;padding:2rem;text-align:center}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.config-panel[data-v-56680890]{flex:0 0 280px;background:white;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;height:fit-content}.config-group[data-v-56680890]{margin-bottom:15px}.config-group label[data-v-56680890]{display:block;margin-bottom:8px;font-size:14px}.config-group input[type=number][data-v-56680890]{width:100%;padding:4px 8px;border:1px solid #ddd;border-radius:3px;font-size:12px}.description[data-v-56680890]{margin-top:25px;font-size:14px}.description h3[data-v-56680890]{font-size:18px;margin:15px 0}.description ul[data-v-56680890]{padding-left:25px;margin:10px 0}button[data-v-56680890]{padding:8px 16px;background:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background .3s;font-size:14px}button[data-v-56680890]:hover{background:#2980b9}.producer[data-v-0c1b69fc]{background:#E3F2FD;border:2px solid #64B5F6;border-radius:6px;position:relative;padding:10px;box-shadow:0 2px 4px #0000001a;font-weight:500;color:#1976d2;width:calc(100% - 30px);text-align:center}.producer-group[data-v-c4029d24]{position:absolute;border:2px dashed #64B5F6;border-radius:8px;padding:10px;background:rgba(227,242,253,.1);z-index:0;display:flex;align-items:center;justify-content:center}.broker[data-v-817defb2]{background:#E8F5E9;border:2px solid #4CAF50;border-radius:6px;position:relative;padding:10px;box-shadow:0 2px 4px #0000001a;font-weight:500;color:#2e7d32;width:calc(100% - 30px)}.message-queue[data-v-817defb2]{display:flex;flex-direction:row;gap:2px;margin:5px 0 40px;height:40px;background:#fff;border:1px solid #ddd;border-radius:4px;padding:5px;align-items:center;justify-content:flex-start;overflow:hidden;position:relative}.queue-container[data-v-817defb2]{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.queue-slot[data-v-817defb2]{width:32px;height:24px;border:1px dashed #ccc;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#666;position:relative;background:white;margin:0;flex-shrink:0}.queue-slot.filled[data-v-817defb2]{background:#FFF3E0;border:1px solid #FFE0B2;border-radius:3px;color:#e65100;transition:opacity .3s ease}.queue-slot.filled.acknowledged[data-v-817defb2]{background:#9E9E9E;border-color:#757575;color:#fff;opacity:.7}.queue-slot.next-to-consume[data-v-817defb2]:after{content:"\2191";position:absolute;bottom:-20px;left:50%;transform:translate(-50%);color:#fb8c00;font-size:16px;font-weight:700}.broker-group[data-v-f215b4b1]{position:absolute;border:2px dashed #81C784;border-radius:8px;padding:10px;background:rgba(232,245,233,.1);z-index:0;display:flex;align-items:center;justify-content:center}.consumer[data-v-11df17cb]{background:#FFF3E0;border:2px solid #FFA726;border-radius:6px;position:relative;padding:10px;box-shadow:0 2px 4px #0000001a;font-weight:500;color:#e65100;width:calc(100% - 30px)}.message-queue[data-v-11df17cb]{display:flex;flex-direction:row;gap:2px;margin:5px 0 0;height:40px;background:#fff;border:1px solid #ddd;border-radius:4px;padding:5px;align-items:center;justify-content:center;overflow:hidden}.queue-container[data-v-11df17cb]{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.queue-slot[data-v-11df17cb]{width:32px;height:24px;border:1px dashed #ccc;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#666;position:relative;background:white;flex-shrink:0;transform:translate(0);transition:transform var(--fade-duration) ease}.queue-slot.filled[data-v-11df17cb]{background:#FFF3E0;border:1px solid #FFE0B2;border-radius:3px;color:#e65100}.queue-slot.fade-out[data-v-11df17cb]{opacity:0;transform:translateY(-20px);transition:opacity var(--fade-duration) ease,transform var(--fade-duration) ease}.queue-slot.reset-position[data-v-11df17cb]{transform:translate(0);transition:none}.consumer-group[data-v-da3b7dd3]{position:absolute;border:2px dashed #FFB74D;border-radius:8px;padding:10px;background:rgba(255,243,224,.1);z-index:0;display:flex;align-items:center;justify-content:center}.message[data-v-eae3abc7]{position:absolute;width:32px;height:24px;background:#FFF3E0;border:1px solid #FFE0B2;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#e65100;z-index:1}.message.acknowledged[data-v-eae3abc7]{background:#9E9E9E;border-color:#757575;color:#fff;opacity:.7}.ack[data-v-722d9067]{position:absolute;width:24px;height:24px;background:#4ca64f;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;z-index:1000;margin-left:-12px;margin-top:-12px}.visualization-panel[data-v-9b148714]{flex:1;background:white;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;min-width:800px}.visualization[data-v-9b148714]{height:500px;border:1px solid #ddd;position:relative;overflow:hidden;background:#f8f9fa;padding:20px;margin-top:20px}h1[data-v-9b148714]{margin:0 0 20px;font-size:20px}.controls[data-v-9b148714]{display:flex;gap:10px;margin:15px 0;flex-wrap:wrap;align-items:center}.speed-control[data-v-9b148714]{display:flex;align-items:center;gap:8px;margin-left:auto}.speed-control label[data-v-9b148714]{font-size:14px;color:#666}button[data-v-9b148714]{padding:8px 16px;background:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background .3s;font-size:14px}button[data-v-9b148714]:hover{background:#2980b9}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;margin:0;padding:20px;background:#f5f5f5}h1{font-size:24px;margin-bottom:25px}h2{font-size:18px}button{padding:8px 16px;background:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background .3s;font-size:14px}button:hover{background:#2980b9}.container{display:flex;width:100%;margin:20px auto;gap:20px;padding:0 20px}