/* Beat Maker's studio presentation. Audio, scheduling and pattern state live in BeatMaker.html. */
body { background:#101114!important; color:#eceef1; }
body, button, input, select { font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif; }
.bm-toast { background:#202731; border-color:#799957; color:#e0ead5; font:12px 'Outfit',sans-serif; }
#bb-header { background:#101114; box-shadow:none; border-bottom-color:#26282e; }
.bm-page-intro { max-width:1376px!important; margin:0 auto!important; padding:21px 24px 20px!important; background:none!important; border:0!important; box-shadow:none!important; display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left; }
.studio-eyebrow { display:flex; align-items:center; gap:8px; font-size:10px; font-weight:600; letter-spacing:1.7px; color:#9b9fa9; }
.studio-eyebrow i { width:6px; height:6px; border-radius:50%; background:#c2f878; }
.bm-page-intro h1 { margin:8px 0 0; color:#f2f3f5; font:600 clamp(23px,2.6vw,37px)/1.15 'Outfit',system-ui,sans-serif; letter-spacing:-1px; text-shadow:none; }
.bm-page-intro h1 .hero-subtitle { font-size:14px; font-weight:400; color:#959ba7; letter-spacing:0; margin-left:14px; vertical-align:middle; }
.bm-page-intro .intro-description { display:block; max-width:900px; margin:10px 0 0; color:#aeb6c3; font:400 13px/1.55 'Outfit',system-ui,sans-serif; overflow:visible; -webkit-line-clamp:unset; }
.intro-aside { display:flex; flex-direction:column; gap:7px; text-align:right; font-size:12px; color:#959ba7; flex-shrink:0; }
.free-badge { color:#dce6cf; font-size:13px; }
#bmApp { --studio-accent:var(--bm-accent,#c2f878); --studio-bg:#17191e; --studio-panel:#1d2026; --studio-inset:#14161b; --studio-border:#343840; --studio-text:#eceef1; --studio-muted:#a0a6b1; max-width:1328px; margin:0 auto; padding:0; font-family:'Outfit',system-ui,sans-serif; background:var(--studio-bg); border:1px solid var(--studio-border); border-radius:16px; box-shadow:0 16px 60px #0003,inset 0 1px #ffffff06; color:var(--studio-text); }
#bmApp::after { display:none; }
#bmApp.skin-midnight { --bm-accent:#83adff; --studio-bg:#181d29; --studio-panel:#202738; }
#bmApp.skin-ember { --bm-accent:#ffac82; --studio-bg:#251c1c; --studio-panel:#302424; }
#bmApp.skin-purple { --bm-accent:#cfacff; --studio-bg:#211b2a; --studio-panel:#2c2438; }
#bmApp.skin-ice { --bm-accent:#8ae2f5; --studio-bg:#17232a; --studio-panel:#20303a; }
#bmApp.skin-gold { --bm-accent:#f9d780; --studio-bg:#252219; --studio-panel:#302b20; }
#bmApp button, #bmApp select, #bmApp input { font-family:inherit; }
#bmApp button, #bmApp summary { -webkit-tap-highlight-color:transparent; }
#bmApp button:focus-visible, #bmApp input:focus-visible, #bmApp select:focus-visible, #bmApp summary:focus-visible { outline:2px solid var(--studio-accent); outline-offset:3px; }
#bmApp button:disabled { opacity:.35; cursor:default; }
#bmApp .bar { background:transparent; border:0; border-radius:0; margin:0; padding:12px 20px; gap:10px; }
#bmApp .btn, #bmApp .btn-sm { min-height:32px; height:32px!important; padding:0 11px!important; border:1px solid var(--studio-border)!important; border-radius:6px!important; background:#ffffff04!important; color:#d5d9e0!important; font-size:11px!important; font-weight:500!important; text-transform:none; letter-spacing:0; box-shadow:none!important; transition:background .15s,border-color .15s,transform .1s; }
#bmApp .btn:hover { background:#ffffff0c!important; border-color:#6a717e!important; }
#bmApp .btn:active { transform:translateY(1px)!important; }
#bmApp .btn.on, #bmApp .btn.mode-on, #bmApp .btn.tool-on, #bmApp .btn.copy-armed, #bmApp .bar-chip.on { background:var(--studio-accent)!important; border-color:var(--studio-accent)!important; color:#182211!important; animation:none; }
#bmApp .btn-stop { color:#ff9a9a!important; }
#bmApp .btn-rec { color:#ff989d!important; }
#bmApp .btn-rec.on { background:#e87780!important; border-color:#e87780!important; color:#17191e!important; }
#bmApp .bar-label, #bmApp .tl { font:500 10px/1.2 'Outfit',system-ui,sans-serif; color:var(--studio-muted); letter-spacing:1px; }
#bmApp #transportBar { display:flex; position:sticky; top:var(--bb-nav-header-height,56px); flex-wrap:nowrap; min-height:64px; padding:10px 20px; gap:10px; z-index:50; background:var(--studio-bg); border-bottom:1px solid var(--studio-border); border-radius:16px 16px 0 0; box-shadow:0 5px 12px #0002; }
#bmApp #transportBar .btn, #bmApp #transportBar .gen-btn { width:auto; min-height:42px; height:42px!important; padding:0 17px!important; font-size:12px!important; flex-shrink:0; }
#bmApp #transportBar #playBtn { min-width:100px; font-weight:650!important; color:#202a15!important; background:var(--studio-accent)!important; border-color:var(--studio-accent)!important; }
#bmApp #transportBar #playBtn:hover { filter:brightness(1.08); }
#bmApp #transportBar #playBtn.on { box-shadow:0 0 20px #c2f87816!important; }
#bmApp .gen-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; margin:0; border-radius:6px; border:1px solid #788c5c; background:#c2f87809; text-transform:none; }
#bmApp .gen-btn:hover { background:#c2f87816; box-shadow:none; }
#bmApp .gen-icon, #bmApp .gen-label { color:var(--studio-accent); font-family:inherit; font-size:12px; letter-spacing:0; text-transform:none; }
#bmApp #transportBar .recipe-toggle { border-color:transparent!important; color:var(--studio-muted)!important; padding:0 8px!important; gap:8px; }
#bmApp .transport-state { display:flex; align-items:center; gap:7px; font:10px 'JetBrains Mono',monospace; color:#8e96a3; margin-left:10px; white-space:nowrap; }
#bmApp .transport-state i { width:5px; height:5px; border-radius:50%; background:#77808e; }
#bmApp .transport-state.is-playing { color:var(--studio-accent); }
#bmApp .transport-state.is-playing i { background:var(--studio-accent); box-shadow:0 0 8px #c2f87888; }
#bmApp .studio-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
#bmApp .btn.btn-share-prom { animation:none; }
#bmApp #transportBar #exportToggle { background:#e4e8ee!important; border-color:#e4e8ee!important; color:#222730!important; gap:10px; }
#bmApp #transportBar>.context-help { display:none; }
#bmApp #timingBar { padding:6px 20px; min-height:45px; border-bottom:1px solid #ffffff07; }
#bmApp #timingBar .transport-sliders { display:flex; flex-basis:auto; gap:14px; margin:0; padding:0; border:0; order:0; }
#bmApp .tg { gap:10px; }
#bmApp .tv { color:#dde3eb; font:11px 'JetBrains Mono',monospace; }
#bmApp .tv-lcd { color:var(--studio-accent); font-size:19px; letter-spacing:-1px; text-shadow:none; }
#bmApp .td { height:18px; background:var(--studio-border); }
#bmApp input[type=range] { appearance:none; height:20px; min-height:20px; background:linear-gradient(var(--studio-border),var(--studio-border)) center/100% 3px no-repeat; border:0; accent-color:var(--studio-accent); }
#bmApp input[type=range]::-webkit-slider-thumb { width:12px; height:12px; border:2px solid #dce3d3; background:#dce3d3; box-shadow:0 1px 3px #0005; }
#bmApp input[type=range]::-moz-range-thumb { width:12px; height:12px; border:0; border-radius:50%; background:#dce3d3; }
#bmApp .meter-wrap { display:block; margin-left:auto; background:#111418; border:1px solid #2b3039; border-radius:4px; padding:2px 8px; height:31px; }
#bmApp #timingBar>.context-help { margin-left:0; }
#bmApp #kitBar { padding:6px 20px 9px; gap:6px; border-bottom:1px solid var(--studio-border); flex-wrap:wrap; }
#bmApp #kitBar>.bar-label { margin-right:10px; }
#bmApp .pill { height:29px; min-height:29px!important; padding:0 12px; border-radius:5px; background:transparent; border:1px solid transparent; color:var(--studio-muted); font-size:11px!important; font-weight:500; }
#bmApp .pill:hover { background:#ffffff08; color:#fff; border-color:#4b535f; }
#bmApp .pill.on { background:#c2f87812; border-color:#788c5c; color:var(--studio-accent); }
#bmApp .pill.on.sample-kit::after { color:var(--studio-accent); }
#bmApp #kitBar #helpBtn { margin-left:auto; }
#bmApp #sequenceLength { display:flex; align-items:center; margin-left:auto; }
#bmApp .bars-sel, #bmApp .gen-select { background:var(--studio-inset); border:1px solid var(--studio-border); color:#d5dae3; border-radius:5px; min-height:30px; padding:4px 8px; font-size:11px; }
#bmApp select option { background:#1d2026; color:#e2e7ef; }
#bmApp .fs-btn { width:30px; height:30px; border-radius:5px; background:transparent!important; color:#aab1bd!important; border:1px solid var(--studio-border)!important; font:15px 'Outfit',sans-serif; flex-shrink:0; }
#bmApp .main { display:grid; grid-template-columns:340px minmax(0,1fr); gap:24px; padding:20px; margin:0; align-items:start; }
#bmApp .pads-col { width:auto; min-width:0; max-width:none; }
#bmApp .seq-col { min-width:0; gap:0; }
#bmApp .pad-help-row { padding:0; margin:0 0 2px; height:25px; }
#bmApp .pad-help-title { font:600 15px 'Outfit',sans-serif; color:#e3e6ed; letter-spacing:0; text-transform:none; display:flex; align-items:center; gap:9px; }
#bmApp .pad-help-title::before { content:'01'; color:#747e8c; font:10px 'JetBrains Mono',monospace; }
#bmApp .pad-instruction { font-size:11px; color:var(--studio-muted); margin:3px 0 15px 24px; }
#bmApp .pad-grid { gap:8px; }
#bmApp .pad { --pad-color:#f18b8a; --pad-rgb:241,139,138; aspect-ratio:1; min-height:0; border:1px solid rgba(var(--pad-rgb),.38); border-top-color:rgba(var(--pad-rgb),.56); border-radius:9px; background:linear-gradient(150deg,rgba(var(--pad-rgb),.19),rgba(var(--pad-rgb),.055)),#1d1d22; color:var(--pad-color); box-shadow:inset 0 1px #ffffff09,inset 0 -5px #0002,0 3px 4px #0003; justify-content:flex-end; padding:13px 4px; gap:9px; }
#bmApp .pad-s { --pad-color:#86b8fb; --pad-rgb:134,184,251; }
#bmApp .pad-h { --pad-color:#e9c86e; --pad-rgb:233,200,110; }
#bmApp .pad-p { --pad-color:#7bd0b5; --pad-rgb:123,208,181; }
#bmApp .pad:hover { border-color:var(--pad-color); background:linear-gradient(150deg,rgba(var(--pad-rgb),.27),rgba(var(--pad-rgb),.11)),#1d1d22; }
#bmApp .pad.selected { border-color:var(--pad-color)!important; outline:none; box-shadow:inset 0 0 0 1px rgba(var(--pad-rgb),.4),inset 0 -4px #0002!important; }
#bmApp .pad.hit, #bmApp .pad:active { transform:translateY(2px) scale(.98); background:rgba(var(--pad-rgb),.7); color:#15191e; box-shadow:0 0 24px rgba(var(--pad-rgb),.22),inset 0 2px 6px #0003; }
#bmApp .pad .p-key { display:block; top:7px; right:8px; opacity:.65; font:10px 'JetBrains Mono',monospace; }
#bmApp .pad .p-name { font:500 11px 'Outfit',sans-serif; letter-spacing:.1px; text-transform:none; }
#bmApp .pad .p-ico { display:flex; align-items:center; font-size:0; filter:none; height:22px; }
#bmApp .pad .p-ico svg { width:32px; height:22px; stroke:currentColor; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
#bmApp .pad .p-glow { border-radius:8px; }
#bmApp .pad-legend { display:flex; justify-content:space-between; gap:8px; margin:17px 0 12px; font-size:10px; color:var(--studio-muted); }
#bmApp .pad-legend span::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.legend-k::before { background:#f18b8a; }.legend-s::before { background:#86b8fb; }.legend-h::before { background:#e9c86e; }.legend-p::before { background:#7bd0b5; }
#bmApp .pad-key-hint { display:flex; gap:5px; flex-wrap:wrap; color:#818b9b; font-size:10px; margin-bottom:16px; }
#bmApp .pad-key-hint>span { flex-basis:100%; margin:0 0 4px; }
#bmApp kbd { font:9px 'JetBrains Mono',monospace; color:#a6aebb; border:1px solid #393f48; border-radius:3px; background:#ffffff02; padding:3px 5px; }
#bmApp .studio-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px; min-height:25px; }
#bmApp .studio-section-head>div { display:flex; align-items:center; gap:9px; }
#bmApp h2 { font:600 15px 'Outfit',sans-serif; margin:0; color:#e3e6ed; letter-spacing:0; }
#bmApp .section-index { font:10px 'JetBrains Mono',monospace; color:#747e8c; }
#bmApp .section-caption { font-size:11px; color:var(--studio-muted); }
#bmApp .preset-bar { padding:0 0 10px; margin:0; gap:5px; border:0; border-radius:0; background:none; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#414b58 transparent; mask-image:none; }
#bmApp .preset-bar>* { flex-shrink:0; }
#bmApp .preset-chip { padding:5px 9px; height:27px; min-height:27px!important; color:#aab2bf; background:#ffffff04; border:1px solid #373c46; border-radius:5px; font-size:10px!important; font-weight:400; }
#bmApp .preset-chip:hover { color:#fff; border-color:#707a87; }
#bmApp .preset-chip.on { background:#e4e9e9; color:#20262b; border-color:#e4e9e9; }
#bmApp .track-switcher { border:1px solid #404b59; border-radius:10px; background:#222a34; }
#bmApp .track-switcher-heading { display:flex; align-items:center; gap:8px; min-height:48px; margin:0; padding:10px 15px; background:#171c24; border-radius:9px 9px 0 0; }
#bmApp .track-switcher-heading>div { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; }
#bmApp .track-switcher-heading strong { font-size:12px; font-weight:600; color:#e1e7ef; }
#bmApp #trackSwitchHint { color:#a7b1c1; font-size:11px; }
#bmApp .track-editing { margin-left:auto; flex-shrink:0; color:#d7dfec; font-size:10px; }
#bmApp .track-editing::before { content:''; display:inline-block; width:5px; height:5px; margin-right:6px; border-radius:50%; background:var(--track-color,#c2f878); }
#bmApp .seq-tabs { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:3px; margin:0; padding:0 12px; border:0; border-bottom:1px solid #586473; background:#171c24; overflow:visible; -webkit-mask-image:none; mask-image:none; }
#bmApp .seq-tab { --track-color:#c2f878; --track-rgb:194,248,120; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:49px; bottom:-1px; padding:8px 3px; border:1px solid #374354; border-bottom-color:#586473; border-radius:7px 7px 0 0; background:#1d242e; box-shadow:none; color:#b7c2d1; font:600 12px 'Outfit',sans-serif; text-transform:none; letter-spacing:0; cursor:pointer; animation:none; transition:background .15s,border-color .15s,color .15s; }
#bmApp .seq-tab-syn { --track-color:#c79cfd; --track-rgb:199,156,253; }
#bmApp .seq-tab-bass { --track-color:#f6ab70; --track-rgb:246,171,112; }
#bmApp .seq-tab-fx { --track-color:#f794c8; --track-rgb:247,148,200; }
#bmApp .seq-tab-chd { --track-color:#6bd9e3; --track-rgb:107,217,227; }
#bmApp .seq-tab-arp { --track-color:#c4db83; --track-rgb:196,219,131; }
#bmApp .seq-tab-vox { --track-color:#fa9ca7; --track-rgb:250,156,167; }
#bmApp .seq-tab-smp { --track-color:#81dedb; --track-rgb:129,222,219; }
#bmApp .seq-tab:hover { color:#fff; border-color:#566575; border-bottom-color:transparent; background:#25303c; }
#bmApp .seq-tab.active { z-index:1; color:var(--track-color); border-color:#586473; border-bottom-color:#222a34; background:#222a34; box-shadow:inset 0 3px var(--track-color); }
#bmApp .track-icon { width:18px; height:18px; flex-shrink:0; color:var(--track-color); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#bmApp .track-description { display:none; }
#bmApp .track-muted { display:none; font-size:9px; font-weight:400; line-height:1.2; color:#d8bfa4; }
#bmApp .seq-tab.tab-muted { opacity:1; text-decoration:none; }
#bmApp .seq-tab.tab-muted .track-name,#bmApp .seq-tab.tab-muted .track-icon { transform:translateY(-5px); }
#bmApp .seq-tab.tab-muted .track-muted { display:block; position:absolute; left:0; right:0; bottom:3px; text-align:center; font-size:8px; }
#bmApp .track-activity { position:absolute; right:6px; top:6px; width:4px; height:4px; border-radius:50%; background:var(--track-color); opacity:.2; }
#bmApp .seq-tab[class*="pulse-"]:not(.tab-muted) .track-activity { animation:studio-track-hit .18s ease-out; }
@keyframes studio-track-hit { from { opacity:1; box-shadow:0 0 7px 2px var(--track-color); } to { opacity:.2; box-shadow:none; } }
#bmApp .seq-box { padding:16px 15px 8px; border:0; background:#222a34; border-radius:0!important; flex:none; scrollbar-width:thin; scrollbar-color:#525b68 #222a34; overflow:auto; overscroll-behavior-x:contain; }
#bmApp .track-switcher .sl { background:#222a34; box-shadow:3px 0 #222a34; }
#bmApp .seq-panel { min-width:calc(67px + var(--studio-steps,16) * 25px); }
#bmApp .seq-head,#bmApp .syn-ctrl,#bmApp .macro-strip,#bmApp .smp-load,#bmApp .smp-trim-bar { position:sticky; left:0; max-width:var(--studio-timeline-width,100%); }
#bmApp .seq-head { margin-bottom:12px; min-height:30px; gap:8px; }
#bmApp .seq-title { font:600 12px 'Outfit',sans-serif; text-transform:uppercase; letter-spacing:1px; color:#c2f878; white-space:nowrap; }
#bmApp .tab-vol { gap:5px; }
#bmApp .tab-vol-label, #bmApp .syn-ctrl-label { font-size:10px; color:#939faf; }
#bmApp .tab-vol-val { color:#cad2de; font-size:10px; }
#bmApp .seq-nums { padding-left:70px; gap:3px; margin-bottom:7px; min-width:calc(67px + var(--studio-steps,16) * 25px); }
#bmApp .seq-num { min-width:22px; font:9px 'JetBrains Mono',monospace; color:#778393; }
#bmApp .seq-num.beat { color:#d3dbe7; font-weight:500; }
#bmApp .sr { gap:3px; margin-bottom:3px; min-width:calc(67px + var(--studio-steps,16) * 25px); }
#bmApp .sl { width:67px; padding-right:8px; font:10px 'Outfit',sans-serif; text-align:left; opacity:1; position:sticky; left:0; z-index:2; background:var(--studio-bg); align-self:stretch; display:flex; align-items:center; box-shadow:3px 0 var(--studio-bg); }
#bmApp .sl-k { color:#f18b8a; }#bmApp .sl-s { color:#86b8fb; }#bmApp .sl-h { color:#e9c86e; }#bmApp .sl-p { color:#7bd0b5; }
#bmApp .ss { gap:3px; }
#bmApp .st { height:20px; min-width:22px; border-radius:3px; border:1px solid #343b45; background:#22262e; }
#bmApp .ss .st:nth-child(8n+5):not(.on),#bmApp .ss .st:nth-child(8n+6):not(.on),#bmApp .ss .st:nth-child(8n+7):not(.on),#bmApp .ss .st:nth-child(8n):not(.on) { background:#2c313b; }
#bmApp .st:nth-child(4n+1) { border-left-color:#5a6372; }
#bmApp .st:hover { filter:brightness(1.35); border-color:#8a97aa; }
#bmApp .st.on { border-color:#ffffff18; box-shadow:inset 0 1px #ffffff22; }
#bmApp .st.on-k { background:#e38b89; }#bmApp .st.on-s { background:#7da9e1; }#bmApp .st.on-h { background:#dabe70; }#bmApp .st.on-p { background:#71bda6; }
#bmApp .st.on-syn { background:#b494e2; }#bmApp .st.on-bass { background:#e5a16f; }#bmApp .st.on-fx { background:#dc82b4; }#bmApp .st.on-chd { background:#66bfc9; }#bmApp .st.on-arp { background:#abc973; }#bmApp .st.on-vox { background:#e68699; }#bmApp .st.on-smp { background:#6bbfc0; }
#bmApp .st.cur { box-shadow:inset 0 0 0 2px var(--studio-accent)!important; }
#bmApp #seqGrid .sr:nth-child(4n+4):not(:last-child) { margin-bottom:7px; }
#bmApp .sequence-bottom { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:10px 15px 13px; border-top:1px solid #3b4857; border-radius:0 0 9px 9px; }
#bmApp .step-hint { display:flex; align-items:center; gap:6px; color:#8894a5; font-size:10px; white-space:nowrap; }
#bmApp .step-hint i { width:5px; height:5px; background:var(--studio-accent); border-radius:50%; }
#bmApp .bar-nav { margin-left:auto; gap:4px; }
#bmApp .bar-nav .btn { min-height:27px; height:27px!important; padding:0 8px!important; font-size:10px!important; }
#bmApp .studio-disclosure { border-top:1px solid #333a44; }
#bmApp .studio-disclosure summary { min-height:37px; display:flex; align-items:center; gap:12px; padding:8px 0; cursor:pointer; color:#bac3d0; font-size:11px; list-style:none; }
#bmApp summary::-webkit-details-marker { display:none; }
#bmApp .studio-disclosure summary::before { content:'+'; color:#929dad; font:15px 'JetBrains Mono',monospace; width:10px; }
#bmApp .studio-disclosure[open] summary::before { content:'−'; }
#bmApp .summary-detail { margin-left:auto; color:#818d9f; font-size:10px; }
#bmApp .edit-tools { padding:8px 0 14px; margin:0; background:none; border:0; border-radius:0; gap:6px; position:static; }
#bmApp .tool-status { color:#a4adbb; font-size:10px; }
#bmApp .bank-bar { padding:8px 0 14px; flex-wrap:wrap; }
#bmApp .arrange-wrap { min-width:0; flex-basis:100%; }
#bmApp .bank-chip,#bmApp .chain-add-btn,#bmApp .chain-chip { border-color:#414b58; background:#252c36; color:#bcc8d9; }
#bmApp .bank-chip.on { background:var(--studio-accent); border-color:var(--studio-accent); color:#20291b; }
#bmApp .bank-chip.queued { border-color:var(--studio-accent); box-shadow:0 0 0 1px var(--studio-accent); }
#bmApp .chain-chip.playing { border-color:var(--studio-accent); background:var(--studio-accent); color:#20291b; box-shadow:0 0 12px #c2f87825; }
#bmApp .btn-tap.flash { background:var(--studio-accent)!important; border-color:var(--studio-accent)!important; color:#20291b!important; }
#bmApp .rec-box { background:var(--studio-inset); border:1px solid #303741; border-radius:8px; margin-top:5px; min-height:110px; flex:none; padding:12px; }
#bmApp .rec-head { margin-bottom:8px; }
#bmApp .rec-title { color:#c4ccd8; font:500 12px 'Outfit',sans-serif; letter-spacing:0; text-transform:none; }
#bmApp .rec-count { color:#b6bfcd; background:#2a313c; font:10px 'JetBrains Mono',monospace; }
#bmApp .rec-empty { color:#7e8a9b; font:11px/1.6 'Outfit',sans-serif; padding:5px 0; }
#bmApp .rec-item { background:#202732; border-color:#35404f; }
#bmApp .rec-item-name,#bmApp .rec-item-meta { color:#b9c5d6; }
#bmApp .rec-btn { width:28px; height:28px; border-color:#485365!important; background:#222c3b!important; color:#c6d3e5!important; border-radius:4px; }
#bmApp .tweak-panel { padding:12px; background:var(--studio-inset); border-color:#3d4958; border-radius:8px; margin:0 0 12px; }
#bmApp .tweak-name { color:#d6dfed; font:600 12px 'Outfit',sans-serif; }
#bmApp .tweak-param label,#bmApp .tp-val { color:#a7b6c9; font-family:inherit; font-size:10px; }
#bmApp .context-help { width:22px; height:22px; min-width:22px; border:1px solid #424b59; background:transparent; color:#99a4b5; box-shadow:none; font:11px 'Outfit',sans-serif; }
#bmApp .context-help:hover { color:var(--studio-accent); border-color:var(--studio-accent); background:#ffffff07; box-shadow:none; }
#bmApp .track-switcher-heading .context-help { position:static; align-self:center; margin:0; flex-shrink:0; border-radius:50%; }
#bmApp .studio-drawer { padding:16px 20px; background:var(--studio-inset); border-bottom:1px solid var(--studio-border); }
#bmApp [hidden] { display:none!important; }
#bmApp .gen-studio { border:0; background:transparent; padding:0; gap:12px; margin:0; }
#bmApp .gen-studio-title { color:var(--studio-accent); font:500 12px 'Outfit',sans-serif; text-transform:none; letter-spacing:0; }
#bmApp .gen-control label,#bmApp .gen-lock-label { font:10px 'Outfit',sans-serif; color:#98a4b6; }
#bmApp .gen-lock { border-color:#3f4a5a; color:#aebbd0; background:#222a36; font:10px 'Outfit',sans-serif; min-height:29px; border-radius:5px; }
#bmApp .gen-lock.on { background:#c2f87812; border-color:var(--studio-accent); color:var(--studio-accent); }
#bmApp .export-heading { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
#bmApp .export-actions { display:flex; gap:8px; }
#bmApp .export-actions .btn { height:40px!important; }
#bmApp #exportBtn { border-color:#899b6c!important; color:var(--studio-accent)!important; }
#bmApp #downloadOptions { padding:12px 0 0; }
#bmApp .check-label,#bmApp #exportHint,#bmApp #exportStatus { color:#b1bfce; font-size:11px; }
#bmApp #morePanel.open { padding:18px 20px; border-top:1px solid var(--studio-border); background:var(--studio-inset); scroll-margin-top:140px; }
#bmApp #morePanel .bar { padding:10px 0; }
#bmApp .mixer-panel { background:transparent; border:0; border-top:1px solid #3c4654; padding:15px 0 0; }
#bmApp .mixer-title { font:600 14px 'Outfit',sans-serif; color:#dbe3ef; }
#bmApp .mix-strip { background:#1e2632; border-color:#3c4859; }
#bmApp .mix-name,#bmApp .mix-param label { color:#b3c0d2; }
#bmApp .mix-mini { border-color:#4b596e; background:#252f3e; color:#bdc9db; }
#bmApp .mix-mini.on { background:var(--studio-accent); color:#192311; border-color:var(--studio-accent); }
#bmApp .syn-ctrl,#bmApp .smp-load { border-color:#354353; }
#bmApp .syn-wave-btn { color:#b0bed2; background:#222c3a; border-color:#414d61; border-radius:4px; font-family:inherit; }
#bmApp .syn-wave-btn.on { color:#18231f; background:var(--studio-accent); border-color:var(--studio-accent); }
#bmApp .macro label,#bmApp .macro output,#bmApp .smp-label { color:#a8b8ce; }
#bmApp .studio-footnote { display:flex; justify-content:space-between; gap:12px; padding:14px 20px; background:#12151a; border-top:1px solid #303741; border-radius:0 0 16px 16px; color:#929caa; font-size:10px; }
#bmApp .studio-footnote>span:first-child { display:flex; gap:7px; align-items:center; }
#bmApp .mobile-workspace-switch { display:none; }
#bmApp .timeline-navigation { display:none; }
#bmApp .studio-footnote i { width:5px; height:5px; background:var(--studio-accent); border-radius:50%; }
#bmApp .footnote-divider { margin:0 9px; }
#bmApp .bm-footer { display:none; }
#bmApp .comm { margin:15px 20px 20px; padding:16px; border:1px solid #394454; border-radius:12px; background:#1d2530; }
#bmApp .comm-head { margin-bottom:12px; }
#bmApp .comm-title { color:#e6edf7; font:600 14px 'Outfit',sans-serif; letter-spacing:.35px; text-transform:none; }
#bmApp .comm-all { color:var(--studio-accent); font:600 12px 'Outfit',sans-serif; letter-spacing:0; }
#bmApp .comm-list { gap:9px; min-height:68px; scrollbar-color:#506078 transparent; }
#bmApp .comm-card { width:210px; min-height:64px; gap:5px; padding:11px 12px; border:1px solid #435064; border-radius:8px; background:#232e3a; font-family:'Outfit',sans-serif; }
#bmApp .comm-card:hover,#bmApp .comm-card:focus-visible { border-color:var(--studio-accent); background:#2b3946; outline:none; }
#bmApp .comm-t { color:#f0f4fa; font:600 13px 'Outfit',sans-serif; }
#bmApp .comm-m { color:#a9b9cc; font:500 11px 'Outfit',sans-serif; letter-spacing:0; }
#bmApp .comm-m b { color:var(--studio-accent); }
#bmApp .comm-empty { color:#b5c3d3; font:500 12px 'Outfit',sans-serif; letter-spacing:0; }
#bmApp .bm-help,#bmApp .bm-kid-help,#bmApp .bm-share { background:#1b222c; border:1px solid #506075; border-radius:12px; font-family:inherit; }
#bmApp .bm-help-head,#bmApp .bm-kid-help-head,#bmApp .bm-share-head { background:#222b37; border-color:#3c495b; }
#bmApp .bm-help-title,#bmApp .bm-kid-help-title,#bmApp .bm-share-title { color:#e3eaf5; font-family:inherit; letter-spacing:.5px; }
#bmApp .bm-help-body { color:#b4c2d5; font-family:inherit; font-size:13px; }
#bmApp .bm-help-body h4 { color:var(--studio-accent); font:600 13px 'Outfit',sans-serif; letter-spacing:0; border-color:#39485c; }
#bmApp .bm-kid-help-item { background:#222d3c; border-color:#3e4e62; }
#bmApp .bm-kid-help-item p,#bmApp .bm-kid-help-intro { color:#c4d0e1; font-size:12px; }
#bmApp .bm-kid-help-control,#bmApp .bm-kid-help-mark { background:var(--studio-accent); }
#bmApp .bm-kid-help-foot { background:#19212d; border-color:#3c495b; }
#bmApp .bm-kid-help-tip { color:#a5b5cb; font-size:11px; }
#bmApp .bm-share-url { background:#141b25; border-color:#46566d; color:#d0dbea; font-size:12px; }
#bmApp.fullscreen { max-width:1600px; width:100%; padding:0; overflow:auto; border-radius:0; background:var(--studio-bg); }
#bmApp.fullscreen #transportBar { top:0; }
#about { max-width:1100px; margin:40px auto; background:none; border:0; padding:24px; color:#a4adbc; font-family:'Outfit',sans-serif; line-height:1.8; }
#about h2,#about h3 { color:#dce3ed; font-family:inherit; letter-spacing:0; text-transform:none; text-shadow:none; }
#about a { color:#c2f878; }
@media(min-width:1500px) { .bm-page-intro { padding-top:35px!important; padding-bottom:30px!important; } #bmApp .main { grid-template-columns:360px minmax(0,1fr); gap:28px; } #bmApp .st { height:23px; } }
@media(max-width:1380px) { #bmApp { margin:0 24px; } }
@media(max-width:1180px) { #bmApp .transport-state { display:none; } #bmApp .main { grid-template-columns:300px minmax(0,1fr); gap:18px; padding:18px; } #bmApp .section-caption { display:none; } #bmApp .pad { padding-bottom:11px; gap:6px; } #bmApp .pad .p-name { font-size:10px; } .bm-page-intro h1 .hero-subtitle { display:block; margin:7px 0 0; } #bmApp .seq-head { flex-wrap:wrap; } }
@media(max-width:960px) { #bmApp .main { grid-template-columns:250px minmax(0,1fr); gap:16px; } #bmApp #transportBar .btn,#bmApp #transportBar .gen-btn { padding:0 12px!important; } #bmApp .pad .p-ico svg { width:26px; height:18px; } #bmApp .pad { gap:3px; padding:8px 3px; } #bmApp .pad .p-key { top:4px; right:6px; font-size:8px; } #bmApp .pad-legend { flex-wrap:wrap; justify-content:flex-start; gap:8px 14px; } #bmApp .sequence-bottom { flex-wrap:wrap; } #bmApp .step-hint { display:none; } #bmApp .summary-detail { font-size:9px; } #bmApp #kitBar { gap:3px; } #bmApp .pill { padding:0 9px; } #bmApp .pad-key-hint kbd { font-size:8px; } }
@media(max-width:1180px) { #bmApp .seq-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:2px; } #bmApp .track-switcher-heading>div { display:block; } #bmApp #trackSwitchHint { display:block; margin-top:3px; } }
@media(max-width:760px) {
  .bm-page-intro { padding:17px 16px 16px!important; }
  .bm-page-intro h1 { font-size:31px; }
  .bm-page-intro h1 .hero-subtitle { font-size:12px; }
  .bm-page-intro .intro-description { margin-top:9px; font-size:12px; line-height:1.5; }
  .studio-eyebrow { font-size:8px; letter-spacing:1.2px; }
  .intro-aside { display:none; }
  #bmApp { margin:0 12px; border-radius:12px; }
  #bmApp #transportBar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.1fr); padding:12px; min-height:68px; gap:8px; border-radius:12px 12px 0 0; }
  #bmApp #transportBar #playBtn { min-width:0; }
  #bmApp #transportBar .btn,#bmApp #transportBar .gen-btn { padding:0 12px!important; font-size:12px!important; min-height:42px; }
  #bmApp #transportBar .recipe-toggle { margin-left:0; }
  #bmApp .studio-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-column:1 / -1; width:100%; gap:6px; }
  #bmApp #transportBar .studio-actions .btn { min-width:0; padding:0 5px!important; height:34px!important; min-height:34px!important; font-size:11px!important; }
  #bmApp #timingBar { padding:10px 12px; gap:8px; }
  #bmApp #timingBar .transport-sliders { flex:1; gap:14px; justify-content:space-between; flex-wrap:nowrap; }
  #bmApp #timingBar .tg { display:grid; grid-template-columns:1fr auto; gap:4px; flex:1; min-width:0; }
  #bmApp #timingBar .tg .tl { order:0; }
  #bmApp #timingBar .tg .tv { order:1; text-align:right; }
  #bmApp #timingBar .tg input[type=range] { order:2; grid-column:1 / -1; }
  #bmApp #timingBar .td,#bmApp #timingBar .context-help,#bmApp .meter-wrap { display:none; }
  #bmApp #timingBar #bpmS,#bmApp #timingBar #swgS,#bmApp #timingBar #volS { width:100%!important; }
  #bmApp #timingBar .tl { font-size:8px; letter-spacing:.5px; }
  #bmApp #timingBar .tv { font-size:10px; min-width:24px; }
  #bmApp #timingBar .tv-lcd { font-size:16px; }
  #bmApp #tapBtn { padding:0 8px!important; min-height:34px!important; height:34px!important; }
  #bmApp #kitBar { padding:6px 12px 10px; gap:5px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#485261 transparent; }
  #bmApp #kitBar>.bar-label { display:none; }
  #bmApp #kitBar .pill { min-height:34px!important; flex-shrink:0; font-size:11px!important; }
  #bmApp #kitBar .bars-sel { min-width:70px; flex-shrink:0; }
  #bmApp .main { display:flex; flex-direction:column; gap:24px; padding:12px; }
  #bmApp .mobile-workspace-switch { display:flex; border-bottom:1px solid var(--studio-border); padding:0 12px; gap:20px; }
  #bmApp .mobile-workspace-switch button { display:flex; align-items:center; gap:8px; min-height:43px; background:transparent; border:0; border-bottom:2px solid transparent; color:#828e9e; padding:0 3px; font:10px 'JetBrains Mono',monospace; cursor:pointer; }
  #bmApp .mobile-workspace-switch button span { font:500 12px 'Outfit',sans-serif; }
  #bmApp .mobile-workspace-switch button[aria-pressed=true] { color:var(--studio-accent); border-color:var(--studio-accent); }
  #bmApp[data-mobile-view=pads] .seq-col,#bmApp[data-mobile-view=sequence] .pads-col { display:none; }
  #bmApp .pads-col,#bmApp .seq-col { width:100%!important; max-width:none!important; min-width:0; }
  #bmApp .pad-help-row { position:absolute; right:25px; height:28px; margin-top:-2px; }
  #bmApp .pad-help-title { display:none; }
  #bmApp .pad-instruction { margin:0 0 14px; min-height:22px; padding-top:3px; }
  #bmApp .pad { padding:12px 4px; gap:6px; border-radius:8px; }
  #bmApp .pad .p-ico svg { width:29px; height:21px; }
  #bmApp .pad .p-key { font-size:9px; top:6px; right:7px; }
  #bmApp .pad .p-name { font-size:11px; }
  #bmApp .pad-legend { justify-content:space-between; gap:5px; margin:13px 0 3px; }
  #bmApp .pad-key-hint { display:none; }
  #bmApp .rec-box { margin-top:14px; min-height:0; padding:10px 12px; }
  #bmApp .rec-empty { padding:0; font-size:10px; }
  #bmApp .rec-head { margin-bottom:5px; }
  #bmApp .rec-btn { width:36px; height:36px; }
  #bmApp .tweak-panel { margin:12px 0 0; }
  #bmApp .section-caption { display:none; }
  #bmApp .studio-section-head { flex-wrap:wrap; margin-bottom:10px; }
  #bmApp .timeline-navigation { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:-3px 0 10px; color:#9aa6b6; font-size:10px; }
  #bmApp .timeline-navigation>div { display:flex; gap:5px; }
  #bmApp .timeline-navigation button { width:38px; height:32px; border:1px solid #414b59; border-radius:5px; color:#d4deeb; background:#222a35; font-size:16px; }
  #bmApp .preset-bar { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
  #bmApp .preset-chip { min-height:32px!important; height:32px; font-size:11px!important; flex-shrink:0; }
  #bmApp .preset-bar .bar-label { display:none; }
  #bmApp .track-switcher-heading { display:grid; grid-template-columns:1fr auto auto; gap:4px 7px; min-height:0; padding:10px 12px 9px; }
  #bmApp .track-switcher-heading>div { display:contents; }
  #bmApp .track-switcher-heading strong { grid-area:1 / 1; }
  #bmApp #trackSwitchHint { grid-area:2 / 1 / 3 / -1; margin:0; }
  #bmApp .track-editing { grid-area:1 / 2; margin:0; }
  #bmApp .track-switcher-heading .context-help { grid-area:1 / 3; }
  #bmApp .seq-tabs { padding:0 8px; }
  #bmApp .seq-tab { min-height:47px; padding:7px 3px; }
  #bmApp .seq-box { padding:12px 10px 7px; }
  #bmApp .seq-head { min-width:0; flex-wrap:wrap; gap:6px; }
  #bmApp .seq-head>div { flex-wrap:wrap; }
  #bmApp .seq-head .seq-title { display:block; width:100%; font-size:11px; }
  #bmApp .seq-head .btn { min-height:34px; height:34px!important; }
  #bmApp .seq-head>.context-help { margin-left:auto; }
  #bmApp .st { min-width:30px; height:32px; }
  #bmApp .sr,#bmApp .seq-nums,#bmApp .seq-panel { min-width:calc(60px + var(--studio-steps,16) * 33px); }
  #bmApp .seq-num { min-width:30px; font-size:10px; }
  #bmApp .sl { width:60px; min-width:60px; font-size:10px; position:sticky; left:0; z-index:2; background:var(--studio-bg); align-self:stretch; display:flex; align-items:center; box-shadow:5px 0 7px #17191e99; }
  #bmApp .seq-nums { padding-left:63px; }
  #bmApp .sequence-bottom { padding:10px 10px 12px; }
  #bmApp .bar-nav { flex-wrap:wrap; margin:0; width:100%; justify-content:space-between; }
  #bmApp .bar-nav .btn { min-height:34px; height:34px!important; }
  #bmApp .studio-disclosure summary { min-height:44px; }
  #bmApp .summary-detail { font-size:9px; }
  #bmApp .studio-drawer { padding:15px 12px; }
  #bmApp .gen-control { min-width:90px; }
  #bmApp .gen-select { min-height:42px; }
  #bmApp .gen-lock { min-height:36px; }
  #bmApp .gen-locks { flex-wrap:wrap; }
  #bmApp #morePanel.open { padding:15px 12px; scroll-margin-top:190px; }
  #bmApp .studio-footnote { padding:12px; flex-direction:column; gap:10px; font-size:9px; border-radius:0 0 12px 12px; }
  #bmApp .studio-footnote>span:last-child { display:none; }
  #bmApp .comm { margin:12px; padding:12px; }
  #bmApp .comm-card { width:185px; min-height:68px; }
  #bmApp .context-help { min-width:28px; width:28px; height:28px; }
  #bmApp input[type=range]::-webkit-slider-thumb { width:17px; height:17px; }
  #bmApp input[type=range]::-moz-range-thumb { width:17px; height:17px; }
  #bmApp .mixer-grid { grid-template-columns:repeat(8,110px); }
  #bmApp .skin-dot { width:26px; height:26px; }
  #bmApp .syn-wave-btn { min-height:34px; }
  #bmApp.fullscreen { margin:0; }
  #about { padding:20px; margin:25px auto; }
}
@media(max-width:420px) { #bmApp .seq-tab { min-height:44px; gap:0; font-size:11px; } #bmApp .seq-tab .track-icon { display:none; } }
@media(max-width:380px) { #bmApp { margin:0 7px; } #bmApp .pad-grid { gap:6px; } #bmApp #transportBar .recipe-toggle { padding:0 2px!important; font-size:10px!important; gap:3px; } #bmApp #transportBar .btn,#bmApp #transportBar .gen-btn { padding:0 6px!important; font-size:11px!important; } #bmApp #transportBar .studio-actions .btn { font-size:10px!important; } #bmApp #exportToggle span { display:none; } #bmApp #timingBar .transport-sliders { gap:8px; } #bmApp #timingBar .tg { gap:3px; } #bmApp .summary-detail { display:none; } #bmApp .section-caption { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { #bmApp *,#bmApp *::before,#bmApp *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }