:root {
  color-scheme: light;
  background: #1b100b;
  --paper: #f4bb68;
  --ink: #6b2d13;
}

@font-face {
  font-family: "PosterKai";
  src: url("../../assets/runtime/fonts/simkai-provinces.woff2") format("woff2");
  font-display: swap;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #1b100b;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: visible;
  background: #1b100b;
}

body {
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

body.has-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

body.has-modal #app {
  visibility: hidden;
}

body.has-modal #app *,
body.has-modal #app *::before,
body.has-modal #app *::after {
  animation-play-state: paused !important;
}

button,
img,
video {
  -webkit-touch-callout: none;
}

button {
  font: inherit;
}

#app {
  width: 100%;
  min-height: 100svh;
  background: var(--paper);
}

.boot-scene {
  position: relative;
  width: min(100vw, 640px);
  min-height: 0;
  aspect-ratio: 640 / 1260;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 48px rgba(0, 0, 0, .32);
}

.boot-scene > img {
  position: absolute;
  display: block;
  max-width: none;
}

.boot-scene__bg { inset: 0; width: 100%; height: 100%; }
.boot-scene__title { left: 18.906%; top: 18.651%; width: 67.656%; }
.boot-scene__book { left: 41.406%; top: 44.921%; width: 17.344%; }
.boot-scene__copy--one { left: 31.875%; top: 52.857%; width: 36.719%; }
.boot-scene__copy--two { left: 29.063%; top: 57.063%; width: 42.188%; }

.boot-progress {
  position: absolute;
  z-index: 3;
  top: 39.048%;
  left: 8.438%;
  width: 83.438%;
  height: 1.19%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7f210c 1%, #f5aa2e 1%);
}

.boot-progress span {
  position: absolute;
  right: -1.8%;
  bottom: 170%;
  color: #7b2b12;
  font: 800 clamp(18px, 5.3vw, 34px)/1 system-ui, sans-serif;
}

.scene-shell {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  box-shadow: 0 0 48px rgba(0, 0, 0, 0.32);
  /* Keep transformed long pages in the native iOS/XWeb scroll chain. */
  contain: layout style;
  opacity: 1;
}

.scene-shell.is-ready {
  opacity: 1;
}

.scene-shell--manual-scroll,
.scene-shell--manual-scroll .scene-stage {
  touch-action: pan-y;
}

.scene-shell--manual-scroll .control:not(.control--archive-swipe) {
  touch-action: pan-y;
}

.scene-shell--archive-locked {
  /* XWeb versions without svh support resolve the old rule to 0px. */
  height: min(100vh, calc(1402px * var(--stage-scale))) !important;
}

.scene-stage {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform-origin: 0 0;
  background: var(--paper);
}

.scene-base,
.native-rows {
  position: absolute;
  inset: 0;
}

.scene-base {
  z-index: 0;
  overflow: hidden;
}

.scene-base__slice {
  position: absolute;
  left: 0;
  display: block;
  width: 640px;
  max-width: none;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

.native-rows {
  z-index: 2;
  pointer-events: none;
}

.native-row {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.native-row.is-row-pending {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

.native-row.is-row-pending.is-row-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 560ms var(--row-delay, 0ms) cubic-bezier(.2, .72, .22, 1),
    transform 640ms var(--row-delay, 0ms) cubic-bezier(.18, .76, .2, 1);
}

.control {
  position: absolute;
  z-index: 10;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  touch-action: manipulation;
  overflow: visible;
  transform-origin: center;
}

.control:not(.control--archive-swipe):not(.control--continue):active {
  transform: scale(.975);
}


.control:focus,
.control:focus-visible,
.control:active {
  outline: 0;
  background: transparent;
}

.control--archive-swipe {
  z-index: 30;
  touch-action: none;
  overflow: visible;
}

.control--continue {
  inset: 0;
  width: 640px;
  height: 1260px;
}

html[data-qa="true"] .control {
  outline: 2px solid rgba(20, 205, 255, 0.72);
  outline-offset: -2px;
  background: rgba(20, 205, 255, 0.07);
}

.loading-copy {
  position: absolute;
  z-index: 3;
  display: block;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.loading-copy--title { left: 121px; top: 235px; width: 433px; }
.loading-copy--archive { left: 204px; top: 666px; width: 235px; }
.loading-copy--intro { left: 186px; top: 719px; width: 270px; }

.loading-progress {
  position: absolute;
  z-index: 4;
  top: 492px;
  left: 54px;
  width: 534px;
  height: 15px;
  overflow: visible;
  border-radius: 8px;
  background: #f5aa2e;
  box-shadow: 0 2px 5px rgba(73, 20, 8, 0.14);
}

.loading-progress::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 1%);
  border-radius: inherit;
  background: #7f210c;
  box-shadow: 0 2px 5px rgba(73, 20, 8, 0.16);
  content: "";
  transition: width 120ms linear;
}

.loading-progress__number {
  position: absolute;
  z-index: 3;
  top: -43px;
  right: -10px;
  width: 90px;
  color: #7b2b12;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
}

.loading-progress__marchers {
  position: absolute;
  z-index: 2;
  left: -174px;
  bottom: 8px;
  display: block;
  width: 215px;
  height: 104px;
  max-width: none;
  object-fit: contain;
  object-position: left bottom;
  transform: translate3d(calc(var(--march, 0) * 428px), 0, 0);
  transform-origin: left bottom;
  transition: transform 120ms linear;
  pointer-events: none;
}

.loading-book-motion {
  position: absolute;
  z-index: 3;
  top: 566px;
  left: 265px;
  display: block;
  width: 111px;
  height: 71px;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.loading-retry {
  position: absolute;
  left: 165px;
  top: 870px;
  width: 310px;
  min-height: 52px;
  border: 1px solid #8c3e08;
  border-radius: 4px;
  background: #fff2d8;
  color: #6b2d13;
  font: 20px/1.4 sans-serif;
  cursor: pointer;
}

.route-status {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #ffe0a0, transparent);
  transform: translateX(-100%);
}

html.is-routing .route-status {
  opacity: 1;
  animation: route-loading 900ms ease-in-out infinite;
}

@keyframes route-loading {
  to { transform: translateX(100%); }
}

.tap-feedback {
  position: fixed;
  z-index: 190;
  width: 0;
  height: 0;
  pointer-events: none;
}

.tap-feedback::before {
  content: '';
  position: absolute;
  left: -10px;
  top: -10px;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 244, 176, .96);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(202, 81, 19, .58);
  animation: tap-feedback-ring 560ms cubic-bezier(.16, .82, .2, 1) both;
}

.tap-feedback__particle {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffd66f;
  box-shadow: 0 0 5px rgba(190, 66, 13, .65);
  transform: rotate(var(--tap-angle)) translateY(-8px) scale(.75);
  animation: tap-feedback-particle 640ms cubic-bezier(.16, .82, .2, 1) both;
}

@keyframes tap-feedback-ring {
  0% { opacity: 0; transform: scale(.35); }
  34% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.25); }
}

