* {
  box-sizing: border-box;
}

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #191919;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  padding: clamp(12px, 4vw, 56px);
  color: rgba(255, 255, 255, 0.86);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 2px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.08);
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #89b8b7, #d8e9e5 48%, #f1d4a0);
}

.deck {
  width: min(100%, 1720px);
  margin: 0 auto;
}

.page {
  position: relative;
  width: min(100%, 1540px);
  margin: 0 auto clamp(46px, 7vw, 96px);
  will-change: opacity, transform;
  transition:
    opacity 0.95s var(--ease-soft),
    transform 1.1s var(--ease-out);
}

.js .page {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.985);
}

.js .page.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.page:last-child {
  margin-bottom: 0;
}

.page-number {
  position: absolute;
  left: -44px;
  top: -42px;
  color: rgba(255, 255, 255, 0.34);
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1;
  font-weight: 500;
  transition: color 0.7s ease, transform 0.9s var(--ease-out);
}

.js .page-number {
  transform: translateY(10px);
}

.js .page.is-visible .page-number {
  transform: translateY(0);
}

.page > img {
  display: block;
  width: 100%;
  height: auto;
  background: #050505;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
  user-select: none;
  transition:
    opacity 1s var(--ease-soft),
    transform 1.25s var(--ease-out),
    box-shadow 0.7s ease,
    filter 0.7s ease;
}

.js .page > img {
  opacity: 0.84;
  transform: scale(1.018);
}

.js .page.is-visible > img {
  opacity: 1;
  transform: scale(1);
}

.page:hover > img {
  box-shadow: 0 32px 92px rgba(0, 0, 0, 0.52);
}

/* ===== 第 1 页（1920×1080 分层封面）===== */
.page-one {
  position: relative;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
  background: #050505;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
}

.page-one > img.page-one-background,
.page-one > img.page-one-title,
.page-one-software {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

.page-one > img.page-one-background {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  transition: transform 1.4s var(--ease-out), filter 0.8s ease;
}

.page-one > img.page-one-title {
  left: 5.21%;
  top: 21.02%;
  width: 61.93%;
  height: 33.33%;
  object-fit: fill;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.9s var(--ease-soft), transform 1s var(--ease-out);
}

.page-one-software {
  left: 5.21%;
  top: 67.41%;
  width: 54.22%;
  height: 11.67%;
  z-index: 3;
  cursor: pointer;
  outline: none;
  transform-origin: center center;
  transition:
    opacity 0.9s var(--ease-soft),
    transform 1s var(--ease-out),
    filter 0.55s ease;
}

.page-one-software img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.55s var(--ease-out);
}

.page-one:hover .page-one-background {
  transform: scale(1.012);
  filter: saturate(1.06) contrast(1.03);
}

.js .page.page-one > img.page-one-title,
.js .page-one-software {
  opacity: 0;
  transform: translateY(26px);
}

.js .page.page-one.is-visible > img.page-one-title,
.js .page-one.is-visible .page-one-software {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-one.is-visible > img.page-one-title {
  transition-delay: 140ms;
}

.js .page-one.is-visible .page-one-software {
  transition-delay: 290ms;
}

.page-one-software:hover,
.page-one-software:focus-visible {
  filter: brightness(1.08) drop-shadow(0 24px 42px rgba(64, 84, 255, 0.24));
}

.js .page-one.is-visible .page-one-software:hover,
.js .page-one.is-visible .page-one-software:focus-visible {
  transform: translateY(0);
}

.page-one-software:hover img,
.page-one-software:focus-visible img {
  transform: scale(1.04);
}

.page-one-software:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 8px;
}

/* ===== 第 2 页（1920×1288 工作经历 / 简历分层交互）===== */
.page-two {
  position: relative;
  aspect-ratio: 1920 / 1288;
  overflow: hidden;
  background: #b8b8b8;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
  container-type: inline-size;
}

.page-two > img.page-two-background,
.page-two-content {
  position: absolute;
  inset: 0;
}

.page-two > img.page-two-background {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  transition: transform 1.4s var(--ease-out), filter 0.8s ease;
}

.js .page.page-two > img.page-two-background,
.js .page.page-two.is-visible > img.page-two-background {
  opacity: 1;
  transform: none;
}

.page-two:hover > img.page-two-background {
  transform: scale(1.008);
  filter: saturate(1.04) contrast(1.02);
}

.page-two-content {
  z-index: 1;
}

.page-two-card {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
  opacity: 0.6;
  transform-origin: center center;
  transition: opacity 0.45s ease;
}

.page-two-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
}

.profile-card {
  left: 2.60%;
  top: 68.32%;
  width: 27.97%;
  height: 27.87%;
}

.job-card {
  left: 33.18%;
  width: 64.22%;
}

.job-card-1 {
  top: 4.27%;
  height: 21.43%;
}

.job-card-2 {
  top: 28.80%;
  height: 16.46%;
}

.job-card-3 {
  top: 48.29%;
  height: 13.98%;
}

.job-card-4 {
  top: 65.37%;
  height: 13.98%;
}

.job-card-5 {
  top: 82.69%;
  height: 13.98%;
}

.js .page-two .page-two-card {
  opacity: 0.6;
  transform: none;
}

.js .page-two.is-visible .page-two-card {
  opacity: 0.6;
  transform: none;
}

.page-two-card:hover,
.page-two-card:focus-visible {
  z-index: 3;
  opacity: 1;
}

.js .page-two.is-visible .page-two-card:hover,
.js .page-two.is-visible .page-two-card:focus-visible {
  opacity: 1;
  transform: none;
}

.page-two-card:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.74);
  outline-offset: 7px;
}

.catalog-page {
  position: relative;
}

.catalog {
  position: relative;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
  background: #0d0d0d;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.7s ease;
}

.catalog-page:hover .catalog {
  box-shadow: 0 32px 92px rgba(0, 0, 0, 0.52);
}

.catalog-background,
.catalog-modules,
.catalog-hotspots {
  position: absolute;
  inset: 0;
}

.catalog-background {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: none;
  transition: transform 1.4s var(--ease-out), filter 0.8s ease;
}

.catalog-page:hover .catalog-background {
  transform: scale(1.012);
  filter: saturate(1.04) contrast(1.02);
}

.catalog-modules {
  z-index: 1;
  pointer-events: none;
}

.catalog-module {
  position: absolute;
  top: 27.037037%;
  width: 21.875%;
  height: 54.444444%;
  transform: translateY(0);
  transition: transform 0.5s ease;
}

.js .catalog-module {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.8s var(--ease-soft),
    transform 0.9s var(--ease-out);
}

.js .catalog-page.is-visible .catalog-module {
  opacity: 1;
  transform: translateY(0);
}

.js .catalog-page.is-visible .module-1 { transition-delay: 80ms; }
.js .catalog-page.is-visible .module-2 { transition-delay: 150ms; }
.js .catalog-page.is-visible .module-3 { transition-delay: 220ms; }
.js .catalog-page.is-visible .module-4 { transition-delay: 290ms; }

.module-1 { left: 2.604167%; }
.module-2 { left: 26.927083%; }
.module-3 { left: 51.25%; }
.module-4 { left: 75.520833%; }

.catalog-module .module-state {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  box-shadow: none;
  opacity: 0;
  transition: opacity 0s;
}

.catalog-modules[data-active="1"] .module-1,
.catalog-modules[data-active="2"] .module-2,
.catalog-modules[data-active="3"] .module-3,
.catalog-modules[data-active="4"] .module-4 {
  transform: translateY(-5.555556%);
}

.js .catalog-page.is-visible .catalog-modules[data-active="1"] .module-1,
.js .catalog-page.is-visible .catalog-modules[data-active="2"] .module-2,
.js .catalog-page.is-visible .catalog-modules[data-active="3"] .module-3,
.js .catalog-page.is-visible .catalog-modules[data-active="4"] .module-4 {
  transform: translateY(-5.555556%);
}

.catalog-modules[data-active="1"] .module-1 .module-highlighted,
.catalog-modules[data-active="2"] .module-2 .module-highlighted,
.catalog-modules[data-active="3"] .module-3 .module-highlighted,
.catalog-modules[data-active="4"] .module-4 .module-highlighted,
.catalog-modules[data-active="1"] .module-2 .module-muted,
.catalog-modules[data-active="1"] .module-3 .module-muted,
.catalog-modules[data-active="1"] .module-4 .module-muted,
.catalog-modules[data-active="2"] .module-1 .module-muted,
.catalog-modules[data-active="2"] .module-3 .module-muted,
.catalog-modules[data-active="2"] .module-4 .module-muted,
.catalog-modules[data-active="3"] .module-1 .module-muted,
.catalog-modules[data-active="3"] .module-2 .module-muted,
.catalog-modules[data-active="3"] .module-4 .module-muted,
.catalog-modules[data-active="4"] .module-1 .module-muted,
.catalog-modules[data-active="4"] .module-2 .module-muted,
.catalog-modules[data-active="4"] .module-3 .module-muted {
  opacity: 1;
}

.catalog-hotspots {
  z-index: 2;
  pointer-events: auto;
}

.hotspot {
  position: absolute;
  top: 27.037037%;
  width: 21.875%;
  height: 54.444444%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.hotspot-1 { left: 2.604167%; }
.hotspot-2 { left: 26.927083%; }
.hotspot-3 { left: 51.25%; }
.hotspot-4 { left: 75.520833%; }

.hotspot:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
}

.page-five {
  position: relative;
  aspect-ratio: 1920 / 1551;
  overflow: hidden;
  background: #0d0d0d;
}

.page-five-background {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  transition: transform 1.4s var(--ease-out), filter 0.8s ease;
}

.page-five:hover .page-five-background,
.page-six:hover .page-six-background,
.page-seven:hover .page-seven-background {
  transform: scale(1.008);
  filter: saturate(1.025);
}

.page-five-content {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page-five-title {
  /* Figma 标题 frame [11:3564]：1720x101 → 89.58% x 6.51% */
  position: absolute;
  left: 5.21%;
  top: 6.45%;
  width: 89.58%;
  height: auto;
  display: block;
  background: transparent;
  box-shadow: none;
  transition: opacity 0.8s var(--ease-soft), transform 1s var(--ease-out);
}

.js .page-five .page-five-title,
.js .page-five .page-five-copy,
.js .page-five .screenshot-card {
  opacity: 0;
  transform: translateY(22px);
}

.js .page-five.is-visible .page-five-title,
.js .page-five.is-visible .page-five-copy,
.js .page-five.is-visible .screenshot-card {
  opacity: 1;
  transform: translateY(0);
}

.page-five-copy {
  /* Figma 左边文案 [11:3654]：540x976 → 28.12% x 62.93%，起始 y=19.41% */
  position: absolute;
  left: 5.21%;
  top: 19.41%;
  width: 28.12%;
  height: 62.93%;
  display: block;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
  transition: opacity 0.8s var(--ease-soft), transform 1s var(--ease-out);
}

.js .page-five.is-visible .page-five-title { transition-delay: 70ms; }
.js .page-five.is-visible .page-five-copy { transition-delay: 150ms; }
.js .page-five.is-visible .card-1 { transition-delay: 220ms; }
.js .page-five.is-visible .card-2 { transition-delay: 290ms; }
.js .page-five.is-visible .card-3 { transition-delay: 360ms; }
.js .page-five.is-visible .card-4 { transition-delay: 430ms; }
.js .page-five.is-visible .card-5 { transition-delay: 500ms; }
.js .page-five.is-visible .card-6 { transition-delay: 570ms; }

.page-five-grid {
  position: absolute;
  inset: 0;
}

.screenshot-card {
  /* Figma 卡片统一尺寸：540x350 → 28.12% x 22.57% */
  position: absolute;
  width: 28.12%;
  height: 22.57%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  transition:
    transform 0.55s var(--ease-out),
    box-shadow 0.55s ease,
    filter 0.55s ease,
    opacity 0.8s var(--ease-soft);
  transform-origin: center center;
}

.screenshot-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
}

/* 按 Figma 节点 id 精确还原 6 张竞品卡片位置（用户切图编号 1~6） */
.card-1 { left: 35.94%; top: 19.41%; }  /* 1.png Copart详情 → 左1  */
.card-2 { left: 66.67%; top: 19.41%; }  /* 2.png Copart首页 → 右1 [11:3584] */
.card-3 { left: 35.94%; top: 45.20%; }  /* 3.png OpenLane   → 左2 [11:3589~612] */
.card-4 { left: 66.67%; top: 45.20%; }  /* 4.png CarMax     → 右2 [11:3592] */
.card-5 { left: 35.94%; top: 70.99%; }  /* 5.png Cars.com   → 左3 [11:3596] */
.card-6 { left: 66.67%; top: 70.99%; }  /* 6.png Cars24     → 右3 [11:3600] */

.screenshot-card:hover,
.screenshot-card:focus-visible {
  z-index: 5;
  transform: translateY(-6px) scale(1.1);
  filter: brightness(1.08) saturate(1.03);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.34);
  transition:
    transform 0.55s var(--ease-out),
    box-shadow 0.55s ease,
    filter 0.55s ease,
    z-index 0s;
}

.screenshot-card:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
}

.js .page-five.is-visible .screenshot-card:hover,
.js .page-five.is-visible .screenshot-card:focus-visible {
  transform: translateY(-6px) scale(1.1);
}

.page-four {
  position: relative;
  aspect-ratio: 1920 / 1080;
  overflow: visible;
  background: #0d0d0d;
}

.page-four-background,
.page-four-groups {
  position: absolute;
  inset: 0;
}

.page-four-background {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: none;
  pointer-events: none;
}

.page-four-groups {
  z-index: 1;
  overflow: visible;
}

.group-card {
  position: absolute;
  top: 61.111111%;
  display: block;
  width: 28.125%;
  aspect-ratio: 540 / 300;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  cursor: pointer;
  transform: scale(1);
  transform-origin: center;
  transition:
    transform 0.55s var(--ease-out),
    filter 0.55s ease,
    opacity 0.8s var(--ease-soft);
  outline: none;
}

.js .page-four .group-card {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
}

.js .page-four.is-visible .group-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.group-14 { left: 5.208333%; }
.group-12 { left: 35.9375%; }
.group-13 { left: 66.666667%; }

.group-14 { --card-delay: 90ms; }
.group-12 { --card-delay: 180ms; }
.group-13 { --card-delay: 270ms; }

.js .page-four.is-visible .group-14 { transition-delay: var(--card-delay); }
.js .page-four.is-visible .group-12 { transition-delay: var(--card-delay); }
.js .page-four.is-visible .group-13 { transition-delay: var(--card-delay); }

.group-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}

.group-card:hover,
.group-card:focus-visible {
  z-index: 2;
  transform: translateY(-8px) scale(1.1);
  filter: brightness(1.08);
}

.group-card:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 5px;
}

.js .page-four.is-visible .group-card:hover,
.js .page-four.is-visible .group-card:focus-visible {
  transform: translateY(-8px) scale(1.1);
}

/* ===== 第 6 页（Figma 画板 [11:3706] 1920x1503）===== */
.page-six {
  position: relative;
  aspect-ratio: 1920 / 1503;
  overflow: hidden;
  background: #0d0d0d;
}

.page-six-background {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  transition: transform 1.4s var(--ease-out), filter 0.8s ease;
}

.page-six-content {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page-six-title {
  /* Figma [11:3708]：1720x101 → 89.58% x 6.72%，起点 5.21% / 6.65% */
  position: absolute;
  left: 5.21%;
  top: 6.65%;
  width: 89.58%;
  height: auto;
  display: block;
  background: transparent;
  box-shadow: none;
  transition: opacity 0.8s var(--ease-soft), transform 1s var(--ease-out);
}

.js .page-six .page-six-title,
.js .page-six .page-six-copy,
.js .page-six .page-six-caption,
.js .page-six .page-six-shot {
  opacity: 0;
  transform: translateY(22px);
}

.js .page-six.is-visible .page-six-title,
.js .page-six.is-visible .page-six-copy,
.js .page-six.is-visible .page-six-caption,
.js .page-six.is-visible .page-six-shot {
  opacity: 1;
  transform: translateY(0);
}

.page-six-copy {
  /* Figma [11:3712]：540x456 → 28.12% x 30.34%，起点 5.21% / 20.03% */
  position: absolute;
  left: 5.21%;
  top: 20.03%;
  width: 28.12%;
  height: 30.34%;
  display: block;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
  transition: opacity 0.8s var(--ease-soft), transform 1s var(--ease-out);
}

.js .page-six.is-visible .page-six-title { transition-delay: 70ms; }
.js .page-six.is-visible .page-six-copy { transition-delay: 150ms; }
.js .page-six.is-visible .caption-1,
.js .page-six.is-visible .caption-2,
.js .page-six.is-visible .caption-3,
.js .page-six.is-visible .caption-4,
.js .page-six.is-visible .caption-5 {
  transition-delay: 220ms;
}
.js .page-six.is-visible .shot-1 { transition-delay: 270ms; }
.js .page-six.is-visible .shot-2 { transition-delay: 340ms; }
.js .page-six.is-visible .shot-3 { transition-delay: 410ms; }
.js .page-six.is-visible .shot-4 { transition-delay: 480ms; }
.js .page-six.is-visible .shot-5 { transition-delay: 550ms; }

.page-six-caption {
  /* Figma 竞品标题：430x64 → 22.40% x 4.26% */
  position: absolute;
  width: 22.40%;
  height: 4.26%;
  display: block;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transition: opacity 0.8s var(--ease-soft), transform 0.9s var(--ease-out);
}

.page-six-shot {
  /* Figma 竞品截图：540x240 → 28.12% x 15.97% */
  position: absolute;
  width: 28.12%;
  height: 15.97%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  transition:
    transform 0.55s var(--ease-out),
    box-shadow 0.55s ease,
    filter 0.55s ease,
    opacity 0.8s var(--ease-soft);
  transform-origin: center center;
}

.page-six-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
}

/* 按 Figma 节点精确还原 5 组卡片位置（两列三行，最后一格空） */
.caption-1 { left: 35.94%; top: 20.03%; }
.shot-1    { left: 35.94%; top: 26.28%; }
.caption-2 { left: 66.67%; top: 20.03%; }
.shot-2    { left: 66.67%; top: 26.28%; }
.caption-3 { left: 35.94%; top: 45.58%; }
.shot-3    { left: 35.94%; top: 51.83%; }
.caption-4 { left: 66.67%; top: 45.58%; }
.shot-4    { left: 66.67%; top: 51.83%; }
.caption-5 { left: 35.94%; top: 71.12%; }
.shot-5    { left: 35.94%; top: 77.38%; }

.page-six-shot:hover,
.page-six-shot:focus-visible {
  z-index: 5;
  transform: translateY(-6px) scale(1.1);
  filter: brightness(1.08) saturate(1.03);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.34);
  transition:
    transform 0.55s var(--ease-out),
    box-shadow 0.55s ease,
    filter 0.55s ease;
}

.page-six-shot:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
}

.js .page-six.is-visible .page-six-shot:hover,
.js .page-six.is-visible .page-six-shot:focus-visible {
  transform: translateY(-6px) scale(1.1);
}

/* ===== 第 7 页（设计规范 & 组件搭建，1920×3917 分层展示）===== */
.page-seven {
  position: relative;
  aspect-ratio: 1920 / 3917;
  overflow: hidden;
  background: #eef4f6;
  container-type: inline-size;
}

