:root{--blue-05: hsl(210, 62%, 5%);--blue-10: hsl(213, 64%, 10%);--blue-20: hsl(216, 68%, 20%);--blue-30: hsl(219, 72%, 30%);--blue-40: hsl(222, 76%, 40%);--blue-50: hsl(225, 80%, 50%);--blue-60: hsl(228, 84%, 60%);--blue-70: hsl(231, 88%, 70%);--blue-80: hsl(234, 92%, 80%);--blue-90: hsl(237, 96%, 90%);--gray-00: hsl(0, 0%, 0%);--gray-10: hsl(0, 0%, 10%);--gray-20: hsl(0, 0%, 20%);--gray-30: hsl(0, 0%, 30%);--gray-40: hsl(0, 0%, 40%);--gray-50: hsl(0, 0%, 50%);--gray-60: hsl(0, 0%, 60%);--gray-70: hsl(0, 0%, 70%);--gray-80: hsl(0, 0%, 80%);--gray-90: hsl(0, 0%, 90%);--gray-99: hsl(0, 0%, 100%);--green-05: hsl(135, 62%, 5%);--green-10: hsl(138, 64%, 10%);--green-20: hsl(141, 68%, 20%);--green-30: hsl(144, 72%, 30%);--green-40: hsl(147, 76%, 40%);--green-50: hsl(150, 80%, 50%);--green-60: hsl(153, 84%, 60%);--green-70: hsl(156, 88%, 70%);--green-80: hsl(159, 92%, 80%);--green-90: hsl(162, 96%, 90%);--red-05: hsl(29, 62%, 5%);--red-10: hsl(27, 64%, 10%);--red-20: hsl(24, 68%, 20%);--red-30: hsl(21, 72%, 30%);--red-40: hsl(18, 76%, 40%);--red-50: hsl(15, 80%, 50%);--red-60: hsl(12, 84%, 60%);--red-70: hsl(9, 88%, 70%);--red-80: hsl(6, 92%, 80%);--red-90: hsl(3, 96%, 90%);--pink-50: #d6e}:root{--transition-fast: .2s;--transition-medium: .33s;--transition-slow: 1.5s}@keyframes expand{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%{opacity:.25}to{opacity:1}}@keyframes slide-in-left{0%{transform:translate(-100vw)}to{transform:translate(0)}}@keyframes slide-in-right{0%{transform:translate(100vw)}to{transform:translate(0)}}html{min-height:100%;overscroll-behavior-y:contain}body{background:var(--gray-00);color:var(--gray-99);font-family:sans-serif;min-height:100%;margin:0;overflow-x:hidden;-webkit-user-select:none;user-select:none}.slide-in-left{animation-duration:var(--transition-medium);animation-name:slide-in-left}.slide-in-right{animation-duration:var(--transition-medium);animation-name:slide-in-right}.ButtonPrimary{background:linear-gradient(var(--blue-70),var(--blue-60));border-radius:2rem;border:.1rem solid var(--blue-60);box-shadow:var(--blue-60) 0 0 .5rem;box-sizing:border-box;color:var(--gray-00);display:inline-block;font-size:1rem;margin:.75rem;min-width:10rem;padding:.75rem 1rem;text-align:center;text-decoration:none;transition:background var(--transition-fast)}.ButtonPrimary:active{background:linear-gradient(var(--blue-60),var(--blue-70))}.ButtonPrimary:hover{box-shadow:var(--blue-60) 0 0 1rem .1rem}.ButtonPrimary--small{border-radius:.25rem;border:1px solid;box-shadow:none;color:var(--gray-00);min-width:5rem;padding:.25rem .5rem}.ButtonPrimary--small:active{background:linear-gradient(var(--blue-20),var(--blue-70));border-color:var(--blue-20)}.ButtonPrimary--small:hover{background:linear-gradient(var(--blue-60),var(--blue-70));box-shadow:none}.ButtonSecondary{background:var(--green-60);border-radius:1rem;color:var(--gray-00);font-size:.75rem;margin:1rem .5rem;padding:.5rem;text-decoration:none;transition-duration:var(--transition-fast)}.ButtonSecondary:active{background:var(--green-20)}.ButtonSecondary:hover{background:var(--green-40);transition-duration:var(--transition-fast)}.HollowButton{align-items:center;background:linear-gradient(var(--blue-20),var(--gray-00),var(--blue-20));border-radius:1rem;border:1px solid var(--blue-60);box-shadow:var(--blue-60) 0 0 .5rem .1rem;color:var(--gray-99);display:inline-flex;font-size:.75rem;margin:1rem .5rem;outline:0;padding:.33rem 1rem;text-decoration:none;transition-duration:var(--transition-fast)}.HollowButton:active{background:linear-gradient(var(--gray-00),var(--gray-00),var(--blue-20))}.HollowButton:hover{box-shadow:var(--blue-60) 0 0 1rem .1rem;transition-duration:var(--transition-fast)}.HollowButton--active{background:#000;border:1px solid var(--blue-30);box-shadow:none}.HollowButton--active:active{background:#000}.HollowButton--active:hover{box-shadow:none}.InputLabel{display:inline-block;padding-right:.5rem;text-align:right;vertical-align:middle;width:6rem}.InputSelect{-moz-appearance:none}.InputSelect[disabled]{visibility:hidden}.InputSelect option{background:var(--gray-90)}.LinkExternal{color:var(--green-60);font-weight:900;text-decoration:none;transition:color var(--transition-fast)}.LinkExternal:hover{color:var(--green-80)}.CheckboxLabelled__Checkbox{display:inline-block;margin:1rem .5rem;text-align:center;width:12rem}.RangeLabelled{display:flex;flex-direction:column;flex-grow:1;height:3rem;justify-content:space-around;margin:1rem 1.5rem;max-width:95vw;text-align:center;width:18.5rem}.RangeLabelled__Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--gray-99);height:.1rem;outline:0}.RangeLabelled__Input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to bottom,var(--gray-99) 0%,var(--gray-90) 55%,var(--blue-80) 80%);border-radius:.3rem;box-shadow:0 .2rem .2rem #00000080;height:.8rem;top:0;width:.8rem}.RangeLabelled__LabelContainer{display:flex;justify-content:space-between;padding:0 .33rem}.ControlModule{border:.1rem solid var(--blue-90);border-radius:1rem;display:inline-block;margin:.75rem;padding:.75rem}.ControlModule__Container{display:table}.ControlModule__Input{display:table-row;font-size:.75rem;padding:.75rem}.ControlModule__Input__Label{display:table-cell;padding:.5rem .5rem .25rem .25rem;text-align:left}.ControlModule__Output{display:table-cell;height:.75rem;padding-left:.25rem;min-width:2.25rem}.ControlModule__Range{display:table-cell;height:.75rem;width:10rem}.ControlModule__Select{width:10rem}.ControlModule__Title{font-size:1rem;font-weight:600;margin:0;padding-bottom:.75rem}.ControlPad{cursor:crosshair;position:relative}.ControlPad__Canvas{background:radial-gradient(circle,var(--blue-60) 0%,var(--gray-00) 17.5%,var(--gray-00) 91.67%,var(--blue-20) 100%)}.ControlPad__Message{align-items:center;animation-direction:alternate;animation-duration:var(--transition-slow);animation-iteration-count:infinite;animation-name:pulse;animation-timing-function:ease-out;bottom:0;color:var(--blue-90);display:flex;font-size:1.25rem;font-weight:700;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;text-shadow:var(--blue-10) .1rem .1rem;top:0;transition:opacity 1s}.Navigation{display:flex;flex-direction:row;justify-content:center}.spinner{height:8rem;margin:8rem auto;position:relative;width:8rem}.spinner_el{height:100%;left:0;position:absolute;top:0;width:100%}.spinner_el:before{animation:spinner-el-fade-delay 1.2s infinite ease-in-out both;background-color:var(--green-80);content:"";display:block;height:5%;margin:0 auto;width:15%}.spinner_el2{transform:rotate(30deg)}.spinner_el3{transform:rotate(60deg)}.spinner_el4{transform:rotate(90deg)}.spinner_el5{transform:rotate(120deg)}.spinner_el6{transform:rotate(150deg)}.spinner_el7{transform:rotate(180deg)}.spinner_el8{transform:rotate(210deg)}.spinner_el9{transform:rotate(240deg)}.spinner_el10{transform:rotate(270deg)}.spinner_el11{transform:rotate(300deg)}.spinner_el12{transform:rotate(330deg)}.spinner_el2:before{animation-delay:-1.1s}.spinner_el3:before{animation-delay:-1s}.spinner_el4:before{animation-delay:-.9s}.spinner_el5:before{animation-delay:-.8s}.spinner_el6:before{animation-delay:-.7s}.spinner_el7:before{animation-delay:-.6s}.spinner_el8:before{animation-delay:-.5s}.spinner_el9:before{animation-delay:-.4s}.spinner_el10:before{animation-delay:-.3s}.spinner_el11:before{animation-delay:-.2s}.spinner_el12:before{animation-delay:-.1s}@keyframes spinner-el-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}.table-center{margin-left:auto;margin-right:auto}.About{color:var(--blue-90);margin:1rem;text-align:justify}@media (min-width: 32rem){.About{margin-left:auto;margin-right:auto;max-width:32rem;text-align:justify}}.About__Title{font-weight:500;text-align:center}.ControlPadPage{align-items:center;display:flex;flex-direction:column}.ControlPadSettings{align-items:center;animation-duration:var(--transition-medium);animation-name:fade-in;display:flex;flex-direction:column}.Instrument{align-items:center;display:flex;flex-direction:column}.KeyboardSettings{align-items:center;animation-duration:var(--transition-medium);animation-name:fade-in;display:flex;flex-direction:column}.Settings{align-items:center;display:flex;flex-direction:column}