@keyframes tap-feedback-particle {
  0% { opacity: 0; transform: rotate(var(--tap-angle)) translateY(-7px) scale(.55); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--tap-angle)) translateY(-34px) scale(.2); }
}

.toast {
  position: fixed;
  z-index: 130;
  left: 50%;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px));
  max-width: min(82vw, 460px);
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(54, 28, 16, 0.9);
  color: #fff3d5;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1);
}

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

.qa-label {
  position: fixed;
  z-index: 90;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  padding: 5px 8px;
  border: 1px solid rgba(255, 236, 196, 0.55);
  border-radius: 4px;
  background: rgba(48, 27, 17, 0.72);
  color: #fff0ca;
  font: 700 12px/1 system-ui, sans-serif;
  pointer-events: none;
}

.audio-toggle {
  position: fixed;
  display: grid;
  place-items: center;
  z-index: 95;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 244, 217, 0.64);
  border-radius: 50%;
  outline: 0;
  background: rgba(83, 43, 22, 0.58);
  color: #fff2cf;
  box-shadow: 0 4px 14px rgba(41, 17, 7, 0.18);
  cursor: pointer;
  touch-action: manipulation;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition:
    background-color 220ms ease,
    opacity 220ms ease,
    transform 180ms cubic-bezier(.2, .72, .22, 1);
}

.audio-toggle[hidden] {
  display: none;
}

.audio-toggle:active {
  transform: scale(.94);
}

.audio-toggle__icon { width: 24px; height: 24px; pointer-events: none; }
.audio-toggle__icon--off,
.audio-toggle.is-muted .audio-toggle__icon--on { display: none; }
.audio-toggle.is-muted .audio-toggle__icon--off { display: block; }

.audio-toggle.is-muted {
  background: rgba(69, 41, 28, 0.7);
  opacity: .82;
}


.video-modal[hidden] {
  display: none;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 18px;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 8, 5, 0.82);
  opacity: 0;
  transition: opacity 220ms ease;
}

.video-modal__card {
  position: relative;
  z-index: 1;
  width: min(100%, 640px);
  padding: 4px;
  border-radius: 6px;
  background: #1b100b;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(.82);
  transition: opacity 220ms ease, transform 360ms cubic-bezier(.18, .82, .22, 1);
}

.video-modal.is-visible .video-modal__backdrop,
.video-modal.is-visible .video-modal__card {
  opacity: 1;
}

.video-modal.is-visible .video-modal__card {
  transform: scale(1);
}

.video-modal__card video {
  display: block;
  width: 100%;
  max-height: 92svh;
  background: #000;
}

.video-modal__close {
  position: absolute;
  z-index: 2;
  top: -13px;
  right: -8px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  background: #5b301d;
  color: #fff3d7;
  font-size: 25px;
  line-height: 34px;
}

.poster-modal[hidden] { display: none; }

.poster-modal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
}

.poster-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 8, 5, .88);
  opacity: 0;
  transition: opacity 240ms ease;
}

.poster-modal__figure {
  position: relative;
  z-index: 1;
  width: min(86vw, 430px);
  max-height: 94svh;
  margin: 0;
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.96);
  transition: opacity 280ms ease, transform 460ms cubic-bezier(.16, .8, .2, 1);
}

.poster-modal.is-visible .poster-modal__backdrop,
.poster-modal.is-visible .poster-modal__figure { opacity: 1; }

.poster-modal.is-visible .poster-modal__figure { transform: translate3d(0, 0, 0) scale(1); }

.poster-modal__figure img {
  display: block;
  width: 100%;
  max-height: 94svh;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 18px 58px rgba(0, 0, 0, .52);
  -webkit-touch-callout: default;
}

.poster-modal__close {
  position: absolute;
  z-index: 2;
  top: -12px;
  right: -10px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 50%;
  background: #5b301d;
  color: #fff3d7;
  font-size: 25px;
  line-height: 34px;
}

