.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,.32s) var(--ease-out) var(--out-at,1.8s) forwards;background-size:22px 22px;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.hello[data-on][data-out]{animation:hello-skip .26s var(--ease-out) forwards}.hello__words{font:400 clamp(40px, 8vw, 56px) / 1.15 var(--ff-serif);letter-spacing:-.01em;text-align:center;animation:hello-drift var(--exit,.32s) cubic-bezier(.5, 0, .75, 0) var(--out-at,1.8s) forwards;margin:0;display:grid}.hello[data-out] .hello__words{animation:.26s cubic-bezier(.5,0,.75,0) forwards hello-drift-skip}.hello__word{font-size:calc(var(--fit,1) * 1em);text-wrap:balance;opacity:0;animation:hello-word var(--dur,.35s) linear var(--at,0s) both;grid-area:1/1;align-self:center}.hello__word--last{animation-name:hello-word-last}@keyframes hello-word{0%{opacity:0;animation-timing-function:cubic-bezier(.22,1,.36,1);transform:translateY(.3em)}28%{opacity:1;transform:none}72%{opacity:1;animation-timing-function:cubic-bezier(.5,0,.75,0);transform:none}to{opacity:0;transform:translateY(-.3em)}}@keyframes hello-word-last{0%{opacity:0;animation-timing-function:cubic-bezier(.22,1,.36,1);transform:translateY(.3em)}28%,to{opacity:1;transform:none}}@keyframes hello-drift{to{transform:translateY(-10px)}}@keyframes hello-drift-skip{to{transform:translateY(-10px)}}@keyframes hello-out{to{opacity:0;visibility:hidden}}@keyframes hello-skip{to{opacity:0;visibility:hidden}}