.hero h1.meet{font-size:clamp(60px,10vw,128px);line-height:1;letter-spacing:-.035em;max-width:none;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:.16em}
.sdot{position:relative;display:inline-block;width:.9em;height:.9em;flex:none;font-family:var(--sans);letter-spacing:0}
.sdot>span{display:none;position:absolute;inset:0}
.sdot[data-m="crew"] .crew,.sdot[data-m="hello"] .say,.sdot[data-m="typing"] .typ{display:block}
/* crew */
.crew .ring{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--org);box-shadow:0 0 0 .035em var(--bg),0 0 0 .06em var(--org),0 .1em .2em -.08em rgba(236,80,34,.5)}
.crew img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateY(100%);transition:transform .5s cubic-bezier(.6,0,.2,1)}
.crew img.in{transform:none}.crew img.out{transform:translateY(-100%)}
.crew i{top:.04em;bottom:auto!important}.crew i,.say i{position:absolute;right:.02em;bottom:.04em;width:.17em;height:.17em;border-radius:50%;background:#2BB673;border:.03em solid var(--bg);z-index:2}
.crew em{position:absolute;left:50%;bottom:-.16em;transform:translateX(-50%);font:500 .14em/1 var(--mono);font-style:normal;color:#fff;background:var(--ink);border-radius:99em;padding:.45em .8em;white-space:nowrap;z-index:3;transition:opacity .25s,transform .25s}
.crew em.sw{opacity:0;transform:translate(-50%,.3em)}
/* hello */
.say img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 .035em var(--bg),0 0 0 .06em var(--org);animation:nod 2.6s ease-in-out infinite}
@keyframes nod{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-6deg)}86%{transform:rotate(4deg)}}
.bub{position:absolute;left:74%;bottom:98%;font:500 .15em/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:1em 1em 1em .25em;padding:.6em .9em;white-space:nowrap;box-shadow:0 .5em 1.2em -.5em rgba(28,26,22,.3);transform-origin:0 100%;transition:transform .3s cubic-bezier(.3,1.5,.5,1),opacity .2s;z-index:3}
.bub.hide{transform:scale(.6);opacity:0}
/* typing */
.tb{position:absolute;inset:.04em;border-radius:50% 50% 50% .1em;background:radial-gradient(circle at 34% 30%,#FF7A4A,#EC5022 55%,#D2441B);box-shadow:0 .08em .2em -.06em rgba(236,80,34,.5);display:flex;align-items:center;justify-content:center;gap:.07em;animation:bob 3.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-.03em)}}
.tb i{width:.11em;height:.11em;border-radius:50%;background:#fff;animation:dotb 1.1s ease-in-out infinite;transition:transform .2s,opacity .2s}
.tb i:nth-child(2){animation-delay:.15s}.tb i:nth-child(3){animation-delay:.3s}
@keyframes dotb{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-.06em);opacity:1}}
.tb b{position:absolute;font:600 .36em/1 var(--sans);color:#fff;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.sdot.sent .tb i{animation:none;transform:scale(0);opacity:0}
.sdot.sent .tb b{transform:scale(1)}
.isw{position:fixed;left:16px;bottom:64px;z-index:90;display:flex;gap:4px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:5px;box-shadow:var(--shadow-lg);font:500 12px var(--sans)}
.isw span{padding:0 8px;color:var(--muted)}
.isw button{border:none;background:none;padding:7px 10px;border-radius:8px;font:500 12px var(--sans);color:var(--body);cursor:pointer}
.isw button.on{background:var(--ink);color:#fff}
@media(max-width:600px){.isw span{display:none}.hero h1.meet{font-size:clamp(52px,16vw,72px)}.bub{font-size:.2em}}
@media(prefers-reduced-motion:reduce){.sdot *{animation:none!important}}