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

body {
    background-color: #0E0E13;
    color: #E8E8F6;
    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
}

body.no-scroll {
    overflow: hidden
}

.fireworks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -999
}

.icon {
    font-size: 0
}

img {
    display: block
}

.tag {
    font-size: 12px;
    line-height: 100%;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 9999px;
    white-space: nowrap
}

.magical {
    --circle-size: 600px;
    --inset: 1px;
    --border: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border);
    background-color: #141419
}

.magical::before,
.magical::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))
}

.magical::before {
    background: radial-gradient(var(--circle-size) circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.3), transparent 40%);
    z-index: -1
}

.magical::after {
    background: linear-gradient(180deg, rgba(78, 78, 100, 0.48) 0%, rgba(78, 78, 100, 0.2) 100%);
    z-index: -2
}

.magical.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(255, 255, 255, 0.01), transparent 40%)
}

.btn {
    --border: 9999px;
    background-image: radial-gradient(var(--circle-size) circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.06), transparent 40%)
}

.btn::before {
    background: radial-gradient(var(--circle-size) circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.4), transparent 40%)
}

.btn::after {
    background: linear-gradient(180deg, rgba(78, 78, 100, 0.68) 0%, rgba(78, 78, 100, 0.2) 100%)
}

.primary-btn {
    --circle-size: 100px;
    --border: 9999px;
    border-radius: 9999px;
    padding: 7px 20px;
    cursor: pointer;
    background-color: #6461F1
}

.primary-btn a {
    font-size: 13px;
    line-height: 22px;
    font-weight: 500;
    color: #E8E8F6;
    text-decoration: none
}

.primary-btn::after {
    background: linear-gradient(180deg, rgba(232, 232, 246, 0.68) 0%, rgba(232, 232, 246, 0.4) 100%)
}

.primary-btn:hover::before {
    background: radial-gradient(var(--circle-size) circle at var(--mouse-x) var(--mouse-y), #fff, transparent 40%)
}

.normal-btn {
    --circle-size: 100px;
    --border: 9999px;
    border-radius: 9999px;
    padding: 7px 20px;
    cursor: pointer
}

.normal-btn a {
    font-size: 13px;
    line-height: 22px;
    font-weight: 500;
    color: #E8E8F6;
    text-decoration: none
}

.btn-s {
    padding: 4px 16px
}

.btn-s a {
    font-size: 12px;
    line-height: 20px
}

.text-effect {
    -webkit-animation: focus-in-expand 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: focus-in-expand 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}

@-webkit-keyframes focus-in-expand {
    0% {
        letter-spacing: -0.5em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1
    }
}

@keyframes focus-in-expand {
    0% {
        letter-spacing: -0.5em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1
    }
}

.load-pro {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out
}

.load-pro.visible {
    opacity: 1;
    transform: translateY(0)
}

.head {
    position: fixed;
    padding: 0 40px;
    width: 100%;
    --height: 64px;
    height: var(--height);
    display: flex;
    justify-content: center;
    align-items: center;
    --mw: 968px;
    transition: all 0.3s ease;
    flex-direction: column;
    z-index: 100
}

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

.head .main-left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px
}

.head .main-left .logo {
    height: 24px
}

.head .main-left .tag-cooperate {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 5px 9px;
    color: #0E0E13;
    background: #E8E8F6;
    box-shadow: 0px 2px 16px 0px rgba(255, 255, 255, 0.24);
    border: 1px solid #fff
}

.head .main-left .tag-cooperate .breath-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #0E0E13;
    box-shadow: 0 0 8px #000;
    animation: breath 1s infinite alternate
}

@keyframes breath {
    0% {
        transform: scale(1);
        opacity: 0;
        box-shadow: 0 0 4px transparent
    }

    100% {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 16px #000
    }
}

.head #menu-expand {
    display: none
}

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

.head .menu li {
    --circle-size: 100px;
    border-radius: 9999px;
    padding: 4px 16px;
    cursor: pointer;
    font-size: 12px;
    line-height: 20px;
    color: #A8A8B6
}

.head .menu li.nav {
    font-weight: 500;
    color: #E8E8F6;
    background-color: #1F1F26
}

.head .menu li.nav::after {
    background: linear-gradient(180deg, rgba(232, 232, 246, 0.68) 0%, rgba(232, 232, 246, 0.4) 100%)
}

.head .menu .menu-expand-btn {
    padding: 7px
}

.head .menu .menu-expand-btn .menu-icon {
    width: 14px;
    height: 14px
}

.head .menu .menu-expand-btn .menu-icon::before {
    content: url(../assets/public/menu_icon.svg)
}

.head #menu-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100vw);
    height: calc(100vh);
    background: rgba(14, 14, 19, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    padding: 64px 40px
}

.head #menu-panel.active {
    opacity: 1;
    visibility: visible
}

.head #menu-panel .menu-panel-content {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(312px, 1fr));
    gap: 16px
}

.head #menu-panel .menu-panel-content li {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    color: #E8E8F6;
    width: 100%;
    background-color: #141419;
    border-radius: 12px;
    text-align: center;
    padding: 12px 40px;
    transition: all 0.3s;
    cursor: pointer
}

.head #menu-panel .menu-panel-content li:hover {
    background-color: #1F1F26;
    transition: all 0.3s
}

.head #menu-panel .menu-close-btn {
    position: fixed;
    top: 18px;
    right: 39px;
    padding: 7px;
    font-size: 0;
    background-color: #6461F1;
    border-radius: 9999px;
    transition: all .2s;
    cursor: pointer
}

.head #menu-panel .menu-close-btn svg {
    width: 14px;
    height: 14px;
    fill: #E8E8F6
}

