.creator-mobile-examples { display: none; }
/* The player follows the source aspect ratio within a bounded viewing area.
   Owned examples include 1280×720 landscape and 720×1280 portrait videos. */
.creator-page [data-creator-kind="video"] .creator-preview { width: 100%; max-width: 768px; height: clamp(240px, 48vh, 480px); margin-inline: auto; }
.creator-page [data-creator-kind="video"] .creator-preview video { width: 100%; height: 100%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.creator-mobile-examples *, .creator-example-dialog, .creator-example-dialog * { box-sizing: border-box; }
.creator-example-dialog {
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  max-height: min(88dvh, 56rem);
  margin: 0;
  padding: 0;
  border: 1px solid var(--sc-color-border);
  border-bottom: 0;
  border-radius: var(--sc-radius-xl) var(--sc-radius-xl) 0 0;
  color: var(--sc-color-ink);
  background: var(--sc-color-surface);
  box-shadow: var(--sc-shadow-lg);
  overflow: hidden;
}
.creator-example-dialog[open] { display: flex; flex-direction: column; }
.creator-example-dialog::backdrop { background: var(--sc-color-overlay); }
.creator-example-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: var(--sc-space-3);
  padding: var(--sc-space-3) var(--sc-space-4);
  border-bottom: 1px solid var(--sc-color-border);
}
.creator-example-dialog__header h2 { flex: 1; margin: 0 0 0 44px; text-align: center; font-size: var(--sc-font-size-md); line-height: 1.5; overflow-wrap: anywhere; }
.creator-example-dialog__close { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; }
.creator-example-dialog__content { min-height: 0; padding: var(--sc-space-4); overflow: auto; overscroll-behavior: contain; }
.creator-example-dialog__media { overflow: hidden; border-radius: var(--sc-radius-md); background: var(--sc-color-canvas); }
.creator-example-dialog__media :is(img, video) { display: block; width: 100%; height: min(36dvh, 22rem); object-fit: contain; }
.creator-example-dialog__choices { display: flex; justify-content: center; }
.creator-example-dialog__choice { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; color: var(--sc-color-muted); background: transparent; cursor: pointer; }
.creator-example-dialog__choice span { width: var(--sc-space-2); height: var(--sc-space-2); border-radius: var(--sc-radius-pill); background: currentColor; }
.creator-example-dialog__choice[aria-pressed="true"] { color: var(--sc-color-brand-700); }
.creator-example-dialog__choice:focus-visible { outline: 2px solid var(--sc-color-focus); outline-offset: -2px; border-radius: var(--sc-radius-sm); }
.creator-example-dialog__media-status { margin: var(--sc-space-2) 0 0; color: var(--sc-color-muted); font-size: var(--sc-font-size-sm); }
.creator-example-dialog__prompt-heading { margin: var(--sc-space-4) 0 var(--sc-space-2); font-size: var(--sc-font-size-sm); font-weight: 600; }
.creator-example-dialog__prompt { max-height: 11.25rem; margin: 0; padding: var(--sc-space-3); border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-md); background: var(--sc-color-surface-muted); font-size: var(--sc-font-size-sm); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; overscroll-behavior: contain; }
.creator-example-dialog__prompt:focus-visible { outline: 2px solid var(--sc-color-focus); outline-offset: 2px; }
.creator-example-dialog__disclosure { margin: var(--sc-space-4) 0 0; color: var(--sc-color-muted); font-size: var(--sc-font-size-sm); line-height: 1.5; }
.creator-example-dialog__footer { flex: 0 0 auto; padding: var(--sc-space-3) var(--sc-space-4) max(var(--sc-space-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--sc-color-border); }
.creator-example-dialog__footer .sc-button { width: 100%; min-height: 44px; white-space: normal; }
.creator-example-dialog__disabled-help { margin: 0 0 var(--sc-space-2); color: var(--sc-color-muted); font-size: var(--sc-font-size-sm); line-height: 1.5; }
.creator-example-dialog [hidden] { display: none !important; }
@media (max-width: 767px) {
  .creator-mobile-examples { display: block; min-width: 0; }
  .creator-mobile-examples__heading { margin: 0 0 var(--sc-space-3); font-size: var(--sc-font-size-sm); font-weight: 600; }
  .creator-mobile-examples__rail { display: flex; gap: var(--sc-space-2); max-width: 100%; padding: var(--sc-space-1); margin: calc(-1 * var(--sc-space-1)); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .creator-mobile-examples__item { flex: 0 0 112px; display: flex; flex-direction: column; gap: var(--sc-space-2); border: 0; border-radius: var(--sc-radius-sm); padding: 0; text-align: start; color: var(--sc-color-muted); background: transparent; cursor: pointer; font: inherit; font-size: var(--sc-font-size-sm); line-height: 1.4; }
  .creator-mobile-examples__item img { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-sm); object-fit: cover; }
  .creator-mobile-examples__item:hover { color: var(--sc-color-ink); }
  .creator-mobile-examples__item:hover img { border-color: var(--sc-color-brand-700); }
  .creator-mobile-examples__item:focus-visible { outline: 2px solid var(--sc-color-focus); outline-offset: 2px; }
  .creator-mobile-examples__item span { overflow-wrap: anywhere; }
  .creator-mobile-examples__status { margin: var(--sc-space-2) 0 0; color: var(--sc-color-muted); font-size: var(--sc-font-size-sm); line-height: 1.5; }
  .creator-mobile-examples__status:empty { display: none; }
}