:root{color-scheme:dark;font-family:system-ui;background:#11131b;color:#f5f3ed}*{box-sizing:border-box}body{margin:0;padding:24px;max-width:1100px;margin:auto}button,input,select{font:inherit;color:#f5f3ed;background:#272b3b;border:1px solid #4c5269;border-radius:9px;padding:10px;touch-action:manipulation}button{cursor:pointer}button:focus-visible{outline:3px solid #b9a1ff}h1{font-size:24px;margin:0}header,.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px}.brand{margin-right:auto}small{color:#b8bed0}.play{background:#bbf49b;color:#142319;border:0;font-weight:700}.panel{background:#1b1e2a;border:1px solid #34394d;border-radius:16px;padding:20px;margin:16px 0}h2{font-size:15px;margin:0 0 16px;color:#c9cde0}.scroll{overflow:auto}.row{display:grid;grid-template-columns:74px repeat(16,minmax(29px,1fr));gap:5px;min-width:620px;margin:7px 0;align-items:center}.step{height:38px;padding:0;background:#303548;border:0;border-radius:5px}.step:nth-child(4n+2){background:#404660}.step.on{background:#b6a0ff}.step.now{outline:2px solid white;outline-offset:1px}.keys{display:flex;gap:6px;min-width:300px}.key{height:110px;flex:1;background:#ece7dc;color:#181b27;display:flex;align-items:end;justify-content:center}.key:active,.key.pressed{background:#bbf49b}.status{min-height:24px;color:#b8bed0}label{font-size:13px;display:flex;gap:8px;align-items:center}input[type=number]{width:80px}footer{color:#afb7ce;font-size:12px}@media(max-width:600px){body{padding:16px}.panel{padding:14px}.bar{gap:8px}button{min-height:44px}.key{height:90px}}

header{margin-bottom:16px}h2{letter-spacing:.06em}.bar{margin-bottom:12px}.tracksettings{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.tracksettings label{flex-direction:column;align-items:flex-start}.tracksettings input[type=range]{width:100px;padding:0}.arrange{display:flex;gap:6px;overflow:auto;padding:6px 0}.cell{display:flex;flex-direction:column;gap:4px;min-width:68px;font-size:11px;color:#c9cde0}.cell select{width:68px;padding:10px}.cell input{width:65px;padding:0}.cell.current{background:#445047;border-radius:8px}.active{background:#b6a0ff;color:#19182b}.row{grid-template-columns:74px repeat(16,minmax(34px,1fr));min-width:715px}.note{font-size:11px}.key{user-select:none;-webkit-user-select:none}.key:focus{outline:3px solid #b6a0ff}#name{width:180px}#status{overflow-wrap:anywhere}button:disabled{color:#aeb5ca;background:#303548;cursor:wait}input[type=file]{max-width:200px}.small{font-size:12px}.file{cursor:pointer;background:#272b3b;padding:10px;border:1px solid #4c5269;border-radius:9px;min-height:44px}.file input{display:none}dialog{color:#f5f3ed;background:#1b1e2a;border:1px solid #626b85;border-radius:16px;max-width:95vw}dialog textarea{width:75vw;max-width:600px;min-height:130px;background:#11131b;color:#f5f3ed}.progress{accent-color:#bbf49b}select{max-width:200px}@media(max-width:600px){.tracksettings{gap:10px}.tracksettings input[type=range]{width:80px}#name{width:140px}.bar{margin-bottom:10px}h1{font-size:22px}header{gap:8px}.panel{margin:12px 0}}
.step.on{color:#171526}.step.on:nth-child(4n+2){background:#b6a0ff}.step{min-height:44px}.panel h2{color:#d1d5e6}