.result-hero {
  --result-guide-width: 310px;
  position: relative;
  isolation: isolate;
}
.result-guide-motion {
  position: relative;
  z-index: 1;
  width: var(--result-guide-width);
  flex-shrink: 0;
  transform-origin: 50% 44%;
}
.result-hero .result-guide-motion img {
  width: 100%;
  height: auto;
}
.result-hero[data-celebration="loading"] .result-guide-motion {
  opacity: 0;
}
.result-card {
  position: relative;
  z-index: 2;
}
.result-success-glow {
  position: absolute;
  width: min(100%, calc(var(--result-guide-width) + 100px));
  inset: 12% 0 0;
  margin-inline: auto;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    #ffedb7aa,
    #fff3d226 55%,
    transparent 75%
  );
  opacity: 0;
  pointer-events: none;
}
.result-vfx {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: min(100%, calc(var(--result-guide-width) + 80px));
  margin-inline: auto;
  pointer-events: none;
  contain: layout style;
}
.result-spark,
.result-ray {
  position: absolute;
  opacity: 0;
}
.result-spark {
  width: var(--spark-size);
  height: var(--spark-size);
}
.result-spark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #ffe8a0;
}
.result-ray {
  width: 4px;
  height: 16px;
  border-radius: 4px;
  background: #f8d889;
}
@media (max-width: 600px) {
  .result-hero {
    --result-guide-width: 250px;
  }
}
@media (max-height: 700px) {
  .result-hero {
    --result-guide-width: 180px;
  }
}
@media (max-height: 950px) and (min-width: 601px) {
  .result-hero {
    --result-guide-width: 220px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .result-hero[data-celebration="loading"] .result-guide-motion {
    opacity: 1;
  }
  .result-vfx,
  .result-success-glow {
    display: none;
  }
}