/* The loop arranger shares the existing studio's quiet, dark work surface. */
.aether-ui #panel-audio { min-width:0; gap:0; }
.aether-ui #panel-audio > * { margin-top:0; }
.aether-ui #panel-audio [hidden] { display:none !important; }
.sound-transport { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:0 0 14px !important; }
.sound-transport-main,.sound-commands { display:flex; align-items:center; gap:8px; min-width:0; }
.aether-ui .sound-transport button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:40px; min-height:44px; padding:9px; border:1px solid #454e54; border-radius:5px; background:#2b3035; color:#e0e8e9; font-size:12px; }
.sound-transport svg { width:17px; height:17px; flex-shrink:0; }
.aether-ui #audio-play-stop { width:48px; height:44px; padding:12px; background:#d2f58a; color:#28351e; border-color:#d2f58a; }
.aether-ui #audio-play-stop[aria-pressed="true"] { background:#e7aa98; border-color:#e7aa98; color:#38251f; }
#sound-clock { width:48px; font-size:13px; font-variant-numeric:tabular-nums; text-align:center; white-space:nowrap; color:#d9e4dc; }
.sound-transport label { display:flex; align-items:center; gap:6px; font-size:11px; color:#b1bdc5; }
.aether-ui #sound-bars { min-height:40px; width:82px; padding:5px 8px; font-size:13px; background:#2b3035; color:#e2eaec; border:1px solid #454e54; border-radius:4px; }
.sound-master { margin-left:8px; }
.sound-master input { width:90px; }
.aether-ui .sound-settings { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:15px 0 !important; margin:0; border:0 !important; background:transparent !important; }
.sound-settings > .h-6 { display:none; }
.sound-settings label { font-size:11px; color:#b1bdc5; }
.sound-settings input[type="range"] { width:85px; }
.aether-ui .sound-settings select { min-height:40px; padding:5px; font-size:13px; }
.sound-switcher { display:flex; align-items:center; gap:20px; border-bottom:1px solid #3c454a; margin:0 0 16px !important; }
.aether-ui .sound-switcher button { display:flex; gap:6px; align-items:center; min-height:44px; padding:9px 0; font-size:12px; border-bottom:2px solid transparent; color:#acb9c2; }
.aether-ui .sound-switcher button[aria-pressed="true"] { color:#d2f58a; border-bottom-color:#d2f58a; }
#sound-layer-count { font-size:10px; color:#b1bdc5; }
#sound-state { margin-left:auto; font-size:11px; color:#b9c9b1; }
.sound-loop-workspace { display:grid; grid-template-columns:minmax(0,1fr) 234px; gap:18px; min-width:0; margin:0 !important; }
.sound-loop-workspace:has(#sound-inspector[hidden]) { grid-template-columns:minmax(0,1fr); }
.sound-arrangement { min-width:0; position:relative; align-self:start; }
#sound-ruler { display:grid; grid-template-columns:130px minmax(0,1fr); min-height:30px; gap:10px; color:#9babb6; font-size:10px; }
#sound-ruler > span { padding-top:8px; }
#sound-ruler > div { display:flex; }
#sound-ruler > div span { flex:1; padding:8px 4px; border-left:1px solid #465057; }
.sound-layer { display:grid; grid-template-columns:130px minmax(0,1fr); gap:10px; border-top:1px solid #3d464c; min-height:76px; padding:8px 0; }
.sound-layer-heading { min-width:0; display:flex; flex-direction:column; gap:1px; }
.aether-ui .sound-layer-select { min-width:0; width:100%; text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:3px 0; min-height:28px; font-size:12px; color:#c2cdd4; }
.sound-layer.selected .sound-layer-select { color:var(--layer-color); }
.sound-layer-heading > div { display:flex; gap:4px; }
.aether-ui .sound-layer-mute,.aether-ui .sound-layer-solo { display:grid; place-items:center; width:34px; height:30px; min-height:30px; color:#96a6b2; border:1px solid #444d54; border-radius:4px; }
.sound-layer svg { width:14px; height:14px; }
.aether-ui .sound-layer button[aria-pressed="true"] { color:#e6ecdf; background:#475842; border-color:#6c805c; }
.sound-lane { position:relative; min-width:0; height:60px; background:#252c31; border-radius:4px; }
.sound-lane canvas { display:block; width:100%; height:60px; }
.sound-lane::after { content:''; position:absolute; top:0; bottom:0; width:1px; left:var(--sound-progress,0%); background:#e2f6c6; pointer-events:none; opacity:.65; }
.aether-ui .sound-clip { position:absolute; top:5px; height:50px; min-width:0; padding:4px; border:1px solid var(--layer-color); color:#e7ede7; background:transparent; border-radius:3px; cursor:grab; touch-action:none; overflow:hidden; font-size:9px; text-align:left; display:flex; align-items:flex-start; white-space:nowrap; }
.aether-ui .sound-clip:active { transform:none !important; cursor:grabbing; }
.sound-empty { min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#aab9c2; font-size:13px; border-bottom:1px solid #3c454a; }
.sound-empty svg { width:36px; height:36px; color:#b9dca3; }
.aether-ui .sound-empty button { min-height:44px; padding:8px 15px; border:1px solid #465157; border-radius:5px; color:#dce5e8; font-size:12px; }
#sound-inspector { border-left:1px solid #3c454a; padding-left:18px; min-width:0; }
.sample-inspector-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.sample-inspector-heading h3 { font-size:12px; font-weight:500; color:#dce5e8; }
.sample-inspector-heading > div { display:flex; gap:2px; }
.sample-inspector-heading button { display:grid; place-items:center; width:36px; height:36px; color:#b5c1ca; border-radius:4px; }
.sample-inspector-heading svg { width:15px; height:15px; }
#sound-inspector label { display:block; font-size:11px; line-height:1.4; margin:10px 0; color:#aab9c3; }
.aether-ui #sound-inspector input:not([type="range"]):not([type="checkbox"]),.aether-ui #sound-inspector select { display:block; width:100%; min-width:0; min-height:36px; padding:8px; margin-top:5px; color:#e5eaed; background:#252d32; border:1px solid #465158; border-radius:4px; font-size:12px; }
.sample-timing { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 10px; }
.sample-toggles { display:flex; flex-wrap:wrap; gap:8px; }
.sample-toggles label { display:flex !important; align-items:center; gap:5px; }
.sample-toggles input { width:16px; height:16px; accent-color:#c8e69b; }
#sound-inspector output { float:right; font-size:10px; color:#d0ddd3; }
.aether-ui #sound-inspector input[type="range"] { display:block; max-width:none; width:100%; margin:8px 0 0; }
.aether-ui .sound-notes { min-width:0; overflow-x:auto; margin:0 !important; }
.aether-ui .sound-notes #sequencer { margin-top:10px; }
.sound-pattern-mix { display:flex; align-items:center; gap:10px; width:100%; margin-bottom:10px; }
.sound-pattern-mix label { display:flex; align-items:center; gap:12px; color:#aab9c3; font-size:11px; }
.sound-pattern-mix button { display:grid; place-items:center; min-height:40px; width:40px; border:1px solid #465157; border-radius:5px; color:#c3d0d8; }
.sound-pattern-mix svg { width:16px; height:16px; }
.sound-pattern-mix button[aria-pressed="true"] { color:#e6ad9d; background:#483936; }
@media(max-width:1100px) {
    .sound-loop-workspace { grid-template-columns:minmax(0,1fr); }
    #sound-inspector { border-left:0; border-top:1px solid #3c454a; padding:14px 0 0; }
    #sound-inspector > label { max-width:440px; }
    .sample-timing { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:760px) {
    .sound-transport { display:block; }
    .sound-transport-main { flex-wrap:wrap; gap:7px; }
    .sound-commands { margin-top:12px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) repeat(3,36px); gap:4px; }
    .aether-ui .sound-commands button { padding:7px 5px; min-width:0; font-size:10px; gap:4px; }
    .sound-commands button svg { width:15px; height:15px; }
    .sound-commands button span { white-space:normal; }
    .sound-master { margin-left:auto; font-size:10px !important; min-height:30px; }
    .sound-master input { width:58px; }
    .sound-settings { display:grid !important; grid-template-columns:auto minmax(0,1fr) auto; }
    .sound-settings input[type="range"] { width:100%; max-width:none !important; }
    .sound-settings label[for="synth-type"] { grid-column:1; }
    .sound-settings select { grid-column:2 / -1; }
    .sound-settings label[for="reverb-slider"],.sound-settings label[for="swing-slider"] { grid-column:1; }
    .sound-settings input[id="reverb-slider"],.sound-settings input[id="swing-slider"] { grid-column:2 / -1; }
    #sound-ruler,.sound-layer { grid-template-columns:92px minmax(0,1fr); gap:8px; }
    .sound-layer { min-height:89px; }
    .aether-ui .sound-layer-mute,.aether-ui .sound-layer-solo { width:42px; height:42px; min-height:42px; }
    .sound-lane,.sound-lane canvas { height:74px; }
    .aether-ui .sound-clip { height:64px; }
    .sample-timing { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .aether-ui #sound-inspector input:not([type="range"]):not([type="checkbox"]),.aether-ui #sound-inspector select { min-height:44px; font-size:16px; }
    .sample-toggles label { min-height:40px; font-size:12px !important; }
    .sample-inspector-heading button { width:44px; height:44px; }
    .aether-ui #sound-bars { font-size:16px; width:83px; }
    #sound-clock { width:37px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .sound-lane::after { display:none; } }

.sound-starters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; }
.sound-starters p { flex-basis:100%; margin:0 0 4px; color:#c3cdd3; font-size:13px; }
.sound-starters > span { font-size:12px; color:#aebcc6; }
.aether-ui .sound-starters button { min-height:44px; padding:8px 14px; border:1px solid #536348; border-radius:6px; color:#d2f58a; background:#293229; }
.aether-ui #sound-clear-beat { margin-left:auto; color:#b7c2ca; border-color:#454e54; background:transparent; }
.aether-ui .sequencer-step:nth-child(4n+1) { border-left:3px solid #879c78; }
.aether-ui .sound-layer-mute,.aether-ui .sound-layer-solo { min-width:44px; min-height:44px; }
.sound-arrangement { overflow-x:auto; }
@media(max-width:600px) { .sound-transport-main,.sound-commands { flex-wrap:wrap; } .sound-master { margin-left:0; } .sound-starters p { line-height:1.5; } }

.sound-advanced { border-top:1px solid #454e54; padding-top:12px; margin-top:14px; }
.sound-advanced summary { cursor:pointer; min-height:44px; color:#becbd4; font-size:13px; }
.aether-ui #sample-after { width:auto; gap:5px; padding:8px; min-height:44px; font-size:11px; }

.sound-variations { padding:12px 0; border-top:1px solid #454e54; }
.sound-variations > div,#variation-list > div,#variation-order > div { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sound-variations p { color:#bac7cf; font-size:12px; margin:10px 0; }
.aether-ui .sound-variations button { min-height:44px; padding:8px 12px; border:1px solid #526348; border-radius:5px; color:#d2f58a; }
.aether-ui .sound-variations button[aria-pressed="true"] { background:#3e5130; }
.sound-variations label { font-size:12px; }
.aether-ui #variation-name { max-width:160px; padding:8px; min-height:44px; }
#variation-list,#variation-order { margin-top:10px; }
#variation-order > div { background:#293037; padding:6px; border-radius:5px; color:#d4dce2; font-size:12px; }

/* Preserve vertical page scrolling while horizontal movement belongs to a clip. */
.aether-ui #panel-audio .sound-clip { touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.aether-ui #piano .piano-key { touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.sound-beat-pages,.sound-mobile-step-ruler,.sound-row-label { display:none; }
.aether-ui #panel-audio .sound-compat-note { grid-column:1 / -1; flex-basis:100%; color:var(--muted); margin:0; font-size:12px; line-height:1.5; }
@media(max-width:760px) {
    .aether-ui #panel-audio .sound-beat-pages { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:12px 0 0; width:100%; align-self:stretch; }
    .aether-ui #panel-audio .sound-beat-pages button { min-width:0; min-height:44px; padding:6px 2px; font-size:13px; border:1px solid var(--line); border-radius:8px; }
    .aether-ui .studio-workbench #panel-audio #sequencer { min-width:0; width:100%; max-width:100%; padding:12px 8px; }
    .aether-ui #panel-audio #sequencer .sequence-ruler { display:none; }
    .aether-ui #sequencer .sound-step-row,.aether-ui #sequencer .sound-mobile-step-ruler { display:grid; grid-template-columns:24px repeat(4,minmax(44px,1fr)); gap:6px; width:100%; min-width:0; }
    .aether-ui #sequencer .sound-row-label { display:flex; align-items:center; font-size:11px; color:#bdcbbf; }
    .aether-ui #sequencer .sound-mobile-step-ruler { color:#bdcbbf; font-size:11px; text-align:center; }
    .aether-ui #sequencer[data-beat-page="0"] .sequencer-step:not([data-beat-page="0"]),
    .aether-ui #sequencer[data-beat-page="1"] .sequencer-step:not([data-beat-page="1"]),
    .aether-ui #sequencer[data-beat-page="2"] .sequencer-step:not([data-beat-page="2"]),
    .aether-ui #sequencer[data-beat-page="3"] .sequencer-step:not([data-beat-page="3"]) { display:none; }
    .aether-ui #sequencer .sequencer-step { width:100% !important; min-width:44px; min-height:44px; height:44px; }
    .aether-ui #piano { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; overflow:visible; width:100%; }
    .aether-ui #piano .piano-key { min-width:44px; min-height:56px; padding:8px; }
    .aether-ui #panel-audio .sound-pattern-mix { align-items:center; gap:12px; }
    .aether-ui #panel-audio .sound-pattern-mix label { flex:1; min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:4px; }
    .aether-ui #panel-audio #sound-pattern-volume { width:100%; max-width:none; }
    .aether-ui #panel-audio .sound-layer-heading { position:sticky; left:0; z-index:1; background:var(--chrome); }
    .aether-ui #panel-audio .sound-layer-select { min-height:44px; }
}

/* Primary actions stay with the workspace; secondary settings share one menu. */
.aether-ui .studio-workbench #art-content-panel #panel-audio .sound-transport { display:block; position:sticky; top:60px; z-index:20; background:var(--chrome); }
.aether-ui .studio-workbench #art-content-panel #panel-audio .sound-transport-main { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; width:100%; }
.aether-ui #panel-audio .sound-transport-main > * { flex-shrink:0; }
.aether-ui #panel-audio #sound-resample { white-space:nowrap; min-height:44px; padding:8px 10px; }
.aether-ui #panel-audio #sound-expand { margin-left:auto; min-width:44px; min-height:44px; padding:8px; }
.sound-more-tools { position:static; }
.aether-ui #panel-audio .sound-more-tools > summary { display:flex; align-items:center; justify-content:center; gap:6px; min-width:44px; min-height:44px; padding:8px; list-style:none; border:1px solid var(--line); border-radius:8px; cursor:pointer; color:var(--ink); }
.sound-more-tools > summary::-webkit-details-marker { display:none; }
.sound-more-tools > summary svg { width:18px; height:18px; }
.sound-more-tools[open] > summary { background:var(--soft); }
.aether-ui #panel-audio .sound-more-menu { position:absolute; top:calc(100% + 4px); right:0; z-index:25; width:min(420px,100%); max-height:calc(100dvh - 150px); overflow:auto; overscroll-behavior:contain; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--chrome); box-shadow:0 8px 24px #25322d20; }
.aether-ui .studio-workbench #art-content-panel #panel-audio .sound-more-menu .sound-commands { display:grid; grid-template-columns:minmax(0,1fr) repeat(3,44px); gap:6px; margin:0 0 12px; }
.aether-ui #panel-audio .sound-more-menu .sound-commands button { min-width:0; min-height:44px; }
.aether-ui #panel-audio .sound-playback-settings { display:grid; gap:10px; padding:12px 0; border-top:1px solid var(--line); }
.aether-ui #panel-audio .sound-playback-settings > label { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0; min-height:44px; font-size:13px; }
.aether-ui #panel-audio .sound-playback-settings > label:has(#sound-repeat) { justify-content:flex-start; }
.aether-ui .studio-workbench #art-content-panel #panel-audio .sound-playback-settings .sound-master input { width:100%; max-width:none!important; flex:1; min-width:80px; }
.aether-ui #panel-audio .sound-more-menu :is(.instrument-settings,.sound-variations) { margin:0!important; }
.aether-ui #panel-audio .sound-more-menu .sound-settings { align-items:center; }
.aether-ui #panel-audio .sound-switcher { flex-wrap:wrap; gap:6px; }
.sound-switcher #sound-clock { margin-left:auto; }
.sound-switcher #sound-state { order:5; flex-basis:100%; }
.sound-switcher #sound-state:empty { display:none; }
.sound-muted-note { color:var(--muted); font-size:11px; white-space:nowrap; }
.sound-workspace-scroll { min-width:0; }
#sound-starter-choice { display:none; }
.aether-ui .studio-workbench #art-content-panel #panel-audio .sound-switcher #sound-pattern-mute { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:8px; border:1px solid var(--line); border-radius:8px; }
.sound-switcher #sound-pattern-mute svg { width:18px; height:18px; }
.aether-ui .studio-workbench #art-content-panel #panel-audio .sound-playback-settings #sound-pattern-volume { flex:1; width:100%; min-width:60px; max-width:none!important; }
.sound-starters #sound-clear-beat { display:flex; align-items:center; justify-content:center; gap:6px; }
.sound-starters #sound-clear-beat svg { width:18px; height:18px; flex-shrink:0; }
.sound-selection-actions { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; min-width:0; }
#sound-selected-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:13px; }
.aether-ui #panel-audio .sound-selection-actions button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:8px; font-size:12px; border:1px solid var(--line); border-radius:8px; }
.sound-selection-actions svg { width:18px; height:18px; }
.aether-ui .studio-workbench #art-content-panel #panel-audio .sound-loop-workspace.sound-sheet-layout { grid-template-columns:minmax(0,1fr); }

.aether-ui #panel-audio > .sound-inspector-sheet { position:fixed; inset:auto 0 0; width:min(100%,560px); max-width:100%; max-height:76dvh; margin:0 auto; padding:0 0 env(safe-area-inset-bottom); border:1px solid var(--line); border-bottom:0; border-radius:18px 18px 0 0; background:var(--chrome); color:var(--ink); overflow:auto; overscroll-behavior:contain; }
.sound-inspector-sheet::backdrop { background:#14221d75; }
.sound-inspector-sheet-bar { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--chrome); }
.sound-inspector-sheet-bar h2 { margin:0; font-size:18px; font-weight:600; }
.aether-ui #panel-audio .sound-inspector-sheet #sound-inspector-done { min-width:60px; min-height:44px; padding:8px 14px; color:var(--accent); border:1px solid var(--line); border-radius:10px; }
.aether-ui .studio-workbench #art-content-panel #panel-audio .sound-inspector-sheet #sound-inspector { border:0!important; border-radius:0!important; padding:16px!important; max-height:none!important; }
.sound-inspector-sheet :is(label,.sound-advanced) { scroll-margin-block:80px 24px; }
.sound-inspector-sheet .sample-inspector-heading h3 { display:none; }
.sound-inspector-sheet .sample-inspector-heading > div { width:100%; justify-content:flex-end; }
.sound-inspector-sheet .sample-inspector-heading #sample-after { margin-right:auto; }
@media(max-width:760px) {
    .aether-ui .studio-workbench #art-content-panel #panel-audio .sound-starters { width:100%; display:flex; flex-wrap:nowrap; gap:8px; margin:8px 0!important; }
    .aether-ui #panel-audio .sound-starters > :is(p,span,[data-starter]) { display:none; }
    .aether-ui .studio-workbench #art-content-panel #panel-audio #sound-starter-choice { display:block; min-width:0; flex:1; min-height:44px; padding:8px 12px; font-size:16px; border:1px solid var(--line); border-radius:8px; }
    .aether-ui .studio-workbench #art-content-panel #panel-audio #sound-clear-beat { width:44px; min-width:44px; min-height:44px; margin:0; padding:8px; }
    #panel-audio #sound-clear-beat span { display:none; }
    .aether-ui #panel-audio .sound-keyboard-hint { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .aether-ui .studio-workbench #art-content-panel #panel-audio #sound-ruler,
    .aether-ui .studio-workbench #art-content-panel #panel-audio #sound-layers { min-width:max(100%,calc(var(--sound-bars,4)*44px))!important; }
    .aether-ui .studio-workbench #art-content-panel #panel-audio :is(#sound-ruler,.sound-layer) { grid-template-columns:minmax(0,1fr); gap:6px; }
    #panel-audio #sound-ruler > span { display:none; }
    .aether-ui .studio-workbench #art-content-panel #panel-audio .sound-layer-heading { flex-direction:row; align-items:center; gap:8px; width:var(--sound-visible-width,100%); max-width:100%; padding-right:2px; }
    .aether-ui #panel-audio .sound-layer-heading .sound-layer-select { flex:1; width:0; }
    .aether-ui #panel-audio .sound-layer-heading > div { flex-shrink:0; }
    .aether-ui #panel-audio #sound-sample-settings { width:44px; padding:8px; }
    #sound-sample-settings span { display:none; }
}
@media(max-width:400px) { .sound-more-tools > summary span { display:none; } }