/* Guitar Studio layout. Loaded after the legacy instrument styles. */
html body.bb-studio .piano-drop-container #bb-songpick-wrap { order:-15; display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:10px; width:100%!important; max-width:none; margin:0!important; padding:14px 24px 0; box-sizing:border-box; border-inline:1px solid #383b3e; background:#1a1d20; }
html body.bb-studio #bb-songpick-wrap label { color:#c6ccd3; font-size:13px; }
html body.bb-studio .piano-drop-container #bb-songpick-select { flex:1 1 240px!important; width:auto!important; min-width:0!important; max-width:540px!important; min-height:42px!important; padding:9px 12px; border:1px solid #454b53; border-radius:7px; background:#111518; color:#f0ece5; box-shadow:none; font:13px 'Segoe UI',sans-serif; }
@media(max-width:700px) { html body.bb-studio .piano-drop-container #bb-songpick-wrap { padding:12px 12px 0; } }
body.bb-studio .bb-mobile-fretboard:not(.bb-show-keyboard-keys) .bb-mobile-fret kbd { display:none; }
body.bb-studio .bb-mobile-fretboard:not(.bb-show-keyboard-keys) .bb-mobile-fret span { transform:none; }
html body.bb-studio #bb-deck .bb-deck-rail .bb-deck-group-row > .bb-deck-tab { width:100%!important; max-width:none!important; justify-self:stretch!important; }
body.bb-studio #bb-deck .bb-studio-tool-filtered { display:none!important; }
body.bb-studio #bb-deck .bb-deck-rail { max-height:none!important; overflow:visible!important; padding:16px!important; border:0; }
body.bb-studio #bb-deck .bb-deck-group-label { justify-content:flex-start; color:#eee; font-size:12px; letter-spacing:.8px; margin-bottom:7px; }
body.bb-studio #bb-deck .bb-deck-group-label::before,body.bb-studio #bb-deck .bb-deck-group-label::after { display:none; }
.bb-studio-group-description { margin:0 0 16px; color:#9da5af; font-size:12px; }
html body.bb-studio #bb-deck .bb-deck-group-row { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:8px!important; align-items:stretch!important; }
html body.bb-studio #bb-deck .bb-deck-rail .bb-deck-tab { display:flex!important; align-self:stretch!important; justify-content:flex-start!important; min-width:0!important; min-height:48px!important; padding:12px 14px!important; border:1px solid #373e47!important; border-radius:8px!important; color:#d6dce4!important; background:#23282e!important; white-space:normal!important; line-height:1.3!important; font-size:13px!important; text-align:left!important; box-sizing:border-box!important; }
html body.bb-studio #bb-deck .bb-deck-rail .bb-deck-tab:hover { border-color:var(--studio-accent)!important; background:#2c3138!important; }
html body.bb-studio #bb-deck .bb-deck-rail .bb-deck-tab[aria-selected=true] { background:var(--studio-accent)!important; color:#171819!important; border-color:var(--studio-accent)!important; box-shadow:none!important; }
html body.bb-studio #bb-deck .bb-deck-rail .bb-deck-tab.bb-studio-tool-filtered { display:none!important; }
.bb-studio-tool-browser { padding:18px 16px 4px; }
.bb-studio-tool-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; }
body.bb-studio .bb-studio-tool-heading h2 { margin:0 0 6px; color:#f2eee5; font-size:19px; }
.bb-studio-tool-heading p { margin:0; color:#9da5af; font-size:12px; }
.bb-studio-tool-search { display:flex; flex-direction:column; gap:6px; color:#b4bdc8; font-size:11px; min-width:240px; }
.bb-studio-tool-search input { width:100%; box-sizing:border-box; min-height:40px; padding:9px 12px; border:1px solid #424b56; border-radius:7px; background:#121519; color:#eee; font:13px 'Segoe UI',sans-serif; }
.bb-studio-tool-categories { display:flex; flex-wrap:wrap; gap:6px; }
.bb-studio-category { padding:10px 12px; min-height:40px; border:1px solid #404750; border-radius:6px; background:#1b2026; color:#bcc4ce; font:600 12px 'Segoe UI',sans-serif; cursor:pointer; }
.bb-studio-category[aria-pressed=true] { background:var(--studio-accent); border-color:var(--studio-accent); color:#1b1c1e; }
.bb-studio-category[hidden],.bb-studio-tool-empty[hidden] { display:none; }
.bb-studio-tool-empty { color:#aeb8c5; padding:12px 0; font-size:13px; }
@media(max-width:700px){
 .bb-studio-tool-heading { flex-direction:column; align-items:stretch; gap:14px; }
 .bb-studio-tool-search { min-width:0; }
 .bb-studio-tool-categories { display:grid; grid-template-columns:1fr 1fr; }
 .bb-studio-category { text-align:left; }
 html body.bb-studio #bb-deck .bb-deck-group-row { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
html:has(body.bb-studio), body.bb-studio { min-width:0!important; max-width:100%; overflow-x:clip; }
body.bb-studio { background:#101214; color:#eeece7; font-family:'Outfit','Segoe UI',sans-serif; }
body.bb-studio .piano-drop-container { --studio-accent:#edc487; position:relative; z-index:auto; width:calc(100% - 48px)!important; max-width:1280px!important; min-width:0!important; margin:28px auto 40px!important; padding:0!important; background:transparent; border:0; box-shadow:none; overflow:visible!important; text-align:left; }
body.bb-studio[data-studio='electric'] .piano-drop-container { --studio-accent:#99d6e8; }
body.bb-studio[data-studio='distorted'] .piano-drop-container { --studio-accent:#f3a692; }
body.bb-studio[data-studio='bass'] .piano-drop-container { --studio-accent:#cbb6f4; }
.bb-studio-head { padding:0 0 18px; }
.bb-studio-eyebrow { color:var(--studio-accent); font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; }
body.bb-studio .piano-drop-container h1 { margin:8px 0 10px; color:#f6f1e7; font-size:clamp(32px,4.3vw,48px)!important; letter-spacing:-1.8px; line-height:1.06!important; font-weight:650; }
.bb-studio-subtitle { margin:0; color:#a1a6ac; font-size:15px; line-height:1.6; }
.bb-studio-instruments { display:flex; flex-wrap:wrap; float:none; width:100%; text-align:left; gap:6px; margin:16px 0 0; }
.bb-studio-instruments a { padding:9px 16px; border:1px solid #30343a; border-radius:7px; color:#aeb3ba; text-decoration:none; font-size:13px; font-weight:600; }
.bb-studio-instruments a:hover { color:#fff; border-color:#777; }
.bb-studio-instruments a[aria-current] { color:#171819; background:var(--studio-accent); border-color:var(--studio-accent); }
body.bb-studio .piano-drop-container .guitarcontainer { display:flex; flex-direction:column; position:relative; width:100%!important; min-width:0!important; max-width:none!important; height:auto!important; min-height:0!important; margin:0!important; padding:0; float:none; }
body.bb-studio .bb-mobile-fretboard { display:block; order:-20; width:100%; max-width:none; box-sizing:border-box; margin:0; padding:24px; border:1px solid #383b3e; border-radius:14px 14px 0 0; background:#1a1d20; box-shadow:none; }
body.bb-studio .bb-mobile-fretboard-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 22px; }
body.bb-studio .bb-mobile-fretboard-head h2 { margin:0; color:#f2eee5; font-size:16px; font-weight:600; }
body.bb-studio .bb-mobile-fretboard-head p { color:#a1a6ac; margin:5px 0 0; font-size:12px; text-align:left; line-height:1.4; }
.bb-studio-view-controls { display:flex; align-items:center; gap:12px; flex-shrink:0; font-size:12px; color:#c5c8cc; }
.bb-studio-view-controls { flex-wrap:wrap; }
body.bb-studio .bb-mobile-fretboard-head > div:first-child { max-width:580px; }
body.bb-studio .bb-mobile-fret span { transform:translateY(-5px); }
body.bb-studio .bb-mobile-fret kbd { position:absolute; bottom:0; z-index:2; padding:0 4px; border-radius:3px; color:#e5d9c7; background:#171819; font:600 11px/14px 'Segoe UI',sans-serif; pointer-events:none; }
body.bb-studio .bb-mobile-fret.bb-studio-sounding { background:color-mix(in srgb,var(--studio-accent) 38%,transparent)!important; box-shadow:inset 0 0 0 2px var(--studio-accent)!important; }
body.bb-studio .bb-mobile-fret.bb-studio-sounding span { opacity:1!important; color:#151719!important; background:var(--studio-accent)!important; box-shadow:0 0 18px var(--studio-accent)!important; }
body.bb-studio .bb-mobile-fret.bb-studio-sounding kbd { color:#151719; background:var(--studio-accent); }
.bb-studio-view-controls label { display:flex; align-items:center; gap:6px; }
.bb-studio-view-controls input { accent-color:var(--studio-accent); }
.bb-studio-view-controls button,.bb-studio-classic-close { padding:8px 12px; color:#ddd; background:#272b30; border:1px solid #454a50; border-radius:6px; cursor:pointer; font:inherit; }
body.bb-studio .bb-mobile-fret-scroll { width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scrollbar-width:thin; scrollbar-color:#777 #232323; border-radius:7px; background:#201b18; }
body.bb-studio .bb-mobile-fret-grid { display:grid; grid-template-columns:44px repeat(13,minmax(48px,1fr)); grid-template-rows:30px repeat(var(--bb-string-count,6),40px); gap:0; width:100%; min-width:735px; padding:8px 10px 16px; box-sizing:border-box; background:repeating-linear-gradient(1deg,transparent 0 6px,#ffffff03 7px 8px),linear-gradient(100deg,#312720,#211c19); }
body.bb-studio .bb-mobile-fret-corner,body.bb-studio .bb-mobile-fret-number,body.bb-studio .bb-mobile-string-label { display:flex; align-items:center; justify-content:center; font:600 11px 'Segoe UI',sans-serif; color:#c1b5a7; }
body.bb-studio .bb-mobile-fret-corner,body.bb-studio .bb-mobile-string-label { position:sticky; left:0; z-index:3; background:#2d251f; border:0; border-radius:0; }
body.bb-studio .bb-mobile-fret-number { position:relative; }
body.bb-studio .bb-mobile-fret-number.is-marker::after { content:''; width:4px; height:4px; position:absolute; bottom:1px; border-radius:50%; background:var(--studio-accent); }
body.bb-studio .bb-mobile-fret { position:relative; display:grid; place-items:center; width:100%; min-width:0; min-height:40px; padding:0; border:0; border-right:2px solid #79736a; border-radius:0; background:transparent; box-shadow:none; color:#d7d2c9; cursor:pointer; touch-action:manipulation; }
body.bb-studio .bb-mobile-fret::before { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:#9a968a; box-shadow:0 1px 2px #000; pointer-events:none; }
body.bb-studio .bb-mobile-fret span { position:relative; z-index:1; display:grid; place-items:center; min-width:26px; height:25px; padding:0 3px; border-radius:50%; background:#302a23; color:#c5bcb0; font:500 10px 'Segoe UI',sans-serif; }
body.bb-studio .bb-mobile-fret.is-open { border-right:4px solid #d7c7ac; }
body.bb-studio .bb-mobile-fret.is-open span { background:var(--studio-accent); color:#282019; }
body.bb-studio .bb-mobile-fret:hover span,body.bb-studio .bb-mobile-fret.is-playing span { background:var(--studio-accent); color:#201b18; box-shadow:0 0 16px #edc48740; }
body.bb-studio .bb-mobile-fret.is-playing { transform:none; background:#edc48715; }
body.bb-studio .bb-hide-note-labels .bb-mobile-fret:not(.is-open) span { opacity:0; }
body.bb-studio .bb-hide-note-labels .bb-mobile-fret:hover span,body.bb-studio .bb-hide-note-labels .bb-mobile-fret.is-playing span { opacity:1; }
.bb-studio-board-footer { display:flex; justify-content:space-between; gap:12px; margin-top:16px; color:#91979e; font-size:11px; letter-spacing:.3px; }
.bb-studio-board-footer strong { color:var(--studio-accent); font-weight:500; }
html body.bb-studio .piano-drop-container .guitarbuttons { order:-10; display:flex!important; flex-wrap:wrap!important; justify-content:flex-start!important; align-items:center!important; gap:8px!important; width:100%!important; max-width:none!important; min-height:0!important; height:auto!important; margin:0 0 18px!important; padding:16px 24px!important; position:static!important; float:none!important; border:1px solid #383b3e!important; border-top:0!important; border-radius:0 0 14px 14px!important; background:#1a1d20!important; box-shadow:none!important; box-sizing:border-box; }
html body.bb-studio .piano-drop-container .guitarbuttons > * { position:static!important; float:none!important; margin:0!important; width:auto!important; min-width:0!important; max-width:100%!important; min-height:0!important; }
html body.bb-studio .piano-drop-container .guitarbuttons button { position:static!important; float:none!important; width:auto!important; height:auto!important; min-height:40px!important; padding:9px 14px!important; margin:0!important; border:1px solid #42474d!important; border-radius:7px!important; background:#25292e!important; color:#e1e3e5!important; box-shadow:none!important; font:600 12px 'Segoe UI',sans-serif!important; }
html body.bb-studio .piano-drop-container .guitarbuttons #start { background:var(--studio-accent)!important; color:#1f2021!important; border-color:var(--studio-accent)!important; padding-inline:23px!important; }
html body.bb-studio .piano-drop-container .guitarbuttons #stop { color:#e9b0a4!important; }
html body.bb-studio .piano-drop-container .guitarbuttons form { display:flex!important; align-items:center!important; gap:7px; }
html body.bb-studio .piano-drop-container .guitarbuttons input[type=number] { position:static!important; width:65px!important; height:40px!important; min-height:40px!important; padding:6px!important; margin:0!important; border:1px solid #41464c; border-radius:6px; background:#101214; color:#ddd; font-size:13px; box-sizing:border-box; }
html body.bb-studio .piano-drop-container .guitarbuttons #bb-volume-wrap { display:flex!important; flex-wrap:wrap; gap:6px; padding:0!important; color:#b7bdc4!important; font-size:12px!important; }
html body.bb-studio .guitarbuttons #bb-glow-wrap { display:none!important; }
body.bb-studio .bb-studio-notes { order:1; margin-bottom:12px; padding:0; border:1px solid #33383e; border-radius:9px; background:#191c20; }
.bb-studio-notes summary { padding:16px 20px; cursor:pointer; font-size:13px; color:#d4d6d9; }
body.bb-studio .piano-drop-container .guitarforms,body.bb-studio .piano-drop-container .guitarforms form { display:flex!important; flex-direction:column; position:static!important; width:100%!important; max-width:none!important; height:auto!important; margin:0!important; gap:10px; box-sizing:border-box; float:none; }
body.bb-studio .piano-drop-container .guitarforms { padding:0 20px 20px!important; }
body.bb-studio .piano-drop-container #PlayNotes { position:static!important; width:100%!important; height:85px!important; margin:0!important; padding:12px!important; box-sizing:border-box; border:1px solid #3e434a; border-radius:7px; background:#101214; color:#c1c6ce; font:13px/1.5 monospace; resize:vertical; box-shadow:none; }
body.bb-studio .piano-drop-container #songtitle { position:static!important; margin:0!important; width:auto!important; color:#c5cbd3!important; font:13px/1.5 'Segoe UI',sans-serif!important; text-align:left!important; }
body.bb-studio .bb-mobile-tools-shell { display:block; order:2; width:100%; max-width:none; margin:0 0 12px; }
html body.bb-studio #bb-mobile-tools-toggle { width:100%; min-height:50px; padding:14px 20px; color:#d4d6d9; background:#191c20; border:1px solid #33383e; border-radius:9px; font:600 13px 'Segoe UI',sans-serif; text-align:left; cursor:pointer; }
body.bb-studio .bb-mobile-tools-status { display:block; color:#b2b6bc; font-size:12px; }
html body.bb-studio #bb-deck { order:3; width:100%!important; max-width:none!important; margin:0 0 16px!important; border:1px solid #383e46!important; border-radius:10px!important; background:#191c20!important; box-sizing:border-box; }
html:not(.bb-mobile-tools-open) body.bb-studio #bb-deck { display:none!important; }
html.bb-mobile-tools-open body.bb-studio #bb-deck { display:block!important; }
body.bb-studio #bb-deck .bb-deck-rail { max-height:320px; overflow-y:auto; background:#191c20!important; }
body.bb-studio #bb-deck .bb-deck-tab { border-radius:5px!important; box-shadow:none!important; }
.bb-studio-extra-tools { display:flex; gap:8px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid #33383e; }
.bb-studio-extra-tools button { position:static!important; float:none!important; margin:0!important; border:1px solid #484c52; border-radius:6px; padding:10px 14px; color:#ddd; background:#262a30; cursor:pointer; }
.bb-studio-tempo-label { color:#aab0b7; font-size:11px; }
body.bb-studio .bb-mobile-strum-launch { display:block; order:5; max-width:none; margin:10px 0; }
body.bb-studio #bb-mobile-strum-launch { display:flex; align-items:center; gap:12px; width:100%; min-height:62px; padding:14px 20px; color:#d9d4cb; background:#22221e; border:1px solid #424137; border-radius:9px; box-shadow:none; text-align:left; cursor:pointer; }
body.bb-studio .bb-mobile-strum-launch-icon { display:none; }
body.bb-studio .bb-mobile-strum-launch-copy { display:flex; flex:1; flex-direction:column; gap:3px; }
body.bb-studio .bb-mobile-strum-launch-copy strong { font-size:14px; text-transform:none; }
body.bb-studio .bb-mobile-strum-launch-copy small { font-size:12px; color:#a9a79c; }
body.bb-studio .bb-pwa-install { order:6; max-width:460px; align-self:center; margin:16px auto; }
body.bb-studio .bb-studio-classic { display:none; order:-19; width:100%; overflow-x:auto; background:#1a1d20; border:1px solid #383b3e; box-sizing:border-box; }
body.bb-studio.bb-classic-view .bb-studio-classic { display:block; }
body.bb-studio.bb-classic-view .bb-mobile-fret-scroll { display:none; }
body.bb-studio .bb-studio-classic .guitardiv,body.bb-studio .bb-studio-classic .electricguitardiv,body.bb-studio .bb-studio-classic .banjodiv { display:block!important; position:relative!important; top:0!important; margin:0 auto!important; flex:none; }
body.bb-studio #bb-related-apps { position:static; clear:both; width:calc(100% - 48px); max-width:1280px; margin:24px auto 40px; background:#191c20; box-sizing:border-box; box-shadow:none; }
body.bb-studio .about,body.bb-studio .homepage-content { float:none; width:calc(100% - 48px); max-width:1280px; box-sizing:border-box; margin:24px auto; }
body.bb-studio :is(button,a,input,summary):focus-visible { outline:2px solid #edc487; outline-offset:3px; }
@media(max-width:700px) {
 body.bb-studio .piano-drop-container { width:calc(100% - 24px)!important; margin:18px auto 24px!important; }
 .bb-studio-head { padding-top:0; }
 .bb-studio-instruments { gap:5px; margin-top:16px; }
 .bb-studio-instruments a { padding:9px 11px; font-size:12px; }
 body.bb-studio .bb-mobile-fretboard { padding:16px 12px; }
 body.bb-studio .bb-mobile-fretboard-head { align-items:flex-start; flex-direction:column; gap:12px; margin-bottom:14px; }
 body.bb-studio .bb-mobile-fret-grid { grid-template-rows:30px repeat(var(--bb-string-count,6),44px); }
 html body.bb-studio .piano-drop-container .guitarbuttons { padding:12px!important; gap:7px!important; }
 .bb-studio-board-footer { font-size:10px; }
 body.bb-studio #bb-related-apps,body.bb-studio .about,body.bb-studio .homepage-content { width:calc(100% - 24px); }
}
.bb-studio-faq { padding:24px; background:#191c20; border:1px solid #383e45; border-radius:12px; color:#d4d6d9; }
body.bb-studio .bb-studio-faq { font-size:16px; text-align:left; }
body.bb-studio .bb-studio-faq h2 { margin:0 0 12px; color:#eef0f3; text-align:left; font-size:24px; }
.bb-studio-faq details { border-top:1px solid #383e45; padding:16px 0; }
.bb-studio-faq summary { cursor:pointer; font-weight:600; line-height:1.5; }
.bb-studio-faq details p { max-width:80ch; margin:12px 0 0; line-height:1.7; color:#b9c1ca; }
.bb-studio-faq summary:focus-visible { outline:2px solid #8bdded; outline-offset:4px; }
.bb-studio-pick-control { flex-basis:100%; }
body.bb-studio .bb-studio-view-controls #bb-studio-pick { display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; min-height:52px; padding:12px 16px; border:1px solid #596773; border-radius:9px; background:#252d35; color:#e5ebef; cursor:pointer; }
body.bb-studio .bb-studio-view-controls #bb-studio-pick[aria-pressed="true"] { background:#143842; border-color:#62d3e5; color:#b8f4ff; box-shadow:inset 3px 0 #62d3e5; }
#bb-studio-pick strong { font-size:14px; white-space:nowrap; }
#bb-studio-pick span { font-size:12px; }