/* Colors and type: edit these variables to change the mood of the entire page. */
:root {
  color-scheme: dark;
  --cream: #f3e8da;
  --gold: #e6b274;
  --muted: #a89ba8;
  --line: rgba(228,188,150,.18);
  --serif: "Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --roman: Georgia,"Times New Roman",serif
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  min-width: 0;
  isolation: isolate;
  background: #0b0911;
  color: var(--cream);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased
}

body:has(dialog[open]) {
  overflow: hidden
}

button,a {
  -webkit-tap-highlight-color: transparent
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer
}

a {
  color: inherit
}

button:focus-visible,a:focus-visible {
  outline: 2px solid #fbd193;
  outline-offset: 6px
}

button:disabled {
  cursor: wait
}

button {
  touch-action: manipulation
}

::selection {
  background: #9a5939;
  color: #fff3df
}

[hidden] {
  display: none!important
}

/* The entire illustration is local CSS/SVG. Canvas draws only the light particles. */
.night {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 62% 33%,#302239 0,#1d172a 32%,#110e1c 61%,#09090f 100%);
  transition: filter 1.8s
}

body.lit .night {
  filter: brightness(1.22) saturate(1.1)
}

#sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.grain {
  position: absolute;
  inset: -50%;
  opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' 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' opacity='.55' filter='url(%23n)'/%3E%3C/svg%3E");
  transform: rotate(8deg)
}

.moon-wrap {
  position: absolute;
  top: 10%;
  right: 13%;
  width: 190px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(237,217,193,.17),rgba(179,141,181,.06) 52%,transparent 72%)
}

.moon {
  position: absolute;
  inset: 35px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#fff4d9,#dfd3bd 46%,#a69bab);
  box-shadow: 0 0 30px #e7ccaa24,0 0 90px #d7b4ca20,inset -14px -8px 22px #6a55774d;
  opacity: .83
}

.moon::before,.moon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #97869c22
}

.moon::before {
  width: 17px;
  height: 12px;
  top: 28%;
  left: 29%;
  box-shadow: 28px 31px 0 -1px #8d7d951c,-5px 48px 0 2px #8d7d9517
}

.moon::after {
  width: 8px;
  height: 8px;
  left: 67%;
  top: 23%;
  box-shadow: -37px 44px 0 1px #8d7d951c
}

.cloud {
  position: absolute;
  width: 115%;
  height: 130px;
  left: -8%;
  border-radius: 50%;
  filter: blur(30px);
  background: linear-gradient(90deg,transparent,#9d7c9a12,#b6948d14,transparent);
  animation: fog 35s ease-in-out infinite alternate
}

.cloud-one {
  bottom: 28%
}

.cloud-two {
  bottom: 17%;
  opacity: .6;
  animation-delay: -18s;
  animation-duration: 47s
}

.landscape {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: min(61vh,570px);
  min-height: 300px;
  opacity: .87
}

.ground {
  position: absolute;
  bottom: -140px;
  left: -10%;
  width: 120%;
  height: 220px;
  border-radius: 50% 50% 0 0;
  background: #09090f;
  box-shadow: 0 -20px 90px #0a091347
}

.topbar {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  padding: 0 5.5%;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.brand {
  text-decoration: none;
  font: 10px var(--roman);
  letter-spacing: .19em;
  color: #dfcfbeaa;
  display: flex;
  align-items: center;
  gap: 12px
}

.brand>span {
  font-size: 26px;
  color: var(--gold)
}

.brand i {
  margin-left: 8px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
  font-size: 8px;
  font-style: normal;
  color: #bcabb47a;
  letter-spacing: .15em
}

.music-controls {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0
}

.music-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border: 1px solid #dec2a72b;
  border-radius: 30px;
  background: #17111e54;
  backdrop-filter: blur(12px);
  color: #e7d6c3bc;
  font-size: 11px;
  letter-spacing: .08em;
  transition: border-color .25s,background .25s
}

.music-button:hover,.music-button[aria-pressed="true"] {
  border-color: #e2b37b73;
  background: #7b493828;
  color: #f3d4ac
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid #dec2a72b;
  border-radius: 30px;
  background: #17111e70;
  backdrop-filter: blur(12px);
  color: #e7d6c3bc
}

.volume-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 17px;
  color: #e9bb81;
  cursor: pointer
}

.volume-icon svg {
  display: block;
  width: 17px;
  height: 17px
}

#volume-slider {
  width: 92px;
  height: 28px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer
}

#volume-slider::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(to right,#eab87b 0%,#eab87b var(--volume-progress,30%),#e7d0b54a var(--volume-progress,30%),#e7d0b54a 100%)
}

#volume-slider::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -5px;
  border: 2px solid #f5d8a8;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: #ad6e41;
  box-shadow: 0 0 0 3px #dba35d27,0 0 12px #dd995c70
}

#volume-slider::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(to right,#eab87b 0%,#eab87b var(--volume-progress,30%),#e7d0b54a var(--volume-progress,30%),#e7d0b54a 100%)
}

#volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid #f5d8a8;
  border-radius: 50%;
  background: #ad6e41;
  box-shadow: 0 0 0 3px #dba35d27,0 0 12px #dd995c70
}

#volume-slider:focus-visible {
  outline: 2px solid #eab87b;
  outline-offset: 3px;
  border-radius: 3px
}

#volume-value {
  min-width: 33px;
  color: #efc993;
  font: 10px var(--sans);
  font-variant-numeric: tabular-nums;
  text-align: right
}

.equalizer {
  height: 13px;
  display: flex;
  gap: 2px;
  align-items: center
}

.equalizer i {
  height: 6px;
  width: 2px;
  border-radius: 2px;
  background: currentColor
}

.equalizer i:nth-child(2) {
  height: 12px
}

.equalizer i:nth-child(3) {
  height: 9px
}

.music-button[aria-pressed="true"] .equalizer i {
  animation: equalizer .7s ease-in-out infinite alternate
}

.music-button[aria-pressed="true"] .equalizer i:nth-child(2) {
  animation-delay: -.3s
}

.music-button[aria-pressed="true"] .equalizer i:nth-child(3) {
  animation-delay: -.5s
}

.hero {
  position: relative;
  min-height: 810px;
  height: 100svh;
  max-height: 1100px;
  padding: 130px 24px 28px;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow: hidden
}

