html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

/* ❗不再是4K画布 */
#image-layer{
    position: absolute;
    inset: 0;
}

.floating-image{
    position: absolute;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);

    cursor: grab;

    transform: rotate(calc(var(--r) * 1deg));
    transition: transform 3.5s ease;
}


.floating-image:active{
    cursor: grabbing;
}

@media (min-width: 768px){
    .floating-image:hover{
        transform: rotate(calc(var(--r) * 1deg + 2deg));
    }
}

.floating-image.active{
    z-index: 999;
    transform: rotate(calc(var(--r) * 1deg)) scale(1.03);
}

/* =====================
COMING PAGE
===================== */


.coming-container{

position:fixed;

top:50%;

left:50%;

transform:translate(-50%,-50%);

text-align:center;

font-size:36px;

font-weight:500;

letter-spacing:.05em;

}


.coming-container p{

margin:0;

}


.coming-container .cn{

display:none;

}