:root {
  color-scheme: light;
  --bg:#fafafa; --surface:#ffffff; --text:#222528; --muted:#62676d;
  --soft:#858b91; --line:#2225281a; --accent:#96713a;
  --glass:linear-gradient(135deg,#ffffffdd,#edf0f2a8);
  --shadow:0 6px 22px #1b263408;
  font-family:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;
  font-synthesis:none; text-rendering:optimizeLegibility;
  background:var(--bg); color:var(--text);
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#111416; --surface:#191d20; --text:#edf0f1; --muted:#afb7bd;
  --soft:#929ba2; --line:#d8e2ea20; --accent:#ccb583;
  --glass:linear-gradient(135deg,#2a3136bb,#1c2328b8);
  --shadow:0 6px 22px #00000020;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:112px}
body{margin:0;background:var(--bg);color:var(--text);overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
::selection{background:#ccb58350;color:var(--text)}
.skip{position:fixed;left:20px;top:-100px;z-index:100;padding:12px 18px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.skip:focus{top:16px}
.header{position:sticky;top:0;z-index:20;max-width:1240px;margin:auto;height:88px;padding:0 44px;display:flex;align-items:center;gap:40px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:23px;font-weight:600;letter-spacing:.01em;flex-shrink:0}
.brand-star{font-size:15px;color:var(--accent);align-self:flex-start;margin-top:2px}
.navigation{display:flex;align-items:center;gap:30px;flex:1;font-size:14px;color:var(--muted)}
.navigation a{padding-block:12px;white-space:nowrap;transition:color .18s}
.navigation a:hover,.navigation a[aria-current="location"]{color:var(--text)}
.theme-toggle{margin-left:auto;display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;padding:9px;background:transparent;border:0;border-radius:50%;transition:background .18s}
.theme-toggle:hover{background:var(--line)}
.theme-toggle svg{width:21px;height:21px}
.navigation .nav-contact{color:var(--text);display:inline-flex;align-items:center;gap:8px}
.navigation button.nav-contact{font:inherit;border:0;background:transparent;min-height:44px;white-space:nowrap}
.hero{position:relative;max-width:1240px;margin:auto;padding:104px 44px 62px;isolation:isolate}
.hero-copy{position:relative;z-index:1;max-width:800px;margin:auto;text-align:center}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.08em;line-height:1.7;color:var(--soft);margin:0 0 25px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(44px,5.6vw,76px);font-weight:500;line-height:1.28;letter-spacing:-.045em;margin:0 0 26px}
.hero-subtitle{font-size:clamp(19px,2.2vw,26px);font-weight:400;line-height:1.7;letter-spacing:-.02em;margin-bottom:30px}
.hero-intro{max-width:610px;margin:auto;font-size:17px;line-height:1.95;color:var(--muted)}
.hero-intro p{margin:0 0 12px}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:30px;margin-top:34px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:49px;padding:12px 22px;font-size:15px;line-height:1.6;border:1px solid var(--line);border-radius:14px}
.glass-button{background:var(--glass);box-shadow:var(--shadow),inset 0 1px 0 #ffffff30;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .2s,box-shadow .2s,border-color .2s}
.text-button{border:0;background:transparent;padding:13px 0;font-size:15px;display:inline-flex;align-items:center;gap:12px}
.text-button:hover{text-decoration:underline;text-underline-offset:6px}
.hero-constellation{position:absolute;z-index:-1;width:290px;height:auto;right:4px;top:10px;pointer-events:none;opacity:.14;filter:brightness(0);mask-image:linear-gradient(180deg,#0007,#000,transparent);-webkit-mask-image:linear-gradient(180deg,#0007,#000,transparent)}
[data-theme="dark"] .hero-constellation{filter:grayscale(1);opacity:.25}
.hero-footnote{display:flex;align-items:center;justify-content:center;gap:10px;margin:80px 0 0;color:var(--soft);font-size:13px;letter-spacing:.06em}
.hero-footnote span{font-size:22px;color:var(--accent)}
.section{max-width:1000px;margin:auto;padding:96px 44px;scroll-margin-top:16px}
.section-heading{text-align:center;margin-bottom:54px}
.section-heading .eyebrow{margin-bottom:15px}
h2{font-size:clamp(31px,3.3vw,44px);line-height:1.4;font-weight:500;letter-spacing:-.04em;margin-bottom:0}
.project-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:54px;padding:42px 0;border-top:1px solid var(--line)}
.project-meta{padding-top:5px}
.project-number{font-size:13px;color:var(--soft);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.project-state{font-size:14px;color:var(--muted);line-height:1.8;margin:16px 0 0}
h3{font-size:25px;line-height:1.5;font-weight:500;letter-spacing:-.02em;margin-bottom:18px}
.project-body p,.past-project>p:not(.eyebrow),.story p,.contact-intro p{font-size:17px;line-height:1.95;color:var(--muted);margin-bottom:18px}
.project-body p:last-child{margin-bottom:0}
.project-body .project-note{font-size:15px;color:var(--text);margin-top:24px}
.past-project{max-width:none;margin:0;border-left:0}
.past-link{margin-top:8px}
.past-project .eyebrow{margin-bottom:14px}
.past-heading{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.past-heading h3{font-size:20px;margin:0}
.past-heading>span{font-size:13px;color:var(--soft)}
.past-project>p:not(.eyebrow){font-size:15px;line-height:1.95}
.past-project .past-domain{font-size:13px!important;color:var(--soft)!important;margin-bottom:0}
.about{padding-top:104px;padding-bottom:98px}
.story{max-width:650px;margin:auto}
.story p{font-size:19px;line-height:2;margin-bottom:28px}
.story-signature{display:block;text-align:right;font-size:21px;margin-top:34px;letter-spacing:.08em}
.story-signature span{font-size:14px;margin-left:6px;color:var(--accent)}
.contact{max-width:1080px;text-align:center;padding:80px 44px 110px;border-top:1px solid var(--line)}
.contact-star{display:inline-block;color:var(--accent);font-size:38px;line-height:1;margin-bottom:22px}
.contact h2{margin-bottom:27px}
.contact-intro{max-width:600px;margin:auto}
.contact-intro p{margin-bottom:16px}
.contact>.button{margin-top:20px}
.contact-links{display:grid;grid-template-columns:repeat(4,64px);justify-content:center;gap:20px;margin:32px auto 0}
.contact-links .social-link{min-width:0;min-height:64px;padding:14px;white-space:nowrap}
.social-icon{display:block;width:23px;height:23px;flex:0 0 auto}
.social-link .social-icon{width:23px;height:23px;flex:0 0 23px}
.social-link .social-icon-xiaohongshu{width:30px;height:30px;flex-basis:30px}
.social-link .social-icon-x{width:19px;height:19px;flex-basis:19px}
.social-link .liquid-content{width:100%;justify-content:center;gap:10px}
.social-link.liquid-button:focus-visible{outline-color:var(--accent)}
.minimal-footer{text-align:center;color:var(--soft);font-size:14px;letter-spacing:.18em;padding:26px 24px 36px}
body.contact-open{overflow:hidden}
.contact-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100svh - 32px);margin:auto;overflow:auto;padding:46px 32px 27px;text-align:center;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 100px #0003}
.contact-dialog::backdrop{background:#0d152b44;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.contact-dialog form{margin:0}
.contact-close{position:absolute;right:13px;top:12px;width:36px;height:36px;border:0;border-radius:50%;background:var(--bg);color:var(--muted);font-size:25px}
.contact-dialog .eyebrow{margin-bottom:15px}
.contact-dialog h2{font-size:29px;margin-bottom:15px}
#contact-description{color:var(--muted);font-size:15px;line-height:1.8;margin:0 0 28px}
.wechat-label{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:14px;margin-bottom:12px}
.wechat-label .social-icon{width:21px;height:21px;color:#169e50}
:root[data-theme="dark"] .wechat-label .social-icon{color:#65d68b}
.wechat-id{width:100%;display:block;text-align:center;padding:15px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-family:inherit;font-size:23px;letter-spacing:.03em;user-select:all;-webkit-user-select:all}
.contact-copy{width:100%;margin-top:15px}
.contact-status{font-size:13px;line-height:1.7;min-height:44px;color:var(--muted);margin:18px 0 0}
.dialog-socials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:21px;margin-top:5px;border-top:1px solid var(--line)}
.dialog-socials a{display:flex;align-items:center;justify-content:center;min-width:0;min-height:58px;padding:6px 2px;border-radius:14px;color:var(--muted);transition:color .2s,background .2s}
.dialog-socials a:hover{color:var(--text);background:var(--line)}
.platform-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:var(--text);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s,box-shadow .2s}
.platform-mark .social-icon{width:22px;height:22px}
.platform-mark .social-icon-x{width:19px;height:19px}
.platform-mark .social-icon-xiaohongshu{width:32px;height:32px;color:#d92043}
:root[data-theme="dark"] .platform-mark .social-icon-xiaohongshu{color:#ff7388}
.dialog-socials a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(hover:hover){.dialog-socials a:hover .platform-mark{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line),0 5px 14px #0002}}
@media(hover:hover) and (pointer:fine){.glass-button:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--text) 25%,transparent);box-shadow:0 10px 30px #24334413,inset 0 1px 0 #ffffff50}.glass-button:active{transform:translateY(0)}}
@media(max-width:760px){
  html{scroll-padding-top:88px}
  .header{height:72px;padding-inline:24px;gap:28px}
  .navigation{gap:18px}
  .hero{padding:76px 24px 38px}
  h1{font-size:clamp(38px,7.4vw,58px)}
  .hero-subtitle{font-size:20px}
  .hero-intro{max-width:550px;font-size:16px}
  .hero-constellation{width:190px;right:0;top:0;opacity:.08}
  .hero-footnote{margin-top:60px;font-size:12px}
  .section{padding:64px 26px}
  .section-heading{margin-bottom:36px}
  .project-row{grid-template-columns:125px minmax(0,1fr);gap:25px;padding:34px 0}
  .project-body p{font-size:16px}
  .project-meta{padding-top:5px}
  .past-project{margin-top:0}
  .story p{font-size:17px}
  .contact{margin-inline:26px;padding:64px 0 72px}
  .contact-links{grid-template-columns:repeat(4,56px);gap:12px}
}
@media(max-width:520px){
  .header{padding-inline:18px;gap:20px}
  .brand{font-size:21px;gap:6px}
  .brand-star{font-size:12px}
  .navigation{font-size:13px;gap:12px}
  .theme-toggle{width:34px;height:38px;padding:7px}
  .navigation .nav-contact{gap:4px}
  .hero{padding:64px 24px 36px}
  .hero-copy .eyebrow{font-size:12px;margin-bottom:22px}
  h1{font-size:clamp(35px,8.4vw,43px);margin-bottom:22px;letter-spacing:-.055em}
  .hero-subtitle{font-size:19px;max-width:19em;margin:0 auto 27px;text-wrap:pretty}
  .hero-intro{font-size:16px;line-height:1.9;text-align:left}
  .hero-intro p{margin-bottom:14px}
  .hero-actions{gap:18px;margin-top:26px}
  .hero-actions .button{padding-inline:16px;gap:14px;font-size:14px}
  .hero-actions .text-button{font-size:14px}
  .hero-constellation{width:155px;right:5px;top:4px}
  .hero-footnote{margin-top:45px}
  .section{padding:54px 24px}
  .section-heading{margin-bottom:30px}
  h2{font-size:31px}
  .project-row{display:block;padding:28px 0}
  .project-meta{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding:0}
  .project-state{margin:0;font-size:13px}
  h3{font-size:23px;margin-bottom:14px}
  .project-body .project-note{font-size:15px;margin-top:20px}
  .past-project{margin-top:0;padding-left:0}
  .story p{font-size:17px;line-height:1.95;margin-bottom:24px}
  .contact{padding:52px 0 60px;margin-inline:24px}
  .contact-intro{text-align:left}
  .contact-intro p{font-size:16px}
  .contact-links{margin-top:27px}
  .contact-links .social-link{min-height:56px;padding:12px}
  .social-link .liquid-content{gap:6px}
  .social-link .social-icon{width:20px;height:20px;flex-basis:20px}
  .social-link .social-icon-xiaohongshu{width:28px;height:28px;flex-basis:28px}
  .social-link .social-icon-x{width:17px;height:17px;flex-basis:17px}
  .contact-dialog{padding:43px 23px 23px}
}
@media(max-width:360px){.header{padding-inline:12px;gap:13px}.navigation{gap:9px;font-size:12px}.brand{font-size:20px}.brand-star{display:none}.theme-toggle{width:30px}.hero{padding-inline:20px}.hero-actions{gap:10px}.hero-actions .button{padding-inline:13px;gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(forced-colors:active){.glass-button{border:1px solid ButtonText}.hero-constellation{display:none}}

/* Original particle experience, with room for the new personal introduction. */
#universe{position:fixed;inset:0;width:100%;height:100svh;z-index:0;pointer-events:none}
.js-enabled #universe{opacity:0;transition:opacity .16s linear}
.js-enabled .webgl-ready #universe{opacity:1}
.js-enabled body:not(.webgl-fallback) .fallback-star{visibility:hidden}
main,.minimal-footer{position:relative;z-index:1}
.reading-progress{position:fixed;left:0;top:0;width:100%;height:2px;z-index:40;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--accent),var(--text));pointer-events:none}
.header{background:color-mix(in srgb,var(--bg) 55%,transparent);transition:background .35s,box-shadow .35s}
.header.scrolled{background:color-mix(in srgb,var(--bg) 86%,transparent);box-shadow:0 1px 0 var(--line)}
.navigation{background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;gap:12px}
.navigation .liquid-button{padding:9px 13px;color:var(--muted)}
.navigation .theme-toggle{padding:9px;width:40px;height:40px}
.navigation .liquid-button.nav-contact{color:var(--text);display:inline-flex}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:20px;align-items:center;min-height:calc(100svh - 88px);padding:58px 44px 44px;max-width:1440px}
.hero-copy{text-align:left;margin:0;max-width:640px;background:radial-gradient(ellipse at 30% 50%,color-mix(in srgb,var(--bg) 93%,transparent),transparent 75%)}
.hero-copy h1{font-size:clamp(42px,4.4vw,66px)}
.hero-subtitle{font-size:clamp(20px,1.8vw,25px);max-width:22em}
.hero-intro{margin:0;max-width:530px}
.hero-actions{justify-content:flex-start;gap:18px}
.hero-visual{position:relative;width:100%;height:min(72svh,720px);min-height:400px;align-self:center}
.fallback-six{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:brightness(0);opacity:.85}
[data-theme="dark"] .fallback-six{filter:none}
.webgl-ready .fallback-six,.webgl-ready .fallback-star{visibility:hidden}
.star-interaction{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:grab;touch-action:pan-y pinch-zoom}
.star-interaction.dragging{cursor:grabbing}
.star-interaction:focus-visible{outline-offset:-5px;border-radius:28px}
.star-replay{position:absolute;right:12px;bottom:0;display:grid;place-items:center;width:38px;height:38px;padding:9px}
.star-replay svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hero-footnote{grid-column:1/-1;margin:26px 0 0}
.cursor-slot{width:min(400px,78vw);height:clamp(250px,40svh,390px);margin:0 auto 34px;display:grid;place-items:center;pointer-events:none}
.fallback-star{font-size:clamp(200px,32svh,310px);line-height:1;color:var(--text);opacity:.65}
.work{padding-top:80px}
.project-row,.past-project,.story,.contact-intro{position:relative;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--bg) 91%,transparent) 35%,transparent 78%)}
.contact-dialog{background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 90%,transparent),color-mix(in srgb,var(--bg) 88%,transparent));backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);box-shadow:inset 0 1px 1px #ffffff40,0 30px 100px #0005}
.liquid-button{color:var(--text);text-shadow:none;border-radius:999px}
.button.liquid-button{background:var(--glass);box-shadow:var(--shadow),inset 0 1px 0 #ffffff40}
.text-button.liquid-button{padding:12px 20px;border:1px solid var(--line);background:transparent}
.text-button.liquid-button:hover{text-decoration:none}
.liquid-content .copy-label{font-size:inherit!important;line-height:inherit!important;transform:none!important}
.contact-copy .liquid-content{justify-content:center}
:root:not([data-theme="dark"]) .liquid-button{border-color:#202a3a30;box-shadow:0 5px 18px #1627400b,inset 0 1px 1px #fff}
:root:not([data-theme="dark"]) .liquid-surface{background:linear-gradient(150deg,#ffffff88,#dce6f00c 50%,#7e95ad15);backdrop-filter:blur(7px) saturate(150%);-webkit-backdrop-filter:blur(7px) saturate(150%)}
:root:not([data-theme="dark"]) .liquid-button::after{box-shadow:inset 0 2px 4px #ffffffc9,inset 0 -2px 4px #73869c20}
:root:not([data-theme="dark"]) .liquid-light{background:radial-gradient(ellipse 105px 70px at var(--lx) var(--ly),#ffffffed,#fff7 40%,transparent 75%)}
:root:not([data-theme="dark"]) .navigation .liquid-button{border-color:transparent;box-shadow:none}
@media(hover:hover) and (pointer:fine){
  .liquid-button:hover,.liquid-button.is-liquid-hover{transform:perspective(700px) translate3d(var(--liquid-x),calc(var(--liquid-y) - 2px),0) rotateX(var(--liquid-rx)) rotateY(var(--liquid-ry)) scale(1.025)}
  :root:not([data-theme="dark"]) .liquid-button:hover{border-color:#7c8da34d;box-shadow:0 10px 27px #182a441a,inset 0 2px 2px #fff,inset 0 -1px 3px #5c79932b;background:#ffffff52}
}
@media(max-width:1000px) and (min-width:761px){.hero{padding-inline:32px;column-gap:8px}.hero-copy h1{font-size:42px}.hero-subtitle{font-size:20px}.hero-intro{font-size:16px}.hero-visual{min-height:360px;height:65svh}}
@media(max-width:760px){
  .navigation{gap:6px}.navigation .liquid-button{padding:8px 9px}.navigation .theme-toggle{width:34px;height:36px;padding:7px}.navigation .nav-contact{display:inline-flex}
  .hero{display:flex;flex-direction:column;min-height:0;padding:52px 24px 32px;gap:0}
  .hero-copy{text-align:center;max-width:600px}.hero-copy h1{font-size:clamp(36px,7.6vw,54px)}
  .hero-subtitle{font-size:20px;margin-inline:auto}.hero-intro{margin-inline:auto;text-align:left}
  .hero-actions{justify-content:center;gap:14px}.hero-actions .liquid-button{padding:12px 17px}
  .hero-visual{height:58svh;min-height:340px;max-height:560px;width:min(100%,520px);margin-top:22px}
  .hero-footnote{margin-top:20px}.star-replay{right:2px;bottom:2px}
  .work{padding-top:56px}.cursor-slot{height:310px;margin-bottom:26px}
}
@media(max-width:520px){.header{gap:14px}.navigation{gap:3px;font-size:12px}.navigation .liquid-button{padding:8px 7px}.navigation .liquid-content{gap:5px!important}.hero-intro{font-size:16px}.hero-subtitle{font-size:19px}.hero-actions .liquid-button{font-size:14px;gap:12px}.hero-visual{height:52svh;min-height:300px}.cursor-slot{height:280px}}
@media(max-width:360px){.header{gap:8px}.navigation{gap:1px}.navigation .liquid-button{padding-inline:5px}.navigation .theme-toggle{width:30px}.hero{padding-inline:20px}.hero-actions{gap:10px}.hero-actions .liquid-button{padding-inline:12px}.hero-copy h1{font-size:32px}.hero-visual{min-height:280px}}
@media(prefers-reduced-motion:reduce){.liquid-button,.liquid-button:hover{transform:none!important;transition:none}.star-replay{display:none}.header{transition:none}}
@media(forced-colors:active){#universe,.hero-visual,.cursor-slot{display:none}.hero{display:block;min-height:0}.hero-copy{margin:auto}}