/* ====================================================================
   DROP-IN ILLUSTRATION CSS — Evidence laboratory + x402 protocol tower
   Designed for a white editorial page. No controls are required.
   ==================================================================== */

.evidence-lab-visual,
.protocol-tower-visual {
  --ev-ink: var(--ink, #0d1117);
  --ev-muted: var(--muted, #657083);
  --ev-muted-2: var(--muted-2, #6e7785);
  --ev-blue: var(--blue, #175cff);
  --ev-cyan: var(--cyan, #10a8cf);
  --ev-green: var(--green, #15956f);
  --ev-red: #c74c55;
  --ev-violet: #6d5be7;
  --ev-amber: #9a6509;
  --ev-line: var(--line, #e5e9f0);
  --ev-line-strong: var(--line-strong, #d7deea);
  --ev-soft: var(--soft, #f5f7fa);
  --ev-soft-blue: var(--soft-blue, #f1f5ff);
  color: var(--ev-ink);
  font-family: inherit;
}

.evidence-lab-visual *,
.protocol-tower-visual * {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------
   EVIDENCE LAB
   -------------------------------------------------------------------- */

.evidence-lab-visual {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ev-line-strong);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(23, 40, 72, 0.1);
}

.lab-scene-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 76px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--ev-line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
}

.lab-scene-head > div {
  display: grid;
  gap: 5px;
}
.lab-scene-head > div span {
  color: var(--ev-blue);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.14em;
}
.lab-scene-head > div strong {
  font-size: 17px;
}
.lab-scene-head p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--ev-muted);
  font-size: 9px;
}
.lab-scene-head p i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ev-amber);
  box-shadow: 0 0 0 5px rgba(154, 101, 9, 0.09);
}
.lab-scene-head p b {
  color: var(--ev-ink);
}

.lab-console {
  position: relative;
  min-height: 790px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(23, 92, 255, 0.055),
      transparent 31%
    ),
    linear-gradient(rgba(23, 92, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 92, 255, 0.028) 1px, transparent 1px),
    linear-gradient(150deg, #fbfcff, #f6f9fd 62%, #fbfcff);
  background-size:
    auto,
    28px 28px,
    28px 28px,
    auto;
}

.lab-console::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: 1px;
  background: linear-gradient(
    transparent,
    rgba(23, 92, 255, 0.12) 22%,
    rgba(23, 92, 255, 0.12) 78%,
    transparent
  );
}

.lab-circuit {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.lab-wire-base path,
.lab-wire-live path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lab-wire-base path {
  stroke: rgba(23, 92, 255, 0.11);
  stroke-width: 8;
}
.lab-wire-live path {
  stroke: url(#lab-wire-blue);
  stroke-width: 2;
  stroke-dasharray: 5 12;
  animation: labCircuitFlow 2.8s linear infinite;
}
.lab-junctions circle {
  fill: var(--ev-blue);
  stroke: #fff;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.lab-reactor {
  position: absolute;
  top: 190px;
  left: 50%;
  z-index: 3;
  width: 350px;
  height: 410px;
  transform: translateX(-50%);
}
.lab-reactor-rings,
.lab-reactor-rings i {
  position: absolute;
  top: 44%;
  left: 50%;
  border: 1px solid rgba(23, 92, 255, 0.13);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.lab-reactor-rings {
  width: 330px;
  height: 330px;
}
.lab-reactor-rings::before,
.lab-reactor-rings::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--ev-blue);
  box-shadow:
    0 0 0 6px rgba(23, 92, 255, 0.08),
    0 0 22px rgba(23, 92, 255, 0.22);
}
.lab-reactor-rings::before {
  top: 38px;
  left: 36px;
  width: 7px;
  height: 7px;
}
.lab-reactor-rings::after {
  right: 25px;
  bottom: 82px;
  width: 6px;
  height: 6px;
  background: var(--ev-cyan);
}
.lab-reactor-rings i:nth-child(1) {
  width: 260px;
  height: 260px;
}
.lab-reactor-rings i:nth-child(2) {
  width: 190px;
  height: 190px;
  border-style: dashed;
  animation: labOrbit 18s linear infinite;
}
.lab-reactor-rings i:nth-child(3) {
  width: 122px;
  height: 122px;
}
.lab-reactor-vessel {
  position: absolute;
  top: 44%;
  left: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  width: 188px;
  height: 188px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(23, 92, 255, 0.26);
  border-radius: 50%;
  background:
    linear-gradient(0deg, rgba(23, 92, 255, 0.1) 0 31%, transparent 31%),
    radial-gradient(circle at 35% 28%, #fff, #edf3ff 68%);
  box-shadow:
    inset 0 -24px 45px rgba(23, 92, 255, 0.08),
    0 28px 70px rgba(23, 92, 255, 0.13);
}
.lab-reactor-vessel::after {
  content: "";
  position: absolute;
  left: -20%;
  bottom: 29%;
  width: 140%;
  height: 18px;
  border-radius: 50%;
  background: rgba(23, 92, 255, 0.09);
  animation: labLiquid 4.8s ease-in-out infinite;
}
.lab-reactor-vessel span {
  color: var(--ev-blue);
  font-size: 44px;
  font-weight: 880;
  line-height: 1;
}
.lab-reactor-vessel strong {
  margin-top: 8px;
  font-size: 17px;
}
.lab-reactor-vessel small {
  margin-top: 7px;
  color: var(--ev-muted-2);
  font-size: 6px;
  font-weight: 850;
  letter-spacing: 0.13em;
}
.lab-reactor-readout {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  align-items: center;
  width: 250px;
  min-height: 52px;
  padding: 10px 13px;
  transform: translateX(-50%);
  border: 1px solid rgba(154, 101, 9, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 30px rgba(33, 46, 70, 0.08);
}
.lab-reactor-readout span {
  color: var(--ev-muted-2);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.12em;
}
.lab-reactor-readout strong {
  color: var(--ev-amber);
  font-size: 12px;
}
.lab-reactor-readout i {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--ev-green),
    var(--ev-amber) 50%,
    var(--ev-red)
  );
}

.lab-instrument {
  position: absolute;
  z-index: 3;
  width: 330px;
  min-height: 214px;
  padding: 14px 0 12px;
  border-top: 1px solid rgba(23, 92, 255, 0.13);
  border-bottom: 1px solid rgba(23, 92, 255, 0.08);
}
.lab-i01 {
  top: 26px;
  left: 24px;
}
.lab-i02 {
  top: 287px;
  left: 24px;
}
.lab-i03 {
  top: 548px;
  left: 24px;
}
.lab-i04 {
  top: 26px;
  right: 24px;
}
.lab-i05 {
  top: 287px;
  right: 24px;
}
.lab-i06 {
  top: 548px;
  right: 24px;
}

.lab-axis-head {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 68px;
}
.lab-axis-head > div:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.lab-axis-head > div:last-child span {
  color: var(--ev-blue);
  font-size: 6.5px;
  font-weight: 850;
  letter-spacing: 0.1em;
}
.lab-axis-head > div:last-child strong {
  font-size: 14px;
}
.lab-axis-head > div:last-child small {
  color: var(--ev-muted);
  font-size: 8px;
  line-height: 1.45;
}

.lab-dial {
  position: relative;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(23, 92, 255, 0.14);
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 52%, transparent 53%),
    conic-gradient(
      from 220deg,
      var(--ev-green) 0 18%,
      #dce2ec 18% 42%,
      var(--ev-red) 42% 60%,
      transparent 60% 100%
    );
  box-shadow: 0 8px 22px rgba(33, 46, 70, 0.07);
}
.lab-dial::before,
.lab-dial::after {
  position: absolute;
  bottom: 7px;
  font-size: 5px;
  font-weight: 850;
}
.lab-dial::before {
  content: "PASS";
  left: 4px;
  color: var(--ev-green);
}
.lab-dial::after {
  content: "FAIL";
  right: 4px;
  color: var(--ev-red);
}
.lab-dial i {
  position: absolute;
  top: 13px;
  left: 50%;
  width: 2px;
  height: 20px;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(0deg);
  border-radius: 999px;
  background: var(--ev-amber);
  box-shadow: 0 0 7px rgba(154, 101, 9, 0.28);
}
.lab-dial b {
  position: absolute;
  top: 31px;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ev-ink);
}

.lab-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid rgba(23, 92, 255, 0.07);
}
.lab-outcomes > div {
  position: relative;
  min-width: 0;
  padding-left: 9px;
}
.lab-outcomes > div::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 2px;
  border-radius: 999px;
}
.lab-positive::before {
  background: var(--ev-green);
}
.lab-negative::before {
  background: var(--ev-red);
}
.lab-outcomes span {
  display: block;
  font-size: 5.5px;
  font-weight: 850;
  letter-spacing: 0.03em;
}
.lab-positive span {
  color: var(--ev-green);
}
.lab-negative span {
  color: var(--ev-red);
}
.lab-outcomes b {
  display: block;
  margin: 5px 0 4px;
  font-size: 9px;
  line-height: 1.35;
}
.lab-outcomes small {
  display: block;
  color: var(--ev-muted);
  font-size: 7px;
  line-height: 1.48;
}

.lab-verdict {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  min-height: 74px;
  padding: 16px 22px;
  color: #fff;
  background: linear-gradient(135deg, #111927, #1a2535);
}
.lab-verdict > span {
  color: #8db0ff;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.11em;
}
.lab-verdict p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  line-height: 1.62;
}
.lab-verdict strong {
  color: #fff;
}

/* --------------------------------------------------------------------
   x402 PROTOCOL TOWER
   -------------------------------------------------------------------- */

.protocol-tower-visual {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ev-line-strong);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(23, 40, 72, 0.1);
}
.tower-scene-head {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 76px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--ev-line);
  background: rgba(255, 255, 255, 0.95);
}
.tower-scene-head > div {
  display: grid;
  gap: 5px;
}
.tower-scene-head span {
  color: var(--ev-blue);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.13em;
}
.tower-scene-head strong {
  font-size: 17px;
}
.tower-scene-head small {
  color: var(--ev-muted-2);
  font-size: 8px;
}

