body {
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: Arial, sans-serif;
}

/* 响应式容器系统 */
.Tape_Back_Layer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 60vw; /* 修改为70vw，所有元素将自动缩放 */
    --container-width: 60vw; /* 定义容器宽度变量 */
    --scale-factor: calc(60 / 90); /* 缩放因子：70vw / 90vw */
    --base-width: 90vw; /* 原始设计基准宽度 */
}

/* 如果需要恢复90vw，只需修改上面两个值 */
.Tape_Back_Layer.original-size {
    width: 90vw;
    --container-width: 90vw;
    --scale-factor: 1;
    --base-width: 90vw;
}

.Tape_Back_Layer img {
    width: 100%;
    height: auto;
}

.Tape_Front_Layer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: var(--container-width, 70vw); /* 使用容器宽度变量 */
}

.Tape_Front_Layer img {
    width: 100%;
    height: auto;
}

.Song_Title_Layer {
    position: absolute;
    color: black;
    font-size: calc(4vw * var(--scale-factor, 1));
    top: calc(36vw * var(--scale-factor, 1));
    left: calc(11vw * var(--scale-factor, 1));
    font-family: 'CustomFontSimplified', 'CustomFontTraditional', sans-serif;
}

@font-face {
    font-family: 'CustomFontSimplified';
    src: url('/Font/001.ttf') format('truetype');
}

@font-face {
    font-family: 'CustomFontTraditional';
    src: url('/Font/002.ttf') format('truetype'); /* 替换为繁体字库的路径 */
}

.Left_Tape_Reel {
    position: absolute;
    transform-origin: center;
    left: calc(8.2vw * var(--scale-factor, 1));
    top: calc(8.5vw * var(--scale-factor, 1));
    width: calc(36.35vw * var(--scale-factor, 1));
    height: calc(36.35vw * var(--scale-factor, 1));
}

.Left_Tape_Reel img {
    width: 100%;
    height: 100%;
}

.Right_Area {
    position: absolute;
    transform-origin: center;
    left: calc(45.3vw * var(--scale-factor, 1));
    top: calc(8.5vw * var(--scale-factor, 1));
    width: calc(36.35vw * var(--scale-factor, 1));
    height: calc(36.35vw * var(--scale-factor, 1));
}

.Left_Area {
    position: absolute;
    transform-origin: center;
    left: calc(8.2vw * var(--scale-factor, 1));
    top: calc(8.5vw * var(--scale-factor, 1));
    width: calc(36.35vw * var(--scale-factor, 1));
    height: calc(36.35vw * var(--scale-factor, 1));
}

.Left_Tape {
    position: absolute;
    transform-origin: center;
    left: calc(8.2vw * var(--scale-factor, 1));
    top: calc(8.5vw * var(--scale-factor, 1));
    width: calc(36.35vw * var(--scale-factor, 1));
    height: calc(36.35vw * var(--scale-factor, 1));
}

.Right_Tape img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* 使用父容器的宽度 */
    height: 100%; /* 使用父容器的高度 */
}

.Right_Tape_Reel {
    position: absolute;
    transform-origin: center;
    left: calc(45.3vw * var(--scale-factor, 1));
    top: calc(8.5vw * var(--scale-factor, 1));
    width: calc(36.35vw * var(--scale-factor, 1));
    height: calc(36.35vw * var(--scale-factor, 1));
}

.Right_Tape_Reel img {
    width: 100%;
    height: 100%;
}

.Right_Tape {
    position: absolute;
    transform-origin: center;
    left: calc(53.3vw * var(--scale-factor, 1));
    top: calc(16.5vw * var(--scale-factor, 1));
    width: calc(20.35vw * var(--scale-factor, 1));
    height: calc(20.35vw * var(--scale-factor, 1));
}