/* Scroll-linked artwork. Paths are numeric waypoints only and are never drawn. */
.motion-asset {
  position: absolute;
  z-index: 4;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.motion-asset:not(.is-motion-asset-ready) {
  visibility: hidden;
}

.motion-route-star {
  z-index: 4;
  opacity: var(--motion-opacity, 0);
  transform: translate3d(var(--motion-x, 0), var(--motion-y, 0), 0) scale(var(--motion-scale, 1));
  transform-origin: center;
  filter: drop-shadow(0 0 calc(var(--star-glow, 0) * 18px) rgba(255, 244, 170, .95));
  will-change: transform, opacity;
  transition: opacity 620ms cubic-bezier(.18, .72, .2, 1);
}

.floating-artwork {
  position: fixed;
  z-index: 88;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(.2, .72, .22, 1);
}

.floating-artwork.is-artwork-ready {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

button.floating-artwork {
  cursor: pointer;
  pointer-events: auto;
}

.floating-artwork img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  filter: drop-shadow(0 3px 6px rgba(74, 27, 12, .28));
}

.floating-artwork--cue img {
  animation: floating-cue-rise 1.55s cubic-bezier(.4, 0, .2, 1) infinite;
}

.floating-artwork--cue.is-at-scroll-end {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(.94);
}

.floating-artwork--cue.is-at-scroll-end img { animation: none; }

.floating-artwork--back:active { transform: scale(.95); }

@keyframes floating-cue-rise {
  0%, 100% { opacity: .66; transform: translate3d(0, 7px, 0) scale(.97); }
  48% { opacity: 1; transform: translate3d(0, -6px, 0) scale(1.02); }
}

/* P01 v04: PSD geometry with AE-referenced, independently layered motion. */
.scene-shell--p01.p01-v04,
.p01-v04 .p01-v04-stage {
  overflow: hidden;
  touch-action: pan-y;
}

.scene-shell--p01.p01-v04 { background: #f3c982; }

.p01-v04-asset {
  position: absolute;
  display: block;
  max-width: none;
  opacity: 1;
  transform: translate3d(var(--p01-x, 0), var(--p01-y, 0), 0) scale(var(--p01-scale, 1));
  transform-origin: center;
  backface-visibility: hidden;
  pointer-events: none;
}

.p01-v04-asset:not(.is-p01-asset-ready) { visibility: hidden; }
.p01-v04:not(.is-p01-story-ready) .p01-v04-story-asset,
.p01-v04:not(.is-p01-lower-ready) .p01-v04-lower-asset { visibility: hidden; }

.p01-v04-upper,
.p01-v04-envelope-piece,
.p01-v04-letter-paper,
.p01-v04-letter-text,
.p01-v04-highlight,
.p01-v04-cover-cloud,
.p01-v04-star,
.p01-v04-final-line,
.p01-v04-final-hand {
  will-change: transform, opacity;
}

.p01-v04-base-cloud { z-index: 2; }
.p01-v04-envelope-cloud { z-index: 3; transform: translate3d(0, -770px, 0); }
.p01-v04-envelope-back { z-index: 4; transform: translate3d(0, -770px, 0); }
.p01-v04-letter-paper {
  z-index: 5;
  clip-path: inset(0 0 64% 0);
  transform: translate3d(0, 0, 0);
}
.p01-v04-envelope-front-1 { z-index: 6; transform: translate3d(0, -770px, 0); }
.p01-v04-envelope-front-2 { z-index: 7; transform: translate3d(0, -770px, 0); }
.p01-v04-highlight { z-index: 8; opacity: 0; }
.p01-v04-letter-text {
  z-index: 9;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  -webkit-mask-image: linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left top;
  -webkit-mask-size: 100% 1px;
  mask-image: linear-gradient(#000, #000);
  mask-repeat: no-repeat;
  mask-position: left top;
  mask-size: 100% 1px;
}
.p01-v04-audio-group { z-index: 10; }
.p01-v04-top-star { z-index: 11; opacity: 0; }
.p01-v04-top-cloud { z-index: 12; opacity: 0; }
.p01-v04-top-horn { z-index: 13; opacity: 0; }
.p01-v04-light { z-index: 14; opacity: 0; }

.p01-v04-audio-group {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.p01-v04-audio-icon,
.p01-v04-audio-wave,
.p01-v04-audio-ear { z-index: 1; transform-origin: center; }
.p01-v04-audio-wave,
.p01-v04-audio-ear { opacity: 0; }
.p01-v04-audio-control {
  z-index: 2;
  background: transparent;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.p01-v04-live-wave {
  position: absolute;
  z-index: 2;
  top: 249px;
  left: 452px;
  display: block;
  width: 124px;
  height: 30px;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-out;
}
.p01-v04-live-wave i {
  position: absolute;
  top: 50%;
  display: block;
  width: 3px;
  min-height: 2px;
  border-radius: 2px;
  background: #d66c25;
  box-shadow: 0 0 3px rgba(184, 73, 19, .24);
  transform: translate3d(0, -50%, 0);
  transform-origin: center;
}

.p01-v04-scroll-guide,
.p01-v04-mid-poem,
.p01-v04-copy-row,
.p01-v04-birds,
.p01-v04-lower-letter,
.p01-v04-lower-row,
.p01-v04-final-title,
.p01-v04-final-line,
.p01-v04-final-hand { opacity: 0; }

.p01-v04-cover-cloud { z-index: 10; }
.p01-v04-mid-poem,
.p01-v04-copy-row { z-index: 8; }
.p01-v04-birds { z-index: 5; }
.p01-v04-star { z-index: 6; opacity: 0; }
.p01-v04-lower-letter { z-index: 7; }
.p01-v04-lower-row {
  z-index: 8;
  --p01-reveal-feather: 16px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--p01-reveal-feather)),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left top;
  -webkit-mask-size: 100% calc(var(--p01-reveal-height, 0%) + var(--p01-reveal-feather));
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--p01-reveal-feather)),
    transparent 100%
  );
  mask-repeat: no-repeat;
  mask-position: left top;
  mask-size: 100% calc(var(--p01-reveal-height, 0%) + var(--p01-reveal-feather));
}
.p01-v04-scroll-guide { z-index: 15; }
.p01-v04-final-title,
.p01-v04-final-line,
.p01-v04-final-hand { z-index: 9; }
.p01-v04-final-line {
  transform: translate3d(var(--p01-x, 0), var(--p01-y, 0), 0) scaleX(var(--p01-scale-x, 1));
  transform-origin: left center;
}
.p01-v04-final-hand.is-p01-hand-settled {
  animation: p01-v04-hand-breathe 2.4s cubic-bezier(.42, 0, .58, 1) infinite;
}

