:root {
  --ink: #07101c;
  --night: #0b1627;
  --night-2: #13243a;
  --paper: #f8e9bf;
  --paper-dim: #c8c19f;
  --leaf: #8dbf75;
  --leaf-dark: #3f7655;
  --gold: #f0c969;
  --orange: #e98146;
  --sky: #7eb6c6;
  --red: #c8554d;
  --border: rgba(248, 233, 191, 0.24);
  --pixel-shadow: 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--paper);
  background:
    radial-gradient(circle at 50% 0%, rgba(65, 108, 117, 0.22), transparent 34rem),
    linear-gradient(180deg, var(--night) 0%, var(--ink) 100%);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.noise {
  position: fixed;
  z-index: 100;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.pixel-stars {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    radial-gradient(circle, var(--paper) 0 1px, transparent 1px),
    radial-gradient(circle, var(--gold) 0 1px, transparent 1px);
  background-position: 0 0, 37px 61px;
  background-size: 91px 91px, 137px 137px;
}

.boot {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom));
  background:
    linear-gradient(rgba(7, 16, 28, 0.93), rgba(7, 16, 28, 0.97)),
    url("assets/1-lg.webp") center / cover;
  transition: opacity 700ms steps(7), visibility 700ms;
}

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

.boot::before {
  inset: 18px;
  border: 1px solid rgba(248, 233, 191, 0.3);
  box-shadow: inset 0 0 0 5px rgba(7, 16, 28, 0.8), inset 0 0 0 6px rgba(126, 182, 198, 0.3);
}

.boot::after {
  inset: 0;
  opacity: 0.16;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 4px);
}

.boot.is-gone {
  opacity: 0;
  visibility: hidden;
}

.boot__window {
  position: relative;
  z-index: 1;
  width: min(1000px, 100%);
  text-align: center;
}

.boot__eyebrow,
.chapter-kicker,
.scene-label,
.hud,
.gallery-console,
.video-section__copy > span,
.next-file__label,
.boot__code {
  font-family: Consolas, "Courier New", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.boot__eyebrow {
  color: var(--gold);
  font-size: 12px;
}

.boot h1 {
  margin: 24px 0 18px;
  color: var(--paper);
  font-family: "SimHei", sans-serif;
  font-size: clamp(42px, 8vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.07em;
  text-shadow: 4px 4px 0 var(--leaf-dark), 8px 8px 0 rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.mobile-break {
  display: none;
}

.boot p {
  margin: 0 auto 34px;
  color: var(--paper-dim);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(16px, 2.4vw, 22px);
  line-height: 1.8;
}

.loadbar {
  height: 14px;
  padding: 3px;
  border: 1px solid rgba(248, 233, 191, 0.55);
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
}

.loadbar span {
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--leaf) 0 10px, var(--gold) 10px 12px);
  transition: width 220ms steps(5);
}

.boot__status {
  display: flex;
  justify-content: space-between;
  margin: 9px 0 28px;
  color: var(--sky);
  font-family: Consolas, monospace;
  font-size: 11px;
}

.pixel-button {
  position: relative;
  min-width: 188px;
  padding: 15px 24px;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font-weight: 900;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--orange), 5px 5px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 -3px 0 var(--ink);
  transition: transform 120ms steps(2), box-shadow 120ms steps(2);
}

.pixel-button:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--orange), 5px 8px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 -3px 0 var(--ink);
}

.pixel-button:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--orange), 3px 1px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 -3px 0 var(--ink);
}

.pixel-button:disabled {
  opacity: 0.45;
  cursor: wait;
}

.button-icon {
  margin-right: 8px;
  color: var(--leaf-dark);
}

.boot small {
  display: block;
  margin-top: 19px;
  color: rgba(248, 233, 191, 0.54);
  font-size: 11px;
}

.boot__code {
  position: absolute;
  right: 30px;
  bottom: 27px;
  color: rgba(248, 233, 191, 0.38);
  font-size: 9px;
}

.hud {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: max(12px, env(safe-area-inset-top)) 24px 10px;
  color: rgba(248, 233, 191, 0.66);
  font-size: 10px;
  background: linear-gradient(180deg, rgba(7, 16, 28, 0.92), transparent);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: 500ms ease;
}

body.has-entered .hud {
  opacity: 1;
  transform: translateY(0);
}

.hud a,
.hud button {
  pointer-events: auto;
}

.hud__brand {
  justify-self: start;
  color: inherit;
  text-decoration: none;
}

.hud__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  background: var(--leaf);
  box-shadow: 0 0 10px var(--leaf);
}

.hud__chapter {
  justify-self: center;
  color: var(--gold);
}

.sound-button {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-self: end;
  padding: 7px 10px;
  border: 1px solid rgba(248, 233, 191, 0.24);
  background: rgba(7, 16, 28, 0.62);
  color: var(--paper);
  cursor: pointer;
}

.sound-bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 12px;
}

.sound-bars i {
  display: block;
  width: 2px;
  background: var(--leaf);
  animation: sound 650ms steps(3) infinite alternate;
}

.sound-bars i:nth-child(1) { height: 5px; }
.sound-bars i:nth-child(2) { height: 11px; animation-delay: -180ms; }
.sound-bars i:nth-child(3) { height: 8px; animation-delay: -360ms; }

.sound-button[aria-pressed="false"] .sound-bars i {
  height: 2px;
  animation: none;
  background: var(--red);
}

@keyframes sound {
  to { height: 3px; }
}

main,
.story-section {
  position: relative;
  z-index: 1;
}

.story-section {
  min-height: 100svh;
}

.prologue {
  display: grid;
  place-items: center;
  min-height: 125svh;
  padding: 110px 5vw 90px;
  overflow: hidden;
}

.photo-wash,
.video-card__blur {
  position: absolute;
  inset: -50px;
  overflow: hidden;
}

