.resilience-routefield {
  position: fixed;
  z-index: 16;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.resilience-wavefield {
  position: fixed;
  z-index: 17;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.resilience-companion {
  --companion-x: 18px;
  --companion-y: calc(100vh - 126px);
  --companion-duration: 0ms;
  --companion-facing: 1;
  position: fixed;
  z-index: 18;
  top: 0;
  left: 0;
  width: 112px;
  height: 96px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--companion-x), var(--companion-y), 0);
  transition: transform var(--companion-duration) linear, opacity 220ms ease;
  will-change: transform;
}

.resilience-companion[data-visible="true"] {
  opacity: 0.96;
}

.resilience-companion[data-visible="true"][data-obstructed="true"] {
  opacity: 0.4;
}

.resilience-companion[data-visible="true"][data-motion="idle"] {
  cursor: pointer;
  pointer-events: auto;
}

.resilience-companion:focus-visible {
  border-radius: 3px;
  outline: 2px solid #d7b436;
  outline-offset: 3px;
}

.resilience-companion__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 5px 5px rgba(4, 15, 18, 0.2));
}

.resilience-companion__machine {
  transform: scaleX(var(--companion-facing));
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 520ms cubic-bezier(0.2, 0.7, 0.25, 1);
}

.resilience-companion__body,
.resilience-companion__head,
.resilience-companion__tread,
.resilience-companion__tread-line,
.resilience-companion__arm,
.resilience-companion__tail,
.resilience-companion__core,
.resilience-companion__core-ring,
.resilience-companion__antenna,
.resilience-companion__eye,
.resilience-companion__eye-lens,
.resilience-companion__topology-bay {
  transform-box: fill-box;
  transform-origin: center;
}

.resilience-companion__core-ring {
  animation: resilience-core-rotation 5.5s linear infinite;
}

.resilience-companion__core {
  animation: resilience-core-breathe 2.6s ease-in-out infinite;
}

.resilience-companion__antenna {
  animation: resilience-antenna-scan 1.7s ease-in-out infinite;
}

.resilience-companion__head {
  animation: resilience-head-curiosity 4.8s ease-in-out infinite;
  transform-origin: 58% 92%;
}

.resilience-companion__eye-lens {
  animation: resilience-eye-blink 5.4s ease-in-out infinite;
}

.resilience-companion__eye--back .resilience-companion__eye-lens {
  animation-delay: 120ms;
}

