:root {
  color-scheme: dark;
  --gold: #a05c00;
  --page: #130f0c;
  --top-letterbox: 8%;
  --bottom-letterbox: 8%;
  --end-left-gutter: 20.2%;
  --end-right-gutter: 20.2%;
}

body.is-film-active {
  overflow: hidden;
}

.film-stage {
  position: fixed;
  z-index: 9000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  transition: background-color 900ms ease, opacity 420ms ease;
}

.film-stage__composition {
  position: relative;
  width: 100vw;
  height: 100dvh;
}

.film-stage__authored {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

/* SVG 中的静态圆点仅是位置示意；真实圆点由视频时间驱动。 */
.film-timeline {
  position: absolute;
  z-index: 5;
  top: 23%;
  right: clamp(18px, 2.35vw, 44px);
  width: clamp(42px, 4.2vw, 72px);
  height: 43%;
  color: #d3a25f;
  pointer-events: none;
  opacity: 1;
  transition: opacity 360ms ease, transform 360ms ease;
}

.film-timeline__segment {
  position: absolute;
  left: 50%;
  height: 16%;
  width: 1px;
  overflow: hidden;
  background: rgba(211,162,95,.2);
  transform: translateX(-50%);
}

.film-timeline__segment i {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(to bottom, rgba(226,179,111,.88), rgba(211,162,95,.48));
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}

.film-timeline__segment--one { top: 11%; }
.film-timeline__segment--two { top: 39%; }
.film-timeline__segment--three { top: 67%; }

.film-timeline__icon {
  position: absolute;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  text-align: center;
  text-shadow: 0 0 9px rgba(211,162,95,.12);
}
.film-timeline__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.film-timeline__icon--one { top: 0; }
.film-timeline__icon--two { top: 28%; }
.film-timeline__icon--three { top: 56%; }
.film-timeline__icon--four { top: 84%; }
.film-timeline__icon--one { height: 9%; }
.film-timeline__icon--two { height: 9%; }
.film-timeline__icon--three { height: 9%; }
.film-timeline__icon--four { height: 11%; }

.film-progress-dot {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 11%;
  width: clamp(7px, .62vw, 12px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e2b36f;
  box-shadow: 0 0 0 1px rgba(226,179,111,.18), 0 0 10px rgba(226,179,111,.28);
  transform: translate(-50%, -50%);
  will-change: top;
  transition: top 80ms linear;
}

.film-stage.is-transitioning {
  background: var(--page);
  pointer-events: none;
}

.film-stage.is-finished {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.transition-film {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  display: block;
  width: 100vw;
  height: calc(100vw * 9 / 16);
  max-width: none;
  max-height: 100dvh;
  object-fit: cover;
  background: #000;
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: left, top, width, height, border-radius, filter;
}

.transition-still,
.transition-target {
  position: fixed;
  z-index: 2;
  display: none;
  max-width: none;
  object-fit: cover;
  background: #eef0f1;
  opacity: 0;
  transform-origin: 0 0;
  will-change: left, top, width, height, border-radius, filter;
}

.transition-target { opacity: 0; }

.film-stage.is-transitioning .transition-still,
.film-stage.is-transitioning .transition-target { display: block; }
.film-stage.is-transitioning .transition-film { visibility: hidden; }

.stage-play {
  position: absolute;
  z-index: 3;
  left: 18px;
  top: 17px;
  right: auto;
  bottom: auto;
  width: clamp(52px, 5vw, 76px);
  height: clamp(52px, 5vw, 76px);
  padding: 0;
  height: clamp(52px, 5.1vw, 92px);
  border: max(1px, .08vw) solid rgba(216,166,95,.78);
  border-radius: 50%;
  background: #000;
  cursor: pointer;
}

.stage-play::before {
  content: "";
  position: absolute;
  left: 42%;
  top: 32%;
  width: 0;
  height: 0;
  border-top: clamp(8px, .85vw, 15px) solid transparent;
  border-bottom: clamp(8px, .85vw, 15px) solid transparent;
  border-left: clamp(13px, 1.35vw, 24px) solid #d8a65f;
  transition: opacity 120ms ease;
}

.stage-fullscreen {
  display: none;
  position: absolute;
  z-index: 2;
  right: 19%;
  bottom: 8.05%;
  width: clamp(52px, 5.1vw, 92px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(160, 92, 0, .86);
  border-radius: 18%;
  color: #c99a54;
  background: rgba(4, 5, 6, .82);
  cursor: pointer;
}

.stage-control-card {
  position: absolute;
  z-index: 6;
  right: clamp(20px, 4vw, 72px);
  bottom: clamp(22px, 4vh, 50px);
  width: clamp(230px, 21vw, 340px);
  height: clamp(130px, 12vw, 190px);
  border: 1px solid rgba(160,92,0,.42);
  border-radius: 15px;
  color: #d9aa67;
  background: rgba(2,2,2,.94);
  opacity: 1;
  transition: opacity 360ms ease, transform 360ms ease;
}

.film-stage.are-playback-controls-hidden .film-timeline {
  opacity: 0;
  transform: translateX(10px);
}

.film-stage.are-playback-controls-hidden .stage-control-card {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.stage-control-card__copy {
  position: absolute;
  left: 39%;
  top: 19%;
  display: grid;
  gap: 3px;
  font-family: Georgia, "Times New Roman", serif;
  pointer-events: none;
}
.stage-control-card__copy strong { font-size: clamp(15px, 1.3vw, 21px); font-weight: 400; }
.stage-control-card__copy small {
  min-width: 7.5ch;
  color: rgba(217,170,103,.63);
  font-size: clamp(11px, .9vw, 14px);
  font-variant-numeric: tabular-nums;
  letter-spacing: .035em;
}
.stage-fullscreen span,
.stage-fullscreen span::after {
  position: absolute;
  inset: 30%;
  border: 2px solid currentColor;
  clip-path: polygon(0 0, 42% 0, 42% 12%, 12% 12%, 12% 42%, 0 42%, 0 0, 100% 0, 100% 42%, 88% 42%, 88% 12%, 58% 12%, 58% 0);
}
.stage-fullscreen b { display: none; }
.stage-fullscreen span::after { content: ""; inset: 0; transform: rotate(180deg); }
.stage-fullscreen:hover,
.stage-fullscreen:focus-visible { color: #efc77f; background: rgba(160,92,0,.12); outline: 0; }

.stage-play img { width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.stage-pause { display: none; }
.stage-play.is-playing img { opacity: 0; }
.stage-play.is-playing::before { opacity: 0; }
.stage-play.is-playing .stage-pause,
.stage-play.is-playing .stage-pause::after {
  position: absolute;
  top: 31%;
  width: 10%;
  height: 38%;
  border-radius: 2px;
  background: #c99a54;
}
.stage-play.is-playing .stage-pause { display: block; left: 37%; }
.stage-play.is-playing .stage-pause::after { content: ""; top: 0; left: 160%; width: 100%; height: 100%; }

.stage-last-page {
  position: absolute;
  z-index: 4;
  right: 5%;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  min-height: 39%;
  padding: 0 4%;
  border: 0;
  border-top: 1px solid rgba(160,92,0,.38);
  border-radius: 0 0 14px 14px;
  color: #d9aa67;
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 1.2vw, 20px);
  cursor: pointer;
}

.stage-last-page span { color: #d9aa67; font-size: 1.4em; }

.unfinished-notice {
  position: fixed;
  z-index: 10050;
  width: min(430px, calc(100vw - 40px));
  padding: 34px 34px 30px;
  border: 1px solid rgba(211, 162, 95, .55);
  border-radius: 18px;
  color: #f5ecdf;
  background: rgba(14, 12, 10, .98);
  box-shadow: 0 26px 90px rgba(0,0,0,.7);
  font-family: "Songti SC", "STSong", serif;
}
.unfinished-notice::backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(3px); }
.unfinished-notice small { color: #d3a25f; letter-spacing: .14em; }
.unfinished-notice h2 { margin: 12px 0 8px; font-size: clamp(25px, 3vw, 34px); font-weight: 400; }
.unfinished-notice p { margin: 0 0 24px; color: rgba(245,236,223,.66); line-height: 1.7; }
.unfinished-notice__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.unfinished-notice__close {
  position: absolute; top: 12px; right: 14px; border: 0; color: #d3a25f; background: transparent;
  font-size: 26px; cursor: pointer;
}
.unfinished-notice__continue,
.unfinished-notice__enter,
.unfinished-notice__primary,
.unfinished-notice__secondary {
  min-width: 120px; padding: 10px 18px; border: 1px solid rgba(211,162,95,.7); border-radius: 999px;
  color: #e2b36f; background: transparent; cursor: pointer;
}
.unfinished-notice__primary { color: #17110a; border-color: #d3a25f; background: #d3a25f; }
.unfinished-notice__secondary { color: rgba(245,236,223,.48); border-color: rgba(245,236,223,.18); background: rgba(255,255,255,.025); }
.unfinished-notice__continue:hover, .unfinished-notice__continue:focus-visible,
.unfinished-notice__enter:hover, .unfinished-notice__enter:focus-visible,
.unfinished-notice__primary:hover, .unfinished-notice__primary:focus-visible,
.unfinished-notice__secondary:hover, .unfinished-notice__secondary:focus-visible { filter: brightness(1.12); outline: 0; }

/* 首次播放声音提示：保留现有播放拦截，仅还原用户提供的视觉层级。 */
.headphone-notice {
  width: min(420px, calc(100vw - 40px)); padding: 26px 34px 34px; text-align: center;
  background: linear-gradient(145deg, rgba(18,15,13,.985), rgba(9,8,7,.99));
}
.headphone-notice .unfinished-notice__close { display: none; }
.headphone-notice small { display: block; font-size: 11px; letter-spacing: .22em; }
.headphone-notice__rule { display: block; width: 22px; height: 1px; margin: 11px auto 22px; background: rgba(211,162,95,.72); }
.headphone-notice__sound { position: relative; display: inline-flex; align-items: center; width: 112px; height: 82px; margin-bottom: 12px; color: #e4ae59; }
.headphone-notice__sound i { width: 40px; height: 54px; background: currentColor; clip-path: polygon(0 31%,30% 31%,76% 0,76% 100%,30% 69%,0 69%); }
.headphone-notice__sound b { position: absolute; border: 5px solid currentColor; border-left: 0; border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; }
.headphone-notice__sound b:nth-of-type(1) { left: 55px; width: 16px; height: 30px; }
.headphone-notice__sound b:nth-of-type(2) { left: 58px; width: 30px; height: 48px; }
.headphone-notice__sound b:nth-of-type(3) { left: 61px; width: 44px; height: 66px; }
.headphone-notice h2 { margin: 0 0 10px; font-size: clamp(27px,3vw,34px); }
.headphone-notice p { margin-bottom: 26px; font-size: 14px; }
.headphone-notice .unfinished-notice__actions { display: block; }
.headphone-notice .unfinished-notice__primary { min-width: 168px; padding: 11px 22px; color: #dfad65; background: rgba(255,255,255,.015); }
.headphone-notice .unfinished-notice__primary span { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 9px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; }
.headphone-notice__cancel { display: none; }
@media (max-width: 520px) { .headphone-notice { width: calc(100vw - 36px); padding: 24px 24px 30px; } }

@media (max-width: 900px) and (hover: none) and (pointer: coarse) {
  .stage-fullscreen { display: block; }
}

.transition-preview {
  position: absolute;
  z-index: 4;
  left: clamp(16px, 2vw, 38px);
  bottom: clamp(18px, 2.5vw, 44px);
  padding: 10px 15px;
  border: 1px solid rgba(211, 162, 95, .55);
  border-radius: 999px;
  color: #d8b47a;
  background: rgba(8, 7, 6, .72);
  cursor: pointer;
}

/* 正式入口已经合并到右下角 Last Page。 */
.transition-preview { display: none; }

.transition-console-toggle {
  position: absolute;
  z-index: 8;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(185, 116, 19, .72);
  border-radius: 999px;
  color: #d7a85e;
  background: rgba(7,7,7,.78);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.transition-console {
  position: absolute;
  z-index: 10;
  top: max(62px, calc(env(safe-area-inset-top) + 54px));
  left: max(18px, env(safe-area-inset-left));
  width: min(390px, calc(100vw - 36px));
  max-height: calc(100dvh - 82px);
  padding: 18px;
  overflow-y: auto;
  border: 1px solid rgba(176, 106, 12, .76);
  border-radius: 14px;
  color: rgba(246,235,216,.88);
  background: rgba(9,8,7,.94);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  backdrop-filter: blur(22px);
  transition: opacity 180ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
}
.transition-console.is-collapsed { opacity: 0; pointer-events: none; transform: translateX(-18px); }
.transition-console header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 13px; border-bottom: 1px solid rgba(160,92,0,.22); }
.transition-console header small { display: block; color: #ad7029; font-size: 9px; letter-spacing: .18em; }
.transition-console h1 { margin: 4px 0 0; font-family: Songti SC, STSong, serif; font-size: 22px; font-weight: 400; }
.transition-console header button { width: 30px; height: 30px; border: 0; border-radius: 50%; color: rgba(255,255,255,.55); background: rgba(255,255,255,.04); cursor: pointer; }
.transition-console__presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 14px 0 5px; }
.transition-console__presets button { display: grid; gap: 3px; min-height: 54px; padding: 8px 5px; border: 1px solid rgba(160,92,0,.32); border-radius: 8px; color: rgba(255,255,255,.58); background: rgba(255,255,255,.018); cursor: pointer; }
.transition-console__presets strong { color: inherit; font-size: 12px; font-weight: 500; }
.transition-console__presets span { color: rgba(255,255,255,.32); font-size: 9px; }
.transition-console__presets button.is-active { border-color: rgba(196,128,35,.86); color: #e4b46e; background: rgba(160,92,0,.12); }
.transition-control { display: grid; gap: 7px; padding-top: 12px; }
.transition-control > span { display: flex; justify-content: space-between; color: rgba(255,255,255,.68); font-size: 11px; }
.transition-control output { color: #d6a25a; font-variant-numeric: tabular-nums; }
.transition-control input[type="range"] { width: 100%; accent-color: #bd8135; }
.transition-console__advanced { margin-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.transition-console__advanced summary { padding-top: 12px; color: rgba(255,255,255,.65); font-size: 11px; cursor: pointer; }
.transition-console__select { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; color: rgba(255,255,255,.68); font-size: 11px; }
.transition-console__select select { min-height: 32px; border: 1px solid rgba(214,162,90,.35); border-radius: 7px; color: rgba(255,255,255,.82); background: #211912; }
.transition-console footer { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 15px; }
.transition-console footer button { min-height: 34px; border: 1px solid rgba(214,162,90,.3); border-radius: 8px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.035); cursor: pointer; }
.transition-console footer button:last-child { grid-column: 1 / -1; color: #171009; background: #bd8135; }

.transition-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(22px, 3vw, 50px);
  margin: 0;
  color: rgba(255,255,255,.52);
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: .08em;
  transform: translateX(-50%);
  transition: opacity 260ms ease;
}

.film-progress {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(160,92,0,.18);
  color: rgba(255,255,255,.5);
}
.film-progress div { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.film-progress div span { margin-right: auto; color: rgba(255,255,255,.68); font-size: 12px; }
.film-progress i { color: rgba(255,255,255,.22); font-style: normal; }
.film-progress input { width: 100%; accent-color: #b57520; cursor: ew-resize; }
.film-progress output { font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.frame-console-toggle {
  position: absolute;
  z-index: 8;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(185, 116, 19, .72);
  border-radius: 999px;
  color: #d7a85e;
  background: rgba(7,7,7,.78);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.frame-console {
  position: absolute;
  z-index: 9;
  top: max(62px, calc(env(safe-area-inset-top) + 54px));
  right: max(18px, env(safe-area-inset-right));
  width: min(360px, calc(100vw - 36px));
  padding: 18px;
  border: 1px solid rgba(176, 106, 12, .76);
  border-radius: 14px;
  color: rgba(246,235,216,.88);
  background: rgba(9,8,7,.91);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  backdrop-filter: blur(22px);
  transition: opacity 180ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
}

.frame-console.is-collapsed { opacity: 0; pointer-events: none; transform: translateX(18px); }
.frame-console header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid rgba(160,92,0,.22); }
.frame-console header small { display: block; color: #ad7029; font-size: 9px; letter-spacing: .18em; }
.frame-console h1 { margin: 4px 0 0; font-family: Songti SC, STSong, serif; font-size: 22px; font-weight: 400; }
.frame-console header button { width: 30px; height: 30px; border: 0; border-radius: 50%; color: rgba(255,255,255,.55); background: rgba(255,255,255,.04); cursor: pointer; }

.frame-control { display: block; margin-top: 18px; }
.frame-control > span { display: flex; justify-content: space-between; margin-bottom: 9px; color: rgba(255,255,255,.72); font-size: 12px; }
.frame-control output { color: #c99042; font-variant-numeric: tabular-nums; }
.frame-control > div { display: grid; grid-template-columns: 1fr 58px 12px; align-items: center; gap: 8px; }
.frame-control input[type="range"] { width: 100%; accent-color: #b57520; cursor: ew-resize; }
.frame-control input[type="number"] { width: 58px; height: 32px; border: 1px solid rgba(160,92,0,.45); border-radius: 6px; color: #e0b16a; text-align: right; background: rgba(0,0,0,.34); font-variant-numeric: tabular-nums; }
.frame-control em { color: rgba(255,255,255,.36); font-size: 11px; font-style: normal; }

.frame-lock { display: flex; align-items: center; gap: 8px; margin: 17px 0; color: rgba(255,255,255,.58); font-size: 11px; cursor: pointer; }
.frame-lock input { accent-color: #b57520; }
.frame-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.frame-presets button,
.frame-console footer button { min-height: 34px; border: 1px solid rgba(160,92,0,.32); border-radius: 7px; color: rgba(255,255,255,.58); background: rgba(255,255,255,.018); cursor: pointer; }
.frame-presets button:hover,
.frame-presets button.is-active { border-color: rgba(196,128,35,.8); color: #dfad63; background: rgba(160,92,0,.1); }
.frame-readout { margin: 17px 0 0; padding: 12px; border-radius: 8px; background: rgba(255,255,255,.025); }
.frame-readout div { display: flex; justify-content: space-between; gap: 16px; }
.frame-readout div + div { margin-top: 7px; }
.frame-readout dt { color: rgba(255,255,255,.38); font-size: 10px; }
.frame-readout dd { margin: 0; color: rgba(255,255,255,.7); font-size: 10px; font-variant-numeric: tabular-nums; }
.frame-console footer { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 13px; }
.frame-console footer button:last-child { color: #160f08; background: #b67a2d; }
.frame-parameter-text { margin: 10px 0 0; color: rgba(255,255,255,.3); font-size: 9px; text-align: center; letter-spacing: .08em; }

.film-stage.is-transitioning .frame-console,
.film-stage.is-transitioning .frame-console-toggle,
.film-stage.is-transitioning .transition-console,
.film-stage.is-transitioning .transition-console-toggle,
.film-stage.is-transitioning .film-progress { opacity: 0; pointer-events: none; }

@media (max-width: 680px) {
  .frame-console { top: auto; right: 12px; bottom: 12px; width: min(340px, calc(100vw - 24px)); max-height: calc(100svh - 72px); overflow-y: auto; }
  .frame-console-toggle { top: 12px; right: 12px; }
  .transition-console { top: 58px; right: 12px; bottom: auto; left: 12px; width: auto; max-height: calc(100dvh - 70px); }
  .transition-console-toggle { top: 12px; left: 12px; }
}

.film-stage.is-transitioning .stage-play,
.film-stage.is-transitioning .stage-fullscreen,
.film-stage.is-transitioning .transition-preview,
.film-stage.is-transitioning .transition-hint { opacity: 0; }

.end-page {
  opacity: 0;
  transition: opacity 780ms ease;
}

body.is-end-revealing .end-page,
body.is-end-ready .end-page { opacity: 1; }

body.is-end-revealing .end-page { transition: none; }

body:not(.is-end-ready) .end-page__artboard {
  transform: translateY(20px);
}

body.is-end-ready .end-page__artboard {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .film-stage, .end-page, .end-page__artboard { transition-duration: 1ms !important; }
}

/* Production freeze: keep the existing animation dependencies, but never expose
   authoring consoles or test-only entry points in the private review build. */
.transition-preview,
.transition-console-toggle,
.transition-console,
.frame-console-toggle,
.frame-console,
.end-frame-console-toggle,
.end-frame-console,
.scroll-console-toggle,
.scroll-console {
  display: none !important;
  pointer-events: none !important;
}

.private-review-notice {
  display: grid;
  gap: 6px;
  padding: 22px clamp(20px, 4vw, 64px) 28px;
  color: rgba(255, 255, 255, .34);
  background: #130f0c;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .04em;
}

.private-review-notice strong {
  color: rgba(214, 162, 90, .52);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

* { box-sizing: border-box; }

html, body {
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--page);
}

button { font: inherit; }

.end-page {
  position: relative;
  min-height: 100svh;
  padding: clamp(12px, 2vw, 44px) 0;
  overflow-x: hidden;
  background: var(--page);
}

.end-frame-console-toggle {
  position: fixed;
  z-index: 30;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(185,116,19,.72);
  border-radius: 999px;
  color: #d7a85e;
  background: rgba(7,7,7,.82);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(12px);
}

.end-frame-console {
  position: fixed;
  z-index: 31;
  top: max(62px, calc(env(safe-area-inset-top) + 54px));
  right: max(18px, env(safe-area-inset-right));
  width: min(360px, calc(100vw - 36px));
  padding: 18px;
  border: 1px solid rgba(176,106,12,.76);
  border-radius: 14px;
  color: rgba(246,235,216,.88);
  background: rgba(9,8,7,.92);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(22px);
  transition: opacity 180ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
}

body.is-end-ready .end-frame-console-toggle,
body.is-end-ready .end-frame-console { opacity: 1; pointer-events: auto; }
.end-frame-console.is-collapsed { opacity: 0 !important; pointer-events: none !important; transform: translateX(18px); }
.end-frame-console header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid rgba(160,92,0,.22); }
.end-frame-console header small { display: block; color: #ad7029; font-size: 9px; letter-spacing: .18em; }
.end-frame-console h1 { margin: 4px 0 0; font-family: Songti SC, STSong, serif; font-size: 22px; font-weight: 400; }
.end-frame-console header button { width: 30px; height: 30px; border: 0; border-radius: 50%; color: rgba(255,255,255,.55); background: rgba(255,255,255,.04); cursor: pointer; }
.end-frame-console footer { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 13px; }
.end-frame-console footer button { min-height: 34px; border: 1px solid rgba(160,92,0,.32); border-radius: 7px; color: rgba(255,255,255,.58); background: rgba(255,255,255,.018); cursor: pointer; }
.end-frame-console footer button:last-child { color: #160f08; background: #b67a2d; }

.end-page__artboard {
  position: relative;
  display: block !important;
  width: min(calc(100vw - var(--end-left-gutter) - var(--end-right-gutter)), 3205px);
  margin-right: var(--end-right-gutter);
  margin-left: var(--end-left-gutter);
  overflow: hidden;
  background: var(--page);
  opacity: 0;
  filter: brightness(.86);
  transform: translateY(8px);
  transition: opacity 720ms ease, filter 900ms ease, transform 900ms cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 680px) {
  .end-frame-console { top: auto; right: 12px; bottom: 12px; width: min(340px, calc(100vw - 24px)); max-height: calc(100svh - 72px); overflow-y: auto; }
  .end-frame-console-toggle { top: 12px; right: 12px; }
}

.end-page__artboard.is-ready {
  opacity: 1;
  filter: brightness(1);
  transform: translateY(0);
}

.end-page__reference {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/*
 * 手机端使用用户在 Affinity 中完成的两张 960 × 2079 整页画布。
 * 结构为高滚动轨道 → sticky 视口舞台 → 绝对叠层画面。
 */
.end-page__mobile {
  display: none !important;
}

[hidden] { display: none !important; }

.scroll-console-toggle {
  display: none;
  position: fixed;
  z-index: 72;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(214, 162, 90, .72);
  border-radius: 999px;
  color: #e3b66f;
  background: rgba(19, 15, 12, .9);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.scroll-console {
  display: none;
  position: fixed;
  z-index: 73;
  top: max(62px, calc(env(safe-area-inset-top) + 56px));
  right: max(12px, env(safe-area-inset-right));
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100dvh - 86px - env(safe-area-inset-bottom));
  padding: 14px;
  overflow-y: auto;
  border: 1px solid rgba(214, 162, 90, .38);
  border-radius: 16px;
  color: rgba(255, 255, 255, .86);
  background: rgba(15, 12, 10, .94);
  box-shadow: 0 18px 56px rgba(0, 0, 0, .46);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: opacity 180ms ease, transform 220ms ease;
}

.scroll-console.is-collapsed { opacity: 0; pointer-events: none; transform: translateX(18px); }
.scroll-console header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.scroll-console header div { display: grid; gap: 3px; }
.scroll-console header small { color: rgba(214, 162, 90, .72); font-size: 10px; letter-spacing: .12em; }
.scroll-console header strong { font-size: 17px; font-weight: 500; }
.scroll-console header button { width: 32px; height: 32px; border: 0; border-radius: 50%; color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); }
.scroll-console__group { display: grid; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.08); }
.scroll-console__group h2 { margin: 0; color: #d6a25a; font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.scroll-console__group label { display: grid; gap: 6px; }
.scroll-console__group label > span { display: flex; justify-content: space-between; gap: 10px; color: rgba(255,255,255,.68); font-size: 12px; }
.scroll-console output { color: #e5bd7e; font-variant-numeric: tabular-nums; }
.scroll-console input[type="range"] { width: 100%; accent-color: #bd8135; }
.scroll-console__select { grid-template-columns: 1fr auto; align-items: center; }
.scroll-console__select select { min-height: 32px; border: 1px solid rgba(214,162,90,.35); border-radius: 7px; color: rgba(255,255,255,.82); background: #211912; }
.scroll-console__check { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 8px !important; color: rgba(255,255,255,.72); font-size: 12px; }
.scroll-console__check input { accent-color: #bd8135; }
.scroll-console__check span { display: inline !important; }
.scroll-console__advanced { border-top: 1px solid rgba(255,255,255,.08); }
.scroll-console__advanced summary { padding: 11px 0; color: rgba(255,255,255,.72); font-size: 12px; cursor: pointer; }
.scroll-console__progress { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.64); font-size: 12px; }
.scroll-console__pages, .scroll-console__presets, .scroll-console footer { display: grid; gap: 7px; margin-top: 8px; }
.scroll-console__pages { grid-template-columns: 1fr 1fr; }
.scroll-console__presets { grid-template-columns: repeat(3, 1fr); }
.scroll-console footer { grid-template-columns: 1fr 1fr; }
.scroll-console__pages button, .scroll-console__presets button, .scroll-console footer button { min-height: 34px; border: 1px solid rgba(214,162,90,.3); border-radius: 8px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.035); }
.scroll-console footer button:last-child { color: #171009; background: #bd8135; }

.mobile-end-stage {
  --mobile-one-y: 0dvh;
  --mobile-one-scale: 1;
  --mobile-one-opacity: 1;
  --mobile-one-radius: 0px;
  --mobile-two-y: 105dvh;
  --mobile-two-scale: .985;
  --mobile-two-radius: 28px;
  position: fixed;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--page);
  isolation: isolate;
  display: none;
}

.mobile-end-sheet {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: auto;
  aspect-ratio: 960 / 2079;
  overflow: hidden;
  background: var(--page);
  pointer-events: none;
  will-change: transform, opacity, border-radius;
  backface-visibility: hidden;
}

.mobile-end-sheet.is-active {
  pointer-events: auto;
}

.mobile-end-sheet--one {
  z-index: 1;
  opacity: var(--mobile-one-opacity);
  border-radius: var(--mobile-one-radius);
  transform: translate3d(-50%, 0, 0) translate3d(0, var(--mobile-one-y), 0) scale(var(--mobile-one-scale));
}

.mobile-end-sheet--two {
  z-index: 2;
  border-radius: var(--mobile-two-radius);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, .42);
  transform: translate3d(-50%, 0, 0) translate3d(0, var(--mobile-two-y), 0) scale(var(--mobile-two-scale));
}

.mobile-end-sheet__artwork {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.mobile-end-hit,
.mobile-end-next,
.mobile-chapter-nav__item {
  position: absolute;
  z-index: 2;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-end-hit[data-card] {
  touch-action: pan-y;
  transition: background-color 120ms ease-out, box-shadow 120ms ease-out;
}

.mobile-end-hit[data-card].is-touch-active,
.mobile-end-hit[data-card]:focus-visible {
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(247, 212, 167, .52), 0 0 28px rgba(247, 212, 167, .16);
  -webkit-backdrop-filter: brightness(1.42) saturate(1.04);
  backdrop-filter: brightness(1.42) saturate(1.04);
}

.mobile-end-hit:focus-visible,
.mobile-end-next:focus-visible,
.mobile-chapter-nav__item:focus-visible {
  outline: 1px solid rgba(214, 162, 90, .92);
  outline-offset: 2px;
}

/* 第一页：顶部重播区和 01 卡片的边界来自 SVG 源坐标。 */
.mobile-end-hit--replay {
  left: 21.3%;
  top: 29.5%;
  width: 73.5%;
  height: 35.8%;
}

.mobile-end-hit--card-one {
  left: 10.1%;
  top: 21.8%;
  width: 79.8%;
  height: 21.9%;
}

.mobile-chapter-nav {
  position: absolute;
  z-index: 3;
  left: 23.8%;
  top: 22.8%;
  width: 52.5%;
  height: 5.2%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4.8%;
}

.mobile-chapter-nav__item {
  position: relative;
  left: auto;
  top: auto !important;
  width: 100%;
  height: 100%;
  border-radius: 24%;
}
.mobile-chapter-nav__item.is-active { box-shadow: inset 0 0 0 5px rgba(247,212,167,.92); }

.mobile-feature-states {
  position: absolute;
  z-index: 2;
  left: 5.2%;
  top: 29.1%;
  width: 89.6%;
  aspect-ratio: 1.678 / 1;
  overflow: hidden;
  border-radius: 3%;
  background: #fff;
  pointer-events: none;
}
.mobile-feature-state {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  transition: opacity 180ms ease-out;
}
.mobile-feature-state.is-active { opacity: 1; }

.mobile-end-next {
  left: 38%;
  top: 94.3%;
  width: 24%;
  height: 5%;
  border-radius: 0;
}

/* 第二页：02 与 03 卡片。 */
.mobile-end-hit--card-two {
  left: 10.1%;
  top: 47%;
  width: 79.8%;
  height: 21.9%;
}

.mobile-end-hit--card-three {
  left: 10.1%;
  top: 73.4%;
  width: 79.8%;
  height: 12%;
}

/*
 * Affinity 状态图与主画面共用 3206 × 5390 坐标。
 * 每张 hover 图只保留对应局部；视觉本身由用户原稿决定，网页只做透明度交叉淡入。
 */
.hover-states {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

/* 桌面尾页顶部四章：完整 Affinity 画布原位切换。 */
.end-feature-states {
  position: absolute;
  z-index: 1;
  left: 4.679%;
  top: 3.822%;
  width: 86.557%;
  height: 30.687%;
  overflow: hidden;
  border-radius: 2%;
  /* 章节 SVG 有透明留白；用独立画布阻断下层固定的 01 底图。 */
  background: #757575;
  transition: background-color 180ms ease-out;
  pointer-events: auto;
}

.end-feature-states:hover,
.end-feature-states:has(+ .hover-states + .end-hit--replay:focus-visible),
.end-page__artboard[data-hover="top"] .end-feature-states {
  background: #fff;
}

.end-feature-state {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: fill;
  filter: brightness(.46);
  transition: opacity 180ms ease-out, filter 180ms ease-out;
}

.end-feature-state.is-active { opacity: 1; }

.end-feature-state--hover.is-active { opacity: 0; }

.end-feature-states:hover .end-feature-state--base.is-active,
.end-feature-states:has(+ .hover-states + .end-hit--replay:focus-visible) .end-feature-state--base.is-active,
.end-page__artboard[data-hover="top"] .end-feature-state--base.is-active {
  opacity: 0;
}

.end-feature-states:hover .end-feature-state--hover.is-active,
.end-feature-states:has(+ .hover-states + .end-hit--replay:focus-visible) .end-feature-state--hover.is-active,
.end-page__artboard[data-hover="top"] .end-feature-state--hover.is-active {
  opacity: 1;
  filter: brightness(1);
}

.hover-state {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
  will-change: opacity;
}

.hover-state--one,
.hover-state--two,
.hover-state--three {
  left: 10.168%;
  width: 78.696%;
}

.hover-state--one { top: 42.653%; height: 18.701%; }
.hover-state--two { top: 62.171%; height: 18.701%; }
.hover-state--three { top: 81.558%; height: 14.471%; }

.end-page__artboard[data-hover="one"] .hover-state--one,
.end-page__artboard[data-hover="two"] .hover-state--two,
.end-page__artboard[data-hover="three"] .hover-state--three {
  opacity: 1;
}

/* 第一版保留设计稿作为视觉底图；下面所有热区都是真实按钮。 */
.end-hit,
.end-card-hit,
.chapter-nav__item {
  position: absolute;
  z-index: 2;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 交互反馈独立于 SVG 原稿：只叠加光感，不重复描边。 */
.end-card-hit,
.chapter-nav__item {
  overflow: hidden;
}

.end-card-hit::before,
.chapter-nav__item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.2, .7, .2, 1);
}

.end-hit:focus-visible,
.end-card-hit:focus-visible,
.chapter-nav__item:focus-visible {
  outline: none;
}

.end-hit--replay {
  /* 同一个重播按钮扩展到整个顶部主画面，不新增重复焦点。 */
  left: 4.679%;
  top: 3.822%;
  width: 86.557%;
  height: 30.687%;
  border-radius: 2%;
}

.end-hit--replay:hover,
.end-hit--replay:focus-visible {
  box-shadow: none;
}

.chapter-nav {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.chapter-nav__artwork,
.chapter-nav__selection {
  position: absolute;
  display: block;
  object-fit: fill;
  pointer-events: none;
}

.chapter-nav__artwork {
  left: 94.167%;
  top: 8.555%;
  width: 3.088%;
  height: 14.586%;
}

.chapter-nav__selection {
  z-index: 1;
  left: 93.793%;
  top: 7.645%;
  width: 4.117%;
  height: 15.495%;
  transform: translate(var(--chapter-shift-x, 0%), var(--chapter-shift-y, 0%));
  transition: none;
}

.chapter-nav__item {
  position: absolute;
  z-index: 2;
  width: 4.117%;
  height: 2.987%;
  border: 0;
  border-radius: 23%;
  pointer-events: auto;
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
}

.chapter-nav__item::before {
  border-radius: inherit;
  background: radial-gradient(circle at 55% 50%, rgba(229, 179, 96, .2), rgba(160, 92, 0, 0) 68%);
  transform: scale(.72);
}

/* 四个点击区直接采用四张 3206×5389 PNG 的选框实测边界。 */
.chapter-nav__item:nth-of-type(1) { left: 93.793%; top: 7.645%; }
.chapter-nav__item:nth-of-type(2) { left: 93.637%; top: 11.820%; height: 2.969%; }
.chapter-nav__item:nth-of-type(3) { left: 93.637%; top: 15.922%; }
.chapter-nav__item:nth-of-type(4) { left: 93.762%; top: 20.319%; height: 2.969%; }

.chapter-nav__item.is-active,
.chapter-nav__item:hover,
.chapter-nav__item:focus-visible {
  box-shadow: none;
}

.chapter-nav__item.is-active { border-color: transparent; }

.chapter-nav__item:hover,
.chapter-nav__item:focus-visible {
  transform: none;
}

.chapter-nav__item:hover::before,
.chapter-nav__item:focus-visible::before,
.chapter-nav__item.is-active::before {
  opacity: 1;
  transform: scale(1);
}

.end-cards {
  position: absolute;
  inset: 0;
  /* 卡片容器不拦截右侧导航；只有实际卡片热区可点击。 */
  pointer-events: none;
}

.end-card-hit {
  /* 新主画面的卡片边界：x 326–2849 / 3206。 */
  left: 10.168%;
  width: 78.696%;
  border-radius: 2%;
  pointer-events: auto;
}

.end-card-hit::before {
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 222, 158, .14), rgba(210, 137, 38, .055) 22%, rgba(160, 92, 0, 0) 52%),
    linear-gradient(105deg, rgba(228, 182, 97, 0) 12%, rgba(228, 182, 97, .065) 47%, rgba(228, 182, 97, 0) 76%),
    linear-gradient(0deg, rgba(196, 126, 32, .045), rgba(255, 236, 196, .025));
  transform: translateX(-16%);
}

.end-card-hit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, rgba(229, 179, 96, 0), rgba(229, 179, 96, .12), rgba(229, 179, 96, 0));
  transform: translateX(-105%);
}

.end-card-hit--one { top: 42.653%; height: 18.701%; }
.end-card-hit--two { top: 62.171%; height: 18.701%; }
.end-card-hit--three { top: 81.558%; height: 14.471%; }

.end-card-hit:hover,
.end-card-hit:focus-visible {
  box-shadow: none;
}

.end-card-hit:hover::before,
.end-card-hit:focus-visible::before,
.end-card-hit.is-linked::before {
  opacity: 1;
  transform: translateX(0);
}

.end-card-hit.is-linked::after {
  animation: signal-sweep 520ms cubic-bezier(.2, .7, .2, 1);
}

.end-card-hit:active::before {
  opacity: .72;
}

/* 本轮取消所有卡片与标签光效，仅保留选择框和自定义鼠标。 */
.end-card-hit::before,
.end-card-hit::after,
.chapter-nav__item::before {
  display: none;
}

@keyframes signal-sweep {
  0% { opacity: 0; transform: translateX(-105%); }
  22% { opacity: .72; }
  100% { opacity: 0; transform: translateX(105%); }
}

.exhibition-cursor {
  --cursor-size: 21px;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);
  border: 1px solid rgba(211, 162, 95, .82);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0);
  transition:
    width 180ms cubic-bezier(.2, .7, .2, 1),
    height 180ms cubic-bezier(.2, .7, .2, 1),
    opacity 150ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
  will-change: transform, width, height;
}

.exhibition-cursor::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d3a25f;
  transform: translate(-50%, -50%);
  transition: opacity 140ms ease;
}

.exhibition-cursor__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid rgba(222, 181, 112, .95);
  opacity: 0;
  transform: translate(-35%, -50%) scale(.7);
  transition: opacity 150ms ease, transform 190ms cubic-bezier(.2, .7, .2, 1);
}

.exhibition-cursor.is-visible { opacity: 1; }

.exhibition-cursor.is-play {
  --cursor-size: 46px;
  border-color: rgba(222, 181, 112, .95);
  background: rgba(19, 15, 12, .2);
}

.exhibition-cursor.is-play::before { opacity: 0; }
.exhibition-cursor.is-play .exhibition-cursor__mark { opacity: 1; transform: translate(-35%, -50%) scale(1); }

.exhibition-cursor.is-nav { --cursor-size: 28px; }
.exhibition-cursor.is-pressed { --cursor-size: 34px; }

@media (hover: hover) and (pointer: fine) {
  .end-page__artboard,
  .end-page__artboard button {
    cursor: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .end-card-hit::before,
  .end-card-hit::after,
  .hover-state,
  .end-page__artboard,
  .chapter-nav__item,
  .chapter-nav__item::before {
    transition-duration: 1ms;
  }

  .exhibition-cursor { transition-duration: 1ms; }
}

.content-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.content-dialog::backdrop {
  background: rgba(6, 6, 6, .64);
  -webkit-backdrop-filter: brightness(.62) saturate(.72);
  backdrop-filter: brightness(.62) saturate(.72);
}

.authored-popup {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80vw, calc(82dvh * 1594 / 1744));
  aspect-ratio: 1594 / 1744;
  overflow: hidden;
  border: 0;
  border-radius: 3.2%;
  background: #100e0b;
  transform: translate(-50%, -50%);
}

.authored-popup__artwork {
  position: absolute;
  left: -58.97%;
  top: -12.61%;
  display: block;
  width: 200.75%;
  height: 127.69%;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.authored-popup audio { display: none; }

.authored-popup__audio-mask {
  position: absolute;
  z-index: 2;
  left: 7.15%;
  top: 80.36%;
  width: 79.3%;
  height: 15.96%;
  background: #100e0b;
  pointer-events: none;
}

.authored-popup__close,
.authored-popup__play,
.authored-popup__seek {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.authored-popup__close {
  left: 90.28%;
  top: 1.24%;
  width: 8.53%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.authored-popup__play {
  z-index: 3;
  left: 9.66%;
  top: 83.32%;
  width: 8.93%;
  aspect-ratio: 1;
  background: #17110a;
  box-shadow: inset 0 0 0 1px rgba(194, 139, 56, .88);
  border-radius: 18%;
}

.authored-popup__play::before {
  content: "";
  position: absolute;
  left: 40%;
  top: 34%;
  width: 26%;
  height: 32%;
  background: #d6a25a;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.authored-popup__play.is-playing::before,
.authored-popup__play.is-playing::after {
  content: "";
  position: absolute;
  top: 35%;
  width: 8%;
  height: 30%;
  border-radius: 1px;
  background: #d6a25a;
  clip-path: none;
}

.authored-popup__play.is-playing::before { left: 39%; }
.authored-popup__play.is-playing::after { right: 39%; }
.authored-popup__play span { display: none; }

.authored-popup__seek {
  z-index: 3;
  left: 32.68%;
  top: 84.21%;
  width: 49.78%;
  height: 5.30%;
  overflow: hidden;
  cursor: default;
  pointer-events: none;
}

.authored-popup__waveform {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.audio-wave { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.audio-wave--base { stroke: rgba(145, 99, 42, .52); stroke-width: 1.1; }
.audio-wave--played { stroke: #d9a75c; stroke-width: 1.5; }
.audio-wave__playhead { stroke: #efc477; stroke-width: 2; vector-effect: non-scaling-stroke; }
.audio-wave__pulse { fill: rgba(239,196,119,.2); stroke: #efc477; stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.authored-popup__play.is-playing + .authored-popup__seek .audio-wave__pulse { animation: audio-pulse-breathe 680ms ease-in-out infinite alternate; }
@keyframes audio-pulse-breathe { to { opacity: .38; transform: scale(1.65); } }

.authored-popup__time {
  position: absolute;
  z-index: 3;
  top: 80.55%;
  min-width: 4.2%;
  padding: .15% .3%;
  color: #a97832;
  background: #100e0b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(9px, 1.08vw, 23px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.authored-popup__time--current { left: 33.38%; }
.authored-popup__time--duration { left: 74.42%; text-align: right; }

.authored-popup button:focus-visible {
  outline: 1px solid rgba(214, 162, 90, .92);
  outline-offset: 2px;
}

.authored-popup__play:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(214, 162, 90, .92);
}

.authored-popup__close:focus-visible { outline: 0; }

/* 03 为两页预约卡：保留新 SVG 的完整独立卡片，热区只覆盖第一页的三项选择。 */
.authored-popup__card-three-nav { display: none; }
.authored-popup__artwork--next { display: none; }

@media (min-width: 701px) {
  .content-dialog[data-card="03"] .authored-popup {
    width: min(80vw, calc(82dvh * 6474 / 5451));
    aspect-ratio: 6474 / 5451;
    border-radius: 3.1%;
    background: #fff6e9;
  }

  .content-dialog[data-card="03"] .authored-popup__artwork {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .content-dialog[data-card="03"] .authored-popup__artwork--next {
    display: block;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease-out;
  }

  .content-dialog[data-card="03"] .authored-popup__artwork--next.is-visible { opacity: 1; }

  .content-dialog[data-card="03"] .authored-popup__close {
    left: 92.5%;
    top: 2.3%;
    width: 5.2%;
  }

  .content-dialog[data-card="03"] .authored-popup__audio-mask,
  .content-dialog[data-card="03"] .authored-popup__play,
  .content-dialog[data-card="03"] .authored-popup__seek,
  .content-dialog[data-card="03"] .authored-popup__time { display: none; }

  .content-dialog[data-card="03"][data-card-page="1"] .authored-popup__card-three-nav {
    position: absolute;
    z-index: 4;
    left: 36.6%;
    top: 64.8%;
    display: grid;
    gap: 1.4%;
    width: 32%;
    height: 25.2%;
  }

  .authored-popup__card-three-nav button {
    position: relative;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: transparent;
    font-size: 0;
    cursor: pointer;
  }

  .authored-popup__card-three-nav button:focus-visible {
    outline: 2px solid rgba(195, 144, 78, .9);
    outline-offset: 3px;
  }
}

/* 01 / 02 共用同一张居中卡片外壳。02 不再使用整页 SVG 裁切或独立 50vw 尺寸。 */
@media (min-width: 701px) {
  .content-dialog[data-card="02"] .authored-popup__artwork {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* 原 SVG 的音频区是外观参考：白底覆盖后放入真实播放、波形和时间。 */
  .content-dialog[data-card="02"] .authored-popup__audio-mask {
    left: 11.5%;
    top: 82.5%;
    width: 76.8%;
    height: 13.8%;
    background: #fff;
  }

  .content-dialog[data-card="02"] .authored-popup__play {
    left: 13.38%;
    top: 85.24%;
    width: 8.65%;
    border-radius: 18%;
  }

  .content-dialog[data-card="02"] .authored-popup__seek {
    left: 33.1%;
    top: 84.55%;
    width: 51.75%;
    height: 5.2%;
  }

  .content-dialog[data-card="02"] .authored-popup__time {
    top: 91.1%;
    color: #a97832;
    background: #fff;
  }

  .content-dialog[data-card="02"] .authored-popup__time--current { left: 33.1%; }
  .content-dialog[data-card="02"] .authored-popup__time--duration { left: 76.2%; }

  .content-dialog[data-card="02"] .authored-popup__close {
    left: 92.9%;
    top: 2.35%;
    width: 4.72%;
  }
}

.content-dialog[data-card="02"] .authored-popup__play:disabled {
  cursor: default;
  opacity: .72;
}

.card-unavailable-notice {
  position: fixed;
  width: min(390px, calc(100vw - 40px));
  padding: 32px;
  border: 1px solid rgba(211,162,95,.5);
  border-radius: 18px;
  color: #f3eadc;
  background: #100e0b;
  font-family: "Songti SC", "STSong", serif;
}
.card-unavailable-notice::backdrop { background: rgba(6,6,6,.64); backdrop-filter: brightness(.62); }
.card-unavailable-notice small { color: #d3a25f; letter-spacing: .12em; }
.card-unavailable-notice h2 { margin: 12px 0 8px; font-weight: 400; }
.card-unavailable-notice p { margin: 0; color: rgba(243,234,220,.66); }
.card-unavailable-notice > button { position: absolute; top: 12px; right: 14px; border: 0; color: #d3a25f; background: transparent; font-size: 25px; cursor: pointer; }

@media (max-width: 720px) and (orientation: portrait) {
  .transition-console-toggle,
  .transition-console,
  .frame-console-toggle,
  .frame-console,
  .scroll-console-toggle,
  .scroll-console { display: none !important; }
  .film-stage__authored { display: none; }
  .stage-fullscreen { display: none !important; }
  .film-stage__composition { width: 100vw; height: 100dvh; aspect-ratio: auto; }
  .transition-film {
    top: 8%;
    left: 0;
    width: 100vw;
    height: 84%;
    background: #000;
    transform: none;
  }
  .film-timeline { top: 18%; right: 5px; width: 34px; height: 44%; }
  .film-timeline__icon { font-size: 16px; }
  .stage-control-card {
    right: 12px;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 186px;
    height: 104px;
  }
  .stage-play {
    left: 12px;
    top: 11px;
    right: auto;
    bottom: auto;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(160, 92, 0, .86);
    background: rgba(4, 5, 6, .82);
  }
  .stage-control-card__copy { left: 37%; top: 15%; }
  .stage-control-card__copy strong { font-size: 13px; }
  .stage-control-card__copy small { font-size: 9px; }
  .stage-fullscreen {
    left: 16px;
    right: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 78px;
    height: 42px;
    border: 1px solid rgba(214,162,90,.72);
    border-radius: 999px;
    background: rgba(4,5,6,.82);
  }
  .stage-fullscreen span { position: relative; width: 15px; height: 15px; }
  .stage-fullscreen b { display: block; color: #d6a25a; font-size: 12px; font-weight: 500; }
  .stage-last-page {
    right: 5%;
    left: auto;
    bottom: 0;
    width: 90%;
    min-height: 38%;
    padding: 0 4%;
    border: 0;
    border-top: 1px solid rgba(160, 92, 0, .45);
    color: #d0a15c;
    background: transparent;
  }
  .stage-last-page span { color: inherit; }

  .content-dialog[data-card="01"] .authored-popup,
  .content-dialog[data-card="02"] .authored-popup,
  .content-dialog[data-card="03"] .authored-popup {
    width: 100vw;
    height: auto;
    aspect-ratio: 960 / 2079;
    border-radius: 0;
    background: transparent;
  }
  .content-dialog[data-card="01"] .authored-popup__artwork,
  .content-dialog[data-card="02"] .authored-popup__artwork {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .content-dialog[data-card="01"] .authored-popup__close {
    left: 77.3%; top: 8.8%; width: 11.4%;
  }
  .content-dialog[data-card="01"] .authored-popup__audio-mask {
    left: 23.8%; top: 64.1%; width: 61.3%; height: 7.5%; background: #100e0b;
  }
  .content-dialog[data-card="01"] .authored-popup__play {
    left: 25.7%; top: 65.9%; width: 8.4%;
  }
  .content-dialog[data-card="01"] .authored-popup__seek {
    left: 39.4%; top: 65%; width: 44%; height: 4.8%;
    border-radius: 1.2%;
    background: #181510;
  }
  .content-dialog[data-card="01"] .authored-popup__time {
    top: 68.7%; font-size: clamp(9px, 2.7vw, 15px); background: #181510;
  }
  .content-dialog[data-card="01"] .authored-popup__time--current { left: 41.2%; }
  .content-dialog[data-card="01"] .authored-popup__time--duration { left: 76.2%; }

  .content-dialog[data-card="02"] .authored-popup__close {
    left: 77.3%; top: 8.8%; width: 11.4%;
    z-index: 5;
    background: transparent;
  }

  .content-dialog[data-card="02"] .authored-popup__close::before,
  .content-dialog[data-card="02"] .authored-popup__close::after { content: none; }

  .content-dialog[data-card="02"] .authored-popup__audio-mask {
    left: 12.5%;
    top: 57.7%;
    width: 67.5%;
    height: 13.2%;
    background: #fff;
  }

  .content-dialog[data-card="02"] .authored-popup__play {
    left: 46.3%; top: 66%; width: 8%;
  }

  .content-dialog[data-card="02"] .authored-popup__seek {
    left: 14.4%;
    top: 59.3%;
    width: 63.2%;
    height: 4.8%;
    border-radius: 0;
    background: transparent;
  }

  .content-dialog[data-card="02"] .authored-popup__time {
    top: 62.6%;
    font-size: clamp(9px, 2.7vw, 16px);
    background: transparent;
  }

  .content-dialog[data-card="02"] .authored-popup__time--current { left: 14.4%; }
  .content-dialog[data-card="02"] .authored-popup__time--duration {
    left: auto;
    right: 22.4%;
  }

  .content-dialog[data-card="03"] .authored-popup {
    width: min(96vw, calc(72dvh * 2072 / 1745));
    aspect-ratio: 2072 / 1745;
    border-radius: 3.2%;
    background: #fff6e9;
  }
  .content-dialog[data-card="03"] .authored-popup__artwork,
  .content-dialog[data-card="03"] .authored-popup__artwork--next {
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .content-dialog[data-card="03"] .authored-popup__artwork--next { display: block; z-index: 1; opacity: 0; transition: opacity 160ms ease-out; }
  .content-dialog[data-card="03"] .authored-popup__artwork--next.is-visible { opacity: 1; }
  .content-dialog[data-card="03"] .authored-popup__close { left: 92.5%; top: 2.3%; width: 5.2%; }
  .content-dialog[data-card="03"] .authored-popup__audio-mask,
  .content-dialog[data-card="03"] .authored-popup__play,
  .content-dialog[data-card="03"] .authored-popup__seek,
  .content-dialog[data-card="03"] .authored-popup__time { display: none; }
  .content-dialog[data-card="03"][data-card-page="1"] .authored-popup__card-three-nav {
    position: absolute;
    z-index: 4;
    left: 36.6%;
    top: 64.8%;
    display: grid;
    gap: 1.4%;
    width: 32%;
    height: 25.2%;
  }
  .content-dialog[data-card="03"] .authored-popup__card-three-nav button {
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: transparent;
    font-size: 0;
  }
}

body.is-detail-open .end-frame-console,
body.is-detail-open .end-frame-console-toggle,
body.is-detail-open .exhibition-cursor { opacity: 0 !important; pointer-events: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .end-page { padding: 0; }
}

@media (max-width: 720px) and (orientation: portrait) {
  .end-page {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    overflow-x: clip;
    overflow-y: visible;
  }

  .end-frame-console,
  .end-frame-console-toggle,
  .exhibition-cursor {
    display: none !important;
  }

  /* 手机尾页沿用 PC 画板内容与热区，但以视口宽度为唯一缩放基准。
     高度由 3206 × 5390 原画板比例自然产生，通过纵向滚动浏览；
     禁止再按一屏高度放大后裁掉左右两侧。 */
  .end-page__artboard {
    display: block !important;
    position: relative;
    left: 0;
    width: 100vw;
    height: auto;
    margin: 0;
    overflow: hidden;
    transform: none !important;
  }

  .end-page__reference {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .end-page__mobile.pinned-story-track {
    display: none !important;
  }

  body.is-end-ready .mobile-end-stage { display: none; }

  .scroll-console-toggle,
  .scroll-console {
    display: none !important;
  }

  body.is-detail-open .end-page__mobile {
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-end-sheet {
    will-change: auto;
  }
}