.bn-bracket { position: relative; }
.bn-bracket-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.bn-bracket .bn-round { position: relative; z-index: 1; }
.bn-bracket-line {
  fill: none;
  stroke: rgba(175, 188, 211, .3);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.bn-bracket-line.is-advanced { stroke: var(--gold); stroke-width: 2.5; }
.bn-bracket-progress { display: none; }
@media (max-width: 760px) {
  .bn-bracket-lines { display: none; }
  .bn-bracket-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .bn-bracket-progress-step {
    display: flex;
    flex: 1 1 76px;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: rgba(255,255,255,.035);
    color: var(--text-3);
  }
  .bn-bracket-progress-step.is-current { border-color: var(--red); background: rgba(255,56,56,.12); color: #fff; }
  .bn-bracket-progress-step span { font: 700 12px/1.2 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
  .bn-bracket-progress-step small { color: var(--text-2); font: 600 12px/1.2 var(--font-mono); }
}