.pattern-preview.typing-dots-preview{display:grid;place-items:center;height:168px;padding:18px;overflow:hidden;isolation:isolate}.pattern-preview.typing-dots-preview.pattern-preview--inspector{height:auto;min-height:220px;padding:28px}.typing-dots{display:inline-flex;align-items:center;justify-content:center;gap:.34rem;line-height:1;vertical-align:middle}.typing-dots--row-wave{height:calc(var(--typing-dot-size) + var(--typing-lift) + 2px)}.typing-dots--column-wave{flex-direction:column;align-items:flex-start;gap:6px;width:calc(var(--typing-dot-size) + var(--typing-side) + 8px);min-height:54px}.typing-dots--scale-pulse{height:22px}.typing-dots__dot{display:block;width:var(--typing-dot-size);height:var(--typing-dot-size);border-radius:999px;background:var(--typing-accent);box-shadow:0 0 16px color-mix(in srgb,var(--typing-accent) 34%,transparent);animation-duration:var(--typing-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-delay:calc(var(--typing-index) * var(--typing-delay));transform:none;transform-origin:center;will-change:transform,opacity}.typing-dots--row-wave .typing-dots__dot{animation-name:typingDotsRowWave}.typing-dots--column-wave .typing-dots__dot{animation-name:typingDotsColumnWave}.typing-dots--scale-pulse .typing-dots__dot{animation-name:typingDotsScalePulse}.typing-dots-demo{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:168px;min-height:56px;padding:12px 16px;border:1px solid color-mix(in srgb,var(--typing-accent) 28%,transparent);border-radius:14px;color:var(--typing-text);background:var(--typing-surface)}.typing-dots-demo--column-wave{min-width:154px;min-height:84px}.typing-dots-demo--scale-pulse{min-width:158px}.typing-dots-demo__label{min-width:64px;font-size:.88rem;font-weight:800;line-height:1;white-space:nowrap}@keyframes typingDotsRowWave{0%,80%,to{opacity:.45;transform:translateY(0) scale(.94)}40%{opacity:1;transform:translateY(calc(var(--typing-lift) * -1)) scale(1)}}@keyframes typingDotsColumnWave{0%,80%,to{opacity:.45;transform:translateX(0) scale(.94)}40%{opacity:1;transform:translateX(var(--typing-side)) scale(1)}}@keyframes typingDotsScalePulse{0%,80%,to{opacity:.45;transform:scale(.9)}40%{opacity:1;transform:scale(var(--typing-scale))}}@media (prefers-reduced-motion:reduce){.typing-dots__dot{animation:none;opacity:.72;transform:none}}