.app {
  max-width: 1000px;
}

/* Backdrop mimics the video frame behind the captions. */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: crosshair;
  background: linear-gradient(135deg, #b5bdc8 0%, #828c95 36%, #28343b 100%);
}

.stage-render {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stage-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

output {
  font-variant-numeric: tabular-nums;
}

.messages {
  max-height: 16rem;
  overflow-y: auto;
}

.messages:empty {
  display: none;
}

/* no list below the header: avoid a doubled bottom border */
.card:has(> .messages:empty) > .card-header {
  border-bottom: 0;
}

/* off-screen (but laid out) container used to rasterize frames for PNG export */
.export-host {
  position: absolute;
  left: -100000px;
  top: 0;
  overflow: hidden;
  pointer-events: none;
}