:root{color-scheme:dark;font:14px Inter,ui-sans-serif,system-ui,sans-serif;--bg:#101114;--panel:#181a20;--line:#303440;--text:#e8eaf2;--muted:#9da4b6;--accent:#9caaff}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button,select,input{color:var(--text);background:#222630;border:1px solid var(--line);border-radius:6px;padding:8px}button{cursor:pointer}button:hover{background:#343a4a}button:disabled{opacity:.4;cursor:default}button.active{background:#494f80;border-color:var(--accent)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.accent{background:#6a79ce}.danger{color:#e8a4b5}a{color:var(--accent)}header{display:flex;align-items:center;justify-content:space-between;padding:18px 3%;border-bottom:1px solid var(--line);gap:12px}.brand{font-size:24px;font-weight:700;text-decoration:none;letter-spacing:-1px;color:var(--text)}main{max-width:1500px;margin:auto;padding:20px 3%}section,aside{min-width:0}.transport,.tools,.heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.transport{background:var(--panel);border:1px solid var(--line);padding:12px;border-radius:10px}label{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}input[type=number]{width:76px}input[type=checkbox]{accent-color:var(--accent)}#position{margin-left:auto;font-variant-numeric:tabular-nums}.heading{justify-content:space-between}h2{font-size:15px;margin:0}p,.small{color:var(--muted);line-height:1.5}.small{font-size:12px}.document-panel,.overview,.instrument{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}#document{width:100%;height:270px;min-height:140px;resize:vertical;overflow:auto;background:#101217;border:1px solid var(--line);border-radius:6px;margin:12px 0}#document .cm-editor{height:100%}#document .cm-editor.cm-focused{outline:1px solid var(--accent)}#document-state{font-size:12px;color:var(--muted);height:38px;overflow:auto;line-height:19px}#document-state.error{color:#ff9baf}.workspace{display:grid;grid-template-columns:240px minmax(0,1fr);margin-top:18px;border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}aside{padding:16px;border-right:1px solid var(--line)}.pattern{margin:12px 0;border:1px solid var(--line);border-left:3px solid var(--color);border-radius:6px;padding:9px}.pattern.selected{background:#272b3e;border-color:var(--color)}.pattern-title{display:block;width:100%;text-align:left;border:0;background:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pattern-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.pattern-actions button{font-size:11px;padding:5px}.editor{padding:16px;overflow:hidden}#expression{max-width:300px}.roll-scroll{overflow:auto;max-height:430px;margin-top:14px;border:1px solid var(--line);border-radius:5px}#roll{position:relative;min-width:660px}#ruler{height:24px;display:flex;margin-left:80px}#ruler span{flex:1;border-left:1px solid var(--line);padding:4px;color:var(--muted);font-size:10px}.lane{display:flex;height:26px;border-top:1px solid #2a2e39}.lane-label{position:sticky;left:0;z-index:2;background:#20232c;width:80px;flex-shrink:0;padding:5px 8px;font:11px ui-monospace,monospace;overflow:hidden}.lane-body{flex:1;position:relative;background-image:linear-gradient(to right,#ffffff0c 1px,transparent 1px);background-size:calc(100% / var(--steps,16)) 100%;touch-action:none}.lane.out-of-scale .lane-label{color:#667085}.lane.out-of-scale .lane-body{background-color:#0e1016}.note{position:absolute;top:3px;height:19px;min-width:5px;padding:0;border:1px solid #b3beff;background:#6e7fc6;border-radius:3px;touch-action:none}.note.selected{background:#d7dcff;border:2px solid white}.note:after{content:"";position:absolute;right:0;top:1px;bottom:1px;width:5px;border-right:2px solid #ffffff66;cursor:ew-resize}#playhead{position:absolute;top:0;bottom:0;width:1px;background:#fff8;pointer-events:none;z-index:3;display:none}.arr-row{display:flex;align-items:center;gap:12px;margin-top:10px}.arr-row button{width:145px;flex-shrink:0;text-align:left;overflow:hidden;text-overflow:ellipsis}.arr-notes{flex:1;height:42px;position:relative;background:#0f1117;overflow:hidden;border:1px solid var(--line);border-radius:4px}.arr-note{position:absolute;height:5px;min-width:2px;background:var(--color);border-radius:2px}.instrument .tools{gap:20px}#audition-sound,#insert-sound,#new-sound{max-width:250px}#keys{display:flex;gap:5px;margin-top:18px;overflow-x:auto}#keys button{flex:1;min-width:44px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}#keys button.sharp{background:#0e1118}#keys button.out-of-scale{opacity:.38}#keys button.held{background:#5d69a6;opacity:1}#keys small{color:var(--muted)}details{margin-top:18px;border:1px solid var(--line);padding:12px;border-radius:8px}details p{max-width:900px}summary{cursor:pointer;color:var(--muted)}footer{display:flex;justify-content:space-between;gap:15px;margin-top:20px;color:var(--muted);font-size:12px}dialog{border:1px solid #525a75;border-radius:12px;background:#181c27;color:var(--text);width:min(520px,94vw);padding:24px}dialog::backdrop{background:#0009}dialog label{display:flex;margin:20px 0}dialog input{width:100%;margin:20px 0}dialog button{margin-top:8px}#reset{font-size:11px;margin-left:auto}#record.active{background:#713247}#remove-all{font-size:11px;margin-top:10px}@media(max-width:750px){main{padding:12px}.workspace{grid-template-columns:1fr}aside{border-right:0;border-bottom:1px solid var(--line)}#patterns{display:flex;gap:10px;overflow:auto}.pattern{min-width:190px}.brand{font-size:19px}header{padding:12px}.transport{gap:8px}.transport label{font-size:11px}#position{width:100%;margin:0}#expression{max-width:220px}.tools{gap:8px}#volume{width:110px}.arr-row button{width:90px}#keys button{min-width:40px}.editor{padding:12px}}#edit-hint{height:42px;overflow:auto;margin:12px 0}#status{display:block;min-height:36px;max-height:36px;overflow:auto}