.ps-browse-signal {
  position: relative;
  isolation: isolate;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.ps-browse-default-view.is-root-preview .ps-browse-top-signal {
  --ps-signal-shell-scale: 0.64;
  position: relative;
  width: 96px;
  height: 154px;
  opacity: 0.97;
  filter:
    drop-shadow(0 0 6px rgba(176, 232, 255, 0.22))
    drop-shadow(0 0 14px rgba(52, 134, 245, 0.14));
}

.ps-browse-signal::before {
  content: '';
  position: absolute;
  inset: 2% 41% 4%;
  border-radius: 999px;
  background:
    radial-gradient(48% 14% at 50% 22%, rgba(222, 250, 255, 0.14), transparent 70%),
    radial-gradient(44% 30% at 50% 47%, rgba(86, 168, 255, 0.05), transparent 75%),
    linear-gradient(180deg, rgba(96, 178, 255, 0.052), rgba(12, 30, 58, 0.01) 76%, transparent);
  filter: blur(3px);
  opacity: 0.34;
  pointer-events: none;
  z-index: -1;
}

.ps-browse-signal::after {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 13px;
  left: 50%;
  width: 12px;
  margin-left: -6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(0, 8, 22, 0.52), transparent 27% 73%, rgba(0, 8, 22, 0.42)),
    linear-gradient(180deg, rgba(48, 120, 205, 0.12), rgba(6, 20, 44, 0.34));
  box-shadow:
    inset 1px 0 0 rgba(178, 232, 255, 0.1),
    inset -1px 0 0 rgba(56, 132, 220, 0.12);
  pointer-events: none;
  z-index: 0;
}

.ps-signal-shell {
  position: relative;
  width: 100%;
  height: 240px;
  transform: scaleY(var(--ps-signal-shell-scale, 1));
  transform-origin: top center;
  z-index: 1;
}

.ps-signal-rail {
  position: absolute;
  inset: 14px 44px 14px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(32, 82, 145, 0.2), rgba(232, 252, 255, 0.86) 50%, rgba(24, 72, 136, 0.2)),
    linear-gradient(180deg, rgba(164, 228, 255, 0.88), rgba(38, 92, 178, 0.24) 76%, rgba(12, 34, 74, 0.12));
  box-shadow:
    inset 0 0 0 1px rgba(220, 250, 255, 0.34),
    inset 0 0 7px rgba(136, 210, 255, 0.18),
    0 0 9px rgba(110, 170, 255, 0.12);
  z-index: 1;
}

.ps-signal-node {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 3px;
  margin-left: -4px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(170, 224, 255, 0.45), rgba(236, 252, 255, 0.86), rgba(124, 190, 255, 0.48));
  box-shadow:
    0 0 5px rgba(150, 210, 255, 0.14),
    0 0 1px rgba(255, 255, 255, 0.32);
  z-index: 2;
}

.ps-signal-node-top {
  top: 34px;
}

.ps-signal-node-mid {
  top: 120px;
}

.ps-signal-node-bottom {
  top: 198px;
}

.ps-signal-lens,
.ps-browse-signal-guided-lens {
  position: absolute;
  left: 50%;
  top: 0;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(250, 255, 255, 1) 0 8%, rgba(178, 236, 255, 0.58) 25%, rgba(72, 158, 255, 0.13) 52%, rgba(120, 185, 255, 0) 72%);
  box-shadow:
    0 0 9px rgba(178, 232, 255, 0.3),
    0 0 18px rgba(46, 142, 255, 0.13);
  transform: translateY(28px);
  transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  z-index: 3;
}

.ps-signal-lens::before,
.ps-browse-signal-guided-lens::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -30px;
  width: 88px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218, 250, 255, 0.88), transparent);
  box-shadow:
    0 0 9px rgba(128, 202, 255, 0.22),
    0 0 18px rgba(54, 146, 255, 0.12);
  transform: translateY(-50%);
}

.ps-signal-lens::after,
.ps-browse-signal-guided-lens::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: rgba(242, 253, 255, 0.76);
  box-shadow: 0 0 9px rgba(210, 248, 255, 0.32);
}