.resilience-companion__happy-eye {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.resilience-companion__tail path:first-child {
  stroke-dasharray: 9 5;
  animation: resilience-tail-trace 1.8s linear infinite;
}

.resilience-companion[data-motion="idle"] .resilience-companion__body {
  animation: resilience-body-idle 3.2s ease-in-out infinite;
}

.resilience-companion[data-motion="walk"] .resilience-companion__body {
  animation: resilience-body-walk 820ms ease-in-out infinite;
}

.resilience-companion[data-motion="run"] .resilience-companion__body {
  animation: resilience-body-run 420ms ease-in-out infinite;
}

.resilience-companion[data-motion="walk"] .resilience-companion__arm--back {
  animation: resilience-limb-walk 820ms ease-in-out infinite alternate;
}

.resilience-companion[data-motion="walk"] .resilience-companion__arm--front {
  animation: resilience-limb-walk 820ms ease-in-out infinite alternate-reverse;
}

.resilience-companion[data-motion="run"] .resilience-companion__arm--back {
  animation: resilience-limb-run 420ms ease-in-out infinite alternate;
}

.resilience-companion[data-motion="run"] .resilience-companion__arm--front {
  animation: resilience-limb-run 420ms ease-in-out infinite alternate-reverse;
}

.resilience-companion[data-motion="walk"] .resilience-companion__tread-line {
  animation: resilience-track-roll 740ms linear infinite;
}

.resilience-companion[data-motion="run"] .resilience-companion__tread-line {
  animation: resilience-track-roll 360ms linear infinite;
}

.resilience-companion[data-travel-direction="reverse"] .resilience-companion__tread-line {
  animation-direction: reverse;
}

.resilience-companion[data-motion="walk"] .resilience-companion__tread--front {
  animation: resilience-tread-step 820ms ease-in-out infinite alternate;
}

.resilience-companion[data-motion="walk"] .resilience-companion__tread--back {
  animation: resilience-tread-step 820ms ease-in-out infinite alternate-reverse;
}

.resilience-companion[data-motion="run"] .resilience-companion__tread--front {
  animation: resilience-tread-run 420ms ease-in-out infinite alternate;
}

.resilience-companion[data-motion="run"] .resilience-companion__tread--back {
  animation: resilience-tread-run 420ms ease-in-out infinite alternate-reverse;
}

.resilience-companion[data-motion="walk"] .resilience-companion__tail {
  animation: resilience-tail-walk 820ms ease-in-out infinite alternate;
}

.resilience-companion[data-motion="run"] .resilience-companion__tail {
  animation: resilience-tail-run 420ms ease-in-out infinite alternate;
}

.resilience-companion[data-motion="run"] .resilience-companion__core,
.resilience-companion[data-charged="true"] .resilience-companion__core {
  filter: drop-shadow(0 0 6px rgba(85, 243, 229, 0.95)) drop-shadow(0 0 11px rgba(242, 207, 69, 0.65));
}

.resilience-companion[data-charged="true"] .resilience-companion__machine {
  animation: resilience-charge 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.resilience-companion[data-energy="1"] .resilience-companion__core,
.resilience-companion[data-energy="2"] .resilience-companion__core,
.resilience-companion[data-energy="3"] .resilience-companion__core {
  filter: drop-shadow(0 0 4px rgba(85, 243, 229, 0.72));
}

.resilience-companion[data-energy="2"] .resilience-companion__eye-lens,
.resilience-companion[data-energy="3"] .resilience-companion__eye-lens {
  filter: drop-shadow(0 0 4px rgba(85, 243, 229, 0.9));
}

.resilience-companion[data-energy="3"] .resilience-companion__antenna {
  filter: drop-shadow(0 0 5px rgba(242, 207, 69, 0.95));
}

.resilience-companion[data-action] {
  pointer-events: none !important;
}

.resilience-companion[data-action="install"] .resilience-companion__head {
  animation: resilience-head-install 950ms ease-in-out infinite alternate;
}

.resilience-companion[data-action="install"] .resilience-companion__arm--back {
  animation: resilience-arm-install 700ms ease-in-out infinite alternate;
}

.resilience-companion[data-action="play"] .resilience-companion__head {
  animation: resilience-head-happy 620ms ease-in-out infinite alternate;
}

.resilience-companion[data-action="play"] .resilience-companion__arm--front {
  animation: resilience-arm-toss 680ms ease-in-out infinite alternate;
}

.resilience-companion[data-action="play"] .resilience-companion__eye-lens {
  opacity: 0.12;
  animation: none;
}

.resilience-companion[data-action="play"] .resilience-companion__eye-highlight {
  opacity: 0;
}

.resilience-companion[data-action="play"] .resilience-companion__happy-eye {
  opacity: 1;
  animation: resilience-happy-eye 620ms ease-in-out infinite alternate;
  filter: drop-shadow(0 0 3px rgba(85, 243, 229, 0.9));
}

.resilience-companion__topology-grid .topology-cell {
  fill: #173338;
  stroke: #2d5e61;
  stroke-width: 0.35;
  transition: fill 280ms ease, filter 280ms ease;
}

.resilience-companion[data-module="1"] .topology-cell--1,
.resilience-companion[data-module="1"] .topology-cell--3,
.resilience-companion[data-module="1"] .topology-cell--5,
.resilience-companion[data-module="1"] .topology-cell--7,
.resilience-companion[data-module="1"] .topology-cell--9,
.resilience-companion[data-module="2"] .topology-cell--1,
.resilience-companion[data-module="2"] .topology-cell--2,
.resilience-companion[data-module="2"] .topology-cell--4,
.resilience-companion[data-module="2"] .topology-cell--6,
.resilience-companion[data-module="2"] .topology-cell--8,
.resilience-companion[data-module="2"] .topology-cell--9,
.resilience-companion[data-module="3"] .topology-cell--2,
.resilience-companion[data-module="3"] .topology-cell--4,
.resilience-companion[data-module="3"] .topology-cell--5,
.resilience-companion[data-module="3"] .topology-cell--6,
.resilience-companion[data-module="3"] .topology-cell--8,
.resilience-companion[data-module="4"] .topology-cell--1,
.resilience-companion[data-module="4"] .topology-cell--3,
.resilience-companion[data-module="4"] .topology-cell--4,
.resilience-companion[data-module="4"] .topology-cell--5,
.resilience-companion[data-module="4"] .topology-cell--6,
.resilience-companion[data-module="4"] .topology-cell--7,
.resilience-companion[data-module="4"] .topology-cell--9 {
  fill: #5bf0e3;
  filter: drop-shadow(0 0 1.8px rgba(85, 243, 229, 0.92));
}

.resilience-companion[data-module="2"] .topology-cell--2,
.resilience-companion[data-module="2"] .topology-cell--8,
.resilience-companion[data-module="3"] .topology-cell--5,
.resilience-companion[data-module="4"] .topology-cell--5 {
  fill: #f2cf45;
}

.resilience-companion__inventory .inventory-slot {
  fill: #12262b;
  stroke: #36545a;
  stroke-width: 0.35;
  transition: fill 240ms ease, filter 240ms ease;
}

.resilience-companion:is([data-inventory-count="1"], [data-inventory-count="2"], [data-inventory-count="3"], [data-inventory-count="4"]) .inventory-slot--1,
.resilience-companion:is([data-inventory-count="2"], [data-inventory-count="3"], [data-inventory-count="4"]) .inventory-slot--2,
.resilience-companion:is([data-inventory-count="3"], [data-inventory-count="4"]) .inventory-slot--3,
.resilience-companion[data-inventory-count="4"] .inventory-slot--4 {
  fill: #58e9df;
  filter: drop-shadow(0 0 1.4px rgba(85, 243, 229, 0.9));
}

.resilience-companion[data-inventory-count="4"] .inventory-slot--2,
.resilience-companion[data-inventory-count="4"] .inventory-slot--4 {
  fill: #e5bd3d;
}

.resilience-companion[data-module-pulse="true"] .resilience-companion__topology-bay {
  animation: resilience-module-dock 620ms ease-out;
}

.resilience-topology-drop {
  position: absolute;
  z-index: 2;
  display: block;
  width: 36px;
  height: 36px;
  pointer-events: none;
  transform-origin: center;
  animation: resilience-topology-drop 650ms cubic-bezier(0.16, 0.78, 0.26, 1) both;
  filter: drop-shadow(0 0 7px rgba(85, 243, 229, 0.78));
}

.resilience-topology-toss {
  position: absolute;
  z-index: 3;
  top: 56%;
  left: 4%;
  display: block;
  width: 24px;
  height: 24px;
  pointer-events: none;
  transform-origin: center;
  animation: resilience-topology-toss 2700ms cubic-bezier(0.3, 0.72, 0.2, 1) forwards;
  filter: drop-shadow(0 0 6px rgba(85, 243, 229, 0.82));
}

.resilience-topology-drop::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8px;
  border: 1px solid rgba(85, 243, 229, 0.68);
  border-radius: 50%;
  animation: resilience-topology-beacon 1.55s ease-out 650ms infinite;
}

.resilience-topology-drop[data-state="collecting"] {
  animation: resilience-topology-collect 850ms cubic-bezier(0.3, 0.72, 0.18, 1) forwards;
}

.resilience-topology-drop[data-state="collecting"]::before {
  opacity: 0;
  animation: none;
}

:is(.resilience-topology-drop, .resilience-topology-toss) svg {
  display: block;
  width: 100%;
  height: 100%;
}

:is(.resilience-topology-drop, .resilience-topology-toss) .module-shell {
  fill: #071216;
  stroke: #e0b63c;
  stroke-width: 1.4;
}

:is(.resilience-topology-drop, .resilience-topology-toss) .module-cell {
  fill: #173338;
  stroke: #3b7576;
  stroke-width: 0.6;
}

:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="1"] .module-cell--1,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="1"] .module-cell--3,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="1"] .module-cell--5,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="1"] .module-cell--7,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="1"] .module-cell--9,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="2"] .module-cell--1,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="2"] .module-cell--2,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="2"] .module-cell--4,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="2"] .module-cell--6,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="2"] .module-cell--8,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="2"] .module-cell--9,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="3"] .module-cell--2,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="3"] .module-cell--4,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="3"] .module-cell--5,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="3"] .module-cell--6,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="3"] .module-cell--8,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="4"] .module-cell--1,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="4"] .module-cell--3,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="4"] .module-cell--4,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="4"] .module-cell--5,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="4"] .module-cell--6,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="4"] .module-cell--7,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="4"] .module-cell--9 {
  fill: #5bf0e3;
}

:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="2"] .module-cell--2,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="2"] .module-cell--8,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="3"] .module-cell--5,
:is(.resilience-topology-drop, .resilience-topology-toss)[data-pattern="4"] .module-cell--5 {
  fill: #f2cf45;
}

.resilience-seismic-wave {
  position: absolute;
  width: 92px;
  height: 25px;
  color: #3dd9d2;
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0.35) scaleY(0.72);
  transform-origin: center;
  animation: resilience-wave-burst 850ms cubic-bezier(0.12, 0.65, 0.26, 1) forwards;
}

.resilience-seismic-wave svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.resilience-seismic-wave path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.resilience-seismic-wave ellipse {
  fill: none;
  stroke: #d9b73e;
  stroke-width: 1.2;
}

.resilience-seismic-wave--strong {
  width: 126px;
  color: #24bfc5;
  animation-duration: 1050ms;
}

.resilience-seismic-wave--strong path {
  stroke-width: 2;
}

@keyframes resilience-core-rotation {
  to { transform: rotate(360deg); }
}

@keyframes resilience-core-breathe {
  0%, 100% { opacity: 0.84; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes resilience-antenna-scan {
  0%, 100% { opacity: 0.62; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes resilience-head-curiosity {
  0%, 38%, 100% { transform: rotate(0deg) translateY(0); }
  48% { transform: rotate(-3.5deg) translateY(-1px); }
  62% { transform: rotate(2deg) translateY(0); }
  72% { transform: rotate(0deg) translateY(0); }
}

@keyframes resilience-eye-blink {
  0%, 44%, 50%, 100% { transform: scaleY(1); }
  47% { transform: scaleY(0.16); }
}

@keyframes resilience-head-install {
  from { transform: rotate(0deg) translateY(0); }
  to { transform: rotate(7deg) translate(2px, -1px); }
}

@keyframes resilience-head-happy {
  from { transform: rotate(-2deg) translateY(0); }
  to { transform: rotate(3deg) translateY(-2px); }
}

@keyframes resilience-happy-eye {
  from { transform: translateY(0) scaleX(0.94); }
  to { transform: translateY(-0.7px) scaleX(1.06); }
}

@keyframes resilience-tail-trace {
  to { stroke-dashoffset: -28; }
}

@keyframes resilience-body-idle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1.8px) rotate(0.6deg); }
}

@keyframes resilience-body-walk {
  0%, 100% { transform: translateY(0) rotate(-0.8deg); }
  50% { transform: translateY(-1.8px) rotate(0.8deg); }
}

@keyframes resilience-body-run {
  0%, 100% { transform: translateY(0) rotate(-2.4deg); }
  50% { transform: translateY(-3.5px) rotate(2deg); }
}

@keyframes resilience-limb-walk {
  from { transform: rotate(-17deg); }
  to { transform: rotate(18deg); }
}

@keyframes resilience-limb-run {
  from { transform: rotate(-30deg); }
  to { transform: rotate(31deg); }
}

@keyframes resilience-track-roll {
  to { stroke-dashoffset: -28; }
}

@keyframes resilience-tread-step {
  from { transform: translateY(0) rotate(-1deg); }
  to { transform: translateY(-1.4px) rotate(1deg); }
}

@keyframes resilience-tread-run {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-2.4px) rotate(2deg); }
}

