@font-face {
  font-family: "Mianmian Kuaile";
  src: url("assets/fonts/ZCOOLKuaiLe-Regular.ttf?v=1") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  color-scheme: light;
  --ink: #3e4a40;
  --ink-soft: #69786c;
  --leaf: #4f7f52;
  --leaf-dark: #35643e;
  --paper: #fffdf4;
  --sun: #f4c85b;
  --scene-width: min(100vw, 56.25svh);
  --font-body: "MiSans", "HarmonyOS Sans SC", "HONOR Sans CN", "OPPO Sans", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --font-letter: "Mianmian Kuaile", "Yuanti SC", "YouYuan", "骞煎渾", var(--font-body);
  font-family: var(--font-body);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #edf4e9;
  overscroll-behavior: none;
}

button,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.experience,
.opening {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 360px;
  overflow: hidden;
}

.ambient-backdrop,
.opening__art {
  position: absolute;
  inset: -4%;
  background-image: url("assets/images/opening-mobile.png?v=20260812-clean");
  background-repeat: no-repeat;
}

.ambient-backdrop {
  background-size: cover;
  background-position: center 42%;
  opacity: 0.2;
  filter: saturate(0.75) brightness(1.08);
}

.ambient-backdrop::after {
  position: absolute;
  inset: 0;
  background: rgba(244, 247, 233, 0.4);
  content: "";
}

.opening {
  width: var(--scene-width);
  margin-inline: auto;
  box-shadow: 0 0 70px rgba(64, 92, 65, 0.13);
  isolation: isolate;
}

.opening__art {
  z-index: -3;
  /* The 112% top-aligned crop keeps the generated mark below the viewport. */
  background-size: auto 112%;
  background-position: center top;
  animation: scene-arrival 3.2s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.sun-wash {
  position: absolute;
  z-index: -2;
  inset: 18% 0 22%;
  background: rgba(255, 253, 235, 0.22);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 76%, transparent);
  pointer-events: none;
}

.music-toggle {
  position: absolute;
  z-index: 4;
  top: max(12px, calc(env(safe-area-inset-top) + 8px));
  right: max(12px, calc(env(safe-area-inset-right) + 8px));
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(53, 100, 62, 0.2);
  border-radius: 50%;
  background: rgba(255, 253, 244, 0.66);
  box-shadow: 0 4px 15px rgba(62, 74, 64, 0.08);
  color: var(--leaf-dark);
  cursor: pointer;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.music-toggle__note {
  font-family: Georgia, serif;
  font-size: 23px;
  line-height: 1;
  transform: translateY(-1px);
}

.music-toggle__slash {
  position: absolute;
  width: 23px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-45deg);
  transition: opacity 180ms ease;
}

.music-toggle.is-playing .music-toggle__slash {
  opacity: 0;
}

.music-toggle:focus-visible {
  outline: 3px solid rgba(244, 200, 91, 0.6);
  outline-offset: 3px;
}

.music-status {
  position: absolute;
  z-index: 4;
  top: max(66px, calc(env(safe-area-inset-top) + 62px));
  right: max(12px, calc(env(safe-area-inset-right) + 8px));
  max-width: 168px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid rgba(53, 100, 62, 0.15);
  border-radius: 4px;
  background: rgba(255, 253, 244, 0.82);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
  text-align: right;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.music-status:empty {
  display: none;
}

.opening__content {
  position: absolute;
  z-index: 2;
  top: clamp(214px, 33.5svh, 340px);
  left: 50%;
  width: min(calc(84% - env(safe-area-inset-left) - env(safe-area-inset-right)), 390px);
  min-height: 270px;
  transform: translateX(-50%);
  text-align: center;
}

.recipient,
.found,
.opened-letter {
  animation: content-arrival 1.25s 0.35s ease-out both;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--leaf);
  font-family: var(--font-letter);
  font-size: clamp(14px, 1.8dvh, 16px);
  font-weight: 600;
  letter-spacing: 0;
}

h1,
h2,
p {
  text-wrap: balance;
}

h1,
h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-letter);
  font-weight: 600;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(24px, 3.2svh, 30px);
  line-height: 1.45;
}

.prompt {
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.9dvh, 18px);
}

.recipient-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: center;
  gap: 12px;
  width: min(100%, 330px);
  margin: 20px auto 0;
}

.recipient-form input {
  width: 100%;
  height: 48px;
  border: 0;
  border-bottom: 1px solid rgba(62, 74, 64, 0.35);
  border-radius: 0;
  outline: 0;
  background: rgba(255, 253, 244, 0.25);
  color: var(--ink);
  font-family: var(--font-letter);
  font-size: 20px;
  letter-spacing: 0;
  text-align: center;
  transition: border-color 220ms ease, background-color 220ms ease;
}

.recipient-form input::placeholder {
  color: rgba(62, 74, 64, 0.42);
  font-size: 15px;
}

.recipient-form input:focus {
  border-color: var(--leaf);
  background: rgba(255, 253, 244, 0.68);
}

.open-letter,
.sound-choice__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(53, 100, 62, 0.28);
  border-radius: 6px;
  background: rgba(255, 253, 244, 0.72);
  box-shadow: 0 5px 18px rgba(80, 101, 68, 0.08);
  color: var(--leaf-dark);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.open-letter {
  position: relative;
  border-style: dashed;
}

.open-letter::after {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(53, 100, 62, 0.12);
  border-radius: 3px;
  content: "";
  pointer-events: none;
}

.open-letter:hover,
.sound-choice__button:hover:not(:disabled) {
  background: rgba(255, 255, 249, 0.94);
  box-shadow: 0 7px 20px rgba(80, 101, 68, 0.14);
  transform: translateY(-1px);
}

.open-letter:active,
.sound-choice__button:active:not(:disabled) {
  transform: translateY(1px);
}

.sign-button:focus-visible,
.open-letter:focus-visible,
.sound-choice__button:focus-visible,
.recipient-form input:focus-visible {
  outline: 3px solid rgba(244, 200, 91, 0.6);
  outline-offset: 3px;
}

.sign-button {
  position: relative;
  display: grid;
  width: 58px;
  height: 58px;
  padding: 6px;
  place-items: center;
  border: 1px solid rgba(53, 100, 62, 0.3);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.92), transparent 38%),
    rgba(250, 252, 239, 0.86);
  box-shadow:
    inset 0 0 0 3px rgba(79, 127, 82, 0.08),
    0 6px 18px rgba(64, 91, 66, 0.12);
  color: var(--leaf-dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: transform 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.sign-button::after {
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(53, 100, 62, 0.26);
  border-radius: inherit;
  content: "";
}

.sign-button > span:first-child {
  position: relative;
  z-index: 2;
  transform: translateY(10px);
  transition: opacity 180ms ease, transform 240ms ease;
}

.sign-button:hover:not(:disabled) {
  box-shadow:
    inset 0 0 0 3px rgba(79, 127, 82, 0.1),
    0 8px 22px rgba(64, 91, 66, 0.18);
  transform: translateY(-2px) rotate(-2deg);
}

.sign-button:active:not(:disabled) {
  box-shadow: inset 0 3px 7px rgba(53, 100, 62, 0.15);
  transform: translateY(2px) scale(0.96);
}

.clover-seal {
  position: absolute;
  z-index: 1;
  top: 9px;
  left: 50%;
  width: 22px;
  height: 22px;
  opacity: 0.78;
  transform: translateX(-50%) scale(0.72) rotate(-8deg);
  transition: opacity 180ms ease, transform 420ms cubic-bezier(0.22, 1.35, 0.36, 1);
}

.clover-seal i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 60% 60% 50% 60%;
  background: rgba(232, 243, 219, 0.72);
  transform-origin: 0 0;
}

.clover-seal i:nth-child(1) { transform: rotate(0deg) translate(1px, -10px); }
.clover-seal i:nth-child(2) { transform: rotate(90deg) translate(1px, -10px); }
.clover-seal i:nth-child(3) { transform: rotate(180deg) translate(1px, -10px); }
.clover-seal i:nth-child(4) { transform: rotate(270deg) translate(1px, -10px); }

.sign-button.is-stamped {
  background: rgba(237, 246, 221, 0.94);
  box-shadow: inset 0 2px 8px rgba(53, 100, 62, 0.18);
  color: var(--leaf);
  transform: translateY(2px) scale(0.95);
}

.sign-button.is-stamped > span:first-child {
  opacity: 0;
  transform: translateY(14px);
}

.sign-button.is-stamped .clover-seal {
  top: 18px;
  opacity: 1;
  transform: translateX(-50%) scale(1.12) rotate(7deg);
}

.feedback {
  min-height: 22px;
  margin: 10px 0 0;
  color: #966c62;
  font-size: 15px;
  line-height: 1.5;
}

.recipient.is-gently-wrong {
  animation: gentle-nudge 420ms ease;
}

.found {
  padding-top: 12px;
}

.found__spark {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  color: var(--sun);
  font-size: 30px;
  line-height: 40px;
  animation: spark-breathe 2.4s ease-in-out infinite;
}

.found h2 {
  font-size: clamp(32px, 4.2svh, 40px);
}

.found > p:not(.found__spark) {
  margin: 12px auto 0;
  color: var(--ink);
  font-size: clamp(16px, 2svh, 18px);
  line-height: 1.75;
}

.sound-question {
  margin: 15px auto 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}

.sound-question p {
  margin: 0;
}

.sound-question p + p {
  color: var(--ink);
  font-weight: 600;
}

.sound-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: min(100%, 300px);
  margin: 14px auto 0;
  perspective: 600px;
}

.sound-choice__button {
  position: relative;
  flex-direction: column;
  gap: 7px;
  isolation: isolate;
  min-height: 82px;
  min-width: 0;
  padding: 10px 8px 9px;
  overflow: hidden;
  border: 0;
  border-radius: 2px;
  background:
    linear-gradient(100deg, rgba(79, 127, 82, 0.035), transparent 22% 76%, rgba(244, 200, 91, 0.05)),
    rgba(255, 253, 244, 0.9);
  box-shadow:
    0 6px 14px rgba(80, 101, 68, 0.09),
    inset 0 0 0 1px rgba(90, 111, 77, 0.16);
  color: var(--ink-soft);
  font-size: 15px;
  transform: rotate(-0.8deg);
  clip-path: polygon(0 4px, 4px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 5px 100%, 0 calc(100% - 5px));
}

.sound-choice__button--quiet {
  transform: rotate(0.8deg);
}

.sound-choice__button::before {
  position: absolute;
  z-index: -1;
  inset: 5px;
  border: 1px dashed rgba(79, 127, 82, 0.22);
  content: "";
  transition: border-color 240ms ease, box-shadow 240ms ease;
}

.sound-choice__button::after {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(244, 200, 91, 0.56);
  box-shadow: inset 0 1px 2px rgba(116, 82, 26, 0.16);
  content: "";
}

.sound-choice__button.is-selected {
  background:
    linear-gradient(100deg, rgba(79, 127, 82, 0.07), transparent 26% 72%, rgba(244, 200, 91, 0.09)),
    rgba(250, 253, 237, 0.96);
  box-shadow:
    0 10px 20px rgba(64, 91, 66, 0.16),
    inset 0 0 0 1px rgba(53, 100, 62, 0.32);
  color: var(--leaf-dark);
  transform: translateY(-5px) rotate(0deg);
}

.sound-choice__button.is-selected::before {
  border-color: rgba(53, 100, 62, 0.62);
  box-shadow: inset 0 0 12px rgba(116, 157, 87, 0.1);
}

.sound-choice__button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.sound-availability {
  min-height: 17px;
  margin: 7px 0 0 !important;
  color: var(--ink-soft) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.music-staff {
  position: relative;
  display: block;
  width: 51px;
  height: 24px;
  color: var(--leaf);
}

.music-staff i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(79, 127, 82, 0.26);
  transform: scaleX(0.78);
  transition: background-color 240ms ease, transform 360ms ease;
}

.music-staff i:nth-child(1) { top: 5px; transform-origin: left; }
.music-staff i:nth-child(2) { top: 11px; transform-origin: right; }
.music-staff i:nth-child(3) { top: 17px; transform-origin: left; }

.music-staff b {
  position: absolute;
  top: -6px;
  left: 20px;
  font-family: Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 1px rgba(255, 255, 255, 0.7);
  transform: rotate(-7deg);
  transition: transform 360ms cubic-bezier(0.22, 1.35, 0.36, 1);
}

.is-selected .music-staff i {
  background: rgba(53, 100, 62, 0.72);
  transform: scaleX(1);
}

.is-selected .music-staff b {
  transform: translateY(-2px) rotate(4deg) scale(1.08);
}

.feather {
  position: relative;
  display: block;
  width: 43px;
  height: 26px;
  border: 1.5px solid rgba(105, 120, 108, 0.66);
  border-top-color: transparent;
  border-radius: 78% 8% 78% 12%;
  transform: rotate(-18deg) skewX(-8deg);
  transition: border-color 240ms ease, transform 360ms cubic-bezier(0.22, 1.35, 0.36, 1);
}

.feather::before {
  position: absolute;
  top: 11px;
  left: 4px;
  width: 37px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.58;
  transform: rotate(-13deg);
  transform-origin: right;
}

.feather::after {
  position: absolute;
  top: 2px;
  right: 7px;
  width: 22px;
  height: 17px;
  background: repeating-linear-gradient(155deg, transparent 0 4px, currentColor 4px 5px, transparent 5px 8px);
  content: "";
  opacity: 0.2;
}

.is-selected .feather {
  border-color: rgba(53, 100, 62, 0.82);
  border-top-color: transparent;
  color: var(--leaf);
  transform: translateY(-2px) rotate(-11deg) skewX(-8deg);
}

.open-letter {
  min-width: 140px;
  margin: 8px auto 0;
  border-color: rgba(199, 154, 55, 0.42);
  border-radius: 24px;
  background: rgba(255, 252, 230, 0.86);
  box-shadow: 0 5px 18px rgba(139, 106, 38, 0.1);
  color: #74612e;
}

.open-letter::after {
  border-color: rgba(199, 154, 55, 0.18);
  border-radius: 20px;
}

.cord-knot {
  position: relative;
  display: block;
  width: 22px;
  height: 17px;
}

.cord-knot::before,
.cord-knot::after {
  position: absolute;
  top: 2px;
  width: 11px;
  height: 8px;
  border: 1.5px solid #d4aa4f;
  border-radius: 50%;
  content: "";
}

.cord-knot::before {
  left: 1px;
  transform: rotate(25deg);
}

.cord-knot::after {
  right: 1px;
  transform: rotate(-25deg);
}

.opened-letter {
  width: min(100%, 310px);
  min-height: 210px;
  margin-inline: auto;
  padding: 54px 28px 30px;
  border: 1px solid rgba(91, 111, 78, 0.2);
  background: rgba(255, 253, 244, 0.88);
  box-shadow: 0 15px 45px rgba(80, 101, 68, 0.12);
  outline: 0;
  clip-path: polygon(0 6px, 6px 0, 12px 6px, 18px 0, 24px 6px, 30px 0, 36px 6px, 42px 0, 48px 6px, 54px 0, 60px 6px, 66px 0, 72px 6px, 78px 0, 84px 6px, 90px 0, 96px 6px, 102px 0, 108px 6px, 114px 0, 120px 6px, 126px 0, 132px 6px, 138px 0, 144px 6px, 150px 0, 156px 6px, 162px 0, 168px 6px, 174px 0, 180px 6px, 186px 0, 192px 6px, 198px 0, 204px 6px, 210px 0, 216px 6px, 222px 0, 228px 6px, 234px 0, 240px 6px, 246px 0, 252px 6px, 258px 0, 264px 6px, 270px 0, 276px 6px, 282px 0, 288px 6px, 294px 0, 300px 6px, 306px 0, 100% 6px, 100% 100%, 0 100%);
}

.opened-letter__clover {
  display: block;
  color: var(--leaf);
  font-size: 24px;
  transform: rotate(45deg);
}

.opened-letter p {
  margin: 18px 0 0;
  color: var(--ink);
  font-family: var(--font-letter);
  font-size: 18px;
  line-height: 1.7;
}

.opened-letter__rule {
  display: block;
  width: 54px;
  height: 1px;
  margin: 22px auto 0;
  background: rgba(79, 127, 82, 0.45);
}

