#keymax-detail-root, #keymax-detail-root * {
  box-sizing: border-box;
}

#keymax-detail-root {
  min-width: 320px;
  /* 用 clip 替代 hidden，clip 不会破坏 sticky */
  overflow-x: clip;
  background: #fff;
  font-family: "HarmonyOS Sans SC", "HarmonyOS Sans", Arial, Helvetica, sans-serif;
}

#keymax-detail-root {
  margin: 0;
  color: #000;
}

#keymax-detail-root img,
#keymax-detail-root video {
  display: block;
  max-width: none;
  user-select: none;
}

.desktop-page {
  width: 100%;
  /* 不能用 overflow-x: hidden，否则会破坏子元素的 position: sticky */
  overflow: visible;
  background: #fff;
}

.mobile-page {
  display: none;
}

.cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-1200 {
  position: relative;
  width: 100%;
  height: 46.875vw;
  overflow: hidden;
}

.section-inner {
  position: relative;
  width: 62.5vw;
  margin-inline: auto;
}

.hero-section {
  background: #fff;
}

.experience-section {
  background: #fff;
  padding-top: 6.6796875vw;
}

.experience-inner {
  display: flex;
  flex-direction: column;
  gap: 1.7578125vw;
}

.eyebrow-row {
  display: flex;
  align-items: center;
  gap: 1.328125vw;
  height: 1.5625vw;
}

.eyebrow-row img {
  width: 1.328125vw;
  height: 1.5625vw;
}

.eyebrow-row h2 {
  margin: 0;
  font-size: 1.5625vw;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
}

.experience-card {
  position: relative;
  width: 62.5vw;
  height: 29.6875vw;
  overflow: hidden;
  border-radius: 1.3671875vw;
  background: #cecece;
  perspective: 1200px;
  perspective-origin: 50% 42%;
}

.experience-controls {
  position: absolute;
  top: 50%;
  left: 3.515625vw;
  display: flex;
  flex-direction: column;
  gap: 1.953125vw;
  width: 10.546875vw;
  transform: translateY(-50%);
}

.experience-control-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.experience-control-btn img {
  display: block;
  width: 100%;
  height: auto;
}

.experience-device-stage {
  position: absolute;
  top: 50%;
  left: 26.2109375vw;
  width: 9.6484375vw;
  height: 21.875vw;
  transform: translateY(-50%) translateZ(0);
  cursor: grab;
  touch-action: none;
  user-select: none;
  contain: strict;
}

.experience-device-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: transparent;
}

.experience-device-stage.experience-device--manual-drag {
  cursor: grabbing;
}

.experience-color {
  --d2560: calc(100vw / 2560);
  position: absolute;
  top: 50%;
  right: 3.515625vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--d2560) * 24);
  width: calc(var(--d2560) * 360);
  min-width: calc(var(--d2560) * 360);
  min-height: calc(var(--d2560) * 132);
  padding-inline: calc(var(--d2560) * 8);
  text-align: center;
  transform: translateY(-50%);
}

.experience-color-dots {
  display: grid;
  grid-template-columns: repeat(5, calc(var(--d2560) * 28));
  grid-template-rows: repeat(2, calc(var(--d2560) * 28));
  column-gap: calc(var(--d2560) * 20);
  row-gap: calc(var(--d2560) * 16);
  width: max-content;
  margin-inline: auto;
}

.experience-color-dots img {
  pointer-events: none;
}

.color-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  appearance: none;
  overflow: visible;
}

