/* ─────────────────────────────────────────────────────────────
   bn-fretboard.css — BrightNote premium fretboard component.
   Pairs with bn-fretboard.js. Design language: warm wood, soft
   charcoal glass, BrightNote green, one gold accent for roots.
   Also re-skins the shared transport (.plbar) so piano + guitar
   players feel like siblings.
   ───────────────────────────────────────────────────────────── */

/* ============ the instrument card ============ */
.bnf-shell{
  position:relative;
  background:linear-gradient(180deg,#1c1f26 0%,#15171c 60%,#121317 100%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:22px;
  padding:16px 18px 12px;
  box-shadow:0 24px 60px -18px rgba(10,12,18,.55), 0 2px 8px rgba(10,12,18,.25), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
}
.bnf-shell::before{ /* faint top sheen */
  content:""; position:absolute; inset:0 0 auto 0; height:120px; pointer-events:none;
  background:radial-gradient(120% 100% at 50% -30%, rgba(255,255,255,.07), transparent 60%);
}
.bnf-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 2px 10px;
}
.bnf-title{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Nunito,sans-serif;
  font-size:13px; font-weight:600; letter-spacing:.02em; color:#e8eaf0;
}
.bnf-title .bnf-key{
  display:inline-block; margin-left:8px; padding:2px 9px; border-radius:8px;
  background:rgba(198,151,29,.16); color:#e9c25c; font-weight:700; font-size:12px; letter-spacing:.04em;
}
.bnf-title .bnf-sub{ color:#8b93a3; font-weight:500; margin-left:8px; font-size:12px; }
.bnf-tools{ display:flex; align-items:center; gap:10px; }

/* wood swatches */
.bnf-woods{ display:flex; gap:6px; align-items:center; }
.bnf-wood-dot{
  width:16px; height:16px; border-radius:50%; cursor:pointer; border:2px solid transparent;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, box-shadow .22s;
}
.bnf-wood-dot:hover{ transform:scale(1.18); }
.bnf-wood-dot.on{ border-color:rgba(255,255,255,.75); box-shadow:0 0 0 3px rgba(255,255,255,.12); }
.bnf-wood-dot[data-wood="rosewood"]{ background:radial-gradient(circle at 35% 30%, #5a3a26, #2e1d12); }
.bnf-wood-dot[data-wood="ebony"]{ background:radial-gradient(circle at 35% 30%, #2c2926, #100e0c); }
.bnf-wood-dot[data-wood="maple"]{ background:radial-gradient(circle at 35% 30%, #e8c894, #b98d55); }

.bnf-iconbtn{
  appearance:none; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05);
  color:#c9cede; border-radius:10px; padding:5px 11px; font-size:12px; font-weight:600;
  font-family:inherit; cursor:pointer; letter-spacing:.02em;
  transition:background .22s, transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.bnf-iconbtn:hover{ background:rgba(255,255,255,.1); transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.3); }
.bnf-iconbtn:active{ transform:translateY(0) scale(.97); }

/* neck scroller */
.bnf-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; border-radius:14px; }
.bnf-scroll::-webkit-scrollbar{ height:6px; }
.bnf-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:3px; }
svg.bnf{ display:block; min-width:760px; width:100%; height:auto; }
svg.bnf.bnf-flip{ transform:scaleX(-1); }
svg.bnf.bnf-flip text{ transform:scaleX(-1); transform-box:fill-box; transform-origin:center; }

.bnf-caption{
  margin:8px 4px 2px; font-size:12px; font-weight:500; letter-spacing:.02em; color:#8b93a3;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Nunito,sans-serif;
  min-height:15px; transition:opacity .25s;
}

/* ============ hover hint card ============ */
.bnf-tip{
  position:absolute; z-index:5; pointer-events:none;
  background:rgba(24,27,33,.92); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding:9px 12px; min-width:120px;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6);
  opacity:0; transform:translateY(4px) scale(.97);
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.9,.3,1.2);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Nunito,sans-serif;
}
.bnf-tip.show{ opacity:1; transform:translateY(0) scale(1); }
.bnf-tip .t0{ font-size:15px; font-weight:700; color:#fff; letter-spacing:.01em; }
.bnf-tip .t0 .deg{ margin-left:7px; font-size:11px; font-weight:700; color:#e9c25c; letter-spacing:.05em; text-transform:uppercase; }
.bnf-tip .tl{ font-size:11.5px; color:#9aa2b2; margin-top:3px; font-weight:500; }

/* ============ minimap navigator ============ */
.bnf-mini{
  position:absolute; z-index:4; top:52px; right:22px;
  background:rgba(18,20,25,.78); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1); border-radius:10px;
  padding:5px 7px 3px;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.55);
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.9,.3,1.1);
}
.bnf-mini.show{ opacity:1; transform:translateY(0); }
.bnf-mini svg{ display:block; }

/* ============ note markers — tactile ============ */
.bnf .fdot{ cursor:pointer; transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s, filter .25s; }
.bnf .bnf-sc{ transition:transform .24s cubic-bezier(.25,1.2,.35,1); transform-box:fill-box; transform-origin:center; }
.bnf .fdot:hover{ filter:drop-shadow(0 3.5px 4px rgba(0,0,0,.42)); }
.bnf .fdot:hover .bnf-sc{ transform:translateY(-1.6px) scale(1.15); }   /* the note gently rises */
.bnf .fdot:active .bnf-sc{ transform:translateY(0) scale(.93); }
.bnf .fdot .bnf-sc.sprung{ animation:bnfSpring .5s cubic-bezier(.3,1.4,.4,1); }
@keyframes bnfSpring{ 0%{transform:scale(.9)} 40%{transform:scale(1.12)} 70%{transform:scale(.97)} 100%{transform:scale(1)} }
.bnf .fdot .bnf-lb{ pointer-events:none; user-select:none; }
.bnf .bnf-halo{ opacity:0; transition:opacity .3s; }
.bnf .fdot:hover .bnf-halo{ opacity:.35; }
.bnf .bnf-heatring{ opacity:0; transition:opacity .5s; }
.bnf .fdot.heatpop .bnf-sc{ animation:bnfSpring .5s cubic-bezier(.3,1.4,.4,1); }

/* entering / leaving (view morph) */
.bnf .fdot.in{ opacity:0; }
.bnf .fdot.in .bnf-sc{ transform:scale(.4); }
.bnf .fdot.out{ opacity:0 !important; pointer-events:none; }
.bnf .fdot.out .bnf-sc{ transform:scale(.4); }

/* playback: the whole neck comes alive — everything dims, the lesson glows.
   lit = now · nxt = next · ghost = coming soon · done = just played */
.bnf.playing .fdot{ opacity:.34 !important; }
.bnf.playing .fdot .bnf-sc{ animation:bnfBreathe 3.2s ease-in-out infinite; }
@keyframes bnfBreathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.035)} }
.bnf.playing .fdot.ghost{ opacity:.6 !important; }
.bnf.playing .fdot.nxt{ opacity:.85 !important; }
.bnf.playing .fdot.done{ opacity:.5 !important; transition:opacity .9s ease-out; }
.bnf.playing .fdot.lit{ opacity:1 !important; }
/* attack → settle, like a struck note; the halo decay (JS) carries the sustain */
.bnf .fdot.lit .bnf-sc{ animation:bnfAttack .5s cubic-bezier(.25,1.1,.4,1) forwards; }
.bnf .fdot.lit .bnf-c{ filter:brightness(1.16) drop-shadow(0 1.6px 1.4px rgba(0,0,0,.5)); }
@keyframes bnfAttack{
  0%{ transform:scale(1); }
  30%{ transform:scale(1.22); }
  65%{ transform:scale(.99); }
  100%{ transform:scale(1.06); }
}
@keyframes bnfPulse{ 0%,100%{ transform:scale(1.05); } 45%{ transform:scale(1.22); } }
/* practice camera: NEXT note wears a cool blue outline — get ready */
.bnf .fdot.nxt .bnf-halo{ opacity:0; }
.bnf .fdot.nxt .bnf-c{ stroke:#5aa9ff !important; stroke-width:2.4 !important; }
.bnf .fdot.nxt .bnf-sc::after{ content:""; }
.bnf-pick{ animation:bnfPickUp .6s ease-out forwards; }
@keyframes bnfPickUp{ 0%{opacity:0; transform:translateY(3px)} 25%{opacity:.95; transform:translateY(0)} 100%{opacity:0; transform:translateY(-5px)} }
/* the WHY chip — a two-second fact, then gone */
.bnf-infochip{
  position:absolute; z-index:4; top:52px; left:22px;
  background:rgba(24,27,33,.88); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12); border-radius:9px;
  padding:5px 11px; font-size:11.5px; font-weight:600; letter-spacing:.03em; color:#c9cede;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Nunito,sans-serif;
  opacity:0; transform:translateY(-3px); pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.9,.3,1.1);
}
.bnf-infochip.show{ opacity:1; transform:translateY(0); }
/* ambient neck glow while playing */
.bnf .bnf-ambient{ opacity:0; transition:opacity .8s ease; pointer-events:none; }
.bnf.playing .bnf-ambient{ opacity:.16; }

