From 6c73569d9f91a5d58e9718af618028d58107c787 Mon Sep 17 00:00:00 2001
From: flowerstonezl <125468358+flowerstonezl@users.noreply.github.com>
Date: Thu, 21 May 2026 15:50:38 +0800
Subject: [PATCH] qaunji

---
 frontend/src/components/LaborDayPage.vue     | 157 +++++++++++++++
 frontend/src/components/QuanjiPage.vue       | 168 ++++++++++++++++
 frontend/src/components/TaxiHandHoldPage.vue | 200 +++++++++++++++++++
 3 files changed, 525 insertions(+)
 create mode 100644 frontend/src/components/LaborDayPage.vue
 create mode 100644 frontend/src/components/QuanjiPage.vue
 create mode 100644 frontend/src/components/TaxiHandHoldPage.vue

diff --git a/frontend/src/components/LaborDayPage.vue b/frontend/src/components/LaborDayPage.vue
new file mode 100644
index 0000000..6c21636
--- /dev/null
+++ b/frontend/src/components/LaborDayPage.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { usePointerSwipe, usePreferredReducedMotion } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import type { Memory } from '../api/client'
+import { getStandardNepalTheme } from '../constants/nepalThemes'
+import PolaroidCard from './PolaroidCard.vue'
+import { renderMarkdown } from '../utils/renderMarkdown'
+
+const props = defineProps<{
+  memory: Memory
+}>()
+
+const stageRef = ref<HTMLElement | null>(null)
+const openAmount = ref(0)
+const reduceMotion = usePreferredReducedMotion()
+const theme = computed(() => getStandardNepalTheme(props.memory.nepal_art_style))
+const bodyHtml = computed(() => renderMarkdown(props.memory.main_text))
+
+usePointerSwipe(stageRef, {
+  disableTextSelect: true,
+  onSwipeEnd(_e, direction) {
+    if (reduceMotion.value === 'reduce') return
+    if (direction === 'left') openAmount.value = Math.min(1, openAmount.value + 0.34)
+    if (direction === 'right') openAmount.value = Math.max(0, openAmount.value - 0.34)
+  },
+})
+
+const isOpen = computed(() => openAmount.value > 0.45)
+const curtainShift = computed(() => `${openAmount.value * 86}%`)
+const intimacyTags = computed(() =>
+  isOpen.value ? ['缠绵', '很累', '靠近得更彻底'] : ['暖灯', '床褶', '呼吸感'],
+)
+const stageCopy = computed(() => {
+  if (isOpen.value) return '幕布拉开以后，呼吸、灯影、褶皱全都开始说话。'
+  return '把幕布拉开一点，这一页才会真正进入劳动节的“劳动”。'
+})
+
+function toggleCurtain() {
+  openAmount.value = isOpen.value ? 0 : 1
+}
+</script>
+
+<template>
+  <div
+    class="relative mx-auto max-w-lg overflow-hidden rounded-3xl bg-gradient-to-br px-3 pb-8 pt-6 sm:px-5 sm:pb-10 sm:pt-8"
+    :class="theme.gradient"
+  >
+    <div class="pointer-events-none absolute -left-10 top-10 h-48 w-48 rounded-full bg-rose-300/28 blur-[3rem]" aria-hidden="true" />
+    <div class="pointer-events-none absolute -right-10 bottom-8 h-56 w-56 rounded-full bg-amber-300/20 blur-[3.8rem]" aria-hidden="true" />
+
+    <div
+      class="relative z-[1] mx-auto mb-7 max-w-[min(100%,400px)] overflow-hidden rounded-[2rem] border border-rose-200/65 bg-[linear-gradient(180deg,#fff6f4_0%,#ffece2_100%)] shadow-[0_24px_60px_-18px_rgba(190,80,120,0.24)]"
+    >
+      <div class="pointer-events-none absolute inset-0 nepal-fiber opacity-[0.12] mix-blend-multiply" />
+
+      <div class="relative px-5 pb-5 pt-5 sm:px-6 sm:pb-6">
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <p class="text-[10px] font-semibold uppercase tracking-[0.3em] text-rose-700/66">
+              Labor Day / 05.01
+            </p>
+            <h3 class="mt-2 font-display-cn text-[1.9rem] leading-none text-rose-950">
+              劳动节“劳动”
+            </h3>
+          </div>
+          <div class="rounded-2xl border border-rose-200/70 bg-white/88 px-3 py-2 text-right shadow-[0_8px_18px_rgba(190,80,120,0.12)]">
+            <p class="text-[9px] font-semibold tracking-[0.22em] text-rose-700/70">
+              Intimacy Meter
+            </p>
+            <p class="mt-1 font-brush text-xl text-rose-950">{{ isOpen ? '很累嘛' : '快拉开' }}</p>
+          </div>
+        </div>
+
+        <div class="mt-6 rounded-[1.8rem] border border-rose-200/60 bg-white/74 p-4 shadow-inner">
+          <div
+            ref="stageRef"
+            class="relative overflow-hidden rounded-[1.6rem] bg-gradient-to-b from-[#7f3b4f] via-[#b46878] to-[#f6cdb0] px-4 pb-5 pt-5"
+            style="touch-action: none"
+          >
+            <div class="absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-white/15 to-transparent" aria-hidden="true" />
+            <div class="absolute right-7 top-5 h-12 w-12 rounded-full bg-[#ffd89c] shadow-[0_0_30px_rgba(255,216,156,0.35)]" aria-hidden="true" />
+
+            <div class="relative h-[230px] overflow-hidden rounded-[1.35rem] border border-white/18 bg-[#4a2730]">
+              <div class="absolute inset-0 bg-gradient-to-b from-[#6d3244] via-[#8f4d62] to-[#352028]" />
+              <div class="absolute left-1/2 top-4 h-3 w-24 -translate-x-1/2 rounded-full bg-white/10 blur-md" aria-hidden="true" />
+
+              <div class="absolute bottom-0 left-0 right-0 h-24 rounded-t-[2rem] bg-gradient-to-b from-[#f8e6d8] to-[#ebc7b0]" />
+              <div class="absolute bottom-7 left-[18%] h-16 w-[64%] rounded-[2rem] bg-[#fff3ea]/70 shadow-[0_18px_24px_rgba(80,35,45,0.16)]" />
+              <div class="absolute bottom-11 left-[28%] h-12 w-16 rounded-full bg-[#d89a87]/70 blur-[1px]" />
+              <div class="absolute bottom-10 right-[28%] h-12 w-16 rounded-full bg-[#d89a87]/70 blur-[1px]" />
+              <div class="absolute bottom-[5.2rem] left-[36%] h-10 w-7 rounded-full bg-[#f4ccb7]/85" />
+              <div class="absolute bottom-[5.2rem] right-[36%] h-10 w-7 rounded-full bg-[#f4ccb7]/85" />
+              <div
+                class="absolute left-1/2 top-[5.6rem] z-[2] -translate-x-1/2 text-3xl transition-all duration-500"
+                :class="isOpen ? 'scale-100 opacity-100' : 'scale-75 opacity-0'"
+              >
+                ♡
+              </div>
+
+              <div
+                class="absolute inset-y-0 left-0 z-[3] w-[52%] bg-[linear-gradient(180deg,rgba(255,245,244,0.97)_0%,rgba(244,196,203,0.92)_100%)] shadow-[14px_0_30px_rgba(127,59,79,0.18)] transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)]"
+                :style="{ transform: `translateX(-${curtainShift})` }"
+              />
+              <div
+                class="absolute inset-y-0 right-0 z-[3] w-[52%] bg-[linear-gradient(180deg,rgba(255,245,244,0.97)_0%,rgba(244,196,203,0.92)_100%)] shadow-[-14px_0_30px_rgba(127,59,79,0.18)] transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)]"
+                :style="{ transform: `translateX(${curtainShift})` }"
+              />
+              <div class="absolute left-[calc(50%-2px)] top-0 z-[4] h-full w-1 rounded-full bg-white/22" aria-hidden="true" />
+            </div>
+
+            <div class="mt-4 rounded-[1.25rem] border border-white/55 bg-white/78 px-4 py-3 text-center shadow-[0_10px_18px_rgba(120,53,15,0.08)]">
+              <p class="text-[10px] font-semibold uppercase tracking-[0.24em] text-rose-700/65">
+                Pull The Curtain
+              </p>
+              <p class="mt-2 text-sm leading-relaxed text-rose-950/88">
+                {{ stageCopy }}
+              </p>
+              <div class="mt-3 flex flex-wrap justify-center gap-2">
+                <span
+                  v-for="tag in intimacyTags"
+                  :key="tag"
+                  class="rounded-full border border-rose-200 bg-rose-50/90 px-2.5 py-1 text-[10px] font-medium text-rose-900/85"
+                >
+                  {{ tag }}
+                </span>
+              </div>
+            </div>
+
+            <div class="mt-4 flex justify-center">
+              <button
+                type="button"
+                class="rounded-full border border-rose-300/70 bg-white/88 px-4 py-2 text-xs font-semibold tracking-[0.18em] text-rose-950 transition hover:-translate-y-0.5 hover:bg-white"
+                @click="toggleCurtain"
+              >
+                {{ isOpen ? '把幕布合回去' : '拉开被单 / 幕布' }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="relative z-[1] flex flex-col gap-6 sm:gap-8">
+      <PolaroidCard :memory="memory" :index="memory.story_order" compact />
+
+      <div
+        class="nepal-torn-panel mx-auto max-w-md border border-rose-200/60 bg-gradient-to-b from-[#fffdfa] to-rose-50/35 px-5 py-6 text-left shadow-[0_12px_30px_-15px_rgba(190,80,120,0.18)] sm:px-6 sm:py-7"
+      >
+        <div class="mb-4 h-1 w-12 rounded-full bg-gradient-to-r from-rose-400 to-amber-400/80" aria-hidden="true" />
+        <div
+          class="text-[15px] leading-[1.8] tracking-wide text-rose-950/88 [&_a]:font-bold [&_a]:text-rose-700 [&_a]:underline [&_a]:decoration-rose-300 [&_a]:underline-offset-4 [&_blockquote]:border-l-4 [&_blockquote]:border-rose-300/60 [&_blockquote]:bg-rose-50/50 [&_blockquote]:py-1 [&_blockquote]:pl-3 [&_blockquote]:text-rose-900/72 [&_code]:rounded [&_code]:bg-rose-100/55 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_strong]:text-rose-900 [&_p+p]:mt-4"
+          v-html="bodyHtml"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/QuanjiPage.vue b/frontend/src/components/QuanjiPage.vue
new file mode 100644
index 0000000..eb9526d
--- /dev/null
+++ b/frontend/src/components/QuanjiPage.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { usePreferredReducedMotion } from '@vueuse/core'
+import { computed, onBeforeUnmount, ref } from 'vue'
+import type { Memory } from '../api/client'
+import { getStandardNepalTheme } from '../constants/nepalThemes'
+import PolaroidCard from './PolaroidCard.vue'
+import { renderMarkdown } from '../utils/renderMarkdown'
+
+const props = defineProps<{
+  memory: Memory
+}>()
+
+const bodyHtml = computed(() => renderMarkdown(props.memory.main_text))
+const theme = computed(() => getStandardNepalTheme(props.memory.nepal_art_style))
+const reduceMotion = usePreferredReducedMotion()
+
+const phase = ref<'idle' | 'opening' | 'opened'>('idle')
+let doorTimer: ReturnType<typeof setTimeout> | undefined
+
+const roomText = computed(() => {
+  if (phase.value === 'opened') return '门打开以后，故事就从“见面”走向了“爱的开始”。'
+  if (phase.value === 'opening') return '房卡刷过的一瞬间，灯光和情绪一起变暖。'
+  return '点一下房卡，把门打开，把这一页真正带进去。'
+})
+
+function openRoom() {
+  if (phase.value === 'opened') {
+    phase.value = 'idle'
+    return
+  }
+  if (doorTimer) clearTimeout(doorTimer)
+  if (reduceMotion.value === 'reduce') {
+    phase.value = 'opened'
+    return
+  }
+  phase.value = 'opening'
+  doorTimer = setTimeout(() => {
+    phase.value = 'opened'
+    doorTimer = undefined
+  }, 950)
+}
+
+onBeforeUnmount(() => {
+  if (doorTimer) clearTimeout(doorTimer)
+})
+</script>
+
+<template>
+  <div
+    class="relative mx-auto max-w-lg overflow-hidden rounded-3xl bg-gradient-to-br px-3 pb-8 pt-6 sm:px-5 sm:pb-10 sm:pt-8"
+    :class="theme.gradient"
+  >
+    <div class="pointer-events-none absolute -left-10 top-10 h-44 w-44 rounded-full bg-amber-300/24 blur-[3rem]" aria-hidden="true" />
+    <div class="pointer-events-none absolute -right-12 bottom-8 h-52 w-52 rounded-full bg-rose-300/18 blur-[3.4rem]" aria-hidden="true" />
+
+    <div
+      class="relative z-[1] mx-auto mb-7 max-w-[min(100%,398px)] overflow-hidden rounded-[2rem] border border-amber-200/65 bg-[linear-gradient(180deg,#fff8f2_0%,#ffefdf_100%)] shadow-[0_24px_56px_-18px_rgba(180,83,9,0.24)]"
+    >
+      <div class="pointer-events-none absolute inset-0 nepal-fiber opacity-[0.12] mix-blend-multiply" />
+
+      <div class="relative px-5 pb-5 pt-5 sm:px-6 sm:pb-6">
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <p class="text-[10px] font-semibold uppercase tracking-[0.3em] text-amber-700/68">
+              Hotel Night / 04.30
+            </p>
+            <h3 class="mt-2 font-display-cn text-[1.9rem] leading-none text-amber-950">
+              全季M爱
+            </h3>
+          </div>
+          <div class="rounded-2xl border border-amber-200/70 bg-white/88 px-3 py-2 text-right shadow-[0_8px_18px_rgba(245,158,11,0.14)]">
+            <p class="text-[9px] font-semibold tracking-[0.22em] text-amber-700/70">
+              Room Mood
+            </p>
+            <p class="mt-1 font-brush text-xl text-amber-950">爱的开始</p>
+          </div>
+        </div>
+
+        <div class="mt-6 rounded-[1.8rem] border border-amber-200/60 bg-white/74 p-4 shadow-inner">
+          <div class="relative overflow-hidden rounded-[1.55rem] bg-gradient-to-b from-[#efe7dd] via-[#e4d3c4] to-[#d1b8a1] px-4 pb-5 pt-5">
+            <div class="absolute inset-y-0 left-[51%] z-[1] w-[44%] bg-gradient-to-l from-amber-200/38 to-transparent opacity-0 transition-opacity duration-700" :class="phase !== 'idle' ? 'opacity-100' : ''" aria-hidden="true" />
+
+            <div class="flex items-start justify-between">
+              <div class="rounded-2xl border border-white/70 bg-white/78 px-3 py-2 shadow-[0_10px_18px_rgba(120,53,15,0.08)]">
+                <p class="text-[10px] font-semibold uppercase tracking-[0.24em] text-amber-700/65">
+                  季 Hotel
+                </p>
+                <p class="mt-1 font-mono text-sm font-bold text-amber-950">04 · 30 / 2117</p>
+              </div>
+
+              <button
+                type="button"
+                class="rounded-[1.2rem] border border-amber-200/80 bg-white/90 px-4 py-3 text-left shadow-[0_10px_20px_rgba(120,53,15,0.1)] transition hover:-translate-y-0.5 hover:bg-white"
+                @click="openRoom"
+              >
+                <p class="text-[10px] font-semibold uppercase tracking-[0.24em] text-amber-700/65">
+                  房卡
+                </p>
+                <p class="mt-1 font-brush text-xl text-amber-950">刷开门</p>
+              </button>
+            </div>
+
+            <div class="relative mt-5 h-[220px] overflow-hidden rounded-[1.45rem] border border-[#9b765e]/30 bg-[#3c2f2c] shadow-[inset_0_2px_4px_rgba(255,255,255,0.12)]">
+              <div
+                class="absolute inset-y-0 left-0 w-1/2 border-r border-[#6f5547]/45 bg-[linear-gradient(180deg,#6c5347_0%,#4e3a31_100%)] transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)]"
+                :class="phase === 'idle' ? '' : 'translate-x-[-76%]'"
+              />
+              <div
+                class="absolute inset-y-0 right-0 w-1/2 border-l border-[#6f5547]/45 bg-[linear-gradient(180deg,#6c5347_0%,#4e3a31_100%)] transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)]"
+                :class="phase === 'idle' ? '' : 'translate-x-[76%]'"
+              />
+              <div class="absolute inset-x-[19%] top-4 h-3 rounded-full bg-white/12 blur-sm" aria-hidden="true" />
+
+              <div class="absolute inset-0 z-0 bg-gradient-to-b from-[#fff0d2]/18 via-[#f7dba7]/16 to-[#5a3c2d]/0 transition-opacity duration-700" :class="phase === 'idle' ? 'opacity-0' : 'opacity-100'" />
+
+              <div class="absolute inset-0 z-0 px-6 pb-5 pt-6">
+                <div class="mx-auto h-16 w-10 rounded-t-full bg-[#f4cb73] shadow-[0_0_28px_rgba(251,191,36,0.3)]" />
+                <div class="mx-auto h-12 w-2 bg-[#6b4f3a]" />
+
+                <div class="mx-auto mt-4 flex max-w-[11rem] items-end justify-center gap-3">
+                  <div class="h-16 w-10 rounded-t-[1rem] bg-[#fff4ea]/78 shadow-sm" />
+                  <div class="h-20 w-24 rounded-[1.4rem] bg-[#f3d6c3]/72 shadow-[0_10px_20px_rgba(80,40,20,0.14)]" />
+                  <div class="h-12 w-12 rounded-t-[1rem] bg-[#fff4ea]/68 shadow-sm" />
+                </div>
+
+                <div
+                  class="mx-auto mt-5 max-w-[12rem] rounded-[1.2rem] border border-white/45 bg-white/72 px-4 py-3 text-center shadow-[0_10px_22px_rgba(120,53,15,0.1)] transition-all duration-500"
+                  :class="phase === 'opened' ? 'translate-y-0 opacity-100' : 'translate-y-3 opacity-70'"
+                >
+                  <p class="text-[10px] font-semibold uppercase tracking-[0.24em] text-amber-700/65">
+                    Door Status
+                  </p>
+                  <p class="mt-2 text-sm leading-relaxed text-amber-950/88">
+                    {{ roomText }}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div class="mt-4 flex justify-center">
+              <button
+                type="button"
+                class="rounded-full border border-amber-300/70 bg-white/88 px-4 py-2 text-xs font-semibold tracking-[0.18em] text-amber-950 transition hover:-translate-y-0.5 hover:bg-white"
+                @click="openRoom"
+              >
+                {{ phase === 'opened' ? '把门轻轻合上' : phase === 'opening' ? '门正在打开…' : '用房卡开门' }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="relative z-[1] flex flex-col gap-6 sm:gap-8">
+      <PolaroidCard :memory="memory" :index="memory.story_order" compact />
+
+      <div
+        class="nepal-torn-panel mx-auto max-w-md border border-amber-200/60 bg-gradient-to-b from-[#fffdfa] to-amber-50/40 px-5 py-6 text-left shadow-[0_12px_30px_-15px_rgba(180,83,9,0.2)] sm:px-6 sm:py-7"
+      >
+        <div class="mb-4 h-1 w-12 rounded-full bg-gradient-to-r from-amber-400 to-rose-400/80" aria-hidden="true" />
+        <div
+          class="text-[15px] leading-[1.8] tracking-wide text-amber-950/90 [&_a]:font-bold [&_a]:text-rose-600 [&_a]:underline [&_a]:decoration-rose-300 [&_a]:underline-offset-4 [&_blockquote]:border-l-4 [&_blockquote]:border-rose-300/60 [&_blockquote]:bg-rose-50/30 [&_blockquote]:py-1 [&_blockquote]:pl-3 [&_blockquote]:text-rose-900/70 [&_code]:rounded [&_code]:bg-amber-100/50 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_strong]:text-rose-900 [&_p+p]:mt-4"
+          v-html="bodyHtml"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/TaxiHandHoldPage.vue b/frontend/src/components/TaxiHandHoldPage.vue
new file mode 100644
index 0000000..35d6dff
--- /dev/null
+++ b/frontend/src/components/TaxiHandHoldPage.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { usePreferredReducedMotion } from '@vueuse/core'
+import { computed, onBeforeUnmount, ref } from 'vue'
+import type { Memory } from '../api/client'
+import { getStandardNepalTheme } from '../constants/nepalThemes'
+import PolaroidCard from './PolaroidCard.vue'
+import { renderMarkdown } from '../utils/renderMarkdown'
+
+const props = defineProps<{
+  memory: Memory
+}>()
+
+const bodyHtml = computed(() => renderMarkdown(props.memory.main_text))
+const theme = computed(() => getStandardNepalTheme(props.memory.nepal_art_style))
+const reduceMotion = usePreferredReducedMotion()
+
+const phase = ref<'idle' | 'approaching' | 'held'>('idle')
+let holdTimer: ReturnType<typeof setTimeout> | undefined
+
+const subtitle = computed(() => {
+  if (phase.value === 'held') return '牵住了，连空气都跟着变暖。'
+  if (phase.value === 'approaching') return '那一秒，心跳比出租车拐弯还快。'
+  return '先让两只手慢慢靠近，再真正牵住。'
+})
+
+function bringHandsTogether() {
+  if (phase.value === 'held') {
+    phase.value = 'idle'
+    return
+  }
+  if (holdTimer) clearTimeout(holdTimer)
+  if (reduceMotion.value === 'reduce') {
+    phase.value = 'held'
+    return
+  }
+  phase.value = 'approaching'
+  holdTimer = setTimeout(() => {
+    phase.value = 'held'
+    holdTimer = undefined
+  }, 900)
+}
+
+onBeforeUnmount(() => {
+  if (holdTimer) clearTimeout(holdTimer)
+})
+</script>
+
+<template>
+  <div
+    class="relative mx-auto max-w-lg overflow-hidden rounded-3xl bg-gradient-to-br px-3 pb-8 pt-6 sm:px-5 sm:pb-10 sm:pt-8"
+    :class="theme.gradient"
+  >
+    <div
+      class="pointer-events-none absolute -left-10 top-8 h-48 w-48 rounded-full bg-amber-300/30 blur-[3rem]"
+      aria-hidden="true"
+    />
+    <div
+      class="pointer-events-none absolute -right-10 bottom-6 h-52 w-52 rounded-full bg-rose-300/22 blur-[3.4rem]"
+      aria-hidden="true"
+    />
+
+    <div
+      class="relative z-[1] mx-auto mb-7 max-w-[min(100%,398px)] overflow-hidden rounded-[2rem] border border-amber-200/65 bg-[linear-gradient(180deg,#fff7ef_0%,#fff0df_100%)] shadow-[0_24px_56px_-18px_rgba(180,83,9,0.24)]"
+    >
+      <div class="pointer-events-none absolute inset-0 nepal-fiber opacity-[0.12] mix-blend-multiply" />
+
+      <div class="relative px-5 pb-5 pt-5 sm:px-6 sm:pb-6">
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <p class="text-[10px] font-semibold uppercase tracking-[0.3em] text-amber-700/68">
+              Taxi Ride / 04.30
+            </p>
+            <h3 class="mt-2 font-display-cn text-[1.9rem] leading-none text-amber-950">
+              出租牵手
+            </h3>
+          </div>
+          <div
+            class="rounded-2xl border border-amber-200/70 bg-white/88 px-3 py-2 text-right shadow-[0_8px_18px_rgba(245,158,11,0.14)]"
+          >
+            <p class="text-[9px] font-semibold tracking-[0.22em] text-amber-700/70">
+              After Meeting
+            </p>
+            <p class="mt-1 font-brush text-xl text-amber-950">心跳加速</p>
+          </div>
+        </div>
+
+        <div class="mt-6 rounded-[1.8rem] border border-amber-200/60 bg-white/74 p-4 shadow-inner">
+          <div class="relative overflow-hidden rounded-[1.55rem] bg-gradient-to-b from-[#ffe8cf] via-[#fed7aa] to-[#f5b27f] px-4 pb-5 pt-4">
+            <div class="absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-white/20 to-transparent" aria-hidden="true" />
+            <div class="absolute inset-y-4 left-3 w-5 rounded-full bg-[#2f2f35]/65" aria-hidden="true" />
+            <div class="absolute inset-y-4 right-3 w-5 rounded-full bg-[#2f2f35]/65" aria-hidden="true" />
+
+            <div class="absolute left-8 top-8 h-24 w-[38%] overflow-hidden rounded-[1rem] border border-white/50 bg-[#12263a]" aria-hidden="true">
+              <div class="taxi-window-lights h-full w-[180%]" :class="phase === 'held' && !reduceMotion ? 'taxi-window-fast' : ''" />
+            </div>
+            <div class="absolute right-8 top-8 h-24 w-[38%] overflow-hidden rounded-[1rem] border border-white/50 bg-[#12263a]" aria-hidden="true">
+              <div class="taxi-window-lights h-full w-[180%]" :class="phase === 'held' && !reduceMotion ? 'taxi-window-fast' : ''" />
+            </div>
+
+            <div class="absolute left-1/2 top-[5.7rem] z-[2] -translate-x-1/2 rotate-[-12deg]" aria-hidden="true">
+              <div class="rounded-full border border-rose-200/70 bg-white/86 px-3 py-1 text-[11px] font-semibold text-rose-900 shadow-[0_10px_18px_rgba(190,24,93,0.12)]">
+                花束卡住了一点点
+              </div>
+            </div>
+
+            <div class="relative mt-32 h-32">
+              <div
+                class="absolute bottom-3 left-5 h-20 w-24 rounded-[2rem] border border-[#734231]/55 bg-gradient-to-br from-[#f5c5b3] to-[#d9937b] shadow-[0_10px_20px_rgba(115,66,49,0.18)] transition-transform duration-700 ease-out"
+                :class="phase === 'idle' ? 'rotate-[8deg]' : phase === 'approaching' ? 'translate-x-10 rotate-[4deg]' : 'translate-x-15 rotate-[2deg]'"
+              >
+                <div class="absolute right-2 top-4 h-5 w-5 rounded-full bg-[#f8e0d6]" />
+              </div>
+
+              <div
+                class="absolute bottom-3 right-5 h-20 w-24 rounded-[2rem] border border-[#734231]/55 bg-gradient-to-bl from-[#f5c5b3] to-[#d9937b] shadow-[0_10px_20px_rgba(115,66,49,0.18)] transition-transform duration-700 ease-out"
+                :class="phase === 'idle' ? 'rotate-[-8deg]' : phase === 'approaching' ? '-translate-x-10 rotate-[-4deg]' : '-translate-x-15 rotate-[-2deg]'"
+              >
+                <div class="absolute left-2 top-4 h-5 w-5 rounded-full bg-[#f8e0d6]" />
+              </div>
+
+              <div
+                class="pointer-events-none absolute left-1/2 top-7 z-[3] -translate-x-1/2 text-3xl drop-shadow-[0_4px_10px_rgba(225,29,72,0.25)] transition-all duration-500"
+                :class="phase === 'held' ? 'scale-100 opacity-100' : 'scale-75 opacity-0'"
+              >
+                ♡
+              </div>
+            </div>
+
+            <div class="mt-2 rounded-[1.2rem] border border-white/65 bg-white/74 px-4 py-3 text-center shadow-[0_10px_18px_rgba(180,83,9,0.08)]">
+              <p class="text-[10px] font-semibold uppercase tracking-[0.24em] text-amber-700/65">
+                Hold Hands
+              </p>
+              <p class="mt-2 text-sm leading-relaxed text-amber-950/88">
+                {{ subtitle }}
+              </p>
+            </div>
+
+            <div class="mt-4 flex justify-center">
+              <button
+                type="button"
+                class="rounded-full border border-amber-300/70 bg-white/88 px-4 py-2 text-xs font-semibold tracking-[0.18em] text-amber-950 transition hover:-translate-y-0.5 hover:bg-white"
+                @click="bringHandsTogether"
+              >
+                {{ phase === 'held' ? '再心动一次' : phase === 'approaching' ? '快要牵住了…' : '让双手靠近' }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="relative z-[1] flex flex-col gap-6 sm:gap-8">
+      <PolaroidCard :memory="memory" :index="memory.story_order" compact />
+
+      <div
+        class="nepal-torn-panel mx-auto max-w-md border border-amber-200/60 bg-gradient-to-b from-[#fffdfa] to-amber-50/40 px-5 py-6 text-left shadow-[0_12px_30px_-15px_rgba(180,83,9,0.2)] sm:px-6 sm:py-7"
+      >
+        <div class="mb-4 h-1 w-12 rounded-full bg-gradient-to-r from-amber-400 to-rose-400/80" aria-hidden="true" />
+        <div
+          class="text-[15px] leading-[1.8] tracking-wide text-amber-950/90 [&_a]:font-bold [&_a]:text-rose-600 [&_a]:underline [&_a]:decoration-rose-300 [&_a]:underline-offset-4 [&_blockquote]:border-l-4 [&_blockquote]:border-rose-300/60 [&_blockquote]:bg-rose-50/30 [&_blockquote]:py-1 [&_blockquote]:pl-3 [&_blockquote]:text-rose-900/70 [&_code]:rounded [&_code]:bg-amber-100/50 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_strong]:text-rose-900 [&_p+p]:mt-4"
+          v-html="bodyHtml"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.taxi-window-lights {
+  background:
+    linear-gradient(
+      90deg,
+      transparent 0 4%,
+      rgb(252 211 77 / 0.85) 4% 9%,
+      transparent 9% 16%,
+      rgb(244 114 182 / 0.6) 16% 20%,
+      transparent 20% 28%,
+      rgb(96 165 250 / 0.75) 28% 34%,
+      transparent 34% 42%,
+      rgb(251 146 60 / 0.8) 42% 47%,
+      transparent 47% 56%,
+      rgb(253 224 71 / 0.82) 56% 60%,
+      transparent 60% 100%
+    );
+  animation: taxi-window-lights 7s linear infinite;
+}
+
+.taxi-window-fast {
+  animation-duration: 2.4s;
+}
+
+@keyframes taxi-window-lights {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-40%);
+  }
+}
+</style>