body{background:#352216}header{display:none}.table-scene{position:relative;isolation:isolate;min-height:760px;height:100svh;overflow:hidden;background:linear-gradient(#25130822,#21110842),url('assets/old-table.png') center/cover;transition:height 1.4s ease .5s}.table-scene:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:8;box-shadow:inset 0 0 150px #1a0b0955}.table-heading{position:absolute;top:7%;left:6%;right:6%;text-align:center;color:#f1dec2;z-index:7}.table-heading>p{font-size:8px;letter-spacing:.3em;opacity:.6}.table-heading h1{font-size:clamp(25px,3.2vw,45px);letter-spacing:0;line-height:1.2;margin:15px 0;text-shadow:0 2px 10px #1e100a88}.table-heading h1 em{color:#f0c9ba}.envelope-shell{--envelope-width:min(510px,78vw);position:absolute;width:var(--envelope-width);height:calc(var(--envelope-width)*.64);left:50%;top:48%;transform:translate(-50%,-50%) rotate(-7deg);perspective:1100px;z-index:5;filter:drop-shadow(5px 18px 13px #1c0d09a0);transition:transform .8s ease,top 1.4s ease 1.3s}.envelope-back{position:absolute;inset:0;background:linear-gradient(130deg,#bf9e69,#debd86 45%,#b08b5c);border-radius:5px}.envelope-back:after,.envelope-pocket:after,.envelope-flap:after{content:'';position:absolute;inset:0;opacity:.26;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23886d43' filter='url(%23a)' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}.envelope-pocket{position:absolute;inset:0;z-index:3;background:linear-gradient(32deg,#d8b785 49.8%,transparent 50.2%) left/50.5% 100% no-repeat,linear-gradient(-32deg,#cfae7c 49.8%,transparent 50.2%) right/50.5% 100% no-repeat,linear-gradient(160deg,#e3c592,#d0ac75);clip-path:polygon(0 0,50% 51%,100% 0,100% 100%,0 100%);border-radius:4px;box-shadow:inset 0 -3px 8px #7457344d}.envelope-flap{position:absolute;inset:0 0 44%;background:linear-gradient(#e2c38e,#caa675);clip-path:polygon(0 0,100% 0,50% 100%);z-index:4;transform-origin:center top;backface-visibility:visible;transition:transform 1s cubic-bezier(.4,0,.2,1) .35s,filter 1s .35s}.envelope-address{position:absolute;bottom:13%;left:12%;right:12%;text-align:center;font:clamp(23px,3.6vw,35px)/1.05 'Marck Script',cursive;color:#62442f;z-index:4;pointer-events:none}.envelope-touch{position:absolute;inset:0;z-index:6;width:100%;height:100%;border:0;background:none;border-radius:6px}.envelope-touch:focus-visible{outline:2px solid #ffe8c1;outline-offset:15px}.wax-seal{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);width:65px;aspect-ratio:1;border-radius:48% 52% 45% 55%;background:radial-gradient(circle at 36% 30%,#b35a63,#772f3a 70%);box-shadow:2px 4px 6px #40231377,inset 1px 1px 2px #f7b8a980,inset -2px -2px 3px #4b182a;border:3px solid #9c4b51;transition:opacity .25s,transform .35s}.wax-seal svg{width:28px;margin-top:17px;fill:#efc2b0;filter:drop-shadow(0 1px 1px #5b202c);animation:heartbeat 1.5s ease-in-out infinite}.touch-hint{position:absolute;top:76%;left:15px;right:15px;text-align:center;z-index:7;color:#f2e1c7;font:28px/1.3 'Cormorant Garamond',Georgia,serif;text-shadow:0 2px 9px #160c0b;margin:0;transition:opacity .4s}.touch-hint span{font-family:Manrope,sans-serif;font-size:10px;opacity:.7;letter-spacing:.04em}.fallen-letter{position:absolute;left:50%;top:150px;z-index:2;width:min(610px,86vw);padding:35px 34px 25px 48px;background:repeating-linear-gradient(transparent 0px,transparent 27px,#9ba9a43b 28px),linear-gradient(110deg,#e4cda2,#f2e2bf 35%,#d9c198);color:#4d372b;box-shadow:4px 12px 22px #21120b80,inset 0 0 35px #a4773d3b;transform:translateX(-50%);border:1px solid #b79a69;border-radius:3px 7px 3px 3px}.fallen-letter:before{content:'';position:absolute;top:0;bottom:0;left:31px;width:1px;background:#a96c584f}.fallen-letter .eyebrow{font-size:8px;color:#806449}.fallen-letter h2{font:37px/1.1 'Marck Script',cursive;margin:16px 0}.fallen-letter p:not(.eyebrow){font:19px/1.47 'Marck Script',cursive;margin:14px 0}.fallen-letter .signature{color:#84404b!important;text-align:right}.paper-read{display:block;margin:23px auto 0;border:0;border-bottom:1px solid #a58a64;padding:8px 0;background:none;font-size:10px;position:relative;z-index:10}.fallen-letter[hidden]{display:none}.envelope-open .table-scene{height:1450px}.envelope-open .envelope-shell{transform:translate(-50%,-50%) rotate(8deg);top:1120px;z-index:1;transition:transform .7s ease,top 1.4s cubic-bezier(.36,.02,.24,1) 1.3s,z-index 0s 1.5s}.envelope-open .envelope-flap{transform:rotateX(178deg);filter:brightness(.83)}.envelope-open .wax-seal{opacity:0;transform:translate(-50%,15px) scale(.7)}.envelope-open .envelope-touch{pointer-events:none}.envelope-open .fallen-letter{animation:letter-unfold 2.8s cubic-bezier(.25,.1,.25,1) both;z-index:4}.envelope-open .touch-hint{opacity:0;pointer-events:none}.after-opening{position:absolute;left:15px;right:15px;bottom:55px;text-align:center;color:#f2dec0;z-index:9}.after-opening p{font:27px 'Cormorant Garamond',Georgia,serif}.after-opening>a{display:block;font-size:11px;letter-spacing:.04em}.after-opening>button{display:block;margin:24px auto 0;background:none;border:0;border-bottom:1px solid #dbc9ad55;padding:7px 0;color:#dcc5a8;font-size:9px}.envelope-closed .music,.envelope-closed .ending,.envelope-closed footer{display:none}.music,.ending,footer{background:var(--paper)}.music{background:#e8dfd1}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes letter-unfold{0%,22%{opacity:0;top:40svh;transform:translate(-50%,0) rotate(-7deg) scale(.52,.24)}35%{opacity:1;top:22svh;transform:translate(-50%,-8%) rotate(-5deg) scale(.58,.4)}58%{opacity:1;top:100px;transform:translate(-50%,-1%) rotate(3deg) scale(.9,.83)}80%{top:170px;transform:translate(-50%,0) rotate(-2deg) scale(1)}100%{opacity:1;top:155px;transform:translate(-50%,0) rotate(-1deg) scale(1)}}@media(max-width:700px){.table-scene{min-height:650px}.table-heading{top:7%;left:8%;right:8%}.table-heading h1{font-size:30px}.table-heading>p{font-size:7px;letter-spacing:.18em}.envelope-shell{top:50%;--envelope-width:80vw}.wax-seal{width:52px}.wax-seal svg{width:23px;margin-top:12px}.touch-hint{font-size:25px;top:72%}.touch-hint span{font-size:9px}.fallen-letter{padding:23px 22px 20px 31px}.fallen-letter:before{left:20px}.fallen-letter p:not(.eyebrow){font-size:18px;line-height:1.42}.fallen-letter h2{font-size:32px}.envelope-open .table-scene{height:1780px}.envelope-open .envelope-shell{top:1500px}.after-opening{bottom:65px}.after-opening p{font-size:23px}.ambient-toggle{font-size:9px}}@media(max-width:380px){.envelope-open .table-scene{height:2000px}.envelope-open .envelope-shell{top:1720px}}@media(prefers-reduced-motion:reduce){.envelope-open .fallen-letter{animation:none;transform:translate(-50%,0);top:155px}.envelope-open .envelope-shell{transition:none}.wax-seal svg{animation:none}}
.table-heading{top:clamp(30px,7svh,65px)}.table-heading h1{color:#f1dec2}.envelope-open .table-scene{height:var(--open-height,1800px)}.envelope-open .envelope-shell{top:calc(var(--paper-height,1250px) + 245px)}.envelope-open .table-heading{pointer-events:none}.envelope-open .touch-hint{visibility:hidden}