@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@400;500;600&display=swap');
:root{--bg:#f8f3eb;--ink:#493e39;--rose:#9a4055;--muted:#887870}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #756646;outline-offset:6px}button:disabled{cursor:default;opacity:.48}header{display:flex;justify-content:space-between;gap:15px;padding:28px 24px;font-size:9px;letter-spacing:2px;color:var(--muted);max-width:1000px;margin:auto}.grain{position:fixed;inset:0;pointer-events:none;opacity:.045;z-index:20;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E")}main{max-width:650px;margin:auto;padding:16px 24px max(36px,env(safe-area-inset-bottom));text-align:center}[hidden]{display:none!important}.eyebrow{font-size:9px;letter-spacing:2.5px;color:var(--rose);line-height:1.8;margin:16px 0 22px}h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;letter-spacing:-1.7px;margin:0}h1{font-size:clamp(62px,17vw,92px);line-height:.97}em{font-weight:400;color:var(--rose)}h2{font-size:clamp(40px,11vw,62px);line-height:1.05}p{line-height:1.8}.intro{font-size:13px;color:var(--muted);margin-top:25px}.bud{width:170px;height:190px;margin:5px auto 12px;animation:sway 6s ease-in-out infinite;transform-origin:bottom}.bud svg{width:100%;height:100%}.primary{min-height:54px;border:1px solid var(--rose);border-radius:3px;background:var(--rose);color:#fff9f2;display:flex;align-items:center;justify-content:center;gap:18px;width:100%;max-width:350px;margin:0 auto;padding:15px 18px;font-size:12px;letter-spacing:.3px;transition:background .2s}.primary:hover:not(:disabled){background:#803247}.primary span{font-size:19px}.small{font-size:10px;color:var(--muted);margin:18px 0}.instruction{color:var(--muted);font-size:12px;margin:18px 0 0}.flower{position:relative;width:320px;height:355px;margin:10px auto 0;max-width:100%}.stem{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.petal{position:absolute;left:calc(50% - 36px);top:43px;width:72px;height:132px;border:1px solid #fff5eb80;border-radius:58% 58% 48% 48%;background:linear-gradient(145deg,#eed1c7,#c37a87 65%,#a24a60);box-shadow:inset 5px 5px 20px #ffebd46b,0 5px 12px #793d4820;transform-origin:50% 112px;transform:rotate(var(--angle)) translateY(-21px);color:#73374b;animation:bloom 1.3s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--delay);transition:filter .25s}.petal:nth-child(even){background:linear-gradient(135deg,#f2d9ca,#d29b9f 65%,#ba6a7d)}.petal:hover{filter:brightness(1.06)}.petal span{display:block;transform:rotate(var(--counter));font-size:18px;opacity:.65;margin-top:-48px}.petal.seen{box-shadow:inset 0 0 20px #fff6e899,0 0 0 2px #a78059}.petal.seen span{opacity:1}.heart{position:absolute;left:calc(50% - 26px);top:132px;width:52px;height:52px;background:radial-gradient(circle at 40% 35%,#e6c991,#b18b51);border:1px solid #f8e8b7;border-radius:50%;display:grid;place-items:center;color:#70522f;font-family:Georgia,serif;font-style:italic;font-size:23px;pointer-events:none;box-shadow:0 3px 15px #73374b26}.progress{font-size:10px;letter-spacing:1px;color:var(--muted);margin:-10px 0 20px}.text-button{display:block;background:none;border:0;border-bottom:1px solid #c9b6a3;padding:12px 1px 5px;margin:22px auto;color:var(--muted);font-size:11px;min-height:44px}.paper{background:#fffcf6;text-align:left;padding:30px 26px;margin-top:30px;box-shadow:0 12px 45px #6f504710;border:1px solid #e9dfd1;transform:rotate(-.5deg)}.paper p{font-size:14px;line-height:1.9}.paper .salutation{font:italic 30px 'Cormorant Garamond',Georgia,serif;color:var(--rose)}.paper .signature{font:italic 26px 'Cormorant Garamond',Georgia,serif;margin-top:28px}.signature span{display:block;color:var(--rose);margin-top:12px}.closing{font:italic 26px/1.3 'Cormorant Garamond',Georgia,serif;margin:32px 0;color:var(--rose)}dialog{width:calc(100% - 36px);max-width:420px;background:#fffbf4;color:var(--ink);border:1px solid #ead8c9;border-radius:8px;padding:38px 26px 28px;text-align:center;box-shadow:0 20px 100px #3a252b30}dialog::backdrop{background:#46333060;backdrop-filter:blur(6px)}.close{position:absolute;right:10px;top:5px;border:0;background:none;font-size:28px;color:var(--muted);width:44px;height:44px}.note-symbol{font-size:40px;color:#b79a65}h3{font-size:40px;letter-spacing:-1px;margin-top:12px}#noteText{font-size:14px;color:var(--muted);margin:20px 0 30px}.welcome,.garden,.letter{animation:arrive .7s ease both}@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes bloom{from{opacity:0;transform:rotate(var(--angle)) translateY(10px) scale(.2)}to{opacity:1;transform:rotate(var(--angle)) translateY(-21px) scale(1)}}@keyframes sway{50%{transform:rotate(3deg)}}@media(min-width:700px){main{padding-top:35px}.flower{width:360px;height:395px}.petal{top:55px}.heart{top:144px}.paper{padding:40px 45px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}@media(max-width:350px){main{padding-inline:16px}.petal{width:64px;left:calc(50% - 32px)}}

/* A comfortable reading measure on phones and tablets. */
.letter h2{font-size:clamp(38px,9.5vw,58px);overflow-wrap:break-word}
.paper{transform:none}
.paper p{font-size:15px;line-height:1.9;overflow-wrap:break-word}
.paper .signature{font-size:clamp(25px,7vw,30px);line-height:1.35}
.signature .signature-name{display:inline;color:var(--ink)}
.hedgehog{display:block;width:70px;height:46px;color:var(--rose);margin-top:16px}
@media(max-width:400px){.paper{padding:25px 20px}.letter h2{letter-spacing:-1px}}

.arrow-icon{width:18px;height:18px;flex-shrink:0;vertical-align:middle}.text-button .arrow-icon{width:12px;height:12px;margin-left:5px}