/* Shared by the four homepage lifecycle animation frames. --preview-scale is set by
   bundled-lifecycle-animation.js. */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

.viewport-shell {
  width: calc(var(--preview-size) * var(--preview-scale));
  height: calc(var(--preview-size) * var(--preview-scale));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
}

.viewport-stage {
  width: var(--preview-size);
  height: var(--preview-size);
  transform: scale(var(--preview-scale));
  transform-origin: top center;
}

html.embedded body {
  min-height: 100vh;
  background: transparent;
  padding: 0;
  gap: 0;
  justify-content: center;
}

html.embedded .viewport {
  box-shadow: none;
}

html.embedded .controls {
  display: none;
}