.hold-button{--hb-radius:14px;--hb-bg:#27272a;--hb-fill:#5227ff;--hb-text:#f5f5f5;--hb-fill-text:#fff;--hb-hold:2s;--hb-release:.2s;--hb-press:.97;--hb-wave:6px;--hb-w:0px;--hb-h:0px;--hb-cycles:2;--hb-p:0;--hb-ease-out:cubic-bezier(.23, 1, .32, 1);--hb-shadow:inset 0 1px 0 #ffffff0f;--hb-glow:inset 0 1px 0 #ffffff0f, 0 10px 32px -6px color-mix(in srgb, var(--hb-fill) 70%, transparent);isolation:isolate;border-radius:var(--hb-radius);background:var(--hb-bg);color:var(--hb-text);letter-spacing:.01em;box-shadow:var(--hb-shadow);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .16s var(--hb-ease-out), background-color .16s ease, box-shadow var(--hb-release) var(--hb-ease-out);border:0;outline:none;place-items:center;margin:0;font-family:inherit;font-weight:500;line-height:1;display:inline-grid;position:relative}.hold-button--sm{height:36px;padding:0 16px;font-size:13px}.hold-button--md{height:44px;padding:0 22px;font-size:15px}@media (max-width:639px){.hold-button{max-width:100%}.hold-button--md{width:100%;height:auto;min-height:44px;padding:10px 14px;font-size:14px}.hold-button__label>span{white-space:normal;text-align:center;justify-content:center;line-height:1.25}}.hold-button--lg{height:52px;padding:0 28px;font-size:17px}@media (hover:hover) and (pointer:fine){.hold-button:not(:disabled):hover{background:color-mix(in srgb, var(--hb-bg) 92%, #fff)}}.hold-button[data-phase=holding][data-input=pointer]{transform:scale(var(--hb-press))}.hold-button[data-glow=true][data-phase=holding],.hold-button[data-glow=true][data-phase=done]{box-shadow:var(--hb-glow)}.hold-button[data-glow=true][data-phase=holding]{transition:transform .16s var(--hb-ease-out), background-color .16s ease, box-shadow var(--hb-hold) linear}.hold-button:focus-visible{outline:2px solid var(--hb-fill);outline-offset:3px}.hold-button:disabled{opacity:.5;cursor:default;pointer-events:none}.hold-button__pulse{z-index:0;border-radius:var(--hb-radius);pointer-events:none;opacity:0;position:absolute;inset:0}.hold-button[data-glow=true][data-phase=done] .hold-button__pulse{animation:hb-pulse .6s var(--hb-ease-out) forwards}@keyframes hb-pulse{0%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb, var(--hb-fill) 55%, transparent)}to{opacity:0;box-shadow:0 0 0 14px color-mix(in srgb, var(--hb-fill) 0%, transparent)}}.hold-button__label{z-index:2;place-items:center;display:grid;position:relative}.hold-button__label>span{white-space:nowrap;grid-area:1/1;align-items:center;gap:8px;transition:opacity .2s,filter .2s;display:inline-flex}.hold-button__icon{flex:none;display:inline-flex}.hold-button__icon>svg{display:block}.hold-button__done,.hold-button[data-phase=done] .hold-button__idle{opacity:0;filter:blur(2px)}.hold-button[data-phase=done] .hold-button__done{opacity:1;filter:blur()}.hold-button__clip{z-index:3;clip-path:inset(0 round var(--hb-radius));pointer-events:none;position:absolute;inset:0}.hold-button__fill{background:var(--hb-fill);color:var(--hb-fill-text);clip-path:inset(0 calc((1 - var(--hb-p)) * (100% + .75 * var(--hb-wave)) - var(--hb-p) * .25 * var(--hb-wave)) 0 0);place-items:center;display:grid;position:absolute;inset:0}.hold-button[data-direction=up] .hold-button__fill{clip-path:inset(calc((1 - var(--hb-p)) * (100% + .75 * var(--hb-wave)) - var(--hb-p) * .25 * var(--hb-wave)) 0 0 0)}.hold-button__crest{background:var(--hb-fill);color:var(--hb-fill-text);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='200' viewBox='0 0 20 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10C18 8 18 25.3 10 33.3S2 58.7 10 66.7S18 92 10 100S2 125.3 10 133.3S18 158.7 10 166.7S2 192 10 200H0Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='200' viewBox='0 0 20 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10C18 8 18 25.3 10 33.3S2 58.7 10 66.7S18 92 10 100S2 125.3 10 133.3S18 158.7 10 166.7S2 192 10 200H0Z'/%3E%3C/svg%3E");-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;-webkit-mask-size:var(--hb-wave) calc(var(--hb-h) * 2);-webkit-mask-size:var(--hb-wave) calc(var(--hb-h) * 2);mask-size:var(--hb-wave) calc(var(--hb-h) * 2);-webkit-mask-position-x:calc(-1 * var(--hb-wave) + var(--hb-p) * (var(--hb-w) + var(--hb-wave)));mask-position-x:calc(-1 * var(--hb-wave) + var(--hb-p) * (var(--hb-w) + var(--hb-wave)));-webkit-mask-position-y:calc(-1 * var(--hb-p) * var(--hb-cycles) * var(--hb-h));mask-position-y:calc(-1 * var(--hb-p) * var(--hb-cycles) * var(--hb-h));place-items:center;display:grid;position:absolute;inset:0}.hold-button[data-direction=up] .hold-button__crest{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V10C12 2 38 2 50 10S88 18 100 10S138 2 150 10S188 18 200 10V20Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V10C12 2 38 2 50 10S88 18 100 10S138 2 150 10S188 18 200 10V20Z'/%3E%3C/svg%3E");-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:calc(var(--hb-w) * 2) var(--hb-wave);-webkit-mask-size:calc(var(--hb-w) * 2) var(--hb-wave);mask-size:calc(var(--hb-w) * 2) var(--hb-wave);-webkit-mask-position-x:calc(-1 * var(--hb-p) * var(--hb-cycles) * var(--hb-w));mask-position-x:calc(-1 * var(--hb-p) * var(--hb-cycles) * var(--hb-w));-webkit-mask-position-y:calc(var(--hb-h) - var(--hb-p) * (var(--hb-h) + var(--hb-wave)));mask-position-y:calc(var(--hb-h) - var(--hb-p) * (var(--hb-h) + var(--hb-wave)))}.hold-button__label--fill{z-index:auto}.hold-button__sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-contrast:more){.hold-button{outline:1px solid var(--hb-text)}}@media (prefers-reduced-motion:reduce){.hold-button{transition:background-color .16s ease, box-shadow var(--hb-release) ease;transform:none!important}.hold-button__fill,.hold-button[data-direction=up] .hold-button__fill{clip-path:inset(0);opacity:0;transition:opacity var(--hb-release) ease}.hold-button__crest{display:none}.hold-button[data-phase=holding] .hold-button__fill,.hold-button[data-phase=done] .hold-button__fill{opacity:1;transition:opacity var(--hb-hold) linear}.hold-button__pulse{animation:none!important}.hold-button__label>span{transition:opacity .2s;filter:none!important}}
.specular-button{--sb-radius:18px;--sb-tint:#fff;--sb-tint-opacity:.04;--sb-blur:0px;--sb-text-color:#f5f5f5;isolation:isolate;border-radius:var(--sb-radius);font:inherit;letter-spacing:.01em;color:var(--sb-text-color);background:color-mix(in srgb, var(--sb-tint) calc(var(--sb-tint-opacity) * 100%), transparent);-webkit-backdrop-filter:blur(var(--sb-blur));backdrop-filter:blur(var(--sb-blur));cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;outline:none;justify-content:center;align-items:center;gap:.5em;margin:0;font-weight:500;line-height:1;transition:transform .25s cubic-bezier(.2,.8,.2,1);display:inline-flex;position:relative;box-shadow:0 10px 24px -14px #00000073}.specular-button:active{transform:scale(.97)}.specular-button:focus-visible{outline:2px solid color-mix(in srgb, var(--sb-text-color) 55%, transparent);outline-offset:3px}.specular-button:disabled{opacity:.5;cursor:default}.specular-button:disabled:active{transform:none}.specular-button--sm{padding:10px 20px;font-size:.875rem}.specular-button--md{padding:14px 28px;font-size:1rem}.specular-button--lg{padding:18px 38px;font-size:1.125rem}@media (max-width:639px){.specular-button{width:100%;max-width:100%}.specular-button--lg{padding:14px 18px;font-size:1rem}.specular-button__label{text-align:center;text-wrap:balance;line-height:1.25}}.specular-button__light{z-index:1;pointer-events:none;width:calc(100% + 48px);height:calc(100% + 48px);display:block;position:absolute;inset:-24px}.specular-button__label{z-index:2;align-items:center;gap:inherit;display:inline-flex;position:relative}