.color-dot-off,
.color-dot-on {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.color-dot-on {
  position: absolute;
  inset: 0;
  display: none;
}

.color-dot[aria-pressed="true"] .color-dot-off {
  display: none;
}

.color-dot[aria-pressed="true"] .color-dot-on {
  display: block;
}

.color-dot:focus-visible {
  outline: calc(var(--d2560) * 2) solid #0064ff;
  outline-offset: calc(var(--d2560) * 2);
}

.experience-color-label {
  margin: 0;
  width: 100%;
  font-size: 0.9375vw;
  font-weight: 300;
  line-height: 1.25;
  text-transform: none;
  word-break: break-word;
}

.features-section {
  position: relative;
  background: #eeeeee;
  color: #eeeeee;
  padding-top: 10.15625vw;
  --feature-slide-w: 46.875vw;
  --feature-slide-h: 26.5625vw;
  --feature-gap: 0.9375vw;
  --feature-carousel-dur: 520ms;
  --feature-carousel-ease: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.features-section--media-pending {
  opacity: 0;
  pointer-events: none;
}

.features-viewport {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-x pinch-zoom;
  isolation: isolate;
}

.features-viewport:active {
  cursor: grabbing;
}

.feature-track {
  position: relative;
  width: 100%;
  height: var(--feature-slide-h);
  background: transparent;
  backface-visibility: hidden;
}

/** 首尾克隆 + 轨道平移：横向无缝循环，避免切换露白 */
.feature-track.feature-track--infinite {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: max-content;
  column-gap: var(--feature-gap);
  will-change: transform;
}

.feature-track.feature-track--infinite > .feature-slide {
  position: relative;
  left: auto;
  flex: 0 0 var(--feature-slide-w);
  transform: none !important;
  z-index: auto;
}

.feature-track.feature-track--infinite > .feature-slide--clone {
  pointer-events: none;
  user-select: none;
}

.feature-slide {
  position: absolute;
  top: 0;
  left: 50%;
  flex: 0 0 var(--feature-slide-w);
  width: var(--feature-slide-w);
  height: var(--feature-slide-h);
  overflow: hidden;
  border-radius: 1.3671875vw;
  background: #eeeeee;
  transform: translate3d(-50%, 0, 0);
  backface-visibility: hidden;
}

.feature-track > .feature-slide:nth-child(1) {
  z-index: 100;
  transform: translate3d(
      calc(-50% + 0 * (var(--feature-slide-w) + var(--feature-gap)) + 0px),
      0,
      0
    );
}

.feature-track > .feature-slide:nth-child(2) {
  z-index: 99;
  transform: translate3d(
      calc(-50% + 1 * (var(--feature-slide-w) + var(--feature-gap)) + 0px),
      0,
      0
    );
}

.feature-track > .feature-slide:nth-child(3) {
  z-index: 98;
  transform: translate3d(
      calc(-50% + 2 * (var(--feature-slide-w) + var(--feature-gap)) + 0px),
      0,
      0
    );
}

.feature-track > .feature-slide:nth-child(4) {
  z-index: 98;
  transform: translate3d(
      calc(-50% + -2 * (var(--feature-slide-w) + var(--feature-gap)) + 0px),
      0,
      0
    );
}

.feature-track > .feature-slide:nth-child(5) {
  z-index: 99;
  transform: translate3d(
      calc(-50% + -1 * (var(--feature-slide-w) + var(--feature-gap)) + 0px),
      0,
      0
    );
}

.feature-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.feature-slide--seq {
  position: absolute;
  background: transparent;
}

.feature-slide--seq .feature-seq-display {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  opacity: 0;
  z-index: 0;
}

.feature-slide--seq .feature-seq-display.is-feature-seq-active {
  opacity: 1;
  z-index: 1;
}

.feature-carousel-dots {
  position: absolute;
  top: calc(10.15625vw + var(--feature-slide-h) + 1.5625vw + 2.734375vw);
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.859375vw;
  min-width: 8.59375vw;
  padding: 0.3125vw 1.171875vw;
  box-sizing: border-box;
  transform: translateX(-50%);
}

.feature-dot {
  box-sizing: border-box;
  width: 0.46875vw;
  height: 0.46875vw;
  min-width: 6px;
  min-height: 6px;
  max-width: 10px;
  max-height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  flex-shrink: 0;
  transition: width var(--feature-carousel-dur) var(--feature-carousel-ease),
    height var(--feature-carousel-dur) var(--feature-carousel-ease),
    border-radius var(--feature-carousel-dur) var(--feature-carousel-ease),
    background var(--feature-carousel-dur) var(--feature-carousel-ease),
    min-width var(--feature-carousel-dur) var(--feature-carousel-ease),
    max-width var(--feature-carousel-dur) var(--feature-carousel-ease);
}

.feature-dot:hover {
  background: rgba(0, 0, 0, 0.32);
}

.feature-dot[aria-selected="true"] {
  width: 2.734375vw;
  height: 0.46875vw;
  min-width: 44px;
  max-width: 64px;
  min-height: 6px;
  max-height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
}

.feature-carousel-dots.feature-carousel-dots--instant .feature-dot {
  transition: none;
}

.feature-dot:focus-visible {
  outline: 2px solid #0064ff;
  outline-offset: 3px;
}

.video-section {
  position: relative;
  width: 100%;
  height: 56.25vw;
  overflow: hidden;
  background: #000;
}

.text-image-section {
  padding-top: 3.6328125vw;
}

/* ══════════════════════════════════════════════════════════════════════════
   口数段：Dojo Spacer 虚拟滚动容器

   1. .puffs-sticky-content — 只承载真实可视内容（46.875vw），不被额外撑高
   2. .puffs-scroll-spacer  — 隐形垫片，高度由 puffs-scene.js 注入（≈378vh），
                              只参与 scrollHeight，不渲染任何内容
   3. .puffs-scroll-track   — 自然高度，由 sticky 内容 + spacer 合成
   ══════════════════════════════════════════════════════════════════════════ */

#puffs-scene.puffs-section {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  background: #fff;
  overflow: visible !important; /* 必须 visible，否则 sticky 失效 */
  z-index: 100;
}

/* 轨道不再写死高度，由真实内容 + 隐形垫片自然撑开 */
.puffs-scroll-track {
  position: relative;
  width: 100%;
}

/* Sticky 视口：仅真实内容高度，不被虚拟滚动量撑高 */
.puffs-sticky-content {
  position: sticky;
  top: 0;
  width: 100%;
  height: 46.875vw;
  overflow: visible;
  background: #fff;
  z-index: 10;
}

/* Dojo 式隐形垫片：占 scrollHeight，但不绘制、不交互、不可见 */
.puffs-scroll-spacer {
  display: block;
  width: 100%;
  height: 0; /* 真实高度由 JS 写入 */
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  contain: strict;
}

/* 遮罩层：由 JS 控制显示/隐藏 */
.puffs-cover-mask {
  position: fixed;
  top: 46.875vw;
  left: 0;
  width: 100%;
  height: calc(100vh - 46.875vw);
  background: #fff;
  pointer-events: none;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s, visibility 0.1s;
}

/* 锁屏期间显示遮罩 */
#puffs-scene[data-puffs-phase="entrance"] ~ .puffs-cover-mask,
#puffs-scene[data-puffs-phase="smoke"] ~ .puffs-cover-mask,
.puffs-cover-mask.is-active {
  opacity: 1;
  visibility: visible;
}


/* 底层白幕：由下而上盖住卡内图层 */
.puffs-scene__scroll-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: #fff;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}

.puffs-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.1875vw;
  width: 62.5vw;
  margin-inline: auto;
  padding-top: 3.6328125vw;
}