.p01-v04-next {
  z-index: 16;
  opacity: 0;
  pointer-events: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.p01-v04.is-p01-cta-ready .p01-v04-next { pointer-events: auto; }
.p01-v04.is-p01-leaving {
  opacity: 0;
  transform: translate3d(0, -12px, 0);
  transition: opacity 360ms cubic-bezier(.42, 0, .58, 1), transform 360ms cubic-bezier(.42, 0, .58, 1);
}

.p01-v04.is-p01-intro-playing .p01-v04-light {
  animation: p01-v04-light-in 2260ms cubic-bezier(.42, 0, .58, 1) both;
}
.p01-v04.is-p01-intro-playing .p01-v04-top-cloud {
  animation: p01-v04-cloud-in 2730ms 330ms cubic-bezier(.42, 0, .58, 1) both;
}
.p01-v04.is-p01-intro-playing .p01-v04-top-horn {
  animation: p01-v04-horn-in 2530ms 600ms cubic-bezier(.42, 0, .58, 1) both;
}
.p01-v04.is-p01-intro-playing .p01-v04-top-star {
  animation: p01-v04-star-in 2100ms 760ms cubic-bezier(.42, 0, .58, 1) both;
}
.p01-v04.is-p01-intro-playing .p01-v04-envelope-cloud,
.p01-v04.is-p01-intro-playing .p01-v04-envelope-back,
.p01-v04.is-p01-intro-playing .p01-v04-envelope-front-1,
.p01-v04.is-p01-intro-playing .p01-v04-envelope-front-2 {
  animation: p01-v04-envelope-drop 2260ms 180ms cubic-bezier(.42, 0, .58, 1) both;
}
.p01-v04.is-p01-intro-playing .p01-v04-letter-paper {
  animation: p01-v04-paper-unfold 2260ms 180ms cubic-bezier(.42, 0, .58, 1) both;
}
.p01-v04.is-p01-intro-playing .p01-v04-letter-text {
  animation: p01-v04-text-drop-reveal 2260ms 180ms cubic-bezier(.42, 0, .58, 1) both;
}
.p01-v04.is-p01-intro-playing .p01-v04-highlight {
  animation: p01-v04-highlight-in 1730ms var(--p01-intro-delay, 2250ms) cubic-bezier(.42, 0, .58, 1) both;
}
.p01-v04.is-p01-intro-playing .p01-v04-audio-group {
  animation: p01-v04-audio-arrive 700ms 1450ms cubic-bezier(.42, 0, .58, 1) both;
}
.p01-v04:not(.is-p01-letter-playing) .p01-v04-audio-icon { opacity: .68; }
.p01-v04.is-p01-letter-playing .p01-v04-audio-icon { opacity: 0; }
.p01-v04.is-p01-letter-playing .p01-v04-audio-wave,
.p01-v04.is-p01-letter-playing .p01-v04-audio-ear { opacity: 1; }
.p01-v04.has-p01-live-wave.is-p01-letter-playing .p01-v04-audio-wave { opacity: 0; }
.p01-v04.is-p01-letter-playing .p01-v04-live-wave.is-live-active { opacity: .96; }
.p01-v04.is-p01-letter-playing .p01-v04-audio-ear {
  animation: p01-v04-audio-breathe 1.5s cubic-bezier(.42, 0, .58, 1) infinite;
}

@keyframes p01-v04-light-in {
  from { opacity: 0; transform: translate3d(-12px, -8px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes p01-v04-cloud-in {
  from { opacity: 0; transform: translate3d(-26px, 14px, 0) scale(1.025); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes p01-v04-horn-in {
  from { opacity: 0; transform: translate3d(34px, -14px, 0) scale(.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes p01-v04-star-in {
  from { opacity: 0; transform: translate3d(-18px, 12px, 0) scale(.82) rotate(-10deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
}
@keyframes p01-v04-envelope-drop {
  from { transform: translate3d(0, -770px, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes p01-v04-paper-unfold {
  from { clip-path: inset(0 0 64% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes p01-v04-text-drop-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    -webkit-mask-size: 100% 1px;
    mask-size: 100% 1px;
  }
  16% { opacity: 1; }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}
@keyframes p01-v04-highlight-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes p01-v04-audio-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes p01-v04-audio-breathe {
  0%, 100% { opacity: .78; transform: scale(.97); }
  50% { opacity: 1; transform: scale(1.055); }
}
@keyframes p01-v04-hand-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.96); }
  50% { transform: translate3d(0, 0, 0) scale(1.045); }
}

.motion-ink-photo {
  z-index: 3;
  opacity: 0;
  filter: saturate(.88) contrast(.94);
  transform: translate3d(0, 12px, 0) scale(.945);
}

.motion-ink-photo.is-motion-visible {
  opacity: 1;
  filter: saturate(1) contrast(1);
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 920ms cubic-bezier(.16, .74, .2, 1),
    filter 1100ms cubic-bezier(.16, .72, .18, 1),
    transform 1180ms cubic-bezier(.18, .78, .2, 1);
}

.motion-contextual-patch,
.motion-contextual-patch.is-motion-visible {
  filter: none;
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-contextual-patch.is-motion-visible {
  transition: opacity 1100ms cubic-bezier(.16, .74, .2, 1);
}

.motion-sparks {
  z-index: 5;
  opacity: 0;
  transform: translate3d(10px, 6px, 0) scale(.97);
}

.motion-sparks.is-motion-visible {
  opacity: .92;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 740ms cubic-bezier(.2, .72, .22, 1), transform 860ms cubic-bezier(.18, .78, .2, 1);
}

.motion-bullet {
  z-index: 6;
  opacity: 0;
  transform: translate3d(250px, -26px, 0) rotate(-4deg) scale(.9);
}

.motion-bullet.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0) scale(1);
  transition: opacity 260ms ease-out, transform 760ms cubic-bezier(.12, .78, .17, 1);
}

.motion-route-star {
  z-index: 1;
  opacity: var(--motion-opacity, 0);
  transform: translate3d(var(--motion-x, 0), var(--motion-y, 0), 0) scale(var(--motion-scale, 1));
  transform-origin: center;
  filter: drop-shadow(0 0 calc(var(--star-glow, 0) * 18px) rgba(255, 244, 170, .95));
  will-change: transform, opacity;
  transition: opacity 620ms cubic-bezier(.18, .72, .2, 1);
}

.motion-star-text-foreground {
  z-index: 2;
  opacity: 1;
  pointer-events: none;
}

.motion-bookmark {
  z-index: 3;
  opacity: 1;
  transform-origin: 50% 12%;
}

.motion-bookmark.is-bookmark-replacing {
  animation: bookmark-original-exit 420ms cubic-bezier(.4, 0, .76, .24) both;
}

.motion-bookmark.is-bookmark-dimmed { opacity: 0; }

.motion-bookmark--lit {
  z-index: 4;
  opacity: 0;
  filter: brightness(1) saturate(1);
}

.motion-bookmark--lit.is-bookmark-lit {
  opacity: 1;
  animation: bookmark-lit-arrive 920ms cubic-bezier(.14, .78, .18, 1) both;
}

.bookmark-particles {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  background:
    radial-gradient(circle at 27% 23%, rgba(255,249,205,1) 0 4px, transparent 5px),
    radial-gradient(circle at 72% 35%, rgba(255,238,160,.94) 0 3px, transparent 4px),
    radial-gradient(circle at 48% 68%, rgba(255,247,203,.9) 0 4px, transparent 5px),
    radial-gradient(circle at 81% 79%, rgba(255,231,139,.86) 0 3px, transparent 4px);
  opacity: 0;
  animation: bookmark-particle-rise 1280ms cubic-bezier(.16, .72, .2, 1) both;
}

.bookmark-swap-flare {
  position: absolute;
  z-index: 2;
  border: 3px solid rgba(255, 243, 176, .82);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 20px 8px rgba(255, 225, 113, .44),
    inset 0 0 17px rgba(255, 250, 213, .72);
  animation: bookmark-swap-flare 900ms cubic-bezier(.16, .72, .2, 1) both;
}

@keyframes bookmark-particle-rise {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.76); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, -42px, 0) scale(1.14); }
}

@keyframes bookmark-original-exit {
  0% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
  100% {
    opacity: 0;
    filter: brightness(1.12) saturate(.72);
    transform: translate3d(-38px, 22px, 0) rotate(-8deg) scale(.88);
  }
}

@keyframes bookmark-swap-flare {
  0% { opacity: 0; transform: scale(.52); }
  42% { opacity: .96; }
  100% { opacity: 0; transform: scale(1.28); }
}

@keyframes bookmark-lit-arrive {
  0% {
    opacity: 0;
    filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(255, 237, 167, 0));
    transform: translate3d(44px, -30px, 0) rotate(8deg) scale(.9);
  }
  48% {
    opacity: 1;
    filter: brightness(1.26) saturate(1.08) drop-shadow(0 0 18px rgba(255, 237, 167, .58));
    transform: translate3d(-5px, 3px, 0) rotate(-1.5deg) scale(1.075);
  }
  72% {
    transform: translate3d(2px, -1px, 0) rotate(.5deg) scale(.99);
  }
  100% {
    opacity: 1;
    filter: brightness(1.1) saturate(1.04) drop-shadow(0 0 8px rgba(255, 237, 167, .28));
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}

.motion-book-foreground {
  z-index: 5;
  opacity: 0;
}

.motion-book-foreground.is-motion-visible {
  opacity: 1;
  transition: opacity 700ms cubic-bezier(.16, .74, .2, 1);
}

.motion-location-dialog {
  z-index: 8;
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(.965);
  transform-origin: 50% 18%;
}

.motion-location-dialog.is-location-dialog-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 520ms cubic-bezier(.2, .72, .22, 1),
    transform 760ms cubic-bezier(.16, .82, .2, 1);
}

.control--location-jiajin,
.control--location-luding,
.control--location-chishui,
.control--location-grassland {
  z-index: 12;
  touch-action: manipulation;
}

.location-glow-guide {
  position: absolute;
  z-index: 7;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
  animation: location-guide-glow 2.2s cubic-bezier(.42, 0, .58, 1) infinite;
}

.location-glow-guide::before,
.location-glow-guide::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.location-glow-guide::before {
  inset: 11px;
  background: rgba(255, 252, 223, .6);
  box-shadow: 0 0 12px 5px rgba(255, 241, 165, .5);
}

.location-glow-guide::after {
  inset: 3px;
  border: 2px solid rgba(255, 246, 188, .64);
}

.location-glow-guide.is-location-activated {
  animation: location-guide-confirm 620ms cubic-bezier(.16, .82, .2, 1) both;
}

.location-glow-guide--primary {
  z-index: 9;
  animation: location-guide-primary 1.35s cubic-bezier(.42, 0, .58, 1) infinite;
}

.location-glow-guide--primary::before {
  inset: 21px;
  background: rgba(255, 255, 237, .94);
  box-shadow: 0 0 20px 9px rgba(255, 232, 126, .78);
}

.location-glow-guide--primary::after {
  inset: 3px;
  border: 3px solid rgba(255, 250, 206, .94);
  box-shadow: 0 0 12px rgba(255, 225, 100, .68);
}

@keyframes location-guide-glow {
  0%, 100% { opacity: .58; transform: scale(.86); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes location-guide-primary {
  0%, 100% { opacity: .72; transform: scale(.76); }
  48% { opacity: 1; transform: scale(1.08); }
}

@keyframes location-guide-confirm {
  0% { opacity: 1; transform: scale(.92); }
  55% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(1.5); }
}

.motion-diary-entry-cue {
  z-index: 11;
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(.92);
  transform-origin: center;
  pointer-events: none;
}

.motion-diary-entry-cue.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 560ms cubic-bezier(.2, .72, .22, 1),
    transform 720ms cubic-bezier(.16, .82, .2, 1);
  animation: diary-entry-breathe 2.35s 760ms cubic-bezier(.42, 0, .58, 1) infinite;
}

.motion-diary-entry-cue.is-diary-entry-pressed {
  animation: diary-entry-press 180ms cubic-bezier(.2, .72, .22, 1) both;
}

.control--diary-primary { z-index: 12; }

@keyframes diary-entry-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.97); }
  50% { transform: translate3d(0, -3px, 0) scale(1.045); }
}

@keyframes diary-entry-press {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  55% { transform: translate3d(0, 2px, 0) scale(.91); }
  100% { transform: translate3d(0, 0, 0) scale(.98); }
}

.poster-flow__panel,
.poster-flow__message,
.poster-flow__generate {
  z-index: 14;
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.975);
}

.poster-flow__panel.is-motion-visible,
.poster-flow__message.is-motion-visible,
.poster-flow__generate.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 520ms cubic-bezier(.2, .72, .22, 1), transform 660ms cubic-bezier(.16, .8, .2, 1);
}

.is-poster-hidden { visibility: hidden; }

.motion-poster-trigger {
  z-index: 12;
  opacity: 1;
  transform-origin: center;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(.2, .72, .22, 1);
}

.motion-poster-trigger.is-poster-trigger-complete {
  opacity: 0;
  transform: scale(.94);
}

.motion-poster-guide {
  z-index: 13;
  opacity: .9;
  transform-origin: center;
  will-change: transform, opacity;
}

.motion-poster-guide--left {
  animation: poster-guide-left 1.9s cubic-bezier(.4, 0, .2, 1) infinite;
}

.motion-poster-guide--right {
  animation: poster-guide-right 1.9s cubic-bezier(.4, 0, .2, 1) infinite;
}

.motion-poster-guide.is-guide-complete {
  animation: none;
  opacity: 0;
  transform: scale(.9);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(.4, 0, .2, 1);
}

@keyframes poster-guide-left {
  0%, 100% { opacity: .68; transform: translate3d(0, 0, 0) scale(.96); }
  48% { opacity: 1; transform: translate3d(9px, 0, 0) scale(1.035); }
}

@keyframes poster-guide-right {
  0%, 100% { opacity: .68; transform: translate3d(0, 0, 0) scale(.96); }
  48% { opacity: 1; transform: translate3d(-9px, 0, 0) scale(1.035); }
}

.poster-flow__province {
  position: absolute;
  z-index: 19;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 280ms cubic-bezier(.2, .72, .22, 1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.poster-flow__province.is-visible {
  opacity: 1;
}

.poster-flow__province-label {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 40px;
  padding: 7px 28px 0 27px;
  color: #c05501;
  font: 400 17px/24px "PosterKai", serif;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
}

.poster-flow__province-label::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 2px;
  background: rgba(192, 85, 1, .78);
}

.poster-flow__province-label::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 15px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid #a14720;
}

.poster-flow__province-label.has-value {
  color: transparent;
}

.poster-flow__province-artwork {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 27px;
  display: block;
  width: 167px;
  height: 27px;
  object-fit: contain;
  pointer-events: none;
}

.poster-flow__province-artwork[hidden] { display: none; }

.province-picker[hidden] { display: none; }

.province-picker {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  align-items: end;
}

.province-picker__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(54, 26, 5, .38);
  opacity: 0;
  transition: opacity 220ms ease;
}

.province-picker__sheet {
  position: relative;
  width: min(100%, 640px);
  max-height: min(62dvh, 540px);
  margin: 0 auto;
  overflow: auto;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
  background: #f9e9bf;
  border-top: 2px solid rgba(192, 85, 1, .48);
  transform: translate3d(0, 102%, 0);
  transition: transform 300ms cubic-bezier(.2, .72, .22, 1);
  -webkit-overflow-scrolling: touch;
}

.province-picker.is-visible .province-picker__backdrop { opacity: 1; }
.province-picker.is-visible .province-picker__sheet { transform: translate3d(0, 0, 0); }

.province-picker__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.province-picker__option {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 6px 4px;
  border: 1px solid rgba(192, 85, 1, .34);
  border-radius: 4px;
  background: rgba(255, 250, 230, .72);
  -webkit-tap-highlight-color: transparent;
}

.province-picker__option.is-selected {
  border-color: #c05501;
  background: rgba(255, 246, 211, .96);
  box-shadow: inset 0 0 0 1px rgba(192, 85, 1, .38), 0 0 8px rgba(192, 85, 1, .18);
}

.province-picker__artwork {
  display: none;
  width: calc(100% - 8px);
  max-width: 138px;
  aspect-ratio: 276 / 64;
  background-image: var(--province-atlas);
  background-size: 100% 3400%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.province-picker__text {
  color: #873b09;
  font-size: 14px;
  text-align: center;
}
.province-picker.is-atlas-ready .province-picker__artwork { display: block; }
.province-picker.is-atlas-ready .province-picker__text { display: none; }

@media (max-width: 420px) {
  .province-picker__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.control--poster-trigger,
.control--poster-generate { z-index: 18; }

.poster-flow__generate { z-index: 20; }
.control--poster-generate { z-index: 21; }

@media (prefers-reduced-motion: reduce) {
  .location-glow-guide,
  .location-glow-guide--primary,
  .bookmark-particles,
  .bookmark-swap-flare,
  .motion-bookmark.is-bookmark-replacing,
  .motion-bookmark--lit.is-bookmark-lit,
  .motion-diary-entry-cue.is-motion-visible,
  .motion-poster-guide { animation: none; }
}

.scene-shell--p03-1 .control--history {
  transform-origin: center;
  transform: none;
}

.scene-shell--p03-1 .control--history:active {
  transform: none;
}

.scene-shell--p03-1 .control--history.is-active {
  transform: none;
}

.scene-shell--p03-1 .native-rows { display: none; }
.scene-shell--p03-1 .p031-cloud {
  z-index: 8;
  will-change: transform, opacity;
  transform: translate3d(var(--p031-x, 0), var(--p031-y, 0), 0) scale(var(--p031-scale, 1));
  transition: none;
}
.scene-shell--p03-1 .p031-cloud-left.is-p031-cloud-splitting {
  animation: p031-cloud-left-split 1.9s cubic-bezier(.2, .7, .22, 1) both;
}
.scene-shell--p03-1 .p031-cloud-right.is-p031-cloud-splitting {
  animation: p031-cloud-right-split 1.9s cubic-bezier(.2, .7, .22, 1) both;
}
.scene-shell--p03-1 .p031-lamp,
.scene-shell--p03-1 .p031-horn { z-index: 7; }
.scene-shell--p03-1 .p031-history-label,
.scene-shell--p03-1 .p031-underline,
.scene-shell--p03-1 .p031-history-icon,
.scene-shell--p03-1 .p031-history-hand { z-index: 8; }
.scene-shell--p03-1 .p031-history-icon {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 8px, 0) scale(.97);
  transform-origin: center;
}
.scene-shell--p03-1 .p031-history-icon.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 540ms cubic-bezier(.22, .72, .24, 1), transform 680ms cubic-bezier(.16, .8, .2, 1);
  animation: history-control-breathe 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
.scene-shell--p03-1 .p031-history-icon.is-motion-visible.is-history-listening {
  animation: none;
  clip-path: inset(0 25% 0 60%);
}
.p031-history-wave {
  position: absolute;
  z-index: 8;
  top: 276px;
  width: 42px;
  height: 42px;
  pointer-events: none;
}
.p031-history-wave[hidden] { display: none; }
.p031-history-wave--left { left: 480px; }
.p031-history-wave--right { left: 565px; }
.scene-shell--p03-1 .p031-history-hand {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-24px, 4px, 0) scale(.92);
  transform-origin: 82% 56%;
}
.scene-shell--p03-1 .p031-history-hand.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 300ms cubic-bezier(.2, .72, .22, 1),
    transform 620ms cubic-bezier(.16, .8, .2, 1);
  animation: p031-history-guide-poster 1.9s 360ms cubic-bezier(.4, 0, .2, 1) infinite;
}
.scene-shell--p03-1 .p031-history-hand.is-history-guide-used {
  opacity: 0;
  animation: none;
  transition: opacity 220ms ease-out;
}
.scene-shell--p03-1 [data-motion^="diary-"],
.scene-shell--p03-1 [data-motion^="transition-row-"],
.scene-shell--p03-1 [data-motion^="next-"] { z-index: 7; }
.scene-shell--p03-1 .p031-underline,
.scene-shell--p03-1 .p031-next-underline {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}
.scene-shell--p03-1 .p031-underline.is-motion-visible,
.scene-shell--p03-1 .p031-next-underline.is-motion-visible {
  opacity: 1;
  transform: scaleX(1);
  transition:
    opacity 260ms cubic-bezier(.2, .72, .22, 1),
    transform 780ms cubic-bezier(.16, .8, .2, 1);
}
.scene-shell--p03-1 .p031-next-hand {
  opacity: 0;
  transform: translate3d(-54px, 0, 0) scale(.98);
}
.scene-shell--p03-1 .p031-next-hand.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 280ms cubic-bezier(.2, .72, .22, 1),
    transform 720ms cubic-bezier(.16, .8, .2, 1);
}
.scene-shell--p03-1 .p031-next-hand.is-p031-hand-settled {
  animation: history-control-breathe 2.2s 720ms cubic-bezier(.4, 0, .2, 1) infinite;
  transform-origin: 50% 50%;
}
.scene-shell--p03-1 .control--next:disabled { pointer-events: none; }

