html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: "Noto Sans", sans-serif;
    overscroll-behavior-y: contain; /* 启用上下回弹效果 */
    overflow-x: hidden; /* 禁止水平滚动 */
}



body {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    overflow-y: auto;
    -webkit-backdrop-filter: blur(50px);
}
.text-container {
    width: 100%; /* 父容器充满宽度 */
    overflow-y: auto; /* 使其可滚动 */
}
/* General styles for text container */
.text {
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin: 20px auto; /* 内容居中 */
    padding: 20px;
    max-width: 768px; /* 限制最大宽度 */
    font-weight: 300; /* 标题加粗 */
}

/* Title styles */
.text .title {
    font-size: 56px; /* 标题字体大小 */
    font-weight: 600; /* 标题加粗 */
    color: #222; /* 标题颜色 */
    margin-bottom: 20px; /* 标题与内容间距 */
    text-align: left; /* 左对齐 */
}

/* Content section styles */
.text .content-section {
    margin-bottom: 20px; /* 段落间距 */
}

.text .content-section p {
    margin-bottom: 10px; /* 段落底部间距 */
}

/* Close Button Styles */
#close-button {
    position: fixed;
    bottom: 6%; /* 距离顶部 */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #000; /* 背景颜色 */
    color: #fff; /* 字体颜色 */
    font-size: 24px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999; /* 保证位于其他元素上方 */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* 添加阴影 */
    visibility: visible; /* 确保可见 */
    opacity: 1; /* 确保不透明 */
    transition: background-color 0.3s ease;

}

#close-button:hover {
    background-color: #333; /* 鼠标悬浮时的颜色 */
    cursor: pointer;
}

.language-toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* 通用按钮样式 */
.language-toggle {
    -webkit-appearance: none; /* 禁用 iOS Safari 默认按钮样式 */
    font-size: 10px;
    font-weight: 400;
    background-color: transparent;
    padding: 4px 10px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.1);;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: inline-block;
    width: 50px; /* 设置固定宽度来确保按钮大小一致 */
    height: 30px; /* 设置固定宽度来确保按钮大小一致 */
    text-align: center; /* 确保文字居中 */
}

/* 设置eng-toggle的左侧圆角，右侧直角 */
#eng-toggle {
    border-radius: 20px 0 0 20px; /* 左侧圆角，右侧直角 */
    border-right: 1px; /* 右边的边框 */
    color: #999;
}

/* 设置chinese-toggle的右侧圆角，左侧直角 */
#chinese-toggle {
    border-radius: 0 20px 20px 0; /* 右侧圆角，左侧直角 */
    border-left: 0; /* 左边的边框 */
    color: #999;
}

/* 默认显示英文内容 */
#english-content {
    display: block;
}

/* 默认隐藏中文内容 */
#chinese-content {
    display: none;
}

/* 激活状态下的按钮样式 */
.language-toggle.active {
    background-color: rgba(0, 0, 0, 0.1); /* 设置背景色为黑色，并带有透明度 */
    pointer-events: none; /* 禁用所有鼠标交互，包括hover效果 */
    cursor: default; /* 禁用鼠标悬停效果，设置光标为默认 */
    color: rgba(0, 0, 0, 0.1); /* 设置文字颜色为黑色并带有透明度 */
}

/* 鼠标悬浮时的按钮效果 */
.language-toggle:hover {
    background-color: transparent; /* 鼠标悬停时的颜色 */
    color: #000;
}

/* 激活状态下，按钮悬浮时的样式 */
.language-toggle.active:hover {
    background-color: rgba(0, 0, 0, 0.1); /* 设置背景色为黑色，并带有透明度 */
    color: rgba(0, 0, 0, 0.1); /* 保持激活状态下的文字颜色 */
    cursor: default; /* 禁用鼠标悬停效果 */
}
/* Logo 样式 */
.logo {
    position: relative;
    text-align: center;
    z-index: 10;
    margin-top: 14vh;
}

.logo .main {
    font-size: 56px;
    font-weight: 600;
    color: #000;
}

.logo .suffix {
    font-size: 56px;
    font-weight: 400;
    color: #000;
}

.logo .subtitle {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);
    margin-top: -2px;
}

