*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-narrative);
  color: var(--ink);
  background: var(--mist);
  line-height: 1.55;
  overflow: hidden;
}

.shell {
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shell--paged {
  max-height: 100dvh;
}

/* 欢迎封面：根路径 / #welcome；点「开始养树」后进园 */
.shell[data-mode="welcome"] .topbar,
.shell[data-mode="welcome"] .stage-host {
  display: none;
}

.shell[data-mode="garden"] .welcome {
  display: none !important;
}

.welcome {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  /* 图未到前也是园空，避免白闪 */
  background: #8ec8e6;
}

/*
 * 园景铺满视口：顶/底切片保持，中段纵向拉伸（避免上方另补色块产生色差）
 * --cut-top / --cut-bot 为原图高度比例；底带略抬高，让栏杆/花圃入画
 */
.welcome__scene {
  --cut-top: 0.26;
  --cut-bot: 0.4;
  --cut-mid: calc(1 - var(--cut-top) - var(--cut-bot));
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.welcome__layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.welcome__layer--bg {
  z-index: 0;
}

.welcome__layer--ground {
  z-index: 1;
}

.welcome__band {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.welcome__band--top {
  height: calc(var(--cut-top) * 100%);
}

.welcome__band--mid {
  flex: 1 1 auto;
  min-height: 0;
}

.welcome__band--bot {
  height: calc(var(--cut-bot) * 100%);
}

.welcome__band img {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  object-fit: fill;
  image-rendering: pixelated;
  user-select: none;
  pointer-events: none;
}

/* 顶带：露出原图顶部 */
.welcome__band--top img {
  top: 0;
  height: calc(100% / var(--cut-top));
}

/* 中带：露出原图中段并拉高填满剩余高度 */
.welcome__band--mid img {
  top: calc(var(--cut-top) / var(--cut-mid) * -100%);
  height: calc(100% / var(--cut-mid));
}

/* 底带：露出原图底部（栏杆+地面） */
.welcome__band--bot img {
  bottom: 0;
  top: auto;
  height: calc(100% / var(--cut-bot));
}

/* 主视觉焦点：幼苗立在土壤带上 */
.welcome__focal {
  position: absolute;
  left: 50%;
  bottom: max(7.5vh, 2.5rem);
  z-index: 2;
  transform: translateX(-50%);
  display: grid;
  place-items: end center;
  pointer-events: none;
}

.welcome__seedling {
  display: block;
  width: clamp(4.25rem, 12vw, 6.5rem);
  height: auto;
  image-rendering: pixelated;
  /* stages 图黑底：lighten 去黑，贴在园景上 */
  mix-blend-mode: lighten;
  animation: welcome-seedling-in 0.9s ease both 0.15s;
}

.welcome__copy {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  max-width: min(36rem, 92vw);
  margin: 0 auto 34vh;
  padding: 0 1.25rem;
  text-align: center;
  animation: welcome-copy-in 0.75s ease both;
}

.welcome__brand {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 6vw, 3.15rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--soil-deep);
  text-shadow:
    0 1px 0 color-mix(in srgb, #fff 70%, transparent),
    0 2px 12px color-mix(in srgb, var(--mist) 55%, transparent);
}

.welcome__brand-mark {
  letter-spacing: 0.04em;
}

.welcome__brand-product {
  font-size: 0.78em;
  letter-spacing: 0.12em;
}

.welcome__headline {
  margin: 0.15rem 0 0;
  font-family: var(--font-narrative);
  font-size: clamp(1.02rem, 2.5vw, 1.28rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--soil-deep) 86%, var(--canopy));
}

.welcome__lead {
  margin: 0.05rem 0 0.2rem;
  max-width: 32rem;
  font-family: var(--font-narrative);
  font-size: clamp(0.82rem, 1.85vw, 0.95rem);
  line-height: 1.65;
  color: color-mix(in srgb, var(--soil-deep) 72%, transparent);
  text-wrap: pretty;
}

.welcome__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 0.85rem;
  margin-top: 0.45rem;
}

.welcome__cta {
  padding: 0.34rem 1.2rem 0.38rem;
  font-size: clamp(0.88rem, 1.8vw, 1rem);
}

.welcome__secondary {
  appearance: none;
  margin: 0;
  padding: 0.35rem 0.15rem;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--soil-deep) 78%, var(--canopy));
  font-family: var(--font-narrative);
  font-size: clamp(0.84rem, 1.7vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  cursor: pointer;
}

.welcome__secondary:hover,
.welcome__secondary:focus-visible {
  color: var(--canopy);
  outline: none;
}

@keyframes welcome-copy-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes welcome-seedling-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome__copy,
  .welcome__seedling {
    animation: none;
  }
}

@media (max-width: 720px) {
  .welcome__copy {
    margin-bottom: 38vh;
  }

  .welcome__focal {
    bottom: max(9vh, 2.75rem);
  }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.65rem 1rem;
  padding-top: max(0.65rem, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--canopy) 10%, var(--mist));
  border-bottom: 1px solid color-mix(in srgb, var(--soil-light) 45%, transparent);
  flex-shrink: 0;
  z-index: 20;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}

.brand__logo {
  display: block;
  height: 1.65rem;
  width: auto;
  max-width: min(12.5rem, 46vw);
  object-fit: contain;
  object-position: left center;
}

.species-switch {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  justify-content: flex-end;
}

.species-switch__tag {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--canopy) 32%, transparent);
  background: color-mix(in srgb, var(--canopy) 14%, #fff);
  color: var(--soil-deep);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.2;
}

.species-switch__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  justify-content: flex-end;
}

.species-switch__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.18rem 0.28rem;
  border: 1px solid transparent;
  border-radius: 0.35rem;
  background: color-mix(in srgb, #fff 55%, transparent);
  cursor: pointer;
  color: var(--soil-deep);
  font-family: var(--font-ui);
}

.species-switch__btn:hover,
.species-switch__btn:focus-visible {
  background: color-mix(in srgb, var(--dawn) 75%, transparent);
  outline: none;
}

