/* 
* @Author: anchen
* @Date:   2017-03-11 22:01:00
* @Last Modified by:   anchen
* @Last Modified time: 2017-08-26 20:51:22
*/

/*初始化*/
*,div,p,[class^='span'],.row-fluid{margin: 0;padding: 0;}
body{
    background-color: #ef2650;
    margin:0;
    padding: 0;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
u,i,b,strong,del,s{
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
ul , ol {
    list-style: none;
}
a{
    color:#fff;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
a:hover{
    color:#fff;
    text-decoration: none;
    cursor:pointer;
}
.row{
    width: 100%;
}
.span2{
    width: 16%;
}
.nav-right .span3 a{
    width: 150px;
}
.span3{
    width: 24.822%;
}
@media (max-width:1336px) and (min-width:1198px){
    .span3{
        width: 24.7999%;
    }
}
@media (max-width:1198px) and (min-width:1176px){
    .span3{
        width: 24.78%;
    }
}
@media (max-width:1176px) and (min-width:1086px){
    .span3{
        width: 24.77%;
    }
}
@media (max-width:1086px)  and (min-width:1050px){
    .span3{
        width: 24.77%;
    }
}
@media (max-width:1050px) and (min-width:1010px){
    .span3{
        width: 24.76%;
    }
}
@media (max-width:1010px) and (min-width:965px){
    .span3{
        width: 24.75%;
    }
}
@media (max-width:965px) and (min-width:940px){
    .span3{
        width: 24.74%;
    }
}
@media (max-width:940px) and (min-width:900px){
    .span3{
        width: 24.73%;
    }
}
@media (max-width:900px) and (min-width:870px){
    .span3{
        width: 24.72%;
    }
}
@media (max-width:870px) and (min-width:840px){
    .span3{
        width: 24.71%;
    }
}
@media (max-width:840px) and (min-width:810px){
    .span3{
        width: 24.7%;
    }
}
@media (max-width:810px) and (min-width:790px){
    .span3{
        width: 24.69%;
    }
}
@media (max-width:790px) and (min-width:750px){
    .span3{
        width: 24.67%;
    }
}
@media (max-width:750px) and (min-width:720px){
    .span3{
        width: 24.66%;
    }
}
@media (max-width:720px) and (min-width:700px){
    .span3{
        width: 24.65%;
    }
}
@media (max-width:700px) and (min-width:680px){
    .span3{
        width: 24.64%;
    }
}
@media (max-width:680px) and (min-width:669px){
    .span3{
        width: 24.63%;
    }
}
@media (max-width:669px) and (min-width:640px){
    .span3{
        width: 24.61%;
    }
}
@media (max-width:640px) and (min-width:620px){
    .span3{
        width: 24.6%;
    }
}
@media (max-width:620px) and (min-width:609px){
    .span3{
        width: 24.59%;
    }
}
@media (max-width:609px) and (min-width:589px){
    .span3{
        width: 24.58%;
    }
}
@media (max-width:589px) and (min-width:578px){
    .span3{
        width: 24.57%;
    }
}
@media (max-width:578px) and (min-width:566px){
    .span3{
        width: 24.56%;
    }
}
@media (max-width:566px) and (min-width:550px){
    .span3{
        width: 24.55%;
    }
}
@media (max-width:550px) and (min-width:540px){
    .span3{
        width: 24.54%;
    }
}
@media (max-width:540px) and (min-width:540px){
    .span3{
        width: 24.53%;
    }
}
@media (max-width:540px) and (min-width:530px){
    .span3{
        width: 24.52%;
    }
}
@media (max-width:530px) and (min-width:520px){
    .span3{
        width: 24.51%;
    }
}
@media (max-width:520px) and (min-width:519px){
    .span3{
        width: 24.5%;
    }
}
@media (max-width:519px) and (min-width:495px){
    .span3{
        width: 24.49%;
    }
}
@media (max-width:495px) and (min-width:485px){
    .span3{
        width: 24.48%;
    }
}
@media (max-width:485px) and (min-width:475px) {
    .span3{
        width: 24.47%;
    }
}
@media (max-width:475px) and (min-width:465px) {
    .span3{
        width: 24.46%;
    }
}
@media (max-width:465px) {
    .span3{
        width: 24.45%;
    }
}


/*导航*/
header {
    position: fixed;
    top:0;
    z-index: 1000;
    height: auto;
    width: auto;
    background: #ef2650;
    text-align: center;
}
.nav-right,.nav-left{
    /*background:#000;*/
     text-align: center;
}
.nav-left{
    float: left;
}
.row-fluid .span8{
    /*text-align: right;*/
}
.row-fluid .span3 {
    width: 14.404255%;
}
header .nav-right{
    float: right;
    /*margin-right: 12px;*/
    /*text-align: right;*/
}
.row-fluid .span3{
    width: 16%;
}
header .nav-right li.span3{
    height:40px;
    padding: 0;
    margin:0;
    color:#fff;
    line-height: 40px;
    /*text-align: right;*/
}
header .nav-right li a{
    display:inline-block;
    width: 100%;
}
header .nav-right li a span{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    -o-background-size:cover;
    -ms-background-size:cover;
    -moz-background-size:cover;
    -khtml-background-size:cover;
    -webkit-background-size:cover;
            background-size:cover;
}
header .nav-right li:nth-child(3) a span{
    background:url(../img/jlt-liangxifnagshi.png) no-repeat 0px 0;
    -o-background-size:cover;
    -ms-background-size:cover;
    -moz-background-size:cover;
    -khtml-background-size:cover;
    -webkit-background-size:cover;
            background-size:cover;
}
header .nav-right li:nth-child(4) a span{
    background:url(../img/jlt-liangxifnagshi.png) no-repeat -45px 0;
    -o-background-size:cover;
    -ms-background-size:cover;
    -moz-background-size:cover;
    -khtml-background-size:cover;
    -webkit-background-size:cover;
            background-size:cover;
}
header .nav-right li:nth-child(5) a span{
    background:url(../img/jlt-liangxifnagshi.png) no-repeat -88px 0;
    -o-background-size:cover;
    -ms-background-size:cover;
    -moz-background-size:cover;
    -khtml-background-size:cover;
    -webkit-background-size:cover;
            background-size:cover;
}
header .nav-right li:nth-child(6) a span{
    background:url(../img/jlt-liangxifnagshi.png) no-repeat -133px 0;
    -o-background-size:cover;
    -ms-background-size:cover;
    -moz-background-size:cover;
    -khtml-background-size:cover;
    -webkit-background-size:cover;
            background-size:cover;
}
header .nav-right li a i{
    font-size: 12px;
    margin-left: 5px;
}
@media (max-width: 556px) { 
    .nav-right,.nav-left{
        display:none;
    }
 }

/*cention*/
section{
    background:#eef1f6;
    margin:10px 10px;
    height: auto;
    overflow: hidden;
    margin-bottom:130px;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -khtml-box-sizing:border-box;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
}
section .section1{
    height: 500px;
    min-height: 500px;
    border-bottom: 3px dotted #d1d1d1;
    position: relative;
    clear:both;
}
.logo{
    width:135px;
    margin:0 auto;
    padding-top: 60px;
}
.logo img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
}
.del-ins{
    height: 100px;
    min-height: 100px;
    padding: 20px;
    margin-top: 20px;
    font-size: 3em;
    font-weight: 800;
    text-align: center;
    line-height: 30px;
    /*background:#ccc;*/
}
.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

mark {
    background:none;
    border-bottom:3px solid red;
}

#ico ul li [class^='ico-img']{
    display:inline-block;
    width: 2em;
    height: 2em;
    background:url(../img/jlt-liangxifnagshi.png) no-repeat -35px 0;
    background-size:cover;
    vertical-align: middle;
}
#ico ul li .ico-img2{
    background:url(../img/jlt-liangxifnagshi.png) no-repeat -93px 0;
    background-size:cover;
    vertical-align: middle;
}
#ico ul li .ico-img3{
    background:url(../img/jlt-liangxifnagshi.png) no-repeat -156px 0;
    background-size:cover;
    vertical-align: middle;
}
#ico ul li .ico-img4{
    background:url(../img/jlt-liangxifnagshi.png) no-repeat -220px 0;
    background-size:cover;
    vertical-align: middle;
}

#ico {
    position: absolute;
    bottom:20px;
    width: 100%;
    margin:0 auto;
}
#ico ul{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:0;
    flex-wrap:nowrap;
    width:auto;
    max-width:none;
    margin:0 auto;
}
#ico ul li i{
    display:inline-block;
    font-size: 1em;
    color:#5a5a5a;
    /*line-height: 30px;*/
    margin-left: 5px;
 }  
#ico ul li{
    float: left;
    padding:0;
    text-align: center;
    cursor:pointer;
}
#ico ul li.contact-item{
    display:block;
    align-items:initial;
    justify-content:initial;
    min-width:0;
}

#ico .span2,.span3{
    position: relative;
}
#ico .span2 [class^='shuomin'],#header .span3 [class^='shuomin']{
    background:#222222;
    color:#fff;
    text-align: center;
    position: absolute;
    top:-110px;
    left:50%;
    border-radius:5px;
    padding: 10px;
    z-index: 200;
    display:none;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
}
#header .span3 [class^='shuomin']{
    top:53px;
    background:#141540;
}
#ico ul li:hover [class^='shuomin'],#header ul li:hover [class^='shuomin']{
    display:block;
}

body.detail-page .zhuoping1 .title h3{
    text-align:center;
}
#ico .span2 [class^='shuomin'] span,#header .span3 [class^='shuomin'] span{
    position: absolute;
    left:50%;
    bottom:-8px;
    width: 16px;
    height: 16px;
    background:#222;
    z-index: -100;
    margin-left: -8px;
    -webkit-transform:rotate(45deg);
           -moz-transform:rotate(45deg);
            -ms-transform:rotate(45deg);
             -o-transform:rotate(45deg);
                transform:rotate(45deg);
}
#header .span3 [class^='shuomin'] span{
    top:-8px;
    background:#141540;
}
#ico .span2 .shuomin1,#header .span3 .shuomin1{
    width: 90px;
    height: 90px;
    padding: 5px;
    left:16px;
}
#ico .span2 .shuomin2,#header .span3 .shuomin2{
    width: 151px;
    height: 25px;
    top: -55px;
    left:-16px;
    line-height: 25px;
}
#header .span3 .shuomin2{
   top: 55px;
}
#ico .span2 .shuomin2 span,#header .span3 .shuomin2 span{
    left:75px;
    bottom:-8px;
    width: 16px;
    height: 16px;
}
#header .span3 .shuomin2 span{
    bottom:8px;
}
#ico .span2 .shuomin3,#header .span3 .shuomin3{
    width: 83px;
    height: 25px;
    top: -55px;
    left:-16px;
    line-height: 25px;
}
#header .span3 .shuomin3{
    top: 55px;
}
#ico .span2 .shuomin3 span,#header .span3 .shuomin3 span{
    left:41px;
    bottom:-8px;
    width: 16px;
    height: 16px;
}
#header .span3 .shuomin3 span{
    bottom:8px;
}
#ico .span2 .shuomin4,#header .span3 .shuomin4{
    width: 150px;
    height: 25px;
    top: -55px;
    left: -50px;
    line-height: 25px;
}
#ico .span2 .shuomin5,#header .span3 .shuomin5{
    width: 160px;
    height: 25px;
    top: -55px;
    line-height: 25px;
}
#ico .span2 .shuomin6,#header .span3 .shuomin6{
    width: 170px;
    height: 25px;
    top: -55px;
    line-height: 25px;
}
#header .span3 .shuomin4{
    top: 55px;
}
#ico .span2 .shuomin4 span,#header .span3 .shuomin4 span{
    left:79px;
    bottom:-8px;
    width: 16px;
}
#ico .span2 .shuomin5 span,#header .span3 .shuomin5 span,
#ico .span2 .shuomin6 span,#header .span3 .shuomin6 span{
    bottom:-8px;
    width: 16px;
}
#header .span3 .shuomin4 span{
    bottom:8px;
}

#ico .span2 .shuomin1,
#ico .span2 .shuomin2,
#ico .span2 .shuomin3,
#ico .span2 .shuomin4,
#header .span3 .shuomin1,
#header .span3 .shuomin2,
#header .span3 .shuomin3,
#header .span3 .shuomin4{
    left:50%;
}

#ico .span2 .shuomin5,
#ico .span2 .shuomin6,
#header .span3 .shuomin5,
#header .span3 .shuomin6{
    left:50%;
}

#ico .span2 .shuomin1 span,
#ico .span2 .shuomin2 span,
#ico .span2 .shuomin3 span,
#ico .span2 .shuomin4 span,
#ico .span2 .shuomin5 span,
#ico .span2 .shuomin6 span,
#header .span3 .shuomin1 span,
#header .span3 .shuomin2 span,
#header .span3 .shuomin3 span,
#header .span3 .shuomin4 span,
#header .span3 .shuomin5 span,
#header .span3 .shuomin6 span{
    left:50%;
}

#ico ul li .ico-img5,
#ico ul li .ico-img6{
    background:none;
    border:2px solid #8e98a8;
    border-radius:999px;
    color:#6f7a8d;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size: 13px;
    font-weight: 600;
}

#ico ul li .ico-img5::before{
    content:"即";
}

#ico ul li .ico-img6{
    border-color:#ff5b6e;
    color:#ff5b6e;
}

#ico ul li .ico-img6::before{
    content:"红";
}

.section2{
    width: 100%;
    margin:0 auto 46px;
    padding: 0 0 6px;
    text-align: center;
    overflow: visible;
}
.zp{
    height: 100%;
    width: 100%;
    margin:0;
    background:transparent;
    overflow: visible;
}
.section2 ul{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    justify-content:center;
    gap: 28px 26px;
    margin:0 auto;
    padding: 14px 0 8px;
    overflow: visible;
}
.section2 ul li.span3{
    width: calc((100% - 52px) / 3);
    height: auto;
    padding: 0;
    background:transparent;
    overflow: visible;
    position: relative;
    z-index: 0;
}
.section2 .zpbox{
    width: 100%;
    min-height: 340px;
    margin:0 auto;
    padding: 12px 12px 16px;
    text-align: left;
    position: relative;
    background:transparent;
    border-radius: 38px;
    transition:
        transform 0.35s ease,
        border-radius 0.35s ease;
}
.section2 .zpbox::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    background:linear-gradient(145deg, #eff3f8 0%, #e9eef4 100%);
    box-shadow:
        -14px -14px 28px rgba(255, 255, 255, 0.86),
        16px 16px 30px rgba(204, 211, 221, 0.52);
    opacity:0;
    transform: scale(0.985);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
    pointer-events:none;
}
.section2 .zpimg{
    width: 100%;
    height: 220px;
    margin: 0 auto 15px;
    padding: 0;
    overflow: hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
    border-radius: 24px;
    background:transparent;
}
.section2 .zpimg img{
    width: 100%;
    height: 100%;
    display:block;
    border-radius: inherit;
    object-fit: contain;
    object-position: center;
}
.section2 .zpbox .span{
    margin-left: 0;
    padding: 2px 4px 0;
    position:relative;
    z-index:1;
}
.section2 .zpbox span,.section2 .zpbox i{
    color:#8f9aae;
}
.section2 .zpbox i{
    display:inline-block;
    margin:0 3px;
}
.section2 .zpbox .span h4{
    margin:0 0 9px;
    color:#303544;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.03em;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.section2 .zpbox .span p{
    margin:0;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap: 4px;
    line-height: 1.18;
    letter-spacing: -0.01em;
}

.section2 ul li:hover,
.section2 ul li:focus-within{
    z-index: 3;
}
.section2 ul li:hover .zpbox,
.section2 ul li:focus-within .zpbox{
    width: 100%;
    min-height: 340px;
    margin:0 auto;
    padding: 12px 12px 16px;
    background:transparent;
    border-radius: 38px;
    transform: translateY(-2px);
}
.section2 ul li:hover .zpbox::before,
.section2 ul li:focus-within .zpbox::before{
    opacity:1;
    transform: scale(1);
    box-shadow:
        -16px -16px 30px rgba(255, 255, 255, 0.9),
        18px 18px 34px rgba(201, 208, 218, 0.56);
}
.section2 ul li:hover .zpimg,
.section2 ul li:focus-within .zpimg{
    border-radius: 24px;
}
.section2 .zhezhao{
    display:none;
}
@media (min-width:1288px){
    .section2 ul li.span3{
        width: calc((100% - 78px) / 4);
    }
    .section2 .zpbox .span h4{
        font-size: 18px;
    }
    .section2 .zpbox i ,.section2 .zpbox span{
        font-size: 14px;
    }
}
@media (max-width:1287px) and (min-width:960px){
    .section2 ul li.span3{
        width: calc((100% - 52px) / 3);
    }
    .section2 .zpbox .span h4{
        font-size: 16px;
    }
    .section2 .zpbox i,.section2 .zpbox span{
        font-size: 13px;
    }
}
@media (max-width:959px) and (min-width:640px){
    .section2 ul{
        gap: 24px;
    }
    .section2 ul li.span3{
        width: calc((100% - 24px) / 2);
    }
    .section2 .zpbox{
        min-height: 324px;
        border-radius: 34px;
    }
    .section2 .zpimg{
        height: 210px;
        border-radius: 22px;
    }
}
@media (max-width:639px){
    .section2 ul{
        gap: 20px;
    }
    .section2 ul li.span3{
        width: 100%;
    }
    .section2 .zpbox{
        min-height: auto;
        padding: 18px;
        border-radius: 30px;
    }
    .section2 .zpimg{
        height: 220px;
        border-radius: 22px;
    }
}
@media (max-width:1148px){
    .section2 .zpbox .span h4{
        font-size: 14px;
    }
    .section2 .zpbox i,.section2 .zpbox span{
        font-size: 12px;
    }
}
.section2 a{
    display:block;
    height:100%;
    color:#3b4050;
    outline:none;
    -webkit-tap-highlight-color: transparent;
}
.section2 a:focus,
.section2 a:focus-visible{
    outline:none;
}







