:root {
  color-scheme: dark;
  --ink: #f1f0e8;
  --ink-soft: rgba(241, 240, 232, 0.72);
  --ink-faint: rgba(241, 240, 232, 0.48);
  --night: #111b18;
  --moss: #829684;
  --moss-bright: #aebea9;
  --gold: #ccb98f;
  --glass: rgba(18, 29, 25, 0.62);
  --glass-strong: rgba(12, 21, 18, 0.82);
  --line: rgba(241, 240, 232, 0.15);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.3);
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --scene-saturation: 0.7;
  --scene-contrast: 0.95;
  --scene-brightness: 0.84;
  --veil-left: 0.62;
  --veil-middle: 0.22;
  --veil-right: 0.42;
  --veil-top: 0.18;
  --veil-center: 0.04;
  --veil-bottom: 0.62;
  --breath-low: 0.32;
  --breath-high: 0.66;
}

html[data-light="day"] {
  --scene-saturation: 0.82;
  --scene-contrast: 0.96;
  --scene-brightness: 0.98;
  --veil-left: 0.43;
  --veil-middle: 0.08;
  --veil-right: 0.25;
  --veil-top: 0.08;
  --veil-center: 0;
  --veil-bottom: 0.38;
  --breath-low: 0.22;
  --breath-high: 0.46;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--night);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--sans);
  text-rendering: optimizeLegibility;
}

button,
textarea,
input {
  font: inherit;
}

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

button:focus-visible,
a:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 2px solid rgba(215, 206, 173, 0.9);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.ambient-scene {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: #13201c;
}

.ambient-image,
.ambient-veil,
.ambient-breath {
  position: absolute;
  inset: -3%;
}

.ambient-image {
  background: url("./assets/yinyuan-dusk-garden.png") center center / cover no-repeat;
  filter:
    saturate(var(--scene-saturation))
    contrast(var(--scene-contrast))
    brightness(var(--scene-brightness));
  transform: scale(1.04);
  transition: filter 1200ms ease;
  animation: landscape-breathe 28s ease-in-out infinite alternate;
}

/* “写下此刻”保留现有界面，只按全局日夜状态更换同一地点的背景。 */
body[data-view="record"] .ambient-image {
  background-image: url("./assets/writing-moment-night-v1.png");
  background-position: center center;
}

html[data-light="night"] body[data-view="record"] .ambient-image {
  filter: saturate(0.76) contrast(0.92) brightness(1.02);
}

html[data-light="day"] body[data-view="record"] .ambient-image {
  background-image: url("./assets/writing-moment-day-v1.png");
}

.ambient-veil {
  background:
    linear-gradient(90deg, rgba(7, 14, 12, var(--veil-left)) 0%, rgba(8, 15, 13, var(--veil-middle)) 52%, rgba(7, 13, 12, var(--veil-right)) 100%),
    linear-gradient(180deg, rgba(8, 14, 13, var(--veil-top)) 0%, rgba(8, 14, 13, var(--veil-center)) 46%, rgba(8, 14, 13, var(--veil-bottom)) 100%);
}

.ambient-breath {
  opacity: var(--breath-high);
  background: radial-gradient(circle at 63% 49%, rgba(223, 198, 144, 0.13), transparent 30%);
  transition: opacity 1200ms ease;
  animation: light-breathe 12s ease-in-out infinite alternate;
}

.seed {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(238, 235, 220, 0.52);
  box-shadow: 0 0 8px rgba(238, 235, 220, 0.15);
  opacity: 0;
}

.seed::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 1px;
  right: 1px;
  top: 2px;
  background: linear-gradient(90deg, transparent, rgba(238, 235, 220, 0.35));
  transform: rotate(-18deg);
  transform-origin: right center;
}

.seed-one { left: 20%; top: 70%; animation: seed-drift 22s linear 3s infinite; }
.seed-two { left: 58%; top: 76%; animation: seed-drift 26s linear 11s infinite; }
.seed-three { left: 73%; top: 68%; animation: seed-drift 24s linear 18s infinite; }

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px clamp(24px, 5vw, 76px);
  pointer-events: none;
  transition: opacity 620ms ease;
}

.site-header > * {
  pointer-events: auto;
}

.text-button {
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  cursor: pointer;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(241, 240, 232, 0.42);
  border-radius: 50%;
  color: rgba(241, 240, 232, 0.86);
  font-family: var(--serif);
  font-size: 15px;
}

.brand-name {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.24em;
}

.quiet-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.light-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 13px;
  transition: color 180ms ease;
}

.light-toggle:hover {
  color: var(--ink);
}

.light-toggle-dot {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(241, 240, 232, 0.58);
  border-radius: 50%;
  background: rgba(241, 240, 232, 0.12);
  box-shadow: 0 0 0 rgba(204, 185, 143, 0);
  transition: background 700ms ease, box-shadow 700ms ease;
}

html[data-light="day"] .light-toggle-dot {
  background: rgba(204, 185, 143, 0.78);
  box-shadow: 0 0 12px rgba(204, 185, 143, 0.34);
}

.nav-link,
.subtle-link,
.exit-link,
.deep-link {
  color: var(--ink-soft);
  font-size: 13px;
  text-decoration: none;
  transition: color 180ms ease;
}

.nav-link:hover,
.subtle-link:hover,
.exit-link:hover,
.deep-link:hover {
  color: var(--ink);
}

#app {
  min-height: 100vh;
}

.view {
  position: relative;
  min-height: 100vh;
  padding: 120px clamp(24px, 7vw, 110px) 64px;
  animation: view-arrive 620ms cubic-bezier(0.22, 0.75, 0.2, 1) both;
}

.entry-view {
  display: flex;
  align-items: center;
}

.entry-copy {
  width: min(650px, 100%);
  padding-left: clamp(0px, 3vw, 46px);
  transition: opacity 760ms ease, transform 1200ms cubic-bezier(0.22, 0.75, 0.2, 1);
}

.entry-copy h1 {
  max-width: none;
  font-size: clamp(40px, 4.6vw, 64px);
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.entry-copy > .eyebrow {
  transform: translateY(-18px);
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 400;
}

h1 {
  margin-bottom: 24px;
  font-size: clamp(52px, 6.2vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.18;
}

.lead {
  margin-bottom: 44px;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.9;
}

.primary-actions,
.panel-actions,
.garden-actions,
.research-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.primary-actions.centered {
  justify-content: center;
}

.button {
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.button-primary {
  min-width: 154px;
  color: #17201d;
  background: rgba(233, 231, 216, 0.92);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}

.button-primary:hover {
  background: #f5f3ea;
}

.button-primary .button-note {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  opacity: 0.62;
}

.button-quiet {
  color: var(--ink);
  border-color: rgba(241, 240, 232, 0.28);
  background: rgba(19, 31, 27, 0.36);
  backdrop-filter: blur(12px);
}

.button-quiet:hover,
.button-ghost:hover {
  border-color: rgba(241, 240, 232, 0.5);
  background: rgba(241, 240, 232, 0.08);
}

.button-ghost {
  color: var(--ink-soft);
  border-color: rgba(241, 240, 232, 0.13);
  background: transparent;
}

.privacy-note {
  margin: 22px 0 0 4px;
  color: var(--ink-faint);
  font-size: 11px;
}

.entry-footnote {
  position: absolute;
  right: clamp(24px, 7vw, 110px);
  bottom: 54px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.12em;
  transition: opacity 620ms ease;
}

.entry-footnote p {
  margin: 0;
}

.entry-footnote .line {
  width: 62px;
  height: 1px;
  background: var(--line);
}

.entry-view.is-entering .entry-copy {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
}

.entry-view.is-entering .entry-footnote,
body.is-entering .site-header {
  opacity: 0;
}

body.is-entering .ambient-image {
  animation: none;
  transform: scale(1.085) translate3d(-1.1%, -0.35%, 0);
  transition: transform 1500ms cubic-bezier(0.22, 0.75, 0.2, 1), filter 1200ms ease;
}

.hover-view {
  display: grid;
  place-items: center;
  text-align: center;
}

.hover-center {
  position: relative;
  width: min(780px, 100%);
  margin-top: -1vh;
}

.water-clock {
  position: absolute;
  left: 50%;
  top: 0;
  width: 154px;
  height: 154px;
  transform: translateX(-50%);
  border-radius: 50%;
  transition: transform 900ms cubic-bezier(0.22, 0.75, 0.2, 1), opacity 700ms ease;
  isolation: isolate;
}

.water-surface {
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(223, 230, 220, 0.16);
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 40%, rgba(229, 222, 194, 0.1), transparent 24%),
    radial-gradient(circle at center, rgba(118, 139, 130, 0.12), rgba(19, 32, 29, 0.08) 64%, transparent 70%);
  box-shadow:
    inset 0 0 30px rgba(218, 226, 216, 0.04),
    0 0 42px rgba(14, 25, 22, 0.16);
  animation: water-breathe 8s ease-in-out infinite;
}

.water-clock::before,
.water-clock::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(222, 228, 218, 0.09);
  border-radius: 50%;
  pointer-events: none;
}

.water-clock::before {
  inset: 10px;
  animation: water-pulse 10s ease-out infinite;
}

.water-clock::after {
  inset: 0;
  animation: water-pulse 10s 5s ease-out infinite;
}

.water-ripple {
  position: absolute;
  inset: 50%;
  width: 86px;
  height: 86px;
  margin: -43px;
  border: 1px solid rgba(226, 232, 223, 0.16);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 1.8s ease, transform 2.4s cubic-bezier(0.22, 0.75, 0.2, 1);
  pointer-events: none;
}

.water-ripple--two { width: 108px; height: 108px; margin: -54px; }
.water-ripple--three { width: 132px; height: 132px; margin: -66px; }
.water-ripple--four { width: 154px; height: 154px; margin: -77px; }

.water-ripple.is-earned {
  opacity: 0.2;
  transform: scale(1);
}

.water-glint {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(235, 225, 191, 0.68);
  box-shadow: 0 0 22px rgba(235, 225, 191, 0.34);
  transform: translate(calc(-50% + var(--glint-x, 0px)), calc(-50% + var(--glint-y, 0px)));
  transition: transform 1.4s cubic-bezier(0.22, 0.75, 0.2, 1), box-shadow 1.2s ease;
  pointer-events: none;
  z-index: 3;
}

.water-clock:hover .water-glint,
.water-clock.has-sound .water-glint {
  box-shadow: 0 0 32px rgba(235, 225, 191, 0.52);
}

.hover-clock {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 4;
  color: rgba(241, 240, 232, 0.72);
  font-family: var(--serif);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  transform: translate(-50%, -50%);
}

.hover-intro {
  padding-top: 184px;
  transition: opacity 650ms ease, transform 900ms cubic-bezier(0.22, 0.75, 0.2, 1);
}

.hover-intro .eyebrow {
  margin-bottom: 12px;
}

.hover-intro h2 {
  margin-bottom: 16px;
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1.12;
}

.hover-invitation {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.8;
}

.sound-invitation,
.finish-hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 1.6s ease, color 500ms ease, transform 1.6s ease;
}

.sound-invitation.is-visible,
.finish-hover.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.sound-invitation {
  gap: 9px;
  margin-top: 24px;
  color: rgba(241, 240, 232, 0.56);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.sound-invitation:hover,
.sound-invitation[aria-pressed="true"] {
  color: rgba(241, 240, 232, 0.84);
}

.sound-mark {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 12px;
}

.sound-mark i {
  display: block;
  width: 1px;
  height: 4px;
  background: currentColor;
  animation: sound-still 2.8s ease-in-out infinite;
}

.sound-mark i:nth-child(2) { height: 8px; animation-delay: -0.9s; }
.sound-mark i:nth-child(3) { height: 5px; animation-delay: -1.8s; }

.sound-invitation[aria-pressed="true"] .sound-mark i {
  animation-name: sound-breathe;
  animation-duration: 1.8s;
}

.finish-hover {
  margin: 20px auto 0;
  color: rgba(241, 240, 232, 0.3);
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.finish-hover:hover,
.finish-hover:focus-visible {
  color: rgba(241, 240, 232, 0.68);
}

.hover-reflection {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 172px;
  animation: reflection-arrive 1s cubic-bezier(0.22, 0.75, 0.2, 1) both;
}

.hover-reflection .eyebrow {
  margin-bottom: 12px;
}

.hover-reflection h2 {
  margin-bottom: 16px;
  font-size: clamp(34px, 3.4vw, 48px);
}

.reflection-copy {
  margin: 0 auto;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.95;
}

.reflection-copy strong {
  color: rgba(241, 240, 232, 0.88);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.reflection-choice {
  width: min(650px, 100%);
  margin: 30px auto 0;
  padding: 0;
  border: 0;
}

.reflection-choice legend {
  width: 100%;
  margin-bottom: 15px;
  color: rgba(241, 240, 232, 0.74);
  font-family: var(--serif);
  font-size: 14px;
}

.reflection-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.reflection-options label {
  cursor: pointer;
}

.reflection-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.reflection-options span {
  display: grid;
  min-height: 43px;
  place-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(241, 240, 232, 0.12);
  border-radius: 999px;
  color: rgba(241, 240, 232, 0.58);
  font-family: var(--serif);
  font-size: 12px;
  transition: border-color 300ms ease, background 300ms ease, color 300ms ease;
}

.reflection-options label:hover span {
  border-color: rgba(241, 240, 232, 0.28);
  color: rgba(241, 240, 232, 0.8);
}

.reflection-options input:focus-visible + span {
  outline: 2px solid rgba(235, 223, 185, 0.62);
  outline-offset: 3px;
}

.reflection-options input:checked + span {
  border-color: rgba(235, 223, 185, 0.38);
  color: rgba(249, 247, 237, 0.92);
  background: rgba(235, 223, 185, 0.08);
}

.reflection-choice > p {
  margin: 10px 0 0;
  color: rgba(241, 240, 232, 0.28);
  font-size: 10px;
}

.hover-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hover-view.is-reflecting .water-clock {
  transform: translateX(-50%) translateY(-12px) scale(0.86);
}

.hover-view.is-reflecting .exit-link {
  opacity: 0;
  pointer-events: none;
}

.exit-link {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
}

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

.record-view {
  display: flex;
  align-items: center;
}

.record-space {
  width: min(720px, 100%);
  padding-left: clamp(0px, 3vw, 46px);
  transition: opacity 760ms ease, transform 900ms cubic-bezier(0.22, 0.75, 0.2, 1);
}

.record-heading {
  max-width: 660px;
}

.record-heading h2 {
  max-width: 640px;
  margin-bottom: 20px;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.28;
  letter-spacing: -0.025em;
}

.record-invitation {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.9;
  transition: opacity 900ms ease;
}

.record-view.has-writing .record-invitation {
  opacity: 0.38;
}

.writing-field {
  position: relative;
  display: block;
  width: min(660px, 100%);
  margin-top: clamp(38px, 5vh, 64px);
}

.writing-field textarea {
  display: block;
  width: 100%;
  min-height: 56px;
  max-height: 42vh;
  padding: 0 0 15px;
  overflow-y: auto;
  resize: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.9;
  caret-color: var(--gold);
}

.writing-field textarea::placeholder {
  color: rgba(241, 240, 232, 0.34);
}

.writing-line {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(241, 240, 232, 0.32), rgba(241, 240, 232, 0.04));
  transform: scaleX(0.34);
  transform-origin: left;
  transition: transform 700ms ease, background 700ms ease;
}

.writing-field:focus-within .writing-line,
.record-view.has-writing .writing-line {
  background: linear-gradient(90deg, rgba(204, 185, 143, 0.72), rgba(241, 240, 232, 0.08));
  transform: scaleX(1);
}

.record-status-row {
  display: flex;
  min-height: 28px;
  width: min(660px, 100%);
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-top: 9px;
  color: var(--ink-faint);
  font-size: 10px;
}

.record-status-row p {
  margin: 0;
}

.draft-status {
  opacity: 0;
  transition: opacity 500ms ease;
}

.draft-status.is-visible {
  opacity: 1;
}

.record-actions {
  margin-top: 20px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 700ms ease, transform 700ms ease;
}

.record-actions.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.record-hover-link {
  margin-top: 24px;
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: color 180ms ease;
}

.record-hover-link:hover {
  color: var(--ink-soft);
}

.record-view.is-releasing .record-space {
  opacity: 0;
  transform: translate3d(20px, -14px, 0) scale(0.985);
}

body[data-view="record"] .quiet-nav,
body[data-view="arrival"] .quiet-nav {
  opacity: 0.5;
  transition: opacity 400ms ease;
}

.panel {
  width: min(970px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 58px);
  border: 1px solid rgba(241, 240, 232, 0.14);
  border-radius: 28px;
  background: var(--glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(26px) saturate(0.8);
}

.panel-heading {
  max-width: 680px;
  margin-bottom: 34px;
}

.panel-heading h2 {
  font-size: clamp(32px, 4vw, 48px);
}

.panel-heading > p:last-child,
.garden-heading > p:last-child,
.arrival-card > p {
  color: var(--ink-soft);
  line-height: 1.8;
}

.expression-groups {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 42px;
}

.expression-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.expression-group legend,
.feedback-question legend {
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
}

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

.choice-card,
.word-chip {
  border: 1px solid rgba(241, 240, 232, 0.13);
  color: var(--ink);
  background: rgba(238, 240, 229, 0.035);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.choice-card:hover,
.word-chip:hover,
.choice-card.is-selected,
.word-chip.is-selected {
  border-color: rgba(210, 202, 170, 0.62);
  background: rgba(210, 202, 170, 0.1);
}

.choice-card:active,
.word-chip:active {
  transform: scale(0.985);
}

.choice-card {
  display: flex;
  min-height: 88px;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  text-align: left;
}

.choice-symbol {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(241, 240, 232, 0.16);
  border-radius: 50%;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 18px;
}

.choice-card strong,
.choice-card small {
  display: block;
}

.choice-card strong {
  margin-bottom: 5px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
}

.choice-card small {
  color: var(--ink-faint);
  font-size: 11px;
}

.choice-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.word-chip {
  min-height: 50px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
}

.note-field {
  position: relative;
  display: block;
  margin-top: 32px;
}

.note-field > span {
  display: block;
  margin-bottom: 10px;
  color: var(--ink-soft);
  font-size: 12px;
}

.note-field textarea {
  display: block;
  width: 100%;
  resize: vertical;
  border: 0;
  border-bottom: 1px solid rgba(241, 240, 232, 0.2);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  line-height: 1.75;
}

.note-field textarea::placeholder {
  color: rgba(241, 240, 232, 0.3);
}

.note-field small {
  position: absolute;
  right: 0;
  bottom: -20px;
  color: var(--ink-faint);
  font-size: 10px;
}

.panel-actions {
  margin-top: 38px;
}

.arrival-view {
  display: flex;
  align-items: center;
}

.arrival-copy-block {
  width: min(680px, 100%);
  padding-left: clamp(0px, 3vw, 46px);
  opacity: 0;
  transform: translateY(8px);
  animation: arrival-copy-reveal 1100ms ease 1500ms forwards;
}

.arrival-copy-block h2 {
  max-width: 620px;
  margin-bottom: 18px;
  font-size: clamp(36px, 4.2vw, 58px);
}

.arrival-copy-block > p:not(.eyebrow) {
  max-width: 560px;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.9;
}

.arrival-saved {
  margin: 20px 0 0;
  color: var(--ink-faint) !important;
  font-size: 13px !important;
}

.arrival-actions {
  margin-top: 34px;
  opacity: 0;
  transform: translateY(8px);
  animation: arrival-copy-reveal 900ms ease 2200ms forwards;
}

.landing-seed {
  position: absolute;
  z-index: 2;
  left: 31%;
  top: 77%;
  width: 32px;
  height: 46px;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(238, 235, 220, 0.18));
  transform-origin: center;
  animation: seed-land 2800ms cubic-bezier(0.24, 0.68, 0.22, 1) forwards;
}

.landing-seed-crown {
  position: absolute;
  left: 2px;
  top: 0;
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from -8deg,
    rgba(241, 240, 232, 0.74) 0deg 1deg,
    transparent 1deg 18deg
  );
}

.landing-seed-crown::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(238, 235, 220, 0.7);
}

.landing-seed-stem {
  position: absolute;
  left: 15px;
  top: 24px;
  width: 1px;
  height: 18px;
  background: rgba(241, 240, 232, 0.68);
  transform: rotate(-13deg);
  transform-origin: top;
}

.landing-seed-stem::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -2px;
  width: 4px;
  height: 7px;
  border-radius: 60% 40% 55% 45%;
  background: rgba(166, 146, 103, 0.86);
  transform: rotate(13deg);
}

.arrival-view.is-empty .landing-seed {
  display: none;
}

.arrival-view.is-empty .arrival-copy-block,
.arrival-view.is-empty .arrival-actions {
  animation-delay: 120ms;
}

.deep-link {
  display: inline-block;
  margin-top: 30px;
  border-bottom: 1px solid rgba(241, 240, 232, 0.18);
  line-height: 2;
}

.garden-view {
  width: min(1100px, 100%);
  margin: 0 auto;
}

.garden-heading {
  max-width: 720px;
  margin-bottom: 48px;
}

.garden-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.trace-card,
.empty-garden {
  min-height: 205px;
  padding: 24px;
  border: 1px solid rgba(241, 240, 232, 0.12);
  border-radius: 20px;
  background: rgba(14, 25, 21, 0.52);
  backdrop-filter: blur(18px);
}

.trace-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.trace-card--water {
  grid-column: span 2;
  min-height: 260px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 58%, rgba(147, 167, 155, 0.12), transparent 28%),
    rgba(14, 25, 21, 0.52);
}

.trace-card--water::after {
  content: "";
  position: absolute;
  left: -70px;
  bottom: -120px;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(225, 230, 222, 0.055);
  border-radius: 50%;
  pointer-events: none;
}

.water-trace-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  margin-top: 22px;
}

.water-trace-mark {
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(226, 232, 223, 0.15);
  border-radius: 50%;
}

.water-trace-mark::before,
.water-trace-mark::after,
.water-trace-mark i {
  content: "";
  position: absolute;
  inset: 50%;
  border: 1px solid rgba(226, 232, 223, 0.11);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.water-trace-mark::before { width: 68px; height: 68px; }
.water-trace-mark::after { width: 40px; height: 40px; }
.water-trace-mark i:nth-child(1) { width: 8px; height: 8px; border: 0; background: rgba(235, 225, 191, 0.5); }
.water-trace-mark i:nth-child(2) { width: 116px; height: 116px; opacity: 0.48; }
.water-trace-mark i:nth-child(3) { width: 136px; height: 136px; opacity: 0.22; }

.water-trace-reflection {
  display: inline-flex;
  width: fit-content;
  margin: 15px 0 0;
  padding: 6px 11px;
  border: 1px solid rgba(235, 223, 185, 0.18);
  border-radius: 999px;
  color: rgba(235, 223, 185, 0.72);
  font-family: var(--serif);
  font-size: 11px;
}

.water-trace-sound {
  margin: 12px 0 0;
  color: rgba(241, 240, 232, 0.34);
  font-family: var(--serif);
  font-size: 11px;
}

.trace-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-faint);
  font-size: 10px;
}

.trace-expression {
  margin: 24px 0 14px;
  font-family: var(--serif);
  font-size: 24px;
}

.trace-note {
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.delete-trace {
  align-self: flex-end;
  margin-top: 18px;
  color: var(--ink-faint);
  font-size: 11px;
}

.delete-trace:hover {
  color: #e0a69b;
}

.empty-garden {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 260px;
  color: var(--ink-soft);
  font-family: var(--serif);
  text-align: center;
  line-height: 2;
}

.garden-actions {
  margin-top: 34px;
}

.feedback-panel {
  width: min(760px, 100%);
}

.feedback-question {
  margin: 0;
  padding: 0;
  border: 0;
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.radio-row label {
  cursor: pointer;
}

.radio-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-row span {
  display: block;
  padding: 11px 19px;
  border: 1px solid rgba(241, 240, 232, 0.14);
  border-radius: 999px;
  color: var(--ink-soft);
  transition: 180ms ease;
}

.radio-row input:checked + span {
  border-color: rgba(210, 202, 170, 0.68);
  color: var(--ink);
  background: rgba(210, 202, 170, 0.12);
}

.research-panel {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  width: min(430px, 100%);
  height: 100vh;
  padding: 28px;
  overflow-y: auto;
  border-left: 1px solid rgba(241, 240, 232, 0.15);
  background: rgba(8, 16, 13, 0.96);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(25px);
}

.research-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.research-heading h2 {
  font-size: 26px;
}

.icon-button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
}

.research-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0;
}

.stat-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(241, 240, 232, 0.035);
}

.stat-card strong,
.stat-card span {
  display: block;
}

.stat-card strong {
  margin-bottom: 6px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
}

.stat-card span {
  color: var(--ink-faint);
  font-size: 10px;
}

