.zo-viewport {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  margin: 16px auto 0;
  overflow: hidden;
  background: #000;
  border-radius: 14px;
  border: 1px solid var(--border);
  position: relative;
  box-shadow: var(--shadow-card);
}
.zo-viewport img {
  position: absolute;
  display: block;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.45s ease;
  image-rendering: auto;
  filter: blur(1.5px);
}
.zo-viewport.solved img,
.zo-viewport.revealed img {
  filter: none;
}
.zo-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.5) 100%);
  border-radius: inherit;
}