html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
    body {
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
                   "WenQuanYi Micro Hei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    .gradient-bg {
      background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 40%, #0ea5e9 100%);
      background-size: 200% 200%;
      animation: gradientShift 12s ease infinite;
    }

    html.dark .gradient-bg {
      background: linear-gradient(135deg, #020617 0%, #0b1224 42%, #172554 100%);
      background-size: 200% 200%;
    }
    @keyframes gradientShift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    .fade-up {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .fade-up-delay-1 { transition-delay: 0.08s; }
    .fade-up-delay-2 { transition-delay: 0.16s; }
    .fade-up-delay-3 { transition-delay: 0.24s; }
    .title-line { position: relative; display: inline-block; }
    .title-line::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -0.35rem;
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, #2563eb, #0ea5e9);
      border-radius: 2px;
      transform: translateX(-50%);
      transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .fade-up.visible .title-line::after { width: 3rem; }

    .icon-svg {
      width: 1.25rem; height: 1.25rem;
      stroke: currentColor; fill: none; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round;
    }
    .icon-svg-sm { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    #lang-toggle, #theme-toggle {
      width: 2.25rem; height: 2.25rem;
      border-radius: 9999px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 0.7rem; font-weight: 700;
      color: #334155; background: #f1f5f9;
      border: 1px solid #e2e8f0;
      transition: background 0.2s, color 0.2s;
    }
    html.dark #lang-toggle, html.dark #theme-toggle {
      color: #e2e8f0; background: #1e293b; border-color: #334155;
    }
    #theme-toggle .icon-sun { display: none; }
    #theme-toggle .icon-moon { display: block; }
    html.dark #theme-toggle .icon-sun { display: block; }
    html.dark #theme-toggle .icon-moon { display: none; }
    #theme-toggle svg {
      width: 1.1rem; height: 1.1rem;
      stroke: currentColor; fill: none; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round;
    }

    #back-to-top {
      position: fixed; right: calc(1.25rem + env(safe-area-inset-right, 0px)); bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); z-index: 40;
      width: 2.75rem; height: 2.75rem; border-radius: 9999px;
      background: #2563eb; color: #fff;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 24px -6px rgb(37 99 235 / 0.45);
      opacity: 0; visibility: hidden;
      transform: translateY(12px) scale(0.9);
      transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
    }
    #back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
    html.dark #back-to-top { background: #3b82f6; }

    html.dark body { background: #020617; color: #e2e8f0; }
    html.dark .bg-white { background-color: #0f172a !important; }
    html.dark .bg-slate-50 { background-color: #1e293b !important; }
    html.dark .border-slate-100, html.dark .border-slate-200 { border-color: #334155 !important; }
    html.dark .text-slate-900 { color: #f1f5f9 !important; }
    html.dark .text-slate-700, html.dark .text-slate-600 { color: #cbd5e1 !important; }
    html.dark .text-slate-500 { color: #94a3b8 !important; }

    
    .map-stage {
      border-radius: 1.25rem;
      border: 1px solid #e2e8f0;
      background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(59, 130, 246, 0.08), transparent 70%),
        linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
      padding: 0.85rem 0.65rem 0.75rem;
      overflow: hidden;
      position: relative;
    }
    html.dark .map-stage {
      background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(37, 99, 235, 0.12), transparent 70%),
        linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
      border-color: #334155;
    }
    .map-svg {
      width: 100%;
      max-width: 560px;
      margin: 0 auto;
      display: block;
      height: auto;
    }
    .china-land {
      fill: #e2e8f0;
      stroke: #94a3b8;
      stroke-width: 1.2;
      stroke-linejoin: round;
    }
    html.dark .china-land {
      fill: #1e293b;
      stroke: #475569;
    }
    .china-sea {
      fill: #dbeafe;
      opacity: 0.55;
    }
    html.dark .china-sea { fill: #1e3a5f; opacity: 0.35; }
    .map-label {
      font-size: 11px;
      font-weight: 700;
      fill: #1e293b;
    }
    html.dark .map-label { fill: #f1f5f9; }
    .map-sub {
      font-size: 9px;
      fill: #64748b;
    }
    html.dark .map-sub { fill: #94a3b8; }
    .map-caption {
      font-size: 10px;
      fill: #64748b;
    }
    html.dark .map-caption { fill: #94a3b8; }

    .node-city {
      fill: #fff;
      stroke: #64748b;
      stroke-width: 2;
    }
    html.dark .node-city { fill: #0f172a; stroke: #94a3b8; }
    .node-server {
      fill: #2563eb;
      stroke: #1d4ed8;
      stroke-width: 2;
    }
    .node-server.backup {
      fill: #64748b;
      stroke: #475569;
    }
    .node-pulse {
      fill: none;
      stroke: #3b82f6;
      stroke-width: 2;
      opacity: 0;
      animation: nodeRing 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    }
    .node-pulse.delay { animation-delay: 1.4s; }
    .node-pulse.red { stroke: #ef4444; }
    @keyframes nodeRing {
      0%   { r: 11; opacity: 0.65; stroke-width: 2.2; }
      70%  { opacity: 0.18; }
      100% { r: 34; opacity: 0; stroke-width: 0.6; }
    }

    .path-good {
      fill: none;
      stroke: #22c55e;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 5 11;
      animation: dashMove 1.35s linear infinite;
      filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.4));
    }
    .path-bad {
      fill: none;
      stroke: #ef4444;
      stroke-width: 2.85;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 4 12;
      animation: dashMove 1.85s linear infinite;
      opacity: 0.9;
      filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.35));
    }
    .path-ghost {
      fill: none;
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-dasharray: 4 6;
      opacity: 0.32;
    }
    html.dark .path-ghost { stroke: #64748b; }
    @keyframes dashMove {
      to { stroke-dashoffset: -48; }
    }
    .packet-good {
      fill: #16a34a;
      filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.75));
      animation: packetPulse 1.2s ease-in-out infinite;
    }
    @keyframes packetPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.55; }
    }
    .packet-bad {
      fill: #dc2626;
      filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.55));
    }
    .srv-glow {
      fill: #93c5fd;
      opacity: 0.35;
    }
    html.dark .srv-glow { fill: #1d4ed8; opacity: 0.45; }

    .compare-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    @media (min-width: 768px) {
      .compare-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    }
    .compare-card {
      border-radius: 1rem;
      border: 1px solid #e2e8f0;
      background: #fff;
      padding: 1.15rem 1.1rem;
      height: 100%;
    }
    html.dark .compare-card {
      background: #0f172a;
      border-color: #334155;
    }
    .compare-card.good {
      border-color: #86efac;
      background: linear-gradient(180deg, #f0fdf4 0%, #fff 50%);
    }
    html.dark .compare-card.good {
      border-color: rgba(34, 197, 94, 0.35);
      background: linear-gradient(180deg, rgba(6, 78, 59, 0.25) 0%, #0f172a 55%);
    }
    .compare-card.bad {
      border-color: #fca5a5;
      background: linear-gradient(180deg, #fef2f2 0%, #fff 50%);
    }
    html.dark .compare-card.bad {
      border-color: rgba(239, 68, 68, 0.35);
      background: linear-gradient(180deg, rgba(127, 29, 29, 0.25) 0%, #0f172a 55%);
    }
    .badge-ok, .badge-bad {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-size: 0.7rem; font-weight: 700;
      padding: 0.2rem 0.55rem;
      border-radius: 9999px;
    }
    .badge-ok { background: #dcfce7; color: #166534; }
    .badge-bad { background: #fee2e2; color: #991b1b; }
    html.dark .badge-ok { background: rgba(22, 101, 52, 0.35); color: #86efac; }
    html.dark .badge-bad { background: rgba(153, 27, 27, 0.4); color: #fca5a5; }

    .rule-chip {
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.45rem 0.85rem;
      border-radius: 9999px;
      font-size: 0.8rem; font-weight: 600;
      background: #eff6ff; color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }
    html.dark .rule-chip {
      background: rgba(30, 58, 138, 0.4);
      color: #93c5fd;
      border-color: rgba(59, 130, 246, 0.35);
    }

    .toc-card {
      border: 1px solid #e2e8f0;
      border-radius: 1rem;
      background: #fff;
      padding: 1rem 1.15rem;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    html.dark .toc-card {
      background: #1e293b;
      border-color: #334155;
    }
    .toc-card:hover {
      border-color: rgba(37, 99, 235, 0.4);
      box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.2);
    }
    .toc-card.soon {
      opacity: 0.7;
    }

    .intl-card {
      border-radius: 1.25rem;
      border: 1px solid #c7d2fe;
      background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 45%, #ecfeff 100%);
      padding: 1.35rem 1.25rem;
    }
    html.dark .intl-card {
      border-color: rgba(99, 102, 241, 0.35);
      background: linear-gradient(135deg, rgba(49, 46, 129, 0.35) 0%, #0f172a 50%, rgba(8, 47, 73, 0.35) 100%);
    }
    .region-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.4rem 0.85rem;
      border-radius: 9999px;
      font-size: 0.8rem;
      font-weight: 700;
      background: #fff;
      border: 1px solid #c7d2fe;
      color: #3730a3;
    }
    html.dark .region-pill {
      background: rgba(15, 23, 42, 0.8);
      border-color: rgba(129, 140, 248, 0.4);
      color: #c7d2fe;
    }

    @media (prefers-reduced-motion: reduce) {
      .path-good, .path-bad, .node-pulse, .gradient-bg, .packet-good, .packet-bad { animation: none !important; }
      .path-good, .path-bad { stroke-dasharray: none; filter: none; }
      .packet-good, .packet-bad { filter: none; opacity: 1; }
    }
  
    
    .js-anim-root.is-offscreen,
    .js-anim-root.is-offscreen * {
      animation-play-state: paused !important;
    }

    .hero-badge-dot {
      animation: pulseDot 1.6s ease-in-out infinite;
    }
    @keyframes pulseDot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.55; transform: scale(0.85); }
    }
    .breadcrumb a { color: rgba(186, 230, 253, 0.85); }
    .breadcrumb a:hover { color: #fff; }

    #scroll-progress {
      position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 60;
      background: linear-gradient(90deg, #2563eb, #38bdf8, #818cf8);
      transition: width 0.08s linear;
    }

.compare-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:0.9rem;
  align-items:stretch;
}
@media (min-width:960px){
  .compare-layout{
    grid-template-columns:minmax(0,1.05fr) minmax(0,1.05fr) minmax(200px,0.78fr);
  }
}
@media (max-width:959px){
  .compare-layout .intl-card{order:3}
}
.compare-layout .compare-card{padding:0.65rem 0.65rem 0.55rem;}
.compare-layout .compare-card p{font-size:11px;line-height:1.45;margin-bottom:0.55rem;}
.compare-layout .map-stage{padding:0.28rem 0.22rem 0.22rem;}
.compare-layout .map-svg{max-height:210px;}
.compare-layout .intl-card{
  margin:0;
  max-width:none;
  height:100%;
  border-radius:1rem;
  border:1px solid #93c5fd;
  background:linear-gradient(180deg,#eff6ff 0%,#fff 50%);
  padding:0.65rem 0.7rem;
}
html.dark .compare-layout .intl-card{
  border-color:rgba(59,130,246,.35);
  background:linear-gradient(180deg,rgba(30,58,138,.28) 0%,#0f172a 55%);
}
.compare-layout .intl-card h3{font-size:0.95rem;}
.compare-layout .region-pill{
  background:#fff;
  border:1px solid #bfdbfe;
  color:#1d4ed8;
  font-size:.72rem;
  padding:.2rem .55rem;
}
html.dark .compare-layout .region-pill{
  background:rgba(15,23,42,.8);
  border-color:rgba(129,140,248,.4);
  color:#c7d2fe;
}
.map-stage{position:relative;}
.map-stage > .map-play,.map-play{
  position:absolute; right:.45rem; bottom:.45rem; z-index:6;
  width:2rem !important; height:2rem !important; min-width:2rem !important; padding:0 !important;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(148,163,184,.45);
  border-radius:999px;
  background:rgba(255,255,255,.48);
  color:#2563eb;
  cursor:pointer;
  box-shadow:0 4px 14px -6px rgba(15,23,42,.25);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
html.dark .map-stage > .map-play,.map-play{
  background:rgba(15,23,42,.42);
  border-color:rgba(148,163,184,.35);
  color:#93c5fd;
}
.map-play:hover{background:rgba(255,255,255,.66); border-color:#93c5fd}
.map-play svg.icon{width:.68rem;height:.68rem;fill:currentColor;position:relative;z-index:2;margin-left:1px}
.map-play span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.map-play-ring{position:absolute;inset:1px;z-index:1;transform:rotate(-90deg)}
.map-play-ring circle{fill:none;stroke-linecap:round}
.map-play-ring .track{stroke:rgba(37,99,235,.16);stroke-width:2}
html.dark .map-play-ring .track{stroke:rgba(147,197,253,.25)}
.map-play-ring .fill{stroke:#2563eb;stroke-width:2;stroke-dasharray:94.2;stroke-dashoffset:94.2}
html.dark .map-play-ring .fill{stroke:#93c5fd}
.map-stage.is-playing .map-play-ring .fill{animation:mapRing 8s linear forwards}
@keyframes mapRing{from{stroke-dashoffset:94.2}to{stroke-dashoffset:0}}
.map-stage.is-paused .path-good,
.map-stage.is-paused .path-bad{animation:none !important;stroke-dasharray:none !important}
.map-stage.is-paused .node-pulse{animation:none !important;opacity:0 !important}
.map-stage.is-paused .packet-good,
.map-stage.is-paused .packet-bad{visibility:hidden !important}

.map-stage.is-user-paused .path-good,
.map-stage.is-user-paused .path-bad,
.map-stage.is-user-paused .node-pulse,
.map-stage.is-user-paused .map-play-ring .fill{
  animation-play-state:paused !important;
}

.map-stage:not(.is-playing) .path-good,
.map-stage:not(.is-playing) .path-bad,
.map-stage:not(.is-playing) .node-pulse{
  animation:none !important;
}
.map-stage:not(.is-playing) .packet-good,
.map-stage:not(.is-playing) .packet-bad{
  visibility:hidden !important;
}




:root{
  --page-max:72rem;
  --page-side:clamp(1rem,2.2vw,2rem);
  --section-y:clamp(3.5rem,5.5vw,6.5rem);
  --card-gap:clamp(1rem,1.4vw,1.6rem);
  --feat-min:16.25rem;
  --feat-max:21.5rem;
  --scene-min:17.5rem;
  --scene-max:24rem;
  --price-max:20rem;
}
@media (min-width:1280px){
  :root{ --page-max:84rem; --feat-max:22rem; --scene-max:25rem; }
}
@media (min-width:1600px){
  :root{ --page-max:96rem; --feat-max:22.5rem; --scene-max:26rem; }
}
@media (min-width:1920px){
  :root{ --page-max:108rem; --feat-max:23rem; --scene-max:26.5rem; }
}
@media (min-width:2400px){
  :root{ --page-max:120rem; }
}
.max-w-5xl,.max-w-6xl,.max-w-7xl{
  width:100%;
  max-width:var(--page-max);
  box-sizing:border-box;
}
.home-section{padding-top:var(--section-y);padding-bottom:var(--section-y);}
#features .grid,
#scenarios .grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--card-gap);
}
#features .grid > *,
#scenarios .grid > *{
  box-sizing:border-box;
}
@media (max-width:639px){
  #features .grid > *,
  #scenarios .grid > *{flex:1 1 100%;max-width:100%;}
}
@media (min-width:640px){
  #features .grid > *{flex:1 1 var(--feat-min);max-width:var(--feat-max);}
  #scenarios .grid > *{flex:1 1 var(--scene-min);max-width:var(--scene-max);}
}
.pricing-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--card-gap);
  max-width:none;
}
.pricing-grid > *{
  flex:1 1 16.5rem;
  max-width:var(--price-max);
}
@media (max-width:767px){
  .pricing-grid > *{flex:1 1 100%;max-width:100%;}
}
.compare-layout{
  width:100%;
  max-width:min(84rem,100%);
  margin-left:auto;
  margin-right:auto;
}
@media (min-width:960px){
  .compare-layout{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1.05fr) minmax(220px,.82fr);
    gap:var(--card-gap);
  }
}
@media (min-width:1600px){
  .compare-layout{max-width:min(92rem,100%);}
  .compare-layout .map-svg{max-height:300px;}
}
.dl-card{max-width:26rem;width:100%;}
@media (min-width:768px){
  #downloads .grid{justify-items:center;}
}

.card-hover,.dl-card,.guide-card,.compare-card,.toc-card,
.pricing-card,.tut-cta-card,.cpv-card,.flow-card,.faq-item,
.main-dl-card{
  container-type:inline-size;
  container-name:scard;
}
.card-hover h3,.dl-card h3,.guide-card h3,.compare-card h3,
.pricing-card h3,.tut-cta-card h3,.cpv-card h3,.faq-item h3{
  font-size:clamp(1.05rem, calc(.32cqi + .95rem), 1.28rem);
}
.card-hover p,.dl-card p,.guide-card p,.compare-card p,
.pricing-card p,.tut-cta-card p,.cpv-copy p{
  font-size:clamp(.8125rem, calc(.18cqi + .78rem), .9375rem);
  max-width:44em;
}
#scenarios .card-hover{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
}
.toc-card{align-items:flex-start;}
@container scard (min-width:22.5rem){
  #scenarios .card-hover{
    flex-direction:row;
    gap:1.25rem;
  }
}
@container scard (max-width:22rem){
  .toc-card{flex-direction:column;gap:.45rem;}
  .guide-card .flex.items-start{flex-direction:column;}
}
@container scard (min-width:20rem){
  .card-hover,.dl-card,.pricing-card,.tut-cta-card{
    padding-block:clamp(1.2rem, calc(.8cqi + 1rem), 1.85rem);
    padding-inline:clamp(1.1rem, calc(.7cqi + .95rem), 1.75rem);
  }
}
@container scard (max-width:21.5rem){
  #scenarios .card-hover .w-14{
    width:2.75rem;
    height:2.75rem;
  }
}

#faq .max-w-3xl{
  max-width:min(72rem,100%);
  container-type:inline-size;
  container-name:faqsec;
}
#faq .space-y-3{display:flex;flex-direction:column;gap:.75rem;}
#faq .space-y-3 > * + *{margin-top:0;}
@container faqsec (min-width:42rem){
  #faq .space-y-3{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.85rem;
    align-items:start;
  }
}
#downloads .grid,
#guide .grid,
.guide-card .grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--card-gap,1.25rem);
}
#downloads .grid > *,
.guide-card .grid > *{
  flex:1 1 16.5rem;
  min-width:0;
}
#downloads .grid:has(.dl-card) > *{max-width:26rem;}
#downloads .grid:has(.flow-card) > *,
.guide-card .grid > *{max-width:none;}
#tutorial .grid.gap-3{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
}
#tutorial .grid.gap-3 > *{
  flex:1 1 14rem;
  max-width:22rem;
}