:root {
  --about-video-bg: #070b23;
  --about-video-text: #fff;
  --about-video-muted: rgba(255, 255, 255, .72);
  --about-video-blue: #00156c;
  --about-video-handoff: 1200ms;
  --about-video-easing: cubic-bezier(.45, 0, .55, 1);
  --about-video-text-duration: 900ms;
  --about-video-space: 8px;
  --about-video-control-height: 44px;
}
body[data-video-detail] .video-detail__scene {
  transition: filter var(--about-video-handoff) var(--about-video-easing);
}
body[data-video-detail] .video-detail__overlay { transition: opacity var(--about-video-handoff) var(--about-video-easing); }
body[data-video-detail][data-video-baked-fade="true"] .video-detail__overlay { opacity: 0; }
/* Actual mobile browsers use their visible compositor instead of a hidden decoder. */
body.uses-native-video .video-detail__scene video { opacity: 1; visibility: visible; }
body.uses-native-video #about-video-paint { opacity: 0; visibility: hidden; }
body.uses-native-video.is-native-waiting .video-detail__registration::after {
  content: ""; position: absolute; z-index: 2; inset: 0;
  background: #070b23 var(--entry-open-poster) center / cover no-repeat;
  pointer-events: none;
}
body.uses-native-video.is-static .video-detail__scene video { visibility: hidden; }
html[data-video-intro="true"] .about-header,
html[data-video-intro="true"] .about-main > * {
  transition: opacity var(--about-video-text-duration) var(--about-video-easing), transform var(--about-video-text-duration) var(--about-video-easing);
  transition-delay: 420ms;
}
html[data-video-intro="true"] .about-header,
html[data-video-intro="true"] .about-main > :nth-child(-n+2) { transition-delay: 220ms; }
html[data-video-intro="true"] .about-main > :nth-child(4) { transition-delay: 480ms; }
html[data-video-intro="true"] .about-main > :nth-child(5) { transition-delay: 520ms; }
body[data-video-detail].is-content-visible .about-header,
body[data-video-detail].is-content-visible .about-main > * { opacity: 1; transform: translateY(0); }
.about-video__intro { position: fixed; z-index: 5; inset: 0; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 160ms ease, visibility 0s linear 160ms; }
html[data-video-intro="true"] body:not(.is-content-visible) .about-video__intro { opacity: 1; visibility: visible; transition-delay: 0s; }
.about-video__controls {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: max(4.4%, env(safe-area-inset-left));
  right: max(4.4%, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  line-height: 1.5;
}
.about-video__intro a, .about-video__intro button,
.about-video__feedback button, .about-video__playback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--about-video-control-height);
  min-width: var(--about-video-control-height);
  border: 0;
  padding: 8px 0;
  background: transparent;
  color: var(--about-video-text);
  font: inherit;
  cursor: pointer;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
  pointer-events: auto;
}
.about-video__intro a:hover, .about-video__intro button:hover,
.about-video__feedback button:hover, .about-video__playback:hover { opacity: .72; }
.about-video__intro a:focus-visible, .about-video__intro button:focus-visible,
.about-video__feedback button:focus-visible, .about-video__playback:focus-visible { outline: 2px solid var(--about-video-text); outline-offset: 5px; }
.about-video__intro button:disabled, .about-video__playback:disabled { opacity: .35; cursor: default; }
.about-video__playback {
  position: fixed;
  z-index: 6;
  right: max(4.4%, env(safe-area-inset-right));
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 8px));
  width: var(--about-video-control-height);
  height: var(--about-video-control-height);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 50%;
}
.about-video__playback svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.about-video__playback .play-icon, .about-video__playback.is-paused .pause-icon { display: none; }
.about-video__playback.is-paused .play-icon { display: block; }
.about-video__progress { position: absolute; left: max(4.4%, env(safe-area-inset-left)); right: max(4.4%, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); height: 1px; background: rgba(255, 255, 255, .16); }
.about-video__progress span { display: block; height: 100%; background: rgba(255, 255, 255, .66); transform-origin: left; transform: scaleX(var(--video-progress, 0)); }
.about-video__feedback {
  position: fixed;
  z-index: 6;
  left: max(4.4%, env(safe-area-inset-left));
  right: calc(max(4.4%, env(safe-area-inset-right)) + 72px);
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 8px));
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--about-video-control-height);
  color: var(--about-video-muted);
  font-size: 12px;
  line-height: 1.6;
}
.about-video__feedback p { margin: 0; }
.about-video__feedback button { flex: 0 0 auto; text-decoration: underline; text-underline-offset: 4px; }
.about-video__feedback[hidden], .about-video__feedback button[hidden], .about-video__playback[hidden] { display: none; }
body.is-content-visible .about-video__intro, body.is-content-visible .about-video__intro * { pointer-events: none; }
body.is-restored .video-detail__scene, body.is-restored .video-detail__overlay,
body.is-restored .about-header, body.is-restored .about-main > *, body.is-static .video-detail__scene,
body.is-static .video-detail__overlay, body.is-static .about-header, body.is-static .about-main > * { transition: none; }
@media (max-width: 600px) {
  .about-video__controls { font-size: 12px; }
  .about-video__controls, .about-video__progress { left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); }
  .about-video__playback { right: max(16px, env(safe-area-inset-right)); }
  .about-video__feedback { left: max(16px, env(safe-area-inset-left)); right: calc(max(16px, env(safe-area-inset-right)) + 64px); font-size: 11px; }
  body.is-content-visible .about-video__feedback { bottom: max(72px, calc(env(safe-area-inset-bottom) + 56px)); }
}
@media (max-height: 440px) and (orientation: landscape) { .about-video__controls { top: max(8px, env(safe-area-inset-top)); } }
@media (prefers-reduced-motion: reduce) {
  body[data-video-detail] *, body[data-video-detail] *::before, body[data-video-detail] *::after { transition: none !important; }
}