@keyframes history-control-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes history-control-listening {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}

@keyframes p031-history-guide-poster {
  0%, 100% { opacity: .68; transform: translate3d(0, 0, 0) scale(.96); }
  48% { opacity: 1; transform: translate3d(9px, 0, 0) scale(1.035); }
}

@keyframes p031-cloud-left-split {
  from { opacity: .15; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(-430px, -18px, 0) scale(1.018); }
}

@keyframes p031-cloud-right-split {
  from { opacity: .15; transform: translate3d(0, -270px, 0) scale(1); }
  to { opacity: 0; transform: translate3d(430px, -258px, 0) scale(1.018); }
}

@keyframes motion-pin-stab {
  0% { opacity: 0; transform: translate3d(8px, -78px, 34px) rotate(-11deg) scale(1.34); }
  22% { opacity: 1; }
  68% { transform: translate3d(-1px, 5px, 0) rotate(1.4deg) scale(.965); }
  84% { transform: translate3d(0, -2px, 0) rotate(-.5deg) scale(1.018); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-shell--p03-1 .p031-cloud-left.is-p031-cloud-splitting,
  .scene-shell--p03-1 .p031-cloud-right.is-p031-cloud-splitting,
  .scene-shell--p03-1 .p031-history-hand.is-motion-visible {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}

.motion-note {
  z-index: 5;
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}

.scene-shell--p03-2 .motion-route-star {
  z-index: 3;
  rotate: var(--p032-star-rotate, 0deg);
  filter: drop-shadow(0 0 10px rgba(255, 223, 114, .78));
  transition: none;
}

.motion-note.is-note-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 520ms cubic-bezier(.2, .72, .22, 1), transform 680ms cubic-bezier(.16, .78, .2, 1);
}

.motion-note--hidpi { image-rendering: auto; }

.motion-note-year {
  z-index: 6;
  opacity: 0;
  transform: translate3d(0, 34px, 0) rotate(-1.4deg) scale(.965);
}

.motion-note-year.is-note-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0) scale(1);
  transition: opacity 620ms cubic-bezier(.2, .72, .22, 1), transform 820ms cubic-bezier(.16, .78, .2, 1);
}

