/* A quiet red point and one small, friendly wink. Deliberately static. */
.dot-character{width:78px;height:78px;padding:0;border-radius:50%;filter:none;overflow:visible}.dot-character .dot-mascot,.dot-character:hover .dot-mascot,.dot-character[aria-expanded=true] .dot-mascot{display:block;width:100%;height:100%;overflow:visible;animation:none!important;transition:none!important;transform:none!important}.dot-character .dot-eyes{animation:none!important;transition:none!important;transform:none!important}
.dot-invite{left:0;right:auto;top:auto;bottom:calc(100% + 20px);width:182px;max-width:calc(100vw - 45px);padding:13px 16px;border-radius:20px 20px 20px 9px;box-shadow:0 5px 22px #0000000c;opacity:1;transform:none;transition:none;text-align:left;white-space:normal;background:var(--surface);border:1px solid var(--line);color:var(--ink);pointer-events:auto}.dot-invite::before,.dot-invite::after{content:'';position:absolute;display:block;border:1px solid var(--line);background:var(--surface);border-radius:50%}.dot-invite::before{width:11px;height:11px;left:26px;bottom:-17px}.dot-invite::after{width:5px;height:5px;left:23px;bottom:-27px}.dot-invite strong{display:block;font-size:16px;line-height:1.2;margin-bottom:5px}.dot-invite>span{font-size:14px;line-height:1.3}.dot-character[aria-expanded=true] .dot-invite{opacity:0;pointer-events:none}.dot-companion:not(.is-introducing) .dot-invite{opacity:0;pointer-events:none}.dot-companion:not(.is-introducing) .dot-character:hover .dot-invite,.dot-companion:not(.is-introducing) .dot-character:focus-visible .dot-invite{opacity:1;pointer-events:auto}.dot-companion:not(.is-introducing) .dot-character[aria-expanded=true] .dot-invite{opacity:0;pointer-events:none}.dotip-bubble{max-height:calc(100svh - 145px)}
@media(max-width:760px){.dot-character{width:68px;height:68px}.dot-invite{left:0;top:auto;bottom:calc(100% + 18px);width:170px;padding:11px 14px;max-width:calc(100vw - 40px)}.dot-invite strong{font-size:15px}.dot-invite>span{font-size:13px}}

/* DOT colour variant of the standalone green example. */
.dot-character{--size:78px;--lime:#f16666;--emerald:#e32942;--turquoise:#be1e2d;width:var(--size);height:var(--size);border-radius:50%;background:transparent;box-shadow:none}.dot-character .mini-lime{stop-color:var(--lime)}.dot-character .mini-mid{stop-color:var(--emerald)}.dot-character .mini-top{stop-color:var(--turquoise)}.dot-character .mini-head,.dot-character .mini-features{animation:none;transition:none;transform-origin:center}.dot-character .mini-features{transform-box:view-box}
@media(max-width:760px){.dot-character{--size:68px}}
/* Short, silent facial expressions; the body never jumps or changes shape. */
[data-mini-dot] .mini-eye-pair{transform-box:view-box;transform-origin:50px 43px;transition:transform 90ms ease-out}
[data-mini-dot][data-blink] .mini-eye-pair{transform:scaleY(.08)}
[data-mini-dot] .mini-mouth-rest{transform-box:view-box;transform-origin:51px 58px;transition:transform .28s ease,opacity .18s ease}
[data-mini-dot] .mini-mouth-curious{opacity:0;transition:opacity .18s ease}
[data-mini-dot][data-expression=smile] .mini-mouth-rest{transform:scale(1.18,1.2) rotate(-3deg)}
[data-mini-dot][data-expression=curious] .mini-mouth-rest{opacity:0}
[data-mini-dot][data-expression=curious] .mini-mouth-curious{opacity:1}
@media(prefers-reduced-motion:reduce){[data-mini-dot] .mini-eye-pair,[data-mini-dot] .mini-mouth-rest,[data-mini-dot] .mini-mouth-curious{transition:none!important}}

/* A softer red, an open expression and quiet feedback. */
.dot-character{--lime:#f56470;--emerald:#ed3a51;--turquoise:#be1e2d;filter:drop-shadow(0 5px 12px #be1e2d20)}
.dot-character:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.dot-character .mini-cheeks{transition:opacity .25s ease}
.dot-character[data-expression=smile] .mini-cheeks{opacity:.5}
@media(prefers-reduced-motion:reduce){.dot-character .mini-cheeks{transition:none}}