/* Embed the owner's real Helvetica Neue face for display titles, including offline viewing. */
/* 2024 SIENNA CHINA CAMPAIGN CASE */
.sienna-page .about-canvas { background: #eff8ff; }
.sienna-page .content-layer { pointer-events: none; }
.sienna-page .editable-item,
.sienna-page a,
.sienna-page button { pointer-events: auto; }
.sienna-page .sienna-word,
.sienna-page .sienna-title,
.sienna-page .sienna-subtitle-en,
.sienna-page .sienna-top-brand,
.sienna-page .sienna-top-link,
.sienna-page .sienna-section-index,
.sienna-page .sienna-output-index,
.sienna-page .sienna-thanks-en {
  font-family: "Inter Tight", Arial, sans-serif;
}
.sienna-page .sienna-top-link {
  color: #173755;
  text-decoration: none;
  transition: opacity .25s ease;
}
.sienna-page .sienna-top-link:hover,
.sienna-page .sienna-top-link:focus-visible { opacity: .52; }
.sienna-page .sienna-hero { box-shadow: none; }
.sienna-page .sienna-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  background: linear-gradient(180deg, transparent, rgba(239,248,255,.92));
  pointer-events: none;
}
.sienna-page .sienna-case-panel,
.sienna-page .sienna-thanks {
  border: 1px solid rgba(89,124,151,.08);
  box-shadow: 0 20px 55px rgba(41,74,100,.10);
}
.sienna-page .sienna-output-shell {
  border: 1px solid rgba(98,143,177,.06);
  box-shadow: inset 0 1px rgba(255,255,255,.7);
}
.sienna-page .sienna-logo,
.sienna-page .sienna-analysis-icon {
  background: transparent !important;
  box-shadow: none !important;
}
.sienna-page .sienna-analysis-icon img,
.sienna-page .sienna-logo img,
.sienna-page .sienna-brochure-hand img {
  object-fit: contain;
  background: transparent !important;
}
.sienna-page .sienna-brochure-hand {
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  clip-path: inset(0 0 9.5% 0);
}
.sienna-page .sienna-background-media,
.sienna-page .sienna-strategy-media,
.sienna-page .sienna-launch-media,
.sienna-page .sienna-tvc-frame,
.sienna-page .sienna-tvc-video {
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(37,69,93,.09);
}
.sienna-page .sienna-background-pair {
  transition: left .62s cubic-bezier(.22,.72,.22,1),
              width .62s cubic-bezier(.22,.72,.22,1),
              box-shadow .35s ease;
}
.sienna-page:not(.edit-mode) .content-layer[data-sienna-pair-active="drive"] [data-element-id="sienna-background-drive"] {
  left: 108px !important;
  width: 519px !important;
}
.sienna-page:not(.edit-mode) .content-layer[data-sienna-pair-active="drive"] [data-element-id="sienna-background-cabin"] {
  left: 657px !important;
  width: 241px !important;
}
.sienna-page:not(.edit-mode) .content-layer[data-sienna-pair-active="cabin"] [data-element-id="sienna-background-drive"] {
  left: 108px !important;
  width: 241px !important;
}
.sienna-page:not(.edit-mode) .content-layer[data-sienna-pair-active="cabin"] [data-element-id="sienna-background-cabin"] {
  left: 379px !important;
  width: 519px !important;
}
.sienna-page .sienna-background-media img,
.sienna-page .sienna-strategy-media img,
.sienna-page .sienna-launch-media img,
.sienna-page .sienna-tvc-frame img,
.sienna-page .sienna-brochure-hand img {
  scale: 1;
  transform-origin: center;
  will-change: scale, filter, opacity;
  transition: scale .6s cubic-bezier(.22,.72,.22,1), filter .4s ease, opacity .4s ease;
}
.sienna-page:not(.edit-mode):has(.sienna-background-media:hover) .sienna-background-media:not(:hover) img,
.sienna-page:not(.edit-mode):has(.sienna-launch-media:hover) .sienna-launch-media:not(:hover) img,
.sienna-page:not(.edit-mode):has(.sienna-tvc-frame:hover) .sienna-tvc-frame:not(:hover) img {
  filter: blur(1.5px) saturate(.72);
  opacity: .62;
}
.sienna-page:not(.edit-mode) .sienna-background-media:hover img,
.sienna-page:not(.edit-mode) .sienna-strategy-media:hover img,
.sienna-page:not(.edit-mode) .sienna-launch-media:hover img,
.sienna-page:not(.edit-mode) .sienna-tvc-frame:hover img { scale: 1.055; }
.sienna-page:not(.edit-mode) .sienna-brochure-hand:hover img { scale: 1.035; }
.sienna-page.edit-mode .sienna-background-media img,
.sienna-page.edit-mode .sienna-strategy-media img,
.sienna-page.edit-mode .sienna-launch-media img,
.sienna-page.edit-mode .sienna-tvc-frame img,
.sienna-page.edit-mode .sienna-brochure-hand img {
  scale: 1 !important;
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
}
.sienna-page.edit-mode .sienna-background-pair { transition: none !important; }
.sienna-page .sienna-tvc-video video { object-fit: cover; }
.sienna-page .sienna-play-circle,
.sienna-page .sienna-play-icon,
.sienna-page .sienna-play-label {
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,.72,.22,1);
}
.sienna-page .sienna-play-label { opacity: 0; transform: translateY(10px); }
.sienna-page .sienna-tvc-hit {
  border: 0;
  cursor: pointer;
  background: transparent;
  transition: background .38s ease;
}
.sienna-page .sienna-tvc-hit:focus-visible {
  outline: 3px solid rgba(255,255,255,.95);
  outline-offset: -8px;
}
.sienna-page .content-layer.is-sienna-tvc-hover .sienna-tvc-hit { background: rgba(11,28,42,.38); }
.sienna-page .content-layer.is-sienna-tvc-hover .sienna-play-circle { transform: scale(1.08); }
.sienna-page .content-layer.is-sienna-tvc-hover .sienna-play-label { opacity: 1; transform: translateY(0); }
.sienna-page.edit-mode .sienna-tvc-hit { background: transparent !important; }
.sienna-page.edit-mode .sienna-play-label { opacity: 1; transform: none; }
.sienna-page .sienna-thanks-icon {
  border: 1px solid rgba(62,108,145,.12);
}
.sienna-page .sienna-thanks-icon::before,
.sienna-page .sienna-thanks-icon::after {
  content: "";
  position: absolute;
  left: 17px;
  bottom: 20px;
  width: 34px;
  height: 24px;
  border-left: 2px solid #47759a;
  border-top: 2px solid #47759a;
  transform: rotate(45deg) skew(-7deg,-7deg);
}
.sienna-page .sienna-thanks-icon::after {
  left: 32px;
  bottom: 20px;
  width: 20px;
  height: 15px;
  opacity: .56;
}
.sienna-page .sienna-thanks-arrow {
  border: 1px solid rgba(30,67,96,.45);
}
.sienna-page .sienna-back,
.sienna-page .sienna-next {
  border-radius: 999px;
  text-decoration: none;
}
.sienna-page .sienna-next {
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: 0 10px 28px rgba(23,55,85,.18);
}
.sienna-page:not(.edit-mode) .sienna-enter {
  opacity: 0;
  transform: translate3d(0,22px,0);
  transition: opacity .8s ease, transform .95s cubic-bezier(.22,.72,.22,1);
}
.sienna-page:not(.edit-mode) .sienna-enter-1,
.sienna-page:not(.edit-mode) .sienna-enter-2,
.sienna-page:not(.edit-mode) .sienna-enter-3,
.sienna-page:not(.edit-mode) .sienna-enter-4 { transform: translate3d(0,22px,0); }
.sienna-page:not(.edit-mode) .sienna-enter.is-inview {
  opacity: 1;
  transform: none;
}
.sienna-page:not(.edit-mode) .sienna-enter-2 { transition-delay: .05s; }
.sienna-page:not(.edit-mode) .sienna-enter-3 { transition-delay: .10s; }
.sienna-page:not(.edit-mode) .sienna-enter-4 { transition-delay: .15s; }
.sienna-page.edit-mode .sienna-enter,
.sienna-page.exporting .sienna-enter { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sienna-page .sienna-enter,
  .sienna-page .sienna-background-pair,
  .sienna-page .sienna-background-media img,
  .sienna-page .sienna-strategy-media img,
  .sienna-page .sienna-launch-media img,
  .sienna-page .sienna-tvc-frame img { transition: none !important; transform: none !important; scale: 1 !important; opacity: 1 !important; }
}

/* 2026 SIENNA case study -------------------------------------------------- */
.sienna26-page,
.sienna26-page .app,
.sienna26-page .about-canvas {
  background: #fbf6f0;
}

.sienna26-page .content-layer { pointer-events: none; }
.sienna26-page .editable-item,
.sienna26-page a,
.sienna26-page button { pointer-events: auto; }

.sienna26-page .media-slot,
.sienna26-analysis-card,
.sienna26-campaign-shell {
  box-shadow: none;
}

.sienna26-watermark { white-space: pre-line; }
.sienna26-word { white-space: nowrap; }

.sienna26-hero,
.sienna26-highlight-main,
.sienna26-detail,
.sienna26-tvc {
  transition:
    transform 560ms cubic-bezier(.2,.78,.2,1),
    filter 560ms ease,
    opacity 420ms ease,
    box-shadow 560ms ease;
}

body:not(.edit-mode) .sienna26-hero:hover,
body:not(.edit-mode) .sienna26-hero:focus-visible,
body:not(.edit-mode) .sienna26-highlight-main:hover,
body:not(.edit-mode) .sienna26-highlight-main:focus-visible,
body:not(.edit-mode) .sienna26-tvc:hover {
  transform: scale(1.025);
  box-shadow: 0 20px 48px rgba(86, 65, 50, .12);
}

.sienna26-highlight-main { transform-origin: center; }
.sienna26-page .content-layer[data-sienna26-focus="awd"] .sienna26-highlight-awd {
  z-index: 10 !important;
  transform: none;
}
.sienna26-page .content-layer[data-sienna26-focus="awd"] .sienna26-highlight-comfort {
  opacity: .62;
  filter: blur(2px) saturate(.78);
  transform: none;
}
.sienna26-page .content-layer[data-sienna26-focus="comfort"] .sienna26-highlight-comfort {
  z-index: 10 !important;
  left: 856px !important;
  width: 900px !important;
  transform: none;
}
.sienna26-page .content-layer[data-sienna26-focus="comfort"] .sienna26-highlight-awd {
  width: 666px !important;
  opacity: .62;
  filter: blur(2px) saturate(.78);
  transform: none;
}
.sienna26-page .content-layer[data-sienna26-focus="comfort"] .sienna26-highlight-label-comfort {
  left: 886px !important;
}
.sienna26-highlight-label-awd,
.sienna26-highlight-label-comfort {
  pointer-events: none !important;
}

.sienna26-highlight-main:focus-visible {
  outline: 3px solid rgba(23, 51, 75, .62);
  outline-offset: 6px;
}

.sienna26-detail-awd {
  opacity: 0;
  visibility: hidden;
}
.sienna26-page .content-layer[data-sienna26-active="awd"] .sienna26-detail-comfort {
  opacity: 0;
  visibility: hidden;
}
.sienna26-page .content-layer[data-sienna26-active="awd"] .sienna26-detail-awd,
.sienna26-detail-comfort {
  opacity: 1;
  visibility: visible;
  z-index: 8 !important;
}
.sienna26-detail-caption-awd {
  opacity: 0;
  visibility: hidden;
}
.sienna26-page .content-layer[data-sienna26-active="awd"] .sienna26-detail-caption-comfort {
  opacity: 0;
  visibility: hidden;
}
.sienna26-page .content-layer[data-sienna26-active="awd"] .sienna26-detail-caption-awd,
.sienna26-detail-caption-comfort {
  opacity: 1;
  visibility: visible;
}

.sienna26-detail-caption {
  padding-left: 14px;
  text-shadow: 0 2px 16px rgba(0,0,0,.48);
}

.sienna26-phone-screen {
  background: #fff;
  box-shadow: none !important;
}
.sienna26-phone-screen img {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: 50% 0 !important;
  transform: translateY(0);
  transform-origin: top center;
  animation: sienna26-phone-scroll 14s cubic-bezier(.48,.02,.52,.98) infinite;
}

@keyframes sienna26-phone-scroll {
  0%, 14% { transform: translateY(0); }
  86%, 100% { transform: translateY(calc(-100% + 720px)); }
}

.sienna26-page .manual-film-play {
  width: 98px;
  height: 98px;
  opacity: 0;
  border: 0;
  background: transparent;
  color: transparent;
}
.sienna26-tvc-play {
  display: grid;
  place-items: center;
  padding-left: 7px;
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: opacity .25s ease;
}
.sienna26-tvc-copy,
.sienna26-tvc-time { transition: opacity .25s ease; }
.sienna26-page .content-layer.is-sienna26-playing .sienna26-tvc-play,
.sienna26-page .content-layer.is-sienna26-playing .sienna26-tvc-copy,
.sienna26-page .content-layer.is-sienna26-playing .sienna26-tvc-time {
  opacity: 0;
}
.sienna26-footer-logo img {
  filter: brightness(0) contrast(1.2);
}

.sienna26-enter {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms ease,
    transform 850ms cubic-bezier(.2,.78,.2,1);
}
.sienna26-enter-1 { transition-delay: 0ms; }
.sienna26-enter-2 { transition-delay: 70ms; }
.sienna26-enter-3 { transition-delay: 140ms; }
.sienna26-enter-4 { transition-delay: 210ms; }
.sienna26-enter.is-inview {
  opacity: 1;
  transform: translateY(0);
}