.page-seven-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  transform-origin: center top;
  transition: transform 1.4s var(--ease-out), filter 0.8s ease;
}

.page-seven-content {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page-seven-goal-title {
  position: absolute;
  left: 5.21%;
  top: 3.29%;
  width: 12.34%;
  height: auto;
  display: block;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.9s var(--ease-out);
}

.goal-card {
  position: absolute;
  left: 4.17%;
  top: 5.85%;
  width: 30.21%;
  height: 18.89%;
  cursor: pointer;
  z-index: 1;
  outline: none;
  transform-origin: center center;
  transition:
    opacity 0.85s var(--ease-soft),
    transform 0.9s var(--ease-out),
    filter 0.55s ease;
}

.goal-card-1 { --card-delay: 90ms; }
.goal-card-2 { left: 34.90%; --card-delay: 190ms; }
.goal-card-3 { left: 65.63%; --card-delay: 290ms; }

.goal-card .state-muted,
.goal-card .state-lit {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.32s ease;
}

.goal-card .state-lit {
  opacity: 0;
}

.page-seven-label {
  position: absolute;
  left: 5.21%;
  margin: 0;
  color: #101010;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.9s var(--ease-out);
}

.label-colors {
  top: 33.55%;
}

.label-font {
  top: 51.31%;
}

.label-components {
  top: 65.71%;
}

.page-seven-spec {
  position: absolute;
  left: 5.21%;
  width: 89.58%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
  outline: none;
  transition:
    transform 0.65s var(--ease-out),
    filter 0.65s ease,
    opacity 0.85s var(--ease-soft);
  transform-origin: center center;
}

.page-seven-spec img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
}

.spec-font {
  top: 53.26%;
  height: 9.65%;
  --spec-delay: 220ms;
}

.spec-colors {
  top: 35.61%;
  height: 12.77%;
  --spec-delay: 120ms;
}

.spec-components {
  top: 67.81%;
  height: 30.64%;
  --spec-delay: 320ms;
}

.js .page-seven-goal-title,
.js .goal-card,
.js .page-seven-label,
.js .page-seven-spec {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
}

.js .page-seven.is-visible .page-seven-goal-title,
.js .page-seven.is-visible .goal-card,
.js .page-seven.is-visible .page-seven-label,
.js .page-seven.is-visible .page-seven-spec {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.js .page-seven.is-visible .page-seven-goal-title {
  transition-delay: 50ms;
}

.js .page-seven.is-visible .goal-card {
  transition-delay: var(--card-delay);
}

.js .page-seven.is-visible .label-colors {
  transition-delay: 80ms;
}

.js .page-seven.is-visible .label-font {
  transition-delay: 180ms;
}

.js .page-seven.is-visible .label-components {
  transition-delay: 280ms;
}

.js .page-seven.is-visible .page-seven-spec {
  transition-delay: var(--spec-delay);
}

.goal-card:hover .state-lit,
.goal-card:focus-visible .state-lit {
  opacity: 1;
}

.goal-card:hover,
.goal-card:focus-visible {
  z-index: 3;
  transform: translateY(-10px) scale(1.02);
  filter: brightness(1.06);
}

.goal-card:focus-visible {
  outline: 2px solid rgba(229, 240, 241, 0.82);
  outline-offset: 8px;
}

.js .page-seven.is-visible .goal-card:hover,
.js .page-seven.is-visible .goal-card:focus-visible {
  transform: translateY(-10px) scale(1.02);
}

.page-seven-spec:hover,
.page-seven-spec:focus-visible {
  z-index: 3;
  transform: scale(1.05);
  filter: brightness(1.04) drop-shadow(0 30px 48px rgba(18, 38, 48, 0.18));
}

.page-seven-spec:focus-visible {
  outline: 2px solid rgba(0, 117, 48, 0.45);
  outline-offset: 8px;
}

.js .page-seven.is-visible .page-seven-spec:hover,
.js .page-seven.is-visible .page-seven-spec:focus-visible {
  transform: translateY(0) scale(1.05);
}

@media (max-width: 860px) {
  body {
    padding: 42px 10px;
  }

  .page {
    margin-bottom: 38px;
  }

  .page-number {
    position: static;
    margin: 0 0 10px;
    font-size: 28px;
  }

  .page img,
  .catalog {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.42);
  }
}

/* ===== 第 8 页（Figma 画板 17:6，1920×1467）=====
   UI 真实坐标（按 Figma absoluteBoundingBox 换算为 %）：
   - 标题 title.png (400×101) : left 5.21%  top 6.82%  width 20.83%
   - 图1 img1.png (835×600)  : left 5.21%  top 16.43% width 43.49% height 40.90%   （左栏上）
   - 图2 img2.png (835×476)  : left 5.21%  top 60.74% width 43.49% height 32.45%   （左栏下）
   - 图3 img3.png (835×1125) : left 51.30% top 16.50% width 43.49% height 76.69%   （右栏整列）
   画板背景 Figma 17:6 = #EAEDF3（顶部叠 #E5F0F1→透明渐变），与第 7 页一致用渐变 */
