/* The canvas stays decorative. Controls and text remain ordinary accessible HTML. */
.presence-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 350px;
  aspect-ratio: 1.12;
  overflow: hidden;
  border-radius: 48% 48% 42% 44% / 44% 40% 49% 47%;
  background:
    radial-gradient(ellipse at 37% 23%, #284b43 0, transparent 55%),
    radial-gradient(ellipse at 74% 80%, #1c333d 0, transparent 55%), #122d2a;
  box-shadow:
    inset 0 0 70px #061c2033,
    0 22px 65px #173e3612;
}
.presence-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid #effce512;
  border-radius: inherit;
  pointer-events: none;
}
[data-presence] > canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  pointer-events: none;
}
.presence-stage[data-presence-theme="light"] {
  background:
    radial-gradient(ellipse at 37% 23%, #e0eee5 0, transparent 55%),
    radial-gradient(ellipse at 74% 80%, #e8ede6 0, transparent 55%), #f6f7f0;
  box-shadow:
    inset 0 0 65px #ffffff99,
    0 16px 60px #173e3608;
}
.living-presence[data-presence] {
  display: inline-block;
  position: relative;
  isolation: isolate;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  vertical-align: middle;
  color: #4b7764;
  border-radius: 50%;
  background: radial-gradient(ellipse, #dce9da77, transparent 72%);
  animation: none;
}
.profile-next-step > .living-presence[data-presence] {
  width: 90px;
  height: 90px;
}
/* If the renderer is unavailable, retain a quiet visual instead of a broken box. */
[data-presence][data-presence-state="unavailable"]::after {
  content: "";
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  left: 29%;
  top: 29%;
  border-radius: 42% 58% 63% 37% / 49% 39% 61% 51%;
  border: 1px solid #b7d9c785;
  background: radial-gradient(
    ellipse at 35% 35%,
    #b1d1ad33,
    #6fa9a411 65%,
    transparent
  );
  box-shadow: 0 0 40px #acd2ad22;
  pointer-events: none;
}
@media (max-width: 700px) {
  .presence-stage {
    min-height: 270px;
    max-width: 470px;
    margin-inline: auto;
  }
  .living-presence[data-presence] {
    width: 48px;
    height: 48px;
  }
}
@media print {
  .presence-stage,
  .living-presence[data-presence] {
    display: none !important;
  }
}