body.edit-mode .sienna26-enter,
body.exporting .sienna26-enter {
  opacity: 1;
  transform: none;
  transition: none;
}
body.edit-mode .sienna26-phone-screen img,
body.exporting .sienna26-phone-screen img {
  animation: none;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .sienna26-enter {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .sienna26-phone-screen img { animation: none; }
  .sienna26-hero,
  .sienna26-analysis-card,
  .sienna26-highlight-main,
  .sienna26-detail,
  .sienna26-tvc { transition: none; }
}

/* Lingshang launch case */
.lingshang-page .about-canvas,
.lingshang-page .app { background: #f2f1f3; }
.lingshang-page .content-layer { pointer-events: none; }
.lingshang-page .editable-item,
.lingshang-page a,
.lingshang-page button { pointer-events: auto; }
.lingshang-page .lingshang-page-bg,
.lingshang-page .lingshang-concept-shell,
.lingshang-page .lingshang-weekend-shell,
.lingshang-page .lingshang-weekend-line,
.lingshang-page .lingshang-weekend-tick,
.lingshang-page .lingshang-brochure-shell { pointer-events: none; }
.lingshang-page.edit-mode .lingshang-word,
.lingshang-page.edit-mode .lingshang-weekend-word { pointer-events: auto; }
.lingshang-page .lingshang-word,
.lingshang-page .lingshang-section-en,
.lingshang-page .lingshang-weekend-word,
.lingshang-page .lingshang-weekend-en { font-family: "Inter Tight", "Arial Narrow", "Noto Sans SC", sans-serif; }
.lingshang-page .lingshang-hero,
.lingshang-page .lingshang-analysis-card,
.lingshang-page .lingshang-concept-shell { box-shadow: 0 18px 50px rgba(31, 27, 24, .075); }
.lingshang-page .lingshang-weekend-shell {
  background: transparent !important;
  border: 2px solid rgba(178, 157, 108, .7);
  box-shadow: none !important;
}
.lingshang-page .lingshang-brochure-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.lingshang-page .lingshang-analysis-icon,
.lingshang-page .lingshang-analysis-icon img,
.lingshang-page .lingshang-scroll-media,
.lingshang-page .lingshang-weekend-video,
.lingshang-page .lingshang-catalog { box-shadow: none; }
.lingshang-page .lingshang-analysis-icon img { object-fit: contain; }
.lingshang-page:not(.edit-mode) .lingshang-hero,
.lingshang-page:not(.edit-mode) .lingshang-catalog,
.lingshang-page:not(.edit-mode) .lingshang-analysis-card,
.lingshang-page:not(.edit-mode) .lingshang-analysis-icon,
.lingshang-page:not(.edit-mode) .lingshang-analysis-title,
.lingshang-page:not(.edit-mode) .lingshang-analysis-copy,
.lingshang-page:not(.edit-mode) .lingshang-weekend-label {
  transition: transform 440ms cubic-bezier(.2,.72,.2,1), box-shadow 440ms ease, filter 360ms ease;
  will-change: transform;
}
.lingshang-page:not(.edit-mode) .lingshang-hero:hover,
.lingshang-page:not(.edit-mode) .lingshang-hero:focus-visible {
  z-index: 12 !important;
  transform: translateY(-4px) scale(1.018);
  box-shadow: 0 26px 64px rgba(31, 27, 24, .14);
}
.lingshang-page:not(.edit-mode) .lingshang-catalog:hover,
.lingshang-page:not(.edit-mode) .lingshang-catalog:focus-visible {
  z-index: 12 !important;
  transform: translateY(-4px) scale(1.035);
  box-shadow: 0 18px 38px rgba(31, 27, 24, .14);
}
.lingshang-page:not(.edit-mode) .lingshang-analysis-card.is-analysis-hover {
  z-index: 8 !important;
  transform: translateY(-3px) scale(1.022);
  box-shadow: 0 22px 48px rgba(31, 27, 24, .13);
}
.lingshang-page:not(.edit-mode) .lingshang-analysis-icon.is-analysis-hover,
.lingshang-page:not(.edit-mode) .lingshang-analysis-title.is-analysis-hover,
.lingshang-page:not(.edit-mode) .lingshang-analysis-copy.is-analysis-hover {
  z-index: 9 !important;
  transform: translateY(-3px) scale(1.012);
}
.lingshang-page:not(.edit-mode) .lingshang-weekend-label:hover,
.lingshang-page:not(.edit-mode) .lingshang-weekend-label:focus-visible {
  z-index: 10 !important;
  transform: translateY(-2px) scale(1.07);
  color: #171717 !important;
}
.lingshang-page .lingshang-catalog-1,
.lingshang-page .lingshang-catalog-5 { transform-origin: left center; }
.lingshang-page .lingshang-catalog-4,
.lingshang-page .lingshang-catalog-8 { transform-origin: right center; }
.lingshang-page:not(.edit-mode) .lingshang-scroll-media { cursor: default; }
.lingshang-page .lingshang-scroll-media {
  overflow: hidden !important;
  isolation: isolate;
  clip-path: inset(0 round 20px);
  background: transparent !important;
}
.lingshang-page .lingshang-launch-long {
  border: 1px solid rgba(75, 68, 62, .14);
  border-radius: 24px !important;
  clip-path: inset(0 round 24px);
  background: #fff !important;
  box-shadow: 0 16px 34px rgba(31, 27, 24, .12) !important;
}
.lingshang-page:not(.edit-mode) .lingshang-scroll-media img {
  left: 50%;
  top: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: 50% 0;
  transform: translate(calc(-50% + var(--media-x, 0px)), calc(var(--media-y, 0px) + var(--lingshang-scroll-y, 0px))) rotate(var(--media-rotation, 0deg)) scale(var(--media-scale, 1));
  transform-origin: top center;
  will-change: transform;
}
.lingshang-page .lingshang-weekend-video {
  cursor: pointer;
  background: #0e0e0e;
  outline: 1px solid rgba(167, 147, 102, .25);
  outline-offset: -1px;
}
.lingshang-page:not(.edit-mode) .lingshang-weekend-video::after {
  content: "播放 / 暂停";
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 3;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(0,0,0,.58);
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 220ms ease, transform 320ms cubic-bezier(.2,.72,.2,1);
  pointer-events: none;
  white-space: nowrap;
}
.lingshang-page:not(.edit-mode) .lingshang-weekend-video:hover::after,
.lingshang-page:not(.edit-mode) .lingshang-weekend-video:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.lingshang-page .lingshang-weekend-video:focus-visible,
.lingshang-page .lingshang-catalog:focus-visible,
.lingshang-page .lingshang-hero:focus-visible,
.lingshang-page .lingshang-scroll-media:focus-visible {
  outline: 3px solid #8f7c54;
  outline-offset: 4px;
}
.lingshang-page .lingshang-enter {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 720ms ease, transform 760ms cubic-bezier(.2,.72,.2,1);
}
.lingshang-page .lingshang-hero.lingshang-enter { transform: translateY(22px) scale(.992); }
.lingshang-page .lingshang-analysis-delay-1 { transition-delay: 80ms; }
.lingshang-page .lingshang-analysis-delay-2 { transition-delay: 180ms; }
.lingshang-page .lingshang-analysis-delay-3 { transition-delay: 280ms; }
.lingshang-page .lingshang-weekend-label-1 { transition-delay: 60ms; }
.lingshang-page .lingshang-weekend-label-2 { transition-delay: 130ms; }
.lingshang-page .lingshang-weekend-label-3 { transition-delay: 200ms; }
.lingshang-page .lingshang-enter.is-inview,
.lingshang-page.edit-mode .lingshang-enter,
.lingshang-page.exporting .lingshang-enter,
body.exporting .lingshang-enter {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.lingshang-page:not(.edit-mode) .lingshang-enter.is-inview:hover,
.lingshang-page:not(.edit-mode) .lingshang-enter.is-inview:focus-visible { transition-delay: 0ms; }
.lingshang-page .lingshang-back,
.lingshang-page .lingshang-next { pointer-events: auto !important; }

body.exporting.lingshang-page .lingshang-scroll-media {
  --lingshang-scroll-y: 0px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  clip-path: inset(0 round 20px) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.exporting.lingshang-page .lingshang-scroll-media img {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: 50% 0 !important;
  animation: none !important;
  transition: none !important;
  border-radius: 0 !important;
  transform: none !important;
  transform-origin: top center !important;
}
body.exporting.lingshang-page .lingshang-launch-long {
  border: 1px solid rgba(75, 68, 62, .14) !important;
  border-radius: 24px !important;
  clip-path: inset(0 round 24px) !important;
  box-shadow: 0 13px 28px rgba(31, 27, 24, .10) !important;
}

@media (hover: none), (pointer: coarse) {
  .lingshang-page:not(.edit-mode) .lingshang-weekend-video::after { opacity: .8; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .lingshang-page .lingshang-enter,
  .lingshang-page .lingshang-hero,
  .lingshang-page .lingshang-catalog,
  .lingshang-page .lingshang-weekend-video::after { transition: none !important; }
  .lingshang-page .lingshang-enter { opacity: 1; transform: none; }
}

:root {
  color-scheme: light;
  font-synthesis: none;
  --stage-scale: 1;
  --stage-width: 1920px;
  --stage-height: 1080px;
  --ink: #080808;
  --outer: #ffffff;
  --paper: #ffffff;
  --gutter-desktop: 80px;
  --content-max: 1760px;
  --section-space: 140px;
  --heading-body-space: 28px;
  --body-media-space: 56px;
  --card-padding: 32px;
  --radius-large: 24px;
  --radius-small: 16px;
  --card-radius: var(--radius-small);
  --card-shadow: 0 12px 32px rgba(0, 0, 0, .06);
  --ease-standard: cubic-bezier(.22, 1, .36, 1);
  --ease-damped: var(--ease-standard);
  --motion-hover: 220ms;
  --motion-media-load: 180ms;
  --motion-enter: 480ms;
  --motion-page: 520ms;
  --motion-secondary-title: 1320ms;
  --motion-character: 420ms;
  --type-body: 17px;
  --type-small: 13px;
  --type-card-title: 22px;
  --type-section-title: 44px;
  --font-en: "Inter Tight", sans-serif;
  --font-zh: "Noto Sans SC", sans-serif;
  --intro-transition-ms: 600ms;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--outer);
  color: var(--ink);
  font-family: var(--font-zh);
}

:lang(en) { font-family: var(--font-en); }

button,
input,
textarea,
select { font: inherit; }

button { color: inherit; }

.app {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--outer);
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--intro-transition-ms) ease, transform var(--intro-transition-ms) cubic-bezier(.16, 1, .3, 1);
}

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #f7f6f4;
  opacity: 1;
  touch-action: none;
  transition: opacity var(--intro-transition-ms) ease;
}

.intro-frame {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: #f4f3f5;
  transform: scale(1);
  transform-origin: center;
  transition: transform var(--intro-transition-ms) cubic-bezier(.16, 1, .3, 1);
}

.intro-frame canvas,
.intro-frame .intro-video,
.intro-frame .intro-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-frame .intro-poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms linear, visibility 0s 180ms;
}

.intro-frame .intro-poster.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.intro-frame .intro-video {
  display: none;
  background: #f4f3f5;
}

html.intro-video-mode .intro-frame .intro-video {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

html.intro-video-mode .intro-frame canvas {
  display: block;
  position: relative;
  z-index: 1;
}

.intro-frame canvas {
  background: #f4f3f5 url("../assets/optimized-lossless/9434e21a60c7afce5480.webp") center / cover no-repeat;
}

.intro-frame canvas.is-ready { background: none; }

.intro-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 3.2%, 36px);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(20, 20, 20, .66);
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity 320ms ease, transform 320ms var(--ease-damped);
  pointer-events: none;
}

.intro-scroll-cue__mouse {
  position: relative;
  display: block;
  width: 20px;
  height: 30px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
}

.intro-scroll-cue__wheel {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 2px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
  animation: intro-wheel-hint 1.8s cubic-bezier(.25, .72, .3, 1) infinite;
}

.intro-scroll-cue__label {
  font-family: var(--font-zh);
  font-size: clamp(10px, .72vw, 12px);
  font-weight: 500;
  letter-spacing: .08em;
  white-space: nowrap;
}

.intro-overlay.has-progress:not(.is-final) .intro-scroll-cue {
  opacity: 0;
  transform: translate(-50%, 5px);
}

@keyframes intro-wheel-hint {
  0% { opacity: 0; transform: translate(-50%, 0); }
  22% { opacity: 1; }
  72%, 100% { opacity: 0; transform: translate(-50%, 9px); }
}

.intro-overlay[hidden],
html:not(.intro-active) .intro-overlay { display: none; }

html.intro-active,
html.intro-active body { overscroll-behavior: none; }

html.intro-active .app {
  opacity: 0;
  transform: scale(.995);
  pointer-events: none;
}

html.intro-active.intro-handoff .app {
  opacity: 1;
  transform: scale(1);
}

html.intro-active.intro-handoff .intro-overlay,
html.intro-active.intro-handoff .intro-frame {
  transition: none;
}

html.intro-active.intro-handoff .character-canvas {
  opacity: var(--intro-character-opacity, 0);
  transform: translate(var(--intro-character-x, -300px), var(--intro-character-y, -178px))
    scale(var(--intro-character-scale, 1.39));
  transform-origin: center;
}

html.intro-active.intro-handoff .content-layer {
  opacity: var(--intro-copy-opacity, 0);
  transform: translate3d(var(--intro-copy-x, 92px), var(--intro-copy-y, 8px), 0)
    scale(var(--intro-copy-scale, 1.06));
  transform-origin: 30% 50%;
  will-change: transform, opacity;
}

html.intro-active.intro-handoff .nav-card {
  animation: none;
  transition: none !important;
  will-change: transform, opacity;
}

html.intro-active.intro-handoff .nav-card:nth-child(1) {
  opacity: var(--intro-card-1-opacity, 0);
  transform: translate3d(var(--intro-card-1-x, 176px), var(--intro-card-1-y, 96px), 0)
    scale(var(--intro-card-1-scale, 1.08));
}

html.intro-active.intro-handoff .nav-card:nth-child(2) {
  opacity: var(--intro-card-2-opacity, 0);
  transform: translate3d(var(--intro-card-2-x, 145px), var(--intro-card-2-y, -142px), 0)
    scale(var(--intro-card-2-scale, 1.08));
}

html.intro-active.intro-handoff .nav-card:nth-child(3) {
  opacity: var(--intro-card-3-opacity, 0);
  transform: translate3d(var(--intro-card-3-x, -330px), var(--intro-card-3-y, 72px), 0)
    scale(var(--intro-card-3-scale, 1.08));
}

html.intro-active.intro-handoff .nav-card:nth-child(4) {
  opacity: var(--intro-card-4-opacity, 0);
  transform: translate3d(var(--intro-card-4-x, -350px), var(--intro-card-4-y, -132px), 0)
    scale(var(--intro-card-4-scale, 1.08));
}

html.intro-active .edit-toggle { pointer-events: none; opacity: 0; }

html.intro-active.intro-leaving .intro-overlay {
  opacity: 0;
  pointer-events: none;
}

html.intro-active.intro-leaving .intro-frame { transform: scale(1.007); }

html.intro-active.intro-leaving .app {
  opacity: 1;
  transform: scale(1);
}

html.intro-active.intro-entering-from-home .intro-overlay {
  opacity: 0;
  pointer-events: none;
}

html.intro-active.intro-entering-from-home .app {
  opacity: 1;
  transform: scale(1);
}

.export-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: var(--outer);
  transform: translate(-50%, -50%) scale(var(--stage-scale));
  transform-origin: center;
  isolation: isolate;
}

.about-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: var(--paper);
  contain: layout paint style;
}

.content-layer,
.card-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.character-canvas {
  position: absolute;
  left: -48px;
  top: 0;
  z-index: 6;
  display: block;
  width: 1672px;
  height: 941px;
  pointer-events: none;
  background: url("../assets/about/character/idle/frame-000.webp") center / 100% 100% no-repeat;
}

.character-canvas.is-ready { background: none; }

.editable-item {
  position: absolute;
  min-width: 1px;
  min-height: 1px;
}

.editable-text {
  margin: 0;
  white-space: pre-wrap;
  overflow: hidden;
  color: var(--ink);
}

.about-word {
  overflow: visible;
  white-space: nowrap;
  user-select: none;
  transform: scaleY(.94);
  transform-origin: left bottom;
}

.all-word {
  overflow: visible;
  white-space: nowrap;
  user-select: none;
}

.stat-card,
.cta-card,
.nav-card {
  pointer-events: auto;
  border: 1px solid rgba(35, 28, 27, 0.08);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition:
    transform 310ms var(--ease-damped),
    box-shadow 310ms var(--ease-damped),
    opacity 260ms ease,
    filter 260ms ease;
  will-change: transform, translate;
}

.nav-card {
  --about-float-y: -6px;
  animation: about-card-breathe 7.6s cubic-bezier(.37, 0, .3, 1) infinite alternate;
}

.nav-card:nth-child(2) { --about-float-y: 5px; animation-duration: 8.7s; animation-delay: -3.1s; }
.nav-card:nth-child(3) { --about-float-y: -5px; animation-duration: 6.9s; animation-delay: -5.4s; }
.nav-card:nth-child(4) { --about-float-y: 6px; animation-duration: 9.1s; animation-delay: -1.8s; }

.stat-card,
.cta-card {
  --about-float-y: -4px;
  animation: about-card-breathe 8.6s cubic-bezier(.37, 0, .3, 1) infinite alternate;
}

.stat-card[data-element-id="projects"] { --about-float-y: 4px; animation-duration: 9.3s; animation-delay: -4.6s; }
.cta-card { --about-float-y: 3px; animation-duration: 8.1s; animation-delay: -2.3s; }

[data-element-id="about-word"],
[data-element-id="all-word"] {
  animation: about-title-breathe 22s ease-in-out infinite alternate;
}

[data-element-id="all-word"] { animation-delay: -10s; }

[data-element-id="person-name"],
[data-element-id="person-role"],
[data-element-id="person-intro"] {
  animation: about-copy-breathe 17s ease-in-out -6s infinite alternate;
}

@keyframes about-card-breathe {
  from { translate: 0 0; }
  to { translate: 0 var(--about-float-y); }
}

@keyframes about-title-breathe {
  from { translate: 0 0; }
  to { translate: 0 -2px; }
}

@keyframes about-copy-breathe {
  from { translate: 0 0; }
  to { translate: 0 -2px; }
}

.card-accent {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--accent-width, 96px);
  height: 36px;
  border-radius: var(--card-radius) 0 0 0;
  background: var(--card-accent, #999);
  opacity: .78;
}

.stat-card,
.cta-card {
  background: rgba(255, 255, 255, 0.69);
}

.nav-card {
  display: block;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.93);
}

.nav-card:hover,
.nav-card:focus-visible,
.stat-card:hover,
.stat-card:focus-visible,
.cta-card:hover,
.cta-card:focus-visible {
  z-index: 20 !important;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 18px 38px rgba(45, 34, 31, 0.14);
  outline: none;
}

.nav-card:hover,
.nav-card:focus-visible,
.stat-card:hover,
.stat-card:focus-visible,
.cta-card:hover,
.cta-card:focus-visible,
.nav-card.is-auto-focused,
.stat-card.is-support-focused,
.cta-card.is-support-focused {
  animation-play-state: paused;
}

.about-canvas.is-main-group-cued .nav-card {
  transform: translateY(-3px) scale(1.025);
  box-shadow: 0 19px 40px rgba(45, 34, 31, .16);
}

