.commit-grid{--cell-radius:2;--cell-size:11;--cell-gap:5;--bg:var(--grey);display:-ms-inline-grid;display:inline-grid;-ms-grid-columns:(auto)[53];grid-template-columns:repeat(53,auto);-ms-grid-rows:(auto)[7];grid-template-rows:repeat(7,auto);grid-gap:calc(var(--cell-gap)*1px);grid-auto-flow:dense}.commit-grid:active{cursor:var(--cursor,pointer)}.commit-grid__cell{height:calc(var(--cell-size)*1px);width:calc(var(--cell-size)*1px);background:var(--bg);border-radius:calc(var(--cell-radius)*1px);grid-column:var(--column)}.commit-grid__cell[data-level="1"]{--bg:var(--green-one)}.commit-grid__cell[data-level="2"]{--bg:var(--green-two)}.commit-grid__cell[data-level="3"]{--bg:var(--green-three)}.commit-grid__cell[data-level="4"]{--bg:var(--green-four)}:root{--drawer-width:260}body{-webkit-transform:translate(calc(var(--left, 0)*var(--drawer-width)*1px)) translate(calc(var(--right, 0)*var(--drawer-width)*-1px));transform:translate(calc(var(--left, 0)*var(--drawer-width)*1px)) translate(calc(var(--right, 0)*var(--drawer-width)*-1px));-webkit-transition:-webkit-transform .25s;transition:-webkit-transform .25s;transition:transform .25s;transition:transform .25s,-webkit-transform .25s}.sliding-drawer__toggle{position:absolute;top:var(--padding)}.sliding-drawer__title{color:var(--color);margin:0 0 calc(var(--padding)*1) 0}.sliding-drawer{position:fixed;top:0;width:calc(var(--drawer-width)*1px);height:100vh;background:var(--grey);-webkit-box-shadow:4px 0 20px -10px #1a1a1a inset;box-shadow:inset 4px 0 20px -10px #1a1a1a}.sliding-drawer__content{overflow:auto;height:100%;width:100%;padding:var(--padding)}.sliding-drawer h3{color:var(--color);margin:0 0 calc(var(--padding)*0.75) 0}.sliding-drawer--right{left:100%}.sliding-drawer__toggle--right{right:calc(100% + var(--padding))}.sliding-drawer--left{right:100%}.sliding-drawer__toggle--left{left:calc(100% + var(--padding))}.sliding-drawer__form{margin:0}.sliding-drawer__form input{width:100%}.sliding-drawer__form:invalid [type=submit],.sliding-drawer__form [type=submit][disabled]{-webkit-box-shadow:none;box-shadow:none;background:#ced2da;color:var(--grey);cursor:not-allowed}.sliding-drawer__form:invalid [type=submit]:active,.sliding-drawer__form [type=submit][disabled]:active{-webkit-transform:translate(0);transform:translate(0)}.sliding-drawer__form-field{margin-bottom:var(--padding)}.sliding-drawer__form-field label{display:block;margin-bottom:calc(var(--padding)*0.25);color:var(--color)}.sliding-drawer__form-field input{border:0}.actions-container{margin-top:var(--padding);display:-webkit-box;display:-ms-flexbox;display:flex}.actions-container>*+*,.configuration-container>*+*,.io-container>*+*{margin-left:var(--padding)}.configuration-container{-webkit-clip-path:inset(0 calc((100 - var(--scale)*100)*1%) 0 0);clip-path:inset(0 calc((100 - var(--scale)*100)*1%) 0 0);-webkit-transition:-webkit-clip-path .25s;transition:-webkit-clip-path .25s;transition:clip-path .25s;transition:clip-path .25s,-webkit-clip-path .25s;padding-left:var(--padding);margin-left:0}.configuration-container,.io-container{display:-webkit-box;display:-ms-flexbox;display:flex}.io-container{border-left:2px solid var(--grey);border-right:2px solid var(--grey);padding:0 var(--padding)}*{-webkit-box-sizing:border-box;box-sizing:border-box}.vvg{height:45vmin;display:none;overflow:visible!important}.vvg__code-block{fill:var(--block-color,var(--owl-1))}.vvg__bulb-bulb{fill:var(--bulb)}.vvg__bulb-dashes{stroke:var(--sparks);stroke-width:4px}.vvg__bulb-filament{stroke:var(--filament)}.vvg__bulb-screw{fill:var(--screw)}.vvg__cheeks{fill:var(--cheeks)}.vvg__cap-body{fill:var(--cap)}.vvg__cap-strap{fill:var(--strap)}.vvg__cap-notch{fill:var(--stroke)}.vvg-stroke{stroke:var(--stroke);stroke-width:2px}.vvg__eyes{fill:var(--eyes);stroke:var(--eyes)}.vvg-hair{fill:var(--beard)}.vvg-hair--light{fill:var(--beard-light)}.vvg__shirt{fill:var(--shirt)}.vvg__shirt--shade{fill:var(--shirt-shade)}.vvg-skin{fill:var(--skin)}.vvg-skin--shade{fill:var(--skin-shade)}.vvg__laptop-badge{fill:var(--laptop-badge)}.vvg__laptop-shell{fill:var(--laptop)}.vvg__laptop-shell--main{fill:var(--laptop-main)}.vvg__laptop-shell--shade{fill:var(--laptop-shade)}.progress-screen{--right:100;height:100vh;width:100vw;position:fixed;top:0;left:0;z-index:2;background-color:#fff;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;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-clip-path:inset(0 calc(var(--right, 100)*1%) 0 calc(var(--left, 0)*1%));clip-path:inset(0 calc(var(--right, 100)*1%) 0 calc(var(--left, 0)*1%))}.toast{--blue:#bfe9fd;--blue-border:#5cc8fa;--blue-stroke:#067fb7;--green:#c8f3cf;--green-border:#4ad962;--green-stroke:#219c35;--red:#f7d1cf;--red-border:#e0554d;--red-stroke:#a9251e;--button-size:44px;border-radius:calc(var(--cell-radius)*1px);border:calc(var(--cell-radius)*1px) solid var(--border);padding:var(--padding);padding-right:var(--button-size);position:relative;background:var(--bg);color:var(--stroke)}.toast--SUCCESS{--bg:var(--green);--border:var(--green-border);--stroke:var(--green-stroke)}.toast--INFO{--bg:var(--blue);--border:var(--blue-border);--stroke:var(--blue-stroke)}.toast--ERROR{--bg:var(--red);--border:var(--red-border);--stroke:var(--red-stroke)}.toast button{height:var(--button-size);width:var(--button-size);position:absolute;top:50%;right:0;padding:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);border:0;background:0}.toast svg{stroke:var(--stroke);fill:var(--stroke)}.toasts{position:fixed;bottom:var(--padding);right:var(--padding);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;z-index:3}.toasts>*+*{margin-top:var(--padding)}.intro{background:var(--grey);-webkit-box-shadow:0 10px 10px -10px rgba(26,26,26,.5),0 0 50px -25px rgba(26,26,26,.5);box-shadow:0 10px 10px -10px rgba(26,26,26,.5),0 0 50px -25px rgba(26,26,26,.5);max-width:600px;padding:var(--padding);border-radius:6px;position:relative}.intro>*+*,.intro li{margin-top:var(--padding)}.intro__image{margin:0 auto;display:block}.intro__backdrop{position:fixed;top:0;left:0;background:rgba(26,26,26,.25);width:100vw;height:100vh;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;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);padding:var(--padding);z-index:5;overflow:auto}@media (max-height:600px){.intro__backdrop{-webkit-box-align:start;-ms-flex-align:start;align-items:start}}.intro__close{position:absolute;top:var(--padding);right:var(--padding);height:44px;width:44px}*{-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)}