*{margin:0;padding:0;box-sizing:border-box}:root{--bg-top: #f6ede2;--bg-mid: #efe2d4;--bg-bottom: #d7e3ef;--ink: #493126;--ink-soft: rgba(73, 49, 38, .82);--paper-main: #fffdf8;--paper-edge: #f4ecdf;--envelope-back: #ead8c2;--envelope-front: #f5e7d5;--envelope-side: #d8bea3;--envelope-flap: #f7e7d5;--seal-main: #cb6460;--seal-dark: #a94744;--scene-width: min(920px, 94vw);--stack-width: min(760px, 92vw);--letter-width: min(720px, 86vw);--envelope-width: min(462px, 74vw);--envelope-height: calc(var(--envelope-width) * .66);--stack-base: 104px}html{width:100%;min-height:100%;scroll-behavior:smooth;overflow-x:hidden}body{width:100%;min-height:100vh;font-family:"Noto Serif SC",serif;color:var(--ink);background:radial-gradient(circle at top,rgba(255,255,255,.9),transparent 33%),linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 38%,var(--bg-bottom) 100%);overflow-x:hidden;position:relative;overscroll-behavior:none}.mask{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(255,255,255,.08),transparent 28%),#140f0d;z-index:100;animation:maskFadeOut 2.7s cubic-bezier(.22,1,.36,1) forwards;pointer-events:none}@keyframes maskFadeOut{0%{opacity:1;transform:scale(1)}65%{opacity:.45;transform:scale(1.08)}to{opacity:0;transform:scale(1.15);visibility:hidden}}.container{min-height:100vh;display:grid;place-items:center;padding:40px 16px 92px}.mail-scene{position:relative;width:var(--scene-width);min-height:860px;display:grid;place-items:center;perspective:2400px;perspective-origin:center 24%}.mail-scene:before{content:"";position:absolute;inset:auto 14% 8% 14%;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(153,122,96,.18),transparent 70%);filter:blur(22px);pointer-events:none}.envelope-stack{position:relative;width:var(--stack-width);min-height:820px}.letter{position:absolute;left:50%;bottom:calc(var(--stack-base) + var(--envelope-height) * .08);width:var(--letter-width);min-height:640px;opacity:0;visibility:hidden;z-index:2;pointer-events:none;transform:translate(-50%) translateY(190px) scale(.42);transform-origin:center bottom;filter:blur(.8px);transition:transform 1.6s cubic-bezier(.2,.88,.2,1),opacity .45s ease,filter 1.2s ease,box-shadow 1.2s ease,visibility 0s linear .45s;will-change:transform}.letter-paper{position:relative;min-height:640px;background:linear-gradient(180deg,#fffffff7,#fbf6eefc),repeating-linear-gradient(180deg,transparent 0,transparent 29px,rgba(174,146,120,.12) 29px,rgba(174,146,120,.12) 30px);border-radius:14px;border:1px solid rgba(173,142,109,.18);box-shadow:0 22px 44px #4b34291a,inset 0 1px #ffffffbf,inset 0 0 0 14px #fffbf4b8;overflow:hidden}.letter-paper:before,.letter-paper:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.letter-paper:before{background:linear-gradient(90deg,rgba(206,185,163,.18),transparent 10%,transparent 90%,rgba(206,185,163,.14)),linear-gradient(180deg,rgba(255,255,255,.82),transparent 18%)}.letter-paper:after{top:12px;right:12px;bottom:12px;left:12px;border:1px solid rgba(194,168,141,.12);border-radius:10px}.letter-content{position:relative;z-index:1;padding:52px 54px 58px;letter-spacing:.03em}.letter-content>*{opacity:0;transform:translateY(24px);transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .9s ease}.letter-content h1{display:inline-block;margin-bottom:18px;padding-bottom:10px;font-size:clamp(1.12rem,1.8vw,1.42rem);font-weight:500;letter-spacing:.12em;color:#5a392d;position:relative}.letter-content h1:after{content:"";position:absolute;left:0;bottom:0;width:min(132px,100%);height:1px;background:linear-gradient(90deg,#8d6a4fb3,#8d6a4f14)}.letter-content p{font-size:clamp(.94rem,1.35vw,1rem);color:var(--ink-soft);text-indent:2em;text-align:justify;line-height:2.05;padding:0 2px 3px;background-image:linear-gradient(180deg,transparent calc(100% - 1px),rgba(176,144,117,.36) 0);background-size:100% 2.05em;background-repeat:repeat-y}.no-content{display:none}.no-content p{padding-top:72px;text-indent:0;text-align:center;font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.9;letter-spacing:.08em;color:#59392bc7;background:none}.envelope{position:absolute;left:50%;bottom:var(--stack-base);width:var(--envelope-width);height:var(--envelope-height);border:0;padding:0;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;z-index:6;transform:translate(-50%) translateY(0);transform-style:preserve-3d;transition:transform 1.18s cubic-bezier(.22,1,.36,1),opacity .8s ease,filter .7s ease;will-change:transform}.envelope:focus-visible{outline:2px solid rgba(111,76,54,.55);outline-offset:12px}.mail-scene.is-ready:not(.is-opening):not(.is-pulling):not(.is-open) .envelope{animation:envelopeFloat 4.8s ease-in-out infinite}@keyframes envelopeFloat{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-8px)}}.envelope:hover{filter:saturate(1.04)}.envelope:active{transform:translate(-50%) translateY(-2px) scale(.992)}.envelope>span{position:absolute;display:block}.envelope-shadow{left:8%;right:8%;bottom:-19%;height:26%;border-radius:50%;background:radial-gradient(circle,rgba(57,42,33,.28),transparent 68%);filter:blur(14px);transform:translateZ(-80px);transition:transform 1.1s ease,opacity 1.1s ease}.envelope-glow{top:-12%;right:-12%;bottom:-12%;left:-12%;border-radius:24px;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 66%);opacity:.75;filter:blur(8px);z-index:0}.envelope-back,.envelope-pocket,.envelope-bottom,.envelope-liner,.envelope-flap{top:0;right:0;bottom:0;left:0;border-radius:18px}.envelope-back{background:linear-gradient(180deg,#f6ead9 0%,var(--envelope-back) 100%);box-shadow:inset 0 1px #ffffff8f,0 18px 28px #60453226}.envelope-liner{top:7%;right:8%;bottom:19%;left:8%;background:linear-gradient(180deg,#fffaf3f2,#e9d7c0eb);clip-path:polygon(0 0,50% 60%,100% 0,100% 100%,0 100%);opacity:.78;z-index:1}.envelope-flap{height:58%;transform-origin:top center;clip-path:polygon(0 0,50% 100%,100% 0);background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 38%),linear-gradient(180deg,var(--envelope-flap) 0%,#ead4bc 100%);box-shadow:inset 0 1px #ffffff9e,0 18px 24px #684f3c2e;z-index:7;overflow:hidden;backface-visibility:hidden;transition:transform 1s cubic-bezier(.22,1,.36,1),box-shadow 1s ease}.envelope-flap-inner{top:8%;right:12%;bottom:26%;left:12%;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.34),transparent 30%),linear-gradient(180deg,#efd8bf,#dcb998);clip-path:polygon(0 0,50% 100%,100% 0);opacity:.86}.envelope-pocket{background:linear-gradient(180deg,rgba(255,255,255,.4),transparent 18%),linear-gradient(180deg,#f8ecde 0%,var(--envelope-front) 100%);clip-path:polygon(0 100%,0 18%,50% 68%,100% 18%,100% 100%);z-index:5;box-shadow:inset 0 1px #ffffff94,inset 0 -18px 24px #b89a7e2e}.envelope-side{position:absolute;top:18%;width:50%;height:82%;background:linear-gradient(180deg,#ffffff29,#d8bea3f5);z-index:6}.envelope-side-left{left:0;clip-path:polygon(0 100%,0 6%,100% 62%,100% 100%);border-end-start-radius:8px}.envelope-side-right{right:0;clip-path:polygon(0 62%,100% 6%,100% 100%,0 100%);border-end-end-radius:8px}.envelope-bottom{top:auto;height:46%;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#d6b8992e,#c6a68652);z-index:4}.envelope-seal{left:50%;top:34%;width:84px;height:84px;transform:translate(-50%,-50%);z-index:8;pointer-events:none;transition:transform .8s ease,opacity .8s ease}.envelope-seal:before{content:"";position:absolute;top:32%;right:32%;bottom:32%;left:32%;border-radius:50%;background:radial-gradient(circle at 30% 30%,#f09793 0%,var(--seal-main) 55%,var(--seal-dark) 100%);box-shadow:0 6px 12px #a748444d,inset 0 1px #ffffff59}.petal{position:absolute;left:50%;top:50%;width:22px;height:46px;border-radius:999px;background:linear-gradient(180deg,#ea8a87,#ca5f5b);transform-origin:center 75%;box-shadow:inset 0 1px #ffffff47}.petal:nth-child(1){transform:translate(-50%,-50%) rotate(0)}.petal:nth-child(2){transform:translate(-50%,-50%) rotate(72deg)}.petal:nth-child(3){transform:translate(-50%,-50%) rotate(144deg)}.petal:nth-child(4){transform:translate(-50%,-50%) rotate(216deg)}.petal:nth-child(5){transform:translate(-50%,-50%) rotate(288deg)}.envelope-hint{left:50%;bottom:-58px;transform:translate(-50%);padding:7px 16px;border-radius:999px;background:#fffcf6b3;border:1px solid rgba(172,145,118,.26);color:#4a3428b8;font-size:.92rem;letter-spacing:.14em;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .4s ease,transform .4s ease}.mail-scene.is-opening .envelope{animation:none;transform:translate(-50%) translateY(12px) scale(.992)}.mail-scene.is-opening .envelope-flap{transform:rotateX(-178deg) translateY(-2px);box-shadow:0 8px 12px #684f3c14}.mail-scene.is-opening .envelope-seal{transform:translate(-50%,-62%) scale(.96);opacity:.5}.mail-scene.is-opening .envelope-hint{opacity:0;transform:translate(-50%) translateY(8px)}.mail-scene.is-pulling .envelope{animation:none;transform:translate(-50%) translateY(20px) scale(.985)}.mail-scene.is-pulling .envelope-shadow{transform:translateY(18px) scale(.88);opacity:.54}.mail-scene.is-pulling .letter{opacity:1;visibility:visible;transform:translate(-50%) translateY(-48px) scale(.5);filter:blur(0);transition-delay:0s}.mail-scene.is-open .letter{z-index:9;opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%) translateY(-218px) scale(1);filter:blur(0);transition-delay:0s}.mail-scene.is-open .letter-paper{box-shadow:0 30px 56px #4b342926,inset 0 1px #ffffffc2,inset 0 0 0 14px #fffbf4b8}.mail-scene.is-open .letter-content>*{opacity:1;transform:translateY(0)}.mail-scene.is-open .letter-content h1{transition-delay:.16s}.mail-scene.is-open .letter-content p{transition-delay:.28s}.mail-scene.is-open .envelope{animation:none;transform:translate(-50%) translateY(280px) scale(.92);opacity:0;visibility:hidden;pointer-events:none;transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .55s ease,filter .7s ease,visibility 0s linear .95s}.mail-scene.is-open .envelope-shadow{transform:translateY(42px) scale(.74);opacity:.18}.mail-scene.is-open .envelope-glow,.mail-scene.is-open .envelope-hint{opacity:0}.footer{position:absolute;left:0;right:0;bottom:12px;padding:12px 16px;text-align:center}.footer-content{max-width:1200px;margin:0 auto}.footer p{font-size:12px;color:#4a342894}.footer a{color:inherit;text-decoration:none;transition:color .25s ease}.footer a:hover{color:#4a3428e6}@media(max-width:900px){:root{--stack-base: 92px}.mail-scene{min-height:790px}.envelope-stack{min-height:760px}.letter,.letter-paper{min-height:580px}.letter-content{padding:48px 40px 52px}.mail-scene.is-open .letter{transform:translate(-50%) translateY(-220px) scale(.92)}}@media(max-width:640px){html,body{height:100svh;min-height:100svh;overflow:hidden}:root{--scene-width: min(96vw, 560px);--stack-width: min(94vw, 540px);--letter-width: min(94vw, 540px);--envelope-width: min(360px, 82vw);--stack-base: 62px}.container{height:100svh;min-height:100svh;padding:24px 8px 80px;overflow:hidden}.mail-scene{min-height:100%;height:100%}.envelope-stack{min-height:500px}.letter{min-height:420px;transform:translate(-50%) translateY(130px) scale(.42)}.letter-paper{min-height:420px;border-radius:12px}.letter-content{padding:40px 24px 46px}.envelope-seal{width:74px;height:74px}.petal{width:20px;height:42px}.envelope-hint{bottom:-50px;font-size:.84rem;letter-spacing:.12em}.mail-scene.is-pulling .letter{transform:translate(-50%) translateY(-24px) scale(.5)}.mail-scene.is-open .letter{transform:translate(-50%) translateY(-108px) scale(.9)}.mail-scene.is-open .envelope{transform:translate(-50%) translateY(138px) scale(.94)}}@media(max-width:420px){:root{--letter-width: min(94vw, 420px);--envelope-width: min(320px, 84vw);--stack-base: 58px}.mail-scene{min-height:520px}.envelope-stack{min-height:450px}.letter{min-height:380px;transform:translate(-50%) translateY(116px) scale(.4)}.letter-paper{min-height:380px;box-shadow:0 18px 30px #4b342924,inset 0 1px #ffffffb3,inset 0 0 0 12px #fffbf4a6}.letter-content{padding:34px 18px 40px}.mail-scene.is-pulling .letter{transform:translate(-50%) translateY(-18px) scale(.48)}.mail-scene.is-open .letter{transform:translate(-50%) translateY(-92px) scale(.88)}.mail-scene.is-open .envelope{transform:translate(-50%) translateY(118px) scale(.9)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mask,.envelope,.envelope-shadow,.envelope-flap,.envelope-seal,.envelope-hint,.letter,.letter-content>*{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}}