:root{color-scheme:dark;font:14px/1.5 system-ui,sans-serif;background:#11161d;color:#eeeae3;--mint:#9edacb;--line:#303b47}*{box-sizing:border-box}body{margin:0}header{padding:28px 36px;display:flex;justify-content:space-between;align-items:center;background:#19212b;border-bottom:1px solid var(--line)}h1{font-size:27px;margin:5px 0}h2{font-size:17px;margin:0 0 12px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--mint)}.actions,.toolbar,.footer{display:flex;gap:12px;align-items:center;justify-content:space-between}button,.button,select{font:inherit;background:#28333f;border:1px solid #42505d;border-radius:8px;color:inherit;padding:9px 13px;cursor:pointer;display:inline-block}button:hover,.button:hover{border-color:var(--mint)}button:disabled{opacity:.4;cursor:wait}.coral{background:#e8a097;color:#231d1f;border:0;font-weight:650}input[type=file]{display:none}.button:has(input:disabled){opacity:.4;pointer-events:none}.statusbar{display:flex;justify-content:space-between;padding:10px 36px;color:var(--mint);background:#162822;font-size:12px}main{display:grid;grid-template-columns:280px 1fr;max-width:1600px;margin:auto}aside{padding:26px 22px;border-right:1px solid var(--line);min-height:80vh}p,.hint{color:#a7b2bc;font-size:13px}input[type=search]{width:100%;padding:10px;background:#10161c;color:inherit;border:1px solid var(--line);border-radius:6px;margin:20px 0 12px}.workspace{padding:26px 32px}.slots{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin:22px 0}.slot{min-height:88px;text-align:left;padding:12px;background:#202a35}.slot strong{display:block;font-size:20px}.slot small{font-size:10px;display:block;color:#b5c0ca}.slot.active{border-color:var(--mint);background:#29413f;box-shadow:0 0 0 1px var(--mint)}.slot.over{outline:3px solid #e8a097}.panel{background:#19222c;border:1px solid var(--line);border-radius:12px;padding:18px;margin:16px 0}.sample{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #29333d;background:transparent;font-size:12px;border-radius:0;overflow-wrap:anywhere}.sample small{display:block;color:#8495a3}.sample:hover{background:#273a3b}.footer{padding:15px 0;color:var(--mint)}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;color:#a9bfc6;max-height:200px;overflow:auto}details{margin-top:14px}summary{cursor:pointer;color:#aebcc7}.step-row{display:grid;grid-template-columns:75px repeat(16,1fr);gap:4px;margin:5px 0;align-items:center}.step{height:15px;background:#2b3846;border-radius:3px}.step.on{background:var(--mint)}.step-row span{font-size:11px}#library{max-height:560px;overflow:auto}@media(max-width:950px){main{grid-template-columns:230px 1fr}.slots{grid-template-columns:repeat(4,1fr)}header{padding:20px}.workspace{padding:20px}.toolbar{flex-wrap:wrap}}

[hidden]{display:none!important}.pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:720px;margin:20px auto 4px}.pad{display:flex;align-items:stretch;border:1px solid #43505e;border-radius:10px;background:#141d27;overflow:hidden;min-height:94px}.pad.occupied{background:#263b3b}.pad.active{border-color:var(--mint);box-shadow:0 0 0 2px var(--mint)}.pad button{border:0;background:transparent;border-radius:0}.pad-select{flex:1;text-align:left;padding:14px;min-width:0}.pad strong{display:block;font-size:23px}.pad small{display:block;font-size:11px;color:#b5c0ca}.over{outline:3px solid #e8a097}.error{color:#ffb4a9!important;background:#3e272a!important}#feedback{padding:10px 14px;background:#202e37;border-radius:8px;min-height:40px;color:#d2dedb}meter{width:160px;accent-color:var(--mint)}button:focus-visible,.button:focus-within,select:focus-visible{outline:2px solid var(--mint);outline-offset:3px}.workspace{min-width:0}header .actions{flex-wrap:wrap}#selected{margin:0}.toolbar{flex-wrap:wrap}@media(max-width:700px){header{align-items:start;gap:16px;flex-direction:column}main{grid-template-columns:1fr}aside{min-height:0;border-right:0;border-bottom:1px solid var(--line)}#library{max-height:180px}.workspace{padding:18px}.pads{gap:8px}.pad{min-height:80px}.pad-select{padding:8px}.pad small{font-size:9px}}

.library-actions{display:flex;flex-wrap:wrap;gap:8px}.library-actions #changeFolder{padding:5px 8px;font-size:12px;background:transparent}#libraryStatus{margin:10px 0 0;font-size:12px;color:var(--mint)}

.capacity-warning{color:#ffb4a9;font-weight:600}

.slots{grid-template-columns:repeat(4,minmax(0,1fr))}.slot{min-height:125px;position:relative}.slot strong{font-size:14px;color:#b5c0ca}.slot small,.pad small{font-size:12px}.content-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:5px 0}.waveform{display:block;height:28px;margin-top:7px;min-width:0}.waveform svg{width:100%;height:100%;fill:none;stroke:#9edacb;stroke-width:1.4}.kit-map{display:grid;grid-template-columns:repeat(4,6px);gap:3px;position:absolute;right:12px;bottom:12px}.kit-map i{width:6px;height:6px;background:#53616c}.kit-map .filled{background:#9edacb}.pad{min-height:130px}.pad.occupied{background:#202a35}.pad strong{font-size:14px;color:#b5c0ca}.sound-name{overflow-wrap:anywhere;color:#eeeae3}.slot.active,.pad.active{background:#29413f}.playing{outline:2px solid #9edacb}.playing .content-name:before{content:'▶ ';color:#9edacb}@media(max-width:550px){.slots{grid-template-columns:repeat(2,minmax(0,1fr))}.pads{gap:6px}.pad-select{padding:7px}.pad small{font-size:11px}}
.pad{position:relative}.over:after{content:attr(data-drop-label);position:absolute;left:5px;right:5px;bottom:5px;background:#e8a097;color:#231d1f;padding:3px 5px;border-radius:4px;font-size:12px;text-align:center;pointer-events:none}
.kit-map{position:static;width:max-content;margin-top:7px}.slot:has(.kit-map){min-height:145px}

/* Clear actions stay outside audition/drag hit regions. */
.slot-box{position:relative;display:flex;min-width:0}.slot-box>.slot{width:100%;min-width:0}.slot strong,.pad strong{padding-right:32px}.box-actions{position:absolute;right:5px;top:5px;min-width:32px;min-height:32px;padding:0 6px;background:transparent;border-color:transparent;font-size:20px;line-height:1}.box-actions:hover{background:#28333f}.slot-box:has(.box-actions:focus-visible)>.slot{border-color:var(--mint)}.pad .box-actions{background:transparent;border:1px solid transparent;border-radius:6px;padding:0 6px}.pad .box-actions:hover{background:#28333f;border-color:var(--mint)}.sound-actions{width:max-content;position:fixed;z-index:1000;min-width:180px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;margin:0;padding:5px;background:#28333f;border:1px solid #53616c;border-radius:9px;box-shadow:0 8px 28px #0008}.sound-actions button{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:5px;padding:10px 12px}.sound-actions button:hover,.sound-actions button:focus-visible{background:#3b414b}.clear-action{color:#ffb4a9}.clear-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid #53616c;border-radius:12px;background:#19222c;color:#eeeae3;box-shadow:0 20px 70px #0009}.clear-dialog::backdrop{background:#080d16b3}.clear-dialog h2{overflow-wrap:anywhere}.clear-dialog p{color:#c5cdd3}.clear-dialog .actions{justify-content:flex-end;flex-wrap:wrap}.clear-dialog button:focus-visible{outline:2px solid var(--mint);outline-offset:3px}.pad-select{width:100%}@media(max-width:550px){.pads{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(pointer:coarse){.box-actions{min-width:44px;min-height:44px}.slot strong,.pad strong{padding-right:44px}}

/* Browser Set collection, independent of the connected Samples folder. */
.mint{background:var(--mint);color:#152821;border-color:transparent}button:disabled{cursor:default}#setsPanel{padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--line)}#setsPanel .toolbar h2{margin:0}#setsActions,.set-more{background:transparent;border-color:transparent;padding:4px 9px;min-width:32px;font-size:20px}#setsList{margin-top:10px}.set-row{display:flex;align-items:center;border-radius:8px;margin:4px 0;min-width:0}.set-row.active{background:#29413f}.set-open{background:transparent;border:0;flex:1;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:10px}.set-more{flex:none}.set-row:has(:focus-visible){outline:1px solid var(--mint)}#setName{overflow-wrap:anywhere}header>div:first-child{min-width:0}#setSaveStatus{display:block}#emptyWorkspace{padding:70px 12px;text-align:center}#setFileName{display:block;width:100%;font:inherit;padding:10px;margin-top:8px;border-radius:6px;border:1px solid #42505d;background:#11161d;color:inherit}#setDialogError{color:#ffb4a9}#setNameField{display:block}#setDialogButtons{gap:8px}#setDialogButtons button{flex-shrink:0}.statusbar{gap:10px;flex-wrap:wrap}.footer{flex-wrap:wrap}.step-row{min-width:0}.step{min-width:0}@media(max-width:400px){.workspace{padding:14px}aside{padding:20px 16px}.actions{gap:8px}.panel{padding:12px}.step-row{grid-template-columns:48px repeat(16,minmax(0,1fr));gap:2px}}@media(pointer:coarse){#setsActions,.set-more{min-width:44px;min-height:44px}}

/* Ordinary filesystem tree, kept compact at any depth. */
:root{--sidebar-width:300px}main{grid-template-columns:var(--sidebar-width) minmax(0,1fr)}aside{min-width:0;padding:24px 16px}#library{overflow-x:hidden;max-height:62vh}#libraryRoot h2{margin:0}#sampleActions{padding:1px 8px;font-size:22px}.tree-row{display:flex;align-items:center;min-height:36px;padding-left:calc(var(--depth)*10px);border-radius:5px;min-width:0}.tree-row.selected{background:#29413f;box-shadow:inset 2px 0 var(--mint)}.tree-row:hover{background:#23303c}.tree-row button{border:0;border-radius:4px;background:transparent;padding:6px 4px}.tree-name,.tree-name.sample{flex:1;min-width:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px;text-align:left;display:block;overflow-wrap:normal;border:0}.tree-toggle{width:22px;flex-shrink:0;color:var(--mint)}.tree-toggle:disabled{opacity:.6;cursor:default}.tree-more{flex-shrink:0;width:26px;opacity:0}.tree-row:hover .tree-more,.tree-row:focus-within .tree-more{opacity:1}.tree-row:has(:focus-visible){outline:1px solid var(--mint)}#libraryDialog input,#libraryDialog select{width:100%;margin:0 0 20px;padding:9px;background:#11161d;color:inherit;border:1px solid #53616c;border-radius:6px}#libraryDialog p{overflow-wrap:anywhere}#missingSamples p{overflow-wrap:anywhere;color:#ffb4a9}#migrateSets{font-size:12px;margin-top:8px}@media(max-width:700px){main{grid-template-columns:1fr}#library{max-height:320px}}



/* PO-032: compact Pocket console chrome; orange sound content, mint interaction. */
:root{--sound-orange:#eda268}
.app-header{padding:12px 24px;gap:16px;min-height:56px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;font:500 14px ui-monospace,monospace;letter-spacing:1px}
.brand-caption{font:11px ui-monospace,monospace;letter-spacing:1px;color:var(--sound-orange)}
.pad-mark{display:grid;grid-template-columns:repeat(4,5px);gap:3px;transform:rotate(-8deg);flex-shrink:0}
.pad-mark i{height:5px;background:var(--sound-orange)}.pad-mark i:nth-child(3n){background:var(--mint)}
.app-header .statusbar{padding:0;background:transparent;color:#a7b2bc;font-size:11px;justify-content:flex-end;align-items:center;min-height:0;margin-left:auto}
.app-header .statusbar:not(:has(#progress:not(:empty),#updateApp:not([hidden]))){display:none}
.app-header:has(#progress:not(:empty),#updateApp:not([hidden])) .brand-caption{display:none}
#progress:not(:empty){margin-right:auto;color:var(--mint)}
.set-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.set-identity{min-width:0}.set-heading h1{font-size:20px;line-height:1.3;margin:0 0 4px;overflow-wrap:anywhere}
.set-heading .actions{flex-shrink:0;gap:8px}.set-heading button,.workspace-toolbar button,.getting-started button,.getting-started .button{padding:5px 10px;border-radius:6px}
#activeSetActions{font-size:20px;line-height:1;min-height:32px;min-width:34px}
.workspace-toolbar h2{margin:0}.workspace-toolbar .actions{gap:8px}
.transfer-action{background:var(--sound-orange);color:#231d1f;border-color:transparent;font-weight:500}
.getting-started{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.workspace:has(.set-content:not([hidden])) .getting-started{display:none}
.waveform svg{stroke:var(--sound-orange)}.kit-map .filled{background:var(--sound-orange)}
@media(max-width:700px){.app-header{flex-direction:row;align-items:center;padding:12px 18px}.brand-caption{display:none}.set-heading{flex-wrap:wrap;gap:10px}.workspace-toolbar .actions{flex-wrap:wrap}}
@media(max-width:380px){.brand-subtitle{font-size:12px;letter-spacing:0}}
@media(pointer:coarse){.set-heading button,.workspace-toolbar button,.getting-started button,.getting-started .button{min-height:44px}#activeSetActions{min-width:44px}}

/* Library destinations are local rows, never the sound-replacement overlay. */
#libraryRoot{border-radius:5px}
.tree-row.library-drop-target,#libraryRoot.library-drop-target,#libraryRoot.folder-connect-target{background:#29413f;box-shadow:inset 0 0 0 1px #9edacb80}
.tree-row.library-drop-target .tree-toggle,#libraryRoot.library-drop-target h2,#libraryRoot.folder-connect-target h2{color:var(--mint)}

/* The sidebar edge is a keyboard-accessible resize handle. */
#libraryPanel{position:relative}
#sidebarDivider{position:absolute;z-index:5;top:0;bottom:0;right:-5px;width:10px;cursor:col-resize;touch-action:none}
#sidebarDivider::after{content:'';position:absolute;top:0;bottom:0;left:4px;width:2px;background:transparent}
#sidebarDivider:hover::after,#sidebarDivider:focus-visible::after,.resizing-library #sidebarDivider::after{background:var(--mint);opacity:.65}
#sidebarDivider:focus{outline:none}
.resizing-library,.resizing-library *{cursor:col-resize!important;user-select:none!important}
@media(max-width:700px){#sidebarDivider{display:none}}

/* Text selects/auditions; only the adjacent pencil opens the name editor. */
.slot-box:has(.inline-name)>.slot .content-name,.pad:has(.inline-name)>.pad-select .content-name{visibility:hidden}
.slot .content-name,.pad-select .content-name{max-width:calc(100% - 24px)}
.inline-name{position:absolute;top:36px;left:12px;max-width:calc(100% - 24px);width:max-content;display:flex;align-items:center;gap:4px;margin:5px 0;font:inherit;line-height:21px;pointer-events:none;z-index:1}
.name-spacer{pointer-events:auto;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.edit-name,.pad .edit-name{flex:0 0 20px;width:20px;height:21px;display:inline-flex;align-items:center;justify-content:center;padding:2px;border:0;border-radius:3px;background:transparent;color:var(--mint);opacity:0;pointer-events:none;line-height:1}
.edit-name svg{display:block;width:12.8px;height:12.8px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.inline-name:has(.name-spacer:hover) .edit-name,.edit-name:hover,.edit-name:focus-visible{opacity:1;pointer-events:auto}
.edit-name:hover,.edit-name:focus-visible{background:#9edacb18;outline:1px solid #9edacb70}
.slot .content-name,.pad-select .content-name{width:fit-content}
.name-input{width:calc(100% - 24px);pointer-events:auto;color:inherit;background:#11161d;outline:1px solid var(--mint);border:0;border-radius:3px;padding:0;cursor:text}
.pad .inline-name{left:14px;max-width:calc(100% - 28px)}
.pad .name-input{width:calc(100% - 28px)}
@media(max-width:700px){.pad .inline-name{left:8px;max-width:calc(100% - 16px);top:30px}.pad .name-input{width:calc(100% - 16px)}}
@media(max-width:550px){.pad .inline-name{left:7px;max-width:calc(100% - 14px)}.pad .name-input{width:calc(100% - 14px)}}
@media(hover:none){.edit-name,.pad .edit-name{opacity:1;pointer-events:auto}}
#kitTitle{overflow-wrap:anywhere}

.edit-name{position:relative;overflow:visible}
.edit-name::before{content:'';position:absolute;left:-4px;top:0;width:4px;height:100%}

/* Corner counts share the number row with the existing action menu. */
.block-count{position:absolute;top:9px;right:39px;max-width:calc(100% - 76px);padding:1px 5px;border:1px solid #47535e;border-radius:6px;background:#17212a;color:#d5cbbb;font-size:10px;line-height:18px;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:auto}
.block-count.linked{color:#b6cfc8;border-color:#3f5a55}.slot strong,.pad strong{width:28px;padding-right:0}
@media(pointer:coarse){.block-count{right:49px;max-width:calc(100% - 86px)}}

.block-count{display:inline-flex;align-items:center;gap:4px}.block-count svg{width:12px;height:12px;flex-shrink:0}

/* Indeterminate activity: illuminated segments sweep, never imply a percentage. */
.workspace.starting > :not(#workspaceLoading){display:none!important}
#workspaceLoading{padding:64px 20px;min-height:220px;text-align:center;color:var(--mint,#8ce4c4)}
#workspaceLoading h2{font-size:22px;color:inherit}
.activity-segments{display:inline-flex;gap:5px;max-width:100%;color:#8ce4c4}
.activity-segments i{width:18px;height:12px;border-radius:2px;background:currentColor;opacity:.16;animation:activity-sweep 1.5s linear infinite}
.activity-segments i:nth-child(1){animation-delay:0.0s}
.activity-segments i:nth-child(2){animation-delay:0.1s}
.activity-segments i:nth-child(3){animation-delay:0.2s}
.activity-segments i:nth-child(4){animation-delay:0.3s}
.activity-segments i:nth-child(5){animation-delay:0.4s}
.activity-segments i:nth-child(6){animation-delay:0.5s}
.activity-segments i:nth-child(7){animation-delay:0.6s}
.activity-segments i:nth-child(8){animation-delay:0.7s}
.activity-segments i:nth-child(9){animation-delay:0.8s}
.activity-segments i:nth-child(10){animation-delay:0.9s}
.activity-segments i:nth-child(11){animation-delay:1.0s}
.activity-segments i:nth-child(12){animation-delay:1.1s}
@keyframes activity-sweep{0%,65%,100%{opacity:.16}15%,40%{opacity:1}}
#exportActivity{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0;color:#f3ad72;font-size:14px}
#exportActivity .activity-segments{color:inherit}
#exportActivity .activity-segments i{width:12px;height:10px}
#exportActivity[hidden],#workspaceLoading[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.activity-segments i{animation:none}.activity-segments i:nth-child(-n+3){opacity:1}}
#fitDialog{width:min(620px,calc(100vw - 32px));max-height:85vh;overflow:hidden;background:var(--panel,#19212b);color:inherit;border:1px solid #53616c;border-radius:16px;padding:0;box-sizing:border-box}
#fitDialog::backdrop{background:#050b13bb}
#fitDialog h2{margin-top:0}#fitDialog p{line-height:1.5}
#fitDialog[open]{display:flex;flex-direction:column}
#fitDialog .fit-content{overflow:auto;min-height:0;padding:26px}
#fitDialog footer{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0;padding:18px 26px;border-top:1px solid #43515d;background:var(--panel,#19212b)}
#fitDialog .primary{background:#f2a66b;color:#181e26}
#fitBusy{color:#f2a66b;margin:24px 0}#fitBusy .activity-segments i{width:20px;height:14px}
#fitChanges>div{padding:12px 0;border-bottom:1px solid #43515d}#fitChanges button{margin:8px 8px 0 0}
#fitDialog progress{width:100%;accent-color:#f2a66b}#fitStatus{font-size:1.1rem}

#importActivity{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px;margin:16px 0;border-radius:12px;background:#142b2a;color:#8ce4c4}
#importActivity[hidden]{display:none}
#importActivity .activity-segments i{width:12px;height:12px}

/* Quiet loaded-app identity beside the brand. */
#appVersion{font:11px ui-monospace,monospace;letter-spacing:0;color:#a7b2bc;background:transparent;border-color:transparent;padding:4px;white-space:nowrap}
#appVersion:hover{color:var(--mint);border-color:var(--line)}
#aboutDialog dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:13px}#aboutDialog dt{color:#a7b2bc}#aboutDialog dd{margin:0;font-family:ui-monospace,monospace}
@media(max-width:400px){.brand{gap:7px}.brand-subtitle{font-size:10px}#aboutDialog .actions{justify-content:flex-start}}