/* Only the restored how-it-works/documentation recordings. */
.hiw-film-slot:has(.ap-showcase) { min-width: 0; display: flex; justify-content: flex-end; }
figure.ap-showcase { display: block; width: 100%; max-width: 720px; margin: 0; min-width: 0; }
figure.docs-clip.ap-showcase { max-width: 560px; }
.hiw-films:has(.ap-showcase), .hiw-films:has(.ap-showcase) > div { min-width: 0; }
@media (min-width: 900px) {
  .hiw-typerow:has(.ap-showcase),
  .hiw-card:has(> .hiw-copy):has(> .hiw-films .ap-showcase),
  .hiw-half:has(> .ap-showcase) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
  }
  .hiw-halves:has(.ap-showcase) { grid-template-columns: minmax(0, 1fr); }
  .hiw-card:has(.ap-showcase) .hiw-copy { width: 100%; max-width: 480px; }
  .hiw-half > figure.ap-showcase { justify-self: end; }
}
.ap-showcase-frame { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: #0b0b0f; box-shadow: 0 14px 45px rgba(0,0,0,.16); }
.ap-showcase-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0b0b0f; }
.ap-showcase-stage > video.ap-showcase-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; opacity: 1; visibility: visible; border: 0; color-scheme: dark; }
.ap-showcase-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 17px; border: 1px solid rgba(255,255,255,.38); border-radius: 999px; background: rgba(12,12,17,.91); color: #fff; font: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 3px 20px rgba(0,0,0,.22); }
.ap-showcase-start[hidden] { display: none; }
.ap-showcase-start svg { width: 20px; height: 20px; }
.ap-showcase-start:hover { background: #292930; }
.ap-showcase-start:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.ap-showcase-caption { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 20px; padding: 13px 2px 0; color: #a5a5b0; font-size: 13px; line-height: 1.6; }
.ap-showcase-caption > span { flex: 1 1 240px; }
.ap-showcase-caption a { flex: 0 0 auto; font-size: 13px; }
.ap-showcase-status { margin: 8px 2px 0; color: #b6b6c2; font-size: 13px; line-height: 1.5; }
@media (max-width: 700px) { .hiw-film-slot:has(.ap-showcase) { justify-content: center; } .ap-showcase-frame { border-radius: 13px; } }