.puffs-section .text-pair {
  width: 100%;
  margin-bottom: 0;
}

.text-pair__detail {
  display: flex;
  flex-direction: column;
  gap: 0.625vw;
}

.puffs-section .text-pair p {
  margin-top: -0.46875vw;
  text-transform: capitalize;
  line-height: 1.4;
}

.puffs-card {
  background: #000;
}

.puffs-card__media {
  position: absolute;
  inset: 0;
}

.puffs-card__layer {
  position: absolute;
  pointer-events: none;
}

.puffs-card__layer img {
  display: block;
  width: 100%;
}

.puffs-card__layer--bg {
  inset: 0;
  z-index: 0;
}

.puffs-card__layer--bg img {
  height: 100%;
  object-fit: cover;
}

.puffs-card__layer--85k,
.puffs-card__layer--more {
  width: 64.375%;
  left: 17.8125%;
  z-index: 1;
}

.puffs-card__layer--85k {
  top: 35.375%;
}

.puffs-card__layer--more {
  top: 57.5%;
}

.puffs-card__layer--85k img,
.puffs-card__layer--more img {
  height: auto;
  object-fit: contain;
}

.puffs-card__layer--device {
  inset: 0;
  z-index: 2;
}

.puffs-card__layer--device img {
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.puffs-scene__entrance {
  will-change: transform, opacity;
  transition: none;
}

.puffs-scene[data-puffs-phase="idle"] .puffs-scene__entrance {
  opacity: 0;
  visibility: hidden;
}

.text-pair {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  width: 62.5vw;
  margin: 0 auto 2.1875vw;
}

.text-pair h2,
.center-copy h2,
.split-copy h2 {
  margin: 0;
  font-size: 2.8125vw;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.text-pair h2 {
  width: 21.9921875vw;
}

.text-pair div {
  width: 20.78125vw;
}

.text-pair h3,
.center-copy h3,
.split-copy h3 {
  margin: 0 0 1.171875vw;
  color: #0064ff;
  font-size: 1.5625vw;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.text-pair p,
.center-copy p,
.split-copy p {
  margin: 0;
  font-size: 0.78125vw;
  line-height: 1.4;
}

/* 文案自下而上入场：整行位移 + 透明度 0→100，无裁切（copy-reveal.js） */
[data-copy-reveal] .copy-reveal-inner {
  display: block;
  --copy-reveal-p: 0;
  opacity: calc(var(--copy-reveal-p, 0) / 100);
  transform: translate3d(0, calc(60px * (100 - var(--copy-reveal-p, 0)) / 100), 0);
  will-change: transform, opacity;
}

[data-copy-reveal].copy-reveal--done .copy-reveal-inner {
  will-change: auto;
}

.wide-card {
  position: relative;
  width: 62.5vw;
  height: 31.25vw;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 1.3671875vw;
  background: #000;
}

.wide-card img,
.wide-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-section {
  color: #fff;
}

.center-copy {
  position: relative;
  z-index: 1;
  width: 51.3671875vw;
  margin-inline: auto;
  text-align: center;
}

.adjust-bg-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  transform: translateZ(0);
  isolation: isolate;
  pointer-events: none;
}

.adjust-bg-frame .adjust-video,
.adjust-bg-frame .adjust-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 调节球外框：只负责位置与尺寸，一般不用改 */
.adjust-ball-frame {
  position: absolute;
  left: 50%;
  top: 12.03125vw;
  z-index: 1;
  box-sizing: border-box;
  width: 32.34375vw;
  height: 32.5390625vw;
  padding: 0.46875vw 0.390625vw;
  overflow: hidden;
  transform: translateX(-50%);
  pointer-events: none;
}

/* 调节球内容区：替换图片 / 视频时只改这里 */
.adjust-ball-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.adjust-ball-stack {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: layout paint;
  transform: translateZ(0);
}

.adjust-ball-layer {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition: none;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.adjust-ball-layer.is-adjust-layer-visible {
  opacity: 1;
  z-index: 1;
}

.adjust-ball-content > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adjust-copy {
  position: absolute;
  top: 3.125vw;
  left: 20.2734375vw;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.390625vw;
  width: 59.453125vw;
  margin: 0;
  padding: 0;
  text-align: center;
  pointer-events: none;
}

.adjust-copy h2 {
  color: #fff;
}

.adjust-section .adjust-copy h3 {
  margin: 0;
  color: #0064ff;
}

.adjust-section .adjust-copy p {
  margin: 0;
  color: #fff;
}

.battery-copy h3 {
  margin-top: 0.390625vw;
  margin-bottom: 0.390625vw;
}

.adjust-icon-frame {
  position: absolute;
  top: calc(50% + 4.8828125vw);
  left: 20.2734375vw;
  z-index: 8;
  width: 59.453125vw;
  height: 9.296875vw;
  transform: translateY(-50%);
  pointer-events: auto;
  isolation: isolate;
}

.adjust-bar-stack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: layout paint;
  transform: translateZ(0);
}

.adjust-bar-layer {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition: none;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.adjust-bar-layer.is-adjust-layer-visible {
  opacity: 1;
  z-index: 1;
}

.adjust-points {
  position: absolute;
  inset: 0;
  z-index: 2;
  box-sizing: border-box;
  pointer-events: auto;
}

.adjust-hit-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}

.split-section {
  background: #fff;
}

.screens-section {
  background: #fff;
}

.screens-layout {
  position: absolute;
  top: 5.390625vw;
  left: 22.7734375vw;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5.3515625vw;
}

.screens-hand-frame {
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0.390625vw;
}

.screens-hand-content {
  position: relative;
  width: 23.7890625vw;
  height: 41.09375vw;
  isolation: isolate;
  contain: layout paint;
}

.screens-hand-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: none;
  backface-visibility: hidden;
  transform: translateZ(0);
  z-index: 1;
  pointer-events: none;
}

/** 双缓冲瞬时切层，避免换 src 时露出白底 */
.screens-section[data-screens-layer="a"] .screens-hand-layer--a,
.screens-section:not([data-screens-layer]) .screens-hand-layer--a {
  z-index: 2;
  opacity: 1;
}

.screens-section[data-screens-layer="b"] .screens-hand-layer--b {
  z-index: 2;
  opacity: 1;
}

.screens-hand-layer--a {
  opacity: 1;
}

.screens-section[data-screens-layer="b"] .screens-hand-layer--a {
  opacity: 0;
}

.screens-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9375vw;
  width: 30.546875vw;
  flex-shrink: 0;
  color: #000;
}

