.app{width:calc(100vw - (100vw - 100%));height:100vh;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;position:relative}.app .topbar{position:fixed;top:25px;left:25px;width:calc(100vw - 50px);overflow-x:scroll;background-color:#fff;border:1px solid black}.app .sidebar{position:fixed;top:112px;left:25px}.app .config{position:fixed;top:112px;right:25px}.app .credits{position:fixed;right:25px;bottom:25px}.react-p5-wrapper{overflow:hidden;width:100vw;height:100vh}.char-list{display:flex;flex-direction:row;padding:0;margin:0}.char-list .char{border-left:1px solid black;padding:15px;width:100%;height:100%;min-width:30px;min-height:30px;display:flex;align-items:center;justify-content:center}.char-list .char:hover{text-transform:uppercase;text-decoration:line-through;cursor:pointer}.char-list .char:first-child{border-left:0}.char-list .char.active{color:#fff;background-color:#000}.char-list .char.disabled{color:#ddd;background-color:#eee}.current-text{display:flex;width:100%;margin:0;justify-content:stretch}.current-text input{width:100%;font-size:1rem;border:1px solid black;padding:10px 15px}.mutation{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto auto;gap:7.5px}.mutation .label{grid-column:1/2;grid-row:1/2;font-size:.75rem;font-weight:800;text-transform:uppercase}.mutation .label .midi-mapping{width:1rem;font-size:.75rem;text-align:center;color:#fff;background-color:#ddd;padding:1px 2px;margin-left:10px}.mutation .current-value{grid-column:2/3;grid-row:1/2;font-size:.75rem;font-weight:800;text-transform:uppercase;text-align:right;background-color:transparent;width:100%}.mutation .midi-mapping-container{grid-column:2/3;grid-row:3/4;font-weight:400;text-align:right;width:100%}.mutation .mutate{grid-column:1/3;grid-row:2/3;-webkit-appearance:none;width:100%;height:7.5px;background:transparent;outline:none;border:1px solid black;border-radius:0}.mutation .mutate::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:7.5px;height:22.5px;background:white;cursor:pointer;border:1px solid black;border-radius:0}.mutation .mutate::-moz-range-thumb{width:7.5px;height:22.5px;background:white;cursor:pointer;border:1px solid black;border-radius:0}.mutations{display:grid;grid-template-columns:repeat(1,1fr);gap:5px}.sidebar .box{width:calc(100vw - 50px);background-color:#fff;border:1px solid black;box-sizing:border-box;padding:25px;display:flex;flex-direction:column;gap:25px}.sidebar .box .title{font-size:3rem;line-height:2.5rem;margin:0;text-transform:uppercase}.sidebar .box .box-controls{display:grid;grid-template-columns:1fr 1fr;line-height:0}.sidebar .box .box-controls .box-control-group{display:flex;flex-direction:row;gap:7.5px;text-transform:uppercase}.sidebar .box .box-controls .box-control-group.left{grid-column:1/2}.sidebar .box .box-controls .box-control-group.right{grid-column:2/3;justify-self:flex-end}.sidebar .box .box-controls .box-control-group .box-control{line-height:1rem}.sidebar .box .box-controls .box-control-group .box-control:hover{text-transform:uppercase;text-decoration:line-through;cursor:pointer}.sidebar .box .box-controls .box-control-group .box-control.right{justify-self:flex-end}.sidebar .box .box-content{display:flex;flex-direction:column;gap:25px}.sidebar .box .box-content>*{margin:0 -25px;padding:25px 25px 0;border-top:1px solid black}.sidebar .box .box-content>* h2{margin:0 0 25px;line-height:1}@media only screen and (min-device-width: 480px){.sidebar .box{max-width:300px}}.sidebar .box.hidden>.sidebar-content{height:0;visibility:hidden;margin-top:-25px}.credits{font-size:.75rem;text-align:right;line-height:.9rem;border:1px solid black;background-color:#fff}.credits a{display:block;color:#000;text-decoration:none;padding:5px 10px}.credits a:hover{text-transform:uppercase;text-decoration:line-through;cursor:pointer}.credits a:hover{text-transform:initial}.config .box{width:calc(100vw - 50px);background-color:#fff;border:1px solid black;box-sizing:border-box;padding:25px;display:flex;flex-direction:column;gap:25px}.config .box .title{font-size:3rem;line-height:2.5rem;margin:0;text-transform:uppercase}.config .box .box-controls{display:grid;grid-template-columns:1fr 1fr;line-height:0}.config .box .box-controls .box-control-group{display:flex;flex-direction:row;gap:7.5px;text-transform:uppercase}.config .box .box-controls .box-control-group.left{grid-column:1/2}.config .box .box-controls .box-control-group.right{grid-column:2/3;justify-self:flex-end}.config .box .box-controls .box-control-group .box-control{line-height:1rem}.config .box .box-controls .box-control-group .box-control:hover{text-transform:uppercase;text-decoration:line-through;cursor:pointer}.config .box .box-controls .box-control-group .box-control.right{justify-self:flex-end}.config .box .box-content{display:flex;flex-direction:column;gap:25px}.config .box .box-content>*{margin:0 -25px;padding:25px 25px 0;border-top:1px solid black}.config .box .box-content>* h2{margin:0 0 25px;line-height:1}@media only screen and (min-device-width: 480px){.config .box{max-width:300px}}.config .box.hidden{display:none}.config .box .title,.config .box .box-content{text-align:right}.config .box .box-content .midi-mappings{display:grid;grid-template-columns:repeat(2,auto);gap:5px;line-height:1}.config .box .box-content .midi-mappings .midi-mapping{text-align:left;display:flex}.config .box .box-content .midi-mappings .midi-mapping .label{font-size:.75rem;font-weight:800;text-transform:uppercase;flex:1;align-self:center}.config .box .box-content .midi-mappings .midi-mapping .value{display:inline-block;width:1rem;align-self:center}@font-face{font-family:Space Grotesk;src:local("Space Grotesk"),url(/assets/SpaceGrotesk-VariableFont_wght-306e2f68.ttf) format("ttf")}:root{font-family:Space Grotesk,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#000;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0;padding:0}input{font-family:Space Grotesk,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;color:#000;background-color:#fff;border:none;outline:none}button{border:1px solid black;color:#000;background-color:#fff;display:block;width:100%;margin:10px 0;padding:10px 15px;text-transform:uppercase}button:hover{text-decoration:line-through;cursor:pointer;color:#fff;background-color:#000}button[disabled]{color:#ddd;background-color:#fff;cursor:not-allowed}button[disabled]:hover{text-decoration:none}