.tower-cutaway {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      transparent 0 7%,
      rgba(23, 92, 255, 0.023) 7% 7.15%,
      transparent 7.15% 92.85%,
      rgba(23, 92, 255, 0.023) 92.85% 93%,
      transparent 93%
    ),
    linear-gradient(rgba(23, 92, 255, 0.023) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 92, 255, 0.023) 1px, transparent 1px),
    #fbfcff;
  background-size:
    auto,
    28px 28px,
    28px 28px,
    auto;
}
.tower-spine {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tower-spine path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.tower-spine-base {
  stroke: rgba(23, 92, 255, 0.09);
  stroke-width: 12;
}
.tower-spine-live {
  stroke: url(#tower-spine-gradient);
  stroke-width: 3;
  stroke-dasharray: 7 13;
  animation: towerSpineFlow 2.4s linear infinite;
}
.tower-spine circle {
  fill: var(--ev-blue);
  stroke: #fff;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.tower-level {
  position: relative;
  z-index: 2;
}
.tower-level-label {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  min-height: 56px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(23, 92, 255, 0.08);
  background: rgba(255, 255, 255, 0.76);
}
.tower-level-label span {
  color: var(--ev-blue);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.11em;
}
.tower-level-label strong {
  font-size: 13px;
}
.tower-level-label small {
  color: var(--ev-muted-2);
  font-size: 7px;
}

.tower-level-core {
  min-height: 375px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.84),
    rgba(239, 245, 255, 0.68)
  );
}
.protocol-rooftop {
  display: grid;
  grid-template-columns: 230px minmax(350px, 1fr) 230px;
  gap: 25px;
  align-items: center;
  min-height: 230px;
  padding: 18px 38px 12px;
}
.tower-terminal {
  display: grid;
  justify-items: center;
  min-width: 0;
  text-align: center;
}
.terminal-figure {
  display: grid;
  place-items: center;
  width: 90px;
  height: 90px;
  color: var(--ev-blue);
}
.terminal-server .terminal-figure {
  color: var(--ev-cyan);
}
.terminal-figure svg {
  width: 88px;
  height: 88px;
  overflow: visible;
  fill: rgba(255, 255, 255, 0.82);
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 12px 18px rgba(23, 40, 72, 0.09));
}
.tower-terminal > span {
  margin-top: 4px;
  color: var(--ev-blue);
  font-size: 6px;
  font-weight: 850;
  letter-spacing: 0.11em;
}
.terminal-server > span {
  color: var(--ev-cyan);
}
.tower-terminal > strong {
  margin-top: 6px;
  font-size: 12px;
}
.tower-terminal > small {
  margin-top: 4px;
  color: var(--ev-muted);
  font-size: 7.5px;
}

