@import url(https://fonts.googleapis.com/css2?family=Oswald:wght@200;300);
:root{--slider-height:20px;--toggle-label-width:60px;--label-width:26%;--label-line-height:1.6rem;--input-thumb-colour:#000;--spacing:6px;--triple-space:calc(var(--spacing)*3);--margin-x:0.8rem;--margin-y:0.6rem;--border-color:#ccc;--border-size:1px;--colour-blue:#3250ff;--colour-red:#ff5032;--axis-size:10px;--article-inst-width:18rem;--article-inst-width-vw:34vw}article,button,div,input,main,select,span{box-sizing:border-box}select{font-size:1rem}html{font-size:1em}body{background-color:#edeef0;font-family:Helvetica Neue,Open Sans,sans-serif;font-size:1rem;line-height:1;margin:0 calc(var(--spacing)*3)}h1{font-variation-settings:"wdth" 200,"wght" 200;font-size:4vw;margin:var(--margin-y) var(--margin-x);position:absolute;z-index:2;color:#fff}h1,h2{font-display:swap;font-family:Oswald,sans-serif}.article{padding:calc(var(--spacing)*2) 0;margin-top:calc(var(--spacing)*2);border-top:1px solid var(--border-color)}.article__heading{font-size:1.5rem;margin:0 0 1rem}.article__body{columns:24em}p{font-variation-settings:"wdth" 280,"wght" 200;line-height:1.35rem;margin:0}.article p+p{margin-top:var(--spacing)}.bar{background-image:linear-gradient(90deg,var(--colour-red),var(--colour-blue));height:10px}.status-stopped .article--instructions{padding:calc(var(--spacing)*2);left:calc(50% - var(--article-inst-width)/2)}.article--instructions{align-items:center;background-color:#000;border:1px solid #fff;border-radius:50%;color:#fff;display:flex;flex-direction:column;justify-content:center;text-align:center;top:calc(50% - var(--article-inst-width)/2);width:var(--article-inst-width);height:var(--article-inst-width);z-index:1}.article--instructions,.article--instructions .article__heading{position:absolute;left:-999em}.article--instructions p{font-family:Oswald,sans-serif;font-size:1.9rem;line-height:1.3}.article--instructions p+p{margin-top:12px}.controls_heading{font-size:1.2rem;line-height:1.2;margin:0}.wrapper{margin:0 auto;max-width:960px;position:relative}.video-wrapper{background-color:#000;height:0;position:relative;padding-bottom:56.25%;width:100%}.video-wrapper canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important}.audio-output{color:#fff;position:absolute;margin:var(--margin-y) var(--margin-x);top:6vw;left:0;z-index:1}.audio-output dd,.audio-output dt{display:block;float:left;margin-inline-start:0;min-width:80px;padding-right:var(--spacing)}.audio-output dt{clear:left}.audio-controls,.visual-controls{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap}.visual-controls{background-color:rgba(0,0,0,.2);border:1px solid #4f4f4f;color:#fff;padding:0 var(--spacing);position:absolute;top:var(--triple-space);right:calc(var(--spacing)*2);width:360px;z-index:1}.form__heading{position:absolute;left:-999em}.visualiser__x-axis,.visualiser__y-axis{font-size:.8rem;text-align:center}.visualiser__y-axis{height:100%;position:absolute;left:-15px;top:var(--axis-size)}.visualiser__x-axis{display:flex;flex-flow:row nowrap;justify-content:space-between}.visualiser__y-axis__end-val,.visualiser__y-axis__label,.visualiser__y-axis__start-val{position:absolute;transform:rotate(-90deg);width:var(--axis-size)}.visualiser__y-axis__label{padding:0;top:50%}.visualiser__y-axis__start-val{bottom:0}.audio-controls{padding:calc(var(--spacing)*2) 0;margin-top:calc(var(--spacing)*2)}.audio-controls .form__heading,.visual-controls .form__heading{flex-basis:100%}.visual-controls .controls__select-input{flex-basis:50%}.audio-controls .fieldset{flex-basis:50%;display:flex;flex-direction:row;justify-content:flex-start;padding:var(--spacing) 0}.audio-controls .controls__label{flex-basis:30%;line-height:var(--label-line-height)}.audio-controls .controls__input{flex-basis:60%;padding:3px}.range-wrapper{display:flex;flex-basis:100%;justify-content:flex-start;padding:.3rem 0}.range__input-wrapper{flex-basis:50%;position:relative;margin-right:6%}.range-wrapper .controls__label{flex-basis:25%;margin:0;font-size:1rem;line-height:var(--label-line-height);font-weight:400}.range__value{margin:0;flex-basis:14%}.range__input{-webkit-appearance:none;background-color:hsla(0,0%,100%,.5);border-radius:12px;border:0;width:100%;position:relative}.range__input:focus{outline:1px dotted #212121;outline:5px auto -webkit-focus-ring-color}.range__input::-webkit-slider-thumb{-webkit-appearance:none;background-color:#fff;border:1px solid #bdc3c7;width:20px;height:20px;border-radius:10px;cursor:pointer}.range__input-wrapper .controls__select-wrapper,.range__input-wrapper .controls__toggle-wrapper{flex-basis:50%}.controls__toggle-wrapper{background-color:#363434;border-radius:3px;height:calc(var(--slider-height) + 2px);position:relative;width:var(--toggle-label-width)}.controls__toggle-input{position:absolute;top:0;left:0;height:17px;width:calc(var(--toggle-label-width) - 3px);-webkit-appearance:none}.controls__toggle-label{color:#fff;display:flex;font-size:.85rem;letter-spacing:1px;position:relative}.controls__toggle-label .label__text{position:absolute;left:-999em}.controls__toggle-label:before{background:var(--colour-red);border:1px solid #000;border-radius:3px;content:" ";position:absolute;height:var(--slider-height);width:calc(var(--toggle-label-width)/2);z-index:2}.controls__toggle-label:after{content:"Off\00a0\00a0On";position:absolute;top:5px;left:5px;height:var(--slider-height);width:var(--toggle-label-width);z-index:3}.controls__toggle-label:after,.controls__toggle-label:before{pointer-events:none}.controls__toggle-input+.controls__toggle-label:before{left:0}.controls__toggle-input:checked+.controls__toggle-label:before{left:calc(var(--toggle-label-width)/2)}.duel-range-slider{position:relative}.duel-range-slider label{position:absolute;left:-999em}.duel-range-slider input[type=range]{overflow:hidden;pointer-events:none;position:absolute;left:0;top:5%}.duel-range-slider input[type=range]::-webkit-slider-thumb{pointer-events:all;position:relative;z-index:1;outline:0}.duel-range-slider input::-moz-range-thumb{pointer-events:all;z-index:10}.duel-range-slider input::-moz-range-track{position:relative;border:0;z-index:-1}.duel-range-slider input:last-of-type{-moz-appearance:none;background:none transparent;border:0}.duel-range-slider input[type=range]::-moz-focus-outer{border:0}.duel-range-slider input[type=range]::-ms-thumb{-ms-appearance:none;pointer-events:all;position:relative;z-index:10;border:0}.keyboard__button{background-color:#212121;border:1px solid #000;border-right:0;color:#fff;width:4%;height:80px}.keyboard__button:last-of-type{border-right:1px solid #000}.keyboard__button:focus,.keyboard__button:hover{background-image:linear-gradient(grey,#fff 5%);color:#000}.keyboard__button:active{background-color:grey}@media (min-width:950px){.visual-controls .controls__select-input{background-color:#000;border:1px solid hsla(0,0%,100%,.5);color:#fff}}@media (max-width:960px){.status-stopped .article--instructions{left:calc(50% - var(--article-inst-width-vw)/2)}.article--instructions{top:calc(50% - var(--article-inst-width-vw)/2);width:var(--article-inst-width-vw);height:var(--article-inst-width-vw)}.article--instructions p{font-size:3vw}.visual-controls{background-color:transparent;border:0;color:#000;padding:calc(var(--spacing)*2) 0;position:static;width:auto}.range__input{border:1px solid rgba(0,0,0,.5)}.range__input::-webkit-slider-thumb{background-color:var(--colour-blue)}}@media (max-width:650px){body{margin:0 calc(var(--spacing)*2)}.audio-controls{border-top:var(--border-size) solid var(--border-color);margin-top:0}.audio-controls .fieldset{flex-basis:100%}.visualiser__x-axis,.visualiser__y-axis{display:none}.keyboard{display:flex;flex-wrap:wrap;justify-content:space-between}#key_0{flex-basis:100%;height:40px;border-top:0;border-bottom:0}.keyboard__button{width:8.3%;text-indent:0}.range-wrapper{padding:var(--spacing) 0}.audio-controls .controls__label,.range-wrapper .controls__label{flex-basis:var(--label-width)}}@media (max-width:540px){.page__heading{font-size:1.5rem}.audio-output{left:auto;right:0;overflow:hidden;top:var(--triple-space);text-align:right}.audio-output dt{position:absolute;right:-999em}.audio-output dd{float:right}.audio-output dd:last-of-type{clear:right}.range-wrapper{justify-content:start;padding:var(--spacing) 0}}@media (max-width:400px){.audio-output{top:54px;left:0;right:auto;text-align:left}.page__heading{color:#000;position:static;margin:var(--margin-y) 0}.article--instructions{top:25%}.audio-controls .controls__input{flex-basis:70%}}