/* Fit the recorded viewport, with the existing paper/browser framing around it. */
.preview-window { position: relative; display: block; width: 100%; overflow: hidden; aspect-ratio: var(--preview-ratio); border-radius: 6px; background: var(--paper); }
.preview-window > img, .preview-window > video { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center; }
.preview-window > video[data-preview] { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.preview-window > video.is-playing { opacity: 1; }
.app-browser .capture-frame .preview-window > :is(img, video) { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
.app-browser .capture-frame:has(.preview-window) { align-self: start; }
.app-browser .capture-frame[data-device="phone"] { padding: 8px; border-radius: 24px; background: var(--ink); }
.app-browser .capture-frame[data-device="phone"]::before { display: none; }
.app-browser .capture-frame[data-device="phone"] > .preview-window { border-radius: 16px; }
.website-gallery { align-items: start; }
.website-gallery .web-card:nth-child(n) .web-shot { display: block; height: auto; aspect-ratio: 8 / 5; }
.website-gallery .web-shot > .preview-window { height: 100%; border-radius: 0; }
.website-gallery .web-shot .preview-window > img { object-fit: cover; object-position: top; transition: none; }
.tools-shell .bld-viz.is-web:has(.preview-window) { display: block; height: auto; min-height: 0; padding-top: 26px; }
.tools-shell .bld-viz.is-web .bld-shot:has(.preview-window) { position: relative; inset: auto; display: block; }
.tools-shell .bld-viz.is-web .preview-window { border-radius: 0; }
.tools-shell .bld-viz.is-web .preview-window > img { position: static; width: 100%; height: 100%; object-fit: contain; transform: none; transition: none; }
.preview-toolbar { display: flex; justify-content: flex-end; margin: 0 0 20px; }
.preview-toggle { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); color: var(--ink); font: 500 14px/1.4 var(--font-body); cursor: pointer; transition: background 160ms ease; }
.preview-toggle[hidden] { display: none; }
.preview-toggle:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 4px; }
@media (hover: hover) { .preview-toggle:hover { background: var(--green-ghost); } }
.previews-paused .web-card .web-shot img { transition: none; object-position: top; }
@media (max-width: 720px) {
  /* A desktop recording needs more than half a phone's width to remain legible. */
  .website-gallery { grid-template-columns: minmax(0, 1fr); }
  .preview-toolbar { justify-content: flex-start; }
}