.species-switch__btn.is-active {
  border-color: color-mix(in srgb, var(--canopy) 55%, transparent);
  background: color-mix(in srgb, var(--mist) 85%, #fff);
}

.species-switch__thumb {
  width: 2.2rem;
  height: 1.5rem;
  object-fit: contain;
}

.species-switch__name {
  font-size: 0.58rem;
  line-height: 1.1;
}

@media (max-width: 720px) {
  .species-switch__tag {
    font-size: 0.66rem;
    padding: 0.12rem 0.42rem;
  }
  .species-switch__name {
    display: none;
  }
  .species-switch__thumb {
    width: 1.85rem;
    height: 1.3rem;
  }
}

/* —— 笔记本：页签从卡纸左缘伸出（同一块纸） —— */
.notebook {
  --page-bg: #f3c6cc;
  --tab-w: 5.8rem;
  --tab-bleed: 12px; /* 当前页签伸进卡纸，接成一体 */
  --tab-c0: #f3c6cc;
  --tab-c1: #b8e0d2;
  --tab-c2: #d4c4e8;
  --tab-c3: #e8e0d4;
  --tab-c4: #c5daf0;
  --tab-c5: #f5e6b8;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* 左侧留给伸出的页签，页签仍挂在卡纸坐标系上 */
  padding:
    0.55rem 0.7rem 0.7rem
    calc(var(--tab-w) + max(0.35rem, env(safe-area-inset-left)));
  box-sizing: border-box;
  overflow: visible;
  background:
    radial-gradient(120% 80% at 10% 20%, color-mix(in srgb, var(--dawn) 55%, transparent), transparent 55%),
    linear-gradient(180deg, var(--mist) 0%, var(--dawn) 70%, color-mix(in srgb, var(--soil-light) 55%, var(--mist)) 100%);
}

.notebook[data-page-tone="c0"] { --page-bg: var(--tab-c0); }
.notebook[data-page-tone="c1"] { --page-bg: var(--tab-c1); }
.notebook[data-page-tone="c2"] { --page-bg: var(--tab-c2); }
.notebook[data-page-tone="c3"] { --page-bg: var(--tab-c3); }
.notebook[data-page-tone="c4"] { --page-bg: var(--tab-c4); }
.notebook[data-page-tone="c5"] { --page-bg: var(--tab-c5); }

/* 卡纸本体：单色平面，避免白边/渐变造成套层 */
.notebook__page {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.45rem 0.5rem 0.5rem 0.45rem;
  border-radius: 0 0.95rem 0.95rem 0;
  background: var(--page-bg);
  border: 1px solid color-mix(in srgb, var(--page-bg) 70%, var(--soil-deep));
  border-left: 0;
  box-shadow: 4px 8px 20px color-mix(in srgb, var(--soil-deep) 12%, transparent);
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  overflow: visible;
}

/* 页签栏：贴在卡纸左缘外侧，右缘 = 卡纸左缘（Desk）；Phone 见 max-width 1023 */
.bookmark-nav {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: var(--tab-w);
  transform: translateX(-100%);
  margin: 0;
  padding: 0;
  overflow: visible; /* 当前页签可伸进卡纸 */
  pointer-events: none;
}

.bookmark-nav__track {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 0.28rem;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.bookmark-nav__tab {
  --tab-bg: var(--tab-c0);
  pointer-events: auto;
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 0.28rem;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.5rem 0.4rem 0.48rem;
  border: 1px solid color-mix(in srgb, var(--tab-bg) 40%, #fff);
  border-right: 0;
  border-radius: 0.62rem 0 0 0.62rem;
  background:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--tab-bg) 78%, #fff) 0%,
      var(--tab-bg) 48%,
      color-mix(in srgb, var(--tab-bg) 90%, #d9cfc0) 100%
    );
  box-shadow:
    -1px 0 0 color-mix(in srgb, #fff 55%, transparent),
    -2px 2px 0 color-mix(in srgb, var(--soil-deep) 7%, transparent),
    -3px 3px 8px color-mix(in srgb, var(--soil-deep) 9%, transparent);
  color: color-mix(in srgb, var(--soil-deep) 82%, #3a2a18);
  text-decoration: none;
  font-family: var(--font-ui);
  overflow: hidden;
  transition: box-shadow 0.18s ease, filter 0.18s ease, width 0.18s ease;
}

.bookmark-nav__tab--c0 { --tab-bg: var(--tab-c0); }
.bookmark-nav__tab--c1 { --tab-bg: var(--tab-c1); }
.bookmark-nav__tab--c2 { --tab-bg: var(--tab-c2); }
.bookmark-nav__tab--c3 { --tab-bg: var(--tab-c3); }
.bookmark-nav__tab--c4 { --tab-bg: var(--tab-c4); }
.bookmark-nav__tab--c5 { --tab-bg: var(--tab-c5); }

.bookmark-nav__n {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.78;
  line-height: 1.2;
}

.bookmark-nav__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.bookmark-nav__tab:hover,
.bookmark-nav__tab:focus-visible {
  outline: none;
  filter: brightness(1.03);
  z-index: 2;
}

/* 当前页签：同色实底，向右伸进卡纸，与页连成一块 */
.bookmark-nav__tab[aria-current="step"] {
  --tab-bg: var(--page-bg);
  z-index: 6;
  width: calc(100% + var(--tab-bleed));
  border: 0;
  background: var(--page-bg);
  box-shadow:
    -1px 0 0 color-mix(in srgb, #fff 45%, transparent),
    -2px 2px 0 color-mix(in srgb, var(--soil-deep) 5%, transparent),
    -3px 3px 8px color-mix(in srgb, var(--soil-deep) 8%, transparent);
  filter: none;
  overflow: visible;
}

.bookmark-nav__tab[aria-current="step"] .bookmark-nav__n,
.bookmark-nav__tab[aria-current="step"] .bookmark-nav__title {
  opacity: 1;
}

.bookmark-nav__tab.is-ready:not([aria-current="step"]) {
  box-shadow:
    -1px 0 0 color-mix(in srgb, #fff 55%, transparent),
    -2px 2px 0 color-mix(in srgb, var(--canopy) 10%, transparent),
    -3px 3px 8px color-mix(in srgb, var(--soil-deep) 9%, transparent);
}

/* 内容井与卡纸同色同圆角，不再内嵌一层圆角白框 */
.notebook__face {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 0 0.75rem 0.75rem 0;
  overflow: hidden;
  background: var(--page-bg);
  box-shadow: none;
  border: 0;
}

/* 章节区宿主（内为笔记本） */
.stage-host {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chapters-paged {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chapter {
  display: none;
  flex: 1;
  min-height: 0;
  position: relative;
  padding: 0;
  overflow: hidden;
}

.chapter.is-active {
  display: block;
}

/* 舞台铺满卡纸内容井；底色交给笔记本卡纸 */
.stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0;
  background: transparent;
  min-height: 0;
  height: auto;
  padding: 0;
  overflow: hidden;
}

/* 园景层：章节挂载点；底色跟卡纸，避免画框外多一圈白 */
.stage-world {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0.35rem;
  background: var(--page-bg);
}

/* Phone：上园景 / 下旁白坞分离；允许滚动，不强行塞进一屏 */
@media (max-width: 1023px) {
  .chapters-paged {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .chapter.is-active {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .stage {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .stage-world {
    flex: 0 0 auto;
    width: 100%;
    min-height: auto;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0.12rem 0.2rem 0.1rem;
  }

  /* 左树信息 + 右拍 A：stage 上方并排，间距尽量紧 */
  .phone-top {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.18rem;
    margin: 0.1rem 0.2rem 0.04rem;
    flex: 0 0 auto;
    min-width: 0;
    z-index: 3;
  }

  .phone-top > .forest-dialog,
  .phone-top > .dock[data-role="dock-a"] {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    inset: auto !important;
    flex: 1 1 0;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    min-height: 0;
    height: auto;
    max-height: min(32vh, 11.5rem);
    margin: 0 !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    z-index: 2;
  }

  .phone-top > .forest-dialog {
    --dialog-frame: 14px;
    order: 0;
  }

  .phone-top > .dock[data-role="dock-a"] {
    --dialog-frame: 14px;
    padding: 0.08rem 0.14rem 0.1rem;
    order: 1;
  }

  .phone-top > .forest-dialog[hidden] {
    display: none !important;
  }

  .phone-top > .dock[data-role="dock-a"]:only-child {
    flex: 1 1 auto;
  }

  .phone-top .forest-dialog__panel {
    gap: 0.14rem;
    padding: 0.14rem 0.2rem 0.16rem;
  }

  .phone-top .forest-dialog__blurb {
    -webkit-line-clamp: 2;
  }

  .phone-top .kicker,
  .phone-top .forest-dialog__title {
    margin: 0 0 0.06rem;
    font-size: 0.66rem;
  }

  .phone-top h2 {
    margin: 0 0 0.1rem;
    font-size: 0.92rem;
    line-height: 1.2;
  }

  .phone-top .define,
  .phone-top .break,
  .phone-top .hint,
  .phone-top .forest-focused,
  .phone-top .meta {
    margin: 0 0 0.08rem;
    font-size: 0.74rem;
    line-height: 1.3;
  }

  .phone-top .meet-cta {
    margin-top: 0.12rem;
  }

  .stage > .dock {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    z-index: 2;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0 0.45rem max(0.45rem, env(safe-area-inset-bottom));
    flex: 0 0 auto;
  }

  /* 拍 B：stage 下方通栏 */
  .stage > .dock[data-role="dock-side"] {
    width: auto;
    max-width: none;
    margin: 0.2rem 0.35rem max(0.55rem, env(safe-area-inset-bottom));
    --dialog-frame: 16px;
    padding: 0.12rem 0.22rem 0.18rem;
  }

  .stage > .dock[data-role="dock-a"] {
    --dialog-frame: 16px;
    padding: 0.12rem 0.22rem 0.18rem;
  }

  .water-frame,
  .water-frame--layered,
  .forest-frame {
    max-height: none;
    width: min(100%, 1180px);
  }

  .water-stage,
  .forest-stage,
  .meet-stage,
  .knowledge-stage,
  .author-stage,
  .invite-stage {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .forest-stage {
    flex-direction: column;
    align-items: stretch;
  }

  .forest-stage__canvas {
    width: 100%;
    height: auto;
    max-height: none;
  }

  /* 林场保持 3:2，不被旁白坞挤扁 */
  .forest-frame {
    flex: 0 0 auto;
    align-self: center;
    width: min(100%, 1180px);
    aspect-ratio: 3 / 2;
    min-height: min(52vw, 16rem);
  }

  /* Phone：命中盒略放宽便于点按；树图仍 pointer-events:none */
  .forest-tree--sil {
    width: 8%;
    height: 34%;
  }
  .forest-tree--hero {
    width: 11%;
    height: 48%;
  }
  .forest-tree__sign {
    height: min(7vw, 28px);
    bottom: 0.5%;
  }
  .forest-tree--sil .forest-tree__sign {
    height: min(5.8vw, 24px);
  }
  .forest-tree--sign-end .forest-tree__sign {
    left: calc(62% + 0.05rem);
  }
  .forest-tree--sign-start .forest-tree__sign {
    right: calc(62% + 0.05rem);
  }

  .forest-dialog {
    --dialog-frame: 16px;
    border-width: var(--dialog-frame);
    border-image-width: var(--dialog-frame);
    width: min(100%, 300px);
    margin: 0.25rem auto 0.2rem;
    padding: 0.12rem 0.22rem 0.18rem;
    max-height: none;
  }

  .forest-dialog__panel {
    gap: 0.1rem;
  }

  .forest-dialog__blurb {
    -webkit-line-clamp: 2;
  }
}

/* Desk：园景铺满，坞叠在画框右上 */
@media (min-width: 1024px) {
  .stage-world {
    position: absolute;
    inset: 0;
    padding: 0.2rem;
    background: transparent;
  }

  /* 拍 B：园景 | Desk 操作栏；少留缝，底色跟卡纸 */
  .chapter[data-dock-layout="side"] .stage {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.2rem 0.35rem 0.2rem 0.2rem;
    background: var(--page-bg);
  }

  .chapter[data-dock-layout="side"] .stage-world {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    background: transparent;
  }

  .chapter[data-dock-layout="side"] .stage > .dock[data-dock-mode="side"] {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    z-index: 2;
    width: min(22.5rem, 34%);
    max-width: 24rem;
    max-height: none;
    height: auto;
    align-self: stretch;
    overflow: auto;
    /* 侧栏卡片仍保留自身底，外圈缝跟卡纸 */
    margin: 0;
  }

  .chapter[data-dock-layout="side"] .forest-dock .ui-mock,
  .chapter[data-dock-layout="side"] .meet-dock .ui-mock,
  .chapter[data-dock-layout="side"] .water-dock .ui-mock,
  .chapter[data-dock-layout="side"] .knowledge-dock .ui-mock,
  .chapter[data-dock-layout="side"] .author-dock .ui-mock,
  .chapter[data-dock-layout="side"] .invite-dock .ui-mock {
    max-width: min(100%, 280px);
    max-height: min(58vh, 420px);
  }
}

.dock[hidden] {
  display: none !important;
}

.stage-inner {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  width: 100%;
  max-width: 42rem;
  justify-content: center;
}

@media (min-width: 1024px) {
  .stage-inner {
    justify-content: center;
    padding-left: 0;
  }
}

.pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.tree-stage {
  width: min(42vw, calc(88px * var(--pixel-scale)));
  height: min(48vw, calc(100px * var(--pixel-scale)));
  background-image: url("/assets/tree/growth-strip.png");
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.tree-stage--species {
  width: auto;
  max-width: min(46vw, 220px);
  height: min(52vw, calc(120px * var(--pixel-scale)));
  background: none;
  object-fit: contain;
  object-position: center bottom;
  transform: scale(var(--tree-scale, 1));
  transform-origin: center bottom;
}

.gardener {
  width: min(28vw, calc(64px * var(--pixel-scale)));
  height: min(48vw, calc(100px * var(--pixel-scale)));
  background-image: url("/assets/character/poses-strip.png");
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.tools-chip {
  position: absolute;
  right: 0.6rem;
  top: 0.6rem;
  width: calc(36px * var(--pixel-scale));
  height: calc(36px * var(--pixel-scale));
  background-image: url("/assets/tools/tools-sheet.png");
  background-size: cover;
  background-position: center;
  opacity: 0.9;
  border-radius: 0.2rem;
  border: 1px solid color-mix(in srgb, var(--soil-light) 50%, transparent);
}

/* 旁白坞共用落位；拍 B 扁平卡片（无内描边/硬阴影，避免套层感） */
.dock {
  position: absolute;
  z-index: 40;
  top: max(0.55rem, env(safe-area-inset-top));
  right: max(0.55rem, env(safe-area-inset-right));
  left: auto;
  bottom: auto;
  width: min(17.5rem, 42%);
  max-height: min(46%, 20rem);
  margin: 0;
  padding: 0.65rem 0.75rem 0.7rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
  box-sizing: border-box;
  font-family: var(--font-ui);
  color: var(--soil-deep);
  line-height: 1.25;
  background: color-mix(in srgb, #fffef6 72%, var(--page-bg));
  border: 2px solid color-mix(in srgb, var(--soil-deep) 28%, var(--page-bg));
  border-radius: 0.2rem;
  box-shadow: none;
  pointer-events: auto;
}

/* 拍 A：木纹外框 + 平坦纸色内底（纸色只铺 padding 盒，避免框外渗一圈） */
.dock[data-role="dock-a"] {
  --dialog-frame: 20px;
  --dialog-paper: #f2e4c4;
  padding: 0.28rem 0.42rem 0.34rem;
  color: #2a1a0c;
  background-color: var(--dialog-paper);
  background-image: none;
  background-clip: padding-box;
  background-origin: padding-box;
  border-style: solid;
  border-width: var(--dialog-frame);
  border-color: transparent;
  border-image-source: url("/assets/ui/ui-dialog-window.png");
  border-image-slice: 197 120 197 126;
  border-image-width: var(--dialog-frame);
  border-image-repeat: stretch;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  image-rendering: pixelated;
}

/* Desk：挂进 water-frame 后相对画面右上定位（仅拍 A 叠图） */
@media (min-width: 1024px) {
  .water-frame .dock[data-role="dock-a"],
  .water-frame--layered .dock[data-role="dock-a"] {
    top: 2.2%;
    right: 2.2%;
    width: min(18.5rem, 32%);
    max-height: min(56%, 26rem);
  }

  /* 有左上信息框的章：拍 A 与左框同宽（随画框 cqw 比例缩放），高度随内容 */
  .water-frame:has(> .forest-dialog) .dock[data-role="dock-a"],
  .water-frame--layered:has(> .forest-dialog) .dock[data-role="dock-a"] {
    width: var(--meet-panel-w);
    max-width: var(--meet-panel-w);
    height: auto;
    max-height: min(72%, 32rem);
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* 图片左右：« » 翻页（透明热区，白色字 + 白色描边光晕） */
.stage-nav {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.stage-nav__btn {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  min-height: 4.5rem;
  padding: 0.35rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.stage-nav__btn--prev {
  left: max(0.15rem, env(safe-area-inset-left));
}

.stage-nav__btn--next {
  right: max(0.15rem, env(safe-area-inset-right));
}

/* 林章拍 B 右侧栏时，下一章箭头贴在图右缘（栏左侧） */
.notebook:has(.chapter.is-active[data-dock-layout="side"]) .stage-nav__btn--next {
  right: calc(min(22.5rem, 34%) + 0.45rem);
}

.stage-nav__glyph {
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-size: clamp(4.25rem, 8vw, 6rem);
  font-weight: 600;
  line-height: 0.85;
  /* 透明填充 + 白色描边；光晕用 drop-shadow 只铺在外侧（不用 text-shadow，会填满内侧） */
  color: transparent;
  -webkit-text-stroke: 2.25px rgba(255, 255, 255, 0.96);
  paint-order: stroke fill;
  text-shadow: none;
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.7))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.4))
    drop-shadow(0 1px 2px rgba(45, 36, 24, 0.16));
}

.stage-nav__btn:hover:not(:disabled) .stage-nav__glyph,
.stage-nav__btn:focus-visible:not(:disabled) .stage-nav__glyph {
  -webkit-text-stroke: 2.5px #fff;
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.5))
    drop-shadow(0 1px 2px rgba(45, 36, 24, 0.12));
}

.stage-nav__btn:focus-visible {
  outline: none;
}

.stage-nav__btn:active:not(:disabled) {
  transform: translateY(-50%) scale(0.94);
}

.stage-nav__btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

@media (max-width: 1023px) {
  .stage-nav__glyph {
    font-size: 3.4rem;
  }

  .notebook:has(.chapter.is-active[data-dock-layout="side"]) .stage-nav__btn--next {
    right: max(0.15rem, env(safe-area-inset-right));
  }

  /* Phone：书签改到卡纸最上行横向排列 */
  .notebook {
    --tab-h: 2.65rem;
    --tab-bleed: 8px;
    padding:
      calc(var(--tab-h) + 0.28rem)
      max(0.4rem, env(safe-area-inset-right))
      0.5rem
      max(0.4rem, env(safe-area-inset-left));
  }

  .notebook__page {
    padding: 0.4rem 0.4rem 0.45rem;
    border-radius: 0 0 0.7rem 0.7rem;
    border-left: 1px solid color-mix(in srgb, var(--page-bg) 70%, var(--soil-deep));
    border-top: 0;
  }

  .bookmark-nav {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    /* 含向下 bleed 的高度；底部 bleed 叠进卡纸上沿 */
    height: calc(var(--tab-h) + var(--tab-bleed));
    transform: translateY(calc(-100% + var(--tab-bleed)));
    overflow: visible;
  }

  /* 横向滚动放在内层；bleed 落在 nav 盒内，避免 overflow-x 裁切 */
  .bookmark-nav__track {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.18rem;
    width: 100%;
    height: 100%;
    padding: 0 0.15rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .bookmark-nav__track::-webkit-scrollbar {
    display: none;
  }

  .bookmark-nav__tab {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.04rem;
    min-width: 3.15rem;
    width: auto;
    height: var(--tab-h);
    padding: 0.2rem 0.42rem 0.28rem;
    border: 1px solid color-mix(in srgb, var(--tab-bg) 40%, #fff);
    border-bottom: 0;
    border-radius: 0.55rem 0.55rem 0 0;
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--tab-bg) 78%, #fff) 0%,
        var(--tab-bg) 48%,
        color-mix(in srgb, var(--tab-bg) 90%, #d9cfc0) 100%
      );
    box-shadow:
      0 -1px 0 color-mix(in srgb, #fff 55%, transparent),
      1px -2px 0 color-mix(in srgb, var(--soil-deep) 7%, transparent),
      2px -3px 8px color-mix(in srgb, var(--soil-deep) 9%, transparent);
    transition: box-shadow 0.18s ease, filter 0.18s ease, height 0.18s ease;
  }

  .bookmark-nav__tab[aria-current="step"] {
    width: auto;
    height: calc(var(--tab-h) + var(--tab-bleed));
    border: 0;
    background: var(--page-bg);
    box-shadow:
      0 -1px 0 color-mix(in srgb, #fff 45%, transparent),
      1px -2px 0 color-mix(in srgb, var(--soil-deep) 5%, transparent),
      2px -3px 8px color-mix(in srgb, var(--soil-deep) 8%, transparent);
  }

  .bookmark-nav__tab.is-ready:not([aria-current="step"]) {
    box-shadow:
      0 -1px 0 color-mix(in srgb, #fff 55%, transparent),
      1px -2px 0 color-mix(in srgb, var(--canopy) 10%, transparent),
      2px -3px 8px color-mix(in srgb, var(--soil-deep) 9%, transparent);
  }

  .bookmark-nav__n {
    font-size: 0.6rem;
  }

  .bookmark-nav__title {
    font-size: 0.62rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 4.2rem;
  }
}

.dock .kicker {
  font-family: var(--font-ui);
  font-size: clamp(0.58rem, 1.1cqw, 0.7rem);
  letter-spacing: 0.04em;
  font-weight: 700;
  color: color-mix(in srgb, #2a1a0c 72%, transparent);
  margin: 0 0 0.2rem;
}

.dock h2 {
  font-family: var(--font-ui);
  margin: 0 0 0.28rem;
  font-size: clamp(0.78rem, 1.55cqw, 0.98rem);
  color: #2a1a0c;
  font-weight: 700;
  line-height: 1.25;
}

.dock .define {
  margin: 0 0 0.22rem;
  font-size: clamp(0.72rem, 1.35cqw, 0.88rem);
  color: #2a1a0c;
}

.dock .break {
  margin: 0 0 0.35rem;
  font-size: clamp(0.68rem, 1.25cqw, 0.82rem);
  color: color-mix(in srgb, #2a1a0c 82%, transparent);
}

.dock .transition {
  margin: 0 0 0.55rem;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  background: transparent;
  border-radius: 0;
  color: var(--soil-deep);
}

.dock .beat-b {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px dashed color-mix(in srgb, var(--soil-light) 70%, transparent);
}

.dock .beat-b ul {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--muted);
}

.dock .meta {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0.5rem 0 0;
}

.dock .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 1rem;
  margin-top: 0.65rem;
  background: var(--accent-cta);
  color: #fff;
  text-decoration: none;
  border-radius: 0.25rem;
  font-family: var(--font-ui);
  font-size: 0.88rem;
}

.reduced-note {
  display: none;
  margin: 0;
  padding: 0.4rem 1rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  background: var(--dawn);
  color: var(--muted);
}

/* —— GardenStage 分层画布（05） —— */
.garden-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--mist);
}

.garden-stage__world {
  position: relative;
  width: calc(var(--art-w, 320) * 1px);
  height: calc(var(--art-h, 180) * 1px);
  flex-shrink: 0;
  transform-origin: center center;
  image-rendering: pixelated;
}

.garden-stage__fx {
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  overflow: hidden;
}

.garden-layer {
  position: absolute;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  appearance: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.garden-layer--branch,
.garden-layer--water,
.garden-layer--tip {
  cursor: pointer;
}

.garden-layer__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  image-rendering: pixelated;
  opacity: 1;
}

.garden-layer__img--wet[hidden] {
  display: none !important;
}

.garden-layer--branch {
  filter: none;
}

.garden-layer--branch:hover,
.garden-layer--branch:focus-visible {
  filter:
    drop-shadow(1px 0 0 var(--water))
    drop-shadow(-1px 0 0 var(--water))
    drop-shadow(0 1px 0 var(--water))
    drop-shadow(0 -1px 0 var(--water));
}

.garden-layer--branch.is-selected {
  filter:
    drop-shadow(1px 0 0 var(--sprout))
    drop-shadow(-1px 0 0 var(--sprout))
    drop-shadow(0 1px 0 var(--sprout))
    drop-shadow(0 -1px 0 var(--sprout));
}

.garden-layer--branch.is-wet {
  filter:
    drop-shadow(1px 0 0 var(--water))
    drop-shadow(-1px 0 0 var(--water))
    drop-shadow(0 1px 0 var(--water))
    drop-shadow(0 -1px 0 var(--water));
}

.garden-layer--water.is-ready-can {
  animation: outline-breathe 1s ease-in-out infinite;
  filter:
    drop-shadow(1px 0 0 var(--bloom))
    drop-shadow(-1px 0 0 var(--bloom))
    drop-shadow(0 1px 0 var(--bloom))
    drop-shadow(0 -1px 0 var(--bloom));
}

.garden-stage.is-done .garden-layer--branch,
.garden-stage.is-done .garden-layer--water {
  pointer-events: none;
}

/* —— S1 浇灌 —— */

.water-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* 露出笔记本卡纸 */
  overflow: hidden;
}

/* 舞台框随全屏舞台放大；木纹画框（无外晕影，避免再叠一层灰边） */
.water-frame {
  --scene-frame: clamp(11px, 1.4vw, 20px);
  position: relative;
  width: min(100%, 1180px);
  max-height: 100%;
  aspect-ratio: 3 / 2;
  border-style: solid;
  border-width: var(--scene-frame);
  border-image-source: url("/assets/ui/ui-dialog-window.png");
  border-image-slice: 197 120 197 126;
  border-image-width: var(--scene-frame);
  border-image-repeat: stretch;
  overflow: hidden;
  filter: none;
  background: transparent;
}

@media (max-width: 1023px) {
  .water-frame {
    --scene-frame: clamp(9px, 2.4vw, 14px);
  }
}

.water-missing {
  margin: 0;
  padding: 1.25rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--soil-deep);
  text-align: center;
}

.water-play-cue {
  display: none;
}

/*
 * 木窗按钮：拍 A CTA / 动作钮 / 选种格 / 重播共用
 * （木纹框 + 纸色底，对齐信息框）
 */
.ui-wood-btn,
.stage-replay,
.water-replay,
.dock[data-role="dock-a"] .btn-meet,
.dock[data-role="dock-a"] .branch-dirs__btn,
.dock[data-role="dock-a"] .water-play .cta,
.dock[data-role="dock-a"] .meet-species {
  --dialog-frame: 10px;
  --dialog-paper: #f2e4c4;
  box-sizing: border-box;
  margin: 0;
  border-style: solid;
  border-width: var(--dialog-frame);
  border-color: transparent;
  border-image-source: url("/assets/ui/ui-dialog-window.png");
  border-image-slice: 197 120 197 126;
  border-image-width: var(--dialog-frame);
  border-image-repeat: stretch;
  border-radius: 0;
  background-color: var(--dialog-paper);
  background-clip: padding-box;
  background-origin: padding-box;
  box-shadow: none;
  color: #2a1a0c;
  font-family: var(--font-ui);
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: pointer;
  image-rendering: pixelated;
  filter: none;
  text-decoration: none;
}

.ui-wood-btn:hover,
.ui-wood-btn:focus-visible,
.stage-replay:hover,
.stage-replay:focus-visible,
.water-replay:hover,
.water-replay:focus-visible,
.dock[data-role="dock-a"] .btn-meet:hover:not(:disabled),
.dock[data-role="dock-a"] .btn-meet:focus-visible:not(:disabled),
.dock[data-role="dock-a"] .branch-dirs__btn:hover:not(:disabled),
.dock[data-role="dock-a"] .branch-dirs__btn:focus-visible:not(:disabled),
.dock[data-role="dock-a"] .water-play .cta:hover,
.dock[data-role="dock-a"] .water-play .cta:focus-visible,
.dock[data-role="dock-a"] .meet-species:hover,
.dock[data-role="dock-a"] .meet-species:focus-visible {
  filter: brightness(1.04);
  outline: none;
}

.ui-wood-btn:active,
.stage-replay:active,
.water-replay:active,
.dock[data-role="dock-a"] .btn-meet:active:not(:disabled),
.dock[data-role="dock-a"] .branch-dirs__btn:active:not(:disabled),
.dock[data-role="dock-a"] .water-play .cta:active,
.dock[data-role="dock-a"] .meet-species:active {
  filter: brightness(0.97);
}

.dock[data-role="dock-a"] .btn-meet:disabled,
.dock[data-role="dock-a"] .branch-dirs__btn:disabled,
.dock[data-role="dock-a"] .meet-species:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

.dock[data-role="dock-a"] .btn-meet,
.dock[data-role="dock-a"] .water-play .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: 0.22rem 0.75rem 0.26rem;
  font-size: clamp(0.72rem, 1.4cqw, 0.84rem);
}

.dock[data-role="dock-a"] .btn-meet--primary {
  background-color: var(--dialog-paper);
  color: #2a1a0c;
}

.dock[data-role="dock-a"] .branch-dirs__btn {
  min-height: 0;
  min-width: 3.6rem;
  padding: 0.2rem 0.65rem 0.24rem;
  font-size: clamp(0.68rem, 1.3cqw, 0.8rem);
}

.dock[data-role="dock-a"] .branch-dirs__btn.is-active {
  filter: brightness(1.06);
  color: #1f1409;
}

.dock[data-role="dock-a"] .branch-dirs__btn.is-done {
  opacity: 0.55;
  cursor: default;
  filter: none;
}

.dock[data-role="dock-a"] .meet-species {
  --dialog-frame: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.16rem 0.12rem 0.2rem;
  font-weight: 600;
  overflow: hidden;
}

.dock[data-role="dock-a"] .meet-species.is-active {
  filter: brightness(1.06);
}

/* 成熟缩略图带浅底：叠乘到纸色底上，去掉白框感 */
.dock[data-role="dock-a"] .meet-species__thumb {
  mix-blend-mode: multiply;
  background: transparent;
}

/* 园景右下「重新播放」落位 */
.stage-replay,
.water-replay {
  position: absolute;
  right: 2.2%;
  bottom: 2.4%;
  z-index: 14;
  padding: 0.18rem 0.55rem 0.22rem;
  font-size: clamp(0.68rem, 1.35cqw, 0.78rem);
  pointer-events: auto;
}

.stage-replay[hidden],
.water-replay[hidden] {
  display: none !important;
}

.water-speech {
  position: absolute;
  left: 8%;
  top: 10%;
  z-index: 7;
  max-width: min(46%, 280px);
  padding: 0.45rem 0.65rem;
  border-radius: 0.45rem;
  background: color-mix(in srgb, #fff 94%, var(--dawn));
  border: 1px solid color-mix(in srgb, var(--soil-light) 60%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--soil-deep) 12%, transparent);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--soil-deep);
  pointer-events: none;
}

.water-speech::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-right: 1px solid color-mix(in srgb, var(--soil-light) 60%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--soil-light) 60%, transparent);
  transform: rotate(45deg);
}

.water-speech[hidden] {
  display: none !important;
}

.water-sparkles {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.water-sparkles[hidden] {
  display: none !important;
}

.water-sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  opacity: 0;
  background: radial-gradient(circle, #fff9d6 0 28%, transparent 70%);
  filter: drop-shadow(0 0 3px #ffe082);
  transition: opacity 0.12s ease;
}

.water-sparkle::before,
.water-sparkle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff8e1;
  transform: translate(-50%, -50%);
}

.water-sparkle::before {
  width: 2px;
  height: 10px;
}

.water-sparkle::after {
  width: 10px;
  height: 2px;
}

.water-sparkles[data-pattern="a"] .water-sparkle--a,
.water-sparkles[data-pattern="b"] .water-sparkle--b {
  opacity: 0.95;
}

.water-stage.is-greeting.is-wave-pulse .water-layer--stage.is-shown {
  filter: brightness(1.04) saturate(1.05);
}

.water-stage.is-watering .water-layer--stage.is-shown {
  filter: brightness(1.03) saturate(1.06);
}

.water-stage.is-lush .water-layer--stage.is-shown {
  filter: saturate(1.08) brightness(1.02);
}

.water-stage.is-wet {
  box-shadow: inset 0 -18px 28px color-mix(in srgb, var(--water) 18%, transparent);
}

.water-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

/* S1c · 分层：仅 bg/ground 铺满；树图层勿用 fill（竖图画布会被压扁） */
/* --art-h / --feet-pad / --rive-art-h 由 water.js 按画布写入 */
.water-frame--layered {
  --art-h: 1024;
  --feet-pad: 169;
  --rive-art-h: 262;
  container-type: size;
}

.water-frame--layered .water-layer {
  position: absolute;
  display: block;
  pointer-events: none;
}

.water-frame--layered .water-layer--bg,
.water-frame--layered .water-layer--ground,
.water-frame--layered .water-layer--env {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.water-layer--bg {
  z-index: 0;
}

.water-layer--env {
  z-index: 0;
}

.water-layer--ground {
  z-index: 1;
}

.water-frame--layered .water-layer--trunk {
  z-index: 2;
  left: 68%;
  bottom: 10%;
  width: auto;
  height: 72%;
  transform: translateX(-50%);
  transform-origin: center bottom;
}

.water-frame--layered .water-layer--canopy {
  z-index: 3;
  left: 68%;
  bottom: 22%;
  width: auto;
  height: 55%;
  opacity: 0;
  transition: opacity 0.55s ease;
  transform: translateX(-50%);
  transform-origin: center bottom;
}

.water-layer--canopy.is-shown {
  opacity: 1;
}

.water-layer--canopy.is-fading {
  opacity: 0;
}

/* 整株 stages：height + width:auto → 浏览器按固有比例缩放，无法被拉扁 */
.water-stages {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* 树：贴底 + treeSink；scale 绕脚底线（非画布底），避免放大后脚漂移 */
.water-frame--layered .water-layer--stage {
  z-index: 3;
  left: 50%;
  bottom: calc(-100% * var(--tree-sink, 0) / var(--art-h));
  width: auto;
  height: 100%;
  opacity: 0;
  transition: opacity 0.55s ease;
  transform: translateX(-50%) scale(var(--tree-scale, 1));
  /* 脚底约在画布底之上 feet-pad px；绕该线缩放，脚钉在木板上 */
  transform-origin: center
    calc(100% * (1 - var(--feet-pad, 169) / var(--art-h, 1024)));
}

.water-layer--stage.is-shown {
  opacity: 1;
}

.water-layer--stage.is-fading {
  opacity: 0;
}

/* 六态预览条：核对物料组装用 */
.water-stage-scrub {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 2.5%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.28rem;
  padding: 0.28rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--soil-light) 55%, transparent);
  pointer-events: auto;
}

.water-stage-scrub__btn {
  min-width: 1.7rem;
  height: 1.55rem;
  padding: 0 0.35rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  line-height: 1;
  color: color-mix(in srgb, var(--soil-deep) 70%, transparent);
  background: transparent;
  cursor: pointer;
}

.water-stage-scrub__btn:hover {
  background: color-mix(in srgb, var(--soil-light) 35%, transparent);
}

.water-stage-scrub__btn.is-active {
  color: #fff;
  background: color-mix(in srgb, var(--soil-deep) 78%, #3a6b4a);
}

/* 暂用 mature 整株垫树时：略偏右，给左侧园丁留空 */
.water-stage--rive:not(.has-trunk) .water-layer--canopy {
  object-position: 72% 50%;
  transform: scale(0.92);
  transform-origin: 72% 85%;
}

.water-tree-placeholder {
  position: absolute;
  z-index: 3;
  right: 12%;
  top: 18%;
  width: 28%;
  min-height: 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--soil-deep) 55%, transparent);
  border: 1px dashed color-mix(in srgb, var(--soil-light) 50%, transparent);
  border-radius: 0.4rem;
  background: color-mix(in srgb, #fff 35%, transparent);
  pointer-events: none;
}

.water-tree-placeholder span {
  margin-top: 0.25rem;
  font-size: 0.65rem;
  opacity: 0.8;
}

/* S1c · Rive：R/S 同脚底线；--char-scale / --char-sink 补偿 riv 内角色占比 */
.water-rive {
  --walk-x: 0%;
  --char-scale: 1;
  --char-sink: 0%;
  --rive-h: calc(100% * var(--rive-art-h) / var(--art-h));
  position: absolute;
  z-index: 5;
  left: 4%;
  bottom: calc(100% * var(--feet-pad) / var(--art-h));
  height: calc(var(--rive-h) * var(--char-scale));
  width: auto;
  aspect-ratio: 250 / 300;
  transform: translateX(var(--walk-x)) translateY(var(--char-sink));
  transform-origin: center bottom;
  transition: transform 0s linear;
  pointer-events: none;
  image-rendering: pixelated;
  overflow: visible;
}

.water-rive.is-walking {
  transition-property: transform;
  transition-timing-function: linear;
}

/* S · 旁观者：树右侧稍近；可下沉与 R 齐脚；不跟走 */
.water-rive--spectator {
  left: auto;
  right: 25%;
  z-index: 5;
  --char-scale: 1;
  transform: translateY(var(--char-sink, 0%));
  transform-origin: center bottom;
}

.water-rive__canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.water-drop {
  position: absolute;
  top: 8%;
  left: var(--x, 50%);
  width: calc(5px * var(--scale, 1));
  height: calc(9px * var(--scale, 1));
  border-radius: 40% 40% 45% 45%;
  background: color-mix(in srgb, var(--water) 85%, #fff);
  opacity: 0;
  animation: drop-fall var(--dur, 0.7s) var(--delay, 0s) ease-in forwards;
}

@keyframes drop-fall {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  12% {
    opacity: 0.95;
  }
  100% {
    transform: translateY(72vh) scale(0.7);
    opacity: 0;
  }
}

.hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hotspot-layer.is-done .img-hotspot--branch,
.hotspot-layer.is-done .img-hotspot--water {
  pointer-events: none;
}

.img-hotspot {
  fill: transparent;
  stroke: transparent;
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
  cursor: pointer;
  transition: fill 0.18s ease, stroke 0.18s ease, stroke-width 0.18s ease,
    filter 0.22s ease;
  outline: none;
  pointer-events: all;
}

/* 未选中：无线；悬停仅淡填提示可点 */
.img-hotspot--branch:hover,
.img-hotspot--branch:focus-visible {
  fill: color-mix(in srgb, #e8c76a 10%, transparent);
  stroke: transparent;
  animation: none;
}

.img-hotspot--branch.is-selected {
  fill: transparent;
  stroke: #ffd54f;
  stroke-width: 5;
  stroke-opacity: 0.95;
  filter: drop-shadow(0 0 2px #fff3c4) drop-shadow(0 0 7px color-mix(in srgb, #ffb300 75%, transparent));
  animation: gold-glow 1.5s ease-in-out infinite;
}

.img-hotspot--branch.is-wet {
  fill: transparent;
  stroke: transparent;
  filter: none;
  animation: none;
}

.img-hotspot--water:hover,
.img-hotspot--water:focus-visible {
  fill: color-mix(in srgb, var(--bloom) 12%, transparent);
  stroke: transparent;
}

/* 已选方向后：浇壶金边提示，不盖住本体 */
.img-hotspot--water.is-ready-can {
  fill: transparent;
  stroke: #ffd54f;
  stroke-width: 5;
  stroke-opacity: 0.95;
  filter: drop-shadow(0 0 2px #fff3c4) drop-shadow(0 0 8px color-mix(in srgb, #ffb300 70%, transparent));
  animation: gold-glow 1.2s ease-in-out infinite;
}

.img-hotspot--tip:hover,
.img-hotspot--tip:focus-visible {
  fill: color-mix(in srgb, #fff 12%, transparent);
  stroke: transparent;
}

@keyframes gold-glow {
  0%,
  100% {
    stroke: #ffca28;
    filter: drop-shadow(0 0 1px #fff8e1) drop-shadow(0 0 5px color-mix(in srgb, #ffb300 65%, transparent));
  }
  50% {
    stroke: #ffe082;
    filter: drop-shadow(0 0 2px #fffde7) drop-shadow(0 0 9px color-mix(in srgb, #ffc107 80%, transparent));
  }
}

@keyframes outline-breathe {
  0%,
  100% {
    stroke-opacity: 0.4;
  }
  50% {
    stroke-opacity: 0.95;
  }
}

.float-tip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -100%);
  max-width: min(220px, 70%);
  padding: 0.4rem 0.55rem;
  border-radius: 0.3rem;
  background: color-mix(in srgb, #fff 92%, var(--dawn));
  border: 1px solid color-mix(in srgb, var(--soil-light) 65%, transparent);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--soil-deep);
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--soil-deep) 12%, transparent);
}

.float-tip.is-pop {
  opacity: 1;
  animation: tip-pop 0.25s ease;
}

@keyframes tip-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -90%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -100%);
  }
}

.water-dock .hint {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  color: var(--muted);
  margin: 0.35rem 0 0.35rem;
}

.water-dock .hint.is-success {
  color: var(--canopy);
}

.water-dock .hint.is-warn {
  color: #8a5a2b;
}

.water-dock__b .transition {
  margin: 0 0 0.55rem;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  background: transparent;
  border-radius: 0;
}

.water-cta {
  margin: 0.65rem 0 0;
}

.water-cta .cta {
  margin-top: 0;
}

.water-play {
  margin: 0.55rem 0 0.15rem;
}

.water-play .cta {
  margin-top: 0;
  cursor: pointer;
}

.water-play .cta[hidden] {
  display: none !important;
}

.branch-dirs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.35rem 0 0.55rem;
}

.branch-dirs.is-locked {
  pointer-events: none;
  opacity: 0.72;
}

.branch-dirs__btn.is-done::after {
  content: " ✓";
  font-size: 0.75em;
}

.branch-dirs__label {
  font-weight: 500;
}

.water-dock__b.is-enter {
  animation: beat-b-in 0.45s ease;
}

@keyframes beat-b-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 拍 B 子页签（章 3：记录 / 执行） */
.beat-b-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.4rem 0 0.2rem;
}

.beat-b-tabs__btn {
  appearance: none;
  margin: 0;
  padding: 0.28rem 0.7rem 0.3rem;
  border: 1px solid color-mix(in srgb, var(--soil-deep) 14%, transparent);
  border-radius: 0.35rem;
  background: color-mix(in srgb, #fffef8 88%, var(--soil-light));
  color: color-mix(in srgb, var(--soil-deep) 72%, var(--muted));
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  cursor: pointer;
}

.beat-b-tabs__btn:hover,
.beat-b-tabs__btn:focus-visible {
  border-color: color-mix(in srgb, var(--canopy) 45%, var(--soil-light));
  color: color-mix(in srgb, var(--soil-deep) 70%, var(--canopy));
  outline: none;
}

.beat-b-tabs__btn[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--canopy) 55%, var(--soil-deep));
  background: color-mix(in srgb, var(--canopy) 16%, #fffef8);
  color: color-mix(in srgb, var(--soil-deep) 60%, var(--canopy));
}

.beat-b-panel {
  margin: 0.15rem 0 0;
}

.beat-b-panel[hidden] {
  display: none;
}

.beat-b-panel > .define {
  margin-top: 0.35rem;
}

.water-steps {
  margin: 0.35rem 0 0.75rem;
  padding-left: 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  color: var(--muted);
}

.water-steps li {
  margin: 0.28rem 0;
}

.water-steps__text {
  vertical-align: middle;
}

/* Desk 底栏「目标树」Tab 示意（插在「目标树」文案前） */
.water-steps__tab {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin: 0 0.1em 0 0.06em;
  vertical-align: -0.18em;
  overflow: visible;
}

/* Desk 右下「新增目标树」FAB 示意（插在「新增目标树」文案前） */
.water-steps__fab {
  display: inline-block;
  width: 1.45em;
  height: 1.45em;
  margin: 0 0.12em 0 0.08em;
  vertical-align: -0.38em;
  object-fit: contain;
  flex-shrink: 0;
  overflow: visible;
}

.meet-echo {
  margin: 0.2rem 0 0.15rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--soil-deep) 88%, var(--canopy));
}

/* 拍 B 选型提示：与步骤正文区分开 */
.meet-tip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.28rem 0.4rem;
  margin: 0.15rem 0 0.5rem;
  padding: 0.42rem 0.55rem 0.45rem 0.6rem;
  border-left: 3px solid color-mix(in srgb, var(--canopy) 70%, var(--soil-light));
  border-radius: 0 0.35rem 0.35rem 0;
  background: color-mix(in srgb, var(--canopy) 12%, #fffef8);
  font-family: var(--font-ui);
  font-size: 0.76rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--soil-deep) 78%, var(--canopy));
}

.meet-tip__label {
  flex: 0 0 auto;
  padding: 0.06rem 0.35rem;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--canopy) 22%, #fff);
  color: color-mix(in srgb, var(--soil-deep) 55%, var(--canopy));
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
}

.meet-tip__body {
  flex: 1 1 10rem;
  min-width: 0;
}

.ui-mock-slot {
  margin: 0;
  text-align: center;
  line-height: 0;
}

.ui-mock-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.45rem 0 0.25rem;
}

.ui-mock-figure {
  margin: 0;
  text-align: center;
}

.ui-mock-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0.5rem 0 0;
  vertical-align: top;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
}

