:where(.screen-content[data-screen="laptop"]) {
    --screen-default-width: 800px;
    --screen-default-inset-top: 0px;
    --screen-default-inset-bottom: 0px;
}

/* the insets clear the notch and the home indicator */
:where(.screen-content[data-screen="phone"]) {
    --screen-default-width: 320px;
    --screen-default-inset-top: 36px;
    --screen-default-inset-bottom: 24px;
}

.screen-content {
    width: 100%;
    height: 100%;
    container-type: size;
    overflow: hidden;
}

/* lays the showcase out at --screen-width, then shrinks it into the real screen;
   hosts can set --screen-width or a fixed --screen-scale (1 keeps the real size) on any ancestor,
   and --screen-inset-top / -bottom to change the safe area showcases may pad themselves by */
.screen-content-scaler {
    /* tan(atan2(a, b)) is the unitless a / b, which calc() can't produce from two lengths */
    --screen-fit-scale: tan(atan2(100cqw, var(--screen-width, var(--screen-default-width))));
    --safe-area-inset-top: var(--screen-inset-top, var(--screen-default-inset-top));
    --safe-area-inset-bottom: var(--screen-inset-bottom, var(--screen-default-inset-bottom));
    width: calc(100cqw / var(--screen-scale, var(--screen-fit-scale)));
    height: calc(100cqh / var(--screen-scale, var(--screen-fit-scale)));
    transform: scale(var(--screen-scale, var(--screen-fit-scale)));
    transform-origin: 0 0;
}