@keyframes resilience-arm-install {
  from { transform: rotate(0deg) translate(0, 0); }
  to { transform: rotate(-24deg) translate(2px, -3px); }
}

@keyframes resilience-arm-toss {
  from { transform: rotate(-8deg) translate(0, 0); }
  to { transform: rotate(32deg) translate(3px, -5px); }
}

@keyframes resilience-tail-walk {
  from { transform: rotate(-2deg) translateY(0); }
  to { transform: rotate(4deg) translateY(-2px); }
}

@keyframes resilience-tail-run {
  from { transform: rotate(-5deg) translateY(1px); }
  to { transform: rotate(8deg) translateY(-3px); }
}

@keyframes resilience-charge {
  0% { transform: scaleX(var(--companion-facing)) scale(1); }
  38% { transform: scaleX(var(--companion-facing)) scale(0.9, 1.1); }
  64% { transform: scaleX(var(--companion-facing)) scale(1.12, 0.92); }
  100% { transform: scaleX(var(--companion-facing)) scale(1); }
}

@keyframes resilience-topology-drop {
  0% { opacity: 0; transform: translateY(-58px) scale(0.64) rotate(-11deg); }
  68% { opacity: 1; transform: translateY(5px) scale(1.06) rotate(3deg); }
  84% { transform: translateY(-3px) scale(0.98) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes resilience-topology-toss {
  0% { opacity: 0; transform: translate3d(2px, 5px, 0) scale(0.56) rotate(0deg); }
  10% { opacity: 1; transform: translate3d(7px, -2px, 0) scale(0.82) rotate(22deg); }
  40% { opacity: 1; transform: translate3d(48px, -62px, 0) scale(1.08) rotate(178deg); }
  62% { opacity: 1; transform: translate3d(73px, -28px, 0) scale(0.96) rotate(274deg); }
  88% { opacity: 1; transform: translate3d(18px, -5px, 0) scale(0.76) rotate(348deg); }
  100% { opacity: 0; transform: translate3d(5px, 4px, 0) scale(0.5) rotate(380deg); }
}

@keyframes resilience-topology-beacon {
  0% { opacity: 0.76; transform: scale(0.62); }
  74%, 100% { opacity: 0; transform: scale(1.65); }
}

@keyframes resilience-topology-collect {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  38% { opacity: 1; transform: translate3d(0, -12px, 0) scale(0.84) rotate(-7deg); }
  100% { opacity: 0; transform: translate3d(var(--collect-x), var(--collect-y), 0) scale(0.18) rotate(8deg); }
}

@keyframes resilience-module-dock {
  0% { opacity: 0.4; transform: scale(0.7); }
  45% { opacity: 1; transform: scale(1.18); filter: drop-shadow(0 0 5px rgba(85, 243, 229, 0.95)); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes resilience-wave-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.24) scaleY(0.66); }
  18% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.24) scaleY(1); }
}