.ui-mock-frame--zoomable {
  cursor: pointer;
}

.ui-mock-frame--zoomable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--canopy) 70%, transparent);
  outline-offset: 3px;
  border-radius: 0.4rem;
}

.ui-mock-zoom-hint {
  position: absolute;
  right: 0.35rem;
  bottom: 0.35rem;
  z-index: 3;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soil-deep) 72%, transparent);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
}

.ui-mock-caption {
  margin: 0.35rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}

.ui-mock {
  display: block;
  max-width: min(220px, 70%);
  max-height: 280px;
  width: auto;
  height: auto;
  border-radius: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--soil-light) 60%, transparent);
  object-fit: contain;
  background: #fff;
}

/* 序号钉：默认圆点；悬停 / 放大层展开全文 */
.ui-mock-pin {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0;
  max-width: 1.2rem;
  min-height: 1.2rem;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--canopy) 75%, #fff);
  background: color-mix(in srgb, var(--canopy) 90%, #0a4a4d);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transform: translate(-30%, -30%);
  overflow: hidden;
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: default;
  pointer-events: auto;
  transition:
    max-width 0.18s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.ui-mock-pin__mark {
  flex: 0 0 1.15rem;
  width: 1.15rem;
  height: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
}

.ui-mock-pin__body {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.62rem;
  font-weight: 650;
  transition:
    max-width 0.18s ease,
    opacity 0.14s ease,
    padding 0.18s ease;
}

.ui-mock-pin:hover,
.ui-mock-pin:focus-visible,
.ui-mock-pin--open {
  max-width: min(12.5rem, 70vw);
  background: color-mix(in srgb, #fffef8 92%, var(--canopy));
  color: color-mix(in srgb, var(--soil-deep) 92%, #1a1208);
  border-color: color-mix(in srgb, var(--canopy) 55%, var(--soil-deep));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.ui-mock-pin:hover .ui-mock-pin__body,
.ui-mock-pin:focus-visible .ui-mock-pin__body,
.ui-mock-pin--open .ui-mock-pin__body {
  max-width: 11rem;
  opacity: 1;
  padding: 0.2rem 0.4rem 0.2rem 0.1rem;
}

.ui-mock-pin:hover .ui-mock-pin__mark,
.ui-mock-pin:focus-visible .ui-mock-pin__mark,
.ui-mock-pin--open .ui-mock-pin__mark {
  color: color-mix(in srgb, var(--canopy) 85%, #0a4a4d);
}

.ui-mock-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  background: rgba(20, 16, 12, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ui-mock-lightbox__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(36rem, 98vw);
  max-height: 96vh;
  overflow: auto;
  padding: 0.65rem 0.75rem 0.55rem;
  border-radius: 0.65rem;
  background: #fffef8;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.ui-mock-lightbox__close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 5;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soil-deep) 14%, #fff);
  color: var(--soil-deep);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.ui-mock-lightbox__stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0.15rem auto 0;
  vertical-align: top;
  align-self: center;
  line-height: 0;
}

/* 竖屏截图按视口高度撑开；源图偏小时允许轻度放大 */
.ui-mock-lightbox__img {
  display: block;
  width: auto;
  height: min(82vh, 1100px);
  max-width: min(100%, 34rem);
  border-radius: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--soil-light) 55%, transparent);
  background: #fff;
  object-fit: contain;
}

/* 放大层：序号 + 说明常开叠在图上 */
.ui-mock-lightbox__stage .ui-mock-pin--open {
  max-width: min(14rem, 72%);
  z-index: 4;
}

.ui-mock-lightbox__stage .ui-mock-pin--open .ui-mock-pin__mark {
  flex-basis: 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  font-size: 0.78rem;
}

.ui-mock-lightbox__stage .ui-mock-pin--open .ui-mock-pin__body {
  max-width: 12.5rem;
  opacity: 1;
  padding: 0.28rem 0.5rem 0.28rem 0.15rem;
  font-size: 0.78rem;
  white-space: normal;
  line-height: 1.35;
}

.ui-mock-lightbox__caption,
.ui-mock-lightbox__hint {
  margin: 0.45rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.35;
}

.ui-mock-lightbox__hint {
  font-size: 0.68rem;
}

.forest-dock .ui-mock {
  max-width: min(260px, 88%);
  max-height: min(52vh, 360px);
}

/* —— S2 章0 · 遇见 —— */

.meet-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}

/* 遇见选种：对话框挂在园景画框内（相对 3:2 图定位，不相对整页 stage） */
.meet-dialog[hidden] {
  display: none !important;
}

/*
 * 左上信息框 + 右上拍 A：同宽，相对园景画框宽度比例缩放
 * （拍 B 侧栏出现 → stage/画框变窄 → 两窗同步变窄；勿用固定 rem 锁死）
 */
.water-frame--layered:has(> .forest-dialog),
.water-frame:has(> .forest-dialog) {
  container-type: inline-size;
  container-name: garden-frame;
  --meet-panel-w: min(28cqw, 18.5rem);
}

.chapter[data-dock-layout="side"] .water-frame--layered:has(> .forest-dialog),
.chapter[data-dock-layout="side"] .water-frame:has(> .forest-dialog) {
  --meet-panel-w: min(30cqw, 16.5rem);
}

.meet-frame > .meet-dialog.forest-dialog,
.sprout-frame > .meet-dialog.forest-dialog,
.stance-frame > .meet-dialog.forest-dialog,
.forest-frame > .forest-dialog {
  position: absolute;
  top: 2.2%;
  left: 2.4%;
  margin: 0;
  width: min(42%, 320px);
  max-height: min(58%, 360px);
  min-height: 7rem;
  z-index: 12;
  pointer-events: none;
}

/* 配对窗：左框完整展示，与右坞同宽 */
.water-frame--layered:has(> .forest-dialog) > .forest-dialog,
.water-frame:has(> .forest-dialog) > .forest-dialog {
  width: var(--meet-panel-w);
  max-width: var(--meet-panel-w);
  max-height: none;
  min-height: 0;
  height: auto;
  overflow: visible;
}

.water-frame--layered:has(> .forest-dialog) > .forest-dialog .forest-dialog__panel,
.water-frame:has(> .forest-dialog) > .forest-dialog .forest-dialog__panel {
  overflow: visible;
  flex: 0 0 auto;
}

.water-frame--layered:has(> .forest-dialog) > .forest-dialog .forest-dialog__blurb,
.water-frame:has(> .forest-dialog) > .forest-dialog .forest-dialog__blurb {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.water-frame--layered:has(> .forest-dialog) > .dock[data-role="dock-a"],
.water-frame:has(> .forest-dialog) > .dock[data-role="dock-a"] {
  width: var(--meet-panel-w);
  max-width: var(--meet-panel-w);
  height: auto;
  max-height: min(72%, 32rem);
  overflow-x: hidden;
  overflow-y: auto;
}

.meet-dialog__form {
  margin: 0;
  font-size: clamp(0.58rem, 1.15cqw, 0.72rem);
  font-weight: 600;
  color: color-mix(in srgb, var(--canopy) 72%, #2a1a0c);
}

.meet-dialog__section-label {
  margin: 0.28rem 0 0.05rem;
  font-size: clamp(0.52rem, 1cqw, 0.64rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, #2a1a0c 72%, transparent);
}

.meet-dialog__section-label--goal {
  margin-top: 0.35rem;
  padding-top: 0.22rem;
  border-top: 1px solid color-mix(in srgb, #8b5a2b 28%, transparent);
}

.meet-dialog .meet-dialog__plant,
.meet-dialog .meet-dialog__goal {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* 发芽信息框：状态徽章钉在右上 */
.sprout-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
}

.sprout-dialog__head-main {
  min-width: 0;
  flex: 1 1 auto;
}

.sprout-dialog__head .forest-dialog__badge {
  flex: 0 0 auto;
  margin-top: 0.12rem;
  white-space: nowrap;
}

.meet-seedling {
  opacity: 0;
  z-index: 3;
}

.meet-seedling.is-shown {
  opacity: 1;
}

/* 选种预览：将来种树位虚化终极形态（花果） */
.meet-ghost {
  opacity: 0;
  z-index: 2;
  filter: grayscale(0.18) brightness(1.08);
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.meet-ghost.is-shown {
  opacity: 0.38;
}

.meet-ghost[hidden] {
  display: none !important;
}

/* 种好后：树脚旁树名木牌（略压 S 前，但须与画框同比例缩放） */
.meet-sign {
  position: absolute;
  z-index: 6;
  left: calc(50% + 5.5%);
  bottom: calc(9% + 100% * var(--tree-sink, 0) / var(--art-h, 1024));
  /* 约 96 art-px；跟 Rive/树一样用画框高度百分比，勿用 vh（窄屏会相对过大遮住 S） */
  height: calc(100% * 96 / var(--art-h, 1024));
  width: auto;
  opacity: 0;
  pointer-events: none;
  object-fit: contain;
  image-rendering: pixelated;
  transition: opacity 0.45s ease;
}

.meet-sign.is-shown {
  opacity: 1;
}

.meet-sign[hidden] {
  display: none !important;
}

/* 选种改在旁白坞内（埋种按钮上方） */
.meet-species-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
  margin: 0.2rem 0 0.15rem;
}

.meet-species-picker.is-locked {
  pointer-events: none;
  opacity: 0.55;
}

.meet-species {
  font-family: var(--font-ui);
  color: #2a1a0c;
  cursor: pointer;
}

.meet-species:disabled {
  cursor: default;
}

.meet-species__thumb {
  width: 2.8rem;
  height: 1.9rem;
  object-fit: contain;
  image-rendering: pixelated;
}

.meet-species__name {
  font-size: 0.68rem;
  line-height: 1.2;
}

.meet-dock.water-dock {
  gap: 0;
}

.meet-picked {
  margin: 0.15rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--canopy);
}

.meet-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.45rem;
}

/* 拍 A 主按钮视觉见上方木窗按钮；此处仅保留结构间距兜底 */
.btn-meet {
  font-family: var(--font-ui);
  cursor: pointer;
}

.btn-meet--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* —— S3 章6 · 林 —— */
.forest-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: transparent; /* 露出笔记本卡纸 */
  overflow: hidden;
}

/* 对话框与林图同宽定位盒：Desk 叠层相对图框，避免相对整页 stage 偏出画外 */
.forest-stage__canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(100%, 1180px);
  height: 100%;
  min-height: 0;
  max-height: 100%;
}

/* 与浇灌等章同宽（water-frame 1180）；不再用 scale 拉远制造左右空隙 */
.forest-frame {
  transform: none;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  align-self: stretch;
}

.forest-grove {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.forest-grove.is-locked {
  pointer-events: none;
}

.forest-tree {
  position: absolute;
  /* 种在中近景草地（略抬高，贴近远景林缘） */
  bottom: calc(25% + 100% * var(--tree-sink, 0) / var(--art-h, 1024));
  transform: translateX(-50%);
  /* 命中区收窄到树干附近，避免透明边盖住邻树 */
  width: 7.5%;
  height: 38%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  display: block;
  overflow: visible;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 3;
}

.forest-tree:focus,
.forest-tree:focus-visible {
  outline: none;
}

.forest-tree__plant {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  width: auto;
  /* 视觉可比命中盒更高；点击只认窄命中盒 */
  height: 155%;
  max-height: none;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  transform: translateX(-50%) scale(var(--tree-scale, 1));
  transform-origin: center bottom;
  transition: filter 0.25s ease, transform 0.25s ease;
  filter: none;
  pointer-events: none;
}

/* 伴生树：实体显示，略小于英雄株 */
.forest-tree--sil {
  width: 6.5%;
  height: 28%;
  z-index: 3;
}

.forest-tree--sil .forest-tree__plant {
  height: 145%;
}

.forest-tree--hero {
  width: 8.5%;
  height: 40%;
  z-index: 5;
}

.forest-tree--hero .forest-tree__plant {
  height: 165%;
}

.forest-tree:hover .forest-tree__plant,
.forest-tree:focus-visible .forest-tree__plant {
  filter: brightness(1.04);
}

.forest-tree:hover .forest-tree__sign,
.forest-tree:focus-visible .forest-tree__sign {
  filter: brightness(1.06);
}

.forest-tree.is-focus .forest-tree__plant {
  /* 选中金边（像素描边感，对齐浇灌热区） */
  filter:
    drop-shadow(1px 0 0 #ffe082)
    drop-shadow(-1px 0 0 #ffe082)
    drop-shadow(0 1px 0 #ffe082)
    drop-shadow(0 -1px 0 #ffe082)
    drop-shadow(0 0 4px color-mix(in srgb, #ffb300 70%, transparent));
  transform: translateX(-50%) scale(calc(var(--tree-scale, 1) * 1.04));
}

.forest-tree.is-focus {
  z-index: 6;
}

/* 像素木牌：插在树脚旁，不跟树 scale；高度约为伴生/英雄株的 ~1/5～1/6 */
.forest-tree__sign {
  position: absolute;
  bottom: 1%;
  height: min(5.2vh, 44px);
  width: auto;
  max-width: none;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 4;
  filter: none;
  transform: none;
}

.forest-tree--sign-end .forest-tree__sign {
  left: calc(58% + 0.1rem);
  right: auto;
}

.forest-tree--sign-start .forest-tree__sign {
  right: calc(58% + 0.1rem);
  left: auto;
}

.forest-tree--sil .forest-tree__sign {
  height: min(4.2vh, 36px);
}

/* 林章/树信息对话框：木纹外框 + 平坦纸色内底（与拍 A 坞一致） */
.forest-dialog {
  --dialog-frame: 22px;
  --dialog-paper: #f2e4c4;
  position: relative;
  top: auto;
  left: auto;
  z-index: 10;
  box-sizing: border-box;
  width: min(100%, 320px);
  max-width: 100%;
  max-height: none;
  min-height: 0;
  margin: 0.35rem auto 0.3rem;
  flex: 0 0 auto;
  padding: 0.28rem 0.4rem 0.32rem;
  border-style: solid;
  border-width: var(--dialog-frame);
  border-image-source: url("/assets/ui/ui-dialog-window.png");
  border-image-slice: 197 120 197 126;
  border-image-width: var(--dialog-frame);
  border-image-repeat: stretch;
  background-color: var(--dialog-paper);
  background-clip: padding-box;
  background-origin: padding-box;
  image-rendering: pixelated;
  pointer-events: none;
  filter: none;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .forest-stage {
    justify-content: center;
  }

  .forest-stage__canvas {
    /* 高度由 3:2 画框决定，避免 absolute 对话框相对过高 stage 错位 */
    height: auto;
    max-height: 100%;
  }

  .forest-frame {
    flex: 0 0 auto;
    max-height: 100%;
  }

  .forest-dialog {
    position: absolute;
    top: 2.2%;
    left: 2.4%;
    margin: 0;
    width: min(40%, 300px);
    max-height: min(58%, 340px);
    min-height: 7.5rem;
  }

  /* 叠在园景画框内的信息框：跟 --meet-panel-w（cqw）走，勿被上面 300px 锁死 */
  .water-frame:has(> .forest-dialog) > .forest-dialog,
  .water-frame--layered:has(> .forest-dialog) > .forest-dialog {
    width: var(--meet-panel-w);
    max-width: var(--meet-panel-w);
    max-height: none;
    min-height: 0;
  }
}

.forest-dialog__panel {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  overflow-x: hidden;
  overflow-y: auto;
  color: #2a1a0c;
  font-family: var(--font-ui);
  line-height: 1.25;
}

.forest-dialog__title {
  margin: 0;
  font-size: clamp(0.72rem, 1.5cqw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.forest-dialog__row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.forest-dialog__vitality {
  font-size: clamp(0.78rem, 1.6cqw, 1rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--canopy);
}

.forest-dialog__badge {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--canopy) 16%, #fff);
  color: var(--soil-deep);
}

.forest-dialog[data-status="prune"] .forest-dialog__badge {
  background: color-mix(in srgb, #c47a2c 22%, #fff);
}

.forest-dialog[data-status="growing"] .forest-dialog__badge {
  background: color-mix(in srgb, #3d8b5a 18%, #fff);
}

.forest-dialog__tags,
.forest-dialog__status,
.forest-dialog__updated,
.forest-dialog__blurb,
.forest-dialog__advice {
  margin: 0;
  font-size: clamp(0.58rem, 1.15cqw, 0.72rem);
  color: color-mix(in srgb, #2a1a0c 82%, transparent);
}

.forest-dialog__tags {
  font-weight: 600;
}

.forest-dialog__status {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.54rem, 1.05cqw, 0.68rem);
  opacity: 0.88;
}

.forest-dialog__updated {
  font-size: clamp(0.52rem, 1cqw, 0.64rem);
  opacity: 0.72;
}

.forest-dialog__blurb {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.forest-dialog__advice {
  margin-top: 0.1rem;
  padding-top: 0.2rem;
  border-top: 1px solid color-mix(in srgb, #8b5a2b 28%, transparent);
}

.forest-dialog__advice-label {
  display: inline;
  font-weight: 700;
  color: var(--soil-deep);
  margin-right: 0.25rem;
}

.forest-dialog__advice-label::after {
  content: " ·";
}

/* 林章 / 遇见 / 发芽·分枝：R 用 --patrol-x（中心锚点，起始勿贴 0） */
.forest-frame > .water-rive:not(.water-rive--spectator),
.meet-frame > .water-rive:not(.water-rive--spectator),
.sprout-frame > .water-rive:not(.water-rive--spectator),
.stance-frame > .water-rive:not(.water-rive--spectator) {
  left: var(--patrol-x);
  right: auto;
  z-index: 4;
  transform: translateX(-50%) translateY(var(--char-sink, 0%)) scaleX(var(--face-x, 1));
  transform-origin: center bottom;
  transition: left 0s linear;
}

.forest-frame > .water-rive:not(.water-rive--spectator) {
  --patrol-x: 10%;
}

.meet-frame > .water-rive:not(.water-rive--spectator),
.sprout-frame > .water-rive:not(.water-rive--spectator),
.stance-frame > .water-rive:not(.water-rive--spectator) {
  --patrol-x: 12%;
}

/* 向左走时水平镜像，避免侧着「飘」 */
.forest-frame > .water-rive.is-face-left,
.meet-frame > .water-rive.is-face-left,
.sprout-frame > .water-rive.is-face-left,
.stance-frame > .water-rive.is-face-left {
  --face-x: -1;
}

.forest-frame > .water-rive.is-walking,
.meet-frame > .water-rive.is-walking,
.sprout-frame > .water-rive.is-walking,
.stance-frame > .water-rive.is-walking {
  transition-property: left;
  transition-timing-function: linear;
}

.forest-frame > .water-rive--spectator {
  left: auto;
  right: 0.5%;
  z-index: 4;
  transform-origin: right bottom;
}

/* 遇见 / 发芽·分枝：S 可 CSS 平移到种树侧 */
.meet-frame > .water-rive--spectator,
.sprout-frame > .water-rive--spectator,
.stance-frame > .water-rive--spectator {
  left: var(--patrol-x, 90%);
  right: auto;
  z-index: 4;
  transform: translateX(-50%) translateY(var(--char-sink, 0%));
  transform-origin: center bottom;
  transition: left 0s linear;
}

.meet-frame > .water-rive--spectator.is-walking,
.sprout-frame > .water-rive--spectator.is-walking,
.stance-frame > .water-rive--spectator.is-walking {
  transition-property: left;
  transition-timing-function: linear;
}

.forest-dialog.is-tour {
  animation: forest-dialog-pop 0.45s ease;
}

@keyframes forest-dialog-pop {
  0% {
    transform: scale(0.96);
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--soil-deep) 18%, transparent));
  }
  40% {
    transform: scale(1.03);
    filter: drop-shadow(0 0 10px color-mix(in srgb, #ffb300 45%, transparent));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--soil-deep) 18%, transparent));
  }
}

.forest-focused {
  margin: 0.25rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--canopy);
}

/* —— S3 章7 · 知识叶 —— */
.knowledge-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}

.knowledge-tree {
  z-index: 3;
}

/* —— S4 章8 · 作者的树 —— */
.author-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}

.author-tree {
  z-index: 3;
}

/* 叠在画框底部土壤带：透明枝干 scrub */
.author-scrub {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.author-scrub--branch {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: calc(100% * var(--feet-pad, 169) / var(--art-h, 1024) * 0.18);
  transform: translateX(-50%);
  width: min(74%, 27rem);
  padding: 0.15rem 0.35rem 0.1rem;
  pointer-events: auto;
}

.author-scrub.is-locked {
  opacity: 0.45;
  pointer-events: none;
}

.author-scrub__limb {
  position: absolute;
  inset: 0.55rem 0.45rem auto;
  height: 0.72rem;
  pointer-events: none;
}

.author-scrub__bark {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--soil-light) 28%, transparent),
    color-mix(in srgb, var(--soil-mid) 36%, transparent) 48%,
    color-mix(in srgb, var(--soil-deep) 32%, transparent)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--soil-deep) 25%, transparent),
    0 1px 2px color-mix(in srgb, var(--soil-deep) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--soil-deep) 22%, transparent);
}

.author-scrub__knot {
  position: absolute;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  margin-left: -0.21rem;
  border-radius: 50%;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--soil-mid) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--soil-deep) 30%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
}

.author-scrub__knot.is-active {
  width: 0.55rem;
  height: 0.55rem;
  margin-left: -0.275rem;
  background: color-mix(in srgb, var(--canopy) 62%, transparent);
  border-color: color-mix(in srgb, var(--canopy-bright) 55%, transparent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--canopy) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
}

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

.author-scrub__range {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 1.55rem;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.author-scrub__range:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--canopy) 55%, transparent);
  outline-offset: 2px;
  border-radius: 0.35rem;
}

.author-scrub__range::-webkit-slider-runnable-track {
  height: 0.55rem;
  border-radius: 999px;
  background: transparent;
  border: 0;
}

.author-scrub__range::-moz-range-track {
  height: 0.55rem;
  border-radius: 999px;
  background: transparent;
  border: 0;
}

.author-scrub__range::-webkit-slider-thumb {
  appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: calc((0.55rem - 1.05rem) / 2);
  border-radius: 50% 50% 45% 55%;
  background: radial-gradient(
    circle at 35% 30%,
    color-mix(in srgb, var(--sprout) 75%, #fff),
    color-mix(in srgb, var(--canopy) 70%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--canopy) 55%, transparent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--mist) 35%, transparent),
    0 1px 2px color-mix(in srgb, var(--soil-deep) 28%, transparent);
  cursor: grab;
}

.author-scrub__range::-moz-range-thumb {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50% 50% 45% 55%;
  background: radial-gradient(
    circle at 35% 30%,
    color-mix(in srgb, var(--sprout) 75%, #fff),
    color-mix(in srgb, var(--canopy) 70%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--canopy) 55%, transparent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--mist) 35%, transparent),
    0 1px 2px color-mix(in srgb, var(--soil-deep) 28%, transparent);
  cursor: grab;
}

.author-scrub__ticks {
  display: flex;
  justify-content: space-between;
  gap: 0.1rem;
  margin-top: -0.05rem;
  padding: 0 0.15rem;
  pointer-events: none;
}

.author-scrub__tick {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 0.58rem;
  line-height: 1.15;
  text-align: center;
  color: color-mix(in srgb, var(--dawn) 88%, var(--soil-deep));
  text-shadow:
    0 1px 1px color-mix(in srgb, var(--soil-deep) 55%, transparent),
    0 0 3px color-mix(in srgb, var(--soil-deep) 35%, transparent);
}

.author-scrub__tick.is-active {
  color: #fff;
  font-weight: 700;
  text-shadow:
    0 1px 2px color-mix(in srgb, var(--canopy) 65%, transparent),
    0 0 4px color-mix(in srgb, var(--soil-deep) 40%, transparent);
}

/* —— S4 章9 · 邀请 —— */
.invite-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}

.invite-tree {
  z-index: 3;
}

.invite-welcome {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.15rem 0.05rem 0.05rem;
}

.invite-welcome__lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 1.35cqw, 0.9rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--soil-deep);
}

