.hello{display:none}.hello[data-on]{z-index:300;background-color:var(--bg);background-image:var(--bg-texture);color:var(--fg);cursor:default;-webkit-tap-highlight-color:transparent;animation:hello-out var(--exit,.4s) var(--ease-out) calc(var(--n,1) * var(--per,.35s)) forwards;background-size:22px 22px;place-items:center;display:grid;position:fixed;inset:0}.hello[data-on][data-out]{animation:hello-out .26s var(--ease-out) forwards}.hello__card{justify-items:center;gap:18px;padding:24px;display:grid}.hello__avatar{background:var(--surface);width:64px;height:64px;box-shadow:0 0 0 3px var(--bg), 0 0 0 4px var(--line-strong), var(--sh-2);animation:hello-pop .52s var(--ease-out) both;border-radius:50%;display:block;overflow:hidden}.hello__avatar img{object-fit:cover;width:100%;height:100%;display:block}.hello__words{font:400 clamp(36px, 7vw, 56px) / 1.15 var(--ff-serif);letter-spacing:-.01em;text-align:center;margin:0;display:grid}.hello__word{white-space:nowrap;opacity:0;animation:hello-word var(--per,.35s) var(--ease-out) calc(var(--i,0) * var(--per,.35s)) both;grid-area:1/1}.hello__word--last{animation-name:hello-word-last}@keyframes hello-word{0%{opacity:0;transform:translateY(12px)scale(.98)}30%,72%{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}@keyframes hello-word-last{0%{opacity:0;transform:translateY(12px)scale(.98)}30%,to{opacity:1;transform:none}}@keyframes hello-pop{0%{opacity:0;transform:scale(.9)}}@keyframes hello-out{to{opacity:0;visibility:hidden}}