.fanye{
    min-height: 52px;
    width: 100%;
    background:transparent;
    margin:44px auto 0;
    padding: 6px 0 72px;
}

.fanye #xiayiye,
.fanye #shangyiye{
    width: 156px;
    height: 52px;
    margin:0 auto;
    padding: 0;
    border-radius: 20px;
    background:linear-gradient(145deg, #2a2a2a 0%, #0f0f10 100%);
    color:#f4f5f7;
    text-align: center;
    line-height: 52px;
    cursor:pointer;
    box-shadow:
        -8px -8px 18px rgba(255, 255, 255, 0.78),
        12px 14px 24px rgba(160, 168, 179, 0.34),
        0 14px 24px rgba(15, 16, 18, 0.2);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}
.fanye #xiayiye:hover,
.fanye #shangyiye:hover{
    transform: translateY(-1px);
    box-shadow:
        -10px -10px 20px rgba(255, 255, 255, 0.82),
        14px 16px 28px rgba(160, 168, 179, 0.38),
        0 16px 28px rgba(15, 16, 18, 0.24);
    filter: brightness(1.02);
}








 @media (min-width:604px){
    .span2{
        width: 16%;
    }
    
}
@media (max-width:604px) and (min-width:530px){
    .span2{
        width: 15%;
    }
    .element{
        font-size: 38px;
    }
    #ico ul{
        gap:14px;
    }
    #ico ul li.contact-item{
        min-width:102px;
    }
}
@media (max-width:530px) and (min-width:430px){
    .span2{
        width: 15%;
    }
    .element{
        font-size: 30px;
    }
    #ico ul{
        gap:12px;
    }
    #ico ul li.contact-item{
        min-width:96px;
    }
    #ico ul li i{
        font-size: 0.92em;
    }
}
@media (max-width:430px) and (min-width:400px){
    .span2{
        width: 15%;
    }
    .element{
        font-size: 28px;
    }
    #ico ul{
        gap:10px;
    }
    #ico ul li.contact-item{
        min-width:92px;
    }
    #ico ul li i{
        font-size: 0.9em;
    }
}
@media (max-width:400px){
    .element{
        font-size: 20px;
    }
    #ico ul{
        gap:10px;
        max-width:calc(100% - 24px);
    }
    #ico ul li.contact-item{
        min-width:88px;
    }
    #ico ul li i{
        font-size: 0.88em;
    }
}
body{
    min-width: 465px;
}

.zpbox,.zpimg{
    position: relative;
}

.zhuoping1 .zpimg img{
    display:block;
    width:100%;
    height:auto;
    margin:0 auto 20px;
}

.zhuoping1 .zpimg img:last-child{
    margin-bottom:0;
}
.zhezhao{
    z-index: 10;
    position: absolute;
    top: 0px;
    left:0px;
    width: 100%;
    height:100%;
    background:#ccc;
    opacity:0;
    border-radius: inherit;
}

/* 添加logo */
 .span4 {
    text-align: left;
    height: 40px;
    line-height: 40px;
    padding-left: 31px;
}
.span4  img{
    width: 65px;
}

html{
    scroll-behavior: smooth;
}

:root{
    --shell-bg:#ef2650;
    --header-bg:#ef2650;
    --header-text:#fff7f9;
    --header-outline:rgba(255, 255, 255, 0.18);
    --header-hover:rgba(255, 255, 255, 0.12);
    --header-pill-shadow:rgba(9, 11, 16, 0.18);
    --page-bg:#eef1f6;
    --page-divider:rgba(191, 199, 211, 0.65);
    --headline:#303544;
    --body-text:#3b4050;
    --muted:#8f9aae;
    --muted-strong:#5f6878;
    --card-surface:linear-gradient(145deg, #eff3f8 0%, #e9eef4 100%);
    --card-shadow-hi:rgba(255, 255, 255, 0.86);
    --card-shadow-low:rgba(204, 211, 221, 0.52);
    --card-shadow-hi-strong:rgba(255, 255, 255, 0.9);
    --card-shadow-low-strong:rgba(201, 208, 218, 0.56);
    --accent:#ff3b61;
    --accent-soft:#ff657c;
    --pager-bg:linear-gradient(145deg, #2a2a2a 0%, #0f0f10 100%);
    --pager-text:#f4f5f7;
    --pager-shadow-hi:rgba(255, 255, 255, 0.78);
    --pager-shadow-low:rgba(160, 168, 179, 0.34);
    --pager-shadow-float:rgba(15, 16, 18, 0.2);
}

body.theme-dark{
    --shell-bg:#0f141c;
    --header-bg:rgba(15, 20, 28, 0.9);
    --header-text:#eef3fb;
    --header-outline:rgba(255, 255, 255, 0.08);
    --header-hover:rgba(255, 255, 255, 0.06);
    --header-pill-shadow:rgba(0, 0, 0, 0.35);
    --page-bg:#161d27;
    --page-divider:rgba(88, 98, 116, 0.42);
    --headline:#eef3fb;
    --body-text:#dbe3ef;
    --muted:#94a3ba;
    --muted-strong:#b7c3d5;
    --card-surface:linear-gradient(145deg, #202937 0%, #111822 100%);
    --card-shadow-hi:rgba(255, 255, 255, 0.03);
    --card-shadow-low:rgba(0, 0, 0, 0.44);
    --card-shadow-hi-strong:rgba(255, 255, 255, 0.05);
    --card-shadow-low-strong:rgba(0, 0, 0, 0.58);
    --accent:#ff526e;
    --accent-soft:#ff7f92;
    --pager-bg:linear-gradient(145deg, #f6f7fb 0%, #dfe7f3 100%);
    --pager-text:#121720;
    --pager-shadow-hi:rgba(255, 255, 255, 0.08);
    --pager-shadow-low:rgba(0, 0, 0, 0.4);
    --pager-shadow-float:rgba(0, 0, 0, 0.28);
}

body{
    background-color: var(--shell-bg);
    color: var(--body-text);
    transition: background-color 0.35s ease, color 0.35s ease;
}

section{
    background:var(--page-bg);
    transition: background-color 0.35s ease;
}

section .section1{
    border-bottom-color: var(--page-divider);
}

.scroll-anchor,
#about,
#zp1,
#zp2{
    scroll-margin-top: 84px;
}

.scroll-anchor{
    height: 0;
}

.del-ins,
.element{
    color: var(--headline);
}

mark{
    border-bottom-color: var(--accent);
}

#ico ul li i{
    color: var(--muted-strong);
}

#ico ul li .ico-img5{
    border-color: var(--muted);
    color: var(--muted);
}

#ico ul li .ico-img6{
    border-color: var(--accent-soft);
    color: var(--accent-soft);
}

#header{
    width: calc(100% - 20px);
    background: var(--header-bg);
    box-shadow: 0 12px 28px rgba(15, 17, 24, 0.16);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transform:translateY(0);
    transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.28s var(--ease-snappy);
    will-change:transform;
}

#header.header-hidden{
    transform:translateY(-112%);
    box-shadow:none;
}

#header .header-inner{
    width: min(1120px, calc(100% - 48px));
    min-height: 52px;
    margin: 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 24px;
}

#header .nav-left,
#header .header-nav,
#header .nav-right{
    float:none;
    width:auto;
}

#header .brand-link{
    display:flex;
    align-items:center;
}

#header .brand-link img{
    width: 88px;
}

#header .nav-links{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap: 10px;
    margin:0;
    padding:0;
    list-style:none;
}

#header .nav-links li{
    width:auto;
    margin:0;
    height:auto;
    line-height:normal;
}

#header .nav-link-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: auto;
    min-width: 68px;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border:1px solid transparent;
    color: var(--header-text);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

#header .nav-link-btn:hover{
    background: var(--header-hover);
    border-color: var(--header-outline);
    color: var(--header-text);
}

#header .theme-toggle{
    display:inline-flex;
    align-items:center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border:1px solid var(--header-outline);
    background: rgba(255, 255, 255, 0.06);
    color: var(--header-text);
    box-shadow: 0 12px 20px var(--header-pill-shadow);
    cursor:pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#header .theme-toggle span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width: 54px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.7);
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

#header .theme-toggle[data-mode='light'] .mode-light,
#header .theme-toggle[data-mode='dark'] .mode-dark{
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.theme-dark #header .theme-toggle{
    background: rgba(255, 255, 255, 0.03);
}

body.theme-dark #header .theme-toggle span{
    color: rgba(238, 243, 251, 0.72);
}

body.theme-dark #header .theme-toggle[data-mode='light'] .mode-light,
body.theme-dark #header .theme-toggle[data-mode='dark'] .mode-dark{
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.section2 .zpbox::before{
    background: var(--card-surface);
    box-shadow:
        -14px -14px 28px var(--card-shadow-hi),
        16px 16px 30px var(--card-shadow-low);
}

.section2 ul li:hover .zpbox::before,
.section2 ul li:focus-within .zpbox::before{
    box-shadow:
        -16px -16px 30px var(--card-shadow-hi-strong),
        18px 18px 34px var(--card-shadow-low-strong);
}

.section2 .zpbox .span h4{
    color: var(--headline);
}

.section2 .zpbox span,
.section2 .zpbox i{
    color: var(--muted);
}

.section2 a{
    color: var(--body-text);
}

.fanye #xiayiye,
.fanye #shangyiye{
    background: var(--pager-bg);
    color: var(--pager-text);
    box-shadow:
        -8px -8px 18px var(--pager-shadow-hi),
        12px 14px 24px var(--pager-shadow-low),
        0 14px 24px var(--pager-shadow-float);
}

.fanye #xiayiye:hover,
.fanye #shangyiye:hover{
    box-shadow:
        -10px -10px 20px var(--pager-shadow-hi),
        14px 16px 28px var(--pager-shadow-low),
        0 16px 28px var(--pager-shadow-float);
}

@media (max-width: 720px){
    #header .header-inner{
        width: calc(100% - 28px);
        gap: 12px;
    }

    #header .nav-links{
        gap: 6px;
    }

    #header .nav-link-btn{
        min-width: 58px;
        padding: 0 12px;
    }

    #header .theme-toggle span{
        min-width: 46px;
        padding: 0 8px;
    }
}

@media (max-width: 556px){
    #header .header-inner{
        justify-content:center;
    }

    #header .nav-left{
        display:flex;
    }

    #header .header-nav{
        display:none;
    }
}

/* 2026-04-20 refinements */
:root{
    --hero-text:#303544;
    --hero-mark:#20242f;
}

body.theme-dark{
    --hero-text:#8f98a7;
    --hero-mark:#ffffff;
    --card-surface:linear-gradient(145deg, #1c2430 0%, #131a23 100%);
    --card-shadow-hi:rgba(108, 126, 156, 0.12);
    --card-shadow-low:rgba(3, 7, 12, 0.58);
    --card-shadow-hi-strong:rgba(122, 143, 176, 0.16);
    --card-shadow-low-strong:rgba(2, 5, 10, 0.72);
}

#header{
    left:0;
    right:0;
    width:100%;
}

#header .header-inner{
    width:min(1400px, calc(100% - 48px));
}

.del-ins,
.element{
    color: var(--hero-text);
}

.del-ins .element.is-custom-typed{
    display:inline-block;
    max-width:100%;
}

.del-ins .element.is-custom-typed .slogan-line{
    display:block;
    text-align:center;
}

.del-ins .element.is-custom-typed .slogan-line-1{
    white-space:nowrap;
}

.del-ins .element.is-custom-typed .slogan-line-2{
    white-space:nowrap;
    min-height:1.45em;
    margin-top:0.52em;
}

.del-ins .element.is-custom-typed .slogan-underlined{
    display:inline-block;
    padding-bottom:7px;
    line-height:1.04;
    border-bottom:3px solid var(--accent, #ff3b61);
}

.typed-cursor{
    color: var(--hero-mark);
}

mark{
    color: var(--hero-mark);
}

#ico ul{
    justify-content:center;
    gap:48px;
    flex-wrap:nowrap;
    width:fit-content;
    max-width:calc(100% - 32px);
}

#ico ul li.contact-item{
    min-width:0;
    flex:0 1 auto;
    white-space:nowrap;
}

#ico ul li i{
    font-size:0.94em;
    margin-left:5px;
}

#ico ul li [class^='ico-img']{
    flex-shrink:0;
}

.section2 .zpimg{
    margin-bottom:15px;
}

.section2 .zpimg img{
    height:100%;
    object-fit:cover;
    object-position:center;
}

body.theme-dark .section2 .zpbox::before{
    background: var(--card-surface);
    box-shadow:
        -12px -12px 26px var(--card-shadow-hi),
        18px 18px 30px var(--card-shadow-low),
        inset 1px 1px 0 rgba(255, 255, 255, 0.03);
}

body.theme-dark .section2 ul li:hover .zpbox::before,
body.theme-dark .section2 ul li:focus-within .zpbox::before{
    box-shadow:
        -14px -14px 28px var(--card-shadow-hi-strong),
        20px 20px 34px var(--card-shadow-low-strong),
        inset 1px 1px 0 rgba(255, 255, 255, 0.04);
}

body.theme-dark section{
    background: var(--page-bg);
}

body.theme-dark .zhuoping1 .title h3,
body.theme-dark .zhuoping1 .title h3 span{
    color: var(--headline);
}

body.theme-dark .zhuoping1 .title h5,
body.theme-dark .zhuoping1 .title h5 span{
    color: #c7d1df;
}

body.theme-dark .zhuoping1 .title p,
body.theme-dark .zhuoping1 .title p span,
body.theme-dark .zhuoping1 .title .fenglei{
    color: var(--body-text);
}

body.theme-dark .zhuoping1 .title i{
    color: var(--muted) !important;
}

body.theme-dark .zhuoping1 .title a,
body.theme-dark .zhuoping1 .title font[color]{
    color: #8cb9ff !important;
}

@media (max-width: 720px){
    #ico ul{
        gap:10px;
        width:min(820px, calc(100% - 24px));
        max-width:calc(100% - 24px);
    }

    #ico ul li i{
        font-size:0.88em;
        margin-left:4px;
    }
}

/* detail pages: remove vertical gaps around stacked showcase images */
.zhuoping1 .zpimg{
    margin:0 auto !important;
    font-size:0;
    line-height:0;
}

.zhuoping1 .zpimg img{
    margin:0 auto !important;
    vertical-align:top;
}

.zhuoping1 .zpimg .video-content-wrap,
.zhuoping1 .zpimg object,
.zhuoping1 .zpimg embed{
    margin:0 auto !important;
    display:block;
    vertical-align:top;
}

.zhuoping1 .zpimg .wechat-animated-fallback{
    display:none;
    width:100%;
    height:auto;
    margin:0 auto !important;
    vertical-align:top;
}

.zhuoping1 .zpimg video,
.zhuoping1 .zpimg .managed-detail-video{
    display:block;
    max-width:100%;
    height:auto;
    margin:0 auto;
    object-fit:contain;
}

body.is-wechat-browser .zhuoping1 .zpimg .video-content-wrap.has-wechat-fallback .managed-detail-video{
    display:none !important;
}

body.is-wechat-browser .zhuoping1 .zpimg .video-content-wrap.has-wechat-fallback .wechat-animated-fallback{
    display:block !important;
}

body.is-wechat-browser .zhuoping1 .zpimg .reloop-phone-screen.has-wechat-fallback .managed-detail-video{
    display:none !important;
}

body.is-wechat-browser .zhuoping1 .zpimg .reloop-phone-screen.has-wechat-fallback .wechat-animated-fallback{
    display:block !important;
}

