[hidden]{display:none!important}
:root{--control:#2b332a;--control-line:#465141;--text-soft:#aab4a4}

.topbar{height:62px;gap:24px}.top-actions{gap:8px}.project-action{border:1px solid var(--control-line);border-radius:6px;background:var(--control);color:#e3e9dc;padding:8px 11px;white-space:nowrap;font-size:11px;font-weight:700}.project-action:hover,.project-action:focus-visible{background:#3b4836}.top-actions .export-btn{height:34px}
.toolbar{height:64px;position:sticky;top:0;z-index:4;background:#1b1f1a;box-shadow:0 6px 18px #1114}.master input{width:90px}.toolbar-right{gap:20px}

.starter-drawer{border:1px solid #414e3b;border-radius:9px;background:#222a20;margin-bottom:17px}.starter-drawer summary{display:flex;align-items:center;gap:11px;padding:12px 15px;cursor:pointer;list-style:none}.starter-drawer summary::-webkit-details-marker{display:none}.starter-drawer summary::after{content:'+';margin-left:auto;color:var(--lime);font-size:18px}.starter-drawer[open] summary::after{content:'−'}.starter-symbol{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;background:#374831;color:var(--lime);font-size:17px}.starter-drawer summary strong,.starter-drawer summary small{display:block}.starter-drawer summary small{color:var(--text-soft);margin-top:3px;font-size:11px}.starter-drawer #quickStart{padding:0 12px 12px}
.edit-history{display:flex;gap:4px}.edit-history button{border:1px solid transparent;background:transparent;color:#c5cebf;border-radius:5px;padding:8px 12px;font-weight:700;white-space:nowrap}.edit-history button:not(:disabled):hover{background:#343d30}.edit-history button{padding:5px 8px;font-size:17px;line-height:1}.edit-history button:disabled{opacity:.35;cursor:default}
.pattern-bar{padding:8px 11px;min-width:0;flex-wrap:wrap;background:#20251f;border:1px solid #3b4536;border-radius:7px}.pattern-bar label input{max-width:150px}.pattern-bar select{max-width:160px}.pattern-bar #patternCount{white-space:nowrap}.pattern-bar label select{margin-left:0}.rack{scroll-margin-top:75px}.step{touch-action:manipulation}.step:hover{border-color:#acbc9f}.step:nth-child(4n + 1){margin-left:2px}.steps,.rack-labels{user-select:none}.studio-help{padding-left:20px;line-height:1.6;color:var(--text-soft)}.studio-help li{margin:9px 0}.studio-help strong{color:var(--cream)}.export-dialog #replaceProject{font-size:11px}.export-dialog .export-dialog-actions{align-items:center}.sound-panel{padding:16px 16px 0}
@media(max-width:1000px){.rack-labels,.track{grid-template-columns:106px 62px minmax(225px,1fr);gap:7px;padding:0 11px}}
@media(max-width:840px){.sound-panel{margin-top:6px}.sound-panel #soundList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}.toolbar-right{display:flex}.keyboard-hint{display:none}}
@media(max-width:700px){.topbar{height:auto;min-height:58px;padding:9px 12px;gap:8px}.top-actions{margin-left:auto;gap:4px}.top-actions .project-action{font-size:10px;padding:7px 6px}.top-actions .export-btn{font-size:10px;padding:0 7px}.top-actions .export-btn span{display:none}.toolbar{height:55px;padding:0 10px;gap:8px}.master{gap:5px}.master input{width:47px}.master>span:first-child{display:none}.edit-history button{padding:4px 6px}.rack-header,.rack-labels,.track,.rack-footer{min-width:475px}.pattern-bar label input{width:110px}.pattern-bar select{max-width:100px}.pattern-bar #patternCount{margin-left:0}.sound-panel{padding-bottom:10px}}
.instrument-library{width:min(620px,calc(100% - 24px));max-height:calc(100dvh - 28px);overflow:auto}
.instrument-library .library-heading{padding:0}
.library-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(125px,30%);gap:10px;margin:16px 0 9px}
.instrument-library .library-filters label{display:grid;gap:6px;min-width:0;margin:0}
.instrument-library .library-filters input,.instrument-library .library-filters select{width:100%;min-width:0;height:38px;background:#20251f;color:var(--cream);border:1px solid #4b5547;border-radius:5px;padding:8px 10px;font:inherit}
.library-filters :is(input,select):focus-visible,.library-results:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.library-results{max-height:min(48vh,460px);overflow:auto;scrollbar-width:thin;scrollbar-color:#65715c #20241e;padding-right:6px}
.library-group h3{position:sticky;top:0;z-index:1;margin:0;padding:11px 0 6px;background:#242924;color:var(--lime);font-size:10px;letter-spacing:1px;text-transform:uppercase}
.library-group h3 span{color:var(--text-soft);margin-left:4px}
.library-row{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px solid #373f34}
.library-row .sound-name{min-width:0}
.library-row .sound-name strong{font-size:12px}
.library-kit{--color:var(--lime);padding:8px;border:1px solid #48573e;border-radius:6px;background:#2c3728;margin-bottom:5px}
.library-kit .sound-name small{white-space:normal;line-height:1.3}
.library-row .preview{flex:none}
.library-add{min-width:75px}
.library-add:disabled{opacity:.53}
.library-footer{display:flex;justify-content:space-between;gap:8px;min-height:20px;margin-top:12px;color:var(--text-soft);font-size:11px}
#libraryStatus{color:var(--lime);text-align:right}
.library-empty{padding:12px 0}
@media(max-width:440px){.library-filters{grid-template-columns:minmax(0,1fr) minmax(100px,35%);gap:6px}.library-row{gap:6px}.library-add{min-width:0}.library-footer{flex-wrap:wrap}#libraryStatus{text-align:left}}

#audioExportProgress{width:100%;height:8px;margin-top:16px;accent-color:var(--lime)}.ready-exports{border-top:1px solid #465141;margin-top:20px;padding-top:14px}.ready-exports h3{margin:0;font-size:13px}.ready-exports p{font-size:11px;margin:8px 0 12px}.ready-export{padding:10px 0;border-top:1px solid #363d32}.ready-export strong{display:block;font-size:12px;overflow-wrap:anywhere}.ready-export small{display:block;color:#aab4a4;font-size:10px;margin:5px 0 8px}.ready-export-actions{display:flex;gap:8px;flex-wrap:wrap}.ready-export-actions button{font-size:11px}
