.ruty-risk-map {
  position: relative;
  isolation: isolate;
  min-height: 760px !important;
  overflow: hidden;
  border: 1px solid rgba(49, 95, 139, .34);
  border-radius: 30px;
  background: #dcecf6;
  box-shadow: 0 22px 64px rgba(16, 42, 67, .11) !important;
}

.ruty-risk-route {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  overflow: visible;
  user-select: none;
}

.ruty-risk-route :is(path, circle) {
  vector-effect: non-scaling-stroke;
}

.ruty-risk-route path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ruty-route-segment,
.ruty-route-branch {
  stroke: #9fbcd3;
  stroke-width: 4;
  transition: stroke .28s ease, opacity .28s ease;
}

.ruty-route-progress {
  stroke: #0b2b60;
  stroke-width: 4;
  pointer-events: none;
}

.ruty-route-branch {
  stroke: #b9d1e3;
}

.ruty-route-segment.is-active,
.ruty-route-branch.is-active {
  stroke: #0b2b60;
}

.ruty-route-segment.is-disabled,
.ruty-route-node.is-disabled,
.ruty-route-final.is-disabled {
  opacity: .24;
}

.ruty-risk-route text {
  fill: #123765;
  font-family: "Inter Tight", Inter, sans-serif;
}

.ruty-route-labels,
.ruty-route-stop,
.ruty-route-result {
  pointer-events: none;
}

.ruty-route-index {
  fill: #5887b5 !important;
  font: 500 13px/1 "DM Mono", monospace !important;
  letter-spacing: .04em;
}

.ruty-route-name {
  fill: #0b2b60 !important;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.025em;
}

.ruty-route-detail {
  fill: #486786 !important;
  font-size: 13px;
}

.ruty-route-stop circle {
  fill: #edf6fb;
  stroke: #6d96bc;
  stroke-width: 2;
  transition: fill .25s ease, stroke .25s ease, transform .25s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.ruty-route-stop text {
  fill: #6684a1;
  font: 550 11px/1 "DM Mono", monospace;
  letter-spacing: .055em;
  transition: fill .25s ease, opacity .25s ease;
}

.ruty-route-stop.is-active circle {
  fill: #fff;
  stroke: #0b2b60;
  transform: scale(1.12);
}

.ruty-route-stop.is-active text {
  fill: #0b2b60;
}

.ruty-route-node,
.ruty-route-final,
.ruty-route-start {
  cursor: pointer;
  outline: none;
}

.ruty-node-hit,
.ruty-start-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.ruty-node-halo,
.ruty-final-halo {
  fill: rgba(255, 255, 255, .54);
  stroke: #b4cce0;
  stroke-width: 1;
  opacity: .52;
  transition: opacity .25s ease, transform .25s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.ruty-node-ring,
.ruty-final-ring {
  fill: #edf6fb;
  stroke: #789dbd;
  stroke-width: 3;
  transition: fill .25s ease, stroke .25s ease;
}

.ruty-node-dot,
.ruty-final-dot {
  fill: #789dbd;
  stroke: none;
  transition: fill .25s ease, transform .25s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.ruty-route-node:is(:hover, :focus-visible) .ruty-node-halo,
.ruty-route-final:is(:hover, :focus-visible) .ruty-final-halo {
  opacity: 1;
}

.ruty-route-node.is-active .ruty-node-halo,
.ruty-route-node.is-passed .ruty-node-halo,
.ruty-route-final.is-active .ruty-final-halo {
  opacity: .95;
  stroke: #75a6d2;
}

.ruty-route-node.is-active .ruty-node-ring,
.ruty-route-node.is-passed .ruty-node-ring,
.ruty-route-node.is-rejected .ruty-node-ring,
.ruty-route-final.is-active .ruty-final-ring {
  fill: #fff;
  stroke: #0b2b60;
}

.ruty-route-node.is-active .ruty-node-dot,
.ruty-route-node.is-passed .ruty-node-dot,
.ruty-route-node.is-rejected .ruty-node-dot,
.ruty-route-final.is-active .ruty-final-dot {
  fill: #0b2b60;
}

.ruty-route-node.is-active .ruty-node-halo {
  animation: rutyNodePulse .62s ease-out;
}

.ruty-start-mark {
  fill: #789dbd;
  stroke: none;
  transition: fill .25s ease;
}

.ruty-route-start:hover .ruty-start-mark,
.ruty-route-start:focus-visible .ruty-start-mark {
  fill: #0b2b60;
}

.ruty-route-signal {
  fill: #082858;
  stroke: #fff;
  stroke-width: 2;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(8, 40, 88, .26));
  transition: opacity .22s ease;
}

.ruty-route-signal.is-visible {
  opacity: 1;
}

.ruty-route-result {
  opacity: 0;
  transition: opacity .3s ease;
}

.ruty-route-final.is-complete .ruty-route-result {
  opacity: 1;
}

.ruty-result-values {
  fill: #0b2b60 !important;
  font-size: 20px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.ruty-result-arrow {
  fill: #6b89a5;
  font-weight: 400;
}

.ruty-result-updated {
  opacity: .18;
  transition: opacity .3s ease;
}

.ruty-route-final.is-updated .ruty-result-updated {
  opacity: 1;
}

.ruty-result-caption {
  fill: #6684a1 !important;
  font: 500 10px/1 "DM Mono", monospace !important;
  letter-spacing: .1em;
}

@keyframes rutyNodePulse {
  0% { transform: scale(.88); }
  52% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@media (max-width: 1100px) {
  .ruty-risk-map { min-height: min(820px, 106vw) !important; }
}

@media (max-width: 620px) {
  .ruty-risk-map {
    min-height: 590px !important;
    border-radius: 22px;
  }

  .ruty-risk-route {
    inset: 4px 0;
    width: 100%;
    height: calc(100% - 8px);
  }

  .ruty-route-index { font-size: 15px !important; }
  .ruty-route-name { font-size: 21px; }
  .ruty-route-detail { font-size: 15px; }
  .ruty-route-stop text { font-size: 13px; }
  .ruty-result-values { font-size: 23px; }
  .ruty-result-caption { font-size: 11px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ruty-risk-map *,
  .ruty-risk-map *::before,
  .ruty-risk-map *::after {
    animation: none !important;
    transition: none !important;
  }
}