.hero-copy {
  text-align: center;
  position: relative;
  z-index: 1
}

.eyebrow {
  margin: 0;
  color: #d8ac78b3;
  font: 9px var(--roman);
  letter-spacing: .25em;
  line-height: 1.7
}

.hero-copy .eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px
}

.hero-copy .eyebrow>span {
  display: block;
  width: 24px;
  height: 1px;
  background: #d7ad786b
}

.hero h1 {
  margin: 23px 0 17px;
  font-size: clamp(48px,5.9vw,78px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .12em;
  color: #e9ddd3;
  text-shadow: 0 4px 35px #0003
}

.hero h1>span {
  color: #f3d6b0;
  text-shadow: 0 0 45px #e5ac7629
}

.hero h1 em {
  display: block;
  margin-top: 16px;
  color: #ba9f9a;
  font: italic 18px var(--roman);
  letter-spacing: .035em
}

.intro {
  margin: 0;
  color: #c3b3bdc2;
  font-size: 13px;
  line-height: 2.1;
  letter-spacing: .07em
}

.lantern-scene {
  position: relative;
  width: min(850px,100%);
  flex: 1;
  min-height: 335px;
  max-height: 470px;
  display: grid;
  place-items: center;
  margin-top: 6px
}

.orbit {
  position: absolute;
  left: 50%;
  top: 49%;
  border: 1px solid #c3a4ad0c;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none
}

.orbit-one {
  width: 390px;
  height: 270px;
  rotate: -18deg
}

.orbit-two {
  width: 460px;
  height: 320px;
  rotate: 16deg
}

.orbit-one::before {
  content: "";
  position: absolute;
  top: 13%;
  right: 14%;
  width: 4px;
  height: 4px;
  border: 1px solid #d9b68566;
  border-radius: 50%
}

.scene-label {
  position: absolute;
  top: 49%;
  font: 9px/1.9 var(--roman);
  letter-spacing: .14em;
  color: #bda7a66b
}

.scene-label b {
  font-weight: 400;
  font-size: 7px;
  letter-spacing: .11em;
  color: #a08b9a59
}

.label-left {
  left: 6%;
  text-align: right
}

.label-right {
  right: 5%;
  text-align: left
}

.pumpkin {
  position: relative;
  z-index: 1;
  width: 310px;
  height: 283px;
  margin-top: -5px;
  padding: 0;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 26px 16px #0005);
  animation: float 6s ease-in-out infinite;
  transition: filter 1.8s
}

.pumpkin:hover .pumpkin-art {
  transform: translateY(-3px) scale(1.025)
}

.pumpkin:active .pumpkin-art {
  transform: scale(.98)
}

.pumpkin-art {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  overflow: visible;
  transition: transform .3s
}

.lantern-aura {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: radial-gradient(circle,#f08b4029,#b5613e14 35%,#754a7008 58%,transparent 72%);
  opacity: 0;
  transform: translate(-50%,-50%) scale(.6);
  transition: opacity 1.8s,transform 2s
}

.ground-glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 7px;
  width: 220px;
  height: 50px;
  border-radius: 50%;
  background: #e88028;
  filter: blur(35px);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 1.5s
}

.carving,.teeth {
  transition: fill 1.5s,stroke 1.5s
}

.carving-glow {
  opacity: 0;
  transition: opacity 1.5s
}

.carving path {
  transition: fill 1.5s
}

.lit .lantern-aura {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1.9)
}

.lit .pumpkin {
  filter: drop-shadow(0 0 25px #f9853545) drop-shadow(0 26px 16px #0005)
}

.lit .carving {
  fill: url(#inner);
  stroke: #ffac4e
}

.lit .teeth {
  fill: #7e341a
}

.lit .carving-glow {
  opacity: .85
}

.lit .ground-glow {
  opacity: .65
}

/* 首页环境光：只使用少量透明度和位移变化，不改变场景几何。 */
.ambient-stardust {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s ease
}

.hero-in-view .ambient-stardust { opacity: 1 }
.ambient-stardust i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #e1d0df;
  box-shadow: 0 0 6px #e2cce067;
  opacity: .38
}
.ambient-stardust i:nth-child(1) { left: 16%; top: 21%; }
.ambient-stardust i:nth-child(2) { left: 38%; top: 11%; }
.ambient-stardust i:nth-child(3) { left: 61%; top: 25%; }
.ambient-stardust i:nth-child(4) { left: 79%; top: 40%; }
.ambient-stardust i:nth-child(5) { left: 28%; top: 48%; }
.hero-in-view .ambient-stardust i { animation: home-stardust 14s ease-in-out infinite alternate }
.hero-in-view .ambient-stardust i:nth-child(2) { animation-delay: -3s; animation-duration: 17s }
.hero-in-view .ambient-stardust i:nth-child(3) { animation-delay: -8s; animation-duration: 19s }
.hero-in-view .ambient-stardust i:nth-child(4) { animation-delay: -5s; animation-duration: 16s }
.hero-in-view .ambient-stardust i:nth-child(5) { animation-delay: -11s; animation-duration: 20s }
.hero-in-view .moon { animation: home-moonlight 20s ease-in-out infinite alternate }
.hero-in-view .castle-window-glimmer { animation: home-window-light 18s ease-in-out infinite }
.hero-in-view .castle-window-glimmer:nth-child(3) { animation-delay: -7s; animation-duration: 23s }
.hero-in-view .castle-window-glimmer:nth-child(5) { animation-delay: -13s; animation-duration: 21s }

.lantern-embers {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 49%;
  width: min(300px, 80vw);
  height: 260px;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.3s ease
}
.lantern-embers i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffe1a6;
  box-shadow: 0 0 5px #f7b85d9c;
  opacity: 0
}
.lantern-embers i:nth-child(1) { --x: 13%; --y: 72%; --delay: -1s }
.lantern-embers i:nth-child(2) { --x: 23%; --y: 82%; --delay: -5s }
.lantern-embers i:nth-child(3) { --x: 31%; --y: 90%; --delay: -8s }
.lantern-embers i:nth-child(4) { --x: 70%; --y: 88%; --delay: -3s }
.lantern-embers i:nth-child(5) { --x: 79%; --y: 79%; --delay: -9s }
.lantern-embers i:nth-child(6) { --x: 88%; --y: 68%; --delay: -6s }
.lit .lantern-embers { opacity: .8 }
.lit .lantern-embers i { animation: home-ember-rise 12s ease-in-out var(--delay) infinite }
.lit .carving-glow { animation: home-lantern-breathe 7s ease-in-out infinite alternate }
.lit .ground-glow { animation: home-ground-breathe 7s ease-in-out infinite alternate }

