html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{--color: rgba(255, 255, 255, .87);font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#ff8119;text-decoration:inherit}a:hover{color:#535bf2}p{font-weight:bolder;line-height:1.5}.info__container{display:none;align-items:center;grid-area:1/3/2/4;max-width:35ch}body{display:grid;grid-template:1fr / repeat(3,1fr);margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1;font-weight:700}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em #f7df1eaa)}.card{padding:2em}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;color:var(--color);background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#ff8119}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}video{transform:scaleX(-1)}canvas{border-radius:1rem}.preview{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:1rem;gap:2rem;margin:0 auto;grid-area:1 / 2 / 2 / 3}.preview__animation{animation:replace .5s ease-in-out forwards}#animal-image{width:400px;height:400px;transition:all 1s ease}#animal-image:hover{width:400px;height:400px}.drawing__container{display:none;gap:2rem;grid-area:1/2/2/3;flex-direction:column;justify-content:center;align-items:center}.drawing__animation{animation:reveal 1.2s ease-in-out forwards}main{display:none}#timer{opacity:0;margin:1rem;color:#ff8119}.timer__animation{animation:showAndHide 5s ease-in-out}footer{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;justify-content:center;align-items:flex-end}@keyframes replace{0%{opacity:1}50%{opacity:0}to{opacity:1;grid-area:1/1/2/2}}@keyframes reveal{0%{opacity:0}50%{opacity:0}to{opacity:1}}@keyframes showAndHide{0%{opacity:0}10%{opacity:1}90%{opacity:1}to{opacity:0}}