:root{--bg:#ffffff;--fg:#111111;--muted:#6b7280;--line:#e5e7eb}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Helvetica,Arial,sans-serif;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;font-weight:400}

.banner{position:relative;min-height:100vh;overflow:hidden}
.banner-background{position:absolute;top:0;left:0;width:100%;height:120%;background-image:url('public/style/banner.jpg');background-size:cover;background-position:center;background-attachment:fixed;z-index:3;mix-blend-mode:multiply}
.banner-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:100%;height:100vh;gap:0;opacity:1}
.banner-cell{position:relative;overflow:hidden;width:100%;height:100%}
.banner-cell:nth-child(1){filter:hue-rotate(90deg) saturate(3) invert(1)}
.banner-cell:nth-child(2){filter:hue-rotate(180deg) saturate(3) invert(1)}
.banner-cell:nth-child(3) .banner-slider{filter:hue-rotate(0deg) saturate(3) invert(1)}
.banner-cell:nth-child(4){filter:hue-rotate(270deg) saturate(3) invert(1)}
.banner-slider{position:absolute;top:0;left:0;width:100%;height:100%}
.banner-slider img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;opacity:0;visibility:hidden;pointer-events:none}
.banner-slider img.loaded{opacity:1;visibility:visible;pointer-events:auto}
.banner-cell:nth-child(1) .banner-slider img:nth-child(1){animation:slide1 30s infinite}
.banner-cell:nth-child(1) .banner-slider img:nth-child(2){animation:slide1 30s infinite 5s}
.banner-cell:nth-child(1) .banner-slider img:nth-child(3){animation:slide1 30s infinite 11s}
.banner-cell:nth-child(1) .banner-slider img:nth-child(4){animation:slide1 30s infinite 17s}
.banner-cell:nth-child(1) .banner-slider img:nth-child(5){animation:slide1 30s infinite 23s}
.banner-cell:nth-child(2) .banner-slider img:nth-child(1){opacity:1;animation:slide2 30 infinite}
.banner-cell:nth-child(2) .banner-slider img:nth-child(2){animation:slide2 30s infinite 6s}
.banner-cell:nth-child(2) .banner-slider img:nth-child(3){animation:slide2 30s infinite 12s}
.banner-cell:nth-child(2) .banner-slider img:nth-child(4){animation:slide2 30s infinite 18s}
.banner-cell:nth-child(2) .banner-slider img:nth-child(5){animation:slide2 30s infinite 24s}
.banner-cell:nth-child(3) .banner-slider img:nth-child(1){opacity:1;animation:slide3 30s infinite}
.banner-cell:nth-child(3) .banner-slider img:nth-child(2){animation:slide3 30s infinite 4s}
.banner-cell:nth-child(3) .banner-slider img:nth-child(3){animation:slide3 30s infinite 10s}
.banner-cell:nth-child(3) .banner-slider img:nth-child(4){animation:slide3 30s infinite 16s}
.banner-cell:nth-child(3) .banner-slider img:nth-child(5){animation:slide3 30s infinite 22s}
.banner-cell:nth-child(4) .banner-slider img:nth-child(1){opacity:1;animation:slide4 30s infinite}
.banner-cell:nth-child(4) .banner-slider img:nth-child(2){animation:slide4 30s infinite 3s}
.banner-cell:nth-child(4) .banner-slider img:nth-child(3){animation:slide4 30s infinite 9s}
.banner-cell:nth-child(4) .banner-slider img:nth-child(4){animation:slide4 30s infinite 21s}
.banner-cell:nth-child(4) .banner-slider img:nth-child(5){animation:slide4 30s infinite 27s}
@keyframes slide1{0%,6.66%{opacity:1}6.67%,100%{opacity:0}}
@keyframes slide2{0%,6.66%{opacity:1}6.67%,100%{opacity:0}}
@keyframes slide3{0%,6.66%{opacity:1}6.67%,100%{opacity:0}}
@keyframes slide4{0%,4.35%{opacity:1}4.36%,100%{opacity:0}}
.banner-content{position:absolute;top:0;left:0;z-index:4;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:80px 20px;pointer-events:none}
.profile{display:flex;gap:20px;align-items:center;pointer-events:auto;filter:none}
.avatar{width:120px;height:120px;object-fit:cover;filter:none}
.identity{display:flex;flex-direction:column;gap:6px}
.name{margin:0;font-size:32px;line-height:1.2;font-family:Helvetica,Arial,sans-serif;font-weight:700;font-style:italic;color:#ffffff;text-shadow:0 2px 4px rgb(255, 0, 217),0 0 10px rgba(255,0,255,0.3)}
.meta{margin:0;color:var(--muted);font-size:14px}
.bio{margin:2px 0 0;font-size:14px;color:var(--fg)}

.main-nav{border-bottom:1px solid var(--line)}
.nav-container{max-width:1120px;margin:0 auto;padding:0 20px;display:flex;gap:32px}
.nav-item{padding:16px 0;color:var(--muted);text-decoration:none;font-size:14px;border-bottom:2px solid transparent}
.nav-item:hover{color:var(--fg)}
.nav-item.active{color:var(--fg);border-bottom-color:var(--fg)}

main{padding:36px 20px}
.content-section{display:none;position:relative}
.content-section.active{display:block}
.detail-blank{position:absolute;top:0;left:0;width:100%;min-height:100vh;background:#fff;z-index:10;padding:36px 20px}
.return-button{font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;color:var(--fg);background:transparent;border:none;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0;margin:0 0 20px 0;display:block}
.return-button:hover{color:var(--muted)}
.gallery-container{position:relative;width:100%;min-height:100vh;padding:80px 20px}
.gallery-img{object-fit:cover;box-shadow:0 4px 12px rgba(0,0,0,0.15);transition:transform 0.3s ease}
.gallery-img:hover{transform:scale(1.05) rotate(0deg)!important;z-index:1}
.detail-content{display:flex;flex-direction:column;width:100%}
.abstract{width:100%;padding:0 0 32px 0;max-width:1120px;margin:0 auto}
.abstract-text{font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;color:var(--fg);line-height:1.6;margin:0}
.detail-images{display:flex;flex-direction:column;width:100%;margin:0;padding:0}
.detail-images img,.detail-images video,.detail-images iframe{width:100%;display:block;margin:0;padding:0}
.detail-images img{opacity:0;transition:opacity .2s ease;content-visibility:auto;contain-intrinsic-size: 800px 600px}
.detail-images img.loaded{opacity:1}
.detail-images iframe{aspect-ratio:16/9;height:auto;min-height:400px;max-width:100%}
.video-note{font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;color:var(--fg);margin:0 0 20px 0;max-width:1120px;margin-left:auto;margin-right:auto;padding:0 20px}

/* 移动端优化：避免 fixed 背景导致重绘卡顿 */
@media (max-width: 768px){
	.banner-background{background-attachment: scroll}
}
.detail-images video{background:#000;margin-bottom:20px}
.detail-images iframe{min-height:100vh;background:#fff}
.works{max-width:1120px;margin:0 auto}
.section-title{margin:0 0 12px;font-size:14px;font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.list{display:flex;flex-direction:column;gap:24px}

.project-group{margin-bottom:20px}
.project-group:last-of-type{margin-bottom:0}

.work{margin:0;background:#fff;display:flex;gap:24px;padding:8px 0}
.work .media{flex:0 0 260px;display:flex;align-items:center;justify-content:flex-start}
.work .media img,.work .media video{display:block;width:100%;height:200px;object-fit:cover}
.work .media video{background:#000}
.project-sub .media{cursor:pointer}
.gray-placeholder{width:100%;height:200px;background-color:#d3d3d3}
.work .content{flex:1 1 auto;display:flex;flex-direction:column;gap:8px;justify-content:center}
.work .content a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.work h3{margin:0;font-size:16px;font-weight:400}
.work p{margin:0;color:var(--muted);font-size:14px}
.project-main h3{font-size:17px;font-weight:400}
.project-main p{font-size:14px}
.work .detail{width:max-content;color:inherit;text-decoration:underline;text-underline-offset:3px}

.project-main{cursor:pointer;user-select:none}
.project-main h3{display:flex;align-items:center;gap:8px}
.project-main h3::before{content:"▼";font-size:12px;color:var(--muted);width:20px;text-align:center}
.project-main.collapsed h3::before{content:"▶";}
.project-main.collapsed + .sub-projects{display:none}
.project-main .content a{pointer-events:auto;cursor:pointer}

.sub-projects{display:flex;flex-direction:column;gap:16px;margin-top:12px;margin-left:88px}
.project-sub .media{flex:0 0 200px}
.project-sub .media img,.project-sub .media .gray-placeholder{height:140px}
.project-sub .media .gray-placeholder{background-color:#d3d3d3}
.project-sub h3{font-size:14px;font-weight:400}
.project-sub p{font-size:12px}

@media (min-width:640px){
.avatar{width:140px;height:140px}
.name{font-size:40px;font-weight:900;font-style:italic}
.work .media{flex-basis:300px}
.work .media img,.work .media video{height:180px}
.project-sub .media{flex-basis:240px}
.project-sub .media img,.project-sub .media video,.project-sub .media .gray-placeholder{height:130px}
}

@media (min-width:1024px){
.avatar{width:160px;height:160px}
.name{font-size:48px;font-weight:700;font-style:italic}
.work .media{flex-basis:360px}
.work .media img,.work .media video{height:200px}
.project-sub .media{flex-basis:280px}
.project-sub .media img,.project-sub .media video,.project-sub .media .gray-placeholder{height:150px}
}

/* Mobile-specific performance optimizations */
@media (max-width: 639px){
	.banner{min-height:60vh}
	.banner-grid{height:60vh}
	.banner-cell{content-visibility:auto;contain:paint}
	.banner-slider{will-change:opacity}
}

.about-me{max-width:1120px;margin:0 auto}
.about-content{display:flex;flex-direction:column;gap:32px}
.email{margin:0;font-size:14px;font-weight:400}
.email a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.site-footer{max-width:1120px;margin:32px auto 48px;padding:0 20px}
.site-footer p{margin:12px 0;color:var(--muted);font-size:13px;text-align:right}