.research-note {
  margin-top: 26px;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.7;
}

.research-note code {
  color: var(--ink-soft);
}

.danger-link {
  color: #d49f95;
  font-size: 12px;
}

.research-trigger {
  position: fixed;
  z-index: 25;
  right: 28px;
  bottom: 24px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-faint);
  background: rgba(8, 16, 13, 0.7);
  font-size: 11px;
  backdrop-filter: blur(12px);
}

.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 28px;
  max-width: calc(100vw - 40px);
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(9, 17, 14, 0.9);
  box-shadow: var(--shadow);
  font-size: 12px;
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}

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

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

@keyframes seed-land {
  0% {
    opacity: 0;
    transform: translate3d(-12vw, -43vh, 0) rotate(-28deg) scale(0.72);
  }
  16% { opacity: 0.92; }
  58% {
    opacity: 0.88;
    transform: translate3d(5vw, -16vh, 0) rotate(18deg) scale(0.94);
  }
  82% {
    opacity: 0.9;
    transform: translate3d(-1.2vw, -3vh, 0) rotate(-6deg) scale(1);
  }
  100% {
    opacity: 0.9;
    transform: translate3d(0, 0, 0) rotate(3deg) scale(1);
  }
}

@keyframes landscape-breathe {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.075) translate3d(-0.5%, -0.25%, 0); }
}

@keyframes light-breathe {
  from { opacity: var(--breath-low); transform: scale(0.96); }
  to { opacity: var(--breath-high); transform: scale(1.05); }
}

@keyframes orbit-breathe {
  0%, 100% { transform: scale(0.9); opacity: 0.58; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes water-breathe {
  0%, 100% { transform: scale(0.97); opacity: 0.72; }
  50% { transform: scale(1.025); opacity: 1; }
}

@keyframes water-pulse {
  0% { opacity: 0; transform: scale(0.72); }
  22% { opacity: 0.12; }
  78% { opacity: 0.05; }
  100% { opacity: 0; transform: scale(1.03); }
}

@keyframes sound-still {
  0%, 100% { transform: scaleY(0.72); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 0.8; }
}

@keyframes sound-breathe {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1.35); }
}

@keyframes reflection-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes seed-drift {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
  10% { opacity: 0.5; }
  70% { opacity: 0.3; }
  100% { opacity: 0; transform: translate3d(38vw, -42vh, 0) rotate(190deg); }
}

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

@media (max-width: 850px) {
  .expression-groups {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .garden-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trace-card--water {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .site-header {
    padding: 20px;
  }

  .brand-name {
    display: none;
  }

  .quiet-nav {
    gap: 18px;
  }

  .view {
    padding: 100px 20px 48px;
  }

  .entry-view {
    align-items: flex-end;
    padding-bottom: 100px;
  }

  .entry-copy h1 {
    font-size: 40px;
  }

  .entry-copy .lead {
    margin-bottom: 32px;
    font-size: 17px;
  }

  .hover-center {
    margin-top: 3vh;
  }

  .water-clock {
    width: 132px;
    height: 132px;
  }

  .water-surface {
    inset: 18px;
  }

  .water-ripple--four {
    width: 132px;
    height: 132px;
    margin: -66px;
  }

  .hover-intro {
    padding-top: 154px;
  }

  .hover-intro h2 {
    font-size: 36px;
  }

  .hover-invitation {
    font-size: 15px;
  }

  .hover-reflection {
    padding-top: 142px;
  }

  .hover-reflection h2 {
    font-size: 31px;
  }

  .reflection-copy br {
    display: none;
  }

  .reflection-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .record-view,
  .arrival-view {
    align-items: flex-end;
    padding-bottom: 92px;
  }

  .record-heading h2 {
    font-size: 34px;
  }

  .record-invitation {
    font-size: 16px;
  }

  .writing-field {
    margin-top: 30px;
  }

  .writing-field textarea {
    max-height: 34vh;
    font-size: 19px;
  }

  .record-actions .button {
    width: auto;
  }

  .arrival-copy-block h2 {
    font-size: 36px;
  }

  .arrival-actions {
    align-items: flex-start;
  }

  .landing-seed {
    left: 39%;
    top: 55%;
  }

  h1 {
    font-size: 46px;
  }

  .entry-copy h1 {
    white-space: nowrap;
    letter-spacing: -0.07em;
  }

  .entry-footnote {
    right: 20px;
    bottom: 28px;
  }

  .entry-footnote .line {
    width: 32px;
  }

  .panel {
    padding: 26px 20px;
    border-radius: 22px;
  }

  .choice-grid,
  .choice-grid.compact {
    grid-template-columns: 1fr;
  }

  .garden-list {
    grid-template-columns: 1fr;
  }

  .primary-actions,
  .panel-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .primary-actions .button,
  .panel-actions .button {
    width: 100%;
  }

  .trace-card--water {
    grid-column: auto;
  }

  .water-trace-content {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .water-trace-mark {
    width: 72px;
    height: 72px;
    margin: 4px 0 8px 14px;
    transform: scale(0.76);
    transform-origin: left center;
  }

  .ambient-image {
    background-position: 58% center;
  }
}

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

/* 悬停时刻 v2：呼吸圆、蒲公英与分段回望 */
.hover-view {
  overflow: hidden;
}

.hover-center {
  width: min(820px, 100%);
  margin-top: 0;
  transform: translateY(-4.5vh);
}

.breathing-circle {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(229, 231, 219, 0.13);
  border-radius: 50%;
  transform: translateX(-50%);
  transition: opacity 900ms ease, transform 1200ms cubic-bezier(0.22, 0.75, 0.2, 1);
  animation: quiet-circle-breathe 7.8s ease-in-out infinite;
  isolation: isolate;
}

.breathing-circle::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(229, 231, 219, 0.035);
  border-radius: inherit;
}

.breathing-circle-inner {
  position: absolute;
  inset: 19px;
  border: 1px solid rgba(226, 230, 218, 0.08);
  border-radius: inherit;
  background: radial-gradient(circle at 46% 43%, rgba(228, 217, 181, 0.08), rgba(49, 64, 57, 0.025) 54%, transparent 70%);
}

.breathing-circle-glint {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(231, 220, 185, 0.62);
  box-shadow: 0 0 20px rgba(231, 220, 185, 0.26);
  transform: translate(calc(-50% + var(--glint-x, 0px)), calc(-50% + var(--glint-y, 0px)));
  transition: transform 1.8s cubic-bezier(0.22, 0.75, 0.2, 1), box-shadow 1s ease;
}

.breathing-circle.has-sound .breathing-circle-glint {
  box-shadow: 0 0 28px rgba(231, 220, 185, 0.44);
}

.hover-intro {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: 150px;
}

.hover-intro .eyebrow {
  margin: 0 0 22px;
}

.hover-intro h2 {
  width: 100%;
  max-width: none;
  margin: 0 auto 18px;
  font-size: clamp(38px, 3.55vw, 51px);
  line-height: 1.16;
  text-align: center;
}

.hover-invitation {
  margin: 0;
  font-size: 16px;
  text-align: center;
}

.sound-invitation {
  display: flex;
  width: fit-content;
  min-height: 38px;
  margin: 26px auto 0;
  padding: 8px 12px;
  opacity: 1;
  color: rgba(241, 240, 232, 0.62);
  pointer-events: auto;
  transform: none;
}

.moment-invitation {
  display: block;
  width: fit-content;
  min-height: 34px;
  margin: 10px auto 0;
  padding: 7px 11px;
  opacity: 0;
  color: rgba(241, 240, 232, 0.42);
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.1em;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity 1.4s ease, color 400ms ease, transform 1.4s ease;
}

.moment-invitation.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.moment-invitation:hover {
  color: rgba(241, 240, 232, 0.78);
}

.moment-prompt {
  max-width: 430px;
  margin: 16px auto 0;
  color: rgba(241, 240, 232, 0.62);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.9;
  animation: reflection-arrive 900ms ease both;
}

.finish-hover {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 42px;
  min-height: 38px;
  margin: 0;
  padding: 8px 13px;
  opacity: 0;
  color: rgba(241, 240, 232, 0.4);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.12em;
  pointer-events: none;
  transform: translate(-50%, 5px);
}

.finish-hover.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.finish-hover:hover,
.finish-hover:focus-visible {
  color: rgba(241, 240, 232, 0.78);
}

.wind-hint {
  position: absolute;
  z-index: 2;
  top: 260px;
  right: -140px;
  margin: 0;
  color: rgba(241, 240, 232, 0.28);
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: opacity 1.1s ease, transform 1.1s ease;
}

.hover-view.has-wind .wind-hint {
  opacity: 0;
  transform: translateX(8px);
}

.hover-dandelion {
  position: absolute;
  z-index: 1;
  top: 168px;
  right: -92px;
  width: 104px;
  height: 176px;
  opacity: 0.34;
  filter: drop-shadow(0 0 13px rgba(229, 224, 205, 0.08));
  transform: translate3d(var(--wind-x, 0px), var(--wind-y, 0px), 0) rotate(var(--wind-rotate, 0deg));
  transform-origin: 52% 100%;
  transition: transform 1.7s cubic-bezier(0.22, 0.75, 0.2, 1), opacity 1.1s ease;
  pointer-events: none;
}

.dandelion-crown {
  position: absolute;
  top: 0;
  left: 8px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: repeating-conic-gradient(from -5deg, rgba(237, 235, 222, 0.65) 0deg 0.55deg, transparent 0.55deg 11.25deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 14%, #000 17% 69%, transparent 72%);
  mask-image: radial-gradient(circle, transparent 0 14%, #000 17% 69%, transparent 72%);
}

.dandelion-heart {
  position: absolute;
  top: 40px;
  left: 49px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(194, 180, 139, 0.62);
  box-shadow: 0 0 12px rgba(216, 203, 166, 0.2);
}

.dandelion-stem {
  position: absolute;
  top: 46px;
  left: 52px;
  width: 1px;
  height: 128px;
  background: linear-gradient(180deg, rgba(225, 226, 211, 0.42), rgba(153, 164, 144, 0.08));
  transform: rotate(4deg);
  transform-origin: top;
}

.loose-seed {
  position: absolute;
  width: 24px;
  height: 30px;
  opacity: 0;
}

.loose-seed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(237, 235, 222, 0.58) 0deg 1deg, transparent 1deg 24deg);
}

.loose-seed::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 11px;
  width: 1px;
  height: 13px;
  background: rgba(232, 229, 213, 0.5);
  transform: rotate(-18deg);
  transform-origin: top;
}

.loose-seed--one { top: 6px; left: 62px; }
.loose-seed--two { top: 24px; left: 80px; }

.hover-view.has-wind .loose-seed--one {
  animation: hover-seed-release 14s cubic-bezier(0.2, 0.62, 0.18, 1) 0.25s forwards;
}

.hover-view.has-wind .loose-seed--two {
  animation: hover-seed-release-two 17s cubic-bezier(0.2, 0.62, 0.18, 1) 5.5s forwards;
}

.hover-reflection,
.hover-choice {
  width: min(720px, 100%);
  max-width: none;
  margin: 0 auto;
  padding-top: 0;
  animation: reflection-arrive 1s cubic-bezier(0.22, 0.75, 0.2, 1) both;
}

.hover-reflection .eyebrow,
.hover-choice .eyebrow {
  margin: 0 0 22px;
}

.hover-reflection h2,
.hover-choice h2 {
  max-width: none;
  margin: 0 auto 19px;
  font-size: clamp(35px, 3.35vw, 48px);
}

.reflection-duration {
  margin: 18px 0 0;
  color: rgba(241, 240, 232, 0.42);
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.reflection-duration strong {
  color: rgba(241, 240, 232, 0.68);
  font-weight: 400;
}

.reflection-continue {
  margin-top: 30px;
}

.hover-choice .reflection-choice {
  width: min(560px, 100%);
  margin-top: 34px;
}

.hover-choice .reflection-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hover-choice .reflection-options span {
  min-height: 52px;
  font-size: 13px;
}

.hover-choice-actions {
  display: grid;
  justify-items: center;
  gap: 17px;
  margin-top: 28px;
}

.save-reflection:disabled {
  opacity: 0.28;
  cursor: default;
}

.skip-reflection {
  min-height: 38px;
  padding: 8px 13px;
  color: rgba(241, 240, 232, 0.48);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.skip-reflection:hover {
  color: rgba(241, 240, 232, 0.82);
}

.hover-view.is-reflecting .breathing-circle,
.hover-view.is-reflecting .hover-dandelion,
.hover-view.is-choosing .breathing-circle,
.hover-view.is-choosing .hover-dandelion {
  opacity: 0;
  transform: translateX(-50%) translateY(-16px) scale(0.84);
  pointer-events: none;
}

.hover-view.is-reflecting .finish-hover,
.hover-view.is-choosing .finish-hover {
  opacity: 0;
  pointer-events: none;
}

.trace-card--water {
  background:
    radial-gradient(ellipse at 16% 54%, rgba(202, 190, 153, 0.1), transparent 30%),
    linear-gradient(112deg, rgba(30, 44, 38, 0.58), rgba(13, 23, 20, 0.64));
}

.trace-card--water::after {
  display: none;
}

.water-trace-mark {
  width: 108px;
  height: 112px;
  border: 0;
  border-radius: 0;
  opacity: 0.66;
  transform: rotate(-7deg);
}

.water-trace-mark::before {
  width: 68px;
  height: 68px;
  border: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -6deg, rgba(234, 232, 216, 0.58) 0deg 0.8deg, transparent 0.8deg 13deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 15%, #000 18% 68%, transparent 72%);
  mask-image: radial-gradient(circle, transparent 0 15%, #000 18% 68%, transparent 72%);
  transform: translate(-50%, -64%);
}

.water-trace-mark::after {
  width: 1px;
  height: 68px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(225, 224, 207, 0.42), transparent);
  transform: translate(-50%, -4%) rotate(9deg);
  transform-origin: top;
}

.water-trace-mark i:nth-child(1) {
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background: rgba(200, 185, 142, 0.6);
  transform: translate(-50%, -50%);
}

.water-trace-mark i:nth-child(2),
.water-trace-mark i:nth-child(3) {
  width: 20px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(235, 232, 215, 0.46) 0deg 1deg, transparent 1deg 25deg);
  opacity: 0.7;
}

.water-trace-mark i:nth-child(2) { transform: translate(25px, -48px) rotate(18deg); }
.water-trace-mark i:nth-child(3) { transform: translate(41px, -66px) rotate(29deg); opacity: 0.38; }

@keyframes quiet-circle-breathe {
  0%, 100% { transform: translateX(-50%) scale(0.94); opacity: 0.7; }
  50% { transform: translateX(-50%) scale(1.045); opacity: 1; }
}

@keyframes hover-seed-release {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
  8% { opacity: 0.58; }
  68% { opacity: 0.34; }
  100% { opacity: 0; transform: translate3d(210px, -126px, 0) rotate(118deg); }
}

@keyframes hover-seed-release-two {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
  10% { opacity: 0.42; }
  72% { opacity: 0.22; }
  100% { opacity: 0; transform: translate3d(164px, -172px, 0) rotate(164deg); }
}

@media (max-width: 1100px) {
  .hover-dandelion {
    right: -20px;
    opacity: 0.22;
  }

  .wind-hint {
    right: -20px;
  }
}

@media (max-width: 720px) {
  .hover-center {
    transform: translateY(-2vh);
  }

  .hover-dandelion,
  .wind-hint {
    display: none;
  }

  .hover-intro {
    padding-top: 136px;
  }

  .hover-choice .reflection-options {
    grid-template-columns: 1fr;
  }

  .hover-reflection h2,
  .hover-choice h2 {
    font-size: clamp(31px, 9vw, 42px);
  }

  .finish-hover {
    bottom: 28px;
  }
}

/* 悬停时刻 v6：一座会继续生活的园 */
.hover-view {
  --presence-x: 50%;
  --presence-y: 54%;
  --stay-progress: 0;
  --stay-shadow: 0.14;
  --scene-drift: 0px;
  background: #101a19;
  cursor: default;
}

.hover-view .living-garden {
  background: #101a19;
  transform: translateZ(0);
}

.living-garden-image {
  z-index: 0;
  inset: -5% !important;
  background: url("./assets/hover-garden-continuous-v1.png") center center / cover no-repeat;
  filter: saturate(0.78) brightness(0.72) contrast(0.96);
  transform: scale(1.09) translate3d(3.2%, 0, 0);
  transform-origin: center center;
  transition: transform 5.8s cubic-bezier(0.2, 0.72, 0.2, 1), filter 4.8s ease;
  animation: living-landscape-breathe 32s ease-in-out infinite alternate;
}

.hover-view[data-place="tree"] .living-garden-image {
  transform: scale(1.13) translate3d(4.8%, 0.5%, 0);
}

.hover-view[data-place="path"] .living-garden-image {
  transform: scale(1.1) translate3d(0, 0, 0);
}

.hover-view[data-place="water"] .living-garden-image {
  transform: scale(1.14) translate3d(-4.7%, 0.7%, 0);
}

html[data-light="day"] .living-garden-image {
  background-image: url("./assets/hover-garden-morning-v1.png");
  filter: saturate(0.72) brightness(0.82) contrast(0.94) sepia(0.04);
}

html[data-light="night"] .living-garden-image {
  filter: saturate(0.7) brightness(0.64) contrast(0.98) hue-rotate(3deg);
}

html[data-light="day"] .hover-view[data-daypart="dusk"] .living-garden-image {
  background-image: url("./assets/hover-garden-continuous-v1.png");
  filter: saturate(0.76) brightness(0.78) contrast(0.95) sepia(0.12);
}

.living-garden-light {
  z-index: 1;
  background:
    radial-gradient(circle at var(--presence-x) var(--presence-y), rgba(219, 216, 190, 0.08), transparent 19%),
    linear-gradient(180deg, rgba(9, 17, 19, 0.08), rgba(7, 13, 15, var(--stay-shadow)) 64%, rgba(6, 11, 12, 0.34));
  mix-blend-mode: screen;
  opacity: 0.64;
  transition: background 4s ease, opacity 4s ease;
}

html[data-light="day"] .living-garden-light {
  background:
    radial-gradient(ellipse at 58% 24%, rgba(241, 220, 170, 0.2), transparent 34%),
    radial-gradient(circle at var(--presence-x) var(--presence-y), rgba(247, 231, 189, 0.11), transparent 18%),
    linear-gradient(180deg, rgba(222, 205, 170, 0.04), rgba(129, 113, 81, 0.02) 58%, rgba(12, 18, 16, 0.18));
  mix-blend-mode: screen;
}

.living-garden-clouds {
  z-index: 2;
  inset: -18% -32% 42% -32% !important;
  opacity: 0.18;
  background:
    radial-gradient(ellipse at 28% 56%, rgba(218, 229, 229, 0.2), transparent 34%),
    radial-gradient(ellipse at 64% 40%, rgba(211, 222, 224, 0.16), transparent 38%),
    radial-gradient(ellipse at 84% 66%, rgba(231, 230, 218, 0.1), transparent 29%);
  filter: blur(26px);
  animation: living-cloud-drift 74s linear infinite;
}

.living-garden-mist {
  z-index: 3;
  inset: 30% -42% 4% -42% !important;
  background: linear-gradient(94deg, transparent 10%, rgba(215, 228, 224, 0.1) 34%, rgba(230, 230, 218, 0.18) 50%, rgba(194, 213, 212, 0.09) 69%, transparent 90%);
  filter: blur(24px);
  opacity: 0.2;
}

.mist-far {
  animation: living-mist-pass 82s linear infinite;
}

.mist-near {
  inset: 54% -55% -10% -55% !important;
  opacity: 0.12;
  filter: blur(34px);
  animation: living-mist-pass 58s linear -21s infinite reverse;
}

.canopy-breath {
  z-index: 4;
  inset: -8% 54% 35% -9% !important;
  background: radial-gradient(ellipse at 34% 12%, rgba(2, 9, 8, 0.6), transparent 68%);
  transform-origin: 20% 0;
  opacity: 0.45;
  animation: living-canopy-sway 13s ease-in-out infinite alternate;
}

.canopy-breath-two {
  inset: -5% -8% 58% 59% !important;
  opacity: 0.28;
  animation-duration: 17s;
  animation-delay: -7s;
}

.living-water {
  z-index: 5;
  inset: 51% -4% -10% 48% !important;
  opacity: 0.34;
  background:
    repeating-linear-gradient(176deg, transparent 0 10px, rgba(190, 211, 217, 0.09) 11px, transparent 13px 21px),
    radial-gradient(ellipse at 54% 28%, rgba(208, 225, 225, 0.16), transparent 58%);
  mix-blend-mode: screen;
  filter: blur(1px);
  transform: perspective(600px) rotateX(61deg) translate3d(0, 8%, 0);
  transform-origin: center top;
  transition: opacity 4s ease;
  animation: living-water-drift 12s ease-in-out infinite alternate;
}

.hover-view[data-place="water"] .living-water {
  opacity: 0.62;
}

.garden-bird {
  z-index: 7;
  left: 55% !important;
  top: 17.5% !important;
  right: auto !important;
  bottom: auto !important;
  width: 31px;
  height: 22px;
  opacity: 0.82;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
  transform: scale(0.92) rotate(-3deg);
  transform-origin: 55% 90%;
  transition: opacity 3.5s ease, transform 4s ease;
  animation: garden-bird-perch 7s ease-in-out infinite;
}

.garden-bird::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -18px;
  top: 19px;
  width: 56px;
  height: 1px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(12, 19, 18, 0.78) 22%, rgba(12, 19, 18, 0.86) 82%, transparent);
  transform: rotate(-5deg);
}

.bird-body,
.bird-head,
.bird-tail {
  position: absolute;
  display: block;
  background: rgba(12, 19, 18, 0.94);
}

.bird-body {
  left: 7px;
  top: 8px;
  width: 18px;
  height: 11px;
  border-radius: 58% 52% 62% 44%;
  box-shadow: 0 0 0 0.5px rgba(218, 222, 204, 0.24);
}

.bird-head {
  left: 19px;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform-origin: 20% 80%;
  animation: garden-bird-look 11s steps(1, end) infinite;
}

.bird-head::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 4px;
  width: 5px;
  height: 2px;
  background: rgba(14, 19, 18, 0.88);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.bird-tail {
  left: 1px;
  top: 13px;
  width: 12px;
  height: 4px;
  border-radius: 100% 0 0 100%;
  transform: rotate(17deg);
  transform-origin: right center;
  animation: garden-bird-tail 4.8s ease-in-out infinite;
}

.hover-view[data-place="water"] .garden-bird {
  opacity: 0.24;
}

.hover-view.is-listening .garden-bird,
.hover-view[data-sound-cue="bird"] .garden-bird {
  opacity: 0.9;
  animation-duration: 3.8s;
}

.hover-view[data-sound-cue="bird"] .bird-head {
  animation: garden-bird-alert 1.4s ease-in-out 2;
}

.garden-fireflies {
  z-index: 6;
  opacity: 0;
  transition: opacity 7s ease;
}

html[data-light="night"] .garden-fireflies {
  opacity: 0.64;
}

.garden-fireflies i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(230, 202, 126, 0.9);
  box-shadow: 0 0 10px rgba(231, 197, 116, 0.5);
  opacity: 0;
  animation: garden-firefly 9s ease-in-out infinite;
}

.garden-fireflies i:nth-child(1) { left: 13%; top: 63%; animation-delay: -1s; }
.garden-fireflies i:nth-child(2) { left: 31%; top: 53%; animation-delay: -6s; }
.garden-fireflies i:nth-child(3) { left: 68%; top: 67%; animation-delay: -3s; }
.garden-fireflies i:nth-child(4) { left: 81%; top: 58%; animation-delay: -8s; }
.garden-fireflies i:nth-child(5) { left: 54%; top: 47%; animation-delay: -4.5s; }

.garden-stones {
  z-index: 8;
}

.remembered-stone {
  position: absolute;
  left: var(--stone-x);
  top: var(--stone-y);
  width: var(--stone-size);
  height: calc(var(--stone-size) * 0.7);
  padding: 0;
  border: 1px solid rgba(205, 213, 197, 0.16);
  border-radius: 54% 45% 48% 42%;
  background:
    radial-gradient(circle at 35% 25%, rgba(209, 214, 198, 0.26), transparent 26%),
    linear-gradient(145deg, rgba(94, 108, 100, 0.92), rgba(34, 46, 43, 0.96));
  box-shadow: inset -4px -5px 8px rgba(8, 14, 13, 0.35), 0 7px 13px rgba(2, 7, 6, 0.26);
  opacity: 0.78;
  cursor: pointer;
  pointer-events: auto;
  transform: rotate(var(--stone-rotate));
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
}

.remembered-stone:hover,
.remembered-stone:focus-visible {
  opacity: 1;
  filter: brightness(1.13);
  transform: rotate(var(--stone-rotate)) translateY(-2px);
}

.remembered-stone.is-new {
  animation: stone-arrive 1.35s cubic-bezier(0.18, 0.8, 0.2, 1) both;
}

.hover-view[data-place="tree"] .remembered-stone:not([data-place="tree"]),
.hover-view[data-place="path"] .remembered-stone:not([data-place="path"]),
.hover-view[data-place="water"] .remembered-stone:not([data-place="water"]) {
  opacity: 0.1;
  filter: blur(0.5px);
  pointer-events: none;
}

.living-garden-veil {
  z-index: 9;
  background:
    radial-gradient(circle at var(--presence-x) var(--presence-y), transparent 0 9%, rgba(6, 12, 12, 0.035) 24%, transparent 42%),
    linear-gradient(90deg, rgba(4, 9, 9, 0.3), transparent 25%, transparent 75%, rgba(3, 8, 9, 0.24)),
    linear-gradient(180deg, rgba(5, 10, 10, 0.13), transparent 32%, rgba(3, 7, 8, 0.39));
}

html[data-light="day"] .living-garden-veil {
  background:
    radial-gradient(ellipse at 50% 51%, rgba(14, 21, 18, 0.32) 0%, rgba(16, 23, 20, 0.19) 22%, transparent 47%),
    linear-gradient(90deg, rgba(7, 13, 11, 0.22), transparent 25%, transparent 74%, rgba(7, 12, 11, 0.18)),
    linear-gradient(180deg, rgba(10, 16, 14, 0.08), transparent 36%, rgba(6, 11, 10, 0.32));
}

.world-ripple {
  position: fixed;
  z-index: 10;
  left: var(--ripple-x);
  top: var(--ripple-y);
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 1px solid rgba(215, 228, 217, 0.32);
  border-radius: 50%;
  pointer-events: none;
  animation: world-touch-ripple 2.4s ease-out forwards;
}

.hover-center {
  z-index: 12;
  width: min(820px, calc(100% - 48px));
  transform: translateY(-1.5vh);
  pointer-events: none;
}

.hover-intro {
  padding-top: 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 2.8s ease, transform 3s ease;
}

.hover-view.intro-has-faded .hover-intro {
  opacity: 0;
  transform: translateY(-8px);
}

.hover-intro h2 {
  text-shadow: 0 3px 28px rgba(3, 8, 8, 0.55);
}

.hover-controls {
  width: 190px;
  margin-top: 26px;
  pointer-events: auto;
  transition: transform 2.4s ease, opacity 2.4s ease;
}

.hover-view.intro-has-faded .hover-controls {
  transform: translateY(17vh);
  opacity: 0.74;
}

/* 文案退出后，园声按钮在本轮悬停中永久停在这一位置。 */
.hover-view.sound-position-locked .hover-controls,
.hover-view.sound-position-locked.is-reflecting .hover-controls,
.hover-view.sound-position-locked.is-choosing .hover-controls {
  transform: translateY(17vh) !important;
  opacity: .74 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.hover-view.sound-position-locked .hover-controls .sound-invitation,
.hover-view.sound-position-locked.is-reflecting .hover-controls .sound-invitation,
.hover-view.sound-position-locked.is-choosing .hover-controls .sound-invitation {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.hover-reflection {
  z-index: 14;
  width: min(620px, calc(100vw - 48px));
  padding: 36px clamp(22px, 4vw, 54px);
  border: 1px solid rgba(226, 226, 207, 0.13);
  border-radius: 34px;
  background: rgba(12, 22, 21, 0.34);
  box-shadow: 0 30px 90px rgba(2, 7, 7, 0.28);
  backdrop-filter: blur(18px) saturate(0.88);
  pointer-events: auto;
}

.hover-reflection h2 {
  margin-bottom: 18px;
}

.hover-reflection .reflection-copy {
  color: rgba(245, 242, 230, 0.68);
}

.hover-choice-actions {
  display: flex;
  margin-top: 29px;
  align-items: center;
  justify-content: center;
  gap: 17px;
}

.place-stone {
  min-width: 176px;
}

.garden-place-nav {
  position: absolute;
  z-index: 14;
  left: clamp(22px, 5vw, 84px);
  bottom: clamp(24px, 4.8vh, 56px);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(7px);
  transition: opacity 2.4s ease 0.4s, transform 2.4s ease 0.4s;
}

.hover-view.intro-has-faded .garden-place-nav {
  opacity: 0.72;
  pointer-events: auto;
  transform: translateY(0);
}

.hover-view.is-reflecting .garden-place-nav {
  opacity: 0;
  pointer-events: none;
}

.place-link {
  min-width: 54px;
  padding: 7px 4px;
  border: 0;
  color: rgba(241, 241, 226, 0.48);
  background: transparent;
  font-family: var(--serif);
  text-align: center;
  cursor: pointer;
  transition: color 0.8s ease, transform 0.8s ease;
}

.place-link span,
.place-link small {
  display: block;
}

.place-link span {
  font-size: 13px;
  letter-spacing: 0.16em;
}

.place-link small {
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.08em;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.place-link:hover,
.place-link:focus-visible,
.place-link.is-current {
  color: rgba(247, 243, 229, 0.88);
  transform: translateY(-1px);
}

.place-link.is-current small {
  opacity: 0.65;
}

.place-path-line {
  width: clamp(17px, 2.4vw, 36px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 226, 210, 0.28), transparent);
}

.place-whisper,
.stone-memory-whisper {
  position: absolute;
  z-index: 14;
  right: clamp(24px, 5vw, 86px);
  bottom: clamp(34px, 5.4vh, 64px);
  max-width: 280px;
  margin: 0;
  color: rgba(241, 241, 224, 0.53);
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: right;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.8s ease, transform 1.8s ease;
  pointer-events: none;
}

.hover-view.intro-has-faded .place-whisper,
.stone-memory-whisper.is-visible {
  opacity: 0.72;
  transform: translateY(0);
}

.hover-view:has(.stone-memory-whisper.is-visible) .place-whisper,
.hover-view.is-reflecting .place-whisper {
  opacity: 0;
}

.hover-view > .finish-hover {
  z-index: 15;
  bottom: 66px;
}

.hover-view > .exit-link {
  z-index: 15;
  bottom: 25px;
}

.hover-view.is-reflecting > .exit-link {
  color: rgba(246, 242, 231, 0.5);
}

.hover-view.is-reflecting .hover-controls,
.hover-view.is-reflecting .place-whisper {
  opacity: 0;
  pointer-events: none;
}

.garden-view .garden-list:has(.stone-memory) {
  position: relative;
  min-height: 330px;
  padding: clamp(24px, 5vw, 58px);
  overflow: hidden;
  border-color: rgba(201, 210, 192, 0.13);
  background:
    linear-gradient(180deg, rgba(14, 26, 23, 0.74), rgba(10, 20, 18, 0.88)),
    url("./assets/hover-garden-continuous-v1.png") center 68% / cover no-repeat;
}

.stone-memory {
  position: absolute;
  left: var(--memory-x);
  top: var(--memory-y);
  display: inline-flex;
  width: clamp(74px, 9vw, 120px);
  min-height: 94px;
  margin: 0;
  align-items: center;
  justify-content: center;
  vertical-align: bottom;
  transform: translate(-50%, -50%);
}

.garden-memory-stone {
  width: 44px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(210, 220, 204, 0.14);
  border-radius: 54% 44% 49% 39%;
  background:
    radial-gradient(circle at 35% 23%, rgba(212, 222, 207, 0.28), transparent 28%),
    linear-gradient(145deg, #6c7b73, #293a35 74%);
  box-shadow: inset -5px -6px 9px rgba(6, 12, 11, 0.3), 0 9px 18px rgba(2, 8, 7, 0.32);
  cursor: pointer;
  transform: rotate(var(--stone-rotate, -4deg));
  transition: transform 0.8s ease, filter 0.8s ease;
}

.garden-memory-stone:hover,
.garden-memory-stone:focus-visible,
.stone-memory.is-open .garden-memory-stone {
  filter: brightness(1.16);
  transform: rotate(var(--stone-rotate, -4deg)) translateY(-4px);
}

.stone-whisper {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: min(260px, 68vw);
  padding: 11px 15px;
  border: 1px solid rgba(221, 224, 207, 0.12);
  border-radius: 16px;
  color: rgba(244, 241, 227, 0.76);
  background: rgba(10, 20, 18, 0.84);
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.stone-memory.is-open .stone-whisper {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.stone-whisper .delete-trace {
  display: block;
  margin: 5px auto 0;
  color: rgba(240, 238, 222, 0.4);
  font-size: 10px;
}

@keyframes living-landscape-breathe {
  0% { transform-origin: 48% 52%; }
  100% { transform-origin: 52% 49%; }
}

@keyframes living-cloud-drift {
  from { transform: translate3d(-14%, 0, 0); }
  to { transform: translate3d(17%, 2%, 0); }
}

@keyframes living-mist-pass {
  from { transform: translate3d(-18%, 0, 0); }
  to { transform: translate3d(19%, -2%, 0); }
}

@keyframes living-canopy-sway {
  0% { transform: rotate(-0.6deg) translate3d(-0.4%, 0, 0); }
  100% { transform: rotate(0.9deg) translate3d(0.8%, 0.3%, 0); }
}

@keyframes living-water-drift {
  from { background-position: 0 0, 46% 52%; }
  to { background-position: 20px 8px, 54% 48%; }
}

@keyframes garden-bird-perch {
  0%, 78%, 100% { transform: scale(0.92) rotate(-3deg) translateY(0); }
  82% { transform: scale(0.94) rotate(-1deg) translateY(-1px); }
  88% { transform: scale(0.92) rotate(-4deg) translateY(0); }
}

@keyframes garden-bird-look {
  0%, 22%, 100% { transform: rotate(0); }
  23%, 38% { transform: rotate(-18deg); }
  39%, 72% { transform: rotate(7deg); }
}

@keyframes garden-bird-tail {
  0%, 72%, 100% { transform: rotate(17deg); }
  78% { transform: rotate(28deg); }
  84% { transform: rotate(10deg); }
}

@keyframes garden-bird-alert {
  0%, 100% { transform: rotate(0); }
  45% { transform: rotate(-24deg) translateY(-1px); }
}

@keyframes garden-firefly {
  0%, 18%, 100% { opacity: 0; transform: translate3d(0, 7px, 0); }
  30%, 50% { opacity: 0.86; }
  72% { opacity: 0.18; transform: translate3d(14px, -17px, 0); }
}

@keyframes stone-arrive {
  0% { opacity: 0; transform: translateY(-36px) scale(0.72) rotate(var(--stone-rotate)); }
  58% { opacity: 1; transform: translateY(4px) scale(1.04) rotate(var(--stone-rotate)); }
  78% { transform: translateY(-2px) scale(0.98) rotate(var(--stone-rotate)); }
  100% { opacity: 0.86; transform: translateY(0) scale(1) rotate(var(--stone-rotate)); }
}

@keyframes world-touch-ripple {
  0% { opacity: 0; transform: scale(0.55); }
  18% { opacity: 0.72; }
  100% { opacity: 0; transform: scale(12); border-color: rgba(215, 228, 217, 0.06); }
}

@media (max-width: 800px) {
  .garden-place-nav {
    left: 16px;
    bottom: 58px;
    gap: 4px;
  }

  .place-path-line {
    width: 12px;
  }

  .place-whisper,
  .stone-memory-whisper {
    right: 18px;
    bottom: 77px;
    max-width: 170px;
  }

  .garden-bird {
    left: 53% !important;
    top: 19% !important;
  }

  .hover-choice-actions {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .living-garden-image,
  .living-garden-clouds,
  .living-garden-mist,
  .canopy-breath,
  .living-water,
  .garden-bird,
  .bird-head,
  .bird-tail,
  .garden-fireflies i {
    animation: none !important;
  }
}

/* 悬停出口：完成与离开保持两个清晰层级 */
.hover-view .finish-hover {
  bottom: 66px;
}

.hover-view .exit-link,
.hover-view.is-reflecting .exit-link,
.hover-view.is-choosing .exit-link {
  bottom: 26px;
  opacity: 1;
  color: rgba(241, 240, 232, 0.42);
  pointer-events: auto;
}

.hover-view .exit-link:hover,
.hover-view .exit-link:focus-visible {
  color: rgba(241, 240, 232, 0.78);
}

@media (max-width: 720px) {
  .hover-view .finish-hover {
    bottom: 58px;
  }

  .hover-view .exit-link,
  .hover-view.is-reflecting .exit-link,
  .hover-view.is-choosing .exit-link {
    bottom: 20px;
  }
}

/* 悬停时刻 v5：黄昏蒲公英、园声经过与同轴出口 */
.ambient-scene {
  transition: opacity 1200ms ease;
}

body[data-view="hover"] .ambient-scene {
  opacity: 0;
}

.hover-view {
  --hover-scene-brightness: 0.66;
  --hover-scene-saturation: 0.72;
  --hover-scene-warmth: 0.24;
  isolation: isolate;
  overflow: hidden;
}

html[data-light="day"] .hover-view {
  --hover-scene-brightness: 0.82;
  --hover-scene-saturation: 0.82;
  --hover-scene-warmth: 0.31;
}

.hover-scene,
.hover-scene > div {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hover-scene {
  z-index: 0;
  overflow: hidden;
  background: #17201f;
}

.hover-scene-image,
.hover-scene-dandelion,
.hover-scene-bamboo {
  inset: -2.5% !important;
  background: url("./assets/yinyuan-hover-dusk-dandelion-v2.png") center center / cover no-repeat;
}

.hover-scene-image {
  filter:
    saturate(var(--hover-scene-saturation))
    brightness(var(--hover-scene-brightness))
    contrast(0.94);
  transform: scale(1.035);
  animation: hover-landscape-still 38s ease-in-out infinite alternate;
  transition: filter 6s ease;
}

.hover-scene-dandelion {
  z-index: 1;
  opacity: 0.34;
  filter: saturate(0.84) brightness(calc(var(--hover-scene-brightness) + 0.14));
  transform: scale(1.035);
  transform-origin: 78% 88%;
  -webkit-mask-image: radial-gradient(ellipse 15% 34% at 78% 71%, #000 0 34%, rgba(0, 0, 0, 0.82) 56%, transparent 82%);
  mask-image: radial-gradient(ellipse 15% 34% at 78% 71%, #000 0 34%, rgba(0, 0, 0, 0.82) 56%, transparent 82%);
  animation: hover-dandelion-stay 29s ease-in-out infinite alternate;
  transition: opacity 5s ease;
}

.hover-scene-bamboo {
  z-index: 2;
  opacity: 0.2;
  filter: brightness(0.64) saturate(0.65) blur(0.15px);
  transform: scale(1.035);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.9) 12%, transparent 27%, transparent 74%, rgba(0, 0, 0, 0.82) 88%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.9) 12%, transparent 27%, transparent 74%, rgba(0, 0, 0, 0.82) 88%, #000 100%);
  animation: hover-bamboo-breathe 42s ease-in-out infinite alternate;
  transition: opacity 4s ease, transform 6s cubic-bezier(0.22, 0.75, 0.2, 1);
}

.hover-scene-water {
  z-index: 3;
  inset: 47% 16% 10% 17% !important;
  opacity: 0.15;
  background:
    linear-gradient(102deg, transparent 6%, rgba(247, 214, 173, 0.08) 42%, rgba(231, 201, 177, 0.2) 52%, transparent 72%),
    radial-gradient(ellipse at 54% 55%, rgba(245, 212, 175, 0.13), transparent 58%);
  filter: blur(8px);
  mix-blend-mode: screen;
  transform: translate3d(-1.2%, 0, 0);
  animation: hover-water-memory 26s ease-in-out infinite alternate;
  transition: opacity 5s ease, transform 7s ease;
}

.hover-scene-mist {
  z-index: 4;
  inset: 27% -34% 10% -34% !important;
  opacity: 0.16;
  background: linear-gradient(94deg, transparent 18%, rgba(222, 216, 206, 0.08) 39%, rgba(232, 219, 207, 0.18) 50%, rgba(210, 216, 215, 0.08) 63%, transparent 81%);
  filter: blur(18px);
  transform: translate3d(-15%, 0, 0);
  animation: hover-mist-pass 68s linear infinite;
  transition: opacity 7s ease;
}

.hover-scene-veil {
  z-index: 5;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(18, 22, 21, 0.04) 0%, rgba(14, 19, 18, 0.19) 47%, transparent 71%),
    linear-gradient(180deg, rgba(10, 15, 15, 0.18) 0%, rgba(10, 15, 14, 0.04) 36%, rgba(8, 13, 12, 0.49) 100%),
    linear-gradient(90deg, rgba(8, 13, 12, 0.34) 0%, transparent 27%, transparent 68%, rgba(8, 13, 12, 0.26) 100%);
}

.hover-center {
  z-index: 2;
  width: min(820px, 100%);
  margin-top: 0;
  transform: translateY(-2.8vh);
}

.breathing-circle {
  top: 0;
  width: 104px;
  height: 104px;
  border-color: rgba(238, 225, 201, 0.13);
  animation-duration: 18s;
}

.breathing-circle::before {
  inset: -12px;
  border-color: rgba(238, 225, 201, 0.035);
}

.breathing-circle-inner {
  inset: 23px;
  border-color: rgba(238, 225, 201, 0.075);
  background: radial-gradient(circle at 46% 43%, rgba(231, 210, 179, 0.1), rgba(48, 53, 49, 0.02) 56%, transparent 72%);
}

.breathing-circle-glint {
  width: 5px;
  height: 5px;
  background: rgba(239, 217, 179, 0.64);
  box-shadow: 0 0 24px rgba(235, 203, 161, 0.3);
}

.hover-intro {
  padding-top: 139px;
}

.hover-intro .eyebrow {
  margin-bottom: 20px;
}

.hover-intro h2 {
  margin-bottom: 17px;
  text-shadow: 0 2px 24px rgba(8, 12, 11, 0.22);
}

.hover-invitation {
  color: rgba(246, 242, 231, 0.68);
  text-shadow: 0 2px 17px rgba(8, 12, 11, 0.24);
}

.hover-controls {
  position: relative;
  z-index: 7;
  display: flex;
  width: 190px;
  margin: 21px auto 0;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}

.hover-controls .sound-invitation,
.hover-controls .finish-hover,
.hover-controls .exit-link {
  position: static;
  display: inline-flex;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 7px 10px;
  align-items: center;
  justify-content: center;
  transform: none;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.1em;
  transition: opacity 1.4s ease, color 450ms ease, transform 1.4s ease;
}

.hover-controls .sound-invitation {
  gap: 9px;
  opacity: 1;
  color: rgba(246, 242, 231, 0.62);
  pointer-events: auto;
}

.hover-controls .finish-hover {
  opacity: 0;
  color: rgba(246, 242, 231, 0.38);
  pointer-events: none;
  transform: translateY(4px);
}

.hover-controls .finish-hover.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.hover-controls .exit-link,
.hover-view.is-reflecting .hover-controls .exit-link,
.hover-view.is-choosing .hover-controls .exit-link {
  opacity: 1;
  color: rgba(246, 242, 231, 0.4);
  pointer-events: auto;
  transform: none;
}

.hover-controls .sound-invitation:hover,
.hover-controls .sound-invitation[aria-pressed="true"],
.hover-controls .finish-hover:hover,
.hover-controls .finish-hover:focus-visible,
.hover-controls .exit-link:hover,
.hover-controls .exit-link:focus-visible {
  color: rgba(250, 247, 238, 0.82);
}

.hover-view.is-reflecting .hover-controls .sound-invitation,
.hover-view.is-choosing .hover-controls .sound-invitation,
.hover-view.is-reflecting .hover-controls .finish-hover,
.hover-view.is-choosing .hover-controls .finish-hover {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.hover-reflection,
.hover-choice {
  position: relative;
  z-index: 3;
}

.hover-view.is-listening .hover-scene-dandelion {
  opacity: 0.43;
}

.hover-view.is-listening .hover-scene-water {
  opacity: 0.22;
}

.hover-view[data-sound-cue="string"] .hover-scene-water {
  opacity: 0.4;
  transform: translate3d(1.5%, -0.6%, 0);
}

.hover-view[data-sound-cue="bamboo"] .hover-scene-bamboo {
  opacity: 0.3;
  transform: scale(1.037) translate3d(0.22%, -0.12%, 0);
}

.hover-view[data-sound-cue="xiao"] .hover-scene-mist {
  opacity: 0.34;
}

.hover-view[data-sound-cue="bird"] .hover-scene-veil {
  background:
    radial-gradient(ellipse at 49% 42%, rgba(225, 202, 178, 0.05) 0%, rgba(14, 19, 18, 0.15) 49%, transparent 73%),
    linear-gradient(180deg, rgba(10, 15, 15, 0.14) 0%, rgba(10, 15, 14, 0.03) 36%, rgba(8, 13, 12, 0.46) 100%),
    linear-gradient(90deg, rgba(8, 13, 12, 0.32) 0%, transparent 27%, transparent 68%, rgba(8, 13, 12, 0.24) 100%);
}

.hover-view[data-sound-cue="cricket"] .hover-scene-image,
.hover-view[data-sound-cue="cicada"] .hover-scene-image {
  filter:
    saturate(var(--hover-scene-saturation))
    brightness(calc(var(--hover-scene-brightness) - 0.025))
    contrast(0.95);
}

@keyframes hover-landscape-still {
  0% { transform: scale(1.035) translate3d(-0.16%, 0.04%, 0); }
  100% { transform: scale(1.048) translate3d(0.2%, -0.14%, 0); }
}

@keyframes hover-dandelion-stay {
  0% { transform: scale(1.035) translate3d(0, 0, 0) rotate(-0.05deg); }
  100% { transform: scale(1.037) translate3d(0.08%, -0.1%, 0) rotate(0.09deg); }
}

@keyframes hover-bamboo-breathe {
  0% { transform: scale(1.035) translate3d(-0.08%, 0.02%, 0); }
  100% { transform: scale(1.039) translate3d(0.14%, -0.08%, 0); }
}

@keyframes hover-water-memory {
  0% { transform: translate3d(-1.2%, 0, 0) scaleX(0.98); }
  100% { transform: translate3d(1.1%, -0.2%, 0) scaleX(1.03); }
}

@keyframes hover-mist-pass {
  0% { transform: translate3d(-17%, 0, 0); }
  100% { transform: translate3d(17%, -1.2%, 0); }
}

@media (max-width: 900px) {
  .hover-scene-image,
  .hover-scene-dandelion,
  .hover-scene-bamboo {
    background-position: 66% center;
  }

  .hover-center {
    transform: translateY(-1.4vh);
  }
}

@media (max-width: 720px) {
  .hover-center {
    width: 100%;
    transform: translateY(-1vh);
  }

  .hover-intro {
    padding-top: 130px;
  }

  .hover-controls {
    margin-top: 17px;
  }

  .hover-scene-image,
  .hover-scene-dandelion,
  .hover-scene-bamboo {
    background-position: 70% center;
  }
}

/* 悬停时刻 v6：出口回到底部，同一座园在日夜之间缓慢换光 */
.hover-scene-image {
  z-index: 0;
}

.hover-scene-night {
  z-index: 1;
  inset: -2.5% !important;
  background: url("./assets/yinyuan-hover-dusk-dandelion-night-v1.png") center center / cover no-repeat;
  filter: saturate(0.72) brightness(0.72) contrast(0.96);
  opacity: 1;
  transform: scale(1.035);
  animation: hover-landscape-still 38s ease-in-out infinite alternate;
  transition: opacity 1800ms cubic-bezier(0.22, 0.7, 0.2, 1), filter 1800ms ease;
}

html[data-light="day"] .hover-scene-night {
  opacity: 0;
}

.hover-scene-dandelion,
.hover-scene-bamboo {
  background-image: url("./assets/yinyuan-hover-dusk-dandelion-night-v1.png");
}

html[data-light="day"] .hover-scene-dandelion,
html[data-light="day"] .hover-scene-bamboo {
  background-image: url("./assets/yinyuan-hover-dusk-dandelion-v2.png");
}

.hover-scene-dandelion {
  z-index: 2;
}

.hover-scene-bamboo {
  z-index: 3;
}

.hover-scene-water {
  z-index: 4;
}

.hover-scene-mist {
  z-index: 5;
}

.hover-scene-veil {
  z-index: 6;
}

html[data-light="night"] .hover-scene-water {
  background:
    linear-gradient(102deg, transparent 6%, rgba(176, 190, 216, 0.06) 42%, rgba(190, 199, 221, 0.16) 52%, transparent 72%),
    radial-gradient(ellipse at 54% 55%, rgba(180, 192, 218, 0.1), transparent 58%);
}

html[data-light="night"] .hover-scene-veil {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(15, 19, 28, 0.02) 0%, rgba(10, 15, 23, 0.14) 48%, transparent 72%),
    linear-gradient(180deg, rgba(7, 11, 18, 0.1) 0%, rgba(7, 11, 17, 0.02) 38%, rgba(5, 9, 14, 0.42) 100%),
    linear-gradient(90deg, rgba(5, 9, 14, 0.25) 0%, transparent 27%, transparent 69%, rgba(5, 9, 14, 0.2) 100%);
}

.hover-controls {
  gap: 0;
}

.hover-view > .finish-hover,
.hover-view > .exit-link {
  position: absolute;
  z-index: 8;
  left: 50%;
  display: inline-flex;
  width: 190px;
  min-height: 34px;
  margin: 0;
  padding: 7px 10px;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-align: center;
}

.hover-view > .finish-hover {
  bottom: 66px;
  color: rgba(246, 242, 231, 0.38);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 1.4s ease, color 450ms ease, transform 1.4s ease;
}

.hover-view > .finish-hover.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.hover-view > .exit-link,
.hover-view.is-reflecting > .exit-link,
.hover-view.is-choosing > .exit-link {
  bottom: 26px;
  color: rgba(246, 242, 231, 0.4);
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
  transition: color 450ms ease;
}

.hover-view > .finish-hover:hover,
.hover-view > .finish-hover:focus-visible,
.hover-view > .exit-link:hover,
.hover-view > .exit-link:focus-visible {
  color: rgba(250, 247, 238, 0.82);
}

.hover-view.is-reflecting > .finish-hover,
.hover-view.is-choosing > .finish-hover {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hover-scene-night {
    background-position: 66% center;
  }
}

@media (max-width: 720px) {
  .hover-scene-night {
    background-position: 70% center;
  }

  .hover-view > .finish-hover {
    bottom: 58px;
  }

  .hover-view > .exit-link,
  .hover-view.is-reflecting > .exit-link,
  .hover-view.is-choosing > .exit-link {
    bottom: 20px;
  }
}

/* V0.3 · 悬停时刻：连续的三维园境 */
.garden-3d-root {
  --garden-parallax-x: 0px;
  --garden-parallax-y: 0px;
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #17241f;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1400ms ease, visibility 0s linear 1400ms;
}

.garden-3d-root.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.garden-3d-root::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -2%;
  background: #15221d;
  transform: scale(1.035) translate3d(0, 0, 0);
  transform-origin: center;
  transition: transform 2700ms cubic-bezier(.2,.72,.2,1), filter 1400ms ease;
}

.garden-view-images {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #15221d;
}

.garden-presence-light {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle clamp(120px, 14vw, 190px) at var(--presence-x, 50%) var(--presence-y, 54%),
    rgba(210, 227, 220, .17) 0%,
    rgba(171, 201, 198, .085) 32%,
    rgba(116, 154, 158, .03) 62%,
    transparent 100%
  );
  mix-blend-mode: screen;
  transition: opacity 700ms ease;
}

html[data-light="night"] body[data-view="hover"] .garden-3d-root.presence-is-moving .garden-presence-light {
  opacity: .82;
}

.garden-presence-light::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    circle clamp(170px, 21vw, 280px) at var(--presence-x, 50%) var(--presence-y, 54%),
    rgba(213, 226, 220, .13) 0%,
    rgba(157, 187, 188, .06) 32%,
    rgba(105, 142, 149, .022) 63%,
    transparent 100%
  );
}

html[data-light="night"] body[data-view="hover"] .garden-3d-root.presence-was-touched .garden-presence-light::after {
  animation: presence-light-breathe 1450ms cubic-bezier(.2,.68,.24,1) both;
}

@keyframes presence-light-breathe {
  0% { opacity: 0; transform: scale(.72); }
  22% { opacity: .92; }
  100% { opacity: 0; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-light="night"] body[data-view="hover"] .garden-3d-root.presence-was-touched .garden-presence-light::after {
    animation-duration: 1ms;
  }
}

.garden-view-image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.008);
  filter: saturate(.95) contrast(1.015);
  transition: opacity 1450ms cubic-bezier(.32,.72,.2,1), filter 1600ms ease;
  will-change: opacity;
}