.photo-wash::after,
.video-card__blur::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 16, 28, 0.74), rgba(7, 16, 28, 0.97));
}

.photo-wash img,
.video-card__blur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(38px) saturate(0.78);
  transform: scale(1.08);
}

.prologue__content {
  width: min(1180px, 100%);
}

.scene-label {
  display: flex;
  justify-content: space-between;
  width: min(980px, 100%);
  margin: 0 auto 11px;
  color: var(--gold);
  font-size: 10px;
}

.pixel-frame {
  position: relative;
  border: 1px solid rgba(248, 233, 191, 0.48);
  background: rgba(7, 16, 28, 0.82);
  box-shadow:
    0 0 0 5px var(--ink),
    0 0 0 6px rgba(126, 182, 198, 0.35),
    16px 18px 0 rgba(0, 0, 0, 0.25);
}

.pixel-frame::before,
.pixel-frame::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 13px;
  height: 13px;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--ink);
}

.pixel-frame::before { top: -5px; left: -5px; }
.pixel-frame::after { right: -5px; bottom: -5px; }

.hero-photo {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 8px;
}

.hero-photo img {
  width: 100%;
  max-height: 68svh;
  object-fit: contain;
}

.prologue__copy {
  width: min(760px, 100%);
  margin: 45px auto 0;
  text-align: center;
}

.prologue__copy p {
  margin: 7px 0;
  color: var(--paper-dim);
  font-size: clamp(14px, 1.7vw, 18px);
  line-height: 1.8;
}

.prologue__copy .lead {
  margin-bottom: 22px;
  color: var(--paper);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(27px, 4.5vw, 52px);
}

.scroll-cue {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: fit-content;
  margin: 55px auto 0;
  color: rgba(248, 233, 191, 0.58);
  font-family: Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-decoration: none;
}

.scroll-cue i {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  animation: fall 1.1s steps(4) infinite;
}

@keyframes fall {
  50% { transform: translateY(8px) rotate(45deg); opacity: 0.35; }
}

.chapter-intro {
  display: grid;
  align-content: center;
  min-height: 105svh;
  padding: 100px 8vw;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 30%, rgba(233, 129, 70, 0.16), transparent 28rem),
    linear-gradient(135deg, #101d2c, #08111d 68%);
}

.chapter-intro__grid {
  position: absolute;
  inset: 0;
  opacity: 0.13;
  background-image:
    linear-gradient(rgba(248, 233, 191, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248, 233, 191, 0.22) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent, #000, transparent);
}

.chapter-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(18px, 4vw, 54px);
  align-items: center;
  width: min(1050px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 62px);
  border: 1px solid rgba(248, 233, 191, 0.26);
  background: rgba(11, 22, 39, 0.62);
  box-shadow: inset 0 0 0 7px rgba(7, 16, 28, 0.82), 12px 12px 0 rgba(0, 0, 0, 0.23);
  clip-path: polygon(0 16px, 16px 16px, 16px 0, calc(100% - 16px) 0, calc(100% - 16px) 16px, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 16px calc(100% - 16px), 0 calc(100% - 16px));
}

.chapter-card__number {
  color: var(--orange);
  font-family: Consolas, monospace;
  font-size: clamp(70px, 12vw, 152px);
  font-weight: 900;
  line-height: 0.8;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
}

.chapter-kicker {
  color: var(--gold);
  font-size: 11px;
}

.chapter-card h2 {
  margin: 12px 0 0;
  font-family: "SimHei", sans-serif;
  font-size: clamp(42px, 8vw, 92px);
  line-height: 1;
  letter-spacing: -0.08em;
}

.chapter-card__status {
  display: grid;
  gap: 8px;
  padding: 15px;
  border-left: 3px solid var(--leaf);
  color: var(--paper-dim);
  font: 10px Consolas, monospace;
}

.chapter-card__status b {
  color: var(--leaf);
  font-size: 18px;
}

.chapter-copy {
  width: min(850px, 100%);
  margin: 55px auto 0;
  text-align: center;
}

.chapter-copy p {
  margin: 8px 0;
  color: var(--paper-dim);
  font-size: clamp(16px, 2.2vw, 23px);
}

.chapter-copy .destination {
  margin-top: 22px;
  color: var(--paper);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(25px, 4vw, 44px);
}

.gallery-story {
  height: 700svh;
  background: #050b13;
}

.gallery-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.gallery-heading {
  position: absolute;
  z-index: 12;
  top: max(76px, calc(env(safe-area-inset-top) + 64px));
  left: 5vw;
}

.gallery-heading span {
  color: var(--gold);
  font: 10px Consolas, monospace;
  letter-spacing: 0.17em;
}

.gallery-heading p {
  margin: 6px 0 0;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(17px, 2vw, 25px);
}

.memory-stack,
.memory {
  position: absolute;
  inset: 0;
}

.memory {
  display: grid;
  place-items: center;
  padding: 145px 5vw 100px;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  transition: opacity 420ms steps(7), transform 700ms cubic-bezier(.18,.74,.16,1), visibility 420ms;
}

.memory.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.memory__blur {
  position: absolute;
  inset: -40px;
  overflow: hidden;
}

.memory__blur::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 11, 19, 0.62);
  backdrop-filter: saturate(0.75);
}

.memory__blur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(38px) brightness(0.72);
  transform: scale(1.09);
}

.memory__photo {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: min(1180px, 88vw);
  height: auto;
  max-height: 67svh;
  object-fit: contain;
  border: 6px solid rgba(7, 16, 28, 0.92);
  outline: 1px solid rgba(248, 233, 191, 0.36);
  box-shadow: 18px 22px 0 rgba(0, 0, 0, 0.35);
}

.memory.is-active .memory__photo {
  animation: memory-in 520ms steps(8) both;
}

