/* Same scene, equal before/after viewports. Static list media; no hover playback. */
.camera-v6-card{display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;margin:0;background:#fafaf8;color:#242528;container-type:inline-size}
.camera-v6-frames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;flex:1;min-height:0;background:#ddded9}
.camera-v6-card-panel{display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0;background:#fafaf8}
.camera-v6-card .camera-v6-card-canvas{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:none;object-fit:fill;filter:none}
.camera-v6-phase{display:block;padding:4px 6px;color:#656a61;font-size:12px;line-height:1.4;text-align:center}
.camera-v6-card-caption{margin:0;padding:8px 10px;border-top:1px solid #ddded9;color:#242528;font-size:12px;line-height:1.4;text-align:center;word-break:keep-all}
@container(max-width:200px){.camera-v6-card-caption{display:none}}
/* Replace the generic inherited statements visually, retaining their nodes/API. */
.camera-demo-v6 .motion-readout{display:none}
.camera-v6-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0 18px 12px;background:#fff;color:#242528}
.camera-v6-metric{min-width:0;padding-top:12px;border-top:1px solid #e4e5df}
.camera-v6-metric-label{margin:0;color:#656a61;font-size:12px;line-height:1.5}
.camera-v6-metric-value{margin:5px 0 0;color:#242528;font-size:14px;font-weight:500;line-height:1.5;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.camera-v6-guide{margin:0;padding:0 18px 14px;background:#fff;color:#656a61;font-size:12px;line-height:1.7;word-break:keep-all}
@container(max-width:620px){.camera-v6-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}}
@media(max-width:520px){.camera-v6-metrics{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 14px 12px;gap:8px 16px}.camera-v6-guide{padding:0 14px 14px}}