:root{--ink: #45331f;--ink-soft: #6f5a3e;--paper: #ecdcb8;--paper-2: #e2cfa3;--paper-hi: #f3e8cc;--paper-lo: #d8c293;--wax: #4f6e2f;--wax-deep: #36501f;--gold: #b08a3e;--float-ink: #2e4a27;--halo: rgba(246,242,226,.92);--letter-ink: #1f3d1a;--letter-ink-soft: #2f4d27}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:EB Garamond,Georgia,serif;color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden;background:#2b3526}.page{position:relative;height:100svh;width:100vw;overflow:hidden;background-image:var(--bg);background-size:cover;background-position:center;background-repeat:no-repeat;isolation:isolate}.page:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,rgba(255,248,225,.16),transparent 60%),linear-gradient(180deg,#2837223d,#1c26186b);mix-blend-mode:multiply}.vignette{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:radial-gradient(118% 100% at 50% 46%,transparent 48%,rgba(18,26,16,.6) 100%)}.grain{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.masthead{position:absolute;top:clamp(20px,5.5vh,50px);left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:16px;pointer-events:none;padding:0 16px}.masthead-word{font-family:IM Fell English,serif;font-style:italic;letter-spacing:.26em;text-transform:uppercase;font-size:clamp(13px,2.5vw,19px);color:var(--float-ink);text-indent:.26em;text-shadow:0 0 1px var(--halo),0 1px 1px var(--halo),0 2px 7px rgba(20,30,15,.3)}.masthead-rule{height:1px;width:clamp(28px,11vw,84px);background:linear-gradient(90deg,transparent,rgba(46,74,39,.8),transparent)}.stage{position:relative;z-index:3;height:100svh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.scene{--w: clamp(290px, 80vw, 452px);perspective:1700px;animation:bob 6.5s ease-in-out infinite;will-change:transform}.scene.is-open{animation-play-state:paused}@keyframes bob{0%,to{transform:translateY(-6px) rotate(-.5deg)}50%{transform:translateY(10px) rotate(.5deg)}}.envelope{position:relative;width:var(--w);height:calc(var(--w) * .64);transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.22,.72,.18,1);cursor:pointer;filter:drop-shadow(0 26px 34px rgba(20,28,16,.5))}.envelope.flipped{transform:rotateY(180deg)}.envelope.opened{transform:rotateY(180deg) translateY(10%) scale(.86);cursor:default}.face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:7px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;overflow:hidden;background:linear-gradient(135deg,var(--paper-hi),var(--paper) 38%,var(--paper-lo));box-shadow:inset 0 0 0 1px #785c3040,inset 0 2px 10px #fffaeb8c,inset 0 -16px 34px #785c302e}.paper-texture{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");mix-blend-mode:multiply}.front{transform:rotateY(0)}.stamps{position:absolute;top:12%;left:0;right:0;display:flex;justify-content:center;align-items:flex-start;gap:clamp(4px,1.4vw,10px);padding:0 5%}.stamp{height:clamp(54px,16vw,88px);width:auto;filter:drop-shadow(0 4px 6px rgba(40,30,12,.42));border-radius:2px;-webkit-user-select:none;user-select:none}.stamp:nth-child(1){transform:rotate(-3deg)}.stamp:nth-child(2){transform:rotate(2.5deg) translateY(3px)}.stamp:nth-child(3){transform:rotate(-2deg) translateY(1px)}.stamp:nth-child(4){transform:rotate(3deg) translateY(2px)}.envelope-title{position:absolute;left:0;right:0;bottom:16%;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.et-flourish{font-family:IM Fell English,serif;color:var(--gold);font-size:clamp(12px,3vw,16px);letter-spacing:.18em}.et-line{font-family:Pinyon Script,cursive;color:var(--ink);font-size:clamp(30px,9.5vw,52px);line-height:.95;text-shadow:0 1px 1px rgba(255,250,235,.7)}.back{transform:rotateY(180deg);background:linear-gradient(135deg,var(--paper-hi),var(--paper) 42%,var(--paper-lo))}.back:before,.back:after,.seam-b{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.back:before{clip-path:polygon(0 0,0 100%,50% 50%);background:linear-gradient(90deg,var(--paper-lo),var(--paper));box-shadow:inset -1px 0 #785c302e}.back:after{clip-path:polygon(100% 0,100% 100%,50% 50%);background:linear-gradient(270deg,var(--paper-lo),var(--paper));box-shadow:inset 1px 0 #785c302e}.seam-b{clip-path:polygon(0 100%,100% 100%,50% 50%);background:linear-gradient(0deg,var(--paper-2),var(--paper))}.seam-l,.seam-r{position:absolute;left:50%;top:50%;width:120%;height:1px;transform-origin:center;background:linear-gradient(90deg,transparent,rgba(120,92,48,.3),transparent)}.seam-l{transform:translate(-50%,-50%) rotate(-32.5deg)}.seam-r{transform:translate(-50%,-50%) rotate(32.5deg)}.pocket-shadow{position:absolute;top:0;right:0;bottom:0;left:0;clip-path:polygon(0 0,100% 0,50% 50%);background:radial-gradient(120% 140% at 50% 0%,#3a2c17,#5a4423 70%,#6b5128);opacity:0;transition:opacity .5s ease .25s;z-index:1}.envelope.opened .pocket-shadow{opacity:1}.flap{position:absolute;top:0;right:0;bottom:0;left:0;clip-path:polygon(0 0,100% 0,50% 50%);transform-origin:50% 0;transform:rotateX(0);transform-style:preserve-3d;transition:transform .85s cubic-bezier(.7,.02,.3,1);z-index:4}.envelope.opened .flap{transform:rotateX(167deg)}.flap-face,.flap-back{position:absolute;top:0;right:0;bottom:0;left:0;clip-path:polygon(0 0,100% 0,50% 50%);backface-visibility:hidden;-webkit-backface-visibility:hidden}.flap-face{background:linear-gradient(180deg,var(--paper-hi),var(--paper-lo));box-shadow:inset 0 -2px 8px #785c3038}.flap-back{transform:rotateX(180deg);background:linear-gradient(180deg,#d7c08a,#c6ac79)}.seal{position:absolute;left:50%;top:50%;width:clamp(78px,23vw,116px);height:clamp(78px,23vw,116px);transform:translate(-50%,-50%);border:none;background:none;padding:0;margin:0;cursor:pointer;z-index:6;transition:transform .3s ease}.seal img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 9px rgba(20,30,10,.5))}.seal-glow{position:absolute;top:-22%;right:-22%;bottom:-22%;left:-22%;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(120,160,70,.55),transparent 62%);opacity:0}.envelope.flipped:not(.opened) .seal-glow{animation:pulse 2.4s ease-in-out infinite}.envelope:not(.opened) .seal:hover{transform:translate(-50%,-50%) scale(1.06) rotate(-3deg)}.envelope:not(.opened) .seal:active{transform:translate(-50%,-50%) scale(.95)}@keyframes pulse{0%,to{opacity:0;transform:scale(.9)}50%{opacity:1;transform:scale(1.06)}}.envelope.opened .seal{animation:sealBreak .6s cubic-bezier(.5,-.4,.3,1) forwards;pointer-events:none}@keyframes sealBreak{0%{transform:translate(-50%,-50%) scale(1);opacity:1}30%{transform:translate(-50%,-50%) scale(1.16) rotate(-6deg);opacity:1}to{transform:translate(-50%,-62%) scale(.7) rotate(-28deg);opacity:0}}.letter{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;display:flex;align-items:center;justify-content:center;pointer-events:none;padding:14px}.letter.show{pointer-events:auto}.letter-sheet{position:relative;width:min(94vw,720px);aspect-ratio:1900 / 1068;background-image:var(--paper-img);background-size:cover;background-position:center;border-radius:4px;box-shadow:0 32px 54px #0f160a99,inset 0 0 0 1px #7850462e;opacity:0;visibility:hidden;overflow:hidden}.lt-content{position:absolute;top:6%;left:8.5%;right:24%;bottom:24%;display:flex;flex-direction:column;justify-content:flex-start;text-align:left;color:var(--letter-ink);overflow:auto}.lt-greet{margin:0 0 .4em;font-family:IM Fell English,serif;font-style:italic;font-size:clamp(15px,3vw,20px);color:var(--letter-ink)}.lt-para{margin:0 0 .55em;font-family:IM Fell English,serif;line-height:1.5;font-size:clamp(12px,2.45vw,16.5px);color:var(--letter-ink-soft);text-shadow:0 1px 0 rgba(255,250,240,.35)}.lt-close{margin:.5em 0 0;font-family:IM Fell English,serif;font-style:italic;font-size:clamp(13px,2.6vw,17px);color:var(--letter-ink)}.lt-sign{margin:.02em 0 0;font-family:Pinyon Script,cursive;font-size:clamp(24px,6.4vw,38px);line-height:1;color:var(--letter-ink)}.lt-content::-webkit-scrollbar{width:5px}.lt-content::-webkit-scrollbar-thumb{background:#1f3d1a59;border-radius:4px}.hint{position:absolute;bottom:clamp(54px,12vh,96px);left:0;right:0;text-align:center;z-index:7;margin:0;padding:0 16px;font-family:IM Fell English,serif;font-style:italic;color:var(--float-ink);letter-spacing:.05em;font-size:clamp(13px,3.4vw,17px);text-shadow:0 0 1px var(--halo),0 1px 1px var(--halo),0 2px 6px rgba(20,30,15,.28);opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}.hint.show{opacity:1;transform:translateY(0);animation:hintbob 3s ease-in-out infinite 1s}@keyframes hintbob{0%,to{transform:translateY(0)}50%{transform:translateY(5px)}}.reseal{position:absolute;bottom:clamp(30px,6vh,52px);left:50%;transform:translate(-50%);z-index:9;font-family:IM Fell English,serif;font-style:italic;font-size:13px;letter-spacing:.12em;color:var(--float-ink);background:#f6f2e2db;border:1px solid rgba(46,74,39,.55);padding:9px 20px;border-radius:999px;cursor:pointer;box-shadow:0 6px 16px #0f160a59;transition:background .25s ease,transform .25s ease;opacity:0;animation:fadeUp .5s ease 1.9s forwards}.reseal:hover{background:#f6f2e2;transform:translate(-50%) translateY(-2px)}@keyframes fadeUp{to{opacity:1}}.seal:focus-visible,.envelope:focus-visible,.reseal:focus-visible{outline:2px solid #f4ead0;outline-offset:4px;border-radius:6px}@media (prefers-reduced-motion: reduce){.scene{animation:none}.envelope,.flap,.pocket-shadow{transition-duration:.25s!important}.seal-glow,.hint.show{animation:none!important}}