@font-face{font-family:Bricolage;src:url('fonts/display.woff') format('woff');font-display:swap}
@font-face{font-family:Instrument;src:url('fonts/sans.woff') format('woff');font-display:swap}
@font-face{font-family:Hand;src:url('fonts/hand.woff') format('woff');font-display:swap}
:root{color-scheme:light;--ink:#80364c;--red:#d73555;--muted:#a36777;--paper:#fffaf4;--bg:#fbe9e8}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;align-items:center;overflow-x:hidden;background:var(--bg);color:var(--ink);font:15px Instrument,sans-serif;background-image:radial-gradient(ellipse at 50% 50%,#fff2e9 0%,transparent 70%)}
.paper-grain{position:fixed;inset:0;pointer-events:none;opacity:.3;z-index:6;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23a96867' opacity='.22' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.masthead{display:flex;gap:9px;align-items:center;margin-top:35px;font-size:12px;letter-spacing:.5px;z-index:1}
.mini-heart{color:var(--red);font-size:17px;transform:rotate(-12deg)}
main{flex:1;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:48px 26px 24px;position:relative;z-index:1}
.love-note{position:relative;width:min(100%,530px);padding:25px 36px 26px;text-align:center;border:1px solid #edd6cf;background:var(--paper);box-shadow:0 3px 4px #9d45560b,0 18px 55px -18px #8a475324;transform:rotate(-1.3deg);border-radius:3px;animation:arrive .8s cubic-bezier(.2,.7,.2,1) both}
.love-note:before{content:"";position:absolute;inset:9px;border:1px solid #eeded5;pointer-events:none}
.tape{position:absolute;z-index:3;width:132px;height:34px;left:calc(50% - 66px);top:-18px;background:#efc1b7a6;transform:rotate(3.7deg);clip-path:polygon(2% 0,97% 3%,96% 14%,100% 23%,97% 32%,99% 42%,97% 55%,100% 68%,97% 78%,99% 92%,98% 100%,1% 96%,3% 86%,0 72%,3% 60%,0 49%,3% 38%,0 28%,3% 15%);background-image:repeating-linear-gradient(90deg,transparent,transparent 3px,#fff2 4px)}
.note-top{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.8px;color:#a27778;text-align:left}
.postage{position:absolute;right:28px;top:57px;width:53px;height:61px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px dashed #d89195;outline:3px solid #f7e1dc;background:#f7e1dc;transform:rotate(9deg);color:var(--red)}
.postage>span{font-size:25px;line-height:1.2}.postage small{font-size:7px;letter-spacing:.5px}
.intro{margin-top:51px;position:relative}
.salutation{font:17px Hand,cursive;transform:rotate(-4deg);margin:0 0 17px;color:#b16b7b}
h1{font:500 clamp(44px,7vw,59px)/1.04 Bricolage,sans-serif;letter-spacing:-2.9px;margin:0;color:#79364c}
h1>span{display:block}.title-dot{color:#e45c70}
.subtitle{font-size:13px;margin:17px 0 0;letter-spacing:.1px}
.heart-area{position:relative;width:240px;margin:16px auto 3px;height:195px;display:flex;justify-content:center;align-items:center}
.heart-button{position:relative;width:160px;height:151px;background:transparent;border:0;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .22s;filter:drop-shadow(0 13px 11px #dc5c6c25);animation:heartbeat 3.6s 1s ease-in-out infinite}
.heart-button svg{width:100%;height:100%;overflow:visible}.heart-shadow{fill:#b92142;transform:translateY(6px)}.heart-face{fill:url(#heart-fill);stroke:#e54863;stroke-width:1}.shine{fill:none;stroke:#ffaeb6;stroke-width:7;stroke-linecap:round;opacity:.7}.heart-smile{fill:none;stroke:#852038;stroke-width:3;stroke-linecap:round}
.heart-button:hover{animation:none;transform:rotate(-6deg) scale(1.09)}.heart-button:active{transform:translateY(5px) scale(.92);animation:none}.heart-button:focus-visible{outline:2px dashed var(--red);outline-offset:10px;border-radius:40%}.heart-button.pop{animation:pop .55s ease both}
.spark{position:absolute;color:#d99d85;font-family:serif}.s1{font-size:34px;top:13px;left:21px;transform:rotate(-12deg)}.s2{font-size:18px;top:109px;right:8px}
.tap-note{position:absolute;left:168px;top:143px;white-space:nowrap;font:13px Hand,cursive;color:#b07380;transform:rotate(-8deg);pointer-events:none}
.tap-note svg{position:absolute;left:-14px;top:-41px;width:52px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;transform:rotate(165deg)}
.message{height:90px;display:grid;place-items:center;margin:13px 0 19px}.before-message{font-size:13px;color:#a5777f;margin:0}.after-message h2{font:500 43px/1.1 Bricolage,sans-serif;letter-spacing:-1.8px;color:var(--red);margin:0 0 11px}.after-message h2 span{font-family:Hand,cursive;font-size:34px;font-weight:400}.after-message p{font-size:12px;margin:0;color:var(--ink)}.after-message.reveal{animation:reveal .65s cubic-bezier(.2,.8,.2,1) both}
.note-bottom{border-top:1px solid #efded5;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:20px;text-align:left}.note-bottom>span:first-child{font-size:9px;color:#a6787e;max-width:155px;line-height:1.6}.signature{font:15px Hand,cursive;white-space:nowrap;transform:rotate(-4deg);color:#a25066}
.under-note{font-size:10px;letter-spacing:.25px;text-align:center;color:#a3737d;margin:27px 0 0;line-height:1.7}
footer{padding:9px 20px 24px;text-align:center;font-size:10px;letter-spacing:.4px;color:#ad7d85}footer span{color:var(--red);font-size:14px;margin-left:4px}
.edge-heart{position:fixed;color:#e4a4a7;font-family:Hand,cursive;pointer-events:none;opacity:.65}.h1{top:24%;left:13%;font-size:51px;transform:rotate(-21deg)}.h2{bottom:21%;right:14%;font-size:66px;transform:rotate(17deg)}.h3{bottom:20%;left:21%;font-size:23px;transform:rotate(13deg)}.h4{top:24%;right:19%;font-size:31px}.h5{bottom:38%;left:10%;font-size:22px}
#heart-shower{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:5}.flying-heart{position:absolute;left:0;top:0;font-family:Georgia,serif;will-change:transform,opacity;line-height:1;text-shadow:0 2px 0 #fff4}.no-js{position:fixed;bottom:20px;z-index:10;background:var(--paper);padding:15px;border:1px solid var(--red)}
[hidden]{display:none!important}
@keyframes heartbeat{0%,35%,55%,100%{transform:scale(1)}42%{transform:scale(1.055)}48%{transform:scale(1.015)}}
@keyframes pop{0%,100%{transform:scale(1)}25%{transform:scale(.87) rotate(-5deg)}60%{transform:scale(1.14) rotate(5deg)}}
@keyframes arrive{from{opacity:0;transform:translateY(18px) rotate(0)}to{opacity:1;transform:translateY(0) rotate(-1.3deg)}}
@keyframes reveal{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(min-height:950px){main{flex:0;margin-top:5vh}footer{margin-top:auto}}
@media(max-width:600px){.masthead{margin-top:24px;font-size:11px}main{padding:38px 24px 20px}.love-note{padding:24px 26px 25px;max-width:410px}.note-top{font-size:6.5px;letter-spacing:1.3px}.postage{right:24px;top:50px;width:43px;height:50px}.postage>span{font-size:22px}.postage small{font-size:6px}.intro{margin-top:47px}h1{font-size:51px;letter-spacing:-2.5px}.salutation{font-size:14px;margin-bottom:16px}.subtitle{font-size:11px;margin-top:14px}.heart-area{margin-top:9px;height:181px}.heart-button{width:149px;height:143px}.tap-note{left:154px;top:139px;font-size:11px}.message{margin:12px 0 13px;height:82px}.after-message h2{font-size:38px}.after-message p{font-size:10.5px}.note-bottom{padding-top:18px;gap:10px}.note-bottom>span:first-child{font-size:8px;max-width:124px}.signature{font-size:12px}.under-note{max-width:270px;margin-top:23px;font-size:9px}footer{font-size:9px;padding-bottom:19px}.edge-heart{opacity:.45}.h1{left:0;top:17%;font-size:30px}.h2{right:1%;bottom:10%;font-size:38px}.h3,.h5{display:none}.h4{right:4%;top:10%;font-size:19px}}
@media(max-width:360px){main{padding-left:18px;padding-right:18px}.love-note{padding-left:20px;padding-right:20px}h1{font-size:46px}.subtitle{font-size:10px}.tap-note{left:125px;top:145px;font-size:9px}.heart-area{width:225px}.signature{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.love-note{transform:none}}