/* V3 — night stage, warm light, point-cloud echoes. */
:root{--bg:#15121c;--surface:#211c29;--surface2:#2c2434;--ink:#f8efe3;--muted:#bfb1c0;--blue:#ff7585;--gold:#e3bb86;--line:#dac5d62b;--story-red:#fb5b70;color-scheme:dark;background:var(--bg);color:var(--ink)}
body{background:radial-gradient(ellipse 70% 680px at 92% 8%,#6b213040,transparent 70%),radial-gradient(ellipse 60% 650px at 0 45%,#30345626,transparent 75%),#15121c;overflow-x:clip}
body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(#dac9d513 .7px,transparent .7px);background-size:6px 6px}
.header{height:88px;background:#17131eea;border-bottom:1px solid #ffe0e126;box-shadow:0 10px 40px #08060d24;backdrop-filter:blur(20px)}.header nav a{color:#dccedc}.header nav a:hover,.header nav a[aria-current]{color:#ff7b89}.header nav a[aria-current]:after{width:100%;background:linear-gradient(90deg,#ff6576,#ff657600);height:2px}.header .brand small{color:#bcadb9}
.hero{isolation:isolate;min-height:790px!important;padding-top:100px!important;padding-bottom:120px!important;align-items:center}.hero-copy,.hero-art,.hero-bottom{z-index:1}.hero-copy{position:relative}.hero:before{content:'';position:absolute;inset:4% -10% 12% 35%;z-index:-1;background:radial-gradient(ellipse at 60% 40%,#a92b3e36,transparent 68%);pointer-events:none}.hero .eyebrow{color:#efb8b9;letter-spacing:.17em}.hero .eyebrow span{background:#ff6576;border-radius:50%;box-shadow:0 0 14px #ff6576}
.hero h1.hero-slogan{font-size:clamp(30px,3.4vw,46px);line-height:1.55;font-weight:650}.hero h1.hero-slogan>.hero-slogan-lead{color:#fff3e8}.hero h1.hero-slogan>.hero-slogan-impact{color:#ff7585}.hero-slogan-emphasis{background:linear-gradient(transparent 80%,#ff758529 80%);color:#fff0e1;text-shadow:0 0 36px #ff65762b}.hero-en{color:#d8b891;letter-spacing:.16em}.intro{color:#d4c6d4;line-height:2}.hero-fields{color:#998c9d;gap:13px}.hero-bottom{border-top:1px solid #f2c4cf26;color:#a493a8}.hero-bottom a{color:#f3c2cb}
.primary{background:#ff6576;color:#1d111b;border:1px solid #ff8996;box-shadow:4px 4px 0 #6a273c;font-weight:750;border-radius:2px;clip-path:polygon(0 0,95% 0,100% 22%,100% 100%,5% 100%,0 78%)}.primary:hover{background:#ff91a0;color:#1a1119;box-shadow:6px 6px 0 #52263e;transform:translateY(-3px)}.text-link{color:#edc6d0}.play-icon{color:#ff8a99}
.hero .inspiration-board{transform:rotate(-2deg);position:relative;align-self:center}.inspiration-header{color:#e2b8c3;letter-spacing:.19em}.inspiration-header span:last-child{color:#a08b9c}.inspiration-window{display:block;width:100%;padding:0;text-align:left;background:#21151f;border:1px solid #ffc5cf65;box-shadow:10px 10px 0 #3d1a2e,0 24px 75px #0007;overflow:hidden;transition:transform .3s,border-color .3s}.inspiration-window:hover{border-color:#ff9eaa;transform:translateY(-4px)}.inspiration-window:after{content:'';position:absolute;inset:0;background:linear-gradient(140deg,#ffd7c70d,transparent 50%);pointer-events:none}.stage-caption{color:#dbc3cd;margin-top:26px;letter-spacing:.02em}.stage-caption b{color:#ff8291}.hero-art:after{content:'';position:absolute;width:60px;height:12px;bottom:56px;right:-20px;transform:rotate(-18deg);background:repeating-linear-gradient(90deg,#eeadb9 0 2px,transparent 2px 5px);opacity:.4;pointer-events:none}
.section{padding-top:110px;padding-bottom:110px}.section-head{position:relative;isolation:isolate;min-height:120px;align-items:center;margin-bottom:45px}.section-head>div,.section-head>p,.section-head>a{position:relative;z-index:1}.section-head h2{font-size:46px;letter-spacing:-.035em;color:#f7eee5}.section-head .eyebrow{color:#f3b4c1;font-size:11px;letter-spacing:.2em}.section-head>p{color:#bbaaBC}.title-dot{color:#ff6576}.section-head:after{content:'';position:absolute;bottom:0;left:0;width:76px;height:2px;background:linear-gradient(90deg,#ff6576,transparent)}
#experience{border-top:1px solid #d8b7cd15}.experience-row{border-color:#ebcad62a;transition:background .25s}.experience-row:hover{background:#65404d13}.experience-company h3{color:#f5e8e1}.experience-content h4{color:#d9bbc9}.experience-details p{color:#bcadbf}.experience-details h5{color:#f3dce5}.experience-details>div{border-color:#ebcad621}.responsibility-number{color:#ed9b9d}.company-logo{padding:0;width:138px;background:transparent;border-radius:0}.company-logo span{color:var(--muted)}.company-logo img{width:138px}.current{color:#e3bb86!important}.tags span{background:#f9d2df08;color:#c8b3c9;border-color:#f5d7e023;border-radius:2px;font-size:11px;letter-spacing:.02em}
.works-section{position:relative;background:radial-gradient(ellipse 90% 480px at 10% 0,#71314638,transparent 80%),linear-gradient(140deg,#251924,#191720 65%);border-block:1px solid #dc9daf20}.showreel{position:relative;overflow:hidden;background:linear-gradient(125deg,#302331,#201c2a);border:1px solid #f4b2c33b;box-shadow:0 20px 50px #09060f33}.showreel:after{content:'';position:absolute;width:60px;height:60px;right:0;top:0;border-top:2px solid #ff8193;border-right:2px solid #ff8193;pointer-events:none}.reel-copy h3{font-size:30px;color:#fff0e4}.reel-copy p:not(.eyebrow){color:#bfadbe}.reel-play>span{color:#f2d0d7}.reel-cover{background:#19151e}.works-toolbar{padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:28px}.filters{gap:8px;flex-wrap:wrap}.filters button{border:1px solid #d3a8bd27;color:#bda5bd;background:#e4afc407;border-radius:2px;transition:all .2s}.filters button[aria-pressed=true]{background:#f6687b;color:#21131e;box-shadow:none;border-color:#ff92a0}.filters button:hover{color:#fff0e7;border-color:#f28b9d}.filters button[aria-pressed=true]:hover{color:#21131e}#work-count{color:#b49aac}
.project-grid{gap:30px}.project-card{background:linear-gradient(150deg,#29212e,#201c27);border:1px solid #d4b4ca26;box-shadow:0 8px 35px #0b08132b;transition:transform .3s,border-color .3s,box-shadow .3s;position:relative}.project-card:hover{transform:translateY(-5px);border-color:#fb829b88;box-shadow:0 16px 40px #09060f55,0 0 30px #ab335916}.project-content h3{color:#f9e9e3}.project-meta span:first-child{color:#ed9eaf}.project-content>p{color:#baacbd}.project-actions{border-color:#c7a9c024}.detail-button{color:#ffc1cc}.project-visual{background:#18141c}.project-visual.abstract{background:radial-gradient(ellipse at 20% 30%,#77445844,transparent),#221b2a}.visual-type{color:#d3a9bd}.visual-index{color:#a7739b45}.project-visual.video img{transition:transform .45s}.project-card:hover .project-visual.video img{transform:scale(1.035)}
.skills-grid{background:transparent;border:0;gap:14px}.skill-card{position:relative;border:1px solid #d8b8cd26!important;background:linear-gradient(135deg,#292331b3,#1d1a26);min-width:0;box-shadow:0 8px 30px #09060f1f;transition:border-color .3s,background .3s}.skill-card:after{content:'';position:absolute;right:12px;top:12px;width:7px;height:7px;border:1px solid #b68ba9;transform:rotate(45deg);opacity:.7}.skill-card[role=button]:hover{background:#312538;border-color:#ff92ad70!important}.skill-card>span{color:#e6b486}.skill-card h3{color:#f2e3ed}.skill-card p{color:#b7a8bc}.skill-card li{color:#e4b8cb}.education{border-color:var(--line);color:#d5bdcf}.education>span{color:#ad91aa}.education small,.education time{color:#bba6b9}
.notes-section{background:radial-gradient(ellipse at 90% 0,#44406b26,transparent 60%),#191722;border-block:1px solid #ac9fd21f}.note-row{border-color:#cec3e322;transition:background .2s}.note-row:hover{background:#745d8f0c}.note-index{color:#e2acbb}.note-row h3{color:#eddfeb}.note-row p{color:#b9aabe}.note-category{color:#da9eb5!important}.note-row .detail-button{color:#efbdcd}
.contact-section{position:relative}.contact-section:before{content:'';position:absolute;inset:0 -5%;background:radial-gradient(ellipse at 82% 65%,#932f4b25,transparent 60%);pointer-events:none;z-index:-1}.contact-section h2{color:#fff0e5}.contact-section p{color:#c4aebe}.contact-side{position:relative;isolation:isolate;border-color:var(--line)}.contact-side>img,.contact-side>p,.contact-side>span,.contact-details{position:relative;z-index:1}.contact-details a{color:#f6b1c4}.afterword{padding-top:30px}.afterword-body{border-color:#bd84995e}.afterword-body p{color:#c8adbb}.afterword-heading:before{background:#ff6e83}.footer{border-color:var(--line);color:#aa91a4}.version-label{color:#e48da4}
.dialog-shell{background:linear-gradient(145deg,#241c29,#18151f)}#detail-dialog{border:1px solid #e3a4ba40;color:var(--ink)}.detail-head>p,.detail-section p{color:#c3adbf}.detail-section h3{color:#ffc2d1}.detail-head h2{color:#fff1e5}.dialog-close,.image-close{background:#362735;color:#ffe7ed;border:1px solid #cf99ad45}#image-dialog,.gallery-image{background:#201923}.game-dialogue-box{background:linear-gradient(125deg,#34202e,#201a29);border-color:#f0bfca;box-shadow:8px 8px 0 #632b43,0 8px 45px #0005}.game-screen{background:#15101b18}.game-screen::backdrop{background:#0c071433}.game-speaker{color:#fff0e4}.game-dialogue-mark{color:#efb2c6!important}.back-to-top{background:#261c2bea;color:#ffafc1;border-color:#c278995e}.reading-progress{height:2px;background:linear-gradient(90deg,#b26da8,#ff6576,#e9b777)}
.v2-media-canvas{background:linear-gradient(135deg,#221a2bee,#312334ee)}.v2-media-status{color:#ffd8e4}
.v3-cloud{position:absolute;display:block;pointer-events:none;z-index:0;max-width:none}.v3-cloud-hero{right:-80px;top:10px;width:72%;height:90%;opacity:.85}.v3-cloud-wave{right:0;top:-22px;width:50%;height:155px;opacity:.65}.v3-cloud-contact{width:450px;height:380px;inset:-70px -70px auto auto;opacity:.8;z-index:-1}.v3-interaction-canvas{position:fixed;inset:0;pointer-events:none;width:100%;height:100%;z-index:35}.v3-grain{pointer-events:none}
@media(min-width:1600px){.hero{min-height:870px!important}.hero h1.hero-slogan{font-size:46px}}
@media(max-width:1000px){.hero{gap:30px;min-height:730px!important;padding-top:75px!important}.hero h1.hero-slogan{font-size:29px}.v3-cloud-hero{right:-30px;width:80%}.section-head h2{font-size:39px}.company-logo{width:128px;padding:0}.company-logo img{width:128px}}
@media(max-width:720px){.header{height:76px}.header nav{background:#1d1724;border-bottom:1px solid #765367}.header nav small{color:#a28da6}.menu-toggle{border-color:#a7799859;background:#38233845;color:#efd9e9}.hero{min-height:0!important;padding-top:54px!important;padding-bottom:110px!important;gap:48px}.hero h1.hero-slogan{font-size:clamp(29px,9.1vw,40px)}.hero .inspiration-board{width:calc(100% - 10px);transform:rotate(-1.5deg)}.hero-art:after{right:-10px;bottom:45px}.inspiration-window{box-shadow:6px 6px 0 #482039}.stage-caption{font-size:10px;margin-top:20px}.v3-cloud-hero{width:110%;right:-5%;top:29%;height:66%;opacity:.6}.section{padding-top:70px;padding-bottom:70px}.section-head{min-height:140px;gap:16px;align-items:flex-start}.section-head h2{font-size:34px}.v3-cloud-wave{width:55%;top:0;right:0;height:120px;opacity:.48}.company-logo{width:max-content;padding:0}.company-logo img{width:112px}.project-grid{gap:24px}.filters{gap:5px}.filters button{padding:10px 11px;font-size:12px}.reel-copy h3{font-size:26px}.skill-card{padding:26px}.contact-side{overflow:clip;min-height:250px}.v3-cloud-contact{width:350px;height:280px;right:-80px;top:0}.contact-section h2{font-size:46px}}
@media(prefers-reduced-motion:reduce){.inspiration-window,.project-card,.skill-card{transition:none}.project-card:hover,.inspiration-window:hover{transform:none}}
.echo-pet-ui{color:#f0dbe8}.echo-pet-launcher{background:#2c2032ec;color:#f3b8cd;border-color:#ce8dac55;box-shadow:0 4px 18px #0503094a}.echo-pet-menu{background:#241c2bf5;border-color:#bc819c50;box-shadow:0 16px 45px #0005}.echo-pet-menu p span,.echo-pet-menu small{color:#ad94ad}.echo-pet-menu button,.echo-pet-options select{background:#35283e;color:#eed5e5;border-color:#c28ba330}.echo-pet-menu button:hover{background:#4c3046}.echo-pet-options{border-color:#c28ba330}.echo-pet-options label{color:#c5aac1}.echo-pet-message{color:#e6b48d}.echo-pet-bubble{background:#2b2032f5;border-color:#bb829c66;color:#e9cfdc;box-shadow:0 8px 25px #0004}.echo-pet-bubble button{color:#ddb3ca}.echo-pet-guide-controls button{background:#473046;color:#f1d0e1}
@media(max-width:1000px){.v3-cloud-contact{right:0;width:100%;max-width:450px}}
/* Decorative glows stay inside the section at every viewport width. */
.hero:before{right:0}.contact-section:before{inset:0}
.game-dialogue-box:after{content:'';position:absolute;right:32px;top:0;width:130px;height:14px;pointer-events:none;background-image:radial-gradient(#f3a4bd88 1px,transparent 1px);background-size:6px 6px;mask-image:linear-gradient(90deg,transparent,#000)}
.skill-card:before{content:'';position:absolute;right:28px;top:20px;width:72px;height:30px;pointer-events:none;background-image:radial-gradient(#e8a3c139 .8px,transparent .8px);background-size:6px 6px;mask-image:linear-gradient(90deg,transparent,#000)}

/* Project calligraphy marks: transparent artwork alongside accessible text titles. */
.experience-company{align-items:center;justify-content:space-between;gap:16px 24px;min-height:92px}
.experience-project-logo{display:block;flex:0 0 auto;object-fit:contain;object-position:right center;width:210px;height:88px;background:transparent}
.experience-project-logo--jianlai{width:140px;height:98px}
@media(max-width:1000px){.experience-project-logo{width:180px;height:76px}.experience-project-logo--jianlai{width:120px;height:85px}}
@media(max-width:720px){.experience-company{gap:12px 18px;min-height:0}.experience-company h3{font-size:24px}.experience-project-logo{width:156px;height:62px}.experience-project-logo--jianlai{width:94px;height:67px}}
@media(max-width:380px){.experience-company h3{font-size:22px}.experience-project-logo{width:136px;height:54px}.experience-project-logo--jianlai{width:82px;height:58px}}

/* V3.1: technical responsibilities remain fully visible, separated into readable paragraphs. */
.experience-content{min-width:0}.experience-details>div>div{min-width:0}.experience-details h5{overflow-wrap:anywhere;line-height:1.75;max-width:48em}.experience-details p{overflow-wrap:anywhere}.experience-details p+p{margin-top:14px}.experience-details p:last-child{margin-bottom:0}