body[data-project-page="xhs-spring"] {
  --project-green: #79d3ff;
  --project-yellow: #ffdca2;
  --line: rgba(198, 220, 255, .14);
  background: #03050b;
}

body[data-project-page="xhs-spring"] .project-hero {
  background: radial-gradient(ellipse at 75% 44%, rgba(21, 82, 193, .24), transparent 42%), radial-gradient(ellipse at 14% 90%, rgba(91, 54, 177, .18), transparent 38%), #03050b;
}
body[data-project-page="xhs-spring"] .project-hero::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  height: clamp(120px, 12vw, 220px);
  background: linear-gradient(to bottom, rgba(3,5,11,0), #03050b 90%);
  pointer-events: none;
}
body[data-project-page="xhs-spring"] .project-hero::before {
  opacity: .24;
  background-image: linear-gradient(90deg, rgba(45, 92, 176, .15) 1px, transparent 1px), linear-gradient(rgba(45, 92, 176, .15) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(110deg, transparent 12%, #000 70%);
}

.xhs-hero__layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 480px); grid-template-areas: "copy media"; align-items: center; gap: clamp(48px, 8vw, 128px); padding-block: 138px 104px; }
.xhs-hero__copy { grid-area: copy; }
.xhs-hero__title-lockup { display: flex; width: max-content; max-width: 100%; flex-direction: column; }
.xhs-hero h1 { font-size: clamp(54px, 5.5vw, 102px); letter-spacing: -.035em; line-height: 1; white-space: nowrap; }
.xhs-hero .project-hero__english { display: flex; justify-content: space-between; width: 100%; margin-top: 14px; font-size: clamp(15px, 1.25vw, 22px); letter-spacing: 0; }
.xhs-title-gap { width: .65em; }
.xhs-hero__story { max-width: 720px; margin-top: clamp(78px, 7vw, 112px); }
.xhs-story__heading { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: .02em; }
.xhs-story__tabs { display: inline-flex; align-items: baseline; }
.xhs-story__tabs button { padding: 0; border: 0; background: none; color: #f4f7f2; font: inherit; font-weight: 400; letter-spacing: inherit; opacity: .5; cursor: pointer; transition: opacity .3s ease; }
.xhs-story__tabs button[aria-selected="true"] { font-weight: 650; opacity: 1; }
.xhs-story__separator { margin: 0 12px; font-weight: 400; opacity: .5; }
.xhs-story__tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.xhs-story__viewport { overflow: hidden; margin-top: 16px; }
.xhs-story__track { display: flex; width: 200%; transform: translateX(0); transition: transform .48s cubic-bezier(.22,.8,.2,1); }
.xhs-hero__story.is-role .xhs-story__track { transform: translateX(-50%); }
.xhs-story__panel { flex: 0 0 50%; min-width: 0; padding-right: 1px; }
.xhs-story__panel p { max-width: 720px; margin: 0; color: rgba(232,239,250,.68); font-size: clamp(17px, 1.25vw, 21px); font-weight: 300; line-height: 1.8; }
.xhs-hero .project-tags { width: 100%; justify-content: space-between; gap: 16px; margin-top: clamp(52px, 6vw, 96px); }
.xhs-hero .project-tags li { padding: clamp(10px, 1.2vw, 17px) clamp(14px, 1.5vw, 28px); border-width: 2px; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.045); color: rgba(244,247,242,.78); font-size: clamp(15px, 1.4vw, 24px); font-weight: 300; }
.xhs-hero__media { display: grid; grid-area: media; width: min(100%, 440px, 64svh); justify-self: end; align-content: center; justify-items: center; }
.xhs-hero__media::before { inset: 10% -18% 0; background: rgba(38,106,227,.26); filter: blur(90px); }
.xhs-hero__orb { position: absolute; width: 75%; aspect-ratio: 1; border: 1px solid rgba(125,185,255,.1); border-radius: 50%; box-shadow: 0 0 0 45px rgba(125,185,255,.025), 0 0 0 90px rgba(125,185,255,.018); filter: blur(26px); }
.xhs-hero__phone { position: relative; z-index: 1; width: 69%; aspect-ratio: 1268 / 2572; filter: drop-shadow(0 34px 48px rgba(0,0,0,.62)); }
.xhs-hero__screen-window { position: absolute; z-index: 1; left: calc(76 / 1268 * 100%); top: calc(76 / 2572 * 100%); width: calc(1116 / 1268 * 100%); height: calc(2420 / 2572 * 100%); overflow: hidden; border-radius: 13.33% / 6.16%; }
.xhs-hero__screen-window .xhs-hero__screen { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; transform: scale(1.015); transform-origin: center bottom; }
.xhs-hero__media .xhs-hero__frame { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; filter: none; pointer-events: none; transform: scale(.99); transform-origin: top center; }
.xhs-hero__media figcaption { position: relative; z-index: 2; display: flex; width: 100%; justify-content: space-between; gap: 12px; margin-top: 20px; color: rgba(218,231,255,.5); font-size: 9px; letter-spacing: .1em; }
.xhs-hero__media figcaption span:first-child { color: #86c9ff; }

.xhs-overview { padding: 150px 0 160px; border-top: 0; background: transparent; }
.xhs-section-heading { max-width: 970px; margin-bottom: 62px; }
.xhs-section-heading h2 { margin-top: 28px; font-size: clamp(50px, 7.5vw, 112px); line-height: 1; letter-spacing: -.065em; }
:is(#overview, #challenge, #visuals, #strategy, #delivery) .xhs-section-heading h2 { margin-top: 0; }
.xhs-section-heading > p:last-child { max-width: 750px; margin: 30px 0 0; color: rgba(232,239,250,.64); font-size: 18px; line-height: 1.82; }
.xhs-overview__heading { max-width: 1010px; }
.xhs-board { margin: 0; overflow: hidden; border: 1px solid rgba(151,188,255,.18); border-radius: 22px; background: #03050a; box-shadow: 0 30px 90px rgba(0,0,0,.35); }
.xhs-board img { width: 100%; height: auto; }
.xhs-board figcaption { display: flex; justify-content: space-between; gap: 20px; padding: 18px 22px; border-top: 1px solid rgba(255,255,255,.09); color: rgba(224,235,255,.45); font-size: 10px; letter-spacing: .1em; }
.xhs-board figcaption span:first-child { color: #86c9ff; }

.xhs-challenge { min-height: 0; padding: 44px 0 82px; border-top: 0; background: transparent; }
.xhs-challenge .project-shell { width: min(100% - 72px, 1530px); }
.xhs-challenge .xhs-section-heading { margin-bottom: 104px; }
.xhs-challenge .xhs-section-heading h2 { margin: 0; color: #f4f5f2; font-size: clamp(54px, 5vw, 76px); line-height: 1; letter-spacing: -.055em; }
.xhs-challenge__english { margin: 22px 0 0; color: rgba(244,245,242,.8); font-size: clamp(14px, 1.35vw, 20px); font-weight: 300; line-height: 1.2; letter-spacing: .66em; white-space: nowrap; }
.xhs-challenge-flow { position: relative; width: min(100%, 1250px); aspect-ratio: 928 / 222.031; margin: 0 auto; container-type: inline-size; }
.xhs-challenge-flow__image { position: absolute; display: block; max-width: none; height: auto; object-fit: contain; }
.xhs-challenge-flow__image--flat { left: 0; top: 4.166%; width: 22.207%; height: 92.816%; }
.xhs-challenge-flow__image--three-d { left: 33.728%; top: 0; width: 28.089%; height: 96.983%; object-fit: cover; }
.xhs-challenge-flow__image--rig { left: 75.539%; top: 4.067%; width: 24.461%; height: 95.933%; }
.xhs-challenge-flow__transition { position: absolute; color: rgba(255,255,255,.75); font: 400 1.616cqw/1.2 "DingTalk JinBuTi", "Microsoft YaHei", sans-serif; text-align: center; white-space: nowrap; }
.xhs-challenge-flow__transition span { display: block; }
.xhs-challenge-flow__arrow { position: absolute; display: block; width: 6.876cqw; height: auto; overflow: visible; }
.xhs-challenge-flow__arrow path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xhs-challenge-flow__transition--first { left: 22.198%; top: 0; width: 14.871%; }
.xhs-challenge-flow__transition--first .xhs-challenge-flow__arrow { left: 2.701cqw; top: 5.885cqw; }
.xhs-challenge-flow__transition--second { left: 62.5%; top: 4.067%; width: 10.56%; }
.xhs-challenge-flow__transition--second .xhs-challenge-flow__arrow { left: 1.839cqw; top: 4.911cqw; }

@media (prefers-reduced-motion: no-preference) {
  .has-project-js .xhs-challenge-flow__image,
  .has-project-js .xhs-challenge-flow__transition span { opacity: 0; }
  .has-project-js .xhs-challenge-flow__arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .has-project-js .xhs-challenge-flow.is-visible .xhs-challenge-flow__image,
  .has-project-js .xhs-challenge-flow.is-visible .xhs-challenge-flow__transition span { animation: xhs-flow-appear .55s cubic-bezier(.2,.8,.2,1) both; }
  .has-project-js .xhs-challenge-flow.is-visible .xhs-challenge-flow__image--flat { animation-delay: .1s; }
  .has-project-js .xhs-challenge-flow.is-visible .xhs-challenge-flow__transition--first span { animation-delay: .65s; }
  .has-project-js .xhs-challenge-flow.is-visible .xhs-challenge-flow__image--three-d { animation-delay: 1.65s; }
  .has-project-js .xhs-challenge-flow.is-visible .xhs-challenge-flow__transition--second span { animation-delay: 2.2s; }
  .has-project-js .xhs-challenge-flow.is-visible .xhs-challenge-flow__image--rig { animation-delay: 3.2s; }
  .has-project-js .xhs-challenge-flow.is-visible .xhs-challenge-flow__arrow path { animation: xhs-flow-draw .65s ease-in-out both; }
  .has-project-js .xhs-challenge-flow.is-visible .xhs-challenge-flow__transition--first .xhs-challenge-flow__arrow-line { animation-delay: .95s; }
  .has-project-js .xhs-challenge-flow.is-visible .xhs-challenge-flow__transition--first .xhs-challenge-flow__arrow-head { animation-delay: 1.5s; animation-duration: .2s; }
  .has-project-js .xhs-challenge-flow.is-visible .xhs-challenge-flow__transition--second .xhs-challenge-flow__arrow-line { animation-delay: 2.5s; }
  .has-project-js .xhs-challenge-flow.is-visible .xhs-challenge-flow__transition--second .xhs-challenge-flow__arrow-head { animation-delay: 3.05s; animation-duration: .2s; }
}
@keyframes xhs-flow-appear {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes xhs-flow-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
.xhs-material-flow { width: min(100%, 1250px); margin: clamp(108px, 11vw, 170px) auto 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
.xhs-material-flow h3 { margin: 0 0 clamp(22px, 2.2vw, 32px); color: #f6f7fb; font-size: 24px; font-weight: 600; line-height: 1.2; text-align: center; }
body.project-type-consistent .project-section .xhs-material-flow h3 { font-size: 24px; }
.xhs-material-flow__stages { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1.08fr) 54px minmax(0, 1fr); gap: clamp(12px, 2vw, 28px); align-items: start; }
.xhs-material-flow__stage { min-width: 0; }
.xhs-material-flow figure { min-width: 0; margin: 0; }
.xhs-material-flow__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.xhs-material-flow__stage:nth-child(3) .xhs-material-flow__pair { width: 94%; margin-inline: auto; }
.xhs-material-flow__tile img { box-sizing: border-box; display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 15px; object-fit: cover; }
.xhs-material-flow__stage:first-child .xhs-material-flow__tile img { border: 2px solid #fff; }
.xhs-material-flow__tile figcaption { margin-top: 10px; color: #f6f7fb; font-size: 18px; line-height: 1.3; text-align: center; white-space: nowrap; }
.xhs-material-flow__large { margin-top: clamp(22px, 2.2vw, 30px) !important; }
.xhs-material-flow__large img { display: block; width: 100%; height: auto; aspect-ratio: 252 / 141; border-radius: 13px; object-fit: cover; }
.xhs-material-flow__stage:nth-child(3) .xhs-material-flow__large img { width: 93.3%; margin-inline: auto; }
.xhs-material-flow__large figcaption { margin-top: 14px; color: rgba(255,255,255,.78); font-size: 18px; line-height: 1.35; text-align: center; white-space: nowrap; }
.xhs-material-flow__arrow { display: grid; width: 54px; height: 54px; align-self: center; place-items: center; margin-top: 54px; }
.xhs-material-flow__arrow img { display: block; max-width: none; transform: rotate(-90deg) scale(1.3); }
.has-project-js .xhs-material-flow__item { transition-delay: calc(var(--reveal-order) * 160ms); }

@media (max-width: 900px) {
  .xhs-material-flow__stages { grid-template-columns: 1fr; justify-items: center; gap: 26px; }
  .xhs-material-flow__stage { width: min(100%, 480px); }
  .xhs-material-flow__arrow { margin: 0; }
  .xhs-material-flow__arrow img { transform: none; }
  .has-project-js .xhs-material-flow__item { transition-delay: 0ms; }
}

.xhs-strategy { padding: 160px 0 176px; background: #03050b; }
.xhs-strategy .xhs-section-heading { margin: 0 auto 76px; text-align: center; }
.xhs-strategy-list { border-top: 1px solid var(--line); }
.xhs-strategy-list article { padding: 32px 0; border-bottom: 1px solid var(--line); }
.xhs-strategy-list__copy { width: min(100%, 760px); margin: 0 auto; text-align: center; }
body.project-type-consistent .project-section .xhs-strategy-list h3 { margin: 0; font-size: clamp(36px, 3.3vw, 52px); line-height: 1.2; letter-spacing: -.04em; }
.xhs-strategy-list h3 button { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: center; cursor: pointer; }
.xhs-strategy-list h3 button:focus-visible { outline: 2px solid #86c9ff; outline-offset: 8px; }
.xhs-strategy-list__details > div { min-height: 0; overflow: hidden; }
.xhs-strategy-list p { max-width: 680px; margin: 14px auto 0; color: rgba(236,241,250,.65); line-height: 1.65; }
.has-project-js .xhs-strategy-list__details { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.has-project-js .xhs-strategy-list article.is-open .xhs-strategy-list__details { grid-template-rows: 1fr; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .has-project-js .xhs-strategy-list__details { transition: none; }
}

.xhs-board--wide img { width: 100%; }
.xhs-spine-slide { position: relative; width: 100%; aspect-ratio: 16 / 7.74; overflow: hidden; container-type: inline-size; background: transparent; color: #fff; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
.xhs-spine-slide .xhs-spine-layer { position: absolute; display: block; max-width: none; object-fit: cover; }
.xhs-spine-shot { z-index: 1; border-radius: .833cqw; }
.xhs-spine-panel { z-index: 1; border-radius: .781cqw; }
.xhs-spine-figure, .xhs-spine-arrow { z-index: 2; }
.xhs-spine-arrow { transform: rotate(-90deg); }
.xhs-spine-wave { object-fit: contain !important; pointer-events: none; }
.xhs-spine-process-video { position: absolute; z-index: 2; display: block; border-radius: .833cqw; background: #080b15; object-fit: contain; }
.xhs-spine-process-video--collage { object-fit: cover; object-position: center; }
.xhs-spine-shade { position: absolute; z-index: 3; border-radius: 0 0 .73cqw .73cqw; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.77) 63%); pointer-events: none; }
.xhs-spine-shot-label { position: absolute; z-index: 4; display: block; transform: translateY(-50%); margin: 0; white-space: nowrap; }
.xhs-spine-shot-label { z-index: 4; transform: translate(-50%,-50%); font-size: 1.146cqw; line-height: 1.4; }

.xhs-visuals { padding: 160px 0 178px; background: #03050b; }
.xhs-visuals .xhs-section-heading { margin-bottom: 68px; }
:is(.xhs-challenge, .xhs-overview, .xhs-visuals) .xhs-section-heading { margin-inline: auto; text-align: center; }
:is(.xhs-challenge, .xhs-overview, .xhs-visuals) .xhs-section-heading > p:last-child { margin-inline: auto; }
.xhs-visuals .xhs-board { border: 0; border-radius: 0; background: transparent; box-shadow: none; }

.xhs-delivery { padding: 160px 0 140px; background: linear-gradient(180deg, #080b12 0%, #080b12 68%, #0b1230 100%); }
.xhs-delivery .xhs-section-heading { margin: 0 auto 68px; text-align: center; }
.xhs-delivery .xhs-section-heading > p:last-child { margin-inline: auto; }
.xhs-delivery-board { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.xhs-delivery-slide { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: visible; container-type: inline-size; background: transparent; color: #fff; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
.xhs-delivery-slide__title { position: absolute; left: 3.333%; top: 6.389%; margin: 0; color: #fff; font-size: 1.458cqw; font-weight: 600; line-height: 1.25; white-space: nowrap; }
body.project-type-consistent .project-section .xhs-delivery-slide__title { font-size: 1.458cqw; line-height: 1.25; letter-spacing: 0; }
.xhs-delivery-slide__intro,.xhs-delivery-slide__review-copy { position: absolute; left: 3.61%; width: 51.25%; margin: 0; color: rgba(255,255,255,.75); font-size: 1.042cqw; line-height: 1.4; }
.xhs-delivery-slide__intro { top: calc(11.71% - 10px); }
.xhs-delivery-slide > img { position: absolute; display: block; max-width: none; height: auto; object-fit: cover; }
.xhs-delivery-slide__editor { left: 3.333%; top: 17.037%; width: 34.534% !important; aspect-ratio: 663 / 356; border-radius: .781cqw; }
.xhs-delivery-slide__phone { left: 66.475%; top: 17.037%; width: 20.551% !important; aspect-ratio: 394.579 / 824.369; border: .1cqw solid #000; border-radius: 1.719cqw; }
.xhs-delivery-slide__exports,.xhs-delivery-slide__size { position: absolute; left: 39.896%; width: 20.26%; border: 1px solid rgba(255,255,255,.46); border-radius: .862cqw; background: linear-gradient(110deg,rgba(4,0,255,.11),rgba(0,0,0,.11) 56%); box-shadow: 0 .323cqw .835cqw rgba(53,126,236,.15); }
.xhs-delivery-slide__exports { top: 16.944%; height: 12.825%; }
.xhs-delivery-slide__exports span { position: absolute; left: 2.32%; top: 6.5%; font-size: 1.042cqw; white-space: nowrap; }
.xhs-delivery-slide__exports img { position: absolute; top: 30.75%; display: block; width: 21.68% !important; height: 60.85%; border: 0; border-radius: .144cqw; object-fit: cover; }
.xhs-delivery-slide__exports img:nth-of-type(1) { left: 2.42%; }
.xhs-delivery-slide__exports img:nth-of-type(2) { left: 26.76%; }
.xhs-delivery-slide__exports img:nth-of-type(3) { left: 51.1%; }
.xhs-delivery-slide__exports img:nth-of-type(4) { left: 75.4%; width: 22.6% !important; }
.xhs-delivery-slide__size { --glow-x: 50%; --glow-y: 50%; --glow-opacity: 0; --glow-purple: 0; --glow-blue: 0; top: 34.259%; height: 15.741%; display: flex; flex-direction: column; align-items: center; justify-content: center; isolation: isolate; border-color: transparent; box-shadow: 0 0 18px rgba(192,132,252,var(--glow-purple)), 0 0 42px rgba(56,189,248,var(--glow-blue)); transition: box-shadow .28s ease; }
.xhs-delivery-slide__size::before { position: absolute; inset: -1px; z-index: 2; padding: 1px; border-radius: inherit; background: radial-gradient(circle 70px at var(--glow-x) var(--glow-y), #c084fc 0%, #f472b6 32%, #38bdf8 64%, transparent 100%); content: ""; opacity: var(--glow-opacity); pointer-events: none; transition: opacity .24s ease; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.xhs-delivery-slide__size::after { position: absolute; inset: -56px; z-index: 1; padding: 56px; border-radius: calc(.862cqw + 56px); background: radial-gradient(circle 110px at calc(var(--glow-x) + 56px) calc(var(--glow-y) + 56px), rgba(192,132,252,.68), rgba(244,114,182,.42) 28%, rgba(56,189,248,.22) 48%, transparent 62%); content: ""; filter: blur(14px); opacity: var(--glow-opacity); pointer-events: none; transition: opacity .28s ease; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.xhs-delivery-slide__size > * { position: relative; z-index: 3; }
.xhs-delivery-slide__size strong { background: linear-gradient(#fff,#25b3f5); background-clip: text; color: transparent; font-family: "Arial Black", Arial, sans-serif; font-size: 3.186cqw; font-weight: 900; line-height: 1.1; }
.xhs-delivery-slide__size span { color: #fff; font-size: 1.05cqw; line-height: 1.3; }
.xhs-delivery-slide__review-title { position: absolute; left: 3.333%; top: 50.8%; margin: 0; font-size: 1.458cqw; font-weight: 600; line-height: 1.25; text-align: left; }
body.project-type-consistent .project-section .xhs-delivery-slide__review-title { font-size: 1.458cqw; line-height: 1.25; letter-spacing: 0; }
.xhs-delivery-slide__review-copy { left: 3.333%; top: 54.4%; text-align: left; }
.xhs-delivery-slide__reviews { position: absolute; left: 3.255%; top: 61.646%; width: 34.423%; height: 32.412%; }
.xhs-delivery-slide__reviews img { position: absolute; top: 0; display: block; width: 25.44% !important; height: 100%; max-width: none; border-radius: .729cqw; object-fit: cover; box-shadow: -.469cqw 0 .604cqw rgba(0,0,0,.17); }
.xhs-delivery-slide__reviews img:nth-child(1) { left: 0; box-shadow: none; }
.xhs-delivery-slide__reviews img:nth-child(2) { left: 18.65%; }
.xhs-delivery-slide__reviews img:nth-child(3) { left: 36.7%; }
.xhs-delivery-slide__reviews img:nth-child(4) { left: 54.74%; }
.xhs-delivery-slide__reviews img:nth-child(5) { left: 74.57%; }
.xhs-delivery-slide__masks { position: absolute; inset: 0; pointer-events: none; }
.xhs-delivery-slide__mask { position: absolute; display: block; overflow: hidden; border-radius: .1cqw; background: rgba(255,255,255,.1); backdrop-filter: blur(.3cqw); }
.xhs-delivery-slide__mask img { display: block; width: 100% !important; height: 100%; }
.xhs-delivery-slide__preview { left: 43.073%; top: 61.111%; width: 15.833% !important; aspect-ratio: 304 / 356; border-radius: .781cqw; }
.xhs-footer { border-color: var(--line); }

@media (max-width: 1100px) {
  .xhs-hero__layout { grid-template-columns: minmax(0,1fr) minmax(280px,.78fr); gap: 4vw; }
  .xhs-hero__media { width: min(100%, 360px, 62svh); }
}

@media (max-width: 720px) {
  .xhs-hero__layout { grid-template-columns: 1fr; grid-template-areas: "copy" "media"; gap: 20px; padding-top: 116px; padding-bottom: 70px; }
  .xhs-hero h1 { font-size: clamp(42px,11.5vw,54px); letter-spacing: -.04em; }
  .xhs-hero .project-hero__english { margin-top: 10px; font-size: 12px; }
  .xhs-hero__story { margin-top: 30px; }
  .xhs-story__heading { font-size: 18px; }
  .xhs-story__viewport { margin-top: 10px; }
  .xhs-story__panel p { font-size: 14px; line-height: 1.7; }
  .xhs-hero .project-tags { justify-content: flex-start; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
  .xhs-hero .project-tags li { padding: 7px 10px; font-size: 11px; }
  .xhs-hero__media { width: min(74%, 260px, 40svh); justify-self: center; margin-top: 2px; }
  body[data-project-page="xhs-spring"] .project-hero::after { height: 86px; }
  .xhs-hero__media figcaption { gap: 8px; margin-top: 12px; font-size: 6px; }
  .xhs-overview,.xhs-challenge,.xhs-strategy,.xhs-visuals,.xhs-delivery { padding: 100px 0 112px; }
  .xhs-challenge { padding: 72px 0 78px; }
  .xhs-challenge .project-shell { width: calc(100% - 32px); }
  .xhs-challenge .xhs-section-heading { margin-bottom: 34px; }
  .xhs-challenge .xhs-section-heading h2 { font-size: clamp(44px, 12vw, 64px); }
  .xhs-challenge__english { margin-top: 15px; font-size: 10px; letter-spacing: .48em; }
  .xhs-section-heading { margin-bottom: 44px; }
  .xhs-section-heading h2 { font-size: clamp(45px,14vw,70px); }
  .xhs-section-heading > p:last-child { margin-top: 22px; font-size: 15px; }
  .xhs-board { border-radius: 15px; }
  .xhs-board figcaption { flex-direction: column; gap: 8px; padding: 13px 14px; font-size: 8px; }
  .xhs-challenge-flow { display: flex; flex-direction: column; align-items: center; gap: 22px; aspect-ratio: auto; }
  .xhs-challenge-flow__image { position: static; width: min(78%, 260px); height: auto; object-fit: contain; }
  .xhs-challenge-flow__transition { position: static; width: auto; font-size: 15px; }
  .xhs-challenge-flow__arrow { position: static; width: 64px; margin: 16px auto 0; transform: rotate(90deg); }
  .xhs-strategy-list article { padding: 24px 0; }
  body.project-type-consistent .project-section .xhs-strategy-list h3 { font-size: clamp(26px, 7vw, 36px); }
  .xhs-footer { flex-wrap: wrap; gap: 12px; padding: 25px 16px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
}
.xhs-outfit-module { width: 100%; margin-top: clamp(44px, 5vw, 78px); }
.xhs-outfit-stats { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 34px); color: #f7f8fb; }
.xhs-outfit-stats__total { display: grid; width: 110px; height: 86px; flex: 0 0 110px; align-content: center; justify-items: center; border-radius: 15px; background: rgba(232,247,255,.96); color: #254bb7; }
.xhs-outfit-stats__total strong { font: 500 44px/.9 "DingTalk JinBuTi", "Arial", sans-serif; letter-spacing: -.06em; }
.xhs-outfit-stats__total strong small { margin-left: 2px; font-size: 20px; }
.xhs-outfit-stats__total span { margin-top: 6px; font-size: 13px; line-height: 1; }
.xhs-outfit-stats__item { display: grid; min-width: 48px; justify-items: center; align-content: center; }
.xhs-outfit-stats__item strong { font: italic 500 42px/.95 "DingTalk JinBuTi", "Arial", sans-serif; letter-spacing: -.06em; white-space: nowrap; }
.xhs-outfit-stats__item strong small { margin-left: 2px; font-size: 19px; }
.xhs-outfit-stats__item span { margin-top: 6px; font-size: 13px; line-height: 1; white-space: nowrap; }
.xhs-outfit-stats__plus { width: 15px; height: 15px; flex: 0 0 15px; opacity: .68; }
.xhs-motion-carousel { --xhs-motion-gap: 28px; --xhs-motion-card-width: 210px; width: 100%; margin-top: 34px; }
.xhs-motion-rows { --xhs-motion-fade: clamp(36px, 5vw, 84px); display: grid; gap: 26px; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--xhs-motion-fade), #000 calc(100% - var(--xhs-motion-fade)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--xhs-motion-fade), #000 calc(100% - var(--xhs-motion-fade)), transparent); }
.xhs-motion-row { width: 100%; overflow: hidden; }
.xhs-motion-track, .xhs-motion-set { display: flex; width: max-content; align-items: stretch; }
.xhs-motion-track { will-change: transform; }
.xhs-motion-set { flex: none; gap: var(--xhs-motion-gap); padding-right: var(--xhs-motion-gap); }
.xhs-motion-card { display: flex; width: var(--xhs-motion-card-width); aspect-ratio: 153.307 / 187.877; flex: none; flex-direction: column; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: linear-gradient(145deg,#252525 0%,#1c1c1c 58%,#151515 100%); }
.xhs-motion-card__stage { display: grid; min-height: 0; flex: 1 1 auto; place-items: center; overflow: hidden; padding: 7px 7px 0; }
.xhs-motion-card video, .xhs-motion-card img.ipad-alpha-fallback { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transform: translate(var(--xhs-visual-x, 0px),var(--xhs-visual-y, 0px)) scale(var(--xhs-visual-scale, 1)); transform-origin: center; }
.xhs-motion-card figcaption { flex: none; padding: 0 5px 13px; color: #f7f7f7; font-size: clamp(12px,1.1vw,16px); font-weight: 650; line-height: 1.2; text-align: center; white-space: nowrap; }
.xhs-motion-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.xhs-motion-tabs button { padding: 11px 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: #27272a; color: #bdbdbd; font: 600 15px/1.4 "PingFang SC","Microsoft YaHei",sans-serif; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.xhs-motion-tabs button:hover { border-color: rgba(134,201,255,.55); }
.xhs-motion-tabs button:focus-visible { outline: 2px solid #86c9ff; outline-offset: 3px; }
.xhs-motion-tabs button[aria-pressed="true"] { border-color: #86c9ff; background: #86c9ff; color: #061020; }

@media (min-width: 721px) and (max-width: 1080px) {
  .xhs-motion-carousel { --xhs-motion-gap: 18px; }
}

@media (max-width: 720px) {
  .xhs-outfit-module { width: 100%; margin-top: 34px; }
  .xhs-outfit-stats { justify-content: center; gap: 9px; }
  .xhs-outfit-stats__total { width: 76px; height: 64px; flex-basis: 76px; border-radius: 11px; }
  .xhs-outfit-stats__total strong { font-size: 31px; }
  .xhs-outfit-stats__total strong small { font-size: 14px; }
  .xhs-outfit-stats__total span { margin-top: 4px; font-size: 10px; }
  .xhs-outfit-stats__item { min-width: 0; }
  .xhs-outfit-stats__item strong { font-size: 27px; }
  .xhs-outfit-stats__item strong small { font-size: 13px; }
  .xhs-outfit-stats__item span { margin-top: 4px; font-size: 9px; }
  .xhs-outfit-stats__plus { width: 10px; height: 10px; flex-basis: 10px; }
  .xhs-motion-carousel { --xhs-motion-gap: 12px; margin-top: 22px; }
  .xhs-motion-rows { --xhs-motion-fade: 28px; gap: 12px; }
  .xhs-motion-card { border-radius: 16px; }
  .xhs-motion-card__stage { padding: 6px 6px 0; }
  .xhs-motion-card figcaption { padding-bottom: 9px; font-size: 12px; }
  .xhs-motion-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 22px; }
  .xhs-motion-tabs button { width: 100%; padding: 9px 12px; font-size: 12px; }
}