.pattern-preview.heart-preview{position:relative;display:grid;place-items:center;padding:18px;height:180px;overflow:hidden;isolation:isolate}.pattern-preview.heart-preview.pattern-preview--inspector{height:auto;min-height:220px;align-content:center;gap:14px}.heart-preview__hint{margin:0;font-size:.78rem;color:rgba(203,213,225,.72);text-align:center}.heart-button{position:relative;display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 14px;border-radius:999px;border:1px solid rgba(148,163,184,.25);background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(2,6,23,.92));color:rgba(203,213,225,.78);font:inherit;font-size:.86rem;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:color .18s ease,border-color .18s ease,background-color .18s ease}.heart-button:hover{border-color:color-mix(in srgb,var(--heart-accent,#f43f5e) 32%,rgba(148,163,184,.25))}.heart-button:focus-visible{outline:2px solid var(--heart-accent,#f43f5e);outline-offset:3px}.heart-button--liked{color:var(--heart-accent,#f43f5e);border-color:color-mix(in srgb,var(--heart-accent,#f43f5e) 50%,rgba(148,163,184,.25));background:linear-gradient(180deg,color-mix(in srgb,var(--heart-accent,#f43f5e) 12%,rgba(15,23,42,.92)),rgba(2,6,23,.92))}.heart-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:rgba(148,163,184,.55);transform-origin:center;transition:color var(--heart-duration,.42s) ease}.heart-icon svg{width:100%;height:100%;display:block}.heart-button--liked .heart-icon{color:var(--heart-accent,#f43f5e);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--heart-accent,#f43f5e) 45%,transparent))}.heart-button__count{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;letter-spacing:.02em}.heart-particle-layer{left:18px;width:22px;height:22px;transform:translateY(-50%)}.heart-particle,.heart-particle-layer{position:absolute;top:50%;pointer-events:none}.heart-particle{left:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--heart-accent,#ec4899);opacity:0;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--heart-accent,#ec4899) 60%,transparent))}.heart-preview:not(.pattern-preview--inspector) .heart-button{animation:stageButtonPulse 3.6s ease-out infinite}.heart-preview:not(.pattern-preview--inspector) .heart-icon{animation:stageHeartPop 3.6s ease-out infinite}@keyframes stageButtonPulse{0%,28%{transform:scale(1);border-color:rgba(148,163,184,.25)}32%{transform:scale(.94)}40%{transform:scale(1.1);border-color:color-mix(in srgb,var(--heart-accent,#f43f5e) 55%,rgba(148,163,184,.25))}50%,86%{transform:scale(1);border-color:color-mix(in srgb,var(--heart-accent,#f43f5e) 55%,rgba(148,163,184,.25))}92%,to{transform:scale(1);border-color:rgba(148,163,184,.25)}}@keyframes stageHeartPop{0%,32%{transform:scale(1);color:rgba(148,163,184,.55)}40%{transform:scale(1.3);color:var(--heart-accent,#f43f5e);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--heart-accent,#f43f5e) 50%,transparent))}50%,86%{transform:scale(1);color:var(--heart-accent,#f43f5e);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--heart-accent,#f43f5e) 35%,transparent))}92%,to{transform:scale(1);color:rgba(148,163,184,.55);filter:none}}.heart-preview--particleBurst:not(.pattern-preview--inspector) .heart-particle{animation:stageParticleFly 3.6s ease-out infinite}.heart-preview--particleBurst:not(.pattern-preview--inspector) .heart-particle:first-child{--pdx:36px;--pdy:0px}.heart-preview--particleBurst:not(.pattern-preview--inspector) .heart-particle:nth-child(2){--pdx:18px;--pdy:31px}.heart-preview--particleBurst:not(.pattern-preview--inspector) .heart-particle:nth-child(3){--pdx:-18px;--pdy:31px}.heart-preview--particleBurst:not(.pattern-preview--inspector) .heart-particle:nth-child(4){--pdx:-36px;--pdy:0px}.heart-preview--particleBurst:not(.pattern-preview--inspector) .heart-particle:nth-child(5){--pdx:-18px;--pdy:-31px}.heart-preview--particleBurst:not(.pattern-preview--inspector) .heart-particle:nth-child(6){--pdx:18px;--pdy:-31px}@keyframes stageParticleFly{0%,36%{opacity:0;transform:translate(0) scale(.2)}44%{opacity:1;transform:translate(0) scale(.4)}62%{opacity:0;transform:translate(var(--pdx,36px),var(--pdy,0)) scale(1)}to{opacity:0;transform:translate(var(--pdx,36px),var(--pdy,0)) scale(1)}}.heart-preview--balloonRain{position:relative}.heart-balloon-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;isolation:isolate}.heart-balloon{position:absolute;bottom:50%;left:50%;display:inline-flex;align-items:center;justify-content:center;width:7px;height:7px;color:#f472b6;opacity:0;animation:balloonFloatUp 3.6s ease-out infinite;animation-delay:var(--delay,0s);filter:drop-shadow(0 0 4px color-mix(in srgb,currentColor 50%,transparent))}.heart-preview--inspector .heart-balloon,.heart-preview--inspector .heart-balloon-ripple{animation-iteration-count:1;animation-fill-mode:forwards}body:has(dialog.inspector-dialog[open]) .heart-preview:not(.pattern-preview--inspector) .heart-balloon-layer{visibility:hidden}.heart-balloon svg{width:100%;height:100%;fill:currentColor;display:block}.heart-balloon-ripple{position:absolute;bottom:50%;left:50%;width:38px;height:38px;border-radius:50%;border:2px solid color-mix(in srgb,var(--heart-accent,#f472b6) 60%,transparent);transform:translate(-50%);opacity:0;pointer-events:none;animation:balloonRippleOut 3.6s ease-out infinite}.heart-balloon--1{color:#f472b6;--bx:-42px;--bx-end:-58px;--delay:0.00s;width:8px;height:8px}.heart-balloon--2{color:#a78bfa;--bx:16px;--bx-end:30px;--delay:0.10s;width:7px;height:7px}.heart-balloon--3{color:#fbbf24;--bx:-12px;--bx-end:-4px;--delay:0.18s;width:9px;height:9px}.heart-balloon--4{color:#34d399;--bx:36px;--bx-end:48px;--delay:0.26s;width:7px;height:7px}.heart-balloon--5{color:#67e8f9;--bx:-24px;--bx-end:-32px;--delay:0.34s;width:8px;height:8px}.heart-balloon--6{color:#fb7185;--bx:8px;--bx-end:18px;--delay:0.42s;width:8px;height:8px}.heart-balloon--7{color:#f0abfc;--bx:-30px;--bx-end:-38px;--delay:0.50s;width:7px;height:7px}.heart-balloon--8{color:#f472b6;--bx:28px;--bx-end:40px;--delay:0.58s;width:6px;height:6px}.heart-balloon--9{color:#a78bfa;--bx:-4px;--bx-end:2px;--delay:0.66s;width:8px;height:8px}.heart-balloon--10{color:#fbbf24;--bx:-18px;--bx-end:-22px;--delay:0.74s;width:7px;height:7px}.heart-balloon--11{color:#34d399;--bx:22px;--bx-end:30px;--delay:0.82s;width:8px;height:8px}.heart-balloon--12{color:#67e8f9;--bx:-36px;--bx-end:-44px;--delay:0.90s;width:6px;height:6px}.heart-balloon--13{color:#fb7185;--bx:44px;--bx-end:56px;--delay:0.98s;width:7px;height:7px}.heart-balloon--14{color:#f0abfc;--bx:-8px;--bx-end:-2px;--delay:1.06s;width:9px;height:9px}.heart-balloon--15{color:#f472b6;--bx:32px;--bx-end:42px;--delay:1.14s;width:7px;height:7px}.heart-balloon--16{color:#a78bfa;--bx:-22px;--bx-end:-28px;--delay:1.22s;width:6px;height:6px}.heart-balloon--17{color:#34d399;--bx:10px;--bx-end:16px;--delay:1.30s;width:7px;height:7px}.heart-balloon--18{color:#fbbf24;--bx:-38px;--bx-end:-46px;--delay:1.38s;width:6px;height:6px}@keyframes balloonFloatUp{0%,30%{opacity:0;transform:translate(calc(-50% + var(--bx, 0px))) scale(.4)}36%{opacity:1;transform:translate(calc(-50% + var(--bx, 0px)),-6px) scale(1)}56%{opacity:1;transform:translate(calc(-50% + var(--bx-end, 0px)),-52px) scale(1)}66%,to{opacity:0;transform:translate(calc(-50% + var(--bx-end, 0px)),-82px) scale(.6)}}@keyframes balloonRippleOut{0%,30%{opacity:0;transform:translate(-50%) scale(.6)}36%{opacity:.7;transform:translate(-50%) scale(.6)}60%{opacity:0;transform:translate(-50%) scale(2.4)}to{opacity:0}}@media (prefers-reduced-motion:reduce){.heart-icon{transition:none}.heart-balloon,.heart-balloon-ripple{animation:none;opacity:0}}