.project-bilibili { 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; overflow: clip; }
.project-section { width: min(100% - 2 * var(--pad), 1450px); margin: 0 auto; }
.project-intro { min-height: 100svh; padding: 22vh 0 12vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .98fr); grid-template-rows: auto 1fr; column-gap: clamp(42px, 8vw, 150px); align-items: start; }
.intro-copy { align-self: center; }
.project-title-en { margin: 0; font-size: clamp(38px, 4.35vw, 70px); line-height: .94; letter-spacing: -.025em; color: var(--paper); font-weight: 600; }
.intro-copy h1 { margin: 16px 0 0; font-size: clamp(26px, 2.8vw, 45px); line-height: 1; letter-spacing: -.012em; font-weight: 600; color: #b9b8b4; }
.project-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 40px; }
.project-tags span { padding: 8px 12px 7px; border-radius: 8px; background: #1a1a1a; color: #c7c6c1; font-size: 12px; }
.intro-description { align-self: start; }
.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-cover { grid-column: 1 / -1; align-self: end; justify-self: center; width: min(100%, 1030px); margin-top: clamp(45px, 7vh, 90px); }
.intro-cover img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.case-section, .tool-section { padding: 14vh 0 5vh; display: grid; grid-template-columns: minmax(210px, 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: -.04em; }
.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; }
.tool-section { padding-bottom: 10vh; }
.prototype-section { position: relative; height: 225svh; margin-top: 6vh; background: #020202; }
.prototype-stage { position: sticky; top: 0; width: 100%; height: 100svh; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 46%, #0b0b0b 0%, #030303 48%, #000 78%); }
.prototype-stage::after { content: ""; position: absolute; z-index: 60; inset: 0; pointer-events: none; box-shadow: inset 0 0 12vw rgba(0,0,0,.72); }
.prototype-stage-head { position: absolute; z-index: 80; top: clamp(30px, 5vh, 60px); left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; color: rgba(232,230,224,.62); font: 500 10px "Alibaba PuHuiTi", sans-serif; letter-spacing: .17em; }
.prototype-orbit { position: absolute; inset: 0; perspective: 1400px; }
.prototype { --tx: 0px; --ty: 0px; --scroll-scale: .72; --hover-scale: 1; --pointer-x: 0px; --pointer-y: 0px; position: absolute; margin: 0; width: min(20vw, 360px); left: 50%; top: 50%; z-index: var(--z); background: #101010; outline: none; box-shadow: 0 18px 65px rgba(0,0,0,.68); opacity: 0; will-change: transform, opacity, filter; transform: translate3d(calc(-50% + var(--tx) + var(--pointer-x)), calc(-50% + var(--ty) + var(--pointer-y)), 0) scale(calc(var(--scroll-scale) * var(--hover-scale))); transition: filter .4s ease, box-shadow .4s ease, opacity .25s linear; }
.prototype img { display: block; width: 100%; height: auto; }
.prototype figcaption { position: absolute; left: 0; top: calc(100% + 8px); color: rgba(231,229,224,.7); font: 500 9px "Alibaba PuHuiTi", sans-serif; letter-spacing: .13em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; white-space: nowrap; }
.prototype-orbit:has(.prototype:hover) .prototype:not(:hover), .prototype-orbit:has(.prototype:focus-visible) .prototype:not(:focus-visible) { filter: brightness(.28) saturate(.6); }
.prototype:hover, .prototype:focus-visible { --hover-scale: 1.055; z-index: 70; box-shadow: 0 28px 90px rgba(0,0,0,.82); }
.prototype:hover figcaption, .prototype:focus-visible figcaption { opacity: 1; transform: translateY(0); }
.prototype:focus-visible { outline: 1px solid rgba(255,255,255,.7); outline-offset: 5px; }
.prototype-a { --z: 28; }
.prototype-b { --z: 22; }
.prototype-c { --z: 16; }
.prototype-d { --z: 14; }
.prototype-e { --z: 18; }
.prototype-f { --z: 26; }
.prototype-g { --z: 34; }
.prototype-hint { position: absolute; z-index: 80; left: 50%; bottom: 24px; margin: 0; transform: translateX(-50%); color: rgba(230,228,222,.42); font: 500 9px "Alibaba PuHuiTi", sans-serif; letter-spacing: .17em; white-space: nowrap; }
@media (max-width: 720px) {
  .project-intro, .case-section, .tool-section { display: block; width: min(100% - 2 * var(--pad), 1450px); }
  .project-intro { padding-top: 145px; }
  .project-title-en { font-size: 10.5vw; }
  .intro-copy h1 { font-size: 7vw; }
  .intro-description { margin-top: 10vh; }
  .intro-cover { width: 100%; margin-top: 9vh; }
  .case-section, .tool-section { padding-top: 12vh; }
  .section-body { margin-top: 36px; }
  .prototype-section { height: 205svh; margin-top: 4vh; }
  .prototype-stage-head { top: 24px; }
  .prototype { box-shadow: 0 12px 36px rgba(0,0,0,.72); }
  .prototype { width: 40vw; }
}

@media (prefers-reduced-motion: reduce) {
  .prototype { opacity: 1; --tx: 0px; --ty: 0px; --scroll-scale: 1; --pointer-x: 0px; --pointer-y: 0px; }
}