.zhuoping1 .zpimg > img + img,
.zhuoping1 .zpimg > img + .lazy-media-frame,
.zhuoping1 .zpimg > .lazy-media-frame + img,
.zhuoping1 .zpimg > .lazy-media-frame + .lazy-media-frame,
.zhuoping1 .zpimg > img + .video-content-wrap,
.zhuoping1 .zpimg > .video-content-wrap + img,
.zhuoping1 .zpimg > .video-content-wrap + .lazy-media-frame,
.zhuoping1 .zpimg > .lazy-media-frame + .video-content-wrap{
    margin-top:-1px !important;
}

/* 2026-04-20 interaction and detail-page polish */
:root{
    --ease-soft:cubic-bezier(0.22, 1, 0.36, 1);
    --ease-snappy:cubic-bezier(0.16, 1, 0.3, 1);
}

body{
    transition:
        background-color 0.35s var(--ease-soft),
        color 0.35s var(--ease-soft),
        opacity 0.22s var(--ease-soft),
        transform 0.32s var(--ease-soft);
}

body.is-leaving{
    opacity:0;
    transform:translateY(8px);
}

#header{
    box-shadow: 0 12px 28px rgba(15, 17, 24, 0.16);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

#header .header-inner{
    min-height: 54px;
    transition: min-height 0.28s var(--ease-snappy), width 0.28s var(--ease-snappy), gap 0.28s var(--ease-snappy);
}

#header .brand-link img{
    transition: width 0.28s var(--ease-snappy), transform 0.28s var(--ease-snappy);
}

#header .nav-link-btn,
#header .theme-toggle,
#header .theme-toggle span{
    transition:
        background-color 0.28s var(--ease-snappy),
        border-color 0.28s var(--ease-snappy),
        color 0.28s var(--ease-snappy),
        box-shadow 0.28s var(--ease-snappy),
        transform 0.28s var(--ease-snappy),
        opacity 0.28s var(--ease-snappy),
        height 0.28s var(--ease-snappy),
        min-width 0.28s var(--ease-snappy),
        padding 0.28s var(--ease-snappy);
}

#header.header-condensed{
    box-shadow: 0 10px 24px rgba(15, 17, 24, 0.12);
}

#header.header-condensed .header-inner{
    min-height: 46px;
    gap: 18px;
}

#header.header-condensed .brand-link img{
    width: 80px;
}

#header.header-condensed .nav-link-btn{
    min-width: 62px;
    height: 34px;
    padding: 0 14px;
    font-size: 12px;
}

#header.header-condensed .theme-toggle{
    padding: 3px;
    box-shadow: 0 8px 16px var(--header-pill-shadow);
}

#header.header-condensed .theme-toggle span{
    min-width: 52px;
    height: 28px;
}

#header .theme-toggle{
    position:relative;
    width: 126px;
    justify-content:space-between;
    isolation:isolate;
}

#header .theme-toggle::after{
    content:"";
    position:absolute;
    top:4px;
    left:4px;
    width:56px;
    height:30px;
    border-radius:999px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 10px 18px rgba(16, 17, 23, 0.18);
    transform:translateX(0);
    transition:
        transform 0.34s var(--ease-snappy),
        background-color 0.34s var(--ease-snappy),
        box-shadow 0.34s var(--ease-snappy);
    z-index:0;
}

#header .theme-toggle[data-mode='dark']::after{
    transform:translateX(58px);
}

#header .theme-toggle span{
    position:relative;
    z-index:1;
    background:transparent !important;
    box-shadow:none !important;
}

body.theme-dark #header .theme-toggle::after{
    background: rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 20px rgba(0, 0, 0, 0.28);
}

@media (max-width: 720px){
    #header .theme-toggle{
        width: 110px;
    }

    #header .theme-toggle::after{
        width:48px;
        height:28px;
    }

    #header .theme-toggle[data-mode='dark']::after{
        transform:translateX(50px);
    }
}

#ico .span2 [class^='shuomin'],
#header .span3 [class^='shuomin']{
    display:block !important;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform:translateX(-50%) translateY(10px) scale(0.96);
    transition:
        opacity 0.28s var(--ease-snappy),
        transform 0.28s var(--ease-snappy),
        visibility 0s linear 0.28s;
}

#ico ul li:hover [class^='shuomin'],
#ico ul li:focus-within [class^='shuomin'],
#header ul li:hover [class^='shuomin'],
#header ul li:focus-within [class^='shuomin']{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0) scale(1);
    transition-delay:0s;
}

body.motion-enhanced.page-home .logo,
body.motion-enhanced.page-home .del-ins,
body.motion-enhanced.page-home #ico,
body.motion-enhanced.page-home .section2,
body.motion-enhanced.page-home .fanye{
    opacity:0;
    transform:translateY(24px);
    transition:
        opacity 0.72s var(--ease-soft),
        transform 0.72s var(--ease-soft);
}

body.motion-enhanced.page-home .logo{
    transition-delay:0.04s;
}

body.motion-enhanced.page-home .del-ins{
    transition-delay:0.14s;
}

body.motion-enhanced.page-home #ico{
    transition-delay:0.24s;
}

body.motion-enhanced.page-home .section2{
    transition-delay:0.32s;
}

body.motion-enhanced.page-home .fanye{
    transition-delay:0.4s;
}

body.motion-enhanced.page-home.page-ready .logo,
body.motion-enhanced.page-home.page-ready .del-ins,
body.motion-enhanced.page-home.page-ready #ico,
body.motion-enhanced.page-home.page-ready .section2,
body.motion-enhanced.page-home.page-ready .fanye{
    opacity:1;
    transform:none;
}

body.motion-enhanced.page-home .section2 ul li.span3{
    opacity:0;
    transform:translateY(22px);
    transition:
        opacity 0.7s var(--ease-soft),
        transform 0.7s var(--ease-soft);
    transition-delay:calc(var(--home-stagger, 0) * 45ms + 280ms);
}

body.motion-enhanced.page-home.page-ready .section2 ul li.span3{
    opacity:1;
    transform:none;
}

.section2 .zpbox{
    transition:
        transform 0.35s var(--ease-snappy),
        border-radius 0.35s var(--ease-snappy);
}

.section2 .zpbox::before{
    transition:
        opacity 0.35s var(--ease-snappy),
        transform 0.35s var(--ease-snappy),
        box-shadow 0.35s var(--ease-snappy);
}

.section2 .zpimg img{
    transition:
        transform 0.55s var(--ease-soft),
        filter 0.35s var(--ease-soft),
        border-radius 0.35s var(--ease-soft);
}

.section2 .zpbox .span h4,
.section2 .zpbox .span p{
    transition:
        transform 0.35s var(--ease-snappy),
        opacity 0.35s var(--ease-snappy),
        color 0.35s var(--ease-snappy);
}

.section2 ul li:hover .zpbox,
.section2 ul li:focus-within .zpbox,
.section2 ul li.is-last-viewed .zpbox{
    transform:translateY(-4px);
}

.section2 ul li:hover .zpbox::before,
.section2 ul li:focus-within .zpbox::before,
.section2 ul li.is-last-viewed .zpbox::before{
    opacity:1;
    transform:scale(1);
}

.section2 ul li:hover .zpimg img,
.section2 ul li:focus-within .zpimg img,
.section2 ul li.is-last-viewed .zpimg img{
    transform:scale(1.085);
    filter:saturate(1.02);
}

.section2 ul li:hover .zpbox .span h4,
.section2 ul li:focus-within .zpbox .span h4,
.section2 ul li.is-last-viewed .zpbox .span h4{
    transform:translateY(-2px);
}

.section2 ul li:hover .zpbox .span p,
.section2 ul li:focus-within .zpbox .span p,
.section2 ul li.is-last-viewed .zpbox .span p{
    transform:translateY(-1px);
    opacity:0.92;
}

.section2.is-stagger-in ul li.span3{
    animation: portfolio-stagger-in 0.6s var(--ease-soft) both;
    animation-delay:calc(var(--stagger-index, 0) * 55ms);
}

@keyframes portfolio-stagger-in{
    from{
        opacity:0;
        transform:translateY(22px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

.fanye #xiayiye,
.fanye #shangyiye{
    position:relative;
    overflow:hidden;
    transition:
        transform 0.25s var(--ease-snappy),
        box-shadow 0.25s var(--ease-snappy),
        filter 0.25s var(--ease-snappy),
        background 0.25s var(--ease-snappy),
        color 0.25s var(--ease-snappy);
}

.fanye #xiayiye:active,
.fanye #shangyiye:active,
.fanye #xiayiye.is-pressed,
.fanye #shangyiye.is-pressed{
    transform:translateY(2px) scale(0.985);
    box-shadow:
        inset 4px 4px 10px rgba(0, 0, 0, 0.24),
        inset -2px -2px 6px rgba(255, 255, 255, 0.06),
        0 8px 16px rgba(15, 16, 18, 0.16);
    filter:brightness(0.98);
}

.zhuoping1{
    width:min(1048px, calc(100% - 72px));
    margin:0 auto;
    padding:clamp(44px, 7vw, 92px) 0 clamp(120px, 14vw, 180px);
    text-align:center;
}

.zhuoping1 .title{
    width:min(820px, 100%);
    margin:0 auto clamp(44px, 6vw, 72px);
    text-align:left;
}

.zhuoping1 .title h3{
    margin:0 0 16px;
    color:var(--headline);
    font-size:clamp(34px, 4.8vw, 52px);
    line-height:1.05;
    letter-spacing:-0.045em;
    font-weight:800;
    text-align:center;
}

.zhuoping1 .title h5{
    width:100%;
    max-width:none;
    margin:0;
    color:var(--muted-strong);
    font-size:clamp(17px, 1.7vw, 20px);
    line-height:1.95;
    text-align:left !important;
}

.zhuoping1 .title h5 span{
    display:block;
}

.zhuoping1 .title a{
    color:#295dff;
}

.zhuoping1 .title .fenglei{
    margin-top:26px;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:14px 28px;
    color:var(--body-text);
    font-size:14px;
    line-height:1.7;
}

.zhuoping1 .title .fenglei span{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.zhuoping1 .zpimg{
    width:min(1048px, 100%) !important;
}

body.motion-enhanced.detail-page .reveal-media{
    opacity:0;
    transform:translateY(34px);
    transition:
        opacity 0.88s var(--ease-soft),
        transform 0.88s var(--ease-soft);
    transition-delay:var(--reveal-delay, 0ms);
    will-change:transform, opacity;
}

body.motion-enhanced.detail-page .reveal-media.is-visible{
    opacity:1;
    transform:none;
}

body.theme-dark .zhuoping1 .title h3,
body.theme-dark .zhuoping1 .title h3 span{
    color:#f4f7fb;
}

body.theme-dark .zhuoping1 .title h5,
body.theme-dark .zhuoping1 .title h5 span{
    color:#c5cfdb;
}

body.theme-dark .zhuoping1 .title .fenglei{
    color:#d9e1ec;
}

@media (max-width: 720px){
    .zhuoping1{
        width:min(100%, calc(100% - 28px));
        padding:36px 0 108px;
    }

    .zhuoping1 .title{
        margin-bottom:34px;
    }

    .zhuoping1 .title .fenglei{
        gap:10px 18px;
    }
}

@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }

    body{
        transform:none !important;
    }
}

@view-transition{
    navigation:auto;
}

::view-transition-old(root),
::view-transition-new(root){
    animation-duration:0.34s;
    animation-timing-function:var(--ease-soft);
}

/* 2026-04-20 layout + theme-toggle fixes */
.section2 ul{
    justify-content:flex-start;
}

#header .theme-toggle span{
    color:rgba(255, 255, 255, 0.52) !important;
}

#header .theme-toggle[data-mode='light'] .mode-light,
#header .theme-toggle[data-mode='dark'] .mode-dark{
    color:#ffffff !important;
}

#header .theme-toggle[data-mode='light'] .mode-dark,
#header .theme-toggle[data-mode='dark'] .mode-light{
    color:rgba(255, 255, 255, 0.52) !important;
}

body.theme-dark #header .theme-toggle span{
    color:rgba(238, 243, 251, 0.56) !important;
}

body.theme-dark #header .theme-toggle[data-mode='light'] .mode-light,
body.theme-dark #header .theme-toggle[data-mode='dark'] .mode-dark{
    color:#ffffff !important;
}

body.theme-dark #header .theme-toggle[data-mode='light'] .mode-dark,
body.theme-dark #header .theme-toggle[data-mode='dark'] .mode-light{
    color:rgba(238, 243, 251, 0.56) !important;
}

/* 2026-04-20 final detail layout + theme toggle cleanup */
#header .theme-toggle{
    width:auto !important;
    min-width:126px;
    gap:4px;
    padding:4px;
    background:rgba(255, 255, 255, 0.12);
    border-color:rgba(255, 255, 255, 0.16);
    box-shadow:0 12px 24px rgba(15, 17, 24, 0.16);
}

#header .theme-toggle::after{
    display:none !important;
}

#header .theme-toggle span{
    min-width:54px;
    height:30px;
    padding:0 12px;
    border-radius:999px;
    color:rgba(255, 255, 255, 0.6) !important;
    background:transparent !important;
    box-shadow:none !important;
}

#header .theme-toggle[data-mode='light'] .mode-light,
#header .theme-toggle[data-mode='dark'] .mode-dark{
    color:#ffffff !important;
    background:linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 100%) !important;
    box-shadow:0 10px 20px rgba(255, 71, 103, 0.28) !important;
}

#header .theme-toggle[data-mode='light'] .mode-dark,
#header .theme-toggle[data-mode='dark'] .mode-light{
    color:rgba(255, 255, 255, 0.6) !important;
}

body.theme-dark #header .theme-toggle{
    background:rgba(255, 255, 255, 0.08);
    border-color:rgba(255, 255, 255, 0.12);
    box-shadow:0 10px 22px rgba(0, 0, 0, 0.26);
}

body.theme-dark #header .theme-toggle span{
    color:rgba(238, 243, 251, 0.62) !important;
}

body.theme-dark #header .theme-toggle[data-mode='light'] .mode-light,
body.theme-dark #header .theme-toggle[data-mode='dark'] .mode-dark{
    color:#ffffff !important;
    background:linear-gradient(135deg, #ff8ea2 0%, var(--accent) 100%) !important;
    box-shadow:0 10px 22px rgba(255, 82, 110, 0.32) !important;
}

body.theme-dark #header .theme-toggle[data-mode='light'] .mode-dark,
body.theme-dark #header .theme-toggle[data-mode='dark'] .mode-light{
    color:rgba(238, 243, 251, 0.62) !important;
}

/* 2026-04-24 theme toggle icons */
#header .theme-toggle{
    min-width:92px !important;
    gap:4px;
}

#header .theme-toggle span{
    min-width:38px !important;
    width:38px;
    height:30px;
    padding:0 !important;
}

#header.header-condensed .theme-toggle span{
    min-width:36px !important;
    width:36px;
    height:28px;
}

#header .theme-icon{
    display:block;
    flex:0 0 auto;
    min-width:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    width:18px;
    height:18px;
    background:transparent !important;
    box-shadow:none !important;
    object-fit:contain;
    opacity:0.58;
    filter:none;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    transition:opacity 0.28s var(--ease-snappy), filter 0.28s var(--ease-snappy), transform 0.28s var(--ease-snappy);
}

#header .theme-icon-light{
    width:21px;
    height:21px;
}

#header .theme-icon-dark{
    width:20px;
    height:20px;
}

#header .theme-toggle[data-mode='light'] .mode-light,
#header .theme-toggle[data-mode='dark'] .mode-dark{
    color:#ffffff !important;
}

#header .theme-toggle[data-mode='light'] .mode-light .theme-icon,
#header .theme-toggle[data-mode='dark'] .mode-dark .theme-icon{
    opacity:1;
}

#header .theme-toggle[data-mode='light'] .mode-dark,
#header .theme-toggle[data-mode='dark'] .mode-light{
    color:rgba(255, 255, 255, 0.48) !important;
}

#header .theme-toggle[data-mode='light'] .mode-dark .theme-icon,
#header .theme-toggle[data-mode='dark'] .mode-light .theme-icon{
    opacity:0.42;
}

body.theme-dark #header .theme-toggle[data-mode='light'] .mode-dark,
body.theme-dark #header .theme-toggle[data-mode='dark'] .mode-light{
    color:rgba(238, 243, 251, 0.5) !important;
}

.zhuoping1 .title{
    width:min(1048px, 100%);
}

.zhuoping1 .title h3,
.zhuoping1 .title h5,
.zhuoping1 .title .fenglei{
    max-width:min(900px, 100%);
}

.zhuoping1 .title h3{
    margin-left:0;
    margin-right:0;
}

.zhuoping1 .title h3 span{
    display:block;
}

.zhuoping1 .title h5{
    text-align:left !important;
}

.zhuoping1 .title .fenglei{
    justify-content:flex-start;
}

@media (max-width: 720px){
    #header .theme-toggle{
        min-width:86px !important;
    }

    #header .theme-toggle span{
        min-width:35px !important;
        width:35px;
        padding:0 !important;
    }
}

