/* Bound education cards and a chronological, interactive experience path. */
.about-panel{position:relative;isolation:isolate;min-height:max(790px,100%);height:auto;padding:40px 54px 48px;box-sizing:border-box;overflow:clip;color:#111;--about-gap:46px;--about-label:#67635f;--node-size:clamp(74px,7cqi,92px);--node-offset:calc(var(--node-size)/2 + 17px);--year-offset:calc(var(--node-size) + 52px)}
.about-utility{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px}
.about-content{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.92fr) 1px minmax(0,1.08fr);gap:38px;margin-top:52px;min-height:580px}
.about-education,.about-experience{min-width:0}
.about-panel .about-title{display:flex;gap:.2em;align-items:baseline;margin:0;white-space:nowrap;font:400 clamp(70px,8cqi,110px)/1.04 Anton,Impact,'Arial Narrow',sans-serif;letter-spacing:.005em;overflow-wrap:normal}
.about-title .about-me{color:var(--hero-red)}
.about-panel .about-label{margin:0;font:700 28px/1.15 Inter,Arial,sans-serif;letter-spacing:-.015em;color:var(--about-label);overflow-wrap:normal}
.about-education>.about-label{margin-top:var(--about-gap)}
.about-divider{background:rgba(72,68,62,.18);align-self:stretch;margin:8px 0 20px}
.education-bound{position:relative;display:grid;gap:22px;margin-top:var(--about-gap);padding:8px 4px 0 16px;max-width:540px}
.education-motion{position:relative;outline:none}
.education-card{position:relative;display:grid;grid-template-columns:82px minmax(0,1fr);gap:22px;align-items:center;min-height:178px;padding:26px 24px 26px 64px;border:1px solid rgba(92,83,72,.10);border-radius:14px;background:rgba(255,254,251,.94);box-shadow:0 14px 30px rgba(66,51,30,.07),0 2px 6px rgba(66,51,30,.035);transform-origin:28px 28px;transform:rotate(-4deg)}
.education-motion+.education-motion .education-card{transform:rotate(2deg)}
.education-motion:focus-visible .education-card{outline:2px solid var(--hero-red);outline-offset:4px}
.school-logo{display:grid;place-items:center;width:82px;height:90px;flex:none}
.school-logo img{display:block;object-fit:contain;width:82px;height:82px;max-width:100%;image-rendering:auto}
.school-logo.logo-xisu img{width:65px;height:86px}
.education-copy{min-width:0}
.about-panel .education-copy h3{margin:0;font:700 clamp(17px,1.6cqi,21px)/1.25 Inter,Arial,sans-serif;letter-spacing:-.018em;overflow-wrap:normal}
.about-panel .education-copy p{margin:8px 0 0;font:400 16px/1.35 Inter,Arial,sans-serif;letter-spacing:0;color:#706c67;overflow-wrap:normal}
.about-panel .education-copy .education-period{margin-top:9px;font-size:14px;line-height:1.4}
.education-eyelet{position:absolute;left:19px;width:24px;height:24px;border:2px solid #a39d93;border-radius:50%;background:radial-gradient(circle,#504d46 0 28%,#ccc7bd 30% 38%,#eeeae3 40% 58%,#77736b 60% 64%,#d1ccc2 66%);box-shadow:0 2px 4px #29201725;z-index:2}
.education-eyelet.top{top:29px}.education-eyelet.bottom{bottom:29px}
.education-binding{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible}
.education-binding svg{position:absolute;overflow:visible;inset:0;width:100%;height:100%}
.education-binding .cord-shadow{fill:none;stroke:#9a6d1829;stroke-width:9;stroke-linecap:round;transform:translate(2px,2px)}
.education-binding .cord{fill:none;stroke:#ffc02b;stroke-width:6;stroke-linecap:round}
.experience-heading-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin-top:6px}
.experience-hint{display:flex;gap:6px;align-items:center;margin:10px 0 0;max-width:100%;font:400 12px/1.5 Inter,Arial,sans-serif;letter-spacing:0;color:#938a7b}
.experience-hint svg{width:13px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
.experience-map{position:relative;height:540px;margin-top:28px;width:100%;--node-accent:#ff4b32}
.experience-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.experience-path path{fill:none;stroke-width:7;stroke-linecap:round}
.timeline-track{stroke:rgba(112,105,94,.14)}.timeline-progress{stroke:rgba(112,105,94,.28)}
.experience-node{position:absolute;width:0;height:0;z-index:2;transition:opacity .22s ease}
.experience-node[data-year='2026']{left:25%;top:12.86%;--node-accent:#ff4b32;--year-tint:#ffe3dc}
.experience-node[data-year='2025']{left:48.33%;top:40.36%;--node-accent:#ffbe16;--year-tint:#ffe9ad}
.experience-node[data-year='2024']{left:45%;top:65.18%;--node-accent:#1679ef;--year-tint:#e0edff}
.experience-node[data-year='2022']{left:55%;top:91.07%;--node-accent:#00b67a;--year-tint:#ddf1d9}
.timeline-dot{position:absolute;left:-10px;top:-10px;width:20px;height:20px;background:var(--node-accent);border:2px solid #fffdf7;border-radius:50%;z-index:3}
.experience-logo-wrap{position:absolute;left:var(--node-offset);top:0;transform:translate(-50%,-50%)}
.experience-node[data-year='2024'] .experience-logo-wrap{left:calc(-1 * var(--node-offset))}
.about-panel .experience-logo{display:grid;place-items:center;width:var(--node-size);height:var(--node-size);padding:14px;border:1px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(255,255,255,.93);box-shadow:0 10px 26px rgba(56,44,25,.055);cursor:pointer;transition:transform .22s ease,box-shadow .22s ease;color:#111}
.experience-logo img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto;pointer-events:none}
.experience-logo[data-logo='bytedance'] img{width:92%;height:92%}
.experience-logo[data-logo='nowcoder'] img{width:100%;height:100%}
.experience-logo:hover,.experience-logo:focus-visible{transform:translateY(-4px) scale(1.035);box-shadow:0 15px 34px rgba(56,44,25,.09)}
.experience-logo:focus-visible{outline:2px solid var(--node-accent);outline-offset:4px}
.experience-logo:active{transform:scale(.96)}
.experience-logo[aria-expanded='true']{transform:scale(1.05)}
.year-pill{position:absolute;left:var(--year-offset);top:0;transform:translate(-50%,-50%);display:grid;place-items:center;height:40px;min-width:74px;padding:0 12px;white-space:nowrap;border-radius:999px;background:var(--year-tint);font:800 18px/1 Inter,Arial,sans-serif;letter-spacing:0;color:#111}
.experience-node[data-year='2026'] .year-pill{left:-62px}
.experience-node[data-year='2024'] .year-pill{left:calc(-1 * var(--year-offset))}
.experience-tooltip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);padding:7px 10px;border-radius:8px;background:#302c27;color:#fffdf8;font:500 11px/1.3 Inter,Arial,sans-serif;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .16s ease .3s,transform .16s ease .3s,visibility 0s .3s}
.experience-logo-wrap:has(.experience-logo:hover) .experience-tooltip,.experience-logo-wrap:has(.experience-logo:focus-visible) .experience-tooltip{opacity:1;visibility:visible;transform:translate(-50%,0)}
.experience-map.has-selection .experience-node:not(.is-selected){opacity:.55}
.about-glow{position:absolute;right:-80px;bottom:-130px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(255,201,74,.17) 0%,rgba(255,201,74,.07) 38%,rgba(255,201,74,0) 72%);pointer-events:none;z-index:0}
.about-panel .experience-popover{position:fixed;margin:0;width:400px;max-width:calc(100vw - 48px);max-height:360px;display:flex;flex-direction:column;box-sizing:border-box;padding:0;border:1px solid rgba(255,255,255,.92);border-radius:22px;background:rgba(255,253,248,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 70px rgba(50,39,23,.13),inset 0 1px 0 rgba(255,255,255,.9);overflow:hidden;overscroll-behavior:contain;color:#111}
.experience-popover::backdrop{background:transparent}
.about-panel .experience-popover[hidden]{display:none}
.popover-close{position:absolute;right:12px;top:12px;display:grid;place-items:center;border:0;border-radius:50%;width:32px;height:32px;background:#eee8de;color:#635b50;cursor:pointer;font:500 23px/1 Inter,Arial,sans-serif}
.popover-close:focus-visible{outline:2px solid var(--hero-red);outline-offset:3px}
.popover-header{position:relative;flex:none;padding:24px 26px 14px}
.popover-content{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 26px 24px}
.popover-brand{display:flex;align-items:center;gap:12px;margin:0}
.popover-brand img{width:42px;height:42px;object-fit:contain}
.popover-brand span{font:800 15px/1 Inter,Arial,sans-serif;color:#786c5c}
.about-panel .popover-company{font:700 20px/1.3 Inter,Arial,sans-serif;letter-spacing:-.018em;margin:0 18px 10px 0;overflow-wrap:normal}
.about-panel .popover-role{font:600 14px/1.45 Inter,Arial,sans-serif;margin:0;color:#49423a}
.about-panel .popover-date,.about-panel .popover-location{font:400 12px/1.5 Inter,Arial,sans-serif;margin:5px 0 0;color:#7c7366}
.popover-bullets{margin:18px 0 0;padding-left:18px;font:400 13px/1.6 Inter,Arial,sans-serif;color:#554d43}
.popover-bullets li+li{margin-top:10px}
@container section-window (max-width:1100px){
 .about-panel{padding:34px 38px 40px;--about-gap:34px;min-height:760px}
 .about-content{gap:24px;margin-top:44px;grid-template-columns:minmax(0,1.08fr) 1px minmax(0,1fr)}
 .about-panel .about-title{font-size:clamp(68px,8cqi,88px)}
 .education-bound{gap:20px;padding-left:12px}
 .education-card{grid-template-columns:64px minmax(0,1fr);gap:16px;padding:22px 18px 22px 44px;min-height:183px}
 .education-eyelet{left:12px;width:22px;height:22px}
 .school-logo{width:64px;height:80px}.school-logo img{width:64px;height:68px}.school-logo.logo-xisu img{width:53px;height:73px}
 .about-panel .education-copy h3{font-size:17px}.about-panel .education-copy p{font-size:14px}.about-panel .education-copy .education-period{font-size:12px}
 .about-panel .about-label{font-size:25px}.experience-map{height:510px;margin-top:28px}
 .year-pill{min-width:64px;height:36px;padding-inline:9px;font-size:16px}
 .experience-node[data-year='2026'] .year-pill{left:-52px}
}
@container section-window (max-width:850px){
 .about-panel{height:auto;min-height:100%;padding:30px 30px 44px}
 .about-content{grid-template-columns:minmax(0,1fr);gap:54px;margin-top:44px}
 .about-divider{height:1px;width:100%;margin:0;display:none}
 .about-panel .about-title{font-size:clamp(68px,12cqi,98px)}
 .education-bound{max-width:520px;margin-inline:auto;padding-right:12px}
 .education-card{min-height:174px;grid-template-columns:76px minmax(0,1fr);padding-left:58px;gap:22px}
 .school-logo{width:76px}.school-logo img{width:76px;height:76px}.school-logo.logo-xisu img{width:57px;height:77px}
 .about-panel .education-copy h3{font-size:19px}.about-panel .education-copy p{font-size:15px}.about-panel .education-copy .education-period{font-size:13px}
 .experience-map{max-width:540px;height:510px;margin:26px auto 0;--node-size:84px}
 .about-glow{bottom:-100px;right:-100px}
}
@container section-window (max-width:480px){
 .about-panel{padding:26px 20px 38px;--about-gap:30px}
 .about-utility{align-items:flex-start;gap:12px;flex-wrap:wrap}
 .about-utility .hero-category{font-size:11px;gap:10px}
 .about-utility .hero-portfolio{height:38px;padding-inline:13px;font-size:9px;gap:7px}
 .about-utility .hero-portfolio svg{width:16px;height:16px}
 .about-utility .hero-category .asterisk{width:30px;height:30px;flex-basis:30px}
 .about-utility .hero-category .asterisk i{left:12px;width:6px;height:30px}
 .about-content{margin-top:36px}
 .about-panel .about-title{font-size:clamp(60px,17cqi,80px)}
 .about-panel .about-label{font-size:24px}
 .education-bound{padding-inline:4px;margin-top:36px;gap:24px}
 .education-card{grid-template-columns:52px minmax(0,1fr);gap:14px;padding:22px 14px 22px 37px;min-height:186px;transform:rotate(-3deg)}
 .education-motion+.education-motion .education-card{transform:rotate(2deg)}
 .education-eyelet{left:9px;width:20px;height:20px}
 .school-logo{width:52px;height:70px}.school-logo img{width:52px;height:60px}.school-logo.logo-xisu img{width:44px;height:61px}
 .about-panel .education-copy h3{font-size:16px}.about-panel .education-copy p{font-size:13px}.about-panel .education-copy .education-period{font-size:11px}
 .experience-map{--node-size:66px;--year-offset:105px;--node-offset:48px;height:460px;margin-top:26px}
 .experience-node[data-year='2026']{left:24%}.experience-node[data-year='2024']{left:47%}
 .experience-path{transform:none}
 .about-panel .experience-logo{padding:11px}
 .year-pill{font-size:14px;min-width:56px;height:33px;padding-inline:8px}
 .experience-node[data-year='2026'] .year-pill{left:-42px}
 .timeline-dot{width:16px;height:16px;left:-8px;top:-8px}
 .about-panel .experience-popover{max-height:55dvh;border-radius:22px}
 .popover-header{padding:22px 22px 14px}.popover-content{padding:0 22px 22px}
}
@media(prefers-reduced-motion:reduce){
 .experience-node,.experience-logo,.experience-tooltip{transition:none!important}
 .experience-logo:hover,.experience-logo:focus-visible{transform:none}
}

/* The logo, year and employer name stay fixed while the details scroll. */
.about-panel .popover-header .popover-company{margin:14px 0 0}