:root{font-family: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;padding:0;width:100%;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}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.app{min-height:100vh;display:flex;flex-direction:column;color:#333;background-color:#f5f5f5;width:100%}.app-header{background-color:#2c3e50;color:#fff;padding:20px 0;text-align:center;box-shadow:0 2px 5px #0000001a;width:100%}.app-header h1{margin:0;font-size:28px}.app-main{flex:1;padding:30px 15px;width:100%;display:flex;justify-content:center}.app-main>*{width:100%;max-width:1600px}.app-footer{background-color:#2c3e50;color:#fff;text-align:center;padding:15px 0;font-size:14px;width:100%}body,html{margin:0;padding:0;width:100%;overflow-x:hidden}@media (max-width: 768px){.app-header h1{font-size:24px}.app-main{padding:20px 10px}}.tree-view{width:100%;height:100%;min-height:100vh;position:relative;display:flex;justify-content:center;align-items:center}.tree-visualization{width:100%;height:100%;position:relative;display:flex;justify-content:center;align-items:center;transition:transform .5s ease}.tree-visualization.zoomed-out{transform:scale(.85)}.tree-visualization.zoomed-out-more{transform:scale(.7)}.tree-visualization.zoomed-out-max{transform:scale(.55)}.root-node-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.root-node{width:100px;height:100px;background-color:#2c3e50;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;font-weight:700;box-shadow:0 4px 8px #0c4a6e4d;position:relative;transition:all .3s ease;z-index:11}.root-node:hover{transform:scale(1.05);box-shadow:0 6px 12px #0c4a6e66}.add-factory-btn{position:absolute;bottom:-10px;right:-10px;width:36px;height:36px;background-color:#0ea5e9;border:none;border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff;cursor:pointer;box-shadow:0 2px 4px #0c4a6e33;z-index:20;transition:all .3s ease;opacity:0;transform:scale(.8);pointer-events:none}.add-factory-btn:hover{transform:scale(1.1);background-color:#0284c7}.root-node:hover .add-factory-btn{opacity:1;transform:scale(1);pointer-events:auto}.factories-container{position:absolute;width:100%;height:100%;top:0;left:0}.factory-branch{position:absolute;top:50%;left:50%;animation:fadeIn .3s ease}.connector-root-to-factory{position:absolute;height:2px;background-color:#94a3b8;transform-origin:left center;z-index:1}.connection-status{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:20px;font-size:14px;z-index:100;transition:all .3s ease}.connection-status.connected{background-color:#ecfeff;color:#0891b2}.connection-status.disconnected{background-color:#fee2e2;color:#dc2626}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#f9fafbcc;display:flex;justify-content:center;align-items:center;z-index:1000}.spinner{animation:spin 1s linear infinite;color:#0369a1}.factory-form{background-color:#fff;padding:24px;border-radius:8px;width:400px;max-width:90%;box-shadow:0 8px 16px #0c4a6e26}.factory-form h3{margin-top:0;color:#0c4a6e;margin-bottom:16px}.child-node-new{animation:pulse .5s ease}.add-factory-btn,.factory-btn{padding:0;border-radius:50%;display:flex;justify-content:center;align-items:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@media (max-width: 768px){.root-node{width:80px;height:80px;font-size:14px}}.factory-node-wrapper{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.factory-node{position:absolute;width:100px;height:70px;background-color:#0369a1;border-radius:4px;display:flex;flex-direction:column;padding:8px;color:#fff;box-shadow:0 4px 6px #0369a133;transition:all .3s ease;z-index:5;transform:translate(-50%,-50%)}.factory-node:hover{box-shadow:0 6px 10px #0369a14d}.factory-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.factory-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px}.factory-controls{display:flex;gap:4px}.factory-btn{width:24px;height:24px;min-width:24px;min-height:24px;padding:0;border:none;border-radius:4px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .2s ease}.edit-btn{background-color:#3b82f6}.edit-btn:hover{background-color:#2563eb}.generate-btn{background-color:#22c55e}.generate-btn:hover{background-color:#16a34a}.delete-btn{background-color:#ef4444}.delete-btn:hover{background-color:#dc2626}.factory-info{font-size:12px;display:flex;flex-direction:column;gap:2px}.factory-range,.factory-child-count{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.children-container{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none}.connector-line{position:absolute;height:1px;background-color:#94a3b8;transform-origin:left center;pointer-events:none}.child-node{position:absolute;width:36px;height:36px;background-color:#38bdf8;border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff;font-size:12px;font-weight:700;box-shadow:0 2px 4px #0ea5e933;transform:translate(-50%,-50%);z-index:3;transition:all .3s ease;pointer-events:auto}.child-node:hover{transform:translate(-50%,-50%) scale(1.2);box-shadow:0 4px 6px #0ea5e94d;z-index:4}.child-node.new{animation:popIn .4s ease forwards}@keyframes popIn{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}70%{transform:translate(-50%,-50%) scale(1.2)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media (max-width: 768px){.factory-node{width:90px;height:65px;font-size:12px}.factory-name{max-width:60px}.child-node{width:30px;height:30px;font-size:10px}}.factory-form-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0c4a6e40;display:flex;justify-content:center;align-items:center;z-index:1000}.factory-form{background-color:#fff;border-radius:8px;width:400px;max-width:90vw;box-shadow:0 8px 16px #0c4a6e26;animation:formAppear .3s ease}.form-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e2e8f0}.form-header h3{margin:0;color:#0c4a6e;font-size:18px}.close-btn{background:none;border:none;color:#64748b;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.close-btn:hover{background-color:#f1f5f9;color:#0c4a6e}form{padding:20px}.form-group{margin-bottom:16px}#name,#childCount,#upperBound,#lowerBound{background-color:#fff;color:#333}.form-row{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}.form-row .form-group{flex:1;min-width:calc(50% - 8px);margin-bottom:0}@media (max-width: 400px){.form-row .form-group{min-width:100%}}label{display:block;margin-bottom:6px;font-weight:500;color:#334155;font-size:14px}input{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:4px;font-size:14px;transition:all .2s ease;box-sizing:border-box}input:focus{outline:none;border-color:#0284c7;box-shadow:0 0 0 3px #0369a11a}input.error{border-color:#ef4444}input.error:focus{box-shadow:0 0 0 3px #ef444426}.error-message{color:#ef4444;font-size:12px;margin-top:4px}.input-hint{color:#64748b;font-size:12px;margin-top:4px}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.cancel-button{padding:8px 16px;background-color:#fff;color:#64748b;border:1px solid #cbd5e1;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.cancel-button:hover{background-color:#f1f5f9;color:#334155}.save-button{padding:8px 16px;background-color:#0369a1;color:#fff;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.save-button:hover{background-color:#0ea5e9}@keyframes formAppear{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (max-width: 480px){.form-row{flex-direction:column;gap:16px}.form-actions{flex-direction:column-reverse}.save-button,.cancel-button{width:100%;padding:10px}}