:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#47463f;color:#f2ecdf}*{box-sizing:border-box}body{margin:0;touch-action:manipulation}main{max-width:900px;margin:auto;padding:calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px)}header{display:flex;align-items:center;gap:12px}header a{font-size:27px;font-weight:900;letter-spacing:-2px;color:#f2ecdf;text-decoration:none}header a span{color:#e18343}header strong{font-size:11px;flex:1;letter-spacing:1px}button,input,select{font:inherit;max-width:100%}button,select,input:not([type=checkbox]){min-height:44px;border:1px solid #686358;border-radius:4px;background:#302f29;color:#eee6d8;padding:8px}button{font-size:11px;font-weight:600;touch-action:manipulation;cursor:pointer}button:disabled{opacity:.4}button.active{border-color:#e18343;color:#ffbf8f}button:focus-visible,summary:focus-visible{outline:2px solid #e18343;outline-offset:2px}label{display:grid;gap:5px;font-size:10px;color:#bfb8a9}input[type=range]{width:100%;accent-color:#e18343;padding:0}section{padding:12px;background:#1d1d1a;border:1px solid #151512;border-radius:7px;margin:10px 0}.intro,.note,#info{font-size:11px;line-height:1.5;color:#bfb8a9}.intro a{color:#edb48a}.actions{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.actions>*{flex:1 1 auto;min-width:0}.project{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.project>label:first-child,.project>.actions,#status{grid-column:1/-1}#status{font-size:11px;line-height:1.5;color:#b2dda0;overflow-wrap:anywhere}h1{font-size:17px;margin:0 0 6px}#info{margin:0 0 8px}canvas{display:block;width:100%;height:100px;background:#202822;border-radius:4px}.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}.controls input{width:100%;font-size:14px}.check{display:flex;align-items:center;gap:8px}.check input{width:24px;height:24px}details{border-top:1px solid #514d44;margin-top:12px;padding-top:4px}summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:11px;color:#edb48a}#pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}#pads button{min-height:82px;background:linear-gradient(#36352f,#292823);text-align:left;padding:9px;color:#f2ecdf;touch-action:none}#pads button.selected{outline:2px solid #e18343;outline-offset:-2px}#pads button.playing,#keys button.playing{background:#ae632f}#pads small{display:block;color:#e18343;font-size:10px;margin-bottom:20px}#pads b{font-size:10px;display:block;overflow-wrap:anywhere}#keys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}#keys[hidden],#pads[hidden],[hidden]{display:none!important}#keys button{min-height:78px;background:#ded7c6;color:#20201c;touch-action:none}#keys button.sharp{background:#302f29;color:#eee6d8}.master{display:flex;align-items:center;gap:10px;margin-top:10px}.master label{flex:1}.master span{font-size:9px;white-space:nowrap}#clip{color:#ff967f}meter{width:60px}.performance{position:sticky;bottom:0;box-shadow:0 -5px 15px #0006;z-index:2}body{user-select:none;-webkit-user-select:none}input:not([type=range]){user-select:text;-webkit-user-select:text}@media(max-height:600px){.performance{position:static}}@media(min-width:800px){.controls{grid-template-columns:repeat(4,minmax(0,1fr))}.performance{bottom:8px}}@media(max-width:370px){.controls{grid-template-columns:repeat(2,minmax(0,1fr))}}

.state{font-size:11px;line-height:1.5;overflow-wrap:anywhere}#dirty{color:#edb48a;font-size:10px;margin-right:10px}