:root{color-scheme:dark;--bg:#10141f;--panel:#1b2131;--line:#333b50;--text:#f2f4fc;--muted:#aab4ca;--lime:#c5f48a;--purple:#c1a9ff;--pink:#ffb4cc}*{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,.file-button{border:1px solid var(--line);border-radius:8px;background:#252d41;color:var(--text);cursor:pointer;padding:10px 14px;min-height:42px}button:hover{background:#38435e}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:3px}input,select{background:#121725;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:8px;min-height:40px}input[type=range]{accent-color:var(--lime);width:100%;padding:0}input[type=number]{width:68px}label{color:var(--muted);font-size:12px}h1,h2{font-family:'Space Grotesk',sans-serif;font-weight:500;margin:7px 0 0;font-size:23px}h2{font-size:20px}main{max-width:1500px;margin:auto;padding:26px 32px 0}header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:26px;border-bottom:1px solid var(--line)}.brand{font:600 24px 'Space Grotesk',sans-serif;color:var(--text);text-decoration:none;letter-spacing:-1px;white-space:nowrap}.brand>span:last-child{color:var(--lime)}.logo{display:inline-grid;place-items:center;width:36px;height:36px;background:var(--lime);color:#15231a;border-radius:10px;margin-right:10px}.project-tools{display:flex;gap:8px}.lime,button.lime:hover{background:var(--lime);color:#192514;border-color:var(--lime);font-weight:700}.transport{display:flex;justify-content:space-between;align-items:center;padding:28px 0;gap:20px}.eyebrow,.section-label{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--muted)}#name{display:block;border:0;background:transparent;font:500 27px 'Space Grotesk',sans-serif;padding:6px 0;width:100%;max-width:420px;color:var(--text)}.play-tools{display:flex;align-items:center;gap:10px}.play-tools label{display:grid;gap:4px}.play{background:var(--lime);color:#192514;width:50px;height:50px;border:0}.play-tools>label:has(#swing){width:90px}#position{font:18px monospace;color:var(--lime);padding-left:12px;white-space:nowrap}.workspace{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px}aside{border-right:1px solid var(--line);padding-right:22px}.section-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-label button{padding:0 10px;font-size:20px}.track{padding:14px 12px;border:1px solid transparent;border-radius:10px;margin-bottom:8px;background:#191f2e;position:relative}.track.selected{background:#293048;border-color:var(--purple)}.track-name{border:0;background:transparent;padding:0;text-align:left;width:100%;font-weight:600;display:flex;align-items:center;gap:8px}.track-name i{width:9px;height:9px;border-radius:50%;background:var(--track-color)}.mixer{display:flex;align-items:center;gap:8px;margin-top:8px}.mixer input{min-width:0}.mute{min-height:32px;padding:4px 9px;font-size:11px}.mute[aria-pressed=true]{background:var(--pink);color:#351022}.demo-box{margin-top:38px}.demo-box button{display:block;text-align:left;background:transparent;border:0;padding:15px 0;width:100%;color:var(--text)}small{display:block;color:var(--muted);font-size:11px;padding:5px 0 0 18px}.editor{min-width:0;display:grid;gap:20px}section.pattern,section.instrument,section.arrangement{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:23px}.section-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.segment{display:flex;gap:4px}.segment button{font-size:12px;padding:8px 12px}.segment button[aria-pressed=true]{background:var(--purple);color:#21153f;border-color:var(--purple)}.grid-scroll{overflow-x:auto;padding-bottom:8px}#steps{display:grid;grid-template-columns:repeat(16,minmax(36px,1fr));gap:6px}.step{height:82px;min-width:36px;border-radius:7px;background:#30394e;padding:0;position:relative}.step:nth-child(4n+1){border-left:2px solid #65738d}.step[aria-pressed=true]{background:var(--purple);border-color:var(--purple);box-shadow:inset 0 -5px #9c80d9}.step.playing{outline:2px solid var(--lime);outline-offset:2px}.step span{position:absolute;bottom:8px;left:0;right:0;font:11px monospace;color:#d0d8e8}.step[aria-pressed=true] span{color:#26183e}.pattern-footer{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;margin-top:12px;gap:10px}.pattern-footer button{min-height:32px;font-size:11px;padding:5px 10px}.knobs{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}.knobs label{display:grid;gap:10px}.knobs select{width:100%}#keyboard{display:flex;height:92px;gap:4px;margin-top:24px;touch-action:none}.key{flex:1;min-width:0;background:#dfe4ef;color:#25304a;border:0;border-radius:0 0 7px 7px;padding:0 0 8px;display:flex;align-items:end;justify-content:center;font-size:11px}.key.black{background:#0b101c;color:#b9c4dc;height:60px;border:1px solid #46516a}.key.active,.key:hover{background:var(--lime);color:#172510}.keyboard-note{color:var(--muted);font-size:10px;margin-top:12px}.timeline-scroll{overflow:auto}#timeline{display:grid;gap:5px;min-width:580px}.timeline-row{display:grid;gap:5px;grid-template-columns:110px repeat(var(--bars),minmax(48px,1fr));align-items:center;min-width:max-content}.timeline-row>span{font-size:11px;color:var(--muted);padding:8px}.clip{background:#30394e;color:var(--text);min-height:36px;height:36px;border-radius:5px;padding:5px;font-size:11px}.clip.a{background:#4b416b;color:#e8dfff;border-color:#7c66ab}.clip.b{background:#354e49;color:#d2f6d6;border-color:#648770}.timeline-row .current{outline:2px solid var(--lime)}footer{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:11px;padding:20px 0}.local-note{margin-left:auto;font-size:9px;letter-spacing:1.5px}.live-dot{width:6px;height:6px;background:var(--lime);border-radius:50%}dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:24px;width:min(480px,90vw)}dialog::backdrop{background:#070a13bd}dialog p{color:var(--muted);font-size:12px;line-height:1.6}#project-list{margin:16px 0;display:grid;gap:8px}.project-row{display:flex;gap:8px}.project-row button:first-child{flex:1;text-align:left}.file-button{display:inline-block}.file-button input{display:none}@media(max-width:900px){main{padding:18px 16px 0}.workspace{grid-template-columns:170px minmax(0,1fr);gap:16px}aside{padding-right:12px}.knobs{gap:12px;grid-template-columns:repeat(3,1fr)}.brand{font-size:21px}.project-tools button{font-size:11px;padding:8px}.transport{align-items:start}#position{display:none}.play-tools{flex-wrap:wrap;justify-content:end}#name{font-size:23px}section.pattern,section.instrument,section.arrangement{padding:16px}}@media(max-width:600px){header{align-items:start;flex-direction:column;gap:16px;padding-bottom:18px}.project-tools{width:100%;display:grid;grid-template-columns:repeat(4,1fr)}.project-tools button{padding:8px 4px;font-size:10px}.transport{padding:18px 0;flex-direction:column;gap:12px}.play-tools{justify-content:start;width:100%}.play-tools>label:has(#swing){width:90px}#position{display:block}.workspace{display:flex;flex-direction:column;gap:16px}aside{border:0;padding:0}.section-label{margin-bottom:8px}#tracks{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}.track{min-width:145px;margin:0}.demo-box{margin:12px 0 0;display:flex;gap:6px;overflow:auto}.demo-box .eyebrow{display:none}.demo-box button{min-width:132px;border:1px solid var(--line);padding:8px;font-size:11px;min-height:48px}.demo-box small{padding:4px 0 0;font-size:9px}.section-top{margin-bottom:16px}h1{font-size:20px}.segment button{padding:6px 8px;font-size:10px}.step{height:70px}.knobs{gap:12px}.keyboard-note{font-size:9px}.local-note{display:none}}