#root{display:flex;flex-direction:column;position:fixed;height:100%;width:100%}body{background:var(--bg);margin:auto}*{--bg: #1e1e20;--light-dark: #313136;--warning: #d1494f;--acc1: #64a5ff;--acc2: #6060ff;--f1: #FFFFFF;--f2: #9b949a}.navbar{height:40pt;padding:max(1.6vh,8pt) max(2.6vh,15pt);display:flex;justify-content:space-between}.navbar__section{display:inline-block}.logo{display:inline-block;position:relative}.logo__text{float:left}.logo__text__title{font-weight:600;font-size:max(1.8vh,14pt)}.logo__text__subtitle{font-size:max(.9vh,9pt);color:var(--f2)}.logo__version{float:left;background:var(--light-dark);font-size:max(1vh,10pt);font-weight:500;padding:1pt 5pt;border-radius:5pt;margin:3pt 10pt}.logo__link{position:absolute;left:0;top:0;width:100%;height:100%}.body{display:flex;flex-grow:1;flex-direction:column;justify-content:center;align-items:center}h1{font-size:max(5vh,26pt);font-weight:600;color:var(--acc1);margin:max(5vh,30pt) 0 max(1.5vh,10pt) 0}h2{font-size:max(4vh,22pt);font-weight:600;color:var(--acc1);margin:max(5vh,30pt) 0 max(1.5vh,10pt) 0}.text-body--large{font-size:max(2vh,16pt);font-weight:400;color:var(--f1);text-align:center;width:80%;margin:max(2vh,10pt) 0 max(2vh,15pt) 0}.body__section{margin:max(2vh,15pt) 0;display:inline-block;width:60%;text-align:center}.button{position:relative;cursor:pointer;display:inline-block;align-items:center;justify-content:center;margin:max(.8vh,4pt) max(1vh,4pt);padding:max(1vh,5pt) max(4vh,20pt);background:var(--light-dark);border-radius:10000px;border:1px solid #48484d}.button--highlight{background:var(--acc2);border:1px solid #B199DD}.button__text{width:auto;font-size:max(2.3vh,14pt);font-weight:500}.button__link{position:absolute;top:0;left:0;width:100%;height:100%}.checkbox{position:relative;font-size:max(2.3vh,14pt);cursor:pointer;color:var(--f1);padding-left:max(4vh,24pt);margin:max(1vh,5pt) max(.9vh,5pt)}.checkbox--checked{color:var(--acc1)}.checkbox__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkbox__checkmark{position:absolute;top:0;left:0;height:max(2.2vh,15pt);width:max(2.2vh,15pt);border:2px solid var(--f1);border-radius:50%}.checkbox__input:checked~.checkbox__checkmark{border:2px solid var(--acc2);background:var(--acc2)}.play-pause-button{cursor:pointer;margin:max(1vh,6pt);display:flex;height:max(7vh,45pt);width:max(7vh,45pt);border-radius:50%;background:var(--light-dark);border:1px solid #48484d}.play-pause-button__img{margin:max(2vh,13pt)}.func-button,.speed-button{position:relative;margin:max(1vh,6pt);display:inline-block;cursor:pointer;background:var(--light-dark);border:1px solid #48484d;padding:max(.3vh,2pt) max(1.1vh,8pt);border-radius:max(1vh,6pt)}.func-button--warning{background:var(--warning);border:1px solid #E1777B}.func-button__text,.speed-button__speed{font-size:max(2.1vh,14pt);font-weight:600;color:var(--f1)}.func-button__text{font-weight:400}.canvas-controller,.anim-controller{width:80%}.canvas-controller__toggles-wrapper,.canvas-controller__buttons-wrapper,.anim-controller__buttons-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:max(1.2vh,8pt)}.anim-controller__toggles-wrapper{display:flex;width:100%;flex-wrap:wrap;align-items:center;justify-content:center}.anim,.canvas__renders{position:relative;display:block}.canvas__renders>*,.anim>*{display:block;position:absolute;top:0;left:0;width:100%;height:100%}.draw-canvas{cursor:pointer;touch-action:none}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde}