#detail-related > ul{
  list-style:none;
  padding:0;
  display:grid;
  gap:12px;
}
.related-literature-item{
  margin:0!important;
  padding:15px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.03);
}
.related-literature-item .inline-related{
  display:block;
  width:100%;
  margin:0 0 5px;
  border:0;
  background:none;
  padding:0;
  color:#dcecff;
  text-align:left;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
  cursor:pointer;
  text-decoration:none;
}
.related-literature-item .inline-related:hover{
  color:var(--accent);
}
.related-meta{
  margin-bottom:8px;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.5;
}
.related-role-row{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:9px;
}
.related-role{
  padding:3px 7px;
  border:1px solid rgba(122,184,255,.16);
  border-radius:999px;
  background:rgba(122,184,255,.08);
  color:#cfe2fb;
  font-size:10.5px;
  line-height:1.45;
}
.related-note{
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.07);
}
.related-note strong,
.role-explanation strong{
  display:block;
  margin-bottom:3px;
  color:var(--accent);
  font-size:11px;
}
.related-note p,
.role-explanation p{
  margin:0;
  color:#dce8f7;
  font-size:12.5px;
  line-height:1.68;
}
.related-note ul{
  margin:0;
  padding-left:18px;
  color:#dce8f7;
  font-size:12.5px;
  line-height:1.68;
}
.related-note li+li{
  margin-top:4px;
}
.role-explanations{
  display:grid;
  gap:8px;
  margin-top:9px;
}
.role-explanation{
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(255,255,255,.028);
}
@media(max-width:520px){
  .related-literature-item{padding:13px}
  .related-literature-item .inline-related{font-size:13.5px}
  .related-note p,.related-note ul,.role-explanation p{font-size:12px}
}