@font-face{font-family:Portfolio;src:local('Arial');font-display:swap}
:root{--paper:#eef0ea;--ink:#1f2420;--orange:#ff6a3d;--blue:#3150e6;--muted:#6f776f;--line:#d6dcd2;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Portfolio,Arial,'PingFang SC','Microsoft YaHei',sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:5px}::selection{background:#ffc3ab}button{border:0}svg{vertical-align:middle}[hidden]{display:none!important}.skip{position:fixed;left:16px;top:-80px;padding:14px;background:var(--ink);color:white;z-index:100}.skip:focus{top:15px}
.header{position:fixed;z-index:20;top:0;left:0;width:100%;padding:26px 3.4%;display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(var(--paper) 35%,transparent);pointer-events:none}.header>*{pointer-events:auto}.logo{width:38px;height:38px;transition:transform .3s}.logo:hover{transform:rotate(-9deg)}.logo svg{width:100%}nav{display:flex;align-items:center;padding:5px 9px;background:#e0e6dbba;border-radius:50px;backdrop-filter:blur(14px);gap:3px;margin-left:155px}nav a{font-size:12px;font-weight:700;letter-spacing:.5px;padding:11px 23px;border-radius:30px;transition:background .3s,color .3s}nav a:hover,nav a.active{background:#f8faf5}.header-actions{display:flex;gap:12px;align-items:center}.pill{display:inline-flex;justify-content:center;align-items:center;gap:24px;border:0;border-radius:40px;background:#dde4d8;padding:14px 23px;font-weight:700;font-size:13px;transition:transform .3s,background .3s}.pill:hover{transform:translateY(-3px);background:#d2dacb}.pill.orange{background:var(--orange);color:var(--ink)}.pill.orange:hover{background:#ff7f57}.round{width:43px;height:43px;border-radius:50%;background:#dfe5d9;display:grid;place-items:center}.round svg{width:21px}.sound-wave{display:none}.round[aria-pressed=true] .sound-wave{display:block}.round[aria-pressed=true]{background:#ffc3ab}
.hero{min-height:820px;height:100svh;max-height:1150px;position:relative;display:flex;align-items:center;overflow:hidden;padding:80px 8.3%}.hero-copy{position:relative;z-index:3;width:43%;padding-bottom:35px}.hello{font-family:monospace;font-size:12px;letter-spacing:2.5px;margin:0 0 22px;color:var(--muted)}h1{font-size:clamp(72px,7.8vw,125px);line-height:.94;letter-spacing:-6px;font-weight:900;margin:0 0 21px;max-width:640px;overflow-wrap:break-word}.name-dot{color:var(--orange)}.role{display:inline-block;max-width:100%;background:var(--blue);color:#f8faf5;font-family:monospace;font-weight:bold;font-size:clamp(15px,1.5vw,22px);padding:9px 13px;transform:rotate(-5deg);margin:10px 0 27px 65px;box-shadow:4px 5px 0 #dfe5d9;overflow-wrap:anywhere}.hero-description{font-size:16px;line-height:1.9;color:#6c746b;white-space:pre-line;margin:12px 0 25px;max-width:325px}.text-link{font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:28px;border-bottom:1px solid #9aa496;padding-bottom:8px}.text-link span{font-size:19px;transition:transform .3s}.text-link:hover span{transform:translate(3px,-3px)}.scene-wrap{position:absolute;right:-4.2%;top:16%;width:69%;height:78%;display:flex;align-items:center;justify-content:center;perspective:1400px;z-index:2}.scene{position:relative;width:100%;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(var(--tx,0px),var(--ty,0px),0);transition:transform .7s var(--ease);will-change:transform}.scene img{display:block;width:100%;height:auto;mix-blend-mode:multiply;user-select:none;-webkit-user-drag:none}.scene-note{font-size:12px;font-family:monospace;letter-spacing:-.3px;color:#87907f;position:absolute;right:20%;bottom:1%;transform:rotate(-4deg)}.hotspot{position:absolute;left:68%;top:51%;width:32px;height:32px;background:#f8faf5;border-radius:50%;box-shadow:0 0 0 8px #f8faf545;display:flex;align-items:center;justify-content:center;animation:pulse 3s infinite}.hotspot>span:first-child{font-size:23px;font-weight:400}.hotspot-label{display:none;position:absolute;top:-45px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;background:var(--ink);color:var(--paper);padding:9px 13px;border-radius:20px}.hotspot:hover .hotspot-label,.hotspot:focus-visible .hotspot-label{display:block}.scroll-hint{position:absolute;bottom:29px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;z-index:4}.scroll-hint>span:nth-child(2){font-family:monospace;font-size:9px;letter-spacing:1.3px;color:#828a80}.chevron{font-size:24px;line-height:.6;animation:bob 2s infinite}.hero-side{position:absolute;right:30px;top:50%;writing-mode:vertical-rl;font:9px monospace;letter-spacing:2px;color:#98a194;z-index:4}
.section{padding:130px 8.3%}.section-label{font:11px monospace;letter-spacing:1.6px;color:#818a7e;margin:0 0 52px}.about{border-top:1px solid var(--line);position:relative}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}h2{font-size:clamp(44px,5.2vw,77px);letter-spacing:-2.5px;line-height:1.14;margin:0;font-weight:800}.orange-text{color:var(--orange)}.tiny-sticker{font:10px monospace;letter-spacing:.8px;display:inline-block;background:#dde4d6;padding:11px 13px;transform:rotate(-3deg);margin-top:35px}.about-copy{padding-top:0;color:#6f776f}.about-copy p{font-size:15px;line-height:2;margin:0 0 23px}.about-copy .lead{font-size:20px;line-height:1.8;color:var(--ink)}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}.tags span{border:1px solid #ccd4c6;border-radius:20px;font:11px monospace;padding:9px 12px}.projects{padding-top:75px}.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:50px}.section-top h2{font-size:clamp(65px,7vw,104px);letter-spacing:-4px}.section-top p{font-size:13px;line-height:1.9;color:#78817a;margin:0 10px 8px}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.project-card{text-align:left;padding:0;background:transparent;display:block;min-width:0}.project-art{height:280px;border-radius:14px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .6s var(--ease),box-shadow .6s}.project-card:hover .project-art{transform:translateY(-8px);box-shadow:0 15px 30px #1f242016}.art-agent{background:#f4d3c4}.art-memory{background:#c6d5d5}.art-toufang{background:#d8def9}.card-chat{width:76%;background:#fbfcf9;border-radius:12px;padding:19px 15px;box-shadow:8px 12px 0 #3150e621;transform:rotate(-6deg);transition:transform .6s}.project-card:hover .card-chat{transform:rotate(-2deg)}.chat-title{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;margin-bottom:21px}.chat-title i{width:16px;height:16px;background:var(--orange);border-radius:6px}.bubble{font-size:9px;border-radius:9px;padding:10px;background:#e7ece3;margin:0 0 11px 28px}.bubble.answer{background:#e3e8ff;margin-left:0;margin-right:13px;line-height:1.5}.source{display:block;font-size:8px;color:#3150e6;margin-top:6px}.chat-input{font:8px monospace;color:#9aa294;border:1px solid #dfe4da;border-radius:5px;padding:9px;display:flex;justify-content:space-between;margin-top:19px}.chat-input span{color:var(--orange)}.floating-label{position:absolute;right:12px;bottom:22px;background:var(--orange);font:10px monospace;font-weight:bold;padding:9px 12px;transform:rotate(7deg);box-shadow:3px 3px 0 #1f242030}.floating-label.blue{background:var(--blue);color:#fff;transform:rotate(-6deg)}.memory-node{position:absolute;border-radius:16px;background:#eef3ec;display:grid;place-items:center;padding:12px;font-size:10px;box-shadow:6px 7px 0 #84959522;z-index:2}.memory-main{width:81px;height:87px;left:calc(50% - 40px);top:92px;background:var(--blue);color:#fff;font-size:36px;border-radius:20px;transform:rotate(-8deg)}.memory-main span{font:7px monospace;letter-spacing:1.5px;margin-top:-10px}.n1{left:14%;top:39px;transform:rotate(-10deg)}.n2{right:12%;top:65px;transform:rotate(7deg)}.n3{left:17%;bottom:47px;transform:rotate(5deg)}.memory-line{position:absolute;background:#91a8a7;height:2px;width:70px;transform-origin:left;left:50%;top:50%;z-index:1}.l1{transform:rotate(-140deg);width:93px}.l2{transform:rotate(-42deg);width:100px}.l3{transform:rotate(144deg);width:92px}.memory-note{position:absolute;right:18px;bottom:22px;font:9px monospace;color:#5f7777}.mini-dashboard{width:83%;height:170px;background:#fbfcf9;border-radius:8px;box-shadow:7px 9px 0 #3150e630;transform:rotate(6deg);transition:transform .6s}.project-card:hover .mini-dashboard{transform:rotate(2deg)}.dashboard-top{display:flex;justify-content:space-between;font-size:8px;padding:12px;border-bottom:1px solid #e4e9e0}.dashboard-top i{font-size:5px;color:#a6b0a0}.dashboard-body{display:flex;height:calc(100% - 34px)}.mini-sidebar{width:25px;background:#edf1e8;display:flex;flex-direction:column;gap:10px;padding:10px 6px}.mini-sidebar i{height:5px;background:#c6cfbf;border-radius:2px}.dashboard-main{padding:12px;flex:1}.dashboard-main>span{font-size:8px}.bars{height:60px;display:flex;align-items:end;gap:9px;margin:12px 0}.bars i{background:#b2bdca;width:17px;border-radius:3px 3px 0 0}.bars i:nth-child(1){height:32%}.bars i:nth-child(2){height:53%;background:var(--orange)}.bars i:nth-child(3){height:42%}.bars i:nth-child(4){height:83%;background:var(--blue)}.bars i:nth-child(5){height:66%}.bars i:nth-child(6){height:96%;background:var(--orange)}.dashboard-tags{display:flex;gap:6px}.dashboard-tags b{font:6px monospace;background:#e7ece3;padding:4px}.card-meta{display:flex;justify-content:space-between;font:9px monospace;letter-spacing:.5px;color:#818a7e;margin:23px 0 13px}.card-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.card-title h3{font-size:19px;line-height:1.5;margin:0;letter-spacing:-.5px}.card-arrow{font-size:24px;transition:transform .3s}.project-card:hover .card-arrow{transform:translate(3px,-3px)}.project-card>p{font-size:12px;line-height:1.9;color:#78807a;margin:10px 0}.project-footnote{font-size:10px;color:#949d90;margin:35px 0 0}
.contact{border-top:1px solid var(--line);position:relative;overflow:hidden;padding-bottom:150px}.contact-content>p:first-child{font-size:14px;color:#808a7e;margin:0 0 30px}.contact h2{font-size:clamp(80px,10vw,145px);line-height:.97;letter-spacing:-6px;margin-bottom:42px}.contact-links{display:flex;align-items:center;gap:32px}.large{padding:18px 28px;font-size:15px}.social-link{font-size:13px;border-bottom:1px solid #a9b3a3;padding-bottom:5px}.email-status{font-size:10px;color:#9aa294;margin-top:22px}.contact-doodle{position:absolute;right:11%;top:32%;font-size:220px;line-height:1;color:#d6ded0;transform:rotate(12deg);z-index:-0;pointer-events:none}.contact-content{position:relative;z-index:1}footer{display:flex;align-items:center;justify-content:space-between;padding:35px 8.3%;border-top:1px solid var(--line);font:10px monospace;color:#838c80;gap:20px}.footer-name{font-family:Arial,sans-serif;font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-1px}footer p{font-size:9px}.edit-profile{position:fixed;bottom:20px;right:21px;z-index:18;border-radius:50%;height:36px;width:36px;background:#dde4d8e6;box-shadow:0 2px 10px #1f242018;display:grid;place-items:center}.edit-profile:hover{background:#ffc3ab}dialog{border:0;background:#f8faf5;color:var(--ink);padding:0;border-radius:20px;max-height:87svh;max-width:calc(100vw - 32px);overflow:auto;box-shadow:0 25px 100px #1f242033}dialog::backdrop{background:#1d241f66;backdrop-filter:blur(8px)}.close{position:absolute;right:18px;top:16px;border-radius:50%;width:36px;height:36px;background:#e3e8dd;font-size:26px;line-height:1;z-index:2}.project-dialog{width:700px}.dialog-content{padding:65px 52px 45px}.dialog-content .section-label{margin-bottom:23px}.dialog-content h2{font-size:42px;letter-spacing:-1.5px;line-height:1.3}.detail-description{font-size:16px;line-height:1.9;color:#6d756c;margin:20px 0 30px}.detail-section{border-top:1px solid #dbe1d6;padding-top:23px;margin-top:25px}.detail-section h3{font-size:14px}.detail-section p,.detail-section li{font-size:13px;line-height:1.9;color:#687066}.detail-section ul{padding-left:19px}.detail-note{font-size:10px;line-height:1.8;color:#949d90;margin:35px 0 0}.profile-dialog{width:620px}.profile-dialog form{padding:45px 36px 34px}.profile-dialog .section-label{margin-bottom:15px}.profile-dialog h2{font-size:32px;letter-spacing:-1px;margin-bottom:25px}label{display:block;font-size:12px;margin:15px 0 0;color:#6d756c}input,textarea{display:block;width:100%;border:1px solid #d2d9cc;border-radius:8px;padding:11px 12px;margin-top:7px;background:#fbfcf9;color:var(--ink);font-size:13px;resize:vertical}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-note{font-size:11px;line-height:1.8;color:#8b9488}.form-actions{display:flex;justify-content:space-between;margin-top:25px}.toast{position:fixed;z-index:100;left:50%;bottom:32px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);font-size:12px;padding:13px 22px;border-radius:40px;transition:all .3s;max-width:90vw;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.js .reveal.visible{opacity:1;transform:none}.project-card:nth-child(2){transition-delay:.1s}.project-card:nth-child(3){transition-delay:.2s}@keyframes pulse{50%{box-shadow:0 0 0 12px #f8faf500}}@keyframes bob{50%{transform:translateY(4px)}}
@media(min-width:1700px){.hero-copy{width:40%}.scene-wrap{right:0;width:64%}.section,footer{padding-left:max(8.3%,calc((100vw - 1450px)/2));padding-right:max(8.3%,calc((100vw - 1450px)/2))}}
@media(max-width:1100px){.header{padding:23px 4%}nav{margin-left:80px}nav a{padding:10px 17px}.hero{min-height:730px;padding-left:7%;padding-right:7%}.hero-copy{width:47%}h1{letter-spacing:-4px}.scene-wrap{right:-14%;width:79%;top:23%;height:64%}.role{margin-left:20px}.hero-description{max-width:270px;font-size:14px}.section{padding:95px 7%}.about-grid{gap:55px}.project-grid{gap:20px}.project-art{height:235px}.card-title h3{font-size:16px}.contact-doodle{right:6%;font-size:180px}.hero-side{display:none}}
@media(max-width:760px){html{scroll-padding-top:85px}.header{padding:18px 5%;gap:12px}.logo{width:30px;height:30px}nav{margin:0;padding:4px;gap:0}nav a{font-size:9px;padding:10px 12px;letter-spacing:0}.header-actions>.pill{display:none}.round{width:33px;height:33px}.round svg{width:17px}.hero{height:auto;max-height:none;min-height:900px;display:block;padding:151px 8% 100px}.hero-copy{width:100%;padding:0}.hello{font-size:10px;margin-bottom:18px}h1{font-size:85px;letter-spacing:-5px;max-width:100%;margin-bottom:14px}.role{font-size:16px;margin:6px 0 25px 48px;padding:8px 11px}.hero-description{font-size:13px;line-height:1.8;margin:12px 0 17px;max-width:340px}.text-link{font-size:11px}.scene-wrap{position:relative;top:auto;right:auto;width:140%;height:auto;margin:4px -20% 20px;min-height:290px}.scene-note{font-size:9px;bottom:0;right:23%}.hotspot{width:27px;height:27px}.hotspot>span:first-child{font-size:20px}.scroll-hint{bottom:32px}.scroll-hint>span:nth-child(2){font-size:8px}.section{padding:75px 8%}.section-label{font-size:9px;letter-spacing:1px;margin-bottom:35px}.about-grid{grid-template-columns:1fr;gap:43px}.about h2{font-size:48px;letter-spacing:-2px}.tiny-sticker{margin-top:25px;font-size:9px}.about-copy .lead{font-size:18px}.about-copy p{font-size:13px}.tags span{font-size:10px}.section-top{align-items:start;margin-bottom:35px;gap:20px}.section-top h2{font-size:60px;letter-spacing:-3px}.section-top p{font-size:10px;margin:9px 0 0}.project-grid{grid-template-columns:1fr;gap:42px}.project-art{height:300px}.project-card{max-width:500px;width:100%}.card-title h3{font-size:20px}.card-meta{font-size:9px}.project-card>p{font-size:12px}.card-chat{width:72%;max-width:300px;padding:22px 18px}.chat-title{font-size:12px}.bubble{font-size:11px}.source{font-size:9px}.chat-input{font-size:10px}.memory-main{top:106px}.n1{top:46px;left:21%}.n2{right:18%;top:77px}.n3{left:23%;bottom:56px}.mini-dashboard{max-width:310px;height:200px}.dashboard-main{padding:15px}.bars{height:80px}.bars i{width:21px}.dashboard-main>span{font-size:10px}.dashboard-top{font-size:10px}.contact h2{font-size:70px;letter-spacing:-4px;margin-bottom:35px}.contact-content>p:first-child{font-size:12px}.contact-doodle{font-size:120px;right:-20px;top:27%}.contact-links{gap:22px;flex-wrap:wrap}.large{font-size:13px;padding:15px 22px}.social-link{font-size:11px}.contact{padding-bottom:85px}footer{padding:26px 8%;flex-wrap:wrap}footer p{order:3;width:100%;margin:0;font-size:8px}.footer-name{font-size:20px}.dialog-content{padding:60px 25px 28px}.dialog-content h2{font-size:30px}.detail-description{font-size:14px}.profile-dialog form{padding:45px 22px 24px}.form-two{grid-template-columns:1fr;gap:0}.edit-profile{width:32px;height:32px;right:14px;bottom:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.scene{transform:none!important}.js .reveal{opacity:1;transform:none}}

/* Chinese name and longer intro */
#hero-title{letter-spacing:0}
.hero-description{max-width:430px}
.role{text-transform:none}
@media(max-width:760px){.hero-description{max-width:100%}}
.social-link.agent-link{background:none;padding:0 0 5px;font-size:13px;font-weight:700;color:var(--blue);border-bottom-color:var(--blue)}

/* Hero: proof points, what she is looking for, resume */
.hero-description{margin-bottom:20px}
.hero-proof{list-style:none;display:flex;gap:10px;margin:0 0 20px;padding:0;max-width:480px}
.hero-proof li{flex:1;min-width:0;background:#f8faf5c7;border:1px solid #d6dcd2;border-radius:12px;padding:11px 12px;backdrop-filter:blur(6px)}
.hero-proof b{display:block;font-size:16px;letter-spacing:-.3px;color:var(--ink);white-space:nowrap}
.hero-proof span{display:block;font-size:11.5px;line-height:1.5;color:#596258;margin-top:4px}
.hero-seeking{display:flex;align-items:center;gap:10px;font-size:13px;color:#3f473f;margin:0 0 24px}
.hero-seeking i{width:8px;height:8px;border-radius:50%;background:#2fa866;box-shadow:0 0 0 4px #2fa86626;flex:none}
.hero-actions{display:flex;gap:30px;flex-wrap:wrap}
/* Contact: email and WeChat can be copied with one click */
.contact-direct{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.copy-chip{font:13px monospace;color:#3f473f;background:#f8faf5c7;border:1px solid #d2d9cc;border-radius:20px;padding:9px 15px}
.copy-chip:hover:not(:disabled){background:#ffd6c6}
.copy-chip:disabled{cursor:default;color:#7b8577}
@media(max-width:760px){
  .hero-proof{gap:6px;margin-bottom:16px}
  .hero-proof li{padding:8px 9px;border-radius:10px}
  .hero-proof b{font-size:13px}
  .hero-proof span{font-size:10.5px}
  .hero-seeking{font-size:12px;margin-bottom:18px}
  .copy-chip{font-size:12px}
}
/* Project dialog footer */
.detail-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid #dbe1d6;margin-top:30px;padding-top:24px}
.detail-nav{display:flex;gap:8px}
.detail-nav button{font-size:13px;padding:11px 16px;border-radius:30px;background:#e3e8dd}
.detail-nav button:hover{background:#d2dacb}
/* Readability: small print was 8–10px light grey */
.project-footnote{font-size:12px;color:#6f786d}
.card-meta{font-size:11px;color:#667064}
.project-card>p{font-size:13px;color:#636c61}
.detail-note{font-size:12px;color:#6f786d}
footer p{font-size:11px;color:#6f786d}
@media(max-width:760px){.card-meta{font-size:10.5px}.project-card>p{font-size:13px}footer p{font-size:10px}.detail-footer .pill{width:100%}.detail-nav{width:100%}.detail-nav button{flex:1}}
/* Personal WeChat QR in the contact section (desktop only: on a phone the ID is copied instead) */
.wechat-card{display:flex;align-items:center;gap:16px;margin:18px 0 0;padding:12px 18px 12px 12px;width:max-content;background:#f8faf5d9;border:1px solid #d2d9cc;border-radius:16px;backdrop-filter:blur(6px)}
.wechat-card img{display:block;width:132px;height:auto;border-radius:8px}
.wechat-card figcaption{font-size:13px;line-height:1.8;color:#4f584e}
.wechat-card figcaption span{font:13px monospace;color:var(--ink)}
@media(max-width:760px){.wechat-card{display:none!important}}

/* Hero: one-line background, shown on phones where the long tagline is hidden */
.hero-short{display:none;font-size:13px;color:#3f473f;margin:0 0 14px}
@media(max-width:760px){.real-3d .hero-short{display:block}}

/* Experience timeline */
.experience{position:relative;z-index:3;background:var(--paper);border-top:1px solid var(--line);padding-bottom:40px}
.timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.timeline>li{display:grid;grid-template-columns:260px 1fr;gap:48px;padding:34px 0;border-bottom:1px solid var(--line)}
.tl-when b{display:block;font:700 15px monospace;letter-spacing:.3px}
.tl-when span{display:block;font-size:13px;color:#5f685d;margin-top:8px}
.tl-body h3{font-size:22px;letter-spacing:-.5px;margin:0 0 10px}
.tl-body p{font-size:14px;line-height:1.9;color:#5f685d;margin:0;max-width:640px}
.tl-stats{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0}
.tl-stats li{background:#f8faf5c7;border:1px solid #d6dcd2;border-radius:12px;padding:10px 14px;font-size:12px;color:#5f685d}
.tl-stats b{display:block;font-size:18px;color:var(--ink);letter-spacing:-.3px;margin-bottom:2px}
.timeline>li:first-child .tl-stats b{color:var(--orange)}

/* Live Agent banner above the project grid */
.live-agent{display:flex;align-items:center;gap:28px;width:100%;text-align:left;margin:0 0 34px;padding:24px 28px;border-radius:16px;background:var(--ink);color:var(--paper);transition:transform .4s var(--ease),box-shadow .4s}
.live-agent:hover{transform:translateY(-4px);box-shadow:0 16px 34px #1f242030}
.la-badge{display:flex;align-items:center;gap:8px;flex:none;font:700 11px monospace;letter-spacing:.8px;color:#9fe3b8}
.la-badge i{width:8px;height:8px;border-radius:50%;background:#3ccf7a;box-shadow:0 0 0 4px #3ccf7a33;animation:agent-ping 2.4s infinite}
.la-main{flex:1;min-width:0}
.la-title{display:block;font-size:20px;font-weight:800;letter-spacing:-.4px}
.la-desc{display:block;font-size:13px;line-height:1.8;color:#c9d0c7;margin-top:6px}
.la-tags{display:block;font:11px monospace;color:#8f998d;margin-top:8px}
.la-cta{flex:none;background:var(--orange);color:var(--ink);font-weight:700;font-size:14px;padding:13px 20px;border-radius:30px}
@media(max-width:1100px){.timeline>li{grid-template-columns:200px 1fr;gap:30px}}
@media(max-width:760px){
  .timeline>li{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .tl-body h3{font-size:19px}.tl-body p{font-size:13px}
  .tl-stats{gap:6px}.tl-stats li{padding:8px 10px;font-size:11px}.tl-stats b{font-size:15px}
  .live-agent{flex-direction:column;align-items:flex-start;gap:12px;padding:20px}
  .la-title{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.la-badge i{animation:none}}