.tactile-letter{--paper:#f0e5cd;--paper-light:#fff8e8;--paper-deep:#d7c2a0;--paper-edge:#baa17b;--ink:#66533c;--foil:#b18b4c;--lining:#dfbf84;--wax:#aa7848;--wax-light:#d7b172;--wax-dark:#735032;--stamp:#f8e6bd;--ribbon:#d0a65c;--ribbon-light:#f0d39c;width:min(100%,440px);margin-inline:auto;text-align:center}.tactile-letter[data-envelope=halloween]{--paper:#343348;--paper-light:#555268;--paper-deep:#202333;--paper-edge:#69637a;--ink:#e5dbc3;--foil:#c8b27c;--lining:#8c829d;--wax:#777586;--wax-light:#bcb5ba;--wax-dark:#454455;--stamp:#f6e8c8}.tactile-letter[data-envelope=valentine]{--paper:#ecd1d0;--paper-light:#fff1e9;--paper-deep:#d7aaa9;--paper-edge:#b9878d;--ink:#81505b;--foil:#ba8a65;--lining:#d39b9a;--wax:#a04e62;--wax-light:#cf8a96;--wax-dark:#6c3047;--stamp:#f1cfae}.tactile-letter[data-envelope=christmas]{--paper:#4b6459;--paper-light:#809183;--paper-deep:#30483f;--paper-edge:#243e33;--ink:#f2e4c8;--foil:#d7bd81;--lining:#cbba91;--wax:#8e4843;--wax-light:#bd7a66;--wax-dark:#5d2d2a;--stamp:#f8e3b2;--ribbon:#d2bc8e;--ribbon-light:#fff0cc}.tactile-letter[data-envelope=newyear]{--paper:#273542;--paper-light:#4b5966;--paper-deep:#152431;--paper-edge:#17232b;--ink:#ead7ac;--foil:#c8a15b;--lining:#c1a26a;--wax:#ab874b;--wax-light:#f0d499;--wax-dark:#75572f;--stamp:#43331f}.tactile-letter[data-envelope=anniversary]{--paper:#9a969f;--paper-light:#c7bec5;--paper-deep:#76727e;--paper-edge:#655c69;--ink:#fff0d5;--foil:#ebcf9c;--lining:#d4bda2;--wax:#ada18b;--wax-light:#e2cda5;--wax-dark:#776958;--stamp:#4e4035}.tactile-envelope{display:block;position:relative;width:100%;aspect-ratio:1.52;margin:0;padding:0;border:0;background:transparent;color:var(--ink);text-align:center;cursor:pointer;perspective:1400px;touch-action:pan-y;-webkit-tap-highlight-color:transparent;outline-offset:16px;border-radius:8px;isolation:isolate;container-type:inline-size}.tactile-envelope:focus-visible{outline:2px solid var(--foil)}.tactile-envelope:disabled{cursor:default}.tactile-object{inset:0;transform:rotate(-3deg) rotateX(5deg);transform-style:preserve-3d;transition:transform .45s ease}.tactile-object,.tactile-object>span{display:block;position:absolute}.tactile-floor{z-index:-1;left:7%;right:3%;bottom:-12%;height:15%;background:radial-gradient(ellipse,rgb(30 25 23/.26),transparent 70%);transform:rotate(2deg)}.tactile-depth{z-index:0;inset:1px -2px -5px 2px;border-radius:3px 4px 6px 4px;background:var(--paper-edge);box-shadow:0 32px 48px -26px rgb(29 23 22/.52),0 8px 13px -8px rgb(29 23 22/.28),inset 0 -2px 0 rgb(255 255 255/.23)}.tactile-lining{z-index:1;inset:0;overflow:hidden;border-radius:3px;background:repeating-linear-gradient(45deg,transparent 0 6px,rgb(255 255 255/.11) 6px 7px),linear-gradient(145deg,var(--lining),var(--paper-deep));box-shadow:inset 0 1px 3px rgb(25 16 12/.25)}.tactile-lining-rule{position:absolute;inset:13px;border:.5px solid rgb(255 249 224/.28)}.tactile-sheet{z-index:2;inset:6% 7% 2%;border-radius:2px;overflow:hidden;background:linear-gradient(104deg,rgb(110 87 57/.06),transparent 14% 87%,rgb(133 113 77/.08)),#fff9ec;color:#8c7654;box-shadow:0 -4px 12px -9px rgb(25 17 13/.42),inset 0 0 0 1px rgb(172 142 94/.2);padding:7% 9%}.tactile-sheet-rule{display:block;position:absolute;inset:8%;border:.5px solid #d7c4a0}.tactile-sheet>svg{width:19%;height:auto;margin:3% auto;color:#a78e60}.tactile-sheet-dedication,.tactile-sheet-name,.tactile-sheet-signature,.tactile-sheet>svg{display:block;position:relative}.tactile-sheet-dedication{font-family:var(--font-playfair),"Noto Serif TC",serif;font-size:clamp(8px,1.7vw,10px);letter-spacing:.14em}.tactile-sheet-name{margin-top:4%;font-family:var(--font-playfair),"Noto Serif TC","Noto Serif Thai",serif;font-size:clamp(18px,4.2vw,28px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tactile-sheet-signature{margin-top:8%;font-size:10px;letter-spacing:.08em}.tactile-pocket{z-index:3;inset:0;border-radius:3px;background:linear-gradient(110deg,rgb(255 255 255/.19),transparent 40%),linear-gradient(167deg,var(--paper-light),var(--paper) 58%,var(--paper-deep));clip-path:polygon(0 12%,50% 50%,100% 12%,100% 100%,0 100%)}.tactile-fold{z-index:4;top:0;bottom:0;width:51%;opacity:.5;background:linear-gradient(132deg,rgb(255 255 255/.6),transparent 60%);pointer-events:none}.tactile-fold-left{left:0}.tactile-fold-left,.tactile-fold-right{clip-path:polygon(0 12%,100% 50%,0 100%)}.tactile-fold-right{right:0;transform:scaleX(-1)}.tactile-flap{z-index:5;inset:0 0 auto;height:56%;transform-origin:50% 0;clip-path:polygon(0 0,100% 0,100% 22%,52% 99%,48% 99%,0 22%);background:linear-gradient(171deg,var(--paper-light),var(--paper) 72%,var(--paper-deep));box-shadow:inset 0 1px 0 rgb(255 255 255/.5)}.tactile-flap-edge{position:absolute;inset:0;width:100%;height:100%;color:var(--paper-edge);opacity:.48}.tactile-foil-corner{z-index:6;width:8%;height:12%;border-color:var(--foil);border-style:solid;opacity:.75}.tactile-foil-corner-one{left:4%;top:6%;border-width:.6px 0 0 .6px}.tactile-foil-corner-two{right:4%;bottom:6%;border-width:0 .6px .6px 0}.tactile-address{z-index:7;left:8%;right:8%;bottom:10%;color:var(--ink)}.tactile-address>span{display:block}.tactile-address-dedication{margin-bottom:3.5%;font-size:clamp(7px,2.2cqw,9px);letter-spacing:.18em;opacity:.67}.tactile-address-name{font-family:var(--font-playfair),"Noto Serif TC","Noto Serif Thai",serif;font-weight:400;font-size:clamp(20px,7cqw,30px);line-height:1.35;letter-spacing:.04em;text-shadow:0 1px 0 rgb(255 255 255/.15)}.tactile-address-from,.tactile-address-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tactile-address-from{margin-top:3%;font-size:clamp(7px,2.2cqw,9px);letter-spacing:.14em;opacity:.6}.tactile-address-from>span{margin-left:.4em;letter-spacing:.06em}.tactile-seal-shadow{z-index:8;top:32%;left:41%;width:18%;aspect-ratio:1;border-radius:50%;background:rgb(36 19 13/.14);transform:translate(2px,4px);box-shadow:0 5px 8px rgb(30 21 18/.1)}.tactile-seal{z-index:9;top:31%;left:41%;width:18%;aspect-ratio:1;border-radius:49% 45% 48% 43%/42% 49% 45% 49%;color:var(--stamp);background:radial-gradient(ellipse at 28% 18%,var(--wax-light),var(--wax) 51%,var(--wax-dark));box-shadow:1px 3px 0 var(--wax-dark),0 5px 9px rgb(35 17 17/.23),inset 0 1.5px 1px rgb(255 237 198/.4),inset 1px -3px 3px rgb(25 10 5/.21)}.tactile-seal-rim{position:absolute;inset:7%;border:1px solid rgb(255 239 205/.27);border-radius:47% 49% 45% 50%;box-shadow:inset 0 1px 2px rgb(32 15 7/.3),0 1px 1px rgb(255 243 213/.2)}.tactile-seal-mark{position:absolute;inset:7%;width:86%;height:86%;filter:drop-shadow(0 1px 0 rgb(255 247 217/.18)) drop-shadow(0 -1px 0 rgb(46 27 15/.2));opacity:.9}.tactile-caption{position:relative;margin:38px auto 0;max-width:330px;padding:12px 16px 4px;border:1px solid hsl(var(--border)/.5);border-radius:var(--radius-panel);background:hsl(var(--background)/.9);color:hsl(var(--foreground))}.tactile-caption-title{margin:0;font-family:var(--font-playfair),"Noto Serif TC","Noto Serif Thai",serif;font-size:15px;line-height:1.8;letter-spacing:.025em}.tactile-caption-detail{margin:3px 0 0;line-height:1.7}.tactile-caption-detail,.tactile-read-now{font-size:11px;color:hsl(var(--muted-foreground))}.tactile-read-now{min-height:44px;padding:8px 14px;margin-top:2px;border:0;border-radius:999px;background:transparent;cursor:pointer;text-decoration:underline;text-decoration-color:hsl(var(--border));text-underline-offset:4px}.tactile-read-now:hover{color:hsl(var(--foreground))}.tactile-read-now:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:-4px}.tactile-ribbon{z-index:8;inset:0;pointer-events:none}.tactile-ribbon>span{position:absolute;display:block}.tactile-ribbon-vertical{top:-1px;bottom:-3px;left:16%;width:6%;background:repeating-linear-gradient(90deg,transparent 0 2px,rgb(255 255 255/.14) 2px 3px),linear-gradient(90deg,var(--ribbon),var(--ribbon-light) 16%,var(--ribbon) 42%,var(--ribbon-light) 87%,var(--ribbon));box-shadow:1px 0 1px rgb(43 31 14/.13),inset 0 0 0 .5px rgb(255 255 255/.3)}.tactile-ribbon-horizontal{left:-1px;right:-1px;top:39%;height:8%;background:repeating-linear-gradient(0deg,transparent 0 2px,rgb(255 255 255/.12) 2px 3px),linear-gradient(0deg,var(--ribbon),var(--ribbon-light) 14%,var(--ribbon) 46%,var(--ribbon-light) 88%,var(--ribbon));box-shadow:0 2px 2px rgb(43 31 14/.13)}.tactile-candle-light{position:absolute;left:40%;top:15%;width:19%;height:33%;opacity:0;border-radius:60% 15% 55% 45%;background:radial-gradient(ellipse at 55% 72%,#fff7c0 0 17%,#e9b050 56%,#dc852b 80%);box-shadow:0 0 18px 5px #e8b45b66;transform:rotate(-8deg) scale(.1)}.tactile-moon-aura{position:absolute;inset:0;border:.5px solid #e7d6ac;border-radius:50%;opacity:0}.tactile-letter[data-envelope=christmas] .tactile-seal,.tactile-letter[data-envelope=christmas] .tactile-seal-shadow{left:73%;top:35%;width:15%}.tactile-letter[data-envelope=christmas] .tactile-address{left:31%;right:7%}.tactile-bow-loop{z-index:2;top:27%;width:22%;height:20%;background:linear-gradient(14deg,var(--ribbon),var(--ribbon-light) 47%,var(--ribbon) 85%);border:1px solid rgb(255 244 208/.5);box-shadow:inset 0 -6px 7px rgb(68 48 13/.13),0 4px 3px rgb(20 28 22/.2)}.tactile-bow-left{left:-2%;border-radius:70% 16% 40% 35%;transform:rotate(17deg);transform-origin:95% 75%}.tactile-bow-right{left:19%;border-radius:16% 70% 35% 40%;transform:rotate(-17deg);transform-origin:5% 75%}.tactile-bow-tail{top:41%;width:7%;height:34%;background:linear-gradient(90deg,var(--ribbon),var(--ribbon-light) 65%,var(--ribbon));clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%);box-shadow:2px 2px 3px rgb(0 0 0/.2)}.tactile-bow-tail-left{left:13%;transform:rotate(18deg);transform-origin:top}.tactile-bow-tail-right{left:21%;transform:rotate(-21deg);transform-origin:top}.tactile-bow-knot{z-index:3;left:15%;top:37%;width:8%;height:12%;border-radius:30%;background:linear-gradient(100deg,var(--ribbon),var(--ribbon-light) 46%,var(--ribbon));box-shadow:0 2px 3px rgb(34 29 14/.3),inset 0 1px 1px #fff5d4a8}.tactile-envelope[data-pulling=true] .tactile-bow-right{transform:translateX(var(--ribbon-pull,0)) rotate(-9deg)}.tactile-envelope[data-pulling=true] .tactile-ribbon-horizontal{transform:translateX(calc(var(--ribbon-pull, 0px) * .35))}.tactile-gate{z-index:5;top:0;bottom:0;width:50.2%;background:linear-gradient(135deg,var(--paper-light),var(--paper) 62%,var(--paper-deep));box-shadow:inset 0 0 0 .6px rgb(255 255 255/.15),2px 0 3px rgb(40 20 20/.15)}.tactile-gate-left{left:0;transform-origin:left center}.tactile-gate-right{right:0;transform-origin:right center;background:linear-gradient(155deg,var(--paper-light),var(--paper) 50%,var(--paper-deep))}.tactile-letter[data-envelope=valentine] .tactile-gate{background-image:repeating-linear-gradient(90deg,transparent 0 3px,rgb(255 255 255/.07) 3px 4px),linear-gradient(135deg,var(--paper-light),var(--paper) 62%,var(--paper-deep))}.tactile-petal{z-index:10;opacity:0;left:48%;top:38%;width:7%;height:15%;border-radius:80% 15% 65% 25%;background:radial-gradient(ellipse at 32% 18%,#f3c6c3,#bd7181 67%,#94475b);box-shadow:inset 1px 1px 2px #ffe5d7aa}.tactile-letter[data-envelope=newyear] .tactile-gate:after{content:"";position:absolute;inset:7% 9%;border:.6px solid var(--foil);opacity:.65}.tactile-letter[data-envelope=newyear] .tactile-gate-left:after{border-right:0}.tactile-letter[data-envelope=newyear] .tactile-gate-right:after{border-left:0}.tactile-letter[data-envelope=newyear] .tactile-seal{border-radius:50%;box-shadow:0 3px 0 var(--wax-dark),0 6px 10px rgb(0 0 0/.3),inset 0 0 0 2px #ecd39eaa,inset 0 0 0 5px #69512f66}.tactile-clock-hand{transform-origin:50px 50px}.tactile-countdown{z-index:11;top:27%;left:35%;width:30%;height:33%;pointer-events:none;color:#ffedc5;font-family:var(--font-playfair),serif;font-size:clamp(32px,8vw,48px)}.tactile-countdown>span{position:absolute;inset:0;opacity:0}.tactile-letter[data-envelope=anniversary] .tactile-object{transform:rotate(-4deg) rotateY(-7deg)}.tactile-letter[data-envelope=anniversary] .tactile-depth{inset:3px -5px -6px 4px;background:repeating-linear-gradient(0deg,#c7b6a1 0 1px,#eee4cf 1px 3px);border:1px solid var(--paper-edge);border-left-width:12px}.tactile-book-cover{z-index:5;inset:0;border-radius:4px 7px 7px 3px;transform-origin:2% center;background:repeating-linear-gradient(0deg,transparent 0 2px,#f6edf111 2px 3px),repeating-linear-gradient(90deg,transparent 0 3px,#2d203b12 3px 4px),linear-gradient(120deg,var(--paper-light),var(--paper) 36%,var(--paper-deep));box-shadow:inset 0 1px 1px #f8eefc80,inset 0 -2px 2px #3b2c4455,3px 3px 4px #362a3a38}.tactile-book-frame{position:absolute;inset:8% 7% 8% 11%;border:1px solid var(--foil);box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 4.6px var(--foil);opacity:.72}.tactile-book-spine{position:absolute;left:4%;top:0;bottom:0;width:3%;border-left:1px solid #fff4df55;border-right:1px solid #44364f55;background:linear-gradient(90deg,transparent,#33253b20,transparent)}.tactile-letter[data-envelope=anniversary] .tactile-fold,.tactile-letter[data-envelope=anniversary] .tactile-pocket{display:none}.tactile-letter[data-envelope=anniversary] .tactile-seal{top:19%;left:42%;width:17%;background:transparent;color:var(--foil);box-shadow:none}.tactile-letter[data-envelope=anniversary] .tactile-seal-rim,.tactile-letter[data-envelope=anniversary] .tactile-seal-shadow{display:none}.tactile-letter[data-envelope=anniversary] .tactile-address{bottom:19%;left:13%}@media (hover:hover) and (pointer:fine){.tactile-letter[data-opening-state=sealed] .tactile-envelope:hover .tactile-object{transform:translateY(-4px) rotate(-1.5deg) rotateX(3deg)}}.tactile-envelope:active:not(:disabled) .tactile-seal{scale:.96}.tactile-letter[data-opening-state=opening] .tactile-object{animation:tactile-handoff var(--opening-duration) ease both}.tactile-letter[data-opening-state=opening] .tactile-flap{animation:tactile-flap-open var(--opening-duration) cubic-bezier(.25,.7,.25,1) both}.tactile-letter[data-opening-state=opening] .tactile-sheet{animation:tactile-paper-lift var(--opening-duration) cubic-bezier(.25,.8,.25,1) both}.tactile-letter[data-opening-state=opening] .tactile-seal{animation:tactile-seal-release var(--opening-duration) ease both}.tactile-letter[data-opening-state=opening] .tactile-seal-shadow{animation:tactile-seal-shadow var(--opening-duration) ease both}.tactile-letter[data-opening-state=opening] .tactile-address{animation:tactile-address-fade var(--opening-duration) ease both}.tactile-letter[data-opening-state=opening] .tactile-ribbon-vertical{animation:tactile-ribbon-down var(--opening-duration) ease both}.tactile-letter[data-opening-state=opening] .tactile-ribbon-horizontal{animation:tactile-ribbon-side var(--opening-duration) ease both}.tactile-letter[data-envelope=birthday][data-opening-state=opening] .tactile-candle-light{animation:tactile-wish-light var(--opening-duration) ease both}.tactile-letter[data-envelope=birthday][data-opening-state=opening] .tactile-seal{animation:tactile-candle-release var(--opening-duration) ease both}.tactile-letter[data-envelope=halloween][data-opening-state=opening] .tactile-seal{animation:tactile-moon-turn var(--opening-duration) ease both}.tactile-letter[data-envelope=halloween][data-opening-state=opening] .tactile-moon-aura{animation:tactile-moon-unlock var(--opening-duration) ease both}.tactile-letter[data-opening-state=opening] .tactile-gate-left{animation:tactile-gate-left var(--opening-duration) cubic-bezier(.25,.75,.25,1) both}.tactile-letter[data-opening-state=opening] .tactile-gate-right{animation:tactile-gate-right var(--opening-duration) cubic-bezier(.25,.75,.25,1) both}.tactile-letter[data-envelope=valentine][data-opening-state=opening] .tactile-petal-one{animation:tactile-petal-fall var(--opening-duration) ease-in both}.tactile-letter[data-envelope=valentine][data-opening-state=opening] .tactile-petal-two{animation:tactile-petal-fall-two var(--opening-duration) ease-in both}.tactile-letter[data-opening-state=opening] .tactile-bow-left{animation:tactile-bow-left var(--opening-duration) ease both}.tactile-letter[data-opening-state=opening] .tactile-bow-right{animation:tactile-bow-right var(--opening-duration) ease both}.tactile-letter[data-opening-state=opening] .tactile-bow-knot,.tactile-letter[data-opening-state=opening] .tactile-bow-tail{animation:tactile-seal-shadow var(--opening-duration) ease both}.tactile-letter[data-envelope=newyear][data-opening-state=opening] .tactile-seal{animation:tactile-clock-release var(--opening-duration) ease both}.tactile-letter[data-envelope=newyear][data-opening-state=opening] .tactile-clock-hand{animation:tactile-clock-strike calc(var(--opening-duration) * .38) cubic-bezier(.4,0,.25,1) both}.tactile-letter[data-opening-state=opening] .tactile-countdown>span{animation:tactile-count .36s ease both}.tactile-letter[data-opening-state=opening] .tactile-countdown>span:first-child{animation-delay:.08s}.tactile-letter[data-opening-state=opening] .tactile-countdown>span:nth-child(2){animation-delay:.44s}.tactile-letter[data-opening-state=opening] .tactile-countdown>span:nth-child(3){animation-delay:.8s}.tactile-letter[data-envelope=newyear][data-opening-state=opening] .tactile-gate-left,.tactile-letter[data-envelope=newyear][data-opening-state=opening] .tactile-gate-right{animation-delay:.3s;animation-duration:calc(var(--opening-duration) - .3s)}.tactile-letter[data-opening-state=opening] .tactile-book-cover{animation:tactile-book-open var(--opening-duration) cubic-bezier(.25,.75,.25,1) both}@keyframes tactile-handoff{0%,80%{opacity:1}to{opacity:0}}@keyframes tactile-seal-release{0%,10%{transform:scale(1);opacity:1}23%{transform:scale(.92);opacity:1}45%,to{transform:translate(12%,65%) rotate(14deg) scale(.9);opacity:0}}@keyframes tactile-candle-release{0%,31%{transform:scale(1);opacity:1}52%,to{transform:translateY(65%) rotate(14deg);opacity:0}}@keyframes tactile-seal-shadow{0%,20%{opacity:1}38%,to{opacity:0}}@keyframes tactile-flap-open{0%,32%{transform:rotateX(0)}65%,to{transform:rotateX(-172deg)}}@keyframes tactile-paper-lift{0%,46%{transform:translateY(0) rotate(0)}86%{transform:translateY(-66%) rotate(1deg);opacity:1}to{transform:translateY(-78%) rotate(1deg);opacity:0}}@keyframes tactile-address-fade{0%,75%{opacity:1}to{opacity:0}}@keyframes tactile-ribbon-down{0%,20%{transform:translateY(0);opacity:1}64%,to{transform:translateY(70%) rotate(-10deg);opacity:0}}@keyframes tactile-ribbon-side{0%,20%{transform:translateX(0);opacity:1}64%,to{transform:translateX(58%) rotate(-4deg);opacity:0}}@keyframes tactile-wish-light{0%,3%{opacity:0;transform:rotate(-8deg) scale(.1)}14%{opacity:1;transform:rotate(-8deg) scale(1)}28%{opacity:1;transform:rotate(6deg) scale(.9,1.12)}40%,to{opacity:0;transform:translateY(-9px) scale(.3)}}@keyframes tactile-moon-turn{0%,6%{transform:rotate(0);opacity:1}34%{transform:rotate(-90deg);opacity:1}56%,to{transform:rotate(-125deg) scale(1.25);opacity:0}}@keyframes tactile-moon-unlock{0%,18%{opacity:0;transform:scale(.8)}35%{opacity:.8;transform:scale(1.5)}62%,to{opacity:0;transform:scale(2.8)}}@keyframes tactile-gate-left{0%,33%{transform:rotateY(0)}77%,to{transform:rotateY(-147deg)}}@keyframes tactile-gate-right{0%,33%{transform:rotateY(0)}77%,to{transform:rotateY(147deg)}}@keyframes tactile-petal-fall{0%,32%{transform:translate(0) rotate(-15deg);opacity:0}42%{opacity:1}90%,to{transform:translate(-95px,135px) rotate(165deg);opacity:0}}@keyframes tactile-petal-fall-two{0%,36%{transform:translate(0) rotate(25deg);opacity:0}46%{opacity:.8}94%,to{transform:translate(85px,120px) rotate(235deg);opacity:0}}@keyframes tactile-bow-left{0%,15%{transform:rotate(17deg);opacity:1}48%,to{transform:translate(-80%,10%) rotate(-25deg) scaleX(.3);opacity:0}}@keyframes tactile-bow-right{0%,15%{transform:rotate(-17deg);opacity:1}48%,to{transform:translate(100%,20%) rotate(25deg) scaleX(.3);opacity:0}}@keyframes tactile-clock-strike{to{transform:rotate(1turn)}}@keyframes tactile-clock-release{0%,32%{opacity:1;transform:scale(1)}50%,to{opacity:0;transform:scale(1.4)}}@keyframes tactile-count{0%{opacity:0;transform:translateY(6px)}28%,65%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}@keyframes tactile-book-open{0%,12%{transform:rotateY(0)}72%,to{transform:rotateY(-155deg)}}@media (max-width:639px){.tactile-letter{max-width:350px}.tactile-caption{margin-top:26px;padding-inline:12px}.tactile-caption-title{font-size:14px}.tactile-seal-mark{filter:none}}@media (prefers-reduced-motion:reduce){.tactile-letter *,.tactile-letter :after,.tactile-letter :before{animation:none!important;transition:none!important}.tactile-letter[data-envelope=anniversary] .tactile-object,.tactile-object{transform:none!important}}.tactile-book-cover:before,.tactile-flap:before,.tactile-gate:before,.tactile-pocket:after,.tactile-sheet:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.095;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23756452' filter='url(%23p)' d='M0 0h140v140H0z' opacity='.8'/%3E%3C/svg%3E") 0 0 /140px 140px}.tactile-address,.tactile-seal{position:absolute}.tactile-book-cover{transform-style:preserve-3d}.tactile-book-cover:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,#baa582,#f5e9d1 12%,#eee0c6);transform:rotateY(180deg) translateZ(.5px);box-shadow:inset 0 0 0 8px #e3d1b2,inset 0 0 0 9px #b39d78}.tactile-book-cover .tactile-address,.tactile-book-cover .tactile-seal,.tactile-book-cover:after,.tactile-book-frame,.tactile-book-spine{backface-visibility:hidden}.tactile-letter[data-envelope=anniversary][data-opening-state=opening] .tactile-address,.tactile-letter[data-envelope=anniversary][data-opening-state=opening] .tactile-seal{animation:none}.tactile-seal-half{opacity:0;pointer-events:none}.tactile-seal-half-left{clip-path:polygon(0 0,53% 0,48% 30%,55% 55%,47% 78%,51% 100%,0 100%)}.tactile-seal-half-right{clip-path:polygon(53% 0,100% 0,100% 100%,51% 100%,47% 78%,55% 55%,48% 30%)}.tactile-letter[data-envelope=valentine][data-opening-state=opening] .tactile-seal-whole{animation:tactile-heart-whole var(--opening-duration) ease both}.tactile-letter[data-envelope=valentine][data-opening-state=opening] .tactile-seal-half-left{animation:tactile-heart-left var(--opening-duration) ease both}.tactile-letter[data-envelope=valentine][data-opening-state=opening] .tactile-seal-half-right{animation:tactile-heart-right var(--opening-duration) ease both}@keyframes tactile-heart-whole{0%{transform:scale(1);opacity:1}12%{transform:scale(.84);opacity:1}26%{transform:scale(1.04);opacity:1}27%,to{opacity:0}}@keyframes tactile-heart-left{0%,26%{opacity:0;transform:scale(1.04)}27%{opacity:1;transform:scale(1.04)}65%,to{opacity:0;transform:translate(-85%,50%) rotate(-25deg)}}@keyframes tactile-heart-right{0%,26%{opacity:0;transform:scale(1.04)}27%{opacity:1;transform:scale(1.04)}65%,to{opacity:0;transform:translate(85%,40%) rotate(24deg)}}@media (prefers-reduced-motion:reduce){.tactile-letter[data-opening-state] *{animation:none!important;transition:none!important}.letter-reading-surface{animation:none!important}}.tactile-letter[data-envelope=newyear] .tactile-gate{width:100%;height:50.2%}.tactile-letter[data-envelope=newyear] .tactile-gate-left{top:0;bottom:auto;transform-origin:center top}.tactile-letter[data-envelope=newyear] .tactile-gate-right{top:auto;bottom:0;transform-origin:center bottom}.tactile-letter[data-envelope=newyear] .tactile-gate-left:after{inset:12% 5% 0;border:.6px solid var(--foil);border-bottom:0}.tactile-letter[data-envelope=newyear] .tactile-gate-right:after{inset:0 5% 12%;border:.6px solid var(--foil);border-top:0}.tactile-letter[data-envelope=newyear][data-opening-state=opening] .tactile-gate-left{animation-name:tactile-clock-top}.tactile-letter[data-envelope=newyear][data-opening-state=opening] .tactile-gate-right{animation-name:tactile-clock-bottom}.tactile-letter[data-envelope=newyear][data-opening-state=opening] .tactile-address,.tactile-letter[data-envelope=valentine][data-opening-state=opening] .tactile-address{animation-name:tactile-folded-dedication}@keyframes tactile-clock-top{0%,33%{transform:rotateX(0)}77%,to{transform:rotateX(150deg)}}@keyframes tactile-clock-bottom{0%,33%{transform:rotateX(0)}77%,to{transform:rotateX(-150deg)}}@keyframes tactile-folded-dedication{0%,24%{opacity:1}40%,to{opacity:0}}.tactile-letter[data-theme=thanksgiving]{--paper:#aa704c;--paper-light:#e0b68b;--paper-deep:#704c37;--ink:#fff0d3;--foil:#e3bc77;--lining:#d7b98a}.tactile-letter[data-theme=lunar-newyear]{--paper:#9f3540;--paper-light:#cf6970;--paper-deep:#6b2430;--paper-edge:#d49f66;--ink:#ffe8bc;--foil:#e3bc77;--lining:#e5bc79;--wax:#b89249;--wax-light:#edce82}.tactile-letter[data-theme=mothers-day]{--paper:#ead7d3;--paper-light:#fff6eb;--paper-deep:#cba8a5;--wax:#a96572}.tactile-letter[data-theme=fathers-day]{--paper:#566c64;--paper-light:#8a9c8b;--paper-deep:#30483f;--ink:#f8e8cc;--foil:#dbbc80}.tactile-letter[data-theme=graduation]{--paper:#344354;--paper-light:#718598;--paper-deep:#202e3d;--ink:#f3dfad;--foil:#d2ad66}.tactile-letter[data-theme=ghost-letter]{--paper:#e5dfd6;--paper-light:#fff9ed;--paper-deep:#ada8b5;--ink:#5d536b;--wax:#8b8197;--foil:#9a8ca4}.tactile-letter[data-theme=witch-letter]{--paper:#463049;--paper-light:#78627c;--paper-deep:#291f33;--ink:#ead4b4;--wax:#907345;--foil:#d2b879}.tactile-letter[data-theme=remembrance]{--paper:#d5d8cd;--paper-light:#f4f1df;--paper-deep:#a6b09c;--ink:#465643;--foil:#a1916f;--wax:#8c9b82}.tactile-letter[data-theme] .tactile-book-cover:before,.tactile-letter[data-theme] .tactile-flap:before,.tactile-letter[data-theme] .tactile-gate:before,.tactile-letter[data-theme] .tactile-pocket:after,.tactile-letter[data-theme] .tactile-sheet:after{background-image:url(/materials/cotton-rag-v1.webp);background-size:300px;opacity:.56;mix-blend-mode:multiply}.tactile-letter[data-theme] .tactile-pocket{background:linear-gradient(172deg,#ffffff0a,transparent 50%,#2e1f190d),var(--paper)}.tactile-letter[data-theme] .tactile-flap{background:linear-gradient(175deg,var(--paper-light) -55%,var(--paper) 57%,var(--paper-deep) 145%);box-shadow:inset 0 1px 0 #fff9ec59}.tactile-letter[data-theme] .tactile-fold{opacity:.2}.tactile-letter[data-theme] .tactile-gate{background:linear-gradient(105deg,#fffdf30d,transparent 22%,#2e1f190d),var(--paper)}.tactile-letter[data-theme] .tactile-book-cover{background:repeating-linear-gradient(0deg,transparent 0 2px,#fff8ed08 2px 3px),repeating-linear-gradient(90deg,transparent 0 3px,#261f320a 3px 4px),linear-gradient(120deg,var(--paper-light) -60%,var(--paper) 38%,var(--paper-deep) 170%);box-shadow:inset 1px 1px 0 #fff5df4d,inset 0 -1px 0 #211a2433,2px 4px 5px #362a3a30}.tactile-letter[data-theme] .tactile-seal{border-radius:47% 50% 44% 49%/45% 43% 52% 49%;background:radial-gradient(ellipse at 32% 22%,var(--wax-light) -30%,var(--wax) 53%,var(--wax-dark) 125%);box-shadow:1px 2px 0 var(--wax-dark),1px 4px 5px #24161240,inset 0 1px 1px #fff4d94d,inset 1px -2px 3px #190a0530}.tactile-letter[data-theme] .tactile-seal:before{content:"";position:absolute;inset:0;border-radius:inherit;background:url(/materials/cotton-rag-v1.webp) 0 0/90px;mix-blend-mode:multiply;opacity:.18;pointer-events:none}.tactile-letter[data-theme] .tactile-seal-mark{opacity:.8;filter:drop-shadow(0 1px 0 #fff6db52) drop-shadow(0 -1px 0 #29170f80)}.tactile-letter[data-theme] .tactile-foil-corner{opacity:.48}.tactile-letter[data-theme] .tactile-ribbon>span:after{content:"";position:absolute;inset:0;border-radius:inherit;background:url(/materials/cotton-rag-v1.webp) 0 0/110px;mix-blend-mode:multiply;opacity:.25;pointer-events:none}.tactile-letter[data-theme] .tactile-bow-loop{border-color:#fff4d93b;box-shadow:inset 0 -5px 7px #44300d1f,0 4px 4px #141c2226}