*{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:none;touch-action:none;font-family:monospace}:root{--green-one:#9be9a8;--green-two:#40c463;--green-three:#30a14e;--green-four:#216e39;--cell-radius:2;--grey:#ebedf0;--color:#666;--shirt:var(--green-one);--shirt-shade:var(--green-two);--skin:#f6eeee;--skin-shade:#d6c2c2;--stroke:#333;--laptop:#c7c7c7;--laptop-main:#4d4d4c;--laptop-shade:rgba(58,58,59,0.5);--laptop-badge:#fff;--beard:#bf8040;--beard:#ae6113;--beard-light:#d9b38c;--beard-light:#ea943e;--eyes:var(--stroke);--strap:#bf4040;--strap:var(--green-four);--cheeks:#df9f9f;--cap:#404040;--sparks:rgba(255,255,153,0.85);--bulb:rgba(255,255,153,0.85);--filament:#000;--screw:#ccc;--bg:#6e7c91;--owl-1:#feec90;--owl-2:#c6e472;--owl-3:#f88a68;--owl-4:#80cbc5;--owl-5:#c793ec;--padding:16px}body{font-family:monospace;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:#262626;background-color:#fff;min-height:360px;overflow:hidden}body,ul{margin:0}ul{padding:0 0 0 var(--padding)}ul>li+li{margin-top:var(--padding)}.submit-button{width:100%;height:44px;border-radius:6px;background:var(--green-two);color:#fff;font-weight:700;font-size:1.25rem;border:none;-webkit-transition:background .2s,-webkit-box-shadow .2s,-webkit-transform .2s;transition:background .2s,-webkit-box-shadow .2s,-webkit-transform .2s;transition:background .2s,box-shadow .2s,transform .2s;transition:background .2s,box-shadow .2s,transform .2s,-webkit-box-shadow .2s,-webkit-transform .2s;-webkit-box-shadow:4px 4px 0 -2px rgba(0,0,0,.25);box-shadow:4px 4px 0 -2px rgba(0,0,0,.25)}.submit-button:hover{background:var(--green-three)}.submit-button:active{background:var(--green-four);-webkit-box-shadow:0 0 0 0 #000;box-shadow:0 0 0 0 #000;-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}#app{min-height:100vh;width:100vw;overflow:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width:768px){#app{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}button{cursor:pointer}.canvas{padding:var(--padding)}.icon-button{height:44px;width:44px;border-radius:50%;-webkit-transition:background .2s;transition:background .2s;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border:0;background:0}.icon-button:hover{background:var(--grey)}.icon-button:active path{fill:var(--green-two)}.icon-button path{fill:var(--green-four);-webkit-transition:fill .2s;transition:fill .2s}.icon-button svg{height:24px;width:24px}.icon-button[disabled]{cursor:not-allowed;background:transparent}.icon-button[disabled] path{fill:var(--grey)}.audio-toggle{position:absolute;top:calc(44px + var(--padding)*2);left:var(--padding)}#audio{height:0;width:0;-webkit-transform:scale(0);transform:scale(0)}input,select{height:44px;margin:0;padding:0 var(--padding)}button,input,select{outline:transparent}input,select{border:2px solid var(--grey);border-radius:6px;color:var(--color)}input::-webkit-input-placeholder{color:#ccc}input::-moz-placeholder{color:#ccc}input:-ms-input-placeholder{color:#ccc}input::-ms-input-placeholder{color:#ccc}input::placeholder{color:#ccc}.select-wrapper{border:2px solid var(--grey);border-radius:6px;overflow:hidden;position:relative}.select-wrapper:after{content:"";height:8px;width:12px;background:var(--color);position:absolute;right:9px;top:50%;-webkit-transform:translateY(-30%);transform:translateY(-30%);-webkit-clip-path:polygon(0 0,100% 0,50% 100%);clip-path:polygon(0 0,100% 0,50% 100%)}.select-wrapper select{color:var(--color);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0 30px 0 var(--padding);height:40px}footer{padding:var(--padding)}a{color:var(--green-two)}a:active{color:var(--green-four)}.instructions-content>*+*{margin-top:var(--padding)}