/* /studio/<name-song> — the client's preview page (Deliver the work, 9 Oct 2026). Black theme, phone first. */
.st-wrap{max-width:680px;margin:0 auto;padding:40px 16px 60px;color:#fff;font-family:inherit}
.st-kicker{margin:0 0 4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#1DB954;font-weight:700}
.st-wrap h1{margin:0 0 20px;font-size:28px;line-height:1.25;overflow-wrap:anywhere}
.st-box{background:#151515;border:1px solid #2a2a2a;border-radius:12px;padding:20px}
.st-p{margin:0 0 14px;font-size:16px;line-height:1.6;color:#e8e8e8}
.st-lead{margin:0 0 16px;font-size:17px;line-height:1.6;color:#fff}
.st-small{margin:10px 0 0;font-size:13px;line-height:1.6;color:#a5a5a5}
.st-err{margin:12px 0 0;font-size:14px;color:#ff7b72}
.st-btn{display:inline-block;background:#1DB954;color:#000;border:0;border-radius:8px;padding:14px 26px;font:inherit;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;text-align:center}
.st-btn:disabled{opacity:.55;cursor:default}
.st-btn2{background:transparent;color:#fff;border:2px solid #444;padding:12px 22px}
.st-link{background:none;border:0;padding:0;color:#1DB954;font:inherit;text-decoration:underline;cursor:pointer}
.st-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.st-code{display:block;width:100%;max-width:220px;margin:0 0 14px;padding:12px 14px;font-size:26px;letter-spacing:8px;background:#0a0a0a;color:#fff;border:1px solid #444;border-radius:8px;font-family:inherit}
.st-songs{margin:4px 0 0}
.st-song{padding:12px 0;border-top:1px solid #262626}
.st-song:first-child{border-top:0;padding-top:0}
.st-song-t{font-weight:700;font-size:15px;margin-bottom:8px;overflow-wrap:anywhere}
.st-song audio{width:100%;display:block}
.st-panel{margin-top:20px;padding-top:18px;border-top:1px solid #2a2a2a}
.st-notes{display:block;width:100%;box-sizing:border-box;padding:12px;background:#0a0a0a;color:#fff;border:1px solid #444;border-radius:8px;font:inherit;font-size:15px;line-height:1.5}
.st-remind{margin-top:16px;padding:14px 16px;border:1px solid #6b5426;background:rgba(227,179,65,.08);border-radius:10px}
.st-foot{margin:18px 0 0;font-size:13px;color:#8f8f8f}
.st-foot a{color:#1DB954}
@media (max-width:480px){.st-wrap{padding-top:24px}.st-wrap h1{font-size:23px}.st-box{padding:16px}.st-acts .st-btn{flex:1 1 100%}}
.st-wrap [hidden]{display:none !important}
.st-box > a.st-btn{margin:4px 0 22px}
/* release 2 (9 Oct 2026): the full-quality files, each with its own Download button */
.st-files{margin:6px 0 18px}
.st-file{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #262626}
.st-file:first-child{border-top:0}
.st-file-n{flex:1 1 auto;min-width:0;font-weight:700;font-size:15px;overflow-wrap:anywhere}
.st-file-s{flex:0 0 auto;font-size:13px;color:#a5a5a5}
.st-btn-s{flex:0 0 auto;padding:10px 18px;font-size:15px}
@media (max-width:480px){.st-file{flex-wrap:wrap}.st-file-n{flex-basis:100%}.st-file .st-btn-s{margin-left:auto}}
/* release 3 (9 Oct 2026): did you listen?, Delete my files */
.st-file-ok{font-weight:400;font-size:13px;color:#1DB954;white-space:nowrap}
.st-ask{margin:22px 0 0;padding:16px;border:1px solid #2e5a3c;background:rgba(29,185,84,.07);border-radius:10px}
.st-ask .st-acts{margin-top:10px}
.st-del{margin:26px 0 0;padding-top:14px;border-top:1px solid #262626}
.st-del .st-small{margin:0 0 6px}
.st-link:disabled{color:#666;text-decoration:none;cursor:default}

/* Messages with riddimBank (12 Oct 2026, service jobs with players release 2) */
/* the page in separate sections (12 Oct 2026, service jobs with players release 2): Your music, Chat with riddimBank */
.st-sec{border:1px solid #34343c;border-radius:12px;background:#111114;margin:0 0 18px;overflow:hidden}
.st-sec-h{padding:10px 14px;background:#22222a;border-bottom:1px solid #34343c;border-left:5px solid #666;font-weight:700;font-size:16px;color:#fff}
.st-sec-b{padding:14px}
.st-sec-music .st-sec-h{border-left-color:#4a8cff;background:#18223a}
.st-sec-chat .st-sec-h{border-left-color:#1DB954;background:#16261d}
.st-sec-b > a.st-btn{margin:4px 0 22px}
.st-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#2b2615;border:1px solid #b58900;border-radius:10px;padding:10px 14px;margin:0 0 18px;color:#ffd866;font-weight:600}
.st-conv{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow-y:auto;background:#0a0a0c;border:1px solid #2a2a30;border-radius:10px;padding:10px;margin:0 0 10px}
.st-msg{border-radius:12px;padding:8px 12px;max-width:85%}
.st-msg-me{background:#17402a;align-self:flex-end}
.st-msg-rb{background:#2a2a33;align-self:flex-start}
.st-msg-new{box-shadow:0 0 0 2px #E3B341}
.st-newtag{display:inline-block;margin-left:6px;background:#E3B341;color:#000;font-size:10px;font-weight:800;border-radius:4px;padding:0 6px}
.st-msg-who{font-size:12px;color:#a5a5a5;margin-bottom:2px}
.st-msg-t{font-size:15px;line-height:1.5;color:#fff;white-space:pre-wrap;overflow-wrap:anywhere}
.st-sent{color:#1DB954}
/* one collapsible box per version, newest on top (12 Oct 2026) */
.st-vers{display:flex;flex-direction:column;gap:10px;margin:4px 0 0}
.st-ver{border:1px solid #2e2e36;border-radius:10px;background:#0d0d10}
.st-ver-on{border-color:#4a8cff}
.st-ver-h{cursor:pointer;padding:12px 14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;list-style:none}
.st-ver-h::-webkit-details-marker{display:none}
.st-ver-h::before{content:'▸';color:#8f8f8f;width:12px}
.st-ver[open] > .st-ver-h::before{content:'▾'}
.st-ver-t{font-weight:800;font-size:16px;color:#fff}
.st-ver-s{font-size:13px;color:#a5a5a5}
.st-ver-ok{font-size:13px;font-weight:700;color:#1DB954}
.st-ver > .st-songs,.st-ver > .st-small{padding:0 14px}
.st-ver > .st-songs{padding-bottom:10px}
.st-ver > .st-small:last-child{padding-bottom:12px}
.st-ver-pick{margin-top:0}
/* Approve's second step stands out (13 Oct 2026): amber = not finished yet (red would read as an error) */
.st-confirm{margin-top:20px;padding:16px;border:2px solid #E3B341;border-radius:12px;background:rgba(227,179,65,.10)}
.st-confirm-h{margin:0 0 8px;font-size:17px;font-weight:800;color:#ffd866}
.st-confirm .st-btn:not(.st-btn2){box-shadow:0 0 0 3px rgba(227,179,65,.55)}

/* ---- audit batch 12b (16 Oct 2026): each version with its own buttons, like Download on each file; the newest big,
   the earlier ones smaller under "Earlier versions" (mock-up "Claude outputs/studio-versions-mockup_02.png"). ---- */
.st-vers-k{margin:8px 0 -2px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8f8f8f}
.st-ver .st-ver-h{cursor:default;padding:10px 12px 10px 8px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.st-ver .st-ver-h::before{content:none}
.st-ver-tog{flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:4px 6px}
.st-ver-tog:focus-visible{outline:2px solid #1DB954;outline-offset:2px;border-radius:6px}
.st-chev{flex:none;width:0;height:0;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent #8f8f8f;transition:transform .15s}
.st-open > .st-ver-h .st-chev{transform:rotate(90deg)}
.st-ver-tt{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.st-ver-b{display:flex;gap:8px;flex-wrap:wrap;flex:none}
.st-ver-body{display:none}
.st-open > .st-ver-body{display:block}
.st-ver-body > .st-songs,.st-ver-body > .st-small{padding:0 14px}
.st-ver-body > .st-songs{padding-bottom:10px}
.st-ver-body > .st-small:last-child{padding-bottom:12px}
.st-ver-now > .st-ver-h{padding:14px 14px 14px 10px}
.st-ver-now .st-ver-t{font-size:21px}
.st-ver-now .st-ver-s{font-size:14px}
.st-ver-old > .st-ver-h{padding:5px 10px 5px 6px}
.st-ver-old .st-ver-t{font-size:14px}
.st-ver-old .st-ver-s{font-size:12px}
.st-ver-old .st-chev{border-width:5px 0 5px 7px}
.st-btn.st-btn-o{background:transparent;color:#1DB954;border:2px solid #1DB954;padding:6px 14px;font-size:14px}
.st-ver .st-panel-in{margin:0 14px 12px;padding-top:12px}
.st-ver .st-confirm{margin:0 14px 14px}
@media (max-width:480px){.st-ver-now .st-ver-b{width:100%;justify-content:flex-end}.st-ver-now .st-ver-t{font-size:18px}.st-ver-tog{flex-basis:0;flex-grow:1}}

/* ---- 12b, one list (Joe, 16 Oct 2026): a version that is the client's shows its Download rows even when closed;
   Approve shows only on the open version; "Earlier versions · open one to listen to it or approve it". ---- */
.st-vers-hint{font-weight:500;letter-spacing:0;text-transform:none;font-size:13px}
.st-ver:not(.st-open) > .st-ver-h .st-ver-b{display:none}
.st-ver-files{margin:0;padding:0 14px 8px 38px}
.st-ver-files .st-file{padding:8px 0}
.st-ver-old .st-ver-files{padding-left:32px}
.st-ver-old .st-ver-files .st-file-n{font-size:14px}
.st-ver-mine{border-color:#2e5a3c}
.st-ver-mine.st-ver-on{border-color:#4a8cff}
@media (max-width:480px){.st-ver-files{padding-left:14px}}

/* ---- Bigger things to tap on a phone (17 Oct 2026, found by service-flow-screens_01.js): the earlier-version rows were
   30px tall and the "Delete my files" / "Send a new code" links 26px; Apple advises 44px for anything you tap. On a
   phone or touch screen only; the computer looks as before. The links' padding widens what a finger can hit without
   moving the text around them. ---- */
@media (max-width:480px),(pointer:coarse){
  .st-ver-tog{min-height:44px}
  .st-link{display:inline-block;padding:12px 2px;margin:-12px 0}
}

/* faderBack logo at the top of the page (Joe, 19 Oct 2026): "faderBack by riddimBank" */
.st-brand{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.st-brand-icon{flex:none;display:block}
.st-brand-name{font-size:24px;line-height:1;letter-spacing:-.02em;font-weight:400;color:#fff}
.st-brand-name b{font-weight:800;color:#1DB954}
.st-brand-by{align-self:flex-end;margin:0 0 2px 2px;font-size:12px;color:#8f8f8f;white-space:nowrap}
@media (max-width:480px){.st-brand-name{font-size:21px}.st-brand-icon{width:30px;height:30px}}
/* the faderBack logo only WITH the player (Joe, 20 Oct 2026: "I clicked on view page for a downloaded file and see the
   faderBack logo. That should only accompany the player itself."). Sign-in, file deliveries and pages before the first
   version show no logo; js/studio.js sets body.fb-on when the player is on. A file delivery has no "Mixing terms" either. */
body:not(.fb-on) .st-brand{display:none}
body.st-adhoc .st-foot a{display:none}
/* the message box with its own Send button inside it, bottom right (Joe, 20 Oct 2026) */
.st-compose{position:relative}
.st-compose .st-reply{display:block;width:100%;box-sizing:border-box;min-height:96px;padding-right:250px;margin:0}
.st-compose .st-compose-go{position:absolute;right:10px;bottom:10px;margin:0;white-space:nowrap}
.st-compose-k{margin:6px 0 0}
@media (max-width:640px){.st-compose .st-reply{padding-right:10px;padding-bottom:58px}.st-compose .st-compose-go{left:10px;right:10px}}

/* /css/faderback.css — the faderBack player on the client's /studio page (release 1, 19 Oct 2026; js/faderback.js).
   The look of mock-ups 91-121: dark, green for riddimBank's mix and Approve, gold for notes and the play-line tab. */
body.fb-on .st-wrap{max-width:1600px;padding-top:20px}   /* mock-up 145: the page is as wide as the mock-up's (1600 px) */
body.fb-on #stTitle{display:none}
body.fb-on .st-box{background:none;border:0;padding:0;border-radius:0}
body.fb-on .st-foot{margin-top:24px}
.fb{--g:#1DB954;--y:#E3B341;--mut:#a0a0a0;--line:#2a2a2a;--card:#151515;color:#eee;font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.fb [hidden]{display:none!important}
/* top row: logo · song drop-down · Help/Guide */
.fb-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:0 0 10px}
.fb-brandcell{justify-self:start;min-width:0}.fb-brandcell .st-brand{margin:0}
.fb-helpbar{justify-self:end;display:flex;align-items:center;gap:6px}
.fb-hbtn,.fb-hbtn2{border:1px solid #444;background:transparent;color:#ddd;border-radius:16px;padding:5px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.fb-hbtn.on{background:var(--y);border-color:var(--y);color:#000}
.fb-saved{font-size:13px;color:var(--g);font-weight:700;opacity:0;transition:opacity .6s;margin-right:4px}.fb-saved.on{opacity:1}
.fb-pick{position:relative;justify-self:center}
.fb-pickbtn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--y);background:rgba(227,179,65,.07);color:#eee;border-radius:22px;padding:7px 14px;font:inherit;cursor:pointer;white-space:nowrap;max-width:100%}
.fb-pickbtn.fb-one{cursor:default;border-color:#3a3a3a;background:transparent}
.fb-pn{font-size:12px;color:var(--mut)}.fb-pt{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis}.fb-ps{font-size:12px;color:var(--mut)}.fb-ps.ok{color:var(--g)}.fb-ps.ns{color:var(--y)}
.fb-chev{color:var(--y);font-weight:800}
.fb-picklist{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:30;width:min(440px,92vw);max-height:min(460px,70vh);overflow-y:auto;background:#151515;border:1px solid #3a3a3a;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.6);padding:6px}
.fb-picksum{font-size:13px;color:var(--mut);padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.fb-pickit{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;color:#eee;font:inherit;padding:8px 10px;border-radius:8px;cursor:pointer}
.fb-pickit:hover{background:#222}.fb-pickit.on{background:rgba(227,179,65,.1);outline:1px solid var(--y);outline-offset:-1px}
.fb-pickit .n{width:22px;text-align:right;color:var(--mut);font-size:13px}.fb-pickit .t{flex:1;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-pickit .st{font-size:12px;color:var(--mut);white-space:nowrap}.fb-pickit .st.ok{color:var(--g)}.fb-pickit .st.ns{color:var(--y)}
.fb-h1{margin:6px 0 2px;font-family:inherit;font-size:26px;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.25;overflow-wrap:anywhere}.fb-ver{font-family:inherit;font-size:15px;font-weight:400;letter-spacing:0;color:var(--mut);margin-left:6px;white-space:nowrap}
.fb-lead{margin:0 0 10px;font-size:16px;color:#ddd}.fb-due{margin:0 0 12px;font-size:14px;color:var(--mut)}
/* the player */
.fb-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0 0 14px}
.fb-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.fb-play{width:48px;height:48px;border-radius:50%;border:0;background:var(--g);color:#000;font-size:18px;font-weight:800;cursor:pointer}.fb-play:disabled{opacity:.4;cursor:default}
.fb-clock{font-variant-numeric:tabular-nums;font-size:15px}
.fb-zoom{display:inline-flex;gap:6px}.fb-zb{min-width:36px;height:34px;border:1px solid #3a3a3a;background:#1c1c1c;color:#eee;border-radius:8px;font:inherit;font-weight:700;cursor:pointer}.fb-zb.fb-wide{padding:0 10px;font-size:13px}
.fb-vsw{margin-left:auto;display:inline-flex;border:1px solid #444;border-radius:22px;overflow:hidden;font-size:13px}
.fb-vsw button{border:0;background:transparent;color:#eee;font:inherit;font-weight:700;padding:7px 14px;cursor:pointer}.fb-vsw button.on{background:#ddd;color:#000}.fb-vsw button.on[data-v="prev"]{background:#8fb3ff}
@keyframes fbglow{0%{box-shadow:0 0 0 0 rgba(29,185,84,.9);background:#1DB954;color:#000}60%{box-shadow:0 0 0 7px rgba(29,185,84,0)}100%{box-shadow:0 0 0 0 rgba(29,185,84,0)}}
.fb-vsw button.fb-glow{animation:fbglow 1.2s ease-out}
.fb-v2band{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;padding:10px 14px;border:1px solid #8fb3ff;background:rgba(143,179,255,.08);border-radius:10px;font-size:14px}.fb-v2band span{flex:1 1 300px}
.fb-ruler{position:relative;height:36px;margin-bottom:2px;border-radius:6px 6px 0 0;background:#141414;border:1px solid var(--line);border-bottom:0;overflow:hidden;user-select:none;touch-action:none}.fb-ruler:hover{background:#1a1a1a}
.fb-rt{position:absolute;bottom:0;width:1px;height:9px;background:#666;pointer-events:none}.fb-rt.half{height:5px;background:#444}
.fb-rt span{position:absolute;left:4px;bottom:8px;font-size:11px;color:#999;white-space:nowrap;font-variant-numeric:tabular-nums}
.fb-rph{position:absolute;top:0;bottom:0;width:0;pointer-events:none;z-index:2}.fb-rph::after{content:'';position:absolute;left:-7px;bottom:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid #fff}
.fb-rtab{position:absolute;top:2px;z-index:3;min-width:72px;box-sizing:border-box;height:19px;line-height:19px;background:var(--y);color:#000;border:0;border-radius:10px;padding:0 8px;font:inherit;font-size:12px;font-weight:700;text-align:center;white-space:nowrap;cursor:pointer;font-variant-numeric:tabular-nums;box-shadow:0 1px 4px rgba(0,0,0,.5)}.fb-rtab:hover{filter:brightness(1.12);box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.fb-wave{position:relative;height:150px;background:#0f0f0f;border:1px solid var(--line);border-radius:10px;overflow:hidden;touch-action:none;cursor:pointer;user-select:none}
.fb-wave canvas,.fb-ov canvas{display:block;width:100%;height:100%}
.fb-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--mut);font-size:14px;background:rgba(15,15,15,.8)}
.fb-ov{height:26px;margin-top:6px;border-radius:6px;background:#0f0f0f;border:1px solid var(--line);cursor:pointer;touch-action:none}
.fb-hint{margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--mut);height:2.9em;overflow:hidden}   /* always two lines high, so a long hint never moves the mixer */
/* the notes column */
.fb-col{position:relative}
.fb-sec{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:0 0 12px;overflow:visible}
.fb-sec-h{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;color:#fff;font:inherit;font-size:17px;font-weight:700;padding:14px 16px;cursor:pointer;text-align:left}
.fb-sec-arrow{display:inline-block;transition:transform .15s;color:var(--mut)}.fb-sec.open .fb-sec-arrow{transform:rotate(90deg)}
.fb-sec-x{margin-left:auto;display:inline-flex;align-items:center;gap:10px}
.fb-new{background:var(--y);color:#000;font-size:11px;font-weight:800;border-radius:4px;padding:1px 6px}
.fb-here{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--g)}.fb-here i{width:9px;height:9px;border-radius:50%;background:var(--g);box-shadow:0 0 0 3px rgba(29,185,84,.25)}
.fb-sec-b{padding:0 16px 14px}
.fb-sec-msg .st-sec{border:0;background:none;margin:0}.fb-sec-msg .st-sec-h{display:none}.fb-sec-msg .st-sec-b{padding:0}
.fb-msgnote{margin:0 0 10px}
.fb-sub{margin:4px 0 12px}
.fb-subh{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:#1b1d2b;border-left:3px solid #6c8cff;border-radius:8px;padding:9px 12px;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.fb-subh small{font-weight:400;letter-spacing:0;text-transform:none;color:#b8bfd8;font-size:13px}
.fb-subh.fb-tl{background:#2a2410;border-left-color:var(--y)}.fb-subh.fb-tl small{color:#d9c99a}
.fb-add{margin-left:auto;border:1px solid #6c8cff;background:transparent;color:#cfd9ff;border-radius:8px;padding:5px 10px;font:inherit;font-weight:700;font-size:13px;cursor:pointer;text-transform:none;letter-spacing:0}
.fb-glist,.fb-nlist{list-style:none;margin:6px 0 0;padding:0}
.fb-note{display:flex;align-items:center;gap:10px;padding:8px 6px;border-top:1px solid var(--line)}.fb-note:first-child{border-top:0}
.fb-note.sel{background:#2b2410;border-radius:8px;outline:1px solid var(--y);outline-offset:-1px}
.fb-tbtn{background:var(--y);color:#000;border:0;border-radius:6px;padding:2px 7px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
.fb-gbadge{background:#6c8cff;color:#000;border-radius:6px;padding:2px 7px;font-size:12px;font-weight:800}
.fb-nt{flex:1;font-size:14px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}.fb-click{cursor:text}.fb-click:hover{background:#222;border-radius:4px}
.fb-empty{color:var(--mut);font-size:14px;padding:8px 6px}
.fb-link{background:none;border:0;color:#9fb6ff;text-decoration:underline;font:inherit;font-size:13px;cursor:pointer;padding:0}
.fb-small{font-size:13px;color:var(--mut)}
/* the note box */
.fb-nbox{border:1px solid var(--y);background:#1d1906;border-radius:10px;padding:12px;margin:4px 0 12px}
.fb-nhead{margin-bottom:8px}.fb-nat{color:var(--y);font-variant-numeric:tabular-nums}
.fb-ntext{width:100%;box-sizing:border-box;min-height:42px;resize:none;background:#0f0f0f;color:#eee;border:1px solid #444;border-radius:8px;padding:9px 10px;font:inherit;font-size:15px;line-height:1.4}
.fb-nacts{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}.fb-del{margin-left:auto}
.fb-btn{background:var(--g);color:#000;border:0;border-radius:8px;padding:10px 18px;font:inherit;font-size:15px;font-weight:800;cursor:pointer}.fb-btn:disabled{opacity:.45;cursor:default}
.fb-btn2{background:transparent;color:#eee;border:1px solid #666;border-radius:8px;padding:9px 16px;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.fb-sm{padding:5px 12px;font-size:13px}
.fb-vrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--mut)}
.fb-vrec{border:1px solid #ff5a4f;background:transparent;color:#ff7a70;border-radius:8px;padding:6px 11px;font:inherit;font-weight:700;cursor:pointer}.fb-vrec.on{background:#ff5a4f;color:#fff}
.fb-vrec2{border:1px solid #555;background:transparent;color:#eee;border-radius:8px;padding:5px 10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.fb-vp{border:1px solid #8fb3ff;background:rgba(143,179,255,.1);color:#cfdcff;border-radius:14px;padding:3px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.fb-vstate{flex-basis:100%}.fb-vrow .fb-vstate:first-of-type{flex-basis:auto}
.fb-vdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff5a4f;margin-right:6px}
.fb-qchips{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;padding-left:10px;border-left:1px solid #3a3a3a}
.fb-qchip{border:1px solid #444;background:transparent;color:#cfcfcf;border-radius:14px;padding:4px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}.fb-qchip:hover{border-color:#888;color:#fff;background:#222}
.fb-qgap{width:6px}
/* the bar along the bottom of the notes (sticky while the notes are on screen) */
.fb-decide{position:sticky;bottom:0;z-index:6;background:#181818;border:1px solid #333;border-radius:14px;padding:12px 16px;box-shadow:0 -10px 18px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:10px}
.fb-drow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fb-dtitle{margin-left:auto;text-align:right;font-size:14px;font-weight:700}
.fb-sum{background:#141414;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;max-height:40vh;overflow-y:auto}
.fb-sum ul{margin:6px 0 0;padding-left:20px}.fb-sum li{margin:3px 0}.fb-sum .fb-dim{color:var(--mut)}
.fb-awp{margin:6px 0 4px;padding-left:10px;border-left:3px solid var(--y)}
.fb-nudge{color:var(--mut)}.fb-warn{color:var(--y);font-weight:600}
/* the Guide */
/* the Guide (mock-ups 78, 145): a panel on the right of the page, gold section titles, × to close */
.fb-gd{position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);z-index:70;background:#111;border-left:1px solid #333;box-shadow:-10px 0 30px rgba(0,0,0,.6);display:flex;flex-direction:column;color:#eee}
.fb-gd-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #2a2a2a;font-size:16px}
.fb-gd-x{width:34px;height:34px;border-radius:17px;border:1px solid #444;background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer}.fb-gd-x:hover{border-color:#888}
.fb-gd-b{overflow:auto;padding:4px 16px 30px;font-size:14px;line-height:1.5;color:#ddd}
.fb-gd-b h3{margin:18px 0 4px;font-size:14px;color:var(--y,#E3B341)}
.fb-gd-b p{margin:0 0 8px}
@media (max-width:700px){
  .fb-top{grid-template-columns:1fr auto}.fb-pick{grid-column:1 / -1;grid-row:2;justify-self:stretch}.fb-pickbtn{width:100%;justify-content:space-between}.fb-ps{display:none}
  .fb-h1{font-size:22px}.fb-ver{display:block;margin:2px 0 0}
  .fb-vsw{margin-left:0}.fb-qchips{border-left:0;padding-left:0}
  .fb-dtitle{margin-left:0;text-align:left;flex:1 0 100%;order:-1}
}
@media (prefers-reduced-motion:reduce){.fb-vsw button.fb-glow{animation:none;outline:2px solid #1DB954}}

/* ===================== RELEASE 2: the mixer (js/faderback-mixer.js), the look of mock-up 123 =====================
   A piece of hardware in riddimBank green: a raised desk, the faders sunk into a well, engraved names, a dB display per
   part, metal caps, the meter inside the fader slot under the cap, Mute/Solo rings that glow (the words stay plain),
   each pair in its own tray. The real range input stays on top, invisible (keyboard, screen readers, double-click). */
.fb-duo{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.fb-duo>.fb-mixhost{order:-1}
@media (min-width:1100px){.fb-duo{grid-template-columns:minmax(380px,1fr) 560px}.fb-duo>.fb-mixhost{order:0}}
.fb-mixl{color:#7ee2a2;font-size:13px}
.fb-wfad{display:flex;align-items:center;gap:10px;padding:8px 6px;border-top:1px solid var(--line)}
.fb-fbadge{background:#1DB954}
.fbm{position:relative;border-radius:16px;padding:16px 16px 14px;color:#e9e9e9;
  background:linear-gradient(180deg,#26272a 0%,#1a1b1d 38%,#141516 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 -1px 0 rgba(0,0,0,.6) inset,0 18px 40px rgba(0,0,0,.55),0 0 0 1px #0a0a0a}
.fbm.editing{box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 0 2px #1DB954,0 0 22px rgba(29,185,84,.35)}
.fbm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.fbm-title{font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:#d8dade;font-weight:600;text-shadow:0 1px 0 rgba(0,0,0,.9)}
.fbm-reset{background:linear-gradient(#2b2c2f,#1d1e20);border:0;border-radius:16px;color:#b9bcc2;font:inherit;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:7px 14px;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 4px rgba(0,0,0,.6)}
.fbm-reset:disabled{opacity:.45;cursor:default}
.fbm-sub{color:#7d8187;font-size:13px;min-height:20px;margin:0 0 12px;line-height:1.4}
.fbm-g{color:#5dff9a;text-transform:uppercase;letter-spacing:.14em;font-weight:600;text-shadow:0 0 8px rgba(29,185,84,.55)}
.fbm-well{display:flex;gap:8px;padding:14px 10px 12px;border-radius:12px;background:linear-gradient(180deg,#0e0f10,#141517);box-shadow:0 2px 6px rgba(0,0,0,.85) inset,0 0 0 1px rgba(0,0,0,.7) inset,0 1px 0 rgba(255,255,255,.05);overflow-x:auto}
.fbm-ch{flex:1 1 0;min-width:76px;position:relative;text-align:center;border-radius:8px;padding:2px 0 4px}
.fbm-ch+.fbm-ch:before{content:"";position:absolute;left:-5px;top:2px;bottom:2px;width:1px;background:linear-gradient(transparent,rgba(255,255,255,.12) 15%,rgba(255,255,255,.12) 85%,transparent);box-shadow:1px 0 0 rgba(0,0,0,.7)}
.fbm-ch.auto{background:rgba(29,185,84,.07);box-shadow:0 0 0 1px rgba(29,185,84,.5) inset}.fbm-ch.auto .fbm-nm{color:#1DB954}
.fbm-ch.wait .fbm-fz,.fbm-ch.wait .fbm-nm{opacity:.45}
.fbm-nm{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#b9bcc2;font-weight:600;text-shadow:0 1px 0 #000;height:30px;display:flex;align-items:center;justify-content:center;line-height:1.15;overflow-wrap:anywhere;padding:0 2px}
.fbm-db{display:inline-block;min-width:58px;margin-top:4px;font:600 12px/1 "SFMono-Regular",Menlo,Consolas,monospace;padding:5px 6px;border-radius:5px;color:#7a7f86;background:linear-gradient(#08090a,#0d0e0f);box-shadow:0 1px 2px rgba(0,0,0,.9) inset,0 1px 0 rgba(255,255,255,.05);white-space:nowrap}
.fbm-db.up{color:#5dff9a;text-shadow:0 0 6px rgba(93,255,154,.7)}.fbm-db.dn{color:#ffd27a;text-shadow:0 0 6px rgba(227,179,65,.6)}
.fbm-fz{position:relative;height:var(--fbh,250px);width:66px;margin:22px auto 30px}
.fbm-sc{position:absolute;left:0;top:0;bottom:0;width:22px;font:500 9px/1 "SFMono-Regular",Menlo,monospace;color:#6f747b}
.fbm-sc span{position:absolute;right:2px;transform:translateY(-50%)}.fbm-sc span.z{color:#d6d9de;font-weight:600}
.fbm-tk{position:absolute;left:22px;width:6px;height:1px;background:#3b3e42}.fbm-tk.z{width:8px;background:#9aa0a6}
.fbm-mt{position:absolute;left:39px;top:-14px;bottom:8px;width:10px;border-radius:5px;background:#050506;box-shadow:0 1px 3px #000 inset,0 0 0 1px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.06);overflow:hidden;pointer-events:none}
.fbm-mt i{position:absolute;left:2px;right:2px;bottom:0;height:0;border-radius:2px;background:linear-gradient(to top,#139a44 0,#1DB954 52%,#8fe03a 58%,#f2d43a 62%,#f2c23a 80%,#ff7a2f 85%,#ff3b2f 88%,#ff2a1f 100%);background-size:100% calc(var(--fbh,250px) + 6px);background-position:bottom;box-shadow:0 0 6px rgba(29,185,84,.6)}
.fbm-mt u{position:absolute;left:2px;right:2px;height:2px;bottom:0;opacity:0;background:#fff;box-shadow:0 0 5px #fff}
.fbm-cap{position:absolute;left:27px;width:34px;height:22px;transform:translateY(-50%);border-radius:5px;pointer-events:none;z-index:1;background:linear-gradient(180deg,#5b5e63 0%,#2f3135 45%,#1d1e21 55%,#3a3c40 100%);box-shadow:0 6px 10px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.25) inset,0 -1px 0 rgba(0,0,0,.6) inset,0 0 0 1px #0b0b0c}
.fbm-cap:after{content:"";position:absolute;left:5px;right:5px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:#f2f2f2;box-shadow:0 0 6px rgba(255,255,255,.85)}
.fbm-ch.mv .fbm-cap:after{background:#5dff9a;box-shadow:0 0 8px rgba(93,255,154,.95)}
.fbm-fz:focus-within .fbm-cap{box-shadow:0 6px 10px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.25) inset,0 0 0 2px #5dff9a}
.fbm-tail{position:absolute;left:38px;width:12px;top:calc(100% + 2px);height:24px;border-radius:0 0 6px 6px;background:repeating-linear-gradient(135deg,#1a1b1d 0 3px,#0b0c0d 3px 6px)}
.fbm-tail span{position:absolute;left:-30px;bottom:2px;width:26px;text-align:right;font:500 9px/1 Menlo,monospace;color:#5e6268}
.fbm-fz input[type=range]{position:absolute;left:26px;top:0;width:38px;height:var(--fbh,250px);margin:0;writing-mode:vertical-lr;direction:rtl;opacity:0;cursor:grab;z-index:2}
.fbm-fz input[type=range]:active{cursor:grabbing}.fbm-fz input[type=range]:disabled{cursor:default}
.fbm-ms{display:inline-flex;gap:5px;padding:7px 7px 6px;border-radius:12px;background:linear-gradient(#090a0b,#111214);box-shadow:0 1px 3px rgba(0,0,0,.95) inset,0 0 0 1px rgba(0,0,0,.6) inset,0 1px 0 rgba(255,255,255,.06)}
.fbm-ms button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none;color:#8d9197;font:inherit;font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;cursor:pointer}
.fbm-ms button i{display:block;width:22px;height:22px;border-radius:50%;box-sizing:border-box;border:2px solid #2c2e32;background:radial-gradient(circle at 50% 35%,#36383c,#131416 72%);box-shadow:0 2px 4px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.1) inset;transition:border-color .15s,box-shadow .15s}
.fbm-ms button:hover:not(:disabled) i{border-color:#45484d}
.fbm-ms button.m.on i{border-color:#ff4d3d;box-shadow:0 0 9px rgba(255,77,61,.7),0 0 3px rgba(255,77,61,.6) inset,0 2px 4px rgba(0,0,0,.8)}
.fbm-ms button.s.on i{border-color:#E3B341;box-shadow:0 0 9px rgba(227,179,65,.7),0 0 3px rgba(227,179,65,.6) inset,0 2px 4px rgba(0,0,0,.8)}
.fbm-ms button.implied i{border-color:rgba(255,77,61,.4)}
.fbm-ms button:disabled{opacity:.45;cursor:default}
.fbm-ms button:focus-visible{outline:none}.fbm-ms button:focus-visible i{outline:2px solid #5dff9a;outline-offset:2px}
.fbm-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.fbm-ready{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9ea2a8;font-weight:600}
.fbm-rdy{width:9px;height:9px;border-radius:50%;background:#E3B341;box-shadow:0 0 8px rgba(227,179,65,.8);animation:fbmblink 1s ease-in-out infinite}
.fbm-ready.done .fbm-rdy{background:#5dff9a;box-shadow:0 0 8px rgba(93,255,154,.9);animation:none}
/* what you hear (mock-up 125): RIDDIMBANK'S MIX [v2 | v3] · MY MIX, one part lit */
.fb-vsw.fb-onmixer{display:none}
.fbm-sw{display:flex;align-items:center;border-radius:20px;background:#07080a;box-shadow:0 1px 3px rgba(0,0,0,1) inset,0 1px 0 rgba(255,255,255,.05);padding:3px;font:600 11px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;user-select:none}
.fbm-half{display:flex;align-items:center;gap:8px;padding:3px 4px 3px 12px;min-height:27px;border-radius:17px;color:#7d8187;cursor:pointer}
.fbm-half:not(:has(.fbm-vp)){padding-right:12px}
.fbm-half.on{background:linear-gradient(#2a2c2f,#1c1d20);box-shadow:0 1px 0 rgba(255,255,255,.08) inset;color:#d8dade}
.fbm-vp{display:flex;border-radius:12px;background:#07080a;box-shadow:0 1px 2px #000 inset;padding:2px}
.fbm-v{display:block;padding:5px 9px;border-radius:10px;letter-spacing:.06em;color:#7d8187;cursor:pointer;font-weight:700}
.fbm-v:hover,.fbm-half:hover,.fbm-my:hover{color:#cfd3d8}
.fbm-v.on{background:linear-gradient(#34363a,#222326);color:#5dff9a;text-shadow:0 0 6px rgba(93,255,154,.6)}
.fbm-v.on2{background:linear-gradient(#2a3550,#1c2438);color:#a9c4ff;text-shadow:0 0 6px rgba(143,179,255,.6)}
.fbm-my{font:inherit;letter-spacing:inherit;text-transform:inherit;border:0;background:none;color:#7d8187;cursor:pointer;padding:9px 14px;border-radius:17px;margin-left:3px}
.fbm-my.on{background:linear-gradient(#2a2c2f,#1c1d20);color:#5dff9a;text-shadow:0 0 6px rgba(93,255,154,.6);box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
@keyframes fbmglow{0%{box-shadow:0 0 0 0 rgba(93,255,154,.9)}100%{box-shadow:0 0 0 8px rgba(93,255,154,0)}}
.fbm-glow{animation:fbmglow 1.1s ease-out}
.fbm-sw [tabindex]:focus-visible,.fbm-sw button:focus-visible{outline:2px solid #5dff9a;outline-offset:2px}
@keyframes fbmblink{50%{opacity:.35}}
.fbm.onv2 .fbm-well{opacity:.25;filter:grayscale(1);pointer-events:none}
.fbm-v2{position:absolute;left:12px;right:12px;top:70px;bottom:44px;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed #8fb3ff;background:rgba(10,14,24,.55);border-radius:10px;cursor:pointer;font:inherit;color:#cfdcff}
.fbm-v2 b{font-size:16px;color:#fff}.fbm-v2 span{font-size:14px;color:#8fb3ff;font-weight:700}.fbm-v2:hover span{text-decoration:underline}
.fbm.ro .fbm-fz input[type=range]{cursor:default}
.fbm-wait{min-height:120px}
@media (max-width:640px){
  .fbm-well{flex-direction:column;gap:6px;overflow:visible}
  .fbm-ch{display:grid;grid-template-columns:84px 58px 1fr auto;align-items:center;gap:8px;text-align:left;padding:4px 2px}
  .fbm-ch+.fbm-ch:before{display:none}
  .fbm-nm{height:auto;justify-content:flex-start;font-size:10px}
  .fbm-db{margin:0;min-width:0}
  .fbm-fz{height:auto;width:auto;margin:0}
  .fbm-sc,.fbm-tk,.fbm-mt,.fbm-cap,.fbm-tail{display:none}
  .fbm-fz input[type=range]{position:static;opacity:1;writing-mode:horizontal-tb;direction:ltr;width:100%;height:28px;accent-color:#1DB954}
  .fbm-ms{padding:5px 6px}
  .fbm-sw{font-size:10px}
}
@media (prefers-reduced-motion:reduce){.fbm-rdy,.fbm-glow{animation:none}}
/* song by song (mock-ups 130-143): Notes | Messages tabs, the album strip, the approve check */
.fb-tabs{display:flex;gap:6px;margin:0 0 10px;border-bottom:1px solid var(--line)}
.fb-tab{display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;border-bottom:3px solid transparent;color:var(--mut);font:inherit;font-size:14px;font-weight:700;padding:8px 12px 7px;cursor:pointer}
.fb-tab:hover{color:#eee}.fb-tab.on{color:#fff;border-bottom-color:var(--y)}
.fb-tcnt{background:var(--y);color:#000;border-radius:9px;padding:0 6px;font-size:11px;font-weight:800;min-width:8px;text-align:center}
.fb-new{background:#ff5a4f;color:#fff;border-radius:6px;padding:1px 5px;font-size:10px;font-weight:800;letter-spacing:.04em}
.fb-here{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--g)}.fb-here i{width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 6px var(--g)}
.fb-tab [hidden]{display:none}
.fb-ptitle{font-weight:800;font-size:14px;margin:0 0 10px;color:#fff}
.fb-msgnote{margin:0 0 8px}
.fb-strip{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:5px}
.fb-tile{position:relative;height:20px;border:0;border-radius:4px;padding:0;font:inherit;font-size:11px;font-weight:800;line-height:20px;cursor:pointer;background:#3a3a3a;color:#cfcfcf;overflow:hidden}
.fb-tile:hover{filter:brightness(1.18)}
.fb-tile.g{background:var(--g);color:#000}.fb-tile.a{background:var(--y);color:#000}.fb-tile.x{background:#3a3a3a;color:#cfcfcf}
.fb-tile.r{box-shadow:inset 0 0 0 2px #e5534b}
.fb-tile.cur{box-shadow:inset 0 0 0 2px #fff}.fb-tile.cur.r{box-shadow:inset 0 0 0 2px #e5534b}
.fb-tile.new::after{content:"";position:absolute;top:3px;right:4px;width:5px;height:5px;border-radius:50%;background:#fff}
.fb-sdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;background:#6a6a6a}
.fb-sd-g{background:var(--g)}.fb-sd-a{background:var(--y)}.fb-sd-r{background:transparent;box-shadow:inset 0 0 0 2px #e5534b}
.st-g{color:var(--g)}.st-a{color:var(--y)}.st-r{color:#eee}
.fb-pickit .st.st-r::before,.fb-lr::before,.st-r::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px #e5534b;margin:0 6px 0 2px;vertical-align:0}
.fb-pickit .st.st-r::before{display:none}
.fb-sum li.fb-lr{list-style:none;margin-left:-16px}
.fb-lastbox{margin:8px 0 6px;padding:9px 12px;border:1px solid var(--g);background:rgba(29,185,84,.1);border-radius:8px;line-height:1.45}
.fb-albdone{display:flex;flex-direction:column;gap:3px;font-weight:800;color:var(--g);font-size:15px}.fb-albdone span{font-weight:400;color:#ddd;font-size:14px}
.fb-dstate{font-size:14px;font-weight:600;color:var(--mut);padding:4px 2px}.fb-ds-g{color:var(--g)}.fb-ds-a{color:var(--y)}
.fb-nudge{color:#eee}.fb-nudge::before{content:"ⓘ ";color:var(--y);font-weight:800}
.fb-sum li.fb-nudge{list-style:none;margin-left:-16px}
.fb-decide .fb-btn,.fb-decide .fb-btn2{padding-top:7px;padding-bottom:7px}
@media (max-width:640px){.fb-tile{height:28px;line-height:28px;font-size:12px}.fb-tab{padding:8px 8px 7px;font-size:13px}.fb-here{font-size:0;gap:0}}
/* Match level (mock-ups 138-142): a raised pill like Reset faders, a ring light (green when on), the amount beside the words */
.fbm-hbtns{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.fbm-lm{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 6px 0 10px;border:0;border-radius:16px;background:linear-gradient(#2b2c2f,#1d1e20);color:#b9bcc2;font:inherit;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 4px rgba(0,0,0,.6);cursor:pointer}
.fbm-lm:hover,.fbm-lm.on{color:#e6e8eb}.fbm-lm:hover{background:linear-gradient(#323337,#222326)}
.fbm-lml{width:12px;height:12px;border-radius:50%;box-sizing:border-box;border:2px solid #3a3d42;background:radial-gradient(circle at 50% 35%,#36383c,#131416 72%)}
.fbm-lm.on .fbm-lml{border-color:#5dff9a;box-shadow:0 0 7px rgba(93,255,154,.7)}
.fbm-lmv{font:600 11px/1 "SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:0;text-transform:none;color:#7a7f86;padding:4px 6px;border-radius:5px;background:linear-gradient(#08090a,#0d0e0f);box-shadow:0 1px 2px rgba(0,0,0,.9) inset}
.fbm-lmv.act{color:#5dff9a;text-shadow:0 0 6px rgba(93,255,154,.6)}
@media (max-width:640px){.fbm-head{flex-wrap:wrap}.fbm-lm{letter-spacing:.08em}}
/* mock-up 144 (Joe): Notes | Messages as one pill like the mixer's; Notes gold, Messages blue; each pane has an edge in its colour */
.fb-tabs{gap:3px;margin:0 0 14px;padding:3px;border:0;border-radius:22px;background:#07080a;box-shadow:0 1px 3px #000 inset,0 1px 0 rgba(255,255,255,.05)}
.fb-tab{flex:1 1 0;justify-content:center;flex-wrap:wrap;column-gap:8px;row-gap:3px;min-width:0;border:0;border-radius:19px;color:#7d8187;font-size:15px;line-height:1.25;text-align:center;padding:9px 12px}
.fb-tab:hover{color:#cfd3d8}
.fb-tab.on{background:linear-gradient(#2c2e31,#1d1e21);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 4px rgba(0,0,0,.6)}
.fb-tab-n.on{color:#f0c75e;text-shadow:0 0 8px rgba(227,179,65,.35)}.fb-tab-m.on{color:#a9c4ff;text-shadow:0 0 8px rgba(143,179,255,.35)}
.fb-tcnt{background:#2a2b2e;color:#9a9ea4;text-shadow:none}.fb-tab-n.on .fb-tcnt{background:var(--y);color:#000}
.fb-new{background:#8fb3ff;color:#000;text-shadow:none}.fb-here{text-shadow:none}
.fb-pane-notes{border-left:3px solid var(--y);padding-left:12px}.fb-pane-msg{border-left:3px solid #8fb3ff;padding-left:12px}
/* mock-up 145 (Joe): the notes on the previous version, set apart: indented, a grey banner with a v2 chip, a quieter box */
.fb-old{margin:16px 0 4px 22px;background:#121314;border:1px solid #2a2b2e;border-left:4px solid #6f747b;border-radius:8px;padding:0 12px 8px}
.fb-old summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 -12px 6px;padding:8px 12px;background:#202124;border-radius:0 7px 0 0;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#c9ccd1}
.fb-old summary::-webkit-details-marker{display:none}
.fb-old summary::after{content:'▾';margin-left:auto;color:#8e9298;font-size:14px}
.fb-old:not([open]) summary{border-radius:0 7px 7px 0;margin-bottom:0}.fb-old:not([open]) summary::after{content:'▸'}
.fb-vchip{font-size:12px;letter-spacing:.04em;text-transform:none;color:#000;background:#9aa0a8;border-radius:5px;padding:2px 7px}
.fb-osub{text-transform:none;letter-spacing:0;font-weight:400;font-size:13px;color:#9a9ea4}
.fb-oldl{list-style:none;margin:0;padding:0}
.fb-oldl li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 0;border-top:1px solid #1f2022;font-size:14px;color:#a9adb3}.fb-oldl li:first-child{border-top:0}
.fb-oldl .fb-nt{color:#a9adb3}
.fb-otime{font-size:12px;color:#8e9298;font-variant-numeric:tabular-nums;min-width:44px}
.fb-oab{display:inline-flex;gap:6px;margin-left:auto}
.fb-oldl .fb-gbadge{opacity:.6}
@media (max-width:640px){.fb-tab{font-size:13px;padding:8px 6px;column-gap:5px}.fb-old{margin-left:10px}}
@media (max-width:640px){.fb-here{font-size:12px;gap:5px}}
/* batch 2 (matching mock-up 145): Undo / Redo, the region menu, Stop Loop, the message at the bottom */
.fb-ur{display:inline-flex;gap:6px}
.fb-zb:disabled{opacity:.4;cursor:default}
.fb-undo.fb-glowu{border-color:var(--y);color:var(--y);box-shadow:0 0 0 2px rgba(227,179,65,.35)}
.fb-pill{position:absolute;top:36px;z-index:5;display:flex;align-items:center;gap:4px;padding:4px;background:#000;border:1px solid #555;border-radius:20px;box-shadow:0 4px 14px rgba(0,0,0,.7);white-space:nowrap}
.fb-pill button{border:0;border-radius:14px;padding:6px 11px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;background:#222;color:#eee}
.fb-pill button:hover{background:#333}.fb-pill .fb-pill-a{background:var(--y);color:#000}.fb-pill .fb-pill-d{color:#ff8a80}.fb-pill .fb-pill-x{background:transparent;color:#aaa;padding:6px 9px}
.fb-lstop{position:absolute;z-index:4;background:#fff;color:#000;border:0;border-radius:6px;font:inherit;font-size:12px;font-weight:800;padding:5px 11px;box-shadow:0 2px 8px rgba(0,0,0,.7);cursor:pointer}
.fb-lstop:hover{background:var(--y)}
.fb-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:12px;background:#222;color:#eee;border:1px solid #444;border-radius:10px;padding:10px 14px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.fb-toast[hidden]{display:none}
.fb-toast-u{background:transparent;border:1px solid var(--y);color:var(--y);border-radius:8px;padding:4px 10px;font:inherit;font-weight:800;cursor:pointer}
.fb-ruler{cursor:pointer}
@media (max-width:640px){.fb-pill{flex-wrap:wrap;white-space:normal;max-width:calc(100% - 8px)}.fb-ur .fb-zb{padding-left:8px;padding-right:8px}}
/* batch 3 (matching mock-up 145): the note list, the microphone meter, the earlier notes' ticks, touch sizes, the arrow */
.fb-ied{margin:0;flex:1;min-width:0}
.fb-vmeter{display:inline-block;width:90px;height:8px;border-radius:4px;background:#222;overflow:hidden;vertical-align:middle}.fb-vmeter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1DB954 0 70%,#E3B341 70% 90%,#e5534b 90%);transition:width .08s}
.fb-ono{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:50%;background:rgba(227,179,65,.5);color:#000;font-size:11px;font-weight:800}
.fb-ono-r{border-radius:5px;background:rgba(29,185,84,.5)}.fb-ono-s{background:rgba(169,156,255,.6)}
.fb-odone{color:var(--g);font-size:12px;font-weight:700;white-space:nowrap}
.fb-chev{display:inline-block;width:8px;height:8px;border-right:2px solid var(--y);border-bottom:2px solid var(--y);transform:rotate(45deg);margin:0 2px 4px 4px}
@media (pointer:coarse){.fb-ruler{height:46px}.fb-rtab{height:27px;line-height:27px;min-width:84px;font-size:14px;border-radius:14px}}
.fbm-sbtn{margin-left:10px;background:linear-gradient(#2b2c2f,#1d1e20);border:0;border-radius:12px;color:#d8dade;font:inherit;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 4px rgba(0,0,0,.6)}.fbm-sbtn:hover{color:#fff}
.fb-wave,.fb-ov,.fb-ruler{box-sizing:border-box}

/* ======================= MOCK-UP 145, EXACTLY (Joe, 20 Oct 2026: "match them precisely, function and appearance").
   The values below are mock-up 145's own (Claude outputs/riddimbank-player-mockup_145.html), on the release's class
   names; faderback-match-check (the mock-up and the release side by side, computed styles) keeps them equal. ======== */
.fb{--card:#141414;--line:#2a2a2a;--txt:#eee;--mut:#9a9a9a;--y:#e3b341;--g:#1DB954;--gd:#16261d;--r:#ff6b6b;--sg:#1DB954;--sa:#E3B341;--sr:#ff5a4f;--sx:#5a5d63;color:var(--txt);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.fb,.fb *,.fb *::before,.fb *::after{box-sizing:border-box}
.fb .fb-h1{margin:0 0 2px;font-size:26px;line-height:1.5;font-weight:700}
.fb .fb-ver{font-size:15px;font-weight:400;color:var(--mut);white-space:nowrap;margin-left:6px;line-height:1.5}
.fb .fb-lead{color:var(--mut);margin:0 0 14px;font-size:15px}
.fb .fb-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0 0 14px}
.fb .fb-duo>.fb-card,.fb .fb-duo>.fb-col{margin:0}
.fb .fb-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.fb .fb-play{width:44px;height:44px;border-radius:50%;flex:0 0 auto;border:0;background:var(--g);color:#000;font-size:20px;font-weight:400;font-family:revert;cursor:pointer;padding:0}
.fb .fb-clock{font-variant-numeric:tabular-nums;color:var(--mut);font-size:14px;min-width:96px;line-height:1.5}
.fb .fb-clock b{color:var(--txt);font-weight:700}
.fb .fb-zoom{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.fb .fb-zb{width:36px;height:34px;border-radius:8px;border:1px solid #444;background:#1a1a1a;color:var(--txt);font-family:revert;font-size:20px;font-weight:700;cursor:pointer;line-height:1;padding:0}
.fb .fb-zb.fb-wide{width:auto;padding:0 10px;font-size:13px;font-weight:600}
.fb .fb-zb:disabled{opacity:1;cursor:default;color:#5c5c5c;border-color:#2c2c2c}
.fb .fb-ur{display:inline-flex;gap:6px;margin-left:10px;position:relative}
.fb .fb-ur .fb-zb.fb-wide{width:auto;padding:0 12px;font-size:15px;font-weight:800;position:relative}
.fb .fb-undo.fb-glowu{border-color:var(--y);color:var(--y);box-shadow:0 0 0 1px var(--y);animation:fbuglow 1s ease-out 1}
@keyframes fbuglow{0%{box-shadow:0 0 0 6px rgba(227,179,65,.45)}100%{box-shadow:0 0 0 1px var(--y)}}
.fb .fb-rtab{line-height:19px}
.fb .fb-hint{display:flex;align-items:baseline;gap:12px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:13px;color:var(--mut);height:auto;min-height:1.5em;line-height:1.5;overflow:hidden}
.fb .fb-hint span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* one line, so a long hint never moves the mixer (Joe) */
.fb .fb-ncard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0}
.fb .fb-tabs{display:flex;gap:3px;margin:-2px 0 14px;padding:3px;border:0;border-radius:22px;background:#07080a;box-shadow:0 1px 3px #000 inset,0 1px 0 rgba(255,255,255,.05)}
.fb .fb-tab{flex:1 1 0;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:8px;row-gap:3px;min-width:0;background:none;border:0;border-radius:19px;color:#7d8187;font:inherit;font-size:15px;font-weight:700;line-height:1.25;text-align:center;padding:9px 12px;cursor:pointer}
.fb .fb-tcnt{font-size:12px;font-weight:800;background:#2a2b2e;color:#9a9ea4;border-radius:10px;padding:1px 7px;line-height:1.25;min-width:0;text-shadow:none}
.fb .fb-tab-n.on .fb-tcnt{background:var(--y);color:#000}
.fb .fb-new{font-size:11px;font-weight:800;background:#8fb3ff;color:#000;border-radius:4px;padding:1px 6px}
.fb .fb-here{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--g)}.fb .fb-here i{width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 0 3px rgba(29,185,84,.25)}
.fb .fb-pane-notes,.fb .fb-pane-msg{border-left:0;padding-left:0}
.fb .fb-sub{margin-bottom:14px}
.fb .fb-subh{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#1c2233;border:0;border-left:4px solid #6c8cff;border-radius:6px;padding:8px 12px;margin-bottom:8px;color:#dfe5ff;line-height:1.5}
.fb .fb-subh small{text-transform:none;letter-spacing:0;font-weight:400;font-size:13px;color:#9aa6c9;margin-right:auto}
.fb .fb-subh.fb-tl{background:#2a2412;border-left-color:var(--y);color:#f6e7bd}.fb .fb-subh.fb-tl small{color:#bba87a}
.fb .fb-add{margin:0;padding:5px 12px;font:inherit;font-size:13px;background:transparent;color:#c9d2ff;border:1px solid #8f9dff;border-radius:7px;letter-spacing:0;text-transform:none;font-weight:700;white-space:nowrap;cursor:pointer;line-height:1.5}
.fb .fb-add:hover{background:#2a3352;color:#fff}
.fb .fb-glist,.fb .fb-nlist{list-style:none;margin:0 0 4px;padding:0}
.fb .fb-empty{color:var(--mut);font-size:14px;padding:6px}
.fb .fb-note{display:flex;gap:10px;align-items:flex-start;padding:8px 6px;border-top:1px solid var(--line)}
.fb .fb-note:first-child{border-top:0}
.fb .fb-note.sel{background:#2b2410;border-radius:8px;outline:1px solid var(--y);outline-offset:-1px}
.fb .fb-note.fb-mx.sel{background:#12251a;outline-color:var(--g)}
.fb .fb-tbtn{background:var(--y);color:#000;border:0;border-radius:6px;padding:2px 7px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}
.fb .fb-tbtn.g{background:var(--g)}
.fb .fb-nt{flex:1;font-size:14px;font-weight:400;line-height:1.4;white-space:pre-wrap}
.fb .fb-nt .fb-f{font-size:13px;color:#8fe0ab;white-space:normal}
.fb .fb-nt.ph0{color:var(--mut);font-style:italic}
.fb .fb-note .fb-link{font-size:13px;color:var(--g);text-decoration:underline}
.fb .fb-old{margin:16px 0 4px 22px;background:#121314;border:1px solid #2a2b2e;border-left:4px solid #6f747b;border-radius:8px;padding:0 12px 8px}
.fb .fb-oldl{list-style:none;margin:4px 0 0;padding:0}
.fb .fb-oldl li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:7px 0;border-top:1px solid #1f2022;font-size:14px;color:var(--txt)}
.fb .fb-oldl li:first-child{border-top:0}
.fb .fb-oldl .fb-ono{width:20px;height:20px;min-width:0;border-radius:50%;background:rgba(227,179,65,.5);color:#000;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.fb .fb-oldl .fb-ono-r{border-radius:5px;background:rgba(29,185,84,.5)}.fb .fb-oldl .fb-ono-s{background:rgba(169,156,255,.6)}
.fb .fb-oldl .fb-otx{min-width:0}.fb .fb-oldl .fb-nt{color:var(--mut);font-size:14px;line-height:1.5;display:block}
.fb .fb-oldl .fb-otime{display:block;font-size:12px;color:#8e8e8e;font-variant-numeric:tabular-nums;min-width:0}
.fb .fb-oldl .fb-odone{color:var(--g);font-size:12px;font-weight:700;white-space:nowrap}
.fb .fb-oldl .fb-oab{grid-column:2/4;display:flex;gap:6px;margin:0}
.fb .fb-oldl .fb-oab button{border:1px solid #444;background:transparent;color:var(--txt);border-radius:14px;padding:2px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;line-height:1.5}
.fb .fb-oldl .fb-oab button:hover{border-color:#888}
.fb .fb-decide{position:sticky;bottom:0;z-index:6;display:flex;flex-wrap:wrap;gap:10px 12px;background:#181818;margin:12px -16px -14px;padding:12px 16px;border:0;border-top:1px solid #333;border-radius:0 0 14px 14px;box-shadow:0 -10px 18px rgba(0,0,0,.45);align-items:center;flex-direction:row}
.fb .fb-decide>*{flex:1 0 100%}
.fb .fb-strip{display:grid;grid-template-columns:repeat(var(--n,10),minmax(0,1fr));gap:5px;width:100%;margin:2px 0 8px}
.fb .fb-tile{min-width:0;height:20px;display:flex;align-items:center;justify-content:center;position:relative;border:0;border-radius:7px;padding:0;margin:0;cursor:pointer;font-family:revert;font-size:12px;font-weight:400;line-height:normal;font-variant-numeric:tabular-nums;background:#3a3c41;color:#d6d8dc;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 3px rgba(0,0,0,.5)}
.fb .fb-tile.x{background:#3a3c41;color:#d6d8dc}
.fb .fb-tile.g{background:linear-gradient(#25c45d,#17a14a);color:#04260f}
.fb .fb-tile.a{background:linear-gradient(#f0c14f,#d2a12f);color:#2e2104}
.fb .fb-tile.r{box-shadow:0 0 0 2px #e5534b inset}
.fb .fb-tile:hover{filter:brightness(1.12)}
.fb .fb-tile.cur{outline:none;box-shadow:0 0 0 2px #fff inset}
.fb .fb-tile.cur.r{box-shadow:0 0 0 2px #e5534b inset}
.fb .fb-tile.new::after{content:"";position:absolute;right:4px;top:4px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.fb .fb-drow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 0 100%}
.fb .fb-dtitle{flex:0 1 auto;margin:0 0 0 auto;text-align:right;font-size:14px;font-weight:700;color:var(--txt)}
.fb .fb-btn{background:var(--g);color:#000;border:0;border-radius:8px;padding:12px 20px;font:inherit;font-weight:700;cursor:pointer}
.fb .fb-btn2{background:transparent;color:var(--txt);border:1px solid #444;border-radius:8px;padding:11px 18px;font:inherit;font-weight:600;cursor:pointer}
.fb .fb-btn:disabled,.fb .fb-btn2:disabled{opacity:.4;cursor:default}
.fb .fb-decide .fb-drow .fb-btn,.fb .fb-decide .fb-drow .fb-btn2{padding:7px 16px;line-height:1.25}
.fb .fb-dstate{font-size:14px;font-weight:700}.fb .fb-ds-g{color:var(--sg)}.fb .fb-ds-a{color:var(--sa)}
.fb .fb-nbox{display:flex;align-items:flex-start;gap:8px 10px;flex-wrap:wrap;border:1px solid var(--y);background:#1d1906;border-radius:10px;padding:8px 10px;margin:0 0 10px}
.fb .fb-nbox[hidden]{display:none}
.fb .fb-nhead{white-space:nowrap;padding-top:10px;margin:0;font-weight:700}
.fb .fb-ntext{flex:1 1 320px;width:auto;min-height:42px;height:42px;resize:none;overflow:hidden;padding:9px 10px;line-height:1.4;background:#0f0f0f;color:var(--txt);border:1px solid #444;border-radius:8px;font:inherit}
.fb .fb-nacts{display:contents}
.fb .fb-nbox .fb-btn,.fb .fb-nbox .fb-btn2{padding:10px 16px}
.fb .fb-vrow{flex:0 0 100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--mut);margin:0}
.fb .fb-vrec{border:1px solid #ff5a4f;background:transparent;color:#ff7a70;border-radius:8px;padding:7px 12px;font:inherit;font-weight:700;cursor:pointer}
.fb .fb-vrec.on{background:#ff5a4f;color:#fff}
.fb .fb-vrec2{border:1px solid #555;background:transparent;color:var(--txt);border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.fb .fb-qchips{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:4px;padding-left:10px;border-left:1px solid #3a3a3a}
.fb .fb-qchip{border:1px solid #444;background:transparent;color:#cfcfcf;border-radius:14px;padding:4px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.fb .fb-qchip:hover{border-color:#888;color:#fff;background:#222}
.fb .fb-vp{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:20px;padding:3px 10px 3px 4px;background:rgba(227,179,65,.16);color:var(--y);font:inherit;font-weight:700;font-size:12px;cursor:pointer;vertical-align:middle;font-variant-numeric:tabular-nums}
.fb .fb-vp i{width:20px;height:20px;border-radius:50%;background:var(--y);color:#000;font-style:normal;font-size:9px;display:flex;align-items:center;justify-content:center}
.fb .fb-vp b{display:inline-block;width:40px;height:10px;background:repeating-linear-gradient(90deg,var(--y) 0 2px,transparent 2px 4px);opacity:.7;border-radius:2px}
.fb .fb-helpbar .fb-hbtn,.fb .fb-helpbar .fb-hbtn2{height:30px;padding:0 12px;border-radius:15px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--mut);line-height:1.5}
.fb .fb-helpbar .fb-hbtn.on{background:var(--y);border-color:var(--y);color:#000}
@media (max-width:640px){.fb .fb-strip{grid-template-columns:repeat(min(var(--n,10),5),minmax(0,1fr))}.fb .fb-tile{height:28px}.fb .fb-decide .fb-drow .fb-btn,.fb .fb-decide .fb-drow .fb-btn2{padding:11px 16px}.fb .fb-qchips{margin-left:0;padding-left:0;border-left:0}}
.fb .fb-txt{cursor:text;border-radius:4px}.fb .fb-txt:hover{background:#222}.fb .fb-txt.ph0{color:var(--mut);font-style:italic}
.fb .fb-gt{cursor:text;border-radius:4px}.fb .fb-gt:hover{background:#222}
.fb .fb-f{font-size:13px;color:#8fe0ab}
.fb .fb-nt .fb-vp{margin-top:4px}
.fb .fb-del{font-size:13px;color:var(--g);background:none;border:0;padding:0;text-decoration:underline;font:inherit;font-size:13px;cursor:pointer}
.fb .fb-glist li{display:flex;gap:10px;align-items:flex-start;padding:6px;border-top:0}
.fb .fb-ied{width:100%;min-height:54px;background:#0f0f0f;color:var(--txt);border:1px solid var(--y);border-radius:6px;padding:6px 8px;font:inherit;font-size:14px;margin:0}
.fb .fb-note.editing{background:#12251a;outline:2px solid var(--g);outline-offset:-2px;border-radius:8px}
.fb .fb-nlist .fb-empty{padding:8px 6px}
.fb .fb-tab-n.on{color:#f0c75e;text-shadow:0 0 8px rgba(227,179,65,.35)}.fb .fb-tab-m.on{color:#a9c4ff;text-shadow:0 0 8px rgba(143,179,255,.35)}
.fb .fb-tab.on{background:linear-gradient(#2c2e31,#1d1e21);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 4px rgba(0,0,0,.6)}
.fb .fb-tab:hover{color:#cfd3d8}
.fb .fb-play,.fb .fb-zb{padding:1px 6px}.fb .fb-zb.fb-wide{padding:1px 10px}.fb .fb-ur .fb-zb.fb-wide{padding:1px 12px}
.fbm{color:#eee;padding:14px 16px}
.fbm-sub{font-size:14px;color:#9a9a9a;height:22px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:-6px 0 10px}
.fb .fb-zb.fb-wide,.fb .fb-ur .fb-zb.fb-wide{padding-top:0;padding-bottom:0}
.fb .fb-pane-notes{border-left:3px solid var(--y);padding-left:12px}.fb .fb-pane-msg{border-left:3px solid #8fb3ff;padding-left:12px}
.fbm .fbm-sub{font-size:13px;color:#7d8187}
/* the faderBack name in the player's top row, as in mock-up 145 (.fbl / .fbrand / .fbn / .fbby) */
.fb .fb-brandcell .st-brand{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.fb .fb-brandcell .st-brand-icon{width:30px;height:30px;flex:none;display:block}
.fb .fb-brandcell .st-brand-name{font-size:21px;line-height:1;letter-spacing:-.02em;font-weight:400;color:#fff}.fb .fb-brandcell .st-brand-name b{font-weight:800;color:var(--g)}
.fb .fb-brandcell .st-brand-by{align-self:flex-end;font-size:11px;color:#8f8f8f;margin:0 0 1px 1px;line-height:1.5}
@media (max-width:700px){.fb .fb-brandcell .st-brand-by{display:none}}
.fbm .fbm-ch{padding:8px 4px}
.fbm .fbm-nm{letter-spacing:.18em}
.fbm .fbm-db{margin-top:0}
.fbm .fbm-ms button{font-family:revert;line-height:normal;border-radius:6px}
.fbm .fbm-fz{margin-top:20px}
.fbm .fbm-nm{padding:0}
.fbm .fbm-ms{margin-top:2px}
.fb .st-g{color:var(--sg)!important}.fb .st-a{color:var(--sa)!important}.fb .st-r{color:var(--sr)!important}.fb .st-x{color:var(--mut)!important}
.fb .st-r::before,.fb .fb-pickit .st.st-r::before{display:none}
.fb .fb-sdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:0;background:var(--sx);box-shadow:none}
.fb .fb-sd-g{background:var(--sg)}.fb .fb-sd-a{background:var(--sa)}.fb .fb-sd-r{background:var(--sr);box-shadow:none}
.fb .fb-picksum b{color:var(--txt)}
.fb .fb-chev{display:inline-flex;width:auto;height:auto;border:0;transform:none;margin:0;color:var(--y);transition:transform .15s}.fb .fb-chev svg{display:block}
.fb .fb-pickbtn[aria-expanded="true"] .fb-chev{transform:rotate(180deg)}
.fbm .fbm-nm{margin-bottom:4px}.fb .fb-chev svg{font-weight:400}
.fbm .fbm-ch{padding-bottom:6px}
.fbm .fbm-head{margin-bottom:8px}
.fb .fb-duo{grid-template-columns:minmax(0,1fr)}@media (min-width:1100px){.fb .fb-duo{grid-template-columns:minmax(380px,1fr) 560px}}
.fb .fb-subh small{margin-right:0}
.fb .fb-duo>.fb-mixhost{order:0}
@media (min-width:641px) and (max-width:1099px){.fb .fb-duo>.fb-mixhost{order:-1}}   /* mock-up 105: from 641 to 1099 px the mixer comes first; phones have the notes first */
@media (max-width:700px){.fb .fb-pick{margin-top:8px}}
@media (max-width:640px){
  .fb .fb-h1{font-size:23px}.fb .fb-ver{display:block;margin:2px 0 0}
  .fb .fb-tab{font-size:13px;padding:8px 6px;column-gap:5px}
  .fb .fb-decide .fb-dtitle{margin-left:0;text-align:left;flex:1 0 100%;order:-1}
  .fbm .fbm-head{flex-wrap:nowrap}.fbm .fbm-lm{letter-spacing:.16em}
  .fbm .fbm-ch{grid-template-columns:80px 56px 1fr auto;padding:8px 4px}
  .fbm .fbm-nm{font-size:11px;margin:0}
}
@media (max-width:600px){.fb .fb-hint{flex-direction:column;gap:4px;min-height:3em}.fb .fb-hint span{white-space:normal}}
@media (pointer:coarse){.fb .fb-rtab{height:27px;line-height:27px;min-width:84px;font-size:14px;border-radius:14px}}
.fb .fb-subh{flex-wrap:nowrap}
@media (max-width:640px){.fbm .fbm-ch{padding-bottom:6px}}
/* the notes on the waveform, as in mock-up 145 (.mk / .nline / .rband / .hdl / .oldmk / .ph) */
.fb .fb-wave{overflow:visible}
.fb .fb-wave canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:10px}
.fb .fb-ph{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none;z-index:2}
.fb .fb-mk{position:absolute;top:-9px;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:var(--y);color:#000;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;z-index:3;border:2px solid #0a0a0a;line-height:1;user-select:none}
.fb .fb-mk:hover{transform:translateX(-50%) scale(1.15)}
.fb .fb-mk.mix{background:var(--g)}.fb .fb-mk.sel{background:#fff}
.fb .fb-mk.pend{background:#0a0a0a;border:2px dashed var(--y);color:var(--y);cursor:pointer;pointer-events:auto}
.fb .fb-mk.pend .px{display:none}.fb .fb-mk.pend:hover{background:var(--r);border:2px solid var(--r);color:#000}.fb .fb-mk.pend:hover .pp{display:none}.fb .fb-mk.pend:hover .px{display:inline}
.fb .fb-nline{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--y);opacity:.75;pointer-events:none;z-index:1}
.fb .fb-nline.sel{opacity:1;box-shadow:0 0 0 1px rgba(227,179,65,.35)}
.fb .fb-nline.pend{background:none;border-left:2px dashed var(--y);opacity:.9}
.fb .fb-rband{position:absolute;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.5);border-radius:4px;pointer-events:none;z-index:1}
.fb .fb-rband.sel{background:rgba(255,255,255,.16);border-color:#fff}
.fb .fb-rband.mix{background:rgba(29,185,84,.15);border-color:rgba(29,185,84,.8)}
.fb .fb-rband.mix.sel{background:rgba(29,185,84,.24);border-color:var(--g)}
.fb .fb-rband.edit{border-width:2px;border-color:var(--g);background:rgba(29,185,84,.26)}
.fb .fb-hdl{position:absolute;top:0;bottom:0;width:14px;cursor:ew-resize;pointer-events:auto;touch-action:none;color:#fff}
.fb .fb-hdl.a{left:-7px}.fb .fb-hdl.b{right:-7px}
.fb .fb-hdl::after{content:'';position:absolute;left:6px;top:32%;bottom:32%;width:3px;border-radius:2px;background:currentColor;opacity:.85}
.fb .fb-rband.mix .fb-hdl{color:var(--g)}
.fb .fb-hdl:hover::after{opacity:1;top:20%;bottom:20%}
.fb .fb-oldmk{position:absolute;bottom:4px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:rgba(227,179,65,.45);border:1px solid rgba(227,179,65,.8);cursor:pointer;z-index:3}
.fb .fb-oldmk.r{border-radius:3px;background:rgba(29,185,84,.4);border-color:rgba(29,185,84,.8)}
@media (pointer:coarse){.fb .fb-mk{width:28px;height:28px;font-size:14px;top:-14px}}
.fb .fb-ov{position:relative}.fb .fb-ov canvas{position:absolute;inset:0;width:100%;height:100%}
.fb .fb-ovw{position:absolute;top:0;bottom:0;border:2px solid var(--y);border-radius:4px;background:rgba(227,179,65,.12);pointer-events:none}
.fb .fb-ovh{position:absolute;top:-1px;bottom:-1px;width:12px;cursor:ew-resize;pointer-events:none}
.fb .fb-ovh.l{left:-7px}.fb .fb-ovh.r{right:-7px}
.fb .fb-ovh::after{content:'';position:absolute;left:4px;top:25%;bottom:25%;width:4px;border-radius:2px;background:var(--y)}
.fb .fb-zl{font-size:13px;color:var(--mut)}.fb .fb-zl b{color:var(--txt)}
.fb .fb-zb[hidden]{display:none}
/* mock-up 76: the message after a delete is for screen readers; on screen, Undo lights up gold */
.fb-toast{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* the Send / Approve checks and the end of the album, as in mock-up 145 (.sendsum .heardn .lr .lastbox .albdone) */
.fb .fb-decide .fb-sum{flex:1 0 100%;margin-bottom:2px;max-height:40vh;overflow-y:auto;background:#141414;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px}
.fb .fb-sum ul{margin:6px 0 0;padding-left:20px}.fb .fb-sum li{margin:2px 0}
.fb .fb-sum .fb-warn{margin:8px 0 0;color:var(--y);font-weight:600}
.fb .fb-sum li.fb-nudge,.fb .fb-sum p.fb-nudge{color:var(--txt);list-style:none;margin-left:-18px}
.fb .fb-sum p.fb-nudge{margin-left:0}
.fb .fb-nudge::before{content:"ⓘ ";color:var(--y);font-weight:800}
.fb .fb-sum li.fb-lr{color:var(--txt);list-style:none;margin-left:-18px}
.fb .fb-sum li.fb-lr::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;box-sizing:border-box;border:2px solid #ff4d3d;box-shadow:0 0 5px rgba(255,77,61,.6);margin:0 8px 0 0;vertical-align:-1px}
.fb .fb-awp{margin:6px 0 4px;padding-left:10px;border-left:3px solid var(--y);color:var(--txt)}
.fb .fb-lastbox{border:1px solid var(--g);background:rgba(29,185,84,.09);border-radius:10px;padding:10px 14px;margin:8px 0 6px;font-size:15px;line-height:1.5}
.fb .fb-lastbox b{color:#5dff9a}
.fb .fb-albdone{display:flex;flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;font-weight:700;color:#5dff9a;margin:2px 0 4px}
.fb .fb-albdone span{color:var(--mut);font-weight:400;font-size:14px}
.fb-gd{font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}.fb-gd .fb-gd-x{line-height:normal}
.fb .fb-ntext{line-height:1.4}
.fb .fb-mk{line-height:1.5}
.fb .fb-top{margin:0}
.fb .fb-nlist li.fb-empty{display:flex;gap:10px;align-items:flex-start;border-top:0}
.fb .fb-glist li.fb-empty{display:flex;gap:10px;align-items:flex-start}
.fb .fb-brandcell{display:flex;align-items:center;gap:14px;min-width:0}
.fb .fb-vsw{margin-left:0}
@media (min-width:641px){.fbm .fbm-tail{display:flex;align-items:flex-end;justify-content:center}}
.fb .fb-sum li.fb-nudge{margin-left:0}
@media (max-width:1099px){.fb .fb-duo{display:flex;flex-direction:column;gap:0}.fb .fb-duo>.fb-ncard,.fb .fb-duo .fbm{margin:0 0 14px}}
@media (max-width:1099px){.fb .fb-duo{align-items:stretch}.fb .fb-duo>*{min-width:0}}

/* ===== MOCK-UP 145's BEHAVIOUR PIECES (the menu, the loop, the first-time tips, the drag time) ===== */
.fb .fb-wfad{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--y);padding:6px;border-radius:6px;background:#1d1906;margin-bottom:6px;border-top:0}
.fb .fb-wfad[hidden]{display:none}
.fb .fb-wfad .fb-wtxt{flex:1}
.fb .fb-autot{color:var(--mut);font-size:12px}
.fb .fb-nlist .fb-f{font-size:13px;color:#8fe0ab}
.fb .fb-mk.drag{cursor:grabbing;transform:translateX(-50%) scale(1.25);box-shadow:0 0 0 3px rgba(227,179,65,.35)}
.fb .fb-mktip{position:absolute;top:12px;transform:translateX(-50%);background:#000;color:var(--y);font-size:12px;font-weight:700;padding:2px 6px;border-radius:4px;pointer-events:none;white-space:nowrap;z-index:4}
.fb .fb-selr{position:absolute;top:0;bottom:0;pointer-events:none;background:rgba(255,255,255,.12);border-left:1px solid #fff;border-right:1px solid #fff}
.fb .fb-selr.loop{background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.7);z-index:3}
.fb .fb-selr .fb-lstop{position:absolute;right:4px;top:4px;pointer-events:auto;background:#fff;color:#000;border:0;border-radius:6px;font:inherit;font-size:12px;line-height:1.3;white-space:nowrap;font-weight:800;padding:5px 11px;cursor:pointer;z-index:4;box-shadow:0 2px 8px rgba(0,0,0,.7);letter-spacing:.02em}
.fb .fb-selr .fb-lstop:hover{background:var(--y);color:#000}
.fb .fb-pill{position:absolute;top:auto;bottom:8px;transform:translateX(-50%);background:var(--y);color:#000;border:0;border-radius:20px;padding:0;font:inherit;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.5);display:inline-flex;align-items:center;overflow:hidden;gap:0;z-index:5;width:max-content;max-width:calc(100% - 8px);flex-wrap:wrap;justify-content:center}
.fb .fb-pill button{border-radius:0;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;color:#000}
.fb .fb-pill .fb-pill-a{background:transparent;border:0;font-weight:700;padding:7px 8px 7px 12px}
.fb .fb-pill .fb-pill-n{background:rgba(0,0,0,.08);border:0;border-left:1px solid rgba(0,0,0,.2);font-weight:600;padding:7px 10px}
.fb .fb-pill .fb-pill-n:hover{background:rgba(0,0,0,.18)}
.fb .fb-pill .fb-pill-d{background:#1a1a1a;border:0;border-left:1px solid rgba(0,0,0,.3);color:var(--r);font-weight:700;padding:7px 10px}
.fb .fb-pill .fb-pill-d:hover{background:var(--r);color:#000}
.fb .fb-pill .fb-pill-x{background:rgba(0,0,0,.12);border:0;border-left:1px solid rgba(0,0,0,.2);font-size:18px;font-weight:700;line-height:1;width:32px;align-self:stretch;padding:0}
.fb .fb-pill .fb-pill-x:hover{background:rgba(0,0,0,.25)}
@media (max-width:640px){.fb .fb-pill{border-radius:14px}.fb .fb-pill button{flex:1 1 auto}}
.fb .fb-coach{position:absolute;inset:0;pointer-events:none;z-index:6}
.fb .fb-coach .cbar{position:absolute;top:12%;bottom:12%;left:30%;width:0;background:rgba(29,185,84,.22);border:2px solid var(--g,#1DB954);border-radius:6px;animation:fbcbar 2.6s ease-in-out infinite}
.fb .fb-coach .chand{position:absolute;top:50%;left:30%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;box-shadow:0 0 0 7px rgba(255,255,255,.22);animation:fbchand 2.6s ease-in-out infinite}
@keyframes fbcbar{0%,15%{width:0;opacity:1}65%,85%{width:25%;opacity:1}100%{width:25%;opacity:0}}
@keyframes fbchand{0%,15%{left:30%;opacity:1}65%,85%{left:55%;opacity:1}100%{left:55%;opacity:0}}
.fb .fb-coach .ctext{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:#000;color:#fff;border:1px solid var(--g,#1DB954);border-radius:20px;padding:6px 8px 6px 14px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;max-width:calc(100% - 16px);width:max-content;box-shadow:0 2px 12px rgba(0,0,0,.6)}
.fb .fb-coach .cx,.fb .fb-wnudge .cx{pointer-events:auto;background:none;border:0;color:#aaa;font-size:20px;cursor:pointer;line-height:1;padding:0 4px}
.fb .fb-coach .cx:hover,.fb .fb-wnudge .cx:hover{color:#fff}
.fb .fbm{position:relative}
.fb .fb-wnudge{position:absolute;left:12px;right:12px;top:70px;z-index:5;display:flex;align-items:center;gap:10px;background:#1d1906;border:1px solid var(--y);color:#f3d27a;border-radius:10px;padding:10px 12px;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.6);transition:opacity .4s}
.fb .fb-wnudge b{color:#fff}.fb .fb-wnudge span{flex:1}.fb .fb-wnudge.out{opacity:0}
@media (prefers-reduced-motion:reduce){.fb .fb-coach .cbar,.fb .fb-coach .chand{animation:none}}
.fb .fb-vwarn{flex:0 0 100%;color:#ffb35c;font-size:13px}
.fb .fb-vwarn[hidden]{display:none}
.fb .fb-v2band{margin:8px 0 10px;color:var(--txt)}.fb .fb-v2band b{color:#8fb3ff}
/* mock-up 145: the overview's gold box: grab it (hand), drag its ends to zoom (they take the pointer) */
.fb .fb-ov{cursor:grab}.fb .fb-ov:active{cursor:grabbing}
.fb .fb-ovh{pointer-events:auto;touch-action:none;cursor:ew-resize}
/* Joe, 20 Oct 2026: no double borders. The open song has a white border, red once it has notes not sent; no white dot. */
.fb .fb-tile.new::after{content:none}
/* Joe, 20 Oct 2026: with a region open the mixer's header broke onto three lines ("Reset this region" was wider than
   "Reset faders"). The button now says "Reset region" (as wide as "Reset faders"), and the title never wraps. */
.fbm .fbm-reset{white-space:nowrap}
@media (min-width:641px){.fbm .fbm-title{white-space:nowrap}.fbm .fbm-hbtns{flex-wrap:nowrap}}   /* a phone keeps the mock-up's two-line header */
/* ===== MOCK-UP 145, the second pass (20 Oct 2026): how things respond, not only how they look ===== */
.fb button:focus-visible,.fb input:focus-visible,.fb textarea:focus-visible,.fb summary:focus-visible,.fb [tabindex]:focus-visible,.fb-gd button:focus-visible{outline:2px solid #8fb3ff;outline-offset:2px}
.fbm .fbm-ms button:focus-visible{outline:none}.fbm .fbm-ms button:focus-visible i{outline:2px solid #5dff9a;outline-offset:2px}
.fbm .fbm-sw [tabindex]:focus-visible,.fbm .fbm-sw button:focus-visible{outline:2px solid #5dff9a;outline-offset:2px}
.fb .fb-tile:focus-visible{outline:2px solid #5dff9a;outline-offset:2px}
.fbm .fbm-lm{white-space:nowrap}
.fb .fb-saved{pointer-events:none;white-space:nowrap}
.fb .fb-oldl li{flex-wrap:nowrap}.fb .fb-oldl .fb-nt{white-space:normal}
.fb .fb-wfad .fb-link{color:var(--g);font-size:14px;line-height:21px;text-decoration:underline}
.fb .fb-pickit:focus-visible{outline:none;background:#222}.fb .fb-pickit.on,.fb .fb-pickit.on:focus-visible{outline:1px solid var(--y);outline-offset:-1px}
.fb .fb-pill .fb-pill-x{font-family:revert;padding:1px 6px}
@media (max-width:600px){.fb .fb-hint{min-height:calc(3em + 9px)}}
.fb .fb-pickit.on:focus-visible{background:rgba(227,179,65,.1)}
.fb .fb-nlist .fb-nact{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.fb .fb-nlist .fb-nact .fb-link{white-space:nowrap}
/* MORE THAN 6 PARTS: the mixer takes the whole row under the waveform (Joe, 20 Oct 2026: "When the mixer has more than 6
   channels, it should take the whole row and the notes list should be dropped down"; "a reasonably sized static height";
   "best UX please"). Tried for every song first: on a laptop a full-row mixer pushes the notes below the screen, and
   writing a note scrolls the waveform away; so up to 6 parts the mixer stays beside the notes (both in view), and only a
   wide set takes the row, left-aligned (channels keep their width; more scroll sideways inside it), faders a steady
   120 px (js/faderback-mixer.js FIXED_FBH, WIDE_FROM), with the notes right under it. Phones keep their own order. */
@media (min-width:641px){
  .fb .fb-duo:has(.fbm-wide){display:flex;flex-direction:column;gap:0;align-items:stretch}
  .fb .fb-duo:has(.fbm-wide)>*{min-width:0}
  .fb .fb-duo:has(.fbm-wide)>.fb-mixhost{order:-1}
  .fb .fb-duo:has(.fbm-wide)>.fb-ncard,.fb .fb-duo .fbm-wide{margin:0 0 14px}
  .fb .fbm-wide .fbm-well{justify-content:flex-start}
  .fb .fbm-wide .fbm-ch{flex:0 0 84px;min-width:84px}
  .fb .fbm-wide .fbm-fz{margin:8px auto 14px}
  .fb .fbm-wide .fbm-well{padding:8px 10px 8px}
}
/* the wide mixer's one compact top line (more than 6 parts; js/faderback-mixer.js): no bottom line; "N of N parts ready"
   only while the parts load */
.fb .fbm-wide .fbm-head{flex-wrap:nowrap;align-items:center;margin-bottom:8px}
.fb .fbm-wide .fbm-lg{display:flex;align-items:baseline;gap:12px;min-width:0;flex:1 1 auto}
.fb .fbm-wide .fbm-title{font-size:12px;letter-spacing:.18em;white-space:nowrap}
.fb .fbm-wide .fbm-sub{margin:0;height:auto;min-height:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb .fbm-wide .fbm-hbtns{flex-wrap:nowrap;gap:8px}
.fb .fbm-wide .fbm-ready{white-space:nowrap}
.fb .fbm-wide .fbm-ready.done{display:none}
.fb .fbm-wide .fbm-foot[hidden]{display:none}
.fb .fbm-wide{padding-top:12px;padding-bottom:12px}

/* the channel name at the bottom, like a console's scribble strip (Joe, 20 Oct 2026); phones keep it first in the row */
.fbm .fbm-nm{position:relative;height:18px;margin:4px 3px 0;padding:0 3px;display:block;line-height:18px;font-size:9px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:4px;background:linear-gradient(#0b0c0d,#141517);box-shadow:0 1px 2px rgba(0,0,0,.9) inset,0 1px 0 rgba(255,255,255,.05);color:#dfe2e6}
.fbm-ch.auto .fbm-nm{color:#1DB954}
@media (max-width:640px){.fbm .fbm-nm{order:-1;margin:0;padding:0;height:auto;line-height:1.15;white-space:normal;background:none;box-shadow:none;color:#b9bcc2}}
/* the tip line, about half as tall (Joe, 20 Oct 2026: "its twice as tall as needed ... all in an effort to make the faders taller") */
.fb .fb-hint{margin-top:4px;padding-top:3px;font-size:12px;line-height:1.4;min-height:1.4em}

/* less dark space above the dB and under the name, so the faders get it (Joe, 20 Oct 2026: "the black space at the top and
   bottom of the mixer window should be smaller. move the track names down and the dB up. then extend the faders") */
@media (min-width:641px){
  .fb .fbm .fbm-well{padding-top:6px;padding-bottom:4px}
  .fb .fbm .fbm-ch{padding-top:2px;padding-bottom:2px}
  .fb .fbm .fbm-db{margin-top:0}
  .fb .fbm .fbm-fz{margin-top:14px;margin-bottom:22px}
  .fb .fbm-wide .fbm-fz{margin:10px auto 20px}
}
/* a name cut short shows whole when you point at it, tips on or off (Joe, 20 Oct 2026) */
.fbm .fbm-nm.cut{cursor:default}
.fbm .fbm-nm{overflow:visible}
.fbm .fbm-nmt{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbm .fbm-nm.cut:hover{z-index:6}
.fbm .fbm-nm.cut:hover::after{content:attr(data-name);position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);white-space:nowrap;padding:3px 7px;border-radius:4px;background:#26282c;color:#fff;font-size:11px;letter-spacing:.06em;box-shadow:0 2px 8px rgba(0,0,0,.7);pointer-events:none}
@media (max-width:640px){.fbm .fbm-nmt{white-space:normal}}
/* mock-ups 149-150 (Joe, 20 Oct 2026): the note box opens at the click, under the waveform (a song note's under its button),
   its arrow at the spot; a little condensed; drag its top line to move it */
.fb{position:relative}
.fb .fb-nbox.fb-nfloat{position:absolute;z-index:40;width:420px;max-width:calc(100% - 16px);margin:0;padding:9px 10px 10px;gap:6px 8px;align-items:center;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.75)}
.fb .fb-nfloat:before{content:"";position:absolute;left:var(--ax,40px);top:-7px;width:12px;height:12px;background:#1d1906;border-left:1px solid var(--y);border-top:1px solid var(--y);transform:rotate(45deg)}
.fb .fb-nfloat.up:before{top:auto;bottom:-7px;transform:rotate(225deg)}
.fb .fb-nfloat.free:before{display:none}
.fb .fb-nfloat .fb-nhead{flex:0 0 100%;padding-right:22px!important;display:flex;align-items:center;gap:6px;padding:0;font-size:13px;cursor:move;white-space:nowrap}
.fb .fb-nfloat .fb-nhead b{color:var(--y)}
.fb .fb-nfloat .fb-nx{position:absolute;top:6px;right:8px;border:0;background:none;color:#888;font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.fb .fb-nfloat .fb-nx:hover{color:#fff}
.fb .fb-nfloat .fb-ntext{flex:0 0 100%;min-height:38px;height:38px;padding:8px 9px;font-size:14.5px}
.fb .fb-nfloat .fb-vrow{order:3;gap:6px}
.fb .fb-nfloat .fb-qchip{padding:2px 8px;font-size:11.5px}
.fb .fb-nfloat .fb-vrec{padding:4px 9px;font-size:13px}
.fb .fb-nfloat .fb-btn,.fb .fb-nfloat .fb-btn2{order:4;padding:6px 13px;font-size:14px}
.fb .fb-nfloat .fb-btn2{margin-left:auto}
.fb .fb-nfloat .fb-btn{order:5;background:var(--y);color:#1a1400}
@media (max-width:640px){.fb .fb-nbox.fb-nfloat{width:auto;left:8px!important;right:8px}}

/* the −∞ stripes under a fader stay clear of Mute and Solo (Joe's screenshot, 20 Oct 2026: they ran into the M/S tray once
   the dark space was trimmed): a shorter tail, and room under every fader for it */
@media (min-width:641px){.fbm .fbm-tail{height:14px}}
/* the bell on the top bar (Joe, 20 Oct 2026): lit blue (the Messages colour) while riddimBank's message is unread, glowing
   for a few seconds when it arrives */
.fb .fb-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:15px;border:1px solid var(--line);background:transparent;color:var(--mut);cursor:pointer}
.fb .fb-bell:hover{color:#fff;border-color:#555}
.fb .fb-belldot{display:none;position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:#8fb3ff;box-shadow:0 0 0 2px #141414}
.fb .fb-bell.lit{color:#cfe0ff;border-color:#8fb3ff;background:rgba(143,179,255,.16)}
.fb .fb-bell.lit .fb-belldot{display:block}
.fb .fb-bell.glow{animation:fbBell 1s ease-in-out 6}
@keyframes fbBell{0%,100%{box-shadow:0 0 0 0 rgba(143,179,255,0)}50%{box-shadow:0 0 14px 4px rgba(143,179,255,.75)}}
@media (prefers-reduced-motion:reduce){.fb .fb-bell.glow{animation:none}}
/* Help, when on, is an outline (Joe, 20 Oct 2026: the bell was "a little overshadowed by the glowing help icon"); the lit bell
   grows into a blue pill that says "1 new message" */
.fb .fb-helpbar .fb-hbtn.on{background:transparent;border-color:rgba(227,179,65,.7);color:#e9c766}
.fb .fb-belltxt{display:none;font-size:13px;font-weight:700;white-space:nowrap}
.fb .fb-bell.lit{width:auto;gap:6px;padding:0 12px 0 10px;background:#8fb3ff;border-color:#8fb3ff;color:#06102a}
.fb .fb-bell.lit .fb-belltxt{display:inline}
.fb .fb-bell.lit .fb-belldot{display:none}
.fb .fb-bell.lit:hover{color:#000;background:#a9c4ff}
/* Notes and Messages side by side when the wide mixer has the whole row (Joe, 20 Oct 2026) */
.fb .fb-splith{display:none}
.fb .fb-ncard.fb-split>.fb-tabs{display:none}
.fb .fb-ncard.fb-split .fb-panes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px;align-items:start}
.fb .fb-ncard.fb-split .fb-panes>.fb-pane[hidden]{display:block}
.fb .fb-ncard.fb-split .fb-splith{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px;font-weight:700}
.fb .fb-ncard.fb-split .fb-splith-n{color:#f0c75e}.fb .fb-ncard.fb-split .fb-splith-m{color:#a9c4ff}


:root{--g:#1DB954}
body{margin:0;background:#0b0b0b;color:#eee;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.fbx-top{max-width:1180px;margin:0 auto;padding:22px 20px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.fbx-logo{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:600;color:#fff;letter-spacing:-.01em}.fbx-logo b{color:var(--g)}.fbx-logo small{font-size:12px;color:#8a8a8a;font-weight:500;margin-left:2px}
.fbx-soon{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#0b0b0b;background:var(--g);border-radius:20px;padding:5px 12px;font-weight:800}
.fbx-hero{max-width:1180px;margin:0 auto;padding:46px 20px 26px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:end}
.fbx-hero h1{margin:0 0 14px;font-size:46px;line-height:1.08;letter-spacing:-.02em;color:#fff}
.fbx-hero h1 em{font-style:normal;color:var(--g)}
.fbx-hero p{margin:0;font-size:18px;line-height:1.55;color:#c9c9c9}
.fbx-join{background:#141414;border:1px solid #2a2a2a;border-radius:14px;padding:18px}
.fbx-join h2{margin:0 0 4px;font-size:17px;color:#fff}.fbx-join p{margin:0 0 12px;font-size:14px;color:#9a9a9a}
.fbx-join form{display:flex;gap:8px;flex-wrap:wrap}
.fbx-join input{flex:1 1 220px;min-width:0;background:#0b0b0b;color:#fff;border:1px solid #3a3a3a;border-radius:9px;padding:12px 13px;font:inherit;font-size:15px}
.fbx-join input:focus{outline:none;border-color:var(--g)}
.fbx-join button{background:var(--g);color:#06170d;border:0;border-radius:9px;padding:12px 18px;font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.fbx-thanks{color:var(--g);font-weight:700;font-size:15px;margin:6px 0 0}
.fbx-err{color:#ff8a80;font-size:14px;margin:8px 0 0}.fbx-fine{color:#777;font-size:12px;margin:10px 0 0}.fbx-fine a{color:#9a9a9a}.fbx-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fbx-try{max-width:1180px;margin:0 auto;padding:8px 20px 4px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.fbx-try b{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}.fbx-try span{color:#9a9a9a;font-size:14px}
.fbx-uses{max-width:1180px;margin:10px auto 0;padding:26px 20px 10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fbx-uses div{background:#141414;border:1px solid #2a2a2a;border-radius:14px;padding:18px}
.fbx-uses h3{margin:0 0 6px;font-size:16px;color:#fff}.fbx-uses p{margin:0;font-size:14.5px;line-height:1.55;color:#b5b5b5}
.fbx-foot{max-width:1180px;margin:0 auto;padding:22px 20px 40px;color:#777;font-size:13px}
.fbx-foot a{color:#9a9a9a}
/* the demo player: the client's buttons (Send my changes, Approve) are not part of the demo */
.st-wrap .st-brand,.st-wrap > h1,.st-wrap .st-foot{display:none}
.fb .fb-decide{display:none}
@media (max-width:860px){.fbx-hero{grid-template-columns:1fr;gap:22px;padding-top:30px}.fbx-hero h1{font-size:34px}.fbx-uses{grid-template-columns:1fr}}