.invite-welcome__body {
  margin: 0;
  font-family: var(--font-narrative);
  font-size: clamp(0.88rem, 1.55cqw, 1rem);
  font-weight: 500;
  line-height: 1.65;
  color: color-mix(in srgb, var(--soil-deep) 78%, var(--muted));
  text-wrap: pretty;
}

.invite-em {
  font-weight: 700;
  white-space: nowrap;
}

.invite-em--store {
  color: var(--water);
}

.invite-em--desk {
  color: var(--canopy);
}

.invite-em--oa {
  color: var(--fruit);
}

.invite-em--tree {
  color: var(--canopy-bright);
  background: linear-gradient(
    transparent 62%,
    color-mix(in srgb, var(--sprout) 42%, transparent) 62%
  );
}

.invite-em--story {
  color: var(--bloom);
}

.invite-em--thanks {
  color: var(--fruit);
}

.invite-entries {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.55rem 0 0.35rem;
}

.invite-entry {
  margin: 0;
  padding: 0.65rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--soil-light) 50%, transparent);
  border-radius: 0.4rem;
  background: color-mix(in srgb, #fff 86%, var(--dawn));
}

.invite-entry__title {
  margin: 0 0 0.25rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--soil-deep);
}

.invite-entry__blurb {
  margin: 0 0 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
}

