@media screen and (max-width: 768px) {

    /* about */

	.about-info {
        flex-direction: column;
    }

    .list-00, .list-01 {
        grid-template-columns: 1fr 1fr !important;
    }

    .about-bottom .experience .item {
        grid-template-columns: none !important;
        grid-template-rows: 1fr !important;
    }

    /* blog */

    .blog-left {
        display: none;
    }

    /* head */

    .menu {
        display: none !important;
    }

    #menu-expand {
        display: block !important;
    }

    /* index */
    .hello::after {
        width: 320px !important;
        height: 320px !important;
    }

    /* all pages */

    .copyright span, .fillings, .friends {
        display: none !important; // 移动端隐藏底部友情链接与备案
    }

}

@media screen and (min-width: 769px) {
    #menu-panel {
        left: 100vw !important;
    }
}


* {
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    font-size: 12px;
    text-decoration: unset;
}

$color-brand-default: #6361DC;
$color-text-body-primary: #E8E8F6;
$color-text-body-secondary: #B3B3C1;
$color-text-body-tertiary: #62616F;
$color-fill-button: #1F1F26;
$color-fill-card: #141419;
$color-fill-bg: #0E0E13;
$color-white: #ffffff;
$color-start: #A29CD3;
$color-end: #E8BFAC;
$line-color: #4E4E64;
$head-bg: #191920;
$shadow: #0a0a0e;
$border-radius-default: 6px;
$border-radius-full: 9999px;
$card-shadow: 0px 0px 8px 0px rgba($shadow, 0.4);

body {
    background-color: $color-fill-bg;
    color: $color-text-body-primary;
    font-family: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

// 烟花粒子样式
.fireworks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block; // 如果你不想要鼠标点击烟花粒子特效，可以将其属性值改为“none”
    z-index: -999;
}

@mixin main-center {
    display: flex;
    justify-content: center;
    align-items: center;
    --mw: 968px;

    .main {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: var(--mw);
    }
}

@mixin mini-btn {
    border-radius: $border-radius-full;
    padding: 6px 16px;
    cursor: pointer;
    background-color: $color-fill-button;
    transition: .3s background ease-in-out;

    &.nav,
    &.nav::before {
        background-color: $color-brand-default;
    }

    // &:hover{
    //     background-color: $color-fill-button
    // }
}

.icon {
    font-size: 0;

    &.dark::before {
        content: url(../assets/public/skin_light.svg);
    }
    &.menu-icon::before {
        content: url(../assets/public/menu_icon.svg);
    }
}

//特殊效果
.magical {
    --circle-size: 600px;
    --inset: 1px;
    --border: $border-radius-default;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border);
    background-color: $color-fill-bg;

    &::before,
    &::after {
        content: '';
        position: absolute;
        width: calc(100% + var(--inset)*2);
        height: calc(100% + var(--inset)*2);
        border-radius: var(--border);
        inset: calc(0 - var(--inset));
    }

    &::before {
        background: radial-gradient(var(--circle-size) circle at var(--mouse-x) var(--mouse-y), rgba($color-white, .3), transparent 40%); /* hover border */
        z-index: -1;
    }

    &::after {
        background: linear-gradient(180deg, rgba($line-color, .48) 0%, rgba($line-color, .2) 100%); /* border */
        z-index: -2;
    }
    & .show{
        width: 100%;
        height: 100%;
        position: absolute;
        border-radius: var(--border);
        opacity: 0;
        pointer-events: none;
        background: radial-gradient(var(--circle-size) circle at var(--mouse-x) var(--mouse-y), rgba($color-white, .01), transparent 40%);/* hover fill */
    }
}

.btn {
    --border: $border-radius-full;
    background-image: radial-gradient(var(--circle-size) circle at var(--mouse-x) var(--mouse-y), rgba($color-white, .06), transparent 40%); /* hover fill */

        &::before {
            background: radial-gradient(var(--circle-size) circle at var(--mouse-x) var(--mouse-y), rgba($color-white, .4), transparent 40%); /* hover border */
        }

        &::after {
            background: linear-gradient(180deg, rgba($line-color, .68) 0%, rgba($line-color, .2) 100%); /* border */
        }
}

//头部
.head {
    position: fixed;
    padding: 0 40px;
    width: 100%;
    --height: 56px;
    height: var(--height);
    @include main-center;
    background: rgba($head-bg, .8);
    backdrop-filter: blur(4px);
    flex-direction: column;
    z-index: 100;

    .logo {
        height: 20px;
    }

    #menu-expand {
        display: none;
        &.active {
            pointer-events: none; /* 防止在动画期间再次点击 */
        }
        &.active + #menu-panel {
            left: 40px;
        }
        & > .menu-icon {
            transition: transform .5s;
        }
        .active #menu-expand > .menu-icon {
            transform: rotate(45deg);
        }
    }
    @keyframes goOut {
        0% {
            left: 40px;
        }
        100% {
            left: 100vw;
        }
    }

    .menu {
        display: flex;
        gap: 12px;

        li {
            --circle-size: 100px;
            @include mini-btn
        }

        .skin {
            width: 14px;
            padding: 6px 13px;
        }
    }

    #menu-panel {
        width: calc(100vw - 80px);
        position: absolute;
        top: 44px;
        left: 100vw;
        padding: 16px 24px;
        background: rgba($head-bg, .96);
        backdrop-filter: blur(4px);
        border-radius: 6px;
        box-shadow: $card-shadow;
        z-index: 101;

        .menu-panel-content {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 16px;
    
            li {
                --circle-size: 100px;
                @include mini-btn
            }
        }
    }

    blockquote {
        position: absolute;
        inset: calc(20px + var(--height)) 0 0;
        font-size: 0;
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 20px;
            background: url('../assets/public/head_bottom_line.svg') no-repeat center top;
            z-index: -1;
        }

        img {
            margin-bottom: 10px;
            animation: rotate 6s linear infinite;

            @keyframes rotate {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }
        }
    }
}

//尾部
.footer {
    padding: 60px 40px 20px 40px;
    font-size: 12px;
    line-height: 20px;
    color: $color-text-body-tertiary;

    .copyright {
        @include main-center;
        gap: 12px;

        a {
            transition: color .15s ease-in;
            color: $color-text-body-tertiary;

            &:hover {
                color: $color-brand-default;
            }
        }

        .friends {
            @include main-center;
            gap: 8px;
        }
    }
}