/* detail pages: circular back-to-top button */
.back-to-top-btn{
    --back-top-icon-body:linear-gradient(180deg, #fff0f5 0%, #ffb8c8 100%);
    --back-top-icon-accent:#fff8fb;
    position:fixed;
    right:max(18px, env(safe-area-inset-right));
    bottom:max(24px, env(safe-area-inset-bottom));
    width:54px;
    height:54px;
    border:0;
    border-radius:999px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    line-height:1;
    font-weight:700;
    color:#ffffff;
    background:linear-gradient(145deg, #ff6a84 0%, #ef2650 100%);
    box-shadow:
        0 14px 28px rgba(239, 38, 80, 0.36),
        0 4px 10px rgba(12, 14, 19, 0.22);
    cursor:pointer;
    z-index:1200;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(10px) scale(0.92);
    transition:
        opacity 0.24s ease,
        visibility 0.24s ease,
        transform 0.24s ease,
        filter 0.24s ease,
        box-shadow 0.24s ease;
}

.back-to-top-btn.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
}

.back-to-top-btn span{
    position:relative;
    display:none;
    font-size:0;
    line-height:0;
}

.back-to-top-btn svg{
    display:block;
    width:34px;
    height:34px;
    pointer-events:none;
}

.back-to-top-btn span::before,
.back-to-top-btn span::after{
    display:none;
}

.back-to-top-btn:hover{
    transform:translateY(-2px) scale(1.02);
    filter:brightness(1.03);
    box-shadow:
        0 18px 32px rgba(239, 38, 80, 0.4),
        0 6px 12px rgba(12, 14, 19, 0.24);
}

.back-to-top-btn:active{
    transform:translateY(1px) scale(0.98);
    filter:brightness(0.97);
}

.back-to-top-btn:focus-visible{
    outline:none;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.92),
        0 0 0 6px rgba(239, 38, 80, 0.5),
        0 12px 24px rgba(12, 14, 19, 0.26);
}

body.theme-dark .back-to-top-btn{
    --back-top-icon-body:linear-gradient(180deg, #fff8fb 0%, #ffe4ed 100%);
    --back-top-icon-accent:#ffffff;
    color:#f6fbff;
    background:linear-gradient(145deg, #ff8198 0%, #ff3d66 100%);
    box-shadow:
        0 16px 30px rgba(255, 61, 102, 0.45),
        0 6px 16px rgba(0, 0, 0, 0.34);
}

@media (max-width: 960px){
    .back-to-top-btn{
        right:max(14px, env(safe-area-inset-right));
        bottom:max(18px, env(safe-area-inset-bottom));
        width:50px;
        height:50px;
    }

    .back-to-top-btn svg{
        width:30px;
        height:30px;
    }

    .back-to-top-btn span{
        width:28px;
        height:28px;
    }
}

@media (max-width: 720px){
    .back-to-top-btn{
        right:max(14px, env(safe-area-inset-right));
        bottom:max(18px, env(safe-area-inset-bottom));
        width:52px;
        height:52px;
    }

    .back-to-top-btn svg{
        width:30px;
        height:30px;
    }

    .back-to-top-btn span{
        width:28px;
        height:28px;
    }
}

@media (max-width: 480px){
    .back-to-top-btn{
        width:52px;
        height:52px;
    }

    .back-to-top-btn svg{
        width:30px;
        height:30px;
    }
}

/* 2026-04-22 homepage project cards: one-pass full-size adaptive layout */
.section2 .zp > ul.project-card-container{
    display: grid;
    width: 100%;
    margin: 0 auto;
    /* 全局基础内边距：小屏不挤，大屏可叠加 */
    padding: 0 24px 30px;
    box-sizing: border-box;
    gap: 20px;
    grid-template-columns: 1fr;
    /* 限制最大宽度，1440屏不会撑太满 */
    max-width: 1300px;
}

.section2 .zp > ul.project-card-container > li.span3.project-card{
    width: auto;
    min-width: 0;
}

.portfolio-update-note{
    position:relative;
    z-index:8;
    width:max-content;
    max-width:calc(100% - 48px);
    min-height:30px;
    margin:20px auto 28px;
    padding:6px 13px 6px 12px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    border:1px solid rgba(148, 158, 174, 0.22);
    border-radius:999px;
    background:rgba(248, 250, 253, 0.74);
    color:var(--body-text);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.76) inset,
        0 8px 18px rgba(188, 198, 212, 0.16);
    pointer-events:none;
}

.portfolio-update-note::before{
    content:"";
    flex:0 0 auto;
    width:7px;
    height:7px;
    border-radius:999px;
    background:rgba(255,80,107,0.66);
    box-shadow:0 0 0 3px rgba(255,80,107,0.08);
}

.portfolio-update-note p{
    margin:0;
    color:#6f7785;
    font-size:12px;
    font-weight:500;
    line-height:1.2;
    text-align:left;
}

body.theme-dark .portfolio-update-note{
    border-color:rgba(255, 255, 255, 0.08);
    background:rgba(23, 28, 36, 0.68);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 10px 22px rgba(0, 0, 0, 0.16);
}

body.theme-dark .portfolio-update-note p{
    color:#8f98a8;
}

body.motion-enhanced.page-home .portfolio-update-note{
    opacity:0;
    transform:translateY(20px);
    transition:
        opacity 0.72s var(--ease-soft),
        transform 0.72s var(--ease-soft);
    transition-delay:0.28s;
}

body.motion-enhanced.page-home.page-ready .portfolio-update-note{
    opacity:1;
    transform:none;
}

@media (min-width: 640px){
    .section2 .zp > ul.project-card-container{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px){
    .section2 .zp > ul.project-card-container{
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        padding-inline: 40px;
        padding-top:0;
    }
}

@media (min-width: 1200px){
    .section2 .zp > ul.project-card-container{
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
        padding-inline: 60px;
        padding-top:0;
    }
}

@media (min-width: 1600px){
    .section2 .zp > ul.project-card-container{
        max-width: 1400px;
        padding-inline: 80px;
    }
}

/* 手机端整体适配 */
@media (max-width: 640px) {
    body{
        min-width:0;
    }

    /* 顶部联系栏：自动换行、居中、间距均匀 */
    #ico{
        position:static;
        bottom:auto;
        width:100%;
        margin:16px auto 0;
        padding:0 16px 12px;
        box-sizing:border-box;
    }

    #ico ul{
        width:100%;
        max-width:100%;
        margin:0 auto;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-items:flex-start;
        gap:12px 10px;
    }

    #ico ul li.contact-item{
        float:none;
        display:flex;
        align-items:center;
        justify-content:center;
        min-width:0;
        flex:1 1 110px;
        max-width:180px;
        white-space:normal;
    }

    #ico ul li i{
        margin-left:4px;
        font-size:12px;
        line-height:1.3;
        white-space:normal;
        overflow-wrap:anywhere;
    }

    #ico ul li [class^='ico-img']{
        width:18px;
        height:18px;
        flex:0 0 18px;
    }

    /* 卡片容器：手机端1列，水平居中并保留留白 */
    .section2 .zp > ul.project-card-container {
        grid-template-columns: 1fr;
        gap:16px;
        padding: 0 16px 24px;
        max-width: 100%;
        margin: 0 auto;
    }

    .portfolio-update-note{
        width:fit-content;
        max-width:calc(100% - 32px);
        min-height:30px;
        margin-top:20px;
        margin-bottom:24px;
        padding:6px 11px;
        align-items:center;
        flex-direction:row;
        gap:7px;
    }

    .portfolio-update-note p{
        width:auto;
        font-size:11px;
        line-height:1.35;
        text-align:left;
    }

    /* 卡片自身居中，不贴边、不拉伸 */
    .section2 .zp > ul.project-card-container > li.span3.project-card {
        width:100%;
        margin: 0 auto;
        max-width:560px;
    }
}

@media (max-width: 480px) {
    section .section1{
        height:auto;
        min-height:0;
        padding-bottom:8px;
    }

    /* 1) 联系方式栏：固定2行3列，居中不拥挤 */
    #ico{
        position: static;
        bottom: auto;
        width: 100%;
        margin: 14px auto 0;
        padding: 0 16px 4px;
        box-sizing: border-box;
    }

    #ico ul{
        display: grid;
        grid-template-columns: repeat(3, max-content);
        grid-template-rows: 1fr;
        gap: 8px 18px;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
        padding: 4px 0 2px;
        box-sizing: border-box;
        justify-content: center;
        justify-items: center;
        align-items: center;
    }

    #ico ul li.contact-item{
        float: none;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 28px;
        text-align: center;
        white-space: nowrap;
    }

    #ico ul li [class^='ico-img']{
        width: 2em;
        height: 2em;
        flex: 0 0 2em;
    }

    #ico ul li i{
        margin-left: 0;
        font-size: 10.5px;
        line-height: 1.3;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }

    /* 2) 个人标语：两行居中，行高1.4，宽度适配手机 */
    .del-ins{
        height: auto;
        min-height: 0;
        margin: 10px auto 14px;
        padding: 0 10px;
        text-align: center;
        line-height: 1.4;
        font-size: clamp(18px, 5.2vw, 20px);
    }

    .del-ins .element{
        display: block;
        max-width: 100%;
        margin: 0 auto;
        line-height: 1.6;
        text-align: center;
        font-size: clamp(15px, 4.3vw, 18px);
        white-space: nowrap;
        word-break: keep-all;
        overflow-wrap: normal;
        text-wrap: initial;
        min-height: 3.2em;
    }

    .del-ins .element br{
        display:none;
    }

    .del-ins .element br:first-of-type{
        display:block;
    }

    .del-ins .typed-cursor{
        display:none;
    }

    /* 3) 卡片容器：手机端1列，左右16px对称留白 */
    .section2{
        margin: 0 auto 18px;
        padding: 0;
    }

    .section2 .zp > ul.project-card-container{
        grid-template-columns: 1fr !important;
        width: 100%;
        max-width: 100%;
        margin: 0 auto !important;
        padding: 0 16px 16px !important;
        box-sizing: border-box;
        gap: 14px;
    }

    .section2 .zp > ul.project-card-container > li.span3.project-card{
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .section2 .zp > ul.project-card-container > li.span3.project-card .zpbox{
        width: 100%;
        box-sizing: border-box;
    }

    .section2 .zp > ul.project-card-container > li.span3.project-card img{
        width: 100%;
        height: auto;
        display: block;
        border-radius: 12px;
    }

    /* 4) 详情页标题与正文：左右留白，标题可换行 */
    .zhuoping1{
        width:100%;
        padding:24px 16px 72px;
        box-sizing:border-box;
    }

    .zhuoping1 .title{
        width:100%;
        margin:0 0 24px;
    }

    .zhuoping1 .title h3{
        font-size:clamp(34px, 9vw, 44px);
        line-height:1.15;
        margin:0 0 12px;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .zhuoping1 .title h5{
        font-size:clamp(15px, 4.4vw, 18px);
        line-height:1.75;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .zhuoping1 .title .fenglei{
        margin-top:18px;
        gap:8px 14px;
    }
}

.project-card{
    list-style:none;
}

.project-card .zpimg{
    height:auto;
    aspect-ratio:4 / 3;
    overflow:hidden;
}

.project-card .zpimg img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.lazy-media-frame{
    --lazy-frame-bg:#e3e8f0;
    --lazy-frame-line:rgba(255, 255, 255, 0.72);
    --lazy-frame-text:#6f7888;
    position:relative;
    display:block;
    width:100%;
    overflow:hidden;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 42%),
        var(--lazy-frame-bg);
    color:var(--lazy-frame-text);
    isolation:isolate;
    min-height:120px;
}

.lazy-media-frame::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(90deg, transparent 0%, var(--lazy-frame-line) 48%, transparent 100%);
    opacity:0;
    transform:translateX(-120%);
    pointer-events:none;
}

.lazy-media-frame.is-loading.is-near-viewport::before{
    opacity:0.9;
    animation:lazy-media-shimmer 1.35s ease-in-out infinite;
}

.lazy-media-image{
    position:relative;
    z-index:2;
    display:block;
    width:100%;
    max-width:100%;
    opacity:0;
    transition:
        opacity 0.42s ease,
        filter 0.42s ease,
        transform 0.42s ease;
}

.lazy-media-frame.is-loaded .lazy-media-image{
    opacity:1;
}

.lazy-media-frame.is-error .lazy-media-image{
    opacity:0;
    filter:none;
}

.lazy-media-status{
    position:absolute;
    inset:0;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    color:var(--lazy-frame-text);
    font-size:13px;
    font-weight:600;
    letter-spacing:0;
    opacity:1;
    transition:opacity 0.28s ease;
    pointer-events:none;
}

.lazy-media-frame.is-loaded .lazy-media-status{
    opacity:0;
}

.lazy-media-spinner{
    width:16px;
    height:16px;
    border-radius:50%;
    border:2px solid rgba(111, 120, 136, 0.24);
    border-top-color:var(--accent);
    animation:lazy-media-spin 0.82s linear infinite;
}

.lazy-media-frame.is-error{
    background:#f1dfe3;
}

.lazy-media-frame.is-error .lazy-media-status{
    color:#a33d55;
    opacity:1;
    flex-direction:column;
    gap:8px;
    padding:16px;
    text-align:center;
    line-height:1.35;
}

.lazy-media-frame.is-error .lazy-media-status::before{
    content:"+";
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(255,255,255,0.92);
    color:#a33d55;
    font-size:28px;
    font-weight:700;
    line-height:1;
    box-shadow:0 8px 22px rgba(163,61,85,0.12);
}

.lazy-media-frame.is-error .lazy-media-spinner{
    display:none;
}

.project-card .lazy-media-frame.is-error .lazy-media-status{
    font-size:12px;
    padding:10px;
}

.project-card .lazy-media-frame.is-error .lazy-media-status::before{
    width:28px;
    height:28px;
    font-size:23px;
}

.zhuoping1 .zpimg > .lazy-media-frame{
    margin:0 auto;
}

.zhuoping1 .zpimg > .lazy-media-frame:last-child{
    margin-bottom:0;
}

.zhuoping1 .zpimg .lazy-media-image{
    height:auto;
    margin:0;
}

.zhuoping1 .zpimg > .simtek-video-panel{
    position:relative;
    display:block;
    width:100%;
    margin:0 auto;
    overflow:hidden;
    line-height:0;
}

.zhuoping1 .zpimg > .simtek-video-panel .lazy-media-frame,
.zhuoping1 .zpimg > .simtek-video-panel img{
    display:block;
    width:100%;
    margin:0 !important;
}

.simtek-video-overlay{
    position:absolute;
    left:41.36%;
    top:8.59%;
    width:51.15%;
    height:71.04%;
    z-index:4;
    display:block;
    background:#050d0f;
    object-fit:cover;
    object-position:center;
    border:0;
    pointer-events:none;
}

.project-card .zpimg .lazy-media-frame{
    height:100%;
    min-height:0;
    border-radius:12px;
}

.project-card .zpimg .lazy-media-image{
    height:100%;
    object-fit:cover;
    object-position:center;
}

.lazy-media-inline{
    min-height:80px;
}

body.theme-dark .lazy-media-frame{
    --lazy-frame-bg:#222b38;
    --lazy-frame-line:rgba(255, 255, 255, 0.12);
    --lazy-frame-text:#aeb9c9;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 44%),
        var(--lazy-frame-bg);
}

body.theme-dark .lazy-media-spinner{
    border-color:rgba(174, 185, 201, 0.22);
    border-top-color:var(--accent-soft);
}

@keyframes lazy-media-shimmer{
    from{
        transform:translateX(-120%);
    }
    to{
        transform:translateX(120%);
    }
}

@keyframes lazy-media-spin{
    to{
        transform:rotate(360deg);
    }
}

@supports not (aspect-ratio: 4 / 3){
    .project-card .zpimg{
        position:relative;
        height:0;
        padding-top:75%;
    }

    .project-card .zpimg img{
        position:absolute;
        inset:0;
    }
}

/* 2026-04-23 detail pages: align intro width with media and optimize typography */
.zhuoping1{
    width:min(100%, calc(100% - 32px)) !important;
    padding:clamp(24px, 3.6vw, 42px) 0 clamp(52px, 6.4vw, 88px) !important;
}

.zhuoping1{
    --detail-content-width:min(840px, 100%);
}

