*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html {
    font-size: 16px;
}

body{
    width:100%;
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:auto;


    /* 默认字体（英文优先） */
    font-family: "HarmonyOS Sans", "Inter", sans-serif; 
   
    background-image:url("../images/texture.jpg");

    background-repeat:repeat;

    background-size:
        clamp(800px, 120vw, 4200px)
        auto;

    position:relative;
}


/* ======================
   Logo
====================== */
.logo{
    position:fixed;
    top:calc(55px * var(--ui-scale));
    left:calc(65px * var(--ui-scale));

    z-index:1000;
    cursor: pointer;
    filter: drop-shadow(
        0 0 3px rgb(255, 255, 255)
    );
}

.logo img{
    width:calc(100px * var(--ui-scale));
    height:auto;
    display:block;
    transition: filter 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
}

.logo:hover img {
    filter: blur(2px) brightness(0) saturate(100%) invert(65%) sepia(20%) saturate(500%) hue-rotate(160deg);
    opacity: 0.7;
    transform: translateY(-2px);
}

/* ======================
   Nav
====================== */
nav{
    position:fixed;
    top:calc(55px * var(--ui-scale));
    right:calc(70px * var(--ui-scale));
    gap:calc(50px * var(--ui-scale));
    z-index:1000;
    display:flex;
    filter: drop-shadow(
        0 0 3px rgba(255, 255, 255)
    );

}

nav a{
    text-decoration:none;
    color:#000;
    font-size:calc(26px * var(--ui-scale));
    font-weight:400;
    transition: filter 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
}

nav a:hover{
    filter: blur(2px) brightness(0) saturate(100%) invert(65%) sepia(20%) saturate(500%) hue-rotate(160deg);
    opacity: 0.7;
    transform: translateY(-2px);
}

/* ======================
   Footer
====================== */
.footer-left{
    position:fixed;
    left:calc(50px * var(--ui-scale));
    bottom:calc(40px * var(--ui-scale));
    z-index:1000;
    line-height:1.8;
    font-size:calc(18px * var(--ui-scale));
    filter: drop-shadow(
        0 0 3px rgba(255, 255, 255)
    );
}

.footer-right{
    position:fixed;
    right:calc(50px * var(--ui-scale));
    bottom:calc(40px * var(--ui-scale));
    z-index:1000;
    display:flex;
    gap:calc(15px * var(--ui-scale));
    font-size:calc(24px * var(--ui-scale));
    filter: drop-shadow(
        0 0 3px rgba(255, 255, 255)
    );
}

.footer-left a{
    color:black;
    text-decoration:none;
    transition: filter 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
}

.footer-left a:hover{
    filter: blur(1.5px) brightness(0) saturate(100%) invert(65%) sepia(20%) saturate(500%) hue-rotate(160deg);
    opacity: 0.7;
    transform: translateY(-2px);
}

.footer-right span{
    cursor:pointer;
    color:#999;
    transition:.3s;
}

.footer-right span:hover{
    color:#000;
}

.footer-right .active{
    color:#000;
}

/* ======================
   Language System
====================== */


/* 英文模式 */

body.lang-en{

    font-family:
    "HarmonyOS Sans",
    "Inter",
    sans-serif;

}


body.lang-en .cn{

    display:none;

}


body.lang-en .en{

    display:block;

}



/* 中文模式 */

body.lang-cn{

    font-family:
    "Noto Sans SC",
    sans-serif;

}


body.lang-cn .en{

    display:none;

}


body.lang-cn .cn{

    display:block;

}


/* ===================================
   Tablet
=================================== */

@media (max-width:1200px){

    .logo{
        left:40px;
        top:40px;
    }

    nav{
        right:40px;
        top:40px;
        gap:30px;
    }

    nav a{
        font-size:22px;
    }

}


/* ===================================
   Mobile
=================================== */

@media (max-width:768px){

    .logo{

        left:20px;
        top:20px;
    }

    .logo img{
        width:45px;
    }

    nav{

        top:30px;
        right:15px;

        gap:12px;
    }

    nav a{

        font-size:14px;
    }

    .footer-left{

        left:20px;
        bottom:20px;

        font-size:12px;
    }

    .footer-right{

        right:20px;
        bottom:20px;

        font-size:18px;
    }

}


/* ======================
   Global Scale
====================== */

@media (max-width: 2560px){
    :root{
        --ui-scale: 0.9;
    }
}

@media (max-width: 1920px){
    :root{
        --ui-scale: 0.8;
    }
}

@media (max-width: 1440px){
    :root{
        --ui-scale: 0.7;
    }
}

@media (max-width: 768px){
    :root{
        --ui-scale: 1;
    }
}