:root {
  --paper: #fff7ed;
  --paper-deep: #f7e8d6;
  --peach: #efb7a5;
  --rose: #b94e62;
  --leaf: #b8cdb7;
  --gold: #d9ad6d;
  --ink: #4f3833;
  --muted: #8b726a;
  --line: rgba(79, 56, 51, .16);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: var(--paper); color: var(--ink); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
#moon-letter { position: relative; height: 100dvh; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 83% 10%, rgba(239,183,165,.35), transparent 26rem), linear-gradient(150deg, #fffaf3, var(--paper)); }
.paper-grain { position: absolute; inset: 0; pointer-events: none; opacity: .4; background-image: radial-gradient(rgba(79,56,51,.13) .65px, transparent .75px); background-size: 6px 6px; mix-blend-mode: multiply; z-index: -2; }
#ambient-layer { position: fixed; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; mix-blend-mode: multiply; }
.ambient-star, .ambient-paper, .ambient-note { position: absolute; left: var(--ambient-left); top: var(--ambient-top); opacity: .18; animation: ambient-float var(--ambient-duration) ease-in-out var(--ambient-delay) infinite alternate; }
.ambient-star { width: 9px; height: 9px; border-radius: 50%; background: #fff9dd; box-shadow: 0 0 0 3px rgba(255,249,221,.26), 0 0 20px rgba(255,220,150,.7); }
.ambient-star::after { content: ""; position: absolute; inset: -7px 3px; border-radius: 50%; border-left: 1px solid rgba(217,173,109,.62); transform: rotate(45deg); }
.ambient-paper { width: 18px; height: 13px; border: 1px solid rgba(185,78,98,.42); background: rgba(255,250,244,.2); transform: rotate(-18deg); }
.ambient-paper::after { content: ""; position: absolute; inset: 3px; border-top: 1px solid rgba(185,78,98,.38); border-bottom: 1px solid rgba(185,78,98,.25); }
.ambient-note::before { content: "♪"; color: rgba(79,56,51,.72); font: 1.4rem/1 "STKaiti", "KaiTi", serif; }
#ambient-layer[data-chapter="songs"] .ambient-note, #ambient-layer[data-chapter="closing"] .ambient-star { opacity: .34; }
#ambient-layer[data-chapter="cats"] .ambient-paper { transform: rotate(23deg) scale(.8); }
@keyframes ambient-float { from { transform: translate3d(0,0,0) rotate(-8deg); } to { transform: translate3d(10px,-16px,0) rotate(11deg); } }
#moon-pull { position: fixed; right: max(28px, env(safe-area-inset-right)); bottom: max(86px, calc(env(safe-area-inset-bottom) + 70px)); z-index: 22; width: 88px; height: 64vh; overflow: hidden; pointer-events: none; opacity: 0; transform-origin: 100% 100%; }
#moon-pull::before { content: ""; position: absolute; right: 16px; bottom: -18px; width: 2px; height: 74%; border-radius: 99px; background: linear-gradient(0deg, rgba(255,250,244,.92), rgba(217,173,109,.68), transparent); transform: rotate(12deg); }
#moon-pull i { position: absolute; right: 3px; bottom: 15%; width: 8px; height: 8px; border-radius: 50%; background: #fff8e6; box-shadow: 0 0 12px rgba(255,233,183,.9); }
#moon-pull i:nth-child(1) { right: 13px; bottom: 23%; }
#moon-pull i:nth-child(2) { right: 30px; bottom: 44%; }
#moon-pull i:nth-child(3) { right: 52px; bottom: 62%; }
#moon-pull b { position: absolute; right: 48px; top: 6%; color: #fff5d3; font: 1.5rem/1 serif; text-shadow: 0 0 12px rgba(255,237,179,.95); }
#moon-letter.is-page-turning #moon-pull { opacity: 1; animation: moon-pull-reveal .98s cubic-bezier(.2,.82,.2,1) both; }
#moon-letter.is-page-turning #moon-pull i { animation: moon-pull-spark .9s ease-out both; }
#moon-letter.is-page-turning #moon-pull i:nth-child(2) { animation-delay: .08s; }
#moon-letter.is-page-turning #moon-pull i:nth-child(3) { animation-delay: .16s; }
#moon-letter[data-turn="down"] #moon-pull { transform: scaleY(-1); }
@keyframes moon-pull-reveal { 0% { opacity: 0; transform: translateY(34px) scaleY(.45); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px) scaleY(1.08); } }
@keyframes moon-pull-spark { from { opacity: 0; transform: scale(.3); } 45% { opacity: 1; transform: scale(1); } to { opacity: 0; transform: translate(-21px,-28px) scale(.2); } }
#moon-pages { position: absolute; inset: 0; height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.moon-page { position: relative; height: 100dvh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; gap: 9px; padding: max(16px, env(safe-area-inset-top)) clamp(16px, 5vw, 42px) max(124px, calc(env(safe-area-inset-bottom) + 118px)); overflow: hidden; }
.moon-page.is-active .page-head { animation: page-content-arrive .42s cubic-bezier(.2,.82,.2,1) both; }
.moon-page.is-active .page-body { animation: page-content-arrive .5s cubic-bezier(.2,.82,.2,1) .1s both; }
.moon-page.is-active .page-foot { animation: page-content-arrive .4s cubic-bezier(.2,.82,.2,1) .2s both; }
@keyframes page-content-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; padding-bottom: 7px; border-bottom: 1px solid rgba(79,56,51,.19); }
.eyebrow { margin: 0; font: 700 .68rem/1 "Microsoft YaHei", sans-serif; letter-spacing: .18em; color: var(--rose); }
.page-mark { font: 500 .7rem/1 ui-monospace, "Cascadia Code", monospace; color: var(--muted); }
.page-body { align-self: center; min-width: 0; }
.page-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 5px; border-top: 1px solid var(--line); color: var(--muted); font-size: .61rem; letter-spacing: .14em; }
.cover { padding-inline: 0; background: #df8f83; color: #fffaf4; }
.cover .page-head, .cover .page-foot { margin-inline: clamp(18px, 5vw, 32px); border-color: rgba(255,250,244,.42); color: rgba(255,250,244,.83); }
.cover .eyebrow { color: #fffaf4; }
.cover .page-body { position: relative; display: grid; min-height: 0; align-self: stretch; align-content: stretch; }
.cover-art { position: relative; min-height: 0; margin-right: clamp(26px, 8vw, 52px); overflow: hidden; border-radius: 0 72px 0 0; }
.cover-photo { width: 100%; height: 100%; min-height: 520px; object-fit: cover; object-position: center; filter: saturate(.84) contrast(1.04); }
.cover.is-active .cover-photo { animation: cover-breathe 9s ease-in-out infinite alternate; }
.cover-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(93,44,45,.32)); pointer-events: none; }
.cover-orbit { position: absolute; top: 14px; left: 15px; writing-mode: vertical-rl; font: .64rem/1 ui-monospace, monospace; letter-spacing: .23em; color: #fffaf4; z-index: 1; }
.cover.is-active .cover-orbit { animation: cover-orbit-drift 5.6s ease-in-out infinite; }
.cover-index { position: absolute; right: 14px; bottom: 16px; z-index: 1; font: 1.15rem/.85 ui-monospace, monospace; letter-spacing: -.08em; color: #fffaf4; }
.cover-copy { position: absolute; z-index: 2; right: 0; bottom: 54px; display: grid; justify-items: center; gap: 13px; }
.cover h1, .closing h2 { margin: 0; text-align: center; font-family: "STKaiti", "KaiTi", serif; font-size: clamp(3.2rem, 17vw, 5.7rem); font-weight: 400; line-height: .78; letter-spacing: .04em; }
.cover .subtitle { margin: 0; writing-mode: vertical-rl; font-family: "STKaiti", "KaiTi", serif; letter-spacing: .24em; color: rgba(255,250,244,.9); }
.cover .only-you { margin: 0; padding: 7px 9px; border-block: 1px solid rgba(255,250,244,.7); color: #fffaf4; font: 1rem/1.1 "STKaiti", "KaiTi", serif; letter-spacing: .16em; white-space: nowrap; }
.cover .seal { width: 48px; height: 48px; display: grid; place-items: center; transform: rotate(-10deg); border: 1px solid #fffaf4; border-radius: 50%; color: #fffaf4; font: 1rem/1 "STKaiti", "KaiTi", serif; }
.cover.is-active .seal { animation: seal-pulse 3s ease-in-out infinite; }
@keyframes cover-breathe { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes cover-orbit-drift { 50% { transform: translateY(11px); opacity: .7; } }
@keyframes seal-pulse { 50% { transform: rotate(-10deg) scale(1.08); box-shadow: 0 0 0 8px rgba(255,250,244,.12); } }
.single-photo { width: 100%; max-width: 430px; height: min(64dvh, 620px); display: block; object-fit: contain; margin: 0 auto; border: 7px solid rgba(255,255,255,.82); border-radius: 0; background: rgba(255,250,244,.55); box-shadow: 12px 14px 0 rgba(185,78,98,.18), 0 16px 34px rgba(79,56,51,.15); transform: rotate(-1.5deg); }
.document .single-photo { aspect-ratio: 3 / 4; object-position: center; }
blockquote { margin: 24px 4px 0; padding: 16px 18px; border-inline-start: 2px solid var(--gold); background: rgba(255,255,255,.48); font-family: "STKaiti", "KaiTi", serif; font-size: clamp(1.35rem, 5vw, 1.7rem); line-height: 1.65; }
.document { background: linear-gradient(150deg, #f5e7d6, #dce5d4); }
.illustration { background: linear-gradient(150deg, #f9e8ec, #f6f3e5); }
.illustration .page-body { align-self: center; width: 100%; }
.illustration-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(92px, .62fr); align-items: center; gap: 12px; }
.illustration-layout .single-photo { width: 100%; max-width: none; height: min(58dvh, 540px); transform: rotate(-1deg); }
.desktop-pet-demo { margin: 0; padding: 6px 6px 0; overflow: hidden; border: 4px solid rgba(255,255,255,.86); background: rgba(255,250,244,.66); box-shadow: 5px 7px 0 rgba(79,56,51,.12); transform: rotate(1.8deg); }
.desktop-pet-demo .video-wrap { gap: 5px; }
.desktop-pet-demo video { display: block; width: 100%; max-height: 28dvh; aspect-ratio: 16 / 9; object-fit: contain; background: #25202b; }
.desktop-pet-demo .video-wrap::before { content: "DESKTOP PET"; padding: 3px 6px; font-size: .58rem; }
.desktop-pet-demo figcaption { padding: 5px 2px 7px; color: var(--muted); font: .74rem/1.2 "STKaiti", "KaiTi", serif; text-align: center; }
.chapter-title { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.chapter-title > span { color: var(--rose); font: 500 2.7rem/.72 "STKaiti", "KaiTi", serif; }
.section-intro { margin: 0; font-family: "STKaiti", "KaiTi", serif; font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 400; line-height: .9; }
.section-note { margin: -2px 0 14px 50px; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.photo-deck { position: relative; height: min(54dvh, 510px); margin-top: 6px; isolation: isolate; }
.photo-deck::before, .photo-deck::after { content: ""; position: absolute; inset: 16px -3px -2px 9px; z-index: -2; border: 1px solid rgba(79,56,51,.12); background: rgba(255,250,244,.63); box-shadow: 4px 6px 0 rgba(79,56,51,.1); transform: rotate(1.2deg); }
.photo-deck::after { inset: 8px 5px 6px 2px; z-index: -1; background: rgba(255,255,255,.66); transform: rotate(-.8deg); }
.photo { position: absolute; inset: 0 10px 16px 0; z-index: 3; padding: 0; overflow: hidden; border: 6px solid rgba(255,255,255,.88); border-radius: 2px; background: white; box-shadow: 8px 10px 0 rgba(79,56,51,.13); cursor: zoom-in; transform: rotate(-.8deg); }
.photo:nth-child(2) { z-index: 2; inset: 11px 2px 7px 10px; border-color: rgba(255,250,244,.9); transform: rotate(1.1deg); }
.photo:nth-child(3) { z-index: 1; inset: 18px 12px 8px 1px; transform: rotate(-1.5deg); }
.photo img { width: 100%; height: 100%; object-fit: contain; display: block; background: rgba(255,250,244,.72); transition: transform .35s ease; }
.photo:active img { transform: scale(1.05); }
.deck-index { position: absolute; top: 50%; right: 2px; z-index: 6; display: grid; gap: 4px; min-width: 66px; padding: 11px 8px 10px; border: 0; border-radius: 12px 0 0 12px; background: var(--rose); color: #fffaf4; box-shadow: 4px 6px 0 rgba(79,56,51,.15); cursor: pointer; transform: translateY(-50%); font: .66rem/1 "Microsoft YaHei", sans-serif; text-align: center; }
.deck-index::after { content: "›"; position: absolute; right: 5px; top: 50%; transform: translateY(-52%); font: 1.25rem/1 "STKaiti", "KaiTi", serif; }
.deck-index span { padding-right: 7px; white-space: nowrap; }
.deck-index b { padding-right: 7px; color: rgba(255,250,244,.8); font: 500 .55rem/1 ui-monospace, monospace; letter-spacing: .04em; }
.photo.is-leaving { z-index: 8; pointer-events: none; animation: card-turn-away .47s cubic-bezier(.42,0,.58,1) both; }
.photo.is-promoting { z-index: 7; pointer-events: none; animation: card-promote .47s cubic-bezier(.2,.84,.24,1) both; }
@keyframes card-turn-away { 0% { transform: rotate(-.8deg) translate3d(0,0,0) scale(1); opacity: 1; } 62% { transform: rotate(5deg) translate3d(18px,-6px,0) scale(.985); opacity: .74; } 100% { transform: rotate(8deg) translate3d(34px,-12px,0) scale(.94); opacity: 0; } }
@keyframes card-promote { 0% { transform: rotate(1.1deg) translate3d(10px,11px,0) scale(.985); opacity: .72; } 55% { transform: rotate(-2deg) translate3d(-3px,4px,0) scale(1.01); opacity: 1; } 100% { transform: rotate(-.8deg) translate3d(0,0,0) scale(1); opacity: 1; } }
.personal { background: radial-gradient(circle at 86% 12%, rgba(174,210,226,.75), transparent 31%), linear-gradient(145deg, #fffaf4 12%, #f5dfd1 90%); }
.personal .photo-deck::before, .cooking .photo-deck::before { content: "WJY"; padding-top: 20px; font: 800 6.8rem/.8 ui-sans-serif, sans-serif; letter-spacing: -.1em; color: rgba(185,78,98,.08); pointer-events: none; }
.where-did-they-go { background: radial-gradient(circle at 88% 14%, rgba(255,255,255,.76), transparent 29%), linear-gradient(155deg, #e8eff0, #f6dfd4 58%, #ecd2c3); }
.vanishing-copy { position: relative; z-index: 1; margin: 4px 0 8px 18px; }
.vanishing-copy::before { content: "× × ×"; position: absolute; left: -18px; top: -10px; color: rgba(185,78,98,.32); font: 1rem/1 ui-monospace, monospace; letter-spacing: .16em; }
.vanishing-copy span { display: block; margin-bottom: 4px; color: var(--muted); font-size: .72rem; letter-spacing: .12em; }
.vanishing-copy h2 { margin: 0; color: #5d3d44; font: 400 clamp(2rem, 8.8vw, 2.7rem)/.92 "STKaiti", "KaiTi", serif; }
.photo-deck--vanishing { height: min(50dvh, 474px); margin-top: 18px; }
.photo-deck--vanishing::before { content: "ONLY"; padding-top: 22px; font: 800 6.4rem/.8 ui-sans-serif, sans-serif; letter-spacing: -.12em; color: rgba(93,61,68,.07); pointer-events: none; }
.photo-deck--vanishing .photo:nth-child(4) { z-index: 0; inset: 29px 2px -8px 14px; border-color: rgba(255,250,244,.82); transform: rotate(2deg); }
.songs { background: radial-gradient(circle at 8% 94%, rgba(246,211,143,.66), transparent 28%), linear-gradient(155deg, #cfe3eb, #f9f3e9 64%, #efc7bf); }
.songs .page-body { align-self: center; }
.songs .chapter-title { align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.songs .chapter-title > span { margin-top: 26px; }
.song-title-block { flex: 1; min-width: 0; padding-top: 3px; }
.song-headphone { display: flex; align-items: flex-start; gap: 8px; width: calc(100% + 4px); margin: 13px 0 0 -7px; padding: 8px 10px 8px 9px; border-inline-start: 3px solid var(--gold); border-radius: 2px 11px 11px 2px; background: rgba(255,250,244,.7); color: var(--rose); box-shadow: 3px 4px 0 rgba(79,56,51,.08); transform: rotate(-1deg); }
.song-headphone i { flex: 0 0 auto; padding-top: 1px; font-style: normal; font-size: 1.12rem; line-height: 1.2; }
.song-headphone span { display: block; font: .91rem/1.42 "STKaiti", "KaiTi", serif; letter-spacing: .02em; }
.song-caption { margin: 22px 0 8px; color: var(--ink); font: .93rem/1.6 "STKaiti", "KaiTi", serif; }
.song-link { display: grid; gap: 4px; width: fit-content; max-width: 100%; padding: 10px 12px; border: 1px solid rgba(185,78,98,.3); border-radius: 14px 14px 14px 3px; background: rgba(255,250,244,.64); color: var(--rose); font: .74rem/1.35 "Microsoft YaHei", sans-serif; text-decoration: none; box-shadow: 3px 4px 0 rgba(79,56,51,.09); }
.song-link span { color: var(--muted); font-size: .67rem; }
.cooking { background: radial-gradient(circle at 90% 12%, rgba(226,160,93,.42), transparent 27%), linear-gradient(150deg, #fff8df, #f2d19f); }
.cats { background: radial-gradient(circle at 5% 5%, rgba(255,255,255,.76), transparent 27%), linear-gradient(150deg, #eef5e8, #c9dfca); }
.health { background: radial-gradient(circle at 85% 15%, rgba(192,208,229,.7), transparent 31%), linear-gradient(155deg, #faf7f1, #e4dce9); }
.together { background: radial-gradient(circle at 13% 85%, rgba(255,249,228,.65), transparent 32%), linear-gradient(145deg, #efb9a6, #d98070); }
.together .photo-deck .photo:nth-child(1) { inset: 0 2px 4px; }
.puzzle-stage { position: relative; height: min(68dvh, 640px); margin-top: 12px; --piece-width: min(40vw, 165px); --piece-height: calc(var(--piece-width) * .666667); touch-action: none; user-select: none; }
.memory-puzzle { position: absolute; z-index: 1; top: 50%; left: 50%; width: calc(var(--piece-width) * 2); height: calc(var(--piece-height) * 3); isolation: isolate; overflow: hidden; border: 8px solid rgba(255,250,244,.82); border-radius: 5px; background: #dbc5bd; box-shadow: 12px 16px 0 rgba(66,58,76,.14); transform: translate3d(-50%,-50%,0) rotate(-.5deg); transition: transform .55s ease; }
.memory-puzzle::before { content: ""; position: absolute; inset: -14px 17px 13px -10px; z-index: -2; border: 1px dashed rgba(89,65,75,.3); transform: rotate(-3deg); }
.puzzle-slot, .memory-piece { position: absolute; width: calc(100% / 2); height: calc(100% / 3); background-size: 200% 300%; background-position: var(--piece-x) var(--piece-y); }
.puzzle-slot { left: var(--slot-x); top: var(--slot-y); z-index: 0; opacity: .18; filter: grayscale(.35) blur(.25px); outline: 1px dashed rgba(255,250,244,.72); outline-offset: -1px; pointer-events: none; }
.memory-piece { left: var(--start-x); top: var(--start-y); z-index: 4; display: block; width: var(--piece-width); height: var(--piece-height); overflow: hidden; padding: 0; border: 1px solid rgba(255,250,244,.78); border-radius: 7px 2px 7px 2px; box-shadow: 0 8px 14px rgba(55,41,48,.22); cursor: grab; transition: left .24s cubic-bezier(.2,.88,.22,1), top .24s cubic-bezier(.2,.88,.22,1), box-shadow .28s ease, filter .28s ease; -webkit-tap-highlight-color: transparent; }
.memory-piece::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.32), transparent 42%); pointer-events: none; }
.memory-piece span { position: absolute; right: 6px; bottom: 5px; z-index: 1; color: rgba(255,250,244,.92); font: .58rem/1 ui-monospace, monospace; text-shadow: 0 1px 2px rgba(50,31,30,.38); }
.memory-piece.is-dragging { cursor: grabbing; transition: none; filter: saturate(1.08) brightness(1.04); box-shadow: 0 14px 22px rgba(55,41,48,.3); }
.memory-piece.is-placed { border-color: rgba(255,250,244,.35); border-radius: 0; box-shadow: none; filter: saturate(1.08); cursor: default; }
.memory-piece.is-placed span { opacity: 0; transition: opacity .2s ease; }
.memory-puzzle.is-assembled { transform: translate3d(-50%,-50%,0) rotate(0); }
.memory-puzzle.is-assembled .puzzle-slot { opacity: 0; transition: opacity .45s ease; }
.memory-assembly .page-body { align-self: stretch; min-height: 0; }
.piano { background: radial-gradient(circle at 78% 13%, rgba(255,251,235,.82), transparent 25%), radial-gradient(circle at 11% 79%, rgba(157,143,193,.3), transparent 34%), linear-gradient(150deg, #e5e1f1, #f6ddcf); }
.piano .page-body { align-self: center; }
.piano .video-wrap::before { content: "PIANO · 她在弹琴"; background: #81739f; }
.puzzle-title { margin: 4px 0 0; text-align: center; white-space: nowrap; font: 400 clamp(1.75rem, 7vw, 2.35rem)/1.15 "STKaiti", "KaiTi", serif; }
.touch-bloom { position: fixed; z-index: 31; width: 20px; height: 20px; border: 2px solid #fff7dc; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); animation: touch-bloom .68s ease-out both; }
.touch-bloom--rose { border-color: #d66b7c; box-shadow: 0 0 0 7px rgba(214,107,124,.16); }
.touch-bloom--moon { border-color: #f2c878; box-shadow: 0 0 0 7px rgba(242,200,120,.2); }
@keyframes touch-bloom { from { opacity: .95; transform: translate(-50%, -50%) scale(.25); } to { opacity: 0; transform: translate(-50%, -50%) scale(4.8); } }
.illustration .single-photo { aspect-ratio: 1; object-fit: contain; background: #fff; }
.video-wrap { display: grid; gap: 13px; position: relative; }
.video-wrap::before { content: "REC · 唱给你听"; justify-self: start; padding: 5px 9px; transform: rotate(-2deg); background: var(--rose); color: #fffaf4; font: .66rem/1 ui-monospace, monospace; letter-spacing: .08em; }
video { width: 100%; max-height: 57dvh; border-radius: 0; background: #2c2221; box-shadow: 12px 14px 0 rgba(79,56,51,.16); }
.song-caption { margin: 0; padding: 14px 16px; border-left: 3px solid var(--rose); background: rgba(255,250,244,.62); font-family: "STKaiti", "KaiTi", serif; font-size: 1.18rem; line-height: 1.55; }
.source-note { margin: 20px 0 0; font-size: 1rem; line-height: 1.8; }
.confession { background: radial-gradient(ellipse at 50% 44%, rgba(255,226,184,.2) 0 5%, rgba(255,226,184,.08) 17%, transparent 43%), linear-gradient(160deg, #211b28, #100f18 72%); color: #f9ead8; }
.confession .page-head, .confession .page-foot { border-color: rgba(249,234,216,.2); color: rgba(249,234,216,.62); }
.confession .eyebrow { color: #eab5a1; }
.confession .page-body { position: relative; align-self: stretch; display: grid; align-content: center; min-height: 0; }
.confession-letter { width: min(100%, 30rem); margin: 0 auto; padding: clamp(24px, 7vw, 58px) clamp(20px, 8vw, 70px); position: relative; }
.confession-letter::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 52px; background: linear-gradient(#eab5a1, transparent); opacity: .72; }
.confession-kicker { display: block; margin-bottom: 34px; color: #dfac96; font: .72rem/1 ui-monospace, monospace; letter-spacing: .22em; text-align: center; }
.confession p { margin: 0; font-family: "STKaiti", "KaiTi", serif; font-size: clamp(1.48rem, 6.2vw, 2.15rem); line-height: 1.95; letter-spacing: .08em; text-align: center; text-wrap: balance; }
.confession-pet { position: absolute; left: 50%; bottom: -8px; width: 96px; height: 96px; transform: translateX(-50%); filter: drop-shadow(0 8px 0 rgba(0,0,0,.22)); opacity: .94; pointer-events: none; }
.confession-pet .character-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.confession-pet > span { position: absolute; right: -5px; top: 25px; z-index: 2; font-size: 1.72rem; transform: rotate(-28deg); filter: drop-shadow(1px 2px 0 rgba(0,0,0,.25)); }
.confession--one { background: radial-gradient(ellipse at 50% 40%, rgba(255,220,172,.2) 0 5%, transparent 43%), linear-gradient(160deg, #211b28, #100f18 72%); }
.confession--two { background: radial-gradient(ellipse at 50% 44%, rgba(219,173,151,.18) 0 5%, transparent 41%), linear-gradient(160deg, #1b1b2b, #0e101a 72%); }
.confession--three { background: radial-gradient(ellipse at 50% 44%, rgba(241,196,161,.24) 0 6%, transparent 43%), linear-gradient(160deg, #281a26, #110d16 72%); }
#moon-letter[data-chapter="confession"] #pet-button { opacity: 0; pointer-events: none; transform: translateY(18px); }
.closing { background: #d37b72; color: #fffaf4; }
.closing .page-head, .closing .page-foot { border-color: rgba(255,250,244,.38); color: rgba(255,250,244,.85); }
.closing .eyebrow { color: #fffaf4; }
.closing .page-body { display: grid; gap: 28px; align-content: center; }
.closing-stamp { width: 72px; height: 72px; display: grid; place-items: center; justify-self: center; border: 1px solid #fffaf4; border-radius: 50%; transform: rotate(-10deg); font: 1.3rem/1 "STKaiti", "KaiTi", serif; letter-spacing: .08em; }
.closing .closing-line { margin: 0; text-align: center; font-family: "STKaiti", "KaiTi", serif; font-size: clamp(1.65rem, 7vw, 2.3rem); line-height: 1.65; }
.signature { margin: 0; text-align: center; color: var(--muted); font-family: "STKaiti", "KaiTi", serif; font-size: 1.5rem; letter-spacing: .28em; }
.signature-play { position: relative; width: min(100%, 330px); min-height: 112px; margin: -8px auto -4px; }
.signature-name { position: absolute; top: 24px; left: 50%; z-index: 1; padding: 5px 8px; border: 0; border-bottom: 2px solid rgba(255,250,244,.72); background: transparent; color: inherit; cursor: pointer; transform: translateX(-50%); font: 400 clamp(3rem, 14vw, 4.7rem)/.82 "STKaiti", "KaiTi", serif; letter-spacing: .09em; white-space: nowrap; transition: transform .2s ease, color .2s ease; }
.signature-name:active { transform: translateX(-50%) scale(.94); }
.signature-cat { position: absolute; right: 2px; bottom: -1px; z-index: 3; width: 106px; padding: 0; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(3px 6px 0 rgba(104,56,51,.12)); }
.signature-cat .cat-character { width: 100%; animation: signature-cat-arrive .75s cubic-bezier(.2,.9,.2,1) both, signature-cat-poke 1.7s cubic-bezier(.46,0,.54,1) .9s infinite; }
.signature-cat::after { content: ""; position: absolute; left: 3px; bottom: 19px; width: 35px; height: 10px; border-radius: 50% 50% 45% 45%; background: #e99a43; transform: rotate(-20deg); transform-origin: right center; animation: cat-paw-poke 1.7s cubic-bezier(.46,0,.54,1) .9s infinite; }
.signature-bubble { position: absolute; top: -15px; left: -4px; min-width: 47px; padding: 7px 8px; border-radius: 13px 13px 13px 3px; background: #fffaf4; color: var(--rose); box-shadow: 3px 4px 0 rgba(104,56,51,.12); font: 700 .78rem/1 "Microsoft YaHei", sans-serif; white-space: nowrap; }
.signature-bubble::after { content: ""; position: absolute; right: 7px; bottom: -6px; width: 10px; height: 10px; background: #fffaf4; clip-path: polygon(0 0, 100% 0, 15% 100%); }
@keyframes signature-cat-arrive { from { opacity: 0; transform: translateX(22px) rotate(7deg); } to { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes signature-cat-poke { 0%, 38%, 100% { transform: translateX(0); } 54%, 70% { transform: translateX(-11px) rotate(-4deg); } }
@keyframes cat-paw-poke { 0%, 38%, 100% { transform: rotate(-20deg) translateX(0); } 54%, 70% { transform: rotate(-20deg) translateX(-19px); } }
#easter-egg { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; align-content: center; gap: 20px; padding: 34px; overflow: hidden; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 38%, #f8dca8 0 8%, #70475c 8.5% 19%, #201e3d 56%, #14152a); color: #fff9e9; transition: opacity .35s ease; }
#easter-egg.is-open { opacity: 1; pointer-events: auto; }
.easter-moon { position: absolute; top: 11%; width: min(48vw, 205px); aspect-ratio: 1; border-radius: 50%; background: #fff5d8; box-shadow: 0 0 0 15px rgba(255,223,167,.08), 0 0 55px rgba(255,230,176,.45); }
.easter-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 20%, rgba(15,15,39,.4) 88%); pointer-events: none; }
.easter-cats { position: relative; z-index: 2; display: flex; align-items: end; justify-content: center; width: min(84vw, 420px); margin-top: 114px; }
.easter-cats .cat-character { width: 27%; margin-inline: -5%; filter: drop-shadow(0 7px 0 rgba(18,17,40,.24)); animation: none; }
.easter-pet { position: relative; z-index: 3; width: 104px; margin-top: -22px; transform: rotate(-4deg); animation: easter-pet-rise .8s cubic-bezier(.2,.9,.2,1) .18s both; }
.easter-pet-image { display: block; width: 100%; height: auto; filter: drop-shadow(0 7px 0 rgba(18,17,40,.24)); }
.easter-heart { position: absolute; top: 10px; right: -12px; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #d95c76; font-size: 1.1rem; }
.easter-rose { position: absolute; left: -26px; bottom: 2px; font-size: 2.15rem; transform: rotate(-28deg); transform-origin: bottom right; animation: easter-rose-reveal 1.3s ease .4s both; }
#easter-egg p { position: relative; z-index: 3; max-width: 18em; margin: 0; text-align: center; font: 1.5rem/1.75 "STKaiti", "KaiTi", serif; letter-spacing: .08em; }
#easter-egg button { position: relative; z-index: 3; padding: 8px 12px; border: 1px solid rgba(255,249,233,.48); border-radius: 99px; background: rgba(255,249,233,.1); color: rgba(255,249,233,.9); cursor: pointer; font-size: .72rem; }
@keyframes easter-cat-hop { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-11px) rotate(-4deg); } }
@keyframes easter-pet-rise { from { opacity: 0; transform: translateY(30px) rotate(-11deg); } to { opacity: 1; transform: translateY(0) rotate(-4deg); } }
@keyframes easter-rose-reveal { from { opacity: 0; transform: translateX(17px) rotate(-28deg); } to { opacity: 1; transform: translateX(0) rotate(-28deg); } }
#page-progress { position: fixed; top: max(17px, env(safe-area-inset-top)); left: 50%; display: flex; gap: 5px; transform: translateX(-50%); z-index: 12; }
.page-dot { width: 5px; height: 5px; padding: 0; border: 0; border-radius: 50%; background: rgba(79,56,51,.25); cursor: pointer; }
.page-dot[aria-current="page"] { width: 19px; border-radius: 99px; background: var(--rose); }
#petal-layer { position: fixed; inset: 0; z-index: 7; overflow: hidden; pointer-events: none; }
.rose-petal { position: absolute; top: -12dvh; width: 13px; height: 9px; border-radius: 80% 10% 80% 10%; background: linear-gradient(145deg, #eab4b6, #b94e62); opacity: .33; animation: petal-fall var(--duration) linear var(--delay) infinite; }
@keyframes petal-fall { to { transform: translate3d(var(--drift), 118dvh, 0) rotate(390deg); } }
#story-thread { position: fixed; right: 64px; bottom: max(54px, calc(env(safe-area-inset-bottom) + 43px)); left: 64px; z-index: 14; height: 1px; border-top: 1px dashed rgba(79,56,51,.3); pointer-events: none; }
#story-thread::before { content: ""; position: absolute; top: -5px; left: var(--thread-progress, 0%); width: 10px; height: 10px; border: 2px solid #fffaf4; border-radius: 50%; background: var(--rose); transform: translateX(-50%); box-shadow: 0 2px 7px rgba(79,56,51,.18); transition: left .65s cubic-bezier(.2,.8,.2,1), background .35s ease; }
#story-thread[data-cat="orange"]::before { background: #e68c38; }
#story-thread[data-cat="tabby"]::before { background: #806750; }
#story-thread[data-cat="calico"]::before { background: #d36e42; }
#story-thread[data-cat="golden"]::before { background: #d7af54; }
.thread-knot { position: absolute; top: -4px; right: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
#cat-footprints { position: fixed; z-index: 14; left: var(--cat-progress, 0%); bottom: max(44px, calc(env(safe-area-inset-bottom) + 37px)); display: flex; gap: 3px; opacity: .48; pointer-events: none; transform: translateX(-50%) rotate(-8deg); transition: left .65s cubic-bezier(.2,.8,.2,1); }
#cat-footprints i { position: relative; width: 8px; height: 6px; color: transparent; border-radius: 50%; background: rgba(79,56,51,.37); transform: rotate(28deg); }
#cat-footprints i::before, #cat-footprints i::after { content: ""; position: absolute; top: -4px; width: 3px; height: 4px; border-radius: 50%; background: rgba(79,56,51,.37); }
#cat-footprints i::before { left: 1px; } #cat-footprints i::after { right: 1px; }
#cat-footprints i:nth-child(2) { transform: translateY(3px) rotate(24deg); opacity: .72; } #cat-footprints i:nth-child(3) { opacity: .42; }
#cat-parade { position: fixed; z-index: 15; bottom: max(17px, env(safe-area-inset-bottom)); left: 50%; width: 126px; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(3px 5px 0 rgba(79,56,51,.1)); }
#moon-letter.is-closing #cat-parade { opacity: 0; transform: translate(-50%, 18px); transition: opacity .25s ease, transform .25s ease; }
.cat-character { position: relative; width: 100%; aspect-ratio: 1; transform-origin: 50% 100%; animation: cat-arrive .56s cubic-bezier(.2,.9,.2,1) both; will-change: transform; }
.character-frames { position: relative; display: block; width: 100%; height: 100%; }
.character-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 1; transform-origin: 50% 100%; }
.cat-body, .cat-head { fill: #e9bb70; }
.cat-tail { fill: none; stroke: #e9bb70; stroke-width: 6; stroke-linecap: round; }
.cat-eye { fill: #493b32; }
.cat-nose, .cat-muzzle, .cat-whiskers, .cat-feet { fill: none; stroke: #493b32; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cat-stripe { fill: none; stroke: rgba(80,54,34,.6); stroke-width: 2; stroke-linecap: round; }
.cat-patch { stroke: none; }
.patch-orange { fill: #df8740; }
.patch-dark { fill: #5e514b; }
.patch-light { fill: #fff5dc; }
.cat-orange .cat-body, .cat-orange .cat-head { fill: #e99a43; }
.cat-orange .cat-tail { stroke: #e99a43; }
.cat-tabby .cat-body, .cat-tabby .cat-head { fill: #99816a; }
.cat-tabby .cat-tail { stroke: #99816a; }
.cat-calico .cat-body, .cat-calico .cat-head { fill: #fff7e9; }
.cat-calico .cat-tail { stroke: #fff7e9; }
.cat-golden .cat-body, .cat-golden .cat-head { fill: #e7c06c; }
.cat-golden .cat-tail { stroke: #e7c06c; }
@keyframes cat-arrive { from { opacity: 0; translate: -16px 7px; } to { opacity: 1; translate: 0 0; } }
@keyframes cat-breathe { 50% { transform: translateY(-2px) rotate(-2deg); } }
#cat-parade .cat-tail { transform-origin: 63px 50px; animation: cat-tail-wag 1.7s ease-in-out infinite; }
#cat-parade[data-mood="stroll"] .cat-character { animation: cat-stroll 1.1s ease-in-out .2s infinite; }
#cat-parade[data-mood="stretch"] .cat-character { animation: cat-stretch 2.6s ease-in-out .2s infinite; }
#cat-parade[data-mood="peek"] .cat-character { animation: cat-peek 2.1s ease-in-out .2s infinite; }
#cat-parade[data-mood="pounce"] .cat-character { animation: cat-pounce 1.55s cubic-bezier(.32,.75,.4,1) .2s infinite; }
.cat-shadow { position: absolute; right: 15px; bottom: 1px; width: 76px; height: 9px; border-radius: 50%; background: rgba(79,56,51,.15); filter: blur(1px); }
.cat-toy { position: absolute; z-index: 2; right: 5px; top: 21px; display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: #fff4d8; color: #cf8955; box-shadow: 0 3px 8px rgba(79,56,51,.12); font: .8rem/1 serif; animation: cat-toy-bob 1.9s ease-in-out infinite; }
@keyframes cat-tail-wag { 50% { transform: rotate(13deg); } }
@keyframes cat-stroll { 30% { transform: translateX(5px) translateY(-2px) rotate(-2deg); } 68% { transform: translateX(-4px) translateY(1px) rotate(2deg); } }
@keyframes cat-stretch { 45% { transform: translate3d(5px,2px,0) rotate(2deg); } 68% { transform: translate3d(-3px,0,0) rotate(-1deg); } }
@keyframes cat-peek { 45% { transform: translateY(-8px) rotate(4deg); } }
@keyframes cat-pounce { 45% { transform: translate3d(-10px,-11px,0) rotate(-6deg); } 78% { transform: translate3d(3px,2px,0) rotate(2deg); } }
@keyframes cat-toy-bob { 50% { transform: translateY(-9px) rotate(26deg); } }
#music-pendant { position: fixed; z-index: 16; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); }
.music-orb, .music-controls button { border: 0; cursor: pointer; }
.music-orb { width: 42px; height: 42px; border: 1px solid rgba(79,56,51,.13); border-radius: 50% 50% 50% 6px; background: #d7e2cd; box-shadow: 0 6px 15px rgba(79,56,51,.14); font-size: 1.2rem; }
.music-hint { position: absolute; left: 38px; bottom: 36px; width: max-content; padding: 7px 9px; border-radius: 13px 13px 13px 3px; background: #fffaf4; color: var(--rose); box-shadow: 3px 4px 0 rgba(79,56,51,.12); font: .78rem/1 "STKaiti", "KaiTi", serif; animation: music-hint-bob 1.8s ease-in-out infinite; }
.music-hint i { display: block; margin: 2px 0 -5px 7px; font: 1.3rem/1 serif; }
@keyframes music-hint-bob { 50% { transform: translateY(-5px) rotate(-2deg); } }
.music-panel { width: min(282px, calc(100vw - 28px)); max-height: min(66dvh, 530px); margin-bottom: 10px; padding: 14px; overflow: auto; border: 1px solid rgba(255,255,255,.7); border-radius: 20px 20px 20px 5px; background: rgba(255,250,244,.95); box-shadow: 0 12px 32px rgba(79,56,51,.17); backdrop-filter: blur(12px); }
.track-title { min-height: 2.7em; margin: 8px 0 10px; overflow: hidden; font-size: .82rem; line-height: 1.35; color: var(--muted); }
.track-artist { margin: -8px 0 10px; color: var(--rose); font-size: .68rem; }
.music-controls { display: flex; justify-content: center; align-items: center; gap: 10px; }
.music-controls button { width: 32px; height: 32px; border-radius: 50%; background: transparent; font-size: 1.4rem; }
.music-controls .play { width: 39px; height: 39px; background: var(--rose); color: white; font-size: .95rem; }
.volume { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; margin-top: 12px; color: var(--muted); font-size: .68rem; }
.music-progress { display: grid; grid-template-columns: 33px 1fr 33px; align-items: center; gap: 7px; color: var(--muted); font: .6rem/1 ui-monospace, monospace; }
.music-progress input, .volume input { width: 100%; accent-color: var(--rose); }
.track-list { display: grid; gap: 4px; margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--line); }
.track-list button { display: grid; grid-template-columns: 1fr auto; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.track-list button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .73rem; }
.track-list button small { color: var(--muted); font-size: .62rem; }
.track-list button[aria-current="true"] { background: rgba(185,78,98,.12); color: var(--rose); }
#pet-button { position: fixed; z-index: 16; right: max(-8px, env(safe-area-inset-right)); bottom: max(-5px, env(safe-area-inset-bottom)); width: 134px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: transform .2s ease; }
#pet-button:active { transform: scale(.94); }
.pet-motion { position: relative; display: block; transform: translate3d(0, calc(var(--pet-pull, 0) * -52px), 0) rotate(calc(var(--pet-pull, 0) * -13deg)); transform-origin: 72% 100%; transition: transform .18s ease-out; will-change: transform; }
#pet-button:not(.is-pulling):not(.is-delivering):not(.is-happy) .pet-motion { animation: pet-idle 3.8s ease-in-out infinite; }
.pet-tab { position: absolute; top: 30px; left: -8px; display: grid; gap: 4px; width: 27px; padding: 11px 7px; border-radius: 9px 0 0 9px; background: var(--rose); z-index: -1; }
.pet-tab b { display: block; height: 1px; background: rgba(255,255,255,.82); }
.pet-motion > .character-frames { display: block; width: 134px; height: 134px; filter: drop-shadow(4px 7px 0 rgba(79,56,51,.13)); }
.pet-heart { position: absolute; right: 2px; top: 18px; display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: #ca5d67; color: white; box-shadow: 0 5px 10px rgba(79,56,51,.16); font-size: 1rem; animation: pet-heartbeat 2.2s ease-in-out infinite; }
.rose { position: absolute; left: 12px; top: 46px; width: 25px; height: 44px; transform: translateX(calc(var(--pet-pull, 0) * 30px)) rotate(calc(var(--pet-pull, 0) * -22deg)); z-index: -1; transition: transform .25s ease; }
.rose::before { content: ""; position: absolute; left: 12px; top: 14px; width: 3px; height: 30px; background: #6b9570; transform: rotate(-18deg); }
.rose i { position: absolute; left: 5px; width: 19px; height: 19px; border-radius: 55% 45% 55% 45%; background: #b93d52; box-shadow: 3px 3px 0 #d46a74; }
.pet-sparkles { position: absolute; inset: 0; pointer-events: none; }
.pet-sparkles i { position: absolute; color: #f4cf82; opacity: 0; font: 1rem/1 serif; }
.pet-sparkles i:nth-child(1) { left: 4px; top: 2px; } .pet-sparkles i:nth-child(2) { right: -1px; top: 5px; } .pet-sparkles i:nth-child(3) { left: 2px; bottom: 12px; }
.pet-phrase { position: absolute; right: 106px; top: -16px; width: max-content; max-width: 124px; padding: 8px 10px; border: 1px solid rgba(255,250,244,.82); border-radius: 13px 13px 3px 13px; background: rgba(255,250,244,.94); color: #765e58; box-shadow: 3px 5px 0 rgba(79,56,51,.12); font: .77rem/1.35 "STKaiti", "KaiTi", serif; opacity: 0; transform: translateY(8px) scale(.94); transition: opacity .22s ease, transform .22s ease; pointer-events: none; }
.pet-phrase::after { content: ""; position: absolute; right: 12px; bottom: -6px; width: 11px; height: 11px; background: #fffaf4; clip-path: polygon(15% 0, 100% 0, 90% 100%); }
.health .page-body { position: relative; }
.health-pet { position: absolute; right: 16px; bottom: 72px; z-index: 3; width: 88px; transform: rotate(-5deg); filter: drop-shadow(2px 5px 0 rgba(79,56,51,.1)); animation: health-pet-sad 3.8s ease-in-out infinite; will-change: transform; }
.health-pet-image { display: block; width: 100%; height: auto; }
@keyframes health-pet-sad { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg); } 50% { transform: translate3d(-2px, -3px, 0) rotate(-2deg); } }
#pet-button.is-pulling .pet-motion { transition: none; }
#pet-button.is-happy .pet-motion { animation: pet-bounce .55s ease; }
#pet-button.is-delivering .pet-motion { animation: pet-deliver 1.12s cubic-bezier(.2,.85,.24,1) both; }
#moon-letter[data-turn="down"] #pet-button.is-delivering .pet-motion { animation-name: pet-deliver-back; }
#pet-button.is-speaking .pet-phrase { opacity: 1; transform: translateY(0) scale(1); }
#pet-button.is-showing-rose .pet-motion > .character-frames { animation: pet-rose-present .92s cubic-bezier(.2,.85,.24,1) both; }
#pet-button.is-showing-rose .pet-sparkles i { animation: pet-spark .78s ease-out both; }
#pet-button.is-showing-rose .pet-sparkles i:nth-child(2) { animation-delay: .12s; } #pet-button.is-showing-rose .pet-sparkles i:nth-child(3) { animation-delay: .22s; }
@keyframes pet-idle { 0%, 100% { transform: translateY(0) rotate(-1deg); } 45% { transform: translateY(-4px) rotate(2deg); } }
@keyframes pet-heartbeat { 12%, 32% { transform: scale(1.14); } 22%, 42%, 100% { transform: scale(1); } }
@keyframes pet-spark { from { opacity: 0; transform: scale(.3); } 45% { opacity: 1; } to { opacity: 0; transform: translateY(-18px) scale(1.35); } }
@keyframes pet-bounce { 50% { transform: translateY(-13px) rotate(7deg); } }
@keyframes pet-deliver { 0% { transform: translate3d(0,0,0) rotate(0); } 16% { transform: translate3d(1px,-7px,0) rotate(-5deg); } 38% { transform: translate3d(-12px,-31px,0) rotate(5deg); } 56% { transform: translate3d(-18px,-58px,0) rotate(8deg); } 76% { transform: translate3d(-8px,-37px,0) rotate(-2deg); } 100% { transform: translate3d(0,0,0) rotate(0); } }
@keyframes pet-deliver-back { 0% { transform: translate3d(0,0,0) rotate(0); } 16% { transform: translate3d(1px,7px,0) rotate(4deg); } 38% { transform: translate3d(-10px,25px,0) rotate(-5deg); } 56% { transform: translate3d(-16px,43px,0) rotate(-7deg); } 76% { transform: translate3d(-7px,28px,0) rotate(2deg); } 100% { transform: translate3d(0,0,0) rotate(0); } }
@keyframes pet-rose-present { 0%, 100% { transform: translate3d(0,0,0) rotate(0); } 48% { transform: translate3d(-12px,-8px,0) rotate(-6deg); } }
dialog { width: min(86vw, 390px); border: 0; border-radius: 25px 6px 25px 6px; background: #fffaf4; color: var(--ink); box-shadow: 0 18px 60px rgba(55,37,31,.34); }
dialog::backdrop { background: rgba(79,56,51,.42); backdrop-filter: blur(4px); }
#note-dialog { padding: 28px; }
#note-dialog [data-note-text] { margin: 13px 0 0; font-family: "STKaiti", "KaiTi", serif; font-size: 1.35rem; line-height: 1.8; }
#puzzle-dialog { width: min(82vw, 340px); padding: 34px 28px 28px; text-align: center; }
.puzzle-dialog-main { margin: 0; color: var(--rose); font: 400 1.65rem/1.45 "STKaiti", "KaiTi", serif; }
.puzzle-dialog-sub { margin: 10px 0 0; color: var(--muted); font: 1rem/1.5 "STKaiti", "KaiTi", serif; }
.dialog-close { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: var(--muted); font-size: 1.7rem; cursor: pointer; }
#lightbox { width: min(94vw, 720px); max-width: none; padding: 36px 10px 10px; background: rgba(255,250,244,.98); }
#lightbox img { display: block; width: 100%; max-height: 78dvh; object-fit: contain; }
/* 手机端以阅读为先：辅助信息保持层级，但不再低于约 13px。 */
.eyebrow { font-size: .8rem; }
.page-mark { font-size: .78rem; }
.page-foot { font-size: .72rem; }
.cover-orbit { font-size: .72rem; }
.section-note { font-size: .96rem; line-height: 1.65; }
.deck-index { min-width: 72px; font-size: .78rem; }
.deck-index b { font-size: .66rem; }
.vanishing-copy span { font-size: .84rem; }
.song-link { font-size: .86rem; }
.song-link span { font-size: .78rem; }
.video-wrap::before { font-size: .76rem; }
#easter-egg button { font-size: .84rem; }
.music-hint { font-size: .88rem; }
.track-title { font-size: .94rem; }
.track-artist, .volume { font-size: .8rem; }
.music-progress { font-size: .72rem; }
.track-list button { padding-block: 9px; }
.track-list button span { font-size: .84rem; }
.track-list button small { font-size: .72rem; }
.pet-phrase { max-width: 142px; font-size: .88rem; line-height: 1.4; }
.memory-piece span { font-size: .68rem; }
@media (min-width: 700px) {
  body { background: linear-gradient(120deg, #f3e7d9, #d4e1dc); }
  #moon-letter { width: min(920px, 100vw); margin: 0 auto; box-shadow: 0 0 80px rgba(79,56,51,.16); }
  .moon-page { padding-inline: clamp(34px, 7vw, 76px); }
  .photo-deck { height: min(58dvh, 600px); }
  #music-pendant { left: max(20px, calc(50% - 460px + 24px)); }
  #pet-button { right: max(0px, calc(50% - 460px + 12px)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .rose-petal { top: var(--top); } #moon-pull { display: none; } }
#lock-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 74% 18%, rgba(239,183,165,.4), transparent 26rem), linear-gradient(150deg, #fffaf3, var(--paper-deep)); opacity: 1; transition: opacity .42s ease; }
#lock-screen.is-unlocked { opacity: 0; pointer-events: none; }
.lock-card { display: grid; justify-items: center; gap: 12px; max-width: 340px; padding: 40px 34px 34px; border: 1px solid rgba(79,56,51,.14); border-radius: 4px; background: rgba(255,250,244,.72); box-shadow: 12px 14px 0 rgba(185,78,98,.14), 0 18px 44px rgba(79,56,51,.16); }
.lock-seal { display: grid; width: 46px; height: 46px; place-items: center; transform: rotate(-10deg); border: 1px solid var(--rose); border-radius: 50%; color: var(--rose); font: 1rem/1 "STKaiti", "KaiTi", serif; letter-spacing: .1em; }
.lock-title { margin: 6px 0 0; color: var(--ink); font: 400 1.7rem/1.2 "STKaiti", "KaiTi", serif; letter-spacing: .1em; }
.lock-hint { margin: 0; color: var(--muted); font-size: .82rem; letter-spacing: .12em; }
.lock-field { margin-top: 8px; }
#lock-input { width: 172px; padding: 10px 12px; border: 1px solid var(--line); border-bottom: 2px solid var(--rose); border-radius: 2px; background: #fffdf7; color: var(--ink); font-size: 1.5rem; letter-spacing: .55em; text-align: center; text-indent: .55em; caret-color: var(--rose); }
#lock-input:focus { outline: 2px solid rgba(185,78,98,.3); outline-offset: 3px; }
.lock-error { margin: 0; color: var(--rose); font-size: .78rem; letter-spacing: .06em; }
.lock-open { margin-top: 4px; padding: 8px 22px; border: 0; border-radius: 99px; background: var(--rose); color: #fffaf4; cursor: pointer; font-size: .88rem; letter-spacing: .18em; }
.lock-open:active { opacity: .85; }

/* 新增沉浸反馈：歌曲视频与彩蛋领花 */
.song-videos { display: grid; gap: 12px; margin-top: 14px; }
.song-video-card { margin: 0; padding: 7px 7px 0; overflow: hidden; border: 5px solid rgba(255,255,255,.86); background: rgba(255,250,244,.62); box-shadow: 5px 7px 0 rgba(79,56,51,.11); transform: rotate(-.7deg); }
.song-video-card:nth-child(2) { transform: translateY(8px) rotate(1deg); }
.song-video-card .video-wrap { margin: 0; gap: 7px; }
.song-video-card video { width: 100%; max-height: 31dvh; aspect-ratio: 9 / 16; object-fit: contain; background: #1b1820; }
.song-video-card figcaption { padding: 6px 7px 8px; color: var(--muted); font: .82rem/1.3 "STKaiti", "KaiTi", serif; text-align: center; }
#easter-roses { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.easter-rose-drop { position: absolute; top: -12vh; display: block; width: 28px; height: 58px; color: #e84865; font: 1.55rem/1 serif; text-shadow: 0 3px 3px rgba(0,0,0,.25); animation: easter-rose-drop var(--rose-duration) cubic-bezier(.2,.7,.25,1) var(--rose-delay) forwards; }
.easter-rose-drop::after { content: ""; position: absolute; left: 13px; top: 25px; width: 2px; height: 31px; border-radius: 99px; background: #6d9d70; transform: rotate(-7deg); transform-origin: top; }
.easter-actions { position: relative; z-index: 4; display: flex; gap: 9px; justify-content: center; }
.easter-actions button { min-width: 108px; }
@keyframes easter-rose-drop { 0% { opacity: 0; transform: translate3d(0,-4vh,0) rotate(-12deg); } 8% { opacity: 1; } 100% { opacity: .96; transform: translate3d(var(--rose-sway), 116vh, 0) rotate(360deg); } }
.pet-motion { transform: translate3d(0, calc(var(--pet-pull, 0) * -52px), 0) rotate(calc(var(--pet-pull, 0) * -13deg)); }
.pet-chapter-state { position: absolute; right: 6px; top: -3px; max-width: 92px; padding: 4px 7px; border: 1px solid rgba(255,250,244,.75); border-radius: 10px 10px 2px 10px; background: rgba(255,250,244,.88); color: var(--rose); font: .66rem/1.2 "Microsoft YaHei", sans-serif; opacity: .9; white-space: nowrap; transform: translateY(-100%); pointer-events: none; }
#pet-button[data-chapter="closing"] .pet-chapter-state { color: #d6a45c; }
@media (prefers-reduced-motion: reduce) { .easter-rose-drop { animation: none; top: 40%; } }