#bg{position:fixed;top:-50%;left:-50%;right:-50%;bottom:-50%;width:200%;height:200vh;background:transparent url(/Rose-Curve-Visualizer/assets/noise-transparent-21165fe9.png) repeat 0 0;background-repeat:repeat;animation:bg-animation .2s infinite;opacity:.4;visibility:visible;pointer-events:none}@keyframes bg-animation{0%{transform:translate(0)}10%{transform:translate(-5%,-5%)}20%{transform:translate(-10%,5%)}30%{transform:translate(5%,-10%)}40%{transform:translate(-5%,15%)}50%{transform:translate(-10%,5%)}60%{transform:translate(15%)}70%{transform:translateY(10%)}80%{transform:translate(-15%)}90%{transform:translate(10%,5%)}to{transform:translate(5%)}}.visualizer{display:flex;flex-direction:column;width:100%;height:100%;justify-content:center;align-items:center}.visualizer .react-p5-wrapper{flex-basis:400px}.visualizer canvas{max-height:400px!important;border-bottom:2px solid rgb(220,220,220)}.visualizer .controls{display:flex;flex-direction:column;align-items:center;width:100%;height:40%;position:relative;padding-left:1em;padding-right:1em}.visualizer :is(.parameters,.colorInputs){margin:1em;flex-basis:auto;position:absolute;height:100%}.visualizer-input{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:.5em;font-size:1.5em}.visualizer-input .input-label{width:25%;text-align:left}.slider .input{width:66%}.visualizer-input .input-value{width:25%;text-align:right}.equation{display:flex;align-items:center;justify-content:center;font-family:Literata,serif;margin-bottom:1.5rem;font-size:min(10em,10vw)}.fraction{display:flex;flex-direction:column;align-items:center;min-width:140px;font-size:2ch;line-height:1;padding-top:.4ch}.fraction .MuiSlider-root{padding:0}.fraction .input-value{font-size:1ch;font-weight:700;text-align:center;margin-bottom:.4ch}.fraction-bar{width:2ch;height:2px;background-color:#fff;margin-top:.05em;margin-bottom:.05em}.colorInputs{margin:1em;padding-top:2em;display:flex;justify-content:center}.colorPicker{display:flex;flex-wrap:wrap;width:min(500px,100%);height:100%}.shadeSelector{height:100%}.colorPicker button{border-left-color:#ffffff1f!important;width:25%;text-wrap:wrap;overflow-wrap:break-word;padding:5px;min-height:4em}.colorButton{align-self:flex-start}.hidden{visibility:hidden}@media (max-width: 1300px){.visualizer .parameters{width:90%}.colorInputs{display:flex}}:root{font-family:Raleway,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#121212;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;height:95vh}#root{display:flex;flex-direction:column;width:100%;height:100%}h1{font-size:3.2em;line-height:1.1;text-align:center}