/* 原生 CSS。布局、字体、颜色和动效都在这里。 */
:root {
  --bg: #080910;
  --ink: #f3f3fa;
  --soft: #9699b3;
  --line: #ffffff24;
  --violet: #b3a0ff;
  --cyan: #8feaff;
  --pad: 5.5vw;
  font-family:
    Arial, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,
h2,
h3,
p {
  margin: 0;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 7px;
}
button:disabled {
  cursor: default;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
[hidden] {
  display: none !important;
}
::selection {
  background: #a895ff;
  color: #111;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 100;
  padding: 15px;
  background: #a99bff;
  color: #080910;
}
.skip-link:focus {
  top: 20px;
}
.world-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 70% 44%, #1913367a, transparent 60%), #080910;
}
.world-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, #080910c9, transparent 52%, #08091018),
    linear-gradient(
      0deg,
      #080910db,
      transparent 17%,
      transparent 82%,
      #08091055
    );
}
.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.2' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045;
}
.masthead {
  height: 100px;
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  gap: 30px;
  background: linear-gradient(#080910aa, transparent);
}
.wordmark {
  display: flex;
  align-items: center;
  font-size: 43px;
  font-weight: 800;
  letter-spacing: -6px;
  gap: 1px;
}
.logo-star {
  font-size: 31px;
  color: var(--violet);
  align-self: flex-start;
  margin-top: 6px;
  letter-spacing: 0;
}
.wordmark-name {
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 3px;
  font-weight: 600;
  margin-left: 19px;
}
.wordmark-name > span {
  display: block;
  font-size: 9px;
  letter-spacing: 1.3px;
  font-weight: 400;
  color: var(--soft);
  margin-top: 6px;
}
.header-note {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8c90a7;
  font-size: 10px;
  letter-spacing: 1.6px;
}
.header-note i {
  height: 5px;
  width: 5px;
  background: #b1f4c4;
  box-shadow: 0 0 12px #a2eec3;
  border-radius: 50%;
}
.masthead nav {
  display: flex;
  align-items: center;
  gap: 33px;
  font-size: 13px;
}
.masthead nav button,
.masthead nav a {
  display: flex;
  align-items: center;
  gap: 17px;
}
.masthead sup {
  color: var(--violet);
  font-size: 10px;
  align-self: flex-start;
  margin-left: -10px;
}
.masthead nav button:hover,
.masthead nav a:hover {
  color: var(--violet);
}
.travel-progress {
  position: fixed;
  top: 100px;
  left: var(--pad);
  right: var(--pad);
  height: 1px;
  z-index: 30;
  background: #ffffff1a;
}
.travel-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  transform-origin: left;
  transform: scaleX(0);
}
.journey {
  position: relative;
  z-index: 4;
}
.journey-stop {
  height: 130svh;
  min-height: 700px;
  pointer-events: none;
}
.story-panel {
  position: fixed;
  z-index: 5;
  left: var(--pad);
  top: 26%;
  width: min(42vw, 590px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}
.story-panel.is-active {
  pointer-events: auto;
}
.intro-panel {
  visibility: visible;
  opacity: 1;
  top: 23%;
  width: min(52vw, 720px);
}
.eyebrow {
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 2.1px;
  color: #a5a3bb;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
}
.crosshair {
  font-size: 19px;
  color: var(--violet);
}
.intro-panel h1 {
  position: relative;
  margin: 22px 0 24px;
  font-size: clamp(72px, 8.8vw, 142px);
  letter-spacing: -0.075em;
  line-height: 0.85;
  font-weight: 800;
}
.intro-panel h1 > span:not(.title-orbit) {
  -webkit-text-stroke: 1px #bfc0d8;
  color: transparent;
  letter-spacing: -0.07em;
}
.title-orbit {
  display: inline-block;
  font-size: 0.5em;
  font-weight: 300;
  color: var(--violet);
  -webkit-text-stroke: 0;
  position: absolute;
  top: 10%;
  left: 75%;
  animation: asterisk-rotate 35s linear infinite;
}
.intro-copy {
  margin-top: 29px;
  display: flex;
  align-items: center;
  gap: 34px;
}
.intro-copy p {
  font-size: 21px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 1px;
}
.intro-copy p > span {
  color: var(--violet);
}
.intro-copy > span {
  font-size: 9px;
  letter-spacing: 2px;
  line-height: 2;
  color: #777b94;
  max-width: 145px;
  border-left: 1px solid var(--line);
  padding: 5px 0 5px 23px;
}
.launch-button {
  margin-top: 30px;
  border: 1px solid #b2a3e9;
  padding: 5px 5px 5px 23px;
  display: inline-flex;
  align-items: center;
  gap: 36px;
  border-radius: 35px;
  font-size: 13px;
  background: #b6a1ff0c;
  transition:
    background 0.2s,
    transform 0.2s;
}
.launch-arrow {
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #b2a0fa;
  color: #0c0917;
  width: 38px;
  height: 38px;
  font-size: 20px;
}
.launch-button:hover {
  background: #b6a1ff25;
  transform: translateY(-3px);
}
.story-panel h2 {
  font-size: clamp(42px, 5vw, 80px);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.045em;
  margin: 27px 0;
}
.story-panel h2 span {
  color: var(--violet);
}
.story-description {
  font-size: 16px;
  line-height: 1.95;
  color: #aaaabd;
  letter-spacing: 0.5px;
}
.project-link {
  margin-top: 31px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 19px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  width: min(365px, 100%);
  font-size: 14px;
  text-align: left;
}
.project-link > span:last-child {
  color: #c3b5ff;
  font-size: 12px;
  white-space: nowrap;
}
.project-link:hover {
  border-color: #bcafff;
  color: #c3b5ff;
}
.side-projects {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 20px;
  max-width: 400px;
}
.side-projects button {
  font-size: 12px;
  color: #999bb0;
}
.side-projects button:hover {
  color: var(--cyan);
}
.spatial-gallery {
  position: fixed;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  overflow: hidden;
  perspective: 1100px;
}
.spatial-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  transform-origin: center;
  will-change: transform, opacity;
  pointer-events: auto;
  border: 1px solid #ddd7ff55;
  border-radius: 10px;
  background: #101321d9;
  box-shadow:
    0 14px 80px #0008,
    0 0 30px #8585fc0f;
  overflow: hidden;
  transition: border-color 0.2s;
  display: block;
  text-align: left;
}
.spatial-card:hover {
  border-color: #d8caff;
  box-shadow:
    0 15px 80px #0009,
    0 0 30px #9995ff35;
}
.spatial-card .window-bar {
  height: 25px;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid #f3e8ff20;
}
.window-bar i {
  width: 4px;
  height: 4px;
  background: #b7abd9;
  border-radius: 50%;
  opacity: 0.6;
}
.window-bar span {
  margin-left: auto;
  font: 8px monospace;
  color: #b7aec9;
  letter-spacing: 1px;
}
.spatial-card img {
  width: 100%;
  height: 175px;
  object-fit: cover;
  object-position: top;
  background: #dcdcf2;
}
.spatial-card .spatial-caption {
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #dfdded;
}
.spatial-caption > span:last-child {
  font-size: 18px;
  color: #b6abff;
}
.spatial-card.small {
  width: 230px;
  opacity: 0.8;
}
.spatial-card.small img {
  height: 135px;
}
.spatial-card.small .window-bar {
  height: 21px;
}
.spatial-card.small .spatial-caption {
  padding: 9px 12px;
  font-size: 11px;
}
.guide-traveler {
  position: fixed;
  z-index: 8;
  left: 65%;
  top: 39%;
  width: clamp(180px, 19vw, 280px);
  pointer-events: none;
  will-change: transform, opacity;
}
.guide-traveler img {
  width: 100%;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 23px #8c77de70);
  animation: guide-hover 6s ease-in-out infinite;
}
.guide-aura {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 6%;
  height: 30%;
  background: #9882ff3d;
  border-radius: 50%;
  filter: blur(45px);
}
.guide-caption {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font: 9px monospace;
  color: #c0b3e3;
  letter-spacing: 2px;
  margin-top: -7px;
}
.guide-caption i {
  font-size: 16px;
  color: var(--violet);
  font-style: normal;
}
.companion {
  position: fixed;
  bottom: 52px;
  left: var(--pad);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: min(450px, 45vw);
  pointer-events: none;
}
.companion-avatar {
  height: 47px;
  width: 47px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  background: #27203c;
  border: 1px solid #cbb8f633;
}
.companion-avatar img {
  width: 74px;
  max-width: none;
  transform: translate(-13px, -2px);
}
.companion-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  letter-spacing: 1.3px;
  color: #8d879f;
  margin-bottom: 5px;
}
.companion-name i {
  display: block;
  background: #b6a1f7;
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
.companion-copy p {
  font-size: 13px;
  line-height: 1.6;
  color: #c3bfd1;
  text-wrap: pretty;
}
.journey-navigation {
  position: fixed;
  z-index: 25;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.journey-navigation button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 66px;
  height: 24px;
  color: #9790ac;
}
.journey-navigation span {
  font-size: 11px;
  opacity: 0;
  transform: translateX(5px);
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.journey-navigation i {
  display: block;
  width: 12px;
  height: 2px;
  background: #666078;
  transition:
    width 0.3s,
    background 0.3s;
}
.journey-navigation button[aria-current] i {
  width: 25px;
  background: #c5b6ff;
  box-shadow: 0 0 10px #bfa4ff66;
}
.journey-navigation button:hover span,
.journey-navigation button[aria-current] span {
  opacity: 1;
  transform: translateX(0);
}
.journey-footer {
  position: fixed;
  z-index: 24;
  bottom: 21px;
  left: var(--pad);
  right: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 1.3px;
  color: #868196;
  pointer-events: none;
}
.journey-footer > * {
  pointer-events: auto;
}
.scroll-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.scroll-line {
  width: 34px;
  height: 1px;
  background: #777189;
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: "";
  height: 1px;
  width: 13px;
  background: #e0d1ff;
  position: absolute;
  left: -13px;
  animation: scroll-dash 2s linear infinite;
}
.journey-coordinate {
  margin-left: auto;
  margin-right: 29px;
  font-family: monospace;
  font-size: 12px;
}
.journey-coordinate > span {
  color: #e1d5ff;
}
.journey-coordinate i {
  font-style: normal;
  margin: 0 8px;
  opacity: 0.6;
}
#motion-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  color: #9c95b0;
}
.motion-bars {
  height: 11px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.motion-bars i {
  height: 8px;
  width: 2px;
  background: #c5b5ff;
  animation: motion-bar 1s ease-in-out infinite alternate;
}
.motion-bars i:nth-child(2) {
  height: 12px;
  animation-delay: -0.4s;
}
.motion-bars i:nth-child(3) {
  height: 5px;
  animation-delay: -0.7s;
}
.contact-panel {
  top: 25%;
  width: 70vw;
}
.contact-panel h2 {
  font-size: clamp(46px, 5.7vw, 88px);
}
.contact-mail {
  margin-top: 29px;
  display: flex;
  align-items: center;
  gap: 90px;
  font-size: 27px;
  border-bottom: 1px solid #b5a4e6;
  padding-bottom: 12px;
  max-width: 310px;
}
.contact-mail span {
  margin-left: auto;
  color: var(--violet);
}
.contact-actions {
  display: flex;
  gap: 27px;
  margin-top: 23px;
  font-size: 13px;
  color: #b8b1ca;
}
.contact-actions > *:hover {
  color: white;
}
.end-signature {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #68647b;
  margin-top: 40px;
}
.portfolio-dialog {
  position: fixed;
  inset: 0;
  width: min(1280px, calc(100% - 40px));
  height: 92dvh;
  max-width: none;
  max-height: 92dvh;
  margin: auto;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #eceaf4;
  background: #10111c;
  border: 1px solid #c7b5ff38;
  border-radius: 16px;
  box-shadow: 0 0 140px #0008;
}
.portfolio-dialog:not([open]) {
  display: none;
}
.portfolio-dialog::backdrop {
  background: #060710c9;
  backdrop-filter: blur(13px);
}
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 21px 26px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.dialog-heading {
  flex: 1;
}
.dialog-heading h2 {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
}
.dialog-heading p {
  font-size: 12px;
  color: #9792a9;
  margin-top: 6px;
}
.close-dialog {
  height: 40px;
  width: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #887eaa6b;
  border-radius: 50%;
  font-size: 17px;
  flex-shrink: 0;
}
#dialog-back {
  font-size: 12px;
  color: #bcafe1;
  white-space: nowrap;
}
.dialog-body {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
  padding: 26px;
}
.archive-intro {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin: 8px 0 28px;
  color: #9991ad;
  font-size: 13px;
}
.archive-intro a {
  color: #ccbeee;
  border-bottom: 1px solid #716984;
  padding-bottom: 5px;
}
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 22px;
}
.archive-card {
  text-align: left;
  display: block;
  min-width: 0;
}
.archive-card .archive-cover {
  aspect-ratio: 1.77;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #f0eef1;
}
.archive-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s;
}
.archive-card:hover img {
  transform: scale(1.04);
}
.archive-card h3 {
  font-size: 15px;
  font-weight: 400;
  margin-top: 13px;
}
.archive-card p {
  font-size: 11px;
  color: #a09aaa;
  margin-top: 7px;
  display: flex;
  justify-content: space-between;
}
.case-page {
  max-width: 1100px;
  margin: 0 auto 30px;
}
.case-page img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  background: #e9e7e9;
}
.case-page figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  font-size: 11px;
  color: #9891a4;
}
.case-page a {
  color: #c8bfe4;
}
.case-end {
  padding: 30px 0;
  text-align: center;
  font-size: 14px;
  color: #a79fb4;
}
.case-end button {
  margin: 20px auto 0;
  padding: 11px 25px;
  border: 1px solid #a897ca88;
  border-radius: 30px;
  display: block;
}
.scene-fallback {
  position: fixed;
  z-index: 30;
  top: 115px;
  right: var(--pad);
  font-size: 12px;
  color: #a79cb9;
}
.noscript-note {
  position: fixed;
  z-index: 80;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 24px;
  background: #211a3a;
  text-align: center;
  font-size: 15px;
}
.noscript-note a {
  color: #d5c7ff;
  text-decoration: underline;
}
.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}
#retry-scene {
  margin-left: 10px;
  color: var(--cyan);
  border-bottom: 1px solid currentColor;
}
.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
  animation-play-state: paused !important;
}
@keyframes guide-hover {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-14px) rotate(2deg);
  }
}
@keyframes asterisk-rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes scroll-dash {
  to {
    left: 34px;
  }
}
@keyframes motion-bar {
  to {
    transform: scaleY(0.35);
  }
}
@media (min-width: 1600px) {
  .intro-panel h1 {
    font-size: 150px;
  }
  .story-panel {
    top: 27%;
  }
  .intro-panel {
    top: 23%;
  }
  .guide-traveler {
    width: 290px;
  }
  .intro-copy p {
    font-size: 24px;
  }
  .launch-button {
    margin-top: 36px;
  }
}
@media (max-width: 1100px) {
  .header-note {
    display: none;
  }
  .intro-panel h1 {
    font-size: 10vw;
  }
  .intro-panel {
    width: 59vw;
    top: 26%;
  }
  .intro-copy {
    gap: 19px;
  }
  .intro-copy > span {
    display: none;
  }
  .guide-traveler {
    left: 64%;
    top: 40%;
    width: 25vw;
  }
  .story-panel h2 {
    font-size: 6vw;
  }
  .story-description {
    font-size: 15px;
  }
  .title-orbit {
    left: 79%;
  }
  .companion {
    max-width: 46vw;
  }
  .spatial-card {
    width: 270px;
  }
  .spatial-card img {
    height: 145px;
  }
  .spatial-card.small {
    width: 205px;
  }
  .spatial-card.small img {
    height: 117px;
  }
  .archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  :root {
    --pad: 6vw;
  }
  .masthead {
    height: 80px;
    gap: 18px;
  }
  .wordmark {
    font-size: 33px;
    letter-spacing: -5px;
  }
  .logo-star {
    font-size: 25px;
    margin-top: 5px;
  }
  .wordmark-name {
    font-size: 12px;
    letter-spacing: 2px;
    margin-left: 12px;
  }
  .wordmark-name > span {
    font-size: 8px;
    letter-spacing: 0.7px;
  }
  .masthead nav {
    gap: 20px;
    font-size: 12px;
  }
  .masthead nav a {
    display: none;
  }
  .masthead nav button {
    gap: 11px;
  }
  .travel-progress {
    top: 80px;
  }
  .journey-stop {
    height: 125svh;
    min-height: 650px;
  }
  .story-panel {
    left: var(--pad);
    top: 19%;
    width: 82vw;
  }
  .intro-panel {
    top: 19%;
    width: 90vw;
  }
  .eyebrow {
    font-size: 9px;
    letter-spacing: 1.5px;
  }
  .crosshair {
    font-size: 15px;
  }
  .intro-panel h1 {
    font-size: 18vw;
    line-height: 0.91;
    margin: 21px 0 17px;
    letter-spacing: -0.075em;
  }
  .title-orbit {
    left: 72%;
    top: 0;
    font-size: 0.5em;
  }
  .intro-copy {
    margin-top: 17px;
  }
  .intro-copy p {
    font-size: 17px;
    line-height: 1.65;
  }
  .launch-button {
    margin-top: 23px;
    font-size: 12px;
    gap: 25px;
    padding-left: 18px;
  }
  .launch-arrow {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  .guide-traveler {
    left: 58%;
    top: 47%;
    width: 35vw;
  }
  .guide-caption {
    font-size: 7px;
    letter-spacing: 1px;
    gap: 7px;
  }
  .guide-caption i {
    font-size: 12px;
  }
  .atmosphere {
    background: linear-gradient(
      0deg,
      #080910dd,
      transparent 28%,
      #08091018 65%,
      #080910a8
    );
  }
  .story-panel h2 {
    font-size: 43px;
    line-height: 1.18;
    margin: 20px 0 17px;
    letter-spacing: -2px;
  }
  .story-description {
    font-size: 14px;
    line-height: 1.8;
  }
  .project-link {
    font-size: 13px;
    margin-top: 19px;
    padding: 14px 0;
    max-width: 300px;
  }
  .project-link > span:last-child {
    font-size: 11px;
  }
  .side-projects {
    gap: 8px 18px;
    margin-top: 14px;
    max-width: 310px;
  }
  .side-projects button {
    font-size: 11px;
  }
  .journey-navigation {
    right: 5vw;
    top: auto;
    bottom: 100px;
    transform: none;
    gap: 5px;
  }
  .journey-navigation button {
    height: 17px;
    min-width: 30px;
  }
  .journey-navigation span {
    display: none;
  }
  .journey-navigation i {
    width: 7px;
  }
  .journey-navigation button[aria-current] i {
    width: 18px;
  }
  .companion {
    bottom: 49px;
    gap: 10px;
    max-width: 75vw;
  }
  .companion-avatar {
    width: 37px;
    height: 37px;
  }
  .companion-avatar img {
    width: 58px;
    transform: translate(-10px, -2px);
  }
  .companion-name {
    font-size: 8px;
    letter-spacing: 1px;
    margin-bottom: 3px;
  }
  .companion-copy p {
    font-size: 11px;
    line-height: 1.6;
  }
  .journey-footer {
    bottom: 17px;
    font-size: 9px;
  }
  .scroll-hint {
    position: static;
    transform: none;
    font-size: 9px;
    gap: 8px;
  }
  .scroll-line {
    width: 21px;
  }
  .journey-coordinate {
    font-size: 10px;
    margin-left: auto;
    margin-right: 14px;
  }
  .journey-coordinate i {
    margin: 0 4px;
  }
  #motion-toggle {
    font-size: 9px;
  }
  .motion-bars {
    gap: 2px;
  }
  .spatial-card {
    width: 230px;
  }
  .spatial-card img {
    height: 126px;
  }
  .spatial-card .spatial-caption {
    font-size: 11px;
    padding: 9px 12px;
  }
  .spatial-card .window-bar {
    height: 21px;
  }
  .spatial-card.small {
    width: 165px;
  }
  .spatial-card.small img {
    height: 92px;
  }
  .spatial-card.small .spatial-caption {
    font-size: 10px;
    padding: 7px 9px;
  }
  .contact-panel {
    top: 21%;
    width: 87vw;
  }
  .contact-panel h2 {
    font-size: 44px;
  }
  .contact-mail {
    font-size: 24px;
    max-width: 270px;
    gap: 40px;
    margin-top: 25px;
  }
  .contact-actions {
    gap: 20px;
    font-size: 12px;
    flex-wrap: wrap;
  }
  .end-signature {
    font-size: 8px;
    letter-spacing: 1px;
    margin-top: 28px;
  }
  .portfolio-dialog {
    width: calc(100% - 12px);
    height: 97dvh;
    max-height: 97dvh;
    border-radius: 10px;
  }
  .dialog-header {
    padding: 14px 13px;
    gap: 12px;
  }
  .dialog-heading h2 {
    font-size: 16px;
  }
  .dialog-heading p {
    font-size: 11px;
  }
  .close-dialog {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .dialog-body {
    padding: 15px 10px;
  }
  .archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 13px;
  }
  .archive-intro {
    font-size: 11px;
    margin: 4px 0 20px;
  }
  .archive-card h3 {
    font-size: 13px;
  }
  .archive-card p {
    font-size: 10px;
    line-height: 1.5;
    gap: 7px;
    flex-wrap: wrap;
  }
  .case-page {
    margin-bottom: 20px;
  }
  .case-page figcaption {
    font-size: 10px;
  }
  .scene-fallback {
    font-size: 10px;
    top: 92px;
    left: var(--pad);
  }
  #dialog-back {
    font-size: 11px;
  }
  .case-end {
    font-size: 13px;
  }
}
@media (max-width: 390px) {
  .wordmark-name > span {
    display: none;
  }
  .companion-copy p {
    font-size: 11px;
    max-width: 220px;
  }
  .intro-panel h1 {
    font-size: 18vw;
  }
  .intro-copy p {
    font-size: 16px;
  }
  .guide-traveler {
    top: 50%;
  }
  .story-panel h2 {
    font-size: 39px;
  }
  .story-description {
    font-size: 13px;
  }
  .side-projects {
    max-width: 260px;
  }
  .side-projects button {
    font-size: 10px;
  }
  .archive-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 短窗口保留完整阅读与按钮，横屏时可以在文字区内继续滚动。 */
@media (max-width: 760px) and (min-height: 501px) {
  .story-panel:not(.intro-panel):not(.contact-panel) {
    top: 17%;
  }
  .side-projects {
    max-width: 100%;
    gap: 10px 12px;
  }
}
@media (max-height: 680px) and (min-width: 761px) {
  .masthead {
    height: 72px;
  }
  .travel-progress {
    top: 72px;
  }
  .story-panel,
  .intro-panel,
  .contact-panel {
    top: 95px;
    max-height: calc(100svh - 175px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #72618f transparent;
    padding: 0 8px 8px 0;
  }
  .intro-panel h1 {
    font-size: min(8vw, 90px);
    margin: 16px 0;
  }
  .intro-copy {
    margin-top: 15px;
  }
  .intro-copy p {
    font-size: 17px;
  }
  .launch-button {
    margin-top: 18px;
  }
  .story-panel h2 {
    font-size: min(4.8vw, 54px);
    margin: 15px 0;
  }
  .story-description {
    font-size: 14px;
    line-height: 1.7;
  }
  .project-link {
    margin-top: 18px;
    padding: 13px 0;
  }
  .side-projects {
    margin-top: 13px;
    gap: 8px 18px;
  }
  .contact-mail {
    margin-top: 18px;
    font-size: 23px;
  }
  .contact-actions {
    margin-top: 17px;
  }
  .end-signature {
    margin-top: 20px;
  }
  .guide-traveler {
    top: 29%;
    width: min(22vw, 220px);
  }
  .companion {
    bottom: 43px;
  }
  .companion-avatar {
    width: 36px;
    height: 36px;
  }
  .companion-avatar img {
    width: 57px;
    transform: translate(-10px, -2px);
  }
  .companion-copy p {
    font-size: 11px;
  }
}
@media (max-height: 500px) {
  .masthead {
    height: 62px;
  }
  .travel-progress {
    top: 62px;
  }
  .wordmark-name > span {
    display: none;
  }
  .story-panel,
  .intro-panel,
  .contact-panel {
    top: 80px;
    max-height: calc(100svh - 125px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 12px;
  }
  .companion {
    display: none;
  }
  .journey-footer {
    bottom: 12px;
  }
  .guide-traveler {
    top: 23%;
    width: 19vw;
  }
  .journey-navigation {
    bottom: 55px;
    top: auto;
    transform: none;
    gap: 3px;
  }
  .intro-panel h1 {
    font-size: 8vw;
    margin: 12px 0;
  }
  .intro-copy p {
    font-size: 15px;
  }
  .launch-button {
    margin-top: 13px;
  }
  .story-panel h2 {
    font-size: 36px;
    margin: 12px 0;
  }
  .story-description {
    font-size: 13px;
  }
  .eyebrow {
    font-size: 9px;
  }
}

/* 先绘出人物，再显示与其对齐的触控层；加载期间不放回旧插画。 */
.guide-traveler {
  left: 0;
  top: 0;
  width: 240px;
  height: 400px;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  visibility: hidden;
}
body[data-avatar="ready"][data-webgl="ready"] .guide-traveler {
  opacity: 1;
  visibility: visible;
}
.guide-loading {
  position: fixed;
  z-index: 5;
  left: 72%;
  top: 48%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 14px;
  color: #c6b5ff;
  font-size: 10px;
  letter-spacing: 2px;
  pointer-events: none;
}
.guide-loading > span {
  font-size: 46px;
  text-shadow: 0 0 32px #ac8cff80;
}
body[data-avatar="ready"] .guide-loading,
body[data-avatar="fallback"] .guide-loading,
body[data-webgl="fallback"] .guide-loading,
body[data-webgl="recovering"] .guide-loading {
  display: none;
}
@media (max-width: 759px) {
  .guide-loading {
    left: 78%;
    top: 58%;
  }
}
.companion-placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  color: #d0c0f2;
  font-size: 28px;
}
.companion-avatar img:not([data-portrait]) {
  visibility: hidden;
}
.guide-costume {
  position: absolute;
  left: 50%;
  top: -21px;
  transform: translateX(-50%);
  font: 8px monospace;
  letter-spacing: 1.8px;
  color: #d2c5ee;
  white-space: nowrap;
  opacity: 0.7;
}
.guide-touch-zone {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 5%;
  bottom: 8%;
  pointer-events: auto;
  border-radius: 45% 45% 35% 35%;
  cursor: pointer;
  touch-action: pan-y;
}
.guide-touch-zone:focus-visible {
  outline: 1px dashed #c4b6ff;
  outline-offset: 8px;
}
.guide-cue {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font-size: 10px;
  color: #d5cbea;
  letter-spacing: 0.4px;
  padding: 7px 11px;
  border: 1px solid #b8a3ef35;
  border-radius: 25px;
  background: #100f1db5;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.guide-cue:hover {
  background: #322649d9;
  border-color: #b8a3ef80;
}
.guide-cue-dot {
  height: 4px;
  width: 4px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #c6b5ff;
  box-shadow: 0 0 8px #ac8cff;
}
.guide-traveler[data-outfit="cyber"] .guide-cue-dot {
  background: #80edff;
  box-shadow: 0 0 10px #4bcfff;
}
.guide-traveler[data-outfit="artist"] .guide-cue-dot {
  background: #9fe9cd;
  box-shadow: 0 0 10px #85dabb;
}
.guide-traveler[data-closeup="true"] .guide-costume {
  opacity: 0;
}
.companion {
  max-width: min(440px, 45vw);
  gap: 14px;
  align-items: center;
  pointer-events: none;
}
.companion-avatar {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  width: 54px;
  height: 54px;
  background: radial-gradient(circle at 50% 35%, #77608e, #272039 80%);
  border: 1px solid #cbb8f64a;
  box-shadow: 0 0 0 5px #9680c408;
  overflow: hidden;
  transform: rotate(var(--guide-nod, 0deg));
  transition:
    background 0.5s,
    border-color 0.3s;
}
.companion-avatar img {
  position: absolute;
  width: 120px;
  max-width: none;
  height: auto;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
}
.companion-avatar:hover {
  border-color: #d8c7ff;
  box-shadow: 0 0 0 5px #9680c426;
}
.companion[data-outfit="cyber"] .companion-avatar {
  background: radial-gradient(circle at 50% 35%, #335d78, #172036 80%);
  border-color: #8fd9ed72;
}
.companion[data-outfit="artist"] .companion-avatar {
  background: radial-gradient(circle at 50% 35%, #527d75, #1c3236 80%);
}
.companion-name {
  font-size: 9px;
  letter-spacing: 1px;
  margin-bottom: 4px;
  gap: 7px;
}
.guide-role {
  font-size: 9px;
  letter-spacing: 0.3px;
  color: #9d92b3;
  margin-left: 3px;
}
.guide-voice {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 11px;
}
.guide-voice b {
  display: block;
  width: 2px;
  height: 3px;
  background: #c2adfc;
  border-radius: 2px;
  transform-origin: center;
}
.is-speaking .guide-voice b {
  animation: guide-speaking 0.5s ease-in-out infinite alternate;
}
.is-speaking .guide-voice b:nth-child(2) {
  animation-delay: -0.2s;
}
.is-speaking .guide-voice b:nth-child(3) {
  animation-delay: -0.4s;
}
.is-speaking .guide-voice b:nth-child(4) {
  animation-delay: -0.1s;
}
.is-speaking #guide-line {
  animation: guide-line-in 0.35s ease-out;
}
.is-speaking .companion-avatar {
  box-shadow:
    0 0 0 5px #9680c41a,
    0 0 20px #9b7ade20;
}
.guide-travel-log {
  display: flex;
  gap: 12px;
  margin-top: 5px;
  font-size: 8px;
  letter-spacing: 0.8px;
  color: #777086;
}
.guide-travel-log > span {
  font: 9px monospace;
  letter-spacing: 1px;
  color: #a99abf;
}
@keyframes guide-speaking {
  from {
    transform: scaleY(0.7);
  }
  to {
    transform: scaleY(3.4);
  }
}
@keyframes guide-line-in {
  from {
    opacity: 0.3;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 760px) {
  .companion {
    max-width: 70vw;
    gap: 10px;
    bottom: 48px;
  }
  .companion-avatar {
    width: 42px;
    height: 42px;
  }
  .companion-avatar img {
    width: 95px;
    top: -2px;
  }
  .companion-name {
    font-size: 8px;
    gap: 5px;
  }
  .guide-role {
    font-size: 8px;
    max-width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .companion-copy p {
    font-size: 10px;
    line-height: 1.6;
    max-width: 210px;
  }
  .guide-travel-log {
    font-size: 7px;
    margin-top: 3px;
    gap: 8px;
  }
  .guide-travel-log > span {
    font-size: 8px;
  }
  .guide-costume {
    display: none;
  }
  .guide-cue {
    top: -15px;
    bottom: auto;
    font-size: 9px;
    padding: 4px 6px;
    gap: 5px;
    border-color: transparent;
    background: #0c0c1766;
  }
  #guide-cue {
    max-width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-height: 520px) {
  .guide-costume {
    display: none;
  }
  .guide-cue {
    top: -16px;
    bottom: auto;
    font-size: 9px;
  }
  .companion {
    display: none;
  }
}
#guide-change-look {
  pointer-events: auto;
  color: #c1afd8;
  font-size: 9px;
  padding: 2px 5px;
  margin: -2px 0 -2px 2px;
  border-bottom: 1px solid #b3a0d63a;
  min-height: 18px;
  transition: color 0.2s;
}
#guide-change-look:hover {
  color: #b0efff;
}
@media (max-width: 760px) {
  #guide-change-look {
    font-size: 8px;
    min-height: 18px;
  }
  .guide-travel-log {
    align-items: center;
    gap: 6px;
  }
}

/* 末站署名单独占据视口中央，避免随左侧内容移动或压住播报。 */
@media (min-width: 761px) and (min-height: 681px) {
  .contact-panel {
    top: 21%;
  }
}
#end-signature {
  position: fixed;
  z-index: 24;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 360px);
  margin: 0;
  text-align: center;
  font:
    8px/1.5 Arial,
    sans-serif;
  letter-spacing: 1.2px;
  color: #8f879f;
  pointer-events: none;
}
.guide-traveler[data-outfit="performer"] .guide-cue-dot {
  background: #ffe5a1;
  box-shadow: 0 0 10px #ffe5a1;
}
@media (max-width: 760px) and (min-height: 521px) {
  .contact-panel {
    top: 17%;
  }
}
.guide-traveler[data-outfit="astronaut"] .guide-cue-dot {
  background: #a3d9ff;
  box-shadow: 0 0 10px #a3d9ff;
}
.companion[data-outfit="performer"] .companion-avatar {
  background: radial-gradient(circle at 50% 35%, #716145, #24202d 80%);
  border-color: #e9c98566;
}
.companion[data-outfit="astronaut"] .companion-avatar {
  background: radial-gradient(circle at 50% 35%, #526d93, #1d243b 80%);
  border-color: #aed6ff66;
}
.companion-avatar img[data-portrait] {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}
.guide-cue {
  overflow: hidden;
}
.guide-cue::after {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 0;
  left: 8%;
  right: 8%;
  background: #ccb8ff;
  transform-origin: left;
  transform: scaleX(var(--action-progress, 0));
  opacity: 0;
}
.guide-traveler[data-interacting="true"] .guide-cue::after {
  opacity: 0.85;
}
.companion[data-interacting="true"] .companion-avatar {
  border-color: #e0ceff;
  box-shadow: 0 0 0 4px #bea4e51f;
}
@media (max-width: 999px) and (min-height: 521px) {
  #end-signature {
    bottom: 47px;
    max-width: calc(100vw - 40px);
    font-size: 7px;
    letter-spacing: 0.8px;
  }
  body[data-chapter="6"] .companion {
    bottom: 82px;
  }
  .journey-navigation button[aria-current] span {
    opacity: 0;
  }
  .journey-navigation button:hover span,
  .journey-navigation button:focus-visible span {
    opacity: 1;
  }
}

/* 第七站：电影片场里，认识作品背后的女孩。 */
.about-panel {
  top: 16%;
  width: min(45vw, 580px);
  --about-yellow: #f4ce52;
}
.about-panel .eyebrow {
  color: #c9b985;
  gap: 12px;
}
.about-chapter {
  border: 1px solid #b9a77466;
  padding: 3px 6px;
  font: 10px/1.2 monospace;
}
.about-panel h2 {
  font-size: clamp(38px, 4.5vw, 65px);
  line-height: 1.06;
  margin: 20px 0 17px;
  letter-spacing: -3px;
}
.about-panel h2 > span {
  color: var(--about-yellow);
}
.about-name {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  margin: 0 0 17px;
}
.about-name > span {
  font:
    9px/1.4 Arial,
    sans-serif;
  letter-spacing: 1.5px;
  color: #98959e;
}
.about-bio {
  max-width: 480px;
  color: #c6c3cb;
  font-size: 13px;
  line-height: 1.85;
}
.about-bio p {
  margin: 0 0 10px;
}
.about-bio .about-belief {
  color: #e1d7b7;
}
.about-interests {
  display: flex;
  gap: 8px;
  margin: 15px 0 21px;
}
.about-interests span {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #b9afa0;
  padding: 5px 10px;
  border: 1px solid #b8a98330;
  border-radius: 20px;
}
.about-choices {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 47px;
}
.about-choices button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 138px;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 3px;
  font-size: 14px;
}
.about-choices button[hidden] {
  display: none;
}
#about-contact {
  background: var(--about-yellow);
  color: #211b0c;
  border: 1px solid var(--about-yellow);
}
#about-contact:hover {
  background: #ffe18a;
  border-color: #ffe18a;
}
#about-contact:focus-visible,
#about-decline:focus-visible {
  outline: 2px solid #fff4cf;
  outline-offset: 5px;
}
#about-decline {
  color: #ded9c9;
  border: 1px solid #b8a98377;
  background: #1d1c21;
}
#about-decline:hover {
  border-color: #f4ce52;
  color: #f4ce52;
}
#about-decline:disabled {
  cursor: default;
}
.about-response {
  font-size: 10px;
  line-height: 1.7;
  color: #a39c8b;
  margin: 11px 0 0;
  max-width: 390px;
}
.about-contact-card {
  max-width: 355px;
  margin-top: 13px;
  border-top: 1px solid #eac77450;
  padding-top: 10px;
}
.about-contact-card p {
  font-size: 12px;
  color: #efdcae;
  margin: 0 0 5px;
}
.about-contact-card a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font:
    12px/1.5 Arial,
    sans-serif;
  color: #e9e2d5;
}
.about-contact-card a span {
  color: #b4a98b;
  font-size: 10px;
}
.about-panel[data-choice="contact"] .about-interests,
.about-panel[data-choice="contact"] .about-belief,
.about-panel[data-choice="contact"] .about-response {
  display: none;
}
.about-panel[data-choice="contact"] .about-choices {
  margin-top: 12px;
}
.about-panel[data-performing="kick"] .about-bio,
.about-panel[data-performing="kick"] .about-interests {
  opacity: 0.38;
}
.about-shards {
  position: fixed;
  z-index: 28;
  pointer-events: none;
  perspective: 700px;
}
.about-shard {
  position: absolute;
  display: block;
  overflow: hidden;
  background: #1d1c21;
  border: 1px solid #ceae4d99;
  will-change: transform, opacity;
}
.about-shard span {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font:
    14px/1.2 Arial,
    sans-serif;
  color: #f4dc99;
  white-space: nowrap;
}