@keyframes memory-in {
  from { clip-path: inset(0 100% 0 0); filter: brightness(1.5); }
  to { clip-path: inset(0); filter: brightness(1); }
}

.gallery-console {
  position: absolute;
  z-index: 15;
  right: 5vw;
  bottom: max(32px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: auto minmax(80px, 170px) auto;
  gap: 13px;
  align-items: center;
  padding: 10px 13px;
  border: 1px solid rgba(248, 233, 191, 0.25);
  background: rgba(5, 11, 19, 0.74);
  font-size: 9px;
  backdrop-filter: blur(10px);
}

.archive-id {
  display: flex;
  gap: 7px;
  align-items: baseline;
}

.archive-id span { color: var(--paper-dim); }
.archive-id b { color: var(--gold); font-size: 15px; }

.pixel-progress {
  height: 5px;
  background: rgba(248, 233, 191, 0.15);
}

.pixel-progress span {
  display: block;
  width: 16.666%;
  height: 100%;
  background: var(--leaf);
  transition: width 350ms steps(6);
}

.archive-total { color: var(--sky); }

.gallery-tip {
  position: absolute;
  z-index: 15;
  bottom: max(40px, env(safe-area-inset-bottom));
  left: 5vw;
  color: rgba(248, 233, 191, 0.45);
  font: 9px Consolas, monospace;
  letter-spacing: 0.12em;
}

.video-section {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.4fr);
  gap: 7vw;
  align-items: center;
  min-height: 110svh;
  padding: 110px 8vw;
  background:
    radial-gradient(circle at 70% 50%, rgba(126, 182, 198, 0.13), transparent 28rem),
    #091321;
}

.video-section__copy > span {
  color: var(--orange);
  font-size: 10px;
}

.video-section__copy h2 {
  margin: 18px 0 22px;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(32px, 5vw, 68px);
  line-height: 1.35;
  font-weight: 500;
}

.video-section__copy p {
  color: var(--paper-dim);
  font: 11px Consolas, monospace;
}

.video-card {
  position: relative;
  width: 100%;
  min-height: min(58vw, 620px);
  padding: 10px;
  overflow: hidden;
  border: 0;
  cursor: pointer;
}

.video-card > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: 66svh;
  object-fit: contain;
}

.video-card__blur::after {
  background: rgba(7, 16, 28, 0.45);
}

.video-card__play {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 18px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 900;
  transform: translate(-50%, -50%);
  box-shadow: 5px 5px 0 var(--orange), -3px -3px 0 var(--ink);
  transition: 180ms steps(3);
}

.video-card:hover .video-card__play {
  transform: translate(-50%, calc(-50% - 5px));
  box-shadow: 5px 10px 0 var(--orange), -3px -3px 0 var(--ink);
}

.video-card__play i {
  color: var(--leaf-dark);
  font-style: normal;
}

.video-card__stamp {
  position: absolute;
  z-index: 4;
  top: 24px;
  right: 24px;
  color: var(--red);
  font: 11px Consolas, monospace;
}

.to-be-continued {
  display: grid;
  place-items: center;
  padding: 80px 22px;
  text-align: center;
  background:
    linear-gradient(rgba(7, 16, 28, 0.92), rgba(7, 16, 28, 0.98)),
    url("assets/7-lg.webp") center / cover;
}

.next-file {
  width: min(650px, 100%);
}

.next-file__label {
  color: var(--orange);
  font-size: 10px;
}

.next-file p {
  margin: 20px 0 30px;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(23px, 4vw, 38px);
}

.next-file__bar {
  height: 10px;
  margin-bottom: 18px;
  padding: 2px;
  border: 1px solid var(--paper-dim);
}

.next-file__bar span {
  display: block;
  width: 12%;
  height: 100%;
  background: var(--orange);
  animation: pending 1.6s steps(5) infinite alternate;
}

@keyframes pending {
  to { width: 78%; }
}

.next-file b {
  display: block;
  color: var(--gold);
  font: 15px Consolas, monospace;
}

.next-file small {
  display: block;
  margin-top: 28px;
  color: rgba(248, 233, 191, 0.46);
  font-size: 11px;
}

.video-dialog {
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  padding: 10px;
  border: 1px solid rgba(248, 233, 191, 0.42);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 0 0 7px rgba(7, 16, 28, 0.88), 0 30px 90px #000;
}

.video-dialog::backdrop {
  background: rgba(3, 7, 12, 0.9);
  backdrop-filter: blur(14px);
}

.video-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 5px 12px;
  color: var(--gold);
  font: 10px Consolas, monospace;
  letter-spacing: 0.14em;
}

.video-dialog__head button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(248, 233, 191, 0.35);
  background: transparent;
  color: var(--paper);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

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

.video-stage {
  position: relative;
  min-height: 120px;
  background: #000;
}

