/* Two contrasting worlds, with Xinlei as a small part of the scene. */
:root{--bg:#f7f8fa;--ink:#1b1e24;--muted:#737b8b;--blue:#446bde;--line:#dce0e8;color-scheme:light}
body{background:var(--bg);color:var(--ink)}
.site-header{background:#f7f8fac9;border-bottom:1px solid #dfe3eb99}
.nav-links{color:#646b78}.nav-links a:hover{color:#111}.nav-contact{background:#e9edf3;color:#232a36}
.language-switch{border-color:#d8dde7;background:#fff8}.language-switch button{color:#737987}.language-switch button:hover{color:#141b29}.language-switch button[aria-pressed=true]{background:#233455;color:white}
.personality-hero{--accent:#a8c5ff;--scene-base:#0b1524;height:auto;min-height:min(840px,100svh);max-height:none;overflow:hidden;background:var(--scene-base);color:#f4f7fd;transition:background .8s,color .6s}
.personality-hero[data-mode=life]{--accent:#397eb0;--scene-base:#f2f7fc;background:var(--scene-base);color:#1b2839}
.scene-environment{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.scene-environment img{position:absolute;inset:0 0 0 auto;width:72%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1s ease;mask-image:linear-gradient(90deg,transparent,#000 33%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 33%)}
.personality-hero[data-scene=office] .scene-office,.personality-hero[data-scene=mountains] .scene-mountains,.personality-hero[data-scene=festival] .scene-festival{opacity:1}
.scene-environment::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--scene-base) 14%,transparent 72%),linear-gradient(0deg,var(--scene-base),transparent 20%);transition:background .8s}
.hero-layout{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:25px;padding-block:132px 110px;min-height:840px;position:relative}
.personality-hero .hero-content{height:auto;padding:0;align-items:flex-start;min-width:0}
.personality-hero .hero-eyebrow{color:#a4b4ca;font-size:12px;letter-spacing:.12em;margin-bottom:27px}
.personality-hero h1{font-size:clamp(52px,5.7vw,82px);line-height:1.06;letter-spacing:-.06em;font-weight:650;margin-bottom:29px}
.personality-hero h1>span{background:none;color:var(--accent);transition:color .4s}
.personality-hero .hero-intro{font-size:18px;line-height:1.75;color:#b6c3d6;max-width:400px;margin-bottom:30px}
.personality-hero .pill{background:#eef4ff;color:#14223a;font-size:14px;padding:16px 23px;gap:26px}
.personality-hero .pill:hover{background:#c5daff}
.hero-personal-note{font-size:13px;color:#97a8c0;margin:19px 0 0;line-height:1.6}
.personality-hero .hero-bottom{color:#a2b1c8;font-size:12px;bottom:29px}
.personality-hero[data-mode=life] .hero-eyebrow,.personality-hero[data-mode=life] .hero-intro{color:#596d82}
.personality-hero[data-mode=life] .hero-personal-note,.personality-hero[data-mode=life] .hero-bottom{color:#64798e}
.personality-hero[data-mode=life] .pill{background:#243956;color:#fff}
.personality-hero[data-mode=life] .pill:hover{background:#34628c}
.avatar-panel{width:100%;height:500px;min-width:0;position:relative;align-self:center;text-align:center}
.mode-switch{display:inline-flex;align-items:center;border:1px solid #b4c8e529;border-radius:40px;background:#142236b8;backdrop-filter:blur(16px);padding:5px;gap:4px;position:relative;z-index:3;box-shadow:0 8px 32px #0000000a}
.mode-switch button{border:0;background:none;color:#b9c6da;padding:12px 24px;border-radius:30px;font-size:14px;font-weight:550;min-height:43px;transition:color .3s,background .3s,box-shadow .3s}
.mode-switch button[aria-pressed=true]{color:#213553;background:#eff5ff;box-shadow:0 3px 12px #1b294c0c}
[data-mode=life] .mode-switch{background:#edf3f9c9;border-color:#b6c9dd6b}
[data-mode=life] .mode-switch button{color:#596f87}
[data-mode=life] .mode-switch button[aria-pressed=true]{color:#234c72;background:#fff}
.avatar-stage{position:absolute;left:50%;bottom:28px;width:clamp(190px,19vw,260px);max-width:260px;margin:0;transform:translateX(-50%)}
.avatar-stage::before{content:"";position:absolute;left:50%;bottom:8%;width:38%;height:7px;transform:translateX(-50%);border-radius:50%;background:#030a1740;filter:blur(5px);pointer-events:none}
.avatar-display{display:block;width:100%;aspect-ratio:1;padding:0;background:transparent;position:relative;cursor:default}
.avatar-canvas{display:block;width:100%;height:100%;object-fit:contain}
.avatar-images{display:block;position:absolute;inset:0;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .4s ease;mix-blend-mode:multiply}
.avatar-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateY(12px) scale(.94);transition:opacity .35s ease,transform .55s cubic-bezier(.2,.75,.2,1);pointer-events:none;mix-blend-mode:multiply}
.avatar-image.is-active{opacity:1;transform:translateY(0) scale(1)}
.avatar-button:hover .avatar-images{scale:1.025}.avatar-button:active .avatar-images{scale:.97}
.avatar-tap{display:grid;place-items:center;position:absolute;right:11%;bottom:12%;height:43px;width:43px;background:#fff;border:1px solid #e6e8ee;border-radius:50%;box-shadow:0 8px 28px #3c4c7820;color:var(--accent);font-size:23px;transition:transform .3s}
.avatar-button:hover .avatar-tap{transform:rotate(12deg)}
.avatar-sticker{position:absolute;z-index:2;right:0;top:9%;max-width:190px;margin:0;padding:13px 18px;border-radius:16px 16px 16px 3px;color:#4a5c84;background:#fffefb;box-shadow:0 9px 35px #293e7110;font-size:14px;font-weight:500;transform:rotate(6deg);pointer-events:none}
[data-mode=life] .avatar-sticker{color:#b05d35;transform:rotate(-5deg)}
#avatar-hint{margin:-10px 0 22px;position:relative;color:#9298a3;font-size:13px;line-height:1.5}
.scene-controls{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.scene-controls button{background:transparent;border:1px solid transparent;color:#9197a3;border-radius:30px;padding:10px 12px;min-height:40px;font-size:12px;transition:background .25s,color .25s}
.scene-controls button:hover{color:#263956;background:#e9edf4}
.scene-controls button[aria-pressed=true]{color:#3d4c68;background:#e6eaf2;border-color:#dce2ec}
[data-mode=life] .scene-controls button[aria-pressed=true]{color:#a45830;background:#f4e7dc;border-color:#efddcf}
.avatar-caption{font-size:14px;line-height:1.65;color:#7d8390;margin:15px 0 0;min-height:46px}
.intro-section{padding-block:95px 115px;border-top:1px solid #e7eaf0}
.intro-section .eyebrow{color:#8c93a0}.manifesto{font-size:clamp(36px,4.5vw,64px)}.gradient-text{background:linear-gradient(105deg,#3a4354,#446ec9 70%,#b77350);background-clip:text;-webkit-background-clip:text;color:transparent}.intro-note{color:#838a97}
.work-section{background:#edf0f5}.about-copy>p+p,.experience-row>p{color:#747c8b}.experience-role{color:#727c8d}.about-notes small,.experience-date{color:#8b93a1}
.contact-section{background:radial-gradient(ellipse at 50% 100%,#e0e9fc 0%,#f7f8fa 68%)}.contact-section .pill{background:#263956;color:white}.email-link{color:#738097}.site-footer{border-color:#dde2eb;color:#8b93a1}.site-footer .wordmark{color:#263956}.site-footer>a:last-child:hover{color:#263956}
html[lang=zh-CN] .personality-hero h1{font-size:clamp(56px,5.5vw,80px);line-height:1.2;letter-spacing:-.035em}
html[lang=zh-CN] .personality-hero .hero-intro{line-height:1.95}
body[data-home-mode=work] .site-header{background:#0b1524cf;border-bottom-color:#b4c8e51a;color:#f1f5fc}
body[data-home-mode=work] .nav-links{color:#b5c3d7}
body[data-home-mode=work] .nav-links a:hover{color:#fff}
body[data-home-mode=work] .site-header .wordmark span{color:#a8c5ff}
body[data-home-mode=work] .nav-contact{background:#ffffff12;color:#e3edfc}
body[data-home-mode=work] .language-switch{border-color:#b4c8e52e;background:#ffffff08}
body[data-home-mode=work] .language-switch button{color:#b5c3d7}
body[data-home-mode=work] .language-switch button[aria-pressed=true]{background:#eaf2ff;color:#192d4d}
.site-header,.nav-contact,.language-switch{transition:background .6s,color .6s,border-color .6s}
@media(min-width:1600px){.hero-layout{min-height:880px}.personality-hero h1{font-size:87px}.avatar-panel{scale:1}}
@media(max-width:1100px) and (min-width:701px){.hero-layout{grid-template-columns:1fr 1fr;gap:0;min-height:780px}.personality-hero h1{font-size:55px}.personality-hero .hero-intro{font-size:16px}.avatar-sticker{right:-9px;font-size:12px;max-width:150px}.scene-controls{gap:1px}.scene-controls button{font-size:11px;padding:10px 7px}.mode-switch button{padding:11px 18px}}
@media(max-width:700px){
  .personality-hero{min-height:0;height:auto;max-height:none}.hero-layout{display:flex;flex-direction:column;gap:22px;padding-block:106px 80px;min-height:0}
  .scene-environment{top:auto;height:395px;bottom:0}
  .scene-environment img{width:100%;mask-image:none;-webkit-mask-image:none;object-position:center 62%}
  .scene-environment::after{background:linear-gradient(180deg,var(--scene-base),transparent 43%),linear-gradient(0deg,var(--scene-base),transparent 23%)}
  .personality-hero .hero-content{width:100%;padding:0;align-items:center;text-align:center}.personality-hero .hero-eyebrow{font-size:11px;margin-bottom:21px;max-width:none}
  .personality-hero h1{font-size:clamp(45px,11vw,67px);line-height:1.05;margin-bottom:22px}.personality-hero .hero-intro{font-size:16px;line-height:1.75;max-width:350px;margin-bottom:23px}.personality-hero .hero-intro br{display:none}
  .personality-hero .pill{font-size:14px;padding:14px 22px}.hero-personal-note{display:none}.avatar-panel{width:min(100%,450px);height:260px}
  .mode-switch button{padding:10px 23px;min-height:43px;font-size:14px}.avatar-stage{width:174px;bottom:0;margin:0}.avatar-button{aspect-ratio:1}.avatar-sticker{top:10%;right:-3px;font-size:12px;padding:11px 13px;max-width:145px}.avatar-tap{width:36px;height:36px;font-size:20px;right:8%;bottom:11%}
  #avatar-hint{font-size:12px;margin:-2px 0 13px}.scene-controls{gap:3px}.scene-controls button{font-size:11px;padding:10px 9px}.avatar-caption{font-size:12px;margin-top:10px;min-height:40px;max-width:315px;margin-inline:auto}
  .personality-hero .hero-bottom{font-size:10px;bottom:21px}.personality-hero .scroll-prompt{font-size:10px}.intro-section{padding-block:76px 88px}.manifesto{font-size:clamp(30px,7.6vw,48px)}
  html[lang=zh-CN] .personality-hero h1{font-size:clamp(48px,12vw,69px);line-height:1.18}html[lang=zh-CN] .personality-hero .hero-intro{max-width:300px}html[lang=zh-CN] .personality-hero .hero-intro br{display:block}
}
@media(prefers-reduced-motion:reduce){.avatar-image,.avatar-images,.avatar-tap,.personality-hero{transition:none!important}.avatar-images{transform:none!important}.avatar-button:hover .avatar-images{scale:1}}
@media print{.avatar-panel,.scene-environment{display:none}.hero-layout{display:block;min-height:0;padding-block:30px}.personality-hero{min-height:0;background:white;color:#1b2839}.personality-hero .hero-intro,.personality-hero .hero-eyebrow{color:#555}.hero-personal-note{display:none}}