/* =========================================================================
   PAPER — 把整站从“夜景海报”改成一张摊开的纸
   只覆盖颜色、字体和质感，不动布局与交互
   ========================================================================= */

:root {
  --paper: #f4ecdb;
  --paper-hi: #fbf5e7;
  --paper-lo: #e7d9bf;
  --ink: #2a241d;
  --ink-2: #6b5c48;
  --red: #a23b2b;
  --red-soft: rgba(162, 59, 43, 0.14);

  --text: #2a241d;
  --muted: rgba(42, 36, 29, 0.56);
  --faint: rgba(42, 36, 29, 0.3);
  --gold: #a23b2b;
  --amber: #b5652f;
  --rose: #a2504a;
  --ice: #46586a;
  --line: rgba(42, 36, 29, 0.14);

  --serif: "Kaiti SC", "KaiTi", "STKaiti", "Songti SC", "STSong", serif;
  --body: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;
  --sans: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.9;
}

body::before {
  background:
    radial-gradient(1200px 820px at 16% 4%, #fdf8ec 0%, transparent 58%),
    radial-gradient(1000px 760px at 88% 88%, #efe2c9 0%, transparent 62%),
    radial-gradient(700px 500px at 50% 55%, rgba(255, 252, 244, 0.5), transparent 70%),
    linear-gradient(180deg, #f7f0e1 0%, #f1e7d4 58%, #e9dcc3 100%);
}

/* 不用会动的噪点，纸纹应当是静的 */
.grain {
  opacity: 0.05;
  mix-blend-mode: multiply;
  animation: none;
}

.snow,
.cursor-glow,
.brand,
.dots,
.progress {
  display: none !important;
}

::selection {
  background: rgba(162, 59, 43, 0.16);
  color: var(--ink);
}

/* ---------- 章节头：删掉英文和描边数字 ---------- */
.chapter {
  gap: 0;
  margin-bottom: clamp(24px, 4.6vh, 46px);
}

.chapter__no,
.chapter__en {
  display: none !important;
}

.chapter__head {
  width: 100%;
}

.chapter__title {
  margin-top: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--ink);
  line-height: 1.52;
}

.chapter__title::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 18px;
  background: var(--red);
  opacity: 0.7;
}

/* ---------- 按钮：铅笔字和印章，不像模板 ---------- */
.ghost-btn {
  gap: 0;
  padding: 2px 0 3px;
  border: 0;
  border-bottom: 1px solid rgba(162, 59, 43, 0.45);
  border-radius: 0;
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--red);
  background: none;
}

.ghost-btn::before {
  display: none;
}

.ghost-btn:hover {
  border-color: var(--red);
  background: none;
  color: var(--red);
}

.solid-btn {
  padding: 9px 20px;
  border-radius: 2px;
  background: var(--red);
  color: #fbf3e2;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  box-shadow: 0 2px 0 rgba(90, 30, 20, 0.18);
  transform: rotate(-0.6deg);
}

.solid-btn:hover {
  transform: rotate(-0.6deg) translateY(-1px);
  box-shadow: 0 3px 0 rgba(90, 30, 20, 0.18);
}

.solid-btn:active {
  transform: rotate(-0.6deg) translateY(0);
}

/* ---------- 开场 · 围巾 ---------- */
.veil__shade {
  background: radial-gradient(62% 62% at 50% 46%, #f8f1e2 0%, #e6d8bd 72%);
}

.scarf {
  background-color: #eadcc0;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(90, 60, 30, 0.055) 0 1px,
      rgba(255, 255, 255, 0) 1px 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(90, 60, 30, 0.04) 0 1px,
      rgba(255, 255, 255, 0) 1px 5px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(162, 59, 43, 0) 0 26px,
      rgba(162, 59, 43, 0.2) 26px 28px,
      rgba(162, 59, 43, 0) 28px 52px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(162, 59, 43, 0) 0 26px,
      rgba(162, 59, 43, 0.17) 26px 28px,
      rgba(162, 59, 43, 0) 28px 52px
    ),
    linear-gradient(112deg, #e9d9ba 0%, #f4e8cd 36%, #e6d4b2 68%, #dcc9a4 100%);
  box-shadow: inset 0 0 120px rgba(120, 90, 50, 0.18),
    inset 0 0 30px rgba(90, 60, 30, 0.1);
}

.veil__wing::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(120, 90, 50, 0.32) 0 2px,
    rgba(120, 90, 50, 0) 2px 9px
  );
}