.screens-copy h2 {
  margin: 0;
  font-size: 2.8125vw;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.screens-copy h3 {
  margin: 0;
  color: #0064ff;
  font-size: 1.5625vw;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.screens-copy p {
  margin: 0;
  font-size: 0.78125vw;
  line-height: 1.4;
}

.split-copy {
  position: absolute;
  top: 50%;
  left: 52.6953125vw;
  width: 30.546875vw;
  transform: translateY(-50%);
}

.split-copy h2 {
  margin-bottom: 0.9375vw;
}

.split-copy h3 {
  margin-bottom: 0.9375vw;
}

.battery-bg-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.battery-bg-frame .battery-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.battery-copy {
  position: relative;
  z-index: 3;
  padding-top: 5.234375vw;
  color: #fff;
}

.battery-copy p {
  font-weight: 400;
}

.mesh-section {
  padding-top: 3.90625vw;
  background: #fff;
}

.mesh-copy {
  width: 51.3671875vw;
  margin-bottom: 2.421875vw;
  color: #000;
}

.mesh-copy p {
  margin-top: 0.859375vw;
}

.mesh-card {
  height: 30.46875vw;
  background: #dadada;
}

.mesh-video-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mesh-video {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.mesh-card[data-mesh-phase="01"] .mesh-video--01,
.mesh-card:not([data-mesh-phase]) .mesh-video--01 {
  opacity: 1;
}

.mesh-card[data-mesh-phase="02"] .mesh-video--02 {
  opacity: 1;
}

.airflow-copy {
  position: relative;
  z-index: 2;
  padding-top: 5.234375vw;
  color: #000;
}

.airflow-copy h3 {
  margin-top: 0.390625vw;
  margin-bottom: 0.5859375vw;
}

.airflow-video-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.airflow-video {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.airflow-section[data-airflow-mode="tight"] .airflow-video--tight,
.airflow-section[data-airflow-mode="loose"] .airflow-video--loose {
  opacity: 1;
}

.airflow-toggle {
  position: absolute;
  bottom: 4.5703125vw;
  left: 50%;
  z-index: 2;
  width: 16.40625vw;
  height: 2.34375vw;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  transform: translateX(-50%);
}

.airflow-toggle-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.airflow-section[data-airflow-mode="tight"] .airflow-toggle-icon--tight,
.airflow-section[data-airflow-mode="loose"] .airflow-toggle-icon--loose {
  opacity: 1;
}

/**
 * Figma 1:132「口味」画板 2560×1200（所有尺寸按此画布等比缩放）
 * 内容区 Frame：1600×957 @ (480,134) → 顶 134 / 底 109 / 左右各 480
 * 文案 1315×137（标题 72/84，正文 20/23，间距 30）| 卡片 1600×600（4×385，间距 20，圆角 30）
 * 栈间距 80（文案→卡片、卡片→导航）| 导航 150×60（内边距 10，按钮 130×40）
 */
.flavors-section {
  --figma-w: 2560;
  box-sizing: border-box;
  padding: 0;
  background: #fff;
  --flavors-shift-dur: 0.48s;
  --flavors-shift-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --flavors-spread-p: 0;
  --flavors-expand-dur: 0.9s;
  --flavors-expand-ease: cubic-bezier(0.22, 1, 0.32, 1);
}

#flavors-section.section-1200 {
  height: auto;
  min-height: min(calc(1200 / var(--figma-w) * 100vw), 1200px);
  overflow: visible;
  padding-top: min(calc(134 / var(--figma-w) * 100vw), 134px);
  padding-bottom: min(calc(109 / var(--figma-w) * 100vw), 109px);
}

.flavors-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(calc(1600 / var(--figma-w) * 100vw), 1600px);
  max-width: 100%;
  margin-inline: auto;
  gap: min(calc(80 / var(--figma-w) * 100vw), 80px);
  --flavors-gap: min(calc(20 / var(--figma-w) * 100vw), 20px);
  --flavors-card-w: min(calc(385 / var(--figma-w) * 100vw), 385px);
  --flavors-card-h: min(calc(600 / var(--figma-w) * 100vw), 600px);
  --flavors-view-w: min(calc(1600 / var(--figma-w) * 100vw), 1600px);
}

.flavors-copy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: min(calc(30 / var(--figma-w) * 100vw), 30px);
  width: min(calc(1315 / var(--figma-w) * 100vw), 1315px);
  min-height: min(calc(137 / var(--figma-w) * 100vw), 137px);
  margin: 0;
  color: #000;
  text-align: center;
}

.flavors-copy h2 {
  margin: 0;
  font-size: min(calc(72 / var(--figma-w) * 100vw), 72px);
  font-weight: 700;
  line-height: calc(84 / 72);
  text-transform: uppercase;
}

.flavors-copy p {
  margin: 0;
  font-size: min(calc(20 / var(--figma-w) * 100vw), 20px);
  font-weight: 400;
  line-height: calc(23 / 20);
}

.flavors-track-wrap {
  width: var(--flavors-view-w);
  max-width: 100%;
  overflow: hidden;
}

.flavors-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--flavors-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform var(--flavors-shift-dur) var(--flavors-shift-ease);
  will-change: transform;
}

