.photo-render.mesa-onda-render {
  width: min(100%, 760px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: #d8c6b0;
}
.photo-render.mesa-onda-render > img { object-fit: cover; }
.mesa-onda-model-preview {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 36px), 760px);
  margin: 16px auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: #202726;
}
.mesa-onda-model-preview[hidden] { display: none; }
.mesa-onda-model-stage { overflow: hidden; border-radius: 10px; background: #202725; }
.mesa-onda-model-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  touch-action: none;
  cursor: grab;
}
.mesa-onda-model-stage canvas:active { cursor: grabbing; }
.mesa-onda-model-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 2px 0; }
.mesa-onda-model-actions p { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
body.light .mesa-onda-model-preview { border-color: var(--line); background: #ebe5dc; }
@media(max-width:640px) {
  .photo-render.mesa-onda-render { width: 100%; aspect-ratio: 1 / 1; }
  .mesa-onda-model-preview { width: calc(100% - 20px); margin: 10px auto; padding: 10px; }
}