.garden-view-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .78;
  filter: blur(1.15px) saturate(.9) contrast(.92);
  transform: scale(1.004);
}

.garden-view-image--overview::after,
.garden-view-image--tree-bird::after {
  opacity: 0;
}

.garden-view-image--tree::after {
  background-image: url("./assets/garden-tree-seated-day-v3.png");
  -webkit-mask-image: radial-gradient(ellipse 42% 39% at 17% 84%, #000 0 44%, transparent 74%);
  mask-image: radial-gradient(ellipse 42% 39% at 17% 84%, #000 0 44%, transparent 74%);
}

.garden-view-image--path::after {
  background-image: url("./assets/garden-path-lantern-day-v3.png");
  -webkit-mask-image:
    radial-gradient(ellipse 45% 68% at 9% 61%, #000 0 48%, transparent 78%),
    radial-gradient(ellipse 38% 30% at 36% 91%, #000 0 45%, transparent 75%);
  mask-image:
    radial-gradient(ellipse 45% 68% at 9% 61%, #000 0 48%, transparent 78%),
    radial-gradient(ellipse 38% 30% at 36% 91%, #000 0 45%, transparent 75%);
}

.garden-view-image--water::after {
  background-image: url("./assets/garden-water-day-v2.png");
  -webkit-mask-image: radial-gradient(ellipse 38% 62% at 7% 77%, #000 0 48%, transparent 78%);
  mask-image: radial-gradient(ellipse 38% 62% at 7% 77%, #000 0 48%, transparent 78%);
}

html[data-light="night"] .garden-view-image--tree::after {
  background-image: url("./assets/garden-tree-seated-night-v3.png");
}

html[data-light="night"] .garden-view-image--path::after {
  background-image: url("./assets/garden-path-lantern-night-v3.png");
}

html[data-light="night"] .garden-view-image--water::after {
  background-image: url("./assets/garden-water-night-v3.png");
}

.garden-view-image--tree { background-image: url("./assets/garden-tree-seated-day-v3.png"); }
.garden-view-image--overview { background-image: url("./assets/garden-tree-day-v2.png"); }
.garden-view-image--tree-bird { background-image: url("./assets/garden-tree-seated-bird-day-v3.png"); }
.garden-view-image--path { background-image: url("./assets/garden-path-lantern-day-v3.png"); }
.garden-view-image--water { background-image: url("./assets/garden-water-day-v2.png"); }
.garden-3d-root[data-place="overview"] .garden-view-image--overview,
.garden-3d-root[data-place="tree"] .garden-view-image--tree,
.garden-3d-root[data-place="path"] .garden-view-image--path,
.garden-3d-root[data-place="water"] .garden-view-image--water { opacity: 1; }

.garden-3d-root[data-place="tree"].bird-has-arrived .garden-view-image--tree { opacity: 0; }
.garden-3d-root[data-place="tree"].bird-has-arrived .garden-view-image--tree-bird { opacity: 1; }

html[data-light="night"] .garden-view-image {
  filter: saturate(.96) contrast(1.025);
}
html[data-light="night"] .garden-view-image--overview {
  background-image: url("./assets/garden-overview-moonlit-night-v4.png");
  filter: saturate(.88) contrast(.96) brightness(1.05) blur(.08px);
}
html[data-light="night"] .garden-view-image--tree,
html[data-light="night"] .garden-view-image--tree-bird { background-image: url("./assets/garden-tree-seated-night-v3.png"); }
html[data-light="night"] .garden-view-image--path { background-image: url("./assets/garden-path-lantern-night-v3.png"); }
html[data-light="night"] .garden-view-image--water { background-image: url("./assets/garden-water-night-v3.png"); }

.garden-3d-root::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  right: -4%;
  bottom: -2%;
  width: 57%;
  height: 43%;
  pointer-events: none;
  background:
    repeating-linear-gradient(176deg, transparent 0 12px, rgba(224, 236, 228, .12) 13px, transparent 15px 27px),
    radial-gradient(ellipse at 42% 42%, rgba(218, 231, 224, .09), transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at 58% 56%, #000 8%, rgba(0,0,0,.78) 42%, transparent 78%);
  mask-image: radial-gradient(ellipse at 58% 56%, #000 8%, rgba(0,0,0,.78) 42%, transparent 78%);
  mix-blend-mode: soft-light;
  opacity: .55;
  transform: translate3d(0, 0, 0);
  animation: garden-water-breathe 11s ease-in-out infinite alternate;
}

@keyframes garden-water-breathe {
  0% { transform: translate3d(-1.2%, .3%, 0) scaleX(.985); filter: blur(.2px); }
  100% { transform: translate3d(1.5%, -.2%, 0) scaleX(1.025); filter: blur(.65px); }
}

.garden-3d-vignette { z-index: 3; }

.garden-3d-root[data-place="tree"]::before { transform: scale(1.045) translate3d(calc(2.8% + var(--garden-parallax-x)), calc(.4% + var(--garden-parallax-y)), 0); }
.garden-3d-root[data-place="overview"]::before { transform: scale(1.015) translate3d(var(--garden-parallax-x), var(--garden-parallax-y), 0); }
.garden-3d-root[data-place="path"]::before { transform: scale(1.17) translate3d(calc(-.5% + var(--garden-parallax-x)), calc(-3.6% + var(--garden-parallax-y)), 0); }
.garden-3d-root[data-place="water"]::before { transform: scale(1.145) translate3d(calc(-8.5% + var(--garden-parallax-x)), calc(-1.2% + var(--garden-parallax-y)), 0); }
html[data-light="night"] .garden-3d-root::before { filter: brightness(.38) saturate(.72) hue-rotate(8deg) contrast(1.05); }

#garden-3d-canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; cursor: default; }

.garden-touch-ripple {
  position: fixed;
  z-index: 2;
  width: 18px;
  height: 7px;
  margin: -3.5px 0 0 -9px;
  border: 1px solid rgba(225, 238, 233, .62);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(210, 232, 226, .16);
  animation: garden-touch-ripple 2300ms cubic-bezier(.18,.62,.26,1) forwards;
}

.garden-touch-ripple::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(221, 235, 230, .38);
  border-radius: inherit;
  animation: garden-touch-ripple-inner 2300ms 150ms cubic-bezier(.18,.62,.26,1) forwards;
}

@keyframes garden-touch-ripple {
  0% { opacity: 0; transform: scale(.3); }
  12% { opacity: .78; }
  100% { opacity: 0; transform: scale(12, 8.2); }
}

@keyframes garden-touch-ripple-inner {
  0% { opacity: 0; transform: scale(.45); }
  16% { opacity: .58; }
  100% { opacity: 0; transform: scale(8.3, 5.7); }
}

.garden-drifting-seed {
  position: fixed;
  z-index: 2;
  width: 2px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 10%;
  background: linear-gradient(90deg, transparent, rgba(139, 127, 104, .76), transparent);
  filter: drop-shadow(0 0 1px rgba(244, 241, 224, .2));
  animation: garden-seed-drift var(--seed-duration) var(--seed-delay) cubic-bezier(.22,.54,.36,1) forwards;
}

.garden-drifting-seed::before,
.garden-drifting-seed::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 11px;
  height: 5px;
  margin-left: -5.5px;
  border-top: 1px solid rgba(246, 245, 231, .76);
  border-radius: 50%;
  transform: rotate(18deg);
}

.garden-drifting-seed::after {
  transform: rotate(-18deg);
  border-top-color: rgba(236, 238, 224, .6);
}

@keyframes garden-seed-drift {
  0% { opacity: 0; transform: translate3d(0,0,0) rotate(-8deg) scale(var(--seed-scale)); }
  13% { opacity: .78; }
  31% { opacity: .88; transform: translate3d(var(--seed-wander), -7vh, 0) rotate(16deg) scale(var(--seed-scale)); }
  58% { opacity: .72; transform: translate3d(calc(var(--seed-dx) * .55), calc(var(--seed-dy) * .48), 0) rotate(-9deg) scale(var(--seed-scale)); }
  100% { opacity: 0; transform: translate3d(var(--seed-dx), var(--seed-dy), 0) rotate(var(--seed-rotate)) scale(calc(var(--seed-scale) * .86)); }
}

.garden-3d-vignette {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,13,11,.18), transparent 22%, transparent 61%, rgba(5,11,9,.5)),
    radial-gradient(ellipse at 54% 44%, transparent 48%, rgba(5,12,10,.3));
}

html[data-light="day"] .garden-3d-vignette {
  background:
    linear-gradient(180deg, rgba(18,26,22,.09), transparent 25%, transparent 62%, rgba(7,13,10,.42)),
    radial-gradient(ellipse at 56% 42%, transparent 54%, rgba(15,24,19,.2));
}

.garden-3d-loading {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  color: rgba(239,237,221,.7);
  background: #17241f;
  letter-spacing: .22em;
  font-size: 12px;
  transition: opacity 900ms ease;
}

.garden-3d-root.is-ready .garden-3d-loading { opacity: 0; }
.garden-3d-loading-mark { width: 34px; height: 34px; border: 1px solid rgba(225,217,183,.18); border-top-color: rgba(225,217,183,.76); border-radius: 50%; animation: garden-loading 2.4s linear infinite; }
@keyframes garden-loading { to { transform: rotate(360deg); } }

body[data-view="hover"] .ambient-scene,
body[data-view="garden"] .ambient-scene { opacity: 0; }

#app { position: relative; z-index: 2; }
body.garden-3d-is-ready .garden-photo-fallback { display: none !important; }

.hover-view,
.garden-view { background: transparent !important; pointer-events: none; }

.hover-view .hover-center,
.hover-view .garden-place-nav,
.hover-view .place-whisper,
.hover-view .stone-memory-whisper,
.hover-view .finish-hover,
.hover-view .exit-link,
.hover-view .garden-memory-card,
.garden-view .garden-heading,
.garden-view .garden-list,
.garden-view .garden-actions { pointer-events: auto; }

.hover-center { z-index: 8 !important; text-shadow: 0 2px 18px rgba(4,10,8,.78); }
.hover-intro { width: min(620px, calc(100vw - 48px)); margin-inline: auto; padding: 34px 30px 38px; border-radius: 50%; background: radial-gradient(ellipse, rgba(7,15,12,.38), rgba(7,15,12,.14) 48%, transparent 72%); }
.hover-intro h2 { color: rgba(247,245,231,.98) !important; text-shadow: 0 3px 22px rgba(2,8,6,.9); }
.hover-intro .eyebrow,
.hover-invitation { color: rgba(238,236,218,.84) !important; }
html[data-light="day"] .hover-intro h2 { color: #fbf8ea !important; }
html[data-light="day"] .hover-intro .eyebrow,
html[data-light="day"] .hover-invitation { color: rgba(255,252,236,.9) !important; }

.garden-place-nav {
  z-index: 12 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 34px !important;
  width: auto !important;
  padding: 7px !important;
  gap: 4px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(239,237,218,.18);
  border-radius: 999px;
  background: rgba(7,15,12,.55);
  box-shadow: 0 12px 40px rgba(2,8,6,.2), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(18px) saturate(.85);
  opacity: 1 !important;
}

.garden-place-nav .place-path-line { display: none; }
.place-link { min-width: 100px; padding: 10px 18px 9px !important; border-radius: 999px; color: rgba(235,235,219,.68) !important; text-shadow: 0 1px 12px rgba(0,0,0,.75); transition: color 400ms ease, background 400ms ease, transform 400ms ease !important; }
.place-link span { font-size: 14px !important; letter-spacing: .2em; }
.place-link small { margin-top: 3px; color: inherit !important; opacity: .68; }
.place-link.is-current { color: rgba(255,251,231,.98) !important; background: rgba(210,204,169,.17); box-shadow: inset 0 0 0 1px rgba(232,225,193,.14); }
.place-link:hover { color: #fffbea !important; transform: translateY(-1px); }

.place-whisper { z-index: 11 !important; bottom: 112px !important; color: rgba(247,243,219,.86) !important; text-shadow: 0 2px 16px rgba(2,7,5,.92); }
.sound-invitation { padding: 10px 18px !important; border: 1px solid rgba(237,231,205,.2) !important; border-radius: 999px; color: rgba(247,243,222,.88) !important; background: rgba(7,14,11,.35) !important; box-shadow: 0 8px 30px rgba(2,8,6,.14); backdrop-filter: blur(12px); }
.finish-hover,
.exit-link { z-index: 12 !important; color: rgba(247,243,222,.8) !important; text-shadow: 0 2px 14px rgba(0,0,0,.9); }
.hover-view > .finish-hover { left: auto !important; right: clamp(96px, 8vw, 150px) !important; bottom: 42px !important; width: auto !important; transform: none !important; }
.hover-view > .finish-hover:not(.is-visible) { pointer-events: none !important; }
.hover-view > .exit-link,
.hover-view.is-reflecting > .exit-link,
.hover-view.is-choosing > .exit-link { left: auto !important; right: clamp(24px, 4vw, 72px) !important; bottom: 42px !important; width: auto !important; transform: none !important; }
.remembered-stone { display: none !important; }

.garden-3d-root > .garden-stones {
  position: fixed;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.garden-3d-root > .garden-stones .remembered-stone {
  display: block !important;
  position: fixed;
  width: 44px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  cursor: pointer;
  transform: translate(-50%, -50%) !important;
}

.garden-3d-root > .garden-stones .remembered-stone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 6px;
  border-top: 1px solid rgba(221, 235, 228, .42);
  border-radius: 50%;
  opacity: .12;
  transform: translate(-50%, -50%);
  animation: remembered-water-glint 8s ease-in-out infinite;
}

.garden-3d-root > .garden-stones .remembered-stone:nth-child(2)::after { animation-delay: -2.7s; }
.garden-3d-root > .garden-stones .remembered-stone:nth-child(3)::after { animation-delay: -5.1s; }
.garden-3d-root > .garden-stones .remembered-stone:nth-child(4)::after { animation-delay: -1.3s; }
.garden-3d-root > .garden-stones .remembered-stone:nth-child(5)::after { animation-delay: -6.4s; }
.garden-3d-root > .garden-stones .remembered-stone:nth-child(n+6) { display: none !important; }

.garden-3d-root > .garden-stones .remembered-stone:hover::after,
.garden-3d-root > .garden-stones .remembered-stone:focus-visible::after {
  width: 34px;
  height: 12px;
  opacity: .66;
}

@keyframes remembered-water-glint {
  0%, 72%, 100% { opacity: .08; transform: translate(-50%, -50%) scale(.8); }
  80% { opacity: .34; transform: translate(-50%, -50%) scale(1.15); }
  88% { opacity: .12; transform: translate(-50%, -50%) scale(1.35); }
}

.garden-3d-root[data-place="tree"] .remembered-stone:nth-child(1) { left: 55%; top: 66%; }
.garden-3d-root[data-place="tree"] .remembered-stone:nth-child(2) { left: 60%; top: 68%; }
.garden-3d-root[data-place="tree"] .remembered-stone:nth-child(3) { left: 64%; top: 65%; }
.garden-3d-root[data-place="tree"] .remembered-stone:nth-child(4) { left: 68%; top: 70%; }
.garden-3d-root[data-place="tree"] .remembered-stone:nth-child(5) { left: 72%; top: 67%; }
.garden-3d-root[data-place="path"] .remembered-stone:nth-child(1) { left: 58%; top: 61%; }
.garden-3d-root[data-place="path"] .remembered-stone:nth-child(2) { left: 62%; top: 64%; }
.garden-3d-root[data-place="path"] .remembered-stone:nth-child(3) { left: 66%; top: 60%; }
.garden-3d-root[data-place="path"] .remembered-stone:nth-child(4) { left: 70%; top: 66%; }
.garden-3d-root[data-place="path"] .remembered-stone:nth-child(5) { left: 74%; top: 62%; }
.garden-3d-root[data-place="water"] .remembered-stone:nth-child(1) { left: 18%; top: 73%; }
.garden-3d-root[data-place="water"] .remembered-stone:nth-child(2) { left: 23%; top: 68%; }
.garden-3d-root[data-place="water"] .remembered-stone:nth-child(3) { left: 27%; top: 76%; }
.garden-3d-root[data-place="water"] .remembered-stone:nth-child(4) { left: 31%; top: 70%; }
.garden-3d-root[data-place="water"] .remembered-stone:nth-child(5) { left: 35%; top: 79%; }

.garden-memory-card {
  position: fixed;
  z-index: 28;
  right: clamp(24px, 6vw, 92px);
  top: 50%;
  width: min(360px, calc(100vw - 48px));
  padding: 30px 32px;
  color: #eeecda;
  border: 1px solid rgba(229,220,187,.18);
  border-radius: 4px 26px 4px 26px;
  background: linear-gradient(145deg, rgba(30,44,37,.91), rgba(13,25,21,.84));
  box-shadow: 0 28px 80px rgba(2,8,6,.4), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(24px) saturate(.78);
  opacity: 0;
  transform: translateY(-45%) translateX(18px);
  transition: opacity 360ms ease, transform 500ms cubic-bezier(.2,.8,.2,1);
}

.garden-memory-card.is-open { opacity: 1; transform: translateY(-50%) translateX(0); }
.memory-card-close { position: absolute; top: 14px; right: 17px; color: rgba(238,236,217,.6); font-size: 20px; }
.memory-card-kicker { margin: 0 0 18px; color: #bdb38d; font-size: 11px; letter-spacing: .28em; }
.garden-memory-card time { display: block; color: rgba(248,245,228,.96); font-family: var(--serif); font-size: 22px; letter-spacing: .04em; }
.memory-card-place { margin: 10px 0 22px; color: rgba(213,207,180,.74); font-size: 12px; letter-spacing: .14em; }
.memory-card-copy { margin: 0; padding-top: 20px; border-top: 1px solid rgba(226,218,188,.12); color: rgba(239,236,218,.8); line-height: 1.9; }

.garden-view { display: block !important; min-height: 100vh; padding-top: 132px !important; }
.garden-heading { max-width: 530px !important; padding: 28px 32px 30px; border-radius: 3px 28px 3px 28px; background: linear-gradient(120deg, rgba(8,17,14,.52), rgba(8,17,14,.12) 78%, transparent); text-shadow: 0 2px 18px rgba(2,8,6,.8); backdrop-filter: blur(4px); }
.garden-heading h2 { color: rgba(248,245,228,.96); }
.garden-heading > p:last-child { color: rgba(239,236,217,.78) !important; }

.garden-list {
  position: fixed;
  z-index: 6;
  top: 168px;
  right: clamp(24px, 6vw, 92px);
  width: min(380px, 34vw);
  max-height: calc(100vh - 280px);
  display: flex !important;
  flex-direction: column;
  gap: 10px !important;
  overflow: auto;
  padding: 0 8px 18px 0;
  background: none !important;
  box-shadow: none !important;
  scrollbar-width: thin;
}

.garden-record-card { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border: 1px solid rgba(229,220,187,.14); border-radius: 3px 18px 3px 18px; background: rgba(10,22,18,.66); box-shadow: 0 14px 38px rgba(2,8,6,.18); backdrop-filter: blur(18px) saturate(.8); transition: background 300ms ease, transform 300ms ease; }
.garden-record-card:hover { background: rgba(18,34,28,.82); transform: translateX(-3px); }
.record-stone { width: 31px; height: 21px; border: 0; border-radius: 48% 55% 44% 58%; background: radial-gradient(ellipse at 32% 23%, rgba(192,213,221,.22), transparent 25%), linear-gradient(145deg, #718d98, #456371 65%, #304c59); box-shadow: inset -4px -5px 9px rgba(12,30,39,.32), 0 6px 12px rgba(2,8,11,.28); transform: rotate(-5deg); cursor: pointer; }
.record-details { display: grid; gap: 4px; text-align: left; color: inherit; }
.record-details time { color: rgba(245,241,220,.9); font-family: var(--serif); font-size: 14px; }
.record-place { color: rgba(199,194,168,.72); font-size: 11px; letter-spacing: .1em; }
.record-care { color: rgba(235,231,210,.66); font-size: 12px; }
.garden-record-card .delete-trace { color: rgba(230,224,201,.4); font-size: 11px; writing-mode: vertical-rl; }

.garden-actions { position: fixed; z-index: 9; left: clamp(24px, 7vw, 110px); bottom: 42px; }

@media (max-width: 820px) {
  .garden-place-nav { bottom: 22px !important; }
  .place-link { min-width: 82px; padding-inline: 12px !important; }
  .place-link small { display: none; }
  .garden-list { top: auto; right: 20px; left: 20px; bottom: 100px; width: auto; max-height: 34vh; }
  .garden-heading { max-width: calc(100vw - 40px) !important; padding: 22px 24px; }
  .garden-actions { left: 24px; bottom: 28px; }
  .garden-memory-card { right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .garden-3d-root,
  .garden-memory-card { transition-duration: 1ms !important; }
  .garden-3d-loading-mark { animation: none; }
}

/* V0.4 · 真正连续的园境、浅滩记忆与同场卡片 */
.view[hidden],
.garden-view[hidden],
.hover-view[hidden] {
  display: none !important;
}

body[data-view="hover"],
body[data-view="garden"] {
  height: 100vh;
  overflow: hidden;
}

/* V0.5 · 园门：从现实跨进属于自己的园 */
body[data-view="entry"] {
  height: 100vh;
  overflow: hidden;
  background: #151b17;
}

body[data-view="entry"] .ambient-scene {
  opacity: 0;
}

body[data-view="entry"] .quiet-nav .nav-link {
  display: none;
}

.entry-view {
  --gate-stage-width: max(100vw, 177.778vh);
  --gate-stage-height: max(100vh, 56.25vw);
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  align-items: stretch;
}

.entry-view::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 15, 12, .06), transparent 46%, rgba(8, 12, 10, .1)),
    linear-gradient(180deg, rgba(4, 8, 6, .16), transparent 22%, transparent 72%, rgba(4, 8, 6, .2));
}

.entry-cloud-drift {
  position: absolute;
  z-index: 1;
  top: 6%;
  left: 10%;
  width: 29%;
  height: 26%;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 36% 49%, rgba(13, 25, 38, .48), rgba(15, 28, 42, .24) 34%, transparent 70%),
    radial-gradient(ellipse at 69% 55%, rgba(11, 23, 35, .36), transparent 67%);
  filter: blur(13px);
}

html[data-light="night"] .entry-cloud-drift {
  opacity: .72;
  animation: entry-cloud-cross 46s ease-in-out infinite alternate;
}

@keyframes entry-cloud-cross {
  0%, 18% { transform: translate3d(-28%, -4%, 0) scale(.9); opacity: .16; }
  48%, 62% { transform: translate3d(14%, 2%, 0) scale(1.05); opacity: .72; }
  100% { transform: translate3d(72%, -1%, 0) scale(.94); opacity: .22; }
}

.gate-world {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: var(--gate-stage-width);
  height: var(--gate-stage-height);
  overflow: hidden;
  transform: translate(-50%, -50%) scale(1.001);
  transform-origin: 69% 58%;
  transition:
    transform 2500ms cubic-bezier(.2, .76, .16, 1),
    opacity 900ms ease 1450ms,
    filter 1500ms ease;
  will-change: transform, opacity;
}

.gate-mother {
  position: absolute;
  inset: 0;
  background: url("./assets/yinyuan-gate-threshold-v1.png") center / 100% 100% no-repeat;
  filter: saturate(.83) contrast(.98) brightness(.93);
  transform: scale(1.006);
}

html[data-light="night"] .gate-mother {
  filter: brightness(.42) saturate(.66) contrast(1.06) hue-rotate(5deg);
}

.gate-mother::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 68% 54%, rgba(219, 228, 207, .06), transparent 26%),
    linear-gradient(102deg, rgba(10, 18, 13, .05), transparent 28% 72%, rgba(8, 14, 11, .13));
}

.gate-leaf-shadow {
  position: absolute;
  width: 37%;
  height: 73%;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-linear-gradient(101deg, transparent 0 24px, rgba(23, 37, 27, .055) 25px 28px, transparent 30px 51px);
  filter: blur(9px);
  mix-blend-mode: multiply;
  opacity: .68;
  animation: gate-shadow-breathe 14s ease-in-out infinite alternate;
}

.gate-leaf-shadow-one {
  left: 2%;
  top: 16%;
  transform: rotate(-13deg);
}

.gate-leaf-shadow-two {
  left: 29%;
  top: 31%;
  width: 23%;
  height: 45%;
  opacity: .35;
  animation-delay: -7s;
}

.gate-threshold-light {
  position: absolute;
  left: 54.2%;
  top: 26.8%;
  width: 29.8%;
  height: 63.8%;
  pointer-events: none;
  background: radial-gradient(ellipse at 54% 66%, rgba(226, 214, 169, .1), transparent 59%);
  opacity: .56;
  animation: threshold-light 9s ease-in-out infinite alternate;
}

.gate-copy {
  position: absolute;
  z-index: 4;
  left: clamp(54px, 8vw, 142px);
  top: 45%;
  width: min(520px, 38vw);
  padding: 0;
  color: #263029;
  transform: translateY(-50%);
  text-shadow: 0 1px rgba(255, 255, 255, .28);
  transition: opacity 600ms ease, transform 900ms cubic-bezier(.2, .75, .2, 1);
}

.gate-copy > .eyebrow {
  margin: 0 0 22px;
  color: rgba(45, 56, 47, .62);
  transform: none;
  font-size: 11px;
  letter-spacing: .26em;
}

.gate-copy h1 {
  max-width: none;
  margin: 0 0 25px;
  color: #202a23;
  font-size: clamp(43px, 4.3vw, 72px);
  line-height: 1.22;
  letter-spacing: .01em;
  white-space: normal;
}

.gate-copy .lead {
  margin: 0;
  color: rgba(37, 48, 40, .64);
  font-family: var(--serif);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 2;
  letter-spacing: .035em;
}

html[data-light="night"] .gate-copy {
  color: rgba(228, 226, 210, .88);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .32);
}

html[data-light="night"] .gate-copy h1 {
  color: rgba(239, 235, 215, .92);
}

html[data-light="night"] .gate-copy > .eyebrow,
html[data-light="night"] .gate-copy .lead {
  color: rgba(224, 221, 203, .62);
}

.gate-door {
  position: absolute;
  z-index: 5;
  left: calc(50% + var(--gate-stage-width) * .0338);
  top: calc(50% - var(--gate-stage-height) * .241);
  width: calc(var(--gate-stage-width) * .3115);
  height: calc(var(--gate-stage-height) * .655);
  padding: 0;
  border: 0;
  color: rgba(239, 232, 206, .86);
  background: transparent;
  cursor: pointer;
  perspective: 1600px;
  filter: drop-shadow(0 18px 24px rgba(4, 8, 6, .25));
}

.gate-door:focus-visible {
  outline-color: rgba(82, 91, 72, .92);
  outline-offset: 8px;
}

.gate-door-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.3%;
  overflow: hidden;
  border: 1px solid rgba(164, 153, 120, .22);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .04), transparent 9% 88%, rgba(0, 0, 0, .24)),
    repeating-linear-gradient(90deg, #18231d 0 2.8%, #27342b 3.2% 5.6%, #1d2922 6.1% 8.4%),
    linear-gradient(180deg, #2f3a30, #111a16);
  box-shadow:
    inset 0 0 0 7px rgba(8, 14, 11, .32),
    inset 0 0 0 9px rgba(163, 151, 115, .11),
    inset 0 -42px 60px rgba(0, 0, 0, .26);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 1850ms cubic-bezier(.16, .78, .14, 1), filter 700ms ease;
}

.gate-door-left {
  left: 0;
  transform-origin: left center;
}

.gate-door-right {
  right: 0;
  transform-origin: right center;
  background:
    linear-gradient(270deg, rgba(255, 255, 255, .035), transparent 10% 89%, rgba(0, 0, 0, .24)),
    repeating-linear-gradient(90deg, #18231d 0 2.8%, #27342b 3.2% 5.6%, #1d2922 6.1% 8.4%),
    linear-gradient(180deg, #2f3a30, #111a16);
}

.gate-door-leaf::before,
.gate-door-leaf::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(194, 182, 145, .13);
  box-shadow: 0 1px rgba(0, 0, 0, .35);
}

.gate-door-leaf::before { top: 25%; }
.gate-door-leaf::after { bottom: 24%; }

.gate-door-leaf i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8d8262;
  box-shadow: inset -1px -1px 2px rgba(20, 21, 17, .7), 0 1px 3px rgba(0, 0, 0, .35);
  opacity: .55;
}

.gate-door-leaf i:nth-child(1) { left: 13%; top: 12%; }
.gate-door-leaf i:nth-child(2) { right: 13%; top: 12%; }
.gate-door-leaf i:nth-child(3) { left: 13%; bottom: 11%; }
.gate-door-leaf i:nth-child(4) { right: 13%; bottom: 11%; }

.gate-door-seam {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 3%;
  bottom: 3%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(224, 217, 183, .48) 31%, rgba(238, 224, 172, .72) 61%, transparent);
  box-shadow: 0 0 13px rgba(229, 214, 165, .28);
  opacity: .72;
  transform: translateX(-50%);
  animation: gate-seam-breathe 4.8s ease-in-out infinite alternate;
  transition: opacity 500ms ease;
}

.gate-enter-cue {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 12%;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: rgba(238, 231, 205, .8);
  font-size: 11px;
  letter-spacing: .22em;
  text-indent: .22em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .72);
  transform: translateX(-50%);
  transition: opacity 400ms ease, transform 600ms ease;
}

.gate-enter-line {
  width: 1px;
  height: 32px;
  overflow: hidden;
  background: rgba(233, 226, 201, .2);
}

.gate-enter-line::after {
  content: "";
  display: block;
  width: 1px;
  height: 14px;
  background: rgba(246, 239, 213, .82);
  animation: gate-cue 2.8s ease-in-out infinite;
}

.gate-door:hover .gate-door-leaf {
  filter: brightness(1.08);
}

.gate-door:hover .gate-enter-cue {
  transform: translateX(-50%) translateY(-4px);
}

.entry-view .entry-footnote {
  z-index: 4;
  left: clamp(54px, 8vw, 142px);
  right: auto;
  bottom: clamp(34px, 6vh, 68px);
  color: rgba(34, 45, 37, .46);
  font-size: 11px;
  letter-spacing: .13em;
}

.entry-view .entry-footnote .line {
  width: 42px;
  background: rgba(34, 45, 37, .24);
}

html[data-light="night"] .entry-view .entry-footnote {
  color: rgba(226, 222, 201, .46);
}

html[data-light="night"] .entry-view .entry-footnote .line {
  background: rgba(226, 222, 201, .22);
}

.entry-view.is-entering {
  pointer-events: none;
}

.entry-view.is-entering .gate-copy {
  opacity: 0;
  transform: translate(-22px, -50%);
}

.entry-view.is-entering .gate-world {
  opacity: 0;
  filter: blur(1px);
  transform: translate(-50%, -50%) scale(1.16);
}

.entry-view.is-entering .gate-door-left {
  transform: rotateY(-112deg);
}

.entry-view.is-entering .gate-door-right {
  transform: rotateY(112deg);
}

.entry-view.is-entering .gate-door-seam,
.entry-view.is-entering .gate-enter-cue {
  opacity: 0;
}

.entry-view.is-entering .gate-door-leaf {
  transition-delay: 80ms;
}

.entry-view.is-entering .gate-door {
  filter: drop-shadow(0 12px 30px rgba(3, 8, 5, .08));
}

body.is-entering .garden-3d-root {
  opacity: 1;
  visibility: visible;
}

@keyframes gate-shadow-breathe {
  from { transform: translate3d(-1.2%, .2%, 0) rotate(-13deg) scale(.98); opacity: .46; }
  to { transform: translate3d(2%, -1%, 0) rotate(-10deg) scale(1.04); opacity: .72; }
}

@keyframes threshold-light {
  from { opacity: .4; filter: brightness(.92); }
  to { opacity: .72; filter: brightness(1.08); }
}

@keyframes gate-seam-breathe {
  from { opacity: .38; }
  to { opacity: .86; }
}

@keyframes gate-cue {
  0% { transform: translateY(-100%); opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(34px); opacity: 0; }
}

@media (max-width: 900px) {
  .gate-copy {
    left: 7vw;
    top: 46%;
    width: 41vw;
  }

  .gate-copy h1 {
    font-size: clamp(38px, 5.5vw, 52px);
  }

  .gate-copy .lead {
    font-size: 14px;
  }
}

@media (max-width: 620px) {
  .entry-view {
    --gate-stage-width: 177.778vh;
    --gate-stage-height: 100vh;
  }

  .gate-world {
    left: calc(50% - 19vh);
  }

  .gate-door {
    left: 16vw;
    top: 25.8vh;
    width: 74vw;
    height: 65.5vh;
  }

  .gate-copy {
    left: 24px;
    top: 124px;
    width: calc(100vw - 48px);
    color: rgba(239, 235, 216, .94);
    transform: none;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
  }

  .gate-copy h1 {
    margin-bottom: 12px;
    color: rgba(247, 243, 224, .96);
    font-size: clamp(34px, 11vw, 48px);
    line-height: 1.16;
  }

  .gate-copy > .eyebrow,
  .gate-copy .lead {
    color: rgba(238, 233, 213, .72);
  }

  .gate-copy > .eyebrow { margin-bottom: 13px; }
  .gate-copy .lead { display: none; }

  .entry-view .entry-footnote {
    display: none;
  }

  .entry-view.is-entering .gate-copy {
    transform: translateY(-12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gate-leaf-shadow,
  .gate-threshold-light,
  .gate-door-seam,
  .gate-enter-line::after {
    animation: none !important;
  }

  .gate-world,
  .gate-door-leaf,
  .gate-copy {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

.garden-3d-root::before {
  inset: 0;
  background-position: center;
  background-size: cover;
  transform: none !important;
  transition: filter 1600ms ease;
}

.garden-3d-root[data-place="tree"]::before,
.garden-3d-root[data-place="path"]::before,
.garden-3d-root[data-place="water"]::before {
  transform: none !important;
}

#garden-3d-canvas {
  cursor: crosshair;
}

.hover-view .hover-quiet-actions,
.hover-view .place-writing-card,
.garden-view .garden-memory-card {
  pointer-events: auto;
}

.garden-place-nav {
  bottom: 82px !important;
  background: linear-gradient(180deg, rgba(13, 24, 20, .64), rgba(5, 13, 10, .76));
  border-color: rgba(239, 235, 211, .25);
  box-shadow: 0 14px 48px rgba(0, 7, 5, .28), inset 0 1px rgba(255, 255, 255, .07);
}

.place-link {
  min-width: 112px;
  color: rgba(247, 244, 226, .8) !important;
}

.place-link small {
  opacity: .76;
}

.place-link.is-current {
  color: #fffbea !important;
  background: rgba(218, 208, 167, .2);
}

.place-whisper {
  bottom: 158px !important;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(5, 13, 10, .26);
  backdrop-filter: blur(8px);
  color: rgba(255, 251, 232, .94) !important;
  font-size: 13px !important;
  letter-spacing: .12em;
}

.stone-memory-whisper {
  z-index: 18 !important;
  right: clamp(26px, 7vw, 112px) !important;
  bottom: 128px !important;
  width: min(340px, calc(100vw - 52px));
  padding: 14px 18px;
  border: 1px solid rgba(230, 225, 202, .17);
  border-radius: 3px 18px 3px 18px;
  color: rgba(247, 243, 222, .86) !important;
  background: rgba(7, 17, 13, .58);
  box-shadow: 0 18px 46px rgba(0, 8, 5, .24);
  backdrop-filter: blur(15px);
}

.hover-view > .finish-hover,
.hover-view > .exit-link {
  display: none !important;
}

.hover-quiet-actions {
  position: fixed;
  z-index: 16;
  left: 50%;
  bottom: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  transform: translateX(-50%);
  color: rgba(247, 243, 222, .69);
  white-space: nowrap;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .9);
}

.hover-quiet-actions > span {
  width: 1px;
  height: 13px;
  background: rgba(235, 229, 204, .28);
}

.hover-quiet-actions button {
  width: auto !important;
  min-height: 32px;
  margin: 0 !important;
  padding: 6px 4px !important;
  color: inherit !important;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .14em;
  opacity: .78;
  transform: none !important;
  position: static !important;
}

.hover-quiet-actions .finish-hover {
  display: inline-flex !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.3s ease;
}

.hover-quiet-actions .finish-hover.is-visible {
  opacity: .78;
  pointer-events: auto;
}

.hover-quiet-actions button:hover,
.hover-quiet-actions button:focus-visible {
  color: #fffbea !important;
  opacity: 1;
}

.place-writing-card {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 92px;
  width: min(500px, calc(100vw - 42px));
  padding: 28px 30px 24px;
  border: 1px solid rgba(230, 223, 192, .2);
  border-radius: 4px 28px 4px 28px;
  color: rgba(244, 241, 221, .88);
  background:
    linear-gradient(140deg, rgba(35, 49, 41, .92), rgba(12, 25, 20, .88)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 4px);
  box-shadow: 0 28px 90px rgba(0, 7, 4, .42), inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(24px) saturate(.8);
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity 320ms ease, transform 520ms cubic-bezier(.2,.8,.2,1);
}

.place-writing-card.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
}

.place-writing-close {
  position: absolute;
  top: 13px;
  right: 16px;
  color: rgba(239, 235, 213, .58);
  font-size: 20px;
}

.place-writing-card h3 {
  margin: 0 0 10px;
  color: rgba(251, 247, 227, .96);
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 400;
}

.place-writing-card > p:not(.memory-card-kicker) {
  margin: 0 0 22px;
  color: rgba(226, 222, 201, .66);
  font-size: 12px;
  line-height: 1.75;
}

.place-writing-card textarea {
  width: 100%;
  min-height: 66px;
  resize: none;
  border: 0;
  border-bottom: 1px solid rgba(232, 225, 197, .2);
  border-radius: 0;
  outline: none;
  color: rgba(250, 246, 225, .92);
  background: transparent;
  font: 16px/1.8 var(--serif);
}

.place-writing-card textarea::placeholder {
  color: rgba(225, 220, 199, .34);
}

.place-writing-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
}

.garden-memory-card {
  --stone-anchor-x: 66vw;
  --stone-anchor-y: 52vh;
  right: auto;
  left: var(--memory-card-left, clamp(24px, calc(var(--stone-anchor-x) + 34px), calc(100vw - 390px)));
  top: clamp(170px, var(--stone-anchor-y), calc(100vh - 230px));
  width: min(345px, calc(100vw - 48px));
  padding: 28px 30px 24px;
  border-radius: 3px 24px 5px 20px;
  background:
    linear-gradient(145deg, rgba(38, 52, 44, .92), rgba(14, 27, 22, .86)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012), rgba(255,255,255,.012) 1px, transparent 1px, transparent 5px);
  transform: translateY(-43%) translateX(14px) scale(.985);
}

