:root{color-scheme:dark;font:14px Inter,system-ui,sans-serif;background:#10131c;color:#eef0ff}*{box-sizing:border-box}body{margin:0}main{max-width:1400px;margin:auto;padding:24px}button,input,select,.file{font:inherit;color:#f1f3ff;background:#272d40;border:1px solid #505b78;border-radius:7px;padding:9px}button,.file{cursor:pointer;touch-action:manipulation}button:hover,.file:hover{border-color:#c4b0ff}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #d2ffa8;outline-offset:3px}button:disabled{opacity:.65;cursor:wait}h2{font-size:15px;margin:0;margin-right:auto}small{color:#b8c2dc;font-size:12px}.toolbar,.projectbar,.heading,.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.toolbar{margin-bottom:20px}.brand{font-size:23px;font-weight:750;margin-right:auto;letter-spacing:-1px}.projectbar{margin-bottom:18px}.projectbar #name{width:190px}.projectbar select{max-width:190px}.play{background:#b7f48d;color:#14220c;font-weight:800;min-width:85px}input[type=number]{width:70px}#transport{color:#c6b2ff;font-variant-numeric:tabular-nums;min-width:50px}.panel{background:#191e2c;border:1px solid #343e56;border-radius:14px;padding:18px;margin-bottom:18px}.heading{margin-bottom:16px}.scroll{overflow:auto;padding:4px}.row{display:grid;grid-template-columns:80px repeat(16,minmax(30px,1fr));gap:6px;margin:8px 0;align-items:center;min-width:740px}.step{height:40px;padding:0;background:#292f42;border:0;border-radius:5px;color:#151524;font-size:10px;font-weight:750}.step:nth-child(4n+2){background:#353e56}.step.on{background:var(--color)}.now{outline:2px solid #d7ffb5!important;outline-offset:1px}.track{text-align:left;font-size:12px;padding:9px 6px;background:#242a3c;color:#e5eaff}.chosen{background:#c0a7ff!important;color:#1b1430!important;border-color:#c0a7ff!important}.timeline-row{display:grid;grid-template-columns:80px repeat(var(--bars),48px);gap:6px;align-items:center;margin:6px 0;font-size:11px}.timeline-row>span:not(:first-child){text-align:center;color:#b8c2dc}.clip,.auto{height:34px;padding:3px;font-size:11px}.clip.filled{background:var(--color);color:#151524;border:0;font-weight:800}.controls{gap:20px;margin-bottom:20px}.controls label{display:grid;gap:9px;flex:1;min-width:110px;color:#c5cde1}.controls input{width:100%;padding:0;accent-color:#b8a0ff}.keys{display:flex;height:100px;gap:6px}.key{flex:1;background:#e9e6fa;color:#222039;border:0;border-bottom:6px solid #b2abc9;min-width:0;padding:6px}.key small{display:block;color:#48415e;margin-top:13px}.key:active{background:#b8a0ff}.file{position:relative;display:inline-block;overflow:hidden}.file input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}#status{display:block;min-height:30px;color:#c4eea8;padding:6px 0}#clip{max-width:260px;overflow-wrap:anywhere}@media(max-width:600px){main{padding:12px}.panel{padding:12px}.toolbar,.projectbar,.heading{gap:8px}.brand{width:100%;font-size:21px}.heading h2{width:100%}.controls{gap:12px}.controls label{min-width:100px}.keys{height:90px}.key{font-size:11px;padding:3px}.projectbar #name{flex:1;min-width:130px}.projectbar select{max-width:150px}.file,button,select{min-height:38px}}