.htl{--htl-edge:color-mix(in oklab, currentColor 30%, var(--htl-accent));white-space:nowrap;align-items:center;min-width:0;max-width:100%;line-height:1.6;display:inline-flex;position:relative}.htl>*{position:relative}.htl-value{text-overflow:ellipsis;letter-spacing:.02em;min-width:0;font-weight:700;overflow:hidden}.htl-icon svg{transform-origin:50%;width:.95em;height:.95em;animation:2.4s ease-in-out infinite htl-shake}.htl[data-htl-look=pill]{background:color-mix(in oklab, var(--htl-accent) 14%, transparent);border:1px solid color-mix(in oklab, var(--htl-edge) 60%, transparent);border-radius:999px;gap:.5rem;padding:.15rem .75rem;overflow:hidden}.htl[data-htl-look=pill]:has(.htl-icon){padding-inline-end:.2rem}.htl[data-htl-look=pill]:before{content:"";pointer-events:none;background:linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--htl-accent) 30%, transparent) 50%, transparent 70%);animation:4.8s ease-in-out infinite htl-sweep;position:absolute;inset:0;transform:translate(-120%)}.htl[data-htl-look=pill] .htl-icon{background:var(--htl-accent);width:1.6em;height:1.6em;color:var(--htl-on);box-shadow:0 0 0 1px color-mix(in oklab, currentColor 25%, transparent);border-radius:50%;flex:none;place-items:center;display:grid;position:relative}.htl[data-htl-look=pill] .htl-icon:after{content:"";border:2px solid var(--htl-edge);border-radius:50%;animation:2.4s ease-out infinite htl-ring;position:absolute;inset:0}.htl[data-htl-look=tag]{border:1px solid var(--htl-edge);border-radius:.5rem;align-items:stretch;overflow:hidden}.htl[data-htl-look=tag] .htl-head{background:var(--htl-accent);color:var(--htl-on);flex:none;align-items:center;gap:.35rem;padding:.15rem .6rem;font-weight:700;display:flex}.htl[data-htl-look=tag] .htl-body{background:color-mix(in oklab, var(--htl-accent) 12%, transparent);align-items:center;gap:.5rem;min-width:0;padding:.15rem .65rem;display:flex}.htl-dot{background:#22c55e;border-radius:50%;flex:none;width:.45rem;height:.45rem;animation:1.6s ease-out infinite htl-live}.htl-wrap{flex-wrap:wrap;align-items:center;gap:.4rem .75rem;min-width:0;max-width:100%;display:inline-flex}.htl-status{white-space:nowrap;align-items:center;gap:.45rem;font-weight:600;display:inline-flex}.htl-status .htl-dot{animation:none;position:relative;box-shadow:0 0 0 2px #22c55e40}.htl-status .htl-dot:after{content:"";background:inherit;border-radius:50%;animation:2.4s cubic-bezier(.16,1,.3,1) infinite htl-beacon;position:absolute;inset:0}.htl[data-htl-look=call]{--htl-call-bg:var(--htl-accent);--htl-call-fg:var(--htl-on);--htl-call-hbg:color-mix(in oklab, var(--htl-accent) 84%, var(--htl-on));--htl-call-hfg:var(--htl-on);flex-wrap:wrap;gap:.4rem}.htl[data-htl-look=call][data-button-colors]{--htl-call-bg:var(--bc-bg);--htl-call-fg:var(--bc-fg);--htl-call-hbg:var(--bc-hbg);--htl-call-hfg:var(--bc-hfg)}.htl-call{letter-spacing:.03em;background:var(--htl-call-bg);color:var(--htl-call-fg);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--htl-call-fg) 22%, transparent), 0 6px 16px -10px var(--htl-call-bg);-webkit-tap-highlight-color:transparent;border-radius:999px;align-items:center;gap:.45rem;padding:.2rem .7rem .2rem .2rem;font-weight:700;transition:background-color .2s cubic-bezier(.16,1,.3,1),color .2s cubic-bezier(.16,1,.3,1),transform .1s ease-out;display:inline-flex}.htl-call:not(:has(.htl-icon)){padding-inline:.8rem}.htl-call:hover{background:var(--htl-call-hbg);color:var(--htl-call-hfg)}.htl-call:active{transform:scale(.96)}.htl-call:focus-visible{outline:2px solid var(--htl-edge);outline-offset:2px}.htl-call .htl-icon{background:var(--htl-call-fg);width:1.65em;height:1.65em;color:var(--htl-call-bg);border-radius:50%;flex:none;place-items:center;display:grid}.htl-call:hover .htl-icon{background:var(--htl-call-hfg);color:var(--htl-call-hbg)}.htl-call .htl-icon svg{animation:none}.htl[data-htl-call-motion] .htl-call .htl-icon svg{animation:2.4s ease-in-out infinite htl-shake}.htl[data-htl-call-motion] .htl-call:nth-child(2) .htl-icon svg{animation-delay:.4s}.htl[data-htl-call-motion] .htl-call:nth-child(3) .htl-icon svg{animation-delay:.8s}.htl-call:hover .htl-icon svg{animation:.7s cubic-bezier(.36,.07,.19,.97) htl-ring-once}@keyframes htl-ring-once{15%{transform:rotate(20deg)}35%{transform:rotate(-15deg)}55%{transform:rotate(9deg)}75%{transform:rotate(-4deg)}}@keyframes htl-beacon{0%{opacity:.7;transform:scale(1)}70%,to{opacity:0;transform:scale(2.8)}}@keyframes htl-ring{0%{opacity:.8;transform:scale(1)}70%,to{opacity:0;transform:scale(1.9)}}@keyframes htl-shake{0%,40%,to{transform:rotate(0)}5%,15%,25%{transform:rotate(-16deg)}10%,20%,30%{transform:rotate(16deg)}}@keyframes htl-sweep{0%,55%{transform:translate(-120%)}to{transform:translate(120%)}}@keyframes htl-live{0%{box-shadow:0 0 #22c55eb3}to{box-shadow:0 0 0 .45rem #22c55e00}}@media (prefers-reduced-motion:reduce){.htl:before,.htl-icon svg,.htl-icon:after,.htl-dot,.htl-dot:after,.htl-call:hover .htl-icon svg,.htl[data-htl-call-motion] .htl-call .htl-icon svg{animation:none}}