.begin-story {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 26px;
  padding: 0 24px 0 20px;
  border: 1px solid rgba(79, 127, 82, 0.3);
  border-radius: 3px;
  background: rgba(245, 250, 232, 0.72);
  color: var(--leaf-dark);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

.begin-story:focus-visible,
.story-stage:focus-visible {
  outline: 3px solid rgba(244, 200, 91, 0.66);
  outline-offset: 3px;
}

.page-corner {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 16px;
  height: 16px;
  border-top: 1px solid rgba(79, 127, 82, 0.3);
  border-left: 1px solid rgba(79, 127, 82, 0.3);
  background: #e8f1d9;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transition: width 220ms ease, height 220ms ease;
}

.begin-story:hover .page-corner {
  width: 22px;
  height: 22px;
}

.acquaintance {
  position: absolute;
  z-index: 6;
  inset: 0;
  padding:
    max(18px, calc(env(safe-area-inset-top) + 10px))
    max(16px, calc(env(safe-area-inset-right) + 12px))
    max(18px, calc(env(safe-area-inset-bottom) + 12px))
    max(16px, calc(env(safe-area-inset-left) + 12px));
  background:
    linear-gradient(rgba(255, 253, 242, 0.62), rgba(250, 252, 237, 0.8)),
    url("assets/images/opening-mobile.png?v=20260812-clean") center / cover no-repeat;
  animation: page-reveal 900ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.acquaintance::before {
  position: absolute;
  inset: 0;
  background: rgba(255, 254, 246, 0.3);
  content: "";
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.acquaintance__header,
.story-stage,
.story-navigation {
  position: relative;
  z-index: 1;
}

.acquaintance__header {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
}

.acquaintance__time {
  display: inline-flex;
  margin: 0;
  padding: 9px 15px;
  border: 1px dashed rgba(79, 127, 82, 0.26);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(244, 200, 91, 0.08), transparent 32% 68%, rgba(79, 127, 82, 0.06)),
    rgba(255, 253, 244, 0.88);
  box-shadow: 0 7px 20px rgba(72, 96, 68, 0.1);
  color: var(--leaf-dark);
  font-family: var(--font-letter);
  font-size: 16px;
  font-weight: 600;
  gap: 8px;
}

.acquaintance__time span + span::before {
  margin-right: 8px;
  color: rgba(79, 127, 82, 0.36);
  content: "路";
}

.story-stage {
  width: min(100%, 380px);
  height: calc(100% - 112px);
  min-height: 0;
  margin: 5px auto 0;
  outline: 0;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}

.story-frame {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(28px, 0, 0) scale(0.985);
  transition: opacity 460ms ease, transform 620ms cubic-bezier(0.2, 0.75, 0.25, 1);
  will-change: opacity, transform;
}

.story-frame.is-before {
  transform: translate3d(-28px, 0, 0) scale(0.985);
}

.story-frame.is-after {
  transform: translate3d(28px, 0, 0) scale(0.985);
}

.story-frame.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.story-stage.is-swiping .story-frame.is-active {
  opacity: 0.94;
  transform: translate3d(var(--swipe-offset), 0, 0) scale(0.992);
  transition: none;
}

.story-frame--opening {
  color: var(--ink);
  font-family: var(--font-letter);
  font-size: clamp(21px, 2.7svh, 26px);
  line-height: 1.8;
  text-align: center;
}

.story-frame--opening p {
  margin: 20px 0 0;
  padding: 9px 18px;
  background: linear-gradient(90deg, transparent, rgba(255, 253, 244, 0.86) 14% 86%, transparent);
  text-shadow: 0 1px rgba(255, 255, 255, 0.8);
}

.xianyu-mark {
  width: 82px;
  height: 62px;
  border: 5px solid rgba(255, 235, 73, 0.34);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(120, 100, 20, 0.12);
}

.story-frame figure {
  position: relative;
  display: grid;
  width: min(100%, 356px);
  margin: 0;
  justify-items: center;
  gap: 13px;
}

.story-frame--evidence img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 352px);
  max-height: min(58svh, 500px);
  border: 7px solid rgba(255, 254, 248, 0.98);
  border-radius: 6px;
  object-fit: contain;
  background: rgba(255, 255, 252, 0.98);
  box-shadow:
    0 18px 42px rgba(63, 80, 60, 0.16),
    0 0 0 1px rgba(85, 104, 75, 0.08);
  filter: saturate(0.96) contrast(0.99);
  -webkit-user-drag: none;
}

.story-frame--evidence figure::before {
  position: absolute;
  z-index: 2;
  top: -8px;
  left: 50%;
  width: 72px;
  height: 18px;
  border: 1px solid rgba(141, 128, 73, 0.08);
  background: rgba(246, 232, 159, 0.55);
  box-shadow: 0 2px 5px rgba(72, 82, 58, 0.06);
  content: "";
  pointer-events: none;
  transform: translateX(-50%) rotate(-2deg);
}

.story-frame--tall img {
  width: min(96%, 326px);
  max-height: min(59svh, 500px);
}

.story-frame figcaption {
  position: relative;
  z-index: 2;
  width: min(100%, 374px);
  max-width: 374px;
  padding: 10px 12px 11px;
  border: 1px solid rgba(79, 127, 82, 0.12);
  border-radius: 4px;
  background: rgba(255, 253, 244, 0.94);
  box-shadow: 0 7px 20px rgba(65, 82, 62, 0.08);
  color: var(--ink);
  font-family: var(--font-letter);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.story-frame figcaption .caption-line {
  display: block;
  white-space: nowrap;
}

.story-frame--ending {
  width: min(100%, 340px);
  margin-inline: auto;
  color: var(--ink);
  font-family: var(--font-letter);
  text-align: center;
}

.story-frame--ending p {
  margin: 0;
  padding-inline: 10px;
  background: linear-gradient(90deg, transparent, rgba(255, 253, 244, 0.74) 12% 88%, transparent);
  font-size: clamp(18px, 2.2svh, 21px);
  line-height: 1.8;
}

.story-frame--ending p + p {
  margin-top: 22px;
}

.story-frame--ending .story-frame__lead {
  color: var(--leaf-dark);
  font-size: clamp(24px, 3.2svh, 30px);
  font-weight: 600;
}

.continuing-chat {
  display: flex;
  margin-top: 28px;
  align-items: flex-end;
  gap: 9px;
}

.continuing-chat i {
  display: block;
  width: 38px;
  height: 25px;
  border-radius: 48% 48% 48% 8px;
  background: rgba(244, 216, 86, 0.76);
  box-shadow: 0 4px 12px rgba(95, 103, 58, 0.1);
  animation: chat-breathe 2.5s ease-in-out infinite;
}

.continuing-chat i + i {
  border-radius: 48% 48% 8px;
  background: rgba(112, 159, 93, 0.72);
  animation-delay: -1.25s;
  transform: translateY(7px);
}

.story-navigation {
  position: absolute;
  right: 50%;
  bottom: max(8px, calc(env(safe-area-inset-bottom) + 4px));
  display: grid;
  width: min(calc(100% - 44px), 272px);
  height: 52px;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  transform: translateX(50%);
}

.story-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.story-nav {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(79, 127, 82, 0.22);
  border-radius: 50%;
  background: rgba(255, 253, 244, 0.82);
  box-shadow: 0 6px 18px rgba(65, 82, 62, 0.1);
  color: var(--leaf-dark);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity 220ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.story-nav--next {
  justify-self: end;
}

.story-nav span {
  width: 11px;
  height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateX(-2px) rotate(45deg);
}

.story-nav--previous span {
  transform: translateX(2px) rotate(-135deg);
}

.story-nav:not(:disabled):active {
  box-shadow: 0 2px 9px rgba(65, 82, 62, 0.12);
  transform: translateY(2px) scale(0.96);
}

.story-nav:focus-visible {
  outline: 3px solid rgba(244, 200, 91, 0.66);
  outline-offset: 2px;
}

.story-nav:disabled {
  cursor: default;
  opacity: 0.28;
}

.story-progress i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(79, 127, 82, 0.23);
  transition: width 240ms ease, border-radius 240ms ease, background-color 240ms ease;
}

.story-progress i.is-current {
  width: 18px;
  border-radius: 4px;
  background: var(--leaf);
}

.story-progress i.is-past {
  background: rgba(79, 127, 82, 0.52);
}

.meteor-scene {
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: hidden;
  color: #263f50;
  background: #bde8dd;
  animation: meteor-scene-arrival 1.4s cubic-bezier(0.2, 0.75, 0.25, 1) both;
  isolation: isolate;
}

.meteor-sky {
  position: absolute;
  z-index: -3;
  inset: -2%;
  background-position: center;
  background-size: cover;
  transition: opacity 2.2s ease, transform 7s ease;
}

.meteor-sky--base {
  background-image: url("assets/images/meteor/sky-base.jpg");
}

.meteor-sky--arrival {
  background-image: url("assets/images/meteor/sky-arrival.jpg");
  opacity: 0;
  transform: scale(1.025);
}

.meteor-scene.has-arrival .meteor-sky--base {
  opacity: 0;
  transition-delay: 2.4s;
}

.meteor-scene.has-arrival .meteor-sky--arrival {
  opacity: 1;
  transform: scale(1);
  transition-delay: 2.4s;
}

.meteor-scene::before,
.meteor-scene::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
}

.meteor-scene::before {
  background:
    linear-gradient(to bottom, rgba(31, 84, 128, 0.1), transparent 34%),
    linear-gradient(to top, rgba(255, 250, 216, 0.2), transparent 36%);
}

.meteor-scene::after {
  background: radial-gradient(circle at 50% 48%, rgba(255, 255, 241, 0.22), transparent 45%);
}

.meteor-scene__header,
.meteor-stage,
.meteor-navigation {
  position: relative;
  z-index: 2;
}

.meteor-scene__header {
  display: flex;
  min-height: 67px;
  padding-top: max(13px, calc(env(safe-area-inset-top) + 7px));
  align-items: center;
  justify-content: center;
}

.meteor-scene__header p {
  display: inline-flex;
  margin: 0;
  padding: 8px 15px;
  border: 1px solid rgba(45, 93, 117, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 246, 0.62);
  box-shadow: 0 6px 20px rgba(41, 76, 99, 0.08);
  color: #315b70;
  font-family: var(--font-letter);
  font-size: 16px;
  gap: 8px;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.meteor-scene__header p span + span::before {
  margin-right: 8px;
  color: rgba(49, 91, 112, 0.42);
  content: "路";
}

.meteor-stage {
  width: min(calc(100% - 28px), 390px);
  height: calc(100% - 128px);
  min-height: 0;
  margin-inline: auto;
  outline: 0;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}

.meteor-stage:focus-visible {
  outline: 3px solid rgba(255, 239, 135, 0.74);
  outline-offset: -5px;
}

.meteor-frame {
  position: absolute;
  inset: 0;
  display: grid;
  padding: 16px 12px 46px;
  align-content: center;
  justify-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(30px, 0, 0) scale(0.985);
  transition: opacity 620ms ease, transform 780ms cubic-bezier(0.2, 0.75, 0.25, 1);
  will-change: opacity, transform;
}

.meteor-frame.is-before {
  transform: translate3d(-30px, 0, 0) scale(0.985);
}

.meteor-frame.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.meteor-stage.is-swiping .meteor-frame.is-active {
  opacity: 0.94;
  transform: translate3d(var(--swipe-offset), 0, 0) scale(0.992);
  transition: none;
}

.meteor-copy {
  max-width: 360px;
  margin: 0;
  color: #294b5e;
  font-family: var(--font-letter);
  font-size: clamp(25px, 3.3svh, 32px);
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
  text-shadow:
    0 1px rgba(255, 255, 255, 0.92),
    0 0 18px rgba(255, 255, 244, 0.94),
    0 0 34px rgba(255, 255, 244, 0.72);
}

.meteor-frame--opening {
  padding-bottom: 12svh;
}

.meteor-frame__glimmer {
  position: relative;
  width: 8px;
  height: 8px;
  margin-top: 32px;
  border-radius: 50%;
  background: #fffbd7;
  box-shadow: 0 0 10px #fffbd7, 0 0 28px rgba(255, 241, 142, 0.8);
  animation: meteor-glimmer 2.8s ease-in-out infinite;
}

.meteor-frame__glimmer::before,
.meteor-frame__glimmer::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(255, 251, 215, 0.86);
  content: "";
  transform: translate(-50%, -50%);
}

.meteor-frame__glimmer::before { width: 30px; height: 1px; }
.meteor-frame__glimmer::after { width: 1px; height: 30px; }

.meteor-frame--record {
  align-content: center;
  gap: 22px;
}

.meteor-record {
  position: relative;
  display: grid;
  width: min(64vw, 248px);
  margin: 0;
  justify-items: center;
  transform: rotate(-1.2deg);
}

.meteor-record::before {
  position: absolute;
  z-index: 2;
  top: -8px;
  left: 50%;
  width: 66px;
  height: 17px;
  border: 1px solid rgba(137, 121, 66, 0.1);
  background: rgba(249, 234, 153, 0.65);
  box-shadow: 0 2px 5px rgba(45, 68, 78, 0.08);
  content: "";
  transform: translateX(-50%) rotate(2deg);
}

.meteor-record__window {
  width: 100%;
  aspect-ratio: 1;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  background: rgba(255, 254, 244, 0.94);
  box-shadow: 0 18px 48px rgba(26, 59, 78, 0.2);
}

.meteor-record__window img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  object-fit: cover;
  filter: brightness(1.08) saturate(0.9);
}

.meteor-record figcaption {
  margin-top: 8px;
  padding: 5px 12px 6px;
  border-radius: 3px;
  background: rgba(255, 254, 244, 0.78);
  color: #496b7a;
  font-family: var(--font-letter);
  font-size: 16px;
  box-shadow: 0 5px 16px rgba(39, 69, 84, 0.08);
}

.meteor-frame--record .meteor-copy {
  font-size: clamp(20px, 2.65svh, 25px);
  line-height: 1.7;
}

.meteor-frame--wish {
  align-content: center;
  gap: 18px;
}

.meteor-frame__aside {
  max-width: 340px;
  margin: 0;
  color: #446879;
  font-family: var(--font-letter);
  font-size: clamp(18px, 2.25svh, 22px);
  line-height: 1.65;
  text-align: center;
  text-shadow: 0 0 16px rgba(255, 255, 246, 0.9);
}

.wish-record {
  position: relative;
  width: min(94%, 360px);
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 7px;
  background: rgba(255, 254, 244, 0.82);
  box-shadow: 0 15px 42px rgba(30, 57, 75, 0.18);
  transform: rotate(0.7deg);
}

.wish-record::after {
  position: absolute;
  right: 18px;
  bottom: -7px;
  width: 48px;
  height: 14px;
  background: rgba(250, 225, 143, 0.56);
  content: "";
  transform: rotate(-5deg);
}

.wish-record img {
  display: block;
  width: 100%;
  border-radius: 3px;
}

.meteor-frame--wish .meteor-copy {
  font-size: clamp(21px, 2.75svh, 27px);
  line-height: 1.75;
}

.meteor-frame--ending {
  padding-bottom: 5svh;
}

.meteor-frame--ending .meteor-copy {
  color: #24485b;
  font-size: clamp(30px, 4.3svh, 40px);
  line-height: 1.65;
}

.meteor-frame--ending .meteor-ending-name {
  display: block;
  color: #3f7180;
  font-size: 0.72em;
}

.meteor-frame--ending .meteor-ending-line {
  display: block;
  white-space: nowrap;
}

.meteor-frame__underline {
  width: min(72vw, 270px);
  height: 2px;
  margin-top: 8px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 238, 139, 0.9) 18% 88%, transparent);
  box-shadow: 0 0 8px rgba(255, 234, 119, 0.7);
  opacity: 0;
  transform: scaleX(0.1);
  transform-origin: left;
}

.meteor-frame--ending.is-active .meteor-frame__underline {
  animation: meteor-underline 1.8s 1.1s cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

.shooting-stars {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.shooting-stars i {
  position: absolute;
  top: var(--star-top);
  left: var(--star-left);
  width: var(--star-length);
  height: 2px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 250, 190, 0.78) 54%, #fffef0 92%);
  box-shadow: 0 0 7px rgba(255, 248, 189, 0.95), 0 0 15px rgba(255, 239, 138, 0.42);
  opacity: 0;
  transform: rotate(var(--star-angle)) translateX(0);
  transform-origin: right;
  animation: shooting-star var(--star-duration) cubic-bezier(0.18, 0.72, 0.25, 1) forwards;
}

.shooting-stars i.is-bright {
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 139, 0.9) 48%, #fffef2 92%);
  box-shadow: 0 0 9px rgba(255, 251, 210, 1), 0 0 22px rgba(255, 229, 111, 0.66);
}

.meteor-navigation {
  position: absolute;
  right: 50%;
  bottom: max(8px, calc(env(safe-area-inset-bottom) + 4px));
  display: grid;
  width: min(calc(100% - 44px), 248px);
  height: 52px;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  transform: translateX(50%);
}

.meteor-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.meteor-progress i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(45, 90, 112, 0.3);
  box-shadow: 0 0 7px rgba(255, 255, 232, 0.58);
  transition: width 240ms ease, background-color 240ms ease;
}

.meteor-progress i.is-current {
  width: 20px;
  border-radius: 5px;
  background: rgba(255, 244, 173, 0.96);
  box-shadow: 0 0 10px rgba(255, 239, 138, 0.86);
}

.meteor-progress i.is-past {
  background: rgba(59, 112, 130, 0.58);
}

