:root{--screen:#1a1c2c;--panel:#20233a;--control:#333c57;--shadow:#0b0c16;--muted:#94b0c2;--text:#f4f4f4;--line:#2a304a;--beat:#3b4361;--bar:#566c86;--play:#38b764;--rec:#b13e53;--focus:#73eff7;--pixel:"Press Start 2P", monospace}*{box-sizing:border-box}body{background:var(--screen);min-height:100vh;color:var(--text);flex-direction:column;margin:0;font:16px Silkscreen,ui-monospace,monospace;display:flex}button,input{font:inherit;color:inherit}button{cursor:pointer;border:2px solid var(--shadow);background:var(--control)}button:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.label{font:11px var(--pixel);color:var(--muted);margin:0}.top{background:var(--panel);border-bottom:4px solid var(--shadow);align-items:center;gap:12px;padding:12px 24px;display:flex}.wordmark{font:16px var(--pixel)}.top{flex-wrap:wrap}.title{background:0 0;border:2px solid #0000;width:24ch;max-width:100%;margin-left:12px;padding:4px 6px;font-size:20px}.title:hover{border-color:var(--control)}.title:focus{border-color:var(--bar);background:var(--screen);outline:none}.status{color:var(--muted);margin:0;font-size:13px}.status.error{color:#ff8a9c}.actions{flex-wrap:wrap;gap:8px;margin-left:auto;display:flex}.action{min-height:44px;box-shadow:3px 3px 0 var(--shadow);font:10px var(--pixel);padding:0 12px}.action:disabled{cursor:default;color:var(--muted);box-shadow:none}.action.primary{color:var(--screen);background:#ffcd75}.body{flex-wrap:wrap;flex:1;min-height:0;display:flex}.sidebar{background:var(--panel);border-right:4px solid var(--shadow);flex-direction:column;flex:200px;gap:14px;max-width:100%;padding:16px;display:flex}.editor{flex-direction:column;flex:999 560px;gap:10px;min-width:0;padding:16px 24px;display:flex}.slots{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.slot{background:var(--screen);text-align:left;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 10px;display:flex;position:relative}.slot.editing{background:var(--control);border-color:#ffcd75}.slot[aria-current=true]{box-shadow:inset 6px 0 #ffcd75}.slot.playing{background:var(--play);color:var(--screen)}.slot-num{width:18px;font:8px var(--pixel);color:var(--muted)}.slot.playing .slot-num{color:var(--screen)}.slot-name{width:20px;font:14px var(--pixel)}.slot-use{flex:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;height:12px;display:grid}.slot-use span{opacity:.15}.slot-use span.on{opacity:1}.slot-progress{background:var(--screen);width:0;height:4px;position:absolute;bottom:0;left:0}.tools{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:6px;display:grid}.tools button{min-height:44px;padding:0;font-size:13px}.tools button:disabled,.add-slot:disabled{cursor:default;color:var(--control);border-color:var(--control);background:0 0}.add-slot{border:2px dashed var(--bar);min-height:44px;color:var(--muted);background:0 0;font-size:14px}.patterns{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;display:grid}.patterns button{height:44px;font:12px var(--pixel)}.patterns button[aria-pressed=true]{background:var(--text);color:var(--screen)}.editor-head{flex-wrap:wrap;align-items:center;gap:10px 16px;display:flex}.pattern-title{font:14px var(--pixel);margin:0}.hint{color:var(--muted);font-size:14px}.seg{display:flex}.seg button{min-height:36px;margin-left:-2px;padding:0 10px;font-size:14px}.seg button[aria-pressed=true]{background:var(--text);color:var(--screen)}.ruler{grid-template-columns:repeat(var(--beats), minmax(0, 1fr));margin:0 2px 0 58px;display:grid}.ruler button{border:0;border-left:1px solid var(--beat);background:var(--panel);text-align:left;min-height:32px;font:8px var(--pixel);color:var(--muted);padding:0 4px}.ruler button.bar{border-left:2px solid var(--bar);color:var(--text)}.ruler button:hover{background:var(--control)}.lanes{flex-direction:column;gap:10px;display:flex}.lane{--row:18px;border:2px solid var(--control);background:var(--panel);box-shadow:3px 3px 0 var(--shadow)}.lane.noise{--row:36px}.lane.open{border-color:var(--ch)}.lane-head{border-bottom:2px solid var(--shadow);flex-wrap:wrap;align-items:center;gap:8px 16px;padding:6px 10px;display:flex}.chip{background:var(--ch);width:12px;height:12px}.lane-name{width:92px;font:10px var(--pixel)}.mute{min-width:44px;min-height:36px;font:9px var(--pixel);background:var(--screen);color:var(--muted)}.mute[aria-pressed=true]{background:var(--rec);color:var(--text)}.vol{color:var(--muted);align-items:center;gap:8px;font-size:13px;display:flex}.vol input{width:120px;accent-color:var(--ch)}.vol output{width:20px;font:9px var(--pixel);color:var(--text)}.no-vol{color:var(--muted);font-size:13px}.blips{background-color:var(--screen);background-image:linear-gradient(to right, var(--bar) 2px, transparent 2px), linear-gradient(to right, var(--control) 1px, transparent 1px);background-size:calc(100% / var(--bars)) 100%, calc(100% / var(--bars) / 4) 100%;border:0;width:calc(100% - 56px);height:44px;margin-left:56px;padding:0;display:block;position:relative}.blips span{background:var(--ch);position:absolute}.blips .playhead{background:var(--focus);top:0;bottom:0}.roll{max-height:calc(var(--row) * 24);align-items:flex-start;display:flex;overflow-y:auto}.keys{flex:none;width:56px}.key{height:var(--row);border-bottom:1px solid var(--screen);background:var(--text);color:var(--screen);justify-content:flex-end;align-items:center;padding-right:6px;font-size:11px;display:flex}.key.black{background:var(--shadow);color:var(--muted)}.key.c{font-weight:600}.key.drum{background:var(--control);color:var(--text)}.grid{flex:1;min-width:0;position:relative}.row{height:var(--row);border-bottom:1px solid var(--line);cursor:cell;background-color:var(--panel);background-image:linear-gradient(to right, var(--bar) 2px, transparent 2px), linear-gradient(to right, var(--beat) 1px, transparent 1px), linear-gradient(to right, var(--line) 1px, transparent 1px);background-size:calc(100% / var(--bars)) 100%, calc(100% / var(--bars) / 4) 100%, calc(100% / var(--steps)) 100%;position:relative}.row.black{background-color:#16182a}.note{white-space:nowrap;text-align:left;font:7px var(--pixel);color:var(--screen);background:var(--ch);border:0;padding:0 10px 0 4px;position:absolute;top:1px;bottom:1px;overflow:hidden;box-shadow:inset 0 -3px #1a1c2c59}.handle{cursor:ew-resize;background:#1a1c2c59;width:8px;position:absolute;top:0;bottom:0;right:0}.note.ghost{opacity:.7;pointer-events:none}.hear .key{cursor:pointer}.key.down{background:var(--focus);color:var(--screen)}.note.selected{z-index:2;box-shadow:0 0 0 2px var(--text), 0 0 0 4px var(--screen)}.cursor{z-index:1;pointer-events:none;border:2px dashed var(--rec);background:#b13e5326;position:absolute;top:0;bottom:0}.lane-body{position:relative}.popover{z-index:5;border:2px solid var(--text);width:280px;box-shadow:4px 4px 0 var(--shadow);background:#262b44;flex-direction:column;gap:12px;padding:14px;display:flex;position:absolute}.pop-head{align-items:center;gap:10px;display:flex}.pop-name{font:16px var(--pixel);color:var(--ch)}.pop-info{color:var(--muted);flex:1;font-size:13px}.pop-head button{width:36px;height:36px;font:10px var(--pixel)}.pop-row{color:var(--muted);align-items:center;gap:10px;font-size:13px;display:flex}.pop-row input{accent-color:var(--ch);flex:1}.pop-row output{width:32px;font:9px var(--pixel);color:var(--text)}.popover .seg button{flex:1;padding:0 6px;font-size:13px}.pop-note{color:var(--muted);margin:0;font-size:13px}.pop-delete{min-height:40px;font-size:14px}.playhead{background:var(--focus);pointer-events:none;z-index:1;width:2px;display:none;position:absolute;top:0;bottom:0}.transport{z-index:10;border-top:4px solid var(--shadow);background:#0f1020;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:14px 24px;display:flex;position:sticky;bottom:0}.buttons{align-items:center;gap:8px;display:flex}.stop,.play{justify-content:center;align-items:center;display:flex;box-shadow:3px 3px #000}.stop{width:52px;height:52px}.play{width:72px;height:72px}.play .icon-pause,.play.playing .icon-play{display:none}.play.playing .icon-pause{display:block}.play.playing{background:var(--play);color:var(--screen)}.rec{color:#ff8a9c;justify-content:center;align-items:center;width:52px;height:52px;display:flex;box-shadow:3px 3px #000}.rec[aria-pressed=true]{background:var(--rec);color:var(--text)}.toggle{min-height:44px;font:9px var(--pixel);padding:0 12px}.toggle[aria-pressed=true]{background:var(--text);color:var(--screen)}.lcd .mode output{width:96px;font-size:12px}.lcd .mode.recording{background:#3a1520}.lcd .mode.recording span{color:#e05a70}.lcd .mode.recording output{color:#ff8a9c}.keys-panel{flex-wrap:wrap;align-items:center;gap:12px;margin-left:auto;display:flex}.octave{align-items:center;gap:6px;display:flex}.octave button{width:40px;height:40px;font:11px var(--pixel)}.octave output{font:10px var(--pixel)}.latency{color:var(--muted);align-items:center;gap:6px;font-size:13px;display:flex}.latency input{background:var(--screen);border:2px solid var(--bar);width:64px;min-height:40px;color:var(--text);padding:0 6px}.loop{height:52px;font:9px var(--pixel);padding:0 12px;box-shadow:3px 3px #000}.loop[aria-pressed=true]{background:var(--text);color:var(--screen)}.lcd{background:var(--shadow);border:2px solid var(--control);gap:2px;padding:4px;display:flex}.lcd .cell{background:#16211a;flex-direction:column;gap:6px;padding:8px 12px;display:flex}.lcd label,.lcd span{font:7px var(--pixel);color:var(--play)}.lcd input,.lcd output{width:72px;font:16px var(--pixel);color:#a7f070;background:0 0;border:0;padding:0}