:root{color-scheme:dark;--bg:#11151c;--panel:#1b202b;--inset:#141923;--border:#363e4d;--text:#f4f5ed;--muted:#b8bfcc;--accent:#c2ed7c;--ink:#192018}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px 'DM Sans',sans-serif}button,input,select{font:inherit}button,.button,select,input[type=number],input[type=text]{color:var(--text);background:var(--inset);border:1px solid var(--border);border-radius:7px}button,.button{padding:10px 13px;cursor:pointer;min-height:40px}button:hover,.button:hover{border-color:var(--accent)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.65;cursor:wait}label{display:flex;align-items:center;gap:9px;color:var(--muted)}input[type=range]{accent-color:var(--accent);min-width:0;width:125px}input[type=number]{width:64px;padding:8px}input[type=checkbox]{accent-color:var(--accent)}select{padding:8px}main{max-width:1600px;margin:auto;padding:25px}header{display:flex;align-items:center;gap:9px;margin-bottom:24px;flex-wrap:wrap}.brand{display:flex;gap:10px;align-items:center;color:var(--accent);text-decoration:none;font:bold 29px 'Space Grotesk',sans-serif;margin-right:20px}.brand span{font-size:18px;letter-spacing:2px}.brand small{display:block;font:11px 'DM Sans',sans-serif;letter-spacing:.4px;color:var(--muted);margin-top:5px}.project{margin-right:auto;min-width:180px}.project input{display:block;color:var(--text);background:transparent;border:0;font:500 22px 'Space Grotesk',sans-serif;width:240px;max-width:100%;padding:3px 0}.project span{color:var(--muted);font-size:11px}.transport{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--border);padding:18px 0 23px}.primary{background:var(--accent);color:var(--ink);font-weight:bold;min-width:100px}#position{font-family:monospace;color:var(--accent);font-size:19px;margin-right:auto}#status{font-size:12px;color:var(--muted);width:100%}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:20px}.maincol{min-width:0}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:20px}.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:19px 18px;flex-wrap:wrap}h1,h2{font:500 17px 'Space Grotesk',sans-serif;margin:0}.sectionhead>span{color:var(--muted);font-size:11px}#patterns{display:flex;gap:5px}#patterns button{padding:6px 12px;min-height:32px}.active{background:var(--accent)!important;color:var(--ink)!important;border-color:var(--accent)!important}.gridscroll,.arrangescroll{overflow-x:auto;padding:0 18px 16px}#sequencer{min-width:690px}.stephead,.trackrow{display:grid;grid-template-columns:106px repeat(16,minmax(26px,1fr));gap:5px;align-items:center;margin:7px 0}.stephead{color:var(--muted);font-size:10px;text-align:center}.sound{border:0;background:transparent;text-align:left;display:flex;align-items:center;gap:9px;padding:7px 0}.dot{width:8px;height:8px;border-radius:50%;background:var(--track)}.step{padding:0;border:1px solid #3b4657;background:#293241;border-radius:5px;height:35px;min-height:35px;color:#f7f9ff;font-size:10px}.step.beat{background:#354153}.step.on{background:var(--track);color:#151c25;border-color:var(--track)}.step.now{box-shadow:0 0 0 2px #fff}.gridfooter{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--inset);gap:12px}.gridfooter span{font-size:11px;color:var(--muted)}.gridfooter button{font-size:11px;padding:6px 10px;min-height:30px}#arrangement{display:grid;gap:6px;min-width:600px}.arrangerow{display:flex;gap:6px;align-items:center}.arrangelabel{width:95px;flex-shrink:0;color:var(--muted);font-size:12px}.clip{min-width:45px;flex:1;padding:8px 4px;font-size:11px;background:#303b4b;color:#f4f5ed;border-top:3px solid var(--track)}.clip.off{background:var(--inset);color:var(--muted);border-top-color:var(--border)}#keyboard{display:flex;height:140px;margin:0 18px 15px;position:relative;gap:3px}.key{background:#eeeee6;color:#29313b;border:1px solid #b8bfcc;flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:15px;touch-action:none;user-select:none;border-radius:0 0 7px 7px}.key.black{background:#141923;color:#e5e9f1;height:87px;width:6.5%;position:absolute;z-index:1;padding-bottom:10px}.key.pressed{background:var(--accent);color:var(--ink)}#demos{padding:0 14px 14px}.demo{display:block;width:100%;text-align:left;margin-bottom:8px;padding:13px}.demo strong{display:block;margin-bottom:4px;font-weight:500}.demo small{color:var(--muted)}.controls{padding:0 18px 18px}.controls label{justify-content:space-between;margin-bottom:13px;font-size:12px}#mixer{padding:0 18px 12px}.mixrow{display:flex;align-items:center;gap:7px;margin-bottom:9px}.mixrow span{width:46px;font-size:12px}.mixrow input{flex:1;width:70px}.mixrow button{padding:4px 8px;min-height:29px;font-size:11px}footer{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:10px;letter-spacing:1px;margin:7px 0 20px}footer span{letter-spacing:0}dialog{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:12px;width:480px;max-width:95vw}dialog::backdrop{background:#000a}.projectitem{display:flex;gap:8px;margin:10px}.projectitem button:first-child{flex:1;text-align:left}@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr)}aside{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}aside .sectionhead{padding:15px}.brand{margin-right:auto}.project{margin-right:0}.controls label{flex-wrap:wrap}.controls input{width:100%}}@media(max-width:650px){main{padding:14px}.brand span{font-size:15px}.brand{margin-right:0}.project{margin-left:auto;min-width:120px}.project input{font-size:18px;width:150px}header button,.button{font-size:12px;padding:8px 11px}header{margin-bottom:14px;gap:6px}.transport{gap:10px;padding:14px 0}.transport label{font-size:12px}.transport input[type=number]{width:55px}.transport #export{margin-left:auto}#position{margin-right:0}.sectionhead{padding:14px}.sectionhead h1,.sectionhead h2{font-size:16px}.sectionhead label{font-size:11px}.gridfooter span{line-height:1.5}.gridfooter{padding:10px}aside{display:block}.keyboardpanel .sectionhead{gap:8px}#keyboard{height:130px;margin:0 10px 12px}.key{font-size:10px}footer{flex-direction:column;line-height:1.5}#status{min-height:18px}#patterns button{padding:5px 9px}}