:root{color-scheme:dark;--bg:#080f20;--panel:#0d172b;--line:#243046;--text:#edf3ff;--muted:#9caac0;--cyan:#91f1ef;--blue:#4576f5}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--cyan);outline-offset:7px}a,button{-webkit-tap-highlight-color:transparent}::selection{background:#4278b7;color:white}.wrap{width:min(1240px,88%);margin:auto}.header{max-width:1440px;padding:25px 6%;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{font-weight:700;letter-spacing:2px;font-size:24px;display:inline-flex;align-items:center;gap:12px}.brand-mark{font-size:25px;color:var(--cyan);font-style:italic;border:1px solid #526e8a;width:33px;line-height:33px;text-align:center;letter-spacing:0}.brand-cn{font-size:13px;font-weight:400;letter-spacing:1px;color:var(--muted);border-left:1px solid var(--line);padding-left:12px}.header nav{display:flex;gap:30px;font-size:14px;align-items:center}.header nav a:hover,.text-link:hover{color:var(--cyan)}.nav-contact{border:1px solid #40506b;padding:8px 17px}.hero{position:relative;min-height:740px;padding-top:34px;isolation:isolate;overflow:hidden}.hero-top,.hero-bottom{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.eyebrow,.hero-coordinate,.hero-bottom,.field-label,.field-axis,.section-label>span,.direction-no,.project-type{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;letter-spacing:2px}.eyebrow{color:var(--cyan)}.hero-coordinate{color:var(--muted)}.hero-copy{position:relative;z-index:2;padding:68px 0 70px;pointer-events:none}.hero-copy a{pointer-events:auto}.intro{font-size:16px;color:#bccadd;margin:0 0 20px}h1{font-size:clamp(44px,5.6vw,80px);font-weight:600;line-height:1.28;letter-spacing:-2px;margin:0}h1 span{color:var(--cyan)}.english{font-size:22px;line-height:1.35;letter-spacing:.2px;margin:22px 0;color:#e0e8f8}.hero-description{color:var(--muted);margin:25px 0 30px;font-size:15px}.hero-actions{display:flex;align-items:center;gap:30px}.button{display:inline-flex;gap:32px;padding:13px 21px;font-size:14px}.primary{background:var(--cyan);color:#09172b}.primary:hover{background:#c1fffe;transform:translateY(-2px)}.text-link{font-size:14px;display:inline-flex;gap:22px;align-items:center}.hero-bottom{border-top:1px solid var(--line);padding:22px 0;color:var(--muted);font-size:12px}.hero-bottom a{letter-spacing:1px}.light-field{position:absolute;z-index:0;width:62%;height:620px;right:-5%;top:56px;background:radial-gradient(ellipse at 55% 54%,#10478144,transparent 64%);overflow:hidden}.orbit{position:absolute;border:1px solid #3b6a8d55;border-radius:50%;width:480px;height:480px;left:17%;top:70px;transform:rotate(-32deg) scaleX(.6)}.orbit-two{transform:rotate(-32deg) scaleX(.9);border-color:#3b6a8d30}.orbit-three{transform:rotate(-32deg) scaleX(1.3);border-color:#3b6a8d22}.beam{position:absolute;width:120px;height:740px;left:51%;top:-48px;transform:rotate(33deg);background:linear-gradient(90deg,transparent,#255bd533,#467dfa66,#9bffff88,transparent);filter:blur(22px);mask-image:linear-gradient(transparent,black 28%,black 70%,transparent)}.beam-core{position:absolute;width:2px;height:560px;left:58%;top:20px;transform:rotate(33deg);background:linear-gradient(transparent,#6697fa,#d4ffff,transparent);box-shadow:0 0 22px #76eaf2}.field-label{position:absolute;bottom:75px;right:14%;color:#7d9ab7;font-size:11px;letter-spacing:4px}.field-axis{position:absolute;top:90px;left:17%;color:#7091ad;font-size:11px}.cross{position:absolute;color:#6389a8;font-size:22px;font-weight:200}.cross-one{top:120px;right:17%}.cross-two{bottom:155px;left:21%}.section{padding:95px 0;border-bottom:1px solid var(--line)}h2{font-size:clamp(28px,3vw,40px);line-height:1.4;font-weight:500;letter-spacing:-1px;margin:14px 0 0}.about{display:grid;grid-template-columns:1fr 1.65fr;gap:70px}.section-label>span{color:var(--cyan)}.statement{font-size:29px;line-height:1.6;margin:0 0 20px}.body-copy{color:var(--muted);max-width:630px}.full-name{font-size:14px;color:#c3d2e8;margin:27px 0}.name-parts{display:grid;grid-template-columns:1fr 1fr 1.3fr;border-top:1px solid var(--line);padding-top:24px;gap:20px}.name-parts strong{font-size:28px;font-weight:400;color:var(--cyan)}.name-parts strong span{display:block;font-size:14px;color:var(--text);margin-top:8px}.name-parts p{font-size:12px;color:var(--muted);margin:4px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:40px}.section-heading .eyebrow{margin:0}.section-heading>p{font-size:14px;color:var(--muted);margin:0 0 5px}.directions{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:linear-gradient(135deg,#101b30,#0a1324)}.directions article{padding:32px;border-right:1px solid var(--line)}.directions article:last-child{border:0}.direction-no{color:var(--muted);letter-spacing:1px}.symbol{font-size:64px;line-height:1.4;color:var(--cyan);margin:28px 0 18px;font-weight:200}.code-symbol{font-family:monospace;font-size:49px;line-height:1.83}h3{font-size:23px;font-weight:500;margin:0}.direction-en{font-size:13px;letter-spacing:.4px;color:#aebfd7;margin:3px 0 25px}.directions article>p:not(.direction-en){font-size:15px;color:var(--muted);line-height:1.9}.tags{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}.tags span{font-size:12px;border:1px solid #2e3a4f;padding:3px 9px;color:#b8c9e0}.project{display:grid;grid-template-columns:45px 1fr auto 45px;align-items:center;gap:26px;padding:35px 0;border-top:1px solid var(--line)}.project-index{align-self:start;color:#73869f;font:14px monospace;padding-top:6px}.project-type{font-size:11px;color:#9cafc8;margin:0 0 8px;letter-spacing:1.3px}.project p:last-child{font-size:14px;color:var(--muted);margin:10px 0 0}.status{font-size:12px;color:var(--cyan);border:1px solid #2a535c;padding:5px 12px;white-space:nowrap}.status.muted{color:#a6b4ca;border-color:var(--line)}.project-arrow{font-size:28px;text-align:center}.project-arrow:hover{color:var(--cyan)}.destinations{display:grid;grid-template-columns:1fr 1fr;gap:24px}.destination{padding:32px;border:1px solid #294465;display:flex;flex-direction:column;gap:44px;background:linear-gradient(120deg,#112644,#0b162a);transition:border-color .2s}.destination.shop{background:linear-gradient(120deg,#101f31,#0c1721);border-color:#2a444a}.destination:hover{border-color:var(--cyan)}.destination h2{font-size:29px;margin:0}.destination p{font-size:14px;color:var(--muted)}.destination-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:14px}.destination-bottom>span:last-child{font:12px monospace;color:var(--muted)}.contact{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:60px}.contact h2{font-size:42px}.contact p:not(.eyebrow){color:var(--muted);font-size:14px}.contact-links{border-left:1px solid var(--line);padding:10px 0 10px 50px}.contact .contact-status{color:var(--text)!important;font-size:18px!important}.contact-links .text-link{margin-top:16px;color:var(--cyan)}.footer{padding:36px 0 24px}.footer-top,.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px}.footer-top .brand{font-size:20px}.footer-top p,.footer-top>a:last-child{font-size:12px;color:var(--muted)}.footer-bottom{margin-top:33px;padding-top:22px;border-top:1px solid var(--line);font-size:11px;color:#93a2b8}.skip{position:fixed;top:-70px;left:15px;z-index:10;background:var(--cyan);color:var(--bg);padding:10px}.skip:focus{top:10px}@media(min-width:1500px){.hero{min-height:780px}.hero-copy{padding-top:90px}}@media(max-width:800px){.header{padding:20px 6%;flex-wrap:wrap;gap:16px}.brand{font-size:22px}.header nav{width:100%;justify-content:space-between;gap:12px}.nav-contact{border:0;padding:0}.hero{min-height:auto;padding-top:25px}.hero-coordinate{display:none}.hero-copy{padding:58px 0 60px}.light-field{right:-37%;width:100%;top:35px;opacity:.55;z-index:-1}.hero-description{max-width:340px}.hero-bottom{font-size:11px;gap:15px;letter-spacing:0}.hero-bottom>a{font-size:10px}.about{grid-template-columns:1fr;gap:36px}.section{padding:65px 0}.section-label h2 br{display:none}.section-heading{display:block;margin-bottom:28px}.section-heading>p{margin-top:14px}.directions{grid-template-columns:1fr}.directions article{padding:28px;border-right:0;border-bottom:1px solid var(--line);position:relative}.symbol{position:absolute;right:30px;top:24px;margin:0;font-size:47px}.code-symbol{font-size:33px}.directions h3{margin-top:26px}.direction-en{margin-bottom:15px}.tags{margin-top:18px}.project{grid-template-columns:25px 1fr 30px;gap:14px;position:relative}.project .status{grid-column:2;justify-self:start}.project-arrow{grid-column:3;grid-row:1}.project h3{font-size:21px}.destinations{grid-template-columns:1fr;gap:18px}.destination{padding:28px;gap:30px}.contact{grid-template-columns:1fr;gap:25px}.contact h2{font-size:34px}.contact-links{padding:0;border-left:0}.footer-top{flex-wrap:wrap}.footer-top p{width:100%;order:3;margin:0}.footer-bottom{flex-wrap:wrap;gap:8px}.footer-bottom>span:nth-child(2){width:100%;order:3}.footer-bottom>span:last-child{margin-left:auto}}@media(max-width:390px){.name-parts{gap:12px}.name-parts p{font-size:11px}.hero-actions{gap:20px}.button{gap:18px}.destination-bottom{align-items:start;flex-direction:column}.brand-cn{font-size:12px}.header nav{font-size:13px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Light in motion: transform/opacity only, with a visible pause control. */
.hero-bottom{flex-wrap:wrap;gap:16px}
.motion-toggle{font:inherit;font-size:12px;letter-spacing:0;color:var(--muted);background:transparent;border:1px solid var(--line);padding:9px 12px;min-height:44px;cursor:pointer}
.motion-toggle:hover{color:var(--cyan);border-color:var(--cyan)}
.motion-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.motion-on .beam{animation:light-breathe 7s ease-in-out infinite}
.motion-on .beam-core{animation:light-current 5s ease-in-out infinite}
.motion-on .orbit-one{animation:orbit-drift-one 22s ease-in-out infinite}
.motion-on .orbit-two{animation:orbit-drift-two 28s ease-in-out infinite}
.motion-on .orbit-three{animation:orbit-drift-three 34s ease-in-out infinite}
.motion-on .cross-one{animation:coordinate-turn 18s linear infinite}
.motion-on .cross-two{animation:coordinate-turn 24s linear infinite reverse}
.motion-on .hero h1 span{animation:title-glow 7s ease-in-out infinite}
.motion-paused .light-field *,.motion-paused .hero h1 span{animation-play-state:paused!important}
@keyframes light-breathe{0%,100%{opacity:.5;transform:rotate(33deg) translateX(-12px) scaleX(.85)}50%{opacity:1;transform:rotate(33deg) translateX(12px) scaleX(1.15)}}
@keyframes light-current{0%,100%{opacity:.45;transform:rotate(33deg) translateY(-28px)}50%{opacity:1;transform:rotate(33deg) translateY(28px)}}
@keyframes orbit-drift-one{0%,100%{transform:rotate(-32deg) scaleX(.6)}50%{transform:rotate(-12deg) scaleX(.68)}}
@keyframes orbit-drift-two{0%,100%{transform:rotate(-32deg) scaleX(.9)}50%{transform:rotate(-47deg) scaleX(.8)}}
@keyframes orbit-drift-three{0%,100%{transform:rotate(-32deg) scaleX(1.3)}50%{transform:rotate(-20deg) scaleX(1.18)}}
@keyframes coordinate-turn{to{transform:rotate(360deg)}}
@keyframes title-glow{0%,100%{opacity:1}50%{opacity:.78}}
@media(hover:hover) and (pointer:fine){
  .motion-on .destination,.motion-on .primary,.motion-on .project-arrow,.motion-on .symbol{transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
  .motion-on .destination:hover{transform:translateY(-6px);box-shadow:0 16px 45px #0003,0 0 24px #71eceb0d}
  .motion-on .directions article{transition:background-color .35s ease}
  .motion-on .directions article:hover{background-color:#15364a55}
  .motion-on .directions article:hover .symbol{transform:translateY(-5px) rotate(8deg)}
  .motion-on .project-arrow:hover{transform:translate(3px,-3px)}
  .motion-on .primary:hover{box-shadow:0 0 28px #91f1ef33}
}
@media(max-width:800px){.hero-bottom>a{margin-left:auto}.motion-toggle{flex-basis:auto}.motion-on .orbit-three{animation:none}}
@media(prefers-reduced-motion:reduce){.motion-on .light-field *,.motion-on .hero h1 span{animation:none!important}}