:root{color-scheme:dark;--bg:#101216;--panel:#191c22;--line:#2a2e36;--muted:#8c929e;--green:#b6ef76}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#e9ecf0;font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}button,select{border:1px solid var(--line);background:#23262e;color:#dce0e7;border-radius:7px;padding:10px 15px;cursor:pointer}button:hover{filter:brightness(1.2)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:3px}header{height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:22px;font-weight:700}.logo{color:var(--green);font-size:30px}.subbrand{color:var(--muted);font-size:16px;font-weight:400}.badge,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--muted)}.badge i,.dot{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:100%;margin-left:10px}main{max-width:1280px;margin:auto;padding:40px 40px 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px}.eyebrow{color:var(--green)}h1{font-size:46px;letter-spacing:-2px;line-height:1.08;margin:18px 0}h1 span{color:#818894}p{color:var(--muted);font-size:13px;line-height:1.6}.intro-art{display:flex;align-items:center;gap:8px;height:145px;padding-right:35px;transform:rotate(-8deg)}.intro-art span{width:12px;background:linear-gradient(#b6ef76,#394e27);border-radius:10px;height:30%}.intro-art span:nth-child(3n){height:90%}.intro-art span:nth-child(3n + 1){height:55%}.intro-art span:nth-child(5n){height:75%}.studio{background:var(--panel);border:1px solid #343942;border-radius:12px;overflow:hidden;box-shadow:0 25px 70px #0004}.transport{padding:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);background:#20242b}.playgroup,.settings{display:flex;align-items:center;gap:12px}.primary{background:var(--green);color:#182411;border:0;font-weight:700;min-width:135px}#position{font:18px monospace;color:var(--green);margin-left:12px}.settings label{font-size:10px;letter-spacing:1px;color:var(--muted);display:flex;align-items:center;gap:10px}#bpm{width:65px;padding:9px 5px;text-align:center;background:#12151a;color:white;border:1px solid var(--line);border-radius:5px;font:18px monospace}input[type=range]{accent-color:var(--green);cursor:pointer}#swing{width:70px}output{font:12px monospace}.rackhead,.rackfoot{padding:20px 24px;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:1px}.rackhead .dot{margin:0 8px 0 0}.rackhead span{font-size:10px;color:var(--muted);margin-left:20px}.rackhead select{font-size:12px;letter-spacing:0}.gridscroll{overflow-x:auto;padding:0 24px}#rack{min-width:740px}.row{display:grid;grid-template-columns:185px repeat(16,minmax(22px,1fr));gap:7px;align-items:center;padding:10px 0;border-top:1px solid #ffffff06}.instrument{display:flex;align-items:center;gap:8px}.instrument .mute{padding:0;border:0;background:transparent;color:var(--color);font-size:19px}.instrument .muted{color:#545a66}.sound{background:transparent;border:0;padding:6px;color:#dce0e7;text-align:left;min-width:75px;font-size:13px}.instrument input{width:52px;accent-color:var(--color)}.step{height:42px;padding:0;background:#30353e;border:1px solid #ffffff04;border-radius:5px}.step.group{background:#3a3540}.step.on{background:var(--color);box-shadow:0 2px 10px color-mix(in srgb,var(--color) 20%,transparent)}.step.current{outline:2px solid #fff;outline-offset:2px}.numbers{border:0;padding-bottom:12px;color:#626b79;text-align:center;font:10px monospace}.numbers .groupnum{color:#a0a8b6}.rackfoot{color:var(--muted);font-size:11px;letter-spacing:0}.rackfoot .dot{margin:0 6px 0 0}.rackfoot button{background:transparent;border:0;color:var(--muted);font-size:12px}.bottom{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;margin-top:22px}.panel{padding:24px;background:#171a20;border:1px solid var(--line);border-radius:10px}.panel .eyebrow{color:var(--muted)}.volume{display:flex;align-items:center;gap:16px;margin:20px 0 8px}.volume input{flex:1}.volume span{color:var(--green)}.panel p{font-size:11px;margin-bottom:0}.tips p{margin-top:20px}kbd{display:inline-block;border:1px solid #424752;border-radius:4px;padding:3px 7px;color:#c9cdd5;font:10px monospace;margin-right:5px}.tips kbd:not(:first-child){margin-left:12px}#status{min-height:20px;color:var(--green)}footer{display:flex;justify-content:space-between;padding:25px 0;border-top:1px solid var(--line);color:#69717e;font-size:10px;letter-spacing:1px}footer i{color:var(--green);font-size:18px;margin-left:14px}@media(max-width:800px){main{padding:25px 16px 0}.transport{flex-wrap:wrap;padding:15px}.settings{order:3;width:100%;justify-content:center}.rackhead{padding:16px;gap:10px}.rackhead span{display:none}.gridscroll{padding:0 16px}.bottom{grid-template-columns:1fr}.intro-art{padding:0;gap:5px}.intro-art span{width:7px}h1{font-size:36px}.badge{display:none}.subbrand{font-size:13px}.tips kbd:not(:first-child){margin-left:5px}#position{font-size:14px;margin:0}#export{font-size:12px}.playgroup{gap:7px}.primary{min-width:100px}}
.drumpanel{margin-top:22px}.drumheading{display:flex;justify-content:space-between;align-items:center;gap:15px}.drumheading h2{font-size:20px;margin:10px 0 20px;letter-spacing:-.5px}.drumheading p{font-size:12px}.pads{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.pad{min-height:120px;border-bottom:3px solid var(--color);background:#22262d;position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;touch-action:manipulation;user-select:none;font-size:10px;letter-spacing:1px}.pad kbd{position:absolute;top:10px;left:10px;margin:0;color:#777}.padsymbol{color:var(--color);font-size:32px;margin-top:10px}.pad.hit{background:var(--color);color:#101216;transform:translateY(2px)}.pad.hit .padsymbol{color:#101216}@media(max-width:650px){.pads{grid-template-columns:repeat(3,1fr)}.drumheading{display:block}.drumheading p{margin-top:0;margin-bottom:20px}}
.projectbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:28px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:12px}.projectbar label{color:var(--muted)}.projectbar input{margin-left:8px;padding:9px;background:#101216;border:1px solid var(--line);color:white;border-radius:5px;max-width:180px}.projectbar a{color:var(--green)}#save-state{color:var(--muted);margin-left:auto}main.auth-pending{display:none}main[inert]{opacity:.6}.melody-panel{margin-top:22px}.melody-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px}.melody-controls label{display:flex;align-items:center;gap:8px;color:var(--muted)}.melody-controls input[type=range]{width:75px}.melody-controls button,.melody-controls select{padding:8px;font-size:12px}.piano-scroll{overflow-x:auto;margin-top:16px}#piano-roll{min-width:740px}.piano-row{display:flex;height:30px;gap:8px}.piano-key{width:60px;flex-shrink:0;border-radius:2px;padding:0;background:#dddbe6;color:#181525;font:11px monospace}.piano-key.black{background:#34303e;color:#cfcbd7}.piano-lane{position:relative;flex:1;display:grid;grid-template-columns:repeat(16,1fr)}.piano-cell{padding:0;border-radius:0;border:1px solid #252933;background:#1d2027}.piano-cell.bar{border-left-color:#555966}.piano-cell.playhead{background:#434936}.melody-note{position:absolute;height:26px;top:2px;padding:0 5px;border-radius:3px;background:#b8a0ee;color:#171321;border:1px solid #c9b6fa;font:10px monospace;text-align:left;overflow:hidden;z-index:1}.melody-note.selected{outline:2px solid var(--green);outline-offset:-2px}.note-handle{position:absolute;right:0;top:0;bottom:0;width:16px;cursor:ew-resize;display:grid;place-items:center;touch-action:none;background:#0002}.melody-panel p{font-size:11px}