*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:#0f1117;
color:white;
font-family:Arial,sans-serif;
min-height:100dvh;
overflow-x:hidden;

padding-top:env(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
}

.topbar{

height:60px;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 16px;

background:#11151d;

border-bottom:
1px solid rgba(255,255,255,.06);

box-shadow:
0 4px 20px rgba(0,0,0,.35);

}

.logo-block{

display:flex;
align-items:center;
gap:10px;

}

.logo-icon{

width:48px;
height:48px;

object-fit:contain;

filter:
drop-shadow(0 0 10px rgba(0,180,255,.45));

}

.logo-block span{

font-size:10px;

letter-spacing:3px;

margin-top:4px;

color:#7f8896;

}

.menu-btn,
.settings-btn{

width:34px;
height:34px;

border:none;
border-radius:10px;

background:#1b2230;

color:white;

font-size:20px;

display:flex;
align-items:center;
justify-content:center;

}

.tabs{
display:flex;
gap:8px;

}

header p{
color:#aaa;
}

.tab-btn{
flex:1;
border:none;
border-radius:11px;
padding:5px;
background:#1a1f2a;
color:white;
font-size:13px;
cursor:pointer;
}

.tab-btn.active{
background:#ff3b30;
}

.viewer{

padding-top:0;
padding-bottom:120px;

display:flex;
justify-content:center;
align-items:center;

overflow:hidden;

}

#human3d{

width:100%;

height:58dvh;

max-height:650px;

min-height:280px;

margin-top:-30px;
margin-bottom:110px;

background:transparent;

}

.muscle-info{

position:fixed;

left:0;
right:0;
bottom:0;

padding:18px 20px 26px 20px;

background:
linear-gradient(
180deg,
rgba(17,21,29,.92),
rgba(10,12,18,.98)
);

backdrop-filter:blur(20px);

border-top:
1px solid rgba(255,255,255,.06);

box-shadow:
0 -10px 30px rgba(0,0,0,.35);

z-index:999;

}

.muscle-title{
font-size:13px;
letter-spacing:2px;
color:#7f8896;
margin-bottom:10px;
}

.muscle-description{
font-size:12px;
line-height:1.2;
color:white;
font-weight:500;
}

@keyframes diamondFlow{

0%{
background-position:0% 50%;
}

100%{
background-position:300% 50%;
}

}

@keyframes diamondGlow{

0%{
filter:
drop-shadow(0 0 4px rgba(180,220,255,.25));
}

50%{
filter:
drop-shadow(0 0 14px rgba(255,255,255,.55));
}

100%{
filter:
drop-shadow(0 0 4px rgba(180,220,255,.25));
}

}
