:root{--envelope-color: #f5f5f5;--envelope-shadow: rgba(0, 0, 0, .2);--card-width: clamp(64mm, 85vw, min(128mm, 128 / 178 * max(89mm, 85vh)));--card-height: calc(178 / 128 * var(--card-width));--grid-spacing: calc(7.415 / 128 * var(--card-width));--bg-color: #ffed93;--envelope-flip-time: .8s;--flap-open-delay: calc(var(--envelope-flip-time) - .2s);--flap-open-time: .6s;--envelope-remove-delay: calc( var(--flap-open-delay) + var(--flap-open-time) + .4s );--envelope-remove-time: 1.4s;--card-slide-out-delay: calc(var(--envelope-remove-delay) + .2s);--card-slide-out-time: 3.2s;--note-slide-down-delay: 2s;--note-slide-down-time: .8s;--original-position: rotate3d(1, 1, 0, 180deg)}@font-face{font-family:EB Garamond;src:url(./garamond-latin-smcp-C0GEC1Uk.woff2) format("woff2"),url(./garamond-latin-smcp-n5C1-nb8.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:EB Garamond;src:url(./garamond-latin-italic-B7BidaVS.woff2) format("woff2"),url(./garamond-latin-italic-BTH4_Ui_.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}::selection{background-color:#fff2b3;color:#000}body,html{margin:0;padding:0;width:100%;overflow-x:hidden;overflow-y:auto;font-family:EB Garamond,Georgia,serif;background-color:var(--bg-color)}#container{width:100%;position:relative;display:grid;grid-template-columns:1fr var(--card-width) 1fr;grid-template-rows:max(2 * var(--grid-spacing),(100vh - var(--card-height)) / 2) var(--card-height) 1fr}#envelope-wrapper{grid-column:2;grid-row:2;width:var(--card-width);aspect-ratio:128 / 178;perspective:500mm;margin:auto;-webkit-tap-highlight-color:transparent;overflow:visible}#envelope-wrapper.idle{cursor:pointer}#envelope-back,#envelope-top-flap,#envelope-other-flaps{position:absolute;width:calc(132 / 128 * var(--card-width));aspect-ratio:132 / 182;top:calc(-2 / 178 * var(--card-height));left:calc(-2 / 128 * var(--card-width));pointer-events:none;will-change:transform}#envelope-top-flap{backface-visibility:visible}#envelope-back,#envelope-other-flaps{backface-visibility:hidden}#envelope-front{position:absolute;width:calc(132 / 128 * var(--card-width));height:calc(182 / 178 * var(--card-height));left:calc(-2 / 128 * var(--card-width));will-change:transform;backface-visibility:hidden;filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2));display:flex;justify-content:center;align-items:center}#addressee{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;color:#000;font-family:EB Garamond,Georgia,KaiTi,楷体,STKaiTi,华文楷体,"cursive",serif;font-size:calc(var(--card-height) / 178mm * 18pt);font-style:italic;pointer-events:none}@-moz-document url-prefix(){#addressee{font-size:14pt}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}#addressee.populated{animation:fadeIn .2s ease-in-out forwards}#envelope-back{filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2))}#card{position:absolute;width:var(--card-width);aspect-ratio:128 / 178;will-change:transform;backface-visibility:hidden;margin:auto}#envelope-back svg,#envelope-top-flap svg,#envelope-other-flaps svg,#envelope-front svg,#card svg{width:100%;height:100%}#note-container{grid-column:2;grid-row:3;max-width:var(--card-width);padding:var(--grid-spacing) var(--grid-spacing) calc(2 * var(--grid-spacing)) var(--grid-spacing);perspective:500mm}#note{display:block;font-size:calc(var(--card-height) / 178mm * 12pt);line-height:calc(var(--card-height) / 178mm * 15.75pt);padding:calc(7.415 / 132 * var(--card-width));background-color:#fff;filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2));backface-visibility:hidden;transform-origin:bottom left;transform:rotate(-4deg) translateY(-130%) translateZ(0);visibility:visible;opacity:0}#note>p{margin:0}#note>p:not(:first-child){margin-top:calc(var(--card-height) / 178mm * 15.75pt)}@-moz-document url-prefix(){#note>p:not(:first-child){margin-top:12pt}}#note a{color:#58713e}#envelope-back,#envelope-top-flap,#envelope-other-flaps,#envelope-front,#card{visibility:hidden}.idle #envelope-back,.idle #envelope-top-flap,.idle #envelope-other-flaps,.idle #card{transform:rotate3d(1,1,0,-180deg);visibility:visible;opacity:0}.idle #envelope-front{visibility:visible}@keyframes jiggle{0%,60%,78%,to{transform:rotate(0)}63%{transform:rotate(3deg)}66%{transform:rotate(-1.5deg)}69%{transform:rotate(.75deg)}72%{transform:rotate(-.375deg)}73.5%{transform:rotate(.1875)}}.idle #envelope-front{animation:jiggle 4s ease-in-out infinite}@keyframes makeVisible50{0%,49.9%{visibility:hidden;opacity:0}50%,to{visibility:visible;opacity:1}}@keyframes makeHidden50{0%,49.9%{visibility:visible}50%,to{visibility:hidden}}@keyframes envelopeFlip{0%{transform:rotate3d(1,1,0,-180deg)}to{transform:rotate3d(1,1,0,0)}}@keyframes envelopeFrontFlip{0%{transform:rotate3d(1,1,0,0) scale(1)}to{transform:rotate3d(1,1,0,180deg) scale(calc(182 / 132))}}.state-flipping #envelope-back,.state-flipping #envelope-top-flap,.state-flipping #envelope-other-flaps,.state-flipping #card{animation:envelopeFlip var(--envelope-flip-time) ease-in-out forwards,makeVisible50 var(--envelope-flip-time) ease-in-out forwards}.state-flipping #card{animation:envelopeFlip var(--envelope-flip-time) ease-in-out forwards}.state-flipping #envelope-front{animation:envelopeFrontFlip var(--envelope-flip-time) ease-in-out forwards,makeHidden50 var(--envelope-flip-time) ease-in-out forwards}.state-flipped #envelope-front,.state-flipped #card{visibility:hidden}.state-flipped #envelope-back,.state-flipped #envelope-top-flap,.state-flipped #envelope-other-flaps{visibility:visible}.state-flipped #envelope-back,.state-flipped #envelope-top-flap,.state-flipped #envelope-other-flaps,.state-flipped #envelope-front,.state-flipped #card{transform:rotate3d(1,1,0,0)}.state-flipped #envelope-front{visibility:hidden;pointer-events:none}.state-opening #envelope-back,.state-opening #envelope-top-flap,.state-opening #envelope-other-flaps,.state-opening #card{visibility:visible}.state-opening #envelope-back{z-index:1}.state-opening #card{z-index:2}.state-opening #envelope-other-flaps{z-index:3}.state-opening #envelope-top-flap{z-index:4}@keyframes openFlap{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}.state-opening #envelope-top-flap{transform-origin:left center;animation:openFlap var(--flap-open-time) cubic-bezier(.445,.05,.55,.95) forwards}.state-extracting #envelope-back,.state-extracting #envelope-top-flap,.state-extracting #envelope-other-flaps,.state-extracting #card{visibility:visible}.state-extracting #envelope-back{z-index:1}.state-extracting #card{z-index:2}.state-extracting #envelope-other-flaps{z-index:3}.state-extracting #envelope-top-flap{z-index:1}.state-extracting #top-flap{transform:rotateY(180deg)}@keyframes slideRight{0%{transform:translate(0);opacity:1}50%{opacity:1}99.9%{transform:translate(200vw) scale(1)}to{transform:translate(200vw) scale(0);opacity:0;visibility:hidden}}@keyframes slideOut{0%{transform:rotate3d(1,1,0,0);filter:drop-shadow(2px 2px 2px rgba(0,0,0,.2))}30%{transform:rotate3d(1,1,0,0) translate3d(-15%,0,0);filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2))}60%{transform:rotate3d(1,1,0,0) translate3d(-7.5%,0,30mm);filter:drop-shadow(11px 11px 15px rgba(0,0,0,.1))}to{transform:rotate3d(1,1,0,0) translateZ(0);filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2))}}.state-extracting #envelope-back,.state-extracting #envelope-top-flap,.state-extracting #envelope-other-flaps,.state-extracting #envelope-front{animation:slideRight var(--envelope-remove-time) ease-in forwards}.state-extracting #card{animation:slideOut var(--card-slide-out-time) ease-in-out forwards}@keyframes slideDown{0%{transform:rotate(-4deg) translateY(-130%);opacity:0}15%{opacity:1}to{transform:rotate(0) translateY(0);opacity:1}}.state-reveal #note{animation:slideDown var(--note-slide-down-time) cubic-bezier(.41,.75,.45,1) var(--note-slide-down-delay) forwards}