.web-heart{align-items:center;min-height:48px;display:inline-flex;position:relative}.web-heart__btn{width:48px;height:48px;color:var(--pecka-white);cursor:pointer;background:#ffffff0f;border:2px solid #ffffffb3;border-radius:50%;flex:none;justify-content:center;align-items:center;padding:0;transition:transform .12s,background-color .12s,border-color .12s;display:inline-flex}.web-heart__btn:hover{border-color:var(--pecka-yellow);color:var(--pecka-yellow);transform:scale(1.06)}.web-heart__btn:focus-visible{outline:3px solid var(--pecka-yellow);outline-offset:2px}.web-heart__btn--on,.web-heart__btn--on:hover{border-color:var(--pecka-yellow);background:var(--pecka-yellow);color:var(--pecka-blue)}.web-heart__btn:disabled{cursor:default;transform:none}.web-heart__note{z-index:2;border-radius:var(--pecka-radius-pill);background:var(--pecka-surface-panel,#0b0b63);width:max-content;max-width:min(320px,100vw - 32px);color:var(--pecka-white);padding:6px 14px;font-size:14px;line-height:1.35;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 0 0 1px #ffffff2e,0 6px 18px #00000059}.web-heart__note:empty{display:none}.pecka-root.pecka-web .web-heart__note a{color:var(--pecka-white);text-decoration:underline}.pecka-root.pecka-web .web-heart__note a:hover{color:var(--pecka-yellow)}@media (prefers-reduced-motion:reduce){.web-heart__btn,.web-heart__btn:hover{transition:none;transform:none}}