.nav-card.is-auto-focused {
  z-index: 20 !important;
  transform: translateY(-7px) scale(1.07);
  box-shadow:
    0 0 0 2px var(--card-prompt-color, #2f7bff),
    0 26px 54px rgba(34, 30, 29, .22);
}

.about-canvas.is-main-group-cued .nav-card,
.nav-card.is-auto-focused,
.about-canvas.is-support-group-cued .stat-card,
.about-canvas.is-support-group-cued .cta-card {
  transition-duration: 300ms;
}

.about-canvas.is-support-group-cued .stat-card,
.about-canvas.is-support-group-cued .cta-card {
  box-shadow: 0 14px 31px rgba(45, 34, 31, .115);
}

.stat-card.is-support-focused,
.cta-card.is-support-focused {
  z-index: 19 !important;
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 20px 42px rgba(45, 34, 31, .17);
}

.card-layer:has(.nav-card.is-auto-focused) .nav-card:not(.is-auto-focused) {
  opacity: .56;
  filter: saturate(.72);
}

.about-canvas.is-support-group-cued .stat-card:not(.is-support-focused),
.about-canvas.is-support-group-cued .cta-card:not(.is-support-focused) {
  opacity: .82;
}

.card-layer:has(.nav-card:hover) .nav-card:not(:hover),
.card-layer:has(.nav-card:focus-visible) .nav-card:not(:focus-visible) {
  opacity: 0.74;
  filter: saturate(0.82);
}

.media-slot {
  position: absolute;
  overflow: hidden;
  border-radius: 15px;
  background: #e7e3e1;
  box-shadow: 0 7px 16px rgba(41, 34, 32, 0.13);
}

.media-slot img,
.media-slot video {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: translate(calc(-50% + var(--media-x, 0px)), calc(-50% + var(--media-y, 0px))) rotate(var(--media-rotation, 0deg)) scale(var(--media-scale, 1));
  transform-origin: center;
  object-fit: var(--object-fit, cover);
  object-position: var(--object-position, 50% 50%);
  pointer-events: none;
}

.media-slot.is-cropping {
  z-index: 80 !important;
  box-shadow: 0 0 0 2px #7657ff, 0 12px 30px rgba(58, 39, 139, .20);
  cursor: grab !important;
}

.media-slot.is-cropping::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px dashed rgba(255, 255, 255, .92);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(30, 20, 70, .20);
  pointer-events: none;
}

body.media-crop-dragging .media-slot.is-cropping { cursor: grabbing !important; }

.cta-card { display: block; color: inherit; text-decoration: none; }

.main-click-label {
  position: absolute;
  left: 50%;
  top: calc(100% + 11px);
  z-index: 35;
  padding: 8px 13px 9px;
  border: 2px solid var(--card-prompt-color, #2f7bff);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 25px rgba(35, 28, 27, .14);
  color: #111;
  font-family: var(--font-zh);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  opacity: 0;
  transform: translate(-50%, -5px) scale(.96);
  transition: opacity 240ms ease, transform 360ms var(--ease-damped);
  white-space: nowrap;
  pointer-events: none;
}

.nav-card.is-auto-focused .main-click-label,
.nav-card:hover .main-click-label,
.nav-card:focus-visible .main-click-label {
  opacity: 1 !important;
  transform: translate(-50%, 0) scale(1) !important;
}

.aux-click-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 30;
  padding: 7px 11px 8px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 22px rgba(35, 28, 27, .10);
  color: #171515;
  font-family: var(--font-zh);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  opacity: 0;
  transform: translate(-50%, 5px);
  transition: opacity 220ms ease, transform 300ms var(--ease-damped);
  white-space: nowrap;
  pointer-events: none;
}

.stat-card:hover .aux-click-label,
.stat-card:focus-visible .aux-click-label,
.cta-card:hover .aux-click-label,
.cta-card:focus-visible .aux-click-label,
.stat-card.is-support-focused .aux-click-label,
.cta-card.is-support-focused .aux-click-label {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

.stat-card__arrow,
.cta-arrow {
  transition: transform 300ms var(--ease-damped);
}

.stat-card:hover .stat-card__arrow,
.stat-card:focus-visible .stat-card__arrow {
  transform: translate(2px, -2px);
}

.cta-card:hover .cta-arrow,
.cta-card:focus-visible .cta-arrow {
  transform: translateX(3px);
}

.cta-avatar-ripple {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(47, 123, 255, 0);
  transition: box-shadow 220ms ease;
  pointer-events: none;
}

.cta-card:hover .cta-avatar-ripple,
.cta-card:focus-visible .cta-avatar-ripple,
.cta-card.is-support-focused .cta-avatar-ripple {
  box-shadow: 0 0 0 2px rgba(47, 123, 255, .82), 0 0 14px rgba(47, 123, 255, .16);
}

.cta-avatar-ripple::before,
.cta-avatar-ripple::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2.5px solid #2f7bff;
  border-radius: inherit;
  opacity: 0;
  box-shadow: 0 0 12px rgba(47, 123, 255, .18);
}

.cta-avatar-ripple::after { animation-delay: .62s !important; }

.cta-card:hover .cta-avatar-ripple::before,
.cta-card:hover .cta-avatar-ripple::after,
.cta-card:focus-visible .cta-avatar-ripple::before,
.cta-card:focus-visible .cta-avatar-ripple::after,
.cta-card.is-support-focused .cta-avatar-ripple::before,
.cta-card.is-support-focused .cta-avatar-ripple::after {
  animation: cta-avatar-ripple 1.75s cubic-bezier(.18, .66, .25, 1) infinite;
}

@keyframes cta-avatar-ripple {
  0% { opacity: .78; transform: scale(.94); }
  72%, 100% { opacity: 0; transform: scale(1.88); }
}

.cta-card .media-slot {
  border-radius: 50%;
  box-shadow: none;
}

.cta-arrow {
  border-radius: 50%;
  background: #070707;
  color: #fff;
}

.nav-card .editable-item,
.stat-card .editable-item,
.cta-card .editable-item { pointer-events: none; }

.loading-status {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 50;
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 24px rgba(30, 20, 18, 0.08);
  font-size: 12px;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.edit-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1100;
  min-width: 58px;
  height: 34px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 8px 24px rgba(30, 20, 18, .10);
  color: #171515;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  opacity: .46;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.edit-toggle:hover,
.edit-toggle:focus-visible { opacity: 1; transform: translateY(-2px); }
.edit-toggle[hidden] { display: none; }
.edit-toggle.is-offline-entry {
  min-width: 112px;
  border-style: dashed;
  opacity: .72;
}

.app[aria-busy="true"] .loading-status {
  opacity: 1;
  transform: translateY(0);
}

.editor {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .13);
  border-radius: 18px;
  background: rgba(251, 250, 249, .96);
  box-shadow: 0 24px 60px rgba(20, 16, 15, .18);
  color: #151313;
  backdrop-filter: blur(16px);
  font-family: var(--font-en), var(--font-zh);
}

.editor__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  background: rgba(251, 250, 249, .94);
  letter-spacing: .12em;
  cursor: grab;
  user-select: none;
}

.editor__header:active { cursor: grabbing; }

.editor__window-actions { display: flex; gap: 6px; }

.editor__header button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #e7e2e0;
  cursor: pointer;
}

.editor__body {
  max-height: calc(100vh - 78px);
  overflow: auto;
}

.editor--collapsed .editor__body { display: none; }
.editor-background-title { margin: 10px 12px 14px; }
.editor-background-title[hidden] { display: none; }
.editor--collapsed { width: 190px; }
.editor--collapsed .editor__header { border-bottom: 0; }

.editor--collapsed [data-action="collapse-editor"] {
  background: #171515;
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

.editor__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 12px 12px 0;
}

.editor__actions button,
.property-form button {
  min-height: 34px;
  border: 1px solid rgba(0, 0, 0, .11);
  border-radius: 9px;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
}