@keyframes home-lantern-breathe { from { opacity: .65 } to { opacity: .93 } }
@keyframes home-ground-breathe { from { opacity: .48 } to { opacity: .7 } }
@keyframes home-moonlight { from { opacity: .78 } to { opacity: .86 } }
@keyframes home-window-light { 0%, 100% { opacity: .68 } 35%, 55% { opacity: 1 } 75% { opacity: .76 } }
@keyframes home-stardust { from { opacity: .2; transform: translateY(3px) } to { opacity: .55; transform: translate(3px, -6px) } }
@keyframes home-ember-rise { 0%, 100% { opacity: 0; transform: translateY(0) } 25% { opacity: .65 } 75% { opacity: .3 } 95% { opacity: 0; transform: translateY(-38px) } }

.lantern-caption {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: max-content;
  transform: translateX(-50%);
  text-align: center;
  color: #cdb5a7b0
}

.tiny-diamond {
  font-size: 6px;
  color: #d5a367
}

.lantern-caption p {
  margin: 8px 0 12px;
  font-size: 11px;
  letter-spacing: .12em
}

.caption-line {
  display: block;
  width: 1px;
  height: 24px;
  margin: auto;
  background: linear-gradient(#b08e6480,transparent)
}

.secret-star {
  position: absolute;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f4d28c;
  font-size: 18px;
  text-shadow: 0 0 14px #f4b35c80;
  transition: color .3s,scale .3s
}

.secret-star::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #e8b97e21;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s,transform .3s
}

.secret-star span {
  animation: twinkle 3.3s ease-in-out infinite
}

.secret-star:hover,.secret-star:focus-visible {
  color: #fff3ce;
  scale: 1.2
}

.secret-star:hover::before,.secret-star:focus-visible::before {
  opacity: 1;
  transform: scale(1.3)
}

.secret-star.revealed {
  color: #d9a5d1
}

.star-one {
  left: 21%;
  top: 10%
}

.star-two {
  right: 22%;
  top: 6%;
  font-size: 14px
}

.star-two span {
  animation-delay: -1.7s
}

.star-three {
  right: 14%;
  top: 62%;
  font-size: 21px
}

.star-three span {
  animation-delay: -.7s
}

.hero-bottom {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin-top: 27px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end
}

.hero-bottom p {
  margin: 0;
  color: #9e8c9f;
  font-size: 10px;
  letter-spacing: .035em
}

.hero-bottom p span {
  color: #c6a06a;
  margin-right: 6px;
  font-size: 11px
}

.hero-bottom>a {
  text-decoration: none;
  justify-self: center;
  color: #d0b6a0;
  font-size: 10px;
  letter-spacing: .1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px
}

.hero-bottom>a span {
  color: #dfa65f;
  font-size: 20px;
  animation: arrow 2s ease-in-out infinite
}

.edition {
  justify-self: end;
  color: #9a899b7a;
  font: 8px var(--roman);
  letter-spacing: .15em
}

/* The letter and small game form the second act of the page. */
.letter-section,.game-section {
  position: relative;
  width: 100%;
  padding-right: max(8%,calc((100vw - 1100px)/2));
  padding-left: max(8%,calc((100vw - 1100px)/2));
  background: #0c0a12
}

.section-number {
  position: absolute;
  left: max(8%,calc((100vw - 1100px)/2));
  top: 42px;
  color: #837486;
  font: 9px var(--roman);
  letter-spacing: .16em
}

.section-number span {
  padding: 0 10px;
  color: #a98865
}