.video-dialog > p {
  margin: 12px 5px 4px;
  color: var(--paper-dim);
  font-size: 12px;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms steps(8), transform 800ms cubic-bezier(.2,.76,.2,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 760px) {
  .mobile-break { display: block; }

  .boot h1 {
    letter-spacing: -0.09em;
    white-space: normal;
  }

  .hud {
    grid-template-columns: 1fr auto;
    padding-inline: 14px;
  }

  .hud__chapter { display: none; }
  .sound-button { padding: 7px; }
  #sound-label { display: none; }

  .prologue {
    min-height: 112svh;
    padding-inline: 18px;
  }

  .scene-label { font-size: 8px; }

  .hero-photo img {
    max-height: 55svh;
  }

  .chapter-intro {
    padding-inline: 20px;
  }

  .chapter-card {
    grid-template-columns: auto 1fr;
  }

  .chapter-card__number {
    font-size: 58px;
  }

  .chapter-card__status {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-top: 1px solid rgba(248, 233, 191, 0.2);
    border-left: 0;
    text-align: center;
  }

  .gallery-heading {
    top: 72px;
    left: 18px;
  }

  .memory {
    padding: 130px 18px 120px;
  }

  .memory__photo {
    max-width: calc(100vw - 36px);
    max-height: 62svh;
    border-width: 4px;
    box-shadow: 9px 12px 0 rgba(0, 0, 0, 0.36);
  }

  .gallery-console {
    right: 18px;
    bottom: 30px;
    grid-template-columns: auto 72px auto;
  }

  .gallery-tip {
    bottom: 78px;
    left: 18px;
  }

  .video-section {
    grid-template-columns: 1fr;
    gap: 35px;
    padding: 100px 20px 85px;
  }

  .video-card {
    min-height: 56vw;
  }

  .video-card__play {
    white-space: nowrap;
  }
}

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

/* 520 秘密档案：浅冰蓝网格、灰蓝绿界面、珊瑚粉强调 */
:root {
  --ink: #23434c;
  --night: #e6f6f7;
  --night-2: #cfe9eb;
  --paper: #fffaf2;
  --paper-dim: #5c7479;
  --leaf: #75b9ad;
  --leaf-dark: #456f77;
  --gold: #ff9c86;
  --orange: #f1846f;
  --sky: #7fbcc4;
  --red: #e45f5f;
  --border: rgba(69, 111, 119, 0.28);
}

html {
  background: #e6f6f7;
}

body {
  color: var(--ink);
  background-color: #e6f6f7;
  background-image:
    linear-gradient(rgba(92, 147, 154, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 147, 154, 0.13) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(255, 156, 134, 0.2), transparent 34rem);
  background-size: 18px 18px, 18px 18px, auto;
}

.noise {
  opacity: 0.055;
  mix-blend-mode: multiply;
}

.pixel-stars {
  opacity: 0.16;
  background-image:
    radial-gradient(circle, var(--leaf-dark) 0 1px, transparent 1px),
    radial-gradient(circle, var(--gold) 0 1px, transparent 1px);
}

.boot {
  background:
    linear-gradient(rgba(226, 245, 247, 0.9), rgba(239, 249, 247, 0.96)),
    url("assets/1-lg.webp") center / cover;
}

.boot::before {
  border-color: rgba(69, 111, 119, 0.48);
  box-shadow: inset 0 0 0 5px rgba(239, 249, 247, 0.82), inset 0 0 0 6px rgba(255, 156, 134, 0.72);
}

.boot::after {
  opacity: 0.09;
}

.boot__eyebrow,
.chapter-kicker,
.scene-label,
.gallery-heading span,
.video-dialog__head {
  color: var(--orange);
}

.boot h1 {
  color: var(--ink);
  text-shadow: 4px 4px 0 #a9d9da, 8px 8px 0 rgba(255, 156, 134, 0.68);
}

.boot p,
.prologue__copy p,
.chapter-copy p,
.video-section__copy p,
.video-dialog > p {
  color: var(--paper-dim);
}

.loadbar {
  border-color: rgba(35, 67, 76, 0.62);
  background: rgba(255, 250, 242, 0.72);
  box-shadow: 3px 3px 0 rgba(69, 111, 119, 0.32);
}

.loadbar span {
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, #ffd3c6 10px 12px);
}

.boot__status {
  color: var(--leaf-dark);
}

.pixel-button {
  background: #fffaf2;
  color: var(--ink);
  box-shadow: 0 5px 0 var(--orange), 5px 5px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 -3px 0 var(--ink);
}

.boot small,
.boot__code {
  color: rgba(35, 67, 76, 0.58);
}

.hud {
  color: rgba(255, 250, 242, 0.92);
  background: rgba(69, 111, 119, 0.96);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 4px 0 rgba(35, 67, 76, 0.12);
}

.hud__chapter {
  color: #ffd2c6;
}

.sound-button {
  border-color: rgba(255, 250, 242, 0.5);
  background: rgba(35, 67, 76, 0.36);
  color: #fffaf2;
}

.photo-wash::after {
  background: linear-gradient(180deg, rgba(226, 245, 247, 0.72), rgba(230, 246, 247, 0.96));
}

.photo-wash img,
.video-card__blur img {
  filter: blur(38px) saturate(0.95) brightness(1.08);
}

.pixel-frame {
  border-color: rgba(69, 111, 119, 0.52);
  background: rgba(255, 250, 242, 0.88);
  box-shadow:
    0 0 0 5px #f4fbf9,
    0 0 0 6px rgba(69, 111, 119, 0.52),
    16px 18px 0 rgba(255, 156, 134, 0.4);
}

.pixel-frame::before,
.pixel-frame::after {
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--ink);
}

.prologue__copy .lead,
.chapter-copy .destination {
  color: var(--ink);
}

.scroll-cue {
  color: rgba(35, 67, 76, 0.62);
}

.chapter-intro {
  background-color: #dff2f3;
  background-image:
    linear-gradient(rgba(92, 147, 154, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 147, 154, 0.13) 1px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(255, 156, 134, 0.25), transparent 28rem);
  background-size: 18px 18px, 18px 18px, auto;
}

.chapter-intro__grid {
  opacity: 0.18;
}

.chapter-card {
  border-color: rgba(69, 111, 119, 0.42);
  background: rgba(250, 255, 252, 0.8);
  box-shadow: inset 0 0 0 7px rgba(230, 246, 247, 0.82), 12px 12px 0 rgba(255, 156, 134, 0.42);
}

.chapter-card__number {
  color: var(--orange);
  text-shadow: 5px 5px 0 rgba(117, 185, 173, 0.34);
}

.chapter-card__status {
  color: var(--paper-dim);
}

.gallery-story {
  background: #deeff1;
}

.memory__blur::after {
  background: rgba(226, 245, 247, 0.84);
  backdrop-filter: saturate(0.9);
}

