:root{color-scheme:dark;--bg:#11151e;--panel:#1c2330;--fg:#f1f4ff;--muted:#bac5db;--border:#56657f;--button:#303c51;--accent:#b7f36b;--purple:#c59bff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:14px system-ui}main{max-width:1200px;margin:auto;padding:24px}.brand{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}.brand h1{font-size:24px;margin:0}.brand span,.hint,#position{color:var(--muted)}button,input,select,.file{font:inherit;background:var(--button);color:var(--fg);border:1px solid var(--border);border-radius:8px;min-height:44px;padding:8px 12px}button,.file{cursor:pointer}button:disabled{background:#283244;color:#c3cbd9;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}button.primary,button.enabled{background:var(--accent);color:#17220c;border-color:var(--accent)}input[type=number]{width:78px}input[type=range]{width:110px;min-height:44px;padding:0;accent-color:var(--accent)}input[type=checkbox]{min-height:auto;accent-color:var(--accent)}.transport,.projects,.controls,.sectionhead{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.projects{margin-top:14px}.projects #name{width:180px}.file input{display:none}label{display:inline-flex;align-items:center;gap:7px;color:var(--muted)}section{margin:18px 0;background:var(--panel);border:1px solid #344058;border-radius:14px;padding:18px}h2{font-size:16px;margin:0 8px 0 0}.sectionhead{margin-bottom:16px}.scroll{overflow-x:auto;padding:3px 2px 10px}.arr{display:grid;gap:5px;width:max-content;min-width:100%;align-items:center;margin:6px 0}.trackLabel{width:108px;display:flex;align-items:center;gap:8px}.trackLabel button{padding:5px;min-width:35px}.clip{width:44px;padding:5px;background:#334158}.clip.filled{background:#574078;color:#f8f1ff}.clip.current{outline:2px solid var(--accent)}.barhead{width:44px;text-align:center;color:var(--muted)}#steps{display:grid;grid-template-columns:repeat(16,minmax(40px,1fr));gap:6px;min-width:740px}.step{height:73px;padding:4px;background:#303c51;border:1px solid #53627b;display:flex;flex-direction:column;justify-content:space-between;font-size:12px}.step:nth-child(4n+1){border-left:3px solid #96a6c6}.step.on{background:var(--purple);color:#21132d}.step.selected{box-shadow:inset 0 0 0 2px #f4f7ff}.step.now{outline:2px solid var(--accent);outline-offset:2px}.controls{margin:10px 0}.keys{display:flex;gap:6px;margin-top:16px}.keys button{flex:1;min-width:26px;height:85px;background:#e5ebf8;color:#1a2439;border:0;border-bottom:5px solid #91a0bd}.keys button:active,.keys button.down{background:var(--accent)}#status{min-height:22px;color:var(--accent);overflow-wrap:anywhere}#status.error{color:#ffb8b8}.hint{font-size:12px;margin-bottom:0}#selected,#autoValue{color:var(--muted);font-size:13px}#audioClip{color:var(--muted)}a{color:var(--accent)}@media(max-width:600px){main{padding:14px}section{padding:12px}.brand h1{font-size:22px}.projects{gap:7px}.projects button,.projects select{flex-grow:1}.projects #name{width:100%}.transport{gap:8px}.keys{gap:4px}.keys button{padding:3px;height:74px}.controls label{flex:1 1 135px}.controls input[type=range]{width:90px}.hint{line-height:1.6}}