/* Embassy marketing site — shared stylesheet (en + zh-CN) */
:root{--ink:#1a1a1e;--ink2:#44444e;--mut:#6d6d78;--amber:#f4a259;--coral:#e07a5f;--cinn:#c96442;--cream:#eef1f5;--page:#ffffff;--rule:#e9e9ee;--night:#131316;--night2:#20202658;--ok:#3e7a4e;--okbg:#e4f0e6;
--mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;--serif:'Iowan Old Style','Palatino Linotype',Palatino,'Songti SC',Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,'Helvetica Neue','PingFang SC',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6}
a{color:var(--ink2)}a:hover{color:var(--cinn)}
:focus-visible{outline:2px solid var(--cinn);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:8px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
.wrap{max-width:1040px;margin:0 auto;padding:0 28px}
section{scroll-margin-top:72px}
h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.15;margin:0 0 10px}
.lede{color:var(--mut);max-width:60ch;margin:0 0 36px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cinn);margin:0 0 12px}
/* nav */
header.site{position:sticky;top:0;background:rgba(255,255,255,.94);border-bottom:1px solid var(--rule);z-index:10;backdrop-filter:blur(4px)}
nav.top{display:flex;align-items:center;gap:20px;padding:14px 28px;max-width:1040px;margin:0 auto}
nav.top .nm{font-family:var(--serif);font-size:20px;display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
nav.top .nm img{width:24px;height:24px}
nav.top .links{margin-left:auto;display:flex;gap:20px;font-size:14px;flex-wrap:wrap}
nav.top .links a{text-decoration:none;color:var(--ink2)}
nav.top .links a:hover{color:var(--cinn)}
/* hero — dusk */
.hero{background:var(--night);color:var(--cream);overflow:hidden;position:relative}
.hero .wrap{position:relative;padding-top:64px;padding-bottom:0;text-align:center}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6vw,58px);line-height:1.07;letter-spacing:-.3px;margin:0 0 16px;color:#f5f5f7}
.hero .sub{font-size:18.5px;color:#b9b9c2;max-width:56ch;margin:0 auto 12px}
.hero .qual{font-family:var(--mono);font-size:11.5px;letter-spacing:2px;color:#77777f}
.ctas{display:flex;gap:16px;justify-content:center;align-items:center;margin:28px 0 0;flex-wrap:wrap}
.cmd{font-family:var(--mono);font-size:14px;background:#232329;border:1px solid #3a3a42;color:var(--cream);border-radius:8px;padding:12px 18px;display:flex;gap:14px;align-items:center;max-width:100%;overflow-x:auto}
.cmd button{font-family:var(--sans);font-size:12px;font-weight:600;background:var(--amber);color:#2b1c09;border:none;border-radius:99px;padding:4px 13px;cursor:pointer;flex-shrink:0}
.cmd button:hover{background:#ffb877}
.hero .gh{color:#d5dbe6;font-size:15px}
/* the gate scene */
.gate{position:relative;max-width:820px;margin:44px auto 0;height:420px}
.arch{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:320px;height:340px;border:9px solid #8a8a96;border-bottom:none;border-radius:160px 160px 0 0;background:radial-gradient(ellipse 70% 90% at 50% 100%,#f4a25955 0%,#f4a25918 45%,transparent 75%)}
.archglow{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:560px;height:400px;background:radial-gradient(ellipse 50% 70% at 50% 100%,#f4a2592e 0%,transparent 70%);animation:pulse 12s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}28%,62%{opacity:1}}
.flag{position:absolute;left:50%;bottom:340px;width:3.5px;height:32px;background:#8a8a96}
.flag::after{content:'';position:absolute;left:3.5px;top:1px;border-left:24px solid var(--amber);border-top:8px solid transparent;border-bottom:8px solid transparent}
.ground{position:absolute;left:6%;right:6%;bottom:-5px;height:5px;background:#8a8a96;border-radius:3px}
.spark{position:absolute;border-radius:50%;background:#f4d9a8;opacity:.5}
.who{position:absolute;bottom:130px;font-family:var(--mono);font-size:12.5px;color:#8a8a96;max-width:170px}
.who b{display:block;font-weight:400;font-size:14.5px;color:#d5dbe6;margin-bottom:2px}
.who.l{left:2%;text-align:left}.who.r{right:2%;text-align:right}
/* envelopes */
.env{position:absolute;bottom:170px;width:44px;height:30px;background:#f5f5f7;border:2.5px solid #8a8a96;border-radius:4px;box-shadow:0 0 18px #f4a25988}
.env::after{content:'';position:absolute;left:-1px;top:-1px;border-left:21px solid transparent;border-right:21px solid transparent;border-top:16px solid var(--amber)}
.env.ask{left:-60px;animation:ask 12s ease-in-out infinite}
.env.reply{left:-60px;border-color:#9c4f33;animation:reply 12s ease-in-out infinite}
.env.reply::after{border-top-color:var(--coral)}
@keyframes ask{0%{left:3%;opacity:0;transform:translateY(0)}4%{opacity:1}16%{left:calc(50% - 22px);transform:translateY(-26px)}30%{left:91%;opacity:1;transform:translateY(0)}34%,100%{left:94%;opacity:0}}
@keyframes reply{0%,44%{left:91%;opacity:0;transform:translateY(0)}48%{opacity:1}60%{left:calc(50% - 22px);transform:translateY(-26px)}74%{left:4%;opacity:1;transform:translateY(0)}78%,100%{left:1%;opacity:0}}
/* receipt line */
.receipt{position:absolute;left:50%;transform:translateX(-50%);bottom:52px;font-family:var(--mono);font-size:13px;background:#1d1d22;border:1px solid #3a3a42;border-radius:8px;padding:10px 18px;white-space:nowrap;color:#a9a9b4;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.receipt .tok{color:#d5dbe6}
.receipt .st{opacity:0;animation:stin 12s ease-in-out infinite}
.receipt .st.delivered{color:#a9c98a}
.receipt .s1{animation-name:s1}.receipt .s2{animation-name:s2}.receipt .s3{animation-name:s3}
@keyframes s1{0%,6%{opacity:0}10%,100%{opacity:1}}
@keyframes s2{0%,14%{opacity:0}18%,100%{opacity:1}}
@keyframes s3{0%,28%{opacity:0}33%,100%{opacity:1}}
.convchip{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:1px;color:#77777f;opacity:0;animation:s3 12s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
.env.ask{animation:none;left:calc(50% - 22px);bottom:196px;opacity:1}
.env.reply{animation:none;left:calc(50% + 40px);opacity:.9;bottom:170px}
.receipt .st,.convchip{animation:none;opacity:1}
.archglow{animation:none;opacity:.8}}
@media(max-width:640px){.gate{height:340px}.arch{width:230px;height:250px;border-radius:115px 115px 0 0}.flag{bottom:250px}.who{display:none}.receipt{font-size:11px}}
/* body sections */
.band{padding:80px 0}
.band+.band{border-top:1px solid var(--rule)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.cols3 h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:0 0 8px}
.cols3 p{margin:0;font-size:15px;color:var(--ink2)}
.k{font-family:var(--mono);font-size:11.5px;letter-spacing:1.8px;color:var(--cinn);text-transform:uppercase;display:block;margin-bottom:10px}
/* steps */
.steps{display:grid;gap:0;border-left:2px solid var(--rule);margin-left:10px}
.steps>div{padding:16px 0 16px 28px;position:relative}
.steps>div::before{content:'';position:absolute;left:-8px;top:24px;width:12px;height:12px;border-radius:50%;background:var(--amber);border:2px solid var(--ink2)}
.steps .cmd2{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.steps code{font-family:var(--mono);font-size:13.5px;background:#f4f5f8;border:1px solid var(--rule);border-radius:6px;padding:5px 12px;overflow-x:auto;max-width:100%}
.steps .cp{font-size:11px;background:none;border:1px solid var(--rule);border-radius:99px;padding:2px 10px;cursor:pointer;color:var(--mut);font-family:var(--sans)}
.steps .cp:hover{border-color:var(--cinn);color:var(--cinn)}
.steps p{margin:0;font-size:14px;color:var(--mut)}
/* truths */
.truths{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.truths>div{border:1px solid var(--rule);border-radius:10px;padding:20px 22px}
.truths b{display:block;font-family:var(--mono);font-weight:400;font-size:13.5px;letter-spacing:.4px;color:var(--cinn);margin-bottom:8px}
.truths p{margin:0;font-size:14.5px;color:var(--ink2)}
.states{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.states details{border:1px solid var(--rule);border-radius:10px;background:#fafafc}
.states summary{font-family:var(--mono);font-size:12.5px;letter-spacing:1px;text-transform:uppercase;padding:8px 16px;cursor:pointer;list-style:none;border-radius:10px}
.states summary::-webkit-details-marker{display:none}
.states details[open] summary{border-bottom:1px solid var(--rule)}
.states .d summary{color:var(--ok)}.states .u summary{color:#7d5a90}.states .a summary{color:#7d5a90}.states .e summary{color:#a84a3a}
.states details p{margin:0;padding:12px 16px;font-size:14px;max-width:44ch;color:var(--ink2)}
/* release strip */
.release{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;border:1px solid var(--rule);border-radius:10px;padding:16px 22px;background:#fafafc}
.release .v{font-family:var(--mono);font-size:13px;color:var(--cinn)}
/* dashboard */
.dash img{width:100%;height:auto;display:block;border:1px solid var(--rule);border-radius:12px}
.dash figcaption{font-size:13px;color:var(--mut);margin-top:10px}
/* vocabulary */
.vocab{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.vocab>div{background:var(--cream);border-radius:10px;padding:22px}
.vocab h3{font-family:var(--serif);font-weight:400;font-size:20px;margin:0 0 6px}
.vocab p{margin:0;font-size:14px;color:var(--ink2)}
/* quickstart */
.qs{background:var(--night);color:#b9b9c2;border-radius:12px;padding:28px 30px;font-family:var(--mono);font-size:13.5px;line-height:2;overflow-x:auto}
.qs .c{color:#70707a}
.qs .p{color:var(--amber)}
.req{font-size:14px;color:var(--mut);margin:0 0 16px}
.req code{font-family:var(--mono);background:#f4f5f8;border:1px solid var(--rule);border-radius:5px;padding:1px 7px;font-size:13px}
/* footer */
footer.site{border-top:1px solid var(--rule);padding:44px 0 56px;font-size:13.5px;color:var(--mut)}
footer.site .cols{display:flex;gap:36px;flex-wrap:wrap;margin-bottom:24px}
footer.site a{color:var(--ink2);text-decoration:none}
footer.site a:hover{color:var(--cinn);text-decoration:underline}
footer.site p{margin:6px 0;max-width:88ch}
@media(max-width:820px){.cols3{grid-template-columns:1fr}.band{padding:56px 0}}