.page-eight {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1467;
  margin: 0 auto clamp(46px, 7vw, 96px);
  background: linear-gradient(180deg, #E5F0F1 0%, #EAEDF3 100%);
  overflow: hidden;
  container-type: inline-size;
}

/* 用 .page-eight 前缀提升优先级，覆盖基础的 .page > img { width: 100% } */
.page-eight > img.page-eight-banner {
  display: block;
  position: absolute;
  left: 5.21%;             /* 100/1920 = 5.21% */
  top: 6.82%;              /* 100/1467 = 6.82% */
  width: 20.83%;           /* 400/1920 = 20.83% */
  height: auto;            /* 按切图原比例计算高 */
  aspect-ratio: 400 / 101; /* 锁定切图 400×101 比例 */
  object-fit: fill;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  transition: opacity 0.8s var(--ease-soft), transform 0.9s var(--ease-out);
}

.js .page.page-eight > img.page-eight-banner {
  opacity: 0;
  transform: translateY(22px);
}

.js .page.page-eight.is-visible > img.page-eight-banner {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 80ms;
}

.page-eight > figure.p8-module > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 三个模块容器：每张图独立 hover 容器，鼠标移入整图 scale(1.05) */
.p8-module {
  position: absolute;
  width: 43.49%;           /* 835/1920 */
  margin: 0;
  padding: 0;
  overflow: visible;
  cursor: pointer;
  z-index: 1;
  background: transparent;
  box-shadow: none;
  outline: none;
  transition:
    opacity 0.8s var(--ease-soft),
    transform 0.9s var(--ease-out),
    filter 0.55s ease;
}

.js .page-eight-banner,
.js .p8-module {
  opacity: 0;
  transform: translateY(22px);
}

.js .page-eight.is-visible .page-eight-banner,
.js .page-eight.is-visible .p8-module {
  opacity: 1;
  transform: translateY(0);
}

.p8-module:hover,
.p8-module:focus-visible {
  z-index: 3;
  filter: brightness(1.04) drop-shadow(0 24px 36px rgba(34, 49, 58, 0.18));
}

.js .page-eight.is-visible .p8-module:hover,
.js .page-eight.is-visible .p8-module:focus-visible {
  transform: translateY(0);
}

.page-eight > figure.p8-module:hover > img,
.page-eight > figure.p8-module:focus-visible > img {
  transform: scale(1.05);  /* 鼠标移上去整体放大 5% */
}

.page-eight > figure.p8-module:focus-visible {
  outline: 2px solid rgba(27, 43, 53, 0.65);
  outline-offset: 6px;
}

/* 三模块按 Figma absoluteBoundingBox 精确百分比定位 */
.p8-module-1 {            /* 图 1：左栏上 */
  left: 5.21%;            /* 100/1920 */
  top: 16.43%;            /* 241/1467 */
  height: 40.90%;         /* 600/1467 */
  transition-delay: 140ms;
}
.p8-module-2 {            /* 图 2：左栏下 */
  left: 5.21%;
  top: 60.74%;            /* 891/1467 */
  height: 32.45%;         /* 476/1467 */
  transition-delay: 250ms;
}
.p8-module-3 {            /* 图 3：右栏整列 */
  left: 51.30%;           /* 985/1920 */
  top: 16.50%;            /* 242/1467 */
  height: 76.69%;         /* 1125/1467 */
  transition-delay: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .page,
  .js .page > img,
  .js .page-number,
  .js .page-one-title,
  .js .page-one-software,
  .js .page-two-card,
  .js .catalog-module,
  .js .group-card,
  .js .page-five-title,
  .js .page-five-copy,
  .js .screenshot-card,
  .js .page-six-title,
  .js .page-six-copy,
  .js .page-six-caption,
  .js .page-six-shot,
  .js .page-seven-goal-title,
  .js .goal-card,
  .js .page-seven-label,
  .js .page-seven-spec,
  .js .page-eight-banner,
  .js .p8-module,
  .js .page-nine-title,
  .js .page-nine-copy,
  .js .page-nine-shot {
    opacity: 1;
    transform: none;
  }

  .js .page-two-card {
    opacity: 0.6;
  }

  .goal-card .state-lit {
    opacity: 0;
  }
}

@media (max-width: 860px) {
  .page-one-software:hover img,
  .page-one-software:focus-visible img,
  .goal-card:hover,
  .goal-card:focus-visible,
  .page-seven-spec:hover,
  .page-seven-spec:focus-visible,
  .page-eight > figure.p8-module:hover > img,
  .page-eight > figure.p8-module:focus-visible > img {
    transform: none;      /* 移动端禁用 hover 缩放，避免误触 */
  }
}

/* ===== 第 9 页（基于切图 1920×1828 构图）=====
   - 标题 title.png 827×101 : left 5.21%  top 5.47%
   - 左文 copy.png 660×816  : left 5.21%  top 13.18%
   - PC pc.png 660×1072     : left 42.19% top 13.18%
   - 移动 mobile.png 300×1487: left 79.17% top 13.18% */
.page-nine {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1828;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: linear-gradient(180deg, #E5F0F1 0%, #EAEDF3 18%, #F4F6F7 100%);
  container-type: inline-size;
}

.page-nine > img.page-nine-title,
.page-nine > img.page-nine-copy,
.page-nine-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

.page-nine > img.page-nine-title {
  left: 5.21%;
  top: 5.47%;
  width: 43.07%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.8s var(--ease-soft), transform 0.9s var(--ease-out);
}

.page-nine > img.page-nine-copy {
  left: 5.21%;
  top: 13.18%;
  width: 34.38%;
  height: 44.64%;
  object-fit: fill;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.8s var(--ease-soft), transform 0.9s var(--ease-out);
}

.page-nine-shot {
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 1;
  transform-origin: center center;
  transition:
    opacity 0.8s var(--ease-soft),
    transform 0.9s var(--ease-out),
    filter 0.55s ease;
}

.page-nine-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-nine-pc {
  left: 42.19%;
  top: 13.18%;
  width: 34.38%;
  height: 58.64%;
}

.page-nine-mobile {
  left: 79.17%;
  top: 13.18%;
  width: 15.63%;
  height: 81.35%;
}

.js .page.page-nine > img.page-nine-title,
.js .page.page-nine > img.page-nine-copy,
.js .page-nine-shot {
  opacity: 0;
  transform: translateY(24px);
}

.js .page.page-nine.is-visible > img.page-nine-title,
.js .page.page-nine.is-visible > img.page-nine-copy,
.js .page-nine.is-visible .page-nine-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-nine.is-visible > img.page-nine-title { transition-delay: 80ms; }
.js .page.page-nine.is-visible > img.page-nine-copy { transition-delay: 170ms; }
.js .page-nine.is-visible .page-nine-pc { transition-delay: 260ms; }
.js .page-nine.is-visible .page-nine-mobile { transition-delay: 360ms; }

.page-nine-shot:hover,
.page-nine-shot:focus-visible {
  z-index: 3;
  filter: brightness(1.04) drop-shadow(0 28px 42px rgba(32, 47, 55, 0.2));
}

.js .page-nine.is-visible .page-nine-shot:hover,
.js .page-nine.is-visible .page-nine-shot:focus-visible {
  transform: translateY(0);
}

.page-nine-shot:hover img,
.page-nine-shot:focus-visible img {
  transform: scale(1.07);
}

.page-nine-shot:focus-visible {
  outline: 2px solid rgba(27, 43, 53, 0.65);
  outline-offset: 6px;
}

@media (max-width: 860px) {
  .page-nine-shot:hover img,
  .page-nine-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-nine > img.page-nine-title,
  .js .page.page-nine > img.page-nine-copy,
  .js .page-nine-shot {
    opacity: 1;
    transform: none;
  }
}

/* ===== 第 10 页（基于切图 1920×1314 构图）=====
   - 标题 title.png 827×101 : left 5.21%  top 7.61%
   - 左文 copy.png 660×511  : left 5.21%  top 18.34%
   - PC pc.png 660×870      : left 42.19% top 18.34%
   - App app.png 300×973    : left 79.17% top 18.34% */
.page-ten {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1314;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: linear-gradient(180deg, #E5F0F1 0%, #EAEDF3 20%, #F4F6F7 100%);
  container-type: inline-size;
}

.page-ten > img.page-ten-title,
.page-ten > img.page-ten-copy,
.page-ten-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

.page-ten > img.page-ten-title {
  left: 5.21%;
  top: 7.61%;
  width: 43.07%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.8s var(--ease-soft), transform 0.9s var(--ease-out);
}

.page-ten > img.page-ten-copy {
  left: 5.21%;
  top: 18.34%;
  width: 34.38%;
  height: 38.89%;
  object-fit: fill;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.8s var(--ease-soft), transform 0.9s var(--ease-out);
}

.page-ten-shot {
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 1;
  transform-origin: center center;
  transition:
    opacity 0.8s var(--ease-soft),
    transform 0.9s var(--ease-out),
    filter 0.55s ease;
}

.page-ten-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-ten-pc {
  left: 42.19%;
  top: 18.34%;
  width: 34.38%;
  height: 66.21%;
}

.page-ten-app {
  left: 79.17%;
  top: 18.34%;
  width: 15.63%;
  height: 74.05%;
}

.js .page.page-ten > img.page-ten-title,
.js .page.page-ten > img.page-ten-copy,
.js .page-ten-shot {
  opacity: 0;
  transform: translateY(24px);
}

.js .page.page-ten.is-visible > img.page-ten-title,
.js .page.page-ten.is-visible > img.page-ten-copy,
.js .page-ten.is-visible .page-ten-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-ten.is-visible > img.page-ten-title { transition-delay: 80ms; }
.js .page.page-ten.is-visible > img.page-ten-copy { transition-delay: 170ms; }
.js .page-ten.is-visible .page-ten-pc { transition-delay: 260ms; }
.js .page-ten.is-visible .page-ten-app { transition-delay: 360ms; }

.page-ten-shot:hover,
.page-ten-shot:focus-visible {
  z-index: 3;
  filter: brightness(1.04) drop-shadow(0 28px 42px rgba(32, 47, 55, 0.2));
}

.js .page-ten.is-visible .page-ten-shot:hover,
.js .page-ten.is-visible .page-ten-shot:focus-visible {
  transform: translateY(0);
}

.page-ten-shot:hover img,
.page-ten-shot:focus-visible img {
  transform: scale(1.07);
}

.page-ten-shot:focus-visible {
  outline: 2px solid rgba(27, 43, 53, 0.65);
  outline-offset: 6px;
}

@media (max-width: 860px) {
  .page-ten-shot:hover img,
  .page-ten-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-ten > img.page-ten-title,
  .js .page.page-ten > img.page-ten-copy,
  .js .page-ten-shot {
    opacity: 1;
    transform: none;
  }
}

/* ===== 第 11 页（基于切图 1920×2098 构图）=====
   - 标题 title.png 827×101      : left 5.21%  top 5.72%
   - 左文 copy.png 660×691       : left 5.21%  top 14.30%
   - 报告 report*.png 212×509    : left column bottom detail modules
   - PC pc.png 660×1387          : left 42.19% top 14.30%
   - 移动 mobile.png 300×1723    : left 79.17% top 8.58% */
.page-eleven {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 2098;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: linear-gradient(180deg, #E5F0F1 0%, #EAEDF3 18%, #F4F6F7 100%);
  container-type: inline-size;
}

.page-eleven > img.page-eleven-title,
.page-eleven > img.page-eleven-copy,
.page-eleven-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

.page-eleven > img.page-eleven-title {
  left: 5.21%;
  top: 5.72%;
  width: 43.07%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.8s var(--ease-soft), transform 0.9s var(--ease-out);
}

.page-eleven > img.page-eleven-copy {
  left: 5.21%;
  top: 14.30%;
  width: 34.38%;
  height: 32.94%;
  object-fit: fill;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.8s var(--ease-soft), transform 0.9s var(--ease-out);
}

.page-eleven-shot {
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 1;
  transform-origin: center center;
  transition:
    opacity 0.8s var(--ease-soft),
    transform 0.9s var(--ease-out),
    filter 0.55s ease;
}

.page-eleven-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-eleven-pc {
  left: 42.19%;
  top: 14.30%;
  width: 34.38%;
  height: 66.11%;
}

.page-eleven-mobile {
  left: 79.17%;
  top: 14.30%;
  width: 15.63%;
  height: 82.13%;
}

.page-eleven-reports {
  position: absolute;
  left: 5.21%;
  top: 52.43%;
  width: 34.38%;
  height: 24.26%;
  z-index: 2;
}

.report-card {
  top: 0;
  width: 32.12%;
  height: 100%;
}

.report-card-1 { left: 0; }
.report-card-2 { left: 33.94%; }
.report-card-3 { left: 67.88%; }

.js .page.page-eleven > img.page-eleven-title,
.js .page.page-eleven > img.page-eleven-copy,
.js .page-eleven-shot {
  opacity: 0;
  transform: translateY(24px);
}

.js .page.page-eleven.is-visible > img.page-eleven-title,
.js .page.page-eleven.is-visible > img.page-eleven-copy,
.js .page-eleven.is-visible .page-eleven-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-eleven.is-visible > img.page-eleven-title { transition-delay: 80ms; }
.js .page.page-eleven.is-visible > img.page-eleven-copy { transition-delay: 170ms; }
.js .page-eleven.is-visible .page-eleven-pc { transition-delay: 260ms; }
.js .page-eleven.is-visible .page-eleven-mobile { transition-delay: 360ms; }
.js .page-eleven.is-visible .report-card-1 { transition-delay: 460ms; }
.js .page-eleven.is-visible .report-card-2 { transition-delay: 540ms; }
.js .page-eleven.is-visible .report-card-3 { transition-delay: 620ms; }

.page-eleven-shot:hover,
.page-eleven-shot:focus-visible {
  z-index: 4;
  filter: brightness(1.04) drop-shadow(0 28px 42px rgba(32, 47, 55, 0.2));
}

.js .page-eleven.is-visible .page-eleven-shot:hover,
.js .page-eleven.is-visible .page-eleven-shot:focus-visible {
  transform: translateY(0);
}

.page-eleven-shot:hover img,
.page-eleven-shot:focus-visible img {
  transform: scale(1.07);
}

.page-eleven-shot:focus-visible {
  outline: 2px solid rgba(27, 43, 53, 0.65);
  outline-offset: 6px;
}

@media (max-width: 860px) {
  .page-eleven-shot:hover img,
  .page-eleven-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-eleven > img.page-eleven-title,
  .js .page.page-eleven > img.page-eleven-copy,
  .js .page-eleven-shot {
    opacity: 1;
    transform: none;
  }
}

.page-twelve {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1300;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #f3f5f7;
  container-type: inline-size;
}

.page-twelve-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.9s var(--ease-soft), transform 1s var(--ease-out);
}

.js .page.page-twelve .page-twelve-bg {
  opacity: 0;
  transform: translateY(24px);
}

.js .page.page-twelve.is-visible .page-twelve-bg {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-twelve .page-twelve-bg {
    opacity: 1;
    transform: none;
  }
}

.page-fourteen {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1080;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #050506;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
  container-type: inline-size;
}

.page-fourteen-bg,
.page-fourteen-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

.page-fourteen-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  transition: transform 1.2s var(--ease-out), filter 0.8s ease;
}

.page-fourteen-shot {
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 3;
  transform-origin: center center;
  transition:
    opacity 0.85s var(--ease-soft),
    transform 0.95s var(--ease-out),
    filter 0.55s ease;
}

.page-fourteen-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 4.2%;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-fourteen-shot-1 {
  left: 30px;
  top: 51.11%;
  width: 46.0938%;
  height: 45.3704%;
  z-index: 3;
}

.page-fourteen-shot-2 {
  left: auto;
  right: 30px;
  top: 12.21%;
  width: 46.0938%;
  height: 84.2593%;
  z-index: 2;
}

.page-fourteen:hover .page-fourteen-bg {
  transform: scale(1.01);
  filter: saturate(1.06) contrast(1.04);
}

.js .page-fourteen-shot {
  opacity: 0;
  transform: translateY(26px);
}

.js .page-fourteen.is-visible .page-fourteen-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page-fourteen.is-visible .page-fourteen-shot-1 { transition-delay: 230ms; }
.js .page-fourteen.is-visible .page-fourteen-shot-2 { transition-delay: 340ms; }

.page-fourteen-shot:hover,
.page-fourteen-shot:focus-visible {
  z-index: 5;
  filter: brightness(1.08) drop-shadow(0 30px 48px rgba(125, 80, 255, 0.25));
}

.js .page-fourteen.is-visible .page-fourteen-shot:hover,
.js .page-fourteen.is-visible .page-fourteen-shot:focus-visible {
  transform: translateY(0);
}

.page-fourteen-shot:hover img,
.page-fourteen-shot:focus-visible img {
  transform: scale(1.05);
}

.page-fourteen-shot:focus-visible {
  outline: 2px solid rgba(204, 178, 255, 0.72);
  outline-offset: 8px;
}

@media (max-width: 860px) {
  .page-fourteen-shot img {
    border-radius: 10px;
  }

  .page-fourteen-shot:hover img,
  .page-fourteen-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-fourteen-bg,
  .js .page-fourteen-shot {
    opacity: 1;
    transform: none;
  }
}

.page-fifteen {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1144;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #050506;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
  container-type: inline-size;
}

.page-fifteen > img.page-fifteen-bg,
.page-fifteen > img.page-fifteen-title,
.page-fifteen > img.page-fifteen-copy {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
}

.page-fifteen > img.page-fifteen-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transition: transform 1.2s var(--ease-out), filter 0.8s ease;
}

.page-fifteen > img.page-fifteen-title {
  left: 5.21%;
  top: 13.64%;
  width: 41.6667%;
  height: auto;
  z-index: 2;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-fifteen > img.page-fifteen-copy {
  left: 5.21%;
  width: 67.7083%;
  height: auto;
  z-index: 2;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-fifteen-copy-1 { top: 39.51%; }
.page-fifteen-copy-2 { top: 57.17%; }
.page-fifteen-copy-3 { top: 74.83%; }

.js .page.page-fifteen .page-fifteen-title,
.js .page.page-fifteen .page-fifteen-copy {
  opacity: 0;
  transform: translateY(26px);
}

.js .page.page-fifteen.is-visible .page-fifteen-title,
.js .page.page-fifteen.is-visible .page-fifteen-copy {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-fifteen.is-visible .page-fifteen-title { transition-delay: 90ms; }
.js .page.page-fifteen.is-visible .page-fifteen-copy-1 { transition-delay: 210ms; }
.js .page.page-fifteen.is-visible .page-fifteen-copy-2 { transition-delay: 320ms; }
.js .page.page-fifteen.is-visible .page-fifteen-copy-3 { transition-delay: 430ms; }

@media (prefers-reduced-motion: reduce) {
  .page-fifteen-bg,
  .js .page.page-fifteen .page-fifteen-title,
  .js .page.page-fifteen .page-fifteen-copy {
    opacity: 1;
    transform: none;
  }
}

.page-sixteen {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 2284;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #050506;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
  container-type: inline-size;
}

.page-sixteen > img.page-sixteen-bg,
.page-sixteen > img.page-sixteen-title,
.page-sixteen > img.page-sixteen-panel {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
}

.page-sixteen > img.page-sixteen-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.page-sixteen > img.page-sixteen-title {
  left: 5.21%;
  top: 6.83%;
  width: 16.6667%;
  height: auto;
  z-index: 2;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-sixteen > img.page-sixteen-panel {
  left: 5.21%;
  height: auto;
  z-index: 2;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-sixteen > img.page-sixteen-competitors {
  top: 16.20%;
  width: 67.7083%;
}

.page-sixteen > img.page-sixteen-age-sex {
  top: 38.09%;
  width: 67.7083%;
}

.page-sixteen > img.page-sixteen-macro-micro {
  top: 63.35%;
  width: 89.5833%;
}

.js .page.page-sixteen .page-sixteen-title,
.js .page.page-sixteen .page-sixteen-panel {
  opacity: 0;
  transform: translateY(26px);
}

.js .page.page-sixteen.is-visible .page-sixteen-title,
.js .page.page-sixteen.is-visible .page-sixteen-panel {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-sixteen.is-visible .page-sixteen-title { transition-delay: 90ms; }
.js .page.page-sixteen.is-visible .page-sixteen-competitors { transition-delay: 210ms; }
.js .page.page-sixteen.is-visible .page-sixteen-age-sex { transition-delay: 330ms; }
.js .page.page-sixteen.is-visible .page-sixteen-macro-micro { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  .js .page.page-sixteen .page-sixteen-title,
  .js .page.page-sixteen .page-sixteen-panel {
    opacity: 1;
    transform: none;
  }
}

.page-seventeen {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1080;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #050506;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
  container-type: inline-size;
}

.page-seventeen > img.page-seventeen-bg,
.page-seventeen > img.page-seventeen-title,
.page-seventeen > img.page-seventeen-content {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
}

.page-seventeen > img.page-seventeen-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.page-seventeen > img.page-seventeen-title {
  left: 5.21%;
  top: 15.19%;
  width: 20.3125%;
  height: auto;
  z-index: 2;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-seventeen > img.page-seventeen-content {
  left: 50%;
  top: 50%;
  width: 87.5521%;
  height: auto;
  z-index: 2;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
  transform: translate(-50%, calc(-50% + 30px));
}

.js .page.page-seventeen .page-seventeen-title {
  opacity: 0;
  transform: translateY(26px);
}

.js .page.page-seventeen .page-seventeen-content {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 56px));
}

.js .page.page-seventeen.is-visible .page-seventeen-title {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-seventeen.is-visible .page-seventeen-content {
  opacity: 1;
  transform: translate(-50%, calc(-50% + 30px));
}

.js .page.page-seventeen.is-visible .page-seventeen-title { transition-delay: 90ms; }
.js .page.page-seventeen.is-visible .page-seventeen-content { transition-delay: 230ms; }

@media (prefers-reduced-motion: reduce) {
  .js .page.page-seventeen .page-seventeen-title {
    opacity: 1;
    transform: none;
  }

  .js .page.page-seventeen .page-seventeen-content {
    opacity: 1;
    transform: translate(-50%, calc(-50% + 30px));
  }
}

.page-eighteen {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 2018;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #050506;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
  container-type: inline-size;
}

.page-eighteen > img.page-eighteen-bg,
.page-eighteen > img.page-eighteen-title,
.page-eighteen > img.page-eighteen-rings,
.page-eighteen > img.page-eighteen-words,
.page-eighteen-card {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-eighteen > img.page-eighteen-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-eighteen > img.page-eighteen-title {
  left: 5.21%;
  top: 7.73%;
  width: 6.4063%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-eighteen > img.page-eighteen-rings {
  left: 50%;
  top: 15.36%;
  width: 83.3333%;
  height: auto;
  z-index: 1;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.95s var(--ease-soft), transform 1.05s var(--ease-out);
}

.page-eighteen > img.page-eighteen-words {
  left: 8.3333%;
  top: 15.6591%;
  width: 81.7188%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transform: none;
  transition: opacity 0.9s var(--ease-soft), transform 1s var(--ease-out);
}

.page-eighteen-card {
  width: 14.5833%;
  height: 21.2091%;
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 5;
  transform-origin: center center;
  transition:
    opacity 0.85s var(--ease-soft),
    transform 0.95s var(--ease-out),
    filter 0.55s ease;
}

.page-eighteen-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-eighteen-card-1 {
  left: 12.4479%;
  top: 28.8900%;
}

.page-eighteen-card-2 {
  left: 73.8021%;
  top: 21.3578%;
}

.page-eighteen-card-3 {
  left: 42.7604%;
  top: 73.8355%;
}

.js .page.page-eighteen .page-eighteen-title,
.js .page.page-eighteen .page-eighteen-rings,
.js .page.page-eighteen .page-eighteen-words,
.js .page-eighteen-card {
  opacity: 0;
}

.js .page.page-eighteen .page-eighteen-title,
.js .page-eighteen-card {
  transform: translateY(26px);
}

.js .page.page-eighteen .page-eighteen-rings {
  transform: translate(-50%, 26px);
}

.js .page.page-eighteen .page-eighteen-words {
  transform: translateY(26px);
}

.js .page.page-eighteen.is-visible .page-eighteen-title,
.js .page-eighteen.is-visible .page-eighteen-card {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-eighteen.is-visible .page-eighteen-rings {
  opacity: 1;
  transform: translate(-50%, 0);
}

.js .page.page-eighteen.is-visible .page-eighteen-words {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-eighteen.is-visible .page-eighteen-title { transition-delay: 90ms; }
.js .page.page-eighteen.is-visible .page-eighteen-rings { transition-delay: 180ms; }
.js .page.page-eighteen.is-visible .page-eighteen-words { transition-delay: 280ms; }
.js .page-eighteen.is-visible .page-eighteen-card-1 { transition-delay: 380ms; }
.js .page-eighteen.is-visible .page-eighteen-card-2 { transition-delay: 470ms; }
.js .page-eighteen.is-visible .page-eighteen-card-3 { transition-delay: 560ms; }

.page-eighteen-card:hover,
.page-eighteen-card:focus-visible {
  z-index: 6;
  filter: brightness(1.08) drop-shadow(0 30px 48px rgba(180, 150, 255, 0.24));
}

.js .page-eighteen.is-visible .page-eighteen-card:hover,
.js .page-eighteen.is-visible .page-eighteen-card:focus-visible {
  transform: translateY(0);
}

.page-eighteen-card:hover img,
.page-eighteen-card:focus-visible img {
  transform: scale(1.1);
}

.page-eighteen-card:focus-visible {
  outline: 2px solid rgba(204, 178, 255, 0.72);
  outline-offset: 8px;
}

@media (max-width: 860px) {
  .page-eighteen-card:hover img,
  .page-eighteen-card:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-eighteen .page-eighteen-title,
  .js .page.page-eighteen .page-eighteen-rings,
  .js .page.page-eighteen .page-eighteen-words,
  .js .page-eighteen-card {
    opacity: 1;
    transform: none;
  }

  .js .page.page-eighteen .page-eighteen-rings {
    transform: translateX(-50%);
  }

  .js .page.page-eighteen .page-eighteen-words {
    transform: none;
  }
}

.page-nineteen {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 4392;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #07080a;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
  container-type: inline-size;
}

.page-nineteen > img {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-nineteen:hover > img {
  box-shadow: none;
  filter: none;
}

.page-nineteen > img.page-nineteen-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-nineteen > img.page-nineteen-title {
  left: 5.2083%;
  top: 2.2769%;
  width: 19.7396%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-nineteen > img.page-nineteen-colors {
  left: 5.2083%;
  top: 8.3333%;
  width: 67.7083%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-soft), transform 1s var(--ease-out);
}

.page-nineteen > img.page-nineteen-fonts {
  left: 5.2083%;
  top: 35.8151%;
  width: 83.3333%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-soft), transform 1s var(--ease-out);
}

.page-nineteen > img.page-nineteen-components {
  left: 5.2083%;
  top: 62.5000%;
  width: 87.5%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-soft), transform 1s var(--ease-out);
}

.js .page.page-nineteen .page-nineteen-title,
.js .page.page-nineteen .page-nineteen-colors,
.js .page.page-nineteen .page-nineteen-fonts,
.js .page.page-nineteen .page-nineteen-components {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-nineteen.is-visible .page-nineteen-title,
.js .page.page-nineteen.is-visible .page-nineteen-colors,
.js .page.page-nineteen.is-visible .page-nineteen-fonts,
.js .page.page-nineteen.is-visible .page-nineteen-components {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-nineteen.is-visible .page-nineteen-title { transition-delay: 90ms; }
.js .page.page-nineteen.is-visible .page-nineteen-colors { transition-delay: 190ms; }
.js .page.page-nineteen.is-visible .page-nineteen-fonts { transition-delay: 290ms; }
.js .page.page-nineteen.is-visible .page-nineteen-components { transition-delay: 390ms; }

@media (prefers-reduced-motion: reduce) {
  .js .page.page-nineteen .page-nineteen-title,
  .js .page.page-nineteen .page-nineteen-colors,
  .js .page.page-nineteen .page-nineteen-fonts,
  .js .page.page-nineteen .page-nineteen-components {
    opacity: 1;
    transform: none;
  }
}

.page-twenty {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 2617;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #07080a;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
  container-type: inline-size;
}

.page-twenty > img,
.page-twenty-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-twenty:hover > img {
  box-shadow: none;
  filter: none;
}

.page-twenty > img.page-twenty-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-twenty > img.page-twenty-title {
  left: 5.2083%;
  top: 3.8212%;
  width: 19.7396%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty > img.page-twenty-intro {
  left: 5.2083%;
  top: 11.4635%;
  width: 67.7083%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty > img.page-twenty-label,
.page-twenty > img.page-twenty-arrow,
.page-twenty > img.page-twenty-group {
  height: auto;
  z-index: 4;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty > img.page-twenty-label {
  cursor: pointer;
  pointer-events: auto;
  transform-origin: center center;
}

.page-twenty > img.page-twenty-arrow,
.page-twenty > img.page-twenty-group {
  pointer-events: none;
}

.page-twenty > img.page-twenty-label-1 {
  left: 10.5208%;
  top: 56.8590%;
  width: 6.0417%;
}

.page-twenty > img.page-twenty-label-2 {
  left: 32.3958%;
  top: 56.8590%;
  width: 6.0417%;
}

.page-twenty > img.page-twenty-label-3 {
  left: 52.0833%;
  top: 56.8590%;
  width: 10.4167%;
}

.page-twenty > img.page-twenty-label-4 {
  left: 76.8229%;
  top: 56.8590%;
  width: 4.7396%;
}

.page-twenty-shot {
  width: 16.6667%;
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 6;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-twenty-shot-1 {
  left: 5.2083%;
  top: 21.0164%;
}

.page-twenty-shot-2 {
  left: 27.0833%;
  top: 21.0164%;
}

.page-twenty-shot-3 {
  left: 48.9583%;
  top: 29.5759%;
}

.page-twenty-shot-4 {
  left: 70.8333%;
  top: 29.5759%;
}

.page-twenty > img.page-twenty-arrow-1 {
  left: 22.8125%;
  top: 36.7979%;
  width: 3.3333%;
}

.page-twenty > img.page-twenty-arrow-2 {
  left: 44.6875%;
  top: 36.7979%;
  width: 3.3333%;
}

.page-twenty > img.page-twenty-arrow-3 {
  left: 66.5625%;
  top: 36.7979%;
  width: 3.3333%;
}

.page-twenty > img.page-twenty-group {
  left: 6.0938%;
  top: 61.9029%;
  width: 87.8125%;
}

.page-twenty-shot:hover,
.page-twenty-shot:focus-visible {
  z-index: 7;
}

.page-twenty-shot:hover img,
.page-twenty-shot:focus-visible img {
  transform: scale(1.07);
}

.page-twenty > img.page-twenty-label:hover,
.page-twenty > img.page-twenty-label:focus-visible {
  transform: scale(1.07);
}

.js .page.page-twenty .page-twenty-title,
.js .page.page-twenty .page-twenty-intro,
.js .page.page-twenty .page-twenty-label,
.js .page.page-twenty .page-twenty-arrow,
.js .page.page-twenty .page-twenty-group,
.js .page-twenty-shot {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-twenty.is-visible .page-twenty-title,
.js .page.page-twenty.is-visible .page-twenty-intro,
.js .page.page-twenty.is-visible .page-twenty-label,
.js .page.page-twenty.is-visible .page-twenty-arrow,
.js .page.page-twenty.is-visible .page-twenty-group,
.js .page-twenty.is-visible .page-twenty-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-twenty.is-visible .page-twenty-title { transition-delay: 90ms; }
.js .page.page-twenty.is-visible .page-twenty-intro { transition-delay: 170ms; }
.js .page.page-twenty.is-visible .page-twenty-label-1,
.js .page-twenty.is-visible .page-twenty-shot-1 { transition-delay: 250ms; }
.js .page.page-twenty.is-visible .page-twenty-arrow-1 { transition-delay: 310ms; }
.js .page.page-twenty.is-visible .page-twenty-label-2,
.js .page-twenty.is-visible .page-twenty-shot-2 { transition-delay: 360ms; }
.js .page.page-twenty.is-visible .page-twenty-arrow-2 { transition-delay: 420ms; }
.js .page.page-twenty.is-visible .page-twenty-label-3,
.js .page-twenty.is-visible .page-twenty-shot-3 { transition-delay: 470ms; }
.js .page.page-twenty.is-visible .page-twenty-arrow-3 { transition-delay: 530ms; }
.js .page.page-twenty.is-visible .page-twenty-label-4,
.js .page-twenty.is-visible .page-twenty-shot-4 { transition-delay: 580ms; }
.js .page.page-twenty.is-visible .page-twenty-group { transition-delay: 680ms; }

.js .page.page-twenty.is-visible > img.page-twenty-label:hover,
.js .page.page-twenty.is-visible > img.page-twenty-label:focus-visible {
  transform: scale(1.07);
}

@media (max-width: 860px) {
  .page-twenty-shot:hover img,
  .page-twenty-shot:focus-visible img,
  .js .page.page-twenty.is-visible > img.page-twenty-label:hover,
  .js .page.page-twenty.is-visible > img.page-twenty-label:focus-visible {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-twenty .page-twenty-title,
  .js .page.page-twenty .page-twenty-intro,
  .js .page.page-twenty .page-twenty-label,
  .js .page.page-twenty .page-twenty-arrow,
  .js .page.page-twenty .page-twenty-group,
  .js .page-twenty-shot {
    opacity: 1;
    transform: none;
  }
}

.page-twenty-two {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1488;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #07080a;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
  container-type: inline-size;
}

.page-twenty-two > img,
.page-twenty-two-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-twenty-two:hover > img {
  box-shadow: none;
  filter: none;
}

.page-twenty-two > img.page-twenty-two-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-twenty-two > img.page-twenty-two-title {
  left: 5.2083%;
  top: 6.7204%;
  width: 16.6667%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-two > img.page-twenty-two-intro {
  left: 5.2083%;
  top: 18.6828%;
  width: 67.7083%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-two > img.page-twenty-two-label,
.page-twenty-two > img.page-twenty-two-arrow {
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-two-shot {
  width: 16.6667%;
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 6;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-two-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-twenty-two-shot-1 {
  left: 5.2083%;
  top: 38.9785%;
}

.page-twenty-two-shot-2 {
  left: 27.0833%;
  top: 38.9785%;
}

.page-twenty-two-shot-3 {
  left: 48.9583%;
  top: 38.9785%;
}

.page-twenty-two-shot-4 {
  left: 70.8333%;
  top: 38.9785%;
}

.page-twenty-two > img.page-twenty-two-arrow-1 {
  left: 22.8125%;
  top: 59.1398%;
  width: 3.3333%;
}

.page-twenty-two > img.page-twenty-two-arrow-2 {
  left: 44.6875%;
  top: 59.1398%;
  width: 3.3333%;
}

.page-twenty-two > img.page-twenty-two-arrow-3 {
  left: 66.5625%;
  top: 59.1398%;
  width: 3.3333%;
}

.page-twenty-two > img.page-twenty-two-label-1 {
  left: 9.7135%;
  top: 87.2312%;
  width: 7.6563%;
}

.page-twenty-two > img.page-twenty-two-label-2 {
  left: 30.9375%;
  top: 87.2312%;
  width: 8.9583%;
}

.page-twenty-two > img.page-twenty-two-label-3 {
  left: 52.8125%;
  top: 87.2312%;
  width: 8.9583%;
}

.page-twenty-two > img.page-twenty-two-label-4 {
  left: 74.6875%;
  top: 87.2312%;
  width: 8.9583%;
}

.page-twenty-two-shot:hover,
.page-twenty-two-shot:focus-visible {
  z-index: 7;
}

.page-twenty-two-shot:hover img,
.page-twenty-two-shot:focus-visible img {
  transform: scale(1.07);
}

.js .page.page-twenty-two .page-twenty-two-title,
.js .page.page-twenty-two .page-twenty-two-intro,
.js .page.page-twenty-two .page-twenty-two-label,
.js .page.page-twenty-two .page-twenty-two-arrow,
.js .page-twenty-two-shot {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-twenty-two.is-visible .page-twenty-two-title,
.js .page.page-twenty-two.is-visible .page-twenty-two-intro,
.js .page.page-twenty-two.is-visible .page-twenty-two-label,
.js .page.page-twenty-two.is-visible .page-twenty-two-arrow,
.js .page-twenty-two.is-visible .page-twenty-two-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-twenty-two.is-visible .page-twenty-two-title { transition-delay: 90ms; }
.js .page.page-twenty-two.is-visible .page-twenty-two-intro { transition-delay: 170ms; }
.js .page.page-twenty-two.is-visible .page-twenty-two-label-1,
.js .page-twenty-two.is-visible .page-twenty-two-shot-1 { transition-delay: 250ms; }
.js .page.page-twenty-two.is-visible .page-twenty-two-arrow-1 { transition-delay: 310ms; }
.js .page.page-twenty-two.is-visible .page-twenty-two-label-2,
.js .page-twenty-two.is-visible .page-twenty-two-shot-2 { transition-delay: 360ms; }
.js .page.page-twenty-two.is-visible .page-twenty-two-arrow-2 { transition-delay: 420ms; }
.js .page.page-twenty-two.is-visible .page-twenty-two-label-3,
.js .page-twenty-two.is-visible .page-twenty-two-shot-3 { transition-delay: 470ms; }
.js .page.page-twenty-two.is-visible .page-twenty-two-arrow-3 { transition-delay: 530ms; }
.js .page.page-twenty-two.is-visible .page-twenty-two-label-4,
.js .page-twenty-two.is-visible .page-twenty-two-shot-4 { transition-delay: 580ms; }

@media (max-width: 860px) {
  .page-twenty-two-shot:hover img,
  .page-twenty-two-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-twenty-two .page-twenty-two-title,
  .js .page.page-twenty-two .page-twenty-two-intro,
  .js .page.page-twenty-two .page-twenty-two-label,
  .js .page.page-twenty-two .page-twenty-two-arrow,
  .js .page-twenty-two-shot {
    opacity: 1;
    transform: none;
  }
}

.page-twenty-three {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1794;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #07080a;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
  container-type: inline-size;
}

.page-twenty-three > img,
.page-twenty-three-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-twenty-three:hover > img {
  box-shadow: none;
  filter: none;
}

.page-twenty-three > img.page-twenty-three-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-twenty-three > img.page-twenty-three-title {
  left: 5.2083%;
  top: 5.5741%;
  width: 16.6667%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-three > img.page-twenty-three-intro {
  left: 5.2083%;
  top: 15.4961%;
  width: 67.7083%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-three > img.page-twenty-three-label,
.page-twenty-three > img.page-twenty-three-arrow {
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-three-shot {
  width: 16.6667%;
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 6;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-three-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-twenty-three-shot-1 {
  left: 5.2083%;
  top: 30.6578%;
}

.page-twenty-three-shot-2 {
  left: 27.0833%;
  top: 30.6578%;
}

.page-twenty-three-shot-3 {
  left: 48.9583%;
  top: 30.6578%;
}

.page-twenty-three-shot-4 {
  left: 70.8333%;
  top: 30.6578%;
}

.page-twenty-three > img.page-twenty-three-arrow-1 {
  left: 22.8125%;
  top: 50.1672%;
  width: 3.3333%;
}

.page-twenty-three > img.page-twenty-three-arrow-2 {
  left: 44.6875%;
  top: 50.1672%;
  width: 3.3333%;
}

.page-twenty-three > img.page-twenty-three-arrow-3 {
  left: 66.5625%;
  top: 50.1672%;
  width: 3.3333%;
}

.page-twenty-three > img.page-twenty-three-label-1 {
  left: 8.3333%;
  top: 91.9732%;
  width: 10.4167%;
}

.page-twenty-three > img.page-twenty-three-label-2 {
  left: 29.4792%;
  top: 91.9732%;
  width: 11.875%;
}

.page-twenty-three > img.page-twenty-three-label-3 {
  left: 51.3542%;
  top: 91.9732%;
  width: 11.875%;
}

.page-twenty-three > img.page-twenty-three-label-4 {
  left: 73.2292%;
  top: 91.9732%;
  width: 11.875%;
}

.page-twenty-three-shot:hover,
.page-twenty-three-shot:focus-visible {
  z-index: 7;
}

.page-twenty-three-shot:hover img,
.page-twenty-three-shot:focus-visible img {
  transform: scale(1.07);
}

.js .page.page-twenty-three .page-twenty-three-title,
.js .page.page-twenty-three .page-twenty-three-intro,
.js .page.page-twenty-three .page-twenty-three-label,
.js .page.page-twenty-three .page-twenty-three-arrow,
.js .page-twenty-three-shot {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-twenty-three.is-visible .page-twenty-three-title,
.js .page.page-twenty-three.is-visible .page-twenty-three-intro,
.js .page.page-twenty-three.is-visible .page-twenty-three-label,
.js .page.page-twenty-three.is-visible .page-twenty-three-arrow,
.js .page-twenty-three.is-visible .page-twenty-three-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-twenty-three.is-visible .page-twenty-three-title { transition-delay: 90ms; }
.js .page.page-twenty-three.is-visible .page-twenty-three-intro { transition-delay: 170ms; }
.js .page.page-twenty-three.is-visible .page-twenty-three-label-1,
.js .page-twenty-three.is-visible .page-twenty-three-shot-1 { transition-delay: 250ms; }
.js .page.page-twenty-three.is-visible .page-twenty-three-arrow-1 { transition-delay: 310ms; }
.js .page.page-twenty-three.is-visible .page-twenty-three-label-2,
.js .page-twenty-three.is-visible .page-twenty-three-shot-2 { transition-delay: 360ms; }
.js .page.page-twenty-three.is-visible .page-twenty-three-arrow-2 { transition-delay: 420ms; }
.js .page.page-twenty-three.is-visible .page-twenty-three-label-3,
.js .page-twenty-three.is-visible .page-twenty-three-shot-3 { transition-delay: 470ms; }
.js .page.page-twenty-three.is-visible .page-twenty-three-arrow-3 { transition-delay: 530ms; }
.js .page.page-twenty-three.is-visible .page-twenty-three-label-4,
.js .page-twenty-three.is-visible .page-twenty-three-shot-4 { transition-delay: 580ms; }

@media (max-width: 860px) {
  .page-twenty-three-shot:hover img,
  .page-twenty-three-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-twenty-three .page-twenty-three-title,
  .js .page.page-twenty-three .page-twenty-three-intro,
  .js .page.page-twenty-three .page-twenty-three-label,
  .js .page.page-twenty-three .page-twenty-three-arrow,
  .js .page-twenty-three-shot {
    opacity: 1;
    transform: none;
  }
}

.page-twenty-four {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1702;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #07080a;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
  container-type: inline-size;
}

.page-twenty-four > img,
.page-twenty-four-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-twenty-four:hover > img {
  box-shadow: none;
  filter: none;
}

.page-twenty-four > img.page-twenty-four-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-twenty-four > img.page-twenty-four-title {
  left: 5.2083%;
  top: 5.8754%;
  width: 12.5%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-four > img.page-twenty-four-intro {
  left: 5.2083%;
  top: 16.3337%;
  width: 67.7083%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-four > img.page-twenty-four-label {
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-four-shot {
  width: 16.6667%;
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 6;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-four-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-twenty-four-shot-1 {
  left: 16.1458%;
  top: 32.9025%;
}

.page-twenty-four-shot-2 {
  left: 41.6667%;
  top: 32.9025%;
}

.page-twenty-four-shot-3 {
  left: 67.1875%;
  top: 32.9025%;
}

.page-twenty-four > img.page-twenty-four-label-1 {
  left: 20%;
  top: 76.3807%;
  width: 8.9583%;
}

.page-twenty-four > img.page-twenty-four-label-2 {
  left: 45.5208%;
  top: 76.3807%;
  width: 8.9583%;
}

.page-twenty-four > img.page-twenty-four-label-3 {
  left: 71.0417%;
  top: 76.3807%;
  width: 8.9583%;
}

.page-twenty-four-shot:hover,
.page-twenty-four-shot:focus-visible {
  z-index: 7;
}

.page-twenty-four-shot:hover img,
.page-twenty-four-shot:focus-visible img {
  transform: scale(1.07);
}

.js .page.page-twenty-four .page-twenty-four-title,
.js .page.page-twenty-four .page-twenty-four-intro,
.js .page.page-twenty-four .page-twenty-four-label,
.js .page-twenty-four-shot {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-twenty-four.is-visible .page-twenty-four-title,
.js .page.page-twenty-four.is-visible .page-twenty-four-intro,
.js .page.page-twenty-four.is-visible .page-twenty-four-label,
.js .page-twenty-four.is-visible .page-twenty-four-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-twenty-four.is-visible .page-twenty-four-title { transition-delay: 90ms; }
.js .page.page-twenty-four.is-visible .page-twenty-four-intro { transition-delay: 170ms; }
.js .page.page-twenty-four.is-visible .page-twenty-four-label-1,
.js .page-twenty-four.is-visible .page-twenty-four-shot-1 { transition-delay: 250ms; }
.js .page.page-twenty-four.is-visible .page-twenty-four-label-2,
.js .page-twenty-four.is-visible .page-twenty-four-shot-2 { transition-delay: 360ms; }
.js .page.page-twenty-four.is-visible .page-twenty-four-label-3,
.js .page-twenty-four.is-visible .page-twenty-four-shot-3 { transition-delay: 470ms; }

@media (max-width: 860px) {
  .page-twenty-four-shot:hover img,
  .page-twenty-four-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-twenty-four .page-twenty-four-title,
  .js .page.page-twenty-four .page-twenty-four-intro,
  .js .page.page-twenty-four .page-twenty-four-label,
  .js .page-twenty-four-shot {
    opacity: 1;
    transform: none;
  }
}

.page-twenty-five {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1420;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #07080a;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
}

.page-twenty-five-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-twenty-five:hover .page-twenty-five-bg {
  box-shadow: none;
  filter: none;
}

.js .page.page-twenty-five .page-twenty-five-bg {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease-soft), transform 1s var(--ease-out);
}

.js .page.page-twenty-five.is-visible .page-twenty-five-bg {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-twenty-five .page-twenty-five-bg {
    opacity: 1;
    transform: none;
  }
}

.page-twenty-seven {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1080;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #07080a;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.45);
}

.page-twenty-seven-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-twenty-seven:hover .page-twenty-seven-bg {
  box-shadow: none;
  filter: none;
}

.js .page.page-twenty-seven .page-twenty-seven-bg {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease-soft), transform 1s var(--ease-out);
}

.js .page.page-twenty-seven.is-visible .page-twenty-seven-bg {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-twenty-seven .page-twenty-seven-bg {
    opacity: 1;
    transform: none;
  }
}

.page-twenty-eight {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1571;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #f3f5f7;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
}

.page-twenty-eight > img {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-twenty-eight:hover > img {
  box-shadow: none;
  filter: none;
}

.page-twenty-eight > img.page-twenty-eight-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-twenty-eight > img.page-twenty-eight-title {
  left: 3.6458%;
  top: 5.0923%;
  width: 48.9583%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-eight > img.page-twenty-eight-intro {
  left: 5.2083%;
  top: 19.0961%;
  width: 78.125%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-eight > img.page-twenty-eight-decor {
  left: 81.875%;
  top: 40.2292%;
  width: 7.2917%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  transform-origin: 36% 12%;
  transition: opacity 0.3s var(--ease-soft) 0.5s, transform 0.3s var(--ease-out) 0.5s;
}

.page-twenty-eight > img.page-twenty-eight-content {
  left: 0;
  top: 46.4672%;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-soft), transform 1s var(--ease-out);
}

.js .page.page-twenty-eight .page-twenty-eight-title,
.js .page.page-twenty-eight .page-twenty-eight-intro,
.js .page.page-twenty-eight .page-twenty-eight-content {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-twenty-eight .page-twenty-eight-decor {
  opacity: 0;
  transform: translateY(16px) rotate(-15deg);
}

.js .page.page-twenty-eight.is-visible .page-twenty-eight-title,
.js .page.page-twenty-eight.is-visible .page-twenty-eight-intro,
.js .page.page-twenty-eight.is-visible .page-twenty-eight-content {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-twenty-eight.is-visible .page-twenty-eight-decor {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

.js .page.page-twenty-eight.is-visible .page-twenty-eight-title { transition-delay: 90ms; }
.js .page.page-twenty-eight.is-visible .page-twenty-eight-intro { transition-delay: 190ms; }
.js .page.page-twenty-eight.is-visible .page-twenty-eight-content { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .js .page.page-twenty-eight .page-twenty-eight-title,
  .js .page.page-twenty-eight .page-twenty-eight-intro,
  .js .page.page-twenty-eight .page-twenty-eight-decor,
  .js .page.page-twenty-eight .page-twenty-eight-content {
    opacity: 1;
    transform: none;
  }
}

.page-twenty-nine {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 2922;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #f3f5f7;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
}

.page-twenty-nine > img {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-twenty-nine:hover > img {
  box-shadow: none;
  filter: none;
}

.page-twenty-nine > img.page-twenty-nine-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-twenty-nine > img.page-twenty-nine-title {
  left: 3.6458%;
  top: 3.0801%;
  width: 61.9792%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-nine > img.page-twenty-nine-strategy-copy {
  left: 5.2083%;
  top: 10.9514%;
  width: 78.125%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-nine > img.page-twenty-nine-strategy {
  left: 9.2188%;
  top: 19.8494%;
  width: 81.5625%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-soft), transform 1s var(--ease-out);
}

.page-twenty-nine > img.page-twenty-nine-keyword-copy {
  left: 5.2083%;
  top: 51.3347%;
  width: 78.125%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-twenty-nine > img.page-twenty-nine-keywords {
  left: 7.2135%;
  top: 59.206%;
  width: 85.5729%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-soft), transform 1s var(--ease-out);
}

.js .page.page-twenty-nine .page-twenty-nine-title,
.js .page.page-twenty-nine .page-twenty-nine-strategy-copy,
.js .page.page-twenty-nine .page-twenty-nine-strategy,
.js .page.page-twenty-nine .page-twenty-nine-keyword-copy,
.js .page.page-twenty-nine .page-twenty-nine-keywords {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-twenty-nine.is-visible .page-twenty-nine-title,
.js .page.page-twenty-nine.is-visible .page-twenty-nine-strategy-copy,
.js .page.page-twenty-nine.is-visible .page-twenty-nine-strategy,
.js .page.page-twenty-nine.is-visible .page-twenty-nine-keyword-copy,
.js .page.page-twenty-nine.is-visible .page-twenty-nine-keywords {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-twenty-nine.is-visible .page-twenty-nine-title { transition-delay: 90ms; }
.js .page.page-twenty-nine.is-visible .page-twenty-nine-strategy-copy { transition-delay: 190ms; }
.js .page.page-twenty-nine.is-visible .page-twenty-nine-strategy { transition-delay: 300ms; }
.js .page.page-twenty-nine.is-visible .page-twenty-nine-keyword-copy { transition-delay: 430ms; }
.js .page.page-twenty-nine.is-visible .page-twenty-nine-keywords { transition-delay: 540ms; }

@media (prefers-reduced-motion: reduce) {
  .js .page.page-twenty-nine .page-twenty-nine-title,
  .js .page.page-twenty-nine .page-twenty-nine-strategy-copy,
  .js .page.page-twenty-nine .page-twenty-nine-strategy,
  .js .page.page-twenty-nine .page-twenty-nine-keyword-copy,
  .js .page.page-twenty-nine .page-twenty-nine-keywords {
    opacity: 1;
    transform: none;
  }
}

.page-thirty {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 2627;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #f3f5f7;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
}

.page-thirty > img,
.page-thirty-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-thirty:hover > img {
  box-shadow: none;
  filter: none;
}

.page-thirty > img.page-thirty-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-thirty > img.page-thirty-title {
  left: 3.6458%;
  top: 3.426%;
  width: 61.7188%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty > img.page-thirty-special-copy {
  left: 5.2083%;
  top: 61.2866%;
  width: 78.125%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty > img.page-thirty-bg-swatch {
  left: 75.3125%;
  top: 79.2539%;
  width: 8.3333%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty > img.page-thirty-check,
.page-thirty > img.page-thirty-cross {
  width: 2.5%;
  height: auto;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty > img.page-thirty-check {
  left: 54.6875%;
  top: 90.5596%;
}

.page-thirty > img.page-thirty-cross {
  left: 19.1667%;
  top: 90.5596%;
}

.page-thirty-shot {
  width: 30.3646%;
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 6;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-thirty-shot-1 {
  left: 5.7292%;
  top: 78.721%;
}

.page-thirty-shot-2 {
  left: 41.3021%;
  top: 78.721%;
}

.page-thirty > img.page-thirty-color-system {
  left: 5.7292%;
  top: 12.1812%;
  width: 85.4167%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-soft), transform 1s var(--ease-out);
}

.page-thirty-shot:hover,
.page-thirty-shot:focus-visible {
  z-index: 7;
}

.page-thirty-shot:hover img,
.page-thirty-shot:focus-visible img {
  transform: scale(1.1);
}

.js .page.page-thirty .page-thirty-title,
.js .page.page-thirty .page-thirty-special-copy,
.js .page.page-thirty .page-thirty-bg-swatch,
.js .page.page-thirty .page-thirty-check,
.js .page.page-thirty .page-thirty-cross,
.js .page-thirty-shot,
.js .page.page-thirty .page-thirty-color-system {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-thirty.is-visible .page-thirty-title,
.js .page.page-thirty.is-visible .page-thirty-special-copy,
.js .page.page-thirty.is-visible .page-thirty-bg-swatch,
.js .page.page-thirty.is-visible .page-thirty-check,
.js .page.page-thirty.is-visible .page-thirty-cross,
.js .page-thirty.is-visible .page-thirty-shot,
.js .page.page-thirty.is-visible .page-thirty-color-system {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-thirty.is-visible .page-thirty-title { transition-delay: 90ms; }
.js .page.page-thirty.is-visible .page-thirty-special-copy { transition-delay: 190ms; }
.js .page.page-thirty.is-visible .page-thirty-bg-swatch { transition-delay: 290ms; }
.js .page.page-thirty.is-visible .page-thirty-check,
.js .page-thirty.is-visible .page-thirty-shot-1 { transition-delay: 360ms; }
.js .page.page-thirty.is-visible .page-thirty-cross,
.js .page-thirty.is-visible .page-thirty-shot-2 { transition-delay: 460ms; }
.js .page.page-thirty.is-visible .page-thirty-color-system { transition-delay: 560ms; }

@media (max-width: 860px) {
  .page-thirty-shot:hover img,
  .page-thirty-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-thirty .page-thirty-title,
  .js .page.page-thirty .page-thirty-special-copy,
  .js .page.page-thirty .page-thirty-bg-swatch,
  .js .page.page-thirty .page-thirty-check,
  .js .page.page-thirty .page-thirty-cross,
  .js .page-thirty-shot,
  .js .page.page-thirty .page-thirty-color-system {
    opacity: 1;
    transform: none;
  }
}

.page-thirty-one {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 2167;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #f3f5f7;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
}

.page-thirty-one > img,
.page-thirty-one-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-thirty-one:hover > img {
  box-shadow: none;
  filter: none;
}

.page-thirty-one > img.page-thirty-one-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-thirty-one > img.page-thirty-one-title {
  left: 3.6458%;
  top: 4.1532%;
  width: 57.3438%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-one > img.page-thirty-one-brand-copy {
  left: 5.2083%;
  top: 14.767%;
  width: 78.125%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-one > img.page-thirty-one-spec-copy {
  left: 5.2083%;
  top: 55.8376%;
  width: 78.125%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-one-shot {
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 5;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-one-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-thirty-one-shot-1 {
  left: 7.2917%;
  top: 29.6724%;
  width: 20.8333%;
}

.page-thirty-one-shot-2 {
  left: 38.125%;
  top: 35.0715%;
  width: 11.8229%;
}

.page-thirty-one-shot-4 {
  left: 59.375%;
  top: 29.6724%;
  width: 20.8333%;
}

.page-thirty-one-shot-3 {
  left: 7.2917%;
  top: 72.3129%;
  width: 20.8333%;
}

.page-thirty-one-shot-5 {
  left: 33.3333%;
  top: 72.3129%;
  width: 20.8854%;
}

.page-thirty-one-shot:hover,
.page-thirty-one-shot:focus-visible {
  z-index: 7;
}

.page-thirty-one-shot:hover img,
.page-thirty-one-shot:focus-visible img {
  transform: scale(1.1);
}

.js .page.page-thirty-one .page-thirty-one-title,
.js .page.page-thirty-one .page-thirty-one-brand-copy,
.js .page.page-thirty-one .page-thirty-one-spec-copy,
.js .page-thirty-one-shot {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-thirty-one.is-visible .page-thirty-one-title,
.js .page.page-thirty-one.is-visible .page-thirty-one-brand-copy,
.js .page.page-thirty-one.is-visible .page-thirty-one-spec-copy,
.js .page-thirty-one.is-visible .page-thirty-one-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-thirty-one.is-visible .page-thirty-one-title { transition-delay: 90ms; }
.js .page.page-thirty-one.is-visible .page-thirty-one-brand-copy { transition-delay: 170ms; }
.js .page-thirty-one.is-visible .page-thirty-one-shot-1 { transition-delay: 260ms; }
.js .page-thirty-one.is-visible .page-thirty-one-shot-2 { transition-delay: 340ms; }
.js .page-thirty-one.is-visible .page-thirty-one-shot-4 { transition-delay: 420ms; }
.js .page.page-thirty-one.is-visible .page-thirty-one-spec-copy { transition-delay: 520ms; }
.js .page-thirty-one.is-visible .page-thirty-one-shot-3 { transition-delay: 620ms; }
.js .page-thirty-one.is-visible .page-thirty-one-shot-5 { transition-delay: 700ms; }

@media (max-width: 860px) {
  .page-thirty-one-shot:hover img,
  .page-thirty-one-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-thirty-one .page-thirty-one-title,
  .js .page.page-thirty-one .page-thirty-one-brand-copy,
  .js .page.page-thirty-one .page-thirty-one-spec-copy,
  .js .page-thirty-one-shot {
    opacity: 1;
    transform: none;
  }
}

.page-thirty-two {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1463;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #f3f5f7;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
}

.page-thirty-two > img,
.page-thirty-two-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-thirty-two:hover > img {
  box-shadow: none;
  filter: none;
}

.page-thirty-two > img.page-thirty-two-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-thirty-two > img.page-thirty-two-title {
  left: 3.6458%;
  top: 6.1517%;
  width: 59.5833%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-two > img.page-thirty-two-intro {
  left: 5.2083%;
  top: 21.8729%;
  width: 78.125%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-two > img.page-thirty-two-label {
  width: 6.4583%;
  height: auto;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-two > img.page-thirty-two-old {
  left: 18.0209%;
  top: 36.9105%;
}

.page-thirty-two > img.page-thirty-two-new {
  left: 66.901%;
  top: 36.9105%;
}

.page-thirty-two > img.page-thirty-two-decor {
  height: auto;
  z-index: 4;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: opacity 0.5s var(--ease-soft) 0.5s, transform 0.5s var(--ease-out) 0.5s;
}

.page-thirty-two > img.page-thirty-two-decor-1 {
  left: 4.5833%;
  top: 41.8319%;
  width: 32.7604%;
}

.page-thirty-two > img.page-thirty-two-decor-2 {
  left: 43.0729%;
  top: 61.1074%;
  width: 6.3021%;
}

.page-thirty-two-shot {
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 6;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-two-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-thirty-two-shot-3 {
  left: 7.8125%;
  top: 45.1128%;
  width: 26.875%;
}

.page-thirty-two-shot-4 {
  left: 53.9063%;
  top: 52.6316%;
  width: 32.4479%;
}

.page-thirty-two-shot:hover,
.page-thirty-two-shot:focus-visible {
  z-index: 7;
}

.page-thirty-two-shot:hover img,
.page-thirty-two-shot:focus-visible img {
  transform: scale(1.05);
}

.js .page.page-thirty-two .page-thirty-two-title,
.js .page.page-thirty-two .page-thirty-two-intro,
.js .page.page-thirty-two .page-thirty-two-label,
.js .page-thirty-two-shot {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-thirty-two .page-thirty-two-decor {
  opacity: 0;
  transform: translateY(16px) rotate(-30deg);
}

.js .page.page-thirty-two.is-visible .page-thirty-two-title,
.js .page.page-thirty-two.is-visible .page-thirty-two-intro,
.js .page.page-thirty-two.is-visible .page-thirty-two-label,
.js .page-thirty-two.is-visible .page-thirty-two-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-thirty-two.is-visible .page-thirty-two-decor {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

.js .page.page-thirty-two.is-visible .page-thirty-two-title { transition-delay: 90ms; }
.js .page.page-thirty-two.is-visible .page-thirty-two-intro { transition-delay: 180ms; }
.js .page.page-thirty-two.is-visible .page-thirty-two-old { transition-delay: 280ms; }
.js .page-thirty-two.is-visible .page-thirty-two-shot-3 { transition-delay: 360ms; }
.js .page.page-thirty-two.is-visible .page-thirty-two-new { transition-delay: 440ms; }
.js .page-thirty-two.is-visible .page-thirty-two-shot-4 { transition-delay: 520ms; }

@media (max-width: 860px) {
  .page-thirty-two-shot:hover img,
  .page-thirty-two-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-thirty-two .page-thirty-two-title,
  .js .page.page-thirty-two .page-thirty-two-intro,
  .js .page.page-thirty-two .page-thirty-two-label,
  .js .page.page-thirty-two .page-thirty-two-decor,
  .js .page-thirty-two-shot {
    opacity: 1;
    transform: none;
  }
}

.page-thirty-three {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 4111;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #f3f5f7;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
}

.page-thirty-three > img,
.page-thirty-three-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-thirty-three:hover > img {
  box-shadow: none;
  filter: none;
}

.page-thirty-three > img.page-thirty-three-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-thirty-three > img.page-thirty-three-title {
  left: 3.6458%;
  top: 2.1892%;
  width: 73.9063%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-three > img.page-thirty-three-intro {
  left: 5.2083%;
  top: 7.784%;
  width: 78.125%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-three > img.page-thirty-three-copy {
  left: 67.7083%;
  width: 27.0833%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-three-copy-1 { top: 23.1331%; }
.page-thirty-three-copy-2 { top: 39.9173%; }
.page-thirty-three-copy-3 { top: 57.8691%; }
.page-thirty-three-copy-4 { top: 74.6534%; }
.page-thirty-three-copy-5 { top: 91.4376%; }

.page-thirty-three-shot {
  left: 5.2083%;
  width: 52.0833%;
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 5;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-three-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-thirty-three-shot-1 { top: 15.0815%; }
.page-thirty-three-shot-2 { top: 31.8657%; }
.page-thirty-three-shot-3 { top: 48.65%; }
.page-thirty-three-shot-4 { top: 65.4342%; }
.page-thirty-three-shot-5 { top: 82.2184%; }

.page-thirty-three > img.page-thirty-three-decor {
  left: 60.9376%;
  width: 12.2396%;
  height: auto;
  z-index: 6;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: opacity 0.8s var(--ease-soft) 1s, transform 0.8s var(--ease-out) 1s;
}

.page-thirty-three-decor-1 { top: 17.2708%; }
.page-thirty-three-decor-2 { top: 34.055%; }
.page-thirty-three-decor-3 { top: 50.8393%; }
.page-thirty-three-decor-4 { top: 67.6235%; }
.page-thirty-three-decor-5 { top: 84.4077%; }

.page-thirty-three-shot:hover,
.page-thirty-three-shot:focus-visible {
  z-index: 7;
}

.page-thirty-three-shot:hover img,
.page-thirty-three-shot:focus-visible img {
  transform: scale(1.05);
}

.js .page.page-thirty-three .page-thirty-three-title,
.js .page.page-thirty-three .page-thirty-three-intro,
.js .page.page-thirty-three .page-thirty-three-copy,
.js .page-thirty-three-shot {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-thirty-three .page-thirty-three-decor {
  opacity: 0;
  transform: translateY(16px) rotate(-30deg);
}

.js .page.page-thirty-three.is-visible .page-thirty-three-title,
.js .page.page-thirty-three.is-visible .page-thirty-three-intro,
.js .page.page-thirty-three.is-visible .page-thirty-three-copy,
.js .page-thirty-three.is-visible .page-thirty-three-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-thirty-three.is-visible .page-thirty-three-decor {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

.js .page.page-thirty-three.is-visible .page-thirty-three-title { transition-delay: 90ms; }
.js .page.page-thirty-three.is-visible .page-thirty-three-intro { transition-delay: 180ms; }
.js .page.page-thirty-three.is-visible .page-thirty-three-copy-1,
.js .page-thirty-three.is-visible .page-thirty-three-shot-1 { transition-delay: 280ms; }
.js .page.page-thirty-three.is-visible .page-thirty-three-copy-2,
.js .page-thirty-three.is-visible .page-thirty-three-shot-2 { transition-delay: 380ms; }
.js .page.page-thirty-three.is-visible .page-thirty-three-copy-3,
.js .page-thirty-three.is-visible .page-thirty-three-shot-3 { transition-delay: 480ms; }
.js .page.page-thirty-three.is-visible .page-thirty-three-copy-4,
.js .page-thirty-three.is-visible .page-thirty-three-shot-4 { transition-delay: 580ms; }
.js .page.page-thirty-three.is-visible .page-thirty-three-copy-5,
.js .page-thirty-three.is-visible .page-thirty-three-shot-5 { transition-delay: 680ms; }

@media (max-width: 860px) {
  .page-thirty-three-shot:hover img,
  .page-thirty-three-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-thirty-three .page-thirty-three-title,
  .js .page.page-thirty-three .page-thirty-three-intro,
  .js .page.page-thirty-three .page-thirty-three-copy,
  .js .page.page-thirty-three .page-thirty-three-decor,
  .js .page-thirty-three-shot {
    opacity: 1;
    transform: none;
  }
}

.page-thirty-four {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 2709;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #f4f6f8;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
}

.page-thirty-four-stage {
  position: absolute;
  inset: 0;
  width: 200%;
  height: 200%;
  transform-origin: top left;
  transform: scale(0.5);
}

.page-thirty-four-stage > img,
.page-thirty-four-stage > .page-thirty-four-rect {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-thirty-four:hover .page-thirty-four-stage > img {
  box-shadow: none;
  filter: none;
}

.page-thirty-four-stage > img.page-thirty-four-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-thirty-four-title {
  position: absolute;
  left: 4.6875%;
  top: 6.017%;
  width: 1496px;
  height: auto;
  display: block;
  margin: 0;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-four-title img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.page-thirty-four-stage > img.page-thirty-four-module {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-four-module-1 {
  left: 7.2917%;
  top: 15.024%;
  width: 1800px;
  height: auto;
  z-index: 3;
}

.page-thirty-four-module-2 {
  left: 7.2917%;
  top: 29.9372%;
  width: 1007px;
  height: auto;
  z-index: 3;
}

.page-thirty-four-module-3 {
  left: 7.2917%;
  top: 60.0591%;
  width: 1008px;
  height: auto;
  z-index: 3;
}

.page-thirty-four-rect {
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 5;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-four-rect img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: rotate(0deg);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-thirty-four-rect-3 {
  left: 58.6979%;
  top: 17.4186%;
  width: 2600px;
}

.page-thirty-four-rect-3 img {
  width: 100%;
  height: auto;
}

.page-thirty-four-rect-2 {
  left: 77.0313%;
  top: 44.1491%;
  width: 3400px;
}

.page-thirty-four-rect-2 img {
  width: 100%;
  height: auto;
}

.page-thirty-four-rect:hover img,
.page-thirty-four-rect:focus-visible img {
  transform: rotate(-15deg);
}

.js .page.page-thirty-four .page-thirty-four-title,
.js .page.page-thirty-four .page-thirty-four-module,
.js .page-thirty-four-rect {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-thirty-four.is-visible .page-thirty-four-title,
.js .page.page-thirty-four.is-visible .page-thirty-four-module,
.js .page-thirty-four.is-visible .page-thirty-four-rect {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-thirty-four.is-visible .page-thirty-four-title { transition-delay: 90ms; }
.js .page.page-thirty-four.is-visible .page-thirty-four-module-1 { transition-delay: 180ms; }
.js .page.page-thirty-four.is-visible .page-thirty-four-module-2 { transition-delay: 260ms; }
.js .page.page-thirty-four.is-visible .page-thirty-four-module-3 { transition-delay: 340ms; }
.js .page.page-thirty-four.is-visible .page-thirty-four-rect-3 { transition-delay: 420ms; }
.js .page.page-thirty-four.is-visible .page-thirty-four-rect-2 { transition-delay: 520ms; }

@media (max-width: 860px) {
  .page-thirty-four-rect:hover img,
  .page-thirty-four-rect:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-thirty-four .page-thirty-four-title,
  .js .page.page-thirty-four .page-thirty-four-module,
  .js .page-thirty-four-rect {
    opacity: 1;
    transform: none;
  }

  .page-thirty-four-rect img {
    transition: none;
  }
}

.page-thirty-five {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1797;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #f3f5f7;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
  --p35-scale: 0.8020833333;
}

.page-thirty-five > img,
.page-thirty-five-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-thirty-five:hover > img {
  box-shadow: none;
  filter: none;
}

.page-thirty-five > img.page-thirty-five-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-thirty-five > img.page-thirty-five-title {
  left: calc(90px * var(--p35-scale));
  top: calc(163px * var(--p35-scale));
  width: calc(952px * var(--p35-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-five > img.page-thirty-five-intro {
  left: calc(140px * var(--p35-scale));
  top: calc(407px * var(--p35-scale));
  width: calc(1500px * var(--p35-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-five > img.page-thirty-five-copy {
  left: calc(1330px * var(--p35-scale));
  top: calc(763px * var(--p35-scale));
  width: calc(450px * var(--p35-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-five > img.page-thirty-five-decor {
  left: calc(1322px * var(--p35-scale));
  top: calc(1256px * var(--p35-scale));
  width: calc(157px * var(--p35-scale));
  height: auto;
  z-index: 4;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: opacity 0.8s var(--ease-soft) 1s, transform 0.8s var(--ease-out) 1s;
}

.page-thirty-five > img.page-thirty-five-label {
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-five > img.page-thirty-five-label-1 {
  left: calc(204px * var(--p35-scale));
  top: calc(1509px * var(--p35-scale));
  width: calc(172px * var(--p35-scale));
}

.page-thirty-five > img.page-thirty-five-label-3 {
  left: calc(1032px * var(--p35-scale));
  top: calc(1509px * var(--p35-scale));
  width: calc(116px * var(--p35-scale));
}

.page-thirty-five > img.page-thirty-five-label-2 {
  left: calc(565px * var(--p35-scale));
  top: calc(1509px * var(--p35-scale));
  width: calc(248px * var(--p35-scale));
}

.page-thirty-five-shot {
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 5;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-five-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-thirty-five-shot-1 {
  left: calc(116px * var(--p35-scale));
  top: calc(643px * var(--p35-scale));
  width: calc(349px * var(--p35-scale));
}

.page-thirty-five-shot-3 {
  left: calc(517px * var(--p35-scale));
  top: calc(643px * var(--p35-scale));
  width: calc(320px * var(--p35-scale));
}

.page-thirty-five-shot-2 {
  left: calc(940px * var(--p35-scale));
  top: calc(643px * var(--p35-scale));
  width: calc(345px * var(--p35-scale));
}

.page-thirty-five-shot:hover,
.page-thirty-five-shot:focus-visible {
  z-index: 7;
}

.page-thirty-five-shot:hover img,
.page-thirty-five-shot:focus-visible img {
  transform: scale(1.05);
}

.js .page.page-thirty-five > img.page-thirty-five-title,
.js .page.page-thirty-five > img.page-thirty-five-intro,
.js .page.page-thirty-five > img.page-thirty-five-copy,
.js .page.page-thirty-five > img.page-thirty-five-label,
.js .page-thirty-five-shot {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-thirty-five > img.page-thirty-five-decor {
  opacity: 0;
  transform: translateY(16px) rotate(-30deg);
}

.js .page.page-thirty-five.is-visible > img.page-thirty-five-title,
.js .page.page-thirty-five.is-visible > img.page-thirty-five-intro,
.js .page.page-thirty-five.is-visible > img.page-thirty-five-copy,
.js .page.page-thirty-five.is-visible > img.page-thirty-five-label,
.js .page.page-thirty-five.is-visible .page-thirty-five-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-thirty-five.is-visible > img.page-thirty-five-decor {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

.js .page.page-thirty-five.is-visible > img.page-thirty-five-title { transition-delay: 90ms; }
.js .page.page-thirty-five.is-visible > img.page-thirty-five-intro { transition-delay: 180ms; }
.js .page.page-thirty-five.is-visible > img.page-thirty-five-copy { transition-delay: 270ms; }
.js .page.page-thirty-five.is-visible > img.page-thirty-five-label-1 { transition-delay: 360ms; }
.js .page.page-thirty-five.is-visible .page-thirty-five-shot-1 { transition-delay: 430ms; }
.js .page.page-thirty-five.is-visible > img.page-thirty-five-label-3 { transition-delay: 500ms; }
.js .page.page-thirty-five.is-visible .page-thirty-five-shot-3 { transition-delay: 570ms; }
.js .page.page-thirty-five.is-visible > img.page-thirty-five-label-2 { transition-delay: 640ms; }
.js .page.page-thirty-five.is-visible .page-thirty-five-shot-2 { transition-delay: 710ms; }

@media (max-width: 860px) {
  .page-thirty-five-shot:hover img,
  .page-thirty-five-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-thirty-five > img.page-thirty-five-title,
  .js .page.page-thirty-five > img.page-thirty-five-intro,
  .js .page.page-thirty-five > img.page-thirty-five-copy,
  .js .page.page-thirty-five > img.page-thirty-five-label,
  .js .page.page-thirty-five > img.page-thirty-five-decor,
  .js .page.page-thirty-five .page-thirty-five-shot {
    opacity: 1;
    transform: none;
  }

.page-thirty-five-shot img {
  transition: none;
  }
}

.page-thirty-six {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1797;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #f3f5f7;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
  --p36-scale: 0.8020833333;
}

.page-thirty-six-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  transform: none;
}

.page-thirty-six-stage > img,
.page-thirty-six-stage > .page-thirty-six-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-thirty-six:hover > img {
  box-shadow: none;
  filter: none;
}

.page-thirty-six-stage > img.page-thirty-six-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-thirty-six-stage > img.page-thirty-six-title {
  left: calc(90px * var(--p36-scale));
  top: calc(163px * var(--p36-scale));
  width: calc(952px * var(--p36-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-six-stage > img.page-thirty-six-module-1-1 {
  left: calc(140px * var(--p36-scale));
  top: calc(407px * var(--p36-scale));
  width: calc(1500px * var(--p36-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-six-stage > img.page-thirty-six-module-1 {
  left: calc(1330px * var(--p36-scale));
  top: calc(763px * var(--p36-scale));
  width: calc(450px * var(--p36-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-six-stage > img.page-thirty-six-decor {
  left: calc(1322px * var(--p36-scale));
  top: calc(956px * var(--p36-scale));
  width: calc(157px * var(--p36-scale));
  height: auto;
  z-index: 4;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: opacity 0.8s var(--ease-soft) 1s, transform 0.8s var(--ease-out) 1s;
}

.page-thirty-six-stage > img.page-thirty-six-label {
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-six-stage > img.page-thirty-six-label-1 {
  left: calc(204px * var(--p36-scale));
  top: calc(1353px * var(--p36-scale));
  width: calc(116px * var(--p36-scale));
}

.page-thirty-six-stage > img.page-thirty-six-label-2 {
  left: calc(619px * var(--p36-scale));
  top: calc(1353px * var(--p36-scale));
  width: calc(116px * var(--p36-scale));
}

.page-thirty-six-stage > img.page-thirty-six-label-3 {
  left: calc(1032px * var(--p36-scale));
  top: calc(1353px * var(--p36-scale));
  width: calc(172px * var(--p36-scale));
}

.page-thirty-six-shot {
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 5;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-six-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-thirty-six-shot-1 {
  left: calc(116px * var(--p36-scale));
  top: calc(643px * var(--p36-scale));
  width: calc(320px * var(--p36-scale));
}

.page-thirty-six-shot-2 {
  left: calc(517px * var(--p36-scale));
  top: calc(643px * var(--p36-scale));
  width: calc(320px * var(--p36-scale));
}

.page-thirty-six-shot-3 {
  left: calc(940px * var(--p36-scale));
  top: calc(643px * var(--p36-scale));
  width: calc(449px * var(--p36-scale));
}

.page-thirty-six-shot:hover,
.page-thirty-six-shot:focus-visible {
  z-index: 7;
}

.page-thirty-six-shot:hover img,
.page-thirty-six-shot:focus-visible img {
  transform: scale(1.05);
}

.js .page.page-thirty-six .page-thirty-six-stage > img.page-thirty-six-title,
.js .page.page-thirty-six .page-thirty-six-stage > img.page-thirty-six-module-1-1,
.js .page.page-thirty-six .page-thirty-six-stage > img.page-thirty-six-module-1,
.js .page.page-thirty-six .page-thirty-six-stage > img.page-thirty-six-label,
.js .page-thirty-six-shot {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-thirty-six .page-thirty-six-stage > img.page-thirty-six-decor {
  opacity: 0;
  transform: translateY(16px) rotate(-30deg);
}

.js .page.page-thirty-six.is-visible .page-thirty-six-stage > img.page-thirty-six-title,
.js .page.page-thirty-six.is-visible .page-thirty-six-stage > img.page-thirty-six-module-1-1,
.js .page.page-thirty-six.is-visible .page-thirty-six-stage > img.page-thirty-six-module-1,
.js .page.page-thirty-six.is-visible .page-thirty-six-stage > img.page-thirty-six-label,
.js .page.page-thirty-six.is-visible .page-thirty-six-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-thirty-six.is-visible .page-thirty-six-stage > img.page-thirty-six-decor {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

.js .page.page-thirty-six.is-visible .page-thirty-six-stage > img.page-thirty-six-title { transition-delay: 90ms; }
.js .page.page-thirty-six.is-visible .page-thirty-six-stage > img.page-thirty-six-module-1-1 { transition-delay: 180ms; }
.js .page.page-thirty-six.is-visible .page-thirty-six-stage > img.page-thirty-six-module-1 { transition-delay: 270ms; }
.js .page.page-thirty-six.is-visible .page-thirty-six-stage > img.page-thirty-six-label-1 { transition-delay: 360ms; }
.js .page.page-thirty-six.is-visible .page-thirty-six-shot-1 { transition-delay: 430ms; }
.js .page.page-thirty-six.is-visible .page-thirty-six-stage > img.page-thirty-six-label-2 { transition-delay: 500ms; }
.js .page.page-thirty-six.is-visible .page-thirty-six-shot-2 { transition-delay: 570ms; }
.js .page.page-thirty-six.is-visible .page-thirty-six-stage > img.page-thirty-six-label-3 { transition-delay: 640ms; }
.js .page.page-thirty-six.is-visible .page-thirty-six-shot-3 { transition-delay: 710ms; }

@media (max-width: 860px) {
  .page-thirty-six-shot:hover img,
  .page-thirty-six-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-thirty-six .page-thirty-six-stage > img.page-thirty-six-title,
  .js .page.page-thirty-six .page-thirty-six-stage > img.page-thirty-six-module-1-1,
  .js .page.page-thirty-six .page-thirty-six-stage > img.page-thirty-six-module-1,
  .js .page.page-thirty-six .page-thirty-six-stage > img.page-thirty-six-label,
  .js .page.page-thirty-six .page-thirty-six-stage > img.page-thirty-six-decor,
  .js .page.page-thirty-six .page-thirty-six-shot {
    opacity: 1;
    transform: none;
  }

  .page-thirty-six-shot img {
    transition: none;
  }
}

.page-thirty-seven {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1797;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #f3f5f7;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
  --p37-scale: 0.8020833333;
}

.page-thirty-seven-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  transform: none;
}

.page-thirty-seven-stage > img,
.page-thirty-seven-stage > .page-thirty-seven-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-thirty-seven:hover > img {
  box-shadow: none;
  filter: none;
}

.page-thirty-seven-stage > img.page-thirty-seven-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-thirty-seven-stage > img.page-thirty-seven-title {
  left: calc(90px * var(--p37-scale));
  top: calc(163px * var(--p37-scale));
  width: calc(952px * var(--p37-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-seven-stage > img.page-thirty-seven-module-1 {
  left: calc(140px * var(--p37-scale));
  top: calc(407px * var(--p37-scale));
  width: calc(1500px * var(--p37-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-seven-stage > img.page-thirty-seven-module-2 {
  left: calc(1330px * var(--p37-scale));
  top: calc(1063px * var(--p37-scale));
  width: calc(450px * var(--p37-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-seven-stage > img.page-thirty-seven-decor {
  height: auto;
  z-index: 6;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: opacity 0.8s var(--ease-soft) 1s, transform 0.8s var(--ease-out) 1s;
}

.page-thirty-seven-stage > img.page-thirty-seven-decor-1 {
  left: calc(160px * var(--p37-scale));
  top: calc(730px * var(--p37-scale));
  width: calc(172px * var(--p37-scale));
}

.page-thirty-seven-stage > img.page-thirty-seven-decor-2 {
  left: calc(573px * var(--p37-scale));
  top: calc(730px * var(--p37-scale));
  width: calc(122px * var(--p37-scale));
}

.page-thirty-seven-stage > img.page-thirty-seven-decor-3 {
  left: calc(1290px * var(--p37-scale));
  top: calc(907px * var(--p37-scale));
  width: calc(157px * var(--p37-scale));
}

.page-thirty-seven-stage > img.page-thirty-seven-label {
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-seven-stage > img.page-thirty-seven-label-1 {
  left: calc(204px * var(--p37-scale));
  top: calc(1353px * var(--p37-scale));
  width: calc(116px * var(--p37-scale));
}

.page-thirty-seven-stage > img.page-thirty-seven-label-2 {
  left: calc(619px * var(--p37-scale));
  top: calc(1353px * var(--p37-scale));
  width: calc(116px * var(--p37-scale));
}

.page-thirty-seven-stage > img.page-thirty-seven-label-3 {
  left: calc(1032px * var(--p37-scale));
  top: calc(1353px * var(--p37-scale));
  width: calc(172px * var(--p37-scale));
}

.page-thirty-seven-shot {
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 5;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-seven-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-thirty-seven-shot-1 {
  left: calc(116px * var(--p37-scale));
  top: calc(643px * var(--p37-scale));
  width: calc(320px * var(--p37-scale));
}

.page-thirty-seven-shot-2 {
  left: calc(517px * var(--p37-scale));
  top: calc(643px * var(--p37-scale));
  width: calc(320px * var(--p37-scale));
}

.page-thirty-seven-shot-3 {
  left: calc(940px * var(--p37-scale));
  top: calc(643px * var(--p37-scale));
  width: calc(320px * var(--p37-scale));
}

.page-thirty-seven-shot:hover,
.page-thirty-seven-shot:focus-visible {
  z-index: 7;
}

.page-thirty-seven-shot:hover img,
.page-thirty-seven-shot:focus-visible img {
  transform: scale(1.05);
}

.js .page.page-thirty-seven .page-thirty-seven-stage > img.page-thirty-seven-title,
.js .page.page-thirty-seven .page-thirty-seven-stage > img.page-thirty-seven-module-1,
.js .page.page-thirty-seven .page-thirty-seven-stage > img.page-thirty-seven-module-2,
.js .page.page-thirty-seven .page-thirty-seven-stage > img.page-thirty-seven-label,
.js .page-thirty-seven-shot {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-thirty-seven .page-thirty-seven-stage > img.page-thirty-seven-decor {
  opacity: 0;
  transform: translateY(16px) rotate(-30deg);
}

.js .page.page-thirty-seven.is-visible .page-thirty-seven-stage > img.page-thirty-seven-title,
.js .page.page-thirty-seven.is-visible .page-thirty-seven-stage > img.page-thirty-seven-module-1,
.js .page.page-thirty-seven.is-visible .page-thirty-seven-stage > img.page-thirty-seven-module-2,
.js .page.page-thirty-seven.is-visible .page-thirty-seven-stage > img.page-thirty-seven-label,
.js .page.page-thirty-seven.is-visible .page-thirty-seven-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-thirty-seven.is-visible .page-thirty-seven-stage > img.page-thirty-seven-decor {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

.js .page.page-thirty-seven.is-visible .page-thirty-seven-stage > img.page-thirty-seven-title { transition-delay: 90ms; }
.js .page.page-thirty-seven.is-visible .page-thirty-seven-stage > img.page-thirty-seven-module-1 { transition-delay: 180ms; }
.js .page.page-thirty-seven.is-visible .page-thirty-seven-stage > img.page-thirty-seven-module-2 { transition-delay: 260ms; }
.js .page.page-thirty-seven.is-visible .page-thirty-seven-stage > img.page-thirty-seven-label-1 { transition-delay: 360ms; }
.js .page.page-thirty-seven.is-visible .page-thirty-seven-shot-1 { transition-delay: 430ms; }
.js .page.page-thirty-seven.is-visible .page-thirty-seven-stage > img.page-thirty-seven-label-2 { transition-delay: 500ms; }
.js .page.page-thirty-seven.is-visible .page-thirty-seven-shot-2 { transition-delay: 570ms; }
.js .page.page-thirty-seven.is-visible .page-thirty-seven-stage > img.page-thirty-seven-label-3 { transition-delay: 640ms; }
.js .page.page-thirty-seven.is-visible .page-thirty-seven-shot-3 { transition-delay: 710ms; }

@media (max-width: 860px) {
  .page-thirty-seven-shot:hover img,
  .page-thirty-seven-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-thirty-seven .page-thirty-seven-stage > img.page-thirty-seven-title,
  .js .page.page-thirty-seven .page-thirty-seven-stage > img.page-thirty-seven-module-1,
  .js .page.page-thirty-seven .page-thirty-seven-stage > img.page-thirty-seven-module-2,
  .js .page.page-thirty-seven .page-thirty-seven-stage > img.page-thirty-seven-label,
  .js .page.page-thirty-seven .page-thirty-seven-stage > img.page-thirty-seven-decor,
  .js .page.page-thirty-seven .page-thirty-seven-shot {
    opacity: 1;
    transform: none;
  }

  .page-thirty-seven-shot img {
    transition: none;
  }
}

.page-thirty-eight {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 2115;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #0b0b0b;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
  --p38-scale: 0.8020833333;
}

.page-thirty-eight-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  transform: none;
}

.page-thirty-eight-stage > img,
.page-thirty-eight-stage > .page-thirty-eight-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-thirty-eight:hover > img {
  box-shadow: none;
  filter: none;
}

.page-thirty-eight-stage > img.page-thirty-eight-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-thirty-eight-stage > img.page-thirty-eight-title {
  left: calc(90px * var(--p38-scale));
  top: calc(163px * var(--p38-scale));
  width: calc(1112px * var(--p38-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-eight-stage > img.page-thirty-eight-module-1 {
  left: calc(140px * var(--p38-scale));
  top: calc(407px * var(--p38-scale));
  width: calc(1500px * var(--p38-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-eight-stage > img.page-thirty-eight-module-2 {
  left: calc(1340px * var(--p38-scale));
  top: calc(1608px * var(--p38-scale));
  width: calc(450px * var(--p38-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-eight-stage > img.page-thirty-eight-decor {
  left: calc(1187px * var(--p38-scale));
  top: calc(1487px * var(--p38-scale));
  width: calc(157px * var(--p38-scale));
  height: auto;
  z-index: 6;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: opacity 0.8s var(--ease-soft) 1s, transform 0.8s var(--ease-out) 1s;
}

.page-thirty-eight-stage > img.page-thirty-eight-label {
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-eight-stage > img.page-thirty-eight-label-1 {
  left: calc(204px * var(--p38-scale));
  top: calc(1353px * var(--p38-scale));
  width: calc(172px * var(--p38-scale));
}

.page-thirty-eight-stage > img.page-thirty-eight-label-2 {
  left: calc(565px * var(--p38-scale));
  top: calc(1799px * var(--p38-scale));
  width: calc(200px * var(--p38-scale));
  z-index: 7;
}

.page-thirty-eight-stage > img.page-thirty-eight-label-3 {
  left: calc(1032px * var(--p38-scale));
  top: calc(1353px * var(--p38-scale));
  width: calc(144px * var(--p38-scale));
}

.page-thirty-eight-stage > img.page-thirty-eight-label-4 {
  left: calc(1450px * var(--p38-scale));
  top: calc(1353px * var(--p38-scale));
  width: calc(157px * var(--p38-scale));
}

.page-thirty-eight-shot {
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 5;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-eight-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-thirty-eight-shot-1 {
  left: calc(116px * var(--p38-scale));
  top: calc(643px * var(--p38-scale));
  width: calc(320px * var(--p38-scale));
}

.page-thirty-eight-shot-2 {
  left: calc(517px * var(--p38-scale));
  top: calc(643px * var(--p38-scale));
  width: calc(320px * var(--p38-scale));
}

.page-thirty-eight-shot-3 {
  left: calc(940px * var(--p38-scale));
  top: calc(643px * var(--p38-scale));
  width: calc(320px * var(--p38-scale));
}

.page-thirty-eight-shot-4 {
  left: calc(1363px * var(--p38-scale));
  top: calc(643px * var(--p38-scale));
  width: calc(320px * var(--p38-scale));
}

.page-thirty-eight-shot:hover,
.page-thirty-eight-shot:focus-visible {
  z-index: 7;
}

.page-thirty-eight-shot:hover img,
.page-thirty-eight-shot:focus-visible img {
  transform: scale(1.05);
}

.js .page.page-thirty-eight .page-thirty-eight-stage > img.page-thirty-eight-title,
.js .page.page-thirty-eight .page-thirty-eight-stage > img.page-thirty-eight-module-1,
.js .page.page-thirty-eight .page-thirty-eight-stage > img.page-thirty-eight-module-2,
.js .page.page-thirty-eight .page-thirty-eight-stage > img.page-thirty-eight-label,
.js .page-thirty-eight-shot {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-thirty-eight .page-thirty-eight-stage > img.page-thirty-eight-decor {
  opacity: 0;
  transform: translateY(16px) rotate(-30deg);
}

.js .page.page-thirty-eight.is-visible .page-thirty-eight-stage > img.page-thirty-eight-title,
.js .page.page-thirty-eight.is-visible .page-thirty-eight-stage > img.page-thirty-eight-module-1,
.js .page.page-thirty-eight.is-visible .page-thirty-eight-stage > img.page-thirty-eight-module-2,
.js .page.page-thirty-eight.is-visible .page-thirty-eight-stage > img.page-thirty-eight-label,
.js .page.page-thirty-eight.is-visible .page-thirty-eight-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-thirty-eight.is-visible .page-thirty-eight-stage > img.page-thirty-eight-decor {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

.js .page.page-thirty-eight.is-visible .page-thirty-eight-stage > img.page-thirty-eight-title { transition-delay: 90ms; }
.js .page.page-thirty-eight.is-visible .page-thirty-eight-stage > img.page-thirty-eight-module-1 { transition-delay: 180ms; }
.js .page.page-thirty-eight.is-visible .page-thirty-eight-stage > img.page-thirty-eight-module-2 { transition-delay: 260ms; }
.js .page.page-thirty-eight.is-visible .page-thirty-eight-stage > img.page-thirty-eight-label-1 { transition-delay: 360ms; }
.js .page.page-thirty-eight.is-visible .page-thirty-eight-shot-1 { transition-delay: 430ms; }
.js .page.page-thirty-eight.is-visible .page-thirty-eight-stage > img.page-thirty-eight-label-2 { transition-delay: 500ms; }
.js .page.page-thirty-eight.is-visible .page-thirty-eight-shot-2 { transition-delay: 570ms; }
.js .page.page-thirty-eight.is-visible .page-thirty-eight-stage > img.page-thirty-eight-label-3 { transition-delay: 640ms; }
.js .page.page-thirty-eight.is-visible .page-thirty-eight-shot-3 { transition-delay: 710ms; }
.js .page.page-thirty-eight.is-visible .page-thirty-eight-stage > img.page-thirty-eight-label-4 { transition-delay: 780ms; }
.js .page.page-thirty-eight.is-visible .page-thirty-eight-shot-4 { transition-delay: 850ms; }

@media (max-width: 860px) {
  .page-thirty-eight-shot:hover img,
  .page-thirty-eight-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-thirty-eight .page-thirty-eight-stage > img.page-thirty-eight-title,
  .js .page.page-thirty-eight .page-thirty-eight-stage > img.page-thirty-eight-module-1,
  .js .page.page-thirty-eight .page-thirty-eight-stage > img.page-thirty-eight-module-2,
  .js .page.page-thirty-eight .page-thirty-eight-stage > img.page-thirty-eight-label,
  .js .page.page-thirty-eight .page-thirty-eight-stage > img.page-thirty-eight-decor,
  .js .page.page-thirty-eight .page-thirty-eight-shot {
    opacity: 1;
    transform: none;
  }

  .page-thirty-eight-shot img {
    transition: none;
  }
}

.page-thirty-nine {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1641;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #0b0b0b;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
  --p39-scale: 0.8020833333;
}

.page-thirty-nine-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  transform: none;
}

.page-thirty-nine-stage > img,
.page-thirty-nine-stage > .page-thirty-nine-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-thirty-nine:hover > img {
  box-shadow: none;
  filter: none;
}

.page-thirty-nine-stage > img.page-thirty-nine-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-thirty-nine-stage > img.page-thirty-nine-title {
  left: calc(90px * var(--p39-scale));
  top: calc(163px * var(--p39-scale));
  width: calc(1513px * var(--p39-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-nine-stage > img.page-thirty-nine-module-1 {
  left: calc(140px * var(--p39-scale));
  top: calc(407px * var(--p39-scale));
  width: calc(1500px * var(--p39-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-nine-stage > img.page-thirty-nine-module-2 {
  left: calc(1000px * var(--p39-scale));
  top: calc(1112px * var(--p39-scale));
  width: calc(450px * var(--p39-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-nine-stage > img.page-thirty-nine-decor {
  left: calc(959px * var(--p39-scale));
  top: calc(756px * var(--p39-scale));
  width: calc(157px * var(--p39-scale));
  height: auto;
  z-index: 6;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: opacity 0.8s var(--ease-soft) 1s, transform 0.8s var(--ease-out) 1s;
}

.page-thirty-nine-stage > img.page-thirty-nine-label {
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-nine-stage > img.page-thirty-nine-label-1 {
  left: calc(204px * var(--p39-scale));
  top: calc(1353px * var(--p39-scale));
  width: calc(144px * var(--p39-scale));
}

.page-thirty-nine-stage > img.page-thirty-nine-label-2 {
  left: calc(565px * var(--p39-scale));
  top: calc(1353px * var(--p39-scale));
  width: calc(172px * var(--p39-scale));
  z-index: 7;
}

.page-thirty-nine-shot {
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 5;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-thirty-nine-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-thirty-nine-shot-1 {
  left: calc(116px * var(--p39-scale));
  top: calc(643px * var(--p39-scale));
  width: calc(320px * var(--p39-scale));
}

.page-thirty-nine-shot-2 {
  left: calc(517px * var(--p39-scale));
  top: calc(643px * var(--p39-scale));
  width: calc(320px * var(--p39-scale));
}

.page-thirty-nine-shot-3 {
  left: calc(1000px * var(--p39-scale));
  top: calc(900px * var(--p39-scale));
  width: calc(395px * var(--p39-scale));
}

.page-thirty-nine-shot:hover,
.page-thirty-nine-shot:focus-visible {
  z-index: 7;
}

.page-thirty-nine-shot:hover img,
.page-thirty-nine-shot:focus-visible img {
  transform: scale(1.05);
}

.js .page.page-thirty-nine .page-thirty-nine-stage > img.page-thirty-nine-title,
.js .page.page-thirty-nine .page-thirty-nine-stage > img.page-thirty-nine-module-1,
.js .page.page-thirty-nine .page-thirty-nine-stage > img.page-thirty-nine-module-2,
.js .page.page-thirty-nine .page-thirty-nine-stage > img.page-thirty-nine-label,
.js .page-thirty-nine-shot {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-thirty-nine .page-thirty-nine-stage > img.page-thirty-nine-decor {
  opacity: 0;
  transform: translateY(16px) rotate(-30deg);
}

.js .page.page-thirty-nine.is-visible .page-thirty-nine-stage > img.page-thirty-nine-title,
.js .page.page-thirty-nine.is-visible .page-thirty-nine-stage > img.page-thirty-nine-module-1,
.js .page.page-thirty-nine.is-visible .page-thirty-nine-stage > img.page-thirty-nine-module-2,
.js .page.page-thirty-nine.is-visible .page-thirty-nine-stage > img.page-thirty-nine-label,
.js .page.page-thirty-nine.is-visible .page-thirty-nine-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-thirty-nine.is-visible .page-thirty-nine-stage > img.page-thirty-nine-decor {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

.js .page.page-thirty-nine.is-visible .page-thirty-nine-stage > img.page-thirty-nine-title { transition-delay: 90ms; }
.js .page.page-thirty-nine.is-visible .page-thirty-nine-stage > img.page-thirty-nine-module-1 { transition-delay: 180ms; }
.js .page.page-thirty-nine.is-visible .page-thirty-nine-stage > img.page-thirty-nine-module-2 { transition-delay: 260ms; }
.js .page.page-thirty-nine.is-visible .page-thirty-nine-stage > img.page-thirty-nine-label-1 { transition-delay: 360ms; }
.js .page.page-thirty-nine.is-visible .page-thirty-nine-shot-1 { transition-delay: 430ms; }
.js .page.page-thirty-nine.is-visible .page-thirty-nine-stage > img.page-thirty-nine-label-2 { transition-delay: 500ms; }
.js .page.page-thirty-nine.is-visible .page-thirty-nine-shot-2 { transition-delay: 570ms; }
.js .page.page-thirty-nine.is-visible .page-thirty-nine-shot-3 { transition-delay: 640ms; }

@media (max-width: 860px) {
  .page-thirty-nine-shot:hover img,
  .page-thirty-nine-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-thirty-nine .page-thirty-nine-stage > img.page-thirty-nine-title,
  .js .page.page-thirty-nine .page-thirty-nine-stage > img.page-thirty-nine-module-1,
  .js .page.page-thirty-nine .page-thirty-nine-stage > img.page-thirty-nine-module-2,
  .js .page.page-thirty-nine .page-thirty-nine-stage > img.page-thirty-nine-label,
  .js .page.page-thirty-nine .page-thirty-nine-stage > img.page-thirty-nine-decor,
  .js .page.page-thirty-nine .page-thirty-nine-shot {
    opacity: 1;
    transform: none;
  }

  .page-thirty-nine-shot img {
    transition: none;
  }
}

.page-forty {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1689;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #0b0b0b;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
  --p40-scale: 0.8020833333;
}

.page-forty-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  transform: none;
}

.page-forty-stage > img,
.page-forty-stage > .page-forty-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-forty:hover > img {
  box-shadow: none;
  filter: none;
}

.page-forty-stage > img.page-forty-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-forty-stage > img.page-forty-title {
  left: calc(90px * var(--p40-scale));
  top: calc(163px * var(--p40-scale));
  width: calc(1247px * var(--p40-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-forty-stage > img.page-forty-module-1 {
  left: calc(140px * var(--p40-scale));
  top: calc(407px * var(--p40-scale));
  width: calc(1500px * var(--p40-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-forty-stage > img.page-forty-module-2 {
  left: calc(1322px * var(--p40-scale));
  top: calc(1256px * var(--p40-scale));
  width: calc(450px * var(--p40-scale));
  height: auto;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-forty-stage > img.page-forty-decor {
  left: calc(1330px * var(--p40-scale));
  top: calc(763px * var(--p40-scale));
  width: calc(157px * var(--p40-scale));
  height: auto;
  z-index: 6;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: opacity 0.8s var(--ease-soft) 1s, transform 0.8s var(--ease-out) 1s;
}

.page-forty-stage > img.page-forty-label {
  height: auto;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-forty-stage > img.page-forty-label-1 {
  left: calc(204px * var(--p40-scale));
  top: calc(1353px * var(--p40-scale));
  width: calc(144px * var(--p40-scale));
}

.page-forty-stage > img.page-forty-label-2 {
  left: calc(565px * var(--p40-scale));
  top: calc(1353px * var(--p40-scale));
  width: calc(144px * var(--p40-scale));
  z-index: 7;
}

.page-forty-stage > img.page-forty-label-3 {
  left: calc(1032px * var(--p40-scale));
  top: calc(1353px * var(--p40-scale));
  width: calc(172px * var(--p40-scale));
}

.page-forty-shot {
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 5;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-forty-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-forty-shot-1 {
  left: calc(116px * var(--p40-scale));
  top: calc(643px * var(--p40-scale));
  width: calc(320px * var(--p40-scale));
}

.page-forty-shot-2 {
  left: calc(517px * var(--p40-scale));
  top: calc(643px * var(--p40-scale));
  width: calc(320px * var(--p40-scale));
}

.page-forty-shot-3 {
  left: calc(940px * var(--p40-scale));
  top: calc(643px * var(--p40-scale));
  width: calc(320px * var(--p40-scale));
}

.page-forty-shot:hover,
.page-forty-shot:focus-visible {
  z-index: 7;
}

.page-forty-shot:hover img,
.page-forty-shot:focus-visible img {
  transform: scale(1.05);
}

.js .page.page-forty .page-forty-stage > img.page-forty-title,
.js .page.page-forty .page-forty-stage > img.page-forty-module-1,
.js .page.page-forty .page-forty-stage > img.page-forty-module-2,
.js .page.page-forty .page-forty-stage > img.page-forty-label,
.js .page-forty-shot {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-forty .page-forty-stage > img.page-forty-decor {
  opacity: 0;
  transform: translateY(16px) rotate(-30deg);
}

.js .page.page-forty.is-visible .page-forty-stage > img.page-forty-title,
.js .page.page-forty.is-visible .page-forty-stage > img.page-forty-module-1,
.js .page.page-forty.is-visible .page-forty-stage > img.page-forty-module-2,
.js .page.page-forty.is-visible .page-forty-stage > img.page-forty-label,
.js .page.page-forty.is-visible .page-forty-shot {
  opacity: 1;
  transform: translateY(0);
}

/* 第40页：装饰与模块2 互换位置（各自保留原尺寸，去掉之前的 ±100 位移偏移） */
.js .page.page-forty.is-visible .page-forty-stage > img.page-forty-decor {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* 模块2 在互换后的位置基础上再上移 300px */
.js .page.page-forty.is-visible .page-forty-stage > img.page-forty-module-2 {
  transform: translateY(calc(-300px * var(--p40-scale)));
}

.js .page.page-forty.is-visible .page-forty-stage > img.page-forty-title { transition-delay: 90ms; }
.js .page.page-forty.is-visible .page-forty-stage > img.page-forty-module-1 { transition-delay: 180ms; }
.js .page.page-forty.is-visible .page-forty-stage > img.page-forty-module-2 { transition-delay: 260ms; }
.js .page.page-forty.is-visible .page-forty-stage > img.page-forty-label-1 { transition-delay: 360ms; }
.js .page.page-forty.is-visible .page-forty-shot-1 { transition-delay: 430ms; }
.js .page.page-forty.is-visible .page-forty-stage > img.page-forty-label-2 { transition-delay: 500ms; }
.js .page.page-forty.is-visible .page-forty-shot-2 { transition-delay: 570ms; }
.js .page.page-forty.is-visible .page-forty-stage > img.page-forty-label-3 { transition-delay: 640ms; }
.js .page.page-forty.is-visible .page-forty-shot-3 { transition-delay: 710ms; }

@media (max-width: 860px) {
  .page-forty-shot:hover img,
  .page-forty-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-forty .page-forty-stage > img.page-forty-title,
  .js .page.page-forty .page-forty-stage > img.page-forty-module-1,
  .js .page.page-forty .page-forty-stage > img.page-forty-module-2,
  .js .page.page-forty .page-forty-stage > img.page-forty-label,
  .js .page.page-forty .page-forty-stage > img.page-forty-decor,
  .js .page-forty-shot {
    opacity: 1;
    transform: none;
  }

  .page-forty-shot img {
    transition: none;
  }
}

/* ============================================================
   Page 41 — 语音房身份等级
   ============================================================ */

.page-forty-one {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 4247;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #0b0b0b;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
  --p41-scale: 0.8020833333;
}

.page-forty-one-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  transform: none;
}

.page-forty-one-stage > img,
.page-forty-one-stage > .page-forty-one-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-forty-one-stage > img.page-forty-one-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-forty-one-stage > img.page-forty-one-title,
.page-forty-one-stage > img.page-forty-one-module-1,
.page-forty-one-stage > img.page-forty-one-module-2,
.page-forty-one-stage > img.page-forty-one-module-3,
.page-forty-one-stage > img.page-forty-one-bar,
.page-forty-one-stage > img.page-forty-one-label,
.page-forty-one-stage > img.page-forty-one-ip,
.page-forty-one-stage > img.page-forty-one-decor {
  height: auto;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-forty-one-stage > img.page-forty-one-title {
  left: calc(90px * var(--p41-scale));
  top: calc(120px * var(--p41-scale));
  width: calc(1479px * var(--p41-scale));
  z-index: 3;
}

.page-forty-one-stage > img.page-forty-one-module-1 {
  left: calc(140px * var(--p41-scale));
  top: calc(400px * var(--p41-scale));
  width: calc(1500px * var(--p41-scale));
  z-index: 3;
}

.page-forty-one-stage > img.page-forty-one-bar {
  left: calc(184px * var(--p41-scale));
  width: calc(1320px * var(--p41-scale));
  z-index: 4;
}

.page-forty-one-stage > img.page-forty-one-bar-1 {
  top: calc(1120px * var(--p41-scale));
}

.page-forty-one-stage > img.page-forty-one-bar-2 {
  top: calc(1760px * var(--p41-scale));
}

.page-forty-one-stage > img.page-forty-one-module-2 {
  left: calc(140px * var(--p41-scale));
  top: calc(2030px * var(--p41-scale));
  width: calc(1500px * var(--p41-scale));
  z-index: 3;
}

.page-forty-one-stage > img.page-forty-one-module-3 {
  left: calc(1300px * var(--p41-scale));
  top: calc(3290px * var(--p41-scale));
  width: calc(450px * var(--p41-scale));
  z-index: 3;
}

.page-forty-one-stage > img.page-forty-one-label {
  height: auto;
  z-index: 4;
}

.page-forty-one-stage > img.page-forty-one-label-1 {
  left: calc(218px * var(--p41-scale));
  top: calc(3048px * var(--p41-scale));
  width: calc(164px * var(--p41-scale));
}

.page-forty-one-stage > img.page-forty-one-label-2 {
  left: calc(589px * var(--p41-scale));
  top: calc(3048px * var(--p41-scale));
  width: calc(192px * var(--p41-scale));
}

.page-forty-one-stage > img.page-forty-one-label-3 {
  left: calc(974px * var(--p41-scale));
  top: calc(3048px * var(--p41-scale));
  width: calc(192px * var(--p41-scale));
}

.page-forty-one-stage > img.page-forty-one-label-4 {
  left: calc(204px * var(--p41-scale));
  top: calc(3948px * var(--p41-scale));
  width: calc(192px * var(--p41-scale));
}

.page-forty-one-stage > img.page-forty-one-label-5 {
  left: calc(589px * var(--p41-scale));
  top: calc(3948px * var(--p41-scale));
  width: calc(192px * var(--p41-scale));
}

.page-forty-one-stage > img.page-forty-one-label-6 {
  left: calc(974px * var(--p41-scale));
  top: calc(3948px * var(--p41-scale));
  width: calc(192px * var(--p41-scale));
}

.page-forty-one-stage > img.page-forty-one-ip {
  left: calc(1300px * var(--p41-scale));
  top: calc(3540px * var(--p41-scale));
  width: calc(466px * var(--p41-scale));
  z-index: 4;
}

.page-forty-one-stage > img.page-forty-one-decor {
  left: calc(1400px * var(--p41-scale));
  top: calc(3160px * var(--p41-scale));
  width: calc(157px * var(--p41-scale));
  z-index: 6;
  transform-origin: 50% 50%;
  transition: opacity 0.8s var(--ease-soft) 1s, transform 0.8s var(--ease-out) 1s;
}

.page-forty-one-shot {
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 5;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-forty-one-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-forty-one-shot-1,
.page-forty-one-shot-2,
.page-forty-one-shot-3,
.page-forty-one-shot-4,
.page-forty-one-shot-5,
.page-forty-one-shot-6,
.page-forty-one-shot-7,
.page-forty-one-shot-8 {
  width: calc(300px * var(--p41-scale));
}

.page-forty-one-shot-1 { left: calc(154px * var(--p41-scale)); top: calc(650px * var(--p41-scale)); }
.page-forty-one-shot-2 { left: calc(514px * var(--p41-scale)); top: calc(650px * var(--p41-scale)); }
.page-forty-one-shot-3 { left: calc(874px * var(--p41-scale)); top: calc(650px * var(--p41-scale)); }
.page-forty-one-shot-4 { left: calc(1234px * var(--p41-scale)); top: calc(650px * var(--p41-scale)); }

.page-forty-one-shot-5 { left: calc(154px * var(--p41-scale)); top: calc(1290px * var(--p41-scale)); }
.page-forty-one-shot-6 { left: calc(514px * var(--p41-scale)); top: calc(1290px * var(--p41-scale)); }
.page-forty-one-shot-7 { left: calc(874px * var(--p41-scale)); top: calc(1290px * var(--p41-scale)); }
.page-forty-one-shot-8 { left: calc(1234px * var(--p41-scale)); top: calc(1290px * var(--p41-scale)); }

.page-forty-one-shot-9,
.page-forty-one-shot-10,
.page-forty-one-shot-11,
.page-forty-one-shot-12,
.page-forty-one-shot-13,
.page-forty-one-shot-14 {
  width: calc(320px * var(--p41-scale));
}

.page-forty-one-shot-9 { left: calc(148px * var(--p41-scale)); top: calc(2300px * var(--p41-scale)); }
.page-forty-one-shot-10 { left: calc(533px * var(--p41-scale)); top: calc(2300px * var(--p41-scale)); }
.page-forty-one-shot-11 { left: calc(918px * var(--p41-scale)); top: calc(2300px * var(--p41-scale)); }

.page-forty-one-shot-12 { left: calc(148px * var(--p41-scale)); top: calc(3190px * var(--p41-scale)); }
.page-forty-one-shot-13 { left: calc(533px * var(--p41-scale)); top: calc(3190px * var(--p41-scale)); }
.page-forty-one-shot-14 { left: calc(918px * var(--p41-scale)); top: calc(3190px * var(--p41-scale)); }

.page-forty-one-shot:hover,
.page-forty-one-shot:focus-visible {
  z-index: 7;
}

.page-forty-one-shot:hover img,
.page-forty-one-shot:focus-visible img {
  transform: scale(1.05);
}

.js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-title,
.js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-module-1,
.js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-module-2,
.js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-module-3,
.js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-bar,
.js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-label,
.js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-ip,
.js .page.page-forty-one-shot {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-decor {
  opacity: 0;
  transform: translateY(16px) rotate(-30deg);
}

.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-title,
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-module-1,
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-module-2,
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-module-3,
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-bar,
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-label,
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-ip,
.js .page.page-forty-one.is-visible .page-forty-one-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-decor {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-title { transition-delay: 90ms; }
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-module-1 { transition-delay: 180ms; }
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-bar-1 { transition-delay: 260ms; }
.js .page.page-forty-one.is-visible .page-forty-one-shot-1 { transition-delay: 330ms; }
.js .page.page-forty-one.is-visible .page-forty-one-shot-2 { transition-delay: 390ms; }
.js .page.page-forty-one.is-visible .page-forty-one-shot-3 { transition-delay: 450ms; }
.js .page.page-forty-one.is-visible .page-forty-one-shot-4 { transition-delay: 510ms; }
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-bar-2 { transition-delay: 570ms; }
.js .page.page-forty-one.is-visible .page-forty-one-shot-5 { transition-delay: 630ms; }
.js .page.page-forty-one.is-visible .page-forty-one-shot-6 { transition-delay: 690ms; }
.js .page.page-forty-one.is-visible .page-forty-one-shot-7 { transition-delay: 750ms; }
.js .page.page-forty-one.is-visible .page-forty-one-shot-8 { transition-delay: 810ms; }
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-module-2 { transition-delay: 870ms; }
.js .page.page-forty-one.is-visible .page-forty-one-shot-9 { transition-delay: 940ms; }
.js .page.page-forty-one.is-visible .page-forty-one-shot-10 { transition-delay: 1010ms; }
.js .page.page-forty-one.is-visible .page-forty-one-shot-11 { transition-delay: 1080ms; }
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-label-1 { transition-delay: 1150ms; }
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-label-2 { transition-delay: 1210ms; }
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-label-3 { transition-delay: 1270ms; }
.js .page.page-forty-one.is-visible .page-forty-one-shot-12 { transition-delay: 1340ms; }
.js .page.page-forty-one.is-visible .page-forty-one-shot-13 { transition-delay: 1410ms; }
.js .page.page-forty-one.is-visible .page-forty-one-shot-14 { transition-delay: 1480ms; }
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-label-4 { transition-delay: 1550ms; }
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-label-5 { transition-delay: 1610ms; }
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-label-6 { transition-delay: 1670ms; }
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-module-3 { transition-delay: 1740ms; }
.js .page.page-forty-one.is-visible .page-forty-one-stage > img.page-forty-one-ip { transition-delay: 1810ms; }

@media (max-width: 860px) {
  .page-forty-one-shot:hover img,
  .page-forty-one-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-title,
  .js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-module-1,
  .js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-module-2,
  .js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-module-3,
  .js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-bar,
  .js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-label,
  .js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-ip,
  .js .page.page-forty-one .page-forty-one-stage > img.page-forty-one-decor,
  .js .page-forty-one-shot {
    opacity: 1;
    transform: none;
  }

  .page-forty-one-shot img {
    transition: none;
  }
}

/* ============================================================
   Page 42 — 情感化设计
   ============================================================ */

.page-forty-two {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1637;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #f4f5f7;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
}

.page-forty-two-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  transform: none;
}

.page-forty-two-stage > img,
.page-forty-two-stage > .page-forty-two-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-forty-two-stage > img.page-forty-two-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-forty-two-stage > img.page-forty-two-title,
.page-forty-two-stage > img.page-forty-two-module-1,
.page-forty-two-stage > img.page-forty-two-module-2 {
  height: auto;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-forty-two-stage > img.page-forty-two-title {
  left: 4.6875%;
  top: 9.9560%;
  width: 30.8854%;
  z-index: 3;
}

.page-forty-two-stage > img.page-forty-two-module-1 {
  left: 7.2917%;
  top: 24.8626%;
  width: 78.1250%;
  z-index: 3;
}

.page-forty-two-stage > img.page-forty-two-module-2 {
  left: 8.3854%;
  top: 57.1778%;
  width: 66.2500%;
  z-index: 3;
}

.page-forty-two-shot {
  width: 13.3333%;
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 5;
  transition: opacity 0.85s var(--ease-soft), transform 0.95s var(--ease-out);
}

.page-forty-two-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-forty-two-shot-1 { left: 7.2917%; top: 39.7068%; }
.page-forty-two-shot-2 { left: 25.8333%; top: 39.7068%; }
.page-forty-two-shot-3 { left: 44.3750%; top: 39.7068%; }
.page-forty-two-shot-4 { left: 62.9167%; top: 39.7068%; }
.page-forty-two-shot-5 { left: 7.2917%; top: 64.6915%; }
.page-forty-two-shot-6 { left: 25.8333%; top: 64.6915%; }
.page-forty-two-shot-7 { left: 44.3750%; top: 64.6915%; }
.page-forty-two-shot-8 { left: 62.9167%; top: 64.6915%; }

.page-forty-two-shot:hover,
.page-forty-two-shot:focus-visible {
  z-index: 7;
}

.page-forty-two-shot:hover img,
.page-forty-two-shot:focus-visible img {
  transform: scale(1.08);
}

.js .page.page-forty-two .page-forty-two-stage > img.page-forty-two-title,
.js .page.page-forty-two .page-forty-two-stage > img.page-forty-two-module-1,
.js .page.page-forty-two .page-forty-two-stage > img.page-forty-two-module-2,
.js .page.page-forty-two .page-forty-two-shot {
  opacity: 0;
  transform: translateY(30px);
}

.js .page.page-forty-two.is-visible .page-forty-two-stage > img.page-forty-two-title,
.js .page.page-forty-two.is-visible .page-forty-two-stage > img.page-forty-two-module-1,
.js .page.page-forty-two.is-visible .page-forty-two-stage > img.page-forty-two-module-2,
.js .page.page-forty-two.is-visible .page-forty-two-shot {
  opacity: 1;
  transform: translateY(0);
}

.js .page.page-forty-two.is-visible .page-forty-two-stage > img.page-forty-two-title { transition-delay: 90ms; }
.js .page.page-forty-two.is-visible .page-forty-two-stage > img.page-forty-two-module-1 { transition-delay: 180ms; }
.js .page.page-forty-two.is-visible .page-forty-two-shot-1 { transition-delay: 280ms; }
.js .page.page-forty-two.is-visible .page-forty-two-shot-2 { transition-delay: 340ms; }
.js .page.page-forty-two.is-visible .page-forty-two-shot-3 { transition-delay: 400ms; }
.js .page.page-forty-two.is-visible .page-forty-two-shot-4 { transition-delay: 460ms; }
.js .page.page-forty-two.is-visible .page-forty-two-shot-5 { transition-delay: 520ms; }
.js .page.page-forty-two.is-visible .page-forty-two-shot-6 { transition-delay: 580ms; }
.js .page.page-forty-two.is-visible .page-forty-two-shot-7 { transition-delay: 640ms; }
.js .page.page-forty-two.is-visible .page-forty-two-shot-8 { transition-delay: 700ms; }
.js .page.page-forty-two.is-visible .page-forty-two-stage > img.page-forty-two-module-2 { transition-delay: 760ms; }

@media (max-width: 860px) {
  .page-forty-two-shot:hover img,
  .page-forty-two-shot:focus-visible img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .page.page-forty-two .page-forty-two-stage > img.page-forty-two-title,
  .js .page.page-forty-two .page-forty-two-stage > img.page-forty-two-module-1,
  .js .page.page-forty-two .page-forty-two-stage > img.page-forty-two-module-2,
  .js .page.page-forty-two .page-forty-two-shot {
    opacity: 1;
    transform: none;
  }

  .page-forty-two-shot img {
    transition: none;
  }
}

/* ============================================================
   Page 43 — 更多页面展示
   ============================================================ */

.page-forty-three {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 2327;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #f4f0fb;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
}

.page-forty-three > img.page-forty-three-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-forty-three:hover > img.page-forty-three-bg {
  box-shadow: none;
  filter: none;
}

.js .page.page-forty-three > img.page-forty-three-bg {
  opacity: 1;
  transform: none;
}

.js .page.page-forty-three.is-visible > img.page-forty-three-bg {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Page 45 — AI 应用工具
   ============================================================ */

.page-forty-five {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1080;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #0b071d;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
}

.page-forty-five > img.page-forty-five-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-forty-five:hover > img.page-forty-five-bg {
  box-shadow: none;
  filter: none;
}

.js .page.page-forty-five > img.page-forty-five-bg {
  opacity: 1;
  transform: none;
}

.js .page.page-forty-five.is-visible > img.page-forty-five-bg {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Page 47 — Design Skill 总结
   ============================================================ */

.page-forty-seven {
  position: relative;
  width: min(100%, 1540px);
  height: calc(5331px * 0.8020833333);
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #050505;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
  --p47-scale: 0.8020833333;
}

.page-forty-seven-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
}

.page-forty-seven-stage > img,
.page-forty-seven-stage > .page-forty-seven-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-forty-seven-stage > img.page-forty-seven-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.page-forty-seven-stage > img.page-forty-seven-title,
.page-forty-seven-stage > img.page-forty-seven-module-1,
.page-forty-seven-stage > img.page-forty-seven-module-2,
.page-forty-seven-stage > img.page-forty-seven-module-3,
.page-forty-seven-stage > img.page-forty-seven-module-3-1,
.page-forty-seven-stage > img.page-forty-seven-module-4,
.page-forty-seven-stage > img.page-forty-seven-module-5,
.page-forty-seven-stage > img.page-forty-seven-module-6,
.page-forty-seven-stage > img.page-forty-seven-module-7,
.page-forty-seven-stage > img.page-forty-seven-module-8,
.page-forty-seven-stage > img.page-forty-seven-module-9 {
  height: auto;
  pointer-events: none;
}

.page-forty-seven-stage > img.page-forty-seven-title {
  left: calc(100px * var(--p47-scale));
  top: calc(100px * var(--p47-scale));
  width: calc(516px * var(--p47-scale));
  z-index: 3;
}

.page-forty-seven-stage > img.page-forty-seven-module-1 {
  left: calc(100px * var(--p47-scale));
  top: calc(320px * var(--p47-scale));
  width: calc(1301px * var(--p47-scale));
  z-index: 3;
}

.page-forty-seven-stage > img.page-forty-seven-module-2 {
  left: calc(100px * var(--p47-scale));
  top: calc(1896px * var(--p47-scale));
  width: calc(382px * var(--p47-scale));
  z-index: 3;
}

.page-forty-seven-stage > img.page-forty-seven-module-3 {
  left: calc(985px * var(--p47-scale));
  top: calc(1896px * var(--p47-scale));
  width: calc(462px * var(--p47-scale));
  z-index: 3;
}

.page-forty-seven-stage > img.page-forty-seven-module-3-1 {
  left: calc(100px * var(--p47-scale));
  top: calc(2849px * var(--p47-scale));
  width: calc(1100px * var(--p47-scale));
  z-index: 3;
}

.page-forty-seven-stage > img.page-forty-seven-module-4 {
  left: calc(100px * var(--p47-scale));
  top: calc(2998px * var(--p47-scale));
  width: calc(191px * var(--p47-scale));
  z-index: 3;
}

.page-forty-seven-stage > img.page-forty-seven-module-5 {
  left: calc(985px * var(--p47-scale));
  top: calc(3087px * var(--p47-scale));
  width: calc(732px * var(--p47-scale));
  z-index: 3;
}

.page-forty-seven-stage > img.page-forty-seven-module-6 {
  left: calc(100px * var(--p47-scale));
  top: calc(3627px * var(--p47-scale));
  width: calc(191px * var(--p47-scale));
  z-index: 3;
}

.page-forty-seven-stage > img.page-forty-seven-module-7 {
  left: calc(996px * var(--p47-scale));
  top: calc(3716px * var(--p47-scale));
  width: calc(835px * var(--p47-scale));
  z-index: 3;
}

.page-forty-seven-stage > img.page-forty-seven-module-8 {
  left: calc(100px * var(--p47-scale));
  top: calc(4297px * var(--p47-scale));
  width: calc(420px * var(--p47-scale));
  z-index: 3;
}

.page-forty-seven-stage > img.page-forty-seven-module-9 {
  left: calc(100px * var(--p47-scale));
  top: calc(4752px * var(--p47-scale));
  width: calc(1720px * var(--p47-scale));
  z-index: 3;
}

.page-forty-seven-shot {
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 5;
}

.page-forty-seven-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-forty-seven-shot:hover,
.page-forty-seven-shot:focus-visible {
  z-index: 7;
}

.page-forty-seven-shot:hover img,
.page-forty-seven-shot:focus-visible img {
  transform: scale(1.05);
}

.page-forty-seven-shot-1,
.page-forty-seven-shot-2,
.page-forty-seven-shot-3,
.page-forty-seven-shot-4,
.page-forty-seven-shot-5,
.page-forty-seven-shot-6 {
  width: calc(540px * var(--p47-scale));
}

.page-forty-seven-shot-1 { left: calc(100px * var(--p47-scale)); top: calc(469px * var(--p47-scale)); }
.page-forty-seven-shot-2 { left: calc(690px * var(--p47-scale)); top: calc(469px * var(--p47-scale)); }
.page-forty-seven-shot-3 { left: calc(1280px * var(--p47-scale)); top: calc(469px * var(--p47-scale)); }
.page-forty-seven-shot-4 { left: calc(100px * var(--p47-scale)); top: calc(999px * var(--p47-scale)); }
.page-forty-seven-shot-5 { left: calc(690px * var(--p47-scale)); top: calc(999px * var(--p47-scale)); }
.page-forty-seven-shot-6 { left: calc(1280px * var(--p47-scale)); top: calc(999px * var(--p47-scale)); }

.page-forty-seven-shot-7 {
  left: calc(100px * var(--p47-scale));
  top: calc(1529px * var(--p47-scale));
  width: calc(1720px * var(--p47-scale));
}

.page-forty-seven-shot-10,
.page-forty-seven-shot-11 {
  width: calc(855px * var(--p47-scale));
}

.page-forty-seven-shot-8,
.page-forty-seven-shot-9 {
  width: calc(835px * var(--p47-scale));
}

.page-forty-seven-shot-8 { left: calc(100px * var(--p47-scale)); top: calc(2045px * var(--p47-scale)); }
.page-forty-seven-shot-9 { left: calc(985px * var(--p47-scale)); top: calc(2045px * var(--p47-scale)); }

.page-forty-seven-shot-10 { left: calc(100px * var(--p47-scale)); top: calc(3087px * var(--p47-scale)); }
.page-forty-seven-shot-11 { left: calc(100px * var(--p47-scale)); top: calc(3716px * var(--p47-scale)); }

/* ============================================================
   Page 48 — Thank you
   ============================================================ */

.page-forty-eight {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 1080;
  margin: 0 auto;
  overflow: hidden;
  background: #050505;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
}

.page-forty-eight-cut {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

/* ============================================================
   Page 46 — Loomi AI 生图方法论
   ============================================================ */

.page-forty-six {
  position: relative;
  width: min(100%, 1540px);
  aspect-ratio: 1920 / 2849;
  margin: 0 auto clamp(46px, 7vw, 96px);
  overflow: hidden;
  background: #05050b;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.28);
  container-type: inline-size;
  --p46-scale: 0.8020833333;
}

.page-forty-six-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
}

.page-forty-six-stage > img,
.page-forty-six-stage > .page-forty-six-shot {
  position: absolute;
  display: block;
  margin: 0;
  background: transparent;
  box-shadow: none;
  user-select: none;
}

.page-forty-six-stage > img.page-forty-six-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.page-forty-six-stage > img.page-forty-six-title,
.page-forty-six-stage > img.page-forty-six-module-1,
.page-forty-six-stage > img.page-forty-six-module-2,
.page-forty-six-stage > img.page-forty-six-module-3 {
  height: auto;
  pointer-events: none;
}

.page-forty-six-stage > img.page-forty-six-title {
  left: calc(120px * var(--p46-scale));
  top: calc(113px * var(--p46-scale));
  width: calc(579px * var(--p46-scale));
  z-index: 3;
}

.page-forty-six-stage > img.page-forty-six-module-1 {
  left: calc(140px * var(--p46-scale));
  top: calc(357px * var(--p46-scale));
  width: calc(1300px * var(--p46-scale));
  z-index: 3;
}

.page-forty-six-stage > img.page-forty-six-module-2 {
  left: calc(140px * var(--p46-scale));
  top: calc(511px * var(--p46-scale));
  width: calc(1546px * var(--p46-scale));
  z-index: 3;
}

.page-forty-six-stage > img.page-forty-six-module-3 {
  left: calc(140px * var(--p46-scale));
  top: calc(2138px * var(--p46-scale));
  width: calc(178px * var(--p46-scale));
  z-index: 4;
}

.page-forty-six-shot {
  left: calc(140px * var(--p46-scale));
  top: calc(2235px * var(--p46-scale));
  width: calc(1648px * var(--p46-scale));
  padding: 0;
  border: 0;
  overflow: visible;
  cursor: pointer;
  outline: none;
  z-index: 5;
}

.page-forty-six-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s var(--ease-out);
}

.page-forty-six-shot:hover,
.page-forty-six-shot:focus-visible {
  z-index: 7;
}

.page-forty-six-shot:hover img,
.page-forty-six-shot:focus-visible img {
  transform: scale(1.05);
}