.guide-traveler[data-outfit="kungfu"] .guide-cue-dot {
  background: #ffdb68;
  box-shadow: 0 0 10px #ffcf51;
}
.guide-traveler[data-outfit="kungfu"] .guide-costume {
  color: #ceb778;
}
.guide-traveler[data-action="kick"] .guide-cue,
.guide-traveler[data-action="kick"] .guide-costume {
  opacity: 0;
  pointer-events: none;
}
.companion[data-outfit="kungfu"] .companion-avatar {
  border-color: #e4c76888;
  background: radial-gradient(circle at 50% 35%, #887346, #252021 80%);
}
body[data-chapter="6"] .travel-progress span {
  background: linear-gradient(90deg, #ba9a35, #ffdf81);
}
@media (min-width: 761px) and (max-height: 790px) {
  .about-panel {
    top: 112px;
  }
  .about-panel h2 {
    font-size: 45px;
    margin: 12px 0 13px;
  }
  .about-name {
    margin-bottom: 12px;
  }
  .about-bio {
    font-size: 12px;
    line-height: 1.75;
  }
  .about-bio p {
    margin-bottom: 8px;
  }
  .about-interests {
    margin: 11px 0 15px;
  }
}
@media (min-width: 761px) and (max-width: 999px) {
  .about-panel {
    width: 48vw;
  }
  .about-panel h2 {
    font-size: 40px;
  }
  .about-choices button {
    min-width: 126px;
  }
}
@media (max-width: 760px) and (min-height: 521px) {
  #about .story-panel.about-panel {
    top: 105px;
    width: calc(100vw - 42px);
  }
  .about-panel .eyebrow {
    font-size: 8px;
    letter-spacing: 1.2px;
  }
  .about-panel h2 {
    font-size: 37px;
    line-height: 1.03;
    letter-spacing: -1.6px;
    margin: 12px 0;
  }
  .about-name {
    font-size: 13px;
    margin-bottom: 12px;
  }
  .about-name > span {
    font-size: 8px;
  }
  .about-bio {
    font-size: 11px;
    line-height: 1.75;
    max-width: 460px;
  }
  .about-bio p {
    margin-bottom: 8px;
  }
  .about-interests {
    margin: 10px 0 14px;
    gap: 6px;
  }
  .about-interests span {
    font-size: 8px;
    padding: 4px 8px;
  }
  .about-choices {
    gap: 9px;
  }
  .about-choices button {
    min-width: 108px;
    min-height: 42px;
    font-size: 12px;
    padding: 10px 13px;
    gap: 17px;
  }
  .about-response {
    font-size: 9px;
    max-width: 57%;
    margin-top: 8px;
  }
  .about-contact-card {
    width: 58%;
    margin-top: 9px;
    padding-top: 8px;
  }
  .about-contact-card p {
    font-size: 10px;
    line-height: 1.7;
  }
  .about-contact-card a {
    display: block;
    font-size: 10px;
    padding: 5px 0;
  }
  .about-contact-card a span {
    display: block;
    font-size: 8px;
  }
}
@media (max-width: 760px) and (max-height: 740px) and (min-height: 521px) {
  #about .story-panel.about-panel {
    top: 96px;
  }
  .about-panel h2 {
    font-size: 31px;
    margin: 10px 0;
  }
  .about-name {
    margin-bottom: 9px;
  }
  .about-bio {
    font-size: 10px;
    line-height: 1.65;
  }
  .about-bio p {
    margin-bottom: 6px;
  }
  .about-interests {
    margin: 8px 0 10px;
  }
}
@media (max-height: 680px) and (min-width: 761px), (max-height: 520px) {
  #about .story-panel.about-panel {
    top: 85px;
    max-height: calc(100svh - 145px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 14px;
    width: 53vw;
  }
  .about-panel h2 {
    font-size: 34px;
    margin: 10px 0;
  }
  .about-bio {
    font-size: 11px;
  }
  .about-interests {
    margin: 8px 0 12px;
  }
  .about-name {
    font-size: 12px;
    margin-bottom: 10px;
  }
  .about-panel .eyebrow {
    font-size: 8px;
  }
}
@media (max-height: 520px) {
  #end-signature {
    bottom: 12px;
    max-width: calc(100vw - 280px);
    font-size: 7px;
    letter-spacing: 0.6px;
  }
}