.logo .button, .logo .outline-button {
    margin-top: 1vh;
    border-radius: 40px;
    padding: 8px 18px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.logo .button {
    background-color: transparent;
    color: #000;
    border: 1.5px solid #000;
    margin-left: 4px; /* 增加 More 按钮的右侧间距 */
}

.logo .outline-button {
    background-color: #000;
    color: #fff;
    border: 1.5px solid #000;
    cursor: pointer;
    margin-right: 4px; /* 增加 More 按钮的右侧间距 */
}

.logo .outline-button:hover {
    background-color: #2A2A2A;
    color: #fff;
    border: 1.5px solid #000;
    cursor: pointer;
}

.logo .button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1.5px solid #666;
    color: #666; /* 字体颜色设置为白色 */
    cursor: pointer;
}

/* 按钮置灰的样式 */
.button.disabled {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.2);
    cursor: not-allowed;
    pointer-events: none;
}

/* 清除 iOS 残留的 hover 状态 */
.button.disabled:hover,
.button.no-hover:hover {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.2);
    cursor: not-allowed;
}

/* 计时器容器 */
.timer-container {
    margin-top: 32%;
    margin-bottom: 2%;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9;
}

.timer-container img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.timer-container .timer {
    font-size: 9px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    line-height: 1;
}

/* Halo 效果 */
.halo {
    position: fixed;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(101, 238, 101, 0.5), rgba(101, 238, 101, 0));
    opacity: 0.8;
    filter: blur(60px);
    will-change: transform, opacity;
    z-index: -1; /* 保持在背景 */
}

.halo.green {
    background: radial-gradient(circle, rgba(101, 238, 101, 0.5), rgba(101, 238, 101, 0));
}

.halo.yellow {
    background: radial-gradient(circle, rgba(245, 255, 0, 0.5), rgba(245, 255, 0, 0));
}

.halo.orange {
    background: radial-gradient(circle, rgba(246, 169, 0, 0.5), rgba(246, 169, 0, 0));
}

.expand {
    animation: stretchExpand 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes stretchExpand {
    0% {
        transform: scaleY(0.8) scaleX(0.8);
        opacity: 0;
    }
    80% {
        transform: scaleY(1.2) scaleX(1.2);
        opacity: 0.9;
    }
    100% {
        transform: scaleY(1.2) scaleX(1.2);
        opacity: 1;
    }
}

/* 收缩动画 */
.shrink {
    animation: shrinkCollapse 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards, fadeOut 0.3s linear forwards;
}

/* 展开动画 */
.expand {
    animation: stretchExpand 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes shrinkCollapse {
    0% {
        transform: scaleY(1.2) scaleX(1.2); /* 初始放大 */
        opacity: 1;
    }
    100% {
        transform: scaleY(0.8) scaleX(0.8); /* 缩小 */
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes stretchExpand {
    0% {
        transform: scaleY(0.8) scaleX(0.8); /* 初始缩小 */
        opacity: 0;
    }
    80% {
        transform: scaleY(1.2) scaleX(1.2); /* 放大 */
        opacity: 0.9;
    }
    100% {
        transform: scaleY(1.2) scaleX(1.2); /* 保持放大 */
        opacity: 1;
    }
}

/* 针对图片底部固定位置 */
#ray-icon {
    transform-origin: bottom center; /* 保持底部固定 */
}

/* 文字渐显 */
.text-fade-in {
    animation: textFadeIn 0.2s ease-in forwards;
}

.text-fade-out {
    animation: textFadeOut 0.3s ease-out forwards;
}

@keyframes textFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes textFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(5px);
    }
}

/* 响应式设计部分 */
@media (max-width: 768px) {
    .logo {
        margin-top: 14vh;
    }
    .logo .main, .logo .suffix {
        font-size: 48px;
    }
    .logo .subtitle {
        margin-top:-2px;
        font-size: 2.8vw;
    }
    .logo .button,.logo .outline-button {
        font-size: 3.6vw;
        padding: 8px 20px;
    }
    .halo {
        filter: blur(30px);
    }
    .timer-container img {
        width: 46px;
        height: 46px;
    }
    .timer-container .timer {
        font-size: 10px;
        margin-bottom: 1%;
    }
    .text {
    font-family: "Noto Sans", sans-serif;;
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin: 20px auto; /* 内容居中 */
    padding: 20px;
    max-width: 90%; /* 限制最大宽度 */
    font-weight: 300; /* 标题加粗 */
}
    /* Title styles */
.text .title {
    font-size: 48px; /* 标题字体大小 */
}


}