:root {
  color-scheme: light;
  --paper: #edf1f1; --sheet: #fbfcfb; --ink: #1e2a44; --ink-2: #5d6679; --ink-3: #98a0ae; --rule: #d6dcdf;
  --air-red: #c8323a; --air-blue: #2d4f9e; --stamp: #d9a22e; --desk: #e3e8e8;
  --serif: "Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --hand: "Kaiti SC","STKaiti","KaiTi","BiauKai",serif;
  --sans: "PingFang SC",-apple-system,BlinkMacSystemFont,"Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --num: "Iowan Old Style","Georgia","Times New Roman",serif;
  --shadow-env: 0 1px 0 rgba(30,42,68,.04), 0 10px 24px -8px rgba(30,42,68,.22);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--air-blue); outline-offset: 2px; }
.page { max-width: 480px; margin: 0 auto; min-height: 100vh; position: relative; }

/* 按钮 */
.btn-ink { background: var(--ink); color: #fff; border-radius: 999px; padding: 0 24px; height: 48px; font-size: 15px; font-weight: 600; letter-spacing: 1px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .12s, opacity .2s; text-decoration: none; }
.btn-ink:active { transform: scale(.97); }
.btn-ink[disabled] { opacity: .45; pointer-events: none; }
.btn-line { border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); border-radius: 999px; padding: 0 20px; height: 46px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.toast { position: fixed; left: 50%; top: 24px; z-index: 99; transform: translate(-50%, -16px); background: var(--ink); color: #fff; font-size: 14px; padding: 11px 20px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: 88vw; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 信封正面 */
.env-front { position: relative; width: 100%; aspect-ratio: 12 / 7; border-radius: 10px; overflow: hidden; background: var(--ef-bg, #fbfcfb); box-shadow: var(--shadow-env); container-type: inline-size; }
.ef-stripe { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, #c8323a 0 5.2cqw, #fbfcfb 5.2cqw 7.4cqw, #2d4f9e 7.4cqw 12.6cqw, #fbfcfb 12.6cqw 14.8cqw); }
.ef-in { position: absolute; inset: 0; background: var(--ef-bg, #fbfcfb); }
.ef-in.air { inset: 2.6cqw; border-radius: 1.2cqw; }
.ef-in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.5), transparent 40%, rgba(30,42,68,.04)); }
.ef-zip { position: absolute; left: 5.5cqw; top: 5.5cqw; display: flex; gap: 1.3cqw; }
.ef-zip i { width: 5.6cqw; height: 6.4cqw; border: .35cqw solid #c8323a; display: grid; place-items: center; font-style: normal; font-family: var(--hand); font-size: 4.4cqw; color: #1e2a44; line-height: 1; }
.ef-stamp { position: absolute; right: 6cqw; top: 5cqw; width: 15cqw; height: 18cqw; padding: 1.1cqw; background: #fff; filter: drop-shadow(0 .3cqw .5cqw rgba(30,42,68,.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle at 1.1cqw 1.1cqw, transparent .62cqw, #000 .72cqw) -1.1cqw -1.1cqw / 2.2cqw 2.2cqw round;
  mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle at 1.1cqw 1.1cqw, transparent .62cqw, #000 .72cqw) -1.1cqw -1.1cqw / 2.2cqw 2.2cqw round; }
.ef-stamp svg { width: 100%; height: 100%; display: block; }
.ef-mark { position: absolute; right: 13cqw; top: 10cqw; width: 22cqw; height: 22cqw; transform: rotate(-12deg); opacity: .78; }
.ef-to { position: absolute; left: 13cqw; right: 14cqw; top: 31cqw; font-family: var(--hand); color: #1e2a44; font-size: 7.2cqw; line-height: 1.1; border-bottom: .3cqw dashed rgba(30,42,68,.25); padding: 0 0 2.4cqw 3cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef-from { position: absolute; right: 8cqw; bottom: 8cqw; font-family: var(--hand); color: #1e2a44; font-size: 4.6cqw; text-align: right; max-width: 50cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef-tag { position: absolute; left: 6cqw; bottom: 6.5cqw; border: .35cqw solid #2d4f9e; color: #2d4f9e; font-family: var(--serif); font-weight: 700; font-size: 3.2cqw; padding: .6cqw 1.6cqw; letter-spacing: .4cqw; border-radius: .6cqw; background: rgba(255,255,255,.6); }
.ef-tag.lock { border-color: var(--stamp); color: #9a6c10; }

/* ===== 拆信场景（650×1000 设计尺寸，外层整体缩放；时间线同原版 4.2s） ===== */
.scene-wrap { position: absolute; left: 50%; top: 50%; width: 650px; height: 1000px; transform-origin: center center; }
.scene { position: absolute; inset: 0; perspective: 1800px; }
.motion { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.is-playing .motion { opacity: 1; }
.env-back, .env-pocket { border-radius: 5px; height: 350px; left: 25px; position: absolute; top: 360px; width: 600px; }
.env-back { background: var(--inner-color); z-index: 1; overflow: hidden; }
.env-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.10), transparent 45%, rgba(255,255,255,.12)); }
.env-pocket { overflow: hidden; z-index: 4; }
.env-pocket img, .surface { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.flap-slot { position: absolute; inset: 0; pointer-events: none; z-index: 5; perspective: 1800px; }
.flap-slot.behind { z-index: 2; }
.hinge { left: 25px; position: absolute; top: 360px; width: 600px; transform-origin: center top; transform-style: preserve-3d; will-change: transform; }
.flap { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flap-img { position: absolute; left: 0; top: 0; width: 600px; height: 350px; border-radius: 26px 26px 0 0; display: block; }
.flap-inside { backface-visibility: visible; -webkit-backface-visibility: visible; background: var(--inner-color); opacity: 0; }
.flap-inside::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.07), rgba(255,255,255,.08)); }
.pviewport { position: absolute; left: -300px; right: -300px; top: -1000px; bottom: -9000px; overflow: hidden; pointer-events: none; z-index: 3; }
.pclip { position: absolute; left: 0; right: 0; top: 0; height: 1706px; overflow: hidden; }
.lifting { position: absolute; left: 325px; top: 1385px; --lift-y: -370px; --lift-x: 0px; width: 600px; transform: scale(.858333); transform-origin: center top; will-change: transform; }
.plight-clip { position: absolute; inset: 0; overflow: hidden; }
.plight { position: absolute; top: 0; bottom: 0; left: -50%; width: 100%; opacity: 0; background: linear-gradient(110deg, transparent, rgba(255,255,255,.4), transparent); }
.gshadow { position: absolute; left: 47px; top: 698px; width: 556px; height: 36px; background: radial-gradient(ellipse at 50% 30%, rgba(30,42,68,.18), rgba(30,42,68,.06) 42%, transparent 72%); }
.closed-group { position: absolute; inset: 0; transform-origin: 325px 535px; }
.closed-img { position: absolute; left: 25px; top: 360px; width: 600px; height: 350px; z-index: 8; display: block; }
.seal-av { position: absolute; z-index: 9; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 8px rgba(60,48,30,.14); pointer-events: none; }
.seal-av img { width: 100%; height: 100%; display: block; }
.wax-piece { position: absolute; z-index: 7; overflow: hidden; }
.wax-src { position: absolute; width: 600px; height: 350px; max-width: none; display: block; }
.front-face { position: absolute; left: 25px; top: 360px; width: 600px; z-index: 12; transform-origin: 300px 175px; }
.front-face .env-front { border-radius: 14px; }

.flipping .front-face { animation: flip-out .32s cubic-bezier(.5,0,.9,.5) forwards; }
.flipping .closed-group { animation: flip-in .38s cubic-bezier(.1,.5,.4,1) .32s both; }
@keyframes flip-out { to { transform: rotateY(90deg) scale(.96); } }
@keyframes flip-in { from { transform: rotateY(-90deg) scale(.96); } to { transform: none; } }
.show-front .closed-group { transform: rotateY(-90deg); }
.front-gone .front-face { display: none; }
.drop-in .front-face { animation: drop-in .7s cubic-bezier(.2,.9,.25,1.15) both; }
@keyframes drop-in { from { transform: translateY(-140px) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }

.is-playing .hinge { animation: flip 4.2s cubic-bezier(.4,0,.2,1) both; }
.is-playing .flap-front { animation: front-face 4.2s step-end both; }
.is-playing .flap-inside { animation: inside-face 4.2s step-end both; }
.is-playing .lifting { animation: lift 4.2s cubic-bezier(.25,.65,.3,1) both; }
.is-playing .plight { animation: sheen 4.2s ease both; }
.is-playing .env-back, .is-playing .env-pocket, .is-playing .gshadow { animation: fall 4.2s cubic-bezier(.4,0,.2,1) both; }
.is-playing .pclip { animation: occl 4.2s cubic-bezier(.4,0,.2,1) both; }
.is-playing .closed-img { animation: handoff 4.2s step-end both; }
.is-playing .wax-piece, .is-playing .seal-av { animation: peel 4.2s ease both; }
@keyframes flip { 0%,8% { transform: rotateX(0); } 27%,39% { transform: rotateX(178deg) translateZ(-2px); } 78%,to { transform: translateY(1200px) rotateX(178deg) translateZ(-2px); } }
@keyframes front-face { 0% { opacity: 1; } 18%,to { opacity: 0; } }
@keyframes inside-face { 0% { opacity: 0; } 18%,to { opacity: 1; } }
@keyframes lift { 0%,25% { transform: translate(0) scale(.858333); } 61% { transform: translateY(-300px) scale(.858333); } 88%,to { transform: translate(var(--lift-x),var(--lift-y)) scale(1); } }
@keyframes sheen { 0%,18% { left: -50%; opacity: 0; } 36% { opacity: .5; } 58%,to { left: 50%; opacity: 0; } }
@keyframes fall { 0%,39% { transform: translateY(0); } 78%,to { transform: translateY(1200px); } }
@keyframes occl { 0%,39% { height: 1706px; } 78% { height: 2906px; } 88%,to { height: 40000px; } }
@keyframes handoff { 0% { visibility: visible; } 2%,to { visibility: hidden; } }
@keyframes peel { 0% { opacity: 1; transform: scale(1); } 6% { opacity: 1; transform: translateY(-6px) rotate(-5deg) scale(1.06); } 15%,to { opacity: 0; transform: translate(15px,35px) rotate(12deg) scale(.9); } }

/* 信纸 */
.letter { width: 600px; min-height: 780px; background: var(--lp-bg, #fbfcfa); color: var(--lp-ink, #2a2f3c); overflow: hidden; border-radius: 6px; position: relative; padding: 70px 58px 90px; font-family: var(--hand);
  box-shadow: 0 2px 0 rgba(0,0,0,.03), 0 22px 44px rgba(30,42,68,.12);
  background-image: repeating-linear-gradient(180deg, transparent 0 61px, var(--lp-line, rgba(45,79,158,.14)) 61px 63px); background-position: 0 168px; background-size: 100% calc(100% - 168px - 90px); background-repeat: no-repeat; word-break: break-word; }
.lt-head { position: relative; display: flex; justify-content: space-between; align-items: flex-start; height: 98px; }
.lt-head b { font-family: var(--serif); font-size: 36px; letter-spacing: 6px; color: var(--lp-accent, #2d4f9e); }
.lt-head span { font-family: var(--num); font-size: 22px; color: #8a90a0; margin-top: 10px; }
.lt-air { position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 6px 6px 0 0; background: repeating-linear-gradient(-45deg, #c8323a 0 14px, transparent 14px 20px, #2d4f9e 20px 34px, transparent 34px 40px); }
.letter p { font-size: 33px; line-height: 63px; text-indent: 2em; }
.letter p.salute { text-indent: 0; }
.lt-sign { text-align: right; font-size: 30px; line-height: 56px; margin-top: 30px; color: var(--lp-ink, #4b5162); opacity: .85; position: relative; }
.lt-sign b { display: block; font-size: 36px; color: var(--lp-accent, #2d4f9e); }

/* 寄信动画 */
.send-stage { position: absolute; left: 50%; top: 56%; width: 650px; height: 1000px; transform-origin: center; }
.sd-group { position: absolute; inset: 0; transform-origin: 325px 535px; perspective: 1400px; }
.sd-paper { position: absolute; left: 105px; top: -230px; width: 440px; height: 560px; transform-style: preserve-3d; z-index: 3; }
.sd-half { position: absolute; left: 0; right: 0; height: 280px; background: #fbfcfa; background-image: repeating-linear-gradient(180deg, transparent 0 46px, rgba(45,79,158,.14) 46px 48px); }
.sd-half.top { top: 0; border-radius: 6px 6px 0 0; }
.sd-half.bot { top: 280px; transform-origin: center top; border-radius: 0 0 6px 6px; box-shadow: 0 10px 20px rgba(30,42,68,.12); }
.sd-half .ln { position: absolute; left: 50px; right: 60px; height: 10px; border-radius: 5px; background: rgba(30,42,68,.35); }
.sending .sd-half.bot { animation: fold-up .7s cubic-bezier(.5,0,.3,1) .2s both; }
.sending .sd-paper { animation: slide-in 1s cubic-bezier(.5,0,.3,1) .9s both; }
@keyframes fold-up { to { transform: rotateX(178deg); } }
@keyframes slide-in { 0% { transform: translateY(0); } 100% { transform: translateY(608px) scale(.97); } }
.sending .sd-group { animation: fly 1.1s cubic-bezier(.55,0,.7,.4) 3s both; }
@keyframes fly { 0% { transform: none; } 18% { transform: translateY(16px) rotate(2deg); } 100% { transform: translate(560px,-900px) rotate(-24deg) scale(.35); opacity: .2; } }
.sd-slot { position: absolute; inset: 0; z-index: 2; perspective: 1800px; pointer-events: none; }
.sd-slot.front { z-index: 5; }
.sd-slot .hinge { transform: rotateX(178deg); }
.sending .sd-slot .hinge { animation: close-flap .75s cubic-bezier(.4,0,.2,1) 2.05s both; }
@keyframes close-flap { from { transform: rotateX(178deg); } to { transform: rotateX(0); } }
.sd-slot .flap-inside { opacity: 1; }
.sd-wax { opacity: 0; }
.sending .sd-wax { animation: wax-drop .5s cubic-bezier(.3,1.6,.5,1) 2.75s both; }
@keyframes wax-drop { from { opacity: 0; transform: scale(1.9) rotate(-20deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.sd-ring { position: absolute; z-index: 6; border-radius: 50%; border: 3px solid rgba(200,50,58,.35); opacity: 0; width: 140px; height: 140px; }
.sending .sd-ring { animation: ring .6s ease-out 2.95s forwards; }
@keyframes ring { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(1.8); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}

/* ===== v2：夜间灯下模式 ===== */
html.night { --paper: #121826; --sheet: #1b2335; --ink: #e8e3d6; --ink-2: #a9adb8; --ink-3: #6d7486; --rule: #2a3346; --desk: #182033; --shadow-env: 0 14px 30px -10px rgba(0,0,0,.6); }
html.night .btn-ink { background: #e8e3d6; color: #121826; }
html.night .letter { box-shadow: 0 0 0 1px rgba(255,220,160,.18), 0 30px 80px rgba(240,190,110,.16); }
html.night .letter:not(.grid) { --lp-bg: #f2e7cf !important; }
body, .btn-ink, .btn-line { transition: background-color .5s, color .5s, border-color .5s; }

/* 信纸字体与方格 */
.letter { font-family: var(--lp-font, var(--hand)); }
.letter.grid { background-image: linear-gradient(var(--lp-line) 2px, transparent 2px), linear-gradient(90deg, var(--lp-line) 2px, transparent 2px); background-size: 63px 63px; background-position: 30px 166px; background-repeat: repeat; }

/* 背面邮戳（翻盖上 + 合起图上） */
.flap-pm { position: absolute; left: 0; top: 0; width: 600px; height: 350px; pointer-events: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flap-pm img, .closed-pm img { position: absolute; right: -.5%; top: .5%; width: 22%; display: block; }
.closed-pm { position: absolute; left: 25px; top: 360px; width: 600px; height: 350px; z-index: 8; pointer-events: none; }
.is-playing .flap-pm { animation: front-face 4.2s step-end both; }
.is-playing .closed-pm { animation: handoff 4.2s step-end both; }

/* 飘落 / 上升 / 鞭炮（移植原版） */
.ambient { position: fixed; left: 50%; transform: translateX(-50%); width: min(480px, 100%); top: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: 14; }
.ambient--falling { bottom: auto; height: 62%; z-index: 0; }
.ambient--falling .amb-p { height: calc(100% + 70px - 1em); }
.amb-p { animation: amb-fall linear both; height: calc(100% + 70px); line-height: 1; opacity: 0; position: absolute; top: -70px; will-change: transform, opacity; }
.amb-icon { animation: amb-sway var(--sway-duration) ease-in-out var(--sway-delay) infinite; animation-direction: var(--sway-direction); display: block; margin-left: -.5em; }
.amb-p--tumble { animation-name: amb-bfall; }
.amb-p--tumble .amb-icon { animation: amb-tumble var(--fall-duration) linear var(--fall-delay) both; }
.ambient--rising .amb-p { animation-name: amb-rise; top: 100%; }
.amb-p--fc { animation-name: fc-fall; animation-timing-function: cubic-bezier(.3333,0,.6667,.3333); }
.fc-sway { animation: fc-tumble var(--fall-duration) linear var(--fall-delay) both; height: 1em; position: relative; width: 1em; }
.fc-body { display: block; }
.is-bursting .fc-body { visibility: hidden; }
.fc-flash, .fc-shard { left: 50%; opacity: 0; position: absolute; top: 50%; }
.fc-flash { background: radial-gradient(circle,#fff9d4,#ffb330 25%,transparent 70%); border-radius: 50%; height: 1.5em; margin: -.75em; width: 1.5em; }
.fc-shard { border-radius: 1px; height: 6px; width: 3px; }
.is-bursting .fc-flash { animation: fc-flash .15s ease-out both; }
.is-bursting .fc-shard { animation: fc-shard .5s ease-out both; }
@keyframes amb-fall { 0% { opacity: 0; transform: translateZ(0); } 4%,76% { opacity: var(--opacity); } to { opacity: 0; transform: translate3d(var(--drift),100%,0); } }
@keyframes amb-bfall { 0% { opacity: 0; transform: translateZ(0); } 8%,94% { opacity: var(--opacity); } to { opacity: 0; transform: translate3d(var(--drift),100%,0); } }
@keyframes amb-rise { 0% { opacity: 0; transform: translateZ(0); } 4%,94% { opacity: var(--opacity); } to { opacity: 0; transform: translate3d(var(--drift),-100%,0); } }
@keyframes amb-sway { 0% { transform: translate(calc(-1 * var(--sway))) rotate(calc(-1 * var(--rotation))); } to { transform: translate(var(--sway)) rotate(var(--rotation)); } }
@keyframes amb-tumble { 0% { transform: rotate(var(--spin-start)); } to { transform: rotate(var(--spin-end)); } }
@keyframes fc-tumble { 0% { transform: rotate(var(--tilt-start)); } to { transform: rotate(var(--tilt-end)); } }
@keyframes fc-fall { 0% { opacity: 0; transform: translateZ(0); } 12% { opacity: var(--opacity); } to { opacity: var(--opacity); transform: translate3d(var(--burst-x),var(--burst-y),0); } }
@keyframes fc-flash { 0% { opacity: 0; transform: scale(.25); } 10% { opacity: 1; } to { opacity: 0; transform: scale(2); } }
@keyframes fc-shard { 0% { opacity: 0; transform: translate(0); } 8% { opacity: 1; } to { opacity: 0; transform: translate(var(--spark-x),var(--spark-y)) rotate(var(--spark-spin)); } }
@media (prefers-reduced-motion: reduce) { .ambient { display: none; } }
html.night .toast { background: #e8e3d6; color: #121826; }

/* ===== v3：信纸特效 ===== */
.letter > .lt-head, .letter > .lt-body, .letter > .lt-sign { position: relative; z-index: 1; }
.letter > .lt-air { z-index: 2; }
.letter .lt-deco, .letter .lt-petals, .letter .lt-stars, .letter .lt-moon, .letter .lt-fiber, .letter .lt-twine { position: absolute; z-index: 0; pointer-events: none; }
.lt-body { position: relative; }
.letter.dark .lt-head span { color: rgba(255,255,255,.5); }
.lt-deco.sakura { right: -6px; top: -4px; width: 230px; opacity: .95; }
.lt-deco.sakura svg, .lt-deco.seal svg { width: 100%; display: block; }
.lt-petals { inset: 0; overflow: hidden; }
.lt-petals i { position: absolute; top: -30px; width: 16px; height: 12px; border-radius: 12px 0 12px 0; background: #f7b8c9; opacity: 0; animation: petal linear infinite; }
@keyframes petal { 0% { transform: translate(0,0) rotate(0); opacity: 0; } 8% { opacity: .85; } 90% { opacity: .7; } 100% { transform: translate(-120px, 1200px) rotate(540deg); opacity: 0; } }
.letter.fx-starry { background-image: none; box-shadow: 0 22px 44px rgba(10,16,40,.35); }
.letter.fx-starry::after { content: ""; position: absolute; inset: 168px 58px 90px; background: repeating-linear-gradient(180deg, transparent 0 61px, var(--lp-line) 61px 63px); z-index: 0; pointer-events: none; }
.lt-stars { inset: 0; }
.lt-stars i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff8d6; box-shadow: 0 0 8px 2px rgba(255,240,180,.7); animation: twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: .15; } 50% { opacity: 1; } }
.lt-moon { right: 54px; top: 46px; width: 64px; height: 64px; border-radius: 50%; box-shadow: -14px 6px 0 2px #f3d27a; transform: rotate(-20deg); }
.letter.fx-starry .lt-head span { margin-right: 96px; }
.lt-moon { top: 40px !important; }
.lt-fiber { inset: 0; opacity: .5; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .36  0 0 0 0 .22  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.lt-fiber.kraft { opacity: .8; }
.lt-deco.seal { right: 54px; top: 30px; width: 74px; transform: rotate(-6deg); opacity: .85; }
.letter.fx-rice .lt-head span { margin-right: 92px; }
.lt-twine { left: 0; right: 0; top: 120px; height: 6px; background: repeating-linear-gradient(90deg, #a37b4f 0 10px, #8a643c 10px 20px); opacity: .55; transform: rotate(-1.2deg); }

/* 逐字显示 */
.letter.typing .tc { opacity: 0; transition: opacity .25s; }
.letter.typing .tc.on { opacity: 1; }
.letter.typing .tc-sign { opacity: 0; transition: opacity .8s; }
.letter.typing.done .tc-sign { opacity: 1; }
.letter.typing .tc.caret { position: relative; }
.letter.typing .tc.caret::after { content: ""; position: absolute; right: -4px; top: 12%; bottom: 12%; width: 3px; background: var(--lp-accent); animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ===== v3：五种拆信特效 ===== */
.ff-body { position: relative; }
.ff-strip, .ff-cutline, .ff-scissor, .ff-plane { display: none; }
.fx-tear .motion .env-back, .fx-tear .motion .flap-slot, .fx-tear .motion .env-pocket, .fx-tear .motion .wax-piece,
.fx-cut .motion .env-back, .fx-cut .motion .flap-slot, .fx-cut .motion .env-pocket, .fx-cut .motion .wax-piece,
.fx-plane .motion .env-back, .fx-plane .motion .flap-slot, .fx-plane .motion .env-pocket, .fx-plane .motion .wax-piece,
.fx-glow .motion .env-back, .fx-glow .motion .flap-slot, .fx-glow .motion .env-pocket, .fx-glow .motion .wax-piece { display: none; }

/* 撕开封条 */
.fx-tear .ff-strip { display: block; position: absolute; inset: 0; transform-origin: 0% 13%; }
.ff-perf { position: absolute; left: 3%; right: 9%; top: 12.4%; border-top: 3px dotted rgba(30,42,68,.35); }
.ff-tab { position: absolute; right: -1%; top: 4.5%; height: 9%; padding: 0 16px 0 12px; border-radius: 10px 0 0 10px; background: var(--air-red); color: #fff; font-family: var(--serif); font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 4px; box-shadow: -2px 3px 8px rgba(0,0,0,.2); }
.fx-tear .ff-tab { animation: tab-wiggle 1.4s ease-in-out infinite; }
@keyframes tab-wiggle { 0%,70%,100% { transform: none; } 80% { transform: translateX(-6px); } 90% { transform: translateX(2px); } }
.fx-tear.is-playing .ff-strip { animation: tear-strip 4.2s cubic-bezier(.45,.05,.35,1) both; }
.fx-tear.is-playing .ff-tab { animation: none; }
@keyframes tear-strip { 0%,4% { transform: none; opacity: 1; } 12% { transform: rotate(-3deg) translate(-6px,-10px); } 26% { transform: rotate(-22deg) translate(-70px,-150px); opacity: 1; } 36%,to { transform: rotate(-34deg) translate(-140px,-330px); opacity: 0; } }
.fx-tear.is-playing .front-face, .fx-cut.is-playing .front-face { animation: fall 4.2s cubic-bezier(.4,0,.2,1) both; }
.ff-mouth { position: absolute; left: 0; right: 0; top: 11%; height: 6%; background: linear-gradient(180deg, rgba(30,42,68,.28), transparent); display: none; }
.fx-tear.is-playing .ff-mouth, .fx-cut.is-playing .ff-mouth { display: block; animation: mouth 4.2s ease both; }
@keyframes mouth { 0%,12% { opacity: 0; } 24%,to { opacity: 1; } }

/* 剪刀剪开 */
.fx-cut .ff-strip { display: block; position: absolute; inset: 0; clip-path: inset(0 0 88% 0); transform-origin: 100% 12%; }
.fx-cut .ff-body .env-front { clip-path: inset(12% 0 0 0 round 0 0 14px 14px); }
.fx-cut .ff-cutline { display: block; position: absolute; left: 0; top: 12%; width: 100%; border-top: 3px dashed rgba(30,42,68,.45); transform-origin: left; transform: scaleX(0); }
.fx-cut .ff-scissor { display: block; position: absolute; left: -12%; top: calc(12% - 46px); width: 92px; height: 92px; z-index: 3; opacity: 0; }
.ff-scissor svg { width: 100%; height: 100%; overflow: visible; }
.fx-cut.is-playing .ff-cutline { animation: cutline 4.2s linear both; }
.fx-cut.is-playing .ff-scissor { animation: scissor 4.2s linear both; }
.fx-cut.is-playing .ff-scissor .bl1 { animation: snip-a .16s ease-in-out infinite alternate; }
.fx-cut.is-playing .ff-scissor .bl2 { animation: snip-b .16s ease-in-out infinite alternate; }
.fx-cut.is-playing .ff-strip { animation: cut-strip 4.2s cubic-bezier(.5,0,.75,.4) both; }
@keyframes cutline { 0%,3% { transform: scaleX(0); opacity: 1; } 26% { transform: scaleX(1); opacity: 1; } 30%,to { transform: scaleX(1); opacity: 0; } }
@keyframes scissor { 0% { opacity: 0; left: -12%; } 3% { opacity: 1; left: -8%; } 26% { opacity: 1; left: 98%; } 32%,to { opacity: 0; left: 112%; } }
@keyframes snip-a { from { transform: rotate(0deg); } to { transform: rotate(-16deg); } }
@keyframes snip-b { from { transform: rotate(0deg); } to { transform: rotate(16deg); } }
@keyframes cut-strip { 0%,26% { transform: none; opacity: 1; } 40% { transform: translate(-30px, 420px) rotate(-18deg); opacity: 0; } to { transform: translate(-30px, 420px) rotate(-18deg); opacity: 0; } }

/* 纸飞机 */
.fx-plane .ff-plane { display: block; position: absolute; left: 50%; top: 50%; width: 260px; height: 180px; margin: -90px 0 0 -130px; opacity: 0; z-index: 4; }
.ff-plane svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 14px 14px rgba(30,42,68,.25)); }
.fx-plane.is-playing .ff-body { animation: plane-fold 4.2s cubic-bezier(.5,0,.3,1) both; }
.fx-plane.is-playing .ff-plane { animation: plane-fly 4.2s cubic-bezier(.45,.05,.55,.95) both; }
.fx-plane.is-playing .lifting { animation: lift-plane 4.2s cubic-bezier(.25,.65,.3,1) both; }
.fx-plane .pclip, .fx-glow .pclip { height: 40000px !important; animation: none !important; }
.fx-plane.is-playing .gshadow, .fx-glow.is-playing .gshadow { animation: fade-out 4.2s ease both; }
@keyframes fade-out { 0%,8% { opacity: 1; } 20%,to { opacity: 0; } }
@keyframes plane-fold { 0% { transform: none; opacity: 1; } 10% { transform: scale(.6,.4) rotate(-8deg); opacity: 1; } 14%,to { transform: scale(.25,.18) rotate(-14deg); opacity: 0; } }
@keyframes plane-fly {
  0%,9% { opacity: 0; transform: scale(.3); }
  14% { opacity: 1; transform: scale(1); }
  24% { transform: translate(250px,-250px) rotate(-28deg) scale(.72); }
  34% { transform: translate(110px,-560px) rotate(-150deg) scale(.5); }
  44% { transform: translate(-250px,-380px) rotate(-245deg) scale(.6); }
  54% { transform: translate(-70px,-90px) rotate(-330deg) scale(.95); }
  62% { opacity: 1; transform: translate(0,-200px) rotate(-360deg) scale(1.15); }
  70%,to { opacity: 0; transform: translate(0,-260px) rotate(-360deg) scale(2.2); }
}
@keyframes lift-plane {
  0%,60% { opacity: 0; transform: translate(0,-230px) scale(.18) rotateX(70deg); }
  70% { opacity: 1; transform: translate(0,-280px) scale(.55) rotateX(30deg); }
  88%,to { opacity: 1; transform: translate(var(--lift-x),var(--lift-y)) scale(1) rotateX(0); }
}

/* 火漆光晕 */
.ff-rays, .ff-flash { position: absolute; pointer-events: none; display: none; }
.fx-glow .ff-rays { display: block; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; z-index: 10; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255,226,150,.85) 0deg 6deg, rgba(255,226,150,0) 6deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); }
.fx-glow .ff-flash { display: block; inset: -400px; z-index: 11; opacity: 0; background: radial-gradient(circle at 50% 54%, rgba(255,248,220,.95), rgba(255,236,190,.4) 30%, transparent 60%); }
.fx-glow.is-playing .ff-rays { animation: rays 4.2s ease-out both; }
.fx-glow.is-playing .ff-flash { animation: flash 4.2s ease-out both; }
.fx-glow.is-playing .closed-img { animation: dissolve 4.2s ease both; }
.fx-glow.is-playing .seal-av { animation: glow-pulse 4.2s ease both; }
.fx-glow.is-playing .lifting { animation: lift-glow 4.2s cubic-bezier(.25,.65,.3,1) both; }
@keyframes rays { 0%,10% { opacity: 0; transform: scale(.2) rotate(0); } 22% { opacity: 1; transform: scale(1.2) rotate(25deg); } 42% { opacity: .7; transform: scale(2.6) rotate(60deg); } 62%,to { opacity: 0; transform: scale(3.4) rotate(80deg); } }
@keyframes flash { 0%,16% { opacity: 0; } 28% { opacity: .95; } 52%,to { opacity: 0; } }
@keyframes dissolve { 0%,12% { opacity: 1; transform: none; filter: none; } 22% { opacity: 1; filter: brightness(1.5); } 34%,to { opacity: 0; transform: scale(1.06); filter: brightness(2.2) blur(8px); } }
@keyframes glow-pulse { 0% { transform: scale(1); box-shadow: 0 2px 8px rgba(60,48,30,.14); opacity: 1; } 7% { transform: scale(1.14); box-shadow: 0 0 40px 14px rgba(255,214,120,.9); } 12% { transform: scale(.96); } 18% { transform: scale(1.3); box-shadow: 0 0 80px 30px rgba(255,230,160,1); opacity: 1; } 24%,to { transform: scale(1.6); opacity: 0; } }
@keyframes lift-glow { 0%,24% { opacity: 0; transform: translate(0,-120px) scale(.45); } 48% { opacity: 1; transform: translate(0,-260px) scale(.75); } 88%,to { opacity: 1; transform: translate(var(--lift-x),var(--lift-y)) scale(1); } }

/* ===== v4：公开信 / 已拆开 / 已阅 邮戳 ===== */
.ef-tag.pub { border-color: var(--air-red); color: var(--air-red); }
.ef-claimed { position: absolute; left: 50%; top: 52%; width: 34cqw; height: 34cqw; margin: -17cqw 0 0 -17cqw; border-radius: 50%; border: .9cqw solid rgba(200,50,58,.85); box-shadow: inset 0 0 0 .5cqw rgba(255,255,255,.6), inset 0 0 0 1.4cqw rgba(200,50,58,.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(200,50,58,.9); transform: rotate(-14deg); background: rgba(255,255,255,.35); }
.ef-claimed b { font-family: var(--serif); font-size: 7.4cqw; letter-spacing: .6cqw; line-height: 1.1; }
.ef-claimed span { font-size: 2.8cqw; margin-top: .6cqw; letter-spacing: .2cqw; }
.stamp-mark { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 50%; border: 3px solid var(--air-red); box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 4px var(--air-red); color: var(--air-red); transform: rotate(-12deg); font-family: var(--serif); flex: 0 0 auto; background: rgba(255,255,255,.2); }
.stamp-mark b { font-size: 20px; letter-spacing: 2px; line-height: 1; }
.stamp-mark span { font-family: var(--num); font-size: 9px; margin-top: 4px; letter-spacing: .5px; }
.stamp-mark.blue { border-color: var(--air-blue); color: var(--air-blue); box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 4px var(--air-blue); }
html.night .stamp-mark.blue { border-color: #8fa9e6; color: #8fa9e6; box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 4px #8fa9e6; }
.stamp-in { animation: stamp-in .55s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes stamp-in { 0% { opacity: 0; transform: scale(2.4) rotate(-30deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(-12deg); } }
.lt-replied { position: absolute; right: 40px; top: 130px; z-index: 3; width: 150px; height: 150px; border-radius: 50%; border: 6px solid rgba(45,79,158,.75); box-shadow: inset 0 0 0 4px rgba(255,255,255,.5), inset 0 0 0 9px rgba(45,79,158,.75);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(45,79,158,.85); transform: rotate(-14deg); font-family: var(--serif); pointer-events: none; }
.lt-replied b { font-size: 34px; letter-spacing: 4px; }
.lt-replied span { font-family: var(--num); font-size: 16px; margin-top: 6px; }
.lt-replyto { display: block; margin: 0 0 20px; font-family: var(--sans); font-size: 22px; color: var(--lp-accent); border: 2px solid currentColor; border-radius: 30px; padding: 6px 20px; width: max-content; text-decoration: none; opacity: .85; position: relative; z-index: 2; }

/* ===== v5：海报弹层 ===== */
.pst-mask { position: fixed; inset: 0; z-index: 90; background: rgba(15,20,32,.6); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .3s; }
.pst-mask.on { opacity: 1; }
.pst { width: min(400px, 100%); text-align: center; }
.pst-img { background: rgba(255,255,255,.08); border-radius: 14px; min-height: 300px; display: grid; place-items: center; overflow: hidden; }
.pst-img img { width: 100%; max-height: 66vh; object-fit: contain; display: block; border-radius: 12px; -webkit-touch-callout: default; }
.pst-wait { color: #fff; font-size: 14px; }
.pst-tip { color: rgba(255,255,255,.8); font-size: 12px; margin: 12px 0; }
.pst-row { display: flex; gap: 10px; }
.pst-row > * { flex: 1; }
.pst-mask .btn-line { background: rgba(255,255,255,.95); color: #1e2a44; border: 0; }
.pst-mask .btn-ink { background: #fff; color: #1e2a44; }

/* ===== v5：信里的照片 / 手写信 ===== */
.lt-photos { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; margin: 40px 0 10px; }
.lt-ph { margin: 0; background: #fff; padding: 12px 12px 42px; box-shadow: 0 10px 24px rgba(30,42,68,.18); transform: rotate(var(--r)); width: 210px; cursor: zoom-in; }
.lt-ph img { width: 100%; height: 210px; object-fit: cover; display: block; background: #eef1f1; }
.lt-photos.solo .lt-ph { width: 100%; padding: 16px 16px 56px; transform: rotate(-1deg); }
.lt-photos.solo .lt-ph img { height: auto; max-height: none; object-fit: contain; }
.lt-photos:has(.lt-ph:only-child) .lt-ph:not(.solo *) { width: 340px; }
.lt-photos:has(.lt-ph:only-child) .lt-ph img { height: 340px; }
.letter.typing .lt-photos { opacity: 0; transition: opacity .8s; }
.letter.typing.done .lt-photos { opacity: 1; }
.ph-view { position: fixed; inset: 0; z-index: 95; background: rgba(10,14,24,.92); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; overflow: auto; }
.ph-view.on { opacity: 1; }
.ph-view img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ph-view span { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 16px; color: #fff; font-size: 14px; background: rgba(255,255,255,.14); border-radius: 999px; padding: 6px 14px; }