/* The room snapshot remains the visible source until actual movie frames blend. */
.video-detail__registration { transition: none; }
/* The mobile movie starts in the exact photo frame and opens with media time. */
.video-detail__mobile-window { display: contents; }
.video-detail__mobile-ambience, .video-detail__mobile-shade { display: none; }
body[data-video-detail].is-mobile-entry:not(.is-content-visible),
body[data-video-detail].is-mobile-entry:not(.is-content-visible) .video-detail__scene,
body[data-video-detail].is-mobile-entry:not(.is-content-visible) .video-detail__registration,
body[data-video-detail].is-mobile-entry.is-native-waiting:not(.is-content-visible) .video-detail__registration::after { background-color: #000; }
body[data-video-detail].is-mobile-entry .video-detail__mobile-ambience {
  display: block; position: absolute; z-index: 0;
  inset: calc(-1 * var(--mobile-ambient-bleed, 64px));
  width: calc(100% + 2 * var(--mobile-ambient-bleed, 64px));
  height: calc(100% + 2 * var(--mobile-ambient-bleed, 64px));
  object-fit: cover; object-position: 48% 50.7%;
  filter: blur(var(--mobile-ambient-blur, 32px));
}
body[data-video-detail].is-mobile-entry .video-detail__mobile-shade { display: block; position: absolute; z-index: 1; inset: 0; }
body[data-video-detail].is-mobile-entry .video-detail__mobile-window {
  display: block; position: absolute; z-index: 2; inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--mobile-mask-top), #000 var(--mobile-mask-fade-top), #000 var(--mobile-mask-fade-bottom), transparent var(--mobile-mask-bottom));
  mask-image: linear-gradient(to bottom, transparent var(--mobile-mask-top), #000 var(--mobile-mask-fade-top), #000 var(--mobile-mask-fade-bottom), transparent var(--mobile-mask-bottom));
}
body[data-video-detail].is-mobile-entry .video-detail__registration {
  left: var(--mobile-film-left); top: var(--mobile-film-top);
  width: var(--mobile-film-width); height: var(--mobile-film-height);
  transform: none; transition: none;
}
.about-video-host {
  position: fixed; inset: 0; z-index: 1000; width: 100%; max-width: none;
  height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0;
  overflow: hidden; border: 0; color: #fff; background: #070b23;
  opacity: 1; font-family: var(--font-family, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
}
.about-video-host::backdrop { background: transparent; }
.about-video-host.is-mobile-entry { background-color: #000; }
.about-video-host:not([open]) { display: block; visibility: hidden; pointer-events: none; }
.about-video-host[open] { visibility: visible; pointer-events: auto; }
.about-video-host__frame { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; border: 0; visibility: hidden; pointer-events: none; }
.about-video-host__frame.is-active { visibility: visible; pointer-events: auto; }
.about-video-host__bridge { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; transform-origin: 0 0; pointer-events: none; }
.about-video-host__room-ui { position: absolute; z-index: 3; inset: 0; pointer-events: none; opacity: 1; transition: opacity 180ms ease; }
.about-video-host__room-ui .portfolio-sound-toggle,
.about-video-host__room-ui .sound-toggle,
.about-video-host__room-ui [data-sound-toggle] { display: none !important; }
.about-video-host.is-bridging .about-video-host__room-ui { opacity: 0; }
.about-video-host.is-bridge-done .about-video-host__room-ui { opacity: 0; }
/* History restoration exposes the destination only. Home captures never sit
   over a restored catalogue, even while its static receiver becomes ready. */
.about-video-host.is-restoring .about-video-host__room-ui,
.about-video-host.is-restoring .about-video-host__bridge,
.about-video-host.is-restoring .about-video-host__fallback,
.about-video-host.is-restoring .about-video-host__status,
.about-video-host.is-restoring .about-video-host__playback,
.about-video-host.is-content-ready .about-video-host__room-ui,
.about-video-host.is-content-ready .about-video-host__bridge,
.about-video-host.is-content-ready .about-video-host__fallback,
.about-video-host.is-content-ready .about-video-host__status,
.about-video-host.is-content-ready .about-video-host__playback { display: none; }
.about-video-host__fallback { position: absolute; z-index: 5; top: max(16px, env(safe-area-inset-top)); left: max(4.4%, env(safe-area-inset-left)); right: max(4.4%, env(safe-area-inset-right)); display: flex; justify-content: space-between; gap: 16px; font-size: 13px; opacity: 0; transition: opacity 160ms ease 180ms; }
.about-video-host.is-bridging .about-video-host__fallback { opacity: 1; }
.about-video-host button, .about-video-host__status a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 8px 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.about-video-host button:focus-visible, .about-video-host__status a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.about-video-host__playback { position: absolute; z-index: 6; right: max(4.4%, env(safe-area-inset-right)); bottom: max(24px, calc(env(safe-area-inset-bottom) + 8px)); }
.about-video-host .about-video-host__playback { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .36); border-radius: 50%; }
.about-video-host__playback svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.about-video-host__playback .play-icon, .about-video-host__playback.is-paused .pause-icon { display: none; }
.about-video-host__playback.is-paused .play-icon { display: block; }
.about-video-host__status { position: absolute; z-index: 5; left: max(4.4%, env(safe-area-inset-left)); right: calc(max(4.4%, env(safe-area-inset-right)) + 64px); bottom: max(24px, calc(env(safe-area-inset-bottom) + 8px)); min-height: 44px; display: flex; align-items: center; gap: 16px; margin: 0; color: rgba(255, 255, 255, .72); font-size: 12px; }
.about-video-host__status button, .about-video-host__status a { display: none; }
.about-video-host.has-error .about-video-host__status button, .about-video-host.has-error .about-video-host__status a { display: inline-flex; text-decoration: underline; text-underline-offset: 4px; }
.about-video-host.is-bridge-done .about-video-host__fallback, .about-video-host.is-bridge-done .about-video-host__status, .about-video-host.is-bridge-done .about-video-host__playback { display: none; }
.about-video-host.is-input-required .about-video-host__room-ui,
.about-video-host.is-input-required .about-video-host__fallback,
.about-video-host.is-input-required .about-video-host__status,
.about-video-host.is-input-required .about-video-host__playback { display: none; }
@media (max-width: 600px) {
  .about-video-host__fallback { left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); font-size: 12px; }
  .about-video-host__playback { right: max(16px, env(safe-area-inset-right)); }
  .about-video-host__status { left: max(16px, env(safe-area-inset-left)); font-size: 11px; flex-wrap: wrap; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .about-video-host *, .video-detail__registration { transition: none !important; } }

.about-main h1:focus { outline: none; }
.about-video-host__status { visibility: hidden; }
.about-video-host.is-status-visible .about-video-host__status, .about-video-host.has-error .about-video-host__status { visibility: visible; }

.about-video-host.is-status-visible .about-video-host__room-ui, .about-video-host.has-error .about-video-host__room-ui { opacity: 0; }
.about-video-host.is-status-visible .about-video-host__fallback, .about-video-host.has-error .about-video-host__fallback { opacity: 1; }