html{scroll-behavior:smooth;}*{margin:0;padding:0}a,button{outline:0}a,code,div,img,p,span{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}a{color:inherit;text-decoration:none;word-wrap:break-word}img{display:block;margin:auto;max-width:100%}audio{outline:0}body{font-family:Fira Mono,Noto Serif SC,-apple-system,Roboto,Helvetica Neue,sans-serif;font-size:15px;font-weight:400;color:#666;line-height:1.6;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAZCAMAAAAL146mAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAASNQTFRFAAAAAAAAAAAAAAAAAAAAGSQmGCUnDRoaAAAAGCUon6SlFyQmDhsbAAAAAAAAFyQnlJqcFyMlDw8PAAAAFyMmi5GSFiInERERAAAAFyMm+/v7gYiJFyQmABUV+vr6d36AFiMl+Pn5b3d5FyMlAAAA9vf3ZW5wFiIkAAAA9fX1XGVnFyIkAAAA8vPzVV5gFiEkAAAA8PDwTlhaFSEk7O3tRlFTFyEl1NfXGCQm6OnpQUtNEx0gAAAAQEpMERodAAAAP0lLERkcAAAAAAAAFyMmAAAAAAAAFiEjFiIlFiIln6SlFyMmAAAAAAAAAAAAAAAABQoKFSEjAAAAAAAABgwMFSEjoKSm09XWFyImBg0NFCAiFiEjERkZAAAA/Pz8+/v7////3+LoFQAAAF50Uk5TAAECAwVydxQKoc6FEwQOpMyCERCmyX4PEaf+xXkM/sJ0/b5uCfy7aQj7uGMH+rVcBviyVvawTeqU9bJPC7VZFLZaGA2pHA99q6zWqBUeISMxlBITK5LV6pspf4o9F3yyPVgAAAABYktHRGDFt3wQAAAACW9GRnMAAAAAAAAAAgDoHNRMAAAACXBIWXMAAADIAAAAyABj+uetAAAACXZwQWcAAAAgAAAAIACH+pydAAAA8klEQVQY013R6VbCMBAF4E4SJYoBtILFDdCKVREr4IKirCIq4oI7Mr7/W1hoqInz8zs5Se5cwzCAUAKGOsCmpkNUNaB8ZjY8pxqISBRj8wuKATMX8SeeWPozYFYScXlldS0wn3A9leYTk4SZjU1b/mVCuJXddnwLCHd293JEJ9zPH7hEJzwsFEemEpaOjhnohCenNtGpfHZeoRqVLy6r/07V6o3m+C4vtpzWVXv8oohctzqdm1uP7roO9VfYve89PD55lnx2ZSLetvqNl9e39w+TyeBUMLfS//wafDdFsDMAYZvDoeUQrRWX85xW1KhNWecvqKk8tzJNk4wAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMTItMTZUMDM6NTY6MzYrMDA6MDAqAmTNAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTEyLTE2VDAzOjU2OjM1KzAwOjAwarfG7AAAAABJRU5ErkJggg==),auto!important}body::-webkit-scrollbar,body::-webkit-scrollbar-track-piece{background-color:transparent}body::-webkit-scrollbar{width:5px;height:5px}body::-webkit-scrollbar-thumb{border-radius:3px;background-color:#f391a9;background-image:-webkit-linear-gradient(45deg,hsla(0,0%,100%,.6) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.6) 0,hsla(0,0%,100%,.6) 75%,transparent 0,transparent)}@font-face{font-family:iconfont;src:url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAT8AAsAAAAAChgAAASuAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKgqHMIZEATYCJAMUCwwABCAFhG0HVRvVCFGULk6I7IsEQ+8x5ZBCFmKoW/1TnmTLdXb2+Xj4b7/f7zMzVzBtkESj6uokEjTRSOkQKg1CJEHptC9awvv7vOr9pAdwVhrYjRGSBiudsU+71VjIJ0DB+uyjkOaAVQ3w7xwz8xH////9XH1vKqHpPX1nIW1tsakYlj5NNEJphCSiUbQSKpQeGcYuLfNuAt0mrYWO80trwV6hHhSIB6W8DewjfqVAGFpXnXFmgXgGG22awx4AT87fx3/RYQ+SKoN65MlVXidk/kqe/79GC4Ghuyjo88hYAgpxlxm/gHvWJcfendUtsg602naJX7h5Z0zDjEuJtrrRPzyyIiSiBtXei6j7jcIvzACZX/osRxT0Cuh4BBsSjulMutFDzALEJ5UzxZEuTnUzeZWnj7emsV7aq8fKic1sZq1pr6Npv++8BVm2+Emt10OtvMRyY2Wt6WiwiUtbMPuMbvIeNXnnW02pfUKOdEzo9VBN1wG/sX0+o6h7o3ft/JUQU2v3u71GunAizMqnWyy+82N+Y1a/hQWfQY4dZQe40dpOih+TPl8QV9WYLznWwrK1o5x4E5tp8hGbF/yE1xKeb7T4pguCr8WR5yWCIOU4MccaA201ZXY+Gbv9wGYhx+orscx7sy/ECW1WdIyX5U7mhYwqlvUxO8kbsCxdRoXwI29y3CjLPn1w7lSOxwYPF9n3ggJwdIYlPWiHE0RvKixwX2wXv1TV4uqx5dOWLcS/IE/3gqfonT1CSvRwF0ROVpZVOLd4eMg+bN4oKov1OZN07mQnaBGyEyGHKxAtt90RRc8VFuKiZepmV3fB1i0YXiyCtw7I64kPNiCfqczyCqdmT3fpz82b8LI4SPA8lp95MT/bUKVpLI07MdMdv85nJU/u/XUWfhPAt/fnaGRA1NTSM95ku8hTvKO+t6w0xjmnInsQ7F7t2wcHi46IN/dEVdsrehMdq5FWi6qxBl63GlWA6t5OIrow9+HNm33HwEATNMVwJ35oppAHVrFznPL84g63oK4opFb2zH+A6Jc3Q6vV9bU7BgcaYXIrVNt6XHtX73R8Q7sFvrJPV5tgVCtU2wYLrp8dTUemLDq2Qa5r7OeAXoBOeR/2HJDfsQ9NabCPoQRl/Fj30nc2vKvFLfVr2/MCl740szdQ7r+qHgBfnEE0fJreAgWIWTKpgaoIRsPXudJMgcqjHpKJL9H0SbYZ9q4bx9ggeivZGgsgaUxA1prChboElR7LUGvtQbdFBef3GEHDRXEAFkwBCINOQNLvA7JBD3GhvoXKuC9QGwwcup2G1xV7zITSMYcm2xiyk2jvI5Qdeh2lhxhHd7SalHdp2uiwyRFJSNqoLBFR4ZHxVgGpI+kujjF2y6MZhiIoWq8l8sH9SI1GTxhovYrsYMIVDGNIjoigst4ovEOvBUdHaKQ2DFInQrs+BKUOejqUtT7DMfH71UhyXTTa0AWEoqIEiWak3DwhSrjICrjArqtEOJXtjbrJRWMwKLwfhaanRciHUZJGq+sRDNm7qZA6MMIpGlQNkkWguaiq9vDhndpzbPg5ZlUPrgJDOBIhG2QLvRu/pUapU9soyDaasc8yRtr1bXSngxuLAgAAAA==") format("woff2")}.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-iconfontlink:before{content:"\e631"}.icon-heart:before{content:"\e6ce"}.icon-Artboard:before{content:"\e602"}.icon-Artboard1:before{content:"\e603"}#bg{position:fixed;top:0;left:0;right:0;bottom:0;background-size:cover;background-position:top;background-repeat:no-repeat}.backstretch{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(../images/logo.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.18;filter:blur(2px);transform:scale(1.05)}@media screen and (max-width:767px){#bg{display:none}}#header{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}@media screen and (min-width:768px){#header{padding:50px 0}}@media screen and (max-width:767px){#header{margin-bottom:4vw;padding:40px 0;color:#fff;background-size:cover;background-position:bottom;background-repeat:no-repeat}}#header .subtitle,#header .title{letter-spacing:4px}@media screen and (min-width:768px){#header .subtitle,#header .title{animation:fadeInDown .5s ease-out forwards}}@media screen and (max-width:767px){#header .subtitle,#header .title{animation:fadeInDownSP .5s ease-out forwards}}#header .title{transition:color .3s ease-out}@media screen and (min-width:768px){#header .title{font-size:48px;line-height:60px}}@media screen and (max-width:767px){#header .title{font-size:44px;line-height:56px}}#header .title:hover{color:#f391a9}@media screen and (min-width:768px){#header .subtitle{font-size:28px;line-height:80px}}@media screen and (max-width:767px){#header .subtitle{font-size:20px;line-height:30px}}.list-h{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:stretch;align-items:stretch;border-radius:4px;-moz-user-select:text;-ms-user-select:text;-webkit-user-select:text;user-select:text}.list-h,.list-h a{display:-ms-flexbox;display:flex}.list-h a{-ms-flex:1;flex:1;font-weight:600}.list-h a img{display:block;border-radius:2px;margin:4px;min-width:40px;max-width:44px}@media screen and (max-width:768px){.list-h a img{min-width:36px;max-width:40px}}@media screen and (max-width:500px){.list-h a img{margin:2px 4px;min-width:32px;max-width:36px}}@media screen and (max-width:375px){.list-h a img{min-width:28px;max-width:32px}}.menu{margin-top:16px;border-radius:6px;background:hsla(0,0%,100%,.5);max-width:100%;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}@media screen and (max-width:767px){.menu{position:relative;top:30px}}.menu .list-h{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:stretch;align-items:stretch;-moz-user-select:text;-ms-user-select:text;-webkit-user-select:text;user-select:text;-ms-flex-wrap:nowrap;flex-wrap:nowrap;margin:2px}.menu .list-h,.menu .list-h a{display:-ms-flexbox;display:flex;border-radius:4px}.menu .list-h a{white-space:nowrap;opacity:.75;text-shadow:0 1px 2px rgba(0,0,0,.05);border-bottom:2px solid transparent;-ms-flex:1;flex:1;font-weight:600;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;padding:12px;line-height:26px;border-bottom:none;text-align:center;-ms-flex-line-pack:end;align-content:flex-end;color:rgba(68,68,68,.7);font-size:1.5rem}.menu .list-h a:active,.menu .list-h a:hover{opacity:1;border-bottom:2px solid var(--color-site-inner)}.menu .list-h a p{font-size:16px}.menu .list-h a.active{background:var(--color-card);-webkit-backdrop-filter:none;backdrop-filter:none}.menu .list-h a.active i,.menu .list-h a.active i+p{color:#44d7b6}.menu .list-h a+a{margin-left:4px}.menu:hover{background:hsla(0,0%,100%,.5)}.menu .list-h a:hover{opacity:1;background:#fff}@media screen and (max-width:500px){.menu .list-h a{padding:12px 8px}}@media screen and (max-width:500px){.menu .list-h{overflow-x:scroll}.menu .list-h::-webkit-scrollbar{height:0;width:0}.menu .list-h::-webkit-scrollbar-track-piece{background:0 0}.menu .list-h::-webkit-scrollbar-thumb{background:#44d7b6;cursor:pointer;border-radius:0}.menu .list-h::-webkit-scrollbar-thumb:hover{background:#ff5722}}.container{min-height:100vh;overflow-x:hidden;position:relative}.container .page{margin:0 auto;max-width:876px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding-bottom:20px;padding-top:20px;border-radius:3px}@media screen and (min-width:768px){.container{background: linear-gradient(90deg,rgba(247,149,51,.1),rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1));background-color:hsla(0,0%,100%,.7)}}@media screen and (max-width:767px){.container{background: linear-gradient(90deg,rgba(247,149,51,.1),rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1)); background-color: hsla(0,0%,100%,.7);}}.quote{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;margin-bottom:16px;padding:30px 0}.quote span{letter-spacing:1px;font-size:16px}.quote i{position:absolute;font-size:24px}.quote i:first-child{top:0;left:16px}.quote i:last-child{bottom:0;right:16px}@media screen and (min-width:768px){.page{background-color:hsla(0,0%,100%,.7);box-shadow:0 8px 16px rgba(0,0,0,.12)}}.content{padding:16px}.content .header{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}.content .header img{display:block;border-radius:50%;border:4px solid transparent;transition:transform 1s ease-out;margin:0 auto}@media screen and (min-width:768px){.content .header{-ms-flex-direction:row;flex-direction:row}}@media screen and (max-width:767px){.content .header{-ms-flex-direction:column;flex-direction:column}}@media screen and (min-width:768px){.content .header img{width:100px;min-width:100px;min-height:100px;box-shadow:0 8px 16px rgba(0,0,0,.12)}.content .header img:hover{animation-play-state:paused;transform:rotate(1turn)}}@media screen and (max-width:767px){.content .header img{margin-bottom:16px;width:100px;height:100px;min-width:80px;min-height:80px;box-shadow:0 14px 38px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.06)}}.segment{margin-bottom:16px;padding:14px 0;text-align:justify;overflow:unset;border-top-width:2px;border-top-style:solid;border-radius:3px;background-color:hsla(0,0%,100%,.7);box-shadow:0 14px 38px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.06);transition:all .3s ease 0s,transform .6s cubic-bezier(.6,.2,.1,1) 0s}.segment:last-child{margin-bottom:0}.segment p{padding-left:1rem;padding-right:1rem;margin-bottom:10px}.segment .label{display:inline-block;position:relative;left:-32px;margin-bottom:10px;padding:0 14px 0 32px;height:32px;line-height:32px;border-radius:0 3px 3px 0;background-color:currentColor}.segment .label span{color:#fff}.segment .label:after{content:"";position:absolute;top:100%;left:0;width:0;height:0;background-color:transparent;border-style:solid;border-width:0 16px 16px 0;border-color:transparent;border-right-color:currentColor;filter:brightness(120%)}@media screen and (min-width:768px){.segment:hover{transform:translateY(-4px);box-shadow:0 14px 38px rgba(0,0,0,.14),0 3px 8px rgba(0,0,0,.12)}}#footer{width:100%}#footer .site-info{text-align:center}#footer .site-info a{transition:color .3s ease-out}#footer .site-info a:hover{color:#f391a9}#footer .site-info .icon-heart{margin-left:5px}@media screen and (min-width:768px){#footer .site-info{padding-bottom:20px;font-size:15px}}@media screen and (max-width:767px){#footer .site-info{padding-bottom:15px;font-size:14px}}

/* ==================================================================
   导航菜单交互增强
   原有问题（实测）：
     1. 站点 CSS 中没有任何 :focus 规则，键盘 Tab 聚焦时 outline:none、
        背景透明、无阴影 —— 用户完全不知道焦点在哪；
     2. .menu .list-h a 没有 transition，悬停是硬切换（瞬变）；
     3. 有 a.active 规则但 HTML 从未使用该类，没有「当前在哪」的指示；
     4. 原规则依赖 --color-card / --color-site-inner 两个未定义变量，集体失效。
   本段一并修好，并补充按压缩放反馈与禁止换行。
   ================================================================== */

/* 补齐原 CSS 引用却未定义的变量，让遗留规则恢复生效 */
:root{--brand:#f596aa;--color-card:#fff;--color-site-inner:#f596aa;}

/* 点击时不高亮出难看的蓝色方块（仅触屏有影响） */
.menu .list-h a{-webkit-tap-highlight-color:transparent;}

/* 悬停 / 聚焦 / 按下 的平滑过渡；:is() 统一降低重复度 */
:is(.menu .list-h a,.list-h a){
  transition:background-color .22s ease,color .22s ease,
             box-shadow .22s ease,transform .22s ease,opacity .22s ease;
}

/* 悬停：轻微上浮 + 品牌色投影 + 图标放大，给出明确的"可点"反馈 */
.menu .list-h a:hover{
  background:#fff;
  box-shadow:0 6px 16px rgba(245,150,170,.32);
  transform:translateY(-3px);
}
.menu .list-h a:hover .icon{transform:scale(1.12);}

/* 按下：回弹，确认点击已被接收 */
.menu .list-h a:active{
  transform:translateY(-1px) scale(.97);
  box-shadow:0 3px 8px rgba(245,150,170,.28);
}

/* 键盘聚焦：原 CSS 把 outline 清成 none，这里补回可见焦点环。
   用 :focus-visible 而非 :focus，鼠标点击不会留下焦点框。 */
.menu .list-h a:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:6px;
  background:#fff;
}

/* 当前所在面板：底部品牌色指示条 + 着色文字。
   与悬停区分成两种效果，避免"看起来都一样"分不清状态。 */
.menu .list-h a.active{
  background:#fff;
  opacity:1;
  border-bottom:2px solid var(--brand);
  box-shadow:0 3px 10px rgba(245,150,170,.22);
}
.menu .list-h a.active p{color:var(--brand);}
.menu .list-h a.active .icon{transform:scale(1.06);}

/* 图标参与缩放动画 */
.menu .list-h a .icon{
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}

/* 菜单内文字禁止换行，防止窄屏把"首页"折成两行 */
.menu .list-h a p{white-space:nowrap;}

/* 系统开启「减少动态效果」时去掉位移与缩放 */
@media (prefers-reduced-motion:reduce){
  :is(.menu .list-h a,.list-h a){transition:none;}
  .menu .list-h a:hover,.menu .list-h a:active{transform:none;}
  .menu .list-h a:hover .icon,
  .menu .list-h a.active .icon{transform:none;}
}

/* ==================================================================
   产品中心 / 技术支持 面板
   注意：这些卡片用了 display:flex，会覆盖 [hidden] 的默认 display:none，
        必须显式补一条 .segment[hidden]{display:none}，否则隐藏面板会露出来。
   ================================================================== */
.segment[hidden]{display:none!important}

.productGrid,.supportGrid{display:flex;flex-wrap:wrap;gap:12px;padding:0 1rem;margin:4px 0 12px}

.productCard{
  display:flex;flex-direction:column;flex:1 1 190px;max-width:260px;
  padding:16px;text-decoration:none;color:inherit;
  background:#fff;border:1px solid rgba(245,150,170,.28);border-radius:10px;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.productCard:hover{transform:translateY(-4px);border-color:var(--brand);
  box-shadow:0 10px 22px rgba(245,150,170,.28)}
.productCard__visual{font-size:30px;line-height:1;margin-bottom:10px}
.productCard h3{margin:0 0 6px;font-size:16px;font-weight:600;color:#333}
.productCard p{margin:0;padding:0;font-size:13px;line-height:1.6;color:#777;flex:1}
.productCard__more{margin-top:10px;font-size:13px;font-weight:600;color:var(--brand)}

.supportCard{
  flex:1 1 160px;max-width:240px;padding:14px 16px;
  background:hsla(0,0%,100%,.75);border:1px solid rgba(245,150,170,.24);
  border-radius:10px;text-decoration:none;color:inherit;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.supportCard:hover{transform:translateY(-4px);border-color:var(--brand);
  box-shadow:0 10px 22px rgba(245,150,170,.24)}
.supportCard--plain{cursor:default}
.supportCard--plain:hover{transform:none;box-shadow:none;border-color:rgba(245,150,170,.24)}
.supportCard h3{margin:0 0 4px;font-size:15px;font-weight:600;color:#333}
.supportCard p{margin:0;padding:0;font-size:13px;line-height:1.6;color:#777}

/* 键盘聚焦：卡片同样需要可见焦点环（原 CSS 全局 outline:0） */
.productCard:focus-visible,.supportCard:focus-visible{
  outline:3px solid var(--brand);outline-offset:2px;
}

/* 窄屏单列铺满 */
@media screen and (max-width:500px){
  .productCard,.supportCard{flex:1 1 100%;max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .productCard,.supportCard{transition:none}
  .productCard:hover,.supportCard:hover{transform:none}
}

/* ==================================================================
   窄屏导航适配
   5 项在 375px 视口下会超出（实测内容 416px > 容器 371px）。
   原 CSS 靠 overflow-x:scroll 兜底，但访客看不到完整菜单，等于藏了一半入口。
   下面收紧内边距/字号、缩小图标，并允许文字换行，让 5 项排得下。
   ================================================================== */
@media screen and (max-width:500px){
  .menu .list-h a{padding:8px 4px;line-height:1.3}
  .menu .list-h a .icon{width:34px;height:34px}
  .menu .list-h a p{font-size:12px;letter-spacing:0;white-space:normal}
  /* 中文两字一行也不会难看；去掉横向滚动条兜底 */
  .menu .list-h{overflow-x:visible}
  .menu .list-h a{margin:2px}
  .menu .list-h a+a{margin-left:2px}
}
@media screen and (max-width:360px){
  .menu .list-h a{padding:6px 2px}
  .menu .list-h a .icon{width:30px;height:30px}
  .menu .list-h a p{font-size:11px}
}