.stair-variant {
  --stair-rail: #809ba9;
  --stair-text: #dce6ee;
  --stair-muted: #94a8b8;
  font-family: system-ui, sans-serif;
}

.stair-variant .stair-phase {
  cursor: pointer;
  outline: none;
}

.stair-variant .stair-face {
  stroke: none;
}

.stair-variant .stair-underpass {
  pointer-events: none;
}

.stair-variant .stair-face-outline {
  fill: none;
  stroke: #6d8496;
  stroke-opacity: .26;
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: miter;
  pointer-events: none;
}

.stair-transition,
.stair-gateways {
  pointer-events: none;
}

.stair-transition-ground {
  fill-opacity: .84;
  stroke: none;
}

.stair-transition-chevrons {
  fill: none;
  stroke-opacity: .3;
  stroke-linejoin: miter;
  stroke-linecap: square;
}

.stair-gate-threshold {
  stroke: var(--gate-color);
  stroke-width: 3;
  stroke-dasharray: 8 6;
  stroke-opacity: .55;
}

.stair-gate-posts {
  fill: none;
  stroke: var(--gate-color);
  stroke-width: 7;
  stroke-linecap: square;
}

.stair-gate-label {
  fill: #dae7f4;
  stroke: #122032;
  stroke-width: 4;
  paint-order: stroke;
  text-anchor: middle;
  font-size: 13px;
  font-weight: 650;
}

.stair-variant .stair-selection {
  fill: none;
  stroke: var(--phase-color);
  stroke-opacity: 0;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: miter;
  pointer-events: none;
}

.stair-variant .stair-phase:hover .stair-selection {
  stroke-opacity: .4;
}

.stair-variant .stair-phase.is-selected .stair-selection,
.stair-variant .stair-phase:focus-visible .stair-selection {
  stroke-opacity: .92;
}

.stair-variant .stair-zone-labels,
.stair-variant .stair-title-band {
  pointer-events: none;
  user-select: none;
}

.stair-variant .stair-zone-labels rect {
  fill: #101b25;
  fill-opacity: .85;
  stroke: #668093;
  stroke-opacity: .17;
}

.stair-variant .stair-zone-labels text {
  text-anchor: middle;
  fill: var(--stair-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 1.2px;
}

.stair-variant .stair-title-ground {
  pointer-events: visiblePainted;
  fill: var(--title-fill);
  fill-opacity: .84;
  stroke: var(--title-color);
  stroke-opacity: .55;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.stair-variant .stair-title-tint {
  fill: var(--title-color);
  fill-opacity: .18;
  stroke: none;
}

.stair-variant .stair-title-text {
  fill: var(--title-text);
  font-weight: 680;
  paint-order: stroke;
  stroke: #101b26;
  stroke-width: .6;
}

.stair-variant .stair-phase.is-selected .stair-title-ground {
  fill-opacity: .95;
  stroke-opacity: .85;
}

.stair-variant .stair-phase.is-selected .stair-title-tint {
  fill-opacity: .24;
}

.stair-variant .stair-core {
  cursor: pointer;
  outline: none;
}

.stair-variant .stair-core-ground {
  fill: #101c28;
}

.stair-variant .stair-core-rim {
  fill: none;
  stroke: #8aa9bc;
  stroke-width: 4;
}

.stair-variant .stair-core-inset {
  fill: none;
  stroke: #7998ad;
  stroke-opacity: .25;
  stroke-width: 1.5;
  pointer-events: none;
}

.stair-variant .stair-core-art,
.stair-variant .stair-core-plaque {
  pointer-events: none;
}

.stair-variant .stair-chip-traces path {
  fill: none;
  stroke: #759ba9;
  stroke-width: 2;
  stroke-opacity: .42;
}

.stair-variant .stair-chip-traces circle {
  fill: #94b8c6;
  fill-opacity: .62;
}

.stair-variant .stair-core-plaque rect {
  fill: #1a2c3b;
  stroke: #89aabc;
  stroke-width: 2.5;
}

.stair-variant .stair-core-plaque text {
  text-anchor: middle;
}

.stair-variant .stair-core-kicker {
  fill: #9db9c9;
  font-weight: 650;
  letter-spacing: 2px;
}

.stair-variant .stair-core-name {
  fill: #eef6fa;
  font-weight: 760;
  letter-spacing: -1px;
}

.stair-variant .stair-core-caption {
  fill: #9db2c0;
  font-weight: 500;
}

.stair-variant .stair-core:hover .stair-core-rim,
.stair-variant .stair-core:focus-visible .stair-core-rim {
  stroke: #d2e8f4;
  stroke-width: 5;
}

.stair-group-nav {
  position:absolute; top:12px; right:12px; max-width:250px;
  display:flex; flex-wrap:wrap; gap:5px; padding:10px;
  border:1px solid #354b60; background:#101c29ee; border-radius:10px;
}
.stair-group-nav>span { font-size:11px; color:#acbdcd; width:100%; margin-bottom:4px; }
.stair-group-nav button { font-size:11px; padding:6px; border-radius:5px; background:#203246; }
.stair-group-nav button[aria-pressed=true] { border-color:#8caac1; }
.stair-variant .reference-satellite-label { font-size:16px; }

.stair-work-area {
  fill-opacity: .06;
  stroke-opacity: .3;
  stroke-width: 1.5;
  pointer-events: none;
}

.stair-layout-note {
  position: absolute;
  bottom: 12px;
  left: 12px;
  max-width: 420px;
  padding: 10px;
  background: #202b35;
  color: #edca8f;
  font-size: 12px;
}