/* PHOTOELASTIC (the /success signature). The disc is a canvas over its own poster; both share one geometry. */
.ps-stage { position: relative; width: min(100%, 640px); aspect-ratio: 1 / 1; }
.ps-stage::before {
  /* the polarizer: a faint clear ring around the specimen, the light it is seen through */
  content: ""; position: absolute; inset: 3.5%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, .38) 95%, rgba(255, 255, 255, 0) 100%);
  box-shadow: inset 0 0 0 1px rgba(29, 33, 38, .07);
}
.ps-stage::after {
  /* contact shadow on the pearl ground */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 1%; height: 5%; z-index: -1;
  background: radial-gradient(closest-side, rgba(60, 74, 110, .2), transparent);
}
.ps-poster, .ps-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.ps-gl { opacity: 0; }
.ps.is-live .ps-gl { opacity: 1; }
.ps.is-live .ps-poster { visibility: hidden; } /* the canvas is semi-transparent: never stack it on the poster */
.ps-tick {
  /* two polarizer marks on the ring */
  position: absolute; left: 50%; top: 50%; width: 92%; height: 1px; transform: translate(-50%, -50%) rotate(-45deg);
  background: linear-gradient(90deg, rgba(29, 33, 38, .38) 0 2.4%, transparent 2.4% 97.6%, rgba(29, 33, 38, .38) 97.6%);
}

@media (max-width: 760px) {
  .ps { justify-content: center; }
  .ps-stage { width: min(92%, 380px); margin-inline: auto; }
}