.p032-note-effect {
  position: absolute;
  z-index: 8;
  display: block;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.p032-note-snow {
  top: 92px;
  left: 196px;
  width: 444px;
  height: 620px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 32%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 32%, transparent 78%);
}

.p032-note-snow > i {
  position: absolute;
  top: -12px;
  left: var(--p032-particle-x);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 5px rgba(255, 255, 255, .72);
}

.p032-note-snow.is-active {
  animation: p032-effect-fade 1.55s ease-out both;
}

.p032-note-snow.is-active > i {
  animation: p032-snow-fall var(--p032-particle-duration) var(--p032-particle-delay) cubic-bezier(.2, .58, .35, 1) both;
}

.p032-note-vehicle {
  top: 1260px;
  left: 0;
  width: 520px;
  height: 640px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 80%, transparent);
}

.p032-note-vehicle > i {
  position: absolute;
  top: var(--p032-particle-x);
  left: -110px;
  width: 92px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 220, 142, .76), transparent);
  filter: blur(.35px);
}

.p032-note-vehicle.is-active {
  animation: p032-effect-fade 1.12s ease-out both;
}

.p032-note-vehicle.is-active > i {
  animation: p032-vehicle-pass var(--p032-particle-duration) var(--p032-particle-delay) cubic-bezier(.2, .72, .22, 1) both;
}