.zhuoping1 .title,
.zhuoping1 .zpimg{
    width:var(--detail-content-width) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.zhuoping1 .title{
    margin-bottom:clamp(22px, 3vw, 34px) !important;
}

.zhuoping1 .title h3,
.zhuoping1 .title h5,
.zhuoping1 .title .fenglei{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

.zhuoping1 .title h3{
    font-size:clamp(40px, 4vw, 56px) !important;
    line-height:1.2 !important;
    margin-bottom:48px !important;
}

.zhuoping1 .title h5{
    font-size:14px !important;
    line-height:1.45 !important;
    text-align:left !important;
    margin-bottom:0 !important;
    word-break:normal;
    line-break:strict;
    overflow-wrap:break-word;
    text-wrap:pretty;
}

.zhuoping1 .title h5 br{
    display:block;
    content:"";
    margin:7px 0;
}

.zhuoping1 .title h4{
    width:100% !important;
    max-width:none !important;
    margin:0 0 6px !important;
    font-size:16px !important;
    line-height:1.45 !important;
    color:var(--headline) !important;
    font-weight:700 !important;
    text-align:left !important;
}

/* shared structured-copy rhythm for all detail pages */
.zhuoping1 .title h5.title-copy-block{
    line-height:1.45 !important;
    word-break:normal;
    line-break:strict;
    overflow-wrap:normal;
    text-wrap:pretty;
}

.zhuoping1 .title h5.title-copy-block .em{
    display:inline;
    font-weight:700;
}

.zhuoping1 .title h5.title-copy-block > .copy-section-title,
.zhuoping1 .title h5.title-copy-block > .copy-paragraph,
.zhuoping1 .title h5.title-copy-block > .copy-item,
.zhuoping1 .title h5.title-copy-block > .copy-item-group{
    display:block;
}

.zhuoping1 .title h5.title-copy-block > .copy-section-title{
    margin:0 0 3px;
    font-size:16px;
    line-height:1.45;
}

.zhuoping1 .title h5.title-copy-block > .copy-section-title + .copy-paragraph,
.zhuoping1 .title h5.title-copy-block > .copy-section-title + .copy-item,
.zhuoping1 .title h5.title-copy-block > .copy-section-title + .copy-item-group{
    margin-top:0;
}

.zhuoping1 .title h5.title-copy-block > .copy-paragraph + .copy-section-title,
.zhuoping1 .title h5.title-copy-block > .copy-item + .copy-section-title,
.zhuoping1 .title h5.title-copy-block > .copy-item-group + .copy-section-title{
    margin-top:26px;
}

.zhuoping1 .title h5.title-copy-block > .copy-section-title:first-of-type{
    display:flex;
    align-items:center;
    gap:12px;
    padding-left:0;
}

.zhuoping1 .title h5.title-copy-block > .copy-section-title:first-of-type::before{
    content:"";
    position:static;
    width:6px;
    min-width:6px;
    height:28px;
    border-radius:2px;
    background:var(--accent);
}

.zhuoping1 .title h5.title-copy-block > .copy-paragraph{
    margin:0 0 20px;
}

.zhuoping1 .title h5.title-copy-block > .copy-paragraph:has(> .em:only-child){
    margin-bottom:3px;
}

.zhuoping1 .title h5.title-copy-block > .copy-item{
    margin:0 0 6px;
    padding-left:0;
    text-indent:0;
}

.zhuoping1 .title h5.title-copy-block > .copy-item-group{
    margin:0 0 22px;
}

.zhuoping1 .title h5.title-copy-block > .copy-item-group > .copy-item{
    display:block;
    margin:0;
    padding-left:0;
    text-indent:0;
}

.zhuoping1 .title h5.title-copy-block > .copy-item-group > .copy-item + .copy-item{
    margin-top:4px;
}

.zhuoping1 .title h5.title-copy-block > .copy-item-group > .copy-item:last-child,
.zhuoping1 .title h5.title-copy-block > .copy-paragraph:last-child,
.zhuoping1 .title h5.title-copy-block > .copy-item-group:last-child{
    margin-bottom:0;
}

.zhuoping1 .title .fenglei{
    font-size:0 !important;
    line-height:1.45 !important;
    margin-top:18px !important;
    display:flex !important;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 0 !important;
}

.zhuoping1 .title .fenglei span{
    font-size:14px !important;
}

.zhuoping1 .title .fenglei span + span::before{
    content:"|";
    color:#c5cad3;
    margin:0 14px;
}

@media (max-width: 900px){
    html,
    body{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        overflow-x:hidden !important;
    }

    section{
        max-width:100vw !important;
        overflow-x:hidden !important;
    }

    .zhuoping1{
        width:100% !important;
        max-width:100vw !important;
        padding:18px 0 52px !important;
        box-sizing:border-box;
        --detail-content-width:min(840px, calc(100vw - 48px));
        overflow-x:hidden;
    }

    .zhuoping1 .title,
    .zhuoping1 .zpimg{
        width:var(--detail-content-width) !important;
        max-width:var(--detail-content-width) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .zhuoping1 .zpimg > .lazy-media-frame,
    .zhuoping1 .zpimg img{
        max-width:100% !important;
    }

    .zhuoping1 .title{
        margin-bottom:20px !important;
    }

    .zhuoping1 .title h3{
        font-size:clamp(30px, 7.8vw, 40px) !important;
        line-height:1.22 !important;
        margin-bottom:32px !important;
    }

    .zhuoping1 .title h5{
        font-size:14px !important;
        line-height:1.45 !important;
        text-wrap:auto !important;
        word-break:normal !important;
        overflow-wrap:anywhere !important;
    }

    .zhuoping1 .title h5 br{
        margin:6px 0;
    }

    .zhuoping1 .title h5.title-copy-block{
        line-height:1.45 !important;
        text-wrap:auto !important;
        word-break:normal !important;
        overflow-wrap:anywhere !important;
    }

    .zhuoping1 .title h5.title-copy-block > .copy-paragraph,
    .zhuoping1 .title h5.title-copy-block > .copy-item,
    .zhuoping1 .title h5.title-copy-block > .copy-item-group > .copy-item{
        text-align:justify;
        text-justify:inter-character;
        text-wrap:auto !important;
        word-break:normal !important;
        overflow-wrap:anywhere !important;
    }

    .zhuoping1 .title h5.title-copy-block > .copy-section-title{
        margin-bottom:3px;
        line-height:1.45;
    }

    .zhuoping1 .title h5.title-copy-block > .copy-section-title + .copy-paragraph,
    .zhuoping1 .title h5.title-copy-block > .copy-section-title + .copy-item,
    .zhuoping1 .title h5.title-copy-block > .copy-section-title + .copy-item-group{
        margin-top:0;
    }

    .zhuoping1 .title h5.title-copy-block > .copy-paragraph + .copy-section-title,
    .zhuoping1 .title h5.title-copy-block > .copy-item + .copy-section-title,
    .zhuoping1 .title h5.title-copy-block > .copy-item-group + .copy-section-title{
        margin-top:20px;
    }

    .zhuoping1 .title h5.title-copy-block > .copy-section-title:first-of-type{
        gap:10px;
        padding-left:0;
    }

    .zhuoping1 .title h5.title-copy-block > .copy-section-title:first-of-type::before{
        position:static;
        width:5px;
        min-width:5px;
        height:24px;
    }

    .zhuoping1 .title h5.title-copy-block > .copy-paragraph{
        margin-bottom:17px;
    }

    .zhuoping1 .title h5.title-copy-block > .copy-item{
        margin-bottom:6px;
    }

    .zhuoping1 .title h5.title-copy-block > .copy-item-group{
        margin-bottom:18px;
    }

    .zhuoping1 .title .fenglei{
        font-size:0 !important;
        line-height:1.45 !important;
        margin-top:14px !important;
        gap:6px 0 !important;
    }

    .zhuoping1 .title .fenglei span{
        font-size:13px !important;
    }

    .zhuoping1 .title .fenglei span + span::before{
        content:none !important;
        display:none !important;
        margin:0 !important;
    }
}

@media (max-width: 480px){
    .zhuoping1{
        padding:16px 0 44px !important;
        --detail-content-width:min(840px, calc(100vw - 48px));
    }

    .zhuoping1 .title{
        margin-bottom:18px !important;
    }

    .zhuoping1 .title .fenglei{
        margin-top:12px !important;
        gap:6px 10px !important;
    }
}

/* Final detail-media seam guard, kept last to override lazy wrappers and mobile rules. */
.zhuoping1 .zpimg > img,
.zhuoping1 .zpimg > .lazy-media-frame,
.zhuoping1 .zpimg > .video-content-wrap,
.zhuoping1 .zpimg > .funip-media-gap{
    display:block !important;
    vertical-align:top !important;
}

.zhuoping1 .zpimg > img:not(:first-child),
.zhuoping1 .zpimg > .lazy-media-frame:not(:first-child),
.zhuoping1 .zpimg > .video-content-wrap:not(:first-child),
.zhuoping1 .zpimg > .funip-media-gap:not(:first-child){
    margin-top:-1px !important;
}

body.is-wechat-browser .zhuoping1 .zpimg > img:not(:first-child),
body.is-wechat-browser .zhuoping1 .zpimg > .lazy-media-frame:not(:first-child),
body.is-wechat-browser .zhuoping1 .zpimg > .video-content-wrap:not(:first-child),
body.is-wechat-browser .zhuoping1 .zpimg > .funip-media-gap:not(:first-child){
    margin-top:-2px !important;
}

/* About page redesign */
section .section1.about-stage{
    height:auto;
    min-height:780px;
    padding:88px 32px 54px;
    border-bottom:0;
    overflow:hidden;
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 126, 151, 0.30), transparent 32%),
        radial-gradient(circle at 82% 16%, rgba(126, 222, 202, 0.22), transparent 30%),
        linear-gradient(135deg, #fff5f4 0%, #f8efff 46%, #eef8ff 100%);
}

.about-stage::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.42) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,0.42) 1px, transparent 1px);
    background-size:72px 72px;
    opacity:0.45;
    pointer-events:none;
}

.about-bg-card{
    position:absolute;
    width:310px;
    height:210px;
    border-radius:34px;
    background:rgba(255,255,255,0.48);
    border:1px solid rgba(255,255,255,0.7);
    box-shadow:0 28px 72px rgba(66, 38, 88, 0.12);
    filter:blur(1px);
    opacity:0.58;
    pointer-events:none;
}

.about-bg-card-one{
    left:-72px;
    top:56px;
    transform:rotate(-10deg);
}

.about-bg-card-two{
    right:-56px;
    bottom:132px;
    transform:rotate(8deg);
}

.about-shell{
    position:relative;
    z-index:1;
    width:min(1180px, 100%);
    margin:0 auto;
}

.about-hero-panel{
    --tilt-x:0deg;
    --tilt-y:0deg;
    position:relative;
    min-height:480px;
    padding:26px 30px 34px;
    border-radius:42px;
    background:rgba(255,255,255,0.88);
    border:1px solid rgba(255,255,255,0.9);
    box-shadow:0 30px 90px rgba(51, 36, 64, 0.18);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style:preserve-3d;
    transition:transform 0.22s ease, box-shadow 0.22s ease;
}

.about-hero-panel:hover{
    box-shadow:0 42px 120px rgba(51, 36, 64, 0.24);
}

.about-navline,
.about-hero-grid,
.about-actions,
.skill-file-grid,
.desk-heading{
    display:flex;
}

.about-navline{
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:0;
}

.about-logo.logo{
    width:112px;
    margin:0;
    padding:0;
}

.resume-download,
.about-primary-action,
.about-secondary-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    border-radius:999px;
    font-weight:800;
    line-height:1;
    transition:transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.resume-download{
    position:absolute;
    right:30px;
    top:24px;
    z-index:5;
    gap:9px;
    padding:0 18px;
    color:#25242a;
    background:#fff;
    border:1px solid rgba(37,36,42,0.08);
    box-shadow:0 10px 30px rgba(255, 88, 111, 0.18);
}

.resume-download:hover,
.resume-download:focus{
    color:#25242a;
    background:#fff;
}

.about-secondary-action:hover,
.about-secondary-action:focus{
    color:#ff4d68;
    background:#fff;
}

.resume-download:hover,
.about-primary-action:hover,
.about-secondary-action:hover{
    transform:translateY(-3px);
}

