:root{box-sizing:border-box;--dark-gray1:#121212;--dark-gray2:#232323;--border-color:#bdbdbd}*{box-sizing:inherit;margin:0;padding:0}html,#root,body{height:100%}body{overflow-x:hidden}.app__inner{justify-content:center;align-items:center;gap:3vw;height:100%;display:flex}@media (width<=1000px){.app__inner{flex-direction:column}}.canvas-view{aspect-ratio:.96;border:1px solid var(--border-color);width:40rem;position:relative}.canvas-wrapper{width:100%;height:100%;position:relative}.canvas-wrapper>canvas{max-width:100%;height:auto!important}.canvas__info{-webkit-user-select:none;user-select:none;background-image:url(/warhols-echo/assets/cover_image-CFwUMBgn.png);background-position:top;background-repeat:no-repeat;background-size:contain;width:30rem;max-width:90%;padding-top:min(30rem,10rem + 20vw);padding-bottom:10rem;font-family:monospace;font-size:.9rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.canvas__info>p+p{margin-top:.6em}body.hasinitgen .canvas__info{display:none}.canvas__loading{font-family:monospace;font-size:.9rem;line-height:1.6;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}body.loading-samples .canvas__loading{display:block}.canvas{background-color:#efeeee;width:100%;height:100%}.gen-audio{max-width:100%;position:relative}.keyboard-wrapper{position:relative}.piano-inner{width:max-content;margin:0 auto;display:block;position:relative;left:50%;transform:translate(-50%)}.piano{--border-style:1px solid var(--piano-border-color);--piano-padding:min(2.5rem, 3vw);--key-width:3rem;--key-height:min(11rem, max(10rem, calc(var(--key-width) * 6)));-webkit-user-select:none;user-select:none;z-index:0;margin:0 auto;position:relative}.piano__key-wrapper{display:inline-block;position:relative}.piano__key{vertical-align:top;margin:0 -2px;display:inline-block;position:relative}.piano__key--white{width:var(--key-width);height:var(--key-height);z-index:5;background-color:#fff;border:1px solid #000;box-shadow:inset 0 6px #37373729}.piano__key-wrapper:active .piano__key--white,.piano__key--white.piano__key--pressed{background-color:#f0f0f0}.piano__key--black{--black-key-width:2rem;--black-key-height:6.6rem;width:var(--black-key-width);height:var(--black-key-height);margin-left:calc(-1 * var(--black-key-width) / 2);margin-right:calc(-1 * var(--black-key-width) / 2);z-index:10;background-color:#000;border:1px solid #000;border-radius:0 0 6px 6px;box-shadow:0 4px #37373729}.piano__key-wrapper.black:active .piano__key--black,.piano__key--black.piano__key--pressed{background-color:var(--dark-gray1);box-shadow:0 2px #0a143c}.key__note{text-align:center;font-family:Oswald,sans-serif;font-size:.95em;font-weight:500;position:relative;top:calc(100% - 2rem)}.piano__key--black .key__note{color:#fff;top:calc(100% - 3rem)}.piano__loading{z-index:200;background-color:#484b4bb3;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;inset:0}.loading__title{color:#fff;font-family:Roboto,sans-serif;font-size:1.1rem;display:block}.loading__dots{gap:.7rem;margin-top:1rem;display:flex}@keyframes loading{0%{transform:scale(0)}to{transform:scale(1)}}.loading__dot{background-color:#fff;border-radius:50%;width:1.2rem;height:1.2rem;animation-name:loading;animation-duration:.6s;animation-iteration-count:infinite;animation-direction:alternate;display:block}.loading__dot:nth-child(2){animation-delay:.15s}.loading__dot:nth-child(3){animation-delay:.3s}.loading__error{color:#fff;text-align:center;font-family:Roboto,sans-serif;font-size:1.1rem;line-height:1.6}.heading{margin-bottom:1rem;font-family:monospace;font-size:4vw;font-weight:500}.heading+p{width:45rem;max-width:90%;margin-bottom:1rem}.download-controls{align-items:center;gap:.6em;display:flex}.download-controls>label{text-transform:uppercase;letter-spacing:.1em;font-family:monospace}.download-controls:hover{cursor:pointer;background-color:#f0f}.download-controls>*{cursor:pointer}.btn--download{background-color:#0000;background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23666666'%3e%3cpath%20d='M160-80v-80h640v80H160Zm320-160L200-600h160v-280h240v280h160L480-240Zm0-130%20116-150h-76v-280h-80v280h-76l116%20150Zm0-150Z'/%3e%3c/svg%3e");background-position:50%;background-repeat:no-repeat;background-size:80%;border:none;width:1.8rem;height:1.8rem;display:block}.download--img{display:none}body.show-audio .download--img{display:flex}.download-controls.canvas__control{position:absolute;bottom:90px;right:1rem}.bottom-bar{border-top:1px solid #80808059;justify-content:space-between;align-items:center;width:calc(100% - 2rem);margin:0 1rem;padding:1rem 0;display:none}body.show-audio .bottom-bar{display:flex}.iter-info{color:gray;margin:0 2rem;padding:1rem 0 2rem;font-family:monospace;font-size:1rem}body.show-audio .iter-info{display:none}.key-interface{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;max-width:52rem;font-family:monospace;font-size:.9rem;display:flex}.key-interface.disabled>.interface{opacity:.3;pointer-events:none}.input-interface{border-radius:8px;width:100%;margin-bottom:1.5rem;padding:1em}.interface__top{width:100%;padding:0 2em}.interface__top label{text-transform:uppercase;letter-spacing:.1rem;border-bottom:1px solid #000;padding-bottom:.2em}.interface__top label:hover{cursor:pointer;background-color:#f0f}.interface__top input+p{opacity:.4;margin-left:1rem;font-size:.9em;display:inline-block}.interface__top input#img-upload{display:none}.interface__bottom{border:1px solid #000;width:100%;padding:1.2em 1.8em 2em}.input__info{text-align:center;margin:.5em 0 1em}.input__flex{gap:2rem;display:flex}.input__display{border:1px solid #000;justify-content:left;align-items:center;min-width:30rem;min-height:100%;padding:0 3em;display:flex}.input__controls{flex-direction:column;justify-content:center;align-items:flex-start;gap:.8rem;display:flex}.input__controls.right{justify-content:flex-start;padding-top:.1em}.control-btn{text-transform:uppercase;letter-spacing:.1em;text-align:left;background-color:#0000;border:1px solid #000;padding:6px 10px;font-family:monospace;font-size:1em;display:block}.control-btn:not(:disabled):hover{color:#fff;cursor:pointer;background-color:#000}.control-info{background-color:#f0f}.control-btn--icon{background-position:5% 60%;background-repeat:no-repeat;background-size:1.7rem;padding-left:2.1rem;padding-right:12px}.control-btn.play{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23666666'%3e%3cpath%20d='M340-236.16v-487.68L723.07-480%20340-236.16ZM400-480Zm0%20134%20210.77-134L400-614v268Z'/%3e%3c/svg%3e")}.control-btn.pause{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23666666'%3e%3cpath%20d='M530-220v-520h210v520H530Zm-310%200v-520h210v520H220Zm370-60h90v-400h-90v400Zm-310%200h90v-400h-90v400Zm0-400v400-400Zm310%200v400-400Z'/%3e%3c/svg%3e");background-position-x:8%;background-size:1.3rem}