.garden-memory-card::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 50%;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 216, 184, .38));
}

.garden-memory-card[data-anchor-side="right"]::before {
  left: auto;
  right: -26px;
  transform: scaleX(-1);
}

.garden-memory-card.is-open {
  transform: translateY(-50%) translateX(0) scale(1);
}

.memory-card-kicker {
  margin-bottom: 13px;
}

.garden-memory-card time {
  font-size: 20px;
}

.memory-card-place {
  margin: 8px 0 17px;
}

.memory-card-note {
  margin: 0 0 18px;
  padding: 14px 0 14px 17px;
  border-left: 1px solid rgba(219, 210, 174, .28);
  color: rgba(249, 245, 224, .9);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.8;
}

.memory-card-copy {
  padding-top: 15px;
}

.memory-card-sound {
  margin: 8px 0 0;
  color: rgba(228, 224, 204, .61);
  font-size: 12px;
}

.memory-card-more {
  margin-top: 19px;
  color: rgba(228, 222, 200, .44);
  font-size: 11px;
}

.memory-card-more summary {
  width: max-content;
  cursor: pointer;
  list-style: none;
}

.memory-card-more button {
  display: none;
  margin-top: 10px;
  color: rgba(229, 219, 199, .5);
  font-size: 11px;
}

.garden-view {
  position: fixed !important;
  inset: 0;
  min-height: 0 !important;
  height: 100vh;
  padding: 0 !important;
  overflow: hidden;
}

.garden-heading {
  position: fixed;
  z-index: 8;
  top: 128px;
  left: clamp(28px, 7vw, 112px);
  max-width: 465px !important;
  padding: 25px 29px 27px;
}

.garden-heading h2 {
  margin-bottom: 12px;
  font-size: clamp(34px, 4vw, 58px);
}

.garden-list {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.garden-actions {
  left: clamp(28px, 7vw, 112px);
  bottom: 35px;
}

@media (max-width: 760px) {
  .garden-place-nav { bottom: 78px !important; }
  .place-link { min-width: 80px; }
  .place-whisper { bottom: 146px !important; width: calc(100vw - 42px); text-align: center; }
  .hover-quiet-actions { bottom: 24px; gap: 10px; width: calc(100vw - 24px); }
  .hover-quiet-actions button { font-size: 11px; letter-spacing: .08em; }
  .garden-heading { top: 108px; left: 20px; right: 20px; max-width: none !important; }
  .garden-memory-card { left: 22px; right: 22px; top: auto; bottom: 92px; width: auto; transform: translateY(12px); }
  .garden-memory-card::before { display: none; }
  .garden-memory-card.is-open { transform: translateY(0); }
}

/* V0.6 · 三重空间：园门 / 悬停时刻 / 我的园 */

/* 园门：保留远山与天光，让入口比园中更开阔、更有距离。 */
.entry-view::after {
  background:
    linear-gradient(90deg, rgba(8, 16, 14, .60) 0%, rgba(12, 21, 18, .28) 34%, transparent 65%),
    linear-gradient(180deg, rgba(10, 16, 14, .08), transparent 42%, rgba(7, 13, 11, .31));
}

html[data-light="day"] .entry-view::after {
  background:
    linear-gradient(90deg, rgba(17, 27, 23, .53) 0%, rgba(23, 32, 28, .23) 35%, transparent 67%),
    linear-gradient(180deg, rgba(20, 27, 23, .04), transparent 42%, rgba(12, 19, 16, .22));
}

.entry-landscape,
html[data-light="day"] .entry-landscape {
  background-position: center 48%;
  filter: saturate(.72) contrast(.88) brightness(.96);
}

.entry-copy--restored {
  width: min(600px, 51vw);
}

.entry-copy--restored > .eyebrow {
  display: block;
  margin-bottom: 24px;
  color: rgba(236, 225, 190, .84);
  font-size: 11px;
  letter-spacing: .24em;
}

.entry-copy--restored > .eyebrow span {
  display: none;
}

.entry-copy--restored h1 {
  margin-bottom: 27px;
  font-size: clamp(43px, 5.1vw, 74px);
  letter-spacing: -.025em;
}

.entry-copy--restored .lead {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 2.05;
}

.entry-actions {
  gap: 12px;
  margin-top: 34px;
}

.entry-action {
  min-height: 56px;
  border-color: rgba(242, 238, 218, .19);
  background: rgba(24, 36, 31, .28);
  box-shadow: none;
  backdrop-filter: blur(9px) saturate(.8);
}

.entry-action--primary {
  min-width: 178px;
  color: rgba(31, 39, 34, .95);
  background: rgba(231, 229, 211, .84);
  box-shadow: 0 12px 34px rgba(5, 10, 8, .12);
}

.entry-action--primary:hover {
  background: rgba(240, 238, 222, .92);
}

.entry-action--primary small {
  font-size: 9px;
  letter-spacing: .08em;
}

.entry-action--secondary {
  color: rgba(244, 240, 222, .76);
  background: rgba(25, 37, 32, .31);
}

.entry-view .entry-footnote {
  right: clamp(28px, 7vw, 110px);
  bottom: 45px;
  color: rgba(246, 240, 217, .66);
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .16em;
  text-shadow: 0 2px 16px rgba(3, 8, 6, .72);
}

.entry-view .entry-footnote .line {
  display: none;
}

/* 日间导航需要始终可读，但不放一块突兀的黑色底板。 */
.site-header {
  text-shadow: 0 1px 13px rgba(5, 11, 8, .72);
}

.brand,
.quiet-nav,
html[data-light="day"] .brand,
html[data-light="day"] .quiet-nav {
  color: rgba(250, 247, 232, .84);
}

.nav-link,
.light-toggle {
  color: rgba(250, 247, 232, .74) !important;
}

.nav-link:hover,
.light-toggle:hover {
  color: rgba(255, 253, 240, .98) !important;
}

/* 悬停时刻：柔和来自低微对比与空气层次，而不是先糊后锐。 */
.garden-view-image,
html[data-light="night"] .garden-view-image {
  filter: saturate(.76) contrast(.88) brightness(.94) blur(.35px);
  transform: scale(1.012);
  transition: opacity 1800ms cubic-bezier(.32,.72,.2,1), filter 1800ms ease;
}

html[data-light="day"] .garden-view-image {
  filter: saturate(.78) contrast(.89) brightness(.98) blur(.35px);
}

.garden-view-image::after {
  opacity: .34;
  filter: blur(2.2px) saturate(.72) contrast(.86);
}

.garden-3d-vignette,
html[data-light="day"] .garden-3d-vignette {
  background:
    linear-gradient(180deg, rgba(7, 14, 11, .12), transparent 25%, transparent 62%, rgba(7, 13, 10, .38)),
    radial-gradient(ellipse at 53% 43%, rgba(229, 232, 218, .035) 0 32%, transparent 58%, rgba(8, 15, 12, .19));
}

.garden-place-nav {
  bottom: 76px !important;
  padding: 5px !important;
  border-color: rgba(239, 235, 211, .13);
  background: linear-gradient(180deg, rgba(32, 45, 39, .40), rgba(13, 25, 20, .48));
  box-shadow: 0 12px 38px rgba(0, 7, 5, .17), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(11px) saturate(.72);
}

.place-link {
  min-width: 108px;
  color: rgba(247, 244, 226, .68) !important;
}

.place-link.is-current {
  color: rgba(255, 252, 236, .96) !important;
  background: rgba(221, 213, 180, .14);
  box-shadow: inset 0 0 0 1px rgba(237, 230, 203, .09);
}

.place-whisper {
  bottom: 146px !important;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  color: rgba(255, 251, 232, .85) !important;
  font-size: 12px !important;
  text-shadow: 0 2px 17px rgba(0, 0, 0, .86);
}

.hover-quiet-actions {
  left: auto;
  right: clamp(28px, 5vw, 84px);
  bottom: 33px;
  gap: 13px;
  transform: none;
  color: rgba(249, 245, 225, .72);
}

.hover-quiet-actions > span {
  display: none;
}

.hover-quiet-actions button {
  padding: 7px 8px !important;
  font-size: 11px;
}

.hover-quiet-actions .finish-hover.is-visible {
  color: rgba(255, 251, 231, .93) !important;
}

.place-writing-card {
  bottom: 82px;
  width: min(470px, calc(100vw - 42px));
  padding: 27px 29px 23px;
  border-color: rgba(233, 226, 199, .14);
  border-radius: 6px 22px 6px 22px;
  background: linear-gradient(145deg, rgba(41, 55, 47, .82), rgba(18, 32, 26, .76));
  box-shadow: 0 24px 76px rgba(0, 7, 4, .31), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(18px) saturate(.74);
}

.hover-reflection {
  width: min(660px, calc(100vw - 48px));
  padding: clamp(36px, 5vw, 56px);
  border: 1px solid rgba(235, 228, 201, .12);
  border-radius: 7px 42px 7px 42px;
  background: linear-gradient(145deg, rgba(35, 49, 41, .63), rgba(14, 27, 22, .47));
  box-shadow: 0 30px 95px rgba(0, 7, 4, .22), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(13px) saturate(.75);
}

.hover-reflection h2 {
  font-size: clamp(31px, 4vw, 49px);
}

/* 我的园：同一世界里的另一处安定视角。 */
.garden-view::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -1.5%;
  pointer-events: none;
  background: url("./assets/yinyuan-gate-mother-day-v1.png") center / cover no-repeat;
  filter: saturate(.68) contrast(.87) brightness(.86) blur(.25px);
  transform: scale(1.02);
}

