/* A workspace-sized plane, not a crop window locked to the fitted image. */
#sceneFeed .scene-viewport {
  position: relative; overflow: hidden; width: 100%; max-width: 100%;
  height: clamp(280px, 52svh, 520px); display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--bg); cursor: grab;
  touch-action: none; user-select: none;
}
#sceneFeed .scene-viewport > img {
  flex: none; width: auto; height: auto; max-width: 100%; max-height: 100%;
  transform-origin: center; border-radius: 0; box-shadow: none;
}
#sceneFeed .scene-viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#sceneFeed .scene-viewport.view-dragging { cursor: grabbing; }
#sceneFeed .scene-viewport.view-editing { cursor: auto; }
/* Drawing/text tools retain their existing image-sized coordinate surface. */
#sceneFeed .scene-viewport.view-editing { width: fit-content; height: auto; display: block; }
#sceneFeed .scene-card:is(.live, .base-active, .trace-focus) .scene-viewport { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (min-width: 901px) {
  #sceneLayout.composer .scene-card:not(.view-editing) > .scene-viewport {
    width: var(--cmp-img-maxw, calc(100cqw - 400px)); height: calc(100cqh - 8px);
    max-width: none;
  }
}