.resume-download-icon{
    width:19px;
    height:22px;
    border-radius:4px;
    background:linear-gradient(180deg, #ff5d73, #ff8c72);
    position:relative;
    box-shadow:inset 0 -5px 0 rgba(255,255,255,0.26);
}

.resume-download-icon::after{
    content:"";
    position:absolute;
    left:5px;
    top:6px;
    width:9px;
    height:9px;
    border-left:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:rotate(-45deg);
}

.about-hero-grid{
    align-items:flex-start;
    justify-content:space-between;
    gap:32px;
}

.about-copy{
    width:min(680px, 58%);
    padding:30px 12px 24px;
}

.about-kicker{
    display:inline-flex;
    padding:8px 13px;
    border-radius:999px;
    background:#fff0a8;
    color:#5a2c75;
    font-size:13px;
    font-weight:800;
    letter-spacing:0;
}

.about-copy h1{
    margin:18px 0 12px;
    color:#242028;
    font-size:clamp(42px, 5.4vw, 86px);
    line-height:0.96;
    letter-spacing:0;
    font-weight:900;
}

.about-stage .del-ins{
    height:auto;
    min-height:38px;
    margin:0 0 14px;
    padding:0;
    text-align:left;
    line-height:1.2;
    font-size:22px;
    color:#ff506b;
}

.about-stage .element{
    color:#ff506b;
}

.about-name-line{
    margin:0 0 20px;
    color:#ff506b;
    font-size:24px;
    line-height:1.35;
    font-weight:900;
}

.about-intro{
    max-width:500px;
    color:#67606d;
    font-size:16px;
    line-height:1.8;
    text-wrap:pretty;
}

.about-actions{
    gap:12px;
    flex-wrap:wrap;
    margin-top:24px;
}

.about-primary-action,
.about-secondary-action{
    gap:10px;
    padding:0 16px 0 22px;
    font-size:14px;
}

.about-primary-action{
    color:#fff;
    background:#25242a;
    box-shadow:0 14px 30px rgba(37,36,42,0.18);
}

.about-secondary-action{
    color:#ff4d68;
    background:#fff;
    border:1px solid rgba(255,77,104,0.2);
}

.about-button-icon{
    position:relative;
    display:inline-flex;
    width:26px;
    height:26px;
    flex:0 0 26px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
}

.about-primary-action .about-button-icon{
    background:transparent;
}

.about-secondary-action .about-button-icon{
    background:transparent;
}

.about-button-icon-arrow::before{
    content:"";
    width:8px;
    height:8px;
    border-top:2px solid currentColor;
    border-right:2px solid currentColor;
    transform:translateX(-1px) rotate(45deg);
}

.about-button-icon-arrow::after{
    content:"";
    position:absolute;
    width:10px;
    height:2px;
    background:currentColor;
    transform:translateX(-3px);
}

.about-button-icon-eye::before{
    content:"";
    width:16px;
    height:10px;
    border:2px solid currentColor;
    border-radius:50%;
}

.about-button-icon-eye::after{
    content:"";
    position:absolute;
    width:5px;
    height:5px;
    border-radius:50%;
    background:currentColor;
}

.about-showcase{
    position:relative;
    width:min(420px, 38%);
    min-height:410px;
    margin-top:-28px;
    transform:translateZ(34px);
}

@media (min-width: 1180px){
    .about-copy h1{
        white-space:nowrap;
        font-size:clamp(54px, 4.2vw, 72px);
    }
}

.profile-ticket,
.profile-portrait-card,
.profile-mini-card{
    position:absolute;
    border-radius:26px;
    background:#fff;
    border:1px solid rgba(255,255,255,0.95);
    box-shadow:0 24px 62px rgba(56, 35, 70, 0.16);
}

.profile-ticket{
    top:0;
    right:12px;
    width:210px;
    padding:18px;
    transform:rotate(6deg);
}

.ticket-label{
    display:inline-block;
    margin-bottom:12px;
    padding:5px 9px;
    border-radius:999px;
    background:#ff657a;
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.profile-ticket strong,
.profile-ticket span{
    display:block;
}

.profile-ticket strong{
    color:#242028;
    font-size:22px;
    line-height:1.05;
}

.profile-ticket span:last-child{
    margin-top:8px;
    color:#8a8291;
    font-size:13px;
}

.profile-portrait-card{
    left:22px;
    top:62px;
    width:285px;
    height:310px;
    overflow:hidden;
    background:linear-gradient(180deg, #fff 0%, #ffe7eb 100%);
}

.portrait-orbit{
    position:absolute;
    inset:34px 38px auto;
    height:180px;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 44%, #ff6b80 0 28%, transparent 29%),
        conic-gradient(from 120deg, #42dfc6, #ff6b80, #ffe66b, #42dfc6);
    opacity:0.9;
    filter:saturate(1.08);
}

.portrait-mono{
    position:absolute;
    left:50%;
    top:86px;
    width:130px;
    height:130px;
    margin-left:-65px;
    border-radius:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:#25242a;
    font-size:86px;
    font-weight:900;
    box-shadow:0 18px 42px rgba(37,36,42,0.28);
}

.portrait-caption{
    position:absolute;
    left:22px;
    right:22px;
    bottom:22px;
    padding:16px;
    border-radius:20px;
    background:rgba(255,255,255,0.72);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
}

.portrait-caption b,
.portrait-caption span{
    display:block;
}

.portrait-caption b{
    color:#242028;
    font-size:20px;
}

.portrait-caption span{
    margin-top:4px;
    color:#756d7b;
    font-size:13px;
}

.profile-mini-card{
    width:118px;
    padding:16px;
}

.profile-mini-card b,
.profile-mini-card span{
    display:block;
}

.profile-mini-card b{
    color:#242028;
    font-size:28px;
    line-height:1;
}

.profile-mini-card span{
    margin-top:7px;
    color:#756d7b;
    font-size:13px;
}

.profile-mini-card-a{
    left:0;
    bottom:18px;
    background:#e9f7ce;
    transform:rotate(-5deg);
}

.profile-mini-card-b{
    right:12px;
    bottom:46px;
    background:#fff2a7;
    transform:rotate(4deg);
}

.skill-document-desk{
    position:relative;
    margin:28px auto 0;
    padding:30px 32px 32px;
    border-radius:34px;
    background:rgba(255,255,255,0.92);
    border:1px solid rgba(255,255,255,0.86);
    box-shadow:0 24px 80px rgba(62, 45, 80, 0.12);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    overflow:hidden;
}

.skill-document-desk::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 8% 10%, rgba(255, 242, 72, 0.42) 0 10%, transparent 11%),
        linear-gradient(90deg, rgba(44,117,246,0.07) 1px, transparent 1px),
        linear-gradient(0deg, rgba(44,117,246,0.07) 1px, transparent 1px);
    background-size:auto, 74px 74px, 74px 74px;
    opacity:0.78;
    pointer-events:none;
}

.desk-heading{
    position:relative;
    z-index:2;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:30px;
}

.desk-heading span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:rgba(89,77,102,0.68);
    font-size:13px;
    font-weight:800;
}

.desk-heading span::before{
    content:"";
    width:16px;
    height:18px;
    flex:0 0 16px;
    border-radius:4px;
    background:linear-gradient(180deg, #ff6077 0%, #ff9a7c 100%);
    box-shadow:0 8px 18px rgba(255, 87, 112, 0.24);
    clip-path:polygon(0 0, 72% 0, 100% 28%, 100% 100%, 0 100%);
}

.desk-heading b{
    color:#3a3144;
    font-size:16px;
    line-height:1.35;
    font-weight:800;
    opacity:0.86;
}

.skill-file-grid{
    position:relative;
    z-index:2;
    gap:26px 24px;
    align-items:stretch;
}

.skill-file{
    position:relative;
    flex:1 1 0;
    min-height:236px;
    padding:126px 24px 24px;
    border-radius:34px;
    color:#2b2530;
    background:transparent;
    border:0;
    box-shadow:none;
    transform:translateY(0) rotate(var(--file-rotate, 0deg));
    transition:transform 0.24s ease, box-shadow 0.24s ease;
    cursor:pointer;
    overflow:visible;
}

.skill-file::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:66px;
    border-radius:0 34px 34px 34px;
    background:linear-gradient(180deg, var(--folder-front, #fffdf7) 0%, var(--folder-front-low, #f4efe5) 100%);
    border:1px solid rgba(255,255,255,0.82);
    box-shadow:0 22px 42px rgba(58, 48, 62, 0.16), inset 0 1px 0 rgba(255,255,255,0.92);
    z-index:1;
}

.skill-file::before{
    content:"";
    position:absolute;
    left:22px;
    right:18px;
    top:18px;
    height:108px;
    border-radius:30px 30px 16px 16px;
    background:linear-gradient(180deg, var(--folder-back, #d9d5cc) 0%, var(--folder-back-low, #c9c4ba) 100%);
    border:1px solid rgba(255,255,255,0.72);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
    pointer-events:none;
    z-index:0;
}

.skill-file:hover,
.skill-file:focus,
.skill-file.is-active{
    transform:translateY(-14px) rotate(0deg);
    box-shadow:0 30px 62px rgba(58, 48, 62, 0.14);
    outline:none;
}

.skill-file-ui{
    --file-rotate:-1.5deg;
    --folder-front:#fffdf8;
    --folder-front-low:#f2eadf;
    --folder-back:#d6d2c9;
    --folder-back-low:#c7c1b6;
}

.skill-file-brand{
    --file-rotate:1deg;
    --folder-front:#fffdf8;
    --folder-front-low:#f2eadf;
    --folder-back:#dedbd2;
    --folder-back-low:#cbc6bc;
}

.skill-file-ai{
    --file-rotate:-1deg;
    --folder-front:#fffdf8;
    --folder-front-low:#f2eadf;
    --folder-back:#d8d4ca;
    --folder-back-low:#c7c1b6;
}

.skill-file-delivery{
    --file-rotate:1.2deg;
    --folder-front:#fffdf8;
    --folder-front-low:#f2eadf;
    --folder-back:#dedbd2;
    --folder-back-low:#cbc6bc;
}

.folder-stickers{
    position:absolute;
    left:32px;
    top:78px;
    width:42px;
    height:42px;
    z-index:4;
    pointer-events:none;
}

.sticker{
    position:absolute;
    display:block;
    left:0;
    top:0;
    width:32px;
    height:32px;
    border-radius:12px;
    background:#fff;
    border:2px solid rgba(255,255,255,0.98);
    box-shadow:0 8px 18px rgba(58, 48, 62, 0.16);
}

.sticker:nth-child(n+2){
    display:none;
}

.sticker-window{
    border-radius:50%;
    background:
        radial-gradient(circle at 30% 34%, #ff5d72 0 11%, transparent 12%),
        radial-gradient(circle at 66% 32%, #ffcf4a 0 10%, transparent 11%),
        radial-gradient(circle at 64% 66%, #31c9b9 0 10%, transparent 11%),
        radial-gradient(circle at 34% 68%, #7b7bff 0 10%, transparent 11%),
        #f6e27a;
}

.sticker-phone{
    left:56px;
    top:12px;
    width:34px;
    height:58px;
    border-radius:14px;
    background:#25242a;
    transform:rotate(-8deg);
}

.sticker-grid{
    left:102px;
    top:28px;
    width:54px;
    height:42px;
    border-radius:18px;
    background:linear-gradient(90deg, #ff6b7d 0 33%, #fff 33% 66%, #2ad7c8 66%);
    transform:rotate(7deg);
}

.sticker-kv{
    border-radius:12px;
    background:linear-gradient(135deg, #fff0a8, #ff657a);
    transform:rotate(-7deg);
}

.sticker-star{
    left:92px;
    top:8px;
    width:40px;
    height:40px;
    border-radius:50%;
    background:#fff;
}

.sticker-star::before{
    content:"★";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ff5b6e;
    font-size:22px;
}

.sticker-card{
    left:134px;
    top:34px;
    width:58px;
    height:38px;
    border-radius:18px;
    background:#5a287e;
    transform:rotate(8deg);
}

.sticker-orbit{
    border-radius:50%;
    background:conic-gradient(#ffef5f, #42dfc6, #7d7bff, #ffef5f);
}

.sticker-chip{
    left:76px;
    top:12px;
    width:56px;
    height:48px;
    border-radius:18px;
    background:#25242a;
    transform:rotate(8deg);
}

.sticker-chip::before{
    content:"AI";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:900;
}

.sticker-spark{
    left:140px;
    top:34px;
    width:44px;
    height:44px;
    border-radius:18px;
    background:#fff;
    transform:rotate(-8deg);
}

.sticker-spark::before{
    content:"✦";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ff7b45;
    font-size:24px;
}

.sticker-mail{
    border-radius:12px;
    background:#fff;
}

.sticker-mail::before{
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    top:9px;
    height:12px;
    border-left:3px solid #8ea1bd;
    border-bottom:3px solid #8ea1bd;
    transform:rotate(-45deg);
}

.sticker-check{
    left:86px;
    top:10px;
    width:48px;
    height:48px;
    border-radius:50%;
    background:#25242a;
}

.sticker-check::before{
    content:"✓";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:26px;
    font-weight:900;
}

.sticker-note{
    left:140px;
    top:28px;
    width:54px;
    height:50px;
    border-radius:18px;
    background:#fff0a8;
    transform:rotate(7deg);
}

.file-tab{
    position:relative;
    z-index:3;
    display:inline-flex;
    width:42px;
    height:28px;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(255,255,255,0.72);
    color:#5a287e;
    font-size:13px;
    font-weight:900;
}

.skill-file h3{
    position:relative;
    z-index:3;
    margin:22px 0 9px;
    color:#2b2530;
    font-size:23px;
    line-height:1.12;
}

.skill-file p{
    position:relative;
    z-index:3;
    color:#615669;
    font-size:13px;
    line-height:1.55;
}

.skill-detail{
    position:absolute;
    left:16px;
    right:16px;
    bottom:16px;
    z-index:4;
    padding:14px;
    border-radius:18px;
    background:rgba(255,255,255,0.86);
    box-shadow:0 14px 34px rgba(56, 36, 66, 0.12);
    opacity:0;
    transform:translateY(18px);
    transition:opacity 0.22s ease, transform 0.22s ease;
}

.skill-file:hover .skill-detail,
.skill-file:focus .skill-detail,
.skill-file.is-active .skill-detail{
    opacity:1;
    transform:translateY(0);
}

.skill-detail b,
.skill-detail span{
    display:block;
}

.skill-detail b{
    margin-bottom:6px;
    color:#ff4f68;
    font-size:13px;
}

.about-profile-modules{
    padding:30px;
}

.about-profile-modules::before{
    background:
        radial-gradient(circle at 9% 12%, rgba(255, 242, 72, 0.34) 0 10%, transparent 11%),
        radial-gradient(circle at 86% 10%, rgba(255, 93, 115, 0.12), transparent 24%),
        linear-gradient(90deg, rgba(44,117,246,0.06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(44,117,246,0.06) 1px, transparent 1px);
    background-size:auto, auto, 74px 74px, 74px 74px;
}

.about-module-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
}

.about-module-card{
    position:relative;
    min-height:210px;
    padding:24px;
    border-radius:26px;
    background:rgba(255, 255, 255, 0.78);
    border:1px solid rgba(255, 255, 255, 0.84);
    box-shadow:0 18px 44px rgba(56, 36, 66, 0.1);
    overflow:hidden;
    transition:transform 0.24s ease, box-shadow 0.24s ease, background-color 0.24s ease;
}

.about-module-card:hover{
    transform:translateY(-6px);
    background:#fff;
    box-shadow:0 24px 54px rgba(56, 36, 66, 0.14);
}

.about-module-wide{
    grid-column:span 2;
}

.about-module-card::after{
    content:"";
    position:absolute;
    right:-42px;
    top:-42px;
    width:118px;
    height:118px;
    border-radius:50%;
    background:rgba(255, 82, 110, 0.08);
}

.about-module-icon{
    position:relative;
    z-index:1;
    display:inline-flex;
    width:42px;
    height:42px;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:linear-gradient(135deg, #ff6077 0%, #ff9a7c 100%);
    box-shadow:0 12px 26px rgba(255, 87, 112, 0.24);
}

.about-module-icon::before{
    content:"";
    width:18px;
    height:18px;
    border:2px solid #fff;
}

.about-module-icon-choice::before{
    border-left:0;
    border-top:0;
    width:11px;
    height:20px;
    transform:rotate(42deg) translateY(-2px);
}

.about-module-icon-core::before{
    border-radius:50%;
    background:conic-gradient(from 90deg, transparent 0 25%, rgba(255,255,255,0.95) 25% 50%, transparent 50% 75%, rgba(255,255,255,0.95) 75% 100%);
}

.about-module-icon-work::before{
    width:20px;
    height:12px;
    border-radius:3px;
    box-shadow:0 8px 0 -2px #fff;
}

.about-module-icon-track::before{
    width:4px;
    height:22px;
    border:0;
    border-radius:999px;
    background:#fff;
    box-shadow:-8px 3px 0 -1px #fff, 8px -3px 0 -1px #fff;
}

.about-module-icon-advantage::before{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 0 6px rgba(255,255,255,0.28);
}

.about-module-icon-resume::before{
    width:17px;
    height:21px;
    border-radius:3px;
    background:linear-gradient(#fff 0 0) 50% 8px / 9px 2px no-repeat,
        linear-gradient(#fff 0 0) 50% 14px / 9px 2px no-repeat;
}

.about-module-eyebrow{
    margin:18px 0 8px;
    color:#ff506b;
    font-size:12px;
    font-weight:900;
    letter-spacing:0;
}

.about-module-card h3{
    position:relative;
    z-index:1;
    margin:0 0 12px;
    color:#2b2530;
    font-size:22px;
    line-height:1.2;
    font-weight:900;
}

.about-module-card p,
.about-module-card li{
    position:relative;
    z-index:1;
    color:#615669;
    font-size:14px;
    line-height:1.75;
}

.about-module-card ul,
.about-module-card ol{
    position:relative;
    z-index:1;
    margin:0;
    padding-left:18px;
}

.about-module-resume a{
    position:relative;
    z-index:1;
    display:inline-flex;
    min-height:38px;
    margin-top:8px;
    padding:0 15px;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    color:#fff;
    background:#25242a;
    font-size:13px;
    font-weight:900;
    box-shadow:0 14px 30px rgba(37,36,42,0.18);
}

.about-module-resume a:hover,
.about-module-resume a:focus{
    color:#fff;
    background:#25242a;
}

.about-main-content{
    display:block;
    margin:34px auto 0;
    color:#2b2530;
}

.about-info-section,
.about-contact-footer{
    position:relative;
    margin:26px auto 0;
    padding:30px;
    border-radius:32px;
    background:rgba(255, 255, 255, 0.86);
    border:1px solid rgba(255, 255, 255, 0.88);
    box-shadow:0 22px 70px rgba(62, 45, 80, 0.1);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
}

.why-card,
.capability-folder,
.capability-card,
.workflow-step,
.workflow-node,
.about-content-grid .about-info-section,
.resume-paper-card,
.contact-info-row a,
.contact-info-row p,
.contact-qr{
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease;
}

.why-card:hover,
.capability-folder:hover,
.capability-card:hover,
.workflow-step:hover,
.workflow-node:hover{
    transform:translateY(-3px);
}

.about-split-section{
    display:grid;
    grid-template-columns:190px minmax(0, 1fr);
    gap:28px;
    align-items:start;
}

.about-section-heading span{
    display:block;
    margin-bottom:8px;
    color:#ff506b;
    font-size:12px;
    font-weight:900;
    letter-spacing:0.04em;
}

.about-section-heading h2{
    margin:0;
    color:#2b2530;
    font-size:28px;
    line-height:1.12;
    font-weight:900;
}

.why-card-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
}

.why-card{
    position:relative;
    min-height:218px;
    padding:22px;
    border-radius:26px;
    background:#fff;
    border:1px solid rgba(255,255,255,0.92);
    box-shadow:0 16px 38px rgba(56, 36, 66, 0.09), inset 0 1px 0 rgba(255,255,255,0.9);
}

.hugeicon{
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

.about-card-icon{
    display:inline-flex;
    width:46px;
    height:46px;
    padding:10px;
    box-sizing:border-box;
    color:#ff506b;
    border-radius:16px;
    background:transparent;
    border:1px solid rgba(255, 80, 107, 0.24);
    box-shadow:none;
}

.why-card h3,
.capability-folder h3,
.workflow-step h3,
.journey-timeline h3,
.strength-list h3{
    margin:16px 0 8px;
    color:#2b2530;
    font-size:18px;
    line-height:1.25;
    font-weight:900;
}

.why-card p,
.capability-folder li,
.workflow-step p,
.journey-timeline p,
.strength-list p,
.resume-paper-card p,
.contact-info-row a,
.contact-info-row p{
    color:#655d6c;
    font-size:13px;
    line-height:1.7;
}

.why-card b{
    position:absolute;
    right:18px;
    bottom:16px;
    color:rgba(255, 80, 107, 0.28);
    font-size:30px;
    line-height:1;
}

.capability-folder-grid{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:14px;
    align-items:start;
}

.capability-folder{
    position:relative;
    min-height:0;
    padding:62px 16px 18px;
    border-radius:0 22px 22px 22px;
    background:linear-gradient(180deg, #fff 0%, #f8f6f1 100%);
    border:1px solid rgba(255,255,255,0.9);
    box-shadow:0 18px 40px rgba(56, 36, 66, 0.1);
}

.capability-folder::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:56%;
    height:42px;
    border-radius:20px 20px 12px 0;
    background:var(--folder-tab, #ff8a9a);
}

.folder-mark{
    position:absolute;
    left:16px;
    top:14px;
    width:24px;
    height:24px;
    color:rgba(43, 37, 48, 0.76);
    background:transparent;
}

.capability-folder p{
    margin:0 0 8px;
    color:#8c8392;
    font-size:12px;
    font-weight:900;
}

.capability-folder ul{
    margin:0;
    padding:0;
    list-style:none;
}

.folder-rose{--folder-tab:#ff8a9a;}
.folder-yellow{--folder-tab:#ffe08a;}
.folder-mint{--folder-tab:#aee9d4;}
.folder-blue{--folder-tab:#a9cdfa;}
.folder-lavender{--folder-tab:#d9c5ff;}
.folder-peach{--folder-tab:#ffc8a6;}

.workflow-steps{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:12px;
}

.workflow-step{
    position:relative;
    min-height:168px;
    padding:18px 14px;
    border-radius:24px;
    background:#fff;
    box-shadow:0 14px 34px rgba(56, 36, 66, 0.08);
}

.workflow-step:not(:last-child)::after{
    content:"";
    position:absolute;
    right:-12px;
    top:36px;
    width:18px;
    height:2px;
    background:rgba(255, 80, 107, 0.24);
}

.workflow-step span{
    display:inline-flex;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#ff506b;
    background:#fff4f6;
    border:1px solid rgba(255,80,107,0.16);
    font-size:13px;
    font-weight:900;
}

.workflow-step-ai{
    border:1px solid rgba(255,80,107,0.38);
    box-shadow:0 18px 44px rgba(255, 80, 107, 0.16);
}

.workflow-step-ai span{
    color:#fff;
    background:#ff506b;
}

.capability-system{
    display:grid;
    gap:16px;
}

.capability-card-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}

.capability-card{
    --capability-accent:#ff506b;
    --capability-soft:rgba(255,80,107,0.07);
    --capability-border:rgba(255,80,107,0.18);
    position:relative;
    min-height:218px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:18px;
    border:1px solid rgba(43, 37, 48, 0.08);
    border-radius:24px;
    background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,248,245,0.94));
    overflow:hidden;
}

.capability-card::before{
    content:"";
    position:absolute;
    inset:0 auto auto 0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg, var(--capability-accent), transparent 72%);
}

.capability-card::after{
    display:none;
}

.capability-card .folder-mark{
    position:relative;
    z-index:1;
    left:auto;
    top:auto;
    width:34px;
    height:34px;
    padding:7px;
    border-radius:12px;
    color:var(--capability-accent);
    background:var(--capability-soft);
    border:1px solid var(--capability-border);
}

.capability-card .capability-en{
    position:relative;
    z-index:1;
    margin:0;
    color:#918895;
    font-size:11px;
    font-weight:900;
    letter-spacing:0.06em;
    text-transform:uppercase;
}

.capability-card h3{
    position:relative;
    z-index:1;
    margin:0;
    color:#2b2530;
    font-size:22px;
    line-height:1.18;
    font-weight:900;
}

.capability-desc{
    position:relative;
    z-index:1;
    margin:0;
    color:#6c6370;
    font-size:13px;
    line-height:1.58;
}

.capability-card ul{
    position:relative;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:auto 0 0;
    padding:0;
    list-style:none;
}

.capability-card li{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 9px;
    border-radius:999px;
    color:#4f4655;
    background:rgba(43, 37, 48, 0.05);
    font-size:11px;
    font-weight:800;
    line-height:1;
}

.capability-ui{--capability-accent:#ff506b;--capability-soft:rgba(255,80,107,0.07);--capability-border:rgba(255,80,107,0.18);}
.capability-ux{--capability-accent:#d89a18;--capability-soft:rgba(216,154,24,0.08);--capability-border:rgba(216,154,24,0.18);}
.capability-system-card{--capability-accent:#2fa17e;--capability-soft:rgba(47,161,126,0.08);--capability-border:rgba(47,161,126,0.18);}
.capability-ai{--capability-accent:#4b88e8;--capability-soft:rgba(75,136,232,0.08);--capability-border:rgba(75,136,232,0.18);}
.capability-product{--capability-accent:#8661e8;--capability-soft:rgba(134,97,232,0.08);--capability-border:rgba(134,97,232,0.18);}
.capability-visual{--capability-accent:#e97945;--capability-soft:rgba(233,121,69,0.08);--capability-border:rgba(233,121,69,0.18);}

.workflow-map{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:16px;
    align-items:stretch;
}

.workflow-node{
    position:relative;
    min-height:218px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:20px 16px 18px;
    border:1px solid rgba(255, 80, 107, 0.10);
    border-radius:24px;
    background:linear-gradient(180deg, #fffdfa 0%, #fff8f6 100%);
    text-align:left;
}

.workflow-node:not(:last-child)::after{
    content:"";
    position:absolute;
    right:-25px;
    top:46px;
    z-index:2;
    width:32px;
    height:12px;
    background:linear-gradient(90deg, rgba(255,80,107,0.2), rgba(255,80,107,0.86));
    clip-path:polygon(0 37%, 66% 37%, 66% 0, 100% 50%, 66% 100%, 66% 63%, 0 63%);
}

.workflow-node-icon{
    width:34px;
    height:34px;
    padding:0;
    box-sizing:border-box;
    margin:0 0 18px;
    color:#ff506b;
    border-radius:0;
    background:transparent;
    border:0;
}

.workflow-node h3{
    margin:0 0 10px;
    color:#2b2530;
    font-size:16px;
    white-space:nowrap;
}

.workflow-node h3 span{
    display:inline;
    margin-right:6px;
    color:#ff506b;
    background:transparent;
    font-size:18px;
    line-height:1;
    font-weight:900;
}

.workflow-node p{
    margin:0;
    color:#665d68;
    font-size:12.5px;
    line-height:1.72;
}

.workflow-node-ai{
    border-color:rgba(255,80,107,0.28);
    background:linear-gradient(180deg, #fff0f3 0%, #fff9f7 100%);
}

.workflow-node-ai .workflow-node-icon{
    color:#ff2f55;
    background:transparent;
    border:0;
}

.about-content-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:24px;
    align-items:stretch;
    margin:18px auto 0;
    padding:10px 10px 38px;
    background:transparent;
    border:0;
    box-shadow:none;
    overflow:visible;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}

.about-content-grid .about-info-section{
    height:100%;
    margin:0;
    box-sizing:border-box;
    background:#fff;
    box-shadow:0 14px 34px rgba(62, 45, 80, 0.06);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}

.journey-timeline{
    position:relative;
    margin-top:26px;
    padding-left:26px;
}

.journey-timeline::before{
    content:"";
    position:absolute;
    left:6px;
    top:4px;
    bottom:8px;
    width:2px;
    background:rgba(255,80,107,0.22);
}

.journey-timeline article{
    position:relative;
    padding:0 0 22px;
}

.journey-timeline article::before{
    content:"";
    position:absolute;
    left:-25px;
    top:3px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#ff506b;
    box-shadow:0 0 0 6px rgba(255,80,107,0.1);
}

.journey-timeline time{
    color:#ff506b;
    font-size:12px;
    font-weight:900;
}

.strength-list{
    display:grid;
    gap:16px;
    margin-top:24px;
}

.strength-list article{
    display:grid;
    grid-template-columns:42px minmax(0, 1fr);
    column-gap:16px;
    align-items:start;
}

.strength-list article > .strength-icon{
    width:36px;
    height:36px;
    flex:0 0 36px;
    margin-top:1px;
    padding:7px;
    box-sizing:border-box;
    color:#ff506b;
    border-radius:14px;
    background:transparent;
    border:1px solid rgba(255, 80, 107, 0.2);
    box-shadow:none;
}

.strength-list article h3{
    margin-top:0;
}

.resume-paper-card{
    position:relative;
    margin-top:24px;
    padding:28px;
    border-radius:24px;
    background:#fff;
    box-shadow:0 24px 60px rgba(56, 36, 66, 0.14);
    overflow:visible;
}

.resume-clip{
    position:absolute;
    right:14px;
    top:-19px;
    z-index:3;
    width:74px;
    height:74px;
    color:#ef2650;
    transform:scaleX(-1) rotate(-60deg);
    transform-origin:50% 56%;
    filter:drop-shadow(0 12px 18px rgba(239,38,80,0.2));
    pointer-events:none;
}

.resume-clip svg{
    display:block;
    width:100%;
    height:100%;
}

.resume-paper-card h3{
    margin:0;
    font-size:30px;
}

.resume-role{
    margin:5px 0 20px;
    color:#ff506b !important;
    font-weight:900;
}

.resume-paper-card h4{
    margin:20px 0 10px;
    color:#2b2530;
    font-size:14px;
}

.resume-tags,
.resume-tools{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.resume-tags span,
.resume-tools span{
    display:inline-flex;
    min-height:30px;
    align-items:center;
    justify-content:center;
    padding:0 10px;
    border-radius:999px;
    color:#655d6c;
    background:#f5f2f5;
    font-size:12px;
    font-weight:800;
}

.resume-tools span{
    width:38px;
    padding:0;
    border-radius:12px;
}

.resume-paper-card a{
    display:inline-flex;
    min-height:42px;
    margin-top:22px;
    padding:0 18px;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    color:#ff506b;
    background:#fff;
    border:1px solid rgba(255,80,107,0.22);
    font-weight:900;
}

.about-contact-footer{
    display:grid;
    grid-template-columns:190px minmax(0, 1fr);
    gap:28px;
}

.contact-info-row{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr)) 120px;
    gap:14px;
    margin:0;
    font-style:normal;
}

.contact-info-row a,
.contact-info-row p,
.contact-qr{
    display:flex;
    min-height:58px;
    align-items:center;
    gap:10px;
    padding:0 14px;
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 30px rgba(56, 36, 66, 0.07);
}

.contact-info-row .contact-icon{
    width:28px;
    height:28px;
    flex:0 0 28px;
    padding:5px;
    box-sizing:border-box;
    color:#ff506b;
    border-radius:10px;
    background:transparent;
    border:1px solid rgba(255, 80, 107, 0.18);
}

.contact-qr{
    flex-direction:column;
    justify-content:center;
    aspect-ratio:1;
    min-height:0;
    color:#8c8392;
    font-size:12px;
    font-weight:900;
    border:0;
    cursor:pointer;
    font-family:inherit;
    line-height:1.2;
    text-align:center;
    appearance:none;
    -webkit-appearance:none;
    transition:transform 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

.contact-qr:hover{
    color:#ff506b;
    transform:translateY(-2px);
    box-shadow:0 18px 38px rgba(255, 80, 107, 0.12);
}

.contact-qr:focus-visible{
    outline:2px solid rgba(255, 80, 107, 0.72);
    outline-offset:3px;
}

.contact-qr .contact-icon{
    margin:0 auto;
}

.contact-qr-copy{
    display:grid;
    gap:3px;
}

.contact-qr-copy strong{
    color:#2b2530;
    font-size:12px;
}

.contact-qr-copy span{
    color:#8c8392;
    font-size:11px;
    font-weight:800;
}

.about-copyright{
    grid-column:1 / -1;
    margin:18px 0 0;
    text-align:center;
    color:#8c8392;
    font-size:12px;
}

.wechat-qr-dialog[hidden]{
    display:none;
}

body.wechat-qr-open{
    overflow:hidden;
}

.wechat-qr-dialog{
    position:fixed;
    inset:0;
    z-index:1200;
    display:grid;
    place-items:center;
    padding:24px;
}

.wechat-qr-backdrop{
    position:absolute;
    inset:0;
    background:rgba(18, 16, 24, 0.42);
    backdrop-filter:blur(10px);
}

.wechat-qr-panel{
    position:relative;
    z-index:1;
    width:min(360px, calc(100vw - 40px));
    max-height:calc(100vh - 48px);
    box-sizing:border-box;
    overflow:auto;
    padding:22px;
    border-radius:26px;
    background:#fff;
    box-shadow:0 26px 80px rgba(30, 24, 36, 0.28);
}

.wechat-qr-close{
    position:absolute;
    top:14px;
    right:14px;
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:#f7f3f6;
    cursor:pointer;
}

.wechat-qr-close::before,
.wechat-qr-close::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:14px;
    height:2px;
    border-radius:999px;
    background:#8c8392;
}

.wechat-qr-close::before{
    transform:translate(-50%, -50%) rotate(45deg);
}

.wechat-qr-close::after{
    transform:translate(-50%, -50%) rotate(-45deg);
}

.wechat-qr-close:focus-visible{
    outline:2px solid rgba(255, 80, 107, 0.72);
    outline-offset:3px;
}

.wechat-qr-heading{
    display:flex;
    gap:12px;
    align-items:center;
    padding-right:38px;
}

.wechat-qr-heading-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    padding:8px;
    box-sizing:border-box;
    color:#ff506b;
    border-radius:14px;
    border:1px solid rgba(255, 80, 107, 0.2);
}

.wechat-qr-heading h3{
    margin:0;
    color:#2b2530;
    font-size:20px;
    line-height:1.25;
}

.wechat-qr-heading p{
    margin:4px 0 0;
    color:#8c8392;
    font-size:13px;
    line-height:1.45;
}

.wechat-qr-image{
    display:block;
    width:100%;
    height:auto;
    margin-top:18px;
    border-radius:18px;
    background:#fff;
}

@media (max-width: 1120px){
    .why-card-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .capability-folder-grid,
    .workflow-steps{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .capability-card-grid,
    .workflow-map{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .about-content-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .workflow-step:not(:last-child)::after{
        display:none;
    }

    .workflow-node:not(:last-child)::after{
        display:none;
    }

    .contact-info-row{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .contact-qr{
        min-height:58px;
        aspect-ratio:auto;
        flex-direction:row;
        justify-content:flex-start;
        text-align:left;
    }

    .contact-qr .contact-icon{
        margin:0;
    }

    .contact-qr-copy{
        display:inline-flex;
        min-width:0;
        align-items:center;
        gap:6px;
        white-space:nowrap;
    }
}

@media (max-width: 720px){
    .about-main-content{
        margin-top:20px;
        overflow:hidden;
    }

    .about-info-section,
    .about-contact-footer{
        margin-top:18px;
        padding:20px;
        border-radius:24px;
    }

    .about-split-section,
    .about-contact-footer{
        grid-template-columns:1fr;
        gap:18px;
    }

    .about-section-heading h2{
        font-size:24px;
    }

    .why-card-grid,
    .capability-folder-grid,
    .workflow-steps,
    .about-content-grid,
    .contact-info-row{
        grid-template-columns:1fr;
    }

    .resume-section{
        grid-column:auto;
        grid-row:auto;
    }

    .why-card,
    .capability-folder,
    .workflow-step{
        min-height:0;
    }

    .about-section-heading{
        display:grid;
        grid-template-columns:minmax(0, 1fr);
        gap:5px;
    }

    .about-section-heading span{
        margin-bottom:0;
        font-size:11px;
    }

    .why-card{
        display:grid;
        grid-template-columns:42px minmax(0, 1fr);
        column-gap:14px;
        align-items:start;
        padding:16px;
        border-radius:20px;
    }

    .why-card .about-card-icon{
        grid-row:1 / span 2;
        width:40px;
        height:40px;
        padding:8px;
        border-radius:14px;
    }

    .why-card h3{
        margin:0 0 5px;
        font-size:16px;
        line-height:1.25;
    }

    .why-card p{
        margin:0;
        font-size:12.5px;
        line-height:1.62;
    }

    .workflow-step{
        display:grid;
        grid-template-columns:44px minmax(0, 1fr);
        column-gap:12px;
        align-items:start;
        padding:16px;
        border-radius:20px;
    }

    .workflow-step span{
        grid-row:1 / span 2;
        width:38px;
        height:38px;
    }

    .workflow-step h3{
        margin:0 0 5px;
        font-size:16px;
    }

    .workflow-step p{
        margin:0;
        font-size:12.5px;
        line-height:1.62;
    }

    .capability-folder-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:12px;
    }

    .capability-folder{
        padding:54px 14px 15px;
        border-radius:0 18px 18px 18px;
    }

    .capability-folder::before{
        height:38px;
        border-radius:18px 18px 10px 0;
    }

    .folder-mark{
        left:14px;
        top:12px;
        width:22px;
        height:22px;
    }

    .capability-folder p{
        font-size:10.5px;
        line-height:1.2;
    }

    .capability-folder h3{
        margin:0 0 8px;
        font-size:16px;
    }

    .capability-folder li{
        font-size:12px;
        line-height:1.55;
    }

    .capability-card-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
    }

    .capability-card{
        min-height:0;
        padding:14px;
        border-radius:18px;
        gap:7px;
    }

    .capability-card .folder-mark{
        width:28px;
        height:28px;
        padding:5px;
        border-radius:10px;
    }

    .capability-card .capability-en{
        font-size:9.5px;
    }

    .capability-desc{
        display:-webkit-box;
        overflow:hidden;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        font-size:11.5px;
        line-height:1.45;
    }

    .capability-card h3{
        font-size:16px;
    }

    .capability-card ul{
        gap:5px;
    }

    .capability-card li{
        min-height:22px;
        padding:0 7px;
        font-size:10px;
    }

    .workflow-map{
        grid-template-columns:1fr;
        gap:16px;
    }

    .workflow-node{
        min-height:0;
        display:grid;
        grid-template-columns:42px minmax(0, 1fr);
        grid-template-areas:
            "art title"
            "art text";
        column-gap:14px;
        align-items:start;
        padding:16px;
        border-radius:22px;
        text-align:left;
    }

    .workflow-node:not(:last-child)::after{
        display:block;
        left:30px;
        right:auto;
        top:auto;
        bottom:-15px;
        width:14px;
        height:28px;
        transform:none;
        background:linear-gradient(180deg, rgba(255,80,107,0.18), rgba(255,80,107,0.72));
        clip-path:polygon(37% 0, 63% 0, 63% 66%, 100% 66%, 50% 100%, 0 66%, 37% 66%);
    }

    .workflow-node-icon{
        grid-area:art;
        width:34px;
        height:34px;
        padding:0;
        margin:0;
    }

    .workflow-node h3{
        grid-area:title;
        margin:0 0 5px;
        font-size:16px;
        white-space:normal;
    }

    .workflow-node p{
        grid-area:text;
        font-size:12.5px;
        line-height:1.58;
    }

    .contact-qr{
        width:116px;
    }

    .resume-paper-card{
        padding:22px;
    }

    .resume-clip{
        right:10px;
        top:-15px;
        width:62px;
        height:62px;
    }

    .contact-info-row a,
    .contact-info-row p,
    .contact-qr{
        width:100%;
        box-sizing:border-box;
    }
}

.skill-detail span{
    color:#3e3745;
    font-size:12px;
    line-height:1.55;
}

.about-contact-row#ico{
    position:relative;
    bottom:auto;
    margin:24px auto 0;
}

.about-contact-row#ico ul{
    max-width:880px;
    padding:12px 18px;
    border-radius:999px;
    background:rgba(255,255,255,0.64);
    box-shadow:0 18px 46px rgba(60, 42, 72, 0.10);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
}

body.theme-dark section .section1.about-stage{
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 86, 113, 0.25), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(46, 214, 200, 0.16), transparent 32%),
        linear-gradient(135deg, #14121c 0%, #21182d 52%, #101b27 100%);
}

body.theme-dark .about-stage::before{
    background:
        linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,0.12) 1px, transparent 1px);
    opacity:0.18;
}

body.theme-dark .about-hero-panel,
body.theme-dark .about-contact-row#ico ul{
    background:rgba(26, 24, 35, 0.82);
    border-color:rgba(255,255,255,0.12);
}

body.theme-dark .skill-document-desk{
    background:#1f5bd6;
    border-color:rgba(255,255,255,0.16);
}

body.theme-dark .about-copy h1,
body.theme-dark .desk-heading b,
body.theme-dark .profile-ticket strong,
body.theme-dark .portrait-caption b,
body.theme-dark .profile-mini-card b{
    color:#fff;
}

body.theme-dark .about-intro,
body.theme-dark .profile-ticket span:last-child,
body.theme-dark .portrait-caption span,
body.theme-dark .profile-mini-card span{
    color:#c8bfce;
}

body.theme-dark .resume-download,
body.theme-dark .about-secondary-action,
body.theme-dark .profile-ticket,
body.theme-dark .profile-portrait-card,
body.theme-dark .profile-mini-card{
    background:#242130;
    color:#fff;
    border-color:rgba(255,255,255,0.12);
}

body.theme-dark .resume-download:hover,
body.theme-dark .resume-download:focus{
    color:#fff;
    background:#242130;
}

body.theme-dark .about-secondary-action:hover,
body.theme-dark .about-secondary-action:focus{
    color:#fff;
    background:#242130;
}

body.theme-dark .about-module-card{
    background:rgba(36, 33, 48, 0.82);
    border-color:rgba(255,255,255,0.12);
}

body.theme-dark .about-module-card:hover{
    background:#242130;
}

body.theme-dark .about-module-card h3{
    color:#fff;
}

body.theme-dark .about-module-card p,
body.theme-dark .about-module-card li{
    color:#c8bfce;
}

body.theme-dark .about-main-content{
    color:#f6f3fb;
}

body.theme-dark .about-info-section,
body.theme-dark .about-contact-footer{
    background:rgba(30, 28, 40, 0.86);
    border-color:rgba(255,255,255,0.1);
    box-shadow:0 22px 60px rgba(0,0,0,0.28);
}

body.theme-dark .about-content-grid{
    background:transparent;
    border:0;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}

body.theme-dark .about-content-grid .about-info-section{
    background:rgba(30, 28, 40, 0.92);
    box-shadow:0 14px 34px rgba(0,0,0,0.22);
}

body.theme-dark .about-section-heading h2,
body.theme-dark .why-card h3,
body.theme-dark .capability-folder h3,
body.theme-dark .capability-card h3,
body.theme-dark .workflow-step h3,
body.theme-dark .workflow-node h3,
body.theme-dark .journey-timeline h3,
body.theme-dark .strength-list h3,
body.theme-dark .resume-paper-card h3,
body.theme-dark .resume-paper-card h4{
    color:#fff;
}

body.theme-dark .why-card p,
body.theme-dark .capability-folder p,
body.theme-dark .capability-folder li,
body.theme-dark .capability-card p,
body.theme-dark .capability-card li,
body.theme-dark .workflow-step p,
body.theme-dark .workflow-node p,
body.theme-dark .journey-timeline p,
body.theme-dark .strength-list p,
body.theme-dark .resume-paper-card p,
body.theme-dark .contact-info-row a,
body.theme-dark .contact-info-row p{
    color:#c8bfce;
}

body.theme-dark .why-card,
body.theme-dark .workflow-step,
body.theme-dark .workflow-node,
body.theme-dark .contact-info-row a,
body.theme-dark .contact-info-row p,
body.theme-dark .contact-qr{
    background:rgba(36, 33, 48, 0.92);
    border-color:rgba(255,255,255,0.1);
    box-shadow:0 12px 30px rgba(0,0,0,0.22);
}

body.theme-dark .capability-folder{
    background:linear-gradient(180deg, #302c3c 0%, #252230 100%);
    border-color:rgba(255,255,255,0.1);
    box-shadow:0 18px 40px rgba(0,0,0,0.24);
}

body.theme-dark .capability-card{
    background:linear-gradient(180deg, rgba(48,44,60,0.96), rgba(37,34,48,0.98));
    border-color:rgba(255,255,255,0.1);
    box-shadow:0 18px 40px rgba(0,0,0,0.22);
}

body.theme-dark .capability-card li{
    color:#e4dce8;
    background:rgba(255,255,255,0.08);
}

body.theme-dark .capability-card .capability-en{
    color:#b7aebc;
}

body.theme-dark .folder-mark{
    color:rgba(255,255,255,0.84);
    background:transparent;
}

body.theme-dark .capability-card .folder-mark{
    color:var(--capability-accent);
    background:var(--capability-soft);
    border-color:var(--capability-border);
}

body.theme-dark .workflow-step span{
    color:#ff8da0;
    background:rgba(255,80,107,0.12);
    border-color:rgba(255,80,107,0.28);
}

body.theme-dark .workflow-step-ai{
    border-color:rgba(255,80,107,0.46);
    box-shadow:0 18px 44px rgba(255,80,107,0.2);
}

body.theme-dark .workflow-step-ai span{
    color:#fff;
    background:#ff506b;
}

body.theme-dark .workflow-node-ai{
    border-color:rgba(255,80,107,0.46);
    background:
        radial-gradient(circle at 50% 2%, rgba(255,80,107,0.12), transparent 42%),
        linear-gradient(180deg, #332631 0%, #24212f 100%);
}

body.theme-dark .journey-timeline::before{
    background:rgba(255,80,107,0.34);
}

body.theme-dark .resume-paper-card{
    background:rgba(36, 33, 48, 0.94);
    box-shadow:0 24px 60px rgba(0,0,0,0.28);
}

body.theme-dark .resume-tags span,
body.theme-dark .resume-tools span{
    color:#d8d1df;
    background:rgba(255,255,255,0.08);
}

body.theme-dark .resume-paper-card a{
    color:#ff8da0;
    background:transparent;
    border-color:rgba(255,141,160,0.32);
}

body.theme-dark .about-card-icon,
body.theme-dark .strength-list article > .strength-icon,
body.theme-dark .contact-info-row .contact-icon{
    color:#ff8da0;
    border-color:rgba(255,141,160,0.28);
    background:transparent;
}

body.theme-dark .contact-qr,
body.theme-dark .about-copyright{
    color:#a79eb0;
}

body.theme-dark .contact-qr-copy strong,
body.theme-dark .wechat-qr-heading h3{
    color:#f4edf6;
}

body.theme-dark .contact-qr-copy span,
body.theme-dark .wechat-qr-heading p{
    color:#a79eb0;
}

body.theme-dark .wechat-qr-backdrop{
    background:rgba(8, 7, 12, 0.62);
}

body.theme-dark .wechat-qr-panel{
    background:#242130;
    box-shadow:0 26px 80px rgba(0,0,0,0.42);
}

body.theme-dark .wechat-qr-close{
    background:rgba(255,255,255,0.08);
}

body.theme-dark .wechat-qr-heading-icon{
    color:#ff8da0;
    border-color:rgba(255,141,160,0.28);
}

@media (max-width: 900px){
    section .section1.about-stage{
        padding:76px 18px 36px;
    }

    .about-hero-grid{
        flex-direction:column;
        align-items:stretch;
    }

    .about-copy,
    .about-showcase{
        width:100%;
    }

    .about-showcase{
        min-height:390px;
    }

    .skill-file-grid{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:34px 20px;
    }
}

@media (max-width: 640px){
    #header .header-inner{
        width:100%;
        box-sizing:border-box;
        min-height:54px;
        justify-content:space-between;
        gap:10px;
        padding:0 max(18px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
        overflow:hidden;
    }

    #header .nav-left{
        display:flex;
        min-width:0;
    }

    #header .brand-link img{
        width:84px;
    }

    #header .header-nav{
        display:flex;
        align-items:center;
        flex:0 0 auto;
        margin-left:auto;
    }

    #header .nav-links{
        gap:6px;
    }

    #header .nav-link-btn{
        min-width:0;
        height:36px;
        padding:0 5px;
        border:0;
        background:transparent;
        color:#fff;
        font-size:14px;
        font-weight:800;
    }

    #header.header-condensed .nav-link-btn{
        min-width:0;
        height:36px;
        padding:0 5px;
        font-size:14px;
        font-weight:800;
    }

    #header .theme-toggle{
        width:36px !important;
        min-width:36px !important;
        max-width:36px !important;
        height:36px;
        min-height:36px;
        max-height:36px;
        flex:0 0 36px;
        padding:0 !important;
        box-sizing:border-box;
        justify-content:center;
        align-items:center;
        border-radius:50%;
        -webkit-appearance:none;
        appearance:none;
        line-height:1;
        background:rgba(255,255,255,0.14);
        border-color:rgba(255,255,255,0.18);
        box-shadow:0 8px 18px rgba(15,17,24,0.16);
        overflow:hidden;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
    }

    #header .theme-toggle::after{
        display:none !important;
    }

    #header .theme-toggle span{
        display:none;
        min-width:0 !important;
        width:36px;
        min-height:36px;
        height:36px;
        flex:0 0 36px;
        padding:0 !important;
        box-sizing:border-box;
        background:transparent !important;
        box-shadow:none !important;
        line-height:1;
    }

    #header .theme-toggle[data-mode='light'] .mode-light,
    #header .theme-toggle[data-mode='dark'] .mode-dark{
        display:inline-flex;
    }

    #header .theme-icon{
        width:20px;
        height:20px;
        opacity:1;
    }

    body.is-wechat-browser #header .theme-toggle{
        width:36px !important;
        min-width:36px !important;
        max-width:36px !important;
        height:36px !important;
        min-height:36px !important;
        max-height:36px !important;
        flex-basis:36px;
        border-radius:36px;
        -webkit-transform:translateZ(0);
        transform:translateZ(0);
    }

    body.is-wechat-browser #header .theme-toggle span{
        width:36px !important;
        height:36px !important;
        min-height:36px !important;
    }

    section .section1.about-stage{
        min-height:0;
        padding:64px 12px 24px;
    }

    .about-hero-panel{
        min-height:0;
        padding:16px 18px 18px;
        border-radius:28px;
        transform:none !important;
    }

    .about-navline{
        align-items:flex-start;
    }

    .resume-download{
        position:static;
        z-index:auto;
        min-height:38px;
        padding:0 12px;
        font-size:12px;
    }

    .about-copy{
        padding:14px 0 0;
    }

    .about-copy h1{
        margin:14px 0 10px;
        font-size:clamp(34px, 10.7vw, 44px);
        line-height:1.04;
    }

    .about-stage .del-ins{
        text-align:left;
        font-size:18px;
    }

    .about-intro{
        max-width:none;
        font-size:14px;
        line-height:1.72;
    }

    .about-kicker{
        max-width:100%;
        padding:7px 11px;
        font-size:12px;
        line-height:1.35;
        white-space:normal;
    }

    .about-name-line{
        margin-bottom:14px;
        font-size:20px;
        line-height:1.35;
    }

    .about-actions{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
        margin-top:16px;
    }

    .about-primary-action,
    .about-secondary-action{
        min-height:42px;
        width:100%;
        gap:7px;
        padding:0 11px;
        box-sizing:border-box;
        font-size:13px;
        white-space:nowrap;
    }

    .about-button-icon{
        width:22px;
        height:22px;
        flex-basis:22px;
    }

    .about-showcase{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
        margin-top:14px;
        min-height:0;
        transform:none;
    }

    .profile-portrait-card{
        display:none;
    }

    .profile-ticket{
        display:none;
    }

    .portrait-orbit{
        inset:auto;
        left:16px;
        top:16px;
        width:46px;
        height:46px;
    }

    .portrait-mono{
        left:25px;
        top:25px;
        width:28px;
        height:28px;
        margin:0;
        border-radius:9px;
        font-size:19px;
        box-shadow:0 8px 18px rgba(37,36,42,0.18);
    }

    .portrait-caption{
        position:static;
        padding:0;
        border-radius:0;
        background:transparent;
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }

    .portrait-caption b{
        font-size:16px;
    }

    .portrait-caption span{
        margin-top:3px;
        font-size:12px;
    }

    .profile-mini-card{
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        width:auto;
        min-height:64px;
        padding:12px 13px;
        border-radius:18px;
        box-sizing:border-box;
        transform:none;
        box-shadow:0 14px 34px rgba(56, 35, 70, 0.12);
    }

    .profile-mini-card b{
        font-size:23px;
    }

    .profile-mini-card span{
        font-size:12px;
    }

    .skill-document-desk{
        padding:18px;
        border-radius:28px;
    }

    .about-profile-modules{
        padding:18px;
    }

    .desk-heading{
        display:block;
    }

    .desk-heading b{
        display:block;
        margin-top:6px;
        font-size:16px;
    }

    .about-module-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .about-module-wide{
        grid-column:auto;
    }

    .about-module-card{
        min-height:0;
        padding:20px;
        border-radius:22px;
    }

    .about-module-card h3{
        font-size:20px;
    }

    .about-module-card p,
    .about-module-card li{
        font-size:13px;
    }

    .about-main-content{
        margin-top:18px;
    }

    .about-content-grid{
        gap:18px;
        padding:0;
    }

    .journey-timeline{
        margin-top:18px;
    }

    .strength-list{
        margin-top:18px;
        gap:14px;
    }

    .resume-paper-card{
        margin-top:18px;
    }

    .contact-info-row a,
    .contact-info-row p{
        min-height:54px;
        justify-content:flex-start;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .contact-info-row .contact-qr{
        display:grid !important;
        grid-template-columns:28px max-content;
        column-gap:10px;
        width:100%;
        min-height:54px;
        padding:0 14px;
        justify-content:start;
        justify-items:start;
        align-items:center;
        aspect-ratio:auto;
        text-align:left;
        overflow:hidden;
    }

    .contact-info-row .contact-qr .contact-icon{
        grid-column:1;
        margin:0 !important;
    }

    .contact-info-row .contact-qr-copy{
        grid-column:2;
        display:block !important;
        min-width:0;
        max-width:100%;
        white-space:nowrap;
        line-height:1;
    }

    .contact-info-row .contact-qr-copy strong,
    .contact-info-row .contact-qr-copy span{
        display:inline;
        white-space:nowrap;
        line-height:1;
    }

    .contact-info-row .contact-qr-copy span{
        margin-left:8px;
    }

    .skill-file-grid{
        grid-template-columns:1fr;
    }

    .skill-file{
        min-height:220px;
        padding-top:118px;
    }

    .about-contact-row#ico ul{
        border-radius:26px;
    }

    .folder-stickers{
        top:70px;
        height:42px;
        transform:scale(0.88);
        transform-origin:left top;
    }
}