:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#eeedf6;background:#14151d;color-scheme:dark;--muted:#aaa9bc;--panel:#1d1e29;--line:#343543;--purple:#c8b8ff;--mint:#bce0ca;--yellow:#ece49b}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select,.file-button{cursor:pointer}button{border:1px solid var(--line);background:#282936;color:#eeedf6;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:600;touch-action:manipulation}button:hover{border-color:#aaa2cd;background:#353447}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--purple);outline-offset:3px}input,select{background:#262733;border:1px solid #454655;color:#eeedf6;border-radius:6px;padding:7px}main{max-width:1420px;margin:auto;padding:26px 40px 18px}.topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}.brand{font-size:28px;font-weight:800;color:var(--purple);text-decoration:none;letter-spacing:-1px}.brand span{font-size:21px;color:#f0eef8;margin-left:6px;letter-spacing:-.8px}.topline button{background:transparent}.songline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:25px}.eyebrow{display:block;letter-spacing:2px;color:var(--muted);font-size:10px;font-weight:700;margin-bottom:8px}#songName{display:block;width:min(500px,100%);background:transparent;border:0;padding:0;font-size:30px;font-weight:650;letter-spacing:-1px}#saveState{font-size:11px;color:var(--muted);display:block;margin-top:8px}.songactions{display:flex;gap:8px}.export{background:var(--purple);color:#222031;border:0}.transport{display:flex;align-items:center;gap:10px;background:#23242f;border:1px solid var(--line);border-radius:12px;padding:12px 14px}.play{background:var(--mint);color:#19271f;border:0;min-width:100px}.tempo{display:flex;align-items:center;gap:8px;margin-left:14px;border-left:1px solid #494957;padding-left:20px}.tempo label,.tempo span{font-size:10px;color:#bcbacb}.tempo input{width:64px;background:#191a24;text-align:center;border:0;font-size:17px}.position{font-variant-numeric:tabular-nums;margin-left:20px;font-size:18px}.position span{font-size:13px;color:var(--muted)}.transport-end{margin-left:auto;font-size:9px;letter-spacing:1.3px;color:#b8b6c9;display:flex;align-items:center;gap:8px}.live-dot{height:6px;width:6px;border-radius:50%;background:var(--mint)}.workhead{display:flex;align-items:center;justify-content:space-between;margin:28px 0 18px;gap:12px}h1{font-size:21px;font-weight:500;letter-spacing:-.5px;margin:0}.demo-buttons{display:flex;gap:6px}.demo-buttons button{font-size:11px;border-radius:20px;padding:8px 12px;background:transparent;color:#c6c3d8}.demo-buttons button.active{color:#21202d;background:var(--purple);border-color:var(--purple)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:16px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:19px}.panelhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.panelhead h2{font-size:14px;font-weight:600;margin:0}.panelhead>span{font-size:9px;color:var(--muted);letter-spacing:1px}.grid-scroll,.arrange-scroll{overflow:auto;padding-bottom:5px}.step-row{display:grid;grid-template-columns:105px repeat(16,minmax(22px,1fr));gap:5px;align-items:center;margin-bottom:9px;min-width:610px}.track-label{border:0;background:transparent;display:flex;gap:7px;align-items:center;padding:7px 0;text-align:left;font-size:12px;min-width:0;color:#b7b5ca}.track-label.selected{color:#fff}.track-dot{width:7px;height:7px;background:var(--track);border-radius:50%;flex-shrink:0}.step{height:33px;padding:0;border:1px solid #363744;background:#2a2b37;border-radius:5px;position:relative}.step:nth-child(4n+2){margin-left:3px}.step.on{background:var(--track);border-color:var(--track);color:#20212b}.step.current{outline:2px solid #fff;outline-offset:2px}.step small{font-size:8px;pointer-events:none}.step-head{font-size:9px;color:var(--muted);text-align:center}.add{margin-top:10px;border:1px dashed #52515f;background:transparent;color:#c6c1db;padding:9px 12px}.instrument .panelhead{margin-bottom:17px}.control{display:block;margin:14px 0;color:#bdbbce;font-size:11px}.control>span{display:flex;justify-content:space-between;margin-bottom:7px}.control input[type=range]{display:block;width:100%;padding:0;accent-color:var(--purple);height:16px}.control select{width:100%;font-size:12px}.control-row{display:flex;gap:8px}.control-row button{flex:1;font-size:11px}.control-row .muted{background:#775152}.arrangement{margin-top:16px}.panelhead label{font-size:11px;color:var(--muted)}.panelhead select{font-size:11px;padding:3px 8px}.arrange-row{display:grid;grid-template-columns:105px repeat(var(--bars),minmax(30px,1fr));gap:5px;margin-bottom:7px;min-width:580px;align-items:center}.clip{height:25px;padding:0;border-radius:4px;background:#292a35;color:#c8c6d8;border:1px solid #3e3e4d;font-size:10px}.clip.on{background:var(--track);border-color:var(--track);color:#20212b;opacity:.85}.clip.current{outline:2px solid white}.arrange-label{font-size:11px;color:#c2c0d2}.keys-panel{margin-top:16px}.keys{display:flex;height:95px;gap:5px}.key{flex:1;min-width:0;background:#e9e7ed;color:#393642;border:0;position:relative;display:flex;align-items:flex-end;justify-content:space-between;padding:10px 12px;border-radius:5px;font-size:11px}.key:active,.key.pressed{background:var(--purple);transform:translateY(2px)}.key span{color:#696575;font-size:10px}.key-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:10px;color:var(--muted)}.key-bottom select{font-size:11px;padding:3px 8px;margin-left:5px}#status{font-size:11px;color:#bdb8ce;padding:17px 0 0;min-height:34px}dialog{background:var(--panel);color:#eeedf6;border:1px solid #666176;border-radius:14px;width:480px;max-width:94vw;padding:24px}dialog::backdrop{background:#080811b0;backdrop-filter:blur(5px)}.project-item{display:flex;justify-content:space-between;gap:8px;margin:10px 0}.project-item>button:first-child{flex:1;text-align:left}.project-actions{display:flex;gap:10px;margin-top:20px}.file-button{background:#2a2b38;border:1px solid var(--line);padding:10px;border-radius:8px;font-size:12px}.file-button input{display:none}@media(max-width:1050px){main{padding:24px}.workspace{grid-template-columns:minmax(0,1fr)}.instrument #controls{display:grid;grid-template-columns:repeat(4,1fr);gap:0 18px}.transport-end{display:none}.instrument .control-row{align-items:center}}@media(max-width:620px){main{padding:18px 14px}.topline{margin-bottom:28px}.brand span{font-size:19px}.songline{align-items:flex-start;flex-direction:column;gap:18px}#songName{font-size:27px}.songactions{width:100%}.songactions button{flex:1}.transport{gap:7px;padding:10px}.tempo{margin-left:3px;padding-left:10px;gap:5px}.tempo label{display:none}.position{margin-left:auto}.play{min-width:85px}.workhead{align-items:flex-start;flex-direction:column;margin-top:24px}h1{font-size:19px}.demo-buttons{width:100%;justify-content:space-between}.demo-buttons button{flex:1;padding:8px}.panel{padding:15px}.instrument #controls{grid-template-columns:repeat(2,1fr)}.panelhead>span{font-size:8px;letter-spacing:.5px}.key{padding:8px 4px;justify-content:center}.key span{display:none}.keys{gap:3px;height:105px}.key-bottom{gap:10px}#keyHint{text-align:right;max-width:150px}.arrangement .panelhead{margin-bottom:14px}.keys-panel .panelhead>span{max-width:150px;text-align:right}.transport .tempo input{width:54px}}