:root{
  --bg:#f5f5f3; --ink:#111110; --muted:#86857f; --soft:#c9c7c0; --line:rgba(17,17,16,.08);
  --accent:#f26b1d; --green:#22c55e; --card:#ebeae6;
  --sans:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  --serif:"Instrument Serif","Noto Serif SC","Songti SC",serif;
  --w:1200px; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:clip;margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--w);margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 18px}}

/* ---------- nav ---------- */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:4px;padding:6px 6px 6px 6px;border-radius:999px;background:rgba(250,250,248,.72);border:1px solid var(--line);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 4px 18px rgba(0,0,0,.04)}
.nav .me{display:flex;align-items:center;gap:8px;padding-right:10px;margin-right:4px;border-right:1px solid var(--line);font-size:14px;font-weight:500}
.nav .me img{flex:none;max-width:none;width:28px;height:28px;border-radius:50%;object-fit:cover}
.nav a.l{font-size:14px;color:var(--muted);padding:6px 12px;border-radius:999px;transition:color .2s,background .2s}
.nav a.l:hover{color:var(--ink);background:rgba(17,17,16,.05)}
@media (max-width:560px){
  .nav{top:12px;gap:0}
  .nav .me span{display:none}
  .nav .me{padding-right:6px}
  .nav a.l{padding:6px 9px;font-size:13px}
}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:120px;padding-bottom:80px}
.hero h1{font-weight:400;font-size:clamp(34px,5.3vw,80px);line-height:1.18;letter-spacing:-.03em;margin:0}
.hero .ln{display:block;white-space:nowrap}
.pill{display:inline-flex;align-items:center;vertical-align:middle;height:.86em;margin:0 .12em;border-radius:999px;overflow:hidden;position:relative;top:-.06em}
.pill.avatar{width:1.5em;background:#ddd}
.pill.avatar img{width:100%;height:100%;object-fit:cover}
.pill.sticker{padding:0 .38em;background:var(--accent);color:#fff;font-size:.42em;height:2.05em;font-weight:500;letter-spacing:0;gap:.3em;transform:rotate(-4deg)}
.pill.spec{padding:0 .42em;background:#fff;border:1px solid var(--line);font-size:.36em;height:2.4em;gap:.5em;letter-spacing:0;font-weight:500;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.pill.spec s{color:var(--muted);text-decoration-thickness:1px}
.pill.spec b{color:var(--ink)}
.pill.spec .dot{width:.55em;height:.55em;border-radius:50%;background:var(--green)}
.pill.swatch{width:2.1em;gap:0;transform:rotate(3deg)}
.pill.swatch i{flex:1;height:100%}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin-top:44px;font-size:14px;color:var(--muted)}
.badges .b::before{content:"[ "}.badges .b::after{content:" ]"}
.status{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(34,197,94,.15)}
@media (max-width:640px){
  .hero{min-height:auto;padding-top:120px;padding-bottom:64px}
  .hero h1{font-size:clamp(28px,8.6vw,44px);line-height:1.3}
  .hero .ln{white-space:normal}
}

/* ---------- worked with ---------- */
.worked{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 44px;padding-top:8px;padding-bottom:24px;color:var(--soft);font-size:15px;font-weight:500;letter-spacing:-.01em}
.worked .lab{width:100%;text-align:center;font-size:12px;color:var(--muted);font-weight:400;letter-spacing:.02em}

/* ---------- section head ---------- */
.sec{padding-top:120px}
.label{font-size:13px;color:var(--accent);font-weight:500;letter-spacing:.01em;margin-bottom:14px}
.title{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5.4vw,68px);line-height:1.08;letter-spacing:-.02em;margin:0;max-width:16em}
.title em{font-style:italic}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
.more{font-size:14px;color:var(--muted);white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .2s}
.more:hover{color:var(--ink)}
@media (max-width:640px){.sec{padding-top:88px}.head{flex-direction:column;align-items:flex-start;margin-bottom:32px}}

/* ---------- work ---------- */
.projects{display:grid;gap:96px}
.proj{display:grid;grid-template-columns:1.55fr 1fr;gap:40px;align-items:end}
.proj:nth-child(even){grid-template-columns:1fr 1.55fr}
.proj:nth-child(even) .cover{order:2}
.cover{aspect-ratio:4/3;border-radius:22px;overflow:hidden;position:relative;background:var(--card)}
.cover>*{transition:transform .9s var(--ease)}
.proj:hover .cover>*{transform:scale(1.035)}
.cover img{width:100%;height:100%;object-fit:cover}
.art{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,3vw,36px)}
.art .big{font-family:var(--serif);font-size:clamp(44px,7.4vw,104px);line-height:1;letter-spacing:-.03em}
.art .small{font-size:13px;opacity:.7}
.art .no{font-size:13px;opacity:.6}
.proj .info .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.chip{font-size:12px;padding:3px 10px;border-radius:999px;background:rgba(17,17,16,.05);color:#55544f}
.chip.hot{background:rgba(242,107,29,.12);color:#b4470c}
.proj .product{font-size:13px;color:var(--muted);margin-bottom:6px}
.proj h3{font-size:clamp(24px,2.6vw,32px);font-weight:500;line-height:1.3;letter-spacing:-.02em;margin:0 0 12px}
.proj p{color:#55544f;margin:0 0 22px}
.go{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500}
.go::after{content:"→";transition:transform .3s var(--ease)}
.proj:hover .go::after,.go:hover::after{transform:translateX(4px)}
@media (max-width:820px){
  .proj,.proj:nth-child(even){grid-template-columns:1fr;gap:22px}
  .proj:nth-child(even) .cover{order:0}
  .projects{gap:64px}
  .cover{border-radius:16px}
}

/* ---------- lab ---------- */
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:-24px 0 32px}
.lab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lab-item{grid-column:span 2}
.lab-item .thumb{aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:var(--card);display:flex;transition:transform .6s var(--ease)}
.lab-item:hover .thumb{transform:scale(.985)}
.lab-item .thumb i{flex:1}
.lab-item .thumb img{width:100%;height:100%;object-fit:cover}
.lab-item h4{margin:16px 0 4px;font-size:17px;font-weight:500}
.lab-item p{margin:0;font-size:14px;color:var(--muted)}
@media (max-width:640px){.lab-grid{grid-template-columns:1fr}.lab-item{grid-column:auto}}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
.portrait{aspect-ratio:4/5;border-radius:22px;overflow:hidden;position:sticky;top:100px}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:47% 30%}
.habit{padding:28px 0;border-top:1px solid var(--line)}
.habit:first-child{border-top:0;padding-top:0}
.habit .k{font-family:var(--serif);font-size:clamp(28px,3.2vw,40px);line-height:1.15;letter-spacing:-.015em;margin-bottom:10px}
.habit .k span{color:var(--accent);font-family:var(--sans);font-size:13px;vertical-align:top;margin-right:10px;position:relative;top:.6em}
.habit p{margin:0;color:#55544f;max-width:32em}
.cv{margin-top:56px}
.cv .row{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:16px 0;border-top:1px solid var(--line)}
.cv .row b{font-weight:500;font-size:15px}
.cv .row time{font-size:13px;color:var(--muted)}
.cv .row p{grid-column:1/-1;margin:0;font-size:14px;color:var(--muted)}
@media (max-width:820px){.about{grid-template-columns:1fr;gap:40px}.portrait{position:static;aspect-ratio:4/3}}

/* ---------- contact ---------- */
.contact{padding-top:160px;padding-bottom:120px;text-align:center}
.contact .title{margin:0 auto;max-width:14em}
.mail{display:inline-block;margin-top:40px;font-size:clamp(22px,3.4vw,40px);letter-spacing:-.02em;border-bottom:2px solid var(--ink);padding-bottom:4px;transition:color .2s,border-color .2s}
.mail:hover{color:var(--accent);border-color:var(--accent)}
.copy{display:block;margin:18px auto 0;font:inherit;font-size:13px;color:var(--muted);background:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;transition:color .2s,border-color .2s}
.copy:hover{color:var(--ink);border-color:var(--soft)}
.wx{font-size:14px;color:var(--muted);margin-top:14px}
footer{border-top:1px solid var(--line);padding:28px 0 40px;font-size:13px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

/* ---------- case page ---------- */
.case-hero{padding:140px 0 56px}
.back{font-size:14px;color:var(--muted);display:inline-flex;gap:6px;margin-bottom:40px;transition:color .2s}
.back:hover{color:var(--ink)}
.case-hero .product{font-size:14px;color:var(--muted);margin-bottom:12px}
.case-hero h1{font-weight:400;font-size:clamp(34px,5.6vw,72px);line-height:1.15;letter-spacing:-.03em;margin:0 0 24px;max-width:14em}
.case-hero .lede{font-size:clamp(17px,1.6vw,20px);color:#55544f;max-width:36em;margin:0}
.case-cover{margin:0 0 56px}
.case-cover .cover{aspect-ratio:16/8}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px}
.meta dt{font-size:12px;color:var(--muted);margin-bottom:4px}
.meta dd{margin:0;font-size:15px;font-weight:500}
@media (max-width:720px){.meta{grid-template-columns:1fr 1fr}}
.body{max-width:760px;margin:0 auto}
.body section{padding:56px 0 0}
.body h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.015em;line-height:1.15;margin:0 0 20px}
.body h2 small{display:block;font-family:var(--sans);font-size:13px;color:var(--accent);margin-bottom:10px;letter-spacing:.01em}
.body p{margin:0 0 16px;color:#33322f}
.body ul{margin:0 0 16px;padding-left:1.1em}
.body li{margin-bottom:10px;color:#33322f}
.callout{font-family:var(--serif);font-size:clamp(22px,2.4vw,28px);line-height:1.4;letter-spacing:-.01em;margin:8px 0 24px;padding-left:20px;border-left:2px solid var(--accent)}
.tbl{overflow-x:auto;margin:8px 0 20px}
.tbl table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
.tbl th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;padding:0 14px 10px 0;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.note{font-size:13px;color:var(--muted)}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 24px;font-size:14px}
.flow span{background:#fff;border-radius:999px;padding:6px 14px;border:1px solid var(--line)}
.flow i{font-style:normal;color:var(--soft)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 10px}
.cmp div{background:#fff;border-radius:16px;padding:18px 20px;font-size:15px}
.cmp small{display:block;font-size:12px;margin-bottom:8px;font-weight:500}
.cmp .b small{color:#b42318}.cmp .a small{color:#15803d}
@media (max-width:640px){.cmp{grid-template-columns:1fr}}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:12px 0 20px}
.shot{aspect-ratio:9/16;max-height:440px;border-radius:18px;background:var(--card);display:flex;align-items:flex-end;padding:16px;font-size:13px;color:var(--muted);overflow:hidden;position:relative;background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(17,17,16,.025) 14px 15px)}
.shot.wide{aspect-ratio:16/9}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot span::before{content:"截图待替换 · ";color:var(--accent)}
.limits{background:#fff;border-radius:16px;padding:18px 22px 6px;margin:4px 0 16px}
.limits li{color:var(--muted)}
.next{margin:120px 0 0;padding:56px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;align-items:end}
.next .t{font-size:clamp(22px,3vw,34px);letter-spacing:-.02em;margin-top:6px}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}
.hero .w{display:inline-block}
.hero.anim .w,.hero.anim .pill{opacity:0;transform:translateY(.25em);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.hero.anim .pill.sticker{transform:translateY(.25em) rotate(-4deg)}
.hero.anim .pill.swatch{transform:translateY(.25em) rotate(3deg)}
.hero.play .w,.hero.play .pill{opacity:1;transform:none}
.hero.play .pill.sticker{transform:rotate(-4deg)}
.hero.play .pill.swatch{transform:rotate(3deg)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,.hero.anim .w,.hero.anim .pill{opacity:1!important;transform:none!important;transition:none!important}
  .cover>*,.lab-item .thumb{transition:none!important}
}

/* ---------- memoji ---------- */
.memo{mix-blend-mode:multiply}
.nav .me img.memo{border-radius:0;object-fit:contain;width:30px;height:30px}
.pill.avatar{background:transparent;overflow:visible;width:1.15em;height:1.15em;top:-.1em}
.pill.avatar img{object-fit:contain;transform-origin:50% 80%;transition:transform .4s var(--ease)}
.hero h1:hover .pill.avatar img{transform:rotate(-8deg) scale(1.06)}
.inline-memo{display:inline-block;height:1.15em;width:auto;vertical-align:-.18em;margin-left:.15em}
.contact-memo{width:120px;height:auto;margin:0 auto 20px}
@media (max-width:640px){.contact-memo{width:96px}}

/* ---------- centered layout + english hero ---------- */
.hero h1{font-size:clamp(32px,4.9vw,74px);line-height:1.12;letter-spacing:-.035em}
.belief{margin:36px auto 0;max-width:30em;font-size:clamp(18px,1.8vw,24px);line-height:1.5;color:#55544f;letter-spacing:-.01em}
.belief em{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:1.12em}
.belief .pill.spec{font-size:.62em;height:2em;top:-.12em}
@media (max-width:640px){.hero h1{font-size:clamp(30px,8.4vw,42px);line-height:1.2}}

/* ---------- editorial layout below the hero ---------- */
/* section head: label in a narrow left column, title hangs to the right */
.head{display:grid;grid-template-columns:3fr 9fr;gap:24px;align-items:start;border-top:1px solid var(--ink);padding-top:16px}
.head>div{display:contents}
.head .label{margin:4px 0 0}
.head .title{max-width:none}
.tags{margin:-24px 0 32px 25%}

/* projects: oversized serif index + alternating cover */
.proj .info{position:relative}
.proj .idx{font-family:var(--serif);font-size:clamp(72px,9vw,128px);line-height:.8;letter-spacing:-.04em;color:var(--soft);margin-bottom:24px;transition:color .4s}
.proj:hover .idx{color:var(--accent)}
.proj:nth-child(2){margin-left:8%}
.proj:nth-child(3){margin-right:8%}

/* lab: asymmetric 3 + 2 */
.lab-grid{grid-template-columns:repeat(5,1fr)}
.lab-item:first-child{grid-column:span 3}
.lab-item:last-child{grid-column:span 2}
.lab-item:last-child .thumb{aspect-ratio:4/3.2}

/* about: habits as three columns */
.about{display:block}
#habits{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-left:25%}
.habit,.habit:first-child{border-top:0;padding:0}
.habit .k{font-size:clamp(24px,2.3vw,30px)}
.habit .k span{display:block;position:static;font-family:var(--serif);font-size:56px;line-height:1;color:var(--accent);margin:0 0 14px}
.cv{margin:72px 0 0 25%;display:grid;grid-template-columns:1fr 1fr;column-gap:40px}

@media (max-width:820px){
  .head{grid-template-columns:1fr;gap:8px}
  .tags,.cv,#habits{margin-left:0}
  #habits{grid-template-columns:1fr;gap:32px}
  .cv{grid-template-columns:1fr}
  .proj:nth-child(2),.proj:nth-child(3){margin:0}
  .proj .idx{font-size:64px;margin-bottom:12px}
  .lab-grid{grid-template-columns:1fr}
  .lab-item:first-child,.lab-item:last-child{grid-column:auto}
}
.hero h1 .pill{margin:0 .2em}
.belief .pill{margin:0 .25em}
.hero h1 .pill.sticker{margin:0 .45em}

/* hero spacing fix */
.hero.wrap{max-width:none}
.hero h1{font-size:clamp(32px,4.3vw,76px);line-height:1.14}
.hero h1 .pill.avatar{height:1.05em;width:1.05em;margin:-.12em .18em}
.hero h1 .pill.sticker,.hero h1 .pill.swatch{margin-top:-.1em;margin-bottom:-.1em}
.belief{max-width:34em;text-wrap:balance}
.belief .pill{margin-top:-.2em;margin-bottom:-.2em}
.title{text-wrap:balance}
.contact-memo{width:150px}
.nav .me img{border-radius:0;object-fit:contain;width:30px;height:30px}
.title em{white-space:nowrap}
.worked{gap:20px 56px;padding-top:24px}
.worked .logo{width:auto;opacity:.38;transition:opacity .3s}
.worked .logo:hover{opacity:.85}
@media (max-width:640px){.worked{gap:20px 32px}.worked .logo{transform:scale(.8)}}

/* =========================================================
   MOTION LAYER
   ========================================================= */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* page enter / leave */
body{animation:pagein .8s var(--ease) both}
body.leaving{opacity:0;transition:opacity .35s var(--ease)}
@keyframes pagein{from{opacity:0}to{opacity:1}}

/* scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* nav reacts to scroll */
.nav{transition:transform .7s var(--ease),box-shadow .4s,background .4s}
.nav.hide{transform:translate(-50%,-160%)}
.nav.scrolled{background:rgba(250,250,248,.86);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.nav a.l.active{color:var(--ink);background:rgba(17,17,16,.06)}

/* softer, blurrier reveal */
.rise{transform:translateY(32px);filter:blur(8px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),filter 1.2s var(--ease)}
.rise.in{filter:none}

/* section rule draws itself */
.head{border-top:0;position:relative}
.head::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--ease)}
.head.in::before{transform:scaleX(1)}

/* hero entrance: words un-blur, pills pop with a spring */
.hero.anim h1 .w{opacity:0;transform:translateY(.4em);filter:blur(14px);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease),filter 1.3s var(--ease)}
.hero.anim h1 .pill{opacity:0;transform:scale(.3) rotate(-14deg);transition:opacity .6s var(--ease),transform 1.1s cubic-bezier(.34,1.56,.64,1)}
.hero.play h1 .w{opacity:1;transform:none;filter:none}
.hero.play h1 .pill{opacity:1;transform:none}
.hero.play h1 .pill.sticker{transform:rotate(-4deg)}
.hero.play h1 .pill.swatch{transform:rotate(3deg)}

/* hero idle breathing */
.hero.idle .pill.avatar img{animation:bob 4.6s ease-in-out infinite}
.hero.idle h1 .pill.sticker{animation:wiggle 7s ease-in-out infinite}
.hero.idle .pill.swatch i{animation:breathe 5.5s ease-in-out infinite}
.hero.idle .pill.swatch i:nth-child(2){animation-delay:-1.1s}
.hero.idle .pill.swatch i:nth-child(3){animation-delay:-2.2s}
.hero.idle .pill.swatch i:nth-child(4){animation-delay:-3.3s}
.hero.idle .pill.swatch i:nth-child(5){animation-delay:-4.4s}
.status::before{animation:pulse 2.6s ease-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7%) rotate(-5deg)}}
@keyframes wiggle{0%,84%,100%{transform:rotate(-4deg)}88%{transform:rotate(5deg) scale(1.08)}92%{transform:rotate(-9deg)}96%{transform:rotate(-2deg)}}
@keyframes breathe{0%,100%{flex:1}50%{flex:2.4}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}70%,100%{box-shadow:0 0 0 9px rgba(34,197,94,0)}}

/* logo marquee */
.worked{display:block;text-align:center;padding-top:32px}
.marquee{overflow:hidden;max-width:920px;margin:20px auto 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.track{display:flex;width:max-content;animation:marquee 36s linear infinite}
.track .set{display:flex;align-items:center;gap:80px;padding-right:80px}
.marquee:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* project covers: clip reveal + parallax + hover zoom */
.proj .cover{clip-path:inset(9% 9% 9% 9% round 22px);transition:clip-path 1.5s var(--ease)}
.proj.in .cover{clip-path:inset(0 round 22px)}
.cover>*{transform:translateY(var(--py,0)) scale(1.12);transition:transform 1s var(--ease)}
.proj:hover .cover>*{transform:translateY(var(--py,0)) scale(1.18)}
.proj h3{display:inline;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .7s var(--ease)}
.proj:hover h3{background-size:100% 1px}
.proj h3+p{margin-top:12px}

/* lab swatches open up under the pointer */
.lab-item .thumb i{transition:flex .9s var(--ease)}
.lab-item .thumb:hover i{flex:.6}
.lab-item .thumb i:hover{flex:3.2}

/* habits */
.habit .k span{transition:transform .6s var(--ease)}
.habit:hover .k span{transform:translateY(-6px) rotate(-6deg)}

/* experience */
.cv-label{margin:88px 0 0 25%;font-size:13px;color:var(--accent);font-weight:500}
.cv{margin-top:12px}
.cv .row{transition:padding-left .5s var(--ease),opacity 1.2s var(--ease),transform 1.2s var(--ease),filter 1.2s var(--ease)}
.cv .row:hover{padding-left:8px}

/* education */
.edu{border-top:1px solid var(--line)}
.edu-row{display:grid;grid-template-columns:3fr 6fr 3fr;gap:24px;padding:44px 0;border-bottom:1px solid var(--line);align-items:start}
.edu-when{font-size:13px;color:var(--muted);padding-top:14px}
.edu-main h3{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.2vw,56px);line-height:1.1;margin:0 0 6px;letter-spacing:-.02em;transition:transform .7s var(--ease)}
.edu-row:hover h3{transform:translateX(12px)}
.edu-en{font-size:13px;color:var(--muted);margin-bottom:16px}
.edu-degree{font-size:16px;font-weight:500}
.edu-courses{font-size:14px;color:var(--muted);margin-top:6px}
.edu-score{text-align:right}
.edu-score .num{font-family:var(--serif);font-size:clamp(48px,5.4vw,80px);line-height:1;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.edu-score small{font-size:14px;color:var(--muted);margin-left:4px}
.edu-score div{font-size:13px;color:var(--muted);margin-top:10px}

/* magnetic */
.nav a.l.magnet{transition:color .2s,background .2s,transform .6s var(--ease)}
.mail.magnet{transition:color .2s,border-color .2s,transform .6s var(--ease)}
.copy.magnet{transition:color .2s,border-color .2s,transform .6s var(--ease)}
.contact-memo.magnet{transition:opacity 1.2s var(--ease),filter 1.2s var(--ease),transform .6s var(--ease)}

@media (max-width:820px){
  .edu-row{grid-template-columns:1fr;gap:8px;padding:32px 0}
  .edu-score{text-align:left;margin-top:12px}
  .edu-when{padding:0}
  .cv-label{margin-left:0}
  .track .set{gap:48px;padding-right:48px}
}

@media (prefers-reduced-motion:reduce){
  body{animation:none!important}
  .rise,.hero.anim h1 .w,.hero.anim h1 .pill{filter:none!important}
  .head::before{transform:none!important;transition:none!important}
  .proj .cover{clip-path:inset(0 round 22px)!important;transition:none!important}
  .cover>*{transform:none!important}
  .track,.hero.idle *,.status::before{animation:none!important}
  .nav,.nav.hide{transform:translateX(-50%)!important}
}
/* typographic covers: keep labels inside the frame; only the big figure drifts */
.cover>.art,.proj:hover .cover>.art{transform:none}
.art>div:last-child{transform:translateY(calc(var(--py,0) * 2));transition:transform 1s var(--ease)}
.proj:hover .art>div:last-child{transform:translateY(calc(var(--py,0) * 2)) translateX(10px)}
@media (prefers-reduced-motion:reduce){.art>div:last-child{transform:none!important}}
.contact-memo:hover{animation:punch .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes punch{0%{scale:1}35%{scale:1.18;rotate:-6deg}70%{scale:.96;rotate:2deg}100%{scale:1;rotate:0deg}}
@media (prefers-reduced-motion:reduce){.contact-memo:hover{animation:none}}

/* ---------- emphasis on "product manager" ----------
   reuses the site's one emphasis rule (serif italic), plus a single hairline drawn in the accent */
.hl{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.14em;letter-spacing:-.01em;line-height:1;
  background:linear-gradient(var(--accent),var(--accent)) 0 92%/0% .045em no-repeat;padding:0 .05em .06em;margin:0 -.02em}
.hero.play .hl{animation:hl-draw 1.2s cubic-bezier(.65,0,.35,1) 1.7s both}
@keyframes hl-draw{from{background-size:0% .045em}to{background-size:100% .045em}}
@media (prefers-reduced-motion:reduce){.hl{background-size:100% .045em}.hero.play .hl{animation:none}}

/* ---------- smoother scrolling ---------- */
/* parallax uses the standalone translate property with no transition, so it tracks the scroll 1:1;
   hover zoom uses the standalone scale property and keeps its easing */
.cover>*,.proj:hover .cover>*{transform:none}
.cover>*{translate:0 var(--py,0);scale:1.12;transition:scale 1s var(--ease);will-change:translate}
.proj:hover .cover>*{scale:1.18}
.cover>.art,.proj:hover .cover>.art{scale:1;translate:none}
.art>div:last-child,.proj:hover .art>div:last-child{transform:none;translate:0 calc(var(--py,0) * 2);transition:none}
/* blur only on small text blocks; big blocks just fade and rise */
.rise{filter:none;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.head.rise,.belief.rise,.badges.rise,.contact .rise,.case-hero .rise{filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.rise.in{filter:none}
.proj .cover{will-change:clip-path}
@media (prefers-reduced-motion:reduce){.cover>*,.art>div:last-child{translate:none!important;scale:1!important}}

/* ---------- education: photo + degree list ---------- */
.edu{border-top:0}
.edu-wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.edu-photo{position:sticky;top:110px;aspect-ratio:1;max-width:460px;border-radius:22px;overflow:hidden;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted);background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(17,17,16,.025) 14px 15px)}
.edu-photo img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}
.edu-photo:hover img{scale:1.04}
.edu-item{margin-bottom:56px}
.edu-item h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.15;letter-spacing:-.015em;margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.edu-row{display:flex;align-items:center;gap:18px;width:100%;padding:4px 0 20px;background:none;border:0;border-bottom:1px solid var(--line);font:inherit;color:inherit;text-align:left;cursor:pointer}
.edu-logo{flex:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.edu-logo img{height:44px;width:40px;max-width:none;object-fit:cover;object-position:left center;opacity:.85}
.edu-logo b{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:400;font-size:20px;opacity:.85}
.edu-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.edu-school{font-size:16px;font-weight:500}
.edu-meta{font-size:14px;color:var(--muted)}
.edu-plus{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--soft);position:relative;transition:transform .6s var(--ease),background .3s,border-color .3s}
.edu-plus::before,.edu-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--ink);border-radius:1px}
.edu-plus::after{transform:rotate(90deg)}
.edu-row:hover .edu-plus{border-color:var(--ink);background:rgba(17,17,16,.04)}
.edu-item.open .edu-plus{transform:rotate(45deg);background:var(--ink);border-color:var(--ink)}
.edu-item.open .edu-plus::before,.edu-item.open .edu-plus::after{background:var(--bg)}
.edu-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.edu-detail>div{overflow:hidden}
.edu-item.open .edu-detail{grid-template-rows:1fr}
.edu-detail dl{margin:0;padding:20px 0 4px 66px;display:grid;gap:12px;opacity:0;translate:0 -8px;transition:opacity .5s var(--ease),translate .7s var(--ease)}
.edu-item.open .edu-detail dl{opacity:1;translate:none;transition-delay:.12s}
.edu-detail dl>div{display:grid;grid-template-columns:88px 1fr;gap:12px;font-size:14px}
.edu-detail dt{color:var(--muted)}
.edu-detail dd{margin:0}
@media (max-width:820px){
  .edu-wrap{grid-template-columns:1fr}
  .edu-photo{position:static;max-width:none;aspect-ratio:4/3}
  .edu-detail dl{padding-left:0}
}
.edu-logo img.contain{width:48px;height:auto;object-fit:contain}
.edu-logo img.contain{opacity:.62}
.edu-photo{aspect-ratio:4/5}.edu-photo img{object-position:50% 38%}@media (max-width:820px){.edu-photo{aspect-ratio:4/5;max-width:420px}}