.http-packet-bridge {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.http-packet {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 31px;
  overflow: hidden;
  padding: 6px 12px;
  border: 1px solid rgba(23, 92, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}
.http-packet i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  background: var(--ev-blue);
  font-size: 7px;
  font-style: normal;
  font-weight: 850;
}
.http-packet span {
  color: var(--ev-muted-2);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.http-packet b {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translateY(-50%);
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ev-blue);
  box-shadow: 0 0 0 5px rgba(23, 92, 255, 0.08);
}
.packet-right b {
  left: 8px;
  animation: towerPacketRight 3.9s ease-in-out infinite;
}
.packet-left b {
  right: 8px;
  background: var(--ev-cyan);
  animation: towerPacketLeft 3.9s ease-in-out infinite;
}
.http-packet.p2 b {
  animation-delay: -0.95s;
}
.http-packet.p3 b {
  animation-delay: -1.9s;
}
.http-packet.p4 b {
  animation-delay: -2.85s;
}

.verification-deck {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  width: min(880px, calc(100% - 76px));
  min-height: 64px;
  margin: 0 auto 18px;
  padding: 12px 16px;
  border: 1px solid rgba(23, 92, 255, 0.15);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 30px rgba(23, 40, 72, 0.05);
}
.verification-deck span {
  color: var(--ev-blue);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.11em;
}
.verification-deck p {
  margin: 0;
  color: var(--ev-muted);
  font-size: 9px;
  line-height: 1.58;
}
.verification-deck strong {
  color: var(--ev-ink);
}

.tower-spec-boundary {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 72px;
  padding: 12px 24px;
  color: #fff;
  background: linear-gradient(105deg, #111927, #1b293c);
  box-shadow: 0 12px 30px rgba(13, 17, 23, 0.14);
}
.tower-spec-boundary > i {
  position: relative;
  display: block;
  height: 2px;
  border-radius: 999px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.22) 0 7px,
    transparent 7px 13px
  );
}
.tower-spec-boundary > i b {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #e9bd67;
  box-shadow: 0 0 0 5px rgba(233, 189, 103, 0.09);
  animation: boundaryScan 3.8s linear infinite;
}
.tower-spec-boundary > div {
  display: grid;
  gap: 5px;
}
.tower-spec-boundary span {
  color: #e9bd67;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.1em;
}
.tower-spec-boundary strong {
  font-size: 12px;
}

