@layer normalize{html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}}*{box-sizing:border-box}:root{--bristle-color: #ecd779;--bristle-band: #f00;--brush-color-one: #72480d;--brush-color-two: #d78819;--bg: #111;--transition: .1;--sweep: 0;--speed: 1;--rotation: 2;--scale-end: .95;--bristle-radius: 0 50% 35% 40%/0 50% 0% 40%;--bristle-scale: 1;--bristle-after-x: 0;--bristle-after-rotation: 15;--bristle-before-scale: 1;--bristle-before-rotation: 20;--arm-scale: 1;--arm-angle: 30;--forearm-angle: -20;--swing: 1;--txt-color: #99d3ff}body{align-items:center;background:#111;display:flex;justify-content:center;min-height:100vh}input{opacity:0}.bounce:checked~.command:valid~.broom-container .broom{--speed: 0;--sweep: 1;--bristle-radius: 0 50% 35% 0/0 50% 15% 0;--bristle-after-x: -100;--bristle-after-rotation: 45;--bristle-before-scale: 0;--bristle-before-rotation: 15;--bristle-scale: 1;--arm-scale: 0}.bounce:checked~.command:valid~.broom-container .broom .broom__arm{--arm-scale: 0;animation-name:none;animation-duration:0s;animation-delay:0s;animation-duration:calc(var(--speed) * var(--swing) * 1s);animation-delay:calc((var(--is-right) * (var(--speed) / 2)) * 1s);animation-iteration-count:infinite;animation-timing-function:ease;animation-fill-mode:none}.bounce:checked~.command:valid~.broom-container .broom .broom__bristles-wrap{animation-name:none}.arms:checked~.broom-container .broom{--arm-scale: 1;--arm-angle: 45}.bounce:checked~.command:invalid~.broom-container .broom{--bristle-radius: 0 80% 20% 100%/0 50% 0% 150%;--bristle-scale: 1.15;--speed: .5;--rotation: 4;--scale-end: .85;--bristle-after-x: 0;--bristle-after-rotation: 15;--bristle-before-scale: 1;--bristle-before-rotation: 20;--arm-scale: 1;--arm-angle: 60;--forearm-angle: -50;--sweep: 0;--swing: 1;animation-name:none}.bounce:checked~.command:invalid~.broom-container .broom .broom__arm{--arm-angle: 60;animation-name:swing}.bounce:checked~.command:-moz-placeholder~.broom-container .broom{--sweep: 0;--speed: 1;--rotation: 2;--scale-end: .95;--bristle-radius: 0 50% 35% 40%/0 50% 0% 40%;--bristle-scale: 1;--bristle-after-x: 0;--bristle-after-rotation: 15;--bristle-before-scale: 1;--bristle-before-rotation: 20;--arm-scale: 1;--arm-angle: 30;--forearm-angle: -20;--swing: 1;animation-name:none}.bounce:checked~.command:placeholder-shown~.broom-container .broom{--sweep: 0;--speed: 1;--rotation: 2;--scale-end: .95;--bristle-radius: 0 50% 35% 40%/0 50% 0% 40%;--bristle-scale: 1;--bristle-after-x: 0;--bristle-after-rotation: 15;--bristle-before-scale: 1;--bristle-before-rotation: 20;--arm-scale: 1;--arm-angle: 30;--forearm-angle: -20;--swing: 1;animation-name:none}.bounce:checked~.command:-moz-placeholder~.broom-container .broom .broom__arm{--arm-scale: 1;animation-name:swing}.bounce:checked~.command:placeholder-shown~.broom-container .broom .broom__arm{--arm-scale: 1;animation-name:swing}.bounce:checked~.command:-moz-placeholder~.broom-container .broom .broom__bristles-wrap{animation-name:waddle}.bounce:checked~.command:placeholder-shown~.broom-container .broom .broom__bristles-wrap{animation-name:waddle}.flash,.arms,.bounce,.command{position:absolute;top:10px;left:10px}.arms{left:50px}.bounce{left:90px}.command{left:130px}.flash:checked~[for=flash],.arms:checked~[for=arms],.bounce:checked~[for=bounce]{display:none}.flash:checked~.broom-container .broom{animation-name:flash,jump;animation-duration:.25s,.25s;animation-iteration-count:4,1;animation-timing-function:steps(1),ease-in}.flash-label,.bounce-label,.arms-label{opacity:.5;height:100vh;width:100vw;position:absolute;z-index:10}.instruction{position:absolute;bottom:20px;right:20px;color:var(--txt-color);font-weight:700;font-variant:small-caps;font-size:2rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;display:none}@media(min-width:768px){.instruction{font-size:4rem}}.instruction[for=flash]{display:block}.flash:checked{display:none}.flash:checked~.instruction[for=arms]{display:block}.arms:checked{display:none}.arms:checked~.instruction[for=arms]{display:none}.arms:checked~.instruction[for=bounce]{display:block}.bounce:checked{display:none}.bounce:checked~.instruction[for=bounce]{display:none}.bounce:checked~.instruction.tap,.bounce:checked~.catch-all{display:block}.catch-all{display:none;top:0;left:0;height:100vh;width:100vw;position:absolute;z-index:100}.bounce:checked~.broom-container .broom{animation-name:sweep;animation-duration:calc(var(--sweep) * 1s);animation-iteration-count:infinite;animation-timing-function:ease}.broom{--bristle-radius: 0 50% 35% 0/0 50% 15% 0;--speed: 0;--bristle-after-x: -100;--bristle-after-rotation: 15;--bristle-before-scale: 0;--bristle-before-rotation: 20;--bristle-scale: 1;--arm-angle: 40;--forearm-angle: 0;--arm-scale: 0;--swing: 1;height:100%;transform-origin:50% 10%;transition:transform calc(var(--transition, .2) * 1s) ease;width:100%;z-index:2;animation-name:sweep;animation-duration:calc(var(--sweep) * 1s);animation-iteration-count:infinite;animation-timing-function:ease}.broom__handle{position:absolute;top:0;left:50%;height:66%;background:linear-gradient(90deg,var(--brush-color-one),var(--brush-color-two));width:8%;transform:translate(-50%);transform-origin:bottom center;border-radius:50% 50% 0 0/5% 5% 0 0;animation-duration:calc(var(--speed) * 1s);animation-iteration-count:infinite;animation-name:shake;animation-timing-function:ease}.broom__handle-shade{border-radius:50% 50% 0 0/5% 5% 0 0;height:60%;width:100%;background:linear-gradient(90deg,var(--brush-color-one),var(--brush-color-two));z-index:2;top:0;left:0;position:absolute}.broom__handle:before{background:var(--bristle-band);bottom:0;content:"";height:5%;left:50%;position:absolute;transform:translate(-50%);width:250%;z-index:2}.broom__handle:after{-webkit-clip-path:polygon(0 0,100% 0,85% 100%,15% 100%);background:var(--bristle-color);bottom:5%;clip-path:polygon(0 0,100% 0,85% 100%,15% 100%);content:"";height:5%;left:50%;position:absolute;transform:translate(-50%);width:300%;z-index:2}.broom__arm{--is-right: 0;position:absolute;width:50%;height:35%;top:40%;transition:transform calc(var(--transition, .2) * 1s);transform-origin:top center;animation-name:none;animation-duration:calc(var(--speed) * var(--swing) * 1s);animation-delay:calc((var(--is-right) * (var(--speed) / 2)) * 1s);animation-iteration-count:infinite;animation-timing-function:ease;animation-fill-mode:both}.broom__arm--left{--bg: var(--brush-color-one);left:0;transform:rotateY(calc(var(--is-right) * 180 * 1deg)) rotate(calc(var(--arm-angle) * 1deg)) scaleY(var(--arm-scale))}.broom__arm--right{--bg: var(--brush-color-two);--is-right: 1;right:0;transform:rotateY(calc(var(--is-right) * 180 * 1deg)) rotate(calc(var(--arm-angle) * 1deg)) scaleY(var(--arm-scale))}.broom__arm-bicep{background:var(--bg);height:50%;width:100%;position:absolute;top:0;left:0;border-radius:50% 50% 0 0/5% 5% 0 0}.broom__arm-forearm{position:absolute;background:var(--bg);height:50%;top:48%;left:0;width:100%;transform:rotate(calc(var(--forearm-angle) * 1deg));transform-origin:top center}.broom__hand{height:14px;width:14px;background:var(--bg);border-radius:100%;position:absolute;bottom:0;left:50%;transform:translate(-50%,50%)}.broom__finger{height:80%;background:var(--bg);width:25%;position:absolute;top:50%;left:50%;border-radius:50%}.broom__finger:nth-of-type(1){transform:translate(-50%,-50%) rotate(-80deg) translateY(50%)}.broom__finger:nth-of-type(2){transform:translate(-50%,-50%) rotate(-20deg) translateY(50%)}.broom__finger:nth-of-type(3){transform:translate(-50%,-50%) rotate(20deg) translateY(50%)}.broom__finger:nth-of-type(4){transform:translate(-50%,-50%) rotate(60deg) translateY(50%)}.broom__brush{bottom:0;height:35%;left:0;overflow:hidden;position:absolute;width:100%}.broom__bristles{height:100%;left:49%;overflow:hidden;position:absolute;top:0;width:50%}.broom__bristles--left{transform-origin:left center;transform:rotateY(180deg) translate(-3%)}.broom__bristles--left .broom__bristles-wrap{animation-delay:calc(var(--speed) * -.5s)}.broom__bristles-wrap{animation-duration:calc(var(--speed) * 1s);animation-iteration-count:infinite;animation-name:waddle;animation-timing-function:ease;height:100%;left:0;overflow:hidden;position:absolute;top:0;transform-origin:top left;width:100%}.broom__bristle{background:var(--bristle-color);border-radius:var(--bristle-radius);height:100%;left:0;position:absolute;top:0;transform:scaleX(var(--bristle-scale));transition:border-radius calc(var(--transition, .2) * 1s) ease,transform calc(var(--transition, .2) * 1s) ease;width:40%}.broom__bristle:after{bottom:-2%;border-radius:100%;box-shadow:0 -15px 0 0 var(--bristle-color) inset;content:"";height:40%;left:45%;position:absolute;transform:translate(calc(var(--bristle-after-x) * 1%)) rotate(calc(var(--bristle-after-rotation) * 1deg));transition:transform calc(var(--transition, .2) * 1s) ease;width:100%;z-index:2}.broom__bristle:before{border-radius:100%;bottom:12%;box-shadow:0 -5px 0 0 var(--bristle-color) inset;content:"";height:20%;left:95%;position:absolute;transform:scale(var(--bristle-before-scale)) rotate(calc(var(--bristle-before-rotation) * 1deg));transition:transform calc(var(--transition, .2) * 1s) ease;width:50%}.broom-container{display:block;height:250px;position:relative;transform:translate(calc(var(--x, 0) * 1%),calc(var(--y, 0) * 1%));transition:transform calc(var(--transition, .2) * 1s) ease;width:150px;z-index:5}@keyframes waddle{0%,to{transform:scaleY(1)}50%{transform:scaleY(var(--scale-end)) rotate(calc(var(--rotation) * 1deg))}}@keyframes shake{0%,to{transform:translate(-50%) rotate(calc(var(--rotation) * -1deg))}50%{transform:translate(-50%) rotate(calc(var(--rotation) * 1deg))}}@keyframes swing{0%,to{transform:rotateY(calc((var(--is-right) * 180) * 1deg)) rotate(calc(var(--arm-angle) * 1deg)) scaleY(var(--arm-scale))}50%{transform:rotateY(calc((var(--is-right) * 180) * 1deg)) rotate(calc(var(--arm-angle) * .85deg)) scaleY(var(--arm-scale))}}@keyframes sweep{0%,5%,95%,to{transform:rotate(15deg)}45%,50%,55%{transform:rotate(-15deg)}}@keyframes jump{0%,to{transform:translate(0) scale(1)}50%{transform:translateY(-50%) scale(1.15)}}@keyframes flash{0%{filter:drop-shadow(0 0 20px #ff0)}20%{filter:drop-shadow(0 0 20px #800080)}40%{filter:drop-shadow(0 0 20px #00f)}60%{filter:drop-shadow(0 0 20px #008000)}80%{filter:drop-shadow(0 0 20px #f00)}to{filter:drop-shadow(0 0 20px #1e90ff)}}