:root{color-scheme:dark;--bg:#111419;--panel:#1b2028;--line:#343c49;--text:#edf0f5;--muted:#b0bac8;--lime:#bef36c;--black:#15200c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px system-ui,sans-serif}main{max-width:1180px;margin:auto;padding:24px}header,.transport,.projectbar,.sectionhead,footer{display:flex;align-items:center;gap:12px}header{margin-bottom:28px}.brand{font-size:22px;font-weight:750;color:var(--text);text-decoration:none}.brand:first-letter{color:var(--lime)}.local{color:var(--muted);font-size:10px;letter-spacing:2px;flex:1}button,select,input,.button{font:inherit;color:var(--text);background:#242c37;border:1px solid #485364;border-radius:7px;padding:9px 12px}button,.button{cursor:pointer}button:hover,.button:hover{background:#354255}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:2px}button.active{background:var(--lime);color:var(--black);border-color:var(--lime)}.play{background:var(--lime);color:var(--black);border-color:var(--lime);min-width:98px;font-weight:750}.transport{background:var(--panel);padding:14px;border:1px solid var(--line);border-radius:12px}.transport label{display:flex;align-items:center;gap:8px;color:var(--muted)}#bpm{width:74px}#position{font:22px monospace;color:var(--lime);flex:1;text-align:center}.switch input{accent-color:var(--lime)}#status{min-height:34px;padding:8px 2px;color:var(--muted);font-size:12px}.projectbar{flex-wrap:wrap;margin:7px 0 28px}.projectbar input{flex:1;min-width:160px}#demo{margin-left:auto}h1,h2{font-size:15px;margin:0;font-weight:650}.sectionhead{justify-content:space-between;margin:0 0 16px}.tabs{display:flex;gap:5px}.tabs button{padding:6px 13px}.workspace,.arrange,.instrument{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:18px}.scroll{overflow-x:auto;padding-bottom:8px}#grid{min-width:760px}.track{display:grid;grid-template-columns:145px repeat(16,minmax(24px,1fr)) 65px;gap:5px;align-items:center;margin-bottom:9px}.trackLabel{text-align:left;padding:8px;border-color:transparent;background:transparent}.trackLabel.selected{border-color:var(--lime)}.step{height:42px;padding:0;border:1px solid #435063;background:#293342;border-radius:5px;font-size:10px;color:#c8d2df;touch-action:manipulation}.step:nth-of-type(4n+2){border-left:3px solid #708093}.step.on{background:var(--track);color:#101720;border-color:var(--track);font-weight:700}.step.current{outline:2px solid white;outline-offset:-3px}.track input[type=range]{width:65px;padding:0;accent-color:var(--track)}.ruler{color:var(--muted);font-size:10px;height:18px}.ruler span{text-align:center}.ruler .trackLabel{padding:0}#arrangement{display:flex;gap:7px;overflow-x:auto;padding-bottom:7px}.bar{display:flex;flex-direction:column;gap:6px;min-width:66px;padding:8px;background:#242c37;border:1px solid #485364;border-radius:6px}.bar.playing{border-color:var(--lime)}.bar span{font-size:10px;color:var(--muted)}.bar select{padding:5px}.bar button{padding:1px;font-size:11px;background:transparent;color:var(--muted)}.knobs{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:22px}.knobs label{display:flex;flex-direction:column;gap:10px;font-size:12px;color:var(--muted);flex:1;min-width:100px}.knobs input{width:100%;padding:0;accent-color:var(--lime)}#keyboard{display:flex;gap:4px;touch-action:none;user-select:none}#keyboard button{height:95px;flex:1;min-width:0;background:#e8ede5;color:#172018;border-color:#a6b29f;border-radius:4px;display:flex;align-items:end;justify-content:center;padding:8px 2px}#keyboard button.black{background:#303a47;color:#e8edf5;border-color:#647185;height:65px}#keyboard button.pressed{background:var(--lime);color:#15200c}#noteDisplay,footer{color:var(--muted);font-size:12px}footer{justify-content:space-between;padding:5px 2px}aside{background:#293342;border:1px solid #576477;color:var(--text);padding:14px;margin-bottom:15px;line-height:1.7}input[type=range]{cursor:pointer}button:disabled{opacity:.6;cursor:wait}@media(max-width:680px){main{padding:12px}header{margin:8px 0 20px}.local{display:none}header #help{margin-left:auto}.transport{gap:8px;flex-wrap:wrap;padding:10px}#position{font-size:18px}.transport button{padding:10px}.transport label{font-size:12px}#bpm{width:64px}.projectbar{gap:7px;margin-bottom:20px}.projectbar button,.projectbar select,.button{padding:9px}.projectbar #name{width:170px;min-width:130px}#demo{margin-left:0;flex:1}.workspace,.arrange,.instrument{padding:12px}.knobs{gap:16px}.knobs label{min-width:85px}#keyboard button{font-size:10px;height:85px;padding:6px 0}#keyboard button.black{height:60px}footer{font-size:10px}}