.memory__blur img {
  filter: blur(38px) brightness(1.06) saturate(0.9);
}

.memory__photo {
  border-color: rgba(255, 250, 242, 0.96);
  outline-color: rgba(69, 111, 119, 0.55);
  box-shadow: 18px 22px 0 rgba(255, 156, 134, 0.42);
}

.gallery-console {
  border-color: rgba(69, 111, 119, 0.45);
  background: rgba(250, 255, 252, 0.88);
  color: var(--ink);
  box-shadow: 5px 5px 0 rgba(69, 111, 119, 0.18);
}

.archive-id span,
.gallery-tip {
  color: rgba(35, 67, 76, 0.62);
}

.pixel-progress {
  background: rgba(69, 111, 119, 0.16);
}

.video-section {
  background-color: #edf8f6;
  background-image:
    linear-gradient(rgba(92, 147, 154, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 147, 154, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 70% 50%, rgba(255, 156, 134, 0.22), transparent 28rem);
  background-size: 18px 18px, 18px 18px, auto;
}

.video-card__blur::after {
  background: rgba(226, 245, 247, 0.58);
}

.to-be-continued {
  background:
    linear-gradient(rgba(226, 245, 247, 0.86), rgba(238, 249, 247, 0.96)),
    url("assets/7-lg.webp") center / cover;
}

.next-file__bar {
  border-color: var(--leaf-dark);
}

.next-file small {
  color: rgba(35, 67, 76, 0.58);
}

@media (max-width: 760px) {
  .chapter-card__status {
    border-top-color: rgba(69, 111, 119, 0.24);
  }

  .memory__photo {
    box-shadow: 9px 12px 0 rgba(255, 156, 134, 0.42);
  }
}

/* 后续章节 */
.section-heading {
  width: min(1120px, 100%);
  margin: 0 auto 54px;
}

.section-heading span,
.record-card header span,
.action-record__meta,
.homestay-record header span,
.cheers-record header span,
.finale__eyebrow {
  color: var(--orange);
  font: 10px Consolas, "Courier New", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section-heading h2 {
  margin: 13px 0 9px;
  font-family: "SimHei", sans-serif;
  font-size: clamp(34px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.06em;
}

.section-heading p {
  margin: 0;
  color: var(--paper-dim);
}

.chapter-intro--02 {
  background-color: #e5f4f3;
}

.chapter-intro--03 {
  background-color: #f8eee2;
}

.chapter-intro--04 {
  background-color: #e8f3ef;
}

.chapter-intro--05 {
  background-color: #f6eee7;
}

.install-line {
  width: min(760px, 90vw);
  margin: 52px auto 0;
  color: var(--ink);
  text-align: center;
}

.install-line span {
  display: block;
  height: 12px;
  margin-bottom: 17px;
  border: 1px solid var(--leaf-dark);
  background: repeating-linear-gradient(90deg, var(--orange) 0 52px, #ffd5c9 52px 56px);
  box-shadow: 4px 4px 0 rgba(69, 111, 119, 0.2);
}

.install-line b {
  font: 13px Consolas, monospace;
  letter-spacing: 0.08em;
}

.identity-lab,
.record-section,
.action-logs,
.homestay-logs {
  padding: 120px 7vw;
}

.identity-lab {
  background:
    linear-gradient(rgba(230, 246, 247, 0.82), rgba(230, 246, 247, 0.94)),
    linear-gradient(135deg, rgba(117, 185, 173, 0.3), rgba(255, 156, 134, 0.2));
}

.identity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 42px);
  width: min(1120px, 100%);
  margin: 0 auto;
}

.identity-card {
  position: relative;
  margin: 0;
  padding: 34px 14px 14px;
  border: 1px solid rgba(69, 111, 119, 0.55);
  background: rgba(255, 250, 242, 0.82);
  box-shadow: 9px 10px 0 rgba(255, 156, 134, 0.35);
}

.identity-card:nth-child(even) {
  transform: translateY(32px);
  box-shadow: 9px 10px 0 rgba(117, 185, 173, 0.42);
}

.identity-card span {
  position: absolute;
  top: 11px;
  left: 14px;
  color: var(--leaf-dark);
  font: 9px Consolas, monospace;
  letter-spacing: 0.14em;
}

.identity-card img {
  width: 100%;
  height: 330px;
  object-fit: contain;
  background: #eff8f6;
}

.identity-result,
.chapter-exit {
  display: grid;
  gap: 8px;
  width: min(760px, 100%);
  margin: 76px auto 0;
  padding: 20px 24px;
  border: 1px solid rgba(69, 111, 119, 0.42);
  background: rgba(255, 250, 242, 0.86);
  color: var(--ink);
  box-shadow: 7px 8px 0 rgba(255, 156, 134, 0.32);
  text-align: center;
}

.identity-result span,
.chapter-exit span {
  color: var(--paper-dim);
  font: 11px Consolas, monospace;
}

.identity-result b,
.chapter-exit b {
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(22px, 3vw, 34px);
}

.record-section {
  display: grid;
  gap: 90px;
  background-color: #f9f2e9;
  background-image:
    linear-gradient(rgba(183, 132, 104, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183, 132, 104, 0.09) 1px, transparent 1px);
  background-size: 22px 22px;
}

.record-card {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 52px);
  border: 1px solid rgba(69, 111, 119, 0.34);
  background: rgba(255, 252, 246, 0.84);
  box-shadow: 12px 14px 0 rgba(69, 111, 119, 0.13);
}

.record-card:nth-child(even) {
  transform: translateX(4vw);
}

.record-card header,
.homestay-record header,
.cheers-record header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(69, 111, 119, 0.24);
}

.record-card h3,
.action-record h3,
.homestay-record h3,
.cheers-record h3 {
  margin: 0 0 14px;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 500;
}

.photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
}

.photo-quad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.photo-quad img {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
  border: 5px solid #fffaf2;
  outline: 1px solid rgba(69, 111, 119, 0.34);
  background: rgba(207, 233, 235, 0.4);
}

.photo-pair img {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  background: rgba(207, 233, 235, 0.4);
  border: 5px solid #fffaf2;
  outline: 1px solid rgba(69, 111, 119, 0.34);
}

.photo-pair--polaroid img:last-child {
  transform: rotate(2deg);
}

.record-caption {
  margin: 30px 0 0;
  color: var(--paper-dim);
  font-size: clamp(20px, 3vw, 34px);
  line-height: 1.35;
  text-align: center;
}

.record-caption b {
  color: var(--ink);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 1.35em;
}

.action-logs {
  display: grid;
  gap: 120px;
  background: #eaf6f4;
}

.action-record {
  position: relative;
  width: min(1080px, 100%);
  margin: 0 auto;
  padding-left: clamp(22px, 5vw, 76px);
  border-left: 6px solid var(--orange);
}

.action-record--reverse {
  border-right: 6px solid var(--leaf);
  border-left: 0;
  padding-right: clamp(22px, 5vw, 76px);
  padding-left: 0;
}

.action-record__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 13px;
}

.action-record__meta b {
  padding: 4px 8px;
  background: var(--ink);
  color: #fffaf2;
}

.action-record > p {
  width: min(780px, 100%);
  margin: 28px 0 0;
  color: var(--ink);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(20px, 3vw, 34px);
  line-height: 1.55;
}

.action-record--reverse > p {
  margin-left: auto;
  text-align: right;
}

.photo-pair--sport {
  grid-template-columns: 1.5fr 1fr;
}

.retro-screen {
  position: relative;
  padding: 18px 18px 70px;
  border: 8px solid var(--ink);
  background: #182c32;
  box-shadow: 12px 14px 0 var(--gold);
}

.retro-screen img {
  width: 100%;
  max-height: 70svh;
  object-fit: contain;
  image-rendering: pixelated;
  background: #0d1c20;
}

.retro-screen > div {
  position: absolute;
  right: 20px;
  bottom: 17px;
  left: 20px;
  display: flex;
  justify-content: space-between;
  color: #c6ebe3;
  font: 11px Consolas, monospace;
}

.retro-screen b {
  color: var(--gold);
}

.single-photo {
  padding: 10px;
  border: 1px solid rgba(69, 111, 119, 0.42);
  background: #fffaf2;
  box-shadow: 13px 15px 0 rgba(255, 156, 134, 0.34);
}

.single-photo img {
  width: 100%;
  max-height: 78svh;
  object-fit: contain;
}

.orange-sea {
  border-left-color: #efa27d;
}

.homestay-logs {
  display: grid;
  gap: 130px;
  background-color: #f8f0e7;
  background-image:
    linear-gradient(rgba(69, 111, 119, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69, 111, 119, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
}

.homestay-record,
.cheers-record {
  width: min(1050px, 100%);
  margin: 0 auto;
}

.portrait-photo {
  display: grid;
  place-items: center;
  min-height: 50svh;
  padding: 18px;
  background: rgba(207, 233, 235, 0.55);
  border: 1px solid rgba(69, 111, 119, 0.42);
  box-shadow: 12px 13px 0 rgba(117, 185, 173, 0.28);
}

.portrait-photo img {
  width: auto;
  max-width: 100%;
  max-height: 75svh;
  object-fit: contain;
}

.homestay-record > p {
  margin: 24px 0 0;
  color: var(--paper-dim);
  font-size: 18px;
  text-align: center;
}

.market-sequence {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 35px;
  align-items: center;
}

.market-sequence figure {
  position: relative;
  margin: 0;
}

.market-sequence img {
  width: 100%;
  max-height: 70svh;
  object-fit: contain;
  border: 7px solid #fffaf2;
  outline: 1px solid rgba(69, 111, 119, 0.34);
}

.market-sequence figcaption {
  margin-top: 15px;
  color: var(--orange);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(32px, 5vw, 64px);
  text-align: center;
}

.market-sequence .market-caption {
  color: var(--ink);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(21px, 3vw, 34px);
}

.speech-bubble {
  position: absolute;
  z-index: 2;
  top: -22px;
  right: -18px;
  padding: 11px 16px;
  background: var(--ink);
  color: #fffaf2;
  font: 13px Consolas, monospace;
  box-shadow: 5px 5px 0 var(--gold);
  transform: rotate(3deg);
}

.prep-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr 0.75fr;
  gap: 14px;
  align-items: center;
}

.prep-grid img {
  width: 100%;
  max-height: 62svh;
  object-fit: contain;
  border: 5px solid #fffaf2;
  outline: 1px solid rgba(69, 111, 119, 0.3);
}

.system-note {
  display: grid;
  gap: 6px;
  margin-bottom: 28px;
  padding: 16px 18px;
  border-left: 4px solid var(--leaf);
  background: rgba(207, 233, 235, 0.48);
  color: var(--paper-dim);
}

.system-note b {
  color: var(--ink);
}

.specific-caption,
.cheers-copy {
  margin: 24px 0 0;
  color: var(--ink);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(19px, 2.5vw, 30px);
  text-align: center;
}

.cheers-copy {
  margin-top: 34px;
}

.inline-video {
  display: block;
  margin: 28px auto 0;
  padding: 13px 18px;
  border: 1px solid var(--ink);
  background: #fffaf2;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--orange);
}

.inline-video span {
  margin-right: 8px;
  color: var(--orange);
}

.cheers-record {
  min-height: 115svh;
  padding-top: 10svh;
}

.cheers-photo {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 72svh;
  margin: 0;
  padding: 20px 20px 60px;
  border: 1px solid rgba(69, 111, 119, 0.48);
  background: #fffaf2;
  box-shadow: 16px 18px 0 rgba(255, 156, 134, 0.4);
}

.cheers-photo img {
  width: auto;
  max-width: 100%;
  max-height: 75svh;
  object-fit: contain;
}

.cheers-photo figcaption {
  position: absolute;
  right: 20px;
  bottom: 18px;
  color: var(--leaf-dark);
  font: 10px Consolas, monospace;
  letter-spacing: 0.13em;
}

.save-summary {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 90px 24px;
  overflow: hidden;
  background-color: #7fa6a8;
  background-image:
    linear-gradient(rgba(35, 67, 76, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 67, 76, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 18% 16%, rgba(255, 196, 179, 0.36), transparent 25rem),
    radial-gradient(circle at 82% 70%, rgba(188, 229, 215, 0.26), transparent 30rem),
    linear-gradient(180deg, #dcefed 0%, #9fc3c1 42%, #557d82 72%, #23434c 100%);
  background-size: 24px 24px, 24px 24px, auto, auto, auto;
  color: #fffaf2;
  isolation: isolate;
}

.save-summary::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 250, 242, 0.04), rgba(7, 16, 28, 0.14)),
    radial-gradient(ellipse at center, transparent 42%, rgba(23, 52, 60, 0.2) 100%);
  content: "";
  opacity: 1;
}

