:root{--black: #000000;--ash-black: #222;--white: #fafafa;--accent: var(--white)}html{overflow:hidden;background-color:var(--black)}*{margin:0;padding:0;box-sizing:border-box}.bubble{--r: 25px;--t: 15px;font-family:system-ui,sans-serif;font-size:18px;max-width:400px;padding:calc(2 * var(--r) / 3);-webkit-mask:radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,radial-gradient(50% 50%,#000 98%,#0000 101%) 0 0 / var(--r) var(--r) space padding-box;mask:radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,radial-gradient(50% 50%,#000 98%,#0000 101%) 0 0 / var(--r) var(--r) space padding-box;overflow:hidden}.left{margin-top:10px;--_d: 0%;border-left:var(--t) solid #0000;margin-right:var(--t);place-self:start;width:fit-content;position:relative;left:45px;word-wrap:break-word}.right{margin-top:10px;--_d: 100%;border-right:var(--t) solid #0000;margin-left:var(--t);place-self:end}.spacing{width:100%;height:75px}.speechbubble{height:fit-content;width:fit-content}.box{width:300px;height:300px;background:var(--black);display:grid;place-items:center}.typing{display:block;width:60px;height:20px;border-radius:20px;display:flex;justify-content:center;align-items:center}.circle{display:block;height:10px;width:10px;border-radius:50%;background-color:#8d8d8d;margin:3px}.circle.scaling{animation:typing 1s ease-in-out infinite;animation-delay:3.6s}.circle:nth-child(1){animation-delay:0ms}.circle:nth-child(2){animation-delay:333ms}.circle:nth-child(3){animation-delay:666ms}@keyframes typing{0%{transform:scale(1)}33%{transform:scale(1)}50%{transform:scale(1.4)}to{transform:scale(1)}}