@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('assets/dm-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============ 杂志风 · 唯一主题 ============ */
:root{--paper:#f4f0e7;--ink:#132638;--navy:#173b4d;--coral:#e95f38;--teal:#176b83;--line:rgba(19,38,56,.19);--muted:#66747a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#d8d3c8;color:var(--ink);font-family:'DM Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif}
body:before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 14% 12%,rgba(233,95,56,.11),transparent 25%),radial-gradient(circle at 85% 78%,rgba(23,107,131,.1),transparent 28%)}
.grain{position:fixed;inset:0;opacity:.055;pointer-events:none;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
main{width:min(100%,520px);margin:0 auto;background:rgba(244,240,231,.98);min-height:100vh;box-shadow:0 18px 70px rgba(36,42,43,.16);overflow:clip}

/* ---- nav ---- */
nav{height:68px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:25;background:rgba(244,240,231,.92);backdrop-filter:blur(10px);box-shadow:0 8px 22px rgba(50,48,42,.07)}
.wordmark{font-weight:900;font-size:23px;letter-spacing:-.07em;text-decoration:none;color:inherit}
.wordmark span{color:var(--coral)}
.availability{font-size:10px;letter-spacing:.12em;color:var(--teal)}
.availability i,.chat header span i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#36a06a;margin-right:7px}
.nav-actions{display:flex;align-items:center;gap:9px}
.icon-button{border:1px solid var(--navy);background:url('assets/li-yao-avatar-small.jpg?v=3') center / cover no-repeat;border-radius:50%;width:36px;height:36px;padding:0;overflow:hidden;cursor:pointer}
.icon-button img{opacity:0;width:100%;height:100%}

/* ---- AI 分身引导气泡 ---- */
.ai-teaser{position:fixed;z-index:24;top:78px;right:max(14px,calc(50% - 246px));background:#fff;border:1px solid rgba(23,59,77,.25);border-radius:14px;border-top-right-radius:4px;box-shadow:0 10px 30px rgba(36,42,43,.18);padding:10px 14px;font:12.5px/1.5 inherit;color:#29495a;cursor:pointer;max-width:240px;opacity:0;transform:translateY(-6px);transition:.35s;visibility:hidden}
.ai-teaser.show{opacity:1;transform:none;visibility:visible}
.ai-teaser b{color:var(--teal);font-weight:700}
.ai-teaser:hover{border-color:var(--teal)}

/* ---- hero ---- */
.hero{padding:20px 22px 30px}
.hero:before{content:'PROFILE / PRODUCT & AI';display:block;color:var(--teal);font:9px monospace;letter-spacing:.14em;margin-bottom:10px}
.portrait{height:168px;background:#171a1b;position:relative;overflow:hidden;border:1px solid rgba(19,38,56,.25);box-shadow:10px 10px 0 #e1d9ca}
.portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:52% 30%;filter:saturate(.82) contrast(1.02)}
.portrait:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(233,95,56,.08),transparent 46%);pointer-events:none}
.portrait-code{position:absolute;left:10px;top:10px;z-index:2;padding:5px 7px;background:#f4f0e7e8;border-left:2px solid var(--coral);color:var(--navy);font:8px monospace;letter-spacing:.12em}
.portrait-tag{position:absolute;right:10px;bottom:10px;z-index:2;background:#f4f0e7e8;color:var(--navy);font-size:9px;letter-spacing:.12em;padding:6px 8px}
.scan-line{display:none}
.kicker{font-size:9px;letter-spacing:.16em;margin:18px 0 12px;color:var(--teal)}
h1{font-size:38px;line-height:1.14;letter-spacing:-.05em;margin:0;font-weight:900}
h1 span{color:var(--coral)}
.intro{font-size:14.5px;line-height:1.75;margin:16px 0 18px;color:#52626a}
.hero-actions{display:flex;gap:10px}
.primary,.secondary{height:46px;padding:0 18px;border:1px solid var(--navy);font:600 13px inherit;display:inline-flex;align-items:center;justify-content:space-between;text-decoration:none;cursor:pointer}
.primary{background:var(--navy);color:#fff;flex:1}
.primary b{font-size:20px}
.secondary{color:var(--navy);background:transparent}

/* ---- metrics ---- */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#e9e3d8}
.metrics div{padding:20px 14px;border-right:1px solid var(--line)}
.metrics div:last-child{border:0}
.metrics strong{font-size:26px;display:block;color:var(--navy)}
.metrics sup{color:var(--coral)}
.metrics span{font-size:10px;color:var(--muted)}

/* ---- sections ---- */
.section{padding:44px 22px;border-bottom:1px solid var(--line)}
.section-head{display:flex;align-items:baseline;border-bottom:1px solid var(--navy);padding-bottom:12px;margin-bottom:26px}
.section-head span{font-size:10px;color:var(--coral);margin-right:10px}
.section-head h2{font-size:22px;margin:0}
.section-head em{margin-left:auto;font-size:9px;font-style:normal;letter-spacing:.15em;color:var(--muted)}
.job{display:grid;grid-template-columns:85px 1fr;gap:12px;padding:0 0 28px;margin:0 0 26px;border-bottom:1px solid var(--line)}
.job:last-child{border:0;margin:0;padding:0}
.job-date{font-size:11px;line-height:1.45;font-weight:600;letter-spacing:.06em;color:var(--coral);padding-top:5px}
.job h3{font-size:17px;margin:0 0 5px;color:#172f3d}
.job p,.job li{font-size:12px;line-height:1.75;color:#5c686c}
.job .company{font-size:11px;line-height:1.55;font-weight:500;letter-spacing:.06em;color:var(--teal);margin:0 0 11px}
.job ul{padding-left:16px;margin:8px 0 0}
.section:last-of-type .job .company{font-size:12px}

/* ---- projects ---- */
.project-card{height:320px;padding:20px;margin-bottom:14px;position:relative;overflow:hidden;border:1px solid rgba(19,38,56,.18);box-shadow:0 10px 24px rgba(34,42,44,.08)}
.project-card h3{font-size:26px;line-height:1.25;margin:42px 0 8px;position:relative;z-index:1;color:#fff}
.project-card p{font-size:11px;line-height:1.6;letter-spacing:.08em;color:#f5eee8}
.project-card .project-shield{font-size:10px;opacity:.9;margin-top:6px;letter-spacing:.04em;line-height:1.5}
.project-index{font-size:11px;font-weight:600;letter-spacing:.12em;color:#fff;opacity:.78}
.project-card.coral{background:#e96d48}
.project-card.ink{background:#183c4d}
.project-shape{position:absolute;right:-10px;bottom:-45px;font-size:180px;line-height:1;opacity:.18;color:#fff}
.project-card-clickable{display:block;color:inherit;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s}
.project-card-clickable:hover,.project-card-clickable:focus-visible{transform:translateY(-3px);box-shadow:0 16px 36px rgba(34,42,44,.16);outline:none}
.project-link{position:absolute;left:20px;bottom:20px;z-index:2;display:flex;align-items:center;gap:7px;color:#fff;font:11px monospace;letter-spacing:.08em}
.project-link b{font-size:16px;transition:transform .2s}
.project-card-clickable:hover .project-link b{transform:translate(2px,-2px)}

/* ---- skills ---- */
.skill-list{display:flex;flex-wrap:wrap;gap:8px}
.skill-list span{border:1px solid rgba(23,59,77,.25);border-radius:99px;padding:9px 15px;font-size:12px;background:#fff7;color:#294a59}

/* ---- footer ---- */
footer{background:var(--navy);color:var(--paper);padding:44px 22px 28px;border-top:1px solid var(--coral)}
footer p{font-size:13px;color:#b9c8cc}
footer a{font-size:24px;font-weight:600;color:#fff;text-decoration:none;letter-spacing:-.04em}
footer small{display:block;margin-top:48px;color:#8fa4aa;font-size:9px;letter-spacing:.12em}
footer a.icp{display:block;margin-top:10px;font-size:11px;font-weight:400;color:#8fa4aa;letter-spacing:.04em;text-align:center;text-decoration:none}
footer a.icp:hover{color:#b9c8cc}
.reveal-phone{border:0;background:none;padding:0;color:inherit;font:inherit;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}

/* ---- chat ---- */
.chat-backdrop{position:fixed;inset:0;background:rgba(19,38,56,.45);opacity:0;visibility:hidden;transition:.25s;z-index:30}
.chat-backdrop.open{opacity:1;visibility:visible}
.chat{position:fixed;z-index:31;left:50%;bottom:0;transform:translate(-50%,105%);width:min(100%,520px);height:min(78vh,650px);background:var(--paper);border:1px solid rgba(23,59,77,.3);display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.8,.2,1);border-radius:20px 20px 0 0;overflow:hidden;box-shadow:0 24px 80px rgba(38,50,56,.35)}
.chat.open{transform:translate(-50%,0)}
.chat header{padding:14px 18px;display:flex;gap:11px;align-items:center;border-bottom:1px solid var(--line);background:#e8e2d7}
.bot-avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;overflow:hidden;border:1px solid var(--navy);background:url('assets/li-yao-avatar-small.jpg?v=3') center / cover no-repeat}
.bot-avatar img{opacity:0;width:100%;height:100%}
.chat header strong{font-size:13px;display:block;color:var(--navy)}
.chat header span{font-size:9px;color:var(--muted)}
.chat header button{margin-left:auto;border:0;background:none;font-size:28px;cursor:pointer;color:var(--muted)}
.messages{flex:1;overflow:auto;overflow-x:hidden;padding:20px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:rgba(23,107,131,.5) rgba(221,215,203,.65)}
.messages::-webkit-scrollbar{width:6px}
.messages::-webkit-scrollbar-thumb{background:rgba(23,107,131,.5);border-radius:99px}
.message{max-width:82%;padding:12px 14px;font-size:13px;line-height:1.6;border-radius:14px;overflow-wrap:anywhere;word-break:break-word}
.message.bot{background:#e2ddd2;color:#29444f;border-bottom-left-radius:3px}
.message.user{background:var(--navy);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.typing{color:var(--teal)!important;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
.suggestions{display:flex;flex-wrap:wrap;gap:7px;padding:10px 14px;overflow-x:hidden}
.suggestions button{border:1px solid rgba(23,59,77,.2);border-radius:20px;padding:8px 11px;background:#fff9;color:#315361;font:11px inherit;cursor:pointer;white-space:normal;text-align:left;line-height:1.35}
.chat form{display:flex;padding:12px 14px 20px;gap:8px;border-top:1px solid var(--line)}
.chat input{flex:1;border:1px solid rgba(23,59,77,.25);background:#fff;color:var(--navy);padding:0 15px;font:13px inherit;outline:none;border-radius:10px}
.chat form button{width:46px;height:46px;border:0;border-radius:10px;background:var(--coral);color:#fff;font-size:20px;cursor:pointer}

/* ---- wechat modal ---- */
.wechat-backdrop{position:fixed;inset:0;background:rgba(19,38,56,.5);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.25s;z-index:40}
.wechat-backdrop.open{opacity:1;visibility:visible}
.wechat-modal{position:fixed;z-index:41;left:50%;top:50%;width:min(calc(100% - 36px),370px);transform:translate(-50%,-46%) scale(.96);padding:32px 28px 28px;background:var(--paper);border:1px solid rgba(23,59,77,.35);border-radius:18px;box-shadow:0 24px 80px rgba(38,50,56,.3);text-align:center;opacity:0;visibility:hidden;transition:.25s;color:var(--navy)}
.wechat-modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.wechat-close{position:absolute;right:14px;top:10px;border:0;background:transparent;color:var(--muted);font-size:27px;cursor:pointer}
.wechat-label{font:9px monospace;letter-spacing:.16em;color:var(--teal)}
.wechat-modal h2{font-size:23px;margin:10px 0 7px}
.wechat-modal p{font-size:11px;color:var(--muted);margin:0 0 18px}
.wechat-code{width:230px;height:230px;margin:0 auto 13px;padding:8px;background:#fff;border:1px solid rgba(23,59,77,.3);border-radius:10px}
.wechat-code img{display:block;width:100%;height:100%;object-fit:contain}
.wechat-modal small{color:var(--muted);font-size:10px}

/* ---- desktop-card (二维码) ---- */
.desktop-card{display:none}

/* ============ 响应式 ============ */
@media(max-width:420px){h1{font-size:34px}.portrait{height:158px}.nav-actions{gap:7px}.ai-teaser{max-width:200px;font-size:12px}}
@media(max-width:899px){.chat input{font-size:16px}.chat form{padding-bottom:max(20px,env(safe-area-inset-bottom))}}

@media(min-width:900px){
  body{padding:42px 0}
  .desktop-card{display:block;position:fixed;left:calc(50% - 510px);top:50%;transform:translateY(-50%);width:250px;color:var(--navy)}
  .desktop-card .eyebrow{font-size:9px;letter-spacing:.15em;color:var(--coral)}
  .desktop-card h2{font-size:25px;line-height:1.25;margin:12px 0 24px}
  .desktop-card p{font-size:10px;line-height:1.7;color:#68757a}
  #qr{width:152px;height:152px;background:#fff;padding:10px;border:1px solid var(--navy);box-shadow:8px 8px 0 rgba(23,59,77,.12)}
  #qr img{width:130px;height:130px}
  main{transition:margin .35s cubic-bezier(.2,.8,.2,1)}
  .chat{left:auto;right:16px;width:340px;height:620px;bottom:30px;border-radius:18px;transform:translateY(110%)}
  .chat.open{transform:translateY(0)}
  .chat-backdrop{display:none}
}

@media(min-width:1100px){
  body{padding:28px 0}
  .desktop-card{left:26px;top:50%;width:170px}
  .desktop-card h2{font-size:20px}
  .desktop-card p{font-size:9px}
  #qr{width:142px;height:142px}
  #qr img{width:120px!important;height:120px!important}
  main,body.chat-active main{width:auto;max-width:none;margin:0 38px 0 220px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));transition:margin-right .35s cubic-bezier(.2,.8,.2,1);overflow:visible}
  body.chat-active main{margin-right:400px}
  nav{grid-column:1/-1}
  .ai-teaser{top:86px;right:52px}
  .hero{grid-column:1/-1;display:grid;grid-template-columns:minmax(340px,.85fr) minmax(460px,1.15fr);grid-template-rows:auto auto auto 1fr auto;column-gap:clamp(36px,5vw,90px);padding:38px clamp(34px,4vw,70px) 42px;align-items:start}
  .hero:before{grid-column:2;grid-row:1;margin:0 0 12px}
  .portrait{grid-column:1;grid-row:1/6;height:100%;min-height:400px}
  .kicker{grid-column:2;grid-row:2;margin:0 0 18px}
  .hero h1{grid-column:2;grid-row:3;font-size:clamp(42px,4vw,64px);max-width:760px}
  .intro{grid-column:2;grid-row:4;font-size:16px;max-width:700px;margin:24px 0}
  .hero-actions{grid-column:2;grid-row:5;max-width:480px}
  .metrics{grid-column:1/-1}
  .metrics div{padding:26px clamp(20px,3vw,48px)}
  .metrics strong{font-size:34px}
  .metrics span{font-size:11px}
  .section{padding:48px clamp(26px,3vw,48px)}
  #experience{grid-column:1/8;border-right:1px solid var(--line)}
  .projects{grid-column:8/-1}
  .projects .project-card{height:290px}
  .projects .project-card h3{margin-top:32px;font-size:25px}
  .skills{grid-column:1/7;border-right:1px solid var(--line)}
  .skills+.section{grid-column:7/-1}
  footer{grid-column:1/-1;padding:52px clamp(34px,4vw,70px)}
  footer a{font-size:32px}
  .job-date{font-size:13px}
  .job .company{font-size:13px}
  .project-index{font-size:12px}
  .project-card p{font-size:12px}
  .section:last-of-type .job .company{font-size:14px}
  .chat{right:24px;width:380px;height:calc(100vh - 56px);bottom:28px}
  .suggestions{padding:10px 14px 12px}
  .suggestions button{font-size:10px;padding:7px 10px}
}
@media(min-width:1100px) and (max-width:1499px){
  body.chat-active main{margin-right:374px}
  .chat{right:14px;width:340px}
  .hero{grid-template-columns:minmax(280px,.8fr) minmax(360px,1.2fr);column-gap:34px}
  .hero h1{font-size:43px}
  body.chat-active .hero{grid-template-columns:1fr}
  .chat-active .portrait{display:none}
  .chat-active .hero:before,.chat-active .kicker,.chat-active .hero h1,.chat-active .intro,.chat-active .hero-actions{grid-column:1}
  .chat-active #experience,.chat-active .projects,.chat-active .skills,.chat-active .skills+.section{grid-column:1/-1;border-right:0}
}
@media(min-width:1400px){
  body.chat-active main{margin-right:auto;margin-left:220px}
  .chat{right:max(20px,calc(50% - 700px));width:380px}
}

/* ---- 在线产品徽章 & PDF 下载 ---- */
.live-badge{position:absolute;right:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);color:#1c7a4b;font-size:10px;font-weight:700;letter-spacing:.06em;padding:6px 11px;border-radius:99px}
.live-badge i{width:7px;height:7px;border-radius:50%;background:#25a566;animation:pulse 1.6s infinite}
.project-card-clickable .project-link{background:#fff;color:#c2492a;font:700 12px inherit;padding:10px 16px;border-radius:99px;letter-spacing:.02em}
.pdf-link{display:inline-block;margin:10px 0 4px;padding:11px 18px;border:1px solid rgba(244,240,231,.5);border-radius:10px;color:#fff!important;font-size:13px!important;font-weight:600!important;letter-spacing:0!important;text-decoration:none}
.pdf-link:hover{background:rgba(255,255,255,.12)}
.print-head{display:none}

/* ============ 打印 / PDF 单页版式 ============ */
@media print{
  @page{size:A4;margin:9mm 11mm}
  html,body{background:#fff!important;padding:0!important}
  body:before,.grain,nav,.ai-teaser,.desktop-card,.chat,.chat-backdrop,.wechat-modal,.wechat-backdrop,.hero,footer{display:none!important}
  main{width:100%!important;max-width:none!important;margin:0!important;box-shadow:none!important;background:#fff!important;display:block!important;overflow:visible!important;zoom:.97}
  .print-head{display:block;padding-bottom:8px;border-bottom:2.5px solid var(--navy);margin-bottom:9px}
  .print-head h1{font-size:23px;letter-spacing:0;line-height:1.2;margin:0}
  .print-head h1 small{font-size:11.5px;font-weight:600;color:var(--teal);margin-left:10px}
  .print-head p{margin:5px 0 0;font-size:10px;color:#444;letter-spacing:.04em}
  .metrics{background:none!important;border-top:0;border-bottom:1px solid var(--line);margin-bottom:4px}
  .metrics div{padding:3px 0}
  .metrics strong{font-size:14px;display:inline;color:var(--navy)}
  .metrics span{font-size:8.5px;margin-left:5px}
  .section{padding:8px 0!important;border-bottom:0!important}
  .section-head{padding-bottom:4px;margin-bottom:8px;border-bottom:1.5px solid var(--navy)}
  .section-head h2{font-size:13px}
  .section-head span{font-size:8px}
  .section-head em{font-size:7px}
  #experience{border-right:0!important}
  .job{grid-template-columns:76px 1fr;gap:8px;padding:0 0 8px;margin:0 0 8px}
  .job-date{font-size:8.5px;padding-top:2px}
  .job h3{font-size:12px;margin-bottom:1px}
  .job .company{font-size:9.5px;margin-bottom:3px}
  .job p,.job li{font-size:9.7px;line-height:1.48;color:#3c4a50}
  .job p{margin:2px 0}
  .job ul{margin:2px 0 0;padding-left:13px}
  .job li{margin:1px 0}
  /* 项目卡压平为列表 */
  .project-card{height:auto!important;padding:5px 0!important;margin:0!important;background:none!important;box-shadow:none!important;border:0!important;border-bottom:1px dashed var(--line)!important;color:var(--ink)!important;border-radius:0}
  .project-card h3{color:var(--ink)!important;font-size:11px!important;margin:2px 0!important;display:inline}
  .project-card h3 br{display:none}
  .project-card p{color:#3c4a50!important;font-size:9px!important;letter-spacing:0!important;display:inline;margin-left:8px}
  .project-index{color:var(--teal)!important;opacity:1!important;font-size:8px!important;display:block}
  .project-shape,.project-link,.live-badge{display:none!important}
  .skill-list{gap:5px}
  .skill-list span{padding:3px 9px;font-size:8.5px;background:none;border-color:#b9c6cd}
  h1,h2,h3{page-break-after:avoid}
  .job,.project-card{page-break-inside:avoid}
}
web-pet{transition:opacity .2s ease}
body.chat-active web-pet{opacity:0;pointer-events:none}
@media print{web-pet{display:none!important}}
.hero-actions{flex-wrap:wrap}
.hero-actions .secondary{white-space:nowrap}
.hero-actions .primary{flex:1 1 100%}
.hero-actions .secondary{flex:1;justify-content:center}
.metrics strong{font-size:clamp(19px,6vw,26px);white-space:nowrap}
@media(min-width:1100px){.metrics strong{font-size:clamp(26px,2.4vw,34px)}}
.print-qr{display:none}
@media print{
  .print-head{position:relative}
  .print-qr{display:block;position:absolute;right:0;top:-2px;text-align:center}
  .print-qr img{width:62px;height:62px;display:block}
  .print-qr span{display:block;font-size:6.5px;color:#66747a;margin-top:2px;letter-spacing:.04em}
}