.heart-art{position:absolute;inset:0;overflow:hidden;pointer-events:none;isolation:isolate;--heart-note-width:100px;--heart-note-height:65px;--heart-copy-size:11px;--heart-head-height:15px}
.heart-art-halo{position:absolute;width:min(82vw,960px);height:min(70vh,670px);top:52%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(227,118,154,.075),rgba(221,122,132,.025) 48%,transparent 72%);filter:blur(10px)}
.heart-art-orbit,.heart-art-sparks{position:absolute;inset:0;transform-origin:50% 52%;will-change:transform}
.heart-note{box-sizing:border-box;position:absolute;left:50%;top:50%;width:var(--heart-note-width);height:var(--heart-note-height);margin:0;border:1px solid rgba(255,248,240,.8);border-radius:5px;background:var(--heart-paper,#fff0df);color:#734b55;box-shadow:0 5px 13px rgba(26,3,20,.14),inset 0 1px 0 rgba(255,255,255,.6);overflow:hidden;opacity:0;transform:translate3d(var(--heart-x),var(--heart-y),0) translate(-50%,-50%) rotate(var(--heart-rotation));animation:heart-note-arrive .64s cubic-bezier(.16,.7,.2,1) var(--heart-delay) both;backface-visibility:hidden}
.heart-note-cream{--heart-paper:#f6ead8;color:#7e635b}.heart-note-rose{--heart-paper:#f2d6df;color:#865163}.heart-note-lilac{--heart-paper:#e2d6eb;color:#716080}.heart-note-peach{--heart-paper:#f2dccf;color:#876554}.heart-note-sage{--heart-paper:#dce7e0;color:#5d756d}
.heart-note-head{height:var(--heart-head-height);display:flex;align-items:center;justify-content:space-between;padding:0 6%;background:rgba(255,255,255,.31);border-bottom:1px solid rgba(255,255,255,.2)}
.heart-note-head svg{width:calc(var(--heart-head-height)*.55);height:calc(var(--heart-head-height)*.55);stroke:currentColor;stroke-width:1.6;opacity:.56}
.heart-note-dots{display:block;width:calc(var(--heart-head-height)*.28);height:1px;background:currentColor;box-shadow:0 2px 0 currentColor;opacity:.32}
.heart-note p{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:calc(100% - var(--heart-head-height));margin:0;padding:1px 4px 3px;font-family:inherit;font-size:var(--heart-copy-size);font-weight:500;line-height:1.45;letter-spacing:.025em;white-space:pre-line}
.heart-art.is-ready .heart-art-orbit{animation:heart-art-pulse 3.4s ease-in-out .25s infinite}
.heart-art-sparks{opacity:0;transition:opacity 1.2s ease}
.heart-art.is-ready .heart-art-sparks{opacity:1}
.heart-art-spark{position:absolute;width:3px;height:3px;background:#f9d7ae;border-radius:50%;box-shadow:0 0 9px 1px #ecba8666;animation:heart-art-twinkle var(--spark-duration) ease-in-out var(--spark-delay) infinite;opacity:.1}
.heart-art-spark:nth-child(3n)::before,.heart-art-spark:nth-child(3n)::after{content:'';position:absolute;background:linear-gradient(transparent,#f6dfc3,transparent);left:1px;top:-4px;width:1px;height:11px}
.heart-art-spark:nth-child(3n)::after{transform:rotate(90deg)}
@keyframes heart-note-arrive{0%{opacity:0;transform:translate3d(var(--heart-from-x),var(--heart-from-y),0) translate(-50%,-50%) rotate(var(--heart-from-rotation)) scale(.52)}18%{opacity:.95}100%{opacity:1;transform:translate3d(var(--heart-x),var(--heart-y),0) translate(-50%,-50%) rotate(var(--heart-rotation)) scale(1)}}
@keyframes heart-art-pulse{0%,23%,47%,100%{transform:scale(1)}10%{transform:scale(1.025)}34%{transform:scale(1.015)}}
@keyframes heart-art-twinkle{0%,100%{opacity:.12;transform:scale(.6) rotate(0)}45%{opacity:.92;transform:scale(1.25) rotate(45deg)}}
.heart-art-reduced .heart-note{animation:none;opacity:1}.heart-art-reduced.is-ready .heart-art-orbit,.heart-art-reduced .heart-art-spark{animation:none}.heart-art-reduced .heart-art-spark{opacity:.5}
@media(max-width:600px){.heart-note{border-radius:3px;box-shadow:0 3px 7px rgba(26,3,20,.16)}.heart-art-halo{width:95vw;height:50vh}.heart-note p{font-weight:550;padding-bottom:2px}.heart-art-spark{width:2px;height:2px}}
@media(prefers-reduced-motion:reduce){.heart-note{animation:none;opacity:1}.heart-art.is-ready .heart-art-orbit,.heart-art-spark{animation:none}.heart-art-spark{opacity:.5}.heart-art-sparks{transition:none}}