.garden-view::after {
  content: "";
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 15, 12, .44), transparent 49%),
    linear-gradient(180deg, rgba(6, 13, 10, .11), transparent 36%, rgba(5, 11, 9, .31));
}

html[data-light="night"] .garden-view::before {
  background-image: url("./assets/yinyuan-gate-mother-night-v1.png");
  filter: saturate(.62) contrast(.9) brightness(.72) blur(.3px);
}

body[data-view="garden"] .garden-3d-root {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.garden-view .garden-heading,
.garden-view .garden-actions,
.garden-view .garden-list,
.garden-view .garden-memory-card {
  z-index: 3;
}

.garden-heading {
  top: 132px;
  max-width: 500px !important;
  padding: 30px 33px 31px;
  border: 1px solid rgba(235, 228, 201, .11);
  border-radius: 5px 34px 5px 34px;
  background: linear-gradient(125deg, rgba(18, 31, 25, .62), rgba(19, 31, 26, .28) 78%, rgba(19,31,26,.12));
  box-shadow: 0 22px 70px rgba(0, 8, 5, .18), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(10px) saturate(.76);
}

.garden-heading h2 {
  color: rgba(250, 247, 229, .97);
}

.garden-heading > p:last-child {
  max-width: 385px;
  color: rgba(242, 238, 218, .78) !important;
}

@media (max-width: 760px) {
  .entry-copy--restored { width: 100%; }
  .entry-copy--restored h1 { font-size: clamp(42px, 13vw, 62px); }
  .hover-quiet-actions { right: 12px; bottom: 22px; }
  .garden-place-nav { bottom: 72px !important; }
  .place-whisper { bottom: 139px !important; }
  .garden-heading { top: 108px; }
}

/* 恢复最初的园门：先停一会 / 写下此刻 */
body[data-view="entry"] .ambient-scene,
body[data-view="entry"] .garden-3d-root {
  opacity: 0;
  visibility: hidden;
}

body[data-view="entry"] .quiet-nav .nav-link {
  display: inline-flex;
}

.entry-view {
  min-height: 100vh;
  padding: 120px clamp(24px, 9vw, 150px) 72px;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.entry-view::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 13, 12, .7) 0%, rgba(7, 17, 16, .38) 36%, rgba(9, 18, 18, .05) 70%),
    linear-gradient(0deg, rgba(5, 13, 13, .48), transparent 43%),
    rgba(7, 16, 17, .12);
}

html[data-light="day"] .entry-view::after {
  background:
    linear-gradient(90deg, rgba(17, 27, 23, .48) 0%, rgba(21, 31, 27, .2) 38%, rgba(21, 31, 27, .02) 72%),
    linear-gradient(0deg, rgba(14, 23, 20, .32), transparent 43%),
    rgba(21, 31, 27, .03);
}

.entry-landscape {
  position: absolute;
  z-index: 0;
  inset: -2%;
  background: url("./assets/garden-entry-night-restored-v1.png") center / cover no-repeat;
  filter: saturate(.76) contrast(.94) brightness(.82);
  transform: scale(1.025);
  transition: opacity 900ms ease, transform 2200ms cubic-bezier(.2,.75,.2,1), filter 1100ms ease;
}

html[data-light="day"] .entry-landscape {
  background-image: url("./assets/garden-entry-day-restored-v1.png");
  filter: saturate(.8) contrast(.93) brightness(.98);
}

.entry-copy--restored {
  position: relative;
  z-index: 3;
  width: min(680px, 58vw);
  padding: 0;
  color: var(--ink);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .24);
  transition: opacity 650ms ease, transform 900ms cubic-bezier(.2,.75,.2,1);
}

.entry-copy--restored > .eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 22px;
  color: rgba(223, 211, 173, .86);
  transform: none;
}

.entry-copy--restored > .eyebrow span {
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .54;
}

.entry-copy--restored h1 {
  margin: 0 0 24px;
  color: rgba(246, 243, 229, .96);
  font-size: clamp(50px, 6vw, 88px);
  line-height: 1.06;
  letter-spacing: -.035em;
  white-space: normal;
}

.entry-copy--restored .lead {
  margin: 0;
  color: rgba(241, 238, 222, .74);
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.9;
}

.entry-actions {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-top: 38px;
}

.entry-action {
  min-height: 58px;
  padding: 10px 28px;
  border: 1px solid rgba(241, 238, 222, .22);
  border-radius: 999px;
  color: rgba(246, 243, 229, .92);
  background: rgba(12, 25, 21, .25);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.entry-action:hover {
  transform: translateY(-2px);
  border-color: rgba(241, 238, 222, .44);
  background: rgba(18, 34, 28, .46);
}

.entry-action--primary {
  display: grid;
  min-width: 184px;
  place-content: center;
  color: #17211d;
  border-color: transparent;
  background: rgba(238, 236, 221, .9);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}

.entry-action--primary:hover {
  background: rgba(248, 246, 235, .96);
}

.entry-action--primary small {
  margin-top: 2px;
  font-size: 10px;
  opacity: .58;
}

.entry-action--secondary {
  min-width: 152px;
  font-family: var(--serif);
  font-size: 16px;
}

.entry-privacy {
  margin: 20px 0 0 4px;
  color: rgba(241, 238, 222, .44);
  font-size: 11px;
}

.entry-view .entry-footnote {
  z-index: 3;
  left: auto;
  right: clamp(24px, 7vw, 110px);
  bottom: 48px;
  color: rgba(241, 238, 222, .46);
}

.entry-view .entry-footnote .line {
  background: rgba(241, 238, 222, .26);
}

.entry-view.is-entering .entry-copy--restored,
.entry-view.is-entering .entry-footnote {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
}

.entry-view.is-entering .entry-landscape {
  opacity: .12;
  filter: blur(1px) saturate(.72) contrast(.92) brightness(.96);
  transform: scale(1.075);
}

.hover-view[data-place="overview"] .place-whisper {
  color: rgba(242, 238, 218, .72);
}

.hover-view[data-place="overview"] .hover-write-place {
  opacity: .45;
  pointer-events: none;
}

.garden-3d-root[data-place="overview"]::after {
  right: -1%;
  width: 54%;
  height: 40%;
  opacity: .42;
}

@media (max-width: 760px) {
  .entry-view { padding: 110px 24px 78px; }
  .entry-copy--restored { width: 100%; }
  .entry-copy--restored h1 { font-size: clamp(48px, 15vw, 72px); }
  .entry-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .entry-action--primary,
  .entry-action--secondary { min-width: 0; padding-inline: 14px; }
  .entry-view .entry-footnote { display: none; }
}

/* V0.6 最终收束：覆盖历史版本末尾的园门恢复规则。 */
.entry-view::after {
  background:
    linear-gradient(90deg, rgba(8, 16, 14, .60) 0%, rgba(12, 21, 18, .28) 34%, transparent 65%),
    linear-gradient(180deg, rgba(10, 16, 14, .08), transparent 42%, rgba(7, 13, 11, .31));
}

html[data-light="day"] .entry-view::after {
  background:
    linear-gradient(90deg, rgba(17, 27, 23, .53) 0%, rgba(23, 32, 28, .23) 35%, transparent 67%),
    linear-gradient(180deg, rgba(20, 27, 23, .04), transparent 42%, rgba(12, 19, 16, .22));
}

.entry-landscape,
html[data-light="day"] .entry-landscape {
  background-position: center 48%;
  filter: saturate(.72) contrast(.88) brightness(.96);
}

.entry-copy--restored {
  width: min(600px, 51vw);
}

.entry-copy--restored > .eyebrow {
  display: block;
  margin-bottom: 24px;
  color: rgba(236, 225, 190, .84);
  font-size: 11px;
  letter-spacing: .24em;
}

.entry-copy--restored > .eyebrow span {
  display: none;
}

.entry-copy--restored h1 {
  margin-bottom: 27px;
  font-size: clamp(43px, 5.1vw, 74px);
  letter-spacing: -.025em;
}

.entry-copy--restored .lead {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 2.05;
}

.entry-actions {
  gap: 12px;
  margin-top: 34px;
}

.entry-action {
  min-height: 56px;
  border-color: rgba(242, 238, 218, .19);
  background: rgba(24, 36, 31, .28);
  box-shadow: none;
  backdrop-filter: blur(9px) saturate(.8);
}

.entry-action--primary {
  min-width: 178px;
  color: rgba(31, 39, 34, .95);
  background: rgba(231, 229, 211, .84);
  box-shadow: 0 12px 34px rgba(5, 10, 8, .12);
}

.entry-action--primary:hover {
  background: rgba(240, 238, 222, .92);
}

.entry-action--primary small {
  font-size: 9px;
  letter-spacing: .08em;
}

.entry-action--secondary {
  color: rgba(244, 240, 222, .76);
  background: rgba(25, 37, 32, .31);
}

.entry-view .entry-footnote {
  right: clamp(28px, 7vw, 110px);
  bottom: 45px;
  color: rgba(246, 240, 217, .66);
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .16em;
  text-shadow: 0 2px 16px rgba(3, 8, 6, .72);
}

.entry-view .entry-footnote .line {
  display: none;
}

@media (max-width: 760px) {
  .entry-copy--restored { width: 100%; }
  .entry-copy--restored h1 { font-size: clamp(42px, 13vw, 62px); }
}

/* V0.8 · 园门成为可停留的真实山径。 */
.entry-landscape {
  background-image: url("./assets/yinyuan-gate-cliff-night-soft-lit-v6.png");
  background-position: center;
  filter: saturate(.88) contrast(.98) brightness(.92);
}

html[data-light="day"] .entry-landscape {
  background-image: url("./assets/yinyuan-gate-cliff-day-carved-v3.png");
  background-position: center;
  filter: saturate(.82) contrast(.95) brightness(1);
}

.entry-view::after {
  background:
    linear-gradient(90deg, rgba(8, 15, 13, .1) 0%, rgba(8, 15, 13, .025) 45%, transparent 66%),
    linear-gradient(180deg, rgba(4, 9, 8, .08), transparent 40%, rgba(4, 9, 8, .18));
}

html[data-light="day"] .entry-view::after {
  background:
    linear-gradient(90deg, rgba(232, 234, 226, .06), transparent 48%),
    linear-gradient(180deg, rgba(27, 37, 32, .02), transparent 52%, rgba(17, 27, 23, .09));
}

.entry-copy--restored {
  width: min(610px, 46vw);
  color: #34453c;
  text-shadow: 0 1px 20px rgba(255, 255, 255, .24);
}

.entry-copy--restored > .eyebrow {
  position: relative;
  padding-left: 38px;
  color: rgba(49, 66, 56, .68);
}

.entry-copy--restored > .eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 25px;
  height: 1px;
  background: currentColor;
}

.entry-copy--restored h1 {
  color: rgba(43, 59, 50, .97);
  font-size: clamp(45px, 4.65vw, 72px);
  line-height: 1.22;
  letter-spacing: .015em;
}

.entry-copy--restored .lead {
  max-width: 520px;
  color: rgba(52, 68, 59, .7);
  font-size: clamp(15px, 1.2vw, 18px);
}

.entry-actions {
  margin-top: 31px;
}

.entry-action {
  border-color: rgba(52, 70, 59, .24);
  color: rgba(42, 58, 49, .78);
  background: rgba(235, 237, 229, .22);
  box-shadow: none;
  backdrop-filter: blur(10px) saturate(.75);
}

.entry-action:hover {
  border-color: rgba(52, 70, 59, .42);
  background: rgba(242, 242, 234, .5);
}

.entry-action--primary {
  color: rgba(245, 244, 231, .97);
  background: rgba(47, 66, 55, .9);
  box-shadow: 0 13px 35px rgba(47, 62, 54, .16);
}

.entry-action--primary:hover {
  background: rgba(38, 57, 47, .96);
}

.entry-action--secondary {
  color: rgba(48, 65, 55, .82);
  background: rgba(239, 240, 232, .25);
}

.entry-privacy {
  color: rgba(54, 69, 60, .46);
}

html[data-light="night"] .entry-copy--restored {
  color: rgba(241, 236, 214, .94);
  text-shadow: 0 2px 22px rgba(0, 0, 0, .52);
}

html[data-light="night"] .entry-copy--restored > .eyebrow {
  color: rgba(224, 211, 170, .76);
}

html[data-light="night"] .entry-copy--restored h1 {
  color: rgba(247, 240, 213, .96);
}

html[data-light="night"] .entry-copy--restored .lead {
  color: rgba(235, 231, 212, .7);
}

html[data-light="night"] .entry-action {
  border-color: rgba(238, 232, 207, .22);
  color: rgba(242, 237, 216, .82);
  background: rgba(11, 25, 28, .27);
}

html[data-light="night"] .entry-action--primary {
  color: rgba(30, 39, 35, .96);
  background: rgba(232, 228, 207, .9);
}

html[data-light="night"] .entry-action--primary:hover {
  background: rgba(246, 242, 222, .96);
}

html[data-light="night"] .entry-action--secondary {
  color: rgba(242, 237, 216, .78);
  background: rgba(12, 28, 30, .28);
}

html[data-light="night"] .entry-privacy {
  color: rgba(235, 230, 207, .43);
}

/* 三句文案在同一三角路径上交换位置，当前句落在下方顶点。 */
.entry-view .entry-footnote {
  position: absolute;
  z-index: 5;
  right: clamp(28px, 4.2vw, 76px);
  bottom: clamp(34px, 5.2vh, 58px);
  left: auto;
  display: block;
  width: clamp(300px, 25vw, 420px);
  height: 96px;
  color: rgba(236, 235, 219, .7);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .72);
}

.entry-footnote-item {
  position: absolute;
  margin: 0;
  max-width: 230px;
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .14em;
  white-space: nowrap;
  opacity: .26;
  transform: translate3d(0, 0, 0) scale(.9);
  transform-origin: left center;
  transition:
    left 1600ms cubic-bezier(.22, .72, .18, 1),
    right 1600ms cubic-bezier(.22, .72, .18, 1),
    top 1600ms cubic-bezier(.22, .72, .18, 1),
    bottom 1600ms cubic-bezier(.22, .72, .18, 1),
    opacity 1200ms ease,
    transform 1600ms cubic-bezier(.22, .72, .18, 1),
    color 1200ms ease;
}

.entry-footnote-item span {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.entry-footnote-item span::before {
  content: "";
  width: 27px;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: .66;
}

.entry-footnote-item.is-current {
  right: 0;
  bottom: 0;
  left: auto;
  top: auto;
  z-index: 3;
  color: rgba(248, 245, 225, .94);
  font-size: 13px;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.entry-footnote-item.is-next {
  top: 1px;
  right: 2%;
  left: auto;
  bottom: auto;
  z-index: 1;
}

.entry-footnote-item.is-previous {
  top: 22px;
  left: 0;
  right: auto;
  bottom: auto;
  z-index: 2;
  opacity: .4;
  transform: scale(.94);
}

/* 已经存在的蒲公英留在地面，仅有两颗种子极偶尔离开。 */
.entry-dandelion-seeds {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.entry-dandelion-seeds i {
  position: absolute;
  left: 40%;
  top: 91%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(247, 245, 227, .75);
  box-shadow: 0 0 7px rgba(248, 246, 231, .24);
  opacity: 0;
  animation: entry-seed-drift 31s cubic-bezier(.3, .05, .3, 1) 7s infinite;
}

.entry-dandelion-seeds i::before,
.entry-dandelion-seeds i::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 1px;
  width: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 244, 229, .58));
  transform: rotate(-24deg);
  transform-origin: right center;
}

.entry-dandelion-seeds i::after { transform: rotate(18deg); }
.entry-dandelion-seeds i:nth-child(2) {
  left: 44%;
  top: 94%;
  animation-duration: 37s;
  animation-delay: 20s;
}

@keyframes entry-seed-drift {
  0%, 67% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
  70% { opacity: .7; }
  82% { opacity: .62; transform: translate3d(7vw, -16vh, 0) rotate(92deg); }
  94% { opacity: .12; transform: translate3d(13vw, -29vh, 0) rotate(176deg); }
  100% { opacity: 0; transform: translate3d(15vw, -33vh, 0) rotate(210deg); }
}

html[data-light="night"] .entry-view .entry-footnote {
  color: rgba(229, 223, 200, .48);
  text-shadow: 0 2px 15px rgba(0, 0, 0, .78);
}

html[data-light="night"] .entry-footnote-item.is-current {
  color: rgba(242, 235, 207, .9);
}

/* 入口瀑布不做视频化表演，只让三层高光产生缓慢水势。 */
.entry-waterfall {
  position: absolute;
  z-index: 2;
  top: 21.5%;
  left: 72.5%;
  width: 6.4%;
  height: 31%;
  overflow: hidden;
  opacity: .18;
  pointer-events: none;
  filter: blur(1.2px);
  clip-path: polygon(42% 0, 82% 0, 72% 23%, 78% 42%, 52% 67%, 55% 100%, 10% 100%, 31% 65%, 24% 42%);
  mix-blend-mode: screen;
}

.entry-waterfall i {
  position: absolute;
  inset: -35% 0;
  background: repeating-linear-gradient(176deg, transparent 0 12px, rgba(244, 249, 244, .28) 16px 19px, transparent 23px 34px);
  animation: entry-water-flow 5.8s linear infinite;
}

.entry-waterfall i:nth-child(2) {
  opacity: .48;
  transform: translateX(7px);
  animation-duration: 7.6s;
  animation-delay: -2.4s;
}

.entry-waterfall i:nth-child(3) {
  opacity: .28;
  transform: translateX(-5px);
  animation-duration: 9.2s;
  animation-delay: -5.1s;
}

html[data-light="night"] .entry-waterfall {
  opacity: .28;
  filter: blur(1px) drop-shadow(0 0 9px rgba(183, 210, 221, .16));
}

@keyframes entry-water-flow {
  from { translate: 0 -18%; }
  to { translate: 0 18%; }
}

/* 真实园名由网页叠加，夜间小灯从石脚向上照亮刻字。 */
.entry-garden-stone {
  position: absolute;
  z-index: 4;
  left: 77.2%;
  top: 76.5%;
  width: 5.6%;
  height: 19.5%;
  pointer-events: none;
}

.entry-stone-name {
  position: absolute;
  left: 40%;
  top: 12%;
  display: grid;
  width: 1em;
  color: rgba(19, 29, 24, .76);
  font-family: var(--serif);
  font-size: clamp(15px, 1.4vw, 23px);
  font-weight: 600;
  line-height: 1.45;
  text-shadow: 0 1px rgba(255, 255, 255, .13);
}

.entry-stone-lamp {
  position: absolute;
  left: 48%;
  bottom: -1%;
  width: 20px;
  height: 12px;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 900ms ease;
}

.entry-stone-lamp::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 92px;
  height: 180px;
  background: radial-gradient(ellipse at 50% 100%, rgba(238, 199, 124, .38), rgba(231, 194, 125, .11) 35%, transparent 72%);
  transform: translateX(-50%);
  filter: blur(5px);
}

.entry-stone-lamp i {
  position: absolute;
  inset: 2px 1px 0;
  border-radius: 2px 2px 6px 6px;
  background: linear-gradient(#e7c17b, #7a5a2d);
  box-shadow: 0 0 16px rgba(239, 200, 127, .68);
}

html[data-light="night"] .entry-stone-name {
  color: rgba(237, 217, 168, .92);
  text-shadow: 0 0 8px rgba(234, 193, 116, .5), 0 2px 2px rgba(0, 0, 0, .72);
}

html[data-light="night"] .entry-stone-lamp {
  opacity: 1;
}

@media (max-aspect-ratio: 4/3) {
  .entry-waterfall { left: 74%; }
  .entry-garden-stone { left: 80%; }
}

@media (max-width: 760px) {
  .entry-view {
    padding: 108px 24px 132px;
    align-items: flex-end;
  }

  .entry-landscape,
  html[data-light="day"] .entry-landscape {
    background-position: 68% center;
  }

  .entry-view::after,
  html[data-light="day"] .entry-view::after {
    background:
      linear-gradient(180deg, transparent 30%, rgba(7, 15, 13, .18) 58%, rgba(6, 14, 12, .68)),
      linear-gradient(90deg, rgba(7, 15, 13, .08), transparent 70%);
  }

  .entry-copy--restored { width: 100%; }
  .entry-copy--restored > .eyebrow { color: rgba(233, 224, 194, .78); }
  .entry-copy--restored h1 {
    color: rgba(248, 244, 226, .97);
    font-size: clamp(39px, 11.5vw, 56px);
    line-height: 1.18;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .5);
  }
  .entry-copy--restored .lead,
  .entry-privacy { color: rgba(243, 238, 218, .72); }
  .entry-actions { grid-template-columns: 1.08fr .92fr; }
  .entry-action--secondary { color: rgba(247, 242, 222, .86); border-color: rgba(244, 239, 218, .25); background: rgba(8, 22, 18, .3); }
  .entry-view .entry-footnote { display: none; }
  .entry-waterfall { left: 69%; top: 17%; width: 11%; height: 30%; }
  .entry-garden-stone { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .entry-waterfall i { animation: none !important; }
  .entry-cloud-drift { animation: none !important; opacity: .16; }
  .entry-dandelion-seeds { display: none; }
  .entry-footnote-item { transition: none !important; }
}

/* V0.7 · 按体验反馈收束悬停时刻 */

/* 日间全景回到原本的清晰层次；夜间继续保留柔和空气感。 */
html[data-light="day"] .garden-3d-root[data-place="overview"] .garden-view-image--overview {
  filter: saturate(.95) contrast(1.015) brightness(1) blur(0);
  transform: scale(1.008);
}

/* 树下：坐在石面上正对湖心与完整山体，小径只从右下方经过；日夜同机位。 */
.garden-view-image--tree,
.garden-view-image--tree-bird {
  background-image: url("./assets/garden-tree-facing-water-clear-day-v7.png");
  background-position: center;
  filter: saturate(.9) contrast(.98) brightness(.99);
}

html[data-light="night"] .garden-view-image--tree,
html[data-light="night"] .garden-view-image--tree-bird {
  background-image: url("./assets/garden-tree-facing-water-moonlit-night-v6.png");
  filter: saturate(.88) contrast(.96) brightness(1.04) blur(.08px);
}

.garden-view-image--tree::after,
.garden-view-image--tree-bird::after {
  display: none;
}

/* 树下只有一个稳定画面；鸟声可以出现，但不再触发第二张背景接管。 */
.garden-3d-root[data-place="tree"].bird-has-arrived .garden-view-image--tree {
  opacity: 1;
}

.garden-3d-root[data-place="tree"].bird-has-arrived .garden-view-image--tree-bird {
  opacity: 0;
}

/* 恢复更稳定、更清楚的地点与园声控件。 */
.garden-place-nav {
  bottom: 82px !important;
  padding: 7px !important;
  gap: 4px !important;
  border-color: rgba(239, 235, 211, .25);
  background: linear-gradient(180deg, rgba(13, 24, 20, .64), rgba(5, 13, 10, .76));
  box-shadow: 0 14px 48px rgba(0, 7, 5, .28), inset 0 1px rgba(255, 255, 255, .07);
  backdrop-filter: blur(18px) saturate(.85);
}

.place-link {
  min-width: 112px;
  color: rgba(247, 244, 226, .8) !important;
}

.place-link.is-current {
  color: #fffbea !important;
  background: rgba(218, 208, 167, .2);
  box-shadow: inset 0 0 0 1px rgba(232, 225, 193, .14);
}

.sound-invitation {
  padding: 10px 18px !important;
  border: 1px solid rgba(237, 231, 205, .2) !important;
  border-radius: 999px;
  color: rgba(247, 243, 222, .88) !important;
  background: rgba(7, 14, 11, .35) !important;
  box-shadow: 0 8px 30px rgba(2, 8, 6, .14);
  backdrop-filter: blur(12px);
}

/* 从局部视角退回完整园景，不重启停留。 */
.return-overview {
  position: fixed;
  z-index: 40;
  left: calc(50% - 300px);
  bottom: 102px;
  padding: 8px 10px;
  color: rgba(247, 243, 222, .68);
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .13em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .88);
  transition: color 300ms ease, opacity 600ms ease, transform 600ms ease;
  pointer-events: auto !important;
  touch-action: manipulation;
}