.invite-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.45rem 0.95rem;
  border-radius: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--soil-light) 55%, transparent);
  background: color-mix(in srgb, #fff 88%, var(--dawn));
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--soil-deep);
  text-decoration: none;
}

.invite-cta:hover,
.invite-cta:focus-visible {
  filter: brightness(1.04);
  outline: none;
}

.invite-cta--primary {
  background: var(--accent-cta);
  border-color: color-mix(in srgb, var(--canopy) 40%, transparent);
  color: #fff;
  font-weight: 600;
}

.invite-cta--primary:hover,
.invite-cta--primary:focus-visible {
  color: #fff;
}

.invite-cta--mail {
  min-height: 0;
  padding: 0.2rem 0;
  border: 0;
  background: transparent;
  color: var(--canopy);
  font-size: 0.88rem;
  font-weight: 600;
  word-break: break-all;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.invite-cta--mail:hover,
.invite-cta--mail:focus-visible {
  color: var(--canopy-bright);
  filter: none;
}

.invite-qr {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.invite-qr__img {
  width: min(180px, 70%);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid color-mix(in srgb, var(--soil-light) 45%, transparent);
  border-radius: 0.3rem;
  background: #fff;
}

.invite-qr__cap {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: var(--muted);
}

@media (max-width: 720px) {
  .forest-tree--sil {
    width: 9%;
    height: 36%;
  }
  .forest-tree--hero {
    width: 12%;
    height: 50%;
  }
  .forest-tree__sign {
    height: min(6.5vw, 24px);
  }
  .forest-tree--sil .forest-tree__sign {
    height: min(5.5vw, 20px);
  }
  .author-scrub__tick {
    font-size: 0.52rem;
  }
  .invite-cta,
  .invite-cta--primary {
    width: 100%;
  }
  .invite-qr__img {
    width: min(160px, 64%);
  }
  .meet-species-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.22rem;
  }
  .meet-species__thumb {
    width: 2.4rem;
    height: 1.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .water-layer--stage,
  .meet-seedling {
    transition: none;
  }
  .water-drop {
    animation: none;
    display: none;
  }
  .water-dock__b.is-enter,
  .float-tip.is-pop,
  .img-hotspot--branch.is-selected,
  .img-hotspot--water.is-ready-can,
  .forest-dialog.is-tour {
    animation: none;
  }
}