/* =========================================================
   ONE GRID FOR EVERY SECTION
   Every section head is 3fr | 9fr with a 24px gutter. Anything that
   "starts at the content column" uses --indent, which is the exact
   x-position of that second column, so titles, lists and text share one edge.
   ========================================================= */
:root{--gut:24px;--indent:calc((100% - var(--gut)) / 4 + var(--gut))}
.head{grid-template-columns:3fr 9fr;column-gap:var(--gut);row-gap:8px}
.tags{margin:-24px 0 32px var(--indent)}
#habits{margin-left:var(--indent)}
.cv-label{margin:88px 0 0 var(--indent)}
.cv{margin:12px 0 0 var(--indent)}

/* education sits on the same grid: photo in the label column, degrees under the title */
.edu-wrap{grid-template-columns:3fr 9fr;column-gap:var(--gut)}
.edu-photo{max-width:none;width:100%;aspect-ratio:4/5;top:96px}
.edu-item{margin-bottom:48px}
.edu-item:last-child{margin-bottom:0}
.edu-item h3{font-size:clamp(26px,2.6vw,34px);margin:0;padding:0 0 16px}
.edu-row{padding:20px 0}
.edu-detail dl{padding-left:66px}

@media (max-width:820px){
  :root{--indent:0px}
  .head{grid-template-columns:1fr}
  .edu-wrap{grid-template-columns:1fr;row-gap:32px}
  .edu-photo{position:static;max-width:360px}
  .edu-detail dl{padding-left:0}
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */
/* secondary text was #86857f (≈3.4:1 on the background); this is ≈5.1:1, passing WCAG AA */
:root{--muted:#6e6d67}
.chip{color:#4a4945}
.chip.hot{color:#9a3c0a}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.edu-row:focus-visible{outline-offset:-2px}
@media (max-width:560px){.nav a.l{padding:10px 9px}}

/* =========================================================
   TYPE SYSTEM
   Section titles (h1/h2) .... sans, regular, tight tracking, flush left
   Item titles (h3/h4) ....... serif — degrees, projects, habits, lab pieces
   Body ...................... sans
   ========================================================= */
.head{display:block;padding-top:22px;margin-bottom:56px}
.head>div{display:block}
.title,.contact .title{font-family:var(--sans);font-weight:400;font-size:clamp(34px,4.4vw,56px);line-height:1.12;letter-spacing:-.03em;max-width:20em}
.title em{font-family:inherit;font-style:normal}
.contact .title{max-width:15em}

.proj h3,.next .t{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.8vw,36px);line-height:1.2;letter-spacing:-.015em}
.lab-item h4{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,26px);letter-spacing:-.01em;margin:18px 0 6px}
.habit .k{font-family:var(--serif);font-weight:400}
.edu-item h3{font-family:var(--serif);font-weight:400}
.body h2{font-family:var(--serif);font-weight:400}
.case-hero h1{font-family:var(--sans);font-weight:400;letter-spacing:-.03em}
.inline-memo{height:1.1em;vertical-align:-.16em}

/* =========================================================
   BILINGUAL
   ========================================================= */
html[data-lang="zh"] .only-en,html[data-lang="en"] .only-zh{display:none!important}
.nav .lang{font:inherit;font-size:13px;font-weight:500;color:var(--ink);background:rgba(17,17,16,.06);border:0;border-radius:999px;padding:6px 12px;margin-left:4px;cursor:pointer;min-width:40px;transition:background .2s,transform .6s var(--ease)}
.nav .lang:hover{background:rgba(17,17,16,.12)}
@media (max-width:560px){.nav .lang{padding:8px 10px;margin-left:2px}}
html[data-lang="en"] .hero h1 .hl{font-size:1.14em}
html[data-lang="zh"] .hero h1 .hl{font-family:var(--serif);font-style:normal;font-size:1.04em}
html[data-lang="zh"] .hero h1{letter-spacing:-.02em}

/* =========================================================
   SECTION TITLES — key phrase in ink, the rest in grey
   ========================================================= */
.title,.contact .title{font-size:clamp(26px,2.9vw,40px);font-weight:500;line-height:1.2;letter-spacing:-.025em;color:#8f8e88;max-width:24em}
.title b{color:var(--ink);font-weight:500}
.title span{color:inherit}
.contact .title{max-width:20em;margin:0 auto}
.head{margin-bottom:48px}
.contact-memo{margin-bottom:28px}

/* shots / lab thumbs with real images */
.shot span::before{content:none}
.shot span em{font-style:normal;color:var(--accent)}
.shot.has-img{background:#efe7dc;max-height:none}
.shot.wide.has-img{aspect-ratio:auto}
.shot.wide.has-img img{position:static;width:auto;max-width:100%;max-height:640px;margin:0 auto;object-fit:contain}
.lab-item .thumb.has-img img{object-position:50% 22%}
.nav a.l,.nav .lang,.nav .me span{white-space:nowrap}
@media (max-width:640px){.hero .ln{text-wrap:balance}}
@media (max-width:400px){.nav a.l{padding:10px 7px;font-size:13px}.nav .me{padding-right:4px;margin-right:2px}}

/* =========================================================
   NAV — collapses to a small pill while reading, opens on scroll-up or hover
   ========================================================= */
.nav,.nav.hide{transform:translateX(-50%)}
.nav{gap:0;padding:5px;transition:padding .6s var(--ease),box-shadow .4s,background .4s}
.nav .me{gap:8px;padding:0 12px 0 4px;margin-right:4px;height:34px;border-right:1px solid var(--line);transition:padding .6s var(--ease),margin .6s var(--ease),border-color .4s}
.nav .me img,.nav .me img.memo{width:28px;height:28px;border-radius:0;object-fit:contain}
.nav .links{display:flex;align-items:center;gap:2px;overflow:hidden;max-width:520px;opacity:1;transition:max-width .7s var(--ease),opacity .45s var(--ease)}
.nav a.l{padding:7px 12px;font-size:14px;line-height:20px}
.nav .lang{height:34px;padding:0 12px;margin-left:4px;font-size:13px;line-height:34px}
.nav.compact .links{max-width:0;opacity:0}
.nav.compact .me{border-right-color:transparent;margin-right:0;padding-right:8px}
.nav.compact:hover .links,.nav.compact:focus-within .links{max-width:520px;opacity:1}
.nav.compact:hover .me,.nav.compact:focus-within .me{border-right-color:var(--line);margin-right:4px;padding-right:12px}
@media (max-width:560px){.nav a.l{padding:7px 8px;font-size:13px}.nav .lang{padding:0 9px}}
@media (max-width:400px){.nav .me span{display:none}.nav .me{padding-right:6px}}
@media (prefers-reduced-motion:reduce){.nav .links,.nav .me{transition:none}}

/* =========================================================
   CHINESE TYPOGRAPHY — Chinese has no true italic; emphasise with weight and ink instead
   ========================================================= */
html[data-lang="zh"] em,html[data-lang="zh"] .hl{font-style:normal}
html[data-lang="zh"] .belief em{font-family:var(--sans);font-size:1em;font-weight:600;color:var(--ink)}
html[data-lang="zh"] .hero h1 .hl{font-family:var(--sans);font-weight:500;font-size:1em}
html[data-lang="zh"] .title b{margin-right:.35em}

/* =========================================================
   LAB — two equal cards, titles on one line
   ========================================================= */
.lab-grid{grid-template-columns:1fr 1fr;gap:var(--gut)}
.lab-item:first-child,.lab-item:last-child{grid-column:auto}
.lab-item .thumb,.lab-item:last-child .thumb{aspect-ratio:4/3}
@media (max-width:640px){.lab-grid{grid-template-columns:1fr}}
#lab .tags{margin-left:0}

/* =========================================================
   COPY V2 — headings, status, bio, contact
   ========================================================= */
/* section heading: title on one line, a quieter intro underneath */
.title,.contact .title{color:var(--ink);font-size:clamp(26px,2.9vw,40px);font-weight:500;letter-spacing:-.025em;line-height:1.2;max-width:none}
.title b{display:block;font-weight:500;margin:0}
html[data-lang="zh"] .title b{margin:0}
.title span{display:block;margin-top:12px;max-width:34em;font-size:clamp(16px,1.45vw,19px);font-weight:400;line-height:1.65;letter-spacing:0;color:var(--muted)}
.title .inline-memo{height:1em;vertical-align:-.12em;margin-left:.2em}
.contact .title span{margin-left:auto;margin-right:auto;max-width:30em}
.head{margin-bottom:44px}

/* hero status: where I am now + availability */
.badges{flex-direction:column;align-items:center;gap:10px;margin-top:40px;font-size:15px}
.badges .now{color:var(--muted)}
.badges .status{color:var(--ink)}

/* hero: no sticker now, keep line rhythm even */
html[data-lang="zh"] .hero h1{font-size:clamp(32px,4.4vw,68px);line-height:1.22}
html[data-lang="zh"] .hero h1 .hl{font-weight:600}

/* about: short readable prose in the content column */
.bio{margin-left:var(--indent);max-width:36em}
.bio p{font-size:clamp(17px,1.5vw,19px);line-height:1.85;color:#33322f;margin:0 0 1.15em}
html[data-lang="en"] .bio p{line-height:1.7}
.cv-label{margin-top:80px}

/* contact: two clear actions, details underneath */
.contact-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:36px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 24px;border-radius:999px;border:1px solid var(--soft);background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .6s var(--ease)}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.primary:hover{background:#2c2b29}
.contact-info{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 20px;margin-top:20px;font-size:14px;color:var(--muted)}

/* project entry text already carries ↗ */
.go::after{content:none}
.go{transition:color .2s}
.proj:hover .go{color:var(--accent)}

@media (max-width:640px){
  .bio{margin-left:0}
  .btn{height:44px;padding:0 20px}
  .title span{margin-top:8px}
}
.title span{text-wrap:pretty}.contact .title span{max-width:34em;text-wrap:balance}.bio p{text-wrap:pretty}
.title span{white-space:pre-line}

/* =========================================================
   HERO — calm: entrance only, no idle loops
   ========================================================= */
.hero.idle .pill.avatar img,.hero.idle h1 .pill.sticker,.hero.idle .pill.swatch i{animation:none}

/* swatch becomes a flat paint-chip strip, not a capsule */
.pill.swatch,.hero.play h1 .pill.swatch{transform:none}
.hero.anim h1 .pill.swatch{transform:translateY(.15em) scale(.9)}
.hero.play h1 .pill.swatch{transform:none}
.pill.swatch{width:1.7em;height:.62em;top:-.08em;border-radius:.12em;gap:.045em;overflow:visible;background:transparent}
.pill.swatch i{flex:1;height:100%;border-radius:.06em;transition:translate .5s var(--ease)}
.pill.swatch:hover i{translate:0 -.12em}
.pill.swatch:hover i:nth-child(2){transition-delay:.04s}
.pill.swatch:hover i:nth-child(3){transition-delay:.08s}
.pill.swatch:hover i:nth-child(4){transition-delay:.12s}
.pill.swatch:hover i:nth-child(5){transition-delay:.16s}
@media (prefers-reduced-motion:reduce){.pill.swatch:hover i{translate:none}}

/* status emphasis */
.badges .status b{font-weight:600;color:var(--ink)}
.badges .status{gap:0;display:inline-block}.badges .status::before{display:inline-block;vertical-align:.12em;margin-right:9px}
/* "AI" sticker inside the hero subline, sized to the body text */
.belief .pill.sticker{font-size:.8em;height:1.75em;padding:0 .6em;margin:0 .3em;top:-.1em;gap:.3em;font-weight:500;letter-spacing:0;transform:rotate(-4deg)}
.hero.play .belief .pill.sticker{transform:rotate(-4deg)}

/* =========================================================
   DESIGNED COVERS — one system for projects, experiments, experience
   Sizes use cqw so every cover keeps its proportions at any width.
   ========================================================= */
.cover,.lab-item .thumb,.xp-cover{container-type:inline-size}
.lab-item .thumb{display:block;position:relative;background:none}
.art{position:absolute;inset:0;overflow:hidden;padding:5cqw 5.5cqw;display:block}
.art .no{position:relative;z-index:2;font-size:max(11px,2.1cqw);letter-spacing:.01em;opacity:.62}
.art .cap{position:absolute;left:5.5cqw;bottom:5cqw;right:5.5cqw;z-index:2}
.art .big{font-family:var(--serif);font-weight:400;font-size:12cqw;line-height:.95;letter-spacing:-.03em}
.art .small{margin-top:1.6cqw;font-size:max(11px,2.1cqw);opacity:.7}
.art>div:last-child,.proj:hover .art>div:last-child{translate:none}

/* 01 · agents: three stacked task cards */
.m-agents{position:absolute;right:6cqw;top:12cqw;width:44cqw}
.m-card{position:absolute;left:calc(var(--i) * 4cqw);top:calc(var(--i) * 12.5cqw);width:40cqw;padding:2.6cqw 3cqw;border-radius:2.2cqw;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:2cqw;row-gap:1.4cqw;transition:translate .8s var(--ease)}
.m-card i{width:1.8cqw;height:1.8cqw;border-radius:50%}
.m-card b{font-weight:500;font-size:max(11px,2.3cqw)}
.m-card span{grid-column:1/-1;height:.8cqw;border-radius:1cqw;background:rgba(255,255,255,.14)}
.m-card span:last-child{width:62%}
.proj:hover .m-card{translate:calc(var(--i) * -1.2cqw) 0}

/* 02 · viewfinder: corner brackets + focus box */
.m-vf{position:absolute;right:7cqw;top:11cqw;width:46cqw;height:44cqw}
.m-vf i{position:absolute;width:6cqw;height:6cqw;border:0 solid currentColor;opacity:.85}
.m-vf i:nth-child(1){left:0;top:0;border-top-width:.5cqw;border-left-width:.5cqw}
.m-vf i:nth-child(2){right:0;top:0;border-top-width:.5cqw;border-right-width:.5cqw}
.m-vf i:nth-child(3){left:0;bottom:0;border-bottom-width:.5cqw;border-left-width:.5cqw}
.m-vf i:nth-child(4){right:0;bottom:0;border-bottom-width:.5cqw;border-right-width:.5cqw}
.m-vf u{position:absolute;left:50%;top:50%;width:9cqw;height:9cqw;margin:-4.5cqw 0 0 -4.5cqw;border:.35cqw solid currentColor;border-radius:.6cqw;opacity:.9;transition:scale .8s var(--ease)}
.proj:hover .m-vf u{scale:.82}

/* 03 · specs: what the AI wrote vs the database */
.m-spec{position:absolute;right:6cqw;top:11cqw;width:50cqw;padding:3cqw 3.4cqw;border-radius:2.4cqw;background:#fff;box-shadow:0 2cqw 5cqw rgba(0,0,0,.06);font-size:max(11px,2.3cqw)}
.m-spec>div{display:grid;grid-template-columns:1.25fr 1fr 1fr;align-items:center;padding:1.7cqw 0;border-top:1px solid rgba(17,17,16,.07)}
.m-spec>.m-spec-h{border-top:0;padding-top:0;font-size:max(10px,1.8cqw);color:var(--muted)}
.m-spec span{color:var(--muted)}
.m-spec s{color:#b42318;opacity:.8;text-decoration-thickness:1px}
.m-spec b{font-weight:600;color:#15803d}
.art-specs .big{font-size:9cqw}

/* lab · the color of a memory: polaroid on lined paper */
.art-memory{background-image:repeating-linear-gradient(0deg,transparent 0 4.2cqw,rgba(120,90,60,.09) 4.2cqw calc(4.2cqw + 1px))!important}
.m-polaroid{position:absolute;left:50%;top:50%;width:38cqw;margin:0;padding:2cqw 2cqw 0;background:#fffdf9;box-shadow:0 1.5cqw 4cqw rgba(60,40,20,.16);translate:-50% -50%;rotate:-3deg;transition:rotate .8s var(--ease),scale .8s var(--ease)}
.m-polaroid img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.m-polaroid figcaption{padding:2.4cqw 0 2.6cqw;text-align:center;color:#4a3828}
.m-polaroid b{display:block;font-family:"Songti SC","Noto Serif SC",serif;font-style:italic;font-weight:500;font-size:4cqw;letter-spacing:.06em}
.m-polaroid span{display:block;margin-top:.6cqw;font-family:var(--serif);font-style:italic;font-size:max(10px,2.1cqw);opacity:.7}
.lab-item:hover .m-polaroid{rotate:0deg;scale:1.03}
.art-memory .cap{display:none}

/* lab · this site, in miniature */
.art-site{border:1px solid var(--line)}
.m-site{position:absolute;inset:14cqw 8cqw 8cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqw}
.m-site-nav{position:absolute;top:-8cqw;left:50%;translate:-50% 0;display:flex;align-items:center;gap:1.6cqw;padding:1cqw 2cqw 1cqw 1cqw;border:1px solid var(--line);border-radius:5cqw;background:#fff}
.m-site-nav img{width:3.6cqw;height:3.6cqw;object-fit:contain}
.m-site-nav i{width:5cqw;height:.9cqw;border-radius:1cqw;background:#dcdad4}
.m-site-h{display:flex;align-items:center;gap:1.4cqw;font-size:6.4cqw;letter-spacing:-.03em;font-weight:400;white-space:nowrap}
.m-site-h img{width:6cqw;height:6cqw;object-fit:contain}
.m-site-sw{display:flex;gap:.6cqw;height:3.2cqw;width:14cqw}
.m-site-sw i{flex:1;border-radius:.4cqw;transition:translate .5s var(--ease)}
.lab-item:hover .m-site-sw i{translate:0 -.8cqw}
.lab-item:hover .m-site-sw i:nth-child(2){transition-delay:.04s}
.lab-item:hover .m-site-sw i:nth-child(3){transition-delay:.08s}
.lab-item:hover .m-site-sw i:nth-child(4){transition-delay:.12s}
.lab-item:hover .m-site-sw i:nth-child(5){transition-delay:.16s}
.art-site .cap{display:none}

/* experience motifs */
.art-code .big{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:16cqw;letter-spacing:.05em}
.m-ball{position:absolute;right:9cqw;top:16cqw;width:22cqw;height:22cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 30%,#f4ece6 70%,#e6d8cd);box-shadow:0 2cqw 4cqw rgba(60,30,15,.12)}
.m-ball::after{content:"";position:absolute;inset:-1cqw;border-radius:50%;border:1px dashed rgba(59,33,22,.25);scale:1.4}
.m-quote{position:absolute;right:7cqw;top:2cqw;font-family:var(--serif);font-size:44cqw;line-height:1;opacity:.14}
.m-play{position:absolute;right:9cqw;top:14cqw;width:24cqw;height:24cqw;border-radius:50%;border:.5cqw solid currentColor;opacity:.9;display:flex;align-items:center;justify-content:center}
.m-play i{width:0;height:0;margin-left:2cqw;border-style:solid;border-width:4.6cqw 0 4.6cqw 7.6cqw;border-color:transparent transparent transparent currentColor}
.xp:hover .m-ball{translate:0 -1.4cqw}
.m-ball{transition:translate .7s var(--ease)}

/* experience as cards */
.cv{display:grid;grid-template-columns:1fr 1fr;gap:44px var(--gut)}
.xp-cover{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;margin-bottom:16px}
.xp-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.xp-meta b{font-weight:500;font-size:15px;line-height:1.45}
.xp-meta time{flex:none;font-size:13px;color:var(--muted)}
.xp p{margin:8px 0 0;font-size:14px;line-height:1.7;color:var(--muted)}
@media (max-width:640px){.cv{grid-template-columns:1fr;gap:36px}}
@media (prefers-reduced-motion:reduce){.m-card,.m-vf u,.m-polaroid,.m-ball{transition:none}}
.lab-item .thumb .m-site-nav img{width:3.6cqw;height:3.6cqw;object-fit:contain}
.lab-item .thumb .m-site-h img{width:6cqw;height:6cqw;object-fit:contain}
.lab-item .thumb .m-polaroid img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}

/* =========================================================
   USER FEEDBACK — anonymised quote cards + one story card
   ========================================================= */
.quotes{columns:2;column-gap:14px;margin:20px 0 10px}
.quote{break-inside:avoid;margin:0 0 14px;padding:22px 22px 20px;background:#fff;border-radius:18px;position:relative;transition:translate .6s var(--ease),box-shadow .6s var(--ease)}
.quote::before{content:"“";position:absolute;top:6px;left:16px;font-family:var(--serif);font-size:52px;line-height:1;color:var(--accent);opacity:.35}
.quote blockquote{margin:0;padding-top:18px;font-size:15px;line-height:1.75;color:#2a2926}
.quote:hover{translate:0 -3px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.story{margin:22px 0 8px;padding:26px 28px;border-radius:20px;background:#f26b1d;color:#fff8f2}
.story-label{display:block;font-size:12px;letter-spacing:.04em;opacity:.8;margin-bottom:10px}
.story p{margin:0;font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);line-height:1.45;color:inherit}
html[data-lang="zh"] .story p{font-family:var(--sans);font-weight:500;font-size:clamp(18px,1.9vw,22px);line-height:1.6}
@media (max-width:640px){.quotes{columns:1}}
@media (prefers-reduced-motion:reduce){.quote{transition:none}}
/* a standalone result line under a project summary */
.proj p.stat{margin:-8px 0 22px;padding-left:12px;border-left:2px solid var(--accent);font-size:14px;line-height:1.6;color:var(--ink)}
.case-hero .stat{margin:18px 0 0;padding-left:14px;border-left:2px solid var(--accent);font-size:clamp(15px,1.3vw,17px);color:var(--ink);max-width:40em}
.proj h3,.case-hero h1,.next .t{white-space:pre-line}

/* =========================================================
   CASE PAGE MOTION — children reveal in sequence once their section is in view
   ========================================================= */
/* quotes: plain grid (multi-column + hover movement caused reflow flicker) */
.quotes{columns:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.quote{margin:0;transition:box-shadow .5s var(--ease),opacity .8s var(--ease),translate .8s var(--ease)}
.quote:hover{translate:none;box-shadow:0 10px 30px rgba(0,0,0,.06)}
@media (max-width:640px){.quotes{grid-template-columns:1fr}}

:root{--step:70ms}
.case-cover .cover{clip-path:inset(8% 8% 8% 8% round 22px);transition:clip-path 1.5s var(--ease)}
.case-cover.in .cover{clip-path:inset(0 round 22px)}

.meta>div{opacity:0;translate:0 10px;transition:opacity .8s var(--ease),translate .8s var(--ease);transition-delay:calc(var(--d,0) * var(--step) + 150ms)}
.meta.in>div{opacity:1;translate:none}

.body section .flow span,.body section .flow i,
.body section li,.body section tr,.body section .quote,
.body section .cmp>div,.body section .story,.body section .limits,.body section .shot{
  opacity:0;translate:0 12px;transition:opacity .8s var(--ease),translate .8s var(--ease),box-shadow .5s var(--ease);
  transition-delay:calc(var(--d,0) * var(--step) + 200ms)}
.body section.in .flow span,.body section.in .flow i,
.body section.in li,.body section.in tr,.body section.in .quote,
.body section.in .cmp>div,.body section.in .story,.body section.in .limits,.body section.in .shot{opacity:1;translate:none}
.body section .cmp>.a{transition-delay:420ms}
.body section .story{transition-delay:560ms}

/* the struck "before" text gets its line drawn */
.cmp .b{position:relative}
.callout{position:relative;border-left-color:transparent}
.callout::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease) .25s}
.body section.in .callout::before{transform:none}

/* section number slides in */
.body h2 small{display:inline-block;translate:-10px 0;opacity:0;transition:translate .8s var(--ease),opacity .8s var(--ease)}
.body section.in h2 small{translate:none;opacity:1}

@media (prefers-reduced-motion:reduce){
  .meta>div,.body section *,.case-cover .cover,.callout::before{opacity:1!important;translate:none!important;transform:none!important;clip-path:none!important;transition:none!important}
}
.body h2 small{display:block;width:max-content}
.case-hero .visit{margin-top:24px;background:var(--ink);border-color:var(--ink);color:var(--bg)}.case-hero .visit:hover{background:#2c2b29}

/* full-width product screenshot in a minimal browser frame */
.shots:has(.shot-full){display:block}
.shot-full{margin:8px 0 0;opacity:0;translate:0 16px;transition:opacity .9s var(--ease),translate .9s var(--ease);transition-delay:200ms}
.body section.in .shot-full{opacity:1;translate:none}
.shot-full .browser{display:flex;gap:6px;padding:11px 14px;background:#ecebe7;border-radius:14px 14px 0 0}
.shot-full .browser i{width:10px;height:10px;border-radius:50%;background:#d3d1cb}
.shot-full img{display:block;width:100%;height:auto;border-radius:0 0 14px 14px;box-shadow:0 18px 50px rgba(0,0,0,.08)}
.shot-full figcaption{margin-top:12px;font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.shot-full{opacity:1;translate:none;transition:none}}

/* =========================================================
   CASE PAGE — screenshot cover, phone gallery, testimonial wall
   ========================================================= */
/* real product screenshot as the case cover */
.case-shot{margin:0 0 56px}
.case-shot .browser{display:flex;gap:7px;padding:13px 16px;background:#ecebe7;border-radius:18px 18px 0 0}
.case-shot .browser i{width:11px;height:11px;border-radius:50%;background:#d3d1cb}
.case-shot img{display:block;width:100%;height:auto;border-radius:0 0 18px 18px;box-shadow:0 30px 70px rgba(0,0,0,.09)}
.case-shot figcaption{margin-top:12px;font-size:13px;color:var(--muted)}

/* two phones side by side, a sheet card underneath */
.phones{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px);margin:28px 0 0;padding:clamp(24px,4vw,44px);border-radius:24px;background:#ecebe6}
.phone{margin:0}
.phone:nth-child(2){margin-top:clamp(28px,5vw,56px)}
.phone-frame{border-radius:clamp(22px,3.4vw,34px);padding:clamp(6px,.9vw,9px);background:#1d1d1f;box-shadow:0 24px 50px rgba(0,0,0,.14)}
.phone-frame img{display:block;width:100%;height:auto;border-radius:clamp(16px,2.6vw,26px)}
.phone figcaption,.sheet figcaption{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted)}
.sheet{margin:16px 0 0;padding:clamp(20px,3.4vw,36px);border-radius:24px;background:#ecebe6}
.sheet img{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.08)}
.sheet figcaption{text-align:center}
.body section .phone,.body section .sheet{opacity:0;translate:0 16px;transition:opacity .9s var(--ease),translate .9s var(--ease);transition-delay:calc(var(--d,0) * 120ms + 200ms)}
.body section.in .phone,.body section.in .sheet{opacity:1;translate:none}

/* testimonial wall: two staggered columns, varied cards */
.wall{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 10px;align-items:start}
.wall-col{display:flex;flex-direction:column;gap:14px}
.wall-col:nth-child(2){padding-top:clamp(36px,6vw,64px)}
.wall .quote{margin:0;padding:24px 24px 22px;border-radius:20px;background:#fff;transition:box-shadow .5s var(--ease),opacity .8s var(--ease),translate .8s var(--ease)}
.wall .quote:hover{translate:none;box-shadow:0 12px 32px rgba(0,0,0,.06)}
.wall .quote.tint{background:#f1ede6}
.wall .quote.featured{background:#1d1d1f;color:#f5f5f3;padding:30px 26px 28px}
.wall .quote.featured::before{color:#f26b1d;opacity:.9}
.wall .quote.featured blockquote{font-size:clamp(20px,2.2vw,26px);line-height:1.45;color:inherit;font-weight:500;letter-spacing:-.01em}
html[data-lang="en"] .wall .quote.featured blockquote{font-family:var(--serif);font-weight:400}
@media (max-width:640px){
  .wall{grid-template-columns:1fr}
  .wall-col:nth-child(2){padding-top:0}
  .phones{gap:12px;padding:18px}
}
/* phones + a small critique-tag card as a third column */
.phones.has-card{grid-template-columns:1fr 1fr .9fr;align-items:center}
.phones.has-card .phone:nth-child(2){margin-top:clamp(28px,5vw,56px)}
.phones .sheet{margin:0;padding:0;background:none;align-self:center}
.phones .sheet img{max-width:none;border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.1)}
.phones .sheet figcaption{text-align:left}
@media (max-width:640px){
  .phones.has-card{grid-template-columns:1fr 1fr}
  .phones.has-card .sheet{grid-column:1/-1;max-width:300px;margin:8px auto 0}
  .phones .sheet figcaption{text-align:center}
}

/* =========================================================
   DEMO · marketing content agent (illustrative, redrawn)
   Everything sized in cqw so the whole scene scales as one picture.
   ========================================================= */
.demo{--p:#5b4fe0;position:relative;container-type:inline-size;aspect-ratio:16/10.4;margin:24px 0 10px;border-radius:22px;background:#ecebe6;overflow:hidden;font-family:var(--sans);color:#1d1d1f;user-select:none}
.demo-tag{position:absolute;left:2.4cqw;top:2cqw;z-index:6;font-size:max(10px,1.4cqw);padding:.5cqw 1.2cqw;border-radius:2cqw;background:rgba(255,255,255,.75);color:var(--muted)}
.d-app{position:absolute;inset:6.4cqw 3.6cqw 3.6cqw;display:grid;grid-template-columns:17cqw 1fr;border-radius:1.6cqw;background:#fff;box-shadow:0 2cqw 5cqw rgba(0,0,0,.08);overflow:hidden}
.d-side{background:#f6f6f8;padding:2.2cqw 1.4cqw;display:flex;flex-direction:column;gap:.6cqw;border-right:1px solid #ececf0}
.d-logo{display:flex;align-items:center;gap:.9cqw;font-size:1.7cqw;font-weight:600;margin-bottom:1.6cqw}
.d-logo b{display:grid;place-items:center;width:2.6cqw;height:2.6cqw;border-radius:.7cqw;background:var(--p);color:#fff;font-size:1.3cqw}
.d-side i{font-style:normal;font-size:1.3cqw;color:#7a7a85;padding:.9cqw 1cqw;border-radius:.8cqw}
.d-side i.on{background:#fff;color:var(--p);box-shadow:0 .2cqw .6cqw rgba(0,0,0,.05)}
.d-main{padding:2.4cqw 2.6cqw}
.d-seg{display:inline-flex;gap:.4cqw;padding:.4cqw;border-radius:2cqw;background:#f1f1f4;font-size:1.2cqw}
.d-seg b,.d-seg span{padding:.5cqw 1.4cqw;border-radius:2cqw;font-weight:500}
.d-seg b{background:#1d1d1f;color:#fff}
.d-seg span{color:#8a8a94}
.d-h{margin:2cqw 0 1.4cqw;font-size:1.8cqw;font-weight:600}
.d-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4cqw}
.d-card{border-radius:1.2cqw;overflow:hidden;background:#fff;border:1px solid #ececf0;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.d-card b{display:block;padding:1cqw 1cqw .2cqw;font-size:1.15cqw;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-card em{display:block;margin:.6cqw 1cqw 1cqw;padding:.5cqw 0;border:1px solid #e3e1f6;border-radius:.6cqw;text-align:center;font-style:normal;font-size:1cqw;color:var(--p)}
.d-thumb{display:flex;gap:.5cqw;padding:.8cqw;aspect-ratio:4/3;background:linear-gradient(135deg,var(--a),var(--b))}
.d-thumb i{flex:1;border-radius:.5cqw;background:rgba(255,255,255,.14)}
.d-card.press{transform:scale(.96);border-color:var(--p);box-shadow:0 0 0 .3cqw rgba(91,79,224,.18)}

/* template detail modal */
.d-modal{position:absolute;inset:8cqw 9cqw 6cqw;z-index:3;display:grid;grid-template-columns:38% 1fr;border-radius:1.8cqw;background:#fff;box-shadow:0 3cqw 8cqw rgba(0,0,0,.18);overflow:hidden;opacity:0;scale:.94;pointer-events:none;transition:opacity .45s var(--ease),scale .6s var(--ease)}
.demo::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(20,20,24,.32);opacity:0;transition:opacity .45s}
.demo:not([data-step="0"])::after{opacity:1}
.demo:not([data-step="0"]) .d-modal{opacity:1;scale:1}
.d-prev{display:grid;place-items:center;background:#f1f1f4}
.d-phone{position:relative;width:62%;aspect-ratio:9/16;border-radius:1.6cqw;background:radial-gradient(circle at 50% 38%,#e9e6e1 0 26%,#8f8b86 60%,#3a3836);overflow:hidden}
.d-face{position:absolute;left:50%;top:38%;width:38%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:#f4f2ee;box-shadow:inset 0 -1cqw 2cqw rgba(0,0,0,.08)}
.d-face::before,.d-face::after{content:"";position:absolute;top:40%;width:20%;aspect-ratio:1;border-radius:50%;background:#1f2430}
.d-face::before{left:22%}.d-face::after{right:22%}
.d-phone u{position:absolute;left:8%;bottom:7%;width:4cqw;height:4cqw;border-radius:50%;background:rgba(255,255,255,.85)}
.d-phone u::after{content:"";position:absolute;left:42%;top:30%;border-style:solid;border-width:.8cqw 0 .8cqw 1.2cqw;border-color:transparent transparent transparent #1d1d1f}
.d-form{padding:2.4cqw 2.6cqw;display:flex;flex-direction:column;gap:.8cqw;min-width:0}
.d-title{font-size:1.7cqw;font-weight:600}
.d-form small{font-size:1.05cqw;color:#8a8a94;margin-top:-.4cqw}
.d-form label{margin-top:.8cqw;padding-left:.8cqw;border-left:.25cqw solid var(--p);font-size:1.15cqw;font-weight:600}
.d-slots{display:flex;gap:.9cqw;padding:1cqw;border-radius:1cqw;background:#f6f6f8}
.d-slots i{width:4.6cqw;aspect-ratio:1;border-radius:.7cqw;border:1px dashed #c9c8d3;background:#fff;position:relative;transition:background .35s var(--ease),border-color .35s,scale .35s var(--ease)}
.d-slots i::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;font-size:1.6cqw;color:#b3b2bf}
.d-slots i.on{background:linear-gradient(140deg,var(--c),#2f3e46);border:1px solid transparent;scale:1.04}
.d-slots i.on::after{content:""}
.d-selects{display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw}
.d-selects span{padding:.8cqw 1cqw;border:1px solid #e6e6ec;border-radius:.7cqw;font-size:1.05cqw;color:#55545e}
.d-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6cqw;counter-reset:l}
.d-lines li{counter-increment:l;min-height:3.3cqw;padding:.8cqw 1cqw;border:1px solid #ececf0;border-radius:.7cqw;font-size:1.1cqw;line-height:1.5;color:#33323a}
.d-lines li::before{content:counter(l);display:inline-block;width:1.8cqw;color:var(--p)}
.d-go{position:relative;align-self:flex-end;margin-top:auto;padding:.9cqw 2.2cqw;border-radius:.7cqw;background:var(--p);color:#fff;font-size:1.2cqw;font-weight:500;overflow:hidden;transition:scale .25s var(--ease)}
.d-go i{position:absolute;left:0;bottom:0;height:.35cqw;width:0;background:rgba(255,255,255,.85)}
.d-go.press{scale:.95}
.demo[data-step="2"] .d-go i{width:100%;transition:width 1.8s cubic-bezier(.4,0,.2,1)}

/* result */
.d-done{position:absolute;right:5cqw;bottom:5cqw;z-index:4;display:flex;align-items:center;gap:1.4cqw;padding:1.2cqw 2cqw 1.2cqw 1.2cqw;border-radius:1.4cqw;background:#fff;box-shadow:0 2cqw 5cqw rgba(0,0,0,.18);opacity:0;translate:0 2cqw;transition:opacity .5s var(--ease),translate .6s var(--ease)}
.demo[data-step="3"] .d-done{opacity:1;translate:none}
.d-done-thumb{position:relative;width:5.4cqw;aspect-ratio:9/16;border-radius:.8cqw;background:radial-gradient(circle at 50% 38%,#e9e6e1 0 26%,#8f8b86 60%,#3a3836);overflow:hidden}
.d-done b{display:block;font-size:1.5cqw;font-weight:600}
.d-done b::before{content:"✓";display:inline-grid;place-items:center;width:2cqw;height:2cqw;margin-right:.7cqw;border-radius:50%;background:#22c55e;color:#fff;font-size:1.1cqw}
.d-done small{display:block;margin-top:.4cqw;font-size:1.1cqw;color:#8a8a94}

/* cursor */
.d-cursor{position:absolute;z-index:5;left:62%;top:92%;width:2.2cqw;height:2.2cqw;transition:left .9s cubic-bezier(.45,0,.2,1),top .9s cubic-bezier(.45,0,.2,1);pointer-events:none}
.d-cursor::before{content:"";position:absolute;inset:0;background:#1d1d1f;clip-path:polygon(0 0,0 85%,24% 64%,42% 100%,56% 94%,38% 58%,70% 58%);filter:drop-shadow(0 0 .15cqw #fff) drop-shadow(0 .3cqw .4cqw rgba(0,0,0,.25))}
.demo[data-step="3"] .d-cursor{opacity:0;transition:opacity .4s}
@media (prefers-reduced-motion:reduce){.d-cursor{display:none}.demo *{transition:none!important}}
.d-grid{row-gap:1.2cqw}.d-thumb{aspect-ratio:16/10}

/* =========================================================
   DEMO · data analysis agent
   step 0 template modal → 1 AI fetches data → 2 dashboard builds → 3 done
   ========================================================= */
.demo-analysis{--p:#2f6bff}
/* the modal belongs to step 0 here, not to steps 1+ */
.demo-analysis.demo::after{opacity:0}
.demo-analysis[data-step="0"]::after{opacity:1}
.demo-analysis .d-modal{opacity:0;scale:.94}
.demo-analysis[data-step="0"] .d-modal{opacity:1;scale:1}
.a-modal{inset:9cqw 12cqw 7cqw;display:flex;flex-direction:column;gap:1.4cqw;padding:3cqw 3.2cqw}
.a-mhead{display:flex;align-items:center;gap:1.2cqw}
.a-mhead b{font-family:var(--serif);font-weight:400;font-size:2.6cqw}
html[data-lang="zh"] .a-mhead b{font-family:"Songti SC","Noto Serif SC",serif;font-weight:600;font-size:2.3cqw}
.a-mhead span{padding:.4cqw 1cqw;border-radius:.6cqw;background:#e8f0ff;color:var(--p);font-size:1.15cqw}
.a-modal p{margin:0;font-size:1.25cqw;line-height:1.7;color:#6b6b75}
.a-preview{flex:1;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:auto 1fr;gap:.8cqw;padding:1.4cqw;border-radius:1.2cqw;background:#f4f6fb}
.a-preview i{height:4.4cqw;border-radius:.7cqw;background:#fff}
.a-preview u{grid-column:1/-1;border-radius:.7cqw;background:repeating-linear-gradient(90deg,#fff 0 3.6%,#cfdcff 3.6% 5.2%,#fff 5.2% 8.3%)}
.a-foot{display:flex;justify-content:flex-end;gap:1cqw}
.a-foot span{padding:1cqw 2.4cqw;border-radius:.8cqw;font-size:1.25cqw;font-weight:500}
.a-ghost{background:#f2f2f5;color:#33323a}
.a-use{background:linear-gradient(90deg,#3b82f6,#38bdf8);color:#fff;transition:scale .25s var(--ease)}
.a-use.press{scale:.95}

.a-main{position:relative}
/* AI fetching checklist */
.a-check{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2cqw;opacity:0;transition:opacity .4s}
.demo-analysis[data-step="1"] .a-check{opacity:1}
.a-check b{font-size:1.8cqw;font-weight:600}
.a-check b::before{content:"";display:inline-block;width:1.4cqw;height:1.4cqw;margin-right:1cqw;border-radius:50%;border:.25cqw solid #d6e2ff;border-top-color:var(--p);vertical-align:-.15cqw;animation:spin .8s linear infinite}
@keyframes spin{to{rotate:360deg}}
.a-check ul{list-style:none;margin:0;padding:0;display:grid;gap:1cqw;min-width:30cqw}
.a-check li{display:flex;align-items:center;gap:1.2cqw;padding:1.1cqw 1.4cqw;border-radius:1cqw;background:#f6f7fb;font-size:1.35cqw;color:#9a9aa5;transition:color .3s,background .3s}
.a-check li::before{content:"";flex:none;width:1.8cqw;height:1.8cqw;border-radius:50%;border:1px solid #d5d5de;transition:background .3s,border-color .3s}
.a-check li.on{color:#1d1d1f;background:#eef3ff}
.a-check li.on::before{background:var(--p) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;border-color:var(--p)}

/* dashboard */
.a-dash{position:absolute;inset:2.2cqw 2.4cqw;display:flex;flex-direction:column;gap:1.4cqw;opacity:0;transition:opacity .4s}
.demo-analysis[data-step="2"] .a-dash,.demo-analysis[data-step="3"] .a-dash{opacity:1}
.a-head{display:flex;justify-content:space-between;align-items:center}
.a-head b{font-size:1.7cqw;font-weight:600}
.a-badge{padding:.5cqw 1.2cqw;border-radius:2cqw;background:#e9f9ef;color:#15803d;font-size:1.1cqw;font-weight:500;opacity:0;translate:0 .6cqw;transition:opacity .4s,translate .5s var(--ease)}
.a-badge::before{content:"✓ "}
.demo-analysis[data-step="3"] .a-badge{opacity:1;translate:none}
.a-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:.9cqw}
.a-kpi{padding:1cqw 1.1cqw;border-radius:1cqw;border:1px solid #eceef4;background:#fff;opacity:0;translate:0 1cqw;transition:opacity .45s var(--ease),translate .5s var(--ease);transition-delay:calc(var(--d) * 90ms)}
.demo-analysis[data-step="2"] .a-kpi,.demo-analysis[data-step="3"] .a-kpi{opacity:1;translate:none}
.a-kpi small{display:block;font-size:1cqw;color:#8a8a94;white-space:nowrap}
.a-kpi b{display:block;margin:.5cqw 0 .4cqw;font-size:2cqw;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.a-kpi b i{font-style:normal;font-size:1cqw;font-weight:500;margin-left:.2cqw;color:#6b6b75}
.a-kpi em{font-style:normal;font-size:.95cqw;font-weight:600;padding:.2cqw .5cqw;border-radius:.4cqw}
.a-kpi em.up{color:#dc2626;background:#fdecec}
.a-kpi em.down{color:#15803d;background:#e9f9ef}
.a-chart{flex:1;min-height:0;display:flex;flex-direction:column;padding:1.2cqw 1.4cqw;border-radius:1cqw;border:1px solid #eceef4}
.a-legend{display:flex;align-items:center;justify-content:center;gap:.6cqw;font-size:1cqw;color:#55545e}
.a-legend .sq{width:1.6cqw;height:.9cqw;border-radius:.2cqw;background:var(--p)}
.a-legend .ln{width:1.8cqw;height:.25cqw;margin-left:1.2cqw;background:#dc2626;border-radius:1cqw}
.a-chart svg{flex:1;width:100%;min-height:0}
.a-grid line{stroke:#eef0f5;stroke-width:1;vector-effect:non-scaling-stroke}
.a-bar{fill:var(--p);transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .7s var(--ease);transition-delay:calc(400ms + var(--d) * 60ms)}
.demo-analysis[data-step="2"] .a-bar,.demo-analysis[data-step="3"] .a-bar{transform:none}
.a-line{fill:none;stroke:#dc2626;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1) 1.1s}
.demo-analysis[data-step="2"] .a-line,.demo-analysis[data-step="3"] .a-line{stroke-dashoffset:0}
.a-dot{fill:#fff;stroke:#dc2626;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .3s;transition-delay:calc(1.2s + var(--d) * 110ms)}
.demo-analysis[data-step="2"] .a-dot,.demo-analysis[data-step="3"] .a-dot{opacity:1}
/* resetting to step 0 should snap back, not animate backwards */
.demo-analysis[data-step="0"] .a-bar,.demo-analysis[data-step="0"] .a-line,.demo-analysis[data-step="0"] .a-dot,.demo-analysis[data-step="0"] .a-kpi,.demo-analysis[data-step="1"] .a-bar,.demo-analysis[data-step="1"] .a-line,.demo-analysis[data-step="1"] .a-dot,.demo-analysis[data-step="1"] .a-kpi{transition:none}
.demo-analysis[data-step="3"] .d-cursor{opacity:0}
@media (prefers-reduced-motion:reduce){.a-check b::before{animation:none}}
/* analysis: beat the marketing rule that shows the modal on every step after 0 */
.demo.demo-analysis:not([data-step="0"]) .d-modal{opacity:0;scale:.94}
.demo.demo-analysis:not([data-step="0"])::after{opacity:0}
/* car instead of a robot: warm dusk backdrop, side-profile car */
.d-phone,.d-done-thumb{background:linear-gradient(180deg,#e9d8c2 0%,#c8a98b 45%,#5a4c42 78%,#2c2622 100%)}
.d-car{position:absolute;left:6%;right:6%;bottom:24%;width:88%;height:auto}
.d-done-thumb .d-car{bottom:22%}

/* =========================================================
   DEMO · KOL agent
   0 type brief → 1 results → 2 invite modal → 3 follow-up → 4 reply
   ========================================================= */
.demo-kol{--p:#2f6bff}
/* modal only on step 2 (override the marketing rule) */
.demo.demo-kol:not([data-step="2"]) .d-modal{opacity:0;scale:.94}
.demo.demo-kol:not([data-step="2"])::after{opacity:0}
.demo.demo-kol[data-step="2"] .d-modal{opacity:1;scale:1}
.demo.demo-kol[data-step="2"]::after{opacity:1}
/* nav highlight follows the view */
.demo-kol .k-nav-find{background:#fff;color:var(--p);box-shadow:0 .2cqw .6cqw rgba(0,0,0,.05)}
.demo-kol[data-step="3"] .k-nav-find,.demo-kol[data-step="4"] .k-nav-find{background:none;color:#7a7a85;box-shadow:none}
.demo-kol[data-step="3"] .k-nav-follow,.demo-kol[data-step="4"] .k-nav-follow{background:#fff;color:var(--p);box-shadow:0 .2cqw .6cqw rgba(0,0,0,.05)}
.k-main{position:relative;padding:0}

/* chat view */
.k-chat{position:absolute;inset:0;padding:2.2cqw 2.6cqw;display:flex;flex-direction:column;gap:1.1cqw;transition:opacity .4s}
.demo-kol[data-step="3"] .k-chat,.demo-kol[data-step="4"] .k-chat{opacity:0}
.k-user{align-self:flex-end;max-width:78%;padding:1cqw 1.4cqw;border-radius:1cqw 1cqw .3cqw 1cqw;background:#eaf0ff;font-size:1.2cqw;line-height:1.6}
.k-ai{font-size:1.25cqw}
.k-chips{display:flex;gap:.7cqw}
.k-chips span{padding:.5cqw 1.2cqw;border-radius:.6cqw;background:#eef3ff;color:var(--p);font-size:1.05cqw}
.k-cards{display:grid;gap:.9cqw}
.k-card{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1.3cqw;padding:1.2cqw 1.4cqw;border:1px solid #eceef4;border-radius:1.1cqw;background:#fff}
.k-card>i,.k-profile>i{display:grid;place-items:center;width:3.2cqw;height:3.2cqw;border-radius:50%;background:#eef3ff;color:var(--p);font-style:normal;font-size:1.3cqw;font-weight:600}
.k-card b{display:block;font-size:1.3cqw;font-weight:600}
.k-card b small{font-size:1cqw;font-weight:400;color:#8a8a94}
.k-card span{display:block;margin-top:.3cqw;font-size:1cqw;color:#8a8a94}
.k-card em{font-style:normal;font-size:1.6cqw;font-weight:700}
.k-card u{text-decoration:none;padding:.7cqw 1.4cqw;border-radius:.6cqw;background:var(--p);color:#fff;font-size:1.05cqw}
.k-actions{display:flex;justify-content:flex-end;gap:.8cqw}
.k-actions span{padding:.8cqw 1.8cqw;border-radius:.7cqw;border:1px solid #e3e5ec;font-size:1.1cqw}
.k-actions .k-all{background:var(--p);border-color:var(--p);color:#fff;transition:scale .25s var(--ease)}
.k-all.press,.k-send.press,.k-send2.press{scale:.94}
.k-input{margin-top:auto;display:flex;align-items:center;gap:1cqw;padding:1.2cqw 1.4cqw;border:1px solid #e3e5ec;border-radius:1.1cqw;min-height:4.6cqw}
.k-typed{flex:1;font-size:1.2cqw;line-height:1.5}
.k-typed:empty::before{content:"…";color:#b5b5be}
.k-send{display:grid;place-items:center;width:3cqw;height:2.4cqw;border-radius:.6cqw;background:var(--p);color:#fff;font-size:1.3cqw;transition:scale .25s var(--ease)}
/* results appear only from step 1 */
.k-user,.k-ai,.k-chips,.k-card,.k-actions{opacity:0;translate:0 .8cqw;transition:opacity .45s var(--ease),translate .5s var(--ease)}
.demo-kol:not([data-step="0"]) .k-user{opacity:1;translate:none}
.demo-kol:not([data-step="0"]) .k-ai{opacity:1;translate:none;transition-delay:.35s}
.demo-kol:not([data-step="0"]) .k-chips{opacity:1;translate:none;transition-delay:.55s}
.demo-kol:not([data-step="0"]) .k-card{opacity:1;translate:none;transition-delay:calc(.75s + var(--d) * .15s)}
.demo-kol:not([data-step="0"]) .k-actions{opacity:1;translate:none;transition-delay:1.15s}
.demo-kol[data-step="0"] :is(.k-user,.k-ai,.k-chips,.k-card,.k-actions){transition:none}

/* invite modal */
.k-modal{inset:11cqw 20cqw 9cqw;display:flex;flex-direction:column;gap:1.1cqw;padding:2.8cqw 3cqw}
.k-modal>b{font-size:1.9cqw;font-weight:600}
.k-modal>small{font-size:1.1cqw;color:#8a8a94;margin-top:-.4cqw}
.k-to{align-self:flex-start;padding:.6cqw 1.4cqw;border-radius:.6cqw;background:#eef3ff;color:var(--p);font-size:1.1cqw}
.k-text{flex:1;padding:1.4cqw;border-radius:.9cqw;background:#f5f6fa;font-size:1.2cqw;line-height:1.7;color:#33323a}
.k-mfoot{display:flex;justify-content:flex-end;gap:.8cqw}
.k-mfoot span{padding:.9cqw 2cqw;border-radius:.7cqw;border:1px solid #e3e5ec;font-size:1.15cqw}
.k-mfoot .k-send2{background:var(--p);border-color:var(--p);color:#fff;transition:scale .25s var(--ease)}

/* follow-up view */
.k-follow{position:absolute;inset:0;display:grid;grid-template-columns:28% 1fr 26%;opacity:0;transition:opacity .45s}
.demo-kol[data-step="3"] .k-follow,.demo-kol[data-step="4"] .k-follow{opacity:1}
.k-list{padding:2cqw 1.6cqw;border-right:1px solid #eceef4;display:flex;flex-direction:column;gap:.9cqw}
.k-list>b{font-size:1.4cqw;font-weight:600;margin-bottom:.4cqw}
.k-conv{padding:1.1cqw 1.2cqw;border-radius:.9cqw}
.k-conv.on{background:#eef3ff}
.k-conv b{display:flex;align-items:center;gap:.6cqw;font-size:1.2cqw;font-weight:600}
.k-conv small{display:block;margin-top:.4cqw;font-size:1cqw;color:#8a8a94;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-dot{width:.9cqw;height:.9cqw;border-radius:50%;background:#ef4444;opacity:0;scale:.4;transition:opacity .3s,scale .4s var(--ease)}
.demo-kol[data-step="4"] .k-dot{opacity:1;scale:1}
.k-conv.on small{opacity:0;transition:opacity .3s}
.demo-kol[data-step="4"] .k-conv.on small{opacity:1}
.k-thread{padding:2cqw 2cqw;display:flex;flex-direction:column;gap:1.2cqw;background:#fafbfd}
.k-thread>b{font-size:1.5cqw;font-weight:600}
.k-msg{max-width:88%;padding:1.2cqw 1.4cqw;border-radius:1cqw;font-size:1.15cqw;line-height:1.65}
.k-msg.out{align-self:flex-end;background:#eaf0ff;border-radius:1cqw 1cqw .3cqw 1cqw}
.k-msg.in{align-self:flex-start;background:#fff;border:1px solid #eceef4;border-radius:1cqw 1cqw 1cqw .3cqw;opacity:0;translate:0 1cqw;transition:opacity .45s var(--ease),translate .5s var(--ease)}
.demo-kol[data-step="4"] .k-msg.in{opacity:1;translate:none}
.k-profile{padding:2cqw 1.6cqw;border-left:1px solid #eceef4;display:flex;flex-direction:column;gap:.7cqw}
.k-profile b{font-size:1.35cqw;font-weight:600}
.k-profile small{font-size:1cqw;line-height:1.6;color:#8a8a94}
.k-status{align-self:flex-start;margin-top:.6cqw;padding:.5cqw 1.2cqw;border-radius:2cqw;background:#e9f9ef;color:#15803d;font-size:1.05cqw;font-weight:500}
.demo-kol[data-step="4"] .d-cursor{opacity:0}
/* one phone: centred, caption beside it on wide screens */
.phones.single{grid-template-columns:minmax(0,260px) minmax(0,260px);justify-content:center;align-items:center}
.phones.single .phone{display:contents}
.phones.single .phone-frame{grid-column:1}
.phones.single figcaption{grid-column:2;margin:0;font-size:14px;line-height:1.7;color:#55544f;padding-left:6px;border-left:2px solid #dc2626;padding-left:14px}
@media (max-width:640px){.phones.single{grid-template-columns:minmax(0,240px)}.phones.single figcaption{grid-column:1;margin-top:14px}}
/* three phones in a row, middle one dropped */
.phones.three{grid-template-columns:repeat(3,1fr)}
.phones.three .phone:nth-child(2){margin-top:clamp(28px,5vw,56px)}
.phones.three .phone:nth-child(3){margin-top:0}
@media (max-width:640px){.phones.three{grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}.phones.three figcaption{font-size:11px}}
.xp-link{display:inline-block;margin-top:10px;font-size:13px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--soft);padding-bottom:1px;transition:color .2s,border-color .2s}
.xp-link:hover{color:var(--accent);border-color:var(--accent)}
/* idea memoji beside "about": pops in with the title, glows on hover */
.inline-memo{mix-blend-mode:normal}
.title .inline-memo{height:1.15em;vertical-align:-.2em;margin-left:.25em;transform-origin:50% 90%;scale:.4;opacity:0;transition:scale .8s cubic-bezier(.34,1.56,.64,1) .35s,opacity .4s .35s,rotate .5s var(--ease),filter .5s var(--ease)}
.head.in .title .inline-memo{scale:1;opacity:1}
.title .inline-memo:hover{rotate:-8deg;filter:drop-shadow(0 0 .35em rgba(255,214,90,.85))}
@media (prefers-reduced-motion:reduce){.title .inline-memo{scale:1;opacity:1;transition:none}}
/* about: one body paragraph, then the statement as a large lead line */
.bio{max-width:38em}
.bio p{font-size:clamp(17px,1.5vw,19px);line-height:1.9;color:#3a3936}
.bio p.lead{margin-top:1.6em;padding-top:1.4em;border-top:1px solid var(--line);font-size:clamp(22px,2.4vw,32px);line-height:1.5;font-weight:500;letter-spacing:-.015em;color:#6e6d67}
.bio p.lead b{font-weight:600;color:var(--ink);background:linear-gradient(var(--accent),var(--accent)) 0 96%/0% .08em no-repeat;transition:background-size 1.1s cubic-bezier(.65,0,.35,1) .6s}
.bio p.lead.in b{background-size:100% .08em}
html[data-lang="en"] .bio p.lead{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
html[data-lang="en"] .bio p.lead b{font-style:italic;font-weight:400}

/* 02 · community: photos people share, comments popping up, a row of members */
.m-comm{position:absolute;inset:0;pointer-events:none}
.m-photo{position:absolute;padding:1.1cqw 1.1cqw 3.6cqw;background:#fffaf5;border-radius:.6cqw;box-shadow:0 1.6cqw 3.6cqw rgba(80,30,0,.22);transition:rotate .8s var(--ease),translate .8s var(--ease)}
.m-photo i{display:block;width:100%;aspect-ratio:1;border-radius:.3cqw}
.m-photo.p1{right:30cqw;top:12cqw;width:20cqw;rotate:-9deg}
.m-photo.p1 i{background:linear-gradient(170deg,#ffcf8a 0%,#f08a5d 45%,#6b3a5a 100%)}
.m-photo.p2{right:8cqw;top:9cqw;width:22cqw;rotate:6deg;z-index:2}
.m-photo.p2 i{background:linear-gradient(180deg,#a9d3e8 0%,#6aa6c7 50%,#2f5d75 100%)}
.m-photo.p3{right:19cqw;top:30cqw;width:18cqw;rotate:-2deg;z-index:3}
.m-photo.p3 i{background:linear-gradient(180deg,#d9e7b8 0%,#8db27a 55%,#3f6b4a 100%)}
.proj:hover .m-photo.p1{rotate:-14deg;translate:-1.5cqw 0}
.proj:hover .m-photo.p2{rotate:10deg;translate:1.5cqw -1cqw}
.proj:hover .m-photo.p3{rotate:2deg;translate:0 1cqw}
.m-bubble{position:absolute;z-index:4;padding:1cqw 1.6cqw;border-radius:2cqw 2cqw 2cqw .5cqw;background:#fff;color:#2a1b12;font-size:max(10px,1.9cqw);font-weight:500;white-space:nowrap;box-shadow:0 1cqw 2.4cqw rgba(80,30,0,.18);opacity:0;scale:.6;transform-origin:0 100%;animation:bubble 7.5s var(--ease) infinite}
.m-bubble.b1{right:33cqw;top:9cqw;animation-delay:.4s}
.m-bubble.b2{right:4cqw;top:36cqw;animation-delay:2.2s;border-radius:2cqw 2cqw .5cqw 2cqw;transform-origin:100% 100%}
.m-bubble.b3{right:26cqw;top:52cqw;animation-delay:4s}
@keyframes bubble{0%{opacity:0;scale:.6}8%{opacity:1;scale:1}55%{opacity:1;scale:1}65%,100%{opacity:0;scale:.9}}
.m-avatars{position:absolute;right:6cqw;bottom:6cqw;display:flex;align-items:center}
.m-avatars i{width:5cqw;height:5cqw;margin-left:-1.4cqw;border-radius:50%;border:.45cqw solid #f26b1d;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.7) 0 22%,transparent 23%),radial-gradient(circle at 50% 108%,rgba(255,255,255,.7) 0 42%,transparent 43%),var(--c)}
.m-avatars span{display:grid;place-items:center;width:5cqw;height:5cqw;margin-left:-1.4cqw;border-radius:50%;border:.45cqw solid #f26b1d;background:#fff;color:#f26b1d;font-weight:700;font-size:2.2cqw}
@media (prefers-reduced-motion:reduce){.m-bubble{animation:none;opacity:1;scale:1}.m-bubble.b3{display:none}}

/* 03 · specs cover: wrong value gets struck through, the database value arrives with a tick */
.m-spec s{text-decoration:none;background:linear-gradient(#b42318,#b42318) 0 56%/0% 1.5px no-repeat;animation:spec-strike 6.5s cubic-bezier(.65,0,.35,1) infinite}
.m-spec b{opacity:0;translate:-.6cqw 0;animation:spec-fix 6.5s var(--ease) infinite}
.m-spec b::after{content:" ✓";font-size:.85em}
.m-spec>div:nth-child(3) s,.m-spec>div:nth-child(3) b{animation-delay:.35s}
.m-spec>div:nth-child(4) s,.m-spec>div:nth-child(4) b{animation-delay:.7s}
@keyframes spec-strike{0%,10%{background-size:0% 1.5px}24%,86%{background-size:100% 1.5px}96%,100%{background-size:0% 1.5px}}
@keyframes spec-fix{0%,26%{opacity:0;translate:-.6cqw 0}36%,86%{opacity:1;translate:0 0}96%,100%{opacity:0;translate:-.6cqw 0}}
@media (prefers-reduced-motion:reduce){.m-spec s{animation:none;background-size:100% 1.5px}.m-spec b{animation:none;opacity:1;translate:none}}
.m-avatars i,.m-avatars span{width:6.6cqw;height:6.6cqw;margin-left:-1.8cqw}.m-avatars span{font-size:2.8cqw}

/* =========================================================
   BREATHING — exhale on scroll, gentle idle life in the hero
   ========================================================= */
/* hero drifts up, shrinks slightly and fades as the page scrolls away from it */
.hero{--hp:0}
.hero h1,.hero .belief,.hero .badges{will-change:transform,opacity}
.hero.play h1{transform:translateY(calc(var(--hp) * -70px)) scale(calc(1 - var(--hp) * .06));opacity:calc(1 - var(--hp) * .85);transition:none}
.hero .belief.in{transform:translateY(calc(var(--hp) * -40px));opacity:calc(1 - var(--hp) * 1.1)}
.hero .badges.in{transform:translateY(calc(var(--hp) * -24px));opacity:calc(1 - var(--hp) * 1.3)}

/* content "inhales" into place: rises from a little lower and a little smaller */
.rise{transform:translateY(44px) scale(.975);transition:opacity 1.3s var(--ease),transform 1.4s var(--ease),filter 1.3s var(--ease)}
.rise.in{transform:none}
.proj.rise{transform:translateY(60px) scale(.96)}
.proj.rise.in{transform:none}

/* hero idle breathing, kept very small */
.hero.idle .pill.avatar img{animation:breathe-float 6s ease-in-out infinite}
@keyframes breathe-float{0%,100%{translate:0 0}50%{translate:0 -4%}}
.hero.idle .pill.swatch i{animation:breathe-chip 7s ease-in-out infinite}
.hero.idle .pill.swatch i:nth-child(2){animation-delay:.18s}
.hero.idle .pill.swatch i:nth-child(3){animation-delay:.36s}
.hero.idle .pill.swatch i:nth-child(4){animation-delay:.54s}
.hero.idle .pill.swatch i:nth-child(5){animation-delay:.72s}
@keyframes breathe-chip{0%,70%,100%{translate:0 0}78%{translate:0 -.1em}86%{translate:0 0}}
.hero.idle .belief .pill.sticker{animation:breathe-tilt 8s ease-in-out infinite}
@keyframes breathe-tilt{0%,100%{rotate:-4deg}50%{rotate:-1deg}}

@media (prefers-reduced-motion:reduce){
  .hero.play h1,.hero .belief.in,.hero .badges.in{transform:none!important;opacity:1!important}
  .hero.idle .pill.avatar img,.hero.idle .pill.swatch i,.hero.idle .belief .pill.sticker{animation:none!important}
}
/* once the entrance is done, follow the scroll 1:1 (a transition here would lag behind) */
.hero.idle .belief,.hero.idle .badges{transition:none}

/* =========================================================
   HERO CAPSULES — one size (1em tall, 2em wide), content lives inside,
   and each has a clear "on" state (hover / focus / auto-cycle)
   ========================================================= */
.hero h1 .cap{position:relative;display:inline-block;width:1.92em;height:.96em;margin:0 .16em;vertical-align:-.13em;border-radius:1em;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(17,17,16,.07),0 .05em .14em rgba(0,0,0,.05);cursor:pointer;outline:none;transition:background-color .6s var(--ease),box-shadow .6s var(--ease)}
.hero h1 .cap:focus-visible{box-shadow:inset 0 0 0 1px rgba(17,17,16,.07),0 0 0 .05em var(--accent)}
.cap>*{transition:translate .7s cubic-bezier(.65,0,.35,1),rotate .7s cubic-bezier(.65,0,.35,1),left .7s cubic-bezier(.65,0,.35,1),top .7s cubic-bezier(.65,0,.35,1),color .5s,background-color .5s,border-color .5s,opacity .5s}

/* A · name: signature + memoji peeking up; on: orange, memoji ducks, name centres */
.cap-name b{position:absolute;left:.2em;top:50%;translate:0 -52%;font-family:var(--serif);font-style:italic;font-weight:400;font-size:.56em;letter-spacing:-.01em;color:#f26b1d;white-space:nowrap}
.cap-name img{position:absolute;right:.1em;bottom:-.16em;height:.9em;width:auto}
.cap-name:is(:hover,:focus-visible,.on){background:#f26b1d}
.cap-name:is(:hover,:focus-visible,.on) b{left:50%;translate:-50% -52%;color:#fff}
.cap-name:is(:hover,:focus-visible,.on) img{translate:0 115%}

/* B · craft: scattered stickers; on: ink, stickers line up */
.cap-tags i{position:absolute;left:var(--x0);top:var(--y0);rotate:var(--r0);font-style:normal;font-family:var(--sans);font-size:.17em;font-weight:500;letter-spacing:0;line-height:1;padding:.42em .75em;border-radius:1em;background:#fff;border:1px solid rgba(17,17,16,.14);color:#2a2926;white-space:nowrap;box-shadow:0 .1em .3em rgba(0,0,0,.06)}
.cap-tags i:nth-child(3){background:#f26b1d;border-color:#f26b1d;color:#fff}
.cap-tags:is(:hover,:focus-visible,.on){background:#1d1d1f}
.cap-tags:is(:hover,:focus-visible,.on) i{left:var(--x1);top:var(--y1);rotate:0deg;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:none}
.cap-tags:is(:hover,:focus-visible,.on) i:nth-child(3){background:#f26b1d;border-color:#f26b1d}

/* C · made things: a phone peeking up + a polaroid; on: phone rises, polaroid straightens */
.cw-phone{position:absolute;left:.2em;bottom:-.62em;width:.42em;aspect-ratio:9/18.5;padding:.022em;border-radius:.075em;background:#1d1d1f;rotate:-8deg;box-shadow:0 .05em .12em rgba(0,0,0,.18)}
.cw-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:.055em}
.cw-polaroid{position:absolute;right:.2em;top:.14em;width:.5em;padding:.03em .03em .1em;background:#fff;box-shadow:0 .05em .14em rgba(0,0,0,.16);rotate:9deg}
.cw-polaroid img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.cap-work:is(:hover,:focus-visible,.on){background:#ece4d8}
.cap-work:is(:hover,:focus-visible,.on) .cw-phone{translate:.1em -.48em;rotate:0deg}
.cap-work:is(:hover,:focus-visible,.on) .cw-polaroid{translate:-.08em .05em;rotate:-4deg}

/* entrance: capsule grows in, then its contents slide up into place */
.hero.anim h1 .cap{opacity:0;scale:.55;transition:opacity .6s var(--ease),scale 1s cubic-bezier(.34,1.4,.64,1),background-color .6s var(--ease),box-shadow .6s var(--ease)}
.hero.play h1 .cap{opacity:1;scale:1}
.hero.anim h1 .cap>*{opacity:0}
.hero.play h1 .cap>*{opacity:1;transition-delay:inherit}
.hero.idle h1 .cap>*{transition-delay:0s}

/* retire the old bare pills and underline in the headline */
.hero h1 .hl{background:none;font:inherit;padding:0;margin:0}
@media (prefers-reduced-motion:reduce){.cap>*{transition:none}.hero.anim h1 .cap{opacity:1;scale:1}.hero.anim h1 .cap>*{opacity:1}}
/* A: smaller signature so it never collides with the memoji */
.cap-name b{left:.17em;font-size:.42em}
.cap-name img{right:.08em;bottom:-.14em;height:.84em}
/* C: warm base so the phone and polaroid read at a glance */
.hero h1 .cap-work{background:#f3ece2}
.cap-work:is(:hover,:focus-visible,.on){background:#e3d6c4}
.cw-phone{bottom:-.5em}
.edu-photo img{object-position:50% 50%}
/* on-state backgrounds must beat the white base (.hero h1 .cap) */
.hero h1 .cap-name:is(:hover,:focus-visible,.on){background:#f26b1d}
.hero h1 .cap-tags:is(:hover,:focus-visible,.on){background:#1d1d1f}
.hero h1 .cap-work:is(:hover,:focus-visible,.on){background:#e3d6c4}

/* 03 · AI compare: two products read from the database → AI → a short buying summary (7s loop) */
.m-cmp{position:absolute;inset:0;pointer-events:none;--loop:7s}
.mc-prod{position:absolute;top:11cqw;width:25cqw;padding:2cqw 2.2cqw;border-radius:2cqw;background:#fff;box-shadow:0 1.4cqw 3.4cqw rgba(0,0,0,.06)}
.mc-a{right:33cqw}.mc-b{right:6cqw}
.mc-prod b{display:block;margin-bottom:1.4cqw;font-size:max(10px,2.1cqw);font-weight:600}
.mc-row{display:grid;grid-template-columns:5.6cqw 1fr;align-items:center;gap:1cqw;margin-top:.9cqw}
.mc-row span{font-size:max(9px,1.6cqw);color:#7a7972}
.mc-row i{height:1cqw;border-radius:1cqw;background:#efece6;position:relative;overflow:hidden}
.mc-row i::after{content:"";position:absolute;inset:0;width:calc(var(--v) * 100%);border-radius:inherit;background:#2f6bff;transform-origin:left;animation:mc-bar var(--loop) var(--ease) infinite;animation-delay:calc(var(--i) * 80ms)}
.mc-b .mc-row i::after{background:#1d1d1f}
@keyframes mc-bar{0%,4%{transform:scaleX(0)}22%,88%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
.mc-ai{position:absolute;right:28.5cqw;top:40cqw;translate:50% 0;padding:.8cqw 1.8cqw;border-radius:3cqw;background:#1d1d1f;color:#fff;font-size:max(10px,1.8cqw);font-weight:600;letter-spacing:.04em;animation:mc-ai var(--loop) var(--ease) infinite}
@keyframes mc-ai{0%,22%{opacity:.25;scale:.9;box-shadow:0 0 0 0 rgba(47,107,255,0)}30%{opacity:1;scale:1.06;box-shadow:0 0 0 1.4cqw rgba(47,107,255,.18)}38%,88%{opacity:1;scale:1;box-shadow:0 0 0 0 rgba(47,107,255,0)}96%,100%{opacity:.25;scale:.9}}
.mc-sum{position:absolute;right:6cqw;top:48cqw;width:52cqw;padding:2.2cqw 2.6cqw;border-radius:2cqw;background:#fff;box-shadow:0 1.6cqw 4cqw rgba(0,0,0,.08);animation:mc-sum var(--loop) var(--ease) infinite}
.mc-sum p{margin:0;font-size:max(11px,2.2cqw);line-height:1.5;font-weight:500;color:#1d1d1f}
.mc-sum em{display:inline-block;margin-top:1.2cqw;padding:.4cqw 1.2cqw;border-radius:2cqw;background:#e9f9ef;color:#15803d;font-style:normal;font-size:max(9px,1.5cqw);font-weight:500;animation:mc-tick var(--loop) var(--ease) infinite}
@keyframes mc-sum{0%,32%{opacity:0;translate:0 2cqw}42%,88%{opacity:1;translate:0 0}96%,100%{opacity:0;translate:0 1cqw}}
@keyframes mc-tick{0%,46%{opacity:0;scale:.8}54%,88%{opacity:1;scale:1}96%,100%{opacity:0}}
.art-compare .big{font-size:10cqw}
@media (prefers-reduced-motion:reduce){.mc-row i::after,.mc-ai,.mc-sum,.mc-sum em{animation:none;opacity:1;transform:none;translate:none;scale:1}}
/* phones: size the headline so every line + its capsule fits on one row */
@media (max-width:640px){
  .hero h1,html[data-lang="zh"] .hero h1{font-size:6.5vw;line-height:1.32}
  .hero .ln{white-space:nowrap;text-wrap:nowrap}
}
/* A: bigger memoji, face fully visible; only the hands tuck under the rim */
.cap-name b{left:.16em;font-size:.36em}
.cap-name img{right:.02em;bottom:-.24em;height:1.02em}

/* =========================================================
   EXPERIENCE — compact horizontal cards with a small square cover
   ========================================================= */
.cv{grid-template-columns:1fr 1fr;gap:28px var(--gut)}
.xp{display:grid;grid-template-columns:104px 1fr;column-gap:18px;align-items:start}
.xp-cover{grid-row:1/span 3;aspect-ratio:1;width:104px;margin:0;border-radius:18px}
.xp-meta{flex-direction:column;align-items:flex-start;gap:2px}
.xp-meta time{order:-1;font-size:12px}
.xp-meta b{font-size:14.5px;line-height:1.45}
.xp p{margin-top:6px;font-size:13.5px;line-height:1.65}
.xp-link{margin-top:6px}
/* the small covers show only the symbol, centred */
.xp-cover .art{padding:0;display:grid;place-items:center}
.xp-cover .art .no,.xp-cover .art .cap{display:none}
.xp-cover .art-code::after{content:"{ }";font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:30cqw;font-weight:500;letter-spacing:.02em}

/* 🏓 ping-pong for People's Daily */
.m-pp{position:relative;width:70cqw;height:70cqw}
.pp-paddle{position:absolute;left:8cqw;top:6cqw;width:44cqw;height:46cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ef5b4c,#c62f24);rotate:-28deg;box-shadow:inset 0 0 0 2.2cqw #a51f17,0 2cqw 4cqw rgba(120,30,10,.2)}
.pp-paddle::after{content:"";position:absolute;left:50%;top:92%;width:11cqw;height:24cqw;translate:-50% 0;border-radius:2.4cqw;background:linear-gradient(90deg,#c9915e,#a86c3d)}
.pp-ball{position:absolute;right:6cqw;top:10cqw;width:17cqw;height:17cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 40%,#f1ece6 75%,#ddd3c9);box-shadow:0 2cqw 3cqw rgba(60,30,15,.18);animation:pp-bounce 2.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes pp-bounce{0%,100%{translate:0 0}50%{translate:-3cqw -7cqw}}

/* ♿ accessibility symbol for the disability-employment project */
.m-access{width:58cqw;height:58cqw;color:#1f5fbf;filter:drop-shadow(0 2cqw 3cqw rgba(31,95,191,.18))}

/* ▶ for SenseTime brand video */
.xp-cover .m-play{position:static;width:44cqw;height:44cqw;border-width:1.6cqw}
.xp-cover .m-play i{border-width:9cqw 0 9cqw 14cqw;margin-left:4cqw}

@media (max-width:820px){.cv{grid-template-columns:1fr;gap:24px}}
@media (max-width:420px){.xp{grid-template-columns:84px 1fr;column-gap:14px}.xp-cover{width:84px;border-radius:14px}}
@media (prefers-reduced-motion:reduce){.pp-ball{animation:none}}
.cap-name img{right:-.06em;bottom:-.38em;height:1.2em}.cap-name b{left:.15em}
/* A, like a signature card: big name across the capsule, the whole memoji (face + hands) on top of it */
.cap-name b{left:50%;top:52%;translate:-50% -50%;font-size:.66em;letter-spacing:-.02em;z-index:1}
.cap-name img{left:52%;right:auto;bottom:-.01em;height:.94em;translate:0 0;z-index:2}
.cap-name:is(:hover,:focus-visible,.on) b{left:50%;translate:-50% -50%;color:#fff}
.cap-name:is(:hover,:focus-visible,.on) img{translate:0 110%}
.cap-name b{font-size:.72em}
.cap-name img{left:50%;translate:-46% 0}
.cap-name:is(:hover,:focus-visible,.on) img{translate:-46% 110%}

/* =========================================================
   EXPERIENCE v3 — a quiet editorial list (same language as Education)
   time · small icon seal · serif title + one line · link
   ========================================================= */
.cv{display:block;margin-top:14px;border-top:1px solid var(--line)}
.xp{display:grid;grid-template-columns:108px 40px minmax(0,1fr) auto;column-gap:20px;align-items:start;padding:26px 0;border-bottom:1px solid var(--line);transition:background-color .5s var(--ease)}
.xp time{padding-top:9px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.xp-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tint);color:var(--tone);transition:background-color .45s var(--ease),color .45s var(--ease),scale .5s cubic-bezier(.34,1.56,.64,1)}
.xp-icon svg{width:20px;height:20px}
.xp-body{transition:translate .6s var(--ease)}
.xp-body b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.7vw,23px);line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.xp-body p{margin:6px 0 0;max-width:36em;font-size:14px;line-height:1.7;color:var(--muted)}
.xp-link{align-self:center;margin:0;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;transition:background-color .3s,color .3s,border-color .3s}
.xp-link:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.xp-link-gap{width:0}
.xp:hover .xp-body{translate:6px 0}
.xp:hover .xp-icon{background:var(--tone);color:#fff;scale:1.08}
html[data-lang="zh"] .xp-body b{font-family:var(--sans);font-weight:500;font-size:clamp(17px,1.45vw,19px)}
@media (max-width:820px){
  .xp{grid-template-columns:40px minmax(0,1fr);row-gap:10px;padding:22px 0}
  .xp time{grid-column:2;grid-row:1;padding:0}
  .xp-icon{grid-column:1;grid-row:1/span 2}
  .xp-body{grid-column:2}
  .xp-link{grid-column:2;justify-self:start}
}
@media (prefers-reduced-motion:reduce){.xp-body,.xp-icon{transition:none}}

/* =========================================================
   EXPERIENCE v4 — "career milestones": one sentence each,
   a brand sticker set into the line, the brand name in ink
   ========================================================= */
.cv{display:block;margin-top:18px;border-top:0}
.ms{padding:26px 0 24px;border-bottom:1px solid var(--line);transition:opacity .5s var(--ease)}
.ms:first-child{border-top:1px solid var(--line)}
.ms-say{margin:0;font-size:clamp(22px,2.5vw,34px);line-height:1.35;font-weight:500;letter-spacing:-.02em;color:#a3a29c;transition:color .5s var(--ease)}
.ms-say b{font-weight:500;color:var(--ink)}
.ms-say span{color:inherit}
.ms-sticker{display:inline-grid;place-items:center;width:1.08em;height:1.08em;margin:0 .24em 0 .1em;vertical-align:-.22em;padding:.08em;border-radius:.26em;background:#fff;box-shadow:0 .04em .1em rgba(0,0,0,.08),0 .2em .5em rgba(0,0,0,.08),inset 0 0 0 1px rgba(17,17,16,.05);rotate:var(--r);scale:.3;opacity:0;transition:scale .9s cubic-bezier(.34,1.7,.6,1) .25s,opacity .35s .25s,rotate .6s var(--ease),translate .6s var(--ease)}
.ms-sticker img{width:100%;height:100%;object-fit:contain;border-radius:.14em}
.ms.in .ms-sticker{scale:1;opacity:1}
.ms-meta{display:grid;grid-template-columns:110px minmax(0,1fr) auto;column-gap:20px;align-items:baseline;margin-top:12px}
.ms-meta time{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ms-meta p{margin:0;max-width:44em;font-size:14px;line-height:1.7;color:var(--muted)}
.ms-link{align-self:center;padding:7px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;transition:background-color .3s,color .3s,border-color .3s}
.ms-link:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* hover: the row comes forward, its sticker straightens and lifts, the others step back */
.ms:hover .ms-say{color:var(--ink)}
.ms.in:hover .ms-sticker{rotate:0deg;scale:1.14;translate:0 -.08em;transition-delay:0s}
@media (hover:hover){.cv:hover .ms:not(:hover){opacity:.42}}
@media (max-width:820px){
  .ms-meta{grid-template-columns:1fr;row-gap:6px}
  .ms-link{justify-self:start;margin-top:4px}
}
@media (prefers-reduced-motion:reduce){.ms-sticker{scale:1;opacity:1;transition:none}}
/* the closing statement always gets its own line; table display shrink-wraps so the underline stays under the words */
.bio p.lead b{display:table;margin-top:.15em}

/* 回忆的颜色：lab cover fans the generated cards; case page lays them side by side */
.m-fan{position:absolute;inset:0}
.lab-item .thumb .m-fan img{position:absolute;left:50%;top:54%;width:27cqw;height:auto;aspect-ratio:800/1200;object-fit:cover;object-position:50% 0;border-radius:1.2cqw;box-shadow:0 1.6cqw 4cqw rgba(60,40,20,.18);translate:calc(-50% + var(--i) * 17cqw) -50%;rotate:calc(var(--i) * 7deg);transform-origin:50% 120%;z-index:calc(2 - var(--i) * var(--i));transition:translate .9s var(--ease),rotate .9s var(--ease),scale .9s var(--ease)}
.lab-item:hover .thumb .m-fan img{translate:calc(-50% + var(--i) * 24cqw) -52%;rotate:calc(var(--i) * 3deg)}
.lab-item:hover .thumb .m-fan img:nth-child(2){scale:1.04}
.mcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px);margin:20px 0 8px;align-items:start}
.mcards figure{margin:0}
.mcards img{display:block;width:100%;height:auto;aspect-ratio:800/1200;object-fit:cover;object-position:50% 0;border-radius:14px;box-shadow:0 10px 30px rgba(60,40,20,.10)}
.mcards figcaption{margin-top:10px;font-size:13px;color:var(--muted);text-align:center}
.mcards figcaption b{font-weight:500;color:var(--ink,#111110);margin-right:.5em}
@media (max-width:640px){.mcards{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:68%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-right:-16px}.mcards figure{scroll-snap-align:start}}
@media (prefers-reduced-motion:reduce){.m-fan img{transition:none}}

/* 这个作品集：a mini browser window of this site */
.art-site{background:#efede8!important}
.m-win{position:absolute;inset:9cqw 8cqw 0;background:#f5f5f3;border-radius:2.4cqw 2.4cqw 0 0;box-shadow:0 0 0 1px rgba(17,17,16,.06),0 2cqw 6cqw rgba(17,17,16,.08);overflow:hidden;display:flex;flex-direction:column}
.mw-bar{flex:none;display:flex;gap:1cqw;padding:1.8cqw 2.2cqw;border-bottom:1px solid rgba(17,17,16,.05);background:#fbfbf9}
.mw-bar i{width:1.3cqw;height:1.3cqw;border-radius:50%;background:#dcdad4}
.mw-view{position:relative;flex:1;overflow:hidden}
.mw-page{position:absolute;inset:0 0 auto;padding:3cqw 4cqw 6cqw;display:flex;flex-direction:column;align-items:center;transition:translate 1.6s cubic-bezier(.65,0,.25,1)}
.lab-item:hover .mw-page{translate:0 -26cqw}
.mw-nav{display:flex;align-items:center;gap:1.4cqw;padding:.8cqw 1.8cqw .8cqw .9cqw;border-radius:5cqw;background:#fff;box-shadow:0 0 0 1px rgba(17,17,16,.05)}
.lab-item .thumb .mw-nav img{width:3cqw;height:3cqw;object-fit:contain}
.mw-nav i{width:3.6cqw;height:.7cqw;border-radius:1cqw;background:#dcdad4}
.mw-h{margin-top:8cqw;display:flex;flex-direction:column;align-items:center;gap:.9cqw;font-size:5.4cqw;line-height:1.2;letter-spacing:-.03em;color:#111110;white-space:nowrap}
.mw-h>span{display:flex;align-items:center}
.mw-cap{position:relative;display:inline-block;flex:none;width:1.92em;height:.96em;margin-left:.16em;border-radius:1em;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(17,17,16,.07)}
.mw-name b{position:absolute;left:50%;top:52%;translate:-50% -50%;font-family:var(--serif);font-style:italic;font-weight:400;font-size:.68em;color:#f26b1d;z-index:1}
.lab-item .thumb .mw-name img{position:absolute;left:50%;bottom:-.01em;width:auto;height:.94em;translate:-46% 0;z-index:2}
.mw-tags i{position:absolute;left:var(--x0);top:var(--y0);rotate:var(--r0);padding:.08em .32em;border-radius:1em;font-style:normal;font-size:.24em;line-height:1.3;letter-spacing:0;background:#fff;color:#111110;box-shadow:0 0 0 1px rgba(17,17,16,.12)}
.mw-tags i:nth-child(1){--x0:8%;--y0:12%;--r0:-10deg;--x1:7%}
.mw-tags i:nth-child(2){--x0:44%;--y0:38%;--r0:8deg;--x1:38%}
.mw-tags i:nth-child(3){--x0:20%;--y0:58%;--r0:-5deg;--x1:69%;background:#f26b1d;color:#fff;box-shadow:none}
.mw-belief{margin-top:3.4cqw;display:flex;gap:1.2cqw}
.mw-belief i{width:16cqw;height:.9cqw;border-radius:1cqw;background:#dcdad4}
.mw-belief i+i{width:9cqw}
.mw-work{margin-top:12cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;width:100%}
.mw-work i{aspect-ratio:4/3;border-radius:1.6cqw;background:var(--c)}
/* the two capsules take turns lighting up, the same rhythm as the real hero */
@media (prefers-reduced-motion:no-preference){
  .mw-name{animation:mwName 7s var(--ease) infinite}
  .mw-name b{animation:mwNameB 7s var(--ease) infinite}
  .lab-item .thumb .mw-name img{animation:mwNameImg 7s var(--ease) infinite}
  .mw-tags{animation:mwTags 7s var(--ease) 3.5s infinite}
  .mw-tags i{animation:mwTag 7s var(--ease) 3.5s infinite}
}
@keyframes mwName{0%,12%,46%,100%{background:#fff}20%,38%{background:#f26b1d}}
@keyframes mwNameB{0%,12%,46%,100%{color:#f26b1d}20%,38%{color:#fff}}
@keyframes mwNameImg{0%,12%,46%,100%{translate:-46% 0}20%,38%{translate:-46% 115%}}
@keyframes mwTags{0%,12%,46%,100%{background:#fff}20%,38%{background:#1d1d1f}}
@keyframes mwTag{0%,12%,46%,100%{left:var(--x0);top:var(--y0);rotate:var(--r0)}20%,38%{left:var(--x1);top:31%;rotate:0deg}}
.lab-item .thumb .m-win i{flex:none;transition:none}
.mw-work i{position:relative}
.mw-work i::after{content:"";position:absolute;left:0;top:calc(100% + 1.8cqw);width:72%;height:.9cqw;border-radius:1cqw;background:#d6d4ce;box-shadow:0 1.8cqw 0 #e4e2dc}

/* contact v3: left on the page grid, a closing line as big as the hero, contact details as rows */
.contact{text-align:left;padding-top:clamp(120px,14vw,200px);padding-bottom:clamp(96px,10vw,140px)}
.ct-big{margin:0;font-family:var(--sans);font-weight:400;font-size:clamp(34px,5.3vw,80px);line-height:1.18;letter-spacing:-.03em;color:var(--ink)}
html[data-lang="zh"] .ct-big{font-size:clamp(32px,4.4vw,68px);line-height:1.22;letter-spacing:-.02em}
.ct-cap{position:relative;display:inline-block;width:1.92em;height:.96em;margin:0 .16em;vertical-align:-.13em;border-radius:1em;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(17,17,16,.07),0 .05em .14em rgba(0,0,0,.05);transition:background-color .6s var(--ease)}
.ct-cap img{position:absolute;left:50%;bottom:-.08em;height:1.04em;width:auto;translate:-50% 0;transform-origin:50% 100%;transition:translate .8s var(--ease)}
.ct-big:hover .ct-cap{background:#f26b1d}
.ct-big:hover .ct-cap img{animation:ctPunch .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes ctPunch{0%{scale:1;rotate:0deg}40%{scale:1.12;rotate:-6deg}100%{scale:1;rotate:0deg}}
.ct-body{margin:clamp(36px,4vw,56px) 0 0 var(--indent);max-width:46em}
.ct-lede{margin:0 0 28px;font-size:17px;line-height:1.7;color:var(--muted);text-wrap:pretty}
.ct-rows{border-top:1px solid var(--line)}
.ct-row{display:grid;grid-template-columns:6em 1fr auto;align-items:center;gap:16px;width:100%;margin:0;padding:22px 0;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;color:inherit;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ct-row[hidden]{display:none}
.ct-row .k{font-size:14px;color:var(--muted)}
.ct-row .v{font-size:clamp(18px,1.7vw,24px);letter-spacing:-.015em;color:var(--ink);transition:translate .6s var(--ease)}
.ct-row .a{font-size:14px;color:var(--muted);white-space:nowrap;transition:color .4s var(--ease),translate .6s var(--ease)}
.ct-row.ct-main .a{padding:8px 16px;border-radius:999px;background:var(--ink);color:var(--bg);transition:background-color .4s var(--ease),translate .6s var(--ease)}
.ct-row:hover .v,.ct-row:focus-visible .v{translate:8px 0}
.ct-row:hover .a,.ct-row:focus-visible .a{color:var(--ink);translate:-4px 0}
.ct-row.ct-main:hover .a,.ct-row.ct-main:focus-visible .a{color:var(--bg);background:#2c2b29}
.ct-row.done .a,.ct-row.ct-main.done .a{background:#f26b1d;color:#fff}
.ct-row:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
@media (max-width:640px){
  .ct-row{grid-template-columns:3.6em 1fr auto;gap:12px;padding:18px 0}
  .ct-row .v{font-size:16px;overflow-wrap:anywhere}
  .ct-lede{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.ct-row .v,.ct-row .a,.ct-cap,.ct-cap img{transition:none}.ct-big:hover .ct-cap img{animation:none}}
.ct-big .nw{white-space:nowrap}

/* contact v4: one rounded card that closes the page (contact + footer), with a memoji sticker on its corner */
.contact{padding-top:clamp(120px,13vw,180px);padding-bottom:24px;text-align:left}
.ct-card{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gut);padding:clamp(36px,5vw,72px) clamp(28px,5vw,72px) 28px;border-radius:clamp(28px,3vw,40px);background:#fcfcfb;box-shadow:0 0 0 1px rgba(17,17,16,.07),0 24px 60px -30px rgba(17,17,16,.18)}
.ct-left{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:clamp(40px,6vw,96px)}
.ct-title{margin:0;font-family:var(--sans);font-weight:400;font-size:clamp(28px,3.4vw,48px);line-height:1.16;letter-spacing:-.03em;color:var(--ink)}
html[data-lang="zh"] .ct-title{font-size:clamp(26px,3vw,42px);line-height:1.3;letter-spacing:-.02em}
.ct-eyebrow{display:block;color:#a3a29c}
.ct-cta{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 26px 0 30px;border:0;border-radius:999px;background:#f26b1d;color:#fff;font:inherit;font-size:17px;cursor:pointer;transition:background-color .4s var(--ease),scale .4s var(--ease)}
.ct-cta svg{width:20px;height:20px;transition:translate .5s var(--ease)}
.ct-cta:hover{background:#e05f15}
.ct-cta:hover svg{translate:4px 0}
.ct-cta:active{scale:.97}
.ct-cta.done{background:var(--ink)}
.ct-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ct-right{display:flex;flex-direction:column;gap:36px;padding-top:6px}
.ct-group p{margin:0}
.ct-k{margin-bottom:6px!important;font-size:15px;color:#a3a29c}
.ct-v{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;font-size:clamp(16px,1.35vw,19px);line-height:1.75;color:var(--ink)}
.ct-v a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.ct-v a:hover{background-size:100% 1px}
.ct-v a[hidden]{display:none}
.ct-v #wx{color:var(--ink)}
.ct-v>span[data-i18n="wechat"]{color:#a3a29c}
.ct-icon{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:none;color:#a3a29c;cursor:pointer;transition:color .3s,background-color .3s}
.ct-icon svg{width:18px;height:18px}
.ct-icon:hover{color:var(--ink);background:rgba(17,17,16,.05)}
.ct-icon.done{color:#22a35a}
.ct-top{margin-top:auto;align-self:flex-end;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;color:var(--ink);box-shadow:0 0 0 1px rgba(17,17,16,.1);transition:background-color .4s var(--ease),translate .5s var(--ease)}
.ct-top svg{width:20px;height:20px}
.ct-top:hover{background:rgba(17,17,16,.04);translate:0 -3px}
.ct-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:clamp(40px,4vw,56px);padding-top:22px;border-top:1px solid var(--line);font-size:14px;color:#a3a29c}
.ct-status{display:inline-flex;align-items:center;gap:10px}
.ct-status i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.45);animation:ctPulse 2.6s ease-out infinite}
@keyframes ctPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}70%,100%{box-shadow:0 0 0 7px rgba(34,197,94,0)}}
.ct-meta{display:inline-flex;align-items:center;gap:14px}
.ct-sep{width:1px;height:16px;background:currentColor;opacity:.5}
/* sticker: white die-cut outline around the memoji and the name */
.ct-sticker{position:absolute;right:clamp(16px,3vw,40px);top:0;translate:0 -58%;rotate:5deg;display:flex;align-items:center;gap:6px;pointer-events:auto;filter:drop-shadow(0 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 6px 10px rgba(17,17,16,.14));transition:rotate .7s cubic-bezier(.34,1.56,.64,1),scale .7s cubic-bezier(.34,1.56,.64,1)}
.ct-sticker img{width:clamp(64px,6.4vw,92px);height:auto}
.ct-sticker span{display:flex;flex-direction:column;line-height:.92}
.ct-sticker b{font-family:var(--sans);font-weight:500;font-size:clamp(20px,2vw,30px);letter-spacing:-.03em;color:var(--ink)}
.ct-sticker i{font-family:var(--serif);font-style:italic;font-size:clamp(28px,2.8vw,42px);letter-spacing:-.01em;color:#f26b1d;margin-left:-.2em}
.ct-card:hover .ct-sticker{rotate:-2deg;scale:1.04}
.contact ~ footer,body:has(.ct-card)>footer{display:none}
@media (max-width:760px){
  .ct-card{grid-template-columns:1fr;row-gap:44px;padding-top:64px}
  .ct-left{gap:28px}
  .ct-top{margin-top:-8px}
  .ct-sticker{right:14px;translate:0 -50%}
  .ct-foot{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.ct-status i{animation:none}.ct-sticker,.ct-cta svg,.ct-top{transition:none}}
.ct-v>[data-i18n="listSep"]{margin:0 -8px;color:#a3a29c}
.ct-sticker{gap:2px;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 8px 14px rgba(17,17,16,.16))}
.ct-sticker img{width:clamp(84px,8vw,124px)}
.ct-sticker span{margin-top:-.2em}
/* contact v4.1: tighter card (~2/3 of a laptop screen), copyable WeChat, LinkedIn */
.ct-card{padding:clamp(32px,3.6vw,52px) clamp(28px,4.4vw,64px) 22px}
.ct-left{gap:32px}
.ct-title{font-size:clamp(26px,2.8vw,40px)}
html[data-lang="zh"] .ct-title{font-size:clamp(24px,2.5vw,36px);line-height:1.32}
.ct-cta{height:52px;font-size:16px}
.ct-right{gap:24px;padding-top:2px}
.ct-v{font-size:clamp(15px,1.2vw,17px);line-height:1.8}
.ct-foot{margin-top:clamp(28px,3vw,40px);padding-top:18px;font-size:13px}
.ct-top{width:48px;height:48px}
.ct-label{color:#a3a29c;margin-right:2px}
.ct-v>span[data-i18n="wechat"]{color:#a3a29c}
.ct-v #resume{display:inline-flex;align-items:center;gap:6px}
.ct-dl{width:16px;height:16px;transition:translate .5s var(--ease)}
.ct-v #resume:hover .ct-dl{translate:0 2px}
.ct-v a:focus:not(:focus-visible){outline:none}
.ct-social{display:inline-flex;align-items:center;gap:8px;margin-top:-6px;font-size:15px;color:var(--ink);text-decoration:none;opacity:.75;transition:opacity .3s}
.ct-social svg{width:24px;height:24px}
.ct-social:hover{opacity:1}
.ct-sticker img{width:clamp(80px,7.4vw,112px)}
@media (max-width:760px){.ct-card{row-gap:32px;padding-top:56px}}

/* contact v5: headline, then four contact tiles in one row, then a quiet footer line */
.ct-card{display:block;padding:clamp(36px,4vw,56px) clamp(28px,4.4vw,64px) 22px}
.ct-title{max-width:16em}
.ct-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.ct-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;margin:0;padding:22px 20px 24px;border:0;border-radius:0;background:none;font:inherit;color:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .4s var(--ease)}
.ct-tile[hidden]{display:none}
.ct-tile+.ct-tile{box-shadow:inset 1px 0 0 var(--line)}
.ct-tile:first-child{padding-left:0}
.ct-tile .k{font-size:13px;color:#a3a29c}
.ct-tile .v{max-width:100%;font-size:clamp(16px,1.35vw,19px);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-tile .act{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:13px;color:#a3a29c;transition:color .3s var(--ease)}
.ct-tile .act svg{width:16px;height:16px;transition:translate .5s var(--ease)}
.ct-tile:hover .act{color:var(--ink)}
.ct-tile:hover .act svg{translate:2px -2px}
#copyWx:hover .act svg,#resume:hover .act svg{translate:0 2px}
.ct-tile.done .act{color:#f26b1d}
.ct-tile:focus:not(:focus-visible){outline:none}
.ct-tile:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}
.ct-foot{margin-top:0;padding-top:18px}
.ct-meta{gap:10px}
.ct-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.ct-top{all:unset;cursor:pointer;color:#a3a29c;transition:color .3s}
.ct-top:hover{color:var(--ink)}
.ct-top:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (max-width:760px){
  .ct-card{padding-top:60px}
  .ct-tiles{grid-template-columns:1fr 1fr}
  .ct-tile,.ct-tile:first-child{padding:18px 14px 20px 0}
  .ct-tile:nth-child(even){padding-left:14px}
  .ct-tile+.ct-tile{box-shadow:none}
  .ct-tile:nth-child(even){box-shadow:inset 1px 0 0 var(--line)}
  .ct-tile:nth-child(n+3){border-top:1px solid var(--line)}
  .ct-meta{flex-wrap:wrap}
}
@media (max-width:760px){
  .ct-tiles{grid-template-columns:1fr}
  .ct-tile,.ct-tile:first-child,.ct-tile:nth-child(even){flex-direction:row;align-items:center;gap:12px;padding:16px 0;box-shadow:none}
  .ct-tile:nth-child(n+2){border-top:1px solid var(--line)}
  .ct-tile .k{flex:none;width:4.6em}
  .ct-tile .v{flex:1;font-size:16px}
  .ct-tile .act{margin-top:0}
  .ct-meta{flex-direction:column;align-items:flex-start;gap:4px}
  .ct-dot{display:none}
}
@media (max-width:760px){.ct-tile .act>span{display:none}.ct-tile .act svg{width:18px;height:18px}.ct-tile.done .act>span{display:inline}}

/* contact v6: a normal section like the rest of the page (head on the grid, rows on hairlines), plus a big animated sticker */
.contact.sec{padding-top:clamp(96px,10vw,160px);padding-bottom:0;text-align:left}
.contact .title,.contact .title span{margin-left:0;margin-right:0;text-align:left}
.ct-head{position:relative}
.contact .ct-tiles{margin:0 0 0 var(--indent);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact .ct-tile:first-child{padding-left:0}
.contact .ct-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:clamp(80px,9vw,140px);padding:24px 0 40px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.contact .ct-top{color:var(--muted)}
/* sticker: slaps onto the page when the section arrives, then floats and throws a punch now and then */
.ct-sticker{position:absolute;right:0;top:50%;left:auto;translate:0 -50%;rotate:0deg;display:block;filter:none;pointer-events:auto;cursor:pointer;opacity:0;scale:1.5;transition:opacity .5s var(--ease),scale .9s cubic-bezier(.34,1.56,.64,1)}
.head.in .ct-sticker{opacity:1;scale:1;transition-delay:.25s}
.ct-float{display:flex;align-items:center;gap:4px;rotate:6deg;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 10px 18px rgba(17,17,16,.16));animation:ctFloat 6s ease-in-out infinite}
.ct-fist{position:relative;display:block}
.ct-sticker .ct-fist img{display:block;width:clamp(120px,12vw,180px);height:auto;transform-origin:30% 75%;animation:ctJab 4.2s cubic-bezier(.3,0,.2,1) infinite}
.ct-name{display:flex;flex-direction:column;line-height:.9;margin-top:-.4em}
.ct-name b{font-family:var(--sans);font-weight:500;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.035em;color:var(--ink);white-space:nowrap}
.ct-name i{font-family:var(--serif);font-style:italic;font-size:clamp(40px,4vw,62px);letter-spacing:-.01em;color:#f26b1d;margin:-.08em 0 0 -.15em;transform-origin:0 60%;animation:ctWave 4.2s ease-in-out infinite}
.ct-pow{position:absolute;left:-2%;bottom:18%;width:28px;height:28px;pointer-events:none}
.ct-pow b{position:absolute;right:100%;top:50%;width:16px;height:3px;border-radius:3px;background:#f26b1d;transform-origin:100% 50%;scale:0 1;opacity:0;animation:ctPow 4.2s ease-out infinite}
.ct-pow b:nth-child(1){rotate:-35deg}
.ct-pow b:nth-child(3){rotate:35deg}
.ct-sticker:hover .ct-float{animation-duration:2.4s}
.ct-sticker:hover .ct-fist img,.ct-sticker:hover .ct-pow b,.ct-sticker:hover .ct-name i{animation-duration:1.1s}
@keyframes ctFloat{0%,100%{translate:0 0;rotate:6deg}50%{translate:0 -8px;rotate:3deg}}
@keyframes ctJab{0%,70%,100%{scale:1;rotate:0deg;translate:0 0}76%{scale:.94;rotate:4deg;translate:4px 0}82%{scale:1.12;rotate:-7deg;translate:-8px 2px}90%{scale:.98;rotate:1deg;translate:0 0}}
@keyframes ctPow{0%,78%{scale:0 1;opacity:0}83%{scale:1 1;opacity:1}92%,100%{scale:1 1;opacity:0;translate:-6px 0}}
@keyframes ctWave{0%,72%,100%{rotate:0deg}80%{rotate:-4deg}88%{rotate:2deg}}
@media (max-width:760px){
  .ct-sticker{position:relative;top:auto;translate:none;margin:28px 0 0 auto;width:max-content}
  .ct-sticker .ct-fist img{width:104px}
  .contact .ct-tiles{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.ct-float,.ct-sticker .ct-fist img,.ct-name i,.ct-pow b{animation:none}.ct-sticker{opacity:1;scale:1;transition:none}}
@media (min-width:761px){.contact .ct-tiles{grid-template-columns:1fr 1.4fr 1fr 1fr}.contact .ct-tile{padding-right:14px}.contact .ct-tile+.ct-tile{padding-left:18px}}
.contact .ct-foot{margin-top:clamp(64px,6vw,96px)}

/* section dividers: grey instead of black, site-wide */
.head{border-top-color:#d9d8d3}

/* contact v7: one quiet card. title left, a short contact list right, one hairline above the footer row */
.contact{padding-top:clamp(120px,12vw,180px);padding-bottom:clamp(24px,3vw,40px);text-align:left}
.cc{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gut);row-gap:clamp(48px,5vw,72px);padding:clamp(40px,4.4vw,64px) clamp(28px,4.4vw,64px) 0;border:1px solid #e6e5e0;border-radius:clamp(24px,2.6vw,36px);background:#fbfbfa}
.cc-title{margin:0}
.contact .cc-title span{margin:14px 0 0;max-width:none}
.cc-list{list-style:none;margin:0;padding:6px 0 0;display:flex;flex-direction:column;gap:14px}
.cc-list li{display:grid;grid-template-columns:5.2em auto auto;justify-content:start;align-items:center;column-gap:10px;font-size:clamp(16px,1.3vw,18px);line-height:1.5}
.cc-list li[hidden]{display:none}
.cc-list .k{font-size:14px;color:#a3a29c}
.cc-list .v{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.cc-list a.v:hover{background-size:100% 1px}
.cc-ico svg{display:block;width:16px;height:16px;color:#a3a29c;transition:translate .4s var(--ease),color .3s}
.cc-list a.v:hover .cc-ico svg{color:var(--ink);translate:2px -2px}
#resume:hover .cc-ico svg{translate:0 2px}
.cc-btn{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:none;color:#a3a29c;cursor:pointer;transition:color .3s,background-color .3s}
.cc-btn svg{width:17px;height:17px}
.cc-btn:hover{color:var(--ink);background:rgba(17,17,16,.05)}
.cc-btn.done{color:#22a35a}
.cc-btn:focus:not(:focus-visible),.cc-list a:focus:not(:focus-visible){outline:none}
.cc-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding:20px 0 24px;border-top:1px solid #ecebe6;font-size:13px;color:#a3a29c}
.cc-meta{display:inline-flex;flex-wrap:wrap;gap:6px 18px}
.cc-top{color:inherit;text-decoration:none;transition:color .3s}
.cc-top:hover{color:var(--ink)}
/* sticker rides the card's top-right corner */
.cc .ct-sticker{position:absolute;right:clamp(20px,3vw,48px);top:0;left:auto;translate:0 -62%;margin:0;width:auto}
.cc .ct-sticker .ct-fist img{width:clamp(110px,10vw,150px)}
.cc .ct-name b{font-size:clamp(24px,2.2vw,34px)}
.cc .ct-name i{font-size:clamp(36px,3.4vw,52px)}
.contact .rise.in .ct-sticker,.cc.in .ct-sticker{opacity:1;scale:1;transition-delay:.3s}
@media (max-width:760px){
  .cc{grid-template-columns:1fr;row-gap:32px;padding-top:72px}
  .cc .ct-sticker{right:12px;translate:0 -55%}
  .cc .ct-sticker .ct-fist img{width:88px}
  .cc .ct-name b{font-size:20px}.cc .ct-name i{font-size:30px}
  .cc-list li{grid-template-columns:4.6em auto auto}
  .cc-meta{flex-direction:column;gap:2px}
}
@media (max-width:760px){.cc .ct-sticker{right:28px}.cc .ct-name b{font-size:18px}.cc .ct-name i{font-size:27px}}
.ct-pow b{width:14px;height:2.5px;right:calc(100% + 2px)}
.ct-pow b:nth-child(1){rotate:-14deg;top:calc(50% - 9px)}
.ct-pow b:nth-child(2){rotate:0deg;width:18px}
.ct-pow b:nth-child(3){rotate:14deg;top:calc(50% + 9px)}
/* the drawn-in section rule is grey too; the static border underneath stays invisible so the draw-in still reads */
.head{border-top-color:transparent}
.head::before{background:#d9d8d3}