:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#29272b;background:#f1ede4}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{position:fixed;inset:0;width:100%;height:100%;transition:opacity .65s;pointer-events:none}body > header,body > footer{position:fixed;left:30px;right:30px;display:flex;justify-content:space-between;align-items:center}body > header{top:25px;font-size:12px;letter-spacing:.14em}body > header small{margin-left:16px;opacity:.55;font-size:10px}button,select,input{font:inherit}button,select{cursor:pointer;border:1px solid #80747755;border-radius:9px;background:#ffffff55;color:inherit;padding:10px 13px;font-size:12px}button:hover{background:#8882}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #956fff;outline-offset:3px}body > header button span{opacity:.5;margin-left:10px}main{position:fixed;top:50%;left:50%;transform:translate(-50%,-15%);width:min(730px,calc(100% - 40px))}form{display:flex;align-items:center;gap:17px;background:#17171cee;color:#e7e4eb;padding:12px 15px 12px 20px;border:1px solid #ffffff19;border-radius:16px;box-shadow:0 10px 50px #0001}form input{flex:1;min-width:0;border:0;outline:none;background:none;color:#e7e4eb;padding:7px 0;font-size:16px}form button{border:0;background:#ffffff0b;font-size:20px;padding:3px 10px}#prompt-note{text-align:center;font-size:11px;opacity:.65}nav{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);display:flex;gap:7px;white-space:nowrap}nav button.active{background:#27232e;color:#f9f5fb}body > footer{bottom:24px;font-size:10px;letter-spacing:.07em}aside{position:fixed;right:24px;top:82px;width:330px;max-height:calc(100dvh - 150px);overflow:auto;background:#171720f2;color:#dbd9e7;padding:23px;border:1px solid #fff2;border-radius:17px;backdrop-filter:blur(20px)}h1{font-size:18px;font-weight:450;margin:0}h2{font-size:13px;font-weight:500;margin-top:23px}aside p{font-size:12px;line-height:1.7;color:#b9b5c8}aside button,aside select{color:#dcd9eb;background:#ffffff08;border-color:#fff2}.controls{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.controls label{font-size:12px}a{font-size:12px;color:#b4acff}progress{width:100%;height:4px;accent-color:#a08ae8}body[data-brush=light]{color:#dce8f5;background:#030a16}body[data-brush=light] nav button,body[data-brush=light] > header button{background:#0b192adc;border-color:#bbcfff30}body[data-brush=light] nav button.active{background:#22495b}button:disabled{opacity:.4}[hidden]{display:none!important}@media(max-width:600px){body > header,body > footer{left:18px;right:18px}body > header small,body > footer span:last-child{display:none}body > header{font-size:10px}body > header button{font-size:11px}aside{right:12px;left:12px;width:auto}nav{bottom:65px}#prompt-note{font-size:10px}}@media(prefers-reduced-motion:reduce){canvas{transition:none}}

.gain{display:block;margin-top:18px;font-size:12px}.gain output{float:right}.gain input{display:block;width:100%;margin-top:10px;accent-color:#d84153}#panel select{max-width:100%}

body > header{justify-content:flex-end}