/* 2026 - Chen Mengfu portfolio: focused developer/editorial interface. 100% local. */
:root{
 --bg:#ffffff;--white:#ffffff;--ink:#15202b;--sub:#586473;--line:#e3e8ee;
 --green:#2563eb;--tint:#f4f7fb;--accent:#2563eb;--radius:12px;
 --blue:#2563eb;--dark:#101827;--muted:#64748b;
}
html{scroll-padding-top:84px;scroll-behavior:smooth}
body{background:#fff;color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.65}
button,a{-webkit-tap-highlight-color:transparent}
a{text-decoration:none}
button,summary{cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible,[role="button"]:focus-visible{outline:3px solid #7caaff;outline-offset:3px}
.container{max-width:1110px;width:calc(100% - 64px)}
header{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:none}
.nav{height:74px}.logo{color:#192333;font-size:20px;font-weight:850;letter-spacing:-.05em}.logo i{font-style:normal;color:var(--blue)}
.nav-right{gap:31px}.nav-right a{font-size:13px;font-weight:650;color:#596779;transition:color .2s}.nav-right a:hover{color:var(--blue)}
.nav-right a.contact-nav{border:1px solid #d8e3f3;background:#f7faff;color:#1d4ed8;border-radius:8px;padding:9px 14px;font-weight:700}.nav-right a.contact-nav:hover{background:#edf3ff}
.section-label{display:flex;gap:10px;align-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:1.15px;color:var(--blue);font-weight:750}
.section-label:before{content:'';display:block;width:17px;height:2px;background:var(--blue)}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;min-height:0;padding-top:91px;padding-bottom:92px}
.hero h1{font-weight:850;font-size:clamp(54px,5.65vw,84px);line-height:1.15;letter-spacing:-.078em;margin:26px 0 24px;color:#121e2b}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .intro{max-width:560px;color:#526174;line-height:2;font-size:16px;margin:0 0 26px}.hero .intro b{color:#27344b}
.actions{gap:12px}.btn,.actions .btn{padding:12px 21px;min-height:45px;border-radius:8px;border:1px solid #d5ddea;color:#28415c;background:#fff;font-size:13px;font-weight:750;box-shadow:none;transition:transform .18s,background .18s,box-shadow .18s}
.btn.primary,.actions .btn.primary{background:#2463ea;color:white;border-color:#2463ea}.btn:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(25,58,101,.10)}
.hero .identity-groups{margin-top:34px;gap:13px;display:grid}.identity-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.identity-title{font-weight:700;min-width:70px;width:70px;letter-spacing:0;font-size:11px;color:#7d8998}
.identity-tags{gap:7px}.identity-tag,.identity-group.mind .identity-tag,.identity-group.life .identity-tag{background:#f6f8fb;color:#5c6877;border:1px solid #e8edf3;border-radius:6px;padding:5px 9px;font-size:11px;font-weight:650;line-height:1.3}
.identity-group.build .identity-tag:first-child{background:#eff5ff;color:#2563eb;border-color:#dce9ff}
.workspace.portrait-workspace{transform:none;background:transparent;box-shadow:none;border:0;border-radius:0;max-width:none}
.portrait-body{background:transparent;padding:0}
.portrait-main{height:440px;cursor:zoom-in;border-radius:13px;overflow:hidden;background:#f4f5f7}
.portrait-main>img{object-position:center 35%;transition:opacity .25s ease}
.portrait-vignette{background:linear-gradient(180deg,transparent 53%,rgba(10,20,30,.55) 100%)}
.portrait-number{top:16px;left:16px;background:rgba(255,255,255,.92);color:#15202b;border-radius:6px;padding:6px 10px;font:700 11px ui-monospace,monospace;letter-spacing:1px}
.portrait-onphoto{left:20px;bottom:20px}.portrait-onphoto span{letter-spacing:1px;font-size:10px}.portrait-onphoto strong{font-size:24px;letter-spacing:-.03em;font-weight:750}
.portrait-bottom{padding:15px 0 6px;align-items:center}.portrait-sign small{color:#84909b;letter-spacing:.6px;font:650 10px ui-monospace,monospace}.portrait-sign strong{font-size:16px;letter-spacing:-.02em;margin-top:4px;color:#27384a}
.portrait-controls button{border-color:#e1e7ef;background:#fff;color:#35455c;border-radius:7px;height:34px;min-width:35px}
.portrait-controls button:hover{color:#2563eb;background:#f4f7fd}
.portrait-thumbs{padding:9px 0 5px;gap:7px}.photo-thumb{flex-basis:39px;height:39px;border-radius:6px}.photo-thumb[aria-pressed=true]{border-color:#2563eb;transform:none}
.portrait-caption{font-size:10px;color:#88929e;padding:7px 0 0}
.section{padding:88px 0}.section-head{margin-bottom:29px;gap:40px;align-items:end}.section-head h2{font-size:clamp(32px,4vw,48px);font-weight:800;letter-spacing:-.055em;margin-top:13px;line-height:1.25}.section-head>p{font-size:13px;color:#728092;max-width:300px;line-height:1.8}
#projects{background:#f9fbfd;border-top:1px solid #e9eef5;border-bottom:1px solid #e9eef5}
.showcase{border-top:0;padding-top:0}
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 17px}
.tab{background:#fff;border:1px solid #e1e7ef;border-radius:8px;min-width:0;padding:14px 15px;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s;gap:9px;color:#657386}
.tab span{font:700 11px ui-monospace,monospace;color:#a1acb7}.tab b{font-size:13px;font-weight:730;letter-spacing:-.01em;white-space:nowrap}
.tab:hover:not(.active){transform:translateY(-2px);background:#f5f8ff;border-color:#bcd0ef}.tab.active{background:#1b2637;border-color:#1b2637;color:#fff;box-shadow:0 7px 15px rgba(13,27,44,.09)}.tab.active span{color:#9dc3ff}
.project-panel{display:grid;grid-template-columns:1.06fr .94fr;min-height:440px;height:auto;border:1px solid #e1e7ef;background:#fff;border-radius:12px;box-shadow:none;transition:border-color .2s,box-shadow .2s}
.project-panel:hover{box-shadow:0 14px 40px rgba(36,52,75,.055);border-color:#d0dae5}
.project-art{height:auto;min-height:440px;background:#eaf0f8;overflow:hidden}.project-art img{width:100%;height:100%;object-fit:cover;transform:none!important;transition:opacity .25s ease}
.project-art[data-kind='wenchuang']{background:#123463}.project-art[data-kind='city']{background:#d7cfbb}
.art-label{left:17px;bottom:17px;font-size:10px;font-weight:650;border-radius:6px;background:rgba(15,23,42,.82);padding:8px 10px}
.project-details{padding:36px 35px;justify-content:center}
.project-tag{font-size:10px;color:#2563eb;letter-spacing:1.2px;font-weight:750;font-family:ui-monospace,monospace}
.project-details h3{font-size:clamp(26px,2.6vw,35px);font-weight:800;letter-spacing:-.055em;line-height:1.25;margin:14px 0 10px;color:#182539}
.project-details p{font-size:13px;line-height:1.88;color:#667589}
.project-capabilities{margin:10px 0 13px;gap:6px}.project-capabilities span{font-size:10px;background:#f3f6fa;border:1px solid #e6ebf1;border-radius:6px;padding:7px 9px;color:#9ba8b8}.project-capabilities b{font-size:11px;font-weight:700;color:#3d5067}
.project-brief{margin:14px 0 12px;padding:0;list-style:none;display:grid;gap:7px}.project-brief li{padding-left:17px;position:relative;font-size:12px;line-height:1.75;color:#667485}.project-brief li:before{content:'•';position:absolute;left:1px;color:#4478e6;font-size:17px;top:-3px}
.project-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:17px}.project-links button,.project-links a{padding:10px 13px;border-radius:7px;font-size:12px;border:1px solid #dce3ee;background:#fff;color:#344862;font-weight:700}.project-links button:hover,.project-links a:hover{border-color:#8dabec;color:#1751d3;background:#f6f9ff}.project-links .media-primary{background:#2563eb!important;color:white!important;border-color:#2563eb!important}
.project-art .art-play{background:#17263ae8;border-radius:9px;font-size:13px}
#consumer-visual{background:#e8eff8;color:#1e293b}
.consumer-visual{border-radius:0}.consumer-visual-title em{color:#2563eb}
.exp{background:#fff;padding:88px 0;border:0}.exp .section-head{margin-bottom:30px}
.exp-grid.play-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.exp-card.side-highlight.play-card{min-width:0;display:grid;grid-template-columns:175px 1fr;min-height:215px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;box-shadow:none;transition:border-color .2s,transform .2s,box-shadow .2s}
.exp-card.side-highlight.play-card:hover{transform:translateY(-3px);border-color:#b8cae6;box-shadow:0 12px 28px rgba(23,48,82,.08)}
.exp-image.play-image{height:100%;min-height:215px;border:0;border-right:1px solid #edf0f5;position:relative}
.exp-voice{background:#eff5ff;color:#2563eb}.exp-pet{background:#f6f0ed}.exp-tony{background:#f1f3fa}.exp-account{background:#f4f6fb}
.play-visual-caption{color:#6c7e99;background:rgba(255,255,255,.7);border-radius:4px;font-size:9px}
.exp-copy{padding:20px 20px 16px;min-width:0;display:flex;flex-direction:column}
.exp-copy .top{gap:10px}.exp-category{font-size:10px;color:#2563eb;font-weight:750;letter-spacing:.3px}.exp-status{font-size:10px;border:1px solid #e8edf3;background:#f5f7fb;border-radius:5px;color:#778497}
.exp-copy h3{font-size:19px;line-height:1.34;margin:10px 0 8px;color:#192536;font-weight:780;letter-spacing:-.035em}.exp-copy p{font-size:12px;line-height:1.85;color:#667487;margin:0 0 12px}.exp-copy p strong{color:#2c476d}
.exp-more{margin-top:auto}.exp-more summary{color:#2563eb;font-size:11px;font-weight:720;border-top:1px solid #ecf0f5;padding:11px 0 0;list-style:none}.exp-more summary span{float:right}.exp-more>p{margin-top:12px;border-top:none;color:#5d6c7d}
.account-preview-link{display:block;width:100%;height:100%}.account-preview-link img{width:100%;height:100%;object-fit:cover;object-position:center top}.account-zoom{font-size:10px}
.voice-orbit{border-color:#c6d7fd}.sound-bars i{background:#397bff}.pet-graphic svg{max-width:160px}
.outro{padding:18px 0 66px;background:#fff}.outro-grid{grid-template-columns:1fr 1fr;gap:21px;align-items:stretch}
.about-card,.contact-card{border-radius:12px;border:1px solid #e1e7ef;padding:29px 30px;box-shadow:none}
.about-card{background:#fff}.about-card h2,.contact-card h2{font-size:clamp(27px,3vw,36px);line-height:1.24;letter-spacing:-.055em;margin:15px 0 15px;font-weight:800}.about-card p{color:#6c798b;font-size:13px;line-height:1.85}
.training-story{background:#1b2738;border-radius:10px;grid-template-columns:.8fr 1.2fr;min-height:215px;margin-top:20px;margin-bottom:16px}
.training-image{min-height:225px;background:#27354a}.training-image span{font-size:9px;background:#18263bd9}
.training-words{padding:20px;gap:7px}.training-words h3{font-size:24px;color:#fff}.training-kicker{color:#c1d3e9}.training-words p,.training-words blockquote{color:#e7effa;font-size:11px}.training-words blockquote{border-left-color:#70a4f9}.training-words small{font-size:9px}
.hobbies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.hobby{background:#f8fafc;border:1px solid #e9edf3;border-radius:8px;min-height:60px}.hobby b{font-size:11px;color:#58677b}.hobby span{font-size:19px}
.contact-card{background:#182438;color:#fff;border-color:#182438}.contact-card .section-label{color:#99bfff}.contact-card .section-label:before{background:#99bfff}.contact-card h2{color:#fff}.contact-card p{color:#c8d4e4;font-size:13px;line-height:1.85}
.team-strengths{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px}.team-strengths>span{font-size:11px;color:#9aafcb;margin-right:3px}.team-strengths b{font-size:10px;border:1px solid #43546c;background:#24334a;padding:7px 9px;border-radius:5px;color:#dae8ff}
.contact-lines{gap:11px;margin-top:22px}.contact-line{background:#25344a;border-radius:7px;border:1px solid #354660;padding:14px;min-width:0}.contact-line small{color:#9eafc7;font-size:11px}.contact-line div div{font-size:16px;color:#fff;font-weight:720}.contact-line a{color:#fff;font-size:13px;overflow-wrap:anywhere}
#copy-wechat{background:#fff;color:#1e4ec2;border:0;border-radius:5px;padding:9px 10px;font-size:12px;font-weight:750}
.footer{margin-top:0;border-top:1px solid #edf0f5;padding:20px 0 30px;color:#91a0ae}
/* Modal text follows the same direction while preserving existing functionality */
.dialog,.photo-dialog,.media-dialog{background:#fff;border-radius:14px;color:#192638}.dialog::backdrop,.photo-dialog::backdrop,.media-dialog::backdrop{background:rgba(15,23,42,.66)}
.dialog .dialog-box,.dialog.case-open .dialog-box{background:#fff}.dialog h3{color:#1c2b3e}.case-hero{background:#1b2b45}.case-kicker{color:#9ebbe5}.case-hero h4 em{color:#bed9ff}.case-hero p{color:#d4e2f4}
.media-switch{background:#eff4fa}.media-switch button[aria-selected='true']{background:#2563eb}.media-caption a,.media-actions a{color:#2463eb}
.photo-modal-foot button{background:#f5f7fb;color:#24354f;border-color:#dfe6f1}.photo-modal-foot span{color:#62748a}.photo-modal-header small{color:#8797aa}
.toast{background:#1b2d47}
/* Simple purposeful motion; content remains visible if JavaScript is disabled. */
@media (prefers-reduced-motion:no-preference){
 .has-motion .section-head,.has-motion .exp-card,.has-motion .about-card,.has-motion .contact-card{opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s}
 .has-motion .in-view{opacity:1;transform:none}
}
@media (max-width:980px){
 .container{width:calc(100% - 42px)}
 .hero{grid-template-columns:1fr 1fr;gap:30px;padding:65px 0 72px}
 .hero h1{font-size:clamp(49px,6.7vw,71px)}
 .portrait-main{height:370px}
 .project-panel{grid-template-columns:1fr 1fr}
 .project-art{min-height:425px}
 .project-details{padding:27px 23px}
 .exp-card.side-highlight.play-card{grid-template-columns:130px 1fr}
 .training-story{grid-template-columns:1fr}.training-image{min-height:220px}
}
@media (max-width:700px){
 .container{width:calc(100% - 36px)}
 .nav{height:65px}.nav-right{gap:11px}.nav-right a:not(.contact-nav){display:none}.nav-right a.contact-nav{font-size:11px;padding:8px 11px}
 .hero{display:flex;flex-direction:column;gap:31px;align-items:stretch;padding-top:47px;padding-bottom:55px}
 .hero h1{font-size:clamp(45px,10vw,62px);line-height:1.15;margin:20px 0}.hero .intro{font-size:14px;line-height:1.9}
 .hero .identity-groups{margin-top:27px;gap:11px}.identity-group{gap:8px}.identity-title{min-width:65px;width:65px;font-size:10px}.identity-tags{gap:5px}.identity-tag,.identity-group.mind .identity-tag,.identity-group.life .identity-tag{font-size:10px;padding:5px 7px}
 .portrait-main{height:335px}.portrait-onphoto strong{font-size:22px}.photo-thumb{flex-basis:37px;height:37px}
 .section{padding:63px 0}.section-head{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:24px}.section-head h2{font-size:33px}.section-head>p{max-width:100%;font-size:12px}
 .tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tab{padding:12px 13px}.tab b{font-size:12px}.tab span{font-size:10px}
 .project-panel{grid-template-columns:1fr;min-height:0}.project-art{height:235px;min-height:0}.project-details{padding:25px 23px}.project-details h3{font-size:28px}.project-details p{font-size:13px}.project-brief li{font-size:12px}
 .exp{padding:63px 0}.exp-grid.play-grid{grid-template-columns:1fr;gap:12px}
 .exp-card.side-highlight.play-card{grid-template-columns:116px 1fr;min-height:174px}
 .exp-image.play-image{min-height:174px}.exp-copy{padding:13px 14px}.exp-copy .top{flex-wrap:wrap}.exp-copy h3{font-size:17px;margin:7px 0 5px}.exp-copy p{font-size:11px;line-height:1.75;margin-bottom:8px}.exp-more summary{font-size:11px}
 .outro{padding:0 0 46px}.outro-grid{grid-template-columns:1fr;gap:16px}.about-card,.contact-card{padding:23px}.about-card h2,.contact-card h2{font-size:29px}
 .training-story{grid-template-columns:1fr 1fr;margin-bottom:13px;min-height:220px}.training-image{min-height:220px}.training-words{padding:12px;gap:5px}.training-words h3{font-size:18px}.training-words p,.training-words blockquote{font-size:10px}.training-kicker{font-size:8px}
 .hobbies{grid-template-columns:repeat(4,minmax(0,1fr))}.hobby{padding:8px 4px}.hobby b{font-size:9px}
 .contact-line div div{font-size:15px}
}
@media (max-width:390px){
 .container{width:calc(100% - 28px)}.hero h1{font-size:46px}.portrait-main{height:295px}
 .tab{padding:10px}.tab b{font-size:11px}
 .training-story{grid-template-columns:1fr 1fr}.training-image{min-height:216px}.training-words{padding:10px}.training-words h3{font-size:17px}
 .exp-card.side-highlight.play-card{grid-template-columns:110px 1fr}.exp-image.play-image{min-height:184px}
}
@media(max-width:340px){.training-story{grid-template-columns:1fr}.training-image{min-height:225px}.hobbies{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.exp-card.side-highlight.play-card,.photo-thumb,.btn,.project-panel{transition:none!important}}

/* V10: concise, expressive identity chips — no extra framework or remote assets. */
.hero .intro{margin-bottom:14px}
.hero-manifesto{font-size:13px;line-height:1.85;color:#56657a;margin:0 0 24px;padding-left:12px;border-left:2px solid #4e84e9;max-width:550px}
.hero-manifesto strong{font-weight:760;color:#1f3e72}
.hero .identity-groups{margin-top:25px;gap:13px}
.hero .identity-group{align-items:flex-start}
.hero .identity-title{padding-top:7px;flex-shrink:0}
.hero .identity-tag{display:inline-flex;align-items:center;gap:4px;min-height:29px;border-radius:7px;font-size:11px;line-height:1.4;white-space:nowrap;padding:5px 10px}
.hero .identity-group.build .identity-tag:nth-child(1),
.hero .identity-group.build .identity-tag:nth-child(2){background:#edf4ff;color:#2355ad;border-color:#d6e4ff}
.hero .identity-group.life .identity-tag{background:#fffaf3;border-color:#f1e9df;color:#755d43}
.contact-card p strong{color:#fff;font-weight:750}

/* V10.2: keep the established visual system while moving life content below teamwork. */
.hero.hero-text-only{display:block;min-height:0;padding-top:76px;padding-bottom:72px}
.hero-text-only>div{max-width:900px}
.team-section{padding:70px 0;background:#fff}
.team-section .team-card{width:100%;padding:34px 36px}
.team-card p strong{color:#1d3553}
.team-card .team-strengths>span{color:#738197}
.team-card .team-strengths b{color:#29486b!important;background:#f3f7fc!important;border-color:#dbe5f1!important}
.offscreen-section{background:#f9fbfd;border-top:1px solid #e9eef5;border-bottom:1px solid #e9eef5}
.offscreen-interests{margin:24px 0 0;align-items:flex-start}
.offscreen-interests .identity-tags{display:flex;flex-wrap:wrap;gap:9px}
.offscreen-interests .identity-tag{background:#fffaf3;border-color:#f1e9df;color:#755d43;padding:8px 12px;font-size:12px}
.offscreen-section .portrait-workspace{width:100%;max-width:900px;margin:28px auto 0}
.offscreen-section .portrait-main{height:560px}
.offscreen-story{max-width:900px;margin:28px auto 0}
.contact-section{padding:18px 0 66px;background:#fff}
.contact-section .contact-card{width:100%;padding:34px 36px}

@media(max-width:900px){
 .hero.hero-text-only{padding-top:52px;padding-bottom:58px}
 .team-section{padding:54px 0}
 .offscreen-section .portrait-main{height:470px}
}
@media(max-width:600px){
 .hero.hero-text-only{padding-top:40px;padding-bottom:50px}
 .team-section{padding:46px 0}
 .team-section .team-card,.contact-section .contact-card{padding:23px}
 .offscreen-interests{margin-top:20px;gap:9px}
 .offscreen-interests .identity-title{width:100%;min-width:0}
 .offscreen-section .portrait-workspace{margin-top:22px}
 .offscreen-section .portrait-main{height:320px}
 .offscreen-story{margin-top:22px}
 .contact-section{padding:0 0 46px}
}
@media(max-width:700px){
 .hero-manifesto{font-size:12px;margin-bottom:19px}
 .desktop-only{display:none}
 .hero .identity-groups{margin-top:22px;gap:13px}
 .hero .identity-tag{font-size:10px;min-height:28px;padding:5px 8px;white-space:normal}
 .hero .identity-title{padding-top:6px}
}