:root{--color-white:#e8e8e8;--color-black:#000;--color-black-light:#222;--color-grey:#747474;--color-silver:#ccc;--color-blue-light:#0ce;--color-blue:#068;--color-skin-dark:#272625;--color-skin-mid-dark:#707c52;--color-skin-mid:#b1d08e;--color-skin-mid-light:#f8d58a;--color-skin-light:#ffe3a6;--color-yellow:#ec2;--color-red:#c22;--color-red-light:#f4aa8c;--color-black-light-semi:#222c;--color-skin-dark-semi:#27262580;--color-yellow-semi:#fd28;--color-note-grid-bar:#fff4;--gradient-dark:linear-gradient(var(--color-black),var(--color-black-light-semi));--gap:0.75rem;--gap-half:calc(var(--gap) / 2);--gap-double:calc(var(--gap) * 2);--gap-neg-small:-0.1rem;--menu-width:16rem;--input-height:1.8rem;--radius:0.2rem;--font-size-s:0.5rem;--font-size-m:0.8rem;--font-size-l:1rem;--font-size-xl:1.2rem}.theme{--bg:var(--color-skin-dark);--bg-input:var(--color-skin-mid);--bg-input-active:var(--color-skin-mid-light);--gradient-dolce:linear-gradient(to bottom,var(--color-skin-mid),var(--color-skin-mid-dark))}.theme-cognizant{--color-skin-dark:#000048;--color-skin-mid-dark:#05819b;--color-skin-mid:#06c7cc;--color-skin-mid-light:#26efe9;--color-skin-light:#46ffff;--font-family:"Gellix",sans-serif}*{box-sizing:border-box}html{font-size:16px;overflow:hidden;scrollbar-width:var(--gap-half);scrollbar-color:var(--color-skin-mid-dark) var(--color-skin-dark)}@media screen and (max-width:767px){html{font-size:14px}}body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}canvas,video{position:absolute;left:0;top:0}button{margin:0;background-color:var(--bg-input);color:var(--color-skin-dark);border:none;border-radius:2rem;font-size:var(--font-size-m)}button.splash-button{margin:0 var(--gap);padding:var(--gap) var(--gap-double);font-size:var(--font-size-xl);font-weight:700;background-color:var(--color-skin-mid-light)}button.splash-button:hover{background-color:var(--color-skin-light)}button.video-button{background-color:var(--color-blue-light)}button.video-button:hover{background-color:var(--color-blue)}button.video-button.pause-button{position:fixed;bottom:10rem;z-index:1;left:50%;transform:translateX(-50%);margin:0}button.cancel{background:var(--color-red-light)}input{border-radius:var(--radius);background:transparent;border:1px solid var(--color-skin-mid);padding:var(--gap-half);color:var(--color-skin-mid)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:var(--gap-half);margin-top:var(--gap-half);background:var(--color-skin-mid-dark);border:none;padding:0}.control:hover input[type=range]{background:var(--color-skin-mid-light)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--gap-double);width:var(--gap-double);border:1px solid var(--color-skin-dark);border-radius:var(--radius);background:var(--color-skin-mid-light)}input[type=range]::-moz-range-thumb{-moz-appearance:none;appearance:none;height:var(--gap-double);width:var(--gap-double);border:1px solid var(--color-skin-dark);border-radius:var(--radius);background:var(--color-skin-mid-light)}input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0}input[type=color],select{border-radius:var(--radius)}select{padding:var(--gap-half);background:var(--bg-input);height:var(--input-height);border:none;font-size:var(--font-size-m);text-transform:capitalize}button,input,select{font-family:var(--font-family)}button:hover,select:hover{background-color:var(--color-skin-mid-light)}input[type=url]:active,input[type=url]:hover{border-color:var(--color-skin-light)}input[type=checkbox]{display:none}input[type=checkbox]+label{display:flex;align-items:center}input[type=checkbox]+label:before{flex-shrink:0;margin-right:.3rem;content:"";width:var(--gap);height:var(--gap);border-radius:var(--radius);border:1px solid var(--color-skin-mid)}input[type=checkbox]+label:hover:before{border-color:var(--color-skin-light)}input[type=checkbox]:checked+label:before{background-color:var(--color-skin-light);content:"✔️";color:var(--color-black);font-size:.6rem;line-height:.8rem;text-align:center}fieldset{display:contents;border:none;padding:var(--gap-half) 0}legend{grid-column:span 12;font-size:var(--font-size-m)}ol,ul{padding-left:0;list-style-position:inside}#root{display:flex;height:100vh}@media screen and (max-width:767px){.controls{position:fixed;left:0;top:0;height:100vh;width:100vw;overflow-y:auto;padding-bottom:5rem;background:var(--color-skin-dark)}}.menu{position:fixed;top:0;left:0;width:var(--menu-width);height:100vh;overflow-y:auto;overflow-x:hidden;padding:var(--gap);background:var(--color-skin-dark);color:var(--color-silver);margin:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-gap:var(--gap);grid-auto-rows:max-content}@media screen and (max-width:767px){.menu{width:auto;height:auto;position:relative}}.menu.secondary{left:auto;right:0;grid-auto-rows:max-content}.menu button.active{background-color:var(--bg-input-active)}.menu p{grid-column:span 12}.icon-patterns button{font-size:1.4rem;background:none;position:relative}.icon-patterns button:after{content:attr(data-icon);display:block;position:absolute;top:0;left:0;right:0;bottom:0;filter:grayscale(100%) sepia(.9) hue-rotate(30deg)}.icon-patterns button.active:after,.icon-patterns button:hover:after{filter:none}.control{display:flex;flex-direction:column-reverse;justify-content:center;grid-column:span 6;border:none;padding:0;margin:0 0 var(--gap-half);font-size:var(--font-size-m)}.control.checkbox{flex-direction:row;align-self:center;justify-content:flex-start;margin:0}@media screen and (max-width:767px){.control.checkbox{grid-column:span 4}}.control.color{width:1rem;grid-column:span 3}@media screen and (max-width:767px){.control.color{grid-column:span 2}}.control.range{min-width:0}@media screen and (max-width:767px){.control.range{grid-column:span 4}}.control.select select{width:100%}@media screen and (max-width:767px){.control.select{grid-column:span 4}}.control.imageUrl,.control.text{grid-column:span 12}.control.button{height:2rem;align-items:center;margin:0}@media screen and (max-width:767px){.control.button{grid-column:span 4;align-self:flex-end;padding:.5rem 0}}[title]:hover:after{content:attr(title);font-size:var(--font-size-m);text-align:left;position:fixed;padding:var(--gap);box-sizing:border-box;bottom:0;left:0;width:var(--menu-width);color:var(--color-skin-light);background:var(--color-skin-dark);font-family:Figtree,sans-serif}label{margin-bottom:var(--gap-half)}[type=range]+label{display:flex;justify-content:space-between;align-items:flex-end}[type=checkbox]+label{margin:0}[type=color]+label{margin:.4rem 0 .2rem}.control:hover label,label .value{color:var(--color-skin-light)}.wrap{overflow:hidden;position:relative;display:flex;justify-content:center;align-items:center;margin:auto}.wrap.not-started{background:var(--color-black-light)}.splash{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-skin-mid-dark);flex-direction:column;justify-content:space-evenly;color:var(--color-skin-light)}@keyframes gesture-icon{0%{left:-80%;top:-10%;transform:scale(1.5);filter:drop-shadow(.5rem 1rem 1rem var(--color-skin-dark))}40%{top:80%;left:0;transform:scale(1)}75%{filter:none}to{top:80%;left:103%}}@keyframes gesture-line{0%,40%{width:0}to{width:100%}}.splash h1{margin:0;font-size:2rem;position:relative}.splash h1:before{display:block;content:"";position:absolute;width:100%;height:.2rem;top:100%;background:var(--color-skin-mid)}@media(prefers-reduced-motion:no-preference){.splash h1:before{animation:gesture-line 1.7s ease-in-out forwards}}.splash h1:after{display:block;content:"";background:url(/_next/static/media/machevuoi.e3d2e104.png) no-repeat 0 0;background-size:contain;width:3rem;height:3rem;position:absolute;top:80%;left:103%;transform:translate(-.4rem,-.2rem)}@media(prefers-reduced-motion:no-preference){.splash h1:after{animation:gesture-icon 1.7s ease-in-out forwards}}.splash .slogan{text-align:center;line-height:1.4;font-weight:400;overflow:hidden;margin-top:var(--gap)}.splash .pro-tips{max-width:calc(100vw - 2*var(--menu-width) - 2*var(--gap));background:var(--color-skin-dark-semi);padding:var(--gap-double);border-radius:.5rem}.splash .pro-tips p{margin:var(--gap) 0}.splash .pro-tips li{margin:var(--gap-half) 0}.splash .pro-tips strong{position:relative;display:inline-block;padding:.2rem .4rem;font-weight:400}.splash .pro-tips strong:before{display:block;position:absolute;content:"";z-index:-1;top:0;right:0;bottom:0;left:0;background:var(--color-skin-dark);border:1px solid var(--color-skin-light);border-radius:.3rem}@media screen and (max-width:767px){.splash .pro-tips{max-width:calc(100vw - 2*var(--gap))}}.svg-drawing{position:absolute;top:0;left:0}.hidden{display:none}.bg{position:absolute;left:0;top:0}.scratch-svg{transition:all .2s ease-in-out;background:url(/_next/static/media/hand-model.63d38f95.svg) no-repeat 0 0;background-size:100%}.scratch-layer,.scratch-svg,.scratch-wrap{grid-column:span 12}.scratch-wrap{display:grid;grid-template-columns:inherit;grid-gap:inherit;position:relative;background:color-mix(in lch,var(--color-skin-mid) 20%,var(--color-skin-dark));margin:0 -1rem;padding:var(--gap-half)}@media screen and (max-width:767px){.scratch-wrap{padding:var(--gap)}}.scratch-wrap .zoomed{transform:scale(2);transform-origin:right bottom;position:fixed;bottom:1rem;right:1rem}.scratch-wrap .clear-scratch{position:absolute;top:0;right:var(--gap);padding:0;background:0;color:var(--color-skin-mid-light)}.scratch-wrap .clear-scratch:hover{color:var(--color-skin-light)}.icon-button{grid-column:span 2;border-radius:var(--radius);aspect-ratio:1;background-size:contain;background-repeat:no-repeat;background-position:50%}.icon-button:first-child{grid-column:1/span 2}.icon-button.arcs{background-image:url(/_next/static/media/arcs.38d50823.svg)}.icon-button.circles{background-image:url(/_next/static/media/circles.e85473b5.svg)}.icon-button.curves{background-image:url(/_next/static/media/curves.3ee15c00.svg)}.icon-button.diamonds{background-image:url(/_next/static/media/diamonds.52ca5464.svg)}.icon-button.dots{background-image:url(/_next/static/media/dots.0b051ad9.svg)}.icon-button.ellipses{background-image:url(/_next/static/media/ellipses.41b3c9ee.svg)}.icon-button.lines{background-image:url(/_next/static/media/lines.0dea8c20.svg)}.icon-button.rectangles{background-image:url(/_next/static/media/rectangles.2570d434.svg)}.icon-button.squares{background-image:url(/_next/static/media/squares.ba6875cb.svg)}.icon-button.triangles{background-image:url(/_next/static/media/triangles.f3a636fb.svg)}.scratch-dot{fill:color-mix(in lch,var(--color-skin-mid-dark) 40%,var(--color-skin-mid))}.scratch-dot.selected{fill:var(--color-skin-mid-light)}.active-dots .scratch-dot:hover{fill:var(--color-red-light)}.active-shapes .scratch-dot:hover{stroke-width:2px;stroke:var(--color-skin-light)}.scratch-path{fill:none;stroke-width:.3rem;stroke:var(--color-skin-mid-light)}.scratch-path:hover{stroke:var(--color-red-light)}.scratch-path.preview{fill:none;stroke:var(--color-skin-mid)}.scratch-path.control-path{stroke-width:2px}.scratch-path.bitmap-outline{stroke-dasharray:4,1}.scratch-info{padding:0 var(--gap);font-size:var(--font-size-m);color:var(--color-skin-mid-light)}.message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:20rem;text-align:center;background:var(--color-skin-light);border:2px solid var(--color-skin-mid);color:var(--color-skin-dark);padding:var(--gap)}.message .close{right:0;padding:.2rem .4rem;transform:translate(50%,-50%);font-size:1rem}.message .close,pre{position:absolute;top:0}pre{width:var(--menu-width);height:100vh;background:var(--color-skin-mid);overflow-y:auto;font-size:.7rem}.info,pre{left:var(--menu-width)}.info{position:fixed;right:var(--menu-width);bottom:0;font-size:var(--font-size-m);background:var(--color-skin-dark);color:var(--color-silver);padding:var(--gap-half);display:flex;justify-content:space-evenly;z-index:2}.info p{margin:var(--gap-half) 0}@media screen and (max-width:767px){.info{display:none}}.mini-menu{position:fixed;bottom:0;right:0;width:var(--menu-width);background:var(--color-skin-dark);display:none;grid-template-columns:repeat(12,1fr);grid-gap:var(--gap);padding:var(--gap)}@media screen and (max-width:767px){.mini-menu{width:100vw;box-shadow:0 .2rem 1rem var(--color-skin-mid)}}.mini-menu button{grid-column:span 6}@keyframes spin{to{stroke-dashoffset:0}}.loader{width:5rem;height:5rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loader-circle{fill:none;stroke-width:.2rem;stroke:#272625;stroke-linecap:round;animation:spin 2s linear infinite;stroke-dasharray:60;stroke-dashoffset:120}.links a{display:inline-block;margin:0 var(--gap-double)}.piano{grid-column:span 12;width:100%}.piano .tone{stroke:var(--color-skin-dark);stroke-width:1px}.piano .tone.white{fill:var(--color-skin-mid-dark)}.piano .tone.black{fill:var(--color-skin-dark)}.piano .tone.selected{fill:var(--color-skin-mid-light)}.piano .tone:hover{fill:var(--color-skin-light)}.note-grid{position:absolute;top:0;left:0;pointer-events:none;font-family:monospace;display:flex;width:100%}.note-grid .grid-bar{flex:1 1;border-left:1px solid var(--color-note-grid-bar);height:100%;position:relative}.note-grid .grid-bar .note-label{position:absolute;top:1rem;width:100%;text-align:center;color:var(--color-note-grid-bar);font-size:.75rem}.icon-buttons-wrap{height:100px;overflow-y:auto;display:inherit;grid:inherit;grid-gap:var(--gap-half);grid-column:1/span 12}.url-input-toggle{grid-row:auto;grid-column:1/span 6}.url-input-form{grid-column:1/-1;display:contents;grid-template-columns:inherit;grid-auto-rows:max-content}.url-input-form .url-input{grid-column:1/span 8;height:var(--input-height)}.reset-grid{grid-column:1/-1}