/* ⚠️ 关键规则前置副本：移动网络可能截断 CSS 文件后半段，
       这里提前声明面板隔离，确保任何截断情况下都不会全站面板叠印 */
    .memory-panel { display: none; }

    :root {
      --bg: #030608;
      --ink: #f4f8fb;
      --muted: rgba(231, 240, 247, .62);
      --line: rgba(217, 236, 250, .18);
      --blue: #57b7f3;
      --ice: #bfe9ff;
      --ease: cubic-bezier(.22, .72, .18, 1);
      --station-ms: 920ms;
    }

    * { box-sizing: border-box; }
    html, body { width: 100%; height: 100%; margin: 0; background: var(--bg); }
    body {
      overflow: hidden;
      color: var(--ink);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }
    button { font: inherit; }

    .preloader {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 50% 46%, rgba(51, 143, 204, .12), transparent 32%),
        var(--bg);
      transition: opacity 800ms var(--ease), visibility 800ms;
    }
    .preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
    .loader-inner { width: min(520px, calc(100vw - 56px)); text-align: center; }
    .loader-kicker {
      margin-bottom: 24px;
      color: var(--blue);
      font-size: 11px;
      letter-spacing: .28em;
      text-transform: uppercase;
    }
    .loader-number {
      margin: 0;
      font-size: clamp(76px, 16vw, 176px);
      font-weight: 760;
      line-height: .82;
      letter-spacing: -.09em;
      color: transparent;
      -webkit-text-stroke: 1px rgba(233, 246, 255, .38);
      background: linear-gradient(90deg, var(--ice) var(--load), rgba(255,255,255,.07) var(--load));
      -webkit-background-clip: text;
      background-clip: text;
    }
    .loader-track {
      height: 1px;
      margin: 34px 0 25px;
      overflow: hidden;
      background: rgba(255,255,255,.12);
    }
    .loader-progress {
      width: var(--load);
      height: 100%;
      background: linear-gradient(90deg, #1479bd, var(--ice));
      box-shadow: 0 0 18px rgba(87, 183, 243, .62);
      transition: width 180ms linear;
    }
    .enter-button {
      min-width: 176px;
      padding: 13px 22px;
      border: 1px solid rgba(210, 238, 255, .35);
      border-radius: 999px;
      background: rgba(255,255,255,.025);
      color: var(--ink);
      font-size: 11px;
      font-weight: 650;
      letter-spacing: .22em;
      cursor: pointer;
      opacity: .35;
      transform: translateY(8px);
      transition: opacity 350ms, transform 350ms, border-color 250ms, background 250ms;
    }
    .enter-button:disabled { cursor: wait; }
    .enter-button:not(:disabled) { opacity: 1; transform: none; }
    .enter-button:not(:disabled):hover {
      border-color: var(--ice);
      background: rgba(87, 183, 243, .12);
    }
    .loader-status { min-height: 20px; margin-top: 15px; color: var(--muted); font-size: 11px; letter-spacing: .12em; }

    .app { position: fixed; inset: 0; isolation: isolate; background: var(--bg); }
    .scene { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
    .media-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      user-select: none;
      -webkit-user-drag: none;
    }
    .final-fallback { z-index: 0; opacity: 1; }
    .film { z-index: 1; opacity: 1; }
    .freeze-canvas {
      z-index: 2;
      width: 100%;
      height: 100%;
      opacity: 0;
      pointer-events: none;
    }
    .freeze-canvas.is-visible { opacity: 1; }
    .detail-frame { z-index: 3; opacity: 0; pointer-events: none; }
    .grade {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(0,0,0,.38) 0, transparent 22%, transparent 62%, rgba(0,0,0,.72) 100%),
        linear-gradient(90deg, rgba(0,0,0,.42) 0, transparent 38%, rgba(0,0,0,.08) 100%);
    }
    .grain {
      position: absolute;
      inset: -50%;
      z-index: 5;
      opacity: .055;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
      animation: grain 700ms steps(2) infinite;
    }
    @keyframes grain {
      0% { transform: translate3d(-3%, 2%, 0); }
      25% { transform: translate3d(2%, -4%, 0); }
      50% { transform: translate3d(4%, 4%, 0); }
      75% { transform: translate3d(-4%, -2%, 0); }
      100% { transform: translate3d(1%, 3%, 0); }
    }
    .blackout {
      position: absolute;
      inset: 0;
      z-index: 20;
      background: #020304;
      opacity: 0;
      pointer-events: none;
      transition: opacity 380ms var(--ease);
    }
    .blackout.is-on { opacity: .96; }

    .hud {
      position: absolute;
      inset: 0;
      z-index: 30;
      pointer-events: none;
    }
    .nav {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: max(24px, env(safe-area-inset-top)) clamp(24px, 4vw, 68px) 0;
    }
    .brand { display: flex; align-items: center; gap: 13px; }
    .brand-mark {
      width: 29px;
      aspect-ratio: 1;
      border: 1px solid rgba(225, 244, 255, .54);
      border-radius: 50%;
      position: relative;
    }
    .brand-mark::before, .brand-mark::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      background: var(--ice);
      transform: translate(-50%, -50%);
    }
    .brand-mark::before { width: 13px; height: 1px; }
    .brand-mark::after { width: 1px; height: 13px; }
    .brand-copy { font-size: 11px; font-weight: 700; letter-spacing: .18em; line-height: 1.25; }
    .brand-copy small { display: block; color: var(--muted); font-size: 8px; font-weight: 500; letter-spacing: .25em; }
    .nav-actions { display: flex; align-items: center; gap: 11px; pointer-events: auto; }
    .icon-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 39px;
      height: 39px;
      padding: 0 14px;
      border: 1px solid rgba(225, 244, 255, .18);
      border-radius: 999px;
      background: rgba(2, 6, 9, .28);
      color: var(--ink);
      backdrop-filter: blur(12px);
      cursor: pointer;
      transition: border-color 220ms, background 220ms;
    }
    .icon-button:hover { border-color: rgba(191, 233, 255, .65); background: rgba(87, 183, 243, .12); }
    .sound-bars { display: flex; align-items: center; gap: 2px; height: 12px; }
    .sound-bars i { width: 1px; background: var(--ice); transition: height 250ms; }
    .sound-bars i:nth-child(1) { height: 4px; }
    .sound-bars i:nth-child(2) { height: 9px; }
    .sound-bars i:nth-child(3) { height: 6px; }
    .is-muted .sound-bars i { height: 1px; }
    .replay-label { margin-left: 8px; font-size: 9px; letter-spacing: .15em; }

    .film-progress {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: rgba(255,255,255,.08);
    }
    .film-progress > i {
      display: block;
      width: var(--film-progress);
      height: 100%;
      background: linear-gradient(90deg, #228fd0, var(--ice));
      box-shadow: 0 0 14px rgba(87, 183, 243, .65);
      transition: width 80ms linear;
    }

    .caption {
      position: absolute;
      z-index: 8;
      left: clamp(26px, 7vw, 112px);
      bottom: clamp(72px, 10vh, 130px);
      width: min(760px, calc(100vw - 160px));
      pointer-events: none;
      opacity: 0;
      transform: translate3d(0, 20px, 0);
      transition: opacity 520ms var(--ease), transform 650ms var(--ease);
    }
    .caption.is-visible { opacity: 1; transform: none; }
    .caption-kicker {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      color: var(--blue);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .28em;
      text-transform: uppercase;
    }
    .caption-kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; box-shadow: 0 0 10px currentColor; }
    .caption-title {
      max-width: 880px;
      margin: 0;
      font-size: clamp(48px, 8.4vw, 136px);
      font-weight: 780;
      line-height: .79;
      letter-spacing: -.075em;
      text-transform: uppercase;
      text-wrap: balance;
      text-shadow: 0 8px 40px rgba(0,0,0,.48);
    }
    .caption-title em { color: var(--ice); font-style: normal; font-weight: 500; }
    .caption-bottom {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 28px;
      max-width: 760px;
      margin-top: 24px;
      padding-top: 17px;
      border-top: 1px solid var(--line);
    }
    .caption-copy { max-width: 470px; color: rgba(239, 247, 252, .76); font-size: 13px; line-height: 1.7; letter-spacing: .04em; }
    .caption-code { display: none; }

    .specs {
      position: absolute;
      z-index: 9;
      right: clamp(25px, 7vw, 112px);
      bottom: clamp(80px, 11vh, 142px);
      display: grid;
      grid-template-columns: repeat(2, minmax(86px, 128px));
      gap: 20px 26px;
      pointer-events: none;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 520ms var(--ease), transform 650ms var(--ease);
    }
    .specs.is-visible { opacity: 1; transform: none; }
    .spec { padding-top: 11px; border-top: 1px solid var(--line); }
    .spec strong { display: block; color: var(--ice); font-size: clamp(17px, 2vw, 28px); font-weight: 620; letter-spacing: -.035em; }
    .spec span { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }

    .rail {
      position: absolute;
      z-index: 31;
      top: 50%;
      right: clamp(21px, 3vw, 48px);
      display: grid;
      gap: 12px;
      transform: translateY(-50%);
      pointer-events: auto;
    }
    .rail-dot {
      width: 32px;
      height: 20px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      position: relative;
    }
    .rail-dot::before {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      width: 10px;
      height: 1px;
      background: rgba(220, 239, 251, .35);
      transition: width 320ms var(--ease), background 320ms, box-shadow 320ms;
    }
    .rail-dot.is-active::before { width: 28px; background: var(--ice); box-shadow: 0 0 12px var(--blue); }
    .rail-dot:disabled { cursor: default; }

    .hint {
      position: absolute;
      z-index: 31;
      left: 50%;
      bottom: max(25px, env(safe-area-inset-bottom));
      display: flex;
      align-items: center;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 450ms;
    }
    .hint.is-visible { opacity: 1; }
    .hint-wheel { width: 17px; height: 26px; border: 1px solid rgba(220, 239, 251, .45); border-radius: 10px; position: relative; }
    .hint-wheel::after {
      content: "";
      position: absolute;
      top: 5px;
      left: 7px;
      width: 2px;
      height: 5px;
      border-radius: 3px;
      background: var(--ice);
      animation: wheel 1.6s var(--ease) infinite;
    }
    @keyframes wheel { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }

    @media (max-width: 900px) {
      .caption { width: calc(100vw - 72px); bottom: 80px; }
      .caption-title { font-size: clamp(50px, 14vw, 92px); }
      .caption-bottom { max-width: 560px; }
      .specs { right: 30px; bottom: 84px; grid-template-columns: repeat(2, 92px); gap: 12px 16px; }
      .specs:not(.is-compact) { display: none; }
      .rail { right: 16px; }
    }

    @media (max-aspect-ratio: 4/5) {
      .media-layer { object-fit: contain; }
      .scene::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(circle at 50% 40%, rgba(21, 84, 124, .12), transparent 56%), #020405;
      }
      .grade { background: linear-gradient(180deg, rgba(0,0,0,.44), transparent 28%, transparent 55%, rgba(0,0,0,.88)); }
      .caption { left: 24px; bottom: 92px; width: calc(100vw - 48px); }
      .caption-title { font-size: clamp(45px, 16vw, 76px); }
      .caption-bottom { margin-top: 17px; }
      .caption-copy { font-size: 12px; }
      .specs { display: none !important; }
      .nav { padding-left: 22px; padding-right: 22px; }
      .replay-label { display: none; }
      /* 手机竖屏隐藏 14 站轨道（改用滑动切换），避免挤占文案区 */
      .rail { display: none !important; }
      .hint { left: 22px; transform: none; }
    }

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

    /* ═══════════ 第二幕 · 转折 ═══════════ */

    .scene { transition: filter 1500ms var(--ease); }
    body[data-fade="1"] .scene { filter: grayscale(.82) brightness(.55) contrast(.94); }
    body[data-fade="2"] .scene { filter: grayscale(1) brightness(.32); }

    .interlude {
      position: absolute;
      inset: 0;
      z-index: 22;
      display: grid;
      place-items: center;
      background: radial-gradient(ellipse at center, transparent 28%, rgba(0,0,0,.6) 100%);
      opacity: 0;
      pointer-events: none;
      transition: opacity 900ms var(--ease);
    }
    .interlude.is-visible { opacity: 1; }
    .interlude-copy { max-width: 980px; padding: 0 40px; text-align: center; }
    .interlude-copy .kicker {
      margin-bottom: 30px;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .5em;
      text-transform: uppercase;
    }
    .interlude-copy .line {
      color: var(--ink);
      font-size: clamp(34px, 6vw, 72px);
      font-weight: 200;
      letter-spacing: .06em;
      line-height: 1.4;
      text-shadow: 0 4px 40px rgba(0,0,0,.85);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 800ms var(--ease), transform 800ms var(--ease);
    }
    .interlude-copy .line em { font-style: normal; font-weight: 600; }
    .interlude-copy .line.is-on { opacity: 1; transform: none; }
    .interlude-copy .line + .line { margin-top: 26px; }
    .interlude-copy .line .model {
      display: block;
      margin-top: 22px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .45em;
      color: rgba(191, 233, 255, .45);
    }

    /* ═══════════ 第三幕 · 现实 ═══════════ */

    body[data-act="memory"] {
      --bg: #0f0a06;
      --ink: #f2e7d5;
      --muted: rgba(240, 226, 205, .6);
      --line: rgba(240, 226, 205, .16);
      --blue: #7faecb;
      --ice: #a8c9dd;
    }
    body[data-act="memory"] .app { background: var(--bg); }
    body[data-act="memory"] .scene { visibility: hidden; }
    body[data-act="memory"] .caption,
    body[data-act="memory"] .specs { display: none; }
    body[data-act="memory"] .brand-copy { color: var(--ink); }
    body[data-act="memory"] .brand-copy small { color: var(--muted); }
    body[data-act="memory"] .icon-button { color: var(--ink); border-color: rgba(240,226,205,.2); background: rgba(15,10,6,.4); }
    body[data-act="memory"] .film-progress > i { background: linear-gradient(90deg, #9a6c38, var(--ice)); box-shadow: 0 0 14px rgba(217,162,104,.55); }
    body[data-act="memory"] .rail-dot::before { background: rgba(240, 226, 205, .3); }
    body[data-act="memory"] .rail-dot.is-active::before { background: var(--ice); box-shadow: 0 0 12px var(--blue); }
    body[data-act="memory"] .hint-wheel { border-color: rgba(240,226,205,.45); }
    body[data-act="memory"] .hint-wheel::after { background: var(--ice); }

    .memory {
      position: absolute;
      inset: 0;
      z-index: 15;
      visibility: hidden;
      background: var(--bg, #0f0a06);
    }
    .memory::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 22% 26%, rgba(217, 162, 104, .09), transparent 55%);
      pointer-events: none;
    }
    body[data-act="memory"] .memory { visibility: visible; }

    .memory-panel {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      gap: clamp(40px, 7vw, 96px);
      padding: clamp(76px, 10vh, 120px) clamp(28px, 6vw, 84px);
    }
    /* 激活面板 display + 动画入场；离场直接 display:none——
       从渲染树移除，微信 WKWebView 的合成层残影也无法存活。
       注意：opacity:1 是显式兜底 resting 状态，动画万一没触发面板依然可见 */
    .memory-panel.is-active {
      display: flex;
      opacity: 1;
      animation: memoryIn 700ms var(--ease) both;
    }
    @keyframes memoryIn {
      from { opacity: 0; transform: translateY(26px); }
      to { opacity: 1; transform: none; }
    }

    .polaroid {
      flex: 0 0 auto;
      margin: 0;
      padding: 13px 13px 50px;
      background: #f7f2e8;
      border-radius: 3px;
      box-shadow: 0 24px 70px rgba(0,0,0,.62), 0 4px 14px rgba(0,0,0,.5);
      transform: rotate(-2.2deg);
      cursor: default;
    }
    .polaroid img, .polaroid video {
      display: block;
      width: clamp(240px, 30vw, 430px);
      height: clamp(190px, 24vw, 330px);
      object-fit: cover;
      filter: saturate(.92) contrast(1.02);
    }
    .polaroid figcaption {
      margin-top: 13px;
      text-align: center;
      font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
      color: #5a4a36;
      font-size: 15px;
      letter-spacing: .08em;
    }
    .polaroid:nth-child(odd) { transform: rotate(-2.2deg); }
    .polaroid:nth-child(even) { transform: rotate(1.8deg); }

    .polaroid-video { cursor: pointer; transition: transform 320ms var(--ease), box-shadow 320ms; }
    .polaroid-video:hover { transform: rotate(-1deg) scale(1.015); }
    .play-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px; height: 22px;
      margin-right: 7px;
      border: 1.2px solid #5a4a36;
      border-radius: 50%;
      font-size: 9px;
      padding-left: 2px;
      vertical-align: -4px;
    }

    .polaroid-small img { width: clamp(160px, 18vw, 250px); height: clamp(130px, 15vw, 210px); }
    .chord-pair { display: flex; gap: 22px; align-items: center; }
    .chord-pair .polaroid + .polaroid { transform: rotate(2.4deg); }
    .memory-panel[data-memory="stickers"] .polaroid-after { margin-left: -34px; margin-top: 150px; }

    .memory-text { flex: 1; max-width: 560px; min-width: 0; }
    .memory-kicker {
      color: #d9a268;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .4em;
      text-transform: uppercase;
      margin-bottom: 24px;
    }
    .memory-title {
      margin: 0;
      color: var(--ink);
      font-size: clamp(36px, 5vw, 58px);
      font-weight: 240;
      letter-spacing: .04em;
      line-height: 1.3;
    }
    .memory-title .num { display: block; font-weight: 700; letter-spacing: 0; color: #d9a268; }
    .memory-copy {
      margin-top: 26px;
      color: var(--muted);
      font-size: clamp(14px, 1.3vw, 16.5px);
      line-height: 2.1;
      letter-spacing: .04em;
    }
    .memory-quote {
      margin-top: 34px;
      padding-left: 20px;
      border-left: 2px solid rgba(217, 162, 104, .5);
      color: var(--ink);
      font-size: clamp(16px, 1.6vw, 19px);
      line-height: 1.95;
      letter-spacing: .05em;
    }
    .memory-quote small { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .12em; color: var(--muted); }

    .clip-row { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
    .clip-card {
      width: clamp(140px, 15vw, 176px);
      padding: 0;
      border: 1px solid rgba(240, 226, 205, .14);
      border-radius: 6px;
      background: rgba(255, 255, 255, .035);
      color: var(--ink);
      overflow: hidden;
      cursor: pointer;
      text-align: left;
      transition: border-color 240ms, background 240ms, transform 320ms var(--ease);
    }
    .clip-card:hover { border-color: rgba(217, 162, 104, .55); background: rgba(217, 162, 104, .07); transform: translateY(-3px); }
    .clip-thumb { position: relative; display: block; height: clamp(84px, 9vw, 104px); }
    .clip-thumb video { width: 100%; height: 100%; object-fit: cover; opacity: .55; display: block; }
    .clip-thumb i {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 32px; height: 32px;
      border: 1.5px solid rgba(242, 231, 213, .92);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-style: normal;
      padding-left: 3px;
    }
    .clip-label { display: block; padding: 9px 12px 11px; font-size: 12px; line-height: 1.55; letter-spacing: .04em; }
    .clip-label small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }

    /* 结尾站 */
    .memory-finale { display: grid; place-items: center; }
    .finale-bg {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      filter: brightness(.32) saturate(.82);
      transform: scale(1.03);
    }
    .finale-veil {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 50% 66%, rgba(217, 160, 90, .14), transparent 58%),
        linear-gradient(rgba(6, 5, 3, .5), rgba(6, 5, 3, .82));
    }
    .finale-text { position: relative; z-index: 2; text-align: center; max-width: 920px; }
    .finale-text .memory-kicker { color: #d9a268; }
    .finale-title {
      margin: 0;
      color: var(--ink);
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 220;
      line-height: 1.8;
      letter-spacing: .06em;
      text-shadow: 0 4px 34px rgba(0,0,0,.85);
    }
    .finale-title em { font-style: normal; font-weight: 600; color: #a8c9dd; }
    .finale-lyric {
      margin-top: 48px;
      font-family: "STKaiti", "Kaiti SC", "KaiTi", serif;
      font-size: clamp(17px, 1.8vw, 20px);
      color: rgba(240, 226, 205, .8);
      letter-spacing: .12em;
      line-height: 2;
    }
    .finale-lyric small {
      display: block;
      margin-top: 10px;
      font-family: Inter, sans-serif;
      font-size: 11px;
      letter-spacing: .28em;
      color: rgba(240, 226, 205, .42);
    }
    .finale-sign { margin-top: 56px; font-size: 12px; letter-spacing: .4em; color: rgba(240, 226, 205, .5); }
    .finale-credit { margin-top: 18px; font-size: 9px; letter-spacing: .12em; color: rgba(240, 226, 205, .28); }

    /* 视频弹层 */
    .clip-modal {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: grid;
      place-items: center;
      visibility: hidden;
      opacity: 0;
      transition: opacity 320ms, visibility 320ms;
    }
    .clip-modal.is-open { visibility: visible; opacity: 1; }
    .clip-modal-backdrop { position: absolute; inset: 0; background: rgba(2, 2, 1, .88); }
    .clip-modal-body {
      position: relative;
      z-index: 2;
      margin: 0;
      width: min(760px, calc(100vw - 48px));
    }
    .clip-modal-body video {
      display: block;
      width: 100%;
      max-height: 72vh;
      border-radius: 8px;
      background: #000;
      box-shadow: 0 30px 90px rgba(0,0,0,.8);
    }
    .clip-modal-body figcaption { margin-top: 16px; text-align: center; color: rgba(240,226,205,.75); font-size: 13px; letter-spacing: .08em; }
    .clip-modal-close {
      position: absolute;
      top: -46px;
      right: 0;
      width: 34px; height: 34px;
      border: 1px solid rgba(240,226,205,.35);
      border-radius: 50%;
      background: transparent;
      color: rgba(240,226,205,.85);
      cursor: pointer;
      transition: border-color 200ms, background 200ms;
    }
    .clip-modal-close:hover { border-color: rgba(240,226,205,.8); background: rgba(240,226,205,.08); }

    /* 14 站轨道：更紧凑 */
    .rail { gap: 7px; }
    .rail-dot { height: 12px; }
    .rail-dot::before { width: 7px; }
    .rail-dot.is-active::before { width: 20px; }

    /* 第三幕移动端：竖排重排 */
    @media (max-width: 860px), (max-aspect-ratio: 4/5) {
      /* 手机禁用入场动画：直接显示，彻底排除动画相关的失效模式 */
      .memory-panel.is-active { animation: none; }
      /* 手机隐藏 14 站轨道（滑动切换即可），避免挤占文案区 */
      .rail { display: none !important; }
      .memory-panel {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 18px;
        padding: 88px 26px 56px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      .memory-panel .memory-text { max-width: 560px; }
      .polaroid { transform: rotate(-1.5deg); padding: 8px 8px 34px; align-self: center; }
      .polaroid img, .polaroid video { width: min(56vw, 300px); height: min(42vw, 230px); }
      .polaroid figcaption { margin-top: 10px; font-size: 13px; }
      .memory-kicker { margin-bottom: 12px; letter-spacing: .32em; font-size: 10px; }
      .memory-title { font-size: clamp(26px, 7.2vw, 34px); }
      .memory-copy { margin-top: 14px; font-size: 14px; line-height: 1.95; }
      .memory-quote { margin-top: 20px; padding-left: 14px; font-size: 14.5px; line-height: 1.85; }
      .chord-pair { gap: 14px; align-self: center; }
      .chord-pair .polaroid + .polaroid { transform: rotate(1.8deg); }
      .memory-panel[data-memory="stickers"] .polaroid-after { margin: 0; align-self: flex-end; }
      .clip-row { gap: 8px; }
      .clip-card { width: calc(50% - 4px); }
      .clip-label { font-size: 11px; }
      .finale-text { padding: 0 8px; }
      .finale-title { font-size: clamp(21px, 5.8vw, 30px); }
      .finale-lyric { margin-top: 30px; font-size: 15px; }
      .finale-sign { margin-top: 34px; }
      .finale-credit { margin-top: 12px; }
    }

    /* 临时构建标记（验收用，交付前移除） */
    .build-tag {
      position: fixed;
      left: 8px;
      bottom: 4px;
      z-index: 90;
      font-size: 9px;
      letter-spacing: .1em;
      color: rgba(255, 255, 255, .3);
      pointer-events: none;
    }