.runtime-guard {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 24px;
  color: #18243a;
  background: #f7f8f5;
}

.runtime-guard[hidden] {
  display: none;
}

.runtime-guard__card {
  display: grid;
  width: min(720px, 100%);
  overflow: hidden;
  border: 1px solid #d6dee8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(21, 35, 56, .16);
}

.runtime-guard__signal {
  display: grid;
  align-content: center;
  min-height: 180px;
  padding: 32px;
  color: #174f91;
  background: #e8f2ff;
}

.runtime-guard__signal-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.runtime-guard__route {
  display: grid;
  grid-template-columns: 12px minmax(36px, 1fr) 38px minmax(36px, 1fr) 12px;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.runtime-guard__route > span {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #087c6c;
}

.runtime-guard__route > span:last-child {
  background: #0068e8;
}

.runtime-guard__route > i {
  height: 2px;
  background: currentColor;
  opacity: .45;
}

.runtime-guard__route > b {
  position: relative;
  width: 38px;
  height: 38px;
  border: 2px solid #b86b0d;
  border-radius: 50%;
}

.runtime-guard__route > b::before,
.runtime-guard__route > b::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  content: "";
  background: #b86b0d;
}

.runtime-guard__route > b::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.runtime-guard__route > b::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.runtime-guard__copy {
  padding: 32px;
}

.runtime-guard__eyebrow {
  display: block;
  color: #a35c08;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.runtime-guard h1,
.runtime-guard__title {
  margin: 8px 0 0;
  color: inherit;
  font-size: clamp(26px, 6vw, 34px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.runtime-guard p {
  max-width: 46ch;
  margin: 14px 0 0;
  color: #56647a;
  font-size: 15px;
  line-height: 1.65;
}

.runtime-guard__action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 0 20px;
  border: 1px solid #005fcf;
  border-radius: var(--control-radius);
  color: #fff;
  background: #0068e8;
  font-family: inherit;
  font-size: var(--control-font-size);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.runtime-guard__action:hover {
  border-color: #004da8;
  background: #0058c5;
  transform: translateY(-1px);
}

.runtime-guard__action:focus-visible {
  outline: 3px solid rgba(0, 104, 232, .42);
  outline-offset: 3px;
}

.runtime-guard__action:disabled {
  color: #6a7689;
  border-color: #cbd4df;
  background: #e7ebf0;
  cursor: wait;
  transform: none;
}

.runtime-guard-active {
  overflow: hidden;
}

html[data-theme="dark"] .runtime-guard {
  color: #edf4ff;
  background: #0c1424;
}

html[data-theme="dark"] .runtime-guard__card {
  border-color: #30415b;
  background: #17243a;
  box-shadow: 0 24px 70px rgba(2, 8, 20, .52);
}

html[data-theme="dark"] .runtime-guard__signal {
  color: #93c5fd;
  background: #142b49;
}

html[data-theme="dark"] .runtime-guard__eyebrow {
  color: #f2bd6b;
}

html[data-theme="dark"] .runtime-guard p {
  color: #aab8cc;
}

@media (min-width: 680px) {
  .runtime-guard__card {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  }
}

@media (max-width: 679px) {
  .runtime-guard {
    align-items: start;
    padding: 16px;
  }

  .runtime-guard__card {
    margin-block: auto;
  }

  .runtime-guard__signal {
    min-height: 132px;
    padding: 24px;
  }

  .runtime-guard__route {
    margin-top: 18px;
  }

  .runtime-guard__copy {
    padding: 24px;
  }

  .runtime-guard__action {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .runtime-guard {
    padding: 10px;
  }

  .runtime-guard__signal,
  .runtime-guard__copy {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .runtime-guard__action {
    transition: none;
  }
}