/* string illumination + shimmer while its note sounds */
.bnf .bnf-strline{ transition:filter .25s, opacity .25s; }
.bnf .bnf-string.litstr .bnf-strline{ filter:drop-shadow(0 0 3px rgba(88,201,143,.9)) brightness(1.5); }
.bnf .bnf-string.shimmer .bnf-strline{ animation:bnfShimmer .34s ease-out; }
@keyframes bnfShimmer{
  0%{ transform:translateY(0); }
  25%{ transform:translateY(1.1px); }
  50%{ transform:translateY(-.9px); }
  75%{ transform:translateY(.5px); }
  100%{ transform:translateY(0); }
}

/* animated travel path between notes */
.bnf .bnf-seg{ opacity:.9; transition:opacity .6s ease-out; }
.bnf .bnf-seg.fade{ opacity:0; }

/* ============ grouped controls ============ */
.bnf-groups{
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:flex-start;
  margin:14px 2px 0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Nunito,sans-serif;
}
.bnf-group{ display:flex; flex-direction:column; gap:6px; }
.bnf-glabel{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#7c8494; padding-left:2px;
}
.bnf-segs{
  position:relative;
  display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px;
  background:rgba(127,135,150,.13); border-radius:11px;
  backdrop-filter:blur(8px);
}
/* Apple-style segments: a single glass thumb slides beneath the labels */
.bnf-thumb{
  position:absolute; z-index:0; border-radius:8px;
  background:linear-gradient(180deg,#ffffff,#f4f6f9);
  box-shadow:0 2px 7px rgba(15,20,30,.22), inset 0 1px 0 rgba(255,255,255,.9);
  transition:left .32s cubic-bezier(.3,1.25,.4,1), top .32s cubic-bezier(.3,1.25,.4,1),
             width .32s cubic-bezier(.3,1.25,.4,1), height .32s;
  pointer-events:none;
}
.bnf-segs .tog{
  position:relative; z-index:1;
  border:0 !important; background:transparent !important; color:#5d6674 !important;
  border-radius:8px !important; padding:5px 11px !important;
  font-size:12px !important; font-weight:600 !important; letter-spacing:.01em;
  transition:color .25s, transform .22s cubic-bezier(.2,.8,.2,1) !important;
  box-shadow:none !important;
}
.bnf-segs .tog:hover{ color:#2c3442 !important; transform:translateY(-1px); }
.bnf-segs .tog.on{ background:transparent !important; color:#1c2430 !important; box-shadow:none !important; }
/* until the thumb is placed by JS, keep a fallback white pill */
.bnf-segs:not(.thumbed) .tog.on{ background:#fff !important; box-shadow:0 2px 6px rgba(15,20,30,.18) !important; }

/* ============ transport — Logic-style, shared by piano + guitar ============ */
.plbar{
  display:flex !important; align-items:center !important; flex-wrap:wrap; gap:10px !important;
  background:linear-gradient(180deg,#23262e,#191b21) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:16px !important; padding:10px 14px !important;
  box-shadow:0 12px 30px -12px rgba(10,12,18,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.plbar .play{
  width:46px !important; height:46px !important; border-radius:50% !important; border:0 !important;
  background:radial-gradient(circle at 32% 28%, #43c084, #2fa36b 55%, #1f7d50) !important;
  color:#fff !important; font-size:17px !important; cursor:pointer;
  box-shadow:0 4px 14px rgba(47,163,107,.45), inset 0 1px 0 rgba(255,255,255,.35) !important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s !important;
  display:inline-flex; align-items:center; justify-content:center;
}
.plbar .play:hover{ transform:scale(1.07); box-shadow:0 6px 20px rgba(47,163,107,.6), inset 0 1px 0 rgba(255,255,255,.35) !important; }
.plbar .play:active{ transform:scale(.95); }
.plbar .tempo{ display:flex; align-items:center; gap:9px; color:#c9cede !important; }
.plbar .tempo .bpmlab, .plbar .tempo b{
  color:#e8eaf0 !important; font-size:12.5px !important; font-weight:600 !important;
  font-variant-numeric:tabular-nums; letter-spacing:.02em; min-width:56px; display:inline-block;
}
.plbar input[type=range]{ accent-color:#2fa36b; width:120px; }
.plbar .tog{
  border:1px solid rgba(255,255,255,.09) !important; background:rgba(255,255,255,.04) !important;
  color:#9aa2b2 !important; border-radius:9px !important; padding:6px 12px !important;
  font-size:12px !important; font-weight:600 !important;
  transition:background .22s, color .22s, border-color .22s, transform .22s !important;
  box-shadow:none !important;
}
.plbar .tog:hover{ background:rgba(255,255,255,.09) !important; color:#dfe3ec !important; transform:translateY(-1px); }
.plbar .tog.on{
  background:rgba(47,163,107,.2) !important; border-color:rgba(47,163,107,.55) !important; color:#58c98f !important;
}

/* measure-loop hint + selection glow (staff) */
.plselhint{ font-size:11.5px; color:#8b93a3; }
.selbar, .selmeasure{ transition:opacity .25s; }

/* ============ performance mode ============ */
.bnf-perf .overlays, .bnf-perf .charline, .bnf-perf .deg, .bnf-perf .hint,
.bnf-perf .plselhint, .bnf-perf .plntn{ display:none !important; }
.bnf-perf{ background:#0e0f13; padding:26px !important; border-radius:0; min-height:100vh; }
.bnf-perf .bnf-shell{ max-width:1180px; margin:0 auto 18px; }
.bnf-perf .plbar{ max-width:1180px; margin:0 auto; }

/* ============ keyboard sibling (bn-keyboard.js) ============ */
svg.bnk{ min-width:540px; margin:0 auto; }
.bnk .bnk-key{ transition:transform .32s cubic-bezier(.28,1.6,.4,1), filter .2s; cursor:pointer; } /* springy release */
.bnk .bnk-key.pressed{ transform:translateY(2.6px); transition:transform .08s ease-in, filter .15s; } /* fast press… */
.bnk .bnk-key.white.pressed{ filter:brightness(.96); }
.bnk .bnk-key.keylit{ filter:drop-shadow(0 0 7px rgba(88,201,143,.8)) brightness(1.05); }
.bnk .bnk-key.white.keylit{ filter:drop-shadow(0 0 7px rgba(88,201,143,.7)) brightness(.99); }
.bnk .kdot{ cursor:pointer; transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s, filter .25s; }
.bnk .kdot .bnf-sc{ transition:transform .24s cubic-bezier(.25,1.2,.35,1); transform-box:fill-box; transform-origin:center; }
.bnk .kdot:hover{ filter:drop-shadow(0 3.5px 4px rgba(0,0,0,.42)); }
.bnk .kdot:hover .bnf-sc{ transform:translateY(-1.6px) scale(1.15); }
.bnk .kdot:active .bnf-sc{ transform:translateY(0) scale(.93); }
.bnk .kdot.in{ opacity:0; }
.bnk .kdot.in .bnf-sc{ transform:scale(.4); }
.bnk .kdot.out{ opacity:0 !important; pointer-events:none; }
.bnk .kdot.out .bnf-sc{ transform:scale(.4); }
.bnk.playing .kdot{ opacity:.34 !important; }
.bnk.playing .kdot .bnf-sc{ animation:bnfBreathe 3.2s ease-in-out infinite; }
.bnk.playing .kdot.ghost{ opacity:.6 !important; }
.bnk.playing .kdot.nxt{ opacity:.85 !important; }
.bnk.playing .kdot.done{ opacity:.5 !important; transition:opacity .9s ease-out; }
.bnk.playing .kdot.lit{ opacity:1 !important; }
.bnk .kdot.lit .bnf-sc{ animation:bnfAttack .5s cubic-bezier(.25,1.1,.4,1) forwards; }
.bnk .kdot.lit circle:first-of-type{ filter:brightness(1.14); }
.bnk .kdot.nxt .bnf-halo{ opacity:0; }
.bnk .kdot.nxt .bnf-sc circle:first-of-type{ stroke:#5aa9ff !important; stroke-width:2.2 !important; }

/* ============ generated lesson pages (.bn-live via bn-lesson-live.js) ============ */
.bn-live .controls{
  background:linear-gradient(180deg,#23262e,#191b21) !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
  border-radius:0 0 14px 14px;
  padding:12px 14px !important; gap:10px !important;
}
.bn-live .controls .play{
  min-width:0 !important; width:46px; height:46px; border-radius:50% !important;
  background:radial-gradient(circle at 32% 28%, #43c084, #2fa36b 55%, #1f7d50) !important;
  color:#fff !important; font-size:15px !important; padding:0 !important;
  box-shadow:0 4px 14px rgba(47,163,107,.45), inset 0 1px 0 rgba(255,255,255,.35) !important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s !important;
  display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden; white-space:nowrap; text-indent:0;
  font-size:0 !important;
}
.bn-live .controls .play::before{ content:"▶"; font-size:16px; }
.bn-live .controls .play.on::before, .bn-live .controls .play[data-on]::before{ content:"■"; }
.bn-live .controls .play:hover{ transform:scale(1.07); }
.bn-live .controls .play:active{ transform:scale(.95); }
.bn-live .controls .stop, .bn-live .controls .pause{
  background:rgba(255,255,255,.06) !important; color:#c9cede !important;
  border:1px solid rgba(255,255,255,.1) !important; border-radius:10px !important;
  transition:background .2s, transform .2s !important;
}
.bn-live .controls .stop:hover, .bn-live .controls .pause:hover{ background:rgba(255,255,255,.12) !important; }
.bn-live .controls .ctl{ color:#9aa2b2 !important; font-size:12px; font-weight:600; }
.bn-live .controls .ctl b, .bn-live .controls .ctl span{ color:#c9cede !important; font-variant-numeric:tabular-nums; }
.bn-live .controls input[type=range]{ accent-color:#2fa36b; }
.bn-live .controls .tgl{
  background:rgba(255,255,255,.04) !important; color:#9aa2b2 !important;
  border:1px solid rgba(255,255,255,.09) !important; border-radius:9px !important;
  font-weight:600 !important; transition:background .2s, color .2s, border-color .2s !important;
}
.bn-live .controls .tgl:hover{ background:rgba(255,255,255,.09) !important; color:#dfe3ec !important; }
.bn-live .controls .tgl.on{
  background:rgba(47,163,107,.2) !important; border-color:rgba(47,163,107,.55) !important; color:#58c98f !important;
}
/* Logic-style icon transport: big round symbols, no labels */
.bn-live .controls .stop, .bn-live .controls .pause{
  width:40px; height:40px; border-radius:50% !important; padding:0 !important;
  font-size:0 !important; display:inline-flex; align-items:center; justify-content:center;
}
.bn-live .controls .stop::before{ content:"■"; font-size:13px; }
.bn-live .controls .pause::before{ content:"❚❚"; font-size:10.5px; letter-spacing:1.5px; }
.bn-tonegrp{ display:inline-flex; align-items:center; gap:8px; }
.bn-seglabel{
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#7c8494;
}
.bn-live .bn-instseg{ background:rgba(255,255,255,.08); }
.bn-live .bn-instseg .tog{ color:#9aa2b2 !important; }
.bn-live .bn-instseg .tog:hover{ color:#dfe3ec !important; }
.bn-live .bn-instseg .tog.on{ color:#1c2430 !important; }
.bn-live .bn-instseg:not(.thumbed) .tog.on{ background:#fff !important; }
.bn-fret-holder{ margin:12px 12px 4px; }
.bn-fret-holder .bnf-shell{ padding:12px 14px 10px; }

@media (prefers-reduced-motion: reduce){
  .bnf .fdot, .bnf .bnf-sc, .bnf-segs .tog, .plbar .play{ transition:none !important; animation:none !important; }
  .bnf .fdot.lit .bnf-sc{ transform:scale(1.15); }
}

/* ── BrightNote tweaks ──────────────────────────────────────────
   • Stop reads as a live, tappable control (colored, not grayed).
   • Pause removed — Play/Stop is enough for young students.
   • Fretboard kept modest so the notation stays the focus.        */
.bn-live .controls .stop{
  background:radial-gradient(circle at 32% 28%, #ff8a7e, #e8544f 58%, #c8403c) !important;
  color:#fff !important; border:0 !important;
  box-shadow:0 4px 13px rgba(226,77,77,.5), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.bn-live .controls .stop::before{ content:"■"; font-size:13px; color:#fff !important; }
.bn-live .controls .stop:hover{ transform:scale(1.07); box-shadow:0 7px 20px rgba(226,77,77,.6) !important; }
.bn-live .controls .stop:disabled{ opacity:.6 !important; }
.bn-live .controls .pause{ display:none !important; }

/* ── Lesson polish: bigger, comfortably-floating notation + simpler transport ──
   The score is cropped to its content in JS (bn-groove) so it hugs the music;
   here we give it generous vertical breathing room, center it in the card, and
   never clip descenders/ledger lines. Buttons become clean flat solids. */
.bn-live .svgbox{
  overflow:visible;                 /* never crop stems / ledger lines / descenders */
  padding:28px 18px;                /* generous breathing room above & below */
  display:flex; align-items:center; justify-content:center;
}
.bn-live .svgbox > svg{
  display:block; width:100%; height:auto; max-width:100%;
  transform:none !important;
}
.bn-live .controls .play{
  width:56px !important; height:56px !important;
  background:#2fa36b !important;
  box-shadow:0 3px 9px rgba(47,163,107,.38) !important;
}
.bn-live .controls .play::before{ font-size:19px !important; }
.bn-live .controls .stop{
  width:46px !important; height:46px !important;
  background:#e8544f !important;
  box-shadow:0 3px 9px rgba(226,77,77,.38) !important;
}
.bn-live .controls .stop::before{ font-size:16px !important; }
.bn-fret-holder{ max-width:520px !important; margin:12px auto 6px !important; }
.bn-focusbtn .bnfoc-ic{ font-size:14px; line-height:1; }

/* ══════════════ Practice Studio — one immersive instrument ══════════════
   Notation, fretboard and transport share a single lit stage — no cards,
   no separators, no connector graphics. Depth comes from light + shadow. */
.bn-focus{
  position:fixed; inset:0; z-index:99999;
  background:
    radial-gradient(1100px 460px at 50% -4%, rgba(158,172,214,.16), rgba(0,0,0,0) 58%),
    radial-gradient(900px 520px at 50% 40%, rgba(90,104,140,.10), rgba(0,0,0,0) 66%),
    linear-gradient(180deg, #23272f 0%, #191c23 46%, #101217 78%, #0a0c0f 100%);
  display:flex; align-items:center; justify-content:center;
  /* generous bottom padding keeps the console clear of the macOS Dock / browser chrome */
  padding:clamp(12px,2.4vh,24px) clamp(16px,3vw,44px) calc(clamp(26px,5vh,58px) + env(safe-area-inset-bottom, 0px));
  opacity:0; transform:scale(1.01); pointer-events:none;
  transition:opacity .42s ease, transform .48s cubic-bezier(.2,.85,.25,1);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Segoe UI',system-ui,sans-serif;
}
/* cinematic vignette + faint top light */
.bn-focus::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.035), rgba(0,0,0,0) 42%);
  box-shadow:inset 0 0 320px 90px rgba(0,0,0,.6); }
.bn-focus.show{ opacity:1; transform:scale(1); pointer-events:auto; }
body.bn-focus-lock{ overflow:hidden; }

.bnfoc-room{
  position:relative; z-index:1; width:min(1320px,100%); max-height:100%; margin:0 auto;
  display:flex; flex-direction:column; align-items:stretch;
  gap:clamp(2px,.6vh,10px);           /* tight — notation flows straight into the fretboard */
}
.bnfoc-top{ flex:0 0 auto; }
.bnfoc-note{ flex:0 0 auto; }
.bnfoc-board{ flex:0 1 auto; min-height:0; }
.bnfoc-ctl{ flex:0 0 auto; }
/* a soft, STATIC stage glow behind the paper — the "stand light". Never animates. */
.bnfoc-room::before{
  content:""; position:absolute; left:50%; top:3%; width:min(1250px,98%); height:52%;
  transform:translateX(-50%); pointer-events:none; z-index:-1;
  background:radial-gradient(60% 60% at 50% 30%, rgba(255,244,222,.06), rgba(0,0,0,0) 72%);
  filter:blur(34px);
}

/* — merged header — */
.bnfoc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:0 8px 6px; }
.bnfoc-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:#7b8498; }
.bnfoc-titlerow{ display:flex; align-items:baseline; gap:14px; margin-top:5px; flex-wrap:wrap; }
.bnfoc-title{ color:#f4f6fb; font-weight:800; letter-spacing:-.015em; font-size:clamp(21px,3vh,30px); line-height:1.02;
  text-shadow:0 1px 20px rgba(150,170,220,.22); }
.bnfoc-key{ color:#9aa3b6; font-size:14px; font-weight:600; }
.bnfoc-exit{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#e6ebf3; border-radius:12px;
  padding:9px 17px; font-weight:600; font-size:13px; cursor:pointer; transition:background .18s, transform .18s, box-shadow .18s; backdrop-filter:blur(8px); white-space:nowrap; }
.bnfoc-exit:hover{ background:rgba(255,255,255,.13); transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.4); }
.bnfoc-topright{ display:flex; align-items:center; gap:12px; }
/* Focus ↔ Flow mode toggle — segmented, matches the console's segmented controls */
.bnfoc-modeseg{ display:inline-flex; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
  border-radius:12px; padding:3px; gap:2px; backdrop-filter:blur(8px); }
.bnfoc-modeseg button{ border:0; background:transparent; color:#aeb6c6; font:650 13px/1 -apple-system,system-ui,sans-serif;
  padding:7px 15px; border-radius:9px; cursor:pointer; transition:background .18s, color .18s; }
.bnfoc-modeseg button:hover{ color:#e6ebf3; }
.bnfoc-modeseg button.on{ background:#fff; color:#1c2430; box-shadow:0 1px 3px rgba(0,0,0,.3); }

/* dividers removed — connection is by light, not lines */
.bnfoc-div{ display:none; }

/* ── notation: an illuminated sheet of music on the dark stage ──
   The ONLY bright object in the room — warm ivory "paper" that hugs the notation,
   lifted off the dark stage by a soft shadow + a faint warm stand-light glow. Printed-
   black engraving for maximum readability. The paper is sacred: it never resizes,
   pulses, or glows during playback — only the active-note highlight moves. */
.bnfoc-note{ position:relative; align-self:center; overflow:hidden;
  max-width:min(1180px, 92vw);
  padding:clamp(12px,2vh,22px) clamp(24px,3vw,50px);
  border-radius:22px;
  background:linear-gradient(174deg, #fdfbf5 0%, #f6f1e6 100%);   /* warm ivory, not webpage-white */
  box-shadow:0 26px 70px rgba(0,0,0,.62),            /* elevation off the dark stage */
             0 0 44px rgba(255,240,214,.05),          /* faint warm stand-light spill */
             inset 0 1px 0 rgba(255,255,255,.6);      /* top edge catch-light */
}
/* Focus: paper hugs the notation (small piece → small paper, more measures → wider/taller).
   Flow: paper is a fixed reading window the strip scrolls through. */
.bn-focus.bnfoc-mode-focus .bnfoc-note{ width:-moz-fit-content; width:fit-content; }
.bn-focus.bnfoc-mode-flow  .bnfoc-note{ width:min(1180px,92vw); }
/* almost-invisible paper grain + a soft page sheen (static — never animates) */
.bnfoc-note::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 30%),
            radial-gradient(120% 90% at 50% -10%, rgba(255,250,240,.5), rgba(255,250,240,0) 55%); }
/* playhead cursor — FLOW mode only, while playing (gold, matches the highlight) */
.bnfoc-note::after{ content:""; position:absolute; left:50%; top:9%; height:82%; width:2.5px;
  transform:translateX(-50%); pointer-events:none; z-index:3; border-radius:3px; opacity:0;
  background:linear-gradient(180deg, rgba(200,150,40,0), rgba(200,150,40,.55) 18%, rgba(200,150,40,.55) 82%, rgba(200,150,40,0));
  transition:opacity .45s ease; }
.bn-focus.bnfoc-mode-flow.playing .bnfoc-note::after{ opacity:1; }
.bnfoc-scroll{ position:relative; z-index:2; overflow:hidden; scroll-behavior:auto; padding:0; max-width:100%; }
/* Focus: the scroll hugs the notation so the PAPER hugs it too (small piece → small paper) */
.bn-focus.bnfoc-mode-focus .bnfoc-scroll{ width:-moz-fit-content; width:fit-content; margin:0 auto; }
/* Flow scrolls horizontally + fades notes softly at the paper edges; Focus is fully static */
.bn-focus.bnfoc-mode-flow .bnfoc-scroll{ overflow-x:auto; overflow-y:hidden; will-change:scroll-position;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
.bnfoc-scroll::-webkit-scrollbar{ height:0; }
.bnfoc-note .svgbox{ background:transparent !important; border:0 !important; box-shadow:none !important; margin:0 auto !important; padding:0 !important; min-height:0 !important; display:block; width:-moz-fit-content; width:fit-content; }
.bnfoc-note .loading{ color:#8a8578 !important; }
/* printed-black engraving on the paper — currentColor drives Verovio's staff-line strokes */
.bn-focus .svgbox{ color:#14110c; }
/* cap notation height so TAB / long multi-line pieces scale to fit — never overflow */
.bn-focus .svgbox svg{ width:auto !important; height:auto !important;
  max-height:clamp(160px, 40vh, 460px) !important; filter:none !important; }   /* NO glow — the paper gives the contrast */
.bn-focus.bnfoc-mode-focus .svgbox svg{ max-width:100% !important; }
.bn-focus.bnfoc-mode-flow  .svgbox svg{ max-width:none !important; }
/* the printed part-name / page header have no place in the Studio */
.bn-focus .svgbox .label,
.bn-focus .svgbox .pgHead,
.bn-focus .svgbox .pgFoot{ display:none !important; }
/* solid black marks — printed sheet-music look (Hal Leonard).
   Apply the ink as an INHERITED fill on the svg (not directly on path/use), so noteheads —
   which are <use> refs to shared glyphs — inherit it AND can be overridden gold when highlighted.
   Directly filling `path`/`use` would pin the glyph definition black and block the highlight. */
.bn-focus .svgbox svg{ fill:#14110c; }
.bn-focus .svgbox svg line{ stroke:#14110c; stroke-opacity:1; }
.bn-focus .svgbox .nname{ fill:#4a4636 !important; }
.bn-focus .svgbox .cnt{ fill:#6b6552 !important; }
/* Active note = the exact unit-lesson gold highlight (#D9A441) — same colour students
   already know, and it pops against black-on-paper just like in the lessons. */
.bn-focus .svgbox g.note.hl .notehead,
.bn-focus .svgbox g.note.hl use,
.bn-focus .svgbox g.note.hl path,
.bn-focus .svgbox g.rest.hl use,
.bn-focus .svgbox g.rest.hl path,
.bn-focus .svgbox g.rest.hl rect,
.bn-focus .svgbox g.rest.hl polygon,
.bn-focus .svgbox g.mRest.hl use,
.bn-focus .svgbox g.mRest.hl path,
.bn-focus .svgbox g.mRest.hl rect,
.bn-focus .svgbox g.chord.hl use,
.bn-focus .svgbox g.chord.hl path{ fill:#D9A441 !important; stroke:#D9A441 !important; }
.bn-focus .svgbox g.note.hl,
.bn-focus .svgbox g.chord.hl,
.bn-focus .svgbox g.rest.hl,
.bn-focus .svgbox g.mRest.hl{ filter:drop-shadow(0 0 3px rgba(217,164,65,.85)); }
.bn-focus .svgbox text.cnt.hl{ fill:#D9A441 !important; font-weight:800; }

/* — fretboard: grows straight out of the notation, no card, no widget chrome — */
.bnfoc-board{ display:flex; align-items:center; justify-content:center; padding:0 2px; margin:0; }
.bnfoc-board .bn-fret-holder{ width:100% !important; max-width:100% !important; margin:0 auto !important;
  display:flex !important; justify-content:center !important; }
.bnfoc-board .bn-fret-holder .bnf-shell{ max-width:100% !important; width:100% !important; background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
  display:flex !important; justify-content:center !important; }
.bnfoc-board .bn-fret-holder .bnf-shell::before{ display:none !important; }
/* hide all widget chrome — only the neck itself belongs in the studio */
.bnfoc-board .bnf-head, .bnfoc-board .bnf-caption, .bnfoc-board .bnf-mini,
.bnfoc-board .bnf-tip, .bnfoc-board .bnf-infochip{ display:none !important; }
.bnfoc-board .bnf-scroll{ overflow:visible !important; width:auto !important; max-width:100% !important;
  display:flex !important; justify-content:center !important; padding:0 !important; }
/* CAP THE FRETBOARD BY HEIGHT — BNFret's auto-zoom crops its viewBox to the active frets,
   which changes the neck's aspect ratio; a WIDTH cap therefore can't bound its height (the
   board balloons when zoomed in). Fixing the height and letting width follow the aspect keeps
   the whole studio inside the viewport no matter how the board zooms, with no distortion
   (it letterboxes via preserveAspectRatio if the viewBox is very wide). */
.bnfoc-board .bn-fret-holder svg, .bnfoc-board .bnf-board svg, .bnfoc-board svg.bnf{
  height:clamp(180px, 31vh, 400px) !important; width:auto !important; max-width:100% !important; }

/* — transport: a slim instrument console, not a toolbar — */
.bnfoc-ctl{ display:flex; justify-content:center; padding-top:clamp(6px,1.2vh,14px); }
.bnfoc-ctl .controls{
  border:0 !important; border-top:0 !important; border-radius:18px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 -1px 0 rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.4) !important;
  padding:11px 18px !important; backdrop-filter:blur(14px) saturate(1.1);
  /* always wrap + center so no control is ever pushed off-screen (TAB / Note Names / Counts all fit) */
  display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important;
  gap:9px 12px !important; max-width:100% !important; row-gap:9px !important;
}
/* inside the studio these are redundant (you're already in it, the board is already shown) */
.bnfoc-ctl .bn-fretbtn, .bnfoc-ctl .bn-focusbtn{ display:none !important; }

@media (max-width:640px){
  .bn-focus{ padding:12px; }
  .bnfoc-ctl .controls{ flex-wrap:wrap; }
}
@media (prefers-reduced-motion: reduce){
  .bn-focus{ transition:opacity .2s ease !important; transform:none !important; }
  .bn-focus.playing .bnfoc-room::before{ animation:none !important; }
}