.head #menu-panel .menu-close-btn:hover {
    transform: scale(1.2);
    transition: all .2s
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    --mw: 968px;
    padding: 60px 40px 20px 40px;
    font-size: 12px;
    line-height: 20px;
    color: #62616F
}

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

.footer .footer-content {
    width: 100%;
    max-width: var(--mw);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 4px
}

.footer .footer-content .copyright {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px
}

.footer .footer-content .friends {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px
}

.footer .footer-content a {
    transition: color .15s ease-in;
    color: #62616F
}

.footer .footer-content a:hover {
    color: #6461F1
}

.widget {
    display: flex;
    justify-content: center;
    align-items: center;
    --mw: 968px
}

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

.widget .shape-light {
    z-index: -99;
    position: fixed;
    bottom: -180px;
    width: 600px;
    height: 200px;
    border-radius: 9999px;
    background: rgba(100, 97, 241, 0.4);
    filter: blur(100px)
}

.widget .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, 0.8) 25%, #d9d9d9 50%, rgba(217, 217, 217, 0.8) 75%, rgba(217, 217, 217, 0) 100%);
    mask-image: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.8) 25%, #d9d9d9 50%, rgba(217, 217, 217, 0.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)
    }
}

.widget .shape-star .rising-stars {
    opacity: .7;
    pointer-events: none
}

.widget .shape-star .rising-stars div {
    background: transparent;
    border-radius: 50%
}

.widget .shape-star .rising-stars 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
}

.widget .shape-star .rising-stars 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
}

.widget .shape-star .rising-stars 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
}

.widget .shape-star .rising-stars-visible div {
    animation: risingStarsAnination linear infinite
}

.widget .shape-earth {
    position: fixed;
    z-index: -97;
    bottom: -1840px;
    width: 1920px;
    height: 1920px;
    border-radius: 9999px;
    background: #0E0E13;
    filter: blur(2px)
}

.widget-top {
    position: absolute;
    width: 100%;
    height: 512px;
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.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.4;
    z-index: -1;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%)
}

.index {
    display: flex;
    justify-content: center;
    align-items: center;
    --mw: 968px;
    flex-direction: column;
    justify-content: flex-start;
    padding: 128px 40px 60px 40px;
    min-height: calc(100vh - 100px)
}

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

.index .hello {
    display: flex;
    justify-content: center;
    align-items: center;
    --mw: 968px;
    width: 100%;
    max-width: var(--mw);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px
}

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

.index .hello .hello-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 680px
}

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

.index .hello .hello-left .title * {
    font-size: 32px;
    font-weight: 700
}