.editor__actions button:hover,
.property-form button:hover { background: #eeeae8; }

.editor__actions button:disabled,
.property-form button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.editor__actions button.is-confirmed {
  color: #fff;
  background: #111;
}

.editor__actions .editor__delete-text:not(:disabled) {
  border-color: rgba(191, 47, 66, .3);
  color: #a8273b;
}

.editor__actions .editor__delete-text:not(:disabled):hover {
  border-color: #bf2f42;
  background: #bf2f42;
  color: #fff;
}

.custom-text { overflow: visible; }

.custom-decoration {
  min-width: 1px;
  min-height: 1px;
  overflow: visible;
  pointer-events: auto;
}

.custom-png {
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
body:not(.edit-mode) .custom-png { pointer-events: none !important; }
/* Added layers never change reserved-case navigation or occupy layout space. */
.case-placeholder-stage { position: relative; }
.placeholder-edit-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.placeholder-edit-canvas .canvas-element { pointer-events: auto; }
body.edit-mode .placeholder-edit-canvas { pointer-events: auto; }
.editor__actions .editor__add-png { border-color: #171515; background: #f2f2f2; color: #171515; }
.editor__png-hint { margin: 10px 12px 0; color: #666; font-size: 11px; line-height: 1.6; }

.property-opacity > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.property-opacity output { font: 600 10px/1 var(--font-en); }
.property-opacity input { min-height: 28px; padding: 0; accent-color: #171515; }

.property-rotation-control > span {
  display: block;
  margin-bottom: 7px;
  font: 600 10px/1.2 var(--font-en);
  letter-spacing: .04em;
}

.property-rotation-control > div {
  display: grid;
  grid-template-columns: 1fr 58px 1fr 1fr;
  gap: 6px;
  align-items: center;
}

.property-rotation-control button,
.property-rotation-control output {
  min-height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(27,24,23,.12);
  border-radius: 9px;
  background: #fff;
  color: #171515;
  font: 600 11px/1 var(--font-en);
}

.property-rotation-control button { cursor: pointer; }
.property-rotation-control button:hover { background: #eeeae8; }

.editor__actions .editor__delete-element:not(:disabled) {
  border-color: rgba(191, 47, 66, .3);
  color: #a8273b;
}

.editor__actions .editor__delete-element:not(:disabled):hover {
  border-color: #bf2f42;
  background: #bf2f42;
  color: #fff;
}

.editor__actions .editor__publish-button {
  grid-column: span 2;
  border-color: #111;
  background: #171515;
  color: #fff;
  font-weight: 600;
}

.editor__actions .editor__publish-button:hover { background: #2a2726; }
.editor__actions .editor__publish-button.is-saving { opacity: .72; }
.editor__actions .editor__publish-button.is-saved { border-color: #18844b; background: #18844b; }
.editor__actions .editor__publish-button.is-error { border-color: #bf2f42; background: #bf2f42; }

.editor-publish-status {
  margin: 9px 13px 0;
  color: #716b68;
  font-size: 10px;
  line-height: 1.4;
}

.editor-publish-status[data-state="saving"],
.editor-publish-status[data-state="pending"] { color: #6b56d9; }
.editor-publish-status[data-state="saved"] { color: #18844b; }
.editor-publish-status[data-state="error"] { color: #bf2f42; }

.editor__hint {
  margin: 10px 13px 0;
  color: #6d6765;
  font-size: 11px;
  line-height: 1.5;
}

.editor-snap-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 10px 12px 0;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 11px;
  background: rgba(255, 255, 255, .64);
}

.editor-snap-controls legend {
  padding: 0 5px;
  color: #5b5553;
  font-size: 10px;
  letter-spacing: .06em;
}

.editor-snap-controls label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 8px;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
}

.editor-snap-controls input { accent-color: #4f73ff; }

.editor-snap-controls small {
  grid-column: 1 / -1;
  color: #77706d;
  font-size: 10px;
  line-height: 1.45;
}

.editor-history {
  margin: 10px 12px 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 11px;
  background: rgba(255, 255, 255, .66);
}

.editor-history__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.editor-history__header strong {
  font-size: 11px;
  letter-spacing: .04em;
}

.editor-history__header span {
  color: #77706d;
  font-size: 9px;
}

.editor-history__list {
  max-height: 142px;
  margin: 0;
  padding: 5px;
  overflow-y: auto;
  list-style: none;
}

.editor-history__list li { margin: 0; }

.editor-history__list button {
  display: grid;
  grid-template-columns: 28px 1fr 8px;
  align-items: center;
  width: 100%;
  min-height: 30px;
  padding: 3px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #4d4846;
  text-align: left;
  cursor: pointer;
}

.editor-history__list button::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}

.editor-history__list button:hover { background: #eeeae8; }

.editor-history__list button.is-current {
  background: #171515;
  color: #fff;
}

.editor-history__list button.is-current::after { background: #d9ff4a; }

.editor-history__list button span {
  opacity: .48;
  font: 500 9px/1 var(--font-en);
}

.editor-history__list button strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 13px;
}

.property-form__empty {
  grid-column: 1 / -1;
  margin: 14px 0;
  text-align: center;
  color: #77706d;
  font-size: 12px;
}

.property-form__title {
  grid-column: 1 / -1;
  margin: 2px 0 4px;
  font-size: 13px;
}

.property-field {
  display: grid;
  gap: 4px;
  color: #5b5553;
  font-size: 10px;
}

.property-field--full { grid-column: 1 / -1; }

.property-field input,
.property-field textarea,
.property-field select {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 8px;
  background: #fff;
  color: #171515;
  padding: 7px 8px;
  font-size: 12px;
}

.property-field textarea {
  min-height: 76px;
  resize: vertical;
}

.property-form__media {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.property-scale-control {
  display: grid;
  grid-column: 1 / -1;
  gap: 7px;
  color: #5b5553;
  font-size: 10px;
}

.property-scale-control > div {
  display: grid;
  grid-template-columns: 1fr 76px 1fr;
  gap: 7px;
}

.property-scale-control button { font-weight: 600; }

.property-scale-control output {
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 9px;
  background: #171515;
  color: #fff;
  font: 600 12px/1 var(--font-en);
  letter-spacing: .04em;
}

.property-crop-control {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, .11);
  border-radius: 11px;
  background: rgba(255, 255, 255, .72);
  color: #5b5553;
  font-size: 10px;
}

.property-media-fit {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, .11);
  border-radius: 11px;
  background: rgba(255, 255, 255, .72);
  color: #5b5553;
  font-size: 10px;
}

.property-media-fit > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.property-media-fit button.is-active {
  border-color: #171515;
  background: #171515;
  color: #fff;
}

.property-media-fit p {
  margin: 0;
  color: #716b68;
  line-height: 1.45;
}

.property-crop-control.is-active {
  border-color: rgba(118, 87, 255, .52);
  background: rgba(118, 87, 255, .07);
}

.property-crop-control__readout {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 7px;
}

.property-crop-control__readout output {
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: 8px;
  background: #171515;
  color: #fff;
  font: 600 11px/1 var(--font-en);
}

.property-crop-control p {
  margin: 0;
  color: #716b68;
  line-height: 1.45;
}

.property-crop-control__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.property-crop-control.is-active .property-crop-control__actions button:first-child {
  border-color: #7657ff;
  background: #7657ff;
  color: #fff;
}

body.edit-mode .editable-item:not([data-locked="true"]),
body.edit-mode .nav-card,
body.edit-mode .stat-card,
body.edit-mode .cta-card,
body.edit-mode .media-slot {
  cursor: move;
}

body.edit-mode .content-layer,
body.edit-mode .card-layer,
body.edit-mode .nav-card .editable-item,
body.edit-mode .stat-card .editable-item,
body.edit-mode .cta-card .editable-item {
  pointer-events: auto;
}

body.edit-mode .nav-card:hover,
body.edit-mode .nav-card:focus-visible,
body.edit-mode .stat-card:hover,
body.edit-mode .cta-card:hover {
  transform: none;
}

body.edit-mode .nav-card,
body.edit-mode .stat-card,
body.edit-mode .cta-card,
body.edit-mode [data-element-id="about-word"],
body.edit-mode [data-element-id="all-word"],
body.edit-mode [data-element-id="person-name"],
body.edit-mode [data-element-id="person-role"],
body.edit-mode [data-element-id="person-intro"] {
  animation: none !important;
  translate: none !important;
}

body.edit-mode .aux-click-label,
body.edit-mode .main-click-label,
body.edit-mode .cta-avatar-ripple { display: none; }

.selection-box {
  position: fixed;
  z-index: 900;
  border: 1.5px solid #4f73ff;
  pointer-events: none;
}

.selection-box--multi {
  border: 1.5px solid #7657ff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.86), 0 0 0 4px rgba(118,87,255,.12);
}

.selection-box--multi::before {
  content: attr(data-selection-count) " 个图层";
  position: absolute;
  left: -1px;
  top: -30px;
  padding: 6px 9px;
  border-radius: 7px;
  background: #7657ff;
  color: #fff;
  font: 600 11px/1 var(--font-zh);
  white-space: nowrap;
}

body.edit-mode .editor-multi-selected {
  outline: 1.5px solid rgba(118, 87, 255, .72) !important;
  outline-offset: 2px;
}

.selection-marquee {
  position: fixed;
  z-index: 905;
  border: 1px solid #7657ff;
  background: rgba(118, 87, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  pointer-events: none;
}

.selection-marquee[hidden] { display: none; }

.selection-box--crop {
  border: 2px solid #7657ff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .85), 0 0 0 4px rgba(118, 87, 255, .13);
}

.scale-indicator {
  position: fixed;
  z-index: 910;
  min-width: 54px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(21, 21, 21, .92);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
  color: #fff;
  font: 600 11px/1 var(--font-en);
  letter-spacing: .04em;
  text-align: center;
  transform: translate(-50%, -100%);
  pointer-events: none;
}

.scale-indicator[hidden] { display: none; }

.crop-indicator {
  position: fixed;
  z-index: 920;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(73, 49, 177, .94);
  box-shadow: 0 9px 24px rgba(49, 31, 128, .24);
  color: #fff;
  font: 600 11px/1 var(--font-en), var(--font-zh);
  letter-spacing: .03em;
  transform: translateX(-50%);
  pointer-events: none;
}

.crop-indicator[hidden] { display: none; }

.selection-box__handle {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 3px;
  background: #4f73ff;
  box-shadow: 0 1px 4px rgba(0,0,0,.24);
  pointer-events: auto;
  cursor: nwse-resize;
}

.selection-box__type-handle {
  position: absolute;
  right: -13px;
  top: -13px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #151515;
  box-shadow: 0 2px 7px rgba(0,0,0,.25);
  color: #fff;
  font: 600 11px/1 var(--font-en);
  pointer-events: auto;
  cursor: nesw-resize;
}

.alignment-guide {
  position: fixed;
  z-index: 899;
  background: #ff4f8a;
  pointer-events: none;
}

.alignment-guide--x { width: 1px; height: 100vh; top: 0; }
.alignment-guide--y { height: 1px; width: 100vw; left: 0; }

.alignment-guide::after {
  content: attr(data-guide-label);
  position: absolute;
  padding: 5px 8px;
  border-radius: 999px;
  background: #ff4f8a;
  color: #fff;
  font: 600 10px/1 var(--font-zh);
  letter-spacing: .03em;
  white-space: nowrap;
}

.alignment-guide--x::after { left: 6px; top: 12px; }
.alignment-guide--y::after { left: 12px; top: 6px; }

body.exporting .editor,
body.exporting .selection-box,
body.exporting .selection-marquee,
body.exporting .scale-indicator,
body.exporting .crop-indicator,
body.exporting .alignment-guide,
body.exporting .loading-status,
body.exporting .edit-toggle { display: none !important; }

body.exporting .editor-multi-selected { outline: 0 !important; }

body.exporting .nav-card,
body.exporting .stat-card,
body.exporting .cta-card {
  animation: none !important;
  translate: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}

body.exporting.export-render-clone .nav-card,
body.exporting.export-render-clone .stat-card,
body.exporting.export-render-clone .cta-card,
body.exporting.export-render-clone .media-slot,
body.exporting.export-render-clone .lingshang-analysis-card,
body.exporting.export-render-clone .lingshang-scroll-media {
  box-shadow: none !important;
  filter: none !important;
  will-change: auto !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}

body.exporting [data-element-id="about-word"],
body.exporting [data-element-id="all-word"],
body.exporting [data-element-id="person-name"],
body.exporting [data-element-id="person-role"],
body.exporting [data-element-id="person-intro"] {
  animation: none !important;
  translate: none !important;
}

body.exporting .aux-click-label,
body.exporting .main-click-label,
body.exporting .cta-avatar-ripple { display: none !important; }

body.exporting .media-slot.is-cropping { box-shadow: 0 7px 16px rgba(41, 34, 32, 0.13); }
body.exporting .media-slot.is-cropping::after { display: none !important; }

.secondary-page .about-canvas { background: var(--paper); }

.secondary-word {
  overflow: visible;
  white-space: nowrap;
  user-select: none;
}

.secondary-kicker {
  text-transform: uppercase;
}

.secondary-back {
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,0,0,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--card-shadow);
  pointer-events: auto;
}

.contact-page .about-canvas { background: #fff; }
.contact-page .content-layer { pointer-events: auto; }

.contact-word {
  overflow: visible;
  font-family: var(--font-en);
  white-space: nowrap;
  user-select: none;
  animation: contact-title-in 900ms var(--ease-damped) both;
}

.contact-name,
.contact-role,
.contact-intro,
.contact-slogan {
  animation: contact-copy-in 760ms 100ms var(--ease-damped) both;
}

.contact-panel {
  border: 1px solid rgba(8, 8, 8, .06);
  box-shadow: 0 24px 68px rgba(38, 29, 27, .11);
  backdrop-filter: blur(15px);
  animation: contact-panel-in 900ms 80ms var(--ease-damped) both;
}

.contact-page:not(.edit-mode) .contact-panel,
.contact-page:not(.edit-mode) .contact-line,
.contact-page:not(.edit-mode) .contact-panel-divider,
.contact-page:not(.edit-mode) .contact-divider {
  pointer-events: none;
}

.contact-method-icon {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: #fff;
  line-height: 1;
}

.contact-method-icon svg {
  display: block;
  width: 32px;
  height: 32px;
}

.contact-method-label {
  display: flex;
  align-items: center;
}

.contact-method-value {
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms ease, transform 280ms var(--ease-damped);
}

.contact-method-value:hover,
.contact-method-value:focus-visible {
  color: #2f67e8;
  transform: translateX(5px);
  outline: none;
}

.contact-method-value:focus-visible { box-shadow: 0 2px 0 #2f67e8; }

.contact-method-arrow {
  display: grid;
  place-items: center;
  pointer-events: none;
}

.contact-avatar {
  border: 1px solid rgba(8, 8, 8, .2);
  background: #fff;
  box-shadow: none;
  transform-origin: center;
  animation: contact-avatar-in 760ms 180ms var(--ease-damped) both;
  will-change: transform, opacity;
}

.contact-qr {
  background: #fff;
  box-shadow: 0 12px 32px rgba(40, 31, 29, .09);
}

.contact-qr img { image-rendering: auto; }

.contact-copy-feedback {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 1200;
  padding: 11px 17px;
  border-radius: 999px;
  background: rgba(16, 16, 16, .92);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 180ms ease, transform 320ms var(--ease-damped);
  pointer-events: none;
}

.contact-copy-feedback.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

body.edit-mode .contact-word,
body.edit-mode .contact-name,
body.edit-mode .contact-role,
body.edit-mode .contact-intro,
body.edit-mode .contact-slogan,
body.edit-mode .contact-avatar,
body.edit-mode .contact-panel {
  animation: none !important;
}

@keyframes contact-title-in {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes contact-copy-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes contact-avatar-in {
  from { opacity: 0; transform: translateY(16px) scale(.88); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes contact-panel-in {
  from { opacity: 0; transform: translateY(28px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.projects-page .about-canvas { background: #fff; }

@property --projects-title-crop {
  syntax: "<length>";
  inherits: true;
  initial-value: 53px;
}

@property --projects-body-shift {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --projects-title-y {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --projects-title-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.projects-page .content-layer {
  --projects-title-crop: 53px;
  --projects-body-shift: 0px;
  --projects-title-y: 0px;
  --projects-title-opacity: 1;
  pointer-events: auto;
  animation: projects-scene-sync 1320ms var(--ease-damped) both;
}

.projects-word {
  overflow: visible;
  font-family: var(--font-en);
  white-space: nowrap;
  user-select: none;
  scale: .96 1;
  opacity: var(--projects-title-opacity);
  clip-path: inset(0 0 var(--projects-title-crop) 0);
  transform: translateY(var(--projects-title-y));
  transform-origin: left top;
  will-change: transform, opacity, clip-path;
}

.projects-content-sync-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  translate: 0 var(--projects-body-shift);
  will-change: translate;
}

.projects-copy-in,
.projects-category {
  animation: projects-copy-in 760ms 100ms var(--ease-damped) backwards;
}

.projects-category {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: visible;
  z-index: 2 !important;
  transform-origin: left center;
  transition:
    opacity 260ms ease,
    filter 280ms ease,
    transform 300ms var(--ease-damped);
}

.projects-category::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--projects-category-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--projects-category-color) 13%, transparent);
}

.projects-category--auto { --projects-category-color: #f477a7; }
.projects-category--consumer { --projects-category-color: #9bca56; }
.projects-category--other { --projects-category-color: #ab9ae1; }

.projects-content-sync-layer:has([data-element-id="projects-logo-auto-1"]:is(:hover, :focus-visible)) .projects-category--auto,
.projects-content-sync-layer:has([data-element-id="projects-logo-consumer-1"]:is(:hover, :focus-visible)) .projects-category--consumer,
.projects-content-sync-layer:has([data-element-id="projects-logo-other-1"]:is(:hover, :focus-visible)) .projects-category--other {
  opacity: .45;
  filter: blur(1.25px);
  transform: translateX(-2px) scale(.985);
}

.projects-client-card {
  border: 1px solid rgba(35, 28, 27, .06);
  background: #fff;
  box-shadow: 0 10px 28px rgba(45, 34, 31, .075);
  opacity: 1;
  pointer-events: auto;
  animation: projects-logo-in 680ms var(--projects-logo-delay, 160ms) ease backwards;
  transition:
    transform 320ms var(--ease-damped),
    box-shadow 320ms var(--ease-damped),
    opacity 260ms ease,
    filter 280ms ease;
  will-change: transform, opacity, filter;
}

.projects-client-card--row-1 { --projects-logo-delay: 170ms; }
.projects-client-card--row-2 { --projects-logo-delay: 250ms; }
.projects-client-card--row-3 { --projects-logo-delay: 330ms; }
.projects-client-card--auto { --projects-focus-color: #f477a7; }
.projects-client-card--consumer { --projects-focus-color: #9bca56; }
.projects-client-card--other { --projects-focus-color: #ab9ae1; }

.projects-client-card img {
  scale: 1;
  transition: scale 360ms var(--ease-damped);
}

.projects-client-card:hover,
.projects-client-card:focus-visible {
  z-index: 20 !important;
  transform: translateY(-3px) scale(1.055);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--projects-focus-color) 18%, transparent),
    0 20px 46px rgba(45, 34, 31, .16);
  filter: none;
  outline: 2px solid var(--projects-focus-color);
  outline-offset: 3px;
}

.projects-client-card:hover img,
.projects-client-card:focus-visible img { scale: 1.025; }

.projects-page .content-layer:has(.projects-client-card:hover) .projects-client-card:not(:hover),
.projects-page .content-layer:has(.projects-client-card:focus-visible) .projects-client-card:not(:focus-visible) {
  opacity: .34;
  filter: grayscale(.2) blur(1.15px);
  transform: scale(.985);
}

.projects-info-card {
  --projects-symbol: "✦";
  display: block;
  padding: 0;
  border: 1px solid rgba(48, 35, 60, .05);
  box-shadow: 0 10px 30px rgba(45, 34, 31, .065);
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  animation: projects-card-in 720ms 250ms ease backwards;
  transition: transform 300ms var(--ease-damped), box-shadow 300ms var(--ease-damped);
}

.projects-info-card::before {
  content: var(--projects-symbol);
  position: absolute;
  left: 17px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #080808;
  color: #fff;
  font: 700 18px/1 var(--font-zh);
}

.projects-info-card::after {
  content: "↗";
  position: absolute;
  right: 18px;
  top: 17px;
  color: #171515;
  font: 400 21px/1 var(--font-en);
}

.projects-wide-card::before {
  left: 20px;
  top: 20px;
  width: 54px;
  height: 54px;
  font-size: 22px;
}

.projects-info-card--partnership {
  --projects-symbol: "∞";
  background: linear-gradient(120deg, #ffc9da 0%, #ffe4e9 100%);
}

.projects-info-card--coverage {
  --projects-symbol: "▣";
  background: linear-gradient(120deg, #d6c6f5 0%, #f0d7ef 100%);
}

.projects-info-card--brand {
  --projects-symbol: "★";
  background: linear-gradient(110deg, #ffc1d4 0%, #ffe1e6 100%);
}

.projects-info-card--service {
  --projects-symbol: "✎";
  background: linear-gradient(110deg, #d8c8f3 0%, #f1def2 100%);
}

.projects-info-card:hover,
.projects-info-card:focus-visible {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 42px rgba(45, 34, 31, .13);
  outline: 2px solid rgba(8, 8, 8, .7);
  outline-offset: 3px;
}

.projects-card-copy {
  pointer-events: none;
  animation: projects-card-copy-in 720ms 250ms var(--ease-damped) both;
}

.projects-overview-number,
.projects-overview-title,
.projects-overview-description,
.projects-overview-rule {
  animation: projects-copy-in 720ms 230ms var(--ease-damped) both;
}

.projects-overview-title {
  white-space: nowrap;
}

.projects-overview-description {
  white-space: nowrap;
}

body.edit-mode .projects-word,
body.edit-mode .projects-content-sync-layer,
body.edit-mode .projects-copy-in,
body.edit-mode .projects-category,
body.edit-mode .projects-client-card,
body.edit-mode .projects-info-card,
body.edit-mode .projects-card-copy {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body.edit-mode .projects-overview-number,
body.edit-mode .projects-overview-title,
body.edit-mode .projects-overview-description,
body.edit-mode .projects-overview-rule,
body.exporting .projects-overview-number,
body.exporting .projects-overview-title,
body.exporting .projects-overview-description,
body.exporting .projects-overview-rule {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body.edit-mode.projects-page .content-layer,
body.exporting.projects-page .content-layer {
  --projects-title-crop: 53px;
  --projects-body-shift: 0px;
  --projects-title-y: 0px;
  --projects-title-opacity: 1;
  animation: none !important;
}

body.edit-mode .projects-content-sync-layer {
  pointer-events: auto;
  translate: 0 0 !important;
}

body.edit-mode .projects-client-card:hover,
body.edit-mode .projects-info-card:hover { box-shadow: var(--card-shadow); }

body.exporting .projects-word,
body.exporting .projects-content-sync-layer,
body.exporting .projects-copy-in,
body.exporting .projects-category,
body.exporting .projects-client-card,
body.exporting .projects-info-card,
body.exporting .projects-card-copy {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  outline: none !important;
}

body.exporting .projects-content-sync-layer { translate: 0 0 !important; }

@keyframes projects-copy-in {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes projects-scene-sync {
  0% {
    --projects-title-crop: 0px;
    --projects-body-shift: 18px;
    --projects-title-y: -24px;
    --projects-title-opacity: 0;
  }
  28% {
    --projects-title-crop: 0px;
    --projects-body-shift: 18px;
    --projects-title-y: 0px;
    --projects-title-opacity: 1;
  }
  38% {
    --projects-title-crop: 0px;
    --projects-body-shift: 18px;
    --projects-title-y: 0px;
    --projects-title-opacity: 1;
  }
  82%, 100% {
    --projects-title-crop: 53px;
    --projects-body-shift: 0px;
    --projects-title-y: 0px;
    --projects-title-opacity: 1;
  }
}

@keyframes projects-logo-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes projects-card-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes projects-card-copy-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.launch-page .about-canvas { background: #fff; }

@property --launch-title-crop {
  syntax: "<length>";
  inherits: true;
  initial-value: 56px;
}

@property --launch-body-shift {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --launch-title-y {
  syntax: "<length>";
  inherits: true;
  initial-value: 22px;
}

@property --launch-title-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.launch-page .content-layer {
  --launch-title-crop: 56px;
  --launch-body-shift: 0px;
  --launch-title-y: 22px;
  --launch-title-opacity: 1;
  pointer-events: auto;
  animation: launch-scene-sync 1360ms var(--ease-damped) both;
}

.launch-word {
  overflow: visible;
  white-space: nowrap;
  font-family: var(--font-en);
  scale: .96 1;
  transform-origin: left top;
  opacity: var(--launch-title-opacity);
  clip-path: inset(0 0 var(--launch-title-crop) 0);
  transform: translateY(var(--launch-title-y));
  will-change: transform, opacity, clip-path;
  user-select: none;
}

.launch-content-sync-layer {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  translate: 0 var(--launch-body-shift);
  will-change: translate;
}

.launch-copy-in { animation: launch-copy-in 720ms 170ms var(--ease-damped) backwards; }

.launch-feature {
  animation: launch-card-in 720ms var(--launch-entry-delay, 220ms) var(--ease-damped) backwards;
  transition:
    left 560ms var(--ease-damped),
    width 560ms var(--ease-damped),
    opacity 320ms ease,
    filter 360ms ease,
    box-shadow 420ms var(--ease-damped);
  will-change: left, width, opacity, filter;
}

.launch-feature[data-launch-group="1"] { --launch-entry-delay: 220ms; }
.launch-feature[data-launch-group="2"] { --launch-entry-delay: 310ms; }
.launch-feature[data-launch-group="3"] { --launch-entry-delay: 400ms; }

.launch-feature-card {
  border: 1px solid rgba(38, 31, 29, .045);
  box-shadow: 0 12px 28px rgba(45, 34, 31, .075);
}

.launch-feature-card.is-launch-feature-active {
  box-shadow: 0 22px 52px rgba(45, 34, 31, .14);
}

.launch-feature-media {
  border-radius: 22px 22px 0 0 !important;
  box-shadow: none;
}

.launch-feature-media img {
  transform: translate(calc(-50% + var(--media-x, 0px)), calc(-50% + var(--media-y, 0px))) rotate(var(--media-rotation, 0deg)) scale(var(--launch-media-scale, var(--media-scale, 1)));
  transition: transform 560ms var(--ease-damped), filter 360ms ease;
}

.launch-feature-copy {
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}

.launch-feature-tags {
  padding: 3px 8px;
  border: 1px solid rgba(40, 33, 31, .06);
  border-radius: 999px;
  background: rgba(248, 247, 246, .9);
}

.launch-feature-arrow { overflow: visible; }

.launch-feature-card.is-launch-feature-muted { opacity: .82; }
.launch-feature-media.is-launch-feature-muted { opacity: .64; filter: saturate(.62) brightness(1.08); }
.launch-feature-copy.is-launch-feature-muted { opacity: .42; }

.launch-feature-hit {
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.launch-feature-hit:focus-visible {
  outline: 2px solid #080808;
  outline-offset: 5px;
}

body.edit-mode .launch-feature-hit,
body.edit-mode .launch-more-hit,
body.edit-mode .campaign-card-hit {
  pointer-events: none !important;
}

body.edit-mode .launch-feature-copy,
body.edit-mode .launch-more-copy,
body.edit-mode .campaign-card-copy {
  pointer-events: auto !important;
}

.launch-more-piece {
  animation: launch-card-in 680ms var(--launch-entry-delay, 520ms) var(--ease-damped) backwards;
  transition:
    transform 360ms var(--ease-damped),
    box-shadow 360ms var(--ease-damped),
    filter 300ms ease;
  will-change: transform;
}

.launch-more-piece[data-launch-more-group="1"] { --launch-entry-delay: 520ms; }
.launch-more-piece[data-launch-more-group="2"] { --launch-entry-delay: 590ms; }
.launch-more-piece[data-launch-more-group="3"] { --launch-entry-delay: 660ms; }
.launch-more-piece[data-launch-more-group="4"] { --launch-entry-delay: 730ms; }

.launch-more-card {
  border: 1px solid rgba(38, 31, 29, .045);
  box-shadow: 0 10px 24px rgba(45, 34, 31, .065);
}

.launch-more-media {
  border-radius: 17px 0 0 17px !important;
  box-shadow: none;
}

.launch-more-copy {
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}

.launch-more-hit {
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.launch-more-piece.is-launch-more-active {
  z-index: 20 !important;
  transform: scale(1.055);
}

.launch-more-card.is-launch-more-active { box-shadow: 0 18px 40px rgba(45, 34, 31, .14); }

.launch-more-hit:focus-visible {
  outline: 2px solid #080808;
  outline-offset: 4px;
}

body.edit-mode .launch-word,
body.edit-mode .launch-copy-in,
body.exporting .launch-word,
body.exporting .launch-copy-in {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body.edit-mode .launch-feature,
body.edit-mode .launch-more-piece,
body.exporting .launch-feature,
body.exporting .launch-more-piece {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

body.edit-mode.launch-page .content-layer,
body.exporting.launch-page .content-layer {
  --launch-title-crop: 56px;
  --launch-body-shift: 0px;
  --launch-title-y: 22px;
  --launch-title-opacity: 1;
  animation: none !important;
}

body.edit-mode .launch-content-sync-layer {
  pointer-events: none;
  translate: 0 0 !important;
}

body.edit-mode :is(.launch-content-sync-layer,.campaign-content-sync-layer) > .editable-item {
  pointer-events: auto;
}

body.exporting .launch-content-sync-layer { translate: 0 0 !important; }

@keyframes launch-scene-sync {
  0% {
    --launch-title-crop: 0px;
    --launch-body-shift: 20px;
    --launch-title-y: -28px;
    --launch-title-opacity: 0;
  }
  30% {
    --launch-title-crop: 0px;
    --launch-body-shift: 20px;
    --launch-title-y: 0px;
    --launch-title-opacity: 1;
  }
  40% {
    --launch-title-crop: 0px;
    --launch-body-shift: 20px;
    --launch-title-y: 0px;
    --launch-title-opacity: 1;
  }
  82%, 100% {
    --launch-title-crop: 56px;
    --launch-body-shift: 0px;
    --launch-title-y: 22px;
    --launch-title-opacity: 1;
  }
}

@keyframes launch-card-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes launch-copy-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.campaign-page .about-canvas { background: #fff; }

@property --campaign-title-crop {
  syntax: "<length>";
  inherits: true;
  initial-value: 42px;
}

@property --campaign-body-shift {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --campaign-title-y {
  syntax: "<length>";
  inherits: true;
  initial-value: 18px;
}

@property --campaign-title-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.campaign-page .content-layer {
  --campaign-title-crop: 42px;
  --campaign-body-shift: 0px;
  --campaign-title-y: 18px;
  --campaign-title-opacity: 1;
  pointer-events: auto;
  animation: campaign-scene-sync 1360ms var(--ease-damped) both;
}

.campaign-word {
  overflow: visible;
  white-space: nowrap;
  font-family: var(--font-en);
  scale: .96 1;
  opacity: var(--campaign-title-opacity);
  clip-path: inset(0 0 var(--campaign-title-crop) 0);
  transform: translateY(var(--campaign-title-y));
  transform-origin: left top;
  user-select: none;
  will-change: transform, opacity, clip-path;
  z-index: 0 !important;
}

.campaign-content-sync-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
  translate: 0 var(--campaign-body-shift);
  will-change: translate;
}

.campaign-copy-in { animation: campaign-copy-in 720ms 170ms var(--ease-damped) backwards; }

.campaign-index-piece {
  pointer-events: none;
  transition: transform 320ms var(--ease-damped), background-color 320ms ease, box-shadow 320ms ease, color 320ms ease;
}
.campaign-index-bg.is-campaign-index-active {
  background: #faf8f5 !important;
  box-shadow: 0 12px 30px rgba(45, 34, 31, .085);
  transform: translateY(-3px);
}
.campaign-index-number.is-campaign-index-active,
.campaign-index-title.is-campaign-index-active,
.campaign-index-description.is-campaign-index-active { transform: translateY(-3px); }
.campaign-index-number.is-campaign-index-active { color: #9b2d27 !important; }
.campaign-index-rule { pointer-events: none; }
.campaign-index-hit {
  padding: 0;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent !important;
  color: transparent !important;
  cursor: pointer;
}
.campaign-index-hit:focus-visible { outline: 2px solid #080808; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .campaign-index-piece { transition: none; } }

.campaign-stat-card {
  border: 1px solid rgba(38, 31, 29, .045);
  box-shadow: 0 8px 22px rgba(45, 34, 31, .055);
  transition: transform 320ms var(--ease-damped), box-shadow 320ms var(--ease-damped);
}

.campaign-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(45, 34, 31, .11);
}

.campaign-stat-arrow { border: 1px solid rgba(38, 31, 29, .07); }

.campaign-project-wrap {
  position:absolute;overflow:hidden;border-radius:28px;pointer-events:none;
  transition:left 620ms var(--ease-damped),top 620ms var(--ease-damped),width 620ms var(--ease-damped),height 620ms var(--ease-damped),opacity 320ms ease,box-shadow 420ms ease;
  box-shadow:0 12px 30px rgba(45,34,31,.07);
}
.campaign-project-wrap.is-campaign-active { box-shadow:0 22px 50px rgba(45,34,31,.14); }
.campaign-project-wrap.is-campaign-muted { opacity:.94; }
.campaign-project-wrap .campaign-card-frame { box-shadow:none; }
.campaign-card-piece {
  animation: campaign-card-in 720ms var(--campaign-entry-delay, 250ms) var(--ease-damped) backwards;
  transition:
    left 620ms var(--ease-damped),
    top 620ms var(--ease-damped),
    width 620ms var(--ease-damped),
    height 620ms var(--ease-damped),
    opacity 300ms ease,
    border-radius 620ms var(--ease-damped),
    box-shadow 450ms var(--ease-damped);
  will-change: left, width, opacity;
}

.campaign-card-piece[data-campaign-group="1"] { --campaign-entry-delay: 250ms; }
.campaign-card-piece[data-campaign-group="2"] { --campaign-entry-delay: 360ms; }
.campaign-card-piece[data-campaign-group="3"] { --campaign-entry-delay: 450ms; }
.campaign-card-piece[data-campaign-group="4"] { --campaign-entry-delay: 540ms; }

.campaign-card-frame {
  border: 1px solid rgba(38, 31, 29, .045);
  box-shadow: 0 12px 30px rgba(45, 34, 31, .07);
}

.campaign-card-frame.is-campaign-active { box-shadow: 0 22px 52px rgba(45, 34, 31, .13); }

.campaign-card-media {
  box-shadow: none;
  transition:
    left 620ms var(--ease-damped),
    top 620ms var(--ease-damped),
    width 620ms var(--ease-damped),
    height 620ms var(--ease-damped),
    border-radius 620ms var(--ease-damped),
    opacity 300ms ease;
}

.campaign-card-media { border-radius: 28px 28px 0 0 !important; }
.campaign-card-media img,
.campaign-card-media video { transition: transform 620ms var(--ease-damped), scale 620ms var(--ease-damped); }
.campaign-card-media.is-campaign-active img,
.campaign-card-media.is-campaign-active video { scale: 1.025; }

.campaign-card-copy {
  overflow: hidden;
  white-space: pre-line;
  pointer-events: none;
}
.campaign-project-wrap .campaign-card-copy { transition:opacity 320ms ease; }
@media(prefers-reduced-motion:reduce){.campaign-project-wrap,.campaign-project-wrap .campaign-card-piece{transition:none!important;animation:none!important}}
body.exporting .campaign-project-wrap{transition:none!important}

.campaign-card-badge {
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 999px !important;
  white-space: nowrap;
}

.campaign-card-piece[data-campaign-group="1"].campaign-card-badge { color: #7f9927 !important; background: #eff6c9 !important; }
.campaign-card-piece[data-campaign-group="2"].campaign-card-badge { color: #e95f77 !important; background: #ffe4ea !important; }
.campaign-card-piece[data-campaign-group="3"].campaign-card-badge { color: #83a521 !important; background: #eef5d0 !important; }
.campaign-card-piece[data-campaign-group="4"].campaign-card-badge { color: #7968dc !important; background: #eee9ff !important; }

.campaign-card-title { white-space: nowrap; }
.campaign-card-description { white-space: pre-line; }
.campaign-card-arrow { overflow: visible; white-space: nowrap; }

.campaign-card-hit {
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  pointer-events: auto;
  text-decoration: none;
}

.campaign-hover-zone {
  position: absolute;
  z-index: 30;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.campaign-hover-zone:focus-visible {
  outline: 2px solid #080808;
  outline-offset: 5px;
}

body.edit-mode .campaign-hover-zone,
body.exporting .campaign-hover-zone { display: none !important; }

body.edit-mode.campaign-page .content-layer,
body.exporting.campaign-page .content-layer {
  --campaign-title-crop: 42px;
  --campaign-body-shift: 0px;
  --campaign-title-y: 18px;
  --campaign-title-opacity: 1;
  animation: none !important;
}

body.edit-mode .campaign-word,
body.edit-mode .campaign-content-sync-layer,
body.edit-mode .campaign-copy-in,
body.edit-mode .campaign-card-piece,
body.exporting .campaign-word,
body.exporting .campaign-content-sync-layer,
body.exporting .campaign-copy-in,
body.exporting .campaign-card-piece {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body.edit-mode .campaign-content-sync-layer,
body.exporting .campaign-content-sync-layer { translate: 0 0 !important; }

body.edit-mode .campaign-content-sync-layer { pointer-events: none; }

@keyframes campaign-scene-sync {
  0% {
    --campaign-title-crop: 0px;
    --campaign-body-shift: 20px;
    --campaign-title-y: -26px;
    --campaign-title-opacity: 0;
  }
  30% {
    --campaign-title-crop: 0px;
    --campaign-body-shift: 20px;
    --campaign-title-y: 0px;
    --campaign-title-opacity: 1;
  }
  40% {
    --campaign-title-crop: 0px;
    --campaign-body-shift: 20px;
    --campaign-title-y: 0px;
    --campaign-title-opacity: 1;
  }
  82%, 100% {
    --campaign-title-crop: 42px;
    --campaign-body-shift: 0px;
    --campaign-title-y: 18px;
    --campaign-title-opacity: 1;
  }
}

@keyframes campaign-copy-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes campaign-card-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.campaign-detail-page {
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
  background: #fff;
}

.campaign-detail-stage {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  background: #fff;
}

.campaign-detail-back {
  position: fixed;
  left: clamp(28px, 10.42vw, 200px);
  bottom: clamp(28px, 11.57vh, 125px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #080808;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.campaign-detail-back::before {
  content: "←";
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: #080808;
  color: #fff;
  font-family: var(--font-en);
  font-size: 23px;
  transition: transform 260ms var(--ease-damped);
}

.campaign-detail-back:hover::before,
.campaign-detail-back:focus-visible::before { transform: translateX(-4px); }

.campaign-detail-back:focus-visible {
  border-radius: 999px;
  outline: 2px solid #080808;
  outline-offset: 6px;
}

.experience-page .about-canvas { background: #fff; }
.experience-page .content-layer { pointer-events: auto; }

.experience-word {
  overflow: visible;
  font-family: var(--font-en);
  white-space: nowrap;
  user-select: none;
  animation: contact-title-in 900ms var(--ease-damped) both;
}

.experience-copy-in {
  animation: experience-copy-in 760ms 100ms var(--ease-damped) both;
}

.experience-avatar {
  overflow: hidden;
  border: 1px solid rgba(8, 8, 8, .13);
  background: #fff;
  box-shadow: none;
}

.experience-timeline {
  transform-origin: top;
  animation: experience-line-in 820ms 150ms var(--ease-damped) both;
  pointer-events: none;
}

.experience-entry {
  transform: translateZ(0) scale(1);
  transform-origin: left center;
  transition:
    transform 360ms var(--ease-damped),
    opacity 260ms ease,
    filter 300ms ease,
    color 220ms ease;
  will-change: transform, opacity, filter;
  pointer-events: none;
}

.experience-date { transform-origin: right center; }
.experience-dot { transform-origin: center; }

.experience-entry.is-experience-active {
  z-index: 7 !important;
  transform: scale(1.055);
  opacity: 1;
  filter: none;
}

.experience-dot.is-experience-active { transform: scale(1.32); }

.experience-entry.is-experience-muted {
  transform: scale(.985);
  opacity: .28;
  filter: blur(1.8px);
}

.experience-hit {
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 18px;
  background: transparent !important;
  cursor: zoom-in;
  pointer-events: auto;
}

.experience-hit:focus-visible {
  outline: 2px solid rgba(47, 103, 232, .75);
  outline-offset: 4px;
}

.experience-tools {
  padding: 8px 0 18px;
  overflow: hidden;
  white-space: normal;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.experience-tools__track {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: max-content;
  animation: experience-tools-loop 34s linear infinite;
  will-change: transform;
}

.experience-tools:hover .experience-tools__track,
.experience-tools:focus-within .experience-tools__track {
  animation-play-state: paused;
}

.experience-tool {
  flex: 0 0 104px;
  width: 104px;
  margin: 0;
  color: #171515;
  text-align: center;
  outline: none;
  transition: transform 300ms var(--ease-damped);
  will-change: transform;
}

.experience-tool__icon {
  display: block;
  width: 98px;
  height: 98px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(8, 8, 8, .14);
  border-radius: 17px;
  background: var(--tool-background, #fff);
  box-shadow: 0 8px 18px rgba(27, 21, 20, .07);
  transition: box-shadow 280ms ease;
}

.experience-tool__icon img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: cover;
  transform: scale(var(--tool-image-scale, 1));
  transform-origin: center;
}

.experience-tool[data-tool-file$=".svg"] .experience-tool__icon,
.experience-tool[data-tool-file="jimeng.jpg"] .experience-tool__icon { border-color: transparent; }

.experience-tool figcaption {
  width: 120px;
  margin-top: 9px;
  margin-left: -8px;
  overflow: visible;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.experience-tool:hover,
.experience-tool:focus-visible {
  transform: translateY(-4px) scale(1.04);
}

.experience-tool:hover .experience-tool__icon,
.experience-tool:focus-visible .experience-tool__icon {
  box-shadow: 0 15px 26px rgba(27, 21, 20, .12);
}

.return-home {
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  transition: transform 320ms var(--ease-damped);
}

.return-home::before {
  content: "←";
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #080808;
  color: #fff;
  font-family: var(--font-en);
  font-size: 22px;
  line-height: 1;
  transition: transform 320ms var(--ease-damped), background 180ms ease;
}

.return-home:hover,
.return-home:focus-visible {
  transform: translateX(-4px);
  outline: none;
}

.return-home:hover::before,
.return-home:focus-visible::before {
  transform: scale(1.08);
  background: #2f67e8;
}

/* Shared tertiary-case navigation.  Keep this geometry and treatment identical
   while allowing every case study to retain its own content system above it. */
.case-footer-back,
.case-footer-next {
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
  min-height: 52px;
  font-family: "Inter Tight", "Microsoft YaHei", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.case-footer-back {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #111 !important;
  font-weight: 500 !important;
  text-align: left !important;
  transition: transform 320ms var(--ease-damped);
}

.case-footer-back::before {
  content: "←";
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #080808;
  color: #fff;
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  transition: transform 320ms var(--ease-damped), background 180ms ease;
}

.case-footer-back:hover,
.case-footer-back:focus-visible {
  transform: translateX(-4px);
  outline: none;
}

.case-footer-back:hover::before,
.case-footer-back:focus-visible::before {
  transform: scale(1.08);
  background: #2f67e8;
}

.case-footer-next {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: none !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #151515 !important;
  box-shadow: 0 9px 24px rgba(15, 15, 15, .14) !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: .4px !important;
  text-align: center !important;
  transition: transform 300ms var(--ease-damped), background 180ms ease, box-shadow 180ms ease;
}

.case-footer-next:hover,
.case-footer-next:focus-visible {
  transform: translateY(-3px);
  background: #2f67e8 !important;
  box-shadow: 0 13px 28px rgba(47, 103, 232, .22) !important;
  outline: none;
}

.case-footer-back:focus-visible,
.case-footer-next:focus-visible {
  outline: 2px solid #2f67e8;
  outline-offset: 4px;
}

/* Case-study pages keep project marks, but no longer repeat global nav words. */
.sienna-page .sienna-top-link {
  display: none !important;
}

/* Intentionally blank reserved cases still expose the same navigation frame. */
.case-placeholder-page {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: #fff;
  color: #111;
}

.case-placeholder-stage {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 190px 1fr 298px;
  align-items: end;
  gap: 24px;
  width: min(100%, 1920px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 72px 30px;
}

.case-placeholder-back { grid-column: 1; }
.case-placeholder-next { grid-column: 3; }

@media (max-width: 720px) {
  .case-placeholder-stage {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 32px 22px 24px;
  }

  .case-placeholder-back,
  .case-placeholder-next {
    grid-column: 1;
    width: 100%;
  }
}

body.edit-mode .experience-hit { pointer-events: none !important; }
body.edit-mode .experience-entry { pointer-events: auto !important; cursor: move; }

body.edit-mode .experience-word,
body.edit-mode .experience-copy-in,
body.edit-mode .experience-timeline,
body.edit-mode .experience-tools__track {
  animation: none !important;
}

body.exporting .experience-hit { display: none !important; }
body.exporting .experience-tools__track { animation-play-state: paused !important; }
body.exporting .experience-entry {
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}

@keyframes experience-copy-in {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes experience-line-in {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes experience-tools-loop {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - 16px), 0, 0); }
}

/* Content / event projects */
.content-page .about-canvas { background: #fff; }

@property --content-title-crop {
  syntax: "<length>";
  inherits: true;
  initial-value: 62px;
}

@property --content-title-y {
  syntax: "<length>";
  inherits: true;
  initial-value: 18px;
}

@property --content-body-shift {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --content-title-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.content-page .content-layer {
  --content-title-crop: 62px;
  --content-title-y: 18px;
  --content-body-shift: 0px;
  --content-title-opacity: 1;
  pointer-events: auto;
  animation: content-scene-sync 1320ms var(--ease-damped) both;
}

.content-word {
  overflow: visible;
  white-space: nowrap;
  font-family: var(--font-en);
  scale: 1.285 1;
  opacity: var(--content-title-opacity);
  clip-path: inset(0 0 var(--content-title-crop) 0);
  transform: translateY(var(--content-title-y));
  transform-origin: left top;
  user-select: none;
  will-change: transform, opacity, clip-path;
  z-index: 0 !important;
}

.content-page-sync-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
  translate: 0 var(--content-body-shift);
  will-change: translate;
}

.content-copy-in { animation: content-copy-in 680ms 200ms var(--ease-damped) backwards; }

.content-reveal-piece {
  transition: transform 360ms var(--ease-damped), box-shadow 360ms ease;
}

.content-reveal-card {
  border: 1px solid rgba(38, 31, 29, .065);
  box-shadow: 0 8px 22px rgba(45, 34, 31, .05);
}

.content-reveal-primary { animation: content-reveal-primary-in 660ms var(--content-reveal-delay) var(--ease-damped) backwards; }
.content-reveal-detail { animation: content-reveal-detail-in 740ms calc(var(--content-reveal-delay) + 100ms) var(--ease-damped) backwards; }
.content-reveal-1 { --content-reveal-delay: 330ms; }
.content-reveal-2 { --content-reveal-delay: 470ms; }
.content-reveal-primary-title {
  display: grid;
  place-items: center;
  overflow: visible;
  white-space: pre-line;
}
.content-reveal-detail.is-content-reveal-active { transform: translateX(8px); }
.content-reveal-detail.is-content-reveal-active.content-reveal-arrow { transform: translate(11px, -2px); }
.content-reveal-card.content-reveal-primary.is-content-reveal-active { box-shadow: 0 13px 30px rgba(45, 34, 31, .11); }

.content-reveal-hit {
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: default;
}

.content-reveal-hit:focus-visible {
  outline: 2px solid #080808;
  outline-offset: 4px;
}

.content-card-piece {
  animation: content-card-in 720ms var(--content-card-delay, 320ms) var(--ease-damped) backwards;
  transition:
    left 620ms var(--ease-damped),
    width 620ms var(--ease-damped),
    opacity 320ms ease,
    box-shadow 420ms ease;
  will-change: left, width;
}

.content-card-piece[data-content-group="1"] { --content-card-delay: 320ms; }
.content-card-piece[data-content-group="2"] { --content-card-delay: 390ms; }
.content-card-piece[data-content-group="3"] { --content-card-delay: 460ms; }

.content-card-frame {
  border: 1px solid rgba(38, 31, 29, .055);
  box-shadow: 0 14px 34px rgba(45, 34, 31, .08);
}
.content-card-frame.is-content-active { box-shadow: 0 22px 50px rgba(45, 34, 31, .14); }

.content-card-media {
  border-radius: 22px 22px 0 0 !important;
  box-shadow: none;
}
.content-card-media img,
.content-card-media video { transition: transform 620ms var(--ease-damped), scale 620ms var(--ease-damped); }
.content-card-media.is-content-active img,
.content-card-media.is-content-active video { scale: 1.025; }

.content-card-copy {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}
.content-card-piece.is-content-muted { opacity: .94; }
.content-card-hit {
  pointer-events: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  text-decoration: none;
  cursor: pointer;
}
.content-card-hit:focus-visible {
  outline: 2px solid #080808;
  outline-offset: 5px;
}

.content-indicator {
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: left 420ms var(--ease-damped), width 420ms var(--ease-damped), background 260ms ease;
}
.content-indicator:focus-visible {
  outline: 2px solid #080808;
  outline-offset: 4px;
}

body.edit-mode.content-page .content-layer,
body.exporting.content-page .content-layer {
  --content-title-crop: 62px;
  --content-title-y: 18px;
  --content-body-shift: 0px;
  --content-title-opacity: 1;
  animation: none !important;
}

body.edit-mode.content-page .content-word {
  z-index: 20 !important;
  pointer-events: auto !important;
}

body.edit-mode .content-word,
body.edit-mode .content-page-sync-layer,
body.edit-mode .content-copy-in,
body.edit-mode .content-card-piece,
body.edit-mode .content-reveal-piece,
body.exporting .content-word,
body.exporting .content-page-sync-layer,
body.exporting .content-copy-in,
body.exporting .content-card-piece,
body.exporting .content-reveal-piece {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
  translate: 0 0 !important;
}

body.edit-mode .content-card-hit,
body.edit-mode .content-reveal-hit,
body.edit-mode .content-indicator,
body.exporting .content-card-hit,
body.exporting .content-reveal-hit,
body.exporting .content-indicator { display: none !important; }

@keyframes content-scene-sync {
  0% {
    --content-title-crop: 0px;
    --content-title-y: -30px;
    --content-body-shift: 20px;
    --content-title-opacity: 0;
  }
  30%, 42% {
    --content-title-crop: 0px;
    --content-title-y: 0px;
    --content-body-shift: 20px;
    --content-title-opacity: 1;
  }
  84%, 100% {
    --content-title-crop: 62px;
    --content-title-y: 18px;
    --content-body-shift: 0px;
    --content-title-opacity: 1;
  }
}

@keyframes content-copy-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes content-card-in {
  from { opacity: 0; transform: translateY(22px) scale(.988); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes content-reveal-primary-in {
  from { opacity: 0; transform: translateX(-26px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes content-reveal-detail-in {
  from { opacity: 0; transform: translateX(-118px); }
  to { opacity: 1; transform: translateX(0); }
}

.content-detail-page {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #fff;
  color: #080808;
  font-family: var(--font-en), var(--font-zh);
}

.content-detail-stage {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  background: #fff;
}

.content-detail-back {
  position: absolute;
  left: max(32px, 9.7vw);
  bottom: max(30px, 8.4vh);
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-left: 62px;
  color: #080808;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.content-detail-back::before {
  content: "←";
  position: absolute;
  left: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #080808;
  color: #fff;
  font-family: var(--font-en);
  font-size: 25px;
  transition: transform 260ms var(--ease-damped);
}

.content-detail-back:hover::before,
.content-detail-back:focus-visible::before { transform: translateX(-4px); }

/* Sushiro × Santa campaign case study */
.sushiro-page .about-canvas { background: #fff; }

.sushiro-page .content-layer { pointer-events: none; }

.sushiro-word {
  overflow: visible;
  font-family: var(--font-en);
  white-space: pre;
  user-select: none;
}

.sushiro-case-label,
.sushiro-subtitle,
.sushiro-tvc-title,
.sushiro-results-title,
.sushiro-metric-value { font-family: var(--font-en); }

.sushiro-header-logo,
.sushiro-person-media,
.sushiro-signature-media,
.sushiro-badge-media,
.sushiro-product-media {
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.sushiro-header-logo img,
.sushiro-signature-media img { transform-origin: center; }

.sushiro-counter-digits {
  display: inline-block;
  min-width: var(--counter-width, auto);
  font-variant-numeric: tabular-nums;
}

.sushiro-panel {
  border: 1px solid rgba(63, 40, 34, .055);
  box-shadow: 0 14px 38px rgba(64, 39, 33, .09);
}

.sushiro-story-media {
  background: #f3f0ee;
  box-shadow: none;
  transition: transform 420ms var(--ease-damped), filter 420ms ease;
}

.sushiro-story-media img,
.sushiro-story-media video { transition: transform 520ms var(--ease-damped); }

.sushiro-tvc-hit {
  pointer-events: auto;
  border: 0;
  background: rgba(15, 10, 9, 0);
  cursor: pointer;
  transition: background 420ms ease;
}

.sushiro-tvc-hit:focus-visible {
  outline: 3px solid rgba(181, 35, 31, .9);
  outline-offset: 5px;
}

.sushiro-play-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: visible;
  white-space: pre;
  opacity: 0;
  transform: translateY(12px) scale(.92);
  transition: opacity 320ms ease, transform 420ms var(--ease-damped);
  pointer-events: none;
}

.sushiro-play-overlay::before {
  content: "▶";
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  padding-left: 4px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-family: var(--font-en);
  font-size: 23px;
  line-height: 1;
  backdrop-filter: blur(5px);
}

.is-sushiro-tvc-hover .sushiro-tvc-hit { background: rgba(17, 10, 9, .46); }
.is-sushiro-tvc-hover .sushiro-story-media { transform: scale(1.012); }
.is-sushiro-tvc-hover .sushiro-play-overlay {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: sushiro-play-copy 1.8s 420ms ease-in-out infinite;
}

.sushiro-product-tag {
  display: grid;
  place-items: center;
  border: 1px solid #ba322e;
}

.sushiro-full-video-source {
  display: none;
  border: 2px solid #7657ff;
  background: #eee9ff;
  box-shadow: 0 8px 22px rgba(80, 55, 160, .22);
}

body.edit-mode .sushiro-full-video-source {
  display: block;
  overflow: visible;
  pointer-events: auto !important;
}

body.edit-mode .sushiro-full-video-source::after {
  content: "完整TVC · 点击替换视频";
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  width: max-content;
  padding: 5px 8px;
  border-radius: 6px;
  background: #7657ff;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

body.edit-mode .sushiro-tvc-hit { pointer-events: none !important; }
body.edit-mode .sushiro-enter,
body.exporting .sushiro-enter { animation: none !important; }
body.exporting .sushiro-full-video-source,
body.exporting .sushiro-tvc-hit,
body.exporting .sushiro-play-overlay { display: none !important; }

.sushiro-enter { animation: sushiro-enter 720ms var(--ease-damped) backwards; }
.sushiro-enter-1 { animation-delay: 60ms; }
.sushiro-enter-2 { animation-delay: 170ms; }
.sushiro-enter-3 { animation-delay: 300ms; }
.sushiro-enter-4 { animation-delay: 410ms; }
.sushiro-enter-5 { animation-delay: 490ms; }
.sushiro-enter-6 { animation-delay: 570ms; }

.sushiro-player {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 5vh 5vw;
  visibility: hidden;
  background: rgba(8, 7, 7, .94);
  opacity: 0;
  transition: opacity 300ms ease, visibility 0s 300ms;
}

.sushiro-player.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 300ms ease;
}

.sushiro-player__frame {
  position: relative;
  width: min(86vw, calc(82vh * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: #111;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  transform: translateY(16px) scale(.985);
  transition: transform 420ms var(--ease-damped);
}

.sushiro-player.is-open .sushiro-player__frame { transform: translateY(0) scale(1); }

.sushiro-player__frame video,
.sushiro-player__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sushiro-player__placeholder {
  position: absolute;
  left: 50%;
  bottom: 22px;
  margin: 0;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.sushiro-player__close {
  position: fixed;
  right: 4vw;
  top: 4vh;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-family: var(--font-en);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

@keyframes sushiro-enter {
  from { opacity: 0; transform: translateY(18px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sushiro-play-copy {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

@media (hover: none), (pointer: coarse) {
  .sushiro-play-overlay { opacity: 1; transform: translateY(0) scale(.9); }
  .sushiro-tvc-hit { background: rgba(17, 10, 9, .22); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Toyota CNY long-form case study */
html:has(body.long-case-page),
body.long-case-page {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
}

.long-case-page .app {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  min-height: 100vh;
  height: var(--scaled-stage-height, 100vh);
  overflow: visible;
  background: #fff;
}

.long-case-page .export-stage {
  left: 50%;
  top: 0;
  transform: translateX(-50%) scale(var(--stage-scale));
  transform-origin: top center;
}

.toyota-cny-page .about-canvas { background: #fff; }
.toyota-cny-page .content-layer { pointer-events: none; }

.toyota-word,
.toyota-case-label,
.toyota-side-copy,
.toyota-side-dots,
.toyota-section-kicker,
.toyota-result-kicker,
.toyota-result-value { font-family: var(--font-en); }

.toyota-word {
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

.toyota-year { display: grid; place-items: center; }

.toyota-panel {
  border: 1px solid rgba(56, 41, 35, .055);
  box-shadow: 0 18px 50px rgba(72, 50, 43, .09);
}

.toyota-phone {
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.toyota-strategy-index {
  display: grid;
  place-items: center;
  overflow: visible;
}

.toyota-strategy-icon {
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.toyota-social-media,
.toyota-tvc-media,
.toyota-tvc-thumb {
  box-shadow: none;
  transition: transform 520ms var(--ease-damped), filter 380ms ease;
}

.toyota-social-media:hover,
.toyota-tvc-thumb:hover { transform: translateY(-4px) scale(1.018); }

.toyota-execution-shell {
  border-color: rgba(56, 41, 35, .075);
  box-shadow: 0 20px 58px rgba(72, 50, 43, .075);
}

.toyota-output-title,
.toyota-output-label { overflow: visible; }

.toyota-tvc-thumb {
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(72, 50, 43, .10);
}

.toyota-tvc-thumb-label { overflow: visible; }

.toyota-result-panel {
  box-shadow: 0 24px 64px rgba(154, 35, 28, .24);
}

.toyota-result-art {
  overflow: visible;
  background: transparent;
  box-shadow: none;
  filter: none;
}

.toyota-result-dragon {
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  opacity: .14;
  filter: saturate(.65) contrast(.72) brightness(1.2);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.toyota-result-dragon.is-inview { opacity: .14; }

.toyota-result-value {
  overflow: visible;
  font-variant-numeric: tabular-nums;
}

.toyota-result-growth,
.toyota-result-label,
.toyota-result-kicker {
  text-shadow: 0 1px 0 rgba(91, 6, 6, .18);
}

.toyota-tvc-hit {
  pointer-events: auto;
  border: 0;
  border-radius: 24px;
  background: rgba(12, 8, 7, 0);
  cursor: pointer;
  transition: background 360ms ease;
}

.toyota-tvc-hit:focus-visible {
  outline: 3px solid rgba(197, 42, 32, .92);
  outline-offset: 6px;
}

.toyota-play-overlay {
  display: grid;
  place-items: center;
  overflow: visible;
  white-space: pre;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 300ms ease, transform 430ms var(--ease-damped);
  pointer-events: none;
}

.is-toyota-tvc-hover .toyota-tvc-hit { background: rgba(10, 7, 6, .48); }
.is-toyota-tvc-hover .toyota-tvc-media { transform: scale(1.008); filter: brightness(.7); }
.is-toyota-tvc-hover .toyota-play-overlay {
  opacity: 1;
  transform: translateY(0);
  animation: sushiro-play-copy 1.8s 380ms ease-in-out infinite;
}

.toyota-next {
  display: grid;
  place-items: center;
  color: inherit;
  text-decoration: none;
}

.toyota-next { color: #fff; }

.toyota-enter {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms ease, transform 780ms var(--ease-damped);
  will-change: opacity, transform;
}

.toyota-enter-2 { transition-delay: 90ms; }
.toyota-enter-3 { transition-delay: 170ms; }
.toyota-phone-left { transform: translateX(-54px) scale(.985); }
.toyota-phone-right { transform: translateX(54px) scale(.985); }
.toyota-enter.is-inview { opacity: 1; transform: translate(0, 0) scale(1); }

body.edit-mode .toyota-enter,
body.exporting .toyota-enter {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.edit-mode .toyota-tvc-hit,
body.exporting .toyota-tvc-hit,
body.exporting .toyota-play-overlay { display: none !important; }

body.edit-mode .toyota-result-dragon,
body.exporting .toyota-result-dragon {
  opacity: .14 !important;
}

body.edit-mode .toyota-result-dragon { pointer-events: auto; }

body.edit-mode .toyota-tvc-media::after {
  content: "影片区域 · 点击后可替换图片或视频";
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 4;
  padding: 8px 12px;
  border-radius: 999px;
  background: #7657ff;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}

@media (hover: none), (pointer: coarse) {
  .toyota-play-overlay { opacity: 1; transform: none; }
  .toyota-tvc-hit { background: rgba(10, 7, 6, .22); }
}

@media (prefers-reduced-motion: reduce) {
  .toyota-enter { opacity: 1 !important; transform: none !important; }
}

/* Tianya Mingyue Dao × Peng Yuchang long-form case study */
.tianyadao-page .about-canvas { background: #faf7f2; }
.tianyadao-page .content-layer { pointer-events: none; }

.tianyadao-page .editable-item,
.tianyadao-page a,
.tianyadao-page button { pointer-events: auto; }

.tianyadao-hero {
  overflow: hidden;
  border-radius: 0;
  filter: none;
}
.tianyadao-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 650px;
  height: 180px;
  background: radial-gradient(ellipse at 100% 100%, rgba(250,247,242,.7), rgba(250,247,242,0) 72%);
  pointer-events: none;
}

.tianyadao-left-wash { pointer-events: none !important; }

.tianyadao-logo {
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  mix-blend-mode: multiply;
}

.tianyadao-word,
.tianyadao-nav,
.tianyadao-nav-index,
.tianyadao-screen,
.tianyadao-metric-value { font-family: var(--font-en); }

.tianyadao-word {
  overflow: visible;
  white-space: nowrap;
  user-select: none;
}

.tianyadao-panel {
  border: 1px solid rgba(103, 73, 59, .07);
  box-shadow: 0 12px 32px rgba(83, 57, 46, .06);
}

.tianyadao-strategy-icon {
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: none;
}

.tianyadao-section-2-bg {
  border-top: 1px solid rgba(105, 74, 60, .08);
  box-shadow: 0 -18px 50px rgba(83, 57, 46, .035);
}

.tianyadao-quote {
  padding: 7px 10px;
  text-shadow: 0 1px 12px rgba(250,247,242,.9);
}

.tianyadao-poster,
.tianyadao-story {
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(83, 57, 46, .06);
  transition: transform 460ms var(--ease-damped), opacity 320ms var(--ease-damped), box-shadow 460ms var(--ease-damped);
}

.tianyadao-story { box-shadow: none; background: #111; }
.tianyadao-story video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tianyadao-story video::-webkit-media-controls { display: none !important; }
.tianyadao-story { cursor: pointer; }
.tianyadao-segment { display: grid; place-items: center; cursor: pointer; transition: background 240ms var(--ease-damped), color 240ms var(--ease-damped) !important; }
.tianyadao-segment.is-active { background: #8f2d27 !important; color: #fff !important; }
.tianyadao-segment:not(.is-active) { background: #f2efec !important; color: #68615d !important; }
.tianyadao-segment:focus-visible { outline: 2px solid #8f2d27; outline-offset: 4px; }
.tianyadao-story.is-hovered { z-index: 18 !important; transform: scale(1.13); }
.tianyadao-story.is-dimmed { opacity: .64; }

.tianyadao-poster:hover,
.tianyadao-poster:focus-visible {
  z-index: 18 !important;
  transform: translateY(-8px) scale(1.025);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.tianyadao-outline-button,
.tianyadao-back,
.tianyadao-next {
  display: grid;
  place-items: center;
  border: 1px solid rgba(64, 43, 35, .18);
  text-decoration: none;
}

.tianyadao-next { color: #fff; }

.tianyadao-back {
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  border: 0;
}

.tianyadao-enter {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 550ms var(--ease-damped), transform 550ms var(--ease-damped);
  will-change: opacity, transform;
}

.tianyadao-hero.tianyadao-enter { transform: scale(1.015); transition-duration: 700ms; }
.tianyadao-enter-2 { transition-delay: 520ms; }
.tianyadao-enter-3 { transition-delay: 1050ms; }
.tianyadao-enter-4 { transition-delay: 130ms; }
.tianyadao-enter-5 { transition-delay: 210ms; }
.tianyadao-enter.is-inview { opacity: 1; transform: none; }
.tianyadao-story.tianyadao-enter.is-inview.is-hovered { transform: scale(1.13); }
.tianyadao-story.tianyadao-enter.is-inview.is-dimmed { opacity: .64; }

body.edit-mode .tianyadao-enter,
body.exporting .tianyadao-enter {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .tianyadao-enter { opacity: 1 !important; transform: none !important; }
}

/* Wildlander launch long-form case study */
.wildlander-page .about-canvas { background: #f2f5f7; }
.wildlander-page .content-layer { pointer-events: none; }
.wildlander-page .editable-item,
.wildlander-page a,
.wildlander-page button { pointer-events: auto; }

.wildlander-word {
  overflow: visible;
  white-space: nowrap;
  font-family: var(--font-en);
  user-select: none;
}

.wildlander-hero-frame,
.wildlander-content-shell,
.wildlander-film-frame {
  box-shadow: 0 20px 58px rgba(48, 67, 82, .11);
}

.wildlander-hero-video,
.wildlander-film-video,
.wildlander-kv-main,
.wildlander-kv-detail,
.wildlander-brochure,
.wildlander-creative-long,
.wildlander-social {
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(43, 60, 74, .09);
  transition: transform 420ms var(--ease-damped), opacity 280ms ease, filter 280ms ease, box-shadow 280ms ease;
}

.wildlander-hero-video video,
.wildlander-film-video video { filter: saturate(.94) contrast(1.02); }

.wildlander-hero-copy {
  text-shadow: 0 2px 16px rgba(0, 0, 0, .34);
}

.wildlander-spec-card {
  border: 1px solid rgba(73, 93, 108, .12);
  box-shadow: 0 8px 22px rgba(55, 72, 84, .055);
}

.wildlander-content-shell {
  border: 1px solid rgba(56, 76, 91, .07);
}

.wildlander-analysis-icon {
  overflow: visible;
  box-shadow: none;
}

.wildlander-value-circle {
  border: 1px solid rgba(76, 98, 114, .16);
  box-shadow: 0 8px 24px rgba(53, 72, 87, .04);
}

.wildlander-kv-slogan,
.wildlander-kv-subcopy,
.wildlander-film-title,
.wildlander-film-copy { text-shadow: 0 2px 14px rgba(0, 0, 0, .32); }

.wildlander-play-circle {
  border: 1px solid rgba(255,255,255,.42);
  backdrop-filter: blur(7px);
}

.wildlander-core-tags {
  display: grid;
  place-items: center;
  border: 1px solid rgba(72, 91, 105, .08);
}

.wildlander-next,
.wildlander-back {
  display: grid;
  place-items: center;
  text-decoration: none;
  border: 1px solid rgba(49, 64, 75, .14);
}

.wildlander-back {
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  border: 0;
}

body:not(.edit-mode) .wildlander-kv-detail:hover,
body:not(.edit-mode) .wildlander-kv-detail:focus-visible,
body:not(.edit-mode) .wildlander-brochure:hover,
body:not(.edit-mode) .wildlander-brochure:focus-visible,
body:not(.edit-mode) .wildlander-social:hover,
body:not(.edit-mode) .wildlander-social:focus-visible {
  z-index: 20 !important;
  transform: scale(1.035);
  box-shadow: 0 18px 40px rgba(36, 58, 75, .18);
  outline: 2px solid rgba(67, 113, 151, .34);
  outline-offset: 4px;
}

body:not(.edit-mode) .content-layer:has(.wildlander-kv-detail:hover) .wildlander-kv-detail:not(:hover),
body:not(.edit-mode) .content-layer:has(.wildlander-brochure:hover) .wildlander-brochure:not(:hover),
body:not(.edit-mode) .content-layer:has(.wildlander-social:hover) .wildlander-social:not(:hover) {
  opacity: .45;
  filter: saturate(.55) brightness(1.08);
}

.wildlander-enter {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 660ms ease, transform 820ms var(--ease-damped);
  will-change: opacity, transform;
}

.wildlander-word.wildlander-enter { transform: translateY(-24px); }
.wildlander-hero-video.wildlander-enter { transform: scale(1.018); }
.wildlander-enter-2 { transition-delay: 70ms; }
.wildlander-enter-3 { transition-delay: 140ms; }
.wildlander-enter-4 { transition-delay: 210ms; }

.wildlander-enter.is-inview {
  opacity: 1;
  transform: none;
}

body.edit-mode .wildlander-enter,
body.exporting .wildlander-enter {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .wildlander-enter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* iA5 launch case */
.ia5-page .about-canvas { background: #fff; }
.ia5-page .content-layer { pointer-events: none; }
.ia5-page .editable-item,
.ia5-page a,
.ia5-page button { pointer-events: auto; }

.ia5-page .ia5-background { pointer-events: none; }
.ia5-page .ia5-word,
.ia5-page .ia5-project-type,
.ia5-page .ia5-section-en,
.ia5-page .ia5-analysis-en { font-family: "Inter Tight", "Noto Sans SC", sans-serif; }

.ia5-page .ia5-video-frame,
.ia5-page .ia5-video-media,
.ia5-page .ia5-video-shade,
.ia5-page .ia5-kv-shell,
.ia5-page .ia5-deliverables-shell,
.ia5-page .ia5-deliverable-card { box-shadow: 0 18px 48px rgba(55, 91, 118, .09); }

.ia5-page .ia5-video-media,
.ia5-page .ia5-kv-media,
.ia5-page .ia5-deliverable-media,
.ia5-page .ia5-analysis-icon { overflow: hidden; }

.ia5-page .ia5-video-media img,
.ia5-page .ia5-video-media video,
.ia5-page .ia5-kv-media img,
.ia5-page .ia5-deliverable-media img,
.ia5-page .ia5-analysis-icon img {
  transform: translate(calc(-50% + var(--media-x, 0px)), calc(-50% + var(--media-y, 0px))) rotate(var(--media-rotation, 0deg)) scale(var(--media-scale, 1));
  transform-origin: center;
}

.ia5-page .ia5-analysis-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}
.ia5-page .ia5-analysis-icon img { object-fit: contain; }

.ia5-page .ia5-kv-vertical,
.ia5-page .ia5-kv-vertical-alt {
  transition: opacity 360ms ease, filter 360ms ease, transform 380ms var(--ease-damped), box-shadow 380ms ease;
}
.ia5-page:not(.edit-mode) .ia5-kv-vertical { opacity: 1; }
.ia5-page:not(.edit-mode) .ia5-kv-vertical-alt {
  opacity: 0;
  pointer-events: none;
}
.ia5-page:not(.edit-mode) .content-layer.is-ia5-poster-alt .ia5-kv-vertical { opacity: 0; }
.ia5-page:not(.edit-mode) .content-layer.is-ia5-poster-alt .ia5-kv-vertical-alt { opacity: 1; }
.ia5-page.edit-mode .ia5-kv-vertical-alt { opacity: .58; }
.ia5-page.edit-mode .ia5-video-hit,
.ia5-page.edit-mode .ia5-poster-hit,
.ia5-page.edit-mode .ia5-poster-dot { pointer-events: none !important; }
.ia5-page .ia5-poster-hit {
  appearance: none;
  border: 0;
  background: transparent !important;
  cursor: pointer;
}
.ia5-page .ia5-poster-hit:focus-visible {
  outline: 3px solid rgba(43,129,235,.72);
  outline-offset: 5px;
}
.ia5-page .ia5-poster-dot {
  box-shadow: 0 2px 7px rgba(17,42,65,.18);
  transition: background-color 260ms ease, transform 260ms ease;
}
.ia5-page:not(.edit-mode) .content-layer.is-ia5-poster-alt .ia5-poster-dot-1 {
  background: rgba(255,255,255,.72) !important;
  transform: scale(.8);
}
.ia5-page:not(.edit-mode) .content-layer.is-ia5-poster-alt .ia5-poster-dot-2 {
  background: #2781eb !important;
  transform: scale(1.12);
}
.ia5-page .ia5-video-shade {
  transition: background-color 260ms ease;
  pointer-events: none;
}
.ia5-page .ia5-video-hit {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent !important;
}
.ia5-page .ia5-video-hit:focus-visible {
  outline: 3px solid rgba(43, 129, 235, .72);
  outline-offset: 5px;
}
.ia5-page .ia5-play-circle {
  display: grid;
  place-items: center;
  border: 4px solid rgba(255,255,255,.92);
  backdrop-filter: blur(5px);
  transition: transform 280ms var(--ease-damped), background-color 280ms ease;
}
.ia5-page .ia5-play-icon { pointer-events: none; }
.ia5-page .content-layer.is-ia5-video-hover .ia5-video-shade { background: rgba(5,10,15,.72) !important; }
.ia5-page .content-layer.is-ia5-video-hover .ia5-play-circle {
  transform: scale(1.08);
  background: rgba(34,126,229,.24) !important;
}

.ia5-page .ia5-kv-media,
.ia5-page .ia5-deliverable-media,
.ia5-page .ia5-deliverable-card {
  transition: transform 380ms var(--ease-damped), opacity 280ms ease, filter 280ms ease, box-shadow 380ms ease;
}
.ia5-page:not(.edit-mode) .ia5-kv-media:hover,
.ia5-page:not(.edit-mode) .ia5-kv-media:focus-visible {
  z-index: 20 !important;
  transform: scale(1.022);
  box-shadow: 0 22px 54px rgba(34, 74, 104, .17);
  outline: 2px solid rgba(41, 128, 232, .3);
  outline-offset: 5px;
}
.ia5-page:not(.edit-mode) .content-layer:has(.ia5-kv-media:not(.ia5-kv-vertical):not(.ia5-kv-vertical-alt):hover) .ia5-kv-media:not(.ia5-kv-vertical):not(.ia5-kv-vertical-alt):not(:hover) {
  opacity: .7;
  filter: saturate(.72) blur(1px);
}
.ia5-page:not(.edit-mode) .ia5-deliverable-card:has(+ .ia5-deliverable-media:hover),
.ia5-page:not(.edit-mode) .ia5-deliverable-media:hover {
  transform: translateY(-6px) scale(1.018);
  box-shadow: 0 18px 38px rgba(50, 86, 113, .14);
}

.ia5-page .ia5-back,
.ia5-page .ia5-next {
  display: grid;
  place-items: center;
  text-decoration: none;
}
.ia5-page .ia5-back {
  display: flex;
  justify-content: flex-start;
  gap: 14px;
}
.ia5-page .ia5-next { box-shadow: 0 12px 30px rgba(30,101,173,.2); }

.ia5-page .ia5-enter {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms ease, transform 780ms var(--ease-damped);
  will-change: opacity, transform;
}
.ia5-page .ia5-word.ia5-enter { transform: translateY(-20px); }
.ia5-page .ia5-video-media.ia5-enter { transform: scale(1.018); }
.ia5-page .ia5-enter-2 { transition-delay: 55ms; }
.ia5-page .ia5-enter-3 { transition-delay: 110ms; }
.ia5-page .ia5-enter-4 { transition-delay: 165ms; }
.ia5-page .ia5-enter.is-inview {
  opacity: 1;
  transform: none;
}
.ia5-page.edit-mode .ia5-enter,
.ia5-page.exporting .ia5-enter,
body.exporting .ia5-enter {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.ia5-page.edit-mode .ia5-video-shade { opacity: .36; }

@media (prefers-reduced-motion: reduce) {
  .ia5-page .ia5-enter,
  .ia5-page .ia5-kv-media,
  .ia5-page .ia5-deliverable-media,
  .ia5-page .ia5-play-circle {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ia5-page .ia5-kv-vertical,
  .ia5-page .ia5-kv-vertical-alt { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Global quality system — shared across home, secondary and case-study pages
   -------------------------------------------------------------------------- */

.media-slot.is-media-loading,
.media-slot.is-media-ready {
  background-color: transparent;
}

.site-transition-cover {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-page) var(--ease-standard);
}

.site-transition-cover.is-visible { opacity: 1; }

.site-route-active {
  transform: translateY(-4px) scale(1.03) !important;
  transition: transform var(--motion-hover) var(--ease-standard), opacity var(--motion-hover) var(--ease-standard) !important;
}

.site-route-muted {
  opacity: 0 !important;
  filter: none !important;
  transition: opacity var(--motion-hover) var(--ease-standard) !important;
}

.stat-card,
.cta-card,
.nav-card {
  border-radius: var(--radius-small) !important;
  box-shadow: var(--card-shadow) !important;
  transition: transform var(--motion-hover) var(--ease-standard), box-shadow var(--motion-hover) var(--ease-standard), opacity var(--motion-hover) var(--ease-standard) !important;
}

.nav-card:hover,
.nav-card:focus-visible,
.stat-card:hover,
.stat-card:focus-visible,
.cta-card:hover,
.cta-card:focus-visible,
.nav-card.is-auto-focused,
.stat-card.is-support-focused,
.cta-card.is-support-focused,
.about-canvas.is-main-group-cued .nav-card {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: var(--card-shadow) !important;
  filter: none !important;
}

.card-layer:has(.nav-card:hover) .nav-card:not(:hover),
.card-layer:has(.nav-card:focus-visible) .nav-card:not(:focus-visible),
.card-layer:has(.nav-card.is-auto-focused) .nav-card:not(.is-auto-focused) {
  opacity: .72;
  filter: none !important;
}

.main-click-label,
.aux-click-label {
  left: auto;
  right: 12px;
  top: 11px;
  bottom: auto;
  padding: 5px 8px;
  border-width: 1px;
  box-shadow: none;
  font-size: 11px;
  transform: translateY(4px) scale(.98);
  transition: opacity var(--motion-hover) var(--ease-standard), transform var(--motion-hover) var(--ease-standard);
}

.nav-card.is-auto-focused .main-click-label,
.nav-card:hover .main-click-label,
.nav-card:focus-visible .main-click-label,
.stat-card:hover .aux-click-label,
.stat-card:focus-visible .aux-click-label,
.cta-card:hover .aux-click-label,
.cta-card:focus-visible .aux-click-label,
.stat-card.is-support-focused .aux-click-label,
.cta-card.is-support-focused .aux-click-label {
  transform: translateY(0) scale(1) !important;
}

.cta-avatar-ripple,
.cta-avatar-ripple::before,
.cta-avatar-ripple::after {
  animation: none !important;
  box-shadow: none !important;
}

.launch-feature-card,
.campaign-project-wrap,
.campaign-card-frame,
.content-card-frame,
.projects-wide-card {
  border-radius: var(--radius-large) !important;
  box-shadow: var(--card-shadow) !important;
}

.launch-more-card,
.projects-client-card,
.projects-info-card,
.campaign-stat-card {
  border-radius: var(--radius-small) !important;
  box-shadow: var(--card-shadow) !important;
}

.launch-feature-media { border-radius: var(--radius-large) var(--radius-large) 0 0 !important; }
.launch-more-media { border-radius: var(--radius-small) 0 0 var(--radius-small) !important; }

.projects-client-card,
.projects-info-card,
.launch-more-piece,
.campaign-stat-card {
  transition-duration: var(--motion-hover) !important;
  transition-timing-function: var(--ease-standard) !important;
}

.projects-client-card:hover,
.projects-client-card:focus-visible,
.projects-info-card:hover,
.projects-info-card:focus-visible,
.launch-more-piece.is-launch-more-active,
.campaign-stat-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: var(--card-shadow) !important;
  filter: none !important;
  outline-width: 1px;
  outline-offset: 2px;
}

.projects-page .content-layer:has(.projects-client-card:hover) .projects-client-card:not(:hover),
.projects-page .content-layer:has(.projects-client-card:focus-visible) .projects-client-card:not(:focus-visible),
.projects-content-sync-layer:has(.projects-client-card:is(:hover, :focus-visible)) .projects-category,
.content-layer:has(.tianyadao-poster:hover) .tianyadao-poster:not(:hover),
.content-layer:has(.tianyadao-poster:focus-visible) .tianyadao-poster:not(:focus-visible),
.content-layer:has(.tianyadao-story:hover) .tianyadao-story:not(:hover),
.content-layer:has(.tianyadao-story:focus-visible) .tianyadao-story:not(:focus-visible),
.ia5-page:not(.edit-mode) .content-layer:has(.ia5-kv-media:hover) .ia5-kv-media:not(:hover) {
  filter: none !important;
  opacity: .7;
  transform: none;
}

.launch-feature-card.is-launch-feature-active,
.campaign-card-frame.is-campaign-active,
.content-card-frame.is-content-active,
.content-reveal-card.is-content-reveal-active,
.ia5-page:not(.edit-mode) .ia5-kv-media:hover,
.ia5-page:not(.edit-mode) .ia5-kv-media:focus-visible,
.ia5-page:not(.edit-mode) .ia5-deliverable-media:hover {
  box-shadow: var(--card-shadow) !important;
}

.launch-heading,
.campaign-heading,
.content-heading,
.projects-heading {
  font-size: var(--type-section-title) !important;
  line-height: 1.2 !important;
}

.launch-intro,
.campaign-intro,
.content-intro,
.projects-intro {
  font-size: var(--type-body) !important;
  line-height: 1.6 !important;
}

.launch-feature-title,
.campaign-card-title,
.content-card-title {
  font-size: clamp(20px, var(--type-card-title), 24px) !important;
}

.launch-feature-tags,
.launch-more-subtitle,
.campaign-card-badge,
.content-card-badge,
.projects-category {
  font-size: var(--type-small) !important;
}

.sushiro-word,
.toyota-word,
.tianyadao-word,
.wildlander-word,
.sienna-word,
.sienna26-word,
.ia5-word,
.lingshang-word,
.heritage-word,
.accord-word,
.levin-word,
.tiandao-word {
  color: rgba(8, 8, 8, .055) !important;
}

.projects-page .content-layer,
.launch-page .content-layer,
.campaign-page .content-layer,
.content-page .content-layer {
  animation-duration: var(--motion-page) !important;
  animation-timing-function: var(--ease-standard) !important;
}

/* One shared entrance timeline for the three secondary-page English titles. */
@property --secondary-title-crop {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --secondary-title-y {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --secondary-title-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --secondary-body-shift {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

:where(.launch-page, .campaign-page, .content-page, .experiment-page) .content-layer {
  --secondary-title-crop: var(--secondary-title-crop-final);
  --secondary-title-y: var(--secondary-title-y-final);
  --secondary-title-opacity: 1;
  --secondary-body-shift: 0px;
  animation-name: none !important;
}

body:not(.edit-mode):not(.exporting):is(.launch-page, .campaign-page, .content-page, .experiment-page)
  .content-layer:not(.is-secondary-title-entering) {
  --secondary-title-crop: 0px;
  --secondary-title-y: -30px;
  --secondary-title-opacity: 0;
  --secondary-body-shift: 20px;
}

body:not(.edit-mode):not(.exporting):is(.launch-page, .campaign-page, .content-page, .experiment-page)
  .content-layer.is-secondary-title-entering {
  animation-name: secondary-title-scene-sync !important;
  animation-duration: var(--motion-secondary-title) !important;
}

.launch-page .content-layer {
  --secondary-title-crop-final: 56px;
  --secondary-title-y-final: 22px;
}

.campaign-page .content-layer {
  --secondary-title-crop-final: 42px;
  --secondary-title-y-final: 18px;
}

.content-page .content-layer {
  --secondary-title-crop-final: 62px;
  --secondary-title-y-final: 18px;
}

:is(.launch-word, .campaign-word, .content-word, .experiment-word) {
  opacity: var(--secondary-title-opacity);
  clip-path: inset(0 0 var(--secondary-title-crop) 0);
  transform: translateY(var(--secondary-title-y));
}

:is(.launch-content-sync-layer, .campaign-content-sync-layer, .content-page-sync-layer, .experiment-content-sync-layer) {
  z-index: 2;
  translate: 0 var(--secondary-body-shift);
}

@keyframes secondary-title-scene-sync {
  0% {
    --secondary-title-crop: 0px;
    --secondary-title-y: -30px;
    --secondary-title-opacity: 0;
    --secondary-body-shift: 20px;
  }
  30%, 46% {
    --secondary-title-crop: 0px;
    --secondary-title-y: 0px;
    --secondary-title-opacity: 1;
    --secondary-body-shift: 20px;
  }
  88%, 100% {
    --secondary-title-crop: var(--secondary-title-crop-final);
    --secondary-title-y: var(--secondary-title-y-final);
    --secondary-title-opacity: 1;
    --secondary-body-shift: 0px;
  }
}

.projects-copy-in,
.projects-category,
.projects-client-card,
.projects-info-card,
.projects-card-copy,
.launch-copy-in,
.launch-feature,
.launch-more-piece,
.campaign-copy-in,
.campaign-card-piece,
.content-copy-in,
.content-reveal-primary,
.content-reveal-detail,
.content-card-piece,
.contact-word,
.contact-name,
.contact-role,
.contact-intro,
.contact-slogan,
.contact-panel,
.contact-avatar,
.experience-word,
.experience-copy-in,
.experience-timeline,
.sushiro-enter,
.accord-enter,
.accord-copy-enter,
.levin-enter {
  animation-duration: var(--motion-enter) !important;
  animation-timing-function: var(--ease-standard) !important;
}

.sienna-enter,
.sienna26-enter,
.lingshang-enter,
.toyota-enter,
.tianyadao-enter,
.wildlander-enter,
.ia5-enter,
.tiandao-enter {
  transition-duration: var(--motion-enter) !important;
  transition-timing-function: var(--ease-standard) !important;
}

.contact-panel,
.contact-qr,
.toyota-panel,
.toyota-execution-shell,
.toyota-tvc-thumb,
.toyota-result-panel,
.tianyadao-panel,
.tianyadao-strategy-icon,
.tianyadao-poster,
.tianyadao-story,
.wildlander-hero-frame,
.wildlander-content-shell,
.wildlander-film-frame,
.wildlander-spec-card,
.wildlander-kv-main,
.wildlander-kv-detail,
.wildlander-brochure,
.wildlander-creative-long,
.wildlander-social,
.lingshang-concept-shell,
.ia5-deliverable-card {
  box-shadow: var(--card-shadow) !important;
}

.contact-panel,
.tianyadao-panel { backdrop-filter: none !important; }

.experience-entry {
  transition-duration: var(--motion-hover) !important;
  transition-timing-function: var(--ease-standard) !important;
}

.experience-entry.is-experience-active {
  transform: translateY(-4px) scale(1.02) !important;
  filter: none !important;
}

.toyota-social-media,
.toyota-tvc-thumb,
.tianyadao-poster,
.tianyadao-story,
.wildlander-kv-detail,
.wildlander-brochure,
.wildlander-social,
.ia5-kv-media,
.ia5-deliverable-media,
.accord-kv,
.accord-event,
.levin-hero img,
.heritage-thumb {
  transition-duration: var(--motion-hover) !important;
  transition-timing-function: var(--ease-standard) !important;
}

.tianyadao-poster:hover,
.tianyadao-poster:focus-visible,
.tianyadao-story:hover,
.tianyadao-story:focus-visible,
body:not(.edit-mode) .wildlander-kv-detail:hover,
body:not(.edit-mode) .wildlander-kv-detail:focus-visible,
body:not(.edit-mode) .wildlander-brochure:hover,
body:not(.edit-mode) .wildlander-brochure:focus-visible,
body:not(.edit-mode) .wildlander-social:hover,
body:not(.edit-mode) .wildlander-social:focus-visible {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: var(--card-shadow) !important;
  filter: none !important;
  outline-width: 1px;
  outline-offset: 2px;
}

body:not(.edit-mode) .content-layer:has(.wildlander-kv-detail:hover) .wildlander-kv-detail:not(:hover),
body:not(.edit-mode) .content-layer:has(.wildlander-brochure:hover) .wildlander-brochure:not(:hover),
body:not(.edit-mode) .content-layer:has(.wildlander-social:hover) .wildlander-social:not(:hover) {
  filter: none !important;
  opacity: .7;
}

.case-footer-back,
.case-footer-next {
  transition: transform var(--motion-hover) var(--ease-standard), background-color var(--motion-hover) var(--ease-standard), box-shadow var(--motion-hover) var(--ease-standard) !important;
}

.case-footer-back:hover,
.case-footer-back:focus-visible {
  transform: translateX(-4px) !important;
  box-shadow: none !important;
}

.case-footer-next:hover,
.case-footer-next:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: var(--card-shadow) !important;
}

.case-footer-back:hover::before,
.case-footer-back:focus-visible::before { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .site-transition-cover,
  .site-route-active,
  .site-route-muted,
  .case-footer-back,
  .case-footer-back::before,
  .case-footer-next { transition: none !important; }
}

/* Case-specific media behavior takes precedence over the global card hover token. */
.tianyadao-page .tianyadao-poster:hover,
.tianyadao-page .tianyadao-poster:focus-visible {
  transform: translateY(-8px) scale(1.025) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .06) !important;
  transition-duration: 440ms !important;
  outline: none !important;
}
.tianyadao-page .tianyadao-story:hover,
.tianyadao-page .tianyadao-story:focus-visible {
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.tianyadao-page .tianyadao-story.tianyadao-enter.is-inview.is-hovered {
  transform: scale(1.13) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .10) !important;
  transition-duration: 420ms !important;
}

/* Sienna 2026: the paired highlights exchange real horizontal space. */
.sienna26-page .sienna26-highlight-main.sienna26-enter {
  transition-property: left, width, opacity, filter, transform, box-shadow !important;
  transition-duration: 480ms, 480ms, 320ms, 320ms, 480ms, 480ms !important;
  transition-timing-function: var(--ease-standard) !important;
}
.sienna26-page .sienna26-highlight-label-comfort {
  transition: left 480ms var(--ease-standard) !important;
}
.sienna26-page .content-layer[data-sienna26-focus="comfort"] .sienna26-highlight-comfort,
.sienna26-page .content-layer[data-sienna26-focus="comfort"] .sienna26-highlight-awd,
.sienna26-page .content-layer[data-sienna26-focus="awd"] .sienna26-highlight-awd,
.sienna26-page .content-layer[data-sienna26-focus="awd"] .sienna26-highlight-comfort {
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .sienna26-page .sienna26-highlight-main.sienna26-enter,
.sienna26-page .sienna26-highlight-label-comfort { transition: none !important; }
}

/* Display-only type token: never changes body copy, card labels, or video artwork. */
:root { --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif; }

body #export-stage :is(
  .about-word, .all-word, .secondary-word, .contact-word, .projects-word,
  .launch-word, .campaign-word, .experience-word, .content-word, .experiment-word,
  .sushiro-word, .toyota-word, .tianyadao-word, .wildlander-word, .sienna-word,
  .sienna26-word, .sienna26-watermark, .ia5-word, .lingshang-word, .lingshang-weekend-word,
  .heritage-word, .accord-word, .levin-collab-word, .levin-execution-word, .tiandao-word,
  .hm-brand-word, .aiw-giant, .iw-hero-giant, .iw-value-giant
) {
  font-family: var(--font-display) !important;
  /* Preserve the supplied Bold outlines rather than inventing an extra-black face. */
  font-synthesis: none;
}