:root { color-scheme: dark; font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #05060b; }
html.is-loading, html.is-loading body { overflow: hidden; }
body { min-width: 1100px; }
.mobile-gate { display: none; }
@media (max-width: 1024px) {
  html, html body {
    width: 100%;
    min-width: 0 !important;
    height: 100%;
    overflow: hidden !important;
  }
  .mobile-gate {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: block;
    background: #2c3649;
    overflow: hidden;
  }
  .mobile-gate-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 49%;
    max-width: 350px;
    text-align: center;
    transform: translate(-50%, -50%);
  }
  .mobile-gate-logo {
    display: block;
    width: 100%;
    height: auto;
  }
  .mobile-gate-content p {
    margin: 12px 0 0;
    color: #fff;
    font: 400 14px/1.4 Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    white-space: nowrap;
  }
}
.site-loader { position: fixed; z-index: 1000; inset: 0; overflow: hidden; background: #2c3649; color: #fff; transform: translateZ(0); will-change: opacity, filter; }
.site-loader-center { position: absolute; left: 35.6944vw; top: 38.4058vh; width: 30.7639vw; transform: translate3d(0, 0, 0); }
.site-loader-logo { position: relative; width: 100%; overflow: hidden; opacity: 0; filter: blur(10px); animation: loader-logo-in .65s cubic-bezier(.22,.75,.24,1) .08s forwards; }
.site-loader-logo img { display: block; width: 100%; height: auto; }
.site-loader-readout { display: flex; justify-content: space-between; margin-top: 18px; color: rgba(255,255,255,.72); font: 500 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }
.site-loader-number { min-width: 3ch; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.site-loader-track { height: 1px; margin-top: 9px; overflow: hidden; background: rgba(255,255,255,.2); }
.site-loader-bar { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; will-change: transform; }
.site-loader.is-ready .site-loader-state { color: #fff; }
.site-loader.is-revealing { animation: loader-blur-out .72s cubic-bezier(.55,0,.3,1) forwards; pointer-events: none; }
.site-loader.is-finished { display: none; }
@keyframes loader-logo-in { to { opacity: 1; filter: blur(0); } }
@keyframes loader-blur-out { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(24px); } }
.scroll-track { height: 4854.6667vh; }
.stage { position: fixed; inset: 0; height: 100vh; overflow: clip; background: #05060b; }
.stage-content { position: absolute; left: 50%; top: 50%; width: min(100vw, calc(100vh * 1440 / 828)); height: min(100vh, calc(100vw * 828 / 1440)); overflow: hidden; container-type: size; transform: translate(-50%, -50%); }
.background-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scroll-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.scroll-video { opacity: 0; visibility: hidden; }
.stage.is-scroll-video-fallback .scroll-canvas { visibility: hidden; }
.stage.is-scroll-video-fallback .scroll-video { visibility: visible; }
.shade { position: absolute; inset: 0; background: rgba(2, 4, 12, .08); pointer-events: none; }
.brand { position: absolute; z-index: 8; top: 5.6cqh; left: 3.6cqw; width: min(35cqw, 700px); transform-origin: left top; will-change: transform; }
.brand img { display: block; width: 100%; height: auto; }
.info-card { position: absolute; z-index: 4; left: 2.75cqw; bottom: 4.8cqh; width: min(23cqw, 470px); min-width: 310px; padding: 22px 24px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: rgba(29, 27, 40, .88); color: #f4f3f6; will-change: transform, opacity, filter; }
.card-title, .card-copy, .contact p { margin: 0; font-size: clamp(15px, 1.15cqw, 23px); line-height: 1.42; letter-spacing: 0; }
.card-line-mask { display: block; overflow: hidden; }
.card-line { display: block; will-change: transform; }
.card-copy { margin-top: 2.4em; }
.rule { height: 1px; margin: 1.25em 0; background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.6), rgba(255,255,255,.08)); }
.contact { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; }
.contact-copy > img { width: 68px; height: auto; margin-bottom: 16px; }
.qr { width: 104px; height: 104px; object-fit: contain; }
.intro-copy { position: absolute; z-index: 4; top: 35.5%; left: 64%; width: 33%; color: #fff; will-change: transform, opacity, filter; }
.intro-copy h1 { margin: 0 0 26px; font-size: clamp(28px, 2.5cqw, 51px); line-height: 1; letter-spacing: 0; }
.intro-body-art { display: block; width: min(100%, 455px); height: auto; }
.slogan-layer { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.slogan { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; object-fit: fill; will-change: transform, opacity, filter; }
.gallery { position: absolute; z-index: 6; inset: 0; overflow: hidden; background: #060814 url("assets/gallery-bg.png") center/cover no-repeat; opacity: 0; pointer-events: none; }
.gallery-wordmark { position: absolute; z-index: 1; left: 6.25cqw; top: 50%; width: 87.5cqw; height: auto; transform: translateY(-50%); transform-origin: left center; filter: blur(10px); will-change: transform, filter, opacity; }
.gallery-track { position: absolute; z-index: 2; inset: 0; }
.work { --shade: .45; position: absolute; left: 0; top: 50%; width: 12.5cqw; height: 28.02cqh; overflow: hidden; transform-origin: center; will-change: transform, filter; }
.work img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,var(--shade)); pointer-events: none; }
.gallery-focus { position: absolute; z-index: 4; overflow: hidden; pointer-events: none; will-change: opacity, filter; }
.focus-strip { position: absolute; inset: 0; will-change: transform; }
.focus-panel { position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover; }
.focus-panel:nth-child(1) { left: 0; }
.focus-panel:nth-child(2) { left: 100%; }
.focus-panel:nth-child(3) { left: 200%; }
.focus-panel:nth-child(4) { left: 300%; }
.focus-panel:nth-child(5) { left: 400%; }
.focus-panel:nth-child(6) { left: 500%; }
.focus-panel:nth-child(7) { left: 600%; }
.focus-panel:nth-child(8) { left: 700%; }
.focus-panel:nth-child(9) { left: 800%; }
.focus-panel:nth-child(10) { left: 900%; }
.gallery-frame { position: absolute; z-index: 5; left: 50%; top: 49.76%; width: 35.83cqw; height: 80.19cqh; border: 1px dashed rgba(255,255,255,.9); transform: translate(-50%, -50%); pointer-events: none; }
.poster-transition { position: absolute; z-index: 6; inset: 0; opacity: 0; pointer-events: none; transform: translateZ(0); will-change: opacity; }
.poster-window { position: absolute; left: 32.0833cqw; top: 9.6618cqh; width: 35.8333cqw; height: 80.1932cqh; overflow: hidden; }
.poster-image { position: absolute; left: -70.6944cqw; top: -9.6618cqh; width: 149.0278cqw; height: 145.7729cqh; max-width: none; object-fit: fill; }
.poster-vector { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; max-width: none; will-change: transform, opacity; }
.poster-handoff { position: absolute; z-index: 3; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; will-change: mask-image, -webkit-mask-image; }
.detail-transition { position: absolute; z-index: 4; inset: 0; opacity: 0; overflow: hidden; color: #fff; pointer-events: none; }
.detail-reveal { position: absolute; z-index: 1; inset: 0; overflow: hidden; background: #050a14; clip-path: polygon(0 120%, 100% 100%, 100% 100%, 0 100%); will-change: clip-path; }
.detail-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.detail-seam { position: absolute; z-index: 2; left: -6%; width: 112%; height: 21cqh; opacity: 0; transform: translateY(-50%) rotate(-6.5deg); transform-origin: center; backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent); will-change: top, opacity; }
.detail-panel { position: absolute; z-index: 4; inset: 0 auto 0 0; width: 31.39%; background: rgba(255, 255, 255, .015); opacity: 0; backdrop-filter: blur(12.5px); -webkit-backdrop-filter: blur(12.5px); will-change: opacity, backdrop-filter; }
.detail-copy { position: absolute; z-index: 5; left: 4.45%; top: 21.35%; width: 25%; opacity: 0; filter: blur(12px); transform: translate3d(-18px, 0, 0); will-change: opacity, filter, transform; }
.detail-copy h2 { margin: 0 0 25px; font-size: clamp(17px, 1.35cqw, 22px); line-height: 1.2; font-weight: 500; letter-spacing: 0; }
.detail-copy p { margin: 0 0 20px; font-size: clamp(13px, 1.08cqw, 17px); line-height: 1.36; font-weight: 400; letter-spacing: 0; }
.detail-line-mask { display: block; overflow: hidden; }
.detail-line { display: block; will-change: transform; }
.detail-model-name { position: absolute; z-index: 5; left: 4.45%; bottom: 15.8%; width: 22.5%; opacity: 0; filter: blur(12px); transform: translate3d(-18px, 0, 0); will-change: opacity, filter, transform; }
.detail-model-name span { display: block; width: 100%; margin-bottom: 22px; border-top: 1px dotted rgba(255,255,255,.85); }
.detail-model-name strong { display: block; white-space: nowrap; font-size: clamp(17px, 1.47cqw, 23px); line-height: 1; font-weight: 500; letter-spacing: 0; }
.bone-transition { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.tail-scene { position: absolute; z-index: 2; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; will-change: opacity; }
.tail-photo { position: absolute; display: block; max-width: none; object-fit: fill; will-change: left, top, width, height; }
.contact-scene { position: absolute; z-index: 6; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; color: #fff; }
.contact-video { position: absolute; z-index: 0; left: 0; top: 1.087cqh; display: block; width: 100cqw; height: 97.826cqh; max-width: none; object-fit: fill; opacity: 0; }
.contact-watermark-cover { position: absolute; z-index: 1; left: .0694cqw; top: 0; width: 10.1389cqw; height: 11.1111cqh; object-fit: fill; opacity: 0; }
.contact-blur-layer { position: absolute; z-index: 2; inset: -12px; background: rgba(0,0,0,.3); opacity: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); will-change: opacity; }
.contact-page-copy { position: absolute; z-index: 4; inset: 0; font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; text-align: center; }
.contact-mask { overflow: hidden; }
.contact-mask-inner { transform: translate3d(0, 115%, 0); will-change: transform; }
.contact-kicker-mask { position: absolute; left: 42%; top: 31.9%; width: 16%; font-size: clamp(18px, 1.67cqw, 26px); line-height: 1.2; font-weight: 500; }
.contact-subtitle-mask { position: absolute; left: 38%; top: 37.05%; width: 24%; font-size: clamp(17px, 1.67cqw, 24px); line-height: 1.2; font-weight: 500; }
.contact-headline { position: absolute; left: 27.5%; top: 46.8%; width: 45%; white-space: nowrap; font-size: clamp(30px, 2.78cqw, 44px); line-height: 1.15; font-weight: 500; opacity: 0; filter: blur(18px); will-change: opacity, filter; }
.contact-qr-group { position: absolute; top: 61.9565%; width: 6.9444cqw; }
.contact-qr-xianyu { left: 35.4167%; }
.contact-qr-wechat { left: 44.0278%; }
.contact-qr-card { width: 6.9444cqw; height: 12.0773cqh; padding: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.34); border-radius: 16px; background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(255,255,255,.1), 0 8px 24px rgba(27,12,6,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; filter: blur(16px); will-change: opacity, filter; }
.contact-qr-card img { display: block; width: 100%; height: 100%; object-fit: fill; }
.contact-qr-label-mask { position: absolute; left: -18%; top: 13.15cqh; width: 136%; white-space: nowrap; font-size: clamp(10px, .83cqw, 13px); line-height: 1.3; }
.contact-divider { position: absolute; left: 53.2292%; top: 61.9565%; width: 1px; height: 12.0773cqh; opacity: 0; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.6) 50%, transparent); }
.contact-account-list { position: absolute; left: 55.4861%; top: 65.1%; width: 20%; display: grid; gap: 2.15cqh; text-align: left; white-space: nowrap; font-size: clamp(10px, .83cqw, 13px); line-height: 1.3; }
.origin-scene { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.origin-backdrop { position: absolute; z-index: 0; inset: -16px; background: url("assets/origin-background.svg") center/100% 100% no-repeat; opacity: 0; will-change: opacity; }
.origin-lineart { position: absolute; z-index: 2; left: 50cqw; top: 13.8889cqh; width: 22.7778cqw; height: 70.2899cqh; object-fit: fill; opacity: 0; will-change: opacity, filter; }
.cutaway-lineart { --cutaway-blur: 10px; --cutaway-brightness: 1; --cutaway-glow: rgba(255,255,255,0); position: absolute; z-index: 3; left: 47.2222cqw; top: 3.5024cqh; width: 33.6806cqw; height: 87.8019cqh; object-fit: fill; opacity: 0; transform-origin: center; filter: blur(var(--cutaway-blur)) brightness(var(--cutaway-brightness)) drop-shadow(0 0 5px var(--cutaway-glow)); transition: filter .58s cubic-bezier(.22,.7,.25,1); will-change: opacity, filter, transform; }
.cutaway-lineart.is-line-hovered { --cutaway-brightness: 1.045; --cutaway-glow: rgba(255,255,255,.14); }
.orbit-sketches { position: absolute; inset: 0; }
.orbit-sketch { position: absolute; left: 0; top: 0; transform-origin: center; will-change: transform, opacity, filter; }
.orbit-sketch-base, .orbit-sketch-color { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; }
.orbit-sketch-base { will-change: filter, opacity; }
.orbit-sketch-color { pointer-events: none; }
.bone-layer { position: absolute; display: block; max-width: none; object-fit: fill; opacity: 0; will-change: opacity; }
.eye-layer { position: absolute; display: block; max-width: none; object-fit: fill; opacity: 0; pointer-events: none; will-change: opacity; }
.bone-skeleton { z-index: 0; }
.annotation-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bone-shell { z-index: 2; }
.bone-skeleton-hover { z-index: 4; }
.eye-layer { z-index: 5; }
.annotation-structure { --bone-hole: 1px; --bone-x: 60cqw; --bone-y: 50cqh; z-index: 6; transition: --bone-hole .32s ease; mask-image: radial-gradient(circle var(--bone-hole) at var(--bone-x) var(--bone-y), #000 0 38%, rgba(0,0,0,.86) 56%, rgba(0,0,0,.45) 76%, transparent 100%); -webkit-mask-image: radial-gradient(circle var(--bone-hole) at var(--bone-x) var(--bone-y), #000 0 38%, rgba(0,0,0,.86) 56%, rgba(0,0,0,.45) 76%, transparent 100%); }
.annotation-structure.is-hovering { --bone-hole: clamp(95px, 8.3cqw, 130px); }
.annotation-layer [data-annotation] { opacity: 0; }
.annotation-shape { fill: none; stroke: rgba(255,255,255,.94); stroke-width: 1; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px rgba(255,255,255,.8)); }
.annotation-dashed { stroke-dasharray: 2px 2px; }
.annotation-marker { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 2px rgba(255,255,255,.8)); }
.annotation-faint { stroke: rgba(255,255,255,.7); }
.bone-shell, .bone-skeleton-hover { --bone-hole: 1px; --bone-x: 60cqw; --bone-y: 50cqh; transition: --bone-hole .32s ease, opacity .18s ease; }
.bone-shell { mask-image: radial-gradient(circle var(--bone-hole) at var(--bone-x) var(--bone-y), transparent 0 38%, rgba(0,0,0,.14) 56%, rgba(0,0,0,.55) 76%, #000 100%); -webkit-mask-image: radial-gradient(circle var(--bone-hole) at var(--bone-x) var(--bone-y), transparent 0 38%, rgba(0,0,0,.14) 56%, rgba(0,0,0,.55) 76%, #000 100%); }
.bone-skeleton-hover { mask-image: radial-gradient(circle var(--bone-hole) at var(--bone-x) var(--bone-y), #000 0 38%, rgba(0,0,0,.86) 56%, rgba(0,0,0,.45) 76%, transparent 100%); -webkit-mask-image: radial-gradient(circle var(--bone-hole) at var(--bone-x) var(--bone-y), #000 0 38%, rgba(0,0,0,.86) 56%, rgba(0,0,0,.45) 76%, transparent 100%); }
.bone-shell.is-hovering, .bone-skeleton-hover.is-hovering { --bone-hole: clamp(95px, 8.3cqw, 130px); }
.bone-hover-prompt { position: absolute; z-index: 7; left: 42.5694cqw; top: 73.7923cqh; width: 6.6667cqw; min-width: 92px; color: #fff; opacity: 0; pointer-events: none; text-align: center; will-change: opacity; }
.bone-prompt-track { position: relative; width: 96px; height: 56px; margin: -13px auto 1px; }
.bone-prompt-motion { position: absolute; width: 22px; height: 30px; offset-path: path("M35.252 18.953C27.36 21.609 27.361 29.819 35.252 32.959C43.144 36.098 49.721 18.471 59.191 18.953C68.66 19.436 67.871 32.959 59.191 32.959C50.51 32.958 43.144 16.298 35.252 18.953Z"); offset-anchor: 50% 58%; offset-rotate: 0deg; will-change: offset-distance; }
.bone-prompt-mouse { display: block; width: 22px; height: 30px; overflow: visible; fill: currentColor; transform-origin: 50% 58%; will-change: transform; }
.bone-prompt-wheel { transform-box: fill-box; transform-origin: center; }
.bone-prompt-rule { display: block; width: 100%; border-top: 1px dashed #fff; }
.bone-prompt-label { display: block; margin-top: 8px; white-space: nowrap; font-size: clamp(12px, 1.1cqw, 16px); line-height: 1; font-weight: 400; letter-spacing: 0; }
.bone-hover-prompt.is-active .bone-prompt-motion { animation: bone-prompt-orbit 7.95s linear infinite; }
.bone-hover-prompt.is-active .bone-prompt-mouse { animation: bone-prompt-axis 7.95s linear infinite; }
@keyframes bone-prompt-orbit {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
@keyframes bone-prompt-axis {
  0%, 100% { transform: rotate(-12deg); }
  15% { transform: rotate(-29deg); }
  28% { transform: rotate(-14deg); }
  40% { transform: rotate(0deg); }
  53% { transform: rotate(14deg); }
  65% { transform: rotate(29deg); }
  78% { transform: rotate(14deg); }
  90% { transform: rotate(0deg); }
}
@property --bone-hole { syntax: "<length>"; inherits: false; initial-value: 1px; }
.loading { position: absolute; z-index: 9; right: 24px; bottom: 20px; padding: 8px 10px; background: rgba(0,0,0,.58); font-size: 12px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.loading.visible { opacity: 1; }