.plantopia-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.65rem, 3vw, 1.25rem);
  max-width: 30rem;
  margin-top: 1rem;
}

.plantopia-figure {
  min-width: 0;
}

.plantopia-figure figcaption {
  margin-bottom: .35rem;
}

.plantopia-image-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 5;
  object-fit: cover;
  border: 1px solid hsl(var(--primary) / .45);
  border-radius: .4rem;
}

.plantopia-image-frame a {
  display: block;
  cursor: zoom-in;
}

.plantopia-viewer {
  width: min(72rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  padding: .75rem;
  overflow: hidden;
  border: 1px solid hsl(var(--primary) / .55);
  border-radius: .6rem;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
}

.plantopia-viewer::backdrop {
  background: #08050be8;
}

.plantopia-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .65rem;
}

.plantopia-viewer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.plantopia-viewer button {
  border: 1px solid hsl(var(--primary) / .55);
  border-radius: .35rem;
  padding: .35rem .6rem;
  font-size: .875rem;
}

.plantopia-viewer button:disabled {
  opacity: .45;
}

.plantopia-viewer-stage {
  max-height: calc(100dvh - 8rem);
  overflow: auto;
}

.plantopia-viewer-image {
  position: relative;
  width: calc(min(100%, var(--diagram-fit, 95dvh)) * var(--diagram-zoom, 1));
  margin-inline: auto;
  background: hsl(var(--background));
}

.plantopia-viewer-image img {
  display: block;
  width: 100%;
  height: auto;
}

.plantopia-viewer-image canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.plantopia-viewer-image:is([data-reveal="loading"], [data-reveal="refining"]) img {
  opacity: 0;
}

.plantopia-viewer-image[data-reveal="refining"] canvas {
  opacity: 1;
}

.plantopia-reveal-status {
  position: absolute;
  bottom: .6rem;
  left: .6rem;
  padding: .35rem .6rem;
  border-radius: 1rem;
  color: #f2e7ff;
  background: #21132cde;
  font-size: .75rem;
  pointer-events: none;
}

.plantopia-viewer-image[data-reveal="ready"] .plantopia-reveal-status {
  animation: plantopia-reveal-done 500ms 250ms both;
}

@keyframes plantopia-reveal-done {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .plantopia-viewer-image[data-reveal="ready"] .plantopia-reveal-status {
    animation: none;
    opacity: 0;
  }
}

.device-probe-photo img {
  object-position: 50% 60%;
}