.ps-browse-signal.is-handoff-origin .ps-signal-rail {
  animation: ps-signal-handoff-rail 980ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

.ps-browse-signal.is-handoff-origin .ps-signal-lens,
.ps-browse-signal.is-handoff-origin .ps-browse-signal-guided-lens {
  animation: ps-signal-handoff-lens 900ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

@keyframes ps-signal-handoff-rail {
  0% {
    box-shadow: 0 0 14px rgba(110, 170, 255, 0.16);
    opacity: 0.88;
  }

  48% {
    box-shadow: 0 0 24px rgba(124, 188, 255, 0.24);
    opacity: 1;
  }

  100% {
    box-shadow: 0 0 14px rgba(110, 170, 255, 0.16);
    opacity: 0.88;
  }
}

@keyframes ps-signal-handoff-lens {
  0% {
    box-shadow: 0 0 16px rgba(120, 180, 255, 0.2);
    opacity: 0.82;
  }

  42% {
    box-shadow: 0 0 22px rgba(155, 210, 255, 0.28);
    opacity: 1;
  }

  100% {
    box-shadow: 0 0 16px rgba(120, 180, 255, 0.2);
    opacity: 0.82;
  }
}

@media (max-width: 767px) {
  .ps-browse-default-view.is-root-preview .ps-browse-top-signal {
    --ps-signal-shell-scale: 0.49;
    width: 88px;
    height: 118px;
  }

  .ps-browse-default-view.is-root-preview .ps-browse-top-signal::before {
    inset: 5% 41% 6%;
    opacity: 0.4;
  }

  .ps-signal-rail {
    inset: 14px 42px 14px;
    box-shadow:
      inset 0 0 0 1px rgba(210, 246, 255, 0.22),
      inset 0 0 6px rgba(136, 210, 255, 0.12),
      0 0 7px rgba(110, 170, 255, 0.08);
  }

  .ps-signal-lens,
  .ps-browse-signal-guided-lens {
    width: 25px;
    height: 25px;
    margin-left: -12.5px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ps-browse-signal:not(.is-handoff-origin)::before {
    animation: ps-signal-halo-bloom 5.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  }

  .ps-browse-signal:not(.is-handoff-origin) .ps-signal-rail {
    animation: ps-signal-rail-awake 5.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  }

  .ps-browse-signal:not(.is-handoff-origin) .ps-signal-lens,
  .ps-browse-signal:not(.is-handoff-origin) .ps-browse-signal-guided-lens {
    animation: ps-signal-lens-scan 5.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  }

  .ps-browse-default-view.is-root-preview .ps-browse-top-signal::after {
    animation: ps-signal-trace-wake 5.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  }

  @keyframes ps-signal-lens-scan {
    0%,
    100% {
      transform: translateY(26px) scale(0.94);
      opacity: 0.82;
    }

    34% {
      transform: translateY(30px) scale(1);
      opacity: 1;
    }

    58% {
      transform: translateY(160px) scale(1.03);
      opacity: 0.96;
    }

    76% {
      transform: translateY(186px) scale(0.96);
      opacity: 0.78;
    }
  }

  @keyframes ps-signal-rail-awake {
    0%,
    100% {
      box-shadow:
        inset 0 0 0 1px rgba(220, 250, 255, 0.28),
        inset 0 0 8px rgba(136, 210, 255, 0.14),
        0 0 9px rgba(110, 170, 255, 0.1);
      opacity: 0.84;
    }

    38% {
      box-shadow:
        inset 0 0 0 1px rgba(230, 254, 255, 0.38),
        inset 0 0 12px rgba(162, 226, 255, 0.22),
        0 0 16px rgba(88, 172, 255, 0.22);
      opacity: 1;
    }

    70% {
      box-shadow:
        inset 0 0 0 1px rgba(220, 250, 255, 0.32),
        inset 0 0 10px rgba(136, 210, 255, 0.18),
        0 0 13px rgba(64, 150, 255, 0.16);
      opacity: 0.92;
    }
  }

  @keyframes ps-signal-halo-bloom {
    0%,
    100% {
      opacity: 0.34;
      filter: blur(4px);
    }

    42% {
      opacity: 0.62;
      filter: blur(6px);
    }

    72% {
      opacity: 0.42;
      filter: blur(4px);
    }
  }

  @keyframes ps-signal-trace-wake {
    0%,
    100% {
      opacity: 0.32;
      transform: translateY(-50%) translateX(0);
    }

    42% {
      opacity: 0.68;
      transform: translateY(-50%) translateX(-4px);
    }

    72% {
      opacity: 0.42;
      transform: translateY(-50%) translateX(2px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-browse-signal:not(.is-handoff-origin)::before,
  .ps-browse-signal:not(.is-handoff-origin) .ps-signal-rail,
  .ps-browse-signal:not(.is-handoff-origin) .ps-signal-lens,
  .ps-browse-signal:not(.is-handoff-origin) .ps-browse-signal-guided-lens,
  .ps-browse-default-view.is-root-preview .ps-browse-top-signal::after,
  .ps-browse-signal.is-handoff-origin .ps-signal-rail,
  .ps-browse-signal.is-handoff-origin .ps-signal-lens,
  .ps-browse-signal.is-handoff-origin .ps-browse-signal-guided-lens {
    animation: none;
  }

  .ps-signal-lens,
  .ps-browse-signal-guided-lens {
    transition: none;
  }
}