/* 两张可点的邀请：送花的暖黄、接招的珊瑚橙，同样醒目。 */
.about-choices {
  gap: 23px;
  padding: 6px 2px;
  min-height: 84px;
}
.about-choices button {
  position: relative;
  min-width: 174px;
  min-height: 72px;
  padding: 11px 14px;
  justify-content: flex-start;
  gap: 9px;
  border-radius: 25px 12px 25px 12px;
  transform: rotate(-3deg);
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.about-choices button:hover {
  transform: rotate(0deg) translateY(-5px) scale(1.035);
}
.about-choices button:active {
  transform: rotate(0deg) translateY(3px);
}
#about-contact {
  background: #ffdf69;
  color: #36260d;
  border: 2px solid #ffe898;
  box-shadow:
    0 6px 0 #7b612b,
    0 12px 25px #e5b5421a;
}
#about-decline {
  background: #ffa186;
  color: #3e2224;
  border: 2px solid #ffc3ac;
  box-shadow:
    0 6px 0 #874a4a,
    0 12px 25px #fd886321;
  transform: rotate(4deg);
  border-radius: 12px 25px 12px 25px;
}
#about-decline:hover {
  color: #3e2224;
  border-color: #ffd7bb;
  background: #ffb49b;
  transform: rotate(-2deg) translateY(-5px) scale(1.035);
}
#about-decline:disabled {
  transform: rotate(0);
  transition: none;
}
.about-button-icon {
  font-size: 33px;
  width: 32px;
  line-height: 1;
  text-align: center;
}
.about-button-copy {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 4px;
}
.about-button-copy small {
  font-size: 9px;
  letter-spacing: 1px;
  opacity: 0.7;
}
.about-button-copy strong {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 1px;
  line-height: 1.2;
}
.about-button-arrow {
  position: absolute;
  top: 11px;
  right: 11px;
  font-size: 14px;
  opacity: 0.7;
}
.about-response {
  margin-top: 13px;
}
.about-shard {
  background: #ffa186;
  border-color: #ffc3ac;
}
.about-shard span {
  color: #3e2224;
  font-size: 18px;
  font-weight: 650;
}
.about-panel[data-choice="contact"] .about-choices {
  min-height: 68px;
  padding-top: 0;
}
.about-panel[data-choice="contact"] #about-contact {
  min-height: 60px;
  transform: rotate(-2deg);
}
@media (max-width: 999px) and (min-width: 761px) {
  .about-choices {
    gap: 18px;
  }
  .about-choices button {
    min-width: 154px;
  }
  .about-button-copy strong {
    font-size: 20px;
  }
}
@media (max-width: 760px) {
  .about-choices {
    gap: 17px;
    min-height: 79px;
  }
  .about-choices button {
    min-width: 143px;
    min-height: 66px;
    padding: 9px 11px;
    gap: 8px;
  }
  .about-button-icon {
    font-size: 28px;
    width: 26px;
  }
  .about-button-copy strong {
    font-size: 19px;
  }
  .about-button-copy small {
    font-size: 8px;
  }
  .about-button-arrow {
    top: 10px;
    right: 9px;
    font-size: 11px;
  }
  body[data-chapter="6"] .companion {
    width: 62vw;
    max-width: 242px;
  }
}
@media (max-width: 360px) and (min-height: 741px) {
  #about .story-panel.about-panel {
    top: 96px;
  }
  .about-panel h2 {
    font-size: 32px;
  }
  .about-bio {
    font-size: 10px;
    line-height: 1.7;
  }
  .about-choices {
    gap: 12px;
  }
  .about-choices button {
    min-width: 0;
    width: calc((100vw - 58px) / 2);
    padding: 9px;
    gap: 5px;
  }
  .about-button-copy strong {
    font-size: 17px;
  }
  .about-button-icon {
    width: 23px;
    font-size: 25px;
  }
  .about-button-arrow {
    display: none;
  }
}
@media (max-width: 760px) and (max-height: 740px) {
  .about-choices {
    gap: 13px;
    min-height: 74px;
  }
  .about-choices button {
    min-width: 116px;
    min-height: 62px;
    padding: 9px;
    gap: 5px;
  }
  .about-button-icon {
    font-size: 25px;
    width: 22px;
  }
  .about-button-copy strong {
    font-size: 17px;
  }
  .about-button-copy small {
    font-size: 7px;
    letter-spacing: 0.3px;
  }
  .about-button-arrow {
    display: none;
  }
}

