.bb8-wrapper{display:inline-block}.bb8-toggle{--toggle-size:16px;--bb8-diameter:4.375em;--radius:99em;--transition:0.4s;--accent:#de7d2f;--bb8-bg:#fff}.bb8-toggle,.bb8-toggle *,.bb8-toggle :after,.bb8-toggle :before{box-sizing:border-box}.bb8-toggle{cursor:pointer;font-size:var(--toggle-size)}.bb8-toggle__checkbox{appearance:none;display:none}.bb8-toggle__container{width:var(--bb8-diameter);height:calc(var(--bb8-diameter) + 1.688em);background:transparent;position:relative;transition:var(--transition)}.bb8-toggle__container.listening .bb8{filter:drop-shadow(0 0 15px rgba(59,130,246,.6)) drop-shadow(0 0 30px rgba(59,130,246,.4));animation:listening-pulse 1.5s ease-in-out infinite}.bb8-toggle__container.speaking .bb8{filter:drop-shadow(0 0 15px rgba(168,85,247,.6)) drop-shadow(0 0 30px rgba(168,85,247,.4));animation:speaking-glow 1s ease-in-out infinite}@keyframes listening-pulse{0%,to{filter:drop-shadow(0 0 15px rgba(59,130,246,.6)) drop-shadow(0 0 30px rgba(59,130,246,.4))}50%{filter:drop-shadow(0 0 25px rgba(59,130,246,.8)) drop-shadow(0 0 50px rgba(59,130,246,.6))}}@keyframes speaking-glow{0%,to{filter:drop-shadow(0 0 15px rgba(168,85,247,.6)) drop-shadow(0 0 30px rgba(168,85,247,.4))}50%{filter:drop-shadow(0 0 20px rgba(168,85,247,.7)) drop-shadow(0 0 40px rgba(168,85,247,.5))}}.bb8{display:flex;flex-direction:column;align-items:center}.bb8,.bb8__head-container{position:relative;transition:var(--transition);z-index:2}.bb8__head-container{transform-origin:1.25em 3.75em}.bb8__head{overflow:hidden;margin-bottom:-.188em;width:2.5em;height:1.688em;background:linear-gradient(transparent .063em,dimgray .063em .313em,transparent .313em .375em,var(--accent) .375em .5em,transparent .5em 1.313em,silver 1.313em 1.438em,transparent 1.438em),linear-gradient(45deg,transparent .188em,var(--bb8-bg) .188em 1.25em,transparent 1.25em),linear-gradient(-45deg,transparent .188em,var(--bb8-bg) .188em 1.25em,transparent 1.25em),linear-gradient(var(--bb8-bg) 1.25em,transparent 1.25em);border-radius:var(--radius) var(--radius) 0 0;position:relative;z-index:1;filter:drop-shadow(0 .063em .125em gray)}.bb8__head:before{width:.563em;height:.563em;background:radial-gradient(.125em circle at .25em .375em,red,transparent),radial-gradient(.063em circle at .375em .188em,var(--bb8-bg) 50%,transparent 100%),linear-gradient(45deg,#000 .188em,dimgray .313em .375em,#000 .5em);border-radius:var(--radius);top:.413em;left:50%;transform:translate(-50%);box-shadow:0 0 0 .089em lightgray,.563em .281em 0 -.148em,.563em .281em 0 -.1em var(--bb8-bg),.563em .281em 0 -.063em;z-index:1}.bb8__head:after,.bb8__head:before{content:"";position:absolute;transition:var(--transition)}.bb8__head:after{bottom:.375em;left:0;width:100%;height:.188em;background:linear-gradient(to right,var(--accent) .125em,transparent .125em .188em,var(--accent) .188em .313em,transparent .313em .375em,var(--accent) .375em .938em,transparent .938em 1em,var(--accent) 1em 1.125em,transparent 1.125em 1.875em,var(--accent) 1.875em 2em,transparent 2em 2.063em,var(--accent) 2.063em 2.25em,transparent 2.25em 2.313em,var(--accent) 2.313em 2.375em,transparent 2.375em 2.438em,var(--accent) 2.438em)}.bb8__antenna{position:absolute;transform:translateY(-90%);width:.059em;border-radius:var(--radius) var(--radius) 0 0;transition:var(--transition)}.bb8__antenna:first-child{height:.938em;right:.938em;background:linear-gradient(#000 .188em,silver 0)}.bb8__antenna:nth-child(2){height:.375em;left:50%;transform:translate(-50%,-90%);background:silver}.bb8__body{width:4.375em;height:4.375em;background:var(--bb8-bg);border-radius:var(--radius);position:relative;overflow:hidden;transition:var(--transition);z-index:1;transform:rotate(45deg);filter:drop-shadow(0 .063em .125em gray);background:linear-gradient(-90deg,var(--bb8-bg) 4%,var(--accent) 4% 10%,transparent 10% 90%,var(--accent) 90% 96%,var(--bb8-bg) 96%),linear-gradient(var(--bb8-bg) 4%,var(--accent) 4% 10%,transparent 10% 90%,var(--accent) 90% 96%,var(--bb8-bg) 96%),linear-gradient(to right,transparent 2.156em,silver 2.156em 2.219em,transparent 2.188em),linear-gradient(transparent 2.156em,silver 2.156em 2.219em,transparent 2.188em);background-color:var(--bb8-bg)}.bb8__body:after{bottom:1.5em;left:.563em;width:.188em;height:.188em;background:rgb(236,236,236);color:rgb(236,236,236);box-shadow:.875em .938em,0 -1.25em,.875em -2.125em,2.125em -2.125em,3.063em -1.25em,3.063em 0,2.125em .938em}.bb8__body:after,.bb8__body:before{content:"";position:absolute;border-radius:50%}.bb8__body:before{width:2.625em;height:2.625em;z-index:.1;overflow:hidden;top:50%;left:50%;transform:translate(-50%,-50%);border:.313em solid var(--accent);background:radial-gradient(1em circle at center,rgb(236,236,236) 50%,transparent 51%),radial-gradient(1.25em circle at center,var(--bb8-bg) 50%,transparent 51%),linear-gradient(-90deg,transparent 42%,var(--accent) 42% 58%,transparent 58%),linear-gradient(var(--bb8-bg) 42%,var(--accent) 42% 58%,var(--bb8-bg) 58%)}.artificial__hidden,.bb8-toggle__scenery{display:none}.bb8-toggle:hover .bb8__head-container{animation:bb8-look .6s ease-in-out}@keyframes bb8-look{0%,to{transform:rotate(0deg)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}.bb8-toggle:hover .bb8__body{animation:bb8-wiggle .5s ease-in-out}@keyframes bb8-wiggle{0%,to{transform:rotate(45deg)}25%{transform:rotate(50deg)}75%{transform:rotate(40deg)}}.bb8-toggle__checkbox:checked+.bb8-toggle__container .bb8__body{transform:rotate(225deg)}.bb8-toggle__checkbox:active+.bb8-toggle__container .bb8__head-container{transform:rotate(15deg)}.bb8-toggle__container.rolling .bb8{animation:bb8-roll .8s ease-in-out}.bb8-toggle__container.rolling .bb8__body{animation:bb8-body-roll .8s ease-in-out}.bb8-toggle__container.rolling .bb8__head-container{animation:bb8-head-bounce .8s ease-in-out}@keyframes bb8-roll{0%{transform:translateX(0)}25%{transform:translateX(10px)}50%{transform:translateX(0)}75%{transform:translateX(-10px)}to{transform:translateX(0)}}@keyframes bb8-body-roll{0%{transform:rotate(45deg)}25%{transform:rotate(135deg)}50%{transform:rotate(225deg)}75%{transform:rotate(315deg)}to{transform:rotate(405deg)}}@keyframes bb8-head-bounce{0%,to{transform:rotate(0deg) translateY(0)}15%{transform:rotate(-15deg) translateY(-2px)}30%{transform:rotate(10deg) translateY(0)}45%{transform:rotate(-10deg) translateY(-1px)}60%{transform:rotate(8deg) translateY(0)}75%{transform:rotate(-5deg) translateY(-1px)}90%{transform:rotate(3deg) translateY(0)}}