.save-summary__panel {
  width: min(700px, 100%);
  padding: clamp(22px, 5vw, 48px);
  border: 1px solid rgba(255, 250, 242, 0.34);
  background: rgba(23, 52, 60, 0.78);
  box-shadow: 10px 12px 0 rgba(255, 156, 134, 0.5);
  backdrop-filter: blur(5px);
}

.save-summary__chapters {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.save-summary__chapters li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 4px;
  border-bottom: 1px dashed rgba(255, 250, 242, 0.27);
  font-family: "SimHei", sans-serif;
  font-size: clamp(16px, 3.5vw, 24px);
  opacity: 0;
  transform: translateY(12px);
}

.save-summary.is-visible .save-summary__chapters li {
  animation: save-row-in 420ms steps(4) forwards;
}

.save-summary.is-visible .save-summary__chapters li:nth-child(1) { animation-delay: 320ms; }
.save-summary.is-visible .save-summary__chapters li:nth-child(2) { animation-delay: 560ms; }
.save-summary.is-visible .save-summary__chapters li:nth-child(3) { animation-delay: 800ms; }
.save-summary.is-visible .save-summary__chapters li:nth-child(4) { animation-delay: 1040ms; }
.save-summary.is-visible .save-summary__chapters li:nth-child(5) { animation-delay: 1280ms; }

.save-summary__chapters span {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.save-summary__chapters b {
  color: #ffd2c6;
  font: 13px Consolas, monospace;
}

.save-summary__chapters em {
  color: #bce5d7;
  font: 11px Consolas, monospace;
  font-style: normal;
  letter-spacing: 0.12em;
}

.save-summary__result {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 3px double rgba(255, 250, 242, 0.46);
  opacity: 0;
  transform: translateY(10px);
}

.save-summary.is-visible .save-summary__result {
  animation: save-row-in 520ms steps(5) 1.62s forwards;
}

.save-summary__result p {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 11px 0 0;
  font: 12px Consolas, monospace;
  letter-spacing: 0.06em;
}

.save-summary__result strong {
  color: #ffd2c6;
  font-weight: 400;
}

@keyframes save-row-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.finale {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 100px 24px;
  overflow: hidden;
  background:
    linear-gradient(rgba(35, 67, 76, 0.91), rgba(23, 52, 60, 0.97)),
    url("assets/36-lg.webp") center / cover;
  color: #fffaf2;
}

#fireworks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.finale__content {
  z-index: 2;
  width: min(1120px, 100%);
  text-align: center;
}

.finale__eyebrow {
  color: #ffd2c6;
}

.final-line-button {
  display: block;
  margin: 30px auto 0;
  padding: 17px 26px;
  border: 1px solid rgba(255, 250, 242, 0.72);
  background: transparent;
  color: #fffaf2;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--orange);
  transition: 180ms steps(3);
}

.final-line-button:hover {
  transform: translateY(-4px);
  box-shadow: 5px 9px 0 var(--orange);
}

.final-line-button.is-open {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px);
}

.final-line {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.35;
  text-shadow: 4px 4px 0 rgba(255, 156, 134, 0.55);
  transform: translateY(28px);
  transition: opacity 900ms steps(9), transform 900ms ease, max-height 900ms ease;
  white-space: nowrap;
}

.final-line.is-open {
  max-height: 220px;
  opacity: 1;
  transform: translateY(0);
}

.finale__content small {
  display: block;
  margin-top: 32px;
  color: rgba(255, 250, 242, 0.58);
  font: 10px Consolas, monospace;
  letter-spacing: 0.1em;
}