/* 下一段故事：两张醒目的邀请，扫光只在这一站播放。 */
#contact .contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  width: min(100%, 452px);
  margin-top: 25px;
  padding: 0 0 7px;
}
#contact .contact-action {
  --action-surface: #e5f493;
  --action-edge: #6b783b;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 61px;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid #ffffff50;
  border-radius: 13px;
  background: var(--action-surface);
  color: #20202b;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 5px 0 var(--action-edge), 0 12px 25px #00000024;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
#contact .contact-action-pdf {
  --action-surface: #cab6ff;
  --action-edge: #6f539e;
}
#contact .contact-action::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -50%;
  left: 0;
  width: 38%;
  height: 200%;
  background: linear-gradient(90deg, transparent, #ffffff6b, transparent);
  transform: translateX(-170%) skewX(-22deg);
  pointer-events: none;
}
#contact .contact-panel.is-active .contact-action::before {
  animation: contact-invitation-shine 6.5s ease-in-out infinite;
}
#contact .contact-panel.is-active .contact-action-pdf::before {
  animation-delay: 1.1s;
}
#contact .contact-action-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 29px;
  height: 29px;
  border: 1px solid #20202b21;
  border-radius: 50%;
  background: #ffffff40;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform 180ms ease;
}
#contact .contact-action:hover {
  color: #20202b;
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--action-edge), 0 17px 27px #00000030;
}
#contact .contact-action-works:hover .contact-action-icon {
  transform: translate(2px, -2px);
}
#contact .contact-action-pdf:hover .contact-action-icon {
  transform: translateY(2px);
}
#contact .contact-action:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--action-edge), 0 6px 12px #00000024;
}
#contact .contact-action:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
}
@keyframes contact-invitation-shine {
  0%, 64% {
    transform: translateX(-170%) skewX(-22deg);
  }
  87%, 100% {
    transform: translateX(370%) skewX(-22deg);
  }
}
@media (max-width: 760px) {
  #contact .contact-actions {
    gap: 11px;
    margin-top: 21px;
    width: min(100%, 380px);
  }
  #contact .contact-action {
    min-height: 56px;
    gap: 6px;
    padding: 12px 11px;
    font-size: 12px;
    border-radius: 11px;
  }
  #contact .contact-action-icon {
    width: 23px;
    height: 23px;
    font-size: 17px;
  }
}
@media (max-width: 360px) {
  #contact .contact-actions {
    gap: 9px;
  }
  #contact .contact-action {
    padding: 11px 8px;
    gap: 3px;
    font-size: 11px;
  }
  #contact .contact-action-icon {
    width: 20px;
    height: 20px;
    font-size: 15px;
  }
}
@media (max-height: 680px) and (min-width: 761px) {
  #contact .contact-actions {
    margin-top: 18px;
  }
  #contact .contact-action {
    min-height: 54px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.motion-paused #contact .contact-action,