.tower-level-routing {
  min-height: 350px;
  background: linear-gradient(
    180deg,
    rgba(242, 248, 255, 0.72),
    rgba(237, 249, 251, 0.7)
  );
}
.routing-machine-floor {
  display: grid;
  grid-template-columns:
    minmax(190px, 0.8fr) 50px minmax(260px, 1.05fr)
    50px minmax(220px, 0.9fr);
  gap: 14px;
  align-items: center;
  min-height: 284px;
  padding: 22px 38px 28px;
}
.payment-intent-port,
.connector-switchyard {
  display: grid;
  align-content: center;
  min-height: 190px;
}
.payment-intent-port > span,
.connector-switchyard > span,
.route-engine-machine > span {
  color: var(--ev-blue);
  font-size: 6.5px;
  font-weight: 850;
  letter-spacing: 0.11em;
}
.payment-intent-port > strong,
.connector-switchyard > strong {
  margin-top: 10px;
  font-size: 13px;
}
.payment-intent-port > small,
.connector-switchyard > small {
  margin-top: 7px;
  color: var(--ev-muted);
  font-size: 8px;
  line-height: 1.5;
}
.intent-figure {
  position: relative;
  width: 116px;
  height: 76px;
  margin-bottom: 12px;
}
.intent-figure::before {
  content: "";
  position: absolute;
  inset: 8px 13px;
  border: 1px solid rgba(23, 92, 255, 0.2);
  transform: skewY(-8deg);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 10px 12px 28px rgba(23, 40, 72, 0.07);
}
.intent-figure i {
  position: absolute;
  z-index: 2;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ev-blue);
  box-shadow: 0 0 0 5px rgba(23, 92, 255, 0.08);
}
.intent-figure i:nth-child(1) {
  top: 20px;
  left: 29px;
}
.intent-figure i:nth-child(2) {
  top: 38px;
  left: 57px;
  background: var(--ev-cyan);
}
.intent-figure i:nth-child(3) {
  top: 18px;
  left: 83px;
  background: var(--ev-green);
}

.machine-pipe {
  position: relative;
  display: block;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(23, 92, 255, 0.1),
    var(--ev-blue),
    rgba(23, 92, 255, 0.1)
  );
}
.machine-pipe::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: -2px;
  transform: translateY(-54%);
  color: var(--ev-blue);
  font-size: 16px;
  font-style: normal;
}
.machine-pipe b {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ev-blue);
  animation: machineFlow 3s linear infinite;
}
.pipe-out b {
  animation-delay: -1.5s;
  background: var(--ev-cyan);
}

