/* Character showcase: one continuous video canvas with interactive cards over its lower edge. */
.persona-section { overflow: hidden; background: #090c19; color: #f6f7ff; }
.persona-video-stage { position: relative; isolation: isolate; height: clamp(760px,54vw,1080px); overflow: hidden; background: #080b16; }
.persona-video-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 47%; }
.persona-video-shade { position: absolute; inset: 0; background: linear-gradient(180deg,#080b16bf 0%,#080b1638 20%,#080b1614 39%,#090c19bd 59%,#090c19f2 82%,#090c19 100%),linear-gradient(90deg,#080b1650 0%,transparent 46%,#080b1638 100%); pointer-events: none; }
.persona-video-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; width: calc(100% - 2 * var(--page-gutter)); margin: 0 auto; padding: clamp(42px,4vw,74px) 0 0; }
.persona-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid #d8dfff46; }
.persona-index { color: #d1d9ff; font: 700 11px/1.3 Inter,Arial,sans-serif; letter-spacing: .18em; }
.persona-side-note { color: #e2e6ff; font-size: 12px; }
.persona-heading { width: 100%; }
.persona-video-mark { align-self: flex-start; margin-top: 22px; padding: 9px 12px; border: 1px solid #ffffff6a; border-radius: 4px; background: #090b18a8; color: #fff; font: 700 10px/1.2 Inter,Arial,sans-serif; letter-spacing: .12em; }
.persona-info-grid { position: absolute; z-index: 2; right: var(--page-gutter); bottom: clamp(53px,5vw,94px); left: var(--page-gutter); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: clamp(25px,2.7vw,52px); margin: 0; }
.persona-info-card { position: relative; min-width: 0; min-height: 350px; transition: transform .35s cubic-bezier(.22,1,.36,1), background .35s, box-shadow .35s; }
.persona-info-card:focus-visible { outline: 2px solid #abb8ff; outline-offset: 9px; }
.persona-paper { padding: clamp(20px,2vw,34px); border-radius: 13px 18px 11px 20px; background: #f8f8ff; color: #050506; box-shadow: 8px 10px 0 #3149ff, 15px 20px 30px #0007; transform: rotate(-2deg); }
.persona-paper:hover,.persona-paper:focus-visible { transform: rotate(0deg) translateY(-8px); box-shadow: 10px 15px 0 #3149ff, 18px 28px 40px #0008; }
.persona-paper::after { content: ''; position: absolute; right: 7%; bottom: -17px; width: 38px; height: 21px; background: #f8f8ff; clip-path: polygon(0 0,100% 0,0 100%); }
.persona-sticker { position: absolute; top: -20px; right: -9px; z-index: 2; padding: 10px 13px; background: #243cfe; color: #fff; font: 800 10px/1 Inter,Arial,sans-serif; letter-spacing: .08em; box-shadow: 5px 6px 0 #060b57; transform: rotate(5deg); }
.persona-paper-kicker { display: block; margin-top: 20px; color: #263cee; font: 800 10px/1.2 Inter,Arial,sans-serif; letter-spacing: .12em; }
.persona-paper h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .06em; margin: 18px 0 30px; color: #263cf5; font: 950 clamp(48px,4vw,78px)/.9 Impact,'Arial Black','Microsoft YaHei',sans-serif; letter-spacing: -.07em; }
.persona-paper h2 span { color: #050506; }
.persona-facts { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 7px; }
.persona-facts > div { min-width: 0; padding: 13px 9px 11px; background: #e7eaff; clip-path: polygon(0 0,97% 0,100% 87%,94% 100%,0 100%); }
.persona-facts > div:nth-child(1) { grid-column: span 5; }
.persona-facts > div:nth-child(2) { grid-column: span 3; background: #233cf4; color: #fff; transform: translateY(5px) rotate(2deg); }
.persona-facts > div:nth-child(3) { grid-column: span 4; background: #11131d; color: #fff; transform: rotate(-2deg); }
.persona-facts > div:nth-child(4) { grid-column: span 6; background: #dce2ff; transform: translateY(7px) rotate(-1deg); }
.persona-facts > div:nth-child(5) { grid-column: span 6; background: #11131d; color: #fff; transform: translateY(5px) rotate(1deg); }
.persona-facts small { display: block; margin-bottom: 7px; font: 700 8px/1.2 Inter,Arial,sans-serif; letter-spacing: .04em; white-space: nowrap; opacity: .75; }
.persona-facts strong { display: block; font-size: clamp(13px,1.15vw,20px); line-height: 1.2; white-space: nowrap; }
.persona-skill-card,.persona-achievement-card { padding: 18px 6px 10px; border-top: 1px solid #91a1ff6c; background: linear-gradient(180deg,#16204c33,transparent 75%); }
.persona-skill-card:hover,.persona-skill-card:focus-visible,.persona-achievement-card:hover,.persona-achievement-card:focus-visible { transform: translateY(-8px); background: linear-gradient(180deg,#22357b88,#15204933 80%); box-shadow: 0 22px 28px -25px #6b7dff90; }
.persona-detail-heading { display: flex; align-items: baseline; gap: 11px; color: #a4b4ff; }
.persona-detail-heading span { font: 700 10px/1 Inter,Arial,sans-serif; letter-spacing: .13em; }
.persona-detail-heading strong { color: #fff; font-size: clamp(19px,1.55vw,27px); white-space: nowrap; }
.persona-detail-heading span:last-child { margin-left: auto; white-space: nowrap; }
.persona-skills { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(9px,1.2vw,20px); margin: 32px 0 0; padding: 0 5px 10px 0; list-style: none; }
.persona-skill { --face:#263df5; --ink:#fff; --angle:-3deg; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; height: clamp(82px,7.1vw,118px); color: var(--ink); transform: rotate(var(--angle)); transition: transform .3s cubic-bezier(.22,1,.36,1); }
.persona-skill::before,.persona-skill::after { content: ''; position: absolute; inset: 0; clip-path: polygon(8% 0,94% 3%,100% 22%,96% 92%,84% 100%,2% 96%,0 18%); }
.persona-skill::before { z-index: -2; background: #050940; transform: translate(7px,8px); }
.persona-skill::after { z-index: -1; background: var(--face); box-shadow: inset 1px 1px #ffffff66; }
.persona-skill:hover { transform: rotate(0deg) translateY(-8px) scale(1.04); }
.persona-skill-symbol { font: 900 clamp(24px,2.1vw,38px)/1 Inter,'Arial Black',sans-serif; letter-spacing: -.08em; }
.persona-skill small { margin-top: 7px; font: 800 clamp(10px,.8vw,13px)/1 Inter,Arial,sans-serif; letter-spacing: .02em; }
.persona-logo { display: block; width: clamp(30px,2.9vw,48px); height: clamp(30px,2.9vw,48px); object-fit: contain; }
.persona-logo-chatgpt { filter: invert(1); mix-blend-mode: screen; }
.persona-logo-jimeng { background: currentColor; -webkit-mask-image: url('assets/profile/jimeng-mark.png'); mask-image: url('assets/profile/jimeng-mark.png'); -webkit-mask-mode: luminance; mask-mode: luminance; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.skill-ai { --face:#2c1743; --ink:#ffad54; --angle:-5deg; }
.skill-ps { --face:#102a67; --ink:#89c9ff; --angle:4deg; }
.skill-id { --face:#4a174e; --ink:#ff8bce; --angle:-2deg; }
.skill-jimeng { --face:#a8fcf4; --ink:#063347; --angle:5deg; }
.skill-codex { --face:#edf0ff; --ink:#101738; --angle:-4deg; }
.skill-chatgpt { --face:#0d7769; --ink:#f7fffd; --angle:3deg; }
.persona-achievements { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(12px,1.35vw,24px); margin: 37px 0 0; padding: 0 6px 8px 0; list-style: none; }
.persona-achievements li { min-width: 0; padding: clamp(14px,1.2vw,21px) 12px; background: #2038f6; color: #fff; font-size: clamp(13px,1.05vw,18px); font-weight: 700; text-align: center; box-shadow: 5px 6px 0 #070e5f; clip-path: polygon(0 0,96% 0,100% 10%,100% 90%,96% 100%,0 100%,2% 50%); transition: transform .3s cubic-bezier(.22,1,.36,1),filter .3s; }
.persona-achievements li:nth-child(2) { transform: rotate(2deg); }
.persona-achievements li:nth-child(3) { background: #f6f7ff; color: #1324af; transform: rotate(-2deg); }
.persona-achievements li:nth-child(4) { transform: rotate(1deg); }
.persona-achievements li:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); filter: brightness(1.12); }
.persona-achievement-note { display: block; width: fit-content; margin: 35px 0 0 auto; padding: 9px 13px; background: #243cfe; color: #fff; font: 800 10px/1 Inter,Arial,sans-serif; letter-spacing: .08em; box-shadow: 5px 6px 0 #060b57; transform: rotate(-3deg); }
@media(max-width:1180px) {
  .persona-video-stage { height: 1100px; }
  .persona-info-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .persona-paper { grid-column: 1 / -1; min-height: 240px; }
  .persona-paper h2 { margin-bottom: 24px; }
  .persona-facts { max-width: 640px; }
}
@media(max-width:700px) {
  .persona-video-stage { height: 1340px; }
  .persona-video-stage video { height: 780px; object-position: 48% center; -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 62%,transparent 100%); mask-image: linear-gradient(180deg,#000 0%,#000 62%,transparent 100%); }
  .persona-video-content { width: calc(100% - 40px); padding: 48px 0 0; }
  .persona-heading { display: block; }
  .persona-index { font-size: 9px; letter-spacing: .1em; }
  .persona-side-note { display: block; margin-top: 10px; font-size: 11px; }
  .persona-video-mark { font-size: 8px; }
  .persona-info-grid { right: 20px; bottom: 65px; left: 20px; grid-template-columns: 1fr; gap: 36px; }
  .persona-info-card { min-height: 0; }
  .persona-paper { grid-column: auto; padding: 23px 17px; }
  .persona-paper h2 { font-size: clamp(43px,11vw,66px); }
  .persona-sticker { top: -16px; font-size: 8px; }
  .persona-facts { grid-template-columns: 1fr 1fr; }
  .persona-facts > div:first-child,.persona-facts > div:nth-child(4),.persona-facts > div:nth-child(5) { grid-column: 1 / -1; }
  .persona-facts > div:nth-child(2),.persona-facts > div:nth-child(3) { grid-column: auto; }
  .persona-facts strong { font-size: 16px; }
  .persona-skills { gap: 11px; }
  .persona-skill { height: 90px; }
  .persona-achievements { margin-top: 24px; }
}
@media(prefers-reduced-motion:reduce) { .persona-info-card,.persona-skill,.persona-achievements li { transition: none; } }