@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600&family=Noto+Sans+SC:wght@400;450;500;550&family=Noto+Serif+SC:wght@400;500&display=swap');
:root{color-scheme:dark;--font:'DM Sans','Noto Sans SC',sans-serif;--ink:#f5f3fb;--muted:#bec4df;--line:#b4bbec26;--lavender:#c4c7f0}*{box-sizing:border-box}html{background:#10152a;scroll-behavior:smooth}body{margin:0;color:var(--ink);font:14px/1.65 var(--font);-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #d6d9ff;outline-offset:6px}.skip-link{position:fixed;top:-80px;left:20px;z-index:10;background:#d6d9ff;color:#151a31;padding:10px 20px}.skip-link:focus{top:12px}.home-scene{position:relative;isolation:isolate;min-height:calc(100svh - 58px);display:flex;flex-direction:column;overflow:hidden;background:#10182e}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3;filter:saturate(.9) brightness(.76);animation:arrival 1.4s ease-out}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#10162bec 0%,#121a3442 20%,#10182b22 57%,#10172cdf 86%,#10162b 100%),radial-gradient(ellipse at 50% 38%,#11172b9c 0%,#11172b6b 28%,transparent 63%);box-shadow:inset 0 0 180px #12162b33}.home-scene:after{content:'';pointer-events:none;position:absolute;inset:0;z-index:-1;background:linear-gradient(125deg,#7181be10,transparent 45%,#c48ec914);mix-blend-mode:screen}.home-header{height:100px;padding:0 4.6%;display:flex;align-items:center;gap:36px;flex-shrink:0}.home-brand{display:inline-flex;align-items:center;gap:10px;letter-spacing:-1.1px;font-size:29px;font-weight:550;line-height:1}.home-brand img{width:46px;height:46px}.wordmark-two{color:#c7c3e8}.home-nav{display:flex;align-items:center;gap:30px;margin-left:48px}.home-nav button{border:0;background:none;padding:8px 0;color:#d3d5e4;font-size:12px}.home-nav button:hover{color:white}.home-actions{display:flex;align-items:center;gap:25px;margin-left:auto}.home-language{display:flex;align-items:center;gap:7px;font-size:10px}.home-language span{color:#6e7694}.home-language button{background:transparent;border:0;padding:5px 1px;font-size:11px;color:#8893b7}.home-language button[aria-pressed=true]{color:#f0edff}.home-login{border:0;background:none;font-size:12px;padding:8px 0;color:#d7d9e9}.home-register{border:1px solid #b8b9de66;border-radius:5px;background:#c6c6ed0a;padding:9px 17px;font-size:11px;color:#e6e5f4}.home-register:hover{background:#d2ceff16;border-color:#c1c5ed}.home-main{position:relative;flex:1;min-height:660px;display:flex;flex-direction:column;justify-content:center;padding:35px 4.6% 187px}.hero-copy{text-align:center;max-width:900px;margin:0 auto;animation:copy-arrival .9s .1s both}.hero-eyebrow{font-size:10px;letter-spacing:.28em;font-weight:500;color:#c0c7e3;margin:0 0 24px}.hero-copy h1{font-family:'Noto Serif SC',serif;font-weight:400;font-size:clamp(44px,4.6vw,76px);line-height:1.43;letter-spacing:.035em;margin:0 0 21px;color:#faf8ff;text-shadow:0 3px 45px #060b2280}.hero-copy h1 em{font-style:normal;color:#dfdcf5}.hero-description{color:#d0d3e7;line-height:1.95;font-size:14px;font-weight:400;letter-spacing:.025em;margin:0 0 29px;white-space:pre-line;text-shadow:0 1px 15px #070b20}.explore-button{display:inline-flex;align-items:center;justify-content:space-between;gap:48px;min-width:196px;padding:15px 21px 15px 27px;border:1px solid #e9e8ffb3;background:#e1e2f3;color:#20263f;border-radius:6px;box-shadow:0 0 35px #b3b7ed10;font-size:14px;letter-spacing:.08em;transition:background .18s,transform .18s}.explore-button svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.5}.explore-button:hover{background:#f1effc;transform:translateY(-2px)}.hero-account-note{color:#a4aecb;font-size:10px;margin:14px 0 0;letter-spacing:.04em}.hero-bottom{position:absolute;left:4.6%;right:4.6%;bottom:25px}.image-caption{display:flex;align-items:center;gap:10px;color:#a4accb;font-size:9px;letter-spacing:.04em;margin-bottom:18px}.channel-dots{display:flex;gap:4px}.channel-dots i{display:block;width:4px;height:4px;border-radius:50%;background:#86a4f3}.channel-dots i:nth-child(2){background:#a08ce0}.channel-dots i:nth-child(3){background:#db8bbf}.channel-dots i:nth-child(4){background:#dbac7d}.channel-dots i:nth-child(5){background:#c2ce90}.channel-dots i:nth-child(6){background:#81c6b8}.channel-dots i:nth-child(7){background:#81b9d1}.workflow-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #bac5eb30}.workflow-strip button{display:flex;align-items:center;gap:18px;background:none;border:0;text-align:left;padding:23px 28px 0 0;min-width:0}.workflow-strip button+button{padding-left:28px}.workflow-number{font-size:11px;font-family:Georgia,serif;color:#8695bc;align-self:flex-start;margin-top:3px}.workflow-strip strong{font-size:13px;font-weight:450;letter-spacing:.035em;display:block;color:#e5e6f4}.workflow-strip small{display:block;font-size:10px;color:#929fbe;margin-top:5px}.workflow-arrow{font-size:17px;color:#94a3c6;margin-left:auto;transition:transform .2s}.workflow-strip button:hover .workflow-arrow{transform:translate(3px,-3px);color:#dedcf3}.workflow-strip button:hover strong{color:#fff}.site-footer{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 4.6%;border-top:1px solid #c1c6f212;background:#10152a;font-size:10px;color:#99a4c0;line-height:1.5}.footer-links{display:flex;align-items:center;gap:16px;white-space:nowrap}.footer-links>span{color:#627393}.site-footer a:hover{color:#dbe0fb}.site-footer a:focus-visible{outline-offset:3px}dialog{padding:38px;border:1px solid #767ba55c;background:linear-gradient(150deg,#232b48,#181f39);color:#e9e9f6;border-radius:14px;width:min(560px,calc(100vw - 32px));max-height:85svh;box-shadow:0 30px 100px #020718aa}dialog::backdrop{background:#060d23ad;backdrop-filter:blur(8px)}.info-close{position:absolute;top:16px;right:18px;font-size:25px;color:#b1b9d4;border:0;background:none;line-height:1;padding:6px}.info-kicker{font-size:9px;letter-spacing:.22em;color:#9dadd7;margin:0 0 17px}#info-title{font-size:26px;font-weight:450;margin:0 0 20px}#info-body p{font-size:13px;line-height:2;color:#c1c8e1;margin:0 0 15px}#info-body p:last-child{font-size:11px;color:#91a1c5}.info-enter{background:#ced2ef;color:#232b49;border:0;border-radius:5px;font-size:12px;padding:11px 21px;margin-top:10px}html[lang=en] .hero-copy h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(48px,5.3vw,84px);line-height:1.18;letter-spacing:-.035em}html[lang=en] .hero-copy h1 em{font-style:italic}html[lang=en] .hero-description{letter-spacing:0}html[lang=en] .hero-eyebrow{margin-bottom:26px}html[lang=en] .workflow-strip strong{font-size:13px;letter-spacing:0}
@keyframes arrival{from{opacity:.3;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}@keyframes copy-arrival{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1800px){.home-main{min-height:800px}.home-header{height:110px}.hero-copy h1{font-size:82px}.hero-description{font-size:16px}.hero-eyebrow{font-size:11px}.workflow-strip strong{font-size:15px}}
@media(max-width:1100px){.home-nav{margin-left:10px;gap:22px}.home-actions{gap:18px}.home-header{padding:0 28px}.home-main{padding-left:28px;padding-right:28px}.hero-bottom{left:28px;right:28px}.workflow-strip button{gap:11px;padding-right:16px}.workflow-strip button+button{padding-left:16px}.site-footer{padding-left:28px;padding-right:28px;font-size:9px}.footer-links{gap:10px}.home-brand{font-size:26px}}
@media(max-width:800px){.home-nav{display:none}.home-header{height:86px}.hero-copy h1{font-size:53px}.home-main{min-height:780px;padding-bottom:260px}.workflow-strip{grid-template-columns:1fr 1fr}.workflow-strip button{padding:20px 16px 4px 0}.workflow-strip button+button{padding-left:0}.workflow-strip button:nth-child(even){padding-left:23px}.image-caption{font-size:8px}.site-footer{flex-wrap:wrap;gap:8px;padding-top:13px;padding-bottom:13px}.hero-art{object-position:48% center}.hero-bottom{bottom:25px}.footer-links{white-space:normal;flex-wrap:wrap;gap:6px 12px}}
@media(max-width:480px){.home-header{padding:0 19px;gap:10px;height:80px}.home-brand{font-size:23px;gap:5px}.home-brand img{width:36px;height:36px}.home-actions{gap:13px}.home-language{gap:5px}.home-register{display:none}.home-login{font-size:11px}.home-main{padding:35px 21px 242px;min-height:760px}.hero-eyebrow{font-size:8px;letter-spacing:.2em;margin-bottom:24px}.hero-copy h1{font-size:41px;line-height:1.55;letter-spacing:.015em;margin-bottom:20px}.hero-description{font-size:11px;line-height:2.1;letter-spacing:0;margin-bottom:28px}.hero-copy{width:100%}.explore-button{font-size:13px;min-width:182px;padding:14px 20px 14px 23px}.hero-account-note{font-size:9px}.hero-bottom{left:21px;right:21px;bottom:27px}.image-caption{font-size:7px;gap:7px;margin-bottom:18px}.channel-dots{gap:3px}.channel-dots i{width:3px;height:3px}.workflow-strip strong{font-size:11px}.workflow-strip small{font-size:8px;margin-top:5px}.workflow-number{font-size:9px}.workflow-arrow{font-size:14px}.workflow-strip button{gap:10px;padding-top:18px;padding-bottom:9px}.workflow-strip button:nth-child(even){padding-left:16px;padding-right:0}.site-footer{padding:14px 21px;font-size:8px;gap:8px}.footer-links{gap:8px}.hero-art{object-position:48% center;filter:saturate(.86) brightness(.7)}.hero-shade{background:linear-gradient(180deg,#12162bd9,transparent 22%,#11172b55 55%,#11172bfa 88%),radial-gradient(ellipse at 50% 35%,#10172d9c,transparent 80%)}html[lang=en] .hero-copy h1{font-size:49px;line-height:1.2}html[lang=en] .workflow-strip strong{font-size:11px}dialog{padding:30px 25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-art,.hero-copy{animation:none}.explore-button,.workflow-arrow{transition:none}}
/* Keep the label on the same center line as the hero and account note. */
.hero-copy{width:100%;display:flex;flex-direction:column;align-items:center}
.explore-button{position:relative;display:inline-grid;place-items:center;justify-content:center;gap:0;width:240px;max-width:100%;min-width:0;min-height:56px;padding:15px 53px;margin-inline:auto;letter-spacing:.04em}
.explore-button>span{display:block;width:100%;text-align:center;white-space:nowrap}
.explore-button>svg{position:absolute;right:21px;top:50%;width:20px;height:20px;transform:translateY(-50%);pointer-events:none}
.hero-account-note{width:100%;text-align:center}
@media(max-width:480px){.explore-button{width:230px;min-height:54px;padding:14px 50px}.explore-button>svg{right:19px;width:19px;height:19px}}
/*
* Homepage alignment refinement. Load after the existing homepage stylesheet.
*
* HTML integration — Chinese heading only:
* Keep the heading's existing classes and add hero-title--zh.
* Replace its two text lines /
with the following two line spans:
*
* 从一张切片，
* 看见微环境。
*
* Keep punctuation in the accessible text; do not add aria-hidden to it.
* Do not insert whitespace between each text span and its punctuation span.
* If the language switch replaces heading content, apply this markup and the
* hero-title--zh class only for Chinese; remove the class for English.
* The English eyebrow needs no adjustment.
*
* CTA integration — both languages:
* Keep the existing button/link classes and add hero-explore-button.
* Wrap its existing label in ....
* Add hero-explore-arrow to its existing arrow element, with aria-hidden="true".
* Keep the button's current colors, border, shadow, link target and handlers.
*
* Chinese keeps a 240 × 56px button (230 × 54px on mobile).
* Longer English labels can widen it automatically; equal side padding keeps
* the label centered while reserving clear space before the right-hand arrow.
*/
.hero-copy h1.hero-title--zh {
--hero-cjk-tracking: .035em;
text-align: center;
text-indent: 0;
letter-spacing: var(--hero-cjk-tracking);
}
.hero-copy h1.hero-title--zh .hero-title-line {
position: relative;
display: table;
inline-size: max-content;
margin-inline: auto;
padding: 0;
text-align: start;
text-indent: 0;
white-space: nowrap;
}
.hero-copy h1.hero-title--zh .hero-title-text {
display: block;
letter-spacing: var(--hero-cjk-tracking);
/* Remove the final tracking advance so the five Han characters center. */
margin-inline-end: calc(-1 * var(--hero-cjk-tracking));
}
.hero-copy h1.hero-title--zh .hero-title-punctuation {
/* Hang punctuation outside the centered character run, without a translate. */
position: absolute;
inset-block-start: 0;
inset-inline-start: calc(100% + var(--hero-cjk-tracking));
display: block;
inline-size: 1em;
margin: 0;
padding: 0;
font: inherit;
line-height: inherit;
letter-spacing: 0;
text-align: start;
white-space: nowrap;
}
.hero-copy .hero-explore-button {
box-sizing: border-box;
position: relative;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
gap: 0;
inline-size: max-content;
min-inline-size: 240px;
max-inline-size: 100%;
block-size: 56px;
min-block-size: 56px;
padding: 0 52px;
font-size: 20px;
line-height: 1.2;
letter-spacing: .015em;
text-align: center;
white-space: nowrap;
}
.hero-copy .hero-explore-button .hero-explore-label {
display: block;
flex: 0 0 auto;
margin: 0;
padding: 0;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
text-align: center;
white-space: nowrap;
}
.hero-copy .hero-explore-button .hero-explore-arrow {
position: absolute;
inset-inline-start: auto;
inset-inline-end: 21px;
inset-block-start: 50%;
display: grid;
place-items: center;
inline-size: 16px;
block-size: 20px;
margin: 0;
padding: 0;
transform: translateY(-50%);
font-size: 20px;
line-height: 1;
letter-spacing: 0;
pointer-events: none;
}
.hero-copy .hero-explore-button .hero-explore-arrow svg {
inline-size: 16px;
block-size: 16px;
}
@media (max-width: 480px) {
.hero-copy h1.hero-title--zh {
--hero-cjk-tracking: .015em;
}
.hero-copy .hero-explore-button {
min-inline-size: 230px;
block-size: 54px;
min-block-size: 54px;
padding-inline: 48px;
font-size: 18px;
}
.hero-copy .hero-explore-button .hero-explore-arrow {
inset-inline-end: 20px;
font-size: 18px;
}
}
.hero-eyebrow{padding-inline-start:.28em}
@media(max-width:480px){.hero-eyebrow{padding-inline-start:.2em}}