.index .hello .hello-left .title .title-hi {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(180deg, #E8E8F6 0%, rgba(232, 232, 246, 0.72) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.index .hello .hello-left .title .title-name {
    --bg: linear-gradient(90deg, #A29CD3 0%, #E8BFAC 100%);
    position: relative;
    background: var(--bg);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.index .hello .hello-left .hello-introduce {
    font-size: 14px;
    line-height: 24px;
    color: #62616F;
    margin-top: 20px
}

.index .hello .hello-left .hello-introduce span {
    font-size: 14px;
    line-height: 24px;
    color: #A8A8B6
}

.index .hello .hello-left .hello-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    margin-top: 32px
}

.index .hello .hello-left .hello-actions .glowing-border {
    --size-glowing-border: calc(100% + 1px);
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--size-glowing-border);
    height: var(--size-glowing-border);
    background-color: transparent;
    border-radius: 999px;
    z-index: -1
}

.index .hello .hello-left .hello-actions .glowing-border::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left;
    transform: rotate(0deg);
    width: 100%;
    height: 2rem;
    background-color: rgba(255, 255, 255, 0.8);
    mask: linear-gradient(transparent 0%, #fff 120%);
    animation: rotate 2.5s linear infinite
}

@keyframes rotate {
    to {
        transform: rotate(360deg)
    }
}

.index .hello .hello-right .eyes-container {
    display: flex;
    gap: 32px
}

.index .hello .hello-right .eyes-container .eye {
    position: relative;
    width: 64px;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 9999px
}

.index .hello .hello-right .eyes-container .eye .pupil {
    position: absolute;
    width: 64px;
    height: 64px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.index .hello .hello-right .eyes-container .eye-pic-one {
    background-image: url(../assets/index/eye_pic_one.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.index .hello .hello-right .eyes-container .eye-pic-two {
    background-image: url(../assets/index/eye_pic_two.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.index .main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    --mw: 968px;
    flex-direction: column;
    width: 100%;
    max-width: var(--mw);
    gap: 40px
}

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

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

.index .main-content .link-list .link-card {
    background-color: #141419;
    box-shadow: 0px 0px 8px 0px rgba(10, 10, 14, 0.4);
    --circle-size: 400px
}

.index .main-content .link-list .link-card a {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px;
    gap: 12px
}

.index .main-content .link-list .link-card a img {
    width: 40px;
    opacity: .6;
    transition: opacity .4s
}

.index .main-content .link-list .link-card a .info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    opacity: .8;
    transition: opacity .4s
}

.index .main-content .link-list .link-card a .info .info-title {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    background: linear-gradient(180deg, #E8E8F6 0%, rgba(232, 232, 246, 0.72) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.index .main-content .link-list .link-card a .info .info-desc {
    width: 100%;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #A8A8B6
}

.index .main-content .link-list .link-card a .icon-arrow {
    width: 14px;
    height: 14px;
    opacity: 0;
    transition: opacity .4s
}

.index .main-content .link-list .link-card a:hover {
    color: #6461F1
}

.index .main-content .link-list .link-card a:hover .info,
.index .main-content .link-list .link-card a:hover .icon-arrow,
.index .main-content .link-list .link-card a:hover img {
    opacity: 1;
    transition: opacity .4s
}

.index .main-content .power-list-container {
    position: relative;
    width: 100%;
    max-width: var(--mw);
    margin: 64px 0 24px 0;
    overflow: visible
}

.index .main-content .power-list-container::after {
    position: absolute;
    inset: 0;
    content: "";
    --gradient-spread: 100%;
    left: 0;
    pointer-events: none;
    background: linear-gradient(to left, transparent 0, rgba(78, 78, 100, 0.4) var(--gradient-spread), rgba(78, 78, 100, 0.4) calc(100% - var(--gradient-spread)), transparent), linear-gradient(to left, transparent 0, rgba(78, 78, 100, 0.4) var(--gradient-spread), rgba(78, 78, 100, 0.4) calc(100% - var(--gradient-spread)), transparent);
    background-size: 100% 1px, 100% 1px;
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat
}

.index .main-content .power-list-container::before {
    --dot-color: #E8E8F6;
    --dot-size: 4px;
    content: "";
    position: absolute;
    inset: calc(var(--dot-size)* -.5);
    pointer-events: none;
    background-image: radial-gradient(var(--dot-color) 50%, transparent 50%), radial-gradient(var(--dot-color) 50%, transparent 50%), radial-gradient(var(--dot-color) 50%, transparent 50%), radial-gradient(var(--dot-color) 50%, transparent 50%);
    background-size: var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size);
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat
}

.index .main-content .power-list-container .power-list {
    position: relative;
    display: grid;
    --columns: 8;
    grid-template-columns: repeat(var(--columns), fit-content(100%));
    column-gap: 8px;
    row-gap: 24px;
    padding: 40px 0
}

.index .main-content .power-list-container .power-list .power-card {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px
}

.index .main-content .power-list-container .power-list .power-card .power-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 40px
}

.index .main-content .power-list-container .power-list .power-card .power-container .card-img {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: no-repeat center;
    opacity: .8;
    filter: grayscale(1);
    transition: opacity .4s, filter .4s, transform .2s
}

.index .main-content .power-list-container .power-list .power-card .power-container .card-img::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    transition: none
}

.index .main-content .power-list-container .power-list .power-card .power-container .title {
    font-size: 13px;
    line-height: 24px;
    color: #A8A8B6;
    opacity: .8;
    text-wrap: nowrap;
    white-space: nowrap;
    transition: opacity .4s
}

.index .main-content .power-list-container .power-list .power-card .power-separator {
    position: relative;
    width: 64px;
    height: 40px;
    --line-color: rgba(78, 78, 100, 0);
    --circle-color: rgba(78, 78, 100, 0.24)
}

.index .main-content .power-list-container .power-list .power-card .power-separator::after {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background-image: linear-gradient(to right, var(--line-color), var(--line-color)), radial-gradient(16px circle at 50% 50%, transparent calc(50% - 2px), var(--circle-color) calc(50% - 1px), transparent 50%), radial-gradient(2px circle at 50% 50%, #fff calc(50% - 1px), transparent 50%);
    background-size: 100% 1px, auto auto, auto auto;
    background-repeat: no-repeat;
    background-position: 0 50%, 50% 50%, 50% 50%
}

.index .main-content .power-list-container .power-list .power-card:hover .title {
    opacity: 1;
    transition: opacity .4s
}

.index .main-content .power-list-container .power-list .power-card:hover .card-img {
    opacity: 1;
    transform: scale(1.1);
    filter: grayscale(0);
    transition: opacity .4s, filter .4s, transform .2s
}

.index .main-content .power-list-container .power-list .power-card:hover .card-img::after {
    animation: ripple 0.6s ease-out
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.6
    }

    50% {
        transform: scale(2);
        opacity: 0.3
    }

    100% {
        transform: scale(3);
        opacity: 0
    }
}

.index .main-content .power-list-container .power-list .load-item {
    opacity: 0;
    transform: translateY(16px);
    animation: fadeIn 0.2s ease-in-out forwards
}

.index .main-content .power-list-container .power-list .load-item:nth-child(1) {
    animation-delay: 0s
}

.index .main-content .power-list-container .power-list .load-item:nth-child(2) {
    animation-delay: 0.1s
}

.index .main-content .power-list-container .power-list .load-item:nth-child(3) {
    animation-delay: 0.2s
}

.index .main-content .power-list-container .power-list .load-item:nth-child(4) {
    animation-delay: 0.3s
}

.index .main-content .power-list-container .power-list .load-item:nth-child(5) {
    animation-delay: 0.4s
}

.index .main-content .power-list-container .power-list .load-item:nth-child(6) {
    animation-delay: 0.5s
}

.index .main-content .power-list-container .power-list .load-item:nth-child(7) {
    animation-delay: 0.6s
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.index .main-content .power-list-container .power-list .sticky-item {
    width: 64px;
    height: 74px;
    position: sticky;
    background: linear-gradient(270deg, #0E0E13 0%, rgba(14, 14, 19, 0.4) 100%);
    right: 0;
    opacity: 0;
    pointer-events: none
}

.index .main-content .power-list-container .power-list .sticky-item .loader {
    width: 8px;
    height: 12px;
    display: flex;
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.index .main-content .power-list-container .power-list .sticky-item .loader::before {
    content: "";
    flex: 1;
    background: #62616F;
    clip-path: polygon(0 10px, calc(100% - 15px) 10px, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 10px), 0 calc(100% - 10px));
    animation: arrow-loader .5s infinite alternate
}

@keyframes arrow-loader {
    0% {
        transform: scaleX(var(--s, 1)) translate(-4px)
    }

    100% {
        transform: scaleX(var(--s, 1)) translate(4px)
    }
}

.index .main-content .power-list-container .power-list::-webkit-scrollbar {
    display: none
}

.work {
    display: flex;
    justify-content: center;
    align-items: center;
    --mw: 968px;
    padding: 128px 40px 60px 40px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: calc(100vh - 100px)
}

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

.work .review-container {
    width: 100%;
    max-width: var(--mw);
    mask-image: linear-gradient(90deg, transparent, #0E0E13 20%, #0E0E13 80%, transparent);
    margin-bottom: 40px;
    overflow: hidden
}

.work .review-container .row-list {
    width: max-content;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden
}

.work .review-container .row-list .review-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background: linear-gradient(180deg, rgba(78, 78, 100, 0.24) 0%, rgba(78, 78, 100, 0.12) 100%);
    padding: 8px 16px 8px 8px;
    border-radius: 9999px;
    margin-right: 16px
}

.work .review-container .row-list .review-item img {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    margin-right: 8px;
    transition: filter .2s
}

.work .review-container .row-list .review-item .review-text {
    font-size: 13px;
    line-height: 22px;
    color: #A8A8B6;
    transition: color .2s
}

.work .review-container .row-list .hovered img {
    filter: blur(4px);
    transition: filter .2s
}

.work .review-container .row-list .hovered .review-text {
    color: #E8E8F6;
    transition: color .2s
}

.work .card-list {
    width: 100%;
    max-width: var(--mw);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start
}

.work .card-list .category-divider {
    width: 100%;
    height: 1px;
    background-image: radial-gradient(circle at center, #4E4E64 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: 40px 0
}

.work .card-list .card-list-category {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 16px;
    margin: 30px 0;
}

.work .card-list .card-list-category .item {
    --circle-size: 600px;
    border-radius: 12px;
    background-color: #141419;
    box-shadow: 0px 0px 8px 0px rgba(10, 10, 14, 0.4);
    align-content: start;
    flex-wrap: wrap;
    overflow: hidden;
    height: 500px;
}

.work .card-list .card-list-category .item a {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.work .card-list .card-list-category .item a .cover {
    position: relative;
    will-change: transform, filter;
    margin-bottom: -16px;
    mask-image: linear-gradient(180deg, transparent, #141419 0%, #141419 70%, transparent)
}

.work .card-list .card-list-category .item a .cover img {
    filter: brightness(0.6);
    transition: filter 0.2s, transform 0.4s;
    height: 500px;
}

.work .card-list .card-list-category .item a .cover .img-bg {
    position: absolute;
    top: 0;
    z-index: -1
}

.work .card-list .card-list-category .item a .text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    word-wrap: break-word;
    opacity: .8;
    transition: opacity .2s;
    padding: 20px 24px;
    justify-content: space-between;
    position: absolute;
    top: 82%;
    z-index: 999;
}



.work .card-list .card-list-category .item a .text .reading-btn {
    background: whitesmoke;
    border: 1px white solid;
    padding: 7px;
    border-radius: 30px;
    color: #333;
}

.work .card-list .card-list-category .item a .text-bg {
    height: 100px;
    filter: blur(50px);
    backdrop-filter: blur(50px)
}

.work .card-list .card-list-category .item a .text .title-area .title {
    display: flex;
    align-items: center;
    gap: 4px
}

.work .card-list .card-list-category .item a .text .title-area .title .name {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    background: linear-gradient(180deg, #E8E8F6 0%, rgba(232, 232, 246, 0.72) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.work .card-list .card-list-category .item a .text .title-area .title .name-emoji {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500
}

.work .card-list .card-list-category .item a .text .title-area .tag-web {
    color: #6F98FF;
    background: rgba(111, 152, 255, 0.1)
}

.work .card-list .card-list-category .item a .text .title-area .tag-assets {
    color: #cb55d2;
    background: rgba(203, 85, 210, 0.1)
}

.work .card-list .card-list-category .item a .text .title-area .tag-app {
    color: #D59A78;
    background: rgba(213, 154, 120, 0.1)
}

.work .card-list .card-list-category .item a .text .title-area .tag-2b {
    color: #57AC84;
    background: rgba(87, 172, 132, 0.1)
}

.work .card-list .card-list-category .item a .text .title-area .tag-other {
    color: #A8A8B6;
    background: rgba(168, 168, 182, 0.1)
}

.work .card-list .card-list-category .item a .text .desc {
    width: 100%;
    font-size: 14px;
    line-height: 24px;
    color: #A8A8B6
}

.work .card-list .card-list-category .item a:hover .text {
    opacity: .08 !important;
    transition: opacity .4s
}

.work .card-list .card-list-category .item a:hover .cover img {
    transform: translateY(-16px);
    filter: brightness(1);
    transition: filter 0.2s, transform 0.4s
}

.work .card-list .card-list-category .item a:hover .cover .img-bg {
    transform: translateY(-4px);
    filter: brightness(1);
    transition: filter 0.2s, transform 0.4s
}


.tool {
    display: flex;
    justify-content: center;
    align-items: center;
    --mw: 968px;
    padding: 128px 40px 60px 40px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: calc(100vh - 100px)
}

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

.tool .scroll-indicator {
    position: fixed;
    height: calc(100vh - 288px);
    width: 1px;
    top: 0;
    background: linear-gradient(to bottom, rgba(78, 78, 100, 0.4) 0%, rgba(78, 78, 100, 0) 100%);
    margin: 128px 0 160px 0
}

.tool .scroll-indicator .scroll-thumb {
    width: 1px;
    background: linear-gradient(to bottom, rgba(100, 97, 241, 0) 0%, #6461f1 100%)
}

.tool .scroll-indicator::after {
    --dot-color: #6461F1;
    --dot-size: 6px;
    content: "";
    position: absolute;
    inset: calc(var(--dot-size)* -.4);
    pointer-events: none;
    background-image: radial-gradient(var(--dot-color) 50%, transparent 50%), radial-gradient(var(--dot-color) 50%, transparent 50%), radial-gradient(var(--dot-color) 50%, transparent 50%), radial-gradient(var(--dot-color) 50%, transparent 50%);
    background-size: var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size);
    background-position: 0 100%;
    background-repeat: no-repeat
}

.tool .scroll-indicator::before {
    --dot-color: #E8E8F6;
    --dot-size: 4px;
    content: "";
    position: absolute;
    inset: calc(var(--dot-size)* -.4);
    pointer-events: none;
    background-image: radial-gradient(var(--dot-color) 50%, transparent 50%), radial-gradient(var(--dot-color) 50%, transparent 50%), radial-gradient(var(--dot-color) 50%, transparent 50%), radial-gradient(var(--dot-color) 50%, transparent 50%);
    background-size: var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size);
    background-position: 0 0;
    background-repeat: no-repeat
}

.tool .tool-list {
    position: relative;
    width: 100%;
    max-width: var(--mw);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px
}

.tool .tool-list .tool-list-item {
    width: 100%;
    display: flex;
    opacity: 0.4;
    transform: rotate(5deg);
    transition: all 0.3s ease
}

.tool .tool-list .tool-list-item:nth-child(odd) {
    flex-direction: row-reverse
}

.tool .tool-list .tool-list-item.active {
    opacity: 1;
    transform: rotate(0)
}

.tool .tool-list .tool-list-item .item {
    --circle-size: 600px;
    border-radius: 12px;
    background-color: #141419;
    box-shadow: 0px 0px 8px 0px rgba(10, 10, 14, 0.4);
    align-content: start;
    flex-wrap: wrap
}

.tool .tool-list .tool-list-item .item a .card {
    min-width: 444px;
    max-width: 444px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    transition: opacity .2s;
    opacity: .8
}

.tool .tool-list .tool-list-item .item a .card .card-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    padding-left: 8px
}

.tool .tool-list .tool-list-item .item a .card .card-left .title {
    display: flex;
    align-items: center;
    gap: 6px
}

.tool .tool-list .tool-list-item .item a .card .card-left .title .name {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    background: linear-gradient(180deg, #E8E8F6 0%, rgba(232, 232, 246, 0.72) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.tool .tool-list .tool-list-item .item a .card .card-left .title .name::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 24px;
    height: 28px;
    width: 120px;
    filter: blur(16px);
    background: linear-gradient(90deg, rgba(255, 98, 154, 0.2) 0%, rgba(113, 232, 246, 0.2) 100%);
    pointer-events: none
}

.tool .tool-list .tool-list-item .item a .card .card-left .title .link {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    background: linear-gradient(180deg, #E8E8F6 0%, rgba(232, 232, 246, 0.72) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    transition: opacity .2s
}

.tool .tool-list .tool-list-item .item a .card .card-left .time {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: #62616F
}

.tool .tool-list .tool-list-item .item a .card .card-left .desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #A8A8B6
}

.tool .tool-list .tool-list-item .item a .card .card-left .pic {
    padding: 8px 0;
    perspective: 280px;
    will-change: transform, filter
}

.tool .tool-list .tool-list-item .item a .card .card-left .pic img {
    width: 100%;
    max-width: 280px;
    border-radius: 6px;
    filter: brightness(0.8);
    transition: filter 0.2s, transform 0.4s
}

.tool .tool-list .tool-list-item .item a .card .logo {
    position: relative
}

.tool .tool-list .tool-list-item .item a .card .logo img {
    width: 40px;
    height: 40px
}

.tool .tool-list .tool-list-item .item a .card:hover {
    opacity: 1 !important;
    transition: opacity .4s
}

.tool .tool-list .tool-list-item .item a:hover .title .link {
    opacity: 1 !important;
    transition: opacity .4s
}

.tool .tool-list .tool-list-item .item a:hover .pic img {
    transform: rotateX(8deg) scale(0.96);
    filter: brightness(1);
    transition: filter 0.2s, transform 0.4s
}

.blog {
    display: flex;
    justify-content: center;
    align-items: center;
    --mw: 968px;
    padding: 128px 40px 60px 40px;
    flex-direction: row;
    align-items: flex-start;
    min-height: calc(100vh - 100px)
}

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

.blog .scroll-indicator {
    position: sticky;
    height: 128px;
    width: 1px;
    top: 128px;
    background: linear-gradient(to bottom, rgba(78, 78, 100, 0.4) 0%, rgba(78, 78, 100, 0) 100%);
    margin: 8px 92px 0 8px
}

.blog .scroll-indicator .scroll-thumb {
    width: 1px;
    background: linear-gradient(to bottom, rgba(100, 97, 241, 0) 0%, #6461f1 100%)
}

.blog .scroll-indicator::after {
    --dot-color: #6461F1;
    --dot-size: 6px;
    content: "";
    position: absolute;
    inset: calc(var(--dot-size)* -.4);
    pointer-events: none;
    background-image: radial-gradient(var(--dot-color) 50%, transparent 50%), radial-gradient(var(--dot-color) 50%, transparent 50%), radial-gradient(var(--dot-color) 50%, transparent 50%), radial-gradient(var(--dot-color) 50%, transparent 50%);
    background-size: var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size);
    background-position: 0 100%;
    background-repeat: no-repeat
}

.blog .scroll-indicator::before {
    --dot-color: #E8E8F6;
    --dot-size: 4px;
    content: "";
    position: absolute;
    inset: calc(var(--dot-size)* -.4);
    pointer-events: none;
    background-image: radial-gradient(var(--dot-color) 50%, transparent 50%), radial-gradient(var(--dot-color) 50%, transparent 50%), radial-gradient(var(--dot-color) 50%, transparent 50%), radial-gradient(var(--dot-color) 50%, transparent 50%);
    background-size: var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size);
    background-position: 0 0;
    background-repeat: no-repeat
}

.blog .blog-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 868px;
    gap: 64px
}

.blog .blog-list .blog-list-knowledge {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-gap: 16px
}

.blog .blog-list .blog-list-knowledge .link-card-item {
    background-color: #141419;
    box-shadow: 0px 0px 8px 0px rgba(10, 10, 14, 0.4);
    --circle-size: 400px
}

.blog .blog-list .blog-list-knowledge .link-card-item a {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px;
    gap: 12px
}

.blog .blog-list .blog-list-knowledge .link-card-item a .card-img {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: no-repeat center;
    opacity: .8;
    transition: opacity .4s
}

.blog .blog-list .blog-list-knowledge .link-card-item a .card-img::after {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    filter: blur(20px);
    background: inherit;
    background-size: 100%
}

.blog .blog-list .blog-list-knowledge .link-card-item a .info {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    opacity: .8;
    transition: opacity .4s
}

.blog .blog-list .blog-list-knowledge .link-card-item a .info .info-title {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    background: linear-gradient(180deg, #E8E8F6 0%, rgba(232, 232, 246, 0.72) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.blog .blog-list .blog-list-knowledge .link-card-item a .info .info-desc {
    width: 100%;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #A8A8B6
}

.blog .blog-list .blog-list-knowledge .link-card-item a .icon-arrow {
    width: 14px;
    height: 14px;
    opacity: 0;
    transition: opacity .4s
}

.blog .blog-list .blog-list-knowledge .link-card-item a:hover {
    color: #6461F1
}

.blog .blog-list .blog-list-knowledge .link-card-item a:hover .card-img,
.blog .blog-list .blog-list-knowledge .link-card-item a:hover .info,
.blog .blog-list .blog-list-knowledge .link-card-item a:hover .icon-arrow {
    opacity: 1;
    transition: opacity .4s
}

.blog .blog-list .blog-list-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.blog .blog-list .blog-list-item .blog-recommend {
    width: 100%;
    margin-bottom: 64px
}

.blog .blog-list .blog-list-item .blog-recommend a {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start
}

.blog .blog-list .blog-list-item .blog-recommend a .left-content {
    max-width: 232px;
    max-height: 196px;
    margin: -8px 0 -8px -1px;
    border-radius: 12px;
    background-color: #141419;
    box-shadow: 0px 0px 32px 0px rgba(10, 10, 14, 0.8);
    position: relative
}

.blog .blog-list .blog-list-item .blog-recommend a .left-content::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08))
}

.blog .blog-list .blog-list-item .blog-recommend a .left-content img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    filter: brightness(0.8);
    transition: filter 0.2s;
    object-fit: cover
}

.blog .blog-list .blog-list-item .blog-recommend a .right-content {
    width: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px
}

.blog .blog-list .blog-list-item .blog-recommend a .right-content .text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    opacity: .8;
    transition: opacity .4s
}

