.stair-crossband {
  pointer-events: none;
  user-select: none;
  font-family: system-ui, sans-serif;
}

.stair-crossband-segment {
  fill: var(--crossband-color);
  fill-opacity: .19;
  stroke: var(--crossband-color);
  stroke-opacity: .45;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.stair-crossband-transition {
  fill-opacity: .3;
}

.stair-crossband-title {
  fill-opacity: .25;
}

.stair-crossband-outline {
  fill: none;
  stroke: var(--crossband-color);
  stroke-opacity: .66;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.stair-crossband-zone-label,
.stair-crossband-caption text {
  text-anchor: middle;
  fill: #e9f3fa;
  font-weight: 720;
  stroke: #11202b;
  stroke-width: 2;
  paint-order: stroke;
}

.stair-crossband-caption rect {
  fill: #10212d;
  fill-opacity: .9;
  stroke: var(--crossband-color);
  stroke-opacity: .75;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.stair-crossband.is-focus .stair-crossband-segment {
  fill-opacity: .11;
}

.stair-crossband.is-focus .stair-crossband-outline {
  stroke-dasharray: 6 5;
  stroke-opacity: .65;
}

.stair-crossband.is-interactive {
  cursor: grab;
  outline: none;
}

.stair-crossband.is-interactive .stair-crossband-segment,
.stair-crossband.is-interactive .stair-crossband-handle,
.stair-crossband.is-interactive .stair-crossband-caption {
  pointer-events: all;
}

.stair-crossband-handle circle {
  fill: #142b39;
  stroke: var(--crossband-color);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.stair-crossband-handle path {
  fill: none;
  stroke: #dceaf4;
  stroke-width: 2;
}

.stair-crossband.is-interactive:active {
  cursor: grabbing;
}

.stair-crossband.is-interactive:focus-visible .stair-crossband-outline {
  stroke-width: 3;
  stroke-opacity: 1;
}