:root{--dur-slow:.35s;--dur-const:2;--dur-reg:calc(var(--dur-slow) / var(--dur-const));--dur-med:calc(var(--dur-reg) / var(--dur-const));--dur-fast:calc(var(--dur-med) / var(--dur-const));--item-dimension:.2em;--initState:translate3d(-10%, 30%, 0) scale(2.5);--initShadow:inset 0 .32em 2em oklch(72.0433% .0199573 17.6247/.4), -1em -.52em 4.5em .1em oklch(0% 0 0/.2), 0 1em 3em oklch(0% 0 0/.1);--animation:"";--equalizer:equalizer 1.5s ease-in-out forwards;--levitate:levitate 1.4s ease-in-out 4 forwards}body{background:oklch(52% 0 0/.12);justify-content:center;align-items:center;height:100vh;margin:0;display:flex}.container{width:5.1em;height:5.1em;box-shadow:var(--initShadow);transform:var(--initState);transform-style:preserve-3d;will-change:transform, box-shadow;contain:layout style paint;background:oklch(100% 5.96046e-8 90/.9);border-radius:50%;justify-content:center;align-items:center;margin:0;padding:0;font-size:3vmin;transition:transform .4s cubic-bezier(.12,.99,.96,.76);display:flex}.item{height:var(--item-dimension);width:var(--item-dimension);background:oklch(45.2014% .313214 264.052);border-radius:50%;margin:.244em;padding:.051em;list-style:none;transition:all .3s;animation:1.4s ease-in-out infinite forwards levitate}.item:first-child{animation-delay:var(--dur-fast)}.item:nth-child(2){animation-delay:var(--dur-med);background:oklch(62.7955% .257683 29.2339)}.item:nth-child(3){animation-delay:var(--dur-reg);background:oklch(79.2689% .171026 70.6699)}.item:nth-child(4){animation-delay:var(--dur-slow);background:oklch(51.9752% .176858 142.495)}.equalizer{animation:1.5s ease-in-out forwards equalizer,1.5s ease-in-out infinite forwards levitate}.talkState{--initState:translate3d(calc(50vw - 24vmin), -10em, 0) scale(1.1)}.reset-btn{color:oklch(32.3853% .012297 285.693/.75);cursor:pointer;opacity:.5;background:0 0;border:none;font-family:sans-serif;font-weight:700;transition:opacity .2s;position:fixed;bottom:4cqi;right:4cqi;&:hover{opacity:1}}@keyframes levitate{0%,to{transform:translate(0)}50%{transform:translateY(.57em)}}@keyframes box-dot--blue{10%{transform:translate(0)}20%{transform:translate(0)}30%{transform:translate()}40%{transform:translate()}50%{transform:translate()}60%{transform:translate()}70%{transform:translate()}80%{transform:translate()}90%{transform:translate()}to{transform:translate()}}@keyframes box-dot--red{10%{transform:translate(0)}20%{transform:translate(0)}30%{transform:translate()}40%{transform:translate()}50%{transform:translate()}60%{transform:translate()}70%{transform:translate()}80%{transform:translate()}90%{transform:translate()}to{transform:translate()}}@keyframes box-dot--orange{10%{transform:translate(0)}20%{transform:translate(-.1em,-.15em)}30%{transform:translate()}40%{transform:translate()}50%{transform:translate()}60%{transform:translate()}70%{transform:translate()}80%{transform:translate()}90%{transform:translate()}to{transform:translate()}}@keyframes box-dot--green{10%{transform:translate(-.1em,.16em)}20%{transform:translate(-.3em,.7em)}30%{transform:translate()}40%{transform:translate()}50%{transform:translate()}60%{transform:translate()}70%{transform:translate()}80%{transform:translate()}90%{transform:translate()}to{transform:translate()}}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes pulse{0%,to{transform:scale(.3)}50%{transform:scale(1.2)}}@keyframes colorShift{0%{background:oklch(81.1388% .0864455 31.4632/.4)}50%{background:oklch(79.2689% .171026 70.6699)}to{background:oklch(91.9955% .0910732 98.3724/.5)}}@keyframes equalizer{0%{height:3em}10%{height:2.72em}20%{height:.2em}30%{height:1.7em}40%{height:2em}50%{height:3.2em}60%{height:.5em}70%,90%{height:1.5em}80%{height:2.5em}to{height:var(--item-dimension)}}