.letter-section {
  min-height: 0;
  padding-top: 98px;
  padding-bottom: 70px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(34px,5vw,64px);
  isolation: isolate;
  border-top: 1px solid #c9a78013;
  background: linear-gradient(#0c0a12ef,#0c0a12 35%)
}

.letter-section::after {
  content: "";
  position: absolute;
  inset: 12% 5% 6% 46%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 53% 50%,#aa85a324,#a77f7020 28%,#6d53760b 49%,transparent 72%)
}

.letter-section .section-number,
.letter-intro,
.letter-section .album-cover {
  position: relative;
  z-index: 1
}

.letter-section .section-number { position: absolute }
.letter-section .album-cover { scale: 1.12 }

.letter-intro h2 {
  margin: 17px 0 16px;
  font-size: clamp(29px,3.2vw,42px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .07em
}

.letter-intro>p:not(.eyebrow) {
  margin: 0;
  color: #9e909f;
  font-size: 12px;
  line-height: 2;
  letter-spacing: .04em
}

.letter-intro>p:not(.eyebrow)::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin-top: 23px;
  background: linear-gradient(90deg,#d3ad7880,transparent)
}

.letter-intro .outline-button {
  margin-top: 22px;
  padding: 14px 21px;
  font-size: 12px;
  letter-spacing: .09em
}

.outline-button {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  margin-top: 28px;
  padding: 12px 18px;
  border: 1px solid #c69a694d;
  background: #8e58320a;
  color: #e0b987;
  font-size: 11px;
  letter-spacing: .07em;
  transition: background .25s,border-color .25s
}

.outline-button:hover {
  background: #8e583225;
  border-color: #e5b57f9e
}

.outline-button span {
  font-size: 16px
}

.envelope {
  position: relative;
  justify-self: center;
  isolation: isolate;
  width: 330px;
  height: 220px;
  border: 0;
  background: transparent;
  rotate: -7deg;
  transition: rotate .4s,translate .4s;
  filter: drop-shadow(4px 20px 27px #0006)
}

.envelope:hover {
  rotate: -3deg;
  translate: 0 -6px
}

.envelope-back {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg,#3a2939,#241b29);
  border: 1px solid #a77a6552
}

.letter-peek {
  position: absolute;
  z-index: -1;
  left: 15px;
  right: 15px;
  top: -24px;
  height: 130px;
  padding-top: 20px;
  border: 1px solid #b1997766;
  background: linear-gradient(135deg,#b4a38c,#8d7d73);
  color: #392c31;
  font-size: 20px;
  letter-spacing: .12em;
  transition: translate .4s
}

.letter-peek i {
  display: block;
  margin-top: 11px;
  font: 7px var(--roman);
  letter-spacing: .1em;
  color: #65504d
}

.envelope:hover .letter-peek {
  translate: 0 -9px
}

.envelope-fold {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg,#352638,#241a29);
  clip-path: polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);
  border: 1px solid #a77a6538
}

.envelope-fold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(28deg,transparent 49.7%,#a77a652b 50%,transparent 50.3%)
}

.envelope-flap {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,#443042,#2b2030);
  clip-path: polygon(0 0,100% 0,50% 62%);
  filter: drop-shadow(0 2px 1px #0003)
}

.wax-seal {
  position: absolute;
  z-index: 1;
  left: calc(50% - 22px);
  top: 100px;
  width: 44px;
  height: 44px;
  border-radius: 49% 44% 48% 45%;
  background: radial-gradient(circle at 40% 30%,#a86844,#713c32 70%,#4d2927);
  box-shadow: inset 0 0 0 3px #a8654445,0 3px 7px #0004;
  display: grid;
  place-items: center;
  color: #c9935c;
  font-size: 20px;
  border: 1px solid #c38a5647
}

.envelope-address {
  position: absolute;
  bottom: 22px;
  left: 0;
  width: 100%;
  color: #af929780;
  font: 7px var(--roman);
  letter-spacing: .1em
}

.game-section {
  padding-top: 107px;
  padding-bottom: 80px;
  border-top: 1px solid #c9a78012
}

.game-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 31px
}

.game-heading h2 {
  margin: 15px 0 0;
  font-size: clamp(25px,3vw,34px);
  font-weight: 400;
  letter-spacing: .04em
}

.game-heading>p {
  margin: 0 0 3px;
  color: #8f8194;
  font-size: 11px;
  line-height: 2;
  letter-spacing: .03em
}

/* 午夜秘境：独立的花园舞台、线索记录、数字封印与开箱动效。 */
.mystery-shell {
  border: 1px solid #bd976538;
  background: #14101c;
  box-shadow: 0 24px 70px #0003;
}
.mystery-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 18px 24px;
  color: #c8b3b7;
  font-size: 11px;
  letter-spacing: .06em;
  border-bottom: 1px solid #c9a77816;
}
#mystery-progress { color: #cda575; white-space: nowrap; }
.mystery-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  color: #817389;
  font-size: 10px;
  letter-spacing: .08em;
  text-align: center;
}
.mystery-steps li { padding: 15px 6px; border-bottom: 1px solid #b68f641c; }
.mystery-steps li[aria-current] {
  color: #f1ca95;
  border-bottom-color: #d3a367;
  background: linear-gradient(0deg, #d5a36912, transparent);
}
.mystery-steps .is-done { color: #b79b78; }
.mystery-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.mystery-scene {
  position: relative;
  isolation: isolate;
  min-height: 520px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 55% 38%, #58415a47, transparent 62%),
    radial-gradient(1px 1px at 17% 18%, #d6c0d6b3, transparent),
    radial-gradient(1px 1px at 37% 29%, #d6c0d67a, transparent),
    radial-gradient(1px 1px at 53% 11%, #d6c0d680, transparent),
    radial-gradient(1px 1px at 85% 41%, #d6c0d680, transparent), #191321;
}
.mystery-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, #0c0b13b3, transparent 55%);
  pointer-events: none;
}
.courtyard-caption, .courtyard-time {
  position: absolute;
  left: 24px;
  font-size: 9px;
  letter-spacing: .15em;
  color: #ac95a78c;
  pointer-events: none;
}
.courtyard-caption { top: 24px; }
.courtyard-time { bottom: 18px; left: 0; width: 100%; text-align: center; }
.courtyard-castle { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; opacity: .8; }
.courtyard-mist {
  position: absolute;
  z-index: -1;
  bottom: 30px;
  left: -15%;
  width: 130%;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, #a789ac22, #c1a58c12, transparent);
  filter: blur(23px);
  animation: fog 16s ease-in-out infinite alternate;
  pointer-events: none;
}
.mystery-object, .mystery-mailbox {
  position: absolute;
  z-index: 2;
  padding: 0;
  border: 0;
  background: transparent;
  transition: filter .35s, opacity .6s;
}
.mystery-object:disabled { cursor: default; opacity: .4; filter: saturate(.4); }
.mystery-object:not(:disabled):hover, .mystery-mailbox:hover { filter: brightness(1.22); }
.hotspot-label {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max-content;
  transform: translateX(-50%);
  color: #cdb7a5;
  font-size: 10px;
  letter-spacing: .08em;
  text-shadow: 0 2px 8px #000;
}
.is-found .hotspot-label { color: #edc68b; }
.is-found .hotspot-label::before { content: '◆ '; font-size: 6px; vertical-align: 2px; }
.mystery-moon { top: 12%; right: 12%; width: 82px; height: 102px; }
.mystery-moon-disc {
  position: absolute;
  top: 3px;
  left: 10px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #eee2c9, #b5a4b7);
  box-shadow: 0 0 35px #e1c8cb26, inset -10px -3px 16px #79658140;
}
.mystery-moon-disc::after {
  content: '';
  position: absolute;
  top: 13px;
  left: 18px;
  width: 8px;
  height: 6px;
  border-radius: 50%;
  background: #a58d9d26;
  box-shadow: 15px 20px 0 3px #a58d9d1f;
}
.mystery-mailbox { top: 46%; left: 50%; width: 146px; height: 213px; transform: translate(-50%, -35%); perspective: 700px; }
.box-post {
  position: absolute;
  width: 10px;
  height: 68px;
  bottom: 25px;
  left: calc(50% - 5px);
  background: linear-gradient(90deg, #352c2b, #968068, #3b2e2d);
  box-shadow: 0 10px 20px #0009;
}
.box-post::after { content: ''; position: absolute; bottom: 0; left: -15px; width: 40px; height: 5px; background: #605045; border-radius: 50%; }
.box-body, .box-door {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 12px;
  height: 144px;
  border: 1px solid #ad8a5d99;
  border-radius: 65px 65px 7px 7px;
}
.box-body { background: radial-gradient(ellipse at 50% 100%, #8f5f2e, #19141a 67%); box-shadow: 0 15px 20px #0006; }
.box-door {
  z-index: 2;
  transform-origin: 0 50%;
  background: linear-gradient(115deg, #73614b, #30272c 25%, #463434 72%, #87684a);
  box-shadow: inset 0 0 0 5px #17121a55, inset 0 0 0 6px #b78f5740;
  transition: transform 1.25s cubic-bezier(.2,.7,.2,1), filter 1s;
}
.box-door::before { content: ''; position: absolute; top: 57px; left: 26px; right: 26px; height: 4px; background: #110d13; border-bottom: 1px solid #ae85516b; }
.box-door i { position: absolute; top: 28px; left: 0; width: 100%; color: #b79765; font-size: 16px; font-style: normal; text-align: center; }
.box-door b { position: absolute; bottom: 25px; left: calc(50% - 20px); width: 40px; height: 20px; border: 1px solid #bf9b6873; border-radius: 3px; background: repeating-linear-gradient(90deg, #241c23 0 12px, #ad885b55 12px 13px); }
.box-door b::after { content: '· · ·'; position: absolute; inset: 0; color: #cfaa73; font: 15px/16px var(--serif); text-align: center; }
.box-letter {
  position: absolute;
  top: 49px;
  left: 29px;
  right: 29px;
  height: 98px;
  padding-top: 27px;
  border: 1px solid #e5c58c;
  background: linear-gradient(145deg, #ead6b3, #b69a7a);
  color: #61433a;
  font-size: 12px;
  letter-spacing: .08em;
  opacity: 0;
  transform: translateY(20px);
  box-shadow: 0 0 25px #f5c98138;
  transition: transform 1.3s .4s, opacity .6s .3s;
}
.box-light {
  position: absolute;
  top: -70px;
  left: -80px;
  width: 306px;
  height: 306px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffcd7b66, #c77f2d1f 40%, transparent 70%);
  opacity: 0;
  transform: scale(.6);
  transition: opacity 1.4s, transform 1.8s;
}
.is-opening .box-door { transform: rotateY(-112deg); filter: brightness(.7); }
.is-opening .box-letter { opacity: 1; transform: translateY(-72px); }
.is-opening .box-light { opacity: 1; transform: scale(1.3); }
.mystery-book { bottom: 62px; left: 8%; width: 104px; height: 95px; }
.book-cover { position: absolute; top: 10px; left: 3px; right: 3px; height: 61px; border: 1px solid #a57b5073; background: #402d32; transform: rotate(-8deg); box-shadow: 3px 9px 16px #0006; }
.book-pages { position: absolute; top: 9px; left: 8px; right: 8px; height: 55px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: linear-gradient(90deg, #a88d70, #cfb28b 48%, #755842 50%, #b29778 54%, #96806c); transform: rotate(-8deg); border-radius: 2px 4px 4px 2px; }
.book-pages i { margin: 10px 7px; background: repeating-linear-gradient(transparent 0 5px, #5b433d80 5px 6px); }
.mystery-lantern { bottom: 59px; right: 7%; width: 102px; height: 109px; }
.mystery-lantern svg { width: 100%; height: 95px; filter: drop-shadow(0 0 16px #ef9d452e); }
.hint-target::after { content: ''; position: absolute; inset: -6px; border: 1px solid #d7ab6799; border-radius: 8px; animation: hint-breathe 2s ease-in-out infinite; pointer-events: none; }
.mystery-panel { min-width: 0; padding: 37px 32px 28px; border-left: 1px solid #b893631c; align-self: center; }
.mystery-kicker { margin: 0 0 15px; color: #c4a078; font-size: 10px; letter-spacing: .16em; line-height: 1.8; }
.mystery-intro h3, .mystery-complete h3 { margin: 0 0 23px; color: #ead8c9; font-size: 27px; font-weight: 400; line-height: 1.8; letter-spacing: .07em; }
.mystery-intro>p:not(.mystery-kicker), .mystery-complete>p:not(.mystery-kicker) { color: #b09bae; font-size: 13px; line-height: 2.1; }
.gold-button { min-height: 44px; padding: 11px 22px; border: 1px solid #d5a56861; background: linear-gradient(120deg, #6a422a9c, #33232b); color: #f1cc9a; font-size: 11px; letter-spacing: .08em; transition: border-color .25s, filter .25s; }
.gold-button:hover { filter: brightness(1.22); border-color: #f0c28f99; }
.gold-button:disabled { filter: none; opacity: .65; }
.gold-button span { margin-left: 16px; }
.mystery-intro .gold-button, .mystery-complete .gold-button { margin-top: 17px; }
.mystery-inscription { margin: 0 0 16px; padding: 0; color: #dfc6b0; font-size: 19px; line-height: 1.9; letter-spacing: .06em; }
.investigation-guide { color: #b09aaf; font-size: 12px; line-height: 1.9; }
.clue-journal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 20px 0; }
.clue-journal button { min-height: 58px; padding: 10px 3px; border: 1px solid #c09b6733; background: #c2975c0b; color: #dbb68a; font-size: 11px; }
.clue-journal button span { display: block; margin-top: 6px; font-size: 9px; color: #a38b9f; }
.clue-journal button:disabled { opacity: .43; cursor: default; background: transparent; }
.clue-journal button:not(:disabled):hover { border-color: #e5bd7c88; }
.mystery-lock { margin-top: 23px; padding-top: 19px; border-top: 1px solid #c39a6626; }
.lock-caption { margin: 0 0 17px; color: #b59cac; font-size: 11px; line-height: 1.8; }
.mystery-lock fieldset { min-width: 0; border: 0; padding: 0; margin: 0 0 15px; }
.mystery-lock legend { margin-bottom: 8px; padding: 0; color: #c9b6bb; font-size: 10px; letter-spacing: .06em; }
.digit-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.digit-options label { position: relative; cursor: pointer; }
.digit-options input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.digit-options span { display: grid; place-items: center; min-height: 38px; border: 1px solid #a786702e; background: #0c0a1280; color: #b4a0ab; font-size: 14px; transition: background .2s, border-color .2s; }
.digit-options input:checked+span { color: #ffdb9b; background: #a16b362e; border-color: #e4b36d99; box-shadow: inset 0 0 16px #e1ab4d0c; }
.digit-options input:focus-visible+span { outline: 2px solid #fbd193; outline-offset: 3px; }
.digit-options input:disabled { cursor: default; }
.unlock-button { margin-top: 3px; width: 100%; }
.mystery-feedback { margin: 19px 0 0; padding: 11px 0 0; color: #e0bb85; font-size: 11px; line-height: 1.9; }
.mystery-feedback:empty { display: none; }
.mystery-feedback.is-error { border-top: 1px solid #c3876738; color: #d9a18f; }
.mystery-hint { margin: 17px 0 0; padding: 13px 15px; border-left: 1px solid #d6ad6f88; background: #c09b620b; color: #c3a9b2; font-size: 11px; line-height: 1.95; }
.mystery-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 13px 23px; border-top: 1px solid #b58f601c; }
.mystery-footer>span { color: #9b839e; font-size: 10px; }
.mystery-footer>div { display: flex; gap: 20px; }
.mystery-footer button { min-height: 35px; padding: 4px 0; border: 0; background: none; color: #ccb08c; font-size: 10px; }
.mystery-footer button:hover { color: #ffe0ac; }
.mystery-footer button:disabled { color: #736477; cursor: default; }
.complete-emblem { display: block; margin-bottom: 20px; color: #efc789; font-size: 39px; text-shadow: 0 0 25px #e4b37666; }
.mystery-sparks { position: absolute; z-index: 4; inset: 0; pointer-events: none; overflow: hidden; }
.gold-spark { position: absolute; width: var(--size); height: var(--size); border-radius: 50%; box-shadow: 0 0 9px #fdd88e; opacity: 0; animation: golden-dust var(--duration) ease-out var(--delay) both; }
.mystery-clue-dialog { width: min(490px, calc(100% - 30px)); padding: 47px 34px 34px; text-align: center; }
.mystery-clue-dialog h2 { margin: 16px 0 23px; font-size: 25px; letter-spacing: .06em; }
.clue-evidence { padding: 22px 12px; border: 1px solid #c9a16b3d; background: radial-gradient(ellipse at 50% 0, #cfa46215, transparent 80%); color: #ebc590; font-size: 16px; line-height: 2.1; white-space: pre-line; }
.clue-evidence[data-type="moon"]::before { content: ''; display: block; width: 37px; height: 37px; margin: 0 auto 15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f5e3be, #ac96ab); box-shadow: 0 0 22px #ddc29433; }
.clue-story { margin: 23px 0 0; color: #bba4b3; font-size: 13px; line-height: 2.05; text-align: left; white-space: pre-line; }
.mystery-clue-dialog .outline-button { margin-top: 24px; }
.midnight-letter h2 { font-size: 25px; letter-spacing: .06em; }
@keyframes hint-breathe { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes golden-dust {
  0% { opacity: 0; transform: translate(0, 0) scale(.2); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); }
}

.closing {
  position: relative;
  padding: 30px 24px 70px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 120%,#38223326,transparent 60%),#0c0a12
}

.closing>span {
  color: #d2a371;
  font-size: 13px
}

.closing>p {
  margin: 24px 0 21px;
  color: #d7c6c7;
  font-size: 24px;
  line-height: 1.9;
  font-weight: 400;
  letter-spacing: .13em
}

.closing small {
  display: block;
  font: 8px var(--roman);
  letter-spacing: .22em;
  color: #8d788e
}

.closing>a {
  display: inline-block;
  margin-top: 28px;
  text-decoration: none;
  color: #b7967c;
  font-size: 10px;
  letter-spacing: .1em
}

footer {
  padding: 24px 5.5%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  background: #09080e;
  border-top: 1px solid #d4aa7e14;
  color: #8571889e;
  font: 8px var(--roman);
  letter-spacing: .15em
}

footer i {
  padding: 0 6px;
  font-style: normal;
  color: #bb9168
}

/* Native dialogs provide focus trapping, Escape close and mobile-friendly scrolling. */
dialog {
  position: fixed;
  max-height: 88svh;
  margin: auto;
  overflow: auto;
  border: 1px solid #bc93694a;
  background: radial-gradient(ellipse at 50% 0,#62425433,transparent 48%),#19131f;
  color: var(--cream);
  box-shadow: 0 30px 130px #0009;
  scrollbar-width: thin;
  scrollbar-color: #72546a #19131f
}

dialog::backdrop {
  background: #07060bd9;
  backdrop-filter: blur(13px)
}

dialog[open] {
  animation: dialog-in .35s ease both
}

dialog::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid #e0bd9312;
  pointer-events: none
}

.letter-dialog {
  width: min(590px,calc(100% - 30px));
  padding: 51px 58px 38px
}

.close-dialog {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 1px solid #c2a48d33;
  border-radius: 50%;
  background: #19131f80;
  color: #cbb4a6;
  font: 23px/1 Arial,sans-serif;
  transition: rotate .25s,background .25s
}

.close-dialog:hover {
  rotate: 90deg;
  background: #6a3e3c44
}

.dialog-eyebrow {
  margin: 0;
  color: #b99a81;
  font: 9px var(--roman);
  letter-spacing: .17em;
  text-align: center
}

.letter-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 23px 0;
  color: #d9a969;
  font-size: 13px
}

.letter-divider::before,.letter-divider::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg,transparent,#c79d6759)
}

.letter-divider::after {
  rotate: 180deg
}

dialog h2 {
  font-size: 27px;
  font-weight: 400;
  letter-spacing: .14em;
  text-align: center;
  margin: 0 0 25px;
  color: #f0d7bc
}

.letter-body {
  color: #c4b1b5;
  font-size: 13px;
  line-height: 2.1;
  letter-spacing: .04em
}

.letter-body p {
  margin: 0 0 16px
}

.letter-body .signoff {
  padding-top: 7px;
  color: #e0b789
}

.signoff span {
  color: #9f8d9e;
  font-size: 11px
}

.letter-end {
  display: block;
  text-align: right;
  color: #b8815d;
  font-size: 29px;
  margin-top: 5px
}

.secret-dialog {
  width: min(430px,calc(100% - 30px));
  padding: 48px 34px 33px;
  text-align: center
}

.secret-emblem {
  display: block;
  margin-bottom: 20px;
  color: #e7bf82;
  font-size: 33px;
  text-shadow: 0 0 26px #f2bb7480
}

.secret-dialog h2 {
  margin: 17px 0;
  font-size: 23px;
  letter-spacing: .08em
}

.secret-dialog>p:not(.dialog-eyebrow) {
  margin: 0;
  color: #c8b3be;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .04em
}

.secret-dialog .outline-button {
  margin-top: 23px
}

.secret-dialog small {
  display: block;
  margin-top: 23px;
  color: #826e8b;
  font-size: 10px;
  letter-spacing: .06em
}

.toast {
  position: fixed;
  z-index: 50;
  bottom: 24px;
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border: 1px solid #c19b6b54;
  background: #1b1521f0;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px #0004;
  color: #dfc8b0;
  font-size: 11px;
  line-height: 1.8;
  text-align: center;
  letter-spacing: .04em;
  opacity: 0;
  transform: translate(-50%,14px);
  pointer-events: none;
  transition: opacity .25s,transform .25s
}

.toast.visible {
  opacity: 1;
  transform: translate(-50%,0)
}

@keyframes fog {
  from {
    transform: translateX(-4%)
  }
  to {
    transform: translateX(5%)
  }
}

@keyframes float {
  0%,100% {
    translate: 0 0
  }
  50% {
    translate: 0 -7px
  }
}

@keyframes twinkle {
  0%,100% {
    opacity: .5;
    scale: .85
  }
  50% {
    opacity: 1;
    scale: 1.05
  }
}

@keyframes arrow {
  0%,100% {
    translate: 0 0
  }
  50% {
    translate: 0 5px
  }
}

@keyframes equalizer {
  from {
    scale: 1 .5
  }
  to {
    scale: 1 1.2
  }
}

@keyframes dialog-in {
  from {
    opacity: 0;
    translate: 0 15px;
    scale: .98
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1
  }
}





@media(min-height:950px) and (min-width:800px) {
  .hero {
    padding-top: 160px
  }
  .hero h1 {
    font-size: 82px
  }
  .intro {
    font-size: 14px
  }
  .lantern-scene {
    max-height: 480px
  }
  .pumpkin {
    width: 335px;
    height: 300px
  }
}

@media(max-width:900px) {
  .brand i {
    display: none
  }
  .label-left {
    left: 1%
  }
  .label-right {
    right: 0
  }
  .letter-section {
    gap: 35px;
    padding-left: 7%;
    padding-right: 7%
  }
  .envelope {
    width: 290px;
    height: 195px
  }
  .wax-seal {
    top: 86px
  }
  .game-section {
    padding-left: 7%;
    padding-right: 7%
  }
  .section-number {
    left: 7%
  }
  .game-heading>p {
    max-width: 200px
  }
  .hero-bottom p {
    max-width: 220px;
    line-height: 1.8
  }
  .edition {
    font-size: 7px
  }
  .moon-wrap {
    right: 8%
  }
}

@media(max-width:620px) {
  .topbar {
    height: 74px;
    padding: 0 22px
  }
  .brand {
    font-size: 7px;
    gap: 7px;
    letter-spacing: .12em
  }
  .brand>span {
    font-size: 22px
  }
  .music-button {
    font-size: 10px;
    padding: 9px 11px;
    gap: 7px
  }
  .equalizer {
    scale: .9
  }
  .music-controls {
    gap: 8px
  }
  .volume-control {
    gap: 6px;
    padding: 0 9px
  }
  #volume-slider {
    width: 76px
  }
  .hero {
    min-height: 790px;
    height: 100svh;
    max-height: 1000px;
    padding: 130px 18px 25px
  }
  .hero-copy .eyebrow {
    font-size: 8px;
    letter-spacing: .16em
  }
  .hero h1 {
    font-size: 51px;
    margin: 26px 0 18px
  }
  .hero h1 em {
    font-size: 15px;
    margin-top: 18px
  }
  .intro {
    font-size: 11px;
    line-height: 2.1;
    letter-spacing: .04em
  }
  .lantern-scene {
    width: 100%;
    min-height: 310px;
    max-height: 390px;
    margin-top: 4px
  }
  .pumpkin {
    width: 260px;
    height: 244px
  }
  .orbit-one {
    width: 285px;
    height: 230px
  }
  .orbit-two {
    width: 325px;
    height: 265px
  }
  .scene-label {
    display: none
  }
  .lantern-caption {
    bottom: 0
  }
  .lantern-caption p {
    font-size: 10px;
    letter-spacing: .06em
  }
  .caption-line {
    height: 17px
  }
  .star-one {
    left: 8%;
    top: 10%
  }
  .star-two {
    right: 9%;
    top: 8%
  }
  .star-three {
    right: 1%;
    top: 60%
  }
  .secret-star {
    width: 44px;
    height: 44px
  }
  .secret-star span {
    font-size: 17px
  }
  .moon-wrap {
    top: 3%;
    right: -3%;
    width: 128px;
    opacity: .8
  }
  .moon {
    inset: 28px
  }
  .landscape {
    height: 45vh;
    min-height: 280px;
    width: 160%;
    left: -30%
  }
  .cloud-one {
    bottom: 29%
  }
  .hero-bottom {
    grid-template-columns: 1fr;
    gap: 17px;
    margin-top: 27px;
    text-align: center
  }
  .hero-bottom p {
    max-width: none;
    font-size: 9px;
    grid-row: 1;
    justify-self: center
  }
  .hero-bottom>a {
    grid-row: 2;
    font-size: 9px;
    gap: 5px
  }
  .edition {
    display: none
  }
  .letter-section {
    grid-template-columns: minmax(0,1fr);
    gap: 0;
    padding: 84px 27px 50px;
    min-height: 0
  }
  .letter-section::after {
    inset: 42% 0 3%;
    background: radial-gradient(ellipse at 50% 52%,#aa85a320,#a77f7019 30%,#6d53760b 49%,transparent 72%)
  }
  .letter-section .album-cover { margin-top: 48px }
  .section-number {
    top: 34px;
    left: 27px;
    font-size: 8px
  }
  .letter-intro {
    position: relative
  }
  .letter-intro .eyebrow {
    font-size: 8px;
    letter-spacing: .15em
  }
  .letter-intro h2 {
    font-size: 31px;
    margin: 15px 0 14px
  }
  .letter-intro>p:not(.eyebrow) {
    font-size: 11px;
    line-height: 2
  }
  .outline-button {
    margin-top: 24px;
    font-size: 10px;
    padding: 11px 16px
  }
  .envelope {
    width: min(270px,100%);
    height: 184px;
    margin: 72px 0 5px;
    rotate: -6deg
  }
  .wax-seal {
    top: 81px;
    width: 40px;
    height: 40px;
    left: calc(50% - 20px)
  }
  .letter-peek {
    font-size: 18px
  }
  .envelope-address {
    font-size: 6px;
    bottom: 20px
  }
  .game-section {
    padding: 95px 20px 65px
  }
  .game-heading {
    display: block;
    margin-bottom: 23px
  }
  .game-heading .eyebrow {
    font-size: 8px;
    letter-spacing: .16em
  }
  .game-heading h2 {
    font-size: 25px;
    line-height: 1.6;
    letter-spacing: .02em
  }
  .game-heading>p {
    margin-top: 14px;
    max-width: none;
    font-size: 10px;
    line-height: 1.9
  }
  .closing {
    padding-bottom: 56px
  }
  .closing>p {
    font-size: 23px;
    letter-spacing: .1em
  }
  .closing small {
    font-size: 7px
  }
  .closing>a {
    font-size: 9px
  }
  footer {
    padding: 21px 20px;
    font-size: 6px;
    letter-spacing: .07em;
    line-height: 1.8
  }
  footer>span:last-child {
    text-align: right
  }
  .letter-dialog {
    padding: 46px 27px 27px
  }
  .letter-body {
    font-size: 12px;
    line-height: 2.05
  }
  .letter-dialog h2 {
    font-size: 25px
  }
  .dialog-eyebrow {
    font-size: 8px
  }
  .secret-dialog {
    padding: 48px 27px 29px
  }
  .secret-dialog h2 {
    font-size: 21px
  }
  .secret-dialog>p:not(.dialog-eyebrow) {
    font-size: 13px
  }
  .toast {
    font-size: 10px;
    padding: 10px 14px
  }
}

@media(max-width: 800px) {
  .mystery-layout { grid-template-columns: minmax(0, 1fr); }
  .mystery-scene { min-height: 420px; height: 420px; border-bottom: 1px solid #b893631c; }
  .mystery-panel { border-left: 0; padding: 30px; }
  .mystery-intro h3, .mystery-complete h3 { font-size: 26px; }
  .mystery-moon { right: 15%; }
  .mystery-book { left: 13%; }
  .mystery-lantern { right: 12%; }
}
@media(max-width: 620px) {
  .mystery-toolbar { padding: 16px 14px; font-size: 9px; letter-spacing: .02em; }
  .mystery-steps { font-size: 9px; letter-spacing: .02em; }
  .mystery-steps li { padding: 14px 2px; }
  .mystery-scene { min-height: 375px; height: 375px; }
  .courtyard-caption { top: 20px; left: 18px; font-size: 8px; }
  .courtyard-time { font-size: 8px; }
  .mystery-moon { top: 12%; right: 7%; width: 72px; height: 92px; }
  .mystery-moon-disc { width: 52px; height: 52px; }
  .mystery-mailbox { width: 136px; height: 203px; }
  .box-body, .box-door { height: 137px; }
  .box-door::before { left: 23px; right: 23px; }
  .box-letter { font-size: 10px; }
  .mystery-book { left: 5%; bottom: 49px; width: 88px; height: 86px; }
  .mystery-lantern { right: 4%; bottom: 47px; width: 88px; height: 99px; }
  .mystery-lantern svg { height: 84px; }
  .hotspot-label { font-size: 9px; }
  .mystery-panel { padding: 27px 19px 23px; }
  .mystery-kicker { font-size: 9px; }
  .mystery-intro h3, .mystery-complete h3 { font-size: 25px; }
  .mystery-intro>p:not(.mystery-kicker), .mystery-complete>p:not(.mystery-kicker) { font-size: 12px; }
  .mystery-inscription { font-size: 18px; }
  .digit-options span { min-height: 43px; }
  .mystery-footer { padding: 12px 17px; }
  .mystery-footer>span { font-size: 9px; }
  .mystery-footer>div { gap: 24px; }
  .mystery-clue-dialog { padding: 47px 23px 29px; }
  .mystery-clue-dialog h2 { font-size: 22px; }
  .clue-evidence { font-size: 14px; }
  .clue-story { font-size: 12px; }
  .midnight-letter h2 { font-size: 22px; }
}

@media(max-width:520px) {
  .topbar {
    height: 108px;
    padding: 10px 16px 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px
  }
  .music-controls {
    width: 100%;
    justify-content: center
  }
  #volume-slider {
    width: clamp(70px,28vw,112px)
  }
}

@media(pointer:coarse) {
  #volume-slider {
    height: 32px
  }
  #volume-slider::-webkit-slider-runnable-track {
    height: 4px
  }
  #volume-slider::-moz-range-track {
    height: 4px
  }
  #volume-slider::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -6px
  }
  #volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px
  }
}

@media(max-width:360px) {
  .letter-section .album-cover { min-height: 0; padding: 25px 15px }
  .letter-section .album-cover-moon { flex: none; width: 60px; height: 60px; margin-bottom: 24px }
  .letter-section .album-cover-title { font-size: 24px }
  .letter-section .album-cover-dedication { margin-top: 14px }
  .letter-section .album-cover-foot { margin-top: 32px }
}

@media(prefers-reduced-motion:reduce) {
  .hero-in-view .moon, .hero-in-view .castle-window-glimmer,
  .hero-in-view .ambient-stardust i, .lit .carving-glow,
  .lit .ground-glow, .lit .lantern-embers i { animation: none !important }
  .lantern-embers { display: none }
  html {
    scroll-behavior: auto
  }
  *,*::before,*::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important
  }
}