.return-overview[hidden] {
  display: none !important;
}

.return-overview:hover,
.return-overview:focus-visible {
  color: rgba(255, 251, 232, .96);
  transform: translateX(-3px);
}

/* “留一句”在第八秒才成为可选动作。 */
.hover-quiet-actions .hover-write-place {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.25s ease, color 300ms ease;
}

.hover-quiet-actions .hover-write-place.is-visible {
  opacity: .78;
  pointer-events: auto;
}

/* 恢复上一版输入卡片。 */
.place-writing-card {
  bottom: 92px;
  width: min(500px, calc(100vw - 42px));
  padding: 28px 30px 24px;
  border: 1px solid rgba(230, 223, 192, .2);
  border-radius: 4px 28px 4px 28px;
  background:
    linear-gradient(140deg, rgba(35, 49, 41, .92), rgba(12, 25, 20, .88)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 4px);
  box-shadow: 0 28px 90px rgba(0, 7, 4, .42), inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(24px) saturate(.8);
}

/* 恢复上一版离开卡片。 */
.hover-reflection {
  width: min(620px, calc(100vw - 48px));
  padding: 36px clamp(22px, 4vw, 54px);
  border: 1px solid rgba(226, 226, 207, .13);
  border-radius: 34px;
  background: rgba(12, 22, 21, .34);
  box-shadow: 0 30px 90px rgba(2, 7, 7, .28);
  backdrop-filter: blur(18px) saturate(.88);
}

.hover-reflection h2 {
  margin-bottom: 18px;
  font-size: clamp(34px, 3.4vw, 48px);
}

.reflection-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 17px auto -7px;
  padding: 7px 13px;
  color: rgba(239, 237, 222, .5);
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .1em;
  transition: color .35s ease, transform .35s ease, background-color .35s ease;
}

.reflection-back:hover,
.reflection-back:focus-visible {
  color: rgba(248, 245, 230, .86);
  background: rgba(238, 234, 210, .055);
  transform: translateY(-1px);
}

.reflection-back span {
  font-family: sans-serif;
  font-size: 13px;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  .return-overview {
    left: 18px;
    bottom: 104px;
  }
}

/* V0.9 · 园门反馈收束：所有变化只在原位置内发生。 */
html[data-light="day"] body[data-view="entry"] .brand,
html[data-light="day"] body[data-view="entry"] .quiet-nav {
  color: rgba(46, 62, 53, .84);
  text-shadow: 0 1px 12px rgba(255, 255, 255, .44);
}

html[data-light="day"] body[data-view="entry"] .brand-mark {
  border-color: rgba(46, 62, 53, .42);
}

.entry-copy--restored > .eyebrow {
  padding-left: 0;
  color: rgba(48, 65, 55, .72);
}

.entry-copy--restored > .eyebrow::before {
  display: none;
}

.entry-copy--restored h1 {
  font-size: clamp(41px, 4.15vw, 64px);
  line-height: 1.24;
}

.entry-copy--restored .lead {
  color: rgba(47, 63, 54, .76);
}

.entry-privacy {
  margin-left: 0;
  color: rgba(45, 61, 52, .66);
  font-size: 12px;
  letter-spacing: .035em;
}

/* 日间白雾压低半档，仍保持呼吸感。 */
html[data-light="day"] .entry-landscape {
  filter: saturate(.82) contrast(.965) brightness(.94);
}

html[data-light="day"] .entry-view::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 47% 0 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(122, 139, 128, .055), rgba(103, 121, 111, .025) 62%, transparent);
  mix-blend-mode: multiply;
}

/* 三句话共用一条竖向轨道；当前句居中，上下句仅退淡。 */
.entry-view .entry-footnote {
  right: clamp(34px, 5vw, 88px);
  bottom: clamp(30px, 4.5vh, 50px);
  width: clamp(260px, 23vw, 390px);
  height: 104px;
  color: rgba(245, 242, 222, .72);
  text-align: left;
}

.entry-footnote-item {
  top: 42px;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  max-width: none;
  font-size: 11px;
  opacity: .56;
  transform: translate3d(0, 0, 0);
  transform-origin: left center;
  transition:
    top 1500ms cubic-bezier(.22, .72, .18, 1),
    opacity 1100ms ease,
    transform 1500ms cubic-bezier(.22, .72, .18, 1),
    color 1100ms ease;
}

.entry-footnote-item span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.entry-footnote-item span::before {
  width: 1px;
  height: 17px;
  background: currentColor;
  opacity: .76;
}

.entry-footnote-item.is-current {
  top: 42px;
  right: auto;
  bottom: auto;
  left: 0;
  color: rgba(250, 247, 228, .98);
  font-size: 12px;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.entry-footnote-item.is-next {
  top: 79px;
  right: auto;
  bottom: auto;
  left: 0;
  opacity: .62;
  transform: translate3d(0, 0, 0) scale(.96);
}

.entry-footnote-item.is-previous {
  top: 5px;
  right: auto;
  bottom: auto;
  left: 0;
  opacity: .62;
  transform: translate3d(0, 0, 0) scale(.96);
}

html[data-light="day"] .entry-view .entry-footnote {
  color: rgba(237, 235, 218, .74);
  text-shadow: 0 2px 15px rgba(0, 0, 0, .8);
}

html[data-light="day"] .entry-footnote-item.is-current {
  color: rgba(255, 251, 232, .98);
}

/* 取消一切额外瀑布叠层，直接使用日夜背景照片中的瀑布。 */
.entry-waterfall {
  display: none !important;
}

/* 园名保持石刻感；地灯移到石头右侧，以斜向暖光擦亮字面。 */
.entry-stone-name {
  color: rgba(18, 28, 23, .76);
  font-weight: 600;
  text-shadow: 0 1px rgba(255, 255, 255, .12), 0 -1px rgba(0, 0, 0, .3);
}

.entry-stone-lamp {
  left: 94%;
  bottom: 3%;
  width: 19px;
  height: 10px;
  transform: rotate(-17deg);
}

.entry-stone-lamp::before {
  left: -22px;
  bottom: 7px;
  width: 118px;
  height: 172px;
  background: radial-gradient(ellipse at 76% 100%, rgba(237, 200, 131, .34), rgba(226, 187, 116, .1) 36%, transparent 72%);
  transform: rotate(14deg);
  transform-origin: 72% 100%;
  filter: blur(6px);
}

.entry-stone-lamp i {
  inset: 3px 1px 0;
  border: 1px solid rgba(226, 199, 145, .2);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(145deg, #54462e, #171c18 72%);
  box-shadow: 0 -3px 11px rgba(238, 204, 139, .34);
}

html[data-light="night"] .entry-stone-name {
  color: rgba(226, 200, 146, .9);
  text-shadow: 0 0 7px rgba(226, 184, 105, .36), 0 2px 2px rgba(0, 0, 0, .76);
}

html[data-light="night"] .entry-privacy {
  color: rgba(235, 230, 207, .58);
}

@media (max-width: 760px) {
  .entry-copy--restored h1 { font-size: clamp(37px, 10.6vw, 51px); }
  .entry-view::before { inset: 0; background: none; }
}

/* V0.10 · 园名石与右下文案回到最初效果图的位置关系。 */
body[data-view="entry"] .brand {
  color: rgba(43, 60, 50, .9);
  text-shadow: 0 1px 12px rgba(255, 255, 255, .46);
}

body[data-view="entry"] .brand-mark {
  color: inherit;
  border-color: currentColor;
  background: transparent;
}

body[data-view="entry"] .brand-name {
  color: inherit;
}

html[data-light="night"] body[data-view="entry"] .brand {
  color: rgba(239, 235, 216, .82);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .78);
}

/* 字像真正凿进石面：深色、稍厚、有石面明暗，而不是悬浮网页字。 */
.entry-stone-name {
  left: 38%;
  top: 11%;
  display: block;
  width: 1em;
  color: rgba(15, 19, 16, .9);
  font-family: "STKaiti", "KaiTi", "FangSong", "STFangsong", serif;
  font-size: clamp(20px, 1.72vw, 29px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-shadow:
    1px 1px 0 rgba(157, 163, 149, .28),
    -1px -1px 1px rgba(0, 0, 0, .62),
    0 2px 2px rgba(0, 0, 0, .28);
  -webkit-text-stroke: .25px rgba(5, 8, 6, .58);
  mix-blend-mode: multiply;
  transform: rotate(-1deg);
}

html[data-light="night"] .entry-stone-name {
  color: rgba(30, 25, 17, .9);
  text-shadow:
    1px 1px 0 rgba(221, 191, 132, .34),
    -1px -1px 1px rgba(0, 0, 0, .76),
    0 0 5px rgba(222, 180, 103, .16);
  -webkit-text-stroke: .25px rgba(8, 7, 5, .65);
  mix-blend-mode: normal;
}

/* 三句仍沿同一竖向轨道轮换，但轨道整体固定在园名石右侧。 */
.entry-view .entry-footnote {
  right: auto;
  left: 85.1%;
  bottom: clamp(30px, 4.3vh, 48px);
  width: calc(14.9% - 22px);
  min-width: 205px;
  max-width: 270px;
  height: 104px;
}

.entry-footnote-item,
.entry-footnote-item.is-current,
.entry-footnote-item.is-next,
.entry-footnote-item.is-previous {
  right: auto;
  left: 0;
  white-space: nowrap;
}

/* 右侧地灯收进草木，只留下斜向擦过石面的暖光。 */
.entry-stone-lamp {
  left: 113%;
  bottom: 8%;
  width: 14px;
  height: 8px;
  transform: rotate(-20deg);
}

.entry-stone-lamp::before {
  left: -39px;
  bottom: 4px;
  width: 92px;
  height: 125px;
  background: radial-gradient(ellipse at 85% 100%, rgba(233, 196, 126, .24), rgba(226, 185, 113, .07) 39%, transparent 72%);
  filter: blur(7px);
  transform: rotate(18deg);
  transform-origin: 85% 100%;
}

.entry-stone-lamp i {
  inset: 2px 0 0;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(145deg, #635238, #171b17 74%);
  box-shadow: 0 -2px 7px rgba(236, 202, 139, .24);
}

@media (max-width: 1180px) and (min-width: 761px) {
  .entry-view .entry-footnote {
    left: 82.5%;
    width: calc(17.5% - 18px);
    min-width: 185px;
  }
}

/* V0.11 · 参考实景投光：光只落在石块，不触碰右侧文案。 */
.entry-garden-stone {
  overflow: visible;
}

.entry-stone-lamp {
  left: 104%;
  bottom: 2%;
  width: 17px;
  height: 11px;
  transform: rotate(-18deg);
}

.entry-stone-lamp::before {
  left: -110px;
  bottom: -1px;
  width: 128px;
  height: 150px;
  background:
    radial-gradient(ellipse 78% 100% at 91% 99%, rgba(255, 218, 151, .42) 0 5%, rgba(243, 194, 109, .24) 22%, rgba(225, 166, 75, .09) 47%, transparent 74%);
  clip-path: none;
  filter: blur(13px);
  transform: rotate(-13deg) skewX(-9deg);
  transform-origin: 93% 100%;
  opacity: .82;
}

.entry-stone-lamp i {
  inset: 2px 1px 0;
  border: 1px solid rgba(235, 202, 144, .24);
  border-radius: 50% 50% 4px 4px;
  background: radial-gradient(circle at 35% 22%, #d7aa62, #493a27 45%, #151916 80%);
  box-shadow: 0 -2px 8px rgba(239, 196, 119, .3);
}

html[data-light="day"] .entry-stone-lamp {
  display: none;
}

.entry-view .entry-footnote {
  isolation: isolate;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .82);
}

/* V0.12 · “我的园”与园门共享同一片山径、同一组品牌文案。 */
.garden-view::before {
  inset: 0;
  background: url("./assets/yinyuan-gate-cliff-night-soft-lit-v6.png") center / cover no-repeat;
  filter: saturate(.88) contrast(.98) brightness(.92);
  transform: none;
}

html[data-light="day"] .garden-view::before {
  background-image: url("./assets/yinyuan-gate-cliff-day-carved-v3.png");
  filter: saturate(.82) contrast(.965) brightness(.94);
}

.garden-view::after {
  background:
    linear-gradient(90deg, rgba(8, 16, 14, .58) 0%, rgba(12, 21, 18, .24) 36%, transparent 64%),
    linear-gradient(180deg, rgba(10, 16, 14, .07), transparent 42%, rgba(7, 13, 11, .28));
}

html[data-light="day"] .garden-view::after {
  background:
    linear-gradient(90deg, rgba(238, 241, 236, .22) 0%, rgba(229, 234, 229, .1) 35%, transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 44%, rgba(28, 39, 33, .12));
}

.garden-view .garden-heading {
  position: relative;
  top: auto;
  width: min(600px, 51vw);
  max-width: none !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  text-shadow: 0 1px rgba(255, 255, 255, .24);
}

.garden-view .garden-heading > .eyebrow {
  margin: 0 0 22px;
  color: rgba(48, 65, 55, .72);
  font-size: 11px;
  letter-spacing: .26em;
}

.garden-view .garden-heading h2 {
  margin: 0 0 25px;
  color: #26382f;
  font-size: clamp(41px, 4.15vw, 64px);
  line-height: 1.24;
  letter-spacing: .01em;
}

.garden-view .garden-heading > p:last-child {
  max-width: none;
  margin: 0;
  color: rgba(47, 63, 54, .76) !important;
  font-family: var(--serif);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 2;
}

html[data-light="night"] .garden-view .garden-heading {
  text-shadow: 0 2px 16px rgba(0, 0, 0, .32);
}

html[data-light="night"] .garden-view .garden-heading h2 {
  color: rgba(239, 235, 215, .92);
}

html[data-light="night"] .garden-view .garden-heading > .eyebrow,
html[data-light="night"] .garden-view .garden-heading > p:last-child {
  color: rgba(224, 221, 203, .62) !important;
}

.garden-view .garden-footnote {
  position: fixed;
  z-index: 5;
  left: 85.1%;
  right: auto;
  bottom: clamp(30px, 4.3vh, 48px);
  width: calc(14.9% - 22px);
  min-width: 205px;
  max-width: 270px;
  height: 104px;
  display: block;
  color: rgba(245, 242, 222, .72);
  font-family: var(--serif);
  text-align: left;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .82);
  isolation: isolate;
}

html[data-light="day"] body[data-view="garden"] .brand,
html[data-light="day"] body[data-view="garden"] .quiet-nav {
  color: rgba(46, 62, 53, .84);
  text-shadow: 0 1px 12px rgba(255, 255, 255, .44);
}

html[data-light="day"] body[data-view="garden"] .brand-mark {
  border-color: rgba(46, 62, 53, .42);
}

/* 日间文字统一采用“先停一会”按钮的墨绿色，不再呈近黑色。 */
html[data-light="day"] body[data-view="entry"] .brand {
  color: rgba(47, 66, 55, .9);
  text-shadow: 0 1px 12px rgba(255, 255, 255, .4);
}

html[data-light="day"] body[data-view="entry"] .brand-mark {
  color: rgb(47, 66, 55);
  -webkit-text-fill-color: rgb(47, 66, 55);
  border-color: rgba(47, 66, 55, .48);
}

html[data-light="day"] .entry-copy--restored h1 {
  color: rgb(47, 66, 55);
}

@media (max-width: 760px) {
  .garden-view .garden-heading { width: 100%; }
  .garden-view .garden-heading h2 { font-size: clamp(42px, 13vw, 62px); }
  .garden-view .garden-footnote { display: none; }
}

/* 最终覆盖：我的园全屏，并强制日夜背景与园门一一对应。 */
body[data-view="garden"] #app {
  width: 100%;
  max-width: none;
}

body[data-view="garden"] .garden-view {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0 clamp(24px, 9vw, 150px) 72px !important;
  display: flex !important;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

body[data-view="garden"] .garden-view::before {
  background: url("./assets/yinyuan-gate-cliff-night-soft-lit-v6.png") center / cover no-repeat !important;
  filter: saturate(.88) contrast(.98) brightness(.92) !important;
}

html[data-light="day"] body[data-view="garden"] .garden-view::before {
  background: url("./assets/yinyuan-gate-cliff-day-carved-v3.png") center / cover no-repeat !important;
  filter: saturate(.82) contrast(.965) brightness(.94) !important;
}

/* V0.11 · 我的园记录笺：让真实留下的内容替代入口宣言。 */
body[data-view="garden"] .garden-journal-card {
  position: relative;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: min(500px, calc(100vw - 48px));
  max-width: 500px !important;
  min-height: 330px;
  margin: 32px 0 0;
  padding: clamp(30px, 3.2vw, 43px) clamp(28px, 3.35vw, 47px) 30px;
  border: 1px solid rgba(51, 70, 59, .17);
  border-radius: 4px 31px 5px 29px;
  color: rgb(47, 66, 55);
  background:
    linear-gradient(137deg, rgba(245, 244, 232, .86), rgba(228, 232, 219, .67) 72%, rgba(221, 226, 213, .52)),
    repeating-linear-gradient(90deg, rgba(37, 54, 45, .018), rgba(37, 54, 45, .018) 1px, transparent 1px, transparent 5px);
  box-shadow: 0 24px 74px rgba(34, 45, 38, .14), inset 0 1px rgba(255, 255, 255, .44);
  text-shadow: none;
  backdrop-filter: blur(13px) saturate(.72);
}

html[data-light="night"] body[data-view="garden"] .garden-journal-card {
  border-color: rgba(228, 220, 190, .13);
  color: rgba(244, 240, 219, .93);
  background:
    linear-gradient(139deg, rgba(30, 44, 36, .91), rgba(14, 27, 22, .82) 78%, rgba(10, 22, 18, .7)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012), rgba(255, 255, 255, .012) 1px, transparent 1px, transparent 5px);
  box-shadow: 0 28px 78px rgba(0, 8, 5, .28), inset 0 1px rgba(255, 255, 255, .035);
}

.garden-record-content,
.garden-record-empty {
  min-height: 268px;
}

.garden-record-content {
  display: flex;
  flex-direction: column;
}

.garden-record-content[hidden],
.garden-record-empty[hidden] {
  display: none;
}

.garden-record-header {
  display: flex;
  min-height: 30px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.garden-record-kicker {
  margin: 0;
  color: rgba(47, 66, 55, .68);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .28em;
}

html[data-light="night"] .garden-record-kicker {
  color: rgba(222, 216, 191, .67);
}

.garden-record-nav {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(47, 66, 55, .58);
  font-size: 10px;
  letter-spacing: .08em;
}

.garden-record-nav[hidden] { display: none; }
.garden-record-nav button { width: 25px; height: 25px; border-radius: 50%; font-size: 20px; line-height: 1; }
.garden-record-nav button:hover:not(:disabled) { background: rgba(47, 66, 55, .08); }
.garden-record-nav button:disabled { opacity: .22; cursor: default; }
html[data-light="night"] .garden-record-nav { color: rgba(226, 220, 198, .57); }
html[data-light="night"] .garden-record-nav button:hover:not(:disabled) { background: rgba(238, 232, 210, .08); }

.garden-record-quote,
.garden-record-event {
  margin: clamp(25px, 3.5vh, 37px) 0 0;
  color: inherit;
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: .025em;
}

.garden-record-quote {
  max-height: 7em;
  padding: 0;
  overflow: auto;
  scrollbar-width: thin;
  white-space: pre-wrap;
}

.garden-record-relation {
  margin: 20px 0 0;
  color: rgba(47, 66, 55, .66);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.9;
}

html[data-light="night"] .garden-record-relation {
  color: rgba(224, 219, 198, .66);
}

.garden-record-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 26px;
  color: rgba(47, 66, 55, .56);
  font-size: 11px;
  letter-spacing: .07em;
}

.garden-record-place::before { content: "·"; margin-right: 8px; }
html[data-light="night"] .garden-record-footer { color: rgba(222, 216, 195, .55); }

.garden-record-more {
  position: absolute;
  right: clamp(28px, 3.35vw, 47px);
  bottom: 25px;
  color: rgba(47, 66, 55, .43);
  font-size: 10px;
}

.garden-record-more summary {
  cursor: pointer;
  list-style: none;
  letter-spacing: .14em;
}

.garden-record-more summary::-webkit-details-marker { display: none; }
.garden-record-more button {
  position: absolute;
  right: 0;
  bottom: 24px;
  width: max-content;
  padding: 9px 12px;
  border: 1px solid rgba(96, 58, 51, .13);
  border-radius: 3px;
  color: rgba(105, 62, 55, .72);
  background: rgba(245, 239, 226, .88);
  box-shadow: 0 10px 28px rgba(31, 40, 34, .1);
}

html[data-light="night"] .garden-record-more { color: rgba(225, 218, 197, .4); }
html[data-light="night"] .garden-record-more button { color: rgba(229, 195, 181, .78); background: rgba(26, 34, 29, .96); }

.garden-empty-title {
  margin: 34px 0 0;
  color: inherit;
  font-family: var(--serif);
  font-size: clamp(27px, 2.3vw, 35px);
  line-height: 1.55;
}

.garden-empty-copy {
  margin: 13px 0 0;
  color: rgba(47, 66, 55, .64);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.9;
}

html[data-light="night"] .garden-empty-copy { color: rgba(225, 220, 200, .64); }

.garden-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.garden-empty-actions .button { min-height: 42px; padding: 0 21px; }
.garden-empty-actions .button-primary {
  color: rgba(247, 244, 229, .94);
  border-color: rgba(78, 99, 85, .18);
  background: rgba(76, 96, 82, .88);
  box-shadow: 0 10px 28px rgba(31, 47, 38, .13);
}
.garden-empty-actions .button-primary:hover {
  background: rgba(87, 107, 93, .92);
}
.garden-empty-actions .button-ghost { border-color: rgba(47, 66, 55, .24); color: rgb(47, 66, 55); }
html[data-light="night"] .garden-empty-actions .button-primary { color: #26392f; background: rgba(237, 232, 209, .88); }
html[data-light="night"] .garden-empty-actions .button-ghost { border-color: rgba(232, 226, 204, .22); color: rgba(239, 234, 214, .84); }

.trace-remove-dialog {
  width: min(420px, calc(100vw - 40px));
  padding: 0;
  border: 1px solid rgba(226, 219, 193, .16);
  border-radius: 4px 25px 5px 23px;
  color: rgba(244, 240, 219, .93);
  background: linear-gradient(145deg, rgba(38, 52, 44, .98), rgba(14, 27, 22, .98));
  box-shadow: 0 28px 90px rgba(0, 7, 5, .42);
}

.trace-remove-dialog::backdrop { background: rgba(5, 11, 8, .48); backdrop-filter: blur(5px); }
.trace-remove-dialog form { padding: 34px 36px 31px; }
.trace-remove-kicker { margin: 0 0 20px; color: rgba(220, 212, 186, .58); font-size: 10px; letter-spacing: .24em; }
.trace-remove-dialog h2 { margin: 0; color: inherit; font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1.55; }
.trace-remove-dialog form > p:not(.trace-remove-kicker) { margin: 12px 0 0; color: rgba(226, 220, 199, .64); font-size: 13px; line-height: 1.8; }
.trace-remove-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }
.trace-remove-actions .button { min-height: 40px; padding: 0 18px; }
.trace-remove-actions .button-ghost { color: rgba(239, 234, 214, .76); }
.trace-remove-confirm { border-color: rgba(205, 163, 145, .26); color: rgba(244, 216, 202, .88); background: rgba(124, 70, 58, .28); }

@media (max-width: 760px) {
  body[data-view="garden"] .garden-view {
    align-items: flex-end;
    padding: 0 20px 78px !important;
  }

  body[data-view="garden"] .garden-journal-card {
    width: 100%;
    min-height: 300px;
    margin: 0;
    padding: 28px 27px 25px;
    border-radius: 4px 24px 5px 22px;
  }

  .garden-record-content,
  .garden-record-empty { min-height: 245px; }
  .garden-record-quote,
  .garden-record-event { margin-top: 22px; font-size: clamp(22px, 6.5vw, 28px); }
  .garden-record-footer { padding-right: 62px; }
  .garden-record-more { right: 27px; bottom: 23px; }
  .garden-empty-actions { gap: 8px; }
  .garden-empty-actions .button { flex: 1; padding-inline: 13px; white-space: nowrap; }
  .trace-remove-dialog form { padding: 31px 27px 27px; }
}

/* V0.13 · 温柔小园：近坐小园为主，远山气势为辅。 */
:root {
  --garden-moss: #52685a;
  --garden-moss-deep: #34493f;
  --garden-paper: #eeecdf;
  --garden-paper-warm: #e5dfcb;
  --garden-tea: #8a7a62;
  --garden-ink: #34483e;
  --garden-night-ink: #dcd8c2;
}

/* 新场景保留山瀑世界，但让山退远、天空和路径重新呼吸。 */
.entry-landscape {
  background-image: url("./assets/yinyuan-gate-banyan-roots-night-v1.png") !important;
  background-position: center center !important;
  filter: saturate(.78) contrast(.92) brightness(.86) !important;
  transform: scale(1.006) !important;
}

html[data-light="day"] .entry-landscape {
  background-image: url("./assets/yinyuan-gate-banyan-roots-day-v1.png") !important;
  filter: saturate(.8) contrast(.94) brightness(.98) !important;
}

.entry-view::after {
  background:
    linear-gradient(90deg, rgba(18, 31, 27, .28) 0%, rgba(20, 34, 29, .11) 36%, transparent 64%),
    linear-gradient(180deg, rgba(20, 30, 27, .03), transparent 58%, rgba(12, 22, 18, .12)) !important;
}

html[data-light="day"] .entry-view::after {
  background:
    linear-gradient(90deg, rgba(244, 242, 231, .42) 0%, rgba(239, 239, 229, .17) 38%, transparent 66%),
    linear-gradient(180deg, rgba(255, 252, 241, .04), transparent 62%, rgba(67, 79, 70, .06)) !important;
}

.entry-copy--restored {
  transform: translateY(-3.5vh);
}

.entry-copy--restored > .eyebrow {
  color: rgba(62, 79, 69, .74) !important;
  letter-spacing: .24em !important;
}

.entry-copy--restored .lead {
  max-width: 560px;
  color: rgba(52, 70, 60, .76) !important;
}

html[data-light="night"] .entry-copy--restored > .eyebrow,
html[data-light="night"] .entry-copy--restored .lead {
  color: rgba(234, 230, 210, .76) !important;
  text-shadow: 0 2px 18px rgba(3, 10, 8, .5);
}

.brand-mark {
  border-radius: 48% 52% 45% 55% / 55% 45% 54% 46%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  transform: rotate(-2deg);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1), background 700ms ease;
}