.widget {
    @include main-center;

    .shape-light {
        z-index: -99;
        position: fixed;
        bottom: -180px;
        width: 600px;
        height: 200px;
        border-radius: $border-radius-full;
        background: rgba($color-brand-default, .4);
        filter: blur(100px);
    }

    .shape-star {
        position: fixed;
        z-index: -98;
        bottom: 0;
        height: 150px;
        width: var(--mw);
        -webkit-mask-image: linear-gradient(180deg,rgba(217,217,217,0) 0%,rgba(217,217,217,.8) 25%,#d9d9d9 50%,rgba(217,217,217,.8) 75%,rgba(217,217,217,0) 100%);
        mask-image: linear-gradient(180deg,rgba(217,217,217,0) 0%,rgba(217,217,217,.8) 25%,#d9d9d9 50%,rgba(217,217,217,.8) 75%,rgba(217,217,217,0) 100%);
        -webkit-mask-size: cover;
        mask-size: cover;
        @keyframes risingStarsAnination {
            0% {
                transform: translateZ(0) translateY(0)
            }
    
            to {
                transform: translateZ(0) translateY(-2000px)
            }
        }
        .rising-stars {
            opacity: .7;
            pointer-events: none;
            div {
                background: transparent;
                border-radius: 50%
            }
            div:nth-child(1) {
                animation-duration: 100s!important;
                box-shadow: 136px 13273px #fff,347px 1735px #fff,813px 1674px #fff,1949px 440px #fff,1440px 41px #fff,437px 1122px #fff,406px 430px #fff,1014px 25px #fff,1330px 1616px #fff,1636px 1496px #fff,1358px 800px #fff,48px 857px #fff,900px 1821px #fff,906px 1975px #fff,832px 163px #fff,1911px 1480px #fff,576px 523px #fff,783px 1435px #fff,738px 1712px #fff,1822px 193px #fff,1168px 1172px #fff,480px 687px #fff,798px 337px #fff,1747px 824px #fff,1296px 1690px #fff,1277px 1786px #fff,1941px 1271px #fff,1925px 784px #fff,400px 1302px #fff,112px 882px #fff,1008px 1624px #fff,55px 1604px #fff,1143px 1555px #fff,1354px 1344px #fff,1687px 601px #fff,651px 617px #fff,984px 1737px #fff,505px 1689px #fff,634px 1460px #fff,770px 827px #fff,315px 833px #fff,192px 1677px #fff,1324px 580px #fff,1862px 1217px #fff,157px 1255px #fff,1265px 1949px #fff,259px 482px #fff,1925px 39px #fff,1823px 1401px #fff,172px 1227px #fff,1120px 662px #fff,621px 681px #fff,959px 1389px #fff,370px 367px #fff,1629px 754px #fff,117px 756px #fff,415px 19px #fff,1158px 1227px #fff,36px 322px #fff,315px 1172px #fff,1156px 1010px #fff,758px 828px #fff,1576px 1585px #fff,725px 1487px #fff,1987px 1199px #fff,832px 827px #fff,1162px 92px #fff,103px 1868px #fff,588px 198px #fff,695px 984px #fff,1256px 1513px #fff,29px 924px #fff,1991px 1022px #fff,317px 932px #fff,114px 1610px #fff,1073px 1420px #fff,1161px 1045px #fff,684px 312px #fff,250px 419px #fff,151px 76px #fff,1228px 400px #fff,1381px 202px #fff,1210px 207px #fff,951px 1633px #fff,1585px 1768px #fff,1187px 1462px #fff,231px 1455px #fff,1457px 1778px #fff,1604px 75px #fff,1952px 1575px #fff,1870px 10px #fff,1240px 1824px #fff,591px 554px #fff,1696px 112px #fff,1618px 662px #fff,860px 1971px #fff,899px 1140px #fff,1334px 285px #fff,1051px 732px #fff,267px 1737px #fff,1363px 965px #fff,1829px 1718px #fff,1966px 1063px #fff,979px 1908px #fff,1654px 1085px #fff,416px 1055px #fff,1758px 576px #fff,1604px 720px #fff,840px 143px #fff,852px 1385px #fff,411px 1808px #fff,992px 28px #fff,1461px 122px #fff,1110px 671px #fff,221px 1734px #fff,1886px 1139px #fff,1963px 1765px #fff,406px 456px #fff,461px 1710px #fff,524px 1305px #fff,905px 1265px #fff,731px 126px #fff,1748px 186px #fff,759px 1511px #fff,1502px 1174px #fff,163px 1326px #fff,1236px 416px #fff,963px 1543px #fff,509px 373px #fff,1965px 942px #fff,1621px 1614px #fff,211px 515px #fff,1064px 990px #fff,475px 715px #fff,1977px 366px #fff,1480px 1801px #fff,693px 701px #fff,944px 628px #fff,1870px 1324px #fff,1745px 442px #fff,753px 1087px #fff,1639px 620px #fff,1838px 1570px #fff,1945px 1028px #fff,1692px 1037px #fff,276px 440px #fff,668px 1787px #fff,440px 1541px #fff,1493px 199px #fff,1930px 1584px #fff,1856px 700px #fff,1161px 682px #fff,1671px 664px #fff,286px 1182px #fff,1933px 1388px #fff,743px 1367px #fff,849px 1823px #fff,136px 25px #fff,568px 102px #fff,659px 687px #fff,27px 211px #fff,1980px 602px #fff,383px 176px #fff,1124px 470px #fff,1143px 100px #fff,1744px 1751px #fff,689px 614px #fff,596px 1867px #fff,710px 883px #fff,637px 202px #fff,1372px 962px #fff,1595px 1650px #fff,1491px 1428px #fff,873px 235px #fff,1127px 582px #fff,700px 140px #fff,1470px 1395px #fff,1133px 1532px #fff,1736px 1749px #fff,1841px 228px #fff,529px 1790px #fff,1084px 1246px #fff,1365px 230px #fff,529px 304px #fff,528px 1689px #fff,1549px 1892px #fff,975px 1315px #fff,1924px 1909px #fff,423px 115px #fff,1198px 432px #fff,1081px 956px #fff,1890px 1360px #fff,872px 535px #fff,781px 630px #fff,1010px 197px #fff,651px 125px #fff,1569px 1159px #fff,233px 759px #fff,372px 139px #fff,742px 1233px #fff,302px 1514px #fff,1159px 879px #fff,1536px 213px #fff,1212px 49px #fff,897px 1653px #fff,1735px 765px #fff,1086px 410px #fff,609px 1933px #fff,127px 172px #fff,179px 1873px #fff,584px 299px #fff,861px 1050px #fff,400px 234px #fff,1401px 806px #fff,1086px 47px #fff,1735px 1844px #fff,1874px 1698px #fff,975px 720px #fff,164px 845px #fff,461px 66px #fff,894px 1102px #fff,151px 1968px #fff,258px 1303px #fff,366px 593px #fff,390px 1023px #fff,1296px 661px #fff,308px 285px #fff,554px 1926px #fff,1409px 527px #fff,1661px 316px #fff,101px 439px #fff,1051px 1323px #fff,1144px 1541px #fff,479px 16px #fff,1172px 911px #fff,1087px 1807px #fff,1699px 628px #fff,1859px 1056px #fff,571px 1977px #fff,137px 1578px #fff,906px 847px #fff,1071px 430px #fff,212px 323px #fff,353px 276px #fff,680px 316px #fff,1781px 1151px #fff,137px 1426px #fff,1270px 1679px #fff,696px 220px #fff,587px 184px #fff,704px 795px #fff,1646px 907px #fff,1546px 11px #fff,369px 1976px #fff,1199px 815px #fff,290px 913px #fff,159px 1921px #fff,955px 1406px #fff,748px 1132px #fff,1388px 1674px #fff,1390px 1925px #fff,961px 70px #fff,1015px 927px #fff,470px 64px #fff,1125px 684px #fff,615px 1839px #fff,1318px 1437px #fff,1338px 1130px #fff,295px 1857px #fff,1656px 1208px #fff,1550px 1250px #fff,595px 1523px #fff,943px 1812px #fff,976px 1048px #fff,175px 1883px #fff,641px 1066px #fff,1115px 758px #fff,1726px 1072px #fff,1403px 1085px #fff,1601px 935px #fff,221px 877px #fff,1318px 1484px #fff,1382px 1995px #fff,737px 1875px #fff,772px 1635px #fff,869px 1654px #fff,1179px 18px #fff,518px 695px #fff,691px 1963px #fff,1290px 1259px #fff,121px 1616px #fff,531px 1751px #fff,538px 968px #fff,1492px 1387px #fff,848px 1586px #fff,665px 1946px #fff,307px 984px #fff,593px 1790px #fff,282px 981px #fff,1383px 1886px #fff,1220px 1353px #fff,537px 1893px #fff,1228px 1085px #fff,1415px 532px #fff,660px 982px #fff,308px 1837px #fff,1644px 694px #fff,1137px 296px #fff,1010px 450px #fff,1405px 1366px #fff,1823px 1910px #fff,623px 1983px #fff,585px 716px #fff,1521px 888px #fff,334px 1235px #fff,989px 1957px #fff,1055px 1917px #fff,1012px 1921px #fff,502px 793px #fff,362px 394px #fff,437px 1451px #fff,49px 1224px #fff,1883px 326px #fff,235px 1679px #fff,355px 1148px #fff,204px 907px #fff,1405px 851px #fff,404px 986px #fff,126px 239px #fff,1311px 1960px #fff,1178px 804px #fff,692px 1467px #fff,523px 1043px #fff,259px 1128px #fff,940px 229px #fff,733px 590px #fff,845px 1397px #fff,64px 383px #fff,220px 1136px #fff,307px 48px #fff,1996px 1239px #fff,495px 322px #fff,1245px 1786px #fff,392px 26px #fff,1053px 835px #fff,68px 296px #fff,1165px 63px #fff,1992px 584px #fff,1947px 881px #fff,1012px 205px #fff,419px 1901px #fff,91px 667px #fff,558px 1692px #fff,129px 252px #fff,369px 428px #fff,241px 1865px #fff,289px 1345px #fff,1591px 1655px #fff,29px 585px #fff,489px 885px #fff,342px 307px #fff,589px 658px #fff,1069px 348px #fff,355px 690px #fff,1141px 483px #fff,299px 1211px #fff,217px 1040px #fff,266px 524px #fff,1151px 304px #fff,777px 1096px #fff,1166px 1726px #fff,1332px 819px #fff,986px 1727px #fff,87px 1949px #fff,1962px 83px #fff,133px 708px #fff,1603px 504px #fff,487px 1316px #fff,216px 863px #fff,877px 162px #fff,1234px 1181px #fff,1102px 1118px #fff,509px 475px #fff,621px 935px #fff,658px 589px #fff,665px 1606px #fff,878px 1542px #fff,864px 882px #fff,1070px 1310px #fff,1983px 1146px #fff,1673px 1885px #fff,1008px 351px #fff,1896px 494px #fff,1523px 1071px #fff,1424px 773px #fff,1077px 571px #fff,281px 602px #fff,19px 1135px #fff,852px 1826px #fff,1114px 1291px #fff,956px 257px #fff,1956px 1188px #fff,1779px 284px #fff,204px 613px #fff,1892px 1213px #fff,1787px 1914px #fff,1732px 695px #fff,1497px 375px #fff,1266px 1719px #fff,1668px 1242px #fff,931px 147px #fff,399px 1359px #fff,1626px 518px #fff,840px 1495px #fff,145px 926px #fff,924px 46px #fff,1907px 1649px #fff,953px 1435px #fff,1530px 373px #fff,320px 1346px #fff,1007px 581px #fff,897px 46px #fff,926px 1693px #fff,1187px 370px #fff,69px 939px #fff,64px 1548px #fff,66px 491px #fff,1871px 676px #fff,1240px 722px #fff,1223px 216px #fff,1743px 1566px #fff,1901px 1944px #fff,918px 583px #fff,285px 601px #fff,1303px 263px #fff,1156px 1288px #fff,1897px 61px #fff,463px 1533px #fff,98px 1153px #fff,1430px 1811px #fff,304px 651px #fff,722px 260px #fff,219px 1577px #fff,157px 112px #fff,1146px 1534px #fff,972px 230px #fff,529px 962px #fff,91px 947px #fff,410px 1245px #fff,1556px 586px #fff,591px 1038px #fff,1571px 892px #fff,236px 1129px #fff,976px 1915px #fff,903px 590px #fff,939px 521px #fff,697px 859px #fff,1192px 71px #fff,614px 366px #fff,1197px 1094px #fff,1433px 839px #fff,1689px 1700px #fff,1023px 1084px #fff,176px 1110px #fff,12px 830px #fff,1880px 1619px #fff,1914px 994px #fff,218px 987px #fff,1585px 517px #fff,1837px 502px #fff,1878px 1043px #fff,30px 837px #fff,1582px 1999px #fff,1698px 940px #fff,613px 266px #fff,1628px 29px #fff,1113px 180px #fff,239px 269px #fff,1903px 449px #fff,1788px 1095px #fff,51px 1761px #fff,421px 1073px #fff,353px 292px #fff,1612px 749px #fff,986px 601px #fff,450px 343px #fff,1386px 1341px #fff,204px 848px #fff,1527px 110px #fff,379px 1993px #fff,820px 1197px #fff,279px 1804px #fff,160px 1801px #fff,1475px 1135px #fff,1374px 1626px #fff,873px 1542px #fff,1637px 1435px #fff,470px 1761px #fff,628px 919px #fff,628px 574px #fff;
            }
            div:nth-child(2) {
                animation-duration:150s!important;
                box-shadow: 1046px 2770px #fff,584px 202px #fff,195px 1038px #fff,84px 741px #fff,466px 961px #fff,192px 609px #fff,704px 571px #fff,1498px 1059px #fff,21px 1214px #fff,643px 408px #fff,848px 514px #fff,420px 1928px #fff,866px 698px #fff,1071px 119px #fff,1284px 570px #fff,907px 89px #fff,1990px 137px #fff,768px 1886px #fff,1602px 623px #fff,223px 255px #fff,1224px 1955px #fff,1216px 1001px #fff,817px 1781px #fff,1586px 684px #fff,221px 71px #fff,1885px 1713px #fff,1441px 15px #fff,1946px 1649px #fff,437px 1773px #fff,1831px 657px #fff,1230px 220px #fff,906px 1681px #fff,906px 184px #fff,1689px 859px #fff,1655px 564px #fff,1900px 1354px #fff,378px 1964px #fff,985px 1685px #fff,1357px 999px #fff,1518px 1502px #fff,1068px 338px #fff,920px 1753px #fff,1589px 1108px #fff,1212px 1920px #fff,199px 596px #fff,172px 67px #fff,1104px 797px #fff,682px 571px #fff,228px 1285px #fff,401px 751px #fff,558px 1703px #fff,1382px 736px #fff,463px 1746px #fff,579px 1384px #fff,208px 1771px #fff,290px 881px #fff,408px 1189px #fff,1024px 768px #fff,247px 282px #fff,1254px 1274px #fff,592px 1785px #fff,460px 914px #fff,275px 429px #fff,991px 93px #fff,1961px 429px #fff,998px 1797px #fff,1363px 1258px #fff,1387px 611px #fff,1850px 482px #fff,401px 482px #fff,899px 966px #fff,1424px 1844px #fff,1555px 1899px #fff,625px 506px #fff,41px 219px #fff,958px 1518px #fff,1894px 717px #fff,1207px 807px #fff,183px 614px #fff,1146px 467px #fff,349px 1521px #fff,587px 1330px #fff,940px 1640px #fff,1167px 1990px #fff,1728px 1870px #fff,88px 336px #fff,1326px 944px #fff,1103px 117px #fff,1531px 1508px #fff,588px 1497px #fff,1193px 1036px #fff,475px 345px #fff,775px 731px #fff,1189px 411px #fff,1657px 108px #fff,828px 1788px #fff,622px 357px #fff,1441px 1292px #fff,1332px 361px #fff,979px 376px #fff,504px 412px #fff,1470px 290px #fff,1422px 1637px #fff,911px 1694px #fff,1304px 1729px #fff,1378px 890px #fff,181px 1238px #fff,166px 1011px #fff,570px 823px #fff,1842px 771px #fff,1495px 189px #fff,324px 1077px #fff,850px 883px #fff,1718px 1273px #fff,1559px 215px #fff,425px 254px #fff,114px 1855px #fff,1425px 253px #fff,1327px 477px #fff,1644px 234px #fff,851px 1060px #fff,384px 1151px #fff,78px 433px #fff,269px 847px #fff,11px 1426px #fff,1583px 31px #fff,1067px 48px #fff,1532px 544px #fff,1418px 923px #fff,1609px 1733px #fff,96px 1597px #fff,1818px 421px #fff,1059px 181px #fff,156px 1830px #fff,1565px 11px #fff,989px 287px #fff,827px 459px #fff,1730px 1155px #fff,688px 939px #fff,694px 6px #fff,360px 1041px #fff,1230px 1560px #fff,1228px 1637px #fff,207px 460px #fff,1869px 627px #fff,69px 872px #fff,438px 154px #fff,217px 721px #fff,141px 678px #fff,606px 1622px #fff,1836px 1505px #fff,568px 1817px #fff,1692px 901px #fff,1726px 1257px #fff,272px 77px #fff,1327px 405px #fff,833px 628px #fff,974px 782px #fff,828px 1085px #fff,1516px 57px #fff,1432px 279px #fff,1308px 608px #fff,419px 1365px #fff,989px 1354px #fff,343px 557px #fff,1787px 1617px #fff,609px 281px #fff,397px 635px #fff,330px 1483px #fff,1039px 1891px #fff,623px 390px #fff,849px 1113px #fff,774px 1584px #fff,339px 1374px #fff,910px 294px #fff,348px 1997px #fff,961px 1571px #fff,108px 1103px #fff,761px 1908px #fff,1612px 1543px #fff,1978px 1013px #fff,1420px 170px #fff,250px 157px #fff,760px 804px #fff,503px 1240px #fff,913px 1425px #fff,694px 541px #fff,999px 1757px #fff,1792px 865px #fff,521px 1962px #fff,892px 1943px #fff,1266px 744px #fff,1315px 121px #fff,957px 1880px #fff,1387px 334px #fff,101px 132px #fff,760px 1557px #fff,1100px 112px #fff,879px 173px #fff,1712px 1707px #fff,888px 28px #fff,33px 1189px #fff,1316px 1591px #fff,254px 1751px #fff,494px 1485px #fff,1654px 782px #fff,1983px 693px #fff,754px 1919px #fff,1116px 85px #fff,1417px 634px #fff,343px 657px #fff,481px 1867px #fff,805px 1831px #fff,213px 1734px #fff,1305px 225px #fff,1158px 1852px #fff,1335px 1897px #fff,995px 514px #fff,1297px 1704px #fff,732px 25px #fff,1190px 1980px #fff,515px 1537px #fff,1675px 639px #fff,1693px 1862px #fff,417px 1885px #fff,1303px 1332px #fff,1422px 259px #fff,1176px 1403px #fff,1477px 980px #fff,1960px 461px #fff,99px 980px #fff,1139px 418px #fff,1357px 487px #fff,1009px 1329px #fff,293px 355px #fff,301px 464px #fff,222px 138px #fff,307px 265px #fff,989px 856px #fff,182px 1885px #fff,1064px 1909px #fff,885px 155px #fff,403px 166px #fff,1540px 1180px #fff,310px 1519px #fff,777px 496px #fff,664px 1389px #fff,1950px 758px #fff,63px 1412px #fff,1247px 1151px #fff,365px 60px #fff,1793px 502px #fff,533px 320px #fff,927px 766px #fff,206px 340px #fff,1261px 292px #fff,1908px 1564px #fff,99px 50px #fff,1693px 1858px #fff,641px 1034px #fff,1063px 453px #fff,1973px 163px #fff,712px 600px #fff,264px 1682px #fff,1686px 289px #fff,1305px 745px #fff,30px 349px #fff,649px 1772px #fff,1032px 141px #fff,204px 1345px #fff,46px 289px #fff,173px 466px #fff,1369px 1116px #fff,528px 196px #fff,1355px 1117px #fff,1344px 1192px #fff,220px 304px #fff,1816px 1984px #fff,1903px 683px #fff,389px 934px #fff,79px 1352px #fff,1317px 1295px #fff,1169px 1389px #fff,1061px 914px #fff,1777px 1736px #fff,1859px 286px #fff,1479px 569px #fff,930px 1613px #fff,1892px 682px #fff,867px 1193px #fff,40px 1606px #fff,624px 1860px #fff,1829px 1897px #fff,1891px 1944px #fff,1633px 1642px #fff,71px 627px #fff,1334px 1548px #fff,1461px 1437px #fff,220px 547px #fff,334px 907px #fff,1512px 34px #fff,789px 64px #fff,190px 1169px #fff,358px 22px #fff,438px 115px #fff,1576px 248px #fff,117px 836px #fff,957px 1773px #fff,213px 1553px #fff,1211px 1094px #fff,1768px 1569px #fff,541px 725px #fff,1027px 1196px #fff,996px 677px #fff,1406px 1504px #fff,707px 1457px #fff,1704px 445px #fff,1403px 1557px #fff,1743px 223px #fff,1866px 1923px #fff,1137px 762px #fff,1566px 1760px #fff,1289px 1717px #fff,1397px 634px #fff,1286px 516px #fff,1179px 1503px #fff,1143px 1306px #fff,489px 1107px #fff,1663px 145px #fff,1553px 1813px #fff,1611px 1558px #fff,969px 946px #fff,243px 25px #fff,518px 117px #fff,1510px 12px #fff,1461px 1296px #fff,453px 697px #fff,726px 1082px #fff,1727px 410px #fff,1242px 1258px #fff,1847px 1331px #fff,1746px 1023px #fff,972px 1887px #fff,704px 453px #fff,424px 993px #fff,1437px 797px #fff,1947px 235px #fff,916px 1060px #fff,1034px 1354px #fff,723px 1738px #fff,447px 1609px #fff,167px 780px #fff,462px 1224px #fff,704px 1676px #fff,1880px 495px #fff,665px 1497px #fff,773px 1221px #fff,471px 771px #fff,549px 221px #fff,846px 242px #fff,638px 300px #fff,75px 492px #fff,856px 1803px #fff,1605px 1288px #fff,740px 11px #fff,1009px 1229px #fff,650px 1734px #fff,565px 1651px #fff,1314px 949px #fff,852px 1135px #fff,1742px 360px #fff,512px 487px #fff,965px 1638px #fff,619px 1818px #fff,982px 838px #fff,36px 1269px #fff,14px 542px #fff,1913px 1614px #fff,1231px 1455px #fff,950px 1539px #fff,1599px 124px #fff,854px 661px #fff,45px 810px #fff,1098px 425px #fff,1088px 579px #fff,100px 673px #fff,1729px 1110px #fff,35px 507px #fff,435px 708px #fff,893px 127px #fff,953px 1523px #fff,1067px 1352px #fff,1806px 376px #fff,738px 1173px #fff,676px 1910px #fff,405px 805px #fff,1289px 1838px #fff,1794px 677px #fff,1727px 1763px #fff,729px 181px #fff,417px 1509px #fff,402px 867px #fff,1047px 1577px #fff,1748px 619px #fff,815px 156px #fff,1668px 13px #fff,285px 1014px #fff,499px 1355px #fff,384px 819px #fff,364px 1484px #fff,968px 534px #fff,1935px 1915px #fff,662px 870px #fff,1837px 1960px #fff,1063px 1369px #fff,388px 271px #fff,1406px 1113px #fff,1909px 897px #fff,506px 101px #fff,680px 1579px #fff,1908px 1476px #fff,1065px 1308px #fff,892px 1806px #fff,1303px 1738px #fff,1112px 935px #fff,1112px 354px #fff,799px 1222px #fff,1131px 1922px #fff,341px 1281px #fff,744px 298px #fff,1519px 698px #fff,934px 1143px #fff,989px 584px #fff,1250px 161px #fff,49px 1336px #fff,1154px 1944px #fff,260px 1720px #fff,243px 963px #fff,1336px 834px #fff,1373px 578px #fff,1624px 146px #fff,493px 141px #fff,991px 1986px #fff,715px 465px #fff,1380px 373px #fff,1134px 284px #fff,1469px 1534px #fff,1074px 1672px #fff,836px 1225px #fff,1115px 1213px #fff,500px 509px #fff,350px 817px #fff,1352px 1204px #fff,530px 786px #fff,53px 906px #fff,414px 601px #fff,977px 552px #fff,447px 196px #fff,67px 548px #fff,837px 399px #fff,1786px 792px #fff,1681px 1843px #fff,1695px 847px #fff,726px 768px #fff,667px 1145px #fff,382px 395px #fff,502px 1182px #fff,1930px 100px #fff,492px 1356px #fff,221px 977px #fff,998px 848px #fff,482px 531px #fff,497px 239px #fff,1795px 681px #fff,1721px 1218px #fff,521px 349px #fff,1573px 1747px #fff,294px 1103px #fff,39px 235px #fff,1502px 1754px #fff,1918px 1587px #fff,1448px 604px #fff,583px 62px #fff,790px 1923px #fff,510px 344px #fff,165px 1091px #fff,1474px 1639px #fff,1577px 1452px #fff,1017px 99px #fff,1547px 679px #fff,852px 1216px #fff,83px 1818px #fff,1240px 1423px #fff,1122px 1475px #fff,418px 230px #fff,1989px 1326px #fff,1828px 1633px #fff,1412px 373px #fff,685px 1113px #fff,1909px 1468px #fff;
                opacity: .5
            }
            div:nth-child(3) {
                animation-duration:200s!important;
                box-shadow: 1858px 10327px #fff,1161px 1700px #fff,271px 1050px #fff,1378px 1738px #fff,1479px 1467px #fff,1866px 1558px #fff,802px 12px #fff,1322px 341px #fff,1593px 1458px #fff,1500px 710px #fff,1933px 1717px #fff,487px 1255px #fff,1547px 240px #fff,1460px 931px #fff,1725px 1308px #fff,69px 335px #fff,802px 1969px #fff,1621px 1871px #fff,1553px 113px #fff,1166px 124px #fff,1987px 79px #fff,180px 1271px #fff,466px 765px #fff,129px 1528px #fff,73px 117px #fff,1836px 1944px #fff,335px 125px #fff,145px 364px #fff,1864px 1974px #fff,525px 559px #fff,865px 876px #fff,1097px 828px #fff,1544px 1001px #fff,1362px 411px #fff,1218px 312px #fff,185px 1270px #fff,1273px 493px #fff,1241px 1593px #fff,1410px 1164px #fff,398px 1009px #fff,1700px 570px #fff,1985px 937px #fff,706px 958px #fff,651px 1650px #fff,765px 1675px #fff,1557px 316px #fff,779px 1365px #fff,1150px 581px #fff,251px 1600px #fff,1244px 906px #fff,912px 1051px #fff,733px 1393px #fff,1081px 847px #fff,592px 420px #fff,1820px 736px #fff,912px 807px #fff,1925px 711px #fff,1862px 1277px #fff,985px 1024px #fff,162px 1318px #fff,1714px 559px #fff,1588px 1205px #fff,763px 955px #fff,1760px 1228px #fff,756px 1980px #fff,1119px 382px #fff,1887px 1961px #fff,1869px 798px #fff,1105px 800px #fff,1110px 1166px #fff,1669px 1354px #fff,1014px 128px #fff,290px 692px #fff,1666px 102px #fff,249px 559px #fff,1874px 1811px #fff,1998px 1676px #fff,1728px 1882px #fff,1730px 736px #fff,890px 426px #fff,1388px 1047px #fff,701px 374px #fff,1542px 1736px #fff,781px 163px #fff,791px 809px #fff,1649px 438px #fff,1094px 1475px #fff,241px 382px #fff,1632px 1472px #fff,62px 1676px #fff,1154px 909px #fff,501px 1121px #fff,886px 526px #fff,1587px 1752px #fff,1247px 131px #fff,1800px 242px #fff,590px 1059px #fff,837px 1819px #fff,281px 1355px #fff,161px 1898px #fff,1465px 371px #fff,1578px 823px #fff,877px 1360px #fff,276px 1713px #fff,296px 522px #fff,804px 173px #fff,1793px 617px #fff,1622px 1824px #fff,237px 1068px #fff,1933px 545px #fff,1543px 1870px #fff,884px 578px #fff,125px 250px #fff,986px 882px #fff,1400px 1211px #fff,570px 1508px #fff,1449px 115px #fff,726px 914px #fff,1499px 1532px #fff,1308px 968px #fff,1876px 630px #fff,843px 606px #fff,144px 1085px #fff,878px 1315px #fff,1779px 1571px #fff,1145px 1510px #fff,1368px 1857px #fff,852px 627px #fff,1680px 641px #fff,1652px 1798px #fff,1303px 1056px #fff,1391px 45px #fff,365px 972px #fff,1031px 1860px #fff,1806px 1213px #fff,1249px 233px #fff,1126px 1513px #fff,1921px 1055px #fff,1490px 1176px #fff,641px 1781px #fff,1640px 854px #fff,542px 1083px #fff,106px 679px #fff,1423px 857px #fff,1254px 781px #fff,1775px 950px #fff,681px 239px #fff,756px 478px #fff,1199px 973px #fff,346px 1704px #fff,421px 911px #fff,339px 1168px #fff,586px 1762px #fff,801px 274px #fff,1901px 1693px #fff,914px 1706px #fff,976px 1023px #fff,787px 802px #fff,1057px 1614px #fff,438px 173px #fff,56px 1526px #fff,258px 1960px #fff,1756px 4px #fff,434px 1702px #fff,1590px 1362px #fff,607px 1053px #fff,1510px 1225px #fff,683px 262px #fff,184px 1205px #fff,1579px 891px #fff,131px 1755px #fff,1929px 761px #fff,1867px 1152px #fff,1875px 280px #fff,271px 1683px #fff,671px 1224px #fff,1836px 1011px #fff,1323px 1211px #fff,1149px 1503px #fff,57px 1496px #fff,149px 647px #fff,1927px 142px #fff,381px 1755px #fff,265px 1660px #fff,322px 1161px #fff,946px 304px #fff,1616px 1035px #fff,1283px 1371px #fff,1232px 1532px #fff,1869px 387px #fff,1101px 1882px #fff,1428px 1762px #fff,1666px 620px #fff,444px 739px #fff,1525px 1091px #fff,1372px 1186px #fff,1733px 898px #fff,1076px 72px #fff,538px 1382px #fff,424px 1995px #fff,571px 526px #fff,412px 521px #fff,1372px 564px #fff,1358px 1203px #fff,1427px 689px #fff,1599px 1873px #fff,589px 384px #fff,855px 739px #fff,1431px 1233px #fff,983px 1877px #fff,1174px 1911px #fff,1194px 337px #fff,206px 865px #fff,621px 423px #fff,934px 1528px #fff,853px 1336px #fff,722px 1341px #fff,1806px 1361px #fff,1077px 281px #fff,1298px 79px #fff,258px 389px #fff,666px 560px #fff,1898px 1083px #fff,869px 1141px #fff,345px 1500px #fff,1025px 1327px #fff,1953px 302px #fff,1709px 773px #fff,1565px 467px #fff,1937px 55px #fff,435px 510px #fff,833px 271px #fff,711px 1105px #fff,121px 1869px #fff,1934px 948px #fff,175px 387px #fff,899px 1971px #fff,1784px 1443px #fff,1080px 1296px #fff,1733px 1938px #fff,677px 949px #fff,998px 1514px #fff,455px 1734px #fff,318px 574px #fff,140px 84px #fff,1555px 1854px #fff,1244px 471px #fff,874px 1216px #fff,1590px 358px #fff,1251px 1027px #fff,855px 1210px #fff,540px 1026px #fff,1035px 1680px #fff,814px 1264px #fff,1852px 974px #fff,757px 1443px #fff,836px 22px #fff,1477px 1364px #fff,92px 1002px #fff,114px 1147px #fff,748px 1621px #fff,1293px 1083px #fff,1222px 40px #fff,1870px 210px #fff,943px 1762px #fff,340px 785px #fff,916px 1916px #fff,1993px 1791px #fff,1811px 556px #fff,1839px 1073px #fff,1193px 331px #fff,613px 35px #fff,1858px 1384px #fff,1730px 1678px #fff,1379px 787px #fff,1312px 73px #fff,231px 1475px #fff,903px 939px #fff,1037px 801px #fff,853px 631px #fff,1256px 861px #fff,1329px 685px #fff,1078px 115px #fff,229px 876px #fff,667px 1493px #fff,418px 674px #fff,558px 1881px #fff,1745px 633px #fff,1677px 676px #fff,1407px 616px #fff,1874px 67px #fff,276px 1509px #fff,1757px 543px #fff,280px 249px #fff,1738px 609px #fff,1908px 23px #fff,1677px 580px #fff,32px 1763px #fff,32px 447px #fff,1702px 1504px #fff,1190px 1477px #fff,215px 82px #fff,327px 407px #fff,1559px 1114px #fff,933px 668px #fff,451px 621px #fff,1929px 846px #fff,32px 774px #fff,1956px 1642px #fff,1475px 1964px #fff,676px 1033px #fff,1810px 1514px #fff,1518px 1712px #fff,1436px 1851px #fff,523px 1439px #fff,374px 1219px #fff,609px 1850px #fff,1515px 1935px #fff,54px 775px #fff,1775px 1760px #fff,638px 1563px #fff,319px 560px #fff,1624px 180px #fff,156px 879px #fff,997px 296px #fff,1015px 1008px #fff,1003px 1273px #fff,1916px 585px #fff,729px 692px #fff,576px 742px #fff,346px 1712px #fff,1632px 1017px #fff,1820px 1786px #fff,529px 1067px #fff,1641px 1899px #fff,1034px 1776px #fff,936px 1016px #fff,1372px 1163px #fff,1877px 117px #fff,1400px 1800px #fff,855px 1426px #fff,1333px 1970px #fff,686px 628px #fff,1594px 1839px #fff,1025px 475px #fff,103px 738px #fff,1984px 632px #fff,1471px 1777px #fff,761px 1601px #fff,1892px 277px #fff,1134px 1234px #fff,1811px 198px #fff,87px 704px #fff,1651px 1976px #fff,52px 1767px #fff,704px 1337px #fff,802px 191px #fff,1558px 1521px #fff,561px 1204px #fff,693px 921px #fff,97px 1563px #fff,855px 1409px #fff,458px 250px #fff,144px 1721px #fff,1783px 863px #fff,1595px 691px #fff,345px 308px #fff,1528px 1854px #fff,989px 130px #fff,1325px 1593px #fff,206px 749px #fff,836px 1724px #fff,1278px 208px #fff,232px 829px #fff,199px 638px #fff,1519px 215px #fff,14px 69px #fff,1677px 1092px #fff,1894px 579px #fff,958px 408px #fff,105px 377px #fff,896px 1369px #fff,1793px 864px #fff,279px 987px #fff,1431px 636px #fff,1255px 1430px #fff,1169px 79px #fff,920px 227px #fff,1211px 721px #fff,535px 552px #fff,51px 332px #fff,933px 146px #fff,377px 1335px #fff,249px 63px #fff,1535px 535px #fff,457px 616px #fff,1722px 813px #fff,998px 1478px #fff,308px 1395px #fff,1860px 1153px #fff,146px 1334px #fff,1200px 1599px #fff,1758px 861px #fff,1676px 1494px #fff,344px 1423px #fff,1281px 1775px #fff,1617px 942px #fff,190px 660px #fff,1783px 399px #fff,1364px 1781px #fff,1439px 1725px #fff,146px 1650px #fff,1209px 656px #fff,1181px 938px #fff,1710px 72px #fff,1176px 757px #fff,219px 1728px #fff,1271px 353px #fff,471px 665px #fff,1212px 1531px #fff,1805px 1687px #fff,1225px 1591px #fff,107px 532px #fff,7px 1980px #fff,1366px 89px #fff,1276px 574px #fff,1200px 1144px #fff,1886px 924px #fff,665px 1543px #fff,1418px 55px #fff,1755px 1828px #fff,1626px 48px #fff,697px 1868px #fff,901px 1643px #fff,21px 1696px #fff,932px 1471px #fff,1468px 1972px #fff,1682px 1786px #fff,323px 332px #fff,1798px 1661px #fff,827px 1124px #fff,1790px 1828px #fff,1117px 219px #fff,364px 1082px #fff,808px 1877px #fff,1542px 1281px #fff,1929px 704px #fff,1867px 1408px #fff,1850px 1264px #fff,299px 199px #fff,413px 1414px #fff,117px 1574px #fff,1361px 61px #fff,746px 1194px #fff,1719px 1803px #fff,374px 155px #fff,140px 570px #fff,1797px 850px #fff,1540px 509px #fff,1278px 603px #fff,1520px 1385px #fff,805px 207px #fff,1977px 1386px #fff,1452px 1361px #fff,937px 38px #fff,1294px 1911px #fff,1898px 1002px #fff,657px 972px #fff,1050px 641px #fff,1072px 255px #fff,438px 638px #fff,261px 1056px #fff,620px 1078px #fff,558px 1957px #fff,1767px 1500px #fff,182px 565px #fff,565px 48px #fff,227px 504px #fff,1483px 371px #fff,693px 236px #fff,766px 317px #fff,1305px 669px #fff,885px 537px #fff,1935px 44px #fff,1391px 1152px #fff,220px 1369px #fff,654px 1800px #fff,1974px 264px #fff,1930px 959px #fff,1197px 1905px #fff,543px 1035px #fff,156px 1975px #fff,1828px 1156px #fff,319px 242px #fff,1657px 83px #fff,682px 879px #fff,1293px 1716px #fff,1561px 739px #fff,1365px 927px #fff,1753px 812px #fff;
                opacity: .3
            };
        }
    
        .rising-stars-visible div {
            animation: risingStarsAnination linear infinite
        }
    }

    .shape-earth {
        position: fixed;
        z-index: -97;
        bottom: -1840px;
        width: 1920px;
        height: 1920px;
        border-radius: $border-radius-full;
        background: $color-fill-bg;
        filter: blur(2px);
    }
}

//首页
.index {
    @include main-center;
    flex-direction: column;
    justify-content: flex-start;
    padding: 96px 40px 60px 40px;
    min-height: calc(100vh - 100px); /* 防止项目数量不够一屏高度时 footer 上移 */

    @mixin H1 {
        font-size: 32px;
        font-weight: 700;
        background: linear-gradient(180deg, $color-text-body-primary 0%, rgba($color-text-body-primary, 0.72) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .hello {
        @include main-center;
        height: 400px;
        width: 100%;
        max-width: var(--mw);
        flex-direction: column;

        .title {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 8px;

            * {
                font-size: 32px;
                font-weight: 700;
            }

            .title-hi {
                @include H1;
            }

            .title-name {
                --bg: linear-gradient(90deg, $color-start 0%, $color-end 100%);
                position: relative;
                background: var(--bg);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;

                &:hover::after {
                    content: '';
                    position: absolute;
                    inset: auto 0 0;
                    width: 100%;
                    height: 1px;
                    background: var(--bg);
                }
            }
        }

        .hello-desc {
            height: 28px;
            color: $color-text-body-secondary;
            font-size: 16px;
            line-height: 28px;
            font-weight: 300;
            letter-spacing: 1px;
            margin: 24px 0 0 0;
        }

        &::after {
            content: '';
            position: absolute;
            width: 512px;
            height: 512px;
            background-image: radial-gradient(circle at center, rgba(255, 255, 255, .3) 1px, transparent 1px);
            background-size: 8px 8px;
            mask-image: radial-gradient(at center, #fff, transparent 72%);
            -webkit-mask-image: radial-gradient(at center, #fff, transparent 72%);
            opacity: 0.6;
            z-index: -1;
        }
    }

    .content-divider {
        @include main-center;
        width: 100%;
        max-width: var(--mw);
        height: 1px;
        background-image: radial-gradient(circle at center, $line-color 1px, transparent 1px);
        background-size: 6px 1px;
        background-repeat: repeat;
        mask-image: radial-gradient(at center, #fff, transparent 90%);
        -webkit-mask-image: radial-gradient(at center, #fff, transparent 90%);
    }

    .quickly-link {
        @include main-center;
        flex-direction: column;
        padding-top: 80px;
        width: 100%;
        max-width: var(--mw);

        .title-hi {
            @include H1;
        }

        .loader {
            margin: 32px 0 48px 0;
            width: 40px;
            height: 8px;
            --c:$color-brand-default 90deg,$color-fill-bg 0;
            background: 
                conic-gradient(from 135deg at top   ,var(--c)) 0 0,
                conic-gradient(from -45deg at bottom,var(--c)) 0 100%;
            background-size: calc(100%/4) 50%;
            background-repeat: repeat-x;
            animation: l12 2s infinite;

            @keyframes l12 {
                60%,100% {background-position: calc(100%/3) 0,calc(100%/-3) 100%}
            }
        }

        .link-card {
            @include main-center;
            flex-direction: column;
            gap: 16px;
            width: 100%;
            max-width: var(--mw);

            .link-card-list {
                width: 100%;
                max-width: var(--mw);
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                grid-gap: 16px;

                .link-card-item {
                    background-color: $color-fill-card;
                    box-shadow: $card-shadow;
                    --circle-size: 400px;

                    * {
                        transition: opacity .4s;
                    }

                    a {
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        padding: 16px;
                        gap: 12px;

                        &:hover {
                            color: $color-brand-default;
                            transition: all .15s ease-in;

                            .info,
                            .icon-arrow,
                            img {
                                opacity: 1;
                            }
                        }
                    }

                    img {
                        width: 40px;
                        opacity: .6;
                    }

                    .info {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 4px;
                        opacity: .8;

                        .info-title {
                            width: 100%;
                            font-size: 14px;
                            font-weight: 500;
                            line-height: 24px;
                            background: linear-gradient(180deg, $color-text-body-primary 0%, rgba($color-text-body-primary, .72) 100%);
                            background-clip: text;
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }

                        .info-desc {
                            width: 100%;
                            font-size: 12px;
                            font-weight: 400;
                            line-height: 20px;
                            color: $color-text-body-secondary;
                        }
                    }

                    .icon-arrow {
                        width: 14px;
                        height: 14px;
                        opacity: 0;
                    }
                }
            }
        }
    }
}

//项目页
.work {
    @include main-center();
    padding: 154px 40px 60px 40px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: calc(100vh - 100px); /* 防止项目数量不够一屏高度时 footer 上移 */

    .card-list {
        width: 100%;
        max-width: var(--mw);
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        grid-gap: 16px;

        .item {
            --circle-size: 600px;
            border-radius: $border-radius-default;
            background-color: $color-fill-card;
            box-shadow: $card-shadow;
            align-content: start;
            flex-wrap: wrap;

            a {
                display: flex;
                flex-direction: column;
                padding: 16px;
                gap: 16px;

                .dark{
                    position: relative;
                    font-size: 0;
                    &::after{
                        content: "";
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        left: 0;
                        // background: #0b0b0b;
                        // backdrop-filter: brightness(1);
                        // mix-blend-mode: plus-lighter;
                    }
                    /* >img{
                        backdrop-filter: brightness(1);
                        mix-blend-mode: plus-lighter;
                    } */
                    .cover {
                        width: 100%;
                        border-radius: 6px;
                        opacity: .9;
                        transition: opacity .2s;
                    }
                }
                

                .text {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 4px;
                    word-wrap: break-word;
                    opacity: .8;
                    transition: opacity .2s;

                    .title-area {
                        display: flex;
                        width: 100%;
                        justify-content: space-between;
                        align-items: center;
                        gap: 8px;

                        .title {
                            display: flex;
                            align-items: center;
                            gap: 4px;

                            .name {
                                font-size: 14px;
                                line-height: 24px;
                                font-weight: 500;
                                background: linear-gradient(180deg, $color-text-body-primary 0%, rgba($color-text-body-primary, 0.72) 100%);
                                background-clip: text;
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                            }

                            .link {
                                opacity: 0;
                                transition: opacity .2s;
                            }
                        }

                        .tag {
                            font-size: 12px;
                            line-height: 100%;
                            font-weight: 500;
                            padding: 4px 8px;
                            border-radius: $border-radius-full;
                        }

                        .tag-web {
                            $color: #57AC84;
                            color: $color;
                            background: rgba($color, 0.1);
                            border: 1px solid rgba($color, 0.16);
                        }

                        .tag-assets {
                            $color: #D59A78;
                            color: $color;
                            background: rgba($color, 0.1);
                            border: 1px solid rgba($color, 0.16);
                        }

                        .tag-app {
                            $color: #cb55d2;
                            color: $color;
                            background: rgba($color, 0.1);
                            border: 1px solid rgba($color, 0.16);
                        }

                        .tag-2b {
                            $color: #6F98FF;
                            color: $color;
                            background: rgba($color, 0.1);
                            border: 1px solid rgba($color, 0.16);
                        }

                        .tag-other {
                            $color: #939EA9;
                            color: $color;
                            background: rgba($color, 0.1);
                            border: 1px solid rgba($color, 0.16);
                        }
                    }

                    .desc {
                        width: 100%;
                        font-size: 12px;
                        line-height: 20px;
                        color: $color-text-body-secondary;
                    }
                }

                &:hover .cover,
                &:hover .text,
                &:hover .link {
                    opacity: 1 !important;
                    transition: opacity .4s;
                }
            }
        }
    }
}

//博客页
.blog {
    @include main-center();
    padding: 154px 40px 60px 40px;
    flex-direction: row;
    align-items: flex-start;
    min-height: calc(100vh - 100px); /* 防止项目数量不够一屏高度时 footer 上移 */

    .blog-left {
        min-width: 100px;
        padding-top: 10px;

        .blog-left-line {
            width: 6px;
            position: fixed;
        }
    }
    .blog-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 868px;

        .item {
            width: 100%;

            .content-divider {
                @include main-center;
                width: 100%;
                max-width: var(--mw);
                height: 1px;
                background-image: radial-gradient(circle at center, $line-color 1px, transparent 1px);
                background-size: 6px 1px;
                background-repeat: repeat;
                mask-image: radial-gradient(at center, #fff, transparent 90%);
                -webkit-mask-image: radial-gradient(at center, #fff, transparent 90%);
                margin: 24px 0;
            }

            a {
                display: flex;
                flex-direction: column;
                gap: 16px;

                .text {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 8px;
                    opacity: .8;
                    transition: opacity .2s;

                    .title-area {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        gap: 12px;

                        .title {
                            display: flex;
                            align-items: center;
                            gap: 6px;

                            .name {
                                font-size: 16px;
                                line-height: 28px;
                                font-weight: 500;
                                background: linear-gradient(180deg, $color-text-body-primary 0%, rgba($color-text-body-primary, 0.72) 100%);
                                background-clip: text;
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                transition: text-shadow .2s;
                            }

                            .link {
                                font-size: 16px;
                                line-height: 28px;
                                font-weight: 500;
                                color: $color-brand-default;
                                opacity: 0;
                                transition: opacity .2s;
                            }
                        }

                        .tag {
                            font-size: 14px;
                            line-height: 24px;
                            font-weight: 400;
                            color: $color-text-body-tertiary;
                        }
                    }

                    .desc {
                        width: 100%;
                        font-size: 14px;
                        line-height: 24px;
                        font-weight: 400;
                        color: $color-text-body-secondary;
                    }
                }

                .info {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-start;
                    gap: 8px;
                    opacity: .8;
                    transition: opacity .2s;

                    .info-avatar {
                        width: 12px;
                        height: 12px;
                    }

                    .info-name {
                        font-size: 12px;
                        line-height: 20px;
                        font-weight: 400;
                        color: $color-text-body-secondary;
                    }

                    .info-time {
                        font-size: 12px;
                        line-height: 20px;
                        font-weight: 400;
                        color: $color-text-body-tertiary;
                    }
                }

                &:hover .link,
                &:hover .text,
                &:hover .info {
                    opacity: 1 !important;
                    transition: opacity .4s;
                }
                &:hover .text .name{
                    text-shadow: 0 0 $color-brand-default;
                }
            }
        }
    }
}

//关于页内容区
.about {
    @include main-center();
    flex-direction: column;
    padding: 154px 40px 60px 40px;

    .about-top {
        max-width: var(--mw);
        display: flex;
        flex-direction: column;
    }

    .about-name {
        font-size: 32px;
        line-height: 100%;
        font-weight: 700;
        margin-bottom: 48px;
        background: linear-gradient(180deg, $color-text-body-primary 0%, rgba($color-text-body-primary, 0.72) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .about-info {
        display: flex;
        gap: 72px;
    }

    .about-info-title {
        font-size: 18px;
        line-height: 100%;
        font-weight: 500;
        margin-bottom: 24px;
        background: linear-gradient(180deg, $color-text-body-primary 0%, rgba($color-text-body-primary, 0.72) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .about-info-left {
        max-width: 696px;

        .introduce-desc {
            font-size: 14px;
            line-height: 24px;
            color: $color-text-body-secondary;

            a {
                font-size: 14px;
                line-height: 24px;
                font-weight: 500;
                text-decoration: underline;
                color: $color-text-body-secondary;
                transition: color .15s ease-in;

                &:hover {
                    color: $color-brand-default;
                }
            }
        }
    }

    .about-info-right {
        display: flex;
        flex-direction: column;
        gap: 40px;
        min-width: 200px;

        .contact-desc {
            font-size: 14px;
            line-height: 24px;
            color: $color-text-body-secondary;

            .list {
                display: flex;
                flex-direction: row;

                .list-label {
                    font-size: 14px;
                    line-height: 24px;
                }

                .list-value {
                    a {
                        font-size: 14px;
                        line-height: 24px;
                        color: $color-text-body-secondary;
                        transition: color .15s ease-in;
                        text-decoration: underline;
                        display: flex;
                        align-items: center;
                        gap: 4px;

                        &:hover {
                            cursor: pointer;
                            color: $color-brand-default;
                        }
                    }
                }

                .copied {
                    opacity: 0;
                    color: #15a675;
                    transition: opacity .4s;
                    margin-left: 4px;
                }
            }
        }

        .resume-title {
            margin-bottom: 8px;
        }

        .resume-desc {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            .resume-desc-helptext {
                font-size: 12px;
                line-height: 20px;
                color: $color-text-body-tertiary;
                margin-bottom: 16px;
            }

            .resume-btn {
                --circle-size: 100px;
                --border: $border-radius-full;
                border-radius: $border-radius-full;
                padding: 4px 16px;
                cursor: pointer;
                background-color: $color-brand-default;

                &::before {
                    background-color: $color-brand-default
                }

                a {
                    font-size: 12px;
                    line-height: 20px;
                    color: $color-text-body-primary;
                    text-decoration: none;
                }
            }
        }
    }

    .about-middle {
        width: 100%;
        max-width: var(--mw);
        display: flex;
        flex-direction: column;
        margin: 40px 0 80px 0;

        .power {
            display: flex;
            flex-direction: column;
            gap: 16px;

            .list-00 {
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                grid-gap: 16px;
            }

            .list-01 {
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
                grid-gap: 16px;
            }

            .power-card {
                --circle-size: 400px;
                background-color: $color-fill-card;
                box-shadow: $card-shadow;

                a {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 12px;
                    padding: 16px;

                    .card-img {
                        width: 32px;
                        height: 32px;
                        opacity: .8;
                        transition: opacity .2s;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: no-repeat center;

                        img {
                            z-index: 1;
                        }

                        &::after {
                            content: '';
                            position: absolute;
                            width: 32px;
                            height: 32px;
                            filter: blur(10px);
                            background: inherit;
                            background-size: 100%;
                        }
                    }

                    &:hover .card-img,
                    &:hover .card-text {
                        opacity: 1;
                        transition: opacity .4s;
                    }

                    .card-text {
                        font-size: 12px;
                        line-height: 20px;
                        color: $color-text-body-secondary;
                        opacity: .8;
                        transition: opacity .2s;
                    }
                }
            }
            .power-card-number {
                --circle-size: 400px;
                background-color: $color-fill-card;
                box-shadow: $card-shadow;

                a {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 12px;
                    padding: 16px;

                    &:hover .card-title,
                    &:hover .card-text {
                        opacity: 1;
                        transition: opacity .4s;
                    }

                    .card-title {
                        font-size: 18px;
                        line-height: 28px;
                        font-weight: 500;
                        background: linear-gradient(180deg, $color-text-body-primary 0%, rgba($color-text-body-primary, 0.72) 100%);
                        background-clip: text;
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        opacity: .8;
                        transition: opacity .2s;
                    }

                    .card-text {
                        font-size: 12px;
                        line-height: 20px;
                        color: $color-text-body-secondary;
                        opacity: .8;
                        transition: opacity .2s;
                    }
                }
            }
        }
    }

    .about-bottom {
        width: 100%;
        max-width: var(--mw);
        display: flex;
        flex-direction: column;

        .experience {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 48px;

            .item {
                display: grid;
                grid-template-columns: 1fr 1fr 3fr;
                gap: 16px;

                .time {
                    font-size: 14px;
                    line-height: 24px;
                    color: $color-text-body-secondary;
                }

                .name {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;

                    .company {
                        a {
                            font-size: 14px;
                            line-height: 24px;
                            color: $color-text-body-secondary;
                            transition: color .15s ease-in;

                            &:hover {
                                color: $color-brand-default;
                            }
                        }
                    }

                    .job {
                        font-size: 12px;
                        line-height: 20px;
                        color: $color-text-body-tertiary;
                    }
                }

                .project-experience {
                    display: flex;
                    flex-direction: column;
                    gap: 40px;

                    .item {
                        display: flex;
                        flex-direction: column;
                        gap: 16px;

                        .title {
                            font-size: 14px;
                            line-height: 24px;
                            font-weight: 500;
                            background: linear-gradient(180deg, $color-text-body-primary 0%, rgba($color-text-body-primary, 0.72) 100%);
                            background-clip: text;
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }

                        .desc {
                            color: $color-text-body-secondary;

                            li {
                                font-size: 14px;
                                line-height: 28px;
                                list-style: circle;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* tooltip */
.tooltip {
    position: relative;
    display: inline-block;

    .tooltip-box {
        width: 160px;
        height: 160px;
        visibility: hidden;
        background-color: $color-white;
        text-align: center;
        border-radius: 6px;
        padding: 20px;
        box-shadow: 0px 4px 24px rgba($shadow, 0.12);
        position: absolute;
        right: 0px;
        top: 32px;
        z-index: 9999;
        opacity: 0;
        transition: opacity .4s;

        &::after {
            content: " ";
            position: absolute;
            bottom: 100%;
            right: 10%;
            border-width: 8px;
            border-style: solid;
            border-color: transparent transparent white transparent;
        }

        img {
            width: 120px;
            height: 120px;
            border-radius: 4px;
        }
    }

    &:hover {
        .tooltip-box {
            visibility: visible;
            opacity: 1;
        }
    }
}