:root{color-scheme:dark;--bg:#101119;--panel:#1b1d29;--line:#343748;--text:#f1f1f7;--muted:#b4b6ca;--lime:#c6ff6b;--purple:#c5a3ff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px system-ui,sans-serif}main{max-width:1440px;margin:auto;padding:24px}button,input,select,.button{font:inherit;color:var(--text);background:#282b3b;border:1px solid #4b4f65;border-radius:7px;min-height:38px;padding:8px 12px}button,.button,select{cursor:pointer}button:hover,.button:hover{background:#373b50}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:2px}button:disabled{opacity:.6;cursor:wait}input[type=range]{padding:0;min-height:28px;width:100%;accent-color:var(--lime)}input[type=checkbox]{accent-color:var(--lime);min-height:auto}h1,h2{font-size:16px;margin:0;font-weight:650}label{display:flex;align-items:center;gap:8px;color:var(--muted)}.top,.transport,.section-head,.bottom,.project-actions,.playgroup,.edit-actions{display:flex;align-items:center;gap:10px}.top{justify-content:space-between;margin-bottom:22px;flex-wrap:wrap}.brand{font-size:19px;font-weight:750;letter-spacing:-.5px}.logo{color:var(--lime);font-size:30px;vertical-align:middle;margin-right:8px}.project-actions{flex-wrap:wrap}.project-actions button,.button{font-size:12px}.transport{background:var(--panel);padding:14px;border:1px solid var(--line);border-radius:12px;flex-wrap:wrap;margin-bottom:18px}#name{font-size:19px;font-weight:600;max-width:260px;background:transparent;border-color:transparent}#name:focus{border-color:var(--line)}.primary{background:var(--lime);color:#18200c;font-weight:700;border-color:var(--lime)}.primary:hover{background:#d6ff98}#record[aria-pressed=true]{background:#78343e;color:#fff}#bpm{width:75px}#position{font-variant-numeric:tabular-nums;min-width:58px;color:var(--lime)}#export{margin-left:auto}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px}section{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}.section-head{justify-content:space-between;margin-bottom:18px;flex-wrap:wrap}.section-head select{font-size:12px}.steps-scroll{overflow:auto;padding-bottom:8px}.row{display:grid;grid-template-columns:110px repeat(16,minmax(25px,1fr));gap:5px;align-items:center;margin-bottom:7px;min-width:640px}.row .track{border:0;background:transparent;text-align:left;padding:5px;white-space:nowrap;overflow:hidden}.row .track.selected{color:var(--lime);background:#303b2c}.step{padding:0;height:38px;min-height:38px;border-radius:5px;background:#282b3b;border:1px solid #45495f;font-size:10px}.step:nth-child(4n+2){border-left:2px solid #848aa2}.step.on{background:var(--lime);color:#1a250a;border-color:#dbffa3}.row.synth .step.on{background:var(--purple);border-color:#dfcdff;color:#241c34}.step.now{outline:2px solid white;outline-offset:1px}.counts span{text-align:center;color:var(--muted);font-size:10px}.counts{margin-bottom:12px}.track small{display:block;font-size:10px;color:var(--muted)}.params{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}.param{display:block;font-size:12px}.param span{display:block;margin-bottom:3px}.arrangement{margin-top:18px}.bar-row{display:flex;gap:5px;align-items:center;width:max-content;margin-bottom:7px}.bar-label{width:110px;flex-shrink:0;font-size:12px;color:var(--muted)}.bar{min-width:55px;min-height:32px;font-size:11px;padding:4px;background:#282b3b;color:var(--muted)}.bar.on{color:#e6dbff;background:#4c3e67;border-color:#9780bb}.bar.current{outline:2px solid var(--lime)}#keyboard{display:flex;height:100px;touch-action:none;margin-bottom:10px;gap:3px}.key{position:relative;padding:0;flex:1;background:#e8e6f1;color:#282535;min-width:0;border-color:#bdb8ce;display:flex;align-items:end;justify-content:center;padding-bottom:8px;font-size:10px}.key.black{background:#353044;color:#ece4ff;height:65px;border-color:#786d8b}.key:active,.key.pressed{background:var(--purple);color:#1b142b}.hint{color:var(--muted);font-size:11px;margin:0 0 18px}.bottom{justify-content:space-between;margin-top:15px;color:var(--muted);font-size:12px}.bottom label{width:190px}dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;width:min(480px,94vw)}dialog::backdrop{background:#000a}.saved-row{display:flex;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}.saved-row button:first-child{flex:1;text-align:left}.error{color:#ffb3bc}button{touch-action:manipulation}@media(max-width:1000px){main{padding:14px}.workspace{grid-template-columns:1fr}.instrument{display:grid;grid-template-columns:1fr 1fr;gap:14px}.instrument .section-head,.instrument #params{grid-column:1}.instrument #keyboard,.instrument .hint,.instrument .edit-actions{grid-column:2}.instrument #keyboard{grid-row:1/3;align-self:center;width:100%}.instrument .hint{grid-row:3}.instrument .edit-actions{grid-row:4}.instrument .section-head{margin-bottom:0}.params{margin-bottom:0}}@media(max-width:600px){main{padding:12px}.brand{font-size:18px}.top{gap:12px;margin-bottom:12px}.project-actions{gap:5px}.project-actions button,.button{padding:7px 9px;min-height:36px}.transport{gap:10px;padding:10px}#name{max-width:none;width:100%;font-size:19px;padding:4px}.playgroup{gap:5px}.playgroup button{padding:9px}#export{margin-left:0}.tempo{margin-left:auto}section{padding:13px}.section-head{gap:10px}.section-head label{font-size:12px}.instrument{display:block}.instrument .section-head{margin-bottom:15px}.params{margin-bottom:20px}.bottom{align-items:start;gap:12px}.bottom label{width:140px}.row{grid-template-columns:85px repeat(16,30px)}.bar-label{width:85px}#position{margin-left:4px}}
.workspace>section{min-width:0;max-width:100%}