/* Screenshots are framed around a single control group, not the full window. */
.home-v3 .interface-card__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 180px;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid rgba(236, 241, 247, .13);
    border-radius: 6px;
    background: #353535;
}
.home-v3 .interface-card__media:focus-visible { outline: 2px solid #b9dffe; outline-offset: 3px; }
.home-v3 .interface-card__crop {
    position: relative;
    display: block;
    width: min(100%, calc(180px * var(--crop-ratio)));
    aspect-ratio: var(--crop-ratio);
    overflow: hidden;
    flex: none;
}
.home-v3 .interface-card__media .use-case-image,
.home-v3 .use-case-card:hover .interface-card__media .use-case-image {
    position: absolute;
    width: var(--image-width);
    max-width: none;
    height: auto;
    max-height: none;
    left: var(--image-left);
    top: var(--image-top);
    margin: 0;
    border-radius: 0;
    filter: none;
    transform: none;
    transition: none;
}
.home-v3 .interface-cards .use-cases-cloud--3d .use-case-card { width: 320px; }
.home-v3 .interface-cards .use-case-card p { font-size: .9rem; line-height: 1.5; }
@media (max-width: 600px) {
    .home-v3 .interface-cards .use-cases-cloud--3d .use-case-card { width: min(300px, 82vw); }
}
/* Local crops preserve the original UI pixels and semantic colours. */
.interface-card--tools { --crop-ratio: 180 / 260; --image-width: 1066.66667%; --image-left: -4.44444%; --image-top: -64.61538%; }
.interface-card--selection { --crop-ratio: 158 / 82; --image-width: 1215.18987%; --image-left: -11.39241%; --image-top: -235.36585%; }
.interface-card--information { --crop-ratio: 315 / 300; --image-width: 609.52381%; --image-left: -446.98413%; --image-top: -30.33333%; }
.interface-card--processing { --crop-ratio: 625 / 209; --image-width: 307.20000%; --image-left: -1.92000%; --image-top: -289.95215%; }
.interface-card--calculate { --crop-ratio: 451 / 72; --image-width: 425.72062%; --image-left: -3.76940%; --image-top: -727.77778%; }
.interface-card--histogram { --crop-ratio: 754 / 385; --image-width: 254.64191%; --image-left: -1.59151%; --image-top: -144.41558%; }
.interface-card--capture { --crop-ratio: 383 / 171; --image-width: 501.30548%; --image-left: -2.08877%; --image-top: -301.16959%; }
.interface-card--features { --crop-ratio: 589 / 207; --image-width: 325.97623%; --image-left: -1.69779%; --image-top: -251.20773%; }
.interface-card--chat { --crop-ratio: 494 / 181; --image-width: 388.66397%; --image-left: -3.44130%; --image-top: -392.81768%; }
.interface-card--dataset { --crop-ratio: 594 / 220; --image-width: 323.23232%; --image-left: -216.83502%; --image-top: -277.72727%; }
.home-v3 .interface-cards .use-case-card p {
    display: block;
    max-height: none;
    overflow: visible;
    -webkit-line-clamp: unset;
}

.interface-card--minimap { --crop-ratio: 225 / 151; --image-width: 853.33333%; --image-left: -509.33333%; --image-top: -84.76821%; }
.interface-card--playback { --crop-ratio: 393 / 36; --image-width: 488.54962%; --image-left: -53.94402%; --image-top: -1152.77778%; }
.interface-card--timeline-zoom { --crop-ratio: 430 / 36; --image-width: 446.51163%; --image-left: -167.20930%; --image-top: -1152.77778%; }
.interface-card--graph-filters { --crop-ratio: 184 / 33; --image-width: 1043.47826%; --image-left: -932.06522%; --image-top: -581.81818%; }
.interface-card--dataset-actions { --crop-ratio: 409 / 40; --image-width: 469.43765%; --image-left: -5.37897%; --image-top: -1375.00000%; }
.interface-card--code-files { --crop-ratio: 317 / 274; --image-width: 605.67823%; --image-left: -2.52366%; --image-top: -56.20438%; }
.interface-card--code-run { --crop-ratio: 308 / 43; --image-width: 623.37662%; --image-left: -101.29870%; --image-top: -74.41860%; }
.interface-card--code-panels { --crop-ratio: 233 / 40; --image-width: 824.03433%; --image-left: -149.35622%; --image-top: -2360.00000%; }

/* Reserve the cloud before its lazy module arrives; never flash a grid. */
@media (scripting: enabled) {
    .home-v3 .interface-cards .use-cases-cloud:not([data-cloud-ready]) {
        display: block;
        height: 700px;
        overflow: hidden;
    }
    .home-v3 .interface-cards .use-cases-cloud:not([data-cloud-ready]) > .use-case-card {
        visibility: hidden;
    }
}
.use-cases-cloud > .use-case-card[data-paper-bent="true"] { opacity: 0 !important; }