@font-face {
      font-family: "Dianzi Changhei";
      src: url("assets/0810/fonts/dianzi-changhei-90-v1.4.4.ttf") format("truetype");
      font-display: swap;
      font-style: normal;
      font-weight: 400 900;
    }

    :root {
      --stage-scale: 1;
      --stage-left: 50vw;
      --stage-top: 50vh;
      --motion-standard: cubic-bezier(.22, .72, .22, 1);
      --motion-emphasized: cubic-bezier(.16, .82, .2, 1);
      --motion-settle: cubic-bezier(.2, .86, .24, 1);
      --motion-responsive: cubic-bezier(.18, .78, .18, 1);
      --motion-fade-duration: 520ms;
    }

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

    *::selection {
      background: transparent;
      color: inherit;
    }

    img[data-src] {
      color: transparent;
    }

    img[data-src]:not([data-loaded="true"]) {
      opacity: 0 !important;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: #1d110d;
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
      overscroll-behavior: none;
    }

    body {
      position: fixed;
      inset: 0;
      min-height: 100%;
      min-height: -webkit-fill-available;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    button,
    [role="button"],
    .swipe-zone,
    .journal-hotspot,
    .take-letter-hotspot,
    .diary-entry-hotspot,
    .story-hotspot,
    .story-video-play {
      outline: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none;
      user-select: none;
      -webkit-appearance: none;
      appearance: none;
      color: inherit;
    }

    button:focus,
    [role="button"]:focus { outline: none; }

    button:focus-visible,
    [role="button"]:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px rgba(255, 207, 83, .66);
    }

    .stage.is-story-transitioning .diary-entry-hotspot,
    .stage.is-story-transitioning .story-hotspot,
    .stage.is-story-transitioning .story-video-play {
      pointer-events: none;
    }

    .stage::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 58;
      opacity: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 47%, rgba(255, 240, 190, .11), transparent 52%),
        linear-gradient(180deg, rgba(91, 43, 21, .08), rgba(247, 205, 118, .045) 48%, rgba(87, 35, 18, .07));
      mix-blend-mode: soft-light;
    }

    .stage::before {
      content: attr(data-page-id) "-" attr(data-page-state);
      position: absolute;
      left: 12px;
      top: 12px;
      z-index: 61;
      min-width: 84px;
      padding: 7px 10px 6px;
      border: 1px solid rgba(255, 244, 207, .34);
      border-radius: 3px;
      color: #fff4cf;
      background: rgba(49, 23, 14, .62);
      box-shadow: 0 3px 10px rgba(38, 15, 9, .18);
      font: 700 18px/1.15 "Dianzi Changhei", sans-serif;
      letter-spacing: 0;
      text-align: center;
      pointer-events: none;
      white-space: nowrap;
    }

    .stage.is-story-transitioning::after {
      animation: scene-transition-wash 620ms var(--motion-emphasized) both;
    }

    .stage {
      position: fixed;
      top: var(--stage-top);
      left: var(--stage-left);
      width: 640px;
      height: 1260px;
      overflow: hidden;
      transform: translate3d(-50%, -50%, 0) scale(var(--stage-scale));
      transform-origin: center;
      background: #f4d884;
      isolation: isolate;
      overscroll-behavior: none;
      contain: layout paint style;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .tap-light {
      --tap-x: 320px;
      --tap-y: 630px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 55;
      width: 164px;
      height: 164px;
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      background: radial-gradient(circle, rgba(255, 252, 218, .78) 0 3%, rgba(255, 214, 104, .34) 18%, rgba(238, 139, 37, .12) 42%, transparent 68%);
      mix-blend-mode: screen;
      transform: translate3d(calc(var(--tap-x) - 82px), calc(var(--tap-y) - 82px), 0) scale(.34);
      will-change: transform, opacity;
    }

    .tap-light::after {
      content: "";
      position: absolute;
      inset: 34px;
      border: 2px solid rgba(255, 232, 161, .68);
      border-radius: 50%;
    }

    .tap-light.is-active {
      animation: tap-light-bloom 620ms cubic-bezier(.16, 1, .3, 1) both;
    }

    .audio-toggle {
      position: absolute;
      top: max(4px, calc(env(safe-area-inset-top) - 14px));
      right: 4px;
      z-index: 60;
      width: 80px;
      height: 80px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      box-shadow: none;
      cursor: pointer;
      touch-action: manipulation;
      transition: background-color 180ms ease, transform 160ms ease, opacity 220ms ease;
    }

    .audio-toggle::before {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(255, 243, 205, .72);
      border-radius: 50%;
      background: rgba(86, 38, 21, .4);
      box-shadow: 0 4px 14px rgba(52, 21, 12, .2), inset 0 0 0 1px rgba(112, 55, 26, .18);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      transition: background-color 180ms ease;
    }

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

    .audio-speaker {
      position: absolute;
      left: 28px;
      top: 27px;
      width: 24px;
      height: 26px;
      background: #fff3cd;
      clip-path: polygon(0 34%, 30% 34%, 75% 3%, 75% 97%, 30% 66%, 0 66%);
      filter: drop-shadow(0 2px 3px rgba(61, 25, 13, .34));
    }

    .audio-speaker::after {
      content: "";
      position: absolute;
      left: 17px;
      top: 5px;
      width: 12px;
      height: 16px;
      border-right: 3px solid #fff3cd;
      border-radius: 50%;
    }

    .audio-toggle::after {
      content: "";
      position: absolute;
      left: 25px;
      top: 38px;
      width: 31px;
      height: 3px;
      border-radius: 2px;
      background: #fff3cd;
      opacity: 0;
      transform: rotate(-45deg) scaleX(.3);
      transition: opacity 180ms ease, transform 180ms ease;
      box-shadow: 0 1px 3px rgba(61, 25, 13, .34);
    }

    .audio-toggle[data-muted="true"]::before {
      background: rgba(69, 31, 20, .58);
    }

    .audio-toggle[data-muted="true"]::after {
      opacity: 1;
      transform: rotate(-45deg) scaleX(1);
    }

    .scene {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      contain: layout paint style;
      transition: opacity 520ms var(--motion-standard), visibility 0s linear 520ms;
    }

    .scene.is-active {
      z-index: 2;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition-delay: 0s;
    }

    .scene.is-entering {
      z-index: 2;
      visibility: visible;
      transition-delay: 0s;
    }

    .scene.is-leaving {
      z-index: 3;
      opacity: 0;
      visibility: visible;
      pointer-events: none;
      transition-delay: 0s;
    }

    .scene:not(.is-active):not(.is-entering):not(.is-leaving) *,
    .scene:not(.is-active):not(.is-entering):not(.is-leaving) *::before,
    .scene:not(.is-active):not(.is-entering):not(.is-leaving) *::after {
      animation-play-state: paused !important;
    }

    .design-element {
      position: absolute;
      display: block;
      max-width: none;
      user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    .page-base {
      inset: 0;
      width: 640px;
      height: 1260px;
    }
    /* Loading scene */
    #loading-station-name {
      left: 132px;
      top: 241px;
      width: 407px;
      height: 51px;
      opacity: 0;
    }

    #loading-marchers {
      left: 57px;
      top: 398px;
      width: 215px;
      height: 104px;
      mix-blend-mode: multiply;
      opacity: 0;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }

    .progress-shell {
      position: absolute;
      left: 51px;
      top: 493px;
      width: 540px;
      height: 17px;
      overflow: hidden;
      border: 0;
      border-radius: 9px;
      background: #efa63d;
      box-shadow: 0 7px 9px rgba(87, 35, 11, 0.28), inset 0 1px 2px rgba(255, 236, 166, 0.72);
    }

    .progress-fill {
      width: 1%;
      height: 100%;
      border-radius: inherit;
      background: #9d260f;
      box-shadow: inset 0 1px 2px rgba(255, 176, 77, 0.38);
      will-change: width;
    }

    .progress-percent {
      position: absolute;
      top: 469px;
      right: 55px;
      min-width: 58px;
      color: #9b2a13;
      font-family: "DIN Condensed", "Arial Narrow", sans-serif;
      font-size: 24px;
      font-weight: 700;
      line-height: 1;
      text-align: right;
      letter-spacing: 0;
      text-shadow: 0 1px rgba(255, 218, 132, 0.8);
    }

    #loading-book {
      left: 265px;
      top: 566px;
      width: 111px;
      height: 71px;
      opacity: 0;
    }

    #loading-copy {
      left: 183px;
      top: 715px;
      width: 277px;
      height: 306px;
      opacity: 0;
      clip-path: inset(0 0 100% 0);
    }

    #loading-scene.is-visual-ready #loading-station-name {
      animation: soft-in 650ms 80ms both;
    }

    #loading-scene.is-visual-ready #loading-marchers {
      opacity: 1;
      transition: opacity 480ms 100ms cubic-bezier(.22,.61,.36,1);
    }

    #loading-scene.is-visual-ready #loading-book {
      animation: book-in 720ms 420ms both, book-breathe 1.6s 1.17s ease-in-out infinite;
    }

    #loading-scene.is-visual-ready #loading-copy {
      animation: copy-reveal 1.35s 650ms cubic-bezier(.22,.72,.22,1) forwards;
    }

    /* Archive scene */
    #archive-scene {
      perspective: 1200px;
      background: #d1a75f;
      --archive-cloud-x: 0px;
      --archive-cloud-y: 0px;
      --archive-cloud-x-reverse: 0px;
      --archive-cloud-y-reverse: 0px;
    }

    #archive-scroll {
      overflow-y: hidden;
    }

    #archive-scene.has-letter #archive-scroll {
      overflow-y: auto;
    }

    #archive-content {
      height: 3594px;
      touch-action: pan-y;
      --bag-drag-x: 0px;
      --bag-drag-y: 0px;
      --bag-gyro-x: 0px;
      --bag-gyro-y: 0px;
      --bag-gyro-rx: 0deg;
      --bag-gyro-ry: 0deg;
    }

    .archive-state-image {
      position: absolute;
      left: 0;
      display: block;
      width: 640px;
      max-width: none;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      transition: opacity 900ms cubic-bezier(.2,.72,.22,1), filter 900ms ease;
    }

    #archive-before {
      top: 0;
      z-index: 1;
      height: 1402px;
    }

    #archive-backdrop-tail {
      top: 1400px;
      z-index: 1;
      height: 2194px;
    }

    .archive-follow-layer {
      position: absolute;
      left: 0;
      display: block;
      width: 640px;
      max-width: none;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      transform: translate3d(calc(var(--bag-drag-x) + var(--bag-gyro-x)), calc(var(--bag-drag-y) + var(--bag-gyro-y)), 0) rotateX(var(--bag-gyro-rx)) rotateY(var(--bag-gyro-ry));
      transform-origin: 50% 54%;
      transition: transform 340ms cubic-bezier(.2,.72,.22,1);
      will-change: transform;
    }

    #archive-bag,
    #archive-bag-flap,
    #archive-rope-top,
    #archive-rope-bottom,
    #archive-seal-top,
    #archive-seal-bottom {
      top: 364px;
      height: 1003px;
    }

    #archive-bag {
      z-index: 2;
      clip-path: inset(228px 0 0 0);
      -webkit-clip-path: inset(228px 0 0 0);
    }

    #archive-bag-flap {
      z-index: 4;
      clip-path: inset(0 0 771px 0);
      -webkit-clip-path: inset(0 0 771px 0);
      transform-origin: 50% 228px;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    #archive-rope-top,
    #archive-rope-bottom,
    #archive-seal-top,
    #archive-seal-bottom {
      z-index: 7;
    }

    #archive-rope-top {
      clip-path: inset(0 0 745px 0);
      -webkit-clip-path: inset(0 0 745px 0);
      transform-origin: 50% 258px;
    }

    #archive-rope-bottom {
      clip-path: inset(258px 0 0 0);
      -webkit-clip-path: inset(258px 0 0 0);
      transform-origin: 50% 258px;
    }

    #archive-seal-top,
    #archive-seal-bottom {
      z-index: 6;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    #archive-seal-top { transform-origin: 50% 228px; }
    #archive-seal-bottom { transform-origin: 50% 326px; }

    .archive-open-slit {
      position: absolute;
      left: 0;
      top: 570px;
      z-index: 3;
      width: 640px;
      height: 68px;
      opacity: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(49, 22, 15, .94) 0%, rgba(75, 35, 20, .9) 34%, rgba(117, 65, 31, .86) 72%, rgba(144, 90, 45, .72) 100%);
      box-shadow: inset 0 13px 18px rgba(32, 13, 9, .54), inset 0 -8px 12px rgba(209, 146, 77, .18);
      transform: scaleY(.08);
      transform-origin: 50% 0;
    }

    #archive-content.is-following .archive-follow-layer { transition-duration: 0ms; }
    #archive-content.is-sensor-following .archive-follow-layer { transition-duration: 0ms; }

    #archive-gold-texture {
      display: none;
      top: 373px;
      z-index: 3;
      height: 871px;
    }

    #archive-swipe-guide {
      top: 636px;
      z-index: 8;
      height: 156px;
      transition: opacity 280ms ease, transform 340ms cubic-bezier(.2,.72,.22,1);
    }

    #archive-scene.is-envelope-opening #archive-swipe-guide,
    #archive-scene.is-envelope-opening .archive-drop-target {
      opacity: 0;
      pointer-events: none;
      animation: none;
      transition: opacity 180ms ease;
    }

    .archive-drop-target {
      position: absolute;
      left: 426px;
      top: 612px;
      z-index: 7;
      width: 188px;
      height: 178px;
      pointer-events: none;
      border: 2px dashed rgba(255, 223, 147, .84);
      outline: 1px solid rgba(105, 35, 21, .52);
      outline-offset: 3px;
      background: rgba(117, 45, 26, .035);
      box-shadow: inset 0 0 0 1px rgba(111, 39, 23, .28), 0 0 0 0 rgba(255, 204, 91, 0);
      opacity: .9;
      animation: archive-target-breathe 1.75s ease-in-out infinite;
      transition: opacity 240ms ease, border-color 240ms ease, box-shadow 240ms ease, background-color 240ms ease;
    }

    .archive-drop-target::before,
    .archive-drop-target::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .archive-drop-target::before {
      left: 17px;
      top: 22px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(135, 47, 28, .88);
      box-shadow: 0 0 0 6px rgba(255, 210, 111, .18), 0 0 16px rgba(255, 201, 87, .66);
      animation: archive-guide-travel 1.75s cubic-bezier(.2,.72,.22,1) infinite;
    }

    .archive-drop-target::after {
      left: 23px;
      right: 23px;
      top: 31px;
      height: 2px;
      background: linear-gradient(90deg, rgba(125, 44, 27, .72), rgba(255, 216, 123, .7));
      transform-origin: left;
      animation: archive-guide-line 1.75s ease-in-out infinite;
    }

    .archive-drop-target.is-near {
      border-color: rgba(255, 218, 126, .9);
      background: rgba(255, 210, 111, .08);
      box-shadow: inset 0 0 22px rgba(255, 221, 142, .2), 0 0 24px rgba(255, 199, 76, .34);
    }

    #archive-scene.is-drop-confirmed .archive-drop-target {
      animation: archive-target-confirm 620ms cubic-bezier(.18,.82,.2,1) both;
    }

    .archive-ink-bloom {
      position: absolute;
      left: 522px;
      top: 700px;
      z-index: 9;
      width: 230px;
      height: 230px;
      opacity: 0;
      pointer-events: none;
      transform: translate3d(-50%, -50%, 0) scale(.06) rotate(-9deg);
      transform-origin: center;
      mix-blend-mode: multiply;
      will-change: transform, opacity, filter;
    }

    .archive-ink-bloom::before,
    .archive-ink-bloom::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .archive-ink-bloom::before {
      border-radius: 41% 59% 53% 47% / 48% 37% 63% 52%;
      clip-path: polygon(50% 0, 61% 8%, 73% 5%, 80% 17%, 94% 21%, 91% 37%, 100% 49%, 91% 60%, 95% 76%, 80% 82%, 73% 96%, 58% 91%, 46% 100%, 34% 91%, 19% 95%, 14% 81%, 2% 73%, 10% 58%, 0 46%, 10% 35%, 6% 20%, 22% 16%, 31% 3%);
      background: radial-gradient(circle at 48% 46%, rgba(59, 19, 13, .92) 0 8%, rgba(92, 31, 21, .78) 20%, rgba(116, 47, 29, .5) 42%, rgba(98, 42, 28, .2) 61%, transparent 74%);
      filter: blur(1.6px);
    }

    .archive-ink-bloom::after {
      inset: 31px;
      border: 3px solid rgba(91, 36, 25, .5);
      border-radius: 46% 54% 42% 58% / 55% 39% 61% 45%;
      filter: blur(.5px);
    }

    .archive-ink-bloom.is-inking {
      animation: archive-ink-spread 980ms cubic-bezier(.14,.72,.2,1) both;
    }

    .archive-ink-bloom.is-inking::before {
      animation: archive-ink-pulse 980ms cubic-bezier(.18,.76,.2,1) both;
    }

    .archive-ink-bloom.is-inking::after {
      animation: archive-water-ring 920ms 70ms cubic-bezier(.16,.74,.2,1) both;
    }

    #archive-scene.is-drop-confirmed #archive-bag,
    #archive-scene.is-drop-confirmed #archive-bag-flap,
    #archive-scene.is-drop-confirmed #archive-rope-top,
    #archive-scene.is-drop-confirmed #archive-rope-bottom,
    #archive-scene.is-drop-confirmed #archive-seal-top,
    #archive-scene.is-drop-confirmed #archive-seal-bottom {
      transform: translate3d(8px, 0, 0) scale(1.018);
      transition: transform 300ms cubic-bezier(.18,.82,.2,1.08), filter 300ms ease;
      filter: drop-shadow(0 18px 18px rgba(63, 27, 14, .18));
    }

    #archive-scene.is-invalid-drop #archive-bag,
    #archive-scene.is-invalid-drop #archive-bag-flap,
    #archive-scene.is-invalid-drop #archive-rope-top,
    #archive-scene.is-invalid-drop #archive-rope-bottom,
    #archive-scene.is-invalid-drop #archive-seal-top,
    #archive-scene.is-invalid-drop #archive-seal-bottom {
      animation: archive-bag-return 360ms cubic-bezier(.2,.74,.22,1) both;
    }

    #archive-scene.is-envelope-opening #archive-bag {
      animation: archive-bag-body-open 900ms cubic-bezier(.16,.82,.2,1) both;
    }

    #archive-scene.is-envelope-opening #archive-bag-flap {
      animation: archive-flap-open 980ms 280ms cubic-bezier(.16,.82,.2,1) both;
    }

    #archive-scene.is-envelope-opening #archive-rope-top {
      animation: archive-rope-top-break 620ms cubic-bezier(.18,.82,.2,1) both;
    }

    #archive-scene.is-envelope-opening #archive-rope-bottom {
      animation: archive-rope-bottom-break 680ms cubic-bezier(.18,.82,.2,1) both;
    }

    #archive-scene.is-envelope-opening #archive-seal-top {
      animation: archive-seal-top-open 980ms 280ms cubic-bezier(.16,.82,.2,1) both;
    }

    #archive-scene.is-envelope-opening #archive-seal-bottom {
      animation: archive-seal-bottom-release 720ms cubic-bezier(.18,.82,.2,1) both;
    }

    #archive-scene.is-envelope-opening .archive-open-slit {
      animation: archive-slit-open 900ms 340ms cubic-bezier(.16,.8,.2,1) both;
    }

    #archive-envelope-peek {
      display: none;
      position: absolute;
      left: 40px;
      top: 522px;
      z-index: 4;
      display: block;
      width: 560px;
      height: auto;
      max-width: none;
      opacity: 0;
      pointer-events: none;
      clip-path: inset(0 0 53% 0);
      filter: drop-shadow(0 12px 12px rgba(58, 24, 13, .28));
      transform: translate3d(0, 126px, 0) rotate(-1.5deg) scale(.94);
      transform-origin: 50% 80%;
    }

    #archive-scene.is-envelope-opening #archive-envelope-peek {
      animation: archive-envelope-peek 920ms cubic-bezier(.16,.82,.2,1) both;
    }

    #archive-scene.has-letter #archive-before { opacity: 1; }

    .archive-motion-element {
      position: absolute;
      display: block;
      max-width: none;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      will-change: transform, opacity;
    }

    #archive-envelope {
      left: 0;
      top: 1500px;
      z-index: 6;
      width: 640px;
      height: 570px;
      opacity: 0;
      transform: translate3d(0, -850px, 0) scale(.875) rotate(-3deg);
      transform-origin: 50% 48%;
      filter: drop-shadow(0 24px 20px rgba(66, 31, 16, .24));
    }

    #archive-scene.is-envelope-dropping #archive-envelope {
      animation: envelope-rise-and-drop 1760ms cubic-bezier(.18,.78,.2,1) both;
    }

    #archive-scene.has-letter #archive-envelope {
      animation: none;
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1) rotate(0);
      filter: drop-shadow(0 18px 16px rgba(66, 31, 16, .2));
    }

    .archive-cloud-layer {
      position: absolute;
      left: 0;
      top: 1200px;
      z-index: 5;
      display: block;
      width: 640px;
      height: 1300px;
      max-width: none;
      opacity: 0;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      transform: translate3d(var(--archive-cloud-local-x, 0px), var(--archive-cloud-local-y, 0px), 0) scale(1.02);
      transform-origin: 50% 48%;
      will-change: transform, opacity;
      backface-visibility: hidden;
    }

    #archive-scene.is-opening:not(.has-letter) .archive-cloud-layer.is-asset-ready {
      animation: archive-cloud-source-enter 1450ms 240ms cubic-bezier(.18,.72,.22,1) both;
    }

    #archive-scene.is-opened:not(.has-letter) .archive-cloud-layer.is-asset-ready {
      opacity: .96;
    }

    #archive-scene.has-letter .archive-cloud-layer {
      z-index: 10;
    }

    #archive-scene.has-letter .archive-cloud-left.is-asset-ready {
      animation: archive-cloud-source-left 1160ms cubic-bezier(.18,.76,.18,1) both;
    }

    #archive-scene.has-letter .archive-cloud-right.is-asset-ready {
      animation: archive-cloud-source-right 1160ms cubic-bezier(.18,.76,.18,1) both;
    }

    #archive-letter-body {
      left: 0;
      top: 1900px;
      z-index: 6;
      width: 640px;
      height: 1300px;
      opacity: 0;
      transform: translate3d(0, 250px, 0) scale(.965);
      transform-origin: 50% 48%;
    }

    #archive-new-journey {
      left: 80px;
      top: 2470px;
      z-index: 8;
      width: 480px;
      height: 100px;
      opacity: 0;
      transform: translate3d(0, 16px, 0);
    }

    #archive-letter-copy {
      left: 0;
      top: 1900px;
      z-index: 9;
      width: 640px;
      height: 1300px;
      opacity: 0;
      transform: translate3d(0, 20px, 0);
    }

    .archive-star-journey {
      position: absolute;
      z-index: 5;
      opacity: 0;
      pointer-events: none;
      transform: translate3d(var(--archive-star-x, 0px), var(--archive-star-y, 20px), 0);
      will-change: transform, opacity;
    }

    .archive-star-journey::after {
      content: "";
      position: absolute;
      right: 8px;
      top: 46%;
      width: 132px;
      height: 32px;
      border-radius: 50%;
      opacity: calc(var(--archive-star-opacity, 0) * .42);
      background: radial-gradient(ellipse at 75% 50%, rgba(255,245,184,.72), rgba(255,187,57,.2) 38%, transparent 72%);
      filter: blur(8px);
      transform: translate3d(-34px, -50%, 0) rotate(-16deg);
      mix-blend-mode: screen;
    }

    .archive-star-journey img { display: block; width: 100%; height: 100%; max-width: none; }
    .archive-star-top { left: 0; top: 2100px; width: 160px; height: 260px; }
    .archive-star-bottom { left: 480px; top: 3020px; width: 160px; height: 270px; }

    #archive-scene.has-letter .archive-star-journey { opacity: var(--archive-star-opacity, 0); }

    #archive-scene.has-letter #archive-letter-body {
      animation: letter-sheet-arrive 920ms cubic-bezier(.2,.76,.22,1) both;
    }

    #archive-scene.has-letter #archive-new-journey {
      animation: new-journey-reveal 720ms 620ms cubic-bezier(.2,.72,.22,1) both;
    }

    #archive-scene.has-letter #archive-letter-copy {
      animation: archive-letter-copy-reveal 820ms 1180ms cubic-bezier(.2,.72,.22,1) both;
    }

    .archive-letter-hotspot {
      position: absolute;
      z-index: 12;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .archive-letter-hotspot {
      left: 190px;
      top: 1665px;
      width: 300px;
      height: 235px;
      display: none;
    }

    #archive-scene.is-envelope-entered:not(.has-letter) .archive-letter-hotspot { display: block; }
    #archive-scene.has-letter .archive-letter-hotspot { display: none; }

    .take-letter-cue {
      position: absolute;
      left: 317px;
      top: 1741px;
      z-index: 10;
      display: none;
      width: 153px;
      height: 156px;
      opacity: 0;
      pointer-events: none;
      transform-origin: 50% 46%;
      will-change: transform, opacity;
    }

    .take-letter-cue img {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
      animation: take-letter-hand-press 1.65s cubic-bezier(.34,.06,.24,1) infinite;
      filter: drop-shadow(0 0 8px rgba(255, 239, 183, .38));
      will-change: transform, filter;
    }

    .take-letter-cue::before,
    .take-letter-cue::after {
      content: "";
      position: absolute;
      left: 55px;
      top: 28px;
      z-index: -1;
      width: 46px;
      height: 46px;
      border: 2px solid rgba(255, 243, 199, .86);
      border-radius: 50%;
      opacity: 0;
      transform: scale(.3);
      animation: take-letter-ripple 1.65s .18s ease-out infinite;
    }

    .take-letter-cue::after { animation-delay: .58s; }

    #archive-scene.is-envelope-entered:not(.has-letter) .take-letter-cue {
      display: block;
      animation: take-letter-cue-arrive 420ms cubic-bezier(.2,.76,.22,1) both;
    }

    #archive-scene.is-letter-pending .take-letter-cue {
      opacity: .46;
      transform: translate3d(0, 5px, 0) scale(.94);
      transition: opacity 180ms ease-out, transform 220ms cubic-bezier(.22,.61,.36,1);
    }

    #archive-scene.has-letter .take-letter-cue { display: none; }

    .archive-cover-underlay,
    .archive-split-panel {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 640px;
      max-width: none;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      opacity: 0;
    }

    .archive-cover-underlay {
      height: 1325px;
      z-index: 19;
      transform: scale(1.025);
    }

    .archive-split-panel {
      height: 1260px;
      z-index: 20;
      will-change: transform;
    }

    .archive-split-panel.is-upper { clip-path: inset(0 0 50% 0); }
    .archive-split-panel.is-lower { clip-path: inset(50% 0 0 0); }

    #archive-scene.is-opening .archive-cover-underlay {
      opacity: 1;
      animation: cover-reveal 880ms cubic-bezier(.2,.72,.22,1) both;
    }

    #archive-scene.is-opening .archive-split-panel { opacity: 1; }
    #archive-scene.is-opening .archive-split-panel.is-upper {
      animation: archive-up 880ms cubic-bezier(.55,.08,.18,1) both;
    }
    #archive-scene.is-opening .archive-split-panel.is-lower {
      animation: archive-down 880ms cubic-bezier(.55,.08,.18,1) both;
    }

    .title-slice {
      position: absolute;
      inset: 0;
      width: 640px;
      height: 1260px;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      backface-visibility: hidden;
    }

    #title-bg { clip-path: inset(0 0 889px 0); }

    .envelope-slice {
      position: absolute;
      left: 0;
      top: 371px;
      display: block;
      width: 640px;
      height: 889px;
      max-width: none;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      backface-visibility: hidden;
    }

    #title-body {
      clip-path: inset(262px 0 0 0);
      z-index: 1;
    }

    #title-flap {
      clip-path: inset(0 0 627px 0);
      transform-origin: 50% 262px;
      transform: rotateX(0deg);
      transition: transform 900ms cubic-bezier(.2,.76,.22,1), filter 900ms ease;
      z-index: 4;
    }

    .title-heading { z-index: 6; }
    .title-body-copy { z-index: 5; }

    #title-year-1936 { left: 1px; top: 51px; width: 282px; height: 230px; }
    #title-year-2026 { left: 347px; top: 51px; width: 292px; height: 230px; }
    #title-year-dash { left: 300px; top: 131px; width: 36px; height: 11px; }
    #title-archive-title { left: 169px; top: 312px; width: 302px; height: 29px; }
    #title-swipe-copy { left: 458px; top: 655px; width: 129px; height: 32px; }
    #title-tap-hand {
      left: 575px;
      top: 695px;
      width: 34px;
      height: 37px;
      transform-origin: 50% 72%;
      animation: click-cue-scale 1.7s cubic-bezier(.4,0,.2,1) infinite;
    }
    #title-commemoration { left: 55px; top: 977px; width: 524px; height: 50px; }
    #title-anniversary-90 { left: 124px; top: 1060px; width: 176px; height: 114px; }
    #title-anniversary-years { left: 325px; top: 1057px; width: 230px; height: 119px; }

    .swipe-zone {
      position: absolute;
      left: 0;
      top: 0;
      width: 640px;
      height: 1260px;
      z-index: 10;
      --drag-x: 0px;
      cursor: grab;
      touch-action: none;
      outline: none;
    }

    .swipe-zone:active { cursor: grabbing; }

    .swipe-zone::after {
      content: "";
      position: absolute;
      left: 448px;
      top: 690px;
      width: 142px;
      height: 3px;
      border-radius: 2px;
      background: linear-gradient(90deg, rgba(255,207,83,.25), #ffd261 45%, rgba(255,207,83,.25));
      animation: guide-glow 1.6s ease-in-out infinite;
    }

    #archive-scene.is-opening #title-flap {
      transform: rotateX(-118deg);
      filter: brightness(.72);
    }

    #archive-scene.is-opened .swipe-zone,
    #archive-scene.is-opening #title-swipe-copy,
    #archive-scene.is-opening #title-tap-hand {
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
    }

    .archive-up-guide {
      position: absolute;
      left: 200px;
      bottom: 38px;
      z-index: 18;
      width: 240px;
      height: 118px;
      opacity: 0;
      pointer-events: none;
      user-select: none;
      transform: translate3d(0, calc(12px + var(--up-drag-y, 0px)), 0);
      transition: opacity 420ms ease, transform 180ms cubic-bezier(.2,.72,.22,1);
    }

    .archive-up-guide img {
      position: absolute;
      left: 50%;
      bottom: 4px;
      display: block;
      width: 120px;
      height: auto;
      max-width: none;
      transform: translateX(-50%);
      filter: drop-shadow(0 2px 5px rgba(74, 25, 12, .62));
    }

    .archive-up-guide::before,
    .archive-up-guide::after {
      content: "";
      position: absolute;
      left: 50%;
      pointer-events: none;
    }

    .archive-up-guide::before {
      top: 3px;
      width: 22px;
      height: 22px;
      border-top: 3px solid #ffe6a4;
      border-left: 3px solid #ffe6a4;
      transform: translateX(-50%) rotate(45deg);
      filter: drop-shadow(0 2px 5px rgba(76, 27, 12, .55));
      animation: archive-up-arrow 1.3s ease-in-out infinite;
    }

    .archive-up-guide::after {
      top: 23px;
      width: 3px;
      height: 18px;
      background: linear-gradient(180deg, #ffe6a4, rgba(255, 230, 164, .08));
      transform: translateX(-50%);
    }

    #archive-scene.is-ready-title .archive-up-guide {
      opacity: 1;
      transform: translate3d(0, var(--up-drag-y, 0px), 0);
    }

    #archive-scene.is-ready-title .archive-up-guide img {
      animation: archive-up-copy-float 1.45s cubic-bezier(.4,0,.2,1) infinite;
    }

    #archive-scene.is-next-leaving .archive-up-guide {
      opacity: 0;
      transition-delay: 0s;
    }

    #archive-read-guide {
      position: absolute;
      right: 4px;
      bottom: 158px;
      z-index: 16;
      display: block;
      width: 132px;
      height: 188px;
      max-width: none;
      opacity: 0;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      transform: translate3d(0, 16px, 0) scale(.9);
      filter: drop-shadow(0 3px 8px rgba(74, 25, 12, .3));
      transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.72,.22,1);
    }

    #archive-scene.has-letter:not(.is-ready-title) #archive-read-guide {
      opacity: .96;
      transform: translate3d(0, 0, 0) scale(.9);
      animation: archive-guide-float 1.55s .45s ease-in-out infinite;
    }

    #archive-scene.is-ready-title #archive-read-guide,
    #archive-scene.is-next-leaving #archive-read-guide {
      opacity: 0;
    }

    .archive-next-zone {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 230px;
      z-index: 17;
      cursor: grab;
      touch-action: none;
      pointer-events: none;
    }

    #archive-scene.is-ready-title .archive-next-zone { pointer-events: auto; }
    .archive-next-zone:active { cursor: grabbing; }
    /* Opened title and story pages */
    .page-scroll {
      position: absolute;
      inset: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: none;
      overscroll-behavior-y: none;
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
      overflow-anchor: none;
    }

    .page-scroll::-webkit-scrollbar { display: none; }

    .scroll-content {
      position: relative;
      width: 640px;
      min-height: 1260px;
      overflow-anchor: none;
    }

    .full-page-image {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 640px;
      height: auto;
      max-width: none;
      user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    .segmented-page {
      position: absolute;
      left: 0;
      top: 0;
      display: none;
      width: 640px;
      pointer-events: none;
      font-size: 0;
      line-height: 0;
    }

    .page-segment {
      display: block;
      width: 640px;
      height: auto;
      max-width: none;
      margin: 0;
      user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
      overflow-anchor: none;
      vertical-align: top;
      backface-visibility: hidden;
    }

    .page-segment + .page-segment { margin-top: -3px; }

    /* Avoid Android WebView's diagonal VP8/compositor artifact on the opaque P02 hero. */
    .p02-intro-segment {
      backface-visibility: visible;
      transform: none;
      will-change: auto;
    }

    #level-scene.is-active .full-page-image {
      animation: scene-develop 680ms cubic-bezier(.2,.72,.22,1) both;
    }

    #level-scene {
      --level-light-x: 320px;
      --level-light-y: 420px;
      --level-light-strength: .4;
      --level-page-x: 0px;
      --level-page-y: 0px;
      --level-parallax-x: 0px;
      --level-parallax-y: 0px;
      --book-tilt-x: 0deg;
      --book-tilt-y: 0deg;
      --book-shadow-x: 0px;
      --book-shadow-y: 10px;
      --book-tone: 1;
      --p02-cloud-left-x: 0px;
      --p02-cloud-right-x: 0px;
      --p02-route-a-offset: 0;
      --p02-route-b-offset: 0;
      background: #f4d884;
    }

    .level-glints {
      position: absolute;
      inset: 0;
      z-index: 10;
      opacity: 0;
      pointer-events: none;
      mix-blend-mode: screen;
      transform: none;
      transition: opacity 420ms ease;
      contain: paint;
    }

    #level-scene.is-active .level-glints { opacity: 1; }

    .level-glint {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      opacity: 0;
      background: radial-gradient(circle, rgba(255,255,238,.94) 0 2px, rgba(255,221,132,.34) 6px, rgba(255,177,55,.1) 14px, transparent 25px);
      will-change: transform, opacity;
    }

    .level-glint:nth-child(1) {
      --glint-x-1: 78px; --glint-y-1: 176px;
      --glint-x-2: 474px; --glint-y-2: 312px;
      --glint-x-3: 188px; --glint-y-3: 964px;
      animation: level-glint-switch 28s 0s ease-in-out infinite;
    }

    .level-glint:nth-child(2) {
      --glint-x-1: 492px; --glint-y-1: 148px;
      --glint-x-2: 112px; --glint-y-2: 622px;
      --glint-x-3: 506px; --glint-y-3: 1056px;
      animation: level-glint-switch 28s -7s ease-in-out infinite;
    }

    .level-glint:nth-child(3) {
      --glint-x-1: 222px; --glint-y-1: 738px;
      --glint-x-2: 478px; --glint-y-2: 458px;
      --glint-x-3: 92px; --glint-y-3: 1084px;
      animation: level-glint-switch 28s -14s ease-in-out infinite;
    }

    .level-glint:nth-child(4) {
      --glint-x-1: 514px; --glint-y-1: 848px;
      --glint-x-2: 72px; --glint-y-2: 356px;
      --glint-x-3: 338px; --glint-y-3: 202px;
      animation: level-glint-switch 28s -21s ease-in-out infinite;
    }

    /* Segment overlaps are part of the rendered height; matching the content box
       to that height prevents the stage background leaking through at page end. */
    #level-content { height: 11000px; }
    #level-one-stack {
      top: 0;
      display: block;
      transform: none;
    }

    .p02-jiajinshan-clouds {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      width: 640px;
      height: 1931px;
      overflow: visible;
      pointer-events: none;
    }

    .p02-jiajinshan-cloud {
      position: absolute;
      display: block;
      max-width: none;
      opacity: 1;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      backface-visibility: hidden;
      transition: none;
      will-change: transform;
    }

    .p02-jiajinshan-cloud-left {
      left: -256px;
      top: 1155px;
      width: 1032px;
      height: 776px;
      transform: translate3d(var(--p02-cloud-left-x), 0, 0);
    }

    .p02-jiajinshan-cloud-right {
      left: -396px;
      top: 839px;
      width: 1032px;
      height: 776px;
      transform: translate3d(var(--p02-cloud-right-x), 0, 0);
    }

    #level-scene:not(.is-active) .p02-jiajinshan-cloud {
      will-change: auto;
    }

    .p02-fluid-routes {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      display: block;
      width: 640px;
      height: 11000px;
      overflow: hidden;
      pointer-events: none;
    }

    .p02-fluid-routes path {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .p02-fluid-route-base {
      stroke: rgba(255, 248, 222, .56);
      stroke-width: 3.15px;
    }

    .p02-fluid-route-light {
      stroke: #fffbd8;
      stroke-width: 5px;
      stroke-dasharray: .075 .925;
      opacity: .94;
      filter: drop-shadow(0 0 5px rgba(255, 222, 118, .82));
    }

    .p02-fluid-route-light-a { stroke-dashoffset: var(--p02-route-a-offset); }
    .p02-fluid-route-light-b { stroke-dashoffset: var(--p02-route-b-offset); }

    .level-follow-light {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 6;
      width: 580px;
      height: 400px;
      opacity: 0;
      pointer-events: none;
      border-radius: 50%;
      background: radial-gradient(ellipse at 50% 48%, rgba(255, 249, 211, .68) 0 8%, rgba(255, 214, 119, .3) 30%, rgba(255, 166, 57, .09) 56%, transparent 78%);
      mix-blend-mode: soft-light;
      transform: translate3d(calc(var(--level-light-x) - 290px), calc(var(--level-light-y) - 200px), 0);
      will-change: transform, opacity;
    }

    .level-follow-light::after {
      content: "";
      position: absolute;
      left: 64px;
      top: 174px;
      width: 360px;
      height: 104px;
      border-radius: 50%;
      opacity: .34;
      background: linear-gradient(90deg, transparent, rgba(255,218,112,.14) 22%, rgba(255,249,218,.58) 76%, transparent);
      filter: blur(18px);
      transform: rotate(-10deg);
    }

    #level-scene.is-active .level-follow-light {
      opacity: var(--level-light-strength);
      animation: level-light-breathe 5.8s ease-in-out infinite;
    }

    .p02-title-sheen {
      position: absolute;
      left: 30px;
      top: 310px;
      z-index: 3;
      width: 570px;
      height: 720px;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      mix-blend-mode: soft-light;
      clip-path: polygon(2% 2%, 98% 2%, 98% 98%, 2% 98%);
    }

    .p02-title-sheen::before {
      content: "";
      position: absolute;
      left: -46%;
      top: -10%;
      width: 28%;
      height: 120%;
      opacity: .58;
      background: linear-gradient(90deg, transparent, rgba(255,249,220,.7), transparent);
      transform: skewX(-13deg);
    }

    #level-scene.is-active .p02-title-sheen { opacity: .72; animation: p02-title-breathe 5.8s ease-in-out infinite; }
    #level-scene.is-active .p02-title-sheen::before { animation: p02-title-sweep 6.6s 1.2s cubic-bezier(.2,.72,.22,1) infinite; }

    .p02-star-journey {
      position: absolute;
      z-index: 4;
      opacity: var(--p02-star-opacity, 0);
      pointer-events: none;
      transform: translate3d(var(--p02-star-x, 0px), var(--p02-star-y, 18px), 0);
      will-change: transform, opacity;
    }
    .p02-star-journey img { display: block; width: 100%; height: 100%; max-width: none; }
    .p02-star-journey::after {
      content: "";
      position: absolute;
      right: 8px;
      top: 46%;
      width: 140px;
      height: 38px;
      border-radius: 50%;
      opacity: calc(var(--p02-star-opacity, 0) * .55);
      background: radial-gradient(ellipse at 78% 50%, rgba(255,249,206,.74), rgba(255,175,43,.2) 45%, transparent 74%);
      filter: blur(9px);
      transform: translate3d(-40px,-50%,0) rotate(-14deg);
      mix-blend-mode: screen;
    }
    .p02-star-journey-1 { left: 0; top: 1700px; width: 150px; height: 220px; }
    .p02-star-journey-2 { left: 490px; top: 2290px; width: 150px; height: 210px; }
    .p02-star-journey-3 { left: 480px; top: 7640px; width: 160px; height: 220px; }
    .p02-star-journey-4 { left: 0; top: 9760px; width: 150px; height: 220px; }
    .p02-star-journey-5 { left: 490px; top: 10620px; width: 150px; height: 210px; }

    .p02-copy-clean-background {
      position: absolute;
      left: 0;
      top: 4200px;
      display: block;
      width: 640px;
      height: 700px;
      max-width: none;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .p02-copy-clean-background {
      z-index: 4;
    }

    .p02-white-copy-foreground {
      position: absolute;
      left: 73px;
      top: 4408px;
      display: block;
      z-index: 8;
      width: 369px;
      height: 438px;
      max-width: none;
      opacity: var(--p02-copy-opacity, 0);
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      transform: translate3d(0, var(--p02-copy-y, 18px), 0);
      will-change: opacity, transform;
    }

    .history-ink-reveal {
      position: absolute;
      z-index: 7;
      pointer-events: none;
      isolation: isolate;
      contain: layout paint;
      backface-visibility: hidden;
    }

    #history-ink-photo-1 {
      left: 120px;
      top: 1600px;
      width: 520px;
      height: 420px;
      --ink-delay: 0ms;
      --ink-origin-x: 44%;
      --ink-origin-y: 54%;
    }

    #history-ink-photo-2 {
      left: 0;
      top: 1940px;
      width: 500px;
      height: 320px;
      --ink-delay: 0ms;
      --ink-origin-x: 53%;
      --ink-origin-y: 48%;
    }

    .history-ink-reveal img {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: contain;
      opacity: 0;
      pointer-events: none;
      transform: scale(.72) rotate(-3deg);
      transform-origin: var(--ink-origin-x) var(--ink-origin-y);
      clip-path: circle(2% at var(--ink-origin-x) var(--ink-origin-y));
      -webkit-clip-path: circle(2% at var(--ink-origin-x) var(--ink-origin-y));
      filter: blur(4px) sepia(.55) saturate(.58) contrast(1.18);
      will-change: transform, opacity, clip-path;
      backface-visibility: hidden;
    }

    .history-ink-reveal {
      transform: translate3d(var(--level-parallax-x), var(--level-parallax-y), 0);
      transition: none;
      will-change: transform;
    }

    .history-ink-reveal::before,
    .history-ink-reveal::after {
      content: "";
      position: absolute;
      left: var(--ink-origin-x);
      top: var(--ink-origin-y);
      width: 220px;
      height: 180px;
      opacity: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 18% 27%, rgba(74, 45, 30, .46) 0 3%, transparent 4%),
        radial-gradient(circle at 81% 18%, rgba(74, 45, 30, .38) 0 2.5%, transparent 3.5%),
        radial-gradient(circle at 92% 66%, rgba(74, 45, 30, .34) 0 4%, transparent 5%),
        radial-gradient(ellipse at 48% 51%, rgba(67, 43, 31, .5), rgba(107, 71, 43, .2) 46%, transparent 72%);
      mix-blend-mode: multiply;
      transform: translate3d(-50%, -50%, 0) scale(.08) rotate(-9deg);
      filter: blur(.4px);
    }

    .history-ink-reveal::after {
      width: 300px;
      height: 240px;
      transform: translate3d(-50%, -50%, 0) scale(.05) rotate(13deg);
    }

    .history-ink-reveal.is-revealed img {
      animation: history-photo-splash 1320ms var(--ink-delay) cubic-bezier(.14,.76,.2,1) both;
    }

    .history-ink-reveal.is-revealed::before,
    .history-ink-reveal.is-revealed::after {
      animation: history-ink-splash 1080ms var(--ink-delay) cubic-bezier(.14,.76,.2,1) both;
    }

    .history-sparks {
      position: absolute;
      left: 0;
      top: 1600px;
      z-index: 8;
      display: block;
      width: 640px;
      height: 800px;
      max-width: none;
      opacity: 0;
      pointer-events: none;
      transform: translate3d(calc(var(--history-spark-x, 0px) + var(--level-parallax-x)), calc(var(--history-spark-y, 0px) + var(--level-parallax-y)), 0) scale(1.02);
      filter: blur(3px) drop-shadow(0 0 3px rgba(255, 153, 28, .18));
      transition: none;
      will-change: transform, opacity, filter;
    }

    .history-sparks.is-live {
      animation:
        history-sparks-arrive 920ms cubic-bezier(.16,.78,.18,1) both,
        spark-energy 2.2s 920ms ease-in-out infinite,
        spark-drift 4.8s 920ms ease-in-out infinite alternate;
    }

    .history-bullet {
      position: absolute;
      z-index: 9;
      display: block;
      max-width: none;
      opacity: 0;
      pointer-events: none;
      translate: var(--level-parallax-x) var(--level-parallax-y);
      will-change: transform, opacity, filter;
    }

    #history-bullet-1 {
      left: 140px;
      top: 1788px;
      width: 140px;
      height: 54px;
      --bullet-delay: 80ms;
    }

    #history-bullet-2 {
      left: 300px;
      top: 1848px;
      width: 125px;
      height: 77px;
      --bullet-delay: 210ms;
    }

    .history-bullet.is-fired {
      animation: history-bullet-fly 880ms var(--bullet-delay) cubic-bezier(.12,.76,.18,1) both;
    }

    .page-segment.motion-segment {
      opacity: 1;
      transform: none;
      filter: none;
      transition: none;
      will-change: auto;
    }

    .page-segment.motion-segment.is-revealed {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      filter: none;
    }

    .diary-entry-hotspot,
    .story-hotspot {
      position: absolute;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      z-index: 7;
    }

    .diary-entry-cue {
      position: absolute;
      left: 395px;
      top: 5159px;
      display: block;
      width: 215px;
      height: 234px;
      z-index: 9;
      opacity: var(--diary-cue-opacity, 0);
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      transform: translate3d(0, var(--diary-cue-y, 16px), 0);
      transition: opacity var(--motion-fade-duration) var(--motion-standard), transform 620ms var(--motion-settle);
    }

    .diary-entry-copy,
    .diary-entry-hand {
      position: absolute;
      display: block;
      max-width: none;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .diary-entry-copy {
      left: 23px;
      top: 3px;
      width: 172px;
      height: 65px;
      overflow: visible;
    }

    .diary-entry-hand-wrap {
      position: absolute;
      left: 0;
      top: 13px;
      width: 215px;
      height: 221px;
      pointer-events: none;
    }

    .diary-entry-hand {
      inset: 0;
      width: 215px;
      height: 221px;
      transform: none;
      animation: diary-entry-hand-breathe 2.35s ease-in-out infinite;
      will-change: filter;
    }

    .diary-entry-hotspot {
      left: 20px;
      top: 23px;
      display: block;
      width: 178px;
      height: 193px;
      transform: none;
      z-index: 3;
      pointer-events: auto;
      touch-action: manipulation;
    }

    .diary-entry-hotspot::after {
      content: "";
      position: absolute;
      left: 32px;
      top: 45px;
      width: 112px;
      height: 112px;
      border: 2px solid rgba(255, 246, 211, .78);
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      animation: diary-entry-pulse 2.35s .18s ease-out infinite;
    }

    .level-book,
    .level-footprints {
      position: absolute;
      display: block;
      max-width: none;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      backface-visibility: hidden;
      will-change: transform, opacity;
    }

    .level-book {
      z-index: 5;
      opacity: var(--book-opacity, 1);
      transform: perspective(1400px)
        translate3d(0, var(--book-reveal-y, 0px), 0)
        scale(var(--book-reveal-scale, 1))
        rotateX(var(--book-tilt-x))
        rotateY(var(--book-tilt-y));
      transform-origin: 50% 58%;
      transition: transform 260ms var(--motion-standard), opacity 460ms var(--motion-standard);
    }

    .level-book > img:not(.jiajinshan-bookmark-latest) {
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
      pointer-events: none;
      animation: none;
      transform: translateZ(0);
      filter:
        drop-shadow(var(--book-shadow-x) var(--book-shadow-y) 13px rgba(83, 42, 18, .12))
        brightness(var(--book-tone));
      transition: filter 980ms cubic-bezier(.16,.78,.2,1);
      will-change: auto;
    }

    .level-book-1 { left: 0; top: 2473px; width: 611px; height: 638px; }
    .level-book-2 { left: 57px; top: 3717px; width: 583px; height: 1408px; }
    .level-book-3 { left: 0; top: 5133px; width: 598px; height: 688px; overflow: visible; }
    .level-book-4 { left: 50px; top: 5225px; width: 590px; height: 1936px; }

    .level-book-3 > .jiajinshan-bookmark-latest {
      position: absolute;
      left: 394px;
      top: 224px;
      z-index: 3;
      display: block;
      width: 189px;
      height: 360px;
      max-width: none;
      opacity: 0;
      pointer-events: none;
      filter: brightness(1.15) saturate(1.04) drop-shadow(0 10px 11px rgba(78, 41, 19, .18));
      transform: translate3d(0, 12px, 0) rotate(.35deg);
      transition: opacity 980ms cubic-bezier(.22,.61,.36,1), transform 1040ms cubic-bezier(.16,.78,.2,1);
    }

    #level-scene.is-jiajinshan-lit .level-book-3 > img:not(.jiajinshan-bookmark-latest) {
      clip-path: polygon(0 0, 69% 0, 69% 100%, 0 100%);
      -webkit-clip-path: polygon(0 0, 69% 0, 69% 100%, 0 100%);
    }

    #level-scene.is-jiajinshan-bookmark-visible .level-book-3 > .jiajinshan-bookmark-latest {
      opacity: 1;
      transform: translate3d(0, 0, 0) rotate(.35deg);
    }

    #level-scene.is-bookmark-activated .level-book-3 > .jiajinshan-bookmark-latest {
      animation: jiajinshan-bookmark-tone-reveal 980ms cubic-bezier(.16,.78,.2,1) both;
      will-change: filter, opacity;
    }

    .jiajinshan-bookmark-particles {
      position: absolute;
      left: 414px;
      top: 214px;
      z-index: 4;
      width: 180px;
      height: 420px;
      opacity: 0;
      overflow: visible;
      pointer-events: none;
    }

    .jiajinshan-bookmark-particles i {
      position: absolute;
      left: var(--particle-x);
      top: var(--particle-y);
      display: block;
      width: var(--particle-size, 7px);
      height: var(--particle-size, 7px);
      border-radius: 50%;
      opacity: 0;
      background: radial-gradient(circle, #fff8cf 0 24%, #ffd56b 38%, rgba(226, 128, 31, .55) 64%, transparent 76%);
      transform: translate3d(0, 0, 0) scale(.35);
      will-change: transform, opacity;
    }

    #level-scene.is-bookmark-activated .jiajinshan-bookmark-particles { opacity: 1; }

    #level-scene.is-bookmark-activated .jiajinshan-bookmark-particles i {
      animation: jiajinshan-bookmark-particle 1180ms var(--particle-delay, 0ms) cubic-bezier(.16,.78,.2,1) both;
    }

    .level-book-3::after {
      content: "";
      position: absolute;
      left: 82px;
      top: 86px;
      width: 330px;
      height: 430px;
      opacity: .1;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(255, 246, 194, .42), transparent 70%);
      mix-blend-mode: soft-light;
      animation: jiajinshan-book-glow 5.2s ease-in-out infinite;
      pointer-events: none;
    }

    .diary-entry-hotspot:focus-visible { box-shadow: none; }

    .level-footprints {
      z-index: 7;
      opacity: var(--footprint-opacity, 1);
      transform: translate3d(
        0,
        var(--footprint-shift-y, 0px),
        0
      );
      filter: blur(var(--footprint-blur, 0px));
      transition: opacity 460ms var(--motion-standard), transform 520ms var(--motion-standard), filter 420ms var(--motion-standard);
    }

    .level-footprints-1 { left: 96px; top: 3133px; width: 208px; height: 523px; }
    .level-footprints-2 { left: 387px; top: 4446px; width: 188px; height: 529px; }
    .level-footprints-3 { left: 81px; top: 5856px; width: 175px; height: 532px; }

    .p02-checkin-entry {
      position: absolute;
      left: 48px;
      top: 10182px;
      z-index: 9;
      width: 544px;
      height: 228px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      color: transparent;
      background: transparent;
      box-shadow: none;
      font-size: 0;
      -webkit-tap-highlight-color: transparent;
    }

    .p02-checkin-entry:focus,
    .p02-checkin-entry:focus-visible,
    .p02-checkin-entry:active { outline: none; box-shadow: none; }

    .p02-checkin-panel[hidden] { display: none; }
    .p02-checkin-panel { position: absolute; inset: 0; z-index: 24; display: grid; place-items: center; padding: 42px; background: rgba(55,24,12,.54); }
    .p02-checkin-form { width: 100%; padding: 34px 30px 28px; border: 1px solid rgba(103,43,17,.5); border-radius: 6px; color: #6f2d12; background: #f7dfa0; box-shadow: 0 24px 56px rgba(45,18,8,.3); font: 26px/1.35 "Dianzi Changhei", "PingFang SC", sans-serif; }
    .p02-checkin-form label { display: block; margin: 0 0 8px; }
    .p02-checkin-form select,
    .p02-checkin-form textarea { width: 100%; margin: 0 0 24px; padding: 14px 16px; border: 1px solid rgba(111,45,18,.35); border-radius: 4px; color: #5f2912; background: rgba(255,250,225,.78); font: inherit; }
    .p02-checkin-form textarea { min-height: 154px; resize: vertical; }
    .p02-checkin-actions { display: flex; gap: 14px; }
    .p02-checkin-actions button { flex: 1; min-height: 56px; border: 0; border-radius: 4px; color: #fff6d7; background: #a3431a; font: inherit; }
    .p02-checkin-actions button:first-child { color: #6f2d12; background: rgba(111,45,18,.12); }
    .p02-checkin-status { min-height: 1.35em; margin: 18px 0 0; text-align: center; }
    #level-2-scene,
    #level-3-scene,
    #level-4-scene {
      --story-parallax-x: 0px;
      --story-parallax-y: 0px;
      --story-light-base-x: 320px;
      --story-light-base-y: 430px;
      --story-light-input-x: 0px;
      --story-light-input-y: 0px;
      --story-light-opacity: .32;
      background: #edc867;
    }

    .story-follow-light {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 5;
      width: 520px;
      height: 440px;
      border-radius: 50%;
      opacity: var(--story-light-opacity);
      pointer-events: none;
      background: radial-gradient(ellipse at 50% 50%, rgba(255, 249, 213, .7) 0 8%, rgba(255, 213, 113, .28) 34%, rgba(236, 151, 48, .08) 58%, transparent 76%);
      mix-blend-mode: soft-light;
      transform: translate3d(
        calc(var(--story-light-base-x) + var(--story-light-input-x) - 260px),
        calc(var(--story-light-base-y) + var(--story-light-input-y) - 220px),
        0
      );
      animation: story-light-breathe 5.8s cubic-bezier(.37, 0, .63, 1) infinite;
      will-change: transform, opacity;
    }

    #level-2-scene[data-history-playing="true"] .story-follow-light {
      --story-light-opacity: .46;
    }

    #level-2-scene {
      --level2-cloud-left-x: 0px;
      --level2-cloud-right-x: 0px;
      --level2-cloud-top-x: 0px;
      --level2-cloud-top-y: 0px;
      --level2-snow-far-x: 0px;
      --level2-snow-far-y: 0px;
      --level2-snow-mid-x: 0px;
      --level2-snow-mid-y: 0px;
      --level2-snow-near-x: 0px;
      --level2-snow-near-y: 0px;
    }

    #level-2-scene .segmented-page,
    #level-3-scene .segmented-page,
    #level-4-scene .segmented-page {
      transform: none;
    }

    #level-2-scene::after,
    #level-3-scene::after,
    #level-4-scene::after {
      content: "";
      position: absolute;
      inset: -40px;
      z-index: 6;
      pointer-events: none;
      opacity: .48;
      background:
        radial-gradient(circle at 18% 24%, rgba(255,255,230,.9) 0 4px, rgba(255,194,68,.28) 10px, transparent 30px),
        radial-gradient(circle at 76% 42%, rgba(255,250,216,.82) 0 3px, rgba(255,171,48,.24) 12px, transparent 34px),
        radial-gradient(circle at 44% 82%, rgba(255,255,224,.82) 0 4px, rgba(255,189,69,.22) 11px, transparent 32px);
      mix-blend-mode: screen;
      transform: translate3d(var(--story-parallax-x), var(--story-parallax-y), 0);
      animation: level-glints-drift 6.2s ease-in-out infinite alternate;
      will-change: transform, opacity;
    }

    #level-2-content { height: 2838px; overflow: hidden; }
    #level-3-content {
      height: 8457px;
      overflow: hidden;
      isolation: isolate;
    }
    #level-4-content {
      height: 5181px;
      overflow: hidden;
      background: #f5ba70;
      isolation: isolate;
    }

    #level-4-scene .level4-page {
      z-index: 1;
      transform: none;
    }

    #level-4-scene .level4-segment {
      opacity: 1;
      transform: none;
      transition: none;
      contain: layout paint;
      will-change: auto;
    }

    #level-4-scene .level4-segment.is-revealed {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    #level-4-scene.is-bookmark-confirming #level-4-content {
      animation: level4-bookmark-confirm 620ms cubic-bezier(.2,.72,.22,1) both;
    }

    #level-4-scene::after { display: none; }

    .level4-reveal-element {
      --level4-element-opacity: 0;
      --level4-element-y: 18px;
      position: absolute;
      display: block;
      max-width: none;
      opacity: var(--level4-element-opacity);
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      backface-visibility: hidden;
      transform: translate3d(0, var(--level4-element-y), 0);
      transition:
        opacity 620ms var(--level4-element-delay, 0ms) cubic-bezier(.2,.72,.22,1),
        transform 700ms var(--level4-element-delay, 0ms) cubic-bezier(.2,.72,.22,1);
      will-change: transform, opacity;
    }

    #level-4-scene:not(.is-active) .level4-reveal-element {
      opacity: 0;
      transform: translate3d(0, 22px, 0);
    }

    .level4-reveal-element[data-level4-kind="title"] { z-index: 5; }
    .level4-reveal-element[data-level4-kind="quote"] { z-index: 5; }
    .level4-reveal-element[data-level4-kind="person"] { z-index: 6; }
    .level4-reveal-element[data-level4-kind="intro"] { z-index: 6; }
    .level4-reveal-element[data-level4-kind="transition"] { z-index: 5; }

    .level4-star-traveller {
      --level4-star-x: 553px;
      --level4-star-y: 284px;
      --level4-star-opacity: 1;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 3;
      width: 66px;
      height: 61px;
      opacity: 0;
      pointer-events: none;
      transform: translate3d(
        calc(var(--level4-star-x) + var(--story-parallax-x) * .16),
        calc(var(--level4-star-y) + var(--story-parallax-y) * .12),
        0
      );
      transition: opacity 420ms ease;
      will-change: transform, opacity;
    }

    #level-4-scene.is-active .level4-star-traveller.is-asset-ready {
      opacity: var(--level4-star-opacity);
    }

    .level4-star-traveller[data-star-state="hidden"] img {
      animation-play-state: paused;
    }

    .level4-star-traveller::before {
      content: "";
      position: absolute;
      left: 14px;
      top: 90px;
      width: 188px;
      height: 188px;
      border-radius: 50%;
      opacity: 0;
      background: radial-gradient(circle, rgba(255,255,228,.98) 0 7%, rgba(255,213,82,.76) 19%, rgba(255,174,35,.3) 42%, transparent 72%);
      mix-blend-mode: screen;
      transform: translate3d(-50%, -50%, 0) scale(.55);
      pointer-events: none;
    }

    .level4-star-traveller.is-flashing::before {
      animation: level4-star-flash 720ms cubic-bezier(.16,.78,.2,1) both;
    }

    .level4-star-traveller::after {
      content: "";
      position: absolute;
      right: 9px;
      top: 72px;
      width: 170px;
      height: 42px;
      border-radius: 50%;
      opacity: .46;
      background: radial-gradient(ellipse at 78% 50%, rgba(255,248,207,.8), rgba(255,178,37,.22) 44%, transparent 76%);
      filter: blur(10px);
      transform: translate3d(-36px,-50%,0) rotate(-18deg);
      mix-blend-mode: screen;
      pointer-events: none;
    }

    #level-4-scene.is-active .level4-reveal-element[data-level4-kind="title"].is-asset-ready {
      animation: level4-title-tone 5.8s 1s ease-in-out infinite;
    }

    .level4-star-traveller img {
      position: absolute;
      display: block;
      max-width: none;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      transform-origin: 50% 55%;
      animation: level4-star-breathe 4.8s ease-in-out infinite;
      will-change: transform, filter;
    }

    .level4-star-traveller .level4-star-small {
      left: 0;
      top: 0;
      width: 66px;
      height: 61px;
      animation-delay: -1.8s;
    }

    .level4-star-traveller .level4-star-large {
      left: -44px;
      top: 61px;
      width: 119px;
      height: 116px;
    }
    #level-3-scene::after { display: none; }

    #level-3-content .level3-backplate {
      position: absolute;
      inset: 0 auto auto 0;
      z-index: 1;
      display: block;
      width: 640px;
    }

    .level3-road-illustration {
      position: absolute;
      left: 0;
      top: 1573px;
      z-index: 2;
      display: block;
      width: 640px;
      height: 3912px;
      max-width: none;
      opacity: 0;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      backface-visibility: hidden;
      transition: opacity 460ms var(--motion-standard);
    }

    #level-3-scene.is-base-ready .level3-road-illustration.is-asset-ready {
      opacity: 1;
    }

    #level-3-scene:not(.is-base-ready) .level3-layer,
    #level-3-scene:not(.is-base-ready) .level3-star-trail,
    #level-3-scene:not(.is-base-ready) .level3-answer-cue,
    #level-3-scene:not(.is-base-ready) .story-hotspot {
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .level3-layer {
      position: absolute;
      display: block;
      max-width: none;
      margin: 0;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      backface-visibility: hidden;
      transform-origin: 50% 50%;
      will-change: transform, opacity;
    }

    #level-3-scene:not(.is-active) .level3-layer { will-change: auto; }

    .level3-snow {
      left: 0;
      z-index: 3;
      width: 640px;
      max-width: none;
      opacity: 1;
      transform: translate3d(var(--level3-snow-x, 0px), var(--level3-snow-y, 0px), 0);
      transition: opacity 520ms var(--motion-standard);
      contain: layout paint;
    }

    .level3-snow-top { top: 0; height: 2050px; }
    .level3-snow-mid { top: 1486px; height: 2130px; }

    #level-3-scene:not(.is-active) .level3-snow { will-change: auto; }
    #level-3-scene.is-active .level3-snow.is-asset-ready { will-change: transform; }

    .level3-star {
      z-index: 2;
      opacity: 1;
      transform: translate3d(0, 0, 0);
      filter: drop-shadow(0 5px 8px rgba(75, 42, 18, .18));
    }

    .level3-star.is-behind {
      z-index: 0;
      filter: none;
    }

    .level3-star-trail {
      position: absolute;
      z-index: 2;
      display: block;
      width: 176px;
      height: 46px;
      border-radius: 50%;
      opacity: var(--level3-trail-opacity, 0);
      pointer-events: none;
      background: radial-gradient(ellipse at 78% 50%, rgba(255,247,195,.72), rgba(255,176,44,.21) 42%, transparent 74%);
      filter: blur(10px);
      mix-blend-mode: screen;
      transform: translate3d(var(--level3-trail-x, 0px), var(--level3-trail-y, 0px), 0) rotate(-18deg);
      will-change: transform, opacity;
    }
    .level3-star-trail-top { left: 450px; top: 688px; }
    .level3-star-trail-road { left: -25px; top: 2780px; transform: translate3d(var(--level3-trail-x, 0px), var(--level3-trail-y, 0px), 0) rotate(16deg); }
    .level3-star-trail-tunnel { left: 450px; top: 5980px; }

    #level3-star-top-small { left: 504px; top: 637px; width: 66px; height: 65px; }
    #level3-star-top-large { left: 507px; top: 690px; width: 116px; height: 113px; }
    #level3-star-road-small { left: 55px; top: 2722px; width: 66px; height: 64px; }
    #level3-star-road-large { left: 5px; top: 2782px; width: 116px; height: 113px; }
    #level3-star-tunnel-small { left: 539px; top: 5925px; width: 66px; height: 65px; }
    #level3-star-tunnel-large { left: 489px; top: 5986px; width: 116px; height: 112px; }

    #level3-cloud-tunnel {
      left: 0;
      top: 4506px;
      z-index: 3;
      width: 640px;
      height: 1677px;
      opacity: .96;
      transform-origin: 50% 56%;
    }

    .level3-copy {
      z-index: 4;
      opacity: var(--level3-copy-opacity, 0);
      transform: translate3d(0, var(--level3-copy-y, 16px), 0);
      transition: opacity 520ms var(--motion-standard), transform 620ms var(--motion-settle);
    }
    #level3-copy-1935 { left: 141px; top: 1213px; width: 376px; height: 698px; }
    #level3-copy-road { left: 111px; top: 4298px; width: 414px; height: 698px; }
    #level3-copy-tunnel {
      left: 134px;
      top: 7455px;
      width: 371px;
      height: 631px;
      clip-path: inset(0 0 28px 0);
    }

    .level3-note {
      z-index: 5;
      filter: drop-shadow(0 10px 12px rgba(27, 31, 39, .16));
    }
    #level3-note-1935 { left: 230px; top: 106px; width: 410px; height: 564px; }
    #level3-note-road { left: 0; top: 2187px; width: 442px; height: 557px; }
    #level3-note-tunnel { left: 214px; top: 5246px; width: 426px; height: 721px; }

    #level3-silk-bottom {
      left: 0;
      top: 8039px;
      z-index: 6;
      width: 640px;
      height: 430px;
    }

    .level3-pin {
      z-index: 7;
      opacity: 0;
      filter: drop-shadow(0 14px 10px rgba(35, 18, 16, .24));
    }
    #level3-pin-1935 { left: 502px; top: 69px; width: 81px; height: 108px; transform-origin: 48% 86%; }
    #level3-pin-road { left: 79px; top: 2111px; width: 84px; height: 133px; transform-origin: 51% 88%; }
    #level3-pin-tunnel { left: 434px; top: 5191px; width: 81px; height: 108px; transform-origin: 48% 86%; }

    #level-3-scene.is-active #level3-pin-1935.is-asset-ready {
      animation: level3-pin-stab 760ms 170ms cubic-bezier(.16,.78,.22,1) both;
    }

    .level3-guide { z-index: 8; }
    #level3-guide-scroll-track { left: 15px; top: 893px; width: 46px; height: 170px; }
    #level3-guide-scroll-copy { left: 26px; top: 904px; width: 23px; height: 149px; }
    #level3-guide-scroll-arrows { left: 58px; top: 956px; width: 42px; height: 76px; }
    #level3-guide-scroll-hand { left: 0; top: 958px; width: 153px; height: 163px; animation: level3-guide-press 1.9s ease-in-out infinite; }
    #level3-guide-next-line,
    #level3-guide-next-hand { display: none; }

    .level3-answer-cue {
      position: absolute;
      left: 0;
      top: 8000px;
      z-index: 8;
      width: 640px;
      height: 160px;
      color: #fff8dc;
      pointer-events: none;
      --answer-progress: 0;
    }

    #level-3-scene:not(.is-active) .level3-answer-cue,
    .stage.is-story-transitioning #level3-answer-cue {
      opacity: 0;
      visibility: hidden;
    }

    .level3-answer-copy {
      position: absolute;
      left: 216px;
      top: 55px;
      font-family: "Dianzi Changhei", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 29px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0;
      opacity: calc(.22 + var(--answer-progress) * .78);
      transform: translate3d(0, calc((1 - var(--answer-progress)) * 15px), 0);
      text-shadow: 0 2px 4px rgba(66, 30, 18, .34);
    }

    .level3-answer-line {
      position: absolute;
      left: 200px;
      top: 96px;
      width: 238px;
      height: 6px;
      border-radius: 3px;
      background: #fff8dc;
      box-shadow: 0 2px 7px rgba(66, 30, 18, .2);
      transform: scaleX(var(--answer-progress));
      transform-origin: 0 50%;
    }

    .level3-answer-hand {
      position: absolute;
      left: 441px;
      top: 74px;
      display: block;
      width: 76px;
      height: 64px;
      object-fit: contain;
      opacity: var(--answer-progress);
      transform: translate3d(0, calc((1 - var(--answer-progress)) * 72px), 0)
        scale(calc(.78 + var(--answer-progress) * .22));
      filter: drop-shadow(0 5px 6px rgba(66, 30, 18, .24));
      transform-origin: 50% 78%;
      animation: click-cue-scale 1.7s cubic-bezier(.4,0,.2,1) infinite;
    }
    .story-video {
      position: absolute;
      left: 63px;
      top: 1151px;
      z-index: 5;
      display: block;
      width: 507px;
      height: 277px;
      border: 0;
      border-radius: 10px;
      background: #080604;
      object-fit: cover;
      opacity: 0;
      transform: scale(.975);
      transform-origin: 50% 50%;
      transition: opacity 700ms ease, transform 820ms cubic-bezier(.2,.72,.22,1);
      box-shadow: inset 0 0 0 2px #17100b;
    }

    .story-video.is-revealed {
      opacity: 1;
      transform: scale(1);
    }

    .story-video::-webkit-media-controls-panel { background: rgba(55, 25, 12, .42); }

    .story-video-play {
      position: absolute;
      left: 281px;
      top: 1254px;
      z-index: 6;
      width: 72px;
      height: 72px;
      padding: 0;
      border: 4px solid rgba(255, 250, 225, .94);
      border-radius: 50%;
      background: rgba(118, 54, 25, .72);
      box-shadow: 0 5px 16px rgba(76, 31, 12, .32);
      cursor: pointer;
      opacity: 0;
      transform: scale(.86);
      transition: opacity 500ms ease, transform 650ms cubic-bezier(.2,.72,.22,1), background 180ms ease;
    }

    .story-video-play::before {
      content: "";
      position: absolute;
      left: 27px;
      top: 19px;
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 23px solid #fff8dc;
    }

    .story-video-play.is-revealed { opacity: 1; transform: scale(1); }
    .story-video-play.is-revealed { animation: click-cue-scale 1.7s cubic-bezier(.4,0,.2,1) infinite; }
    .story-video-play:active { transform: scale(.94); background: rgba(143, 60, 25, .86); }
    .story-video-play.is-hidden { opacity: 0; pointer-events: none; transform: scale(.86); }

    #level-4-scene .story-video {
      left: 68px;
      top: 1560px;
      width: 504px;
      height: 277px;
      z-index: 5;
      border-radius: 7px;
      background: #080604;
      box-shadow: inset 0 0 0 2px #17100b;
    }

    #level-4-scene .story-video-play {
      left: 284px;
      top: 1663px;
      z-index: 7;
      width: 72px;
      height: 72px;
    }

    #level-4-scene .story-video-secondary {
      left: 64px;
      top: 3413px;
    }

    #level-4-scene .story-video-play-secondary {
      left: 280px;
      top: 3516px;
    }
    #level-2-content .segmented-page,
    #level-3-content .segmented-page,
    #level-4-content .segmented-page { display: block; }

    #level-2-content .segmented-page {
      position: relative;
      z-index: 1;
    }

    .level2-motion-layer {
      position: absolute;
      display: block;
      max-width: none;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      backface-visibility: hidden;
      transform-style: preserve-3d;
    }

    .level2-cloud-layer {
      z-index: 2;
      transition: none;
    }

    #level-2-scene.is-active .level2-motion-layer {
      will-change: transform, opacity;
    }

    #level-2-scene:not(.is-active) .level2-motion-layer {
      animation-play-state: paused;
      will-change: auto;
    }

    #level-2-cloud-left {
      left: -256px;
      top: 1155px;
      width: 1032px;
      height: 776px;
      transform-origin: 320px -81px;
      transform: translate3d(calc(var(--level2-cloud-left-x) + var(--story-parallax-x)), calc(var(--story-parallax-y) * .45), 0);
      animation: level2-cloud-left-breathe 8.8s ease-in-out infinite alternate;
    }

    #level-2-cloud-right {
      left: -396px;
      top: 839px;
      width: 1032px;
      height: 776px;
      transform-origin: 320px 235px;
      transform: translate3d(calc(var(--level2-cloud-right-x) - var(--story-parallax-x)), calc(var(--story-parallax-y) * -.38), 0);
      animation: level2-cloud-right-breathe 9.6s ease-in-out infinite alternate;
    }

    #level-2-cloud-top {
      left: 20px;
      top: 0;
      width: 1032px;
      height: 513px;
      transform-origin: 288px 1080px;
      transform: translate3d(calc(var(--level2-cloud-top-x) + var(--story-parallax-x) * -.42), calc(var(--level2-cloud-top-y) + var(--story-parallax-y) * .3), 0);
      animation: level2-cloud-top-breathe 7.9s ease-in-out infinite alternate;
    }

    #level-2-trumpet {
      left: 146px;
      top: 1494px;
      width: 494px;
      height: 350px;
      z-index: 3;
      transform: translate3d(calc(var(--story-parallax-x) * .22), calc(var(--story-parallax-y) * .16), 0);
      filter: drop-shadow(0 8px 9px rgba(74, 38, 18, .16));
    }

    .level2-snow-layer {
      left: 0;
      top: 165px;
      width: 640px;
      height: 1531px;
      transform-origin: 320px 801px;
    }

    #level-2-snow-far {
      z-index: 3;
      opacity: .52;
      transform: translate3d(
        calc(var(--story-parallax-x) * .18 + var(--level2-snow-far-x)),
        calc(var(--story-parallax-y) * .14 + var(--level2-snow-far-y)),
        0
      ) scale(1.012);
      animation: level2-snow-far-drift 12.6s linear infinite;
    }

    #level-2-snow-mid {
      z-index: 5;
      opacity: .74;
      transform: translate3d(
        calc(var(--story-parallax-x) * .48 + var(--level2-snow-mid-x)),
        calc(var(--story-parallax-y) * .4 + var(--level2-snow-mid-y)),
        0
      ) scale(1.028);
      animation: level2-snow-mid-drift 9.2s linear infinite;
    }

    #level-2-snow-near {
      z-index: 5;
      opacity: .9;
      transform: translate3d(
        calc(var(--story-parallax-x) * .9 + var(--level2-snow-near-x)),
        calc(var(--story-parallax-y) * .78 + var(--level2-snow-near-y)),
        0
      ) scale(1.055);
      animation: level2-snow-near-drift 6.7s linear infinite;
    }

    #level-2-next-guide {
      left: 389px;
      top: 2282px;
      width: 214px;
      height: 203px;
      z-index: 6;
      transform: translate3d(calc(var(--story-parallax-x) * .65), calc(var(--story-parallax-y) * .55), 0);
      animation: level2-guide-pulse 1.9s ease-in-out infinite;
    }

    #level-2-history-audio {
      left: 292px;
      top: 238px;
      z-index: 10;
      width: 330px;
      height: 190px;
    }

    #level-2-history-audio::after {
      content: none;
    }

    #level-2-scene[data-history-playing="true"] #level-2-history-audio::after {
      content: none;
    }

    #level-2-to-3 {
      left: 350px;
      top: 2235px;
      width: 270px;
      height: 255px;
    }

    #level-2-back {
      left: 42px;
      top: 2560px;
      width: 165px;
      height: 225px;
    }

    #level-3-to-4 {
      left: 120px;
      top: 7870px;
      width: 520px;
      height: 350px;
    }

    #level-3-back {
      left: 34px;
      top: 8178px;
      width: 170px;
      height: 255px;
    }

    #level-4-bookmark {
      left: 165px;
      top: 4430px;
      width: 455px;
      height: 330px;
    }

    #level-4-bookmark::before {
      content: "";
      position: absolute;
      left: 22px;
      top: 54px;
      width: 375px;
      height: 125px;
      border-radius: 50%;
      opacity: .18;
      background: radial-gradient(ellipse, rgba(190, 83, 31, .34), transparent 70%);
      animation: level4-bookmark-breathe 2.1s ease-in-out infinite;
    }

    #level-4-back {
      left: 0;
      top: 4890px;
      width: 245px;
      height: 300px;
    }

    @keyframes soft-in {
      from { opacity: 0; transform: translateY(9px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes letter-content-in {
      from { opacity: 0; filter: brightness(1.12) saturate(.72); }
      to { opacity: 1; filter: none; }
    }

    @keyframes book-in {
      from { opacity: 0; transform: translateY(14px) scale(.92); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes book-breathe {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-7px); }
    }

    @keyframes level4-bookmark-breathe {
      0%, 100% { opacity: .12; transform: scale(.92); }
      50% { opacity: .34; transform: scale(1.04); }
    }

    @keyframes level4-bookmark-confirm {
      0% { filter: none; }
      45% { filter: brightness(1.09) saturate(1.1); }
      100% { filter: none; }
    }

    @keyframes level4-star-breathe {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(-.35deg) scale(.985); filter: brightness(.98); }
      50% { transform: translate3d(0, -3px, 0) rotate(.35deg) scale(1.018); filter: brightness(1.08); }
    }

    @keyframes level4-star-flash {
      0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.48); }
      24% { opacity: .95; transform: translate3d(-50%, -50%, 0) scale(1); }
      100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.34); }
    }

    @keyframes copy-reveal {
      from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(14px); }
      to { opacity: 1; clip-path: inset(0); transform: translateY(0); }
    }

    @keyframes hint-pulse {
      0%, 100% { opacity: .72; }
      50% { opacity: 1; }
    }

    @keyframes guide-glow {
      0%, 100% { opacity: .35; transform: translateX(var(--drag-x)) scaleX(.72); transform-origin: left; }
      50% { opacity: 1; transform: translateX(var(--drag-x)) scaleX(1); transform-origin: left; }
    }

    @keyframes archive-target-breathe {
      0%, 100% { opacity: .58; box-shadow: inset 0 0 0 1px rgba(255, 218, 126, .16), 0 0 0 rgba(255, 204, 91, 0); }
      50% { opacity: .94; box-shadow: inset 0 0 18px rgba(255, 221, 142, .16), 0 0 18px rgba(255, 199, 76, .24); }
    }

    @keyframes archive-guide-travel {
      0% { transform: translate3d(0, 0, 0) scale(.76); opacity: 0; }
      20% { opacity: 1; }
      72% { transform: translate3d(117px, 0, 0) scale(1); opacity: 1; }
      100% { transform: translate3d(133px, 0, 0) scale(.76); opacity: 0; }
    }

    @keyframes archive-guide-line {
      0%, 100% { transform: scaleX(.22); opacity: .25; }
      46% { transform: scaleX(1); opacity: .9; }
    }

    @keyframes archive-target-confirm {
      0% { opacity: 1; transform: scale(1); }
      38% { opacity: 1; transform: scale(1.045); border-color: rgba(255, 233, 163, 1); box-shadow: inset 0 0 32px rgba(255, 231, 158, .42), 0 0 30px rgba(255, 206, 82, .62); }
      100% { opacity: 0; transform: scale(1.08); }
    }

    @keyframes archive-ink-spread {
      0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.06) rotate(-9deg); filter: blur(3px); }
      25% { opacity: .86; }
      72% { opacity: .72; transform: translate3d(-50%, -50%, 0) scale(.92) rotate(2deg); filter: blur(.4px); }
      100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.22) rotate(5deg); filter: blur(2.2px); }
    }

    @keyframes archive-ink-pulse {
      0% { transform: scale(.4); opacity: .35; }
      52% { transform: scale(1.04); opacity: 1; }
      100% { transform: scale(1.16); opacity: .16; }
    }

    @keyframes archive-water-ring {
      0% { transform: scale(.18) rotate(0); opacity: .8; }
      65% { opacity: .5; }
      100% { transform: scale(1.48) rotate(13deg); opacity: 0; }
    }

    @keyframes archive-bag-return {
      0% { transform: translate3d(var(--bag-drag-x), var(--bag-drag-y), 0); }
      56% { transform: translate3d(-7px, 0, 0); }
      78% { transform: translate3d(3px, 0, 0); }
      100% { transform: translate3d(0, 0, 0); }
    }

    @keyframes archive-bag-body-open {
      0% { transform: translate3d(8px, 0, 0) scale(1.018); filter: drop-shadow(0 18px 18px rgba(63, 27, 14, .18)); }
      34% { transform: translate3d(4px, 7px, 0) scale(1.012); filter: drop-shadow(0 24px 22px rgba(63, 27, 14, .26)); }
      72% { transform: translate3d(2px, 2px, 0) scale(1.006); }
      100% { transform: translate3d(0, 0, 0) scale(1); filter: drop-shadow(0 8px 12px rgba(63, 27, 14, .12)); }
    }

    @keyframes archive-flap-open {
      0% { transform: translate3d(8px, 0, 0) perspective(920px) rotateX(0deg) scale(1.018); filter: drop-shadow(0 16px 16px rgba(63, 27, 14, .18)); }
      24% { transform: translate3d(5px, -3px, 18px) perspective(920px) rotateX(-18deg) scale(1.025); filter: drop-shadow(0 24px 20px rgba(63, 27, 14, .28)); }
      58% { transform: translate3d(2px, -15px, 34px) perspective(920px) rotateX(-58deg) scale(1.018); filter: drop-shadow(0 34px 24px rgba(63, 27, 14, .32)); }
      82% { transform: translate3d(0, -19px, 26px) perspective(920px) rotateX(-76deg) scale(1.01); }
      100% { transform: translate3d(0, -17px, 22px) perspective(920px) rotateX(-70deg) scale(1); filter: drop-shadow(0 26px 18px rgba(63, 27, 14, .25)); }
    }

    @keyframes archive-rope-top-break {
      0%, 16% { opacity: 1; transform: translate3d(8px, 0, 0) rotate(0) scaleY(1.018); }
      42% { opacity: 1; transform: translate3d(10px, -4px, 10px) rotate(3deg) scaleY(.96); }
      72% { opacity: .96; transform: translate3d(15px, -25px, 16px) rotate(8deg) scaleY(.72); }
      100% { opacity: 0; transform: translate3d(22px, -55px, 18px) rotate(13deg) scaleY(.42); }
    }

    @keyframes archive-rope-bottom-break {
      0%, 16% { opacity: 1; transform: translate3d(8px, 0, 0) rotate(0) scaleY(1.018); }
      46% { opacity: 1; transform: translate3d(4px, 8px, 0) rotate(-2deg) scaleY(.96); }
      74% { opacity: .98; transform: translate3d(-8px, 27px, 0) rotate(-7deg) scaleY(.78); }
      100% { opacity: 0; transform: translate3d(-16px, 62px, 0) rotate(-12deg) scaleY(.46); }
    }

    @keyframes archive-seal-top-open {
      0% { transform: translate3d(8px, 0, 0) perspective(920px) rotateX(0deg) scale(1.018); filter: drop-shadow(0 14px 13px rgba(63, 27, 14, .2)); }
      24% { transform: translate3d(5px, -3px, 19px) perspective(920px) rotateX(-18deg) scale(1.025); }
      58% { transform: translate3d(2px, -15px, 36px) perspective(920px) rotateX(-58deg) scale(1.018); filter: drop-shadow(0 28px 20px rgba(63, 27, 14, .34)); }
      100% { transform: translate3d(0, -17px, 24px) perspective(920px) rotateX(-70deg) scale(1); filter: drop-shadow(0 22px 16px rgba(63, 27, 14, .26)); }
    }

    @keyframes archive-seal-bottom-release {
      0%, 18% { transform: translate3d(8px, 0, 0) scale(1.018); }
      48% { transform: translate3d(4px, 7px, 0) rotate(-2deg) scale(1.045); }
      72% { transform: translate3d(-2px, -2px, 0) rotate(1deg) scale(.99); }
      100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
    }

    @keyframes archive-slit-open {
      0% { opacity: 0; transform: scaleY(.08); }
      28% { opacity: .78; transform: scaleY(.34); }
      66% { opacity: 1; transform: scaleY(.9); }
      100% { opacity: 1; transform: scaleY(.7); }
    }

    @keyframes archive-envelope-peek {
      0% { opacity: 0; transform: translate3d(0, 126px, 0) rotate(-1.5deg) scale(.94); }
      34% { opacity: .94; }
      72% { opacity: 1; transform: translate3d(0, -34px, 0) rotate(.7deg) scale(1); }
      100% { opacity: 0; transform: translate3d(0, -72px, 0) rotate(0) scale(1.015); }
    }

    @keyframes envelope-rise-and-drop {
      0% { opacity: 0; transform: translate3d(0, -716px, 0) perspective(900px) rotateX(72deg) rotateZ(-4deg) scale(.76); filter: drop-shadow(0 8px 8px rgba(66, 31, 16, .12)); }
      16% { opacity: .9; transform: translate3d(0, -820px, 34px) perspective(900px) rotateX(28deg) rotateZ(-2deg) scale(.84); }
      32% { opacity: 1; transform: translate3d(0, -956px, 58px) perspective(900px) rotateX(-10deg) rotateZ(1.4deg) scale(.92); filter: drop-shadow(0 32px 25px rgba(66, 31, 16, .34)); }
      50% { opacity: 1; transform: translate3d(0, -870px, 36px) perspective(900px) rotateX(3deg) rotateZ(-.6deg) scale(.96); }
      78% { opacity: 1; transform: translate3d(0, 26px, 0) perspective(900px) rotateX(0) rotateZ(.35deg) scale(1.025); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); filter: drop-shadow(0 18px 16px rgba(66, 31, 16, .2)); }
    }

    @keyframes level-light-breathe {
      0%, 100% { opacity: .2; }
      50% { opacity: var(--level-light-strength); }
    }

    @keyframes take-letter-cue-arrive {
      from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.88); }
      to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }

    @keyframes take-letter-hand-press {
      0%, 16%, 100% { transform: translate3d(0, 0, 0) scale(.97); filter: drop-shadow(0 0 7px rgba(255, 239, 183, .32)); }
      38% { transform: translate3d(-2px, 7px, 0) scale(1.045); filter: drop-shadow(0 0 15px rgba(255, 242, 196, .68)); }
      58% { transform: translate3d(0, 2px, 0) scale(1); }
    }

    @keyframes take-letter-ripple {
      0%, 26% { opacity: 0; transform: scale(.34); }
      40% { opacity: .78; }
      78%, 100% { opacity: 0; transform: scale(1.62); }
    }

    @keyframes jiajinshan-book-glow {
      0%, 100% { opacity: .07; transform: scale(.98); }
      50% { opacity: .16; transform: scale(1.015); }
    }

    @keyframes jiajinshan-bookmark-particle {
      0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(.28);
      }
      18% {
        opacity: .96;
        transform: translate3d(0, 0, 0) scale(1.12);
      }
      72% { opacity: .72; }
      100% {
        opacity: 0;
        transform: translate3d(var(--particle-dx), var(--particle-dy), 0) scale(.18);
      }
    }

    @keyframes jiajinshan-bookmark-tone-reveal {
      0% {
        opacity: 0;
        transform: translate3d(0, 12px, 0) rotate(.35deg);
        filter:
          drop-shadow(var(--book-shadow-x) var(--book-shadow-y) 13px rgba(83, 42, 18, .12))
          brightness(var(--book-tone))
          brightness(1);
      }
      52% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(.35deg);
        filter:
          drop-shadow(var(--book-shadow-x) var(--book-shadow-y) 15px rgba(255, 210, 91, .22))
          brightness(var(--book-tone))
          brightness(1.15);
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(.35deg);
        filter:
          drop-shadow(var(--book-shadow-x) var(--book-shadow-y) 13px rgba(83, 42, 18, .12))
          brightness(var(--book-tone))
          brightness(1.15);
      }
    }

    @keyframes archive-cloud-source-enter {
      from { opacity: 0; transform: translate3d(0, 34px, 0) scale(.98); }
      to { opacity: .96; transform: translate3d(var(--archive-cloud-local-x, 0px), var(--archive-cloud-local-y, 0px), 0) scale(1.02); }
    }

    @keyframes archive-cloud-source-left {
      from { opacity: .96; }
      to { opacity: 0; transform: translate3d(calc(var(--archive-cloud-local-x, 0px) - 330px), calc(var(--archive-cloud-local-y, 0px) + 12px), 0) scale(1.05); }
    }

    @keyframes archive-cloud-source-right {
      from { opacity: .96; }
      to { opacity: 0; transform: translate3d(calc(var(--archive-cloud-local-x, 0px) + 330px), calc(var(--archive-cloud-local-y, 0px) - 8px), 0) scale(1.05); }
    }

    @keyframes archive-letter-copy-reveal {
      from { opacity: 0; transform: translate3d(0,20px,0); filter: blur(2px); }
      to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); }
    }

    @keyframes p02-title-breathe { 0%,100% { filter: brightness(.98); } 50% { filter: brightness(1.08); } }
    @keyframes p02-title-sweep { 0%,14% { transform: translate3d(0,0,0) skewX(-13deg); opacity: 0; } 28% { opacity: .58; } 48%,100% { transform: translate3d(760px,0,0) skewX(-13deg); opacity: 0; } }
    @keyframes level4-title-tone { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.08) drop-shadow(0 4px 8px rgba(84,31,15,.16)); } }

    @keyframes diary-entry-pulse {
      0%, 18% { opacity: 0; transform: scale(.62); }
      36% { opacity: .72; }
      76%, 100% { opacity: 0; transform: scale(1.28); }
    }

    @keyframes diary-entry-hand-breathe {
      0%, 16%, 100% { transform: scale(.965); filter: brightness(1); }
      38% { transform: scale(1.045); filter: brightness(1.075) drop-shadow(0 1px 2px rgba(255, 238, 183, .24)); }
      58% { transform: scale(1); filter: brightness(1.025); }
    }

    @keyframes archive-guide-float {
      0%, 100% { transform: translate3d(0, -8px, 0); }
      52% { transform: translate3d(0, 10px, 0); }
    }

    @keyframes scene-develop {
      from { opacity: .15; filter: brightness(1.12) saturate(.84); }
      to { opacity: 1; filter: brightness(1) saturate(1); }
    }

    @keyframes scene-transition-wash {
      0%, 100% { opacity: 0; }
      42% { opacity: .86; }
      64% { opacity: .34; }
    }

    @keyframes spark-energy {
      0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 165, 24, .35)); }
      50% { filter: drop-shadow(0 0 13px rgba(255, 191, 50, .72)); }
    }

    @keyframes history-sparks-arrive {
      0% { opacity: 0; filter: blur(3px) drop-shadow(0 0 2px rgba(255, 145, 18, .12)); }
      34% { opacity: .24; }
      72% { opacity: .74; }
      100% { opacity: .92; filter: blur(0) drop-shadow(0 0 5px rgba(255, 165, 24, .35)); }
    }

    @keyframes spark-drift {
      from { margin-left: -4px; margin-top: 2px; }
      to { margin-left: 7px; margin-top: -5px; }
    }

    @keyframes level2-cloud-left-breathe {
      0% { opacity: .86; translate: 0 5px; }
      100% { opacity: .98; translate: -13px -7px; }
    }

    @keyframes level2-cloud-right-breathe {
      0% { opacity: .88; translate: 0 -4px; }
      100% { opacity: .97; translate: 14px 8px; }
    }

    @keyframes level2-cloud-top-breathe {
      0% { opacity: .84; translate: -5px 3px; }
      100% { opacity: .96; translate: 7px -12px; }
    }

    @keyframes level3-pin-stab {
      0% {
        opacity: 0;
        transform: translate3d(8px, -78px, 34px) rotate(-11deg) scale(1.34);
        filter: drop-shadow(0 27px 18px rgba(35, 18, 16, .12));
      }
      22% { opacity: 1; }
      68% {
        opacity: 1;
        transform: translate3d(-1px, 5px, 0) rotate(1.4deg) scale(.965);
        filter: drop-shadow(0 5px 4px rgba(35, 18, 16, .34));
      }
      84% { transform: translate3d(0, -2px, 0) rotate(-.5deg) scale(1.018); }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0) scale(1);
        filter: drop-shadow(0 9px 7px rgba(35, 18, 16, .25));
      }
    }

    @keyframes level3-guide-press {
      0%, 18%, 100% { opacity: .9; translate: 0 -6px; scale: .97; }
      44% { opacity: 1; translate: 0 9px; scale: 1.035; }
      64% { opacity: .96; translate: 0 2px; scale: 1; }
    }

    @keyframes level2-snow-far-drift {
      0% { translate: -2px -5px; }
      50% { translate: 3px 7px; }
      100% { translate: -1px 19px; }
    }

    @keyframes level2-snow-mid-drift {
      0% { translate: -5px -10px; }
      46% { translate: 5px 9px; }
      100% { translate: -3px 31px; }
    }

    @keyframes level2-snow-near-drift {
      0% { translate: -9px -18px; }
      42% { translate: 8px 12px; }
      100% { translate: -5px 48px; }
    }

    @keyframes level2-guide-pulse {
      0%, 100% { opacity: .78; translate: 0 -7px; scale: .97; filter: drop-shadow(0 0 0 rgba(255, 230, 166, 0)); }
      50% { opacity: 1; translate: 0 9px; scale: 1.035; filter: drop-shadow(0 0 14px rgba(255, 231, 170, .68)); }
    }

    @keyframes level-glints-drift {
      0% { opacity: .45; filter: blur(.2px) brightness(.92); background-position: 0 0, 0 0, 0 0, 0 0; }
      48% { opacity: .82; filter: blur(.7px) brightness(1.16); background-position: 7px -10px, -8px 6px, 10px 4px, -5px -8px; }
      100% { opacity: .58; filter: blur(.35px) brightness(1.02); background-position: 13px 4px, -13px -8px, 4px -11px, 8px 7px; }
    }

    @keyframes level-glint-switch {
      0%, 4% { opacity: 0; transform: translate3d(var(--glint-x-1), var(--glint-y-1), 0) scale(.72); }
      9%, 27% { opacity: .58; transform: translate3d(var(--glint-x-1), var(--glint-y-1), 0) scale(.96); }
      32% { opacity: 0; transform: translate3d(var(--glint-x-1), var(--glint-y-1), 0) scale(.76); }
      32.1%, 37% { opacity: 0; transform: translate3d(var(--glint-x-2), var(--glint-y-2), 0) scale(.72); }
      42%, 60% { opacity: .54; transform: translate3d(var(--glint-x-2), var(--glint-y-2), 0) scale(1); }
      65% { opacity: 0; transform: translate3d(var(--glint-x-2), var(--glint-y-2), 0) scale(.76); }
      65.1%, 70% { opacity: 0; transform: translate3d(var(--glint-x-3), var(--glint-y-3), 0) scale(.72); }
      75%, 93% { opacity: .56; transform: translate3d(var(--glint-x-3), var(--glint-y-3), 0) scale(.94); }
      98%, 100% { opacity: 0; transform: translate3d(var(--glint-x-3), var(--glint-y-3), 0) scale(.74); }
    }

    @keyframes archive-up {
      from { transform: translate3d(0, 0, 0); }
      to { transform: translate3d(0, -54%, 0); }
    }

    @keyframes archive-down {
      from { transform: translate3d(0, 0, 0); }
      to { transform: translate3d(0, 54%, 0); }
    }

    @keyframes cover-reveal {
      from { transform: scale(1.025); filter: brightness(.82); }
      to { transform: scale(1); filter: brightness(1); }
    }

    @keyframes envelope-land {
      0% { opacity: 0; transform: translate3d(0, -270px, 0) scale(.76) rotate(-4deg); }
      44% { opacity: 1; transform: translate3d(0, 22px, 0) scale(1.035) rotate(1.1deg); }
      70% { transform: translate3d(0, -9px, 0) scale(.99) rotate(-.35deg); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
    }

    @keyframes envelope-leave {
      from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
      to { opacity: 0; transform: translate3d(0, -85px, 0) scale(.94); }
    }

    @keyframes archive-cloud-enter {
      0% { opacity: 0; transform: translate3d(calc(-86px + var(--archive-cloud-x)), calc(18px + var(--archive-cloud-y)), 0) scale(1.08); }
      56% { opacity: .7; }
      100% { opacity: .58; transform: translate3d(var(--archive-cloud-x), var(--archive-cloud-y), 0) scale(1.02); }
    }

    @keyframes archive-cloud-drift {
      0% { transform: translate3d(calc(-8px + var(--archive-cloud-x)), calc(-5px + var(--archive-cloud-y)), 0) scale(1.02); opacity: .52; }
      52% { transform: translate3d(calc(5px + var(--archive-cloud-x)), calc(8px + var(--archive-cloud-y)), 0) scale(1.045); opacity: .68; }
      100% { transform: translate3d(calc(11px + var(--archive-cloud-x)), calc(-3px + var(--archive-cloud-y)), 0) scale(1.026); opacity: .58; }
    }

    @keyframes archive-cloud-left-dismiss {
      0% { opacity: .62; transform: translate3d(var(--archive-cloud-x), var(--archive-cloud-y), 0) scale(1.02); }
      100% { opacity: 0; transform: translate3d(calc(-360px + var(--archive-cloud-x)), calc(-12px + var(--archive-cloud-y)), 0) scale(1.05); }
    }

    @keyframes archive-cloud-right-dismiss {
      0% { opacity: .62; transform: translate3d(var(--archive-cloud-x-reverse), var(--archive-cloud-y-reverse), 0) scale(1.02); }
      100% { opacity: 0; transform: translate3d(calc(360px + var(--archive-cloud-x-reverse)), calc(10px + var(--archive-cloud-y-reverse)), 0) scale(1.05); }
    }

    @keyframes history-audio-line {
      0% { filter: brightness(.88); box-shadow: 0 0 4px rgba(255, 223, 136, .18); }
      100% { filter: brightness(1.12); box-shadow: 0 0 12px rgba(255, 223, 136, .5); }
    }

    @keyframes tap-light-bloom {
      0% { opacity: 0; transform: translate3d(calc(var(--tap-x) - 82px), calc(var(--tap-y) - 82px), 0) scale(.34); }
      24% { opacity: .72; transform: translate3d(calc(var(--tap-x) - 82px), calc(var(--tap-y) - 82px), 0) scale(.72); }
      100% { opacity: 0; transform: translate3d(calc(var(--tap-x) - 82px), calc(var(--tap-y) - 82px), 0) scale(1.18); }
    }

    @keyframes story-light-breathe {
      0%, 100% { opacity: .23; }
      50% { opacity: var(--story-light-opacity); }
    }

    @keyframes cover-page-arrive {
      from { opacity: .22; transform: translate3d(0, 18px, 0) scale(1.025); filter: brightness(1.1) saturate(.9); }
      to { opacity: 1; transform: translate3d(0, var(--cover-drift-y), 0) scale(1.008); filter: none; }
    }

    @keyframes cover-light-breathe {
      0%, 100% { opacity: .22; transform: translate3d(-8px, 0, 0) scale(.98); }
      50% { opacity: .48; transform: translate3d(10px, -6px, 0) scale(1.04); }
    }

    @keyframes letter-sheet-arrive {
      0% { opacity: 0; transform: translate3d(0, 250px, 0) scale(.965); }
      72% { opacity: 1; transform: translate3d(0, -10px, 0) scale(1.006); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }

    @keyframes new-journey-reveal {
      from { opacity: 0; transform: translate3d(0, 16px, 0); filter: blur(3px) brightness(1.12); }
      to { opacity: 1; transform: translate3d(0, 0, 0); filter: none; }
    }

    @keyframes archive-up-arrow {
      0%, 100% { opacity: .42; transform: translate3d(-50%, 8px, 0) rotate(45deg); }
      48% { opacity: 1; transform: translate3d(-50%, -2px, 0) rotate(45deg); }
    }

    @keyframes archive-up-copy-float {
      0%, 100% { transform: translate3d(-50%, 5px, 0); }
      50% { transform: translate3d(-50%, -5px, 0); }
    }

    @keyframes click-cue-scale {
      0%, 100% { scale: .965; }
      48% { scale: 1.045; }
    }

    @keyframes history-photo-splash {
      0% { opacity: 0; clip-path: circle(2% at var(--ink-origin-x) var(--ink-origin-y)); -webkit-clip-path: circle(2% at var(--ink-origin-x) var(--ink-origin-y)); transform: translateZ(0) scale(.72) rotate(-3deg); filter: blur(3px) sepia(.48) saturate(.64) contrast(1.14); }
      24% { opacity: .92; }
      68% { clip-path: circle(74% at var(--ink-origin-x) var(--ink-origin-y)); -webkit-clip-path: circle(74% at var(--ink-origin-x) var(--ink-origin-y)); transform: translateZ(0) scale(1.035) rotate(.6deg); filter: blur(.25px) sepia(.12) saturate(.92) contrast(1.05); }
      100% { opacity: 1; clip-path: circle(112% at var(--ink-origin-x) var(--ink-origin-y)); -webkit-clip-path: circle(112% at var(--ink-origin-x) var(--ink-origin-y)); transform: translateZ(0) scale(1) rotate(0); filter: none; }
    }

    @keyframes history-ink-splash {
      0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.05) rotate(-10deg); }
      26% { opacity: .7; }
      72% { opacity: .32; transform: translate3d(-50%, -50%, 0) scale(1.18) rotate(5deg); }
      100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.42) rotate(9deg); }
    }

    @keyframes history-bullet-fly {
      0% { opacity: 0; transform: translate3d(620px, -76px, 0) rotate(-8deg) scale(.72); filter: blur(7px) drop-shadow(-42px 0 10px rgba(255, 164, 33, .72)); }
      18% { opacity: 1; }
      72% { transform: translate3d(-16px, 2px, 0) rotate(1deg) scale(1.04); filter: blur(.4px) drop-shadow(-10px 0 5px rgba(255, 174, 48, .4)); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); filter: none; }
    }
    /* v1.5.0: assets become visible only after decode and two stable paint frames. */
    .level-book:not(.is-asset-ready),
    .level-footprints:not(.is-asset-ready),
    .diary-entry-cue:not(.is-asset-ready),
    .p02-white-copy-foreground:not(.is-asset-ready),
    .level2-motion-layer:not(.is-asset-ready),
    .level3-layer:not(.is-asset-ready),
    .level4-reveal-element:not(.is-asset-ready),
    .level4-star-traveller:not(.is-asset-ready),
    .archive-cloud-layer:not(.is-asset-ready),
    .archive-star-journey:not(.is-asset-ready),
    .p02-star-journey:not(.is-asset-ready) {
      opacity: 0 !important;
    }

    .level2-motion-layer,
    .level3-layer,
    .level4-star-traveller,
    .archive-star-journey,
    .p02-star-journey {
      transition-property: opacity, transform;
      transition-duration: 520ms, 620ms;
      transition-timing-function: var(--motion-standard), var(--motion-settle);
    }

    .diary-entry-cue:not(.is-asset-ready) *,
    .level2-motion-layer:not(.is-asset-ready),
    .level3-guide:not(.is-asset-ready),
    .level4-star-traveller:not(.is-asset-ready) *,
    .archive-star-journey:not(.is-asset-ready) *,
    .p02-star-journey:not(.is-asset-ready) * {
      animation-play-state: paused !important;
    }

    .level3-note {
      opacity: var(--level3-note-opacity, 0);
      translate: 0 var(--level3-note-y, 18px);
    }

    .level3-guide {
      opacity: var(--level3-guide-opacity, 0);
      translate: 0 var(--level3-guide-y, 14px);
    }

    .level4-reveal-element {
      transition:
        opacity 540ms var(--level4-element-delay, 0ms) var(--motion-standard),
        transform 660ms var(--level4-element-delay, 0ms) var(--motion-settle);
    }

    .scene:not(.is-active):not(.is-entering):not(.is-leaving) .level-book,
    .scene:not(.is-active):not(.is-entering):not(.is-leaving) .level-footprints,
    .scene:not(.is-active):not(.is-entering):not(.is-leaving) .level2-motion-layer,
    .scene:not(.is-active):not(.is-entering):not(.is-leaving) .level3-layer,
    .scene:not(.is-active):not(.is-entering):not(.is-leaving) .level4-reveal-element {
      will-change: auto;
    }

    html[data-page-hidden="true"] .scene *,
    html[data-page-hidden="true"] .scene *::before,
    html[data-page-hidden="true"] .scene *::after {
      animation-play-state: paused !important;
    }

    /* iOS WebKit can drop long nested-scroll layers under paint containment. */
    html[data-runtime="ios"] .scene.is-active,
    html[data-runtime="ios-wechat"] .scene.is-active {
      contain: layout style;
    }

    html[data-runtime="ios"] .page-segment,
    html[data-runtime="ios-wechat"] .page-segment {
      backface-visibility: visible;
      -webkit-backface-visibility: visible;
    }

    html[data-performance-tier="constrained"] .audio-toggle::before,
    html[data-performance-tier="balanced"] .audio-toggle::before {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    html[data-performance-tier="constrained"] .story-follow-light,
    html[data-performance-tier="constrained"] .level-follow-light {
      mix-blend-mode: normal;
      opacity: .18;
    }

    html[data-performance-tier="balanced"] .story-follow-light,
    html[data-performance-tier="balanced"] .level-follow-light {
      mix-blend-mode: normal;
    }

    html[data-performance-tier="balanced"] .level-glints,
    html[data-performance-tier="balanced"] #level-2-scene::before,
    html[data-performance-tier="balanced"] #level-3-scene::before,
    html[data-performance-tier="balanced"] #level-4-scene::before {
      filter: none;
    }

    html[data-performance-tier="balanced"] .level-book,
    html[data-performance-tier="balanced"] .level-footprints,
    html[data-performance-tier="balanced"] .level2-motion-layer,
    html[data-performance-tier="balanced"] .level3-layer,
    html[data-performance-tier="balanced"] .level4-reveal-element {
      backface-visibility: visible;
      will-change: auto;
    }

    html[data-performance-tier="balanced"] #level-2-cloud-left,
    html[data-performance-tier="balanced"] #level-2-cloud-right,
    html[data-performance-tier="balanced"] #level-2-cloud-top,
    html[data-performance-tier="balanced"] #level-2-snow-far,
    html[data-performance-tier="balanced"] #level-2-snow-mid,
    html[data-performance-tier="balanced"] #level-2-snow-near {
      animation: none;
    }

    html[data-performance-tier="balanced"] #level-2-scene.is-active .level2-motion-layer {
      will-change: auto;
    }

    html[data-performance-tier="balanced"] #level-2-trumpet,
    html[data-performance-tier="balanced"] .level3-note,
    html[data-performance-tier="balanced"] .level4-reveal-element {
      filter: none;
    }

    html[data-performance-tier="balanced"] #level-2-snow-far {
      display: none;
    }

    html[data-performance-tier="balanced"] .p02-fluid-route-light {
      filter: none;
      stroke-width: 4;
    }

    html[data-performance-tier="balanced"] .story-follow-light {
      animation-duration: 8.4s;
    }

    html[data-performance-tier="balanced"] .level3-snow,
    html[data-performance-tier="constrained"] .level3-snow {
      transform: none !important;
      contain: none;
      will-change: auto !important;
    }

    html[data-performance-tier="constrained"] .story-follow-light,
    html[data-performance-tier="constrained"] .level-follow-light,
    html[data-performance-tier="constrained"] .level-glints,
    html[data-performance-tier="constrained"] #level-2-scene::before,
    html[data-performance-tier="constrained"] #level-3-scene::before,
    html[data-performance-tier="constrained"] #level-4-scene::before {
      animation: none;
      filter: none;
    }

    html[data-performance-tier="constrained"] #level-2-snow-far,
    html[data-performance-tier="constrained"] #level-2-snow-mid,
    html[data-performance-tier="constrained"] .level3-star-trail {
      display: none;
    }

    /* v1.5.6: touch scroll owns transforms directly; only opacity is eased. */
    html[data-input-mode="touch"] .level-book,
    html[data-input-mode="touch"] .level-footprints,
    html[data-input-mode="touch"] .p02-white-copy-foreground,
    html[data-input-mode="touch"] .level2-motion-layer,
    html[data-input-mode="touch"] .level3-layer,
    html[data-input-mode="touch"] .level3-copy,
    html[data-input-mode="touch"] .level3-note,
    html[data-input-mode="touch"] .level3-guide,
    html[data-input-mode="touch"] .level4-reveal-element,
    html[data-input-mode="touch"] .level4-star-traveller {
      transition-property: opacity;
      transition-duration: 280ms;
      transition-timing-function: cubic-bezier(.22,.61,.36,1);
    }

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

      .level3-note,
      .level3-guide,
      .level4-reveal-element,
      .diary-entry-cue {
        opacity: 1 !important;
        transform: none !important;
        translate: none !important;
      }
    }