.container {
    width: 90%;
    margin: 20px auto;
    text-align: center;
}

#network-area {
    position: relative;
    height: 200px; /* 调整高度以容纳设备 */
    border: 1px solid #ccc;
    margin-top: 20px;
    padding: 20px;
    display: flex; /* 使用flex布局方便排列 */
    align-items: center; /* 垂直居中 */
    justify-content: space-around; /* 水平分布 */
    background: #f9f9f9;
}

.network-device {
    border: 1px solid #aaa;
    padding: 15px 25px;
    border-radius: 5px;
    background: #e0e0e0;
    text-align: center;
    min-width: 80px; /* 最小宽度 */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.client { background-color: #cce5ff; border-color: #b8daff; }
.server { background-color: #d4edda; border-color: #c3e6cb; }
.switch { background-color: #fff3cd; border-color: #ffeeba; }
.router { background-color: #f5c6cb; border-color: #f1b0b7; }

#packet {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: blue;
    border-radius: 50%;
    display: none; /* 初始隐藏 */
    /* 将 ease-in-out 改为 linear 实现匀速移动 */
    transition: left 0.8s linear;
    z-index: 10;
}

#path-info {
    margin-top: 15px;
    font-family: monospace;
}