.camera-comparisons { width: 100%; max-width: 800px; }
.camera-comparisons .camera-chapter { padding: 0 0 20px; }
.camera-comparisons .camera-samples { position: relative; margin: 22px 0; }
.camera-task-buttons { margin: 0 auto 14px; }
.camera-trial[hidden] { display: none; }
.camera-video-pair { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 16px; align-items: start; }
.camera-video-pair figure { min-width: 0; margin: 0; }
.camera-video-frame { position: relative; overflow: hidden; border-radius: 4px; background: #f2f3f4; }
.camera-video-frame--ego-wrists { aspect-ratio: 4 / 1; }
.camera-video-frame--stereo { aspect-ratio: 2 / 1; }
.camera-video-frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.camera-wrist-labels { position: absolute; inset: 6px 0 auto; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; }
.camera-wrist-labels span { justify-self: start; margin-left: 6px; padding: 3px 6px; border-radius: 3px; background: rgba(0,0,0,.48); color: #fff; font: 500 10px/1.4 'Avenir Next', Avenir, sans-serif; }
.camera-video-label { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; color: #444; font: 600 12px/1.4 'Avenir Next', Avenir, 'Open Sans', sans-serif; }
.camera-video-label .results-swatch { margin: 0; }
.camera-view-note { margin: 10px 0 0; color: #777; font: 500 12px/1.4 'Avenir Next', Avenir, 'Open Sans', sans-serif; }
@media(max-width:550px) {
    .camera-video-pair { grid-template-columns: 1fr; gap: 20px; }
    .camera-wrist-labels span { font-size: 9px; padding: 2px 4px; }
    .camera-view-note { font-size: 11px; }
}

/* Centered on the column, not the indented list item (ol 2.25rem + li 0.5rem). */
.intro-problems .intro-boba-figure { --indent: 2.75rem; width: calc((100% + var(--indent)) * .8); margin: 24px 0 32px calc((100% + var(--indent)) * .1 - var(--indent)); }
@media (max-width: 550px) { .intro-problems .intro-boba-figure { width: calc(100% + var(--indent)); margin-left: calc(-1 * var(--indent)); } }
.intro-boba-row { display: block; }
.intro-boba-view { aspect-ratio: 8 / 3; }
.intro-boba-view .camera-wrist-labels { grid-template-columns: 1fr 1fr; }
.intro-boba-row > .media-feedback { grid-column: 1 / -1; }

.camera-video-frame--ego-wrists .camera-wrist-labels { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.camera-view-note { white-space: normal; overflow-wrap: anywhere; text-align: left; }