@charset "utf-8";
/* ==========================================================================
   上海品茶工作室 · UI v3
   Template: BENTO VIOLET  /  浅色 bento 网格 · 左轴分栏首屏
   01 令牌 02 基础 03 通告跑马灯 04 导航 05 首屏分栏+2x2拼贴+数据带
   06 区块通用 07 Bento 服务网格 08 文章双列卡 09 FAQ 左轴双栏
   10 横向 CTA 11 页脚 12 文章页 13 响应式
   ========================================================================== */

/* ---------- 01 令牌 ---------- */
:root{--dim:#7A7A8C;--r4:23.9px;--max:1210px;--violet:#951EE3;--font:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;--surface:#FFFFFF;--line2:#EFEFF4;--violet-soft:#AC53FF;--r1:10.5px;--ink:#141420;--line:#E7E6EE;--sh:0 1px 2px rgba(20,20,32,.04), 0 10px 26px -18px rgba(20,20,32,.2);--surface2:#FAFAFC;--orange-soft:#FFBC38;--r3:17.4px;--r2:15.2px;--ink-bar:#141420;--text:#4A4A57;--bg:#F5F5F8;--sh-h:0 2px 6px rgba(20,20,32,.05), 0 26px 54px -26px rgba(149,30,227,.36);--orange:#FFA510;--violet-deep:#7D18BF}

/* ---------- 02 基础 ---------- */
*,::before,::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:0;color:var(--text);font:400 16px/1.78 var(--font);overflow-x:hidden}
img{
display:block;
max-width:100%;
height:auto
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{color:var(--ink);line-height:1.3;letter-spacing:-.018em;font-weight:700}
ul{margin:0;list-style:none;padding:0}
::selection{background:rgba(149,30,227,.2)}
:focus-visible{
border-radius:6px;
outline:2px solid var(--orange);
outline-offset:3px
}
.nowrap{white-space:nowrap}
.lnkfq{z-index:1;position:relative}
.stacks5{margin:0 auto;
padding:0 20px;
max-width:var(--max);
width:100%}
.a11y{position:absolute!important;width:1px;white-space:nowrap;overflow:hidden;height:1px;clip:rect(0 0 0 0)}
/* part */
.wrapet{left:-9999px;
position:absolute}
.wrapet:focus{
color:var(--violet);
border-radius:var(--r1);
z-index:80;
top:14px;
left:18px;
padding:10px 18px;
background:var(--surface);
box-shadow:var(--sh)
}

/* ---------- 03 通告跑马灯 ---------- */
.boardbp{
color:rgba(255,255,255,.88);
background:var(--ink-bar);
overflow:hidden;
position:relative
}
.blkn0{
padding:9px 0;
font-size:13px;
animation:barslide 30s linear infinite;
display:flex;
width:max-content;
white-space:nowrap
}
.blkn0 span{display:inline-flex;align-items:center;gap:8px;padding:0 20px}
.blkn0 span::before{
height:5px;
background:var(--orange-soft);
border-radius:50%;
width:5px;
content:"";
flex:none
}
@keyframes barslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 04 导航 ---------- */
.linec1{  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  position:sticky;
  z-index:40;
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  background:rgba(255,255,255,.9);
  top:0}
.framex4{align-items:center;
height:68px;
gap:16px;
margin:0 auto;
max-width:var(--max);
padding:0 20px;
display:flex}
.listx7{ display:flex;
 font-weight:700;
 letter-spacing:-.012em;
 flex:none;
 gap:10px;
 align-items:center;
 white-space:nowrap;
 color:var(--ink);
 font-size:16px}
.listx7 i{flex:none;width:30px;background:linear-gradient(135deg,var(--violet),var(--orange));position:relative;height:30px;border-radius:10px}
.listx7 i::after{content:"";position:absolute;border-radius:4px;border:2px solid #fff;inset:9px}
.flowhn{display:flex;-webkit-overflow-scrolling:touch;scrollbar-width:none;overflow-x:auto;gap:2px;flex:1}
.flowhn::-webkit-scrollbar{display:none}
.flowhn a{font-size:15px;color:var(--dim);position:relative;border-radius:var(--r1);white-space:nowrap;transition:color .18s,background .18s;padding:9px 14px}
.flowhn a:hover{  color:var(--violet);
  background:rgba(149,30,227,.06)}
.flowhn a::after{
transition:transform .22s;
right:14px;
bottom:4px;
position:absolute;
content:"";
left:14px;
background:linear-gradient(90deg,var(--violet),var(--orange));
transform-origin:left;
transform:scaleX(0);
border-radius:2px;
height:2px
}
.flowhn a:hover::after{transform:scaleX(1)}
.tilet6{border-radius:999px;
font-weight:600;
background:var(--ink);
transition:background .18s,transform .18s,box-shadow .18s;
color:#fff;
flex:none;
padding:0 22px;
display:inline-flex;
font-size:14.5px;
height:42px;
letter-spacing:.01em;
align-items:center}
.tilet6:hover{transform:translateY(-1px);background:var(--violet);box-shadow:0 12px 24px -12px rgba(149,30,227,.8)}

/* ---------- 05 首屏 ---------- */
.nodepu{padding:56px 0 64px;background:
  radial-gradient(720px 420px at 96% -12%,rgba(149,30,227,.1),transparent 62%),
  radial-gradient(560px 340px at 2% 8%,rgba(255,165,16,.09),transparent 60%),var(--bg)}
.midft{gap:40px;display:grid;align-items:center}
.navtq{  border-radius:999px;
  font-weight:600;
  font-size:13px;
  gap:9px;
  display:inline-flex;
  color:var(--violet);
  align-items:center;
  background:rgba(149,30,227,.07);
  border:1px solid rgba(149,30,227,.2);
  padding:7px 15px}
.navtq b{border-radius:50%;flex:none;height:6px;width:6px;background:var(--orange)}
.tilegq{line-height:1.16;font-size:clamp(28px,5.8vw,52px);letter-spacing:-.035em;margin-top:24px}
.navp4{margin-top:22px;font-size:16.5px;color:var(--text);max-width:600px}
.zonexf{flex-wrap:wrap;
display:flex;
gap:12px;
margin-top:30px}
.txtrc{font-size:15px;transition:transform .18s,background .18s,border-color .18s,box-shadow .18s;border:1px solid transparent;padding:0 26px;font-weight:600;justify-content:center;display:inline-flex;align-items:center;border-radius:var(--r1);height:50px}
.icotd{box-shadow:0 16px 32px -16px rgba(149,30,227,.85);
color:#fff;
background:var(--violet)}
.icotd:hover{  background:var(--violet-deep);
  transform:translateY(-2px)}
.metab6{border-color:var(--line);color:var(--ink);background:var(--surface);box-shadow:var(--sh)}
.metab6:hover{border-color:rgba(255,165,16,.55);color:var(--violet);transform:translateY(-2px)}

.flowv6{grid-template-columns:1.1fr 1fr;display:grid;grid-template-rows:auto auto;gap:14px}
.flowv6 figure{  background:var(--surface2);
  box-shadow:var(--sh);
  overflow:hidden;
  margin:0;
  border-radius:var(--r3);
  border:1px solid var(--line)}
.flowv6 figure:nth-child(1){
position:relative;
grid-row:1/3
}
.flowv6 figure:nth-child(1) img{height:100%;
position:absolute;
width:100%;
object-fit:cover;
inset:0}
.flowv6 figure:nth-child(2) img,.flowv6 figure:nth-child(3) img{object-fit:cover;width:100%;aspect-ratio:1/1}

.midfq{margin-top:48px;overflow:hidden;display:grid;background:var(--line);gap:1px;border-radius:var(--r3);border:1px solid var(--line);grid-template-columns:repeat(2,1fr)}
.midfq > div{
padding:22px 20px;
background:var(--surface)
}
.midfq b{display:block;color:var(--ink);letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-size:clamp(21px,3.6vw,29px)}
.midfq b i{ font-style:normal;
 color:var(--orange)}
/* base */
.midfq span{  font-size:13px;
  display:block;
  margin-top:6px;
  color:var(--dim)}

/* ---------- 06 区块通用 ---------- */
.gridqk{padding:78px 0}
.gridqk.framexp{border-top:1px solid var(--line);background:var(--surface);border-bottom:1px solid var(--line)}
.unitmy{
margin-bottom:42px;
max-width:680px
}
.barsb{text-transform:uppercase;align-items:center;font-size:12px;letter-spacing:.2em;font-weight:700;display:inline-flex;color:var(--orange);gap:8px}
.barsb::before{content:"";height:1.5px;width:22px;background:currentColor}
.unitmy h2{
margin-top:14px;
letter-spacing:-.03em;
font-size:clamp(23px,4.4vw,34px)
}
.unitmy p{margin-top:16px;
color:var(--dim);
font-size:15.5px}

/* ---------- 07 Bento 服务网格 ---------- */
.flowgs{ display:grid;
 grid-template-columns:1fr;
 gap:16px}
.lnkp7{background:var(--surface);box-shadow:var(--sh);padding:26px;border-radius:var(--r4);overflow:hidden;border:1px solid var(--line);transition:transform .22s,box-shadow .22s,border-color .22s;position:relative;display:flex;flex-direction:column}
.lnkp7:hover{  border-color:rgba(149,30,227,.34);
  box-shadow:var(--sh-h);
  transform:translateY(-4px)}
.lnkp7::before{pointer-events:none;position:absolute;content:"";right:-40px;background:radial-gradient(circle,rgba(149,30,227,.09),transparent 70%);height:120px;border-radius:50%;width:120px;top:-40px}
.unitbt{font-size:13px;font-weight:700;color:var(--orange);letter-spacing:.16em}
.lnkp7 h3{letter-spacing:-.02em;margin-top:14px;font-size:18px}
.lnkp7 p{
margin-top:12px;
color:var(--dim);
font-size:14.7px
}
.flownz{overflow:hidden;margin:-26px -26px 22px;background:var(--surface2)}
.flownz img{width:100%;aspect-ratio:16/11;object-fit:cover}
.lnkp7 ul{
display:grid;
gap:9px;
margin-top:16px
}
.lnkp7 li{font-size:14.3px;position:relative;color:var(--dim);padding-left:18px}
.lnkp7 li::before{left:0;content:"";border-radius:2px;background:linear-gradient(135deg,var(--violet),var(--orange));width:7px;height:7px;top:9px;position:absolute}

/* ---------- 08 文章双列卡 ---------- */
.stackkj{gap:20px;display:grid;grid-template-columns:1fr}
.deckdf{transition:transform .22s,box-shadow .22s,border-color .22s;position:relative;flex-direction:column;overflow:hidden;display:flex;border-radius:var(--r3);box-shadow:var(--sh);border:1px solid var(--line);background:var(--surface)}
.deckdf:hover{ box-shadow:var(--sh-h);
 border-color:rgba(149,30,227,.34);
 transform:translateY(-4px)}
.blku0{background:var(--surface2);margin:0;overflow:hidden;position:relative}
.blku0 img{aspect-ratio:4/3;width:100%;transition:transform .5s ease;object-fit:cover}
.deckdf:hover .blku0 img{transform:scale(1.035)}
.corem6{font-weight:800;color:transparent;left:16px;letter-spacing:-.05em;-webkit-text-stroke:1.4px rgba(255,255,255,.7);position:absolute;font-size:38px;top:12px;line-height:1}
.chipnn{padding:22px 22px 24px;flex:1;flex-direction:column;display:flex}
.deckdf time{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.07em;font-size:13px;color:var(--violet)}
.deckdf h3{font-size:18.5px;letter-spacing:-.022em;margin-top:10px;line-height:1.45}
.deckdf h3 a:hover{color:var(--violet)}
.deckdf p{
color:var(--dim);
font-size:14.6px;
margin-top:12px;
flex:1
}
.celltm{font-size:14.5px;transition:gap .2s;gap:7px;font-weight:600;align-items:center;margin-top:18px;color:var(--orange);display:inline-flex}
.celltm:hover{gap:12px}

/* ---------- 09 FAQ 左轴双栏 ---------- */
.topfa{display:grid;gap:28px}
.navqm{max-width:420px}
.navqm h2{font-size:clamp(22px,4vw,31px);
margin-top:14px;
letter-spacing:-.03em}
.navqm p{font-size:15.4px;margin-top:16px;color:var(--dim)}
.boxde{margin-top:24px}
.zonemz{ display:grid;
 gap:12px}
.boardjw{box-shadow:var(--sh);padding:0 22px;transition:border-color .2s,box-shadow .2s;border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
.boardjw:hover{border-color:rgba(149,30,227,.3)}
.boardjw[open]{border-color:rgba(149,30,227,.5);
box-shadow:var(--sh-h)}
.boardjw summary{list-style:none;font-size:15.6px;cursor:pointer;transition:color .18s;display:flex;font-weight:600;justify-content:space-between;align-items:center;gap:16px;color:var(--ink);padding:20px 0}
.boardjw summary::-webkit-details-marker{display:none}
.boardjw summary:hover{color:var(--violet)}
.boardjw summary::after{color:var(--orange);line-height:1;flex:none;content:"＋";font-size:17px}
.boardjw[open] summary::after{content:"－"}
.boardjw .topg5{border-top:1px solid var(--line2);font-size:14.8px;color:var(--dim);padding:0 0 22px;padding-top:16px}

/* ---------- 10 横向 CTA ---------- */
.cardph{
border:1px solid var(--line);
position:relative;
padding:44px 30px;
border-radius:var(--r4);
overflow:hidden;
box-shadow:var(--sh-h);
background:linear-gradient(118deg,rgba(149,30,227,.1),rgba(255,165,16,.09) 62%,rgba(149,30,227,.06)),var(--surface)
}
.cardph::after{
inset:0;
opacity:.6;
pointer-events:none;
position:absolute;
background:repeating-linear-gradient(115deg,transparent 0 20px,rgba(149,30,227,.05) 20px 40px);
content:""
}
.herohe{gap:24px;
position:relative;
display:grid}
.herojd h2{font-size:clamp(22px,4.2vw,32px);letter-spacing:-.03em}
.herojd p{ font-size:15.8px;
 color:var(--text);
 margin-top:14px;
 max-width:560px}
.tagau{ flex-wrap:wrap;
 display:flex;
 gap:12px}

/* ---------- 11 页脚 ---------- */
.listsc{
padding:56px 0 28px;
border-top:1px solid var(--line);
background:var(--surface)
}
.kitmq{display:grid;gap:30px}
.zoneu5 h4{margin-bottom:16px;font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.16em}
.nodebn{
font-size:16px;
display:flex;
color:var(--ink);
margin-bottom:14px;
font-weight:700;
align-items:center;
gap:10px
}
.nodebn i{ width:28px;
 height:28px;
 flex:none;
 background:linear-gradient(135deg,var(--violet),var(--orange));
 border-radius:9px}
.toptz{line-height:1.85;
max-width:360px;
font-size:14.4px;
color:var(--dim)}
.listpz{
display:grid;
gap:11px
}
.listpz a{color:var(--text);transition:color .18s;font-size:14.4px}
.listpz a:hover{color:var(--violet)}
.noded2{flex-wrap:wrap;margin-top:40px;display:flex;gap:8px 18px;justify-content:space-between;color:var(--dim);border-top:1px solid var(--line);font-size:13px;padding-top:20px}

/* ---------- 12 文章页 ---------- */
.figu6{padding:40px 0 68px}
.flowhj{
margin-bottom:22px;
color:var(--dim);
font-size:13px
}
.flowhj a:hover{color:var(--violet)}
.flowhj span{color:var(--text)}
.boardha{max-width:800px}
.boardha h1{  letter-spacing:-.032em;
  font-size:clamp(24px,4.8vw,37px)}
.siden0{color:var(--dim);margin-top:16px;gap:8px 16px;flex-wrap:wrap;font-size:13px;align-items:center;display:flex}
.siden0 b{
font-weight:600;
letter-spacing:.06em;
color:var(--orange)
}
.siden0 em{font-weight:600;color:var(--violet);font-style:normal}
.kite6{background:var(--surface2);overflow:hidden;border:1px solid var(--line);margin:30px 0;border-radius:var(--r4);box-shadow:var(--sh)}
.kite6 img{object-fit:cover;width:100%;aspect-ratio:16/10}
.innerk1{max-width:800px}
.innerk1 h2{border-left:3px solid var(--violet);font-size:clamp(19px,3.5vw,25px);letter-spacing:-.026em;line-height:1.4;margin:42px 0 14px;padding-left:16px}
.innerk1 h3{color:var(--violet-deep);
margin:28px 0 10px;
font-size:17.4px}
.innerk1 p{margin:14px 0;font-size:16.1px}
.innerk1 ul{display:grid;margin:14px 0;gap:9px;list-style:disc;padding-left:20px}
.innerk1 li{font-size:15.5px}
.innerk1 li::marker{color:var(--orange)}
.innerk1 strong{
color:var(--ink);
font-weight:600
}
.tileqs{ margin:26px 0;
 font-size:15px;
 color:var(--text);
 border:1px solid var(--line);
 border-radius:var(--r3);
 background:var(--surface);
 box-shadow:var(--sh);
 padding:20px 22px;
 border-left:3px solid var(--orange)}
/* tone */
.tileqs b{color:var(--violet)}
.hdxy{align-items:center;margin-top:40px;font-size:15px;display:inline-flex;font-weight:600;color:var(--violet);transition:gap .2s;gap:8px}
.hdxy:hover{gap:13px}

/* ---------- 13 响应式 ---------- */
@media(min-width:700px){
  .midfq{grid-template-columns:repeat(4,1fr)}
  .flowgs{
gap:18px;
grid-template-columns:repeat(2,1fr)
}
  .lnkp7.blkr4{grid-column:span 2}
  .stackkj{gap:22px;grid-template-columns:repeat(2,1fr)}
  .kitmq{grid-template-columns:1.5fr 1fr 1fr 1fr}
}
@media(min-width:1020px){
/* frame */
  .nodepu{padding:68px 0 78px}
  .midft{gap:60px;grid-template-columns:1.04fr .96fr}
  .flowgs{gap:18px;grid-template-columns:repeat(4,1fr)}
  .lnkp7.blkr4{grid-column:span 2;
grid-row:span 2}
  .topfa{
gap:54px;
align-items:start;
grid-template-columns:.86fr 1.14fr
}
  .navqm{top:110px;position:sticky}
  .cardph{padding:52px 46px}
  .herohe{
gap:40px;
grid-template-columns:1.3fr auto;
align-items:center
}
}
@media(max-width:560px){
  .tilet6{display:none}
  .flowv6{gap:10px}
  .midfq > div{padding:18px 16px}
  .lnkp7{padding:22px}
  .flownz{margin:-22px -22px 20px}
  .corem6{font-size:30px}
  .cardph{padding:34px 22px}
}
/* tone */
@media(prefers-reduced-motion:reduce){
  *{ transition:none!important;
 animation:none!important;
 scroll-behavior:auto!important}
  .boardbp{overflow-x:auto}
}

/* ---------- 相关文章（文章页内链，把权重留在站内） ---------- */
.navpp{  border-top:1px solid var(--line,#E4E5EC);
  padding-top:30px;
  margin-top:56px}
.navpp h2{font-size:19px;margin:0 0 16px}
.gridpx{gap:12px;display:grid}
@media(min-width:720px){.gridpx{grid-template-columns:repeat(3,1fr)}}
.gridpx a{background:var(--surface,var(--sheet,#fff));border-radius:var(--r2,14px);padding:15px 17px;transition:border-color .2s,transform .2s;border:1px solid var(--line,#E4E5EC);display:block}
.gridpx a:hover{ transform:translateY(-2px);
 border-color:var(--brand,var(--jade,var(--accent,currentColor)))}
.gridpx h3{font-size:15px;line-height:1.45;margin:0}
.gridpx p{color:var(--dim,#7D8497);-webkit-line-clamp:2;font-size:13px;-webkit-box-orient:vertical;overflow:hidden;display:-webkit-box;margin:8px 0 0;line-height:1.6}


/* ---------- 14 扩展：关于我们 / 分类 ---------- */
.topz2{display:grid;gap:34px}
.itembg{align-items:start;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.itembg figure{background:var(--surface2);border:1px solid var(--line);margin:0;overflow:hidden;box-shadow:var(--sh);border-radius:var(--r3)}
.itembg img{object-fit:cover;width:100%}
.itembg figure:first-child img{aspect-ratio:4/5}
.itembg figure:last-child img{aspect-ratio:3/4;margin-top:28px}
.lnkc8 h2{font-size:clamp(23px,4.4vw,33px);margin-top:14px;letter-spacing:-.03em}
.lnkc8 p{margin-top:18px;
font-size:15.8px}
.maingg{color:var(--ink);padding:6px 0 6px 20px;line-height:1.74;margin:26px 0 0;font-size:17px;border-left:2px solid var(--violet)}
.maingg footer{color:var(--dim);font-size:13px;margin-top:12px;letter-spacing:.05em}
.rowd2{
display:grid;
gap:0;
margin-top:32px;
border-top:1px solid var(--line)
}
.notekk{
display:grid;
gap:16px;
grid-template-columns:76px 1fr;
padding:19px 2px;
border-bottom:1px solid var(--line2)
}
.partt2{letter-spacing:.1em;font-weight:700;font-variant-numeric:tabular-nums;color:var(--orange);font-size:13px}
.notekk h3{letter-spacing:-.02em;font-size:16.4px}
.notekk p{font-size:14.5px;color:var(--dim);margin-top:8px}
.outerbv{ overflow:hidden;
 margin-top:28px;
 border:1px solid var(--line);
 gap:1px;
 grid-template-columns:repeat(2,1fr);
 background:var(--line);
 display:grid;
 border-radius:var(--r2)}
.outerbv > div{  padding:16px;
  background:var(--surface)}
.outerbv b{color:var(--ink);font-size:22px;letter-spacing:-.04em;font-variant-numeric:tabular-nums;display:block}
.outerbv b i{font-style:normal;color:var(--orange)}
.outerbv span{font-size:13px;display:block;margin-top:5px;color:var(--dim)}

.stackgf{
gap:16px;
display:grid
}
.gridt4{box-shadow:var(--sh);overflow:hidden;border:1px solid var(--line);position:relative;transition:transform .22s,box-shadow .22s,border-color .22s;border-radius:var(--r3);padding:24px 22px;background:var(--surface)}
.gridt4::before{width:26px;position:absolute;left:22px;content:"";background:linear-gradient(90deg,var(--violet),var(--orange));top:-1px;height:2px}
.gridt4:hover{transform:translateY(-4px);border-color:rgba(149,30,227,.34);box-shadow:var(--sh-h)}
.ftxt{color:var(--orange);font-size:12px;font-weight:700;letter-spacing:.18em}
.gridt4 h3{margin-top:12px;letter-spacing:-.022em;font-size:19px}
.gridt4 p{
font-size:14.7px;
color:var(--dim);
margin-top:12px
}
.gridt4 ul{margin-top:16px;display:grid;gap:9px}
.gridt4 li{padding-left:18px;color:var(--dim);font-size:14.2px;position:relative}
.gridt4 li::before{background:linear-gradient(135deg,var(--violet),var(--orange));border-radius:2px;content:"";position:absolute;height:7px;left:0;width:7px;top:9px}
@media(min-width:700px){
  .outerbv{grid-template-columns:repeat(4,1fr)}
  .stackgf{grid-template-columns:1fr 1fr}
}
@media(min-width:1020px){
  .topz2{ gap:52px;
 align-items:start;
 grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}

/* ---------- 补齐 Base 通用区块类 ----------
   Base.metacz()/about() 用的是 .tilebk / .sidevs，
   而本模板的样式表只有 .gridqk / .unitmy，导致这两个区块没有上下留白。 */
.tilebk{padding:78px 0}
.tilebk.framexp{ border-top:1px solid var(--line);
 border-bottom:1px solid var(--line);
 background:var(--surface)}
.sidevs{margin-bottom:42px;
max-width:680px}
.sidevs h2{font-size:clamp(23px,4.4vw,34px);letter-spacing:-.03em;margin-top:14px}
.sidevs p{color:var(--dim);margin-top:16px;font-size:15.5px}
.basemu{display:block}
.figwg{display:block}

/* ---------- 移动端打磨 ----------
   百度移动友好度要求可点击元素不能太小：窄屏下导航与页脚链接统一 ≥36px 高。
   字号方面：正文不小于 13px（各模板里 12.x 的辅助文字已统一抬到 13px）。 */
@media(max-width:767px){
  header a,aside a,nav a,.side-nav a,.side-cta,.side-mark,
  .flowhn a,.nav-list a,.nav-cta,.topbar a,.txtrc,.ft-links a,.listpz a{  align-items:center;
  display:inline-flex;
  min-height:36px}
  .ft-links a,.listpz a{min-height:38px}
}