.hrui-wrap{
position:relative;
width:760px;
height:760px;
margin:40px auto;
}

.hrui-top{
transform:scale(.62);
height:420px;
margin-top:-120px;
}

.orbit{
position:absolute;
border-radius:50%;
border:1px solid rgba(255,255,255,.12);
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

.ring1{width:560px;height:560px;}
.ring2{width:420px;height:420px;}

.menu-circle{
position:absolute;
width:145px;
height:145px;
border-radius:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
font-size:28px;
font-weight:700;
color:#fff;
background:var(--outerbg);
border:1px solid rgba(255,255,255,.15);
backdrop-filter:blur(18px);
box-shadow:0 0 25px var(--outerglow);
transition:.3s ease;
}

.menu-circle span{
font-size:20px;
}

.menu-circle:hover{
transform:scale(1.08);
}

.center-circle{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:300px;
height:300px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(circle,var(--centerbg),#111827);
box-shadow:0 0 60px var(--centerglow);
border:2px solid rgba(255,255,255,.15);
transition:transform .15s linear;
}

.center-circle h2{
color:#fff;
font-size:58px;
}

.top{top:30px;left:307px;}
.top-right{top:150px;right:55px;}
.bottom-right{bottom:150px;right:55px;}
.bottom{bottom:30px;left:307px;}
.bottom-left{bottom:150px;left:55px;}
.top-left{top:150px;left:55px;}

@media(max-width:768px){
.hrui-wrap{
width:360px;
height:360px;
}
.menu-circle{
width:78px;
height:78px;
font-size:16px;
gap:2px;
}
.menu-circle span{
font-size:11px;
}
.center-circle{
width:150px;
height:150px;
}
.center-circle h2{
font-size:28px;
}
.ring1{width:280px;height:280px;}
.ring2{width:210px;height:210px;}
.top{top:5px;left:140px;}
.top-right{top:60px;right:5px;}
.bottom-right{bottom:60px;right:5px;}
.bottom{bottom:5px;left:140px;}
.bottom-left{bottom:60px;left:5px;}
.top-left{top:60px;left:5px;}
}