.veil__wing--l::after {
  right: 0;
}

.veil__wing--r::after {
  left: 0;
}

.veil__tag {
  color: #9c3627;
  text-shadow: none;
  letter-spacing: 0.18em;
}

.veil__hint {
  color: rgba(58, 47, 35, 0.72);
  letter-spacing: 0.16em;
}

.lyrics-hint {
  color: rgba(162, 59, 43, 0.82);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.veil__knot::before,
.veil__knot::after {
  background: linear-gradient(90deg, transparent, rgba(58, 47, 35, 0.35));
}

/* ---------- 01 序 ---------- */
.hero__meta {
  display: none;
}

.hero__hint {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: 0.06em;
  color: var(--ink);
}

.hero__sub {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.22em;
}

.cake__halo {
  background: radial-gradient(
    closest-side,
    rgba(196, 128, 54, 0.2),
    rgba(196, 128, 54, 0.06) 55%,
    transparent 72%
  );
  filter: none;
}

.cake {
  filter: drop-shadow(0 26px 34px rgba(96, 74, 44, 0.2));
}

.scroll-cue {
  color: var(--muted);
}

.scroll-cue i {
  background: var(--muted);
}

/* ---------- 02 相识 · 微信浅色 ---------- */
.sec--chat {
  background: none;
}

.chat-intro {
  color: var(--ink-2);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 2.05;
}

.chat-mark {
  color: rgba(162, 59, 43, 0.6);
  font-family: var(--serif);
  font-size: 26px;
}

.chat-mark i {
  background: linear-gradient(90deg, rgba(162, 59, 43, 0.35), transparent);
}

.chat-foot {
  border-left: 1px solid rgba(162, 59, 43, 0.3);
  color: var(--ink-2);
  font-size: 14px;
}

.phone {
  border-radius: 30px;
  background: linear-gradient(160deg, #d9d2c2 0%, #cfc7b5 100%);
  box-shadow: 0 30px 60px rgba(80, 62, 38, 0.22),
    0 0 0 1px rgba(60, 48, 32, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.phone::after {
  border-radius: 24px;
  background: linear-gradient(
    128deg,
    rgba(255, 255, 255, 0.32) 0%,
    transparent 26%,
    transparent 74%,
    rgba(255, 255, 255, 0.14) 100%
  );
}

.phone__notch {
  background: #cfc7b5;
}

.phone__bar {
  background: #f6f6f6;
  color: #1b1b1b;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.phone__back,
.phone__more {
  color: rgba(0, 0, 0, 0.45);
}

.phone__name {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.phone__screen {
  background: #ededed;
}

.phone__input {
  background: #f6f6f6;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.phone__field {
  background: #fff;
  color: rgba(0, 0, 0, 0.3);
  font-family: var(--sans);
}

.phone__send {
  color: #3eb575;
  font-family: var(--sans);
}

.msg__avatar {
  border-radius: 5px;
  background: #d8cebd;
  color: #6b5a44;
  font-family: var(--sans);
  font-size: 11px;
}

.msg--me .msg__avatar {
  background: #c9d3c2;
  color: #4a5a44;
}

.bubble {
  font-family: var(--sans);
  font-size: 13px;
  border-radius: 6px;
}

.msg--who .bubble {
  background: #fff;
  color: #1a1a1a;
  border-top-left-radius: 2px;
}

.msg--me .bubble {
  background: #95ec69;
  color: #10240f;
  border-top-right-radius: 2px;
}

.msg--date .chip {
  color: rgba(0, 0, 0, 0.34);
  background: rgba(0, 0, 0, 0.03);
  font-family: var(--sans);
}

.msg--system .chip {
  color: rgba(0, 0, 0, 0.34);
  font-family: var(--sans);
}

.typing i {
  background: rgba(0, 0, 0, 0.32);
}

/* ---------- 蛋糕顶层的字 ---------- */
.layer__age {
  color: #f6e2b8;
}

.layer__age small {
  color: rgba(248, 230, 196, 0.72);
}

/* ---------- 03 星图：红线、纸点 ---------- */
.graph-lines line {
  stroke: rgba(162, 59, 43, 0.26);
}

.gnode {
  color: var(--ink);
}

.gnode__dot {
  background: rgba(162, 59, 43, 0.55);
  box-shadow: 0 0 0 4px rgba(162, 59, 43, 0.06);
}

.gnode:hover .gnode__dot,
.gnode:focus-visible .gnode__dot {
  background: var(--red);
}

.gnode__label {
  color: var(--ink);
  font-size: 13.5px;
  letter-spacing: 0.08em;
}

.gnode__detail {
  color: var(--ink-2);
}

.gnode--center .gnode__dot {
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(162, 59, 43, 0.08);
}

.gnode--center .gnode__label {
  color: var(--red);
  font-family: var(--serif);
  letter-spacing: 0.16em;
}

.gnode:hover .gnode__label,
.gnode:focus-visible .gnode__label {
  color: var(--red);
}

.gnode.is-active {
  color: var(--ink);
}

.gnode.is-active .gnode__label {
  color: var(--red);
  font-family: var(--serif);
}

.gnode.is-active .gnode__detail {
  color: var(--ink-2);
}

.graph-hint,
.graph-close {
  color: rgba(42, 36, 29, 0.45);
  letter-spacing: 0.2em;
}

.graph-close:hover {
  color: var(--red);
}

.window__hint {
  background: rgba(255, 255, 255, 0.62);
  color: rgba(30, 44, 60, 0.85);
}

/* ---------- 04 唱片 ---------- */
.vinyl__label {
  background: linear-gradient(160deg, #f7ecd4 0%, #eddfc0 100%);
  color: #5b4a33;
}

.vinyl__label-a,
.vinyl__label-sub {
  color: #5b4a33;
}

.line {
  color: rgba(42, 36, 29, 0.26);
}

.line.is-on {
  color: var(--ink);
}

.line.is-on::before {
  background: var(--red);
  box-shadow: none;
}

.lyrics-hint,
.lyrics-note {
  color: rgba(42, 36, 29, 0.5);
  letter-spacing: 0.12em;
}

/* ---------- 05 草稿 ---------- */
.drafts-intro {
  color: var(--ink-2);
}

.draft {
  border: 1px solid rgba(120, 90, 50, 0.16);
  border-radius: 3px;
  background: #fbf4e3;
  box-shadow: 0 2px 0 rgba(120, 90, 50, 0.05);
}

.draft:hover {
  border-color: rgba(162, 59, 43, 0.3);
}

.draft.is-open {
  border-color: rgba(162, 59, 43, 0.35);
  background: #fdf8ec;
}

.draft__date {
  color: rgba(162, 59, 43, 0.55);
}

.draft__text {
  color: var(--ink);
}

.draft.is-open .draft__text {
  color: var(--ink);
}

.draft__status {
  color: rgba(162, 59, 43, 0.5);
}

.draft.is-open .draft__status {
  color: rgba(162, 59, 43, 0.7);
}

.draft__note {
  color: var(--ink-2);
}

.composer__prompt {
  color: var(--red);
  letter-spacing: 0.04em;
}

.composer__box {
  border: 1px solid rgba(120, 90, 50, 0.2);
  border-radius: 3px;
  background: #fbf4e3;
}

.composer__box:focus-within {
  border-color: rgba(162, 59, 43, 0.45);
}

.composer textarea {
  color: var(--ink);
  font-family: var(--body);
}

.composer textarea::placeholder {
  color: rgba(42, 36, 29, 0.3);
}

.composer__note {
  color: rgba(42, 36, 29, 0.42);
}

.plane {
  color: var(--red);
}

/* ---------- 06 十七件小事 ---------- */
.number-ring circle {
  stroke: rgba(42, 36, 29, 0.16);
}

.number-ring .ring-tick {
  stroke: rgba(42, 36, 29, 0.26);
}

.number-ring .ring-tick.is-on {
  stroke: var(--red);
}

.number-core {
  background: radial-gradient(circle, rgba(162, 59, 43, 0.05), transparent 68%);
}

.number-core__idx {
  color: var(--red);
}

.number-core__text {
  color: var(--ink);
}

.number-meta {
  color: rgba(42, 36, 29, 0.45);
  letter-spacing: 0.16em;
}

.number-meta b {
  color: var(--red);
}

/* ---------- 07 信 ---------- */
.envelope {
  filter: drop-shadow(0 26px 40px rgba(96, 74, 44, 0.22));
}

.env__from {
  color: rgba(58, 47, 35, 0.5);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.env__body {
  background-image: repeating-linear-gradient(
      0deg,
      rgba(120, 84, 42, 0.05) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(158deg, #ecdbc0 0%, #dcc4a0 52%, #c9ad86 100%);
}

.env__seal {
  background: radial-gradient(circle at 36% 30%, #c25544 0%, #9a3323 62%, #7d2417 100%);
  border-radius: 47% 53% 51% 49% / 49% 47% 53% 51%;
  box-shadow: 0 6px 14px rgba(90, 30, 20, 0.28),
    inset 0 -2px 4px rgba(90, 30, 20, 0.25);
}

/* 长按信封只是「按住封印」，不能弹出选中/复制/系统菜单 */
.envelope,
.env__letter,
.env__from,
.env__seal,
.env__seal *,
.letter-stage,
.letter-hint {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.paper__seal {
  left: clamp(20px, 5vw, 46px);
  right: auto;
  opacity: 0.95;
  color: rgba(150, 40, 45, 0.85);
  border-color: rgba(150, 40, 45, 0.7);
}

.letter-hint {
  color: rgba(42, 36, 29, 0.42);
  letter-spacing: 0.22em;
}

.letter-hint.is-pressing {
  color: var(--red);
}

.letter-view__scrim {
  background: rgba(36, 28, 18, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.site-end {
  color: rgba(42, 36, 29, 0.4);
}

.site-end__line {
  background: rgba(42, 36, 29, 0.16);
}

/* ---------- 通用小节底色清掉 ---------- */
.sec {
  background: none;
}

/* 摆得别太正，像随手放在桌上 */
.phone {
  rotate: -1deg;
}

.turntable {
  rotate: -1.4deg;
}

.envelope {
  rotate: -0.9deg;
}

.hero__sub {
  color: rgba(162, 59, 43, 0.68);
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* ---------- 星图：一张深蓝的星图，放在纸上 ---------- */
.graph-stage {
  height: clamp(460px, 62vh, 640px);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(52, 40, 26, 0.42);
  background-color: #101a24;
  background-image:
    radial-gradient(circle at 16% 24%, rgba(255, 247, 230, 0.55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 28% 68%, rgba(255, 247, 230, 0.38) 0 1px, transparent 1.5px),
    radial-gradient(circle at 44% 16%, rgba(255, 247, 230, 0.42) 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 74%, rgba(255, 247, 230, 0.34) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 32%, rgba(255, 247, 230, 0.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 62%, rgba(255, 247, 230, 0.3) 0 1px, transparent 1.4px),
    radial-gradient(circle at 36% 86%, rgba(255, 247, 230, 0.26) 0 1px, transparent 1.4px),
    radial-gradient(circle at 70% 46%, rgba(255, 247, 230, 0.22) 0 1px, transparent 1.4px),
    radial-gradient(ellipse at 50% 44%, #1b2733 0%, #0f1821 58%, #0a1119 100%);
  box-shadow: 0 22px 44px -28px rgba(40, 30, 18, 0.6),
    inset 0 0 90px rgba(3, 7, 12, 0.75);
  cursor: grab;
  touch-action: pan-y;
}

.graph-stage.is-zoomed {
  touch-action: none;
  cursor: grab;
}

.graph-stage.is-panning {
  cursor: grabbing;
}

.graph-canvas {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transition: transform 0.9s cubic-bezier(0.22, 0.9, 0.24, 1);
  will-change: transform;
}

.graph-canvas.is-dragging {
  transition: none;
}

.graph-lines line {
  stroke: rgba(232, 219, 190, 0.24);
}

.graph-lines line.graph-web {
  stroke: rgba(232, 219, 190, 0.1);
  stroke-dasharray: 1 9;
  animation: none;
}

.gnode {
  color: rgba(240, 231, 212, 0.78);
  transition: opacity 0.55s ease, color 0.4s ease, transform 0.6s var(--ease);
}

.gnode__dot {
  background: #e8dcc0;
  box-shadow: 0 0 0 3px rgba(232, 220, 192, 0.07),
    0 0 14px rgba(232, 220, 192, 0.32);
}

.gnode__label {
  color: inherit;
  font-family: var(--serif);
  font-size: 13.5px;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 6px rgba(6, 10, 16, 0.85);
}

.gnode__detail {
  color: rgba(240, 231, 212, 0.72);
  text-shadow: 0 1px 6px rgba(6, 10, 16, 0.85);
}

.gnode--center .gnode__dot {
  background: #c1493a;
  box-shadow: 0 0 0 6px rgba(193, 73, 58, 0.1),
    0 0 26px rgba(193, 73, 58, 0.55);
}

.gnode--center .gnode__label {
  color: #f4e9d3;
  font-size: 15px;
}

.graph-stage.has-active .gnode:not(.is-active) {
  opacity: 0.3;
}

.graph-stage.has-active .gnode--center {
  opacity: 0.32;
}

/* 点击后节点不再跑到画面中心，而是画面推过去 */
.gnode.is-active {
  left: var(--x) !important;
  top: var(--y) !important;
  transform: translate(-50%, -50%) scale(0.49);
  color: #f7eeda;
  max-width: 300px;
}

.gnode.is-active .gnode__dot {
  width: 11px;
  height: 11px;
  background: #f0e2c2;
  box-shadow: 0 0 0 5px rgba(240, 226, 194, 0.1),
    0 0 24px rgba(240, 226, 194, 0.5);
}

.gnode.is-active .gnode__label {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 0.08em;
  text-indent: 0;
  color: #f8f0dc;
}

.gnode.is-active .gnode__detail {
  width: min(340px, 76vw);
  max-height: 300px;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(244, 236, 220, 0.88);
}

.graph-hint {
  bottom: 16px;
  color: rgba(240, 231, 212, 0.42);
  letter-spacing: 0.2em;
  font-size: 11px;
}

.graph-close {
  right: 14px;
  top: 14px;
  border-color: rgba(240, 231, 212, 0.24);
  color: rgba(240, 231, 212, 0.8);
  background: rgba(10, 16, 22, 0.4);
}

.graph-close:hover {
  border-color: rgba(240, 231, 212, 0.6);
  color: #fff8e8;
}

/* ---------- 十七件：箭头比拖动好懂 ---------- */
.number-nav {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 14px auto 0;
}

.num-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(120, 90, 50, 0.3);
  background: rgba(255, 251, 240, 0.7);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.num-arrow:hover,
.num-arrow:focus-visible {
  border-color: var(--red);
  color: var(--red);
}

.num-count {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

.num-count b {
  font-weight: 400;
  font-size: 21px;
  color: var(--red);
}

.num-count__sep {
  margin: 0 5px;
  opacity: 0.5;
}

.number-hint {
  margin-top: 10px;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: rgba(42, 36, 29, 0.42);
}

@media (max-width: 720px) {
  .graph-stage {
    height: clamp(400px, 58vh, 520px);
  }
  .gnode__label {
    font-size: 11.5px;
  }
  .gnode.is-active {
    left: 50% !important;
    top: 38% !important;
    transform: translate(-50%, -50%);
    max-width: 84vw;
  }
  .gnode.is-active .gnode__label {
    font-size: 23px;
  }
  /* 手机上点开一颗星：其余星点直接隐去，详情落在干净夜空上 */
  .graph-stage.has-active .gnode:not(.is-active),
  .graph-stage.has-active .gnode--center {
    opacity: 0;
  }
  .gnode.is-active .gnode__detail {
    width: min(300px, 72vw);
    font-size: 13.5px;
    line-height: 1.85;
  }
  .number-nav {
    bottom: 0;
  }
}

/* 十七件：正文别断成单个字 */
.number-core__text {
  max-width: min(390px, 76vw);
  font-size: 16.5px;
  line-height: 1.95;
}

.number-meta {
  color: rgba(42, 36, 29, 0.5);
}

/* 十七件：压缩高度，让箭头/提示进一屏 */
.sec--numbers {
  padding-top: 6vh;
}
.sec--numbers .chapter {
  margin-bottom: 2vh;
}
.sec--numbers .number-stage {
  height: clamp(360px, 44vh, 440px);
}
.number-core {
  width: min(420px, 84vw);
}

.sec--numbers .number-stage {
  width: min(80vw, 400px);
  height: auto;
  aspect-ratio: 1;
}
.number-hand i {
  background: #a23b2b;
  box-shadow: 0 0 0 6px rgba(162, 59, 43, 0.08);
}
.number-ring .ring-tick.is-on {
  stroke: #a23b2b;
}

.number-core {
  inset: 22%;
  width: auto;
}
.number-hand {
  display: none;
}
.sec--numbers .number-stage {
  width: min(82vw, 420px);
}
.number-core__text {
  font-size: 15.5px;
  line-height: 1.9;
}

.number-core { inset: 14% 15%; }


/* ---------- 信封页：字更清楚、页脚不突兀 ---------- */
.letter-hint {
  font-size: 13px;
  color: rgba(42, 36, 29, 0.62);
  letter-spacing: 0.1em;
}
.env__from {
  font-size: 11.5px;
  color: rgba(58, 47, 35, 0.6);
  letter-spacing: 0.06em;
}
.site-end {
  gap: 10px;
  padding: 26px 24px 46px;
}
.site-end__line {
  background: none;
  color: rgba(42, 36, 29, 0.6);
  font-size: 13px;
  letter-spacing: 0.16em;
}
.site-end .ghost-btn {
  font-size: 13.5px;
}

/* ---------- 蛋糕：圆柱感 + 奶油顶 + 陶瓷盘 ---------- */
.layer__body {
  border-radius: 50% 50% 38% 38% / 16px 16px 10px 10px;
  box-shadow: inset 0 -18px 30px rgba(40, 14, 0, 0.3),
    inset 0 12px 20px rgba(255, 240, 220, 0.16),
    0 16px 26px rgba(92, 66, 38, 0.22);
}
.layer__cream {
  top: -15px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(
    120% 200% at 50% 0%,
    #fffdf6 0%,
    #fbf0dc 42%,
    #f2e0c2 72%,
    #e6d0ad 100%
  );
  box-shadow: 0 6px 10px rgba(92, 66, 38, 0.16),
    inset 0 2px 2px rgba(255, 255, 255, 0.9);
}
.layer__cream::after {
  height: 26px;
  top: calc(100% - 6px);
  background: radial-gradient(circle at 14px 0, #fbf0dc 0 13px, transparent 14px)
    0 0 / 42px 24px repeat-x;
  filter: drop-shadow(0 4px 3px rgba(92, 66, 38, 0.12));
}
.cake__plate {
  background: radial-gradient(
    120% 170% at 50% -12%,
    #fffdf7 0%,
    #f6ecd9 34%,
    #e3d2b5 66%,
    #c6b193 100%
  );
  box-shadow: 0 22px 34px rgba(92, 66, 38, 0.26),
    inset 0 -5px 10px rgba(120, 92, 58, 0.16),
    inset 0 3px 5px rgba(255, 255, 255, 0.85);
}
.candle__flame::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 5px;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #fffdf2;
  box-shadow: 0 0 8px rgba(255, 245, 210, 0.9);
}
.candle__smoke {
  background: rgba(150, 140, 128, 0.5);
}

/* ---------- 页脚：3D 入口 ---------- */
.site-end__more {
  margin-top: 2px;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--red, #a23b2b);
  text-decoration: none;
  border-bottom: 1px solid rgba(162, 59, 43, 0.35);
  padding-bottom: 2px;
}
.site-end__more:hover { border-bottom-color: rgba(162, 59, 43, 0.75); }
/* ---------- 首屏：3D 入口 ---------- */
.hero__3d {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: rgba(42, 36, 29, 0.52);
  text-decoration: none;
  border-bottom: 1px dashed rgba(42, 36, 29, 0.28);
  padding-bottom: 2px;
}
.hero__3d:hover { color: var(--red, #a23b2b); border-bottom-color: rgba(162, 59, 43, 0.5); }
/* ---------- cake v2: flat illustration ---------- */
.cake { height: 470px; }
.cake__halo {
  bottom: 20px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(255, 198, 122, 0.16) 0%, rgba(255, 180, 100, 0.05) 40%, transparent 64%);
  filter: blur(18px);
}
.layer--1 { --w: 306px; --h: 78px; --b: 48px; --cake: linear-gradient(180deg, #c98a55 0%, #ab6f3d 100%); }
.layer--2 { --w: 242px; --h: 72px; --b: 128px; --cake: linear-gradient(180deg, #b77c4a 0%, #96592e 100%); }
.layer--3 { --w: 178px; --h: 66px; --b: 202px; --cake: linear-gradient(180deg, #a26738 0%, #7f4a23 100%); }
.layer__body {
  border-radius: 5px;
  background: var(--cake);
  box-shadow:
    inset -10px 0 16px rgba(70, 34, 10, 0.18),
    inset 10px 0 16px rgba(255, 240, 220, 0.12),
    inset 0 -12px 20px rgba(70, 34, 10, 0.2),
    0 10px 20px rgba(92, 66, 38, 0.16);
}
.layer__body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -7px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 240, 218, 0.22);
}
.layer__cream {
  top: -6px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fffaf0 0%, #f7e9cd 60%, #efdcb9 100%);
  box-shadow: 0 3px 5px rgba(92, 66, 38, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}
.layer__cream::after {
  height: 15px;
  top: calc(100% - 4px);
  background: radial-gradient(circle at 7px 0, #f9edd6 0 7px, transparent 8px) 0 0 / 24px 15px repeat-x;
  filter: none;
}
.layer--3 .layer__cream::before { display: none; }
.cake__plate {
  bottom: 22px;
  width: 366px;
  height: 32px;
  background: linear-gradient(180deg, #fffdf7 0%, #f6ecd9 40%, #e0cfb1 78%, #cbb696 100%);
  box-shadow: 0 18px 32px rgba(92, 66, 38, 0.22), inset 0 -4px 8px rgba(120, 92, 58, 0.14);
}
.cake__plate::after {
  inset: 6px 30px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  opacity: 0.8;
}
.candles { bottom: 278px; gap: 32px; height: 72px; }
.candle { width: 10px; height: 72px; }
.candle__stick {
  width: 9px;
  height: 46px;
  border-radius: 2px;
  background: repeating-linear-gradient(132deg, #f6e4cb 0 4px, #c05b4e 4px 8px);
  box-shadow: inset -1px 0 2px rgba(90, 30, 20, 0.3);
}
.candle__flame {
  width: 13px;
  height: 20px;
  border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 72%, #fff8e2 0 24%, #ffd07a 46%, #f39343 74%, rgba(243, 147, 67, 0) 78%);
  box-shadow: 0 0 18px rgba(255, 178, 96, 0.55);
}
/* cake v3: text & plate */
.layer__text { padding-top: 22px; gap: 1px; }
.layer__name { font-size: 15px; letter-spacing: 0.3em; text-indent: 0.3em; color: #fbeed3; }
.layer__age { font-size: 30px; color: #fbeed3; }
.layer__age small { font-size: 11px; color: rgba(251, 238, 211, 0.8); }
.layer__body::before { background: rgba(255, 244, 226, 0.16); }
.cake__plate { bottom: 4px; width: 398px; height: 36px; }
.layer--1 { --b: 52px; }
/* ---------- v4: photo frame, readable hint, cake text ---------- */
.graph-stage {
  border: 10px solid #fbf5e7;
  border-radius: 3px;
  box-shadow: 0 18px 36px -22px rgba(40, 30, 18, 0.55), 0 0 0 1px rgba(120, 92, 58, 0.18);
  transform: rotate(-0.45deg);
}
.graph-stage.is-zoomed { transform: rotate(-0.45deg); }
.letter-hint {
  font-size: 14px;
  color: rgba(42, 36, 29, 0.82);
  letter-spacing: 0.08em;
  padding: 8px 20px;
  border: 1px dashed rgba(162, 59, 43, 0.4);
  border-radius: 20px;
  background: rgba(251, 245, 231, 0.55);
}
.layer__text { padding-top: 14px; }
.layer__name { font-size: 13px; }
.layer__age { font-size: 26px; }