@media (max-width: 760px) {
  .identity-lab,
  .record-section,
  .action-logs,
  .homestay-logs {
    padding: 90px 18px;
  }

  .identity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .identity-card,
  .identity-card:nth-child(even) {
    transform: none;
  }

  .identity-card img {
    height: 230px;
  }

  .record-section,
  .action-logs,
  .homestay-logs {
    gap: 78px;
  }

  .record-card:nth-child(even) {
    transform: none;
  }

  .record-card header,
  .homestay-record header,
  .cheers-record header {
    display: block;
  }

  .photo-pair,
  .photo-pair--sport,
  .photo-quad,
  .market-sequence,
  .prep-grid {
    grid-template-columns: 1fr;
  }

  .action-record,
  .action-record--reverse {
    padding-right: 0;
    padding-left: 18px;
    border-right: 0;
    border-left: 4px solid var(--orange);
  }

  .action-record--reverse > p {
    margin-left: 0;
    text-align: left;
  }

  .retro-screen > div {
    gap: 8px;
    font-size: 9px;
  }

  .speech-bubble {
    right: 4px;
  }

  .cheers-record {
    min-height: 108svh;
  }

  .cheers-photo {
    min-height: 64svh;
    padding: 12px 12px 50px;
    box-shadow: 9px 11px 0 rgba(255, 156, 134, 0.4);
  }

  .final-line {
    white-space: normal;
  }

  .save-summary {
    padding: 70px 18px;
  }

  .save-summary__panel {
    padding: 20px 18px 24px;
    box-shadow: 7px 9px 0 rgba(255, 156, 134, 0.48);
  }

  .save-summary__chapters li {
    padding: 14px 2px;
  }

  .save-summary__chapters span {
    gap: 11px;
  }

  .boot {
    background-image:
      linear-gradient(rgba(226, 245, 247, 0.9), rgba(239, 249, 247, 0.96)),
      url("assets/1-sm.webp");
  }

  .to-be-continued {
    background-image:
      linear-gradient(rgba(226, 245, 247, 0.86), rgba(238, 249, 247, 0.96)),
      url("assets/7-sm.webp");
  }

  .finale {
    background-image:
      linear-gradient(rgba(35, 67, 76, 0.91), rgba(23, 52, 60, 0.97)),
      url("assets/36-sm.webp");
  }
}

@media (prefers-reduced-motion: reduce) {
  .save-summary::before,
  .save-summary__chapters li,
  .save-summary__result {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* 背景衔接：保留各章色调，只柔化上下边缘，并统一格线坐标。 */
.chapter-intro__grid {
  background-image: none;
}

.chapter-intro {
  --section-from: #e6f6f7;
  --section-core: #dff2f3;
  --section-to: #deeff1;
}

.gallery-story {
  --section-from: #deeff1;
  --section-core: #deeff1;
  --section-to: #deeff1;
}

.video-section {
  --section-from: #deeff1;
  --section-core: #edf8f6;
  --section-to: #e5f4f3;
}

.chapter-intro--02 {
  --section-from: #e5f4f3;
  --section-core: #e5f4f3;
  --section-to: #e6f6f7;
}

.identity-lab {
  --section-from: #e6f6f7;
  --section-core: #dff1ee;
  --section-to: #e6f6f7;
}

.chapter-intro--03 {
  --section-from: #e6f6f7;
  --section-core: #f8eee2;
  --section-to: #f9f2e9;
}

.record-section {
  --section-from: #f9f2e9;
  --section-core: #f9f2e9;
  --section-to: #e8f3ef;
}

.chapter-intro--04 {
  --section-from: #e8f3ef;
  --section-core: #e8f3ef;
  --section-to: #eaf6f4;
}

.action-logs {
  --section-from: #eaf6f4;
  --section-core: #eaf6f4;
  --section-to: #f6eee7;
}

.chapter-intro--05 {
  --section-from: #f6eee7;
  --section-core: #f6eee7;
  --section-to: #f8f0e7;
}

.homestay-logs {
  --section-from: #f8f0e7;
  --section-core: #f8f0e7;
  --section-to: #dcefed;
}

.chapter-intro,
.gallery-story,
.video-section,
.identity-lab,
.record-section,
.action-logs,
.homestay-logs {
  background-color: var(--section-core);
  background-image:
    linear-gradient(rgba(86, 139, 145, 0.115) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 139, 145, 0.115) 1px, transparent 1px),
    linear-gradient(180deg, var(--section-from) 0%, var(--section-core) 9%, var(--section-core) 91%, var(--section-to) 100%);
  background-position: 0 0, 0 0, 0 0;
  background-size: 18px 18px, 18px 18px, 100% 100%;
  background-attachment: fixed, fixed, scroll;
}

.save-summary {
  background-color: #7fa6a8;
  background-image:
    linear-gradient(rgba(86, 139, 145, 0.115) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 139, 145, 0.115) 1px, transparent 1px),
    radial-gradient(circle at 18% 16%, rgba(255, 196, 179, 0.36), transparent 25rem),
    radial-gradient(circle at 82% 70%, rgba(188, 229, 215, 0.26), transparent 30rem),
    linear-gradient(180deg, #dcefed 0%, #9fc3c1 42%, #557d82 72%, #23434c 100%);
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  background-size: 18px 18px, 18px 18px, auto, auto, auto;
  background-attachment: fixed, fixed, scroll, scroll, scroll;
}

/* 蓝色进入线下扩展包时扩大羽化范围，避免短距离内形成明显分屏。 */
.chapter-intro--03 {
  background-image:
    linear-gradient(rgba(86, 139, 145, 0.115) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 139, 145, 0.115) 1px, transparent 1px),
    linear-gradient(
      180deg,
      var(--section-from) 0%,
      var(--section-core) 42%,
      var(--section-core) 91%,
      var(--section-to) 100%
  );
}

/* 照片翻页区结束前，让舞台底部逐渐羽化为下一屏的浅色网格。 */
.gallery-stage::after {
  position: absolute;
  z-index: 11;
  right: 0;
  bottom: 0;
  left: 0;
  height: 48svh;
  background-image:
    linear-gradient(rgba(86, 139, 145, 0.115) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 139, 145, 0.115) 1px, transparent 1px),
    linear-gradient(180deg, rgba(222, 239, 241, 0) 0%, rgba(222, 239, 241, 0.74) 58%, #deeff1 100%);
  background-position: 0 0, 0 0, 0 0;
  background-size: 18px 18px, 18px 18px, 100% 100%;
  background-attachment: fixed, fixed, scroll;
  content: "";
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.22) 30%, #000 100%);
  opacity: var(--gallery-exit-progress, 0);
  pointer-events: none;
}