.project-page {
  /* Hero 微调：可直接修改以下数值（正数向下，负数向上） */
  --hero-copy-y: 0px;
  --hero-description-y: -4px;
  --hero-roles-y: 142px;
  --hero-device-scale: 1.72;
  background: #050505;
  color: var(--paper);
}
.project-header { position: fixed; background: linear-gradient(#050505 0%, rgba(5,5,5,.88) 72%, transparent 100%); }
.project-header .language-toggle { appearance: none; color: var(--paper); }
.project-page main { position: relative; z-index: 2; }
.project-section { width: min(100% - 2 * var(--pad), 1450px); margin: 0 auto; }
.project-intro { min-height: 100svh; padding: 22vh 0 13vh; display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); grid-template-rows: auto 1fr; column-gap: clamp(42px, 8vw, 150px); align-items: start; }
.intro-copy { align-self: center; transform: translateY(var(--hero-copy-y)); }
.eyebrow { margin: 0 0 26px; color: var(--muted); font: 500 11px "Alibaba PuHuiTi", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.intro-copy h1 { margin: 15px 0 0; font-size: clamp(28px, 3vw, 49px); line-height: .98; letter-spacing: -.015em; font-weight: 600; color: #bab9b5; }
.project-title-en { margin: 0; font-size: clamp(42px, 4.8vw, 76px); line-height: .94; letter-spacing: -.02em; color: var(--paper); font-weight: 600; }
.project-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 42px; }
.project-tags span { padding: 8px 12px 7px; border-radius: 8px; background: #1a1a1a; color: #c7c6c1; font-size: 12px; }
.intro-description { align-self: start; padding-top: 0; transform: translateY(var(--hero-description-y)); }
.intro-question { margin: 0 0 10px; color: #d5d3ce; font-size: clamp(16px, 1.45vw, 23px); line-height: 1.35; font-weight: 400; }
.intro-lede { max-width: 680px; margin: 0; color: #cbc9c4; font-size: clamp(13px, 1vw, 16px); line-height: 1.75; font-weight: 300; }
.intro-roles { grid-column: 1; grid-row: 2; align-self: start; display: flex; gap: 15px; margin-top: var(--hero-roles-y); }
.intro-roles img { width: clamp(58px, 5vw, 92px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; filter: saturate(.8); mix-blend-mode: screen; }
.intro-devices { grid-column: 2; grid-row: 2; align-self: start; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: clamp(38px, 4vw, 62px); align-items: end; }
.intro-devices img { width: 100%; height: auto; display: block; object-fit: contain; mix-blend-mode: screen; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); transform: scale(var(--hero-device-scale)); transform-origin: center bottom; }

.world-section { padding: 16vh 0 10vh; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.25fr); column-gap: clamp(42px, 7vw, 150px); }
.section-label { display: flex; align-items: baseline; align-content: start; flex-wrap: wrap; gap: 7px; color: #e0ded8; font-size: clamp(18px, 1.65vw, 27px); line-height: 1.08; letter-spacing: -.045em; }
.section-label b { color: var(--muted); font-weight: 400; }
.section-label span:last-child { color: #adaca7; }
.section-body { max-width: 870px; }
.section-copy { white-space: pre-line; margin: 0; color: #c8c6c0; font-size: clamp(14px, 1.08vw, 18px); line-height: 1.82; font-weight: 300; }
.section-copy br + br { display: block; content: ""; margin-top: .72em; }
.role-grid { grid-column: 1 / -1; width: 100%; display: grid; grid-template-columns: minmax(300px, 1.1fr) minmax(180px, .75fr) minmax(260px, 1fr); grid-template-rows: auto auto; column-gap: clamp(34px, 4vw, 70px); row-gap: clamp(34px, 4vw, 62px); align-items: end; margin-top: clamp(135px, 15vh, 210px); }
.role-card { position: relative; margin: 0; width: auto; height: auto; outline: none; animation: role-float 5.4s ease-in-out infinite; }
.role-card:nth-child(2) { animation-delay: -1.2s; animation-duration: 6.2s; }
.role-card:nth-child(3) { animation-delay: -3.5s; animation-duration: 5.8s; }
.role-card:nth-child(4) { animation-delay: -2.1s; animation-duration: 4.8s; }
.role-card:nth-child(5) { animation-delay: -4.1s; animation-duration: 6.6s; }
.role-card:focus-visible .role-visual { outline: 1px solid rgba(178,168,156,.75); outline-offset: 8px; border-radius: 4px; }
.role-visual { position: relative; width: 100%; transform-origin: center bottom; transition: transform .45s cubic-bezier(.22,.7,.25,1); }
.role-card img { display: block; width: 100%; height: auto; max-height: 330px; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,.42)); mix-blend-mode: screen; }
.role-card:hover .role-visual, .role-card:focus-visible .role-visual, .role-card.is-speaking .role-visual { animation: role-attention 1.55s ease-in-out infinite; }
.role-bubble { position: absolute; z-index: 3; left: 50%; bottom: calc(100% + 13px); width: min(214px, 21vw); margin: 0; padding: 9px 11px 8px; border-radius: 11px; background: #B2A89C; color: #211d19; font-size: clamp(11px, .82vw, 13px); font-weight: 400; line-height: 1.46; letter-spacing: -.01em; text-align: left; box-shadow: 0 10px 24px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transform: translate(-50%, 12px) scale(.96); }
.role-old .role-bubble { bottom: calc(100% - 5px); }
.role-bubble::after { content: ""; position: absolute; left: 50%; top: calc(100% - 1px); width: 13px; height: 13px; background: #B2A89C; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 3px 0; }
.role-card.is-speaking .role-bubble { animation: role-speech 3.8s cubic-bezier(.22,.75,.3,1) both; }
@keyframes role-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes role-attention { 0%,100% { transform: scale(1.018) translateY(0); } 50% { transform: scale(1.045) translateY(-3px); } }
@keyframes role-speech { 0% { opacity: 0; transform: translate(-50%, 14px) scale(.95); } 12%,72% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -8px) scale(.985); } }
.role-card figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; color: #d5d3cc; font-size: 12px; font-weight: 300; }
.role-card figcaption em { color: var(--muted); font-style: normal; }
.role-old { grid-column: 1; grid-row: 1 / span 2; width: min(100%, 330px); align-self: center; }
.role-bus { grid-column: 2; grid-row: 1; width: min(100%, 190px); justify-self: center; }
.role-rider { grid-column: 3; grid-row: 1; width: min(100%, 250px); justify-self: end; }
.role-bus img, .role-rider img { -webkit-mask-image: radial-gradient(ellipse at center, #000 46%, transparent 76%); mask-image: radial-gradient(ellipse at center, #000 46%, transparent 76%); }
.role-angel { grid-column: 2; grid-row: 2; width: min(100%, 150px); justify-self: center; }
.role-heaven { grid-column: 3; grid-row: 2; width: min(100%, 300px); justify-self: center; }

.interaction-section { padding: 10vh 0 16vh; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.25fr); column-gap: clamp(42px, 7vw, 150px); }

.demo-section { padding: 8vh 0 20vh; }
.demo-heading { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: #d5d3ce; font-size: 13px; font-weight: 300; letter-spacing: .12em; }
.demo-title { font-weight: 500; letter-spacing: .14em; }
.demo-heading span:last-child { color: var(--muted); font: 500 10px "Alibaba PuHuiTi", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.demo-frame { position: relative; margin-top: 38px; background: #0d0d0d; }
.demo-frame video { width: 100%; height: auto; max-height: 78vh; display: block; object-fit: contain; background: #0b0b0b; }
.sound-button { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); padding: 13px 18px; border: 1px solid rgba(255,255,255,.38); border-radius: 100px; background: rgba(10,10,10,.62); color: #f1f0eb; font: 500 13px "Alibaba PuHuiTi", sans-serif; cursor: pointer; backdrop-filter: blur(8px); transition: background .25s, transform .25s; }
.sound-button:hover { background: rgba(255,255,255,.15); transform: translateX(-50%) translateY(-3px); }
.sound-button.is-hidden { opacity: 0; pointer-events: none; }
.cursor-flyer { position: fixed; z-index: 30; top: 0; left: 0; width: clamp(62px, 6vw, 102px); opacity: 0; pointer-events: none; will-change: transform, opacity; transition: opacity .24s ease; }
.cursor-flyer.is-visible { opacity: .96; }
.cursor-flyer img { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .16)) contrast(1.03) saturate(.97); }

@media (max-width: 720px) {
  .project-intro, .world-section, .interaction-section { display: block; width: min(100% - 2 * var(--pad), 1450px); }
  .project-intro { padding-top: 145px; }
  .project-title-en { font-size: 11vw; }
  .intro-copy h1 { font-size: 7.5vw; }
  .intro-description { margin-top: 10vh; }
  .intro-roles { margin-top: 15vh; gap: 12px; }
  .intro-roles img { width: 18vw; }
  .intro-devices { margin-top: 8vh; gap: 12px; }
  .world-section, .interaction-section { padding-top: 10vh; }
  .section-body { margin-top: 38px; }
  .role-grid { min-height: 0; width: 100%; margin-top: 12vh; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 42px 24px; }
  .role-card { width: auto; grid-column: auto; grid-row: auto; justify-self: center; }
  .role-card img { max-height: 230px; }
  .role-bubble { width: min(194px, 61vw); font-size: 11px; }
  .cursor-flyer { display: none; }
  .role-old { grid-column: 1 / -1; width: min(72vw, 300px); }
  .role-bus, .role-angel { width: min(36vw, 145px); }
  .role-rider, .role-heaven { width: min(42vw, 190px); }
  .demo-section { padding-top: 5vh; }
  .sound-button { bottom: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .role-card, .role-card:hover .role-visual, .role-card:focus-visible .role-visual, .role-card.is-speaking .role-visual, .role-card.is-speaking .role-bubble { animation: none; }
  .role-card.is-speaking .role-bubble { opacity: 1; transform: translate(-50%, 0) scale(1); }
}