@charset "UTF-8";
:root{color-scheme:dark;--panel:#1f1f1f;--text:#eee;font-family:"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;color:var(--text);background:linear-gradient(#262626 0,#222 44%,#080808 90%);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #c6c6c6;outline-offset:5px}button:disabled{opacity:.3;cursor:default}h1,h2,h3,p{margin:0}img{max-width:100%;display:block}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linejoin:round;stroke-linecap:round;flex-shrink:0}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;left:15px;top:-80px;z-index:100;background:#ddd;color:#111;padding:10px}.skip-link:focus{top:15px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}

/* Desktop geometry follows the supplied 2558 px design canvas. */
html{scrollbar-gutter:stable}
@font-face{font-family:PortfolioSans;src:url("assets/fonts/portfolio-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:PortfolioSans;src:url("assets/fonts/portfolio-bold.woff2") format("woff2");font-weight:600 900;font-display:swap}
@font-face{font-family:PortfolioFullSans;src:url("assets/fonts/portfolio-regular-full.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:PortfolioFullSans;src:url("assets/fonts/portfolio-bold-full.otf") format("opentype");font-weight:600 900;font-display:swap}
:root{font-family:PortfolioSans,PortfolioFullSans,"Source Han Sans CN","Noto Sans SC","Microsoft YaHei",sans-serif;--panel:#1f1f1f;--text:#fefefe}
body{background:#000}#main{max-width:1440px;margin:0 auto;container-type:inline-size}.cover,.page-shell{--u:calc(100cqw / 2558)}
.cover{width:100%;height:calc(1079 * var(--u));overflow:hidden;background:#262626}.cover img{width:100%;height:100%;object-fit:cover}
.page-shell{margin:0;padding:0;background:linear-gradient(#262626 0,#252525 calc(800 * var(--u)),#232323 calc(1800 * var(--u)),#000 calc(4527 * var(--u)))}
.profile-panel{position:relative;margin:calc(-7 * var(--u)) calc(29 * var(--u)) 0;background:var(--panel);border-radius:calc(15 * var(--u));min-height:calc(797 * var(--u));padding:calc(203 * var(--u)) calc(128 * var(--u)) calc(190 * var(--u))}
.avatar{width:calc(328 * var(--u));height:calc(330 * var(--u));position:absolute;left:calc(132 * var(--u));top:calc(-187 * var(--u));border-radius:50%;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}
.name-row{display:flex;align-items:center;gap:calc(26 * var(--u));flex-wrap:wrap}.name-row h1{font-size:calc(100 * var(--u));line-height:1.2;font-weight:700;letter-spacing:0}.name-row>span{font-size:calc(50 * var(--u));line-height:1.2;font-weight:400}
.identity>p{font-size:calc(38.8889 * var(--u));line-height:calc(50 * var(--u))}.identity>p#headline{margin-top:calc(14 * var(--u))}.identity .location{font-size:calc(33.3333 * var(--u));margin-top:calc(70 * var(--u));line-height:calc(50 * var(--u));display:flex;gap:calc(7 * var(--u))}
.profile-actions{display:flex;gap:calc(33 * var(--u));position:absolute;left:calc(133 * var(--u));bottom:calc(44 * var(--u))}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:36px;background:#383838;border-radius:6px;padding:3px 17px;font-size:17px;line-height:1.65;border:1px solid transparent;transition:background .18s,border-color .18s}.button:hover{background:#484848}.button-outline{background:transparent;border-color:#454545}
.profile-actions .button{font-size:calc(38.8889 * var(--u));height:calc(71 * var(--u));min-height:0;padding:0;border:0;border-radius:calc(15 * var(--u))}.profile-actions button{width:calc(201 * var(--u))}.profile-actions a{width:calc(252 * var(--u))}
.about-panel{margin:calc(31 * var(--u)) calc(30 * var(--u)) 0;background:var(--panel);border-radius:calc(15 * var(--u));min-height:calc(1013 * var(--u));padding:calc(44 * var(--u)) calc(126 * var(--u)) calc(65 * var(--u))}.about-panel h2{font-size:calc(50 * var(--u));font-weight:700;line-height:calc(70 * var(--u));margin-bottom:calc(66 * var(--u))}.about-panel>p,.experience{font-size:calc(33.3333 * var(--u));line-height:calc(50 * var(--u));color:#eee}.experience{list-style:none;margin:0;padding:0}.experience li::before{content:"-"}
.portfolio-section{padding:calc(75 * var(--u)) calc(69 * var(--u)) 0;scroll-margin-top:24px}.portfolio-section>h2{font-size:calc(66.6667 * var(--u));line-height:calc(90 * var(--u));font-weight:700}.filter-list{display:flex;flex-wrap:wrap;gap:calc(26 * var(--u));margin:calc(106 * var(--u)) 0 calc(74 * var(--u))}.filter-list button{font-size:calc(38.8889 * var(--u));background:transparent;border-radius:calc(15 * var(--u));padding:0 calc(25 * var(--u));height:calc(71 * var(--u));line-height:1;color:#dedede;transition:background .18s}.filter-list button:hover{background:#2c2c2c}.filter-list button[aria-pressed=true]{background:#383838;color:#eee}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(31 * var(--u)) calc(47 * var(--u))}.work-card{background:#1f1f1f;border:0;border-radius:calc(15 * var(--u));text-align:left;display:flex;flex-direction:column;width:100%;min-width:0;padding:0;overflow:hidden;transition:transform .2s,box-shadow .2s}.work-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px #555}.work-cover{width:100%;background:#242424;position:relative;aspect-ratio:775/522}.work-cover>img{width:100%;height:100%;object-fit:contain}.play-badge{position:absolute;right:18px;bottom:17px;display:grid;place-content:center;width:30px;height:30px;border:1px solid #9997;background:#101010bb;border-radius:50%;font-size:10px}
.card-content{padding:calc(16 * var(--u)) calc(24 * var(--u)) calc(42 * var(--u));display:flex;flex-direction:column;flex:1;min-height:calc(523 * var(--u))}.card-content h3{font-size:calc(44.4444 * var(--u));line-height:calc(66.6667 * var(--u));font-weight:700;overflow-wrap:anywhere}.card-content h3 span{display:block}.card-content h3 span:before{content:"｜";font-weight:400;color:#ddd}.card-content>p{font-size:calc(33.3333 * var(--u));line-height:calc(50 * var(--u));color:#858585;margin:calc(29 * var(--u)) calc(47 * var(--u)) 0;flex:1}.tool-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:19px}.tool-tags span{background:#383838;border-radius:6px;padding:3px 11px;font-size:15px;line-height:1.55;white-space:nowrap;color:#e0e0e0}.work-card .tool-tags{margin:calc(26 * var(--u)) calc(18 * var(--u)) 0;gap:calc(6 * var(--u))}.work-card .tool-tags span{flex:1;text-align:center;font-size:calc(33.3333 * var(--u));line-height:calc(71 * var(--u));padding:0 calc(5 * var(--u));border-radius:calc(15 * var(--u))}
.empty-state{text-align:center;padding:65px 20px 90px;border:1px dashed #404040;border-radius:8px;color:#8f8f8f}.empty-mark{display:block;font-size:40px;color:#666}.empty-state h3{font-size:21px;font-weight:500;color:#cfcfcf;margin:12px 0 7px}.empty-state p{font-size:14px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#757575;font-size:12px;margin:60px calc(69 * var(--u)) 0;padding:22px 0 30px;border-top:1px solid #2d2d2d}footer a:hover{color:#ddd}

dialog{color:var(--text);background:#202020;border:1px solid #414141;padding:0;border-radius:12px;box-shadow:0 20px 100px #0009}dialog::backdrop{background:#080808d9;backdrop-filter:blur(8px)}body:has(dialog[open]){overflow:hidden}.icon-button{width:40px;height:40px;display:inline-grid;place-content:center;flex-shrink:0;background:#303030;border:1px solid #454545;border-radius:50%;color:#ddd;font-size:24px}.icon-button:hover{background:#494949}.contact-dialog{width:min(520px,calc(100vw - 32px));padding:32px}.contact-heading{display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:10px;letter-spacing:2px;color:#888}.contact-heading h2{font-size:29px;margin-top:3px}.contact-intro{margin-top:16px;color:#aaa;font-size:14px}.contact-row{display:flex;align-items:center;gap:14px;margin-top:22px;border:1px solid #3e3e3e;border-radius:8px;padding:17px 14px}.contact-icon{color:#999}.contact-value{min-width:0;flex:1}.contact-value>span{display:block;font-size:11px;color:#8c8c8c;margin-bottom:4px}.contact-value a{font-size:17px;overflow-wrap:anywhere}.copy-button{background:transparent;padding:7px;color:#aaa;display:grid;place-content:center}.copy-button:hover{color:#fff}.copy-button .icon{width:17px;height:17px}.email-button{width:100%;margin-top:25px;min-height:45px;font-size:15px}.project-dialog{width:calc(100vw - 60px);max-width:1320px;height:calc(100dvh - 50px);max-height:calc(100dvh - 50px);overflow:hidden}.project-header{height:84px;border-bottom:1px solid #393939;display:flex;align-items:center;justify-content:space-between;padding:12px 30px;gap:20px;background:#202020}.project-header>div{min-width:0}.project-header span{font-size:10px;color:#939393;letter-spacing:1px}.project-header h2{font-size:22px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-scroll{height:calc(100% - 84px);overflow:auto;scroll-behavior:smooth;overscroll-behavior:contain;scrollbar-color:#555 #202020}.project-overview{max-width:1030px;margin:auto;padding:30px 35px 25px}.project-overview>p:first-child{font-size:24px;line-height:1.5;margin-bottom:12px;color:#ececec}.project-overview>p:nth-child(2){font-size:15px;line-height:1.9;color:#b2b2b2}.project-overview .tool-tags{margin-top:17px}.project-overview .tool-tags span{font-size:12px}.section-nav{position:sticky;top:0;background:#202020f2;backdrop-filter:blur(10px);display:flex;gap:10px;padding:12px 35px;border-top:1px solid #303030;border-bottom:1px solid #383838;z-index:2}.section-nav button{padding:5px 15px;background:#353535;border:1px solid #494949;border-radius:5px;font-size:13px}.section-nav button:hover{background:#484848}.project-section{padding:28px 26px 0;scroll-margin-top:70px}.project-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:0 4px 20px}.project-section-heading h3{font-size:20px;font-weight:550}.project-section-heading>span{font-size:11px;color:#8e8e8e}.document-pages{display:flex;flex-direction:column;align-items:center;gap:20px}.page-figure{margin:0;width:100%;max-width:1180px}.page-image-button{padding:0;display:block;position:relative;background:#292929;cursor:zoom-in;width:100%;border:1px solid #3c3c3c;overflow:hidden;border-radius:3px}.page-image-button>img{width:100%;height:auto;object-fit:contain;min-height:120px}.page-expand{position:absolute;right:14px;bottom:14px;background:#111b;border:1px solid #8886;border-radius:5px;padding:7px 8px;line-height:1;opacity:0;transition:opacity .15s}.page-image-button:hover .page-expand,.page-image-button:focus-visible .page-expand{opacity:1}.page-figure figcaption{font-size:11px;color:#818181;text-align:center;margin-top:8px}.project-video{width:100%;max-height:70dvh;display:block;background:#080808;border:1px solid #404040;border-radius:5px}.video-caption{font-size:12px;color:#999;margin-top:10px}.project-footer{display:flex;justify-content:space-between;gap:15px;padding:35px 30px}.project-footer .button{font-size:13px}.image-dialog{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;background:#111}.image-toolbar{height:67px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 24px;background:#1c1c1c;border-bottom:1px solid #363636;position:relative;z-index:2}.image-toolbar>span{font-size:13px;color:#bbb;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zoom-controls{display:flex;gap:10px;align-items:center}.zoom-controls .icon-button{width:36px;height:36px;font-size:20px}.fit-button{background:transparent;color:#bbb;font-size:12px;padding:5px}.image-stage{height:calc(100dvh - 112px);width:100%;overflow:auto;display:flex;align-items:safe center;justify-content:safe center;overscroll-behavior:contain;padding:18px 65px;scrollbar-color:#555 #151515}.image-stage img{max-width:100%;max-height:100%;width:auto;height:auto;flex:none}.image-stage.is-zoomed{display:block;text-align:center;padding:18px}.image-stage.is-zoomed img{display:inline-block;max-width:none;max-height:none;height:auto}.image-step{position:fixed;top:50%;width:42px;height:50px;border:1px solid #5558;background:#1e1e1ecc;border-radius:6px;display:grid;place-content:center;z-index:2}.image-step:hover{background:#494949}.image-step.previous{left:14px}.image-step.previous svg{transform:rotate(180deg)}.image-step.next{right:14px}.image-tip{height:45px;display:flex;align-items:center;justify-content:center;color:#858585;font-size:11px;background:#1c1c1c;border-top:1px solid #333}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;z-index:9999;max-width:90vw;padding:10px 20px;background:#414141;border:1px solid #666;border-radius:6px;color:#eee;font-size:13px;transition:.2s;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:759px){.cover{height:280px}.page-shell{padding:0 12px}.profile-panel{padding:73px 24px 27px}.avatar{width:130px;height:130px;left:24px;top:-72px}.name-row{gap:10px}.name-row h1{font-size:32px}.name-row>span{font-size:20px}.identity>p{font-size:13px;line-height:1.65}.identity>p#headline{margin-top:10px}.identity .location{margin-top:26px;font-size:12px}.profile-actions{margin-top:30px;gap:12px}.button{font-size:14px;min-height:36px;padding:3px 16px}.about-panel{padding:25px 24px 28px;margin-top:15px}.about-panel h2{font-size:21px;margin-bottom:21px}.about-panel>p,.experience{font-size:13px;line-height:1.9}.experience li{margin-top:9px}.portfolio-section{padding:31px 7px 0}.portfolio-section>h2{font-size:26px}.filter-list{gap:7px;margin:26px 0 27px}.filter-list button{font-size:13px;min-height:32px;padding:3px 10px}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}.card-content h3{font-size:16px}.card-content>p{font-size:12px}.tool-tags{margin-top:15px}.tool-tags span{font-size:11px}.work-cover{padding:19px 7px 11px}footer{margin:40px 7px 0;font-size:10px;padding:20px 0 25px}.project-dialog{width:calc(100vw - 20px);height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);border-radius:9px}.project-header{height:78px;padding:12px 18px;gap:10px}.project-header h2{font-size:16px}.project-header .icon-button{width:34px;height:34px}.project-scroll{height:calc(100% - 78px)}.project-overview{padding:23px 22px}.project-overview>p:first-child{font-size:20px}.project-overview>p:nth-child(2){font-size:13px;line-height:1.85}.section-nav{padding:10px 22px;gap:8px}.section-nav button{font-size:12px;padding:5px 12px}.project-section{padding:24px 12px 0}.project-section-heading{margin-bottom:15px;gap:12px}.project-section-heading h3{font-size:17px}.project-section-heading>span{font-size:9px}.document-pages{gap:15px}.page-figure figcaption{font-size:10px}.project-footer{padding:30px 17px}.project-footer .button{font-size:12px;padding:5px 10px}.contact-dialog{padding:26px 22px}.contact-heading h2{font-size:26px}.contact-row{gap:10px;padding:15px 11px}.contact-value a{font-size:15px}.contact-intro{font-size:13px}.image-toolbar{padding:10px 13px;gap:7px}.image-toolbar>span{font-size:11px;max-width:40%}.zoom-controls{gap:6px}.zoom-controls .icon-button{width:32px;height:32px}.fit-button{font-size:11px}.image-stage{padding:12px 40px}.image-step{width:29px;height:43px}.image-step.previous{left:5px}.image-step.next{right:5px}.image-step .icon{width:17px;height:17px}.image-tip{font-size:9px}.page-expand{opacity:.7;padding:5px;right:8px;bottom:8px}.page-expand .icon{width:16px;height:16px}}
@media(max-width:470px){.cover{height:242px}.avatar{width:118px;height:118px;top:-65px}.profile-panel{padding-top:68px}.name-row h1{font-size:31px}.name-row>span{font-size:19px}.work-grid{grid-template-columns:1fr;gap:20px}.work-cover{padding:24px 14px 16px}.card-content{padding:17px 20px 20px}.card-content h3{font-size:20px}.card-content>p{font-size:14px;line-height:1.75;margin-top:12px}.work-card .tool-tags{margin-top:20px;gap:7px}.work-card .tool-tags span{font-size:14px;padding:4px 10px}.filter-list{gap:4px 7px}.filter-list button{padding:4px 9px;font-size:13px}.about-panel{padding-left:22px;padding-right:22px}.contact-value a{font-size:14px}.laptop-base{height:9px}}
@media(prefers-reduced-motion:reduce){html,.project-scroll{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

@media(max-width:759px){#main{max-width:none}.cover{height:280px}.page-shell{padding:0 12px;background:linear-gradient(#262626,#161616 1800px,#000 3200px)}.profile-panel{margin:-1px 0 0;min-height:0;padding:73px 24px 27px;border-radius:0 0 8px 8px}.avatar{width:130px;height:130px;left:24px;top:-72px}.name-row{gap:10px}.name-row h1{font-size:32px;line-height:1.3}.name-row>span{font-size:20px;line-height:1.3}.identity>p{font-size:13px;line-height:1.65}.identity>p#headline{margin-top:10px}.identity .location{margin-top:26px;font-size:12px;line-height:1.65;gap:3px}.profile-actions{position:static;margin-top:30px;gap:12px}.profile-actions .button{width:auto;min-height:36px;height:auto;padding:3px 16px;border-radius:6px;font-size:14px}.about-panel{min-height:0;margin:15px 0 0;padding:25px 24px 28px;border-radius:8px}.about-panel h2{font-size:21px;line-height:1.5;margin-bottom:21px}.about-panel>p,.experience{font-size:13px;line-height:1.9}.experience li{margin-top:9px}.portfolio-section{padding:31px 7px 0}.portfolio-section>h2{font-size:26px;line-height:1.4}.filter-list{margin:26px 0 27px;gap:7px}.filter-list button{font-size:13px;height:auto;min-height:32px;padding:3px 10px;line-height:1.6;border-radius:6px}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}.work-card{border-radius:6px}.work-cover{padding:0}.card-content{padding:10px 10px 14px;min-height:0}.card-content h3{font-size:16px;line-height:1.6}.card-content>p{font-size:12px;line-height:1.75;margin:12px 6px 0}.work-card .tool-tags{margin:15px 0 0;gap:4px}.work-card .tool-tags span{font-size:11px;line-height:1.6;padding:4px 5px;border-radius:5px}footer{margin:40px 7px 0;font-size:10px;padding:20px 0 25px}}
@media(max-width:470px){.cover{height:242px}.avatar{width:118px;height:118px;top:-65px}.profile-panel{padding-top:68px}.name-row h1{font-size:31px}.name-row>span{font-size:19px}.work-grid{grid-template-columns:1fr;gap:20px}.card-content{padding:13px 15px 20px}.card-content h3{font-size:20px;line-height:1.6}.card-content>p{font-size:14px;line-height:1.75;margin:14px 12px 0}.work-card .tool-tags{margin:20px 0 0;gap:6px}.work-card .tool-tags span{font-size:13px;padding:5px 8px}.filter-list{gap:4px 7px}.filter-list button{padding:4px 9px;font-size:13px}.about-panel{padding-left:22px;padding-right:22px}}