:root{--colour-background: #CCC5B9;--colour-accent1: #B6BCAB;--colour-accent2: #A7B887;--colour-accent3: #88986C;--colour-accent4: #62783B;--colour-highlight1: #ECCF7E;--colour-highlight2: #D48C35;--colour-highlight3: #364D1A;--text-colour: #FCFCFC;--unit: .5rem;--text-size: 1.2rem;--text-button-size: 1rem;--text-header-size: 1.5rem;--border-radius: calc(.5 * var(--unit));--gap-size: calc(.5 * var(--unit));font-family:Arial,Helvetica,sans-serif;color:var(--text-colour);background:var(--colour-background)}body,html{margin:0;padding:0;max-width:100%;height:100%;border:0;overflow:hidden}#content{position:absolute;left:0;margin:0;display:flex;flex-direction:row;width:100%;height:100%;overflow:hidden;background:var(--colour-background);user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none}#machine{margin:0;padding:0;width:100%;height:100%}#info_buttons{display:flex;flex-direction:row;float:right}#about_button,#help_button,#constants_button{z-index:100}#info_buttons img{aspect-ratio:1;opacity:70%;z-index:100;width:calc(6 * var(--unit))}#user-control-parent{position:relative;z-index:6}#user-control{margin:0;display:flex;flex-direction:column;width:28vw;min-width:24rem;max-width:28rem;height:100%;overflow-y:scroll;overflow-x:hidden;background:var(--colour-accent1);padding:var(--gap-size);box-sizing:border-box;gap:var(--gap-size);z-index:6}#side-pannel-buttons{position:absolute;background:var(--colour-accent1);width:calc(4 * var(--unit));height:calc(6 * var(--unit));left:0;top:50%;transform:translate(calc(-4 * var(--unit)),-50%);z-index:20;padding:calc(.5 * var(--gap-size));border-radius:calc(var(--border-radius) * 2)}#side-pannel-buttons:hover{padding:calc(var(--gap-size));transform:translate(calc(-4 * var(--unit) - .5 * var(--gap-size)),-50%);cursor:pointer}#side-pannel-buttons div{display:flex;border-radius:calc(var(--border-radius) * 2);background-color:var(--colour-accent2);justify-content:center;align-items:center;width:100%;height:100%}#side-pannel-buttons img{margin:var(--gap-size) 0 var(--gap-size) 0;width:calc(3 * var(--unit))}#configuration{display:flex;flex-direction:column;gap:calc(2 * var(--gap-size));padding:var(--gap-size);background:var(--colour-accent2);border-radius:var(--border-radius);font-size:var(--text-size)}.custom-variables{display:flex;padding:var(--gap-size);background:var(--colour-accent2);border-radius:var(--border-radius);font-size:var(--text-size)}.custom-variables>custom-variables{width:100%}#configuration>p{display:block;text-align:center;font-weight:700;font-size:var(--text-header-size);margin:calc(.3 * var(--unit)) 0;color:var(--text-colour)}#configuration>label{margin:calc(-1 * var(--gap-size)) 0 0 0;padding:0;font-weight:700}#configuration>input{font-size:var(--text-button-size)}#control_buttons{display:flex;flex-direction:column;justify-content:center}#config_buttons{display:flex;flex-direction:row;justify-content:center;gap:calc(var(--gap-size) * 3);padding:var(--gap-size) 0 var(--gap-size) 0;width:100%}.TimeButtons{display:flex;flex-direction:row}.TimeButton{display:flex;font-size:var(--text-button-size);max-height:calc(4*var(--unit));justify-content:center;align-items:center;width:100%}.TimeButton>img{height:70%}#configuration button{font-size:var(--text-button-size);margin:calc(.25 * var(--unit)) 0 0 0}#motor-speed{accent-color:var(--colour-highlight3)}.arrow{visibility:hidden;position:absolute;width:calc(var(--unit) * 2);aspect-ratio:1;color:var(--colour-highlight2);z-index:6;user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none}.arrow:hover{cursor:pointer}.nodrag{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none;pointer-events:none}#components-area{display:flex;flex-direction:column;background:var(--colour-accent2);padding:0 var(--border-radius) var(--border-radius)var(--border-radius);border-radius:var(--border-radius)}#components-area p{display:block;text-align:center;font-weight:700;font-size:var(--text-header-size);margin:calc(.5 * var(--unit)) 0;color:var(--text-colour)}#components-list{display:grid;background:var(--colour-accent3);grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(4,1fr);gap:calc(2 * var(--gap-size));padding:calc(2 * var(--gap-size));grid-column-start:1;grid-column-end:3;box-sizing:border-box;border-radius:var(--border-radius);overflow:hidden}.component{display:flex;flex-direction:column;background:var(--colour-accent4);border-radius:var(--border-radius);position:relative;font-size:var(--text-button-size);font-weight:700;text-align:center;align-items:center;justify-content:space-between;gap:.5rem;user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none;padding:.5rem}.component-label{width:100%;display:flex;flex:1 0 auto;justify-content:center;align-items:center}.component-img{width:100%;aspect-ratio:1;display:flex;justify-content:center;align-items:center}@media (min-height: 1100px){#components-list{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr)}.component-img{width:80%}}.component img{width:100%;aspect-ratio:1;user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none;pointer-events:none}.placed-component{position:absolute;pointer-events:all}.placed-component.dragged{opacity:95%;cursor:grabbing}.vShaft{z-index:2}.hShaft{z-index:1}.crossConnect,.integrator,.functionTable,.differential,.outputTable,.motor,.multiplier,.gearPair,.dial{z-index:3}.placed-component.selected{opacity:80%;background-color:var(--colour-accent2)}#fullscreen{position:absolute;display:flex;width:100vw;height:100vh;z-index:100;background-color:#0006;color:var(--text-colour);visibility:hidden}#fullscreen .center{position:absolute;top:50%;left:50%;opacity:100%;min-width:70%;width:70%;max-height:80vh;transform:translate(-50%,-50%)}#fullscreen .content-background{background:var(--colour-accent1);border-radius:var(--border-radius);padding:var(--gap-size);width:100%;height:100%}#fullscreen label{font-size:var(--text-header-size);font-weight:700}#fullscreen p{margin:0;text-decoration:underline}#fullscreen .content{display:flex;flex-direction:column;box-sizing:border-box;padding:var(--gap-size);gap:calc(5 * var(--gap-size));background:var(--colour-accent2);border-radius:var(--border-radius);text-align:center;width:100%;height:100%;font-size:1.5rem}#about .content span{text-align:left}#grid{margin:0;padding:0;width:100%;height:100%;background:none}.grid-cell{position:absolute}.locked-cell{background:pink}.highlighted-cell{background:var(--colour-highlight3);z-index:4;opacity:30%;cursor:grabbing}.popup{position:absolute;background:var(--colour-accent2);border-radius:var(--border-radius);border-color:var(--colour-accent3);border-style:solid;border-width:calc(var(--border-radius) / 2);padding:var(--gap-size);font-size:calc(var(--text-size) * 1.2);text-decoration:bold;z-index:10;white-space:nowrap;box-sizing:border;visibility:hidden}#shaft-popup{display:flex;flex-direction:column}#shaft-popup>div{display:flex;flex-direction:row;justify-content:center;gap:10%}#shaft-popup>div>button{width:100%}#integrator-popup{display:flex;width:auto;flex-direction:column}#integrator-popup textarea{min-width:10vw;min-height:3rem}#cross-connect-popup{display:flex;flex-direction:row}#multiplier-popup{display:flex;width:auto;flex-direction:column}#multiplier-popup textarea{min-width:10vw;min-height:3rem}#multiplier-popup>label{font-weight:700}#gear-pair-popup{display:flex;flex-direction:column;justify-content:center;min-width:10vw}#gear-pair-popup>div{display:flex;justify-content:center;flex-direction:row}#gear-pair-popup>input{max-width:100%}#gear-pair-popup>label{font-weight:700}#label-popup{display:flex;flex-direction:column}#label-popup-alignment{display:inline-flex;flex-direction:column;text-align:center;background-color:var(--colour-accent3);border-radius:var(--border-radius);justify-content:center;margin:var(--gap-size) auto 0 auto;width:100%;padding:calc(var(--gap-size) / 2) 0;gap:calc(var(--gap-size));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#label-popup-buttons{display:flex;flex-direction:row;text-align:center;margin:0 auto;gap:calc(var(--gap-size) * 2)}.label-popup-align{content:"";-webkit-appearance:none;-moz-appearance:none;appearance:none;width:0;height:0;display:none}.label-popup-align~label{padding:0 var(--gap-size);text-align:center;border-radius:var(--border-radius)}.label-popup-align:checked~label{background-color:var(--colour-highlight3)}.label-popup-align:not(:checked)~label{background-color:var(--colour-accent4)}#function-table-fn{min-width:97%;min-height:3rem}.tooltip{position:relative;color:var(--text-colour)}.tooltip .tooltiptext{visibility:hidden;background-color:var(--colour-accent2);text-align:center;padding:var(--gap-size);border-radius:var(--border-radius);display:inline;white-space:nowrap;border-style:solid;border-width:calc(var(--gap-size) * .5);border-color:var(--colour-accent3);box-sizing:border-box;position:absolute;z-index:20;top:100%;left:50%;pointer-events:none;transform:translate(-50%);opacity:0;transition:opacity .3s}.tooltip.left .tooltiptext{top:50%;left:0%;transform:translate(-100%,-50%)}.tooltip.right .tooltiptext{top:50%;left:100%;transform:translateY(-50%)}.tooltip.top .tooltiptext{top:0%;left:50%;transform:translate(-50%,-100%)}.tooltip .tooltiptext:after{content:"";position:absolute;top:0%;left:50%;margin-left:-5px;border-style:solid;border-width:var(--gap-size);border-color:var(--colour-accent2) transparent transparent transparent;box-sizing:border-box}.tooltip:hover .tooltiptext{visibility:visible;opacity:1;transition:opacity .3s}