@keyframes bobble{0%{transform:translateY(0)}50%{transform:translateY(-15px)}to{transform:translateY(0)}}@keyframes twinkle{0%{opacity:.5}50%{opacity:.8;filter:drop-shadow(0 0 10px rgba(255,255,255,.75))}to{opacity:.5}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes undulate{0%{transform:translate(-50%,calc(-50% - var(--border-width) / 2)) scale(1)}50%{transform:translate(-50%,calc(-50% - var(--border-width) / 2)) scale(1.15)}to{transform:translate(-50%,calc(-50% - var(--border-width) / 2)) scale(1)}}:root{--primary-color: #8e38af;--secondary-color: #12f3fd;--space-grey: #3c3c3c;--font-family: "Goldman", sans-serif}*,*:before,*:after{box-sizing:border-box;font-family:var(--font-family)}html,body,#root{margin:0;padding:0;height:100%;overflow:hidden;cursor:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23FFF" stroke="%23000" stroke-width="2" d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"></path></svg>'),auto}.btn{padding:.5em 1.5em;background-color:var(--btn-color);border:4px solid color-mix(in srgb,var(--btn-color),#555);border-radius:.1em;color:#fff;font-size:1.6em;transition:transform .2s ease-out,box-shadow .2s ease-out}.btn:hover{transform:translateY(-.4em) scale(1.1);box-shadow:0 .3em 20px 10px color-mix(in srgb,var(--btn-color) 50%,transparent)}button,.btn,a,[role=button],input,::-moz-range-thumb,::-moz-range-track{cursor:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="36" viewBox="0 0 24 24"><path fill="%23FFF" stroke="%23000" stroke-width="2" stroke-linejoin="round" d="M10 11V8.99c0-.88.59-1.64 1.44-1.86h.05A1.99 1.99 0 0 1 14 9.05V12v-2c0-.88.6-1.65 1.46-1.87h.05A1.98 1.98 0 0 1 18 10.06V13v-1.94a2 2 0 0 1 1.51-1.94h0A2 2 0 0 1 22 11.06V14c0 .6-.08 1.27-.21 1.97a7.96 7.96 0 0 1-7.55 6.48 54.98 54.98 0 0 1-4.48 0 7.96 7.96 0 0 1-7.55-6.48C2.08 15.27 2 14.59 2 14v-1.49c0-1.11.9-2.01 2.01-2.01h0a2 2 0 0 1 2.01 2.03l-.01.97v-10c0-1.1.9-2 2-2h0a2 2 0 0 1 2 2V11Z"></path></svg>'),auto!important}.background-image{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:-1}.background-image>svg{width:100%;height:100%}.background-image path{transition:fill 1s ease-out;animation:twinkle 2s infinite}.background-image.active path{fill:default}.background-image:not(.active) path{fill:hsl(255 255 255 / .4)}.background-image path:nth-child(3n+1){animation-delay:.5s}.background-image path:nth-child(3n+2){animation-delay:1s}.background-image path:nth-child(3n+3){animation-delay:1.5s}.audio-controls{position:fixed;top:20px;right:20px;z-index:1000;display:flex;align-items:center;background:#6464644d;border-radius:.25em;padding:8px 14px}.audio-controls>audio{display:none}.audio-btn{background:none;border:none;font-size:1.5rem;color:#fff;margin-right:10px;cursor:pointer;display:flex;align-items:center}.audio-btn>img{width:1.25rem}.audio-slider{width:80px;background:var(--primary-color);color:red;border-radius:.25rem;padding:.1em .25em;border:3px solid color-mix(in srgb,var(--primary-color),#555);-webkit-appearance:none;appearance:none}.audio-slider::-webkit-slider-runnable-track{height:4px;background:var(--primary-color);border-radius:2px}.audio-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:16px;width:16px;border-radius:3px;background:#fff;cursor:pointer;margin-top:-6px}.audio-slider::-moz-range-track{height:4px;background:var(--primary-color);border-radius:2px}.audio-slider::-moz-range-thumb{height:16px;width:16px;border-radius:3px;background:#fff;cursor:pointer}.speech-bubble{position:relative;background:var(--primary-color);border-radius:.4em;border:4px solid color-mix(in srgb,var(--primary-color),#555);padding:2em 2.5em;min-width:20em;max-width:min(100%,30em);animation:fadeIn .5s ease-in-out}.speech-bubble:after{content:"";position:absolute;bottom:0;right:30%;width:0;height:0;border:2.688em solid transparent;border-top-color:var(--primary-color);border-bottom:0;border-right:0;margin-left:-1.344em;margin-bottom:-2.6em}.prediction{color:#fff;font-size:1.5rem}.robot{position:absolute;bottom:0;right:0;height:20rem;animation:bobble 5s linear infinite}.speech-bubble-container{position:absolute;bottom:calc(20rem + 3em);right:3em;max-width:25%;z-index:20}.start-btn.btn{font-size:2em;color:#333;--btn-color: var(--secondary-color)}.logo{animation:bobble 4s linear infinite}.canvas-container{position:relative;margin:2.5rem auto}.drawing-canvas{position:relative;background:#000;border-radius:100%;height:min(500px,60vh);aspect-ratio:1;box-shadow:0 0 5px 5px #ffffff80;z-index:10}.canvas-outline{--border-width: 4px;position:absolute;top:50%;left:50%;width:100%;height:calc(100% - var(--border-width));border:var(--border-width) dashed var(--primary-color);border-radius:50%;animation:undulate 2s infinite}.heading{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 5px #555;color:var(--primary-color);font-family:Tektur;font-size:3.25rem}.btns-container{display:flex;gap:2rem}.submit-btn{--btn-color: var(--primary-color)}.clear-btn{--btn-color: hsl(0, 0%, 50%);--btn-color: var(--secondary-color);color:#001829}.container{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;height:100%;padding:2rem}