.scene-shell--p03-2 .is-p032-vehicle-shake {
  animation: p032-note-shake 760ms cubic-bezier(.2, .72, .22, 1) both;
}

.motion-pin {
  z-index: 7;
  opacity: 0;
  transform-origin: 50% 88%;
}

.motion-pin.is-pin-visible {
  animation: motion-pin-stab 680ms cubic-bezier(.18, .82, .2, 1) both;
}

.scene-shell--p03-2 .motion-next-underline {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

.scene-shell--p03-2 .motion-next-underline.is-motion-visible {
  opacity: 1;
  transform: scaleX(1);
  transition:
    opacity 260ms cubic-bezier(.2, .72, .22, 1),
    transform 780ms cubic-bezier(.16, .8, .2, 1);
}

.scene-shell--p03-2 .motion-next-hand {
  opacity: 0;
  transform: translate3d(-54px, 0, 0) scale(.98);
}

.scene-shell--p03-2 .motion-next-hand.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 280ms cubic-bezier(.2, .72, .22, 1),
    transform 720ms cubic-bezier(.16, .8, .2, 1);
}

.scene-shell--p03-2 .motion-next-hand.is-next-hand-settled {
  animation: history-control-breathe 2.2s 720ms cubic-bezier(.4, 0, .2, 1) infinite;
  transform-origin: center;
}

@keyframes p032-effect-fade {
  0% { opacity: 0; }
  18% { opacity: 1; }
  72% { opacity: .82; }
  100% { opacity: 0; }
}

@keyframes p032-snow-fall {
  from { opacity: 0; transform: translate3d(0, -12px, 0) scale(.5); }
  18% { opacity: .95; }
  to { opacity: 0; transform: translate3d(var(--p032-particle-drift), 420px, 0) scale(1.18); }
}

@keyframes p032-vehicle-pass {
  from { opacity: 0; transform: translate3d(0, 0, 0) scaleX(.55); }
  24% { opacity: 1; }
  to { opacity: 0; transform: translate3d(650px, -18px, 0) scaleX(1.25); }
}

