.trio-media.variations-demo { max-width: 460px; padding: 16px; background: #101012; border: 1px solid #2c2c30; border-radius: 10px; box-shadow: 0 20px 45px #0004; overflow: hidden; }
.variations-demo-body { display: grid; align-items: center; }
.variations-demo-source, .variations-demo-grid { grid-area: 1 / 1; }
.variations-demo-source { display: grid; gap: 14px; opacity: 0; }
.variations-demo-source > img { width: 100%; aspect-ratio: 920 / 486; object-fit: cover; border: 1px solid #29292d; border-radius: 10px; }
.variations-demo-generate { display: inline-flex; align-items: center; justify-content: center; min-height: 33px; padding: 8px 12px; border: 1px solid #00dd6150; border-radius: 5px; background: #00dd610b; color: #00dd61; font-size: 11px; white-space: nowrap; }
.variations-demo-generate { justify-self: center; }
.variations-demo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.variation-demo-tile { overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid #29292d; border-radius: 5px; background: #17171a; }
.variation-demo-tile > img { width: 100%; height: 100%; object-fit: cover; }
.variations-demo[data-loading] .variations-demo-source { opacity: 1; }
.variations-demo[data-loading] .variation-demo-tile { opacity: 0; }
@media (max-width: 540px) {
  .variations-demo-generate { padding-inline: 10px; font-size: 10px; }
  .variations-demo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .variation-demo-tile { aspect-ratio: 240 / 127; }
}