:root{color-scheme:dark;--bg:#0b110e;--text:#f0f5f5;--muted:#d0dadd;--accent:#19c7d8;--accent-light:#6fe7f0;--line:rgba(210,221,196,.17)}*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-color:#73796c #101712}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-weight:400}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:7px}button{border:0;background:none}::selection{background:var(--accent);color:var(--bg)}.nav{position:absolute;inset:0 0 auto;z-index:10;height:100px;padding:24px 5.3%;display:flex;justify-content:space-between;align-items:flex-start}.brand{font-size:20px;line-height:1.3}.en{display:block;font-size:12px;color:var(--muted);margin-top:4px}.nav-center{display:flex;gap:30px;position:absolute;left:50%;transform:translateX(-50%);padding-top:4px}.nav-center a{position:relative;font-size:16px;color:var(--muted)}.nav-center a:hover{color:var(--text)}.nav-center a.active:after{content:"";position:absolute;bottom:-24px;left:50%;width:7px;height:7px;border-radius:50%;background:var(--accent)}.contact-button{display:flex;align-items:center;gap:17px;background:var(--accent);color:#052a30;padding:10px 24px;border-radius:6px;text-align:center;font-size:16px;line-height:1.1}.contact-button .en{color:#124c55;font-size:11px;margin-top:2px}.icon{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.hero{height:100svh;min-height:760px;position:relative;overflow:hidden;background:var(--bg)}.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}.hero:after,.contact:after{content:"";position:absolute;inset:0;background:rgba(5,12,8,.12);pointer-events:none}.hero-name{position:absolute;top:13.5%;left:50%;transform:translateX(-50%);z-index:1;text-align:center;white-space:nowrap}.hero-name h1{font-size:clamp(130px,13vw,260px);font-weight:500;line-height:1.12;letter-spacing:.03em;margin:0}.hero-name p{font-size:clamp(25px,2.1vw,42px);color:var(--accent);margin:8px 0 0}.side{position:absolute;z-index:1;top:26%;font-size:18px;line-height:1.5;color:#b1b5a4}.side.left{left:7.4%}.side.right{right:7.4%}.side i,.stat:after,.contact-item:after,.thanks:after{display:block;width:36px;height:1px;background:var(--accent);content:""}.side i{margin:clamp(55px,11vh,115px) 0}.side .en{font-size:14px}.hero-bottom{position:absolute;z-index:1;left:5.3%;right:5.3%;bottom:27px}.role{text-align:center;margin-bottom:24px}.role h2{font-size:clamp(30px,3.4vw,66px);font-weight:400;line-height:1.2;margin:0 0 16px}.role p{font-size:14px;letter-spacing:.27em;color:var(--muted);margin:0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.stat strong{display:block;font-size:clamp(30px,2.5vw,50px);letter-spacing:.02em;font-weight:600;margin-bottom:7px}.stat span{font-size:14px;color:var(--muted)}.stat small{display:block;font-size:11px;letter-spacing:.08em;margin-top:5px;color:var(--muted)}.stat:after{margin-top:24px}.works{height:100svh;min-height:850px;position:relative;overflow:hidden;background:url('assets/page5.png') center/cover}.work-head{position:relative;padding:5vh 6.9% 0;z-index:3;pointer-events:none}.work-head h2{font-size:clamp(36px,3.1vw,60px);margin:0 0 10px;font-weight:600;color:#e5e9dc}.work-head>p{font-size:18px;color:var(--muted);margin:0}.category-info{display:flex;gap:40px;margin-top:40px;max-width:760px}.category-num{font-size:14px;color:var(--accent);padding-top:6px}.category-info h3{font-size:25px;line-height:1.3;margin:0 0 4px;font-weight:550}.category-info .en{font-size:13px}.category-info p{font-size:14px;line-height:1.7;color:var(--muted);margin:10px 0 0}.category-info .description-en{font-size:13px}.deck{position:absolute;inset:35% 0 15%;perspective:1500px;touch-action:pan-y;cursor:grab}.deck:active{cursor:grabbing}.folder{--x:0;position:absolute;top:25%;left:50%;width:150px;height:240px;border:1px solid #646e5a80;border-radius:12px;background:linear-gradient(135deg,#8a97805c,#4b574342);backdrop-filter:blur(10px);box-shadow:0 0 0 1px #b7c3a914 inset,0 14px 40px #0003;padding:13px;text-align:left;transform:translateX(calc(-50% + var(--x))) translateY(var(--y)) scale(var(--scale));opacity:var(--opacity);z-index:var(--z);transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .5s,border-color .3s;will-change:transform}.folder:before{content:attr(data-category);position:absolute;top:-24px;left:15px;height:25px;width:75px;border:1px solid #707a6780;border-radius:10px 10px 0 0;background:#85927b45;padding:6px 12px;font-size:11px;box-sizing:border-box;color:#b5bcac}.folder.active{border-color:#a6b19799}.folder:hover{border-color:var(--accent)}.cover{position:relative;width:100%;height:148px;border-radius:7px;overflow:hidden;background:#182119}.cover img{position:absolute;max-width:none;pointer-events:none;width:var(--sprite-w);height:var(--sprite-h);left:var(--sprite-x);top:var(--sprite-y)}.file{position:absolute;right:6px;top:5px;font-size:9px;color:#cfd4c1a0}.card-label{display:flex;gap:7px;margin-top:11px;font-size:12px;line-height:1.4}.card-label b{color:var(--accent);font-weight:400;font-size:11px}.card-label .en{font-size:10px;line-height:1.3;margin-top:5px}.selection{position:absolute;left:50%;top:73%;width:290px;transform:translateX(-50%);pointer-events:none}.selection p{font-size:13px;color:var(--muted);margin:0 0 6px}.selection h4{font-size:19px;margin:6px 0;color:#e0e5d8}.selection .en{font-size:13px}.selection button{pointer-events:auto;color:var(--accent);font-size:26px;padding:7px 0}.deck-controls{position:absolute;left:6.9%;right:6.9%;top:69%;display:flex;justify-content:space-between;pointer-events:none}.deck-controls button{pointer-events:auto;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#0b110e8c;color:var(--accent);font-size:20px}.tabs{position:absolute;bottom:6%;left:16.3%;right:16.3%;display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.tab{text-align:left;border-right:1px solid var(--line);padding:12px 7px 13px;min-width:0;color:#d4d9ca}.tab:last-child{border:0}.tab .num{display:block;color:#616b5d;font-size:13px;margin-bottom:9px}.tab strong{font-size:14px;font-weight:400;white-space:nowrap}.tab .en{font-size:10px;margin-top:7px;white-space:nowrap}.tab[aria-selected=true] .num{color:var(--accent)}.tab:hover{background:#19c7d814}.contact{height:100svh;min-height:800px;position:relative}.contact-grid{position:absolute;z-index:1;inset:26% 5.3% 13%;display:flex;justify-content:space-between}.contact-column{width:360px;max-width:40%;display:flex;flex-direction:column;gap:40px}.contact-item{position:relative;padding-left:42px}.contact-item .icon{position:absolute;left:0;top:2px;color:var(--accent)}.contact-item h3{font-size:18px;font-weight:400;margin:0}.contact-item .en{font-size:12px}.contact-value{display:block;font-size:clamp(22px,1.4vw,29px);margin-top:14px;line-height:1.35;overflow-wrap:anywhere}.contact-value:hover{color:var(--accent)}.contact-item:after{margin-top:40px;margin-left:-42px}.contact-item:last-child:after{display:none}.available p{margin:14px 0 0;font-size:25px}.available p .en{font-size:14px}.footer{position:absolute;z-index:1;bottom:24px;left:5.3%;right:5.3%;border-top:1px solid var(--line);padding-top:24px;display:flex;align-items:flex-end;justify-content:space-between;font-size:14px;color:var(--muted)}.footer-center{color:var(--accent);letter-spacing:.02em}.thanks{font-size:13px}.thanks:after{margin-top:24px}.modal{color:var(--text);background:#101912;border:1px solid #667255;border-radius:12px;padding:32px;max-width:540px;width:calc(100% - 40px);box-shadow:0 25px 100px #000b}.modal::backdrop{background:#020803dd;backdrop-filter:blur(8px)}.modal-close{position:absolute;right:16px;top:12px;font-size:28px}.modal .cover{height:330px;max-width:280px;margin:12px auto 25px}.modal h2{font-size:25px}.modal p{color:var(--muted);line-height:1.7}.modal a{display:inline-block;border-bottom:1px solid var(--accent);padding:10px 0;color:var(--accent)}.toast{position:fixed;z-index:30;bottom:25px;left:50%;transform:translateX(-50%);padding:12px 24px;border:1px solid #72815f;border-radius:6px;background:#162015;color:var(--accent)}[hidden]{display:none!important}@media(min-width:1800px){.folder{width:175px;height:280px}.cover{height:180px}.card-label{font-size:14px}.card-label .en{font-size:12px}.selection{top:73%;}.category-info{max-width:800px}.category-info h3{font-size:28px}}@media(max-width:900px){.hero{min-height:740px}.nav{padding:22px 5%;height:80px}.brand{font-size:18px}.nav-center{gap:18px}.contact-button{padding:10px 12px}.hero-name{top:19%}.hero-name h1{font-size:24vw}.side{font-size:14px;top:43%}.side.left{left:6%}.side.right{right:6%}.side i{margin:35px 0}.hero-bottom{bottom:28px}.role h2{font-size:32px}.role p{font-size:10px;letter-spacing:.15em}.stats{gap:16px}.stat strong{font-size:30px}.stat span{font-size:12px}.stat small{font-size:9px;line-height:1.4}.works{min-height:900px}.work-head{padding:45px 6% 0}.work-head h2{font-size:38px}.category-info{gap:20px;margin-top:30px;max-width:620px}.category-info h3{font-size:22px}.category-info p{font-size:13px}.deck{top:39%;bottom:15%}.folder{width:145px;height:236px}.selection{top:73%;width:245px}.tabs{left:6%;right:6%;bottom:4%;overflow-x:auto;grid-template-columns:repeat(8,minmax(100px,1fr))}.contact-column{width:300px}.contact-value{font-size:21px}.contact-grid{inset:23% 6% 15%}.contact-item{padding-left:32px}.contact-item:after{margin-left:-32px}.available p{font-size:21px}.footer-center{display:none}}@media(max-width:560px){.nav-center{left:auto;right:5%;transform:none;gap:19px}.contact-button{display:none}.hero-name{top:18%}.hero-name h1{font-size:31vw}.hero-name p{font-size:25px}.hero .scene{object-position:50% center}.side{top:42%;font-size:12px}.side i{margin:34px 0}.side .en{font-size:11px}.hero-bottom{bottom:24px}.role{margin-bottom:25px}.role h2{font-size:26px;margin-bottom:12px}.role p{font-size:9px;letter-spacing:.1em}.stats{grid-template-columns:repeat(2,1fr);row-gap:17px}.stat strong{font-size:27px;margin-bottom:3px}.stat:after{margin-top:12px;width:24px}.stat small{font-size:8px}.work-head h2{font-size:32px}.work-head>p{font-size:14px}.works{min-height:890px}.category-info{gap:14px;margin-top:25px}.category-info h3{font-size:19px}.category-info .en{font-size:11px}.category-info p{font-size:12px;line-height:1.6}.category-info .description-en{font-size:11px}.deck{top:38%;bottom:18%}.deck-controls{top:75%}.selection{top:74%;width:220px}.selection h4{font-size:17px}.selection p{font-size:11px}.selection .en{font-size:11px}.tabs{bottom:3%}.tab strong{font-size:13px}.contact{height:auto;min-height:1060px}.contact .scene{object-position:58% center}.contact:after{background:#08100965}.contact-grid{position:relative;inset:auto;padding:110px 7% 140px;gap:45px;flex-direction:column}.contact-column{max-width:none;width:100%;gap:28px}.contact-column:last-child{align-self:flex-end;width:80%}.contact-item:after{margin-top:25px}.contact-item h3{font-size:16px}.contact-value{font-size:22px}.contact-item:last-child:after{display:block}.footer{font-size:11px;bottom:24px;align-items:flex-start}.thanks{font-size:11px}.thanks:after{margin-top:17px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
.selection{z-index:120}.deck-controls{z-index:130}.tabs{z-index:140}.deck-controls button:disabled{opacity:.3;cursor:default}.folder{overflow:visible}.card-label>span{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.works{min-height:950px}.selection{top:70%;width:340px}.selection p{font-size:12px}.selection h4{font-size:18px}@media(max-width:560px){.works{min-height:980px}.selection{top:70%;width:240px}.selection p{font-size:11px}.selection h4{font-size:17px}.deck{top:37%}}
@media(min-width:561px){.contact{min-height:930px}}
.selection{left:calc(50% - 85px);width:265px;transform:none}@media(min-width:901px){.works{min-height:1050px}}@media(max-width:560px){.selection{left:calc(50% - 82px);width:230px}}

.hero .side.right i{margin:5vh 0 8vh}.category-empty{position:absolute;top:55%;left:0;right:0;text-align:center;color:var(--muted);font-size:16px}.contact-item h3{min-height:44px}@media(max-width:560px){.hero .side.right{top:36%}.hero .side.right i{margin:25px 0}.hero .scene{object-position:72% center}.works{background-position:62% center}.contact .scene{object-position:60% center}}

/* Four centered categories and centered project captions. */
.tabs{left:50%;right:auto;transform:translateX(-50%);width:min(900px,86%);grid-template-columns:repeat(4,minmax(0,1fr))}.tab{text-align:center}.tab strong,.tab .en{white-space:normal}.selection{left:50%;transform:translateX(-50%);text-align:center;width:min(440px,80%)}.selection a{display:inline-block;pointer-events:auto;color:var(--accent);font-size:26px;padding:7px 12px}.card-label{justify-content:center;text-align:center}.text-cover{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px;text-align:center;border:1px solid var(--line);background:linear-gradient(145deg,#263329,#111b15);gap:18px}.text-cover span{font-size:16px;line-height:1.4;overflow-wrap:anywhere}.text-cover small{font-size:11px;color:var(--muted)}a.folder{display:block}.selection h4{overflow-wrap:anywhere}@media(max-width:560px){.tabs{width:94%;left:50%;right:auto;grid-template-columns:repeat(4,minmax(0,1fr))}.tab{padding:12px 3px}.tab strong{font-size:12px}.tab .en{font-size:9px}.selection{width:80%;left:50%}.selection h4{font-size:16px}}

.image-cover img{inset:0;width:100%;height:100%;object-fit:cover}.portrait-cover{aspect-ratio:1;height:auto;border-radius:50%}.folder.active{box-shadow:0 18px 45px #0007,0 0 0 1px #19c7d855;filter:brightness(1.12)}.document-link:hover{color:var(--accent)}.folder{transition:transform .45s cubic-bezier(.22,.8,.22,1),opacity .3s,border-color .3s,filter .3s}.card-label>span{-webkit-line-clamp:3}

/* Cyan accents and localized, light-touch photographic contrast. */
.hero,.works,.contact{isolation:isolate}
.hero:after{z-index:0;background:linear-gradient(180deg,rgba(4,15,23,.20),transparent 23%,transparent 54%,rgba(4,15,23,.26)),linear-gradient(90deg,rgba(4,15,23,.18),transparent 28%,transparent 74%,rgba(4,15,23,.18))}
.works:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 24% 17%,rgba(4,15,23,.28),transparent 60%),linear-gradient(0deg,rgba(4,15,23,.24),transparent 40%)}
.contact:after{z-index:0;background:linear-gradient(90deg,rgba(4,15,23,.26),transparent 38%,transparent 61%,rgba(4,15,23,.26)),linear-gradient(0deg,rgba(4,15,23,.20),transparent 22%)}
.nav,.hero-name,.side,.hero-bottom,.work-head,.selection,.tabs,.contact-grid,.footer,.card-label{text-shadow:0 1px 5px rgba(0,12,20,.22)}
.side,.nav-center a,.tab,.work-head h2,.selection h4{color:var(--text)}
.nav-center a.active,.nav-center a.active .en,.tab[aria-selected=true] .num,.tab[aria-selected=true] strong{color:var(--accent)}
.nav-center a:hover,.document-link:hover,.contact-value:hover,.selection a:hover,.deck-controls button:hover:not(:disabled){color:var(--accent-light)}
.contact-button{text-shadow:none;transition:background .2s}.contact-button:hover,.contact-button:focus-visible{background:var(--accent-light)}
.folder:hover,.folder.active{border-color:var(--accent)}.folder.active .card-label b{color:var(--accent-light)}
.card-label>span{display:block;overflow:visible;-webkit-line-clamp:unset}.card-label .en{font-size:11px;line-height:1.35;color:#d5e3e6;margin-top:6px}.folder{height:300px}.cover{height:148px}.portrait-cover{height:auto}.folder .card-label{font-size:12px}.folder.active{filter:none}
@media(min-width:1800px){.folder{height:330px}.cover{height:180px}.portrait-cover{height:auto}}
@media(max-width:560px){.folder{height:290px}.card-label .en{font-size:10px}.works{min-height:1100px}.deck{top:36%;bottom:22%}.selection{top:72%}.contact:after{background:linear-gradient(90deg,rgba(4,15,23,.24),rgba(4,15,23,.04) 55%,rgba(4,15,23,.18)),linear-gradient(0deg,rgba(4,15,23,.20),transparent 20%)}}

/* Reference signature and hand-drawn linework. */
:root{--accent:#22c7d9}
.hero-signature{display:block;width:clamp(230px,23vw,420px);height:auto;margin:-14px auto 0;transform:translateX(5%)}
.hero-lineart{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.contact:after{background:linear-gradient(90deg,rgba(4,15,23,.66),rgba(4,15,23,.10) 45%,rgba(4,15,23,.16) 58%,rgba(4,15,23,.65)),linear-gradient(0deg,rgba(4,15,23,.58),transparent 30%)}
@media(max-width:560px){.hero-signature{width:58vw;margin:-4px auto 0}.hero-lineart{display:none}.contact:after{background:rgba(4,15,23,.58)}}

/* Soft, text-local scrims preserve the bright film photography. */
:root{--text:#f7f9f8;--muted:#e5ebeb}
.hero:after,.works:before,.contact:after{background:none}
.nav,.hero-name,.side,.hero-bottom,.work-head,.selection,.tabs,.contact-column,.footer{isolation:isolate}
.nav:before,.hero-name:before,.side:before,.hero-bottom:before,.work-head:before,.selection:before,.tabs:before,.contact-column:before,.footer:before{
 content:"";position:absolute;z-index:-1;pointer-events:none;
 inset:-30px -35px;
 background:radial-gradient(ellipse at center,rgba(9,17,21,.30) 0%,rgba(9,17,21,.18) 45%,transparent 74%);
}
.nav:before{inset:0 0 -35px;background:linear-gradient(180deg,rgba(9,17,21,.24),rgba(9,17,21,.10) 55%,transparent)}
.hero-name:before{inset:-25% -30%;background:radial-gradient(ellipse,rgba(9,17,21,.24),rgba(9,17,21,.12) 48%,transparent 72%)}
.hero-bottom:before{inset:-45px -6vw -30px;background:linear-gradient(0deg,rgba(9,17,21,.34),rgba(9,17,21,.22) 65%,transparent)}
.work-head:before{inset:0 auto -55px 0;width:min(100%,1050px);background:radial-gradient(ellipse at 36% 40%,rgba(9,17,21,.36),rgba(9,17,21,.18) 52%,transparent 78%)}
.selection:before,.tabs:before{inset:-25px -35px;background:radial-gradient(ellipse,rgba(9,17,21,.36),rgba(9,17,21,.16) 55%,transparent 76%)}
.contact-column{position:relative}
.contact-column:before{inset:-55px -60px;background:radial-gradient(ellipse,rgba(9,17,21,.40) 5%,rgba(9,17,21,.26) 48%,transparent 75%)}
.footer:before{inset:-30px -5vw -25px;background:linear-gradient(0deg,rgba(9,17,21,.30),transparent)}
.nav,.hero-name,.side,.hero-bottom,.work-head,.selection,.tabs,.contact-grid,.footer,.card-label{text-shadow:0 1px 3px rgba(0,10,15,.45),0 2px 10px rgba(0,10,15,.16)}
.card-label .en{color:#e5ebeb}
.tab .num{color:#c4d0cf}
@media(max-width:560px){
 .hero-name:before{inset:-20% -20%}
 .side:before{inset:-20px -22px}
 .hero-bottom:before{inset:-35px -6vw -25px}
 .work-head:before{width:100%;inset:0 0 -40px}
 .contact-column:before{inset:-35px -25px}
 .selection:before,.tabs:before{inset:-20px -12px}
}

.contact{overflow:clip}