:root{color-scheme:dark;--bg:#10161e;--panel:#19232f;--line:#334151;--text:#e8edf3;--muted:#a7b6c6;--accent:#c1e7be}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 'Segoe UI',sans-serif}main{max-width:1440px;margin:auto;padding:36px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}header p{color:var(--muted);margin:8px 0}h1{font-size:34px;letter-spacing:-1px;margin:0}h2{font-size:17px;margin:0}.eyebrow{letter-spacing:2px;font-size:11px;font-weight:700}a{color:var(--accent)}#controls,.workspace,.inspector{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px}.primary,.advanced{display:grid;grid-template-columns:repeat(5,minmax(100px,1fr));gap:18px}label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:6px}button,input,select{font:inherit;border:1px solid #495c70;background:#111b27;color:var(--text);border-radius:5px;padding:9px 12px}input,select{width:100%;font-size:15px}button{cursor:pointer}button:hover{border-color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.presets{display:flex;gap:5px}.presets button{padding:3px 9px;font-size:11px}details{margin-top:16px}summary{cursor:pointer;color:var(--muted);font-size:13px}.advanced{grid-template-columns:repeat(6,minmax(80px,1fr));padding-top:18px}small{font-size:10px}.actions{display:flex;gap:10px;margin-top:24px;align-items:center}.spacer{flex:1}.accent{background:var(--accent);color:#18311c;font-weight:700}.export{border-color:#87ba91}button:disabled{opacity:.4;cursor:not-allowed}#status{font-size:13px;color:var(--muted);min-height:22px}.error{color:#ffb4b4!important}.grid-heading{display:flex;justify-content:space-between;align-items:center}.grid-heading label{flex-direction:row;align-items:center}.legend{display:flex;gap:22px;font-size:12px}.kick{color:#f07178}.snare{color:#5da9f6}.hat{color:#e5c453}.percussion{color:#64c4a0}.ghost{color:#a8d5f5}#grid{overflow:auto;max-height:650px;margin-top:16px}table{width:100%;border-collapse:collapse;font-family:Consolas,monospace;font-size:12px}th{position:sticky;top:0;background:#1c2a38;text-align:left;padding:11px;z-index:1;color:var(--muted)}td{border-bottom:1px solid #263543;padding:3px 8px;vertical-align:top;min-width:56px}.beat td{border-top:1px solid #597086}.empty{color:#516071}.hit{display:block;width:100%;text-align:left;background:transparent;border:1px solid transparent;padding:5px 4px;white-space:nowrap;font-size:12px}.hit.ghost{font-style:italic}.inspector{margin-top:18px}.inspector p{margin-bottom:0;color:var(--muted)}footer{font-size:12px;color:var(--muted);padding:24px 2px;line-height:1.9}@media(max-width:900px){main{padding:18px}.primary{grid-template-columns:repeat(3,1fr)}.advanced{grid-template-columns:repeat(3,1fr)}header{align-items:start;gap:20px}.actions{flex-wrap:wrap}.legend{flex-wrap:wrap;gap:12px}}@media(max-width:520px){.primary,.advanced{grid-template-columns:repeat(2,1fr)}h1{font-size:26px}header a{font-size:12px}.spacer{display:none}.workspace{padding:12px}}
:root{--selection:#a7d6ff}
.editor-tools{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.selection-tools,.lane-locks,.edit-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.selection-tools{align-items:end}.selection-tools label{max-width:90px}.selection-tools button,.edit-actions button{font-size:13px}
#selection-status{font-size:12px;color:var(--selection);padding-bottom:10px}
.lane-locks{margin:16px 0;color:var(--muted);font-size:12px}.lane-locks label{flex-direction:row;align-items:center;gap:6px;padding:5px 8px;background:#111b27;border-radius:4px}
.lane-locks input{width:auto;accent-color:var(--accent)}
.selection-help{font-size:12px;color:var(--muted);margin:12px 0 0}
.row-select{padding:3px 7px;font:inherit;border-color:transparent;background:transparent;color:var(--muted)}
.selected-row td{background:#213a4f}.selected-row .row-select{color:white;border-color:var(--selection)}
.hit.selected-hit{border-color:var(--selection);background:#263d51}.hit.locked-hit{font-weight:700;border-left:3px solid #a1b9ac}
.hit.selected-hit.locked-hit{border-left-color:var(--selection)}
#grid td:nth-child(2){white-space:nowrap}

.primary{grid-template-columns:repeat(3,minmax(0,1fr))}.tempo-control{display:flex;flex-direction:column;gap:7px}input[type=range]{padding:0;min-height:28px;width:100%;accent-color:#9bca71;cursor:pointer}output{font-variant-numeric:tabular-nums;color:#c8e6a8}input[type=range]:focus-visible{outline:2px solid #c8e6a8;outline-offset:3px}@media(max-width:520px){.primary{grid-template-columns:repeat(2,minmax(0,1fr))}}

.sample-panel{background:var(--panel);border:1px dashed var(--line);border-radius:10px;padding:22px;margin-bottom:20px;min-width:0}.sample-panel p{font-size:12px;color:var(--muted);overflow-wrap:anywhere}.sample-panel canvas{display:block;width:100%;height:160px;border-radius:6px}.sample-panel.dragging{border-color:var(--accent)}.loop-label{flex-direction:row;align-items:center}.loop-label input{width:auto}.sample-panel .grid-heading{gap:16px;flex-wrap:wrap}.sample-panel input[type=file]{max-width:100%}.actions{flex-wrap:wrap}

#chop-controls{border:1px solid var(--line);margin:20px 0 8px;padding:16px;min-width:0;border-radius:6px}.chop-options{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.chop-options label{flex:1;min-width:130px}.chop-options button{align-self:end}#slice-list{display:flex;gap:6px;flex-wrap:wrap;max-height:180px;overflow:auto;margin:16px 0}#slice-list button{padding:6px 10px;font-size:12px}#slice-list button[aria-pressed=true]{border-color:var(--accent);background:#294437}#waveform{touch-action:none;cursor:crosshair}fieldset:disabled{opacity:.5}

.tracker-edit{border:1px solid var(--line);border-radius:6px;margin:16px 0;padding:16px;min-width:0}.tracker-edit p{font-size:12px;color:var(--muted)}.tracker-edit .chop-options{margin-top:12px}.empty-cell{border:0;background:transparent;color:#8299b0;width:100%;text-align:left;padding:5px}.cursor-cell{outline:1px solid #a7d6ff;outline-offset:-2px}.playing-row td{background:#2c3b40}#edit-target{overflow-wrap:anywhere}

#drum-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0}.drum-slot{padding:14px;border:1px solid var(--line);border-radius:7px;min-width:0}.drum-slot h3{font-size:15px;margin:0 0 10px}.drum-slot input[type=file]{padding:6px;max-width:100%;font-size:12px}.drum-slot p{overflow-wrap:anywhere;min-height:38px}.drum-slot .loop-label{margin-top:12px}.drum-slot button{margin:0 6px 6px 0}@media(max-width:900px){#drum-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){#drum-slots{grid-template-columns:1fr}}

[hidden]{display:none!important}.project-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:20px}.open-project{display:flex;max-width:250px}.open-project input{font-size:12px}.drum-slot select{font-size:13px}.drum-slot label{margin-top:10px}#save-status{font-size:12px;color:var(--muted)}

.primary{grid-template-columns:minmax(180px,1.3fr) minmax(200px,1.5fr) minmax(170px,1.2fr) minmax(85px,.6fr)}.advanced{grid-template-columns:repeat(4,minmax(0,1fr))}.generation-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;flex-wrap:wrap}.toolbar-group{display:flex;align-items:center;gap:8px}.output-group{margin-left:auto}.playback-group{border-left:1px solid var(--line);padding-left:16px}.generation-summary{margin:14px 0 0;color:var(--muted);font-size:12px}.export-mode-select{font-size:12px;padding:7px 10px;background:#1a2734;color:var(--text);border:1px solid #495c70;border-radius:5px;cursor:pointer}#more-actions{position:relative;margin:0}#more-actions>summary{list-style:none;border:1px solid #495c70;border-radius:5px;padding:9px 12px;color:var(--text)}#more-actions>summary::-webkit-details-marker{display:none}.more-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:10;display:grid;gap:6px;padding:8px;width:220px;border:1px solid var(--line);border-radius:6px;background:var(--panel);box-shadow:0 8px 20px #0006}.more-menu button{text-align:left;font-size:13px}.effects-panel{border-top:1px solid var(--line);padding-top:12px}.effects-panel[open]{display:grid;gap:4px}.effects-panel label{font-size:11px}.effects-panel input[type=number]{padding:6px 8px;font-size:13px}@media(max-width:900px){.primary,.advanced{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.generation-toolbar{gap:12px}.output-group{margin-left:0}.playback-group{border:0;padding:0}.primary{grid-template-columns:1fr}.advanced{grid-template-columns:repeat(2,minmax(0,1fr))}}

.bank-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.bank-slot{border:1px solid #405566;border-radius:8px;padding:12px;display:grid;gap:8px;min-width:0}.bank-slot.active{border-color:#bfe5c3;background:#20352f}.bank-slot input{width:100%;min-width:0}.sequence-step{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}.sequence-step input{width:65px}.bank-slot button{white-space:normal}#arranger{margin-top:16px}#sequence .playing-step{outline:2px solid #bfe5c3}@media(max-width:700px){.bank-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}