.brand:hover .brand-mark {
  background: rgba(238, 235, 219, .18);
  transform: rotate(1deg) scale(1.04);
}

.entry-action {
  min-height: 60px !important;
  border-radius: 3px 23px 3px 23px !important;
  transition: transform 450ms cubic-bezier(.2,.8,.2,1), background 350ms ease, border-color 350ms ease !important;
}

.entry-action:hover { transform: translateY(-2px) !important; }

.entry-action--primary {
  color: var(--garden-moss-deep) !important;
  border: 1px solid rgba(66, 86, 73, .2) !important;
  background: rgba(238, 236, 223, .8) !important;
  box-shadow: 0 14px 38px rgba(47, 65, 54, .1), inset 0 1px rgba(255,255,255,.5) !important;
  backdrop-filter: blur(12px) saturate(.74);
}

.entry-action--primary:hover {
  background: rgba(247, 244, 230, .92) !important;
  border-color: rgba(66, 86, 73, .3) !important;
}

.entry-action--secondary {
  color: rgba(54, 71, 62, .78) !important;
  border-color: rgba(68, 84, 74, .2) !important;
  background: rgba(235, 234, 223, .28) !important;
  backdrop-filter: blur(10px);
}

html[data-light="night"] .entry-action--secondary {
  color: rgba(235, 231, 212, .82) !important;
  border-color: rgba(232, 227, 206, .24) !important;
  background: rgba(224, 219, 198, .07) !important;
}

/* 写下一念：提高可读性，保留低压的输入感。 */
body[data-view="record"] .ambient-image {
  background-image: url("./assets/writing-moment-night-v1.png") !important;
  background-position: center center !important;
  filter: saturate(.76) contrast(.92) brightness(1.02);
  transform: none;
}

html[data-light="day"] body[data-view="record"] .ambient-image {
  background-image: url("./assets/writing-moment-day-v1.png") !important;
  filter: none;
}

body[data-view="record"] .ambient-veil {
  background: linear-gradient(90deg, rgba(10, 24, 20, .66), rgba(14, 28, 24, .38) 43%, rgba(13, 25, 22, .16));
}

html[data-light="day"] body[data-view="record"] .ambient-veil {
  background:
    linear-gradient(90deg,
      rgba(67, 82, 70, .22) 0%,
      rgba(91, 101, 84, .16) 25%,
      rgba(126, 124, 102, .1) 44%,
      rgba(157, 135, 105, .035) 65%,
      transparent 84%),
    linear-gradient(180deg,
      rgba(219, 216, 201, .035) 0%,
      rgba(117, 128, 108, .055) 54%,
      rgba(61, 80, 67, .13) 100%);
}

.record-space { width: min(760px, 100%); }

.record-heading h2 {
  max-width: 720px;
  color: rgba(244, 240, 221, .96);
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.42;
}

.record-heading h2 span { white-space: nowrap; }

html[data-light="day"] .record-heading h2 {
  color: rgba(246, 241, 220, .97);
  text-shadow: 0 2px 22px rgba(21, 31, 25, .42), 0 1px 2px rgba(15, 24, 19, .28);
}

.record-invitation {
  color: rgba(229, 225, 205, .72) !important;
  font-size: clamp(16px, 1.35vw, 19px);
}

html[data-light="day"] .record-invitation {
  color: rgba(238, 234, 215, .82) !important;
  text-shadow: 0 2px 14px rgba(19, 29, 23, .34);
}

.writing-field textarea {
  color: rgba(244, 240, 220, .96);
  scrollbar-width: thin;
  scrollbar-color: rgba(224, 215, 184, .5) transparent;
}

html[data-light="day"] .writing-field textarea {
  color: rgba(248, 243, 224, .96);
  text-shadow: 0 1px 12px rgba(18, 27, 22, .28);
}

html[data-light="day"] .writing-field textarea::placeholder {
  color: rgba(246, 241, 222, .72);
  opacity: 1;
}

.writing-field textarea::-webkit-scrollbar { width: 7px; }
.writing-field textarea::-webkit-scrollbar-track { background: transparent; }
.writing-field textarea::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(224, 215, 184, .48);
  background-clip: padding-box;
}

.record-actions .button-primary {
  color: var(--garden-moss-deep);
  border: 1px solid rgba(232, 226, 202, .24);
  border-radius: 3px 20px 3px 20px;
  background: rgba(232, 227, 207, .82);
  box-shadow: 0 12px 34px rgba(3, 12, 9, .13);
}

html[data-light="day"] .record-actions .button-primary {
  border-color: rgba(65, 84, 72, .18);
  background: rgba(238, 236, 221, .82);
}

.record-hover-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-top: 20px;
  padding: 0 4px 0 0;
  color: rgba(232, 227, 208, .7) !important;
  border-bottom: 1px solid rgba(232, 227, 208, .2);
  font-size: 13px;
}

html[data-light="day"] .record-hover-link {
  color: rgba(241, 236, 217, .78) !important;
  border-color: rgba(241, 236, 217, .24);
  text-shadow: 0 2px 14px rgba(17, 27, 21, .36);
}

/* 我的园：文案向上，卡片在下；鼠标滚轮沿纵向回看。 */
body[data-view="garden"] .garden-view::before {
  background: url("./assets/yinyuan-gate-banyan-roots-night-v1.png") center / cover no-repeat !important;
  filter: saturate(.72) contrast(.92) brightness(.72) !important;
}

html[data-light="day"] body[data-view="garden"] .garden-view::before {
  background: url("./assets/yinyuan-gate-banyan-roots-day-v1.png") center / cover no-repeat !important;
  filter: saturate(.78) contrast(.94) brightness(.98) !important;
}

body[data-view="garden"] .garden-view {
  align-items: flex-start;
  padding-top: clamp(104px, 13vh, 148px) !important;
}

.garden-memory-stage {
  position: relative;
  z-index: 4;
  display: grid;
  width: min(610px, 48vw);
  gap: 28px;
  transform: translateY(-4vh);
}

.garden-page-intro { padding-left: 24px; }
.garden-page-kicker {
  margin: 0 0 10px;
  color: rgba(236, 231, 210, .66);
  font-size: 10px;
  letter-spacing: .22em;
  display: flex;
  align-items: center;
  gap: .72em;
}

.garden-page-kicker-dot {
  color: rgba(192, 175, 132, .72);
  font-size: 1.15em;
  transform: translateY(-.04em);
}

.garden-page-intro h2 {
  margin: 0 0 12px;
  color: rgba(244, 240, 220, .96);
  font-family: var(--serif);
  font-size: clamp(35px, 3.5vw, 52px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .04em;
}

.garden-page-intro > p:last-child {
  margin: 0;
  color: rgba(230, 225, 204, .72);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .06em;
}

html[data-light="day"] .garden-page-kicker { color: rgba(53, 71, 60, .6); }
html[data-light="day"] .garden-page-intro h2 { color: var(--garden-ink); }
html[data-light="day"] .garden-page-intro > p:last-child { color: rgba(52, 70, 60, .68); }

.garden-stack-viewport {
  position: relative;
  width: min(560px, 100%);
  padding: 22px 0 16px;
  transform: translateY(12px);
  outline: none;
  perspective: 1200px;
}

.garden-stack-viewport::before,
.garden-stack-viewport::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 28px;
  width: calc(100% - 56px);
  height: 50px;
  border: 1px solid rgba(63, 78, 68, .12);
  background: rgba(231, 228, 211, .5);
  box-shadow: 0 12px 34px rgba(23, 35, 28, .08);
  backdrop-filter: blur(9px);
}

.garden-stack-viewport::before { top: 6px; border-radius: 22px 4px 0 0; transform: scale(.95); opacity: .56; }
.garden-stack-viewport::after { bottom: 6px; border-radius: 0 0 4px 22px; transform: scale(.95); opacity: .42; }

body[data-view="garden"] .garden-journal-card,
html[data-light="night"] body[data-view="garden"] .garden-journal-card {
  width: 100%;
  max-width: none !important;
  min-height: 330px;
  margin: 0;
  color: var(--garden-ink);
  border: 1px solid rgba(61, 78, 67, .16);
  border-radius: 4px 32px 5px 29px;
  background:
    linear-gradient(137deg, rgba(243, 241, 226, .94), rgba(226, 225, 207, .88) 72%, rgba(218, 222, 205, .82)),
    repeating-linear-gradient(90deg, rgba(42, 58, 49, .018), rgba(42, 58, 49, .018) 1px, transparent 1px, transparent 5px);
  box-shadow: 0 24px 74px rgba(21, 34, 27, .16), inset 0 1px rgba(255,255,255,.58);
  backdrop-filter: blur(16px) saturate(.72);
  transition: opacity 180ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
}

html[data-light="night"] body[data-view="garden"] .garden-journal-card {
  color: rgba(238, 235, 216, .9);
  border-color: rgba(228, 221, 197, .12);
  background:
    linear-gradient(137deg, rgba(43, 54, 48, .58), rgba(22, 35, 30, .48) 72%, rgba(18, 31, 26, .42)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012), rgba(255,255,255,.012) 1px, transparent 1px, transparent 5px);
  box-shadow: 0 22px 68px rgba(2, 10, 7, .2), inset 0 1px rgba(255,255,255,.055);
  backdrop-filter: blur(20px) saturate(.62);
}

html[data-light="night"] .garden-record-kicker { color: rgba(225, 219, 198, .62) !important; }
html[data-light="night"] .garden-record-nav { color: rgba(225, 219, 198, .54) !important; }
html[data-light="night"] .garden-record-relation { color: rgba(229, 224, 204, .68) !important; }
html[data-light="night"] .garden-record-footer { color: rgba(223, 217, 197, .56) !important; }
html[data-light="night"] .garden-record-more { color: rgba(224, 218, 198, .46) !important; }

.garden-stack-viewport.is-moving-up .garden-journal-card { opacity: 0; transform: translateY(-34px) scale(.975); }
.garden-stack-viewport.is-moving-down .garden-journal-card { opacity: 0; transform: translateY(34px) scale(.975); }

.garden-record-kicker { color: rgba(51, 70, 59, .66) !important; }
.garden-record-nav { color: rgba(51, 70, 59, .56) !important; }
.garden-record-nav button { font-size: 14px; }
.garden-record-relation { color: rgba(51, 70, 59, .68) !important; }
.garden-record-footer { color: rgba(51, 70, 59, .58) !important; }
.garden-record-more { color: rgba(51, 70, 59, .48) !important; }

.garden-record-quote {
  scrollbar-width: thin;
  scrollbar-color: rgba(72, 91, 79, .3) transparent;
}

.garden-record-quote::-webkit-scrollbar { width: 6px; }
.garden-record-quote::-webkit-scrollbar-track { background: transparent; }
.garden-record-quote::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(72, 91, 79, .25); }

.garden-scroll-cue {
  margin: -6px 0 0 19px;
  color: rgba(229, 224, 204, .54);
  font-size: 10px;
  letter-spacing: .16em;
}

.garden-scroll-cue[hidden] { display: none; }

.garden-return-gate {
  position: relative;
  z-index: 9;
  pointer-events: auto;
  justify-self: start;
  margin: -4px 0 0 20px;
  padding: 8px 0;
  color: rgba(230, 225, 205, .68);
  border-bottom: 1px solid rgba(230, 225, 205, .18);
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .12em;
  transition: color 260ms ease, border-color 260ms ease, transform 260ms ease;
}

.garden-return-gate:hover {
  color: rgba(247, 242, 220, .94);
  border-color: rgba(240, 234, 213, .4);
  transform: translateX(-3px);
}

html[data-light="day"] .garden-return-gate {
  color: rgba(51, 70, 59, .66);
  border-color: rgba(51, 70, 59, .18);
}

html[data-light="day"] body[data-view="garden"] .brand,
html[data-light="day"] body[data-view="garden"] .brand-name,
html[data-light="day"] body[data-view="garden"] .brand-mark {
  color: rgb(48, 68, 57) !important;
  -webkit-text-fill-color: rgb(48, 68, 57) !important;
}

html[data-light="day"] body[data-view="garden"] .brand-mark {
  border-color: rgba(48, 68, 57, .48) !important;
  box-shadow: inset 0 0 0 1px rgba(48, 68, 57, .04);
}

.garden-scroll-cue::before { content: "○"; margin-right: 9px; font-size: 9px; }
html[data-light="day"] .garden-scroll-cue { color: rgba(51, 70, 59, .52); }

/* 让树真正成为卡片的前景：只把贴近记录笺的枝冠提到上层。 */
.garden-tree-foreground {
  position: fixed;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  background: url("./assets/yinyuan-gate-banyan-roots-night-v1.png") center / cover no-repeat;
  filter: saturate(.72) contrast(.92) brightness(.72);
  opacity: .78;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(110deg,
    transparent 35%,
    rgba(0, 0, 0, .08) 40%,
    rgba(0, 0, 0, .86) 47%,
    #000 51%,
    rgba(0, 0, 0, .72) 55%,
    rgba(0, 0, 0, .08) 61%,
    transparent 66%);
  -webkit-mask-size: 70% 42%;
  -webkit-mask-position: 34% 7%;
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(110deg,
    transparent 35%,
    rgba(0, 0, 0, .08) 40%,
    rgba(0, 0, 0, .86) 47%,
    #000 51%,
    rgba(0, 0, 0, .72) 55%,
    rgba(0, 0, 0, .08) 61%,
    transparent 66%);
  mask-size: 70% 42%;
  mask-position: 34% 7%;
  mask-repeat: no-repeat;
}

/* 暂停前景复制层：原图没有透明通道，重复裁切会在夜间产生色块。 */
.garden-tree-foreground {
  display: none !important;
}

html[data-light="day"] .garden-tree-foreground {
  background-image: url("./assets/yinyuan-gate-banyan-roots-day-v1.png");
  filter: saturate(.78) contrast(.94) brightness(.98);
}

@media (max-width: 760px) {
  .entry-copy--restored { transform: translateY(-1.5vh); }
  .record-heading h2 { font-size: clamp(34px, 10vw, 45px); }
  .record-heading h2 span { white-space: normal; }
  body[data-view="garden"] .garden-view {
    align-items: flex-end;
    padding: 94px 19px 48px !important;
    overflow-y: auto;
  }
  .garden-memory-stage { width: 100%; gap: 16px; transform: none; }
  .garden-page-intro { padding-left: 8px; }
  .garden-page-intro h2 { font-size: 35px; }
  .garden-stack-viewport { width: 100%; padding: 12px 0; }
  body[data-view="garden"] .garden-journal-card,
  html[data-light="night"] body[data-view="garden"] .garden-journal-card { min-height: 300px; }
  .garden-scroll-cue { margin-left: 9px; }
  .garden-return-gate { margin-left: 9px; }
  .garden-tree-foreground { display: none; }
}

/* 任何页面离开后都必须真正退出视觉层，避免旧版 !important 规则残留。 */
.view[hidden] {
  display: none !important;
}

/* 如何入园：一张仍留在园中的笺页，而不是跳出体验的教程。 */
.guide-dialog {
  width: min(760px, calc(100vw - 44px));
  max-height: calc(100vh - 42px);
  padding: 0;
  overflow: visible;
  color: rgba(239, 235, 216, .92);
  border: 1px solid rgba(235, 229, 205, .16);
  border-radius: 2px;
  background: transparent;
  box-shadow: 0 34px 110px rgba(3, 10, 7, .44);
}

.guide-dialog::backdrop {
  background: rgba(8, 15, 12, .54);
  backdrop-filter: blur(10px) saturate(.7);
}

.guide-sheet {
  position: relative;
  max-height: calc(100vh - 42px);
  padding: clamp(32px, 5vh, 48px) clamp(30px, 5vw, 60px) 38px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 90% 3%, rgba(193, 181, 137, .08), transparent 32%),
    linear-gradient(145deg, rgba(36, 49, 42, .96), rgba(22, 35, 29, .95));
  scrollbar-width: thin;
  scrollbar-color: rgba(223, 216, 193, .18) transparent;
}

.guide-sheet::before {
  content: "";
  position: absolute;
  inset: 13px;
  pointer-events: none;
  border: 1px solid rgba(233, 226, 201, .07);
}

.guide-close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 22px;
  width: 36px;
  height: 36px;
  color: rgba(232, 226, 205, .54);
  font-size: 25px;
  font-weight: 200;
}

.guide-kicker {
  margin: 0 0 12px;
  color: rgba(205, 190, 145, .76);
  font-size: 10px;
  letter-spacing: .26em;
}

.guide-heading h2 {
  margin: 0 0 13px;
  font-size: clamp(34px, 4.2vw, 48px);
  letter-spacing: .06em;
}

.guide-heading > p:last-child {
  margin: 0;
  color: rgba(231, 226, 207, .67);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.8;
}

.guide-paths {
  display: grid;
  margin: 30px 0 24px;
  border-top: 1px solid rgba(232, 225, 201, .13);
}

.guide-paths section {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  padding: 18px 4px 17px;
  border-bottom: 1px solid rgba(232, 225, 201, .1);
}

.guide-index {
  padding-top: 2px;
  color: rgba(205, 190, 145, .52);
  font-family: var(--serif);
  font-size: 12px;
}

.guide-paths h3 {
  margin: 0 0 5px;
  color: rgba(242, 238, 220, .93);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .05em;
}

.guide-paths p {
  margin: 0;
  color: rgba(229, 224, 204, .57);
  font-size: 12px;
  line-height: 1.75;
}

.guide-privacy {
  display: flex;
  gap: 10px;
  margin: 0;
  color: rgba(228, 222, 202, .48);
  font-size: 10px;
  line-height: 1.7;
}

.guide-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 27px;
}

.guide-actions .button-primary {
  min-height: 46px;
  min-width: 172px;
}

.guide-actions a,
.garden-deeper-invitation a {
  color: rgba(231, 225, 204, .7);
  font-size: 11px;
  letter-spacing: .08em;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.guide-actions a:hover,
.garden-deeper-invitation a:hover { color: rgba(247, 242, 220, .96); }

.garden-deeper-invitation {
  position: absolute;
  left: calc(50% + 235px);
  bottom: 7vh;
  width: min(270px, 22vw);
  color: rgba(231, 225, 204, .6);
}

.garden-deeper-line {
  display: block;
  width: 34px;
  height: 1px;
  margin-bottom: 14px;
  background: rgba(223, 215, 190, .24);
}

.garden-deeper-invitation p {
  margin: 0 0 13px;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.8;
}

html[data-light="day"] .garden-deeper-invitation { color: rgba(48, 68, 57, .62); }
html[data-light="day"] .garden-deeper-line { background: rgba(48, 68, 57, .22); }
html[data-light="day"] .garden-deeper-invitation a { color: rgba(48, 68, 57, .72); }

@media (max-width: 920px) {
  .garden-deeper-invitation {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    margin: 5px 10px 0;
  }
}

@media (max-width: 620px) {
  .guide-dialog { width: calc(100vw - 24px); }
  .guide-sheet { padding: 38px 28px 30px; }
  .guide-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .guide-actions .button-primary { width: 100%; }
}

/* 手机只承载同一套电脑画布：竖屏提示旋转，横屏保留桌面布局与原图画质。 */
.landscape-gate { display: none; }

@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .landscape-gate {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 13px;
    color: rgba(239, 235, 216, .92);
    background:
      radial-gradient(circle at 50% 40%, rgba(74, 92, 78, .24), transparent 38%),
      #101c18;
    font-family: var(--serif);
    text-align: center;
  }
  .landscape-gate-mark {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid rgba(229, 224, 204, .36);
    border-radius: 50%;
    font-size: 17px;
  }
  .landscape-gate p { margin: 0; font-size: 24px; letter-spacing: .12em; }
  .landscape-gate small { color: rgba(225, 220, 201, .6); font-size: 12px; letter-spacing: .08em; }
  .landscape-gate-phone {
    position: relative;
    width: 36px;
    height: 58px;
    margin-top: 28px;
    border: 1px solid rgba(228, 222, 201, .48);
    border-radius: 7px;
    animation: turn-landscape 2.4s ease-in-out infinite;
  }
  .landscape-gate-phone::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(228, 222, 201, .48);
    transform: translateX(50%);
  }
  body { overflow: hidden !important; }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html,
  body { min-width: 1366px; }
}

@keyframes turn-landscape {
  0%, 18% { transform: rotate(0deg); }
  52%, 78% { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}

/* 园门日间导航：在明暗交错的树冠上保持清楚，同时仍像浮在景色里。 */
html[data-light="day"] body[data-view="entry"] .quiet-nav {
  gap: 25px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  color: rgba(255, 255, 255, .96);
  background: rgba(12, 20, 16, .12);
  box-shadow: 0 4px 20px rgba(3, 8, 6, .08);
  text-shadow: 0 1px 5px rgba(2, 7, 5, .88), 0 0 14px rgba(2, 7, 5, .54);
  backdrop-filter: blur(3px) saturate(.9);
}

html[data-light="day"] body[data-view="entry"] .quiet-nav .nav-link,
html[data-light="day"] body[data-view="entry"] .quiet-nav .light-toggle {
  color: rgba(255, 255, 255, .94) !important;
  font-weight: 400;
}

html[data-light="day"] body[data-view="entry"] .quiet-nav .light-toggle-dot {
  border-color: rgba(255, 255, 255, .82);
  background: rgba(232, 207, 148, .96);
  box-shadow: 0 0 10px rgba(232, 207, 148, .46);
}