.flavors-card {
  flex: 0 0 var(--flavors-card-w);
  width: var(--flavors-card-w);
  height: var(--flavors-card-h);
  border-radius: min(calc(30 / var(--figma-w) * 100vw), 30px);
  background: transparent;
}

.flavors-card--media {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: transparent;
}

/* 进入视口前：四卡叠在视口正中；70% 后向左右滑开 */
#flavors-section .flavors-card--spread-target {
  z-index: calc(4 - var(--spread-slot, 0));
  transform: translate3d(
    calc(var(--stack-x, 0px) * (1 - var(--flavors-spread-p, 0))),
    0,
    0
  );
}

#flavors-section[data-flavors-expand="pending"] .flavors-card--spread-target,
#flavors-section.flavors-collapsed-ready .flavors-card--spread-target {
  pointer-events: none;
}

/* 展开位移由 JS rAF 驱动 --flavors-spread-p，勿加 transform transition 避免收尾卡顿 */
#flavors-section.flavors-spread-active .flavors-card--spread-target {
  will-change: transform;
}

#flavors-section.flavors-expanded-settled .flavors-card--spread-target {
  transform: none;
  opacity: 1;
  pointer-events: auto;
  will-change: auto;
}

#flavors-section[data-flavors-expand="pending"] .flavors-nav__btn,
#flavors-section[data-flavors-expand="active"] .flavors-nav__btn {
  pointer-events: none;
}

