:root{color-scheme:dark;--bg:#11131b;--panel:#1c1f2b;--muted:#b7bdd2;--line:#44495d;--ink:#f5f0e7;--accent:#e9b684}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px system-ui}main{max-width:1250px;margin:auto;padding:22px}header,.transport,.heading,.knobs{display:flex;gap:12px;align-items:center;flex-wrap:wrap}header{margin-bottom:22px}h1{font-size:23px;margin:0 auto 0 0;white-space:nowrap}h1 span{color:var(--accent)}h2{font-size:12px;letter-spacing:1.5px;color:var(--muted);margin:0 auto 0 0}button,input,select,.button{font:inherit;color:var(--ink);background:#2a2e3e;border:1px solid var(--line);border-radius:7px;padding:9px;min-height:38px}button,.button,select{cursor:pointer}button:hover,.button:hover{border-color:var(--accent)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #f2cc9f;outline-offset:3px}button:disabled{color:#b7bdd2;background:#2a2e3e;cursor:wait}.primary{background:var(--accent);color:#241d19;border-color:var(--accent);min-width:95px;font-weight:700}#name{width:160px}input[type=number]{width:65px}input[type=range]{padding:0;min-height:28px;accent-color:#be9bf4;width:130px}input[type=checkbox]{min-height:0;accent-color:#be9bf4}#status{color:#d0c8e4;min-height:20px;margin:12px 0}.panel{background:var(--panel);border-radius:13px;padding:18px;margin:15px 0}.heading{margin-bottom:16px}.scroll{overflow:auto;padding:3px 3px 10px}.songrow{display:flex;gap:5px;margin:5px 0;align-items:center;min-width:max-content}.tracklabel{width:100px;display:flex;gap:5px;align-items:center;flex-shrink:0}.tracklabel button{padding:6px;min-width:30px}.tracklabel .selected{color:#efc591}.clipwrap{width:55px;flex-shrink:0}.clip{width:100%;height:35px;background:#32374a;color:#c4c9db}.clip.active{background:#8165ad;color:#fff}.clip.current{outline:2px solid #eac99e}.automation{width:55px!important;height:14px;min-height:14px!important;display:block}.barlabels{margin-left:105px;display:flex;gap:5px;color:var(--muted)}.barlabels span{width:55px;text-align:center;flex-shrink:0}.steps{display:grid;grid-template-columns:45px repeat(16,1fr);gap:5px;min-width:750px;margin:5px 0;align-items:center}.step{padding:0;height:35px;min-height:35px;border:1px solid #45495d;background:#2d3142}.step:nth-child(8n+2),.step:nth-child(8n+3),.step:nth-child(8n+4),.step:nth-child(8n+5){background:#3c3e55}.step.on{background:#b295dc;color:#20182e;border-color:#ceb6ef}.step.now{outline:2px solid #ffe1b9;outline-offset:1px}.pitch{font-size:11px;color:var(--muted)}.keys{display:flex;gap:7px;margin-top:17px}.key{flex:1;height:85px;background:#e9e3d8;color:#282330;touch-action:none}.key:active,.key.down{background:var(--accent)}.knobs{gap:22px}.knobs label{display:flex;gap:8px;align-items:center}#patterns{display:flex;gap:5px}#patterns .chosen,#record[aria-pressed=true]{background:#be9be9;color:#23192f}footer{color:var(--muted);font-size:12px;margin:22px 0}output{color:#efc591;font-variant-numeric:tabular-nums}button.muted{color:#fff;background:#944949}@media(max-width:650px){main{padding:12px}.panel{padding:12px}header{gap:7px}h1{width:100%;margin-bottom:6px}.transport{gap:7px}.knobs{gap:10px}.knobs label{width:46%;display:block}.knobs input{width:100%}#name{flex:1}.key{padding:5px}.heading{gap:7px}}