@keyframes p032-note-shake {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  18% { transform: translate3d(4px, 0, 0) rotate(.22deg); }
  36% { transform: translate3d(-3px, 1px, 0) rotate(-.18deg); }
  56% { transform: translate3d(2px, 0, 0) rotate(.12deg); }
  76% { transform: translate3d(-1px, 0, 0) rotate(-.08deg); }
}

@media (prefers-reduced-motion: reduce) {
  .p032-note-effect,
  .p032-note-effect > i,
  .scene-shell--p03-2 .is-p032-vehicle-shake {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

.motion-reveal,
.motion-quote,
.motion-tv,
.motion-video-poster {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(.985);
}

.motion-reveal { z-index: 6; }
.motion-quote { z-index: 7; }
.motion-tv { z-index: 8; }

.motion-reveal.is-motion-visible,
.motion-quote.is-motion-visible,
.motion-tv.is-motion-visible,
.motion-video-poster.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 720ms cubic-bezier(.18, .72, .2, 1), transform 880ms cubic-bezier(.16, .8, .2, 1);
}

.motion-reveal.is-motion-visible.is-motion-exiting {
  opacity: 0;
  transform: translate3d(0, -16px, 0) scale(.99);
  transition:
    opacity 580ms cubic-bezier(.4, 0, .2, 1),
    transform 680ms cubic-bezier(.4, 0, .2, 1);
}

.scene-shell--p03-3 [data-motion^="intro-row"].is-motion-visible:not(.is-motion-exiting),
.scene-shell--p03-3 [data-motion^="transition-row"].is-motion-visible:not(.is-motion-exiting) {
  transition:
    opacity 340ms cubic-bezier(.18, .72, .2, 1),
    transform 420ms cubic-bezier(.16, .8, .2, 1);
}

.scene-shell--p03-3 [data-motion^="intro-row"].is-motion-visible.is-motion-exiting,
.scene-shell--p03-3 [data-motion^="transition-row"].is-motion-visible.is-motion-exiting {
  transition:
    opacity 260ms cubic-bezier(.4, 0, .2, 1),
    transform 300ms cubic-bezier(.4, 0, .2, 1);
}

.scene-shell--p03-3 [data-motion="title"].is-motion-visible,
.scene-shell--p03-3 [data-motion="intro-caption"].is-motion-visible,
.scene-shell--p03-3 [data-motion="transition-title"].is-motion-visible,
.scene-shell--p03-3 [data-motion="transition-caption"].is-motion-visible {
  transition:
    opacity 420ms cubic-bezier(.18, .72, .2, 1),
    transform 520ms cubic-bezier(.16, .8, .2, 1);
}

.scene-shell--p03-3 .native-rows { display: none; }
.scene-shell--p03-3 .motion-route-star {
  z-index: 4;
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
  transition: none;
}
.scene-shell--p03-3 [data-motion="title"],
.scene-shell--p03-3 [data-motion^="intro-"],
.scene-shell--p03-3 [data-motion^="transition-"],
.scene-shell--p03-3 [data-motion="summary"],
.scene-shell--p03-3 [data-motion="bookmark"] { z-index: 6; }
.scene-shell--p03-3 [data-motion="quote-1"],
.scene-shell--p03-3 [data-motion="quote-2"],
.scene-shell--p03-3 [data-motion="quote-3"],
.scene-shell--p03-3 [data-motion="quote-4"] { z-index: 7; }
.scene-shell--p03-3 [data-motion^="person-"] { z-index: 8; }
.scene-shell--p03-3 [data-motion^="person-info-"] { z-index: 11; }
.scene-shell--p03-3 .motion-video-poster { z-index: 12; }
.scene-shell--p03-3 [data-motion^="tv-"] { z-index: 13; }
.scene-shell--p03-3 [data-motion="silk"],
.scene-shell--p03-3 [data-motion="horn"] { z-index: 3; }

.p033-jiajin-guide {
  position: absolute;
  z-index: 9;
  opacity: 0;
  pointer-events: none;
}

.p033-bookmark-label-feedback {
  position: absolute;
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
}

.p033-bookmark-label-feedback::before,
.p033-bookmark-label-feedback::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.p033-bookmark-label-feedback::before {
  inset: 13px 6px 15px;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 192, .86), transparent);
  filter: blur(10px);
}

.p033-bookmark-label-feedback::after {
  right: 12px;
  bottom: 16px;
  left: 12px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 250, 211, .94), transparent);
  transform: scaleX(.18);
}

.p033-bookmark-label-feedback.is-location-activated {
  animation: p033-bookmark-label-confirm 620ms cubic-bezier(.16, .82, .2, 1) both;
}

@keyframes p033-bookmark-label-confirm {
  0% { opacity: 0; transform: scale(.94); }
  42% { opacity: 1; transform: scale(1.035); }
  100% { opacity: 0; transform: scale(1.08); }
}

.motion-video-poster {
  position: absolute;
  z-index: 8;
  display: block;
  max-width: none;
  border-radius: 5px;
  object-fit: cover;
  pointer-events: none;
}

.motion-video-play-artwork {
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 10px, 0) scale(.9);
  transform-origin: center;
  filter: drop-shadow(0 6px 13px rgba(45, 20, 9, .28));
}

.motion-video-play-artwork.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 560ms cubic-bezier(.18, .72, .2, 1), transform 760ms cubic-bezier(.16, .8, .2, 1);
  animation: video-play-breathe 2.2s 800ms ease-in-out infinite;
}

@keyframes video-play-breathe {
  0%, 100% { filter: drop-shadow(0 6px 13px rgba(45, 20, 9, .28)); transform: translate3d(0, 0, 0) scale(1); }
  50% { filter: drop-shadow(0 6px 18px rgba(255, 233, 174, .52)); transform: translate3d(0, 0, 0) scale(1.055); }
}

.control--video-preview { z-index: 16; }

.fatal-error {
  display: grid;
  min-height: 100svh;
  place-content: center;
  gap: 8px;
  padding: 24px;
  background: #f0b861;
  color: #6b2d13;
  text-align: center;
}

.fatal-error strong {
  font-size: 20px;
}

.fatal-error span {
  font-size: 14px;
}

.fatal-error button {
  justify-self: center;
  margin-top: 16px;
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: inherit;
  background: #fff2d8;
  font: inherit;
  cursor: pointer;
}

@media (min-width: 641px) {
  body { padding-inline: calc((100vw - 640px) / 2); }
}

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