:root{--blue:#2448ec;--ink:#14223a;--muted:#56647b;--line:#dce3ef;--surface:#f4f7fc}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--ink);background:#fff;font-family:Inter,"Microsoft YaHei","PingFang SC",sans-serif;line-height:1.75;font-size:16px}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #7b93ff;outline-offset:5px}header{height:88px;max-width:1320px;margin:auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-weight:700}.monogram{background:var(--blue);color:white;width:32px;height:32px;display:grid;place-items:center;border-radius:8px}.brand-sub{font:12px monospace;color:var(--muted);letter-spacing:1px}nav{display:flex;gap:32px;font-size:14px}nav a:hover{color:var(--blue)}.nav-contact{font-weight:700}main,footer{max-width:1320px;margin:auto}.hero{padding:80px 48px 72px;display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:center}.eyebrow{font-size:13px;letter-spacing:1px;font-weight:600;color:var(--blue)}h1{font-size:clamp(42px,4.8vw,66px);line-height:1.3;letter-spacing:-2px;font-weight:750;margin:25px 0}h1 span{color:var(--blue)}.intro{color:var(--muted);max-width:520px;margin:0 0 28px;line-height:1.95}.actions{display:flex;gap:12px;flex-wrap:wrap}.button{padding:12px 22px;border-radius:7px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:18px;justify-content:center;min-height:48px}.primary{color:white;background:var(--blue);border:1px solid var(--blue)}.primary:hover{background:#1837c7}.secondary{border:1px solid var(--line);background:white}.secondary:hover{background:var(--surface)}.hero-foot{display:flex;gap:22px;margin-top:32px;font-size:12px;color:var(--muted)}.hero-panel{background:#edf2ff;border:1px solid #d5dfff;border-radius:16px;padding:30px}.panel-top{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600}.panel-index{font-family:monospace;color:var(--blue)}.method{margin:26px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.method>div{background:white;padding:20px 16px;border:1px solid #e0e7fa;border-radius:8px}.step-num{color:var(--blue);font:13px monospace}.method h3{margin:13px 0 5px;font-size:19px}.method p{font-size:13px;color:var(--muted);margin:0}.panel-bottom{font-size:14px;color:var(--muted);border-top:1px solid #d5dfff;padding-top:20px}.section{padding:66px 48px;border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:34px}h2{font-size:30px;line-height:1.5;letter-spacing:-.7px;margin:12px 0 0}.section-head>p{font-size:14px;color:var(--muted);margin:0}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.project{padding:30px;border:1px solid var(--line);border-radius:12px;transition:border-color .2s,transform .2s}.project:hover{border-color:#8b9ff7;transform:translateY(-3px)}.project-top{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}.project-top span:first-child{color:var(--blue);font-weight:600}.project h3{font-size:26px;line-height:1.45;margin:24px 0 12px}.project-desc{color:var(--muted);font-size:15px;min-height:52px;margin:0 0 18px}.tags{display:flex;gap:8px;flex-wrap:wrap}.tags span{font-size:12px;background:var(--surface);padding:3px 10px;border-radius:4px;color:#4a5b78}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0 25px}.metrics strong{font-size:34px;line-height:1.3;letter-spacing:-1px;font-weight:650}.metrics strong span{font-size:16px;margin-left:4px;letter-spacing:0}.metrics small{font-size:12px;display:block;color:var(--muted);margin-top:6px}.case-button{border:0;border-top:1px solid var(--line);display:flex;justify-content:space-between;width:100%;padding:19px 0 0;background:none;color:var(--blue);font-size:14px;font-weight:600}.case-button span{font-size:20px;line-height:1.3}.source-note{font-size:12px;color:var(--muted);margin:22px 0 0}.skills{background:var(--surface)}.skill-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.skill-no{font:13px monospace;color:var(--blue)}.skill-grid h3{font-size:18px;margin:16px 0 12px}.skill-grid p{color:var(--muted);font-size:14px;margin:0;line-height:1.9}.skill-evidence{border-top:1px solid var(--line);padding-top:16px;margin-top:20px;font-size:12px;color:var(--blue)}.background-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}.column-label{font-size:14px;color:var(--muted);font-weight:500;margin:0 0 26px}.timeline{border-left:2px solid var(--line);padding:0 0 5px 24px;margin-bottom:28px}.timeline time{font:12px monospace;color:var(--muted)}.timeline h3{font-size:20px;margin:9px 0 2px}.role{color:var(--blue);font-size:14px}.timeline p{font-size:14px;color:var(--muted);margin:10px 0 0;max-width:430px}.award{font-size:13px;color:var(--muted);padding-left:26px}.contact{margin:12px 48px 40px;background:var(--blue);color:white;padding:42px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:28px}.contact .eyebrow{color:#cfd9ff}.contact h2{font-size:29px}.contact p{font-size:14px;color:#d9e2ff}.email{font-size:25px;font-weight:600;overflow-wrap:anywhere;display:block;margin-bottom:16px}.contact-copy{background:white;color:var(--blue);border:1px solid white}.contact-download{background:transparent;color:white;border:1px solid #9caeff}.contact-actions{min-width:290px}.contact #copy-status{min-height:22px;margin:10px 0 0;font-size:12px}footer{padding:0 48px 30px;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.skip{position:fixed;left:10px;top:-100px;z-index:10;background:white;padding:10px}.skip:focus{top:10px}dialog{width:min(820px,calc(100% - 32px));max-height:88vh;padding:0;border:0;border-radius:14px;color:var(--ink);box-shadow:0 24px 100px #071a4c40}dialog::backdrop{background:#0b183c99;backdrop-filter:blur(4px)}body.modal-open{overflow:hidden}.dialog-bar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:16px 28px;background:#f4f7fc;border-bottom:1px solid var(--line);z-index:1}.dialog-bar>span{font:12px monospace;color:var(--muted)}.dialog-bar button{background:white;border:1px solid var(--line);border-radius:5px;padding:5px 12px;font-size:14px}#case-content{padding:32px}.case-header .eyebrow{font-size:12px}.case-header h2{font-size:30px;margin:12px 0}.case-header>p{color:var(--muted)}.case-section{margin-top:28px}.case-section h3{font-size:18px;margin:0 0 12px}.case-section p,.case-section li{font-size:15px;color:var(--muted)}.case-section ul{padding-left:22px}.case-section li{margin:10px 0}.flow{display:flex;flex-wrap:wrap;gap:8px;background:var(--surface);padding:20px;border-radius:8px}.flow span{padding:6px 12px;background:white;border:1px solid var(--line);border-radius:5px;font-size:14px}.case-result{background:#edf2ff;border-radius:8px;padding:18px 22px}.case-result p{margin:5px 0}.case-section.note p{font-size:12px}.case-result strong{color:var(--blue)}@media(max-width:1000px){.hero{gap:35px;padding-top:55px}.hero-panel{padding:20px}.method>div{padding:16px 12px}.skill-grid{grid-template-columns:1fr 1fr}.background-grid{gap:40px}.contact{padding:30px}h1{font-size:48px}.brand-sub{display:none}}@media(max-width:700px){header{height:74px;padding:0 20px}nav{gap:16px;font-size:13px}nav a[href='#skills']{display:none}.hero{padding:42px 20px;grid-template-columns:1fr;gap:35px}.eyebrow{font-size:12px}h1{font-size:46px;margin:20px 0;letter-spacing:-1px}.intro{font-size:15px}.hero-foot{gap:15px;flex-wrap:wrap}.hero-panel{padding:24px}.method h3{font-size:19px}.section{padding:42px 20px}.section-head{display:block;margin-bottom:26px}.section-head>p{margin-top:15px}h2{font-size:25px}.project-grid{grid-template-columns:1fr;gap:18px}.project{padding:25px}.project-desc{min-height:0}.project h3{font-size:25px}.skill-grid{gap:28px 18px}.skill-grid h3{font-size:17px}.background-grid{grid-template-columns:1fr;gap:20px}.contact{margin:0 20px 28px;padding:28px;display:block}.contact h2{font-size:26px}.contact-actions{margin-top:25px;min-width:0}.email{font-size:23px}footer{padding:0 20px 24px;gap:12px}.dialog-bar{padding:14px 20px}#case-content{padding:24px}.case-header h2{font-size:25px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project{transition:none}.project:hover{transform:none}}@media(max-width:370px){.hero h1{font-size:39px}.skill-grid{grid-template-columns:1fr}nav{gap:12px}.metrics strong{font-size:30px}}
/* Blue portfolio redesign */
:root{--blue:#2948ff;--ink:#101b48;--muted:#65718f;--line:#e2e7f2;--surface:#f6f8fe}
header{height:84px;max-width:1440px;padding:0 64px;border:0}.brand{font-size:18px}.monogram{width:36px;height:36px;border-radius:10px;font:700 23px Arial}.brand-sub{font:12px Georgia,serif;color:#8590ab;letter-spacing:1.2px}nav{align-items:center}nav .nav-download{background:var(--blue);padding:10px 20px;color:white;border-radius:10px}main,footer{max-width:1440px}.hero{display:block;overflow:hidden;text-align:center;padding:20px 0 0}.hero-copy{padding:0 24px;position:relative;z-index:1}.hero .eyebrow{font-weight:500;letter-spacing:1.5px}h1{font-size:clamp(46px,5.2vw,76px);line-height:1.24;letter-spacing:-3px;font-weight:750;margin:17px 0 19px}.intro{max-width:none;color:#5a6685;margin:0 auto 22px;font-size:18px;line-height:1.8}.hero .actions{justify-content:center}.button{padding:11px 25px;border-radius:10px;min-height:48px;transition:background .2s,transform .2s}.primary:hover{transform:translateY(-2px)}.hero-foot{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:17px 0 0;font-size:12px;color:#7b86a1}.hero-foot span{border-left:1px solid #d4dbed;margin-left:13px;padding-left:13px}.hero-visual{margin:0;position:relative;aspect-ratio:3.6;background:#f5f8ff}.hero-visual img{display:block;width:100%;height:100%;object-fit:cover}.hero-visual figcaption{position:absolute;right:4.5%;bottom:12px;font-size:10px;color:#7785a4;background:#f6f9ffe8;padding:2px 8px;border-radius:4px}.section{padding:64px;border:0}.section-head{margin-bottom:26px}h2{font-size:34px;letter-spacing:-1px;margin:7px 0 0}.section-head .eyebrow{color:#7c88a6;font:12px Georgia,serif;letter-spacing:2px}.section-head>p{font-size:16px;color:var(--ink);margin:0 0 6px}.project-grid{gap:44px 28px}.project{padding:0;border:0;border-radius:0;min-width:0}.project:hover{transform:none}.project-visual{margin:0 0 18px;position:relative;overflow:hidden;border-radius:12px;aspect-ratio:33/13;background:var(--surface)}.project-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}.project:hover .project-visual img{transform:scale(1.025)}.project-visual figcaption{position:absolute;left:16px;top:12px;color:#727fa5;font-size:10px;padding:2px 7px;background:#f7f9ffdb;border-radius:4px}.project-top{font-size:11px}.project h3{font-size:22px;line-height:1.5;margin:8px 0 10px;letter-spacing:-.5px}.project-desc{font-size:14px;min-height:49px;margin:0 0 12px;line-height:1.8;max-width:550px}.tags{gap:14px}.tags span{font-size:11px;color:#7481a0;background:none;padding:0}.metrics{display:flex;gap:28px;margin:19px 0 17px}.metrics>div+div{border-left:1px solid var(--line);padding-left:28px}.metrics strong{color:var(--blue);font-size:29px;font-family:Arial,sans-serif;font-weight:600}.metrics strong span{font-size:15px;margin-left:3px}.metrics small{font-size:11px;margin-top:4px}.case-button{padding:13px 0 0;font-size:13px;display:block;text-align:left}.case-button:hover{color:#132bba}.source-note{font-size:11px;color:#7c88a3;margin:30px 0 0}.skills{margin-top:12px}.skills .section-head{margin-bottom:16px}.about-intro{max-width:760px;color:var(--muted);font-size:15px;line-height:2;margin:0 0 40px}.skill-grid{gap:32px}.skill-no{font:13px Georgia,serif}.skill-evidence{font-size:11px}.experience{padding-top:72px;padding-bottom:48px}.background-grid{margin-top:32px}.contact{margin:12px 64px 36px;background:#eef3ff;color:var(--ink);padding:42px;border-radius:16px}.contact .eyebrow{color:var(--blue);font-size:11px}.contact h2{font-size:30px}.contact p{color:var(--muted)}.email{font:600 26px Arial,sans-serif}.contact-copy{background:var(--blue);color:white;border-color:var(--blue)}.contact-download{color:var(--blue);border-color:#c6d3fb}.contact-actions{min-width:280px}footer{padding:0 64px 28px;font-size:11px}
@media(min-width:1600px){body{background:#fafbff}header,main,footer{background:white}}
@media(max-width:1000px){header{padding:0 36px}.section{padding:48px 36px}.hero{padding:24px 0 0}.hero h1{font-size:64px}.intro{font-size:16px}.contact{margin:12px 36px 30px;padding:30px}footer{padding:0 36px 28px}.project h3{font-size:20px}.project-grid{gap:36px 24px}}
@media(max-width:700px){header{height:72px;padding:0 20px}.brand{font-size:16px;gap:9px}.monogram{width:31px;height:31px;font-size:20px;border-radius:8px}nav{gap:18px;font-size:13px}nav .nav-download{display:none}.hero{padding:26px 0 0}.hero-copy{padding:0 20px}.hero h1{font-size:48px;line-height:1.3;letter-spacing:-2px;margin:18px 0}.intro{font-size:14px;max-width:330px;line-height:1.9;margin-bottom:22px}.button{padding:11px 22px;min-height:46px;font-size:13px}.hero-foot{font-size:10px;line-height:1.9;gap:4px 0;margin:17px auto 0;max-width:350px}.hero-foot span{margin-left:8px;padding-left:8px}.hero-foot span:last-child{border:0;margin:0;padding:0;flex-basis:100%}.hero-visual{width:150%;margin-left:-25%;aspect-ratio:3.6;margin-top:6px}.hero-visual figcaption{right:18%;font-size:8px;bottom:6px}.section{padding:38px 20px}.section-head{display:flex;gap:12px;margin-bottom:22px}h2{font-size:27px;letter-spacing:-.6px}.section-head .eyebrow{font-size:10px;letter-spacing:1.5px}.section-head>p{font-size:12px;max-width:130px;margin:0 0 5px}.project-grid{gap:32px}.project-visual{border-radius:10px;margin-bottom:14px}.project h3{font-size:21px}.project-desc{min-height:0;font-size:14px}.tags{gap:14px}.metrics{margin:17px 0 13px;gap:25px}.metrics>div+div{padding-left:25px}.metrics strong{font-size:28px}.metrics small{font-size:10px}.source-note{margin-top:26px;font-size:10px}.skills{margin-top:0}.skills h2{font-size:25px}.about-intro{font-size:14px;line-height:1.95;margin-bottom:28px}.skill-grid{gap:28px 20px}.skill-grid h3{font-size:16px}.skill-grid p{font-size:13px}.skill-evidence{font-size:10px}.background-grid{margin-top:26px}.timeline h3{font-size:18px}.contact{margin:8px 20px 28px;padding:28px;border-radius:12px}.contact h2{font-size:25px}.contact p{font-size:13px}.email{font-size:23px}footer{padding:0 20px 24px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}.project:hover .project-visual img,.primary:hover{transform:none}}
@media(max-width:370px){nav{gap:12px}.hero h1{font-size:42px}.metrics{gap:20px}.metrics>div+div{padding-left:20px}}
/* Match the selected first-screen proportions */
@media(min-width:701px){header{height:72px}.hero{padding-top:0;background:#fcfdff}.hero-copy{pointer-events:none}.hero-copy a{pointer-events:auto}.hero-visual{margin-top:-106px}.projects{padding-top:32px}.projects .project-visual{aspect-ratio:2.7}}
@media(min-width:701px) and (max-width:1000px){.hero-visual{margin-top:-65px}}
@media(max-width:700px){nav a[href='#skills']{display:inline}.hero-visual{margin-top:6px}}
@media(max-width:700px){.projects .section-head>p{white-space:nowrap;max-width:none;font-size:11px}}
@media(min-width:1001px){.projects h2{font-size:32px;line-height:1.3;margin-top:4px}.projects .section-head{margin-bottom:16px}.projects .project-visual{aspect-ratio:3.1}.project{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px}.project-visual,.project-top,.project h3,.case-button{grid-column:1/-1}.project-desc{grid-column:1;font-size:13px;min-height:0;margin-bottom:8px}.tags{grid-column:1;align-self:start}.metrics{grid-column:2;grid-row:4/span 2;margin:0 0 8px;align-self:start;gap:16px}.metrics>div+div{padding-left:16px}.metrics strong{font-size:24px}.metrics small{font-size:10px;max-width:110px}.case-button{margin-top:16px}}
/* Self-hosted editorial typography: Noto Serif SC + Noto Sans SC */
@font-face{font-family:'Portfolio Sans';src:url('assets/fonts/noto-sans-sc.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:'Portfolio Serif';src:url('assets/fonts/noto-serif-sc.woff2') format('woff2');font-style:normal;font-weight:200 900;font-display:swap}
:root{--font-body:'Portfolio Sans','PingFang SC','Microsoft YaHei',sans-serif;--font-display:'Portfolio Serif','Songti SC',serif}
body{font-family:var(--font-body);font-weight:400;line-height:1.85;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.brand{font-family:var(--font-display);font-weight:650;letter-spacing:.03em}.monogram{font-family:var(--font-body);font-weight:600}.brand-sub{font-family:var(--font-body);font-size:10px;font-weight:500;letter-spacing:.16em}.hero h1{font-family:var(--font-display);font-size:clamp(52px,6.1vw,88px);font-weight:600;line-height:1.14;letter-spacing:-.055em;margin:16px 0 23px}.hero h1 span{font-weight:500;font-style:italic;letter-spacing:-.07em}.hero .eyebrow{font-size:11px;font-weight:500;letter-spacing:.2em}.intro{font-weight:350;font-size:17px;letter-spacing:.025em;line-height:1.9}.hero-foot{font-size:11px;font-weight:400}.section-head h2,.contact h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.035em}.section-head .eyebrow,.skill-no,.dialog-bar>span{font-family:var(--font-body);font-weight:500;letter-spacing:.18em}.section-head .eyebrow{font-size:10px}.project h3{font-family:var(--font-body);font-weight:600;letter-spacing:-.03em;font-size:21px}.project-desc{font-weight:350;line-height:1.95}.project-top{font-size:11px;font-weight:400;letter-spacing:.025em}.tags span{font-size:11px;letter-spacing:.025em}.metrics strong{font-family:var(--font-body);font-weight:500;letter-spacing:-.065em;font-variant-numeric:lining-nums proportional-nums;font-size:30px}.metrics strong span{font-size:13px;font-weight:400;letter-spacing:0}.metrics small{font-weight:400;line-height:1.65}.skill-grid h3,.timeline h3{font-weight:600;letter-spacing:-.02em}.timeline time{font-family:var(--font-body);font-size:11px;letter-spacing:.08em}.email{font-family:var(--font-body);font-weight:500;letter-spacing:-.045em}.button,nav,.case-button{font-weight:500}.source-note,footer{font-size:11px}.case-header h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em}.case-section p,.case-section li{line-height:1.95}.hero-copy{pointer-events:auto}
@media(min-width:1001px){.metrics{gap:14px}.metrics>div+div{padding-left:14px}.metrics strong{font-size:28px}.project-desc{font-size:13px}.projects h2{font-size:34px}}
@media(min-width:701px) and (max-width:1000px){.hero h1{font-size:70px}}
@media(max-width:700px){.hero h1{font-size:52px;line-height:1.2;letter-spacing:-.055em;margin:18px 0 22px}.intro{font-size:14px;font-weight:400;line-height:1.95;letter-spacing:.01em}.hero .eyebrow{font-size:10px}.hero-foot{font-size:10px}.project h3{font-size:20px}.section-head h2{font-size:28px}.metrics strong{font-size:30px}.brand{font-size:17px}.section-head .eyebrow{font-size:9px}.project-desc{font-weight:400}.skills h2{font-size:25px}.contact h2{font-size:25px}}
@media(max-width:370px){.hero h1{font-size:45px}}