@font-face{font-family:"Saira";src:url(/fonts/saira-var.woff2) format("woff2");font-weight:100 900;font-stretch:50% 125%;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Serif SC";src:url(/fonts/noto-serif-sc-600-name.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Noto Sans SC";src:url(/fonts/noto-sans-sc-400-ui.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Noto Sans SC";src:url(/fonts/noto-sans-sc-600-ui.woff2) format("woff2");font-weight:600 700;font-display:swap}

:root{--pearl-000:#ffffff;--pearl-100:#f8f4f5;--pearl-200:#efe6e8;--pearl-300:#ddcdd1;--rose-200:#e9c3cc;--wine-500:#9a2340;--wine-700:#6e1428;--wine-900:#2a0a12;--ink-muted:#6b4a52;
 --ui:Saira,"Noto Sans SC",system-ui,sans-serif;--mark:"Cormorant Garamond",Garamond,"Times New Roman",serif}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--pearl-100)}
[hidden]{display:none!important}
a{color:var(--wine-700)}a:hover{color:var(--wine-900)}

.sphere{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;display:flex;flex-direction:column;
 background:radial-gradient(ellipse 70% 60% at 50% 45%,var(--pearl-000) 0%,var(--pearl-100) 55%,var(--pearl-200) 100%);
 font-family:var(--ui);color:var(--wine-900);
 padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.grid path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.grid .far{stroke:var(--pearl-300)}.grid .near{stroke:var(--rose-200)}
.packet-glow{fill:var(--rose-200);opacity:.55}.packet-core{fill:var(--wine-500)}

.top{position:relative;width:100%;max-width:1200px;margin:0 auto;padding:24px 40px 0;display:flex;justify-content:flex-end}
.lang{display:flex;gap:4px;padding:4px;border-radius:999px;background:linear-gradient(180deg,#fff,var(--pearl-200));box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(42,10,18,.12),inset 0 0 0 1px var(--pearl-300)}
.lang button{min-width:52px;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:none;cursor:pointer;font:600 14px/1 var(--ui);color:var(--ink-muted)}
.lang button[aria-pressed="true"]{color:#fff;background:linear-gradient(180deg,var(--wine-500) 0%,var(--wine-700) 55%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.lang button:focus-visible{outline:2px solid var(--wine-500);outline-offset:2px}

.stage{position:relative;flex:1 0 auto;width:100%;max-width:1200px;margin:0 auto;padding:24px 40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:64px}
.orbwrap{flex:1 1 340px;display:flex;justify-content:center;padding:24px 0}
.orb{width:clamp(240px,32vw,420px);height:auto;display:block;overflow:visible}
.content{flex:999 1 460px;min-width:0;display:flex;flex-direction:column;gap:40px}
.intro{display:flex;flex-direction:column;gap:16px}
.name{margin:0;font-family:var(--mark);font-weight:600;font-size:clamp(48px,6.2vw,88px);line-height:1;letter-spacing:0;color:var(--wine-900)}
.name-zh{display:flex;flex-direction:column;gap:12px}
.name-zh .zh{font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(48px,6vw,84px);line-height:1.05;letter-spacing:.04em}
.name-zh .sub{font-size:clamp(24px,2.6vw,34px);color:var(--ink-muted)}
.tagline{margin:0;max-width:34em;font-size:20px;line-height:1.5;color:var(--ink-muted)}
.readout{margin:0;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:14px;line-height:1.5;color:var(--ink-muted)}

.blades{display:flex;flex-direction:column;gap:10px}
.blade{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--wine-900);min-height:44px}
.node{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:999px;background:radial-gradient(circle at 40% 32%,#fff,var(--pearl-200) 60%,var(--pearl-300));box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(42,10,18,.12),inset 0 0 0 1.5px var(--ink-muted)}
.bar{position:relative;isolation:isolate;min-width:min(300px,62vw);padding:12px 44px 12px 16px;font-stretch:125%;font-weight:600;font-size:18px;letter-spacing:.04em;line-height:1;
 --edge:var(--ink-muted);filter:drop-shadow(1px 0 0 var(--edge)) drop-shadow(-1px 0 0 var(--edge)) drop-shadow(0 1px 0 var(--edge)) drop-shadow(0 -1px 0 var(--edge))}
.bar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:6px 0 0 6px;clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%);background:linear-gradient(180deg,#fff 0%,var(--pearl-200) 100%)}
.hint{display:block;margin-top:5px;font-stretch:100%;font-weight:500;font-size:13px;letter-spacing:0;color:var(--ink-muted)}
.soon .bar{color:var(--ink-muted)}
.live .bar{color:#fff;--edge:var(--wine-700)}
.live .bar::before{background:linear-gradient(180deg,var(--wine-500) 0%,var(--wine-700) 55%)}
.live .hint{color:#fff}
.live .node{background:radial-gradient(circle at 40% 32%,var(--rose-200),var(--wine-500) 55%,var(--wine-700));box-shadow:inset 0 1px 0 #fff,0 10px 28px rgba(110,20,40,.22)}
.live:hover .bar::before{background:linear-gradient(180deg,#b02a4a 0%,var(--wine-700) 60%)}
.live:focus-visible{outline:none}
.live:focus-visible .node{box-shadow:0 0 0 3px var(--pearl-100),0 0 0 5px var(--wine-500)}
.lishadow{display:block;filter:drop-shadow(0 1px 1px rgba(42,10,18,.6))}
.li{display:block;width:20px;height:20px;background:linear-gradient(180deg,#fff 0%,#fff 48%,#ecd3d9 52%,var(--rose-200) 100%);
 -webkit-mask:url(/images/linkedin.webp) center/contain no-repeat;mask:url(/images/linkedin.webp) center/contain no-repeat}
.o2{margin-left:32px}.o3{margin-left:48px}

.foot{position:relative;width:100%;max-width:1200px;margin:0 auto;padding:16px 40px 32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:13px;font-weight:500;line-height:1.4;color:var(--ink-muted)}

@media (max-width:720px){
 .top,.stage,.foot{padding-left:24px;padding-right:24px}
 .stage{gap:24px}
 .o2,.o3{margin-left:0}
}
@media (prefers-reduced-motion:no-preference){
 .orbwrap{animation:orbIn 1s cubic-bezier(.2,.8,.2,1) both}
 .blade{animation:bladeIn .5s cubic-bezier(.2,.8,.2,1) both}
 .o1{animation-delay:.4s}.o2{animation-delay:.48s}.o3{animation-delay:.56s}
}
@keyframes orbIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes bladeIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}