:root{--c-graph: #FDF;--c-bg: #FBF;--c-pri: #90F;--c-dis: #A6F;--c-sec: #FFC;--c-acc: #0A0;--font-s: 16px;--ui-pad: 100px;--ui-height: 60px;--ui-el-h: 40px;--ui-el-w: 80px}*{margin:0;padding:0;box-sizing:border-box;font-family:ab-kokikaku,sans-serif;font-weight:400;font-style:normal;font-size:var(--font-s);color:#000}html,body{height:100dvh;width:100%;background-color:var(--c-bg);color:var(--c-pri);overflow:hidden}main{width:100%;height:100%;overflow:hidden}#ilogo{position:fixed;bottom:0;padding-left:10px;height:100px;width:100vw}#GRAPH{position:absolute}#UI-wrapper{position:fixed;height:var(--ui-height);margin-left:calc(var(--ui-pad) - 10px);width:calc(100vw - (var(--ui-pad) * 2) + 20px);justify-content:space-between}#form-wrapper,#audio-warpper{height:100%;padding:0 10px;gap:5px}#username:disabled{color:var(--c-dis)!important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus{-webkit-text-fill-color:var(--c-pri)!important;background-color:#ccc}#loginbtn{width:var(--ui-el-h)}#editbtn{display:none}#recbtn{color:#fff;width:var(--ui-el-h);height:var(--ui-el-h);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKJSURBVHgB1VqNmYIwDI1OwAhsIBscG5wbyAa6gWzijXA3Ad4E6gTqBLhBrpWgoQSOnwLlfZdPLC0mzUtKm1uABSCApz7WSlZKfCUBZG0e63YjOSu5KDkusu/TQCutZK8kUYId5aQkwszoccAUT3soLslhcENqFE/JEzsla60IMvqQ0YGSUEmM9V7bg22QQifhx3KlvQ7P9Ig+0nOv1ryhHrQRZl0rHoIlkGeuglfX0AdEGfOhOxgI5M3UCqUE5e25tf53fcEb7YygQDTTXWued0VFzG3aDE6nUp7p4RlGpI0YYLhvFNrU6OIZ+pz+G7BvbfHAEBgR13XknBss27QFZSc+sZ7U6cCpA44Bi6t3bN40Zz8Ex0CLnewFWtKbBcqEqPSCka4icBRGLCR5o0mf0XN+U1Ba5RnJW0KR73qX9ABHQbqdWdNaGxCwhl9wHz/sOtAGrFjDEdzHjV372gCfNThLHwZOoRXMJYBzUCC/1oMFPtsyLJ5/7oPrvISZQxvw4v1cKMS/FwyAGRgAxaRz0wbwqA7AfRSOK7UBd9bgg/sI2fXF9MAnuI8Pdn0u5dUZvMzxdcvPbyQubiVNVO5bMDtwLb5nO4jKfYvwnh2CYzC2lG/6sA5OewGL50MHqYPpBZeOVba1s886xjjXgy02gAfKdcq0iuWT6mvTQfM93KXBkcG505h0EpTX0q5aY8TD1AWOGLpAMGLoEtMWyyWmGPoAs2pNKngjBEugRSoRJisCG6hwax4bEXYvs+5QrhkPE3MCpbgkdF/PZoDlQrdP3syVriqYxzAkSJGvGkO6SErGj5euyZAI5Up7U0n6Km7lHIj4GkK2p87/5cZnXR7wPpi90+e3jYPkP2UbPJU9GZp5AAAAAElFTkSuQmCC);background-size:contain;background-size:60%;background-position:50%;background-repeat:no-repeat}#recbtn:disabled{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAQWSURBVHgB1VrbVdtAEB0J+Fc6cCqwfIDviAqSVABUYKcCRAekgpAKIBWgfAPHooKIDvzPK3PFrBitJWHJsr3cc0C7q9e9mtnXjD3qAdPpNHh+fv7GxeHLy8vA87yQjwHXA3MNt2XclvEx5eqd7/vJaDTKaEl41BFCesykIq5G1A0pC/q5jJjWAhTxCakvvCxYyDkLOW0rpJWA29vbkxriM/5L+dwfuMrW1hbcZMZk0J6Lfnh4gGvhvoiPX6jGanwu3t3dPaU+BTCBwdPT0wUXQ+tUAtLb29vnhuyiMP2G7x/bz8VHYGscLGKNdwXwiw6Z/BmVvzqIn+7v7yfUA66vryMm/AsDgGrGBzne29u7bLq3UYC4TKwfKsTPaAVgIRP++idUHr0aXapWgE2+jVmXAdyVXetKW6NJRKWAm5sbjOkXqinljnnQ1s+7oqrP8fuP+P2/7Wu9mpun9GbGtZJXPALmcUVvImbMY2R7gG/fCPORkJch8fu6yQN4Jz4cOEhTIFYpoSRA/H4g1dk6fL4JEAEO9DoiASF39FhfUwiA6+hOi9Fmk+QNwAFcTJ0tMoZ7mXohgF3nRF2UrWqo7ALhkkg1eHx8nJhzuQD5+kemkcUck2Oos0IugAlH6tq0rxm2TwinRKqFFXIBsh7JgeUtOQqsu0xZFoTkybj/z5zgoevTJobNRSBzA7jm7gOuvuU+iavkAeGWmjpWsz6bpZiuufyXHId2I3BHHxiq8wk5DjUzQ8DA54aBanDWfQxkt5eDuQ99vWzd2dnJyH3ojxyU1kIud2ADi2Pg0wcHBBSK9CLJVdgc0YlLJiHHgfCMqmboxEWv5lkuJMchsSWDDC50b2pWWMNVRKp850uwNQeXv5LjMIs4Kae8Y/N14Ch0uSMLt8jUERT2ZVxNpA3r7CNyFBLCN0ix3TT7gWIR57IbVe1bcgEcnMWe0wynEWKV5BiEUzFKwn3yI/7BjVhdsROT+KRTQPDXlJFLMBGTYilRYYUJOQIOdY71EI9ESFE2hSorYLtJG4ZwiE3djlfNxUZZLeKiua9JRHq0qVWqHakGH45Sf9bXzK1GEQslcSXciADrJuYG2cBf2KFO+7o5ATAPK/2hmkIRMaA1oSIyDRxXhTor9wNspnMdCcODYMp1iBC3KdwYAJe6VFPthoYjYbEWIe40XeXohNEG79AjjqS04rp73k3ySbYGY3Ap6474aZ9JPpl7ItU8gyvDG5ruXTjNauetBCbTftklzYp1lyxdIvu5kljJ3ntOq0Q3kgsNs3QiayocZ4hw6EQ3vWZYQvktBUjDx+cS5piLmlxmKQFCBn0h5uIh9YecOFYDbS25zI894FZRVaa9BXKrdSFu0FmAhhIDIUNE++ysO4IHsv++l53UZR8z/H/Xmo5D/DRPnQAAAABJRU5ErkJggg==)}.recording{outline:1px solid red;outline-offset:-2px;background-color:#9a0000;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABYSURBVHgB7dghDgAgDMXQjXD/KwNB4Sv4oi8zuCZMrVfVmVyjwsUHzvfRd/57184vpgykDKQMpAykDKQMpAykDKQMpAykDKQMpAykDKQMpOID2yM6FB+4AW4cBk0qqCBTAAAAAElFTkSuQmCC)!important;background-size:55%!important}.recording:hover{background-color:#000}#cuebtn{width:var(--ui-el-h);height:var(--ui-el-h);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAqCAYAAADbCvnoAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFzSURBVHgBzZhvkYMwEEefhJMQCUhAwkmIg6sDcNA66Dk4CZVQCUg4CVwy18xkyvIvZBPezH7oB4ZX9gfsAnB3ZTgR46uunERsjGpwZanMKJQXa6nEuFBV8hUL9K5+mYp1rj4oRHxij3H1jdxGSwHehYjEBmQxgyJzQgGLLKaWrzUhj89Pz1TK562jglDAUCBfe4QCn8ht/CFDG1OEAhaFfB0RAoU2HhXKLpZLKGA52MbcQoF+RqxbE9MSgsQ2agrFYk9ksYYKQgHLhnyVFArckOevSw0hy8pVKiXUunoIIg/exmVtIT8pXJEnhYt0gJaQF+mYjsT+d8/CSKwh1CLnxLfHrB2cU6hBzsmTHWtVDqHdOdEU+kJenW4krk6pQi3y68C3rOEAe4UMck4GMq3fW4WSb2MNIYuckzsKK/aSUMvGx722kOH/30s5sSgTn7BYTrYKDUyvSpblL1WoWE6WyPK4z0ks01PwS9kcm8eCUrSciD8AWEYfJt8FiQAAAABJRU5ErkJggg==);background-size:contain;background-size:50%;background-position:55% 50%;background-repeat:no-repeat}#cuebtn:disabled{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAqCAYAAADbCvnoAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJ/SURBVHgBzZjbccIwEEVlQwEpIekAD49vUkGSCmIqACrAVICpAKggdIC/eYzpIJRAA0DuEjkjKzI2RhLcmQxCjvFh9+5Kgm02m0kcx8/sQeSs1+vTeeA4oeu6Y8/zduyOcpPB6XTqHY/HBSLmszvqL0KpScfZAa7TbDYjZlmuahLRegbU4h7+ciWQIV72wnv/cDh8A2wAsCdmQSkgpCioVCoehjOWBg2QwtiGv1IeajQaTjKmVJHJKX2pG+AvVOOrqWp0sy7QA+v1+gsAOgSRzBMgT6MRf7l5/wCoKSLicX8xAYz8RWkcMI3KTJlKFBFABBh+pj7kN4JDgmc2gRLhnndAjGR/QXMURf8Wf+WmTCWAz1X+gt5v9VcpoETcX6/sf5vwyy5DpVKmki5/3RQhUeQbfCFf1SbwNymaRm0RkrVarQKk81PRWGl+lmV8bRGSRctQhr+CS/4yFiFR3F9fGNZSD0dqMf/RarW2yZyxCIni/vJU/kIUY9FfViIkC88M8dKV5wHYrzLL4t55w8NT84jcFF1+bg0IVdfGQwcAaUuXIlq4kZ2I3hgHop0mqopAetKlPYGgGkNx0hgQB+miigjkSQIZV6vVEGbfy/cZAaL0AGai2A1E8Enn0m5AK9ByuayhjEcYtiXTbqmCihyrtABd6xOjQOgpXb7Ky8ekMdITqHxiBIiXMaWnJl2KEK2+uBwYBeLr0gTDtjiv6/hdGCivjJGeEJuwq9JTGojaPUBGEsi53aOq+tf6pDRQ0XavU0ogfowmEF+c13n+KgRUxCc605MLRL9wmDj8lQaSYCLeZSNmUSoPXd3udUqO0DBrW2BLCVDutsCaqNewB9IPf/rgPL5uxrAAAAAASUVORK5CYII=)}.playing{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAeCAYAAAAo5+5WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAwSURBVHgB7cyxCQBACMDA8Pvv5GhvoxOIhZBA2gP4dTAv2nssJSwsLCwsLCwsfAdOXrsFtX1Rjq4AAAAASUVORK5CYII=)!important;background-size:40%!important;background-position:50%!important}#p5js canvas{display:block;border-radius:10px;background-color:#000;width:var(--ui-el-w);height:var(--ui-el-h)}input{border:1px solid #ccc;padding-left:10px;height:var(--ui-el-h);border-radius:10px}input:disabled{background-color:#ddd;opacity:1}input:hover:not([disabled]){background-color:#f0f0f0}input:active:not([disabled]){border:1px solid #ccc;outline:1px solid var(--c-pri)}input:focus:not([disabled]){border:1px solid #ccc;outline:1px solid var(--c-pri);outline-offset:-2px}button{padding:1px 5px;min-width:var(--ui-el-h);height:var(--ui-el-h);background-color:#eee;border:1px solid #ccc;border-radius:10px}button:disabled,input:disabled{color:var(--c-dis);outline:1px solid #ccc;outline-offset:-2px;background-color:#ddd}button:disabled:active{background-color:#ddd}button:hover{background-color:#ddd}button:active{background-color:#eee}.flexr{display:flex;flex-direction:row}.flexc{display:flex;flex-direction:column}.xc{justify-content:center}.yc{align-items:center}.xs{justify-content:start}.ys{align-items:start}.xs{justify-content:end}.ys{align-items:end}@media screen and (max-width: 1300px){:root{--ui-height: 60px;--ui-el-h: 45px;--ui-el-w: 80px;--font-s: 10px}#ilogo{z-index:100;pointer-events:none;bottom:0;padding-left:0;width:100vw}#UI-wrapper{width:100vw;flex-direction:column;position:fixed;height:calc(var(--ui-height)*2);margin-left:0}#UI-wrapper *{font-size:1.5em}#form-wrapper,#audio-warpper{flex:start;width:100vw}#audio-warpper{margin-top:-10px}#form-wrapper button{width:var(--ui-el-h)}#uploadBtn{min-width:var(--ui-el-h)}input{width:100%;padding:0 auto}}