/* Tiny-h mascots sit on a layer the exact size of the demo canvas, so they stay on its edges at every width. */
.tiny-stage{position:absolute;left:0;right:0;bottom:0;aspect-ratio:1440/880;pointer-events:none;z-index:3}
.tiny{position:absolute;display:block;overflow:visible;height:auto}
.tiny-ink,.tiny-eye{fill:#292929}
/* The art's canvas-edge line (136 of 204) lands on the canvas top: head behind it, hands over it. */
.tiny-peek{right:.25rem;top:0;width:9.25rem;transform:translateY(-66.67%)}
/* The side Tiny's art is cut at 80 of 96: that line sits on the canvas's left edge, with the tail curling round in front. */
.tiny-friend{right:calc(100% - .49625rem);top:60.3%;width:2.97688rem}
html[data-theme=dark] .tiny{filter:drop-shadow(0 .0625rem .0625rem #ffffff80)}
@media(max-width:83.125em){.tiny-friend{display:none}}
@media(max-width:43.75em){.tiny-peek{right:.5rem;width:6.25rem}}
@media(prefers-reduced-motion:no-preference){.tiny-stage{animation:hb-demo-intro 600ms var(--motion-ease) 840ms backwards}}
/* The chat Tiny and the closing five. Their motion is CSS and only runs while they are on screen (.tm-on). */
.tm{display:block;overflow:visible}
.tm .tm-lid,.tm .tm-arc path,.tm .tm-glyph{fill:#2c2c2c}
.tm .tm-arc{display:none}
.tm .tm-gaze{transform:translate(calc(var(--gx,0)*1px),calc(var(--gy,0)*1px));transition:transform .2s ease-out}
.tm .tm-lid,.tm .tm-slot,.tm .tm-acc{transform-box:fill-box;transform-origin:center}
.tm-on .tm-float{animation:tm-bob var(--bob,3.8s) ease-in-out infinite alternate}
.tm-on .tm-leg{animation:tm-sway var(--sway,3.4s) ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.24s)}
.tm-on .tm-lid{animation:tm-blink var(--blink,5.2s) infinite;animation-delay:var(--blink-at,-1s)}
@keyframes tm-bob{from{transform:translateY(var(--bob-a,5px))}to{transform:translateY(calc(var(--bob-a,5px)*-1))}}
@keyframes tm-sway{from{transform:translateX(calc(var(--amp)*-1px))}to{transform:translateX(calc(var(--amp)*1px))}}
@keyframes tm-blink{0%,97.2%,100%{transform:scaleY(1)}98.6%{transform:scaleY(.1)}}
/* Chat Tiny: data-face picks which eyes show; a quick blink (.tm-swap) covers each change. */
.tm-hi{--bob-a:4px;--blink:4.6s}
.tm-hi .tm-slot{transition:transform 80ms ease-in}
.tm-hi[data-face=greet] .tm-r .tm-open,.tm-hi[data-face=happy] .tm-open{display:none}
.tm-hi[data-face=greet] .tm-r .tm-arc,.tm-hi[data-face=happy] .tm-arc{display:inline}
.tm-hi[data-face=think] .tm-slot{transform:scaleY(.72)}
.tm-hi.tm-swap .tm-slot{transform:scaleY(.1)}
/* Its "Hi" floats in, stays a while, and drifts off. */
.tm-hi.tm-live .tm-bubble{opacity:0}
.tm-hi.tm-live.tm-say .tm-bubble{animation:tm-say 4.8s cubic-bezier(.22,1,.36,1) both;transform-origin:10% 95%}
@keyframes tm-say{0%{opacity:0;transform:translate(-12px,16px) scale(.5)}14%{opacity:1;transform:translate(0,0) scale(1)}48%{opacity:1;transform:translate(1px,-4px) scale(1)}80%{opacity:1;transform:translate(0,-1px) scale(1)}100%{opacity:0;transform:translate(4px,-18px) scale(.92)}}
/* Closing five: each has its own small habit. */
.tm-cl0{--gx:3;--gy:4;--blink:5.6s;--blink-at:-2.2s;--bob-a:1.5px;--bob:2.6s}
.tm-cl1{--sway:2.6s}.tm-cl2{--gx:-3;--gy:-4.5;--blink:6.1s;--blink-at:-3.4s;--bob:4.4s}.tm-cl3{--sway:3s}.tm-cl4{--blink:4.9s;--blink-at:-.6s;--bob:4.1s}
.tm-on .tm-code{animation:tm-code 4.4s ease-out infinite;animation-delay:calc(var(--i)*.22s)}
@keyframes tm-code{0%,8%{opacity:0;transform:translateY(7px) scale(.7)}20%{opacity:1;transform:translateY(0) scale(1)}62%{opacity:1;transform:translateY(-2px) scale(1)}80%,100%{opacity:0;transform:translateY(-9px) scale(.9)}}
.tm-on.tm-cl1 .tm-float{animation:tm-laugh 2.8s ease-in-out infinite}
@keyframes tm-laugh{0%,46%,100%{transform:translateY(0)}6%,18%,30%{transform:translateY(-9px)}12%,24%,38%{transform:translateY(3px)}}
.tm-on .tm-line{animation:tm-line 2.8s ease-in-out infinite;animation-delay:calc(var(--i)*.06s)}
@keyframes tm-line{0%,46%,100%{opacity:0;transform:translateY(-5px)}8%,34%{opacity:1;transform:translateY(0)}21%{opacity:.5;transform:translateY(2px)}}
.tm-on .tm-dot{animation:tm-dot 5s ease-in-out infinite;animation-delay:calc(var(--i)*.42s)}
@keyframes tm-dot{0%,6%{opacity:0;transform:translate(4px,8px) scale(.3)}18%{opacity:1;transform:translate(0,0) scale(1)}60%{opacity:1;transform:translate(0,-2px) scale(1)}74%,100%{opacity:0;transform:translate(-2px,-8px) scale(.8)}}
.tm-on.tm-cl3 .tm-float{animation:tm-happy 3.1s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes tm-happy{from{transform:translateY(5px) rotate(-4deg)}to{transform:translateY(-7px) rotate(4deg)}}
.tm-on.tm-cl4 .tm-bubble{animation:tm-hello 6.4s cubic-bezier(.22,1,.36,1) infinite;transform-origin:10% 95%}
@keyframes tm-hello{0%,6%{opacity:0;transform:translate(-8px,10px) scale(.5)}16%{opacity:1;transform:translate(0,0) scale(1)}40%{opacity:1;transform:translate(1px,-3px) scale(1)}62%{opacity:1;transform:translate(0,0) scale(1)}74%,100%{opacity:0;transform:translate(3px,-12px) scale(.9)}}
/* The side Tiny's three dots come out once, linger, and go. */
.tiny-dot{transform-box:fill-box;transform-origin:center}
.tiny-friend.dots-wait .tiny-dot,.tiny-friend.dots-done .tiny-dot{opacity:0}
.tiny-friend.dots-go .tiny-dot{animation:tiny-dot 4.6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i)*150ms)}
@keyframes tiny-dot{0%{opacity:0;transform:translate(calc(var(--dx)*1px),calc(var(--dy)*1px)) scale(.2)}20%{opacity:1;transform:translate(0,0) scale(1)}68%{opacity:1;transform:translate(0,-4px) scale(1)}100%{opacity:0;transform:translate(calc(var(--dx)*-.4px),calc(var(--dy)*-.4px - 10px)) scale(.5)}}

@media(prefers-reduced-motion:reduce){.tiny-stage,.tm *{animation:none!important;transition:none!important}.tm .tm-gaze{transform:none}.tm-hi.tm-live .tm-bubble{opacity:1}}