.flavors-card__surface {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

.flavors-card__img--a,
.flavors-card__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.flavors-card__canvas {
  z-index: 1;
  pointer-events: none;
}

.flavors-card__img--b {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.flavors-nav {
  position: relative;
  box-sizing: border-box;
  width: min(calc(150 / var(--figma-w) * 100vw), 150px);
  min-height: min(calc(60 / var(--figma-w) * 100vw), 60px);
  padding: min(calc(10 / var(--figma-w) * 100vw), 10px);
  line-height: 0;
}

.flavors-nav__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 130 / 40;
  object-fit: contain;
  pointer-events: none;
}

.flavors-nav__btn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.flavors-nav__btn:focus-visible {
  outline: 2px solid #0064ff;
  outline-offset: 2px;
  border-radius: 4px;
}

.flavors-nav__btn:disabled,
.flavors-nav__btn[aria-disabled="true"] {
  cursor: default;
  opacity: 0.35;
}

.flavors-nav__btn--prev {
  left: 0;
}

.flavors-nav__btn--next {
  right: 0;
}

@media (max-width: 1632px) {
  #flavors-section.section-1200 {
    padding-inline: 16px;
  }
}

@media (max-width: 1200px) {
  .flavors-copy {
    width: 100%;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flavors-track {
    transition: none;
  }

}

/**
 * Figma 1:152「包装」画板 2560×1500
 * 内容区 1800 居中 @ top 98 | 标题 72 | 间距 75
 * 产品白卡 1100×800 + 视频黑卡 450×800（间距 50，圆角 35）
 * 参数图 1156×264
 */
.params-section {
  --figma-w: 2560;
  box-sizing: border-box;
  width: 100%;
  min-height: min(calc(1500 / var(--figma-w) * 100vw), 1500px);
  padding-top: min(calc(98 / var(--figma-w) * 100vw), 98px);
  padding-bottom: min(calc(104 / var(--figma-w) * 100vw), 104px);
  overflow: visible;
  background: #f5f5f5;
  text-align: center;
}

.params-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(calc(75 / var(--figma-w) * 100vw), 75px);
  width: min(calc(1800 / var(--figma-w) * 100vw), 1800px);
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 16px;
  box-sizing: border-box;
}

