:root{color-scheme:dark;--bg:#11151a;--panel:#1d242c;--ink:#f4eee3;--mute:#aeb8c3;--lime:#d1f678}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px system-ui}main{max-width:1100px;margin:auto;padding:26px}header{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:28px}h1{font-size:24px;margin:0;margin-right:auto;letter-spacing:-1px}small{color:var(--mute)}button,input,select{font:inherit;border:1px solid #46515e;border-radius:8px;background:#29333e;color:var(--ink);padding:10px;min-height:44px}button{cursor:pointer}button:hover{border-color:var(--lime)}.primary{background:var(--lime);color:#172015;border:0;font-weight:700}.panel{background:var(--panel);border:1px solid #35404b;border-radius:16px;padding:20px;margin:18px 0}.bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.bar h2{font-size:16px;margin-right:auto}.grid{overflow:auto;padding-bottom:12px}.row{display:grid;grid-template-columns:80px repeat(16,minmax(30px,1fr));gap:7px;min-width:680px;margin:10px 0;align-items:center}.step{height:40px;min-height:40px;padding:0;background:#303b46;border:0;border-radius:5px}.step:nth-child(4n+2){border-left:2px solid #73818f}.step.on{background:var(--lime)}.step.now{box-shadow:0 0 0 2px #fff}.keys{display:flex;gap:6px}.key{flex:1;height:108px;background:#efeade;color:#20252d;font-weight:700;touch-action:none}.key:active{background:var(--lime)}label{display:flex;align-items:center;gap:8px}input[type=range]{width:120px;padding:0}footer{color:var(--mute);font-size:13px}#notice{color:var(--lime);min-height:24px} @media(max-width:600px){main{padding:16px}.panel{padding:14px}header{gap:10px}.keys{gap:3px}.key{padding:4px}h1{width:100%}}

input[type=text]{max-width:180px} .arrrow{display:grid;grid-template-columns:80px repeat(var(--bars),42px);gap:5px;min-width:max-content;margin:6px 0;align-items:center}.clip{padding:3px;min-height:38px;border-radius:5px}.clip.on{background:#b8c2ff;color:#181c30}.mix{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}.channel{padding:12px;background:#151c23;border-radius:10px}.channel label{display:flex;justify-content:space-between;margin:10px 0}.channel input{max-width:110px}#position{font-variant-numeric:tabular-nums} .step.note{background:#b8c2ff;color:#181c30;font-size:11px}.hint{font-size:12px;color:#b7c2ce}.file{display:none}.toolbar{gap:8px}.danger{color:#ffb9a7}.panel h2{margin-top:0}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #f5f0df;outline-offset:3px}#notice{overflow-wrap:anywhere}.key small{color:#46505a}#bpm{width:76px}.quiet{color:#bdc9d5}
.lane{font-size:13px;padding:3px;min-height:40px;background:#29333e;color:#f4eee3}