.blog .blog-list .blog-list-item .blog-recommend a .right-content .text .title-area {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.blog .blog-list .blog-list-item .blog-recommend a .right-content .text .title-area .title {
    display: flex;
    align-items: center;
    gap: 6px
}

.blog .blog-list .blog-list-item .blog-recommend a .right-content .text .title-area .title .name {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    background: linear-gradient(180deg, #E8E8F6 0%, rgba(232, 232, 246, 0.72) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: text-shadow .2s
}

.blog .blog-list .blog-list-item .blog-recommend a .right-content .text .title-area .title .link {
    opacity: 0;
    transition: opacity .2s, text-shadow .2s
}

.blog .blog-list .blog-list-item .blog-recommend a .right-content .text .title-area .title .name-emoji {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500
}

.blog .blog-list .blog-list-item .blog-recommend a .right-content .text .title-area .tag-text {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    font-style: italic;
    color: #62616F
}

.blog .blog-list .blog-list-item .blog-recommend a .right-content .text .desc {
    width: 100%;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    color: #A8A8B6;
    max-height: 48px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.blog .blog-list .blog-list-item .blog-recommend a .right-content .info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    opacity: .8;
    transition: opacity .4s
}

.blog .blog-list .blog-list-item .blog-recommend a .right-content .info .info-time {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: #62616F
}

.blog .blog-list .blog-list-item .blog-recommend a:hover .link,
.blog .blog-list .blog-list-item .blog-recommend a:hover .text,
.blog .blog-list .blog-list-item .blog-recommend a:hover .info {
    opacity: 1 !important;
    transition: opacity .4s
}

.blog .blog-list .blog-list-item .blog-recommend a:hover .text .name {
    text-shadow: 0 0 #6461F1
}

.blog .blog-list .blog-list-item .blog-recommend a:hover img {
    filter: brightness(1);
    transition: filter 0.2s
}

.blog .blog-list .blog-list-item .item {
    width: 100%
}

.blog .blog-list .blog-list-item .item .content-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    --mw: 968px;
    width: 100%;
    max-width: var(--mw);
    height: 1px;
    background-image: radial-gradient(circle at center, #4E4E64 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
}

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

.blog .blog-list .blog-list-item .item a {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.blog .blog-list .blog-list-item .item a .text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    opacity: .8;
    transition: opacity .4s
}

.blog .blog-list .blog-list-item .item a .text .title-area {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.blog .blog-list .blog-list-item .item a .text .title-area .title {
    display: flex;
    align-items: center;
    gap: 6px
}

.blog .blog-list .blog-list-item .item a .text .title-area .title .name {
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    background: linear-gradient(180deg, #E8E8F6 0%, rgba(232, 232, 246, 0.72) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: text-shadow .2s
}

.blog .blog-list .blog-list-item .item a .text .title-area .title .link {
    opacity: 0;
    transition: opacity .2s, text-shadow .2s
}

.blog .blog-list .blog-list-item .item a .text .title-area .tag-text {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    font-style: italic;
    color: #62616F
}

.blog .blog-list .blog-list-item .item a .text .desc {
    width: 100%;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    color: #A8A8B6
}

.blog .blog-list .blog-list-item .item a .info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    opacity: .8;
    transition: opacity .4s
}

.blog .blog-list .blog-list-item .item a .info .info-avatar {
    width: 12px;
    height: 12px
}

.blog .blog-list .blog-list-item .item a .info .info-name {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: #A8A8B6
}

.blog .blog-list .blog-list-item .item a .info .info-time {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: #62616F
}

.blog .blog-list .blog-list-item .item a:hover .link,
.blog .blog-list .blog-list-item .item a:hover .text,
.blog .blog-list .blog-list-item .item a:hover .info {
    opacity: 1 !important;
    transition: opacity .4s
}

.blog .blog-list .blog-list-item .item a:hover .text .name {
    text-shadow: 0 0 #6461F1
}

.book {
    display: flex;
    justify-content: center;
    align-items: center;
    --mw: 968px;
    padding: 128px 40px 60px 40px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: calc(100vh - 100px)
}

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

.book .book-list {
    width: 100%;
    max-width: var(--mw);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start
}

.book .book-list .category-divider {
    width: 100%;
    height: 1px;
    background-image: radial-gradient(circle at center, #4E4E64 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: 40px 0
}

.book .book-list .book-list-category {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 16px
}

.book .book-list .book-list-category .item {
    --circle-size: 600px;
    border-radius: 12px;
    background-color: #141419;
    box-shadow: 0px 0px 8px 0px rgba(10, 10, 14, 0.4);
    align-content: start;
    flex-wrap: wrap
}

.book .book-list .book-list-category .item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 64px 16px;
    width: 100%
}

.book .book-list .book-list-category .item a .book-item {
    width: 112px;
    height: 158px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 1
}

.book .book-list .book-list-category .item a .book-item .b-page {
    border: 1px solid #fff
}

.book .book-list .book-list-category .item a .book-item .b-wrapper {
    transform-origin: 0% 50%;
    position: absolute;
    width: 112px;
    height: 158px;
    background-size: cover;
    background-position: center;
    transform-style: preserve-3d;
    transition: 0.4s ease all;
    border-radius: 0 6px 6px 0
}

.book .book-list .book-list-category .item a .book-item .b-front {
    transform: perspective(1000px) rotateY(-30deg);
    box-shadow: inset 8px 0 8px rgba(255, 255, 255, 0.2);
    background-image: url("../assets/public/book_cover_slot.svg");
    background-size: cover;
    background-position: center;
    filter: brightness(0.6)
}

.book .book-list .book-list-category .item a .book-item .b-one {
    border-color: #62616F;
    transform: perspective(1000px) rotateY(-25deg);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start
}

.book .book-list .book-list-category .item a .book-item .b-one .b-one-title {
    font-size: 12px;
    letter-spacing: 2px;
    color: #A8A8B6;
    writing-mode: vertical-rl;
    padding: 8px
}

.book .book-list .book-list-category .item a .book-item .b-two {
    opacity: 0.16;
    transform: perspective(1000px) rotateY(-20deg)
}

.book .book-list .book-list-category .item a .book-item .b-three {
    opacity: 0.12;
    transform: perspective(1000px) rotateY(-15deg)
}

.book .book-list .book-list-category .item a .book-item .b-four {
    opacity: 0.08;
    transform: perspective(1000px) rotateY(-10deg)
}

.book .book-list .book-list-category .item a .book-item .b-back {
    opacity: 0.04;
    transform-origin: 50% 50%;
    transform: perspective(1000px) rotateY(0deg)
}

.book .book-list .book-list-category .item a:hover .b-front {
    transform: perspective(1000px) rotateY(-70deg);
    filter: brightness(1)
}

.book .book-list .book-list-category .item a:hover .b-one {
    transform: perspective(1000px) rotateY(-50deg)
}

.book .book-list .book-list-category .item a:hover .b-two {
    transform: perspective(1000px) rotateY(-40deg)
}

.book .book-list .book-list-category .item a:hover .b-three {
    transform: perspective(1000px) rotateY(-30deg)
}

.book .book-list .book-list-category .item a:hover .b-four {
    transform: perspective(1000px) rotateY(-20deg)
}

.about {
    display: flex;
    justify-content: center;
    align-items: center;
    --mw: 968px;
    flex-direction: column;
    padding: 128px 40px 60px 40px
}

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

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

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

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

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

.about .about-top .about-info-left {
    max-width: 696px
}

.about .about-top .about-info-left .introduce-desc {
    font-size: 14px;
    line-height: 24px;
    color: #A8A8B6
}

.about .about-top .about-info-left .introduce-desc a {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    text-decoration: underline;
    color: #A8A8B6;
    transition: color .15s ease-in
}

.about .about-top .about-info-left .introduce-desc a:hover {
    color: #6461F1
}

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

.about .about-top .about-info-right .contact-desc {
    font-size: 14px;
    line-height: 24px;
    color: #A8A8B6
}

.about .about-top .about-info-right .contact-desc .list {
    display: flex;
    flex-direction: row
}

.about .about-top .about-info-right .contact-desc .list .list-label {
    font-size: 14px;
    line-height: 24px
}

.about .about-top .about-info-right .contact-desc .list .list-value a {
    font-size: 14px;
    line-height: 24px;
    color: #A8A8B6;
    transition: color .15s ease-in;
    text-decoration: underline;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px
}

.about .about-top .about-info-right .contact-desc .list .list-value a:hover {
    cursor: pointer;
    color: #6461F1
}

.about .about-top .about-info-right .contact-desc .list .list-value .tooltip .tooltip-box {
    width: 160px;
    height: 160px;
    visibility: hidden;
    background-color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0px 4px 24px rgba(10, 10, 14, 0.12);
    position: absolute;
    top: 32px;
    z-index: 9999;
    opacity: 0;
    transition: opacity .4s
}

.about .about-top .about-info-right .contact-desc .list .list-value .tooltip .tooltip-box::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent white transparent;
    transform: translate(-50%, 0%)
}

.about .about-top .about-info-right .contact-desc .list .list-value .tooltip .tooltip-box img {
    width: 120px;
    height: 120px;
    border-radius: 4px
}

.about .about-top .about-info-right .contact-desc .list .list-value .tooltip:hover .tooltip-box {
    visibility: visible;
    opacity: 1
}

.about .about-top .about-info-right .contact-desc .list .copied {
    opacity: 0;
    color: #57AC84;
    transition: opacity .4s;
    margin-left: 4px
}

.about .about-top .about-info-right .resume-title {
    margin-bottom: 8px
}

.about .about-top .about-info-right .resume-desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.about .about-top .about-info-right .resume-desc .resume-desc-helptext {
    font-size: 12px;
    line-height: 20px;
    color: #62616F;
    margin-bottom: 16px
}

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

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

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

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

.about .about-middle .power .power-card {
    --circle-size: 400px;
    background-color: #141419;
    box-shadow: 0px 0px 8px 0px rgba(10, 10, 14, 0.4)
}

.about .about-middle .power .power-card a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px
}

.about .about-middle .power .power-card a .card-img {
    width: 32px;
    height: 32px;
    position: relative;
    left: -4px;
    background: no-repeat center;
    opacity: .8;
    transition: opacity .4s
}

.about .about-middle .power .power-card a .card-img::after {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    filter: blur(20px);
    background: inherit;
    background-size: 100%
}

.about .about-middle .power .power-card a .card-text {
    font-size: 13px;
    line-height: 20px;
    color: #A8A8B6;
    opacity: .8;
    transition: opacity .4s
}

.about .about-middle .power .power-card a:hover .card-text,
.about .about-middle .power .power-card a:hover .card-img {
    opacity: 1;
    transition: opacity .4s
}

.about .about-middle .power .power-card-number {
    --circle-size: 400px;
    background-color: #141419;
    box-shadow: 0px 0px 8px 0px rgba(10, 10, 14, 0.4)
}

.about .about-middle .power .power-card-number a {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px
}

.about .about-middle .power .power-card-number a .card-title {
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    background: linear-gradient(180deg, #E8E8F6 0%, rgba(232, 232, 246, 0.72) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .8;
    transition: opacity .4s
}

.about .about-middle .power .power-card-number a .card-text {
    font-size: 13px;
    line-height: 20px;
    color: #A8A8B6;
    opacity: .8;
    transition: opacity .4s
}

.about .about-middle .power .power-card-number a:hover .card-title,
.about .about-middle .power .power-card-number a:hover .card-text {
    opacity: 1;
    transition: opacity .4s
}

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

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

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

.about .about-bottom .experience .item .time {
    font-size: 14px;
    line-height: 24px;
    color: #A8A8B6
}

.about .about-bottom .experience .item .name {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.about .about-bottom .experience .item .name .company a {
    font-size: 14px;
    line-height: 24px;
    color: #A8A8B6;
    transition: color .15s ease-in
}

.about .about-bottom .experience .item .name .company a:hover {
    color: #6461F1
}

.about .about-bottom .experience .item .name .job {
    font-size: 12px;
    line-height: 20px;
    color: #62616F
}

.about .about-bottom .experience .item .project-experience {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.about .about-bottom .experience .item .project-experience .item {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.about .about-bottom .experience .item .project-experience .item .title {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    background: linear-gradient(180deg, #E8E8F6 0%, rgba(232, 232, 246, 0.72) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.about .about-bottom .experience .item .project-experience .item .desc {
    color: #A8A8B6
}

.about .about-bottom .experience .item .project-experience .item .desc li {
    font-size: 14px;
    line-height: 28px;
    list-style: circle
}

.about .about-bottom .experience .item .project-experience .item .desc li span {
    font-size: 14px;
    line-height: 28px;
    font-weight: 500;
    color: #6461F1
}

@media screen and (max-width: 640px) {
    .index .hello .hello-right {
        display: none
    }

    .blog .blog-list .blog-list-item .blog-recommend a {
        gap: 16px;
        flex-direction: column
    }

    .blog .blog-list .blog-list-item .blog-recommend a .left-content {
        max-width: 116px;
        max-height: 98px;
        margin: -8px 0 -8px 16px
    }

    .blog .blog-list .blog-list-item .blog-recommend a .right-content {
        padding: 16px;
        gap: 16px
    }

    .footer .footer-content {
        flex-direction: column;
        justify-content: flex-start
    }
}

@media screen and (max-width: 968px) {
    .head .main .menu {
        display: none
    }

    .head .main #menu-expand {
        display: block
    }

    .index .main-content .power-list-container .power-list {
        overflow-x: scroll;
        overflow-y: hidden
    }

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

    .about .about-top .about-info .about-info-left {
        max-width: var(--mw)
    }

    .about .about-middle .power .list-00,
    .about .about-middle .power .list-01 {
        grid-template-columns: 1fr 1fr
    }

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

    .blog .scroll-indicator,
    .tool .scroll-indicator {
        display: none
    }

    .tool .tool-list .tool-list-item .card,
    .tool .tool-list .active .card {
        min-width: calc(100vw - 80px) !important
    }
}