.route-engine-machine {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  width: 236px;
  height: 236px;
  margin: 0 auto;
  text-align: center;
}
.engine-rings,
.engine-rings i {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(23, 92, 255, 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.engine-rings {
  width: 230px;
  height: 230px;
  background: radial-gradient(circle, #fff, rgba(235, 243, 255, 0.78));
  box-shadow: 0 24px 60px rgba(23, 92, 255, 0.1);
}
.engine-rings::before,
.engine-rings::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--ev-blue);
  box-shadow: 0 0 0 5px rgba(23, 92, 255, 0.08);
}
.engine-rings::before {
  top: 28px;
  left: 38px;
  width: 7px;
  height: 7px;
}
.engine-rings::after {
  right: 26px;
  bottom: 58px;
  width: 6px;
  height: 6px;
  background: var(--ev-cyan);
}
.engine-rings i:nth-child(1) {
  width: 174px;
  height: 174px;
}
.engine-rings i:nth-child(2) {
  width: 124px;
  height: 124px;
  border-style: dashed;
  animation: engineOrbit 14s linear infinite;
}
.engine-rings i:nth-child(3) {
  width: 72px;
  height: 72px;
}
.route-engine-machine > span,
.route-engine-machine > strong,
.route-engine-machine > small {
  position: relative;
  z-index: 2;
}
.route-engine-machine > strong {
  margin-top: 8px;
  font-size: 20px;
}
.route-engine-machine > small {
  margin-top: 9px;
  color: var(--ev-muted);
  font-size: 8px;
  line-height: 1.55;
}

.switchyard-figure {
  position: relative;
  width: 190px;
  height: 92px;
  margin: 0 auto 14px;
}
.switchyard-figure i {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 32px;
  border: 1px solid rgba(23, 92, 255, 0.2);
  border-radius: 11px;
  color: var(--ev-blue);
  background: rgba(255, 255, 255, 0.92);
  font-size: 6px;
  font-style: normal;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(23, 40, 72, 0.07);
}
.switchyard-figure i:nth-child(1) {
  top: 0;
  left: 68px;
}
.switchyard-figure i:nth-child(2) {
  bottom: 0;
  left: 5px;
}
.switchyard-figure i:nth-child(3) {
  right: 5px;
  bottom: 0;
}
.switchyard-figure b {
  position: absolute;
  z-index: 1;
  height: 1px;
  transform-origin: left center;
  background: rgba(23, 92, 255, 0.26);
}
.switchyard-figure b:nth-of-type(1) {
  top: 37px;
  left: 95px;
  width: 68px;
  transform: rotate(33deg);
}
.switchyard-figure b:nth-of-type(2) {
  top: 37px;
  left: 95px;
  width: 68px;
  transform: rotate(147deg);
}
.switchyard-figure b:nth-of-type(3) {
  bottom: 16px;
  left: 60px;
  width: 70px;
  background: linear-gradient(90deg, var(--ev-blue), var(--ev-cyan));
  animation: meshPulse 2.8s ease-in-out infinite;
}

.tower-level-settlement {
  min-height: 480px;
  background: linear-gradient(
    180deg,
    rgba(245, 249, 255, 0.86),
    rgba(244, 249, 247, 0.86)
  );
}
.settlement-yard {
  position: relative;
  min-height: 348px;
  overflow: hidden;
}
.settlement-track-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.settlement-track path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    opacity 0.5s ease,
    stroke 0.5s ease;
}
.settlement-track .track-bed {
  stroke: rgba(23, 40, 72, 0.08);
  stroke-width: 13;
}
.settlement-track .track-live {
  opacity: 0;
  stroke: var(--ev-blue);
  stroke-width: 4;
  stroke-dasharray: 9 15;
  animation: settlementRouteFlow 1.8s linear infinite;
}
.settlement-track[data-agent-settlement="bank"] .track-live {
  stroke: var(--ev-cyan);
}
.settlement-track[data-agent-settlement="xrp"] .track-live {
  stroke: var(--ev-violet);
}
.settlement-track.is-active .track-live,
.protocol-tower-visual[data-active-agent-route="stable"]
  .settlement-track[data-agent-settlement="stable"]
  .track-live,
.protocol-tower-visual[data-active-agent-route="bank"]
  .settlement-track[data-agent-settlement="bank"]
  .track-live,