.meteor-nav {
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(45, 90, 112, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 245, 0.66);
  box-shadow: 0 7px 20px rgba(40, 72, 91, 0.12);
  color: #315b70;
  cursor: pointer;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: opacity 220ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.meteor-nav--next { justify-self: end; }

.meteor-nav span {
  width: 11px;
  height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateX(-2px) rotate(45deg);
}

.meteor-nav--previous span {
  transform: translateX(2px) rotate(-135deg);
}

.meteor-nav:not(:disabled):active {
  transform: translateY(2px) scale(0.96);
}

.meteor-nav:focus-visible {
  outline: 3px solid rgba(255, 239, 138, 0.82);
  outline-offset: 2px;
}

.meteor-nav:disabled {
  cursor: default;
  opacity: 0.28;
}

@keyframes meteor-scene-arrival {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes meteor-glimmer {
  0%, 100% { opacity: 0.48; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes shooting-star {
  0% { opacity: 0; transform: rotate(var(--star-angle)) translateX(30px) scaleX(0.28); }
  12% { opacity: 1; }
  72% { opacity: 0.9; }
  100% { opacity: 0; transform: rotate(var(--star-angle)) translateX(var(--star-travel)) scaleX(1); }
}

@keyframes meteor-underline {
  to { opacity: 1; transform: scaleX(1); }
}

.campus-scene {
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: hidden;
  color: #31483d;
  background: #dceecf;
  animation: campus-arrival 1.5s cubic-bezier(0.2, 0.75, 0.25, 1) both;
  isolation: isolate;
}

.campus-backdrops,
.campus-backdrop,
.campus-light {
  position: absolute;
  inset: 0;
}

.campus-backdrops {
  z-index: -3;
  overflow: hidden;
}

.campus-backdrop {
  inset: -3%;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.035) translateY(0);
  transition: opacity 1.45s ease, transform 8s cubic-bezier(0.2, 0.65, 0.3, 1);
  will-change: opacity, transform;
}

.campus-backdrop.is-active {
  opacity: 1;
}

.campus-backdrop--road {
  background-image: url("assets/images/campus/campus-road.jpg");
}

.campus-backdrop--lake {
  background-image: url("assets/images/campus/campus-lake.jpg");
}

.campus-backdrop--bench {
  background-image: url("assets/images/campus/campus-bench.jpg");
}

.campus-backdrop--clock {
  background-image: url("assets/images/campus/campus-clock.jpg");
}

.campus-scene[data-frame="1"] .campus-backdrop--road,
.campus-scene[data-frame="3"] .campus-backdrop--lake,
.campus-scene[data-frame="4"] .campus-backdrop--bench {
  transform: scale(1.09) translateY(-1.2%);
}

.campus-scene[data-frame="5"] .campus-backdrop--clock {
  transform: scale(1.065) translateY(-0.8%);
}

.campus-light {
  z-index: -2;
  background:
    linear-gradient(to bottom, rgba(255, 255, 242, 0.16), transparent 24%),
    linear-gradient(to top, rgba(246, 250, 230, 0.5), transparent 36%),
    radial-gradient(circle at 76% 17%, rgba(255, 245, 173, 0.32), transparent 29%);
  pointer-events: none;
}

.campus-birds {
  position: absolute;
  z-index: 1;
  top: 8%;
  left: 0;
  width: 100%;
  height: 25%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.campus-scene[data-frame="5"] .campus-birds {
  opacity: 1;
}

.campus-birds i {
  position: absolute;
  top: var(--bird-top, 30%);
  right: -42px;
  width: 16px;
  height: 7px;
  border-top: 2px solid rgba(63, 83, 78, 0.62);
  border-radius: 50% 50% 0 0;
  opacity: 0;
  transform: rotate(-8deg) scale(var(--bird-scale, 1));
}

.campus-birds i::after {
  position: absolute;
  top: -2px;
  left: 7px;
  width: 11px;
  height: 6px;
  border-top: 2px solid rgba(63, 83, 78, 0.62);
  border-radius: 50% 50% 0 0;
  content: "";
  transform: rotate(18deg);
  transform-origin: left top;
}

.campus-scene[data-frame="5"] .campus-birds i {
  animation: campus-bird 9s 1.2s linear forwards;
}

.campus-birds i:nth-child(1) { --bird-top: 22%; --bird-scale: 0.78; }
.campus-birds i:nth-child(2) { --bird-top: 35%; --bird-scale: 0.62; animation-delay: 1.65s !important; }
.campus-birds i:nth-child(3) { --bird-top: 15%; --bird-scale: 0.52; animation-delay: 2.05s !important; }
.campus-birds i:nth-child(4) { --bird-top: 42%; --bird-scale: 0.68; animation-delay: 2.45s !important; }
.campus-birds i:nth-child(5) { --bird-top: 28%; --bird-scale: 0.46; animation-delay: 2.85s !important; }

.campus-scene::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to bottom, transparent 48%, rgba(247, 250, 231, 0.12) 65%, rgba(245, 249, 228, 0.4));
  content: "";
  pointer-events: none;
}

.campus-scene__header,
.campus-stage,
.campus-navigation,
.campus-hint {
  position: relative;
  z-index: 2;
}

.campus-scene__header {
  display: flex;
  min-height: max(70px, calc(env(safe-area-inset-top) + 62px));
  padding-top: max(13px, calc(env(safe-area-inset-top) + 9px));
  align-items: flex-start;
  justify-content: center;
}

.call-presence {
  display: inline-flex;
  min-height: 38px;
  padding: 8px 13px;
  align-items: center;
  border: 1px solid rgba(64, 108, 68, 0.2);
  border-radius: 4px;
  background: rgba(255, 254, 243, 0.78);
  box-shadow: 0 6px 20px rgba(62, 84, 54, 0.11);
  color: #466750;
  font-family: var(--font-letter);
  font-size: 15px;
  gap: 8px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.call-presence__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #65a764;
  box-shadow: 0 0 0 3px rgba(101, 167, 100, 0.14);
  animation: call-dot 2.8s ease-in-out infinite;
}

.call-wave {
  display: flex;
  height: 18px;
  align-items: center;
  gap: 3px;
}

.call-wave i {
  width: 2px;
  height: 5px;
  border-radius: 2px;
  background: rgba(70, 103, 80, 0.65);
  animation: call-wave 1.9s ease-in-out infinite;
}

.call-wave i:nth-child(2) { animation-delay: -1.5s; }
.call-wave i:nth-child(3) { animation-delay: -0.9s; }
.call-wave i:nth-child(4) { animation-delay: -1.2s; }
.call-wave i:nth-child(5) { animation-delay: -0.45s; }

.campus-stage {
  width: 100%;
  height: calc(100% - 128px);
  min-height: 0;
  outline: 0;
  touch-action: pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}

.campus-stage:focus-visible {
  outline: 2px solid rgba(81, 132, 83, 0.54);
  outline-offset: -6px;
}

.campus-frame {
  position: absolute;
  inset: 0;
  display: grid;
  padding: 0 24px 15svh;
  align-content: end;
  justify-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px) scale(0.99);
  transition: opacity 620ms ease, transform 800ms cubic-bezier(0.2, 0.75, 0.25, 1);
  will-change: opacity, transform;
}

.campus-frame.is-before {
  transform: translateY(-22px) scale(0.99);
}

.campus-frame.is-after {
  transform: translateY(24px) scale(0.99);
}

.campus-frame.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.campus-stage.is-swiping .campus-frame.is-active {
  opacity: 0.93;
  transform: translateY(calc(var(--walk-offset) * 0.22)) scale(0.993);
  transition: none;
}

.campus-copy {
  max-width: 350px;
  margin: 0;
  padding: 13px 22px 15px;
  border: 1px solid rgba(69, 105, 70, 0.15);
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(255, 253, 236, 0.7), rgba(255, 255, 247, 0.94) 20% 80%, rgba(255, 253, 236, 0.7));
  box-shadow: 0 10px 28px rgba(53, 75, 51, 0.13);
  color: #355243;
  font-family: var(--font-letter);
  font-size: clamp(23px, 3.05svh, 29px);
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.campus-frame--ending {
  padding-bottom: 16svh;
}

.campus-frame--ending .campus-copy {
  color: #294d3d;
}

.campus-bench-line {
  width: min(68vw, 250px);
  height: 2px;
  margin-top: 9px;
  background: linear-gradient(90deg, transparent, rgba(89, 137, 79, 0.78) 20% 80%, transparent);
  opacity: 0;
  transform: scaleX(0.1);
}

.campus-frame--ending.is-active .campus-bench-line {
  animation: campus-line 1.7s 900ms cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

.campus-frame--thanks {
  padding-bottom: 18svh;
}

.campus-frame--thanks .campus-copy {
  min-width: 150px;
  padding-block: 15px 17px;
  color: #3b594d;
  font-size: clamp(28px, 4svh, 36px);
}

.campus-hint {
  position: absolute;
  right: 50%;
  bottom: max(66px, calc(env(safe-area-inset-bottom) + 62px));
  display: flex;
  margin: 0;
  align-items: center;
  color: rgba(47, 80, 57, 0.82);
  transform: translateX(50%);
  animation: campus-hint 2.6s ease-in-out infinite;
}

.campus-hint span {
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}

.campus-navigation {
  position: absolute;
  right: 50%;
  bottom: max(8px, calc(env(safe-area-inset-bottom) + 4px));
  display: grid;
  width: min(calc(100% - 44px), 264px);
  height: 52px;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  transform: translateX(50%);
}

.campus-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.campus-progress i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(57, 99, 63, 0.28);
  box-shadow: 0 0 7px rgba(255, 255, 232, 0.55);
  transition: width 240ms ease, background-color 240ms ease;
}

.campus-progress i.is-current {
  width: 20px;
  border-radius: 5px;
  background: rgba(91, 142, 84, 0.92);
}

.campus-progress i.is-past {
  background: rgba(71, 118, 70, 0.58);
}

.campus-nav {
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(63, 105, 66, 0.23);
  border-radius: 50%;
  background: rgba(255, 254, 243, 0.76);
  box-shadow: 0 7px 20px rgba(49, 75, 48, 0.13);
  color: #3f7048;
  cursor: pointer;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: opacity 220ms ease, transform 180ms ease;
}

.campus-nav--next { justify-self: end; }

.campus-nav span {
  width: 11px;
  height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateX(-2px) rotate(45deg);
}

.campus-nav--previous span {
  transform: translateX(2px) rotate(-135deg);
}

.campus-nav:not(:disabled):active {
  transform: translateY(2px) scale(0.96);
}

.campus-nav:focus-visible {
  outline: 3px solid rgba(247, 215, 100, 0.72);
  outline-offset: 2px;
}

.campus-nav:disabled {
  cursor: default;
  opacity: 0.28;
}

@keyframes campus-arrival {
  from { opacity: 0; transform: translateY(18px) scale(1.018); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes call-dot {
  0%, 100% { opacity: 0.64; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes call-wave {
  0%, 100% { height: 4px; opacity: 0.45; }
  50% { height: 15px; opacity: 0.9; }
}

@keyframes campus-hint {
  0%, 100% { opacity: 0.6; transform: translate(50%, 3px); }
  50% { opacity: 0.95; transform: translate(50%, -3px); }
}

@keyframes campus-line {
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes campus-bird {
  0% { opacity: 0; transform: translateX(0) translateY(10px) rotate(-8deg) scale(var(--bird-scale)); }
  12% { opacity: 0.72; }
  82% { opacity: 0.62; }
  100% { opacity: 0; transform: translateX(calc(-100vw - 80px)) translateY(-34px) rotate(-8deg) scale(var(--bird-scale)); }
}

.support-scene {
  position: fixed;
  z-index: 9;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--scene-width);
  overflow-x: hidden;
  overflow-y: auto;
  color: #36564a;
  background:
    linear-gradient(to bottom, rgba(255, 255, 252, 0.2), rgba(252, 255, 242, 0.48) 46%, rgba(243, 249, 222, 0.7)),
    url("assets/images/support/support-garden.png") center top / cover no-repeat,
    #edf5dc;
  outline: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  --support-shift: -50%;
  transform: translateX(var(--support-shift));
  animation: support-arrival 1.1s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.support-back {
  position: fixed;
  z-index: 4;
  top: max(12px, calc(env(safe-area-inset-top) + 8px));
  left: max(12px, calc(env(safe-area-inset-left) + 8px));
  display: inline-flex;
  min-width: 76px;
  min-height: 46px;
  padding: 0 13px;
  align-items: center;
  border: 1px solid rgba(66, 106, 73, 0.22);
  border-radius: 23px;
  background: rgba(255, 254, 243, 0.8);
  box-shadow: 0 6px 18px rgba(65, 93, 62, 0.12);
  color: #426c51;
  cursor: pointer;
  gap: 8px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.support-back span {
  width: 10px;
  height: 10px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}

.support-back b {
  font-family: var(--font-letter);
  font-size: 15px;
  font-weight: 600;
}

.support-back:active {
  transform: translateY(1px);
}

.support-back:focus-visible,
.flower-button:focus-visible,
.gift-button:focus-visible {
  outline: 3px solid rgba(233, 177, 77, 0.7);
  outline-offset: 3px;
}

.support-content {
  position: relative;
  z-index: 2;
  width: min(100%, 590px);
  min-height: 100%;
  margin: 0 auto;
  padding: 0 18px max(58px, calc(env(safe-area-inset-bottom) + 46px));
  text-align: center;
}

.support-intro {
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: max(92px, calc(env(safe-area-inset-top) + 82px)) 8px 40px;
  align-items: start;
  overflow: hidden;
  text-align: left;
}

.support-intro__copy {
  position: relative;
  z-index: 2;
  width: min(82%, 390px);
  padding: 22px 20px 23px;
  border-left: 2px solid rgba(87, 130, 86, 0.34);
  background: linear-gradient(90deg, rgba(255, 255, 248, 0.82), rgba(255, 255, 248, 0.42) 72%, transparent);
  box-shadow: -12px 16px 36px rgba(67, 101, 66, 0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.support-intro .support-kicker {
  margin-bottom: 12px;
  color: #6b876e;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.support-intro h2 {
  max-width: 390px;
  margin: 0 0 20px;
  color: #315d50;
  font-family: var(--font-letter);
  font-size: clamp(29px, 4.3svh, 39px);
  font-weight: 700;
  line-height: 1.5;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.75), 0 7px 24px rgba(62, 107, 78, 0.13);
}

.support-intro p {
  margin: 0 0 8px;
  color: #45665b;
  font-family: var(--font-letter);
  font-size: clamp(17px, 2.25svh, 21px);
  line-height: 1.75;
  text-shadow: 0 1px rgba(255, 255, 255, 0.92);
}

.support-intro__mianmian {
  position: absolute;
  z-index: 1;
  right: -5%;
  bottom: 1.5%;
  width: min(67%, 360px);
  height: 60%;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 13px 19px rgba(75, 99, 75, 0.12));
  opacity: 0;
  transform: translateX(26px);
  animation: support-girl-arrival 1.6s 380ms cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

.support-intro__path {
  position: absolute;
  z-index: 0;
  right: 5%;
  bottom: 3.5%;
  width: 68%;
  height: 15%;
  border-radius: 50%;
  background: rgba(255, 246, 166, 0.34);
  filter: blur(20px);
}

.flower-blessings {
  position: relative;
  min-height: 100svh;
  padding: 64px 2px 72px;
}

.flower-blessings::before {
  position: absolute;
  z-index: -1;
  inset: 20px -18px 26px;
  background: linear-gradient(to bottom, rgba(255, 255, 249, 0.7), rgba(250, 253, 235, 0.88) 52%, rgba(247, 251, 229, 0.72));
  box-shadow: 0 0 40px rgba(74, 108, 65, 0.08);
  content: "";
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.flower-blessings__heading {
  width: min(100% - 28px, 430px);
  margin: 0 auto 36px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(79, 121, 80, 0.24);
  text-align: left;
}

.flower-blessings__heading > p {
  margin: 0 0 9px;
  color: #789078;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
}

.flower-tap-hint {
  display: inline-flex;
  min-height: 36px;
  margin-top: 17px;
  padding: 7px 11px 8px;
  align-items: center;
  border: 1px solid rgba(84, 126, 82, 0.16);
  border-radius: 3px;
  background: rgba(255, 255, 247, 0.68);
  color: #688369;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  gap: 8px;
  transition: opacity 500ms ease, transform 500ms ease;
}

.flower-tap-hint i {
  width: 9px;
  height: 9px;
  border: 2px solid rgba(90, 139, 88, 0.74);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(102, 153, 97, 0.28);
  animation: flower-tap-pulse 2.6s ease-out infinite;
}

.flower-blessings.has-first-light .flower-tap-hint {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

.flower-blessings h3 {
  margin: 0;
  color: #3b6653;
  font-family: var(--font-letter);
  font-size: clamp(20px, 2.8svh, 26px);
  font-weight: 600;
  line-height: 1.65;
  text-shadow: 0 1px rgba(255, 255, 255, 0.9);
}

.flower-field {
  display: grid;
  max-width: 430px;
  margin: 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 30px 18px;
}

.flower-button {
  --photo-tilt: -2.4deg;
  min-width: 0;
  min-height: 236px;
  padding: 0 3px 10px;
  border: 0;
  background: transparent;
  color: #476452;
  cursor: pointer;
  font: inherit;
}

.flower-button:nth-child(even) {
  --photo-tilt: 2.2deg;
  margin-top: 28px;
}

.flower-button:nth-child(3) {
  --photo-tilt: -1.3deg;
}

.flower-button:nth-child(4) {
  --photo-tilt: 1.4deg;
}

.flower-photo {
  position: relative;
  display: block;
  width: min(100%, 185px);
  aspect-ratio: 4 / 5;
  margin: 0 auto 13px;
  overflow: visible;
  padding: 6px 6px 17px;
  border: 1px solid rgba(91, 121, 87, 0.12);
  border-radius: 3px;
  background: rgba(255, 255, 250, 0.94);
  box-shadow: 0 11px 25px rgba(67, 96, 65, 0.15);
  transform: rotate(var(--photo-tilt)) scale(0.97);
  transition: transform 520ms cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 520ms ease, filter 520ms ease;
}

.flower-photo::before,
.flower-photo::after {
  position: absolute;
  z-index: -1;
  inset: -8px;
  border: 1px solid rgba(255, 221, 135, 0);
  border-radius: 4px;
  content: "";
  pointer-events: none;
}

.flower-photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  filter: saturate(0.78) brightness(1.03);
  object-fit: cover;
  transition: filter 520ms ease;
}

.flower-button:nth-child(2) .flower-photo {
  aspect-ratio: 1 / 1;
}

.flower-button:nth-child(3) .flower-photo,
.flower-button:nth-child(4) .flower-photo {
  aspect-ratio: 9 / 16;
}

.flower-button:nth-child(2) .flower-photo img {
  object-position: center;
}

.flower-photo i {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 4px 9px;
  border-radius: 13px;
  background: rgba(255, 252, 225, 0.9);
  box-shadow: 0 4px 14px rgba(83, 105, 61, 0.16);
  color: #47754e;
  font-family: var(--font-letter);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  opacity: 0;
  transform: translate(-50%, -15%) scale(0.72);
}

.flower-label {
  display: inline-flex;
  min-height: 29px;
  padding: 7px 12px 8px;
  align-items: center;
  border: 1px solid rgba(82, 122, 80, 0.18);
  border-radius: 3px;
  background: rgba(255, 255, 247, 0.82);
  box-shadow: 0 5px 13px rgba(62, 93, 60, 0.08);
  font-family: var(--font-letter);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  gap: 3px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.flower-label b {
  display: inline-block;
  margin-left: 3px;
  color: #56855c;
  font-size: 14px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 340ms 170ms ease, transform 340ms 170ms ease;
}

.flower-button:not(:disabled):active .flower-photo {
  transform: rotate(var(--photo-tilt)) scale(0.93);
}

.flower-button.is-lit .flower-photo {
  box-shadow: 0 6px 22px rgba(88, 128, 73, 0.18), 0 0 28px rgba(255, 224, 121, 0.72);
  filter: brightness(1.05);
  transform: rotate(0) scale(1);
}

.flower-button.is-lit .flower-photo img {
  filter: saturate(1.04) brightness(1.05);
}

.flower-button.is-lit .flower-photo::before {
  border-color: rgba(255, 221, 135, 0.65);
  animation: flower-bloom 900ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.flower-button.is-lit .flower-photo::after {
  background: radial-gradient(circle, rgba(255, 244, 166, 0.36), transparent 65%);
  animation: flower-glow 900ms ease-out both;
}

.flower-button.is-lit .flower-photo i {
  animation: flower-score 1.2s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.flower-button.is-lit .flower-label b {
  opacity: 1;
  transform: translateY(0);
}

.flower-button:disabled {
  cursor: default;
}

.support-complete {
  position: relative;
  min-height: 100svh;
  margin: 0 -18px;
  padding: 80px 18px max(58px, calc(env(safe-area-inset-bottom) + 46px));
  background: linear-gradient(to bottom, rgba(251, 254, 239, 0.86), rgba(242, 249, 221, 0.94));
}

.teammates {
  position: relative;
  width: min(100%, 430px);
  height: clamp(270px, 43svh, 390px);
  margin: 0 auto -22px;
}

.teammates::after {
  position: absolute;
  right: 10%;
  bottom: 7%;
  left: 10%;
  height: 18%;
  border-radius: 50%;
  background: rgba(255, 245, 165, 0.38);
  content: "";
  filter: blur(20px);
}

.teammates img {
  position: absolute;
  z-index: 1;
  bottom: 0;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 9px 13px rgba(69, 94, 72, 0.14));
}

.teammates__mianmian {
  left: 10%;
  width: 59%;
  height: 100%;
  object-position: bottom;
  opacity: 0;
  transform: translateX(-24px);
  animation: teammate-enter 1.25s 160ms cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

.teammates__doubao {
  right: 6%;
  width: 43%;
  height: 54%;
  object-position: bottom right;
  opacity: 0;
  transform: translateX(20px);
  animation: teammate-enter 1.1s 440ms cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

.support-complete__copy {
  position: relative;
  z-index: 2;
  width: min(100% - 20px, 410px);
  margin: 0 auto;
  padding: 23px 18px 18px;
  border-top: 1px solid rgba(84, 125, 83, 0.23);
  border-bottom: 1px solid rgba(84, 125, 83, 0.18);
  background: rgba(255, 255, 248, 0.54);
}

.support-complete__copy h3 {
  margin: 0 0 12px;
  color: #315f4c;
  font-family: var(--font-letter);
  font-size: clamp(23px, 3.2svh, 30px);
  line-height: 1.45;
}

.support-complete__copy p,
.hidden-gift {
  margin: 4px auto;
  color: #486956;
  font-family: var(--font-letter);
  font-size: clamp(16px, 2.1svh, 19px);
  line-height: 1.7;
}

.hidden-gift {
  max-width: 320px;
  margin-top: 27px;
  color: #3c604f;
}

.gift-button {
  min-width: 132px;
  min-height: 48px;
  margin-top: 15px;
  padding: 9px 25px;
  border: 1px solid rgba(78, 118, 74, 0.25);
  border-radius: 24px;
  background: rgba(255, 253, 232, 0.82);
  box-shadow: 0 7px 19px rgba(72, 100, 61, 0.12), inset 0 0 0 2px rgba(255, 255, 255, 0.36);
  color: #50745a;
  font-family: var(--font-letter);
  font-size: 17px;
  font-weight: 600;
}

.gift-button[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.72;
}

.opening.is-in-support .music-toggle,
.opening.is-in-support .music-status {
  z-index: 13;
}

.opening.is-in-support .music-toggle {
  background: rgba(255, 254, 243, 0.8);
}

@keyframes support-arrival {
  from { opacity: 0; transform: translateX(var(--support-shift)) translateY(18px); }
  to { opacity: 1; transform: translateX(var(--support-shift)) translateY(0); }
}

@keyframes support-girl-arrival {
  to { opacity: 0.92; transform: translateX(0); }
}

@keyframes flower-tap-pulse {
  0%, 100% { opacity: 0.68; box-shadow: 0 0 0 0 rgba(102, 153, 97, 0); transform: scale(0.92); }
  42% { opacity: 1; box-shadow: 0 0 0 7px rgba(102, 153, 97, 0.14); transform: scale(1); }
  70% { opacity: 0.78; box-shadow: 0 0 0 11px rgba(102, 153, 97, 0); transform: scale(0.96); }
}

@keyframes flower-bloom {
  0% { opacity: 0; transform: scale(0.72) rotate(-5deg); }
  60% { opacity: 1; transform: scale(1.06) rotate(1deg); }
  100% { opacity: 0.72; transform: scale(1) rotate(0); }
}

@keyframes flower-glow {
  from { opacity: 0; transform: scale(0.55); }
  55% { opacity: 1; }
  to { opacity: 0.25; transform: scale(1.28); }
}

@keyframes flower-score {
  0% { opacity: 0; transform: translate(-50%, 8%) scale(0.72); }
  35%, 70% { opacity: 1; transform: translate(-50%, -58%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -115%) scale(0.96); }
}

@keyframes teammate-enter {
  to { opacity: 1; transform: translateX(0); }
}

.opening.is-in-story .opening__content,
.opening.is-in-story .envelope-glow,
.opening.is-in-story .envelope-cord,
.opening.is-in-story .motes {
  display: none;
}

.opening.is-in-story .music-toggle {
  z-index: 10;
}

.opening.is-in-meteor .music-status {
  z-index: 10;
}

.opening.is-in-campus .music-toggle,
.opening.is-in-campus .music-status {
  z-index: 10;
}

@keyframes page-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes chat-breathe {
  0%, 100% { opacity: 0.65; transform: translateY(0) scale(0.96); }
  50% { opacity: 1; transform: translateY(-3px) scale(1.04); }
}

.found.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.envelope-glow {
  position: absolute;
  z-index: 1;
  bottom: 7.5%;
  left: 50%;
  width: 68%;
  height: 17%;
  border-radius: 50%;
  background: rgba(255, 238, 155, 0.28);
  filter: blur(25px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-58%) scale(0.7);
  transition: opacity 1.4s ease, transform 1.6s ease;
}

.envelope-cord {
  position: absolute;
  z-index: 2;
  bottom: 2.2%;
  left: 37.5%;
  width: 138px;
  height: 48px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) rotate(1deg);
  transition: opacity 700ms ease;
}

.envelope-cord__line {
  position: absolute;
  top: 23px;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, #d9ad4e 8% 92%, transparent);
  box-shadow: 0 1px rgba(255, 246, 190, 0.72);
  transition: opacity 420ms ease 320ms, transform 800ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.envelope-cord__loop {
  position: absolute;
  top: 6px;
  width: 34px;
  height: 24px;
  border: 2px solid #d9ad4e;
  border-radius: 52% 68% 46% 64%;
  box-shadow: inset 0 1px rgba(255, 248, 206, 0.7), 0 1px rgba(126, 89, 26, 0.1);
  transition: transform 950ms cubic-bezier(0.2, 0.75, 0.25, 1), opacity 560ms ease 260ms;
}

.envelope-cord__loop--left {
  left: 36px;
  transform: rotate(18deg);
}

.envelope-cord__loop--right {
  right: 36px;
  transform: rotate(-18deg) scaleX(-1);
}

.envelope-cord__knot {
  position: absolute;
  top: 19px;
  left: 50%;
  width: 9px;
  height: 8px;
  border-radius: 50%;
  background: #d4a744;
  box-shadow: inset 0 1px #f8df8b, 0 1px 2px rgba(126, 89, 26, 0.24);
  transform: translateX(-50%);
  transition: opacity 480ms ease 350ms, transform 850ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.opening.is-found .envelope-glow {
  opacity: 0.75;
  transform: translateX(-58%) scale(1);
}

.opening.is-found .envelope-cord {
  opacity: 0.92;
}

.opening.is-opening .envelope-cord__line {
  opacity: 0;
  transform: scaleX(1.28) translateY(9px);
}

.opening.is-opening .envelope-cord__loop--left {
  opacity: 0;
  transform: translate(-32px, 13px) rotate(-34deg) scale(1.12);
}

.opening.is-opening .envelope-cord__loop--right {
  opacity: 0;
  transform: translate(32px, 13px) rotate(34deg) scaleX(-1) scale(1.12);
}

.opening.is-opening .envelope-cord__knot {
  opacity: 0;
  transform: translate(-50%, 18px) rotate(24deg) scale(0.75);
}

.opening.is-opening .opening__art {
  transform: scale(1.025) translateY(-0.6%);
  transition: transform 1.65s cubic-bezier(0.2, 0.75, 0.25, 1), filter 1.3s ease;
  filter: brightness(1.05);
}

.opening.is-opening .envelope-glow {
  opacity: 1;
  transform: translateX(-58%) scale(1.25);
}

.motes i {
  position: absolute;
  z-index: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 247, 193, 0.88);
  box-shadow: 0 0 8px rgba(255, 240, 142, 0.8);
  animation: mote-float 6s ease-in-out infinite;
}

.motes i:nth-child(1) { top: 18%; left: 22%; animation-delay: -1s; }
.motes i:nth-child(2) { top: 27%; left: 73%; animation-delay: -3.8s; }
.motes i:nth-child(3) { top: 43%; left: 17%; animation-delay: -2.4s; }
.motes i:nth-child(4) { top: 50%; left: 83%; animation-delay: -5.1s; }
.motes i:nth-child(5) { top: 62%; left: 29%; animation-delay: -4.2s; }
.motes i:nth-child(6) { top: 36%; left: 56%; animation-delay: -0.4s; }

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

[hidden] {
  display: none !important;
}

@keyframes scene-arrival {
  from { opacity: 0; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes content-arrival {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gentle-nudge {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
}

@keyframes spark-breathe {
  0%, 100% { transform: scale(0.92); opacity: 0.62; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes mote-float {
  0%, 100% { transform: translate3d(0, 6px, 0); opacity: 0.25; }
  50% { transform: translate3d(5px, -10px, 0); opacity: 0.9; }
}

@media (max-aspect-ratio: 9 / 16) {
  .opening {
    width: 100vw;
  }

  .opening__content {
    top: 32.5svh;
  }
}

@media (max-width: 699px) {
  .opening {
    width: 100vw;
  }
}

@media (max-height: 680px) {
  .opening__content {
    top: 27svh;
  }

  .eyebrow {
    margin-bottom: 10px;
  }

  .prompt {
    margin-top: 12px;
  }

  .recipient-form {
    margin-top: 12px;
  }

  .found {
    padding-top: 0;
  }

  .found__spark {
    display: none;
  }

  .found > p:not(.sound-availability) {
    margin-block: 10px 14px;
  }

  .sound-choice {
    margin-top: 10px;
  }

  .campus-frame {
    padding-bottom: 14svh;
  }

  .campus-copy {
    padding-block: 10px 11px;
    font-size: clamp(20px, 3.2svh, 24px);
  }

  .campus-hint {
    bottom: max(60px, calc(env(safe-area-inset-bottom) + 56px));
  }

  .support-intro {
    padding-top: max(75px, calc(env(safe-area-inset-top) + 68px));
  }

}

@media (max-height: 500px) {
  .opening__art {
    background-size: 100% auto;
  }

  .opening__content {
    top: max(42px, calc(env(safe-area-inset-top) + 18px));
  }

  .eyebrow {
    display: none;
  }

  h1 {
    font-size: 22px;
  }

  .prompt,
  .recipient-form {
    margin-top: 10px;
  }

  .support-content {
    padding-top: 0;
  }

  .support-intro {
    min-height: 100svh;
    padding-top: max(68px, calc(env(safe-area-inset-top) + 62px));
  }

  .teammates {
    height: 260px;
  }
}

@media (min-width: 700px) {
  .opening__content {
    top: 34svh;
  }

  .support-content {
    width: min(100%, 640px);
  }
}

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

/* Cake chapter: a quiet pixel doorway into the small birthday theatre. */
.pixel-transition,
.video-scene,
.cake-scene {
  position: fixed;
  z-index: 20;
  inset: 0;
  width: var(--scene-width);
  margin-inline: auto;
  overflow: hidden;
}

.pixel-transition {
  z-index: 22;
  background: #173a31;
  isolation: isolate;
}

.pixel-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(18, 1fr);
  transform: scale(1.04);
}

.pixel-grid i {
  display: block;
  opacity: 0;
  background: #83ad67;
  box-shadow: inset 0 0 0 1px rgba(226, 236, 172, 0.08);
  transform: translate(var(--pixel-from-x), var(--pixel-from-y)) scale(0.72);
}

.pixel-grid i:nth-child(3n) { background: #6d8c57; }
.pixel-grid i:nth-child(4n) { background: #c3a16a; }
.pixel-grid i:nth-child(7n) { background: #f6e9bc; }

.pixel-transition.is-opening .pixel-grid i {
  animation: pixel-fill 760ms var(--pixel-delay) cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

.pixel-transition.is-revealing .pixel-grid i {
  opacity: 1;
  animation: pixel-open 920ms var(--pixel-reveal-delay) cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

.pixel-transition.is-opening::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 52%, rgba(255, 246, 183, 0.7), transparent 28%);
  content: "";
  opacity: 0;
  animation: pixel-flash 1050ms 560ms ease-out forwards;
}

.video-scene {
  display: grid;
  place-items: center;
  background: #050806;
}

.minecraft-video {
  display: block;
  width: 100%;
  height: 100%;
  background: #050806;
  object-fit: contain;
  transition: opacity 1800ms ease;
}

.minecraft-video.is-ending {
  opacity: 0.22;
  transition: opacity 1800ms ease;
}

.video-blackout {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: #050806;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1600ms ease;
}

.video-blackout.is-active { opacity: 1; }

.warm-light {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
  transition: opacity 1200ms ease, transform 1200ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.warm-light::before,
.warm-light::after,
.warm-light span {
  position: absolute;
  inset: 50%;
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.warm-light::before {
  width: 26px;
  height: 26px;
  background: #fff1ac;
  box-shadow: 0 0 18px 7px rgba(255, 224, 126, 0.8), 0 0 72px 18px rgba(255, 201, 103, 0.34);
}

.warm-light::after {
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255, 224, 126, 0.5);
  animation: warm-ring 2.8s ease-out infinite;
}

.warm-light span {
  width: 94px;
  height: 94px;
  border: 1px solid rgba(255, 224, 126, 0.24);
  animation: warm-ring 2.8s 900ms ease-out infinite;
}

.warm-light.is-arrived {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.cake-scene {
  overflow-x: hidden;
  overflow-y: auto;
  color: #385a4b;
  background: #142f2a url("assets/images/cake/cake-stage.png") center top / cover no-repeat;
  isolation: isolate;
  overscroll-behavior: contain;
}

.cake-scene::before {
  position: fixed;
  z-index: 1;
  inset: 0;
  width: var(--scene-width);
  margin-inline: auto;
  background: linear-gradient(to bottom, rgba(5, 13, 15, 0.18), rgba(255, 244, 196, 0.04) 58%, rgba(5, 13, 10, 0.28));
  content: "";
  pointer-events: none;
}

.cake-scene::after {
  position: fixed;
  z-index: 10;
  inset: 0;
  width: 100%;
  height: 100dvh;
  margin-inline: auto;
  background: #030706;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}

.cake-scene.is-wishing::after { opacity: 0.74; }

.cake-dimmer {
  position: fixed;
  z-index: 10;
  inset: 0;
  width: var(--scene-width);
  margin-inline: auto;
  background: radial-gradient(ellipse 48% 30% at 50% 57%, rgba(5, 8, 6, 0.18) 0%, rgba(5, 8, 6, 0.58) 48%, rgba(5, 8, 6, 0.94) 78%, #050806 100%);
  opacity: 1;
  pointer-events: none;
  transition: opacity 1800ms ease;
}

.cake-dimmer::before {
  position: absolute;
  inset: 0;
  background: #050806;
  content: "";
  opacity: 1;
  transition: opacity 1150ms ease;
}

.cake-dimmer::after {
  position: absolute;
  top: 47%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff0a8;
  box-shadow: 0 0 14px 6px rgba(255, 226, 130, 0.82), 0 0 68px 24px rgba(255, 199, 91, 0.28);
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition: opacity 850ms ease, transform 1100ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.cake-scene.is-first-light .cake-dimmer::before { opacity: 0; }
.cake-scene.is-first-light .cake-dimmer::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cake-scene.is-lighting .cake-dimmer::after { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
.cake-scene.is-revealed .cake-dimmer { opacity: 0; }

.cake-night-glow {
  position: fixed;
  z-index: 2;
  top: 35%;
  left: 50%;
  width: 74%;
  height: 38%;
  border-radius: 50%;
  background: rgba(255, 221, 142, 0.36);
  filter: blur(42px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 1500ms ease;
}

.cake-scene.is-lighting .cake-night-glow { opacity: 0.6; }
.cake-scene.is-revealed .cake-night-glow { opacity: 1; }

.cake-copy {
  position: relative;
  z-index: 12;
  width: min(88%, 430px);
  margin: 0 auto;
  padding: max(70px, calc(env(safe-area-inset-top) + 58px)) 10px 0;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 900ms ease, transform 900ms ease;
}

.cake-scene.is-copy-ready .cake-copy { opacity: 1; transform: translateY(0); }

.cake-kicker {
  margin: 0 0 9px;
  color: rgba(246, 243, 211, 0.88);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  transition: opacity 750ms ease;
}

.cake-copy h2 {
  margin: 0;
  color: #fff8d9;
  font-family: var(--font-letter);
  font-size: clamp(29px, 5.3svh, 42px);
  line-height: 1.42;
  font-weight: 400;
  transition: opacity 750ms ease;
}

.cake-scene.is-wishing .cake-kicker,
.cake-scene.is-wishing .cake-copy h2 { opacity: 0.28; }

.cake-wish-line {
  min-height: 29px;
  margin: 9px 0 0;
  color: #fff3c5;
  font-family: var(--font-letter);
  font-size: clamp(17px, 2.5svh, 22px);
  line-height: 1.55;
  transition: opacity 500ms ease, transform 500ms ease;
}

.cake-tableau {
  position: relative;
  z-index: 11;
  width: min(100%, 560px);
  height: min(64svh, 570px);
  margin: -3svh auto 0;
  opacity: 0;
  transform: translateY(72px) scale(0.92);
  transition: opacity 1200ms ease, transform 1600ms cubic-bezier(0.16, 0.76, 0.22, 1);
}

.cake-scene.is-cake-arriving .cake-tableau { opacity: 1; transform: translateY(0) scale(1); }

.cake-visual {
  position: absolute;
  bottom: -2%;
  left: 50%;
  width: min(100%, 560px);
  height: auto;
  aspect-ratio: 1;
  transform: translateX(-50%) translateZ(0);
}

.cake-image {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: brightness(0.16) saturate(0.55) drop-shadow(0 17px 18px rgba(10, 18, 13, 0.32));
  transition: opacity 800ms ease, transform 1000ms cubic-bezier(0.2, 0.75, 0.25, 1), filter 900ms ease;
}

.cake-scene.is-cake-arriving .cake-image {
  filter: brightness(0.32) saturate(0.68) drop-shadow(0 17px 18px rgba(10, 18, 13, 0.3));
}

.cake-scene.is-lighting .cake-image {
  filter: brightness(0.52) saturate(0.8) drop-shadow(0 17px 18px rgba(20, 31, 20, 0.28));
}

.cake-scene.is-revealed .cake-image {
  filter: brightness(1) saturate(1) drop-shadow(0 17px 18px rgba(40, 46, 30, 0.2));
}

.cake-scene.is-wishing .cake-image {
  filter: brightness(0.43) saturate(0.72) drop-shadow(0 17px 18px rgba(10, 18, 13, 0.34));
}

.cake-scene.is-wishing .cake-name { opacity: 0.42; }

.cake-image--cut { opacity: 0; transform: translateY(8px) scale(0.98); }
.cake-image--whole.is-hidden { opacity: 0; transform: translateY(8px) scale(0.98); }
.cake-image--cut.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.cake-name {
  position: absolute;
  z-index: 3;
  top: 52.8%;
  left: 49.8%;
  display: grid;
  width: 22.8%;
  height: 8.2%;
  place-items: center;
  color: #8c4853;
  font-family: var(--font-letter);
  font-size: clamp(13px, 2.15svh, 17px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 1px rgba(255, 247, 232, 0.9),
    0 1.5px 1px rgba(99, 43, 51, 0.28);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-0.35deg);
  transition: opacity 500ms ease, transform 500ms ease;
}

.cake-scene.is-cake-arriving .cake-name { opacity: 0.25; }
.cake-scene.is-revealed .cake-name { opacity: 1; }

.cake-visual.is-cut .cake-name,
.cake-image--cut.is-visible ~ .cake-name,
.cake-name[hidden] {
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
}

.cake-visual::after {
  position: absolute;
  right: 13%;
  bottom: 3%;
  left: 13%;
  height: 8%;
  border-radius: 50%;
  background: rgba(28, 55, 32, 0.25);
  content: "";
  filter: blur(14px);
  pointer-events: none;
}

.candles {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.candle {
  position: absolute;
  top: var(--candle-top, 50%);
  left: var(--candle-left, 50%);
  width: 8px;
  height: 28px;
  border: 1px solid rgba(127, 57, 67, 0.66);
  border-radius: 3px 3px 2px 2px;
  background: repeating-linear-gradient(135deg, #c95e6c 0 3px, #fff2c8 3px 6px);
  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.62), 0 2px 3px rgba(76, 46, 31, 0.32);
  opacity: 0;
  transform: translate(-50%, -100%) translateY(7px) scale(var(--candle-scale, 1));
  transform-origin: 50% 100%;
  transition: opacity 420ms ease, transform 420ms ease;
}

.cake-scene.is-cake-arriving .candle { opacity: 1; transform: translate(-50%, -100%) scale(var(--candle-scale, 1)); }
.cake-scene .candle.is-lit { opacity: 1; transform: translate(-50%, -100%) scale(var(--candle-scale, 1)); }
.cake-visual.is-extinguished .candle {
  opacity: 0;
  transform: translate(-50%, -96%) scale(calc(var(--candle-scale, 1) * 0.96));
  transition: opacity 650ms ease, transform 650ms ease;
}

.cake-visual.is-cut .candles { display: none; }

.candle-flame {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 7px;
  height: 11px;
  border-radius: 70% 30% 70% 30%;
  background: #ffe890;
  box-shadow: 0 0 4px 1px rgba(255, 219, 103, 0.82), 0 0 8px 2px rgba(255, 191, 72, 0.22);
  opacity: 0;
  transform: translateX(-50%) rotate(45deg) scale(0.45);
  transition: opacity 280ms ease, transform 280ms ease;
  animation: candle-flicker 1.4s ease-in-out infinite;
}

.candle.is-lit .candle-flame { opacity: 1; transform: translateX(-50%) rotate(45deg) scale(1); }
.candle.is-first .candle-flame { box-shadow: 0 0 6px 2px rgba(255, 224, 125, 0.9), 0 0 13px 4px rgba(255, 194, 82, 0.3); }
.is-extinguished .candle-flame { opacity: 0; transform: translateX(-50%) rotate(45deg) scale(0.2); }

.cake-actions {
  position: relative;
  z-index: 12;
  width: min(90%, 390px);
  min-height: 150px;
  margin: -2svh auto 0;
  padding-bottom: max(34px, calc(env(safe-area-inset-bottom) + 24px));
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 900ms ease, transform 900ms ease;
}

.cake-scene.is-interactive .cake-actions { opacity: 1; pointer-events: auto; transform: translateY(0); }
.cake-scene.is-wishing .cake-actions { opacity: 1; }

.cake-scene.is-wishing .cake-actions {
  position: fixed;
  z-index: 13;
  bottom: 0;
  left: 50%;
  width: var(--scene-width);
  min-height: 0;
  margin: 0;
  padding: 28px 20px max(24px, calc(env(safe-area-inset-bottom) + 18px));
  background: linear-gradient(to bottom, transparent, rgba(4, 13, 9, 0.78) 28%, rgba(4, 13, 9, 0.94));
  transform: translateX(-50%);
}

.wish-ready,
.cut-cake,
.hold-to-blow {
  min-height: 50px;
  padding: 10px 25px;
  border: 1px solid rgba(255, 240, 191, 0.58);
  border-radius: 26px;
  background: rgba(255, 251, 224, 0.88);
  box-shadow: 0 9px 21px rgba(37, 54, 38, 0.18), inset 0 0 0 2px rgba(255, 255, 255, 0.3);
  color: #4c755a;
  cursor: pointer;
  font-family: var(--font-letter);
  font-size: 18px;
  line-height: 1.3;
}

.wish-ready:active,
.cut-cake:active,
.hold-to-blow:active { transform: translateY(2px) scale(0.98); }

.blow-panel,
.wish-result,
.cake-slice-copy { animation: cake-copy-arrive 720ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }

.blow-panel p,
.wish-result p,
.cake-slice-copy {
  margin: 0 0 14px;
  color: #fff6d5;
  font-family: var(--font-letter);
  font-size: 17px;
  line-height: 1.65;
  text-shadow: 0 1px 3px rgba(20, 42, 29, 0.48);
}

.blow-panel .microphone-help {
  min-height: 22px;
  margin-top: -7px;
  color: rgba(255, 246, 213, 0.84);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
}

.hold-to-blow { margin-top: 3px; min-height: 45px; padding-inline: 18px; font-size: 15px; opacity: 0; transform: translateY(8px); transition: opacity 600ms ease, transform 600ms ease; }
.hold-to-blow.is-arrived { opacity: 1; transform: translateY(0); }
.hold-to-blow.is-holding { background: #fff1b6; box-shadow: 0 0 0 5px rgba(255, 222, 125, 0.26), 0 9px 21px rgba(37, 54, 38, 0.18); }

.breath-ring { display: inline-grid; width: 42px; height: 42px; margin-bottom: 7px; place-items: center; border: 1px solid rgba(255, 243, 190, 0.7); border-radius: 50%; }
.breath-ring i { width: 13px; height: 13px; border: 2px solid #fff3bf; border-radius: 50%; animation: breath-pulse 2.2s ease-out infinite; }

.cake-slice-copy { opacity: 0; transform: translateY(9px); }
.cake-slice-copy.is-arrived { opacity: 1; transform: translateY(0); }

.clover-formation {
  position: absolute;
  z-index: 5;
  top: 24.5%;
  left: 50%;
  width: 78px;
  height: 78px;
  opacity: 0;
  filter: blur(5px);
  transform: translate(-50%, 8px) scale(0.52);
}

.clover-formation::before {
  position: absolute;
  inset: -12px -14px 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 27% 42%, rgba(239, 247, 222, 0.52) 0 5%, transparent 16%),
    radial-gradient(circle at 72% 32%, rgba(230, 242, 214, 0.46) 0 4%, transparent 15%),
    radial-gradient(circle at 48% 68%, rgba(239, 247, 222, 0.38) 0 5%, transparent 18%);
  content: "";
  opacity: 0;
}

.has-clover .clover-formation {
  animation: clover-form 1700ms 160ms cubic-bezier(0.18, 0.72, 0.2, 1) forwards;
}

.cake-visual.is-cut .clover-formation {
  animation: clover-rest 700ms ease forwards;
}

.has-clover .clover-formation::before { animation: clover-smoke 1500ms ease-out both; }

.clover-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(46, 80, 38, 0.2));
  transform: rotate(-7deg) scale(1.08);
}

.firework-trail {
  position: absolute;
  z-index: 1;
  top: 8%;
  right: 19%;
  width: 2px;
  height: 20%;
  background: linear-gradient(to bottom, transparent, rgba(255, 229, 152, 0.9));
  opacity: 0;
  transform-origin: bottom;
}

.firework-trail i {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff1ac;
  box-shadow: 0 0 14px 5px rgba(255, 219, 112, 0.74);
}

.firework-burst {
  position: absolute;
  z-index: 1;
  top: 5%;
  right: 10%;
  width: 90px;
  height: 90px;
  opacity: 0;
}

.firework-burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(to bottom, #fff5bf, rgba(255, 213, 104, 0));
  transform-origin: 50% 0;
}

.firework-burst i:nth-child(1) { transform: translate(-50%, -2px) rotate(0deg); }
.firework-burst i:nth-child(2) { transform: translate(-50%, -2px) rotate(45deg); }
.firework-burst i:nth-child(3) { transform: translate(-50%, -2px) rotate(90deg); }
.firework-burst i:nth-child(4) { transform: translate(-50%, -2px) rotate(135deg); }
.firework-burst i:nth-child(5) { transform: translate(-50%, -2px) rotate(180deg); }
.firework-burst i:nth-child(6) { transform: translate(-50%, -2px) rotate(225deg); }
.firework-burst i:nth-child(7) { transform: translate(-50%, -2px) rotate(270deg); }
.firework-burst i:nth-child(8) { transform: translate(-50%, -2px) rotate(315deg); }

.cake-scene.is-lighting .firework-trail { animation: firework-rise 900ms 180ms ease-out both; }
.cake-scene.is-lighting .firework-burst { animation: firework-bloom 1100ms 900ms ease-out both; }

.opening.is-in-pixel .music-toggle,
.opening.is-in-video .music-toggle,
.opening.is-in-cake .music-toggle { z-index: 30; }

@keyframes pixel-fill { from { opacity: 0; transform: translate(var(--pixel-from-x), var(--pixel-from-y)) scale(0.72); } 45% { opacity: 1; } to { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes pixel-open { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--pixel-from-x), var(--pixel-from-y)) scale(0.72); } }
@keyframes pixel-flash { 0% { opacity: 0; } 35% { opacity: 0.9; } 100% { opacity: 0; } }
@keyframes warm-ring { 0% { opacity: 0.15; transform: translate(-50%, -50%) scale(0.65); } 45% { opacity: 0.75; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); } }
@keyframes candle-flicker { 0%, 100% { margin-left: -1px; transform: translateX(-50%) rotate(45deg) scale(0.94); } 50% { margin-left: 1px; transform: translateX(-50%) rotate(38deg) scale(1.08); } }
@keyframes cake-copy-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes breath-pulse { 0%, 100% { transform: scale(0.72); opacity: 0.55; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes clover-form { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.48); filter: blur(7px); } 45% { opacity: 0.72; filter: blur(2px); } 78% { opacity: 1; transform: translate(-50%, 0) scale(1.04); filter: none; } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); filter: none; } }
@keyframes clover-smoke { 0% { opacity: 0; transform: translateY(12px) scale(0.68); filter: blur(4px); } 32% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-14px) scale(1.24); filter: blur(8px); } }
@keyframes clover-rest { from { opacity: 1; transform: translate(-50%, 0) scale(1); filter: none; } to { opacity: 0; transform: translate(-50%, -5px) scale(0.96); filter: none; } }
@keyframes firework-rise { 0% { opacity: 0; transform: translateY(34px) scaleY(0.35); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(0) scaleY(1); } }
@keyframes firework-bloom { 0% { opacity: 0; transform: scale(0.25); } 28% { opacity: 1; transform: scale(1.12); } 100% { opacity: 0; transform: scale(1.38); } }

@media (max-width: 420px) {
  .cake-tableau { height: min(60svh, 500px); margin-top: -1svh; }
  .cake-copy { padding-top: max(64px, calc(env(safe-area-inset-top) + 52px)); }
  .cake-copy h2 { font-size: clamp(27px, 4.8svh, 36px); }
  .cake-name { font-size: 15px; }
}

/* The birthday garden is a single watercolor walk, not a collection screen. */
.garden-invitation {
  min-height: 48px;
  margin-top: 4px;
  padding: 10px 25px;
  border: 1px solid rgba(255, 240, 191, 0.58);
  border-radius: 24px;
  background: rgba(255, 251, 224, 0.9);
  box-shadow: 0 9px 21px rgba(37, 54, 38, 0.18), inset 0 0 0 2px rgba(255, 255, 255, 0.3);
  color: #4c755a;
  cursor: pointer;
  font-family: var(--font-letter);
  font-size: 17px;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 720ms ease, transform 720ms ease, background 180ms ease;
}

.garden-invitation.is-arrived { opacity: 1; transform: translateY(0); }
.garden-invitation:active { background: #fff2bd; transform: translateY(2px) scale(0.98); }
.garden-invitation:focus-visible { outline: 3px solid rgba(255, 224, 126, 0.7); outline-offset: 3px; }

.cake-scene.is-leaving {
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 900ms ease, transform 1200ms ease;
}

.birthday-garden {
  position: fixed;
  z-index: 24;
  inset: 0;
  width: var(--scene-width);
  margin-inline: auto;
  overflow: hidden;
  background: #dcebd7;
  color: #3d624c;
  isolation: isolate;
  overscroll-behavior: contain;
}

.birthday-garden::after {
  position: absolute;
  z-index: 20;
  inset: 0;
  background: #fff9dc;
  content: "";
  opacity: 0;
  pointer-events: none;
}

.birthday-garden.is-arriving::after {
  animation: garden-curtain 1250ms ease-out both;
}

.birthday-garden.is-leaving {
  opacity: 0;
  transform: translateX(3%);
  transition: opacity 720ms ease, transform 850ms ease;
}

.garden-stage,
.garden-scene {
  position: absolute;
  inset: 0;
}

.garden-stage {
  touch-action: pan-y;
}

.garden-scene {
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(9%, 0, 0);
  transition: opacity 850ms ease, transform 1100ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.garden-scene.is-before { transform: translate3d(-9%, 0, 0); }

.garden-scene.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.garden-stage.is-swiping .garden-scene.is-active {
  transform: translate3d(var(--swipe-offset, 0), 0, 0);
  transition: none;
}

.garden-panorama {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: auto;
  max-width: none;
  min-width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(0.96) contrast(0.98) brightness(1.015);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.garden-scene--entrance .garden-panorama { transform: translate3d(-36%, 0, 0) scale(1.035); }
.garden-scene--dress .garden-panorama { transform: translate3d(-50%, 0, 0) scale(1.035); }
.garden-scene--flowers .garden-panorama { transform: translate3d(-45%, 0, 0) scale(1.035); }
.garden-scene--lake .garden-panorama { transform: translate3d(-48%, 0, 0) scale(1.035); }

.garden-scene--entrance.is-active .garden-panorama { animation: garden-pan-entrance 20s ease-out both; }
.garden-scene--dress.is-active .garden-panorama { animation: garden-pan-dress 22s ease-out both; }
.garden-scene--flowers.is-active .garden-panorama { animation: garden-pan-flowers 22s ease-out both; }
.garden-scene--lake.is-active .garden-panorama { animation: garden-pan-lake 24s ease-out both; }

.garden-scene::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(255, 252, 226, 0.13), transparent 38%, rgba(34, 88, 69, 0.11)),
    linear-gradient(to right, rgba(245, 250, 226, 0.08), transparent 28%, rgba(213, 235, 230, 0.05));
  content: "";
  pointer-events: none;
}

.garden-sunlight {
  position: absolute;
  z-index: 1;
  top: -8%;
  left: -28%;
  width: 120%;
  height: 58%;
  background: radial-gradient(ellipse at center, rgba(255, 249, 194, 0.42), transparent 67%);
  opacity: 0.35;
  pointer-events: none;
  transform: rotate(-10deg);
}

.garden-scene.is-active .garden-sunlight { animation: garden-light-breathe 8s ease-in-out infinite alternate; }

.garden-kicker {
  color: #588163;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
}

.garden-clock-mark {
  position: absolute;
  z-index: 4;
  top: max(76px, calc(env(safe-area-inset-top) + 70px));
  right: 7%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #55755d;
  font-family: var(--font-letter);
  font-size: 13px;
  opacity: 0;
  text-shadow: 0 1px rgba(255, 255, 255, 0.8);
  transform: translateY(-6px);
}

.garden-scene.is-active .garden-clock-mark {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 900ms 350ms ease, transform 900ms 350ms ease;
}

.garden-clock-mark__face {
  position: relative;
  display: block;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(92, 116, 79, 0.5);
  border-radius: 50%;
  background: rgba(255, 252, 228, 0.78);
  box-shadow: 0 3px 10px rgba(73, 91, 62, 0.12);
}

.garden-clock-mark__face::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #738769;
  content: "";
  transform: translate(-50%, -50%);
}

.garden-clock-mark__face i,
.garden-clock-mark__face b {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 0.5px);
  width: 1px;
  border-radius: 1px;
  background: #71846a;
  transform-origin: 50% 100%;
}

.garden-clock-mark__face i { height: 8px; transform: rotate(338deg); }
.garden-clock-mark__face b { height: 10px; animation: garden-minute-hand 180s linear infinite; }

.garden-letter--entrance {
  position: absolute;
  z-index: 3;
  right: 6%;
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 82px));
  width: 88%;
  max-height: min(57svh, 440px);
  padding: 15px 18px 16px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 242, 0.76);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 254, 235, 0.86), rgba(244, 250, 226, 0.72));
  box-shadow: 0 12px 32px rgba(55, 83, 62, 0.12), inset 3px 0 rgba(249, 202, 179, 0.48);
  scrollbar-width: none;
  -webkit-backdrop-filter: blur(9px) saturate(0.86);
  backdrop-filter: blur(9px) saturate(0.86);
}

.garden-letter--entrance::-webkit-scrollbar { display: none; }

.garden-letter--entrance p {
  margin: 0 0 6px;
  color: #466451;
  font-family: var(--font-letter);
  font-size: clamp(15px, 2.2svh, 17px);
  line-height: 1.48;
  opacity: 0;
  transform: translateY(8px);
}

.garden-letter--entrance .garden-kicker {
  margin-bottom: 8px;
  color: #718b71;
  font-family: var(--font-body);
  font-size: 12px;
}

.garden-scene--entrance.is-active .garden-letter p { animation: garden-copy-arrive 750ms ease forwards; }
.garden-scene--entrance.is-active .garden-letter p:nth-child(1) { animation-delay: 300ms; }
.garden-scene--entrance.is-active .garden-letter p:nth-child(2) { animation-delay: 800ms; }
.garden-scene--entrance.is-active .garden-letter p:nth-child(3) { animation-delay: 1750ms; }
.garden-scene--entrance.is-active .garden-letter p:nth-child(4) { animation-delay: 2850ms; }
.garden-scene--entrance.is-active .garden-letter p:nth-child(5) { animation-delay: 4050ms; }
.garden-scene--entrance.is-active .garden-letter p:nth-child(6) { animation-delay: 5350ms; }
.garden-scene--entrance.is-active .garden-letter p:nth-child(7) { animation-delay: 6500ms; }

.dress-room {
  position: absolute;
  z-index: 3;
  inset: 0;
}

.dress-copy {
  position: absolute;
  z-index: 4;
  top: max(70px, calc(env(safe-area-inset-top) + 62px));
  left: 50%;
  width: 88%;
  color: #476554;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.86);
  transform: translateX(-50%);
}

.dress-copy p {
  margin: 0 0 3px;
  font-family: var(--font-letter);
  font-size: clamp(16px, 2.35svh, 19px);
  line-height: 1.48;
  opacity: 0;
  transform: translateY(8px);
}

.dress-tech-note {
  display: inline-block;
  margin-top: 7px;
  padding: 6px 10px;
  border-radius: 5px;
  background: rgba(255, 254, 237, 0.58);
  color: rgba(71, 101, 84, 0.78);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(6px);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.garden-scene--dress.is-active .dress-copy p { animation: garden-copy-arrive 800ms ease forwards; }
.garden-scene--dress.is-active .dress-copy p:nth-child(1) { animation-delay: 400ms; }
.garden-scene--dress.is-active .dress-tech-note { animation: garden-copy-arrive 700ms 1450ms ease forwards; }

.dress-display {
  position: absolute;
  z-index: 3;
  top: 52%;
  left: 50%;
  width: min(65%, 280px);
  height: min(51svh, 440px);
  opacity: 0;
  filter: drop-shadow(0 14px 18px rgba(64, 82, 65, 0.18));
  transform: translate(-50%, -43%) scale(0.94);
  transition: opacity 1000ms ease, transform 1350ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.garden-scene--dress.is-active .dress-display {
  opacity: 1;
  transform: translate(-50%, -43%) scale(1);
  transition-delay: 900ms;
}

.dress-display > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dress-ornament {
  position: absolute;
  z-index: 2;
  top: 45%;
  left: 58%;
  display: block;
  width: 34px;
  height: 34px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.4);
  transition: opacity 450ms ease, transform 650ms cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

.dress-display[data-ornament="flower"] .dress-ornament--flower,
.dress-display[data-ornament="ribbon"] .dress-ornament--ribbon,
.dress-display[data-ornament="clover"] .dress-ornament--clover {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.dress-choices {
  position: absolute;
  z-index: 5;
  right: 7%;
  bottom: max(90px, calc(env(safe-area-inset-bottom) + 82px));
  left: 7%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  opacity: 0;
  transform: translateY(10px);
}

.dress-choice-hint {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 24px;
  margin: 0 0 1px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 241, 0.68);
  border-radius: 16px;
  background: rgba(255, 254, 236, 0.72);
  box-shadow: 0 4px 14px rgba(61, 94, 69, 0.08);
  color: #54745b;
  font-family: var(--font-letter);
  font-size: 13px;
  line-height: 1.35;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.dress-choice-hint i,
.memory-note.is-invitation i {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef9baa;
  box-shadow: 0 0 0 0 rgba(239, 155, 170, 0.34);
  animation: garden-tap-cue 2.2s ease-out infinite;
}

.garden-scene--dress.is-active .dress-choices {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 900ms 2300ms ease, transform 900ms 2300ms ease;
}

.dress-choices button {
  display: grid;
  min-width: 0;
  min-height: 62px;
  padding: 6px 3px 7px;
  place-items: center;
  gap: 2px;
  border: 1px solid rgba(87, 119, 92, 0.19);
  border-radius: 8px;
  background: rgba(255, 254, 236, 0.72);
  box-shadow: 0 6px 18px rgba(61, 94, 69, 0.1);
  color: #58765d;
  cursor: pointer;
  font-family: var(--font-letter);
  font-size: 12px;
  line-height: 1.2;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.dress-choices button[aria-pressed="true"] {
  border-color: rgba(88, 131, 88, 0.48);
  background: rgba(247, 255, 224, 0.94);
  box-shadow: 0 0 0 2px rgba(255, 255, 244, 0.65), 0 7px 20px rgba(61, 94, 69, 0.13);
  transform: translateY(-2px);
}

.dress-choices button:active { transform: scale(0.96); }
.dress-choices button:focus-visible { outline: 3px solid rgba(109, 150, 101, 0.48); outline-offset: 2px; }

.ornament-swatch {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
}

.ornament-swatch--flower::before,
.dress-ornament--flower::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 9px 9px 3px 9px;
  background: #f5abb8;
  box-shadow: 9px 0 #f8bdc6, 0 9px #f7b5c3, 9px 9px #f4a8b8;
  content: "";
  transform: translate(-82%, -82%) rotate(4deg);
}

.ornament-swatch--flower::after,
.dress-ornament--flower::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f4d16d;
  box-shadow: 0 1px 2px rgba(101, 73, 46, 0.22);
  content: "";
  transform: translate(-50%, -50%);
}

.ornament-swatch--ribbon::before,
.ornament-swatch--ribbon::after,
.dress-ornament--ribbon::before,
.dress-ornament--ribbon::after {
  position: absolute;
  top: 8px;
  width: 15px;
  height: 13px;
  border: 2px solid #db899e;
  background: rgba(249, 188, 200, 0.84);
  content: "";
}

.ornament-swatch--ribbon::before,
.dress-ornament--ribbon::before { left: 1px; border-radius: 10px 3px 10px 5px; transform: rotate(13deg); }
.ornament-swatch--ribbon::after,
.dress-ornament--ribbon::after { right: 1px; border-radius: 3px 10px 5px 10px; transform: rotate(-13deg); }

.ornament-swatch--ribbon i,
.dress-ornament--ribbon i {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cf7e94;
  transform: translateX(-50%);
}

.ornament-swatch--clover,
.dress-ornament--clover { transform: rotate(7deg); }

.ornament-swatch--clover i,
.dress-ornament--clover i {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 11px;
  height: 11px;
  border-radius: 8px 8px 3px 8px;
  background: #77a55f;
  transform-origin: 9px 9px;
}

.ornament-swatch--clover i:nth-child(1), .dress-ornament--clover i:nth-child(1) { transform: rotate(0deg); }
.ornament-swatch--clover i:nth-child(2), .dress-ornament--clover i:nth-child(2) { transform: rotate(90deg); }
.ornament-swatch--clover i:nth-child(3), .dress-ornament--clover i:nth-child(3) { transform: rotate(180deg); }
.ornament-swatch--clover i:nth-child(4), .dress-ornament--clover i:nth-child(4) { transform: rotate(270deg); }

.memory-garden__heading {
  position: absolute;
  z-index: 4;
  top: max(72px, calc(env(safe-area-inset-top) + 64px));
  left: 50%;
  width: 84%;
  color: #466453;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.88);
  transform: translateX(-50%);
}

.memory-garden__heading p {
  margin: 0 0 5px;
  font-family: var(--font-letter);
  font-size: clamp(16px, 2.35svh, 19px);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(7px);
}

.memory-garden__heading .garden-kicker { font-family: var(--font-body); font-size: 12px; }
.garden-scene--flowers.is-active .memory-garden__heading p { animation: garden-copy-arrive 800ms ease forwards; }
.garden-scene--flowers.is-active .memory-garden__heading p:nth-child(1) { animation-delay: 300ms; }
.garden-scene--flowers.is-active .memory-garden__heading p:nth-child(2) { animation-delay: 900ms; }

.memory-flowers {
  position: absolute;
  z-index: 4;
  inset: 0;
}

.memory-flower {
  position: absolute;
  display: block;
  width: 76px;
  height: 116px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ef9baa;
  opacity: 0;
  cursor: pointer;
  filter: drop-shadow(0 5px 5px rgba(75, 103, 67, 0.14));
  transform: translate(-50%, 12px);
}

.garden-scene--flowers.is-active .memory-flower {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity 850ms ease, transform 1000ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.garden-scene--flowers.is-active .memory-flower--one { transition-delay: 1500ms; }
.garden-scene--flowers.is-active .memory-flower--two { transition-delay: 1800ms; }
.garden-scene--flowers.is-active .memory-flower--three { transition-delay: 2100ms; }

.memory-flower--one { top: 51%; left: 22%; color: #ee9cad; }
.memory-flower--two { top: 55%; left: 50%; color: #9aafd9; }
.memory-flower--three { top: 50%; left: 78%; color: #efb56e; }
.memory-flower--heart { top: 35%; left: 50%; color: #ef8ca7; pointer-events: none; }

.garden-scene--flowers.is-active .memory-flower--heart {
  opacity: 0;
  transform: translate(-50%, 12px) scale(0.65);
  transition-delay: 0ms;
}

.garden-scene--flowers.is-active .memory-flower--heart.is-open {
  opacity: 1;
  transform: translate(-50%, 0) scale(1.08);
  transition: opacity 900ms ease, transform 1200ms cubic-bezier(0.2, 0.9, 0.25, 1.18);
}

.memory-flower__stem {
  position: absolute;
  bottom: 2px;
  left: calc(50% - 1px);
  width: 2px;
  height: 65px;
  border-radius: 2px;
  background: #6f9b63;
  transform: rotate(2deg);
  transform-origin: bottom;
}

.memory-flower__stem::after {
  position: absolute;
  top: 31px;
  left: 1px;
  width: 14px;
  height: 8px;
  border-radius: 100% 0 100% 0;
  background: #80aa6e;
  content: "";
  transform: rotate(-14deg);
  transform-origin: left center;
}

.memory-flower__bloom {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 50%;
  display: block;
  width: 54px;
  height: 54px;
  transform: translateX(-50%) rotate(-7deg) scale(0.58);
  transition: transform 850ms cubic-bezier(0.2, 0.9, 0.25, 1.22), filter 850ms ease;
}

.memory-flower:not(.is-open) .memory-flower__bloom { animation: flower-invitation 2.8s ease-in-out infinite; }
.memory-flower.is-open .memory-flower__bloom { filter: saturate(1.08); transform: translateX(-50%) rotate(0) scale(1); }

button.memory-flower:not(.is-open)::before {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 50%;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 251, 210, 0.88);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(255, 244, 169, 0.42);
  content: "";
  pointer-events: none;
  transform: translateX(-50%) scale(0.72);
  animation: memory-flower-cue 2.8s ease-out infinite;
}

button.memory-flower--two:not(.is-open)::before { animation-delay: 600ms; }
button.memory-flower--three:not(.is-open)::before { animation-delay: 1200ms; }

.memory-flower__bloom i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 55% 55% 48% 48%;
  background: currentColor;
  box-shadow: inset 0 7px rgba(255, 255, 255, 0.18);
  transform-origin: 50% 100%;
}

.memory-flower__bloom i:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
.memory-flower__bloom i:nth-child(2) { transform: translate(-50%, -100%) rotate(72deg); }
.memory-flower__bloom i:nth-child(3) { transform: translate(-50%, -100%) rotate(144deg); }
.memory-flower__bloom i:nth-child(4) { transform: translate(-50%, -100%) rotate(216deg); }
.memory-flower__bloom i:nth-child(5) { transform: translate(-50%, -100%) rotate(288deg); }

.memory-flower__bloom b {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #f4d77b;
  box-shadow: inset 0 2px rgba(255, 246, 199, 0.75), 0 2px 3px rgba(97, 72, 47, 0.15);
  transform: translate(-50%, -50%);
}

.memory-flower:focus-visible { outline: 3px solid rgba(91, 132, 87, 0.46); outline-offset: 3px; }

.memory-note {
  position: absolute;
  z-index: 5;
  right: 7%;
  bottom: max(94px, calc(env(safe-area-inset-bottom) + 84px));
  left: 7%;
  display: grid;
  min-height: 82px;
  padding: 12px 16px;
  place-items: center;
  border: 1px solid rgba(255, 255, 239, 0.7);
  border-radius: 6px;
  background: rgba(255, 254, 236, 0.78);
  box-shadow: 0 8px 22px rgba(56, 90, 63, 0.11);
  color: #496755;
  text-align: center;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.memory-note p {
  margin: 0;
  font-family: var(--font-letter);
  font-size: clamp(15px, 2.25svh, 18px);
  line-height: 1.55;
}

.memory-note.is-invitation {
  border-color: rgba(244, 209, 122, 0.72);
  box-shadow: 0 8px 22px rgba(56, 90, 63, 0.11), 0 0 0 3px rgba(255, 251, 217, 0.28);
}

.memory-note.is-invitation p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.memory-note.is-changing p { animation: memory-note-change 520ms ease both; }

.lake-copy {
  position: absolute;
  z-index: 4;
  top: max(76px, calc(env(safe-area-inset-top) + 68px));
  left: 7%;
  width: 78%;
  color: #426356;
  text-shadow: 0 1px rgba(255, 255, 255, 0.9);
}

.lake-copy p {
  margin: 0 0 5px;
  font-family: var(--font-letter);
  font-size: clamp(16px, 2.3svh, 19px);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(7px);
}

.lake-copy .garden-kicker { font-family: var(--font-body); font-size: 12px; }
.garden-scene--lake.is-active .lake-copy p { animation: garden-copy-arrive 800ms ease forwards; }
.garden-scene--lake.is-active .lake-copy p:nth-child(1) { animation-delay: 350ms; }
.garden-scene--lake.is-active .lake-copy p:nth-child(2) { animation-delay: 950ms; }

.doubao-paw {
  position: absolute;
  z-index: 5;
  top: 70%;
  left: 63%;
  display: grid;
  width: 58px;
  height: 58px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(112, 122, 91, 0.24);
  border-radius: 50%;
  background: rgba(255, 249, 224, 0.72);
  box-shadow: 0 8px 20px rgba(50, 83, 66, 0.14), 0 0 0 0 rgba(255, 250, 218, 0.48);
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72) rotate(-9deg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.garden-scene--lake.is-active .doubao-paw {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-9deg);
  transition: opacity 900ms 1700ms ease, transform 1100ms 1700ms cubic-bezier(0.2, 0.9, 0.25, 1.2);
  animation: paw-ripple 3s 3100ms ease-out infinite;
}

.doubao-paw > span { position: relative; display: block; width: 32px; height: 30px; }
.doubao-paw > span::after {
  position: absolute;
  right: 7px;
  bottom: 1px;
  width: 18px;
  height: 16px;
  border-radius: 50% 50% 43% 43%;
  background: #ce91a0;
  content: "";
}

.doubao-paw i {
  position: absolute;
  width: 8px;
  height: 10px;
  border-radius: 50%;
  background: #ce91a0;
}

.doubao-paw i:nth-child(1) { top: 2px; left: 3px; transform: rotate(-25deg); }
.doubao-paw i:nth-child(2) { top: -1px; left: 11px; transform: rotate(-8deg); }
.doubao-paw i:nth-child(3) { top: 1px; right: 5px; transform: rotate(13deg); }
.doubao-paw i:nth-child(4) { top: 7px; right: 0; transform: rotate(28deg); }
.doubao-paw:active { transform: translate(-50%, -50%) scale(0.92) rotate(-9deg); }
.doubao-paw:focus-visible { outline: 3px solid rgba(93, 134, 95, 0.52); outline-offset: 3px; }

.doubao-dialog {
  width: min(84%, 370px);
  max-height: min(78dvh, 650px);
  margin: auto;
  padding: 10px;
  overflow: visible;
  border: 1px solid rgba(92, 113, 82, 0.2);
  border-radius: 7px;
  background: #fffdf0;
  box-shadow: 0 22px 70px rgba(35, 66, 52, 0.28);
  color: #456153;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
}

.doubao-dialog[open] { animation: doubao-photo-arrive 720ms cubic-bezier(0.2, 0.8, 0.25, 1.08) forwards; }
.doubao-dialog::backdrop { background: rgba(41, 66, 54, 0.34); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.doubao-dialog figure { margin: 0; }

.doubao-dialog img {
  display: block;
  width: 100%;
  max-height: min(60dvh, 520px);
  border-radius: 4px;
  object-fit: cover;
  object-position: center;
}

.doubao-dialog figcaption {
  padding: 13px 8px 6px;
  font-family: var(--font-letter);
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
}

.doubao-dialog__close {
  position: absolute;
  z-index: 2;
  top: -16px;
  right: -16px;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0 0 2px;
  place-items: center;
  border: 1px solid rgba(86, 111, 83, 0.2);
  border-radius: 50%;
  background: #fffdf0;
  box-shadow: 0 5px 15px rgba(46, 69, 52, 0.16);
  color: #607a68;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 26px;
  line-height: 1;
}

.garden-navigation {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  left: 0;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 14px;
  width: min(82%, 340px);
  margin-inline: auto;
  pointer-events: none;
}

.garden-nav {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(68, 102, 78, 0.2);
  border-radius: 50%;
  background: rgba(255, 254, 235, 0.76);
  box-shadow: 0 6px 18px rgba(52, 84, 62, 0.12);
  cursor: pointer;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.garden-nav span {
  display: block;
  width: 11px;
  height: 11px;
  border-bottom: 2px solid #56765e;
  border-left: 2px solid #56765e;
  transform: rotate(45deg) translate(1px, -1px);
}

.garden-nav--next span { transform: rotate(225deg) translate(1px, -1px); }
.garden-nav:active:not(:disabled) { transform: scale(0.93); }
.garden-nav:disabled { cursor: default; opacity: 0.32; }
.garden-nav:focus-visible { outline: 3px solid rgba(88, 135, 93, 0.48); outline-offset: 3px; }

.garden-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 26px;
  border-radius: 20px;
  background: rgba(255, 254, 235, 0.46);
  box-shadow: 0 4px 15px rgba(56, 82, 62, 0.06);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.garden-progress i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(70, 111, 78, 0.3);
  transition: width 450ms ease, border-radius 450ms ease, background 450ms ease;
}

.garden-progress i.is-current { width: 24px; border-radius: 5px; background: #6f9b70; }
.garden-progress i.is-past { background: rgba(111, 155, 112, 0.64); }

.opening.is-in-garden .music-toggle,
.opening.is-in-garden .music-status { z-index: 31; }

.opening.is-in-garden .music-toggle {
  background: rgba(255, 254, 237, 0.78);
  color: #4f7659;
}

@keyframes garden-curtain {
  0% { opacity: 1; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes garden-pan-entrance {
  from { transform: translate3d(-35%, 0, 0) scale(1.045); }
  to { transform: translate3d(-38%, 0, 0) scale(1.035); }
}

@keyframes garden-pan-dress {
  from { transform: translate3d(-48.5%, 0, 0) scale(1.045); }
  to { transform: translate3d(-51.5%, 0, 0) scale(1.035); }
}

@keyframes garden-pan-flowers {
  from { transform: translate3d(-43.5%, 0, 0) scale(1.045); }
  to { transform: translate3d(-47%, 0, 0) scale(1.035); }
}

@keyframes garden-pan-lake {
  from { transform: translate3d(-46%, 0, 0) scale(1.045); }
  to { transform: translate3d(-50%, 0, 0) scale(1.035); }
}

@keyframes garden-copy-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes garden-light-breathe {
  from { opacity: 0.2; transform: rotate(-10deg) translateX(-2%); }
  to { opacity: 0.42; transform: rotate(-8deg) translateX(3%); }
}

@keyframes garden-minute-hand {
  from { transform: rotate(22deg); }
  to { transform: rotate(382deg); }
}

@keyframes flower-invitation {
  0%, 100% { transform: translateX(-50%) rotate(-7deg) scale(0.58); }
  50% { transform: translateX(-50%) rotate(3deg) scale(0.68); }
}

@keyframes garden-tap-cue {
  0% { box-shadow: 0 0 0 0 rgba(239, 155, 170, 0.34); transform: scale(0.92); }
  55%, 100% { box-shadow: 0 0 0 8px rgba(239, 155, 170, 0); transform: scale(1); }
}

@keyframes memory-flower-cue {
  0% { opacity: 0; transform: translateX(-50%) scale(0.72); }
  18% { opacity: 0.9; }
  72%, 100% { opacity: 0; transform: translateX(-50%) scale(1.22); }
}

@keyframes memory-note-change {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes paw-ripple {
  0%, 55% { box-shadow: 0 8px 20px rgba(50, 83, 66, 0.14), 0 0 0 0 rgba(255, 250, 218, 0.5); }
  100% { box-shadow: 0 8px 20px rgba(50, 83, 66, 0.14), 0 0 0 15px rgba(255, 250, 218, 0); }
}

@keyframes doubao-photo-arrive {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-height: 700px) {
  .garden-letter--entrance { bottom: 82px; max-height: 56svh; padding-block: 12px; }
  .garden-letter--entrance p { margin-bottom: 4px; font-size: 14px; line-height: 1.42; }
  .dress-copy { top: 58px; }
  .dress-copy p { font-size: 15px; line-height: 1.4; }
  .dress-display { top: 51%; height: 48svh; }
  .dress-choices { bottom: 78px; }
  .memory-garden__heading { top: 58px; }
  .memory-flower--one, .memory-flower--three { top: 47%; }
  .memory-flower--two { top: 51%; }
  .memory-flower--heart { top: 30%; }
  .memory-note { bottom: 80px; min-height: 72px; }
  .lake-copy { top: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .birthday-garden.is-arriving::after,
  .garden-scene.is-active .garden-panorama,
  .garden-scene.is-active .garden-sunlight,
  .garden-clock-mark__face b,
  .dress-choice-hint i,
  .memory-note.is-invitation i,
  button.memory-flower:not(.is-open)::before,
  .memory-flower:not(.is-open) .memory-flower__bloom,
  .garden-scene--lake.is-active .doubao-paw {
    animation: none;
  }

  .birthday-garden.is-arriving::after { opacity: 0; }
  .garden-scene--entrance.is-active .garden-panorama { transform: translate3d(-38%, 0, 0) scale(1.035); }
  .garden-scene--dress.is-active .garden-panorama { transform: translate3d(-51.5%, 0, 0) scale(1.035); }
  .garden-scene--flowers.is-active .garden-panorama { transform: translate3d(-47%, 0, 0) scale(1.035); }
  .garden-scene--lake.is-active .garden-panorama { transform: translate3d(-50%, 0, 0) scale(1.035); }
}

/* Final garden pages: paper, a held blessing, and the same place after dusk. */
.garden-scene--letter .garden-panorama,
.garden-scene--lucky .garden-panorama,
.garden-scene--night .garden-panorama { transform: translate3d(-50%, 0, 0) scale(1.035); }

.garden-scene--letter.is-active .garden-panorama { animation: garden-pan-letter 22s ease-out both; }
.garden-scene--lucky.is-active .garden-panorama,
.garden-scene--night.is-active .garden-panorama { animation: garden-pan-night 24s ease-out both; }

.lake-envelope {
  position: absolute;
  z-index: 6;
  top: 66%;
  left: 56%;
  display: grid;
  width: 112px;
  height: 78px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(12px) rotate(-4deg) scale(0.8);
  transition: opacity 850ms ease, transform 1000ms cubic-bezier(0.2, 0.8, 0.25, 1.16);
}

.lake-envelope.is-arrived {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0) rotate(-4deg) scale(1);
  animation: envelope-glow 3.8s 900ms ease-in-out infinite;
}

.lake-envelope:active { transform: translate(-50%, -50%) translateY(2px) rotate(-4deg) scale(0.95); }
.lake-envelope:focus-visible { outline: 3px solid rgba(88, 135, 93, 0.54); outline-offset: 4px; }

.lake-envelope__paper {
  position: absolute;
  inset: 8px 2px 5px;
  border: 1px solid rgba(162, 121, 74, 0.4);
  border-radius: 3px;
  background: #fff8d9;
  box-shadow: 0 10px 17px rgba(59, 76, 58, 0.19), inset 0 0 0 2px rgba(255, 255, 238, 0.58);
}

.lake-envelope__paper::before,
.lake-envelope__paper::after {
  position: absolute;
  top: 2px;
  width: 70%;
  height: 1px;
  background: rgba(169, 132, 88, 0.48);
  content: "";
}

.lake-envelope__paper::before { left: -1px; transform: rotate(29deg); transform-origin: left; }
.lake-envelope__paper::after { right: -1px; transform: rotate(-29deg); transform-origin: right; }

.lake-envelope__clover {
  position: absolute;
  z-index: 2;
  top: 29px;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translateX(-50%) rotate(7deg);
}

.lake-envelope__clover i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 9px;
  height: 9px;
  border-radius: 8px 8px 3px 8px;
  background: #73a25d;
  transform-origin: 8px 8px;
}

.lake-envelope__clover i:nth-child(1) { transform: rotate(0); }
.lake-envelope__clover i:nth-child(2) { transform: rotate(90deg); }
.lake-envelope__clover i:nth-child(3) { transform: rotate(180deg); }
.lake-envelope__clover i:nth-child(4) { transform: rotate(270deg); }

.lake-envelope__label {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 10px;
  left: 0;
  color: #7b614d;
  font-family: var(--font-letter);
  font-size: 13px;
  line-height: 1;
}

.garden-letter-card {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(86%, 390px);
  min-height: min(57svh, 490px);
  padding: 30px 22px 23px;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(164, 128, 87, 0.26);
  border-radius: 4px;
  background:
    linear-gradient(110deg, rgba(255, 255, 242, 0.76), rgba(255, 249, 218, 0.9)),
    repeating-linear-gradient(0deg, rgba(112, 81, 56, 0.035) 0 1px, transparent 1px 5px);
  box-shadow: 0 18px 48px rgba(50, 70, 52, 0.18), inset 0 0 0 3px rgba(255, 255, 242, 0.5);
  color: #506d58;
  opacity: 0;
  transform: translate(-50%, -46%) translateY(16px) rotate(-0.7deg) scale(0.96);
}

.garden-scene--letter.is-active .garden-letter-card {
  opacity: 1;
  transform: translate(-50%, -46%) translateY(0) rotate(-0.7deg) scale(1);
  transition: opacity 1000ms 260ms ease, transform 1200ms 260ms cubic-bezier(0.2, 0.8, 0.25, 1.08);
}

.garden-letter-card__stamp {
  display: grid;
  width: 35px;
  height: 35px;
  margin-bottom: 13px;
  place-items: center;
  border: 1px solid rgba(107, 145, 93, 0.3);
  border-radius: 50%;
  background: rgba(222, 239, 194, 0.62);
  color: #77a362;
  font-size: 20px;
}

.garden-letter-card .garden-kicker { margin: 0 0 6px; }

.garden-letter-card h3 {
  margin: 0;
  color: #426b51;
  font-family: var(--font-letter);
  font-size: clamp(24px, 3.45svh, 31px);
  font-weight: 400;
  line-height: 1.4;
}

.garden-letter-card__rule,
.night-ending-rule {
  display: block;
  width: 100px;
  height: 1px;
  margin: 16px auto 20px;
  background: linear-gradient(90deg, transparent, rgba(112, 151, 99, 0.54), transparent);
}

.voice-letter-player {
  display: grid;
  width: 100%;
  min-height: 74px;
  padding: 10px 13px;
  grid-template-columns: 48px 1fr 68px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(96, 134, 88, 0.18);
  border-radius: 7px;
  background: rgba(250, 255, 235, 0.64);
}

.voice-letter-play {
  display: grid;
  width: 45px;
  height: 45px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(92, 135, 83, 0.26);
  border-radius: 50%;
  background: rgba(255, 255, 236, 0.9);
  cursor: pointer;
}

.voice-letter-play:disabled { cursor: default; opacity: 0.38; }
.voice-letter-play:not(:disabled):active { transform: scale(0.94); }
.voice-letter-play:focus-visible { outline: 3px solid rgba(104, 146, 99, 0.5); outline-offset: 2px; }
.voice-letter-play span { width: 0; height: 0; margin-left: 3px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #68905f; }

.voice-letter-player__copy { display: grid; gap: 4px; min-width: 0; text-align: left; }
.voice-letter-player__copy strong { color: #4f7658; font-family: var(--font-letter); font-size: 16px; font-weight: 400; }
.voice-letter-player__copy span { overflow: hidden; color: rgba(70, 103, 76, 0.7); font-family: var(--font-body); font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }

.voice-letter-wave { display: flex; height: 30px; align-items: center; justify-content: center; gap: 3px; opacity: 0.44; }
.voice-letter-wave i { display: block; width: 2px; height: 12px; border-radius: 2px; background: #76a06c; }
.voice-letter-wave i:nth-child(2), .voice-letter-wave i:nth-child(4) { height: 20px; }
.voice-letter-wave i:nth-child(3) { height: 27px; }
.voice-letter-empty { margin: 18px 0 0; color: rgba(70, 102, 77, 0.72); font-family: var(--font-letter); font-size: 15px; line-height: 1.65; text-align: center; }

.garden-letter-next,
.lucky-sign-open,
.lucky-sign-next {
  min-height: 46px;
  margin-top: auto;
  padding: 9px 20px;
  border: 1px solid rgba(88, 130, 83, 0.25);
  border-radius: 24px;
  background: rgba(250, 255, 231, 0.85);
  box-shadow: 0 6px 16px rgba(69, 99, 62, 0.1);
  color: #52775a;
  cursor: pointer;
  font-family: var(--font-letter);
  font-size: 16px;
}

.garden-letter-next:active,
.lucky-sign-open:active,
.lucky-sign-next:active { transform: translateY(2px) scale(0.97); }
.garden-letter-next:focus-visible,
.lucky-sign-open:focus-visible,
.lucky-sign-next:focus-visible { outline: 3px solid rgba(103, 145, 97, 0.48); outline-offset: 3px; }

.garden-night-wash {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(145deg, rgba(39, 71, 103, 0.12), rgba(19, 51, 77, 0.24));
  pointer-events: none;
}

.lucky-draw {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: min(88%, 390px);
  height: min(80svh, 650px);
  color: #4b6954;
  opacity: 0;
  transform: translate(-50%, -47%) translateY(16px) scale(0.96);
}

.garden-scene--lucky.is-active .lucky-draw {
  opacity: 1;
  transform: translate(-50%, -47%) translateY(0) scale(1);
  transition: opacity 850ms 220ms ease, transform 1000ms 220ms cubic-bezier(0.2, 0.8, 0.25, 1.08);
}

.lucky-sleeve,
.lucky-sheet {
  position: absolute;
  left: 50%;
  width: 100%;
  border: 1px solid rgba(170, 133, 74, 0.42);
  border-radius: 6px;
  text-align: center;
}

.lucky-sleeve {
  z-index: 3;
  bottom: 17%;
  display: flex;
  min-height: 300px;
  padding: 31px 24px 23px;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, transparent 49.6%, rgba(171, 130, 70, 0.13) 50%, transparent 50.4%),
    linear-gradient(225deg, transparent 49.6%, rgba(171, 130, 70, 0.13) 50%, transparent 50.4%),
    linear-gradient(155deg, rgba(255, 250, 219, 0.98), rgba(238, 221, 166, 0.97));
  background-size: 100% 76%, 100% 76%, 100% 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  box-shadow: 0 22px 52px rgba(12, 39, 61, 0.32), inset 0 0 0 3px rgba(255, 255, 237, 0.38);
  transform: translateX(-50%) rotate(-0.8deg);
  transition: bottom 900ms cubic-bezier(0.2, 0.75, 0.25, 1), opacity 500ms ease, transform 900ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.lucky-sleeve::before {
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(146, 112, 65, 0.24);
  border-radius: 3px;
  content: "";
  pointer-events: none;
}

.lucky-sleeve .garden-kicker { margin: 0 0 8px; color: #788568; font-size: 13px; }
.lucky-sleeve h3 { margin: 0; color: #4b6d55; font-family: var(--font-letter); font-size: clamp(25px, 3.8svh, 31px); font-weight: 400; line-height: 1.4; }
.lucky-sleeve__number { margin-top: 19px; color: #916e42; font-family: Georgia, serif; font-size: 14px; letter-spacing: 0; }
.lucky-sleeve__note { margin: 9px 0 0; color: rgba(82, 103, 74, 0.76); font-family: var(--font-letter); font-size: 15px; }

.lucky-sleeve__clover,
.lucky-chosen--clover,
.night-final-seal {
  position: relative;
  width: 40px;
  height: 40px;
  transform: rotate(7deg);
}

.lucky-sleeve__clover { margin-top: 12px; }
.lucky-sleeve__clover i,
.lucky-chosen--clover i,
.night-final-seal i {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 17px;
  height: 17px;
  border-radius: 13px 13px 4px 13px;
  background: #6e9a59;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.28);
  transform-origin: 14px 14px;
}

.lucky-sleeve__clover i:nth-child(1), .lucky-chosen--clover i:nth-child(1), .night-final-seal i:nth-child(1) { transform: rotate(0); }
.lucky-sleeve__clover i:nth-child(2), .lucky-chosen--clover i:nth-child(2), .night-final-seal i:nth-child(2) { transform: rotate(90deg); }
.lucky-sleeve__clover i:nth-child(3), .lucky-chosen--clover i:nth-child(3), .night-final-seal i:nth-child(3) { transform: rotate(180deg); }
.lucky-sleeve__clover i:nth-child(4), .lucky-chosen--clover i:nth-child(4), .night-final-seal i:nth-child(4) { transform: rotate(270deg); }

.lucky-sleeve .lucky-sign-open { position: relative; z-index: 2; margin-top: auto; }

.lucky-sheet {
  z-index: 2;
  top: 0;
  display: flex;
  height: 100%;
  padding: 22px 21px 18px;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 253, 229, 0.94), rgba(249, 241, 201, 0.96)),
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(118, 143, 91, 0.05) 25px 26px);
  box-shadow: 0 18px 44px rgba(12, 39, 61, 0.28), inset 0 0 0 3px rgba(255, 255, 242, 0.46);
  clip-path: inset(100% 0 0);
  opacity: 0;
  transform: translateX(-50%) translateY(54%) scaleX(0.9);
  transform-origin: center bottom;
  transition: clip-path 1100ms cubic-bezier(0.16, 0.76, 0.26, 1), opacity 180ms 100ms ease, transform 1100ms cubic-bezier(0.16, 0.76, 0.26, 1);
}

.lucky-draw.is-open .lucky-sheet {
  clip-path: inset(0);
  opacity: 1;
  transform: translateX(-50%) translateY(0) scaleX(1);
}

.lucky-draw.is-open .lucky-sleeve {
  bottom: -3%;
  opacity: 0.3;
  pointer-events: none;
  transform: translateX(-50%) translateY(72%) rotate(1.2deg) scale(0.93);
}

.lucky-sheet > .garden-kicker { margin: 0 0 2px; color: #73876d; font-size: 12px; }
.lucky-sheet__grade { margin: 3px 0; color: #a36b4e; font-family: var(--font-letter); font-size: 17px; }
.lucky-sheet h3 { margin: 0; color: #41694e; font-family: var(--font-letter); font-size: clamp(25px, 3.7svh, 31px); font-weight: 400; line-height: 1.35; }
.lucky-sheet__rule { display: block; width: 104px; height: 1px; margin: 11px auto 8px; background: linear-gradient(90deg, transparent, rgba(111, 146, 94, 0.58), transparent); }
.lucky-sheet__copy { width: 100%; }
.lucky-sheet__copy p { margin: 6px 0; color: #536c59; font-family: var(--font-letter); font-size: clamp(14px, 2.05svh, 16px); line-height: 1.48; opacity: 0; transform: translateY(7px); }
.lucky-draw.is-open .lucky-sheet__copy p { animation: lucky-line-reveal 650ms ease forwards; }
.lucky-draw.is-open .lucky-sheet__copy p:nth-child(1) { animation-delay: 700ms; }
.lucky-draw.is-open .lucky-sheet__copy p:nth-child(2) { animation-delay: 930ms; }
.lucky-draw.is-open .lucky-sheet__copy p:nth-child(3) { animation-delay: 1160ms; }
.lucky-draw.is-open .lucky-sheet__copy p:nth-child(4) { animation-delay: 1390ms; }
.lucky-draw.is-open .lucky-sheet__copy p:nth-child(5) { animation-delay: 1620ms; }

.lucky-sheet__marks { position: relative; width: 100%; min-height: 35px; margin-top: auto; }
.lucky-paw { position: absolute; bottom: 0; left: 3px; width: 28px; height: 26px; opacity: 0.32; transform: rotate(-13deg); }
.lucky-paw i { position: absolute; width: 7px; height: 9px; border-radius: 50%; background: #a77d61; }
.lucky-paw::after { position: absolute; bottom: 0; left: 7px; width: 17px; height: 14px; border-radius: 50% 50% 45% 45%; background: #a77d61; content: ""; }
.lucky-paw i:nth-child(1) { top: 2px; left: 0; transform: rotate(-25deg); }
.lucky-paw i:nth-child(2) { top: -2px; left: 8px; transform: rotate(-8deg); }
.lucky-paw i:nth-child(3) { top: -1px; left: 17px; transform: rotate(10deg); }
.lucky-paw i:nth-child(4) { top: 4px; right: 0; transform: rotate(25deg); }

.lucky-chosen { position: absolute; right: 1px; bottom: 0; display: none; }
.lucky-draw[data-ornament="flower"] .lucky-chosen--flower,
.lucky-draw[data-ornament="ribbon"] .lucky-chosen--ribbon,
.lucky-draw[data-ornament="clover"] .lucky-chosen--clover { display: block; }
.lucky-chosen--flower { color: #d98d9a; font-size: 34px; line-height: 1; transform: rotate(8deg); }
.lucky-chosen--clover { width: 34px; height: 34px; transform: rotate(9deg) scale(0.84); }
.lucky-chosen--ribbon { width: 38px; height: 29px; }
.lucky-chosen--ribbon::before,
.lucky-chosen--ribbon::after { position: absolute; top: 5px; width: 19px; height: 19px; border: 2px solid #dda2ae; border-radius: 68% 42% 68% 42%; content: ""; }
.lucky-chosen--ribbon::before { left: 1px; transform: rotate(31deg); }
.lucky-chosen--ribbon::after { right: 1px; transform: rotate(59deg); }
.lucky-chosen--ribbon i { position: absolute; z-index: 1; top: 10px; left: 16px; width: 8px; height: 8px; border-radius: 50%; background: #d58e9f; }

.lucky-sheet .lucky-sign-next { min-height: 42px; margin-top: 5px; opacity: 0; transform: translateY(7px); }
.lucky-sheet .lucky-sign-next.is-arrived { opacity: 1; transform: translateY(0); transition: opacity 700ms 1750ms ease, transform 700ms 1750ms ease; }

.night-stars { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.night-stars i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff6bd; box-shadow: 0 0 9px 3px rgba(255, 237, 156, 0.55); opacity: 0; }
.night-stars i:nth-child(1) { top: 17%; left: 17%; }
.night-stars i:nth-child(2) { top: 23%; left: 71%; width: 3px; height: 3px; }
.night-stars i:nth-child(3) { top: 12%; left: 84%; width: 3px; height: 3px; }
.night-stars i:nth-child(4) { top: 30%; left: 45%; width: 3px; height: 3px; }
.night-stars i:nth-child(5) { top: 13%; left: 58%; width: 4px; height: 4px; }
.garden-scene--night.is-active .night-stars i { animation: night-star-twinkle 2.8s ease-in-out infinite; }
.garden-scene--night.is-active .night-stars i:nth-child(2) { animation-delay: 400ms; }
.garden-scene--night.is-active .night-stars i:nth-child(3) { animation-delay: 900ms; }
.garden-scene--night.is-active .night-stars i:nth-child(4) { animation-delay: 1400ms; }
.garden-scene--night.is-active .night-stars i:nth-child(5) { animation-delay: 1900ms; }

.night-shooting-star { position: absolute; z-index: 4; top: 21%; left: 78%; width: 3px; height: 3px; border-radius: 50%; background: #fff7c1; box-shadow: 0 0 13px 4px rgba(255, 239, 169, 0.76); opacity: 0; transform: translate(0, 0); }
.garden-scene--night.is-active .night-shooting-star { animation: night-shoot 5.8s 1900ms ease-out both; }

.night-scroll {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: #fff6d5;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  text-align: center;
  text-shadow: 0 2px 12px rgba(7, 28, 44, 0.48);
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.night-scroll::-webkit-scrollbar { display: none; }

.night-chapter {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100dvh;
  padding: max(82px, calc(env(safe-area-inset-top) + 70px)) 24px max(88px, calc(env(safe-area-inset-bottom) + 72px));
  place-items: center;
  scroll-snap-align: start;
}

.night-chapter::before {
  position: absolute;
  inset: 0;
  background: rgba(7, 34, 48, 0.1);
  content: "";
  pointer-events: none;
}

.night-chapter:nth-child(even)::before { background: rgba(7, 34, 48, 0.19); }

.night-chapter__copy,
.night-finale__before,
.night-finale__outcome {
  position: relative;
  width: min(100%, 390px);
  margin-inline: auto;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms ease, transform 1000ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.night-chapter.is-visible .night-chapter__copy,
.night-chapter.is-visible .night-finale__before,
.night-finale__outcome.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.night-chapter .garden-kicker {
  margin: 0 0 12px;
  color: rgba(255, 244, 196, 0.78);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

.night-chapter h3,
.night-chapter h4 {
  margin: 0 0 22px;
  color: #fff0aa;
  font-family: var(--font-letter);
  font-size: clamp(28px, 4svh, 36px);
  font-weight: 400;
  line-height: 1.42;
}

.night-chapter h4 { font-size: clamp(24px, 3.4svh, 31px); }
.night-chapter p { margin: 0 0 14px; font-family: var(--font-letter); font-size: clamp(17px, 2.25svh, 20px); line-height: 1.75; }
.night-chapter p:last-child { margin-bottom: 0; }

.night-chapter--opening::after {
  position: absolute;
  right: 14%;
  bottom: 25%;
  left: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 234, 151, 0.38), transparent);
  content: "";
}

.night-scroll-cue {
  position: absolute;
  bottom: max(39px, calc(env(safe-area-inset-bottom) + 27px));
  left: 50%;
  width: 28px;
  height: 44px;
  border: 1px solid rgba(255, 242, 187, 0.42);
  border-radius: 16px;
  transform: translateX(-50%);
}

.night-scroll-cue i {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff0aa;
  box-shadow: 0 0 10px rgba(255, 235, 148, 0.8);
  transform: translateX(-50%);
}

.garden-scene--night.is-active .night-scroll-cue i { animation: night-scroll-hint 2.1s ease-in-out infinite; }

.night-chapter--answer .night-chapter__copy {
  padding: 30px 19px 31px;
  border-top: 1px solid rgba(255, 236, 158, 0.34);
  border-bottom: 1px solid rgba(255, 236, 158, 0.34);
  background: rgba(10, 44, 55, 0.15);
}

.night-finale {
  overflow: hidden;
  background: rgba(5, 27, 42, 0.16);
}

.night-finale__before,
.night-finale__outcome {
  z-index: 2;
  grid-area: 1 / 1;
}

.night-finale__before {
  transition: opacity 650ms ease, transform 750ms ease;
}

.night-finale__outcome {
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(0.98);
}

.night-finale__outcome.is-visible,
.night-finale.is-lit .night-finale__outcome,
.night-finale.is-complete .night-finale__outcome,
.garden-scene--night.is-finished .night-finale__outcome {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: visibility 0s, opacity 1000ms 650ms ease, transform 1100ms 650ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.night-finale.is-lit .night-finale__before,
.night-finale.is-complete .night-finale__before,
.garden-scene--night.is-finished .night-finale__before {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-12px);
  transition: visibility 0s 650ms, opacity 650ms ease, transform 750ms ease;
}

.night-finale__trigger {
  min-height: 48px;
  margin-top: 18px;
  padding: 10px 23px;
  border: 1px solid rgba(255, 232, 145, 0.54);
  border-radius: 25px;
  background: rgba(255, 247, 200, 0.16);
  box-shadow: 0 8px 25px rgba(4, 23, 37, 0.22), inset 0 0 18px rgba(255, 239, 166, 0.08);
  color: #fff1b2;
  cursor: pointer;
  font-family: var(--font-letter);
  font-size: 17px;
  text-shadow: 0 1px 7px rgba(7, 31, 47, 0.58);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.night-finale__trigger:active { transform: translateY(2px) scale(0.97); }
.night-finale__trigger:focus-visible { outline: 3px solid rgba(255, 234, 153, 0.58); outline-offset: 3px; }
.night-finale__outcome h3 { margin-bottom: 13px; font-size: clamp(32px, 4.8svh, 42px); }
.night-finale__birthday { margin-top: 23px !important; color: #fff0aa; font-size: clamp(22px, 3.3svh, 29px) !important; }
.night-ending-rule { display: block; width: 120px; height: 1px; margin: 19px auto 15px; background: linear-gradient(90deg, transparent, rgba(255, 234, 144, 0.78), transparent); }
.night-signature { color: rgba(255, 247, 213, 0.9); }
.night-signature small { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; }

.night-closing-lights {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 9%;
  left: 0;
  height: 90px;
  pointer-events: none;
}

.night-closing-lights i {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 236, 153, 0.22);
  box-shadow: 0 0 0 rgba(255, 225, 115, 0);
  transition: background 500ms ease, box-shadow 850ms ease, transform 700ms ease;
}

.night-closing-lights i:nth-child(1) { left: 10%; }
.night-closing-lights i:nth-child(2) { bottom: 22px; left: 28%; }
.night-closing-lights i:nth-child(3) { bottom: 32px; left: 50%; }
.night-closing-lights i:nth-child(4) { bottom: 19px; left: 72%; }
.night-closing-lights i:nth-child(5) { right: 10%; }

.night-finale.is-lit .night-closing-lights i,
.night-finale.is-complete .night-closing-lights i,
.garden-scene--night.is-finished .night-closing-lights i {
  background: #ffe99a;
  box-shadow: 0 0 10px 3px rgba(255, 225, 115, 0.55), 0 0 25px 8px rgba(255, 225, 115, 0.18);
  transform: scale(1.25);
}

.night-finale:is(.is-lit, .is-complete) .night-closing-lights i:nth-child(2), .garden-scene--night.is-finished .night-closing-lights i:nth-child(2) { transition-delay: 130ms; }
.night-finale:is(.is-lit, .is-complete) .night-closing-lights i:nth-child(3), .garden-scene--night.is-finished .night-closing-lights i:nth-child(3) { transition-delay: 260ms; }
.night-finale:is(.is-lit, .is-complete) .night-closing-lights i:nth-child(4), .garden-scene--night.is-finished .night-closing-lights i:nth-child(4) { transition-delay: 390ms; }
.night-finale:is(.is-lit, .is-complete) .night-closing-lights i:nth-child(5), .garden-scene--night.is-finished .night-closing-lights i:nth-child(5) { transition-delay: 520ms; }

.night-final-seal {
  position: absolute;
  z-index: 1;
  top: 17%;
  left: 50%;
  width: 48px;
  height: 48px;
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(167, 226, 132, 0.42));
  transform: translateX(-50%) rotate(7deg) scale(0.38);
  transition: opacity 850ms 550ms ease, transform 1200ms 550ms cubic-bezier(0.2, 0.8, 0.25, 1.12);
}

.night-final-seal i { top: 7px; left: 7px; width: 20px; height: 20px; border-radius: 15px 15px 5px 15px; background: #82b866; transform-origin: 17px 17px; }
.night-finale.is-lit .night-final-seal,
.night-finale.is-complete .night-final-seal,
.garden-scene--night.is-finished .night-final-seal { opacity: 1; transform: translateX(-50%) rotate(7deg) scale(1); }

.birthday-garden.is-night-ending .garden-navigation,
.birthday-garden.is-night-scene .garden-navigation,
.birthday-garden:has(.garden-scene--night.is-active) .garden-navigation {
  right: auto;
  bottom: max(15px, calc(env(safe-area-inset-bottom) + 10px));
  left: max(14px, calc(env(safe-area-inset-left) + 10px));
  display: block;
  width: 44px;
  margin: 0;
}

.birthday-garden.is-night-ending .garden-progress,
.birthday-garden.is-night-ending .garden-nav--next,
.birthday-garden.is-night-scene .garden-progress,
.birthday-garden.is-night-scene .garden-nav--next,
.birthday-garden:has(.garden-scene--night.is-active) .garden-progress,
.birthday-garden:has(.garden-scene--night.is-active) .garden-nav--next { display: none; }

.birthday-garden.is-night-ending .garden-nav--previous,
.birthday-garden.is-night-scene .garden-nav--previous,
.birthday-garden:has(.garden-scene--night.is-active) .garden-nav--previous {
  width: 44px;
  height: 44px;
  border-color: rgba(255, 239, 171, 0.25);
  background: rgba(15, 48, 59, 0.52);
  box-shadow: 0 5px 18px rgba(4, 23, 35, 0.2);
}

.birthday-garden.is-night-ending .garden-nav--previous span,
.birthday-garden.is-night-scene .garden-nav--previous span,
.birthday-garden:has(.garden-scene--night.is-active) .garden-nav--previous span { border-color: #fff0ad; }

@keyframes garden-pan-letter { from { transform: translate3d(-48%, 0, 0) scale(1.045); } to { transform: translate3d(-52%, 0, 0) scale(1.035); } }
@keyframes garden-pan-night { from { transform: translate3d(-48%, 0, 0) scale(1.045); } to { transform: translate3d(-53%, 0, 0) scale(1.035); } }
@keyframes envelope-glow { 0%, 72%, 100% { filter: drop-shadow(0 0 0 rgba(255, 231, 150, 0)); } 84% { filter: drop-shadow(0 0 12px rgba(255, 231, 150, 0.76)); } }
@keyframes lucky-clover-settle { 0% { transform: rotate(7deg) scale(0.72); } 55% { transform: rotate(-7deg) scale(1.16); } 100% { transform: rotate(7deg) scale(1); } }
@keyframes lucky-line-reveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes night-star-twinkle { 0%, 100% { opacity: 0.22; transform: scale(0.72); } 50% { opacity: 0.9; transform: scale(1.15); } }
@keyframes night-shoot { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: 1; } 44% { opacity: 1; transform: translate(-38vw, 24vh); } 56%, 100% { opacity: 0; transform: translate(-48vw, 30vh); } }
@keyframes night-copy-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes night-scroll-hint { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 75%, 100% { opacity: 0; transform: translate(-50%, 17px); } }

@media (max-height: 700px) {
  .garden-letter-card { min-height: 61svh; padding-block: 22px 18px; }
  .garden-letter-card__rule { margin-block: 10px 13px; }
  .voice-letter-empty { margin-top: 12px; font-size: 14px; }
  .lucky-draw { height: min(84svh, 570px); }
  .lucky-sleeve { bottom: 13%; min-height: 270px; padding-block: 24px 18px; }
  .lucky-sleeve__number { margin-top: 11px; }
  .lucky-sleeve__clover { margin-top: 7px; transform: rotate(7deg) scale(0.85); }
  .lucky-sheet { padding-block: 15px 12px; }
  .lucky-sheet__rule { margin-block: 7px 4px; }
  .lucky-sheet__copy p { margin-block: 3px; font-size: 13px; line-height: 1.4; }
  .lucky-sheet__marks { min-height: 27px; }
  .lucky-sheet .lucky-sign-next { min-height: 38px; padding-block: 6px; }
  .night-chapter { padding-top: max(66px, calc(env(safe-area-inset-top) + 58px)); padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 60px)); }
  .night-chapter .garden-kicker { margin-bottom: 8px; font-size: 12px; }
  .night-chapter h3, .night-chapter h4 { margin-bottom: 15px; }
  .night-chapter p { margin-bottom: 9px; font-size: 16px; line-height: 1.55; }
}

@media (prefers-reduced-motion: reduce) {
  .lake-envelope.is-arrived,
  .garden-scene--letter.is-active .garden-panorama,
  .garden-scene--lucky.is-active .garden-panorama,
  .garden-scene--night.is-active .garden-panorama,
  .garden-scene--night.is-active .night-stars i,
  .garden-scene--night.is-active .night-shooting-star,
  .garden-scene--night.is-active .night-scroll-cue i,
  .lucky-draw.is-open .lucky-sheet__copy p { animation: none; }
  .garden-scene--letter.is-active .garden-panorama { transform: translate3d(-52%, 0, 0) scale(1.035); }
  .garden-scene--lucky.is-active .garden-panorama,
  .garden-scene--night.is-active .garden-panorama { transform: translate3d(-53%, 0, 0) scale(1.035); }
  .garden-scene--night.is-active .night-stars i { opacity: 0.56; }
  .lucky-draw,
  .lucky-sheet,
  .lucky-sleeve,
  .lucky-sheet .lucky-sign-next,
  .night-chapter__copy,
  .night-finale__before,
  .night-finale__outcome,
  .night-closing-lights i,
  .night-final-seal { transition-duration: 1ms; transition-delay: 0ms; }
  .lucky-draw.is-open .lucky-sheet { clip-path: inset(0); opacity: 1; transform: translateX(-50%) translateY(0) scaleX(1); }
  .lucky-draw.is-open .lucky-sleeve { bottom: -3%; opacity: 0.3; transform: translateX(-50%) translateY(72%) rotate(1.2deg) scale(0.93); }
  .lucky-draw.is-open .lucky-sheet__copy p { opacity: 1; transform: none; }
  .night-chapter.is-visible .night-chapter__copy,
  .night-chapter.is-visible .night-finale__before,
  .night-finale__outcome.is-visible { opacity: 1; transform: none; }
  .night-scroll { scroll-behavior: auto; }
}