body {
  margin: 0;
  font: 14px system-ui, sans-serif;
  background: #fff5f8;
  color: #4a2b38;
}
header { padding: 8px 12px; }
h1 { margin: 0 0 8px; font-size: 18px; }
form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
input:not([type=checkbox]), select, button { font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid #e8b4c8; }
button { background: #f48fb1; color: white; border: none; }
button:disabled { opacity: .5; }
#status { margin: 6px 0 0; font-size: 12px; }
main { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; padding: 8px; }
.tile { position: relative; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; }
.tile.big { grid-column: 1 / -1; }
.tile video { width: 100%; height: 100%; object-fit: contain; }
.tile pre {
  position: absolute; left: 6px; top: 6px; margin: 0; padding: 4px 6px;
  font: 11px/1.35 ui-monospace, monospace; color: #fff; background: #0008; border-radius: 6px;
}