.protocol-tower-visual[data-active-agent-route="xrp"]
  .settlement-track[data-agent-settlement="xrp"]
  .track-live {
  opacity: 1;
}
.track-terminal circle {
  fill: #fff;
  stroke: rgba(23, 92, 255, 0.22);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.track-terminal circle:last-child {
  fill: var(--ev-green);
  stroke: #fff;
  stroke-width: 4;
}

.tower-rail {
  position: absolute;
  left: 30px;
  z-index: 3;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  width: 390px;
  min-height: 92px;
  padding: 7px 0;
  opacity: 0.38;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.tower-rail.rail-stable {
  top: 22px;
}
.tower-rail.rail-bank {
  top: 127px;
}
.tower-rail.rail-xrp {
  top: 232px;
}
.tower-rail.is-active,
.protocol-tower-visual[data-active-agent-route="stable"]
  .tower-rail[data-agent-settlement="stable"],
.protocol-tower-visual[data-active-agent-route="bank"]
  .tower-rail[data-agent-settlement="bank"],
.protocol-tower-visual[data-active-agent-route="xrp"]
  .tower-rail[data-agent-settlement="xrp"] {
  opacity: 1;
  transform: translateX(4px);
}
.rail-emblem {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(23, 92, 255, 0.2);
  border-radius: 17px;
  color: var(--ev-blue);
  background: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  font-weight: 880;
  box-shadow: 0 12px 30px rgba(23, 40, 72, 0.08);
}
.rail-bank .rail-emblem {
  color: var(--ev-cyan);
  border-color: rgba(16, 168, 207, 0.23);
}
.rail-xrp .rail-emblem {
  color: var(--ev-violet);
  border-color: rgba(109, 91, 231, 0.23);
}
.tower-rail > div:last-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.tower-rail span {
  color: var(--ev-blue);
  font-size: 6px;
  font-weight: 850;
  letter-spacing: 0.11em;
}
.rail-bank span {
  color: var(--ev-cyan);
}
.rail-xrp span {
  color: var(--ev-violet);
}
.tower-rail strong {
  font-size: 12px;
}
.tower-rail small {
  color: var(--ev-muted);
  font-size: 7px;
  line-height: 1.45;
}
.tower-rail em {
  justify-self: start;
  margin-top: 2px;
  color: var(--ev-muted-2);
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
}

.receiver-terminal {
  position: absolute;
  top: 98px;
  right: 38px;
  z-index: 3;
  display: grid;
  justify-items: center;
  width: 170px;
  text-align: center;
}
.receiver-terminal > div {
  position: relative;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(21, 149, 111, 0.22);
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #eaf7f2);
  box-shadow: 0 22px 55px rgba(21, 149, 111, 0.1);
}
.receiver-terminal > div::before {
  content: "";
  position: absolute;
  inset: 25px;
  border: 1px dashed rgba(21, 149, 111, 0.3);
  border-radius: 50%;
  animation: engineOrbit 13s linear infinite reverse;
}
.receiver-terminal i {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ev-green);
  box-shadow: 0 0 0 5px rgba(21, 149, 111, 0.08);
}
.receiver-terminal i:nth-child(1) {
  top: 26px;
  left: 50px;
}
.receiver-terminal i:nth-child(2) {
  top: 58px;
  left: 29px;
}
.receiver-terminal i:nth-child(3) {
  top: 65px;
  right: 25px;
}
.receiver-terminal span {
  margin-top: 10px;
  color: var(--ev-green);
  font-size: 6px;
  font-weight: 850;
  letter-spacing: 0.11em;
}
.receiver-terminal strong {
  margin-top: 5px;
  font-size: 14px;
}
.receiver-terminal small {
  margin-top: 4px;
  color: var(--ev-muted);
  font-size: 7px;
}

.tower-route-status {
  display: grid;
  grid-template-columns: 120px 210px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 74px;
  padding: 13px 20px;
  border-top: 1px solid rgba(23, 92, 255, 0.1);
  background: rgba(255, 255, 255, 0.88);
}
.tower-route-status > span {
  color: var(--ev-blue);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.08em;
}
.tower-route-status > strong {
  font-size: 12px;
}
.tower-route-status p {
  margin: 0;
  color: var(--ev-muted);
  font-size: 8px;
  line-height: 1.55;
}

/* --------------------------------------------------------------------
   TABLET
   -------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .lab-instrument {
    width: 290px;
  }
  .lab-axis-head {
    grid-template-columns: 54px 1fr;
    gap: 9px;
  }
  .lab-dial {
    width: 52px;
    height: 52px;
  }
  .lab-dial i {
    top: 11px;
    height: 19px;
  }
  .lab-dial b {
    top: 28px;
  }
  .lab-outcomes {
    gap: 10px;
  }
  .lab-outcomes b {
    font-size: 8.5px;
  }
  .lab-outcomes small {
    font-size: 6.5px;
  }
  .lab-reactor {
    width: 300px;
  }
  .lab-reactor-rings {
    width: 290px;
    height: 290px;
  }

  .protocol-rooftop {
    grid-template-columns: 190px minmax(300px, 1fr) 190px;
    gap: 15px;
    padding-inline: 24px;
  }
  .routing-machine-floor {
    grid-template-columns:
      minmax(170px, 0.8fr) 32px minmax(230px, 1fr)
      32px minmax(190px, 0.9fr);
    gap: 10px;
    padding-inline: 24px;
  }
  .tower-rail {
    width: 350px;
  }
}

/* --------------------------------------------------------------------
   MOBILE — true vertical cutaways, not desktop canvases scaled down
   -------------------------------------------------------------------- */

@media (max-width: 900px) {
  .evidence-lab-visual,
  .protocol-tower-visual {
    border-radius: 23px;
  }

  .lab-scene-head,
  .tower-scene-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 17px 16px;
  }
  .lab-scene-head > div strong,
  .tower-scene-head strong {
    font-size: 15px;
    line-height: 1.45;
  }
  .lab-scene-head p {
    font-size: 8px;
  }

  .lab-console {
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: 0 15px;
    background:
      linear-gradient(
        90deg,
        transparent 27px,
        rgba(23, 92, 255, 0.1) 27px 29px,
        transparent 29px
      ),
      linear-gradient(rgba(23, 92, 255, 0.025) 1px, transparent 1px), #f8faff;
    background-size:
      auto,
      24px 24px,
      auto;
  }
  .lab-console::after,
  .lab-circuit {
    display: none;
  }
  .lab-reactor {
    position: relative;
    top: auto;
    left: auto;
    order: -1;
    width: 100%;
    height: 285px;
    transform: none;
    border-bottom: 1px solid rgba(23, 92, 255, 0.1);
  }
  .lab-reactor-rings {
    width: 246px;
    height: 246px;
  }
  .lab-reactor-rings i:nth-child(1) {
    width: 198px;
    height: 198px;
  }
  .lab-reactor-rings i:nth-child(2) {
    width: 150px;
    height: 150px;
  }
  .lab-reactor-rings i:nth-child(3) {
    width: 102px;
    height: 102px;
  }
  .lab-reactor-vessel {
    width: 154px;
    height: 154px;
  }
  .lab-reactor-vessel span {
    font-size: 36px;
  }
  .lab-reactor-vessel strong {
    font-size: 15px;
  }
  .lab-reactor-readout {
    bottom: 9px;
    width: 220px;
  }

  .lab-instrument,
  .lab-i01,
  .lab-i02,
  .lab-i03,
  .lab-i04,
  .lab-i05,
  .lab-i06 {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    padding: 19px 0 18px 15px;
    border-top: 0;
    border-bottom: 1px solid rgba(23, 92, 255, 0.11);
  }
  .lab-instrument::before {
    content: "";
    position: absolute;
    top: 27px;
    left: -7px;
    width: 12px;
    height: 12px;
    border: 3px solid #f8faff;
    border-radius: 50%;
    background: var(--ev-blue);
    box-shadow: 0 0 0 3px rgba(23, 92, 255, 0.1);
  }
  .lab-axis-head {
    grid-template-columns: 58px 1fr;
    gap: 11px;
  }
  .lab-axis-head > div:last-child strong {
    font-size: 13px;
  }
  .lab-axis-head > div:last-child small {
    font-size: 8.5px;
  }
  .lab-dial {
    width: 56px;
    height: 56px;
  }
  .lab-dial i {
    top: 12px;
    height: 20px;
  }
  .lab-dial b {
    top: 30px;
  }
  .lab-outcomes {
    gap: 11px;
    margin-top: 12px;
    padding-top: 12px;
  }
  .lab-outcomes > div {
    padding-left: 9px;
  }
  .lab-outcomes span {
    font-size: 6px;
  }
  .lab-outcomes b {
    font-size: 9.5px;
  }
  .lab-outcomes small {
    font-size: 8.2px;
    line-height: 1.55;
  }
  .lab-verdict {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 16px;
  }
  .lab-verdict p {
    font-size: 9px;
  }

  .tower-scene-head small {
    font-size: 8px;
  }
  .tower-spine {
    display: none;
  }
  .tower-level-label {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 14px 15px;
  }
  .tower-level-label span {
    font-size: 7px;
  }
  .tower-level-label strong {
    font-size: 12px;
    line-height: 1.45;
  }
  .tower-level-label small {
    font-size: 7.5px;
  }

  .tower-level-core {
    min-height: 0;
  }
  .protocol-rooftop {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 15px;
    min-height: 0;
    padding: 17px 15px 12px;
  }
  .tower-terminal {
    align-content: start;
    min-height: 153px;
  }
  .terminal-figure {
    width: 72px;
    height: 72px;
  }
  .terminal-figure svg {
    width: 70px;
    height: 70px;
  }
  .tower-terminal > strong {
    font-size: 10px;
  }
  .tower-terminal > small {
    font-size: 7px;
    line-height: 1.45;
  }
  .http-packet-bridge {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 7px;
  }
  .http-packet {
    min-height: 29px;
    padding: 5px 9px;
  }
  .http-packet span {
    overflow: hidden;
    font-size: 6.2px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .verification-deck {
    grid-template-columns: 1fr;
    gap: 5px;
    width: calc(100% - 30px);
    margin: 0 15px 15px;
    padding: 12px;
  }
  .verification-deck p {
    font-size: 8px;
  }

  .tower-spec-boundary {
    grid-template-columns: 46px 1fr;
    gap: 12px;
    min-height: 75px;
    padding: 12px 15px;
  }
  .tower-spec-boundary strong {
    font-size: 10px;
    line-height: 1.45;
  }
  .tower-level-routing {
    min-height: 0;
  }
  .routing-machine-floor {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    padding: 18px 16px 22px;
  }
  .payment-intent-port,
  .connector-switchyard {
    justify-items: center;
    width: 100%;
    min-height: 0;
    padding: 9px 0;
    text-align: center;
  }
  .payment-intent-port > strong,
  .connector-switchyard > strong {
    font-size: 12px;
  }
  .payment-intent-port > small,
  .connector-switchyard > small {
    max-width: 290px;
    font-size: 8px;
  }
  .intent-figure {
    margin-bottom: 8px;
  }
  .machine-pipe {
    width: 3px;
    height: 34px;
    background: linear-gradient(
      rgba(23, 92, 255, 0.1),
      var(--ev-blue),
      rgba(23, 92, 255, 0.1)
    );
  }
  .machine-pipe::after {
    content: "⌄";
    top: auto;
    right: auto;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
  }
  .machine-pipe b {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-name: machineFlowVertical;
  }
  .route-engine-machine {
    width: 210px;
    height: 210px;
  }
  .engine-rings {
    width: 204px;
    height: 204px;
  }
  .engine-rings i:nth-child(1) {
    width: 156px;
    height: 156px;
  }
  .engine-rings i:nth-child(2) {
    width: 112px;
    height: 112px;
  }
  .engine-rings i:nth-child(3) {
    width: 66px;
    height: 66px;
  }
  .route-engine-machine > strong {
    font-size: 18px;
  }

  .tower-level-settlement {
    min-height: 0;
  }
  .settlement-yard {
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: 12px 15px 20px 25px;
  }
  .settlement-yard::before {
    content: "";
    position: absolute;
    top: 35px;
    bottom: 116px;
    left: 50px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(
      var(--ev-blue),
      var(--ev-cyan) 50%,
      var(--ev-violet)
    );
    opacity: 0.22;
  }
  .settlement-track-art {
    display: none;
  }
  .tower-rail,
  .tower-rail.rail-stable,
  .tower-rail.rail-bank,
  .tower-rail.rail-xrp {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 116px;
    padding: 12px 0 12px 72px;
    transform: none;
    border-bottom: 1px solid rgba(23, 92, 255, 0.08);
  }
  .tower-rail.is-active,
  .protocol-tower-visual[data-active-agent-route="stable"]
    .tower-rail[data-agent-settlement="stable"],
  .protocol-tower-visual[data-active-agent-route="bank"]
    .tower-rail[data-agent-settlement="bank"],
  .protocol-tower-visual[data-active-agent-route="xrp"]
    .tower-rail[data-agent-settlement="xrp"] {
    transform: translateX(3px);
  }
  .tower-rail::before {
    content: "";
    position: absolute;
    top: 39px;
    left: 27px;
    width: 45px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.22;
  }
  .rail-emblem {
    position: absolute;
    top: 18px;
    left: 0;
    z-index: 2;
    width: 52px;
    height: 52px;
  }
  .tower-rail strong {
    font-size: 11px;
  }
  .tower-rail small {
    font-size: 8px;
  }
  .receiver-terminal {
    position: relative;
    inset: auto;
    align-self: center;
    width: 170px;
    margin-top: 18px;
  }
  .receiver-terminal > div {
    width: 94px;
    height: 94px;
  }
  .receiver-terminal > div::before {
    inset: 21px;
  }
  .receiver-terminal i:nth-child(1) {
    top: 22px;
    left: 42px;
  }
  .receiver-terminal i:nth-child(2) {
    top: 50px;
    left: 24px;
  }
  .receiver-terminal i:nth-child(3) {
    top: 55px;
    right: 20px;
  }
  .tower-route-status {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 15px;
  }
  .tower-route-status p {
    font-size: 8.5px;
  }
}

/* --------------------------------------------------------------------
   ANIMATION
   -------------------------------------------------------------------- */

@keyframes labCircuitFlow {
  to {
    stroke-dashoffset: -68;
  }
}
@keyframes labOrbit {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes labLiquid {
  0%,
  100% {
    transform: translateX(-3%);
  }
  50% {
    transform: translateX(3%);
  }
}
@keyframes towerSpineFlow {
  to {
    stroke-dashoffset: -60;
  }
}
@keyframes towerPacketRight {
  0%,
  18% {
    left: 8px;
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  82%,
  100% {
    left: calc(100% - 17px);
    opacity: 0;
  }
}
@keyframes towerPacketLeft {
  0%,
  18% {
    right: 8px;
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  82%,
  100% {
    right: calc(100% - 17px);
    opacity: 0;
  }
}
@keyframes boundaryScan {
  to {
    left: calc(100% - 8px);
  }
}
@keyframes machineFlow {
  to {
    left: calc(100% - 8px);
  }
}
@keyframes machineFlowVertical {
  to {
    top: calc(100% - 8px);
  }
}
@keyframes engineOrbit {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes meshPulse {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 14px rgba(23, 92, 255, 0.24);
  }
}
@keyframes settlementRouteFlow {
  to {
    stroke-dashoffset: -72;
  }
}

/* Motion is decorative. Meaning remains visible when animation is off. */
@media (prefers-reduced-motion: reduce) {
  .evidence-lab-visual *,
  .evidence-lab-visual *::before,
  .evidence-lab-visual *::after,
  .protocol-tower-visual *,
  .protocol-tower-visual *::before,
  .protocol-tower-visual *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
  .lab-wire-live path,
  .tower-spine-live,
  .settlement-track .track-live {
    stroke-dasharray: none;
  }
  .http-packet b {
    display: none;
  }
}