/* Editorial résumé — adapted to the existing YU鱼 dark visual system. */
#view-about { background: transparent; }
#view-about .editorial-resume {
  position: relative; z-index: 2; width: min(92vw, 1380px); max-width: none;
  margin: 0 auto; padding: 128px 0 70px; color: #f7f9fc;
  font-family: "Inter","HarmonyOS Sans SC","Microsoft YaHei UI","PingFang SC",sans-serif;
  font-size: 16px; line-height: 1.7; text-rendering: optimizeLegibility;
}
.editorial-resume img { display: block; width: 100%; }
.resume-reveal { opacity:0; transform:translate3d(0,28px,0); filter:blur(3px); transition:opacity .72s cubic-bezier(.2,.75,.25,1),transform .78s cubic-bezier(.2,.75,.25,1),filter .72s ease; transition-delay:var(--reveal-delay,0ms); will-change:opacity,transform; }
.resume-reveal.resume-reveal-media { transform:translate3d(34px,18px,0) scale(.985); }
.resume-reveal.is-revealed { opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); }
.resume-hero-media.resume-reveal.resume-reveal-media { transform:translate3d(34px,-47%,0) scale(.985); }
.resume-hero-media.resume-reveal.is-revealed { transform:translate3d(0,-50%,0) scale(1); }
.resume-stats>div.resume-reveal { transform:translate3d(0,16px,0); }
.resume-stats>div.resume-reveal.is-revealed { transform:translate3d(0,0,0); }
.resume-kicker,.chapter-head span,.resume-section-title>span,.resume-contact>span {
  color: #65ccf8; font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .22em;
}
.resume-hero {
  position: relative; min-height: min(780px,calc(100vh - 145px)); overflow: hidden;
  padding: 58px clamp(28px,5vw,78px) 34px; border: 1px solid #ffffff12; border-radius: 28px;
  background: #0e151f;
}
.resume-hero h1 {
  position: relative; z-index: 2; max-width: 850px; margin-top: 26px;
  font-size: clamp(58px,6.7vw,100px); font-weight: 950; line-height: .88;
  letter-spacing: -.075em; color: #f7f8fa;
}
.resume-hero h1 em { color: #5ac8fa; font-style: normal; text-shadow:0 0 36px #31b7f32b; }
.resume-question { position:relative; z-index:2; width:min(54%,720px); margin-top:30px; color:#f5f7fa; letter-spacing:-.025em; }
.resume-question>strong { display:block; color:#aeb8c4; font-size:clamp(17px,1.35vw,21px); font-weight:700; line-height:1.3; letter-spacing:.01em; }
.resume-role-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.resume-role-list span { display:inline-flex; align-items:center; min-height:40px; padding:8px 15px; border:1px solid #ffffff1c; border-radius:999px; color:#f7f9fc; background:#ffffff07; font-size:clamp(14px,1.15vw,17px); font-weight:750; line-height:1.25; white-space:nowrap; }
.resume-role-list span:last-child { border-color:#5ac8fa55; color:#8fddff; background:#5ac8fa0d; }
.resume-lead {
  position: relative; z-index: 3; width: min(48%,610px); margin-top: 30px;
  color: #b9c1cb; font-size: clamp(15px,1.15vw,17px); line-height: 1.72; letter-spacing: .01em;
}
.resume-proof { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 7px; margin-top:13px; color:#dce3ea; font-size:14px; font-weight:700; }
.resume-proof b { color:#5ac8fa; font-size:22px; line-height:1; }
.resume-proof i { width:1px; height:14px; margin:0 5px; background:#ffffff2b; }
.resume-hero-media {
  position:absolute; z-index:1; right:clamp(22px,5vw,75px); top:50%; bottom:auto;
  width: min(35vw,440px); height: 78%; overflow:hidden; border-radius:18px 18px 5px 5px;
  background:#182332; transform:translateY(-50%);
}
.resume-hero-media::after { content:""; position:absolute; inset:0; border:1px solid #ffffff24; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px #0002; }
.resume-hero-media img { height:100%; border-radius:inherit; object-fit:cover; object-position:center 23%; filter:saturate(.72) contrast(1.07); transition:filter .4s,transform .55s cubic-bezier(.2,.75,.25,1); }
.resume-hero-media:hover img { filter:saturate(.94) contrast(1.04); transform:scale(1.018); }
.resume-photo-title { position:absolute; z-index:2; top:17px; left:18px; display:flex; flex-direction:column; align-items:flex-start; color:#fff; font-weight:300; line-height:.72; letter-spacing:-.065em; text-shadow:0 2px 18px #0008; pointer-events:none; }
.resume-photo-title span { font-size:clamp(40px,4.2vw,62px); }
.resume-photo-title strong { font-size:clamp(42px,4.4vw,66px); font-weight:300; }
.resume-hero-caption {
  position:absolute; z-index:3; left:22px; right:22px; bottom:18px; display:flex; justify-content:space-between; align-items:flex-end;
  padding:0; color:#fff; text-shadow:0 2px 18px #000a; pointer-events:none;
}
.resume-hero-caption>strong { font-size:clamp(40px,4vw,60px); font-weight:350; line-height:.84; letter-spacing:-.075em; }
.resume-hero-caption>strong span { color:#5ac8fa; }
.resume-hero-caption>div { display:flex; flex-direction:column; align-items:flex-start; padding-bottom:2px; text-align:left; }
.resume-hero-caption b { font-size:13px; font-weight:750; }
.resume-hero-caption small { margin-top:3px; color:#b9c8d5; font-size:8px; font-weight:700; letter-spacing:.13em; }
.resume-stats {
  position: absolute; z-index: 3; left: clamp(28px,5vw,78px); bottom: 38px;
  display: grid; grid-template-columns: repeat(4,minmax(105px,1fr)); width: min(52%,680px);
  border-top: 1px solid #ffffff18;
}
.resume-stats div { display:flex; flex-direction:column; align-items:center; padding:18px 8px 0; text-align:center; }
.resume-stats strong { position:relative; display: inline-block; padding-right:.42em; color: #fff; font-size: clamp(24px,2.6vw,42px); line-height: 1; }
.resume-stats strong small { position:absolute; right:0; bottom:.02em; color:#a9b3bf; font-size:.3em; font-weight:700; line-height:1; }
.resume-stats span { display:block; width:100%; margin-top:8px; color:#a0a9b5; font-size:13px; line-height:1.35; text-align:center; }

.resume-chapter { padding: 105px 0 30px; }
.chapter-head { display: flex; align-items: center; margin-bottom: 24px; }
.chapter-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(32px,6vw,90px); align-items: center; }
.chapter-grid.reverse { grid-template-columns: 1.08fr .92fr; }
.chapter-copy { padding: clamp(16px,3vw,42px) 0; }
.resume-pill { display: inline-flex; align-items:center; padding: 8px 14px; border: 1px solid #ffffff24; border-radius: 999px; color: #c0c7d0; background:#ffffff05; font-size: 13px; font-weight:600; letter-spacing: .04em; }
.chapter-copy h2 { margin-top: 25px; color: #f8f9fb; font-size: clamp(40px,5.1vw,76px); font-weight: 900; line-height: 1.03; letter-spacing: -.055em; }
.chapter-copy p { max-width: 560px; margin-top: 25px; color: #aeb6c1; font-size: 16px; line-height: 1.8; letter-spacing:.012em; }
.chapter-copy ul { display: grid; gap: 10px; margin-top: 26px; list-style: none; }
.chapter-copy li { position: relative; padding-left: 20px; color: #d5d9df; font-size: 14px; font-weight:550; line-height:1.65; }
.chapter-copy li::before { content:""; position:absolute; left:0; top:.72em; width:6px; height:6px; border-radius:50%; background:#5ac8fa; }
.chapter-media { overflow: hidden; border-radius: 24px; background: #101722; }
.visual-collage { display: grid; grid-template-columns:1fr; gap: 12px; padding: 12px; }
.visual-collage img { width:100%; height:auto; aspect-ratio:auto; object-fit: contain; border-radius: 15px; background:#080d14; }
.media-note { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; padding: 14px 8px 5px; }
.media-note strong { font-size: 15px; }
.media-note span { color: #8d98a6; font-size: 11px; letter-spacing: .13em; }

.lead-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding: clamp(28px,5vw,62px); min-height: 520px; border: 1px solid #ffffff10; }
.lead-number { display:flex; flex-direction:column; justify-content:center; align-items:center; aspect-ratio: 1; padding:12%; border: 1px solid #ffffff18; border-radius: 50%; text-align: center; }
.lead-number.active { color: #06131d; background: #5ac8fa; border-color: #5ac8fa; }
.lead-number strong { position:relative; display: inline-block; padding-right:.25em; font-size: clamp(82px,8vw,128px); line-height: .78; letter-spacing:-.07em; }
.lead-number strong small { position:absolute; right:-.2em; bottom:.05em; font-size:.18em; font-weight:750; letter-spacing:0; }
.lead-number span { display:block; width:100%; margin-top: 22px; color: #a7b0bc; font-size: 13px; font-weight:600; line-height:1.3; text-align:center; }
.lead-number.active span { color: #17435a; }
.lead-arrow { color: #5ac8fa; font-size: 35px; }
.lead-result { grid-column: span 1; display:flex; flex-direction:column; align-items:center; padding-top: 22px; border-top: 1px solid #ffffff13; text-align:center; }
.lead-result:nth-of-type(4) { grid-column: 1/2; }
.lead-result:nth-of-type(5) { grid-column: 3/4; }
.lead-result span { display: block; color: #9aa4b1; font-size: 13px; }
.lead-result b { display: block; margin-top: 6px; font-size: 17px; }

.skill-wall { position: relative; display: grid; grid-template-columns:1fr; gap: 12px; padding: 12px; }
.skill-wall img,.skill-wall img:first-child { grid-row:auto; width:100%; height:auto; aspect-ratio:auto; object-fit:contain; border-radius:14px; background:#080d14; }
.skill-wall button { justify-self:center; width:min(46%,260px); min-height: 48px; border-radius: 999px; color: #06131d; background: #5ac8fa; font-size:13px; font-weight: 750; transition: transform .25s,background .25s; }
.skill-wall button:hover { transform: scale(1.035); background: #7ad6fd; }

.resume-banner { display:grid; grid-template-columns:minmax(360px,.76fr) minmax(0,1.24fr); gap:clamp(36px,5vw,72px); align-items:center; margin:110px 0 30px; padding:clamp(38px,5vw,70px); overflow:hidden; border-radius:28px; background:#f1f4f6; }
.resume-banner-copy { text-align:left; }
.resume-banner span { color: #55616e; font-size: 11px; font-weight:750; letter-spacing: .25em; }
.resume-banner h2 { margin-top: 22px; color: #10151b; font-size: clamp(40px,4vw,60px); font-weight: 950; line-height: 1.04; letter-spacing: -.055em; }
.resume-banner h2 em { color: #168ec5; font-style: normal; }
.resume-banner p { max-width:520px; margin-top:24px; color:#58636f; font-size:15px; line-height:1.75; }
.resume-banner-copy>a { display:inline-flex; align-items:center; gap:12px; margin-top:28px; padding:12px 18px; border-radius:999px; color:#fff; background:#101722; font-size:13px; font-weight:750; transition:transform .25s,background .25s; }
.resume-banner-copy>a:hover { transform:translateY(-3px); background:#168ec5; }
.resume-banner-copy>a b { color:#5ac8fa; font-size:16px; }
.resume-banner-shot { position:relative; display:block; overflow:hidden; border:1px solid #ccd4dc; border-radius:18px; background:#fff; box-shadow:0 24px 50px #1e344226; transition:transform .35s,box-shadow .35s; }
.resume-banner-shot::after { content:"飞书 · 32个完整案例"; position:absolute; right:14px; bottom:14px; padding:8px 12px; border-radius:999px; color:#fff; background:#101722e8; font-size:11px; font-weight:700; letter-spacing:.05em; }
.resume-banner-shot:hover { transform:translateY(-6px) scale(1.01); box-shadow:0 30px 65px #1e34423d; }
.resume-banner-shot img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:left top; }

.experience-section,.education-section,.resume-portals { padding: 100px 0 25px; }
.resume-section-title { display: grid; grid-template-columns:1fr auto; align-items:end; gap:10px 35px; margin-bottom: 34px; }
.resume-section-title>span { grid-column:1/-1; }
.resume-section-title h2 { font-size: clamp(38px,5vw,70px); line-height: 1; letter-spacing: -.05em; }
.resume-section-title>p { max-width:460px; color:#a1abb7; font-size:15px; line-height:1.7; text-align:right; }
.experience-list { border-top: 1px solid #ffffff16; }
.experience-list article { display: grid; grid-template-columns: 72px minmax(300px,.85fr) 1fr; gap: 30px; padding: 34px 0; border-bottom: 1px solid #ffffff12; }
.experience-list article>b { color: #5ac8fa; font-size: 13px; font-weight:700; }
.experience-list span { color: #98a3b0; font-size: 13px; }
.experience-list h3 { margin: 8px 0 2px; font-size: 20px; }
.experience-list strong { color: #5ac8fa; font-size: 13px; }
.experience-list p { align-self: center; max-width:620px; color: #adb5c0; font-size: 15px; line-height: 1.75; }
.education-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.education-cards article { min-height: 185px; padding: 28px; border: 1px solid #ffffff12; border-radius: 20px; background: #101722; }
.education-cards b { color: #5ac8fa; font-size: 13px; }
.education-cards article>span { float:right; padding:4px 9px; border:1px solid #ffffff18; border-radius:999px; color:#aeb7c2; font-size:11px; }
.education-cards h3 { margin-top: 38px; font-size: 18px; }
.education-cards p { margin-top: 7px; color: #a1abb7; font-size: 14px; }
.portal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.portal-grid button { position:relative; min-height: 260px; padding: 28px; border: 1px solid #ffffff14; border-radius: 22px; background: #101722; text-align: left; transition: transform .25s,border-color .25s,background .25s; }
.portal-grid button::after { content:"→"; position:absolute; right:24px; bottom:24px; display:grid; place-items:center; width:42px; height:42px; border:1px solid #ffffff28; border-radius:50%; color:#f7f9fc; font-size:18px; transition:transform .25s,background .25s,color .25s; }
.portal-grid button:hover { transform: translateY(-6px); border-color: #5ac8fa80; background: #142231; }
.portal-grid button:hover::after { transform:translateX(4px); color:#07131c; background:#5ac8fa; }
.portal-grid span { color: #5ac8fa; font-size: 12px; font-weight:700; letter-spacing: .14em; }
.portal-grid strong { display: block; margin-top: 88px; font-size: 25px; }
.portal-grid small { display: block; margin-top: 7px; color: #a3acb8; font-size: 14px; }

.resume-contact { position: relative; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:clamp(40px,6vw,90px); align-items:end; overflow: hidden; margin-top: 110px; padding: clamp(55px,7vw,95px); border-radius: 28px; background: #101722; }
.contact-copy { position:relative; z-index:2; }
.resume-contact h2 { margin-top: 22px; font-size: clamp(54px,8vw,112px); font-weight: 900; line-height: .9; letter-spacing: -.07em; }
.resume-contact h2 em { color: #5ac8fa; font-style: normal; }
.resume-contact p { margin-top: 26px; color: #afb7c2; font-size:15px; }
.contact-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.resume-contact a { display:flex; align-items:center; gap:12px; min-width:230px; padding: 12px 18px; border: 1px solid #ffffff24; border-radius: 16px; transition: color .2s,border-color .2s,background .2s; }
.resume-contact a svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.resume-contact a span { font-size:14px; font-weight:650; }
.resume-contact a small { display:block; margin-bottom:2px; color:#778593; font-size:10px; letter-spacing:.16em; }
.resume-contact a:hover { color: #07131c; border-color: #5ac8fa; background: #5ac8fa; }
.resume-contact a:hover small { color:#17435a; }
.contact-side { position:relative; z-index:2; display:flex; min-height:430px; flex-direction:column; justify-content:flex-end; }
.contact-wordmark { position:absolute; top:-34px; left:0; color:#ffffff08; font-size:clamp(120px,17vw,250px); font-weight:900; line-height:.8; letter-spacing:-.09em; white-space:nowrap; pointer-events:none; }
.contact-wordmark span { color:#5ac8fa12; }
.contact-qr { position:relative; z-index:2; display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:center; padding:18px; border:1px solid #ffffff18; border-radius:22px; background:#0a1018e8; }
.contact-qr img { width:150px; aspect-ratio:1; object-fit:cover; padding:7px; border-radius:14px; background:#fff; }
.contact-qr span { color:#5ac8fa; font-size:11px; font-weight:700; letter-spacing:.18em; }
.contact-qr strong { display:block; margin-top:8px; font-size:18px; }
.contact-qr small { display:block; margin-top:7px; color:#98a3b0; font-size:12px; line-height:1.6; }

@media (max-width: 980px) {
  .resume-hero { min-height: 860px; }
  .resume-hero-media { width: 48%; height: 61%; }
  .resume-lead { width: 50%; }
  .resume-stats { width: calc(100% - 56px); grid-template-columns: repeat(4,1fr); }
  .chapter-grid,.chapter-grid.reverse { grid-template-columns: 1fr; }
  .resume-banner { grid-template-columns:1fr; }
  .chapter-grid.reverse .lead-board { order: 2; }
  .resume-section-title { grid-template-columns: 1fr; gap: 12px; }
  .resume-section-title>p { text-align:left; }
  .experience-list article { grid-template-columns: 55px 1fr; }
  .experience-list article p { grid-column: 2; }
  .resume-contact { grid-template-columns:1fr; }
  .contact-qr { width:min(100%,390px); }
}
@media (max-width: 700px) {
  #view-about > .sub-topnav { scrollbar-width: none; }
  #view-about > .sub-topnav::-webkit-scrollbar { display: none; }
  #view-about .editorial-resume { width: calc(100vw - 28px); padding-top: 100px; }
  .resume-hero { min-height: auto; padding: 35px 22px 24px; }
  .resume-hero h1 { font-size: clamp(42px,11.2vw,54px); }
  .resume-question { width:100%; }
  .resume-role-list { gap:8px; }
  .resume-role-list span { min-height:36px; padding:7px 12px; font-size:13px; }
  .resume-proof { display:block; }
  .resume-proof i { display:none; }
  .resume-proof b { display:inline-block; margin-top:7px; }
  .resume-lead { width: 100%; margin-bottom: 28px; }
  .resume-hero-media { position:relative; right:auto; top:auto; bottom:auto; width:100%; height:480px; overflow:hidden; border-radius:18px 18px 5px 5px; transform:none; }
  .resume-hero-media.resume-reveal.resume-reveal-media,.resume-hero-media.resume-reveal.is-revealed { transform:none; }
  .resume-hero-caption { left:18px; right:18px; }
  .resume-hero-caption>strong { font-size:42px; }
  .resume-hero-caption small { max-width:175px; }
  .resume-stats { position: relative; left: auto; bottom: auto; width: 100%; grid-template-columns: repeat(2,1fr); margin-top: 22px; }
  .resume-chapter { padding-top: 72px; }
  .chapter-copy h2 { font-size: 42px; }
  .visual-collage { grid-template-columns: 1fr; }
  .visual-collage img { aspect-ratio: 16/9; }
  .media-note { grid-column: 1; }
  .lead-board { grid-template-columns: 1fr; min-height: 0; }
  .lead-arrow { transform: rotate(90deg); text-align: center; }
  .lead-result,.lead-result:nth-of-type(4),.lead-result:nth-of-type(5) { grid-column: 1; }
  .skill-wall { grid-template-columns: 1fr; }
  .skill-wall img,.skill-wall img:first-child { grid-row:auto; height:auto; aspect-ratio:auto; }
  .skill-wall button { grid-column: 1; }
  .resume-banner { margin-top: 75px; }
  .experience-section,.education-section,.resume-portals { padding-top: 72px; }
  .experience-list article { grid-template-columns: 36px 1fr; gap: 14px; }
  .education-cards,.portal-grid { grid-template-columns: 1fr; }
  .portal-grid button { min-height: 190px; }
  .portal-grid strong { margin-top: 55px; }
  .resume-contact { margin-top: 75px; padding: 45px 24px; }
  .contact-actions { flex-direction: column; align-items: stretch; }
  .resume-contact a { min-width:0; width:100%; }
  .contact-side { min-height:330px; }
  .contact-wordmark { top:0; font-size:112px; }
  .contact-qr { grid-template-columns:112px 1fr; width:100%; gap:14px; padding:14px; }
  .contact-qr img { width:112px; }
}
@media (prefers-reduced-motion: reduce) {
  .resume-reveal,.resume-reveal.resume-reveal-media,.resume-stats>div.resume-reveal { opacity:1; transform:none; filter:none; transition:none; }
}