.motion-paused #contact .contact-action-icon {
  transition: none;
}
.motion-paused #contact .contact-action::before {
  animation: none !important;
}
.modal-open #contact .contact-action::before {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  #contact .contact-action::before {
    animation: none !important;
  }
  #contact .contact-action,
  #contact .contact-action-icon {
    transition: none;
  }
}

/* 中等高度窗口收紧第六站的留白，给下方播报保留空间。 */
@media (min-width: 761px) and (min-height: 681px) and (max-height: 800px) {
  #contact .contact-panel {
    top: 17%;
  }
  #contact .contact-panel h2 {
    margin: 18px 0 17px;
  }
  #contact .contact-mail {
    margin-top: 18px;
    padding-bottom: 9px;
  }
  #contact .contact-actions {
    margin-top: 18px;
  }
}
@media (max-width: 760px) and (min-height: 501px) {
  #contact .contact-panel {
    top: max(96px, 15%);
  }
  #contact .contact-panel h2 {
    margin: 12px 0 10px;
    font-size: 36px;
  }
  #contact .story-description {
    font-size: 13px;
    line-height: 1.7;
  }
  #contact .contact-mail {
    margin-top: 12px;
    padding-bottom: 9px;
  }
  #contact .contact-actions {
    margin-top: 11px;
  }
  #contact .contact-action {
    min-height: 50px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
}
@media (max-width: 360px) and (min-height: 501px) {
  #contact .contact-panel {
    top: 96px;
  }
  #contact .contact-panel h2 {
    font-size: 34px;
  }
}

