*{box-sizing:border-box;margin:0;padding:0}body{background-color:#f3f4f6;font-family:Inter,sans-serif;overflow:hidden}.tree{justify-content:center;width:max-content;margin:0 auto;padding:20px;display:flex}.tree ul{padding-top:var(--v-gap,30px);justify-content:center;transition:all .5s;display:flex;position:relative}.tree li{float:left;text-align:center;padding:var(--v-gap,30px) calc(var(--h-gap,20px) / 2) 0 calc(var(--h-gap,20px) / 2);list-style-type:none;transition:all .5s;position:relative}.tree li:before,.tree li:after{content:"";width:50%;height:var(--v-gap,30px);border-top:2px solid #555;position:absolute;top:0;right:50%}.tree li:after{border-left:2px solid #555;left:50%;right:auto}.tree li:only-child:after,.tree li:only-child:before{display:none}.tree li:only-child{padding-top:0}.tree li:first-child:before,.tree li:last-child:after{border:0}.tree li:last-child:before{border-right:2px solid #555;border-radius:0 5px 0 0}.tree li:first-child:after{border-radius:5px 0 0}.tree ul ul:before{content:"";width:0;height:var(--v-gap,30px);border-left:2px solid #555;position:absolute;top:0;left:50%}.node{background-color:#fffffff2;border:2px solid #d1d5db;border-radius:8px;flex-direction:column;justify-content:center;margin:0 auto;padding:4px;text-decoration:none;transition:all .3s;display:flex;position:relative;box-shadow:0 4px 6px -1px #0000001a}.node:hover{border-color:#3b82f6;box-shadow:0 10px 15px -3px #0000001a}.members-list{flex-direction:column;gap:6px;width:100%;display:flex}.member-row{border-bottom:1px dashed #e5e7eb;justify-content:space-between;align-items:center;gap:4px;padding-bottom:4px;display:flex;position:relative}.member-row:last-child{border-bottom:none;padding-bottom:0}.name-display{text-align:center;background:0 0;border-radius:4px;width:100%;padding:4px;font-family:inherit;font-weight:700;transition:background-color .2s;display:block}.name-display:hover{background-color:#3b82f614}.member-controls{z-index:100;background:#fff;border:1px solid #d1d5db;border-radius:6px;align-items:center;gap:6px;margin-top:4px;padding:4px 6px;display:none;position:absolute;top:100%;left:50%;transform:translate(-50%);box-shadow:0 4px 6px -1px #0000001a}.member-row:hover .member-controls{display:flex}.member-controls:after{content:"";background:0 0;height:8px;position:absolute;bottom:100%;left:0;right:0}.recent-colors-mini{border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;gap:4px;padding:0 6px;display:flex}.recent-color-dot{cursor:pointer;border:1px solid #d1d5db;border-radius:50%;width:14px;height:14px;padding:0;transition:transform .1s}.recent-color-dot:hover{transform:scale(1.2)}.node-controls{z-index:100;background:#fff;border:1px solid #d1d5db;border-radius:8px;flex-direction:column;gap:6px;margin-right:8px;padding:8px;display:none;position:absolute;top:50%;right:100%;transform:translateY(-50%);box-shadow:0 10px 15px -3px #0000001a}.node:hover .node-controls{display:flex}.node-controls:after{content:"";background:0 0;width:12px;position:absolute;top:0;bottom:0;left:100%}.node-btn{cursor:pointer;white-space:nowrap;background:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;justify-content:center;align-items:center;padding:4px 6px;font-size:11px;font-weight:500;display:flex}.node-btn:hover{background:#e5e7eb}.member-btn{cursor:pointer;background:0 0;border:none;align-items:center;padding:2px;display:flex}.color-picker{cursor:pointer;background:0 0;border:none;border-radius:4px;width:16px;height:16px;padding:0}.zoom-container{background-color:#f3f4f6;width:100vw;height:calc(100vh - 80px)}.canvas-area{background-position:50%;background-repeat:no-repeat;background-size:cover;justify-content:center;align-items:center;min-width:100%;min-height:100%;padding:100px;display:inline-flex}.header-toolbar{z-index:10;background:#fff;border-bottom:1px solid #ddd;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 20px;display:flex;box-shadow:0 2px 4px #0000000d}.node-modal-overlay{z-index:9999;-webkit-backdrop-filter:blur(6px);background-color:#00000080;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.node-modal-container{box-sizing:border-box;background:#fff;border:1px solid #e5e7eb;border-radius:12px;flex-direction:column;width:480px;max-width:90%;max-height:80vh;padding:24px;display:flex;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@media (width<=1024px){.header-toolbar{display:none!important}.zoom-container{width:100vw!important;height:100vh!important}.node-controls,.member-controls{display:none!important}.node-modal-overlay{align-items:flex-start!important;padding:16px 12px!important;overflow-y:auto!important}.node-modal-container{box-sizing:border-box!important;border-radius:12px!important;width:100%!important;max-width:420px!important;height:80vh!important;margin:0 auto!important;padding:16px!important;position:relative!important;top:50px!important;left:auto!important;transform:none!important}}