.apb-preview {
    margin-bottom: 16px;
}

.apb-preview-stage {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    isolation: isolate;
    --apb-base-mask: none;
    --apb-print-scale: 1;
    --apb-print-offset-x: 0px;
    --apb-print-offset-y: 0px;
    --apb-print-blend: multiply;
}

.apb-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    pointer-events: none;
}

.apb-layer.is-visible {
    display: block;
}

.apb-layer-base {
    z-index: 1;
}

.apb-layer-texture {
    z-index: 2;
    mix-blend-mode: multiply;
    -webkit-mask-image: var(--apb-base-mask);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: var(--apb-base-mask);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.apb-layer-print {
    z-index: 3;
    mix-blend-mode: var(--apb-print-blend);
    transform: translate(var(--apb-print-offset-x), var(--apb-print-offset-y)) scale(var(--apb-print-scale));
    transform-origin: center center;
    -webkit-mask-image: var(--apb-base-mask);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: var(--apb-base-mask);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}