@media (max-width: 720px) {
  .resilience-companion {
    width: 62px;
    height: 54px;
  }

  .resilience-companion[data-visible="true"] {
    opacity: 0.84;
  }

  .resilience-companion[data-visible="true"][data-obstructed="true"] {
    opacity: 0.36;
  }

  .resilience-companion[data-visible="true"][data-motion="idle"] {
    pointer-events: none;
  }

  .resilience-seismic-wave {
    width: 54px;
  }

  .resilience-seismic-wave--strong {
    width: 74px;
  }

  .resilience-topology-toss {
    width: 17px;
    height: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resilience-companion,
  .resilience-companion__machine,
  .resilience-companion__body,
  .resilience-companion__head,
  .resilience-companion__tread,
  .resilience-companion__tread-line,
  .resilience-companion__arm,
  .resilience-companion__tail,
  .resilience-companion__core,
  .resilience-companion__core-ring,
  .resilience-companion__antenna,
  .resilience-companion__eye,
  .resilience-companion__eye-lens,
  .resilience-companion__happy-eye,
  .resilience-companion__topology-bay,
  .resilience-topology-drop,
  .resilience-topology-toss {
    animation: none !important;
    transition-duration: 0ms !important;
  }

  .resilience-routefield,
  .resilience-wavefield {
    display: none;
  }
}

@media print {
  .resilience-routefield,
  .resilience-companion,
  .resilience-wavefield {
    display: none !important;
  }
}