@media (min-width: 761px) and (max-height: 500px) {
  #contact .contact-panel h2 {
    font-size: 32px;
    margin: 12px 0 10px;
  }
  #contact .story-description {
    font-size: 12px;
    line-height: 1.55;
  }
  #contact .contact-mail {
    font-size: 20px;
    margin-top: 10px;
    padding-bottom: 7px;
  }
  #contact .contact-actions {
    margin-top: 12px;
  }
  #contact .contact-action {
    min-height: 48px;
    padding-block: 8px;
  }
}

/* 隐藏加映：正文变成纸张后，只留下同一块 WebGL 画布和电影字幕。 */
#about-really-decline {
  color: #28192e;
  background: #c7afff;
  border: 1px solid #efe6ff;
  box-shadow: 0 6px 0 #674999, 0 12px 25px #1510214d;
  transform: rotate(2deg);
}
#about-really-decline:hover { transform: translateY(-4px) rotate(-1deg); }
#about-really-decline .about-button-copy strong { font-size: clamp(17px,1.6vw,23px); }
#about-really-decline .about-button-copy small { color: #4f356d; }
.about-panel[data-choice="shattered"] .about-response,
.about-panel[data-choice="departed"] .about-response { visibility: hidden; }
.encore-locked { overflow: hidden !important; }
body.encore-active > :not(.world-canvas):not(.encore-overlay):not(script),
body.encore-active > :not(.world-canvas):not(.encore-overlay):not(script) * { visibility: hidden !important; pointer-events: none !important; }
.encore-overlay {
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none; color: #fff5df;
  background: linear-gradient(180deg,#0b102956,transparent 23%,transparent 60%,#09091999);
  isolation: isolate;
}
.encore-overlay[hidden],.encore-overlay [hidden] { display: none !important; }
.encore-overlay button { pointer-events: auto; cursor: pointer; }
.encore-overlay button:focus-visible { outline: 2px solid #ffe795; outline-offset: 5px; }
.encore-masthead { position: absolute; top: 30px; left: 5.5%; right: 5.5%; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.encore-masthead > span { font: 10px monospace; letter-spacing: 2.5px; }
.encore-masthead b { color:#f3cc55; margin-left:10px; font-size:20px; vertical-align:middle; }
.encore-masthead small { display:block; color:#efe5d59c; margin-top:6px; font:10px sans-serif; letter-spacing:2px; }
.encore-exit { padding:10px 16px; border:1px solid #f6e9cf55; border-radius:30px; background:#13142666; backdrop-filter:blur(10px); font-size:11px; color:#fff1d6; }
.encore-reel { position:absolute; top:85px; left:5.5%; right:5.5%; height:1px; background:#eee2cd27; }
.encore-reel i { display:block; width:100%; height:100%; transform-origin:left; background:#ffd166; }
.encore-caption { position:absolute; left:5.5%; bottom:102px; max-width:min(680px,80%); text-shadow:0 2px 28px #080919; }
.encore-kicker { margin:0 0 12px; font:10px monospace; letter-spacing:2.5px; color:#f5d887; }
.encore-caption h2 { margin:0; font-size:clamp(25px,3.3vw,45px); line-height:1.25; font-weight:650; letter-spacing:-1px; }
.encore-subtitle { margin:14px 0 0; font-size:13px; line-height:1.8; color:#fff0d4bd; }
.encore-controls { position:absolute; left:5.5%; right:5.5%; bottom:28px; display:flex; align-items:center; gap:16px; }
.encore-motion,.encore-next { min-height:40px; padding:9px 15px; border:1px solid #ead4b54d; border-radius:24px; background:#1b162861; color:#f5e8cb; font-size:11px; }
.encore-next { color:#19121f; background:#f4d78b; border-color:#fff2bd; }
.encore-recall { display:flex; align-items:center; gap:24px; padding:15px 24px; min-height:64px; border-radius:16px; color:#201329; background:#f8d363; border:1px solid #fff1b3; box-shadow:0 6px 0 #937325,0 8px 50px #ffae372b; transform:rotate(-1deg); transition:transform .18s,box-shadow .18s; }
.encore-recall span { font-size:10px; opacity:.65; }
.encore-recall strong { font-size:21px; font-weight:650; }
.encore-recall { min-width:218px; justify-content:center; }
.encore-recall:hover { transform:translateY(-4px) rotate(0); box-shadow:0 10px 0 #937325,0 16px 55px #ffae3740; }
.encore-recall:active { transform:translateY(3px); box-shadow:0 2px 0 #937325; }
.encore-cast { font-size:10px; line-height:1.8; letter-spacing:.5px; color:#f5d7bb99; margin-left:auto; max-width:260px; }
.encore-comic { position:absolute; left:57%; top:21%; width:280px; height:190px; display:grid; align-content:center; justify-items:center; opacity:0; transform:scale(.4) rotate(-12deg); background:#ffe469; color:#372341; clip-path:polygon(5% 8%,27% 15%,37% 0,53% 13%,75% 4%,78% 22%,99% 29%,86% 45%,100% 60%,79% 70%,82% 93%,58% 84%,45% 100%,32% 84%,9% 94%,16% 71%,0 59%,15% 41%,0 28%,18% 25%); }
.encore-comic strong { font-size:64px; font-weight:900; letter-spacing:-5px; text-shadow:2px 2px 0 #fff9d1; }
.encore-comic span { font-size:12px; font-weight:700; letter-spacing:3px; }
.encore-overlay[data-phase="crash"] .encore-comic { opacity:1; transform:scale(1) rotate(-12deg); transition:transform .3s cubic-bezier(.2,1.6,.3,1); }
.encore-spider { position:absolute; right:16%; top:33%; opacity:0; transform:translateY(8px) rotate(7deg); background:#fff0d4; color:#412752; padding:14px 20px; border:3px solid #442143; border-radius:19px 20px 2px 20px; font-size:25px; font-weight:800; box-shadow:4px 5px 0 #33253f; }
.encore-spider small { display:block; margin-top:4px; font-size:10px; font-weight:600; }
.encore-mj .encore-spider { opacity:1; transform:translateY(0) rotate(7deg); transition:transform .3s; }
.encore-overlay[data-phase="dance"] .encore-caption { display:none; }
.encore-overlay[data-phase="dance"][data-compatible="true"] .encore-caption { display:block; top:109px; bottom:auto; left:50%; transform:translateX(-50%); text-align:center; width:90%; max-width:800px; }
.encore-overlay[data-phase="dance"] .encore-caption h2 { font-size:clamp(23px,2.8vw,36px); }
.encore-overlay[data-phase="dance"] .encore-subtitle { margin-top:8px; }
.encore-overlay[data-phase="dance"] .encore-controls { justify-content:center; }
.encore-overlay[data-phase="dance"] .encore-motion { position:absolute; left:0; }
.encore-overlay[data-phase="dance"] .encore-cast { position:absolute; right:0; }
.encore-overlay[data-phase="preparing"] .encore-caption h2 { font-size:22px; }
.encore-overlay:is([data-phase="preparing"],[data-phase="fold"],[data-phase="pack"],[data-phase="shades"],[data-phase="mount"]) .encore-caption { display:none; }
.encore-overlay[data-phase="preparing"] .encore-motion { visibility:hidden; }
body.encore-preparing:not(.encore-active) .about-panel { animation:encore-first-touch .3s ease-out both; transform-origin:50% 70%; }
@keyframes encore-first-touch { to { filter:brightness(.85); } }
.encore-fallback { position:absolute; inset:0; z-index:-1; display:grid; align-content:center; justify-items:center; gap:28px; text-align:center; background:radial-gradient(ellipse at 50% 50%,#562d60,#17152d 70%); }
.encore-fallback > span { font-size:90px; color:#f3cc55; }
.encore-fallback p { color:#eacfd3; font-size:14px; line-height:2; }
.encore-still * { transition:none !important; }
@media(max-width:760px) {
  .encore-masthead { top:21px; left:6%; right:6%; gap:12px; }
  .encore-masthead > span { font-size:8px; letter-spacing:1px; }
  .encore-masthead small { font-size:8px; letter-spacing:1px; }
  .encore-exit { padding:9px 11px; font-size:9px; white-space:nowrap; }
  .encore-reel { top:72px; left:6%; right:6%; }
  .encore-caption { left:6%; right:6%; max-width:none; bottom:96px; }
  .encore-caption h2 { font-size:27px; }
  .encore-subtitle { font-size:11px; line-height:1.65; margin-top:9px; }
  .encore-kicker { font-size:8px; letter-spacing:1.7px; margin-bottom:9px; }
  .encore-controls { bottom:23px; left:6%; right:6%; }
  .encore-comic { width:195px; height:140px; left:auto; right:3%; top:25%; }
  .encore-comic strong { font-size:48px; }
  .encore-comic span { font-size:9px; }
  .encore-overlay[data-phase="dance"] .encore-caption { top:91px; width:88%; }
  .encore-overlay[data-phase="dance"] .encore-caption h2 { font-size:23px; }
  .encore-overlay[data-phase="dance"] .encore-controls { bottom:49px; }
  .encore-overlay[data-phase="dance"] .encore-motion { bottom:83px; left:50%; transform:translateX(-50%); padding:5px 12px; min-height:28px; font-size:9px; background:#191327; }
  .encore-overlay[data-phase="dance"] .encore-cast { top:80px; left:0; right:0; max-width:none; text-align:center; font-size:8px; }
  .encore-recall { padding:14px 22px; min-height:61px; gap:20px; }
  .encore-recall strong { font-size:22px; }
  .encore-spider { right:4%; top:36%; font-size:20px; padding:10px 13px; }
}
@media(max-height:500px) and (min-width:761px) {
  .encore-masthead { top:13px; }
  .encore-masthead small { display:none; }
  .encore-reel { top:53px; }
  .encore-caption { bottom:71px; }
  .encore-caption h2 { font-size:26px; }
  .encore-subtitle { margin-top:5px; font-size:11px; }
  .encore-controls { bottom:13px; }
  .encore-overlay[data-phase="dance"] .encore-caption { top:64px; }
  .encore-overlay[data-phase="dance"] .encore-caption h2 { font-size:23px; }
  .encore-overlay[data-phase="dance"] .encore-subtitle { display:none; }
  .encore-recall { min-height:45px; padding:9px 16px; }
  .encore-recall strong { font-size:18px; }
  .encore-cast { max-width:170px; font-size:8px; }
  .encore-comic { width:185px; height:130px; top:18%; }
  .encore-comic strong { font-size:42px; }
}
@media(prefers-reduced-motion:reduce) { .encore-overlay * { transition:none !important; } }
@media(prefers-reduced-motion:reduce) { body.encore-preparing .about-panel { animation:none; } }