*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6f4f3;color:#251e20;font:16px/1.65 "Segoe UI","Microsoft YaHei",sans-serif}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #952d30;outline-offset:4px}section[id]{scroll-margin-top:90px}header{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 22px;background:#f6f4f3e8;backdrop-filter:blur(16px)}.pill{border:1px solid #fff;background:#fffdfc;border-radius:100px;box-shadow:0 5px 20px #3f222007}.brand{display:inline-flex;align-items:center;gap:8px;font-weight:850;padding:6px 15px;font-size:20px;white-space:nowrap}.brand svg{width:26px;height:26px;color:#de423c}.brand small{font-size:9px;letter-spacing:2px;color:#a3423a}nav{display:flex;gap:2px;padding:4px}nav a,.account,.menu{padding:6px 14px;font-size:14px;font-weight:700;border-radius:100px}nav a:hover,.account:hover{background:#ffe9e3;color:#a32f2b}.menu{display:none}.hero{position:relative;display:grid;place-items:center;text-align:center;min-height:clamp(530px,80vh,690px);margin:5px 18px 55px;border-radius:27px;padding:44px 20px 76px;color:#fff;background:radial-gradient(ellipse at 1% 0%,#ffbd55 0%,transparent 47%),radial-gradient(ellipse at 97% 100%,#ffdaa7 0%,transparent 44%),linear-gradient(177deg,#c82e40 4%,#e45d59 34%,#f3a28f 70%,#fbd0bc 100%);box-shadow:0 25px 65px #c1473b2a}.hero-content{position:relative}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;color:#9c3831}.hero-label{display:inline-flex;align-items:center;gap:8px;color:#fff;border:1px solid #ffffff75;border-radius:100px;background:#67232b38;padding:5px 12px}i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ffd59c}.hero h1{font-size:clamp(43px,6vw,80px);letter-spacing:-.065em;line-height:1.12;margin:19px 0 14px;text-shadow:0 2px 12px #55202236}.hero p{margin:0 0 24px;color:#421d21;font-weight:650}.actions,.platform-shortcuts{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:13px;border:0;border-radius:100px;padding:11px 22px;font-weight:800;transition:transform .18s}.btn:hover{transform:translateY(-2px)}.hot{background:linear-gradient(120deg,#a42236,#bf441e);color:white;box-shadow:0 6px 15px #812f2d26}.light{background:#fff6f0;color:#351e20}.platform-shortcuts{margin-top:20px;gap:7px}.platform-shortcuts button{border:1px solid #ffffff80;background:#fff8f36e;border-radius:100px;padding:4px 11px;color:#482227;font-size:12px;font-weight:750}.hero-chip{position:absolute;bottom:0;transform:translateY(50%);display:grid;justify-items:center;gap:6px}.hero-chip small{color:#542226;font-weight:750}.hero-chip span{color:#392628;padding:9px 19px;box-shadow:0 10px 30px #863c3426;font-weight:800}.hero-chip i{background:#25896a;margin-right:5px}.hero-chip b{color:#9c3831;padding:0 3px}.wrap{width:min(1080px,calc(100% - 40px));margin:0 auto;padding:63px 0}.section-head{text-align:center;margin-bottom:28px}h2{font-size:clamp(27px,4vw,43px);line-height:1.2;letter-spacing:-.035em;margin:9px 0 12px}h3{margin:7px 0}p{color:#655654}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}article,.platform-box,details,.console{background:#fffdfc;border:1px solid #efdfdb;border-radius:20px;padding:24px}article p{margin-bottom:0}.symbol{display:grid;place-items:center;border-radius:14px;width:48px;height:48px;background:#ffebe5;color:#a32e2c;font-size:24px}.demo{background:#2d2025;color:white;border-radius:26px;padding:32px;display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center}.demo p{color:#e2c9c7}.demo .eyebrow{color:#ffc2a9}.console{color:#251e20;display:grid;gap:11px}.console select{width:100%;border:1px solid #e9d7d3;background:#fff7f4;padding:8px;border-radius:9px}.status{font-size:14px;color:#6b4947}.status[data-on]{color:#176a4d}.switch,#platform-buttons{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:18px 0 0}.switch button,#platform-buttons button{border:1px solid #e9d7d3;border-radius:100px;background:#fff;padding:6px 14px}.switch button[aria-pressed=true],#platform-buttons button[aria-pressed=true]{background:#81313a;color:white;border-color:#81313a}.plan{display:flex;flex-direction:column;align-items:flex-start}.plan .btn{margin-top:auto}.plan ul{padding-left:20px;color:#655654}.featured{background:#fff1ea;border-color:#ebad9c}.price{font-size:32px;font-weight:850}.price small{font-size:14px;font-weight:600}.platform-box{text-align:center}.platform-box #platform-buttons{margin:0 0 17px}.faq{max-width:780px}details{padding:14px 19px;margin-bottom:9px}summary{cursor:pointer;font-weight:700}details p{margin:9px 0}footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:22px max(20px,calc((100% - 1080px)/2));border-top:1px solid #eadbd7;font-size:14px}dialog{border:1px solid #eadbd7;border-radius:23px;padding:30px;width:min(440px,calc(100% - 30px));color:#251e20}dialog::backdrop{background:#2617199c}.close{float:right;border:0;background:#ffede8;border-radius:50%;width:34px;height:34px;font-size:21px}@media(max-width:720px){header{padding:10px 12px}.account{display:none}.menu{display:block}nav{display:none;position:absolute;top:calc(100% + 3px);right:12px;border-radius:18px;padding:8px;flex-direction:column}nav.open{display:flex}.hero{margin:4px 10px 44px;min-height:540px;border-radius:21px}.wrap{width:calc(100% - 28px);padding:42px 0}.grid,.demo{grid-template-columns:1fr}.demo{padding:24px;gap:12px}.hero h1{font-size:clamp(36px,10vw,57px)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
.account-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.account-actions button {
  padding: 6px 13px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
}
.account-actions .login {
  background: transparent;
  border: 0;
  border-radius: 100px;
}
.account-actions button:hover { background: #ffe9e3; }
@media (max-width: 720px) {
  header { gap: 6px; }
  .menu { margin-left: auto; padding-inline: 9px; }
  .account-actions button { padding-inline: 9px; }
}

/* Type scale and visual rhythm */
body {
  background: #f8f6f3;
  font-family: Inter, "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
header { background: #f8f6f3ed; }
nav a { color: #62504e; }
.account-actions .pill { color: #972a38; background: #fff0eb; border-color: #f6dcd5; }
.hero {
  isolation: isolate;
  overflow: visible;
  background:
    radial-gradient(ellipse at 0% 0%, #ffc36a 0%, transparent 52%),
    radial-gradient(ellipse at 90% 110%, #ffd1a2 4%, transparent 57%),
    linear-gradient(154deg, #a41c3c 12%, #c43d4f 49%, #ed8a76 83%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: repeating-radial-gradient(ellipse at 103% 102%, transparent 0 43px, #fff2 44px 45px, transparent 46px 68px);
  mask-image: linear-gradient(115deg, transparent 48%, black 100%);
  pointer-events: none;
}
.hero-content { max-width: 720px; }
.hero-label { font-size: 12px; font-weight: 650; letter-spacing: .18em; background: #47142278; }
.hero h1 {
  font-size: clamp(52px, 7.4vw, 98px);
  font-weight: 900;
  line-height: 1.07;
  letter-spacing: -.055em;
  margin: 23px 0 21px;
  text-shadow: 0 4px 30px #53112954;
}
.hero h1 span {
  display: block;
  font-size: .79em;
  font-weight: 600;
  letter-spacing: -.03em;
  color: #fff0df;
  margin-top: .16em;
}
.hero p {
  color: #fff7ee;
  font-size: clamp(14px, 1.6vw, 19px);
  font-weight: 400;
  text-shadow: 0 1px 7px #571d25;
  margin-bottom: 28px;
}
.hero .hot { background: #fff9f0; color: #882739; box-shadow: 0 8px 25px #6e233343; }
.hero .light { background: #6b1f3463; border: 1px solid #ffdfd098; color: #fff; }
.platform-shortcuts button { background: #fff5ea; border-color: transparent; }
.wrap { padding-block: 78px; }
.section-head { margin-bottom: 35px; }
.section-head h2, .demo h2 { font-weight: 850; letter-spacing: -.04em; }
.section-head p { max-width: 34em; margin: 13px auto 0; font-size: 15px; }
.grid { gap: 20px; }
.grid article { padding: 29px; box-shadow: 0 8px 24px #46202607; }
.grid h3 { font-size: 22px; font-weight: 750; margin-top: 15px; }
.grid article p, .plan ul { font-size: 15px; line-height: 1.75; }
.demo { padding: 38px; }
.demo h2 { margin-top: 0; }
.price { font-size: 39px; line-height: 1.25; letter-spacing: -.045em; }
.price small { color: #655654; letter-spacing: 0; }
@media (max-width: 720px) {
  .hero h1 { font-size: clamp(39px, 10.8vw, 65px); }
  .hero p { max-width: 24em; margin-inline: auto; }
  .wrap { padding-block: 46px; }
  .demo, .grid article { padding: 23px; }
}
@media (max-width: 350px) {
  .brand { padding-inline: 9px; gap: 5px; }
  .brand svg { width: 21px; }
  .menu { white-space: nowrap; }
  .account-actions { gap: 1px; }
  .account-actions button { padding-inline: 6px; }
}

/* Technology theme */
body { background: #080d18; color: #edf5ff; }
header { background: #080d18ee; border-bottom: 1px solid #192840; }
.pill, .account-actions .pill { background: #111d31; color: #e4f1ff; border-color: #293e5c; }
.brand svg, .brand small { color: #70ecff; }
nav a { color: #bacce0; }
nav a:hover, .account-actions button:hover { color: #fff; background: #253957; }
.hero {
  grid-template-columns: 1fr 1fr;
  text-align: left;
  padding: 54px clamp(24px,6vw,96px);
  border: 1px solid #293e5c;
  background: radial-gradient(ellipse at 78% 50%, #122e50, transparent 60%), linear-gradient(125deg,#101b31,#080e20);
  box-shadow: 0 24px 65px #0005;
}
.hero::before {
  background: linear-gradient(#83b9ff12 1px,transparent 1px), linear-gradient(90deg,#83b9ff12 1px,transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg,transparent,black);
}
.hero-content { justify-self: start; z-index: 1; }
.hero-label { color: #a3f5ff; background: #102c40; border-color: #34546a; }
.hero-label i, .hero-chip i { background: #62f7e0; box-shadow: 0 0 12px #62f7e0; }
.hero h1 { font-size: clamp(40px,6vw,86px); text-shadow: none; }
.hero h1 span { color: #91e9ff; }
.hero p { color: #c1d2e7; text-shadow: none; }
.actions, .platform-shortcuts { justify-content: flex-start; }
.hot, .hero .hot { background: linear-gradient(110deg,#73f2ee,#7abaff); color: #08162b; box-shadow: 0 5px 25px #57bbfa2e; }
.hero .light { background: #152640; color: #e6f3ff; border-color: #436484; }
.platform-shortcuts button { background: #152640; color: #bcd3e9; border-color: #263f5a; }
.hero-chip { justify-self: center; }
.hero-chip small, .hero-chip span { color: #d5e8ff; }
.hero-chip b, .eyebrow { color: #75ddfa; }
.network-art { position: relative; width: min(100%,580px); aspect-ratio: 1; justify-self: center; }
.network-art canvas { display: block; width: 100%; height: 100%; }
#motion { position: absolute; bottom: 3%; right: 0; font-size: 12px; padding: 5px 12px; }
p, .plan ul, .price small { color: #aebfd5; }
article, .platform-box, details, .console, dialog { background: #101a2c; border-color: #293b56; color: #edf5ff; }
.featured { background: #142b44; border-color: #527c9f; }
.symbol, .close { background: #1b3450; color: #9eeaff; }
.demo { background: #111e34; border: 1px solid #293e5c; }
.demo p { color: #c1d2e7; }
.console select, .switch button, #platform-buttons button { background: #182940; border-color: #38516e; color: #edf5ff; }
.switch button[aria-pressed=true], #platform-buttons button[aria-pressed=true] { background: #8cdefd; color: #0b1c30; border-color: #8cdefd; }
.status { color: #bcd3e9; }
.status[data-on] { color: #72f4c5; }
footer { border-color: #253957; }
:focus-visible { outline-color: #94edff !important; }
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding: 34px 14px 43px; }
  .hero-content { justify-self: center; }
  .actions, .platform-shortcuts { justify-content: center; }
  .network-art { width: min(100%,320px); }
}

#member-count { font-variant-numeric: tabular-nums; }
.hero-chip .sample-label { font-size: 11px; color: #aebfd5; margin-left: 5px; }

.map-panel { padding: clamp(12px, 3vw, 28px); background: #101a2c; border: 1px solid #293b56; border-radius: 24px; }
.world-map { position: relative; isolation: isolate; border-radius: 14px; background: #0b1729; }
.world-map svg { display: block; width: 100%; height: auto; border-radius: inherit; }
.map-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.map-pin::after { content: ""; display: block; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: #7de6ff; box-shadow: 0 0 10px #73eaff; }
.map-pin:hover::after, .map-pin[aria-pressed=true]::after { background: #fff; box-shadow: 0 0 0 4px #70eaff52, 0 0 18px #70eaff; }
.map-caption { margin: 16px 0 12px; text-align: center; color: #a1efff; font-weight: 750; }
.map-cities { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.map-cities button { border: 1px solid #38516e; border-radius: 100px; padding: 5px 12px; background: #182940; color: #edf5ff; }
.map-cities button[aria-pressed=true] { background: #8cdefd; color: #0b1c30; }

.map-routes path {
  fill: none;
  stroke: #65dcff;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-dasharray: 3 8;
  opacity: .62;
  animation: map-flow 1.6s linear infinite;
}
.map-pin[aria-pressed=true]::after { animation: map-glow 1.8s ease-in-out infinite alternate; }
@keyframes map-flow { to { stroke-dashoffset: -22; } }
@keyframes map-glow { to { box-shadow: 0 0 0 7px #70eaff26, 0 0 20px #70eaff; } }
@media (prefers-reduced-motion: reduce) {
  .map-routes path, .map-pin[aria-pressed=true]::after { animation: none; }
}

/* Server map */
.map-panel { background: linear-gradient(155deg, #15253d, #0c1526 52%); box-shadow: 0 24px 70px #02061185; }
.world-map { overflow: hidden; border: 1px solid #304762; background: radial-gradient(ellipse at 75% 52%, #152f49, #091423 75%); }
.world-map svg > rect { opacity: .52; }
.map-land { fill: #1c3850; stroke: #456581; stroke-width: .45; stroke-linejoin: round; }
.map-routes path { stroke-width: 1.45; stroke-dasharray: 2 12; opacity: .92; filter: drop-shadow(0 0 3px #47beff); }
.map-routes .route-track { stroke: #50a7d6; stroke-width: .8; stroke-dasharray: none; opacity: .32; animation: none; filter: none; }
@keyframes map-flow { to { stroke-dashoffset: -28; } }
.map-pin::after { box-sizing: border-box; width: 9px; height: 9px; border: 1px solid #b1f6ff; background: #48b9ee; }
.map-pin[aria-pressed=true] { z-index: 2; }
.map-pin[aria-pressed=true]::after { background: #d9fbff; }
.map-readout { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 14px 3px; border-bottom: 1px solid #293d57; }
.map-caption { margin: 0; text-align: left; font-size: 14px; }
.map-network-count { color: #adbed4; font-size: 12px; }
.map-cities { margin-top: 14px; }
@media (max-width: 720px) {
  .map-pin { width: 14px; height: 14px; }
  .map-pin::after { width: 6px; height: 6px; }
}

.map-stage {
  transform-origin: top left;
  transform: translate(var(--map-x, 0%), var(--map-y, 0%)) scale(var(--map-zoom, 1));
  transition: transform .65s cubic-bezier(.22,.72,.21,1);
}
.map-stage .map-pin {
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%) scale(var(--map-inverse, 1));
}
.map-stage .map-pin:focus-visible, .map-stage .map-pin:hover { z-index: 3; }
.map-name {
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translate(-50%, -50%);
  padding: 1px 5px;
  border-radius: 4px;
  background: #09172ae8;
  color: #d3eaff;
  font-size: 11px;
  line-height: 1.45;
  white-space: nowrap;
  pointer-events: none;
}
.map-pin[aria-pressed=true] .map-name { background: #a0edff; color: #0b2138; font-weight: 750; }
.map-stage:not(.focused) [data-city="韩国"] .map-name { left: 0; transform: translate(-85%, -50%); }
.map-stage:not(.focused) [data-city="日本"] .map-name { left: 100%; transform: translate(-15%, -50%); }
.map-stage:not(.focused) [data-city="台湾"] .map-name { top: 15px; left: 100%; transform: translate(0, -50%); }
.map-stage:not(.focused) [data-city="越南"] .map-name { top: 11px; left: 0; transform: translate(-100%, -50%); }
.map-stage:not(.focused) [data-city="新加坡"] .map-name { top: 28px; }
.map-reset { border: 1px solid #38516e; border-radius: 100px; background: #182940; color: #d3eaff; padding: 4px 13px; font-size: 13px; }
.map-reset:hover { background: #254363; }
@media (max-width: 550px) {
  .map-stage:not(.focused) .map-pin { width: 12px; height: 12px; }
  .map-stage:not(.focused) .map-name { font-size: 9px; padding-inline: 2px; }
  .map-stage:not(.focused) [data-city="台湾"] .map-name { top: 9px; }
  .map-stage:not(.focused) [data-city="新加坡"] .map-name { top: 19px; }
}

.site-footer {
  padding: 24px clamp(20px, 3vw, 52px);
  gap: 16px;
  background: #101a2c;
  border-top: 1px solid #293b56;
  color: #edf5ff;
}
.footer-brand { padding: 0; font-size: 19px; }
.footer-brand svg { width: 25px; height: 25px; color: #70ecff; }
.footer-brand small { color: #70ecff; }
.footer-info { text-align: right; }
.footer-links { display: flex; gap: 12px 26px; justify-content: flex-end; flex-wrap: wrap; }
.footer-links button { padding: 0; border: 0; background: transparent; }
.footer-links a, .footer-links button { color: #d3eaff; font-size: 14px; }
.footer-links a:hover, .footer-links button:hover { text-decoration: underline; }
.site-footer :focus-visible { outline-color: #70ecff !important; }
.footer-info p { margin: 5px 0 0; color: #aebfd5; font-size: 13px; }
@media (max-width: 550px) {
  .site-footer { padding-block: 18px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-info { text-align: left; }
  .footer-links { justify-content: flex-start; gap: 12px 16px; }
}