.params-inner h2 {
  width: 100%;
  margin: 0;
  font-size: min(calc(72 / var(--figma-w) * 100vw), 72px);
  font-weight: 700;
  line-height: calc(84 / 72);
  text-transform: uppercase;
  color: #000;
}

.params-media {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: min(calc(50 / var(--figma-w) * 100vw), 50px);
  width: min(calc(1600 / var(--figma-w) * 100vw), 1600px);
  max-width: 100%;
  height: min(calc(800 / var(--figma-w) * 100vw), 800px);
}

.params-card {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: min(calc(35 / var(--figma-w) * 100vw), 35px);
}

/* 1100:450 同高并排，缩小时等比变窄，避免折行后视频卡被拉成竖条 */
.params-card--package {
  flex: 1100 1 0;
  background: #fff;
}

.params-card--package img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.params-card--video {
  flex: 450 1 0;
  background: transparent;
}

.params-card__video {
  display: block;
  background: transparent;
  cursor: pointer;
}

.params-card__play-btn {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.params-card__play-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.params-card__play {
  width: 30%;
  max-width: min(calc(136 / var(--figma-w) * 100vw), 136px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  pointer-events: none;
}

.params-specs {
  display: block;
  width: min(calc(1156 / var(--figma-w) * 100vw), 1156px);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1156 / 264;
  object-fit: contain;
}

@media (max-width: 767px) {
  .desktop-page {
    display: none;
  }

  .mobile-page {
    display: block;
    min-height: 100vh;
    background: #000;
    color: #fff;
  }

  .mobile-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 32px 24px;
    display: flex;
    align-items: flex-end;
  }

  .mobile-hero::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), #000 82%);
  }

  .mobile-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mobile-hero div {
    position: relative;
    z-index: 1;
    max-width: 360px;
  }

  .mobile-hero p {
    margin: 0 0 8px;
    color: #b6ff00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
  }

  .mobile-hero h1 {
    margin: 0 0 14px;
    font-size: 36px;
    line-height: 1;
    text-transform: uppercase;
  }

  .mobile-hero span {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.55;
  }
}