.hp, .hp-backdrop { --hp-primary: var(--hp-c-primary, var(--primary, #634c9f)); --hp-primary-hover: var(--primary-hover, color-mix(in srgb, var(--hp-primary) 75%, #000)); --hp-btn-bg: linear-gradient(145deg, var(--hp-primary), var(--hp-primary-hover)); --hp-soft: var(--primary-soft, #eeeaf7); --hp-surface: var(--surface, #ffffff); --hp-surface-alt: var(--surface-alt, #f8fafc); --hp-text: var(--text, #273142); --hp-muted: var(--text-muted, #667085); --hp-border: var(--border, #e2e8f0); --hp-shadow: var(--shadow, 0 4px 18px rgb(15 23 42 / .07)); --hp-size: 44px; --hp-edge: 16px; --hp-dir: -34px; --hp-hover-t: .25s; --hp-hover-ease: cubic-bezier(.22,1,.36,1); --hp-center-scale: 1.6; --hp-in: calc(-1 * (16px + var(--hp-size) / 2)); }
html[data-theme="dark"] .hp { --hp-soft: var(--primary-soft, #302744); --hp-surface: var(--surface, #1b1e27); --hp-surface-alt: var(--surface-alt, #232733); --hp-text: var(--text, #f1f3f7); --hp-muted: var(--text-muted, #aeb6c5); --hp-border: var(--border, #343a49); --hp-shadow: var(--shadow, 0 4px 18px rgb(0 0 0 / .25)); }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .hp.hp--theme-auto { --hp-soft: var(--primary-soft, #302744); --hp-surface: var(--surface, #1b1e27); --hp-surface-alt: var(--surface-alt, #232733); --hp-text: var(--text, #f1f3f7); --hp-muted: var(--text-muted, #aeb6c5); --hp-border: var(--border, #343a49); } }
.hp.hp--theme-dark { --hp-soft: #302744; --hp-surface: #1b1e27; --hp-surface-alt: #232733; --hp-text: #f1f3f7; --hp-muted: #aeb6c5; --hp-border: #343a49; --hp-shadow: 0 4px 18px rgb(0 0 0 / .25); }
.hp.hp--theme-light { --hp-soft: #eeeaf7; --hp-surface: #ffffff; --hp-surface-alt: #f8fafc; --hp-text: #273142; --hp-muted: #667085; --hp-border: #e2e8f0; --hp-shadow: 0 4px 18px rgb(15 23 42 / .07); }
.hp { position: fixed; left: 0; top: 0; z-index: var(--hp-z, 9999); width: var(--hp-size); height: var(--hp-size); transform: translate(calc(50vw - var(--hp-size) / 2), calc(50vh - var(--hp-size) / 2)); visibility: hidden; font-family: inherit; font-weight: 400; font-size: 14px; line-height: 1.6; color: var(--hp-text); }
.hp.hp--direct { transform: translate(var(--hp-fx), calc(var(--hp-fy) - var(--hp-size) / 2)); }
.hp--show { visibility: visible; will-change: transform; }
.hp--left { --hp-fx: var(--hp-edge); }
.hp--right { --hp-fx: calc(100vw - var(--hp-edge) - var(--hp-size)); --hp-dir: 34px; --hp-in: calc(16px + var(--hp-size) / 2); }
.hp--moved { transform: translate(var(--hp-fx), calc(var(--hp-fy) - var(--hp-size) / 2)); transition: transform var(--hp-slide) var(--hp-ease); }
.hp--open { will-change: auto; }
.hp-backdrop { position: fixed; inset: 0; z-index: calc(var(--hp-z, 9999) - 1); background: rgb(17 19 26 / .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility 0s linear .5s; }
.hp-backdrop.is-on, .hp-backdrop.is-block { visibility: visible; transition-delay: 0s; }
.hp-backdrop.is-on { opacity: 1; }
.hp-backdrop.is-block { pointer-events: auto; touch-action: none; }
.hp__btn { position: relative; display: grid; place-items: center; width: var(--hp-size); height: var(--hp-size); padding: 0; margin: 0; border: 0; border-radius: 50%; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; outline: 0 solid transparent; outline-offset: 0; color: #fff; background: var(--hp-btn-bg); box-shadow: 0 8px 24px color-mix(in srgb, var(--hp-primary) 40%, transparent); opacity: 0; backface-visibility: hidden; scale: 1; transition: transform var(--hp-hover-t) var(--hp-hover-ease), scale var(--hp-slide, .9s) var(--hp-ease, cubic-bezier(.22,1,.36,1)), box-shadow var(--hp-hover-t) var(--hp-hover-ease), outline-color var(--hp-hover-t) ease, outline-offset var(--hp-hover-t) var(--hp-hover-ease); }
.hp__btn::-moz-focus-inner { border: 0; }
.hp:not(.hp--moved):not(.hp--direct) .hp__btn { scale: var(--hp-center-scale); }
.hp .hp__btn:hover, .hp .hp__btn:focus, .hp .hp__btn:active { background: var(--hp-btn-bg); color: #fff; border: 0; filter: none; }
.hp__btn:active { transform: scale(.86); box-shadow: 0 2px 8px color-mix(in srgb, var(--hp-primary) 40%, transparent); }
.hp__btn:focus-visible { outline: 2px solid var(--hp-primary); outline-offset: 4px; }
.hp--pfocus .hp__btn:focus-visible { outline-color: transparent; }
@media (hover: hover) { .hp__btn:hover { transform: scale(.96); box-shadow: 0 4px 12px color-mix(in srgb, var(--hp-primary) 40%, transparent); } .hp__btn:hover:active { transform: scale(.86); box-shadow: 0 2px 8px color-mix(in srgb, var(--hp-primary) 40%, transparent); } }
.hp--show .hp__btn { opacity: 1; }
.hp--ia-pop.hp--show .hp__btn { animation: hp-in-pop .65s cubic-bezier(.34,1.56,.64,1) backwards; }
.hp--ia-spin.hp--show .hp__btn { animation: hp-in-spin .65s cubic-bezier(.22,1,.36,1) backwards; }
.hp--ia-drop.hp--show .hp__btn { animation: hp-in-drop .65s cubic-bezier(.34,1.3,.64,1) backwards; }
.hp--pulse .hp__btn::before, .hp--pulse .hp__btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--hp-primary); opacity: 0; pointer-events: none; }
.hp--pulse.hp--show:not(.hp--open) .hp__btn::before { animation: hp-ring 2.2s ease-out .6s infinite; }
.hp--pulse.hp--show:not(.hp--open) .hp__btn::after { animation: hp-ring 2.2s ease-out 1.4s infinite; }
.hp__box { position: absolute; top: 50%; left: calc(100% + 16px); width: var(--hp-width); max-width: calc(100vw - var(--hp-size) - var(--hp-edge) * 2 - 16px); padding: 18px 20px 20px; overflow: hidden; z-index: -1; background: var(--hp-surface); color: var(--hp-text); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); box-shadow: var(--hp-shadow), 0 18px 40px rgb(15 23 42 / .12); transform: translate(0, -50%); transform-origin: left center; opacity: 0; visibility: hidden; pointer-events: none; }
.hp--right .hp__box { left: auto; right: calc(100% + 16px); transform-origin: right center; }
.hp__box::before { content: ""; position: absolute; top: 50%; left: -6px; width: 12px; height: 12px; background: var(--hp-surface); border-left: 1px solid var(--hp-border); border-bottom: 1px solid var(--hp-border); transform: translateY(-50%) rotate(45deg); }
.hp--right .hp__box::before { left: auto; right: -6px; transform: translateY(-50%) rotate(225deg); }
.hp--open .hp__box { opacity: 1; visibility: visible; pointer-events: auto; }
.hp--open.hp--ba-slide .hp__box { animation: hp-b-slide var(--hp-box-t) var(--hp-ease) both; }
.hp--open.hp--ba-fade .hp__box { animation: hp-b-fade var(--hp-box-t) ease both; }
.hp--open.hp--ba-zoom .hp__box { animation: hp-b-zoom var(--hp-box-t) var(--hp-ease) both; }
.hp--open.hp--ba-bounce .hp__box { animation: hp-b-bounce var(--hp-box-t) ease-out both; }
.hp--open.hp--ba-flip .hp__box { animation: hp-b-flip var(--hp-box-t) var(--hp-ease) both; }
.hp--ba-flip .hp__box { perspective: 800px; }
.hp--open.hp--ba-app .hp__box { animation: hp-b-app var(--hp-box-t) var(--hp-ease) both; }
.hp--closing .hp__box { opacity: 1; visibility: visible; pointer-events: none; }
.hp--closing.hp--ba-slide .hp__box { animation: hp-c-slide var(--hp-box-c) cubic-bezier(.4,0,1,1) both; }
.hp--closing.hp--ba-fade .hp__box { animation: hp-c-fade var(--hp-box-c) ease both; }
.hp--closing.hp--ba-zoom .hp__box { animation: hp-c-zoom var(--hp-box-c) cubic-bezier(.4,0,1,1) both; }
.hp--closing.hp--ba-bounce .hp__box { animation: hp-c-bounce var(--hp-box-c) ease-in both; }
.hp--closing.hp--ba-flip .hp__box { animation: hp-c-flip var(--hp-box-c) cubic-bezier(.4,0,1,1) both; }
.hp--closing.hp--ba-app .hp__box { animation: hp-c-app var(--hp-box-c) cubic-bezier(.4,0,.6,1) both; }
.hp--open .hp__head, .hp--open .hp__body, .hp--open .hp__link { animation: hp-rise .5s ease backwards; }
.hp--open .hp__head { animation-delay: calc(var(--hp-box-t) * .35); }
.hp--open .hp__body { animation-delay: calc(var(--hp-box-t) * .5); }
.hp--open .hp__link { animation-delay: calc(var(--hp-box-t) * .65); }
.hp__head { margin: 0 26px 6px 0; }
.hp__title { font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: .01em; }
.hp__body { color: var(--hp-muted); }
.hp__body > :first-child { margin-top: 0; }
.hp__body > :last-child { margin-bottom: 0; }
.hp__body a { color: var(--hp-primary); }
.hp__link { display: inline-block; margin-top: 14px; padding: 7px 16px; font-weight: 600; font-size: 13px; text-decoration: none; color: var(--hp-primary); background: var(--hp-soft); border-radius: 999px; -webkit-tap-highlight-color: transparent; transition: transform var(--hp-hover-t) var(--hp-hover-ease); }
.hp__link:active { transform: scale(.92); }
.hp__link:focus-visible { outline: 2px solid var(--hp-primary); outline-offset: 2px; }
@media (hover: hover) { .hp__link:hover { transform: scale(.95); } .hp__link:hover:active { transform: scale(.92); } }
.hp__close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1; color: var(--hp-muted); background: transparent; -webkit-tap-highlight-color: transparent; transition: transform var(--hp-hover-t) var(--hp-hover-ease); }
.hp__close:active { transform: rotate(90deg) scale(.8); }
.hp__close:focus-visible { outline: 2px solid var(--hp-primary); }
@media (hover: hover) { .hp__close:hover { transform: rotate(90deg) scale(.88); } .hp__close:hover:active { transform: rotate(90deg) scale(.8); } }
.hp__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--hp-primary); transform-origin: left center; transform: scaleX(0); }
.hp--right .hp__bar { transform-origin: right center; }
.hp--open.hp--timed .hp__bar { animation: hp-bar var(--hp-auto) linear forwards; }
.hp--s-glass .hp__box { background: color-mix(in srgb, var(--hp-surface) 68%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.hp--s-glass .hp__box::before { background: color-mix(in srgb, var(--hp-surface) 68%, transparent); }
.hp--s-header .hp__box, .hp--s-gradient .hp__box { padding-top: 0; }
.hp--s-header .hp__head, .hp--s-gradient .hp__head { margin: 0 -20px 12px; padding: 14px 46px 14px 20px; background: var(--hp-primary); color: #fff; }
.hp--s-gradient .hp__head { background: linear-gradient(120deg, var(--hp-primary), var(--hp-primary-hover)); }
.hp--s-header .hp__close, .hp--s-gradient .hp__close { color: #fff; }
.hp--s-header:not(.hp--right) .hp__box::before, .hp--s-gradient:not(.hp--right) .hp__box::before { background: var(--hp-primary); border-color: var(--hp-primary); }
@keyframes hp-in-pop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hp-in-spin { 0% { transform: rotate(-270deg) scale(.2); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes hp-in-drop { 0% { transform: translateY(-40vh) scale(.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes hp-ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes hp-b-slide { from { opacity: 0; transform: translate(var(--hp-dir), -50%); } to { opacity: 1; transform: translate(0, -50%); } }
@keyframes hp-b-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hp-b-zoom { from { opacity: 0; transform: translate(0, -50%) scale(.55); } to { opacity: 1; transform: translate(0, -50%) scale(1); } }
@keyframes hp-b-bounce { 0% { opacity: 0; transform: translate(var(--hp-dir), -50%) scale(.8); } 55% { opacity: 1; transform: translate(calc(var(--hp-dir) * -.22), -50%) scale(1.03); } 78% { transform: translate(calc(var(--hp-dir) * .08), -50%) scale(.99); } 100% { opacity: 1; transform: translate(0, -50%) scale(1); } }
@keyframes hp-b-flip { from { opacity: 0; transform: translate(0, -50%) rotateY(-80deg); } to { opacity: 1; transform: translate(0, -50%) rotateY(0); } }
@keyframes hp-c-slide { from { opacity: 1; transform: translate(0, -50%); } to { opacity: 0; transform: translate(var(--hp-dir), -50%); } }
@keyframes hp-c-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes hp-c-zoom { from { opacity: 1; transform: translate(0, -50%) scale(1); } to { opacity: 0; transform: translate(0, -50%) scale(.55); } }
@keyframes hp-c-bounce { 0% { opacity: 1; transform: translate(0, -50%) scale(1); } 30% { opacity: 1; transform: translate(calc(var(--hp-dir) * -.12), -50%) scale(1.03); } 100% { opacity: 0; transform: translate(var(--hp-dir), -50%) scale(.8); } }
@keyframes hp-c-flip { from { opacity: 1; transform: translate(0, -50%) rotateY(0); } to { opacity: 0; transform: translate(0, -50%) rotateY(-80deg); } }
@keyframes hp-b-app { from { opacity: 0; transform: translate(var(--hp-in), -50%) scale(.1); } 40% { opacity: 1; } to { opacity: 1; transform: translate(0, -50%) scale(1); } }
@keyframes hp-c-app { from { opacity: 1; transform: translate(0, -50%) scale(1); } 65% { opacity: 1; } to { opacity: 0; transform: translate(var(--hp-in), -50%) scale(.1); } }
@keyframes hp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hp-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 575px) { .hp { --hp-edge: 8px; --hp-size: 48px; } .hp__box { padding: 16px; } .hp.hp--moved.hp--scrolled { transition: transform 0.35s ease; } .hp--left.hp--moved.hp--scrolled { transform: translate(calc(8px - var(--hp-size)), calc(var(--hp-fy) - var(--hp-size) / 2)); } .hp--right.hp--moved.hp--scrolled { transform: translate(calc(100vw - 8px), calc(var(--hp-fy) - var(--hp-size) / 2)); } }
@media (prefers-reduced-motion: reduce) { .hp, .hp *, .hp-backdrop { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; } }