.line {
  stroke: #D9D9D9;
  stroke-width: 3;
  stroke-miterlimit: 23;
  stroke-opacity: 1;

  fill: none;

  transition: 3s;
}

.step-9 .line {
  stroke-width: 1.5;
}

.step-10 .line {
  stroke-width: 4;
}

.line.stellar__line {
  stroke-dasharray: 0 500;
}

.line.stellar__line.correct {
  stroke-dasharray: 1000 1000;
}

.border {
  stroke: #EECC60;
  stroke-width: 1.5;
  stroke-miterlimit: 23;

  fill: none;
}

.step-9 .border {
  stroke-width: 0.5;
}

.step-10 .border {
  stroke-width: 2;
}

.border.error {
  fill: #F1000E;
  fill-opacity: 50%;
}

.border_main {
  stroke:#DEDEDE;
}

.step-9 .border_main {
  stroke-width: 0.25;
}

.star {
  stroke: black;
  stroke-width: 0.25;

  fill: black;
  fill-rule: nonzero;
}

.stellar__border {
  fill: white;
  fill-opacity: 0.5;

  transition: 0.3s;
}

.stellar.stellar_hightlighted_yellow .stellar__border{
  fill:  #EECC60;
}

.stellar[data-complite]  .stellar__border {
  fill-opacity: 0;
}

.trap {
  /* fill: black; TODO Градиент */
  fill-opacity: 0;
}

.option {

}

.stellar-name {
  font-size: 24px;
  fill: #A5A5A5;

  pointer-events: none;
  transition: 0.3s;
}

.step-8 .stellar-name {
  font-size: 20px;
}

.step-9 .stellar-name {
  font-size: 12px;
}

.step-10 .stellar-name {
  font-size: 25px;
}

.stellar-name.hidden {
  fill-opacity: 0;
}

/* .stellar-name.hidden {
  opacity: 0;
} */